@channel.io/bezier-react 1.6.0 → 1.6.2

package/dist/cjs/_virtual/_commonjsHelpers.js

@@ -1,8 +1,11 @@
 'use strict';
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
+exports.commonjsGlobal = commonjsGlobal;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
 //# sourceMappingURL=_commonjsHelpers.js.map

package/dist/cjs/_virtual/_commonjsHelpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/cjs/components/AutoFocus/AutoFocus.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index_module = require('../../node_modules/@radix-ui/react-slot/dist/index.module.js');
+var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 var useMergeRefs = require('../../hooks/useMergeRefs.js');
 
 /**
@@ -34,7 +34,7 @@ const AutoFocus = /*#__PURE__*/React.forwardRef(function AutoFocus({
     }
   }, [target, when]);
   const ref = useMergeRefs.default(setTarget, forwardedRef);
-  return /*#__PURE__*/React.createElement(index_module.Slot, Object.assign({
+  return /*#__PURE__*/React.createElement(index.Slot, Object.assign({
     ref: ref
   }, rest), children);
 });

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

@@ -1 +1 @@
-{"version":3,"file":"AutoFocus.js","sources":["../../../../src/components/AutoFocus/AutoFocus.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useLayoutEffect,\n  useState,\n} from 'react'\n\nimport { Slot } from '@radix-ui/react-slot'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\n\nimport { type AutoFocusProps } from './AutoFocus.types'\n\n/**\n * `AutoFocus` is a component that automatically focuses its child element when they are added to the document.\n * It is useful when you want to focus on a specific element when the component is mounted.\n * It doesn't render any DOM node.\n *\n * @example\n *\n * ```tsx\n * <AutoFocus>\n *   <button>Close</button>\n * </AutoFocus>\n *\n * // You can also use it with the additional condition\n * <AutoFocus when={condition}>\n *   <button>Close</button>\n * </AutoFocus>\n * ```\n */\nexport const AutoFocus = forwardRef<HTMLElement, AutoFocusProps>(function AutoFocus({\n  children,\n  when = true,\n  ...rest\n}, forwardedRef) {\n  const [target, setTarget] = useState<HTMLElement | null>(null)\n\n  useLayoutEffect(function focus() {\n    if (target && when) {\n      target.focus()\n    }\n  }, [\n    target,\n    when,\n  ])\n\n  const ref = useMergeRefs(\n    setTarget,\n    forwardedRef,\n  )\n\n  return (\n    <Slot\n      ref={ref}\n      {...rest}\n    >\n      { children }\n    </Slot>\n  )\n})\n"],"names":["AutoFocus","forwardRef","children","when","rest","forwardedRef","target","setTarget","useState","useLayoutEffect","focus","ref","useMergeRefs","React","createElement","Slot","Object","assign"],"mappings":";;;;;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,SAAS,gBAAGC,gBAAU,CAA8B,SAASD,SAASA,CAAC;EAClFE,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;EACX,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;EACf,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC,CAAA;AAE9DC,EAAAA,qBAAe,CAAC,SAASC,KAAKA,GAAG;IAC/B,IAAIJ,MAAM,IAAIH,IAAI,EAAE;MAClBG,MAAM,CAACI,KAAK,EAAE,CAAA;AAChB,KAAA;AACF,GAAC,EAAE,CACDJ,MAAM,EACNH,IAAI,CACL,CAAC,CAAA;AAEF,EAAA,MAAMQ,GAAG,GAAGC,oBAAY,CACtBL,SAAS,EACTF,YACF,CAAC,CAAA;EAED,oBACEQ,KAAA,CAAAC,aAAA,CAACC,iBAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACHN,IAAAA,GAAG,EAAEA,GAAAA;GACDP,EAAAA,IAAI,CAENF,EAAAA,QACE,CAAC,CAAA;AAEX,CAAC;;;;"}
+{"version":3,"file":"AutoFocus.js","sources":["../../../../src/components/AutoFocus/AutoFocus.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useLayoutEffect,\n  useState,\n} from 'react'\n\nimport { Slot } from '@radix-ui/react-slot'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\n\nimport { type AutoFocusProps } from './AutoFocus.types'\n\n/**\n * `AutoFocus` is a component that automatically focuses its child element when they are added to the document.\n * It is useful when you want to focus on a specific element when the component is mounted.\n * It doesn't render any DOM node.\n *\n * @example\n *\n * ```tsx\n * <AutoFocus>\n *   <button>Close</button>\n * </AutoFocus>\n *\n * // You can also use it with the additional condition\n * <AutoFocus when={condition}>\n *   <button>Close</button>\n * </AutoFocus>\n * ```\n */\nexport const AutoFocus = forwardRef<HTMLElement, AutoFocusProps>(function AutoFocus({\n  children,\n  when = true,\n  ...rest\n}, forwardedRef) {\n  const [target, setTarget] = useState<HTMLElement | null>(null)\n\n  useLayoutEffect(function focus() {\n    if (target && when) {\n      target.focus()\n    }\n  }, [\n    target,\n    when,\n  ])\n\n  const ref = useMergeRefs(\n    setTarget,\n    forwardedRef,\n  )\n\n  return (\n    <Slot\n      ref={ref}\n      {...rest}\n    >\n      { children }\n    </Slot>\n  )\n})\n"],"names":["AutoFocus","forwardRef","children","when","rest","forwardedRef","target","setTarget","useState","useLayoutEffect","focus","ref","useMergeRefs","React","createElement","Slot","Object","assign"],"mappings":";;;;;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,SAAS,gBAAGC,gBAAU,CAA8B,SAASD,SAASA,CAAC;EAClFE,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;EACX,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;EACf,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC,CAAA;AAE9DC,EAAAA,qBAAe,CAAC,SAASC,KAAKA,GAAG;IAC/B,IAAIJ,MAAM,IAAIH,IAAI,EAAE;MAClBG,MAAM,CAACI,KAAK,EAAE,CAAA;AAChB,KAAA;AACF,GAAC,EAAE,CACDJ,MAAM,EACNH,IAAI,CACL,CAAC,CAAA;AAEF,EAAA,MAAMQ,GAAG,GAAGC,oBAAY,CACtBL,SAAS,EACTF,YACF,CAAC,CAAA;EAED,oBACEQ,KAAA,CAAAC,aAAA,CAACC,UAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACHN,IAAAA,GAAG,EAAEA,GAAAA;GACDP,EAAAA,IAAI,CAENF,EAAAA,QACE,CAAC,CAAA;AAEX,CAAC;;;;"}

package/dist/cjs/components/Avatars/CheckableAvatar/CheckableAvatar.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index_module = require('../../../node_modules/@radix-ui/react-checkbox/dist/index.module.js');
+var index = require('../../../node_modules/@radix-ui/react-checkbox/dist/index.js');
 var useId = require('../../../hooks/useId.js');
 var Avatar_types = require('../Avatar/Avatar.types.js');
 var CheckableAvatar_styled = require('./CheckableAvatar.styled.js');
@@ -47,7 +47,7 @@ const CheckableAvatar = /*#__PURE__*/React.forwardRef(function CheckableAvatar({
     id: id,
     name: name,
     disabled: disabled
-  }, props), /*#__PURE__*/React.createElement(index_module.Indicator, {
+  }, props), /*#__PURE__*/React.createElement(index.Indicator, {
     asChild: true,
     forceMount: true
   }, /*#__PURE__*/React.createElement(CheckableAvatar_styled.CheckIcon, {

package/dist/cjs/components/Avatars/CheckableAvatar/CheckableAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckableAvatar.js","sources":["../../../../../src/components/Avatars/CheckableAvatar/CheckableAvatar.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\n\nimport useId from '~/src/hooks/useId'\n\nimport { AvatarSize } from '~/src/components/Avatars/Avatar'\nimport { VisuallyHidden } from '~/src/components/VisuallyHidden'\n\nimport type { CheckableAvatarProps } from './CheckableAvatar.types'\n\nimport * as Styled from './CheckableAvatar.styled'\n\n/**\n * `CheckableAvatar` is a checkbox component that looks like `Avatar`.\n *\n * @example\n *\n * ```tsx\n * const [checked, setChecked] = useState(false)\n * // Controlled\n * <CheckableAvatar\n *   name=\"John Doe\"\n *   avatarUrl=\"...\"\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * />\n * // Uncontrolled\n * <CheckableAvatar\n *   name=\"John Doe\"\n *   avatarUrl=\"...\"\n *   defaultChecked\n * />\n * ```\n */\nexport const CheckableAvatar = forwardRef<HTMLButtonElement, CheckableAvatarProps>(function CheckableAvatar({\n  children,\n  id: idProp,\n  name,\n  size = AvatarSize.Size24,\n  disabled,\n  avatarUrl,\n  fallbackUrl,\n  status,\n  showBorder,\n  ...props\n}, forwardedRef) {\n  const id = useId(idProp, 'bezier-checkable-avatar')\n\n  return (\n    <Styled.CheckboxPrimitiveRoot\n      ref={forwardedRef}\n      id={id}\n      name={name}\n      disabled={disabled}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        asChild\n        forceMount\n      >\n        <Styled.CheckIcon className={`size-${size}`} />\n      </CheckboxPrimitive.Indicator>\n\n      <Styled.Avatar\n        aria-hidden\n        size={size}\n        name={name}\n        disabled={disabled}\n        avatarUrl={avatarUrl}\n        fallbackUrl={fallbackUrl}\n        status={status}\n        showBorder={showBorder}\n      >\n        { children }\n      </Styled.Avatar>\n\n      <VisuallyHidden>\n        <label htmlFor={id}>{ name }</label>\n      </VisuallyHidden>\n    </Styled.CheckboxPrimitiveRoot>\n  )\n})\n"],"names":["CheckableAvatar","forwardRef","children","id","idProp","name","size","AvatarSize","Size24","disabled","avatarUrl","fallbackUrl","status","showBorder","props","forwardedRef","useId","React","createElement","Styled","Object","assign","ref","CheckboxPrimitive","asChild","forceMount","className","VisuallyHidden","htmlFor"],"mappings":";;;;;;;;;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,eAAe,gBAAGC,gBAAU,CAA0C,SAASD,eAAeA,CAAC;EAC1GE,QAAQ;AACRC,EAAAA,EAAE,EAAEC,MAAM;EACVC,IAAI;EACJC,IAAI,GAAGC,uBAAU,CAACC,MAAM;EACxBC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC,MAAM;EACNC,UAAU;EACV,GAAGC,KAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,MAAMZ,EAAE,GAAGa,aAAK,CAACZ,MAAM,EAAE,yBAAyB,CAAC,CAAA;EAEnD,oBACEa,KAAA,CAAAC,aAAA,CAACC,4CAA4B,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAC3BC,IAAAA,GAAG,EAAEP,YAAa;AAClBZ,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,QAAQ,EAAEA,QAAAA;GACNK,EAAAA,KAAK,gBAETG,KAAA,CAAAC,aAAA,CAACK,sBAA2B,EAAA;IAC1BC,OAAO,EAAA,IAAA;IACPC,UAAU,EAAA,IAAA;AAAA,GAAA,eAEVR,KAAA,CAAAC,aAAA,CAACC,gCAAgB,EAAA;IAACO,SAAS,EAAG,QAAOpB,IAAK,CAAA,CAAA;GAAI,CACnB,CAAC,eAE9BW,KAAA,CAAAC,aAAA,CAACC,6BAAa,EAAA;IACZ,aAAW,EAAA,IAAA;AACXb,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,UAAU,EAAEA,UAAAA;GAEVX,EAAAA,QACW,CAAC,eAEhBe,KAAA,CAAAC,aAAA,CAACS,6BAAc,EAAA,IAAA,eACbV,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AAAOU,IAAAA,OAAO,EAAEzB,EAAAA;GAAME,EAAAA,IAAa,CACrB,CACY,CAAC,CAAA;AAEnC,CAAC;;;;"}
+{"version":3,"file":"CheckableAvatar.js","sources":["../../../../../src/components/Avatars/CheckableAvatar/CheckableAvatar.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\n\nimport useId from '~/src/hooks/useId'\n\nimport { AvatarSize } from '~/src/components/Avatars/Avatar'\nimport { VisuallyHidden } from '~/src/components/VisuallyHidden'\n\nimport type { CheckableAvatarProps } from './CheckableAvatar.types'\n\nimport * as Styled from './CheckableAvatar.styled'\n\n/**\n * `CheckableAvatar` is a checkbox component that looks like `Avatar`.\n *\n * @example\n *\n * ```tsx\n * const [checked, setChecked] = useState(false)\n * // Controlled\n * <CheckableAvatar\n *   name=\"John Doe\"\n *   avatarUrl=\"...\"\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * />\n * // Uncontrolled\n * <CheckableAvatar\n *   name=\"John Doe\"\n *   avatarUrl=\"...\"\n *   defaultChecked\n * />\n * ```\n */\nexport const CheckableAvatar = forwardRef<HTMLButtonElement, CheckableAvatarProps>(function CheckableAvatar({\n  children,\n  id: idProp,\n  name,\n  size = AvatarSize.Size24,\n  disabled,\n  avatarUrl,\n  fallbackUrl,\n  status,\n  showBorder,\n  ...props\n}, forwardedRef) {\n  const id = useId(idProp, 'bezier-checkable-avatar')\n\n  return (\n    <Styled.CheckboxPrimitiveRoot\n      ref={forwardedRef}\n      id={id}\n      name={name}\n      disabled={disabled}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        asChild\n        forceMount\n      >\n        <Styled.CheckIcon className={`size-${size}`} />\n      </CheckboxPrimitive.Indicator>\n\n      <Styled.Avatar\n        aria-hidden\n        size={size}\n        name={name}\n        disabled={disabled}\n        avatarUrl={avatarUrl}\n        fallbackUrl={fallbackUrl}\n        status={status}\n        showBorder={showBorder}\n      >\n        { children }\n      </Styled.Avatar>\n\n      <VisuallyHidden>\n        <label htmlFor={id}>{ name }</label>\n      </VisuallyHidden>\n    </Styled.CheckboxPrimitiveRoot>\n  )\n})\n"],"names":["CheckableAvatar","forwardRef","children","id","idProp","name","size","AvatarSize","Size24","disabled","avatarUrl","fallbackUrl","status","showBorder","props","forwardedRef","useId","React","createElement","Styled","Object","assign","ref","CheckboxPrimitive","asChild","forceMount","className","VisuallyHidden","htmlFor"],"mappings":";;;;;;;;;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,eAAe,gBAAGC,gBAAU,CAA0C,SAASD,eAAeA,CAAC;EAC1GE,QAAQ;AACRC,EAAAA,EAAE,EAAEC,MAAM;EACVC,IAAI;EACJC,IAAI,GAAGC,uBAAU,CAACC,MAAM;EACxBC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC,MAAM;EACNC,UAAU;EACV,GAAGC,KAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,MAAMZ,EAAE,GAAGa,aAAK,CAACZ,MAAM,EAAE,yBAAyB,CAAC,CAAA;EAEnD,oBACEa,KAAA,CAAAC,aAAA,CAACC,4CAA4B,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAC3BC,IAAAA,GAAG,EAAEP,YAAa;AAClBZ,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,QAAQ,EAAEA,QAAAA;GACNK,EAAAA,KAAK,gBAETG,KAAA,CAAAC,aAAA,CAACK,eAA2B,EAAA;IAC1BC,OAAO,EAAA,IAAA;IACPC,UAAU,EAAA,IAAA;AAAA,GAAA,eAEVR,KAAA,CAAAC,aAAA,CAACC,gCAAgB,EAAA;IAACO,SAAS,EAAG,QAAOpB,IAAK,CAAA,CAAA;GAAI,CACnB,CAAC,eAE9BW,KAAA,CAAAC,aAAA,CAACC,6BAAa,EAAA;IACZ,aAAW,EAAA,IAAA;AACXb,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,UAAU,EAAEA,UAAAA;GAEVX,EAAAA,QACW,CAAC,eAEhBe,KAAA,CAAAC,aAAA,CAACS,6BAAc,EAAA,IAAA,eACbV,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AAAOU,IAAAA,OAAO,EAAEzB,EAAAA;GAAME,EAAAA,IAAa,CACrB,CACY,CAAC,CAAA;AAEnC,CAAC;;;;"}

package/dist/cjs/components/Avatars/CheckableAvatar/CheckableAvatar.styled.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var bezierIcons = require('@channel.io/bezier-icons');
-var index_module = require('../../../node_modules/@radix-ui/react-checkbox/dist/index.module.js');
+var index = require('../../../node_modules/@radix-ui/react-checkbox/dist/index.js');
 var ZIndex = require('../../../constants/ZIndex.js');
 var styleUtils = require('../../../utils/styleUtils.js');
 var Avatar$1 = require('../Avatar/Avatar.js');
@@ -49,7 +49,7 @@ const focusStyles = {
  * NOTE: Using the `!important` keyword to override a local CSS variable of `AlphaSmoothCorners`.
  * Improvements are needed to the styling when using the `AlphaSmoothCorners` component.
  */
-const CheckboxPrimitiveRoot = /*#__PURE__*/FoundationStyledComponent.styled(index_module.Root).withConfig({
+const CheckboxPrimitiveRoot = /*#__PURE__*/FoundationStyledComponent.styled(index.Root).withConfig({
   displayName: "CheckableAvatarstyled__CheckboxPrimitiveRoot",
   componentId: "sc-1t8b49w-2"
 })(["all:unset;position:relative;z-index:", ";cursor:pointer;outline:none;&[data-disabled]{cursor:not-allowed;}&:not([data-state='unchecked']){", "{visibility:visible;}", " > div{--bezier-alpha-smooth-corners-box-background-image:none !important;--bezier-alpha-smooth-corners-box-background-color:var(--bgtxt-green-normal) !important;}}&:not([data-disabled]){", " &:focus-visible{", "}&[data-state='unchecked']{", " &:focus-visible{", "}}&:not([data-state='unchecked']){", " &:focus-visible{", "}}}"], ZIndex.ZIndex.Base, CheckIcon, Avatar, styleUtils.touchableHover(focusStyles.common), focusStyles.common, styleUtils.touchableHover(focusStyles.unchecked), focusStyles.unchecked, styleUtils.touchableHover(focusStyles.checked), focusStyles.checked);

package/dist/cjs/components/Avatars/CheckableAvatar/CheckableAvatar.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckableAvatar.styled.js","sources":["../../../../../src/components/Avatars/CheckableAvatar/CheckableAvatar.styled.ts"],"sourcesContent":["import { CheckIcon as CheckIconSource } from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\n\nimport {\n  absoluteCenter,\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport { ZIndex } from '~/src/constants/ZIndex'\nimport { touchableHover } from '~/src/utils/styleUtils'\n\nimport {\n  AvatarSize,\n  Avatar as BaseAvatar,\n} from '~/src/components/Avatars/Avatar'\nimport { Icon } from '~/src/components/Icon'\n\nexport const Avatar = styled(BaseAvatar)``\n\nexport const CheckIcon = styled(Icon).attrs({\n  source: CheckIconSource,\n  color: 'bgtxt-absolute-white-normal',\n})`\n  position: absolute;\n  z-index: ${ZIndex.Float};\n  visibility: hidden;\n\n  ${absoluteCenter()}\n\n  &.size-${AvatarSize.Size20} {\n    width: 14px;\n    height: 14px;\n  }\n\n  &.size-${AvatarSize.Size24} {\n    width: 16px;\n    height: 16px;\n  }\n\n  &.size-${AvatarSize.Size30} {\n    width: 20px;\n    height: 20px;\n  }\n\n  &.size-${AvatarSize.Size36} {\n    width: 22px;\n    height: 22px;\n  }\n\n  &.size-${AvatarSize.Size42} {\n    width: 24px;\n    height: 24px;\n  }\n\n  &.size-${AvatarSize.Size48} {\n    width: 28px;\n    height: 28px;\n  }\n\n  &.size-${AvatarSize.Size72} {\n    width: 42px;\n    height: 42px;\n  }\n\n  &.size-${AvatarSize.Size90} {\n    width: 52px;\n    height: 52px;\n  }\n\n  &.size-${AvatarSize.Size120} {\n    width: 68px;\n    height: 68px;\n  }\n`\n\nconst focusStyles = {\n  common: css`\n    ${CheckIcon} {\n      visibility: visible;\n    }\n\n    /* stylelint-disable declaration-block-semicolon-newline-after, rule-empty-line-before */\n    ${Avatar} > div {\n      --bezier-alpha-smooth-corners-box-background-image: none !important;\n    }\n  `,\n  unchecked: css`\n    ${Avatar} > div {\n      --bezier-alpha-smooth-corners-box-background-color: var(--bg-grey-dark) !important;\n    }\n  `,\n  checked: css`\n    ${Avatar} > div {\n      --bezier-alpha-smooth-corners-box-background-color: var(--bgtxt-green-dark) !important;\n    }\n    /* stylelint-enable declaration-block-semicolon-newline-after, rule-empty-line-before */\n  `,\n}\n\n/**\n * NOTE: Using the `!important` keyword to override a local CSS variable of `AlphaSmoothCorners`.\n * Improvements are needed to the styling when using the `AlphaSmoothCorners` component.\n */\nexport const CheckboxPrimitiveRoot = styled(CheckboxPrimitive.Root)`\n  all: unset;\n  position: relative;\n  z-index: ${ZIndex.Base};\n  cursor: pointer;\n  outline: none;\n\n  &[data-disabled] {\n    cursor: not-allowed;\n  }\n\n  &:not([data-state='unchecked']) {\n    ${CheckIcon} {\n      visibility: visible;\n    }\n\n    /* stylelint-disable declaration-block-semicolon-newline-after, rule-empty-line-before */\n    ${Avatar} > div {\n      --bezier-alpha-smooth-corners-box-background-image: none !important;\n      --bezier-alpha-smooth-corners-box-background-color: var(--bgtxt-green-normal) !important;\n    }\n    /* stylelint-enable declaration-block-semicolon-newline-after, rule-empty-line-before */\n  }\n\n  &:not([data-disabled]) {\n    ${touchableHover(focusStyles.common)}\n\n    &:focus-visible {\n      ${focusStyles.common}\n    }\n\n    &[data-state='unchecked'] {\n      ${touchableHover(focusStyles.unchecked)}\n\n      &:focus-visible {\n        ${focusStyles.unchecked}\n      }\n    }\n\n    &:not([data-state='unchecked']) {\n      ${touchableHover(focusStyles.checked)}\n\n      &:focus-visible {\n        ${focusStyles.checked}\n      }\n    }\n  }\n`\n"],"names":["Avatar","styled","BaseAvatar","withConfig","displayName","componentId","CheckIcon","Icon","attrs","source","CheckIconSource","color","ZIndex","Float","absoluteCenter","AvatarSize","Size20","Size24","Size30","Size36","Size42","Size48","Size72","Size90","Size120","focusStyles","common","css","unchecked","checked","CheckboxPrimitiveRoot","CheckboxPrimitive","Base","touchableHover"],"mappings":";;;;;;;;;;;;AAkBO,MAAMA,MAAM,gBAAGC,gCAAM,CAACC,eAAU,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,+BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,EAAA;AAEnC,MAAMC,SAAS,gBAAGL,gCAAM,CAACM,SAAI,CAAC,CAACC,KAAK,CAAC;AAC1CC,EAAAA,MAAM,EAAEC,qBAAe;AACvBC,EAAAA,KAAK,EAAE,6BAAA;AACT,CAAC,CAAC,CAAAR,UAAA,CAAA;EAAAC,WAAA,EAAA,kCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,4BAAA,EAAA,qBAAA,EAAA,UAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,2BAAA,CAAA,EAEWO,aAAM,CAACC,KAAK,EAGrBC,qBAAc,EAAE,EAETC,uBAAU,CAACC,MAAM,EAKjBD,uBAAU,CAACE,MAAM,EAKjBF,uBAAU,CAACG,MAAM,EAKjBH,uBAAU,CAACI,MAAM,EAKjBJ,uBAAU,CAACK,MAAM,EAKjBL,uBAAU,CAACM,MAAM,EAKjBN,uBAAU,CAACO,MAAM,EAKjBP,uBAAU,CAACQ,MAAM,EAKjBR,uBAAU,CAACS,OAAO,EAI5B;AAED,MAAMC,WAAW,GAAG;AAClBC,EAAAA,MAAM,EAAEC,6BAAI,CAAA;AACd,IAAA,EAAMrB,SAAU,CAAA;AAChB;AACA;AACA;AACA;AACA,IAAA,EAAMN,MAAO,CAAA;AACb;AACA;AACA,EAAG,CAAA;AACD4B,EAAAA,SAAS,EAAED,6BAAI,CAAA;AACjB,IAAA,EAAM3B,MAAO,CAAA;AACb;AACA;AACA,EAAG,CAAA;AACD6B,EAAAA,OAAO,EAAEF,6BAAI,CAAA;AACf,IAAA,EAAM3B,MAAO,CAAA;AACb;AACA;AACA;AACA,EAAA,CAAA;AACA,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACO,MAAM8B,qBAAqB,gBAAG7B,gCAAM,CAAC8B,iBAAsB,CAAC,CAAA5B,UAAA,CAAA;EAAAC,WAAA,EAAA,8CAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,sCAAA,EAAA,oGAAA,EAAA,uBAAA,EAAA,6LAAA,EAAA,mBAAA,EAAA,6BAAA,EAAA,mBAAA,EAAA,oCAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,EAGtDO,aAAM,CAACoB,IAAI,EASlB1B,SAAS,EAKTN,MAAM,EAQNiC,yBAAc,CAACR,WAAW,CAACC,MAAM,CAAC,EAGhCD,WAAW,CAACC,MAAM,EAIlBO,yBAAc,CAACR,WAAW,CAACG,SAAS,CAAC,EAGnCH,WAAW,CAACG,SAAS,EAKvBK,yBAAc,CAACR,WAAW,CAACI,OAAO,CAAC,EAGjCJ,WAAW,CAACI,OAAO;;;;;;"}
+{"version":3,"file":"CheckableAvatar.styled.js","sources":["../../../../../src/components/Avatars/CheckableAvatar/CheckableAvatar.styled.ts"],"sourcesContent":["import { CheckIcon as CheckIconSource } from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\n\nimport {\n  absoluteCenter,\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport { ZIndex } from '~/src/constants/ZIndex'\nimport { touchableHover } from '~/src/utils/styleUtils'\n\nimport {\n  AvatarSize,\n  Avatar as BaseAvatar,\n} from '~/src/components/Avatars/Avatar'\nimport { Icon } from '~/src/components/Icon'\n\nexport const Avatar = styled(BaseAvatar)``\n\nexport const CheckIcon = styled(Icon).attrs({\n  source: CheckIconSource,\n  color: 'bgtxt-absolute-white-normal',\n})`\n  position: absolute;\n  z-index: ${ZIndex.Float};\n  visibility: hidden;\n\n  ${absoluteCenter()}\n\n  &.size-${AvatarSize.Size20} {\n    width: 14px;\n    height: 14px;\n  }\n\n  &.size-${AvatarSize.Size24} {\n    width: 16px;\n    height: 16px;\n  }\n\n  &.size-${AvatarSize.Size30} {\n    width: 20px;\n    height: 20px;\n  }\n\n  &.size-${AvatarSize.Size36} {\n    width: 22px;\n    height: 22px;\n  }\n\n  &.size-${AvatarSize.Size42} {\n    width: 24px;\n    height: 24px;\n  }\n\n  &.size-${AvatarSize.Size48} {\n    width: 28px;\n    height: 28px;\n  }\n\n  &.size-${AvatarSize.Size72} {\n    width: 42px;\n    height: 42px;\n  }\n\n  &.size-${AvatarSize.Size90} {\n    width: 52px;\n    height: 52px;\n  }\n\n  &.size-${AvatarSize.Size120} {\n    width: 68px;\n    height: 68px;\n  }\n`\n\nconst focusStyles = {\n  common: css`\n    ${CheckIcon} {\n      visibility: visible;\n    }\n\n    /* stylelint-disable declaration-block-semicolon-newline-after, rule-empty-line-before */\n    ${Avatar} > div {\n      --bezier-alpha-smooth-corners-box-background-image: none !important;\n    }\n  `,\n  unchecked: css`\n    ${Avatar} > div {\n      --bezier-alpha-smooth-corners-box-background-color: var(--bg-grey-dark) !important;\n    }\n  `,\n  checked: css`\n    ${Avatar} > div {\n      --bezier-alpha-smooth-corners-box-background-color: var(--bgtxt-green-dark) !important;\n    }\n    /* stylelint-enable declaration-block-semicolon-newline-after, rule-empty-line-before */\n  `,\n}\n\n/**\n * NOTE: Using the `!important` keyword to override a local CSS variable of `AlphaSmoothCorners`.\n * Improvements are needed to the styling when using the `AlphaSmoothCorners` component.\n */\nexport const CheckboxPrimitiveRoot = styled(CheckboxPrimitive.Root)`\n  all: unset;\n  position: relative;\n  z-index: ${ZIndex.Base};\n  cursor: pointer;\n  outline: none;\n\n  &[data-disabled] {\n    cursor: not-allowed;\n  }\n\n  &:not([data-state='unchecked']) {\n    ${CheckIcon} {\n      visibility: visible;\n    }\n\n    /* stylelint-disable declaration-block-semicolon-newline-after, rule-empty-line-before */\n    ${Avatar} > div {\n      --bezier-alpha-smooth-corners-box-background-image: none !important;\n      --bezier-alpha-smooth-corners-box-background-color: var(--bgtxt-green-normal) !important;\n    }\n    /* stylelint-enable declaration-block-semicolon-newline-after, rule-empty-line-before */\n  }\n\n  &:not([data-disabled]) {\n    ${touchableHover(focusStyles.common)}\n\n    &:focus-visible {\n      ${focusStyles.common}\n    }\n\n    &[data-state='unchecked'] {\n      ${touchableHover(focusStyles.unchecked)}\n\n      &:focus-visible {\n        ${focusStyles.unchecked}\n      }\n    }\n\n    &:not([data-state='unchecked']) {\n      ${touchableHover(focusStyles.checked)}\n\n      &:focus-visible {\n        ${focusStyles.checked}\n      }\n    }\n  }\n`\n"],"names":["Avatar","styled","BaseAvatar","withConfig","displayName","componentId","CheckIcon","Icon","attrs","source","CheckIconSource","color","ZIndex","Float","absoluteCenter","AvatarSize","Size20","Size24","Size30","Size36","Size42","Size48","Size72","Size90","Size120","focusStyles","common","css","unchecked","checked","CheckboxPrimitiveRoot","CheckboxPrimitive","Base","touchableHover"],"mappings":";;;;;;;;;;;;AAkBO,MAAMA,MAAM,gBAAGC,gCAAM,CAACC,eAAU,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,+BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,EAAA;AAEnC,MAAMC,SAAS,gBAAGL,gCAAM,CAACM,SAAI,CAAC,CAACC,KAAK,CAAC;AAC1CC,EAAAA,MAAM,EAAEC,qBAAe;AACvBC,EAAAA,KAAK,EAAE,6BAAA;AACT,CAAC,CAAC,CAAAR,UAAA,CAAA;EAAAC,WAAA,EAAA,kCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,4BAAA,EAAA,qBAAA,EAAA,UAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,2BAAA,CAAA,EAEWO,aAAM,CAACC,KAAK,EAGrBC,qBAAc,EAAE,EAETC,uBAAU,CAACC,MAAM,EAKjBD,uBAAU,CAACE,MAAM,EAKjBF,uBAAU,CAACG,MAAM,EAKjBH,uBAAU,CAACI,MAAM,EAKjBJ,uBAAU,CAACK,MAAM,EAKjBL,uBAAU,CAACM,MAAM,EAKjBN,uBAAU,CAACO,MAAM,EAKjBP,uBAAU,CAACQ,MAAM,EAKjBR,uBAAU,CAACS,OAAO,EAI5B;AAED,MAAMC,WAAW,GAAG;AAClBC,EAAAA,MAAM,EAAEC,6BAAI,CAAA;AACd,IAAA,EAAMrB,SAAU,CAAA;AAChB;AACA;AACA;AACA;AACA,IAAA,EAAMN,MAAO,CAAA;AACb;AACA;AACA,EAAG,CAAA;AACD4B,EAAAA,SAAS,EAAED,6BAAI,CAAA;AACjB,IAAA,EAAM3B,MAAO,CAAA;AACb;AACA;AACA,EAAG,CAAA;AACD6B,EAAAA,OAAO,EAAEF,6BAAI,CAAA;AACf,IAAA,EAAM3B,MAAO,CAAA;AACb;AACA;AACA;AACA,EAAA,CAAA;AACA,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACO,MAAM8B,qBAAqB,gBAAG7B,gCAAM,CAAC8B,UAAsB,CAAC,CAAA5B,UAAA,CAAA;EAAAC,WAAA,EAAA,8CAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,sCAAA,EAAA,oGAAA,EAAA,uBAAA,EAAA,6LAAA,EAAA,mBAAA,EAAA,6BAAA,EAAA,mBAAA,EAAA,oCAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,EAGtDO,aAAM,CAACoB,IAAI,EASlB1B,SAAS,EAKTN,MAAM,EAQNiC,yBAAc,CAACR,WAAW,CAACC,MAAM,CAAC,EAGhCD,WAAW,CAACC,MAAM,EAIlBO,yBAAc,CAACR,WAAW,CAACG,SAAS,CAAC,EAGnCH,WAAW,CAACG,SAAS,EAKvBK,yBAAc,CAACR,WAAW,CAACI,OAAO,CAAC,EAGjCJ,WAAW,CAACI,OAAO;;;;;;"}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var index_module = require('../../node_modules/@radix-ui/react-separator/dist/index.module.js');
+var index = require('../../node_modules/@radix-ui/react-separator/dist/index.js');
 var Divider_styled = require('./Divider.styled.js');
 
 const DIVIDER_TEST_ID = 'bezier-react-divider';
@@ -15,7 +15,7 @@ const Divider = /*#__PURE__*/React.forwardRef(({
   withoutParallelIndent = false,
   withoutIndent = false,
   ...rest
-}, forwardedRef) => /*#__PURE__*/React.createElement(index_module.Root, {
+}, forwardedRef) => /*#__PURE__*/React.createElement(index.Root, {
   asChild: true,
   orientation: orientation,
   decorative: decorative

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

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

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

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
-var index_module = require('../../../node_modules/@radix-ui/react-checkbox/dist/index.module.js');
+var index = require('../../../node_modules/@radix-ui/react-checkbox/dist/index.js');
 var useId = require('../../../hooks/useId.js');
 var FormFieldSize = require('../FormFieldSize.js');
 var useFormFieldProps = require('../useFormFieldProps.js');
@@ -45,7 +45,7 @@ function CheckboxImpl({
     id: id,
     checked: checked,
     "data-invalid": formFieldProps['aria-invalid']
-  }, formFieldProps), /*#__PURE__*/React.createElement(index_module.Indicator, {
+  }, formFieldProps), /*#__PURE__*/React.createElement(index.Indicator, {
     asChild: true
     /* NOTE: To allow the icon to be rendered even if unchecked. */,
     forceMount: true

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

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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index_module = require('../../../node_modules/@radix-ui/react-checkbox/dist/index.module.js');
+var index = require('../../../node_modules/@radix-ui/react-checkbox/dist/index.js');
 var DisabledOpacity = require('../../../constants/DisabledOpacity.js');
 var styleUtils = require('../../../utils/styleUtils.js');
 var mixins = require('../Inputs/mixins.js');
@@ -30,7 +30,7 @@ const focusStyle = FoundationStyledComponent.css`
   ${backgroundFocusStyle}
   ${checkIconFocusStyle}
 `;
-const CheckboxPrimitiveRoot = /*#__PURE__*/FoundationStyledComponent.styled(index_module.Root).withConfig({
+const CheckboxPrimitiveRoot = /*#__PURE__*/FoundationStyledComponent.styled(index.Root).withConfig({
   displayName: "Checkboxstyled__CheckboxPrimitiveRoot",
   componentId: "sc-9lbfgn-1"
 })(["all:unset;display:flex;align-items:center;justify-content:center;width:", "px;height:", "px;margin:", "px;background-color:var(--bg-white-normal);border-radius:7px;box-shadow:inset 0 0 0 2px var(--bdr-black-dark);&[data-disabled]{background-color:var(--bg-black-dark);box-shadow:none;}&[data-invalid]{", "}&[data-state='checked'],&[data-state='indeterminate']{background-color:var(--bgtxt-green-normal);&:not([data-invalid]){box-shadow:none;}}", " &&{&:focus-visible{", " ", "}}", ""], CHECKBOX_SIZE, CHECKBOX_SIZE, CHECKBOX_MARGIN, mixins.erroredInputWrapperStyle, styleUtils.touchableHover(focusStyle), checkIconFocusStyle, mixins.focusedInputWrapperStyle, ({

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

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

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index_module = require('../../../node_modules/@radix-ui/react-radio-group/dist/index.module.js');
+var index = require('../../../node_modules/@radix-ui/react-radio-group/dist/index.js');
 var useFormFieldProps = require('../useFormFieldProps.js');
 var AlphaStack = require('../../AlphaStack/AlphaStack.js');
 
@@ -12,7 +12,7 @@ function RadioGroupImpl({
   ...rest
 }, forwardedRef) {
   const formFieldProps = useFormFieldProps.default(rest);
-  return /*#__PURE__*/React.createElement(index_module.Root, Object.assign({
+  return /*#__PURE__*/React.createElement(index.Root, Object.assign({
     asChild: true
   }, formFieldProps), /*#__PURE__*/React.createElement(AlphaStack.AlphaStack, {
     ref: forwardedRef,

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../../src/components/Forms/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\n\nimport { AlphaStack } from '~/src/components/AlphaStack'\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\n\nimport { type RadioGroupProps } from './RadioGroup.types'\n\nfunction RadioGroupImpl<Value extends string>({\n  children,\n  spacing = 0,\n  direction = 'vertical',\n  ...rest\n}: RadioGroupProps<Value>, forwardedRef: React.Ref<HTMLDivElement>) {\n  const formFieldProps = useFormFieldProps(rest)\n\n  return (\n    <RadioGroupPrimitive.Root\n      asChild\n      {...formFieldProps}\n    >\n      <AlphaStack\n        ref={forwardedRef}\n        justify=\"start\"\n        align=\"stretch\"\n        spacing={spacing}\n        direction={direction}\n      >\n        { children }\n      </AlphaStack>\n    </RadioGroupPrimitive.Root>\n  )\n}\n\n/**\n * `RadioGroup` is a set of checkable buttons, known as radio buttons.\n *\n * `RadioGroup` is a context of the `Radio` components. also, it renders an element which has the 'radiogroup' role.\n * It controls all the parts of a radio group.\n *\n * @example\n *\n * ```tsx\n * // Anatomy of the RadioGroup\n * <RadioGroup>\n *  <Radio />\n * </RadioGroup>\n * ```\n */\nexport const RadioGroup = forwardRef(RadioGroupImpl) as <Value extends string>(\n  props: RadioGroupProps<Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => ReturnType<typeof RadioGroupImpl<Value>>\n"],"names":["RadioGroupImpl","children","spacing","direction","rest","forwardedRef","formFieldProps","useFormFieldProps","React","createElement","RadioGroupPrimitive","Object","assign","asChild","AlphaStack","ref","justify","align","RadioGroup","forwardRef"],"mappings":";;;;;;;AASA,SAASA,cAAcA,CAAuB;EAC5CC,QAAQ;AACRC,EAAAA,OAAO,GAAG,CAAC;AACXC,EAAAA,SAAS,GAAG,UAAU;EACtB,GAAGC,IAAAA;AACmB,CAAC,EAAEC,YAAuC,EAAE;AAClE,EAAA,MAAMC,cAAc,GAAGC,yBAAiB,CAACH,IAAI,CAAC,CAAA;EAE9C,oBACEI,KAAA,CAAAC,aAAA,CAACC,iBAAwB,EAAAC,MAAA,CAAAC,MAAA,CAAA;IACvBC,OAAO,EAAA,IAAA;AAAA,GAAA,EACHP,cAAc,CAElBE,eAAAA,KAAA,CAAAC,aAAA,CAACK,qBAAU,EAAA;AACTC,IAAAA,GAAG,EAAEV,YAAa;AAClBW,IAAAA,OAAO,EAAC,OAAO;AACfC,IAAAA,KAAK,EAAC,SAAS;AACff,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,SAAS,EAAEA,SAAAA;GAETF,EAAAA,QACQ,CACY,CAAC,CAAA;AAE/B,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaiB,UAAU,gBAAGC,gBAAU,CAACnB,cAAc;;;;"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../../../src/components/Forms/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\n\nimport { AlphaStack } from '~/src/components/AlphaStack'\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\n\nimport { type RadioGroupProps } from './RadioGroup.types'\n\nfunction RadioGroupImpl<Value extends string>({\n  children,\n  spacing = 0,\n  direction = 'vertical',\n  ...rest\n}: RadioGroupProps<Value>, forwardedRef: React.Ref<HTMLDivElement>) {\n  const formFieldProps = useFormFieldProps(rest)\n\n  return (\n    <RadioGroupPrimitive.Root\n      asChild\n      {...formFieldProps}\n    >\n      <AlphaStack\n        ref={forwardedRef}\n        justify=\"start\"\n        align=\"stretch\"\n        spacing={spacing}\n        direction={direction}\n      >\n        { children }\n      </AlphaStack>\n    </RadioGroupPrimitive.Root>\n  )\n}\n\n/**\n * `RadioGroup` is a set of checkable buttons, known as radio buttons.\n *\n * `RadioGroup` is a context of the `Radio` components. also, it renders an element which has the 'radiogroup' role.\n * It controls all the parts of a radio group.\n *\n * @example\n *\n * ```tsx\n * // Anatomy of the RadioGroup\n * <RadioGroup>\n *  <Radio />\n * </RadioGroup>\n * ```\n */\nexport const RadioGroup = forwardRef(RadioGroupImpl) as <Value extends string>(\n  props: RadioGroupProps<Value> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => ReturnType<typeof RadioGroupImpl<Value>>\n"],"names":["RadioGroupImpl","children","spacing","direction","rest","forwardedRef","formFieldProps","useFormFieldProps","React","createElement","RadioGroupPrimitive","Object","assign","asChild","AlphaStack","ref","justify","align","RadioGroup","forwardRef"],"mappings":";;;;;;;AASA,SAASA,cAAcA,CAAuB;EAC5CC,QAAQ;AACRC,EAAAA,OAAO,GAAG,CAAC;AACXC,EAAAA,SAAS,GAAG,UAAU;EACtB,GAAGC,IAAAA;AACmB,CAAC,EAAEC,YAAuC,EAAE;AAClE,EAAA,MAAMC,cAAc,GAAGC,yBAAiB,CAACH,IAAI,CAAC,CAAA;EAE9C,oBACEI,KAAA,CAAAC,aAAA,CAACC,UAAwB,EAAAC,MAAA,CAAAC,MAAA,CAAA;IACvBC,OAAO,EAAA,IAAA;AAAA,GAAA,EACHP,cAAc,CAElBE,eAAAA,KAAA,CAAAC,aAAA,CAACK,qBAAU,EAAA;AACTC,IAAAA,GAAG,EAAEV,YAAa;AAClBW,IAAAA,OAAO,EAAC,OAAO;AACfC,IAAAA,KAAK,EAAC,SAAS;AACff,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,SAAS,EAAEA,SAAAA;GAETF,EAAAA,QACQ,CACY,CAAC,CAAA;AAE/B,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaiB,UAAU,gBAAGC,gBAAU,CAACnB,cAAc;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index_module = require('../../../node_modules/@radix-ui/react-radio-group/dist/index.module.js');
+var index = require('../../../node_modules/@radix-ui/react-radio-group/dist/index.js');
 var DisabledOpacity = require('../../../constants/DisabledOpacity.js');
 var styleUtils = require('../../../utils/styleUtils.js');
 var FormFieldSize = require('../FormFieldSize.js');
@@ -26,7 +26,7 @@ const focusStyle = FoundationStyledComponent.css`
   ${outerIndicatorFocusStyle}
   ${innerIndicatorFocusStyle}
 `;
-const RadioGroupPrimitiveItem = /*#__PURE__*/FoundationStyledComponent.styled(index_module.Item).withConfig({
+const RadioGroupPrimitiveItem = /*#__PURE__*/FoundationStyledComponent.styled(index.Item).withConfig({
   displayName: "RadioGroupstyled__RadioGroupPrimitiveItem",
   componentId: "sc-pnfggo-0"
 })(["all:unset;position:relative;display:flex;align-items:center;width:100%;height:", "px;cursor:pointer;&::before{position:relative;box-sizing:border-box;width:", "px;height:", "px;margin:", "px;content:'';background-color:var(--bg-white-normal);border-radius:50%;box-shadow:inset 0 0 0 2px var(--bdr-black-dark);}&::after{position:absolute;top:50%;left:", "px;width:", "px;height:", "px;content:'';border-radius:50%;transform:translate(-50%,-50%);}&[data-disabled]{cursor:not-allowed;opacity:", ";&::before{background-color:var(--bg-black-dark);box-shadow:none;}}&[data-state='checked']{&::before{background-color:var(--bgtxt-green-normal);box-shadow:none;}&::after{background-color:var(--bgtxt-absolute-white-dark);}}", " &:focus-visible{", " &::before{", "}}", ""], FormFieldSize.default.M, OUTER_INDICATOR_SIZE, OUTER_INDICATOR_SIZE, OUTER_INDICATOR_MARGIN, OUTER_INDICATOR_SIZE / 2 + OUTER_INDICATOR_MARGIN, INNER_INDICATOR_SIZE, INNER_INDICATOR_SIZE, DisabledOpacity.default, styleUtils.touchableHover(focusStyle), innerIndicatorFocusStyle, mixins.focusedInputWrapperStyle, ({

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.styled.js","sources":["../../../../../src/components/Forms/RadioGroup/RadioGroup.styled.ts"],"sourcesContent":["import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\n\nimport {\n  Typography,\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport { touchableHover } from '~/src/utils/styleUtils'\n\nimport { FormFieldSize } from '~/src/components/Forms'\nimport { focusedInputWrapperStyle } from '~/src/components/Forms/Inputs/mixins'\nimport { Text } from '~/src/components/Text'\n\nimport { type RadioProps } from './RadioGroup.types'\n\nconst OUTER_INDICATOR_SIZE = 18\nconst OUTER_INDICATOR_MARGIN = 1\nconst INNER_INDICATOR_SIZE = 8\n\nconst outerIndicatorFocusStyle = css`\n  &:not([data-disabled])[data-state='checked']::before {\n    background-color: var(--bgtxt-green-dark);\n  }\n`\n\nconst innerIndicatorFocusStyle = css`\n  &:not([data-disabled]):not([data-state='checked'])::after {\n    background-color: var(--bg-black-dark);\n  }\n`\n\nconst focusStyle = css`\n  ${outerIndicatorFocusStyle}\n  ${innerIndicatorFocusStyle}\n`\n\nexport const RadioGroupPrimitiveItem = styled(RadioGroupPrimitive.Item)<RadioProps<string>>`\n  all: unset;\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: ${FormFieldSize.M}px;\n  cursor: pointer;\n\n  /* Outer Indicator */\n  &::before {\n    position: relative;\n    box-sizing: border-box;\n    width: ${OUTER_INDICATOR_SIZE}px;\n    height: ${OUTER_INDICATOR_SIZE}px;\n    margin: ${OUTER_INDICATOR_MARGIN}px;\n    content: '';\n    background-color: var(--bg-white-normal);\n    border-radius: 50%;\n    box-shadow: inset 0 0 0 2px var(--bdr-black-dark);\n  }\n\n  /* Inner Indicator */\n  &::after {\n    position: absolute;\n    top: 50%;\n    left: ${(OUTER_INDICATOR_SIZE / 2) + OUTER_INDICATOR_MARGIN}px;\n    width: ${INNER_INDICATOR_SIZE}px;\n    height: ${INNER_INDICATOR_SIZE}px;\n    content: '';\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: ${DisabledOpacity};\n\n    &::before {\n      background-color: var(--bg-black-dark);\n      box-shadow: none;\n    }\n  }\n\n  &[data-state='checked'] {\n    &::before {\n      background-color: var(--bgtxt-green-normal);\n      box-shadow: none;\n    }\n\n    &::after {\n      background-color: var(--bgtxt-absolute-white-dark);\n    }\n  }\n\n  ${touchableHover(focusStyle)}\n\n  &:focus-visible {\n    ${innerIndicatorFocusStyle}\n\n    &::before {\n      ${focusedInputWrapperStyle}\n    }\n  }\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const Label = styled(Text).attrs({\n  forwardedAs: 'label',\n  typo: Typography.Size14,\n  color: 'txt-black-darkest',\n})`\n  padding-left: 12px;\n  pointer-events: none;\n`\n"],"names":["OUTER_INDICATOR_SIZE","OUTER_INDICATOR_MARGIN","INNER_INDICATOR_SIZE","outerIndicatorFocusStyle","css","innerIndicatorFocusStyle","focusStyle","RadioGroupPrimitiveItem","styled","RadioGroupPrimitive","withConfig","displayName","componentId","FormFieldSize","M","DisabledOpacity","touchableHover","focusedInputWrapperStyle","interpolation","Label","Text","attrs","forwardedAs","typo","Typography","Size14","color"],"mappings":";;;;;;;;;;;AAiBA,MAAMA,oBAAoB,GAAG,EAAE,CAAA;AAC/B,MAAMC,sBAAsB,GAAG,CAAC,CAAA;AAChC,MAAMC,oBAAoB,GAAG,CAAC,CAAA;AAE9B,MAAMC,wBAAwB,GAAGC,6BAAI,CAAA;AACrC;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAMC,wBAAwB,GAAGD,6BAAI,CAAA;AACrC;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAME,UAAU,GAAGF,6BAAI,CAAA;AACvB,EAAA,EAAID,wBAAyB,CAAA;AAC7B,EAAA,EAAIE,wBAAyB,CAAA;AAC7B,CAAC,CAAA;AAEM,MAAME,uBAAuB,gBAAGC,gCAAM,CAACC,iBAAwB,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,2CAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,gFAAA,EAAA,4EAAA,EAAA,YAAA,EAAA,YAAA,EAAA,oKAAA,EAAA,WAAA,EAAA,YAAA,EAAA,8GAAA,EAAA,gOAAA,EAAA,mBAAA,EAAA,aAAA,EAAA,IAAA,EAAA,EAAA,CAAA,EAM3DC,qBAAa,CAACC,CAAC,EAOdd,oBAAoB,EACnBA,oBAAoB,EACpBC,sBAAsB,EAWvBD,oBAAoB,GAAG,CAAC,GAAIC,sBAAsB,EAClDC,oBAAoB,EACnBA,oBAAoB,EAQnBa,uBAAe,EAmB1BC,yBAAc,CAACV,UAAU,CAAC,EAGxBD,wBAAwB,EAGtBY,+BAAwB,EAI5B,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;AAEM,MAAMC,KAAK,gBAAGX,gCAAM,CAACY,YAAI,CAAC,CAACC,KAAK,CAAC;AACtCC,EAAAA,WAAW,EAAE,OAAO;EACpBC,IAAI,EAAEC,qBAAU,CAACC,MAAM;AACvBC,EAAAA,KAAK,EAAE,mBAAA;AACT,CAAC,CAAC,CAAAhB,UAAA,CAAA;EAAAC,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAGD,CAAA,CAAA,CAAA,wCAAA,CAAA;;;;;"}
+{"version":3,"file":"RadioGroup.styled.js","sources":["../../../../../src/components/Forms/RadioGroup/RadioGroup.styled.ts"],"sourcesContent":["import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\n\nimport {\n  Typography,\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport { touchableHover } from '~/src/utils/styleUtils'\n\nimport { FormFieldSize } from '~/src/components/Forms'\nimport { focusedInputWrapperStyle } from '~/src/components/Forms/Inputs/mixins'\nimport { Text } from '~/src/components/Text'\n\nimport { type RadioProps } from './RadioGroup.types'\n\nconst OUTER_INDICATOR_SIZE = 18\nconst OUTER_INDICATOR_MARGIN = 1\nconst INNER_INDICATOR_SIZE = 8\n\nconst outerIndicatorFocusStyle = css`\n  &:not([data-disabled])[data-state='checked']::before {\n    background-color: var(--bgtxt-green-dark);\n  }\n`\n\nconst innerIndicatorFocusStyle = css`\n  &:not([data-disabled]):not([data-state='checked'])::after {\n    background-color: var(--bg-black-dark);\n  }\n`\n\nconst focusStyle = css`\n  ${outerIndicatorFocusStyle}\n  ${innerIndicatorFocusStyle}\n`\n\nexport const RadioGroupPrimitiveItem = styled(RadioGroupPrimitive.Item)<RadioProps<string>>`\n  all: unset;\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: ${FormFieldSize.M}px;\n  cursor: pointer;\n\n  /* Outer Indicator */\n  &::before {\n    position: relative;\n    box-sizing: border-box;\n    width: ${OUTER_INDICATOR_SIZE}px;\n    height: ${OUTER_INDICATOR_SIZE}px;\n    margin: ${OUTER_INDICATOR_MARGIN}px;\n    content: '';\n    background-color: var(--bg-white-normal);\n    border-radius: 50%;\n    box-shadow: inset 0 0 0 2px var(--bdr-black-dark);\n  }\n\n  /* Inner Indicator */\n  &::after {\n    position: absolute;\n    top: 50%;\n    left: ${(OUTER_INDICATOR_SIZE / 2) + OUTER_INDICATOR_MARGIN}px;\n    width: ${INNER_INDICATOR_SIZE}px;\n    height: ${INNER_INDICATOR_SIZE}px;\n    content: '';\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: ${DisabledOpacity};\n\n    &::before {\n      background-color: var(--bg-black-dark);\n      box-shadow: none;\n    }\n  }\n\n  &[data-state='checked'] {\n    &::before {\n      background-color: var(--bgtxt-green-normal);\n      box-shadow: none;\n    }\n\n    &::after {\n      background-color: var(--bgtxt-absolute-white-dark);\n    }\n  }\n\n  ${touchableHover(focusStyle)}\n\n  &:focus-visible {\n    ${innerIndicatorFocusStyle}\n\n    &::before {\n      ${focusedInputWrapperStyle}\n    }\n  }\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const Label = styled(Text).attrs({\n  forwardedAs: 'label',\n  typo: Typography.Size14,\n  color: 'txt-black-darkest',\n})`\n  padding-left: 12px;\n  pointer-events: none;\n`\n"],"names":["OUTER_INDICATOR_SIZE","OUTER_INDICATOR_MARGIN","INNER_INDICATOR_SIZE","outerIndicatorFocusStyle","css","innerIndicatorFocusStyle","focusStyle","RadioGroupPrimitiveItem","styled","RadioGroupPrimitive","withConfig","displayName","componentId","FormFieldSize","M","DisabledOpacity","touchableHover","focusedInputWrapperStyle","interpolation","Label","Text","attrs","forwardedAs","typo","Typography","Size14","color"],"mappings":";;;;;;;;;;;AAiBA,MAAMA,oBAAoB,GAAG,EAAE,CAAA;AAC/B,MAAMC,sBAAsB,GAAG,CAAC,CAAA;AAChC,MAAMC,oBAAoB,GAAG,CAAC,CAAA;AAE9B,MAAMC,wBAAwB,GAAGC,6BAAI,CAAA;AACrC;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAMC,wBAAwB,GAAGD,6BAAI,CAAA;AACrC;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAME,UAAU,GAAGF,6BAAI,CAAA;AACvB,EAAA,EAAID,wBAAyB,CAAA;AAC7B,EAAA,EAAIE,wBAAyB,CAAA;AAC7B,CAAC,CAAA;AAEM,MAAME,uBAAuB,gBAAGC,gCAAM,CAACC,UAAwB,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,2CAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,gFAAA,EAAA,4EAAA,EAAA,YAAA,EAAA,YAAA,EAAA,oKAAA,EAAA,WAAA,EAAA,YAAA,EAAA,8GAAA,EAAA,gOAAA,EAAA,mBAAA,EAAA,aAAA,EAAA,IAAA,EAAA,EAAA,CAAA,EAM3DC,qBAAa,CAACC,CAAC,EAOdd,oBAAoB,EACnBA,oBAAoB,EACpBC,sBAAsB,EAWvBD,oBAAoB,GAAG,CAAC,GAAIC,sBAAsB,EAClDC,oBAAoB,EACnBA,oBAAoB,EAQnBa,uBAAe,EAmB1BC,yBAAc,CAACV,UAAU,CAAC,EAGxBD,wBAAwB,EAGtBY,+BAAwB,EAI5B,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;AAEM,MAAMC,KAAK,gBAAGX,gCAAM,CAACY,YAAI,CAAC,CAACC,KAAK,CAAC;AACtCC,EAAAA,WAAW,EAAE,OAAO;EACpBC,IAAI,EAAEC,qBAAU,CAACC,MAAM;AACvBC,EAAAA,KAAK,EAAE,mBAAA;AACT,CAAC,CAAC,CAAAhB,UAAA,CAAA;EAAAC,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAGD,CAAA,CAAA,CAAA,wCAAA,CAAA;;;;;"}

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

@@ -1,9 +1,9 @@
 'use strict';
 
 var React = require('react');
-var index_module$1 = require('../../../node_modules/@radix-ui/react-radio-group/dist/index.module.js');
-var index_module = require('../../../node_modules/@radix-ui/react-tabs/dist/index.module.js');
-var index = require('../../../node_modules/classnames/index.js');
+var index$2 = require('../../../node_modules/@radix-ui/react-radio-group/dist/index.js');
+var index = require('../../../node_modules/@radix-ui/react-tabs/dist/index.js');
+var index$1 = require('../../../node_modules/classnames/index.js');
 var typeUtils = require('../../../utils/typeUtils.js');
 var useFormFieldProps = require('../useFormFieldProps.js');
 var SegmentedControl_types = require('./SegmentedControl.types.js');
@@ -38,8 +38,8 @@ function SegmentedControlItemListImpl({
     ...styleProp,
     '--bezier-react-segmented-control-width': typeUtils.isNumber(width) ? `${width}px` : width
   }), [styleProp, width]);
-  const className = index.default(classNameProp, size);
-  const SegmentedControlItemList = type === 'radiogroup' ? index_module$1.Root : index_module.List;
+  const className = index$1.default(classNameProp, size);
+  const SegmentedControlItemList = type === 'radiogroup' ? index$2.Root : index.List;
   return /*#__PURE__*/React.createElement(SegmentedControlItemList, Object.assign({
     asChild: true,
     ref: ref,
@@ -82,8 +82,8 @@ const SegmentedControlTabList = SegmentedControlItemList;
  *
  * It must be used as a child of `SegmentedControl`.
  */
-const SegmentedControlTabContent = index_module.Content;
-const SegmentedControlTabs = index_module.Root;
+const SegmentedControlTabContent = index.Content;
+const SegmentedControlTabs = index.Root;
 function SegmentedControlImpl({
   type = 'radiogroup',
   size = SegmentedControl_types.SegmentedControlSize.M,

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  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":";;;;;;;;;;;;;;AAkCA,SAASA,4BAA4BA,CAGnC;EACAC,QAAQ;AACRC,EAAAA,KAAK,EAAEC,SAAS;AAChBC,EAAAA,SAAS,EAAEC,aAAa;EACxB,GAAGC,IAAAA;AACuC,CAAC,EAAEC,YAAuC,EAAE;EACtF,MAAM,CAACC,eAAe,EAAEC,kBAAkB,CAAC,GAAGC,cAAQ,CAA2B,IAAI,CAAC,CAAA;EAEtF,MAAM;IACJC,IAAI;IACJC,IAAI;AACJC,IAAAA,KAAAA;AACF,GAAC,GAAGC,kDAA0B,CAAC,0BAA0B,CAAC,CAAA;EAE1D,MAAM;AACJC,IAAAA,YAAY,EAAEC,GAAG;AACjBC,IAAAA,MAAM,EAAEC,eAAAA;GACT,GAAGC,sDAA4B,CAAC;AAC/BC,IAAAA,MAAM,EAAEZ,eAAe;IACvBa,IAAI,EAAE,CAACd,YAAY,CAAA;AACrB,GAAC,CAAC,CAAA;AAEF,EAAA,MAAMe,YAAY,GAAGC,aAAO,CAAC,OAAO;AAClCd,IAAAA,kBAAAA;GACD,CAAC,EAAE,EAAE,CAAC,CAAA;AAEP,EAAA,MAAMP,KAAK,GAAGqB,aAAO,CAAC,OAAO;AAC3B,IAAA,GAAGpB,SAAS;IACZ,wCAAwC,EAAEqB,kBAAQ,CAACX,KAAK,CAAC,GAAI,CAAA,EAAEA,KAAM,CAAA,EAAA,CAAG,GAAGA,KAAAA;AAC7E,GAAC,CAAwB,EAAE,CACzBV,SAAS,EACTU,KAAK,CACN,CAAC,CAAA;AAEF,EAAA,MAAMT,SAAS,GAAGqB,eAAU,CAC1BpB,aAAa,EACbO,IACF,CAAC,CAAA;AAED,EAAA,MAAMc,wBAAwB,GAAGf,IAAI,KAAK,YAAY,GAClDgB,YAAwB,GACxBC,UAAkB,CAAA;EAEtB,oBACEC,KAAA,CAAAC,aAAA,CAACJ,wBAAwB,EAAAK,MAAA,CAAAC,MAAA,CAAA;IACvBC,OAAO,EAAA,IAAA;AACPjB,IAAAA,GAAG,EAAEA,GAAI;AACTd,IAAAA,KAAK,EAAEA,KAAM;AACbE,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,EACjBE,IAAI,CAAA,eAERuB,KAAA,CAAAC,aAAA,CAACI,iCAAgB,EACfL,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACK,+DAAuC,EAAA;AAACC,IAAAA,KAAK,EAAEd,YAAAA;AAAa,GAAA,EACzDJ,eAAe,EAAE,EAEjBW,KAAK,CAACQ,QAAQ,CAACC,GAAG,CAACrC,QAAQ,EAAE,CAACsC,KAAK,EAAEC,KAAK,KAAK;IAC/C,IAAIA,KAAK,KAAK,CAAC,EAAE;AACf,MAAA,OAAOD,KAAK,CAAA;AACd,KAAA;AAEA,IAAA,oBACEV,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAY,QAAA,EAAA,IAAA,eACEZ,KAAA,CAAAC,aAAA,CAACY,eAAO,EAAA;MACNC,qBAAqB,EAAA,IAAA;AACrBC,MAAAA,WAAW,EAAC,UAAA;KACb,CAAC,EACAL,KACF,CAAC,CAAA;GAEN,CACsC,CACzB,CACM,CAAC,CAAA;AAE/B,CAAA;AAEA,MAAMb,wBAAwB,gBAAGmB,gBAAU,CAAC7C,4BAA4B,CAKxD,CAAA;AAEhB,SAAS8C,8BAA8BA,CAAuB;EAC5D7C,QAAQ;EACR,GAAGK,IAAAA;AACmC,CAAC,EAAEC,YAAuC,EAAE;EAClF,oBACEsB,KAAA,CAAAC,aAAA,CAACJ,wBAAwB,EAAAK,MAAA,CAAAC,MAAA,CAAA;AACvBhB,IAAAA,GAAG,EAAET,YAAAA;AAAa,GAAA,EACdwC,yBAAiB,CAACzC,IAAI,CAAC,CAAA,EAEzBL,QACsB,CAAC,CAAA;AAE/B,CAAA;AAEA,MAAM+C,0BAA0B,gBAAGH,gBAAU,CAACC,8BAA8B,CAE5D,CAAA;;AAEhB;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,uBAAuB,GAAGvB,yBAEvB;;AAEhB;AACA;AACA;AACA;AACA;AACA;AACawB,MAAAA,0BAA0B,GAAGtB,cAE1B;AAEhB,MAAMuB,oBAAoB,GAAGvB,UAEb,CAAA;AAEhB,SAASwB,oBAAoBA,CAG3B;AACAzC,EAAAA,IAAI,GAAG,YAAoB;EAC3BC,IAAI,GAAGyC,2CAAoB,CAACC,CAAC;AAC7BzC,EAAAA,KAAK,GAAG,MAAM;EACd0C,aAAa;EACbtD,QAAQ;EACR,GAAGK,IAAAA;AAC+B,CAAC,EAAEC,YAAuC,EAAE;EAC9E,MAAMiD,oBAAoB,GAAG7C,IAAI,KAAK,YAAY,GAC9CqC,0BAA0B,GAC1BG,oBAAoB,CAAA;AAExB,EAAA,MAAM7B,YAAY,GAAGC,aAAO,CAAC,OAAO;IAClCZ,IAAI;IACJC,IAAI;AACJC,IAAAA,KAAAA;GACD,CAAC,EAAE,CACFF,IAAI,EACJC,IAAI,EACJC,KAAK,CACN,CAAC,CAAA;AAEF,EAAA,oBACEgB,KAAA,CAAAC,aAAA,CAAC2B,uDAA+B,EAAA;AAACrB,IAAAA,KAAK,EAAEd,YAAAA;GACtCO,eAAAA,KAAA,CAAAC,aAAA,CAAC0B,oBAAoB,EAAAzB,MAAA,CAAAC,MAAA,CAAA;AACnBhB,IAAAA,GAAG,EAAET,YAAa;AAClBgD,IAAAA,aAAa,EAAEA,aAAAA;AAAc,GAAA,EACzBjD,IAAI,CAAA,EAENL,QACkB,CACS,CAAC,CAAA;AAEtC,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACayD,gBAAgB,gBAAGb,gBAAU,CAACO,oBAAoB;;;;;;"}

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

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index_module = require('../../../node_modules/@radix-ui/react-radio-group/dist/index.module.js');
-var index_module$1 = require('../../../node_modules/@radix-ui/react-tabs/dist/index.module.js');
+var index = require('../../../node_modules/@radix-ui/react-radio-group/dist/index.js');
+var index$1 = require('../../../node_modules/@radix-ui/react-tabs/dist/index.js');
 var useMergeRefs = require('../../../hooks/useMergeRefs.js');
 var domUtils = require('../../../utils/domUtils.js');
 var SegmentedControlContext = require('./SegmentedControlContext.js');
@@ -41,7 +41,7 @@ function SegmentedControlItemImpl({
   const {
     type
   } = SegmentedControlContext.useSegmentedControlContext('SegmentedControlItem');
-  const SegmentedControlItem = type === 'radiogroup' ? index_module.Item : index_module$1.Trigger;
+  const SegmentedControlItem = type === 'radiogroup' ? index.Item : index$1.Trigger;
   return /*#__PURE__*/React.createElement(SegmentedControlItem, Object.assign({
     asChild: true,
     ref: forwardedRef

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItem.js","sources":["../../../../../src/components/Forms/SegmentedControl/SegmentedControlItem.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n} from 'react'\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { ariaAttr } from '~/src/utils/domUtils'\n\nimport {\n  type SegmentedControlItemProps,\n  type SegmentedControlProps,\n  type SegmentedControlType,\n} from './SegmentedControl.types'\nimport {\n  useSegmentedControlContext,\n  useSegmentedControlItemListContext,\n} from './SegmentedControlContext'\n\nimport * as Styled from './SegmentedControl.styled'\n\n/**\n * NOTE: (@ed) A property injected at runtime by the radix-ui lib.\n */\ntype ItemProps<Type extends SegmentedControlType> = (\n  Type extends 'radiogroup'\n    ? { 'data-state'?: 'unchecked' | 'checked' }\n    : { 'data-state'?: 'inactive' | 'active' }\n)\n& React.HTMLAttributes<HTMLButtonElement>\n& Partial<SegmentedControlItemProps<Type>>\n& Required<Pick<SegmentedControlProps<Type, string>, 'type'>>\n\nconst Item = forwardRef<HTMLButtonElement, ItemProps<SegmentedControlType>>(function Item({\n  children,\n  type,\n  leftContent,\n  rightContent,\n  ...rest\n}, forwardedRef) {\n  const { setSelectedElement } = useSegmentedControlItemListContext('SegmentedControlItem')\n\n  const checked = type === 'radiogroup'\n    ? (rest as ItemProps<typeof type>)?.['data-state'] === 'checked'\n    : (rest as ItemProps<typeof type>)?.['data-state'] === 'active'\n\n  const ref = useMergeRefs(\n    forwardedRef,\n    useCallback((node: HTMLButtonElement | null) => {\n      if (checked) {\n        setSelectedElement(node)\n      }\n    }, [\n      checked,\n      setSelectedElement,\n    ]),\n  )\n\n  return (\n    <Styled.Item\n      {...rest}\n      ref={ref}\n      type=\"button\"\n      data-checked={ariaAttr(checked)}\n    >\n      <Styled.ItemContainer>\n        { leftContent }\n        <Styled.ItemLabel>\n          { children }\n        </Styled.ItemLabel>\n        { rightContent }\n      </Styled.ItemContainer>\n    </Styled.Item>\n  )\n})\n\nfunction SegmentedControlItemImpl<Value extends string>({\n  children,\n  ...rest\n}: SegmentedControlItemProps<Value>, forwardedRef: React.Ref<HTMLButtonElement>) {\n  const { type } = useSegmentedControlContext('SegmentedControlItem')\n\n  const SegmentedControlItem = type === 'radiogroup'\n    ? RadioGroupPrimitive.Item\n    : TabsPrimitive.Trigger\n\n  return (\n    <SegmentedControlItem\n      asChild\n      ref={forwardedRef}\n      {...rest}\n    >\n      <Item type={type}>\n        { children }\n      </Item>\n    </SegmentedControlItem>\n  )\n}\n\n/**\n * `SegmentedControlItem` component is each item in `SegmentedControl`.\n *\n * If the type of `SegmentedControl` is `radiogroup`, this component acts as a radio item.\n * In this case, it must be used as a child of `SegmentedControl`.\n *\n * If the type of `SegmentedControl` is `tabs`, this component acts as a tab item.\n * In this case, it must be used as a child of `SegmentedControlTabList`.\n */\nexport const SegmentedControlItem = forwardRef(SegmentedControlItemImpl) as <Value extends string>(\n  props: SegmentedControlItemProps<Value> & { ref?: React.ForwardedRef<HTMLButtonElement> }\n) => JSX.Element\n"],"names":["Item","forwardRef","children","type","leftContent","rightContent","rest","forwardedRef","setSelectedElement","useSegmentedControlItemListContext","checked","ref","useMergeRefs","useCallback","node","React","createElement","Styled","Object","assign","ariaAttr","SegmentedControlItemImpl","useSegmentedControlContext","SegmentedControlItem","RadioGroupPrimitive","TabsPrimitive","asChild"],"mappings":";;;;;;;;;;AAuBA;AACA;AACA;;AAUA,MAAMA,IAAI,gBAAGC,gBAAU,CAAqD,SAASD,IAAIA,CAAC;EACxFE,QAAQ;EACRC,IAAI;EACJC,WAAW;EACXC,YAAY;EACZ,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;EACf,MAAM;AAAEC,IAAAA,kBAAAA;AAAmB,GAAC,GAAGC,0DAAkC,CAAC,sBAAsB,CAAC,CAAA;AAEzF,EAAA,MAAMC,OAAO,GAAGP,IAAI,KAAK,YAAY,GAChCG,IAAI,GAA8B,YAAY,CAAC,KAAK,SAAS,GAC7DA,IAAI,GAA8B,YAAY,CAAC,KAAK,QAAQ,CAAA;EAEjE,MAAMK,GAAG,GAAGC,oBAAY,CACtBL,YAAY,EACZM,iBAAW,CAAEC,IAA8B,IAAK;AAC9C,IAAA,IAAIJ,OAAO,EAAE;MACXF,kBAAkB,CAACM,IAAI,CAAC,CAAA;AAC1B,KAAA;AACF,GAAC,EAAE,CACDJ,OAAO,EACPF,kBAAkB,CACnB,CACH,CAAC,CAAA;AAED,EAAA,oBACEO,KAAA,CAAAC,aAAA,CAACC,4BAAW,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACNb,IAAI,EAAA;AACRK,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,IAAI,EAAC,QAAQ;IACb,cAAciB,EAAAA,iBAAQ,CAACV,OAAO,CAAA;GAE9BK,CAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACC,qCAAoB,EACjBb,IAAAA,EAAAA,WAAW,eACbW,KAAA,CAAAC,aAAA,CAACC,iCAAgB,EAAA,IAAA,EACbf,QACc,CAAC,EACjBG,YACkB,CACX,CAAC,CAAA;AAElB,CAAC,CAAC,CAAA;AAEF,SAASgB,wBAAwBA,CAAuB;EACtDnB,QAAQ;EACR,GAAGI,IAAAA;AAC6B,CAAC,EAAEC,YAA0C,EAAE;EAC/E,MAAM;AAAEJ,IAAAA,IAAAA;AAAK,GAAC,GAAGmB,kDAA0B,CAAC,sBAAsB,CAAC,CAAA;AAEnE,EAAA,MAAMC,oBAAoB,GAAGpB,IAAI,KAAK,YAAY,GAC9CqB,iBAAwB,GACxBC,sBAAqB,CAAA;EAEzB,oBACEV,KAAA,CAAAC,aAAA,CAACO,oBAAoB,EAAAL,MAAA,CAAAC,MAAA,CAAA;IACnBO,OAAO,EAAA,IAAA;AACPf,IAAAA,GAAG,EAAEJ,YAAAA;AAAa,GAAA,EACdD,IAAI,CAERS,eAAAA,KAAA,CAAAC,aAAA,CAAChB,IAAI,EAAA;AAACG,IAAAA,IAAI,EAAEA,IAAAA;GACRD,EAAAA,QACE,CACc,CAAC,CAAA;AAE3B,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaqB,oBAAoB,gBAAGtB,gBAAU,CAACoB,wBAAwB;;;;"}
+{"version":3,"file":"SegmentedControlItem.js","sources":["../../../../../src/components/Forms/SegmentedControl/SegmentedControlItem.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n} from 'react'\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { ariaAttr } from '~/src/utils/domUtils'\n\nimport {\n  type SegmentedControlItemProps,\n  type SegmentedControlProps,\n  type SegmentedControlType,\n} from './SegmentedControl.types'\nimport {\n  useSegmentedControlContext,\n  useSegmentedControlItemListContext,\n} from './SegmentedControlContext'\n\nimport * as Styled from './SegmentedControl.styled'\n\n/**\n * NOTE: (@ed) A property injected at runtime by the radix-ui lib.\n */\ntype ItemProps<Type extends SegmentedControlType> = (\n  Type extends 'radiogroup'\n    ? { 'data-state'?: 'unchecked' | 'checked' }\n    : { 'data-state'?: 'inactive' | 'active' }\n)\n& React.HTMLAttributes<HTMLButtonElement>\n& Partial<SegmentedControlItemProps<Type>>\n& Required<Pick<SegmentedControlProps<Type, string>, 'type'>>\n\nconst Item = forwardRef<HTMLButtonElement, ItemProps<SegmentedControlType>>(function Item({\n  children,\n  type,\n  leftContent,\n  rightContent,\n  ...rest\n}, forwardedRef) {\n  const { setSelectedElement } = useSegmentedControlItemListContext('SegmentedControlItem')\n\n  const checked = type === 'radiogroup'\n    ? (rest as ItemProps<typeof type>)?.['data-state'] === 'checked'\n    : (rest as ItemProps<typeof type>)?.['data-state'] === 'active'\n\n  const ref = useMergeRefs(\n    forwardedRef,\n    useCallback((node: HTMLButtonElement | null) => {\n      if (checked) {\n        setSelectedElement(node)\n      }\n    }, [\n      checked,\n      setSelectedElement,\n    ]),\n  )\n\n  return (\n    <Styled.Item\n      {...rest}\n      ref={ref}\n      type=\"button\"\n      data-checked={ariaAttr(checked)}\n    >\n      <Styled.ItemContainer>\n        { leftContent }\n        <Styled.ItemLabel>\n          { children }\n        </Styled.ItemLabel>\n        { rightContent }\n      </Styled.ItemContainer>\n    </Styled.Item>\n  )\n})\n\nfunction SegmentedControlItemImpl<Value extends string>({\n  children,\n  ...rest\n}: SegmentedControlItemProps<Value>, forwardedRef: React.Ref<HTMLButtonElement>) {\n  const { type } = useSegmentedControlContext('SegmentedControlItem')\n\n  const SegmentedControlItem = type === 'radiogroup'\n    ? RadioGroupPrimitive.Item\n    : TabsPrimitive.Trigger\n\n  return (\n    <SegmentedControlItem\n      asChild\n      ref={forwardedRef}\n      {...rest}\n    >\n      <Item type={type}>\n        { children }\n      </Item>\n    </SegmentedControlItem>\n  )\n}\n\n/**\n * `SegmentedControlItem` component is each item in `SegmentedControl`.\n *\n * If the type of `SegmentedControl` is `radiogroup`, this component acts as a radio item.\n * In this case, it must be used as a child of `SegmentedControl`.\n *\n * If the type of `SegmentedControl` is `tabs`, this component acts as a tab item.\n * In this case, it must be used as a child of `SegmentedControlTabList`.\n */\nexport const SegmentedControlItem = forwardRef(SegmentedControlItemImpl) as <Value extends string>(\n  props: SegmentedControlItemProps<Value> & { ref?: React.ForwardedRef<HTMLButtonElement> }\n) => JSX.Element\n"],"names":["Item","forwardRef","children","type","leftContent","rightContent","rest","forwardedRef","setSelectedElement","useSegmentedControlItemListContext","checked","ref","useMergeRefs","useCallback","node","React","createElement","Styled","Object","assign","ariaAttr","SegmentedControlItemImpl","useSegmentedControlContext","SegmentedControlItem","RadioGroupPrimitive","TabsPrimitive","asChild"],"mappings":";;;;;;;;;;AAuBA;AACA;AACA;;AAUA,MAAMA,IAAI,gBAAGC,gBAAU,CAAqD,SAASD,IAAIA,CAAC;EACxFE,QAAQ;EACRC,IAAI;EACJC,WAAW;EACXC,YAAY;EACZ,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;EACf,MAAM;AAAEC,IAAAA,kBAAAA;AAAmB,GAAC,GAAGC,0DAAkC,CAAC,sBAAsB,CAAC,CAAA;AAEzF,EAAA,MAAMC,OAAO,GAAGP,IAAI,KAAK,YAAY,GAChCG,IAAI,GAA8B,YAAY,CAAC,KAAK,SAAS,GAC7DA,IAAI,GAA8B,YAAY,CAAC,KAAK,QAAQ,CAAA;EAEjE,MAAMK,GAAG,GAAGC,oBAAY,CACtBL,YAAY,EACZM,iBAAW,CAAEC,IAA8B,IAAK;AAC9C,IAAA,IAAIJ,OAAO,EAAE;MACXF,kBAAkB,CAACM,IAAI,CAAC,CAAA;AAC1B,KAAA;AACF,GAAC,EAAE,CACDJ,OAAO,EACPF,kBAAkB,CACnB,CACH,CAAC,CAAA;AAED,EAAA,oBACEO,KAAA,CAAAC,aAAA,CAACC,4BAAW,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACNb,IAAI,EAAA;AACRK,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,IAAI,EAAC,QAAQ;IACb,cAAciB,EAAAA,iBAAQ,CAACV,OAAO,CAAA;GAE9BK,CAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACC,qCAAoB,EACjBb,IAAAA,EAAAA,WAAW,eACbW,KAAA,CAAAC,aAAA,CAACC,iCAAgB,EAAA,IAAA,EACbf,QACc,CAAC,EACjBG,YACkB,CACX,CAAC,CAAA;AAElB,CAAC,CAAC,CAAA;AAEF,SAASgB,wBAAwBA,CAAuB;EACtDnB,QAAQ;EACR,GAAGI,IAAAA;AAC6B,CAAC,EAAEC,YAA0C,EAAE;EAC/E,MAAM;AAAEJ,IAAAA,IAAAA;AAAK,GAAC,GAAGmB,kDAA0B,CAAC,sBAAsB,CAAC,CAAA;AAEnE,EAAA,MAAMC,oBAAoB,GAAGpB,IAAI,KAAK,YAAY,GAC9CqB,UAAwB,GACxBC,eAAqB,CAAA;EAEzB,oBACEV,KAAA,CAAAC,aAAA,CAACO,oBAAoB,EAAAL,MAAA,CAAAC,MAAA,CAAA;IACnBO,OAAO,EAAA,IAAA;AACPf,IAAAA,GAAG,EAAEJ,YAAAA;AAAa,GAAA,EACdD,IAAI,CAERS,eAAAA,KAAA,CAAAC,aAAA,CAAChB,IAAI,EAAA;AAACG,IAAAA,IAAI,EAAEA,IAAAA;GACRD,EAAAA,QACE,CACc,CAAC,CAAA;AAE3B,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaqB,oBAAoB,gBAAGtB,gBAAU,CAACoB,wBAAwB;;;;"}

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index_module = require('../../../node_modules/@radix-ui/react-slider/dist/index.module.js');
+var index = require('../../../node_modules/@radix-ui/react-slider/dist/index.js');
 var functionUtils = require('../../../utils/functionUtils.js');
 var Slider_styled = require('./Slider.styled.js');
 
@@ -43,7 +43,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider({
       onThumbPointerUp(currentValue);
     }
   }, [disabled, onThumbPointerUp, currentValue]);
-  return /*#__PURE__*/React.createElement(index_module.Root, {
+  return /*#__PURE__*/React.createElement(index.Root, {
     asChild: true,
     defaultValue: defaultValue,
     value: currentValue,
@@ -58,16 +58,16 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider({
     disabled: disabled,
     ref: forwardedRef,
     "data-testid": SLIDER_TEST_ID
-  }, rest), /*#__PURE__*/React.createElement(index_module.Track, {
+  }, rest), /*#__PURE__*/React.createElement(index.Track, {
     asChild: true
-  }, /*#__PURE__*/React.createElement(Slider_styled.SliderTrack, null, /*#__PURE__*/React.createElement(index_module.Range, {
+  }, /*#__PURE__*/React.createElement(Slider_styled.SliderTrack, null, /*#__PURE__*/React.createElement(index.Range, {
     asChild: true
   }, /*#__PURE__*/React.createElement(Slider_styled.SliderRange, null)))), guide?.map(guideValue => /*#__PURE__*/React.createElement(Slider_styled.SliderGuide, {
     key: `slider-guide-${guideValue}`,
     min: min,
     max: max,
     guideValue: guideValue
-  })), currentValue.map((v, i) => /*#__PURE__*/React.createElement(index_module.Thumb, {
+  })), currentValue.map((v, i) => /*#__PURE__*/React.createElement(index.Thumb, {
     asChild: true
     // eslint-disable-next-line react/no-array-index-key
     ,

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../../src/components/Forms/Slider/Slider.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useState,\n} from 'react'\n\nimport * as SliderPrimitive from '@radix-ui/react-slider'\n\nimport { noop } from '~/src/utils/functionUtils'\n\nimport type SliderProps from './Slider.types'\n\nimport * as Styled from './Slider.styled'\n\nexport const SLIDER_TEST_ID = 'bezier-react-slider'\nexport const SLIDER_THUMB_TEST_ID = 'bezier-react-slider-thumb'\n\nexport const Slider = forwardRef(function Slider(\n  {\n    width = 36,\n    guide,\n    onThumbPointerDown = noop,\n    onThumbPointerUp = noop,\n    defaultValue = [5],\n    value,\n    disabled = false,\n    min = 0,\n    max = 10,\n    step = 1,\n    onValueChange = noop,\n    minStepsBetweenThumbs = 0,\n    ...rest\n  }: SliderProps,\n  forwardedRef: React.Ref<HTMLDivElement>,\n) {\n  const [currentValue, setCurrentValue] = useState<number[]>(value ?? defaultValue)\n\n  useEffect(function updateCurrentValue() {\n    if (value) {\n      setCurrentValue(value)\n      onValueChange(value)\n    }\n  }, [\n    value,\n    onValueChange,\n  ])\n\n  const handleValueChange: (value: number[]) => void = useCallback((_value) => {\n    setCurrentValue(_value)\n    onValueChange(_value)\n  }, [onValueChange])\n\n  const handlePointerDown: React.PointerEventHandler<HTMLElement> = useCallback(() => {\n    if (!disabled) {\n      onThumbPointerDown(currentValue)\n    }\n  }, [\n    disabled,\n    onThumbPointerDown,\n    currentValue,\n  ])\n\n  const handlePointerUp: React.PointerEventHandler<HTMLElement> = useCallback(() => {\n    if (!disabled) {\n      onThumbPointerUp(currentValue)\n    }\n  }, [\n    disabled,\n    onThumbPointerUp,\n    currentValue,\n  ])\n\n  return (\n    <SliderPrimitive.Root\n      asChild\n      defaultValue={defaultValue}\n      value={currentValue}\n      disabled={disabled}\n      min={min}\n      max={max}\n      step={step}\n      onValueChange={handleValueChange}\n      minStepsBetweenThumbs={minStepsBetweenThumbs}\n    >\n      <Styled.SliderRoot\n        width={width}\n        disabled={disabled}\n        ref={forwardedRef}\n        data-testid={SLIDER_TEST_ID}\n        {...rest}\n      >\n        <SliderPrimitive.Track asChild>\n          <Styled.SliderTrack>\n            <SliderPrimitive.Range asChild>\n              <Styled.SliderRange />\n            </SliderPrimitive.Range>\n          </Styled.SliderTrack>\n        </SliderPrimitive.Track>\n        { guide?.map((guideValue) => (\n          <Styled.SliderGuide\n            key={`slider-guide-${guideValue}`}\n            min={min}\n            max={max}\n            guideValue={guideValue}\n          />\n        )) }\n        { currentValue.map((v, i) => (\n          <SliderPrimitive.Thumb\n            asChild\n            // eslint-disable-next-line react/no-array-index-key\n            key={`slider-thumb-${i}`}\n            onPointerDown={handlePointerDown}\n            onPointerUp={handlePointerUp}\n          >\n            <Styled.SliderThumb\n              data-testid={SLIDER_THUMB_TEST_ID}\n            />\n          </SliderPrimitive.Thumb>\n        )) }\n      </Styled.SliderRoot>\n    </SliderPrimitive.Root>\n  )\n})\n"],"names":["SLIDER_TEST_ID","SLIDER_THUMB_TEST_ID","Slider","forwardRef","width","guide","onThumbPointerDown","noop","onThumbPointerUp","defaultValue","value","disabled","min","max","step","onValueChange","minStepsBetweenThumbs","rest","forwardedRef","currentValue","setCurrentValue","useState","useEffect","updateCurrentValue","handleValueChange","useCallback","_value","handlePointerDown","handlePointerUp","React","createElement","SliderPrimitive","asChild","Styled","Object","assign","ref","map","guideValue","key","v","i","onPointerDown","onPointerUp"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../../../src/components/Forms/Slider/Slider.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useState,\n} from 'react'\n\nimport * as SliderPrimitive from '@radix-ui/react-slider'\n\nimport { noop } from '~/src/utils/functionUtils'\n\nimport type SliderProps from './Slider.types'\n\nimport * as Styled from './Slider.styled'\n\nexport const SLIDER_TEST_ID = 'bezier-react-slider'\nexport const SLIDER_THUMB_TEST_ID = 'bezier-react-slider-thumb'\n\nexport const Slider = forwardRef(function Slider(\n  {\n    width = 36,\n    guide,\n    onThumbPointerDown = noop,\n    onThumbPointerUp = noop,\n    defaultValue = [5],\n    value,\n    disabled = false,\n    min = 0,\n    max = 10,\n    step = 1,\n    onValueChange = noop,\n    minStepsBetweenThumbs = 0,\n    ...rest\n  }: SliderProps,\n  forwardedRef: React.Ref<HTMLDivElement>,\n) {\n  const [currentValue, setCurrentValue] = useState<number[]>(value ?? defaultValue)\n\n  useEffect(function updateCurrentValue() {\n    if (value) {\n      setCurrentValue(value)\n      onValueChange(value)\n    }\n  }, [\n    value,\n    onValueChange,\n  ])\n\n  const handleValueChange: (value: number[]) => void = useCallback((_value) => {\n    setCurrentValue(_value)\n    onValueChange(_value)\n  }, [onValueChange])\n\n  const handlePointerDown: React.PointerEventHandler<HTMLElement> = useCallback(() => {\n    if (!disabled) {\n      onThumbPointerDown(currentValue)\n    }\n  }, [\n    disabled,\n    onThumbPointerDown,\n    currentValue,\n  ])\n\n  const handlePointerUp: React.PointerEventHandler<HTMLElement> = useCallback(() => {\n    if (!disabled) {\n      onThumbPointerUp(currentValue)\n    }\n  }, [\n    disabled,\n    onThumbPointerUp,\n    currentValue,\n  ])\n\n  return (\n    <SliderPrimitive.Root\n      asChild\n      defaultValue={defaultValue}\n      value={currentValue}\n      disabled={disabled}\n      min={min}\n      max={max}\n      step={step}\n      onValueChange={handleValueChange}\n      minStepsBetweenThumbs={minStepsBetweenThumbs}\n    >\n      <Styled.SliderRoot\n        width={width}\n        disabled={disabled}\n        ref={forwardedRef}\n        data-testid={SLIDER_TEST_ID}\n        {...rest}\n      >\n        <SliderPrimitive.Track asChild>\n          <Styled.SliderTrack>\n            <SliderPrimitive.Range asChild>\n              <Styled.SliderRange />\n            </SliderPrimitive.Range>\n          </Styled.SliderTrack>\n        </SliderPrimitive.Track>\n        { guide?.map((guideValue) => (\n          <Styled.SliderGuide\n            key={`slider-guide-${guideValue}`}\n            min={min}\n            max={max}\n            guideValue={guideValue}\n          />\n        )) }\n        { currentValue.map((v, i) => (\n          <SliderPrimitive.Thumb\n            asChild\n            // eslint-disable-next-line react/no-array-index-key\n            key={`slider-thumb-${i}`}\n            onPointerDown={handlePointerDown}\n            onPointerUp={handlePointerUp}\n          >\n            <Styled.SliderThumb\n              data-testid={SLIDER_THUMB_TEST_ID}\n            />\n          </SliderPrimitive.Thumb>\n        )) }\n      </Styled.SliderRoot>\n    </SliderPrimitive.Root>\n  )\n})\n"],"names":["SLIDER_TEST_ID","SLIDER_THUMB_TEST_ID","Slider","forwardRef","width","guide","onThumbPointerDown","noop","onThumbPointerUp","defaultValue","value","disabled","min","max","step","onValueChange","minStepsBetweenThumbs","rest","forwardedRef","currentValue","setCurrentValue","useState","useEffect","updateCurrentValue","handleValueChange","useCallback","_value","handlePointerDown","handlePointerUp","React","createElement","SliderPrimitive","asChild","Styled","Object","assign","ref","map","guideValue","key","v","i","onPointerDown","onPointerUp"],"mappings":"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"}