{"version":3,"sources":["../../src/Badge/Badge.tsx","../../src/utilities/Clay/Clay.tsx","../../src/Badge/Badge.css.ts","../../src/Badge/DotBadge/DotBadge.tsx","../../src/Badge/DotBadge/DotBadge.css.ts","../../src/Badge/NumberBadge/NumberBadge.tsx","../../src/Badge/NumberBadge/NumberBadge.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","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","variantMap","dotBadgeCSS","DotBadge","variant","numberBadgeCSS","NumberBadge","number"],"mappings":"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","sourcesContent":["/** @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 { 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","/** @jsxImportSource @emotion/react */\n\nimport type { ComponentPropsWithRef, ElementType } from \"react\";\nimport { forwardRef } from \"react\";\nimport { dotBadgeCSS, variantMap } from \"./DotBadge.css\";\nimport type { DotBadgeComponent, DotBadgeProps } from \"./DotBadge.types\";\n\nexport const DotBadge: DotBadgeComponent = forwardRef(function ClayDotBadge<E extends ElementType>(\n  { variant, as, className, native, size = \"small\", sx, type = \"default\" }: DotBadgeProps<E>,\n  ref: ComponentPropsWithRef<E>[\"ref\"],\n) {\n  const Element = as || \"span\";\n\n  return (\n    <Element\n      ref={ref}\n      className={className}\n      {...native}\n      style={{\n        ...variantMap.variant[variant],\n        ...variantMap.size[size],\n        ...variantMap.type[type],\n        ...native?.style,\n      }}\n      css={[dotBadgeCSS, sx]}\n    />\n  );\n});\n","import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\n\nexport const variantMap = {\n  variant: {\n    accent: {\n      \"--background-color\": vars.semantic.color.focusAccent,\n    },\n    critical: {\n      \"--background-color\": vars.semantic.color.iconCritical,\n    },\n  },\n  type: {\n    border: {\n      \"--outline\": `var(--border-width) solid ${vars.semantic.color.surface}`,\n    },\n    default: {\n      \"--outline\": \"none\",\n    },\n  },\n  size: {\n    small: {\n      \"--border-width\": \"2px\",\n      \"--width\": \"6px\",\n      \"--height\": \"6px\",\n    },\n    medium: {\n      \"--border-width\": \"2px\",\n      \"--width\": \"8px\",\n      \"--height\": \"8px\",\n    },\n    large: {\n      \"--border-width\": \"2px\",\n      \"--width\": \"10px\",\n      \"--height\": \"10px\",\n    },\n    largeBold: {\n      \"--border-width\": \"3px\",\n      \"--width\": \"10px\",\n      \"--height\": \"10px\",\n    },\n  },\n} as Record<string, Record<string, Record<string, string>>>;\n\nexport const dotBadgeCSS = css({\n  display: \"inline-block\",\n  verticalAlign: \"middle\",\n\n  width: \"var(--width)\",\n  height: \"var(--height)\",\n\n  backgroundColor: \"var(--background-color)\",\n\n  borderRadius: vars.rounded.full,\n\n  outline: \"var(--outline)\",\n});\n","/** @jsxImportSource @emotion/react */\n\nimport type { ComponentPropsWithRef, ElementType } from \"react\";\nimport { forwardRef } from \"react\";\nimport { numberBadgeCSS, variantMap } from \"./NumberBadge.css\";\nimport type { NumberBadgeProps } from \"./NumberBadge.types\";\n\ntype NumberBadgeComponent = <E extends ElementType>(\n  props: NumberBadgeProps<E> & {\n    ref?: ComponentPropsWithRef<E>[\"ref\"];\n  },\n) => JSX.Element | null;\n\nexport const NumberBadge: NumberBadgeComponent = forwardRef(function ClayNumberBadge<\n  E extends ElementType,\n>(\n  { number, as, size = \"medium\", native, sx, variant, className }: NumberBadgeProps<E>,\n  ref: ComponentPropsWithRef<E>[\"ref\"],\n) {\n  const Element = as || \"span\";\n\n  return (\n    <Element\n      ref={ref}\n      className={className}\n      {...native}\n      style={{\n        ...variantMap.variant[variant],\n        ...variantMap.size[size],\n        ...native?.style,\n      }}\n      css={[numberBadgeCSS, sx]}\n    >\n      {number}\n    </Element>\n  );\n});\n","import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\n\nexport const variantMap = {\n  variant: {\n    primary: {\n      \"--background-color\": vars.semantic.color.surfaceInverse,\n      \"--color\": vars.semantic.color.textInverse,\n    },\n    secondary: {\n      \"--background-color\": vars.semantic.color.surfaceSlateSecondary,\n      \"--color\": vars.semantic.color.textSub,\n    },\n    accent: {\n      \"--background-color\": vars.semantic.color.surfaceHighlightPrimary,\n      \"--color\": vars.semantic.color.text,\n    },\n    critical: {\n      \"--background-color\": vars.semantic.color.surfaceCriticalPrimary,\n      \"--color\": vars.semantic.color.text,\n    },\n    \"primary-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.text,\n    },\n    \"secondary-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.textSub,\n    },\n    \"accent-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.textAccent,\n    },\n    \"critical-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.textCritical,\n    },\n  } as Record<string, Record<string, string>>,\n  size: {\n    small: {\n      \"--padding\": `${vars.spacing[\"1\"]} ${vars.spacing[\"15\"]}`,\n      \"--min-width\": \"20px\",\n      // label-xsmall\n      \"--font-size\": vars.fontSize[\"2xsmall\"],\n      \"--line-height\": vars.lineHeight[3],\n      \"--font-weight\": vars.fontWeight.semibold,\n    },\n    medium: {\n      \"--padding\": `${vars.spacing[\"05\"]} ${vars.spacing[\"15\"]}`,\n      \"--min-width\": \"20px\",\n      // label-small-bold\n      \"--font-size\": vars.fontSize.xsmall,\n      \"--line-height\": vars.lineHeight[4],\n      \"--font-weight\": vars.fontWeight.semibold,\n    },\n    large: {\n      \"--padding\": `0 ${vars.spacing[\"15\"]}`,\n      \"--min-width\": \"24px\",\n      // label-medium-bold\n      \"--font-size\": vars.fontSize.small,\n      \"--line-height\": vars.lineHeight[\"6\"],\n      \"--font-weight\": vars.fontWeight.semibold,\n    },\n  } as Record<string, Record<string, string>>,\n};\n\nexport const numberBadgeCSS = css({\n  display: \"inline-block\",\n  verticalAlign: \"middle\",\n  textAlign: \"center\",\n\n  // variant styles\n  backgroundColor: \"var(--background-color)\",\n  color: \"var(--color)\",\n\n  // size styles\n  padding: \"var(--padding)\",\n  minWidth: \"var(--min-width)\",\n  fontSize: \"var(--font-size)\",\n  lineHeight: \"var(--line-height)\",\n  fontWeight: \"var(--font-weight)\",\n\n  \"*:disabled > &\": {\n    backgroundColor: vars.semantic.color.surfaceSub,\n    color: vars.semantic.color.textDisabled,\n  },\n\n  borderRadius: vars.rounded.full,\n});\n"]}