@channel.io/bezier-react 1.5.0 → 1.6.0

package/dist/esm/components/Banner/Banner.styled.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.styled.mjs","sources":["../../../../src/components/Banner/Banner.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nimport type { VariantProps } from '~/src/types/ComponentProps'\n\nimport { LegacyIcon } from '~/src/components/LegacyIcon'\nimport {\n  StackItem as BaseStackItem,\n  HStack,\n} from '~/src/components/Stack'\nimport { Text } from '~/src/components/Text'\n\nimport {\n  BACKGROUND_COLORS,\n  ELEVATIONS,\n  TEXT_COLORS,\n} from './Banner.const'\nimport type { BannerVariant } from './Banner.types'\n\ntype BannerVariantProps = Required<VariantProps<BannerVariant>>\n\nconst BannerIcon = styled(LegacyIcon)``\n\nconst ContentWrapper = styled.div<BannerVariantProps>`\n  color: ${({ foundation, variant }) => foundation?.theme?.[TEXT_COLORS[variant]]};\n`\n\nconst Link = styled(Text)`\n  margin-left: 2px;\n  text-decoration: underline;\n  cursor: pointer;\n`\n\nconst Stack = styled(HStack)<BannerVariantProps>`\n  width: auto;\n  min-width: 200px;\n  height: auto;\n  padding: 12px;\n  background-color: ${({ foundation, variant }) => foundation?.theme?.[BACKGROUND_COLORS[variant]]};\n\n  ${({ foundation }) => foundation?.rounding?.round12}\n  ${({ variant }) => ELEVATIONS[variant]}\n\n  & + & {\n    margin-top: 6px;\n  }\n`\n\nconst StackItem = styled(BaseStackItem)`\n  height: 20px;\n`\n\nexport default {\n  BannerIcon,\n  ContentWrapper,\n  Link,\n  Stack,\n  StackItem,\n}\n"],"names":["BannerIcon","styled","LegacyIcon","withConfig","displayName","componentId","ContentWrapper","div","foundation","variant","theme","TEXT_COLORS","Link","Text","Stack","HStack","BACKGROUND_COLORS","rounding","round12","ELEVATIONS","StackItem","BaseStackItem"],"mappings":";;;;;;;AAoBA,MAAMA,UAAU,gBAAGC,gBAAM,CAACC,UAAU,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,0BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA;AAEvC,MAAMC,cAAc,gBAAGL,gBAAM,CAACM,GAAG,CAAAJ,UAAA,CAAA;EAAAC,WAAA,EAAA,8BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,QAAA,EAAA,GAAA,CAAA,EACtB,CAAC;EAAEG,UAAU;AAAEC,EAAAA,OAAAA;AAAQ,CAAC,KAAKD,UAAU,EAAEE,KAAK,GAAGC,WAAW,CAACF,OAAO,CAAC,CAAC,CAChF,CAAA;AAED,MAAMG,IAAI,gBAAGX,gBAAM,CAACY,IAAI,CAAC,CAAAV,UAAA,CAAA;EAAAC,WAAA,EAAA,oBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAIxB,CAAA,CAAA,CAAA,2DAAA,CAAA,CAAA,CAAA;AAED,MAAMS,KAAK,gBAAGb,gBAAM,CAACc,MAAM,CAAC,CAAAZ,UAAA,CAAA;EAAAC,WAAA,EAAA,qBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,uEAAA,EAAA,GAAA,EAAA,GAAA,EAAA,yBAAA,CAAA,EAKN,CAAC;EAAEG,UAAU;AAAEC,EAAAA,OAAAA;AAAQ,CAAC,KAAKD,UAAU,EAAEE,KAAK,GAAGM,iBAAiB,CAACP,OAAO,CAAC,CAAC,EAE9F,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAES,QAAQ,EAAEC,OAAO,EACjD,CAAC;AAAET,EAAAA,OAAAA;AAAQ,CAAC,KAAKU,UAAU,CAACV,OAAO,CAAC,CAKvC,CAAA;AAED,MAAMW,SAAS,gBAAGnB,gBAAM,CAACoB,WAAa,CAAC,CAAAlB,UAAA,CAAA;EAAAC,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAEtC,CAAA,CAAA,CAAA,cAAA,CAAA,CAAA,CAAA;AAED,aAAe;EACbL,UAAU;EACVM,cAAc;EACdM,IAAI;EACJE,KAAK;AACLM,EAAAA,SAAAA;AACF,CAAC;;;;"}

package/dist/esm/components/Banner/Banner.types.mjs

@@ -0,0 +1,13 @@
+let BannerVariant = /*#__PURE__*/function (BannerVariant) {
+  BannerVariant["Default"] = "default";
+  BannerVariant["Blue"] = "blue";
+  BannerVariant["Cobalt"] = "cobalt";
+  BannerVariant["Green"] = "green";
+  BannerVariant["Orange"] = "orange";
+  BannerVariant["Red"] = "red";
+  BannerVariant["Alt"] = "alt";
+  return BannerVariant;
+}({});
+
+export { BannerVariant };
+//# sourceMappingURL=Banner.types.mjs.map

package/dist/esm/components/Banner/Banner.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.types.mjs","sources":["../../../../src/components/Banner/Banner.types.ts"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { type IconName } from '@channel.io/bezier-icons'\n\nimport type {\n  AdditionalColorProps,\n  BezierComponentProps,\n  ContentProps,\n  VariantProps,\n} from '~/src/types/ComponentProps'\n\nimport type { ButtonProps } from '~/src/components/Button'\n\nexport enum BannerVariant {\n  Default = 'default',\n  Blue = 'blue',\n  Cobalt = 'cobalt',\n  Green = 'green',\n  Orange = 'orange',\n  Red = 'red',\n  Alt = 'alt',\n}\n\nexport type RenderLinkFunc = (props: {\n  content: ReactNode\n  linkTo?: string\n}) => JSX.Element\n\ninterface BannerOptions {\n  /**\n   * The name of icon to display at the top left of the banner.\n   *\n   * If `null` is given, no icon will be displayed.\n   */\n  icon: IconName | null\n\n  /**\n   * Whether to display link at the end of banner content.\n   *\n   * @default false\n   */\n  hasLink?: boolean\n\n  /**\n   * The link content.\n   *\n   * This will be displayed as bold, underline text at the end of content.\n   *\n   * @remarks\n   * `hasLink` props should be given `true` to enable the link.\n   */\n  linkText?: string\n\n  /**\n   * The location (href) of the link.\n   *\n   * By default, the link will be opened in a new tab. (`target=\"_blank\"`)\n   * To specify a different behavior, use `renderLink` prop to render the link as a custom component.\n   *\n   * @remarks\n   * `hasLink` props should be given `true` to enable the link.\n   */\n  linkTo?: string\n\n  /**\n   * Specifies how to render the link.\n   *\n   * @default\n   * renders link as an `<a>` tag with `target=\"_blank\"` attribute.\n   */\n  renderLink?: RenderLinkFunc\n\n  /**\n   * Specifies which icon button to display at the top right of the banner.\n   *\n   * FIXME(@ed): 새로운 아이콘 방식으로 변경\n   */\n  actionIcon?: IconName\n\n  /**\n   * Handler to be executed when the action icon button is clicked.\n   */\n  onClickAction?: ButtonProps['onClick']\n}\n\nexport interface BannerProps extends\n  BezierComponentProps,\n  VariantProps<BannerVariant>,\n  ContentProps<string | ReactNode>,\n  AdditionalColorProps<'icon'>,\n  BannerOptions {}\n"],"names":["BannerVariant"],"mappings":"AAaYA,IAAAA,aAAa,0BAAbA,aAAa,EAAA;EAAbA,aAAa,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAbA,aAAa,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;EAAbA,aAAa,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;EAAbA,aAAa,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;EAAbA,aAAa,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;EAAbA,aAAa,CAAA,KAAA,CAAA,GAAA,KAAA,CAAA;EAAbA,aAAa,CAAA,KAAA,CAAA,GAAA,KAAA,CAAA;AAAA,EAAA,OAAbA,aAAa,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/esm/components/Button/Button.mjs

@@ -0,0 +1,159 @@
+import React__default, { forwardRef, useState, useMemo, useCallback } from 'react';
+import { flattenDeep } from '../../utils/arrayUtils.mjs';
+import { noop } from '../../utils/functionUtils.mjs';
+import { isArray } from '../../utils/typeUtils.mjs';
+import Spinner from '../Spinner/Spinner.mjs';
+import { SpinnerSize } from '../Spinner/Spinner.types.mjs';
+import { ButtonSize, ButtonStyleVariant, ButtonColorVariant } from './Button.types.mjs';
+import { ButtonWrapper, ButtonContents, ContentText, ButtonLoader } from './Button.styled.mjs';
+import { IconSize } from '../Icon/Icon.types.mjs';
+import { isIconName } from '../LegacyIcon/utils.mjs';
+import LegacyIcon from '../LegacyIcon/LegacyIcon.mjs';
+import { Typography } from '../../foundation/Typography.mjs';
+
+const BUTTON_TEST_ID = 'bezier-react-button';
+const BUTTON_INNER_CONTENT_TEST_ID = 'bezier-react-button-inner-content';
+const BUTTON_TEXT_TEST_ID = 'bezier-react-button-text';
+function tupleKey(...[colorVariant, styleVariant, size]) {
+  return `${colorVariant},${styleVariant},${size}`;
+}
+function combinations(colors, styles, sizes) {
+  function toArray(items) {
+    return isArray(items) ? items : [items];
+  }
+  return flattenDeep(toArray(colors).map(color => toArray(styles).map(style => toArray(sizes).map(size => tupleKey(color, style, size)))));
+}
+const OVERRIDED_TEXT_DEFAULT_COLORS = {
+  ...Object.fromEntries(combinations(ButtonColorVariant.Monochrome, [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary], [ButtonSize.S, ButtonSize.XS]).map(key => [key, 'txt-black-darker']))
+};
+const OVERRIDED_ICON_AND_SPINNER_DEFAULT_COLORS = {
+  ...Object.fromEntries(combinations(ButtonColorVariant.Monochrome, [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary], [ButtonSize.XL, ButtonSize.L, ButtonSize.M]).map(key => [key, 'txt-black-darker'])),
+  ...Object.fromEntries(combinations(ButtonColorVariant.Monochrome, [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary], [ButtonSize.S, ButtonSize.XS]).map(key => [key, 'txt-black-dark'])),
+  ...Object.fromEntries(combinations(ButtonColorVariant.MonochromeLight, [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary, ButtonStyleVariant.Floating], Object.values(ButtonSize)).map(key => [key, 'txt-black-dark'])),
+  ...Object.fromEntries(combinations(ButtonColorVariant.MonochromeDark, [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary, ButtonStyleVariant.Floating], Object.values(ButtonSize)).map(key => [key, 'txt-black-darker']))
+};
+const Button = /*#__PURE__*/forwardRef(function Button({
+  as,
+  className,
+  style,
+  interpolation,
+  testId = BUTTON_TEST_ID,
+  type = 'button',
+  text,
+  disabled = false,
+  loading = false,
+  active = false,
+  size = ButtonSize.M,
+  styleVariant = ButtonStyleVariant.Primary,
+  colorVariant = ButtonColorVariant.Blue,
+  leftContent,
+  rightContent,
+  onClick = noop,
+  onMouseEnter = noop,
+  onMouseLeave = noop,
+  onBlur = noop,
+  ...rest
+}, forwardedRef) {
+  const [isHovered, setIsHovered] = useState(false);
+  const typography = useMemo(() => {
+    switch (size) {
+      case ButtonSize.XS:
+      case ButtonSize.S:
+        return Typography.Size13;
+      case ButtonSize.L:
+        return Typography.Size15;
+      case ButtonSize.XL:
+        return Typography.Size18;
+      case ButtonSize.M:
+      default:
+        return Typography.Size14;
+    }
+  }, [size]);
+  const ButtonSpinnerSize = useMemo(() => {
+    switch (size) {
+      case ButtonSize.S:
+      case ButtonSize.XS:
+        return SpinnerSize.XS;
+      case ButtonSize.XL:
+      case ButtonSize.L:
+      case ButtonSize.M:
+      default:
+        return SpinnerSize.S;
+    }
+  }, [size]);
+  const iconSize = useMemo(() => {
+    switch (size) {
+      case ButtonSize.XS:
+      case ButtonSize.S:
+        return IconSize.XS;
+      case ButtonSize.XL:
+        return IconSize.Normal;
+      case ButtonSize.M:
+      case ButtonSize.L:
+      default:
+        return IconSize.S;
+    }
+  }, [size]);
+  const overridedTextColor = useMemo(() => active || isHovered ? undefined : OVERRIDED_TEXT_DEFAULT_COLORS[tupleKey(colorVariant, styleVariant, size)], [colorVariant, styleVariant, size, active, isHovered]);
+  const overridedIconAndSpinnerColor = useMemo(() => active || isHovered ? undefined : OVERRIDED_ICON_AND_SPINNER_DEFAULT_COLORS[tupleKey(colorVariant, styleVariant, size)], [colorVariant, styleVariant, size, active, isHovered]);
+  const handleMouseEnter = useCallback(event => {
+    setIsHovered(true);
+    onMouseEnter(event);
+  }, [onMouseEnter]);
+  const handleMouseLeave = useCallback(event => {
+    setIsHovered(false);
+    onMouseLeave(event);
+  }, [onMouseLeave]);
+  const handleClick = useCallback(event => {
+    if (!disabled) {
+      onClick(event);
+    }
+    return null;
+  }, [onClick, disabled]);
+  const renderSideContent = useCallback(content => {
+    if (isIconName(content)) {
+      return /*#__PURE__*/React__default.createElement(LegacyIcon, {
+        name: content,
+        size: iconSize,
+        color: overridedIconAndSpinnerColor
+      });
+    }
+    return content;
+  }, [iconSize, overridedIconAndSpinnerColor]);
+  return /*#__PURE__*/React__default.createElement(ButtonWrapper, Object.assign({
+    as: as,
+    type: type,
+    style: style,
+    className: className,
+    interpolation: interpolation,
+    ref: forwardedRef,
+    size: size,
+    disabled: disabled,
+    active: active,
+    styleVariant: styleVariant,
+    colorVariant: colorVariant,
+    text: text,
+    "data-testid": testId,
+    "data-component": "BezierButton",
+    onClick: handleClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onBlur: onBlur
+  }, rest), /*#__PURE__*/React__default.createElement(ButtonContents, {
+    "data-testid": BUTTON_INNER_CONTENT_TEST_ID,
+    visible: !loading,
+    buttonSize: size
+  }, renderSideContent(leftContent), text && /*#__PURE__*/React__default.createElement(ContentText, {
+    testId: BUTTON_TEXT_TEST_ID,
+    typo: typography,
+    bold: true,
+    color: overridedTextColor,
+    buttonSize: size
+  }, text), renderSideContent(rightContent)), loading && /*#__PURE__*/React__default.createElement(ButtonLoader, null, /*#__PURE__*/React__default.createElement(Spinner, {
+    size: ButtonSpinnerSize,
+    color: overridedIconAndSpinnerColor
+  })));
+});
+
+export { BUTTON_INNER_CONTENT_TEST_ID, BUTTON_TEST_ID, BUTTON_TEXT_TEST_ID, Button };
+//# sourceMappingURL=Button.mjs.map

package/dist/esm/components/Button/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\n\nimport {\n  type SemanticNames,\n  Typography,\n} from '~/src/foundation'\n\nimport { flattenDeep } from '~/src/utils/arrayUtils'\nimport { noop } from '~/src/utils/functionUtils'\nimport { isArray } from '~/src/utils/typeUtils'\n\nimport { IconSize } from '~/src/components/Icon'\nimport {\n  LegacyIcon,\n  isIconName,\n} from '~/src/components/LegacyIcon'\nimport {\n  Spinner,\n  SpinnerSize,\n} from '~/src/components/Spinner'\n\nimport type ButtonProps from './Button.types'\nimport {\n  type MouseEventHandler,\n  type SideContent,\n} from './Button.types'\nimport {\n  ButtonColorVariant,\n  ButtonSize,\n  ButtonStyleVariant,\n} from './Button.types'\n\nimport * as Styled from './Button.styled'\n\nexport const BUTTON_TEST_ID = 'bezier-react-button'\nexport const BUTTON_INNER_CONTENT_TEST_ID = 'bezier-react-button-inner-content'\nexport const BUTTON_TEXT_TEST_ID = 'bezier-react-button-text'\n\ntype VariantTuple = `${ButtonColorVariant},${ButtonStyleVariant},${ButtonSize}`\n\nfunction tupleKey(...[colorVariant, styleVariant, size]: [ButtonColorVariant, ButtonStyleVariant, ButtonSize]): VariantTuple {\n  return `${colorVariant},${styleVariant},${size}` as const\n}\n\nfunction combinations(\n  colors: ButtonColorVariant | ButtonColorVariant[],\n  styles: ButtonStyleVariant | ButtonStyleVariant[],\n  sizes: ButtonSize | ButtonSize[],\n) : VariantTuple[] {\n  function toArray<T>(items: T | T[]): T[] {\n    return isArray(items) ? items : [items]\n  }\n\n  return flattenDeep(\n    toArray(colors).map((color) =>\n      toArray(styles).map((style) =>\n        toArray(sizes).map((size) => tupleKey(color, style, size)))),\n  )\n}\n\nconst OVERRIDED_TEXT_DEFAULT_COLORS: { [key in VariantTuple]?: SemanticNames } = {\n  ...Object.fromEntries(\n    combinations(\n      ButtonColorVariant.Monochrome,\n      [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary],\n      [ButtonSize.S, ButtonSize.XS],\n    )\n      .map((key) => [key, 'txt-black-darker']),\n  ),\n}\n\nconst OVERRIDED_ICON_AND_SPINNER_DEFAULT_COLORS: { [key in VariantTuple]?: SemanticNames } = {\n  ...Object.fromEntries(\n    combinations(\n      ButtonColorVariant.Monochrome,\n      [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary],\n      [ButtonSize.XL, ButtonSize.L, ButtonSize.M],\n    )\n      .map((key) => [key, 'txt-black-darker']),\n  ),\n  ...Object.fromEntries(\n    combinations(\n      ButtonColorVariant.Monochrome,\n      [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary],\n      [ButtonSize.S, ButtonSize.XS],\n    )\n      .map((key) => [key, 'txt-black-dark']),\n  ),\n  ...Object.fromEntries(\n    combinations(\n      ButtonColorVariant.MonochromeLight,\n      [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary, ButtonStyleVariant.Floating],\n      Object.values(ButtonSize),\n    )\n      .map((key) => [key, 'txt-black-dark']),\n  ),\n  ...Object.fromEntries(\n    combinations(\n      ButtonColorVariant.MonochromeDark,\n      [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary, ButtonStyleVariant.Floating],\n      Object.values(ButtonSize),\n    )\n      .map((key) => [key, 'txt-black-darker']),\n  ),\n}\n\nexport const Button = forwardRef(function Button(\n  {\n    as,\n    className,\n    style,\n    interpolation,\n    testId = BUTTON_TEST_ID,\n    type = 'button',\n    text,\n    disabled = false,\n    loading = false,\n    active = false,\n    size = ButtonSize.M,\n    styleVariant = ButtonStyleVariant.Primary,\n    colorVariant = ButtonColorVariant.Blue,\n    leftContent,\n    rightContent,\n    onClick = noop,\n    onMouseEnter = noop,\n    onMouseLeave = noop,\n    onBlur = noop,\n    ...rest\n  }: ButtonProps,\n  forwardedRef: React.Ref<HTMLElement>,\n) {\n  const [isHovered, setIsHovered] = useState(false)\n\n  const typography = useMemo(() => {\n    switch (size) {\n      case ButtonSize.XS:\n      case ButtonSize.S:\n        return Typography.Size13\n      case ButtonSize.L:\n        return Typography.Size15\n      case ButtonSize.XL:\n        return Typography.Size18\n      case ButtonSize.M:\n      default:\n        return Typography.Size14\n    }\n  }, [size])\n\n  const ButtonSpinnerSize = useMemo(() => {\n    switch (size) {\n      case ButtonSize.S:\n      case ButtonSize.XS:\n        return SpinnerSize.XS\n      case ButtonSize.XL:\n      case ButtonSize.L:\n      case ButtonSize.M:\n      default:\n        return SpinnerSize.S\n    }\n  }, [size])\n\n  const iconSize = useMemo(() => {\n    switch (size) {\n      case ButtonSize.XS:\n      case ButtonSize.S:\n        return IconSize.XS\n      case ButtonSize.XL:\n        return IconSize.Normal\n      case ButtonSize.M:\n      case ButtonSize.L:\n      default:\n        return IconSize.S\n    }\n  }, [size])\n\n  const overridedTextColor = useMemo(() => (\n    (active || isHovered)\n      ? undefined\n      : OVERRIDED_TEXT_DEFAULT_COLORS[tupleKey(colorVariant, styleVariant, size)]\n  ), [\n    colorVariant,\n    styleVariant,\n    size,\n    active,\n    isHovered,\n  ])\n\n  const overridedIconAndSpinnerColor = useMemo(() => (\n    (active || isHovered)\n      ? undefined\n      : OVERRIDED_ICON_AND_SPINNER_DEFAULT_COLORS[tupleKey(colorVariant, styleVariant, size)]\n  ), [\n    colorVariant,\n    styleVariant,\n    size,\n    active,\n    isHovered,\n  ])\n\n  const handleMouseEnter = useCallback<MouseEventHandler>((event) => {\n    setIsHovered(true)\n    onMouseEnter(event)\n  }, [onMouseEnter])\n\n  const handleMouseLeave = useCallback<MouseEventHandler>((event) => {\n    setIsHovered(false)\n    onMouseLeave(event)\n  }, [onMouseLeave])\n\n  const handleClick = useCallback<MouseEventHandler>((event) => {\n    if (!disabled) { onClick(event) }\n    return null\n  }, [\n    onClick,\n    disabled,\n  ])\n\n  const renderSideContent = useCallback((content?: SideContent) => {\n    if (isIconName(content)) {\n      return (\n        <LegacyIcon\n          name={content}\n          size={iconSize}\n          color={overridedIconAndSpinnerColor}\n        />\n      )\n    }\n\n    return content\n  }, [\n    iconSize,\n    overridedIconAndSpinnerColor,\n  ])\n\n  return (\n    <Styled.ButtonWrapper\n      as={as}\n      type={type}\n      style={style}\n      className={className}\n      interpolation={interpolation}\n      ref={forwardedRef}\n      size={size}\n      disabled={disabled}\n      active={active}\n      styleVariant={styleVariant}\n      colorVariant={colorVariant}\n      text={text}\n      data-testid={testId}\n      data-component=\"BezierButton\"\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onBlur={onBlur}\n      {...rest}\n    >\n      <Styled.ButtonContents\n        data-testid={BUTTON_INNER_CONTENT_TEST_ID}\n        visible={!loading}\n        buttonSize={size}\n      >\n        { renderSideContent(leftContent) }\n\n        { text && (\n          <Styled.ContentText\n            testId={BUTTON_TEXT_TEST_ID}\n            typo={typography}\n            bold\n            color={overridedTextColor}\n            buttonSize={size}\n          >\n            { text }\n          </Styled.ContentText>\n        ) }\n\n        { renderSideContent(rightContent) }\n      </Styled.ButtonContents>\n\n      { loading && (\n        <Styled.ButtonLoader>\n          <Spinner\n            size={ButtonSpinnerSize}\n            color={overridedIconAndSpinnerColor}\n          />\n        </Styled.ButtonLoader>\n      ) }\n    </Styled.ButtonWrapper>\n  )\n})\n"],"names":["BUTTON_TEST_ID","BUTTON_INNER_CONTENT_TEST_ID","BUTTON_TEXT_TEST_ID","tupleKey","colorVariant","styleVariant","size","combinations","colors","styles","sizes","toArray","items","isArray","flattenDeep","map","color","style","OVERRIDED_TEXT_DEFAULT_COLORS","Object","fromEntries","ButtonColorVariant","Monochrome","ButtonStyleVariant","Secondary","Tertiary","ButtonSize","S","XS","key","OVERRIDED_ICON_AND_SPINNER_DEFAULT_COLORS","XL","L","M","MonochromeLight","Floating","values","MonochromeDark","Button","forwardRef","as","className","interpolation","testId","type","text","disabled","loading","active","Primary","Blue","leftContent","rightContent","onClick","noop","onMouseEnter","onMouseLeave","onBlur","rest","forwardedRef","isHovered","setIsHovered","useState","typography","useMemo","Typography","Size13","Size15","Size18","Size14","ButtonSpinnerSize","SpinnerSize","iconSize","IconSize","Normal","overridedTextColor","undefined","overridedIconAndSpinnerColor","handleMouseEnter","useCallback","event","handleMouseLeave","handleClick","renderSideContent","content","isIconName","React","createElement","LegacyIcon","name","Styled","assign","ref","visible","buttonSize","typo","bold","Spinner"],"mappings":"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"}

package/dist/esm/components/Button/Button.styled.mjs

@@ -0,0 +1,364 @@
+import disabledOpacity from '../../constants/DisabledOpacity.mjs';
+import { gap } from '../../utils/styleUtils.mjs';
+import { isEmpty } from '../../utils/typeUtils.mjs';
+import Text from '../Text/Text.mjs';
+import { ButtonSize, ButtonStyleVariant, ButtonColorVariant } from './Button.types.mjs';
+import { styled as FoundationStyled, css as FoundationCSS } from '../../foundation/FoundationStyledComponent.mjs';
+
+// NOTE: ButtonSize 에 따른 버튼의 min-width, height
+const BUTTON_SIZE_VALUE = {
+  [ButtonSize.XS]: 20,
+  [ButtonSize.S]: 24,
+  [ButtonSize.M]: 36,
+  [ButtonSize.L]: 44,
+  [ButtonSize.XL]: 54
+};
+function getSizeCSSFromButtonSize({
+  size
+}) {
+  return FoundationCSS`
+    min-width: ${BUTTON_SIZE_VALUE[size]}px;
+    height: ${BUTTON_SIZE_VALUE[size]}px;
+  `;
+}
+
+// NOTE: ButtonSize에 따른 버튼 내 텍스트의 margin
+const TEXT_PADDING_VALUE = {
+  [ButtonSize.XS]: 3,
+  [ButtonSize.S]: 3,
+  [ButtonSize.M]: 4,
+  [ButtonSize.L]: 4,
+  [ButtonSize.XL]: 4
+};
+const BUTTON_CONTENT_GAP_VALUE = {
+  [ButtonSize.XS]: 0,
+  [ButtonSize.S]: 0,
+  [ButtonSize.M]: 2,
+  [ButtonSize.L]: 2,
+  [ButtonSize.XL]: 2
+};
+
+// NOTE: 버튼의 padding 값을 결정하는 경우 4가지 중 위의 3가지 key
+// 1. 기본
+// 2. styleVariant 가 Floating 인 경우 - floating
+// 3. 버튼에 텍스트 없이 컨텐트만 있을 경우 => buttonSize 에 관계없이 padding 이 0 이라 이 경우만 따로 분기 처리
+// NOTE: floating 은 padding 이 버튼의 size value 의 절반에서 Text padding 값 만큼 빼줘야 스펙과 일치
+const BUTTON_HORIZONTAL_PADDING_VALUE = {
+  [ButtonSize.XS]: {
+    default: 2,
+    floating: BUTTON_SIZE_VALUE[ButtonSize.XS] / 2 - TEXT_PADDING_VALUE[ButtonSize.XS]
+  },
+  [ButtonSize.S]: {
+    default: 4,
+    floating: BUTTON_SIZE_VALUE[ButtonSize.S] / 2 - TEXT_PADDING_VALUE[ButtonSize.S]
+  },
+  [ButtonSize.M]: {
+    default: 10,
+    floating: BUTTON_SIZE_VALUE[ButtonSize.M] / 2 - TEXT_PADDING_VALUE[ButtonSize.M]
+  },
+  [ButtonSize.L]: {
+    default: 12,
+    floating: BUTTON_SIZE_VALUE[ButtonSize.L] / 2 - TEXT_PADDING_VALUE[ButtonSize.L]
+  },
+  [ButtonSize.XL]: {
+    default: 20,
+    floating: BUTTON_SIZE_VALUE[ButtonSize.XL] / 2 - TEXT_PADDING_VALUE[ButtonSize.XL]
+  }
+};
+function getPaddingCSSFromSizeAndContents({
+  styleVariant,
+  text,
+  size
+}) {
+  const hasOnlyContent = isEmpty(text);
+
+  // NOTE: text 가 없는 경우 버튼은 정사각형이기에 padding 이 0
+  if (hasOnlyContent) {
+    return FoundationCSS`
+      padding: 0;
+    `;
+  }
+  const paddingVariant = [ButtonStyleVariant.Floating, ButtonStyleVariant.FloatingAlt].includes(styleVariant) ? 'floating' : 'default';
+  const paddingValue = BUTTON_HORIZONTAL_PADDING_VALUE[size][paddingVariant];
+  return FoundationCSS`
+    padding:
+      0
+      ${paddingValue}px
+      0
+      ${paddingValue}px;
+  `;
+}
+function defaultSemanticNames(colorVariant) {
+  if (colorVariant === ButtonColorVariant.Monochrome || colorVariant === ButtonColorVariant.MonochromeLight || colorVariant === ButtonColorVariant.MonochromeDark) {
+    throw new Error('unreached code');
+  }
+  return {
+    [ButtonStyleVariant.Primary]: {
+      color: 'bgtxt-absolute-white-dark',
+      backgroundColor: `bgtxt-${colorVariant}-normal`,
+      activeBackgroundColor: `bgtxt-${colorVariant}-dark`
+    },
+    [ButtonStyleVariant.Secondary]: {
+      color: `bgtxt-${colorVariant}-normal`,
+      backgroundColor: `bgtxt-${colorVariant}-lightest`,
+      activeBackgroundColor: `bgtxt-${colorVariant}-lighter`
+    },
+    [ButtonStyleVariant.Tertiary]: {
+      color: `bgtxt-${colorVariant}-normal`,
+      backgroundColor: 'transparent',
+      activeColor: `bgtxt-${colorVariant}-dark`,
+      activeBackgroundColor: `bgtxt-${colorVariant}-lightest`
+    },
+    [ButtonStyleVariant.Floating]: {
+      color: 'bgtxt-absolute-white-dark',
+      backgroundColor: `bgtxt-${colorVariant}-normal`,
+      activeBackgroundColor: `bgtxt-${colorVariant}-dark`
+    },
+    [ButtonStyleVariant.FloatingAlt]: {
+      color: 'bgtxt-absolute-white-dark',
+      backgroundColor: `bgtxt-${colorVariant}-normal`,
+      activeBackgroundColor: `bgtxt-${colorVariant}-dark`
+    }
+  };
+}
+const MONOCHROME_SEMANTIC_NAMES = {
+  [ButtonStyleVariant.Primary]: {
+    color: 'bgtxt-absolute-white-dark',
+    backgroundColor: 'bgtxt-absolute-black-lightest',
+    activeBackgroundColor: 'bgtxt-absolute-black-lighter'
+  },
+  [ButtonStyleVariant.Secondary]: {
+    color: 'txt-black-darkest',
+    backgroundColor: 'bg-black-lighter',
+    activeBackgroundColor: 'bg-black-light'
+  },
+  [ButtonStyleVariant.Tertiary]: {
+    color: 'txt-black-darkest',
+    backgroundColor: 'transparent',
+    activeBackgroundColor: 'bg-black-lightest'
+  },
+  [ButtonStyleVariant.Floating]: {
+    color: 'txt-black-darkest'
+  },
+  [ButtonStyleVariant.FloatingAlt]: {
+    color: 'txt-black-darkest'
+  }
+};
+const MONOCHROME_LIGHT_SEMANTIC_NAMES = {
+  [ButtonStyleVariant.Primary]: {
+    color: 'bgtxt-absolute-white-dark',
+    backgroundColor: 'bg-black-darker'
+  },
+  [ButtonStyleVariant.Secondary]: {
+    color: 'txt-black-darker',
+    backgroundColor: 'bg-black-lighter',
+    activeBackgroundColor: 'bg-black-light'
+  },
+  [ButtonStyleVariant.Tertiary]: {
+    color: 'txt-black-darker',
+    backgroundColor: 'transparent',
+    activeBackgroundColor: 'bg-black-lighter'
+  },
+  [ButtonStyleVariant.Floating]: {
+    color: 'txt-black-darker',
+    backgroundColor: 'bg-white-high'
+  },
+  [ButtonStyleVariant.FloatingAlt]: {
+    color: 'txt-black-darker',
+    backgroundColor: 'bg-white-high'
+  }
+};
+const MONOCHROME_DARK_SEMANTIC_NAMES = {
+  [ButtonStyleVariant.Primary]: {
+    color: 'bgtxt-absolute-white-dark',
+    backgroundColor: 'bg-grey-darkest'
+  },
+  [ButtonStyleVariant.Secondary]: {
+    color: 'txt-black-darkest',
+    backgroundColor: 'bg-black-lighter',
+    activeBackgroundColor: 'bg-black-light'
+  },
+  [ButtonStyleVariant.Tertiary]: {
+    color: 'txt-black-darkest',
+    backgroundColor: 'transparent',
+    activeBackgroundColor: 'bg-black-lighter'
+  },
+  [ButtonStyleVariant.Floating]: {
+    color: 'txt-black-darkest',
+    backgroundColor: 'bg-white-high'
+  },
+  [ButtonStyleVariant.FloatingAlt]: {
+    color: 'txt-black-darkest',
+    backgroundColor: 'bg-white-high'
+  }
+};
+function getColorCSS(semanticNames, styleVariant, disabled, active) {
+  const colorCSS = color => {
+    if (!color) {
+      return FoundationCSS``;
+    }
+    return FoundationCSS`
+      color: ${({
+      foundation
+    }) => foundation?.theme?.[color]};
+    `;
+  };
+  const backgroundColorCSS = backgroundColor => {
+    if (!backgroundColor) {
+      return FoundationCSS``;
+    }
+    if (backgroundColor === 'transparent') {
+      return FoundationCSS`
+        background-color: transparent;
+      `;
+    }
+    return FoundationCSS`
+      background-color: ${({
+      foundation
+    }) => foundation?.theme?.[backgroundColor]};
+    `;
+  };
+  const idleColorCSS = FoundationCSS`
+    ${colorCSS(semanticNames[styleVariant].color)}
+    ${backgroundColorCSS(semanticNames[styleVariant].backgroundColor)}
+  `;
+  const activeColorCSS = disabled ? FoundationCSS`` : FoundationCSS`
+    ${colorCSS(semanticNames[styleVariant].activeColor)}
+    ${backgroundColorCSS(semanticNames[styleVariant].activeBackgroundColor)}
+  `;
+  return FoundationCSS`
+    ${idleColorCSS};
+    ${active && activeColorCSS};
+
+    &:hover {
+      ${activeColorCSS};
+    }
+  `;
+}
+function getEffectCSSFromVariant(styleVariant, size) {
+  switch (styleVariant) {
+    case ButtonStyleVariant.Floating:
+      return FoundationCSS`
+        ${({
+        foundation
+      }) => foundation?.elevation?.ev2()};
+        /* NOTE: height 기반의 100% border-radius 를 사용하기 위해, foundation rounding 을 무시한 hack */
+        overflow: hidden;
+        border-radius: 1000px;
+
+        &:hover {
+          ${({
+        foundation
+      }) => foundation?.elevation?.ev3()};
+        }
+      `;
+    case ButtonStyleVariant.FloatingAlt:
+      return FoundationCSS`
+        ${({
+        foundation
+      }) => foundation?.elevation?.ev2()};
+        ${({
+        foundation
+      }) => foundation?.rounding?.round8};
+
+        &:hover {
+          ${({
+        foundation
+      }) => foundation?.elevation?.ev3()};
+        }
+      `;
+    case ButtonStyleVariant.Tertiary:
+    case ButtonStyleVariant.Secondary:
+    case ButtonStyleVariant.Primary:
+    default:
+      {
+        switch (size) {
+          case ButtonSize.XS:
+            return FoundationCSS`
+            ${({
+              foundation
+            }) => foundation?.rounding?.round6};
+          `;
+          case ButtonSize.L:
+            return FoundationCSS`
+            ${({
+              foundation
+            }) => foundation?.rounding?.round12};
+          `;
+          case ButtonSize.XL:
+            return FoundationCSS`
+            ${({
+              foundation
+            }) => foundation?.rounding?.round16};
+          `;
+          case ButtonSize.S:
+          case ButtonSize.M:
+          default:
+            return FoundationCSS`
+            ${({
+              foundation
+            }) => foundation?.rounding?.round8};
+          `;
+        }
+      }
+  }
+}
+function getCSSFromVariant({
+  colorVariant,
+  styleVariant,
+  size,
+  disabled,
+  active
+}) {
+  const effectCSS = getEffectCSSFromVariant(styleVariant, size);
+  const semanticNames = (() => {
+    switch (colorVariant) {
+      case ButtonColorVariant.Monochrome:
+        return MONOCHROME_SEMANTIC_NAMES;
+      case ButtonColorVariant.MonochromeLight:
+        return MONOCHROME_LIGHT_SEMANTIC_NAMES;
+      case ButtonColorVariant.MonochromeDark:
+        return MONOCHROME_DARK_SEMANTIC_NAMES;
+      default:
+        return defaultSemanticNames(colorVariant);
+    }
+  })();
+  const colorCSS = getColorCSS(semanticNames, styleVariant, disabled, active);
+  return FoundationCSS`
+    ${effectCSS}
+    ${colorCSS}
+  `;
+}
+const ButtonContents = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "Buttonstyled__ButtonContents",
+  componentId: "sc-1rgigip-0"
+})(["display:flex;align-items:center;justify-content:center;visibility:", ";", ""], ({
+  visible
+}) => visible ? 'visible' : 'hidden', ({
+  buttonSize
+}) => gap(BUTTON_CONTENT_GAP_VALUE[buttonSize]));
+const ButtonLoader = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "Buttonstyled__ButtonLoader",
+  componentId: "sc-1rgigip-1"
+})(["position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;"]);
+const ButtonWrapper = /*#__PURE__*/FoundationStyled.button.withConfig({
+  displayName: "Buttonstyled__ButtonWrapper",
+  componentId: "sc-1rgigip-2"
+})(["position:relative;box-sizing:border-box;cursor:", ";border:none;outline:none;opacity:", ";&:focus:not(:disabled){box-shadow:0 0 0 3px var(--bgtxt-cobalt-light);}&:focus:not(:focus-visible){box-shadow:none;}", ";", " ", " ", " ", ""], ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  disabled
+}) => disabled ? disabledOpacity : 1, ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS(['background-color', 'box-shadow']), getSizeCSSFromButtonSize, getPaddingCSSFromSizeAndContents, getCSSFromVariant, ({
+  interpolation
+}) => interpolation);
+const ContentText = /*#__PURE__*/FoundationStyled(Text).withConfig({
+  displayName: "Buttonstyled__ContentText",
+  componentId: "sc-1rgigip-3"
+})(["padding:0 ", "px;"], ({
+  buttonSize
+}) => TEXT_PADDING_VALUE[buttonSize]);
+
+export { BUTTON_HORIZONTAL_PADDING_VALUE, ButtonContents, ButtonLoader, ButtonWrapper, ContentText, TEXT_PADDING_VALUE };
+//# sourceMappingURL=Button.styled.mjs.map

package/dist/esm/components/Button/Button.styled.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styled.mjs","sources":["../../../../src/components/Button/Button.styled.ts"],"sourcesContent":["import {\n  type SemanticNames,\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport { gap } from '~/src/utils/styleUtils'\nimport { isEmpty } from '~/src/utils/typeUtils'\n\nimport { Text } from '~/src/components/Text'\n\nimport type ButtonProps from './Button.types'\nimport {\n  ButtonColorVariant,\n  ButtonSize,\n  ButtonStyleVariant,\n} from './Button.types'\n\n// NOTE: ButtonSize 에 따른 버튼의 min-width, height\nconst BUTTON_SIZE_VALUE = {\n  [ButtonSize.XS]: 20,\n  [ButtonSize.S]: 24,\n  [ButtonSize.M]: 36,\n  [ButtonSize.L]: 44,\n  [ButtonSize.XL]: 54,\n}\n\ninterface GetSizeCSSFromButtonSizeArgs {\n  size: ButtonSize\n}\n\nfunction getSizeCSSFromButtonSize({\n  size,\n}: GetSizeCSSFromButtonSizeArgs) {\n  return css`\n    min-width: ${BUTTON_SIZE_VALUE[size]}px;\n    height: ${BUTTON_SIZE_VALUE[size]}px;\n  `\n}\n\n// NOTE: ButtonSize에 따른 버튼 내 텍스트의 margin\nexport const TEXT_PADDING_VALUE: Record<ButtonSize, number> = {\n  [ButtonSize.XS]: 3,\n  [ButtonSize.S]: 3,\n  [ButtonSize.M]: 4,\n  [ButtonSize.L]: 4,\n  [ButtonSize.XL]: 4,\n}\n\nconst BUTTON_CONTENT_GAP_VALUE: Record<ButtonSize, number> = {\n  [ButtonSize.XS]: 0,\n  [ButtonSize.S]: 0,\n  [ButtonSize.M]: 2,\n  [ButtonSize.L]: 2,\n  [ButtonSize.XL]: 2,\n}\n\n// NOTE: 버튼의 padding 값을 결정하는 경우 4가지 중 위의 3가지 key\n// 1. 기본\n// 2. styleVariant 가 Floating 인 경우 - floating\n// 3. 버튼에 텍스트 없이 컨텐트만 있을 경우 => buttonSize 에 관계없이 padding 이 0 이라 이 경우만 따로 분기 처리\ntype ButtonPaddingVariantKey = 'default' | 'floating'\n\n// NOTE: floating 은 padding 이 버튼의 size value 의 절반에서 Text padding 값 만큼 빼줘야 스펙과 일치\nexport const BUTTON_HORIZONTAL_PADDING_VALUE: Record<ButtonSize, Record<ButtonPaddingVariantKey, number>> = {\n  [ButtonSize.XS]: {\n    default: 2,\n    floating: (BUTTON_SIZE_VALUE[ButtonSize.XS] / 2) - TEXT_PADDING_VALUE[ButtonSize.XS],\n  },\n  [ButtonSize.S]: {\n    default: 4,\n    floating: (BUTTON_SIZE_VALUE[ButtonSize.S] / 2) - TEXT_PADDING_VALUE[ButtonSize.S],\n  },\n  [ButtonSize.M]: {\n    default: 10,\n    floating: (BUTTON_SIZE_VALUE[ButtonSize.M] / 2) - TEXT_PADDING_VALUE[ButtonSize.M],\n  },\n  [ButtonSize.L]: {\n    default: 12,\n    floating: (BUTTON_SIZE_VALUE[ButtonSize.L] / 2) - TEXT_PADDING_VALUE[ButtonSize.L],\n  },\n  [ButtonSize.XL]: {\n    default: 20,\n    floating: (BUTTON_SIZE_VALUE[ButtonSize.XL] / 2) - TEXT_PADDING_VALUE[ButtonSize.XL],\n  },\n}\n\ninterface GetPaddingCSSFromSizeAndContentsArgs extends Pick<ButtonProps, 'text'>{\n  styleVariant: ButtonStyleVariant\n  size: ButtonSize\n}\n\nfunction getPaddingCSSFromSizeAndContents({\n  styleVariant,\n  text,\n  size,\n}: GetPaddingCSSFromSizeAndContentsArgs) {\n  const hasOnlyContent = isEmpty(text)\n\n  // NOTE: text 가 없는 경우 버튼은 정사각형이기에 padding 이 0\n  if (hasOnlyContent) {\n    return css`\n      padding: 0;\n    `\n  }\n\n  const paddingVariant = [ButtonStyleVariant.Floating, ButtonStyleVariant.FloatingAlt].includes(styleVariant)\n    ? 'floating'\n    : 'default'\n\n  const paddingValue = BUTTON_HORIZONTAL_PADDING_VALUE[size][paddingVariant]\n\n  return css`\n    padding:\n      0\n      ${paddingValue}px\n      0\n      ${paddingValue}px;\n  `\n}\n\ninterface ButtonSemanticNames {\n  color?: SemanticNames\n  activeColor?: SemanticNames\n  backgroundColor?: SemanticNames | 'transparent'\n  activeBackgroundColor?: SemanticNames | 'transparent'\n}\n\nfunction defaultSemanticNames(colorVariant: ButtonColorVariant): Record<ButtonStyleVariant, ButtonSemanticNames> {\n  if (colorVariant === ButtonColorVariant.Monochrome ||\n      colorVariant === ButtonColorVariant.MonochromeLight ||\n      colorVariant === ButtonColorVariant.MonochromeDark) {\n    throw new Error('unreached code')\n  }\n\n  return {\n    [ButtonStyleVariant.Primary]: {\n      color: 'bgtxt-absolute-white-dark',\n      backgroundColor: `bgtxt-${colorVariant}-normal` as const,\n      activeBackgroundColor: `bgtxt-${colorVariant}-dark` as const,\n    },\n\n    [ButtonStyleVariant.Secondary]: {\n      color: `bgtxt-${colorVariant}-normal` as const,\n      backgroundColor: `bgtxt-${colorVariant}-lightest` as const,\n      activeBackgroundColor: `bgtxt-${colorVariant}-lighter` as const,\n    },\n\n    [ButtonStyleVariant.Tertiary]: {\n      color: `bgtxt-${colorVariant}-normal` as const,\n      backgroundColor: 'transparent',\n      activeColor: `bgtxt-${colorVariant}-dark` as const,\n      activeBackgroundColor: `bgtxt-${colorVariant}-lightest` as const,\n    },\n\n    [ButtonStyleVariant.Floating]: {\n      color: 'bgtxt-absolute-white-dark',\n      backgroundColor: `bgtxt-${colorVariant}-normal` as const,\n      activeBackgroundColor: `bgtxt-${colorVariant}-dark` as const,\n    },\n\n    [ButtonStyleVariant.FloatingAlt]: {\n      color: 'bgtxt-absolute-white-dark',\n      backgroundColor: `bgtxt-${colorVariant}-normal` as const,\n      activeBackgroundColor: `bgtxt-${colorVariant}-dark` as const,\n    },\n  }\n}\n\nconst MONOCHROME_SEMANTIC_NAMES: Record<ButtonStyleVariant, ButtonSemanticNames> = {\n  [ButtonStyleVariant.Primary]: {\n    color: 'bgtxt-absolute-white-dark',\n    backgroundColor: 'bgtxt-absolute-black-lightest',\n    activeBackgroundColor: 'bgtxt-absolute-black-lighter',\n  },\n\n  [ButtonStyleVariant.Secondary]: {\n    color: 'txt-black-darkest',\n    backgroundColor: 'bg-black-lighter',\n    activeBackgroundColor: 'bg-black-light',\n  },\n\n  [ButtonStyleVariant.Tertiary]: {\n    color: 'txt-black-darkest',\n    backgroundColor: 'transparent',\n    activeBackgroundColor: 'bg-black-lightest',\n  },\n\n  [ButtonStyleVariant.Floating]: {\n    color: 'txt-black-darkest',\n  },\n\n  [ButtonStyleVariant.FloatingAlt]: {\n    color: 'txt-black-darkest',\n  },\n}\n\nconst MONOCHROME_LIGHT_SEMANTIC_NAMES: Record<ButtonStyleVariant, ButtonSemanticNames> = {\n  [ButtonStyleVariant.Primary]: {\n    color: 'bgtxt-absolute-white-dark',\n    backgroundColor: 'bg-black-darker',\n  },\n\n  [ButtonStyleVariant.Secondary]: {\n    color: 'txt-black-darker',\n    backgroundColor: 'bg-black-lighter',\n    activeBackgroundColor: 'bg-black-light',\n  },\n\n  [ButtonStyleVariant.Tertiary]: {\n    color: 'txt-black-darker',\n    backgroundColor: 'transparent',\n    activeBackgroundColor: 'bg-black-lighter',\n  },\n\n  [ButtonStyleVariant.Floating]: {\n    color: 'txt-black-darker',\n    backgroundColor: 'bg-white-high',\n  },\n\n  [ButtonStyleVariant.FloatingAlt]: {\n    color: 'txt-black-darker',\n    backgroundColor: 'bg-white-high',\n  },\n}\n\nconst MONOCHROME_DARK_SEMANTIC_NAMES: Record<ButtonStyleVariant, ButtonSemanticNames> = {\n  [ButtonStyleVariant.Primary]: {\n    color: 'bgtxt-absolute-white-dark',\n    backgroundColor: 'bg-grey-darkest',\n  },\n\n  [ButtonStyleVariant.Secondary]: {\n    color: 'txt-black-darkest',\n    backgroundColor: 'bg-black-lighter',\n    activeBackgroundColor: 'bg-black-light',\n  },\n\n  [ButtonStyleVariant.Tertiary]: {\n    color: 'txt-black-darkest',\n    backgroundColor: 'transparent',\n    activeBackgroundColor: 'bg-black-lighter',\n  },\n\n  [ButtonStyleVariant.Floating]: {\n    color: 'txt-black-darkest',\n    backgroundColor: 'bg-white-high',\n  },\n\n  [ButtonStyleVariant.FloatingAlt]: {\n    color: 'txt-black-darkest',\n    backgroundColor: 'bg-white-high',\n  },\n}\n\nfunction getColorCSS(\n  semanticNames: Record<ButtonStyleVariant, ButtonSemanticNames>,\n  styleVariant: NonNullable<ButtonProps['styleVariant']>,\n  disabled?: ButtonProps['disabled'],\n  active?: ButtonProps['active'],\n) {\n  const colorCSS = (color?: SemanticNames) => {\n    if (!color) { return css`` }\n\n    return css`\n      color: ${({ foundation }) => foundation?.theme?.[color]};\n    `\n  }\n\n  const backgroundColorCSS = (backgroundColor?: SemanticNames | 'transparent') => {\n    if (!backgroundColor) { return css`` }\n\n    if (backgroundColor === 'transparent') {\n      return css`\n        background-color: transparent;\n      `\n    }\n\n    return css`\n      background-color: ${({ foundation }) => foundation?.theme?.[backgroundColor]};\n    `\n  }\n\n  const idleColorCSS = css`\n    ${colorCSS(semanticNames[styleVariant].color)}\n    ${backgroundColorCSS(semanticNames[styleVariant].backgroundColor)}\n  `\n\n  const activeColorCSS = disabled ? css`` : css`\n    ${colorCSS(semanticNames[styleVariant].activeColor)}\n    ${backgroundColorCSS(semanticNames[styleVariant].activeBackgroundColor)}\n  `\n\n  return css`\n    ${idleColorCSS};\n    ${active && activeColorCSS};\n\n    &:hover {\n      ${activeColorCSS};\n    }\n  `\n}\n\nfunction getEffectCSSFromVariant(styleVariant: ButtonProps['styleVariant'], size: ButtonProps['size']) {\n  switch (styleVariant) {\n    case ButtonStyleVariant.Floating:\n      return css`\n        ${({ foundation }) => foundation?.elevation?.ev2()};\n        /* NOTE: height 기반의 100% border-radius 를 사용하기 위해, foundation rounding 을 무시한 hack */\n        overflow: hidden;\n        border-radius: 1000px;\n\n        &:hover {\n          ${({ foundation }) => foundation?.elevation?.ev3()};\n        }\n      `\n    case ButtonStyleVariant.FloatingAlt:\n      return css`\n        ${({ foundation }) => foundation?.elevation?.ev2()};\n        ${({ foundation }) => foundation?.rounding?.round8};\n\n        &:hover {\n          ${({ foundation }) => foundation?.elevation?.ev3()};\n        }\n      `\n    case ButtonStyleVariant.Tertiary:\n    case ButtonStyleVariant.Secondary:\n    case ButtonStyleVariant.Primary:\n    default: {\n      switch (size) {\n        case ButtonSize.XS:\n          return css`\n            ${({ foundation }) => foundation?.rounding?.round6};\n          `\n        case ButtonSize.L:\n          return css`\n            ${({ foundation }) => foundation?.rounding?.round12};\n          `\n        case ButtonSize.XL:\n          return css`\n            ${({ foundation }) => foundation?.rounding?.round16};\n          `\n        case ButtonSize.S:\n        case ButtonSize.M:\n        default:\n          return css`\n            ${({ foundation }) => foundation?.rounding?.round8};\n          `\n      }\n    }\n  }\n}\n\ninterface GetCSSFromVariantArgs extends Pick<ButtonProps, 'disabled' | 'active'> {\n  size: ButtonSize\n  styleVariant: ButtonStyleVariant\n  colorVariant: ButtonColorVariant\n}\n\nfunction getCSSFromVariant({\n  colorVariant,\n  styleVariant,\n  size,\n  disabled,\n  active,\n}: GetCSSFromVariantArgs) {\n  const effectCSS = getEffectCSSFromVariant(styleVariant, size)\n\n  const semanticNames = (() => {\n    switch (colorVariant) {\n      case ButtonColorVariant.Monochrome:\n        return MONOCHROME_SEMANTIC_NAMES\n      case ButtonColorVariant.MonochromeLight:\n        return MONOCHROME_LIGHT_SEMANTIC_NAMES\n      case ButtonColorVariant.MonochromeDark:\n        return MONOCHROME_DARK_SEMANTIC_NAMES\n      default:\n        return defaultSemanticNames(colorVariant)\n    }\n  })()\n\n  const colorCSS = getColorCSS(semanticNames, styleVariant, disabled, active)\n\n  return css`\n    ${effectCSS}\n    ${colorCSS}\n  `\n}\n\ninterface ButtonContentsProps {\n  visible?: boolean\n  buttonSize: ButtonSize\n}\n\nexport const ButtonContents = styled.div<ButtonContentsProps>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};\n  ${({ buttonSize }) => gap(BUTTON_CONTENT_GAP_VALUE[buttonSize])}\n`\n\nexport const ButtonLoader = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\ninterface ButtonWrapperProps extends Pick<\nButtonProps,\n'as' | 'interpolation' | 'disabled' | 'active' | 'text'\n>{\n  size: ButtonSize\n  styleVariant: ButtonStyleVariant\n  colorVariant: ButtonColorVariant\n}\n\nexport const ButtonWrapper = styled.button<ButtonWrapperProps>`\n  position: relative;\n  box-sizing: border-box;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n  border: none;\n  outline: none;\n  opacity: ${({ disabled }) => (disabled ? DisabledOpacity : 1)};\n\n  &:focus:not(:disabled) {\n    box-shadow: 0 0 0 3px var(--bgtxt-cobalt-light);\n  }\n\n  &:focus:not(:focus-visible) {\n    box-shadow: none;\n  }\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['background-color', 'box-shadow'])};\n\n  ${getSizeCSSFromButtonSize}\n  ${getPaddingCSSFromSizeAndContents}\n  ${getCSSFromVariant}\n\n  ${({ interpolation }) => interpolation}\n`\n\ninterface ContentTextProps {\n  buttonSize: ButtonSize\n}\n\nexport const ContentText = styled(Text)<ContentTextProps>`\n  padding: 0 ${({ buttonSize }) => TEXT_PADDING_VALUE[buttonSize]}px;\n`\n"],"names":["BUTTON_SIZE_VALUE","ButtonSize","XS","S","M","L","XL","getSizeCSSFromButtonSize","size","css","TEXT_PADDING_VALUE","BUTTON_CONTENT_GAP_VALUE","BUTTON_HORIZONTAL_PADDING_VALUE","default","floating","getPaddingCSSFromSizeAndContents","styleVariant","text","hasOnlyContent","isEmpty","paddingVariant","ButtonStyleVariant","Floating","FloatingAlt","includes","paddingValue","defaultSemanticNames","colorVariant","ButtonColorVariant","Monochrome","MonochromeLight","MonochromeDark","Error","Primary","color","backgroundColor","activeBackgroundColor","Secondary","Tertiary","activeColor","MONOCHROME_SEMANTIC_NAMES","MONOCHROME_LIGHT_SEMANTIC_NAMES","MONOCHROME_DARK_SEMANTIC_NAMES","getColorCSS","semanticNames","disabled","active","colorCSS","foundation","theme","backgroundColorCSS","idleColorCSS","activeColorCSS","getEffectCSSFromVariant","elevation","ev2","ev3","rounding","round8","round6","round12","round16","getCSSFromVariant","effectCSS","ButtonContents","styled","div","withConfig","displayName","componentId","visible","buttonSize","gap","ButtonLoader","ButtonWrapper","button","DisabledOpacity","transition","getTransitionsCSS","interpolation","ContentText","Text"],"mappings":"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"}