@charcoal-ui/react 1.0.0 → 2.0.0-alpha.2

package/dist/index.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.js","sources":["../src/core/ComponentAbstraction.tsx","../src/styled.ts","../src/components/Clickable/index.tsx","../src/components/Button/index.tsx","../src/_lib/index.ts","../src/components/IconButton/index.tsx","../src/components/Radio/index.tsx","../src/components/Switch/index.tsx","../src/components/FieldLabel/index.tsx","../src/components/TextField/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\ninterface 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","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 { 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 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    console.warn(\n      `IconButton with size \"${size}\" expect icon size \"${requiredIconSize}, but got \"${iconSize}\"`\n    )\n  }\n}\n","import React, { useCallback, useContext, useState } 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    padding: 6px;\n\n    width: 20px;\n    height: 20px;\n\n    ${({ hasError = false }) =>\n      theme((o) => [\n        o.borderRadius('oval'),\n        o.bg.text5.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.text4};\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)])}\n`\n\nexport type RadioGroupProps = React.PropsWithChildren<{\n  className?: string\n  defaultValue?: 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  defaultValue,\n  label,\n  name,\n  onChange,\n  disabled,\n  readonly,\n  hasError,\n  children,\n}: RadioGroupProps) {\n  const [selected, setSelected] = useState(defaultValue)\n\n  const handleChange = useCallback(\n    (next: string) => {\n      setSelected(next)\n      onChange(next)\n    },\n    [onChange]\n  )\n\n  return (\n    <RadioGroupContext.Provider\n      value={{\n        name,\n        selected,\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 { 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, px } 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  gap: ${({ theme }) => px(theme.spacing[4])};\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) => o.typography(14))}\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    ])}\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 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 { useTextField } from '@react-aria/textfield'\nimport { useVisuallyHidden } from '@react-aria/visually-hidden'\nimport React, { useCallback, useEffect, useRef, useState } 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 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}\n\nexport interface MultiLineTextFieldProps extends TextFieldBaseProps {\n  readonly autoHeight?: boolean\n  readonly multiline: true\n  readonly rows?: number\n  readonly type?: 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 countStringInCodePoints(string: string) {\n  return [...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  } = props\n\n  const { visuallyHiddenProps } = useVisuallyHidden()\n  const ariaRef = useRef<HTMLInputElement>(null)\n  const [count, setCount] = useState(countStringInCodePoints(props.value ?? ''))\n\n  const handleChange = useCallback(\n    (value: string) => {\n      const count = countStringInCodePoints(value)\n      if (maxLength !== undefined && count > maxLength) {\n        return\n      }\n      setCount(count)\n      onChange?.(value)\n    },\n    [maxLength, onChange]\n  )\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  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        <StyledInput\n          ref={mergeRefs(forwardRef, ariaRef)}\n          invalid={invalid}\n          {...inputProps}\n        />\n        {showCount && maxLength && (\n          <SingleLineCounter>\n            {count}/{maxLength}\n          </SingleLineCounter>\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\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(countStringInCodePoints(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 ?? 1\n      if (initialRows <= rows) {\n        setRows(rows)\n      }\n    },\n    [initialRows]\n  )\n\n  const handleChange = useCallback(\n    (value: string) => {\n      const count = countStringInCodePoints(value)\n      if (maxLength !== undefined && count > maxLength) {\n        return\n      }\n      setCount(count)\n      if (autoHeight && textareaRef.current !== null) {\n        syncHeight(textareaRef.current)\n      }\n      onChange?.(value)\n    },\n    [autoHeight, maxLength, onChange, syncHeight]\n  )\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 rows={rows}>\n        <StyledTextarea\n          ref={mergeRefs(textareaRef, forwardRef, ariaRef)}\n          invalid={invalid}\n          rows={rows}\n          {...inputProps}\n        />\n        {showCount && <MultiLineCounter>{count}</MultiLineCounter>}\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 StyledInput = styled.input<{ invalid: boolean }>`\n  border: none;\n  box-sizing: border-box;\n  outline: none;\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(40px / 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  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 }>`\n  display: grid;\n  position: relative;\n\n  ${({ rows }) => css`\n    max-height: calc(22px * ${rows} + 18px);\n  `};\n`\n\nconst StyledTextarea = styled.textarea<{ invalid: boolean }>`\n  border: none;\n  box-sizing: border-box;\n  outline: none;\n  resize: none;\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  border-radius: calc(4px / 0.875);\n\n  ${({ rows }) => css`\n    height: calc(22px / 0.875 * ${rows} + 18px / 0.875);\n  `};\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  /* 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  position: absolute;\n  top: 50%;\n  right: 8px;\n  transform: translateY(-50%);\n\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"],"names":["DefaultValue","Link","React","forwardRef","ref","to","children","rest","href","ComponentAbstractionContext","createContext","ComponentAbstraction","Provider","value","components","useComponentAbstraction","useContext","theme","createTheme","styled","Clickable","props","onClick","disabled","A","as","undefined","Button","clickableCss","css","disabledSelector","button","span","variant","size","fixed","StyledButton","withConfig","shouldForwardProp","prop","attrs","font","background","Error","arguments","length","JSON","stringify","unreachable","variantToProps","height","padding","sizeToProps","p","o","hover","press","bg","typography","bold","preserveHalfLeading","horizontal","borderRadius","outline","focus","IconButton","icon","requiredIconSize","result","exec","iconSize","console","warn","validateIconSize","StyledIconButton","name","width","Radio","forceChecked","RadioGroupContext","selected","isParentDisabled","readonly","hasError","onChange","warning","isSelected","isDisabled","isReadonly","handleChange","useCallback","e","currentTarget","RadioRoot","RadioInput","checked","RadioLabel","label","px","spacing","input","type","text5","assertive","color","text4","brand","div","StyledRadioGroup","RadioGroup","className","useState","defaultValue","setSelected","next","role","SwitchCheckbox","ariaSwitchProps","useMemo","state","useToggleState","useRef","useSwitch","inputProps","Label","SwitchInput","LabelInner","FieldLabel","style","required","requiredText","subLabel","labelProps","FieldLabelWrapper","RequiredText","SubLabelClickable","text1","text3","margin","left","mergeRefs","current","countStringInCodePoints","string","TextField","multiline","MultiLineTextField","SingleLineTextField","showLabel","showCount","invalid","assistiveText","maxLength","visuallyHiddenProps","useVisuallyHidden","ariaRef","count","setCount","useTextField","inputElementType","isRequired","validationState","description","errorMessage","descriptionProps","errorMessageProps","TextFieldRoot","TextFieldLabel","StyledInputContainer","StyledInput","SingleLineCounter","AssistiveText","autoHeight","rows","initialRows","textareaRef","setRows","syncHeight","textarea","match","_$match","useEffect","StyledTextareaContainer","StyledTextarea","MultiLineCounter","opacity","elementEffect","bottom","surface3","text2","top"],"mappings":"wrDAuBMA,EAA2B,CAC/BC,KAfyBC,EAAMC,WAC/B,WAAgDC,OAAzBC,IAAAA,GAAIC,IAAAA,SAAaC,sBACtC,OACEL,uBAAGM,KAAMH,EAAID,IAAKA,GAASG,GACxBD,MAcHG,EAA8BP,EAAMQ,cAAcV,YAOhCW,SAAuBL,IAAAA,sBAC7C,OACEJ,gBAACO,EAA4BG,UAC3BC,WAAYb,IAHuCc,aAKlDR,YAKSS,IACd,OAAOC,EAAWP,yBC3CPQ,EAAQC,EAAYC,4BCyB3BC,EAAYlB,EAAMC,WACtB,SAAmBkB,EAAOjB,GACxB,IAAQH,EAASc,IAATd,KACR,GAAI,OAAQoB,EAAO,CACjB,IAAQC,EAAuCD,EAAvCC,UAAuCD,EAA9BE,SAAAA,gBAAqBhB,IAASc,kBAC/C,OACEnB,gBAACsB,OACKjB,GACJkB,GAAIF,OAAWG,EAAYzB,EAC3BqB,QAASC,OAAWG,EAAYJ,EAChC,gBAAeC,EACfnB,IAAKA,kBAIT,OAAOF,gBAACyB,OAAWN,GAAOjB,IAAKA,OAM/BwB,EAAeC,sGAIjBC,GAKEH,EAASR,EAAOY,utBAkClBH,GAGEJ,EAAIL,EAAOa,uKAYbJ,sDChFED,EAASzB,EAAMC,WAA0C,WAS7DC,OAPEE,IAAAA,aACA2B,QAAAA,aAAU,gBACVC,KAAAA,aAAO,UACPC,MAAAA,oBACAZ,SAAAA,gBACGhB,sBAIL,OACEL,gBAACkC,OACK7B,GACJgB,SAAUA,EACVU,QAASA,EACTC,KAAMA,EACNC,MAAOA,EACP/B,IAAKA,IAEJE,KAMD8B,EAAejB,EAAOC,GACzBiB,WAAwB,CACvBC,2BAAkBC,GAEhB,MAAgB,UAATA,KAGVC,MAwBH,SAAqBnB,GACnB,YACKA,EAMP,SAAwBY,GACtB,OAAQA,GACN,IAAK,UACH,MAAO,CAAEQ,KAAM,QAASC,WAAY,YACtC,IAAK,UACH,MAAO,CAAED,KAAM,QAASC,WAAY,YACtC,IAAK,UACH,MAAO,CAAED,KAAM,QAASC,WAAY,SACtC,IAAK,aACH,MAAO,CAAED,KAAM,QAASC,WAAY,YACtC,IAAK,SACH,MAAO,CAAED,KAAM,QAASC,WAAY,aACtC,QACE,gBC5EsB7B,GAC1B,UAAU8B,MACa,IAArBC,UAAUC,OACN,8BACgBC,KAAKC,UAAUlC,QDwE1BmC,CAAYf,IAlBlBgB,CAAe5B,EAAMY,SAsB5B,SAAqBC,GACnB,OAAQA,GACN,IAAK,IACH,MAAO,CACLgB,OAAQ,GACRC,QAAS,IAEb,IAAK,IACH,MAAO,CACLD,OAAQ,GACRC,QAAS,KA/BVC,CAAY/B,EAAMa,QAnCJf,oPAQV,SAACkC,UAAOA,EAAElB,MAAQ,UAAY,eAQrC,SAACkB,UACDpC,EAAM,SAACqC,SAAM,CACXA,EAAEb,KAAKY,EAAEZ,MAAMc,MAAMC,MACrBF,EAAEG,GAAGJ,EAAEX,YAAYa,MAAMC,MACzBF,EAAEI,WAAW,IAAIC,KAAKC,oBACtBN,EAAEH,QAAQU,WAAWR,EAAEF,SACvBG,EAAE/B,SACF+B,EAAEQ,aAAa,QACfR,EAAES,gBAAgBC,UAIZ,SAACX,UAAMA,EAAEH,qCE/Dfe,EAAa/D,EAAMC,WACvB,WAEEC,WADE6B,QAAAA,aAAU,gBAAWC,KAAAA,aAAO,MAAKgC,IAAAA,KAAS3D,SAI5C,OAwEJ,SAA0B2B,EAAYgC,GACpC,IAAIC,EACJ,OAAQjC,GACN,IAAK,KACHiC,EAAmB,KACnB,MACF,IAAK,IACL,IAAK,IACHA,EAAmB,KAIvB,IAAMC,EAAS,UAAQC,KAAKH,GAC5B,GAAc,MAAVE,EACF,UAAUzB,MAAM,qBAElB,IAAO2B,EAAYF,KACfE,IAAaH,GACfI,QAAQC,8BACmBtC,yBAA2BiC,gBAA8BG,OA5FpFG,CAAiBvC,EAAMgC,gBAErBhE,gBAACwE,OAAqBnE,GAAMH,IAAKA,EAAK6B,QAASA,EAASC,KAAMA,iBAC5DhC,8BAAYyE,KAAMT,OAQpBQ,EAAmBvD,EAAOC,GAAWoB,MAsB3C,SAAqBnB,GACnB,YACKA,EAMP,SAAwBY,GACtB,OAAQA,GACN,IAAK,UACH,MAAO,CAAEQ,KAAM,QAASC,WAAY,eACtC,IAAK,UACH,MAAO,CAAED,KAAM,QAASC,WAAY,aAVnCO,CAAe5B,EAAMY,SAc5B,SAAqBC,GACnB,OAAQA,GACN,IAAK,KACH,MAAO,CACL0C,MAAO,GACP1B,OAAQ,IAEZ,IAAK,IACH,MAAO,CACL0B,MAAO,GACP1B,OAAQ,IAEZ,IAAK,IACH,MAAO,CACL0B,MAAO,GACP1B,OAAQ,KA5BTE,CAAY/B,EAAMa,QA1BAf,4JAMd,SAACkC,UAAMA,EAAEuB,OACR,SAACvB,UAAMA,EAAEH,QAKjB,gBAAGT,IAAAA,KAAMC,IAAAA,kBACTzB,EAAM,SAACqC,SAAM,CACXA,EAAEb,KAAKA,GACPa,EAAEG,GAAGf,GAAYa,MAAMC,MACvBF,EAAE/B,SACF+B,EAAEQ,aAAa,QACfR,EAAES,gBAAgBC,oBCvCAa,SACtBhE,IAAAA,UACAiE,aAAAA,oBACAvD,SAAAA,gBACAjB,IAAAA,WASIU,EAAW+D,IANbJ,IAAAA,KACAK,IAAAA,SACUC,IAAV1D,SACA2D,IAAAA,SACAC,IAAAA,SACAC,IAAAA,SAGFC,OAEW3D,IAATiD,wFAIF,IAAMW,EAAazE,IAAUmE,EACvBO,EAAahE,GAAY0D,EACzBO,EAAaN,IAAaI,EAE1BG,EAAeC,EACnB,SAACC,GACCP,EAASO,EAAEC,cAAc/E,QAE3B,CAACuE,iBAGH,OACElF,gBAAC2F,GAAU,gBAAeN,GAAcC,gBACtCtF,gBAAC4F,GACCnB,KAAMA,EACN9D,MAAOA,EACPkF,QAASjB,GAAgBQ,EACzBH,SAAUA,EACVC,SAAUK,EACVlE,SAAUgE,GAAcC,IAEb,MAAZlF,gBAAoBJ,gBAAC8F,QAAY1F,IAKxC,UAAMuF,EAAY1E,EAAO8E,oJAGX,mBAAeC,IAAZjF,MAAqBkF,QAAQ,KAI1ClF,EAAM,SAACqC,SAAM,CAACA,EAAE/B,aAGPuE,EAAa3E,EAAOiF,MAAM5D,MAAM,CAAE6D,KAAM,SAA3BlF,gjBAcpB,oBAAGgE,SAAAA,uBACHlE,EAAM,SAACqC,SAAM,CACXA,EAAEQ,aAAa,QACfR,EAAEG,GAAG6C,MAAM/C,MAAMC,MACjB2B,GAAY7B,EAAES,QAAQwC,cAMR,qBAAGtF,MAAkBuF,MAAMC,OAIzCxF,EAAM,SAACqC,UAAMA,EAAEG,GAAGiD,MAAMnD,MAAMC,QAS5BvC,EAAM,SAACqC,SAAM,CAACA,EAAEG,GAAG6C,MAAM/C,MAAMC,MAAOF,EAAEQ,aAAa,WAIzD7C,EAAM,SAACqC,UAAMA,EAAES,gBAAgBC,SAI/BgC,GAAa7E,EAAOwF,4BACtB1F,EAAM,SAACqC,SAAM,CAACA,EAAEI,WAAW,QAezBkD,GAAmBzF,EAAOwF,wFAGlB,mBAAeT,IAAZjF,MAAqBkF,QAAQ,MAYxCpB,GAAoB7E,EAAMQ,cAAiC,CAC/DiE,UAAMjD,EACNsD,cAAUtD,EACVH,UAAU,EACV2D,UAAU,EACVC,UAAU,EACVC,oBACE,UAAUzC,MACR,8FAKUkE,UACdC,IAAAA,UAEAb,IAAAA,MACAtB,IAAAA,KACAS,IAAAA,SACA7D,IAAAA,SACA2D,IAAAA,SACAC,IAAAA,SACA7E,IAAAA,WAEgCyG,IAThCC,cASOhC,OAAUiC,OAEXxB,EAAeC,EACnB,SAACwB,GACCD,EAAYC,GACZ9B,EAAS8B,IAEX,CAAC9B,iBAGH,OACElF,gBAAC6E,GAAkBnE,UACjBC,MAAO,CACL8D,KAAAA,EACAK,SAAAA,EACAzD,eAAUA,GAAAA,EACV2D,eAAUA,GAAAA,EACVC,eAAUA,GAAAA,EACVC,SAAUK,iBAGZvF,gBAAC0G,IACCO,KAAK,aACL,mBAAiB,WACjB,aAAYlB,EACZ,eAAcd,EACd2B,UAAWA,GAEVxG,yCC5Ke8G,GAAe/F,GACrC,IAAQE,EAAwBF,EAAxBE,SAAUuF,EAAczF,EAAdyF,UAEZO,EAAmCC,EACvC,uBACKjG,GAGH,aAAc,aAAcA,OAAQK,EAAYL,EAAM4E,MACtDV,WAAYlE,EAAME,SAClB+D,WAAYjE,EAAM0E,WAEpB,CAAC1E,IAGGkG,EAAQC,EAAeH,GACvBjH,EAAMqH,EAAyB,MAEkBlH,IACnDmH,EAAUL,EAAiBE,EAAOnH,GADpCuH,4BAGF,OACEzH,gBAAC0H,IAAMd,UAAWA,EAAW,gBAAevF,gBAC1CrB,gBAAC2H,QAAgBtH,GAAMH,IAAKA,KAC3B,aAAciB,eAEbnB,gBAAC4H,QAAYzG,EAAMf,eACjBoB,GAKV,iDAAMkG,GAAQzG,EAAO8E,mLAGZ,mBAAeC,IAAZjF,MAAqBkF,QAAQ,KAIrClF,EAAM,SAACqC,UAAMA,EAAE/B,WAEfO,GAKEgG,GAAa3G,EAAOwF,4BACtB1F,EAAM,SAACqC,UAAMA,EAAEI,WAAW,OAGxBmE,GAAc1G,EAAOiF,MAAM5D,MAAM,CACrC6D,KAAM,YADYlF,moBAYdF,EAAM,SAACqC,SAAM,CACbA,EAAEQ,aAAa,IACfR,EAAEJ,OAAOgD,GAAG,IACZ5C,EAAEG,GAAGgD,MAAMlD,MAAMC,MACjBF,EAAES,gBAAgBC,SAahB/C,EAAM,SAACqC,SAAM,CAACA,EAAEG,GAAG6C,MAAM/C,MAAMC,MAAOF,EAAEQ,aAAa,WAIrD7C,EAAM,SAACqC,UAAMA,EAAEG,GAAGiD,MAAMnD,MAAMC,+EC9FhCuE,GAAa7H,EAAMC,WACvB,WAUEC,OARE4H,IAAAA,MACAlB,IAAAA,UACAb,IAAAA,UACAgC,SAAAA,gBACAC,IAAAA,aACAC,IAAAA,SACGC,uBAIL,OACElI,gBAACmI,IAAkBL,MAAOA,EAAOlB,UAAWA,gBAC1C5G,gBAAC0H,MAAMxH,IAAKA,GAASgI,GAClBnC,GAEFgC,gBAAY/H,gBAACoI,QAAcJ,gBAC5BhI,gBAACqI,qBACCrI,4BAAOiI,OASXlH,GAAQC,EAAYC,GAEpByG,GAAQzG,EAAO8E,gCACjBhF,GAAM,SAACqC,SAAM,CAACA,EAAEI,WAAW,IAAIC,KAAML,EAAEb,KAAK+F,UAG1CF,GAAenH,EAAOa,+BACxBf,GAAM,SAACqC,SAAM,CAACA,EAAEI,WAAW,IAAKJ,EAAEb,KAAKgG,UAGrCF,GAAoBpH,EAAOwF,8BAC7B1F,GAAM,SAACqC,SAAM,CACbA,EAAEI,WAAW,IACbJ,EAAEb,KAAKgG,MAAMlF,MAAMC,MACnBF,EAAES,gBAAgBC,UAIhBqE,GAAoBlH,EAAOwF,8HAI3B2B,GACArH,GAAM,SAACqC,UAAMA,EAAEoF,OAAOC,KAAK,KAG3BJ,GACAtH,GAAM,SAACqC,UAAMA,EAAEoF,OAAOC,KAAK,2CC/D3B1H,GAAQC,EAAYC,GAuC1B,SAASyH,qBACP,gBAAQ/H,GACN,+CAAwB,KAAbT,UACU,mBAARA,EACTA,EAAIS,GACa,OAART,IACPA,EAAyCyI,QAAUhI,KAM7D,SAASiI,GAAwBC,GAC/B,MAAO,UAAIA,GAAQlG,OAGfmG,IAAAA,GAAY9I,EAAMC,WACtB,SAAmBkB,EAAOjB,gBACxB,OACEF,qBADyBwB,IAApBL,EAAM4H,WAA2B5H,EAAM4H,UAC3CC,GAEAC,MAFmB/I,IAAKA,GAASiB,MASlC8H,GAAsBjJ,EAAMC,WAGhC,WAA0DA,SAAtBiF,IAAAA,SAAa/D,UAE/CyF,EAWEzF,EAXFyF,YAWEzF,EAVF+H,UAAAA,kBAUE/H,EATFgI,UAAAA,gBACApD,EAQE5E,EARF4E,MACAiC,EAOE7G,EAPF6G,aACAC,EAME9G,EANF8G,WAME9G,EALFE,SAAAA,gBACA0G,EAIE5G,EAJF4G,WAIE5G,EAHFiI,QAAAA,gBACAC,EAEElI,EAFFkI,cACAC,EACEnI,EADFmI,UAGMC,EAAwBC,IAAxBD,oBACFE,EAAUlC,EAAyB,QACfV,EAAS+B,YAAwBzH,EAAMR,SAAS,KAAnE+I,OAAOC,OAERpE,EAAeC,EACnB,SAAC7E,GACC,IAAM+I,EAAQd,GAAwBjI,QACpBa,IAAd8H,GAA2BI,EAAQJ,IAGvCK,EAASD,SACTxE,GAAAA,EAAWvE,KAEb,CAAC2I,EAAWpE,MAIZ0E,KAEIC,iBAAkB,QAClBxE,WAAYhE,EACZyI,WAAY/B,EACZgC,gBAAiBX,EAAU,UAAY,QACvCY,aAAcZ,GAAWC,EACzBY,aAAcb,GAAWC,EACzBnE,SAAUK,GACPpE,GAELsI,GAZIhC,IAAAA,WAAwByC,IAAAA,iBAAkBC,IAAAA,+BAelD,OACEnK,gBAACoK,IAAcxD,UAAWA,EAAWvB,WAAYhE,gBAC/CrB,gBAACqK,MACCtE,MAAOA,EACPiC,aAAcA,EACdD,SAAUA,EACVE,SAAUA,KArBIC,WAuBRgB,EAAkC,GAAtBK,iBAEpBvJ,gBAACsK,qBACCtK,gBAACuK,MACCrK,IAAKwI,GAAUzI,EAAYwJ,GAC3BL,QAASA,GACL3B,IAEL0B,GAAaG,gBACZtJ,gBAACwK,QACEd,MAAQJ,IAIG,MAAjBD,GAAkD,IAAzBA,EAAc1G,qBACtC3C,gBAACyK,MACCrB,QAASA,GACJA,EAAUe,EAAoBD,GAElCb,MAOLL,GAAqBhJ,EAAMC,WAG/B,WAAyDA,SAAtBiF,IAAAA,SAAa/D,UAE9CyF,EAaEzF,EAbFyF,YAaEzF,EAZFgI,UAAAA,kBAYEhI,EAXF+H,UAAAA,gBACAnD,EAUE5E,EAVF4E,MACAiC,EASE7G,EATF6G,aACAC,EAQE9G,EARF8G,WAQE9G,EAPFE,SAAAA,gBACA0G,EAME5G,EANF4G,WAME5G,EALFiI,QAAAA,gBACAC,EAIElI,EAJFkI,cACAC,EAGEnI,EAHFmI,YAGEnI,EAFFuJ,WAAAA,kBAEEvJ,EADFwJ,KAAMC,aAAc,IAGdrB,EAAwBC,IAAxBD,oBACFsB,EAActD,EAA4B,MAC1CkC,EAAUlC,EAA4B,QAClBV,EAAS+B,YAAwBzH,EAAMR,SAAS,KAAnE+I,OAAOC,SACU9C,EAAS+D,GAA1BD,OAAMG,OAEPC,EAAavF,EACjB,SAACwF,WACOL,qBAAUK,EAASrK,YAAUsK,MAAM,eAA5BC,EAAqCvI,UAAU,EACxDiI,GAAeD,GACjBG,EAAQH,IAGZ,CAACC,IAGGrF,EAAeC,EACnB,SAAC7E,GACC,IAAM+I,EAAQd,GAAwBjI,QACpBa,IAAd8H,GAA2BI,EAAQJ,IAGvCK,EAASD,GACLgB,GAAsC,OAAxBG,EAAYlC,SAC5BoC,EAAWF,EAAYlC,eAEzBzD,GAAAA,EAAWvE,KAEb,CAAC+J,EAAYpB,EAAWpE,EAAU6F,MAIlCnB,KAEIC,iBAAkB,WAClBxE,WAAYhE,EACZyI,WAAY/B,EACZgC,gBAAiBX,EAAU,UAAY,QACvCY,aAAcZ,GAAWC,EACzBY,aAAcb,GAAWC,EACzBnE,SAAUK,GACPpE,GAELsI,GAZIhC,IAAAA,WAAYS,IAAAA,WAAYgC,IAAAA,iBAAkBC,IAAAA,kBAqBlD,OANAgB,EAAU,WACJT,GAAsC,OAAxBG,EAAYlC,SAC5BoC,EAAWF,EAAYlC,UAExB,CAAC+B,EAAYK,iBAGd/K,gBAACoK,IAAcxD,UAAWA,EAAWvB,WAAYhE,gBAC/CrB,gBAACqK,MACCtE,MAAOA,EACPiC,aAAcA,EACdD,SAAUA,EACVE,SAAUA,GACNC,EACCgB,EAAYK,EAAsB,kBAEzCvJ,gBAACoL,IAAwBT,KAAMA,gBAC7B3K,gBAACqL,MACCnL,IAAKwI,GAAUmC,EAAa5K,EAAYwJ,GACxCL,QAASA,EACTuB,KAAMA,GACFlD,IAEL0B,gBAAanJ,gBAACsL,QAAkB5B,IAEjB,MAAjBL,GAAkD,IAAzBA,EAAc1G,qBACtC3C,gBAACyK,MACCrB,QAASA,GACJA,EAAUe,EAAoBD,GAElCb,MAOLe,GAAgBnJ,EAAOwF,6EAIzB,SAACtD,UAAMA,EAAEkC,YAAc,CAAEkG,QAASpI,EAAEpC,MAAMyK,cAAcnK,SAASkK,WAG/DlB,GAAiBpJ,EAAO4G,GAAP5G,2BACnBF,GAAM,SAACqC,UAAMA,EAAEoF,OAAOiD,OAAO,MAG3BnB,GAAuBrJ,EAAOwF,kFAM9B8D,GAActJ,EAAOiF,ogBAkBvB,SAAC/C,UACDpC,GAAM,SAACqC,SAAM,CACXA,EAAEG,GAAGmI,SAASrI,MACdD,EAAES,gBAAgBC,MAClBX,EAAEiG,SAAWhG,EAAES,QAAQwC,UACvBjD,EAAEb,KAAKoJ,UAIP5K,GAAM,SAACqC,UAAMA,EAAEb,KAAKgG,SAIpB6C,GAA0BnK,EAAOwF,0EAInC,gBAAGkE,IAAAA,YAAWhJ,iEACYgJ,KAIxBU,GAAiBpK,EAAO+J,qvBAe1B,gBAAGL,IAAAA,YAAWhJ,6EACgBgJ,IAM9B,SAACxH,UACDpC,GAAM,SAACqC,SAAM,CACXA,EAAEG,GAAGmI,SAASrI,MACdD,EAAES,gBAAgBC,MAClBX,EAAEiG,SAAWhG,EAAES,QAAQwC,UACvBjD,EAAEb,KAAKoJ,UAIP5K,GAAM,SAACqC,UAAMA,EAAEb,KAAKgG,SAYpBiC,GAAoBvJ,EAAOa,oHAM7Bf,GAAM,SAACqC,SAAM,CAACA,EAAEI,WAAW,IAAIE,oBAAqBN,EAAEb,KAAKgG,UAGzD+C,GAAmBrK,EAAOa,uFAK5Bf,GAAM,SAACqC,SAAM,CAACA,EAAEI,WAAW,IAAIE,oBAAqBN,EAAEb,KAAKgG,UAGzDkC,GAAgBxJ,EAAOkC,4BACzB,SAACA,UACDpC,GAAM,SAACqC,SAAM,CACXA,EAAEI,WAAW,IACbJ,EAAEoF,OAAOoD,IAAI,GACbxI,EAAEoF,OAAOiD,OAAO,GAChBrI,EAAEb,KAAKY,EAAEiG,QAAU,YAAc"}
+{"version":3,"file":"index.module.js","sources":["../src/core/ComponentAbstraction.tsx","../src/styled.ts","../src/components/Clickable/index.tsx","../src/components/Button/index.tsx","../src/_lib/index.ts","../src/components/IconButton/index.tsx","../src/components/Radio/index.tsx","../src/components/Select/context.ts","../src/components/Select/index.tsx","../src/components/Switch/index.tsx","../src/components/FieldLabel/index.tsx","../src/components/TextField/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\ninterface 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","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 { 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 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    padding: 6px;\n\n    width: 20px;\n    height: 20px;\n\n    ${({ hasError = false }) =>\n      theme((o) => [\n        o.borderRadius('oval'),\n        o.bg.text5.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.text4};\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)])}\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 { createContext } from 'react'\n\ntype SelectGroupContext = {\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 SelectGroupContext = createContext<SelectGroupContext>({\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 `<SelectGroup />` ?'\n    )\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 { SelectGroupContext } from './context'\n\nexport type SelectProps = 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 Select({\n  value,\n  forceChecked = false,\n  disabled = false,\n  onChange,\n  variant = 'default',\n  children,\n}: SelectProps) {\n  const {\n    name,\n    selected,\n    disabled: parentDisabled,\n    readonly,\n    hasError,\n    onChange: parentOnChange,\n  } = useContext(SelectGroupContext)\n\n  warning(\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    name !== undefined,\n    `\"name\" is not Provided for <Select>. Perhaps you forgot to wrap with <SelectGroup> ?`\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    <SelectRoot aria-disabled={isDisabled}>\n      <SelectInput\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      <SelectInputOverlay\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      </SelectInputOverlay>\n      {Boolean(children) && <SelectLabel>{children}</SelectLabel>}\n    </SelectRoot>\n  )\n}\n\nconst SelectRoot = 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 SelectLabel = styled.div`\n  display: flex;\n  align-items: center;\n  ${theme((o) => [o.typography(14), o.font.text1])}\n`\n\nconst SelectInput = 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 SelectInputOverlay = styled.div<{ overlay: boolean; hasError: 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  ${({ 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 SelectGroupProps = 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 SelectGroup({\n  className,\n  name,\n  ariaLabel,\n  selected,\n  onChange,\n  disabled = false,\n  readonly = false,\n  hasError = false,\n  children,\n}: SelectGroupProps) {\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    <SelectGroupContext.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    </SelectGroupContext.Provider>\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, px } 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  gap: ${({ theme }) => px(theme.spacing[4])};\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) => o.typography(14))}\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    ])}\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 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 { useTextField } from '@react-aria/textfield'\nimport { useVisuallyHidden } from '@react-aria/visually-hidden'\nimport React, { useCallback, useEffect, useRef, useState } 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 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?: string\n  readonly suffix?: string\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 = '',\n    suffix = '',\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 && maxLength && (\n            <SingleLineCounter>\n              {count}/{maxLength}\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 ?? 1\n      if (initialRows <= rows) {\n        setRows(rows)\n      }\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 rows={rows}>\n        <StyledTextarea\n          ref={mergeRefs(textareaRef, forwardRef, ariaRef)}\n          invalid={invalid}\n          rows={rows}\n          {...inputProps}\n        />\n        {showCount && <MultiLineCounter>{count}</MultiLineCounter>}\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-top: calc(9px / 0.875);\n  padding-bottom: calc(9px / 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 }>`\n  display: grid;\n  position: relative;\n\n  ${({ rows }) => css`\n    max-height: calc(22px * ${rows} + 18px);\n  `};\n`\n\nconst StyledTextarea = styled.textarea<{ invalid: boolean }>`\n  border: none;\n  box-sizing: border-box;\n  outline: none;\n  resize: 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  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding: calc(9px / 0.875) calc(8px / 0.875);\n  border-radius: calc(4px / 0.875);\n\n  ${({ rows }) => css`\n    height: calc(22px / 0.875 * ${rows} + 18px / 0.875);\n  `};\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  /* 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"],"names":["DefaultValue","Link","React","forwardRef","ref","to","children","rest","href","ComponentAbstractionContext","createContext","ComponentAbstraction","Provider","value","components","useComponentAbstraction","useContext","theme","createTheme","styled","Clickable","props","onClick","disabled","A","as","undefined","Button","clickableCss","css","disabledSelector","button","span","variant","size","fixed","StyledButton","withConfig","shouldForwardProp","prop","attrs","font","background","Error","arguments","length","JSON","stringify","unreachable","variantToProps","height","padding","sizeToProps","p","o","hover","press","bg","typography","bold","preserveHalfLeading","horizontal","borderRadius","outline","focus","IconButton","icon","requiredIconSize","result","exec","iconSize","console","warn","validateIconSize","StyledIconButton","name","width","Radio","forceChecked","RadioGroupContext","selected","isParentDisabled","readonly","hasError","onChange","warning","isSelected","isDisabled","isReadonly","handleChange","useCallback","e","currentTarget","RadioRoot","RadioInput","checked","RadioLabel","label","px","spacing","input","type","text5","assertive","color","text4","brand","div","StyledRadioGroup","RadioGroup","className","next","role","SelectGroupContext","Select","parentDisabled","parentOnChange","includes","event","HTMLInputElement","SelectRoot","SelectInput","overlay","SelectInputOverlay","Boolean","SelectLabel","text1","text3","surface4","SelectGroup","ariaLabel","payload","index","indexOf","slice","Array","from","Set","SwitchCheckbox","ariaSwitchProps","useMemo","state","useToggleState","useRef","useSwitch","inputProps","Label","SwitchInput","LabelInner","FieldLabel","style","required","requiredText","subLabel","labelProps","FieldLabelWrapper","RequiredText","SubLabelClickable","margin","left","mergeRefs","current","countCodePointsInString","string","TextField","multiline","MultiLineTextField","SingleLineTextField","showLabel","showCount","invalid","assistiveText","maxLength","prefix","suffix","visuallyHiddenProps","useVisuallyHidden","ariaRef","prefixRef","suffixRef","useState","count","setCount","prefixWidth","setPrefixWidth","suffixWidth","setSuffixWidth","nonControlled","useEffect","useTextField","inputElementType","isRequired","validationState","description","errorMessage","descriptionProps","errorMessageProps","prefixObserver","ResizeObserver","entries","contentRect","suffixObserver","observe","disconnect","TextFieldRoot","TextFieldLabel","StyledInputContainer","PrefixContainer","Affix","StyledInput","extraLeftPadding","extraRightPadding","SuffixContainer","SingleLineCounter","AssistiveText","autoHeight","rows","initialRows","textareaRef","setRows","syncHeight","textarea","match","_$match","StyledTextareaContainer","StyledTextarea","MultiLineCounter","opacity","elementEffect","bottom","text2","surface3","top"],"mappings":"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"}

package/dist/styled.d.ts

@@ -11,6 +11,7 @@ export declare const theme: (spec: (o: Record<string, unknown> & Readonly<{
         readonly surface7: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
         readonly surface8: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
         readonly surface9: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface10: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
         readonly link1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
         readonly link2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
         readonly text1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
@@ -21,6 +22,10 @@ export declare const theme: (spec: (o: Record<string, unknown> & Readonly<{
         readonly icon6: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
         readonly brand: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
         readonly assertive: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly warning: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly success: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly updatedItem: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly border: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
     } & {
         readonly surface5: (direction: "to top" | "to bottom" | "to left" | "to right") => import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
         readonly callToAction: (direction: "to top" | "to bottom" | "to left" | "to right") => import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
@@ -37,6 +42,7 @@ export declare const theme: (spec: (o: Record<string, unknown> & Readonly<{
         readonly surface7: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
         readonly surface8: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
         readonly surface9: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface10: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
         readonly link1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
         readonly link2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
         readonly text1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
@@ -47,6 +53,10 @@ export declare const theme: (spec: (o: Record<string, unknown> & Readonly<{
         readonly icon6: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
         readonly brand: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
         readonly assertive: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly warning: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly success: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly updatedItem: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly border: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
     };
 }> & {
     readonly typography: (size: keyof import("@charcoal-ui/theme").Typography) => import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "bold" | "monospace" | "preserveHalfLeading">;

package/dist/styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../src/styled.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0OAAsB,CAAA"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../src/styled.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0OAAsB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "1.0.0",
+  "version": "2.0.0-alpha.2",
   "license": "Apache-2.0",
   "type": "module",
   "source": "./src/index.ts",
@@ -18,7 +18,7 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@charcoal-ui/icons": "^1.0.0",
+    "@charcoal-ui/icons": "^1.0.1-alpha.1",
     "@react-types/switch": "^3.1.2",
     "@storybook/addon-actions": "^6.4.17",
     "@storybook/addon-knobs": "^6.4.0",
@@ -49,9 +49,9 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@charcoal-ui/styled": "^1.0.0",
-    "@charcoal-ui/theme": "^1.0.0",
-    "@charcoal-ui/utils": "^1.0.0",
+    "@charcoal-ui/styled": "^1.0.1-alpha.2",
+    "@charcoal-ui/theme": "^2.0.0-alpha.1",
+    "@charcoal-ui/utils": "^1.0.1-alpha.0",
     "@react-aria/checkbox": "^3.2.3",
     "@react-aria/switch": "^3.1.3",
     "@react-aria/textfield": "^3.5.0",
@@ -71,5 +71,10 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "addc6d8f443865a8b56327ef9a4ff2e69942a30b"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pixiv/charcoal.git",
+    "directory": "packages/react"
+  },
+  "gitHead": "6740b50cd147f29b8da7c16e93c15b5799900d33"
 }

package/src/_lib/compat.ts

@@ -9,7 +9,4 @@ import React from 'react'
  * node_modules/@types/styled-components/ts3.7/index.d.ts
  * `Type alias 'Interpolation' circularly references itself. ts(2456)`
  */
-export interface Story<P> {
-  (args: P): React.ReactNode
-  args?: P
-}
+export type Story<P> = React.ComponentType<P> & { args?: P }

package/src/components/IconButton/index.tsx

@@ -111,6 +111,7 @@ function validateIconSize(size: Size, icon: keyof KnownIconType) {
   }
   const [iconSize] = result
   if (iconSize !== requiredIconSize) {
+    // eslint-disable-next-line no-console
     console.warn(
       `IconButton with size "${size}" expect icon size "${requiredIconSize}, but got "${iconSize}"`
     )

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

@@ -11,14 +11,22 @@ export default {
   title: 'Radio',
   component: Radio,
   argTypes: {
-    defaultValue: {
-      control: { type: 'select', options },
+    value: {
+      control: { type: 'select' },
+      options,
     },
   },
+  args: {
+    hasError: false,
+    parentDisabled: false,
+    childDisabled: false,
+    forceChecked: false,
+    readonly: false,
+  },
 }
 
 interface Props {
-  defaultValue: string
+  value?: string
   hasError: boolean
   parentDisabled: boolean
   childDisabled: boolean
@@ -26,14 +34,14 @@ interface Props {
   readonly: boolean
 }
 
-const DefaultStory = ({
-  defaultValue,
+const Template: Story<Partial<Props>> = ({
+  value,
   forceChecked,
   hasError,
   parentDisabled,
   childDisabled,
   readonly,
-}: Props) => (
+}) => (
   <div
     css={css`
       display: flex;
@@ -46,7 +54,7 @@ const DefaultStory = ({
         key={name}
         label={`選択肢-${name}`}
         name={name}
-        defaultValue={defaultValue}
+        value={value}
         onChange={action('onChange')}
         disabled={parentDisabled}
         readonly={readonly}
@@ -67,13 +75,4 @@ const DefaultStory = ({
   </div>
 )
 
-export const Normal: Story<Props> = DefaultStory.bind({})
-
-Normal.args = {
-  defaultValue: options[0],
-  hasError: false,
-  parentDisabled: false,
-  childDisabled: false,
-  forceChecked: false,
-  readonly: false,
-}
+export const Default = Template.bind({})

package/src/components/Radio/index.test.tsx

@@ -5,15 +5,14 @@ import Radio, { RadioGroup } from '.'
 import { light } from '@charcoal-ui/theme'
 
 describe('Radio', () => {
-  describe('__DEV__ mode', () => {
+  describe('development mode', () => {
     beforeEach(() => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-      global.__DEV__ = {}
+      global.process.env.NODE_ENV = 'development'
     })
 
     describe('<Radio> is not surrounded by <RadioGroup>', () => {
       beforeEach(() => {
+        // eslint-disable-next-line no-console
         console.error = jest.fn()
 
         render(
@@ -24,6 +23,7 @@ describe('Radio', () => {
       })
 
       it('console.error()', () => {
+        // eslint-disable-next-line no-console
         expect(console.error).toHaveBeenCalledWith(
           expect.stringMatching(/Perhaps you forgot to wrap with <RadioGroup>/u)
         )
@@ -31,12 +31,13 @@ describe('Radio', () => {
     })
   })
 
-  describe('defaultValue is the first option', () => {
+  describe('value is the first option', () => {
     let option1: HTMLInputElement
     let option2: HTMLInputElement
+    const handleChange = jest.fn()
 
     beforeEach(() => {
-      render(<TestComponent defaultValue="option1" />)
+      render(<TestComponent value="option1" onChange={handleChange} />)
 
       option1 = screen.getByDisplayValue('option1')
       option2 = screen.getByDisplayValue('option2')
@@ -48,18 +49,16 @@ describe('Radio', () => {
     })
 
     describe('clicking the second', () => {
-      it('the second <Radio> is checked', () => {
+      it('event handler is called', () => {
         fireEvent.click(option2)
-
-        expect(option1.checked).toBeFalsy()
-        expect(option2.checked).toBeTruthy()
+        expect(handleChange).toHaveBeenCalledWith('option2')
       })
     })
   })
 
   describe('<RadioGroup> is disabled', () => {
     it('all <Radio>s are disabled', () => {
-      render(<TestComponent defaultValue="option1" radioGroupDisabled />)
+      render(<TestComponent value="option1" radioGroupDisabled />)
       screen.getAllByRole<HTMLInputElement>('radio').forEach((element) => {
         expect(element.disabled).toBeTruthy()
       })
@@ -71,7 +70,7 @@ describe('Radio', () => {
     let option2: HTMLInputElement
 
     beforeEach(() => {
-      render(<TestComponent defaultValue="option1" option1Disabled />)
+      render(<TestComponent value="option1" option1Disabled />)
 
       option1 = screen.getByDisplayValue('option1')
       option2 = screen.getByDisplayValue('option2')
@@ -91,7 +90,7 @@ describe('Radio', () => {
     let option2: HTMLInputElement
 
     beforeEach(() => {
-      render(<TestComponent defaultValue="option1" readonly />)
+      render(<TestComponent value="option1" readonly />)
 
       option1 = screen.getByDisplayValue('option1')
       option2 = screen.getByDisplayValue('option2')
@@ -109,7 +108,7 @@ describe('Radio', () => {
 })
 
 function TestComponent({
-  defaultValue,
+  value,
   onChange = jest.fn(),
   radioGroupDisabled = false,
   readonly = false,
@@ -117,7 +116,7 @@ function TestComponent({
   option1Disabled = false,
   option2Disabled = false,
 }: {
-  defaultValue: string
+  value?: string
   onChange?: () => void
   radioGroupDisabled?: boolean
   readonly?: boolean
@@ -130,7 +129,7 @@ function TestComponent({
       <RadioGroup
         label="テスト項目"
         name="test"
-        defaultValue={defaultValue}
+        value={value}
         onChange={onChange}
         disabled={radioGroupDisabled}
         readonly={readonly}

package/src/components/Radio/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useState } from 'react'
+import React, { useCallback, useContext } from 'react'
 import styled from 'styled-components'
 import warning from 'warning'
 import { theme } from '../../styled'
@@ -118,7 +118,7 @@ const RadioLabel = styled.div`
 
 export type RadioGroupProps = React.PropsWithChildren<{
   className?: string
-  defaultValue?: string
+  value?: string
   label: string
   name: string
   onChange(next: string): void
@@ -158,7 +158,7 @@ const RadioGroupContext = React.createContext<RadioGroupContext>({
 
 export function RadioGroup({
   className,
-  defaultValue,
+  value,
   label,
   name,
   onChange,
@@ -167,11 +167,8 @@ export function RadioGroup({
   hasError,
   children,
 }: RadioGroupProps) {
-  const [selected, setSelected] = useState(defaultValue)
-
   const handleChange = useCallback(
     (next: string) => {
-      setSelected(next)
       onChange(next)
     },
     [onChange]
@@ -181,7 +178,7 @@ export function RadioGroup({
     <RadioGroupContext.Provider
       value={{
         name,
-        selected,
+        selected: value,
         disabled: disabled ?? false,
         readonly: readonly ?? false,
         hasError: hasError ?? false,

package/src/components/Select/context.ts

@@ -0,0 +1,23 @@
+import { createContext } from 'react'
+
+type SelectGroupContext = {
+  name: string
+  selected: string[]
+  disabled: boolean
+  readonly: boolean
+  hasError: boolean
+  onChange: ({ value, selected }: { value: string; selected: boolean }) => void
+}
+
+export const SelectGroupContext = createContext<SelectGroupContext>({
+  name: undefined as never,
+  selected: [],
+  disabled: false,
+  readonly: false,
+  hasError: false,
+  onChange() {
+    throw new Error(
+      'Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<SelectGroup />` ?'
+    )
+  },
+})