@charcoal-ui/react 2.2.1 → 2.4.0

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/ComponentAbstraction.tsx","../src/core/SSRProvider.tsx","../src/core/OverlayProvider.tsx","../src/core/CharcoalProvider.tsx","../src/components/Button/index.tsx","../src/_lib/index.ts","../src/styled.ts","../src/components/Clickable/index.tsx","../src/components/IconButton/index.tsx","../src/components/Radio/index.tsx","../src/components/MultiSelect/index.tsx","../src/components/MultiSelect/context.ts","../src/components/Switch/index.tsx","../src/components/TextField/index.tsx","../src/components/FieldLabel/index.tsx","../src/components/Icon/index.tsx","../src/components/Modal/index.tsx","../../foundation/src/grid.ts","../src/components/Modal/ModalPlumbing.tsx","../src/components/LoadingSpinner/index.tsx","../src/components/DropdownSelector/index.tsx","../src/components/DropdownSelector/Listbox.tsx","../src/components/DropdownSelector/DropdownPopover.tsx","../src/components/SegmentedControl/index.tsx","../src/components/SegmentedControl/RadioGroupContext.tsx","../src/components/Checkbox/index.tsx","../src/components/TagItem/index.tsx"],"sourcesContent":["import React, { useContext } from 'react'\n\nexport type LinkProps = {\n  /**\n   * リンクのURL\n   */\n  to: string\n} & Omit<React.ComponentPropsWithoutRef<'a'>, 'href'>\n\nexport const DefaultLink = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  function DefaultLink({ to, children, ...rest }, ref) {\n    return (\n      <a href={to} ref={ref} {...rest}>\n        {children}\n      </a>\n    )\n  }\n)\n\nexport interface Components {\n  Link: React.ComponentType<React.ComponentPropsWithRef<typeof DefaultLink>>\n}\n\nconst DefaultValue: Components = {\n  Link: DefaultLink,\n}\n\nconst ComponentAbstractionContext = React.createContext(DefaultValue)\n\ninterface Props {\n  children: React.ReactNode\n  components: Partial<Components>\n}\n\nexport default function ComponentAbstraction({ children, components }: Props) {\n  return (\n    <ComponentAbstractionContext.Provider\n      value={{ ...DefaultValue, ...components }}\n    >\n      {children}\n    </ComponentAbstractionContext.Provider>\n  )\n}\n\nexport function useComponentAbstraction() {\n  return useContext(ComponentAbstractionContext)\n}\n","export { SSRProvider } from '@react-aria/ssr'\n","export { OverlayProvider } from '@react-aria/overlays'\n","import React from 'react'\nimport { ThemeProvider } from 'styled-components'\nimport ComponentAbstraction, { Components } from './ComponentAbstraction'\nimport { TokenInjector } from '@charcoal-ui/styled'\nimport { ThemeMap } from '@charcoal-ui/styled/src/TokenInjector'\nimport { CharcoalTheme } from '@charcoal-ui/theme'\n\nimport { OverlayProvider } from './OverlayProvider'\nimport { SSRProvider } from './SSRProvider'\n\nexport type CharcoalProviderProps = React.PropsWithChildren<{\n  themeMap: ThemeMap<CharcoalTheme>\n  defaultTheme?: CharcoalTheme\n  injectTokens?: boolean\n  components?: Partial<Components>\n}>\n\nexport function CharcoalProvider({\n  themeMap,\n  defaultTheme = themeMap[':root'],\n  components = {},\n  injectTokens = true,\n  children,\n}: CharcoalProviderProps) {\n  return (\n    <SSRProvider>\n      <ThemeProvider theme={defaultTheme}>\n        {injectTokens && <TokenInjector theme={themeMap} />}\n        <ComponentAbstraction components={components}>\n          <OverlayProvider>{children}</OverlayProvider>\n        </ComponentAbstraction>\n      </ThemeProvider>\n    </SSRProvider>\n  )\n}\n","import React from 'react'\nimport styled from 'styled-components'\nimport { unreachable } from '../../_lib'\nimport { theme } from '../../styled'\nimport Clickable, { ClickableElement, ClickableProps } from '../Clickable'\n\ntype Variant = 'Primary' | 'Default' | 'Overlay' | 'Danger' | 'Navigation'\ntype Size = 'S' | 'M'\n\ninterface StyledProps {\n  /**\n   * ボタンのスタイル\n   */\n  variant: Variant\n  /**\n   * ボタンのサイズ\n   */\n  size: Size\n  /**\n   * 幅を最大まで広げて描画\n   */\n  fixed: boolean\n}\n\nexport type ButtonProps = Partial<StyledProps> & ClickableProps\n\nconst Button = React.forwardRef<ClickableElement, ButtonProps>(function Button(\n  {\n    children,\n    variant = 'Default',\n    size = 'M',\n    fixed = false,\n    disabled = false,\n    ...rest\n  },\n  ref\n) {\n  return (\n    <StyledButton\n      {...rest}\n      disabled={disabled}\n      variant={variant}\n      size={size}\n      fixed={fixed}\n      ref={ref}\n    >\n      {children}\n    </StyledButton>\n  )\n})\nexport default Button\n\nconst StyledButton = styled(Clickable)\n  .withConfig<StyledProps>({\n    shouldForwardProp(prop) {\n      // fixed は <button> 要素に渡ってはいけない\n      return prop !== 'fixed'\n    },\n  })\n  .attrs<StyledProps, ReturnType<typeof styledProps>>(styledProps)`\n  width: ${(p) => (p.fixed ? '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\n  ${(p) =>\n    theme((o) => [\n      o.font[p.font].hover.press,\n      o.bg[p.background].hover.press,\n      o.typography(14).bold.preserveHalfLeading,\n      o.padding.horizontal(p.padding),\n      o.disabled,\n      o.borderRadius('oval'),\n      o.outline.default.focus,\n    ])}\n\n  /* よく考えたらheight=32って定義が存在しないな... */\n  height: ${(p) => p.height}px;\n`\n\nfunction styledProps(props: StyledProps) {\n  return {\n    ...props,\n    ...variantToProps(props.variant),\n    ...sizeToProps(props.size),\n  }\n}\n\nfunction variantToProps(variant: Variant) {\n  switch (variant) {\n    case 'Overlay':\n      return { font: 'text5', background: 'surface4' } as const\n    case 'Default':\n      return { font: 'text2', background: 'surface3' } as const\n    case 'Primary':\n      return { font: 'text5', background: 'brand' } as const\n    case 'Navigation':\n      return { font: 'text5', background: 'surface6' } as const\n    case 'Danger':\n      return { font: 'text5', background: 'assertive' } as const\n    default:\n      return unreachable(variant)\n  }\n}\n\nfunction sizeToProps(size: Size) {\n  switch (size) {\n    case 'S':\n      return {\n        height: 32,\n        padding: 16,\n      } as const\n    case 'M':\n      return {\n        height: 40,\n        padding: 24,\n      } as const\n  }\n}\n","/**\n * 今後ポートされる予定の汎用的な関数群\n */\n\n/**\n * Function used to assert a given code path is unreachable\n */\nexport function unreachable(): never\n/**\n * Function used to assert a given code path is unreachable.\n * Very useful for ensuring switches are exhaustive:\n *\n * ```ts\n * switch (a.type) {\n *   case Types.A:\n *   case Types.B:\n *     break\n *   default:\n *     unreachable(a) // will cause a build error if there was\n *                    // a Types.C that was not checked\n * }\n * ```\n *\n * @param value Value to be asserted as unreachable\n */\n// NOTE: Uses separate overloads, _not_ `value?: never`, to not allow `undefined` to be passed\n// eslint-disable-next-line @typescript-eslint/unified-signatures\nexport function unreachable(value: never): never\nexport function unreachable(value?: never): never {\n  throw new Error(\n    arguments.length === 0\n      ? 'unreachable'\n      : `unreachable (${JSON.stringify(value)})`\n  )\n}\n","import styled from 'styled-components'\nimport { createTheme } from '@charcoal-ui/styled'\nexport const theme = createTheme(styled)\n","import React from 'react'\nimport styled, { css } 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    if ('to' in props) {\n      const { onClick, disabled = false, ...rest } = props\n      return (\n        <A<typeof Link>\n          {...rest}\n          as={disabled ? undefined : Link}\n          onClick={disabled ? undefined : onClick}\n          aria-disabled={disabled}\n          ref={ref}\n        />\n      )\n    } else {\n      return <Button {...props} ref={ref} />\n    }\n  }\n)\nexport default Clickable\n\nconst clickableCss = css`\n  /* Clickable style */\n  cursor: pointer;\n\n  ${disabledSelector} {\n    cursor: default;\n  }\n`\n\nconst Button = styled.button`\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\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  ${clickableCss}\n`\n\nconst A = styled.span`\n  /* Reset a-tag appearance */\n  color: inherit;\n\n  &:focus {\n    outline: none;\n  }\n\n  .text {\n    top: calc(1em + 2em);\n  }\n\n  ${clickableCss}\n`\n","import React from 'react'\nimport styled from 'styled-components'\nimport { theme } from '../../styled'\nimport Clickable, { ClickableElement, ClickableProps } from '../Clickable'\nimport type { KnownIconType } from '@charcoal-ui/icons'\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}\n\nexport type IconButtonProps = StyledProps & ClickableProps\n\nconst IconButton = React.forwardRef<ClickableElement, IconButtonProps>(\n  function IconButtonInner(\n    { variant = 'Default', size = 'M', icon, ...rest }: IconButtonProps,\n    ref\n  ) {\n    validateIconSize(size, icon)\n    return (\n      <StyledIconButton {...rest} ref={ref} variant={variant} size={size}>\n        <pixiv-icon name={icon} />\n      </StyledIconButton>\n    )\n  }\n)\n\nexport default IconButton\n\nconst StyledIconButton = styled(Clickable).attrs<\n  Required<StyledProps>,\n  ReturnType<typeof styledProps>\n>(styledProps)`\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\n  ${({ font, background }) =>\n    theme((o) => [\n      o.font[font],\n      o.bg[background].hover.press,\n      o.disabled,\n      o.borderRadius('oval'),\n      o.outline.default.focus,\n    ])}\n`\n\nfunction styledProps(props: Required<StyledProps>) {\n  return {\n    ...props,\n    ...variantToProps(props.variant),\n    ...sizeToProps(props.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 React, { useCallback, useContext } from 'react'\nimport styled from 'styled-components'\nimport warning from 'warning'\nimport { theme } from '../../styled'\nimport { px } from '@charcoal-ui/utils'\n\nexport type RadioProps = React.PropsWithChildren<{\n  value: string\n  forceChecked?: boolean\n  disabled?: boolean\n}>\n\nexport default function Radio({\n  value,\n  forceChecked = false,\n  disabled = false,\n  children,\n}: RadioProps) {\n  const {\n    name,\n    selected,\n    disabled: isParentDisabled,\n    readonly,\n    hasError,\n    onChange,\n  } = useContext(RadioGroupContext)\n\n  warning(\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    name !== undefined,\n    `\"name\" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?`\n  )\n\n  const isSelected = value === selected\n  const isDisabled = disabled || isParentDisabled\n  const isReadonly = readonly && !isSelected\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(e.currentTarget.value)\n    },\n    [onChange]\n  )\n\n  return (\n    <RadioRoot aria-disabled={isDisabled || isReadonly}>\n      <RadioInput\n        name={name}\n        value={value}\n        checked={forceChecked || isSelected}\n        hasError={hasError}\n        onChange={handleChange}\n        disabled={isDisabled || isReadonly}\n      />\n      {children != null && <RadioLabel>{children}</RadioLabel>}\n    </RadioRoot>\n  )\n}\n\nconst RadioRoot = styled.label`\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-gap: ${({ theme }) => px(theme.spacing[4])};\n  align-items: center;\n  cursor: pointer;\n\n  ${theme((o) => [o.disabled])}\n`\n\nexport const RadioInput = styled.input.attrs({ type: 'radio' })<{\n  hasError?: boolean\n}>`\n  /** Make prior to browser default style */\n  &[type='radio'] {\n    appearance: none;\n    display: block;\n    box-sizing: border-box;\n\n    margin: 0;\n    padding: 6px;\n\n    width: 20px;\n    height: 20px;\n\n    ${({ hasError = false }) =>\n      theme((o) => [\n        o.borderRadius('oval'),\n        o.bg.surface1.hover.press,\n        hasError && o.outline.assertive,\n      ])};\n\n    &:not(:checked) {\n      border-width: 2px;\n      border-style: solid;\n      border-color: ${({ theme }) => theme.color.text3};\n    }\n\n    &:checked {\n      ${theme((o) => o.bg.brand.hover.press)}\n\n      &::after {\n        content: '';\n        display: block;\n        width: 8px;\n        height: 8px;\n        pointer-events: none;\n\n        ${theme((o) => [o.bg.text5.hover.press, o.borderRadius('oval')])}\n      }\n    }\n\n    ${theme((o) => o.outline.default.focus)}\n  }\n`\n\nconst RadioLabel = styled.div`\n  ${theme((o) => [o.typography(14), o.font.text2])}\n`\n\nexport type RadioGroupProps = React.PropsWithChildren<{\n  className?: string\n  value?: string\n  label: string\n  name: string\n  onChange(next: string): void\n  disabled?: boolean\n  readonly?: boolean\n  hasError?: boolean\n}>\n\n// TODO: use (or polyfill) flex gap\nconst StyledRadioGroup = styled.div`\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: ${({ theme }) => px(theme.spacing[8])};\n`\n\ninterface RadioGroupContext {\n  name: string\n  selected?: string\n  disabled: boolean\n  readonly: boolean\n  hasError: boolean\n  onChange: (next: string) => void\n}\n\nconst RadioGroupContext = React.createContext<RadioGroupContext>({\n  name: undefined as never,\n  selected: undefined,\n  disabled: false,\n  readonly: false,\n  hasError: false,\n  onChange() {\n    throw new Error(\n      'Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?'\n    )\n  },\n})\n\nexport function RadioGroup({\n  className,\n  value,\n  label,\n  name,\n  onChange,\n  disabled,\n  readonly,\n  hasError,\n  children,\n}: RadioGroupProps) {\n  const handleChange = useCallback(\n    (next: string) => {\n      onChange(next)\n    },\n    [onChange]\n  )\n\n  return (\n    <RadioGroupContext.Provider\n      value={{\n        name,\n        selected: value,\n        disabled: disabled ?? false,\n        readonly: readonly ?? false,\n        hasError: hasError ?? false,\n        onChange: handleChange,\n      }}\n    >\n      <StyledRadioGroup\n        role=\"radiogroup\"\n        aria-orientation=\"vertical\"\n        aria-label={label}\n        aria-invalid={hasError}\n        className={className}\n      >\n        {children}\n      </StyledRadioGroup>\n    </RadioGroupContext.Provider>\n  )\n}\n","import React, { ChangeEvent, useCallback, useContext } from 'react'\nimport styled, { css } from 'styled-components'\nimport warning from 'warning'\nimport { theme } from '../../styled'\nimport { disabledSelector, px } from '@charcoal-ui/utils'\n\nimport { MultiSelectGroupContext } from './context'\n\nexport type MultiSelectProps = React.PropsWithChildren<{\n  value: string\n  forceChecked?: boolean\n  disabled?: boolean\n  variant?: 'default' | 'overlay'\n  onChange?: (payload: { value: string; selected: boolean }) => void\n}>\n\nexport default function MultiSelect({\n  value,\n  forceChecked = false,\n  disabled = false,\n  onChange,\n  variant = 'default',\n  children,\n}: MultiSelectProps) {\n  const {\n    name,\n    selected,\n    disabled: parentDisabled,\n    readonly,\n    hasError,\n    onChange: parentOnChange,\n  } = useContext(MultiSelectGroupContext)\n\n  warning(\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    name !== undefined,\n    `\"name\" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`\n  )\n\n  const isSelected = selected.includes(value) || forceChecked\n  const isDisabled = disabled || parentDisabled || readonly\n\n  const handleChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      if (!(event.currentTarget instanceof HTMLInputElement)) {\n        return\n      }\n      if (onChange) onChange({ value, selected: event.currentTarget.checked })\n      parentOnChange({ value, selected: event.currentTarget.checked })\n    },\n    [onChange, parentOnChange, value]\n  )\n\n  return (\n    <MultiSelectRoot aria-disabled={isDisabled}>\n      <MultiSelectInput\n        {...{\n          name,\n          value,\n          hasError,\n        }}\n        checked={isSelected}\n        disabled={isDisabled}\n        onChange={handleChange}\n        overlay={variant === 'overlay'}\n        aria-invalid={hasError}\n      />\n      <MultiSelectInputOverlay\n        overlay={variant === 'overlay'}\n        hasError={hasError}\n        aria-hidden={true}\n      >\n        <pixiv-icon name=\"24/Check\" unsafe-non-guideline-scale={16 / 24} />\n      </MultiSelectInputOverlay>\n      {Boolean(children) && <MultiSelectLabel>{children}</MultiSelectLabel>}\n    </MultiSelectRoot>\n  )\n}\n\nconst MultiSelectRoot = styled.label`\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  ${disabledSelector} {\n    cursor: default;\n  }\n  gap: ${({ theme }) => px(theme.spacing[4])};\n  ${theme((o) => o.disabled)}\n`\n\nconst MultiSelectLabel = styled.div`\n  display: flex;\n  align-items: center;\n  ${theme((o) => [o.typography(14), o.font.text2])}\n`\n\nconst MultiSelectInput = styled.input.attrs({ type: 'checkbox' })<{\n  hasError: boolean\n  overlay: boolean\n}>`\n  &[type='checkbox'] {\n    appearance: none;\n    display: block;\n    width: 20px;\n    height: 20px;\n    margin: 0;\n\n    &:checked {\n      ${theme((o) => o.bg.brand.hover.press)}\n    }\n\n    ${({ hasError, overlay }) =>\n      theme((o) => [\n        o.bg.text3.hover.press,\n        o.borderRadius('oval'),\n        hasError && !overlay && o.outline.assertive,\n        overlay && o.bg.surface4,\n      ])};\n  }\n`\n\nconst MultiSelectInputOverlay = styled.div<{\n  overlay: boolean\n  hasError: boolean\n}>`\n  position: absolute;\n  top: -2px;\n  left: -2px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ${({ hasError, overlay }) =>\n    theme((o) => [\n      o.width.px(24),\n      o.height.px(24),\n      o.borderRadius('oval'),\n      o.font.text5,\n      hasError && overlay && o.outline.assertive,\n    ])}\n\n  ${({ overlay }) =>\n    overlay &&\n    css`\n      border-color: ${({ theme }) => theme.color.text5};\n      border-width: 2px;\n      border-style: solid;\n    `}\n`\n\nexport type MultiSelectGroupProps = React.PropsWithChildren<{\n  className?: string\n  name: string\n  ariaLabel: string\n  selected: string[]\n  onChange: (selected: string[]) => void\n  disabled?: boolean\n  readonly?: boolean\n  hasError?: boolean\n}>\n\nexport function MultiSelectGroup({\n  className,\n  name,\n  ariaLabel,\n  selected,\n  onChange,\n  disabled = false,\n  readonly = false,\n  hasError = false,\n  children,\n}: MultiSelectGroupProps) {\n  const handleChange = useCallback(\n    (payload: { value: string; selected: boolean }) => {\n      const index = selected.indexOf(payload.value)\n\n      if (payload.selected) {\n        if (index < 0) {\n          onChange([...selected, payload.value])\n        }\n      } else {\n        if (index >= 0) {\n          onChange([...selected.slice(0, index), ...selected.slice(index + 1)])\n        }\n      }\n    },\n    [onChange, selected]\n  )\n\n  return (\n    <MultiSelectGroupContext.Provider\n      value={{\n        name,\n        selected: Array.from(new Set(selected)),\n        disabled,\n        readonly,\n        hasError,\n        onChange: handleChange,\n      }}\n    >\n      <div\n        className={className}\n        aria-label={ariaLabel}\n        data-testid=\"SelectGroup\"\n      >\n        {children}\n      </div>\n    </MultiSelectGroupContext.Provider>\n  )\n}\n","import { createContext } from 'react'\n\ntype MultiSelectGroupContext = {\n  name: string\n  selected: string[]\n  disabled: boolean\n  readonly: boolean\n  hasError: boolean\n  onChange: ({ value, selected }: { value: string; selected: boolean }) => void\n}\n\nexport const MultiSelectGroupContext = createContext<MultiSelectGroupContext>({\n  name: undefined as never,\n  selected: [],\n  disabled: false,\n  readonly: false,\n  hasError: false,\n  onChange() {\n    throw new Error(\n      'Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?'\n    )\n  },\n})\n","import { useSwitch } from '@react-aria/switch'\nimport type { AriaSwitchProps } from '@react-types/switch'\nimport React, { useRef, useMemo } from 'react'\nimport { useToggleState } from 'react-stately'\nimport styled from 'styled-components'\nimport { theme } from '../../styled'\nimport { disabledSelector } from '@charcoal-ui/utils'\n\nexport type SwitchProps = {\n  name: string\n  className?: string\n  value?: string\n  checked?: boolean\n  disabled?: boolean\n  onChange(checked: boolean): void\n} & (\n  | // children か label は片方が必須\n  {\n      children: React.ReactNode\n    }\n  | {\n      label: string\n    }\n)\n\nexport default function SwitchCheckbox(props: SwitchProps) {\n  const { disabled, className } = props\n\n  const ariaSwitchProps: AriaSwitchProps = useMemo(\n    () => ({\n      ...props,\n\n      // children がいない場合は aria-label をつけないといけない\n      'aria-label': 'children' in props ? undefined : props.label,\n      isDisabled: props.disabled,\n      isSelected: props.checked,\n    }),\n    [props]\n  )\n\n  const state = useToggleState(ariaSwitchProps)\n  const ref = useRef<HTMLInputElement>(null)\n  const {\n    inputProps: { className: _className, type: _type, ...rest },\n  } = useSwitch(ariaSwitchProps, state, ref)\n\n  return (\n    <Label className={className} aria-disabled={disabled}>\n      <SwitchInput {...rest} ref={ref} />\n      {'children' in props ? (\n        // eslint-disable-next-line react/destructuring-assignment\n        <LabelInner>{props.children}</LabelInner>\n      ) : undefined}\n    </Label>\n  )\n}\n\nconst Label = styled.label`\n  display: inline-grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  cursor: pointer;\n  outline: 0;\n\n  ${theme((o) => o.disabled)}\n\n  ${disabledSelector} {\n    cursor: default;\n  }\n`\n\nconst LabelInner = styled.div`\n  ${theme((o) => [\n    o.typography(14).preserveHalfLeading,\n    o.font.text2,\n    o.margin.left(4),\n  ])}\n`\n\nconst SwitchInput = styled.input.attrs({\n  type: 'checkbox',\n})`\n  &[type='checkbox'] {\n    appearance: none;\n    display: inline-flex;\n    position: relative;\n    box-sizing: border-box;\n    width: 28px;\n    border: 2px solid transparent;\n    transition: box-shadow 0.2s, background-color 0.2s;\n    cursor: inherit;\n    ${theme((o) => [\n      o.borderRadius(16),\n      o.height.px(16),\n      o.bg.text4.hover.press,\n      o.outline.default.focus,\n      o.margin.all(0),\n    ])}\n\n    &::after {\n      content: '';\n      position: absolute;\n      display: block;\n      top: 0;\n      left: 0;\n      width: 12px;\n      height: 12px;\n      transform: translateX(0);\n      transition: transform 0.2s;\n      ${theme((o) => [o.bg.text5.hover.press, o.borderRadius('oval')])}\n    }\n\n    &:checked {\n      ${theme((o) => o.bg.brand.hover.press)}\n\n      &::after {\n        transform: translateX(12px);\n      }\n    }\n  }\n`\n","import { useTextField } from '@react-aria/textfield'\nimport { useVisuallyHidden } from '@react-aria/visually-hidden'\nimport React, {\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport styled, { css } from 'styled-components'\nimport FieldLabel, { FieldLabelProps } from '../FieldLabel'\nimport { createTheme } from '@charcoal-ui/styled'\n\nconst theme = createTheme(styled)\n\ninterface TextFieldBaseProps\n  extends Pick<FieldLabelProps, 'label' | 'requiredText' | 'subLabel'> {\n  readonly className?: string\n  readonly defaultValue?: string\n  readonly value?: string\n  readonly onChange?: (value: string) => void\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  readonly showCount?: boolean\n  readonly showLabel?: boolean\n  readonly placeholder?: string\n  readonly assistiveText?: string\n  readonly disabled?: boolean\n  readonly required?: boolean\n  readonly invalid?: boolean\n  readonly maxLength?: number\n  /**\n   * tab-indexがｰ1かどうか\n   */\n  readonly excludeFromTabOrder?: boolean\n}\n\nexport interface SingleLineTextFieldProps extends TextFieldBaseProps {\n  readonly autoHeight?: never\n  readonly multiline?: false\n  readonly rows?: never\n  readonly type?: string\n  readonly prefix?: ReactNode\n  readonly suffix?: ReactNode\n}\n\nexport interface MultiLineTextFieldProps extends TextFieldBaseProps {\n  readonly autoHeight?: boolean\n  readonly multiline: true\n  readonly rows?: number\n  readonly type?: never\n  readonly prefix?: never\n  readonly suffix?: never\n}\n\nexport type TextFieldProps = SingleLineTextFieldProps | MultiLineTextFieldProps\ntype TextFieldElement = HTMLInputElement & HTMLTextAreaElement\n\nfunction mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {\n  return (value) => {\n    for (const ref of refs) {\n      if (typeof ref === 'function') {\n        ref(value)\n      } else if (ref !== null) {\n        ;(ref as React.MutableRefObject<T | null>).current = value\n      }\n    }\n  }\n}\n\nfunction countCodePointsInString(string: string) {\n  // [...string] とするとproduction buildで動かなくなる\n  // cf. https://twitter.com/f_subal/status/1497214727511891972\n  return Array.from(string).length\n}\n\nconst TextField = React.forwardRef<TextFieldElement, TextFieldProps>(\n  function TextField(props, ref) {\n    return props.multiline !== undefined && props.multiline ? (\n      <MultiLineTextField ref={ref} {...props} />\n    ) : (\n      <SingleLineTextField ref={ref} {...props} />\n    )\n  }\n)\n\nexport default TextField\n\nconst SingleLineTextField = React.forwardRef<\n  HTMLInputElement,\n  SingleLineTextFieldProps\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  } = props\n\n  const { visuallyHiddenProps } = useVisuallyHidden()\n  const ariaRef = useRef<HTMLInputElement>(null)\n  const prefixRef = useRef<HTMLSpanElement>(null)\n  const suffixRef = useRef<HTMLSpanElement>(null)\n  const [count, setCount] = useState(countCodePointsInString(props.value ?? ''))\n  const [prefixWidth, setPrefixWidth] = useState(0)\n  const [suffixWidth, setSuffixWidth] = useState(0)\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 { inputProps, labelProps, descriptionProps, 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  useEffect(() => {\n    const prefixObserver = new ResizeObserver((entries) => {\n      setPrefixWidth(entries[0].contentRect.width)\n    })\n    const suffixObserver = new ResizeObserver((entries) => {\n      setSuffixWidth(entries[0].contentRect.width)\n    })\n\n    if (prefixRef.current !== null) {\n      prefixObserver.observe(prefixRef.current)\n    }\n    if (suffixRef.current !== null) {\n      suffixObserver.observe(suffixRef.current)\n    }\n\n    return () => {\n      suffixObserver.disconnect()\n      prefixObserver.disconnect()\n    }\n  }, [])\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        <PrefixContainer ref={prefixRef}>\n          <Affix>{prefix}</Affix>\n        </PrefixContainer>\n        <StyledInput\n          ref={mergeRefs(forwardRef, ariaRef)}\n          invalid={invalid}\n          extraLeftPadding={prefixWidth}\n          extraRightPadding={suffixWidth}\n          {...inputProps}\n        />\n        <SuffixContainer ref={suffixRef}>\n          <Affix>{suffix}</Affix>\n          {showCount && (\n            <SingleLineCounter>\n              {maxLength !== undefined ? `${count}/${maxLength}` : count}\n            </SingleLineCounter>\n          )}\n        </SuffixContainer>\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\nconst MultiLineTextField = React.forwardRef<\n  HTMLTextAreaElement,\n  MultiLineTextFieldProps\n>(function MultiLineTextFieldInner({ 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  } = props\n\n  const { visuallyHiddenProps } = useVisuallyHidden()\n  const textareaRef = useRef<HTMLTextAreaElement>(null)\n  const ariaRef = useRef<HTMLTextAreaElement>(null)\n  const [count, setCount] = useState(countCodePointsInString(props.value ?? ''))\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 { inputProps, labelProps, descriptionProps, 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  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        invalid={invalid}\n        rows={showCount ? rows + 1 : rows}\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\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 TextFieldLabel = styled(FieldLabel)`\n  ${theme((o) => o.margin.bottom(8))}\n`\n\nconst StyledInputContainer = styled.div`\n  height: 40px;\n  display: grid;\n  position: relative;\n`\n\nconst PrefixContainer = styled.span`\n  position: absolute;\n  top: 50%;\n  left: 8px;\n  transform: translateY(-50%);\n`\n\nconst SuffixContainer = styled.span`\n  position: absolute;\n  top: 50%;\n  right: 8px;\n  transform: translateY(-50%);\n\n  display: flex;\n  gap: 8px;\n`\n\nconst Affix = styled.span`\n  user-select: none;\n\n  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text2])}\n`\n\nconst StyledInput = styled.input<{\n  invalid: boolean\n  extraLeftPadding: number\n  extraRightPadding: number\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: calc((8px + ${(p) => p.extraLeftPadding}px) / 0.875);\n  padding-right: calc((8px + ${(p) => p.extraRightPadding}px) / 0.875);\n  border-radius: calc(4px / 0.875);\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n\n  ${(p) =>\n    theme((o) => [\n      o.bg.surface3.hover,\n      o.outline.default.focus,\n      p.invalid && o.outline.assertive,\n      o.font.text2,\n    ])}\n\n  &::placeholder {\n    ${theme((o) => o.font.text3)}\n  }\n`\n\nconst StyledTextareaContainer = styled.div<{ rows: number; invalid: boolean }>`\n  position: relative;\n  overflow: hidden;\n  padding: 0 8px;\n\n  ${(p) =>\n    theme((o) => [\n      o.bg.surface3.hover,\n      p.invalid && o.outline.assertive,\n      o.font.text2,\n      o.borderRadius(4),\n    ])}\n\n  &:focus-within {\n    ${(p) =>\n      theme((o) => (p.invalid ? o.outline.assertive : o.outline.default))}\n  }\n\n  ${({ rows }) => css`\n    height: calc(22px * ${rows} + 18px);\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\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) 0 ${(p) => (p.noBottomPadding ? 0 : '')};\n\n  ${({ rows = 1 }) => css`\n    height: calc(22px / 0.875 * ${rows});\n  `};\n\n  /* Display box-shadow for iOS Safari */\n  appearance: none;\n\n  background: none;\n\n  &::placeholder {\n    ${theme((o) => o.font.text3)}\n  }\n\n  /* Hide scrollbar for Chrome, Safari and Opera */\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  /* Hide scrollbar for IE, Edge and Firefox */\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n`\n\nconst SingleLineCounter = styled.span`\n  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}\n`\n\nconst MultiLineCounter = styled.span`\n  position: absolute;\n  bottom: 9px;\n  right: 8px;\n\n  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}\n`\n\nconst AssistiveText = styled.p<{ invalid: boolean }>`\n  ${(p) =>\n    theme((o) => [\n      o.typography(14),\n      o.margin.top(8),\n      o.margin.bottom(0),\n      o.font[p.invalid ? 'assertive' : 'text1'],\n    ])}\n`\n","import React from 'react'\nimport styled from 'styled-components'\nimport { createTheme } from '@charcoal-ui/styled'\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 theme = createTheme(styled)\n\nconst Label = styled.label`\n  ${theme((o) => [o.typography(14).bold, o.font.text1])}\n`\n\nconst RequiredText = styled.span`\n  ${theme((o) => [o.typography(14), o.font.text3])}\n`\n\nconst SubLabelClickable = styled.div`\n  ${theme((o) => [\n    o.typography(14),\n    o.font.text3.hover.press,\n    o.outline.default.focus,\n  ])}\n`\n\nconst FieldLabelWrapper = styled.div`\n  display: inline-flex;\n  align-items: center;\n\n  > ${RequiredText} {\n    ${theme((o) => o.margin.left(4))}\n  }\n\n  > ${SubLabelClickable} {\n    ${theme((o) => o.margin.left('auto'))}\n  }\n`\n","import React from 'react'\n\nimport '@charcoal-ui/icons'\nimport type { PixivIcon, Props } from '@charcoal-ui/icons'\n\nexport interface OwnProps {\n  unsafeNonGuidelineScale?: number\n  className?: string\n}\n\nexport interface IconProps\n  extends OwnProps,\n    React.PropsWithoutRef<\n      Omit<Props, 'class' | 'unsafe-non-guideline-scale' | 'css'>\n    > {}\n\nconst Icon = React.forwardRef<PixivIcon, IconProps>(function IconInner(\n  { name, scale, unsafeNonGuidelineScale, className, ...rest },\n  ref\n) {\n  return (\n    <pixiv-icon\n      ref={ref}\n      name={name}\n      scale={scale}\n      unsafe-non-guideline-scale={unsafeNonGuidelineScale}\n      class={className}\n      {...rest}\n    />\n  )\n})\n\nexport default Icon\n","import React, { useContext, useRef } from 'react'\nimport {\n  AriaModalOverlayProps,\n  Overlay,\n  useModalOverlay,\n  useOverlay,\n} from '@react-aria/overlays'\nimport styled, { css, useTheme } from 'styled-components'\nimport { theme } from '../../styled'\nimport { FocusScope } from '@react-aria/focus'\nimport { useDialog } from '@react-aria/dialog'\nimport { AriaDialogProps } from '@react-types/dialog'\nimport { columnSystem, COLUMN_UNIT, GUTTER_UNIT } from '@charcoal-ui/foundation'\nimport { unreachable } from '../../_lib'\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'\n\nexport type ModalProps = AriaModalOverlayProps &\n  AriaDialogProps & {\n    children: React.ReactNode\n    zIndex?: number\n    title: string\n    size?: 'S' | 'M' | 'L'\n    bottomSheet?: boolean | 'full'\n    isOpen: boolean\n    onClose: () => void\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 isOpen={state.isOpen} onClose={() => state.close()} isDismissable>\n *       <ModalHeader />\n *       <ModalBody>...</ModalBody>\n *       <ModalButtons>...</ModalButtons>\n *     </Modal>\n *   </App>\n * </OverlayProvider>\n * ```\n */\nexport default function Modal({\n  children,\n  zIndex = DEFAULT_Z_INDEX,\n  portalContainer,\n  ...props\n}: ModalProps) {\n  const {\n    title,\n    size = 'M',\n    bottomSheet = false,\n    isDismissable,\n    onClose,\n    isOpen = false,\n  } = props\n\n  const ref = useRef<HTMLDivElement>(null)\n  const { overlayProps, underlayProps } = useOverlay(props, ref)\n\n  const { modalProps } = useModalOverlay(\n    props,\n    {\n      close: onClose,\n      isOpen: isOpen,\n      // these props are not used actually.\n      // https://github.com/adobe/react-spectrum/blob/df14e3fb129b94b310f0397a701b83f006b51dfe/packages/%40react-aria/overlays/src/useModalOverlay.ts\n      open: () => {\n        // nope\n      },\n      setOpen: () => {\n        // nope\n      },\n      toggle: () => {\n        // nope\n      },\n    },\n    ref\n  )\n\n  const { dialogProps, titleProps } = useDialog(props, ref)\n\n  const theme = useTheme()\n  const isMobile = useMedia(maxWidth(theme.breakpoint.screen1)) ?? false\n  const transitionEnabled = isMobile && bottomSheet !== false\n  const transition = useTransition(isOpen, {\n    from: {\n      transform: 'translateY(100%)',\n      backgroundColor: 'rgba(0, 0, 0, 0)',\n    },\n    enter: {\n      transform: 'translateY(0%)',\n      backgroundColor: 'rgba(0, 0, 0, 0.4)',\n    },\n    leave: {\n      transform: 'translateY(100%)',\n      backgroundColor: 'rgba(0, 0, 0, 0)',\n    },\n    config: transitionEnabled\n      ? { duration: 400, easing: easings.easeOutQuart }\n      : { duration: 0 },\n  })\n  const showDismiss = !isMobile || bottomSheet !== true\n\n  return transition(\n    ({ backgroundColor, transform }, item) =>\n      item && (\n        <Overlay portalContainer={portalContainer}>\n          <ModalBackground\n            zIndex={zIndex}\n            {...underlayProps}\n            style={transitionEnabled ? { backgroundColor } : {}}\n          >\n            <FocusScope contain restoreFocus autoFocus>\n              <ModalDialog\n                ref={ref}\n                {...overlayProps}\n                {...modalProps}\n                {...dialogProps}\n                style={transitionEnabled ? { transform } : {}}\n                size={size}\n                bottomSheet={bottomSheet}\n              >\n                <ModalContext.Provider\n                  value={{ titleProps, title, close: onClose, showDismiss }}\n                >\n                  {children}\n                  {isDismissable === true && (\n                    <ModalCrossButton\n                      size=\"S\"\n                      icon=\"24/Close\"\n                      onClick={onClose}\n                    />\n                  )}\n                </ModalContext.Provider>\n              </ModalDialog>\n            </FocusScope>\n          </ModalBackground>\n        </Overlay>\n      )\n  )\n}\n\nconst ModalContext = React.createContext<{\n  titleProps: React.HTMLAttributes<HTMLElement>\n  title: string\n  close?: () => void\n  showDismiss: boolean\n}>({\n  titleProps: {},\n  title: '',\n  close: undefined,\n  showDismiss: true,\n})\n\nconst ModalBackground = animated(styled.div<{ zIndex: number }>`\n  z-index: ${({ zIndex }) => zIndex};\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  ${theme((o) => [o.bg.surface4])}\n`)\n\nconst ModalDialog = animated(styled.div<{\n  size: 'S' | 'M' | 'L'\n  bottomSheet: boolean | 'full'\n}>`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: ${(p) =>\n    p.size === 'S'\n      ? columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2\n      : p.size === 'M'\n      ? columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2\n      : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n      p.size === 'L'\n      ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2\n      : unreachable(p.size)}px;\n\n  ${theme((o) => [o.bg.background1, o.borderRadius(24)])}\n\n  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {\n    ${(p) =>\n      p.bottomSheet === 'full'\n        ? css`\n            top: auto;\n            bottom: 0;\n            left: 0;\n            transform: none;\n            border-radius: 0;\n            width: 100%;\n            height: 100%;\n          `\n        : p.bottomSheet\n        ? css`\n            top: auto;\n            bottom: 0;\n            left: 0;\n            transform: none;\n            border-radius: 0;\n            width: 100%;\n          `\n        : css`\n            width: calc(100% - 48px);\n          `}\n  }\n`)\n\nconst ModalCrossButton = styled(IconButton)`\n  position: absolute;\n  top: 8px;\n  right: 8px;\n\n  ${theme((o) => [o.font.text3.hover.press])}\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} fixed>\n      {children}\n    </Button>\n  )\n}\n","/**\n * Unit for grid column (px)\n */\nexport const COLUMN_UNIT = 80\n\n/**\n * Unit for grid gutter width (px)\n */\nexport const GUTTER_UNIT = 24\n\n// TODO: Grid definition with breakpoint\n\n/**\n * Calculate px occupied by the span of the columns with gutter gap\n *\n * @param span column span count\n */\nexport function columnSystem(span: number, column: number, gutter: number) {\n  return span * column + (span - 1) * gutter\n}\n","import React from 'react'\nimport { ModalTitle } from '.'\nimport styled from 'styled-components'\nimport { theme } from '../../styled'\nimport { maxWidth } from '@charcoal-ui/utils'\n\nexport function ModalHeader() {\n  return (\n    <ModalHeaderRoot>\n      <StyledModalTitle />\n    </ModalHeaderRoot>\n  )\n}\n\nconst ModalHeaderRoot = styled.div`\n  height: 64px;\n  display: grid;\n  align-content: center;\n  justify-content: center;\n`\n\nconst StyledModalTitle = styled(ModalTitle)`\n  ${theme((o) => [o.font.text1, o.typography(16).bold])}\n`\n\nexport const ModalAlign = styled.div`\n  ${theme((o) => [o.padding.horizontal(24)])}\n\n  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {\n    ${theme((o) => [o.padding.horizontal(16)])}\n  }\n`\n\nexport const ModalBody = styled.div`\n  ${theme((o) => [o.padding.bottom(40)])}\n`\n\nexport const ModalButtons = styled.div`\n  display: grid;\n  grid-auto-flow: row;\n  grid-row-gap: 8px;\n  ${theme((o) => [o.padding.horizontal(24).top(16)])}\n\n  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {\n    ${theme((o) => [o.padding.horizontal(16)])}\n  }\n`\n","import React, { useImperativeHandle, useRef } from 'react'\nimport styled, { keyframes } from 'styled-components'\nimport { theme } from '../../styled'\n\nexport default function LoadingSpinner({\n  size = 48,\n  padding = 16,\n  transparent = false,\n}) {\n  return (\n    <LoadingSpinnerRoot size={size} padding={padding} transparent={transparent}>\n      <LoadingSpinnerIcon />\n    </LoadingSpinnerRoot>\n  )\n}\n\nconst LoadingSpinnerRoot = styled.div.attrs({ role: 'progressbar' })<{\n  size: number\n  padding: number\n  transparent: boolean\n}>`\n  margin: auto;\n  padding: ${(props) => props.padding}px;\n  border-radius: 8px;\n  font-size: ${(props) => props.size}px;\n  width: ${(props) => props.size}px;\n  height: ${(props) => props.size}px;\n  opacity: 0.84;\n  ${({ transparent }) =>\n    theme((o) => [\n      o.font.text4,\n      transparent ? o.bg.transparent : o.bg.background1,\n    ])}\n`\n\nconst scaleout = keyframes`\n  from {\n    transform: scale(0);\n    opacity: 1;\n  }\n\n  to {\n    transform: scale(1);\n    opacity: 0;\n  }\n`\n\nconst Icon = styled.div.attrs({ role: 'presentation' })<{ once: boolean }>`\n  width: 1em;\n  height: 1em;\n  border-radius: 1em;\n  background-color: currentColor;\n  animation: ${scaleout} 1s both ease-out;\n  animation-iteration-count: ${(p) => (p.once ? 1 : 'infinite')};\n\n  &[data-reset-animation] {\n    animation: none;\n  }\n`\n\ninterface Props {\n  once?: boolean\n}\n\nexport interface LoadingSpinnerIconHandler {\n  restart(): void\n}\n\nexport const LoadingSpinnerIcon = React.forwardRef<\n  LoadingSpinnerIconHandler,\n  Props\n>(function LoadingSpinnerIcon({ once = false }, ref) {\n  const iconRef = useRef<HTMLDivElement>(null)\n\n  useImperativeHandle(ref, () => ({\n    restart: () => {\n      if (!iconRef.current) {\n        return\n      }\n      iconRef.current.dataset.resetAnimation = 'true'\n      // Force reflow hack!\n      void iconRef.current.offsetWidth\n      delete iconRef.current.dataset.resetAnimation\n    },\n  }))\n\n  return <Icon ref={iconRef} once={once} />\n})\n","import React, { Key, useMemo, useRef } from 'react'\nimport styled from 'styled-components'\nimport { Item, useSelectState } from 'react-stately'\nimport { disabledSelector } from '@charcoal-ui/utils'\nimport { useVisuallyHidden } from '@react-aria/visually-hidden'\nimport { useSelect, HiddenSelect } from '@react-aria/select'\nimport { useButton } from '@react-aria/button'\nimport { SelectProps } from '@react-types/select'\nimport Listbox, { ListboxProps } from './Listbox'\nimport Icon from '../Icon'\nimport FieldLabel from '../FieldLabel'\nimport { theme } from '../../styled'\n\nimport type { CollectionBase } from '@react-types/shared'\nimport type { ReactNode } from 'react'\nimport { DropdownPopover } from './DropdownPopover'\n\ntype LabelProps = {\n  readonly showLabel?: boolean\n  readonly label: string\n  readonly subLabel?: ReactNode\n  readonly requiredText?: string\n}\n\ntype Empty = Record<string, unknown>\nexport type DropdownSelectorProps<T extends Empty = Empty> = LabelProps &\n  Readonly<CollectionBase<T>> & {\n    readonly id?: string\n    readonly name?: string\n    readonly autoComplete?: string\n    readonly placeholder?: string\n    readonly className?: string\n    readonly disabled?: boolean\n    readonly required?: boolean\n    readonly invalid?: boolean\n    readonly assertiveText?: string\n    readonly value?: Key\n    readonly defaultValue?: Key\n    readonly open?: boolean\n    readonly onOpenChange?: (isOpen?: boolean) => void\n    readonly onChange?: (key: Key) => void\n    readonly mode?: ListboxProps<T>['mode']\n  }\n\nconst DropdownSelector = <T extends Record<string, unknown>>({\n  open,\n  className,\n  label = '',\n  requiredText = '',\n  subLabel,\n  assertiveText,\n  autoComplete,\n  invalid = false,\n  disabled = false,\n  required = false,\n  showLabel = false,\n  mode = 'default',\n  ...props\n}: DropdownSelectorProps<T>) => {\n  const { visuallyHiddenProps } = useVisuallyHidden()\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const selectProps = useMemo<SelectProps<T>>(\n    () => ({\n      ...props,\n      label,\n      isOpen: open,\n      isDisabled: disabled,\n      isRequired: required,\n      errorMessage: invalid && assertiveText,\n      validationState: invalid ? 'invalid' : 'valid',\n      onSelectionChange: props.onChange,\n      selectedKey: props.value,\n      defaultSelectedKey: props.defaultValue,\n    }),\n    [assertiveText, disabled, invalid, label, open, props, required]\n  )\n  const state = useSelectState<T>(selectProps)\n\n  const {\n    labelProps,\n    triggerProps,\n    valueProps,\n    menuProps,\n    errorMessageProps,\n    descriptionProps,\n  } = useSelect<T>(selectProps, state, triggerRef)\n\n  const { buttonProps } = useButton(triggerProps, triggerRef)\n\n  const hasAssertiveText =\n    assertiveText !== undefined && assertiveText.length > 0\n\n  return (\n    <DropdownSelectorRoot aria-disabled={disabled} className={className}>\n      <DropdownFieldLabel\n        label={label}\n        required={required}\n        requiredText={requiredText}\n        subLabel={subLabel}\n        {...labelProps}\n        {...(!showLabel ? visuallyHiddenProps : {})}\n      />\n      <HiddenSelect\n        state={state}\n        triggerRef={triggerRef}\n        label={label}\n        name={props.name}\n        isDisabled={disabled}\n        autoComplete={autoComplete}\n      />\n      <DropdownButtonWrapper>\n        <DropdownButton {...buttonProps} ref={triggerRef} invalid={invalid}>\n          <DropdownButtonText {...valueProps}>\n            {/*\n             * react-stately の useSelectState から取得される selectedItem の型が常に\n             * Node<T> であるが runtime では null が帰ってくることがある\n             */}\n            {/* eslint-disable-next-line @typescript-eslint/strict-boolean-expressions,@typescript-eslint/no-unnecessary-condition*/}\n            {state.selectedItem\n              ? state.selectedItem.rendered\n              : props.placeholder}\n          </DropdownButtonText>\n\n          <DropdownButtonIcon name=\"16/Menu\" />\n        </DropdownButton>\n        {state.isOpen && (\n          <DropdownPopover\n            state={state}\n            triggerRef={triggerRef}\n            value={props.value ?? props.defaultValue}\n          >\n            <Listbox {...menuProps} state={state} mode={mode} />\n          </DropdownPopover>\n        )}\n      </DropdownButtonWrapper>\n\n      {hasAssertiveText && (\n        <AssertiveText\n          invalid={invalid}\n          {...(invalid ? errorMessageProps : descriptionProps)}\n        >\n          {assertiveText}\n        </AssertiveText>\n      )}\n    </DropdownSelectorRoot>\n  )\n}\n\nexport default DropdownSelector\nexport const DropdownSelectorItem = Item\n\nconst DropdownSelectorRoot = styled.div`\n  position: relative;\n  display: inline-block;\n  width: 100%;\n\n  ${disabledSelector} {\n    cursor: default;\n    ${theme((o) => o.disabled)}\n  }\n`\n\nconst DropdownFieldLabel = styled(FieldLabel)`\n  width: 100%;\n\n  ${theme((o) => o.margin.bottom(8))}\n`\n\nconst DropdownButtonWrapper = styled.div`\n  position: relative;\n`\n\nconst DropdownButton = styled.button<{ invalid: 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  cursor: pointer;\n\n  ${disabledSelector} {\n    cursor: default;\n  }\n\n  ${({ invalid }) =>\n    theme((o) => [\n      o.border.default,\n      o.padding.horizontal(8),\n      o.outline.default.focus,\n      o.bg.surface3,\n      o.borderRadius(4),\n      invalid && o.outline.assertive,\n    ])}\n`\n\nconst DropdownButtonText = styled.span`\n  text-align: left;\n\n  ${theme((o) => [o.typography(14), o.font.text2])}\n`\n\nconst DropdownButtonIcon = styled(Icon)`\n  ${theme((o) => [o.font.text2])}\n`\n\nconst AssertiveText = styled.div<{ invalid: boolean }>`\n  ${({ invalid }) =>\n    theme((o) => [\n      o.typography(14),\n      o.margin.top(8),\n      invalid ? o.font.assertive : o.font.text2,\n    ])}\n`\n","import React, { memo, useRef, Fragment, useMemo } from 'react'\nimport styled from 'styled-components'\nimport { ListProps, ListState } from 'react-stately'\nimport { useListBox, useOption } from '@react-aria/listbox'\nimport { mergeProps } from '@react-aria/utils'\nimport { useFocusRing } from '@react-aria/focus'\nimport { px } from '@charcoal-ui/utils'\nimport Icon from '../Icon'\nimport { theme } from '../../styled'\n\nimport type { Node } from '@react-types/shared'\n\ntype ListMode = 'default' | 'separator'\nexport type ListboxProps<T> = Omit<ListProps<T>, 'children'> & {\n  state: ListState<T>\n  mode?: ListMode\n}\n\nconst Listbox = <T,>({\n  state,\n  mode = 'default',\n  ...props\n}: ListboxProps<T>) => {\n  const ref = useRef<HTMLUListElement>(null)\n\n  const { listBoxProps } = useListBox(props, state, ref)\n  const collection = useMemo(\n    () =>\n      [...state.collection].map((node, index, self) => ({\n        node,\n        first: index === 0,\n        last: index === self.length - 1,\n      })),\n    [state.collection]\n  )\n\n  return (\n    <ListboxRoot ref={ref} {...listBoxProps}>\n      {collection.map(({ node, last }) => (\n        <Fragment key={node.key}>\n          <Option item={node} state={state} mode={mode} />\n          {!last && mode === 'separator' && <Divider />}\n        </Fragment>\n      ))}\n    </ListboxRoot>\n  )\n}\nexport default memo(Listbox)\n\nconst ListboxRoot = styled.ul`\n  padding-left: 0;\n  margin: 0;\n  box-sizing: border-box;\n  list-style: none;\n  overflow: auto;\n  max-height: inherit;\n\n  ${theme((o) => [\n    o.bg.background1,\n    o.border.default,\n    o.borderRadius(8),\n    o.outline.default.focus,\n  ])}\n`\n\nconst Divider = styled.div.attrs({ role: 'separator' })`\n  display: flex;\n  ${theme((o) => [o.padding.horizontal(8)])}\n\n  &:before {\n    content: '';\n    display: block;\n    width: 100%;\n    height: 1px;\n    background: #00000014;\n  }\n`\n\ntype OptionProps<T> = {\n  item: Node<T>\n  state: ListState<T>\n  mode?: ListMode\n}\n\nconst Option = <T,>({ item, state, mode }: OptionProps<T>) => {\n  const ref = useRef<HTMLLIElement>(null)\n\n  const { optionProps, isSelected } = useOption(item, state, ref)\n  const { focusProps } = useFocusRing()\n\n  return (\n    <OptionRoot {...mergeProps(optionProps, focusProps)} ref={ref} mode={mode}>\n      {isSelected && <OptionCheckIcon name=\"16/Check\" />}\n      <OptionText isSelected={isSelected}>{item.rendered}</OptionText>\n    </OptionRoot>\n  )\n}\n\nconst OptionRoot = styled.li<{ mode?: ListMode }>`\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => px(theme.spacing[4])};\n  height: 40px;\n  cursor: pointer;\n  outline: none;\n\n  ${({ mode }) =>\n    theme((o) => [\n      o.padding.horizontal(8),\n      mode === 'separator' && o.padding.vertical(4),\n    ])}\n\n  &:focus {\n    ${theme((o) => [o.bg.surface3])}\n  }\n`\nconst OptionCheckIcon = styled(Icon)`\n  ${theme((o) => [o.font.text2])}\n`\n\nconst OptionText = styled.span<{ isSelected: boolean }>`\n  display: block;\n  ${({ isSelected }) =>\n    theme((o) => [\n      o.typography(14),\n      o.font.text2,\n      isSelected ? undefined : o.margin.left(16),\n      isSelected ? undefined : o.padding.left(4),\n    ])}\n`\n","import React, { Key, useEffect, useRef } from 'react'\nimport { OverlayTriggerState } from 'react-stately'\nimport { ReactNode } from 'react'\nimport {\n  AriaPopoverProps,\n  DismissButton,\n  Overlay,\n  usePopover,\n} from '@react-aria/overlays'\nimport styled from 'styled-components'\nimport { theme } from '../../styled'\n\nconst DropdownPopoverDiv = styled.div`\n  width: 100%;\n  ${theme((o) => o.margin.top(4).bottom(4))}\n`\n\ntype Props = Omit<AriaPopoverProps, 'popoverRef'> & {\n  state: OverlayTriggerState\n} & {\n  children: ReactNode\n  value?: Key\n}\n\nexport function DropdownPopover({ children, state, ...props }: Props) {\n  const ref = useRef<HTMLDivElement>(null)\n  const { popoverProps, underlayProps } = usePopover(\n    {\n      ...props,\n      popoverRef: ref,\n      containerPadding: 0,\n    },\n    state\n  )\n\n  useEffect(() => {\n    if (ref.current && props.triggerRef.current) {\n      ref.current.style.width = `${props.triggerRef.current.clientWidth}px`\n    }\n  }, [props.triggerRef])\n\n  useEffect(() => {\n    if (state.isOpen && props.value !== undefined) {\n      // useListbox内部で現在の選択肢までスクロールする処理がある\n      // react-ariaより遅らせるためrequestAnimationFrameで呼び出す\n      window.requestAnimationFrame(() => {\n        if (props.value === undefined) return\n        // react-aria の scrollIntoViewport は 'nearest' なので\n        // listboxの中心に来るように上書きする\n        // 'center'は windowのスクロールも変更されるため戻す処理を入れている。\n        const windowScrollY = window.scrollY\n        const windowScrollX = window.scrollX\n        const selectedElement = document.querySelector(\n          `[data-key=\"${props.value.toString()}\"]`\n        ) as HTMLElement | undefined\n        selectedElement?.scrollIntoView({ block: 'center' })\n        window.scrollTo(windowScrollX, windowScrollY)\n      })\n    }\n  }, [props.value, state.isOpen])\n\n  return (\n    <Overlay>\n      <div {...underlayProps} style={{ position: 'fixed', inset: 0 }} />\n      <DropdownPopoverDiv {...popoverProps} ref={ref}>\n        <DismissButton onDismiss={() => state.close()} />\n        {children}\n        <DismissButton onDismiss={() => state.close()} />\n      </DropdownPopoverDiv>\n    </Overlay>\n  )\n}\n","import React, { forwardRef, memo, useMemo, useRef } from 'react'\nimport { useRadioGroupState } from 'react-stately'\nimport {\n  AriaRadioGroupProps,\n  AriaRadioProps,\n  useRadio,\n  useRadioGroup,\n} from '@react-aria/radio'\nimport styled from 'styled-components'\nimport { disabledSelector } from '@charcoal-ui/utils'\n\nimport { RadioProvider, useRadioContext } from './RadioGroupContext'\nimport { theme } from '../../styled'\n\ntype SegmentedControlItem = {\n  label: React.ReactNode\n  value: string\n  disabled?: boolean\n}\n\nexport type SegmentedControlProps = {\n  readonly id?: string\n  readonly name?: string\n  readonly disabled?: boolean\n  readonly readonly?: boolean\n  readonly required?: boolean\n\n  readonly value?: string\n  readonly defaultValue?: string\n\n  readonly data: string[] | SegmentedControlItem[]\n\n  readonly onChange?: (value: string) => void\n}\n\nconst SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControlInner(props, ref) {\n    const ariaRadioGroupProps = useMemo<AriaRadioGroupProps>(\n      () => ({\n        ...props,\n        isDisabled: props.disabled,\n        isReadOnly: props.readonly,\n        isRequired: props.required,\n      }),\n      [props]\n    )\n    const state = useRadioGroupState(ariaRadioGroupProps)\n    const { radioGroupProps } = useRadioGroup(ariaRadioGroupProps, state)\n    const segmentedControlItems = useMemo<SegmentedControlItem[]>(() => {\n      return props.data.map((d) =>\n        typeof d === 'string' ? { value: d, label: d } : d\n      )\n    }, [props.data])\n\n    return (\n      <SegmentedControlRoot ref={ref} {...radioGroupProps}>\n        <RadioProvider value={state}>\n          {segmentedControlItems.map((item) => (\n            <Segmented\n              key={item.value}\n              value={item.value}\n              disabled={item.disabled}\n            >\n              {item.label}\n            </Segmented>\n          ))}\n        </RadioProvider>\n      </SegmentedControlRoot>\n    )\n  }\n)\n\nexport default memo(SegmentedControl)\n\ntype RadioProps = {\n  value: string\n  disabled?: boolean\n}\n\nconst Segmented: React.FC<RadioProps> = ({ children, ...props }) => {\n  const state = useRadioContext()\n  const ref = useRef<HTMLInputElement>(null)\n  const ariaRadioProps = useMemo<AriaRadioProps>(\n    () => ({ ...props, isDisabled: props.disabled }),\n    [props]\n  )\n\n  const { inputProps, isDisabled, isSelected } = useRadio(\n    ariaRadioProps,\n    state,\n    ref\n  )\n\n  return (\n    <SegmentedRoot\n      aria-disabled={isDisabled || state.isReadOnly}\n      checked={isSelected}\n    >\n      <SegmentedInput {...inputProps} ref={ref} />\n      <RadioLabel>\n        <SegmentedLabelInner>{children}</SegmentedLabelInner>\n      </RadioLabel>\n    </SegmentedRoot>\n  )\n}\n\nconst SegmentedControlRoot = styled.div`\n  display: inline-flex;\n  align-items: center;\n\n  ${theme((o) => [o.bg.surface3, o.borderRadius(16)])}\n`\n\nconst SegmentedRoot = styled.label<{ checked?: boolean }>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  height: 32px;\n\n  ${disabledSelector} {\n    cursor: default;\n  }\n\n  ${({ checked }) =>\n    theme((o) => [\n      o.padding.horizontal(16),\n      o.borderRadius(16),\n      o.disabled,\n      checked === true && o.bg.brand,\n      checked === true ? o.font.text5 : o.font.text2,\n    ])}\n`\nconst SegmentedInput = styled.input`\n  position: absolute;\n\n  height: 0px;\n  width: 0px;\n  padding: 0;\n  margin: 0;\n\n  appearance: none;\n  box-sizing: border-box;\n  overflow: hidden;\n  white-space: nowrap;\n  opacity: 0;\n`\n\nconst RadioLabel = styled.div`\n  background: transparent;\n  display: flex;\n  align-items: center;\n  height: 22px;\n`\nconst SegmentedLabelInner = styled.div`\n  ${theme((o) => [o.typography(14)])}\n`\n","import React, { createContext, useContext } from 'react'\nimport { RadioGroupState } from 'react-stately'\n\nconst RadioContext = createContext<RadioGroupState | null>(null)\n\ntype RadioProviderProps = React.PropsWithChildren<{\n  value: RadioGroupState\n}>\nexport const RadioProvider: React.FC<RadioProviderProps> = ({\n  value,\n  children,\n}) => {\n  return <RadioContext.Provider value={value}>{children}</RadioContext.Provider>\n}\nexport const useRadioContext = () => {\n  const state = useContext(RadioContext)\n\n  if (state === null)\n    throw new Error('`<RadioProvider>` is not likely mounted.')\n\n  return state\n}\n","import React, { forwardRef, memo, useMemo } from 'react'\nimport styled, { css } from 'styled-components'\nimport { useCheckbox } from '@react-aria/checkbox'\nimport { useObjectRef } from '@react-aria/utils'\nimport { useToggleState } from 'react-stately'\nimport { disabledSelector, px } from '@charcoal-ui/utils'\nimport { theme } from '../../styled'\n\nimport type { AriaCheckboxProps } from '@react-types/checkbox'\nimport Icon from '../Icon'\n\ntype CheckboxLabelProps =\n  | {\n      children: React.ReactNode\n    }\n  | {\n      label: string\n    }\n\nexport type CheckboxProps = CheckboxLabelProps & {\n  readonly id?: string\n  readonly name?: string\n\n  readonly checked?: boolean\n  readonly defaultChecked?: boolean\n  readonly disabled?: boolean\n  readonly readonly?: boolean\n\n  readonly onClick?: () => void\n  readonly onChange?: (isSelected: boolean) => void\n  readonly onBlur?: () => void\n  readonly onFocus?: () => void\n}\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  function CheckboxInner(props, ref) {\n    const ariaCheckboxProps = useMemo<AriaCheckboxProps>(\n      () => ({\n        ...props,\n        isSelected: props.checked,\n        defaultSelected: props.defaultChecked,\n        // children がいない場合は aria-label をつけないといけない\n        'aria-label': 'children' in props ? undefined : props.label,\n        isDisabled: props.disabled,\n      }),\n      [props]\n    )\n    const state = useToggleState(ariaCheckboxProps)\n    const objectRef = useObjectRef(ref)\n\n    const { inputProps } = useCheckbox(ariaCheckboxProps, state, objectRef)\n    const isDisabled = (props.disabled ?? false) || (props.readonly ?? false)\n\n    return (\n      <InputRoot aria-disabled={isDisabled}>\n        <CheckboxRoot>\n          <CheckboxInput type=\"checkbox\" {...inputProps} />\n          <CheckboxInputOverlay aria-hidden={true} checked={inputProps.checked}>\n            <Icon name=\"24/Check\" unsafeNonGuidelineScale={2 / 3} />\n          </CheckboxInputOverlay>\n        </CheckboxRoot>\n\n        {'children' in props && <InputLabel>{props.children}</InputLabel>}\n      </InputRoot>\n    )\n  }\n)\n\nexport default memo(Checkbox)\n\nconst hiddenCss = css`\n  visibility: hidden;\n`\n\nconst InputRoot = styled.label`\n  position: relative;\n  display: flex;\n\n  cursor: pointer;\n  ${disabledSelector} {\n    cursor: default;\n  }\n\n  gap: ${({ theme }) => px(theme.spacing[4])};\n  ${theme((o) => [o.disabled])}\n`\n\nconst CheckboxRoot = styled.div`\n  position: relative;\n`\n\nconst CheckboxInput = styled.input`\n  &[type='checkbox'] {\n    appearance: none;\n    display: block;\n    cursor: pointer;\n    margin: 0;\n    width: 20px;\n    height: 20px;\n\n    &:checked {\n      ${theme((o) => o.bg.brand.hover.press)}\n    }\n    &:not(:checked) {\n      border-width: 2px;\n      border-style: solid;\n      border-color: ${({ theme }) => theme.color.text4};\n    }\n    ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}\n  }\n`\nconst CheckboxInputOverlay = styled.div<{ checked?: boolean }>`\n  position: absolute;\n  top: -2px;\n  left: -2px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ${theme((o) => [o.width.px(24), o.height.px(24), o.font.text5])}\n\n  ${({ checked }) => checked !== true && hiddenCss};\n`\n\nconst InputLabel = styled.div`\n  ${theme((o) => [o.font.text2])}\n\n  font-size: 14px;\n  /** checkbox の height が 20px なのでcheckbox と text が揃っているように見せるために行ボックスの高さを 20px にしている */\n  line-height: 20px;\n`\n","import React, {\n  forwardRef,\n  memo,\n  useMemo,\n  ComponentPropsWithoutRef,\n} from 'react'\nimport { useObjectRef } from '@react-aria/utils'\nimport styled, { css } from 'styled-components'\nimport { theme } from '../../styled'\nimport { disabledSelector, px } from '@charcoal-ui/utils'\nimport { AriaButtonProps, useButton } from '@react-aria/button'\nimport Icon from '../Icon'\n\nconst sizeMap = {\n  S: 32,\n  M: 40,\n}\n\nexport type TagItemProps = {\n  label: string\n  translatedLabel?: string\n  bgColor?: string\n  bgImage?: string\n  status?: 'default' | 'active' | 'inactive'\n  size?: keyof typeof sizeMap\n  disabled?: boolean\n} & Pick<ComponentPropsWithoutRef<'a'>, 'href' | 'target' | 'rel' | 'onClick'>\n\nconst TagItem = forwardRef<HTMLAnchorElement, TagItemProps>(\n  function TagItemInner(\n    {\n      label,\n      translatedLabel,\n      bgColor = '#7ACCB1',\n      bgImage,\n      size = 'M',\n      disabled,\n      status = 'default',\n      ...props\n    },\n    _ref\n  ) {\n    const ref = useObjectRef(_ref)\n    const ariaButtonProps = useMemo<AriaButtonProps<'a'>>(\n      () => ({\n        elementType: 'a',\n        isDisabled: disabled,\n        ...props,\n      }),\n      [disabled, props]\n    )\n\n    const { buttonProps } = useButton(ariaButtonProps, ref)\n    const hasTranslatedLabel =\n      translatedLabel !== undefined && translatedLabel.length > 0\n\n    return (\n      <TagItemRoot\n        ref={ref}\n        size={hasTranslatedLabel ? 'M' : size}\n        status={status}\n        {...buttonProps}\n      >\n        <Background bgColor={bgColor} bgImage={bgImage} />\n\n        <Inner>\n          <LabelWrapper isTranslate={hasTranslatedLabel}>\n            {hasTranslatedLabel && (\n              <TranslatedLabel>\n                <Label>{translatedLabel}</Label>\n              </TranslatedLabel>\n            )}\n            <Label>{label}</Label>\n          </LabelWrapper>\n          {status === 'active' && <Icon name=\"16/Remove\" />}\n        </Inner>\n      </TagItemRoot>\n    )\n  }\n)\n\nexport default memo(TagItem)\n\ntype TagItemRootProps = Pick<TagItemProps, 'status'> &\n  Required<Pick<TagItemProps, 'size'>>\n\nconst TagItemRoot = styled.a<TagItemRootProps>`\n  isolation: isolate;\n  position: relative;\n  height: ${({ size }) => sizeMap[size]}px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  cursor: pointer;\n  overflow: hidden;\n\n  ${({ size, status }) =>\n    theme((o) => [\n      o.outline.default.focus,\n      o.borderRadius(4),\n      status !== 'active' && size === 'M' && o.padding.horizontal(24),\n      status !== 'active' && size === 'S' && o.padding.horizontal(16),\n      status === 'inactive' && o.bg.surface3,\n      status === 'inactive' ? o.font.text2 : o.font.text5,\n      ...(status === 'active' ? [o.padding.left(16), o.padding.right(8)] : []),\n    ])}\n\n  ${disabledSelector} {\n    ${theme((o) => [o.disabled])}\n    cursor: default;\n  }\n`\n\nconst Background = styled.div<Pick<TagItemProps, 'bgColor' | 'bgImage'>>`\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  background-color: ${({ bgColor }) => bgColor};\n\n  ${({ bgImage }) =>\n    bgImage !== undefined &&\n    css`\n      ${theme((o) => [o.bg.surface4])}\n      &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background-position: center;\n        background-size: cover;\n        background-image: url(${bgImage});\n        mix-blend-mode: overlay;\n      }\n    `}\n`\n\nconst Inner = styled.div`\n  display: inline-flex;\n  gap: ${({ theme }) => px(theme.spacing[8])};\n  align-items: center;\n  z-index: 2;\n`\n\nconst labelCSS = css`\n  ${theme((o) => [o.typography(14).bold])}\n`\nconst translateLabelCSS = css`\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  font-size: 10px;\n`\nconst LabelWrapper = styled.div<{ isTranslate?: boolean }>`\n  ${({ isTranslate }) => (isTranslate ?? false ? translateLabelCSS : labelCSS)}\n`\n\nconst Label = styled.span`\n  max-width: 152px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: inherit;\n  color: inherit;\n  line-height: inherit;\n`\n\nconst TranslatedLabel = styled.div`\n  ${theme((o) => [o.typography(12).bold])}\n`\n"],"mappings":"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","names":["DefaultLink","React","React","React","styled","React","styled","React","Clickable","styled","Button","React","styled","React","styled","React","styled","styledProps","variantToProps","sizeToProps","React","useContext","styled","useContext","React","styled","theme","React","useCallback","useContext","styled","css","warning","disabledSelector","px","useContext","warning","useCallback","React","styled","disabledSelector","theme","px","css","React","styled","disabledSelector","React","styled","React","useCallback","useRef","styled","css","React","styled","createTheme","FieldLabel","Label","theme","createTheme","theme","styled","React","TextField","forwardRef","useRef","useCallback","count","rows","css","React","React","useContext","useRef","styled","css","useRef","theme","React","styled","css","useContext","React","styled","maxWidth","React","styled","theme","React","useRef","styled","React","styled","Icon","LoadingSpinnerIcon","useRef","React","useMemo","useRef","styled","disabledSelector","useVisuallyHidden","React","useRef","useMemo","styled","px","useRef","useMemo","React","styled","theme","px","React","useEffect","useRef","Overlay","styled","styled","useRef","useEffect","React","Overlay","useVisuallyHidden","useRef","useMemo","React","styled","disabledSelector","React","memo","useMemo","useRef","styled","disabledSelector","React","createContext","useContext","useMemo","React","memo","useRef","RadioLabel","styled","disabledSelector","React","forwardRef","memo","useMemo","styled","css","useToggleState","disabledSelector","px","forwardRef","useMemo","useToggleState","React","memo","css","styled","disabledSelector","theme","px","React","forwardRef","memo","useMemo","useObjectRef","styled","css","disabledSelector","px","useButton","forwardRef","useObjectRef","useMemo","useButton","React","Label","memo","styled","disabledSelector","css","theme","px"]}

package/dist/styled.d.ts

@@ -61,8 +61,8 @@ export declare const theme: (spec: (o: Record<string, unknown> & Readonly<{
 }> & {
     readonly typography: (size: keyof import("@charcoal-ui/theme").Typography) => import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "bold" | "monospace" | "preserveHalfLeading">;
 } & {
-    readonly margin: import("@charcoal-ui/styled").ModifiedArgumented<import("@charcoal-ui/styled").Internal, "horizontal" | "vertical" | "all" | "left" | "right" | "top" | "bottom", [0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440]>;
-    readonly padding: import("@charcoal-ui/styled").ModifiedArgumented<import("@charcoal-ui/styled").Internal, "horizontal" | "vertical" | "all" | "left" | "right" | "top" | "bottom", [0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440]>;
+    readonly margin: import("@charcoal-ui/styled").ModifiedArgumented<import("@charcoal-ui/styled").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440]>;
+    readonly padding: import("@charcoal-ui/styled").ModifiedArgumented<import("@charcoal-ui/styled").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440]>;
 } & {
     readonly width: Readonly<{
         px: (size: 0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled").Internal;
@@ -80,7 +80,7 @@ export declare const theme: (spec: (o: Record<string, unknown> & Readonly<{
     readonly disabled: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, never>;
 } & Readonly<{
     border: {
-        readonly default: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "left" | "right" | "top" | "bottom">;
+        readonly default: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "bottom" | "left" | "right" | "top">;
     };
 }> & Readonly<{
     borderRadius: (radius: "none" | 4 | 8 | 16 | 24 | "oval") => import("@charcoal-ui/styled").Internal;

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "2.2.1",
+  "version": "2.4.0",
   "license": "Apache-2.0",
-  "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.esm.js",
   "exports": {
-    "require": "./dist/index.cjs",
-    "default": "./dist/index.js"
+    "require": "./dist/index.cjs.js",
+    "default": "./dist/index.esm.js"
   },
   "types": "./dist/index.d.ts",
   "sideEffects": false,
@@ -50,21 +49,23 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^2.2.1",
-    "@charcoal-ui/styled": "^2.2.1",
-    "@charcoal-ui/theme": "^2.2.1",
-    "@charcoal-ui/utils": "^2.2.1",
-    "@react-aria/button": "^3.6.3",
-    "@react-aria/checkbox": "^3.2.3",
-    "@react-aria/dialog": "^3.2.1",
-    "@react-aria/focus": "^3.6.1",
-    "@react-aria/overlays": "^3.12.1",
-    "@react-aria/radio": "^3.4.0",
-    "@react-aria/select": "^3.8.2",
-    "@react-aria/ssr": "^3.3.0",
-    "@react-aria/switch": "^3.1.3",
-    "@react-aria/textfield": "^3.5.0",
-    "@react-aria/visually-hidden": "^3.2.3",
+    "@charcoal-ui/icons": "^2.4.0",
+    "@charcoal-ui/styled": "^2.4.0",
+    "@charcoal-ui/theme": "^2.4.0",
+    "@charcoal-ui/utils": "^2.4.0",
+    "@react-aria/button": "^3.7.0",
+    "@react-aria/checkbox": "^3.8.0",
+    "@react-aria/dialog": "^3.5.0",
+    "@react-aria/focus": "^3.11.0",
+    "@react-aria/listbox": "^3.8.0",
+    "@react-aria/overlays": "^3.13.0",
+    "@react-aria/radio": "^3.5.0",
+    "@react-aria/select": "^3.9.0",
+    "@react-aria/ssr": "^3.5.0",
+    "@react-aria/switch": "^3.4.0",
+    "@react-aria/textfield": "^3.9.0",
+    "@react-aria/utils": "^3.15.0",
+    "@react-aria/visually-hidden": "^3.7.0",
     "polished": "^4.1.4",
     "react-spring": "^9.0.0",
     "react-stately": "^3.19.0",
@@ -86,5 +87,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "3da489924e6e4c67f66c13bac76bed95366934d1"
+  "gitHead": "db58bc1a8e14d5f1ccb6e1e275fa29cfb3ec4972"
 }

package/src/components/Checkbox/index.story.tsx

@@ -18,17 +18,35 @@ type Props = {
 export const Labelled: Story<Props> = (props) => {
   return (
     <div>
-      <Checkbox
-        {...props}
-        name="labelled"
-        label="label"
-        onBlur={action('blur')}
-        onClick={action('click')}
-        onChange={action('change')}
-        onFocus={action('focus')}
-      >
-        同意する
-      </Checkbox>
+      <div style={{ marginBottom: '1em' }}>
+        <Checkbox
+          {...props}
+          name="labelled"
+          label="label"
+          onBlur={action('blur')}
+          onClick={action('click')}
+          onChange={action('change')}
+          onFocus={action('focus')}
+        >
+          同意する
+        </Checkbox>
+      </div>
+
+      <div>
+        <Checkbox
+          {...props}
+          name="labelled"
+          label="label"
+          onBlur={action('blur')}
+          onClick={action('click')}
+          onChange={action('change')}
+          onFocus={action('focus')}
+        >
+          <span style={{ width: 200, display: 'block' }}>
+            同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する
+          </span>
+        </Checkbox>
+      </div>
     </div>
   )
 }

package/src/components/Checkbox/index.tsx

@@ -53,10 +53,12 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
     return (
       <InputRoot aria-disabled={isDisabled}>
-        <CheckboxInput type="checkbox" {...inputProps} />
-        <CheckboxInputOverlay aria-hidden={true} checked={inputProps.checked}>
-          <Icon name="24/Check" unsafeNonGuidelineScale={2 / 3} />
-        </CheckboxInputOverlay>
+        <CheckboxRoot>
+          <CheckboxInput type="checkbox" {...inputProps} />
+          <CheckboxInputOverlay aria-hidden={true} checked={inputProps.checked}>
+            <Icon name="24/Check" unsafeNonGuidelineScale={2 / 3} />
+          </CheckboxInputOverlay>
+        </CheckboxRoot>
 
         {'children' in props && <InputLabel>{props.children}</InputLabel>}
       </InputRoot>
@@ -73,7 +75,7 @@ const hiddenCss = css`
 const InputRoot = styled.label`
   position: relative;
   display: flex;
-  align-items: center;
+
   cursor: pointer;
   ${disabledSelector} {
     cursor: default;
@@ -83,6 +85,10 @@ const InputRoot = styled.label`
   ${theme((o) => [o.disabled])}
 `
 
+const CheckboxRoot = styled.div`
+  position: relative;
+`
+
 const CheckboxInput = styled.input`
   &[type='checkbox'] {
     appearance: none;
@@ -118,5 +124,9 @@ const CheckboxInputOverlay = styled.div<{ checked?: boolean }>`
 `
 
 const InputLabel = styled.div`
-  ${theme((o) => [o.typography(14), o.font.text2])}
+  ${theme((o) => [o.font.text2])}
+
+  font-size: 14px;
+  /** checkbox の height が 20px なのでcheckbox と text が揃っているように見せるために行ボックスの高さを 20px にしている */
+  line-height: 20px;
 `

package/src/components/DropdownSelector/DropdownPopover.tsx

@@ -0,0 +1,72 @@
+import React, { Key, useEffect, useRef } from 'react'
+import { OverlayTriggerState } from 'react-stately'
+import { ReactNode } from 'react'
+import {
+  AriaPopoverProps,
+  DismissButton,
+  Overlay,
+  usePopover,
+} from '@react-aria/overlays'
+import styled from 'styled-components'
+import { theme } from '../../styled'
+
+const DropdownPopoverDiv = styled.div`
+  width: 100%;
+  ${theme((o) => o.margin.top(4).bottom(4))}
+`
+
+type Props = Omit<AriaPopoverProps, 'popoverRef'> & {
+  state: OverlayTriggerState
+} & {
+  children: ReactNode
+  value?: Key
+}
+
+export function DropdownPopover({ children, state, ...props }: Props) {
+  const ref = useRef<HTMLDivElement>(null)
+  const { popoverProps, underlayProps } = usePopover(
+    {
+      ...props,
+      popoverRef: ref,
+      containerPadding: 0,
+    },
+    state
+  )
+
+  useEffect(() => {
+    if (ref.current && props.triggerRef.current) {
+      ref.current.style.width = `${props.triggerRef.current.clientWidth}px`
+    }
+  }, [props.triggerRef])
+
+  useEffect(() => {
+    if (state.isOpen && props.value !== undefined) {
+      // useListbox内部で現在の選択肢までスクロールする処理がある
+      // react-ariaより遅らせるためrequestAnimationFrameで呼び出す
+      window.requestAnimationFrame(() => {
+        if (props.value === undefined) return
+        // react-aria の scrollIntoViewport は 'nearest' なので
+        // listboxの中心に来るように上書きする
+        // 'center'は windowのスクロールも変更されるため戻す処理を入れている。
+        const windowScrollY = window.scrollY
+        const windowScrollX = window.scrollX
+        const selectedElement = document.querySelector(
+          `[data-key="${props.value.toString()}"]`
+        ) as HTMLElement | undefined
+        selectedElement?.scrollIntoView({ block: 'center' })
+        window.scrollTo(windowScrollX, windowScrollY)
+      })
+    }
+  }, [props.value, state.isOpen])
+
+  return (
+    <Overlay>
+      <div {...underlayProps} style={{ position: 'fixed', inset: 0 }} />
+      <DropdownPopoverDiv {...popoverProps} ref={ref}>
+        <DismissButton onDismiss={() => state.close()} />
+        {children}
+        <DismissButton onDismiss={() => state.close()} />
+      </DropdownPopoverDiv>
+    </Overlay>
+  )
+}

package/src/components/DropdownSelector/Listbox.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useRef, Fragment, useMemo } from 'react'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 import { ListProps, ListState } from 'react-stately'
 import { useListBox, useOption } from '@react-aria/listbox'
 import { mergeProps } from '@react-aria/utils'
@@ -52,6 +52,8 @@ const ListboxRoot = styled.ul`
   margin: 0;
   box-sizing: border-box;
   list-style: none;
+  overflow: auto;
+  max-height: inherit;
 
   ${theme((o) => [
     o.bg.background1,
@@ -88,8 +90,8 @@ const Option = <T,>({ item, state, mode }: OptionProps<T>) => {
 
   return (
     <OptionRoot {...mergeProps(optionProps, focusProps)} ref={ref} mode={mode}>
-      <OptionCheckIcon name="16/Check" isSelected={isSelected} />
-      <OptionText>{item.rendered}</OptionText>
+      {isSelected && <OptionCheckIcon name="16/Check" />}
+      <OptionText isSelected={isSelected}>{item.rendered}</OptionText>
     </OptionRoot>
   )
 }
@@ -112,17 +114,17 @@ const OptionRoot = styled.li<{ mode?: ListMode }>`
     ${theme((o) => [o.bg.surface3])}
   }
 `
-const OptionCheckIcon = styled(Icon)<{ isSelected: boolean }>`
-  visibility: hidden;
+const OptionCheckIcon = styled(Icon)`
   ${theme((o) => [o.font.text2])}
-
-  ${({ isSelected }) =>
-    isSelected &&
-    css`
-      visibility: visible;
-    `}
 `
-const OptionText = styled.span`
+
+const OptionText = styled.span<{ isSelected: boolean }>`
   display: block;
-  ${theme((o) => [o.typography(14), o.font.text2])}
+  ${({ isSelected }) =>
+    theme((o) => [
+      o.typography(14),
+      o.font.text2,
+      isSelected ? undefined : o.margin.left(16),
+      isSelected ? undefined : o.padding.left(4),
+    ])}
 `