@channel.io/bezier-react 1.5.0 → 1.6.0

package/dist/cjs/components/Button/Button.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styled.js","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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"}

package/dist/cjs/components/Button/Button.types.js

@@ -0,0 +1,36 @@
+'use strict';
+
+let ButtonStyleVariant = /*#__PURE__*/function (ButtonStyleVariant) {
+  ButtonStyleVariant["Primary"] = "primary";
+  ButtonStyleVariant["Secondary"] = "secondary";
+  ButtonStyleVariant["Tertiary"] = "tertiary";
+  ButtonStyleVariant["Floating"] = "floating";
+  ButtonStyleVariant["FloatingAlt"] = "floating-alt";
+  return ButtonStyleVariant;
+}({});
+let ButtonColorVariant = /*#__PURE__*/function (ButtonColorVariant) {
+  ButtonColorVariant["Blue"] = "blue";
+  ButtonColorVariant["Red"] = "red";
+  ButtonColorVariant["Green"] = "green";
+  ButtonColorVariant["Cobalt"] = "cobalt";
+  ButtonColorVariant["Orange"] = "orange";
+  ButtonColorVariant["Pink"] = "pink";
+  ButtonColorVariant["Purple"] = "purple";
+  ButtonColorVariant["Monochrome"] = "monochrome";
+  ButtonColorVariant["MonochromeLight"] = "monochromeLight";
+  ButtonColorVariant["MonochromeDark"] = "monochromeDark";
+  return ButtonColorVariant;
+}({});
+let ButtonSize = /*#__PURE__*/function (ButtonSize) {
+  ButtonSize["XS"] = "XS";
+  ButtonSize["S"] = "S";
+  ButtonSize["M"] = "M";
+  ButtonSize["L"] = "L";
+  ButtonSize["XL"] = "XL";
+  return ButtonSize;
+}({});
+
+exports.ButtonColorVariant = ButtonColorVariant;
+exports.ButtonSize = ButtonSize;
+exports.ButtonStyleVariant = ButtonStyleVariant;
+//# sourceMappingURL=Button.types.js.map

package/dist/cjs/components/Button/Button.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.js","sources":["../../../../src/components/Button/Button.types.ts"],"sourcesContent":["import { type IconName } from '@channel.io/bezier-icons'\n\nimport {\n  type BezierComponentProps,\n  type DisableProps,\n  type SideContentProps,\n  type SizeProps,\n} from '~/src/types/ComponentProps'\n\nexport enum ButtonStyleVariant {\n  Primary = 'primary',\n  Secondary = 'secondary',\n  Tertiary = 'tertiary',\n  Floating = 'floating',\n  FloatingAlt = 'floating-alt',\n}\n\nexport enum ButtonColorVariant {\n  Blue = 'blue',\n  Red = 'red',\n  Green = 'green',\n  Cobalt = 'cobalt',\n  Orange = 'orange',\n  Pink = 'pink',\n  Purple = 'purple',\n  /**\n   * @deprecated use `ButtonColorVariant.MonochromeLight` or `ButtonColorVariant.MonochromeDark`\n   */\n  Monochrome = 'monochrome',\n  MonochromeLight = 'monochromeLight',\n  MonochromeDark = 'monochromeDark',\n}\n\nexport enum ButtonSize {\n  XS = 'XS',\n  S = 'S',\n  M = 'M',\n  L = 'L',\n  XL = 'XL',\n}\n\nexport type SideContent = IconName | React.ReactNode\n\nexport type MouseEventHandler = React.MouseEventHandler<HTMLButtonElement>\ntype FocusEventHandler = React.FocusEventHandler<HTMLButtonElement>\n\ninterface ButtonOptions {\n  /**\n   * `type` attribute of typical HTML button.\n   *\n   * You may want to set `type` to `submit` to the button\n   * which is used as a submit button in `<form>` component.\n   *\n   * @default 'button'\n   */\n  type?: HTMLButtonElement['type']\n\n  /**\n   * The text content in the button.\n   *\n   * Do not pass `text` prop if it is an icon-only button.\n   */\n  text?: string\n\n  /**\n   * If `loading` is true, spinner will be shown, replacing the content.\n   *\n   * @default false\n   */\n  loading?: boolean\n\n  /**\n   * If `active` is true, the button will be styled as if it is hovered.\n   *\n   * You may want to use this prop for a button which opens dropdown, etc.\n   *\n   * @default false\n   */\n  active?: boolean\n\n  /**\n   * The style variant.\n   *\n   * @default ButtonStyleVariant.Primary\n   */\n  styleVariant?: ButtonStyleVariant\n\n  /**\n   * The color variant.\n   *\n   * @default ButtonColorVariant.Blue\n   */\n  colorVariant?: ButtonColorVariant\n\n  /**\n   * The handler to be executed when the button is clicked.\n   */\n  onClick?: MouseEventHandler\n\n  /**\n   * The handler to be executed when the mouse enters the button.\n   */\n  onMouseEnter?: MouseEventHandler\n\n  /**\n   * The handler to be executed when the mouse leaves the button.\n   */\n  onMouseLeave?: MouseEventHandler\n\n  /**\n   * The handler to be executed when the button is unfocused.\n   */\n  onBlur?: FocusEventHandler\n}\n\nexport default interface ButtonProps extends\n  BezierComponentProps,\n  SizeProps<ButtonSize>,\n  DisableProps,\n  SideContentProps<SideContent, SideContent>,\n  React.HTMLAttributes<HTMLButtonElement>,\n  ButtonOptions {}\n"],"names":["ButtonStyleVariant","ButtonColorVariant","ButtonSize"],"mappings":";;AASYA,IAAAA,kBAAkB,0BAAlBA,kBAAkB,EAAA;EAAlBA,kBAAkB,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAlBA,kBAAkB,CAAA,WAAA,CAAA,GAAA,WAAA,CAAA;EAAlBA,kBAAkB,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAlBA,kBAAkB,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAlBA,kBAAkB,CAAA,aAAA,CAAA,GAAA,cAAA,CAAA;AAAA,EAAA,OAAlBA,kBAAkB,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAQlBC,IAAAA,kBAAkB,0BAAlBA,kBAAkB,EAAA;EAAlBA,kBAAkB,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;EAAlBA,kBAAkB,CAAA,KAAA,CAAA,GAAA,KAAA,CAAA;EAAlBA,kBAAkB,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;EAAlBA,kBAAkB,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;EAAlBA,kBAAkB,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;EAAlBA,kBAAkB,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;EAAlBA,kBAAkB,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;EAAlBA,kBAAkB,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAlBA,kBAAkB,CAAA,iBAAA,CAAA,GAAA,iBAAA,CAAA;EAAlBA,kBAAkB,CAAA,gBAAA,CAAA,GAAA,gBAAA,CAAA;AAAA,EAAA,OAAlBA,kBAAkB,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAgBlBC,IAAAA,UAAU,0BAAVA,UAAU,EAAA;EAAVA,UAAU,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA;EAAVA,UAAU,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAVA,UAAU,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAVA,UAAU,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAVA,UAAU,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA;AAAA,EAAA,OAAVA,UAAU,CAAA;AAAA,CAAA,CAAA,EAAA;;;;;;"}

package/dist/cjs/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var React = require('react');
+var AlphaStack = require('../AlphaStack/AlphaStack.js');
+
+const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup({
+  children,
+  justify = 'center',
+  withoutSpacing = false,
+  ...props
+}, forwardedRef) {
+  const spacing = withoutSpacing ? 0 : 6;
+  return /*#__PURE__*/React.createElement(AlphaStack.AlphaStack, Object.assign({
+    direction: "horizontal",
+    spacing: spacing,
+    justify: justify,
+    ref: forwardedRef,
+    role: "group"
+  }, props), children);
+});
+
+exports.ButtonGroup = ButtonGroup;
+//# sourceMappingURL=ButtonGroup.js.map

package/dist/cjs/components/ButtonGroup/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { AlphaStack } from '~/src/components/AlphaStack'\n\nimport type ButtonGroupProps from './ButtonGroup.types'\n\nexport const ButtonGroup = forwardRef(function ButtonGroup(\n  {\n    children,\n    justify = 'center',\n    withoutSpacing = false,\n    ...props\n  }: ButtonGroupProps,\n  forwardedRef: React.Ref<HTMLElement>,\n) {\n  const spacing = withoutSpacing ? 0 : 6\n\n  return (\n    <AlphaStack\n      direction=\"horizontal\"\n      spacing={spacing}\n      justify={justify}\n      ref={forwardedRef}\n      role=\"group\"\n      {...props}\n    >\n      { children }\n    </AlphaStack>\n  )\n})\n"],"names":["ButtonGroup","forwardRef","children","justify","withoutSpacing","props","forwardedRef","spacing","React","createElement","AlphaStack","Object","assign","direction","ref","role"],"mappings":";;;;;MAMaA,WAAW,gBAAGC,gBAAU,CAAC,SAASD,WAAWA,CACxD;EACEE,QAAQ;AACRC,EAAAA,OAAO,GAAG,QAAQ;AAClBC,EAAAA,cAAc,GAAG,KAAK;EACtB,GAAGC,KAAAA;AACa,CAAC,EACnBC,YAAoC,EACpC;AACA,EAAA,MAAMC,OAAO,GAAGH,cAAc,GAAG,CAAC,GAAG,CAAC,CAAA;EAEtC,oBACEI,KAAA,CAAAC,aAAA,CAACC,qBAAU,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACTC,IAAAA,SAAS,EAAC,YAAY;AACtBN,IAAAA,OAAO,EAAEA,OAAQ;AACjBJ,IAAAA,OAAO,EAAEA,OAAQ;AACjBW,IAAAA,GAAG,EAAER,YAAa;AAClBS,IAAAA,IAAI,EAAC,OAAA;GACDV,EAAAA,KAAK,CAEPH,EAAAA,QACQ,CAAC,CAAA;AAEjB,CAAC;;;;"}

package/dist/cjs/components/Divider/Divider.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index_module = require('../../node_modules/@radix-ui/react-separator/dist/index.module.js');
+var Divider_styled = require('./Divider.styled.js');
+
+const DIVIDER_TEST_ID = 'bezier-react-divider';
+const Divider = /*#__PURE__*/React.forwardRef(({
+  testId = DIVIDER_TEST_ID,
+  orientation = 'horizontal',
+  decorative,
+  withoutSideIndent = false,
+  withoutParallelIndent = false,
+  withoutIndent = false,
+  ...rest
+}, forwardedRef) => /*#__PURE__*/React.createElement(index_module.Root, {
+  asChild: true,
+  orientation: orientation,
+  decorative: decorative
+}, /*#__PURE__*/React.createElement(Divider_styled.Divider, Object.assign({
+  ref: forwardedRef,
+  "data-testid": testId,
+  orientation: orientation,
+  decorative: decorative,
+  withoutSideIndent: withoutSideIndent,
+  withoutParallelIndent: withoutParallelIndent,
+  withoutIndent: withoutIndent
+}, rest))));
+var Divider$1 = Divider;
+
+exports.DIVIDER_TEST_ID = DIVIDER_TEST_ID;
+exports.default = Divider$1;
+//# sourceMappingURL=Divider.js.map

package/dist/cjs/components/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["../../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\n\nimport type DividerProps from './Divider.types'\n\nimport * as Styled from './Divider.styled'\n\nexport const DIVIDER_TEST_ID = 'bezier-react-divider'\n\nconst Divider = forwardRef((\n  {\n    testId = DIVIDER_TEST_ID,\n    orientation = 'horizontal',\n    decorative,\n    withoutSideIndent = false,\n    withoutParallelIndent = false,\n    withoutIndent = false,\n    ...rest\n  }: DividerProps,\n  forwardedRef: React.Ref<HTMLElement>,\n) => (\n  <SeparatorPrimitive.Root\n    asChild\n    orientation={orientation}\n    decorative={decorative}\n  >\n    <Styled.Divider\n      ref={forwardedRef}\n      data-testid={testId}\n      orientation={orientation}\n      decorative={decorative}\n      withoutSideIndent={withoutSideIndent}\n      withoutParallelIndent={withoutParallelIndent}\n      withoutIndent={withoutIndent}\n      {...rest}\n    />\n  </SeparatorPrimitive.Root>\n))\n\nexport default Divider\n"],"names":["DIVIDER_TEST_ID","Divider","forwardRef","testId","orientation","decorative","withoutSideIndent","withoutParallelIndent","withoutIndent","rest","forwardedRef","React","createElement","SeparatorPrimitive","asChild","Styled","Object","assign","ref"],"mappings":";;;;;;;;AAQO,MAAMA,eAAe,GAAG,uBAAsB;AAErD,MAAMC,OAAO,gBAAGC,gBAAU,CAAC,CACzB;AACEC,EAAAA,MAAM,GAAGH,eAAe;AACxBI,EAAAA,WAAW,GAAG,YAAY;EAC1BC,UAAU;AACVC,EAAAA,iBAAiB,GAAG,KAAK;AACzBC,EAAAA,qBAAqB,GAAG,KAAK;AAC7BC,EAAAA,aAAa,GAAG,KAAK;EACrB,GAAGC,IAAAA;AACS,CAAC,EACfC,YAAoC,kBAEpCC,KAAA,CAAAC,aAAA,CAACC,iBAAuB,EAAA;EACtBC,OAAO,EAAA,IAAA;AACPV,EAAAA,WAAW,EAAEA,WAAY;AACzBC,EAAAA,UAAU,EAAEA,UAAAA;AAAW,CAEvBM,eAAAA,KAAA,CAAAC,aAAA,CAACG,sBAAc,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACbC,EAAAA,GAAG,EAAER,YAAa;AAClB,EAAA,aAAA,EAAaP,MAAO;AACpBC,EAAAA,WAAW,EAAEA,WAAY;AACzBC,EAAAA,UAAU,EAAEA,UAAW;AACvBC,EAAAA,iBAAiB,EAAEA,iBAAkB;AACrCC,EAAAA,qBAAqB,EAAEA,qBAAsB;AAC7CC,EAAAA,aAAa,EAAEA,aAAAA;AAAc,CAAA,EACzBC,IAAI,CACT,CACsB,CAC1B,CAAC,CAAA;AAEF,gBAAeR,OAAO;;;;;"}

package/dist/cjs/components/Divider/Divider.styled.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
+
+const DIVIDER_THICKNESS = 1;
+const DIVIDER_INDENT_SIZE = 6;
+const Divider = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Dividerstyled__Divider",
+  componentId: "sc-cu77pw-0"
+})(["", " background-color:", ";", " ", ""], ({
+  foundation
+}) => foundation?.rounding?.round1, ({
+  foundation
+}) => foundation?.theme?.['bdr-black-light'], ({
+  orientation,
+  withoutSideIndent,
+  withoutParallelIndent,
+  withoutIndent
+}) => {
+  switch (orientation) {
+    case 'horizontal':
+    default:
+      {
+        return FoundationStyledComponent.css`
+          width: ${withoutSideIndent || withoutIndent ? '100%' : `calc(100% - ${DIVIDER_INDENT_SIZE * 2}px)`};
+          height: ${DIVIDER_THICKNESS}px;
+
+          margin: ${DIVIDER_INDENT_SIZE}px;
+          ${withoutIndent && FoundationStyledComponent.css`
+            margin: 0;
+          `}
+          ${withoutSideIndent && FoundationStyledComponent.css`
+            margin-left: 0;
+            margin-right: 0;
+          `}
+          ${withoutParallelIndent && FoundationStyledComponent.css`
+            margin-top: 0;
+            margin-bottom: 0;
+          `}
+        `;
+      }
+    case 'vertical':
+      {
+        return FoundationStyledComponent.css`
+          width: ${DIVIDER_THICKNESS}px;
+          height: ${withoutSideIndent || withoutIndent ? '100%' : `calc(100% - ${DIVIDER_INDENT_SIZE * 2}px)`};
+
+          margin: ${DIVIDER_INDENT_SIZE}px;
+          ${withoutIndent && FoundationStyledComponent.css`
+            margin: 0;
+          `}
+          ${withoutSideIndent && FoundationStyledComponent.css`
+            margin-top: 0;
+            margin-bottom: 0;
+          `}
+          ${withoutParallelIndent && FoundationStyledComponent.css`
+            margin-left: 0;
+            margin-right: 0;
+          `}
+        `;
+      }
+  }
+}, ({
+  interpolation
+}) => interpolation);
+
+exports.Divider = Divider;
+//# sourceMappingURL=Divider.styled.js.map

package/dist/cjs/components/Divider/Divider.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.styled.js","sources":["../../../../src/components/Divider/Divider.styled.ts"],"sourcesContent":["import {\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport type DividerProps from './Divider.types'\n\nconst DIVIDER_THICKNESS = 1\nconst DIVIDER_INDENT_SIZE = 6\n\ninterface StyledDividerProps extends DividerProps {\n  orientation: NonNullable<DividerProps['orientation']>\n  withoutSideIndent: NonNullable<DividerProps['withoutSideIndent']>\n  withoutParallelIndent: NonNullable<DividerProps['withoutParallelIndent']>\n  withoutIndent: NonNullable<DividerProps['withoutIndent']>\n}\n\nexport const Divider = styled.div<StyledDividerProps>`\n  ${({ foundation }) => foundation?.rounding?.round1}\n  background-color: ${({ foundation }) => foundation?.theme?.['bdr-black-light']};\n\n  ${({ orientation, withoutSideIndent, withoutParallelIndent, withoutIndent }) => {\n    switch (orientation) {\n      case 'horizontal':\n      default: {\n        return css`\n          width: ${(withoutSideIndent || withoutIndent) ? '100%' : `calc(100% - ${DIVIDER_INDENT_SIZE * 2}px)`};\n          height: ${DIVIDER_THICKNESS}px;\n\n          margin: ${DIVIDER_INDENT_SIZE}px;\n          ${withoutIndent && css`\n            margin: 0;\n          `}\n          ${withoutSideIndent && css`\n            margin-left: 0;\n            margin-right: 0;\n          `}\n          ${withoutParallelIndent && css`\n            margin-top: 0;\n            margin-bottom: 0;\n          `}\n        `\n      }\n      case 'vertical': {\n        return css`\n          width: ${DIVIDER_THICKNESS}px;\n          height: ${(withoutSideIndent || withoutIndent) ? '100%' : `calc(100% - ${DIVIDER_INDENT_SIZE * 2}px)`};\n\n          margin: ${DIVIDER_INDENT_SIZE}px;\n          ${withoutIndent && css`\n            margin: 0;\n          `}\n          ${withoutSideIndent && css`\n            margin-top: 0;\n            margin-bottom: 0;\n          `}\n          ${withoutParallelIndent && css`\n            margin-left: 0;\n            margin-right: 0;\n          `}\n        `\n      }\n    }\n  }}\n\n  ${({ interpolation }) => interpolation}\n`\n"],"names":["DIVIDER_THICKNESS","DIVIDER_INDENT_SIZE","Divider","styled","div","withConfig","displayName","componentId","foundation","rounding","round1","theme","orientation","withoutSideIndent","withoutParallelIndent","withoutIndent","css","interpolation"],"mappings":";;;;AAOA,MAAMA,iBAAiB,GAAG,CAAC,CAAA;AAC3B,MAAMC,mBAAmB,GAAG,CAAC,CAAA;MAShBC,OAAO,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,oBAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAC7B,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,QAAQ,EAAEC,MAAM,EAC9B,CAAC;AAAEF,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEG,KAAK,GAAG,iBAAiB,CAAC,EAE5E,CAAC;EAAEC,WAAW;EAAEC,iBAAiB;EAAEC,qBAAqB;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAK;AAC9E,EAAA,QAAQH,WAAW;AACjB,IAAA,KAAK,YAAY,CAAA;AACjB,IAAA;AAAS,MAAA;AACP,QAAA,OAAOI,6BAAI,CAAA;AACnB,iBAAoBH,EAAAA,iBAAiB,IAAIE,aAAa,GAAI,MAAM,GAAI,CAAcd,YAAAA,EAAAA,mBAAmB,GAAG,CAAE,CAAK,GAAA,CAAA,CAAA;AAC/G,kBAAA,EAAoBD,iBAAkB,CAAA;AACtC;AACA,kBAAA,EAAoBC,mBAAoB,CAAA;AACxC,UAAYc,EAAAA,aAAa,IAAIC,6BAAI,CAAA;AACjC;AACA,UAAY,CAAA,CAAA;AACZ,UAAYH,EAAAA,iBAAiB,IAAIG,6BAAI,CAAA;AACrC;AACA;AACA,UAAY,CAAA,CAAA;AACZ,UAAYF,EAAAA,qBAAqB,IAAIE,6BAAI,CAAA;AACzC;AACA;AACA,UAAY,CAAA,CAAA;AACZ,QAAS,CAAA,CAAA;AACH,OAAA;AACA,IAAA,KAAK,UAAU;AAAE,MAAA;AACf,QAAA,OAAOA,6BAAI,CAAA;AACnB,iBAAA,EAAmBhB,iBAAkB,CAAA;AACrC,kBAAqBa,EAAAA,iBAAiB,IAAIE,aAAa,GAAI,MAAM,GAAI,CAAcd,YAAAA,EAAAA,mBAAmB,GAAG,CAAE,CAAK,GAAA,CAAA,CAAA;AAChH;AACA,kBAAA,EAAoBA,mBAAoB,CAAA;AACxC,UAAYc,EAAAA,aAAa,IAAIC,6BAAI,CAAA;AACjC;AACA,UAAY,CAAA,CAAA;AACZ,UAAYH,EAAAA,iBAAiB,IAAIG,6BAAI,CAAA;AACrC;AACA;AACA,UAAY,CAAA,CAAA;AACZ,UAAYF,EAAAA,qBAAqB,IAAIE,6BAAI,CAAA;AACzC;AACA;AACA,UAAY,CAAA,CAAA;AACZ,QAAS,CAAA,CAAA;AACH,OAAA;AACF,GAAA;AACF,CAAC,EAEC,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa;;;;"}

package/dist/cjs/components/Emoji/Emoji.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var functionUtils = require('../../utils/functionUtils.js');
+var Emoji_types = require('./Emoji.types.js');
+var Emoji_styled = require('./Emoji.styled.js');
+var Mixins = require('../../foundation/Mixins.js');
+
+const EMOJI_TEST_ID = 'bezier-react-emoji';
+function Emoji({
+  as,
+  style,
+  imageUrl,
+  className,
+  name,
+  interpolation,
+  size = Emoji_types.EmojiSize.Size24,
+  testId = EMOJI_TEST_ID,
+  onClick = functionUtils.noop
+}, forwardedRef) {
+  const mergedStyle = React.useMemo(() => ({
+    ...Mixins.backgroundImageVariable({
+      imageUrl
+    }),
+    ...style
+  }), [style, imageUrl]);
+  return /*#__PURE__*/React.createElement(Emoji_styled.Icon, {
+    as: as,
+    ref: forwardedRef,
+    "data-testid": testId,
+    role: "img",
+    "aria-label": name,
+    style: mergedStyle,
+    size: size,
+    className: className,
+    interpolation: interpolation,
+    imageUrl: imageUrl,
+    onClick: onClick
+  });
+}
+var Emoji$1 = /*#__PURE__*/React.forwardRef(Emoji);
+
+exports.EMOJI_TEST_ID = EMOJI_TEST_ID;
+exports.default = Emoji$1;
+//# sourceMappingURL=Emoji.js.map

package/dist/cjs/components/Emoji/Emoji.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.js","sources":["../../../../src/components/Emoji/Emoji.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useMemo,\n} from 'react'\n\nimport { backgroundImageVariable } from '~/src/foundation'\n\nimport { noop } from '~/src/utils/functionUtils'\n\nimport type EmojiProps from './Emoji.types'\nimport { EmojiSize } from './Emoji.types'\n\nimport { Icon } from './Emoji.styled'\n\nexport const EMOJI_TEST_ID = 'bezier-react-emoji'\n\nfunction Emoji(\n  {\n    as,\n    style,\n    imageUrl,\n    className,\n    name,\n    interpolation,\n    size = EmojiSize.Size24,\n    testId = EMOJI_TEST_ID,\n    onClick = noop,\n  }: EmojiProps,\n  forwardedRef: React.Ref<HTMLDivElement>,\n) {\n  const mergedStyle = useMemo(() => ({\n    ...backgroundImageVariable({ imageUrl }),\n    ...style,\n  }), [\n    style,\n    imageUrl,\n  ])\n\n  return (\n    <Icon\n      as={as}\n      ref={forwardedRef}\n      data-testid={testId}\n      role=\"img\"\n      aria-label={name}\n      style={mergedStyle}\n      size={size}\n      className={className}\n      interpolation={interpolation}\n      imageUrl={imageUrl}\n      onClick={onClick}\n    />\n  )\n}\n\nexport default forwardRef(Emoji)\n"],"names":["EMOJI_TEST_ID","Emoji","as","style","imageUrl","className","name","interpolation","size","EmojiSize","Size24","testId","onClick","noop","forwardedRef","mergedStyle","useMemo","backgroundImageVariable","React","createElement","Icon","ref","role","forwardRef"],"mappings":";;;;;;;;;;AAcO,MAAMA,aAAa,GAAG,qBAAoB;AAEjD,SAASC,KAAKA,CACZ;EACEC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,aAAa;EACbC,IAAI,GAAGC,qBAAS,CAACC,MAAM;AACvBC,EAAAA,MAAM,GAAGX,aAAa;AACtBY,EAAAA,OAAO,GAAGC,kBAAAA;AACA,CAAC,EACbC,YAAuC,EACvC;AACA,EAAA,MAAMC,WAAW,GAAGC,aAAO,CAAC,OAAO;AACjC,IAAA,GAAGC,8BAAuB,CAAC;AAAEb,MAAAA,QAAAA;AAAS,KAAC,CAAC;IACxC,GAAGD,KAAAA;AACL,GAAC,CAAC,EAAE,CACFA,KAAK,EACLC,QAAQ,CACT,CAAC,CAAA;AAEF,EAAA,oBACEc,KAAA,CAAAC,aAAA,CAACC,iBAAI,EAAA;AACHlB,IAAAA,EAAE,EAAEA,EAAG;AACPmB,IAAAA,GAAG,EAAEP,YAAa;AAClB,IAAA,aAAA,EAAaH,MAAO;AACpBW,IAAAA,IAAI,EAAC,KAAK;AACV,IAAA,YAAA,EAAYhB,IAAK;AACjBH,IAAAA,KAAK,EAAEY,WAAY;AACnBP,IAAAA,IAAI,EAAEA,IAAK;AACXH,IAAAA,SAAS,EAAEA,SAAU;AACrBE,IAAAA,aAAa,EAAEA,aAAc;AAC7BH,IAAAA,QAAQ,EAAEA,QAAS;AACnBQ,IAAAA,OAAO,EAAEA,OAAAA;AAAQ,GAClB,CAAC,CAAA;AAEN,CAAA;AAEA,cAAeW,aAAAA,gBAAU,CAACtB,KAAK,CAAC;;;;;"}

package/dist/cjs/components/Emoji/Emoji.styled.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var Mixins = require('../../foundation/Mixins.js');
+var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
+
+const Icon = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Emojistyled__Icon",
+  componentId: "sc-11xiczd-0"
+})(["position:relative;box-sizing:content-box;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:", "px;height:", "px;", " ", ""], ({
+  size
+}) => size, ({
+  size
+}) => size, ({
+  size
+}) => Mixins.centeredBackgroundImage(size), ({
+  interpolation
+}) => interpolation);
+
+exports.Icon = Icon;
+//# sourceMappingURL=Emoji.styled.js.map

package/dist/cjs/components/Emoji/Emoji.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.styled.js","sources":["../../../../src/components/Emoji/Emoji.styled.ts"],"sourcesContent":["import {\n  centeredBackgroundImage,\n  styled,\n} from '~/src/foundation'\n\nimport { type InterpolationProps } from '~/src/types/Foundation'\n\nimport { type EmojiSize } from './Emoji.types'\n\ninterface IconProps extends InterpolationProps {\n  size: EmojiSize\n  imageUrl: string\n}\n\nexport const Icon = styled.div<IconProps>`\n  position: relative;\n  box-sizing: content-box;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: ${({ size }) => size}px;\n  height: ${({ size }) => size}px;\n\n  ${({ size }) => centeredBackgroundImage<EmojiSize>(size)}\n\n  ${({ interpolation }) => interpolation}\n`\n"],"names":["Icon","styled","div","withConfig","displayName","componentId","size","centeredBackgroundImage","interpolation"],"mappings":";;;;;MAcaA,IAAI,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,mBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,sHAAA,EAAA,YAAA,EAAA,KAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAOnB,CAAC;AAAEC,EAAAA,IAAAA;AAAK,CAAC,KAAKA,IAAI,EACjB,CAAC;AAAEA,EAAAA,IAAAA;AAAK,CAAC,KAAKA,IAAI,EAE1B,CAAC;AAAEA,EAAAA,IAAAA;AAAK,CAAC,KAAKC,8BAAuB,CAAYD,IAAI,CAAC,EAEtD,CAAC;AAAEE,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa;;;;"}

package/dist/cjs/components/Emoji/Emoji.types.js

@@ -0,0 +1,19 @@
+'use strict';
+
+let EmojiSize = /*#__PURE__*/function (EmojiSize) {
+  EmojiSize[EmojiSize["Size16"] = 16] = "Size16";
+  EmojiSize[EmojiSize["Size20"] = 20] = "Size20";
+  EmojiSize[EmojiSize["Size24"] = 24] = "Size24";
+  EmojiSize[EmojiSize["Size30"] = 30] = "Size30";
+  EmojiSize[EmojiSize["Size36"] = 36] = "Size36";
+  EmojiSize[EmojiSize["Size42"] = 42] = "Size42";
+  EmojiSize[EmojiSize["Size48"] = 48] = "Size48";
+  EmojiSize[EmojiSize["Size60"] = 60] = "Size60";
+  EmojiSize[EmojiSize["Size72"] = 72] = "Size72";
+  EmojiSize[EmojiSize["Size90"] = 90] = "Size90";
+  EmojiSize[EmojiSize["Size120"] = 120] = "Size120";
+  return EmojiSize;
+}({});
+
+exports.EmojiSize = EmojiSize;
+//# sourceMappingURL=Emoji.types.js.map

package/dist/cjs/components/Emoji/Emoji.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.types.js","sources":["../../../../src/components/Emoji/Emoji.types.ts"],"sourcesContent":["import type {\n  BezierComponentProps,\n  SizeProps,\n} from '~/src/types/ComponentProps'\n\nexport enum EmojiSize {\n  Size16 = 16,\n  Size20 = 20,\n  Size24 = 24,\n  Size30 = 30,\n  Size36 = 36,\n  Size42 = 42,\n  Size48 = 48,\n  Size60 = 60,\n  Size72 = 72,\n  Size90 = 90,\n  Size120 = 120,\n}\n\ninterface EmojiOptions {\n  name: string\n  imageUrl: string\n  onClick?: React.MouseEventHandler\n}\n\nexport default interface EmojiProps extends\n  BezierComponentProps,\n  SizeProps<EmojiSize>,\n  EmojiOptions {}\n"],"names":["EmojiSize"],"mappings":";;AAKYA,IAAAA,SAAS,0BAATA,SAAS,EAAA;AAATA,EAAAA,SAAS,CAATA,SAAS,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAATA,EAAAA,SAAS,CAATA,SAAS,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAATA,EAAAA,SAAS,CAATA,SAAS,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAATA,EAAAA,SAAS,CAATA,SAAS,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAATA,EAAAA,SAAS,CAATA,SAAS,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAATA,EAAAA,SAAS,CAATA,SAAS,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAATA,EAAAA,SAAS,CAATA,SAAS,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAATA,EAAAA,SAAS,CAATA,SAAS,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAATA,EAAAA,SAAS,CAATA,SAAS,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAATA,EAAAA,SAAS,CAATA,SAAS,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAATA,EAAAA,SAAS,CAATA,SAAS,CAAA,SAAA,CAAA,GAAA,GAAA,CAAA,GAAA,SAAA,CAAA;AAAA,EAAA,OAATA,SAAS,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/cjs/components/Forms/Checkbox/Checkbox.js

@@ -0,0 +1,88 @@
+'use strict';
+
+var React = require('react');
+var bezierIcons = require('@channel.io/bezier-icons');
+var index_module = require('../../../node_modules/@radix-ui/react-checkbox/dist/index.module.js');
+var useId = require('../../../hooks/useId.js');
+var FormFieldSize = require('../FormFieldSize.js');
+var useFormFieldProps = require('../useFormFieldProps.js');
+var Checkbox_styled = require('./Checkbox.styled.js');
+var Icon_types = require('../../Icon/Icon.types.js');
+
+/* NOTE: Props are injected at runtime by `CheckboxPrimitive.Indicator`. */
+const CheckIcon = /*#__PURE__*/React.forwardRef(function CheckIcon(props, forwardedRef) {
+  // eslint-disable-next-line react/destructuring-assignment
+  const state = props['data-state'];
+  const isUnchecked = state === 'unchecked';
+  const isIndeterminate = state === 'indeterminate';
+  return /*#__PURE__*/React.createElement(Checkbox_styled.CheckIcon, Object.assign({
+    ref: forwardedRef,
+    source: !isIndeterminate ? bezierIcons.CheckBoldIcon : bezierIcons.HyphenBoldIcon,
+    size: Icon_types.IconSize.XS,
+    color: isUnchecked ? 'bg-black-dark' : 'bgtxt-absolute-white-dark'
+  }, props));
+});
+function CheckboxImpl({
+  children,
+  checked,
+  id: idProp,
+  ...rest
+}, forwardedRef) {
+  const {
+    id: formFieldId,
+    hasError,
+    ...formFieldProps
+  } = useFormFieldProps.default(rest);
+  const id = useId.default(idProp ?? formFieldId, 'bezier-checkbox');
+  const containerStyle = {
+    '--bezier-checkbox-height': children ? `${FormFieldSize.default.M}px` : 'auto'
+  };
+  return /*#__PURE__*/React.createElement(Checkbox_styled.Container, {
+    style: containerStyle,
+    "data-disabled": formFieldProps['aria-disabled']
+  }, /*#__PURE__*/React.createElement(Checkbox_styled.CheckboxPrimitiveRoot, Object.assign({
+    ref: forwardedRef,
+    id: id,
+    checked: checked,
+    "data-invalid": formFieldProps['aria-invalid']
+  }, formFieldProps), /*#__PURE__*/React.createElement(index_module.Indicator, {
+    asChild: true
+    /* NOTE: To allow the icon to be rendered even if unchecked. */,
+    forceMount: true
+  }, /*#__PURE__*/React.createElement(CheckIcon, null))), children && /*#__PURE__*/React.createElement(Checkbox_styled.Label, {
+    htmlFor: id
+  }, children));
+}
+
+/**
+ * `Checkbox` is a control that allows the user to toggle between checked and not checked.
+ * It can be used with labels or standalone.
+ *
+ * @example
+ *
+ * ```tsx
+ * const [checked, setChecked] = useState(false)
+ * // Controlled / With label
+ * <Checkbox
+ *   checked={checked}
+ *   onCheckedChange={setChecked}
+ * >
+ *   Label
+ * </Checkbox>
+ * // Controlled / Standalone
+ * <Checkbox
+ *   checked={checked}
+ *   onCheckedChange={setChecked}
+ * />
+ * // Uncontrolled
+ * <Checkbox
+ *   defaultChecked={true}
+ * >
+ *   Label
+ * </Checkbox>
+ * ```
+ */
+const Checkbox = /*#__PURE__*/React.forwardRef(CheckboxImpl);
+
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=Checkbox.js.map

package/dist/cjs/components/Forms/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport {\n  CheckBoldIcon,\n  HyphenBoldIcon,\n} from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\n\nimport useId from '~/src/hooks/useId'\n\nimport { FormFieldSize } from '~/src/components/Forms'\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\nimport { IconSize } from '~/src/components/Icon'\n\nimport {\n  type CheckboxProps,\n  type CheckedState,\n} from './Checkbox.types'\n\nimport * as Styled from './Checkbox.styled'\n\ntype CheckIconProps = {} | {\n  style: React.CSSProperties\n  'data-state': 'checked' | 'unchecked' | 'indeterminate'\n  'data-disabled': boolean | undefined\n}\n\n/* NOTE: Props are injected at runtime by `CheckboxPrimitive.Indicator`. */\nconst CheckIcon = forwardRef<SVGSVGElement, CheckIconProps>(function CheckIcon(\n  props,\n  forwardedRef,\n) {\n  // eslint-disable-next-line react/destructuring-assignment\n  const state = props['data-state']\n  const isUnchecked = state === 'unchecked'\n  const isIndeterminate = state === 'indeterminate'\n\n  return (\n    <Styled.CheckIcon\n      ref={forwardedRef}\n      source={!isIndeterminate ? CheckBoldIcon : HyphenBoldIcon}\n      size={IconSize.XS}\n      color={isUnchecked ? 'bg-black-dark' : 'bgtxt-absolute-white-dark'}\n      {...props}\n    />\n  )\n})\n\nfunction CheckboxImpl<Checked extends CheckedState>({\n  children,\n  checked,\n  id: idProp,\n  ...rest\n}: CheckboxProps<Checked>, forwardedRef: React.Ref<HTMLButtonElement>) {\n  const {\n    id: formFieldId,\n    hasError,\n    ...formFieldProps\n  } = useFormFieldProps(rest)\n\n  const id = useId(idProp ?? formFieldId, 'bezier-checkbox')\n\n  const containerStyle = {\n    '--bezier-checkbox-height': children ? `${FormFieldSize.M}px` : 'auto',\n  } as React.CSSProperties\n\n  return (\n    <Styled.Container\n      style={containerStyle}\n      data-disabled={formFieldProps['aria-disabled']}\n    >\n      <Styled.CheckboxPrimitiveRoot\n        ref={forwardedRef}\n        id={id}\n        checked={checked}\n        data-invalid={formFieldProps['aria-invalid']}\n        {...formFieldProps}\n      >\n        <CheckboxPrimitive.Indicator\n          asChild\n          /* NOTE: To allow the icon to be rendered even if unchecked. */\n          forceMount\n        >\n          <CheckIcon />\n        </CheckboxPrimitive.Indicator>\n      </Styled.CheckboxPrimitiveRoot>\n      { children && (\n        <Styled.Label htmlFor={id}>\n          { children }\n        </Styled.Label>\n      ) }\n    </Styled.Container>\n  )\n}\n\n/**\n * `Checkbox` is a control that allows the user to toggle between checked and not checked.\n * It can be used with labels or standalone.\n *\n * @example\n *\n * ```tsx\n * const [checked, setChecked] = useState(false)\n * // Controlled / With label\n * <Checkbox\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * >\n *   Label\n * </Checkbox>\n * // Controlled / Standalone\n * <Checkbox\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * />\n * // Uncontrolled\n * <Checkbox\n *   defaultChecked={true}\n * >\n *   Label\n * </Checkbox>\n * ```\n */\nexport const Checkbox = forwardRef(CheckboxImpl) as <Checked extends CheckedState>(\n  props: CheckboxProps<Checked> & { ref?: React.ForwardedRef<HTMLButtonElement> }\n) => ReturnType<typeof CheckboxImpl<Checked>>\n"],"names":["CheckIcon","forwardRef","props","forwardedRef","state","isUnchecked","isIndeterminate","React","createElement","Styled","Object","assign","ref","source","CheckBoldIcon","HyphenBoldIcon","size","IconSize","XS","color","CheckboxImpl","children","checked","id","idProp","rest","formFieldId","hasError","formFieldProps","useFormFieldProps","useId","containerStyle","FormFieldSize","M","style","CheckboxPrimitive","asChild","forceMount","htmlFor","Checkbox"],"mappings":";;;;;;;;;;;AA2BA;AACA,MAAMA,SAAS,gBAAGC,gBAAU,CAAgC,SAASD,SAASA,CAC5EE,KAAK,EACLC,YAAY,EACZ;AACA;AACA,EAAA,MAAMC,KAAK,GAAGF,KAAK,CAAC,YAAY,CAAC,CAAA;AACjC,EAAA,MAAMG,WAAW,GAAGD,KAAK,KAAK,WAAW,CAAA;AACzC,EAAA,MAAME,eAAe,GAAGF,KAAK,KAAK,eAAe,CAAA;EAEjD,oBACEG,KAAA,CAAAC,aAAA,CAACC,yBAAgB,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACfC,IAAAA,GAAG,EAAET,YAAa;AAClBU,IAAAA,MAAM,EAAE,CAACP,eAAe,GAAGQ,yBAAa,GAAGC,0BAAe;IAC1DC,IAAI,EAAEC,mBAAQ,CAACC,EAAG;AAClBC,IAAAA,KAAK,EAAEd,WAAW,GAAG,eAAe,GAAG,2BAAA;GACnCH,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,CAAC,CAAC,CAAA;AAEF,SAASkB,YAAYA,CAA+B;EAClDC,QAAQ;EACRC,OAAO;AACPC,EAAAA,EAAE,EAAEC,MAAM;EACV,GAAGC,IAAAA;AACmB,CAAC,EAAEtB,YAA0C,EAAE;EACrE,MAAM;AACJoB,IAAAA,EAAE,EAAEG,WAAW;IACfC,QAAQ;IACR,GAAGC,cAAAA;AACL,GAAC,GAAGC,yBAAiB,CAACJ,IAAI,CAAC,CAAA;EAE3B,MAAMF,EAAE,GAAGO,aAAK,CAACN,MAAM,IAAIE,WAAW,EAAE,iBAAiB,CAAC,CAAA;AAE1D,EAAA,MAAMK,cAAc,GAAG;IACrB,0BAA0B,EAAEV,QAAQ,GAAI,CAAA,EAAEW,qBAAa,CAACC,CAAE,IAAG,GAAG,MAAA;GAC1C,CAAA;AAExB,EAAA,oBACE1B,KAAA,CAAAC,aAAA,CAACC,yBAAgB,EAAA;AACfyB,IAAAA,KAAK,EAAEH,cAAe;IACtB,eAAeH,EAAAA,cAAc,CAAC,eAAe,CAAA;GAE7CrB,eAAAA,KAAA,CAAAC,aAAA,CAACC,qCAA4B,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAC3BC,IAAAA,GAAG,EAAET,YAAa;AAClBoB,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;IACjB,cAAcM,EAAAA,cAAc,CAAC,cAAc,CAAA;GACvCA,EAAAA,cAAc,gBAElBrB,KAAA,CAAAC,aAAA,CAAC2B,sBAA2B,EAAA;IAC1BC,OAAO,EAAA,IAAA;AACP;IACAC,UAAU,EAAA,IAAA;AAAA,GAAA,eAEV9B,KAAA,CAAAC,aAAA,CAACR,SAAS,EAAA,IAAE,CACe,CACD,CAAC,EAC7BqB,QAAQ,iBACRd,KAAA,CAAAC,aAAA,CAACC,qBAAY,EAAA;AAAC6B,IAAAA,OAAO,EAAEf,EAAAA;GACnBF,EAAAA,QACU,CAEA,CAAC,CAAA;AAEvB,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACakB,QAAQ,gBAAGtC,gBAAU,CAACmB,YAAY;;;;"}

package/dist/cjs/components/Forms/Checkbox/Checkbox.styled.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var index_module = require('../../../node_modules/@radix-ui/react-checkbox/dist/index.module.js');
+var DisabledOpacity = require('../../../constants/DisabledOpacity.js');
+var styleUtils = require('../../../utils/styleUtils.js');
+var mixins = require('../Inputs/mixins.js');
+var Icon = require('../../Icon/Icon.js');
+var FoundationStyledComponent = require('../../../foundation/FoundationStyledComponent.js');
+var Typography = require('../../../foundation/Typography.js');
+
+const CHECKBOX_SIZE = 18;
+const CHECKBOX_MARGIN = 1;
+const CheckIcon = /*#__PURE__*/FoundationStyledComponent.styled(Icon.Icon).withConfig({
+  displayName: "Checkboxstyled__CheckIcon",
+  componentId: "sc-9lbfgn-0"
+})(["transition:none;&[data-state='unchecked']{visibility:hidden;}"]);
+const backgroundFocusStyle = FoundationStyledComponent.css`
+  &:not([data-disabled]):not([data-state='unchecked']) {
+    background-color: var(--bgtxt-green-dark);
+  }
+`;
+const checkIconFocusStyle = FoundationStyledComponent.css`
+  &:not([data-disabled])[data-state='unchecked'] {
+    ${CheckIcon} {
+      visibility: visible;
+    }
+  }
+`;
+const focusStyle = FoundationStyledComponent.css`
+  ${backgroundFocusStyle}
+  ${checkIconFocusStyle}
+`;
+const CheckboxPrimitiveRoot = /*#__PURE__*/FoundationStyledComponent.styled(index_module.Root).withConfig({
+  displayName: "Checkboxstyled__CheckboxPrimitiveRoot",
+  componentId: "sc-9lbfgn-1"
+})(["all:unset;display:flex;align-items:center;justify-content:center;width:", "px;height:", "px;margin:", "px;background-color:var(--bg-white-normal);border-radius:7px;box-shadow:inset 0 0 0 2px var(--bdr-black-dark);&[data-disabled]{background-color:var(--bg-black-dark);box-shadow:none;}&[data-invalid]{", "}&[data-state='checked'],&[data-state='indeterminate']{background-color:var(--bgtxt-green-normal);&:not([data-invalid]){box-shadow:none;}}", " &&{&:focus-visible{", " ", "}}", ""], CHECKBOX_SIZE, CHECKBOX_SIZE, CHECKBOX_MARGIN, mixins.erroredInputWrapperStyle, styleUtils.touchableHover(focusStyle), checkIconFocusStyle, mixins.focusedInputWrapperStyle, ({
+  interpolation
+}) => interpolation);
+const Container = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Checkboxstyled__Container",
+  componentId: "sc-9lbfgn-2"
+})(["display:flex;align-items:center;width:fit-content;height:var(--bezier-checkbox-height);cursor:pointer;&[data-disabled]{cursor:not-allowed;opacity:", ";}"], DisabledOpacity.default);
+
+/**
+ * NOTE: When using the `Text` component in combination with the `as` prop,
+ * radix-ui lib does not bind the mouse-enter(hover) and click handler.
+ */
+const Label = /*#__PURE__*/FoundationStyledComponent.styled.label.withConfig({
+  displayName: "Checkboxstyled__Label",
+  componentId: "sc-9lbfgn-3"
+})(["", " display:flex;align-items:center;height:100%;padding-left:12px;color:var(--txt-black-darkest);cursor:inherit;"], Typography.Typography.Size14);
+
+exports.CheckIcon = CheckIcon;
+exports.CheckboxPrimitiveRoot = CheckboxPrimitiveRoot;
+exports.Container = Container;
+exports.Label = Label;
+//# sourceMappingURL=Checkbox.styled.js.map

package/dist/cjs/components/Forms/Checkbox/Checkbox.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.styled.js","sources":["../../../../../src/components/Forms/Checkbox/Checkbox.styled.ts"],"sourcesContent":["import * as CheckboxPrimitive from '@radix-ui/react-checkbox'\n\nimport {\n  Typography,\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport { touchableHover } from '~/src/utils/styleUtils'\n\nimport {\n  erroredInputWrapperStyle,\n  focusedInputWrapperStyle,\n} from '~/src/components/Forms/Inputs/mixins'\nimport { Icon } from '~/src/components/Icon'\n\nimport { type CheckboxProps } from './Checkbox.types'\n\nconst CHECKBOX_SIZE = 18\nconst CHECKBOX_MARGIN = 1\n\nexport const CheckIcon = styled(Icon)`\n  /* NOTE: Reset Icon's default transition style  */\n  transition: none;\n\n  &[data-state='unchecked'] {\n    visibility: hidden;\n  }\n`\n\nconst backgroundFocusStyle = css`\n  &:not([data-disabled]):not([data-state='unchecked']) {\n    background-color: var(--bgtxt-green-dark);\n  }\n`\n\nconst checkIconFocusStyle = css`\n  &:not([data-disabled])[data-state='unchecked'] {\n    ${CheckIcon} {\n      visibility: visible;\n    }\n  }\n`\n\nconst focusStyle = css`\n  ${backgroundFocusStyle}\n  ${checkIconFocusStyle}\n`\n\nexport const CheckboxPrimitiveRoot = styled(CheckboxPrimitive.Root)<CheckboxProps<any>>`\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${CHECKBOX_SIZE}px;\n  height: ${CHECKBOX_SIZE}px;\n  margin: ${CHECKBOX_MARGIN}px;\n  background-color: var(--bg-white-normal);\n  border-radius: 7px;\n  box-shadow: inset 0 0 0 2px var(--bdr-black-dark);\n\n  &[data-disabled] {\n    background-color: var(--bg-black-dark);\n    box-shadow: none;\n  }\n\n  &[data-invalid] {\n    ${erroredInputWrapperStyle}\n  }\n\n  &[data-state='checked'],\n  &[data-state='indeterminate'] {\n    background-color: var(--bgtxt-green-normal);\n\n    &:not([data-invalid]) {\n      box-shadow: none;\n    }\n  }\n\n  ${touchableHover(focusStyle)}\n\n  && {\n    &:focus-visible {\n      ${checkIconFocusStyle}\n      ${focusedInputWrapperStyle}\n    }\n  }\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const Container = styled.div`\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: var(--bezier-checkbox-height);\n  cursor: pointer;\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: ${DisabledOpacity};\n  }\n`\n\n/**\n * NOTE: When using the `Text` component in combination with the `as` prop,\n * radix-ui lib does not bind the mouse-enter(hover) and click handler.\n */\nexport const Label = styled.label`\n  ${Typography.Size14}\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding-left: 12px;\n  color: var(--txt-black-darkest);\n  cursor: inherit;\n`\n"],"names":["CHECKBOX_SIZE","CHECKBOX_MARGIN","CheckIcon","styled","Icon","withConfig","displayName","componentId","backgroundFocusStyle","css","checkIconFocusStyle","focusStyle","CheckboxPrimitiveRoot","CheckboxPrimitive","erroredInputWrapperStyle","touchableHover","focusedInputWrapperStyle","interpolation","Container","div","DisabledOpacity","Label","label","Typography","Size14"],"mappings":";;;;;;;;;;AAmBA,MAAMA,aAAa,GAAG,EAAE,CAAA;AACxB,MAAMC,eAAe,GAAG,CAAC,CAAA;AAElB,MAAMC,SAAS,gBAAGC,gCAAM,CAACC,SAAI,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,2BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAOpC,CAAA,CAAA,CAAA,+DAAA,CAAA,EAAA;AAED,MAAMC,oBAAoB,GAAGC,6BAAI,CAAA;AACjC;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAMC,mBAAmB,GAAGD,6BAAI,CAAA;AAChC;AACA,IAAA,EAAMP,SAAU,CAAA;AAChB;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAMS,UAAU,GAAGF,6BAAI,CAAA;AACvB,EAAA,EAAID,oBAAqB,CAAA;AACzB,EAAA,EAAIE,mBAAoB,CAAA;AACxB,CAAC,CAAA;AAEM,MAAME,qBAAqB,gBAAGT,gCAAM,CAACU,iBAAsB,CAAC,CAAAR,UAAA,CAAA;EAAAC,WAAA,EAAA,uCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,yEAAA,EAAA,YAAA,EAAA,YAAA,EAAA,wMAAA,EAAA,4IAAA,EAAA,sBAAA,EAAA,GAAA,EAAA,IAAA,EAAA,EAAA,CAAA,EAKxDP,aAAa,EACZA,aAAa,EACbC,eAAe,EAWrBa,+BAAwB,EAY1BC,yBAAc,CAACJ,UAAU,CAAC,EAItBD,mBAAmB,EACnBM,+BAAwB,EAI5B,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAEYC,SAAS,gBAAGf,gCAAM,CAACgB,GAAG,CAAAd,UAAA,CAAA;EAAAC,WAAA,EAAA,2BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oJAAA,EAAA,IAAA,CAAA,EASpBa,uBAAe,EAE7B;;AAED;AACA;AACA;AACA;MACaC,KAAK,gBAAGlB,gCAAM,CAACmB,KAAK,CAAAjB,UAAA,CAAA;EAAAC,WAAA,EAAA,uBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAC7BgB,CAAAA,CAAAA,CAAAA,EAAAA,EAAAA,+GAAAA,CAAAA,EAAAA,qBAAU,CAACC,MAAM;;;;;;;"}