@popsure/dirty-swan 0.59.1 → 0.60.1

package/dist/cjs/lib/components/badge/index.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
-type Variant = 'warning' | 'error' | 'success' | 'information' | 'neutral' | 'neutral200' | 'neutral300' | 'primary' | 'primary900';
+type Variant = 'white' | 'neutral' | 'neutralStrong' | 'information' | 'warning' | 'primary' | 'error' | 'success' | 'black' | 'secondary' | 'secondaryStrong';
 export interface BadgeProps {
     className?: string;
     variant?: Variant;
-    size?: 'small' | 'medium' | 'large';
+    size?: 'xsmall' | 'small' | 'medium' | 'large';
     children: ReactNode;
+    showDot?: boolean;
 }
-declare const Badge: ({ className, size, variant, children, }: BadgeProps) => JSX.Element;
+declare const Badge: ({ className, size, variant, children, showDot }: BadgeProps) => JSX.Element;
 export { Badge };

package/dist/cjs/lib/components/badge/index.stories.d.ts

@@ -1,7 +1,7 @@
 import { BadgeProps } from '.';
 declare const story: {
     title: string;
-    component: ({ className, size, variant, children, }: BadgeProps) => JSX.Element;
+    component: ({ className, size, variant, children, showDot }: BadgeProps) => JSX.Element;
     argTypes: {
         children: {
             control: string;
@@ -17,16 +17,22 @@ declare const story: {
         variant: {
             description: string;
         };
+        showDot: {
+            description: string;
+        };
     };
     args: {
         children: string;
         className: string;
         size: string;
         variant: string;
+        showDot: boolean;
     };
 };
 export declare const BadgeStory: {
-    ({ children, className, size, variant, }: BadgeProps): JSX.Element;
+    ({ children, className, size, variant, showDot, }: BadgeProps): JSX.Element;
     storyName: string;
 };
+export declare const Variants: () => JSX.Element;
+export declare const Sizes: () => JSX.Element;
 export default story;

package/dist/cjs/lib/components/table/Table.d.ts

@@ -19,6 +19,7 @@ export interface TableProps {
     tableData: TableData;
     textOverrides?: TextOverrides;
     title: string;
+    activeSection?: number;
 }
-declare const Table: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
+declare const Table: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection }: TableProps) => JSX.Element;
 export { Table };

package/dist/cjs/lib/components/table/Table.stories.d.ts

@@ -2,7 +2,7 @@ import { TableProps } from './Table';
 import { TableData } from './types';
 declare const story: {
     title: string;
-    component: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
+    component: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection }: TableProps) => JSX.Element;
     argTypes: {
         tableData: {
             subContent: string;
@@ -63,7 +63,7 @@ declare const story: {
     };
 };
 export declare const TableStory: {
-    ({ collapsibleSections, tableData, hideColumns, hideDetails, hideRows, stickyHeaderTopOffset, textOverrides, title, }: TableProps): JSX.Element;
+    ({ collapsibleSections, tableData, hideColumns, hideDetails, hideRows, stickyHeaderTopOffset, textOverrides, title, activeSection, }: TableProps): JSX.Element;
     storyName: string;
 };
 export declare const TableDataType: () => JSX.Element;

package/dist/cjs/lib/components/table/utils/useTableNavigation/useTableNavigation.d.ts

@@ -2,6 +2,7 @@
 interface UseTableNavigationReturn {
     activeSection: number;
     navigateTable: (increase?: boolean) => void;
+    setActiveSection: (section: number) => void;
 }
 interface UseTableNavigationProps {
     containerRef: React.RefObject<HTMLElement>;

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

@@ -1,25 +1,16 @@
-import { jsx } from 'react/jsx-runtime';
+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 = ".style-module_badge--small__cHO6v, .style-module_badge--medium__3CekE {\n  padding-bottom: 6px;\n  padding-top: 6px;\n}\n.style-module_badge--large__3_tWC {\n  padding-bottom: 8px;\n  padding-top: 8px;\n}";
-var styles = {"badge--small":"style-module_badge--small__cHO6v","badge--medium":"style-module_badge--medium__3CekE","badge--large":"style-module_badge--large__3_tWC"};
+var css_248z = ".style-module_badge__7H1Jt {\n  border: 1px solid #fff;\n  position: relative;\n  gap: 6px;\n}\n.style-module_badge--xsmall__2lIav {\n  padding: 4px 10px;\n}\n.style-module_badge--small__cHO6v {\n  padding: 6px 12px;\n}\n.style-module_badge--medium__3CekE {\n  padding: 6px 16px;\n}\n.style-module_badge--large__3_tWC {\n  gap: 8px;\n  padding: 8px 16px;\n}\n.style-module_badge--white__QtwA_ {\n  background-color: #fff;\n  border-color: #f7f7fd;\n}\n.style-module_badge--neutral__7yAYx {\n  background-color: #f7f7fd;\n  border-color: #f2f2f8;\n}\n.style-module_badge--neutralStrong__1JHph {\n  background-color: #e7e7ed;\n  border-color: #e7e7ed;\n}\n.style-module_badge--information__1tegJ {\n  background-color: #E5F0FF;\n  border-color: #DAE8FC;\n}\n.style-module_badge--warning__2UCOz, .style-module_badge--primary__1JGTF {\n  background-color: #FEECD3;\n  border-color: #FCDAAB;\n}\n.style-module_badge--error__1g5DA {\n  background-color: #FEE6E6;\n  border-color: #FED7D7;\n}\n.style-module_badge--success__YJJ9N {\n  background-color: #E6FAF1;\n  border-color: #D5F6E7;\n}\n.style-module_badge--black__sdqec {\n  background-color: #26262e;\n  border-color: #26262e;\n  color: #fff;\n}\n.style-module_badge--secondary__1kblP {\n  background-color: #EEEEFE;\n  border-color: #E8E7FE;\n}\n.style-module_badge--secondaryStrong__33FDy {\n  background-color: #8883D8;\n  border-color: #8883D8;\n  color: #fff;\n}\n\n.style-module_badgeDot__N2_h5 {\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n.style-module_badgeDot--primary__q-_rt, .style-module_badgeDot--warning__1xu_H {\n  background-color: #C6824E;\n}\n.style-module_badgeDot--white__2Zi0j {\n  background-color: #b8b8c0;\n}\n.style-module_badgeDot--neutral__3Y6Z9 {\n  background-color: #919199;\n}\n.style-module_badgeDot--neutralStrong__3KzHS {\n  background-color: #696971;\n}\n.style-module_badgeDot--information__1t-rb {\n  background-color: #5F7BA0;\n}\n.style-module_badgeDot--error__3Lh5R {\n  background-color: #C64848;\n}\n.style-module_badgeDot--success__7tHPA {\n  background-color: #599278;\n}\n.style-module_badgeDot--black__2YWa7 {\n  background-color: #fff;\n}\n.style-module_badgeDot--secondary__RU2iJ {\n  background-color: #6A65AE;\n}\n.style-module_badgeDot--secondaryStrong__3AN6H {\n  background-color: #fff;\n}";
+var styles = {"badge":"style-module_badge__7H1Jt","badge--xsmall":"style-module_badge--xsmall__2lIav","badge--small":"style-module_badge--small__cHO6v","badge--medium":"style-module_badge--medium__3CekE","badge--large":"style-module_badge--large__3_tWC","badge--white":"style-module_badge--white__QtwA_","badge--neutral":"style-module_badge--neutral__7yAYx","badge--neutralStrong":"style-module_badge--neutralStrong__1JHph","badge--information":"style-module_badge--information__1tegJ","badge--warning":"style-module_badge--warning__2UCOz","badge--primary":"style-module_badge--primary__1JGTF","badge--error":"style-module_badge--error__1g5DA","badge--success":"style-module_badge--success__YJJ9N","badge--black":"style-module_badge--black__sdqec","badge--secondary":"style-module_badge--secondary__1kblP","badge--secondaryStrong":"style-module_badge--secondaryStrong__33FDy","badgeDot":"style-module_badgeDot__N2_h5","badgeDot--primary":"style-module_badgeDot--primary__q-_rt","badgeDot--warning":"style-module_badgeDot--warning__1xu_H","badgeDot--white":"style-module_badgeDot--white__2Zi0j","badgeDot--neutral":"style-module_badgeDot--neutral__3Y6Z9","badgeDot--neutralStrong":"style-module_badgeDot--neutralStrong__3KzHS","badgeDot--information":"style-module_badgeDot--information__1t-rb","badgeDot--error":"style-module_badgeDot--error__3Lh5R","badgeDot--success":"style-module_badgeDot--success__7tHPA","badgeDot--black":"style-module_badgeDot--black__2YWa7","badgeDot--secondary":"style-module_badgeDot--secondary__RU2iJ","badgeDot--secondaryStrong":"style-module_badgeDot--secondaryStrong__3AN6H"};
 styleInject(css_248z);
 
-var getVariantClassNames = function (variant) { return ({
-    information: 'bg-blue-100',
-    neutral: 'bg-white',
-    neutral200: 'bg-neutral-100',
-    neutral300: 'bg-neutral-300',
-    warning: 'bg-yellow-200',
-    error: 'bg-red-100',
-    success: 'bg-green-100',
-    primary: 'bg-purple-300',
-    primary900: 'bg-purple-900 tc-white',
-}[variant]); };
 var Badge = function (_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.variant, variant = _d === void 0 ? 'information' : _d, children = _a.children;
-    return (jsx("div", { role: "status", className: classNames(className, 'px16 br8 d-inline-block ai-center fw-bold p-p', { 'p-p--small': size === 'small' }, styles["badge--".concat(size)], getVariantClassNames(variant)), children: children }));
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.variant, variant = _d === void 0 ? 'information' : _d, children = _a.children, _e = _a.showDot, showDot = _e === void 0 ? false : _e;
+    return (jsxs("div", { role: "status", className: classNames(className, 'br8 d-inline-flex ai-center fw-bold p-p', styles.badge, styles["badge--".concat(size)], styles["badge--".concat(variant)], {
+            'p-p--small': size === 'small' || size === 'xsmall',
+        }), children: [showDot && (jsx("span", { className: classNames(styles.badgeDot, styles["badgeDot--".concat(variant)]) })), children] }));
 };
 
 export { Badge };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/badge/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNames from 'classnames';\nimport styles from './style.module.scss';\n\ntype Variant = \n | 'warning'\n | 'error'\n | 'success'\n | 'information'\n | 'neutral'\n | 'neutral200'\n | 'neutral300'\n | 'primary'\n | 'primary900';\n\nexport interface BadgeProps {\n  className?: string;\n  variant?: Variant;\n  size?: 'small' | 'medium' | 'large';\n  children: ReactNode;\n}\n\nconst getVariantClassNames = (variant: Variant) => ({\n  information: 'bg-blue-100',\n  neutral: 'bg-white',\n  neutral200: 'bg-neutral-100',\n  neutral300: 'bg-neutral-300',\n  warning: 'bg-yellow-200',\n  error: 'bg-red-100',\n  success: 'bg-green-100',\n  primary: 'bg-purple-300',\n  primary900: 'bg-purple-900 tc-white',\n}[variant])\n\nconst Badge = ({\n  className = '',\n  size = 'medium',\n  variant = 'information',\n  children,\n}: BadgeProps) => (\n  <div\n    role=\"status\" \n    className={classNames(\n      className, \n      'px16 br8 d-inline-block ai-center fw-bold p-p', \n      { 'p-p--small': size === 'small' },\n      styles[`badge--${size}`],\n      getVariantClassNames(variant)\n    )}\n  >\n    {children}\n  </div>\n);\n\nexport { Badge };\n"],"names":["_jsx"],"mappings":";;;;;;;;AAsBA,IAAM,oBAAoB,GAAG,UAAC,OAAgB,IAAK,QAAC;IAClD,WAAW,EAAE,aAAa;IAC1B,OAAO,EAAE,UAAU;IACnB,UAAU,EAAE,gBAAgB;IAC5B,UAAU,EAAE,gBAAgB;IAC5B,OAAO,EAAE,eAAe;IACxB,KAAK,EAAE,YAAY;IACnB,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,eAAe;IACxB,UAAU,EAAE,wBAAwB;CACrC,CAAC,OAAO,CAAC,IAAC,CAAA;IAEL,KAAK,GAAG,UAAC,EAKF;QAJX,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,eAAuB,EAAvB,OAAO,mBAAG,aAAa,KAAA,EACvB,QAAQ,cAAA;IACQ,QAChBA,aACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,UAAU,CACnB,SAAS,EACT,+CAA+C,EAC/C,EAAE,YAAY,EAAE,IAAI,KAAK,OAAO,EAAE,EAClC,MAAM,CAAC,iBAAU,IAAI,CAAE,CAAC,EACxB,oBAAoB,CAAC,OAAO,CAAC,CAC9B,YAEA,QAAQ,GACL;AAZU;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/badge/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNames from 'classnames';\nimport styles from './style.module.scss';\n\ntype Variant = \n  | 'white'\n  | 'neutral'\n  | 'neutralStrong'\n  | 'information'\n  | 'warning'\n  | 'primary'\n  | 'error'\n  | 'success'\n  | 'black'\n  | 'secondary'\n  | 'secondaryStrong';\n\nexport interface BadgeProps {\n  className?: string;\n  variant?: Variant;\n  size?: 'xsmall' | 'small' | 'medium' | 'large';\n  children: ReactNode;\n  showDot?: boolean;\n}\n\nconst Badge = ({\n  className = '',\n  size = 'medium',\n  variant = 'information',\n  children,\n  showDot = false\n}: BadgeProps) => (\n  <div\n    role=\"status\" \n    className={classNames(\n      className,\n      'br8 d-inline-flex ai-center fw-bold p-p',\n      styles.badge,\n      styles[`badge--${size}`],\n      styles[`badge--${variant}`],\n      {\n        'p-p--small': size === 'small' || size === 'xsmall',\n      }\n    )}\n  >\n    {showDot && (\n      <span\n        className={classNames(\n          styles.badgeDot,\n          styles[`badgeDot--${variant}`]\n        )}\n      />\n    )}\n\n    {children}\n  </div>\n);\n\nexport { Badge };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;IAyBM,KAAK,GAAG,UAAC,EAMF;QALX,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,eAAuB,EAAvB,OAAO,mBAAG,aAAa,KAAA,EACvB,QAAQ,cAAA,EACR,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA;IACC,QAChBA,cACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,UAAU,CACnB,SAAS,EACT,yCAAyC,EACzC,MAAM,CAAC,KAAK,EACZ,MAAM,CAAC,iBAAU,IAAI,CAAE,CAAC,EACxB,MAAM,CAAC,iBAAU,OAAO,CAAE,CAAC,EAC3B;YACE,YAAY,EAAE,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,QAAQ;SACpD,CACF,aAEA,OAAO,KACNC,cACE,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,QAAQ,EACf,MAAM,CAAC,oBAAa,OAAO,CAAE,CAAC,CAC/B,GACD,CACH,EAEA,QAAQ,IACL;AAxBU;;;;"}

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

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Badge } from './index.js';
 import '../../index-6ea95111.js';
 import '../../style-inject.es-1f59c1d0.js';
@@ -21,20 +21,41 @@ var story = {
         variant: {
             description: 'Variant that defines the style of the Badge',
         },
+        showDot: {
+            description: 'Whether to show a dot indicator',
+        }
     },
     args: {
         children: 'Value',
         className: '',
         size: 'medium',
         variant: 'information',
+        showDot: false
     }
 };
 var BadgeStory = function (_a) {
-    var children = _a.children, className = _a.className, size = _a.size, variant = _a.variant;
-    return (jsx(Badge, { className: className, size: size, variant: variant, children: children }));
+    var children = _a.children, className = _a.className, size = _a.size, variant = _a.variant, showDot = _a.showDot;
+    return (jsx(Badge, { className: className, size: size, variant: variant, showDot: showDot, children: children }));
 };
 BadgeStory.storyName = "Badge";
+var variants = [
+    'white',
+    'neutral',
+    'neutralStrong',
+    'information',
+    'warning',
+    'primary',
+    'error',
+    'success',
+    'secondary',
+    'secondaryStrong',
+    'black',
+];
+var Variants = function () { return (jsx("div", { className: 'd-flex fd-column gap16', children: variants.map(function (variant) { return (jsxs("div", { className: 'd-flex', children: [jsx("div", { className: 'ws3', children: jsx(Badge, { variant: variant, children: variant }) }), jsx("div", { className: 'ws3 ml32', children: jsx(Badge, { variant: variant, showDot: true, children: variant }) })] }, variant)); }) })); };
+var sizes = ['xsmall', 'small', 'medium', 'large'];
+var Sizes = function () { return (jsx("div", { className: 'd-flex fd-column gap16', children: sizes.map(function (size) { return (jsxs("div", { className: 'd-flex', children: [jsx("div", { className: 'ws3', children: jsx(Badge, { size: size, children: size }) }), jsx("div", { className: 'ws3 ml32', children: jsx(Badge, { size: size, showDot: true, children: size }) })] }, size)); }) })); };
+BadgeStory.storyName = "Badge";
 
 export default story;
-export { BadgeStory };
+export { BadgeStory, Sizes, Variants };
 //# sourceMappingURL=index.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/badge/index.stories.tsx"],"sourcesContent":["import { Badge, BadgeProps } from '.';\n\nconst story = {\n  title: 'JSX/Badge',\n  component: Badge,\n  argTypes: {\n    children: {\n      control: 'text',\n      description: 'Content that is displayed inside the badge',\n    },\n    className: {\n      description: 'Class name for the most parent element',\n      control: 'text'\n    },\n    size: {\n      description: 'Define the size of the badge',\n    },\n    variant: {\n      description: 'Variant that defines the style of the Badge',\n    },\n  },\n  args: {\n    children: 'Value',\n    className: '',\n    size: 'medium',\n    variant: 'information',\n  }\n};\n \nexport const BadgeStory = ({\n  children,\n  className,\n  size,\n  variant,\n}: BadgeProps) => (\n  <Badge\n    className={className}\n    size={size}\n    variant={variant}\n  >\n    {children}\n  </Badge>\n);\n\nBadgeStory.storyName = \"Badge\";\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;IAEM,KAAK,GAAG;IACZ,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,4CAA4C;SAC1D;QACD,SAAS,EAAE;YACT,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE,MAAM;SAChB;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,8BAA8B;SAC5C;QACD,OAAO,EAAE;YACP,WAAW,EAAE,6CAA6C;SAC3D;KACF;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,OAAO;QACjB,SAAS,EAAE,EAAE;QACb,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE,aAAa;KACvB;EACD;IAEW,UAAU,GAAG,UAAC,EAKd;QAJX,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,OAAO,aAAA;IACS,QAChBA,IAAC,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,YAEf,QAAQ,GACH;AAPQ,EAQhB;AAEF,UAAU,CAAC,SAAS,GAAG,OAAO;;;;;"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/badge/index.stories.tsx"],"sourcesContent":["import { Badge, BadgeProps } from '.';\n\nconst story = {\n  title: 'JSX/Badge',\n  component: Badge,\n  argTypes: {\n    children: {\n      control: 'text',\n      description: 'Content that is displayed inside the badge',\n    },\n    className: {\n      description: 'Class name for the most parent element',\n      control: 'text'\n    },\n    size: {\n      description: 'Define the size of the badge',\n    },\n    variant: {\n      description: 'Variant that defines the style of the Badge',\n    },\n    showDot: {\n      description: 'Whether to show a dot indicator',\n    }\n  },\n  args: {\n    children: 'Value',\n    className: '',\n    size: 'medium',\n    variant: 'information',\n    showDot: false\n  }\n};\n \nexport const BadgeStory = ({\n  children,\n  className,\n  size,\n  variant,\n  showDot,\n}: BadgeProps) => (\n  <Badge\n    className={className}\n    size={size}\n    variant={variant}\n    showDot={showDot}\n  >\n    {children}\n  </Badge>\n);\n\nBadgeStory.storyName = \"Badge\";\n\nconst variants: BadgeProps['variant'][] = [\n  'white',\n  'neutral',\n  'neutralStrong',\n  'information',\n  'warning',\n  'primary',\n  'error',\n  'success',\n  'secondary',\n  'secondaryStrong',\n  'black',\n];\n\nexport const Variants = () => (\n  <div className='d-flex fd-column gap16'>\n    {variants.map((variant) => (\n      <div key={variant} className='d-flex'>\n        <div className='ws3'>\n          <Badge variant={variant}>\n            {variant}\n          </Badge>\n        </div>\n        <div className='ws3 ml32'>\n          <Badge\n            variant={variant}\n            showDot\n          >\n            {variant}\n          </Badge>\n        </div>\n      </div>\n    ))}\n  </div>\n);\n\nconst sizes: BadgeProps['size'][] = ['xsmall', 'small', 'medium', 'large'];\n\nexport const Sizes = () => (\n  <div className='d-flex fd-column gap16'>\n    {sizes.map((size) => (\n      <div key={size} className='d-flex'>\n        <div className='ws3'>\n          <Badge size={size}>\n            {size}\n          </Badge>\n        </div>\n        <div className='ws3 ml32'>\n          <Badge size={size} showDot>\n            {size}\n          </Badge>\n        </div>\n      </div>\n    ))}\n  </div>\n);\n\nBadgeStory.storyName = \"Badge\";\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;IAEM,KAAK,GAAG;IACZ,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,4CAA4C;SAC1D;QACD,SAAS,EAAE;YACT,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE,MAAM;SAChB;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,8BAA8B;SAC5C;QACD,OAAO,EAAE;YACP,WAAW,EAAE,6CAA6C;SAC3D;QACD,OAAO,EAAE;YACP,WAAW,EAAE,iCAAiC;SAC/C;KACF;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,OAAO;QACjB,SAAS,EAAE,EAAE;QACb,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE,aAAa;QACtB,OAAO,EAAE,KAAK;KACf;EACD;IAEW,UAAU,GAAG,UAAC,EAMd;QALX,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,OAAO,aAAA;IACS,QAChBA,IAAC,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,YAEf,QAAQ,GACH;AARQ,EAShB;AAEF,UAAU,CAAC,SAAS,GAAG,OAAO,CAAC;AAE/B,IAAM,QAAQ,GAA4B;IACxC,OAAO;IACP,SAAS;IACT,eAAe;IACf,aAAa;IACb,SAAS;IACT,SAAS;IACT,OAAO;IACP,SAAS;IACT,WAAW;IACX,iBAAiB;IACjB,OAAO;CACR,CAAC;IAEW,QAAQ,GAAG,cAAM,QAC5BA,aAAK,SAAS,EAAC,wBAAwB,YACpC,QAAQ,CAAC,GAAG,CAAC,UAAC,OAAO,IAAK,QACzBC,cAAmB,SAAS,EAAC,QAAQ,aACnCD,aAAK,SAAS,EAAC,KAAK,YAClBA,IAAC,KAAK,IAAC,OAAO,EAAE,OAAO,YACpB,OAAO,GACF,GACJ,EACNA,aAAK,SAAS,EAAC,UAAU,YACvBA,IAAC,KAAK,IACJ,OAAO,EAAE,OAAO,EAChB,OAAO,kBAEN,OAAO,GACF,GACJ,KAbE,OAAO,CAcX,IACP,CAAC,GACE,KACN;AAEF,IAAM,KAAK,GAAyB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;IAE9D,KAAK,GAAG,cAAM,QACzBA,aAAK,SAAS,EAAC,wBAAwB,YACpC,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,QACnBC,cAAgB,SAAS,EAAC,QAAQ,aAChCD,aAAK,SAAS,EAAC,KAAK,YAClBA,IAAC,KAAK,IAAC,IAAI,EAAE,IAAI,YACd,IAAI,GACC,GACJ,EACNA,aAAK,SAAS,EAAC,UAAU,YACvBA,IAAC,KAAK,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,kBACvB,IAAI,GACC,GACJ,KAVE,IAAI,CAWR,IACP,CAAC,GACE,KACN;AAEF,UAAU,CAAC,SAAS,GAAG,OAAO;;;;;"}

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

@@ -2,7 +2,7 @@ import { a as __assign } from '../../tslib.es6-a39f91fc.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { TableCell } from './components/TableCell/TableCell.js';
 import { BottomOrRegularModal } from '../modal/bottomOrRegularModal/index.js';
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import ChevronDownIcon from '../icon/icons/ChevronDown.js';
 import ChevronUpIcon from '../icon/icons/ChevronUp.js';
 import { Card } from '../cards/card/index.js';
@@ -10,7 +10,7 @@ import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
 import { u as useMediaQuery } from '../../useMediaQuery-1a3a2432.js';
 import { TableContents } from './components/TableContents/TableContents.js';
 import { c as classNames } from '../../index-6ea95111.js';
-import { u as useTableNavigation } from '../../useTableNavigation-f929fbc9.js';
+import { u as useTableNavigation } from '../../useTableNavigation-17d5cd3c.js';
 import { TableControls } from './components/TableControls/TableControls.js';
 import { i as isBaseCell, T as TableSection } from '../../TableSection-65e88f87.js';
 import { u as useScrollSync } from '../../useScrollSync-b2d28bed.js';
@@ -50,7 +50,7 @@ var defaultTextOverrides = {
 };
 var Table = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j;
-    var cellReplacements = _a.cellReplacements, className = _a.className, collapsibleSections = _a.collapsibleSections, _k = _a.hideColumns, hideColumns = _k === void 0 ? [] : _k, hideDetails = _a.hideDetails, _l = _a.hideRows, hideRows = _l === void 0 ? [] : _l, imageComponent = _a.imageComponent, modalContentRenderer = _a.modalContentRenderer, onModalOpen = _a.onModalOpen, onSelectionChanged = _a.onSelectionChanged, _m = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _m === void 0 ? 0 : _m, tableData = _a.tableData, definedTextOverrides = _a.textOverrides, title = _a.title;
+    var cellReplacements = _a.cellReplacements, className = _a.className, collapsibleSections = _a.collapsibleSections, _k = _a.hideColumns, hideColumns = _k === void 0 ? [] : _k, hideDetails = _a.hideDetails, _l = _a.hideRows, hideRows = _l === void 0 ? [] : _l, imageComponent = _a.imageComponent, modalContentRenderer = _a.modalContentRenderer, onModalOpen = _a.onModalOpen, onSelectionChanged = _a.onSelectionChanged, _m = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _m === void 0 ? 0 : _m, tableData = _a.tableData, definedTextOverrides = _a.textOverrides, title = _a.title, externalActiveSection = _a.activeSection;
     var textOverrides = __assign(__assign({}, defaultTextOverrides), definedTextOverrides);
     var isMobile = useMediaQuery('BELOW_MOBILE');
     var _o = useState(null), infoModalData = _o[0], setInfoModalData = _o[1];
@@ -63,7 +63,7 @@ var Table = function (_a) {
         enabled: isMobile,
         containerRef: containerRef,
         onSelectionChanged: onSelectionChanged,
-    }), activeSection = _q.activeSection, navigateTable = _q.navigateTable;
+    }), activeSection = _q.activeSection, navigateTable = _q.navigateTable, setActiveSection = _q.setActiveSection;
     var titleCell = __assign({ text: '' }, ((_d = (_c = (_b = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _b === void 0 ? void 0 : _b.rows) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d[0]) || {});
     var currentActiveSection = (_g = (_f = (_e = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _e === void 0 ? void 0 : _e.rows) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g[activeSection];
     var currentActiveSectionReplacements = (currentActiveSection.cellId &&
@@ -75,6 +75,11 @@ var Table = function (_a) {
         onModalOpen === null || onModalOpen === void 0 ? void 0 : onModalOpen({ body: body, title: title });
         setInfoModalData({ body: body, title: title });
     }, []);
+    useEffect(function () {
+        if (externalActiveSection && externalActiveSection !== activeSection) {
+            setActiveSection(externalActiveSection - 1);
+        }
+    }, [externalActiveSection]);
     return (jsxs("div", { className: classNames(styles.wrapper, 'bg-white'), children: [isMobile ? (jsxs(Fragment, { children: [(titleCell === null || titleCell === void 0 ? void 0 : titleCell.text) && (jsx(TableCell, __assign({}, titleCell, { align: 'left', isNavigation: true, isTopLeftCell: true, type: undefined }))), jsx(TableControls, { activeSection: activeSection, columnsLength: columnsLength, navigateTable: navigateTable, stickyHeaderTopOffset: stickyHeaderTopOffset, children: jsx(TableCell, __assign({}, (isBaseCell(currentActiveSection)
                             ? {
                                 openModal: function (body) {

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: classNames(styles.cardButton, 'm8 mt32'),\n            title: 'd-flex gap8 ai-center jc-center fw-bold',\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=\"xsmall\"\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, useEffect, 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  activeSection?: number;\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  activeSection: externalActiveSection\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, setActiveSection } = 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  useEffect(() => {\n    if (externalActiveSection && externalActiveSection !== activeSection) {\n      setActiveSection(externalActiveSection - 1);\n    }\n  }, [externalActiveSection]);\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: classNames(styles.cardButton, 'm8 mt32'),\n            title: 'd-flex gap8 ai-center jc-center fw-bold',\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=\"xsmall\"\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

@@ -39,7 +39,7 @@ import '../../useMediaQuery-1a3a2432.js';
 import './components/TableContents/TableContents.js';
 import '../../TableSection-65e88f87.js';
 import './components/TableContents/Collapsible.js';
-import '../../useTableNavigation-f929fbc9.js';
+import '../../useTableNavigation-17d5cd3c.js';
 import './components/TableControls/TableControls.js';
 import '../icon/icons/ChevronLeft.js';
 import '../../useScrollSync-b2d28bed.js';
@@ -289,7 +289,7 @@ var story = {
     },
 };
 var TableStory = function (_a) {
-    var collapsibleSections = _a.collapsibleSections, tableData = _a.tableData, hideColumns = _a.hideColumns, hideDetails = _a.hideDetails, hideRows = _a.hideRows, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, textOverrides = _a.textOverrides, title = _a.title;
+    var collapsibleSections = _a.collapsibleSections, tableData = _a.tableData, hideColumns = _a.hideColumns, hideDetails = _a.hideDetails, hideRows = _a.hideRows, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, textOverrides = _a.textOverrides, title = _a.title, activeSection = _a.activeSection;
     var _b = useState(999), price = _b[0], setPrice = _b[1];
     return (jsxs("div", { children: [jsxs("div", { className: "d-flex fd-column p24 mb80 gap16 wmx5", children: [jsx("label", { htmlFor: "", children: "Change price to see replacement in action: " }), jsx(Input, { id: "#stuff", type: "text", onChange: function (e) { return setPrice(Number(e.target.value)); }, value: price })] }), jsx(Table, { cellReplacements: {
                     '#1': {
@@ -306,7 +306,7 @@ var TableStory = function (_a) {
                     '#3': {
                         description: 'per year',
                     },
-                }, collapsibleSections: collapsibleSections, tableData: tableData, hideColumns: hideColumns, hideDetails: hideDetails, hideRows: hideRows, stickyHeaderTopOffset: stickyHeaderTopOffset, textOverrides: textOverrides, title: title })] }));
+                }, collapsibleSections: collapsibleSections, tableData: tableData, hideColumns: hideColumns, hideDetails: hideDetails, hideRows: hideRows, stickyHeaderTopOffset: stickyHeaderTopOffset, textOverrides: textOverrides, title: title, activeSection: activeSection })] }));
 };
 var TableDataType = function () {
     return (jsx("pre", { children: "\ntype TableData = {\n  section?: \n    title?: string;\n    icon?: ReactNode;\n  };\n  rows: {\n    align?: 'center' | 'left' | 'right';\n    checkmarkValue?: boolean;\n    text?: ReactNode;\n    modalContent?: ReactNode;\n    subContent?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    openModal?: (modalContent: ReactNode) => void;\n  }[][];\n}[];\n      " }));

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

@@ -1 +1 @@
-{"version":3,"file":"Table.stories.js","sources":["../../../../../src/lib/components/table/Table.stories.tsx"],"sourcesContent":["import { Table, TableProps } from './Table';\nimport { DentalPlusIcon, PlaneIcon } from '../icon';\nimport { TableData } from './types';\nimport { useState } from 'react';\nimport { Input } from '../input';\n\nconst initialData: TableData = [\n  {\n    rows: [\n      [\n        { text: 'Our plans' },\n        {\n          type: 'CTA',\n          icon: 'https://placehold.co/24x24/orange/white',\n          title: 'Standard',\n          price: '€234',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          icon: 'https://placehold.co/24x24/green/white',\n          title: 'Plus',\n          price: '€344',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          icon: <PlaneIcon size={24} noMargin />,\n          title: 'Premium',\n          price: '€556',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n      ],\n      [\n        { text: 'Select a plan' },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Standard',\n          price: '€234',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Plus',\n          price: '€344',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Premium',\n          price: '€556',\n          onClick: () => {},\n        },\n      ],\n      [\n        {\n          text: 'Your contribution',\n        },\n        {\n          cellId: '#1',\n          text: '€210',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n        {\n          cellId: '#2',\n          text: '€275',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n        {\n          cellId: '#3',\n          text: '€310',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n      ],\n      [\n        {\n          text: 'Regular vet visits & medication',\n          description: 'Pflegepflichtversicherungrightno',\n          modalContent: 'Some stories about vets',\n        },\n        { text: 'No', description: 'Annual Only' },\n        { text: '50%' },\n        { text: '80%-100%' },\n      ],\n      [\n        { text: 'Operations',\n          modalContent: 'Operations info',\n          modalTitle: 'Custom operations modal title'\n         },\n        { \n          checkmarkValue: true,\n          modalContent: 'Operations info column 2',\n          modalTitle: 'Custom operations modal title column 2'\n        },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'Rating info' },\n        { rating: { type: 'zap', value: 1 } },\n        {\n          rating: { type: 'zap', value: 3 },\n          modalContent: 'Rating info column 3',\n        },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n  {\n    section: {\n      icon: <DentalPlusIcon size={20} noMargin />,\n      title: 'Dental',\n    },\n    rows: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No' },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'info' },\n        {\n          text: 'This is a table cell with a lot of text',\n          modalContent: 'Maybe',\n        },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'info' },\n        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n      [\n        {\n          type: 'CARD',\n          colSpan: 3,\n          title: 'Dental add-on',\n          href: 'https://example.com',\n          icon: 'https://placehold.co/24x24/green/yellow',\n          description:\n            'Get your dental cleanings and additional treatments covered for just 10.90€ a month.',\n        },\n      ],\n    ],\n  },\n  {\n    section: {\n      title: 'Travel',\n      icon: 'https://placehold.co/24x24/red/yellow',\n    },\n    rows: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No', checkmarkValue: false },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'info' },\n        {\n          checkmarkValue: true,\n          modalContent: 'Maybe',\n          description: 'This is a table cell with a long subtitle',\n        },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'info' },\n        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n];\n\nconst story = {\n  title: 'JSX/Table',\n  component: Table,\n  argTypes: {\n    tableData: {\n      subContent:\n        'This property allows to set the data of the Table component.',\n    },\n    title: {\n      subContent:\n        'This property allows to add a title to the Table component for accessibility purposes.',\n    },\n    collapsibleSections: {\n      subContent: 'This property allows to collapse the sections of the table.',\n    },\n    hideDetails: {\n      subContent: 'This property allows to hide the details of the table.',\n    },\n    stickyHeaderTopOffset: {\n      subContent:\n        'This property allows to set the offset of the sticky header.',\n    },\n    className: {\n      subContent:\n        'This property allows to set a custom class to the Table component.',\n    },\n    textOverrides: {\n      subContent:\n        'This property allows to set custom text for the show and hide details buttons.',\n    },\n    hideColumns: {\n      subContent: 'This property allows to hide defined columns by index.',\n    },\n    hideRows: {\n      subContent: 'This property allows to hide selected rows by index.',\n    },\n    modalContentRenderer: {\n      subContent: 'This property allows to render custom modal content.',\n    },\n    onSelectionChanged: {\n      subContent:\n        'This event is triggered when a selection is changed. It receives the index of the selection as an argument.',\n      table: {\n        category: 'Events',\n      },\n    },\n    onModalOpen: {\n      subContent:\n        'This event is triggered when a modal is opened. It receives the title and body of the modal as arguments.',\n      table: {\n        category: 'Events',\n      },\n    },\n  },\n  args: {\n    tableData: initialData,\n    collapsibleSections: false,\n    hideDetails: false,\n    stickyHeaderTopOffset: 0,\n    title: 'Title of the table',\n    className: '',\n    textOverrides: {\n      showDetails: 'Show details',\n      hideDetails: 'Hide details',\n    },\n    hideColumns: [],\n    hideRows: [],\n  },\n};\n\nexport const TableStory = ({\n  collapsibleSections,\n  tableData,\n  hideColumns,\n  hideDetails,\n  hideRows,\n  stickyHeaderTopOffset,\n  textOverrides,\n  title,\n}: TableProps) => {\n  const [price, setPrice] = useState(999);\n  return (\n    <div>\n      <div className=\"d-flex fd-column p24 mb80 gap16 wmx5\">\n        <label htmlFor=\"\">Change price to see replacement in action: </label>\n        <Input\n          id=\"#stuff\"\n          type=\"text\"\n          onChange={(e) => setPrice(Number(e.target.value))}\n          value={price}\n        />\n      </div>\n\n      <Table\n        cellReplacements={{\n          '#1': {\n            type: 'CTA',\n            title: 'Replaced!',\n            price: `€${price}`,\n            buttonCaption: 'I got replaced',\n            href: 'http://example.com',\n          },\n          '#2': {\n            type: 'BUTTON',\n            buttonCaption: 'I got replaced too',\n          },\n          '#3': {\n            description: 'per year',\n          },\n        }}\n        collapsibleSections={collapsibleSections}\n        tableData={tableData}\n        hideColumns={hideColumns}\n        hideDetails={hideDetails}\n        hideRows={hideRows}\n        stickyHeaderTopOffset={stickyHeaderTopOffset}\n        textOverrides={textOverrides}\n        title={title}\n      />\n    </div>\n  );\n};\n\nexport const TableDataType = () => {\n  return (\n    <pre>\n      {`\ntype TableData = {\n  section?: \n    title?: string;\n    icon?: ReactNode;\n  };\n  rows: {\n    align?: 'center' | 'left' | 'right';\n    checkmarkValue?: boolean;\n    text?: ReactNode;\n    modalContent?: ReactNode;\n    subContent?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    openModal?: (modalContent: ReactNode) => void;\n  }[][];\n}[];\n      `}\n    </pre>\n  );\n};\n\nTableStory.storyName = 'Table';\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Table.stories.js","sources":["../../../../../src/lib/components/table/Table.stories.tsx"],"sourcesContent":["import { Table, TableProps } from './Table';\nimport { DentalPlusIcon, PlaneIcon } from '../icon';\nimport { TableData } from './types';\nimport { useState } from 'react';\nimport { Input } from '../input';\n\nconst initialData: TableData = [\n  {\n    rows: [\n      [\n        { text: 'Our plans' },\n        {\n          type: 'CTA',\n          icon: 'https://placehold.co/24x24/orange/white',\n          title: 'Standard',\n          price: '€234',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          icon: 'https://placehold.co/24x24/green/white',\n          title: 'Plus',\n          price: '€344',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          icon: <PlaneIcon size={24} noMargin />,\n          title: 'Premium',\n          price: '€556',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n      ],\n      [\n        { text: 'Select a plan' },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Standard',\n          price: '€234',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Plus',\n          price: '€344',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Premium',\n          price: '€556',\n          onClick: () => {},\n        },\n      ],\n      [\n        {\n          text: 'Your contribution',\n        },\n        {\n          cellId: '#1',\n          text: '€210',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n        {\n          cellId: '#2',\n          text: '€275',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n        {\n          cellId: '#3',\n          text: '€310',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n      ],\n      [\n        {\n          text: 'Regular vet visits & medication',\n          description: 'Pflegepflichtversicherungrightno',\n          modalContent: 'Some stories about vets',\n        },\n        { text: 'No', description: 'Annual Only' },\n        { text: '50%' },\n        { text: '80%-100%' },\n      ],\n      [\n        { text: 'Operations',\n          modalContent: 'Operations info',\n          modalTitle: 'Custom operations modal title'\n         },\n        { \n          checkmarkValue: true,\n          modalContent: 'Operations info column 2',\n          modalTitle: 'Custom operations modal title column 2'\n        },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'Rating info' },\n        { rating: { type: 'zap', value: 1 } },\n        {\n          rating: { type: 'zap', value: 3 },\n          modalContent: 'Rating info column 3',\n        },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n  {\n    section: {\n      icon: <DentalPlusIcon size={20} noMargin />,\n      title: 'Dental',\n    },\n    rows: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No' },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'info' },\n        {\n          text: 'This is a table cell with a lot of text',\n          modalContent: 'Maybe',\n        },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'info' },\n        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n      [\n        {\n          type: 'CARD',\n          colSpan: 3,\n          title: 'Dental add-on',\n          href: 'https://example.com',\n          icon: 'https://placehold.co/24x24/green/yellow',\n          description:\n            'Get your dental cleanings and additional treatments covered for just 10.90€ a month.',\n        },\n      ],\n    ],\n  },\n  {\n    section: {\n      title: 'Travel',\n      icon: 'https://placehold.co/24x24/red/yellow',\n    },\n    rows: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No', checkmarkValue: false },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'info' },\n        {\n          checkmarkValue: true,\n          modalContent: 'Maybe',\n          description: 'This is a table cell with a long subtitle',\n        },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'info' },\n        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n];\n\nconst story = {\n  title: 'JSX/Table',\n  component: Table,\n  argTypes: {\n    tableData: {\n      subContent:\n        'This property allows to set the data of the Table component.',\n    },\n    title: {\n      subContent:\n        'This property allows to add a title to the Table component for accessibility purposes.',\n    },\n    collapsibleSections: {\n      subContent: 'This property allows to collapse the sections of the table.',\n    },\n    hideDetails: {\n      subContent: 'This property allows to hide the details of the table.',\n    },\n    stickyHeaderTopOffset: {\n      subContent:\n        'This property allows to set the offset of the sticky header.',\n    },\n    className: {\n      subContent:\n        'This property allows to set a custom class to the Table component.',\n    },\n    textOverrides: {\n      subContent:\n        'This property allows to set custom text for the show and hide details buttons.',\n    },\n    hideColumns: {\n      subContent: 'This property allows to hide defined columns by index.',\n    },\n    hideRows: {\n      subContent: 'This property allows to hide selected rows by index.',\n    },\n    modalContentRenderer: {\n      subContent: 'This property allows to render custom modal content.',\n    },\n    onSelectionChanged: {\n      subContent:\n        'This event is triggered when a selection is changed. It receives the index of the selection as an argument.',\n      table: {\n        category: 'Events',\n      },\n    },\n    onModalOpen: {\n      subContent:\n        'This event is triggered when a modal is opened. It receives the title and body of the modal as arguments.',\n      table: {\n        category: 'Events',\n      },\n    },\n  },\n  args: {\n    tableData: initialData,\n    collapsibleSections: false,\n    hideDetails: false,\n    stickyHeaderTopOffset: 0,\n    title: 'Title of the table',\n    className: '',\n    textOverrides: {\n      showDetails: 'Show details',\n      hideDetails: 'Hide details',\n    },\n    hideColumns: [],\n    hideRows: [],\n  },\n};\n\nexport const TableStory = ({\n  collapsibleSections,\n  tableData,\n  hideColumns,\n  hideDetails,\n  hideRows,\n  stickyHeaderTopOffset,\n  textOverrides,\n  title,\n  activeSection,\n}: TableProps) => {\n  const [price, setPrice] = useState(999);\n  return (\n    <div>\n      <div className=\"d-flex fd-column p24 mb80 gap16 wmx5\">\n        <label htmlFor=\"\">Change price to see replacement in action: </label>\n        <Input\n          id=\"#stuff\"\n          type=\"text\"\n          onChange={(e) => setPrice(Number(e.target.value))}\n          value={price}\n        />\n      </div>\n\n      <Table\n        cellReplacements={{\n          '#1': {\n            type: 'CTA',\n            title: 'Replaced!',\n            price: `€${price}`,\n            buttonCaption: 'I got replaced',\n            href: 'http://example.com',\n          },\n          '#2': {\n            type: 'BUTTON',\n            buttonCaption: 'I got replaced too',\n          },\n          '#3': {\n            description: 'per year',\n          },\n        }}\n        collapsibleSections={collapsibleSections}\n        tableData={tableData}\n        hideColumns={hideColumns}\n        hideDetails={hideDetails}\n        hideRows={hideRows}\n        stickyHeaderTopOffset={stickyHeaderTopOffset}\n        textOverrides={textOverrides}\n        title={title}\n        activeSection={activeSection}\n      />\n    </div>\n  );\n};\n\nexport const TableDataType = () => {\n  return (\n    <pre>\n      {`\ntype TableData = {\n  section?: \n    title?: string;\n    icon?: ReactNode;\n  };\n  rows: {\n    align?: 'center' | 'left' | 'right';\n    checkmarkValue?: boolean;\n    text?: ReactNode;\n    modalContent?: ReactNode;\n    subContent?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    openModal?: (modalContent: ReactNode) => void;\n  }[][];\n}[];\n      `}\n    </pre>\n  );\n};\n\nTableStory.storyName = 'Table';\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -39,7 +39,7 @@ import '../../useMediaQuery-1a3a2432.js';
 import './components/TableContents/TableContents.js';
 import '../../TableSection-65e88f87.js';
 import './components/TableContents/Collapsible.js';
-import '../../useTableNavigation-f929fbc9.js';
+import '../../useTableNavigation-17d5cd3c.js';
 import './components/TableControls/TableControls.js';
 import '../icon/icons/ChevronLeft.js';
 import '../../useScrollSync-b2d28bed.js';

package/dist/esm/components/table/utils/useTableNavigation/useTableNavigation.test.js

@@ -1,5 +1,5 @@
 import { l as lib } from '../../../../index-e45b0af1.js';
-import { u as useTableNavigation } from '../../../../useTableNavigation-f929fbc9.js';
+import { u as useTableNavigation } from '../../../../useTableNavigation-17d5cd3c.js';
 import '../../../../_commonjsHelpers-4730bd53.js';
 import '../../../../index-5e72c3d4.js';
 import 'react';

package/dist/esm/index.js

@@ -468,7 +468,7 @@ import './components/table/components/TableCell/ButtonCell/ButtonCell.js';
 import './components/table/components/TableContents/TableContents.js';
 import './TableSection-65e88f87.js';
 import './components/table/components/TableContents/Collapsible.js';
-import './useTableNavigation-f929fbc9.js';
+import './useTableNavigation-17d5cd3c.js';
 import './components/table/components/TableControls/TableControls.js';
 import './useScrollSync-b2d28bed.js';
 import './components/logo/LogoWrapper/LogoWrapper.js';

package/dist/esm/lib/components/badge/index.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
-type Variant = 'warning' | 'error' | 'success' | 'information' | 'neutral' | 'neutral200' | 'neutral300' | 'primary' | 'primary900';
+type Variant = 'white' | 'neutral' | 'neutralStrong' | 'information' | 'warning' | 'primary' | 'error' | 'success' | 'black' | 'secondary' | 'secondaryStrong';
 export interface BadgeProps {
     className?: string;
     variant?: Variant;
-    size?: 'small' | 'medium' | 'large';
+    size?: 'xsmall' | 'small' | 'medium' | 'large';
     children: ReactNode;
+    showDot?: boolean;
 }
-declare const Badge: ({ className, size, variant, children, }: BadgeProps) => JSX.Element;
+declare const Badge: ({ className, size, variant, children, showDot }: BadgeProps) => JSX.Element;
 export { Badge };

package/dist/esm/lib/components/badge/index.stories.d.ts

@@ -1,7 +1,7 @@
 import { BadgeProps } from '.';
 declare const story: {
     title: string;
-    component: ({ className, size, variant, children, }: BadgeProps) => JSX.Element;
+    component: ({ className, size, variant, children, showDot }: BadgeProps) => JSX.Element;
     argTypes: {
         children: {
             control: string;
@@ -17,16 +17,22 @@ declare const story: {
         variant: {
             description: string;
         };
+        showDot: {
+            description: string;
+        };
     };
     args: {
         children: string;
         className: string;
         size: string;
         variant: string;
+        showDot: boolean;
     };
 };
 export declare const BadgeStory: {
-    ({ children, className, size, variant, }: BadgeProps): JSX.Element;
+    ({ children, className, size, variant, showDot, }: BadgeProps): JSX.Element;
     storyName: string;
 };
+export declare const Variants: () => JSX.Element;
+export declare const Sizes: () => JSX.Element;
 export default story;

package/dist/esm/lib/components/table/Table.d.ts

@@ -19,6 +19,7 @@ export interface TableProps {
     tableData: TableData;
     textOverrides?: TextOverrides;
     title: string;
+    activeSection?: number;
 }
-declare const Table: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
+declare const Table: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection }: TableProps) => JSX.Element;
 export { Table };

package/dist/esm/lib/components/table/Table.stories.d.ts

@@ -2,7 +2,7 @@ import { TableProps } from './Table';
 import { TableData } from './types';
 declare const story: {
     title: string;
-    component: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
+    component: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection }: TableProps) => JSX.Element;
     argTypes: {
         tableData: {
             subContent: string;
@@ -63,7 +63,7 @@ declare const story: {
     };
 };
 export declare const TableStory: {
-    ({ collapsibleSections, tableData, hideColumns, hideDetails, hideRows, stickyHeaderTopOffset, textOverrides, title, }: TableProps): JSX.Element;
+    ({ collapsibleSections, tableData, hideColumns, hideDetails, hideRows, stickyHeaderTopOffset, textOverrides, title, activeSection, }: TableProps): JSX.Element;
     storyName: string;
 };
 export declare const TableDataType: () => JSX.Element;

package/dist/esm/lib/components/table/utils/useTableNavigation/useTableNavigation.d.ts

@@ -2,6 +2,7 @@
 interface UseTableNavigationReturn {
     activeSection: number;
     navigateTable: (increase?: boolean) => void;
+    setActiveSection: (section: number) => void;
 }
 interface UseTableNavigationProps {
     containerRef: React.RefObject<HTMLElement>;

package/dist/esm/{useTableNavigation-f929fbc9.js → useTableNavigation-17d5cd3c.js}

@@ -47,8 +47,9 @@ var useTableNavigation = function (_a) {
     return {
         activeSection: activeSection + 1,
         navigateTable: handleScrollToSection,
+        setActiveSection: setActiveSection,
     };
 };
 
 export { useTableNavigation as u };
-//# sourceMappingURL=useTableNavigation-f929fbc9.js.map
+//# sourceMappingURL=useTableNavigation-17d5cd3c.js.map

package/dist/esm/useTableNavigation-17d5cd3c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableNavigation-17d5cd3c.js","sources":["../../../src/lib/components/table/utils/useTableNavigation/useTableNavigation.ts"],"sourcesContent":["import debounce from \"lodash.debounce\";\nimport { useCallback, useEffect, useState } from \"react\";\n\ninterface UseTableNavigationReturn {\n  activeSection: number;\n  navigateTable: (increase?: boolean) => void;\n  setActiveSection: (section: number) => void;\n}\n\ninterface UseTableNavigationProps {\n  containerRef: React.RefObject<HTMLElement>,\n  enabled?: boolean,\n  onSelectionChanged?: (index: number) => void\n}\n\nexport const useTableNavigation = ({\n  enabled,\n  containerRef,\n  onSelectionChanged\n}: UseTableNavigationProps): UseTableNavigationReturn => {\n  const [activeSection, setActiveSection] = useState(0);\n\n  const handleScrollToSection = (increase?: boolean) => {\n    if (!enabled) {\n      return;\n    }\n\n    setActiveSection((prevSection) => \n      prevSection + (increase ? 1 : -1)\n    );\n  };\n\n  const handleTableScroll = useCallback(() => {\n    if (!containerRef.current || !enabled) {\n      return;\n    }\n\n    const containerWidth = containerRef.current.getBoundingClientRect().width;\n    const scrollLeft = containerRef.current.scrollLeft * 1.1;\n    const cellWidth = containerWidth / 2;\n\n    setActiveSection(Math.floor(scrollLeft / cellWidth));\n   }, [activeSection, containerRef, enabled]);\n\n  const debouncedTableScroll = debounce(handleTableScroll, 150);\n\n  useEffect(() => {\n    const container = containerRef.current;\n\n    container?.addEventListener('scroll', debouncedTableScroll, {\n      passive: true,\n    });\n\n    return container?.removeEventListener('scroll', handleTableScroll);\n  }, [enabled]);\n\n  useEffect(() => {\n    if (!enabled) {\n      return\n    }\n\n    onSelectionChanged?.(activeSection + 1);\n\n    if (containerRef.current) {\n      const containerWidth = containerRef.current.getBoundingClientRect().width;\n      const cellWidth = containerWidth / 2;\n\n      containerRef.current.scroll({\n        top: 0,\n        left: cellWidth * activeSection,\n        behavior: 'smooth',\n      });\n    }\n  }, [enabled, activeSection]);\n\n  return {\n    activeSection: activeSection + 1,\n    navigateTable: handleScrollToSection,\n    setActiveSection,\n  }\n}"],"names":["debounce"],"mappings":";;;IAea,kBAAkB,GAAG,UAAC,EAIT;QAHxB,OAAO,aAAA,EACP,YAAY,kBAAA,EACZ,kBAAkB,wBAAA;IAEZ,IAAA,KAAoC,QAAQ,CAAC,CAAC,CAAC,EAA9C,aAAa,QAAA,EAAE,gBAAgB,QAAe,CAAC;IAEtD,IAAM,qBAAqB,GAAG,UAAC,QAAkB;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QAED,gBAAgB,CAAC,UAAC,WAAW;YAC3B,OAAA,WAAW,IAAI,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;SAAA,CAClC,CAAC;KACH,CAAC;IAEF,IAAM,iBAAiB,GAAG,WAAW,CAAC;QACpC,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;YACrC,OAAO;SACR;QAED,IAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAC1E,IAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,UAAU,GAAG,GAAG,CAAC;QACzD,IAAM,SAAS,GAAG,cAAc,GAAG,CAAC,CAAC;QAErC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC;KACrD,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5C,IAAM,oBAAoB,GAAGA,eAAQ,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC;IAE9D,SAAS,CAAC;QACR,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QAEvC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,EAAE;YAC1D,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QAEH,OAAO,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC;KACpE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC;QACR,IAAI,CAAC,OAAO,EAAE;YACZ,OAAM;SACP;QAED,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,aAAa,GAAG,CAAC,CAAC,CAAC;QAExC,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,IAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAC1E,IAAM,SAAS,GAAG,cAAc,GAAG,CAAC,CAAC;YAErC,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC;gBAC1B,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,SAAS,GAAG,aAAa;gBAC/B,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;SACJ;KACF,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAE7B,OAAO;QACL,aAAa,EAAE,aAAa,GAAG,CAAC;QAChC,aAAa,EAAE,qBAAqB;QACpC,gBAAgB,kBAAA;KACjB,CAAA;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.59.1",
+  "version": "0.60.1",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,