{"version":3,"sources":["../../src/Card/Card.css.ts","../../src/utilities/Clay/Clay.tsx","../../src/utilities/Flex/Flex.tsx","../../src/Typography/Typography.tsx","../../src/Card/CardBody/CardBody.css.ts","../../src/Card/CardBody/CardBody.tsx","../../src/Card/CardHeader/CardHeader.tsx","../../src/Card/CardHeader/CardHeader.css.ts","../../src/Card/CardSection/CardSection.css.ts","../../src/Card/CardSection/CardSection.tsx","../../src/Card/Card.tsx"],"names":["css","vars","gapSizeMap","size","inline","cardCSS","__spreadValues","forwardRef","jsx","Clay","_a","ref","_b","children","className","_hover","_active","_after","_before","_focus","width","height","shape","sx","as","native","props","__objRest","__spreadProps","ClayNameSpace","_Flex","Flex","_FlexCenter","FlexCenter","_FlexColumn","FlexColumn","FlexNameSpace","classNames","_Typography","semanticToken","variant","colorToken","whiteSpace","numOfLine","textAlign","Typography","cardBodyCSS","CardBody","restProps","sizeMap","header","cardHeaderCSS","align","separator","jsxs","CardHeader","text","action","description","Element","deprecatedSizeProps","cardSectionCSS","CardSection","Card"],"mappings":"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","sourcesContent":["import type { CSSObject } from \"@emotion/react\";\nimport { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { CardProps } from \"./Card.types\";\n\nconst gapSizeMap = ({ size, inline }: Pick<CardProps, \"size\" | \"inline\">): CSSObject => {\n  if (size !== \"small\") {\n    return {\n      gap: vars.spacing[4],\n    };\n  }\n\n  if (inline) {\n    return {\n      gap: \"24px\",\n    };\n  }\n\n  return {};\n};\n\nexport const cardCSS = ({ size, inline }: Pick<CardProps, \"size\" | \"inline\">) =>\n  css({\n    display: \"flex\",\n    flexDirection: \"column\",\n\n    paddingLeft: vars.spacing[6],\n    paddingRight: vars.spacing[6],\n\n    backgroundColor: vars.semantic.color.surface,\n    borderRadius: vars.rounded.large,\n\n    paddingTop: vars.spacing[5],\n\n    \"&:has(>[data-clay-header])\": {\n      paddingTop: vars.spacing[size === \"small\" ? 5 : 6],\n    },\n\n    ...gapSizeMap({ size, inline }),\n  });\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 { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\n\nexport const cardBodyCSS = css({\n  paddingBottom: vars.spacing[6],\n\n  '[data-clay-card-inline=\"true\"] &': {\n    flex: 1,\n  },\n});\n","/** @jsxImportSource @emotion/react */\n\nimport type { ElementType } from \"react\";\nimport { Clay } from \"../..\";\nimport { cardBodyCSS } from \"./CardBody.css\";\nimport type { CardBodyProps } from \"./CardBody.types\";\n\nexport const CardBody = <Element extends ElementType>({\n  sx,\n  children,\n  ...restProps\n}: CardBodyProps<Element>) => {\n  return (\n    <Clay css={[cardBodyCSS, sx]} {...restProps}>\n      {children}\n    </Clay>\n  );\n};\n","/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport { Typography } from \"../..\";\nimport { Flex } from \"../../utilities/Flex\";\nimport { cardHeaderCSS } from \"./CardHeader.css\";\nimport type { CardHeaderProps } from \"./CardHeader.types\";\n\nexport const CardHeader = ({\n  align,\n  className,\n  separator,\n  header = \"default\",\n  size = \"medium\",\n  text,\n  sx,\n  action,\n  description,\n  as: Element = \"div\",\n  native,\n}: CardHeaderProps) => {\n  const deprecatedSizeProps = size || (header === \"default\" ? \"medium\" : header);\n\n  return (\n    <Element\n      className={className}\n      data-clay-header\n      css={[cardHeaderCSS({ align, size: deprecatedSizeProps, separator }), sx]}\n      {...native}\n    >\n      <Flex justifyContent=\"space-between\" flex={align === \"center\" ? 0 : 1}>\n        <Flex.Column gap={vars.spacing[deprecatedSizeProps === \"medium\" ? 2 : 1]}>\n          {text}\n          {description && <Typography colorToken=\"textSub\">{description}</Typography>}\n        </Flex.Column>\n\n        {action}\n      </Flex>\n    </Element>\n  );\n};\n","import type { CSSObject } from \"@emotion/react\";\nimport { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { CardHeaderProps } from \"./CardHeader.types\";\n\nconst sizeMap = (header: CardHeaderProps[\"size\"]): CSSObject => {\n  switch (header) {\n    case \"large\":\n      return vars.semantic.typography[\"heading-2xlarge-bold\"];\n\n    case \"small\":\n      return {\n        ...vars.semantic.typography[\"heading-medium-bold\"],\n        paddingBottom: vars.spacing[5],\n      };\n\n    default:\n      return vars.semantic.typography[\"heading-xlarge-bold\"];\n  }\n};\n\nexport const cardHeaderCSS = ({\n  align = \"left\",\n  size = \"medium\",\n  separator,\n}: Pick<CardHeaderProps, \"align\" | \"size\" | \"separator\">) =>\n  css({\n    display: \"flex\",\n    justifyContent: align === \"center\" ? \"center\" : \"initial\",\n\n    width: \"100%\",\n\n    paddingBottom: vars.spacing[6],\n\n    ...(separator && {\n      paddingTop: vars.spacing[6],\n      borderTop: `${vars.divide.x} solid ${vars.semantic.color.divide}`,\n    }),\n\n    \"[data-clay-card-section] &\": {\n      paddingBottom: vars.spacing[5],\n    },\n\n    '[data-clay-card-size=\"large\"] [data-clay-card-section] &': {\n      paddingBottom: vars.spacing[6],\n    },\n\n    '[data-clay-card-inline=\"true\"] [data-clay-card-section] &': {\n      display: \"inline-flex\",\n      width: \"228px\",\n\n      paddingBottom: 0,\n    },\n\n    ...sizeMap(size),\n    whiteSpace: \"pre\",\n  });\n","import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\n\nexport const cardSectionCSS = css({\n  '[data-clay-card-inline=\"true\"] &': {\n    display: \"flex\",\n    gap: vars.spacing[5],\n  },\n\n  '[data-clay-card-size=\"small\"] &': {\n    gap: 0,\n  },\n});\n","/** @jsxImportSource @emotion/react */\n\nimport type { ElementType } from \"react\";\nimport { Clay } from \"../..\";\nimport { cardSectionCSS } from \"./CardSection.css\";\nimport type { CardSectionProps } from \"./CardSection.types\";\n\nexport const CardSection = <Element extends ElementType>({\n  sx,\n  className,\n  children,\n  as,\n}: CardSectionProps<Element>) => {\n  return (\n    <Clay\n      as={as || \"section\"}\n      className={className}\n      css={[cardSectionCSS, sx]}\n      native={{\n        \"data-clay-card-section\": true,\n      }}\n    >\n      {children}\n    </Clay>\n  );\n};\n","/** @jsxImportSource @emotion/react */\n\nimport { cardCSS } from \"./Card.css\";\nimport type { CardProps } from \"./Card.types\";\nimport { CardBody } from \"./CardBody\";\nimport type { CardHeaderProps } from \"./CardHeader\";\nimport { CardHeader } from \"./CardHeader\";\nimport { CardSection } from \"./CardSection\";\n\nexport const Card = ({\n  children,\n  size = \"default\",\n  as: Element = \"div\",\n  className,\n  sx,\n  inline,\n  native,\n}: CardProps) => {\n  return (\n    <Element\n      className={className}\n      data-clay-card-inline={inline}\n      data-clay-card-size={size}\n      css={[cardCSS({ size, inline }), sx]}\n      {...native}\n    >\n      {children}\n    </Element>\n  );\n};\n\nCard.Header = CardHeader;\nCard.SubHeader = (props: Omit<CardHeaderProps, \"header\">) => <CardHeader size=\"small\" {...props} />;\nCard.Section = CardSection;\nCard.Body = CardBody;\n"]}