{"version":3,"sources":["../../../src/Banner/ContentsBanner/ContentsBanner.tsx","../../../src/utilities/Clay/Clay.tsx","../../../src/utilities/Flex/Flex.tsx","../../../src/Typography/Typography.tsx","../../../src/Banner/ContentsBanner/ContentsBanner.constants.tsx","../../../src/Banner/ContentsBanner/ContentsBanner.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","AlertTriangleFilled","CheckCircleFilled","InfoCircle","InfoCircleFilled","iconMap","css","containerCSS","title","type","_default","critical","warning","information","success","variantStyle","primary","secondary","typeStyle","jsxs","ContentsBanner","text","button","Element"],"mappings":"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","sourcesContent":["/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport { Flex, Typography } from \"../..\";\nimport { iconMap } from \"./ContentsBanner.constants\";\nimport { containerCSS, typeStyle, variantStyle } from \"./ContentsBanner.css\";\nimport type { ContentsBannerProps } from \"./ContentsBanner.types\";\n\nexport const ContentsBanner = ({\n  text,\n  type,\n  className,\n  sx,\n  button,\n  as: Element = \"div\",\n  children,\n  title,\n  variant = \"default\",\n  native,\n}: ContentsBannerProps) => {\n  return (\n    <Element\n      className={className}\n      css={[variantStyle[variant], typeStyle[type], containerCSS({ type, title, variant }), sx]}\n      {...native}\n    >\n      {type !== \"primary\" && (\n        <Flex\n          minWidth=\"16px\"\n          alignSelf=\"flex-start\"\n          padding={type !== \"minimal\" ? `${vars.spacing[1]} 0` : 0}\n        >\n          {iconMap[variant]}\n        </Flex>\n      )}\n\n      <Flex\n        flexDirection=\"column\"\n        gap={vars.spacing[2]}\n        padding={type === \"secondary\" ? `${vars.spacing[\"05\"]} 0` : 0}\n      >\n        {title && (\n          <Typography\n            whiteSpace=\"pre-wrap\"\n            semanticToken={type === \"minimal\" ? \"body-small-bold\" : \"body-medium-bold\"}\n          >\n            {title}\n          </Typography>\n        )}\n\n        {children || (\n          <Typography\n            {...(type === \"minimal\" && { colorToken: \"textSub\", semanticToken: \"body-small\" })}\n            whiteSpace=\"pre-wrap\"\n          >\n            {text} {button && <button onClick={button.onClick}>{button.text}</button>}\n          </Typography>\n        )}\n      </Flex>\n    </Element>\n  );\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 {\n  AlertTriangleFilled,\n  CheckCircleFilled,\n  InfoCircle,\n  InfoCircleFilled,\n} from \"@imwebme/clay-icons\";\n\nexport const iconMap = {\n  default: <InfoCircle colorToken=\"icon-sub\" />,\n  critical: <AlertTriangleFilled colorToken=\"icon-critical\" />,\n  warning: <AlertTriangleFilled colorToken=\"icon-warning\" />,\n  information: <InfoCircleFilled colorToken=\"icon-accent\" />,\n  success: <CheckCircleFilled colorToken=\"icon-success\" />,\n};\n","import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { ContentsBannerProps } from \".\";\n\nexport const containerCSS = ({\n  title,\n  variant,\n  type,\n}: Pick<ContentsBannerProps, \"type\" | \"variant\" | \"title\">) =>\n  css({\n    display: \"flex\",\n    gap: vars.spacing[2],\n    alignItems: title ? \"flex-start\" : \"center\",\n    ...(variant === \"default\" && type !== \"primary\" && { backgroundColor: \"transparent\" }),\n    ...(variant !== \"default\" && type !== \"primary\" && { border: \"none\", outline: \"none\" }),\n  });\n\nconst _default = css({\n  backgroundColor: vars.semantic.color.surfaceSub,\n  outlineColor: vars.semantic.color.border,\n  borderColor: vars.semantic.color.border,\n  \"button, a\": {\n    backgroundColor: \"transparent\",\n    color: vars.semantic.color.textAccent,\n\n    \"&:hover\": {\n      color: vars.semantic.color.textAccentHover,\n    },\n  },\n});\n\nconst critical = css({\n  backgroundColor: vars.semantic.color.surfaceCriticalSecondary,\n  outlineColor: vars.semantic.color.borderCritical,\n  borderColor: vars.semantic.color.borderCritical,\n  \"button, a\": {\n    backgroundColor: \"transparent\",\n    color: vars.semantic.color.textCritical,\n\n    \"&:hover\": {\n      color: vars.semantic.color.textCriticalHover,\n    },\n  },\n});\n\nconst warning = css({\n  backgroundColor: vars.semantic.color.surfaceWarningSecondary,\n  outlineColor: vars.semantic.color.borderWarning,\n  borderColor: vars.semantic.color.borderWarning,\n  \"button, a\": {\n    backgroundColor: \"transparent\",\n    color: vars.semantic.color.textWarning,\n\n    \"&:hover\": {\n      color: vars.semantic.color.textWarningHover,\n    },\n  },\n});\n\nconst information = css({\n  backgroundColor: vars.semantic.color.surfaceHighlightSecondary,\n  outlineColor: vars.semantic.color.borderHighlight,\n  borderColor: vars.semantic.color.borderHighlight,\n  \"button, a\": {\n    backgroundColor: \"transparent\",\n    color: vars.semantic.color.textAccent,\n\n    \"&:hover\": {\n      color: vars.semantic.color.textAccentHover,\n    },\n  },\n});\n\nconst success = css({\n  backgroundColor: vars.semantic.color.surfaceSuccessSecondary,\n  outlineColor: vars.semantic.color.borderSuccess,\n  borderColor: vars.semantic.color.borderSuccess,\n  \"button, a\": {\n    backgroundColor: \"transparent\",\n    color: vars.semantic.color.textSuccess,\n  },\n});\n\nexport const variantStyle = {\n  default: _default,\n  critical,\n  warning,\n  information,\n  success,\n};\n\nconst primary = css({\n  padding: vars.spacing[4],\n\n  borderLeftWidth: \"4px\",\n  borderLeftStyle: \"solid\",\n});\n\nconst secondary = css({\n  padding: `${vars.spacing[3]} ${vars.spacing[4]}`,\n\n  outlineWidth: \"1px\",\n  outlineStyle: \"solid\",\n  outlineOffset: \"-1px\",\n  borderRadius: vars.rounded.medium,\n});\n\nexport const typeStyle = {\n  primary,\n  secondary,\n  minimal: secondary,\n};\n"]}