{"version":3,"sources":["../../src/Switch/Switch.tsx","../../src/utilities/Clay/Clay.tsx","../../src/utilities/Flex/Flex.tsx","../../src/Label/Label.tsx","../../src/Typography/Typography.tsx","../../src/Switch/Switch.base.tsx","../../src/Switch/Switch.css.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","jsxs","_Label","type","text","bold","Typography","Label","classNames","_Typography","semanticToken","variant","colorToken","whiteSpace","numOfLine","textAlign","useId","css","switchButtonCSS","Fragment","SwitchBase","isChecked","onChange","isDisabled","id","event","checked","Switch","label","labelProps"],"mappings":"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","sourcesContent":["/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport { Label } from \"..\";\nimport { Flex } from \"../utilities\";\nimport { SwitchBase } from \"./Switch.base\";\nimport type { SwitchBaseProps, SwitchProps } from \"./Switch.types\";\n\nexport const Switch = ({\n  className,\n  onChange,\n  sx,\n  isChecked,\n  label,\n  labelProps,\n  isDisabled,\n  as,\n  native,\n}: SwitchProps) => {\n  return (\n    <Flex\n      className={className}\n      justifyContent=\"space-between\"\n      gap={vars.spacing[3]}\n      padding={`${vars.spacing[1]} 0`}\n      sx={sx}\n      as={as}\n      native={native}\n    >\n      <Label text={label} sx={{ flex: 1 }} {...labelProps} />\n\n      <SwitchBase isChecked={isChecked} onChange={onChange} isDisabled={isDisabled} />\n    </Flex>\n  );\n};\n\nSwitch.Base = (props: SwitchBaseProps) => <SwitchBase {...props} />;\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 { 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","/** @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","/* eslint-disable jsx-a11y/label-has-associated-control */\n/** @jsxImportSource @emotion/react */\n\nimport type { ChangeEventHandler } from \"react\";\nimport { useId } from \"react\";\nimport { switchButtonCSS } from \"./Switch.css\";\nimport type { SwitchBaseProps } from \"./Switch.types\";\n\nexport const SwitchBase = ({ isChecked, onChange, isDisabled }: SwitchBaseProps) => {\n  const id = useId();\n\n  const _onChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    const { checked } = event.target;\n\n    onChange?.(checked);\n  };\n\n  return (\n    <>\n      <input\n        data-clay-blind\n        type=\"checkbox\"\n        id={id}\n        checked={isChecked}\n        onChange={_onChange}\n        disabled={isDisabled}\n      />\n      <label htmlFor={id} css={switchButtonCSS} />\n    </>\n  );\n};\n","import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\n\nexport const switchButtonCSS = css({\n  position: \"relative\",\n  display: \"inline-block\",\n  width: \"40px\",\n  height: \"24px\",\n  padding: \"2px\",\n  overflow: \"hidden\",\n\n  backgroundColor: vars.semantic.color.actionPrimaryTonal,\n  borderRadius: \"50px\",\n  transition: \"all 0.1s ease-out\",\n\n  cursor: \"pointer\",\n\n  \"input:checked:disabled + &\": {\n    backgroundColor: vars.semantic.color.actionPrimary,\n    opacity: 0.3,\n    cursor: \"not-allowed\",\n  },\n\n  \"input:not(:disabled) + &:hover\": {\n    backgroundColor: vars.semantic.color.actionPrimaryTonalHover,\n  },\n\n  \"input:not(:disabled):checked + &\": {\n    backgroundColor: vars.semantic.color.actionPrimary,\n\n    \"&:hover\": {\n      backgroundColor: vars.semantic.color.actionPrimaryHover,\n    },\n  },\n\n  \"input:checked + &\": {\n    \"&:before\": {\n      left: \"calc(100% - 22px)\",\n    },\n  },\n\n  \"input:disabled + &\": {\n    backgroundColor: vars.semantic.color.actionPrimaryTonalDisabled,\n    cursor: \"not-allowed\",\n  },\n\n  \"&::before\": {\n    position: \"absolute\",\n    content: \"''\",\n    left: \"2px\",\n\n    width: \"20px\",\n    height: \"20px\",\n    backgroundColor: vars.semantic.color.surface,\n    boxShadow: \"0px 3px 8px 0px rgba(0, 0, 0, 0.15)\",\n    borderRadius: \"100%\",\n\n    transition: \"all 0.1s ease-out\",\n  },\n});\n"]}