@channel.io/bezier-react 1.11.1 → 1.13.0

package/dist/cjs/components/Banner/Banner.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var React = require('react');
+var bezierIcons = require('@channel.io/bezier-icons');
+var assertUtils = require('../../utils/assertUtils.js');
 var typeUtils = require('../../utils/typeUtils.js');
 var Button = require('../Button/Button.js');
 var Button_types = require('../Button/Button.types.js');
@@ -9,6 +11,7 @@ var Banner_const = require('./Banner.const.js');
 var Banner_types = require('./Banner.types.js');
 var Banner_styled = require('./Banner.styled.js');
 var Icon_types = require('../Icon/Icon.types.js');
+var utils = require('../LegacyIcon/utils.js');
 var StackItem = require('../Stack/StackItem/StackItem.js');
 var Typography = require('../../foundation/Typography.js');
 
@@ -54,6 +57,9 @@ const Banner = /*#__PURE__*/React.forwardRef(function Banner(props, forwardedRef
     onClickAction,
     testId = BANNER_TEST_ID
   } = props;
+  if (utils.isIconName(icon)) {
+    assertUtils.warn('Deprecation: IconName as a value for the icon property of Banner has been deprecated. Use the Icon of bezier-icons instead.');
+  }
   return /*#__PURE__*/React.createElement(Banner_styled.default.Stack, {
     ref: forwardedRef,
     "data-testid": testId,
@@ -62,7 +68,11 @@ const Banner = /*#__PURE__*/React.forwardRef(function Banner(props, forwardedRef
     variant: variant,
     spacing: 6,
     align: "start"
-  }, !typeUtils.isNil(icon) && /*#__PURE__*/React.createElement(Banner_styled.default.StackItem, null, /*#__PURE__*/React.createElement(Banner_styled.default.BannerIcon, {
+  }, !typeUtils.isNil(icon) && /*#__PURE__*/React.createElement(Banner_styled.default.StackItem, null, bezierIcons.isBezierIcon(icon) ? /*#__PURE__*/React.createElement(Banner_styled.default.BannerIcon, {
+    source: icon,
+    color: iconColor ?? Banner_const.DEFAULT_ICON_COLORS[variant],
+    size: Icon_types.IconSize.S
+  }) : /*#__PURE__*/React.createElement(Banner_styled.default.BannerLegacyIcon, {
     name: icon,
     color: iconColor ?? Banner_const.DEFAULT_ICON_COLORS[variant],
     size: Icon_types.IconSize.S

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { Typography } from '~/src/foundation'\n\nimport {\n  isNil,\n  isString,\n} from '~/src/utils/typeUtils'\n\nimport {\n  Button,\n  ButtonSize,\n  ButtonStyleVariant,\n} from '~/src/components/Button'\nimport { IconSize } from '~/src/components/Icon'\nimport { StackItem } from '~/src/components/Stack'\nimport { Text } from '~/src/components/Text'\n\nimport {\n  ACTION_BUTTON_COLOR_VARIANTS,\n  DEFAULT_ICON_COLORS,\n  TEXT_COLORS,\n} from './Banner.const'\nimport {\n  type BannerProps,\n  BannerVariant,\n  type RenderLinkFunc,\n} from './Banner.types'\n\nimport Styled from './Banner.styled'\n\nconst BANNER_TEST_ID = 'bezier-react-banner'\nexport const BANNER_LINK_TEST_ID = 'bezier-react-banner-link'\n\nconst externalLinkRenderer: RenderLinkFunc = ({\n  content,\n  linkTo,\n}) => (\n  <a\n    href={linkTo}\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    data-testid={BANNER_LINK_TEST_ID}\n  >\n    { content }\n  </a>\n)\n\nfunction Link({\n  variant = BannerVariant.Default,\n  hasLink = false,\n  linkText,\n  linkTo,\n  renderLink = externalLinkRenderer,\n}: BannerProps) {\n  if (!hasLink) { return null }\n\n  return renderLink({\n    content: (\n      <Styled.Link\n        typo={Typography.Size14}\n        color={TEXT_COLORS[variant]}\n        bold\n      >\n        { linkText }\n      </Styled.Link>\n    ),\n    linkTo,\n  })\n}\n\nexport const Banner = forwardRef(function Banner(\n  props: BannerProps,\n  forwardedRef: React.Ref<HTMLDivElement>,\n) {\n  const {\n    className,\n    interpolation,\n    variant = BannerVariant.Default,\n    icon,\n    iconColor,\n    content,\n    actionIcon,\n    onClickAction,\n    testId = BANNER_TEST_ID,\n  } = props\n\n  return (\n    <Styled.Stack\n      ref={forwardedRef}\n      data-testid={testId}\n      className={className}\n      interpolation={interpolation}\n      variant={variant}\n      spacing={6}\n      align=\"start\"\n    >\n      { !isNil(icon) && (\n        <Styled.StackItem>\n          <Styled.BannerIcon\n            name={icon}\n            color={iconColor ?? DEFAULT_ICON_COLORS[variant]}\n            size={IconSize.S}\n          />\n        </Styled.StackItem>\n      ) }\n\n      <StackItem\n        grow\n        shrink\n        weight={1}\n        align=\"center\"\n      >\n        <Styled.ContentWrapper variant={variant}>\n          { isString(content) ? (\n            <Text\n              typo={Typography.Size14}\n              color={TEXT_COLORS[variant]}\n            >\n              { content }\n              <Link {...props} />\n            </Text>\n          ) : content }\n        </Styled.ContentWrapper>\n      </StackItem>\n\n      { !isNil(actionIcon) && (\n        <Styled.StackItem>\n          <Button\n            size={ButtonSize.XS}\n            colorVariant={ACTION_BUTTON_COLOR_VARIANTS[variant]}\n            styleVariant={ButtonStyleVariant.Tertiary}\n            leftContent={actionIcon}\n            onClick={onClickAction}\n          />\n        </Styled.StackItem>\n      ) }\n    </Styled.Stack>\n  )\n})\n"],"names":["BANNER_TEST_ID","BANNER_LINK_TEST_ID","externalLinkRenderer","content","linkTo","React","createElement","href","target","rel","Link","variant","BannerVariant","Default","hasLink","linkText","renderLink","Styled","typo","Typography","Size14","color","TEXT_COLORS","bold","Banner","forwardRef","props","forwardedRef","className","interpolation","icon","iconColor","actionIcon","onClickAction","testId","Stack","ref","spacing","align","isNil","StackItem","BannerIcon","name","DEFAULT_ICON_COLORS","size","IconSize","S","grow","shrink","weight","ContentWrapper","isString","Text","Button","ButtonSize","XS","colorVariant","ACTION_BUTTON_COLOR_VARIANTS","styleVariant","ButtonStyleVariant","Tertiary","leftContent","onClick"],"mappings":"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"}
+{"version":3,"file":"Banner.js","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\n\nimport { Typography } from '~/src/foundation'\n\nimport { warn } from '~/src/utils/assertUtils'\nimport {\n  isNil,\n  isString,\n} from '~/src/utils/typeUtils'\n\nimport {\n  Button,\n  ButtonSize,\n  ButtonStyleVariant,\n} from '~/src/components/Button'\nimport { IconSize } from '~/src/components/Icon'\nimport { isIconName } from '~/src/components/LegacyIcon'\nimport { StackItem } from '~/src/components/Stack'\nimport { Text } from '~/src/components/Text'\n\nimport {\n  ACTION_BUTTON_COLOR_VARIANTS,\n  DEFAULT_ICON_COLORS,\n  TEXT_COLORS,\n} from './Banner.const'\nimport {\n  type BannerProps,\n  BannerVariant,\n  type RenderLinkFunc,\n} from './Banner.types'\n\nimport Styled from './Banner.styled'\n\nconst BANNER_TEST_ID = 'bezier-react-banner'\nexport const BANNER_LINK_TEST_ID = 'bezier-react-banner-link'\n\nconst externalLinkRenderer: RenderLinkFunc = ({\n  content,\n  linkTo,\n}) => (\n  <a\n    href={linkTo}\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    data-testid={BANNER_LINK_TEST_ID}\n  >\n    { content }\n  </a>\n)\n\nfunction Link({\n  variant = BannerVariant.Default,\n  hasLink = false,\n  linkText,\n  linkTo,\n  renderLink = externalLinkRenderer,\n}: BannerProps) {\n  if (!hasLink) { return null }\n\n  return renderLink({\n    content: (\n      <Styled.Link\n        typo={Typography.Size14}\n        color={TEXT_COLORS[variant]}\n        bold\n      >\n        { linkText }\n      </Styled.Link>\n    ),\n    linkTo,\n  })\n}\n\nexport const Banner = forwardRef(function Banner(\n  props: BannerProps,\n  forwardedRef: React.Ref<HTMLDivElement>,\n) {\n  const {\n    className,\n    interpolation,\n    variant = BannerVariant.Default,\n    icon,\n    iconColor,\n    content,\n    actionIcon,\n    onClickAction,\n    testId = BANNER_TEST_ID,\n  } = props\n\n  if (isIconName(icon)) {\n    warn('Deprecation: IconName as a value for the icon property of Banner has been deprecated. Use the Icon of bezier-icons instead.')\n  }\n\n  return (\n    <Styled.Stack\n      ref={forwardedRef}\n      data-testid={testId}\n      className={className}\n      interpolation={interpolation}\n      variant={variant}\n      spacing={6}\n      align=\"start\"\n    >\n      { !isNil(icon) && (\n        <Styled.StackItem>\n          { isBezierIcon(icon) ? (\n            <Styled.BannerIcon\n              source={icon}\n              color={iconColor ?? DEFAULT_ICON_COLORS[variant]}\n              size={IconSize.S}\n            />\n          ) : (\n            <Styled.BannerLegacyIcon\n              name={icon}\n              color={iconColor ?? DEFAULT_ICON_COLORS[variant]}\n              size={IconSize.S}\n            />\n          ) }\n        </Styled.StackItem>\n      ) }\n\n      <StackItem\n        grow\n        shrink\n        weight={1}\n        align=\"center\"\n      >\n        <Styled.ContentWrapper variant={variant}>\n          { isString(content) ? (\n            <Text\n              typo={Typography.Size14}\n              color={TEXT_COLORS[variant]}\n            >\n              { content }\n              <Link {...props} />\n            </Text>\n          ) : content }\n        </Styled.ContentWrapper>\n      </StackItem>\n\n      { !isNil(actionIcon) && (\n        <Styled.StackItem>\n          <Button\n            size={ButtonSize.XS}\n            colorVariant={ACTION_BUTTON_COLOR_VARIANTS[variant]}\n            styleVariant={ButtonStyleVariant.Tertiary}\n            leftContent={actionIcon}\n            onClick={onClickAction}\n          />\n        </Styled.StackItem>\n      ) }\n    </Styled.Stack>\n  )\n})\n"],"names":["BANNER_TEST_ID","BANNER_LINK_TEST_ID","externalLinkRenderer","content","linkTo","React","createElement","href","target","rel","Link","variant","BannerVariant","Default","hasLink","linkText","renderLink","Styled","typo","Typography","Size14","color","TEXT_COLORS","bold","Banner","forwardRef","props","forwardedRef","className","interpolation","icon","iconColor","actionIcon","onClickAction","testId","isIconName","warn","Stack","ref","spacing","align","isNil","StackItem","isBezierIcon","BannerIcon","source","DEFAULT_ICON_COLORS","size","IconSize","S","BannerLegacyIcon","name","grow","shrink","weight","ContentWrapper","isString","Text","Button","ButtonSize","XS","colorVariant","ACTION_BUTTON_COLOR_VARIANTS","styleVariant","ButtonStyleVariant","Tertiary","leftContent","onClick"],"mappings":"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"}

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

@@ -4,29 +4,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var Text = require('../Text/Text.js');
 var Banner_const = require('./Banner.const.js');
+var Icon = require('../Icon/Icon.js');
 var LegacyIcon = require('../LegacyIcon/LegacyIcon.js');
 var HStack = require('../Stack/HStack/HStack.js');
 var StackItem$1 = require('../Stack/StackItem/StackItem.js');
 var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
 
-const BannerIcon = /*#__PURE__*/FoundationStyledComponent.styled(LegacyIcon.default).withConfig({
+const BannerIcon = /*#__PURE__*/FoundationStyledComponent.styled(Icon.Icon).withConfig({
   displayName: "Bannerstyled__BannerIcon",
   componentId: "sc-19y8c5b-0"
 })([""]);
+const BannerLegacyIcon = /*#__PURE__*/FoundationStyledComponent.styled(LegacyIcon.default).withConfig({
+  displayName: "Bannerstyled__BannerLegacyIcon",
+  componentId: "sc-19y8c5b-1"
+})([""]);
 const ContentWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
   displayName: "Bannerstyled__ContentWrapper",
-  componentId: "sc-19y8c5b-1"
+  componentId: "sc-19y8c5b-2"
 })(["color:", ";"], ({
   foundation,
   variant
 }) => foundation?.theme?.[Banner_const.TEXT_COLORS[variant]]);
 const Link = /*#__PURE__*/FoundationStyledComponent.styled(Text.default).withConfig({
   displayName: "Bannerstyled__Link",
-  componentId: "sc-19y8c5b-2"
+  componentId: "sc-19y8c5b-3"
 })(["margin-left:2px;text-decoration:underline;cursor:pointer;"]);
 const Stack = /*#__PURE__*/FoundationStyledComponent.styled(HStack.HStack).withConfig({
   displayName: "Bannerstyled__Stack",
-  componentId: "sc-19y8c5b-3"
+  componentId: "sc-19y8c5b-4"
 })(["width:auto;min-width:200px;height:auto;padding:12px;background-color:", ";", " ", " & + &{margin-top:6px;}"], ({
   foundation,
   variant
@@ -37,10 +42,11 @@ const Stack = /*#__PURE__*/FoundationStyledComponent.styled(HStack.HStack).withC
 }) => Banner_const.ELEVATIONS[variant]);
 const StackItem = /*#__PURE__*/FoundationStyledComponent.styled(StackItem$1.StackItem).withConfig({
   displayName: "Bannerstyled__StackItem",
-  componentId: "sc-19y8c5b-4"
+  componentId: "sc-19y8c5b-5"
 })(["height:20px;"]);
 var Styled = {
   BannerIcon,
+  BannerLegacyIcon,
   ContentWrapper,
   Link,
   Stack,

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.styled.js","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,gCAAM,CAACC,kBAAU,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,gCAAM,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,wBAAW,CAACF,OAAO,CAAC,CAAC,CAChF,CAAA;AAED,MAAMG,IAAI,gBAAGX,gCAAM,CAACY,YAAI,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,gCAAM,CAACc,aAAM,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,8BAAiB,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,uBAAU,CAACV,OAAO,CAAC,CAKvC,CAAA;AAED,MAAMW,SAAS,gBAAGnB,gCAAM,CAACoB,qBAAa,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;;;;"}
+{"version":3,"file":"Banner.styled.js","sources":["../../../../src/components/Banner/Banner.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nimport type { VariantProps } from '~/src/types/ComponentProps'\n\nimport { Icon } from '~/src/components/Icon'\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(Icon)``\nconst BannerLegacyIcon = 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  BannerLegacyIcon,\n  ContentWrapper,\n  Link,\n  Stack,\n  StackItem,\n}\n"],"names":["BannerIcon","styled","Icon","withConfig","displayName","componentId","BannerLegacyIcon","LegacyIcon","ContentWrapper","div","foundation","variant","theme","TEXT_COLORS","Link","Text","Stack","HStack","BACKGROUND_COLORS","rounding","round12","ELEVATIONS","StackItem","BaseStackItem"],"mappings":";;;;;;;;;;;;AAqBA,MAAMA,UAAU,gBAAGC,gCAAM,CAACC,SAAI,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,0BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA;AACjC,MAAMC,gBAAgB,gBAAGL,gCAAM,CAACM,kBAAU,CAAC,CAAAJ,UAAA,CAAA;EAAAC,WAAA,EAAA,gCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA;AAE7C,MAAMG,cAAc,gBAAGP,gCAAM,CAACQ,GAAG,CAAAN,UAAA,CAAA;EAAAC,WAAA,EAAA,8BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,QAAA,EAAA,GAAA,CAAA,EACtB,CAAC;EAAEK,UAAU;AAAEC,EAAAA,OAAAA;AAAQ,CAAC,KAAKD,UAAU,EAAEE,KAAK,GAAGC,wBAAW,CAACF,OAAO,CAAC,CAAC,CAChF,CAAA;AAED,MAAMG,IAAI,gBAAGb,gCAAM,CAACc,YAAI,CAAC,CAAAZ,UAAA,CAAA;EAAAC,WAAA,EAAA,oBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAIxB,CAAA,CAAA,CAAA,2DAAA,CAAA,CAAA,CAAA;AAED,MAAMW,KAAK,gBAAGf,gCAAM,CAACgB,aAAM,CAAC,CAAAd,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;EAAEK,UAAU;AAAEC,EAAAA,OAAAA;AAAQ,CAAC,KAAKD,UAAU,EAAEE,KAAK,GAAGM,8BAAiB,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,uBAAU,CAACV,OAAO,CAAC,CAKvC,CAAA;AAED,MAAMW,SAAS,gBAAGrB,gCAAM,CAACsB,qBAAa,CAAC,CAAApB,UAAA,CAAA;EAAAC,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAEtC,CAAA,CAAA,CAAA,cAAA,CAAA,CAAA,CAAA;AAED,aAAe;EACbL,UAAU;EACVM,gBAAgB;EAChBE,cAAc;EACdM,IAAI;EACJE,KAAK;AACLM,EAAAA,SAAAA;AACF,CAAC;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.types.js","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;;;;"}
+{"version":3,"file":"Banner.types.js","sources":["../../../../src/components/Banner/Banner.types.ts"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport {\n  type BezierIcon,\n  type IconName,\n} 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: BezierIcon | 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  actionIcon?: BezierIcon | 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":";;AAgBYA,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/cjs/components/Button/Button.js

@@ -1,7 +1,9 @@
 'use strict';
 
 var React = require('react');
+var bezierIcons = require('@channel.io/bezier-icons');
 var arrayUtils = require('../../utils/arrayUtils.js');
+var assertUtils = require('../../utils/assertUtils.js');
 var functionUtils = require('../../utils/functionUtils.js');
 var typeUtils = require('../../utils/typeUtils.js');
 var Spinner = require('../Spinner/Spinner.js');
@@ -11,6 +13,7 @@ var Button_styled = require('./Button.styled.js');
 var Icon_types = require('../Icon/Icon.types.js');
 var utils = require('../LegacyIcon/utils.js');
 var LegacyIcon = require('../LegacyIcon/LegacyIcon.js');
+var Icon = require('../Icon/Icon.js');
 var Typography = require('../../foundation/Typography.js');
 
 const BUTTON_TEST_ID = 'bezier-react-button';
@@ -114,12 +117,20 @@ const Button = /*#__PURE__*/React.forwardRef(function Button({
   }, [onClick, disabled]);
   const renderSideContent = React.useCallback(content => {
     if (utils.isIconName(content)) {
+      assertUtils.warn('Deprecation: IconName as a value for the leftContent property of a Button has been deprecated. Use the Icon of bezier-icons instead.');
       return /*#__PURE__*/React.createElement(LegacyIcon.default, {
         name: content,
         size: iconSize,
         color: overridedIconAndSpinnerColor
       });
     }
+    if (bezierIcons.isBezierIcon(content)) {
+      return /*#__PURE__*/React.createElement(Icon.Icon, {
+        source: content,
+        size: iconSize,
+        color: overridedIconAndSpinnerColor
+      });
+    }
     return content;
   }, [iconSize, overridedIconAndSpinnerColor]);
   return /*#__PURE__*/React.createElement(Button_styled.ButtonWrapper, Object.assign({

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","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":";;;;;;;;;;;;;;;AAuCO,MAAMA,cAAc,GAAG,sBAAqB;AAC5C,MAAMC,4BAA4B,GAAG,oCAAmC;AACxE,MAAMC,mBAAmB,GAAG,2BAA0B;AAI7D,SAASC,QAAQA,CAAC,GAAG,CAACC,YAAY,EAAEC,YAAY,EAAEC,IAAI,CAAuD,EAAgB;AAC3H,EAAA,OAAQ,GAAEF,YAAa,CAAA,CAAA,EAAGC,YAAa,CAAA,CAAA,EAAGC,IAAK,CAAC,CAAA,CAAA;AAClD,CAAA;AAEA,SAASC,YAAYA,CACnBC,MAAiD,EACjDC,MAAiD,EACjDC,KAAgC,EACf;EACjB,SAASC,OAAOA,CAAIC,KAAc,EAAO;IACvC,OAAOC,iBAAO,CAACD,KAAK,CAAC,GAAGA,KAAK,GAAG,CAACA,KAAK,CAAC,CAAA;AACzC,GAAA;AAEA,EAAA,OAAOE,sBAAW,CAChBH,OAAO,CAACH,MAAM,CAAC,CAACO,GAAG,CAAEC,KAAK,IACxBL,OAAO,CAACF,MAAM,CAAC,CAACM,GAAG,CAAEE,KAAK,IACxBN,OAAO,CAACD,KAAK,CAAC,CAACK,GAAG,CAAET,IAAI,IAAKH,QAAQ,CAACa,KAAK,EAAEC,KAAK,EAAEX,IAAI,CAAC,CAAC,CAAC,CACjE,CAAC,CAAA;AACH,CAAA;AAEA,MAAMY,6BAAwE,GAAG;AAC/E,EAAA,GAAGC,MAAM,CAACC,WAAW,CACnBb,YAAY,CACVc,+BAAkB,CAACC,UAAU,EAC7B,CAACC,+BAAkB,CAACC,SAAS,EAAED,+BAAkB,CAACE,QAAQ,CAAC,EAC3D,CAACC,uBAAU,CAACC,CAAC,EAAED,uBAAU,CAACE,EAAE,CAC9B,CAAC,CACEb,GAAG,CAAEc,GAAG,IAAK,CAACA,GAAG,EAAE,kBAAkB,CAAC,CAC3C,CAAA;AACF,CAAC,CAAA;AAED,MAAMC,yCAAoF,GAAG;EAC3F,GAAGX,MAAM,CAACC,WAAW,CACnBb,YAAY,CACVc,+BAAkB,CAACC,UAAU,EAC7B,CAACC,+BAAkB,CAACC,SAAS,EAAED,+BAAkB,CAACE,QAAQ,CAAC,EAC3D,CAACC,uBAAU,CAACK,EAAE,EAAEL,uBAAU,CAACM,CAAC,EAAEN,uBAAU,CAACO,CAAC,CAC5C,CAAC,CACElB,GAAG,CAAEc,GAAG,IAAK,CAACA,GAAG,EAAE,kBAAkB,CAAC,CAC3C,CAAC;AACD,EAAA,GAAGV,MAAM,CAACC,WAAW,CACnBb,YAAY,CACVc,+BAAkB,CAACC,UAAU,EAC7B,CAACC,+BAAkB,CAACC,SAAS,EAAED,+BAAkB,CAACE,QAAQ,CAAC,EAC3D,CAACC,uBAAU,CAACC,CAAC,EAAED,uBAAU,CAACE,EAAE,CAC9B,CAAC,CACEb,GAAG,CAAEc,GAAG,IAAK,CAACA,GAAG,EAAE,gBAAgB,CAAC,CACzC,CAAC;AACD,EAAA,GAAGV,MAAM,CAACC,WAAW,CACnBb,YAAY,CACVc,+BAAkB,CAACa,eAAe,EAClC,CAACX,+BAAkB,CAACC,SAAS,EAAED,+BAAkB,CAACE,QAAQ,EAAEF,+BAAkB,CAACY,QAAQ,CAAC,EACxFhB,MAAM,CAACiB,MAAM,CAACV,uBAAU,CAC1B,CAAC,CACEX,GAAG,CAAEc,GAAG,IAAK,CAACA,GAAG,EAAE,gBAAgB,CAAC,CACzC,CAAC;AACD,EAAA,GAAGV,MAAM,CAACC,WAAW,CACnBb,YAAY,CACVc,+BAAkB,CAACgB,cAAc,EACjC,CAACd,+BAAkB,CAACC,SAAS,EAAED,+BAAkB,CAACE,QAAQ,EAAEF,+BAAkB,CAACY,QAAQ,CAAC,EACxFhB,MAAM,CAACiB,MAAM,CAACV,uBAAU,CAC1B,CAAC,CACEX,GAAG,CAAEc,GAAG,IAAK,CAACA,GAAG,EAAE,kBAAkB,CAAC,CAC3C,CAAA;AACF,CAAC,CAAA;MAEYS,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CAC9C;EACEE,EAAE;EACFC,SAAS;EACTxB,KAAK;EACLyB,aAAa;AACbC,EAAAA,MAAM,GAAG3C,cAAc;AACvB4C,EAAAA,IAAI,GAAG,QAAQ;EACfC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,OAAO,GAAG,KAAK;AACfC,EAAAA,MAAM,GAAG,KAAK;EACd1C,IAAI,GAAGoB,uBAAU,CAACO,CAAC;EACnB5B,YAAY,GAAGkB,+BAAkB,CAAC0B,OAAO;EACzC7C,YAAY,GAAGiB,+BAAkB,CAAC6B,IAAI;EACtCC,WAAW;EACXC,YAAY;AACZC,EAAAA,OAAO,GAAGC,kBAAI;AACdC,EAAAA,YAAY,GAAGD,kBAAI;AACnBE,EAAAA,YAAY,GAAGF,kBAAI;AACnBG,EAAAA,MAAM,GAAGH,kBAAI;EACb,GAAGI,IAAAA;AACQ,CAAC,EACdC,YAAoC,EACpC;EACA,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;AAEjD,EAAA,MAAMC,UAAU,GAAGC,aAAO,CAAC,MAAM;AAC/B,IAAA,QAAQ1D,IAAI;MACV,KAAKoB,uBAAU,CAACE,EAAE,CAAA;MAClB,KAAKF,uBAAU,CAACC,CAAC;QACf,OAAOsC,qBAAU,CAACC,MAAM,CAAA;MAC1B,KAAKxC,uBAAU,CAACM,CAAC;QACf,OAAOiC,qBAAU,CAACE,MAAM,CAAA;MAC1B,KAAKzC,uBAAU,CAACK,EAAE;QAChB,OAAOkC,qBAAU,CAACG,MAAM,CAAA;MAC1B,KAAK1C,uBAAU,CAACO,CAAC,CAAA;AACjB,MAAA;QACE,OAAOgC,qBAAU,CAACI,MAAM,CAAA;AAC5B,KAAA;AACF,GAAC,EAAE,CAAC/D,IAAI,CAAC,CAAC,CAAA;AAEV,EAAA,MAAMgE,iBAAiB,GAAGN,aAAO,CAAC,MAAM;AACtC,IAAA,QAAQ1D,IAAI;MACV,KAAKoB,uBAAU,CAACC,CAAC,CAAA;MACjB,KAAKD,uBAAU,CAACE,EAAE;QAChB,OAAO2C,yBAAW,CAAC3C,EAAE,CAAA;MACvB,KAAKF,uBAAU,CAACK,EAAE,CAAA;MAClB,KAAKL,uBAAU,CAACM,CAAC,CAAA;MACjB,KAAKN,uBAAU,CAACO,CAAC,CAAA;AACjB,MAAA;QACE,OAAOsC,yBAAW,CAAC5C,CAAC,CAAA;AACxB,KAAA;AACF,GAAC,EAAE,CAACrB,IAAI,CAAC,CAAC,CAAA;AAEV,EAAA,MAAMkE,QAAQ,GAAGR,aAAO,CAAC,MAAM;AAC7B,IAAA,QAAQ1D,IAAI;MACV,KAAKoB,uBAAU,CAACE,EAAE,CAAA;MAClB,KAAKF,uBAAU,CAACC,CAAC;QACf,OAAO8C,mBAAQ,CAAC7C,EAAE,CAAA;MACpB,KAAKF,uBAAU,CAACK,EAAE;QAChB,OAAO0C,mBAAQ,CAACC,MAAM,CAAA;MACxB,KAAKhD,uBAAU,CAACO,CAAC,CAAA;MACjB,KAAKP,uBAAU,CAACM,CAAC,CAAA;AACjB,MAAA;QACE,OAAOyC,mBAAQ,CAAC9C,CAAC,CAAA;AACrB,KAAA;AACF,GAAC,EAAE,CAACrB,IAAI,CAAC,CAAC,CAAA;AAEV,EAAA,MAAMqE,kBAAkB,GAAGX,aAAO,CAAC,MAChChB,MAAM,IAAIY,SAAS,GAChBgB,SAAS,GACT1D,6BAA6B,CAACf,QAAQ,CAACC,YAAY,EAAEC,YAAY,EAAEC,IAAI,CAAC,CAC7E,EAAE,CACDF,YAAY,EACZC,YAAY,EACZC,IAAI,EACJ0C,MAAM,EACNY,SAAS,CACV,CAAC,CAAA;AAEF,EAAA,MAAMiB,4BAA4B,GAAGb,aAAO,CAAC,MAC1ChB,MAAM,IAAIY,SAAS,GAChBgB,SAAS,GACT9C,yCAAyC,CAAC3B,QAAQ,CAACC,YAAY,EAAEC,YAAY,EAAEC,IAAI,CAAC,CACzF,EAAE,CACDF,YAAY,EACZC,YAAY,EACZC,IAAI,EACJ0C,MAAM,EACNY,SAAS,CACV,CAAC,CAAA;AAEF,EAAA,MAAMkB,gBAAgB,GAAGC,iBAAW,CAAqBC,KAAK,IAAK;IACjEnB,YAAY,CAAC,IAAI,CAAC,CAAA;IAClBN,YAAY,CAACyB,KAAK,CAAC,CAAA;AACrB,GAAC,EAAE,CAACzB,YAAY,CAAC,CAAC,CAAA;AAElB,EAAA,MAAM0B,gBAAgB,GAAGF,iBAAW,CAAqBC,KAAK,IAAK;IACjEnB,YAAY,CAAC,KAAK,CAAC,CAAA;IACnBL,YAAY,CAACwB,KAAK,CAAC,CAAA;AACrB,GAAC,EAAE,CAACxB,YAAY,CAAC,CAAC,CAAA;AAElB,EAAA,MAAM0B,WAAW,GAAGH,iBAAW,CAAqBC,KAAK,IAAK;IAC5D,IAAI,CAAClC,QAAQ,EAAE;MAAEO,OAAO,CAAC2B,KAAK,CAAC,CAAA;AAAC,KAAA;AAChC,IAAA,OAAO,IAAI,CAAA;AACb,GAAC,EAAE,CACD3B,OAAO,EACPP,QAAQ,CACT,CAAC,CAAA;AAEF,EAAA,MAAMqC,iBAAiB,GAAGJ,iBAAW,CAAEK,OAAqB,IAAK;AAC/D,IAAA,IAAIC,gBAAU,CAACD,OAAO,CAAC,EAAE;AACvB,MAAA,oBACEE,KAAA,CAAAC,aAAA,CAACC,kBAAU,EAAA;AACTC,QAAAA,IAAI,EAAEL,OAAQ;AACd9E,QAAAA,IAAI,EAAEkE,QAAS;AACfxD,QAAAA,KAAK,EAAE6D,4BAAAA;AAA6B,OACrC,CAAC,CAAA;AAEN,KAAA;AAEA,IAAA,OAAOO,OAAO,CAAA;AAChB,GAAC,EAAE,CACDZ,QAAQ,EACRK,4BAA4B,CAC7B,CAAC,CAAA;EAEF,oBACES,KAAA,CAAAC,aAAA,CAACG,2BAAoB,EAAAvE,MAAA,CAAAwE,MAAA,CAAA;AACnBnD,IAAAA,EAAE,EAAEA,EAAG;AACPI,IAAAA,IAAI,EAAEA,IAAK;AACX3B,IAAAA,KAAK,EAAEA,KAAM;AACbwB,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BkD,IAAAA,GAAG,EAAEjC,YAAa;AAClBrD,IAAAA,IAAI,EAAEA,IAAK;AACXwC,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,MAAM,EAAEA,MAAO;AACf3C,IAAAA,YAAY,EAAEA,YAAa;AAC3BD,IAAAA,YAAY,EAAEA,YAAa;AAC3ByC,IAAAA,IAAI,EAAEA,IAAK;AACX,IAAA,aAAA,EAAaF,MAAO;AACpB,IAAA,gBAAA,EAAe,cAAc;AAC7BU,IAAAA,OAAO,EAAE6B,WAAY;AACrB3B,IAAAA,YAAY,EAAEuB,gBAAiB;AAC/BtB,IAAAA,YAAY,EAAEyB,gBAAiB;AAC/BxB,IAAAA,MAAM,EAAEA,MAAAA;GACJC,EAAAA,IAAI,gBAER4B,KAAA,CAAAC,aAAA,CAACG,4BAAqB,EAAA;AACpB,IAAA,aAAA,EAAazF,4BAA6B;IAC1C4F,OAAO,EAAE,CAAC9C,OAAQ;AAClB+C,IAAAA,UAAU,EAAExF,IAAAA;AAAK,GAAA,EAEf6E,iBAAiB,CAAChC,WAAW,CAAC,EAE9BN,IAAI,iBACJyC,KAAA,CAAAC,aAAA,CAACG,yBAAkB,EAAA;AACjB/C,IAAAA,MAAM,EAAEzC,mBAAoB;AAC5B6F,IAAAA,IAAI,EAAEhC,UAAW;IACjBiC,IAAI,EAAA,IAAA;AACJhF,IAAAA,KAAK,EAAE2D,kBAAmB;AAC1BmB,IAAAA,UAAU,EAAExF,IAAAA;GAEVuC,EAAAA,IACgB,CACrB,EAECsC,iBAAiB,CAAC/B,YAAY,CACX,CAAC,EAEtBL,OAAO,iBACPuC,KAAA,CAAAC,aAAA,CAACG,0BAAmB,qBAClBJ,KAAA,CAAAC,aAAA,CAACU,eAAO,EAAA;AACN3F,IAAAA,IAAI,EAAEgE,iBAAkB;AACxBtD,IAAAA,KAAK,EAAE6D,4BAAAA;GACR,CACkB,CAEH,CAAC,CAAA;AAE3B,CAAC;;;;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\n\nimport {\n  type SemanticNames,\n  Typography,\n} from '~/src/foundation'\n\nimport { flattenDeep } from '~/src/utils/arrayUtils'\nimport { warn } from '~/src/utils/assertUtils'\nimport { noop } from '~/src/utils/functionUtils'\nimport { isArray } from '~/src/utils/typeUtils'\n\nimport {\n  Icon,\n  IconSize,\n} 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      warn('Deprecation: IconName as a value for the leftContent property of a Button has been deprecated. Use the Icon of bezier-icons instead.')\n      return (\n        <LegacyIcon\n          name={content}\n          size={iconSize}\n          color={overridedIconAndSpinnerColor}\n        />\n      )\n    }\n\n    if (isBezierIcon(content)) {\n      return (\n        <Icon\n          source={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","warn","React","createElement","LegacyIcon","name","isBezierIcon","Icon","source","Styled","assign","ref","visible","buttonSize","typo","bold","Spinner"],"mappings":"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"}

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

@@ -1 +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;;;;;;"}
+{"version":3,"file":"Button.types.js","sources":["../../../../src/components/Button/Button.types.ts"],"sourcesContent":["import { type BezierIcon } 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 = React.ReactNode | BezierIcon\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/Divider/Divider.styled.js

@@ -64,5 +64,6 @@ const Divider = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
   interpolation
 }) => interpolation);
 
+exports.DIVIDER_THICKNESS = DIVIDER_THICKNESS;
 exports.Divider = Divider;
 //# sourceMappingURL=Divider.styled.js.map

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

@@ -1 +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;;;;"}
+{"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\nexport const 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":";;;;AAOO,MAAMA,iBAAiB,GAAG,EAAC;AAClC,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/Forms/Inputs/TextArea/TextArea.styled.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var reactTextareaAutosize_esm = require('../../../../node_modules/react-textarea-autosize/dist/react-textarea-autosize.esm.js');
+var reactTextareaAutosize_browser_esm = require('../../../../node_modules/react-textarea-autosize/dist/react-textarea-autosize.browser.esm.js');
 var DisabledOpacity = require('../../../../constants/DisabledOpacity.js');
 var mixins = require('../mixins.js');
 var Mixins = require('../../../../foundation/Mixins.js');
@@ -28,7 +28,7 @@ const Wrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
 }) => foundation?.transition?.getTransitionsCSS(['border-color', 'box-shadow']), ({
   interpolation
 }) => interpolation);
-const TextAreaAutoSizeBase = /*#__PURE__*/FoundationStyledComponent.styled(reactTextareaAutosize_esm.default).withConfig({
+const TextAreaAutoSizeBase = /*#__PURE__*/FoundationStyledComponent.styled(reactTextareaAutosize_browser_esm.default).withConfig({
   displayName: "TextAreastyled__TextAreaAutoSizeBase",
   componentId: "sc-14a5gh6-1"
 })(["box-sizing:border-box;width:100%;padding:8px 12px;margin:0;cursor:", ";resize:none;background:none;border:none;outline:none;", " ", " ", " ", " &::placeholder{", "}", ""], ({

package/dist/cjs/components/Forms/Inputs/TextArea/TextArea.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.styled.js","sources":["../../../../../../src/components/Forms/Inputs/TextArea/TextArea.styled.ts"],"sourcesContent":["import TextareaAutosize from 'react-textarea-autosize'\n\nimport {\n  type SemanticNames,\n  Typography,\n  hideScrollbars,\n  styled,\n} from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport { type InterpolationProps } from '~/src/types/Foundation'\n\nimport {\n  erroredInputWrapperStyle,\n  focusedInputWrapperStyle,\n  inputPlaceholderStyle,\n  inputTextStyle,\n  inputWrapperStyle,\n} from '~/src/components/Forms/Inputs/mixins'\n\ninterface WrapperProps extends InterpolationProps {\n  focused: boolean\n  hasError?: boolean\n  bgColor: SemanticNames\n  disabled: boolean\n}\n\nconst Wrapper = styled.div<WrapperProps>`\n  ${inputWrapperStyle};\n\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  background-color: ${({ foundation, bgColor }) => foundation?.theme?.[bgColor]};\n  opacity: ${({ disabled }) => disabled && DisabledOpacity};\n\n  ${({ focused }) => focused && focusedInputWrapperStyle}\n\n  ${({ hasError }) => hasError && erroredInputWrapperStyle}\n\n  ${({ foundation }) => foundation?.rounding.round8}\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['border-color', 'box-shadow'])};\n\n  ${({ interpolation }) => interpolation}\n`\n\ninterface TextAreaAutoSizeBaseProps extends InterpolationProps {\n  disabled: boolean\n  readOnly: boolean\n}\n\nconst TextAreaAutoSizeBase = styled(TextareaAutosize)<TextAreaAutoSizeBaseProps>`\n  box-sizing: border-box;\n  width: 100%;\n  padding: 8px 12px;\n  margin: 0;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'auto')};\n  resize: none;\n  background: none;\n  border: none;\n  outline: none;\n\n  ${hideScrollbars()}\n\n  ${Typography.Size14}\n\n  ${inputTextStyle}\n\n  ${inputPlaceholderStyle}\n\n  &::placeholder {\n    ${Typography.Size14}\n  }\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport default {\n  Wrapper,\n  TextAreaAutoSizeBase,\n}\n"],"names":["Wrapper","styled","div","withConfig","displayName","componentId","inputWrapperStyle","foundation","bgColor","theme","disabled","DisabledOpacity","focused","focusedInputWrapperStyle","hasError","erroredInputWrapperStyle","rounding","round8","transition","getTransitionsCSS","interpolation","TextAreaAutoSizeBase","TextareaAutosize","hideScrollbars","Typography","Size14","inputTextStyle","inputPlaceholderStyle"],"mappings":";;;;;;;;;;;AA2BA,MAAMA,OAAO,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CACtBC,CAAAA,CAAAA,CAAAA,EAAAA,EAAAA,0EAAAA,EAAAA,WAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,EAAAA,CAAAA,EAAAA,wBAAiB,EAKC,CAAC;EAAEC,UAAU;AAAEC,EAAAA,OAAAA;AAAQ,CAAC,KAAKD,UAAU,EAAEE,KAAK,GAAGD,OAAO,CAAC,EAClE,CAAC;AAAEE,EAAAA,QAAAA;AAAS,CAAC,KAAKA,QAAQ,IAAIC,uBAAe,EAEtD,CAAC;AAAEC,EAAAA,OAAAA;AAAQ,CAAC,KAAKA,OAAO,IAAIC,+BAAwB,EAEpD,CAAC;AAAEC,EAAAA,QAAAA;AAAS,CAAC,KAAKA,QAAQ,IAAIC,+BAAwB,EAEtD,CAAC;AAAER,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAES,QAAQ,CAACC,MAAM,EAE/C,CAAC;AAAEV,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEW,UAAU,EAAEC,iBAAiB,CAAC,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,EAE7F,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,CACvC,CAAA;AAOD,MAAMC,oBAAoB,gBAAGpB,gCAAM,CAACqB,iCAAgB,CAAC,CAAAnB,UAAA,CAAA;EAAAC,WAAA,EAAA,sCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oEAAA,EAAA,wDAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,kBAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAKzC,CAAC;AAAEK,EAAAA,QAAAA;AAAS,CAAC,KAAMA,QAAQ,GAAG,aAAa,GAAG,MAAO,EAM7Da,qBAAc,EAAE,EAEhBC,qBAAU,CAACC,MAAM,EAEjBC,qBAAc,EAEdC,4BAAqB,EAGnBH,qBAAU,CAACC,MAAM,EAGnB,CAAC;AAAEL,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,CACvC,CAAA;AAED,aAAe;EACbpB,OAAO;AACPqB,EAAAA,oBAAAA;AACF,CAAC;;;;"}
+{"version":3,"file":"TextArea.styled.js","sources":["../../../../../../src/components/Forms/Inputs/TextArea/TextArea.styled.ts"],"sourcesContent":["import TextareaAutosize from 'react-textarea-autosize'\n\nimport {\n  type SemanticNames,\n  Typography,\n  hideScrollbars,\n  styled,\n} from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport { type InterpolationProps } from '~/src/types/Foundation'\n\nimport {\n  erroredInputWrapperStyle,\n  focusedInputWrapperStyle,\n  inputPlaceholderStyle,\n  inputTextStyle,\n  inputWrapperStyle,\n} from '~/src/components/Forms/Inputs/mixins'\n\ninterface WrapperProps extends InterpolationProps {\n  focused: boolean\n  hasError?: boolean\n  bgColor: SemanticNames\n  disabled: boolean\n}\n\nconst Wrapper = styled.div<WrapperProps>`\n  ${inputWrapperStyle};\n\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  background-color: ${({ foundation, bgColor }) => foundation?.theme?.[bgColor]};\n  opacity: ${({ disabled }) => disabled && DisabledOpacity};\n\n  ${({ focused }) => focused && focusedInputWrapperStyle}\n\n  ${({ hasError }) => hasError && erroredInputWrapperStyle}\n\n  ${({ foundation }) => foundation?.rounding.round8}\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['border-color', 'box-shadow'])};\n\n  ${({ interpolation }) => interpolation}\n`\n\ninterface TextAreaAutoSizeBaseProps extends InterpolationProps {\n  disabled: boolean\n  readOnly: boolean\n}\n\nconst TextAreaAutoSizeBase = styled(TextareaAutosize)<TextAreaAutoSizeBaseProps>`\n  box-sizing: border-box;\n  width: 100%;\n  padding: 8px 12px;\n  margin: 0;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'auto')};\n  resize: none;\n  background: none;\n  border: none;\n  outline: none;\n\n  ${hideScrollbars()}\n\n  ${Typography.Size14}\n\n  ${inputTextStyle}\n\n  ${inputPlaceholderStyle}\n\n  &::placeholder {\n    ${Typography.Size14}\n  }\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport default {\n  Wrapper,\n  TextAreaAutoSizeBase,\n}\n"],"names":["Wrapper","styled","div","withConfig","displayName","componentId","inputWrapperStyle","foundation","bgColor","theme","disabled","DisabledOpacity","focused","focusedInputWrapperStyle","hasError","erroredInputWrapperStyle","rounding","round8","transition","getTransitionsCSS","interpolation","TextAreaAutoSizeBase","TextareaAutosize","hideScrollbars","Typography","Size14","inputTextStyle","inputPlaceholderStyle"],"mappings":";;;;;;;;;;;AA2BA,MAAMA,OAAO,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CACtBC,CAAAA,CAAAA,CAAAA,EAAAA,EAAAA,0EAAAA,EAAAA,WAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,EAAAA,CAAAA,EAAAA,wBAAiB,EAKC,CAAC;EAAEC,UAAU;AAAEC,EAAAA,OAAAA;AAAQ,CAAC,KAAKD,UAAU,EAAEE,KAAK,GAAGD,OAAO,CAAC,EAClE,CAAC;AAAEE,EAAAA,QAAAA;AAAS,CAAC,KAAKA,QAAQ,IAAIC,uBAAe,EAEtD,CAAC;AAAEC,EAAAA,OAAAA;AAAQ,CAAC,KAAKA,OAAO,IAAIC,+BAAwB,EAEpD,CAAC;AAAEC,EAAAA,QAAAA;AAAS,CAAC,KAAKA,QAAQ,IAAIC,+BAAwB,EAEtD,CAAC;AAAER,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAES,QAAQ,CAACC,MAAM,EAE/C,CAAC;AAAEV,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEW,UAAU,EAAEC,iBAAiB,CAAC,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,EAE7F,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,CACvC,CAAA;AAOD,MAAMC,oBAAoB,gBAAGpB,gCAAM,CAACqB,yCAAgB,CAAC,CAAAnB,UAAA,CAAA;EAAAC,WAAA,EAAA,sCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oEAAA,EAAA,wDAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,kBAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAKzC,CAAC;AAAEK,EAAAA,QAAAA;AAAS,CAAC,KAAMA,QAAQ,GAAG,aAAa,GAAG,MAAO,EAM7Da,qBAAc,EAAE,EAEhBC,qBAAU,CAACC,MAAM,EAEjBC,qBAAc,EAEdC,4BAAqB,EAGnBH,qBAAU,CAACC,MAAM,EAGnB,CAAC;AAAEL,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,CACvC,CAAA;AAED,aAAe;EACbpB,OAAO;AACPqB,EAAAA,oBAAAA;AACF,CAAC;;;;"}

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

@@ -17,23 +17,18 @@ function SegmentedControlItemListImpl({
   style: styleProp,
   className: classNameProp,
   ...rest
-}, forwardedRef) {
-  const [selectedElement, setSelectedElement] = React.useState(null);
+}) {
+  const [selectedItemIndex, setSelectedItemIndex] = React.useState(null);
   const {
     type,
     size,
     width
   } = SegmentedControlContext.useSegmentedControlContext('SegmentedControlItemList');
-  const {
-    containerRef: ref,
-    render: renderIndicator
-  } = SegmentedControlIndicator.useSegmentedControlIndicator({
-    target: selectedElement,
-    refs: [forwardedRef]
-  });
   const contextValue = React.useMemo(() => ({
-    setSelectedElement
-  }), []);
+    selectedItemIndex,
+    itemCount: React.Children.count(children),
+    setSelectedItemIndex
+  }), [children, selectedItemIndex]);
   const style = React.useMemo(() => ({
     ...styleProp,
     '--bezier-react-segmented-control-width': typeUtils.isNumber(width) ? `${width}px` : width
@@ -42,20 +37,16 @@ function SegmentedControlItemListImpl({
   const SegmentedControlItemList = type === 'radiogroup' ? index$2.Root : index.List;
   return /*#__PURE__*/React.createElement(SegmentedControlItemList, Object.assign({
     asChild: true,
-    ref: ref,
     style: style,
     className: className
   }, rest), /*#__PURE__*/React.createElement(SegmentedControl_styled.Container, null, /*#__PURE__*/React.createElement(SegmentedControlContext.SegmentedControlItemListContextProvider, {
     value: contextValue
-  }, renderIndicator(), React.Children.map(children, (child, index) => {
-    if (index === 0) {
-      return child;
-    }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider.default, {
-      withoutParallelIndent: true,
-      orientation: "vertical"
-    }), child);
-  }))));
+  }, React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(React.Fragment, null, index !== 0 && /*#__PURE__*/React.createElement(Divider.default, {
+    withoutParallelIndent: true,
+    orientation: "vertical"
+  }), /*#__PURE__*/React.createElement(SegmentedControlContext.SegmentedControlItemContextProvider, {
+    value: index
+  }, child))), /*#__PURE__*/React.createElement(SegmentedControlIndicator.SegmentedControlIndicator, null))));
 }
 const SegmentedControlItemList = /*#__PURE__*/React.forwardRef(SegmentedControlItemListImpl);
 function SegmentedControlRadioGroupImpl({

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../../../../src/components/Forms/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useMemo,\n  useState,\n} from 'react'\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport classNames from 'classnames'\n\nimport { isNumber } from '~/src/utils/typeUtils'\n\nimport { Divider } from '~/src/components/Divider'\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\n\nimport {\n  type SegmentedControlItemListProps,\n  type SegmentedControlProps,\n  type SegmentedControlRadioGroupProps,\n  SegmentedControlSize,\n  type SegmentedControlTabContentProps,\n  type SegmentedControlTabListProps,\n  type SegmentedControlTabsProps,\n  type SegmentedControlType,\n} from './SegmentedControl.types'\nimport {\n  SegmentedControlContextProvider,\n  SegmentedControlItemListContextProvider,\n  useSegmentedControlContext,\n} from './SegmentedControlContext'\nimport { useSegmentedControlIndicator } from './SegmentedControlIndicator'\n\nimport * as Styled from './SegmentedControl.styled'\n\nfunction SegmentedControlItemListImpl<\n  Type extends SegmentedControlType,\n  Value extends string,\n>({\n  children,\n  style: styleProp,\n  className: classNameProp,\n  ...rest\n}: SegmentedControlItemListProps<Type, Value>, forwardedRef: React.Ref<HTMLDivElement>) {\n  const [selectedElement, setSelectedElement] = useState<HTMLButtonElement | null>(null)\n\n  const {\n    type,\n    size,\n    width,\n  } = useSegmentedControlContext('SegmentedControlItemList')\n\n  const {\n    containerRef: ref,\n    render: renderIndicator,\n  } = useSegmentedControlIndicator({\n    target: selectedElement,\n    refs: [forwardedRef],\n  })\n\n  const contextValue = useMemo(() => ({\n    setSelectedElement,\n  }), [])\n\n  const style = useMemo(() => ({\n    ...styleProp,\n    '--bezier-react-segmented-control-width': isNumber(width) ? `${width}px` : width,\n  } as React.CSSProperties), [\n    styleProp,\n    width,\n  ])\n\n  const className = classNames(\n    classNameProp,\n    size,\n  )\n\n  const SegmentedControlItemList = type === 'radiogroup'\n    ? RadioGroupPrimitive.Root\n    : TabsPrimitive.List\n\n  return (\n    <SegmentedControlItemList\n      asChild\n      ref={ref}\n      style={style}\n      className={className}\n      {...rest}\n    >\n      <Styled.Container>\n        <SegmentedControlItemListContextProvider value={contextValue}>\n          { renderIndicator() }\n\n          { React.Children.map(children, (child, index) => {\n            if (index === 0) {\n              return child\n            }\n\n            return (\n              <>\n                <Divider\n                  withoutParallelIndent\n                  orientation=\"vertical\"\n                />\n                { child }\n              </>\n            )\n          }) }\n        </SegmentedControlItemListContextProvider>\n      </Styled.Container>\n    </SegmentedControlItemList>\n  )\n}\n\nconst SegmentedControlItemList = forwardRef(SegmentedControlItemListImpl) as <\n  Type extends SegmentedControlType,\n  Value extends string,\n>(\n  props: SegmentedControlItemListProps<Type, Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n\nfunction SegmentedControlRadioGroupImpl<Value extends string>({\n  children,\n  ...rest\n}: SegmentedControlRadioGroupProps<Value>, forwardedRef: React.Ref<HTMLDivElement>) {\n  return (\n    <SegmentedControlItemList\n      ref={forwardedRef}\n      {...useFormFieldProps(rest)}\n    >\n      { children }\n    </SegmentedControlItemList>\n  )\n}\n\nconst SegmentedControlRadioGroup = forwardRef(SegmentedControlRadioGroupImpl) as <Value extends string>(\n  props: SegmentedControlRadioGroupProps<Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n\n/**\n * `SegmentedControlTabList` is the component that wraps `SegmentedControlItem`.\n * It can be used only when `SegmentedControl` component is used as the `tabs` type.\n *\n * It must be used as a child of `SegmentedControl`.\n */\nexport const SegmentedControlTabList = SegmentedControlItemList as (\n  props: SegmentedControlTabListProps & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n\n/**\n * `SegmentedControlTabContent` is the component that wraps the content that corresponds to a specific value of `SegmentedControlItem`.\n * It can be used only when `SegmentedControl` component is used as the `tabs` type.\n *\n * It must be used as a child of `SegmentedControl`.\n */\nexport const SegmentedControlTabContent = TabsPrimitive.Content as <Value extends string>(\n  props: SegmentedControlTabContentProps<Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n\nconst SegmentedControlTabs = TabsPrimitive.Root as <Value extends string>(\n  props: SegmentedControlTabsProps<Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n\nfunction SegmentedControlImpl<\n  Type extends SegmentedControlType,\n  Value extends string,\n>({\n  type = 'radiogroup' as Type,\n  size = SegmentedControlSize.M,\n  width = '100%',\n  onValueChange,\n  children,\n  ...rest\n}: SegmentedControlProps<Type, Value>, forwardedRef: React.Ref<HTMLDivElement>) {\n  const SegmentedControlRoot = type === 'radiogroup'\n    ? SegmentedControlRadioGroup\n    : SegmentedControlTabs\n\n  const contextValue = useMemo(() => ({\n    type,\n    size,\n    width,\n  }), [\n    type,\n    size,\n    width,\n  ])\n\n  return (\n    <SegmentedControlContextProvider value={contextValue}>\n      <SegmentedControlRoot\n        ref={forwardedRef}\n        onValueChange={onValueChange}\n        {...rest}\n      >\n        { children }\n      </SegmentedControlRoot>\n    </SegmentedControlContextProvider>\n  )\n}\n\n/**\n * `SegmentedControl` is component that looks like a combination of a radio and a button.\n * They can be used in place of tabs and as input elements in modals.\n * If you have more than five items, use a different element, such as a dropdown.\n *\n * `SegmentedControl` can be used as a radio group, tabs element depending on its `type`.\n *\n * @example\n *\n * ```tsx\n * // Anatomy of the SegmentedControl type=\"radiogroup\"\n * <SegmentedControl type=\"radiogroup\">\n *  <SegmentedControlItem />\n * </SegmentedControl>\n *\n * // Anatomy of the SegmentedControl type=\"tabs\"\n * <SegmentedControl type=\"tabs\">\n *  <SegmentedControlTabList>\n *   <SegmentedControlItem />\n *  </SegmentedControlTabList>\n *\n *  <SegmentedControlTabContent />\n * </SegmentedControl>\n * ```\n */\nexport const SegmentedControl = forwardRef(SegmentedControlImpl) as <\n  Type extends SegmentedControlType,\n  Value extends string,\n>(\n  props: SegmentedControlProps<Type, Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n"],"names":["SegmentedControlItemListImpl","children","style","styleProp","className","classNameProp","rest","forwardedRef","selectedElement","setSelectedElement","useState","type","size","width","useSegmentedControlContext","containerRef","ref","render","renderIndicator","useSegmentedControlIndicator","target","refs","contextValue","useMemo","isNumber","classNames","SegmentedControlItemList","RadioGroupPrimitive","TabsPrimitive","React","createElement","Object","assign","asChild","Styled","SegmentedControlItemListContextProvider","value","Children","map","child","index","Fragment","Divider","withoutParallelIndent","orientation","forwardRef","SegmentedControlRadioGroupImpl","useFormFieldProps","SegmentedControlRadioGroup","SegmentedControlTabList","SegmentedControlTabContent","SegmentedControlTabs","SegmentedControlImpl","SegmentedControlSize","M","onValueChange","SegmentedControlRoot","SegmentedControlContextProvider","SegmentedControl"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.js","sources":["../../../../../src/components/Forms/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useMemo,\n  useState,\n} from 'react'\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport classNames from 'classnames'\n\nimport { isNumber } from '~/src/utils/typeUtils'\n\nimport { Divider } from '~/src/components/Divider'\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\n\nimport {\n  type SegmentedControlItemListProps,\n  type SegmentedControlProps,\n  type SegmentedControlRadioGroupProps,\n  SegmentedControlSize,\n  type SegmentedControlTabContentProps,\n  type SegmentedControlTabListProps,\n  type SegmentedControlTabsProps,\n  type SegmentedControlType,\n} from './SegmentedControl.types'\nimport {\n  SegmentedControlContextProvider,\n  SegmentedControlItemContextProvider,\n  SegmentedControlItemListContextProvider,\n  type SegmentedControlItemListContextValue,\n  useSegmentedControlContext,\n} from './SegmentedControlContext'\nimport { SegmentedControlIndicator } from './SegmentedControlIndicator'\n\nimport * as Styled from './SegmentedControl.styled'\n\nfunction SegmentedControlItemListImpl<\n  Type extends SegmentedControlType,\n  Value extends string,\n>({\n  children,\n  style: styleProp,\n  className: classNameProp,\n  ...rest\n}: SegmentedControlItemListProps<Type, Value>) {\n  const [selectedItemIndex, setSelectedItemIndex] = useState<number | null>(null)\n\n  const {\n    type,\n    size,\n    width,\n  } = useSegmentedControlContext('SegmentedControlItemList')\n\n  const contextValue: SegmentedControlItemListContextValue = useMemo(() => ({\n    selectedItemIndex,\n    itemCount: React.Children.count(children),\n    setSelectedItemIndex,\n  }), [\n    children,\n    selectedItemIndex,\n  ])\n\n  const style = useMemo(() => ({\n    ...styleProp,\n    '--bezier-react-segmented-control-width': isNumber(width) ? `${width}px` : width,\n  } as React.CSSProperties), [\n    styleProp,\n    width,\n  ])\n\n  const className = classNames(\n    classNameProp,\n    size,\n  )\n\n  const SegmentedControlItemList = type === 'radiogroup'\n    ? RadioGroupPrimitive.Root\n    : TabsPrimitive.List\n\n  return (\n    <SegmentedControlItemList\n      asChild\n      style={style}\n      className={className}\n      {...rest}\n    >\n      <Styled.Container>\n        <SegmentedControlItemListContextProvider value={contextValue}>\n          { React.Children.map(children, (child, index) => (\n            <>\n              { index !== 0 && (\n                <Divider\n                  withoutParallelIndent\n                  orientation=\"vertical\"\n                />\n              ) }\n              <SegmentedControlItemContextProvider value={index}>\n                { child }\n              </SegmentedControlItemContextProvider>\n            </>\n          )) }\n          <SegmentedControlIndicator />\n        </SegmentedControlItemListContextProvider>\n      </Styled.Container>\n    </SegmentedControlItemList>\n  )\n}\n\nconst SegmentedControlItemList = forwardRef(SegmentedControlItemListImpl) as <\n  Type extends SegmentedControlType,\n  Value extends string,\n>(\n  props: SegmentedControlItemListProps<Type, Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n\nfunction SegmentedControlRadioGroupImpl<Value extends string>({\n  children,\n  ...rest\n}: SegmentedControlRadioGroupProps<Value>, forwardedRef: React.Ref<HTMLDivElement>) {\n  return (\n    <SegmentedControlItemList\n      ref={forwardedRef}\n      {...useFormFieldProps(rest)}\n    >\n      { children }\n    </SegmentedControlItemList>\n  )\n}\n\nconst SegmentedControlRadioGroup = forwardRef(SegmentedControlRadioGroupImpl) as <Value extends string>(\n  props: SegmentedControlRadioGroupProps<Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n\n/**\n * `SegmentedControlTabList` is the component that wraps `SegmentedControlItem`.\n * It can be used only when `SegmentedControl` component is used as the `tabs` type.\n *\n * It must be used as a child of `SegmentedControl`.\n */\nexport const SegmentedControlTabList = SegmentedControlItemList as (\n  props: SegmentedControlTabListProps & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n\n/**\n * `SegmentedControlTabContent` is the component that wraps the content that corresponds to a specific value of `SegmentedControlItem`.\n * It can be used only when `SegmentedControl` component is used as the `tabs` type.\n *\n * It must be used as a child of `SegmentedControl`.\n */\nexport const SegmentedControlTabContent = TabsPrimitive.Content as <Value extends string>(\n  props: SegmentedControlTabContentProps<Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n\nconst SegmentedControlTabs = TabsPrimitive.Root as <Value extends string>(\n  props: SegmentedControlTabsProps<Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n\nfunction SegmentedControlImpl<\n  Type extends SegmentedControlType,\n  Value extends string,\n>({\n  type = 'radiogroup' as Type,\n  size = SegmentedControlSize.M,\n  width = '100%',\n  onValueChange,\n  children,\n  ...rest\n}: SegmentedControlProps<Type, Value>, forwardedRef: React.Ref<HTMLDivElement>) {\n  const SegmentedControlRoot = type === 'radiogroup'\n    ? SegmentedControlRadioGroup\n    : SegmentedControlTabs\n\n  const contextValue = useMemo(() => ({\n    type,\n    size,\n    width,\n  }), [\n    type,\n    size,\n    width,\n  ])\n\n  return (\n    <SegmentedControlContextProvider value={contextValue}>\n      <SegmentedControlRoot\n        ref={forwardedRef}\n        onValueChange={onValueChange}\n        {...rest}\n      >\n        { children }\n      </SegmentedControlRoot>\n    </SegmentedControlContextProvider>\n  )\n}\n\n/**\n * `SegmentedControl` is component that looks like a combination of a radio and a button.\n * They can be used in place of tabs and as input elements in modals.\n * If you have more than five items, use a different element, such as a dropdown.\n *\n * `SegmentedControl` can be used as a radio group, tabs element depending on its `type`.\n *\n * @example\n *\n * ```tsx\n * // Anatomy of the SegmentedControl type=\"radiogroup\"\n * <SegmentedControl type=\"radiogroup\">\n *  <SegmentedControlItem />\n * </SegmentedControl>\n *\n * // Anatomy of the SegmentedControl type=\"tabs\"\n * <SegmentedControl type=\"tabs\">\n *  <SegmentedControlTabList>\n *   <SegmentedControlItem />\n *  </SegmentedControlTabList>\n *\n *  <SegmentedControlTabContent />\n * </SegmentedControl>\n * ```\n */\nexport const SegmentedControl = forwardRef(SegmentedControlImpl) as <\n  Type extends SegmentedControlType,\n  Value extends string,\n>(\n  props: SegmentedControlProps<Type, Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => JSX.Element\n"],"names":["SegmentedControlItemListImpl","children","style","styleProp","className","classNameProp","rest","selectedItemIndex","setSelectedItemIndex","useState","type","size","width","useSegmentedControlContext","contextValue","useMemo","itemCount","React","Children","count","isNumber","classNames","SegmentedControlItemList","RadioGroupPrimitive","TabsPrimitive","createElement","Object","assign","asChild","Styled","SegmentedControlItemListContextProvider","value","map","child","index","Fragment","Divider","withoutParallelIndent","orientation","SegmentedControlItemContextProvider","SegmentedControlIndicator","forwardRef","SegmentedControlRadioGroupImpl","forwardedRef","ref","useFormFieldProps","SegmentedControlRadioGroup","SegmentedControlTabList","SegmentedControlTabContent","SegmentedControlTabs","SegmentedControlImpl","SegmentedControlSize","M","onValueChange","SegmentedControlRoot","SegmentedControlContextProvider","SegmentedControl"],"mappings":"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"}

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

@@ -6,56 +6,66 @@ var mixins = require('../Inputs/mixins.js');
 var Text = require('../../Text/Text.js');
 var SegmentedControl_types = require('./SegmentedControl.types.js');
 var AlphaStack = require('../../AlphaStack/AlphaStack.js');
-var index = require('../../../foundation/Transition/index.js');
 var FoundationStyledComponent = require('../../../foundation/FoundationStyledComponent.js');
 var Typography = require('../../../foundation/Typography.js');
+var index = require('../../../foundation/Transition/index.js');
 
 /* stylelint-disable declaration-block-semicolon-newline-after, rule-empty-line-before */
+const heightBySegmentedControlSize = {
+  [SegmentedControl_types.SegmentedControlSize.XS]: 24,
+  [SegmentedControl_types.SegmentedControlSize.S]: 28,
+  [SegmentedControl_types.SegmentedControlSize.M]: 36,
+  [SegmentedControl_types.SegmentedControlSize.L]: 44
+};
+const paddingBySegmentedControlSize = {
+  [SegmentedControl_types.SegmentedControlSize.XS]: 1,
+  [SegmentedControl_types.SegmentedControlSize.S]: 2,
+  [SegmentedControl_types.SegmentedControlSize.M]: 2,
+  [SegmentedControl_types.SegmentedControlSize.L]: 4
+};
+const Indicator = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "SegmentedControlstyled__Indicator",
+  componentId: "sc-15mhli4-0"
+})(["--bezier-react-segmented-control-indicator-translateX:none;--bezier-react-segmented-control-indicator-left:auto;--bezier-react-segmented-control-indicator-width:auto;--bezier-react-segmented-control-indicator-height:auto;position:absolute;top:50%;left:var(--bezier-react-segmented-control-indicator-left);width:var(--bezier-react-segmented-control-indicator-width);height:var(--bezier-react-segmented-control-indicator-height);", " background-color:var(--bg-white-high);transform:translateX(var(--bezier-react-segmented-control-indicator-translateX)) translateY(-50%);", ""], ({
+  foundation
+}) => foundation?.elevation.ev1(), ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS('transform', index.TransitionDuration.M));
 const ItemContainer = /*#__PURE__*/FoundationStyledComponent.styled(AlphaStack.AlphaStack).attrs({
   direction: 'horizontal',
   align: 'center',
   spacing: 2
 }).withConfig({
   displayName: "SegmentedControlstyled__ItemContainer",
-  componentId: "sc-15mhli4-0"
+  componentId: "sc-15mhli4-1"
 })(["z-index:", ";overflow:hidden;"], ZIndex.ZIndex.Float);
 const ItemLabel = /*#__PURE__*/FoundationStyledComponent.styled(Text.default).attrs({
   bold: true,
   truncated: true
 }).withConfig({
   displayName: "SegmentedControlstyled__ItemLabel",
-  componentId: "sc-15mhli4-1"
+  componentId: "sc-15mhli4-2"
 })(["padding:1px 4px;"]);
 const Item = /*#__PURE__*/FoundationStyledComponent.styled.button.withConfig({
   displayName: "SegmentedControlstyled__Item",
-  componentId: "sc-15mhli4-2"
+  componentId: "sc-15mhli4-3"
 })(["all:unset;position:relative;display:flex;flex:1;align-items:center;justify-content:center;min-width:0;", " &[data-checked]{color:var(--txt-black-darkest);cursor:default;}&:not([data-checked]){color:var(--txt-black-dark);cursor:pointer;}&:disabled{cursor:not-allowed;}&::after{position:absolute;top:0;left:0;z-index:", ";display:block;width:100%;height:100%;content:'';border-radius:inherit;", "}&:focus-visible{&::after{", "}}&:not([data-checked]):not(&:disabled):hover{background-color:var(--bg-black-light);}"], ({
   foundation
 }) => foundation?.transition?.getTransitionsCSS('background-color'), ZIndex.ZIndex.Float, ({
   foundation
 }) => foundation?.transition?.getTransitionsCSS(['box-shadow']), mixins.focusedInputWrapperStyle);
-const indicatorTransitionMeta = {
-  duration: index.Transition.TransitionDuration.M
-};
-const Indicator = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
-  displayName: "SegmentedControlstyled__Indicator",
-  componentId: "sc-15mhli4-3"
-})(["--bezier-react-segmented-control-indicator-transform:none;--bezier-react-segmented-control-indicator-width:auto;--bezier-react-segmented-control-indicator-height:auto;position:absolute;top:0;left:0;z-index:", ";width:var(--bezier-react-segmented-control-indicator-width);height:var(--bezier-react-segmented-control-indicator-height);", " background-color:var(--bg-white-high);transform:var(--bezier-react-segmented-control-indicator-transform);", ""], ZIndex.ZIndex.Float, ({
-  foundation
-}) => foundation?.elevation.ev1(), ({
-  foundation
-}) => foundation?.transition?.getTransitionsCSS('transform', indicatorTransitionMeta.duration));
 const Container = /*#__PURE__*/FoundationStyledComponent.styled(AlphaStack.AlphaStack).attrs({
   direction: 'horizontal'
 }).withConfig({
   displayName: "SegmentedControlstyled__Container",
   componentId: "sc-15mhli4-4"
-})(["--bezier-react-segmented-control-width:auto;position:relative;z-index:", ";box-sizing:border-box;width:var(--bezier-react-segmented-control-width);background-color:var(--bg-black-lighter);&.", "{height:24px;padding:1px;border-radius:6px;", " ", ",", "{border-radius:5px;}", "{padding:1px 0;}}&.", "{height:28px;padding:2px;border-radius:8px;", " ", ",", "{border-radius:6px;}", "{padding:2px 0;}}&.", "{height:36px;padding:2px;border-radius:8px;", " ", ",", "{border-radius:6px;}", "{padding:6px 0;}}&.", "{height:44px;padding:4px;border-radius:12px;", " ", ",", "{border-radius:8px;}", "{padding:8px 0;}}&[data-disabled]{opacity:", ";", ",", "{cursor:not-allowed;}}"], ZIndex.ZIndex.Base, SegmentedControl_types.SegmentedControlSize.XS, Typography.Typography.Size13, Item, Indicator, Item, SegmentedControl_types.SegmentedControlSize.S, Typography.Typography.Size14, Item, Indicator, Item, SegmentedControl_types.SegmentedControlSize.M, Typography.Typography.Size14, Item, Indicator, Item, SegmentedControl_types.SegmentedControlSize.L, Typography.Typography.Size14, Item, Indicator, Item, DisabledOpacity.default, Item, Indicator);
+})(["--bezier-react-segmented-control-width:auto;position:relative;z-index:", ";box-sizing:border-box;width:var(--bezier-react-segmented-control-width);background-color:var(--bg-black-lighter);&.", "{height:", "px;padding:", "px;border-radius:6px;", " ", ",", "{border-radius:5px;}", "{padding:1px 0;}}&.", "{height:", "px;padding:", "px;border-radius:8px;", " ", ",", "{border-radius:6px;}", "{padding:2px 0;}}&.", "{height:", "px;padding:", "px;border-radius:8px;", " ", ",", "{border-radius:6px;}", "{padding:6px 0;}}&.", "{height:", "px;padding:", "px;border-radius:12px;", " ", ",", "{border-radius:8px;}", "{padding:8px 0;}}&[data-disabled]{opacity:", ";", ",", "{cursor:not-allowed;}}"], ZIndex.ZIndex.Base, SegmentedControl_types.SegmentedControlSize.XS, heightBySegmentedControlSize[SegmentedControl_types.SegmentedControlSize.XS], paddingBySegmentedControlSize[SegmentedControl_types.SegmentedControlSize.XS], Typography.Typography.Size13, Item, Indicator, Item, SegmentedControl_types.SegmentedControlSize.S, heightBySegmentedControlSize[SegmentedControl_types.SegmentedControlSize.S], paddingBySegmentedControlSize[SegmentedControl_types.SegmentedControlSize.S], Typography.Typography.Size14, Item, Indicator, Item, SegmentedControl_types.SegmentedControlSize.M, heightBySegmentedControlSize[SegmentedControl_types.SegmentedControlSize.M], paddingBySegmentedControlSize[SegmentedControl_types.SegmentedControlSize.M], Typography.Typography.Size14, Item, Indicator, Item, SegmentedControl_types.SegmentedControlSize.L, heightBySegmentedControlSize[SegmentedControl_types.SegmentedControlSize.L], paddingBySegmentedControlSize[SegmentedControl_types.SegmentedControlSize.L], Typography.Typography.Size14, Item, Indicator, Item, DisabledOpacity.default, Item, Indicator);
 
 exports.Container = Container;
 exports.Indicator = Indicator;
 exports.Item = Item;
 exports.ItemContainer = ItemContainer;
 exports.ItemLabel = ItemLabel;
-exports.indicatorTransitionMeta = indicatorTransitionMeta;
+exports.heightBySegmentedControlSize = heightBySegmentedControlSize;
+exports.paddingBySegmentedControlSize = paddingBySegmentedControlSize;
 //# sourceMappingURL=SegmentedControl.styled.js.map