diff --git a/5021.064bac95.iframe.bundle.js b/5021.03df505e.iframe.bundle.js
similarity index 99%
rename from 5021.064bac95.iframe.bundle.js
rename to 5021.03df505e.iframe.bundle.js
index 07125cda0..572761124 100644
--- a/5021.064bac95.iframe.bundle.js
+++ b/5021.03df505e.iframe.bundle.js
@@ -536,5 +536,5 @@
   margin-top: 4px;
   margin-bottom: -4px;
   color: ${p=>`var(--charcoal-${p.invalid?"assertive":"text2"})`};
-`;try{TextField.displayName="TextField",TextField.__docgenInfo={description:"",displayName:"TextField",props:{prefix:{defaultValue:null,description:"",name:"prefix",required:!1,type:{name:"ReactNode"}},suffix:{defaultValue:null,description:"",name:"suffix",required:!1,type:{name:"ReactNode"}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"string"}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"string"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"((value: string) => void)"}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"((event: KeyboardEvent<Element>) => void)"}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"((event: FocusEvent<Element, Element>) => void)"}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"((event: FocusEvent<Element, Element>) => void)"}},showCount:{defaultValue:null,description:"",name:"showCount",required:!1,type:{name:"boolean"}},showLabel:{defaultValue:null,description:"",name:"showLabel",required:!1,type:{name:"boolean"}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"string"}},invalid:{defaultValue:null,description:"",name:"invalid",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string"}},requiredText:{defaultValue:null,description:"",name:"requiredText",required:!1,type:{name:"string"}},subLabel:{defaultValue:null,description:"",name:"subLabel",required:!1,type:{name:"ReactNode"}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onCompositionStart:{defaultValue:null,description:"",name:"onCompositionStart",required:!1,type:{name:"CompositionEventHandler<Element>"}},onCompositionEnd:{defaultValue:null,description:"",name:"onCompositionEnd",required:!1,type:{name:"CompositionEventHandler<Element>"}},onCompositionUpdate:{defaultValue:null,description:"",name:"onCompositionUpdate",required:!1,type:{name:"CompositionEventHandler<Element>"}},onSelect:{defaultValue:null,description:"",name:"onSelect",required:!1,type:{name:"ReactEventHandler<Element>"}},onBeforeInput:{defaultValue:null,description:"",name:"onBeforeInput",required:!1,type:{name:"FormEventHandler<Element>"}},onInput:{defaultValue:null,description:"",name:"onInput",required:!1,type:{name:"FormEventHandler<Element>"}},autoCapitalize:{defaultValue:null,description:"",name:"autoCapitalize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"on"'},{value:'"off"'},{value:'"sentences"'},{value:'"words"'},{value:'"characters"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#TextField"]={docgenInfo:TextField.__docgenInfo,name:"TextField",path:"packages/react/src/components/TextField/index.tsx#TextField"})}catch(__react_docgen_typescript_loader_error){}try{TextFieldLabel.displayName="TextFieldLabel",TextFieldLabel.__docgenInfo={description:"",displayName:"TextFieldLabel",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string"}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"boolean"}},requiredText:{defaultValue:null,description:"",name:"requiredText",required:!1,type:{name:"string"}},subLabel:{defaultValue:null,description:"",name:"subLabel",required:!1,type:{name:"ReactNode"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#TextFieldLabel"]={docgenInfo:TextFieldLabel.__docgenInfo,name:"TextFieldLabel",path:"packages/react/src/components/TextField/index.tsx#TextFieldLabel"})}catch(__react_docgen_typescript_loader_error){}try{AssistiveText.displayName="AssistiveText",AssistiveText.__docgenInfo={description:"",displayName:"AssistiveText",props:{ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"((instance: HTMLParagraphElement | null) => void) | RefObject<HTMLParagraphElement> | null"}},invalid:{defaultValue:null,description:"",name:"invalid",required:!0,type:{name:"boolean"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#AssistiveText"]={docgenInfo:AssistiveText.__docgenInfo,name:"AssistiveText",path:"packages/react/src/components/TextField/index.tsx#AssistiveText"})}catch(__react_docgen_typescript_loader_error){}},"./packages/react/src/components/TextField/useFocusWithClick.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Q:()=>useFocusWithClick});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");function useFocusWithClick(containerRef,inputRef){(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{const el=containerRef.current;if(el){const handleDown=e=>{e.target!==inputRef.current&&inputRef.current?.focus()};return el.addEventListener("click",handleDown),()=>{el.removeEventListener("click",handleDown)}}}))}}}]);
-//# sourceMappingURL=5021.064bac95.iframe.bundle.js.map
\ No newline at end of file
+`;try{TextField.displayName="TextField",TextField.__docgenInfo={description:"",displayName:"TextField",props:{prefix:{defaultValue:null,description:"",name:"prefix",required:!1,type:{name:"ReactNode"}},suffix:{defaultValue:null,description:"",name:"suffix",required:!1,type:{name:"ReactNode"}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"string"}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"string"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"((value: string) => void)"}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"((event: KeyboardEvent<Element>) => void)"}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"((event: FocusEvent<Element, Element>) => void)"}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"((event: FocusEvent<Element, Element>) => void)"}},showCount:{defaultValue:null,description:"",name:"showCount",required:!1,type:{name:"boolean"}},showLabel:{defaultValue:null,description:"",name:"showLabel",required:!1,type:{name:"boolean"}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"string"}},invalid:{defaultValue:null,description:"",name:"invalid",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string"}},requiredText:{defaultValue:null,description:"",name:"requiredText",required:!1,type:{name:"string"}},subLabel:{defaultValue:null,description:"",name:"subLabel",required:!1,type:{name:"ReactNode"}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onCompositionStart:{defaultValue:null,description:"",name:"onCompositionStart",required:!1,type:{name:"CompositionEventHandler<Element>"}},onCompositionEnd:{defaultValue:null,description:"",name:"onCompositionEnd",required:!1,type:{name:"CompositionEventHandler<Element>"}},onCompositionUpdate:{defaultValue:null,description:"",name:"onCompositionUpdate",required:!1,type:{name:"CompositionEventHandler<Element>"}},onSelect:{defaultValue:null,description:"",name:"onSelect",required:!1,type:{name:"ReactEventHandler<Element>"}},onBeforeInput:{defaultValue:null,description:"",name:"onBeforeInput",required:!1,type:{name:"FormEventHandler<Element>"}},onInput:{defaultValue:null,description:"",name:"onInput",required:!1,type:{name:"FormEventHandler<Element>"}},autoCapitalize:{defaultValue:null,description:"",name:"autoCapitalize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"on"'},{value:'"off"'},{value:'"sentences"'},{value:'"words"'},{value:'"characters"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#TextField"]={docgenInfo:TextField.__docgenInfo,name:"TextField",path:"packages/react/src/components/TextField/index.tsx#TextField"})}catch(__react_docgen_typescript_loader_error){}try{TextFieldLabel.displayName="TextFieldLabel",TextFieldLabel.__docgenInfo={description:"",displayName:"TextFieldLabel",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string"}},requiredText:{defaultValue:null,description:"",name:"requiredText",required:!1,type:{name:"string"}},subLabel:{defaultValue:null,description:"",name:"subLabel",required:!1,type:{name:"ReactNode"}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"boolean"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#TextFieldLabel"]={docgenInfo:TextFieldLabel.__docgenInfo,name:"TextFieldLabel",path:"packages/react/src/components/TextField/index.tsx#TextFieldLabel"})}catch(__react_docgen_typescript_loader_error){}try{AssistiveText.displayName="AssistiveText",AssistiveText.__docgenInfo={description:"",displayName:"AssistiveText",props:{ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"((instance: HTMLParagraphElement | null) => void) | RefObject<HTMLParagraphElement> | null"}},invalid:{defaultValue:null,description:"",name:"invalid",required:!0,type:{name:"boolean"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#AssistiveText"]={docgenInfo:AssistiveText.__docgenInfo,name:"AssistiveText",path:"packages/react/src/components/TextField/index.tsx#AssistiveText"})}catch(__react_docgen_typescript_loader_error){}},"./packages/react/src/components/TextField/useFocusWithClick.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Q:()=>useFocusWithClick});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");function useFocusWithClick(containerRef,inputRef){(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{const el=containerRef.current;if(el){const handleDown=e=>{e.target!==inputRef.current&&inputRef.current?.focus()};return el.addEventListener("click",handleDown),()=>{el.removeEventListener("click",handleDown)}}}))}}}]);
+//# sourceMappingURL=5021.03df505e.iframe.bundle.js.map
\ No newline at end of file
diff --git a/5021.064bac95.iframe.bundle.js.map b/5021.03df505e.iframe.bundle.js.map
similarity index 99%
rename from 5021.064bac95.iframe.bundle.js.map
rename to 5021.03df505e.iframe.bundle.js.map
index d6633e2cb..cb14f77b8 100644
--- a/5021.064bac95.iframe.bundle.js.map
+++ b/5021.03df505e.iframe.bundle.js.map
@@ -1 +1 @@
-{"version":3,"file":"5021.064bac95.iframe.bundle.js","mappings":";;;AAYA;;;AAaA;AACA;;;;;;;;;;;;AAYA;AACA;AACA;;;;;AAKA;;AAEA;AAGA;AACA;AACA;;AAGA;AACA;;;AAGA;AACA;;;;;;;;;AASA;;;;AChBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACjBA;AAGA;;;;;ACDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACqDA;;;;AAMA;;;AAKA;;;;;;;;;;;;AAYA;;;;;;;;;;;;;AAaA;AACA;;AAIA;;;;;;;;;;AAWA;;;;;;AAUA;;;;;;;;;AAWA;;AAIA;;;;;;;;;;;;;;;;;;;;;AAqBA;;;;;;;;;;;;;;;;;;;;;;;;AC5HA;;;;;;;;;;;;;;;;;;;;AAsBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA;;;;AAIA;;;;AAIA;;;;;;AC3EA;AACA;;;;AAIA;AACA;;;;;;AAMA;AAGA;AACA;AACA;;AAGA;AACA;;;AAGA;AACA;;;AAGA;;;;;;;AAgBA;;;;;AClFA;AACA;;;;AAQA;;;;;;;;;;;;;;;;;;;;;AAuBA;;;AAKA;;AAIA;;;;;;;;;;;;ACpBA;;;;;AAoBA;;;AAGA;;;;;AAOA;;;;;;;;;ACkIA;;;;;;;;;;;;;;;AAeA;AACA;;;;AAQA;;;;;;;;;;;;;;;;;AAmBA;;;;AAeA;;;;AC3FA;AAGA;;AAIA;;AAMA;;;;;;;;;;;;;;;;;;;AAsBA;;;AAGA;;;AAOA;;;AAKA;;;;AAMA;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;;;;AAMA;;;;;AAKA","sources":["webpack://charcoal-ui/./packages/react/src/components/Button/StyledButton.tsx","webpack://charcoal-ui/./packages/react/src/components/Clickable/index.tsx","webpack://charcoal-ui/./packages/react/src/components/DropdownSelector/DropdownMenuItem.tsx","webpack://charcoal-ui/./packages/react/src/components/DropdownSelector/ListItem/index.tsx","webpack://charcoal-ui/./packages/react/src/components/DropdownSelector/index.tsx","webpack://charcoal-ui/./packages/react/src/components/FieldLabel/index.tsx","webpack://charcoal-ui/./packages/react/src/components/IconButton/index.tsx","webpack://charcoal-ui/./packages/react/src/components/Modal/ModalPlumbing.tsx","webpack://charcoal-ui/./packages/react/src/components/Modal/Dialog/index.tsx","webpack://charcoal-ui/./packages/react/src/components/Modal/index.tsx","webpack://charcoal-ui/./packages/react/src/components/TextField/index.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport Clickable from '../Clickable'\nimport { variantToFont } from './lib/variantToFont'\nimport { variantToBackground } from './lib/variantToBackground'\nimport type { Size } from '.'\nimport { focusVisibleFocusRingCss } from '@charcoal-ui/styled'\n\nconst horizontalPaddingSmall = css`\n  padding-right: 16px;\n  padding-left: 16px;\n`\n\nconst horizontalPaddingMedium = css`\n  padding-right: 24px;\n  padding-left: 24px;\n`\n\ntype StyledButtonProps = {\n  $fullWidth: boolean\n  $size: Size\n  $background: ReturnType<typeof variantToBackground>\n  $color: ReturnType<typeof variantToFont>\n  $isActive: boolean\n}\n\nexport const StyledButton = styled(Clickable)<StyledButtonProps>`\n  width: ${(p) => (p.$fullWidth ? 'stretch' : 'min-content')};\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n  border-radius: 999999px;\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: bold;\n\n  ${(p) => (p.$size === 'M' ? horizontalPaddingMedium : horizontalPaddingSmall)}\n  color: var(--charcoal-${(p) => p.$color});\n  background-color: var(--charcoal-${(p) => p.$background});\n  transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;\n\n  &:not(:disabled):not([aria-disabled]),\n  &[aria-disabled='false'] {\n    ${focusVisibleFocusRingCss}\n\n    ${({ $isActive: $active, $color, $background }) =>\n      $active\n        ? css`\n            color: var(--charcoal-${$color}-press);\n            background-color: var(--charcoal-${$background}-press);\n          `\n        : css`\n            &:hover {\n              color: var(--charcoal-${$color}-hover);\n              background-color: var(--charcoal-${$background}-hover);\n            }\n            &:active {\n              color: var(--charcoal-${$color}-press);\n              background-color: var(--charcoal-${$background}-press);\n            }\n          `}\n  }\n\n  &:disabled,\n  &[aria-disabled]:not([aria-disabled='false']) {\n    opacity: 0.32;\n  }\n  height: ${(p) => (p.$size === 'M' ? 40 : 32)}px;\n`\n","import * as React from 'react'\nimport styled from 'styled-components'\nimport {\n  LinkProps,\n  useComponentAbstraction,\n} from '../../core/ComponentAbstraction'\nimport { disabledSelector } from '@charcoal-ui/utils'\n\ninterface BaseProps {\n  /**\n   * クリックの無効化\n   */\n  disabled?: boolean\n}\n\ninterface LinkBaseProps {\n  /**\n   * リンクのURL。指定するとbuttonタグではなくaタグとして描画される\n   */\n  to: string\n}\n\nexport type ClickableProps =\n  | (BaseProps & Omit<React.ComponentPropsWithoutRef<'button'>, 'disabled'>)\n  | (BaseProps & LinkBaseProps & Omit<LinkProps, 'to'>)\nexport type ClickableElement = HTMLButtonElement & HTMLAnchorElement\n\nconst Clickable = React.forwardRef<ClickableElement, ClickableProps>(\n  function Clickable(props, ref) {\n    const { Link } = useComponentAbstraction()\n    const isLink = 'to' in props\n    const as = isLink ? Link : 'button'\n    const ariaDisabled = isLink && props.disabled === true ? true : undefined\n    let rest = props\n    if (isLink) {\n      const { disabled, ..._rest } = props\n      rest = _rest\n    }\n    return (\n      <StyledClickableDiv\n        {...rest}\n        ref={ref}\n        as={as}\n        aria-disabled={ariaDisabled}\n      />\n    )\n  }\n)\nexport default Clickable\n\nconst StyledClickableDiv = styled.div`\n  cursor: pointer;\n\n  ${disabledSelector} {\n    cursor: default;\n  }\n\n  /* Reset button appearance */\n  appearance: none;\n  background: transparent;\n  padding: 0;\n  border-style: none;\n  outline: none;\n  color: inherit;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n  text-decoration: none;\n\n  &:focus {\n    outline: none;\n  }\n\n  /* Change the font styles in all browsers. */\n  font: inherit;\n\n  /* Remove the margin in Firefox and Safari. */\n  margin: 0;\n\n  /* Show the overflow in Edge. */\n  overflow: visible;\n\n  /* Remove the inheritance of text transform in Firefox. */\n  text-transform: none;\n\n  /* Remove the inner border and padding in Firefox. */\n  &::-moz-focus-inner {\n    border-style: none;\n    padding: 0;\n  }\n`\n","import styled from 'styled-components'\nimport MenuItem, { MenuItemProps } from './MenuItem'\nimport { MenuListContext } from './MenuList/MenuListContext'\nimport { useContext } from 'react'\nimport Icon from '../Icon'\n\nexport type DropdownMenuItemProps = Omit<MenuItemProps<'div'>, 'as'>\n\n/**\n * DropdownSelectorの選択肢として使うMenuItem\n */\nexport default function DropdownMenuItem(props: DropdownMenuItemProps) {\n  const { value: ctxValue } = useContext(MenuListContext)\n  const isSelected = props.value === ctxValue\n  const { children, ...rest } = props\n\n  return (\n    <MenuItem {...rest}>\n      {isSelected && <Text2ColorIcon name=\"16/Check\" />}\n      <StyledSpan isSelected={isSelected}>{props.children}</StyledSpan>\n    </MenuItem>\n  )\n}\n\n/**\n * アイコンがない時を考慮して20px（16pxのwidthと4pxのgap）の余白をとる\n */\nconst StyledSpan = styled.span<{ isSelected?: boolean }>`\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--charcoal-text2);\n  padding: 9px 0;\n\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-left: ${({ isSelected }) => (isSelected === true ? 0 : 20)}px;\n`\n\nconst Text2ColorIcon = styled(Icon)`\n  color: var(--charcoal-text2);\n  padding-right: 4px;\n`\n","import { ReactNode } from 'react'\nimport styled from 'styled-components'\n\nexport type CustomJSXElement =\n  | keyof JSX.IntrinsicElements\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  | React.JSXElementConstructor<any>\n\nexport type ListItemProps<T extends CustomJSXElement = 'div'> = {\n  children?: ReactNode\n  as?: T\n} & Omit<React.ComponentProps<T>, 'children'>\n\n/**\n * リストのある要素を示すコンポーネント\n *\n * asを用いて拡張することができる\n * @example\n * ```\n * <ListItem as=\"a\" href=\"#\">Link</ListItem>\n * <ListItem as={NextLink} href=\"#\">NextLink</ListItem>\n * ```\n */\nexport default function ListItem<T extends CustomJSXElement = 'div'>(\n  props: ListItemProps<T>\n) {\n  const { children, ...rest } = props\n  return (\n    <StyledLi role=\"option\">\n      <ItemDiv {...rest}>{props.children}</ItemDiv>\n    </StyledLi>\n  )\n}\n\nconst StyledLi = styled.li`\n  list-style: none;\n`\n\nconst ItemDiv = styled.div`\n  display: flex;\n  align-items: center;\n  min-height: 40px;\n  cursor: pointer;\n  outline: none;\n\n  padding-right: 16px;\n  padding-left: 16px;\n\n  &:disabled,\n  &[aria-disabled]:not([aria-disabled='false']) {\n    opacity: 0.32;\n    cursor: default;\n  }\n\n  :hover,\n  :focus,\n  :focus-within {\n    background-color: var(--charcoal-surface3);\n  }\n`\n","import { ReactNode, useState, useRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport { disabledSelector } from '@charcoal-ui/utils'\nimport Icon from '../Icon'\nimport FieldLabel from '../FieldLabel'\nimport { DropdownPopover } from './DropdownPopover'\nimport { findPreviewRecursive } from './utils/findPreviewRecursive'\nimport MenuList, { MenuListChildren } from './MenuList'\nimport { focusVisibleFocusRingCss } from '@charcoal-ui/styled'\n\nexport type DropdownSelectorProps = {\n  label: string\n  value: string\n  disabled?: boolean\n  placeholder?: string\n  showLabel?: boolean\n  invalid?: boolean\n  assistiveText?: string\n  required?: boolean\n  requiredText?: string\n  subLabel?: ReactNode\n  children: MenuListChildren\n  onChange: (value: string) => void\n}\n\nconst defaultRequiredText = '*必須'\n\nexport default function DropdownSelector(props: DropdownSelectorProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const [isOpen, setIsOpen] = useState(false)\n  const preview = findPreviewRecursive(props.children, props.value)\n\n  return (\n    <DropdownSelectorRoot aria-disabled={props.disabled}>\n      {props.showLabel === true && (\n        <DropdownFieldLabel\n          label={props.label}\n          required={props.required}\n          requiredText={props.requiredText ?? defaultRequiredText}\n          subLabel={props.subLabel}\n        />\n      )}\n      <DropdownButton\n        invalid={props.invalid}\n        disabled={props.disabled}\n        onClick={() => {\n          if (props.disabled === true) return\n          setIsOpen(true)\n        }}\n        ref={triggerRef}\n        type=\"button\"\n        $active={isOpen}\n      >\n        <DropdownButtonText>\n          {props.placeholder !== undefined && preview === undefined\n            ? props.placeholder\n            : preview}\n        </DropdownButtonText>\n        <DropdownButtonIcon name=\"16/Menu\" />\n      </DropdownButton>\n      {isOpen && (\n        <DropdownPopover\n          isOpen={isOpen}\n          onClose={() => setIsOpen(false)}\n          triggerRef={triggerRef}\n          value={props.value}\n        >\n          <MenuList\n            value={props.value}\n            onChange={(v) => {\n              props.onChange(v)\n              setIsOpen(false)\n            }}\n          >\n            {props.children}\n          </MenuList>\n        </DropdownPopover>\n      )}\n      {props.assistiveText !== undefined && (\n        <AssertiveText invalid={props.invalid}>\n          {props.assistiveText}\n        </AssertiveText>\n      )}\n    </DropdownSelectorRoot>\n  )\n}\n\nconst DropdownSelectorRoot = styled.div`\n  display: inline-block;\n  width: 100%;\n\n  ${disabledSelector} {\n    cursor: default;\n    opacity: 0.32;\n  }\n`\n\nconst DropdownFieldLabel = styled(FieldLabel)`\n  width: 100%;\n  margin-bottom: 8px;\n`\n\nconst DropdownButton = styled.button<{ invalid?: boolean; $active?: boolean }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  height: 40px;\n  width: 100%;\n  box-sizing: border-box;\n  border: none;\n  cursor: pointer;\n  gap: 4px;\n\n  ${disabledSelector} {\n    cursor: default;\n  }\n\n  padding-right: 8px;\n  padding-left: 8px;\n  background-color: var(--charcoal-surface3);\n  border-radius: 4px;\n\n  transition: 0.2s box-shadow, 0.2s background-color;\n\n  &:not(:disabled):not([aria-disabled]),\n  &[aria-disabled='false'] {\n    ${focusVisibleFocusRingCss}\n    ${({ $active }) =>\n      $active === true\n        ? css`\n            background-color: var(--charcoal-surface3-press);\n          `\n        : css`\n            &:hover {\n              background-color: var(--charcoal-surface3-hover);\n            }\n            &:active {\n              background-color: var(--charcoal-surface3-press);\n            }\n          `}\n  }\n\n  ${({ invalid }) =>\n    invalid === true &&\n    css`\n      &:not(:disabled):not([aria-disabled]),\n      &[aria-disabled='false'] {\n        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n      }\n    `}\n`\n\nconst DropdownButtonText = styled.span`\n  text-align: left;\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-text2);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`\n\nconst DropdownButtonIcon = styled(Icon)`\n  color: var(--charcoal-text2);\n`\n\nconst AssertiveText = styled.div<{ invalid?: boolean }>`\n  margin-top: 8px;\n  font-size: 14px;\n  color: var(--charcoal-text2);\n  line-height: 22px;\n  display: flow-root;\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n\n  ${({ invalid }) =>\n    invalid === true &&\n    css`\n      color: var(--charcoal-assertive);\n    `}\n`\n","import * as React from 'react'\nimport styled from 'styled-components'\n\nexport interface FieldLabelProps\n  extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  readonly className?: string\n  readonly label: string\n  readonly subLabel?: React.ReactNode\n  readonly required?: boolean\n  // TODO: 翻訳用のContextで注入する\n  readonly requiredText?: string\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  function FieldLabel(\n    {\n      style,\n      className,\n      label,\n      required = false,\n      requiredText,\n      subLabel,\n      ...labelProps\n    },\n    ref\n  ) {\n    return (\n      <FieldLabelWrapper style={style} className={className}>\n        <Label ref={ref} {...labelProps}>\n          {label}\n        </Label>\n        {required && <RequiredText>{requiredText}</RequiredText>}\n        <SubLabelClickable>\n          <span>{subLabel}</span>\n        </SubLabelClickable>\n      </FieldLabelWrapper>\n    )\n  }\n)\n\nexport default FieldLabel\n\nconst Label = styled.label`\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: bold;\n  display: flow-root;\n  color: var(--charcoal-text1);\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nconst RequiredText = styled.span`\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-text2);\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nconst SubLabelClickable = styled.div`\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-text3);\n  transition: 0.2s color, 0.2s box-shadow;\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n\n  &:not(:disabled):not([aria-disabled]),\n  &[aria-disabled='false'] {\n    &:hover {\n      color: var(--charcoal-text3-hover);\n    }\n    &:active {\n      color: var(--charcoal-text3-press);\n    }\n    &:active,\n    &:focus,\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n    }\n  }\n`\n\nconst FieldLabelWrapper = styled.div`\n  display: inline-flex;\n  align-items: center;\n\n  > ${RequiredText} {\n    margin-left: 4px;\n  }\n\n  > ${SubLabelClickable} {\n    margin-left: auto;\n  }\n`\n","import { forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport Clickable, { ClickableElement, ClickableProps } from '../Clickable'\nimport type { KnownIconType } from '@charcoal-ui/icons'\nimport { focusVisibleFocusRingCss } from '@charcoal-ui/styled'\n\ntype Variant = 'Default' | 'Overlay'\ntype Size = 'XS' | 'S' | 'M'\n\ninterface StyledProps {\n  readonly variant?: Variant\n  readonly size?: Size\n  readonly icon: keyof KnownIconType\n  readonly isActive?: boolean\n}\n\nexport type IconButtonProps = StyledProps & ClickableProps\n\nconst IconButton = forwardRef<ClickableElement, IconButtonProps>(\n  function IconButtonInner(\n    {\n      variant = 'Default',\n      size = 'M',\n      icon,\n      isActive = false,\n      ...rest\n    }: IconButtonProps,\n    ref\n  ) {\n    validateIconSize(size, icon)\n    return (\n      <StyledIconButton\n        {...rest}\n        ref={ref}\n        $size={size}\n        $variant={variant}\n        $isActive={isActive}\n      >\n        <pixiv-icon name={icon} />\n      </StyledIconButton>\n    )\n  }\n)\n\nexport default IconButton\n\ntype StyledIconButtonProps = Required<{\n  [key in keyof Pick<\n    StyledProps,\n    'size' | 'variant' | 'isActive'\n  > as `$${key}`]: StyledProps[key]\n}>\n\nconst StyledIconButton = styled(Clickable).attrs<\n  StyledIconButtonProps,\n  ReturnType<typeof styledProps>\n>(styledProps)<StyledIconButtonProps>`\n  user-select: none;\n\n  width: ${(p) => p.$width}px;\n  height: ${(p) => p.$height}px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(${({ $font }) => `--charcoal-${$font}`});\n  background-color: var(${({ $background }) => `--charcoal-${$background}`});\n  border-radius: 999999px;\n  transition: 0.2s background-color, 0.2s box-shadow;\n\n  &:not(:disabled):not([aria-disabled]),\n  &[aria-disabled='false'] {\n    ${({ $isActive, $background, $font }) =>\n      $isActive\n        ? css`\n            color: var(--charcoal-${$font}-press);\n            background-color: var(--charcoal-${$background}-press);\n          `\n        : css`\n            &:hover {\n              color: var(--charcoal-${$font}-hover);\n              background-color: var(--charcoal-${$background}-hover);\n            }\n            &:active {\n              color: var(--charcoal-${$font}-press);\n              background-color: var(--charcoal-${$background}-press);\n            }\n          `}\n    ${focusVisibleFocusRingCss}\n  }\n\n  &:disabled,\n  &[aria-disabled]:not([aria-disabled='false']) {\n    opacity: 0.32;\n  }\n`\n\nfunction styledProps({ $size, $variant }: StyledIconButtonProps) {\n  return {\n    ...variantToProps($variant),\n    ...sizeToProps($size),\n  }\n}\n\nfunction variantToProps(variant: Variant) {\n  switch (variant) {\n    case 'Default':\n      return { $font: 'text3', $background: 'transparent' } as const\n    case 'Overlay':\n      return { $font: 'text5', $background: 'surface4' } as const\n  }\n}\n\nfunction sizeToProps(size: Size) {\n  switch (size) {\n    case 'XS':\n      return {\n        $width: 20,\n        $height: 20,\n      }\n    case 'S':\n      return {\n        $width: 32,\n        $height: 32,\n      }\n    case 'M':\n      return {\n        $width: 40,\n        $height: 40,\n      }\n  }\n}\n\n/**\n * validates matches of size and icon\n */\nfunction validateIconSize(size: Size, icon: keyof KnownIconType) {\n  let requiredIconSize: string\n  switch (size) {\n    case 'XS':\n      requiredIconSize = '16'\n      break\n    case 'S':\n    case 'M':\n      requiredIconSize = '24'\n      break\n  }\n  // アイコン名は サイズ/名前\n  const result = /^\\d*/u.exec(icon)\n  if (result == null) {\n    throw new Error('Invalid icon name')\n  }\n  const [iconSize] = result\n  if (iconSize !== requiredIconSize) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `IconButton with size \"${size}\" expect icon size \"${requiredIconSize}, but got \"${iconSize}\"`\n    )\n  }\n}\n","import { BottomSheet, ModalContext, ModalTitle } from '.'\nimport styled, { css } from 'styled-components'\nimport { useContext } from 'react'\nimport { maxWidth } from '@charcoal-ui/utils'\n\nexport function ModalHeader() {\n  const modalCtx = useContext(ModalContext)\n  return (\n    <ModalHeaderRoot $bottomSheet={modalCtx.bottomSheet}>\n      <StyledModalTitle />\n    </ModalHeaderRoot>\n  )\n}\n\nconst ModalHeaderRoot = styled.div<{\n  $bottomSheet: BottomSheet\n}>`\n  height: 64px;\n  display: grid;\n  align-content: center;\n  justify-content: center;\n  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {\n    ${(p) =>\n      p.$bottomSheet !== false &&\n      css`\n        height: 48px;\n      `}\n  }\n`\n\nconst StyledModalTitle = styled(ModalTitle)`\n  color: var(--charcoal-text1);\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: bold;\n  display: flow-root;\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nexport const ModalAlign = styled.div`\n  padding-left: 16px;\n  padding-right: 16px;\n`\n\nexport const ModalBody = styled.div`\n  padding-bottom: 40px;\n`\n\nexport const ModalButtons = styled.div`\n  display: grid;\n  grid-auto-flow: row;\n  grid-row-gap: 8px;\n\n  padding-top: 16px;\n  padding-left: 16px;\n  padding-right: 16px;\n`\n","import { forwardRef } from 'react'\nimport * as React from 'react'\nimport styled, { css } from 'styled-components'\nimport { useDialog } from '@react-aria/dialog'\nimport { columnSystem, COLUMN_UNIT, GUTTER_UNIT } from '@charcoal-ui/foundation'\nimport { unreachable } from '../../../_lib'\nimport { maxWidth } from '@charcoal-ui/utils'\nimport { animated } from 'react-spring'\nimport { useForwardedRef } from '../../../_lib/useForwardedRef'\nimport { Size, BottomSheet } from '..'\n\nexport const Dialog = forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof AnimatedStyledDialogDiv>\n>(function Dialog(props, forwardRef) {\n  const ref = useForwardedRef(forwardRef)\n  const { dialogProps } = useDialog(\n    {\n      role: 'dialog',\n    },\n    ref\n  )\n\n  return (\n    <AnimatedStyledDialogDiv\n      {...props}\n      role={dialogProps.role}\n      tabIndex={dialogProps.tabIndex}\n      aria-labelledby={dialogProps['aria-labelledby']}\n      onBlur={dialogProps.onBlur}\n      ref={ref}\n    />\n  )\n})\n\nconst AnimatedStyledDialogDiv = animated(styled.div<{\n  size: Size\n  bottomSheet: BottomSheet\n}>`\n  margin: auto;\n  position: relative;\n  height: fit-content;\n  width: ${(p) => {\n    switch (p.size) {\n      case 'S': {\n        return columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2\n      }\n      case 'M': {\n        return columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2\n      }\n      case 'L': {\n        return columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2\n      }\n      default: {\n        return unreachable(p.size)\n      }\n    }\n  }}px;\n\n  background-color: var(--charcoal-surface1);\n  border-radius: 24px;\n\n  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {\n    max-width: 440px;\n    width: calc(100% - 48px);\n    ${(p) =>\n      p.bottomSheet !== false &&\n      css`\n        max-width: unset;\n        width: 100%;\n        border-radius: 0;\n        margin: auto 0 0 0;\n        ${p.bottomSheet === 'full' &&\n        css`\n          min-height: 100%;\n        `}\n      `}\n  }\n  :focus {\n    outline: none;\n  }\n`)\n","import { useContext, forwardRef, memo } from 'react'\nimport * as React from 'react'\nimport { AriaModalOverlayProps, Overlay } from '@react-aria/overlays'\nimport styled, { css, useTheme } from 'styled-components'\nimport { AriaDialogProps } from '@react-types/dialog'\nimport { maxWidth } from '@charcoal-ui/utils'\nimport { useMedia } from '@charcoal-ui/styled'\nimport { animated, useTransition, easings } from 'react-spring'\nimport Button, { ButtonProps } from '../Button'\nimport IconButton from '../IconButton'\nimport { useObjectRef } from '@react-aria/utils'\nimport { Dialog } from './Dialog'\nimport { ModalBackgroundContext } from './ModalBackgroundContext'\nimport { useCharcoalModalOverlay } from './useCustomModalOverlay'\n\nexport type BottomSheet = boolean | 'full'\nexport type Size = 'S' | 'M' | 'L'\n\nexport type ModalProps = AriaModalOverlayProps &\n  AriaDialogProps & {\n    children: React.ReactNode\n    zIndex?: number\n    title: string\n    size?: Size\n    bottomSheet?: BottomSheet\n    isOpen: boolean\n    onClose: () => void\n    className?: string\n\n    /**\n     * https://github.com/adobe/react-spectrum/issues/3787\n     * Next.jsで使用する際に発生するエラーの一時的な回避策でdocument.bodyを指定する必要がある\n     */\n    portalContainer?: HTMLElement\n  }\n\nconst DEFAULT_Z_INDEX = 10\n\n/**\n * モーダルコンポーネント。\n *\n * @example アプリケーションルートで `<OverlayProvider>` ないし `<CharcoalProvider>` で囲った上で利用する\n * ```tsx\n * import {\n *   OverlayProvider,\n *   Modal,\n *   ModalHeader,\n *   ModalBody,\n *   ModalButtons\n * } from '@charcoal-ui/react'\n *\n * <OverlayProvider>\n *   <App>\n *     <Modal title=\"Title\" isOpen={state.isOpen} onClose={() => state.close()} isDismissable>\n *       <ModalHeader />\n *       <ModalBody>\n *         ...\n *         <ModalButtons>...</ModalButtons>\n *       </ModalBody>\n *     </Modal>\n *   </App>\n * </OverlayProvider>\n * ```\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(\n  { children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props },\n  external\n) {\n  const {\n    title,\n    size = 'M',\n    bottomSheet = false,\n    isDismissable,\n    onClose,\n    className,\n    isOpen = false,\n  } = props\n\n  const ref = useObjectRef<HTMLDivElement>(external)\n\n  const { modalProps, underlayProps } = useCharcoalModalOverlay(\n    {\n      ...props,\n      isKeyboardDismissDisabled:\n        isDismissable === undefined || isDismissable === false,\n    },\n    {\n      onClose,\n      isOpen,\n    },\n    ref\n  )\n\n  const theme = useTheme()\n  const isMobile = useMedia(maxWidth(theme.breakpoint.screen1)) ?? false\n  const transitionEnabled = isMobile && bottomSheet !== false\n  const showDismiss = !isMobile || bottomSheet !== true\n\n  const transition = useTransition(isOpen, {\n    from: {\n      transform: 'translateY(100%)',\n      backgroundColor: 'rgba(0, 0, 0, 0)',\n      overflow: 'hidden',\n    },\n    enter: {\n      transform: 'translateY(0%)',\n      backgroundColor: 'rgba(0, 0, 0, 0.4)',\n    },\n    update: {\n      overflow: 'auto',\n    },\n    leave: {\n      transform: 'translateY(100%)',\n      backgroundColor: 'rgba(0, 0, 0, 0)',\n      overflow: 'hidden',\n    },\n    config: transitionEnabled\n      ? { duration: 400, easing: easings.easeOutQuart }\n      : { duration: 0 },\n  })\n\n  const bgRef = React.useRef<HTMLElement>(null)\n\n  const handleClick = React.useCallback(\n    (e: MouseEvent) => {\n      if (e.currentTarget === e.target) {\n        onClose()\n      }\n    },\n    [onClose]\n  )\n\n  return transition(\n    ({ backgroundColor, overflow, transform }, item) =>\n      item && (\n        <Overlay portalContainer={portalContainer}>\n          <ModalBackground\n            ref={bgRef}\n            zIndex={zIndex}\n            {...underlayProps}\n            style={transitionEnabled ? { backgroundColor, overflow } : {}}\n            $bottomSheet={bottomSheet}\n            onClick={handleClick}\n          >\n            <ModalBackgroundContext.Provider value={bgRef.current}>\n              <Dialog\n                ref={ref}\n                {...modalProps}\n                style={transitionEnabled ? { transform } : {}}\n                size={size}\n                bottomSheet={bottomSheet}\n                className={className}\n              >\n                <ModalContext.Provider\n                  value={{\n                    titleProps: {},\n                    title,\n                    close: onClose,\n                    showDismiss,\n                    bottomSheet,\n                  }}\n                >\n                  {children}\n                  {isDismissable === true && (\n                    <ModalCrossButton\n                      size=\"S\"\n                      icon=\"24/Close\"\n                      onClick={onClose}\n                    />\n                  )}\n                </ModalContext.Provider>\n              </Dialog>\n            </ModalBackgroundContext.Provider>\n          </ModalBackground>\n        </Overlay>\n      )\n  )\n})\n\nexport default memo(Modal)\n\nexport const ModalContext = React.createContext<{\n  /**\n   * @deprecated\n   */\n  titleProps: React.HTMLAttributes<HTMLElement>\n  title: string\n  close?: () => void\n  showDismiss: boolean\n  bottomSheet: BottomSheet\n}>({\n  titleProps: {},\n  title: '',\n  close: undefined,\n  showDismiss: true,\n  bottomSheet: false,\n})\n\nconst ModalBackground = animated(styled.div<{\n  zIndex: number\n  $bottomSheet: BottomSheet\n}>`\n  z-index: ${({ zIndex }) => zIndex};\n  overflow: auto;\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: -webkit-fill-available;\n  width: -moz-available;\n  height: 100%;\n  justify-content: center;\n  padding: 40px 0;\n  box-sizing: border-box;\n\n  background-color: var(--charcoal-surface4);\n\n  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {\n    ${(p) =>\n      p.$bottomSheet !== false &&\n      css`\n        padding: 0;\n      `}\n  }\n`)\n\nconst ModalCrossButton = styled(IconButton)`\n  position: absolute;\n  top: 8px;\n  right: 8px;\n\n  color: var(--charcoal-text3);\n  transition: 0.2s color;\n\n  &:not(:disabled):not([aria-disabled]),\n  &[aria-disabled='false'] {\n    &:hover {\n      color: var(--charcoal-text3-hover);\n    }\n    &:active {\n      color: var(--charcoal-text3-press);\n    }\n  }\n`\n\nexport function ModalTitle(props: React.HTMLAttributes<HTMLHeadingElement>) {\n  const { titleProps, title } = useContext(ModalContext)\n  return (\n    <ModalHeading {...titleProps} {...props}>\n      {title}\n    </ModalHeading>\n  )\n}\n\nconst ModalHeading = styled.h3`\n  margin: 0;\n  font-weight: inherit;\n  font-size: inherit;\n`\n\nexport function ModalDismissButton({ children, ...props }: ButtonProps) {\n  const { close, showDismiss } = useContext(ModalContext)\n\n  if (!showDismiss) {\n    return null\n  }\n\n  return (\n    <Button {...props} onClick={close} fullWidth>\n      {children}\n    </Button>\n  )\n}\n","import { useTextField } from '@react-aria/textfield'\nimport { useVisuallyHidden } from '@react-aria/visually-hidden'\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport styled, { css } from 'styled-components'\nimport FieldLabel, { FieldLabelProps } from '../FieldLabel'\nimport { countCodePointsInString, mergeRefs } from '../../_lib'\nimport { ReactAreaUseTextFieldCompat } from '../../_lib/compat'\nimport { useFocusWithClick } from './useFocusWithClick'\nimport { mergeProps } from '@react-aria/utils'\n\ntype DOMProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  // react-ariaのhookは、onChangeが`(v: string) => void`想定\n  | 'onChange'\n\n  // RDFa Attributeとかぶる\n  // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/58d57ca87ac7be0d306c0844dc254e90c150bd0d/types/react/index.d.ts#L1951\n  | 'prefix'\n\n  // ReactAreaUseTextFieldCompatに書いてあるような事情で、ここにあるイベントハンドラの型をゆるめる\n  | keyof ReactAreaUseTextFieldCompat\n>\n\nexport interface TextFieldProps\n  extends Pick<FieldLabelProps, 'label' | 'requiredText' | 'subLabel'>,\n    DOMProps,\n    ReactAreaUseTextFieldCompat {\n  readonly prefix?: ReactNode\n  readonly suffix?: ReactNode\n\n  // <input> 要素は number とか string[] もありうるが、今はこれしか想定してない\n  readonly defaultValue?: string\n  readonly value?: string\n  readonly onChange?: (value: string) => void\n\n  // react-ariaの型定義のせいでHTMLInputElementにできない\n  readonly onKeyDown?: (event: React.KeyboardEvent<Element>) => void\n  readonly onFocus?: (event: React.FocusEvent<Element>) => void\n  readonly onBlur?: (event: React.FocusEvent<Element>) => void\n\n  readonly showCount?: boolean\n  readonly showLabel?: boolean\n  readonly assistiveText?: string\n  readonly invalid?: boolean\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  function SingleLineTextFieldInner({ onChange, ...props }, forwardRef) {\n    const {\n      className,\n      showLabel = false,\n      showCount = false,\n      label,\n      requiredText,\n      subLabel,\n      disabled = false,\n      required,\n      invalid = false,\n      assistiveText,\n      maxLength,\n      prefix = null,\n      suffix = null,\n      ...restProps\n    } = props\n\n    const { visuallyHiddenProps } = useVisuallyHidden()\n    const ariaRef = useRef<HTMLInputElement>(null)\n    const [count, setCount] = useState(\n      countCodePointsInString(props.value ?? '')\n    )\n\n    const nonControlled = props.value === undefined\n    const handleChange = useCallback(\n      (value: string) => {\n        const count = countCodePointsInString(value)\n        if (maxLength !== undefined && count > maxLength) {\n          return\n        }\n        if (nonControlled) {\n          setCount(count)\n        }\n        onChange?.(value)\n      },\n      [maxLength, nonControlled, onChange]\n    )\n\n    useEffect(() => {\n      setCount(countCodePointsInString(props.value ?? ''))\n    }, [props.value])\n\n    const {\n      inputProps: ariaInputProps,\n      labelProps,\n      descriptionProps,\n      errorMessageProps,\n    } = useTextField(\n      {\n        inputElementType: 'input',\n        isDisabled: disabled,\n        isRequired: required,\n        validationState: invalid ? 'invalid' : 'valid',\n        description: !invalid && assistiveText,\n        errorMessage: invalid && assistiveText,\n        onChange: handleChange,\n        ...props,\n      },\n      ariaRef\n    )\n\n    const containerRef = useRef(null)\n\n    useFocusWithClick(containerRef, ariaRef)\n\n    const inputProps = mergeProps(restProps, ariaInputProps)\n\n    return (\n      <TextFieldRoot className={className} isDisabled={disabled}>\n        <TextFieldLabel\n          label={label}\n          requiredText={requiredText}\n          required={required}\n          subLabel={subLabel}\n          {...labelProps}\n          {...(!showLabel ? visuallyHiddenProps : {})}\n        />\n        <StyledInputContainer\n          ref={containerRef}\n          invalid={invalid}\n          aria-disabled={disabled === true ? true : undefined}\n          hasPrefix={prefix != null}\n          hasSuffix={suffix != null || showCount}\n        >\n          {prefix && <PrefixContainer>{prefix}</PrefixContainer>}\n          <StyledInput\n            ref={mergeRefs(forwardRef, ariaRef)}\n            invalid={invalid}\n            {...inputProps}\n          />\n          {(suffix || showCount) && (\n            <SuffixContainer>\n              {suffix}\n              {showCount && (\n                <SingleLineCounter>\n                  {maxLength !== undefined ? `${count}/${maxLength}` : count}\n                </SingleLineCounter>\n              )}\n            </SuffixContainer>\n          )}\n        </StyledInputContainer>\n        {assistiveText != null && assistiveText.length !== 0 && (\n          <AssistiveText\n            invalid={invalid}\n            {...(invalid ? errorMessageProps : descriptionProps)}\n          >\n            {assistiveText}\n          </AssistiveText>\n        )}\n      </TextFieldRoot>\n    )\n  }\n)\n\nexport default TextField\n\nconst TextFieldRoot = styled.div<{ isDisabled: boolean }>`\n  display: flex;\n  flex-direction: column;\n\n  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}\n`\n\nexport const TextFieldLabel = styled(FieldLabel)`\n  margin-bottom: 8px;\n`\n\nconst StyledInputContainer = styled.div<{\n  invalid: boolean\n  hasPrefix: boolean\n  hasSuffix: boolean\n}>`\n  display: grid;\n  grid-template-columns: ${(p) =>\n    [p.hasPrefix && 'auto', '1fr', p.hasSuffix && 'auto']\n      .filter(Boolean)\n      .join(' ')};\n  height: 40px;\n  transition: 0.2s background-color, 0.2s box-shadow;\n  color: var(--charcoal-text2);\n  background-color: var(--charcoal-surface3);\n  border-radius: 4px;\n  gap: 4px;\n  padding: 0 8px;\n  line-height: 22px;\n  font-size: 14px;\n\n  :not(:disabled):not([aria-disabled]):hover,\n  [aria-disabled='false']:hover {\n    background-color: var(--charcoal-surface3-hover);\n  }\n\n  :focus-within {\n    outline: none;\n    box-shadow: 0 0 0 4px\n      ${(p) => (p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`)};\n  }\n\n  ${(p) =>\n    p.invalid &&\n    css`\n      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n    `}\n`\n\nconst PrefixContainer = styled.div`\n  display: flex;\n  align-items: center;\n`\n\nconst SuffixContainer = styled.span`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n`\n\nconst StyledInput = styled.input<{\n  invalid: boolean\n}>`\n  border: none;\n  box-sizing: border-box;\n  outline: none;\n  font-family: inherit;\n\n  /* Prevent zooming for iOS Safari */\n  transform-origin: top left;\n  transform: scale(0.875);\n  width: calc(100% / 0.875);\n  height: calc(100% / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding-left: 0;\n  padding-right: 0;\n  border-radius: calc(4px / 0.875);\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n  background: transparent;\n\n  color: var(--charcoal-text2);\n  &::placeholder {\n    color: var(--charcoal-text3);\n  }\n`\n\nconst SingleLineCounter = styled.span`\n  line-height: 22px;\n  font-size: 14px;\n  color: var(--charcoal-text3);\n`\n\nexport const AssistiveText = styled.p<{ invalid: boolean }>`\n  font-size: 14px;\n  line-height: 22px;\n  margin-top: 4px;\n  margin-bottom: -4px;\n  color: ${(p) => `var(--charcoal-${p.invalid ? `assertive` : `text2`})`};\n`\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"5021.03df505e.iframe.bundle.js","mappings":";;;AAYA;;;AAaA;AACA;;;;;;;;;;;;AAYA;AACA;AACA;;;;;AAKA;;AAEA;AAGA;AACA;AACA;;AAGA;AACA;;;AAGA;AACA;;;;;;;;;AASA;;;;AChBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACjBA;AAGA;;;;;ACDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACqDA;;;;AAMA;;;AAKA;;;;;;;;;;;;AAYA;;;;;;;;;;;;;AAaA;AACA;;AAIA;;;;;;;;;;AAWA;;;;;;AAUA;;;;;;;;;AAWA;;AAIA;;;;;;;;;;;;;;;;;;;;;AAqBA;;;;;;;;;;;;;;;;;;;;;;;;AC5HA;;;;;;;;;;;;;;;;;;;;AAsBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA;;;;AAIA;;;;AAIA;;;;;;AC3EA;AACA;;;;AAIA;AACA;;;;;;AAMA;AAGA;AACA;AACA;;AAGA;AACA;;;AAGA;AACA;;;AAGA;;;;;;;AAgBA;;;;;AClFA;AACA;;;;AAQA;;;;;;;;;;;;;;;;;;;;;AAuBA;;;AAKA;;AAIA;;;;;;;;;;;;ACpBA;;;;;AAoBA;;;AAGA;;;;;AAOA;;;;;;;;;ACkIA;;;;;;;;;;;;;;;AAeA;AACA;;;;AAQA;;;;;;;;;;;;;;;;;AAmBA;;;;AAeA;;;;AC3FA;AAGA;;AAIA;;AAMA;;;;;;;;;;;;;;;;;;;AAsBA;;;AAGA;;;AAOA;;;AAKA;;;;AAMA;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;;;;AAMA;;;;;AAKA","sources":["webpack://charcoal-ui/./packages/react/src/components/Button/StyledButton.tsx","webpack://charcoal-ui/./packages/react/src/components/Clickable/index.tsx","webpack://charcoal-ui/./packages/react/src/components/DropdownSelector/DropdownMenuItem.tsx","webpack://charcoal-ui/./packages/react/src/components/DropdownSelector/ListItem/index.tsx","webpack://charcoal-ui/./packages/react/src/components/DropdownSelector/index.tsx","webpack://charcoal-ui/./packages/react/src/components/FieldLabel/index.tsx","webpack://charcoal-ui/./packages/react/src/components/IconButton/index.tsx","webpack://charcoal-ui/./packages/react/src/components/Modal/ModalPlumbing.tsx","webpack://charcoal-ui/./packages/react/src/components/Modal/Dialog/index.tsx","webpack://charcoal-ui/./packages/react/src/components/Modal/index.tsx","webpack://charcoal-ui/./packages/react/src/components/TextField/index.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport Clickable from '../Clickable'\nimport { variantToFont } from './lib/variantToFont'\nimport { variantToBackground } from './lib/variantToBackground'\nimport type { Size } from '.'\nimport { focusVisibleFocusRingCss } from '@charcoal-ui/styled'\n\nconst horizontalPaddingSmall = css`\n  padding-right: 16px;\n  padding-left: 16px;\n`\n\nconst horizontalPaddingMedium = css`\n  padding-right: 24px;\n  padding-left: 24px;\n`\n\ntype StyledButtonProps = {\n  $fullWidth: boolean\n  $size: Size\n  $background: ReturnType<typeof variantToBackground>\n  $color: ReturnType<typeof variantToFont>\n  $isActive: boolean\n}\n\nexport const StyledButton = styled(Clickable)<StyledButtonProps>`\n  width: ${(p) => (p.$fullWidth ? 'stretch' : 'min-content')};\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n  border-radius: 999999px;\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: bold;\n\n  ${(p) => (p.$size === 'M' ? horizontalPaddingMedium : horizontalPaddingSmall)}\n  color: var(--charcoal-${(p) => p.$color});\n  background-color: var(--charcoal-${(p) => p.$background});\n  transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;\n\n  &:not(:disabled):not([aria-disabled]),\n  &[aria-disabled='false'] {\n    ${focusVisibleFocusRingCss}\n\n    ${({ $isActive: $active, $color, $background }) =>\n      $active\n        ? css`\n            color: var(--charcoal-${$color}-press);\n            background-color: var(--charcoal-${$background}-press);\n          `\n        : css`\n            &:hover {\n              color: var(--charcoal-${$color}-hover);\n              background-color: var(--charcoal-${$background}-hover);\n            }\n            &:active {\n              color: var(--charcoal-${$color}-press);\n              background-color: var(--charcoal-${$background}-press);\n            }\n          `}\n  }\n\n  &:disabled,\n  &[aria-disabled]:not([aria-disabled='false']) {\n    opacity: 0.32;\n  }\n  height: ${(p) => (p.$size === 'M' ? 40 : 32)}px;\n`\n","import * as React from 'react'\nimport styled from 'styled-components'\nimport {\n  LinkProps,\n  useComponentAbstraction,\n} from '../../core/ComponentAbstraction'\nimport { disabledSelector } from '@charcoal-ui/utils'\n\ninterface BaseProps {\n  /**\n   * クリックの無効化\n   */\n  disabled?: boolean\n}\n\ninterface LinkBaseProps {\n  /**\n   * リンクのURL。指定するとbuttonタグではなくaタグとして描画される\n   */\n  to: string\n}\n\nexport type ClickableProps =\n  | (BaseProps & Omit<React.ComponentPropsWithoutRef<'button'>, 'disabled'>)\n  | (BaseProps & LinkBaseProps & Omit<LinkProps, 'to'>)\nexport type ClickableElement = HTMLButtonElement & HTMLAnchorElement\n\nconst Clickable = React.forwardRef<ClickableElement, ClickableProps>(\n  function Clickable(props, ref) {\n    const { Link } = useComponentAbstraction()\n    const isLink = 'to' in props\n    const as = isLink ? Link : 'button'\n    const ariaDisabled = isLink && props.disabled === true ? true : undefined\n    let rest = props\n    if (isLink) {\n      const { disabled, ..._rest } = props\n      rest = _rest\n    }\n    return (\n      <StyledClickableDiv\n        {...rest}\n        ref={ref}\n        as={as}\n        aria-disabled={ariaDisabled}\n      />\n    )\n  }\n)\nexport default Clickable\n\nconst StyledClickableDiv = styled.div`\n  cursor: pointer;\n\n  ${disabledSelector} {\n    cursor: default;\n  }\n\n  /* Reset button appearance */\n  appearance: none;\n  background: transparent;\n  padding: 0;\n  border-style: none;\n  outline: none;\n  color: inherit;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n  text-decoration: none;\n\n  &:focus {\n    outline: none;\n  }\n\n  /* Change the font styles in all browsers. */\n  font: inherit;\n\n  /* Remove the margin in Firefox and Safari. */\n  margin: 0;\n\n  /* Show the overflow in Edge. */\n  overflow: visible;\n\n  /* Remove the inheritance of text transform in Firefox. */\n  text-transform: none;\n\n  /* Remove the inner border and padding in Firefox. */\n  &::-moz-focus-inner {\n    border-style: none;\n    padding: 0;\n  }\n`\n","import styled from 'styled-components'\nimport MenuItem, { MenuItemProps } from './MenuItem'\nimport { MenuListContext } from './MenuList/MenuListContext'\nimport { useContext } from 'react'\nimport Icon from '../Icon'\n\nexport type DropdownMenuItemProps = Omit<MenuItemProps<'div'>, 'as'>\n\n/**\n * DropdownSelectorの選択肢として使うMenuItem\n */\nexport default function DropdownMenuItem(props: DropdownMenuItemProps) {\n  const { value: ctxValue } = useContext(MenuListContext)\n  const isSelected = props.value === ctxValue\n  const { children, ...rest } = props\n\n  return (\n    <MenuItem {...rest}>\n      {isSelected && <Text2ColorIcon name=\"16/Check\" />}\n      <StyledSpan isSelected={isSelected}>{props.children}</StyledSpan>\n    </MenuItem>\n  )\n}\n\n/**\n * アイコンがない時を考慮して20px（16pxのwidthと4pxのgap）の余白をとる\n */\nconst StyledSpan = styled.span<{ isSelected?: boolean }>`\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--charcoal-text2);\n  padding: 9px 0;\n\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-left: ${({ isSelected }) => (isSelected === true ? 0 : 20)}px;\n`\n\nconst Text2ColorIcon = styled(Icon)`\n  color: var(--charcoal-text2);\n  padding-right: 4px;\n`\n","import { ReactNode } from 'react'\nimport styled from 'styled-components'\n\nexport type CustomJSXElement =\n  | keyof JSX.IntrinsicElements\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  | React.JSXElementConstructor<any>\n\nexport type ListItemProps<T extends CustomJSXElement = 'div'> = {\n  children?: ReactNode\n  as?: T\n} & Omit<React.ComponentProps<T>, 'children'>\n\n/**\n * リストのある要素を示すコンポーネント\n *\n * asを用いて拡張することができる\n * @example\n * ```\n * <ListItem as=\"a\" href=\"#\">Link</ListItem>\n * <ListItem as={NextLink} href=\"#\">NextLink</ListItem>\n * ```\n */\nexport default function ListItem<T extends CustomJSXElement = 'div'>(\n  props: ListItemProps<T>\n) {\n  const { children, ...rest } = props\n  return (\n    <StyledLi role=\"option\">\n      <ItemDiv {...rest}>{props.children}</ItemDiv>\n    </StyledLi>\n  )\n}\n\nconst StyledLi = styled.li`\n  list-style: none;\n`\n\nconst ItemDiv = styled.div`\n  display: flex;\n  align-items: center;\n  min-height: 40px;\n  cursor: pointer;\n  outline: none;\n\n  padding-right: 16px;\n  padding-left: 16px;\n\n  &:disabled,\n  &[aria-disabled]:not([aria-disabled='false']) {\n    opacity: 0.32;\n    cursor: default;\n  }\n\n  :hover,\n  :focus,\n  :focus-within {\n    background-color: var(--charcoal-surface3);\n  }\n`\n","import { ReactNode, useState, useRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport { disabledSelector } from '@charcoal-ui/utils'\nimport Icon from '../Icon'\nimport FieldLabel from '../FieldLabel'\nimport { DropdownPopover } from './DropdownPopover'\nimport { findPreviewRecursive } from './utils/findPreviewRecursive'\nimport MenuList, { MenuListChildren } from './MenuList'\nimport { focusVisibleFocusRingCss } from '@charcoal-ui/styled'\n\nexport type DropdownSelectorProps = {\n  label: string\n  value: string\n  disabled?: boolean\n  placeholder?: string\n  showLabel?: boolean\n  invalid?: boolean\n  assistiveText?: string\n  required?: boolean\n  requiredText?: string\n  subLabel?: ReactNode\n  children: MenuListChildren\n  onChange: (value: string) => void\n}\n\nconst defaultRequiredText = '*必須'\n\nexport default function DropdownSelector(props: DropdownSelectorProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const [isOpen, setIsOpen] = useState(false)\n  const preview = findPreviewRecursive(props.children, props.value)\n\n  return (\n    <DropdownSelectorRoot aria-disabled={props.disabled}>\n      {props.showLabel === true && (\n        <DropdownFieldLabel\n          label={props.label}\n          required={props.required}\n          requiredText={props.requiredText ?? defaultRequiredText}\n          subLabel={props.subLabel}\n        />\n      )}\n      <DropdownButton\n        invalid={props.invalid}\n        disabled={props.disabled}\n        onClick={() => {\n          if (props.disabled === true) return\n          setIsOpen(true)\n        }}\n        ref={triggerRef}\n        type=\"button\"\n        $active={isOpen}\n      >\n        <DropdownButtonText>\n          {props.placeholder !== undefined && preview === undefined\n            ? props.placeholder\n            : preview}\n        </DropdownButtonText>\n        <DropdownButtonIcon name=\"16/Menu\" />\n      </DropdownButton>\n      {isOpen && (\n        <DropdownPopover\n          isOpen={isOpen}\n          onClose={() => setIsOpen(false)}\n          triggerRef={triggerRef}\n          value={props.value}\n        >\n          <MenuList\n            value={props.value}\n            onChange={(v) => {\n              props.onChange(v)\n              setIsOpen(false)\n            }}\n          >\n            {props.children}\n          </MenuList>\n        </DropdownPopover>\n      )}\n      {props.assistiveText !== undefined && (\n        <AssertiveText invalid={props.invalid}>\n          {props.assistiveText}\n        </AssertiveText>\n      )}\n    </DropdownSelectorRoot>\n  )\n}\n\nconst DropdownSelectorRoot = styled.div`\n  display: inline-block;\n  width: 100%;\n\n  ${disabledSelector} {\n    cursor: default;\n    opacity: 0.32;\n  }\n`\n\nconst DropdownFieldLabel = styled(FieldLabel)`\n  width: 100%;\n  margin-bottom: 8px;\n`\n\nconst DropdownButton = styled.button<{ invalid?: boolean; $active?: boolean }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  height: 40px;\n  width: 100%;\n  box-sizing: border-box;\n  border: none;\n  cursor: pointer;\n  gap: 4px;\n\n  ${disabledSelector} {\n    cursor: default;\n  }\n\n  padding-right: 8px;\n  padding-left: 8px;\n  background-color: var(--charcoal-surface3);\n  border-radius: 4px;\n\n  transition: 0.2s box-shadow, 0.2s background-color;\n\n  &:not(:disabled):not([aria-disabled]),\n  &[aria-disabled='false'] {\n    ${focusVisibleFocusRingCss}\n    ${({ $active }) =>\n      $active === true\n        ? css`\n            background-color: var(--charcoal-surface3-press);\n          `\n        : css`\n            &:hover {\n              background-color: var(--charcoal-surface3-hover);\n            }\n            &:active {\n              background-color: var(--charcoal-surface3-press);\n            }\n          `}\n  }\n\n  ${({ invalid }) =>\n    invalid === true &&\n    css`\n      &:not(:disabled):not([aria-disabled]),\n      &[aria-disabled='false'] {\n        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n      }\n    `}\n`\n\nconst DropdownButtonText = styled.span`\n  text-align: left;\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-text2);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`\n\nconst DropdownButtonIcon = styled(Icon)`\n  color: var(--charcoal-text2);\n`\n\nconst AssertiveText = styled.div<{ invalid?: boolean }>`\n  margin-top: 8px;\n  font-size: 14px;\n  color: var(--charcoal-text2);\n  line-height: 22px;\n  display: flow-root;\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n\n  ${({ invalid }) =>\n    invalid === true &&\n    css`\n      color: var(--charcoal-assertive);\n    `}\n`\n","import * as React from 'react'\nimport styled from 'styled-components'\n\nexport interface FieldLabelProps\n  extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  readonly className?: string\n  readonly label: string\n  readonly subLabel?: React.ReactNode\n  readonly required?: boolean\n  // TODO: 翻訳用のContextで注入する\n  readonly requiredText?: string\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  function FieldLabel(\n    {\n      style,\n      className,\n      label,\n      required = false,\n      requiredText,\n      subLabel,\n      ...labelProps\n    },\n    ref\n  ) {\n    return (\n      <FieldLabelWrapper style={style} className={className}>\n        <Label ref={ref} {...labelProps}>\n          {label}\n        </Label>\n        {required && <RequiredText>{requiredText}</RequiredText>}\n        <SubLabelClickable>\n          <span>{subLabel}</span>\n        </SubLabelClickable>\n      </FieldLabelWrapper>\n    )\n  }\n)\n\nexport default FieldLabel\n\nconst Label = styled.label`\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: bold;\n  display: flow-root;\n  color: var(--charcoal-text1);\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nconst RequiredText = styled.span`\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-text2);\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nconst SubLabelClickable = styled.div`\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-text3);\n  transition: 0.2s color, 0.2s box-shadow;\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n\n  &:not(:disabled):not([aria-disabled]),\n  &[aria-disabled='false'] {\n    &:hover {\n      color: var(--charcoal-text3-hover);\n    }\n    &:active {\n      color: var(--charcoal-text3-press);\n    }\n    &:active,\n    &:focus,\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n    }\n  }\n`\n\nconst FieldLabelWrapper = styled.div`\n  display: inline-flex;\n  align-items: center;\n\n  > ${RequiredText} {\n    margin-left: 4px;\n  }\n\n  > ${SubLabelClickable} {\n    margin-left: auto;\n  }\n`\n","import { forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport Clickable, { ClickableElement, ClickableProps } from '../Clickable'\nimport type { KnownIconType } from '@charcoal-ui/icons'\nimport { focusVisibleFocusRingCss } from '@charcoal-ui/styled'\n\ntype Variant = 'Default' | 'Overlay'\ntype Size = 'XS' | 'S' | 'M'\n\ninterface StyledProps {\n  readonly variant?: Variant\n  readonly size?: Size\n  readonly icon: keyof KnownIconType\n  readonly isActive?: boolean\n}\n\nexport type IconButtonProps = StyledProps & ClickableProps\n\nconst IconButton = forwardRef<ClickableElement, IconButtonProps>(\n  function IconButtonInner(\n    {\n      variant = 'Default',\n      size = 'M',\n      icon,\n      isActive = false,\n      ...rest\n    }: IconButtonProps,\n    ref\n  ) {\n    validateIconSize(size, icon)\n    return (\n      <StyledIconButton\n        {...rest}\n        ref={ref}\n        $size={size}\n        $variant={variant}\n        $isActive={isActive}\n      >\n        <pixiv-icon name={icon} />\n      </StyledIconButton>\n    )\n  }\n)\n\nexport default IconButton\n\ntype StyledIconButtonProps = Required<{\n  [key in keyof Pick<\n    StyledProps,\n    'size' | 'variant' | 'isActive'\n  > as `$${key}`]: StyledProps[key]\n}>\n\nconst StyledIconButton = styled(Clickable).attrs<\n  StyledIconButtonProps,\n  ReturnType<typeof styledProps>\n>(styledProps)<StyledIconButtonProps>`\n  user-select: none;\n\n  width: ${(p) => p.$width}px;\n  height: ${(p) => p.$height}px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(${({ $font }) => `--charcoal-${$font}`});\n  background-color: var(${({ $background }) => `--charcoal-${$background}`});\n  border-radius: 999999px;\n  transition: 0.2s background-color, 0.2s box-shadow;\n\n  &:not(:disabled):not([aria-disabled]),\n  &[aria-disabled='false'] {\n    ${({ $isActive, $background, $font }) =>\n      $isActive\n        ? css`\n            color: var(--charcoal-${$font}-press);\n            background-color: var(--charcoal-${$background}-press);\n          `\n        : css`\n            &:hover {\n              color: var(--charcoal-${$font}-hover);\n              background-color: var(--charcoal-${$background}-hover);\n            }\n            &:active {\n              color: var(--charcoal-${$font}-press);\n              background-color: var(--charcoal-${$background}-press);\n            }\n          `}\n    ${focusVisibleFocusRingCss}\n  }\n\n  &:disabled,\n  &[aria-disabled]:not([aria-disabled='false']) {\n    opacity: 0.32;\n  }\n`\n\nfunction styledProps({ $size, $variant }: StyledIconButtonProps) {\n  return {\n    ...variantToProps($variant),\n    ...sizeToProps($size),\n  }\n}\n\nfunction variantToProps(variant: Variant) {\n  switch (variant) {\n    case 'Default':\n      return { $font: 'text3', $background: 'transparent' } as const\n    case 'Overlay':\n      return { $font: 'text5', $background: 'surface4' } as const\n  }\n}\n\nfunction sizeToProps(size: Size) {\n  switch (size) {\n    case 'XS':\n      return {\n        $width: 20,\n        $height: 20,\n      }\n    case 'S':\n      return {\n        $width: 32,\n        $height: 32,\n      }\n    case 'M':\n      return {\n        $width: 40,\n        $height: 40,\n      }\n  }\n}\n\n/**\n * validates matches of size and icon\n */\nfunction validateIconSize(size: Size, icon: keyof KnownIconType) {\n  let requiredIconSize: string\n  switch (size) {\n    case 'XS':\n      requiredIconSize = '16'\n      break\n    case 'S':\n    case 'M':\n      requiredIconSize = '24'\n      break\n  }\n  // アイコン名は サイズ/名前\n  const result = /^\\d*/u.exec(icon)\n  if (result == null) {\n    throw new Error('Invalid icon name')\n  }\n  const [iconSize] = result\n  if (iconSize !== requiredIconSize) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `IconButton with size \"${size}\" expect icon size \"${requiredIconSize}, but got \"${iconSize}\"`\n    )\n  }\n}\n","import { BottomSheet, ModalContext, ModalTitle } from '.'\nimport styled, { css } from 'styled-components'\nimport { useContext } from 'react'\nimport { maxWidth } from '@charcoal-ui/utils'\n\nexport function ModalHeader() {\n  const modalCtx = useContext(ModalContext)\n  return (\n    <ModalHeaderRoot $bottomSheet={modalCtx.bottomSheet}>\n      <StyledModalTitle />\n    </ModalHeaderRoot>\n  )\n}\n\nconst ModalHeaderRoot = styled.div<{\n  $bottomSheet: BottomSheet\n}>`\n  height: 64px;\n  display: grid;\n  align-content: center;\n  justify-content: center;\n  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {\n    ${(p) =>\n      p.$bottomSheet !== false &&\n      css`\n        height: 48px;\n      `}\n  }\n`\n\nconst StyledModalTitle = styled(ModalTitle)`\n  color: var(--charcoal-text1);\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: bold;\n  display: flow-root;\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nexport const ModalAlign = styled.div`\n  padding-left: 16px;\n  padding-right: 16px;\n`\n\nexport const ModalBody = styled.div`\n  padding-bottom: 40px;\n`\n\nexport const ModalButtons = styled.div`\n  display: grid;\n  grid-auto-flow: row;\n  grid-row-gap: 8px;\n\n  padding-top: 16px;\n  padding-left: 16px;\n  padding-right: 16px;\n`\n","import { forwardRef } from 'react'\nimport * as React from 'react'\nimport styled, { css } from 'styled-components'\nimport { useDialog } from '@react-aria/dialog'\nimport { columnSystem, COLUMN_UNIT, GUTTER_UNIT } from '@charcoal-ui/foundation'\nimport { unreachable } from '../../../_lib'\nimport { maxWidth } from '@charcoal-ui/utils'\nimport { animated } from 'react-spring'\nimport { useForwardedRef } from '../../../_lib/useForwardedRef'\nimport { Size, BottomSheet } from '..'\n\nexport const Dialog = forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof AnimatedStyledDialogDiv>\n>(function Dialog(props, forwardRef) {\n  const ref = useForwardedRef(forwardRef)\n  const { dialogProps } = useDialog(\n    {\n      role: 'dialog',\n    },\n    ref\n  )\n\n  return (\n    <AnimatedStyledDialogDiv\n      {...props}\n      role={dialogProps.role}\n      tabIndex={dialogProps.tabIndex}\n      aria-labelledby={dialogProps['aria-labelledby']}\n      onBlur={dialogProps.onBlur}\n      ref={ref}\n    />\n  )\n})\n\nconst AnimatedStyledDialogDiv = animated(styled.div<{\n  size: Size\n  bottomSheet: BottomSheet\n}>`\n  margin: auto;\n  position: relative;\n  height: fit-content;\n  width: ${(p) => {\n    switch (p.size) {\n      case 'S': {\n        return columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2\n      }\n      case 'M': {\n        return columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2\n      }\n      case 'L': {\n        return columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2\n      }\n      default: {\n        return unreachable(p.size)\n      }\n    }\n  }}px;\n\n  background-color: var(--charcoal-surface1);\n  border-radius: 24px;\n\n  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {\n    max-width: 440px;\n    width: calc(100% - 48px);\n    ${(p) =>\n      p.bottomSheet !== false &&\n      css`\n        max-width: unset;\n        width: 100%;\n        border-radius: 0;\n        margin: auto 0 0 0;\n        ${p.bottomSheet === 'full' &&\n        css`\n          min-height: 100%;\n        `}\n      `}\n  }\n  :focus {\n    outline: none;\n  }\n`)\n","import { useContext, forwardRef, memo } from 'react'\nimport * as React from 'react'\nimport { AriaModalOverlayProps, Overlay } from '@react-aria/overlays'\nimport styled, { css, useTheme } from 'styled-components'\nimport { AriaDialogProps } from '@react-types/dialog'\nimport { maxWidth } from '@charcoal-ui/utils'\nimport { useMedia } from '@charcoal-ui/styled'\nimport { animated, useTransition, easings } from 'react-spring'\nimport Button, { ButtonProps } from '../Button'\nimport IconButton from '../IconButton'\nimport { useObjectRef } from '@react-aria/utils'\nimport { Dialog } from './Dialog'\nimport { ModalBackgroundContext } from './ModalBackgroundContext'\nimport { useCharcoalModalOverlay } from './useCustomModalOverlay'\n\nexport type BottomSheet = boolean | 'full'\nexport type Size = 'S' | 'M' | 'L'\n\nexport type ModalProps = AriaModalOverlayProps &\n  AriaDialogProps & {\n    children: React.ReactNode\n    zIndex?: number\n    title: string\n    size?: Size\n    bottomSheet?: BottomSheet\n    isOpen: boolean\n    onClose: () => void\n    className?: string\n\n    /**\n     * https://github.com/adobe/react-spectrum/issues/3787\n     * Next.jsで使用する際に発生するエラーの一時的な回避策でdocument.bodyを指定する必要がある\n     */\n    portalContainer?: HTMLElement\n  }\n\nconst DEFAULT_Z_INDEX = 10\n\n/**\n * モーダルコンポーネント。\n *\n * @example アプリケーションルートで `<OverlayProvider>` ないし `<CharcoalProvider>` で囲った上で利用する\n * ```tsx\n * import {\n *   OverlayProvider,\n *   Modal,\n *   ModalHeader,\n *   ModalBody,\n *   ModalButtons\n * } from '@charcoal-ui/react'\n *\n * <OverlayProvider>\n *   <App>\n *     <Modal title=\"Title\" isOpen={state.isOpen} onClose={() => state.close()} isDismissable>\n *       <ModalHeader />\n *       <ModalBody>\n *         ...\n *         <ModalButtons>...</ModalButtons>\n *       </ModalBody>\n *     </Modal>\n *   </App>\n * </OverlayProvider>\n * ```\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(\n  { children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props },\n  external\n) {\n  const {\n    title,\n    size = 'M',\n    bottomSheet = false,\n    isDismissable,\n    onClose,\n    className,\n    isOpen = false,\n  } = props\n\n  const ref = useObjectRef<HTMLDivElement>(external)\n\n  const { modalProps, underlayProps } = useCharcoalModalOverlay(\n    {\n      ...props,\n      isKeyboardDismissDisabled:\n        isDismissable === undefined || isDismissable === false,\n    },\n    {\n      onClose,\n      isOpen,\n    },\n    ref\n  )\n\n  const theme = useTheme()\n  const isMobile = useMedia(maxWidth(theme.breakpoint.screen1)) ?? false\n  const transitionEnabled = isMobile && bottomSheet !== false\n  const showDismiss = !isMobile || bottomSheet !== true\n\n  const transition = useTransition(isOpen, {\n    from: {\n      transform: 'translateY(100%)',\n      backgroundColor: 'rgba(0, 0, 0, 0)',\n      overflow: 'hidden',\n    },\n    enter: {\n      transform: 'translateY(0%)',\n      backgroundColor: 'rgba(0, 0, 0, 0.4)',\n    },\n    update: {\n      overflow: 'auto',\n    },\n    leave: {\n      transform: 'translateY(100%)',\n      backgroundColor: 'rgba(0, 0, 0, 0)',\n      overflow: 'hidden',\n    },\n    config: transitionEnabled\n      ? { duration: 400, easing: easings.easeOutQuart }\n      : { duration: 0 },\n  })\n\n  const bgRef = React.useRef<HTMLElement>(null)\n\n  const handleClick = React.useCallback(\n    (e: MouseEvent) => {\n      if (e.currentTarget === e.target) {\n        onClose()\n      }\n    },\n    [onClose]\n  )\n\n  return transition(\n    ({ backgroundColor, overflow, transform }, item) =>\n      item && (\n        <Overlay portalContainer={portalContainer}>\n          <ModalBackground\n            ref={bgRef}\n            zIndex={zIndex}\n            {...underlayProps}\n            style={transitionEnabled ? { backgroundColor, overflow } : {}}\n            $bottomSheet={bottomSheet}\n            onClick={handleClick}\n          >\n            <ModalBackgroundContext.Provider value={bgRef.current}>\n              <Dialog\n                ref={ref}\n                {...modalProps}\n                style={transitionEnabled ? { transform } : {}}\n                size={size}\n                bottomSheet={bottomSheet}\n                className={className}\n              >\n                <ModalContext.Provider\n                  value={{\n                    titleProps: {},\n                    title,\n                    close: onClose,\n                    showDismiss,\n                    bottomSheet,\n                  }}\n                >\n                  {children}\n                  {isDismissable === true && (\n                    <ModalCrossButton\n                      size=\"S\"\n                      icon=\"24/Close\"\n                      onClick={onClose}\n                    />\n                  )}\n                </ModalContext.Provider>\n              </Dialog>\n            </ModalBackgroundContext.Provider>\n          </ModalBackground>\n        </Overlay>\n      )\n  )\n})\n\nexport default memo(Modal)\n\nexport const ModalContext = React.createContext<{\n  /**\n   * @deprecated\n   */\n  titleProps: React.HTMLAttributes<HTMLElement>\n  title: string\n  close?: () => void\n  showDismiss: boolean\n  bottomSheet: BottomSheet\n}>({\n  titleProps: {},\n  title: '',\n  close: undefined,\n  showDismiss: true,\n  bottomSheet: false,\n})\n\nconst ModalBackground = animated(styled.div<{\n  zIndex: number\n  $bottomSheet: BottomSheet\n}>`\n  z-index: ${({ zIndex }) => zIndex};\n  overflow: auto;\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: -webkit-fill-available;\n  width: -moz-available;\n  height: 100%;\n  justify-content: center;\n  padding: 40px 0;\n  box-sizing: border-box;\n\n  background-color: var(--charcoal-surface4);\n\n  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {\n    ${(p) =>\n      p.$bottomSheet !== false &&\n      css`\n        padding: 0;\n      `}\n  }\n`)\n\nconst ModalCrossButton = styled(IconButton)`\n  position: absolute;\n  top: 8px;\n  right: 8px;\n\n  color: var(--charcoal-text3);\n  transition: 0.2s color;\n\n  &:not(:disabled):not([aria-disabled]),\n  &[aria-disabled='false'] {\n    &:hover {\n      color: var(--charcoal-text3-hover);\n    }\n    &:active {\n      color: var(--charcoal-text3-press);\n    }\n  }\n`\n\nexport function ModalTitle(props: React.HTMLAttributes<HTMLHeadingElement>) {\n  const { titleProps, title } = useContext(ModalContext)\n  return (\n    <ModalHeading {...titleProps} {...props}>\n      {title}\n    </ModalHeading>\n  )\n}\n\nconst ModalHeading = styled.h3`\n  margin: 0;\n  font-weight: inherit;\n  font-size: inherit;\n`\n\nexport function ModalDismissButton({ children, ...props }: ButtonProps) {\n  const { close, showDismiss } = useContext(ModalContext)\n\n  if (!showDismiss) {\n    return null\n  }\n\n  return (\n    <Button {...props} onClick={close} fullWidth>\n      {children}\n    </Button>\n  )\n}\n","import { useTextField } from '@react-aria/textfield'\nimport { useVisuallyHidden } from '@react-aria/visually-hidden'\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport styled, { css } from 'styled-components'\nimport FieldLabel, { FieldLabelProps } from '../FieldLabel'\nimport { countCodePointsInString, mergeRefs } from '../../_lib'\nimport { ReactAreaUseTextFieldCompat } from '../../_lib/compat'\nimport { useFocusWithClick } from './useFocusWithClick'\nimport { mergeProps } from '@react-aria/utils'\n\ntype DOMProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  // react-ariaのhookは、onChangeが`(v: string) => void`想定\n  | 'onChange'\n\n  // RDFa Attributeとかぶる\n  // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/58d57ca87ac7be0d306c0844dc254e90c150bd0d/types/react/index.d.ts#L1951\n  | 'prefix'\n\n  // ReactAreaUseTextFieldCompatに書いてあるような事情で、ここにあるイベントハンドラの型をゆるめる\n  | keyof ReactAreaUseTextFieldCompat\n>\n\nexport interface TextFieldProps\n  extends Pick<FieldLabelProps, 'label' | 'requiredText' | 'subLabel'>,\n    DOMProps,\n    ReactAreaUseTextFieldCompat {\n  readonly prefix?: ReactNode\n  readonly suffix?: ReactNode\n\n  // <input> 要素は number とか string[] もありうるが、今はこれしか想定してない\n  readonly defaultValue?: string\n  readonly value?: string\n  readonly onChange?: (value: string) => void\n\n  // react-ariaの型定義のせいでHTMLInputElementにできない\n  readonly onKeyDown?: (event: React.KeyboardEvent<Element>) => void\n  readonly onFocus?: (event: React.FocusEvent<Element>) => void\n  readonly onBlur?: (event: React.FocusEvent<Element>) => void\n\n  readonly showCount?: boolean\n  readonly showLabel?: boolean\n  readonly assistiveText?: string\n  readonly invalid?: boolean\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  function SingleLineTextFieldInner({ onChange, ...props }, forwardRef) {\n    const {\n      className,\n      showLabel = false,\n      showCount = false,\n      label,\n      requiredText,\n      subLabel,\n      disabled = false,\n      required,\n      invalid = false,\n      assistiveText,\n      maxLength,\n      prefix = null,\n      suffix = null,\n      ...restProps\n    } = props\n\n    const { visuallyHiddenProps } = useVisuallyHidden()\n    const ariaRef = useRef<HTMLInputElement>(null)\n    const [count, setCount] = useState(\n      countCodePointsInString(props.value ?? '')\n    )\n\n    const nonControlled = props.value === undefined\n    const handleChange = useCallback(\n      (value: string) => {\n        const count = countCodePointsInString(value)\n        if (maxLength !== undefined && count > maxLength) {\n          return\n        }\n        if (nonControlled) {\n          setCount(count)\n        }\n        onChange?.(value)\n      },\n      [maxLength, nonControlled, onChange]\n    )\n\n    useEffect(() => {\n      setCount(countCodePointsInString(props.value ?? ''))\n    }, [props.value])\n\n    const {\n      inputProps: ariaInputProps,\n      labelProps,\n      descriptionProps,\n      errorMessageProps,\n    } = useTextField(\n      {\n        inputElementType: 'input',\n        isDisabled: disabled,\n        isRequired: required,\n        validationState: invalid ? 'invalid' : 'valid',\n        description: !invalid && assistiveText,\n        errorMessage: invalid && assistiveText,\n        onChange: handleChange,\n        ...props,\n      },\n      ariaRef\n    )\n\n    const containerRef = useRef(null)\n\n    useFocusWithClick(containerRef, ariaRef)\n\n    const inputProps = mergeProps(restProps, ariaInputProps)\n\n    return (\n      <TextFieldRoot className={className} isDisabled={disabled}>\n        <TextFieldLabel\n          label={label}\n          requiredText={requiredText}\n          required={required}\n          subLabel={subLabel}\n          {...labelProps}\n          {...(!showLabel ? visuallyHiddenProps : {})}\n        />\n        <StyledInputContainer\n          ref={containerRef}\n          invalid={invalid}\n          aria-disabled={disabled === true ? true : undefined}\n          hasPrefix={prefix != null}\n          hasSuffix={suffix != null || showCount}\n        >\n          {prefix && <PrefixContainer>{prefix}</PrefixContainer>}\n          <StyledInput\n            ref={mergeRefs(forwardRef, ariaRef)}\n            invalid={invalid}\n            {...inputProps}\n          />\n          {(suffix || showCount) && (\n            <SuffixContainer>\n              {suffix}\n              {showCount && (\n                <SingleLineCounter>\n                  {maxLength !== undefined ? `${count}/${maxLength}` : count}\n                </SingleLineCounter>\n              )}\n            </SuffixContainer>\n          )}\n        </StyledInputContainer>\n        {assistiveText != null && assistiveText.length !== 0 && (\n          <AssistiveText\n            invalid={invalid}\n            {...(invalid ? errorMessageProps : descriptionProps)}\n          >\n            {assistiveText}\n          </AssistiveText>\n        )}\n      </TextFieldRoot>\n    )\n  }\n)\n\nexport default TextField\n\nconst TextFieldRoot = styled.div<{ isDisabled: boolean }>`\n  display: flex;\n  flex-direction: column;\n\n  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}\n`\n\nexport const TextFieldLabel = styled(FieldLabel)`\n  margin-bottom: 8px;\n`\n\nconst StyledInputContainer = styled.div<{\n  invalid: boolean\n  hasPrefix: boolean\n  hasSuffix: boolean\n}>`\n  display: grid;\n  grid-template-columns: ${(p) =>\n    [p.hasPrefix && 'auto', '1fr', p.hasSuffix && 'auto']\n      .filter(Boolean)\n      .join(' ')};\n  height: 40px;\n  transition: 0.2s background-color, 0.2s box-shadow;\n  color: var(--charcoal-text2);\n  background-color: var(--charcoal-surface3);\n  border-radius: 4px;\n  gap: 4px;\n  padding: 0 8px;\n  line-height: 22px;\n  font-size: 14px;\n\n  :not(:disabled):not([aria-disabled]):hover,\n  [aria-disabled='false']:hover {\n    background-color: var(--charcoal-surface3-hover);\n  }\n\n  :focus-within {\n    outline: none;\n    box-shadow: 0 0 0 4px\n      ${(p) => (p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`)};\n  }\n\n  ${(p) =>\n    p.invalid &&\n    css`\n      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n    `}\n`\n\nconst PrefixContainer = styled.div`\n  display: flex;\n  align-items: center;\n`\n\nconst SuffixContainer = styled.span`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n`\n\nconst StyledInput = styled.input<{\n  invalid: boolean\n}>`\n  border: none;\n  box-sizing: border-box;\n  outline: none;\n  font-family: inherit;\n\n  /* Prevent zooming for iOS Safari */\n  transform-origin: top left;\n  transform: scale(0.875);\n  width: calc(100% / 0.875);\n  height: calc(100% / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding-left: 0;\n  padding-right: 0;\n  border-radius: calc(4px / 0.875);\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n  background: transparent;\n\n  color: var(--charcoal-text2);\n  &::placeholder {\n    color: var(--charcoal-text3);\n  }\n`\n\nconst SingleLineCounter = styled.span`\n  line-height: 22px;\n  font-size: 14px;\n  color: var(--charcoal-text3);\n`\n\nexport const AssistiveText = styled.p<{ invalid: boolean }>`\n  font-size: 14px;\n  line-height: 22px;\n  margin-top: 4px;\n  margin-bottom: -4px;\n  color: ${(p) => `var(--charcoal-${p.invalid ? `assertive` : `text2`})`};\n`\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/iframe.html b/iframe.html
index f051ea649..91020a51c 100644
--- a/iframe.html
+++ b/iframe.html
@@ -348,7 +348,7 @@
             window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":"tag"};</script><script type="module">import './sb-preview/runtime.js';
 
       
-      import './runtime~main.6e0ab758.iframe.bundle.js';
+      import './runtime~main.8aae50cc.iframe.bundle.js';
       
       import './9026.62e42134.iframe.bundle.js';
       
diff --git a/index.json b/index.json
index 66be6dcf7..0ec8c2085 100644
--- a/index.json
+++ b/index.json
@@ -1 +1 @@
-{"v":4,"entries":{"styled-addthemeutils--docs":{"id":"styled-addthemeutils--docs","title":"styled/addThemeUtils","name":"Docs","importPath":"./packages/styled/src/themeUtils.mdx","storiesImports":["./packages/styled/src/index.story.tsx"],"type":"docs","tags":["unattached-mdx","docs"]},"tailwind-config-borderradius--docs":{"id":"tailwind-config-borderradius--docs","title":"tailwind-config/BorderRadius","name":"Docs","importPath":"./packages/tailwind-config/src/docs/borderRadius/index.mdx","storiesImports":[],"type":"docs","tags":["unattached-mdx","docs"]},"tailwind-config-colors-doc--docs":{"id":"tailwind-config-colors-doc--docs","title":"tailwind-config/Colors/Doc","name":"Docs","importPath":"./packages/tailwind-config/src/docs/colors/index.mdx","storiesImports":[],"type":"docs","tags":["unattached-mdx","docs"]},"tailwind-config-gradients--docs":{"id":"tailwind-config-gradients--docs","title":"tailwind-config/Gradients","name":"Docs","importPath":"./packages/tailwind-config/src/docs/gradient/index.mdx","storiesImports":[],"type":"docs","tags":["unattached-mdx","docs"]},"tailwind-config-screens--docs":{"id":"tailwind-config-screens--docs","title":"tailwind-config/Screens","name":"Docs","importPath":"./packages/tailwind-config/src/docs/screens/index.mdx","storiesImports":[],"type":"docs","tags":["unattached-mdx","docs"]},"tailwind-config-spacing--docs":{"id":"tailwind-config-spacing--docs","title":"tailwind-config/Spacing","name":"Docs","importPath":"./packages/tailwind-config/src/docs/spacing/index.mdx","storiesImports":[],"type":"docs","tags":["unattached-mdx","docs"]},"tailwind-config-typography--docs":{"id":"tailwind-config-typography--docs","title":"tailwind-config/Typography","name":"Docs","importPath":"./packages/tailwind-config/src/docs/typography/index.mdx","storiesImports":[],"type":"docs","tags":["unattached-mdx","docs"]},"icons-pixivicon-pixiv-icon--default":{"type":"story","id":"icons-pixivicon-pixiv-icon--default","name":"Default","title":"Icons/PixivIcon (<pixiv-icon>)","importPath":"./packages/icons/src/PixivIcon.story.tsx","tags":["story"]},"icons-pixivicon-pixiv-icon--with-attributes":{"type":"story","id":"icons-pixivicon-pixiv-icon--with-attributes","name":"With Attributes","title":"Icons/PixivIcon (<pixiv-icon>)","importPath":"./packages/icons/src/PixivIcon.story.tsx","tags":["story"]},"icons-pixivicon-pixiv-icon--with-unsafe":{"type":"story","id":"icons-pixivicon-pixiv-icon--with-unsafe","name":"With Unsafe","title":"Icons/PixivIcon (<pixiv-icon>)","importPath":"./packages/icons/src/PixivIcon.story.tsx","tags":["story"]},"sandbox-carousel--carousel":{"type":"story","id":"sandbox-carousel--carousel","name":"Carousel","title":"Sandbox/Carousel","importPath":"./packages/react-sandbox/src/components/Carousel/index.story.tsx","tags":["story"]},"sandbox-carousel-carouselbutton--carousel-button":{"type":"story","id":"sandbox-carousel-carouselbutton--carousel-button","name":"Carousel Button","title":"Sandbox/Carousel/CarouselButton","importPath":"./packages/react-sandbox/src/components/CarouselButton/index.story.tsx","tags":["story"]},"sandbox-carousel-carouselbutton--scroll-hint-button":{"type":"story","id":"sandbox-carousel-carouselbutton--scroll-hint-button","name":"Scroll Hint Button","title":"Sandbox/Carousel/CarouselButton","importPath":"./packages/react-sandbox/src/components/CarouselButton/index.story.tsx","tags":["story"]},"sandbox-filter--default":{"type":"story","id":"sandbox-filter--default","name":"Default","title":"Sandbox/Filter","importPath":"./packages/react-sandbox/src/components/Filter/index.story.tsx","tags":["story"]},"sandbox-filter--button":{"type":"story","id":"sandbox-filter--button","name":"Button","title":"Sandbox/Filter","importPath":"./packages/react-sandbox/src/components/Filter/index.story.tsx","tags":["story"]},"sandbox-filter--link":{"type":"story","id":"sandbox-filter--link","name":"Link","title":"Sandbox/Filter","importPath":"./packages/react-sandbox/src/components/Filter/index.story.tsx","tags":["story"]},"sandbox-hinttext--default":{"type":"story","id":"sandbox-hinttext--default","name":"Default","title":"Sandbox/HintText","importPath":"./packages/react-sandbox/src/components/HintText/index.story.tsx","tags":["story"]},"sandbox-layout--basic":{"type":"story","id":"sandbox-layout--basic","name":"Basic","title":"Sandbox/Layout","importPath":"./packages/react-sandbox/src/components/Layout/index.story.tsx","tags":["story"]},"sandbox-layout--no-menu":{"type":"story","id":"sandbox-layout--no-menu","name":"No Menu","title":"Sandbox/Layout","importPath":"./packages/react-sandbox/src/components/Layout/index.story.tsx","tags":["story"]},"sandbox-layout--wide":{"type":"story","id":"sandbox-layout--wide","name":"Wide","title":"Sandbox/Layout","importPath":"./packages/react-sandbox/src/components/Layout/index.story.tsx","tags":["story"]},"sandbox-layout--center":{"type":"story","id":"sandbox-layout--center","name":"Center","title":"Sandbox/Layout","importPath":"./packages/react-sandbox/src/components/Layout/index.story.tsx","tags":["story"]},"sandbox-menulistitem--default":{"type":"story","id":"sandbox-menulistitem--default","name":"Default","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--simple":{"type":"story","id":"sandbox-menulistitem--simple","name":"Simple","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--disabled":{"type":"story","id":"sandbox-menulistitem--disabled","name":"Disabled","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--link":{"type":"story","id":"sandbox-menulistitem--link","name":"Link","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--hard-link":{"type":"story","id":"sandbox-menulistitem--hard-link","name":"Hard Link","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--inline-icon":{"type":"story","id":"sandbox-menulistitem--inline-icon","name":"Inline Icon","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--icon":{"type":"story","id":"sandbox-menulistitem--icon","name":"Icon","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--no-hover-effect":{"type":"story","id":"sandbox-menulistitem--no-hover-effect","name":"No Hover Effect","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--spacer":{"type":"story","id":"sandbox-menulistitem--spacer","name":"Spacer","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--label":{"type":"story","id":"sandbox-menulistitem--label","name":"Label","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--text-ellipsis":{"type":"story","id":"sandbox-menulistitem--text-ellipsis","name":"Text Ellipsis","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-pager--default":{"type":"story","id":"sandbox-pager--default","name":"Default","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"]},"sandbox-pager--link":{"type":"story","id":"sandbox-pager--link","name":"Link","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"]},"sandbox-pager--not-collapsed":{"type":"story","id":"sandbox-pager--not-collapsed","name":"Not Collapsed","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"]},"sandbox-pager--collapsed-with-dots":{"type":"story","id":"sandbox-pager--collapsed-with-dots","name":"Collapsed With Dots","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"]},"sandbox-pager--last-page":{"type":"story","id":"sandbox-pager--last-page","name":"Last Page","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"]},"sandbox-pager--one":{"type":"story","id":"sandbox-pager--one","name":"One","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"]},"sandbox-pager--little-page-range-displayed":{"type":"story","id":"sandbox-pager--little-page-range-displayed","name":"Little Page Range Displayed","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"]},"sandbox-selection-control-switchcheckbox--default":{"type":"story","id":"sandbox-selection-control-switchcheckbox--default","name":"Default","title":"Sandbox/Selection Control/SwitchCheckbox","importPath":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx","tags":["story"]},"sandbox-selection-control-switchcheckbox--on":{"type":"story","id":"sandbox-selection-control-switchcheckbox--on","name":"On","title":"Sandbox/Selection Control/SwitchCheckbox","importPath":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx","tags":["story"]},"sandbox-selection-control-switchcheckbox--off":{"type":"story","id":"sandbox-selection-control-switchcheckbox--off","name":"Off","title":"Sandbox/Selection Control/SwitchCheckbox","importPath":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx","tags":["story"]},"sandbox-selection-control-switchcheckbox--disabled":{"type":"story","id":"sandbox-selection-control-switchcheckbox--disabled","name":"Disabled","title":"Sandbox/Selection Control/SwitchCheckbox","importPath":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx","tags":["story"]},"sandbox-textellipsis--default":{"type":"story","id":"sandbox-textellipsis--default","name":"Default","title":"Sandbox/TextEllipsis","importPath":"./packages/react-sandbox/src/components/TextEllipsis/index.story.tsx","tags":["story"]},"sandbox-withicon--default":{"type":"story","id":"sandbox-withicon--default","name":"Default","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"]},"sandbox-withicon--performance":{"type":"story","id":"sandbox-withicon--performance","name":"Performance","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"]},"sandbox-withicon--naive":{"type":"story","id":"sandbox-withicon--naive","name":"Naive","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"]},"sandbox-withicon--prefix":{"type":"story","id":"sandbox-withicon--prefix","name":"Prefix","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"]},"sandbox-withicon--hide":{"type":"story","id":"sandbox-withicon--hide","name":"Hide","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"]},"sandbox-withicon--collapse":{"type":"story","id":"sandbox-withicon--collapse","name":"Collapse","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"]},"sandbox-withicon--long-text":{"type":"story","id":"sandbox-withicon--long-text","name":"Long Text","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"]},"sandbox-withicon--long-text-overflow":{"type":"story","id":"sandbox-withicon--long-text-overflow","name":"Long Text Overflow","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"]},"button--default":{"type":"story","id":"button--default","name":"Default","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--primary":{"type":"story","id":"button--primary","name":"Primary","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--navigation":{"type":"story","id":"button--navigation","name":"Navigation","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--overlay":{"type":"story","id":"button--overlay","name":"Overlay","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--danger":{"type":"story","id":"button--danger","name":"Danger","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--small":{"type":"story","id":"button--small","name":"Small","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--fixed":{"type":"story","id":"button--fixed","name":"Fixed","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--disabled":{"type":"story","id":"button--disabled","name":"Disabled","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--active":{"type":"story","id":"button--active","name":"Active","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--link":{"type":"story","id":"button--link","name":"Link","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--nihongo":{"type":"story","id":"button--nihongo","name":"Nihongo","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--focus":{"type":"story","id":"button--focus","name":"Focus","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--layout-example":{"type":"story","id":"button--layout-example","name":"Layout Example","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"checkbox--labelled":{"type":"story","id":"checkbox--labelled","name":"Labelled","title":"Checkbox","importPath":"./packages/react/src/components/Checkbox/index.story.tsx","tags":["story"]},"checkbox--invalid":{"type":"story","id":"checkbox--invalid","name":"Invalid","title":"Checkbox","importPath":"./packages/react/src/components/Checkbox/index.story.tsx","tags":["story"]},"checkbox--unlabelled":{"type":"story","id":"checkbox--unlabelled","name":"Unlabelled","title":"Checkbox","importPath":"./packages/react/src/components/Checkbox/index.story.tsx","tags":["story"]},"clickable--button":{"type":"story","id":"clickable--button","name":"Button","title":"Clickable","importPath":"./packages/react/src/components/Clickable/index.story.tsx","tags":["story"]},"clickable--link":{"type":"story","id":"clickable--link","name":"Link","title":"Clickable","importPath":"./packages/react/src/components/Clickable/index.story.tsx","tags":["story"]},"dropdownselector-listitem--basic":{"type":"story","id":"dropdownselector-listitem--basic","name":"Basic","title":"DropdownSelector/ListItem","importPath":"./packages/react/src/components/DropdownSelector/ListItem/index.story.tsx","tags":["story"]},"dropdownselector-menulist--basic":{"type":"story","id":"dropdownselector-menulist--basic","name":"Basic","title":"DropdownSelector/MenuList","importPath":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx","tags":["story"]},"dropdownselector-menulist--disabled":{"type":"story","id":"dropdownselector-menulist--disabled","name":"Disabled","title":"DropdownSelector/MenuList","importPath":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx","tags":["story"]},"dropdownselector-menulist--group":{"type":"story","id":"dropdownselector-menulist--group","name":"Group","title":"DropdownSelector/MenuList","importPath":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx","tags":["story"]},"dropdownselector-popover--basic":{"type":"story","id":"dropdownselector-popover--basic","name":"Basic","title":"DropdownSelector/Popover","importPath":"./packages/react/src/components/DropdownSelector/Popover/index.story.tsx","tags":["story"]},"dropdownselector--default":{"type":"story","id":"dropdownselector--default","name":"Default","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--label":{"type":"story","id":"dropdownselector--label","name":"Label","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--disabled":{"type":"story","id":"dropdownselector--disabled","name":"Disabled","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--disabled-item":{"type":"story","id":"dropdownselector--disabled-item","name":"Disabled Item","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--invalid":{"type":"story","id":"dropdownselector--invalid","name":"Invalid","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--assistive-text":{"type":"story","id":"dropdownselector--assistive-text","name":"Assistive Text","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--invalid-assistive-text":{"type":"story","id":"dropdownselector--invalid-assistive-text","name":"Invalid Assistive Text","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--required-text":{"type":"story","id":"dropdownselector--required-text","name":"Required Text","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--sub-label":{"type":"story","id":"dropdownselector--sub-label","name":"Sub Label","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--long-names":{"type":"story","id":"dropdownselector--long-names","name":"Long Names","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--in-modal":{"type":"story","id":"dropdownselector--in-modal","name":"In Modal","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--in-form-tag":{"type":"story","id":"dropdownselector--in-form-tag","name":"In Form Tag","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--custom-children":{"type":"story","id":"dropdownselector--custom-children","name":"Custom Children","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--section":{"type":"story","id":"dropdownselector--section","name":"Section","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"icon--default":{"type":"story","id":"icon--default","name":"Default","title":"Icon","importPath":"./packages/react/src/components/Icon/index.story.tsx","tags":["story"]},"iconbutton--default-m":{"type":"story","id":"iconbutton--default-m","name":"Default M","title":"IconButton","importPath":"./packages/react/src/components/IconButton/index.story.tsx","tags":["story"]},"iconbutton--is-active":{"type":"story","id":"iconbutton--is-active","name":"Is Active","title":"IconButton","importPath":"./packages/react/src/components/IconButton/index.story.tsx","tags":["story"]},"iconbutton--overlay-m":{"type":"story","id":"iconbutton--overlay-m","name":"Overlay M","title":"IconButton","importPath":"./packages/react/src/components/IconButton/index.story.tsx","tags":["story"]},"loadingspinnericon--icon":{"type":"story","id":"loadingspinnericon--icon","name":"Icon","title":"LoadingSpinnerIcon","importPath":"./packages/react/src/components/LoadingSpinner/LoadingSpinnerIcon.story.tsx","tags":["skip-test","story"]},"loadingspinner--default":{"type":"story","id":"loadingspinner--default","name":"Default","title":"LoadingSpinner","importPath":"./packages/react/src/components/LoadingSpinner/index.story.tsx","tags":["skip-test","story"]},"modal--default":{"type":"story","id":"modal--default","name":"Default","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"]},"modal--full-bottom-sheet":{"type":"story","id":"modal--full-bottom-sheet","name":"Full Bottom Sheet","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"]},"modal--bottom-sheet":{"type":"story","id":"modal--bottom-sheet","name":"Bottom Sheet","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"]},"modal--not-dismmissable-story":{"type":"story","id":"modal--not-dismmissable-story","name":"Not Dismmissable Story","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"]},"modal--background-scroll":{"type":"story","id":"modal--background-scroll","name":"Background Scroll","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"]},"modal--internal-scroll":{"type":"story","id":"modal--internal-scroll","name":"InternalScroll","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"]},"multiselect--default":{"type":"story","id":"multiselect--default","name":"Default","title":"MultiSelect","importPath":"./packages/react/src/components/MultiSelect/index.story.tsx","tags":["story"]},"multiselect--playground":{"type":"story","id":"multiselect--playground","name":"Playground","title":"MultiSelect","importPath":"./packages/react/src/components/MultiSelect/index.story.tsx","tags":["story"]},"multiselect--invalid":{"type":"story","id":"multiselect--invalid","name":"Invalid","title":"MultiSelect","importPath":"./packages/react/src/components/MultiSelect/index.story.tsx","tags":["story"]},"multiselect--overlay":{"type":"story","id":"multiselect--overlay","name":"Overlay","title":"MultiSelect","importPath":"./packages/react/src/components/MultiSelect/index.story.tsx","tags":["story"]},"radio--basic":{"type":"story","id":"radio--basic","name":"Basic","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"]},"radio--disabled":{"type":"story","id":"radio--disabled","name":"Disabled","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"]},"radio--partial-disabled":{"type":"story","id":"radio--partial-disabled","name":"Partial Disabled","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"]},"radio--readonly":{"type":"story","id":"radio--readonly","name":"Readonly","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"]},"radio--invalid":{"type":"story","id":"radio--invalid","name":"Invalid","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"]},"segmentedcontrol--string-segments":{"type":"story","id":"segmentedcontrol--string-segments","name":"String Segments","title":"SegmentedControl","importPath":"./packages/react/src/components/SegmentedControl/index.story.tsx","tags":["story"]},"segmentedcontrol--object-segments":{"type":"story","id":"segmentedcontrol--object-segments","name":"Object Segments","title":"SegmentedControl","importPath":"./packages/react/src/components/SegmentedControl/index.story.tsx","tags":["story"]},"switch--basic":{"type":"story","id":"switch--basic","name":"Basic","title":"Switch","importPath":"./packages/react/src/components/Switch/index.story.tsx","tags":["story"]},"switch--checked":{"type":"story","id":"switch--checked","name":"Checked","title":"Switch","importPath":"./packages/react/src/components/Switch/index.story.tsx","tags":["story"]},"switch--labelled":{"type":"story","id":"switch--labelled","name":"Labelled","title":"Switch","importPath":"./packages/react/src/components/Switch/index.story.tsx","tags":["story"]},"switch--disabled":{"type":"story","id":"switch--disabled","name":"Disabled","title":"Switch","importPath":"./packages/react/src/components/Switch/index.story.tsx","tags":["story"]},"tagitem--default":{"type":"story","id":"tagitem--default","name":"Default","title":"TagItem","importPath":"./packages/react/src/components/TagItem/index.story.tsx","tags":["story"]},"tagitem--playground":{"type":"story","id":"tagitem--playground","name":"Playground","title":"TagItem","importPath":"./packages/react/src/components/TagItem/index.story.tsx","tags":["story"]},"textarea--default":{"type":"story","id":"textarea--default","name":"Default","title":"TextArea","importPath":"./packages/react/src/components/TextArea/TextArea.story.tsx","tags":["story"]},"textarea--has-label":{"type":"story","id":"textarea--has-label","name":"Has Label","title":"TextArea","importPath":"./packages/react/src/components/TextArea/TextArea.story.tsx","tags":["story"]},"textarea--has-count":{"type":"story","id":"textarea--has-count","name":"Has Count","title":"TextArea","importPath":"./packages/react/src/components/TextArea/TextArea.story.tsx","tags":["story"]},"textarea--auto-height":{"type":"story","id":"textarea--auto-height","name":"Auto Height","title":"TextArea","importPath":"./packages/react/src/components/TextArea/TextArea.story.tsx","tags":["story"]},"textfield--default":{"type":"story","id":"textfield--default","name":"Default","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"]},"textfield--number":{"type":"story","id":"textfield--number","name":"Number","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"]},"textfield--has-label":{"type":"story","id":"textfield--has-label","name":"Has Label","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"]},"textfield--has-count":{"type":"story","id":"textfield--has-count","name":"Has Count","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"]},"textfield--has-affix":{"type":"story","id":"textfield--has-affix","name":"Has Affix","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"]},"textfield--prefix-icon":{"type":"story","id":"textfield--prefix-icon","name":"Prefix Icon","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"]},"styled--example":{"type":"story","id":"styled--example","name":"Example","title":"styled","importPath":"./packages/styled/src/index.story.tsx","tags":["story"]},"tailwind-config-colors-text-bg-color--playground":{"type":"story","id":"tailwind-config-colors-text-bg-color--playground","name":"Playground","title":"tailwind-config/Colors/Text bg color","importPath":"./packages/tailwind-config/src/docs/colors/TextBgColor.story.tsx","tags":["story"]}}}
+{"v":4,"entries":{"styled-addthemeutils--docs":{"id":"styled-addthemeutils--docs","title":"styled/addThemeUtils","name":"Docs","importPath":"./packages/styled/src/themeUtils.mdx","storiesImports":["./packages/styled/src/index.story.tsx"],"type":"docs","tags":["unattached-mdx","docs"]},"tailwind-config-borderradius--docs":{"id":"tailwind-config-borderradius--docs","title":"tailwind-config/BorderRadius","name":"Docs","importPath":"./packages/tailwind-config/src/docs/borderRadius/index.mdx","storiesImports":[],"type":"docs","tags":["unattached-mdx","docs"]},"tailwind-config-colors-doc--docs":{"id":"tailwind-config-colors-doc--docs","title":"tailwind-config/Colors/Doc","name":"Docs","importPath":"./packages/tailwind-config/src/docs/colors/index.mdx","storiesImports":[],"type":"docs","tags":["unattached-mdx","docs"]},"tailwind-config-gradients--docs":{"id":"tailwind-config-gradients--docs","title":"tailwind-config/Gradients","name":"Docs","importPath":"./packages/tailwind-config/src/docs/gradient/index.mdx","storiesImports":[],"type":"docs","tags":["unattached-mdx","docs"]},"tailwind-config-screens--docs":{"id":"tailwind-config-screens--docs","title":"tailwind-config/Screens","name":"Docs","importPath":"./packages/tailwind-config/src/docs/screens/index.mdx","storiesImports":[],"type":"docs","tags":["unattached-mdx","docs"]},"tailwind-config-spacing--docs":{"id":"tailwind-config-spacing--docs","title":"tailwind-config/Spacing","name":"Docs","importPath":"./packages/tailwind-config/src/docs/spacing/index.mdx","storiesImports":[],"type":"docs","tags":["unattached-mdx","docs"]},"tailwind-config-typography--docs":{"id":"tailwind-config-typography--docs","title":"tailwind-config/Typography","name":"Docs","importPath":"./packages/tailwind-config/src/docs/typography/index.mdx","storiesImports":[],"type":"docs","tags":["unattached-mdx","docs"]},"icons-pixivicon-pixiv-icon--default":{"type":"story","id":"icons-pixivicon-pixiv-icon--default","name":"Default","title":"Icons/PixivIcon (<pixiv-icon>)","importPath":"./packages/icons/src/PixivIcon.story.tsx","tags":["story"]},"icons-pixivicon-pixiv-icon--with-attributes":{"type":"story","id":"icons-pixivicon-pixiv-icon--with-attributes","name":"With Attributes","title":"Icons/PixivIcon (<pixiv-icon>)","importPath":"./packages/icons/src/PixivIcon.story.tsx","tags":["story"]},"icons-pixivicon-pixiv-icon--with-unsafe":{"type":"story","id":"icons-pixivicon-pixiv-icon--with-unsafe","name":"With Unsafe","title":"Icons/PixivIcon (<pixiv-icon>)","importPath":"./packages/icons/src/PixivIcon.story.tsx","tags":["story"]},"sandbox-carousel--carousel":{"type":"story","id":"sandbox-carousel--carousel","name":"Carousel","title":"Sandbox/Carousel","importPath":"./packages/react-sandbox/src/components/Carousel/index.story.tsx","tags":["story"]},"sandbox-carousel-carouselbutton--carousel-button":{"type":"story","id":"sandbox-carousel-carouselbutton--carousel-button","name":"Carousel Button","title":"Sandbox/Carousel/CarouselButton","importPath":"./packages/react-sandbox/src/components/CarouselButton/index.story.tsx","tags":["story"]},"sandbox-carousel-carouselbutton--scroll-hint-button":{"type":"story","id":"sandbox-carousel-carouselbutton--scroll-hint-button","name":"Scroll Hint Button","title":"Sandbox/Carousel/CarouselButton","importPath":"./packages/react-sandbox/src/components/CarouselButton/index.story.tsx","tags":["story"]},"sandbox-filter--default":{"type":"story","id":"sandbox-filter--default","name":"Default","title":"Sandbox/Filter","importPath":"./packages/react-sandbox/src/components/Filter/index.story.tsx","tags":["story"]},"sandbox-filter--button":{"type":"story","id":"sandbox-filter--button","name":"Button","title":"Sandbox/Filter","importPath":"./packages/react-sandbox/src/components/Filter/index.story.tsx","tags":["story"]},"sandbox-filter--link":{"type":"story","id":"sandbox-filter--link","name":"Link","title":"Sandbox/Filter","importPath":"./packages/react-sandbox/src/components/Filter/index.story.tsx","tags":["story"]},"sandbox-hinttext--default":{"type":"story","id":"sandbox-hinttext--default","name":"Default","title":"Sandbox/HintText","importPath":"./packages/react-sandbox/src/components/HintText/index.story.tsx","tags":["story"]},"sandbox-layout--basic":{"type":"story","id":"sandbox-layout--basic","name":"Basic","title":"Sandbox/Layout","importPath":"./packages/react-sandbox/src/components/Layout/index.story.tsx","tags":["story"]},"sandbox-layout--no-menu":{"type":"story","id":"sandbox-layout--no-menu","name":"No Menu","title":"Sandbox/Layout","importPath":"./packages/react-sandbox/src/components/Layout/index.story.tsx","tags":["story"]},"sandbox-layout--wide":{"type":"story","id":"sandbox-layout--wide","name":"Wide","title":"Sandbox/Layout","importPath":"./packages/react-sandbox/src/components/Layout/index.story.tsx","tags":["story"]},"sandbox-layout--center":{"type":"story","id":"sandbox-layout--center","name":"Center","title":"Sandbox/Layout","importPath":"./packages/react-sandbox/src/components/Layout/index.story.tsx","tags":["story"]},"sandbox-menulistitem--default":{"type":"story","id":"sandbox-menulistitem--default","name":"Default","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--simple":{"type":"story","id":"sandbox-menulistitem--simple","name":"Simple","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--disabled":{"type":"story","id":"sandbox-menulistitem--disabled","name":"Disabled","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--link":{"type":"story","id":"sandbox-menulistitem--link","name":"Link","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--hard-link":{"type":"story","id":"sandbox-menulistitem--hard-link","name":"Hard Link","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--inline-icon":{"type":"story","id":"sandbox-menulistitem--inline-icon","name":"Inline Icon","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--icon":{"type":"story","id":"sandbox-menulistitem--icon","name":"Icon","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--no-hover-effect":{"type":"story","id":"sandbox-menulistitem--no-hover-effect","name":"No Hover Effect","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--spacer":{"type":"story","id":"sandbox-menulistitem--spacer","name":"Spacer","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--label":{"type":"story","id":"sandbox-menulistitem--label","name":"Label","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-menulistitem--text-ellipsis":{"type":"story","id":"sandbox-menulistitem--text-ellipsis","name":"Text Ellipsis","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"]},"sandbox-pager--default":{"type":"story","id":"sandbox-pager--default","name":"Default","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"]},"sandbox-pager--link":{"type":"story","id":"sandbox-pager--link","name":"Link","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"]},"sandbox-pager--not-collapsed":{"type":"story","id":"sandbox-pager--not-collapsed","name":"Not Collapsed","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"]},"sandbox-pager--collapsed-with-dots":{"type":"story","id":"sandbox-pager--collapsed-with-dots","name":"Collapsed With Dots","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"]},"sandbox-pager--last-page":{"type":"story","id":"sandbox-pager--last-page","name":"Last Page","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"]},"sandbox-pager--one":{"type":"story","id":"sandbox-pager--one","name":"One","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"]},"sandbox-pager--little-page-range-displayed":{"type":"story","id":"sandbox-pager--little-page-range-displayed","name":"Little Page Range Displayed","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"]},"sandbox-selection-control-switchcheckbox--default":{"type":"story","id":"sandbox-selection-control-switchcheckbox--default","name":"Default","title":"Sandbox/Selection Control/SwitchCheckbox","importPath":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx","tags":["story"]},"sandbox-selection-control-switchcheckbox--on":{"type":"story","id":"sandbox-selection-control-switchcheckbox--on","name":"On","title":"Sandbox/Selection Control/SwitchCheckbox","importPath":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx","tags":["story"]},"sandbox-selection-control-switchcheckbox--off":{"type":"story","id":"sandbox-selection-control-switchcheckbox--off","name":"Off","title":"Sandbox/Selection Control/SwitchCheckbox","importPath":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx","tags":["story"]},"sandbox-selection-control-switchcheckbox--disabled":{"type":"story","id":"sandbox-selection-control-switchcheckbox--disabled","name":"Disabled","title":"Sandbox/Selection Control/SwitchCheckbox","importPath":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx","tags":["story"]},"sandbox-textellipsis--default":{"type":"story","id":"sandbox-textellipsis--default","name":"Default","title":"Sandbox/TextEllipsis","importPath":"./packages/react-sandbox/src/components/TextEllipsis/index.story.tsx","tags":["story"]},"sandbox-withicon--default":{"type":"story","id":"sandbox-withicon--default","name":"Default","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"]},"sandbox-withicon--performance":{"type":"story","id":"sandbox-withicon--performance","name":"Performance","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"]},"sandbox-withicon--naive":{"type":"story","id":"sandbox-withicon--naive","name":"Naive","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"]},"sandbox-withicon--prefix":{"type":"story","id":"sandbox-withicon--prefix","name":"Prefix","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"]},"sandbox-withicon--hide":{"type":"story","id":"sandbox-withicon--hide","name":"Hide","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"]},"sandbox-withicon--collapse":{"type":"story","id":"sandbox-withicon--collapse","name":"Collapse","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"]},"sandbox-withicon--long-text":{"type":"story","id":"sandbox-withicon--long-text","name":"Long Text","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"]},"sandbox-withicon--long-text-overflow":{"type":"story","id":"sandbox-withicon--long-text-overflow","name":"Long Text Overflow","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"]},"button--default":{"type":"story","id":"button--default","name":"Default","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--primary":{"type":"story","id":"button--primary","name":"Primary","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--navigation":{"type":"story","id":"button--navigation","name":"Navigation","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--overlay":{"type":"story","id":"button--overlay","name":"Overlay","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--danger":{"type":"story","id":"button--danger","name":"Danger","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--small":{"type":"story","id":"button--small","name":"Small","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--fixed":{"type":"story","id":"button--fixed","name":"Fixed","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--disabled":{"type":"story","id":"button--disabled","name":"Disabled","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--active":{"type":"story","id":"button--active","name":"Active","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--link":{"type":"story","id":"button--link","name":"Link","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--nihongo":{"type":"story","id":"button--nihongo","name":"Nihongo","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--focus":{"type":"story","id":"button--focus","name":"Focus","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"button--layout-example":{"type":"story","id":"button--layout-example","name":"Layout Example","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"]},"checkbox--labelled":{"type":"story","id":"checkbox--labelled","name":"Labelled","title":"Checkbox","importPath":"./packages/react/src/components/Checkbox/index.story.tsx","tags":["story"]},"checkbox--invalid":{"type":"story","id":"checkbox--invalid","name":"Invalid","title":"Checkbox","importPath":"./packages/react/src/components/Checkbox/index.story.tsx","tags":["story"]},"checkbox--unlabelled":{"type":"story","id":"checkbox--unlabelled","name":"Unlabelled","title":"Checkbox","importPath":"./packages/react/src/components/Checkbox/index.story.tsx","tags":["story"]},"clickable--button":{"type":"story","id":"clickable--button","name":"Button","title":"Clickable","importPath":"./packages/react/src/components/Clickable/index.story.tsx","tags":["story"]},"clickable--link":{"type":"story","id":"clickable--link","name":"Link","title":"Clickable","importPath":"./packages/react/src/components/Clickable/index.story.tsx","tags":["story"]},"dropdownselector-listitem--basic":{"type":"story","id":"dropdownselector-listitem--basic","name":"Basic","title":"DropdownSelector/ListItem","importPath":"./packages/react/src/components/DropdownSelector/ListItem/index.story.tsx","tags":["story"]},"dropdownselector-menulist--basic":{"type":"story","id":"dropdownselector-menulist--basic","name":"Basic","title":"DropdownSelector/MenuList","importPath":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx","tags":["story"]},"dropdownselector-menulist--disabled":{"type":"story","id":"dropdownselector-menulist--disabled","name":"Disabled","title":"DropdownSelector/MenuList","importPath":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx","tags":["story"]},"dropdownselector-menulist--group":{"type":"story","id":"dropdownselector-menulist--group","name":"Group","title":"DropdownSelector/MenuList","importPath":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx","tags":["story"]},"dropdownselector-popover--basic":{"type":"story","id":"dropdownselector-popover--basic","name":"Basic","title":"DropdownSelector/Popover","importPath":"./packages/react/src/components/DropdownSelector/Popover/index.story.tsx","tags":["story"]},"dropdownselector--default":{"type":"story","id":"dropdownselector--default","name":"Default","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--label":{"type":"story","id":"dropdownselector--label","name":"Label","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--disabled":{"type":"story","id":"dropdownselector--disabled","name":"Disabled","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--disabled-item":{"type":"story","id":"dropdownselector--disabled-item","name":"Disabled Item","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--invalid":{"type":"story","id":"dropdownselector--invalid","name":"Invalid","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--assistive-text":{"type":"story","id":"dropdownselector--assistive-text","name":"Assistive Text","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--invalid-assistive-text":{"type":"story","id":"dropdownselector--invalid-assistive-text","name":"Invalid Assistive Text","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--required-text":{"type":"story","id":"dropdownselector--required-text","name":"Required Text","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--sub-label":{"type":"story","id":"dropdownselector--sub-label","name":"Sub Label","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--long-names":{"type":"story","id":"dropdownselector--long-names","name":"Long Names","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--in-modal":{"type":"story","id":"dropdownselector--in-modal","name":"In Modal","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--in-form-tag":{"type":"story","id":"dropdownselector--in-form-tag","name":"In Form Tag","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--custom-children":{"type":"story","id":"dropdownselector--custom-children","name":"Custom Children","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"dropdownselector--section":{"type":"story","id":"dropdownselector--section","name":"Section","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"]},"icon--default":{"type":"story","id":"icon--default","name":"Default","title":"Icon","importPath":"./packages/react/src/components/Icon/index.story.tsx","tags":["story"]},"iconbutton--default-m":{"type":"story","id":"iconbutton--default-m","name":"Default M","title":"IconButton","importPath":"./packages/react/src/components/IconButton/index.story.tsx","tags":["story"]},"iconbutton--is-active":{"type":"story","id":"iconbutton--is-active","name":"Is Active","title":"IconButton","importPath":"./packages/react/src/components/IconButton/index.story.tsx","tags":["story"]},"iconbutton--overlay-m":{"type":"story","id":"iconbutton--overlay-m","name":"Overlay M","title":"IconButton","importPath":"./packages/react/src/components/IconButton/index.story.tsx","tags":["story"]},"loadingspinnericon--icon":{"type":"story","id":"loadingspinnericon--icon","name":"Icon","title":"LoadingSpinnerIcon","importPath":"./packages/react/src/components/LoadingSpinner/LoadingSpinnerIcon.story.tsx","tags":["skip-test","story"]},"loadingspinner--default":{"type":"story","id":"loadingspinner--default","name":"Default","title":"LoadingSpinner","importPath":"./packages/react/src/components/LoadingSpinner/index.story.tsx","tags":["skip-test","story"]},"modal--default":{"type":"story","id":"modal--default","name":"Default","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"]},"modal--full-bottom-sheet":{"type":"story","id":"modal--full-bottom-sheet","name":"Full Bottom Sheet","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"]},"modal--bottom-sheet":{"type":"story","id":"modal--bottom-sheet","name":"Bottom Sheet","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"]},"modal--not-dismmissable-story":{"type":"story","id":"modal--not-dismmissable-story","name":"Not Dismmissable Story","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"]},"modal--background-scroll":{"type":"story","id":"modal--background-scroll","name":"Background Scroll","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"]},"modal--internal-scroll":{"type":"story","id":"modal--internal-scroll","name":"InternalScroll","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"]},"multiselect--default":{"type":"story","id":"multiselect--default","name":"Default","title":"MultiSelect","importPath":"./packages/react/src/components/MultiSelect/index.story.tsx","tags":["story"]},"multiselect--playground":{"type":"story","id":"multiselect--playground","name":"Playground","title":"MultiSelect","importPath":"./packages/react/src/components/MultiSelect/index.story.tsx","tags":["story"]},"multiselect--invalid":{"type":"story","id":"multiselect--invalid","name":"Invalid","title":"MultiSelect","importPath":"./packages/react/src/components/MultiSelect/index.story.tsx","tags":["story"]},"multiselect--overlay":{"type":"story","id":"multiselect--overlay","name":"Overlay","title":"MultiSelect","importPath":"./packages/react/src/components/MultiSelect/index.story.tsx","tags":["story"]},"radio--basic":{"type":"story","id":"radio--basic","name":"Basic","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"]},"radio--disabled":{"type":"story","id":"radio--disabled","name":"Disabled","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"]},"radio--partial-disabled":{"type":"story","id":"radio--partial-disabled","name":"Partial Disabled","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"]},"radio--readonly":{"type":"story","id":"radio--readonly","name":"Readonly","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"]},"radio--invalid":{"type":"story","id":"radio--invalid","name":"Invalid","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"]},"segmentedcontrol--string-segments":{"type":"story","id":"segmentedcontrol--string-segments","name":"String Segments","title":"SegmentedControl","importPath":"./packages/react/src/components/SegmentedControl/index.story.tsx","tags":["story"]},"segmentedcontrol--object-segments":{"type":"story","id":"segmentedcontrol--object-segments","name":"Object Segments","title":"SegmentedControl","importPath":"./packages/react/src/components/SegmentedControl/index.story.tsx","tags":["story"]},"switch--basic":{"type":"story","id":"switch--basic","name":"Basic","title":"Switch","importPath":"./packages/react/src/components/Switch/index.story.tsx","tags":["story"]},"switch--checked":{"type":"story","id":"switch--checked","name":"Checked","title":"Switch","importPath":"./packages/react/src/components/Switch/index.story.tsx","tags":["story"]},"switch--labelled":{"type":"story","id":"switch--labelled","name":"Labelled","title":"Switch","importPath":"./packages/react/src/components/Switch/index.story.tsx","tags":["story"]},"switch--disabled":{"type":"story","id":"switch--disabled","name":"Disabled","title":"Switch","importPath":"./packages/react/src/components/Switch/index.story.tsx","tags":["story"]},"tagitem--default":{"type":"story","id":"tagitem--default","name":"Default","title":"TagItem","importPath":"./packages/react/src/components/TagItem/index.story.tsx","tags":["story"]},"tagitem--playground":{"type":"story","id":"tagitem--playground","name":"Playground","title":"TagItem","importPath":"./packages/react/src/components/TagItem/index.story.tsx","tags":["story"]},"textarea--default":{"type":"story","id":"textarea--default","name":"Default","title":"TextArea","importPath":"./packages/react/src/components/TextArea/TextArea.story.tsx","tags":["story"]},"textarea--has-label":{"type":"story","id":"textarea--has-label","name":"Has Label","title":"TextArea","importPath":"./packages/react/src/components/TextArea/TextArea.story.tsx","tags":["story"]},"textarea--has-count":{"type":"story","id":"textarea--has-count","name":"Has Count","title":"TextArea","importPath":"./packages/react/src/components/TextArea/TextArea.story.tsx","tags":["story"]},"textarea--auto-height":{"type":"story","id":"textarea--auto-height","name":"Auto Height","title":"TextArea","importPath":"./packages/react/src/components/TextArea/TextArea.story.tsx","tags":["story"]},"textfield--default":{"type":"story","id":"textfield--default","name":"Default","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"]},"textfield--number":{"type":"story","id":"textfield--number","name":"Number","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"]},"textfield--has-label":{"type":"story","id":"textfield--has-label","name":"Has Label","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"]},"textfield--has-count":{"type":"story","id":"textfield--has-count","name":"Has Count","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"]},"textfield--has-affix":{"type":"story","id":"textfield--has-affix","name":"Has Affix","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"]},"textfield--prefix-icon":{"type":"story","id":"textfield--prefix-icon","name":"Prefix Icon","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"]},"styled-example--example":{"type":"story","id":"styled-example--example","name":"Example","title":"styled/example","importPath":"./packages/styled/src/index.story.tsx","tags":["story"]},"tailwind-config-colors-text-bg-color--playground":{"type":"story","id":"tailwind-config-colors-text-bg-color--playground","name":"Playground","title":"tailwind-config/Colors/Text bg color","importPath":"./packages/tailwind-config/src/docs/colors/TextBgColor.story.tsx","tags":["story"]}}}
diff --git a/project.json b/project.json
index b393b780f..76c780eed 100644
--- a/project.json
+++ b/project.json
@@ -1 +1 @@
-{"generatedAt":1710226259579,"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"monorepo":"Lerna","packageManager":{"type":"yarn","version":"3.2.0-rc.3.git.20211109.hash-e1bddf224"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/react","storybookVersion":"7.4.1","storybookVersionSpecifier":"^7.4.1","language":"typescript","storybookPackages":{"@storybook/addon-docs":{"version":"7.5.1"},"@storybook/addon-interactions":{"version":"7.4.1"},"@storybook/addon-onboarding":{"version":"1.0.8"},"@storybook/addon-styling-webpack":{"version":"0.0.5"},"@storybook/blocks":{"version":"7.4.6"},"@storybook/builder-vite":{"version":"7.4.1"},"@storybook/builder-webpack5":{"version":"7.4.1"},"@storybook/react":{"version":"7.4.1"},"@storybook/react-vite":{"version":"7.4.1"},"@storybook/react-webpack5":{"version":"7.4.1"},"@storybook/test-runner":{"version":"0.16.0"},"@storybook/testing-library":{"version":"0.2.0"},"eslint-plugin-storybook":{"version":"0.6.11"},"storybook":{"version":"7.4.1"}},"addons":{"@storybook/addon-essentials":{"version":"7.4.1"},"@storybook/addon-a11y":{"version":"7.4.1"},"@storybook/addon-links":{"version":"7.4.1"},"@storybook/addon-storysource":{"version":"7.4.1"},"storybook-dark-mode":{"version":"3.0.1"},"@storybook/addon-styling":{"version":"1.3.7"}}}
+{"generatedAt":1710305831831,"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"monorepo":"Lerna","packageManager":{"type":"yarn","version":"3.2.0-rc.3.git.20211109.hash-e1bddf224"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/react","storybookVersion":"7.4.1","storybookVersionSpecifier":"^7.4.1","language":"typescript","storybookPackages":{"@storybook/addon-docs":{"version":"7.5.1"},"@storybook/addon-interactions":{"version":"7.4.1"},"@storybook/addon-onboarding":{"version":"1.0.8"},"@storybook/addon-styling-webpack":{"version":"0.0.5"},"@storybook/blocks":{"version":"7.4.6"},"@storybook/builder-vite":{"version":"7.4.1"},"@storybook/builder-webpack5":{"version":"7.4.1"},"@storybook/react":{"version":"7.4.1"},"@storybook/react-vite":{"version":"7.4.1"},"@storybook/react-webpack5":{"version":"7.4.1"},"@storybook/test-runner":{"version":"0.16.0"},"@storybook/testing-library":{"version":"0.2.0"},"eslint-plugin-storybook":{"version":"0.6.11"},"storybook":{"version":"7.4.1"}},"addons":{"@storybook/addon-essentials":{"version":"7.4.1"},"@storybook/addon-a11y":{"version":"7.4.1"},"@storybook/addon-links":{"version":"7.4.1"},"@storybook/addon-storysource":{"version":"7.4.1"},"storybook-dark-mode":{"version":"3.0.1"},"@storybook/addon-styling":{"version":"1.3.7"}}}
diff --git a/react-sandbox-src-components-Carousel-index-story.a35d61d6.iframe.bundle.js b/react-sandbox-src-components-Carousel-index-story.39df6b09.iframe.bundle.js
similarity index 98%
rename from react-sandbox-src-components-Carousel-index-story.a35d61d6.iframe.bundle.js
rename to react-sandbox-src-components-Carousel-index-story.39df6b09.iframe.bundle.js
index 5a17fdbf9..cf36783c0 100644
--- a/react-sandbox-src-components-Carousel-index-story.a35d61d6.iframe.bundle.js
+++ b/react-sandbox-src-components-Carousel-index-story.39df6b09.iframe.bundle.js
@@ -158,5 +158,5 @@
   line-height: 0;
   font-size: 0;
   vertical-align: middle;
-`,IconBasePath=({path,transform,fillRule,clipRule})=>"string"==typeof path?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("path",{d:path,transform,fillRule,clipRule}):(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:path});try{Base.displayName="Base",Base.__docgenInfo={description:"",displayName:"Base",props:{path:{defaultValue:null,description:"",name:"path",required:!0,type:{name:"ReactNode"}},viewBoxSize:{defaultValue:null,description:"",name:"viewBoxSize",required:!0,type:{name:"number"}},size:{defaultValue:{value:"24"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:"32"},{value:"40"},{value:"48"},{value:"16"},{value:"24"},{value:"72"},{value:"64"}]}},transform:{defaultValue:null,description:"",name:"transform",required:!1,type:{name:"string"}},currentColor:{defaultValue:null,description:"",name:"currentColor",required:!1,type:{name:"boolean"}},fillRule:{defaultValue:null,description:"",name:"fillRule",required:!1,type:{name:"enum",value:[{value:'"evenodd"'},{value:'"nonzero"'}]}},clipRule:{defaultValue:null,description:"",name:"clipRule",required:!1,type:{name:"enum",value:[{value:'"inherit"'},{value:'"evenodd"'},{value:'"nonzero"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react-sandbox/src/components/icons/Base.tsx#Base"]={docgenInfo:Base.__docgenInfo,name:"Base",path:"packages/react-sandbox/src/components/icons/Base.tsx#Base"})}catch(__react_docgen_typescript_loader_error){}try{IconBasePath.displayName="IconBasePath",IconBasePath.__docgenInfo={description:"",displayName:"IconBasePath",props:{path:{defaultValue:null,description:"",name:"path",required:!0,type:{name:"ReactNode"}},clipRule:{defaultValue:null,description:"",name:"clipRule",required:!1,type:{name:"enum",value:[{value:'"inherit"'},{value:'"evenodd"'},{value:'"nonzero"'}]}},fillRule:{defaultValue:null,description:"",name:"fillRule",required:!1,type:{name:"enum",value:[{value:'"evenodd"'},{value:'"nonzero"'}]}},transform:{defaultValue:null,description:"",name:"transform",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react-sandbox/src/components/icons/Base.tsx#IconBasePath"]={docgenInfo:IconBasePath.__docgenInfo,name:"IconBasePath",path:"packages/react-sandbox/src/components/icons/Base.tsx#IconBasePath"})}catch(__react_docgen_typescript_loader_error){}},"./packages/react-sandbox/src/foundation/hooks.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{D$:()=>useDebounceAnimationState,h4:()=>useElementSize});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");__webpack_require__("./node_modules/react-dom/index.js");function measure(ref){return null!==ref?ref.getBoundingClientRect():void 0}function useElementSize(ref,deps=[]){const[size,setSize]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useReducer)(((state,next)=>void 0===state||void 0===next?next:state.height===next.height&&state.width===next.width?state:next),void 0),[watch,setWatch]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);return(0,react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)((()=>{if(null===watch)return;const observer=new ResizeObserver((()=>{const newSize=measure(watch);setSize(newSize)}));return observer.observe(watch),()=>{observer.unobserve(watch),setSize(void 0)}}),[watch]),(0,react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)((()=>{ref.current!==watch&&setWatch(ref.current)})),(0,react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)((()=>{deps.length>0&&setSize(measure(ref.current))}),deps),(0,react__WEBPACK_IMPORTED_MODULE_0__.useDebugValue)(size),size}function useDebounceAnimationState(defaultValue){const[state,setState]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(defaultValue),timer=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();return[state,(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(((value,force=!1)=>{force?setState(value):void 0===timer.current&&(timer.current=requestAnimationFrame((()=>{setState(value),void 0!==timer.current&&(timer.current=void 0)})))}),[])]}},"./packages/react-sandbox/src/foundation/utils.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{function unreachable(value){throw new Error(0===arguments.length?"unreachable":`unreachable (${JSON.stringify(value)})`)}__webpack_require__.d(__webpack_exports__,{t:()=>unreachable})}}]);
-//# sourceMappingURL=react-sandbox-src-components-Carousel-index-story.a35d61d6.iframe.bundle.js.map
\ No newline at end of file
+`,IconBasePath=({path,transform,fillRule,clipRule})=>"string"==typeof path?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("path",{d:path,transform,fillRule,clipRule}):(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:path});try{Base.displayName="Base",Base.__docgenInfo={description:"",displayName:"Base",props:{path:{defaultValue:null,description:"",name:"path",required:!0,type:{name:"ReactNode"}},viewBoxSize:{defaultValue:null,description:"",name:"viewBoxSize",required:!0,type:{name:"number"}},size:{defaultValue:{value:"24"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:"32"},{value:"40"},{value:"48"},{value:"16"},{value:"24"},{value:"72"},{value:"64"}]}},transform:{defaultValue:null,description:"",name:"transform",required:!1,type:{name:"string"}},currentColor:{defaultValue:null,description:"",name:"currentColor",required:!1,type:{name:"boolean"}},fillRule:{defaultValue:null,description:"",name:"fillRule",required:!1,type:{name:"enum",value:[{value:'"evenodd"'},{value:'"nonzero"'}]}},clipRule:{defaultValue:null,description:"",name:"clipRule",required:!1,type:{name:"enum",value:[{value:'"inherit"'},{value:'"evenodd"'},{value:'"nonzero"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react-sandbox/src/components/icons/Base.tsx#Base"]={docgenInfo:Base.__docgenInfo,name:"Base",path:"packages/react-sandbox/src/components/icons/Base.tsx#Base"})}catch(__react_docgen_typescript_loader_error){}try{IconBasePath.displayName="IconBasePath",IconBasePath.__docgenInfo={description:"",displayName:"IconBasePath",props:{path:{defaultValue:null,description:"",name:"path",required:!0,type:{name:"ReactNode"}},transform:{defaultValue:null,description:"",name:"transform",required:!1,type:{name:"string"}},clipRule:{defaultValue:null,description:"",name:"clipRule",required:!1,type:{name:"enum",value:[{value:'"inherit"'},{value:'"evenodd"'},{value:'"nonzero"'}]}},fillRule:{defaultValue:null,description:"",name:"fillRule",required:!1,type:{name:"enum",value:[{value:'"evenodd"'},{value:'"nonzero"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react-sandbox/src/components/icons/Base.tsx#IconBasePath"]={docgenInfo:IconBasePath.__docgenInfo,name:"IconBasePath",path:"packages/react-sandbox/src/components/icons/Base.tsx#IconBasePath"})}catch(__react_docgen_typescript_loader_error){}},"./packages/react-sandbox/src/foundation/hooks.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{D$:()=>useDebounceAnimationState,h4:()=>useElementSize});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");__webpack_require__("./node_modules/react-dom/index.js");function measure(ref){return null!==ref?ref.getBoundingClientRect():void 0}function useElementSize(ref,deps=[]){const[size,setSize]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useReducer)(((state,next)=>void 0===state||void 0===next?next:state.height===next.height&&state.width===next.width?state:next),void 0),[watch,setWatch]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);return(0,react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)((()=>{if(null===watch)return;const observer=new ResizeObserver((()=>{const newSize=measure(watch);setSize(newSize)}));return observer.observe(watch),()=>{observer.unobserve(watch),setSize(void 0)}}),[watch]),(0,react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)((()=>{ref.current!==watch&&setWatch(ref.current)})),(0,react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)((()=>{deps.length>0&&setSize(measure(ref.current))}),deps),(0,react__WEBPACK_IMPORTED_MODULE_0__.useDebugValue)(size),size}function useDebounceAnimationState(defaultValue){const[state,setState]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(defaultValue),timer=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();return[state,(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(((value,force=!1)=>{force?setState(value):void 0===timer.current&&(timer.current=requestAnimationFrame((()=>{setState(value),void 0!==timer.current&&(timer.current=void 0)})))}),[])]}},"./packages/react-sandbox/src/foundation/utils.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{function unreachable(value){throw new Error(0===arguments.length?"unreachable":`unreachable (${JSON.stringify(value)})`)}__webpack_require__.d(__webpack_exports__,{t:()=>unreachable})}}]);
+//# sourceMappingURL=react-sandbox-src-components-Carousel-index-story.39df6b09.iframe.bundle.js.map
\ No newline at end of file
diff --git a/react-sandbox-src-components-Carousel-index-story.a35d61d6.iframe.bundle.js.map b/react-sandbox-src-components-Carousel-index-story.39df6b09.iframe.bundle.js.map
similarity index 99%
rename from react-sandbox-src-components-Carousel-index-story.a35d61d6.iframe.bundle.js.map
rename to react-sandbox-src-components-Carousel-index-story.39df6b09.iframe.bundle.js.map
index 59a685cd2..66e2d562d 100644
--- a/react-sandbox-src-components-Carousel-index-story.a35d61d6.iframe.bundle.js.map
+++ b/react-sandbox-src-components-Carousel-index-story.39df6b09.iframe.bundle.js.map
@@ -1 +1 @@
-{"version":3,"file":"react-sandbox-src-components-Carousel-index-story.a35d61d6.iframe.bundle.js","mappings":";;;;;;;;;;AA8TA;;;;AAMA;;;;AAOA;;;AAIA;AACA;;;;;;;AASA;;;;;;;;;;AAYA;;;AAGA;AA/VA;AAmWA;AAnWA;;;;AAAA;;AA0WA;AA1WA;;AA+WA;;;AA/WA;;;AAuXA;;AAvXA;AAAA;;;AAAA;AA8XA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACtUA;AAAA;;AASA;;AAEA;AAGA;;;;;;;;;;;;;;;;;AAiBA;AACA;AAEA;;;AAGA;AACA;AAEA;;;AAGA;;;;;AASA;;;;AA2BA;AAEA;;;;AAIA;AAEA;;AAIA;;;;;;AClHA;AAEA;AACA;;;;AAUA","sources":["webpack://charcoal-ui/./packages/react-sandbox/src/components/Carousel/index.tsx","webpack://charcoal-ui/./packages/react-sandbox/src/components/CarouselButton/index.tsx","webpack://charcoal-ui/./packages/react-sandbox/src/components/icons/Base.tsx"],"sourcesContent":["import { useEffect, useState, useCallback, useRef } from 'react'\nimport * as React from 'react'\nimport { animated, useSpring } from 'react-spring'\nimport styled, { css } from 'styled-components'\nimport { useDebounceAnimationState } from '../../foundation/hooks'\nimport { passiveEvents, isEdge } from '../../foundation/support'\nimport { useIsomorphicLayoutEffect } from '../../hooks'\nimport CarouselButton, { Direction } from '../CarouselButton'\n\nexport const GRADIENT_WIDTH = 72\n/**\n * カルーセル系のスクロール量の定数\n *\n * @example\n * const scrollAmount = containerElm.clientWidth * SCROLL_AMOUNT_COEF\n */\nexport const SCROLL_AMOUNT_COEF = 0.75\n\ninterface ScrollProps {\n  align?: 'center' | 'left' | 'right'\n  offset?: number\n}\n\nexport interface CarouselBaseAppearanceProps {\n  buttonOffset?: number\n  buttonPadding?: number\n  bottomOffset?: number\n  defaultScroll?: ScrollProps\n}\n\nexport type CarouselGradientProps =\n  | { hasGradient?: false }\n  | {\n      hasGradient: true\n      fadeInGradient?: boolean\n    }\n\ntype CarouselAppearanceProps = CarouselBaseAppearanceProps &\n  CarouselGradientProps\n\ntype Props = CarouselAppearanceProps & {\n  onScroll?: (left: number) => void\n  onResize?: (width: number) => void\n  children: React.ReactNode\n  centerItems?: boolean\n  onScrollStateChange?: (canScroll: boolean) => void\n  scrollAmountCoef?: number\n}\n\nexport interface CarouselHandlerRef {\n  resetScroll(): void\n}\n\nexport default function Carousel({\n  buttonOffset = 0,\n  buttonPadding = 16,\n  bottomOffset = 0,\n  defaultScroll: { align = 'left', offset: scrollOffset = 0 } = {},\n  onScroll,\n  onResize,\n  children,\n  centerItems,\n  onScrollStateChange,\n  scrollAmountCoef = SCROLL_AMOUNT_COEF,\n  ...options\n}: Props) {\n  // スクロール位置を保存する\n  // アニメーション中の場合は、アニメーション終了時のスクロール位置が保存される\n  const [scrollLeft, setScrollLeft] = useDebounceAnimationState(0)\n  // アニメーション中かどうか\n  const animation = useRef(false)\n  // スクロール可能な領域を保存する\n  const [maxScrollLeft, setMaxScrollLeft] = useState(0)\n  // 左右のボタンの表示状態を保存する\n  const [leftShow, setLeftShow] = useState(false)\n  const [rightShow, setRightShow] = useState(false)\n\n  // const [props, set, stop] = useSpring(() => ({\n  //   scroll: 0\n  // }))\n  const [styles, set] = useSpring(() => ({ scroll: 0 }))\n\n  const ref = useRef<HTMLDivElement>(null)\n  const visibleAreaRef = useRef<HTMLDivElement>(null)\n  const innerRef = useRef<HTMLUListElement>(null)\n\n  const handleRight = useCallback(() => {\n    if (visibleAreaRef.current === null) {\n      return\n    }\n    const { clientWidth } = visibleAreaRef.current\n    // スクロール領域を超えないように、アニメーションを開始\n    // アニメーション中にアニメーションが開始されたときに、アニメーション終了予定の位置から再度計算するようにする\n    const scroll = Math.min(\n      scrollLeft + clientWidth * scrollAmountCoef,\n      maxScrollLeft\n    )\n    setScrollLeft(scroll, true)\n    set({ scroll, from: { scroll: scrollLeft }, reset: !animation.current })\n    animation.current = true\n  }, [\n    animation,\n    maxScrollLeft,\n    scrollLeft,\n    set,\n    scrollAmountCoef,\n    setScrollLeft,\n  ])\n\n  const handleLeft = useCallback(() => {\n    if (visibleAreaRef.current === null) {\n      return\n    }\n    const { clientWidth } = visibleAreaRef.current\n    const scroll = Math.max(scrollLeft - clientWidth * scrollAmountCoef, 0)\n    setScrollLeft(scroll, true)\n    set({ scroll, from: { scroll: scrollLeft }, reset: !animation.current })\n    animation.current = true\n  }, [animation, scrollLeft, set, scrollAmountCoef, setScrollLeft])\n\n  // スクロール可能な場合にボタンを表示する\n  // scrollLeftが変化したときに処理する (アニメーション開始時 & 手動スクロール時)\n  useEffect(() => {\n    const newLeftShow = scrollLeft > 0\n    const newRightShow = scrollLeft < maxScrollLeft && maxScrollLeft > 0\n    if (newLeftShow !== leftShow || newRightShow !== rightShow) {\n      setLeftShow(newLeftShow)\n      setRightShow(newRightShow)\n      onScrollStateChange?.(newLeftShow || newRightShow)\n    }\n  }, [leftShow, maxScrollLeft, onScrollStateChange, rightShow, scrollLeft])\n\n  const handleScroll = useCallback(() => {\n    if (ref.current === null) {\n      return\n    }\n    // 手動でスクロールが開始されたときにアニメーションを中断\n    if (animation.current) {\n      styles.scroll.stop()\n      animation.current = false\n    }\n    // スクロール位置を保存 (アニメーションの基準になる)\n    const manualScrollLeft = ref.current.scrollLeft\n    // 過剰にsetStateが走らないようにdebounceする\n    setScrollLeft(manualScrollLeft)\n  }, [animation, setScrollLeft, styles])\n\n  // リサイズが起きたときに、アニメーション用のスクロール領域 & ボタンの表示状態 を再計算する\n  const handleResize = useCallback(() => {\n    if (ref.current === null) {\n      return\n    }\n    const { clientWidth, scrollWidth } = ref.current\n    const newMaxScrollLeft = scrollWidth - clientWidth\n    setMaxScrollLeft(newMaxScrollLeft)\n    if (onResize) {\n      onResize(clientWidth)\n    }\n  }, [onResize])\n\n  useIsomorphicLayoutEffect(() => {\n    const elm = ref.current\n    const innerElm = innerRef.current\n    if (elm === null || innerElm === null) {\n      return\n    }\n\n    elm.addEventListener(\n      'wheel',\n      handleScroll,\n      passiveEvents() && { passive: true }\n    )\n\n    const resizeObserver = new ResizeObserver(handleResize)\n    resizeObserver.observe(elm)\n\n    const resizeObserverInner = new ResizeObserver(handleResize)\n    resizeObserverInner.observe(innerElm)\n\n    return () => {\n      elm.removeEventListener('wheel', handleScroll)\n      resizeObserver.disconnect()\n      resizeObserverInner.disconnect()\n    }\n  }, [handleResize, handleScroll])\n\n  // 初期スクロールを行う\n  useIsomorphicLayoutEffect(() => {\n    if (align !== 'left' || scrollOffset !== 0) {\n      const scroll = ref.current\n      if (scroll !== null) {\n        const scrollLength = Math.max(\n          0,\n          Math.min(\n            align === 'left' && scrollOffset > 0\n              ? scrollOffset\n              : align === 'center'\n              ? maxScrollLeft / 2 + scrollOffset\n              : align === 'right' && scrollOffset <= maxScrollLeft\n              ? maxScrollLeft - scrollOffset / 2\n              : 0,\n            maxScrollLeft\n          )\n        )\n        scroll.scrollLeft = scrollLength\n        setScrollLeft(scrollLength, true)\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ref.current])\n\n  const handleScrollMove = useCallback(() => {\n    if (ref.current === null) {\n      return\n    }\n    if (onScroll) {\n      onScroll(ref.current.scrollLeft)\n    }\n  }, [onScroll])\n\n  const [disableGradient, setDisableGradient] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    if (isEdge()) {\n      setDisableGradient(true)\n    }\n  }, [])\n\n  // NOTE: Edgeではmaskを使うと要素のレンダリングがバグる（場合によっては画像が表示されない）のでグラデーションを無効にする\n  if (!disableGradient && options.hasGradient === true) {\n    const fadeInGradient = options.fadeInGradient ?? false\n    const overflowGradient = !fadeInGradient\n    return (\n      <Container ref={visibleAreaRef}>\n        <GradientContainer fadeInGradient={fadeInGradient}>\n          <RightGradient>\n            <LeftGradient show={overflowGradient || scrollLeft > 0}>\n              <ScrollArea\n                ref={ref}\n                scrollLeft={styles.scroll}\n                onScroll={handleScrollMove}\n              >\n                <CarouselContainer ref={innerRef} centerItems={centerItems}>\n                  {children}\n                </CarouselContainer>\n              </ScrollArea>\n            </LeftGradient>\n          </RightGradient>\n        </GradientContainer>\n        <ButtonsContainer>\n          <CarouselButton\n            direction={Direction.Left}\n            show={leftShow}\n            offset={buttonOffset}\n            bottomOffset={bottomOffset}\n            padding={buttonPadding}\n            gradient={overflowGradient}\n            onClick={handleLeft}\n          />\n          <CarouselButton\n            direction={Direction.Right}\n            show={rightShow}\n            offset={buttonOffset}\n            bottomOffset={bottomOffset}\n            padding={buttonPadding}\n            gradient\n            onClick={handleRight}\n          />\n        </ButtonsContainer>\n      </Container>\n    )\n  }\n\n  return (\n    <Container ref={visibleAreaRef}>\n      <ScrollArea\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-expect-error\n        ref={ref}\n        scrollLeft={styles.scroll}\n        onScroll={handleScrollMove}\n      >\n        <CarouselContainer ref={innerRef} centerItems={centerItems}>\n          {children}\n        </CarouselContainer>\n      </ScrollArea>\n      <ButtonsContainer>\n        <CarouselButton\n          direction={Direction.Left}\n          show={leftShow}\n          offset={buttonOffset}\n          bottomOffset={bottomOffset}\n          padding={buttonPadding}\n          onClick={handleLeft}\n        />\n        <CarouselButton\n          direction={Direction.Right}\n          show={rightShow}\n          offset={buttonOffset}\n          bottomOffset={bottomOffset}\n          padding={buttonPadding}\n          onClick={handleRight}\n        />\n      </ButtonsContainer>\n    </Container>\n  )\n}\n\nconst CarouselContainer = styled.ul<{ centerItems?: boolean }>`\n  vertical-align: top;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n\n  /* 最小幅を100%にして親要素にぴったりくっつけることで子要素で要素を均等に割り付けるなどを出来るようにしてある */\n  min-width: 100%;\n  box-sizing: border-box;\n\n  ${({ centerItems = false }) =>\n    centerItems\n      ? css`\n          display: flex;\n          width: max-content;\n          margin: 0 auto;\n        `\n      : css`\n          display: inline-flex;\n          margin: 0;\n        `}\n`\n\nconst ButtonsContainer = styled.div`\n  opacity: 0;\n  transition: 0.4s opacity;\n`\nconst Container = styled.div`\n  &:hover ${ButtonsContainer} {\n    opacity: 1;\n  }\n\n  /* CarouselButtonの中にz-index:1があるのでここでコンテキストを切る */\n  position: relative;\n  z-index: 0;\n`\n\nconst ScrollArea = styled(animated.div)`\n  overflow-x: auto;\n  padding: 0;\n  margin: 0;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  scrollbar-width: none;\n`\n\nconst GradientContainer = styled.div<{ fadeInGradient: boolean }>`\n  /* NOTE: LeftGradientがはみ出るためhidden */\n  overflow: hidden;\n  ${(p) =>\n    !p.fadeInGradient &&\n    css`\n      margin-left: ${-GRADIENT_WIDTH}px;\n      ${CarouselContainer} {\n        padding-left: ${GRADIENT_WIDTH}px;\n      }\n    `}\n\n  margin-right: ${-GRADIENT_WIDTH}px;\n  /* stylelint-disable-next-line no-duplicate-selectors */\n  ${CarouselContainer} {\n    padding-right: ${GRADIENT_WIDTH}px;\n  }\n`\n\nconst RightGradient = styled.div`\n  mask-image: linear-gradient(\n    to right,\n    #000 calc(100% - ${GRADIENT_WIDTH}px),\n    transparent\n  );\n`\n\nconst LeftGradient = styled.div<{ show: boolean }>`\n  /* NOTE: mask-position が left → negative px の時、right → abs(negative px) の位置に表示されるため */\n  margin-right: ${-GRADIENT_WIDTH}px;\n  padding-right: ${GRADIENT_WIDTH}px;\n  /* NOTE: mask-position に transition をつけたいが vender prefixes 対策で all につける */\n  transition: 0.2s all ease-in;\n  mask: linear-gradient(to right, transparent, #000 ${GRADIENT_WIDTH}px)\n    ${(p) => (p.show ? 0 : -GRADIENT_WIDTH)}px 0;\n`\n","import styled, { css } from 'styled-components'\nimport { unreachable } from '../../foundation/utils'\nimport NextIcon, { WedgeDirection } from '../icons/NextIcon'\nimport { applyEffect } from '@charcoal-ui/utils'\n\nexport enum Direction {\n  Right = 'right',\n  Left = 'left',\n}\n\ninterface Props {\n  direction: Direction\n  show: boolean\n  offset?: number\n  padding?: number\n  bottomOffset?: number\n  gradient?: boolean\n  onClick(): void\n}\n\nexport default function CarouselButton({\n  direction,\n  show,\n  offset = 0,\n  padding = 0,\n  bottomOffset: bottom = 0,\n  gradient = false,\n  onClick,\n}: Props) {\n  const offsetStyle =\n    direction === Direction.Left\n      ? {\n          left: gradient ? offset - 72 : offset,\n          paddingLeft: Math.max(padding, 0),\n          paddingBottom: bottom,\n        }\n      : {\n          right: gradient ? offset - 72 : offset,\n          paddingRight: Math.max(padding, 0),\n          paddingBottom: bottom,\n        }\n  return (\n    <Button\n      type=\"button\"\n      onClick={onClick}\n      hide={!show}\n      style={offsetStyle}\n      css={onlyNonTouchDevice}\n    >\n      <CarouselButtonIcon>\n        <NextIcon\n          direction={\n            direction === Direction.Right\n              ? WedgeDirection.Right\n              : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n              direction === Direction.Left\n              ? WedgeDirection.Left\n              : unreachable()\n          }\n        />\n      </CarouselButtonIcon>\n    </Button>\n  )\n}\n\nexport const CAROUSEL_BUTTON_SIZE = 40\n\nconst CarouselButtonIcon = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${CAROUSEL_BUTTON_SIZE}px;\n  height: ${CAROUSEL_BUTTON_SIZE}px;\n  border-radius: 50%;\n  background-color: ${({ theme }) => theme.color.surface4};\n  transition: 0.4s visibility, 0.4s opacity, 0.2s background-color, 0.2s color;\n  color: ${({ theme }) => theme.color.text5};\n`\n\nconst Button = styled.button<{ hide: boolean }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  padding: 0;\n  min-width: 40px;\n  border: none;\n  outline: 0;\n  background: transparent;\n  cursor: pointer;\n  transition: 0.4s visibility, 0.4s opacity;\n  /* つらい */\n  /* このコンポーネントはCarouselでしか使われてないのでそっちでコンテキストで切る */\n  z-index: 1;\n\n  &:hover ${CarouselButtonIcon} {\n    background-color: ${({ theme }) =>\n      applyEffect(theme.color.surface4, theme.effect.hover)};\n    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.hover)};\n  }\n\n  &:active ${CarouselButtonIcon} {\n    background-color: ${({ theme }) =>\n      applyEffect(theme.color.surface4, theme.effect.press)};\n    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.press)};\n  }\n\n  ${(p) =>\n    p.hide &&\n    css`\n      visibility: hidden;\n      opacity: 0;\n      pointer-events: none;\n    `}\n`\n\nexport function ScrollHintButton({\n  direction,\n  onClick,\n}: {\n  direction: Direction\n  onClick(): void\n}) {\n  return (\n    <ScrollHintIcon onClick={onClick}>\n      <NextIcon\n        direction={\n          direction === Direction.Right\n            ? WedgeDirection.Right\n            : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n            direction === Direction.Left\n            ? WedgeDirection.Left\n            : unreachable()\n        }\n      />\n    </ScrollHintIcon>\n  )\n}\n\nconst ScrollHintIcon = styled(CarouselButtonIcon)`\n  cursor: pointer;\n\n  &:hover {\n    background-color: ${({ theme }) =>\n      applyEffect(theme.color.surface4, theme.effect.hover)};\n    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.hover)};\n  }\n\n  &:active {\n    background-color: ${({ theme }) =>\n      applyEffect(theme.color.surface4, theme.effect.press)};\n    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.press)};\n  }\n`\n\nconst onlyNonTouchDevice = css`\n  @media (hover: none) and (pointer: coarse) {\n    display: none;\n  }\n`\n","import * as React from 'react'\nimport styled from 'styled-components'\n\nexport type IconSizes = 16 | 24 | 32\n\ninterface Props {\n  path: string | React.ReactNode\n  viewBoxSize: number\n  size?: IconSizes | 40 | 48 | 64 | 72\n  transform?: string\n  currentColor?: boolean\n  fillRule?: 'nonzero' | 'evenodd'\n  clipRule?: 'nonzero' | 'evenodd' | 'inherit'\n}\n\nexport default function IconBase({\n  size = 24,\n  viewBoxSize,\n  currentColor,\n  path,\n  transform,\n  fillRule,\n  clipRule,\n}: Props) {\n  return (\n    <Icon\n      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n      size={size}\n      currentColor={currentColor}\n    >\n      <IconBasePath\n        path={path}\n        transform={transform}\n        fillRule={fillRule}\n        clipRule={clipRule}\n      />\n    </Icon>\n  )\n}\n\nconst Icon = styled.svg<{ size: number; currentColor?: boolean }>`\n  stroke: none;\n  fill: ${({ currentColor = false, theme }) =>\n    currentColor ? 'currentColor' : theme.color.text2};\n  width: ${(props) => props.size}px;\n  height: ${(props) => props.size}px;\n  line-height: 0;\n  font-size: 0;\n  vertical-align: middle;\n`\n\ntype IconBasePathProps = Pick<\n  Props,\n  'path' | 'transform' | 'fillRule' | 'clipRule'\n>\nexport const IconBasePath = ({\n  path,\n  transform,\n  fillRule,\n  clipRule,\n}: IconBasePathProps) => {\n  if (typeof path === 'string') {\n    return (\n      <path\n        d={path}\n        transform={transform}\n        fillRule={fillRule}\n        clipRule={clipRule}\n      />\n    )\n  } else {\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    return <>{path}</>\n  }\n}\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"react-sandbox-src-components-Carousel-index-story.39df6b09.iframe.bundle.js","mappings":";;;;;;;;;;AA8TA;;;;AAMA;;;;AAOA;;;AAIA;AACA;;;;;;;AASA;;;;;;;;;;AAYA;;;AAGA;AA/VA;AAmWA;AAnWA;;;;AAAA;;AA0WA;AA1WA;;AA+WA;;;AA/WA;;;AAuXA;;AAvXA;AAAA;;;AAAA;AA8XA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACtUA;AAAA;;AASA;;AAEA;AAGA;;;;;;;;;;;;;;;;;AAiBA;AACA;AAEA;;;AAGA;AACA;AAEA;;;AAGA;;;;;AASA;;;;AA2BA;AAEA;;;;AAIA;AAEA;;AAIA;;;;;;AClHA;AAEA;AACA;;;;AAUA","sources":["webpack://charcoal-ui/./packages/react-sandbox/src/components/Carousel/index.tsx","webpack://charcoal-ui/./packages/react-sandbox/src/components/CarouselButton/index.tsx","webpack://charcoal-ui/./packages/react-sandbox/src/components/icons/Base.tsx"],"sourcesContent":["import { useEffect, useState, useCallback, useRef } from 'react'\nimport * as React from 'react'\nimport { animated, useSpring } from 'react-spring'\nimport styled, { css } from 'styled-components'\nimport { useDebounceAnimationState } from '../../foundation/hooks'\nimport { passiveEvents, isEdge } from '../../foundation/support'\nimport { useIsomorphicLayoutEffect } from '../../hooks'\nimport CarouselButton, { Direction } from '../CarouselButton'\n\nexport const GRADIENT_WIDTH = 72\n/**\n * カルーセル系のスクロール量の定数\n *\n * @example\n * const scrollAmount = containerElm.clientWidth * SCROLL_AMOUNT_COEF\n */\nexport const SCROLL_AMOUNT_COEF = 0.75\n\ninterface ScrollProps {\n  align?: 'center' | 'left' | 'right'\n  offset?: number\n}\n\nexport interface CarouselBaseAppearanceProps {\n  buttonOffset?: number\n  buttonPadding?: number\n  bottomOffset?: number\n  defaultScroll?: ScrollProps\n}\n\nexport type CarouselGradientProps =\n  | { hasGradient?: false }\n  | {\n      hasGradient: true\n      fadeInGradient?: boolean\n    }\n\ntype CarouselAppearanceProps = CarouselBaseAppearanceProps &\n  CarouselGradientProps\n\ntype Props = CarouselAppearanceProps & {\n  onScroll?: (left: number) => void\n  onResize?: (width: number) => void\n  children: React.ReactNode\n  centerItems?: boolean\n  onScrollStateChange?: (canScroll: boolean) => void\n  scrollAmountCoef?: number\n}\n\nexport interface CarouselHandlerRef {\n  resetScroll(): void\n}\n\nexport default function Carousel({\n  buttonOffset = 0,\n  buttonPadding = 16,\n  bottomOffset = 0,\n  defaultScroll: { align = 'left', offset: scrollOffset = 0 } = {},\n  onScroll,\n  onResize,\n  children,\n  centerItems,\n  onScrollStateChange,\n  scrollAmountCoef = SCROLL_AMOUNT_COEF,\n  ...options\n}: Props) {\n  // スクロール位置を保存する\n  // アニメーション中の場合は、アニメーション終了時のスクロール位置が保存される\n  const [scrollLeft, setScrollLeft] = useDebounceAnimationState(0)\n  // アニメーション中かどうか\n  const animation = useRef(false)\n  // スクロール可能な領域を保存する\n  const [maxScrollLeft, setMaxScrollLeft] = useState(0)\n  // 左右のボタンの表示状態を保存する\n  const [leftShow, setLeftShow] = useState(false)\n  const [rightShow, setRightShow] = useState(false)\n\n  // const [props, set, stop] = useSpring(() => ({\n  //   scroll: 0\n  // }))\n  const [styles, set] = useSpring(() => ({ scroll: 0 }))\n\n  const ref = useRef<HTMLDivElement>(null)\n  const visibleAreaRef = useRef<HTMLDivElement>(null)\n  const innerRef = useRef<HTMLUListElement>(null)\n\n  const handleRight = useCallback(() => {\n    if (visibleAreaRef.current === null) {\n      return\n    }\n    const { clientWidth } = visibleAreaRef.current\n    // スクロール領域を超えないように、アニメーションを開始\n    // アニメーション中にアニメーションが開始されたときに、アニメーション終了予定の位置から再度計算するようにする\n    const scroll = Math.min(\n      scrollLeft + clientWidth * scrollAmountCoef,\n      maxScrollLeft\n    )\n    setScrollLeft(scroll, true)\n    set({ scroll, from: { scroll: scrollLeft }, reset: !animation.current })\n    animation.current = true\n  }, [\n    animation,\n    maxScrollLeft,\n    scrollLeft,\n    set,\n    scrollAmountCoef,\n    setScrollLeft,\n  ])\n\n  const handleLeft = useCallback(() => {\n    if (visibleAreaRef.current === null) {\n      return\n    }\n    const { clientWidth } = visibleAreaRef.current\n    const scroll = Math.max(scrollLeft - clientWidth * scrollAmountCoef, 0)\n    setScrollLeft(scroll, true)\n    set({ scroll, from: { scroll: scrollLeft }, reset: !animation.current })\n    animation.current = true\n  }, [animation, scrollLeft, set, scrollAmountCoef, setScrollLeft])\n\n  // スクロール可能な場合にボタンを表示する\n  // scrollLeftが変化したときに処理する (アニメーション開始時 & 手動スクロール時)\n  useEffect(() => {\n    const newLeftShow = scrollLeft > 0\n    const newRightShow = scrollLeft < maxScrollLeft && maxScrollLeft > 0\n    if (newLeftShow !== leftShow || newRightShow !== rightShow) {\n      setLeftShow(newLeftShow)\n      setRightShow(newRightShow)\n      onScrollStateChange?.(newLeftShow || newRightShow)\n    }\n  }, [leftShow, maxScrollLeft, onScrollStateChange, rightShow, scrollLeft])\n\n  const handleScroll = useCallback(() => {\n    if (ref.current === null) {\n      return\n    }\n    // 手動でスクロールが開始されたときにアニメーションを中断\n    if (animation.current) {\n      styles.scroll.stop()\n      animation.current = false\n    }\n    // スクロール位置を保存 (アニメーションの基準になる)\n    const manualScrollLeft = ref.current.scrollLeft\n    // 過剰にsetStateが走らないようにdebounceする\n    setScrollLeft(manualScrollLeft)\n  }, [animation, setScrollLeft, styles])\n\n  // リサイズが起きたときに、アニメーション用のスクロール領域 & ボタンの表示状態 を再計算する\n  const handleResize = useCallback(() => {\n    if (ref.current === null) {\n      return\n    }\n    const { clientWidth, scrollWidth } = ref.current\n    const newMaxScrollLeft = scrollWidth - clientWidth\n    setMaxScrollLeft(newMaxScrollLeft)\n    if (onResize) {\n      onResize(clientWidth)\n    }\n  }, [onResize])\n\n  useIsomorphicLayoutEffect(() => {\n    const elm = ref.current\n    const innerElm = innerRef.current\n    if (elm === null || innerElm === null) {\n      return\n    }\n\n    elm.addEventListener(\n      'wheel',\n      handleScroll,\n      passiveEvents() && { passive: true }\n    )\n\n    const resizeObserver = new ResizeObserver(handleResize)\n    resizeObserver.observe(elm)\n\n    const resizeObserverInner = new ResizeObserver(handleResize)\n    resizeObserverInner.observe(innerElm)\n\n    return () => {\n      elm.removeEventListener('wheel', handleScroll)\n      resizeObserver.disconnect()\n      resizeObserverInner.disconnect()\n    }\n  }, [handleResize, handleScroll])\n\n  // 初期スクロールを行う\n  useIsomorphicLayoutEffect(() => {\n    if (align !== 'left' || scrollOffset !== 0) {\n      const scroll = ref.current\n      if (scroll !== null) {\n        const scrollLength = Math.max(\n          0,\n          Math.min(\n            align === 'left' && scrollOffset > 0\n              ? scrollOffset\n              : align === 'center'\n              ? maxScrollLeft / 2 + scrollOffset\n              : align === 'right' && scrollOffset <= maxScrollLeft\n              ? maxScrollLeft - scrollOffset / 2\n              : 0,\n            maxScrollLeft\n          )\n        )\n        scroll.scrollLeft = scrollLength\n        setScrollLeft(scrollLength, true)\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ref.current])\n\n  const handleScrollMove = useCallback(() => {\n    if (ref.current === null) {\n      return\n    }\n    if (onScroll) {\n      onScroll(ref.current.scrollLeft)\n    }\n  }, [onScroll])\n\n  const [disableGradient, setDisableGradient] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    if (isEdge()) {\n      setDisableGradient(true)\n    }\n  }, [])\n\n  // NOTE: Edgeではmaskを使うと要素のレンダリングがバグる（場合によっては画像が表示されない）のでグラデーションを無効にする\n  if (!disableGradient && options.hasGradient === true) {\n    const fadeInGradient = options.fadeInGradient ?? false\n    const overflowGradient = !fadeInGradient\n    return (\n      <Container ref={visibleAreaRef}>\n        <GradientContainer fadeInGradient={fadeInGradient}>\n          <RightGradient>\n            <LeftGradient show={overflowGradient || scrollLeft > 0}>\n              <ScrollArea\n                ref={ref}\n                scrollLeft={styles.scroll}\n                onScroll={handleScrollMove}\n              >\n                <CarouselContainer ref={innerRef} centerItems={centerItems}>\n                  {children}\n                </CarouselContainer>\n              </ScrollArea>\n            </LeftGradient>\n          </RightGradient>\n        </GradientContainer>\n        <ButtonsContainer>\n          <CarouselButton\n            direction={Direction.Left}\n            show={leftShow}\n            offset={buttonOffset}\n            bottomOffset={bottomOffset}\n            padding={buttonPadding}\n            gradient={overflowGradient}\n            onClick={handleLeft}\n          />\n          <CarouselButton\n            direction={Direction.Right}\n            show={rightShow}\n            offset={buttonOffset}\n            bottomOffset={bottomOffset}\n            padding={buttonPadding}\n            gradient\n            onClick={handleRight}\n          />\n        </ButtonsContainer>\n      </Container>\n    )\n  }\n\n  return (\n    <Container ref={visibleAreaRef}>\n      <ScrollArea\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-expect-error\n        ref={ref}\n        scrollLeft={styles.scroll}\n        onScroll={handleScrollMove}\n      >\n        <CarouselContainer ref={innerRef} centerItems={centerItems}>\n          {children}\n        </CarouselContainer>\n      </ScrollArea>\n      <ButtonsContainer>\n        <CarouselButton\n          direction={Direction.Left}\n          show={leftShow}\n          offset={buttonOffset}\n          bottomOffset={bottomOffset}\n          padding={buttonPadding}\n          onClick={handleLeft}\n        />\n        <CarouselButton\n          direction={Direction.Right}\n          show={rightShow}\n          offset={buttonOffset}\n          bottomOffset={bottomOffset}\n          padding={buttonPadding}\n          onClick={handleRight}\n        />\n      </ButtonsContainer>\n    </Container>\n  )\n}\n\nconst CarouselContainer = styled.ul<{ centerItems?: boolean }>`\n  vertical-align: top;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n\n  /* 最小幅を100%にして親要素にぴったりくっつけることで子要素で要素を均等に割り付けるなどを出来るようにしてある */\n  min-width: 100%;\n  box-sizing: border-box;\n\n  ${({ centerItems = false }) =>\n    centerItems\n      ? css`\n          display: flex;\n          width: max-content;\n          margin: 0 auto;\n        `\n      : css`\n          display: inline-flex;\n          margin: 0;\n        `}\n`\n\nconst ButtonsContainer = styled.div`\n  opacity: 0;\n  transition: 0.4s opacity;\n`\nconst Container = styled.div`\n  &:hover ${ButtonsContainer} {\n    opacity: 1;\n  }\n\n  /* CarouselButtonの中にz-index:1があるのでここでコンテキストを切る */\n  position: relative;\n  z-index: 0;\n`\n\nconst ScrollArea = styled(animated.div)`\n  overflow-x: auto;\n  padding: 0;\n  margin: 0;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  scrollbar-width: none;\n`\n\nconst GradientContainer = styled.div<{ fadeInGradient: boolean }>`\n  /* NOTE: LeftGradientがはみ出るためhidden */\n  overflow: hidden;\n  ${(p) =>\n    !p.fadeInGradient &&\n    css`\n      margin-left: ${-GRADIENT_WIDTH}px;\n      ${CarouselContainer} {\n        padding-left: ${GRADIENT_WIDTH}px;\n      }\n    `}\n\n  margin-right: ${-GRADIENT_WIDTH}px;\n  /* stylelint-disable-next-line no-duplicate-selectors */\n  ${CarouselContainer} {\n    padding-right: ${GRADIENT_WIDTH}px;\n  }\n`\n\nconst RightGradient = styled.div`\n  mask-image: linear-gradient(\n    to right,\n    #000 calc(100% - ${GRADIENT_WIDTH}px),\n    transparent\n  );\n`\n\nconst LeftGradient = styled.div<{ show: boolean }>`\n  /* NOTE: mask-position が left → negative px の時、right → abs(negative px) の位置に表示されるため */\n  margin-right: ${-GRADIENT_WIDTH}px;\n  padding-right: ${GRADIENT_WIDTH}px;\n  /* NOTE: mask-position に transition をつけたいが vender prefixes 対策で all につける */\n  transition: 0.2s all ease-in;\n  mask: linear-gradient(to right, transparent, #000 ${GRADIENT_WIDTH}px)\n    ${(p) => (p.show ? 0 : -GRADIENT_WIDTH)}px 0;\n`\n","import styled, { css } from 'styled-components'\nimport { unreachable } from '../../foundation/utils'\nimport NextIcon, { WedgeDirection } from '../icons/NextIcon'\nimport { applyEffect } from '@charcoal-ui/utils'\n\nexport enum Direction {\n  Right = 'right',\n  Left = 'left',\n}\n\ninterface Props {\n  direction: Direction\n  show: boolean\n  offset?: number\n  padding?: number\n  bottomOffset?: number\n  gradient?: boolean\n  onClick(): void\n}\n\nexport default function CarouselButton({\n  direction,\n  show,\n  offset = 0,\n  padding = 0,\n  bottomOffset: bottom = 0,\n  gradient = false,\n  onClick,\n}: Props) {\n  const offsetStyle =\n    direction === Direction.Left\n      ? {\n          left: gradient ? offset - 72 : offset,\n          paddingLeft: Math.max(padding, 0),\n          paddingBottom: bottom,\n        }\n      : {\n          right: gradient ? offset - 72 : offset,\n          paddingRight: Math.max(padding, 0),\n          paddingBottom: bottom,\n        }\n  return (\n    <Button\n      type=\"button\"\n      onClick={onClick}\n      hide={!show}\n      style={offsetStyle}\n      css={onlyNonTouchDevice}\n    >\n      <CarouselButtonIcon>\n        <NextIcon\n          direction={\n            direction === Direction.Right\n              ? WedgeDirection.Right\n              : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n              direction === Direction.Left\n              ? WedgeDirection.Left\n              : unreachable()\n          }\n        />\n      </CarouselButtonIcon>\n    </Button>\n  )\n}\n\nexport const CAROUSEL_BUTTON_SIZE = 40\n\nconst CarouselButtonIcon = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${CAROUSEL_BUTTON_SIZE}px;\n  height: ${CAROUSEL_BUTTON_SIZE}px;\n  border-radius: 50%;\n  background-color: ${({ theme }) => theme.color.surface4};\n  transition: 0.4s visibility, 0.4s opacity, 0.2s background-color, 0.2s color;\n  color: ${({ theme }) => theme.color.text5};\n`\n\nconst Button = styled.button<{ hide: boolean }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  padding: 0;\n  min-width: 40px;\n  border: none;\n  outline: 0;\n  background: transparent;\n  cursor: pointer;\n  transition: 0.4s visibility, 0.4s opacity;\n  /* つらい */\n  /* このコンポーネントはCarouselでしか使われてないのでそっちでコンテキストで切る */\n  z-index: 1;\n\n  &:hover ${CarouselButtonIcon} {\n    background-color: ${({ theme }) =>\n      applyEffect(theme.color.surface4, theme.effect.hover)};\n    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.hover)};\n  }\n\n  &:active ${CarouselButtonIcon} {\n    background-color: ${({ theme }) =>\n      applyEffect(theme.color.surface4, theme.effect.press)};\n    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.press)};\n  }\n\n  ${(p) =>\n    p.hide &&\n    css`\n      visibility: hidden;\n      opacity: 0;\n      pointer-events: none;\n    `}\n`\n\nexport function ScrollHintButton({\n  direction,\n  onClick,\n}: {\n  direction: Direction\n  onClick(): void\n}) {\n  return (\n    <ScrollHintIcon onClick={onClick}>\n      <NextIcon\n        direction={\n          direction === Direction.Right\n            ? WedgeDirection.Right\n            : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n            direction === Direction.Left\n            ? WedgeDirection.Left\n            : unreachable()\n        }\n      />\n    </ScrollHintIcon>\n  )\n}\n\nconst ScrollHintIcon = styled(CarouselButtonIcon)`\n  cursor: pointer;\n\n  &:hover {\n    background-color: ${({ theme }) =>\n      applyEffect(theme.color.surface4, theme.effect.hover)};\n    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.hover)};\n  }\n\n  &:active {\n    background-color: ${({ theme }) =>\n      applyEffect(theme.color.surface4, theme.effect.press)};\n    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.press)};\n  }\n`\n\nconst onlyNonTouchDevice = css`\n  @media (hover: none) and (pointer: coarse) {\n    display: none;\n  }\n`\n","import * as React from 'react'\nimport styled from 'styled-components'\n\nexport type IconSizes = 16 | 24 | 32\n\ninterface Props {\n  path: string | React.ReactNode\n  viewBoxSize: number\n  size?: IconSizes | 40 | 48 | 64 | 72\n  transform?: string\n  currentColor?: boolean\n  fillRule?: 'nonzero' | 'evenodd'\n  clipRule?: 'nonzero' | 'evenodd' | 'inherit'\n}\n\nexport default function IconBase({\n  size = 24,\n  viewBoxSize,\n  currentColor,\n  path,\n  transform,\n  fillRule,\n  clipRule,\n}: Props) {\n  return (\n    <Icon\n      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n      size={size}\n      currentColor={currentColor}\n    >\n      <IconBasePath\n        path={path}\n        transform={transform}\n        fillRule={fillRule}\n        clipRule={clipRule}\n      />\n    </Icon>\n  )\n}\n\nconst Icon = styled.svg<{ size: number; currentColor?: boolean }>`\n  stroke: none;\n  fill: ${({ currentColor = false, theme }) =>\n    currentColor ? 'currentColor' : theme.color.text2};\n  width: ${(props) => props.size}px;\n  height: ${(props) => props.size}px;\n  line-height: 0;\n  font-size: 0;\n  vertical-align: middle;\n`\n\ntype IconBasePathProps = Pick<\n  Props,\n  'path' | 'transform' | 'fillRule' | 'clipRule'\n>\nexport const IconBasePath = ({\n  path,\n  transform,\n  fillRule,\n  clipRule,\n}: IconBasePathProps) => {\n  if (typeof path === 'string') {\n    return (\n      <path\n        d={path}\n        transform={transform}\n        fillRule={fillRule}\n        clipRule={clipRule}\n      />\n    )\n  } else {\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    return <>{path}</>\n  }\n}\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/react-sandbox-src-components-CarouselButton-index-story.bbecf139.iframe.bundle.js b/react-sandbox-src-components-CarouselButton-index-story.e2f2b3ba.iframe.bundle.js
similarity index 96%
rename from react-sandbox-src-components-CarouselButton-index-story.bbecf139.iframe.bundle.js
rename to react-sandbox-src-components-CarouselButton-index-story.e2f2b3ba.iframe.bundle.js
index 5d8ae2c83..c7a43c3c6 100644
--- a/react-sandbox-src-components-CarouselButton-index-story.bbecf139.iframe.bundle.js
+++ b/react-sandbox-src-components-CarouselButton-index-story.e2f2b3ba.iframe.bundle.js
@@ -64,5 +64,5 @@
   line-height: 0;
   font-size: 0;
   vertical-align: middle;
-`,IconBasePath=({path,transform,fillRule,clipRule})=>"string"==typeof path?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("path",{d:path,transform,fillRule,clipRule}):(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:path});try{Base.displayName="Base",Base.__docgenInfo={description:"",displayName:"Base",props:{path:{defaultValue:null,description:"",name:"path",required:!0,type:{name:"ReactNode"}},viewBoxSize:{defaultValue:null,description:"",name:"viewBoxSize",required:!0,type:{name:"number"}},size:{defaultValue:{value:"24"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:"32"},{value:"40"},{value:"48"},{value:"16"},{value:"24"},{value:"72"},{value:"64"}]}},transform:{defaultValue:null,description:"",name:"transform",required:!1,type:{name:"string"}},currentColor:{defaultValue:null,description:"",name:"currentColor",required:!1,type:{name:"boolean"}},fillRule:{defaultValue:null,description:"",name:"fillRule",required:!1,type:{name:"enum",value:[{value:'"evenodd"'},{value:'"nonzero"'}]}},clipRule:{defaultValue:null,description:"",name:"clipRule",required:!1,type:{name:"enum",value:[{value:'"inherit"'},{value:'"evenodd"'},{value:'"nonzero"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react-sandbox/src/components/icons/Base.tsx#Base"]={docgenInfo:Base.__docgenInfo,name:"Base",path:"packages/react-sandbox/src/components/icons/Base.tsx#Base"})}catch(__react_docgen_typescript_loader_error){}try{IconBasePath.displayName="IconBasePath",IconBasePath.__docgenInfo={description:"",displayName:"IconBasePath",props:{path:{defaultValue:null,description:"",name:"path",required:!0,type:{name:"ReactNode"}},clipRule:{defaultValue:null,description:"",name:"clipRule",required:!1,type:{name:"enum",value:[{value:'"inherit"'},{value:'"evenodd"'},{value:'"nonzero"'}]}},fillRule:{defaultValue:null,description:"",name:"fillRule",required:!1,type:{name:"enum",value:[{value:'"evenodd"'},{value:'"nonzero"'}]}},transform:{defaultValue:null,description:"",name:"transform",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react-sandbox/src/components/icons/Base.tsx#IconBasePath"]={docgenInfo:IconBasePath.__docgenInfo,name:"IconBasePath",path:"packages/react-sandbox/src/components/icons/Base.tsx#IconBasePath"})}catch(__react_docgen_typescript_loader_error){}},"./packages/react-sandbox/src/foundation/utils.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{function unreachable(value){throw new Error(0===arguments.length?"unreachable":`unreachable (${JSON.stringify(value)})`)}__webpack_require__.d(__webpack_exports__,{t:()=>unreachable})}}]);
-//# sourceMappingURL=react-sandbox-src-components-CarouselButton-index-story.bbecf139.iframe.bundle.js.map
\ No newline at end of file
+`,IconBasePath=({path,transform,fillRule,clipRule})=>"string"==typeof path?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("path",{d:path,transform,fillRule,clipRule}):(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:path});try{Base.displayName="Base",Base.__docgenInfo={description:"",displayName:"Base",props:{path:{defaultValue:null,description:"",name:"path",required:!0,type:{name:"ReactNode"}},viewBoxSize:{defaultValue:null,description:"",name:"viewBoxSize",required:!0,type:{name:"number"}},size:{defaultValue:{value:"24"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:"32"},{value:"40"},{value:"48"},{value:"16"},{value:"24"},{value:"72"},{value:"64"}]}},transform:{defaultValue:null,description:"",name:"transform",required:!1,type:{name:"string"}},currentColor:{defaultValue:null,description:"",name:"currentColor",required:!1,type:{name:"boolean"}},fillRule:{defaultValue:null,description:"",name:"fillRule",required:!1,type:{name:"enum",value:[{value:'"evenodd"'},{value:'"nonzero"'}]}},clipRule:{defaultValue:null,description:"",name:"clipRule",required:!1,type:{name:"enum",value:[{value:'"inherit"'},{value:'"evenodd"'},{value:'"nonzero"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react-sandbox/src/components/icons/Base.tsx#Base"]={docgenInfo:Base.__docgenInfo,name:"Base",path:"packages/react-sandbox/src/components/icons/Base.tsx#Base"})}catch(__react_docgen_typescript_loader_error){}try{IconBasePath.displayName="IconBasePath",IconBasePath.__docgenInfo={description:"",displayName:"IconBasePath",props:{path:{defaultValue:null,description:"",name:"path",required:!0,type:{name:"ReactNode"}},transform:{defaultValue:null,description:"",name:"transform",required:!1,type:{name:"string"}},clipRule:{defaultValue:null,description:"",name:"clipRule",required:!1,type:{name:"enum",value:[{value:'"inherit"'},{value:'"evenodd"'},{value:'"nonzero"'}]}},fillRule:{defaultValue:null,description:"",name:"fillRule",required:!1,type:{name:"enum",value:[{value:'"evenodd"'},{value:'"nonzero"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react-sandbox/src/components/icons/Base.tsx#IconBasePath"]={docgenInfo:IconBasePath.__docgenInfo,name:"IconBasePath",path:"packages/react-sandbox/src/components/icons/Base.tsx#IconBasePath"})}catch(__react_docgen_typescript_loader_error){}},"./packages/react-sandbox/src/foundation/utils.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{function unreachable(value){throw new Error(0===arguments.length?"unreachable":`unreachable (${JSON.stringify(value)})`)}__webpack_require__.d(__webpack_exports__,{t:()=>unreachable})}}]);
+//# sourceMappingURL=react-sandbox-src-components-CarouselButton-index-story.e2f2b3ba.iframe.bundle.js.map
\ No newline at end of file
diff --git a/react-sandbox-src-components-CarouselButton-index-story.bbecf139.iframe.bundle.js.map b/react-sandbox-src-components-CarouselButton-index-story.e2f2b3ba.iframe.bundle.js.map
similarity index 98%
rename from react-sandbox-src-components-CarouselButton-index-story.bbecf139.iframe.bundle.js.map
rename to react-sandbox-src-components-CarouselButton-index-story.e2f2b3ba.iframe.bundle.js.map
index f0240c4d4..309976754 100644
--- a/react-sandbox-src-components-CarouselButton-index-story.bbecf139.iframe.bundle.js.map
+++ b/react-sandbox-src-components-CarouselButton-index-story.e2f2b3ba.iframe.bundle.js.map
@@ -1 +1 @@
-{"version":3,"file":"react-sandbox-src-components-CarouselButton-index-story.bbecf139.iframe.bundle.js","mappings":";;;;AAiEA;AAAA;;AASA;;AAEA;AAGA;;;;;;;;;;;;;;;;;AAiBA;AACA;AAEA;;;AAGA;AACA;AAEA;;;AAGA;;;;;AASA;;;;AA2BA;AAEA;;;;AAIA;AAEA;;AAIA;;;;;;AClHA;AAEA;AACA;;;;AAUA","sources":["webpack://charcoal-ui/./packages/react-sandbox/src/components/CarouselButton/index.tsx","webpack://charcoal-ui/./packages/react-sandbox/src/components/icons/Base.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { unreachable } from '../../foundation/utils'\nimport NextIcon, { WedgeDirection } from '../icons/NextIcon'\nimport { applyEffect } from '@charcoal-ui/utils'\n\nexport enum Direction {\n  Right = 'right',\n  Left = 'left',\n}\n\ninterface Props {\n  direction: Direction\n  show: boolean\n  offset?: number\n  padding?: number\n  bottomOffset?: number\n  gradient?: boolean\n  onClick(): void\n}\n\nexport default function CarouselButton({\n  direction,\n  show,\n  offset = 0,\n  padding = 0,\n  bottomOffset: bottom = 0,\n  gradient = false,\n  onClick,\n}: Props) {\n  const offsetStyle =\n    direction === Direction.Left\n      ? {\n          left: gradient ? offset - 72 : offset,\n          paddingLeft: Math.max(padding, 0),\n          paddingBottom: bottom,\n        }\n      : {\n          right: gradient ? offset - 72 : offset,\n          paddingRight: Math.max(padding, 0),\n          paddingBottom: bottom,\n        }\n  return (\n    <Button\n      type=\"button\"\n      onClick={onClick}\n      hide={!show}\n      style={offsetStyle}\n      css={onlyNonTouchDevice}\n    >\n      <CarouselButtonIcon>\n        <NextIcon\n          direction={\n            direction === Direction.Right\n              ? WedgeDirection.Right\n              : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n              direction === Direction.Left\n              ? WedgeDirection.Left\n              : unreachable()\n          }\n        />\n      </CarouselButtonIcon>\n    </Button>\n  )\n}\n\nexport const CAROUSEL_BUTTON_SIZE = 40\n\nconst CarouselButtonIcon = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${CAROUSEL_BUTTON_SIZE}px;\n  height: ${CAROUSEL_BUTTON_SIZE}px;\n  border-radius: 50%;\n  background-color: ${({ theme }) => theme.color.surface4};\n  transition: 0.4s visibility, 0.4s opacity, 0.2s background-color, 0.2s color;\n  color: ${({ theme }) => theme.color.text5};\n`\n\nconst Button = styled.button<{ hide: boolean }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  padding: 0;\n  min-width: 40px;\n  border: none;\n  outline: 0;\n  background: transparent;\n  cursor: pointer;\n  transition: 0.4s visibility, 0.4s opacity;\n  /* つらい */\n  /* このコンポーネントはCarouselでしか使われてないのでそっちでコンテキストで切る */\n  z-index: 1;\n\n  &:hover ${CarouselButtonIcon} {\n    background-color: ${({ theme }) =>\n      applyEffect(theme.color.surface4, theme.effect.hover)};\n    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.hover)};\n  }\n\n  &:active ${CarouselButtonIcon} {\n    background-color: ${({ theme }) =>\n      applyEffect(theme.color.surface4, theme.effect.press)};\n    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.press)};\n  }\n\n  ${(p) =>\n    p.hide &&\n    css`\n      visibility: hidden;\n      opacity: 0;\n      pointer-events: none;\n    `}\n`\n\nexport function ScrollHintButton({\n  direction,\n  onClick,\n}: {\n  direction: Direction\n  onClick(): void\n}) {\n  return (\n    <ScrollHintIcon onClick={onClick}>\n      <NextIcon\n        direction={\n          direction === Direction.Right\n            ? WedgeDirection.Right\n            : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n            direction === Direction.Left\n            ? WedgeDirection.Left\n            : unreachable()\n        }\n      />\n    </ScrollHintIcon>\n  )\n}\n\nconst ScrollHintIcon = styled(CarouselButtonIcon)`\n  cursor: pointer;\n\n  &:hover {\n    background-color: ${({ theme }) =>\n      applyEffect(theme.color.surface4, theme.effect.hover)};\n    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.hover)};\n  }\n\n  &:active {\n    background-color: ${({ theme }) =>\n      applyEffect(theme.color.surface4, theme.effect.press)};\n    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.press)};\n  }\n`\n\nconst onlyNonTouchDevice = css`\n  @media (hover: none) and (pointer: coarse) {\n    display: none;\n  }\n`\n","import * as React from 'react'\nimport styled from 'styled-components'\n\nexport type IconSizes = 16 | 24 | 32\n\ninterface Props {\n  path: string | React.ReactNode\n  viewBoxSize: number\n  size?: IconSizes | 40 | 48 | 64 | 72\n  transform?: string\n  currentColor?: boolean\n  fillRule?: 'nonzero' | 'evenodd'\n  clipRule?: 'nonzero' | 'evenodd' | 'inherit'\n}\n\nexport default function IconBase({\n  size = 24,\n  viewBoxSize,\n  currentColor,\n  path,\n  transform,\n  fillRule,\n  clipRule,\n}: Props) {\n  return (\n    <Icon\n      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n      size={size}\n      currentColor={currentColor}\n    >\n      <IconBasePath\n        path={path}\n        transform={transform}\n        fillRule={fillRule}\n        clipRule={clipRule}\n      />\n    </Icon>\n  )\n}\n\nconst Icon = styled.svg<{ size: number; currentColor?: boolean }>`\n  stroke: none;\n  fill: ${({ currentColor = false, theme }) =>\n    currentColor ? 'currentColor' : theme.color.text2};\n  width: ${(props) => props.size}px;\n  height: ${(props) => props.size}px;\n  line-height: 0;\n  font-size: 0;\n  vertical-align: middle;\n`\n\ntype IconBasePathProps = Pick<\n  Props,\n  'path' | 'transform' | 'fillRule' | 'clipRule'\n>\nexport const IconBasePath = ({\n  path,\n  transform,\n  fillRule,\n  clipRule,\n}: IconBasePathProps) => {\n  if (typeof path === 'string') {\n    return (\n      <path\n        d={path}\n        transform={transform}\n        fillRule={fillRule}\n        clipRule={clipRule}\n      />\n    )\n  } else {\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    return <>{path}</>\n  }\n}\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"react-sandbox-src-components-CarouselButton-index-story.e2f2b3ba.iframe.bundle.js","mappings":";;;;AAiEA;AAAA;;AASA;;AAEA;AAGA;;;;;;;;;;;;;;;;;AAiBA;AACA;AAEA;;;AAGA;AACA;AAEA;;;AAGA;;;;;AASA;;;;AA2BA;AAEA;;;;AAIA;AAEA;;AAIA;;;;;;AClHA;AAEA;AACA;;;;AAUA","sources":["webpack://charcoal-ui/./packages/react-sandbox/src/components/CarouselButton/index.tsx","webpack://charcoal-ui/./packages/react-sandbox/src/components/icons/Base.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { unreachable } from '../../foundation/utils'\nimport NextIcon, { WedgeDirection } from '../icons/NextIcon'\nimport { applyEffect } from '@charcoal-ui/utils'\n\nexport enum Direction {\n  Right = 'right',\n  Left = 'left',\n}\n\ninterface Props {\n  direction: Direction\n  show: boolean\n  offset?: number\n  padding?: number\n  bottomOffset?: number\n  gradient?: boolean\n  onClick(): void\n}\n\nexport default function CarouselButton({\n  direction,\n  show,\n  offset = 0,\n  padding = 0,\n  bottomOffset: bottom = 0,\n  gradient = false,\n  onClick,\n}: Props) {\n  const offsetStyle =\n    direction === Direction.Left\n      ? {\n          left: gradient ? offset - 72 : offset,\n          paddingLeft: Math.max(padding, 0),\n          paddingBottom: bottom,\n        }\n      : {\n          right: gradient ? offset - 72 : offset,\n          paddingRight: Math.max(padding, 0),\n          paddingBottom: bottom,\n        }\n  return (\n    <Button\n      type=\"button\"\n      onClick={onClick}\n      hide={!show}\n      style={offsetStyle}\n      css={onlyNonTouchDevice}\n    >\n      <CarouselButtonIcon>\n        <NextIcon\n          direction={\n            direction === Direction.Right\n              ? WedgeDirection.Right\n              : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n              direction === Direction.Left\n              ? WedgeDirection.Left\n              : unreachable()\n          }\n        />\n      </CarouselButtonIcon>\n    </Button>\n  )\n}\n\nexport const CAROUSEL_BUTTON_SIZE = 40\n\nconst CarouselButtonIcon = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${CAROUSEL_BUTTON_SIZE}px;\n  height: ${CAROUSEL_BUTTON_SIZE}px;\n  border-radius: 50%;\n  background-color: ${({ theme }) => theme.color.surface4};\n  transition: 0.4s visibility, 0.4s opacity, 0.2s background-color, 0.2s color;\n  color: ${({ theme }) => theme.color.text5};\n`\n\nconst Button = styled.button<{ hide: boolean }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  padding: 0;\n  min-width: 40px;\n  border: none;\n  outline: 0;\n  background: transparent;\n  cursor: pointer;\n  transition: 0.4s visibility, 0.4s opacity;\n  /* つらい */\n  /* このコンポーネントはCarouselでしか使われてないのでそっちでコンテキストで切る */\n  z-index: 1;\n\n  &:hover ${CarouselButtonIcon} {\n    background-color: ${({ theme }) =>\n      applyEffect(theme.color.surface4, theme.effect.hover)};\n    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.hover)};\n  }\n\n  &:active ${CarouselButtonIcon} {\n    background-color: ${({ theme }) =>\n      applyEffect(theme.color.surface4, theme.effect.press)};\n    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.press)};\n  }\n\n  ${(p) =>\n    p.hide &&\n    css`\n      visibility: hidden;\n      opacity: 0;\n      pointer-events: none;\n    `}\n`\n\nexport function ScrollHintButton({\n  direction,\n  onClick,\n}: {\n  direction: Direction\n  onClick(): void\n}) {\n  return (\n    <ScrollHintIcon onClick={onClick}>\n      <NextIcon\n        direction={\n          direction === Direction.Right\n            ? WedgeDirection.Right\n            : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n            direction === Direction.Left\n            ? WedgeDirection.Left\n            : unreachable()\n        }\n      />\n    </ScrollHintIcon>\n  )\n}\n\nconst ScrollHintIcon = styled(CarouselButtonIcon)`\n  cursor: pointer;\n\n  &:hover {\n    background-color: ${({ theme }) =>\n      applyEffect(theme.color.surface4, theme.effect.hover)};\n    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.hover)};\n  }\n\n  &:active {\n    background-color: ${({ theme }) =>\n      applyEffect(theme.color.surface4, theme.effect.press)};\n    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.press)};\n  }\n`\n\nconst onlyNonTouchDevice = css`\n  @media (hover: none) and (pointer: coarse) {\n    display: none;\n  }\n`\n","import * as React from 'react'\nimport styled from 'styled-components'\n\nexport type IconSizes = 16 | 24 | 32\n\ninterface Props {\n  path: string | React.ReactNode\n  viewBoxSize: number\n  size?: IconSizes | 40 | 48 | 64 | 72\n  transform?: string\n  currentColor?: boolean\n  fillRule?: 'nonzero' | 'evenodd'\n  clipRule?: 'nonzero' | 'evenodd' | 'inherit'\n}\n\nexport default function IconBase({\n  size = 24,\n  viewBoxSize,\n  currentColor,\n  path,\n  transform,\n  fillRule,\n  clipRule,\n}: Props) {\n  return (\n    <Icon\n      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n      size={size}\n      currentColor={currentColor}\n    >\n      <IconBasePath\n        path={path}\n        transform={transform}\n        fillRule={fillRule}\n        clipRule={clipRule}\n      />\n    </Icon>\n  )\n}\n\nconst Icon = styled.svg<{ size: number; currentColor?: boolean }>`\n  stroke: none;\n  fill: ${({ currentColor = false, theme }) =>\n    currentColor ? 'currentColor' : theme.color.text2};\n  width: ${(props) => props.size}px;\n  height: ${(props) => props.size}px;\n  line-height: 0;\n  font-size: 0;\n  vertical-align: middle;\n`\n\ntype IconBasePathProps = Pick<\n  Props,\n  'path' | 'transform' | 'fillRule' | 'clipRule'\n>\nexport const IconBasePath = ({\n  path,\n  transform,\n  fillRule,\n  clipRule,\n}: IconBasePathProps) => {\n  if (typeof path === 'string') {\n    return (\n      <path\n        d={path}\n        transform={transform}\n        fillRule={fillRule}\n        clipRule={clipRule}\n      />\n    )\n  } else {\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    return <>{path}</>\n  }\n}\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/react-sandbox-src-components-HintText-index-story.d7cde30e.iframe.bundle.js b/react-sandbox-src-components-HintText-index-story.cae06401.iframe.bundle.js
similarity index 94%
rename from react-sandbox-src-components-HintText-index-story.d7cde30e.iframe.bundle.js
rename to react-sandbox-src-components-HintText-index-story.cae06401.iframe.bundle.js
index 4c6845269..5f1b4f89d 100644
--- a/react-sandbox-src-components-HintText-index-story.d7cde30e.iframe.bundle.js
+++ b/react-sandbox-src-components-HintText-index-story.cae06401.iframe.bundle.js
@@ -30,5 +30,5 @@
   line-height: 0;
   font-size: 0;
   vertical-align: middle;
-`,IconBasePath=({path,transform,fillRule,clipRule})=>"string"==typeof path?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("path",{d:path,transform,fillRule,clipRule}):(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:path});try{Base.displayName="Base",Base.__docgenInfo={description:"",displayName:"Base",props:{path:{defaultValue:null,description:"",name:"path",required:!0,type:{name:"ReactNode"}},viewBoxSize:{defaultValue:null,description:"",name:"viewBoxSize",required:!0,type:{name:"number"}},size:{defaultValue:{value:"24"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:"32"},{value:"40"},{value:"48"},{value:"16"},{value:"24"},{value:"72"},{value:"64"}]}},transform:{defaultValue:null,description:"",name:"transform",required:!1,type:{name:"string"}},currentColor:{defaultValue:null,description:"",name:"currentColor",required:!1,type:{name:"boolean"}},fillRule:{defaultValue:null,description:"",name:"fillRule",required:!1,type:{name:"enum",value:[{value:'"evenodd"'},{value:'"nonzero"'}]}},clipRule:{defaultValue:null,description:"",name:"clipRule",required:!1,type:{name:"enum",value:[{value:'"inherit"'},{value:'"evenodd"'},{value:'"nonzero"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react-sandbox/src/components/icons/Base.tsx#Base"]={docgenInfo:Base.__docgenInfo,name:"Base",path:"packages/react-sandbox/src/components/icons/Base.tsx#Base"})}catch(__react_docgen_typescript_loader_error){}try{IconBasePath.displayName="IconBasePath",IconBasePath.__docgenInfo={description:"",displayName:"IconBasePath",props:{path:{defaultValue:null,description:"",name:"path",required:!0,type:{name:"ReactNode"}},clipRule:{defaultValue:null,description:"",name:"clipRule",required:!1,type:{name:"enum",value:[{value:'"inherit"'},{value:'"evenodd"'},{value:'"nonzero"'}]}},fillRule:{defaultValue:null,description:"",name:"fillRule",required:!1,type:{name:"enum",value:[{value:'"evenodd"'},{value:'"nonzero"'}]}},transform:{defaultValue:null,description:"",name:"transform",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react-sandbox/src/components/icons/Base.tsx#IconBasePath"]={docgenInfo:IconBasePath.__docgenInfo,name:"IconBasePath",path:"packages/react-sandbox/src/components/icons/Base.tsx#IconBasePath"})}catch(__react_docgen_typescript_loader_error){}},"./packages/react-sandbox/src/styled.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{r:()=>theme});var styled_components__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const theme=(0,__webpack_require__("./packages/styled/dist/index.esm.js").jG)(styled_components__WEBPACK_IMPORTED_MODULE_1__.ZP)}}]);
-//# sourceMappingURL=react-sandbox-src-components-HintText-index-story.d7cde30e.iframe.bundle.js.map
\ No newline at end of file
+`,IconBasePath=({path,transform,fillRule,clipRule})=>"string"==typeof path?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("path",{d:path,transform,fillRule,clipRule}):(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:path});try{Base.displayName="Base",Base.__docgenInfo={description:"",displayName:"Base",props:{path:{defaultValue:null,description:"",name:"path",required:!0,type:{name:"ReactNode"}},viewBoxSize:{defaultValue:null,description:"",name:"viewBoxSize",required:!0,type:{name:"number"}},size:{defaultValue:{value:"24"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:"32"},{value:"40"},{value:"48"},{value:"16"},{value:"24"},{value:"72"},{value:"64"}]}},transform:{defaultValue:null,description:"",name:"transform",required:!1,type:{name:"string"}},currentColor:{defaultValue:null,description:"",name:"currentColor",required:!1,type:{name:"boolean"}},fillRule:{defaultValue:null,description:"",name:"fillRule",required:!1,type:{name:"enum",value:[{value:'"evenodd"'},{value:'"nonzero"'}]}},clipRule:{defaultValue:null,description:"",name:"clipRule",required:!1,type:{name:"enum",value:[{value:'"inherit"'},{value:'"evenodd"'},{value:'"nonzero"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react-sandbox/src/components/icons/Base.tsx#Base"]={docgenInfo:Base.__docgenInfo,name:"Base",path:"packages/react-sandbox/src/components/icons/Base.tsx#Base"})}catch(__react_docgen_typescript_loader_error){}try{IconBasePath.displayName="IconBasePath",IconBasePath.__docgenInfo={description:"",displayName:"IconBasePath",props:{path:{defaultValue:null,description:"",name:"path",required:!0,type:{name:"ReactNode"}},transform:{defaultValue:null,description:"",name:"transform",required:!1,type:{name:"string"}},clipRule:{defaultValue:null,description:"",name:"clipRule",required:!1,type:{name:"enum",value:[{value:'"inherit"'},{value:'"evenodd"'},{value:'"nonzero"'}]}},fillRule:{defaultValue:null,description:"",name:"fillRule",required:!1,type:{name:"enum",value:[{value:'"evenodd"'},{value:'"nonzero"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react-sandbox/src/components/icons/Base.tsx#IconBasePath"]={docgenInfo:IconBasePath.__docgenInfo,name:"IconBasePath",path:"packages/react-sandbox/src/components/icons/Base.tsx#IconBasePath"})}catch(__react_docgen_typescript_loader_error){}},"./packages/react-sandbox/src/styled.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{r:()=>theme});var styled_components__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const theme=(0,__webpack_require__("./packages/styled/dist/index.esm.js").jG)(styled_components__WEBPACK_IMPORTED_MODULE_1__.ZP)}}]);
+//# sourceMappingURL=react-sandbox-src-components-HintText-index-story.cae06401.iframe.bundle.js.map
\ No newline at end of file
diff --git a/react-sandbox-src-components-HintText-index-story.d7cde30e.iframe.bundle.js.map b/react-sandbox-src-components-HintText-index-story.cae06401.iframe.bundle.js.map
similarity index 98%
rename from react-sandbox-src-components-HintText-index-story.d7cde30e.iframe.bundle.js.map
rename to react-sandbox-src-components-HintText-index-story.cae06401.iframe.bundle.js.map
index 16b2014bf..82094e43f 100644
--- a/react-sandbox-src-components-HintText-index-story.d7cde30e.iframe.bundle.js.map
+++ b/react-sandbox-src-components-HintText-index-story.cae06401.iframe.bundle.js.map
@@ -1 +1 @@
-{"version":3,"file":"react-sandbox-src-components-HintText-index-story.d7cde30e.iframe.bundle.js","mappings":";AA0BA;;;ACCA;;AAQA;AACA;;;;;AASA;;;AAOA;;;AAGA;;;AAKA;AACA;;AAQA;;AC3BA;AAEA;AACA;;;;AAUA","sources":["webpack://charcoal-ui/./packages/react-sandbox/src/components/icons/InfoIcon.tsx","webpack://charcoal-ui/./packages/react-sandbox/src/components/HintText/index.tsx","webpack://charcoal-ui/./packages/react-sandbox/src/components/icons/Base.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport IconBase from './Base'\n\nconst size = 16\n\nexport default function InfoIcon() {\n  const path = (\n    <>\n      <path\n        d=\"M8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183\n           0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z\"\n      />\n      <Path\n        d=\"M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629\n           4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8 6.25C8.69036 6.25 9.25 5.69036\n           9.25 5C9.25 4.30964 8.69036 3.75 8 3.75C7.30964 3.75 6.75 4.30964 6.75\n           5C6.75 5.69036 7.30964 6.25 8 6.25ZM7 7.75V11.25C7 11.8023 7.44772 12.25\n           8 12.25C8.55228 12.25 9 11.8023 9 11.25V7.75C9 7.19772 8.55228 6.75 8\n           6.75C7.44772 6.75 7 7.19772 7 7.75Z\"\n      />\n    </>\n  )\n  return <IconBase viewBoxSize={size} size={size} currentColor path={path} />\n}\n\nconst Path = styled.path`\n  fill: ${({ theme }) => theme.color.surface1};\n  fill-rule: evenodd;\n`\n","import * as React from 'react'\nimport styled, { css } from 'styled-components'\nimport { theme } from '../../styled'\nimport InfoIcon from '../icons/InfoIcon'\nimport { maxWidth } from '@charcoal-ui/utils'\n\ntype Context = 'page' | 'section'\ninterface Props {\n  children: React.ReactNode\n  context: Context\n  className?: string\n}\n\nexport default function HintText({ children, context, className }: Props) {\n  return (\n    <Container className={className} context={context}>\n      <IconWrap>\n        <InfoIcon />\n      </IconWrap>\n      <Text>{children}</Text>\n    </Container>\n  )\n}\n\nconst Container = styled.div.attrs<Props, ReturnType<typeof styledProps>>(\n  styledProps\n)`\n  ${(p) =>\n    theme((o) => [\n      o.bg.surface3,\n      o.borderRadius(8),\n      o.padding.vertical(p.default.vertical),\n      o.padding.horizontal(p.default.horizontal),\n    ])}\n\n  @media ${({ theme: t }) => maxWidth(t.breakpoint.screen1)} {\n    ${(p) =>\n      theme((o) => [\n        o.padding.vertical(p.screen1.vertical),\n        o.padding.horizontal(p.screen1.horizontal),\n      ])}\n  }\n\n  display: flex;\n  align-items: flex-start;\n  ${(p) =>\n    p.context === 'page' &&\n    css`\n      justify-content: center;\n    `}\n`\n\nconst IconWrap = styled.div`\n  display: flex;\n  align-items: center;\n  color: ${(p) => p.theme.color.text4};\n  height: 22px;\n  margin: -4px 4px -4px 0;\n`\n\nconst Text = styled.p`\n  ${theme((o) => [o.font.text2, o.typography(14)])}\n  margin: 0;\n`\n\nfunction styledProps(props: Props) {\n  return { ...props, ...contextToProps(props.context) }\n}\n\nfunction contextToProps(context: Context) {\n  switch (context) {\n    case 'page':\n      return {\n        default: {\n          horizontal: 40,\n          vertical: 24,\n        },\n        screen1: {\n          horizontal: 16,\n          vertical: 16,\n        },\n      } as const\n    case 'section':\n      return {\n        default: {\n          horizontal: 16,\n          vertical: 16,\n        },\n        screen1: {\n          horizontal: 16,\n          vertical: 16,\n        },\n      } as const\n  }\n}\n","import * as React from 'react'\nimport styled from 'styled-components'\n\nexport type IconSizes = 16 | 24 | 32\n\ninterface Props {\n  path: string | React.ReactNode\n  viewBoxSize: number\n  size?: IconSizes | 40 | 48 | 64 | 72\n  transform?: string\n  currentColor?: boolean\n  fillRule?: 'nonzero' | 'evenodd'\n  clipRule?: 'nonzero' | 'evenodd' | 'inherit'\n}\n\nexport default function IconBase({\n  size = 24,\n  viewBoxSize,\n  currentColor,\n  path,\n  transform,\n  fillRule,\n  clipRule,\n}: Props) {\n  return (\n    <Icon\n      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n      size={size}\n      currentColor={currentColor}\n    >\n      <IconBasePath\n        path={path}\n        transform={transform}\n        fillRule={fillRule}\n        clipRule={clipRule}\n      />\n    </Icon>\n  )\n}\n\nconst Icon = styled.svg<{ size: number; currentColor?: boolean }>`\n  stroke: none;\n  fill: ${({ currentColor = false, theme }) =>\n    currentColor ? 'currentColor' : theme.color.text2};\n  width: ${(props) => props.size}px;\n  height: ${(props) => props.size}px;\n  line-height: 0;\n  font-size: 0;\n  vertical-align: middle;\n`\n\ntype IconBasePathProps = Pick<\n  Props,\n  'path' | 'transform' | 'fillRule' | 'clipRule'\n>\nexport const IconBasePath = ({\n  path,\n  transform,\n  fillRule,\n  clipRule,\n}: IconBasePathProps) => {\n  if (typeof path === 'string') {\n    return (\n      <path\n        d={path}\n        transform={transform}\n        fillRule={fillRule}\n        clipRule={clipRule}\n      />\n    )\n  } else {\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    return <>{path}</>\n  }\n}\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"react-sandbox-src-components-HintText-index-story.cae06401.iframe.bundle.js","mappings":";AA0BA;;;ACCA;;AAQA;AACA;;;;;AASA;;;AAOA;;;AAGA;;;AAKA;AACA;;AAQA;;AC3BA;AAEA;AACA;;;;AAUA","sources":["webpack://charcoal-ui/./packages/react-sandbox/src/components/icons/InfoIcon.tsx","webpack://charcoal-ui/./packages/react-sandbox/src/components/HintText/index.tsx","webpack://charcoal-ui/./packages/react-sandbox/src/components/icons/Base.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport IconBase from './Base'\n\nconst size = 16\n\nexport default function InfoIcon() {\n  const path = (\n    <>\n      <path\n        d=\"M8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183\n           0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z\"\n      />\n      <Path\n        d=\"M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629\n           4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8 6.25C8.69036 6.25 9.25 5.69036\n           9.25 5C9.25 4.30964 8.69036 3.75 8 3.75C7.30964 3.75 6.75 4.30964 6.75\n           5C6.75 5.69036 7.30964 6.25 8 6.25ZM7 7.75V11.25C7 11.8023 7.44772 12.25\n           8 12.25C8.55228 12.25 9 11.8023 9 11.25V7.75C9 7.19772 8.55228 6.75 8\n           6.75C7.44772 6.75 7 7.19772 7 7.75Z\"\n      />\n    </>\n  )\n  return <IconBase viewBoxSize={size} size={size} currentColor path={path} />\n}\n\nconst Path = styled.path`\n  fill: ${({ theme }) => theme.color.surface1};\n  fill-rule: evenodd;\n`\n","import * as React from 'react'\nimport styled, { css } from 'styled-components'\nimport { theme } from '../../styled'\nimport InfoIcon from '../icons/InfoIcon'\nimport { maxWidth } from '@charcoal-ui/utils'\n\ntype Context = 'page' | 'section'\ninterface Props {\n  children: React.ReactNode\n  context: Context\n  className?: string\n}\n\nexport default function HintText({ children, context, className }: Props) {\n  return (\n    <Container className={className} context={context}>\n      <IconWrap>\n        <InfoIcon />\n      </IconWrap>\n      <Text>{children}</Text>\n    </Container>\n  )\n}\n\nconst Container = styled.div.attrs<Props, ReturnType<typeof styledProps>>(\n  styledProps\n)`\n  ${(p) =>\n    theme((o) => [\n      o.bg.surface3,\n      o.borderRadius(8),\n      o.padding.vertical(p.default.vertical),\n      o.padding.horizontal(p.default.horizontal),\n    ])}\n\n  @media ${({ theme: t }) => maxWidth(t.breakpoint.screen1)} {\n    ${(p) =>\n      theme((o) => [\n        o.padding.vertical(p.screen1.vertical),\n        o.padding.horizontal(p.screen1.horizontal),\n      ])}\n  }\n\n  display: flex;\n  align-items: flex-start;\n  ${(p) =>\n    p.context === 'page' &&\n    css`\n      justify-content: center;\n    `}\n`\n\nconst IconWrap = styled.div`\n  display: flex;\n  align-items: center;\n  color: ${(p) => p.theme.color.text4};\n  height: 22px;\n  margin: -4px 4px -4px 0;\n`\n\nconst Text = styled.p`\n  ${theme((o) => [o.font.text2, o.typography(14)])}\n  margin: 0;\n`\n\nfunction styledProps(props: Props) {\n  return { ...props, ...contextToProps(props.context) }\n}\n\nfunction contextToProps(context: Context) {\n  switch (context) {\n    case 'page':\n      return {\n        default: {\n          horizontal: 40,\n          vertical: 24,\n        },\n        screen1: {\n          horizontal: 16,\n          vertical: 16,\n        },\n      } as const\n    case 'section':\n      return {\n        default: {\n          horizontal: 16,\n          vertical: 16,\n        },\n        screen1: {\n          horizontal: 16,\n          vertical: 16,\n        },\n      } as const\n  }\n}\n","import * as React from 'react'\nimport styled from 'styled-components'\n\nexport type IconSizes = 16 | 24 | 32\n\ninterface Props {\n  path: string | React.ReactNode\n  viewBoxSize: number\n  size?: IconSizes | 40 | 48 | 64 | 72\n  transform?: string\n  currentColor?: boolean\n  fillRule?: 'nonzero' | 'evenodd'\n  clipRule?: 'nonzero' | 'evenodd' | 'inherit'\n}\n\nexport default function IconBase({\n  size = 24,\n  viewBoxSize,\n  currentColor,\n  path,\n  transform,\n  fillRule,\n  clipRule,\n}: Props) {\n  return (\n    <Icon\n      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n      size={size}\n      currentColor={currentColor}\n    >\n      <IconBasePath\n        path={path}\n        transform={transform}\n        fillRule={fillRule}\n        clipRule={clipRule}\n      />\n    </Icon>\n  )\n}\n\nconst Icon = styled.svg<{ size: number; currentColor?: boolean }>`\n  stroke: none;\n  fill: ${({ currentColor = false, theme }) =>\n    currentColor ? 'currentColor' : theme.color.text2};\n  width: ${(props) => props.size}px;\n  height: ${(props) => props.size}px;\n  line-height: 0;\n  font-size: 0;\n  vertical-align: middle;\n`\n\ntype IconBasePathProps = Pick<\n  Props,\n  'path' | 'transform' | 'fillRule' | 'clipRule'\n>\nexport const IconBasePath = ({\n  path,\n  transform,\n  fillRule,\n  clipRule,\n}: IconBasePathProps) => {\n  if (typeof path === 'string') {\n    return (\n      <path\n        d={path}\n        transform={transform}\n        fillRule={fillRule}\n        clipRule={clipRule}\n      />\n    )\n  } else {\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    return <>{path}</>\n  }\n}\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/react-src-components-TextArea-TextArea-story.7cd2dd22.iframe.bundle.js b/react-src-components-TextArea-TextArea-story.b95c10b5.iframe.bundle.js
similarity index 98%
rename from react-src-components-TextArea-TextArea-story.7cd2dd22.iframe.bundle.js
rename to react-src-components-TextArea-TextArea-story.b95c10b5.iframe.bundle.js
index 55c605524..4dbba0ca7 100644
--- a/react-src-components-TextArea-TextArea-story.7cd2dd22.iframe.bundle.js
+++ b/react-src-components-TextArea-TextArea-story.b95c10b5.iframe.bundle.js
@@ -274,5 +274,5 @@
   margin-top: 4px;
   margin-bottom: -4px;
   color: ${p=>`var(--charcoal-${p.invalid?"assertive":"text2"})`};
-`;try{TextField.displayName="TextField",TextField.__docgenInfo={description:"",displayName:"TextField",props:{prefix:{defaultValue:null,description:"",name:"prefix",required:!1,type:{name:"ReactNode"}},suffix:{defaultValue:null,description:"",name:"suffix",required:!1,type:{name:"ReactNode"}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"string"}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"string"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"((value: string) => void)"}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"((event: KeyboardEvent<Element>) => void)"}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"((event: FocusEvent<Element, Element>) => void)"}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"((event: FocusEvent<Element, Element>) => void)"}},showCount:{defaultValue:null,description:"",name:"showCount",required:!1,type:{name:"boolean"}},showLabel:{defaultValue:null,description:"",name:"showLabel",required:!1,type:{name:"boolean"}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"string"}},invalid:{defaultValue:null,description:"",name:"invalid",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string"}},requiredText:{defaultValue:null,description:"",name:"requiredText",required:!1,type:{name:"string"}},subLabel:{defaultValue:null,description:"",name:"subLabel",required:!1,type:{name:"ReactNode"}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onCompositionStart:{defaultValue:null,description:"",name:"onCompositionStart",required:!1,type:{name:"CompositionEventHandler<Element>"}},onCompositionEnd:{defaultValue:null,description:"",name:"onCompositionEnd",required:!1,type:{name:"CompositionEventHandler<Element>"}},onCompositionUpdate:{defaultValue:null,description:"",name:"onCompositionUpdate",required:!1,type:{name:"CompositionEventHandler<Element>"}},onSelect:{defaultValue:null,description:"",name:"onSelect",required:!1,type:{name:"ReactEventHandler<Element>"}},onBeforeInput:{defaultValue:null,description:"",name:"onBeforeInput",required:!1,type:{name:"FormEventHandler<Element>"}},onInput:{defaultValue:null,description:"",name:"onInput",required:!1,type:{name:"FormEventHandler<Element>"}},autoCapitalize:{defaultValue:null,description:"",name:"autoCapitalize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"on"'},{value:'"off"'},{value:'"sentences"'},{value:'"words"'},{value:'"characters"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#TextField"]={docgenInfo:TextField.__docgenInfo,name:"TextField",path:"packages/react/src/components/TextField/index.tsx#TextField"})}catch(__react_docgen_typescript_loader_error){}try{TextFieldLabel.displayName="TextFieldLabel",TextFieldLabel.__docgenInfo={description:"",displayName:"TextFieldLabel",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string"}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"boolean"}},requiredText:{defaultValue:null,description:"",name:"requiredText",required:!1,type:{name:"string"}},subLabel:{defaultValue:null,description:"",name:"subLabel",required:!1,type:{name:"ReactNode"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#TextFieldLabel"]={docgenInfo:TextFieldLabel.__docgenInfo,name:"TextFieldLabel",path:"packages/react/src/components/TextField/index.tsx#TextFieldLabel"})}catch(__react_docgen_typescript_loader_error){}try{AssistiveText.displayName="AssistiveText",AssistiveText.__docgenInfo={description:"",displayName:"AssistiveText",props:{ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"((instance: HTMLParagraphElement | null) => void) | RefObject<HTMLParagraphElement> | null"}},invalid:{defaultValue:null,description:"",name:"invalid",required:!0,type:{name:"boolean"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#AssistiveText"]={docgenInfo:AssistiveText.__docgenInfo,name:"AssistiveText",path:"packages/react/src/components/TextField/index.tsx#AssistiveText"})}catch(__react_docgen_typescript_loader_error){}},"./packages/react/src/components/TextField/useFocusWithClick.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Q:()=>useFocusWithClick});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");function useFocusWithClick(containerRef,inputRef){(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{const el=containerRef.current;if(el){const handleDown=e=>{e.target!==inputRef.current&&inputRef.current?.focus()};return el.addEventListener("click",handleDown),()=>{el.removeEventListener("click",handleDown)}}}))}}}]);
-//# sourceMappingURL=react-src-components-TextArea-TextArea-story.7cd2dd22.iframe.bundle.js.map
\ No newline at end of file
+`;try{TextField.displayName="TextField",TextField.__docgenInfo={description:"",displayName:"TextField",props:{prefix:{defaultValue:null,description:"",name:"prefix",required:!1,type:{name:"ReactNode"}},suffix:{defaultValue:null,description:"",name:"suffix",required:!1,type:{name:"ReactNode"}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"string"}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"string"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"((value: string) => void)"}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"((event: KeyboardEvent<Element>) => void)"}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"((event: FocusEvent<Element, Element>) => void)"}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"((event: FocusEvent<Element, Element>) => void)"}},showCount:{defaultValue:null,description:"",name:"showCount",required:!1,type:{name:"boolean"}},showLabel:{defaultValue:null,description:"",name:"showLabel",required:!1,type:{name:"boolean"}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"string"}},invalid:{defaultValue:null,description:"",name:"invalid",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string"}},requiredText:{defaultValue:null,description:"",name:"requiredText",required:!1,type:{name:"string"}},subLabel:{defaultValue:null,description:"",name:"subLabel",required:!1,type:{name:"ReactNode"}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onCompositionStart:{defaultValue:null,description:"",name:"onCompositionStart",required:!1,type:{name:"CompositionEventHandler<Element>"}},onCompositionEnd:{defaultValue:null,description:"",name:"onCompositionEnd",required:!1,type:{name:"CompositionEventHandler<Element>"}},onCompositionUpdate:{defaultValue:null,description:"",name:"onCompositionUpdate",required:!1,type:{name:"CompositionEventHandler<Element>"}},onSelect:{defaultValue:null,description:"",name:"onSelect",required:!1,type:{name:"ReactEventHandler<Element>"}},onBeforeInput:{defaultValue:null,description:"",name:"onBeforeInput",required:!1,type:{name:"FormEventHandler<Element>"}},onInput:{defaultValue:null,description:"",name:"onInput",required:!1,type:{name:"FormEventHandler<Element>"}},autoCapitalize:{defaultValue:null,description:"",name:"autoCapitalize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"on"'},{value:'"off"'},{value:'"sentences"'},{value:'"words"'},{value:'"characters"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#TextField"]={docgenInfo:TextField.__docgenInfo,name:"TextField",path:"packages/react/src/components/TextField/index.tsx#TextField"})}catch(__react_docgen_typescript_loader_error){}try{TextFieldLabel.displayName="TextFieldLabel",TextFieldLabel.__docgenInfo={description:"",displayName:"TextFieldLabel",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string"}},requiredText:{defaultValue:null,description:"",name:"requiredText",required:!1,type:{name:"string"}},subLabel:{defaultValue:null,description:"",name:"subLabel",required:!1,type:{name:"ReactNode"}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"boolean"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#TextFieldLabel"]={docgenInfo:TextFieldLabel.__docgenInfo,name:"TextFieldLabel",path:"packages/react/src/components/TextField/index.tsx#TextFieldLabel"})}catch(__react_docgen_typescript_loader_error){}try{AssistiveText.displayName="AssistiveText",AssistiveText.__docgenInfo={description:"",displayName:"AssistiveText",props:{ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"((instance: HTMLParagraphElement | null) => void) | RefObject<HTMLParagraphElement> | null"}},invalid:{defaultValue:null,description:"",name:"invalid",required:!0,type:{name:"boolean"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#AssistiveText"]={docgenInfo:AssistiveText.__docgenInfo,name:"AssistiveText",path:"packages/react/src/components/TextField/index.tsx#AssistiveText"})}catch(__react_docgen_typescript_loader_error){}},"./packages/react/src/components/TextField/useFocusWithClick.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Q:()=>useFocusWithClick});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");function useFocusWithClick(containerRef,inputRef){(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{const el=containerRef.current;if(el){const handleDown=e=>{e.target!==inputRef.current&&inputRef.current?.focus()};return el.addEventListener("click",handleDown),()=>{el.removeEventListener("click",handleDown)}}}))}}}]);
+//# sourceMappingURL=react-src-components-TextArea-TextArea-story.b95c10b5.iframe.bundle.js.map
\ No newline at end of file
diff --git a/react-src-components-TextArea-TextArea-story.7cd2dd22.iframe.bundle.js.map b/react-src-components-TextArea-TextArea-story.b95c10b5.iframe.bundle.js.map
similarity index 99%
rename from react-src-components-TextArea-TextArea-story.7cd2dd22.iframe.bundle.js.map
rename to react-src-components-TextArea-TextArea-story.b95c10b5.iframe.bundle.js.map
index 92bd46030..17cb0757c 100644
--- a/react-src-components-TextArea-TextArea-story.7cd2dd22.iframe.bundle.js.map
+++ b/react-src-components-TextArea-TextArea-story.b95c10b5.iframe.bundle.js.map
@@ -1 +1 @@
-{"version":3,"file":"react-src-components-TextArea-TextArea-story.7cd2dd22.iframe.bundle.js","mappings":";;;;;;AAqDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACYA;;;;;;;;;;;;;;;;;;;;AAsBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA;;;;AAIA;;;;AAIA;;;;;;;AC2CA;AAGA;;;;;;;;;AASA;AACA;;;;;;;;;;AAUA;;;AAGA;;;AAOA;;;;;;;;;;;;;;;AAeA;;AAEA;AACA;;;;;;;;;;;AAaA;;;;;;;;;;;;ACxEA;AAGA;;AAIA;;AAMA;;;;;;;;;;;;;;;;;;;AAsBA;;;AAGA;;;AAOA;;;AAKA;;;;AAMA;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;;;;AAMA;;;;;AAKA","sources":["webpack://charcoal-ui/./packages/react/src/components/Clickable/index.tsx","webpack://charcoal-ui/./packages/react/src/components/FieldLabel/index.tsx","webpack://charcoal-ui/./packages/react/src/components/TextArea/index.tsx","webpack://charcoal-ui/./packages/react/src/components/TextField/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport styled from 'styled-components'\nimport {\n  LinkProps,\n  useComponentAbstraction,\n} from '../../core/ComponentAbstraction'\nimport { disabledSelector } from '@charcoal-ui/utils'\n\ninterface BaseProps {\n  /**\n   * クリックの無効化\n   */\n  disabled?: boolean\n}\n\ninterface LinkBaseProps {\n  /**\n   * リンクのURL。指定するとbuttonタグではなくaタグとして描画される\n   */\n  to: string\n}\n\nexport type ClickableProps =\n  | (BaseProps & Omit<React.ComponentPropsWithoutRef<'button'>, 'disabled'>)\n  | (BaseProps & LinkBaseProps & Omit<LinkProps, 'to'>)\nexport type ClickableElement = HTMLButtonElement & HTMLAnchorElement\n\nconst Clickable = React.forwardRef<ClickableElement, ClickableProps>(\n  function Clickable(props, ref) {\n    const { Link } = useComponentAbstraction()\n    const isLink = 'to' in props\n    const as = isLink ? Link : 'button'\n    const ariaDisabled = isLink && props.disabled === true ? true : undefined\n    let rest = props\n    if (isLink) {\n      const { disabled, ..._rest } = props\n      rest = _rest\n    }\n    return (\n      <StyledClickableDiv\n        {...rest}\n        ref={ref}\n        as={as}\n        aria-disabled={ariaDisabled}\n      />\n    )\n  }\n)\nexport default Clickable\n\nconst StyledClickableDiv = styled.div`\n  cursor: pointer;\n\n  ${disabledSelector} {\n    cursor: default;\n  }\n\n  /* Reset button appearance */\n  appearance: none;\n  background: transparent;\n  padding: 0;\n  border-style: none;\n  outline: none;\n  color: inherit;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n  text-decoration: none;\n\n  &:focus {\n    outline: none;\n  }\n\n  /* Change the font styles in all browsers. */\n  font: inherit;\n\n  /* Remove the margin in Firefox and Safari. */\n  margin: 0;\n\n  /* Show the overflow in Edge. */\n  overflow: visible;\n\n  /* Remove the inheritance of text transform in Firefox. */\n  text-transform: none;\n\n  /* Remove the inner border and padding in Firefox. */\n  &::-moz-focus-inner {\n    border-style: none;\n    padding: 0;\n  }\n`\n","import * as React from 'react'\nimport styled from 'styled-components'\n\nexport interface FieldLabelProps\n  extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  readonly className?: string\n  readonly label: string\n  readonly subLabel?: React.ReactNode\n  readonly required?: boolean\n  // TODO: 翻訳用のContextで注入する\n  readonly requiredText?: string\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  function FieldLabel(\n    {\n      style,\n      className,\n      label,\n      required = false,\n      requiredText,\n      subLabel,\n      ...labelProps\n    },\n    ref\n  ) {\n    return (\n      <FieldLabelWrapper style={style} className={className}>\n        <Label ref={ref} {...labelProps}>\n          {label}\n        </Label>\n        {required && <RequiredText>{requiredText}</RequiredText>}\n        <SubLabelClickable>\n          <span>{subLabel}</span>\n        </SubLabelClickable>\n      </FieldLabelWrapper>\n    )\n  }\n)\n\nexport default FieldLabel\n\nconst Label = styled.label`\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: bold;\n  display: flow-root;\n  color: var(--charcoal-text1);\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nconst RequiredText = styled.span`\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-text2);\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nconst SubLabelClickable = styled.div`\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-text3);\n  transition: 0.2s color, 0.2s box-shadow;\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n\n  &:not(:disabled):not([aria-disabled]),\n  &[aria-disabled='false'] {\n    &:hover {\n      color: var(--charcoal-text3-hover);\n    }\n    &:active {\n      color: var(--charcoal-text3-press);\n    }\n    &:active,\n    &:focus,\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n    }\n  }\n`\n\nconst FieldLabelWrapper = styled.div`\n  display: inline-flex;\n  align-items: center;\n\n  > ${RequiredText} {\n    margin-left: 4px;\n  }\n\n  > ${SubLabelClickable} {\n    margin-left: auto;\n  }\n`\n","import { useTextField } from '@react-aria/textfield'\nimport { useVisuallyHidden } from '@react-aria/visually-hidden'\nimport { forwardRef, useCallback, useEffect, useRef, useState } from 'react'\nimport styled, { css } from 'styled-components'\nimport { FieldLabelProps } from '../FieldLabel'\nimport { countCodePointsInString, mergeRefs } from '../../_lib'\nimport { ReactAreaUseTextFieldCompat } from '../../_lib/compat'\nimport { AssistiveText, TextFieldLabel } from '../TextField'\nimport { useFocusWithClick } from '../TextField/useFocusWithClick'\nimport { mergeProps } from '@react-aria/utils'\n\ntype DOMProps = Omit<\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n  // react-ariaのhookは、onChangeが`(v: string) => void`想定\n  | 'onChange'\n  // ReactAreaUseTextFieldCompatに書いてあるような事情で、ここにあるイベントハンドラの型をゆるめる\n  | keyof ReactAreaUseTextFieldCompat\n>\n\nexport interface TextAreaProps\n  extends Pick<FieldLabelProps, 'label' | 'requiredText' | 'subLabel'>,\n    DOMProps,\n    ReactAreaUseTextFieldCompat {\n  readonly autoHeight?: boolean\n  readonly rows?: number\n\n  // <input> 要素は number とか string[] もありうるが、今はこれしか想定してない\n  readonly defaultValue?: string\n  readonly value?: string\n  readonly onChange?: (value: string) => void\n\n  // react-ariaの型定義のせいでHTMLTextAreaElementにできない\n  readonly onKeyDown?: (event: React.KeyboardEvent<Element>) => void\n  readonly onFocus?: (event: React.FocusEvent<Element>) => void\n  readonly onBlur?: (event: React.FocusEvent<Element>) => void\n\n  readonly showCount?: boolean\n  readonly showLabel?: boolean\n  readonly assistiveText?: string\n  readonly invalid?: boolean\n}\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextAreaInner({ onChange, ...props }, forwardRef) {\n    const {\n      className,\n      showCount = false,\n      showLabel = false,\n      label,\n      requiredText,\n      subLabel,\n      disabled = false,\n      required,\n      invalid = false,\n      assistiveText,\n      maxLength,\n      autoHeight = false,\n      rows: initialRows = 4,\n      ...restProps\n    } = props\n\n    const { visuallyHiddenProps } = useVisuallyHidden()\n    const textareaRef = useRef<HTMLTextAreaElement>(null)\n    const ariaRef = useRef<HTMLTextAreaElement>(null)\n    const [count, setCount] = useState(\n      countCodePointsInString(props.value ?? '')\n    )\n    const [rows, setRows] = useState(initialRows)\n\n    const syncHeight = useCallback(\n      (textarea: HTMLTextAreaElement) => {\n        const rows = (`${textarea.value}\\n`.match(/\\n/gu)?.length ?? 0) || 1\n        setRows(initialRows <= rows ? rows : initialRows)\n      },\n      [initialRows]\n    )\n\n    const nonControlled = props.value === undefined\n    const handleChange = useCallback(\n      (value: string) => {\n        const count = countCodePointsInString(value)\n        if (maxLength !== undefined && count > maxLength) {\n          return\n        }\n        if (nonControlled) {\n          setCount(count)\n        }\n        if (autoHeight && textareaRef.current !== null) {\n          syncHeight(textareaRef.current)\n        }\n        onChange?.(value)\n      },\n      [autoHeight, maxLength, nonControlled, onChange, syncHeight]\n    )\n\n    useEffect(() => {\n      setCount(countCodePointsInString(props.value ?? ''))\n    }, [props.value])\n\n    const {\n      inputProps: ariaInputProps,\n      labelProps,\n      descriptionProps,\n      errorMessageProps,\n    } = useTextField(\n      {\n        inputElementType: 'textarea',\n        isDisabled: disabled,\n        isRequired: required,\n        validationState: invalid ? 'invalid' : 'valid',\n        description: !invalid && assistiveText,\n        errorMessage: invalid && assistiveText,\n        onChange: handleChange,\n        ...props,\n      },\n      ariaRef\n    )\n\n    useEffect(() => {\n      if (autoHeight && textareaRef.current !== null) {\n        syncHeight(textareaRef.current)\n      }\n    }, [autoHeight, syncHeight])\n\n    const containerRef = useRef(null)\n\n    useFocusWithClick(containerRef, ariaRef)\n\n    const inputProps = mergeProps(restProps, ariaInputProps)\n\n    return (\n      <TextFieldRoot className={className} isDisabled={disabled}>\n        <TextFieldLabel\n          label={label}\n          requiredText={requiredText}\n          required={required}\n          subLabel={subLabel}\n          {...labelProps}\n          {...(!showLabel ? visuallyHiddenProps : {})}\n        />\n        <StyledTextareaContainer\n          ref={containerRef}\n          invalid={invalid}\n          rows={showCount ? rows + 1 : rows}\n          aria-disabled={disabled === true ? 'true' : undefined}\n        >\n          <StyledTextarea\n            ref={mergeRefs(textareaRef, forwardRef, ariaRef)}\n            rows={rows}\n            noBottomPadding={showCount}\n            {...inputProps}\n          />\n          {showCount && (\n            <MultiLineCounter>\n              {maxLength !== undefined ? `${count}/${maxLength}` : count}\n            </MultiLineCounter>\n          )}\n        </StyledTextareaContainer>\n        {assistiveText != null && assistiveText.length !== 0 && (\n          <AssistiveText\n            invalid={invalid}\n            {...(invalid ? errorMessageProps : descriptionProps)}\n          >\n            {assistiveText}\n          </AssistiveText>\n        )}\n      </TextFieldRoot>\n    )\n  }\n)\n\nexport default TextArea\n\nconst TextFieldRoot = styled.div<{ isDisabled: boolean }>`\n  display: flex;\n  flex-direction: column;\n\n  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}\n`\n\nconst StyledTextareaContainer = styled.div<{ rows: number; invalid: boolean }>`\n  position: relative;\n  overflow: hidden;\n\n  color: var(--charcoal-text2);\n  background-color: var(--charcoal-surface3);\n  border-radius: 4px;\n  transition: 0.2s background-color, 0.2s box-shadow;\n\n  ${({ rows }) => css`\n    height: calc(22px * ${rows} + 18px);\n  `};\n\n  :not([aria-disabled]):hover,\n  [aria-disabled='false']:hover {\n    background-color: var(--charcoal-surface3-hover);\n  }\n  :focus-within {\n    outline: none;\n    box-shadow: 0 0 0 4px\n      ${(p) => (p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`)};\n  }\n\n  ${(p) =>\n    p.invalid &&\n    css`\n      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n    `}\n`\n\nconst StyledTextarea = styled.textarea<{ noBottomPadding: boolean }>`\n  border: none;\n  outline: none;\n  resize: none;\n  font-family: inherit;\n  color: inherit;\n  box-sizing: border-box;\n\n  /* Prevent zooming for iOS Safari */\n  transform-origin: top left;\n  transform: scale(0.875);\n  width: calc(100% / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding: calc(9px / 0.875) calc(8px / 0.875)\n    ${(p) => (p.noBottomPadding ? 0 : '')};\n\n  ${({ rows = 1, noBottomPadding }) => css`\n    height: calc(22px / 0.875 * ${rows} + ${noBottomPadding ? 9 : 20}px);\n  `};\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n\n  background: none;\n\n  &::placeholder {\n    color: var(--charcoal-text3);\n  }\n`\n\nconst MultiLineCounter = styled.span`\n  position: absolute;\n  bottom: 9px;\n  right: 8px;\n\n  line-height: 22px;\n  font-size: 14px;\n  color: var(--charcoal-text3);\n`\n","import { useTextField } from '@react-aria/textfield'\nimport { useVisuallyHidden } from '@react-aria/visually-hidden'\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport styled, { css } from 'styled-components'\nimport FieldLabel, { FieldLabelProps } from '../FieldLabel'\nimport { countCodePointsInString, mergeRefs } from '../../_lib'\nimport { ReactAreaUseTextFieldCompat } from '../../_lib/compat'\nimport { useFocusWithClick } from './useFocusWithClick'\nimport { mergeProps } from '@react-aria/utils'\n\ntype DOMProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  // react-ariaのhookは、onChangeが`(v: string) => void`想定\n  | 'onChange'\n\n  // RDFa Attributeとかぶる\n  // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/58d57ca87ac7be0d306c0844dc254e90c150bd0d/types/react/index.d.ts#L1951\n  | 'prefix'\n\n  // ReactAreaUseTextFieldCompatに書いてあるような事情で、ここにあるイベントハンドラの型をゆるめる\n  | keyof ReactAreaUseTextFieldCompat\n>\n\nexport interface TextFieldProps\n  extends Pick<FieldLabelProps, 'label' | 'requiredText' | 'subLabel'>,\n    DOMProps,\n    ReactAreaUseTextFieldCompat {\n  readonly prefix?: ReactNode\n  readonly suffix?: ReactNode\n\n  // <input> 要素は number とか string[] もありうるが、今はこれしか想定してない\n  readonly defaultValue?: string\n  readonly value?: string\n  readonly onChange?: (value: string) => void\n\n  // react-ariaの型定義のせいでHTMLInputElementにできない\n  readonly onKeyDown?: (event: React.KeyboardEvent<Element>) => void\n  readonly onFocus?: (event: React.FocusEvent<Element>) => void\n  readonly onBlur?: (event: React.FocusEvent<Element>) => void\n\n  readonly showCount?: boolean\n  readonly showLabel?: boolean\n  readonly assistiveText?: string\n  readonly invalid?: boolean\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  function SingleLineTextFieldInner({ onChange, ...props }, forwardRef) {\n    const {\n      className,\n      showLabel = false,\n      showCount = false,\n      label,\n      requiredText,\n      subLabel,\n      disabled = false,\n      required,\n      invalid = false,\n      assistiveText,\n      maxLength,\n      prefix = null,\n      suffix = null,\n      ...restProps\n    } = props\n\n    const { visuallyHiddenProps } = useVisuallyHidden()\n    const ariaRef = useRef<HTMLInputElement>(null)\n    const [count, setCount] = useState(\n      countCodePointsInString(props.value ?? '')\n    )\n\n    const nonControlled = props.value === undefined\n    const handleChange = useCallback(\n      (value: string) => {\n        const count = countCodePointsInString(value)\n        if (maxLength !== undefined && count > maxLength) {\n          return\n        }\n        if (nonControlled) {\n          setCount(count)\n        }\n        onChange?.(value)\n      },\n      [maxLength, nonControlled, onChange]\n    )\n\n    useEffect(() => {\n      setCount(countCodePointsInString(props.value ?? ''))\n    }, [props.value])\n\n    const {\n      inputProps: ariaInputProps,\n      labelProps,\n      descriptionProps,\n      errorMessageProps,\n    } = useTextField(\n      {\n        inputElementType: 'input',\n        isDisabled: disabled,\n        isRequired: required,\n        validationState: invalid ? 'invalid' : 'valid',\n        description: !invalid && assistiveText,\n        errorMessage: invalid && assistiveText,\n        onChange: handleChange,\n        ...props,\n      },\n      ariaRef\n    )\n\n    const containerRef = useRef(null)\n\n    useFocusWithClick(containerRef, ariaRef)\n\n    const inputProps = mergeProps(restProps, ariaInputProps)\n\n    return (\n      <TextFieldRoot className={className} isDisabled={disabled}>\n        <TextFieldLabel\n          label={label}\n          requiredText={requiredText}\n          required={required}\n          subLabel={subLabel}\n          {...labelProps}\n          {...(!showLabel ? visuallyHiddenProps : {})}\n        />\n        <StyledInputContainer\n          ref={containerRef}\n          invalid={invalid}\n          aria-disabled={disabled === true ? true : undefined}\n          hasPrefix={prefix != null}\n          hasSuffix={suffix != null || showCount}\n        >\n          {prefix && <PrefixContainer>{prefix}</PrefixContainer>}\n          <StyledInput\n            ref={mergeRefs(forwardRef, ariaRef)}\n            invalid={invalid}\n            {...inputProps}\n          />\n          {(suffix || showCount) && (\n            <SuffixContainer>\n              {suffix}\n              {showCount && (\n                <SingleLineCounter>\n                  {maxLength !== undefined ? `${count}/${maxLength}` : count}\n                </SingleLineCounter>\n              )}\n            </SuffixContainer>\n          )}\n        </StyledInputContainer>\n        {assistiveText != null && assistiveText.length !== 0 && (\n          <AssistiveText\n            invalid={invalid}\n            {...(invalid ? errorMessageProps : descriptionProps)}\n          >\n            {assistiveText}\n          </AssistiveText>\n        )}\n      </TextFieldRoot>\n    )\n  }\n)\n\nexport default TextField\n\nconst TextFieldRoot = styled.div<{ isDisabled: boolean }>`\n  display: flex;\n  flex-direction: column;\n\n  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}\n`\n\nexport const TextFieldLabel = styled(FieldLabel)`\n  margin-bottom: 8px;\n`\n\nconst StyledInputContainer = styled.div<{\n  invalid: boolean\n  hasPrefix: boolean\n  hasSuffix: boolean\n}>`\n  display: grid;\n  grid-template-columns: ${(p) =>\n    [p.hasPrefix && 'auto', '1fr', p.hasSuffix && 'auto']\n      .filter(Boolean)\n      .join(' ')};\n  height: 40px;\n  transition: 0.2s background-color, 0.2s box-shadow;\n  color: var(--charcoal-text2);\n  background-color: var(--charcoal-surface3);\n  border-radius: 4px;\n  gap: 4px;\n  padding: 0 8px;\n  line-height: 22px;\n  font-size: 14px;\n\n  :not(:disabled):not([aria-disabled]):hover,\n  [aria-disabled='false']:hover {\n    background-color: var(--charcoal-surface3-hover);\n  }\n\n  :focus-within {\n    outline: none;\n    box-shadow: 0 0 0 4px\n      ${(p) => (p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`)};\n  }\n\n  ${(p) =>\n    p.invalid &&\n    css`\n      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n    `}\n`\n\nconst PrefixContainer = styled.div`\n  display: flex;\n  align-items: center;\n`\n\nconst SuffixContainer = styled.span`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n`\n\nconst StyledInput = styled.input<{\n  invalid: boolean\n}>`\n  border: none;\n  box-sizing: border-box;\n  outline: none;\n  font-family: inherit;\n\n  /* Prevent zooming for iOS Safari */\n  transform-origin: top left;\n  transform: scale(0.875);\n  width: calc(100% / 0.875);\n  height: calc(100% / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding-left: 0;\n  padding-right: 0;\n  border-radius: calc(4px / 0.875);\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n  background: transparent;\n\n  color: var(--charcoal-text2);\n  &::placeholder {\n    color: var(--charcoal-text3);\n  }\n`\n\nconst SingleLineCounter = styled.span`\n  line-height: 22px;\n  font-size: 14px;\n  color: var(--charcoal-text3);\n`\n\nexport const AssistiveText = styled.p<{ invalid: boolean }>`\n  font-size: 14px;\n  line-height: 22px;\n  margin-top: 4px;\n  margin-bottom: -4px;\n  color: ${(p) => `var(--charcoal-${p.invalid ? `assertive` : `text2`})`};\n`\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"react-src-components-TextArea-TextArea-story.b95c10b5.iframe.bundle.js","mappings":";;;;;;AAqDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACYA;;;;;;;;;;;;;;;;;;;;AAsBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA;;;;AAIA;;;;AAIA;;;;;;;AC2CA;AAGA;;;;;;;;;AASA;AACA;;;;;;;;;;AAUA;;;AAGA;;;AAOA;;;;;;;;;;;;;;;AAeA;;AAEA;AACA;;;;;;;;;;;AAaA;;;;;;;;;;;;ACxEA;AAGA;;AAIA;;AAMA;;;;;;;;;;;;;;;;;;;AAsBA;;;AAGA;;;AAOA;;;AAKA;;;;AAMA;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;;;;AAMA;;;;;AAKA","sources":["webpack://charcoal-ui/./packages/react/src/components/Clickable/index.tsx","webpack://charcoal-ui/./packages/react/src/components/FieldLabel/index.tsx","webpack://charcoal-ui/./packages/react/src/components/TextArea/index.tsx","webpack://charcoal-ui/./packages/react/src/components/TextField/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport styled from 'styled-components'\nimport {\n  LinkProps,\n  useComponentAbstraction,\n} from '../../core/ComponentAbstraction'\nimport { disabledSelector } from '@charcoal-ui/utils'\n\ninterface BaseProps {\n  /**\n   * クリックの無効化\n   */\n  disabled?: boolean\n}\n\ninterface LinkBaseProps {\n  /**\n   * リンクのURL。指定するとbuttonタグではなくaタグとして描画される\n   */\n  to: string\n}\n\nexport type ClickableProps =\n  | (BaseProps & Omit<React.ComponentPropsWithoutRef<'button'>, 'disabled'>)\n  | (BaseProps & LinkBaseProps & Omit<LinkProps, 'to'>)\nexport type ClickableElement = HTMLButtonElement & HTMLAnchorElement\n\nconst Clickable = React.forwardRef<ClickableElement, ClickableProps>(\n  function Clickable(props, ref) {\n    const { Link } = useComponentAbstraction()\n    const isLink = 'to' in props\n    const as = isLink ? Link : 'button'\n    const ariaDisabled = isLink && props.disabled === true ? true : undefined\n    let rest = props\n    if (isLink) {\n      const { disabled, ..._rest } = props\n      rest = _rest\n    }\n    return (\n      <StyledClickableDiv\n        {...rest}\n        ref={ref}\n        as={as}\n        aria-disabled={ariaDisabled}\n      />\n    )\n  }\n)\nexport default Clickable\n\nconst StyledClickableDiv = styled.div`\n  cursor: pointer;\n\n  ${disabledSelector} {\n    cursor: default;\n  }\n\n  /* Reset button appearance */\n  appearance: none;\n  background: transparent;\n  padding: 0;\n  border-style: none;\n  outline: none;\n  color: inherit;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n  text-decoration: none;\n\n  &:focus {\n    outline: none;\n  }\n\n  /* Change the font styles in all browsers. */\n  font: inherit;\n\n  /* Remove the margin in Firefox and Safari. */\n  margin: 0;\n\n  /* Show the overflow in Edge. */\n  overflow: visible;\n\n  /* Remove the inheritance of text transform in Firefox. */\n  text-transform: none;\n\n  /* Remove the inner border and padding in Firefox. */\n  &::-moz-focus-inner {\n    border-style: none;\n    padding: 0;\n  }\n`\n","import * as React from 'react'\nimport styled from 'styled-components'\n\nexport interface FieldLabelProps\n  extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  readonly className?: string\n  readonly label: string\n  readonly subLabel?: React.ReactNode\n  readonly required?: boolean\n  // TODO: 翻訳用のContextで注入する\n  readonly requiredText?: string\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  function FieldLabel(\n    {\n      style,\n      className,\n      label,\n      required = false,\n      requiredText,\n      subLabel,\n      ...labelProps\n    },\n    ref\n  ) {\n    return (\n      <FieldLabelWrapper style={style} className={className}>\n        <Label ref={ref} {...labelProps}>\n          {label}\n        </Label>\n        {required && <RequiredText>{requiredText}</RequiredText>}\n        <SubLabelClickable>\n          <span>{subLabel}</span>\n        </SubLabelClickable>\n      </FieldLabelWrapper>\n    )\n  }\n)\n\nexport default FieldLabel\n\nconst Label = styled.label`\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: bold;\n  display: flow-root;\n  color: var(--charcoal-text1);\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nconst RequiredText = styled.span`\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-text2);\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nconst SubLabelClickable = styled.div`\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-text3);\n  transition: 0.2s color, 0.2s box-shadow;\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n\n  &:not(:disabled):not([aria-disabled]),\n  &[aria-disabled='false'] {\n    &:hover {\n      color: var(--charcoal-text3-hover);\n    }\n    &:active {\n      color: var(--charcoal-text3-press);\n    }\n    &:active,\n    &:focus,\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n    }\n  }\n`\n\nconst FieldLabelWrapper = styled.div`\n  display: inline-flex;\n  align-items: center;\n\n  > ${RequiredText} {\n    margin-left: 4px;\n  }\n\n  > ${SubLabelClickable} {\n    margin-left: auto;\n  }\n`\n","import { useTextField } from '@react-aria/textfield'\nimport { useVisuallyHidden } from '@react-aria/visually-hidden'\nimport { forwardRef, useCallback, useEffect, useRef, useState } from 'react'\nimport styled, { css } from 'styled-components'\nimport { FieldLabelProps } from '../FieldLabel'\nimport { countCodePointsInString, mergeRefs } from '../../_lib'\nimport { ReactAreaUseTextFieldCompat } from '../../_lib/compat'\nimport { AssistiveText, TextFieldLabel } from '../TextField'\nimport { useFocusWithClick } from '../TextField/useFocusWithClick'\nimport { mergeProps } from '@react-aria/utils'\n\ntype DOMProps = Omit<\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n  // react-ariaのhookは、onChangeが`(v: string) => void`想定\n  | 'onChange'\n  // ReactAreaUseTextFieldCompatに書いてあるような事情で、ここにあるイベントハンドラの型をゆるめる\n  | keyof ReactAreaUseTextFieldCompat\n>\n\nexport interface TextAreaProps\n  extends Pick<FieldLabelProps, 'label' | 'requiredText' | 'subLabel'>,\n    DOMProps,\n    ReactAreaUseTextFieldCompat {\n  readonly autoHeight?: boolean\n  readonly rows?: number\n\n  // <input> 要素は number とか string[] もありうるが、今はこれしか想定してない\n  readonly defaultValue?: string\n  readonly value?: string\n  readonly onChange?: (value: string) => void\n\n  // react-ariaの型定義のせいでHTMLTextAreaElementにできない\n  readonly onKeyDown?: (event: React.KeyboardEvent<Element>) => void\n  readonly onFocus?: (event: React.FocusEvent<Element>) => void\n  readonly onBlur?: (event: React.FocusEvent<Element>) => void\n\n  readonly showCount?: boolean\n  readonly showLabel?: boolean\n  readonly assistiveText?: string\n  readonly invalid?: boolean\n}\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextAreaInner({ onChange, ...props }, forwardRef) {\n    const {\n      className,\n      showCount = false,\n      showLabel = false,\n      label,\n      requiredText,\n      subLabel,\n      disabled = false,\n      required,\n      invalid = false,\n      assistiveText,\n      maxLength,\n      autoHeight = false,\n      rows: initialRows = 4,\n      ...restProps\n    } = props\n\n    const { visuallyHiddenProps } = useVisuallyHidden()\n    const textareaRef = useRef<HTMLTextAreaElement>(null)\n    const ariaRef = useRef<HTMLTextAreaElement>(null)\n    const [count, setCount] = useState(\n      countCodePointsInString(props.value ?? '')\n    )\n    const [rows, setRows] = useState(initialRows)\n\n    const syncHeight = useCallback(\n      (textarea: HTMLTextAreaElement) => {\n        const rows = (`${textarea.value}\\n`.match(/\\n/gu)?.length ?? 0) || 1\n        setRows(initialRows <= rows ? rows : initialRows)\n      },\n      [initialRows]\n    )\n\n    const nonControlled = props.value === undefined\n    const handleChange = useCallback(\n      (value: string) => {\n        const count = countCodePointsInString(value)\n        if (maxLength !== undefined && count > maxLength) {\n          return\n        }\n        if (nonControlled) {\n          setCount(count)\n        }\n        if (autoHeight && textareaRef.current !== null) {\n          syncHeight(textareaRef.current)\n        }\n        onChange?.(value)\n      },\n      [autoHeight, maxLength, nonControlled, onChange, syncHeight]\n    )\n\n    useEffect(() => {\n      setCount(countCodePointsInString(props.value ?? ''))\n    }, [props.value])\n\n    const {\n      inputProps: ariaInputProps,\n      labelProps,\n      descriptionProps,\n      errorMessageProps,\n    } = useTextField(\n      {\n        inputElementType: 'textarea',\n        isDisabled: disabled,\n        isRequired: required,\n        validationState: invalid ? 'invalid' : 'valid',\n        description: !invalid && assistiveText,\n        errorMessage: invalid && assistiveText,\n        onChange: handleChange,\n        ...props,\n      },\n      ariaRef\n    )\n\n    useEffect(() => {\n      if (autoHeight && textareaRef.current !== null) {\n        syncHeight(textareaRef.current)\n      }\n    }, [autoHeight, syncHeight])\n\n    const containerRef = useRef(null)\n\n    useFocusWithClick(containerRef, ariaRef)\n\n    const inputProps = mergeProps(restProps, ariaInputProps)\n\n    return (\n      <TextFieldRoot className={className} isDisabled={disabled}>\n        <TextFieldLabel\n          label={label}\n          requiredText={requiredText}\n          required={required}\n          subLabel={subLabel}\n          {...labelProps}\n          {...(!showLabel ? visuallyHiddenProps : {})}\n        />\n        <StyledTextareaContainer\n          ref={containerRef}\n          invalid={invalid}\n          rows={showCount ? rows + 1 : rows}\n          aria-disabled={disabled === true ? 'true' : undefined}\n        >\n          <StyledTextarea\n            ref={mergeRefs(textareaRef, forwardRef, ariaRef)}\n            rows={rows}\n            noBottomPadding={showCount}\n            {...inputProps}\n          />\n          {showCount && (\n            <MultiLineCounter>\n              {maxLength !== undefined ? `${count}/${maxLength}` : count}\n            </MultiLineCounter>\n          )}\n        </StyledTextareaContainer>\n        {assistiveText != null && assistiveText.length !== 0 && (\n          <AssistiveText\n            invalid={invalid}\n            {...(invalid ? errorMessageProps : descriptionProps)}\n          >\n            {assistiveText}\n          </AssistiveText>\n        )}\n      </TextFieldRoot>\n    )\n  }\n)\n\nexport default TextArea\n\nconst TextFieldRoot = styled.div<{ isDisabled: boolean }>`\n  display: flex;\n  flex-direction: column;\n\n  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}\n`\n\nconst StyledTextareaContainer = styled.div<{ rows: number; invalid: boolean }>`\n  position: relative;\n  overflow: hidden;\n\n  color: var(--charcoal-text2);\n  background-color: var(--charcoal-surface3);\n  border-radius: 4px;\n  transition: 0.2s background-color, 0.2s box-shadow;\n\n  ${({ rows }) => css`\n    height: calc(22px * ${rows} + 18px);\n  `};\n\n  :not([aria-disabled]):hover,\n  [aria-disabled='false']:hover {\n    background-color: var(--charcoal-surface3-hover);\n  }\n  :focus-within {\n    outline: none;\n    box-shadow: 0 0 0 4px\n      ${(p) => (p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`)};\n  }\n\n  ${(p) =>\n    p.invalid &&\n    css`\n      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n    `}\n`\n\nconst StyledTextarea = styled.textarea<{ noBottomPadding: boolean }>`\n  border: none;\n  outline: none;\n  resize: none;\n  font-family: inherit;\n  color: inherit;\n  box-sizing: border-box;\n\n  /* Prevent zooming for iOS Safari */\n  transform-origin: top left;\n  transform: scale(0.875);\n  width: calc(100% / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding: calc(9px / 0.875) calc(8px / 0.875)\n    ${(p) => (p.noBottomPadding ? 0 : '')};\n\n  ${({ rows = 1, noBottomPadding }) => css`\n    height: calc(22px / 0.875 * ${rows} + ${noBottomPadding ? 9 : 20}px);\n  `};\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n\n  background: none;\n\n  &::placeholder {\n    color: var(--charcoal-text3);\n  }\n`\n\nconst MultiLineCounter = styled.span`\n  position: absolute;\n  bottom: 9px;\n  right: 8px;\n\n  line-height: 22px;\n  font-size: 14px;\n  color: var(--charcoal-text3);\n`\n","import { useTextField } from '@react-aria/textfield'\nimport { useVisuallyHidden } from '@react-aria/visually-hidden'\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport styled, { css } from 'styled-components'\nimport FieldLabel, { FieldLabelProps } from '../FieldLabel'\nimport { countCodePointsInString, mergeRefs } from '../../_lib'\nimport { ReactAreaUseTextFieldCompat } from '../../_lib/compat'\nimport { useFocusWithClick } from './useFocusWithClick'\nimport { mergeProps } from '@react-aria/utils'\n\ntype DOMProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  // react-ariaのhookは、onChangeが`(v: string) => void`想定\n  | 'onChange'\n\n  // RDFa Attributeとかぶる\n  // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/58d57ca87ac7be0d306c0844dc254e90c150bd0d/types/react/index.d.ts#L1951\n  | 'prefix'\n\n  // ReactAreaUseTextFieldCompatに書いてあるような事情で、ここにあるイベントハンドラの型をゆるめる\n  | keyof ReactAreaUseTextFieldCompat\n>\n\nexport interface TextFieldProps\n  extends Pick<FieldLabelProps, 'label' | 'requiredText' | 'subLabel'>,\n    DOMProps,\n    ReactAreaUseTextFieldCompat {\n  readonly prefix?: ReactNode\n  readonly suffix?: ReactNode\n\n  // <input> 要素は number とか string[] もありうるが、今はこれしか想定してない\n  readonly defaultValue?: string\n  readonly value?: string\n  readonly onChange?: (value: string) => void\n\n  // react-ariaの型定義のせいでHTMLInputElementにできない\n  readonly onKeyDown?: (event: React.KeyboardEvent<Element>) => void\n  readonly onFocus?: (event: React.FocusEvent<Element>) => void\n  readonly onBlur?: (event: React.FocusEvent<Element>) => void\n\n  readonly showCount?: boolean\n  readonly showLabel?: boolean\n  readonly assistiveText?: string\n  readonly invalid?: boolean\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  function SingleLineTextFieldInner({ onChange, ...props }, forwardRef) {\n    const {\n      className,\n      showLabel = false,\n      showCount = false,\n      label,\n      requiredText,\n      subLabel,\n      disabled = false,\n      required,\n      invalid = false,\n      assistiveText,\n      maxLength,\n      prefix = null,\n      suffix = null,\n      ...restProps\n    } = props\n\n    const { visuallyHiddenProps } = useVisuallyHidden()\n    const ariaRef = useRef<HTMLInputElement>(null)\n    const [count, setCount] = useState(\n      countCodePointsInString(props.value ?? '')\n    )\n\n    const nonControlled = props.value === undefined\n    const handleChange = useCallback(\n      (value: string) => {\n        const count = countCodePointsInString(value)\n        if (maxLength !== undefined && count > maxLength) {\n          return\n        }\n        if (nonControlled) {\n          setCount(count)\n        }\n        onChange?.(value)\n      },\n      [maxLength, nonControlled, onChange]\n    )\n\n    useEffect(() => {\n      setCount(countCodePointsInString(props.value ?? ''))\n    }, [props.value])\n\n    const {\n      inputProps: ariaInputProps,\n      labelProps,\n      descriptionProps,\n      errorMessageProps,\n    } = useTextField(\n      {\n        inputElementType: 'input',\n        isDisabled: disabled,\n        isRequired: required,\n        validationState: invalid ? 'invalid' : 'valid',\n        description: !invalid && assistiveText,\n        errorMessage: invalid && assistiveText,\n        onChange: handleChange,\n        ...props,\n      },\n      ariaRef\n    )\n\n    const containerRef = useRef(null)\n\n    useFocusWithClick(containerRef, ariaRef)\n\n    const inputProps = mergeProps(restProps, ariaInputProps)\n\n    return (\n      <TextFieldRoot className={className} isDisabled={disabled}>\n        <TextFieldLabel\n          label={label}\n          requiredText={requiredText}\n          required={required}\n          subLabel={subLabel}\n          {...labelProps}\n          {...(!showLabel ? visuallyHiddenProps : {})}\n        />\n        <StyledInputContainer\n          ref={containerRef}\n          invalid={invalid}\n          aria-disabled={disabled === true ? true : undefined}\n          hasPrefix={prefix != null}\n          hasSuffix={suffix != null || showCount}\n        >\n          {prefix && <PrefixContainer>{prefix}</PrefixContainer>}\n          <StyledInput\n            ref={mergeRefs(forwardRef, ariaRef)}\n            invalid={invalid}\n            {...inputProps}\n          />\n          {(suffix || showCount) && (\n            <SuffixContainer>\n              {suffix}\n              {showCount && (\n                <SingleLineCounter>\n                  {maxLength !== undefined ? `${count}/${maxLength}` : count}\n                </SingleLineCounter>\n              )}\n            </SuffixContainer>\n          )}\n        </StyledInputContainer>\n        {assistiveText != null && assistiveText.length !== 0 && (\n          <AssistiveText\n            invalid={invalid}\n            {...(invalid ? errorMessageProps : descriptionProps)}\n          >\n            {assistiveText}\n          </AssistiveText>\n        )}\n      </TextFieldRoot>\n    )\n  }\n)\n\nexport default TextField\n\nconst TextFieldRoot = styled.div<{ isDisabled: boolean }>`\n  display: flex;\n  flex-direction: column;\n\n  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}\n`\n\nexport const TextFieldLabel = styled(FieldLabel)`\n  margin-bottom: 8px;\n`\n\nconst StyledInputContainer = styled.div<{\n  invalid: boolean\n  hasPrefix: boolean\n  hasSuffix: boolean\n}>`\n  display: grid;\n  grid-template-columns: ${(p) =>\n    [p.hasPrefix && 'auto', '1fr', p.hasSuffix && 'auto']\n      .filter(Boolean)\n      .join(' ')};\n  height: 40px;\n  transition: 0.2s background-color, 0.2s box-shadow;\n  color: var(--charcoal-text2);\n  background-color: var(--charcoal-surface3);\n  border-radius: 4px;\n  gap: 4px;\n  padding: 0 8px;\n  line-height: 22px;\n  font-size: 14px;\n\n  :not(:disabled):not([aria-disabled]):hover,\n  [aria-disabled='false']:hover {\n    background-color: var(--charcoal-surface3-hover);\n  }\n\n  :focus-within {\n    outline: none;\n    box-shadow: 0 0 0 4px\n      ${(p) => (p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`)};\n  }\n\n  ${(p) =>\n    p.invalid &&\n    css`\n      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n    `}\n`\n\nconst PrefixContainer = styled.div`\n  display: flex;\n  align-items: center;\n`\n\nconst SuffixContainer = styled.span`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n`\n\nconst StyledInput = styled.input<{\n  invalid: boolean\n}>`\n  border: none;\n  box-sizing: border-box;\n  outline: none;\n  font-family: inherit;\n\n  /* Prevent zooming for iOS Safari */\n  transform-origin: top left;\n  transform: scale(0.875);\n  width: calc(100% / 0.875);\n  height: calc(100% / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding-left: 0;\n  padding-right: 0;\n  border-radius: calc(4px / 0.875);\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n  background: transparent;\n\n  color: var(--charcoal-text2);\n  &::placeholder {\n    color: var(--charcoal-text3);\n  }\n`\n\nconst SingleLineCounter = styled.span`\n  line-height: 22px;\n  font-size: 14px;\n  color: var(--charcoal-text3);\n`\n\nexport const AssistiveText = styled.p<{ invalid: boolean }>`\n  font-size: 14px;\n  line-height: 22px;\n  margin-top: 4px;\n  margin-bottom: -4px;\n  color: ${(p) => `var(--charcoal-${p.invalid ? `assertive` : `text2`})`};\n`\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/react-src-components-TextField-TextField-story.f59ab630.iframe.bundle.js b/react-src-components-TextField-TextField-story.f9a71023.iframe.bundle.js
similarity index 99%
rename from react-src-components-TextField-TextField-story.f59ab630.iframe.bundle.js
rename to react-src-components-TextField-TextField-story.f9a71023.iframe.bundle.js
index 19395a310..45591a6f5 100644
--- a/react-src-components-TextField-TextField-story.f59ab630.iframe.bundle.js
+++ b/react-src-components-TextField-TextField-story.f9a71023.iframe.bundle.js
@@ -245,5 +245,5 @@
   margin-top: 4px;
   margin-bottom: -4px;
   color: ${p=>`var(--charcoal-${p.invalid?"assertive":"text2"})`};
-`;try{TextField.displayName="TextField",TextField.__docgenInfo={description:"",displayName:"TextField",props:{prefix:{defaultValue:null,description:"",name:"prefix",required:!1,type:{name:"ReactNode"}},suffix:{defaultValue:null,description:"",name:"suffix",required:!1,type:{name:"ReactNode"}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"string"}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"string"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"((value: string) => void)"}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"((event: KeyboardEvent<Element>) => void)"}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"((event: FocusEvent<Element, Element>) => void)"}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"((event: FocusEvent<Element, Element>) => void)"}},showCount:{defaultValue:null,description:"",name:"showCount",required:!1,type:{name:"boolean"}},showLabel:{defaultValue:null,description:"",name:"showLabel",required:!1,type:{name:"boolean"}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"string"}},invalid:{defaultValue:null,description:"",name:"invalid",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string"}},requiredText:{defaultValue:null,description:"",name:"requiredText",required:!1,type:{name:"string"}},subLabel:{defaultValue:null,description:"",name:"subLabel",required:!1,type:{name:"ReactNode"}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onCompositionStart:{defaultValue:null,description:"",name:"onCompositionStart",required:!1,type:{name:"CompositionEventHandler<Element>"}},onCompositionEnd:{defaultValue:null,description:"",name:"onCompositionEnd",required:!1,type:{name:"CompositionEventHandler<Element>"}},onCompositionUpdate:{defaultValue:null,description:"",name:"onCompositionUpdate",required:!1,type:{name:"CompositionEventHandler<Element>"}},onSelect:{defaultValue:null,description:"",name:"onSelect",required:!1,type:{name:"ReactEventHandler<Element>"}},onBeforeInput:{defaultValue:null,description:"",name:"onBeforeInput",required:!1,type:{name:"FormEventHandler<Element>"}},onInput:{defaultValue:null,description:"",name:"onInput",required:!1,type:{name:"FormEventHandler<Element>"}},autoCapitalize:{defaultValue:null,description:"",name:"autoCapitalize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"on"'},{value:'"off"'},{value:'"sentences"'},{value:'"words"'},{value:'"characters"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#TextField"]={docgenInfo:TextField.__docgenInfo,name:"TextField",path:"packages/react/src/components/TextField/index.tsx#TextField"})}catch(__react_docgen_typescript_loader_error){}try{TextFieldLabel.displayName="TextFieldLabel",TextFieldLabel.__docgenInfo={description:"",displayName:"TextFieldLabel",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string"}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"boolean"}},requiredText:{defaultValue:null,description:"",name:"requiredText",required:!1,type:{name:"string"}},subLabel:{defaultValue:null,description:"",name:"subLabel",required:!1,type:{name:"ReactNode"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#TextFieldLabel"]={docgenInfo:TextFieldLabel.__docgenInfo,name:"TextFieldLabel",path:"packages/react/src/components/TextField/index.tsx#TextFieldLabel"})}catch(__react_docgen_typescript_loader_error){}try{AssistiveText.displayName="AssistiveText",AssistiveText.__docgenInfo={description:"",displayName:"AssistiveText",props:{ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"((instance: HTMLParagraphElement | null) => void) | RefObject<HTMLParagraphElement> | null"}},invalid:{defaultValue:null,description:"",name:"invalid",required:!0,type:{name:"boolean"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#AssistiveText"]={docgenInfo:AssistiveText.__docgenInfo,name:"AssistiveText",path:"packages/react/src/components/TextField/index.tsx#AssistiveText"})}catch(__react_docgen_typescript_loader_error){}},"./packages/react/src/components/TextField/useFocusWithClick.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Q:()=>useFocusWithClick});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");function useFocusWithClick(containerRef,inputRef){(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{const el=containerRef.current;if(el){const handleDown=e=>{e.target!==inputRef.current&&inputRef.current?.focus()};return el.addEventListener("click",handleDown),()=>{el.removeEventListener("click",handleDown)}}}))}}}]);
-//# sourceMappingURL=react-src-components-TextField-TextField-story.f59ab630.iframe.bundle.js.map
\ No newline at end of file
+`;try{TextField.displayName="TextField",TextField.__docgenInfo={description:"",displayName:"TextField",props:{prefix:{defaultValue:null,description:"",name:"prefix",required:!1,type:{name:"ReactNode"}},suffix:{defaultValue:null,description:"",name:"suffix",required:!1,type:{name:"ReactNode"}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"string"}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"string"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"((value: string) => void)"}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"((event: KeyboardEvent<Element>) => void)"}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"((event: FocusEvent<Element, Element>) => void)"}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"((event: FocusEvent<Element, Element>) => void)"}},showCount:{defaultValue:null,description:"",name:"showCount",required:!1,type:{name:"boolean"}},showLabel:{defaultValue:null,description:"",name:"showLabel",required:!1,type:{name:"boolean"}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"string"}},invalid:{defaultValue:null,description:"",name:"invalid",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string"}},requiredText:{defaultValue:null,description:"",name:"requiredText",required:!1,type:{name:"string"}},subLabel:{defaultValue:null,description:"",name:"subLabel",required:!1,type:{name:"ReactNode"}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"ClipboardEventHandler<Element>"}},onCompositionStart:{defaultValue:null,description:"",name:"onCompositionStart",required:!1,type:{name:"CompositionEventHandler<Element>"}},onCompositionEnd:{defaultValue:null,description:"",name:"onCompositionEnd",required:!1,type:{name:"CompositionEventHandler<Element>"}},onCompositionUpdate:{defaultValue:null,description:"",name:"onCompositionUpdate",required:!1,type:{name:"CompositionEventHandler<Element>"}},onSelect:{defaultValue:null,description:"",name:"onSelect",required:!1,type:{name:"ReactEventHandler<Element>"}},onBeforeInput:{defaultValue:null,description:"",name:"onBeforeInput",required:!1,type:{name:"FormEventHandler<Element>"}},onInput:{defaultValue:null,description:"",name:"onInput",required:!1,type:{name:"FormEventHandler<Element>"}},autoCapitalize:{defaultValue:null,description:"",name:"autoCapitalize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"on"'},{value:'"off"'},{value:'"sentences"'},{value:'"words"'},{value:'"characters"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#TextField"]={docgenInfo:TextField.__docgenInfo,name:"TextField",path:"packages/react/src/components/TextField/index.tsx#TextField"})}catch(__react_docgen_typescript_loader_error){}try{TextFieldLabel.displayName="TextFieldLabel",TextFieldLabel.__docgenInfo={description:"",displayName:"TextFieldLabel",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string"}},requiredText:{defaultValue:null,description:"",name:"requiredText",required:!1,type:{name:"string"}},subLabel:{defaultValue:null,description:"",name:"subLabel",required:!1,type:{name:"ReactNode"}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"boolean"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#TextFieldLabel"]={docgenInfo:TextFieldLabel.__docgenInfo,name:"TextFieldLabel",path:"packages/react/src/components/TextField/index.tsx#TextFieldLabel"})}catch(__react_docgen_typescript_loader_error){}try{AssistiveText.displayName="AssistiveText",AssistiveText.__docgenInfo={description:"",displayName:"AssistiveText",props:{ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"((instance: HTMLParagraphElement | null) => void) | RefObject<HTMLParagraphElement> | null"}},invalid:{defaultValue:null,description:"",name:"invalid",required:!0,type:{name:"boolean"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["packages/react/src/components/TextField/index.tsx#AssistiveText"]={docgenInfo:AssistiveText.__docgenInfo,name:"AssistiveText",path:"packages/react/src/components/TextField/index.tsx#AssistiveText"})}catch(__react_docgen_typescript_loader_error){}},"./packages/react/src/components/TextField/useFocusWithClick.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Q:()=>useFocusWithClick});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");function useFocusWithClick(containerRef,inputRef){(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{const el=containerRef.current;if(el){const handleDown=e=>{e.target!==inputRef.current&&inputRef.current?.focus()};return el.addEventListener("click",handleDown),()=>{el.removeEventListener("click",handleDown)}}}))}}}]);
+//# sourceMappingURL=react-src-components-TextField-TextField-story.f9a71023.iframe.bundle.js.map
\ No newline at end of file
diff --git a/react-src-components-TextField-TextField-story.f59ab630.iframe.bundle.js.map b/react-src-components-TextField-TextField-story.f9a71023.iframe.bundle.js.map
similarity index 99%
rename from react-src-components-TextField-TextField-story.f59ab630.iframe.bundle.js.map
rename to react-src-components-TextField-TextField-story.f9a71023.iframe.bundle.js.map
index e91012e91..cc914a1d2 100644
--- a/react-src-components-TextField-TextField-story.f59ab630.iframe.bundle.js.map
+++ b/react-src-components-TextField-TextField-story.f9a71023.iframe.bundle.js.map
@@ -1 +1 @@
-{"version":3,"file":"react-src-components-TextField-TextField-story.f59ab630.iframe.bundle.js","mappings":";;;;;;;;;;AAqDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACYA;;;;;;;;;;;;;;;;;;;;AAsBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA;;;;AAIA;;;;AAIA;;;;;;AC3EA;AACA;;;;AAIA;AACA;;;;;;AAMA;AAGA;AACA;AACA;;AAGA;AACA;;;AAGA;AACA;;;AAGA;;;;;;;AAgBA;;;;ACkEA;AAGA;;AAIA;;AAMA;;;;;;;;;;;;;;;;;;;AAsBA;;;AAGA;;;AAOA;;;AAKA;;;;AAMA;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;;;;AAMA;;;;;AAKA","sources":["webpack://charcoal-ui/./packages/react/src/components/Clickable/index.tsx","webpack://charcoal-ui/./packages/react/src/components/FieldLabel/index.tsx","webpack://charcoal-ui/./packages/react/src/components/IconButton/index.tsx","webpack://charcoal-ui/./packages/react/src/components/TextField/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport styled from 'styled-components'\nimport {\n  LinkProps,\n  useComponentAbstraction,\n} from '../../core/ComponentAbstraction'\nimport { disabledSelector } from '@charcoal-ui/utils'\n\ninterface BaseProps {\n  /**\n   * クリックの無効化\n   */\n  disabled?: boolean\n}\n\ninterface LinkBaseProps {\n  /**\n   * リンクのURL。指定するとbuttonタグではなくaタグとして描画される\n   */\n  to: string\n}\n\nexport type ClickableProps =\n  | (BaseProps & Omit<React.ComponentPropsWithoutRef<'button'>, 'disabled'>)\n  | (BaseProps & LinkBaseProps & Omit<LinkProps, 'to'>)\nexport type ClickableElement = HTMLButtonElement & HTMLAnchorElement\n\nconst Clickable = React.forwardRef<ClickableElement, ClickableProps>(\n  function Clickable(props, ref) {\n    const { Link } = useComponentAbstraction()\n    const isLink = 'to' in props\n    const as = isLink ? Link : 'button'\n    const ariaDisabled = isLink && props.disabled === true ? true : undefined\n    let rest = props\n    if (isLink) {\n      const { disabled, ..._rest } = props\n      rest = _rest\n    }\n    return (\n      <StyledClickableDiv\n        {...rest}\n        ref={ref}\n        as={as}\n        aria-disabled={ariaDisabled}\n      />\n    )\n  }\n)\nexport default Clickable\n\nconst StyledClickableDiv = styled.div`\n  cursor: pointer;\n\n  ${disabledSelector} {\n    cursor: default;\n  }\n\n  /* Reset button appearance */\n  appearance: none;\n  background: transparent;\n  padding: 0;\n  border-style: none;\n  outline: none;\n  color: inherit;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n  text-decoration: none;\n\n  &:focus {\n    outline: none;\n  }\n\n  /* Change the font styles in all browsers. */\n  font: inherit;\n\n  /* Remove the margin in Firefox and Safari. */\n  margin: 0;\n\n  /* Show the overflow in Edge. */\n  overflow: visible;\n\n  /* Remove the inheritance of text transform in Firefox. */\n  text-transform: none;\n\n  /* Remove the inner border and padding in Firefox. */\n  &::-moz-focus-inner {\n    border-style: none;\n    padding: 0;\n  }\n`\n","import * as React from 'react'\nimport styled from 'styled-components'\n\nexport interface FieldLabelProps\n  extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  readonly className?: string\n  readonly label: string\n  readonly subLabel?: React.ReactNode\n  readonly required?: boolean\n  // TODO: 翻訳用のContextで注入する\n  readonly requiredText?: string\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  function FieldLabel(\n    {\n      style,\n      className,\n      label,\n      required = false,\n      requiredText,\n      subLabel,\n      ...labelProps\n    },\n    ref\n  ) {\n    return (\n      <FieldLabelWrapper style={style} className={className}>\n        <Label ref={ref} {...labelProps}>\n          {label}\n        </Label>\n        {required && <RequiredText>{requiredText}</RequiredText>}\n        <SubLabelClickable>\n          <span>{subLabel}</span>\n        </SubLabelClickable>\n      </FieldLabelWrapper>\n    )\n  }\n)\n\nexport default FieldLabel\n\nconst Label = styled.label`\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: bold;\n  display: flow-root;\n  color: var(--charcoal-text1);\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nconst RequiredText = styled.span`\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-text2);\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nconst SubLabelClickable = styled.div`\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-text3);\n  transition: 0.2s color, 0.2s box-shadow;\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n\n  &:not(:disabled):not([aria-disabled]),\n  &[aria-disabled='false'] {\n    &:hover {\n      color: var(--charcoal-text3-hover);\n    }\n    &:active {\n      color: var(--charcoal-text3-press);\n    }\n    &:active,\n    &:focus,\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n    }\n  }\n`\n\nconst FieldLabelWrapper = styled.div`\n  display: inline-flex;\n  align-items: center;\n\n  > ${RequiredText} {\n    margin-left: 4px;\n  }\n\n  > ${SubLabelClickable} {\n    margin-left: auto;\n  }\n`\n","import { forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport Clickable, { ClickableElement, ClickableProps } from '../Clickable'\nimport type { KnownIconType } from '@charcoal-ui/icons'\nimport { focusVisibleFocusRingCss } from '@charcoal-ui/styled'\n\ntype Variant = 'Default' | 'Overlay'\ntype Size = 'XS' | 'S' | 'M'\n\ninterface StyledProps {\n  readonly variant?: Variant\n  readonly size?: Size\n  readonly icon: keyof KnownIconType\n  readonly isActive?: boolean\n}\n\nexport type IconButtonProps = StyledProps & ClickableProps\n\nconst IconButton = forwardRef<ClickableElement, IconButtonProps>(\n  function IconButtonInner(\n    {\n      variant = 'Default',\n      size = 'M',\n      icon,\n      isActive = false,\n      ...rest\n    }: IconButtonProps,\n    ref\n  ) {\n    validateIconSize(size, icon)\n    return (\n      <StyledIconButton\n        {...rest}\n        ref={ref}\n        $size={size}\n        $variant={variant}\n        $isActive={isActive}\n      >\n        <pixiv-icon name={icon} />\n      </StyledIconButton>\n    )\n  }\n)\n\nexport default IconButton\n\ntype StyledIconButtonProps = Required<{\n  [key in keyof Pick<\n    StyledProps,\n    'size' | 'variant' | 'isActive'\n  > as `$${key}`]: StyledProps[key]\n}>\n\nconst StyledIconButton = styled(Clickable).attrs<\n  StyledIconButtonProps,\n  ReturnType<typeof styledProps>\n>(styledProps)<StyledIconButtonProps>`\n  user-select: none;\n\n  width: ${(p) => p.$width}px;\n  height: ${(p) => p.$height}px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(${({ $font }) => `--charcoal-${$font}`});\n  background-color: var(${({ $background }) => `--charcoal-${$background}`});\n  border-radius: 999999px;\n  transition: 0.2s background-color, 0.2s box-shadow;\n\n  &:not(:disabled):not([aria-disabled]),\n  &[aria-disabled='false'] {\n    ${({ $isActive, $background, $font }) =>\n      $isActive\n        ? css`\n            color: var(--charcoal-${$font}-press);\n            background-color: var(--charcoal-${$background}-press);\n          `\n        : css`\n            &:hover {\n              color: var(--charcoal-${$font}-hover);\n              background-color: var(--charcoal-${$background}-hover);\n            }\n            &:active {\n              color: var(--charcoal-${$font}-press);\n              background-color: var(--charcoal-${$background}-press);\n            }\n          `}\n    ${focusVisibleFocusRingCss}\n  }\n\n  &:disabled,\n  &[aria-disabled]:not([aria-disabled='false']) {\n    opacity: 0.32;\n  }\n`\n\nfunction styledProps({ $size, $variant }: StyledIconButtonProps) {\n  return {\n    ...variantToProps($variant),\n    ...sizeToProps($size),\n  }\n}\n\nfunction variantToProps(variant: Variant) {\n  switch (variant) {\n    case 'Default':\n      return { $font: 'text3', $background: 'transparent' } as const\n    case 'Overlay':\n      return { $font: 'text5', $background: 'surface4' } as const\n  }\n}\n\nfunction sizeToProps(size: Size) {\n  switch (size) {\n    case 'XS':\n      return {\n        $width: 20,\n        $height: 20,\n      }\n    case 'S':\n      return {\n        $width: 32,\n        $height: 32,\n      }\n    case 'M':\n      return {\n        $width: 40,\n        $height: 40,\n      }\n  }\n}\n\n/**\n * validates matches of size and icon\n */\nfunction validateIconSize(size: Size, icon: keyof KnownIconType) {\n  let requiredIconSize: string\n  switch (size) {\n    case 'XS':\n      requiredIconSize = '16'\n      break\n    case 'S':\n    case 'M':\n      requiredIconSize = '24'\n      break\n  }\n  // アイコン名は サイズ/名前\n  const result = /^\\d*/u.exec(icon)\n  if (result == null) {\n    throw new Error('Invalid icon name')\n  }\n  const [iconSize] = result\n  if (iconSize !== requiredIconSize) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `IconButton with size \"${size}\" expect icon size \"${requiredIconSize}, but got \"${iconSize}\"`\n    )\n  }\n}\n","import { useTextField } from '@react-aria/textfield'\nimport { useVisuallyHidden } from '@react-aria/visually-hidden'\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport styled, { css } from 'styled-components'\nimport FieldLabel, { FieldLabelProps } from '../FieldLabel'\nimport { countCodePointsInString, mergeRefs } from '../../_lib'\nimport { ReactAreaUseTextFieldCompat } from '../../_lib/compat'\nimport { useFocusWithClick } from './useFocusWithClick'\nimport { mergeProps } from '@react-aria/utils'\n\ntype DOMProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  // react-ariaのhookは、onChangeが`(v: string) => void`想定\n  | 'onChange'\n\n  // RDFa Attributeとかぶる\n  // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/58d57ca87ac7be0d306c0844dc254e90c150bd0d/types/react/index.d.ts#L1951\n  | 'prefix'\n\n  // ReactAreaUseTextFieldCompatに書いてあるような事情で、ここにあるイベントハンドラの型をゆるめる\n  | keyof ReactAreaUseTextFieldCompat\n>\n\nexport interface TextFieldProps\n  extends Pick<FieldLabelProps, 'label' | 'requiredText' | 'subLabel'>,\n    DOMProps,\n    ReactAreaUseTextFieldCompat {\n  readonly prefix?: ReactNode\n  readonly suffix?: ReactNode\n\n  // <input> 要素は number とか string[] もありうるが、今はこれしか想定してない\n  readonly defaultValue?: string\n  readonly value?: string\n  readonly onChange?: (value: string) => void\n\n  // react-ariaの型定義のせいでHTMLInputElementにできない\n  readonly onKeyDown?: (event: React.KeyboardEvent<Element>) => void\n  readonly onFocus?: (event: React.FocusEvent<Element>) => void\n  readonly onBlur?: (event: React.FocusEvent<Element>) => void\n\n  readonly showCount?: boolean\n  readonly showLabel?: boolean\n  readonly assistiveText?: string\n  readonly invalid?: boolean\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  function SingleLineTextFieldInner({ onChange, ...props }, forwardRef) {\n    const {\n      className,\n      showLabel = false,\n      showCount = false,\n      label,\n      requiredText,\n      subLabel,\n      disabled = false,\n      required,\n      invalid = false,\n      assistiveText,\n      maxLength,\n      prefix = null,\n      suffix = null,\n      ...restProps\n    } = props\n\n    const { visuallyHiddenProps } = useVisuallyHidden()\n    const ariaRef = useRef<HTMLInputElement>(null)\n    const [count, setCount] = useState(\n      countCodePointsInString(props.value ?? '')\n    )\n\n    const nonControlled = props.value === undefined\n    const handleChange = useCallback(\n      (value: string) => {\n        const count = countCodePointsInString(value)\n        if (maxLength !== undefined && count > maxLength) {\n          return\n        }\n        if (nonControlled) {\n          setCount(count)\n        }\n        onChange?.(value)\n      },\n      [maxLength, nonControlled, onChange]\n    )\n\n    useEffect(() => {\n      setCount(countCodePointsInString(props.value ?? ''))\n    }, [props.value])\n\n    const {\n      inputProps: ariaInputProps,\n      labelProps,\n      descriptionProps,\n      errorMessageProps,\n    } = useTextField(\n      {\n        inputElementType: 'input',\n        isDisabled: disabled,\n        isRequired: required,\n        validationState: invalid ? 'invalid' : 'valid',\n        description: !invalid && assistiveText,\n        errorMessage: invalid && assistiveText,\n        onChange: handleChange,\n        ...props,\n      },\n      ariaRef\n    )\n\n    const containerRef = useRef(null)\n\n    useFocusWithClick(containerRef, ariaRef)\n\n    const inputProps = mergeProps(restProps, ariaInputProps)\n\n    return (\n      <TextFieldRoot className={className} isDisabled={disabled}>\n        <TextFieldLabel\n          label={label}\n          requiredText={requiredText}\n          required={required}\n          subLabel={subLabel}\n          {...labelProps}\n          {...(!showLabel ? visuallyHiddenProps : {})}\n        />\n        <StyledInputContainer\n          ref={containerRef}\n          invalid={invalid}\n          aria-disabled={disabled === true ? true : undefined}\n          hasPrefix={prefix != null}\n          hasSuffix={suffix != null || showCount}\n        >\n          {prefix && <PrefixContainer>{prefix}</PrefixContainer>}\n          <StyledInput\n            ref={mergeRefs(forwardRef, ariaRef)}\n            invalid={invalid}\n            {...inputProps}\n          />\n          {(suffix || showCount) && (\n            <SuffixContainer>\n              {suffix}\n              {showCount && (\n                <SingleLineCounter>\n                  {maxLength !== undefined ? `${count}/${maxLength}` : count}\n                </SingleLineCounter>\n              )}\n            </SuffixContainer>\n          )}\n        </StyledInputContainer>\n        {assistiveText != null && assistiveText.length !== 0 && (\n          <AssistiveText\n            invalid={invalid}\n            {...(invalid ? errorMessageProps : descriptionProps)}\n          >\n            {assistiveText}\n          </AssistiveText>\n        )}\n      </TextFieldRoot>\n    )\n  }\n)\n\nexport default TextField\n\nconst TextFieldRoot = styled.div<{ isDisabled: boolean }>`\n  display: flex;\n  flex-direction: column;\n\n  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}\n`\n\nexport const TextFieldLabel = styled(FieldLabel)`\n  margin-bottom: 8px;\n`\n\nconst StyledInputContainer = styled.div<{\n  invalid: boolean\n  hasPrefix: boolean\n  hasSuffix: boolean\n}>`\n  display: grid;\n  grid-template-columns: ${(p) =>\n    [p.hasPrefix && 'auto', '1fr', p.hasSuffix && 'auto']\n      .filter(Boolean)\n      .join(' ')};\n  height: 40px;\n  transition: 0.2s background-color, 0.2s box-shadow;\n  color: var(--charcoal-text2);\n  background-color: var(--charcoal-surface3);\n  border-radius: 4px;\n  gap: 4px;\n  padding: 0 8px;\n  line-height: 22px;\n  font-size: 14px;\n\n  :not(:disabled):not([aria-disabled]):hover,\n  [aria-disabled='false']:hover {\n    background-color: var(--charcoal-surface3-hover);\n  }\n\n  :focus-within {\n    outline: none;\n    box-shadow: 0 0 0 4px\n      ${(p) => (p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`)};\n  }\n\n  ${(p) =>\n    p.invalid &&\n    css`\n      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n    `}\n`\n\nconst PrefixContainer = styled.div`\n  display: flex;\n  align-items: center;\n`\n\nconst SuffixContainer = styled.span`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n`\n\nconst StyledInput = styled.input<{\n  invalid: boolean\n}>`\n  border: none;\n  box-sizing: border-box;\n  outline: none;\n  font-family: inherit;\n\n  /* Prevent zooming for iOS Safari */\n  transform-origin: top left;\n  transform: scale(0.875);\n  width: calc(100% / 0.875);\n  height: calc(100% / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding-left: 0;\n  padding-right: 0;\n  border-radius: calc(4px / 0.875);\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n  background: transparent;\n\n  color: var(--charcoal-text2);\n  &::placeholder {\n    color: var(--charcoal-text3);\n  }\n`\n\nconst SingleLineCounter = styled.span`\n  line-height: 22px;\n  font-size: 14px;\n  color: var(--charcoal-text3);\n`\n\nexport const AssistiveText = styled.p<{ invalid: boolean }>`\n  font-size: 14px;\n  line-height: 22px;\n  margin-top: 4px;\n  margin-bottom: -4px;\n  color: ${(p) => `var(--charcoal-${p.invalid ? `assertive` : `text2`})`};\n`\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"react-src-components-TextField-TextField-story.f9a71023.iframe.bundle.js","mappings":";;;;;;;;;;AAqDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACYA;;;;;;;;;;;;;;;;;;;;AAsBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA;;;;AAIA;;;;AAIA;;;;;;AC3EA;AACA;;;;AAIA;AACA;;;;;;AAMA;AAGA;AACA;AACA;;AAGA;AACA;;;AAGA;AACA;;;AAGA;;;;;;;AAgBA;;;;ACkEA;AAGA;;AAIA;;AAMA;;;;;;;;;;;;;;;;;;;AAsBA;;;AAGA;;;AAOA;;;AAKA;;;;AAMA;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;;;;AAMA;;;;;AAKA","sources":["webpack://charcoal-ui/./packages/react/src/components/Clickable/index.tsx","webpack://charcoal-ui/./packages/react/src/components/FieldLabel/index.tsx","webpack://charcoal-ui/./packages/react/src/components/IconButton/index.tsx","webpack://charcoal-ui/./packages/react/src/components/TextField/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport styled from 'styled-components'\nimport {\n  LinkProps,\n  useComponentAbstraction,\n} from '../../core/ComponentAbstraction'\nimport { disabledSelector } from '@charcoal-ui/utils'\n\ninterface BaseProps {\n  /**\n   * クリックの無効化\n   */\n  disabled?: boolean\n}\n\ninterface LinkBaseProps {\n  /**\n   * リンクのURL。指定するとbuttonタグではなくaタグとして描画される\n   */\n  to: string\n}\n\nexport type ClickableProps =\n  | (BaseProps & Omit<React.ComponentPropsWithoutRef<'button'>, 'disabled'>)\n  | (BaseProps & LinkBaseProps & Omit<LinkProps, 'to'>)\nexport type ClickableElement = HTMLButtonElement & HTMLAnchorElement\n\nconst Clickable = React.forwardRef<ClickableElement, ClickableProps>(\n  function Clickable(props, ref) {\n    const { Link } = useComponentAbstraction()\n    const isLink = 'to' in props\n    const as = isLink ? Link : 'button'\n    const ariaDisabled = isLink && props.disabled === true ? true : undefined\n    let rest = props\n    if (isLink) {\n      const { disabled, ..._rest } = props\n      rest = _rest\n    }\n    return (\n      <StyledClickableDiv\n        {...rest}\n        ref={ref}\n        as={as}\n        aria-disabled={ariaDisabled}\n      />\n    )\n  }\n)\nexport default Clickable\n\nconst StyledClickableDiv = styled.div`\n  cursor: pointer;\n\n  ${disabledSelector} {\n    cursor: default;\n  }\n\n  /* Reset button appearance */\n  appearance: none;\n  background: transparent;\n  padding: 0;\n  border-style: none;\n  outline: none;\n  color: inherit;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n  text-decoration: none;\n\n  &:focus {\n    outline: none;\n  }\n\n  /* Change the font styles in all browsers. */\n  font: inherit;\n\n  /* Remove the margin in Firefox and Safari. */\n  margin: 0;\n\n  /* Show the overflow in Edge. */\n  overflow: visible;\n\n  /* Remove the inheritance of text transform in Firefox. */\n  text-transform: none;\n\n  /* Remove the inner border and padding in Firefox. */\n  &::-moz-focus-inner {\n    border-style: none;\n    padding: 0;\n  }\n`\n","import * as React from 'react'\nimport styled from 'styled-components'\n\nexport interface FieldLabelProps\n  extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  readonly className?: string\n  readonly label: string\n  readonly subLabel?: React.ReactNode\n  readonly required?: boolean\n  // TODO: 翻訳用のContextで注入する\n  readonly requiredText?: string\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  function FieldLabel(\n    {\n      style,\n      className,\n      label,\n      required = false,\n      requiredText,\n      subLabel,\n      ...labelProps\n    },\n    ref\n  ) {\n    return (\n      <FieldLabelWrapper style={style} className={className}>\n        <Label ref={ref} {...labelProps}>\n          {label}\n        </Label>\n        {required && <RequiredText>{requiredText}</RequiredText>}\n        <SubLabelClickable>\n          <span>{subLabel}</span>\n        </SubLabelClickable>\n      </FieldLabelWrapper>\n    )\n  }\n)\n\nexport default FieldLabel\n\nconst Label = styled.label`\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: bold;\n  display: flow-root;\n  color: var(--charcoal-text1);\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nconst RequiredText = styled.span`\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-text2);\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nconst SubLabelClickable = styled.div`\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-text3);\n  transition: 0.2s color, 0.2s box-shadow;\n\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n\n  &:not(:disabled):not([aria-disabled]),\n  &[aria-disabled='false'] {\n    &:hover {\n      color: var(--charcoal-text3-hover);\n    }\n    &:active {\n      color: var(--charcoal-text3-press);\n    }\n    &:active,\n    &:focus,\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n    }\n  }\n`\n\nconst FieldLabelWrapper = styled.div`\n  display: inline-flex;\n  align-items: center;\n\n  > ${RequiredText} {\n    margin-left: 4px;\n  }\n\n  > ${SubLabelClickable} {\n    margin-left: auto;\n  }\n`\n","import { forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport Clickable, { ClickableElement, ClickableProps } from '../Clickable'\nimport type { KnownIconType } from '@charcoal-ui/icons'\nimport { focusVisibleFocusRingCss } from '@charcoal-ui/styled'\n\ntype Variant = 'Default' | 'Overlay'\ntype Size = 'XS' | 'S' | 'M'\n\ninterface StyledProps {\n  readonly variant?: Variant\n  readonly size?: Size\n  readonly icon: keyof KnownIconType\n  readonly isActive?: boolean\n}\n\nexport type IconButtonProps = StyledProps & ClickableProps\n\nconst IconButton = forwardRef<ClickableElement, IconButtonProps>(\n  function IconButtonInner(\n    {\n      variant = 'Default',\n      size = 'M',\n      icon,\n      isActive = false,\n      ...rest\n    }: IconButtonProps,\n    ref\n  ) {\n    validateIconSize(size, icon)\n    return (\n      <StyledIconButton\n        {...rest}\n        ref={ref}\n        $size={size}\n        $variant={variant}\n        $isActive={isActive}\n      >\n        <pixiv-icon name={icon} />\n      </StyledIconButton>\n    )\n  }\n)\n\nexport default IconButton\n\ntype StyledIconButtonProps = Required<{\n  [key in keyof Pick<\n    StyledProps,\n    'size' | 'variant' | 'isActive'\n  > as `$${key}`]: StyledProps[key]\n}>\n\nconst StyledIconButton = styled(Clickable).attrs<\n  StyledIconButtonProps,\n  ReturnType<typeof styledProps>\n>(styledProps)<StyledIconButtonProps>`\n  user-select: none;\n\n  width: ${(p) => p.$width}px;\n  height: ${(p) => p.$height}px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(${({ $font }) => `--charcoal-${$font}`});\n  background-color: var(${({ $background }) => `--charcoal-${$background}`});\n  border-radius: 999999px;\n  transition: 0.2s background-color, 0.2s box-shadow;\n\n  &:not(:disabled):not([aria-disabled]),\n  &[aria-disabled='false'] {\n    ${({ $isActive, $background, $font }) =>\n      $isActive\n        ? css`\n            color: var(--charcoal-${$font}-press);\n            background-color: var(--charcoal-${$background}-press);\n          `\n        : css`\n            &:hover {\n              color: var(--charcoal-${$font}-hover);\n              background-color: var(--charcoal-${$background}-hover);\n            }\n            &:active {\n              color: var(--charcoal-${$font}-press);\n              background-color: var(--charcoal-${$background}-press);\n            }\n          `}\n    ${focusVisibleFocusRingCss}\n  }\n\n  &:disabled,\n  &[aria-disabled]:not([aria-disabled='false']) {\n    opacity: 0.32;\n  }\n`\n\nfunction styledProps({ $size, $variant }: StyledIconButtonProps) {\n  return {\n    ...variantToProps($variant),\n    ...sizeToProps($size),\n  }\n}\n\nfunction variantToProps(variant: Variant) {\n  switch (variant) {\n    case 'Default':\n      return { $font: 'text3', $background: 'transparent' } as const\n    case 'Overlay':\n      return { $font: 'text5', $background: 'surface4' } as const\n  }\n}\n\nfunction sizeToProps(size: Size) {\n  switch (size) {\n    case 'XS':\n      return {\n        $width: 20,\n        $height: 20,\n      }\n    case 'S':\n      return {\n        $width: 32,\n        $height: 32,\n      }\n    case 'M':\n      return {\n        $width: 40,\n        $height: 40,\n      }\n  }\n}\n\n/**\n * validates matches of size and icon\n */\nfunction validateIconSize(size: Size, icon: keyof KnownIconType) {\n  let requiredIconSize: string\n  switch (size) {\n    case 'XS':\n      requiredIconSize = '16'\n      break\n    case 'S':\n    case 'M':\n      requiredIconSize = '24'\n      break\n  }\n  // アイコン名は サイズ/名前\n  const result = /^\\d*/u.exec(icon)\n  if (result == null) {\n    throw new Error('Invalid icon name')\n  }\n  const [iconSize] = result\n  if (iconSize !== requiredIconSize) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `IconButton with size \"${size}\" expect icon size \"${requiredIconSize}, but got \"${iconSize}\"`\n    )\n  }\n}\n","import { useTextField } from '@react-aria/textfield'\nimport { useVisuallyHidden } from '@react-aria/visually-hidden'\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport styled, { css } from 'styled-components'\nimport FieldLabel, { FieldLabelProps } from '../FieldLabel'\nimport { countCodePointsInString, mergeRefs } from '../../_lib'\nimport { ReactAreaUseTextFieldCompat } from '../../_lib/compat'\nimport { useFocusWithClick } from './useFocusWithClick'\nimport { mergeProps } from '@react-aria/utils'\n\ntype DOMProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  // react-ariaのhookは、onChangeが`(v: string) => void`想定\n  | 'onChange'\n\n  // RDFa Attributeとかぶる\n  // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/58d57ca87ac7be0d306c0844dc254e90c150bd0d/types/react/index.d.ts#L1951\n  | 'prefix'\n\n  // ReactAreaUseTextFieldCompatに書いてあるような事情で、ここにあるイベントハンドラの型をゆるめる\n  | keyof ReactAreaUseTextFieldCompat\n>\n\nexport interface TextFieldProps\n  extends Pick<FieldLabelProps, 'label' | 'requiredText' | 'subLabel'>,\n    DOMProps,\n    ReactAreaUseTextFieldCompat {\n  readonly prefix?: ReactNode\n  readonly suffix?: ReactNode\n\n  // <input> 要素は number とか string[] もありうるが、今はこれしか想定してない\n  readonly defaultValue?: string\n  readonly value?: string\n  readonly onChange?: (value: string) => void\n\n  // react-ariaの型定義のせいでHTMLInputElementにできない\n  readonly onKeyDown?: (event: React.KeyboardEvent<Element>) => void\n  readonly onFocus?: (event: React.FocusEvent<Element>) => void\n  readonly onBlur?: (event: React.FocusEvent<Element>) => void\n\n  readonly showCount?: boolean\n  readonly showLabel?: boolean\n  readonly assistiveText?: string\n  readonly invalid?: boolean\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  function SingleLineTextFieldInner({ onChange, ...props }, forwardRef) {\n    const {\n      className,\n      showLabel = false,\n      showCount = false,\n      label,\n      requiredText,\n      subLabel,\n      disabled = false,\n      required,\n      invalid = false,\n      assistiveText,\n      maxLength,\n      prefix = null,\n      suffix = null,\n      ...restProps\n    } = props\n\n    const { visuallyHiddenProps } = useVisuallyHidden()\n    const ariaRef = useRef<HTMLInputElement>(null)\n    const [count, setCount] = useState(\n      countCodePointsInString(props.value ?? '')\n    )\n\n    const nonControlled = props.value === undefined\n    const handleChange = useCallback(\n      (value: string) => {\n        const count = countCodePointsInString(value)\n        if (maxLength !== undefined && count > maxLength) {\n          return\n        }\n        if (nonControlled) {\n          setCount(count)\n        }\n        onChange?.(value)\n      },\n      [maxLength, nonControlled, onChange]\n    )\n\n    useEffect(() => {\n      setCount(countCodePointsInString(props.value ?? ''))\n    }, [props.value])\n\n    const {\n      inputProps: ariaInputProps,\n      labelProps,\n      descriptionProps,\n      errorMessageProps,\n    } = useTextField(\n      {\n        inputElementType: 'input',\n        isDisabled: disabled,\n        isRequired: required,\n        validationState: invalid ? 'invalid' : 'valid',\n        description: !invalid && assistiveText,\n        errorMessage: invalid && assistiveText,\n        onChange: handleChange,\n        ...props,\n      },\n      ariaRef\n    )\n\n    const containerRef = useRef(null)\n\n    useFocusWithClick(containerRef, ariaRef)\n\n    const inputProps = mergeProps(restProps, ariaInputProps)\n\n    return (\n      <TextFieldRoot className={className} isDisabled={disabled}>\n        <TextFieldLabel\n          label={label}\n          requiredText={requiredText}\n          required={required}\n          subLabel={subLabel}\n          {...labelProps}\n          {...(!showLabel ? visuallyHiddenProps : {})}\n        />\n        <StyledInputContainer\n          ref={containerRef}\n          invalid={invalid}\n          aria-disabled={disabled === true ? true : undefined}\n          hasPrefix={prefix != null}\n          hasSuffix={suffix != null || showCount}\n        >\n          {prefix && <PrefixContainer>{prefix}</PrefixContainer>}\n          <StyledInput\n            ref={mergeRefs(forwardRef, ariaRef)}\n            invalid={invalid}\n            {...inputProps}\n          />\n          {(suffix || showCount) && (\n            <SuffixContainer>\n              {suffix}\n              {showCount && (\n                <SingleLineCounter>\n                  {maxLength !== undefined ? `${count}/${maxLength}` : count}\n                </SingleLineCounter>\n              )}\n            </SuffixContainer>\n          )}\n        </StyledInputContainer>\n        {assistiveText != null && assistiveText.length !== 0 && (\n          <AssistiveText\n            invalid={invalid}\n            {...(invalid ? errorMessageProps : descriptionProps)}\n          >\n            {assistiveText}\n          </AssistiveText>\n        )}\n      </TextFieldRoot>\n    )\n  }\n)\n\nexport default TextField\n\nconst TextFieldRoot = styled.div<{ isDisabled: boolean }>`\n  display: flex;\n  flex-direction: column;\n\n  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}\n`\n\nexport const TextFieldLabel = styled(FieldLabel)`\n  margin-bottom: 8px;\n`\n\nconst StyledInputContainer = styled.div<{\n  invalid: boolean\n  hasPrefix: boolean\n  hasSuffix: boolean\n}>`\n  display: grid;\n  grid-template-columns: ${(p) =>\n    [p.hasPrefix && 'auto', '1fr', p.hasSuffix && 'auto']\n      .filter(Boolean)\n      .join(' ')};\n  height: 40px;\n  transition: 0.2s background-color, 0.2s box-shadow;\n  color: var(--charcoal-text2);\n  background-color: var(--charcoal-surface3);\n  border-radius: 4px;\n  gap: 4px;\n  padding: 0 8px;\n  line-height: 22px;\n  font-size: 14px;\n\n  :not(:disabled):not([aria-disabled]):hover,\n  [aria-disabled='false']:hover {\n    background-color: var(--charcoal-surface3-hover);\n  }\n\n  :focus-within {\n    outline: none;\n    box-shadow: 0 0 0 4px\n      ${(p) => (p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`)};\n  }\n\n  ${(p) =>\n    p.invalid &&\n    css`\n      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n    `}\n`\n\nconst PrefixContainer = styled.div`\n  display: flex;\n  align-items: center;\n`\n\nconst SuffixContainer = styled.span`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n`\n\nconst StyledInput = styled.input<{\n  invalid: boolean\n}>`\n  border: none;\n  box-sizing: border-box;\n  outline: none;\n  font-family: inherit;\n\n  /* Prevent zooming for iOS Safari */\n  transform-origin: top left;\n  transform: scale(0.875);\n  width: calc(100% / 0.875);\n  height: calc(100% / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding-left: 0;\n  padding-right: 0;\n  border-radius: calc(4px / 0.875);\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n  background: transparent;\n\n  color: var(--charcoal-text2);\n  &::placeholder {\n    color: var(--charcoal-text3);\n  }\n`\n\nconst SingleLineCounter = styled.span`\n  line-height: 22px;\n  font-size: 14px;\n  color: var(--charcoal-text3);\n`\n\nexport const AssistiveText = styled.p<{ invalid: boolean }>`\n  font-size: 14px;\n  line-height: 22px;\n  margin-top: 4px;\n  margin-bottom: -4px;\n  color: ${(p) => `var(--charcoal-${p.invalid ? `assertive` : `text2`})`};\n`\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/runtime~main.6e0ab758.iframe.bundle.js b/runtime~main.8aae50cc.iframe.bundle.js
similarity index 95%
rename from runtime~main.6e0ab758.iframe.bundle.js
rename to runtime~main.8aae50cc.iframe.bundle.js
index a772bc00b..5969987a5 100644
--- a/runtime~main.6e0ab758.iframe.bundle.js
+++ b/runtime~main.8aae50cc.iframe.bundle.js
@@ -1 +1 @@
-(()=>{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,__webpack_require__.amdO={},deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i<deferred.length;i++){for(var[chunkIds,fn,priority]=deferred[i],fulfilled=!0,j=0;j<chunkIds.length;j++)(!1&priority||notFulfilled>=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority<notFulfilled&&(notFulfilled=priority));if(fulfilled){deferred.splice(i--,1);var r=fn();void 0!==r&&(result=r)}}return result}priority=priority||0;for(var i=deferred.length;i>0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>(({273:"react-sandbox-src-components-TextEllipsis-index-story",443:"react-src-components-Checkbox-index-story",492:"tailwind-config-src-docs-colors-TextBgColor-story",736:"react-src-components-DropdownSelector-ListItem-index-story",922:"react-src-components-LoadingSpinner-index-story",1143:"icons-src-PixivIcon-story",1779:"react-src-components-DropdownSelector-index-story",2139:"react-sandbox-src-components-WithIcon-index-story",2153:"react-sandbox-src-components-CarouselButton-index-story",2335:"react-src-components-Clickable-index-story",2612:"react-src-components-TagItem-index-story",2792:"react-src-components-Icon-index-story",2896:"react-src-components-TextField-TextField-story",3050:"react-src-components-MultiSelect-index-story",3188:"react-sandbox-src-components-SwitchCheckbox-index-story",3322:"react-sandbox-src-components-HintText-index-story",3839:"react-src-components-LoadingSpinner-LoadingSpinnerIcon-story",3846:"react-src-components-TextArea-TextArea-story",4054:"react-sandbox-src-components-Pager-index-story",4129:"tailwind-config-src-docs-typography-index-mdx",4167:"react-src-components-IconButton-index-story",4539:"tailwind-config-src-docs-screens-index-mdx",4555:"react-src-components-DropdownSelector-MenuList-index-story",4804:"react-src-components-Switch-index-story",5012:"styled-src-themeUtils-mdx",5738:"react-sandbox-src-components-Layout-index-story",6130:"react-src-components-Modal-index-story",6139:"tailwind-config-src-docs-gradient-index-mdx",6258:"react-src-components-Radio-index-story",6415:"react-sandbox-src-components-MenuListItem-index-story",6695:"react-src-components-DropdownSelector-Popover-index-story",6925:"react-sandbox-src-components-Carousel-index-story",7195:"styled-src-index-story",7647:"tailwind-config-src-docs-colors-index-mdx",7821:"tailwind-config-src-docs-borderRadius-index-mdx",9222:"react-sandbox-src-components-Filter-index-story",9354:"react-src-components-Button-index-story",9361:"tailwind-config-src-docs-spacing-index-mdx",9536:"react-src-components-SegmentedControl-index-story"}[chunkId]||chunkId)+"."+{76:"e8279e14",90:"601cc122",98:"1b04aa92",173:"5a43385a",193:"37c132e9",219:"6dc86a51",224:"b3e1c37a",273:"28edfd23",333:"fa22c826",356:"a4fcf6c9",359:"88ca4354",403:"6a92cd9b",429:"40928165",439:"18143c39",442:"7029aac0",443:"fa4a33a3",447:"74aef1ef",468:"b3b18c78",480:"a90b0805",492:"68a13d7e",494:"00be437b",511:"f00406bc",581:"b2506524",683:"b3bb1cae",734:"0a49c538",736:"09e31477",749:"19e6ba98",759:"794d0a55",787:"c8fbed94",872:"c754adff",874:"b787c67f",914:"bca24924",922:"137a1faf",970:"4bdcd344",980:"b7c53b76",1031:"ca4898ed",1090:"b188a83f",1108:"4b70560a",1119:"72211e30",1143:"59a08a47",1146:"a6d98099",1151:"686618bf",1177:"e22c5148",1187:"2abe1823",1256:"3f5d0bc1",1302:"04bf4029",1305:"6b579c3c",1314:"e155ebea",1327:"b7d87082",1335:"a1bff219",1453:"5c88e412",1514:"2711256e",1515:"4a13402c",1583:"2f9f9cbc",1598:"6ff4dd7a",1633:"f0ec11f2",1637:"2efc090d",1659:"8fade2f1",1665:"6fbd9bc2",1677:"2fc45bc3",1758:"cb4523f7",1779:"1fcb4613",1784:"d8a11f45",1853:"01eddd6c",1874:"f7ca3232",1876:"6b417a75",1926:"f040454d",1931:"51d92675",1965:"43329aeb",2071:"08bd818f",2078:"3cf60c99",2079:"3b0a660c",2139:"3d73abb1",2153:"bbecf139",2186:"82106d42",2217:"caea306a",2227:"5749a3c2",2246:"22154e10",2258:"db9ef77a",2309:"0758f68d",2325:"8cb4d60e",2335:"53a8a92e",2384:"c798f341",2431:"b53c3efc",2522:"f3047bde",2537:"d9fef170",2578:"79986d95",2612:"53876094",2620:"e4f6a032",2627:"fffd1596",2707:"1f7adc11",2732:"d2a175ba",2763:"c3d895d3",2774:"6b76444f",2784:"992d6b22",2792:"cd86735c",2832:"51674281",2846:"204140ce",2854:"2a4025a2",2890:"59a5136c",2896:"f59ab630",2920:"487b6b8e",2969:"fade522e",2984:"e928e2c0",3050:"3b0ccec9",3052:"ea71fe0c",3086:"6ca9d6f0",3188:"17853381",3243:"a5be9a33",3248:"a1c20c2a",3257:"6065e069",3322:"d7cde30e",3347:"e53f3ee8",3381:"d7d6294d",3386:"67c443db",3402:"c4b63c08",3426:"72885f11",3510:"20f8dedd",3521:"07bb60a1",3578:"cdc0cd7b",3601:"201c6962",3611:"221f6375",3725:"56c2b030",3733:"00f4df4c",3746:"52e68a60",3802:"b4e564c4",3839:"57f435bb",3846:"7cd2dd22",3852:"65f1fe7a",3904:"fbff878e",3915:"4cb459e2",3944:"e19e9650",4014:"70ddb70f",4026:"e136376e",4031:"cb4dd843",4051:"27b8361c",4054:"8892c0f4",4089:"ea7ebf42",4129:"615fc8df",4167:"88be8c19",4202:"9a130c30",4204:"5048bc61",4302:"f68eb417",4304:"2e3d9aa1",4339:"129a1336",4355:"399f8ca7",4379:"718337d3",4434:"99794c78",4441:"a61cbd01",4444:"1f605fab",4461:"bcbdba9e",4468:"a27e1b27",4470:"4e8ee6cd",4471:"b7067c47",4484:"7e28a534",4498:"c3140fd8",4539:"72186eaf",4549:"acca9eb1",4555:"9424aaa4",4570:"59c7c7f6",4611:"36ad04e4",4687:"561d3324",4699:"eb7ae81c",4751:"80f1700e",4769:"df9c6e79",4804:"0f8f772f",4817:"01135e6e",4824:"c4ffa008",4873:"4b7817d6",4903:"d244d012",4920:"75fe4bc1",4979:"8eee852d",4982:"d223287e",5012:"2d6a53b6",5021:"064bac95",5023:"cb4fd8c9",5056:"c64a41b0",5099:"e903e920",5115:"ecc33f5a",5141:"7fff1a92",5163:"518e4517",5175:"2f4f14b0",5190:"a976a909",5230:"fe3055aa",5241:"7b44ecf6",5283:"b13425af",5299:"8233df6e",5314:"554e85d7",5419:"c2773a47",5431:"ff5eb513",5456:"82ede222",5459:"263aff35",5532:"40e98ccd",5589:"ee24460e",5605:"2b7347f1",5702:"43b6834f",5736:"8567e8d1",5738:"fd43c055",5950:"b09548f2",5958:"ee7d4997",5970:"c4e98767",5972:"2a19376a",6005:"1798a524",6074:"b2bb0d3e",6096:"c7f12b78",6097:"017585bb",6130:"db90df58",6139:"8b74bff2",6142:"dbb2d867",6217:"a1b6aa10",6258:"60dd77e1",6291:"9719765d",6320:"f1071aa0",6332:"b46e5fee",6340:"3f1a85c9",6346:"5e11de0e",6351:"587798c6",6364:"1059f046",6369:"b88f82ec",6415:"0d79a2ef",6422:"9c8e26a1",6570:"af9d1a90",6572:"ba48ffc8",6577:"2923602b",6588:"1a6a787b",6655:"600c5a3b",6695:"93c49045",6758:"f8f0c305",6813:"434b5d3a",6815:"12f802bc",6925:"a35d61d6",6945:"7ba61f6b",6958:"335fce91",6969:"4cd32e68",6983:"fa627103",6999:"adc7e0ad",7083:"4d711a95",7143:"1bba310f",7156:"a62e8cb3",7195:"b84a3917",7262:"e5b97e03",7264:"9a0bcfde",7283:"eda7cfa0",7286:"2bfdf408",7302:"a928c601",7332:"929ba605",7337:"31f5d533",7351:"ea3c96b3",7480:"a965c670",7510:"ad17d506",7543:"2e9ba3fe",7549:"0f1c8f63",7567:"bbb3c376",7585:"43f46d1a",7587:"5f98f836",7647:"ad407033",7675:"584846e9",7694:"96548a9c",7703:"a8117dda",7752:"ded9a171",7753:"ede0d3e1",7820:"766413ee",7821:"cea461b2",7824:"9651abe3",7842:"7c11f6ef",7856:"b5811c3a",7871:"31fdfe3c",7898:"24eb2798",7905:"f1d419ff",7927:"34b04df6",8e3:"484fd564",8059:"79a04565",8193:"da70f027",8236:"2d106986",8328:"db7c2415",8331:"5a59fbdb",8356:"21734aa1",8362:"6d1f38d6",8465:"2d9f6e9a",8495:"ff8751a5",8562:"6b373d39",8570:"ce8bf368",8572:"73d42516",8595:"103991f2",8613:"6cf35189",8747:"fe8209d2",8768:"cb5a6346",8777:"ad48fe6f",8786:"75a3fdcb",8812:"bcdce4c2",8813:"9291e0a3",8822:"e80cce4c",8862:"e783193f",8865:"a280ba57",8947:"84754517",8963:"097d9c96",8974:"21badfbd",8982:"368c9c35",9030:"2d7a823c",9050:"7a52cf6a",9087:"5f660628",9092:"30748f8b",9095:"31bb33d4",9115:"3f0ea27f",9188:"53103ce7",9194:"1f3543d9",9222:"587b6d7c",9247:"03672b2c",9323:"e1ac4f09",9326:"b864e622",9354:"c03ead20",9361:"dac1b877",9379:"eeee4d9f",9405:"f182f7f5",9433:"b45c85ad",9439:"37b28c0e",9516:"21119a4b",9526:"55efafea",9536:"993b6a84",9564:"45f45067",9589:"90619b32",9646:"916ebc3f",9711:"2f625d20",9713:"2dc35501",9794:"0d685b2f",9870:"deedfa7f",9880:"ef7f6de6",9901:"2b687caa",9920:"cdfb05e9",9930:"3e054ccd",9997:"0a87fb55"}[chunkId]+".iframe.bundle.js"),__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i<scripts.length;i++){var s=scripts[i];if(s.getAttribute("src")==url||s.getAttribute("data-webpack")=="charcoal-ui:"+key){script=s;break}}script||(needAttach=!0,(script=document.createElement("script")).charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.setAttribute("data-webpack","charcoal-ui:"+key),script.src=url),inProgress[url]=[done];var onScriptComplete=(prev,event)=>{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={1303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(1303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i<chunkIds.length;i++)chunkId=chunkIds[i],__webpack_require__.o(installedChunks,chunkId)&&installedChunks[chunkId]&&installedChunks[chunkId][0](),installedChunks[chunkId]=0;return __webpack_require__.O(result)},chunkLoadingGlobal=self.webpackChunkcharcoal_ui=self.webpackChunkcharcoal_ui||[];chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null,0)),chunkLoadingGlobal.push=webpackJsonpCallback.bind(null,chunkLoadingGlobal.push.bind(chunkLoadingGlobal))})(),__webpack_require__.nc=void 0})();
\ No newline at end of file
+(()=>{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,__webpack_require__.amdO={},deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i<deferred.length;i++){for(var[chunkIds,fn,priority]=deferred[i],fulfilled=!0,j=0;j<chunkIds.length;j++)(!1&priority||notFulfilled>=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority<notFulfilled&&(notFulfilled=priority));if(fulfilled){deferred.splice(i--,1);var r=fn();void 0!==r&&(result=r)}}return result}priority=priority||0;for(var i=deferred.length;i>0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>(({273:"react-sandbox-src-components-TextEllipsis-index-story",443:"react-src-components-Checkbox-index-story",492:"tailwind-config-src-docs-colors-TextBgColor-story",736:"react-src-components-DropdownSelector-ListItem-index-story",922:"react-src-components-LoadingSpinner-index-story",1143:"icons-src-PixivIcon-story",1779:"react-src-components-DropdownSelector-index-story",2139:"react-sandbox-src-components-WithIcon-index-story",2153:"react-sandbox-src-components-CarouselButton-index-story",2335:"react-src-components-Clickable-index-story",2612:"react-src-components-TagItem-index-story",2792:"react-src-components-Icon-index-story",2896:"react-src-components-TextField-TextField-story",3050:"react-src-components-MultiSelect-index-story",3188:"react-sandbox-src-components-SwitchCheckbox-index-story",3322:"react-sandbox-src-components-HintText-index-story",3839:"react-src-components-LoadingSpinner-LoadingSpinnerIcon-story",3846:"react-src-components-TextArea-TextArea-story",4054:"react-sandbox-src-components-Pager-index-story",4129:"tailwind-config-src-docs-typography-index-mdx",4167:"react-src-components-IconButton-index-story",4539:"tailwind-config-src-docs-screens-index-mdx",4555:"react-src-components-DropdownSelector-MenuList-index-story",4804:"react-src-components-Switch-index-story",5012:"styled-src-themeUtils-mdx",5738:"react-sandbox-src-components-Layout-index-story",6130:"react-src-components-Modal-index-story",6139:"tailwind-config-src-docs-gradient-index-mdx",6258:"react-src-components-Radio-index-story",6415:"react-sandbox-src-components-MenuListItem-index-story",6695:"react-src-components-DropdownSelector-Popover-index-story",6925:"react-sandbox-src-components-Carousel-index-story",7195:"styled-src-index-story",7647:"tailwind-config-src-docs-colors-index-mdx",7821:"tailwind-config-src-docs-borderRadius-index-mdx",9222:"react-sandbox-src-components-Filter-index-story",9354:"react-src-components-Button-index-story",9361:"tailwind-config-src-docs-spacing-index-mdx",9536:"react-src-components-SegmentedControl-index-story"}[chunkId]||chunkId)+"."+{76:"e8279e14",90:"601cc122",98:"1b04aa92",173:"5a43385a",193:"37c132e9",219:"6dc86a51",224:"b3e1c37a",273:"28edfd23",333:"fa22c826",356:"a4fcf6c9",359:"88ca4354",403:"6a92cd9b",429:"40928165",439:"18143c39",442:"7029aac0",443:"fa4a33a3",447:"74aef1ef",468:"b3b18c78",480:"a90b0805",492:"68a13d7e",494:"00be437b",511:"f00406bc",581:"b2506524",683:"b3bb1cae",734:"0a49c538",736:"09e31477",749:"19e6ba98",759:"794d0a55",787:"c8fbed94",872:"c754adff",874:"b787c67f",914:"bca24924",922:"137a1faf",970:"4bdcd344",980:"b7c53b76",1031:"ca4898ed",1090:"b188a83f",1108:"4b70560a",1119:"72211e30",1143:"59a08a47",1146:"a6d98099",1151:"686618bf",1177:"e22c5148",1187:"2abe1823",1256:"3f5d0bc1",1302:"04bf4029",1305:"6b579c3c",1314:"e155ebea",1327:"b7d87082",1335:"a1bff219",1453:"5c88e412",1514:"2711256e",1515:"4a13402c",1583:"2f9f9cbc",1598:"6ff4dd7a",1633:"f0ec11f2",1637:"2efc090d",1659:"8fade2f1",1665:"6fbd9bc2",1677:"2fc45bc3",1758:"cb4523f7",1779:"1fcb4613",1784:"d8a11f45",1853:"01eddd6c",1874:"f7ca3232",1876:"6b417a75",1926:"f040454d",1931:"51d92675",1965:"43329aeb",2071:"08bd818f",2078:"3cf60c99",2079:"3b0a660c",2139:"3d73abb1",2153:"e2f2b3ba",2186:"82106d42",2217:"caea306a",2227:"5749a3c2",2246:"22154e10",2258:"db9ef77a",2309:"0758f68d",2325:"8cb4d60e",2335:"53a8a92e",2384:"c798f341",2431:"b53c3efc",2522:"f3047bde",2537:"d9fef170",2578:"79986d95",2612:"53876094",2620:"e4f6a032",2627:"fffd1596",2707:"1f7adc11",2732:"d2a175ba",2763:"c3d895d3",2774:"6b76444f",2784:"992d6b22",2792:"cd86735c",2832:"51674281",2846:"204140ce",2854:"2a4025a2",2890:"59a5136c",2896:"f9a71023",2920:"487b6b8e",2969:"fade522e",2984:"e928e2c0",3050:"3b0ccec9",3052:"ea71fe0c",3086:"6ca9d6f0",3188:"17853381",3243:"a5be9a33",3248:"a1c20c2a",3257:"6065e069",3322:"cae06401",3347:"e53f3ee8",3381:"d7d6294d",3386:"67c443db",3402:"c4b63c08",3426:"72885f11",3510:"20f8dedd",3521:"07bb60a1",3578:"cdc0cd7b",3601:"201c6962",3611:"221f6375",3725:"56c2b030",3733:"00f4df4c",3746:"52e68a60",3802:"b4e564c4",3839:"57f435bb",3846:"b95c10b5",3852:"65f1fe7a",3904:"fbff878e",3915:"4cb459e2",3944:"e19e9650",4014:"70ddb70f",4026:"e136376e",4031:"cb4dd843",4051:"27b8361c",4054:"8892c0f4",4089:"ea7ebf42",4129:"615fc8df",4167:"88be8c19",4202:"9a130c30",4204:"5048bc61",4302:"f68eb417",4304:"2e3d9aa1",4339:"129a1336",4355:"399f8ca7",4379:"718337d3",4434:"99794c78",4441:"a61cbd01",4444:"1f605fab",4461:"bcbdba9e",4468:"a27e1b27",4470:"4e8ee6cd",4471:"b7067c47",4484:"7e28a534",4498:"c3140fd8",4539:"72186eaf",4549:"acca9eb1",4555:"9424aaa4",4570:"59c7c7f6",4611:"36ad04e4",4687:"561d3324",4699:"eb7ae81c",4751:"80f1700e",4769:"df9c6e79",4804:"0f8f772f",4817:"01135e6e",4824:"c4ffa008",4873:"4b7817d6",4903:"d244d012",4920:"75fe4bc1",4979:"8eee852d",4982:"d223287e",5012:"54aaf8d9",5021:"03df505e",5023:"cb4fd8c9",5056:"c64a41b0",5099:"e903e920",5115:"ecc33f5a",5141:"7fff1a92",5163:"518e4517",5175:"2f4f14b0",5190:"a976a909",5230:"fe3055aa",5241:"7b44ecf6",5283:"b13425af",5299:"8233df6e",5314:"554e85d7",5419:"c2773a47",5431:"ff5eb513",5456:"82ede222",5459:"263aff35",5532:"40e98ccd",5589:"ee24460e",5605:"2b7347f1",5702:"43b6834f",5736:"8567e8d1",5738:"fd43c055",5950:"b09548f2",5958:"ee7d4997",5970:"c4e98767",5972:"2a19376a",6005:"1798a524",6074:"b2bb0d3e",6096:"c7f12b78",6097:"017585bb",6130:"db90df58",6139:"8b74bff2",6142:"dbb2d867",6217:"a1b6aa10",6258:"60dd77e1",6291:"9719765d",6320:"f1071aa0",6332:"b46e5fee",6340:"3f1a85c9",6346:"5e11de0e",6351:"587798c6",6364:"1059f046",6369:"b88f82ec",6415:"0d79a2ef",6422:"9c8e26a1",6570:"af9d1a90",6572:"ba48ffc8",6577:"2923602b",6588:"1a6a787b",6655:"600c5a3b",6695:"93c49045",6758:"f8f0c305",6813:"434b5d3a",6815:"12f802bc",6925:"39df6b09",6945:"7ba61f6b",6958:"335fce91",6969:"4cd32e68",6983:"fa627103",6999:"adc7e0ad",7083:"4d711a95",7143:"1bba310f",7156:"a62e8cb3",7195:"b2b3727b",7262:"e5b97e03",7264:"9a0bcfde",7283:"eda7cfa0",7286:"2bfdf408",7302:"a928c601",7332:"929ba605",7337:"31f5d533",7351:"ea3c96b3",7480:"a965c670",7510:"ad17d506",7543:"2e9ba3fe",7549:"0f1c8f63",7567:"bbb3c376",7585:"43f46d1a",7587:"5f98f836",7647:"ad407033",7675:"584846e9",7694:"96548a9c",7703:"a8117dda",7752:"ded9a171",7753:"ede0d3e1",7820:"766413ee",7821:"cea461b2",7824:"9651abe3",7842:"7c11f6ef",7856:"b5811c3a",7871:"31fdfe3c",7898:"24eb2798",7905:"f1d419ff",7927:"34b04df6",8e3:"484fd564",8059:"79a04565",8193:"da70f027",8236:"2d106986",8328:"db7c2415",8331:"5a59fbdb",8356:"21734aa1",8362:"6d1f38d6",8465:"2d9f6e9a",8495:"ff8751a5",8562:"6b373d39",8570:"ce8bf368",8572:"73d42516",8595:"103991f2",8613:"6cf35189",8747:"fe8209d2",8768:"cb5a6346",8777:"ad48fe6f",8786:"75a3fdcb",8812:"bcdce4c2",8813:"9291e0a3",8822:"e80cce4c",8862:"e783193f",8865:"a280ba57",8947:"84754517",8963:"097d9c96",8974:"21badfbd",8982:"368c9c35",9030:"2d7a823c",9050:"7a52cf6a",9087:"5f660628",9092:"30748f8b",9095:"31bb33d4",9115:"3f0ea27f",9188:"53103ce7",9194:"1f3543d9",9222:"587b6d7c",9247:"03672b2c",9323:"e1ac4f09",9326:"b864e622",9354:"c03ead20",9361:"dac1b877",9379:"eeee4d9f",9405:"f182f7f5",9433:"b45c85ad",9439:"37b28c0e",9516:"21119a4b",9526:"55efafea",9536:"993b6a84",9564:"45f45067",9589:"90619b32",9646:"916ebc3f",9711:"2f625d20",9713:"2dc35501",9794:"0d685b2f",9870:"deedfa7f",9880:"ef7f6de6",9901:"2b687caa",9920:"cdfb05e9",9930:"3e054ccd",9997:"0a87fb55"}[chunkId]+".iframe.bundle.js"),__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i<scripts.length;i++){var s=scripts[i];if(s.getAttribute("src")==url||s.getAttribute("data-webpack")=="charcoal-ui:"+key){script=s;break}}script||(needAttach=!0,(script=document.createElement("script")).charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.setAttribute("data-webpack","charcoal-ui:"+key),script.src=url),inProgress[url]=[done];var onScriptComplete=(prev,event)=>{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={1303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(1303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i<chunkIds.length;i++)chunkId=chunkIds[i],__webpack_require__.o(installedChunks,chunkId)&&installedChunks[chunkId]&&installedChunks[chunkId][0](),installedChunks[chunkId]=0;return __webpack_require__.O(result)},chunkLoadingGlobal=self.webpackChunkcharcoal_ui=self.webpackChunkcharcoal_ui||[];chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null,0)),chunkLoadingGlobal.push=webpackJsonpCallback.bind(null,chunkLoadingGlobal.push.bind(chunkLoadingGlobal))})(),__webpack_require__.nc=void 0})();
\ No newline at end of file
diff --git a/stories.json b/stories.json
index 5adb23b46..2af9050e9 100644
--- a/stories.json
+++ b/stories.json
@@ -1 +1 @@
-{"v":3,"stories":{"styled-addthemeutils--docs":{"id":"styled-addthemeutils--docs","title":"styled/addThemeUtils","name":"Docs","importPath":"./packages/styled/src/themeUtils.mdx","storiesImports":["./packages/styled/src/index.story.tsx"],"tags":["unattached-mdx","docs"],"kind":"styled/addThemeUtils","story":"Docs","parameters":{"__id":"styled-addthemeutils--docs","docsOnly":true,"fileName":"./packages/styled/src/themeUtils.mdx"}},"tailwind-config-borderradius--docs":{"id":"tailwind-config-borderradius--docs","title":"tailwind-config/BorderRadius","name":"Docs","importPath":"./packages/tailwind-config/src/docs/borderRadius/index.mdx","storiesImports":[],"tags":["unattached-mdx","docs"],"kind":"tailwind-config/BorderRadius","story":"Docs","parameters":{"__id":"tailwind-config-borderradius--docs","docsOnly":true,"fileName":"./packages/tailwind-config/src/docs/borderRadius/index.mdx"}},"tailwind-config-colors-doc--docs":{"id":"tailwind-config-colors-doc--docs","title":"tailwind-config/Colors/Doc","name":"Docs","importPath":"./packages/tailwind-config/src/docs/colors/index.mdx","storiesImports":[],"tags":["unattached-mdx","docs"],"kind":"tailwind-config/Colors/Doc","story":"Docs","parameters":{"__id":"tailwind-config-colors-doc--docs","docsOnly":true,"fileName":"./packages/tailwind-config/src/docs/colors/index.mdx"}},"tailwind-config-gradients--docs":{"id":"tailwind-config-gradients--docs","title":"tailwind-config/Gradients","name":"Docs","importPath":"./packages/tailwind-config/src/docs/gradient/index.mdx","storiesImports":[],"tags":["unattached-mdx","docs"],"kind":"tailwind-config/Gradients","story":"Docs","parameters":{"__id":"tailwind-config-gradients--docs","docsOnly":true,"fileName":"./packages/tailwind-config/src/docs/gradient/index.mdx"}},"tailwind-config-screens--docs":{"id":"tailwind-config-screens--docs","title":"tailwind-config/Screens","name":"Docs","importPath":"./packages/tailwind-config/src/docs/screens/index.mdx","storiesImports":[],"tags":["unattached-mdx","docs"],"kind":"tailwind-config/Screens","story":"Docs","parameters":{"__id":"tailwind-config-screens--docs","docsOnly":true,"fileName":"./packages/tailwind-config/src/docs/screens/index.mdx"}},"tailwind-config-spacing--docs":{"id":"tailwind-config-spacing--docs","title":"tailwind-config/Spacing","name":"Docs","importPath":"./packages/tailwind-config/src/docs/spacing/index.mdx","storiesImports":[],"tags":["unattached-mdx","docs"],"kind":"tailwind-config/Spacing","story":"Docs","parameters":{"__id":"tailwind-config-spacing--docs","docsOnly":true,"fileName":"./packages/tailwind-config/src/docs/spacing/index.mdx"}},"tailwind-config-typography--docs":{"id":"tailwind-config-typography--docs","title":"tailwind-config/Typography","name":"Docs","importPath":"./packages/tailwind-config/src/docs/typography/index.mdx","storiesImports":[],"tags":["unattached-mdx","docs"],"kind":"tailwind-config/Typography","story":"Docs","parameters":{"__id":"tailwind-config-typography--docs","docsOnly":true,"fileName":"./packages/tailwind-config/src/docs/typography/index.mdx"}},"icons-pixivicon-pixiv-icon--default":{"id":"icons-pixivicon-pixiv-icon--default","name":"Default","title":"Icons/PixivIcon (<pixiv-icon>)","importPath":"./packages/icons/src/PixivIcon.story.tsx","tags":["story"],"kind":"Icons/PixivIcon (<pixiv-icon>)","story":"Default","parameters":{"__id":"icons-pixivicon-pixiv-icon--default","docsOnly":false,"fileName":"./packages/icons/src/PixivIcon.story.tsx"}},"icons-pixivicon-pixiv-icon--with-attributes":{"id":"icons-pixivicon-pixiv-icon--with-attributes","name":"With Attributes","title":"Icons/PixivIcon (<pixiv-icon>)","importPath":"./packages/icons/src/PixivIcon.story.tsx","tags":["story"],"kind":"Icons/PixivIcon (<pixiv-icon>)","story":"With Attributes","parameters":{"__id":"icons-pixivicon-pixiv-icon--with-attributes","docsOnly":false,"fileName":"./packages/icons/src/PixivIcon.story.tsx"}},"icons-pixivicon-pixiv-icon--with-unsafe":{"id":"icons-pixivicon-pixiv-icon--with-unsafe","name":"With Unsafe","title":"Icons/PixivIcon (<pixiv-icon>)","importPath":"./packages/icons/src/PixivIcon.story.tsx","tags":["story"],"kind":"Icons/PixivIcon (<pixiv-icon>)","story":"With Unsafe","parameters":{"__id":"icons-pixivicon-pixiv-icon--with-unsafe","docsOnly":false,"fileName":"./packages/icons/src/PixivIcon.story.tsx"}},"sandbox-carousel--carousel":{"id":"sandbox-carousel--carousel","name":"Carousel","title":"Sandbox/Carousel","importPath":"./packages/react-sandbox/src/components/Carousel/index.story.tsx","tags":["story"],"kind":"Sandbox/Carousel","story":"Carousel","parameters":{"__id":"sandbox-carousel--carousel","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Carousel/index.story.tsx"}},"sandbox-carousel-carouselbutton--carousel-button":{"id":"sandbox-carousel-carouselbutton--carousel-button","name":"Carousel Button","title":"Sandbox/Carousel/CarouselButton","importPath":"./packages/react-sandbox/src/components/CarouselButton/index.story.tsx","tags":["story"],"kind":"Sandbox/Carousel/CarouselButton","story":"Carousel Button","parameters":{"__id":"sandbox-carousel-carouselbutton--carousel-button","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/CarouselButton/index.story.tsx"}},"sandbox-carousel-carouselbutton--scroll-hint-button":{"id":"sandbox-carousel-carouselbutton--scroll-hint-button","name":"Scroll Hint Button","title":"Sandbox/Carousel/CarouselButton","importPath":"./packages/react-sandbox/src/components/CarouselButton/index.story.tsx","tags":["story"],"kind":"Sandbox/Carousel/CarouselButton","story":"Scroll Hint Button","parameters":{"__id":"sandbox-carousel-carouselbutton--scroll-hint-button","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/CarouselButton/index.story.tsx"}},"sandbox-filter--default":{"id":"sandbox-filter--default","name":"Default","title":"Sandbox/Filter","importPath":"./packages/react-sandbox/src/components/Filter/index.story.tsx","tags":["story"],"kind":"Sandbox/Filter","story":"Default","parameters":{"__id":"sandbox-filter--default","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Filter/index.story.tsx"}},"sandbox-filter--button":{"id":"sandbox-filter--button","name":"Button","title":"Sandbox/Filter","importPath":"./packages/react-sandbox/src/components/Filter/index.story.tsx","tags":["story"],"kind":"Sandbox/Filter","story":"Button","parameters":{"__id":"sandbox-filter--button","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Filter/index.story.tsx"}},"sandbox-filter--link":{"id":"sandbox-filter--link","name":"Link","title":"Sandbox/Filter","importPath":"./packages/react-sandbox/src/components/Filter/index.story.tsx","tags":["story"],"kind":"Sandbox/Filter","story":"Link","parameters":{"__id":"sandbox-filter--link","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Filter/index.story.tsx"}},"sandbox-hinttext--default":{"id":"sandbox-hinttext--default","name":"Default","title":"Sandbox/HintText","importPath":"./packages/react-sandbox/src/components/HintText/index.story.tsx","tags":["story"],"kind":"Sandbox/HintText","story":"Default","parameters":{"__id":"sandbox-hinttext--default","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/HintText/index.story.tsx"}},"sandbox-layout--basic":{"id":"sandbox-layout--basic","name":"Basic","title":"Sandbox/Layout","importPath":"./packages/react-sandbox/src/components/Layout/index.story.tsx","tags":["story"],"kind":"Sandbox/Layout","story":"Basic","parameters":{"__id":"sandbox-layout--basic","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Layout/index.story.tsx"}},"sandbox-layout--no-menu":{"id":"sandbox-layout--no-menu","name":"No Menu","title":"Sandbox/Layout","importPath":"./packages/react-sandbox/src/components/Layout/index.story.tsx","tags":["story"],"kind":"Sandbox/Layout","story":"No Menu","parameters":{"__id":"sandbox-layout--no-menu","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Layout/index.story.tsx"}},"sandbox-layout--wide":{"id":"sandbox-layout--wide","name":"Wide","title":"Sandbox/Layout","importPath":"./packages/react-sandbox/src/components/Layout/index.story.tsx","tags":["story"],"kind":"Sandbox/Layout","story":"Wide","parameters":{"__id":"sandbox-layout--wide","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Layout/index.story.tsx"}},"sandbox-layout--center":{"id":"sandbox-layout--center","name":"Center","title":"Sandbox/Layout","importPath":"./packages/react-sandbox/src/components/Layout/index.story.tsx","tags":["story"],"kind":"Sandbox/Layout","story":"Center","parameters":{"__id":"sandbox-layout--center","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Layout/index.story.tsx"}},"sandbox-menulistitem--default":{"id":"sandbox-menulistitem--default","name":"Default","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Default","parameters":{"__id":"sandbox-menulistitem--default","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--simple":{"id":"sandbox-menulistitem--simple","name":"Simple","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Simple","parameters":{"__id":"sandbox-menulistitem--simple","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--disabled":{"id":"sandbox-menulistitem--disabled","name":"Disabled","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Disabled","parameters":{"__id":"sandbox-menulistitem--disabled","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--link":{"id":"sandbox-menulistitem--link","name":"Link","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Link","parameters":{"__id":"sandbox-menulistitem--link","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--hard-link":{"id":"sandbox-menulistitem--hard-link","name":"Hard Link","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Hard Link","parameters":{"__id":"sandbox-menulistitem--hard-link","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--inline-icon":{"id":"sandbox-menulistitem--inline-icon","name":"Inline Icon","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Inline Icon","parameters":{"__id":"sandbox-menulistitem--inline-icon","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--icon":{"id":"sandbox-menulistitem--icon","name":"Icon","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Icon","parameters":{"__id":"sandbox-menulistitem--icon","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--no-hover-effect":{"id":"sandbox-menulistitem--no-hover-effect","name":"No Hover Effect","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"No Hover Effect","parameters":{"__id":"sandbox-menulistitem--no-hover-effect","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--spacer":{"id":"sandbox-menulistitem--spacer","name":"Spacer","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Spacer","parameters":{"__id":"sandbox-menulistitem--spacer","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--label":{"id":"sandbox-menulistitem--label","name":"Label","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Label","parameters":{"__id":"sandbox-menulistitem--label","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--text-ellipsis":{"id":"sandbox-menulistitem--text-ellipsis","name":"Text Ellipsis","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Text Ellipsis","parameters":{"__id":"sandbox-menulistitem--text-ellipsis","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-pager--default":{"id":"sandbox-pager--default","name":"Default","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"],"kind":"Sandbox/Pager","story":"Default","parameters":{"__id":"sandbox-pager--default","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Pager/index.story.tsx"}},"sandbox-pager--link":{"id":"sandbox-pager--link","name":"Link","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"],"kind":"Sandbox/Pager","story":"Link","parameters":{"__id":"sandbox-pager--link","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Pager/index.story.tsx"}},"sandbox-pager--not-collapsed":{"id":"sandbox-pager--not-collapsed","name":"Not Collapsed","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"],"kind":"Sandbox/Pager","story":"Not Collapsed","parameters":{"__id":"sandbox-pager--not-collapsed","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Pager/index.story.tsx"}},"sandbox-pager--collapsed-with-dots":{"id":"sandbox-pager--collapsed-with-dots","name":"Collapsed With Dots","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"],"kind":"Sandbox/Pager","story":"Collapsed With Dots","parameters":{"__id":"sandbox-pager--collapsed-with-dots","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Pager/index.story.tsx"}},"sandbox-pager--last-page":{"id":"sandbox-pager--last-page","name":"Last Page","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"],"kind":"Sandbox/Pager","story":"Last Page","parameters":{"__id":"sandbox-pager--last-page","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Pager/index.story.tsx"}},"sandbox-pager--one":{"id":"sandbox-pager--one","name":"One","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"],"kind":"Sandbox/Pager","story":"One","parameters":{"__id":"sandbox-pager--one","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Pager/index.story.tsx"}},"sandbox-pager--little-page-range-displayed":{"id":"sandbox-pager--little-page-range-displayed","name":"Little Page Range Displayed","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"],"kind":"Sandbox/Pager","story":"Little Page Range Displayed","parameters":{"__id":"sandbox-pager--little-page-range-displayed","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Pager/index.story.tsx"}},"sandbox-selection-control-switchcheckbox--default":{"id":"sandbox-selection-control-switchcheckbox--default","name":"Default","title":"Sandbox/Selection Control/SwitchCheckbox","importPath":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx","tags":["story"],"kind":"Sandbox/Selection Control/SwitchCheckbox","story":"Default","parameters":{"__id":"sandbox-selection-control-switchcheckbox--default","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx"}},"sandbox-selection-control-switchcheckbox--on":{"id":"sandbox-selection-control-switchcheckbox--on","name":"On","title":"Sandbox/Selection Control/SwitchCheckbox","importPath":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx","tags":["story"],"kind":"Sandbox/Selection Control/SwitchCheckbox","story":"On","parameters":{"__id":"sandbox-selection-control-switchcheckbox--on","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx"}},"sandbox-selection-control-switchcheckbox--off":{"id":"sandbox-selection-control-switchcheckbox--off","name":"Off","title":"Sandbox/Selection Control/SwitchCheckbox","importPath":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx","tags":["story"],"kind":"Sandbox/Selection Control/SwitchCheckbox","story":"Off","parameters":{"__id":"sandbox-selection-control-switchcheckbox--off","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx"}},"sandbox-selection-control-switchcheckbox--disabled":{"id":"sandbox-selection-control-switchcheckbox--disabled","name":"Disabled","title":"Sandbox/Selection Control/SwitchCheckbox","importPath":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx","tags":["story"],"kind":"Sandbox/Selection Control/SwitchCheckbox","story":"Disabled","parameters":{"__id":"sandbox-selection-control-switchcheckbox--disabled","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx"}},"sandbox-textellipsis--default":{"id":"sandbox-textellipsis--default","name":"Default","title":"Sandbox/TextEllipsis","importPath":"./packages/react-sandbox/src/components/TextEllipsis/index.story.tsx","tags":["story"],"kind":"Sandbox/TextEllipsis","story":"Default","parameters":{"__id":"sandbox-textellipsis--default","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/TextEllipsis/index.story.tsx"}},"sandbox-withicon--default":{"id":"sandbox-withicon--default","name":"Default","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"],"kind":"Sandbox/WithIcon","story":"Default","parameters":{"__id":"sandbox-withicon--default","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx"}},"sandbox-withicon--performance":{"id":"sandbox-withicon--performance","name":"Performance","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"],"kind":"Sandbox/WithIcon","story":"Performance","parameters":{"__id":"sandbox-withicon--performance","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx"}},"sandbox-withicon--naive":{"id":"sandbox-withicon--naive","name":"Naive","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"],"kind":"Sandbox/WithIcon","story":"Naive","parameters":{"__id":"sandbox-withicon--naive","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx"}},"sandbox-withicon--prefix":{"id":"sandbox-withicon--prefix","name":"Prefix","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"],"kind":"Sandbox/WithIcon","story":"Prefix","parameters":{"__id":"sandbox-withicon--prefix","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx"}},"sandbox-withicon--hide":{"id":"sandbox-withicon--hide","name":"Hide","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"],"kind":"Sandbox/WithIcon","story":"Hide","parameters":{"__id":"sandbox-withicon--hide","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx"}},"sandbox-withicon--collapse":{"id":"sandbox-withicon--collapse","name":"Collapse","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"],"kind":"Sandbox/WithIcon","story":"Collapse","parameters":{"__id":"sandbox-withicon--collapse","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx"}},"sandbox-withicon--long-text":{"id":"sandbox-withicon--long-text","name":"Long Text","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"],"kind":"Sandbox/WithIcon","story":"Long Text","parameters":{"__id":"sandbox-withicon--long-text","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx"}},"sandbox-withicon--long-text-overflow":{"id":"sandbox-withicon--long-text-overflow","name":"Long Text Overflow","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"],"kind":"Sandbox/WithIcon","story":"Long Text Overflow","parameters":{"__id":"sandbox-withicon--long-text-overflow","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx"}},"button--default":{"id":"button--default","name":"Default","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Default","parameters":{"__id":"button--default","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--primary":{"id":"button--primary","name":"Primary","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Primary","parameters":{"__id":"button--primary","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--navigation":{"id":"button--navigation","name":"Navigation","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Navigation","parameters":{"__id":"button--navigation","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--overlay":{"id":"button--overlay","name":"Overlay","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Overlay","parameters":{"__id":"button--overlay","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--danger":{"id":"button--danger","name":"Danger","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Danger","parameters":{"__id":"button--danger","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--small":{"id":"button--small","name":"Small","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Small","parameters":{"__id":"button--small","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--fixed":{"id":"button--fixed","name":"Fixed","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Fixed","parameters":{"__id":"button--fixed","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--disabled":{"id":"button--disabled","name":"Disabled","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Disabled","parameters":{"__id":"button--disabled","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--active":{"id":"button--active","name":"Active","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Active","parameters":{"__id":"button--active","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--link":{"id":"button--link","name":"Link","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Link","parameters":{"__id":"button--link","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--nihongo":{"id":"button--nihongo","name":"Nihongo","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Nihongo","parameters":{"__id":"button--nihongo","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--focus":{"id":"button--focus","name":"Focus","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Focus","parameters":{"__id":"button--focus","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--layout-example":{"id":"button--layout-example","name":"Layout Example","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Layout Example","parameters":{"__id":"button--layout-example","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"checkbox--labelled":{"id":"checkbox--labelled","name":"Labelled","title":"Checkbox","importPath":"./packages/react/src/components/Checkbox/index.story.tsx","tags":["story"],"kind":"Checkbox","story":"Labelled","parameters":{"__id":"checkbox--labelled","docsOnly":false,"fileName":"./packages/react/src/components/Checkbox/index.story.tsx"}},"checkbox--invalid":{"id":"checkbox--invalid","name":"Invalid","title":"Checkbox","importPath":"./packages/react/src/components/Checkbox/index.story.tsx","tags":["story"],"kind":"Checkbox","story":"Invalid","parameters":{"__id":"checkbox--invalid","docsOnly":false,"fileName":"./packages/react/src/components/Checkbox/index.story.tsx"}},"checkbox--unlabelled":{"id":"checkbox--unlabelled","name":"Unlabelled","title":"Checkbox","importPath":"./packages/react/src/components/Checkbox/index.story.tsx","tags":["story"],"kind":"Checkbox","story":"Unlabelled","parameters":{"__id":"checkbox--unlabelled","docsOnly":false,"fileName":"./packages/react/src/components/Checkbox/index.story.tsx"}},"clickable--button":{"id":"clickable--button","name":"Button","title":"Clickable","importPath":"./packages/react/src/components/Clickable/index.story.tsx","tags":["story"],"kind":"Clickable","story":"Button","parameters":{"__id":"clickable--button","docsOnly":false,"fileName":"./packages/react/src/components/Clickable/index.story.tsx"}},"clickable--link":{"id":"clickable--link","name":"Link","title":"Clickable","importPath":"./packages/react/src/components/Clickable/index.story.tsx","tags":["story"],"kind":"Clickable","story":"Link","parameters":{"__id":"clickable--link","docsOnly":false,"fileName":"./packages/react/src/components/Clickable/index.story.tsx"}},"dropdownselector-listitem--basic":{"id":"dropdownselector-listitem--basic","name":"Basic","title":"DropdownSelector/ListItem","importPath":"./packages/react/src/components/DropdownSelector/ListItem/index.story.tsx","tags":["story"],"kind":"DropdownSelector/ListItem","story":"Basic","parameters":{"__id":"dropdownselector-listitem--basic","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/ListItem/index.story.tsx"}},"dropdownselector-menulist--basic":{"id":"dropdownselector-menulist--basic","name":"Basic","title":"DropdownSelector/MenuList","importPath":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx","tags":["story"],"kind":"DropdownSelector/MenuList","story":"Basic","parameters":{"__id":"dropdownselector-menulist--basic","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx"}},"dropdownselector-menulist--disabled":{"id":"dropdownselector-menulist--disabled","name":"Disabled","title":"DropdownSelector/MenuList","importPath":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx","tags":["story"],"kind":"DropdownSelector/MenuList","story":"Disabled","parameters":{"__id":"dropdownselector-menulist--disabled","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx"}},"dropdownselector-menulist--group":{"id":"dropdownselector-menulist--group","name":"Group","title":"DropdownSelector/MenuList","importPath":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx","tags":["story"],"kind":"DropdownSelector/MenuList","story":"Group","parameters":{"__id":"dropdownselector-menulist--group","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx"}},"dropdownselector-popover--basic":{"id":"dropdownselector-popover--basic","name":"Basic","title":"DropdownSelector/Popover","importPath":"./packages/react/src/components/DropdownSelector/Popover/index.story.tsx","tags":["story"],"kind":"DropdownSelector/Popover","story":"Basic","parameters":{"__id":"dropdownselector-popover--basic","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/Popover/index.story.tsx"}},"dropdownselector--default":{"id":"dropdownselector--default","name":"Default","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Default","parameters":{"__id":"dropdownselector--default","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--label":{"id":"dropdownselector--label","name":"Label","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Label","parameters":{"__id":"dropdownselector--label","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--disabled":{"id":"dropdownselector--disabled","name":"Disabled","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Disabled","parameters":{"__id":"dropdownselector--disabled","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--disabled-item":{"id":"dropdownselector--disabled-item","name":"Disabled Item","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Disabled Item","parameters":{"__id":"dropdownselector--disabled-item","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--invalid":{"id":"dropdownselector--invalid","name":"Invalid","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Invalid","parameters":{"__id":"dropdownselector--invalid","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--assistive-text":{"id":"dropdownselector--assistive-text","name":"Assistive Text","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Assistive Text","parameters":{"__id":"dropdownselector--assistive-text","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--invalid-assistive-text":{"id":"dropdownselector--invalid-assistive-text","name":"Invalid Assistive Text","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Invalid Assistive Text","parameters":{"__id":"dropdownselector--invalid-assistive-text","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--required-text":{"id":"dropdownselector--required-text","name":"Required Text","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Required Text","parameters":{"__id":"dropdownselector--required-text","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--sub-label":{"id":"dropdownselector--sub-label","name":"Sub Label","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Sub Label","parameters":{"__id":"dropdownselector--sub-label","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--long-names":{"id":"dropdownselector--long-names","name":"Long Names","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Long Names","parameters":{"__id":"dropdownselector--long-names","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--in-modal":{"id":"dropdownselector--in-modal","name":"In Modal","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"In Modal","parameters":{"__id":"dropdownselector--in-modal","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--in-form-tag":{"id":"dropdownselector--in-form-tag","name":"In Form Tag","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"In Form Tag","parameters":{"__id":"dropdownselector--in-form-tag","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--custom-children":{"id":"dropdownselector--custom-children","name":"Custom Children","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Custom Children","parameters":{"__id":"dropdownselector--custom-children","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--section":{"id":"dropdownselector--section","name":"Section","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Section","parameters":{"__id":"dropdownselector--section","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"icon--default":{"id":"icon--default","name":"Default","title":"Icon","importPath":"./packages/react/src/components/Icon/index.story.tsx","tags":["story"],"kind":"Icon","story":"Default","parameters":{"__id":"icon--default","docsOnly":false,"fileName":"./packages/react/src/components/Icon/index.story.tsx"}},"iconbutton--default-m":{"id":"iconbutton--default-m","name":"Default M","title":"IconButton","importPath":"./packages/react/src/components/IconButton/index.story.tsx","tags":["story"],"kind":"IconButton","story":"Default M","parameters":{"__id":"iconbutton--default-m","docsOnly":false,"fileName":"./packages/react/src/components/IconButton/index.story.tsx"}},"iconbutton--is-active":{"id":"iconbutton--is-active","name":"Is Active","title":"IconButton","importPath":"./packages/react/src/components/IconButton/index.story.tsx","tags":["story"],"kind":"IconButton","story":"Is Active","parameters":{"__id":"iconbutton--is-active","docsOnly":false,"fileName":"./packages/react/src/components/IconButton/index.story.tsx"}},"iconbutton--overlay-m":{"id":"iconbutton--overlay-m","name":"Overlay M","title":"IconButton","importPath":"./packages/react/src/components/IconButton/index.story.tsx","tags":["story"],"kind":"IconButton","story":"Overlay M","parameters":{"__id":"iconbutton--overlay-m","docsOnly":false,"fileName":"./packages/react/src/components/IconButton/index.story.tsx"}},"loadingspinnericon--icon":{"id":"loadingspinnericon--icon","name":"Icon","title":"LoadingSpinnerIcon","importPath":"./packages/react/src/components/LoadingSpinner/LoadingSpinnerIcon.story.tsx","tags":["skip-test","story"],"kind":"LoadingSpinnerIcon","story":"Icon","parameters":{"__id":"loadingspinnericon--icon","docsOnly":false,"fileName":"./packages/react/src/components/LoadingSpinner/LoadingSpinnerIcon.story.tsx"}},"loadingspinner--default":{"id":"loadingspinner--default","name":"Default","title":"LoadingSpinner","importPath":"./packages/react/src/components/LoadingSpinner/index.story.tsx","tags":["skip-test","story"],"kind":"LoadingSpinner","story":"Default","parameters":{"__id":"loadingspinner--default","docsOnly":false,"fileName":"./packages/react/src/components/LoadingSpinner/index.story.tsx"}},"modal--default":{"id":"modal--default","name":"Default","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"],"kind":"Modal","story":"Default","parameters":{"__id":"modal--default","docsOnly":false,"fileName":"./packages/react/src/components/Modal/index.story.tsx"}},"modal--full-bottom-sheet":{"id":"modal--full-bottom-sheet","name":"Full Bottom Sheet","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"],"kind":"Modal","story":"Full Bottom Sheet","parameters":{"__id":"modal--full-bottom-sheet","docsOnly":false,"fileName":"./packages/react/src/components/Modal/index.story.tsx"}},"modal--bottom-sheet":{"id":"modal--bottom-sheet","name":"Bottom Sheet","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"],"kind":"Modal","story":"Bottom Sheet","parameters":{"__id":"modal--bottom-sheet","docsOnly":false,"fileName":"./packages/react/src/components/Modal/index.story.tsx"}},"modal--not-dismmissable-story":{"id":"modal--not-dismmissable-story","name":"Not Dismmissable Story","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"],"kind":"Modal","story":"Not Dismmissable Story","parameters":{"__id":"modal--not-dismmissable-story","docsOnly":false,"fileName":"./packages/react/src/components/Modal/index.story.tsx"}},"modal--background-scroll":{"id":"modal--background-scroll","name":"Background Scroll","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"],"kind":"Modal","story":"Background Scroll","parameters":{"__id":"modal--background-scroll","docsOnly":false,"fileName":"./packages/react/src/components/Modal/index.story.tsx"}},"modal--internal-scroll":{"id":"modal--internal-scroll","name":"InternalScroll","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"],"kind":"Modal","story":"InternalScroll","parameters":{"__id":"modal--internal-scroll","docsOnly":false,"fileName":"./packages/react/src/components/Modal/index.story.tsx"}},"multiselect--default":{"id":"multiselect--default","name":"Default","title":"MultiSelect","importPath":"./packages/react/src/components/MultiSelect/index.story.tsx","tags":["story"],"kind":"MultiSelect","story":"Default","parameters":{"__id":"multiselect--default","docsOnly":false,"fileName":"./packages/react/src/components/MultiSelect/index.story.tsx"}},"multiselect--playground":{"id":"multiselect--playground","name":"Playground","title":"MultiSelect","importPath":"./packages/react/src/components/MultiSelect/index.story.tsx","tags":["story"],"kind":"MultiSelect","story":"Playground","parameters":{"__id":"multiselect--playground","docsOnly":false,"fileName":"./packages/react/src/components/MultiSelect/index.story.tsx"}},"multiselect--invalid":{"id":"multiselect--invalid","name":"Invalid","title":"MultiSelect","importPath":"./packages/react/src/components/MultiSelect/index.story.tsx","tags":["story"],"kind":"MultiSelect","story":"Invalid","parameters":{"__id":"multiselect--invalid","docsOnly":false,"fileName":"./packages/react/src/components/MultiSelect/index.story.tsx"}},"multiselect--overlay":{"id":"multiselect--overlay","name":"Overlay","title":"MultiSelect","importPath":"./packages/react/src/components/MultiSelect/index.story.tsx","tags":["story"],"kind":"MultiSelect","story":"Overlay","parameters":{"__id":"multiselect--overlay","docsOnly":false,"fileName":"./packages/react/src/components/MultiSelect/index.story.tsx"}},"radio--basic":{"id":"radio--basic","name":"Basic","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"],"kind":"Radio","story":"Basic","parameters":{"__id":"radio--basic","docsOnly":false,"fileName":"./packages/react/src/components/Radio/index.story.tsx"}},"radio--disabled":{"id":"radio--disabled","name":"Disabled","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"],"kind":"Radio","story":"Disabled","parameters":{"__id":"radio--disabled","docsOnly":false,"fileName":"./packages/react/src/components/Radio/index.story.tsx"}},"radio--partial-disabled":{"id":"radio--partial-disabled","name":"Partial Disabled","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"],"kind":"Radio","story":"Partial Disabled","parameters":{"__id":"radio--partial-disabled","docsOnly":false,"fileName":"./packages/react/src/components/Radio/index.story.tsx"}},"radio--readonly":{"id":"radio--readonly","name":"Readonly","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"],"kind":"Radio","story":"Readonly","parameters":{"__id":"radio--readonly","docsOnly":false,"fileName":"./packages/react/src/components/Radio/index.story.tsx"}},"radio--invalid":{"id":"radio--invalid","name":"Invalid","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"],"kind":"Radio","story":"Invalid","parameters":{"__id":"radio--invalid","docsOnly":false,"fileName":"./packages/react/src/components/Radio/index.story.tsx"}},"segmentedcontrol--string-segments":{"id":"segmentedcontrol--string-segments","name":"String Segments","title":"SegmentedControl","importPath":"./packages/react/src/components/SegmentedControl/index.story.tsx","tags":["story"],"kind":"SegmentedControl","story":"String Segments","parameters":{"__id":"segmentedcontrol--string-segments","docsOnly":false,"fileName":"./packages/react/src/components/SegmentedControl/index.story.tsx"}},"segmentedcontrol--object-segments":{"id":"segmentedcontrol--object-segments","name":"Object Segments","title":"SegmentedControl","importPath":"./packages/react/src/components/SegmentedControl/index.story.tsx","tags":["story"],"kind":"SegmentedControl","story":"Object Segments","parameters":{"__id":"segmentedcontrol--object-segments","docsOnly":false,"fileName":"./packages/react/src/components/SegmentedControl/index.story.tsx"}},"switch--basic":{"id":"switch--basic","name":"Basic","title":"Switch","importPath":"./packages/react/src/components/Switch/index.story.tsx","tags":["story"],"kind":"Switch","story":"Basic","parameters":{"__id":"switch--basic","docsOnly":false,"fileName":"./packages/react/src/components/Switch/index.story.tsx"}},"switch--checked":{"id":"switch--checked","name":"Checked","title":"Switch","importPath":"./packages/react/src/components/Switch/index.story.tsx","tags":["story"],"kind":"Switch","story":"Checked","parameters":{"__id":"switch--checked","docsOnly":false,"fileName":"./packages/react/src/components/Switch/index.story.tsx"}},"switch--labelled":{"id":"switch--labelled","name":"Labelled","title":"Switch","importPath":"./packages/react/src/components/Switch/index.story.tsx","tags":["story"],"kind":"Switch","story":"Labelled","parameters":{"__id":"switch--labelled","docsOnly":false,"fileName":"./packages/react/src/components/Switch/index.story.tsx"}},"switch--disabled":{"id":"switch--disabled","name":"Disabled","title":"Switch","importPath":"./packages/react/src/components/Switch/index.story.tsx","tags":["story"],"kind":"Switch","story":"Disabled","parameters":{"__id":"switch--disabled","docsOnly":false,"fileName":"./packages/react/src/components/Switch/index.story.tsx"}},"tagitem--default":{"id":"tagitem--default","name":"Default","title":"TagItem","importPath":"./packages/react/src/components/TagItem/index.story.tsx","tags":["story"],"kind":"TagItem","story":"Default","parameters":{"__id":"tagitem--default","docsOnly":false,"fileName":"./packages/react/src/components/TagItem/index.story.tsx"}},"tagitem--playground":{"id":"tagitem--playground","name":"Playground","title":"TagItem","importPath":"./packages/react/src/components/TagItem/index.story.tsx","tags":["story"],"kind":"TagItem","story":"Playground","parameters":{"__id":"tagitem--playground","docsOnly":false,"fileName":"./packages/react/src/components/TagItem/index.story.tsx"}},"textarea--default":{"id":"textarea--default","name":"Default","title":"TextArea","importPath":"./packages/react/src/components/TextArea/TextArea.story.tsx","tags":["story"],"kind":"TextArea","story":"Default","parameters":{"__id":"textarea--default","docsOnly":false,"fileName":"./packages/react/src/components/TextArea/TextArea.story.tsx"}},"textarea--has-label":{"id":"textarea--has-label","name":"Has Label","title":"TextArea","importPath":"./packages/react/src/components/TextArea/TextArea.story.tsx","tags":["story"],"kind":"TextArea","story":"Has Label","parameters":{"__id":"textarea--has-label","docsOnly":false,"fileName":"./packages/react/src/components/TextArea/TextArea.story.tsx"}},"textarea--has-count":{"id":"textarea--has-count","name":"Has Count","title":"TextArea","importPath":"./packages/react/src/components/TextArea/TextArea.story.tsx","tags":["story"],"kind":"TextArea","story":"Has Count","parameters":{"__id":"textarea--has-count","docsOnly":false,"fileName":"./packages/react/src/components/TextArea/TextArea.story.tsx"}},"textarea--auto-height":{"id":"textarea--auto-height","name":"Auto Height","title":"TextArea","importPath":"./packages/react/src/components/TextArea/TextArea.story.tsx","tags":["story"],"kind":"TextArea","story":"Auto Height","parameters":{"__id":"textarea--auto-height","docsOnly":false,"fileName":"./packages/react/src/components/TextArea/TextArea.story.tsx"}},"textfield--default":{"id":"textfield--default","name":"Default","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"],"kind":"TextField","story":"Default","parameters":{"__id":"textfield--default","docsOnly":false,"fileName":"./packages/react/src/components/TextField/TextField.story.tsx"}},"textfield--number":{"id":"textfield--number","name":"Number","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"],"kind":"TextField","story":"Number","parameters":{"__id":"textfield--number","docsOnly":false,"fileName":"./packages/react/src/components/TextField/TextField.story.tsx"}},"textfield--has-label":{"id":"textfield--has-label","name":"Has Label","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"],"kind":"TextField","story":"Has Label","parameters":{"__id":"textfield--has-label","docsOnly":false,"fileName":"./packages/react/src/components/TextField/TextField.story.tsx"}},"textfield--has-count":{"id":"textfield--has-count","name":"Has Count","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"],"kind":"TextField","story":"Has Count","parameters":{"__id":"textfield--has-count","docsOnly":false,"fileName":"./packages/react/src/components/TextField/TextField.story.tsx"}},"textfield--has-affix":{"id":"textfield--has-affix","name":"Has Affix","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"],"kind":"TextField","story":"Has Affix","parameters":{"__id":"textfield--has-affix","docsOnly":false,"fileName":"./packages/react/src/components/TextField/TextField.story.tsx"}},"textfield--prefix-icon":{"id":"textfield--prefix-icon","name":"Prefix Icon","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"],"kind":"TextField","story":"Prefix Icon","parameters":{"__id":"textfield--prefix-icon","docsOnly":false,"fileName":"./packages/react/src/components/TextField/TextField.story.tsx"}},"styled--example":{"id":"styled--example","name":"Example","title":"styled","importPath":"./packages/styled/src/index.story.tsx","tags":["story"],"kind":"styled","story":"Example","parameters":{"__id":"styled--example","docsOnly":false,"fileName":"./packages/styled/src/index.story.tsx"}},"tailwind-config-colors-text-bg-color--playground":{"id":"tailwind-config-colors-text-bg-color--playground","name":"Playground","title":"tailwind-config/Colors/Text bg color","importPath":"./packages/tailwind-config/src/docs/colors/TextBgColor.story.tsx","tags":["story"],"kind":"tailwind-config/Colors/Text bg color","story":"Playground","parameters":{"__id":"tailwind-config-colors-text-bg-color--playground","docsOnly":false,"fileName":"./packages/tailwind-config/src/docs/colors/TextBgColor.story.tsx"}}}}
+{"v":3,"stories":{"styled-addthemeutils--docs":{"id":"styled-addthemeutils--docs","title":"styled/addThemeUtils","name":"Docs","importPath":"./packages/styled/src/themeUtils.mdx","storiesImports":["./packages/styled/src/index.story.tsx"],"tags":["unattached-mdx","docs"],"kind":"styled/addThemeUtils","story":"Docs","parameters":{"__id":"styled-addthemeutils--docs","docsOnly":true,"fileName":"./packages/styled/src/themeUtils.mdx"}},"tailwind-config-borderradius--docs":{"id":"tailwind-config-borderradius--docs","title":"tailwind-config/BorderRadius","name":"Docs","importPath":"./packages/tailwind-config/src/docs/borderRadius/index.mdx","storiesImports":[],"tags":["unattached-mdx","docs"],"kind":"tailwind-config/BorderRadius","story":"Docs","parameters":{"__id":"tailwind-config-borderradius--docs","docsOnly":true,"fileName":"./packages/tailwind-config/src/docs/borderRadius/index.mdx"}},"tailwind-config-colors-doc--docs":{"id":"tailwind-config-colors-doc--docs","title":"tailwind-config/Colors/Doc","name":"Docs","importPath":"./packages/tailwind-config/src/docs/colors/index.mdx","storiesImports":[],"tags":["unattached-mdx","docs"],"kind":"tailwind-config/Colors/Doc","story":"Docs","parameters":{"__id":"tailwind-config-colors-doc--docs","docsOnly":true,"fileName":"./packages/tailwind-config/src/docs/colors/index.mdx"}},"tailwind-config-gradients--docs":{"id":"tailwind-config-gradients--docs","title":"tailwind-config/Gradients","name":"Docs","importPath":"./packages/tailwind-config/src/docs/gradient/index.mdx","storiesImports":[],"tags":["unattached-mdx","docs"],"kind":"tailwind-config/Gradients","story":"Docs","parameters":{"__id":"tailwind-config-gradients--docs","docsOnly":true,"fileName":"./packages/tailwind-config/src/docs/gradient/index.mdx"}},"tailwind-config-screens--docs":{"id":"tailwind-config-screens--docs","title":"tailwind-config/Screens","name":"Docs","importPath":"./packages/tailwind-config/src/docs/screens/index.mdx","storiesImports":[],"tags":["unattached-mdx","docs"],"kind":"tailwind-config/Screens","story":"Docs","parameters":{"__id":"tailwind-config-screens--docs","docsOnly":true,"fileName":"./packages/tailwind-config/src/docs/screens/index.mdx"}},"tailwind-config-spacing--docs":{"id":"tailwind-config-spacing--docs","title":"tailwind-config/Spacing","name":"Docs","importPath":"./packages/tailwind-config/src/docs/spacing/index.mdx","storiesImports":[],"tags":["unattached-mdx","docs"],"kind":"tailwind-config/Spacing","story":"Docs","parameters":{"__id":"tailwind-config-spacing--docs","docsOnly":true,"fileName":"./packages/tailwind-config/src/docs/spacing/index.mdx"}},"tailwind-config-typography--docs":{"id":"tailwind-config-typography--docs","title":"tailwind-config/Typography","name":"Docs","importPath":"./packages/tailwind-config/src/docs/typography/index.mdx","storiesImports":[],"tags":["unattached-mdx","docs"],"kind":"tailwind-config/Typography","story":"Docs","parameters":{"__id":"tailwind-config-typography--docs","docsOnly":true,"fileName":"./packages/tailwind-config/src/docs/typography/index.mdx"}},"icons-pixivicon-pixiv-icon--default":{"id":"icons-pixivicon-pixiv-icon--default","name":"Default","title":"Icons/PixivIcon (<pixiv-icon>)","importPath":"./packages/icons/src/PixivIcon.story.tsx","tags":["story"],"kind":"Icons/PixivIcon (<pixiv-icon>)","story":"Default","parameters":{"__id":"icons-pixivicon-pixiv-icon--default","docsOnly":false,"fileName":"./packages/icons/src/PixivIcon.story.tsx"}},"icons-pixivicon-pixiv-icon--with-attributes":{"id":"icons-pixivicon-pixiv-icon--with-attributes","name":"With Attributes","title":"Icons/PixivIcon (<pixiv-icon>)","importPath":"./packages/icons/src/PixivIcon.story.tsx","tags":["story"],"kind":"Icons/PixivIcon (<pixiv-icon>)","story":"With Attributes","parameters":{"__id":"icons-pixivicon-pixiv-icon--with-attributes","docsOnly":false,"fileName":"./packages/icons/src/PixivIcon.story.tsx"}},"icons-pixivicon-pixiv-icon--with-unsafe":{"id":"icons-pixivicon-pixiv-icon--with-unsafe","name":"With Unsafe","title":"Icons/PixivIcon (<pixiv-icon>)","importPath":"./packages/icons/src/PixivIcon.story.tsx","tags":["story"],"kind":"Icons/PixivIcon (<pixiv-icon>)","story":"With Unsafe","parameters":{"__id":"icons-pixivicon-pixiv-icon--with-unsafe","docsOnly":false,"fileName":"./packages/icons/src/PixivIcon.story.tsx"}},"sandbox-carousel--carousel":{"id":"sandbox-carousel--carousel","name":"Carousel","title":"Sandbox/Carousel","importPath":"./packages/react-sandbox/src/components/Carousel/index.story.tsx","tags":["story"],"kind":"Sandbox/Carousel","story":"Carousel","parameters":{"__id":"sandbox-carousel--carousel","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Carousel/index.story.tsx"}},"sandbox-carousel-carouselbutton--carousel-button":{"id":"sandbox-carousel-carouselbutton--carousel-button","name":"Carousel Button","title":"Sandbox/Carousel/CarouselButton","importPath":"./packages/react-sandbox/src/components/CarouselButton/index.story.tsx","tags":["story"],"kind":"Sandbox/Carousel/CarouselButton","story":"Carousel Button","parameters":{"__id":"sandbox-carousel-carouselbutton--carousel-button","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/CarouselButton/index.story.tsx"}},"sandbox-carousel-carouselbutton--scroll-hint-button":{"id":"sandbox-carousel-carouselbutton--scroll-hint-button","name":"Scroll Hint Button","title":"Sandbox/Carousel/CarouselButton","importPath":"./packages/react-sandbox/src/components/CarouselButton/index.story.tsx","tags":["story"],"kind":"Sandbox/Carousel/CarouselButton","story":"Scroll Hint Button","parameters":{"__id":"sandbox-carousel-carouselbutton--scroll-hint-button","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/CarouselButton/index.story.tsx"}},"sandbox-filter--default":{"id":"sandbox-filter--default","name":"Default","title":"Sandbox/Filter","importPath":"./packages/react-sandbox/src/components/Filter/index.story.tsx","tags":["story"],"kind":"Sandbox/Filter","story":"Default","parameters":{"__id":"sandbox-filter--default","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Filter/index.story.tsx"}},"sandbox-filter--button":{"id":"sandbox-filter--button","name":"Button","title":"Sandbox/Filter","importPath":"./packages/react-sandbox/src/components/Filter/index.story.tsx","tags":["story"],"kind":"Sandbox/Filter","story":"Button","parameters":{"__id":"sandbox-filter--button","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Filter/index.story.tsx"}},"sandbox-filter--link":{"id":"sandbox-filter--link","name":"Link","title":"Sandbox/Filter","importPath":"./packages/react-sandbox/src/components/Filter/index.story.tsx","tags":["story"],"kind":"Sandbox/Filter","story":"Link","parameters":{"__id":"sandbox-filter--link","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Filter/index.story.tsx"}},"sandbox-hinttext--default":{"id":"sandbox-hinttext--default","name":"Default","title":"Sandbox/HintText","importPath":"./packages/react-sandbox/src/components/HintText/index.story.tsx","tags":["story"],"kind":"Sandbox/HintText","story":"Default","parameters":{"__id":"sandbox-hinttext--default","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/HintText/index.story.tsx"}},"sandbox-layout--basic":{"id":"sandbox-layout--basic","name":"Basic","title":"Sandbox/Layout","importPath":"./packages/react-sandbox/src/components/Layout/index.story.tsx","tags":["story"],"kind":"Sandbox/Layout","story":"Basic","parameters":{"__id":"sandbox-layout--basic","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Layout/index.story.tsx"}},"sandbox-layout--no-menu":{"id":"sandbox-layout--no-menu","name":"No Menu","title":"Sandbox/Layout","importPath":"./packages/react-sandbox/src/components/Layout/index.story.tsx","tags":["story"],"kind":"Sandbox/Layout","story":"No Menu","parameters":{"__id":"sandbox-layout--no-menu","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Layout/index.story.tsx"}},"sandbox-layout--wide":{"id":"sandbox-layout--wide","name":"Wide","title":"Sandbox/Layout","importPath":"./packages/react-sandbox/src/components/Layout/index.story.tsx","tags":["story"],"kind":"Sandbox/Layout","story":"Wide","parameters":{"__id":"sandbox-layout--wide","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Layout/index.story.tsx"}},"sandbox-layout--center":{"id":"sandbox-layout--center","name":"Center","title":"Sandbox/Layout","importPath":"./packages/react-sandbox/src/components/Layout/index.story.tsx","tags":["story"],"kind":"Sandbox/Layout","story":"Center","parameters":{"__id":"sandbox-layout--center","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Layout/index.story.tsx"}},"sandbox-menulistitem--default":{"id":"sandbox-menulistitem--default","name":"Default","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Default","parameters":{"__id":"sandbox-menulistitem--default","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--simple":{"id":"sandbox-menulistitem--simple","name":"Simple","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Simple","parameters":{"__id":"sandbox-menulistitem--simple","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--disabled":{"id":"sandbox-menulistitem--disabled","name":"Disabled","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Disabled","parameters":{"__id":"sandbox-menulistitem--disabled","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--link":{"id":"sandbox-menulistitem--link","name":"Link","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Link","parameters":{"__id":"sandbox-menulistitem--link","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--hard-link":{"id":"sandbox-menulistitem--hard-link","name":"Hard Link","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Hard Link","parameters":{"__id":"sandbox-menulistitem--hard-link","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--inline-icon":{"id":"sandbox-menulistitem--inline-icon","name":"Inline Icon","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Inline Icon","parameters":{"__id":"sandbox-menulistitem--inline-icon","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--icon":{"id":"sandbox-menulistitem--icon","name":"Icon","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Icon","parameters":{"__id":"sandbox-menulistitem--icon","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--no-hover-effect":{"id":"sandbox-menulistitem--no-hover-effect","name":"No Hover Effect","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"No Hover Effect","parameters":{"__id":"sandbox-menulistitem--no-hover-effect","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--spacer":{"id":"sandbox-menulistitem--spacer","name":"Spacer","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Spacer","parameters":{"__id":"sandbox-menulistitem--spacer","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--label":{"id":"sandbox-menulistitem--label","name":"Label","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Label","parameters":{"__id":"sandbox-menulistitem--label","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-menulistitem--text-ellipsis":{"id":"sandbox-menulistitem--text-ellipsis","name":"Text Ellipsis","title":"Sandbox/MenuListItem","importPath":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx","tags":["story"],"kind":"Sandbox/MenuListItem","story":"Text Ellipsis","parameters":{"__id":"sandbox-menulistitem--text-ellipsis","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/MenuListItem/index.story.tsx"}},"sandbox-pager--default":{"id":"sandbox-pager--default","name":"Default","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"],"kind":"Sandbox/Pager","story":"Default","parameters":{"__id":"sandbox-pager--default","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Pager/index.story.tsx"}},"sandbox-pager--link":{"id":"sandbox-pager--link","name":"Link","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"],"kind":"Sandbox/Pager","story":"Link","parameters":{"__id":"sandbox-pager--link","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Pager/index.story.tsx"}},"sandbox-pager--not-collapsed":{"id":"sandbox-pager--not-collapsed","name":"Not Collapsed","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"],"kind":"Sandbox/Pager","story":"Not Collapsed","parameters":{"__id":"sandbox-pager--not-collapsed","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Pager/index.story.tsx"}},"sandbox-pager--collapsed-with-dots":{"id":"sandbox-pager--collapsed-with-dots","name":"Collapsed With Dots","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"],"kind":"Sandbox/Pager","story":"Collapsed With Dots","parameters":{"__id":"sandbox-pager--collapsed-with-dots","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Pager/index.story.tsx"}},"sandbox-pager--last-page":{"id":"sandbox-pager--last-page","name":"Last Page","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"],"kind":"Sandbox/Pager","story":"Last Page","parameters":{"__id":"sandbox-pager--last-page","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Pager/index.story.tsx"}},"sandbox-pager--one":{"id":"sandbox-pager--one","name":"One","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"],"kind":"Sandbox/Pager","story":"One","parameters":{"__id":"sandbox-pager--one","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Pager/index.story.tsx"}},"sandbox-pager--little-page-range-displayed":{"id":"sandbox-pager--little-page-range-displayed","name":"Little Page Range Displayed","title":"Sandbox/Pager","importPath":"./packages/react-sandbox/src/components/Pager/index.story.tsx","tags":["story"],"kind":"Sandbox/Pager","story":"Little Page Range Displayed","parameters":{"__id":"sandbox-pager--little-page-range-displayed","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/Pager/index.story.tsx"}},"sandbox-selection-control-switchcheckbox--default":{"id":"sandbox-selection-control-switchcheckbox--default","name":"Default","title":"Sandbox/Selection Control/SwitchCheckbox","importPath":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx","tags":["story"],"kind":"Sandbox/Selection Control/SwitchCheckbox","story":"Default","parameters":{"__id":"sandbox-selection-control-switchcheckbox--default","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx"}},"sandbox-selection-control-switchcheckbox--on":{"id":"sandbox-selection-control-switchcheckbox--on","name":"On","title":"Sandbox/Selection Control/SwitchCheckbox","importPath":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx","tags":["story"],"kind":"Sandbox/Selection Control/SwitchCheckbox","story":"On","parameters":{"__id":"sandbox-selection-control-switchcheckbox--on","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx"}},"sandbox-selection-control-switchcheckbox--off":{"id":"sandbox-selection-control-switchcheckbox--off","name":"Off","title":"Sandbox/Selection Control/SwitchCheckbox","importPath":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx","tags":["story"],"kind":"Sandbox/Selection Control/SwitchCheckbox","story":"Off","parameters":{"__id":"sandbox-selection-control-switchcheckbox--off","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx"}},"sandbox-selection-control-switchcheckbox--disabled":{"id":"sandbox-selection-control-switchcheckbox--disabled","name":"Disabled","title":"Sandbox/Selection Control/SwitchCheckbox","importPath":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx","tags":["story"],"kind":"Sandbox/Selection Control/SwitchCheckbox","story":"Disabled","parameters":{"__id":"sandbox-selection-control-switchcheckbox--disabled","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx"}},"sandbox-textellipsis--default":{"id":"sandbox-textellipsis--default","name":"Default","title":"Sandbox/TextEllipsis","importPath":"./packages/react-sandbox/src/components/TextEllipsis/index.story.tsx","tags":["story"],"kind":"Sandbox/TextEllipsis","story":"Default","parameters":{"__id":"sandbox-textellipsis--default","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/TextEllipsis/index.story.tsx"}},"sandbox-withicon--default":{"id":"sandbox-withicon--default","name":"Default","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"],"kind":"Sandbox/WithIcon","story":"Default","parameters":{"__id":"sandbox-withicon--default","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx"}},"sandbox-withicon--performance":{"id":"sandbox-withicon--performance","name":"Performance","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"],"kind":"Sandbox/WithIcon","story":"Performance","parameters":{"__id":"sandbox-withicon--performance","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx"}},"sandbox-withicon--naive":{"id":"sandbox-withicon--naive","name":"Naive","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"],"kind":"Sandbox/WithIcon","story":"Naive","parameters":{"__id":"sandbox-withicon--naive","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx"}},"sandbox-withicon--prefix":{"id":"sandbox-withicon--prefix","name":"Prefix","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"],"kind":"Sandbox/WithIcon","story":"Prefix","parameters":{"__id":"sandbox-withicon--prefix","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx"}},"sandbox-withicon--hide":{"id":"sandbox-withicon--hide","name":"Hide","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"],"kind":"Sandbox/WithIcon","story":"Hide","parameters":{"__id":"sandbox-withicon--hide","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx"}},"sandbox-withicon--collapse":{"id":"sandbox-withicon--collapse","name":"Collapse","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"],"kind":"Sandbox/WithIcon","story":"Collapse","parameters":{"__id":"sandbox-withicon--collapse","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx"}},"sandbox-withicon--long-text":{"id":"sandbox-withicon--long-text","name":"Long Text","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"],"kind":"Sandbox/WithIcon","story":"Long Text","parameters":{"__id":"sandbox-withicon--long-text","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx"}},"sandbox-withicon--long-text-overflow":{"id":"sandbox-withicon--long-text-overflow","name":"Long Text Overflow","title":"Sandbox/WithIcon","importPath":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx","tags":["story"],"kind":"Sandbox/WithIcon","story":"Long Text Overflow","parameters":{"__id":"sandbox-withicon--long-text-overflow","docsOnly":false,"fileName":"./packages/react-sandbox/src/components/WithIcon/index.story.tsx"}},"button--default":{"id":"button--default","name":"Default","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Default","parameters":{"__id":"button--default","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--primary":{"id":"button--primary","name":"Primary","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Primary","parameters":{"__id":"button--primary","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--navigation":{"id":"button--navigation","name":"Navigation","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Navigation","parameters":{"__id":"button--navigation","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--overlay":{"id":"button--overlay","name":"Overlay","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Overlay","parameters":{"__id":"button--overlay","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--danger":{"id":"button--danger","name":"Danger","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Danger","parameters":{"__id":"button--danger","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--small":{"id":"button--small","name":"Small","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Small","parameters":{"__id":"button--small","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--fixed":{"id":"button--fixed","name":"Fixed","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Fixed","parameters":{"__id":"button--fixed","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--disabled":{"id":"button--disabled","name":"Disabled","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Disabled","parameters":{"__id":"button--disabled","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--active":{"id":"button--active","name":"Active","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Active","parameters":{"__id":"button--active","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--link":{"id":"button--link","name":"Link","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Link","parameters":{"__id":"button--link","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--nihongo":{"id":"button--nihongo","name":"Nihongo","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Nihongo","parameters":{"__id":"button--nihongo","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--focus":{"id":"button--focus","name":"Focus","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Focus","parameters":{"__id":"button--focus","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"button--layout-example":{"id":"button--layout-example","name":"Layout Example","title":"Button","importPath":"./packages/react/src/components/Button/index.story.tsx","tags":["story"],"kind":"Button","story":"Layout Example","parameters":{"__id":"button--layout-example","docsOnly":false,"fileName":"./packages/react/src/components/Button/index.story.tsx"}},"checkbox--labelled":{"id":"checkbox--labelled","name":"Labelled","title":"Checkbox","importPath":"./packages/react/src/components/Checkbox/index.story.tsx","tags":["story"],"kind":"Checkbox","story":"Labelled","parameters":{"__id":"checkbox--labelled","docsOnly":false,"fileName":"./packages/react/src/components/Checkbox/index.story.tsx"}},"checkbox--invalid":{"id":"checkbox--invalid","name":"Invalid","title":"Checkbox","importPath":"./packages/react/src/components/Checkbox/index.story.tsx","tags":["story"],"kind":"Checkbox","story":"Invalid","parameters":{"__id":"checkbox--invalid","docsOnly":false,"fileName":"./packages/react/src/components/Checkbox/index.story.tsx"}},"checkbox--unlabelled":{"id":"checkbox--unlabelled","name":"Unlabelled","title":"Checkbox","importPath":"./packages/react/src/components/Checkbox/index.story.tsx","tags":["story"],"kind":"Checkbox","story":"Unlabelled","parameters":{"__id":"checkbox--unlabelled","docsOnly":false,"fileName":"./packages/react/src/components/Checkbox/index.story.tsx"}},"clickable--button":{"id":"clickable--button","name":"Button","title":"Clickable","importPath":"./packages/react/src/components/Clickable/index.story.tsx","tags":["story"],"kind":"Clickable","story":"Button","parameters":{"__id":"clickable--button","docsOnly":false,"fileName":"./packages/react/src/components/Clickable/index.story.tsx"}},"clickable--link":{"id":"clickable--link","name":"Link","title":"Clickable","importPath":"./packages/react/src/components/Clickable/index.story.tsx","tags":["story"],"kind":"Clickable","story":"Link","parameters":{"__id":"clickable--link","docsOnly":false,"fileName":"./packages/react/src/components/Clickable/index.story.tsx"}},"dropdownselector-listitem--basic":{"id":"dropdownselector-listitem--basic","name":"Basic","title":"DropdownSelector/ListItem","importPath":"./packages/react/src/components/DropdownSelector/ListItem/index.story.tsx","tags":["story"],"kind":"DropdownSelector/ListItem","story":"Basic","parameters":{"__id":"dropdownselector-listitem--basic","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/ListItem/index.story.tsx"}},"dropdownselector-menulist--basic":{"id":"dropdownselector-menulist--basic","name":"Basic","title":"DropdownSelector/MenuList","importPath":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx","tags":["story"],"kind":"DropdownSelector/MenuList","story":"Basic","parameters":{"__id":"dropdownselector-menulist--basic","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx"}},"dropdownselector-menulist--disabled":{"id":"dropdownselector-menulist--disabled","name":"Disabled","title":"DropdownSelector/MenuList","importPath":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx","tags":["story"],"kind":"DropdownSelector/MenuList","story":"Disabled","parameters":{"__id":"dropdownselector-menulist--disabled","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx"}},"dropdownselector-menulist--group":{"id":"dropdownselector-menulist--group","name":"Group","title":"DropdownSelector/MenuList","importPath":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx","tags":["story"],"kind":"DropdownSelector/MenuList","story":"Group","parameters":{"__id":"dropdownselector-menulist--group","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/MenuList/index.story.tsx"}},"dropdownselector-popover--basic":{"id":"dropdownselector-popover--basic","name":"Basic","title":"DropdownSelector/Popover","importPath":"./packages/react/src/components/DropdownSelector/Popover/index.story.tsx","tags":["story"],"kind":"DropdownSelector/Popover","story":"Basic","parameters":{"__id":"dropdownselector-popover--basic","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/Popover/index.story.tsx"}},"dropdownselector--default":{"id":"dropdownselector--default","name":"Default","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Default","parameters":{"__id":"dropdownselector--default","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--label":{"id":"dropdownselector--label","name":"Label","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Label","parameters":{"__id":"dropdownselector--label","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--disabled":{"id":"dropdownselector--disabled","name":"Disabled","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Disabled","parameters":{"__id":"dropdownselector--disabled","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--disabled-item":{"id":"dropdownselector--disabled-item","name":"Disabled Item","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Disabled Item","parameters":{"__id":"dropdownselector--disabled-item","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--invalid":{"id":"dropdownselector--invalid","name":"Invalid","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Invalid","parameters":{"__id":"dropdownselector--invalid","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--assistive-text":{"id":"dropdownselector--assistive-text","name":"Assistive Text","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Assistive Text","parameters":{"__id":"dropdownselector--assistive-text","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--invalid-assistive-text":{"id":"dropdownselector--invalid-assistive-text","name":"Invalid Assistive Text","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Invalid Assistive Text","parameters":{"__id":"dropdownselector--invalid-assistive-text","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--required-text":{"id":"dropdownselector--required-text","name":"Required Text","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Required Text","parameters":{"__id":"dropdownselector--required-text","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--sub-label":{"id":"dropdownselector--sub-label","name":"Sub Label","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Sub Label","parameters":{"__id":"dropdownselector--sub-label","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--long-names":{"id":"dropdownselector--long-names","name":"Long Names","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Long Names","parameters":{"__id":"dropdownselector--long-names","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--in-modal":{"id":"dropdownselector--in-modal","name":"In Modal","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"In Modal","parameters":{"__id":"dropdownselector--in-modal","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--in-form-tag":{"id":"dropdownselector--in-form-tag","name":"In Form Tag","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"In Form Tag","parameters":{"__id":"dropdownselector--in-form-tag","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--custom-children":{"id":"dropdownselector--custom-children","name":"Custom Children","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Custom Children","parameters":{"__id":"dropdownselector--custom-children","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"dropdownselector--section":{"id":"dropdownselector--section","name":"Section","title":"DropdownSelector","importPath":"./packages/react/src/components/DropdownSelector/index.story.tsx","tags":["story"],"kind":"DropdownSelector","story":"Section","parameters":{"__id":"dropdownselector--section","docsOnly":false,"fileName":"./packages/react/src/components/DropdownSelector/index.story.tsx"}},"icon--default":{"id":"icon--default","name":"Default","title":"Icon","importPath":"./packages/react/src/components/Icon/index.story.tsx","tags":["story"],"kind":"Icon","story":"Default","parameters":{"__id":"icon--default","docsOnly":false,"fileName":"./packages/react/src/components/Icon/index.story.tsx"}},"iconbutton--default-m":{"id":"iconbutton--default-m","name":"Default M","title":"IconButton","importPath":"./packages/react/src/components/IconButton/index.story.tsx","tags":["story"],"kind":"IconButton","story":"Default M","parameters":{"__id":"iconbutton--default-m","docsOnly":false,"fileName":"./packages/react/src/components/IconButton/index.story.tsx"}},"iconbutton--is-active":{"id":"iconbutton--is-active","name":"Is Active","title":"IconButton","importPath":"./packages/react/src/components/IconButton/index.story.tsx","tags":["story"],"kind":"IconButton","story":"Is Active","parameters":{"__id":"iconbutton--is-active","docsOnly":false,"fileName":"./packages/react/src/components/IconButton/index.story.tsx"}},"iconbutton--overlay-m":{"id":"iconbutton--overlay-m","name":"Overlay M","title":"IconButton","importPath":"./packages/react/src/components/IconButton/index.story.tsx","tags":["story"],"kind":"IconButton","story":"Overlay M","parameters":{"__id":"iconbutton--overlay-m","docsOnly":false,"fileName":"./packages/react/src/components/IconButton/index.story.tsx"}},"loadingspinnericon--icon":{"id":"loadingspinnericon--icon","name":"Icon","title":"LoadingSpinnerIcon","importPath":"./packages/react/src/components/LoadingSpinner/LoadingSpinnerIcon.story.tsx","tags":["skip-test","story"],"kind":"LoadingSpinnerIcon","story":"Icon","parameters":{"__id":"loadingspinnericon--icon","docsOnly":false,"fileName":"./packages/react/src/components/LoadingSpinner/LoadingSpinnerIcon.story.tsx"}},"loadingspinner--default":{"id":"loadingspinner--default","name":"Default","title":"LoadingSpinner","importPath":"./packages/react/src/components/LoadingSpinner/index.story.tsx","tags":["skip-test","story"],"kind":"LoadingSpinner","story":"Default","parameters":{"__id":"loadingspinner--default","docsOnly":false,"fileName":"./packages/react/src/components/LoadingSpinner/index.story.tsx"}},"modal--default":{"id":"modal--default","name":"Default","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"],"kind":"Modal","story":"Default","parameters":{"__id":"modal--default","docsOnly":false,"fileName":"./packages/react/src/components/Modal/index.story.tsx"}},"modal--full-bottom-sheet":{"id":"modal--full-bottom-sheet","name":"Full Bottom Sheet","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"],"kind":"Modal","story":"Full Bottom Sheet","parameters":{"__id":"modal--full-bottom-sheet","docsOnly":false,"fileName":"./packages/react/src/components/Modal/index.story.tsx"}},"modal--bottom-sheet":{"id":"modal--bottom-sheet","name":"Bottom Sheet","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"],"kind":"Modal","story":"Bottom Sheet","parameters":{"__id":"modal--bottom-sheet","docsOnly":false,"fileName":"./packages/react/src/components/Modal/index.story.tsx"}},"modal--not-dismmissable-story":{"id":"modal--not-dismmissable-story","name":"Not Dismmissable Story","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"],"kind":"Modal","story":"Not Dismmissable Story","parameters":{"__id":"modal--not-dismmissable-story","docsOnly":false,"fileName":"./packages/react/src/components/Modal/index.story.tsx"}},"modal--background-scroll":{"id":"modal--background-scroll","name":"Background Scroll","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"],"kind":"Modal","story":"Background Scroll","parameters":{"__id":"modal--background-scroll","docsOnly":false,"fileName":"./packages/react/src/components/Modal/index.story.tsx"}},"modal--internal-scroll":{"id":"modal--internal-scroll","name":"InternalScroll","title":"Modal","importPath":"./packages/react/src/components/Modal/index.story.tsx","tags":["story"],"kind":"Modal","story":"InternalScroll","parameters":{"__id":"modal--internal-scroll","docsOnly":false,"fileName":"./packages/react/src/components/Modal/index.story.tsx"}},"multiselect--default":{"id":"multiselect--default","name":"Default","title":"MultiSelect","importPath":"./packages/react/src/components/MultiSelect/index.story.tsx","tags":["story"],"kind":"MultiSelect","story":"Default","parameters":{"__id":"multiselect--default","docsOnly":false,"fileName":"./packages/react/src/components/MultiSelect/index.story.tsx"}},"multiselect--playground":{"id":"multiselect--playground","name":"Playground","title":"MultiSelect","importPath":"./packages/react/src/components/MultiSelect/index.story.tsx","tags":["story"],"kind":"MultiSelect","story":"Playground","parameters":{"__id":"multiselect--playground","docsOnly":false,"fileName":"./packages/react/src/components/MultiSelect/index.story.tsx"}},"multiselect--invalid":{"id":"multiselect--invalid","name":"Invalid","title":"MultiSelect","importPath":"./packages/react/src/components/MultiSelect/index.story.tsx","tags":["story"],"kind":"MultiSelect","story":"Invalid","parameters":{"__id":"multiselect--invalid","docsOnly":false,"fileName":"./packages/react/src/components/MultiSelect/index.story.tsx"}},"multiselect--overlay":{"id":"multiselect--overlay","name":"Overlay","title":"MultiSelect","importPath":"./packages/react/src/components/MultiSelect/index.story.tsx","tags":["story"],"kind":"MultiSelect","story":"Overlay","parameters":{"__id":"multiselect--overlay","docsOnly":false,"fileName":"./packages/react/src/components/MultiSelect/index.story.tsx"}},"radio--basic":{"id":"radio--basic","name":"Basic","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"],"kind":"Radio","story":"Basic","parameters":{"__id":"radio--basic","docsOnly":false,"fileName":"./packages/react/src/components/Radio/index.story.tsx"}},"radio--disabled":{"id":"radio--disabled","name":"Disabled","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"],"kind":"Radio","story":"Disabled","parameters":{"__id":"radio--disabled","docsOnly":false,"fileName":"./packages/react/src/components/Radio/index.story.tsx"}},"radio--partial-disabled":{"id":"radio--partial-disabled","name":"Partial Disabled","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"],"kind":"Radio","story":"Partial Disabled","parameters":{"__id":"radio--partial-disabled","docsOnly":false,"fileName":"./packages/react/src/components/Radio/index.story.tsx"}},"radio--readonly":{"id":"radio--readonly","name":"Readonly","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"],"kind":"Radio","story":"Readonly","parameters":{"__id":"radio--readonly","docsOnly":false,"fileName":"./packages/react/src/components/Radio/index.story.tsx"}},"radio--invalid":{"id":"radio--invalid","name":"Invalid","title":"Radio","importPath":"./packages/react/src/components/Radio/index.story.tsx","tags":["story"],"kind":"Radio","story":"Invalid","parameters":{"__id":"radio--invalid","docsOnly":false,"fileName":"./packages/react/src/components/Radio/index.story.tsx"}},"segmentedcontrol--string-segments":{"id":"segmentedcontrol--string-segments","name":"String Segments","title":"SegmentedControl","importPath":"./packages/react/src/components/SegmentedControl/index.story.tsx","tags":["story"],"kind":"SegmentedControl","story":"String Segments","parameters":{"__id":"segmentedcontrol--string-segments","docsOnly":false,"fileName":"./packages/react/src/components/SegmentedControl/index.story.tsx"}},"segmentedcontrol--object-segments":{"id":"segmentedcontrol--object-segments","name":"Object Segments","title":"SegmentedControl","importPath":"./packages/react/src/components/SegmentedControl/index.story.tsx","tags":["story"],"kind":"SegmentedControl","story":"Object Segments","parameters":{"__id":"segmentedcontrol--object-segments","docsOnly":false,"fileName":"./packages/react/src/components/SegmentedControl/index.story.tsx"}},"switch--basic":{"id":"switch--basic","name":"Basic","title":"Switch","importPath":"./packages/react/src/components/Switch/index.story.tsx","tags":["story"],"kind":"Switch","story":"Basic","parameters":{"__id":"switch--basic","docsOnly":false,"fileName":"./packages/react/src/components/Switch/index.story.tsx"}},"switch--checked":{"id":"switch--checked","name":"Checked","title":"Switch","importPath":"./packages/react/src/components/Switch/index.story.tsx","tags":["story"],"kind":"Switch","story":"Checked","parameters":{"__id":"switch--checked","docsOnly":false,"fileName":"./packages/react/src/components/Switch/index.story.tsx"}},"switch--labelled":{"id":"switch--labelled","name":"Labelled","title":"Switch","importPath":"./packages/react/src/components/Switch/index.story.tsx","tags":["story"],"kind":"Switch","story":"Labelled","parameters":{"__id":"switch--labelled","docsOnly":false,"fileName":"./packages/react/src/components/Switch/index.story.tsx"}},"switch--disabled":{"id":"switch--disabled","name":"Disabled","title":"Switch","importPath":"./packages/react/src/components/Switch/index.story.tsx","tags":["story"],"kind":"Switch","story":"Disabled","parameters":{"__id":"switch--disabled","docsOnly":false,"fileName":"./packages/react/src/components/Switch/index.story.tsx"}},"tagitem--default":{"id":"tagitem--default","name":"Default","title":"TagItem","importPath":"./packages/react/src/components/TagItem/index.story.tsx","tags":["story"],"kind":"TagItem","story":"Default","parameters":{"__id":"tagitem--default","docsOnly":false,"fileName":"./packages/react/src/components/TagItem/index.story.tsx"}},"tagitem--playground":{"id":"tagitem--playground","name":"Playground","title":"TagItem","importPath":"./packages/react/src/components/TagItem/index.story.tsx","tags":["story"],"kind":"TagItem","story":"Playground","parameters":{"__id":"tagitem--playground","docsOnly":false,"fileName":"./packages/react/src/components/TagItem/index.story.tsx"}},"textarea--default":{"id":"textarea--default","name":"Default","title":"TextArea","importPath":"./packages/react/src/components/TextArea/TextArea.story.tsx","tags":["story"],"kind":"TextArea","story":"Default","parameters":{"__id":"textarea--default","docsOnly":false,"fileName":"./packages/react/src/components/TextArea/TextArea.story.tsx"}},"textarea--has-label":{"id":"textarea--has-label","name":"Has Label","title":"TextArea","importPath":"./packages/react/src/components/TextArea/TextArea.story.tsx","tags":["story"],"kind":"TextArea","story":"Has Label","parameters":{"__id":"textarea--has-label","docsOnly":false,"fileName":"./packages/react/src/components/TextArea/TextArea.story.tsx"}},"textarea--has-count":{"id":"textarea--has-count","name":"Has Count","title":"TextArea","importPath":"./packages/react/src/components/TextArea/TextArea.story.tsx","tags":["story"],"kind":"TextArea","story":"Has Count","parameters":{"__id":"textarea--has-count","docsOnly":false,"fileName":"./packages/react/src/components/TextArea/TextArea.story.tsx"}},"textarea--auto-height":{"id":"textarea--auto-height","name":"Auto Height","title":"TextArea","importPath":"./packages/react/src/components/TextArea/TextArea.story.tsx","tags":["story"],"kind":"TextArea","story":"Auto Height","parameters":{"__id":"textarea--auto-height","docsOnly":false,"fileName":"./packages/react/src/components/TextArea/TextArea.story.tsx"}},"textfield--default":{"id":"textfield--default","name":"Default","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"],"kind":"TextField","story":"Default","parameters":{"__id":"textfield--default","docsOnly":false,"fileName":"./packages/react/src/components/TextField/TextField.story.tsx"}},"textfield--number":{"id":"textfield--number","name":"Number","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"],"kind":"TextField","story":"Number","parameters":{"__id":"textfield--number","docsOnly":false,"fileName":"./packages/react/src/components/TextField/TextField.story.tsx"}},"textfield--has-label":{"id":"textfield--has-label","name":"Has Label","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"],"kind":"TextField","story":"Has Label","parameters":{"__id":"textfield--has-label","docsOnly":false,"fileName":"./packages/react/src/components/TextField/TextField.story.tsx"}},"textfield--has-count":{"id":"textfield--has-count","name":"Has Count","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"],"kind":"TextField","story":"Has Count","parameters":{"__id":"textfield--has-count","docsOnly":false,"fileName":"./packages/react/src/components/TextField/TextField.story.tsx"}},"textfield--has-affix":{"id":"textfield--has-affix","name":"Has Affix","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"],"kind":"TextField","story":"Has Affix","parameters":{"__id":"textfield--has-affix","docsOnly":false,"fileName":"./packages/react/src/components/TextField/TextField.story.tsx"}},"textfield--prefix-icon":{"id":"textfield--prefix-icon","name":"Prefix Icon","title":"TextField","importPath":"./packages/react/src/components/TextField/TextField.story.tsx","tags":["story"],"kind":"TextField","story":"Prefix Icon","parameters":{"__id":"textfield--prefix-icon","docsOnly":false,"fileName":"./packages/react/src/components/TextField/TextField.story.tsx"}},"styled-example--example":{"id":"styled-example--example","name":"Example","title":"styled/example","importPath":"./packages/styled/src/index.story.tsx","tags":["story"],"kind":"styled/example","story":"Example","parameters":{"__id":"styled-example--example","docsOnly":false,"fileName":"./packages/styled/src/index.story.tsx"}},"tailwind-config-colors-text-bg-color--playground":{"id":"tailwind-config-colors-text-bg-color--playground","name":"Playground","title":"tailwind-config/Colors/Text bg color","importPath":"./packages/tailwind-config/src/docs/colors/TextBgColor.story.tsx","tags":["story"],"kind":"tailwind-config/Colors/Text bg color","story":"Playground","parameters":{"__id":"tailwind-config-colors-text-bg-color--playground","docsOnly":false,"fileName":"./packages/tailwind-config/src/docs/colors/TextBgColor.story.tsx"}}}}
diff --git a/styled-src-index-story.b84a3917.iframe.bundle.js b/styled-src-index-story.b2b3727b.iframe.bundle.js
similarity index 86%
rename from styled-src-index-story.b84a3917.iframe.bundle.js
rename to styled-src-index-story.b2b3727b.iframe.bundle.js
index f8136dffd..a3d600977 100644
--- a/styled-src-index-story.b84a3917.iframe.bundle.js
+++ b/styled-src-index-story.b2b3727b.iframe.bundle.js
@@ -67,7 +67,7 @@
   }
 `,assertiveRingCss=styled_components_browser_esm.iv`
   box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-`;function addThemeUtils(theme){return{...theme,utils:{margin,marginTop,marginLeft,marginBottom,marginRight,padding,paddingTop,paddingLeft,paddingBottom,paddingRight,gap,rowGap,columnGap,typography,focusVisibleFocusRingCss,assertiveRingCss,disabledCss}}}function myTheme(theme){return{...addThemeUtils(theme),color:{...theme.color,mycolor:"#ff9e8c"}}}var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const index_story={title:"styled"},Example=()=>(0,jsx_runtime.jsx)(styled_components_browser_esm.f6,{theme:myTheme,children:(0,jsx_runtime.jsxs)(RootDiv,{children:[(0,jsx_runtime.jsx)(Bg1Div,{children:(0,jsx_runtime.jsx)(TypographyDiv,{children:"${({ theme }) => theme.utils.typography(14, true)}"})}),(0,jsx_runtime.jsx)(Bg1Div,{children:(0,jsx_runtime.jsx)(MarginDiv,{children:(0,jsx_runtime.jsx)(Pre,{children:(0,jsx_runtime.jsx)(Code,{children:"${({ theme }) => [\n    theme.utils.margin(16, 'auto'),\n    theme.utils.padding(4, 8, 16, 24),\n  ]}"})})})}),(0,jsx_runtime.jsx)(Bg1Div,{children:(0,jsx_runtime.jsx)(AssertiveRingDiv,{children:"theme.utils.assertiveRingCss"})}),(0,jsx_runtime.jsxs)(Bg1Div,{children:[(0,jsx_runtime.jsx)(StyledButton,{children:"theme.utils.focusVisibleFocusRingCss"}),(0,jsx_runtime.jsx)(StyledButton,{disabled:!0,children:"theme.utils.disabledCss"})]})]})});Example.displayName="Example";const RootDiv=styled_components_browser_esm.ZP.div`
+`;function addThemeUtils(theme){return{...theme,utils:{margin,marginTop,marginLeft,marginBottom,marginRight,padding,paddingTop,paddingLeft,paddingBottom,paddingRight,gap,rowGap,columnGap,typography,focusVisibleFocusRingCss,assertiveRingCss,disabledCss}}}function myTheme(theme){return{...addThemeUtils(theme),color:{...theme.color,mycolor:"#ff9e8c"}}}var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const index_story={title:"styled/example"},Example=()=>(0,jsx_runtime.jsx)(styled_components_browser_esm.f6,{theme:myTheme,children:(0,jsx_runtime.jsxs)(RootDiv,{children:[(0,jsx_runtime.jsx)(Bg1Div,{children:(0,jsx_runtime.jsx)(TypographyDiv,{children:"${({ theme }) => theme.utils.typography(14, true)}"})}),(0,jsx_runtime.jsx)(Bg1Div,{children:(0,jsx_runtime.jsx)(MarginDiv,{children:(0,jsx_runtime.jsx)(Pre,{children:(0,jsx_runtime.jsx)(Code,{children:"${({ theme }) => [\n    theme.utils.margin(16, 'auto'),\n    theme.utils.padding(4, 8, 16, 24),\n  ]}"})})})}),(0,jsx_runtime.jsx)(Bg1Div,{children:(0,jsx_runtime.jsx)(AssertiveRingDiv,{children:"theme.utils.assertiveRingCss"})}),(0,jsx_runtime.jsxs)(Bg1Div,{children:[(0,jsx_runtime.jsx)(StyledButton,{children:"theme.utils.focusVisibleFocusRingCss"}),(0,jsx_runtime.jsx)(StyledButton,{disabled:!0,children:"theme.utils.disabledCss"})]})]})});Example.displayName="Example";const RootDiv=styled_components_browser_esm.ZP.div`
   ${({theme})=>theme.utils.gap(40)}
   color: ${({theme})=>theme.color.text1};
   display: flex;
@@ -112,4 +112,4 @@
     background-color: var(--charcoal-brand-press);
   }
 `;Example.parameters={...Example.parameters,docs:{...Example.parameters?.docs,source:{originalSource:"() => <ThemeProvider theme={myTheme}>\n    <RootDiv>\n      <Bg1Div>\n        <TypographyDiv>\n          {'${({ theme }) => theme.utils.typography(14, true)}'}\n        </TypographyDiv>\n      </Bg1Div>\n\n      <Bg1Div>\n        <MarginDiv>\n          <Pre>\n            <Code>\n              {`\\${({ theme }) => [\n    theme.utils.margin(16, 'auto'),\n    theme.utils.padding(4, 8, 16, 24),\n  ]}`}\n            </Code>\n          </Pre>\n        </MarginDiv>\n      </Bg1Div>\n\n      <Bg1Div>\n        <AssertiveRingDiv>{'theme.utils.assertiveRingCss'}</AssertiveRingDiv>\n      </Bg1Div>\n\n      <Bg1Div>\n        <StyledButton>{'theme.utils.focusVisibleFocusRingCss'}</StyledButton>\n\n        <StyledButton disabled>{'theme.utils.disabledCss'}</StyledButton>\n      </Bg1Div>\n    </RootDiv>\n  </ThemeProvider>",...Example.parameters?.docs?.source}}};const __namedExportsOrder=["Example"]}}]);
-//# sourceMappingURL=styled-src-index-story.b84a3917.iframe.bundle.js.map
\ No newline at end of file
+//# sourceMappingURL=styled-src-index-story.b2b3727b.iframe.bundle.js.map
\ No newline at end of file
diff --git a/styled-src-index-story.b84a3917.iframe.bundle.js.map b/styled-src-index-story.b2b3727b.iframe.bundle.js.map
similarity index 98%
rename from styled-src-index-story.b84a3917.iframe.bundle.js.map
rename to styled-src-index-story.b2b3727b.iframe.bundle.js.map
index bcefef1de..0740ebe6e 100644
--- a/styled-src-index-story.b84a3917.iframe.bundle.js.map
+++ b/styled-src-index-story.b2b3727b.iframe.bundle.js.map
@@ -1 +1 @@
-{"version":3,"file":"styled-src-index-story.b84a3917.iframe.bundle.js","mappings":";AA+BA;AAEA;AAIA;AAEA;AAIA;AAEA;AAIA;AAEA;AAIA;AAEA;AC1BA;AAEA;AAIA;AAEA;AAIA;AAEA;AAIA;AAEA;AAIA;AAEA;AC5CA;AAEA;AAIA;AAEA;AAIA;AAEA;;;;;;ACzBA;;AAIA;;;;;;;;;;;;;;;;AAkBA;AAMA;AACA;;AAEA;AACA;AAIA;;;;;;;;;;;ACpCA;;ACwBA","sources":["webpack://charcoal-ui/./packages/styled/src/utils/margin.ts","webpack://charcoal-ui/./packages/styled/src/utils/padding.ts","webpack://charcoal-ui/./packages/styled/src/utils/gap.ts","webpack://charcoal-ui/./packages/styled/src/utils/typographyCss.ts","webpack://charcoal-ui/./packages/styled/src/styles/assertiveRingCss.ts","webpack://charcoal-ui/./packages/styled/src/utils/addThemeUtils.ts"],"sourcesContent":["import { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { SpacingType } from './helpers/SpacingType'\nimport { pxIfNum } from './helpers/pxIfNum'\n\nexport function margin(arg1: SpacingType): FlattenSimpleInterpolation\n\nexport function margin(\n  arg1: SpacingType,\n  arg2: SpacingType\n): FlattenSimpleInterpolation\n\nexport function margin(\n  arg1: SpacingType,\n  arg2: SpacingType,\n  arg3: SpacingType\n): FlattenSimpleInterpolation\n\nexport function margin(\n  arg1: SpacingType,\n  arg2: SpacingType,\n  arg3: SpacingType,\n  arg4: SpacingType\n): FlattenSimpleInterpolation\n\nexport function margin(\n  arg1: SpacingType,\n  arg2?: SpacingType,\n  arg3?: SpacingType,\n  arg4?: SpacingType\n) {\n  return css`\n    margin: ${pxIfNum(arg1)} ${pxIfNum(arg2)} ${pxIfNum(arg3)} ${pxIfNum(arg4)};\n  `\n}\n\nexport function marginTop(v: SpacingType) {\n  return css`\n    margin-top: ${pxIfNum(v)};\n  `\n}\n\nexport function marginBottom(v: SpacingType) {\n  return css`\n    margin-bottom: ${pxIfNum(v)};\n  `\n}\n\nexport function marginLeft(v: SpacingType) {\n  return css`\n    margin-left: ${pxIfNum(v)};\n  `\n}\n\nexport function marginRight(v: SpacingType) {\n  return css`\n    margin-right: ${pxIfNum(v)};\n  `\n}\n","import { Spacing } from '@charcoal-ui/theme'\nimport { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { pxIfNum } from './helpers/pxIfNum'\n\nexport function padding(arg1: keyof Spacing): FlattenSimpleInterpolation\n\nexport function padding(\n  arg1: keyof Spacing,\n  arg2: keyof Spacing\n): FlattenSimpleInterpolation\n\nexport function padding(\n  arg1: keyof Spacing,\n  arg2: keyof Spacing,\n  arg3: keyof Spacing\n): FlattenSimpleInterpolation\n\nexport function padding(\n  arg1: keyof Spacing,\n  arg2: keyof Spacing,\n  arg3: keyof Spacing,\n  arg4: keyof Spacing\n): FlattenSimpleInterpolation\n\nexport function padding(\n  arg1: keyof Spacing,\n  arg2?: keyof Spacing,\n  arg3?: keyof Spacing,\n  arg4?: keyof Spacing\n) {\n  return css`\n    padding: ${arg1}px ${pxIfNum(arg2)} ${pxIfNum(arg3)} ${pxIfNum(arg4)};\n  `\n}\n\nexport function paddingTop(v: keyof Spacing) {\n  return css`\n    padding-top: ${v}px;\n  `\n}\n\nexport function paddingBottom(v: keyof Spacing) {\n  return css`\n    padding-bottom: ${v}px;\n  `\n}\n\nexport function paddingLeft(v: keyof Spacing) {\n  return css`\n    padding-left: ${v}px;\n  `\n}\n\nexport function paddingRight(v: keyof Spacing) {\n  return css`\n    padding-right: ${v}px;\n  `\n}\n","import { Spacing } from '@charcoal-ui/theme'\nimport { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { pxIfNum } from './helpers/pxIfNum'\n\nexport function gap(v1: keyof Spacing): FlattenSimpleInterpolation\n\nexport function gap(\n  v1: keyof Spacing,\n  v2: keyof Spacing\n): FlattenSimpleInterpolation\n\nexport function gap(v1: keyof Spacing, v2?: keyof Spacing) {\n  return css`\n    gap: ${v1}px ${pxIfNum(v2)};\n  `\n}\n\nexport function rowGap(v: keyof Spacing) {\n  return css`\n    row-gap: ${v}px;\n  `\n}\n\nexport function columnGap(v: keyof Spacing) {\n  return css`\n    column-gap: ${v}px;\n  `\n}\n","import { css } from 'styled-components'\n\nconst boldCss = css`\n  font-weight: bold;\n`\n\nconst removeHalfLeadingCss = css`\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nexport function typography(\n  size: 12 | 14 | 16 | 20,\n  bold = false,\n  preserveHalfLeading = false\n) {\n  const cssObj = css`\n    font-size: ${size}px;\n    line-height: ${size + 8}px;\n    display: flow-root;\n    ${bold === true && boldCss}\n    ${preserveHalfLeading !== true && removeHalfLeadingCss}\n  `\n\n  return cssObj\n}\n","import { css } from 'styled-components'\n\nexport const assertiveRingCss = css`\n  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n`\n","import { CharcoalTheme } from '@charcoal-ui/theme'\nimport { CharcoalThemeUtils } from './CharcoalStyledTheme'\nimport {\n  margin,\n  marginBottom,\n  marginLeft,\n  marginRight,\n  marginTop,\n} from './margin'\nimport {\n  padding,\n  paddingBottom,\n  paddingLeft,\n  paddingRight,\n  paddingTop,\n} from './padding'\nimport { columnGap, gap, rowGap } from './gap'\nimport { disabledCss } from '../styles/disabledCss'\nimport { typography } from './typographyCss'\nimport { focusVisibleFocusRingCss } from '../styles/focusVisibleFocusRingCss'\nimport { assertiveRingCss } from '../styles/assertiveRingCss'\n\n/**\n * Adds some utilities to the theme object.\n * They can be used as an alternative `createTheme`(`theme(o=>)`) for styling.\n */\nexport function addThemeUtils(\n  theme: CharcoalTheme\n): CharcoalTheme & CharcoalThemeUtils {\n  return {\n    ...theme,\n    utils: {\n      margin,\n      marginTop,\n      marginLeft,\n      marginBottom,\n      marginRight,\n      padding,\n      paddingTop,\n      paddingLeft,\n      paddingBottom,\n      paddingRight,\n      gap,\n      rowGap,\n      columnGap,\n      typography,\n      focusVisibleFocusRingCss,\n      assertiveRingCss,\n      disabledCss,\n    },\n  }\n}\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"styled-src-index-story.b2b3727b.iframe.bundle.js","mappings":";AA+BA;AAEA;AAIA;AAEA;AAIA;AAEA;AAIA;AAEA;AAIA;AAEA;AC1BA;AAEA;AAIA;AAEA;AAIA;AAEA;AAIA;AAEA;AAIA;AAEA;AC5CA;AAEA;AAIA;AAEA;AAIA;AAEA;;;;;;ACzBA;;AAIA;;;;;;;;;;;;;;;;AAkBA;AAMA;AACA;;AAEA;AACA;AAIA;;;;;;;;;;;ACpCA;;ACwBA","sources":["webpack://charcoal-ui/./packages/styled/src/utils/margin.ts","webpack://charcoal-ui/./packages/styled/src/utils/padding.ts","webpack://charcoal-ui/./packages/styled/src/utils/gap.ts","webpack://charcoal-ui/./packages/styled/src/utils/typographyCss.ts","webpack://charcoal-ui/./packages/styled/src/styles/assertiveRingCss.ts","webpack://charcoal-ui/./packages/styled/src/utils/addThemeUtils.ts"],"sourcesContent":["import { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { SpacingType } from './helpers/SpacingType'\nimport { pxIfNum } from './helpers/pxIfNum'\n\nexport function margin(arg1: SpacingType): FlattenSimpleInterpolation\n\nexport function margin(\n  arg1: SpacingType,\n  arg2: SpacingType\n): FlattenSimpleInterpolation\n\nexport function margin(\n  arg1: SpacingType,\n  arg2: SpacingType,\n  arg3: SpacingType\n): FlattenSimpleInterpolation\n\nexport function margin(\n  arg1: SpacingType,\n  arg2: SpacingType,\n  arg3: SpacingType,\n  arg4: SpacingType\n): FlattenSimpleInterpolation\n\nexport function margin(\n  arg1: SpacingType,\n  arg2?: SpacingType,\n  arg3?: SpacingType,\n  arg4?: SpacingType\n) {\n  return css`\n    margin: ${pxIfNum(arg1)} ${pxIfNum(arg2)} ${pxIfNum(arg3)} ${pxIfNum(arg4)};\n  `\n}\n\nexport function marginTop(v: SpacingType) {\n  return css`\n    margin-top: ${pxIfNum(v)};\n  `\n}\n\nexport function marginBottom(v: SpacingType) {\n  return css`\n    margin-bottom: ${pxIfNum(v)};\n  `\n}\n\nexport function marginLeft(v: SpacingType) {\n  return css`\n    margin-left: ${pxIfNum(v)};\n  `\n}\n\nexport function marginRight(v: SpacingType) {\n  return css`\n    margin-right: ${pxIfNum(v)};\n  `\n}\n","import { Spacing } from '@charcoal-ui/theme'\nimport { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { pxIfNum } from './helpers/pxIfNum'\n\nexport function padding(arg1: keyof Spacing): FlattenSimpleInterpolation\n\nexport function padding(\n  arg1: keyof Spacing,\n  arg2: keyof Spacing\n): FlattenSimpleInterpolation\n\nexport function padding(\n  arg1: keyof Spacing,\n  arg2: keyof Spacing,\n  arg3: keyof Spacing\n): FlattenSimpleInterpolation\n\nexport function padding(\n  arg1: keyof Spacing,\n  arg2: keyof Spacing,\n  arg3: keyof Spacing,\n  arg4: keyof Spacing\n): FlattenSimpleInterpolation\n\nexport function padding(\n  arg1: keyof Spacing,\n  arg2?: keyof Spacing,\n  arg3?: keyof Spacing,\n  arg4?: keyof Spacing\n) {\n  return css`\n    padding: ${arg1}px ${pxIfNum(arg2)} ${pxIfNum(arg3)} ${pxIfNum(arg4)};\n  `\n}\n\nexport function paddingTop(v: keyof Spacing) {\n  return css`\n    padding-top: ${v}px;\n  `\n}\n\nexport function paddingBottom(v: keyof Spacing) {\n  return css`\n    padding-bottom: ${v}px;\n  `\n}\n\nexport function paddingLeft(v: keyof Spacing) {\n  return css`\n    padding-left: ${v}px;\n  `\n}\n\nexport function paddingRight(v: keyof Spacing) {\n  return css`\n    padding-right: ${v}px;\n  `\n}\n","import { Spacing } from '@charcoal-ui/theme'\nimport { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { pxIfNum } from './helpers/pxIfNum'\n\nexport function gap(v1: keyof Spacing): FlattenSimpleInterpolation\n\nexport function gap(\n  v1: keyof Spacing,\n  v2: keyof Spacing\n): FlattenSimpleInterpolation\n\nexport function gap(v1: keyof Spacing, v2?: keyof Spacing) {\n  return css`\n    gap: ${v1}px ${pxIfNum(v2)};\n  `\n}\n\nexport function rowGap(v: keyof Spacing) {\n  return css`\n    row-gap: ${v}px;\n  `\n}\n\nexport function columnGap(v: keyof Spacing) {\n  return css`\n    column-gap: ${v}px;\n  `\n}\n","import { css } from 'styled-components'\n\nconst boldCss = css`\n  font-weight: bold;\n`\n\nconst removeHalfLeadingCss = css`\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nexport function typography(\n  size: 12 | 14 | 16 | 20,\n  bold = false,\n  preserveHalfLeading = false\n) {\n  const cssObj = css`\n    font-size: ${size}px;\n    line-height: ${size + 8}px;\n    display: flow-root;\n    ${bold === true && boldCss}\n    ${preserveHalfLeading !== true && removeHalfLeadingCss}\n  `\n\n  return cssObj\n}\n","import { css } from 'styled-components'\n\nexport const assertiveRingCss = css`\n  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n`\n","import { CharcoalTheme } from '@charcoal-ui/theme'\nimport { CharcoalThemeUtils } from './CharcoalStyledTheme'\nimport {\n  margin,\n  marginBottom,\n  marginLeft,\n  marginRight,\n  marginTop,\n} from './margin'\nimport {\n  padding,\n  paddingBottom,\n  paddingLeft,\n  paddingRight,\n  paddingTop,\n} from './padding'\nimport { columnGap, gap, rowGap } from './gap'\nimport { disabledCss } from '../styles/disabledCss'\nimport { typography } from './typographyCss'\nimport { focusVisibleFocusRingCss } from '../styles/focusVisibleFocusRingCss'\nimport { assertiveRingCss } from '../styles/assertiveRingCss'\n\n/**\n * Adds some utilities to the theme object.\n * They can be used as an alternative `createTheme`(`theme(o=>)`) for styling.\n */\nexport function addThemeUtils(\n  theme: CharcoalTheme\n): CharcoalTheme & CharcoalThemeUtils {\n  return {\n    ...theme,\n    utils: {\n      margin,\n      marginTop,\n      marginLeft,\n      marginBottom,\n      marginRight,\n      padding,\n      paddingTop,\n      paddingLeft,\n      paddingBottom,\n      paddingRight,\n      gap,\n      rowGap,\n      columnGap,\n      typography,\n      focusVisibleFocusRingCss,\n      assertiveRingCss,\n      disabledCss,\n    },\n  }\n}\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/styled-src-themeUtils-mdx.2d6a53b6.iframe.bundle.js b/styled-src-themeUtils-mdx.54aaf8d9.iframe.bundle.js
similarity index 91%
rename from styled-src-themeUtils-mdx.2d6a53b6.iframe.bundle.js
rename to styled-src-themeUtils-mdx.54aaf8d9.iframe.bundle.js
index 7d86ee406..34dd9594a 100644
--- a/styled-src-themeUtils-mdx.2d6a53b6.iframe.bundle.js
+++ b/styled-src-themeUtils-mdx.54aaf8d9.iframe.bundle.js
@@ -67,7 +67,7 @@
   }
 `,assertiveRingCss=styled_components_browser_esm.iv`
   box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-`;function addThemeUtils(theme){return{...theme,utils:{margin,marginTop,marginLeft,marginBottom,marginRight,padding,paddingTop,paddingLeft,paddingBottom,paddingRight,gap,rowGap,columnGap,typography,focusVisibleFocusRingCss,assertiveRingCss,disabledCss}}}function myTheme(theme){return{...addThemeUtils(theme),color:{...theme.color,mycolor:"#ff9e8c"}}}var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const index_story={title:"styled"},Example=()=>(0,jsx_runtime.jsx)(styled_components_browser_esm.f6,{theme:myTheme,children:(0,jsx_runtime.jsxs)(RootDiv,{children:[(0,jsx_runtime.jsx)(Bg1Div,{children:(0,jsx_runtime.jsx)(TypographyDiv,{children:"${({ theme }) => theme.utils.typography(14, true)}"})}),(0,jsx_runtime.jsx)(Bg1Div,{children:(0,jsx_runtime.jsx)(MarginDiv,{children:(0,jsx_runtime.jsx)(Pre,{children:(0,jsx_runtime.jsx)(Code,{children:"${({ theme }) => [\n    theme.utils.margin(16, 'auto'),\n    theme.utils.padding(4, 8, 16, 24),\n  ]}"})})})}),(0,jsx_runtime.jsx)(Bg1Div,{children:(0,jsx_runtime.jsx)(AssertiveRingDiv,{children:"theme.utils.assertiveRingCss"})}),(0,jsx_runtime.jsxs)(Bg1Div,{children:[(0,jsx_runtime.jsx)(StyledButton,{children:"theme.utils.focusVisibleFocusRingCss"}),(0,jsx_runtime.jsx)(StyledButton,{disabled:!0,children:"theme.utils.disabledCss"})]})]})});Example.displayName="Example";const RootDiv=styled_components_browser_esm.ZP.div`
+`;function addThemeUtils(theme){return{...theme,utils:{margin,marginTop,marginLeft,marginBottom,marginRight,padding,paddingTop,paddingLeft,paddingBottom,paddingRight,gap,rowGap,columnGap,typography,focusVisibleFocusRingCss,assertiveRingCss,disabledCss}}}function myTheme(theme){return{...addThemeUtils(theme),color:{...theme.color,mycolor:"#ff9e8c"}}}var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const index_story={title:"styled/example"},Example=()=>(0,jsx_runtime.jsx)(styled_components_browser_esm.f6,{theme:myTheme,children:(0,jsx_runtime.jsxs)(RootDiv,{children:[(0,jsx_runtime.jsx)(Bg1Div,{children:(0,jsx_runtime.jsx)(TypographyDiv,{children:"${({ theme }) => theme.utils.typography(14, true)}"})}),(0,jsx_runtime.jsx)(Bg1Div,{children:(0,jsx_runtime.jsx)(MarginDiv,{children:(0,jsx_runtime.jsx)(Pre,{children:(0,jsx_runtime.jsx)(Code,{children:"${({ theme }) => [\n    theme.utils.margin(16, 'auto'),\n    theme.utils.padding(4, 8, 16, 24),\n  ]}"})})})}),(0,jsx_runtime.jsx)(Bg1Div,{children:(0,jsx_runtime.jsx)(AssertiveRingDiv,{children:"theme.utils.assertiveRingCss"})}),(0,jsx_runtime.jsxs)(Bg1Div,{children:[(0,jsx_runtime.jsx)(StyledButton,{children:"theme.utils.focusVisibleFocusRingCss"}),(0,jsx_runtime.jsx)(StyledButton,{disabled:!0,children:"theme.utils.disabledCss"})]})]})});Example.displayName="Example";const RootDiv=styled_components_browser_esm.ZP.div`
   ${({theme})=>theme.utils.gap(40)}
   color: ${({theme})=>theme.color.text1};
   display: flex;
@@ -112,4 +112,4 @@
     background-color: var(--charcoal-brand-press);
   }
 `;Example.parameters={...Example.parameters,docs:{...Example.parameters?.docs,source:{originalSource:"() => <ThemeProvider theme={myTheme}>\n    <RootDiv>\n      <Bg1Div>\n        <TypographyDiv>\n          {'${({ theme }) => theme.utils.typography(14, true)}'}\n        </TypographyDiv>\n      </Bg1Div>\n\n      <Bg1Div>\n        <MarginDiv>\n          <Pre>\n            <Code>\n              {`\\${({ theme }) => [\n    theme.utils.margin(16, 'auto'),\n    theme.utils.padding(4, 8, 16, 24),\n  ]}`}\n            </Code>\n          </Pre>\n        </MarginDiv>\n      </Bg1Div>\n\n      <Bg1Div>\n        <AssertiveRingDiv>{'theme.utils.assertiveRingCss'}</AssertiveRingDiv>\n      </Bg1Div>\n\n      <Bg1Div>\n        <StyledButton>{'theme.utils.focusVisibleFocusRingCss'}</StyledButton>\n\n        <StyledButton disabled>{'theme.utils.disabledCss'}</StyledButton>\n      </Bg1Div>\n    </RootDiv>\n  </ThemeProvider>",...Example.parameters?.docs?.source}}};const __namedExportsOrder=["Example"]}}]);
-//# sourceMappingURL=styled-src-themeUtils-mdx.2d6a53b6.iframe.bundle.js.map
\ No newline at end of file
+//# sourceMappingURL=styled-src-themeUtils-mdx.54aaf8d9.iframe.bundle.js.map
\ No newline at end of file
diff --git a/styled-src-themeUtils-mdx.2d6a53b6.iframe.bundle.js.map b/styled-src-themeUtils-mdx.54aaf8d9.iframe.bundle.js.map
similarity index 98%
rename from styled-src-themeUtils-mdx.2d6a53b6.iframe.bundle.js.map
rename to styled-src-themeUtils-mdx.54aaf8d9.iframe.bundle.js.map
index d3dc096ca..01a122c9d 100644
--- a/styled-src-themeUtils-mdx.2d6a53b6.iframe.bundle.js.map
+++ b/styled-src-themeUtils-mdx.54aaf8d9.iframe.bundle.js.map
@@ -1 +1 @@
-{"version":3,"file":"styled-src-themeUtils-mdx.2d6a53b6.iframe.bundle.js","mappings":";AA+BA;AAEA;AAIA;AAEA;AAIA;AAEA;AAIA;AAEA;AAIA;AAEA;AC1BA;AAEA;AAIA;AAEA;AAIA;AAEA;AAIA;AAEA;AAIA;AAEA;AC5CA;AAEA;AAIA;AAEA;AAIA;AAEA;;;;;;ACzBA;;AAIA;;;;;;;;;;;;;;;;AAkBA;AAMA;AACA;;AAEA;AACA;AAIA;;;;;;;;;;;ACpCA;;ACwBA","sources":["webpack://charcoal-ui/./packages/styled/src/utils/margin.ts","webpack://charcoal-ui/./packages/styled/src/utils/padding.ts","webpack://charcoal-ui/./packages/styled/src/utils/gap.ts","webpack://charcoal-ui/./packages/styled/src/utils/typographyCss.ts","webpack://charcoal-ui/./packages/styled/src/styles/assertiveRingCss.ts","webpack://charcoal-ui/./packages/styled/src/utils/addThemeUtils.ts"],"sourcesContent":["import { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { SpacingType } from './helpers/SpacingType'\nimport { pxIfNum } from './helpers/pxIfNum'\n\nexport function margin(arg1: SpacingType): FlattenSimpleInterpolation\n\nexport function margin(\n  arg1: SpacingType,\n  arg2: SpacingType\n): FlattenSimpleInterpolation\n\nexport function margin(\n  arg1: SpacingType,\n  arg2: SpacingType,\n  arg3: SpacingType\n): FlattenSimpleInterpolation\n\nexport function margin(\n  arg1: SpacingType,\n  arg2: SpacingType,\n  arg3: SpacingType,\n  arg4: SpacingType\n): FlattenSimpleInterpolation\n\nexport function margin(\n  arg1: SpacingType,\n  arg2?: SpacingType,\n  arg3?: SpacingType,\n  arg4?: SpacingType\n) {\n  return css`\n    margin: ${pxIfNum(arg1)} ${pxIfNum(arg2)} ${pxIfNum(arg3)} ${pxIfNum(arg4)};\n  `\n}\n\nexport function marginTop(v: SpacingType) {\n  return css`\n    margin-top: ${pxIfNum(v)};\n  `\n}\n\nexport function marginBottom(v: SpacingType) {\n  return css`\n    margin-bottom: ${pxIfNum(v)};\n  `\n}\n\nexport function marginLeft(v: SpacingType) {\n  return css`\n    margin-left: ${pxIfNum(v)};\n  `\n}\n\nexport function marginRight(v: SpacingType) {\n  return css`\n    margin-right: ${pxIfNum(v)};\n  `\n}\n","import { Spacing } from '@charcoal-ui/theme'\nimport { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { pxIfNum } from './helpers/pxIfNum'\n\nexport function padding(arg1: keyof Spacing): FlattenSimpleInterpolation\n\nexport function padding(\n  arg1: keyof Spacing,\n  arg2: keyof Spacing\n): FlattenSimpleInterpolation\n\nexport function padding(\n  arg1: keyof Spacing,\n  arg2: keyof Spacing,\n  arg3: keyof Spacing\n): FlattenSimpleInterpolation\n\nexport function padding(\n  arg1: keyof Spacing,\n  arg2: keyof Spacing,\n  arg3: keyof Spacing,\n  arg4: keyof Spacing\n): FlattenSimpleInterpolation\n\nexport function padding(\n  arg1: keyof Spacing,\n  arg2?: keyof Spacing,\n  arg3?: keyof Spacing,\n  arg4?: keyof Spacing\n) {\n  return css`\n    padding: ${arg1}px ${pxIfNum(arg2)} ${pxIfNum(arg3)} ${pxIfNum(arg4)};\n  `\n}\n\nexport function paddingTop(v: keyof Spacing) {\n  return css`\n    padding-top: ${v}px;\n  `\n}\n\nexport function paddingBottom(v: keyof Spacing) {\n  return css`\n    padding-bottom: ${v}px;\n  `\n}\n\nexport function paddingLeft(v: keyof Spacing) {\n  return css`\n    padding-left: ${v}px;\n  `\n}\n\nexport function paddingRight(v: keyof Spacing) {\n  return css`\n    padding-right: ${v}px;\n  `\n}\n","import { Spacing } from '@charcoal-ui/theme'\nimport { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { pxIfNum } from './helpers/pxIfNum'\n\nexport function gap(v1: keyof Spacing): FlattenSimpleInterpolation\n\nexport function gap(\n  v1: keyof Spacing,\n  v2: keyof Spacing\n): FlattenSimpleInterpolation\n\nexport function gap(v1: keyof Spacing, v2?: keyof Spacing) {\n  return css`\n    gap: ${v1}px ${pxIfNum(v2)};\n  `\n}\n\nexport function rowGap(v: keyof Spacing) {\n  return css`\n    row-gap: ${v}px;\n  `\n}\n\nexport function columnGap(v: keyof Spacing) {\n  return css`\n    column-gap: ${v}px;\n  `\n}\n","import { css } from 'styled-components'\n\nconst boldCss = css`\n  font-weight: bold;\n`\n\nconst removeHalfLeadingCss = css`\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nexport function typography(\n  size: 12 | 14 | 16 | 20,\n  bold = false,\n  preserveHalfLeading = false\n) {\n  const cssObj = css`\n    font-size: ${size}px;\n    line-height: ${size + 8}px;\n    display: flow-root;\n    ${bold === true && boldCss}\n    ${preserveHalfLeading !== true && removeHalfLeadingCss}\n  `\n\n  return cssObj\n}\n","import { css } from 'styled-components'\n\nexport const assertiveRingCss = css`\n  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n`\n","import { CharcoalTheme } from '@charcoal-ui/theme'\nimport { CharcoalThemeUtils } from './CharcoalStyledTheme'\nimport {\n  margin,\n  marginBottom,\n  marginLeft,\n  marginRight,\n  marginTop,\n} from './margin'\nimport {\n  padding,\n  paddingBottom,\n  paddingLeft,\n  paddingRight,\n  paddingTop,\n} from './padding'\nimport { columnGap, gap, rowGap } from './gap'\nimport { disabledCss } from '../styles/disabledCss'\nimport { typography } from './typographyCss'\nimport { focusVisibleFocusRingCss } from '../styles/focusVisibleFocusRingCss'\nimport { assertiveRingCss } from '../styles/assertiveRingCss'\n\n/**\n * Adds some utilities to the theme object.\n * They can be used as an alternative `createTheme`(`theme(o=>)`) for styling.\n */\nexport function addThemeUtils(\n  theme: CharcoalTheme\n): CharcoalTheme & CharcoalThemeUtils {\n  return {\n    ...theme,\n    utils: {\n      margin,\n      marginTop,\n      marginLeft,\n      marginBottom,\n      marginRight,\n      padding,\n      paddingTop,\n      paddingLeft,\n      paddingBottom,\n      paddingRight,\n      gap,\n      rowGap,\n      columnGap,\n      typography,\n      focusVisibleFocusRingCss,\n      assertiveRingCss,\n      disabledCss,\n    },\n  }\n}\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"styled-src-themeUtils-mdx.54aaf8d9.iframe.bundle.js","mappings":";AA+BA;AAEA;AAIA;AAEA;AAIA;AAEA;AAIA;AAEA;AAIA;AAEA;AC1BA;AAEA;AAIA;AAEA;AAIA;AAEA;AAIA;AAEA;AAIA;AAEA;AC5CA;AAEA;AAIA;AAEA;AAIA;AAEA;;;;;;ACzBA;;AAIA;;;;;;;;;;;;;;;;AAkBA;AAMA;AACA;;AAEA;AACA;AAIA;;;;;;;;;;;ACpCA;;ACwBA","sources":["webpack://charcoal-ui/./packages/styled/src/utils/margin.ts","webpack://charcoal-ui/./packages/styled/src/utils/padding.ts","webpack://charcoal-ui/./packages/styled/src/utils/gap.ts","webpack://charcoal-ui/./packages/styled/src/utils/typographyCss.ts","webpack://charcoal-ui/./packages/styled/src/styles/assertiveRingCss.ts","webpack://charcoal-ui/./packages/styled/src/utils/addThemeUtils.ts"],"sourcesContent":["import { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { SpacingType } from './helpers/SpacingType'\nimport { pxIfNum } from './helpers/pxIfNum'\n\nexport function margin(arg1: SpacingType): FlattenSimpleInterpolation\n\nexport function margin(\n  arg1: SpacingType,\n  arg2: SpacingType\n): FlattenSimpleInterpolation\n\nexport function margin(\n  arg1: SpacingType,\n  arg2: SpacingType,\n  arg3: SpacingType\n): FlattenSimpleInterpolation\n\nexport function margin(\n  arg1: SpacingType,\n  arg2: SpacingType,\n  arg3: SpacingType,\n  arg4: SpacingType\n): FlattenSimpleInterpolation\n\nexport function margin(\n  arg1: SpacingType,\n  arg2?: SpacingType,\n  arg3?: SpacingType,\n  arg4?: SpacingType\n) {\n  return css`\n    margin: ${pxIfNum(arg1)} ${pxIfNum(arg2)} ${pxIfNum(arg3)} ${pxIfNum(arg4)};\n  `\n}\n\nexport function marginTop(v: SpacingType) {\n  return css`\n    margin-top: ${pxIfNum(v)};\n  `\n}\n\nexport function marginBottom(v: SpacingType) {\n  return css`\n    margin-bottom: ${pxIfNum(v)};\n  `\n}\n\nexport function marginLeft(v: SpacingType) {\n  return css`\n    margin-left: ${pxIfNum(v)};\n  `\n}\n\nexport function marginRight(v: SpacingType) {\n  return css`\n    margin-right: ${pxIfNum(v)};\n  `\n}\n","import { Spacing } from '@charcoal-ui/theme'\nimport { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { pxIfNum } from './helpers/pxIfNum'\n\nexport function padding(arg1: keyof Spacing): FlattenSimpleInterpolation\n\nexport function padding(\n  arg1: keyof Spacing,\n  arg2: keyof Spacing\n): FlattenSimpleInterpolation\n\nexport function padding(\n  arg1: keyof Spacing,\n  arg2: keyof Spacing,\n  arg3: keyof Spacing\n): FlattenSimpleInterpolation\n\nexport function padding(\n  arg1: keyof Spacing,\n  arg2: keyof Spacing,\n  arg3: keyof Spacing,\n  arg4: keyof Spacing\n): FlattenSimpleInterpolation\n\nexport function padding(\n  arg1: keyof Spacing,\n  arg2?: keyof Spacing,\n  arg3?: keyof Spacing,\n  arg4?: keyof Spacing\n) {\n  return css`\n    padding: ${arg1}px ${pxIfNum(arg2)} ${pxIfNum(arg3)} ${pxIfNum(arg4)};\n  `\n}\n\nexport function paddingTop(v: keyof Spacing) {\n  return css`\n    padding-top: ${v}px;\n  `\n}\n\nexport function paddingBottom(v: keyof Spacing) {\n  return css`\n    padding-bottom: ${v}px;\n  `\n}\n\nexport function paddingLeft(v: keyof Spacing) {\n  return css`\n    padding-left: ${v}px;\n  `\n}\n\nexport function paddingRight(v: keyof Spacing) {\n  return css`\n    padding-right: ${v}px;\n  `\n}\n","import { Spacing } from '@charcoal-ui/theme'\nimport { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { pxIfNum } from './helpers/pxIfNum'\n\nexport function gap(v1: keyof Spacing): FlattenSimpleInterpolation\n\nexport function gap(\n  v1: keyof Spacing,\n  v2: keyof Spacing\n): FlattenSimpleInterpolation\n\nexport function gap(v1: keyof Spacing, v2?: keyof Spacing) {\n  return css`\n    gap: ${v1}px ${pxIfNum(v2)};\n  `\n}\n\nexport function rowGap(v: keyof Spacing) {\n  return css`\n    row-gap: ${v}px;\n  `\n}\n\nexport function columnGap(v: keyof Spacing) {\n  return css`\n    column-gap: ${v}px;\n  `\n}\n","import { css } from 'styled-components'\n\nconst boldCss = css`\n  font-weight: bold;\n`\n\nconst removeHalfLeadingCss = css`\n  &::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n\n  &::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n`\n\nexport function typography(\n  size: 12 | 14 | 16 | 20,\n  bold = false,\n  preserveHalfLeading = false\n) {\n  const cssObj = css`\n    font-size: ${size}px;\n    line-height: ${size + 8}px;\n    display: flow-root;\n    ${bold === true && boldCss}\n    ${preserveHalfLeading !== true && removeHalfLeadingCss}\n  `\n\n  return cssObj\n}\n","import { css } from 'styled-components'\n\nexport const assertiveRingCss = css`\n  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n`\n","import { CharcoalTheme } from '@charcoal-ui/theme'\nimport { CharcoalThemeUtils } from './CharcoalStyledTheme'\nimport {\n  margin,\n  marginBottom,\n  marginLeft,\n  marginRight,\n  marginTop,\n} from './margin'\nimport {\n  padding,\n  paddingBottom,\n  paddingLeft,\n  paddingRight,\n  paddingTop,\n} from './padding'\nimport { columnGap, gap, rowGap } from './gap'\nimport { disabledCss } from '../styles/disabledCss'\nimport { typography } from './typographyCss'\nimport { focusVisibleFocusRingCss } from '../styles/focusVisibleFocusRingCss'\nimport { assertiveRingCss } from '../styles/assertiveRingCss'\n\n/**\n * Adds some utilities to the theme object.\n * They can be used as an alternative `createTheme`(`theme(o=>)`) for styling.\n */\nexport function addThemeUtils(\n  theme: CharcoalTheme\n): CharcoalTheme & CharcoalThemeUtils {\n  return {\n    ...theme,\n    utils: {\n      margin,\n      marginTop,\n      marginLeft,\n      marginBottom,\n      marginRight,\n      padding,\n      paddingTop,\n      paddingLeft,\n      paddingBottom,\n      paddingRight,\n      gap,\n      rowGap,\n      columnGap,\n      typography,\n      focusVisibleFocusRingCss,\n      assertiveRingCss,\n      disabledCss,\n    },\n  }\n}\n"],"names":[],"sourceRoot":""}
\ No newline at end of file