{"version":3,"sources":["../../src/Heading/Heading.tsx","../../src/Badge/Badge.tsx","../../src/utilities/Clay/Clay.tsx","../../src/utilities/Flex/Flex.tsx","../../src/Typography/Typography.tsx","../../src/Badge/Badge.css.ts","../../src/Heading/Heading.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","classNames","_Typography","semanticToken","variant","colorToken","whiteSpace","numOfLine","textAlign","Typography","css","primaryCSS","secondaryCSS","criticalCSS","sizeDefaultCSS","sizeLargeCSS","sizeSmallCSS","sizeVariant","typeVariant","dotPrimaryCSS","dotSecondaryCSS","dotCriticalCSS","dotTypeVariant","dotSmallSizeCSS","dotMediumSizeCSS","dotLargeSizeCSS","dotLargeBoldSizeCSS","dotSizeVariant","Badge","text","type","on","state","restProps","BadgeDot","headingRecipe","jsxs","Heading","subtle","align","root","textVariant","HeadingBadge","HeadingNameSpace"],"mappings":"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","sourcesContent":["import { vars } from \"@imwebme/clay-token\";\nimport type { ComponentPropsWithRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { BadgeProps } from \"../Badge\";\nimport { Badge } from \"../Badge\";\nimport { Typography } from \"../Typography\";\nimport { Flex } from \"../utilities\";\nimport { headingRecipe } from \"./Heading.css\";\nimport type { HeadingProps } from \"./Heading.types\";\n\n/**\n * Badge를 사용할 경우 children으로 주입해주어야 합니다.\n *\n * @example\n * <Heading>\n *    <Heading.Badge text=\"56\" type=\"variant\" />\n * </Heading>\n */\nconst Heading = forwardRef(\n  (\n    { size, text, subtle, align, children, className, sx, as = \"div\", native }: HeadingProps,\n    ref: ComponentPropsWithRef<\"div\">[\"ref\"],\n  ) => {\n    const { root, textVariant } = headingRecipe({ size });\n\n    return (\n      <Flex.Column\n        as={as}\n        ref={ref}\n        native={native}\n        className={className}\n        sx={sx}\n        {...root}\n        {...(align === \"center\" && { textAlign: \"center\" })}\n      >\n        <Flex alignItems=\"center\" textAlign=\"inherit\" gap={vars.spacing[1]}>\n          <Typography\n            sx={{ flex: align === \"center\" ? 1 : 0 }}\n            variant={textVariant}\n            whiteSpace=\"pre\"\n          >\n            {text}\n          </Typography>\n\n          {children}\n        </Flex>\n\n        {subtle && (\n          <Typography colorToken=\"textSub\" variant=\"body-medium\" whiteSpace=\"pre\">\n            {subtle}\n          </Typography>\n        )}\n      </Flex.Column>\n    );\n  },\n);\n\nconst HeadingBadge = (props: Omit<BadgeProps, \"size\">) => <Badge size=\"default\" {...props} />;\n\nconst HeadingNameSpace = Object.assign(Heading, { Badge: HeadingBadge });\n\nexport { HeadingNameSpace as Heading };\n","/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport { Clay } from \"..\";\nimport { dotSizeVariant, dotTypeVariant, sizeVariant, typeVariant } from \"./Badge.css\";\nimport type { BadgeDotProp, BadgeProps } from \"./Badge.types\";\n\n/**\n * @deprecated `Badge` 컴포넌트는 더 이상 사용되지 않습니다. `Badge` 컴포넌트 대신 `NumberBadge` / `DotBadge` 컴포넌트를 사용해주세요.\n */\nexport const Badge = ({\n  text,\n  type,\n  on = false,\n  size = \"default\",\n  state = \"default\",\n  ...restProps\n}: BadgeProps) => {\n  return (\n    <Clay\n      display=\"inline-block\"\n      borderRadius={vars.rounded.full}\n      native={{\n        \"data-clay-badge-on\": on,\n        \"data-clay-badge-state\": state,\n      }}\n      height=\"fit-content\"\n      width=\"fit-content\"\n      transition=\"all 0.3s ease-out\"\n      css={[sizeVariant[size], typeVariant[type]]}\n      {...restProps}\n    >\n      {text}\n    </Clay>\n  );\n};\n\nconst BadgeDot = ({ size, type, sx }: BadgeDotProp) => (\n  <Clay\n    css={[\n      {\n        outlineColor: \"white\",\n        borderRadius: \"50%\",\n        outlineStyle: \"solid\",\n      },\n      dotTypeVariant[type],\n      dotSizeVariant[size],\n      sx,\n    ]}\n  />\n);\n\nBadge.Dot = BadgeDot;\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","import type { SerializedStyles } from \"@emotion/react\";\nimport { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { BadgeProps } from \".\";\n\nconst primaryCSS = css({\n  background: vars.semantic.color.layerSelected,\n  color: vars.semantic.color.textPrimary,\n\n  \"&[data-clay-badge-state='hover']\": {\n    background: vars.semantic.color.layerSelectedHover,\n  },\n\n  \"&[data-clay-badge-on='true']\": {\n    color: vars.semantic.color.textOn,\n    background: vars.color.imBlue[600],\n  },\n\n  \"&[data-clay-badge-state='disabled']\": {\n    color: vars.semantic.color.textDisabled,\n    background: vars.semantic.color.surfaceSub,\n  },\n});\n\nconst secondaryCSS = css({\n  background: vars.semantic.color.surfaceSub,\n  color: vars.semantic.color.textSub,\n\n  \"&[data-clay-badge-state='hover']\": {\n    background: vars.semantic.color.actionPrimaryDisabled,\n  },\n\n  \"&[data-clay-badge-on='true']\": {\n    color: vars.semantic.color.textOn,\n    background: vars.color.imBlue[600],\n  },\n\n  \"&[data-clay-badge-state='disabled']\": {\n    color: vars.semantic.color.textDisabled,\n    background: vars.semantic.color.surfaceSub,\n  },\n});\n\nconst criticalCSS = css({\n  background: vars.semantic.color.surfaceCritical,\n  color: vars.semantic.color.textCritical,\n\n  \"&[data-clay-badge-state='hover']\": {\n    // 똑같음\n  },\n\n  \"&[data-clay-badge-on='true']\": {\n    color: vars.semantic.color.textOn,\n    background: \"#D34\",\n  },\n\n  \"&[data-clay-badge-state='disabled']\": {\n    color: vars.semantic.color.textDisabled,\n    background: vars.semantic.color.surfaceSub,\n  },\n});\n\nconst sizeDefaultCSS = css({\n  padding: `${vars.spacing[\"05\"]} ${vars.spacing[\"15\"]}`,\n  minWidth: \"20px\",\n  ...vars.semantic.typography[\"label-small\"],\n});\n\nconst sizeLargeCSS = css({\n  padding: `0 ${vars.spacing[\"15\"]}`,\n  minWidth: \"24px\",\n  ...vars.semantic.typography[\"label-medium\"],\n});\n\nconst sizeSmallCSS = css({\n  padding: `${vars.spacing[\"1\"]} ${vars.spacing[\"15\"]}`,\n  minWidth: \"20px\",\n  ...vars.semantic.typography[\"label-xsmall\"],\n});\n\nexport const sizeVariant = {\n  default: sizeDefaultCSS,\n  large: sizeLargeCSS,\n  small: sizeSmallCSS,\n};\n\nexport const typeVariant: Record<BadgeProps[\"type\"], SerializedStyles> = {\n  primary: primaryCSS,\n  critical: criticalCSS,\n  secondary: secondaryCSS,\n};\n\nconst dotPrimaryCSS = css({\n  background: vars.semantic.color.iconAccent,\n});\n\nconst dotSecondaryCSS = css({\n  background: vars.semantic.color.icon,\n});\n\nconst dotCriticalCSS = css({\n  background: vars.semantic.color.iconCritical,\n});\n\nexport const dotTypeVariant = {\n  primary: dotPrimaryCSS,\n  critical: dotCriticalCSS,\n  secondary: dotSecondaryCSS,\n};\n\nconst dotSmallSizeCSS = css({\n  width: \"6px\",\n  height: \"6px\",\n  outlineWidth: \"2px\",\n});\n\nconst dotMediumSizeCSS = css({\n  width: \"8px\",\n  height: \"8px\",\n  outlineWidth: \"2px\",\n});\n\nconst dotLargeSizeCSS = css({\n  width: \"10px\",\n  height: \"10px\",\n  outlineWidth: \"2px\",\n});\n\nconst dotLargeBoldSizeCSS = css({\n  width: \"10px\",\n  height: \"10px\",\n  outlineWidth: \"3px\",\n});\n\nexport const dotSizeVariant = {\n  small: dotSmallSizeCSS,\n  medium: dotMediumSizeCSS,\n  large: dotLargeSizeCSS,\n  largeBold: dotLargeBoldSizeCSS,\n};\n","import { vars } from \"@imwebme/clay-token\";\nimport type { CSSProperties } from \"react\";\nimport type { TypographyProps } from \"../Typography/Typography.types\";\nimport type { HeadingProps } from \"./Heading.types\";\n\nexport const headingRecipe = ({\n  size,\n}: Pick<HeadingProps, \"size\">): {\n  textVariant: TypographyProps<\"p\">[\"variant\"];\n  root: CSSProperties;\n} => {\n  switch (size) {\n    case \"small\":\n      return {\n        root: {\n          gap: vars.spacing[3],\n        },\n        textVariant: \"heading-medium-bold\",\n      };\n\n    case \"medium\":\n      return {\n        root: {\n          gap: vars.spacing[1],\n        },\n        textVariant: \"heading-large-bold\",\n      };\n\n    case \"large\":\n      return {\n        root: {\n          gap: vars.spacing[2],\n        },\n        textVariant: \"heading-xlarge-bold\",\n      };\n\n    default:\n      return {\n        root: {\n          gap: vars.spacing[3],\n        },\n        textVariant: \"heading-2xlarge-bold\",\n      };\n  }\n};\n"]}