@popsure/dirty-swan 0.53.3 → 0.54.0

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

@@ -0,0 +1,76 @@
+import { a as __assign } from '../../tslib.es6-a39f91fc.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { TableCell } from './components/TableCell/TableCell.js';
+import { BottomOrRegularModal } from '../modal/bottomOrRegularModal/index.js';
+import { useState, useRef } from 'react';
+import ChevronDownIcon from '../icon/icons/ChevronDown.js';
+import ChevronUpIcon from '../icon/icons/ChevronUp.js';
+import { Card } from '../cards/card/index.js';
+import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
+import { u as useMediaQuery } from '../../Collapsible-ac67187a.js';
+import { TableSection } from './components/TableSection/TableSection.js';
+import { c as classNames } from '../../index-6ea95111.js';
+import { u as useTableNavigation } from '../../useTableNavigation-8e50b121.js';
+import { TableControls } from './components/TableControls/TableControls.js';
+import { TableContent } from './components/TableContent/TableContent.js';
+import { u as useScrollSync } from '../../useScrollSync-b2d28bed.js';
+import '../button/index.js';
+import '../icon/icons/Check.js';
+import '../icon/IconWrapper/IconWrapper.js';
+import '../icon/icons/Info.js';
+import '../icon/icons/StarFilled.js';
+import '../icon/icons/X.js';
+import '../icon/icons/ZapFilled.js';
+import '../modal/bottomModal/index.js';
+import '../modal/genericModal/index.js';
+import '../modal/regularModal/index.js';
+import '../icon/icons/ChevronRight.js';
+import '../../index-a0ef2ab4.js';
+import './components/TableColumn/TableColumn.js';
+import '../../index-5e72c3d4.js';
+import '../../_commonjsHelpers-4730bd53.js';
+import '../icon/icons/ChevronLeft.js';
+
+var css_248z = ".Table-module_wrapper__2MMNq {\n  position: relative;\n}\n\n.Table-module_container__3VFLP {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -ms-overflow-style: none;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* Firefox */\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n.Table-module_container__3VFLP::-webkit-scrollbar {\n  display: none;\n}\n@media (min-width: 34rem) {\n  .Table-module_container__3VFLP {\n    scroll-snap-type: unset;\n  }\n}\n\n.Table-module_stickyHeader__2uEpP {\n  display: flex;\n  position: sticky;\n  z-index: 9;\n}";
+var styles = {"wrapper":"Table-module_wrapper__2MMNq","container":"Table-module_container__3VFLP","stickyHeader":"Table-module_stickyHeader__2uEpP"};
+styleInject(css_248z);
+
+var defaultTextOverrides = {
+    showDetails: 'Show details',
+    hideDetails: 'Hide details',
+};
+var Table = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var className = _a.className, collapsibleSections = _a.collapsibleSections, data = _a.data, hideDetails = _a.hideDetails, onModalOpen = _a.onModalOpen, onSelectionChanged = _a.onSelectionChanged, _g = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _g === void 0 ? 0 : _g, definedTextOverrides = _a.textOverrides, title = _a.title;
+    var textOverrides = __assign(__assign({}, defaultTextOverrides), definedTextOverrides);
+    var isMobile = useMediaQuery('BELOW_MOBILE');
+    var _h = useState(null), infoModal = _h[0], setInfoModal = _h[1];
+    var _j = useState(true), shouldHideDetails = _j[0], setShouldHideDetails = _j[1];
+    var containerRef = useRef(null);
+    var headerRef = useRef(null);
+    var columnsLength = data[0].items[0].length;
+    useScrollSync(headerRef, containerRef, !isMobile);
+    var _k = useTableNavigation({
+        enabled: isMobile,
+        containerRef: containerRef,
+        columnsLength: columnsLength,
+        onSelectionChanged: onSelectionChanged,
+    }), activeSection = _k.activeSection, navigateTable = _k.navigateTable;
+    var currentActiveSection = (_d = (_c = (_b = data === null || data === void 0 ? void 0 : data[0]) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d[activeSection];
+    var handleOpenModal = function (modalTitle, body) {
+        onModalOpen === null || onModalOpen === void 0 ? void 0 : onModalOpen(modalTitle, body);
+        setInfoModal({ title: modalTitle, body: body });
+    };
+    return (jsxs("div", { className: classNames(styles.wrapper, 'bg-white'), children: [isMobile ? (jsx(TableControls, { activeSection: activeSection, columnsLength: columnsLength, navigateTable: navigateTable, stickyHeaderTopOffset: stickyHeaderTopOffset, children: jsx(TableCell, __assign({}, currentActiveSection, { openModal: function (info) {
+                        return handleOpenModal(currentActiveSection === null || currentActiveSection === void 0 ? void 0 : currentActiveSection.text, info);
+                    } })) })) : (jsx("div", { "aria-hidden": true, className: styles.stickyHeader, style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsx("div", { className: styles.container, ref: headerRef, children: jsx(TableContent, { data: [(_f = (_e = data === null || data === void 0 ? void 0 : data[0]) === null || _e === void 0 ? void 0 : _e.items) === null || _f === void 0 ? void 0 : _f[0]], title: title, className: className, openModal: handleOpenModal }) }) })), jsx("div", { ref: containerRef, className: classNames(styles.container, 'pb8'), children: jsx(TableSection, { data: data, title: title, className: className, collapsibleSections: collapsibleSections, hideDetails: hideDetails, isMobile: isMobile, shouldHideDetails: shouldHideDetails, openModal: handleOpenModal }) }), hideDetails && (jsx(Card, { "data-testid": "show-hide-details", classNames: {
+                    buttonWrapper: 'm8 mt32',
+                    title: 'd-flex gap8 ai-center jc-center',
+                    wrapper: 'bg-grey-200',
+                }, title: jsxs(Fragment, { children: [shouldHideDetails
+                            ? textOverrides.showDetails
+                            : textOverrides.hideDetails, shouldHideDetails ? (jsx(ChevronDownIcon, { size: 24 })) : (jsx(ChevronUpIcon, { size: 24 }))] }), actionIcon: null, dropShadow: false, titleVariant: "small", density: "compact", onClick: function () { return setShouldHideDetails(function (current) { return !current; }); } })), jsx(BottomOrRegularModal, { isOpen: (infoModal === null || infoModal === void 0 ? void 0 : infoModal.body) ? true : false, title: infoModal === null || infoModal === void 0 ? void 0 : infoModal.title, onClose: function () { return setInfoModal(null); }, children: jsx("div", { className: "pt8 p24 wmn6", children: infoModal === null || infoModal === void 0 ? void 0 : infoModal.body }) })] }));
+};
+
+export { Table };
+//# sourceMappingURL=Table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell, TableCellProps } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { ReactNode, useEffect, useRef, useState } from 'react';\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from '../icon';\nimport { Card } from '../cards/card';\n\nimport styles from './Table.module.scss';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { TableSection } from './components/TableSection/TableSection';\nimport classNames from 'classnames';\nimport { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';\nimport { TableControls } from './components/TableControls/TableControls';\nimport { TableContent } from './components/TableContent/TableContent';\nimport { useScrollSync } from './utils/useScrollSync/useScrollSync';\n\ntype TextOverrides = {\n  showDetails?: string;\n  hideDetails?: string;\n};\n\nexport type TableSectionType = {\n  title?: string;\n  icon?: ReactNode;\n};\n\ninterface ModalType {\n  title?: ReactNode;\n  body?: ReactNode;\n}\n\ninterface TableSectionData {\n  section?: TableSectionType;\n  items: TableCellProps[][];\n}\n\nexport type TableData = TableSectionData[];\n\nexport interface TableProps {\n  className?: string;\n  collapsibleSections?: boolean;\n  data: TableData;\n  hideDetails?: boolean;\n  onModalOpen?: (title: ReactNode, body: ReactNode) => void;\n  onSelectionChanged?: (index: number) => void;\n  stickyHeaderTopOffset?: number;\n  textOverrides?: TextOverrides;\n  title: string;\n}\n\nconst defaultTextOverrides = {\n  showDetails: 'Show details',\n  hideDetails: 'Hide details',\n};\n\nconst Table = ({\n  className,\n  collapsibleSections,\n  data,\n  hideDetails,\n  onModalOpen,\n  onSelectionChanged,\n  stickyHeaderTopOffset = 0,\n  textOverrides: definedTextOverrides,\n  title,\n}: TableProps) => {\n  const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };\n  const isMobile = useMediaQuery('BELOW_MOBILE');\n  const [infoModal, setInfoModal] = useState<ModalType | 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 = data[0].items[0].length;\n\n  useScrollSync(headerRef, containerRef, !isMobile);\n\n  const { activeSection, navigateTable } = useTableNavigation({\n    enabled: isMobile,\n    containerRef,\n    columnsLength,\n    onSelectionChanged,\n  });\n\n  const currentActiveSection = data?.[0]?.items?.[0]?.[activeSection];\n\n  const handleOpenModal = (modalTitle: ReactNode, body: ReactNode) => {\n    onModalOpen?.(modalTitle, body);\n    setInfoModal({ title: modalTitle, body });\n  };\n\n  return (\n    <div className={classNames(styles.wrapper, 'bg-white')}>\n      {isMobile ? (\n        <TableControls\n          activeSection={activeSection}\n          columnsLength={columnsLength}\n          navigateTable={navigateTable}\n          stickyHeaderTopOffset={stickyHeaderTopOffset}\n        >\n          <TableCell\n            {...currentActiveSection}\n            openModal={(info) =>\n              handleOpenModal(currentActiveSection?.text, info)\n            }\n          />\n        </TableControls>\n      ) : (\n        <div\n          aria-hidden\n          className={styles.stickyHeader}\n          style={{ top: `${stickyHeaderTopOffset}px` }}\n        >\n          <div className={styles.container} ref={headerRef}>\n            <TableContent\n              data={[data?.[0]?.items?.[0]]}\n              title={title}\n              className={className}\n              openModal={handleOpenModal}\n            />\n          </div>\n        </div>\n      )}\n\n      <div ref={containerRef} className={classNames(styles.container, 'pb8')}>\n        <TableSection\n          data={data}\n          title={title}\n          className={className}\n          collapsibleSections={collapsibleSections}\n          hideDetails={hideDetails}\n          isMobile={isMobile}\n          shouldHideDetails={shouldHideDetails}\n          openModal={handleOpenModal}\n        />\n      </div>\n\n      {hideDetails && (\n        <Card\n          data-testid=\"show-hide-details\"\n          classNames={{\n            buttonWrapper: 'm8 mt32',\n            title: 'd-flex gap8 ai-center jc-center',\n            wrapper: 'bg-grey-200',\n          }}\n          title={\n            <>\n              {shouldHideDetails\n                ? textOverrides.showDetails\n                : textOverrides.hideDetails}\n              {shouldHideDetails ? (\n                <ChevronDownIcon size={24} />\n              ) : (\n                <ChevronUpIcon size={24} />\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={infoModal?.body ? true : false}\n        title={infoModal?.title}\n        onClose={() => setInfoModal(null)}\n      >\n        <div className=\"pt8 p24 wmn6\">{infoModal?.body}</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

@@ -0,0 +1,181 @@
+import { jsx } from 'react/jsx-runtime';
+import { Table } from './Table.js';
+import DentalPlusIcon from '../icon/icons/DentalPlus.js';
+import PlaneIcon from '../icon/icons/Plane.js';
+import '../../tslib.es6-a39f91fc.js';
+import './components/TableCell/TableCell.js';
+import '../button/index.js';
+import '../../index-6ea95111.js';
+import 'react';
+import '../icon/icons/Check.js';
+import '../icon/IconWrapper/IconWrapper.js';
+import '../../style-inject.es-1f59c1d0.js';
+import '../icon/icons/Info.js';
+import '../icon/icons/StarFilled.js';
+import '../icon/icons/X.js';
+import '../icon/icons/ZapFilled.js';
+import '../modal/bottomOrRegularModal/index.js';
+import '../modal/bottomModal/index.js';
+import '../modal/genericModal/index.js';
+import '../modal/regularModal/index.js';
+import '../icon/icons/ChevronDown.js';
+import '../icon/icons/ChevronUp.js';
+import '../cards/card/index.js';
+import '../icon/icons/ChevronRight.js';
+import '../../Collapsible-ac67187a.js';
+import '../../index-a0ef2ab4.js';
+import './components/TableSection/TableSection.js';
+import './components/TableContent/TableContent.js';
+import './components/TableColumn/TableColumn.js';
+import '../../useTableNavigation-8e50b121.js';
+import '../../index-5e72c3d4.js';
+import '../../_commonjsHelpers-4730bd53.js';
+import './components/TableControls/TableControls.js';
+import '../icon/icons/ChevronLeft.js';
+import '../../useScrollSync-b2d28bed.js';
+
+var initialData = [
+    {
+        items: [
+            [
+                { text: 'Our plans' },
+                { text: 'Surgery', info: 'More info on this one he' },
+                { text: 'Standard' },
+                { text: 'Premium' },
+            ],
+            [
+                { text: 'Regular vet visits & medication', description: 'Annual Only' },
+                { text: 'No', description: 'Annual Only' },
+                { text: 'Yes' },
+                { text: 'Yes' },
+            ],
+            [
+                { text: 'Operations', info: 'info' },
+                { boolean: true, info: 'Maybe' },
+                { boolean: false },
+                { boolean: true },
+            ],
+            [
+                { text: 'Rating', info: 'info' },
+                { rating: { type: 'zap', value: 1 }, info: 'Maybe' },
+                { rating: { type: 'zap', value: 3 } },
+                { rating: { type: 'star', value: 3 } },
+            ],
+        ],
+    },
+    {
+        section: {
+            icon: jsx(DentalPlusIcon, { size: 24, noMargin: true }),
+            title: 'Dental',
+        },
+        items: [
+            [
+                { text: 'Regular vet visits & medication' },
+                { text: 'No' },
+                { text: 'Yes' },
+                { text: 'Yes' },
+            ],
+            [
+                { text: 'Operations', info: 'info' },
+                { boolean: true, info: 'Maybe' },
+                { boolean: false },
+                { boolean: true },
+            ],
+            [
+                { text: 'Rating', info: 'info' },
+                { rating: { type: 'zap', value: 1 }, info: 'Maybe' },
+                { rating: { type: 'zap', value: 3 } },
+                { rating: { type: 'star', value: 3 } },
+            ],
+        ],
+    },
+    {
+        section: {
+            title: 'Travel',
+            icon: jsx(PlaneIcon, { size: 24, noMargin: true }),
+        },
+        items: [
+            [
+                { text: 'Regular vet visits & medication' },
+                { text: 'No', boolean: false },
+                { text: 'Yes' },
+                { text: 'Yes' },
+            ],
+            [
+                { text: 'Operations', info: 'info' },
+                { boolean: true, info: 'Maybe' },
+                { boolean: false },
+                { boolean: true },
+            ],
+            [
+                { text: 'Rating', info: 'info' },
+                { rating: { type: 'zap', value: 1 }, info: 'Maybe' },
+                { rating: { type: 'zap', value: 3 } },
+                { rating: { type: 'star', value: 3 } },
+            ],
+        ],
+    },
+];
+var story = {
+    title: 'JSX/Table',
+    component: Table,
+    argTypes: {
+        data: {
+            description: 'This property allows to set the data of the Table component.',
+        },
+        title: {
+            description: 'This property allows to add a title to the Table component for accessibility purposes.',
+        },
+        collapsibleSections: {
+            description: 'This property allows to collapse the sections of the table.',
+        },
+        hideDetails: {
+            description: 'This property allows to hide the details of the table.',
+        },
+        stickyHeaderTopOffset: {
+            description: 'This property allows to set the offset of the sticky header.',
+        },
+        className: {
+            description: 'This property allows to set a custom class to the Table component.',
+        },
+        textOverrides: {
+            description: 'This property allows to set custom text for the show and hide details buttons.',
+        },
+        onSelectionChanged: {
+            description: 'This event is triggered when a selection is changed. It receives the index of the selection as an argument.',
+            table: {
+                category: 'Events',
+            },
+        },
+        onModalOpen: {
+            description: 'This event is triggered when a modal is opened. It receives the title and body of the modal as arguments.',
+            table: {
+                category: 'Events',
+            },
+        },
+    },
+    args: {
+        data: initialData,
+        collapsibleSections: false,
+        hideDetails: false,
+        stickyHeaderTopOffset: 0,
+        title: 'Title of the table',
+        className: '',
+        textOverrides: {
+            showDetails: 'Show details',
+            hideDetails: 'Hide details',
+        },
+    },
+};
+var TableStory = function (_a) {
+    var collapsibleSections = _a.collapsibleSections, data = _a.data, hideDetails = _a.hideDetails, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, textOverrides = _a.textOverrides, title = _a.title;
+    return (jsx(Table, { collapsibleSections: collapsibleSections, data: data, hideDetails: hideDetails, stickyHeaderTopOffset: stickyHeaderTopOffset, textOverrides: textOverrides, title: title }));
+};
+var TableDataType = function () {
+    return (jsx("pre", { children: "\ntype TableData = {\n  section?: \n    title?: string;\n    icon?: ReactNode;\n  };\n  items: {\n    align?: 'center' | 'left' | 'right';\n    boolean?: boolean;\n    cellProps?: HTMLProps<HTMLTableCellElement>;\n    description?: ReactNode;\n    info?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    text?: ReactNode;\n    openModal?: (info: ReactNode) => void;\n  }[][];\n}[];\n      " }));
+};
+TableStory.storyName = 'Table';
+
+export default story;
+export { TableDataType, TableStory };
+//# sourceMappingURL=Table.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.stories.js","sources":["../../../../../src/lib/components/table/Table.stories.tsx"],"sourcesContent":["import { Table, TableData, TableProps } from './Table';\nimport { DentalPlusIcon, PlaneIcon } from '../icon';\n\nconst initialData: TableData = [\n  {\n    items: [\n      [\n        { text: 'Our plans' },\n        { text: 'Surgery', info: 'More info on this one he' },\n        { text: 'Standard' },\n        { text: 'Premium' },\n      ],\n      [\n        { text: 'Regular vet visits & medication', description: 'Annual Only' },\n        { text: 'No', description: 'Annual Only' },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', info: 'info' },\n        { boolean: true, info: 'Maybe' },\n        { boolean: false },\n        { boolean: true },\n      ],\n      [\n        { text: 'Rating', info: 'info' },\n        { rating: { type: 'zap', value: 1 }, info: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n  {\n    section: {\n      icon: <DentalPlusIcon size={24} noMargin />,\n      title: 'Dental',\n    },\n    items: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No' },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', info: 'info' },\n        { boolean: true, info: 'Maybe' },\n        { boolean: false },\n        { boolean: true },\n      ],\n      [\n        { text: 'Rating', info: 'info' },\n        { rating: { type: 'zap', value: 1 }, info: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n  {\n    section: {\n      title: 'Travel',\n      icon: <PlaneIcon size={24} noMargin />,\n    },\n    items: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No', boolean: false },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', info: 'info' },\n        { boolean: true, info: 'Maybe' },\n        { boolean: false },\n        { boolean: true },\n      ],\n      [\n        { text: 'Rating', info: 'info' },\n        { rating: { type: 'zap', value: 1 }, info: '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    data: {\n      description:\n        'This property allows to set the data of the Table component.',\n    },\n    title: {\n      description:\n        'This property allows to add a title to the Table component for accessibility purposes.',\n    },\n    collapsibleSections: {\n      description:\n        'This property allows to collapse the sections of the table.',\n    },\n    hideDetails: {\n      description: 'This property allows to hide the details of the table.',\n    },\n    stickyHeaderTopOffset: {\n      description:\n        'This property allows to set the offset of the sticky header.',\n    },\n    className: {\n      description:\n        'This property allows to set a custom class to the Table component.',\n    },\n    textOverrides: {\n      description:\n        'This property allows to set custom text for the show and hide details buttons.',\n    },\n    onSelectionChanged: {\n      description:\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      description:\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    data: 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  },\n};\n\nexport const TableStory = ({\n  collapsibleSections,\n  data,\n  hideDetails,\n  stickyHeaderTopOffset,\n  textOverrides,\n  title,\n}: TableProps) => (\n  <Table\n    collapsibleSections={collapsibleSections}\n    data={data}\n    hideDetails={hideDetails}\n    stickyHeaderTopOffset={stickyHeaderTopOffset}\n    textOverrides={textOverrides}\n    title={title}\n  />\n);\n\nexport const TableDataType = () => {\n  return (\n    <pre>\n      {`\ntype TableData = {\n  section?: \n    title?: string;\n    icon?: ReactNode;\n  };\n  items: {\n    align?: 'center' | 'left' | 'right';\n    boolean?: boolean;\n    cellProps?: HTMLProps<HTMLTableCellElement>;\n    description?: ReactNode;\n    info?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    text?: ReactNode;\n    openModal?: (info: ReactNode) => void;\n  }[][];\n}[];\n      `}\n    </pre>\n  );\n};\n\nTableStory.storyName = 'Table';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}

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

@@ -0,0 +1,114 @@
+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-d03c10b6.js';
+import { Table } from './Table.js';
+import 'react';
+import 'react-dom';
+import '../../_commonjsHelpers-4730bd53.js';
+import 'react-dom/test-utils';
+import './components/TableCell/TableCell.js';
+import '../button/index.js';
+import '../../index-6ea95111.js';
+import '../icon/icons/Check.js';
+import '../icon/IconWrapper/IconWrapper.js';
+import '../../style-inject.es-1f59c1d0.js';
+import '../icon/icons/Info.js';
+import '../icon/icons/StarFilled.js';
+import '../icon/icons/X.js';
+import '../icon/icons/ZapFilled.js';
+import '../modal/bottomOrRegularModal/index.js';
+import '../modal/bottomModal/index.js';
+import '../modal/genericModal/index.js';
+import '../modal/regularModal/index.js';
+import '../icon/icons/ChevronDown.js';
+import '../icon/icons/ChevronUp.js';
+import '../cards/card/index.js';
+import '../icon/icons/ChevronRight.js';
+import '../../Collapsible-ac67187a.js';
+import '../../index-a0ef2ab4.js';
+import './components/TableSection/TableSection.js';
+import './components/TableContent/TableContent.js';
+import './components/TableColumn/TableColumn.js';
+import '../../useTableNavigation-8e50b121.js';
+import '../../index-5e72c3d4.js';
+import './components/TableControls/TableControls.js';
+import '../icon/icons/ChevronLeft.js';
+import '../../useScrollSync-b2d28bed.js';
+
+var data = [
+    {
+        section: {
+            title: 'Section 1',
+            icon: jsx("span", { children: "Icon 1" }),
+        },
+        items: [[{ text: 'Item 1' }, { text: 'Item 2' }]],
+    },
+    {
+        section: {
+            title: 'Section 2',
+            icon: jsx("span", { children: "Icon 2" }),
+        },
+        items: [[{ text: 'Item 3' }, { text: 'Item 4', info: 'Additional item' }]],
+    },
+];
+describe('Table', function () {
+    it('renders the table with sections and items', function () {
+        customRender(jsx(Table, { data: data, title: "Test Table" }));
+        expect(screen.getByText('Section 1')).toBeInTheDocument();
+        expect(screen.getByText('Section 2')).toBeInTheDocument();
+        expect(screen.getAllByText('Item 1')[0]).toBeInTheDocument();
+        expect(screen.getAllByText('Item 2')[0]).toBeInTheDocument();
+        expect(screen.getByText('Item 3')).toBeInTheDocument();
+        expect(screen.getByText('Item 4')).toBeInTheDocument();
+    });
+    it('renders the table without sections', function () {
+        var dataWithoutSections = [{ items: data[0].items }];
+        customRender(jsx(Table, { data: dataWithoutSections, title: "Test Table" }));
+        expect(screen.getAllByText('Item 1')[0]).toBeVisible();
+        expect(screen.getAllByText('Item 2')[0]).toBeVisible();
+    });
+    it('hides the show/hide details button if hideDetails is false', function () {
+        customRender(jsx(Table, { data: data, hideDetails: true, title: "Test Table" }));
+        expect(screen.queryByTestId('show-hide-details')).toBeInTheDocument();
+    });
+    it('shows the show/hide details button if hideDetails is true', function () {
+        customRender(jsx(Table, { data: data, hideDetails: true, title: "Test Table" }));
+        expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();
+    });
+    it('hides the sections if hideDetails is true', function () {
+        customRender(jsx(Table, { data: data, hideDetails: true, title: "Test Table" }));
+        expect(screen.queryByText('Section 2')).not.toBeInTheDocument();
+        expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();
+    });
+    it('hides the sections if hideDetails is true and shows if clicking on button', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = customRender(jsx(Table, { data: data, hideDetails: true, title: "Test Table" })).user;
+                    expect(screen.getByText('Show details')).toBeVisible();
+                    return [4 /*yield*/, user.click(screen.getByTestId('show-hide-details'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByText('Section 2')).toBeVisible();
+                    expect(screen.getByText('Hide details')).toBeVisible();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('shows a modal when clicking on info icon', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = customRender(jsx(Table, { data: data, title: "Test Table" })).user;
+                    return [4 /*yield*/, user.click(screen.getByText('View more info'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByText('Additional item')).toBeVisible();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});
+//# sourceMappingURL=Table.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.test.js","sources":["../../../../../src/lib/components/table/Table.test.tsx"],"sourcesContent":["import { render, screen } from '../../util/testUtils';\nimport { Table } from './Table';\n\nconst data = [\n  {\n    section: {\n      title: 'Section 1',\n      icon: <span>Icon 1</span>,\n    },\n    items: [[{ text: 'Item 1' }, { text: 'Item 2' }]],\n  },\n  {\n    section: {\n      title: 'Section 2',\n      icon: <span>Icon 2</span>,\n    },\n    items: [[{ text: 'Item 3' }, { text: 'Item 4', info: 'Additional item' }]],\n  },\n];\n\ndescribe('Table', () => {\n  it('renders the table with sections and items', () => {\n    render(<Table data={data} title=\"Test Table\" />);\n\n    expect(screen.getByText('Section 1')).toBeInTheDocument();\n    expect(screen.getByText('Section 2')).toBeInTheDocument();\n\n    expect(screen.getAllByText('Item 1')[0]).toBeInTheDocument();\n    expect(screen.getAllByText('Item 2')[0]).toBeInTheDocument();\n    expect(screen.getByText('Item 3')).toBeInTheDocument();\n    expect(screen.getByText('Item 4')).toBeInTheDocument();\n  });\n\n  it('renders the table without sections', () => {\n    const dataWithoutSections = [{ items: data[0].items }];\n\n    render(<Table data={dataWithoutSections} title=\"Test Table\" />);\n\n    expect(screen.getAllByText('Item 1')[0]).toBeVisible();\n    expect(screen.getAllByText('Item 2')[0]).toBeVisible();\n  });\n\n  it('hides the show/hide details button if hideDetails is false', () => {\n    render(<Table data={data} hideDetails title=\"Test Table\" />);\n\n    expect(screen.queryByTestId('show-hide-details')).toBeInTheDocument();\n  });\n\n  it('shows the show/hide details button if hideDetails is true', () => {\n    render(<Table data={data} hideDetails title=\"Test Table\" />);\n\n    expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();\n  });\n\n  it('hides the sections if hideDetails is true', () => {\n    render(<Table data={data} hideDetails title=\"Test Table\" />);\n\n    expect(screen.queryByText('Section 2')).not.toBeInTheDocument();\n    expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();\n  });\n\n  it('hides the sections if hideDetails is true and shows if clicking on button', async () => {\n    const { user } = render(\n      <Table data={data} hideDetails title=\"Test Table\" />\n    );\n\n    expect(screen.getByText('Show details')).toBeVisible();\n\n    await user.click(screen.getByTestId('show-hide-details'));\n\n    expect(screen.getByText('Section 2')).toBeVisible();\n    expect(screen.getByText('Hide details')).toBeVisible();\n  });\n\n  it('shows a modal when clicking on info icon', async () => {\n    const { user } = render(<Table data={data} title=\"Test Table\" />);\n\n    await user.click(screen.getByText('View more info'));\n\n    expect(screen.getByText('Additional item')).toBeVisible();\n  });\n});\n"],"names":["_jsx","render"],"mappings":"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"}

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

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '../../../button/index.js';
+import CheckIcon from '../../../icon/icons/Check.js';
+import InfoIcon from '../../../icon/icons/Info.js';
+import StarFilledIcon from '../../../icon/icons/StarFilled.js';
+import XIcon from '../../../icon/icons/X.js';
+import ZapFilledIcon from '../../../icon/icons/ZapFilled.js';
+import { c as classNames } from '../../../../index-6ea95111.js';
+import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
+import '../../../../tslib.es6-a39f91fc.js';
+import 'react';
+import '../../../icon/IconWrapper/IconWrapper.js';
+
+var css_248z = ".TableCell-module_button__2MKH1 {\n  min-height: initial;\n  height: initial;\n  width: initial;\n}\n\n.TableCell-module_icon__2o49x {\n  margin: 2px;\n}";
+var styles = {"button":"TableCell-module_button__2MKH1","icon":"TableCell-module_icon__2o49x"};
+styleInject(css_248z);
+
+var TableCell = function (_a) {
+    var _b = _a.align, align = _b === void 0 ? 'center' : _b, boolean = _a.boolean, _c = _a.description, description = _c === void 0 ? '' : _c, _d = _a.info, info = _d === void 0 ? '' : _d, openModal = _a.openModal, rating = _a.rating, _e = _a.text, text = _e === void 0 ? '' : _e;
+    var alignClassName = {
+        center: 'ta-center jc-center',
+        left: 'ta-left jc-start',
+        right: 'ta-right',
+    }[align];
+    var validRatingValues = [1, 2, 3];
+    var SelectedIcon = (rating === null || rating === void 0 ? void 0 : rating.type) === 'zap' ? ZapFilledIcon : StarFilledIcon;
+    return (jsxs("div", { className: "d-flex fd-column gap8", children: [jsxs("div", { className: classNames('d-flex gap8 ai-center', alignClassName), 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 }, value)); }) })), boolean !== undefined && (jsx("span", { title: boolean ? 'Yes' : 'No', children: boolean ? (jsx(CheckIcon, { "data-testid": "table-cell-boolean-yes", size: 24, "aria-hidden": true, color: "primary-500" })) : (jsx(XIcon, { "data-testid": "table-cell-boolean-no", size: 24, "aria-hidden": true, color: "grey-400" })) })), text && (jsx("div", { className: "p-p", "data-testid": "table-cell-text", children: text })), info && openModal && (jsx(Button, { className: classNames(styles.button), hideLabel: true, leftIcon: jsx(InfoIcon, { size: 20 }), onClick: function () { return openModal(info); }, type: "button", variant: "textColor", children: "View more info" }))] }), description && (jsx("div", { className: classNames('d-flex p-p--small tc-grey-500', alignClassName), children: description }))] }));
+};
+
+export { TableCell };
+//# sourceMappingURL=TableCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.js","sources":["../../../../../../../src/lib/components/table/components/TableCell/TableCell.tsx"],"sourcesContent":["import { HTMLProps, ReactNode } from 'react';\nimport { Button } from '../../../button';\nimport {\n  CheckIcon,\n  InfoIcon,\n  StarFilledIcon,\n  XIcon,\n  ZapFilledIcon,\n} from '../../../icon';\nimport classNames from 'classnames';\n\nimport styles from './TableCell.module.scss';\n\nexport interface TableCellProps {\n  align?: 'center' | 'left' | 'right';\n  boolean?: boolean;\n  cellProps?: HTMLProps<HTMLTableCellElement>;\n  description?: ReactNode;\n  info?: ReactNode;\n  rating?: {\n    value: number;\n    type: 'zap' | 'star';\n  };\n  text?: ReactNode;\n  openModal?: (info: ReactNode) => void;\n}\n\nconst TableCell = ({\n  align = 'center',\n  boolean,\n  description = '',\n  info = '',\n  openModal,\n  rating,\n  text = '',\n}: TableCellProps) => {\n  const alignClassName = {\n    center: 'ta-center jc-center',\n    left: 'ta-left jc-start',\n    right: 'ta-right',\n  }[align];\n\n  const validRatingValues: number[] = [1, 2, 3];\n  const SelectedIcon = rating?.type === 'zap' ? ZapFilledIcon : StarFilledIcon;\n\n  return (\n    <div className=\"d-flex fd-column gap8\">\n      <div className={classNames('d-flex gap8 ai-center', alignClassName)}>\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              />\n            ))}\n          </span>\n        )}\n\n        {boolean !== undefined && (\n          <span title={boolean ? 'Yes' : 'No'}>\n            {boolean ? (\n              <CheckIcon\n                data-testid=\"table-cell-boolean-yes\"\n                size={24}\n                aria-hidden\n                color=\"primary-500\"\n              />\n            ) : (\n              <XIcon\n                data-testid=\"table-cell-boolean-no\"\n                size={24}\n                aria-hidden\n                color=\"grey-400\"\n              />\n            )}\n          </span>\n        )}\n\n        {text && (\n          <div className=\"p-p\" data-testid=\"table-cell-text\">\n            {text}\n          </div>\n        )}\n\n        {info && openModal && (\n          <Button\n            className={classNames(styles.button)}\n            hideLabel\n            leftIcon={<InfoIcon size={20} />}\n            onClick={() => openModal(info)}\n            type=\"button\"\n            variant=\"textColor\"\n          >\n            View more info\n          </Button>\n        )}\n      </div>\n\n      {description && (\n        <div\n          className={classNames(\n            'd-flex p-p--small tc-grey-500',\n            alignClassName\n          )}\n        >\n          {description}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { TableCell };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;IA2BM,SAAS,GAAG,UAAC,EAQF;QAPf,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAChB,OAAO,aAAA,EACP,mBAAgB,EAAhB,WAAW,mBAAG,EAAE,KAAA,EAChB,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,SAAS,eAAA,EACT,MAAM,YAAA,EACN,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA;IAET,IAAM,cAAc,GAAG;QACrB,MAAM,EAAE,qBAAqB;QAC7B,IAAI,EAAE,kBAAkB;QACxB,KAAK,EAAE,UAAU;KAClB,CAAC,KAAK,CAAC,CAAC;IAET,IAAM,iBAAiB,GAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC9C,IAAM,YAAY,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,MAAK,KAAK,GAAG,aAAa,GAAG,cAAc,CAAC;IAE7E,QACEA,cAAK,SAAS,EAAC,uBAAuB,aACpCA,cAAK,SAAS,EAAE,UAAU,CAAC,uBAAuB,EAAE,cAAc,CAAC,aAChE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,MACZC,6BACc,mBAAmB,EAC/B,KAAK,EAAE,UAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,cAAW,YAEjC,iBAAiB,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,QAChCA,IAAC,YAAY,mBACC,MAAM,EAElB,KAAK,EAAE,KAAK,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAA,GAAG,aAAa,GAAG,UAAU,EAC1D,SAAS,EAAE,MAAM,CAAC,IAAI,IAFjB,KAAK,CAGV,IACH,CAAC,GACG,CACR,EAEA,OAAO,KAAK,SAAS,KACpBA,cAAM,KAAK,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,YAChC,OAAO,IACNA,IAAC,SAAS,mBACI,wBAAwB,EACpC,IAAI,EAAE,EAAE,uBAER,KAAK,EAAC,aAAa,GACnB,KAEFA,IAAC,KAAK,mBACQ,uBAAuB,EACnC,IAAI,EAAE,EAAE,uBAER,KAAK,EAAC,UAAU,GAChB,CACH,GACI,CACR,EAEA,IAAI,KACHA,aAAK,SAAS,EAAC,KAAK,iBAAa,iBAAiB,YAC/C,IAAI,GACD,CACP,EAEA,IAAI,IAAI,SAAS,KAChBA,IAAC,MAAM,IACL,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,EACpC,SAAS,QACT,QAAQ,EAAEA,IAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI,EAChC,OAAO,EAAE,cAAM,OAAA,SAAS,CAAC,IAAI,CAAC,GAAA,EAC9B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,+BAGZ,CACV,IACG,EAEL,WAAW,KACVA,aACE,SAAS,EAAE,UAAU,CACnB,+BAA+B,EAC/B,cAAc,CACf,YAEA,WAAW,GACR,CACP,IACG,EACN;AACJ;;;;"}

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

@@ -0,0 +1,66 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as customRender, s as screen } from '../../../../customRender-d03c10b6.js';
+import { TableCell } from './TableCell.js';
+import '../../../../tslib.es6-a39f91fc.js';
+import 'react';
+import 'react-dom';
+import '../../../../_commonjsHelpers-4730bd53.js';
+import 'react-dom/test-utils';
+import '../../../button/index.js';
+import '../../../../index-6ea95111.js';
+import '../../../icon/icons/Check.js';
+import '../../../icon/IconWrapper/IconWrapper.js';
+import '../../../../style-inject.es-1f59c1d0.js';
+import '../../../icon/icons/Info.js';
+import '../../../icon/icons/StarFilled.js';
+import '../../../icon/icons/X.js';
+import '../../../icon/icons/ZapFilled.js';
+
+var openModal = jest.fn();
+describe('TableCell', function () {
+    it('renders the component with boolean true', function () {
+        customRender(jsx(TableCell, { boolean: true }));
+        expect(screen.getByTitle('Yes')).toBeInTheDocument();
+        expect(screen.getByTestId('table-cell-boolean-yes')).toBeInTheDocument();
+    });
+    it('renders the component with boolean false', function () {
+        customRender(jsx(TableCell, { boolean: false }));
+        expect(screen.getByTitle('No')).toBeInTheDocument();
+        expect(screen.getByTestId('table-cell-boolean-no')).toBeInTheDocument();
+    });
+    it('renders the component without boolean', function () {
+        customRender(jsx(TableCell, {}));
+        expect(screen.queryByTitle('Yes')).not.toBeInTheDocument();
+        expect(screen.queryByTitle('No')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('table-cell-boolean-yes')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('table-cell-boolean-no')).not.toBeInTheDocument();
+    });
+    it('renders the component with rating', function () {
+        customRender(jsx(TableCell, { rating: { type: 'star', value: 2 } }));
+        expect(screen.getByTitle('2 out of 3')).toBeInTheDocument();
+    });
+    it('renders the component without rating', function () {
+        customRender(jsx(TableCell, {}));
+        expect(screen.queryByTestId('table-cell-rating')).not.toBeInTheDocument();
+    });
+    it('renders the component with text', function () {
+        customRender(jsx(TableCell, { text: "Sample text" }));
+        expect(screen.getByText('Sample text')).toBeInTheDocument();
+    });
+    it('renders the component without text', function () {
+        customRender(jsx(TableCell, {}));
+        expect(screen.queryByTestId('table-cell-text')).not.toBeInTheDocument();
+    });
+    it('renders the component without info', function () {
+        customRender(jsx(TableCell, {}));
+        expect(screen.queryByText('View more info')).not.toBeInTheDocument();
+    });
+    it('calls openModal when info button is clicked', function () {
+        customRender(jsx(TableCell, { info: "Additional information", openModal: openModal }));
+        // Click info button
+        screen.getByText('View more info').click();
+        // Assert openModal is called with info prop
+        expect(openModal).toHaveBeenCalledWith('Additional information');
+    });
+});
+//# sourceMappingURL=TableCell.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.test.js","sources":["../../../../../../../src/lib/components/table/components/TableCell/TableCell.test.tsx"],"sourcesContent":["import { render, screen } from '../../../../util/testUtils';\nimport { TableCell } from './TableCell';\n\nconst openModal = jest.fn();\n\ndescribe('TableCell', () => {\n  it('renders the component with boolean true', () => {\n    render(<TableCell boolean={true} />);\n\n    expect(screen.getByTitle('Yes')).toBeInTheDocument();\n    expect(screen.getByTestId('table-cell-boolean-yes')).toBeInTheDocument();\n  });\n\n  it('renders the component with boolean false', () => {\n    render(<TableCell boolean={false} />);\n\n    expect(screen.getByTitle('No')).toBeInTheDocument();\n    expect(screen.getByTestId('table-cell-boolean-no')).toBeInTheDocument();\n  });\n\n  it('renders the component without boolean', () => {\n    render(<TableCell />);\n\n    expect(screen.queryByTitle('Yes')).not.toBeInTheDocument();\n    expect(screen.queryByTitle('No')).not.toBeInTheDocument();\n    expect(\n      screen.queryByTestId('table-cell-boolean-yes')\n    ).not.toBeInTheDocument();\n    expect(\n      screen.queryByTestId('table-cell-boolean-no')\n    ).not.toBeInTheDocument();\n  });\n\n  it('renders the component with rating', () => {\n    render(<TableCell rating={{ type: 'star', value: 2 }} />);\n\n    expect(screen.getByTitle('2 out of 3')).toBeInTheDocument();\n  });\n\n  it('renders the component without rating', () => {\n    render(<TableCell />);\n\n    expect(screen.queryByTestId('table-cell-rating')).not.toBeInTheDocument();\n  });\n\n  it('renders the component with text', () => {\n    render(<TableCell text=\"Sample text\" />);\n\n    expect(screen.getByText('Sample text')).toBeInTheDocument();\n  });\n\n  it('renders the component without text', () => {\n    render(<TableCell />);\n\n    expect(screen.queryByTestId('table-cell-text')).not.toBeInTheDocument();\n  });\n\n  it('renders the component without info', () => {\n    render(<TableCell />);\n\n    expect(screen.queryByText('View more info')).not.toBeInTheDocument();\n  });\n\n  it('calls openModal when info button is clicked', () => {\n    render(<TableCell info=\"Additional information\" openModal={openModal} />);\n\n    // Click info button\n    screen.getByText('View more info').click();\n\n    // Assert openModal is called with info prop\n    expect(openModal).toHaveBeenCalledWith('Additional information');\n  });\n});\n"],"names":["render","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+import { a as __assign } from '../../../../tslib.es6-a39f91fc.js';
+import { 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 = ".TableColumn-module_th___hzzL {\n  vertical-align: middle;\n  scroll-snap-align: end;\n  width: 50%;\n}\n@media (min-width: 34rem) {\n  .TableColumn-module_th___hzzL {\n    width: auto;\n    scroll-snap-align: unset;\n  }\n}\n\n.TableColumn-module_thRow__33K6_ {\n  position: sticky;\n  top: 0;\n}\n\n.TableColumn-module_thCol__2tTRL {\n  text-align: left;\n}\n\n.TableColumn-module_fixedCell__1H4VO {\n  position: sticky;\n  left: 0;\n  z-index: 2;\n}\n.TableColumn-module_fixedCell__1H4VO:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  width: 1px;\n  background-color: #f5f6fb;\n}";
+var styles = {"th":"TableColumn-module_th___hzzL","thRow":"TableColumn-module_thRow__33K6_","thCol":"TableColumn-module_thCol__2tTRL","fixedCell":"TableColumn-module_fixedCell__1H4VO"};
+styleInject(css_248z);
+
+var TableColumn = function (_a) {
+    var _b;
+    var children = _a.children, isColumn = _a.isColumn, isFixed = _a.isFixed, isHeader = _a.isHeader, _c = _a.cellProps, cellProps = _c === void 0 ? {} : _c;
+    var Tag = isHeader ? 'th' : 'td';
+    return (jsx(Tag, __assign({ scope: isColumn ? 'col' : 'row', className: classNames('bg-white py24 px8', styles.th, (_b = {},
+            _b[styles.thCol] = isColumn,
+            _b[styles.fixedCell] = isFixed,
+            _b.pl32 = isFixed,
+            _b)) }, cellProps, { children: children })));
+};
+
+export { TableColumn };
+//# sourceMappingURL=TableColumn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableColumn.js","sources":["../../../../../../../src/lib/components/table/components/TableColumn/TableColumn.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './TableColumn.module.scss';\n\nexport interface TableColumnProps {\n  children?: React.ReactNode;\n  isColumn?: boolean;\n  isFixed?: boolean;\n  isHeader?: boolean;\n  cellProps?: React.HTMLProps<HTMLTableCellElement>;\n}\n\nconst TableColumn = ({\n  children,\n  isColumn,\n  isFixed,\n  isHeader,\n  cellProps = {},\n}: TableColumnProps) => {\n  const Tag = isHeader ? 'th' : 'td';\n\n  return (\n    <Tag\n      scope={isColumn ? 'col' : 'row'}\n      className={classNames('bg-white py24 px8', styles.th, {\n        [styles.thCol]: isColumn,\n        [styles.fixedCell]: isFixed,\n        pl32: isFixed,\n      })}\n      {...cellProps}\n    >\n      {children}\n    </Tag>\n  );\n};\n\nexport { TableColumn };\n"],"names":["_jsx"],"mappings":";;;;;;;;;IAYM,WAAW,GAAG,UAAC,EAMF;;QALjB,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA;IAEd,IAAM,GAAG,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;IAEnC,QACEA,IAAC,GAAG,aACF,KAAK,EAAE,QAAQ,GAAG,KAAK,GAAG,KAAK,EAC/B,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE,MAAM,CAAC,EAAE;YAClD,GAAC,MAAM,CAAC,KAAK,IAAG,QAAQ;YACxB,GAAC,MAAM,CAAC,SAAS,IAAG,OAAO;YAC3B,OAAI,GAAE,OAAO;gBACb,IACE,SAAS,cAEZ,QAAQ,IACL,EACN;AACJ;;;;"}