@popsure/dirty-swan 0.54.2 → 0.54.3

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, TableCellProps } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { 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 { ModalData, ModalFunction, TableData } from './types';\n\ntype TextOverrides = {\n  showDetails?: string;\n  hideDetails?: string;\n};\n\nexport interface TableProps {\n  className?: string;\n  collapsibleSections?: boolean;\n  tableData: TableData;\n  hideDetails?: boolean;\n  onModalOpen?: ModalFunction;\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  tableData,\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 [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    columnsLength,\n    onSelectionChanged,\n  });\n\n  const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];\n\n  const handleOpenModal: ModalFunction = ({ 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        <TableControls\n          activeSection={activeSection}\n          columnsLength={columnsLength}\n          navigateTable={navigateTable}\n          stickyHeaderTopOffset={stickyHeaderTopOffset}\n        >\n          <TableCell\n            {...currentActiveSection}\n            openModal={(body) =>\n              handleOpenModal({\n                body,\n                title: currentActiveSection?.content,\n              })\n            }\n            isNavigation\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            <TableSection\n              tableCellRows={[tableData?.[0]?.rows?.[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        <TableContents\n          tableData={tableData}\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={infoModalData?.body ? true : false}\n        title={infoModalData?.title}\n        onClose={() => setInfoModalData(null)}\n      >\n        <div className=\"pt8 p24 wmn6\">{infoModalData?.body}</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, TableCellProps } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { ReactNode, 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 { ModalData, ModalFunction, TableData } from './types';\n\ntype TextOverrides = {\n  showDetails?: string;\n  hideDetails?: string;\n};\n\nexport interface TableProps {\n  className?: string;\n  collapsibleSections?: boolean;\n  tableData: TableData;\n  hideDetails?: boolean;\n  onModalOpen?: ModalFunction;\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  tableData,\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 [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 currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];\n\n  const handleOpenModal: ModalFunction = ({ body, title }) => {\n    onModalOpen?.({ body, title });\n    setInfoModalData({ body, title });\n  };\n\n  const isBaseCell = !currentActiveSection.type;\n  let openModal;\n\n  if (isBaseCell) {\n    openModal = (body: ReactNode) =>\n      handleOpenModal({\n        body,\n        title: currentActiveSection?.content,\n      });\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            {...(isBaseCell\n              ? {\n                  openModal,\n                }\n              : {})}\n            isNavigation\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            <TableSection\n              tableCellRows={[tableData?.[0]?.rows?.[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        <TableContents\n          tableData={tableData}\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={infoModalData?.body ? true : false}\n        title={infoModalData?.title}\n        onClose={() => setInfoModalData(null)}\n      >\n        <div className=\"pt8 p24 wmn6\">{infoModalData?.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

@@ -4,16 +4,24 @@ 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 '../../style-inject.es-1f59c1d0.js';
+import './components/TableCell/BaseCell/BaseCell.js';
 import '../icon/icons/Check.js';
+import 'react';
 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 './components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.js';
+import '../../index-3d286178.js';
+import '../../_commonjsHelpers-4730bd53.js';
+import '../comparisonTable/components/TableInfoButton/index.js';
+import '../icon/icons/Info.js';
+import '../../index-5e72c3d4.js';
+import './components/TableCell/CTACell/CTACell.js';
+import './components/TableCell/ButtonCell/ButtonCell.js';
+import '../button/index.js';
 import '../modal/bottomOrRegularModal/index.js';
 import '../modal/bottomModal/index.js';
 import '../modal/genericModal/index.js';
@@ -26,9 +34,7 @@ import '../../Collapsible-a355828b.js';
 import '../../index-a0ef2ab4.js';
 import './components/TableContents/TableContents.js';
 import './components/TableSection/TableSection.js';
-import '../../useTableNavigation-8e50b121.js';
-import '../../index-5e72c3d4.js';
-import '../../_commonjsHelpers-4730bd53.js';
+import '../../useTableNavigation-2899712c.js';
 import './components/TableControls/TableControls.js';
 import '../icon/icons/ChevronLeft.js';
 import '../../useScrollSync-b2d28bed.js';
@@ -38,9 +44,45 @@ var initialData = [
         rows: [
             [
                 { content: 'Our plans' },
-                { content: 'Surgery', modalContent: 'More info on surgery' },
-                { content: 'Standard' },
-                { content: 'Premium' },
+                {
+                    type: 'CTA',
+                    content: 'Standard',
+                    subContent: '€234',
+                    href: 'http://example.com',
+                },
+                {
+                    type: 'CTA',
+                    content: 'Plus',
+                    subContent: '€344',
+                    href: 'http://example.com',
+                },
+                {
+                    type: 'CTA',
+                    content: 'Premium',
+                    subContent: '€556',
+                    href: 'http://example.com',
+                },
+            ],
+            [
+                { content: 'Select a plan' },
+                {
+                    type: 'BUTTON',
+                    content: 'Standard',
+                    subContent: '€234',
+                    onClick: function () { },
+                },
+                {
+                    type: 'BUTTON',
+                    content: 'Plus',
+                    subContent: '€344',
+                    onClick: function () { },
+                },
+                {
+                    type: 'BUTTON',
+                    content: 'Premium',
+                    subContent: '€556',
+                    onClick: function () { },
+                },
             ],
             [
                 {
@@ -48,8 +90,8 @@ var initialData = [
                     subContent: 'Annual Only',
                 },
                 { content: 'No', subContent: 'Annual Only' },
-                { content: 'Yes' },
-                { content: 'Yes' },
+                { content: '50%' },
+                { content: '80%-100%' },
             ],
             [
                 { content: 'Operations', modalContent: 'Operations info' },

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';\n\nconst initialData: TableData = [\n  {\n    rows: [\n      [\n        { content: 'Our plans' },\n        { content: 'Surgery', modalContent: 'More info on surgery' },\n        { content: 'Standard' },\n        { content: 'Premium' },\n      ],\n      [\n        {\n          content: 'Regular vet visits & medication',\n          subContent: 'Annual Only',\n        },\n        { content: 'No', subContent: 'Annual Only' },\n        { content: 'Yes' },\n        { content: 'Yes' },\n      ],\n      [\n        { content: 'Operations', modalContent: 'Operations info' },\n        { checkmarkValue: true, modalContent: 'Operations info column 2' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { content: '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={24} noMargin />,\n      title: 'Dental',\n    },\n    rows: [\n      [\n        { content: 'Regular vet visits & medication' },\n        { content: 'No' },\n        { content: 'Yes' },\n        { content: 'Yes' },\n      ],\n      [\n        { content: 'Operations', modalContent: 'info' },\n        { checkmarkValue: true, modalContent: 'Maybe' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { content: '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    section: {\n      title: 'Travel',\n      icon: <PlaneIcon size={24} noMargin />,\n    },\n    rows: [\n      [\n        { content: 'Regular vet visits & medication' },\n        { content: 'No', checkmarkValue: false },\n        { content: 'Yes' },\n        { content: 'Yes' },\n      ],\n      [\n        { content: 'Operations', modalContent: 'info' },\n        { checkmarkValue: true, modalContent: 'Maybe' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { content: '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    data: {\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    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  },\n};\n\nexport const TableStory = ({\n  collapsibleSections,\n  tableData,\n  hideDetails,\n  stickyHeaderTopOffset,\n  textOverrides,\n  title,\n}: TableProps) => (\n  <Table\n    collapsibleSections={collapsibleSections}\n    tableData={tableData}\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  rows: {\n    align?: 'center' | 'left' | 'right';\n    checkmarkValue?: boolean;\n    content?: 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"],"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';\n\nconst initialData: TableData = [\n  {\n    rows: [\n      [\n        { content: 'Our plans' },\n        {\n          type: 'CTA',\n          content: 'Standard',\n          subContent: '€234',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          content: 'Plus',\n          subContent: '€344',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          content: 'Premium',\n          subContent: '€556',\n          href: 'http://example.com',\n        },\n      ],\n      [\n        { content: 'Select a plan' },\n        {\n          type: 'BUTTON',\n          content: 'Standard',\n          subContent: '€234',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          content: 'Plus',\n          subContent: '€344',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          content: 'Premium',\n          subContent: '€556',\n          onClick: () => {},\n        },\n      ],\n      [\n        {\n          content: 'Regular vet visits & medication',\n          subContent: 'Annual Only',\n        },\n        { content: 'No', subContent: 'Annual Only' },\n        { content: '50%' },\n        { content: '80%-100%' },\n      ],\n      [\n        { content: 'Operations', modalContent: 'Operations info' },\n        { checkmarkValue: true, modalContent: 'Operations info column 2' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { content: '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={24} noMargin />,\n      title: 'Dental',\n    },\n    rows: [\n      [\n        { content: 'Regular vet visits & medication' },\n        { content: 'No' },\n        { content: 'Yes' },\n        { content: 'Yes' },\n      ],\n      [\n        { content: 'Operations', modalContent: 'info' },\n        { checkmarkValue: true, modalContent: 'Maybe' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { content: '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    section: {\n      title: 'Travel',\n      icon: <PlaneIcon size={24} noMargin />,\n    },\n    rows: [\n      [\n        { content: 'Regular vet visits & medication' },\n        { content: 'No', checkmarkValue: false },\n        { content: 'Yes' },\n        { content: 'Yes' },\n      ],\n      [\n        { content: 'Operations', modalContent: 'info' },\n        { checkmarkValue: true, modalContent: 'Maybe' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { content: '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    data: {\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    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  },\n};\n\nexport const TableStory = ({\n  collapsibleSections,\n  tableData,\n  hideDetails,\n  stickyHeaderTopOffset,\n  textOverrides,\n  title,\n}: TableProps) => (\n  <Table\n    collapsibleSections={collapsibleSections}\n    tableData={tableData}\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  rows: {\n    align?: 'center' | 'left' | 'right';\n    checkmarkValue?: boolean;\n    content?: 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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAM,WAAW,GAAc;IAC7B;QACE,IAAI,EAAE;YACJ;gBACE,EAAE,OAAO,EAAE,WAAW,EAAE;gBACxB;oBACE,IAAI,EAAE,KAAK;oBACX,OAAO,EAAE,UAAU;oBACnB,UAAU,EAAE,MAAM;oBAClB,IAAI,EAAE,oBAAoB;iBAC3B;gBACD;oBACE,IAAI,EAAE,KAAK;oBACX,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,MAAM;oBAClB,IAAI,EAAE,oBAAoB;iBAC3B;gBACD;oBACE,IAAI,EAAE,KAAK;oBACX,OAAO,EAAE,SAAS;oBAClB,UAAU,EAAE,MAAM;oBAClB,IAAI,EAAE,oBAAoB;iBAC3B;aACF;YACD;gBACE,EAAE,OAAO,EAAE,eAAe,EAAE;gBAC5B;oBACE,IAAI,EAAE,QAAQ;oBACd,OAAO,EAAE,UAAU;oBACnB,UAAU,EAAE,MAAM;oBAClB,OAAO,EAAE,eAAQ;iBAClB;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,MAAM;oBAClB,OAAO,EAAE,eAAQ;iBAClB;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,OAAO,EAAE,SAAS;oBAClB,UAAU,EAAE,MAAM;oBAClB,OAAO,EAAE,eAAQ;iBAClB;aACF;YACD;gBACE;oBACE,OAAO,EAAE,iCAAiC;oBAC1C,UAAU,EAAE,aAAa;iBAC1B;gBACD,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE;gBAC5C,EAAE,OAAO,EAAE,KAAK,EAAE;gBAClB,EAAE,OAAO,EAAE,UAAU,EAAE;aACxB;YACD;gBACE,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE;gBAC1D,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE,0BAA0B,EAAE;gBAClE,EAAE,cAAc,EAAE,KAAK,EAAE;gBACzB,EAAE,cAAc,EAAE,IAAI,EAAE;aACzB;YACD;gBACE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE;gBAClD,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;gBACrC;oBACE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE;oBACjC,YAAY,EAAE,sBAAsB;iBACrC;gBACD,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;aACvC;SACF;KACF;IACD;QACE,OAAO,EAAE;YACP,IAAI,EAAEA,IAAC,cAAc,IAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,SAAG;YAC3C,KAAK,EAAE,QAAQ;SAChB;QACD,IAAI,EAAE;YACJ;gBACE,EAAE,OAAO,EAAE,iCAAiC,EAAE;gBAC9C,EAAE,OAAO,EAAE,IAAI,EAAE;gBACjB,EAAE,OAAO,EAAE,KAAK,EAAE;gBAClB,EAAE,OAAO,EAAE,KAAK,EAAE;aACnB;YACD;gBACE,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE;gBAC/C,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE;gBAC/C,EAAE,cAAc,EAAE,KAAK,EAAE;gBACzB,EAAE,cAAc,EAAE,IAAI,EAAE;aACzB;YACD;gBACE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE;gBAC3C,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE;gBAC5D,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;gBACrC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;aACvC;SACF;KACF;IACD;QACE,OAAO,EAAE;YACP,KAAK,EAAE,QAAQ;YACf,IAAI,EAAEA,IAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,SAAG;SACvC;QACD,IAAI,EAAE;YACJ;gBACE,EAAE,OAAO,EAAE,iCAAiC,EAAE;gBAC9C,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE;gBACxC,EAAE,OAAO,EAAE,KAAK,EAAE;gBAClB,EAAE,OAAO,EAAE,KAAK,EAAE;aACnB;YACD;gBACE,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE;gBAC/C,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE;gBAC/C,EAAE,cAAc,EAAE,KAAK,EAAE;gBACzB,EAAE,cAAc,EAAE,IAAI,EAAE;aACzB;YACD;gBACE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE;gBAC3C,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE;gBAC5D,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;gBACrC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;aACvC;SACF;KACF;CACF,CAAC;IAEI,KAAK,GAAG;IACZ,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,UAAU,EACR,8DAA8D;SACjE;QACD,KAAK,EAAE;YACL,UAAU,EACR,wFAAwF;SAC3F;QACD,mBAAmB,EAAE;YACnB,UAAU,EAAE,6DAA6D;SAC1E;QACD,WAAW,EAAE;YACX,UAAU,EAAE,wDAAwD;SACrE;QACD,qBAAqB,EAAE;YACrB,UAAU,EACR,8DAA8D;SACjE;QACD,SAAS,EAAE;YACT,UAAU,EACR,oEAAoE;SACvE;QACD,aAAa,EAAE;YACb,UAAU,EACR,gFAAgF;SACnF;QACD,kBAAkB,EAAE;YAClB,UAAU,EACR,6GAA6G;YAC/G,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;aACnB;SACF;QACD,WAAW,EAAE;YACX,UAAU,EACR,2GAA2G;YAC7G,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;aACnB;SACF;KACF;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,WAAW;QACtB,mBAAmB,EAAE,KAAK;QAC1B,WAAW,EAAE,KAAK;QAClB,qBAAqB,EAAE,CAAC;QACxB,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE,EAAE;QACb,aAAa,EAAE;YACb,WAAW,EAAE,cAAc;YAC3B,WAAW,EAAE,cAAc;SAC5B;KACF;EACD;IAEW,UAAU,GAAG,UAAC,EAOd;QANX,mBAAmB,yBAAA,EACnB,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,qBAAqB,2BAAA,EACrB,aAAa,mBAAA,EACb,KAAK,WAAA;IACW,QAChBA,IAAC,KAAK,IACJ,mBAAmB,EAAE,mBAAmB,EACxC,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,qBAAqB,EAAE,qBAAqB,EAC5C,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,GACZ;AARc,EAShB;IAEW,aAAa,GAAG;IAC3B,QACEA,uBACG,sZAmBA,GACG,EACN;AACJ,EAAE;AAEF,UAAU,CAAC,SAAS,GAAG,OAAO;;;;;"}

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

@@ -7,15 +7,22 @@ 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 '../../style-inject.es-1f59c1d0.js';
+import './components/TableCell/BaseCell/BaseCell.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 './components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.js';
+import '../../index-3d286178.js';
+import '../comparisonTable/components/TableInfoButton/index.js';
+import '../icon/icons/Info.js';
+import '../../index-5e72c3d4.js';
+import './components/TableCell/CTACell/CTACell.js';
+import './components/TableCell/ButtonCell/ButtonCell.js';
+import '../button/index.js';
 import '../modal/bottomOrRegularModal/index.js';
 import '../modal/bottomModal/index.js';
 import '../modal/genericModal/index.js';
@@ -28,8 +35,7 @@ import '../../Collapsible-a355828b.js';
 import '../../index-a0ef2ab4.js';
 import './components/TableContents/TableContents.js';
 import './components/TableSection/TableSection.js';
-import '../../useTableNavigation-8e50b121.js';
-import '../../index-5e72c3d4.js';
+import '../../useTableNavigation-2899712c.js';
 import './components/TableControls/TableControls.js';
 import '../icon/icons/ChevronLeft.js';
 import '../../useScrollSync-b2d28bed.js';
@@ -106,7 +112,7 @@ describe('Table', function () {
             switch (_a.label) {
                 case 0:
                     user = customRender(jsx(Table, { tableData: tableData, title: "Test Table" })).user;
-                    return [4 /*yield*/, user.click(screen.getByText('View more info'))];
+                    return [4 /*yield*/, user.click(screen.getByTestId('ds-table-info-button'))];
                 case 1:
                     _a.sent();
                     expect(screen.getByText('Additional item')).toBeVisible();

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

@@ -1 +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';\nimport { TableSectionData } from './types';\n\nconst tableData: TableSectionData[] = [\n  {\n    section: {\n      title: 'Section 1',\n      icon: <span>Icon 1</span>,\n    },\n    rows: [[{ content: 'Item 1' }, { content: 'Item 2' }]],\n  },\n  {\n    section: {\n      title: 'Section 2',\n      icon: <span>Icon 2</span>,\n    },\n    rows: [\n      [\n        { content: 'Item 3' },\n        { content: 'Item 4', modalContent: 'Additional item' },\n      ],\n    ],\n  },\n];\n\ndescribe('Table', () => {\n  it('renders the table with sections and items', () => {\n    render(<Table tableData={tableData} 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 = [{ rows: tableData[0].rows }];\n\n    render(<Table tableData={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 tableData={tableData} 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 tableData={tableData} 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 tableData={tableData} 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 tableData={tableData} 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 tableData={tableData} 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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"}
+{"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';\nimport { TableSectionData } from './types';\n\nconst tableData: TableSectionData[] = [\n  {\n    section: {\n      title: 'Section 1',\n      icon: <span>Icon 1</span>,\n    },\n    rows: [[{ content: 'Item 1' }, { content: 'Item 2' }]],\n  },\n  {\n    section: {\n      title: 'Section 2',\n      icon: <span>Icon 2</span>,\n    },\n    rows: [\n      [\n        { content: 'Item 3' },\n        { content: 'Item 4', modalContent: 'Additional item' },\n      ],\n    ],\n  },\n];\n\ndescribe('Table', () => {\n  it('renders the table with sections and items', () => {\n    render(<Table tableData={tableData} 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 = [{ rows: tableData[0].rows }];\n\n    render(<Table tableData={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 tableData={tableData} 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 tableData={tableData} 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 tableData={tableData} 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 tableData={tableData} 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 tableData={tableData} title=\"Test Table\" />);\n\n    await user.click(screen.getByTestId('ds-table-info-button'));\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/BaseCell/BaseCell.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { c as classNames } from '../../../../../index-6ea95111.js';
+import CheckIcon from '../../../../icon/icons/Check.js';
+import StarFilledIcon from '../../../../icon/icons/StarFilled.js';
+import XIcon from '../../../../icon/icons/X.js';
+import ZapFilledIcon from '../../../../icon/icons/ZapFilled.js';
+import { s as styleInject } from '../../../../../style-inject.es-1f59c1d0.js';
+import { MiniProgressBar } from './MiniProgressBar/MiniProgressBar.js';
+import 'react';
+import '../../../../../index-3d286178.js';
+import TableInfoButton from '../../../../comparisonTable/components/TableInfoButton/index.js';
+import '../../../../../index-5e72c3d4.js';
+import '../../../../icon/IconWrapper/IconWrapper.js';
+import '../../../../../tslib.es6-a39f91fc.js';
+import '../../../../../_commonjsHelpers-4730bd53.js';
+import '../../../../icon/icons/Info.js';
+
+var css_248z = ".BaseCell-module_infoButton__VCstV {\n  min-height: initial;\n  height: initial;\n  width: initial;\n  padding: 0;\n}\n\n.BaseCell-module_icon__1775U {\n  margin: 2px;\n}\n\n.BaseCell-module_bigWithUnderline__2xx5X {\n  position: relative;\n  display: none;\n}\n.BaseCell-module_bigWithUnderline__2xx5X:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: calc( 50% + 16px );\n  height: 4px;\n  width: 100%;\n  max-width: 140px;\n  background-color: #8e8cee;\n}\n@media (min-width: 34rem) {\n  .BaseCell-module_bigWithUnderline__2xx5X {\n    display: flex;\n  }\n}";
+var styles = {"infoButton":"BaseCell-module_infoButton__VCstV","icon":"BaseCell-module_icon__1775U","bigWithUnderline":"BaseCell-module_bigWithUnderline__2xx5X"};
+styleInject(css_248z);
+
+var progressLookup = {
+    '30%': 1,
+    '50%': 2,
+    '70%': 3,
+    '75%': 4,
+    '80%': 4,
+    '90%': 4,
+    '75%-90%': 4,
+    '75%-100%': 4,
+    '80%-100%': 4,
+    '100%': 5,
+};
+var BaseCell = function (_a) {
+    var _b = _a.align, align = _b === void 0 ? 'center' : _b, checkmarkValue = _a.checkmarkValue, _c = _a.content, content = _c === void 0 ? '' : _c, _d = _a.modalContent, modalContent = _d === void 0 ? '' : _d, openModal = _a.openModal, rating = _a.rating, _e = _a.subContent, subContent = _e === void 0 ? '' : _e, _f = _a.contentFontVariant, contentFontVariant = _f === void 0 ? 'NORMAL' : _f;
+    var alignClassName = {
+        center: 'ta-center jc-center ai-center',
+        left: 'ta-left jc-start',
+        right: 'ta-right jc-end ai-end',
+    }[align];
+    var validRatingValues = [1, 2, 3];
+    var SelectedIcon = (rating === null || rating === void 0 ? void 0 : rating.type) === 'zap' ? ZapFilledIcon : StarFilledIcon;
+    var progressBarValue = typeof content === 'string' ? progressLookup[content] : undefined;
+    return (jsxs("div", { className: classNames('d-flex gap8 ai-center', {
+            'jc-center': align === 'center',
+        }), children: [jsxs("div", { className: classNames('d-flex fd-column', alignClassName), children: [progressBarValue !== undefined && (jsx(MiniProgressBar, { nFilledBars: progressBarValue })), (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)); }) })), jsxs("div", { className: "d-flex ai-center", children: [checkmarkValue !== undefined && (jsx("span", { title: checkmarkValue ? 'Yes' : 'No', children: checkmarkValue ? (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" })) })), content && contentFontVariant === 'NORMAL' && (jsx("div", { className: "p-p", "data-testid": "table-cell-content", children: content })), content && contentFontVariant === 'PRICE' && (jsx("div", { className: "p-h1 p--serif tc-primary-500", "data-testid": "table-cell-content", children: content })), content && contentFontVariant === 'BIG_WITH_UNDERLINE' && (jsx("div", { "aria-hidden": true, className: classNames('tc-grey-800 p-h2 p--serif', styles.bigWithUnderline), children: content }))] }), subContent && (jsx("div", { className: classNames('d-flex p-p--small tc-grey-500', alignClassName), children: subContent }))] }), modalContent && openModal && (jsx(TableInfoButton, { onClick: function () { return openModal(modalContent); } }))] }));
+};
+
+export { BaseCell };
+//# sourceMappingURL=BaseCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { Button } from '../../../../button';\nimport {\n  CheckIcon,\n  XIcon,\n  InfoIcon,\n  StarFilledIcon,\n  ZapFilledIcon,\n} from '../../../../icon';\nimport { ReactNode } from 'react';\nimport styles from './BaseCell.module.scss';\nimport { MiniProgressBar } from './MiniProgressBar/MiniProgressBar';\nimport { TableInfoButton } from '../../../../comparisonTable';\n\nexport type ContentFontVariant = 'NORMAL' | 'BIG_WITH_UNDERLINE' | 'PRICE';\n\nconst progressLookup: Record<string, number> = {\n  '30%': 1,\n  '50%': 2,\n  '70%': 3,\n  '75%': 4,\n  '80%': 4,\n  '90%': 4,\n  '75%-90%': 4,\n  '75%-100%': 4,\n  '80%-100%': 4,\n  '100%': 5,\n};\n\nexport type Alignment = 'center' | 'left' | 'right';\n\nexport type BaseCellProps = {\n  align?: Alignment;\n  checkmarkValue?: boolean;\n  content?: ReactNode;\n  modalContent?: ReactNode;\n  openModal?: (modalContent: ReactNode) => void;\n  subContent?: ReactNode;\n  rating?: {\n    value: number;\n    type: 'zap' | 'star';\n  };\n  contentFontVariant?: ContentFontVariant;\n};\n\nexport const BaseCell = ({\n  align = 'center',\n  checkmarkValue,\n  content = '',\n  modalContent = '',\n  openModal,\n  rating,\n  subContent = '',\n  contentFontVariant = 'NORMAL',\n}: BaseCellProps) => {\n  const alignClassName = {\n    center: 'ta-center jc-center ai-center',\n    left: 'ta-left jc-start',\n    right: 'ta-right jc-end ai-end',\n  }[align];\n\n  const validRatingValues: number[] = [1, 2, 3];\n  const SelectedIcon = rating?.type === 'zap' ? ZapFilledIcon : StarFilledIcon;\n\n  const progressBarValue =\n    typeof content === 'string' ? progressLookup[content] : undefined;\n\n  return (\n    <div\n      className={classNames('d-flex gap8 ai-center', {\n        'jc-center': align === 'center',\n      })}\n    >\n      <div className={classNames('d-flex fd-column', alignClassName)}>\n        {progressBarValue !== undefined && (\n          <MiniProgressBar nFilledBars={progressBarValue} />\n        )}\n\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        <div className=\"d-flex ai-center\">\n          {checkmarkValue !== undefined && (\n            <span title={checkmarkValue ? 'Yes' : 'No'}>\n              {checkmarkValue ? (\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          {content && contentFontVariant === 'NORMAL' && (\n            <div className=\"p-p\" data-testid=\"table-cell-content\">\n              {content}\n            </div>\n          )}\n\n          {content && contentFontVariant === 'PRICE' && (\n            <div\n              className=\"p-h1 p--serif tc-primary-500\"\n              data-testid=\"table-cell-content\"\n            >\n              {content}\n            </div>\n          )}\n\n          {content && contentFontVariant === 'BIG_WITH_UNDERLINE' && (\n            <div\n              aria-hidden\n              className={classNames(\n                'tc-grey-800 p-h2 p--serif',\n                styles.bigWithUnderline\n              )}\n            >\n              {content}\n            </div>\n          )}\n        </div>\n\n        {subContent && (\n          <div\n            className={classNames(\n              'd-flex p-p--small tc-grey-500',\n              alignClassName\n            )}\n          >\n            {subContent}\n          </div>\n        )}\n      </div>\n      {modalContent && openModal && (\n        <TableInfoButton onClick={() => openModal(modalContent)} />\n      )}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import { BaseCell } from './BaseCell.js';
+import '../../../../../index-6ea95111.js';
+import '../../../../icon/icons/Check.js';
+import 'react';
+import '../../../../icon/IconWrapper/IconWrapper.js';
+import '../../../../../tslib.es6-a39f91fc.js';
+import '../../../../../style-inject.es-1f59c1d0.js';
+import '../../../../icon/icons/StarFilled.js';
+import '../../../../icon/icons/X.js';
+import '../../../../icon/icons/ZapFilled.js';
+import './MiniProgressBar/MiniProgressBar.js';
+import '../../../../../index-3d286178.js';
+import '../../../../../_commonjsHelpers-4730bd53.js';
+import '../../../../comparisonTable/components/TableInfoButton/index.js';
+import '../../../../icon/icons/Info.js';
+import '../../../../../index-5e72c3d4.js';
+
+var story = {
+    title: 'JSX/Table/Cells',
+    component: BaseCell,
+    argTypes: {},
+    args: {
+        rating: {
+            value: 2,
+            type: 'zap',
+        },
+        content: 'For dogs',
+        subContent: 'Annual only',
+        modalContent: 'More info',
+        checkmarkValue: undefined,
+        contentFontVariant: 'NORMAL',
+    },
+};
+var BaseCellStory = function (_a) {
+    var content = _a.content, subContent = _a.subContent, modalContent = _a.modalContent, checkmarkValue = _a.checkmarkValue, rating = _a.rating, contentFontVariant = _a.contentFontVariant, align = _a.align;
+    return (jsx("div", { className: "p48 d-flex fd-column gap16 bg-white", children: jsx(BaseCell, { align: align, checkmarkValue: checkmarkValue, content: content, contentFontVariant: contentFontVariant, modalContent: modalContent, openModal: function () { }, rating: rating, subContent: subContent }) }));
+};
+BaseCellStory.storyName = 'BaseCell';
+
+export default story;
+export { BaseCellStory };
+//# sourceMappingURL=BaseCell.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCell.stories.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/BaseCell/BaseCell.stories.tsx"],"sourcesContent":["import { BaseCell } from './BaseCell';\n\nconst story = {\n  title: 'JSX/Table/Cells',\n  component: BaseCell,\n  argTypes: {},\n  args: {\n    rating: {\n      value: 2,\n      type: 'zap',\n    },\n    content: 'For dogs',\n    subContent: 'Annual only',\n    modalContent: 'More info',\n    checkmarkValue: undefined,\n    contentFontVariant: 'NORMAL',\n  },\n};\n\nexport const BaseCellStory = ({\n  content,\n  subContent,\n  modalContent,\n  checkmarkValue,\n  rating,\n  contentFontVariant,\n  align,\n}: React.ComponentProps<typeof BaseCell>) => (\n  <div className=\"p48 d-flex fd-column gap16 bg-white\">\n    <BaseCell\n      align={align}\n      checkmarkValue={checkmarkValue}\n      content={content}\n      contentFontVariant={contentFontVariant}\n      modalContent={modalContent}\n      openModal={() => {}}\n      rating={rating}\n      subContent={subContent}\n    />\n  </div>\n);\n\nBaseCellStory.storyName = 'BaseCell';\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;IAEM,KAAK,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,MAAM,EAAE;YACN,KAAK,EAAE,CAAC;YACR,IAAI,EAAE,KAAK;SACZ;QACD,OAAO,EAAE,UAAU;QACnB,UAAU,EAAE,aAAa;QACzB,YAAY,EAAE,WAAW;QACzB,cAAc,EAAE,SAAS;QACzB,kBAAkB,EAAE,QAAQ;KAC7B;EACD;IAEW,aAAa,GAAG,UAAC,EAQU;QAPtC,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,cAAc,oBAAA,EACd,MAAM,YAAA,EACN,kBAAkB,wBAAA,EAClB,KAAK,WAAA;IACsC,QAC3CA,aAAK,SAAS,EAAC,qCAAqC,YAClDA,IAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,kBAAkB,EACtC,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,eAAQ,EACnB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,GACtB,GACE;AAZqC,EAa3C;AAEF,aAAa,CAAC,SAAS,GAAG,UAAU;;;;;"}

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

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { c as classNames } from '../../../../../../index-6ea95111.js';
+import { s as styleInject } from '../../../../../../style-inject.es-1f59c1d0.js';
+
+var css_248z = ".MiniProgressBar-module_progressBar__2K07F {\n  margin-bottom: 4px;\n}\n.MiniProgressBar-module_progressBar__2K07F rect {\n  fill: #ebebff;\n}\n\n.MiniProgressBar-module_filledBars1__ZhQbV rect:first-child {\n  fill: #91919c;\n}\n\n.MiniProgressBar-module_filledBars2__2lH_z rect:nth-child(-n+2) {\n  fill: #91919c;\n}\n\n.MiniProgressBar-module_filledBars3__1OKUj rect:nth-child(-n+3) {\n  fill: #b0cdf3;\n}\n\n.MiniProgressBar-module_filledBars4__T9kuj rect:nth-child(-n+4) {\n  fill: #b0cdf3;\n}\n\n.MiniProgressBar-module_filledBars5__WxVpb rect {\n  fill: #8e8cee;\n}";
+var styles = {"progressBar":"MiniProgressBar-module_progressBar__2K07F","filledBars1":"MiniProgressBar-module_filledBars1__ZhQbV","filledBars2":"MiniProgressBar-module_filledBars2__2lH_z","filledBars3":"MiniProgressBar-module_filledBars3__1OKUj","filledBars4":"MiniProgressBar-module_filledBars4__T9kuj","filledBars5":"MiniProgressBar-module_filledBars5__WxVpb"};
+styleInject(css_248z);
+
+var MiniProgressBar = function (_a) {
+    var nFilledBars = _a.nFilledBars;
+    return (jsxs("svg", { className: classNames(styles.progressBar, styles["filledBars".concat(nFilledBars)]), width: "40", height: "6", viewBox: "0 0 40 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxs("g", { clipPath: "url(#clip0_37507_20658)", children: [jsx("rect", { id: "r1", x: "0.5", y: "0.5", width: "7", height: "5", rx: "1" }), jsx("rect", { id: "r2", x: "8.5", y: "0.5", width: "7", height: "5", rx: "1" }), jsx("rect", { id: "r3", x: "16.5", y: "0.5", width: "7", height: "5", rx: "1" }), jsx("rect", { id: "r4", x: "24.5", y: "0.5", width: "7", height: "5", rx: "1" }), jsx("rect", { id: "r5", x: "32.5", y: "0.5", width: "7", height: "5", rx: "1" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_37507_20658", children: jsx("rect", { width: "39", height: "5", fill: "white", transform: "translate(0.5 0.5)" }) }) })] }));
+};
+
+export { MiniProgressBar };
+//# sourceMappingURL=MiniProgressBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MiniProgressBar.js","sources":["../../../../../../../../../src/lib/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './MiniProgressBar.module.scss';\n\nexport const MiniProgressBar = ({ nFilledBars }: { nFilledBars: number }) => (\n  <svg\n    className={classNames(\n      styles.progressBar,\n      styles[`filledBars${nFilledBars}`]\n    )}\n    width=\"40\"\n    height=\"6\"\n    viewBox=\"0 0 40 6\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g clipPath=\"url(#clip0_37507_20658)\">\n      <rect id=\"r1\" x=\"0.5\" y=\"0.5\" width=\"7\" height=\"5\" rx=\"1\" />\n      <rect id=\"r2\" x=\"8.5\" y=\"0.5\" width=\"7\" height=\"5\" rx=\"1\" />\n      <rect id=\"r3\" x=\"16.5\" y=\"0.5\" width=\"7\" height=\"5\" rx=\"1\" />\n      <rect id=\"r4\" x=\"24.5\" y=\"0.5\" width=\"7\" height=\"5\" rx=\"1\" />\n      <rect id=\"r5\" x=\"32.5\" y=\"0.5\" width=\"7\" height=\"5\" rx=\"1\" />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_37507_20658\">\n        <rect\n          width=\"39\"\n          height=\"5\"\n          fill=\"white\"\n          transform=\"translate(0.5 0.5)\"\n        />\n      </clipPath>\n    </defs>\n  </svg>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;IAIa,eAAe,GAAG,UAAC,EAAwC;QAAtC,WAAW,iBAAA;IAAgC,QAC3EA,cACE,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,WAAW,EAClB,MAAM,CAAC,oBAAa,WAAW,CAAE,CAAC,CACnC,EACD,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,aAElCA,YAAG,QAAQ,EAAC,yBAAyB,aACnCC,cAAM,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,GAAG,EAC5DA,cAAM,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,GAAG,EAC5DA,cAAM,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,EAAC,CAAC,EAAC,KAAK,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,GAAG,EAC7DA,cAAM,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,EAAC,CAAC,EAAC,KAAK,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,GAAG,EAC7DA,cAAM,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,EAAC,CAAC,EAAC,KAAK,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,GAAG,IAC3D,EACJA,wBACEA,kBAAU,EAAE,EAAC,mBAAmB,YAC9BA,cACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,EACV,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,oBAAoB,GAC9B,GACO,GACN,IACH;AA7BqE;;;;"}

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

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { MiniProgressBar } from './MiniProgressBar.js';
+import '../../../../../../index-6ea95111.js';
+import '../../../../../../style-inject.es-1f59c1d0.js';
+
+var story = {
+    title: 'JSX/Table/Misc',
+    component: MiniProgressBar,
+    argTypes: {
+        nFilledBars: {
+            description: 'Number of filled bars to show (0-5)',
+            control: {
+                min: 0,
+                max: 5,
+                type: 'number',
+            },
+        },
+    },
+    args: {
+        nFilledBars: 3,
+    },
+};
+var MiniProgressBarStory = function (_a) {
+    var nFilledBars = _a.nFilledBars;
+    return (jsx(MiniProgressBar, { nFilledBars: nFilledBars }));
+};
+MiniProgressBarStory.storyName = 'MiniProgressBar';
+
+export default story;
+export { MiniProgressBarStory };
+//# sourceMappingURL=MiniProgressBar.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MiniProgressBar.stories.js","sources":["../../../../../../../../../src/lib/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.stories.tsx"],"sourcesContent":["import { MiniProgressBar } from './MiniProgressBar';\n\nconst story = {\n  title: 'JSX/Table/Misc',\n  component: MiniProgressBar,\n  argTypes: {\n    nFilledBars: {\n      description: 'Number of filled bars to show (0-5)',\n      control: {\n        min: 0,\n        max: 5,\n        type: 'number',\n      },\n    },\n  },\n  args: {\n    nFilledBars: 3,\n  },\n};\n\nexport const MiniProgressBarStory = ({\n  nFilledBars,\n}: React.ComponentProps<typeof MiniProgressBar>) => (\n  <MiniProgressBar nFilledBars={nFilledBars} />\n);\n\nMiniProgressBarStory.storyName = 'MiniProgressBar';\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;IAEM,KAAK,GAAG;IACZ,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,WAAW,EAAE,qCAAqC;YAClD,OAAO,EAAE;gBACP,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,QAAQ;aACf;SACF;KACF;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,CAAC;KACf;EACD;IAEW,oBAAoB,GAAG,UAAC,EAEU;QAD7C,WAAW,iBAAA;IACuC,QAClDA,IAAC,eAAe,IAAC,WAAW,EAAE,WAAW,GAAI;AADK,EAElD;AAEF,oBAAoB,CAAC,SAAS,GAAG,iBAAiB;;;;;"}

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

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { c as classNames } from '../../../../../index-6ea95111.js';
+import { s as styleInject } from '../../../../../style-inject.es-1f59c1d0.js';
+import { Button } from '../../../../button/index.js';
+import '../../../../../tslib.es6-a39f91fc.js';
+import 'react';
+
+var css_248z = ".ButtonCell-module_buttonCell__x4NNi {\n  color: #26262e;\n  border: 1px solid #d2d2d8;\n  transition: all 0.3s ease-in-out;\n}\n@media (max-width: 34rem) {\n  .ButtonCell-module_buttonCell__x4NNi {\n    max-width: calc(100% - 96px);\n  }\n}\n.ButtonCell-module_buttonCell__x4NNi:disabled {\n  border: none;\n  background-color: #f5f6fb;\n  color: #26262e;\n  opacity: 1;\n  cursor: default;\n}\n.ButtonCell-module_buttonCell__x4NNi:disabled:hover {\n  background-color: #f5f6fb;\n}\n@media (max-width: 34rem) {\n  .ButtonCell-module_buttonCell__x4NNi {\n    pointer-events: none;\n  }\n}\n\n.ButtonCell-module_withoutSubContent__3fRW7 {\n  height: 64px;\n}\n\n.ButtonCell-module_withSubContent__3k-BC {\n  height: 75px;\n}\n\n.ButtonCell-module_selected__22pF_ {\n  transition: all 0.3 ease-in-out;\n  border: 2px solid #8e8cee;\n  background-color: #f7f7ff;\n}";
+var styles = {"buttonCell":"ButtonCell-module_buttonCell__x4NNi","withoutSubContent":"ButtonCell-module_withoutSubContent__3fRW7","withSubContent":"ButtonCell-module_withSubContent__3k-BC","selected":"ButtonCell-module_selected__22pF_"};
+styleInject(css_248z);
+
+var ButtonCell = function (_a) {
+    var _b;
+    var isSelected = _a.isSelected, onClick = _a.onClick, content = _a.content, subContent = _a.subContent, disabled = _a.disabled;
+    return (jsx("div", { className: "w100 d-flex fd-column ai-center jc-center gap8", children: jsxs(Button, { className: classNames('w100 wmx5 d-flex fd-column', styles.buttonCell, (_b = {},
+                _b[styles.selected] = isSelected,
+                _b[styles.withoutSubContent] = !subContent,
+                _b[styles.withSubContent] = !!subContent,
+                _b)), variant: "filledWhite", type: "submit", onClick: onClick, disabled: disabled, children: [content, subContent && jsx("span", { className: "p-p tc-purple-500", children: subContent })] }) }));
+};
+
+export { ButtonCell };
+//# sourceMappingURL=ButtonCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonCell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './ButtonCell.module.scss';\nimport { Button } from '../../../../button';\nimport { ReactNode } from 'react';\n\nexport type ButtonCellProps = {\n  content?: ReactNode;\n  disabled?: boolean;\n  isSelected?: boolean;\n  onClick: () => void;\n  subContent?: ReactNode;\n};\n\nexport const ButtonCell = ({\n  isSelected,\n  onClick,\n  content,\n  subContent,\n  disabled,\n}: ButtonCellProps) => {\n  return (\n    <div className=\"w100 d-flex fd-column ai-center jc-center gap8\">\n      <Button\n        className={classNames('w100 wmx5 d-flex fd-column', styles.buttonCell, {\n          [styles.selected]: isSelected,\n          [styles.withoutSubContent]: !subContent,\n          [styles.withSubContent]: !!subContent,\n        })}\n        variant=\"filledWhite\"\n        type=\"submit\"\n        onClick={onClick}\n        disabled={disabled}\n      >\n        {content}\n        {subContent && <span className=\"p-p tc-purple-500\">{subContent}</span>}\n      </Button>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;IAca,UAAU,GAAG,UAAC,EAMT;;QALhB,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,QAAQ,cAAA;IAER,QACEA,aAAK,SAAS,EAAC,gDAAgD,YAC7DC,KAAC,MAAM,IACL,SAAS,EAAE,UAAU,CAAC,4BAA4B,EAAE,MAAM,CAAC,UAAU;gBACnE,GAAC,MAAM,CAAC,QAAQ,IAAG,UAAU;gBAC7B,GAAC,MAAM,CAAC,iBAAiB,IAAG,CAAC,UAAU;gBACvC,GAAC,MAAM,CAAC,cAAc,IAAG,CAAC,CAAC,UAAU;oBACrC,EACF,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,aAEjB,OAAO,EACP,UAAU,IAAID,cAAM,SAAS,EAAC,mBAAmB,YAAE,UAAU,GAAQ,IAC/D,GACL,EACN;AACJ;;;;"}

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

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ButtonCell } from './ButtonCell.js';
+import '../../../../../index-6ea95111.js';
+import '../../../../../style-inject.es-1f59c1d0.js';
+import '../../../../button/index.js';
+import '../../../../../tslib.es6-a39f91fc.js';
+import 'react';
+
+var story = {
+    title: 'JSX/Table/Cells',
+    component: ButtonCell,
+    argTypes: {},
+    args: {
+        isSelected: false,
+        content: 'Premium',
+        subContent: '€277/mo',
+        disabled: false,
+    },
+};
+var ButtonCellStory = function (_a) {
+    var isSelected = _a.isSelected, content = _a.content, subContent = _a.subContent, disabled = _a.disabled;
+    return (jsxs("div", { className: "p48 d-flex fd-column gap16 bg-white", children: [jsx(ButtonCell, { content: content, subContent: subContent, isSelected: isSelected, disabled: disabled, onClick: function () { } }), jsx(ButtonCell, { content: content, subContent: subContent, isSelected: true, disabled: disabled, onClick: function () { } }), jsx(ButtonCell, { content: content, subContent: subContent, disabled: true, onClick: function () { } }), jsx(ButtonCell, { content: content, isSelected: isSelected, disabled: disabled, onClick: function () { } }), jsx(ButtonCell, { content: content, isSelected: true, disabled: disabled, onClick: function () { } }), jsx(ButtonCell, { content: content, disabled: true, onClick: function () { } })] }));
+};
+ButtonCellStory.storyName = 'ButtonCell';
+
+export default story;
+export { ButtonCellStory };
+//# sourceMappingURL=ButtonCell.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonCell.stories.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.stories.tsx"],"sourcesContent":["import { ButtonCell } from './ButtonCell';\n\nconst story = {\n  title: 'JSX/Table/Cells',\n  component: ButtonCell,\n  argTypes: {},\n  args: {\n    isSelected: false,\n    content: 'Premium',\n    subContent: '€277/mo',\n    disabled: false,\n  },\n};\n\nexport const ButtonCellStory = ({\n  isSelected,\n  content,\n  subContent,\n  disabled,\n}: React.ComponentProps<typeof ButtonCell>) => (\n  <div className=\"p48 d-flex fd-column gap16 bg-white\">\n    <ButtonCell\n      content={content}\n      subContent={subContent}\n      isSelected={isSelected}\n      disabled={disabled}\n      onClick={() => {}}\n    />\n\n    <ButtonCell\n      content={content}\n      subContent={subContent}\n      isSelected\n      disabled={disabled}\n      onClick={() => {}}\n    />\n\n    <ButtonCell\n      content={content}\n      subContent={subContent}\n      disabled\n      onClick={() => {}}\n    />\n\n    <ButtonCell\n      content={content}\n      isSelected={isSelected}\n      disabled={disabled}\n      onClick={() => {}}\n    />\n\n    <ButtonCell\n      content={content}\n      isSelected\n      disabled={disabled}\n      onClick={() => {}}\n    />\n\n    <ButtonCell content={content} disabled onClick={() => {}} />\n  </div>\n);\n\nButtonCellStory.storyName = 'ButtonCell';\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;IAEM,KAAK,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;QACjB,OAAO,EAAE,SAAS;QAClB,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,KAAK;KAChB;EACD;IAEW,eAAe,GAAG,UAAC,EAKU;QAJxC,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,QAAQ,cAAA;IACqC,QAC7CA,cAAK,SAAS,EAAC,qCAAqC,aAClDC,IAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,eAAQ,GACjB,EAEFA,IAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,UAAU,QACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,eAAQ,GACjB,EAEFA,IAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,QAAQ,QACR,OAAO,EAAE,eAAQ,GACjB,EAEFA,IAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,eAAQ,GACjB,EAEFA,IAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,UAAU,QACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,eAAQ,GACjB,EAEFA,IAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,QAAC,OAAO,EAAE,eAAQ,GAAI,IACxD;AAxCuC,EAyC7C;AAEF,eAAe,CAAC,SAAS,GAAG,YAAY;;;;;"}

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

@@ -0,0 +1,21 @@
+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 = ".CTACell-module_narrow__1EPPT {\n  height: 40px;\n}";
+var styles = {"narrow":"CTACell-module_narrow__1EPPT"};
+styleInject(css_248z);
+
+var CTACell = function (_a) {
+    var _b;
+    var content = _a.content, subContent = _a.subContent, grey = _a.grey, narrow = _a.narrow, href = _a.href;
+    return (jsxs("div", { className: "wmn3 ta-center", children: [jsxs("p", { className: "p-h3", children: [content, subContent && jsxs("span", { className: "tc-purple-500", children: [" ", subContent] })] }), jsx("a", { className: classNames('mt16', (_b = {
+                        'p-btn--primary': !grey,
+                        'p-btn--secondary-grey': grey
+                    },
+                    _b[styles.narrow] = narrow,
+                    _b)), href: href, target: "_blank", rel: "noopener noreferrer", children: "Get covered" })] }));
+};
+
+export { CTACell };
+//# sourceMappingURL=CTACell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CTACell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/CTACell/CTACell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nexport type CTACellProps = {\n  content?: ReactNode;\n  subContent?: ReactNode;\n  grey?: boolean;\n  narrow?: boolean;\n  href: string;\n};\nimport styles from './CTACell.module.scss';\n\nexport const CTACell = ({\n  content,\n  subContent,\n  grey,\n  narrow,\n  href,\n}: CTACellProps) => {\n  return (\n    <div className=\"wmn3 ta-center\">\n      <p className=\"p-h3\">\n        {content}\n        {subContent && <span className=\"tc-purple-500\"> {subContent}</span>}\n      </p>\n      <a\n        className={classNames('mt16', {\n          'p-btn--primary': !grey,\n          'p-btn--secondary-grey': grey,\n          [styles.narrow]: narrow,\n        })}\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        Get covered\n      </a>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;IAYa,OAAO,GAAG,UAAC,EAMT;;QALb,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,IAAI,UAAA;IAEJ,QACEA,cAAK,SAAS,EAAC,gBAAgB,aAC7BA,YAAG,SAAS,EAAC,MAAM,aAChB,OAAO,EACP,UAAU,IAAIA,eAAM,SAAS,EAAC,eAAe,kBAAG,UAAU,IAAQ,IACjE,EACJC,WACE,SAAS,EAAE,UAAU,CAAC,MAAM;wBAC1B,gBAAgB,EAAE,CAAC,IAAI;wBACvB,uBAAuB,EAAE,IAAI;;oBAC7B,GAAC,MAAM,CAAC,MAAM,IAAG,MAAM;wBACvB,EACF,IAAI,EAAE,IAAI,EACV,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,4BAGvB,IACA,EACN;AACJ;;;;"}

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

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { CTACell } from './CTACell.js';
+import '../../../../../index-6ea95111.js';
+import '../../../../../style-inject.es-1f59c1d0.js';
+
+var story = {
+    title: 'JSX/Table/Cells',
+    component: CTACell,
+    argTypes: {},
+    args: {
+        content: 'Premium',
+        subContent: '€277',
+        grey: false,
+        narrow: false,
+    },
+};
+var CTACellStory = function (_a) {
+    var content = _a.content, subContent = _a.subContent, grey = _a.grey, narrow = _a.narrow;
+    return (jsx("div", { className: "p48 d-flex fd-column gap16 bg-white", children: jsx(CTACell, { content: content, subContent: subContent, href: "", grey: grey, narrow: narrow }) }));
+};
+CTACellStory.storyName = 'CTACell';
+
+export default story;
+export { CTACellStory };
+//# sourceMappingURL=CTACell.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CTACell.stories.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/CTACell/CTACell.stories.tsx"],"sourcesContent":["import { CTACell } from './CTACell';\n\nconst story = {\n  title: 'JSX/Table/Cells',\n  component: CTACell,\n  argTypes: {},\n  args: {\n    content: 'Premium',\n    subContent: '€277',\n    grey: false,\n    narrow: false,\n  },\n};\n\nexport const CTACellStory = ({\n  content,\n  subContent,\n  grey,\n  narrow,\n}: React.ComponentProps<typeof CTACell>) => (\n  <div className=\"p48 d-flex fd-column gap16 bg-white\">\n    <CTACell\n      content={content}\n      subContent={subContent}\n      href=\"\"\n      grey={grey}\n      narrow={narrow}\n    />\n  </div>\n);\n\nCTACellStory.storyName = 'CTACell';\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;IAEM,KAAK,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,UAAU,EAAE,MAAM;QAClB,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;KACd;EACD;IAEW,YAAY,GAAG,UAAC,EAKU;QAJrC,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,IAAI,UAAA,EACJ,MAAM,YAAA;IACoC,QAC1CA,aAAK,SAAS,EAAC,qCAAqC,YAClDA,IAAC,OAAO,IACN,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAC,EAAE,EACP,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,GACd,GACE;AAToC,EAU1C;AAEF,YAAY,CAAC,SAAS,GAAG,SAAS;;;;;"}