@popsure/dirty-swan 0.61.2 → 0.62.0

package/dist/esm/components/cards/infoCard/index.js

@@ -1,15 +1,16 @@
-import { b as __rest, a as __assign } from '../../../tslib.es6-a39f91fc.js';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { c as __rest, b as __assign } from '../../../tslib.es6-CVlKGIvp.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ArrowRight from '../../icon/icons/ArrowRight.js';
 import { Card } from '../card/index.js';
-import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
-import { c as classNames } from '../../../index-6ea95111.js';
+import { s as styleInject } from '../../../style-inject.es-tgCJW-Cu.js';
+import { c as classNames } from '../../../index-DLQEsiym.js';
 import 'react';
 import '../../icon/IconWrapper/IconWrapper.js';
+import '../../../_commonjsHelpers-BFTU3MAI.js';
 import '../../icon/icons/ChevronRight.js';
 
 var css_248z = ".style-module_bs-xs__2s8AD {\n  box-shadow: 0 2px 12px rgba(38, 38, 46, 0.03);\n}\n\n.style-module_bs-sm__2KgTp {\n  box-shadow: 0 2px 20px 0 rgba(38, 38, 46, 0.04);\n}\n\n.style-module_bs-md__3yrN1 {\n  box-shadow: 0 2px 28px rgba(38, 38, 46, 0.08);\n}\n\n.style-module_bs-lg__Ydmy8 {\n  box-shadow: 0 2px 32px rgba(38, 38, 46, 0.1);\n}\n\n.style-module_bs-xl__9OYoN {\n  box-shadow: 0 2px 50px rgba(38, 38, 46, 0.18);\n}\n\n.style-module_bannerWrapper__1m3mn {\n  padding-top: 124px;\n}\n\n.style-module_buttonWrapper__-dmFc:focus .style-module_wrapper__rVPyi {\n  border-color: #696971;\n  box-shadow: 0 2px 12px rgba(38, 38, 46, 0.03), 0 0 0 1px #696971;\n}\n\n.style-module_buttonWrapper__-dmFc:focus-visible .style-module_wrapper__rVPyi {\n  overflow: hidden;\n  border-color: #26262e;\n  box-shadow: 0 2px 12px rgba(38, 38, 46, 0.03), 0 0 0 1px #26262e;\n}\n\n.style-module_topIconWrapper__VYKR7 {\n  position: absolute;\n  width: 80px;\n  height: 80px;\n  left: 50%;\n  transform: translateX(-50%) translateY(-80px);\n}\n.style-module_topIconWrapper--muted__2a4Lq {\n  opacity: 0.25;\n}\n\n.style-module_topIconBanner__31-Hc {\n  position: absolute;\n  top: -123px;\n  left: -15px;\n  right: -15px;\n  height: 124px;\n  width: calc(100% + 30px);\n  overflow: hidden;\n}\n.style-module_topIconBanner__31-Hc img {\n  position: absolute;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  min-width: 100%;\n  min-height: 100%;\n}\n\n.style-module_contentWrapper__B1Dn1 {\n  gap: 0 !important;\n}\n\n.style-module_floatingLabel__1iIBj {\n  position: relative;\n}\n\n.style-module_disabled__1u28- {\n  opacity: 0.25;\n  cursor: not-allowed;\n}";
-var styles = {"bs-xs":"style-module_bs-xs__2s8AD","bs-sm":"style-module_bs-sm__2KgTp","bs-md":"style-module_bs-md__3yrN1","bs-lg":"style-module_bs-lg__Ydmy8","bs-xl":"style-module_bs-xl__9OYoN","bannerWrapper":"style-module_bannerWrapper__1m3mn","buttonWrapper":"style-module_buttonWrapper__-dmFc","wrapper":"style-module_wrapper__rVPyi","topIconWrapper":"style-module_topIconWrapper__VYKR7","topIconWrapper--muted":"style-module_topIconWrapper--muted__2a4Lq","topIconBanner":"style-module_topIconBanner__31-Hc","contentWrapper":"style-module_contentWrapper__B1Dn1","floatingLabel":"style-module_floatingLabel__1iIBj","disabled":"style-module_disabled__1u28-"};
+var styles = {"bannerWrapper":"style-module_bannerWrapper__1m3mn","buttonWrapper":"style-module_buttonWrapper__-dmFc","wrapper":"style-module_wrapper__rVPyi","topIconWrapper":"style-module_topIconWrapper__VYKR7","topIconBanner":"style-module_topIconBanner__31-Hc","contentWrapper":"style-module_contentWrapper__B1Dn1","floatingLabel":"style-module_floatingLabel__1iIBj","disabled":"style-module_disabled__1u28-"};
 styleInject(css_248z);
 
 var InfoCard = function (_a) {

package/dist/esm/components/cards/infoCard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/cards/infoCard/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport ArrowRight from '../../icon/icons/ArrowRight';\nimport { Card, CardProps } from '../card';\n\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\nexport interface InfoCardProps extends CardProps {\n  topIcon: ReactNode;\n  showIcon?: boolean;\n  topIconType?: 'image' | 'icon' | 'iconWithBackground' | 'banner';\n  disabled?: boolean;\n};\n\nexport const InfoCard = ({\n  className,\n  showIcon = true,\n  title,\n  children,\n  topIcon,\n  topIconType,\n  disabled = false,\n  onClick,\n  ...cardProps\n}: InfoCardProps) => {\n  const isIconType = topIconType === 'icon' || topIconType === 'iconWithBackground';\n\n  return (\n    <Card\n      {...cardProps}\n      label={topIcon && (\n        <>\n          {isIconType ? (\n            <div\n              className={classNames(\n                'd-flex ai-center jc-center br-circle p16',\n                styles.topIconWrapper, {\n                  'bg-orange-200': topIconType === 'iconWithBackground'\n                }\n              )}\n            >\n              {topIcon}\n            </div>\n          ) : (\n            <div className={classNames(\n              'd-flex ai-center jc-center',\n              { [styles.topIconBanner]: topIconType === 'banner' }\n            )}>\n              {topIcon}\n            </div>\n          )}\n        </>\n      )}\n      title={title && (\n        <>\n          {title}\n\n          {showIcon && <ArrowRight size={20} />}\n        </>\n      )}\n      titleVariant='medium'\n      description={children}\n      descriptionVariant='small'\n      actionIcon={null}\n      showActionIcon={false}\n      classNames={{\n        buttonWrapper: styles.buttonWrapper,\n        wrapper: classNames({\n          [styles.wrapper]: true,\n          [styles.disabled]: disabled,\n          'pt40': topIcon && isIconType,\n          'mt40': topIcon && isIconType,\n          [styles.bannerWrapper]: topIcon && topIconType === 'banner',\n        }),\n        label: classNames({\n          [styles.floatingLabel]: topIcon && topIconType !== 'image',\n        }),\n        title: classNames(\n          {'mt16': topIcon && topIconType === 'banner'},\n          'd-flex ai-center jc-center ta-center my8'\n        ),\n        description: 'ta-center',\n        contentWrapper: styles.contentWrapper,\n        ...cardProps?.classNames || {}\n      }}\n      variant='default'\n      onClick={disabled ? undefined : onClick}\n      density='xsmall'\n    />\n  );\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;IAca,QAAQ,GAAG,UAAC,EAUT;;gBATL,MACT,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,OAAO,aAAA,EACJ,SAAS,cATW,+FAUxB;IACC,IAAM,UAAU,GAAG,WAAW,KAAK,MAAM,IAAI,WAAW,KAAK,oBAAoB,CAAC;IAElF,QACEA,IAAC,IAAI,eACC,SAAS,IACb,KAAK,EAAE,OAAO,KACZA,0BACG,UAAU,IACTA,aACE,SAAS,EAAE,UAAU,CACnB,0CAA0C,EAC1C,MAAM,CAAC,cAAc,EAAE;oBACrB,eAAe,EAAE,WAAW,KAAK,oBAAoB;iBACtD,CACF,YAEA,OAAO,GACJ,KAENA,aAAK,SAAS,EAAE,UAAU,CACxB,4BAA4B,YAC1B,GAAC,MAAM,CAAC,aAAa,IAAG,WAAW,KAAK,QAAQ,MACnD,YACE,OAAO,GACJ,CACP,GACA,CACJ,EACD,KAAK,EAAE,KAAK,KACVC,4BACG,KAAK,EAEL,QAAQ,IAAID,IAAC,UAAU,IAAC,IAAI,EAAE,EAAE,GAAI,IACpC,CACJ,EACD,YAAY,EAAC,QAAQ,EACrB,WAAW,EAAE,QAAQ,EACrB,kBAAkB,EAAC,OAAO,EAC1B,UAAU,EAAE,IAAI,EAChB,cAAc,EAAE,KAAK,EACrB,UAAU,aACR,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,OAAO,EAAE,UAAU;gBACjB,GAAC,MAAM,CAAC,OAAO,IAAG,IAAI;gBACtB,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ;gBAC3B,UAAM,GAAE,OAAO,IAAI,UAAU;gBAC7B,UAAM,GAAE,OAAO,IAAI,UAAU;gBAC7B,GAAC,MAAM,CAAC,aAAa,IAAG,OAAO,IAAI,WAAW,KAAK,QAAQ;oBAC3D,EACF,KAAK,EAAE,UAAU;gBACf,GAAC,MAAM,CAAC,aAAa,IAAG,OAAO,IAAI,WAAW,KAAK,OAAO;oBAC1D,EACF,KAAK,EAAE,UAAU,CACf,EAAC,MAAM,EAAE,OAAO,IAAI,WAAW,KAAK,QAAQ,EAAC,EAC7C,0CAA0C,CAC3C,EACD,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,MAAM,CAAC,cAAc,IAClC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,KAAI,EAAE,GAEhC,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,EACvC,OAAO,EAAC,QAAQ,IAChB,EACF;AACJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/cards/infoCard/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport ArrowRight from '../../icon/icons/ArrowRight';\nimport { Card, CardProps } from '../card';\n\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\nexport interface InfoCardProps extends CardProps {\n  topIcon: ReactNode;\n  showIcon?: boolean;\n  topIconType?: 'image' | 'icon' | 'iconWithBackground' | 'banner';\n  disabled?: boolean;\n};\n\nexport const InfoCard = ({\n  className,\n  showIcon = true,\n  title,\n  children,\n  topIcon,\n  topIconType,\n  disabled = false,\n  onClick,\n  ...cardProps\n}: InfoCardProps) => {\n  const isIconType = topIconType === 'icon' || topIconType === 'iconWithBackground';\n\n  return (\n    <Card\n      {...cardProps}\n      label={topIcon && (\n        <>\n          {isIconType ? (\n            <div\n              className={classNames(\n                'd-flex ai-center jc-center br-circle p16',\n                styles.topIconWrapper, {\n                  'bg-orange-200': topIconType === 'iconWithBackground'\n                }\n              )}\n            >\n              {topIcon}\n            </div>\n          ) : (\n            <div className={classNames(\n              'd-flex ai-center jc-center',\n              { [styles.topIconBanner]: topIconType === 'banner' }\n            )}>\n              {topIcon}\n            </div>\n          )}\n        </>\n      )}\n      title={title && (\n        <>\n          {title}\n\n          {showIcon && <ArrowRight size={20} />}\n        </>\n      )}\n      titleVariant='medium'\n      description={children}\n      descriptionVariant='small'\n      actionIcon={null}\n      showActionIcon={false}\n      classNames={{\n        buttonWrapper: styles.buttonWrapper,\n        wrapper: classNames({\n          [styles.wrapper]: true,\n          [styles.disabled]: disabled,\n          'pt40': topIcon && isIconType,\n          'mt40': topIcon && isIconType,\n          [styles.bannerWrapper]: topIcon && topIconType === 'banner',\n        }),\n        label: classNames({\n          [styles.floatingLabel]: topIcon && topIconType !== 'image',\n        }),\n        title: classNames(\n          {'mt16': topIcon && topIconType === 'banner'},\n          'd-flex ai-center jc-center ta-center my8'\n        ),\n        description: 'ta-center',\n        contentWrapper: styles.contentWrapper,\n        ...cardProps?.classNames || {}\n      }}\n      variant='default'\n      onClick={disabled ? undefined : onClick}\n      density='xsmall'\n    />\n  );\n}\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}

package/dist/esm/components/cards/infoCard/index.stories.js

@@ -1,14 +1,15 @@
-import { a as __assign } from '../../../tslib.es6-a39f91fc.js';
+import { b as __assign } from '../../../tslib.es6-CVlKGIvp.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { InfoCard } from './index.js';
+import 'react';
+import '../../../index-DLQEsiym.js';
 import BookOpenIcon from '../../icon/icons/BookOpen.js';
 import HeartIcon from '../../icon/icons/Heart.js';
 import StarIcon from '../../icon/icons/Star.js';
 import '../../icon/icons/ArrowRight.js';
-import 'react';
 import '../../icon/IconWrapper/IconWrapper.js';
-import '../../../index-6ea95111.js';
-import '../../../style-inject.es-1f59c1d0.js';
+import '../../../style-inject.es-tgCJW-Cu.js';
+import '../../../_commonjsHelpers-BFTU3MAI.js';
 import '../card/index.js';
 import '../../icon/icons/ChevronRight.js';
 
@@ -50,28 +51,29 @@ var story = {
     },
     args: {
         title: 'Knowledge Base',
-        children: 'Find the answers you\'re looking for in our comprehensive, fact-checked library of articles and resources.',
+        children: "Find the answers you're looking for in our comprehensive, fact-checked library of articles and resources.",
         topIcon: jsx(BookOpenIcon, { size: 40 }),
         topIconType: 'iconWithBackground',
         showIcon: true,
         disabled: false,
         className: '',
-    }
+    },
 };
-var InfoCardStory = function (args) {
-    return (jsx("div", { className: 'bg-neutral-50 p32', children: jsx("div", { className: 'wmx4', children: jsx(InfoCard, __assign({}, args, { onClick: function () { return console.log('InfoCard clicked!'); }, children: args.children })) }) }));
+var InfoCardStory = {
+    render: function (args) {
+        return (jsx("div", { className: "bg-neutral-50 p32", children: jsx("div", { className: "wmx4", children: jsx(InfoCard, __assign({}, args, { onClick: function () { return console.log('InfoCard clicked!'); }, children: args.children })) }) }));
+    },
+    name: 'InfoCard',
 };
 var IconTypes = function () {
-    return (jsx("div", { className: 'bg-neutral-50 p32', children: jsxs("div", { className: 'd-flex gap32 flex-wrap', children: [jsxs("div", { className: 'wmx4', children: [jsx("div", { className: 'mb16 fw-bold', children: "Book Icon" }), jsx(InfoCard, { title: 'Knowledge Base', topIcon: jsx(BookOpenIcon, { size: 40 }), topIconType: 'iconWithBackground', onClick: function () { return console.log('Book clicked!'); }, children: "Find answers in our comprehensive library of articles." })] }), jsxs("div", { className: 'wmx4', children: [jsx("div", { className: 'mb16 fw-bold', children: "Heart Icon" }), jsx(InfoCard, { title: 'Favorites', topIcon: jsx(HeartIcon, { size: 40 }), topIconType: 'iconWithBackground', onClick: function () { return console.log('Heart clicked!'); }, children: "Save and organize your favorite items." })] }), jsxs("div", { className: 'wmx4', children: [jsx("div", { className: 'mb16 fw-bold', children: "Star Icon" }), jsx(InfoCard, { title: 'Premium Features', topIcon: jsx(StarIcon, { size: 40 }), topIconType: 'iconWithBackground', onClick: function () { return console.log('Star clicked!'); }, children: "Unlock advanced features with premium." })] })] }) }));
+    return (jsx("div", { className: "bg-neutral-50 p32", children: jsxs("div", { className: "d-flex gap32 flex-wrap", children: [jsxs("div", { className: "wmx4", children: [jsx("div", { className: "mb16 fw-bold", children: "Book Icon" }), jsx(InfoCard, { title: "Knowledge Base", topIcon: jsx(BookOpenIcon, { size: 40 }), topIconType: "iconWithBackground", onClick: function () { return console.log('Book clicked!'); }, children: "Find answers in our comprehensive library of articles." })] }), jsxs("div", { className: "wmx4", children: [jsx("div", { className: "mb16 fw-bold", children: "Heart Icon" }), jsx(InfoCard, { title: "Favorites", topIcon: jsx(HeartIcon, { size: 40 }), topIconType: "iconWithBackground", onClick: function () { return console.log('Heart clicked!'); }, children: "Save and organize your favorite items." })] }), jsxs("div", { className: "wmx4", children: [jsx("div", { className: "mb16 fw-bold", children: "Star Icon" }), jsx(InfoCard, { title: "Premium Features", topIcon: jsx(StarIcon, { size: 40 }), topIconType: "iconWithBackground", onClick: function () { return console.log('Star clicked!'); }, children: "Unlock advanced features with premium." })] })] }) }));
 };
 var TopIconTypes = function () {
-    return (jsxs("div", { className: 'bg-neutral-50 p32 m-auto wmx12', children: [jsxs("div", { className: 'd-flex gap32 flex-wrap', children: [jsxs("div", { className: 'w50', children: [jsx("div", { className: 'mb16 fw-bold', children: "Icon Type" }), jsx(InfoCard, { title: 'Help Center', topIcon: jsx("img", { src: "https://placehold.co/80x80", alt: "Banner" }), topIconType: 'icon', onClick: function () { return console.log('Icon type clicked!'); }, children: "Icon is displayed in a circular way without any background." })] }), jsxs("div", { className: 'w50', children: [jsx("div", { className: 'mb16 fw-bold', children: "Icon with background Type" }), jsx(InfoCard, { title: 'Help Center', topIcon: jsx(BookOpenIcon, { size: 40 }), topIconType: 'iconWithBackground', onClick: function () { return console.log('Icon type clicked!'); }, children: "Icon is displayed in a circular background with the orange color." })] })] }), jsxs("div", { className: 'd-flex gap32 flex-wrap mt40', children: [jsxs("div", { className: 'w50', children: [jsx("div", { className: 'mb16 fw-bold', children: "Image Type" }), jsx(InfoCard, { title: 'Image Gallery', topIcon: jsx("img", { src: "https://placehold.co/80x80", alt: "Image", style: { borderRadius: '8px' } }), topIconType: 'image', onClick: function () { return console.log('Image type clicked!'); }, children: "Image is displayed as-is without background." })] }), jsxs("div", { className: 'w50', children: [jsx("div", { className: 'mb16 fw-bold', children: "Banner Type" }), jsx(InfoCard, { title: 'Featured Content', topIcon: jsx("img", { src: "https://placehold.co/600x200", alt: "Banner" }), topIconType: 'banner', onClick: function () { return console.log('Banner type clicked!'); }, children: "Banner spans the full width of the card." })] })] })] }));
+    return (jsxs("div", { className: "bg-neutral-50 p32 m-auto wmx12", children: [jsxs("div", { className: "d-flex gap32 flex-wrap", children: [jsxs("div", { className: "w50", children: [jsx("div", { className: "mb16 fw-bold", children: "Icon Type" }), jsx(InfoCard, { title: "Help Center", topIcon: jsx("img", { src: "https://placehold.co/80x80", alt: "Banner" }), topIconType: "icon", onClick: function () { return console.log('Icon type clicked!'); }, children: "Icon is displayed in a circular way without any background." })] }), jsxs("div", { className: "w50", children: [jsx("div", { className: "mb16 fw-bold", children: "Icon with background Type" }), jsx(InfoCard, { title: "Help Center", topIcon: jsx(BookOpenIcon, { size: 40 }), topIconType: "iconWithBackground", onClick: function () { return console.log('Icon type clicked!'); }, children: "Icon is displayed in a circular background with the orange color." })] })] }), jsxs("div", { className: "d-flex gap32 flex-wrap mt40", children: [jsxs("div", { className: "w50", children: [jsx("div", { className: "mb16 fw-bold", children: "Image Type" }), jsx(InfoCard, { title: "Image Gallery", topIcon: jsx("img", { src: "https://placehold.co/80x80", alt: "Image", style: { borderRadius: '8px' } }), topIconType: "image", onClick: function () { return console.log('Image type clicked!'); }, children: "Image is displayed as-is without background." })] }), jsxs("div", { className: "w50", children: [jsx("div", { className: "mb16 fw-bold", children: "Banner Type" }), jsx(InfoCard, { title: "Featured Content", topIcon: jsx("img", { src: "https://placehold.co/600x200", alt: "Banner" }), topIconType: "banner", onClick: function () { return console.log('Banner type clicked!'); }, children: "Banner spans the full width of the card." })] })] })] }));
 };
 var States = function () {
-    return (jsx("div", { className: 'bg-neutral-50 p32', children: jsxs("div", { className: 'd-flex gap32 flex-wrap', children: [jsxs("div", { className: 'wmx4', children: [jsx("div", { className: 'mb16 fw-bold', children: "Default State" }), jsx(InfoCard, { title: 'Default Card', topIcon: jsx(BookOpenIcon, { size: 40 }), topIconType: 'icon', onClick: function () { return console.log('Default clicked!'); }, children: "This is a default interactive card." })] }), jsxs("div", { className: 'wmx4', children: [jsx("div", { className: 'mb16 fw-bold', children: "Disabled State" }), jsx(InfoCard, { title: 'Disabled Card', topIcon: jsx(BookOpenIcon, { size: 40 }), topIconType: 'icon', disabled: true, onClick: function () { return console.log('This should not fire'); }, children: "This card is disabled and non-interactive." })] }), jsxs("div", { className: 'wmx4', children: [jsx("div", { className: 'mb16 fw-bold', children: "Without Arrow Icon" }), jsx(InfoCard, { title: 'No Arrow', topIcon: jsx(BookOpenIcon, { size: 40 }), topIconType: 'icon', showIcon: false, onClick: function () { return console.log('No arrow clicked!'); }, children: "This card has no arrow icon in the title." })] })] }) }));
+    return (jsx("div", { className: "bg-neutral-50 p32", children: jsxs("div", { className: "d-flex gap32 flex-wrap", children: [jsxs("div", { className: "wmx4", children: [jsx("div", { className: "mb16 fw-bold", children: "Default State" }), jsx(InfoCard, { title: "Default Card", topIcon: jsx(BookOpenIcon, { size: 40 }), topIconType: "icon", onClick: function () { return console.log('Default clicked!'); }, children: "This is a default interactive card." })] }), jsxs("div", { className: "wmx4", children: [jsx("div", { className: "mb16 fw-bold", children: "Disabled State" }), jsx(InfoCard, { title: "Disabled Card", topIcon: jsx(BookOpenIcon, { size: 40 }), topIconType: "icon", disabled: true, onClick: function () { return console.log('This should not fire'); }, children: "This card is disabled and non-interactive." })] }), jsxs("div", { className: "wmx4", children: [jsx("div", { className: "mb16 fw-bold", children: "Without Arrow Icon" }), jsx(InfoCard, { title: "No Arrow", topIcon: jsx(BookOpenIcon, { size: 40 }), topIconType: "icon", showIcon: false, onClick: function () { return console.log('No arrow clicked!'); }, children: "This card has no arrow icon in the title." })] })] }) }));
 };
-InfoCardStory.storyName = "InfoCard";
 
-export default story;
-export { IconTypes, InfoCardStory, States, TopIconTypes };
+export { IconTypes, InfoCardStory, States, TopIconTypes, story as default };
 //# sourceMappingURL=index.stories.js.map

package/dist/esm/components/cards/infoCard/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/cards/infoCard/index.stories.tsx"],"sourcesContent":["import { InfoCard, InfoCardProps } from '.';\nimport { images } from '../../../util/images';\nimport { BookOpenIcon, HeartIcon, StarIcon, ShieldIcon } from '../../icon';\n\nconst story = {\n  title: 'JSX/Cards/InfoCard',\n  component: InfoCard,\n  argTypes: {\n    title: {\n      description: 'Title text that needs to be displayed',\n      control: 'text',\n    },\n    children: {\n      description: 'Content that is displayed inside the card',\n      control: 'text',\n    },\n    topIcon: {\n      description: 'Icon displayed on the top of the card',\n    },\n    topIconType: {\n      description: 'Type of top icon display',\n      control: 'select',\n      options: ['icon', 'image', 'banner'],\n    },\n    showIcon: {\n      description: 'Whether to show the arrow icon in the title',\n      control: 'boolean',\n    },\n    disabled: {\n      description: 'Whether the card is disabled',\n      control: 'boolean',\n    },\n    onClick: {\n      description: 'Click handler for the card',\n    },\n    className: {\n      description: 'Class name for most top parent element',\n      control: 'text',\n    },\n  },\n  args: {\n    title: 'Knowledge Base',\n    children: 'Find the answers you\\'re looking for in our comprehensive, fact-checked library of articles and resources.',\n    topIcon: <BookOpenIcon size={40} />,\n    topIconType: 'iconWithBackground',\n    showIcon: true,\n    disabled: false,\n    className: '',\n  }\n};\n\nexport const InfoCardStory = (args: InfoCardProps) => {\n  return (\n    <div className='bg-neutral-50 p32'>\n      <div className='wmx4'>\n        <InfoCard\n          {...args}\n          onClick={() => console.log('InfoCard clicked!')}\n        >\n          {args.children}\n        </InfoCard>\n      </div>\n    </div>\n  );\n}\n\nexport const IconTypes = () => {\n  return (\n    <div className='bg-neutral-50 p32'>\n      <div className='d-flex gap32 flex-wrap'>\n        <div className='wmx4'>\n          <div className='mb16 fw-bold'>Book Icon</div>\n          <InfoCard\n            title='Knowledge Base'\n            topIcon={<BookOpenIcon size={40} />}\n            topIconType='iconWithBackground'\n            onClick={() => console.log('Book clicked!')}\n          >\n            Find answers in our comprehensive library of articles.\n          </InfoCard>\n        </div>\n        <div className='wmx4'>\n          <div className='mb16 fw-bold'>Heart Icon</div>\n          <InfoCard\n            title='Favorites'\n            topIcon={<HeartIcon size={40} />}\n            topIconType='iconWithBackground'\n            onClick={() => console.log('Heart clicked!')}\n          >\n            Save and organize your favorite items.\n          </InfoCard>\n        </div>\n        <div className='wmx4'>\n          <div className='mb16 fw-bold'>Star Icon</div>\n          <InfoCard\n            title='Premium Features'\n            topIcon={<StarIcon size={40} />}\n            topIconType='iconWithBackground'\n            onClick={() => console.log('Star clicked!')}\n          >\n            Unlock advanced features with premium.\n          </InfoCard>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport const TopIconTypes = () => {\n  return (\n    <div className='bg-neutral-50 p32 m-auto wmx12'>\n      <div className='d-flex gap32 flex-wrap'>\n        <div className='w50'>\n          <div className='mb16 fw-bold'>Icon Type</div>\n          <InfoCard\n            title='Help Center'\n            topIcon={<img src=\"https://placehold.co/80x80\" alt=\"Banner\" />}\n            topIconType='icon'\n            onClick={() => console.log('Icon type clicked!')}\n          >\n            Icon is displayed in a circular way without any background.\n          </InfoCard>\n        </div>\n        <div className='w50'>\n          <div className='mb16 fw-bold'>Icon with background Type</div>\n          <InfoCard\n            title='Help Center'\n            topIcon={<BookOpenIcon size={40} />}\n            topIconType='iconWithBackground'\n            onClick={() => console.log('Icon type clicked!')}\n          >\n            Icon is displayed in a circular background with the orange color.\n          </InfoCard>\n        </div>\n      </div>\n      <div className='d-flex gap32 flex-wrap mt40'>\n        <div className='w50'>\n          <div className='mb16 fw-bold'>Image Type</div>\n          <InfoCard\n            title='Image Gallery'\n            topIcon={<img src=\"https://placehold.co/80x80\" alt=\"Image\" style={{borderRadius: '8px'}} />}\n            topIconType='image'\n            onClick={() => console.log('Image type clicked!')}\n          >\n            Image is displayed as-is without background.\n          </InfoCard>\n        </div>\n        <div className='w50'>\n          <div className='mb16 fw-bold'>Banner Type</div>\n          <InfoCard\n            title='Featured Content'\n            topIcon={<img src=\"https://placehold.co/600x200\" alt=\"Banner\" />}\n            topIconType='banner'\n            onClick={() => console.log('Banner type clicked!')}\n          >\n            Banner spans the full width of the card.\n          </InfoCard>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport const States = () => {\n  return (\n    <div className='bg-neutral-50 p32'>\n      <div className='d-flex gap32 flex-wrap'>\n        <div className='wmx4'>\n          <div className='mb16 fw-bold'>Default State</div>\n          <InfoCard\n            title='Default Card'\n            topIcon={<BookOpenIcon size={40} />}\n            topIconType='icon'\n            onClick={() => console.log('Default clicked!')}\n          >\n            This is a default interactive card.\n          </InfoCard>\n        </div>\n        <div className='wmx4'>\n          <div className='mb16 fw-bold'>Disabled State</div>\n          <InfoCard\n            title='Disabled Card'\n            topIcon={<BookOpenIcon size={40} />}\n            topIconType='icon'\n            disabled={true}\n            onClick={() => console.log('This should not fire')}\n          >\n            This card is disabled and non-interactive.\n          </InfoCard>\n        </div>\n        <div className='wmx4'>\n          <div className='mb16 fw-bold'>Without Arrow Icon</div>\n          <InfoCard\n            title='No Arrow'\n            topIcon={<BookOpenIcon size={40} />}\n            topIconType='icon'\n            showIcon={false}\n            onClick={() => console.log('No arrow clicked!')}\n          >\n            This card has no arrow icon in the title.\n          </InfoCard>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nInfoCardStory.storyName = \"InfoCard\";\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/cards/infoCard/index.stories.tsx"],"sourcesContent":["import { InfoCard, InfoCardProps } from '.';\nimport { images } from '../../../util/images';\nimport { BookOpenIcon, HeartIcon, StarIcon, ShieldIcon } from '../../icon';\n\nconst story = {\n  title: 'JSX/Cards/InfoCard',\n  component: InfoCard,\n  argTypes: {\n    title: {\n      description: 'Title text that needs to be displayed',\n      control: 'text',\n    },\n    children: {\n      description: 'Content that is displayed inside the card',\n      control: 'text',\n    },\n    topIcon: {\n      description: 'Icon displayed on the top of the card',\n    },\n    topIconType: {\n      description: 'Type of top icon display',\n      control: 'select',\n      options: ['icon', 'image', 'banner'],\n    },\n    showIcon: {\n      description: 'Whether to show the arrow icon in the title',\n      control: 'boolean',\n    },\n    disabled: {\n      description: 'Whether the card is disabled',\n      control: 'boolean',\n    },\n    onClick: {\n      description: 'Click handler for the card',\n    },\n    className: {\n      description: 'Class name for most top parent element',\n      control: 'text',\n    },\n  },\n  args: {\n    title: 'Knowledge Base',\n    children:\n      \"Find the answers you're looking for in our comprehensive, fact-checked library of articles and resources.\",\n    topIcon: <BookOpenIcon size={40} />,\n    topIconType: 'iconWithBackground',\n    showIcon: true,\n    disabled: false,\n    className: '',\n  },\n};\n\nexport const InfoCardStory = {\n  render: (args: InfoCardProps) => {\n    return (\n      <div className=\"bg-neutral-50 p32\">\n        <div className=\"wmx4\">\n          <InfoCard {...args} onClick={() => console.log('InfoCard clicked!')}>\n            {args.children}\n          </InfoCard>\n        </div>\n      </div>\n    );\n  },\n\n  name: 'InfoCard',\n};\n\nexport const IconTypes = () => {\n  return (\n    <div className=\"bg-neutral-50 p32\">\n      <div className=\"d-flex gap32 flex-wrap\">\n        <div className=\"wmx4\">\n          <div className=\"mb16 fw-bold\">Book Icon</div>\n          <InfoCard\n            title=\"Knowledge Base\"\n            topIcon={<BookOpenIcon size={40} />}\n            topIconType=\"iconWithBackground\"\n            onClick={() => console.log('Book clicked!')}\n          >\n            Find answers in our comprehensive library of articles.\n          </InfoCard>\n        </div>\n        <div className=\"wmx4\">\n          <div className=\"mb16 fw-bold\">Heart Icon</div>\n          <InfoCard\n            title=\"Favorites\"\n            topIcon={<HeartIcon size={40} />}\n            topIconType=\"iconWithBackground\"\n            onClick={() => console.log('Heart clicked!')}\n          >\n            Save and organize your favorite items.\n          </InfoCard>\n        </div>\n        <div className=\"wmx4\">\n          <div className=\"mb16 fw-bold\">Star Icon</div>\n          <InfoCard\n            title=\"Premium Features\"\n            topIcon={<StarIcon size={40} />}\n            topIconType=\"iconWithBackground\"\n            onClick={() => console.log('Star clicked!')}\n          >\n            Unlock advanced features with premium.\n          </InfoCard>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport const TopIconTypes = () => {\n  return (\n    <div className=\"bg-neutral-50 p32 m-auto wmx12\">\n      <div className=\"d-flex gap32 flex-wrap\">\n        <div className=\"w50\">\n          <div className=\"mb16 fw-bold\">Icon Type</div>\n          <InfoCard\n            title=\"Help Center\"\n            topIcon={<img src=\"https://placehold.co/80x80\" alt=\"Banner\" />}\n            topIconType=\"icon\"\n            onClick={() => console.log('Icon type clicked!')}\n          >\n            Icon is displayed in a circular way without any background.\n          </InfoCard>\n        </div>\n        <div className=\"w50\">\n          <div className=\"mb16 fw-bold\">Icon with background Type</div>\n          <InfoCard\n            title=\"Help Center\"\n            topIcon={<BookOpenIcon size={40} />}\n            topIconType=\"iconWithBackground\"\n            onClick={() => console.log('Icon type clicked!')}\n          >\n            Icon is displayed in a circular background with the orange color.\n          </InfoCard>\n        </div>\n      </div>\n      <div className=\"d-flex gap32 flex-wrap mt40\">\n        <div className=\"w50\">\n          <div className=\"mb16 fw-bold\">Image Type</div>\n          <InfoCard\n            title=\"Image Gallery\"\n            topIcon={\n              <img\n                src=\"https://placehold.co/80x80\"\n                alt=\"Image\"\n                style={{ borderRadius: '8px' }}\n              />\n            }\n            topIconType=\"image\"\n            onClick={() => console.log('Image type clicked!')}\n          >\n            Image is displayed as-is without background.\n          </InfoCard>\n        </div>\n        <div className=\"w50\">\n          <div className=\"mb16 fw-bold\">Banner Type</div>\n          <InfoCard\n            title=\"Featured Content\"\n            topIcon={<img src=\"https://placehold.co/600x200\" alt=\"Banner\" />}\n            topIconType=\"banner\"\n            onClick={() => console.log('Banner type clicked!')}\n          >\n            Banner spans the full width of the card.\n          </InfoCard>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport const States = () => {\n  return (\n    <div className=\"bg-neutral-50 p32\">\n      <div className=\"d-flex gap32 flex-wrap\">\n        <div className=\"wmx4\">\n          <div className=\"mb16 fw-bold\">Default State</div>\n          <InfoCard\n            title=\"Default Card\"\n            topIcon={<BookOpenIcon size={40} />}\n            topIconType=\"icon\"\n            onClick={() => console.log('Default clicked!')}\n          >\n            This is a default interactive card.\n          </InfoCard>\n        </div>\n        <div className=\"wmx4\">\n          <div className=\"mb16 fw-bold\">Disabled State</div>\n          <InfoCard\n            title=\"Disabled Card\"\n            topIcon={<BookOpenIcon size={40} />}\n            topIconType=\"icon\"\n            disabled={true}\n            onClick={() => console.log('This should not fire')}\n          >\n            This card is disabled and non-interactive.\n          </InfoCard>\n        </div>\n        <div className=\"wmx4\">\n          <div className=\"mb16 fw-bold\">Without Arrow Icon</div>\n          <InfoCard\n            title=\"No Arrow\"\n            topIcon={<BookOpenIcon size={40} />}\n            topIconType=\"icon\"\n            showIcon={false}\n            onClick={() => console.log('No arrow clicked!')}\n          >\n            This card has no arrow icon in the title.\n          </InfoCard>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/chip/index.js

@@ -1,13 +1,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import XIcon from '../icon/icons/X.js';
-import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
 import 'react';
+import '../../index-DLQEsiym.js';
+import XIcon from '../icon/icons/X.js';
+import { s as styleInject } from '../../style-inject.es-tgCJW-Cu.js';
+import '../../_commonjsHelpers-BFTU3MAI.js';
 import '../icon/IconWrapper/IconWrapper.js';
-import '../../tslib.es6-a39f91fc.js';
-import '../../index-6ea95111.js';
+import '../../tslib.es6-CVlKGIvp.js';
 
 var css_248z = ".style-module_chip__3LMgV {\n  background: var(--ds-purple-300);\n  border: 2px solid var(--ds-purple-300);\n  border-radius: 8px;\n  padding: 4px 8px;\n  width: fit-content;\n  width: -moz-fit-content;\n  display: flex;\n  align-items: center;\n  animation-name: style-module_appearInAnimation__33Ebn;\n  animation-duration: 0.5s;\n  animation-fill-mode: both;\n}\n\n.style-module_chip__3LMgV:hover {\n  transition: 0.2s ease-in;\n  border: 2px solid var(--ds-purple-600);\n}\n\n.style-module_chip-image__2vVqF {\n  width: 24px;\n  height: 14px;\n}\n\n.style-module_chip-button-container__3gSRY {\n  color: #B8B4F3;\n  position: relative;\n  width: 16px;\n  height: 16px;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  text-align: inherit;\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\n}\n.style-module_chip-button-container__3gSRY:hover {\n  color: #8883D8;\n}\n.style-module_chip-button-container__3gSRY:focus-visible {\n  outline: 2px solid var(--ds-purple-600);\n  border-radius: 2px;\n}\n\n.style-module_chip-remove-button__3LK7e {\n  margin: 0;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.style-module_chip-remove-button__3LK7e svg {\n  vertical-align: top;\n}\n\n@keyframes style-module_appearInAnimation__33Ebn {\n  from {\n    opacity: 0;\n    transform: translateX(16px);\n  }\n  to {\n    opacity: 1;\n  }\n}";
-var styles = {"chip":"style-module_chip__3LMgV","appearInAnimation":"style-module_appearInAnimation__33Ebn","chip-image":"style-module_chip-image__2vVqF","chip-button-container":"style-module_chip-button-container__3gSRY","chip-remove-button":"style-module_chip-remove-button__3LK7e"};
+var styles = {"chip":"style-module_chip__3LMgV","chip-image":"style-module_chip-image__2vVqF","chip-button-container":"style-module_chip-button-container__3gSRY","chip-remove-button":"style-module_chip-remove-button__3LK7e"};
 styleInject(css_248z);
 
 var Chip = (function (_a) {
@@ -15,5 +16,5 @@ var Chip = (function (_a) {
     return (jsxs("div", { className: "p-p mr8 mb8 d-flex ".concat(className, " ").concat(styles['chip']), children: [value.leftIcon && (jsx("img", { className: "mr8 ".concat(styles['chip-image']), src: value.leftIcon, alt: value.value })), jsx("div", { className: "mr8", children: value.value }), jsx("button", { className: "c-pointer ".concat(styles['chip-button-container']), type: "button", onClick: function () { return onRemove(value); }, "aria-label": "Remove ".concat(value.value, " option"), children: jsx(XIcon, { className: styles['chip-remove-button'] }) })] }));
 });
 
-export default Chip;
+export { Chip as default };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/chip/index.tsx"],"sourcesContent":["import { Option } from '../../models/autoSuggestInput';\nimport { XIcon } from '../icon/icons';\n\nimport styles from './style.module.scss';\n\nexport interface ChipProps {\n  value: Option;\n  onRemove: (value: Option) => void;\n  className?: string;\n}\n\nexport default ({\n  className,\n  value,\n  onRemove,\n}: ChipProps) => (\n  <div className={`p-p mr8 mb8 d-flex ${className} ${styles['chip']}`}>\n    {value.leftIcon && (\n      <img\n        className={`mr8 ${styles['chip-image']}`}\n        src={value.leftIcon}\n        alt={value.value}\n      />\n    )}\n    <div className=\"mr8\">{value.value}</div>\n    <button\n      className={`c-pointer ${styles['chip-button-container']}`}\n      type=\"button\"\n      onClick={() => onRemove(value)}\n      aria-label={`Remove ${value.value} option`}\n    >\n      <XIcon className={styles['chip-remove-button']} />\n    </button>\n  </div>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;AAWA,YAAe,UAAC,EAIJ;QAHV,SAAS,eAAA,EACT,KAAK,WAAA,EACL,QAAQ,cAAA;IACO,QACfA,cAAK,SAAS,EAAE,6BAAsB,SAAS,cAAI,MAAM,CAAC,MAAM,CAAC,CAAE,aAChE,KAAK,CAAC,QAAQ,KACbC,aACE,SAAS,EAAE,cAAO,MAAM,CAAC,YAAY,CAAC,CAAE,EACxC,GAAG,EAAE,KAAK,CAAC,QAAQ,EACnB,GAAG,EAAE,KAAK,CAAC,KAAK,GAChB,CACH,EACDA,aAAK,SAAS,EAAC,KAAK,YAAE,KAAK,CAAC,KAAK,GAAO,EACxCA,gBACE,SAAS,EAAE,oBAAa,MAAM,CAAC,uBAAuB,CAAC,CAAE,EACzD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,QAAQ,CAAC,KAAK,CAAC,GAAA,gBAClB,iBAAU,KAAK,CAAC,KAAK,YAAS,YAE1CA,IAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,GAAI,GAC3C,IACL;AAlBS,CAmBhB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/chip/index.tsx"],"sourcesContent":["import { Option } from '../../models/autoSuggestInput';\nimport { XIcon } from '../icon/icons';\n\nimport styles from './style.module.scss';\n\nexport interface ChipProps {\n  value: Option;\n  onRemove: (value: Option) => void;\n  className?: string;\n}\n\nexport default ({\n  className,\n  value,\n  onRemove,\n}: ChipProps) => (\n  <div className={`p-p mr8 mb8 d-flex ${className} ${styles['chip']}`}>\n    {value.leftIcon && (\n      <img\n        className={`mr8 ${styles['chip-image']}`}\n        src={value.leftIcon}\n        alt={value.value}\n      />\n    )}\n    <div className=\"mr8\">{value.value}</div>\n    <button\n      className={`c-pointer ${styles['chip-button-container']}`}\n      type=\"button\"\n      onClick={() => onRemove(value)}\n      aria-label={`Remove ${value.value} option`}\n    >\n      <XIcon className={styles['chip-remove-button']} />\n    </button>\n  </div>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;AAWA,WAAA,CAAe,UAAC,EAIJ,EAAA;AAHV,IAAA,IAAA,SAAS,eAAA,EACT,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,QAAQ,GAAA,EAAA,CAAA,QAAA;IACO,QACfA,cAAK,SAAS,EAAE,6BAAsB,SAAS,EAAA,GAAA,CAAA,CAAA,MAAA,CAAI,MAAM,CAAC,MAAM,CAAC,CAAE,EAAA,QAAA,EAAA,CAChE,KAAK,CAAC,QAAQ,KACbC,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,MAAA,CAAA,MAAA,CAAO,MAAM,CAAC,YAAY,CAAC,CAAE,EACxC,GAAG,EAAE,KAAK,CAAC,QAAQ,EACnB,GAAG,EAAE,KAAK,CAAC,KAAK,EAAA,CAChB,CACH,EACDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,KAAK,EAAA,QAAA,EAAE,KAAK,CAAC,KAAK,GAAO,EACxCA,GAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,YAAA,CAAA,MAAA,CAAa,MAAM,CAAC,uBAAuB,CAAC,CAAE,EACzD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,YAAA,EAAM,OAAA,QAAQ,CAAC,KAAK,CAAC,CAAA,CAAf,CAAe,EAAA,YAAA,EAClB,SAAA,CAAA,MAAA,CAAU,KAAK,CAAC,KAAK,YAAS,EAAA,QAAA,EAE1CA,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,EAAA,CAAI,EAAA,CAC3C,CAAA,EAAA,CACL;AAlBS,CAmBhB;;;;"}

package/dist/esm/components/chip/index.stories.js

@@ -1,12 +1,13 @@
-import { _ as __spreadArray } from '../../tslib.es6-a39f91fc.js';
+import { d as __spreadArray } from '../../tslib.es6-CVlKGIvp.js';
 import { jsx } from 'react/jsx-runtime';
 import Chip from './index.js';
-import { f as featherLogo } from '../../feather-logo-a3f07990.js';
+import { f as featherLogo } from '../../feather-logo-C_EfYEK5.js';
 import { useState } from 'react';
+import '../../index-DLQEsiym.js';
+import '../../_commonjsHelpers-BFTU3MAI.js';
 import '../icon/icons/X.js';
 import '../icon/IconWrapper/IconWrapper.js';
-import '../../index-6ea95111.js';
-import '../../style-inject.es-1f59c1d0.js';
+import '../../style-inject.es-tgCJW-Cu.js';
 
 var story = {
     title: 'JSX/Chip',
@@ -18,7 +19,7 @@ var story = {
         onRemove: {
             description: 'Function that is called when the remove button is clicked',
             table: {
-                category: 'Callbacks'
+                category: 'Callbacks',
             },
         },
         className: {
@@ -33,14 +34,16 @@ var story = {
         className: '',
     },
     parameters: {
-        componentSubtitle: 'Chip component displays text and image (optional) of given values.'
-    }
+        componentSubtitle: 'Chip component displays text and image (optional) of given values.',
+    },
 };
-var ChipStory = function (_a) {
-    var onRemove = _a.onRemove, value = _a.value, className = _a.className;
-    return (jsx(Chip, { onRemove: onRemove, value: value, className: className }));
+var ChipStory = {
+    render: function (_a) {
+        var onRemove = _a.onRemove, value = _a.value, className = _a.className;
+        return (jsx(Chip, { onRemove: onRemove, value: value, className: className }));
+    },
+    name: 'Chip',
 };
-ChipStory.storyName = "Chip";
 var MultipleChips = function () {
     var values = [
         { value: 'feather', leftIcon: featherLogo },
@@ -65,6 +68,5 @@ var MultipleChips = function () {
             } })); }) }));
 };
 
-export default story;
-export { ChipStory, MultipleChips };
+export { ChipStory, MultipleChips, story as default };
 //# sourceMappingURL=index.stories.js.map

package/dist/esm/components/chip/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/chip/index.stories.tsx"],"sourcesContent":["import { on } from 'events';\nimport Chip, { ChipProps } from '.';\n\nimport featherLogo from '../cards/icons/feather-logo.svg';\nimport { useState } from 'react';\n\nconst story = {\n  title: 'JSX/Chip',\n  component: Chip,\n  argTypes: {\n    value: {\n      description: 'Value that is displayed inside the Chip',\n    },\n    onRemove: {\n      description: 'Function that is called when the remove button is clicked',\n      table: {\n        category: 'Callbacks'\n      },\n    },\n    className: {\n      description: 'Class name for the most parent element',\n    },\n  },\n  args: {\n    value: {\n      value: 'feather3',\n      leftIcon: featherLogo,\n    },\n    className: '',\n  },\n  parameters: {\n    componentSubtitle: 'Chip component displays text and image (optional) of given values.'\n  }\n};\n \nexport const ChipStory = ({\n  onRemove,\n  value,\n  className,\n}: ChipProps) => (\n  <Chip\n    onRemove={onRemove}\n    value={value}\n    className={className}\n  />\n);\n\nChipStory.storyName = \"Chip\";\n\nexport const MultipleChips = () => {\n  const values = [\n    { value: 'feather', leftIcon: featherLogo },\n    { value: 'feather2', leftIcon: featherLogo },\n    {\n      value: 'feather3',\n      leftIcon: featherLogo,\n    },\n    {\n      value: 'dirtyswan',\n      leftIcon: featherLogo,\n    },\n    {\n      value: 'test value',\n      leftIcon: featherLogo,\n    },\n  ];\n  const [selectedValues, setSelectedValues] = useState(values);\n\n  return (\n    <div style={{ display: 'flex', flexWrap: 'wrap' }}>\n      {selectedValues.map((value) => (\n        <Chip\n          value={value}\n          onRemove={(value) => {\n            const newValues = [...selectedValues].filter(\n              (selectedValue) => selectedValue.value !== value.value\n            );\n            setSelectedValues(newValues);\n          }}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;IAMM,KAAK,GAAG;IACZ,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,yCAAyC;SACvD;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,2DAA2D;YACxE,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,wCAAwC;SACtD;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,WAAW;SACtB;QACD,SAAS,EAAE,EAAE;KACd;IACD,UAAU,EAAE;QACV,iBAAiB,EAAE,oEAAoE;KACxF;EACD;IAEW,SAAS,GAAG,UAAC,EAId;QAHV,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,SAAS,eAAA;IACM,QACfA,IAAC,IAAI,IACH,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,GACpB;AALa,EAMf;AAEF,SAAS,CAAC,SAAS,GAAG,MAAM,CAAC;IAEhB,aAAa,GAAG;IAC3B,IAAM,MAAM,GAAG;QACb,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE;QAC3C,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE;QAC5C;YACE,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,WAAW;SACtB;QACD;YACE,KAAK,EAAE,WAAW;YAClB,QAAQ,EAAE,WAAW;SACtB;QACD;YACE,KAAK,EAAE,YAAY;YACnB,QAAQ,EAAE,WAAW;SACtB;KACF,CAAC;IACI,IAAA,KAAsC,QAAQ,CAAC,MAAM,CAAC,EAArD,cAAc,QAAA,EAAE,iBAAiB,QAAoB,CAAC;IAE7D,QACEA,aAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAC9C,cAAc,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,QAC7BA,IAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,UAAC,KAAK;gBACd,IAAM,SAAS,GAAG,kBAAI,cAAc,QAAE,MAAM,CAC1C,UAAC,aAAa,IAAK,OAAA,aAAa,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,GAAA,CACvD,CAAC;gBACF,iBAAiB,CAAC,SAAS,CAAC,CAAC;aAC9B,GACD,IACH,CAAC,GACE,EACN;AACJ;;;;;"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/chip/index.stories.tsx"],"sourcesContent":["import { on } from 'events';\nimport Chip, { ChipProps } from '.';\n\nimport featherLogo from '../cards/icons/feather-logo.svg';\nimport { useState } from 'react';\n\nconst story = {\n  title: 'JSX/Chip',\n  component: Chip,\n  argTypes: {\n    value: {\n      description: 'Value that is displayed inside the Chip',\n    },\n    onRemove: {\n      description: 'Function that is called when the remove button is clicked',\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    className: {\n      description: 'Class name for the most parent element',\n    },\n  },\n  args: {\n    value: {\n      value: 'feather3',\n      leftIcon: featherLogo,\n    },\n    className: '',\n  },\n  parameters: {\n    componentSubtitle:\n      'Chip component displays text and image (optional) of given values.',\n  },\n};\n\nexport const ChipStory = {\n  render: ({ onRemove, value, className }: ChipProps) => (\n    <Chip onRemove={onRemove} value={value} className={className} />\n  ),\n\n  name: 'Chip',\n};\n\nexport const MultipleChips = () => {\n  const values = [\n    { value: 'feather', leftIcon: featherLogo },\n    { value: 'feather2', leftIcon: featherLogo },\n    {\n      value: 'feather3',\n      leftIcon: featherLogo,\n    },\n    {\n      value: 'dirtyswan',\n      leftIcon: featherLogo,\n    },\n    {\n      value: 'test value',\n      leftIcon: featherLogo,\n    },\n  ];\n  const [selectedValues, setSelectedValues] = useState(values);\n\n  return (\n    <div style={{ display: 'flex', flexWrap: 'wrap' }}>\n      {selectedValues.map((value) => (\n        <Chip\n          value={value}\n          onRemove={(value) => {\n            const newValues = [...selectedValues].filter(\n              (selectedValue) => selectedValue.value !== value.value\n            );\n            setSelectedValues(newValues);\n          }}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;AAMA,IAAM,KAAK,GAAG;AACZ,IAAA,KAAK,EAAE,UAAU;AACjB,IAAA,SAAS,EAAE,IAAI;AACf,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,WAAW,EAAE,yCAAyC;AACvD,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,WAAW,EAAE,2DAA2D;AACxE,YAAA,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,WAAW;AACtB,aAAA;AACF,SAAA;AACD,QAAA,SAAS,EAAE;AACT,YAAA,WAAW,EAAE,wCAAwC;AACtD,SAAA;AACF,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,QAAQ,EAAE,WAAW;AACtB,SAAA;AACD,QAAA,SAAS,EAAE,EAAE;AACd,KAAA;AACD,IAAA,UAAU,EAAE;AACV,QAAA,iBAAiB,EACf,oEAAoE;AACvE,KAAA;;AAGI,IAAM,SAAS,GAAG;IACvB,MAAM,EAAE,UAAC,EAAyC,EAAA;AAAvC,QAAA,IAAA,QAAQ,cAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA;AAAkB,QAAA,QACrDA,GAAA,CAAC,IAAI,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAI;IADX,CAEtD;AAED,IAAA,IAAI,EAAE,MAAM;;AAGP,IAAM,aAAa,GAAG,YAAA;AAC3B,IAAA,IAAM,MAAM,GAAG;AACb,QAAA,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE;AAC3C,QAAA,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE;AAC5C,QAAA;AACE,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,QAAQ,EAAE,WAAW;AACtB,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,WAAW;AAClB,YAAA,QAAQ,EAAE,WAAW;AACtB,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,QAAQ,EAAE,WAAW;AACtB,SAAA;KACF;IACK,IAAA,EAAA,GAAsC,QAAQ,CAAC,MAAM,CAAC,EAArD,cAAc,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAAoB;AAE5D,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAC9C,cAAc,CAAC,GAAG,CAAC,UAAC,KAAK,EAAA,EAAK,QAC7BA,GAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,UAAC,KAAK,EAAA;gBACd,IAAM,SAAS,GAAG,aAAA,CAAA,EAAA,EAAI,cAAc,QAAE,MAAM,CAC1C,UAAC,aAAa,EAAA,EAAK,OAAA,aAAa,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA,CAAnC,CAAmC,CACvD;gBACD,iBAAiB,CAAC,SAAS,CAAC;AAC9B,YAAA,CAAC,GACD,EACH,CAV8B,CAU9B,CAAC,EAAA,CACE;AAEV;;;;"}

package/dist/esm/components/comparisonTable/components/AccordionItem/AccordionItem.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { A as AnimateHeight } from '../../../../index-e27b50cf.js';
-import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
+import { A as AnimateHeight } from '../../../../index-DYcCCrfR.js';
+import { s as styleInject } from '../../../../style-inject.es-tgCJW-Cu.js';
 import { useState } from 'react';
-import '../../../../index-6ea95111.js';
+import '../../../../index-DLQEsiym.js';
+import '../../../../_commonjsHelpers-BFTU3MAI.js';
 
 var css_248z = ".AccordionItem-module_container__29xle {\n  width: min-content;\n  width: var(--growContent, min-content);\n  max-width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.AccordionItem-module_chevron__1Pdoe {\n  transition: filter 0.3s ease-in-out, transform 0.2s ease-in-out;\n}\n\n.AccordionItem-module_chevronClosed__1Sq5g {\n  transform: rotate(180deg);\n}\n\n.AccordionItem-module_iconAndTextContainer__1K9NF {\n  column-gap: 12px;\n}\n\n.AccordionItem-module_headerButton__1C03u {\n  border: none;\n  background: #FAF8F5;\n  column-gap: 16px;\n  cursor: pointer;\n  font-family: inherit;\n  outline: none;\n  position: relative;\n  text-align: inherit;\n  transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;\n}\n.AccordionItem-module_headerButton__1C03u:hover {\n  background: #FCF7EF;\n}\n\n.AccordionItem-module_headerButton__1C03u:hover .AccordionItem-module_chevron__1Pdoe {\n  filter: brightness(0.425);\n}";
 var styles = {"container":"AccordionItem-module_container__29xle","chevron":"AccordionItem-module_chevron__1Pdoe","chevronClosed":"AccordionItem-module_chevronClosed__1Sq5g","iconAndTextContainer":"AccordionItem-module_iconAndTextContainer__1K9NF","headerButton":"AccordionItem-module_headerButton__1C03u"};

package/dist/esm/components/comparisonTable/components/AccordionItem/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import AnimateHeight from 'react-animate-height';\n\nimport styles from './AccordionItem.module.scss';\nimport { useState } from 'react';\n\nconst ChevronSVG = ({ className }: { className?: string }) => (\n  <svg\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className={className}\n  >\n    <path\n      d=\"M18 15L12 9L6 15\"\n      stroke=\"#b4b4ba\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\nexport const AccordionItem = ({\n  children,\n  className = '',\n  headerClassName = '',\n  label,\n}: {\n  children: React.ReactNode | string;\n  className?: string;\n  headerClassName?: string;\n  label: React.ReactNode;\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const handleClick = () => {\n    setIsOpen(!isOpen);\n  };\n\n  return (\n    <section className={`d-flex fd-column ${styles.container} ${className}`}>\n      <button\n        className={`d-flex ai-center jc-between ${styles.headerButton} ${headerClassName}`}\n        onClick={handleClick}\n        type=\"button\"\n      >\n        <div className={`d-flex ai-center ${styles.iconAndTextContainer}`}>\n          {typeof label === 'string' ? (\n            <h4 className=\"p-h4\">{label}</h4>\n          ) : (\n            <>{label}</>\n          )}\n        </div>\n        <ChevronSVG\n          className={`${styles.chevron} ${!isOpen && styles.chevronClosed}`}\n        />\n      </button>\n      {/* Min height is 0.1 so that the scroll position is correctly synced across accordion items but is not actually shown.\n      If set to 0, react-animate-height will set display to \"none\" which means scrolling is not synced. */}\n      <AnimateHeight duration={300} height={isOpen ? 'auto' : 0.1}>\n        {children}\n      </AnimateHeight>\n    </section>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;AAKA,IAAM,UAAU,GAAG,UAAC,EAAqC;QAAnC,SAAS,eAAA;IAA+B,QAC5DA,aACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,SAAS,YAEpBA,cACE,CAAC,EAAC,kBAAkB,EACpB,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE;AAhBsD,CAiB7D,CAAC;IAEW,aAAa,GAAG,UAAC,EAU7B;QATC,QAAQ,cAAA,EACR,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,uBAAoB,EAApB,eAAe,mBAAG,EAAE,KAAA,EACpB,KAAK,WAAA;IAOC,IAAA,KAAsB,QAAQ,CAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAC;IAC5C,IAAM,WAAW,GAAG;QAClB,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;KACpB,CAAC;IAEF,QACEC,kBAAS,SAAS,EAAE,2BAAoB,MAAM,CAAC,SAAS,cAAI,SAAS,CAAE,aACrEA,iBACE,SAAS,EAAE,sCAA+B,MAAM,CAAC,YAAY,cAAI,eAAe,CAAE,EAClF,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,QAAQ,aAEbD,aAAK,SAAS,EAAE,2BAAoB,MAAM,CAAC,oBAAoB,CAAE,YAC9D,OAAO,KAAK,KAAK,QAAQ,IACxBA,YAAI,SAAS,EAAC,MAAM,YAAE,KAAK,GAAM,KAEjCA,0BAAG,KAAK,GAAI,CACb,GACG,EACNA,IAAC,UAAU,IACT,SAAS,EAAE,UAAG,MAAM,CAAC,OAAO,cAAI,CAAC,MAAM,IAAI,MAAM,CAAC,aAAa,CAAE,GACjE,IACK,EAGTA,IAAC,aAAa,IAAC,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,YACxD,QAAQ,GACK,IACR,EACV;AACJ;;;;"}
+{"version":3,"file":"AccordionItem.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import AnimateHeight from 'react-animate-height';\n\nimport styles from './AccordionItem.module.scss';\nimport { useState } from 'react';\n\nconst ChevronSVG = ({ className }: { className?: string }) => (\n  <svg\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className={className}\n  >\n    <path\n      d=\"M18 15L12 9L6 15\"\n      stroke=\"#b4b4ba\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\nexport const AccordionItem = ({\n  children,\n  className = '',\n  headerClassName = '',\n  label,\n}: {\n  children: React.ReactNode | string;\n  className?: string;\n  headerClassName?: string;\n  label: React.ReactNode;\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const handleClick = () => {\n    setIsOpen(!isOpen);\n  };\n\n  return (\n    <section className={`d-flex fd-column ${styles.container} ${className}`}>\n      <button\n        className={`d-flex ai-center jc-between ${styles.headerButton} ${headerClassName}`}\n        onClick={handleClick}\n        type=\"button\"\n      >\n        <div className={`d-flex ai-center ${styles.iconAndTextContainer}`}>\n          {typeof label === 'string' ? (\n            <h4 className=\"p-h4\">{label}</h4>\n          ) : (\n            <>{label}</>\n          )}\n        </div>\n        <ChevronSVG\n          className={`${styles.chevron} ${!isOpen && styles.chevronClosed}`}\n        />\n      </button>\n      {/* Min height is 0.1 so that the scroll position is correctly synced across accordion items but is not actually shown.\n      If set to 0, react-animate-height will set display to \"none\" which means scrolling is not synced. */}\n      <AnimateHeight duration={300} height={isOpen ? 'auto' : 0.1}>\n        {children}\n      </AnimateHeight>\n    </section>\n  );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;AAKA,IAAM,UAAU,GAAG,UAAC,EAAqC,EAAA;AAAnC,IAAA,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA;IAA+B,QAC5DA,aACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,SAAS,EAAA,QAAA,EAEpBA,GAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,kBAAkB,EACpB,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EAAA,CACtB,EAAA,CACE;AAhBsD,CAiB7D;AAEM,IAAM,aAAa,GAAG,UAAC,EAU7B,EAAA;AATC,IAAA,IAAA,QAAQ,cAAA,EACR,EAAA,GAAA,EAAA,CAAA,SAAc,EAAd,SAAS,mBAAG,EAAE,GAAA,EAAA,EACd,EAAA,GAAA,EAAA,CAAA,eAAoB,EAApB,eAAe,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACpB,KAAK,GAAA,EAAA,CAAA,KAAA;IAOC,IAAA,EAAA,GAAsB,QAAQ,CAAC,KAAK,CAAC,EAApC,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,SAAS,GAAA,EAAA,CAAA,CAAA,CAAmB;AAC3C,IAAA,IAAM,WAAW,GAAG,YAAA;AAClB,QAAA,SAAS,CAAC,CAAC,MAAM,CAAC;AACpB,IAAA,CAAC;IAED,QACEC,IAAA,CAAA,SAAA,EAAA,EAAS,SAAS,EAAE,mBAAA,CAAA,MAAA,CAAoB,MAAM,CAAC,SAAS,EAAA,GAAA,CAAA,CAAA,MAAA,CAAI,SAAS,CAAE,EAAA,QAAA,EAAA,CACrEA,iBACE,SAAS,EAAE,8BAAA,CAAA,MAAA,CAA+B,MAAM,CAAC,YAAY,cAAI,eAAe,CAAE,EAClF,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,QAAQ,EAAA,QAAA,EAAA,CAEbD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,mBAAA,CAAA,MAAA,CAAoB,MAAM,CAAC,oBAAoB,CAAE,EAAA,QAAA,EAC9D,OAAO,KAAK,KAAK,QAAQ,IACxBA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,MAAM,EAAA,QAAA,EAAE,KAAK,GAAM,KAEjCA,GAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAG,KAAK,EAAA,CAAI,CACb,EAAA,CACG,EACNF,GAAA,CAAC,UAAU,IACT,SAAS,EAAE,EAAA,CAAA,MAAA,CAAG,MAAM,CAAC,OAAO,cAAI,CAAC,MAAM,IAAI,MAAM,CAAC,aAAa,CAAE,EAAA,CACjE,CAAA,EAAA,CACK,EAGTA,GAAA,CAAC,aAAa,EAAA,EAAC,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,EAAA,QAAA,EACxD,QAAQ,EAAA,CACK,CAAA,EAAA,CACR;AAEd;;;;"}

package/dist/esm/components/comparisonTable/components/AccordionItem/index.js

@@ -1,7 +1,8 @@
 export { AccordionItem } from './AccordionItem.js';
 import 'react/jsx-runtime';
-import '../../../../index-e27b50cf.js';
+import '../../../../index-DYcCCrfR.js';
 import 'react';
-import '../../../../index-6ea95111.js';
-import '../../../../style-inject.es-1f59c1d0.js';
+import '../../../../index-DLQEsiym.js';
+import '../../../../_commonjsHelpers-BFTU3MAI.js';
+import '../../../../style-inject.es-tgCJW-Cu.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/comparisonTable/components/AccordionItem/index.js.map

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

package/dist/esm/components/comparisonTable/components/Chevron.js

@@ -5,5 +5,5 @@ var Chevron = function (_a) {
     return (jsx("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M15 12.5l-5-5-5 5", stroke: "#26262e", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 };
 
-export default Chevron;
+export { Chevron as default };
 //# sourceMappingURL=Chevron.js.map

package/dist/esm/components/comparisonTable/components/Chevron.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chevron.js","sources":["../../../../../../src/lib/components/comparisonTable/components/Chevron.tsx"],"sourcesContent":["const Chevron = ({ className }: { className?: string }) => (\n  <svg\n    width=\"20\"\n    height=\"20\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className={className}\n  >\n    <path\n      d=\"M15 12.5l-5-5-5 5\"\n      stroke=\"#26262e\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\nexport default Chevron;\n"],"names":["_jsx"],"mappings":";;IAAM,OAAO,GAAG,UAAC,EAAqC;QAAnC,SAAS,eAAA;IAA+B,QACzDA,aACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,SAAS,YAEpBA,cACE,CAAC,EAAC,mBAAmB,EACrB,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE;AAfmD;;;;"}
+{"version":3,"file":"Chevron.js","sources":["../../../../../../src/lib/components/comparisonTable/components/Chevron.tsx"],"sourcesContent":["const Chevron = ({ className }: { className?: string }) => (\n  <svg\n    width=\"20\"\n    height=\"20\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className={className}\n  >\n    <path\n      d=\"M15 12.5l-5-5-5 5\"\n      stroke=\"#26262e\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\nexport default Chevron;\n"],"names":["_jsx"],"mappings":";;AAAA,IAAM,OAAO,GAAG,UAAC,EAAqC,EAAA;AAAnC,IAAA,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA;IAA+B,QACzDA,aACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,SAAS,EAAA,QAAA,EAEpBA,cACE,CAAC,EAAC,mBAAmB,EACrB,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EAAA,CACtB,GACE;AAfmD;;;;"}

package/dist/esm/components/comparisonTable/components/Row/index.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
-import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
-import { c as classNames } from '../../../../index-6ea95111.js';
+import { s as styleInject } from '../../../../style-inject.es-tgCJW-Cu.js';
+import { c as classNames } from '../../../../index-DLQEsiym.js';
+import '../../../../_commonjsHelpers-BFTU3MAI.js';
 
-var css_248z = ".style-module_header__32rw- {\n  position: relative;\n}\n.style-module_header__32rw- > div {\n  width: var(--tableWidth);\n  max-width: 100vw;\n}\n.style-module_header__32rw- > div:nth-child(n+3) {\n  margin: 0;\n}\n@media (min-width: 34rem) {\n  .style-module_header__32rw- > div {\n    width: 211px;\n    width: var(--cellWidth, 211px);\n    max-width: var(--tableWidth);\n    scroll-snap-align: unset;\n  }\n}\n\n.style-module_cell__1NoZ6 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  scroll-snap-align: end;\n  line-height: 24px;\n  padding: 16px 8px;\n  color: #26262e;\n  width: 50vw;\n  max-width: calc(var(--tableWidth) / 2);\n}\n.style-module_cell__1NoZ6:first-child {\n  padding: 16px 8px 16px 0;\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6:first-child {\n    padding: 16px 8px 16px 16px;\n  }\n}\n.style-module_cell__1NoZ6:first-child {\n  background-color: white;\n  /** Add scroll snap to every column except the first one */\n  scroll-snap-align: unset;\n}\n.style-module_cell__1NoZ6:nth-child(n+3) {\n  margin-left: 50vw;\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6:nth-child(n+3) {\n    margin-left: unset;\n  }\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6 {\n    flex: 1 0 211px;\n    flex: 1 0 var(--cellWidth, 211px);\n    width: 211px;\n    width: var(--cellWidth, 211px);\n    padding: 24px 8px;\n  }\n  .style-module_cell__1NoZ6:first-child {\n    padding: 24px 8px 24px 24px;\n  }\n}\n\nh4.style-module_cell__1NoZ6 {\n  max-width: min(212px, calc(var(--tableWidth) / 2));\n  max-width: min(var(--firstColumnWidth, 212px), calc(var(--tableWidth) / 2));\n}\n\n.style-module_title__1xYvu {\n  position: relative;\n  color: #26262e;\n  display: none;\n  line-height: 38px;\n}\n@media (min-width: 34rem) {\n  .style-module_title__1xYvu {\n    display: flex;\n  }\n}\n\n.style-module_sticky__2T5jm {\n  position: sticky;\n  justify-content: flex-start;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  width: 50vw;\n}\n@media (min-width: 34rem) {\n  .style-module_sticky__2T5jm {\n    border-right: 1px solid #f9f9fd;\n    flex: 1 0 288px;\n  }\n}\n\nh4.style-module_addon__CPf60 {\n  border-right: none;\n  max-width: calc(100vw - 64px);\n  width: 100%;\n}\n@media (min-width: 64rem) {\n  h4.style-module_addon__CPf60 {\n    max-width: 976px;\n  }\n}";
+var css_248z = ".style-module_header__32rw- {\n  position: relative;\n}\n.style-module_header__32rw- > div {\n  width: var(--tableWidth);\n  max-width: 100vw;\n}\n.style-module_header__32rw- > div:nth-child(n+3) {\n  margin: 0;\n}\n@media (min-width: 34rem) {\n  .style-module_header__32rw- > div {\n    width: 211px;\n    width: var(--cellWidth, 211px);\n    max-width: var(--tableWidth);\n    scroll-snap-align: unset;\n  }\n}\n\n.style-module_cell__1NoZ6 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  scroll-snap-align: end;\n  line-height: 24px;\n  padding: 16px 8px;\n}\n.style-module_cell__1NoZ6:first-child {\n  padding: 16px 8px 16px 0;\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6:first-child {\n    padding: 16px 8px 16px 16px;\n  }\n}\n.style-module_cell__1NoZ6 {\n  color: #26262e;\n  width: 50vw;\n  max-width: calc(var(--tableWidth) / 2);\n}\n.style-module_cell__1NoZ6:first-child {\n  background-color: white;\n  /** Add scroll snap to every column except the first one */\n  scroll-snap-align: unset;\n}\n.style-module_cell__1NoZ6:nth-child(n+3) {\n  margin-left: 50vw;\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6:nth-child(n+3) {\n    margin-left: unset;\n  }\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6 {\n    flex: 1 0 211px;\n    flex: 1 0 var(--cellWidth, 211px);\n    width: 211px;\n    width: var(--cellWidth, 211px);\n  }\n  .style-module_cell__1NoZ6:first-child {\n    padding: 24px 8px 24px 24px;\n  }\n  .style-module_cell__1NoZ6 {\n    padding: 24px 8px;\n  }\n}\n\nh4.style-module_cell__1NoZ6 {\n  max-width: min(212px, var(--tableWidth) / 2);\n  max-width: min(var(--firstColumnWidth, 212px), var(--tableWidth) / 2);\n}\n\n.style-module_title__1xYvu {\n  position: relative;\n  color: #26262e;\n  display: none;\n  line-height: 38px;\n}\n@media (min-width: 34rem) {\n  .style-module_title__1xYvu {\n    display: flex;\n  }\n}\n\n.style-module_sticky__2T5jm {\n  position: sticky;\n  justify-content: flex-start;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  width: 50vw;\n}\n@media (min-width: 34rem) {\n  .style-module_sticky__2T5jm {\n    border-right: 1px solid #f9f9fd;\n    flex: 1 0 288px;\n  }\n}\n\nh4.style-module_addon__CPf60 {\n  border-right: none;\n  max-width: calc(100vw - 64px);\n  width: 100%;\n}\n@media (min-width: 64rem) {\n  h4.style-module_addon__CPf60 {\n    max-width: 976px;\n  }\n}";
 var styles = {"header":"style-module_header__32rw-","cell":"style-module_cell__1NoZ6","title":"style-module_title__1xYvu","sticky":"style-module_sticky__2T5jm","addon":"style-module_addon__CPf60"};
 styleInject(css_248z);
 
@@ -37,5 +38,5 @@ var Row = function (props) {
 };
 var Row$1 = React__default.memo(Row);
 
-export default Row$1;
+export { Row$1 as default };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/comparisonTable/components/Row/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/Row/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { Cell } from '../../index';\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\ninterface RowProps<T> {\n  cell: Cell<T>;\n  data: Array<T>;\n  isRowHeader?: boolean;\n  rowId: string;\n  cellClassName?: string;\n}\n\nconst Row = <T extends { id: number }>(props: RowProps<T>) => {\n  const { cell, data, isRowHeader, rowId, cellClassName } = props;\n\n  return (\n    <div\n      key={rowId}\n      className={classNames('d-flex w-100', {\n        [styles.header]: isRowHeader,\n      })}\n    >\n      <h4\n        className={classNames(\n          styles.cell,\n          styles.sticky,\n          {\n            [`p-h2 p--serif ${styles.title}`]: isRowHeader,\n            [styles.addon]: typeof cell.key === 'undefined',\n          },\n          cellClassName\n        )}\n      >\n        {cell.label}\n      </h4>\n\n      {Array.isArray(data) &&\n        data.map((item) => {\n          /**\n           * Do not render a cell if\n           * the data source object doesn't have the current key\n           */\n          if (typeof cell.key === 'undefined') return null;\n          if (typeof item[cell.key] === 'undefined') return null;\n\n          return (\n            <div\n              className={classNames('ta-center', styles.cell, cellClassName)}\n              key={`${rowId}-${item.id}`}\n            >\n              {\n                /**\n                 * Return a function if `render` option is present\n                 * else print the current data source value\n                 */\n                typeof cell.render === 'function'\n                  ? cell.render(item[cell.key], item)\n                  : `${item[cell.key]}`\n              }\n            </div>\n          );\n        })}\n    </div>\n  );\n};\n\nexport default React.memo(Row) as typeof Row;\n"],"names":["_jsxs","_jsx","React"],"mappings":";;;;;;;;;AAcA,IAAM,GAAG,GAAG,UAA2B,KAAkB;;IAC/C,IAAA,IAAI,GAA8C,KAAK,KAAnD,EAAE,IAAI,GAAwC,KAAK,KAA7C,EAAE,WAAW,GAA2B,KAAK,YAAhC,EAAE,KAAK,GAAoB,KAAK,MAAzB,EAAE,aAAa,GAAK,KAAK,cAAV,CAAW;IAEhE,QACEA,cAEE,SAAS,EAAE,UAAU,CAAC,cAAc;YAClC,GAAC,MAAM,CAAC,MAAM,IAAG,WAAW;gBAC5B,aAEFC,YACE,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,MAAM;oBAEX,GAAC,wBAAiB,MAAM,CAAC,KAAK,CAAE,IAAG,WAAW;oBAC9C,GAAC,MAAM,CAAC,KAAK,IAAG,OAAO,IAAI,CAAC,GAAG,KAAK,WAAW;yBAEjD,aAAa,CACd,YAEA,IAAI,CAAC,KAAK,GACR,EAEJ,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;gBAClB,IAAI,CAAC,GAAG,CAAC,UAAC,IAAI;;;;;oBAKZ,IAAI,OAAO,IAAI,CAAC,GAAG,KAAK,WAAW;wBAAE,OAAO,IAAI,CAAC;oBACjD,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,WAAW;wBAAE,OAAO,IAAI,CAAC;oBAEvD,QACEA,aACE,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC;;;;;wBAQ5D,OAAO,IAAI,CAAC,MAAM,KAAK,UAAU;8BAC7B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC;8BACjC,UAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAE,IATpB,UAAG,KAAK,cAAI,IAAI,CAAC,EAAE,CAAE,CAWtB,EACN;iBACH,CAAC,KA5CC,KAAK,CA6CN,EACN;AACJ,CAAC,CAAC;AAEF,YAAeC,cAAK,CAAC,IAAI,CAAC,GAAG,CAAe;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/Row/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { Cell } from '../../index';\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\ninterface RowProps<T> {\n  cell: Cell<T>;\n  data: Array<T>;\n  isRowHeader?: boolean;\n  rowId: string;\n  cellClassName?: string;\n}\n\nconst Row = <T extends { id: number }>(props: RowProps<T>) => {\n  const { cell, data, isRowHeader, rowId, cellClassName } = props;\n\n  return (\n    <div\n      key={rowId}\n      className={classNames('d-flex w-100', {\n        [styles.header]: isRowHeader,\n      })}\n    >\n      <h4\n        className={classNames(\n          styles.cell,\n          styles.sticky,\n          {\n            [`p-h2 p--serif ${styles.title}`]: isRowHeader,\n            [styles.addon]: typeof cell.key === 'undefined',\n          },\n          cellClassName\n        )}\n      >\n        {cell.label}\n      </h4>\n\n      {Array.isArray(data) &&\n        data.map((item) => {\n          /**\n           * Do not render a cell if\n           * the data source object doesn't have the current key\n           */\n          if (typeof cell.key === 'undefined') return null;\n          if (typeof item[cell.key] === 'undefined') return null;\n\n          return (\n            <div\n              className={classNames('ta-center', styles.cell, cellClassName)}\n              key={`${rowId}-${item.id}`}\n            >\n              {\n                /**\n                 * Return a function if `render` option is present\n                 * else print the current data source value\n                 */\n                typeof cell.render === 'function'\n                  ? cell.render(item[cell.key], item)\n                  : `${item[cell.key]}`\n              }\n            </div>\n          );\n        })}\n    </div>\n  );\n};\n\nexport default React.memo(Row) as typeof Row;\n"],"names":["_jsxs","_jsx","React"],"mappings":";;;;;;;;;;AAcA,IAAM,GAAG,GAAG,UAA2B,KAAkB,EAAA;;IAC/C,IAAA,IAAI,GAA8C,KAAK,CAAA,IAAnD,EAAE,IAAI,GAAwC,KAAK,CAAA,IAA7C,EAAE,WAAW,GAA2B,KAAK,CAAA,WAAhC,EAAE,KAAK,GAAoB,KAAK,CAAA,KAAzB,EAAE,aAAa,GAAK,KAAK,CAAA,aAAV;AAErD,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAEE,SAAS,EAAE,UAAU,CAAC,cAAc,GAAA,EAAA,GAAA,EAAA;AAClC,YAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,WAAW;gBAC5B,EAAA,QAAA,EAAA,CAEFC,GAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,MAAM,GAAA,EAAA,GAAA,EAAA;AAEX,oBAAA,EAAA,CAAC,wBAAiB,MAAM,CAAC,KAAK,CAAE,IAAG,WAAW;oBAC9C,EAAA,CAAC,MAAM,CAAC,KAAK,CAAA,GAAG,OAAO,IAAI,CAAC,GAAG,KAAK,WAAW;AAEjD,oBAAA,EAAA,GAAA,aAAa,CACd,EAAA,QAAA,EAEA,IAAI,CAAC,KAAK,EAAA,CACR,EAEJ,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;AAClB,gBAAA,IAAI,CAAC,GAAG,CAAC,UAAC,IAAI,EAAA;AACZ;;;AAGG;AACH,oBAAA,IAAI,OAAO,IAAI,CAAC,GAAG,KAAK,WAAW;AAAE,wBAAA,OAAO,IAAI;oBAChD,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,WAAW;AAAE,wBAAA,OAAO,IAAI;AAEtD,oBAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC,EAAA,QAAA;AAI5D;;;AAGG;AACH,wBAAA,OAAO,IAAI,CAAC,MAAM,KAAK;AACrB,8BAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI;AAClC,8BAAE,EAAA,CAAA,MAAA,CAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAE,IATpB,EAAA,CAAA,MAAA,CAAG,KAAK,cAAI,IAAI,CAAC,EAAE,CAAE,CAWtB;AAEV,gBAAA,CAAC,CAAC,CAAA,EAAA,EA5CC,KAAK,CA6CN;AAEV,CAAC;AAED,YAAeC,cAAK,CAAC,IAAI,CAAC,GAAG,CAAe;;;;"}

package/dist/esm/components/comparisonTable/components/TableArrows/Arrow.js

@@ -5,5 +5,5 @@ var ArrowIcon = function (_a) {
     return (jsx("svg", { width: "14", height: "8", viewBox: "0 0 14 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M1 1.00003L7 7.00003L13 1.00003", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 };
 
-export default ArrowIcon;
+export { ArrowIcon as default };
 //# sourceMappingURL=Arrow.js.map

package/dist/esm/components/comparisonTable/components/TableArrows/Arrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Arrow.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/TableArrows/Arrow.tsx"],"sourcesContent":["const ArrowIcon = ({ className }: { className?: string }) => (\n  <svg\n    width=\"14\"\n    height=\"8\"\n    viewBox=\"0 0 14 8\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className={className}\n  >\n    <path\n      d=\"M1 1.00003L7 7.00003L13 1.00003\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\nexport default ArrowIcon;\n"],"names":["_jsx"],"mappings":";;IAAM,SAAS,GAAG,UAAC,EAAqC;QAAnC,SAAS,eAAA;IAA+B,QAC3DA,aACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,SAAS,YAEpBA,cACE,CAAC,EAAC,iCAAiC,EACnC,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE;AAfqD;;;;"}
+{"version":3,"file":"Arrow.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/TableArrows/Arrow.tsx"],"sourcesContent":["const ArrowIcon = ({ className }: { className?: string }) => (\n  <svg\n    width=\"14\"\n    height=\"8\"\n    viewBox=\"0 0 14 8\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className={className}\n  >\n    <path\n      d=\"M1 1.00003L7 7.00003L13 1.00003\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\nexport default ArrowIcon;\n"],"names":["_jsx"],"mappings":";;AAAA,IAAM,SAAS,GAAG,UAAC,EAAqC,EAAA;AAAnC,IAAA,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA;IAA+B,QAC3DA,aACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,SAAS,YAEpBA,GAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,iCAAiC,EACnC,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EAAA,CACtB,GACE;AAfqD;;;;"}

package/dist/esm/components/comparisonTable/components/TableArrows/index.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { c as classNames } from '../../../../index-6ea95111.js';
+import { c as classNames } from '../../../../index-DLQEsiym.js';
 import ArrowIcon from './Arrow.js';
-import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
+import { s as styleInject } from '../../../../style-inject.es-tgCJW-Cu.js';
+import '../../../../_commonjsHelpers-BFTU3MAI.js';
 
 var css_248z = ".style-module_container__3BxOi {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  padding: 0 8px;\n  justify-content: space-between;\n  align-items: stretch;\n  display: flex;\n}\n@media (min-width: 34rem) {\n  .style-module_container__3BxOi {\n    display: none;\n  }\n}\n\n.style-module_next__3yJsi {\n  transform: rotate(-90deg);\n}\n\n.style-module_prev__3rIR_ {\n  transform: rotate(90deg);\n}\n\n.style-module_arrow__1tlbD {\n  width: 32px;\n  height: 56px;\n  z-index: 3;\n  padding: 0;\n  border-radius: 8px;\n  background-color: #f7f7fd;\n  justify-content: center;\n  align-items: center;\n  stroke: #b8b8c0;\n}\n.style-module_arrow__1tlbD:hover, .style-module_arrow__1tlbD:focus {\n  background-color: #f7f7fd;\n  cursor: not-allowed;\n}\n\n.style-module_active__2kklB {\n  stroke: #26262e;\n}\n.style-module_active__2kklB:hover, .style-module_active__2kklB:focus {\n  background-color: #f7f7fd;\n  cursor: pointer;\n}\n\n.style-module_noPointerEvents__21KuB {\n  visibility: hidden;\n  pointer-events: none;\n}";
 var styles = {"container":"style-module_container__3BxOi","next":"style-module_next__3yJsi","prev":"style-module_prev__3rIR_","arrow":"style-module_arrow__1tlbD","active":"style-module_active__2kklB","noPointerEvents":"style-module_noPointerEvents__21KuB"};
@@ -20,5 +21,5 @@ var TableArrows = function (props) {
                     _b)), children: jsx(ArrowIcon, {}) })] }));
 };
 
-export default TableArrows;
+export { TableArrows as default };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/comparisonTable/components/TableArrows/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/TableArrows/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport ArrowIcon from './Arrow';\nimport styles from './style.module.scss';\n\nexport type ArrowValues = 'prev' | 'next';\n\ninterface TableArrowsProps {\n  onClick: (value: ArrowValues) => void;\n  active: { left: boolean; right: boolean };\n}\n\nconst TableArrows = (props: TableArrowsProps) => {\n  const { active, onClick } = props;\n  const handleButtonClick = (value: ArrowValues) => () => onClick(value);\n\n  return (\n    <div className={styles.container}>\n      <button\n        onClick={handleButtonClick('prev')}\n        className={classNames(\n          `p-btn--secondary d-flex`,\n          styles.prev,\n          styles.arrow,\n          {\n            [styles.active]: active.left,\n            [styles.noPointerEvents]: !active.left,\n          }\n        )}\n      >\n        <ArrowIcon />\n      </button>\n      <button\n        onClick={handleButtonClick('next')}\n        className={classNames(\n          `p-btn--secondary d-flex`,\n          styles.next,\n          styles.arrow,\n          {\n            [styles.active]: active.right,\n            [styles.noPointerEvents]: !active.right,\n          }\n        )}\n      >\n        <ArrowIcon />\n      </button>\n    </div>\n  );\n};\n\nexport default TableArrows;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;IAaM,WAAW,GAAG,UAAC,KAAuB;;IAClC,IAAA,MAAM,GAAc,KAAK,OAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;IAClC,IAAM,iBAAiB,GAAG,UAAC,KAAkB,IAAK,OAAA,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,GAAA,GAAA,CAAC;IAEvE,QACEA,cAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC9BC,gBACE,OAAO,EAAE,iBAAiB,CAAC,MAAM,CAAC,EAClC,SAAS,EAAE,UAAU,CACnB,yBAAyB,EACzB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,KAAK;oBAEV,GAAC,MAAM,CAAC,MAAM,IAAG,MAAM,CAAC,IAAI;oBAC5B,GAAC,MAAM,CAAC,eAAe,IAAG,CAAC,MAAM,CAAC,IAAI;wBAEzC,YAEDA,IAAC,SAAS,KAAG,GACN,EACTA,gBACE,OAAO,EAAE,iBAAiB,CAAC,MAAM,CAAC,EAClC,SAAS,EAAE,UAAU,CACnB,yBAAyB,EACzB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,KAAK;oBAEV,GAAC,MAAM,CAAC,MAAM,IAAG,MAAM,CAAC,KAAK;oBAC7B,GAAC,MAAM,CAAC,eAAe,IAAG,CAAC,MAAM,CAAC,KAAK;wBAE1C,YAEDA,IAAC,SAAS,KAAG,GACN,IACL,EACN;AACJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/TableArrows/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport ArrowIcon from './Arrow';\nimport styles from './style.module.scss';\n\nexport type ArrowValues = 'prev' | 'next';\n\ninterface TableArrowsProps {\n  onClick: (value: ArrowValues) => void;\n  active: { left: boolean; right: boolean };\n}\n\nconst TableArrows = (props: TableArrowsProps) => {\n  const { active, onClick } = props;\n  const handleButtonClick = (value: ArrowValues) => () => onClick(value);\n\n  return (\n    <div className={styles.container}>\n      <button\n        onClick={handleButtonClick('prev')}\n        className={classNames(\n          `p-btn--secondary d-flex`,\n          styles.prev,\n          styles.arrow,\n          {\n            [styles.active]: active.left,\n            [styles.noPointerEvents]: !active.left,\n          }\n        )}\n      >\n        <ArrowIcon />\n      </button>\n      <button\n        onClick={handleButtonClick('next')}\n        className={classNames(\n          `p-btn--secondary d-flex`,\n          styles.next,\n          styles.arrow,\n          {\n            [styles.active]: active.right,\n            [styles.noPointerEvents]: !active.right,\n          }\n        )}\n      >\n        <ArrowIcon />\n      </button>\n    </div>\n  );\n};\n\nexport default TableArrows;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAaA,IAAM,WAAW,GAAG,UAAC,KAAuB,EAAA;;IAClC,IAAA,MAAM,GAAc,KAAK,CAAA,MAAnB,EAAE,OAAO,GAAK,KAAK,CAAA,OAAV;AACvB,IAAA,IAAM,iBAAiB,GAAG,UAAC,KAAkB,EAAA,EAAK,OAAA,YAAA,EAAM,OAAA,OAAO,CAAC,KAAK,CAAC,CAAA,CAAd,CAAc,CAAA,CAApB,CAAoB;AAEtE,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,EAAA,QAAA,EAAA,CAC9BC,GAAA,CAAA,QAAA,EAAA,EACE,OAAO,EAAE,iBAAiB,CAAC,MAAM,CAAC,EAClC,SAAS,EAAE,UAAU,CACnB,yBAAyB,EACzB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,KAAK,GAAA,EAAA,GAAA,EAAA;AAEV,oBAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,MAAM,CAAC,IAAI;AAC5B,oBAAA,EAAA,CAAC,MAAM,CAAC,eAAe,IAAG,CAAC,MAAM,CAAC,IAAI;wBAEzC,EAAA,QAAA,EAEDA,GAAA,CAAC,SAAS,EAAA,EAAA,CAAG,EAAA,CACN,EACTA,gBACE,OAAO,EAAE,iBAAiB,CAAC,MAAM,CAAC,EAClC,SAAS,EAAE,UAAU,CACnB,yBAAyB,EACzB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,KAAK,GAAA,EAAA,GAAA,EAAA;AAEV,oBAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,MAAM,CAAC,KAAK;AAC7B,oBAAA,EAAA,CAAC,MAAM,CAAC,eAAe,IAAG,CAAC,MAAM,CAAC,KAAK;AAE1C,oBAAA,EAAA,EAAA,EAAA,QAAA,EAEDA,IAAC,SAAS,EAAA,EAAA,CAAG,EAAA,CACN,CAAA,EAAA,CACL;AAEV;;;;"}

package/dist/esm/components/comparisonTable/components/TableButton/index.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
+import { s as styleInject } from '../../../../style-inject.es-tgCJW-Cu.js';
 import TableInfoButton from '../TableInfoButton/index.js';
-import '../../../icon/icons/Info.js';
 import 'react';
+import '../../../../index-DLQEsiym.js';
+import '../../../../_commonjsHelpers-BFTU3MAI.js';
+import '../../../icon/icons/Info.js';
 import '../../../icon/IconWrapper/IconWrapper.js';
-import '../../../../tslib.es6-a39f91fc.js';
-import '../../../../index-6ea95111.js';
+import '../../../../tslib.es6-CVlKGIvp.js';
 
 var css_248z = ".style-module_wrapper__1s115 {\n  position: relative;\n}\n\n.style-module_infoButton__1nIU2 {\n  position: absolute;\n  right: -32px;\n  top: 0;\n}";
 var styles = {"wrapper":"style-module_wrapper__1s115","infoButton":"style-module_infoButton__1nIU2"};
@@ -16,5 +17,5 @@ var TableButton = function (_a) {
     return (jsxs("div", { className: styles.wrapper, children: [children, jsx(TableInfoButton, { className: "".concat(styles.infoButton, " ").concat(className), "data-testid": "ds-table-button", onClick: onClick })] }));
 };
 
-export default TableButton;
+export { TableButton as default };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/comparisonTable/components/TableButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/TableButton/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport styles from './style.module.scss';\nimport TableInfoButton from '../TableInfoButton';\n\ninterface Props {\n  children: ReactNode;\n  onClick: () => void;\n  className?: string;\n}\n\nconst TableButton: React.FC<Props> = ({\n  children,\n  onClick,\n  className = '',\n}) => (\n  <div className={styles.wrapper}>\n    {children}\n    <TableInfoButton\n      className={`${styles.infoButton} ${className}`}\n      data-testid=\"ds-table-button\"\n      onClick={onClick}\n    />\n  </div>\n);\n\nexport default TableButton;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;IAUM,WAAW,GAAoB,UAAC,EAIrC;QAHC,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA;IACV,QACJA,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,aAC3B,QAAQ,EACTC,IAAC,eAAe,IACd,SAAS,EAAE,UAAG,MAAM,CAAC,UAAU,cAAI,SAAS,CAAE,iBAClC,iBAAiB,EAC7B,OAAO,EAAE,OAAO,GAChB,IACE;AARF;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/TableButton/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport styles from './style.module.scss';\nimport TableInfoButton from '../TableInfoButton';\n\ninterface Props {\n  children: ReactNode;\n  onClick: () => void;\n  className?: string;\n}\n\nconst TableButton: React.FC<Props> = ({\n  children,\n  onClick,\n  className = '',\n}) => (\n  <div className={styles.wrapper}>\n    {children}\n    <TableInfoButton\n      className={`${styles.infoButton} ${className}`}\n      data-testid=\"ds-table-button\"\n      onClick={onClick}\n    />\n  </div>\n);\n\nexport default TableButton;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;AAUA,IAAM,WAAW,GAAoB,UAAC,EAIrC,EAAA;QAHC,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,iBAAc,EAAd,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA;AACV,IAAA,QACJA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,QAAA,EAAA,CAC3B,QAAQ,EACTC,GAAA,CAAC,eAAe,IACd,SAAS,EAAE,EAAA,CAAA,MAAA,CAAG,MAAM,CAAC,UAAU,EAAA,GAAA,CAAA,CAAA,MAAA,CAAI,SAAS,CAAE,EAAA,aAAA,EAClC,iBAAiB,EAC7B,OAAO,EAAE,OAAO,EAAA,CAChB,IACE;AARF;;;;"}