{"version":3,"sources":["../../src/Checkbox/Checkbox.set.tsx","../../src/utilities/Clay/Clay.tsx","../../src/utilities/Flex/Flex.tsx","../../src/Typography/Typography.tsx","../../src/Label/Label.tsx","../../src/Checkbox/Checkbox.css.ts","../../src/Checkbox/Checkbox.tsx","../../src/Checkbox/Checkbox.helperText.tsx","../../src/Checkbox/Checkbox.label.tsx","../../src/Checkbox/CheckboxGroup/CheckboxGroup.tsx","../../src/Checkbox/CheckboxGroup/CheckboxGroup.hooks.ts"],"names":["vars","forwardRef","jsx","Clay","_a","ref","_b","children","className","_hover","_active","_after","_before","_focus","size","width","height","shape","sx","as","native","props","__objRest","__spreadProps","__spreadValues","ClayNameSpace","_Flex","Flex","_FlexCenter","FlexCenter","_FlexColumn","FlexColumn","FlexNameSpace","classNames","_Typography","semanticToken","variant","colorToken","whiteSpace","numOfLine","textAlign","Typography","jsxs","_Label","type","text","bold","Label","css","checkboxLabelCSS","iconPosition","checkboxIconCSS","CheckboxIcon","isIndeterminate","Checkbox","onChange","onChangeChecked","restProps","_onChange","e","CheckboxHelperText","CheckboxLabel","label","checkboxProps","deprecatedLabel","CheckboxGroup","legend","direction","deprecatedLegend","useState","useCheckboxGroup","items","value","setValue","item","_value","checked","oldCheckedValues","oldValue","useIndeterminateCheckboxGroup","getCheckboxProps","isAllChecked","CheckboxSet","CheckboxNamespace"],"mappings":"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","sourcesContent":["/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport { Flex } from \"..\";\nimport { Label } from \"../Label\";\nimport { Checkbox } from \"./Checkbox\";\nimport { CheckboxHelperText } from \"./Checkbox.helperText\";\nimport { CheckboxLabel } from \"./Checkbox.label\";\nimport type { CheckboxSetProps } from \"./Checkbox.types\";\nimport { CheckboxGroup } from \"./CheckboxGroup\";\n\nconst CheckboxSet = ({ children, sx }: CheckboxSetProps) => {\n  return (\n    <Flex.Column\n      gap={vars.spacing[1]}\n      sx={{\n        '&:has([data-checkbox-icon_position=\"left\"]) [data-checkbox-helper_text]': {\n          paddingInlineStart: vars.spacing[6],\n        },\n        \"&:has(input:disabled) [data-checkbox-helper_text]\": {\n          color: vars.semantic.color.textDisabled,\n        },\n        \"& [data-checkbox-helper_text]\": {\n          color: vars.semantic.color.textSecondary,\n        },\n        ...sx,\n      }}\n    >\n      {children}\n    </Flex.Column>\n  );\n};\n\nconst CheckboxNamespace = Object.assign(Checkbox, {\n  Set: CheckboxSet,\n  Group: CheckboxGroup,\n  Label: CheckboxLabel,\n  HelperText: CheckboxHelperText,\n  Legend: Label,\n});\n\nexport { CheckboxNamespace as Checkbox };\n","/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport type { ComponentPropsWithRef, ElementType, ReactElement } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { ClayProps } from \"./Clay.types\";\n\nexport type ClayComponent = <C extends ElementType = \"div\">(\n  props: ClayProps<C> & {\n    ref?: ComponentPropsWithRef<C>[\"ref\"];\n  },\n) => ReactElement | null;\n\nconst Clay: ClayComponent = forwardRef(\n  <E extends ElementType>(\n    {\n      children,\n      className,\n      _hover,\n      _active,\n      _after,\n      _before,\n      _focus,\n      size,\n      width,\n      height,\n      shape,\n      sx,\n      as,\n      native,\n      ...props\n    }: ClayProps<E>,\n    ref: ComponentPropsWithRef<E>[\"ref\"],\n  ) => {\n    const Element = as || \"div\";\n\n    return (\n      <Element\n        ref={ref}\n        className={className}\n        css={{\n          width: size || width,\n          height: size || height,\n          ...(shape === \"circle\" && {\n            borderRadius: vars.rounded.full,\n          }),\n          \"&:hover\": _hover,\n          \"&:active\": _active,\n          \"&:after\": _after,\n          \"&:before\": _before,\n          \"&:focus\": _focus,\n          ...props,\n          ...sx,\n        }}\n        {...native}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst ClayNameSpace = Object.assign(Clay, { displayName: \"Clay\" });\n\nexport { ClayNameSpace as Clay };\n","import type { ComponentPropsWithRef, ElementType } from \"react\";\nimport { forwardRef } from \"react\";\nimport { Clay } from \"../Clay\";\nimport type { ClayComponent, ClayProps } from \"../Clay/Clay.types\";\n\nconst _Flex: ClayComponent = forwardRef(\n  <Element extends ElementType>(\n    props: ClayProps<Element>,\n    ref: ComponentPropsWithRef<Element>[\"ref\"],\n  ) => <Clay ref={ref} display=\"flex\" {...props} />,\n);\n\nconst Flex = Object.assign(_Flex, { displayName: \"Flex\" });\n\nconst _FlexCenter: ClayComponent = forwardRef(\n  <Element extends ElementType>(\n    props: ClayProps<Element>,\n    ref: ComponentPropsWithRef<Element>[\"ref\"],\n  ) => <Flex ref={ref} alignItems=\"center\" justifyContent=\"center\" {...props} />,\n);\n\nconst FlexCenter = Object.assign(_FlexCenter, { displayName: \"Flex.Center\" });\n\nconst _FlexColumn: ClayComponent = forwardRef(\n  <Element extends ElementType>(\n    { as = \"div\" as any, ...props }: ClayProps<Element>,\n    ref: ComponentPropsWithRef<Element>[\"ref\"],\n  ) => <Flex ref={ref} as={as} flexDirection=\"column\" {...props} />,\n);\n\nconst FlexColumn = Object.assign(_FlexColumn, { displayName: \"Flex.Column\" });\n\n/**\n * @deprecated Use `Flex.Column` instead\n */\nexport const Stack = FlexColumn;\n\nconst FlexNameSpace = Object.assign(Flex, { Center: FlexCenter, Column: FlexColumn });\n\nexport { FlexNameSpace as Flex };\n","/** @jsxImportSource @emotion/react */\n\nimport { classNames, vars } from \"@imwebme/clay-token\";\nimport type { ElementType, Ref } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { TypographyProps } from \"./Typography.types\";\n\n/**\n * token은 두 가지 방법으로 넣어줄 수 있습니다. semanticToken, variant\n * 값은 body-medium이 default 입니다.\n */\nconst _Typography = <Element extends ElementType>(\n  {\n    as,\n    semanticToken,\n    variant = \"body-medium\",\n    className = \"\",\n    colorToken = \"text\",\n    children,\n    whiteSpace,\n    numOfLine,\n    sx,\n    textAlign,\n    native,\n  }: TypographyProps<Element>,\n  ref: Ref<HTMLElement>,\n) => {\n  const Element = as || \"p\";\n\n  return (\n    <Element\n      className={`${classNames.typography[semanticToken || variant]} ${className}`}\n      ref={ref as any}\n      css={{\n        color: vars.semantic.color[colorToken],\n        ...(numOfLine && {\n          display: \"-webkit-box\",\n          overflow: \"hidden\",\n          textOverflow: \"ellipsis\",\n          WebkitBoxOrient: \"vertical\",\n          WebkitLineClamp: numOfLine,\n        }),\n        whiteSpace,\n        textAlign,\n        ...sx,\n      }}\n      {...native}\n    >\n      {children}\n    </Element>\n  );\n};\n\nexport const Typography = forwardRef(_Typography);\n\nTypography.displayName = \"Typography\";\n","/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport type { ElementType, Ref } from \"react\";\nimport { forwardRef } from \"react\";\nimport { Typography } from \"..\";\nimport type { LabelProps } from \"./Label.types\";\n\nconst _Label = <Element extends ElementType>(\n  { type = \"primary\", className, text, bold = true, sx, as, children }: LabelProps<Element>,\n  ref: Ref<HTMLElement>,\n) => {\n  const Element = as || \"label\";\n\n  return (\n    <Element\n      ref={ref as any}\n      className={className}\n      css={{\n        display: \"flex\",\n        gap: vars.spacing[1],\n        alignItems: \"center\",\n        sx,\n      }}\n    >\n      <Typography\n        variant={bold ? \"label-medium-bold\" : \"label-medium\"}\n        colorToken={type === \"primary\" ? \"text\" : \"textSub\"}\n      >\n        {text}\n      </Typography>\n\n      {children}\n    </Element>\n  );\n};\n\nexport const Label = forwardRef(_Label);\n\nLabel.displayName = \"Label\";\n","import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { CheckboxLabelProps } from \"./Checkbox.types\";\n\nexport const checkboxLabelCSS = ({ iconPosition }: Pick<CheckboxLabelProps, \"iconPosition\">) =>\n  css({\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    flexDirection: iconPosition === \"right\" ? \"row-reverse\" : \"row\",\n    justifyContent: iconPosition === \"right\" ? \"space-between\" : \"flex-start\",\n\n    gap: vars.spacing[2],\n\n    padding: `${vars.spacing[\"05\"]} 0`,\n    width: iconPosition === \"right\" ? \"100%\" : \"fit-content\",\n    cursor: \"pointer\",\n\n    \"&:has(input:disabled) [data-checkbox-label]\": {\n      color: vars.semantic.color.textDisabled,\n    },\n\n    \"input:disabled + .clay-checkbox-wrapper\": {\n      opacity: 0.3,\n    },\n\n    \":has(input:disabled)\": {\n      cursor: \"not-allowed\",\n    },\n\n    \"&:hover\": {\n      \"input:checked:not(:disabled) + .clay-checkbox-wrapper\": {\n        outlineColor: \"transparent\",\n        backgroundColor: vars.semantic.color.actionPrimaryHover,\n      },\n\n      \"input:not(:checked, :disabled) + .clay-checkbox-wrapper\": {\n        outlineColor: vars.semantic.color.borderHover,\n      },\n    },\n  });\n\nexport const checkboxIconCSS = css({\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n\n  width: \"16px\",\n  height: \"16px\",\n\n  backgroundColor: vars.semantic.color.actionSecondary,\n  borderRadius: \"3.5px\",\n  color: vars.semantic.color.iconInverse,\n\n  outline: `1px solid ${vars.semantic.color.borderMinimal}`,\n  outlineOffset: \"-1px\",\n\n  transition: \"all ease-out 100ms\",\n\n  cursor: \"pointer\",\n\n  \".clay-checkbox-icon\": {\n    display: \"none\",\n  },\n\n  \"&:where(input:checked + &)\": {\n    backgroundColor: vars.semantic.color.actionPrimary,\n    outlineColor: \"transparent\",\n\n    \".clay-checkbox-icon\": {\n      display: \"block\",\n    },\n  },\n\n  \"&:where(input:disabled + &)\": {\n    opacity: 0.3,\n    cursor: \"not-allowed\",\n    color: vars.semantic.color.iconDisabled,\n  },\n\n  \"&:where(input:disabled:not(:checked) + &)\": {\n    backgroundColor: vars.semantic.color.actionSecondaryDisabled,\n  },\n\n  \"&:where(input:checked:not(:disabled) + &):hover\": {\n    outlineColor: \"transparent\",\n    backgroundColor: vars.semantic.color.actionPrimaryHover,\n  },\n\n  \"&:where(input:not(:checked, :disabled) + &):hover\": {\n    outlineColor: vars.semantic.color.borderMinimal,\n    backgroundColor: vars.semantic.color.actionSecondaryHover,\n  },\n});\n","/** @jsxImportSource @emotion/react */\n\nimport type { ChangeEventHandler } from \"react\";\nimport { Flex } from \"../utilities\";\nimport { checkboxIconCSS } from \"./Checkbox.css\";\nimport type { CheckboxIconProps, CheckboxProps } from \"./Checkbox.types\";\n\nexport const CheckboxIcon = ({ isIndeterminate }: CheckboxIconProps) => {\n  const path = isIndeterminate ? \"M2.5 6H9.5\" : \"M9.5 3L4.6875 8.5L2.5 6\";\n\n  return (\n    <span className=\"clay-checkbox-wrapper\" css={checkboxIconCSS}>\n      <svg\n        className=\"clay-checkbox-icon\"\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=\"0 0 12 12\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d={path}\n          stroke='currentColor'\n          strokeWidth=\"1.2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </span>\n  );\n};\n\nexport const Checkbox = ({\n  isIndeterminate,\n  onChange,\n  onChangeChecked,\n  ...restProps\n}: CheckboxProps) => {\n  const _onChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n    onChange?.(e);\n    onChangeChecked?.(e.target.checked);\n  };\n\n  return (\n    <Flex display=\"inline-flex\" as=\"label\" native={{ htmlFor: restProps.id }}>\n      <input type=\"checkbox\" data-clay-blind onChange={_onChange} {...restProps} />\n      <CheckboxIcon isIndeterminate={isIndeterminate} />\n    </Flex>\n  );\n};\n","import { Typography } from \"../Typography\";\nimport type { TypographyProps } from \"../Typography/Typography.types\";\n\nexport const CheckboxHelperText = ({\n  children,\n  ...props\n}: Omit<TypographyProps<\"p\">, \"variant\">) => (\n  <Typography\n    native={{\n      \"data-checkbox-helper_text\": true,\n    }}\n    variant=\"body-small\"\n    {...props}\n  >\n    {children}\n  </Typography>\n);\n","/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport { Typography } from \"../Typography\";\nimport { Flex } from \"../utilities\";\nimport { Checkbox } from \"./Checkbox\";\nimport { checkboxLabelCSS } from \"./Checkbox.css\";\nimport type { CheckboxLabelProps } from \"./Checkbox.types\";\n\nexport const CheckboxLabel = ({\n  children,\n  iconPosition = \"left\",\n  label,\n  text,\n  sx,\n  ...checkboxProps\n}: CheckboxLabelProps) => {\n  const deprecatedLabel = label || text;\n\n  return (\n    <Flex\n      as=\"label\"\n      alignItems=\"center\"\n      gap={vars.spacing[1]}\n      native={{\n        \"data-checkbox-icon_position\": iconPosition,\n      }}\n      css={[checkboxLabelCSS({ iconPosition }), sx]}\n    >\n      {children || <Checkbox {...checkboxProps} />}\n\n      {deprecatedLabel && (\n        <Typography\n          variant=\"label-medium\"\n          native={{\n            \"data-checkbox-label\": true,\n          }}\n        >\n          {deprecatedLabel}\n        </Typography>\n      )}\n    </Flex>\n  );\n};\n","import { vars } from \"@imwebme/clay-token\";\nimport { Label } from \"../..\";\nimport { Flex } from \"../../utilities/Flex\";\nimport type { CheckboxGroupProps } from \"./CheckboxGroup.types\";\n\nexport const CheckboxGroup = ({\n  label,\n  legend,\n  direction = \"column\",\n  sx,\n  children,\n}: CheckboxGroupProps) => {\n  const deprecatedLegend = legend || label;\n\n  return (\n    <Flex.Column as=\"fieldset\" gap={vars.spacing[1]} sx={sx}>\n      {deprecatedLegend && typeof deprecatedLegend === \"string\" ? (\n        <Label as=\"legend\" text={deprecatedLegend} />\n      ) : (\n        deprecatedLegend\n      )}\n\n      <Flex.Column flexDirection={direction} gap={vars.spacing[direction === \"column\" ? 1 : 6]}>\n        {children}\n      </Flex.Column>\n    </Flex.Column>\n  );\n};\n","import { useState } from \"react\";\nimport type { CheckboxProps } from \"..\";\nimport type { PickRequired } from \"../../types\";\nimport type { CheckboxLabelProps } from \"../Checkbox.types\";\n\n/**\n * @see https://clayground.vercel.app/components/checkbox/checkbox-group#usecheckboxgroup\n */\nexport const useCheckboxGroup = (items: PickRequired<CheckboxProps, \"value\">[] = []) => {\n  const [value, setValue] = useState(\n    items.map((item) => (item.checked ? item.value : undefined)).filter(Boolean),\n  );\n\n  const getCheckboxProps = ({\n    value: _value,\n    ...props\n  }: PickRequired<Omit<CheckboxLabelProps, \"onChangeChecked\" | \"checked\">, \"value\">): CheckboxLabelProps => {\n    const onChangeChecked = (checked: boolean) => {\n      if (checked) {\n        setValue((oldCheckedValues) => [...oldCheckedValues, _value]);\n\n        return;\n      }\n\n      setValue((oldCheckedValues) => oldCheckedValues.filter((oldValue) => oldValue !== _value));\n    };\n\n    const checked = value.includes(_value);\n\n    return {\n      ...props,\n      onChangeChecked,\n      checked,\n    };\n  };\n\n  return {\n    value,\n    setValue,\n    getCheckboxProps,\n  };\n};\n\n/**\n * @see https://clayground.vercel.app/components/checkbox/checkbox-group#useindeterminatecheckboxgroup\n */\nexport const useIndeterminateCheckboxGroup = (items: PickRequired<CheckboxLabelProps, \"value\">[]) => {\n  const { value, getCheckboxProps, setValue } = useCheckboxGroup(items);\n\n  const isAllChecked = items\n    .filter((item) => !item.disabled)\n    .every(({ value: _value }) => (value ? value.includes(_value) : false));\n\n  const toggleAllCheck = () => {\n    if (value.length > 0) {\n      setValue([]);\n      return;\n    }\n\n    setValue(items.filter((item) => !item.disabled).map((item) => item.value));\n  };\n\n  const getIndeterminateCheckboxProps = (props: CheckboxLabelProps) => {\n    return {\n      isIndeterminate: !isAllChecked,\n      checked: value.length > 0,\n      ...props,\n    };\n  };\n\n  return {\n    value,\n    getCheckboxProps,\n    toggleAllCheck,\n    isAllChecked,\n    getIndeterminateCheckboxProps,\n  };\n};\n"]}