@popsure/dirty-swan 0.58.7 → 0.59.0-alpha

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

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
 
-var css_248z = ".style-module_background-container__2Gjka {\n  position: relative;\n  display: inline-block;\n  background-color: var(--ds-primary-100);\n  border-radius: 8px;\n  padding: 0 8px;\n}\n\n.style-module_chip-container__7XeKn {\n  display: flex;\n  align-items: center;\n}\n\n.style-module_chip__3rgLT {\n  cursor: pointer;\n  z-index: 2;\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.style-module_chip__3rgLT:focus {\n  outline-color: var(--ds-primary-500);\n  outline-offset: 2px;\n}\n\n.style-module_select-chip-background__YCAyw {\n  position: absolute;\n  background-color: white;\n  border-radius: 8px;\n  top: 8px;\n  z-index: 1;\n  transition: width 0.3s, left 0.3s;\n}";
+var css_248z = ".style-module_background-container__2Gjka {\n  position: relative;\n  display: inline-block;\n  background-color: var(--ds-primary-100);\n  border-radius: 8px;\n  padding: 0 8px;\n}\n\n.style-module_chip-container__7XeKn {\n  display: flex;\n  align-items: center;\n}\n\n.style-module_chip__3rgLT {\n  cursor: pointer;\n  z-index: 2;\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.style-module_chip__3rgLT:focus {\n  outline-color: var(--ds-purple-600);\n  outline-offset: 2px;\n}\n\n.style-module_select-chip-background__YCAyw {\n  position: absolute;\n  background-color: white;\n  border-radius: 8px;\n  top: 8px;\n  z-index: 1;\n  transition: width 0.3s, left 0.3s;\n}";
 var styles = {"background-container":"style-module_background-container__2Gjka","chip-container":"style-module_chip-container__7XeKn","chip":"style-module_chip__3rgLT","select-chip-background":"style-module_select-chip-background__YCAyw"};
 styleInject(css_248z);
 
@@ -25,9 +25,9 @@ var SegmentedControl = function (_a) {
                                 }
                             }, onClick: function () {
                                 onChange(index);
-                            }, className: styles.chip, children: typeof value === 'string' ? (jsx("div", { className: "p-h4 ta-center ".concat(selectedIndex === index ? '' : 'tc-primary-500'), children: value })) : (jsxs(Fragment, { children: [jsx("div", { className: "p-h4 ta-center ".concat(selectedIndex === index ? '' : 'tc-primary-500'), children: value.title }), jsx("div", { className: "p-p--small ta-center ".concat(selectedIndex === index
-                                            ? 'tc-grey-500'
-                                            : 'tc-primary-500'), children: value.subtitle })] })) }, typeof value === 'string' ? value : value.title));
+                            }, className: styles.chip, children: typeof value === 'string' ? (jsx("div", { className: "p-h4 ta-center ".concat(selectedIndex === index ? '' : 'tc-purple-600'), children: value })) : (jsxs(Fragment, { children: [jsx("div", { className: "p-h4 ta-center ".concat(selectedIndex === index ? '' : 'tc-purple-600'), children: value.title }), jsx("div", { className: "p-p--small ta-center ".concat(selectedIndex === index
+                                            ? 'tc-neutral-600'
+                                            : 'tc-purple-600'), children: value.subtitle })] })) }, typeof value === 'string' ? value : value.title));
                     }) }), jsx("div", { className: styles['select-chip-background'], style: {
                         width: "".concat(selectedChipBackgroundWidthLeft.width, "px"),
                         height: "".concat(height - 16, "px"),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/segmentedControl/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport styles from './style.module.scss';\n\ninterface TitleWithSubtitle {\n  title: string;\n  subtitle: string;\n}\n\nexport interface SegmentedControlProps {\n  className?: string;\n  values: Array<TitleWithSubtitle> | Array<string>;\n  selectedIndex: number;\n  onChange: (selectedIndex: number) => void;\n}\n\nconst SegmentedControl = ({\n  className = '',\n  values,\n  selectedIndex,\n  onChange,\n}: SegmentedControlProps) => {\n  const [selectedChipBackgroundWidthLeft, setSelectedChipBackgroundWidthLeft] =\n    useState<{\n      left: number;\n      width: number;\n    }>({ left: 0, width: 0 });\n  const chipContainer = useRef<HTMLDivElement | null>(null);\n  const height = typeof values[0] === 'string' ? 48 : 66;\n\n  useEffect(() => {\n    const selectedChip = chipContainer.current?.children[\n      selectedIndex\n    ] as HTMLDivElement;\n    const left = selectedChip.offsetLeft;\n    const width = selectedChip.offsetWidth;\n    setSelectedChipBackgroundWidthLeft({ left, width });\n  }, [selectedIndex]);\n\n  return (\n    <div className={className}>\n      <div className={styles['background-container']}>\n        <div\n          ref={chipContainer}\n          className={styles['chip-container']}\n          style={{ height: `${height}px` }}\n        >\n          {values.map((value: TitleWithSubtitle | string, index: number) => {\n            return (\n              <div\n                role=\"button\"\n                tabIndex={0}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.code === 'Space') {\n                    onChange(index);\n                  }\n                }}\n                onClick={() => {\n                  onChange(index);\n                }}\n                className={styles.chip}\n                key={typeof value === 'string' ? value : value.title}\n              >\n                {typeof value === 'string' ? (\n                  <div\n                    className={`p-h4 ta-center ${\n                      selectedIndex === index ? '' : 'tc-primary-500'\n                    }`}\n                  >\n                    {value}\n                  </div>\n                ) : (\n                  <>\n                    <div\n                      className={`p-h4 ta-center ${\n                        selectedIndex === index ? '' : 'tc-primary-500'\n                      }`}\n                    >\n                      {value.title}\n                    </div>\n                    <div\n                      className={`p-p--small ta-center ${\n                        selectedIndex === index\n                          ? 'tc-grey-500'\n                          : 'tc-primary-500'\n                      }`}\n                    >\n                      {value.subtitle}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n        </div>\n        <div\n          className={styles['select-chip-background']}\n          style={{\n            width: `${selectedChipBackgroundWidthLeft.width}px`,\n            height: `${height - 16}px`,\n            left: `${selectedChipBackgroundWidthLeft.left}px`,\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport { SegmentedControl };\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;IAeM,gBAAgB,GAAG,UAAC,EAKF;QAJtB,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,QAAQ,cAAA;IAEF,IAAA,KACJ,QAAQ,CAGL,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAJpB,+BAA+B,QAAA,EAAE,kCAAkC,QAI/C,CAAC;IAC5B,IAAM,aAAa,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC1D,IAAM,MAAM,GAAG,OAAO,MAAM,CAAC,CAAC,CAAC,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE,CAAC;IAEvD,SAAS,CAAC;;QACR,IAAM,YAAY,GAAG,MAAA,aAAa,CAAC,OAAO,0CAAE,QAAQ,CAClD,aAAa,CACI,CAAC;QACpB,IAAM,IAAI,GAAG,YAAY,CAAC,UAAU,CAAC;QACrC,IAAM,KAAK,GAAG,YAAY,CAAC,WAAW,CAAC;QACvC,kCAAkC,CAAC,EAAE,IAAI,MAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;KACrD,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,QACEA,aAAK,SAAS,EAAE,SAAS,YACvBC,cAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,aAC5CD,aACE,GAAG,EAAE,aAAa,EAClB,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACnC,KAAK,EAAE,EAAE,MAAM,EAAE,UAAG,MAAM,OAAI,EAAE,YAE/B,MAAM,CAAC,GAAG,CAAC,UAAC,KAAiC,EAAE,KAAa;wBAC3D,QACEA,aACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,UAAC,CAAC;gCACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE;oCAC3C,QAAQ,CAAC,KAAK,CAAC,CAAC;iCACjB;6BACF,EACD,OAAO,EAAE;gCACP,QAAQ,CAAC,KAAK,CAAC,CAAC;6BACjB,EACD,SAAS,EAAE,MAAM,CAAC,IAAI,YAGrB,OAAO,KAAK,KAAK,QAAQ,IACxBA,aACE,SAAS,EAAE,yBACT,aAAa,KAAK,KAAK,GAAG,EAAE,GAAG,gBAAgB,CAC/C,YAED,KAAK,GACF,KAENC,4BACED,aACE,SAAS,EAAE,yBACT,aAAa,KAAK,KAAK,GAAG,EAAE,GAAG,gBAAgB,CAC/C,YAED,KAAK,CAAC,KAAK,GACR,EACNA,aACE,SAAS,EAAE,+BACT,aAAa,KAAK,KAAK;8CACnB,aAAa;8CACb,gBAAgB,CACpB,YAED,KAAK,CAAC,QAAQ,GACX,IACL,CACJ,IA7BI,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC,KAAK,CA8BhD,EACN;qBACH,CAAC,GACE,EACNA,aACE,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC,EAC3C,KAAK,EAAE;wBACL,KAAK,EAAE,UAAG,+BAA+B,CAAC,KAAK,OAAI;wBACnD,MAAM,EAAE,UAAG,MAAM,GAAG,EAAE,OAAI;wBAC1B,IAAI,EAAE,UAAG,+BAA+B,CAAC,IAAI,OAAI;qBAClD,GACD,IACE,GACF,EACN;AACJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/segmentedControl/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport styles from './style.module.scss';\n\ninterface TitleWithSubtitle {\n  title: string;\n  subtitle: string;\n}\n\nexport interface SegmentedControlProps {\n  className?: string;\n  values: Array<TitleWithSubtitle> | Array<string>;\n  selectedIndex: number;\n  onChange: (selectedIndex: number) => void;\n}\n\nconst SegmentedControl = ({\n  className = '',\n  values,\n  selectedIndex,\n  onChange,\n}: SegmentedControlProps) => {\n  const [selectedChipBackgroundWidthLeft, setSelectedChipBackgroundWidthLeft] =\n    useState<{\n      left: number;\n      width: number;\n    }>({ left: 0, width: 0 });\n  const chipContainer = useRef<HTMLDivElement | null>(null);\n  const height = typeof values[0] === 'string' ? 48 : 66;\n\n  useEffect(() => {\n    const selectedChip = chipContainer.current?.children[\n      selectedIndex\n    ] as HTMLDivElement;\n    const left = selectedChip.offsetLeft;\n    const width = selectedChip.offsetWidth;\n    setSelectedChipBackgroundWidthLeft({ left, width });\n  }, [selectedIndex]);\n\n  return (\n    <div className={className}>\n      <div className={styles['background-container']}>\n        <div\n          ref={chipContainer}\n          className={styles['chip-container']}\n          style={{ height: `${height}px` }}\n        >\n          {values.map((value: TitleWithSubtitle | string, index: number) => {\n            return (\n              <div\n                role=\"button\"\n                tabIndex={0}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.code === 'Space') {\n                    onChange(index);\n                  }\n                }}\n                onClick={() => {\n                  onChange(index);\n                }}\n                className={styles.chip}\n                key={typeof value === 'string' ? value : value.title}\n              >\n                {typeof value === 'string' ? (\n                  <div\n                    className={`p-h4 ta-center ${\n                      selectedIndex === index ? '' : 'tc-purple-600'\n                    }`}\n                  >\n                    {value}\n                  </div>\n                ) : (\n                  <>\n                    <div\n                      className={`p-h4 ta-center ${\n                        selectedIndex === index ? '' : 'tc-purple-600'\n                      }`}\n                    >\n                      {value.title}\n                    </div>\n                    <div\n                      className={`p-p--small ta-center ${\n                        selectedIndex === index\n                          ? 'tc-neutral-600'\n                          : 'tc-purple-600'\n                      }`}\n                    >\n                      {value.subtitle}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n        </div>\n        <div\n          className={styles['select-chip-background']}\n          style={{\n            width: `${selectedChipBackgroundWidthLeft.width}px`,\n            height: `${height - 16}px`,\n            left: `${selectedChipBackgroundWidthLeft.left}px`,\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport { SegmentedControl };\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;IAeM,gBAAgB,GAAG,UAAC,EAKF;QAJtB,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,QAAQ,cAAA;IAEF,IAAA,KACJ,QAAQ,CAGL,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAJpB,+BAA+B,QAAA,EAAE,kCAAkC,QAI/C,CAAC;IAC5B,IAAM,aAAa,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC1D,IAAM,MAAM,GAAG,OAAO,MAAM,CAAC,CAAC,CAAC,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE,CAAC;IAEvD,SAAS,CAAC;;QACR,IAAM,YAAY,GAAG,MAAA,aAAa,CAAC,OAAO,0CAAE,QAAQ,CAClD,aAAa,CACI,CAAC;QACpB,IAAM,IAAI,GAAG,YAAY,CAAC,UAAU,CAAC;QACrC,IAAM,KAAK,GAAG,YAAY,CAAC,WAAW,CAAC;QACvC,kCAAkC,CAAC,EAAE,IAAI,MAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;KACrD,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,QACEA,aAAK,SAAS,EAAE,SAAS,YACvBC,cAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,aAC5CD,aACE,GAAG,EAAE,aAAa,EAClB,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACnC,KAAK,EAAE,EAAE,MAAM,EAAE,UAAG,MAAM,OAAI,EAAE,YAE/B,MAAM,CAAC,GAAG,CAAC,UAAC,KAAiC,EAAE,KAAa;wBAC3D,QACEA,aACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,UAAC,CAAC;gCACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE;oCAC3C,QAAQ,CAAC,KAAK,CAAC,CAAC;iCACjB;6BACF,EACD,OAAO,EAAE;gCACP,QAAQ,CAAC,KAAK,CAAC,CAAC;6BACjB,EACD,SAAS,EAAE,MAAM,CAAC,IAAI,YAGrB,OAAO,KAAK,KAAK,QAAQ,IACxBA,aACE,SAAS,EAAE,yBACT,aAAa,KAAK,KAAK,GAAG,EAAE,GAAG,eAAe,CAC9C,YAED,KAAK,GACF,KAENC,4BACED,aACE,SAAS,EAAE,yBACT,aAAa,KAAK,KAAK,GAAG,EAAE,GAAG,eAAe,CAC9C,YAED,KAAK,CAAC,KAAK,GACR,EACNA,aACE,SAAS,EAAE,+BACT,aAAa,KAAK,KAAK;8CACnB,gBAAgB;8CAChB,eAAe,CACnB,YAED,KAAK,CAAC,QAAQ,GACX,IACL,CACJ,IA7BI,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC,KAAK,CA8BhD,EACN;qBACH,CAAC,GACE,EACNA,aACE,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC,EAC3C,KAAK,EAAE;wBACL,KAAK,EAAE,UAAG,+BAA+B,CAAC,KAAK,OAAI;wBACnD,MAAM,EAAE,UAAG,MAAM,GAAG,EAAE,OAAI;wBAC1B,IAAI,EAAE,UAAG,+BAA+B,CAAC,IAAI,OAAI;qBAClD,GACD,IACE,GACF,EACN;AACJ;;;;"}

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

@@ -497,7 +497,7 @@ class SignaturePad$1 {
     }
 }
 
-var css_248z = ".style-module_container__1VolG {\n  position: relative;\n  background-color: var(--ds-grey-200);\n  border-radius: 8px;\n  height: 272px;\n}\n\n.style-module_canvas__1Q440 {\n  width: 100%;\n  height: 100%;\n}\n\n.style-module_separator__Fdmnn {\n  position: absolute;\n  height: 2px;\n  right: 112px;\n  left: 72px;\n  bottom: 32px;\n  background-color: var(--ds-grey-400);\n  border-radius: 1px;\n}\n\n.style-module_reset__1ePiM {\n  display: flex;\n  position: absolute;\n  right: 16px;\n  bottom: 32px;\n  color: var(--ds-primary-500);\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  font-size: 16px;\n  line-height: 24px;\n  background-color: transparent;\n}\n.style-module_reset__1ePiM:hover {\n  color: var(--ds-primary-700);\n}\n.style-module_reset__1ePiM:before {\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  width: 24px;\n  mask-repeat: no-repeat;\n  mask-position: center;\n  background-color: currentColor;\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  -webkit-background-color: currentColor;\n  margin-right: 4px;\n}\n.style-module_reset__1ePiM[disabled] {\n  color: var(--ds-grey-500);\n}\n\n.style-module_sign__35Gp2 {\n  position: absolute;\n  bottom: 32px;\n  left: 16px;\n  height: 24px;\n  width: 24px;\n  mask-size: 24px 24px;\n  mask-repeat: no-repeat;\n  mask-position: center;\n  -webkit-mask-size: 24px 24px;\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  background-color: var(--ds-grey-500);\n}";
+var css_248z = ".style-module_container__1VolG {\n  position: relative;\n  background-color: var(--ds-neutral-100);\n  border-radius: 8px;\n  height: 272px;\n}\n\n.style-module_canvas__1Q440 {\n  width: 100%;\n  height: 100%;\n}\n\n.style-module_separator__Fdmnn {\n  position: absolute;\n  height: 2px;\n  right: 112px;\n  left: 72px;\n  bottom: 32px;\n  background-color: var(--ds-neutral-400);\n  border-radius: 1px;\n}\n\n.style-module_reset__1ePiM {\n  display: flex;\n  position: absolute;\n  right: 16px;\n  bottom: 32px;\n  color: var(--ds-purple-600);\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  font-size: 16px;\n  line-height: 24px;\n  background-color: transparent;\n}\n.style-module_reset__1ePiM:hover {\n  color: var(--ds-purple-700);\n}\n.style-module_reset__1ePiM:before {\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  width: 24px;\n  mask-repeat: no-repeat;\n  mask-position: center;\n  background-color: currentColor;\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  -webkit-background-color: currentColor;\n  margin-right: 4px;\n}\n.style-module_reset__1ePiM[disabled] {\n  color: var(--ds-neutral-600);\n}\n\n.style-module_sign__35Gp2 {\n  position: absolute;\n  bottom: 32px;\n  left: 16px;\n  height: 24px;\n  width: 24px;\n  mask-size: 24px 24px;\n  mask-repeat: no-repeat;\n  mask-position: center;\n  -webkit-mask-size: 24px 24px;\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  background-color: var(--ds-neutral-600);\n}";
 var styles = {"container":"style-module_container__1VolG","canvas":"style-module_canvas__1Q440","separator":"style-module_separator__Fdmnn","reset":"style-module_reset__1ePiM","sign":"style-module_sign__35Gp2"};
 styleInject(css_248z);
 

package/dist/esm/components/table/Table.js

@@ -12,7 +12,7 @@ import { TableContents } from './components/TableContents/TableContents.js';
 import { c as classNames } from '../../index-6ea95111.js';
 import { u as useTableNavigation } from '../../useTableNavigation-f929fbc9.js';
 import { TableControls } from './components/TableControls/TableControls.js';
-import { i as isBaseCell, T as TableSection } from '../../TableSection-9cf86eb7.js';
+import { i as isBaseCell, T as TableSection } from '../../TableSection-5277dae1.js';
 import { u as useScrollSync } from '../../useScrollSync-b2d28bed.js';
 import './components/TableCell/BaseCell/BaseCell.js';
 import '../icon/icons/CheckThick.js';
@@ -87,7 +87,7 @@ var Table = function (_a) {
                             : {}), activeCellProps, { imageComponent: imageComponent, isNavigation: true })) })] })) : (jsx("div", { "aria-hidden": true, className: styles.stickyHeader, style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsx("div", { className: styles.container, ref: headerRef, children: jsx(TableSection, { cellReplacements: cellReplacements, className: className, hideColumns: hideColumns, hideRows: hideRows, openModal: handleOpenModal, tableCellRows: [(_j = (_h = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _h === void 0 ? void 0 : _h.rows) === null || _j === void 0 ? void 0 : _j[0]], title: title, imageComponent: imageComponent }) }) })), jsx("div", { ref: containerRef, className: classNames(styles.container, 'pb8'), children: jsx(TableContents, { tableData: tableData, title: title, className: className, collapsibleSections: collapsibleSections, hideColumns: hideColumns, hideDetails: hideDetails, hideRows: hideRows, isMobile: isMobile, shouldHideDetails: shouldHideDetails, openModal: handleOpenModal, cellReplacements: cellReplacements, imageComponent: imageComponent }) }), (tableData === null || tableData === void 0 ? void 0 : tableData.length) > 1 && hideDetails && (jsx(Card, { "data-testid": "show-hide-details", classNames: {
                     buttonWrapper: 'm8 mt32',
                     title: 'd-flex gap8 ai-center jc-center fw-bold',
-                    wrapper: 'bg-grey-200',
+                    wrapper: 'bg-neutral-100',
                 }, title: jsxs(Fragment, { children: [shouldHideDetails
                             ? textOverrides.showDetails
                             : textOverrides.hideDetails, shouldHideDetails ? (jsx(ChevronDownIcon, { size: 20 })) : (jsx(ChevronUpIcon, { size: 20 }))] }), actionIcon: null, dropShadow: false, titleVariant: "small", density: "compact", onClick: function () { return setShouldHideDetails(function (current) { return !current; }); } })), jsx(BottomOrRegularModal, { isOpen: (infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.body) ? true : false, title: infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.title, onClose: function () { return setInfoModalData(null); }, children: jsx("div", { className: classNames(styles.modalContent, "pt8 p24 wmn6"), children: modalContentRenderer

package/dist/esm/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { ReactNode, useCallback, useRef, useState } from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '../icon';\nimport { Card } from '../cards/card';\n\nimport styles from './Table.module.scss';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { TableContents } from './components/TableContents/TableContents';\nimport classNames from 'classnames';\nimport { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';\nimport { TableControls } from './components/TableControls/TableControls';\nimport { TableSection } from './components/TableSection/TableSection';\nimport { useScrollSync } from './utils/useScrollSync/useScrollSync';\nimport {\n  CellReplacements,\n  isBaseCell,\n  ModalData,\n  ModalFunction,\n  TableCellData,\n  TableData,\n} from './types';\n\ntype TextOverrides = {\n  showDetails?: string;\n  hideDetails?: string;\n};\n\nexport interface TableProps {\n  cellReplacements?: CellReplacements;\n  className?: string;\n  collapsibleSections?: boolean;\n  hideColumns?: number[];\n  hideDetails?: boolean;\n  hideRows?: number[];\n  imageComponent?: (args: any) => JSX.Element;\n  modalContentRenderer?: (content: ReactNode) => ReactNode;\n  onModalOpen?: ModalFunction;\n  onSelectionChanged?: (index: number) => void;\n  stickyHeaderTopOffset?: number;\n  tableData: TableData;\n  textOverrides?: TextOverrides;\n  title: string;\n}\n\nconst defaultTextOverrides = {\n  showDetails: 'Show details',\n  hideDetails: 'Hide details',\n};\n\nconst Table = ({\n  cellReplacements,\n  className,\n  collapsibleSections,\n  hideColumns = [],\n  hideDetails,\n  hideRows = [],\n  imageComponent,\n  modalContentRenderer,\n  onModalOpen,\n  onSelectionChanged,\n  stickyHeaderTopOffset = 0,\n  tableData,\n  textOverrides: definedTextOverrides,\n  title,\n}: TableProps) => {\n  const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };\n  const isMobile = useMediaQuery('BELOW_MOBILE');\n  const [infoModalData, setInfoModalData] = useState<ModalData | null>(null);\n  const [shouldHideDetails, setShouldHideDetails] = useState(true);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const columnsLength = tableData[0].rows[0].length;\n\n  useScrollSync(headerRef, containerRef, !isMobile);\n\n  const { activeSection, navigateTable } = useTableNavigation({\n    enabled: isMobile,\n    containerRef,\n    onSelectionChanged,\n  });\n\n  const titleCell = {\n    text: '',\n    ...tableData?.[0]?.rows?.[0]?.[0] || {},\n  };\n  const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];\n  const currentActiveSectionReplacements =\n    (currentActiveSection.cellId &&\n      cellReplacements?.[currentActiveSection.cellId]) ||\n    {};\n\n  const activeCellProps = {\n    ...currentActiveSection,\n    ...currentActiveSectionReplacements,\n  } as TableCellData;\n\n  const handleOpenModal: ModalFunction = useCallback(({ body, title }) => {\n    onModalOpen?.({ body, title });\n    setInfoModalData({ body, title });\n  }, []);\n\n  return (\n    <div className={classNames(styles.wrapper, 'bg-white')}>\n      {isMobile ? (\n        <>\n          {titleCell?.text && (\n            <TableCell\n              {...titleCell}\n              align='left'\n              isNavigation\n              isTopLeftCell\n              type={undefined}\n            />\n          )}\n\n          <TableControls\n            activeSection={activeSection}\n            columnsLength={columnsLength}\n            navigateTable={navigateTable}\n            stickyHeaderTopOffset={stickyHeaderTopOffset}\n          >\n            <TableCell\n              {...(isBaseCell(currentActiveSection)\n                ? {\n                    openModal: (body: ReactNode) =>\n                      handleOpenModal({\n                        body,\n                        title: currentActiveSection?.text,\n                      }),\n                  }\n                : {})}\n              {...activeCellProps}\n              imageComponent={imageComponent}\n              isNavigation\n            />\n          </TableControls>\n        </>\n      ) : (\n        <div\n          aria-hidden\n          className={styles.stickyHeader}\n          style={{ top: `${stickyHeaderTopOffset}px` }}\n        >\n          <div className={styles.container} ref={headerRef}>\n            <TableSection\n              cellReplacements={cellReplacements}\n              className={className}\n              hideColumns={hideColumns}\n              hideRows={hideRows}\n              openModal={handleOpenModal}\n              tableCellRows={[tableData?.[0]?.rows?.[0]]}\n              title={title}\n              imageComponent={imageComponent}\n            />\n          </div>\n        </div>\n      )}\n\n      <div ref={containerRef} className={classNames(styles.container, 'pb8')}>\n        <TableContents\n          tableData={tableData}\n          title={title}\n          className={className}\n          collapsibleSections={collapsibleSections}\n          hideColumns={hideColumns}\n          hideDetails={hideDetails}\n          hideRows={hideRows}\n          isMobile={isMobile}\n          shouldHideDetails={shouldHideDetails}\n          openModal={handleOpenModal}\n          cellReplacements={cellReplacements}\n          imageComponent={imageComponent}\n        />\n      </div>\n\n      {tableData?.length > 1 && hideDetails && (\n        <Card\n          data-testid=\"show-hide-details\"\n          classNames={{\n            buttonWrapper: 'm8 mt32',\n            title: 'd-flex gap8 ai-center jc-center fw-bold',\n            wrapper: 'bg-grey-200',\n          }}\n          title={\n            <>\n              {shouldHideDetails\n                ? textOverrides.showDetails\n                : textOverrides.hideDetails}\n              {shouldHideDetails ? (\n                <ChevronDownIcon size={20} />\n              ) : (\n                <ChevronUpIcon size={20} />\n              )}\n            </>\n          }\n          actionIcon={null}\n          dropShadow={false}\n          titleVariant=\"small\"\n          density=\"compact\"\n          onClick={() => setShouldHideDetails((current) => !current)}\n        />\n      )}\n\n      <BottomOrRegularModal\n        isOpen={infoModalData?.body ? true : false}\n        title={infoModalData?.title}\n        onClose={() => setInfoModalData(null)}\n      >\n        <div className={classNames(styles.modalContent, \"pt8 p24 wmn6\")}>\n          {modalContentRenderer\n            ? modalContentRenderer(infoModalData?.body)\n            : infoModalData?.body}\n        </div>\n      </BottomOrRegularModal>\n    </div>\n  );\n};\n\nexport { Table };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { ReactNode, useCallback, useRef, useState } from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '../icon';\nimport { Card } from '../cards/card';\n\nimport styles from './Table.module.scss';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { TableContents } from './components/TableContents/TableContents';\nimport classNames from 'classnames';\nimport { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';\nimport { TableControls } from './components/TableControls/TableControls';\nimport { TableSection } from './components/TableSection/TableSection';\nimport { useScrollSync } from './utils/useScrollSync/useScrollSync';\nimport {\n  CellReplacements,\n  isBaseCell,\n  ModalData,\n  ModalFunction,\n  TableCellData,\n  TableData,\n} from './types';\n\ntype TextOverrides = {\n  showDetails?: string;\n  hideDetails?: string;\n};\n\nexport interface TableProps {\n  cellReplacements?: CellReplacements;\n  className?: string;\n  collapsibleSections?: boolean;\n  hideColumns?: number[];\n  hideDetails?: boolean;\n  hideRows?: number[];\n  imageComponent?: (args: any) => JSX.Element;\n  modalContentRenderer?: (content: ReactNode) => ReactNode;\n  onModalOpen?: ModalFunction;\n  onSelectionChanged?: (index: number) => void;\n  stickyHeaderTopOffset?: number;\n  tableData: TableData;\n  textOverrides?: TextOverrides;\n  title: string;\n}\n\nconst defaultTextOverrides = {\n  showDetails: 'Show details',\n  hideDetails: 'Hide details',\n};\n\nconst Table = ({\n  cellReplacements,\n  className,\n  collapsibleSections,\n  hideColumns = [],\n  hideDetails,\n  hideRows = [],\n  imageComponent,\n  modalContentRenderer,\n  onModalOpen,\n  onSelectionChanged,\n  stickyHeaderTopOffset = 0,\n  tableData,\n  textOverrides: definedTextOverrides,\n  title,\n}: TableProps) => {\n  const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };\n  const isMobile = useMediaQuery('BELOW_MOBILE');\n  const [infoModalData, setInfoModalData] = useState<ModalData | null>(null);\n  const [shouldHideDetails, setShouldHideDetails] = useState(true);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const columnsLength = tableData[0].rows[0].length;\n\n  useScrollSync(headerRef, containerRef, !isMobile);\n\n  const { activeSection, navigateTable } = useTableNavigation({\n    enabled: isMobile,\n    containerRef,\n    onSelectionChanged,\n  });\n\n  const titleCell = {\n    text: '',\n    ...tableData?.[0]?.rows?.[0]?.[0] || {},\n  };\n  const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];\n  const currentActiveSectionReplacements =\n    (currentActiveSection.cellId &&\n      cellReplacements?.[currentActiveSection.cellId]) ||\n    {};\n\n  const activeCellProps = {\n    ...currentActiveSection,\n    ...currentActiveSectionReplacements,\n  } as TableCellData;\n\n  const handleOpenModal: ModalFunction = useCallback(({ body, title }) => {\n    onModalOpen?.({ body, title });\n    setInfoModalData({ body, title });\n  }, []);\n\n  return (\n    <div className={classNames(styles.wrapper, 'bg-white')}>\n      {isMobile ? (\n        <>\n          {titleCell?.text && (\n            <TableCell\n              {...titleCell}\n              align='left'\n              isNavigation\n              isTopLeftCell\n              type={undefined}\n            />\n          )}\n\n          <TableControls\n            activeSection={activeSection}\n            columnsLength={columnsLength}\n            navigateTable={navigateTable}\n            stickyHeaderTopOffset={stickyHeaderTopOffset}\n          >\n            <TableCell\n              {...(isBaseCell(currentActiveSection)\n                ? {\n                    openModal: (body: ReactNode) =>\n                      handleOpenModal({\n                        body,\n                        title: currentActiveSection?.text,\n                      }),\n                  }\n                : {})}\n              {...activeCellProps}\n              imageComponent={imageComponent}\n              isNavigation\n            />\n          </TableControls>\n        </>\n      ) : (\n        <div\n          aria-hidden\n          className={styles.stickyHeader}\n          style={{ top: `${stickyHeaderTopOffset}px` }}\n        >\n          <div className={styles.container} ref={headerRef}>\n            <TableSection\n              cellReplacements={cellReplacements}\n              className={className}\n              hideColumns={hideColumns}\n              hideRows={hideRows}\n              openModal={handleOpenModal}\n              tableCellRows={[tableData?.[0]?.rows?.[0]]}\n              title={title}\n              imageComponent={imageComponent}\n            />\n          </div>\n        </div>\n      )}\n\n      <div ref={containerRef} className={classNames(styles.container, 'pb8')}>\n        <TableContents\n          tableData={tableData}\n          title={title}\n          className={className}\n          collapsibleSections={collapsibleSections}\n          hideColumns={hideColumns}\n          hideDetails={hideDetails}\n          hideRows={hideRows}\n          isMobile={isMobile}\n          shouldHideDetails={shouldHideDetails}\n          openModal={handleOpenModal}\n          cellReplacements={cellReplacements}\n          imageComponent={imageComponent}\n        />\n      </div>\n\n      {tableData?.length > 1 && hideDetails && (\n        <Card\n          data-testid=\"show-hide-details\"\n          classNames={{\n            buttonWrapper: 'm8 mt32',\n            title: 'd-flex gap8 ai-center jc-center fw-bold',\n            wrapper: 'bg-neutral-100',\n          }}\n          title={\n            <>\n              {shouldHideDetails\n                ? textOverrides.showDetails\n                : textOverrides.hideDetails}\n              {shouldHideDetails ? (\n                <ChevronDownIcon size={20} />\n              ) : (\n                <ChevronUpIcon size={20} />\n              )}\n            </>\n          }\n          actionIcon={null}\n          dropShadow={false}\n          titleVariant=\"small\"\n          density=\"compact\"\n          onClick={() => setShouldHideDetails((current) => !current)}\n        />\n      )}\n\n      <BottomOrRegularModal\n        isOpen={infoModalData?.body ? true : false}\n        title={infoModalData?.title}\n        onClose={() => setInfoModalData(null)}\n      >\n        <div className={classNames(styles.modalContent, \"pt8 p24 wmn6\")}>\n          {modalContentRenderer\n            ? modalContentRenderer(infoModalData?.body)\n            : infoModalData?.body}\n        </div>\n      </BottomOrRegularModal>\n    </div>\n  );\n};\n\nexport { Table };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/table/Table.stories.js

@@ -37,7 +37,7 @@ import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
 import '../../useMediaQuery-1a3a2432.js';
 import './components/TableContents/TableContents.js';
-import '../../TableSection-9cf86eb7.js';
+import '../../TableSection-5277dae1.js';
 import './components/TableContents/Collapsible.js';
 import '../../useTableNavigation-f929fbc9.js';
 import './components/TableControls/TableControls.js';

package/dist/esm/components/table/Table.test.js

@@ -37,7 +37,7 @@ import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
 import '../../useMediaQuery-1a3a2432.js';
 import './components/TableContents/TableContents.js';
-import '../../TableSection-9cf86eb7.js';
+import '../../TableSection-5277dae1.js';
 import './components/TableContents/Collapsible.js';
 import '../../useTableNavigation-f929fbc9.js';
 import './components/TableControls/TableControls.js';

package/dist/esm/components/table/components/TableCell/BaseCell/BaseCell.js

@@ -15,7 +15,7 @@ import '../../../../../tslib.es6-a39f91fc.js';
 import '../../../../../_commonjsHelpers-4730bd53.js';
 import '../../../../icon/icons/Info.js';
 
-var css_248z = "@media (max-width: 34rem) {\n  .BaseCell-module_maxWidth__14Cly {\n    max-width: calc(100% - 64px);\n  }\n}\n\n.BaseCell-module_icon__1775U {\n  margin: 2px;\n}\n\n.BaseCell-module_description__3_kfe {\n  word-break: break-word;\n}\n\n.BaseCell-module_bigWithUnderline__2xx5X {\n  position: relative;\n  display: flex;\n  line-height: 38px;\n  text-decoration: underline;\n  text-decoration-color: #8e8cee;\n  text-decoration-thickness: 4px;\n  text-underline-offset: 8px;\n}";
+var css_248z = "@media (max-width: 34rem) {\n  .BaseCell-module_maxWidth__14Cly {\n    max-width: calc(100% - 64px);\n  }\n}\n\n.BaseCell-module_icon__1775U {\n  margin: 2px;\n}\n\n.BaseCell-module_description__3_kfe {\n  word-break: break-word;\n}\n\n.BaseCell-module_bigWithUnderline__2xx5X {\n  position: relative;\n  display: flex;\n  line-height: 38px;\n  text-decoration: underline;\n  text-decoration-color: #8883D8;\n  text-decoration-thickness: 4px;\n  text-underline-offset: 8px;\n}";
 var styles = {"maxWidth":"BaseCell-module_maxWidth__14Cly","icon":"BaseCell-module_icon__1775U","description":"BaseCell-module_description__3_kfe","bigWithUnderline":"BaseCell-module_bigWithUnderline__2xx5X"};
 styleInject(css_248z);
 
@@ -48,12 +48,12 @@ var BaseCell = function (_a) {
             'jc-center': align === 'center',
         }), children: jsxs("div", { className: classNames('d-flex fd-column', alignClassName, (_b = {},
                 _b[styles.maxWidth] = modalContent && align === 'center',
-                _b)), children: [progressBarValue !== undefined && (jsx(MiniProgressBar, { nFilledBars: progressBarValue })), jsxs("div", { className: "d-flex ai-center", children: [(rating === null || rating === void 0 ? void 0 : rating.value) && (jsx("span", { "data-testid": "table-cell-rating", title: "".concat(rating === null || rating === void 0 ? void 0 : rating.value, " out of 3"), children: validRatingValues.map(function (value) { return (jsx(SelectedIcon, { "aria-hidden": "true", color: value <= (rating === null || rating === void 0 ? void 0 : rating.value) ? 'primary-500' : 'grey-400', className: styles.icon, size: (rating === null || rating === void 0 ? void 0 : rating.type) === 'zap' ? 16 : 14 }, value)); }) })), checkmarkValue !== undefined && (jsx("span", { className: 'd-inline-block mx8', title: checkmarkValue ? 'Yes' : 'No', children: checkmarkValue ? (jsx(CheckThickIcon, { noMargin: true, "data-testid": "table-cell-boolean-yes", size: 24, "aria-hidden": true, color: "primary-500" })) : (jsx(XIcon, { noMargin: true, "data-testid": "table-cell-boolean-no", size: 24, "aria-hidden": true, color: "grey-400" })) })), jsxs("div", { className: "d-inline", children: [text && fontVariant === 'NORMAL' && (jsx("div", { className: classNames("p-p d-inline", { 'ml8': align !== 'left' }), "data-testid": "table-cell-text", children: text })), text && fontVariant === 'PRICE' && (jsx("div", { className: "p-h1 p--serif tc-primary-500", "data-testid": "table-cell-content", children: text })), text && fontVariant === 'BIG_WITH_UNDERLINE' && (jsx("h2", { "aria-hidden": true, className: classNames('tc-grey-800 p-h2 p--serif', styles.bigWithUnderline), children: text })), modalContent && openModal && (jsx("span", { className: "ml8", children: jsx(TableInfoButton, { onClick: function () {
+                _b)), children: [progressBarValue !== undefined && (jsx(MiniProgressBar, { nFilledBars: progressBarValue })), jsxs("div", { className: "d-flex ai-center", children: [(rating === null || rating === void 0 ? void 0 : rating.value) && (jsx("span", { "data-testid": "table-cell-rating", title: "".concat(rating === null || rating === void 0 ? void 0 : rating.value, " out of 3"), children: validRatingValues.map(function (value) { return (jsx(SelectedIcon, { "aria-hidden": "true", color: value <= (rating === null || rating === void 0 ? void 0 : rating.value) ? 'purple-600' : 'neutral-400', className: styles.icon, size: (rating === null || rating === void 0 ? void 0 : rating.type) === 'zap' ? 16 : 14 }, value)); }) })), checkmarkValue !== undefined && (jsx("span", { className: 'd-inline-block mx8', title: checkmarkValue ? 'Yes' : 'No', children: checkmarkValue ? (jsx(CheckThickIcon, { noMargin: true, "data-testid": "table-cell-boolean-yes", size: 24, "aria-hidden": true, color: "purple-600" })) : (jsx(XIcon, { noMargin: true, "data-testid": "table-cell-boolean-no", size: 24, "aria-hidden": true, color: "neutral-400" })) })), jsxs("div", { className: "d-inline", children: [text && fontVariant === 'NORMAL' && (jsx("div", { className: classNames("p-p d-inline", { 'ml8': align !== 'left' }), "data-testid": "table-cell-text", children: text })), text && fontVariant === 'PRICE' && (jsx("div", { className: "p-h1 p--serif tc-purple-600", "data-testid": "table-cell-content", children: text })), text && fontVariant === 'BIG_WITH_UNDERLINE' && (jsx("h2", { "aria-hidden": true, className: classNames('tc-grey-800 p-h2 p--serif', styles.bigWithUnderline), children: text })), modalContent && openModal && (jsx("span", { className: "ml8", children: jsx(TableInfoButton, { onClick: function () {
                                             return openModal({
                                                 title: modalTitle,
                                                 body: modalContent,
                                             });
-                                        } }) }))] })] }), description && (jsx("div", { className: classNames(styles.description, 'd-flex p-p--small tc-grey-500', alignClassName), children: description }))] }) }));
+                                        } }) }))] })] }), description && (jsx("div", { className: classNames(styles.description, 'd-flex p-p--small tc-neutral-600', alignClassName), children: description }))] }) }));
 };
 
 export { BaseCell };

package/dist/esm/components/table/components/TableCell/BaseCell/BaseCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n  CheckThickIcon,\n  StarFilledIcon,\n  XIcon,\n  ZapFilledIcon,\n} from '../../../../icon';\nimport { ReactNode } from 'react';\nimport styles from './BaseCell.module.scss';\nimport { MiniProgressBar } from './MiniProgressBar/MiniProgressBar';\nimport { TableInfoButton } from '../../../../comparisonTable';\nimport { ModalFunction } from '../../../types';\n\nexport type FontVariant = 'NORMAL' | 'BIG_WITH_UNDERLINE' | 'PRICE';\n\nconst progressLookup: Record<string, number> = {\n  '30%': 1,\n  '50%': 2,\n  '70%': 3,\n  '75%': 4,\n  '80%': 4,\n  '90%': 4,\n  '75%-90%': 4,\n  '75%-100%': 4,\n  '80%-100%': 4,\n  '100%': 5,\n};\n\nexport type Alignment = 'center' | 'left' | 'right';\n\nexport type BaseCellProps = {\n  align?: Alignment;\n  checkmarkValue?: boolean;\n  description?: ReactNode;\n  fontVariant?: FontVariant;\n  hideProgressBar?: boolean;\n  modalTitle?: ReactNode;\n  modalContent?: ReactNode;\n  openModal?: ModalFunction;\n  text?: ReactNode;\n  rating?: {\n    value: number;\n    type: 'zap' | 'star';\n  };\n  className?: string;\n  dataTestId?: string;\n  dataCy?: string;\n};\n\nexport const BaseCell = ({\n  align = 'center',\n  checkmarkValue,\n  description = '',\n  fontVariant = 'NORMAL',\n  hideProgressBar = false,\n  modalTitle = '',\n  modalContent = '',\n  openModal,\n  rating,\n  text = '',\n  className,\n}: BaseCellProps) => {\n  const alignClassName = {\n    center: 'ta-center jc-center ai-center',\n    left: 'ta-left jc-start',\n    right: 'ta-right jc-end ai-end',\n  }[align];\n\n  const validRatingValues: number[] = [1, 2, 3];\n  const SelectedIcon = rating?.type === 'zap' ? ZapFilledIcon : StarFilledIcon;\n\n  const progressBarValue =\n    !hideProgressBar && typeof text === 'string'\n      ? progressLookup[text]\n      : undefined;\n\n  return (\n    <div\n      className={classNames(\n        className,\n        'd-flex gap8 ai-center', {\n        'jc-center': align === 'center',\n      })}\n    >\n      <div\n        className={classNames('d-flex fd-column', alignClassName, {\n          [styles.maxWidth]: modalContent && align === 'center',\n        })}\n      >\n        {progressBarValue !== undefined && (\n          <MiniProgressBar nFilledBars={progressBarValue} />\n        )}\n\n        <div className=\"d-flex ai-center\">\n          {rating?.value && (\n            <span\n              data-testid=\"table-cell-rating\"\n              title={`${rating?.value} out of 3`}\n            >\n              {validRatingValues.map((value) => (\n                <SelectedIcon\n                  aria-hidden=\"true\"\n                  key={value}\n                  color={value <= rating?.value ? 'primary-500' : 'grey-400'}\n                  className={styles.icon}\n                  size={rating?.type === 'zap' ? 16 : 14}\n                />\n              ))}\n            </span>\n          )}\n\n          {checkmarkValue !== undefined && (\n            <span className='d-inline-block mx8' title={checkmarkValue ? 'Yes' : 'No'}>\n              {checkmarkValue ? (\n                <CheckThickIcon\n                  noMargin\n                  data-testid=\"table-cell-boolean-yes\"\n                  size={24}\n                  aria-hidden\n                  color=\"primary-500\"\n                />\n              ) : (\n                <XIcon\n                  noMargin\n                  data-testid=\"table-cell-boolean-no\"\n                  size={24}\n                  aria-hidden\n                  color=\"grey-400\"\n                />\n              )}\n            </span>\n          )}\n\n          <div className=\"d-inline\">\n            {text && fontVariant === 'NORMAL' && (\n              <div className={classNames(\n                \"p-p d-inline\",\n                { 'ml8': align !== 'left' }\n              )}\n              data-testid=\"table-cell-text\"\n            >\n                {text}\n              </div>\n            )}\n\n            {text && fontVariant === 'PRICE' && (\n              <div\n                className=\"p-h1 p--serif tc-primary-500\"\n                data-testid=\"table-cell-content\"\n              >\n                {text}\n              </div>\n            )}\n\n            {text && fontVariant === 'BIG_WITH_UNDERLINE' && (\n              <h2\n                aria-hidden\n                className={classNames(\n                  'tc-grey-800 p-h2 p--serif',\n                  styles.bigWithUnderline\n                )}\n              >\n                {text}\n              </h2>\n            )}\n\n            {modalContent && openModal && (\n              <span className=\"ml8\">\n                <TableInfoButton\n                  onClick={() =>\n                    openModal({\n                      title: modalTitle,\n                      body: modalContent,\n                    })\n                  }\n                />\n              </span>\n            )}\n          </div>\n        </div>\n\n        {description && (\n          <div\n            className={classNames(\n              styles.description,\n              'd-flex p-p--small tc-grey-500',\n              alignClassName\n            )}\n          >\n            {description}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"BaseCell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n  CheckThickIcon,\n  StarFilledIcon,\n  XIcon,\n  ZapFilledIcon,\n} from '../../../../icon';\nimport { ReactNode } from 'react';\nimport styles from './BaseCell.module.scss';\nimport { MiniProgressBar } from './MiniProgressBar/MiniProgressBar';\nimport { TableInfoButton } from '../../../../comparisonTable';\nimport { ModalFunction } from '../../../types';\n\nexport type FontVariant = 'NORMAL' | 'BIG_WITH_UNDERLINE' | 'PRICE';\n\nconst progressLookup: Record<string, number> = {\n  '30%': 1,\n  '50%': 2,\n  '70%': 3,\n  '75%': 4,\n  '80%': 4,\n  '90%': 4,\n  '75%-90%': 4,\n  '75%-100%': 4,\n  '80%-100%': 4,\n  '100%': 5,\n};\n\nexport type Alignment = 'center' | 'left' | 'right';\n\nexport type BaseCellProps = {\n  align?: Alignment;\n  checkmarkValue?: boolean;\n  description?: ReactNode;\n  fontVariant?: FontVariant;\n  hideProgressBar?: boolean;\n  modalTitle?: ReactNode;\n  modalContent?: ReactNode;\n  openModal?: ModalFunction;\n  text?: ReactNode;\n  rating?: {\n    value: number;\n    type: 'zap' | 'star';\n  };\n  className?: string;\n  dataTestId?: string;\n  dataCy?: string;\n};\n\nexport const BaseCell = ({\n  align = 'center',\n  checkmarkValue,\n  description = '',\n  fontVariant = 'NORMAL',\n  hideProgressBar = false,\n  modalTitle = '',\n  modalContent = '',\n  openModal,\n  rating,\n  text = '',\n  className,\n}: BaseCellProps) => {\n  const alignClassName = {\n    center: 'ta-center jc-center ai-center',\n    left: 'ta-left jc-start',\n    right: 'ta-right jc-end ai-end',\n  }[align];\n\n  const validRatingValues: number[] = [1, 2, 3];\n  const SelectedIcon = rating?.type === 'zap' ? ZapFilledIcon : StarFilledIcon;\n\n  const progressBarValue =\n    !hideProgressBar && typeof text === 'string'\n      ? progressLookup[text]\n      : undefined;\n\n  return (\n    <div\n      className={classNames(\n        className,\n        'd-flex gap8 ai-center', {\n        'jc-center': align === 'center',\n      })}\n    >\n      <div\n        className={classNames('d-flex fd-column', alignClassName, {\n          [styles.maxWidth]: modalContent && align === 'center',\n        })}\n      >\n        {progressBarValue !== undefined && (\n          <MiniProgressBar nFilledBars={progressBarValue} />\n        )}\n\n        <div className=\"d-flex ai-center\">\n          {rating?.value && (\n            <span\n              data-testid=\"table-cell-rating\"\n              title={`${rating?.value} out of 3`}\n            >\n              {validRatingValues.map((value) => (\n                <SelectedIcon\n                  aria-hidden=\"true\"\n                  key={value}\n                  color={value <= rating?.value ? 'purple-600' : 'neutral-400'}\n                  className={styles.icon}\n                  size={rating?.type === 'zap' ? 16 : 14}\n                />\n              ))}\n            </span>\n          )}\n\n          {checkmarkValue !== undefined && (\n            <span className='d-inline-block mx8' title={checkmarkValue ? 'Yes' : 'No'}>\n              {checkmarkValue ? (\n                <CheckThickIcon\n                  noMargin\n                  data-testid=\"table-cell-boolean-yes\"\n                  size={24}\n                  aria-hidden\n                  color=\"purple-600\"\n                />\n              ) : (\n                <XIcon\n                  noMargin\n                  data-testid=\"table-cell-boolean-no\"\n                  size={24}\n                  aria-hidden\n                  color=\"neutral-400\"\n                />\n              )}\n            </span>\n          )}\n\n          <div className=\"d-inline\">\n            {text && fontVariant === 'NORMAL' && (\n              <div className={classNames(\n                \"p-p d-inline\",\n                { 'ml8': align !== 'left' }\n              )}\n              data-testid=\"table-cell-text\"\n            >\n                {text}\n              </div>\n            )}\n\n            {text && fontVariant === 'PRICE' && (\n              <div\n                className=\"p-h1 p--serif tc-purple-600\"\n                data-testid=\"table-cell-content\"\n              >\n                {text}\n              </div>\n            )}\n\n            {text && fontVariant === 'BIG_WITH_UNDERLINE' && (\n              <h2\n                aria-hidden\n                className={classNames(\n                  'tc-grey-800 p-h2 p--serif',\n                  styles.bigWithUnderline\n                )}\n              >\n                {text}\n              </h2>\n            )}\n\n            {modalContent && openModal && (\n              <span className=\"ml8\">\n                <TableInfoButton\n                  onClick={() =>\n                    openModal({\n                      title: modalTitle,\n                      body: modalContent,\n                    })\n                  }\n                />\n              </span>\n            )}\n          </div>\n        </div>\n\n        {description && (\n          <div\n            className={classNames(\n              styles.description,\n              'd-flex p-p--small tc-neutral-600',\n              alignClassName\n            )}\n          >\n            {description}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { c as classNames } from '../../../../../../index-6ea95111.js';
 import { s as styleInject } from '../../../../../../style-inject.es-1f59c1d0.js';
 
-var css_248z = ".MiniProgressBar-module_progressBar__2K07F {\n  margin-bottom: 4px;\n}\n.MiniProgressBar-module_progressBar__2K07F rect {\n  fill: #ebebff;\n}\n\n.MiniProgressBar-module_filledBars1__ZhQbV rect:first-child {\n  fill: #91919c;\n}\n\n.MiniProgressBar-module_filledBars2__2lH_z rect:nth-child(-n+2) {\n  fill: #91919c;\n}\n\n.MiniProgressBar-module_filledBars3__1OKUj rect:nth-child(-n+3) {\n  fill: #b0cdf3;\n}\n\n.MiniProgressBar-module_filledBars4__T9kuj rect:nth-child(-n+4) {\n  fill: #b0cdf3;\n}\n\n.MiniProgressBar-module_filledBars5__WxVpb rect {\n  fill: #8e8cee;\n}";
+var css_248z = ".MiniProgressBar-module_progressBar__2K07F {\n  margin-bottom: 4px;\n}\n.MiniProgressBar-module_progressBar__2K07F rect {\n  fill: #E8E7FE;\n}\n\n.MiniProgressBar-module_filledBars1__ZhQbV rect:first-child {\n  fill: #919199;\n}\n\n.MiniProgressBar-module_filledBars2__2lH_z rect:nth-child(-n+2) {\n  fill: #919199;\n}\n\n.MiniProgressBar-module_filledBars3__1OKUj rect:nth-child(-n+3) {\n  fill: #B0CDF3;\n}\n\n.MiniProgressBar-module_filledBars4__T9kuj rect:nth-child(-n+4) {\n  fill: #B0CDF3;\n}\n\n.MiniProgressBar-module_filledBars5__WxVpb rect {\n  fill: #8883D8;\n}";
 var styles = {"progressBar":"MiniProgressBar-module_progressBar__2K07F","filledBars1":"MiniProgressBar-module_filledBars1__ZhQbV","filledBars2":"MiniProgressBar-module_filledBars2__2lH_z","filledBars3":"MiniProgressBar-module_filledBars3__1OKUj","filledBars4":"MiniProgressBar-module_filledBars4__T9kuj","filledBars5":"MiniProgressBar-module_filledBars5__WxVpb"};
 styleInject(css_248z);
 

package/dist/esm/components/table/components/TableCell/ButtonCell/ButtonCell.js

@@ -5,7 +5,7 @@ import { Button } from '../../../../button/index.js';
 import '../../../../../tslib.es6-a39f91fc.js';
 import 'react';
 
-var css_248z = ".ButtonCell-module_buttonCell__x4NNi {\n  color: #26262e;\n  border: 1px solid #d2d2d8;\n  transition: all 0.3s ease-in-out;\n}\n.ButtonCell-module_buttonCell__x4NNi:disabled {\n  border: none;\n  background-color: #f5f6fb;\n  color: #26262e;\n  opacity: 1;\n  cursor: default;\n}\n.ButtonCell-module_buttonCell__x4NNi:disabled:hover {\n  background-color: #f5f6fb;\n}\n@media (max-width: 34rem) {\n  .ButtonCell-module_buttonCell__x4NNi {\n    pointer-events: none;\n  }\n}\n\n.ButtonCell-module_withoutPrice__2rpe9 {\n  height: 64px;\n}\n\n.ButtonCell-module_withPrice__3bd_t {\n  height: 75px;\n}\n\n.ButtonCell-module_selected__22pF_ {\n  transition: all 0.3 ease-in-out;\n  border: 2px solid #8e8cee;\n  background-color: #f7f7ff;\n}";
+var css_248z = ".ButtonCell-module_buttonCell__x4NNi {\n  color: #26262e;\n  border: 1px solid #d2d2d9;\n  transition: all 0.3s ease-in-out;\n}\n.ButtonCell-module_buttonCell__x4NNi:disabled {\n  border: none;\n  background-color: #f7f7fd;\n  color: #26262e;\n  opacity: 1;\n  cursor: default;\n}\n.ButtonCell-module_buttonCell__x4NNi:disabled:hover {\n  background-color: #f7f7fd;\n}\n@media (max-width: 34rem) {\n  .ButtonCell-module_buttonCell__x4NNi {\n    pointer-events: none;\n  }\n}\n\n.ButtonCell-module_withoutPrice__2rpe9 {\n  height: 64px;\n}\n\n.ButtonCell-module_withPrice__3bd_t {\n  height: 75px;\n}\n\n.ButtonCell-module_selected__22pF_ {\n  transition: all 0.3 ease-in-out;\n  border: 2px solid #8883D8;\n  background-color: #F6F6FE;\n}";
 var styles = {"buttonCell":"ButtonCell-module_buttonCell__x4NNi","withoutPrice":"ButtonCell-module_withoutPrice__2rpe9","withPrice":"ButtonCell-module_withPrice__3bd_t","selected":"ButtonCell-module_selected__22pF_"};
 styleInject(css_248z);
 
@@ -16,7 +16,7 @@ var ButtonCell = function (_a) {
                 _b[styles.selected] = isSelected,
                 _b[styles.withoutPrice] = !price,
                 _b[styles.withPrice] = !!price,
-                _b)), variant: "filledWhite", type: "submit", onClick: onClick, disabled: disabled, children: [buttonCaption, price && jsx("span", { className: "p-p tc-purple-500", children: price })] }) }));
+                _b)), variant: "filledWhite", type: "submit", onClick: onClick, disabled: disabled, children: [buttonCaption, price && jsx("span", { className: "p-p tc-purple-600", children: price })] }) }));
 };
 
 export { ButtonCell };

package/dist/esm/components/table/components/TableCell/ButtonCell/ButtonCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonCell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './ButtonCell.module.scss';\nimport { Button } from '../../../../button';\nimport { ReactNode } from 'react';\n\nexport type ButtonCellProps = {\n  buttonCaption: ReactNode;\n  disabled?: boolean;\n  isSelected?: boolean;\n  onClick: () => void;\n  price?: ReactNode;\n  className?: string;\n  dataTestId?: string;\n  dataCy?: string;\n};\n\nexport const ButtonCell = ({\n  isSelected,\n  onClick,\n  buttonCaption,\n  price,\n  disabled,\n  className,\n  dataCy,\n  dataTestId,\n}: ButtonCellProps) => {\n  return (\n    <div\n      className={\n        classNames(\n          \"w100 d-flex fd-column ai-center jc-center gap8\",\n          className,\n        )\n      }\n      data-cy={dataCy}\n      data-testid={dataTestId}\n    >\n      <Button\n        className={classNames('w100 wmx5 d-flex fd-column', styles.buttonCell, {\n          [styles.selected]: isSelected,\n          [styles.withoutPrice]: !price,\n          [styles.withPrice]: !!price,\n        })}\n        variant=\"filledWhite\"\n        type=\"submit\"\n        onClick={onClick}\n        disabled={disabled}\n      >\n        {buttonCaption}\n        {price && <span className=\"p-p tc-purple-500\">{price}</span>}\n      </Button>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;IAiBa,UAAU,GAAG,UAAC,EAST;;QARhB,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,aAAa,mBAAA,EACb,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,MAAM,YAAA,EACN,UAAU,gBAAA;IAEV,QACEA,aACE,SAAS,EACP,UAAU,CACR,gDAAgD,EAChD,SAAS,CACV,aAEM,MAAM,iBACF,UAAU,YAEvBC,KAAC,MAAM,IACL,SAAS,EAAE,UAAU,CAAC,4BAA4B,EAAE,MAAM,CAAC,UAAU;gBACnE,GAAC,MAAM,CAAC,QAAQ,IAAG,UAAU;gBAC7B,GAAC,MAAM,CAAC,YAAY,IAAG,CAAC,KAAK;gBAC7B,GAAC,MAAM,CAAC,SAAS,IAAG,CAAC,CAAC,KAAK;oBAC3B,EACF,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,aAEjB,aAAa,EACb,KAAK,IAAID,cAAM,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAQ,IACrD,GACL,EACN;AACJ;;;;"}
+{"version":3,"file":"ButtonCell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './ButtonCell.module.scss';\nimport { Button } from '../../../../button';\nimport { ReactNode } from 'react';\n\nexport type ButtonCellProps = {\n  buttonCaption: ReactNode;\n  disabled?: boolean;\n  isSelected?: boolean;\n  onClick: () => void;\n  price?: ReactNode;\n  className?: string;\n  dataTestId?: string;\n  dataCy?: string;\n};\n\nexport const ButtonCell = ({\n  isSelected,\n  onClick,\n  buttonCaption,\n  price,\n  disabled,\n  className,\n  dataCy,\n  dataTestId,\n}: ButtonCellProps) => {\n  return (\n    <div\n      className={\n        classNames(\n          \"w100 d-flex fd-column ai-center jc-center gap8\",\n          className,\n        )\n      }\n      data-cy={dataCy}\n      data-testid={dataTestId}\n    >\n      <Button\n        className={classNames('w100 wmx5 d-flex fd-column', styles.buttonCell, {\n          [styles.selected]: isSelected,\n          [styles.withoutPrice]: !price,\n          [styles.withPrice]: !!price,\n        })}\n        variant=\"filledWhite\"\n        type=\"submit\"\n        onClick={onClick}\n        disabled={disabled}\n      >\n        {buttonCaption}\n        {price && <span className=\"p-p tc-purple-600\">{price}</span>}\n      </Button>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;IAiBa,UAAU,GAAG,UAAC,EAST;;QARhB,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,aAAa,mBAAA,EACb,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,MAAM,YAAA,EACN,UAAU,gBAAA;IAEV,QACEA,aACE,SAAS,EACP,UAAU,CACR,gDAAgD,EAChD,SAAS,CACV,aAEM,MAAM,iBACF,UAAU,YAEvBC,KAAC,MAAM,IACL,SAAS,EAAE,UAAU,CAAC,4BAA4B,EAAE,MAAM,CAAC,UAAU;gBACnE,GAAC,MAAM,CAAC,QAAQ,IAAG,UAAU;gBAC7B,GAAC,MAAM,CAAC,YAAY,IAAG,CAAC,KAAK;gBAC7B,GAAC,MAAM,CAAC,SAAS,IAAG,CAAC,CAAC,KAAK;oBAC3B,EACF,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,aAEjB,aAAa,EACb,KAAK,IAAID,cAAM,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAQ,IACrD,GACL,EACN;AACJ;;;;"}

package/dist/esm/components/table/components/TableCell/CTACell/CTACell.js

@@ -14,7 +14,7 @@ var CTACell = function (_a) {
     var _b;
     var title = _a.title, price = _a.price, icon = _a.icon, grey = _a.grey, narrow = _a.narrow, href = _a.href, buttonCaption = _a.buttonCaption, imageComponent = _a.imageComponent, className = _a.className, dataCy = _a.dataCy, dataTestId = _a.dataTestId, onClick = _a.onClick;
     var renderedIcon = (jsx(IconRenderer, { icon: icon, imageComponent: imageComponent }));
-    return (jsxs("div", { className: classNames(className, "ta-center"), "data-cy": dataCy, "data-testid": dataTestId, children: [jsxs("div", { className: "d-flex jc-center ai-center gap8", children: [renderedIcon, jsxs("p", { className: "p-h3", children: [title, price && jsxs("span", { className: "tc-purple-500", children: [" ", price] })] })] }), jsx(Button, __assign({}, onClick ? { onClick: onClick } : {
+    return (jsxs("div", { className: classNames(className, "ta-center"), "data-cy": dataCy, "data-testid": dataTestId, children: [jsxs("div", { className: "d-flex jc-center ai-center gap8", children: [renderedIcon, jsxs("p", { className: "p-h3", children: [title, price && jsxs("span", { className: "tc-purple-600", children: [" ", price] })] })] }), jsx(Button, __assign({}, onClick ? { onClick: onClick } : {
                 as: 'a',
                 href: href,
                 target: '_blank',

package/dist/esm/components/table/components/TableCell/CTACell/CTACell.js.map

@@ -1 +1 @@
-{"version":3,"file":"CTACell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/CTACell/CTACell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './CTACell.module.scss';\nimport { IconRenderer } from '../../IconRenderer/IconRenderer';\nimport { Button } from '../../../../button';\n\nexport type CTACellProps = {\n  title: ReactNode;\n  price?: ReactNode;\n  icon?: ReactNode;\n  imageComponent?: (args: any) => JSX.Element;\n  buttonCaption?: ReactNode;\n  grey?: boolean;\n  narrow?: boolean;\n  href: string;\n  className?: string;\n  dataTestId?: string;\n  dataCy?: string;\n  onClick?: () => void;\n};\n\nexport const CTACell = ({\n  title,\n  price,\n  icon,\n  grey,\n  narrow,\n  href,\n  buttonCaption,\n  imageComponent,\n  className,\n  dataCy,\n  dataTestId,\n  onClick,\n}: CTACellProps) => {\n  const renderedIcon = (\n    <IconRenderer icon={icon} imageComponent={imageComponent} />\n  );\n\n  return (\n    <div\n      className={classNames(className, \"ta-center\")}\n      data-cy={dataCy}\n      data-testid={dataTestId}\n    >\n      <div className=\"d-flex jc-center ai-center gap8\">\n        {renderedIcon}\n        <p className=\"p-h3\">\n          {title}\n          {price && <span className=\"tc-purple-500\"> {price}</span>}\n        </p>\n      </div>\n\n      <Button\n        {...onClick ? { onClick } : {\n          as: 'a',\n          href: href,\n          target: '_blank',\n          rel: 'noopener noreferrer',\n        }}\n        className={classNames('mt16 w100 wmx3', {\n          'p-btn--primary': !grey,\n          'p-btn--secondary-grey': grey,\n          [styles.narrow]: narrow,\n        })}\n      >\n        {buttonCaption}\n      </Button>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;IAsBa,OAAO,GAAG,UAAC,EAaT;;QAZb,KAAK,WAAA,EACL,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,aAAa,mBAAA,EACb,cAAc,oBAAA,EACd,SAAS,eAAA,EACT,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,OAAO,aAAA;IAEP,IAAM,YAAY,IAChBA,IAAC,YAAY,IAAC,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,GAAI,CAC7D,CAAC;IAEF,QACEC,cACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC,aACpC,MAAM,iBACF,UAAU,aAEvBA,cAAK,SAAS,EAAC,iCAAiC,aAC7C,YAAY,EACbA,YAAG,SAAS,EAAC,MAAM,aAChB,KAAK,EACL,KAAK,IAAIA,eAAM,SAAS,EAAC,eAAe,kBAAG,KAAK,IAAQ,IACvD,IACA,EAEND,IAAC,MAAM,eACD,OAAO,GAAG,EAAE,OAAO,SAAA,EAAE,GAAG;gBAC1B,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,IAAI;gBACV,MAAM,EAAE,QAAQ;gBAChB,GAAG,EAAE,qBAAqB;aAC3B,IACD,SAAS,EAAE,UAAU,CAAC,gBAAgB;wBACpC,gBAAgB,EAAE,CAAC,IAAI;wBACvB,uBAAuB,EAAE,IAAI;;oBAC7B,GAAC,MAAM,CAAC,MAAM,IAAG,MAAM;wBACvB,YAED,aAAa,IACP,IACL,EACN;AACJ;;;;"}
+{"version":3,"file":"CTACell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/CTACell/CTACell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './CTACell.module.scss';\nimport { IconRenderer } from '../../IconRenderer/IconRenderer';\nimport { Button } from '../../../../button';\n\nexport type CTACellProps = {\n  title: ReactNode;\n  price?: ReactNode;\n  icon?: ReactNode;\n  imageComponent?: (args: any) => JSX.Element;\n  buttonCaption?: ReactNode;\n  grey?: boolean;\n  narrow?: boolean;\n  href: string;\n  className?: string;\n  dataTestId?: string;\n  dataCy?: string;\n  onClick?: () => void;\n};\n\nexport const CTACell = ({\n  title,\n  price,\n  icon,\n  grey,\n  narrow,\n  href,\n  buttonCaption,\n  imageComponent,\n  className,\n  dataCy,\n  dataTestId,\n  onClick,\n}: CTACellProps) => {\n  const renderedIcon = (\n    <IconRenderer icon={icon} imageComponent={imageComponent} />\n  );\n\n  return (\n    <div\n      className={classNames(className, \"ta-center\")}\n      data-cy={dataCy}\n      data-testid={dataTestId}\n    >\n      <div className=\"d-flex jc-center ai-center gap8\">\n        {renderedIcon}\n        <p className=\"p-h3\">\n          {title}\n          {price && <span className=\"tc-purple-600\"> {price}</span>}\n        </p>\n      </div>\n\n      <Button\n        {...onClick ? { onClick } : {\n          as: 'a',\n          href: href,\n          target: '_blank',\n          rel: 'noopener noreferrer',\n        }}\n        className={classNames('mt16 w100 wmx3', {\n          'p-btn--primary': !grey,\n          'p-btn--secondary-grey': grey,\n          [styles.narrow]: narrow,\n        })}\n      >\n        {buttonCaption}\n      </Button>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;IAsBa,OAAO,GAAG,UAAC,EAaT;;QAZb,KAAK,WAAA,EACL,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,aAAa,mBAAA,EACb,cAAc,oBAAA,EACd,SAAS,eAAA,EACT,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,OAAO,aAAA;IAEP,IAAM,YAAY,IAChBA,IAAC,YAAY,IAAC,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,GAAI,CAC7D,CAAC;IAEF,QACEC,cACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC,aACpC,MAAM,iBACF,UAAU,aAEvBA,cAAK,SAAS,EAAC,iCAAiC,aAC7C,YAAY,EACbA,YAAG,SAAS,EAAC,MAAM,aAChB,KAAK,EACL,KAAK,IAAIA,eAAM,SAAS,EAAC,eAAe,kBAAG,KAAK,IAAQ,IACvD,IACA,EAEND,IAAC,MAAM,eACD,OAAO,GAAG,EAAE,OAAO,SAAA,EAAE,GAAG;gBAC1B,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,IAAI;gBACV,MAAM,EAAE,QAAQ;gBAChB,GAAG,EAAE,qBAAqB;aAC3B,IACD,SAAS,EAAE,UAAU,CAAC,gBAAgB;wBACpC,gBAAgB,EAAE,CAAC,IAAI;wBACvB,uBAAuB,EAAE,IAAI;;oBAC7B,GAAC,MAAM,CAAC,MAAM,IAAG,MAAM;wBACvB,YAED,aAAa,IACP,IACL,EACN;AACJ;;;;"}

package/dist/esm/components/table/components/TableCell/TableCell.js

@@ -23,7 +23,7 @@ import '../../../button/index.js';
 import '../../../cards/card/index.js';
 import '../../../icon/icons/ChevronRight.js';
 
-var css_248z = ".TableCell-module_th__2rjCU {\n  vertical-align: middle;\n  scroll-snap-align: end;\n  width: 50%;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_th__2rjCU {\n    width: auto;\n    scroll-snap-align: unset;\n  }\n}\n.TableCell-module_thNavigation__qZ2sY {\n  width: 100%;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_thNavigation__qZ2sY {\n    width: auto;\n  }\n}\n\n.TableCell-module_fixedCell__cL3-m {\n  position: sticky;\n  left: 0;\n  z-index: 2;\n}\n.TableCell-module_fixedCell__cL3-m:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  width: 1px;\n  background-color: #f5f6fb;\n}\n\n.TableCell-module_fixedCard__2LO8s {\n  position: sticky;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  width: 100%;\n}";
+var css_248z = ".TableCell-module_th__2rjCU {\n  vertical-align: middle;\n  scroll-snap-align: end;\n  width: 50%;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_th__2rjCU {\n    width: auto;\n    scroll-snap-align: unset;\n  }\n}\n.TableCell-module_thNavigation__qZ2sY {\n  width: 100%;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_thNavigation__qZ2sY {\n    width: auto;\n  }\n}\n\n.TableCell-module_fixedCell__cL3-m {\n  position: sticky;\n  left: 0;\n  z-index: 2;\n}\n.TableCell-module_fixedCell__cL3-m:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  width: 1px;\n  background-color: #f7f7fd;\n}\n\n.TableCell-module_fixedCard__2LO8s {\n  position: sticky;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  width: 100%;\n}";
 var styles = {"th":"TableCell-module_th__2rjCU","thNavigation":"TableCell-module_thNavigation__qZ2sY","fixedCell":"TableCell-module_fixedCell__cL3-m","fixedCard":"TableCell-module_fixedCard__2LO8s"};
 styleInject(css_248z);
 

package/dist/esm/components/table/components/TableContents/TableContents.js

@@ -1,7 +1,7 @@
 import { a as __assign, _ as __spreadArray } from '../../../../tslib.es6-a39f91fc.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { T as TableSection } from '../../../../TableSection-9cf86eb7.js';
+import { T as TableSection } from '../../../../TableSection-5277dae1.js';
 import ChevronDownIcon from '../../../icon/icons/ChevronDown.js';
 import ChevronUpIcon from '../../../icon/icons/ChevronUp.js';
 import { Card } from '../../../cards/card/index.js';
@@ -59,8 +59,8 @@ var TableContents = function (_a) {
                 .map(function (globalRowIndex) { return globalRowIndex - globalRowOffset; })
                 .filter(function (localRowIndex) { return localRowIndex >= 0 && localRowIndex < rows.length; });
             var result = (isFirstSection || isVisible) && (jsxs("div", { children: [(section === null || section === void 0 ? void 0 : section.title) && (jsx("div", { className: styles.cardWrapper, children: jsx("div", { className: classNames(styles.card, 'p0'), children: jsx(Card, __assign({ actionIcon: isExpanded ? (jsx(ChevronUpIcon, { size: 24 })) : (jsx(ChevronDownIcon, { size: 24 })), "aria-expanded": isExpanded ? 'true' : 'false', "aria-hidden": true, classNames: {
-                                    wrapper: 'bg-purple-50 pl16',
-                                    icon: classNames(styles.cardIcon, 'tc-grey-900'),
+                                    wrapper: 'bg-purple-100 pl16',
+                                    icon: classNames(styles.cardIcon, 'tc-neutral-900'),
                                 }, dropShadow: false, icon: renderedIcon, title: section.title, titleVariant: "medium" }, (collapsibleSections
                                 ? {
                                     onClick: function () { return handleToggleSection(index); },

package/dist/esm/components/table/components/TableContents/TableContents.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableContents.js","sources":["../../../../../../../src/lib/components/table/components/TableContents/TableContents.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { TableSection } from '../TableSection/TableSection';\nimport { ChevronDownIcon, ChevronUpIcon } from '../../../icon';\nimport { Card } from '../../../cards/card';\n\nimport styles from './TableContents.module.scss';\nimport classNames from 'classnames';\nimport { Collapsible } from './Collapsible';\nimport { CellReplacements, ModalFunction, TableData } from '../../types';\nimport { IconRenderer } from '../IconRenderer/IconRenderer';\n\nexport interface TableContentsProps {\n  className?: string;\n  collapsibleSections?: boolean;\n  tableData: TableData;\n  hideColumns?: number[];\n  hideDetails?: boolean;\n  hideRows?: number[];\n  isMobile?: boolean;\n  openModal?: ModalFunction;\n  shouldHideDetails?: boolean;\n  title: string;\n  cellReplacements?: CellReplacements;\n  imageComponent?: (args: any) => JSX.Element;\n}\n\nconst TableContents = ({\n  className,\n  collapsibleSections,\n  tableData,\n  hideColumns = [],\n  hideDetails,\n  hideRows = [],\n  isMobile,\n  openModal,\n  shouldHideDetails,\n  title,\n  cellReplacements,\n  imageComponent,\n}: TableContentsProps) => {\n  const [isSectionOpen, setOpenSection] = useState<number | null>(null);\n  const firstHeadRow = tableData?.[0]?.rows?.[0];\n  const tableWidth = isMobile ? `${firstHeadRow?.length * 50}%` : '';\n  const handleToggleSection = (index: number) => {\n    setOpenSection((currentSection) =>\n      currentSection === index ? null : index\n    );\n  };\n\n  // Calculate global row offset for each section\n  let globalRowOffset = 0;\n\n  return (\n    <div style={{ width: tableWidth }}>\n      {tableData.map(({ rows, section = {} }, index) => {\n        const isFirstSection = index === 0;\n        const isExpanded = !collapsibleSections\n          ? true\n          : isSectionOpen === index || isFirstSection;\n        const isVisible = hideDetails ? !shouldHideDetails : true;\n\n        const renderedIcon = (\n          <IconRenderer icon={section.icon} imageComponent={imageComponent} width={20} />\n        );\n\n        // Calculate section-specific hideRows based on global offset\n        const sectionHideRows = hideRows\n          .map(globalRowIndex => globalRowIndex - globalRowOffset)\n          .filter(localRowIndex => localRowIndex >= 0 && localRowIndex < rows.length);\n\n        const result = (isFirstSection || isVisible) && (\n          <div key={index}>\n            {section?.title && (\n              <div className={styles.cardWrapper}>\n                <div className={classNames(styles.card, 'p0')}>\n                  <Card\n                    actionIcon={\n                      isExpanded ? (\n                        <ChevronUpIcon size={24} />\n                      ) : (\n                        <ChevronDownIcon size={24} />\n                      )\n                    }\n                    aria-expanded={isExpanded ? 'true' : 'false'}\n                    aria-hidden\n                    classNames={{\n                      wrapper: 'bg-purple-50 pl16',\n                      icon: classNames(styles.cardIcon, 'tc-grey-900'),\n                    }}\n                    dropShadow={false}\n                    icon={renderedIcon}\n                    title={section.title}\n                    titleVariant=\"medium\"\n                    {...(collapsibleSections\n                      ? {\n                          onClick: () => handleToggleSection(index),\n                        }\n                      : {})}\n                  />\n                </div>\n              </div>\n            )}\n\n            <Collapsible isExpanded={isExpanded}>\n              <TableSection\n                className={classNames(className, 'mb24')}\n                tableCellRows={\n                  isFirstSection ? rows : [firstHeadRow, ...rows]\n                }\n                hideColumns={hideColumns}\n                hideRows={sectionHideRows}\n                hideHeader\n                openModal={openModal}\n                title={`${title}${\n                  section?.title ? ` - ${section.title}` : ''\n                }`}\n                width={tableWidth}\n                cellReplacements={cellReplacements}\n                imageComponent={imageComponent}\n              />\n            </Collapsible>\n          </div>\n        );\n\n        // Update global offset for next section (excluding header row for non-first sections)\n        globalRowOffset += rows.length;\n\n        return result;\n      })}\n    </div>\n  );\n};\n\nexport { TableContents };\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"TableContents.js","sources":["../../../../../../../src/lib/components/table/components/TableContents/TableContents.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { TableSection } from '../TableSection/TableSection';\nimport { ChevronDownIcon, ChevronUpIcon } from '../../../icon';\nimport { Card } from '../../../cards/card';\n\nimport styles from './TableContents.module.scss';\nimport classNames from 'classnames';\nimport { Collapsible } from './Collapsible';\nimport { CellReplacements, ModalFunction, TableData } from '../../types';\nimport { IconRenderer } from '../IconRenderer/IconRenderer';\n\nexport interface TableContentsProps {\n  className?: string;\n  collapsibleSections?: boolean;\n  tableData: TableData;\n  hideColumns?: number[];\n  hideDetails?: boolean;\n  hideRows?: number[];\n  isMobile?: boolean;\n  openModal?: ModalFunction;\n  shouldHideDetails?: boolean;\n  title: string;\n  cellReplacements?: CellReplacements;\n  imageComponent?: (args: any) => JSX.Element;\n}\n\nconst TableContents = ({\n  className,\n  collapsibleSections,\n  tableData,\n  hideColumns = [],\n  hideDetails,\n  hideRows = [],\n  isMobile,\n  openModal,\n  shouldHideDetails,\n  title,\n  cellReplacements,\n  imageComponent,\n}: TableContentsProps) => {\n  const [isSectionOpen, setOpenSection] = useState<number | null>(null);\n  const firstHeadRow = tableData?.[0]?.rows?.[0];\n  const tableWidth = isMobile ? `${firstHeadRow?.length * 50}%` : '';\n  const handleToggleSection = (index: number) => {\n    setOpenSection((currentSection) =>\n      currentSection === index ? null : index\n    );\n  };\n\n  // Calculate global row offset for each section\n  let globalRowOffset = 0;\n\n  return (\n    <div style={{ width: tableWidth }}>\n      {tableData.map(({ rows, section = {} }, index) => {\n        const isFirstSection = index === 0;\n        const isExpanded = !collapsibleSections\n          ? true\n          : isSectionOpen === index || isFirstSection;\n        const isVisible = hideDetails ? !shouldHideDetails : true;\n\n        const renderedIcon = (\n          <IconRenderer icon={section.icon} imageComponent={imageComponent} width={20} />\n        );\n\n        // Calculate section-specific hideRows based on global offset\n        const sectionHideRows = hideRows\n          .map(globalRowIndex => globalRowIndex - globalRowOffset)\n          .filter(localRowIndex => localRowIndex >= 0 && localRowIndex < rows.length);\n\n        const result = (isFirstSection || isVisible) && (\n          <div key={index}>\n            {section?.title && (\n              <div className={styles.cardWrapper}>\n                <div className={classNames(styles.card, 'p0')}>\n                  <Card\n                    actionIcon={\n                      isExpanded ? (\n                        <ChevronUpIcon size={24} />\n                      ) : (\n                        <ChevronDownIcon size={24} />\n                      )\n                    }\n                    aria-expanded={isExpanded ? 'true' : 'false'}\n                    aria-hidden\n                    classNames={{\n                      wrapper: 'bg-purple-100 pl16',\n                      icon: classNames(styles.cardIcon, 'tc-neutral-900'),\n                    }}\n                    dropShadow={false}\n                    icon={renderedIcon}\n                    title={section.title}\n                    titleVariant=\"medium\"\n                    {...(collapsibleSections\n                      ? {\n                          onClick: () => handleToggleSection(index),\n                        }\n                      : {})}\n                  />\n                </div>\n              </div>\n            )}\n\n            <Collapsible isExpanded={isExpanded}>\n              <TableSection\n                className={classNames(className, 'mb24')}\n                tableCellRows={\n                  isFirstSection ? rows : [firstHeadRow, ...rows]\n                }\n                hideColumns={hideColumns}\n                hideRows={sectionHideRows}\n                hideHeader\n                openModal={openModal}\n                title={`${title}${\n                  section?.title ? ` - ${section.title}` : ''\n                }`}\n                width={tableWidth}\n                cellReplacements={cellReplacements}\n                imageComponent={imageComponent}\n              />\n            </Collapsible>\n          </div>\n        );\n\n        // Update global offset for next section (excluding header row for non-first sections)\n        globalRowOffset += rows.length;\n\n        return result;\n      })}\n    </div>\n  );\n};\n\nexport { TableContents };\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/table/components/TableContents/TableContents.test.js

@@ -6,7 +6,7 @@ import 'react';
 import 'react-dom';
 import '../../../../_commonjsHelpers-4730bd53.js';
 import 'react-dom/test-utils';
-import '../../../../TableSection-9cf86eb7.js';
+import '../../../../TableSection-5277dae1.js';
 import '../../../../index-6ea95111.js';
 import '../../../../style-inject.es-1f59c1d0.js';
 import '../TableCell/TableCell.js';

package/dist/esm/components/table/components/TableSection/TableSection.js

@@ -1,7 +1,7 @@
 import '../../../../tslib.es6-a39f91fc.js';
 import 'react/jsx-runtime';
 import '../../../../index-6ea95111.js';
-export { T as TableSection } from '../../../../TableSection-9cf86eb7.js';
+export { T as TableSection } from '../../../../TableSection-5277dae1.js';
 import '../TableCell/TableCell.js';
 import 'react';
 import '../../../../useMediaQuery-1a3a2432.js';

package/dist/esm/components/table/components/TableSection/TableSection.test.js

@@ -1,7 +1,7 @@
 import { a as __assign } from '../../../../tslib.es6-a39f91fc.js';
 import { jsx } from 'react/jsx-runtime';
 import { c as customRender, s as screen } from '../../../../customRender-be47569b.js';
-import { T as TableSection } from '../../../../TableSection-9cf86eb7.js';
+import { T as TableSection } from '../../../../TableSection-5277dae1.js';
 import 'react';
 import 'react-dom';
 import '../../../../_commonjsHelpers-4730bd53.js';

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

@@ -1,7 +1,7 @@
 import '../../tslib.es6-a39f91fc.js';
 import 'react/jsx-runtime';
 import '../../index-6ea95111.js';
-export { T as Toast, a as Toaster, t as toast } from '../../index-4b19aafb.js';
+export { T as Toast, a as Toaster, t as toast } from '../../index-860896d2.js';
 import '../icon/icons/X.js';
 import '../../style-inject.es-1f59c1d0.js';
 import 'react';

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

@@ -1,6 +1,6 @@
 import { a as __assign } from '../../tslib.es6-a39f91fc.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { T as Toast, a as Toaster, s as styles, t as toast } from '../../index-4b19aafb.js';
+import { T as Toast, a as Toaster, s as styles, t as toast } from '../../index-860896d2.js';
 import { Button } from '../button/index.js';
 import { c as classNames } from '../../index-6ea95111.js';
 import '../../style-inject.es-1f59c1d0.js';
@@ -73,7 +73,7 @@ var ToastStory = function (_a) {
         type: type,
         action: action
     }); };
-    return (jsxs(Fragment, { children: [jsxs("div", { className: 'mb16', children: [jsx("div", { children: "Show a toast using the following code:" }), jsx("pre", { className: 'bg-grey-300 br4 d-inline-flex p8 mt8', children: "() => toast(title, { description, type, action })" })] }), jsx(Toaster, { classNames: toasterClassNames }), jsx(Button, { onClick: showToast, children: "Click here to trigger toast" })] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: 'mb16', children: [jsx("div", { children: "Show a toast using the following code:" }), jsx("pre", { className: 'bg-neutral-300 br4 d-inline-flex p8 mt8', children: "() => toast(title, { description, type, action })" })] }), jsx(Toaster, { classNames: toasterClassNames }), jsx(Button, { onClick: showToast, children: "Click here to trigger toast" })] }));
 };
 ToastStory.storyName = "Toast";
 var ToastTypes = function (props) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/toast/index.stories.tsx"],"sourcesContent":["import { ToasterProps, Toast, ToastProps, ToastType, Toaster, toast } from '.';\nimport { Button } from '../button';\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\nconst toastTypes: ToastType[] = ['success', 'warning', 'error', 'information'];\n\nconst story = {\n  title: 'JSX/Toast',\n  component: Toast,\n  argTypes: {\n    title: {\n      description: 'Title of the toast.',\n    },\n    description: {\n      description: 'Additional description content to be displayed inside the toast.',\n    },\n    type: {\n      description: 'Type of toast to display. This changes the styles/colors of the toast.',\n    },\n    action: {\n      description: 'Object containing a possible action button inside the toast.',\n    },\n    duration: {\n      description: 'Duration in ms that the toast should be displayed.',\n      table: {\n        defaultValue: { summary: 3000 },\n      }\n    },\n    onDismiss: {\n      table: {\n        disable: true,\n      },\n    },\n    classNames: {\n      description: 'Allows customization of toast and toast wrapper (named as Toaster)',\n      table: {\n        category: 'Toaster props',\n      },\n    },\n  },\n  args: {\n    title: 'We couldn’t open the chat',\n    description: \"We couldn't open the chat description. We couldn't open the chat description.\",\n    action: {\n      title: 'Send an email',\n      onClick: () => {}\n    },\n    type: 'success',\n    duration: 3000,\n    classNames: {\n      toast: \"\",\n      wrapper: \"\"\n    }\n  },\n};\n\nconst FakeInlineToast = ({ \n  title, \n  description, \n  action, \n  type,\n}: Omit<ToastProps, 'onDismiss'>) => (\n  <div className='mb32'>\n    <div\n      className={classNames(styles.toast, 'br8 bs-lg d-inline-flex')}\n      style={{\n        padding: \"12px 20px\"\n      }}\n    >\n      <Toast \n        title={title}\n        onDismiss={() => {}}\n        description={description}\n        action={action}\n        type={type}\n      />\n    </div>\n  </div>\n);\n\nexport const ToastStory = ({ \n  title, \n  description, \n  action, \n  type, \n  duration, \n  classNames: toasterClassNames \n}: ToastProps & ToasterProps) => {\n  const showToast = () => toast(\n    title, \n    {\n      description,\n      duration,\n      type,\n      action\n    }\n  );\n\n  return (\n    <>\n      <div className='mb16'>\n        <div>\n          Show a toast using the following code:\n        </div>\n        <pre className='bg-grey-300 br4 d-inline-flex p8 mt8'>\n          {\"() => toast(title, { description, type, action })\"}\n        </pre>\n      </div>\n      <Toaster classNames={toasterClassNames} />\n\n      <Button onClick={showToast}>Click here to trigger toast</Button>\n    </>\n  );\n};\n\nToastStory.storyName = \"Toast\";\n\nexport const ToastTypes = (props: ToastProps) => {\n  return (\n    <>\n      {toastTypes.map((toastType) => (\n        <div key={toastType} className='d-flex fd-column'>\n          <h3 className='p-h3 mb16'>{toastType}</h3>\n          <FakeInlineToast {...props} type={toastType} />\n        </div>\n      ))}\n    </>\n  );\n};\n\nexport const ToastContent = ({ title, description, action }: ToastProps) => {\n  return (\n    <div className='d-flex fd-column'>\n      <FakeInlineToast title={title} />\n      <FakeInlineToast title={title} description={description} />\n      <FakeInlineToast title={title} description={description} action={action} />\n      <FakeInlineToast title={title} action={action} />\n    </div>\n  );\n};\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/toast/index.stories.tsx"],"sourcesContent":["import { ToasterProps, Toast, ToastProps, ToastType, Toaster, toast } from '.';\nimport { Button } from '../button';\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\nconst toastTypes: ToastType[] = ['success', 'warning', 'error', 'information'];\n\nconst story = {\n  title: 'JSX/Toast',\n  component: Toast,\n  argTypes: {\n    title: {\n      description: 'Title of the toast.',\n    },\n    description: {\n      description: 'Additional description content to be displayed inside the toast.',\n    },\n    type: {\n      description: 'Type of toast to display. This changes the styles/colors of the toast.',\n    },\n    action: {\n      description: 'Object containing a possible action button inside the toast.',\n    },\n    duration: {\n      description: 'Duration in ms that the toast should be displayed.',\n      table: {\n        defaultValue: { summary: 3000 },\n      }\n    },\n    onDismiss: {\n      table: {\n        disable: true,\n      },\n    },\n    classNames: {\n      description: 'Allows customization of toast and toast wrapper (named as Toaster)',\n      table: {\n        category: 'Toaster props',\n      },\n    },\n  },\n  args: {\n    title: 'We couldn’t open the chat',\n    description: \"We couldn't open the chat description. We couldn't open the chat description.\",\n    action: {\n      title: 'Send an email',\n      onClick: () => {}\n    },\n    type: 'success',\n    duration: 3000,\n    classNames: {\n      toast: \"\",\n      wrapper: \"\"\n    }\n  },\n};\n\nconst FakeInlineToast = ({ \n  title, \n  description, \n  action, \n  type,\n}: Omit<ToastProps, 'onDismiss'>) => (\n  <div className='mb32'>\n    <div\n      className={classNames(styles.toast, 'br8 bs-lg d-inline-flex')}\n      style={{\n        padding: \"12px 20px\"\n      }}\n    >\n      <Toast \n        title={title}\n        onDismiss={() => {}}\n        description={description}\n        action={action}\n        type={type}\n      />\n    </div>\n  </div>\n);\n\nexport const ToastStory = ({ \n  title, \n  description, \n  action, \n  type, \n  duration, \n  classNames: toasterClassNames \n}: ToastProps & ToasterProps) => {\n  const showToast = () => toast(\n    title, \n    {\n      description,\n      duration,\n      type,\n      action\n    }\n  );\n\n  return (\n    <>\n      <div className='mb16'>\n        <div>\n          Show a toast using the following code:\n        </div>\n        <pre className='bg-neutral-300 br4 d-inline-flex p8 mt8'>\n          {\"() => toast(title, { description, type, action })\"}\n        </pre>\n      </div>\n      <Toaster classNames={toasterClassNames} />\n\n      <Button onClick={showToast}>Click here to trigger toast</Button>\n    </>\n  );\n};\n\nToastStory.storyName = \"Toast\";\n\nexport const ToastTypes = (props: ToastProps) => {\n  return (\n    <>\n      {toastTypes.map((toastType) => (\n        <div key={toastType} className='d-flex fd-column'>\n          <h3 className='p-h3 mb16'>{toastType}</h3>\n          <FakeInlineToast {...props} type={toastType} />\n        </div>\n      ))}\n    </>\n  );\n};\n\nexport const ToastContent = ({ title, description, action }: ToastProps) => {\n  return (\n    <div className='d-flex fd-column'>\n      <FakeInlineToast title={title} />\n      <FakeInlineToast title={title} description={description} />\n      <FakeInlineToast title={title} description={description} action={action} />\n      <FakeInlineToast title={title} action={action} />\n    </div>\n  );\n};\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/toast/index.test.js

@@ -1,7 +1,7 @@
 import { c as __awaiter, d as __generator } from '../../tslib.es6-a39f91fc.js';
 import { jsx } from 'react/jsx-runtime';
 import { c as customRender, s as screen } from '../../customRender-be47569b.js';
-import { T as Toast } from '../../index-4b19aafb.js';
+import { T as Toast } from '../../index-860896d2.js';
 import 'react';
 import 'react-dom';
 import '../../_commonjsHelpers-4730bd53.js';

package/dist/esm/{index-4b19aafb.js → index-860896d2.js}

@@ -6,7 +6,7 @@ import React__default from 'react';
 import { a as getAugmentedNamespace } from './_commonjsHelpers-4730bd53.js';
 import XIcon from './components/icon/icons/X.js';
 
-var css_248z = ".style-module_toastWrapper__1SC4C {\n  margin: 0;\n  padding: 0;\n}\n\n.style-module_toast__NY8bo {\n  position: relative;\n  margin: 0;\n  padding: 0;\n  width: 392px;\n  overflow: hidden;\n}\n\n.style-module_toastContent__3RHpU {\n  padding: 4px 0 4px 8px;\n}\n\n.style-module_toastSidebar__NUxSa {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 8px;\n}\n.style-module_toastSidebar--information__2nKT_ {\n  background-color: #8bb4ea;\n}\n.style-module_toastSidebar--error__15Vwo {\n  background-color: #e55454;\n}\n.style-module_toastSidebar--warning__33N9y {\n  background-color: #f7ce5c;\n}\n.style-module_toastSidebar--success__27652 {\n  background-color: #84de8a;\n}\n\n.style-module_closeButton__3S_5n {\n  background-color: transparent;\n  color: #d2d2d8;\n  min-width: 24px;\n}\n.style-module_closeButton__3S_5n:hover {\n  color: #696970;\n}\n\n.style-module_actionButton__3ziRG {\n  background-color: transparent;\n}\n.style-module_actionButton--warning__2I0LT {\n  color: #cc9e21;\n}\n.style-module_actionButton--warning__2I0LT:hover {\n  color: #4a3d10;\n}\n.style-module_actionButton--error__1kJIR {\n  color: #e55454;\n}\n.style-module_actionButton--error__1kJIR:hover {\n  color: #c64848;\n}\n.style-module_actionButton--success__y96NI {\n  color: #599278;\n}\n.style-module_actionButton--success__y96NI:hover {\n  color: #2b4639;\n}\n.style-module_actionButton--information__1oeAG {\n  color: #5f7ba0;\n}\n.style-module_actionButton--information__1oeAG:hover {\n  color: #2d394a;\n}";
+var css_248z = ".style-module_toastWrapper__1SC4C {\n  margin: 0;\n  padding: 0;\n}\n\n.style-module_toast__NY8bo {\n  position: relative;\n  margin: 0;\n  padding: 0;\n  width: 392px;\n  overflow: hidden;\n}\n\n.style-module_toastContent__3RHpU {\n  padding: 4px 0 4px 8px;\n}\n\n.style-module_toastSidebar__NUxSa {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 8px;\n}\n.style-module_toastSidebar--information__2nKT_ {\n  background-color: #8BB4EA;\n}\n.style-module_toastSidebar--error__15Vwo {\n  background-color: #E55454;\n}\n.style-module_toastSidebar--warning__33N9y {\n  background-color: #F0D26F;\n}\n.style-module_toastSidebar--success__27652 {\n  background-color: #85DCB4;\n}\n\n.style-module_closeButton__3S_5n {\n  background-color: transparent;\n  color: #d2d2d9;\n  min-width: 24px;\n}\n.style-module_closeButton__3S_5n:hover {\n  color: #696971;\n}\n\n.style-module_actionButton__3ziRG {\n  background-color: transparent;\n}\n.style-module_actionButton--warning__2I0LT {\n  color: #C5A33E;\n}\n.style-module_actionButton--warning__2I0LT:hover {\n  color: #483D18;\n}\n.style-module_actionButton--error__1kJIR {\n  color: #E55454;\n}\n.style-module_actionButton--error__1kJIR:hover {\n  color: #C64848;\n}\n.style-module_actionButton--success__y96NI {\n  color: #599278;\n}\n.style-module_actionButton--success__y96NI:hover {\n  color: #2B4639;\n}\n.style-module_actionButton--information__1oeAG {\n  color: #5F7BA0;\n}\n.style-module_actionButton--information__1oeAG:hover {\n  color: #2D394A;\n}";
 var styles = {"toastWrapper":"style-module_toastWrapper__1SC4C","toast":"style-module_toast__NY8bo","toastContent":"style-module_toastContent__3RHpU","toastSidebar":"style-module_toastSidebar__NUxSa","toastSidebar--information":"style-module_toastSidebar--information__2nKT_","toastSidebar--error":"style-module_toastSidebar--error__15Vwo","toastSidebar--warning":"style-module_toastSidebar--warning__33N9y","toastSidebar--success":"style-module_toastSidebar--success__27652","closeButton":"style-module_closeButton__3S_5n","actionButton":"style-module_actionButton__3ziRG","actionButton--warning":"style-module_actionButton--warning__2I0LT","actionButton--error":"style-module_actionButton--error__1kJIR","actionButton--success":"style-module_actionButton--success__y96NI","actionButton--information":"style-module_actionButton--information__1oeAG"};
 styleInject(css_248z);
 
@@ -210,7 +210,7 @@ var Toaster = function (_a) {
 };
 var Toast = function (_a) {
     var action = _a.action, description = _a.description, onDismiss = _a.onDismiss, title = _a.title, _b = _a.type, type = _b === void 0 ? "success" : _b;
-    return (jsxs("div", { className: classNames(styles.toastContent, 'd-flex jc-between w100'), children: [jsx("div", { className: classNames(styles.toastSidebar, styles["toastSidebar--".concat(type)]) }), jsxs("div", { className: 'd-flex fd-column jc-center ta-left mr8', children: [jsx("h4", { className: 'p-h4', children: title }), description && (jsx("p", { className: 'p-p p-p--small mt8 tc-grey-600', children: description })), action && (jsx("button", { className: classNames(styles.actionButton, styles["actionButton--".concat(type)], 'mt8 c-pointer ta-left'), onClick: function () {
+    return (jsxs("div", { className: classNames(styles.toastContent, 'd-flex jc-between w100'), children: [jsx("div", { className: classNames(styles.toastSidebar, styles["toastSidebar--".concat(type)]) }), jsxs("div", { className: 'd-flex fd-column jc-center ta-left mr8', children: [jsx("h4", { className: 'p-h4', children: title }), description && (jsx("p", { className: 'p-p p-p--small mt8 tc-neutral-700', children: description })), action && (jsx("button", { className: classNames(styles.actionButton, styles["actionButton--".concat(type)], 'mt8 c-pointer ta-left'), onClick: function () {
                             action.onClick();
                             onDismiss();
                         }, type: "button", children: action.title }))] }), jsx("div", { className: 'd-flex ai-center', children: jsx("button", { className: classNames(styles.closeButton, 'c-pointer'), onClick: onDismiss, "data-testid": "toast-close-button", children: jsx(XIcon, { size: 24 }) }) })] }));
@@ -221,4 +221,4 @@ var toast = function (title, _a) {
 };
 
 export { Toast as T, Toaster as a, styles as s, toast as t };
-//# sourceMappingURL=index-4b19aafb.js.map
+//# sourceMappingURL=index-860896d2.js.map