@popsure/dirty-swan 0.53.4 → 0.53.5

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

@@ -0,0 +1,254 @@
+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 '../../index-6ea95111.js';
+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 '../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';
+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-a355828b.js';
+import '../../index-a0ef2ab4.js';
+import './components/TableContents/TableContents.js';
+import '../../TableSection-f6d0028e.js';
+import '../../useTableNavigation-2899712c.js';
+import './components/TableControls/TableControls.js';
+import '../icon/icons/ChevronLeft.js';
+import '../../useScrollSync-b2d28bed.js';
+
+var initialData = [
+    {
+        rows: [
+            [
+                { text: 'Our plans' },
+                {
+                    type: 'CTA',
+                    title: 'Standard',
+                    price: '€234',
+                    buttonCaption: 'Get covered',
+                    href: 'http://example.com',
+                },
+                {
+                    type: 'CTA',
+                    title: 'Plus',
+                    price: '€344',
+                    buttonCaption: 'Get covered',
+                    href: 'http://example.com',
+                },
+                {
+                    type: 'CTA',
+                    title: 'Premium',
+                    price: '€556',
+                    buttonCaption: 'Get covered',
+                    href: 'http://example.com',
+                },
+            ],
+            [
+                { text: 'Select a plan' },
+                {
+                    type: 'BUTTON',
+                    buttonCaption: 'Standard',
+                    price: '€234',
+                    onClick: function () { },
+                },
+                {
+                    type: 'BUTTON',
+                    buttonCaption: 'Plus',
+                    price: '€344',
+                    onClick: function () { },
+                },
+                {
+                    type: 'BUTTON',
+                    buttonCaption: 'Premium',
+                    price: '€556',
+                    onClick: function () { },
+                },
+            ],
+            [
+                {
+                    text: 'Your contribution',
+                },
+                {
+                    text: '€210',
+                    description: 'per month',
+                    fontVariant: 'PRICE',
+                    modalContent: 'Price info',
+                },
+                {
+                    text: '€275',
+                    description: 'per month',
+                    fontVariant: 'PRICE',
+                    modalContent: 'Price info',
+                },
+                {
+                    text: '€310',
+                    description: 'per month',
+                    fontVariant: 'PRICE',
+                    modalContent: 'Price info',
+                },
+            ],
+            [
+                {
+                    text: 'Regular vet visits & medication',
+                    description: 'Annual Only',
+                },
+                { text: 'No', description: 'Annual Only' },
+                { text: '50%' },
+                { text: '80%-100%' },
+            ],
+            [
+                { text: 'Operations', modalContent: 'Operations info' },
+                { checkmarkValue: true, modalContent: 'Operations info column 2' },
+                { checkmarkValue: false },
+                { checkmarkValue: true },
+            ],
+            [
+                { text: 'Rating', modalContent: 'Rating info' },
+                { rating: { type: 'zap', value: 1 } },
+                {
+                    rating: { type: 'zap', value: 3 },
+                    modalContent: 'Rating info column 3',
+                },
+                { rating: { type: 'star', value: 3 } },
+            ],
+        ],
+    },
+    {
+        section: {
+            icon: jsx(DentalPlusIcon, { size: 24, noMargin: true }),
+            title: 'Dental',
+        },
+        rows: [
+            [
+                { text: 'Regular vet visits & medication' },
+                { text: 'No' },
+                { text: 'Yes' },
+                { text: 'Yes' },
+            ],
+            [
+                { text: 'Operations', modalContent: 'info' },
+                { checkmarkValue: true, modalContent: 'Maybe' },
+                { checkmarkValue: false },
+                { checkmarkValue: true },
+            ],
+            [
+                { text: 'Rating', modalContent: 'info' },
+                { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+                { rating: { type: 'zap', value: 3 } },
+                { rating: { type: 'star', value: 3 } },
+            ],
+        ],
+    },
+    {
+        section: {
+            title: 'Travel',
+            icon: jsx(PlaneIcon, { size: 24, noMargin: true }),
+        },
+        rows: [
+            [
+                { text: 'Regular vet visits & medication' },
+                { text: 'No', checkmarkValue: false },
+                { text: 'Yes' },
+                { text: 'Yes' },
+            ],
+            [
+                { text: 'Operations', modalContent: 'info' },
+                { checkmarkValue: true, modalContent: 'Maybe' },
+                { checkmarkValue: false },
+                { checkmarkValue: true },
+            ],
+            [
+                { text: 'Rating', modalContent: 'info' },
+                { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+                { rating: { type: 'zap', value: 3 } },
+                { rating: { type: 'star', value: 3 } },
+            ],
+        ],
+    },
+];
+var story = {
+    title: 'JSX/Table',
+    component: Table,
+    argTypes: {
+        data: {
+            subContent: 'This property allows to set the data of the Table component.',
+        },
+        title: {
+            subContent: 'This property allows to add a title to the Table component for accessibility purposes.',
+        },
+        collapsibleSections: {
+            subContent: 'This property allows to collapse the sections of the table.',
+        },
+        hideDetails: {
+            subContent: 'This property allows to hide the details of the table.',
+        },
+        stickyHeaderTopOffset: {
+            subContent: 'This property allows to set the offset of the sticky header.',
+        },
+        className: {
+            subContent: 'This property allows to set a custom class to the Table component.',
+        },
+        textOverrides: {
+            subContent: 'This property allows to set custom text for the show and hide details buttons.',
+        },
+        onSelectionChanged: {
+            subContent: 'This event is triggered when a selection is changed. It receives the index of the selection as an argument.',
+            table: {
+                category: 'Events',
+            },
+        },
+        onModalOpen: {
+            subContent: 'This event is triggered when a modal is opened. It receives the title and body of the modal as arguments.',
+            table: {
+                category: 'Events',
+            },
+        },
+    },
+    args: {
+        tableData: 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, tableData = _a.tableData, hideDetails = _a.hideDetails, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, textOverrides = _a.textOverrides, title = _a.title;
+    return (jsx(Table, { collapsibleSections: collapsibleSections, tableData: tableData, 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  rows: {\n    align?: 'center' | 'left' | 'right';\n    checkmarkValue?: boolean;\n    text?: ReactNode;\n    modalContent?: ReactNode;\n    subContent?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    openModal?: (modalContent: ReactNode) => void;\n  }[][];\n}[];\n      " }));
+};
+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, TableProps } from './Table';\nimport { DentalPlusIcon, PlaneIcon } from '../icon';\nimport { TableCellData, TableData } from './types';\n\nconst initialData: TableData = [\n  {\n    rows: [\n      [\n        { text: 'Our plans' },\n        {\n          type: 'CTA',\n          title: 'Standard',\n          price: '€234',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          title: 'Plus',\n          price: '€344',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          title: 'Premium',\n          price: '€556',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n      ],\n      [\n        { text: 'Select a plan' },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Standard',\n          price: '€234',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Plus',\n          price: '€344',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Premium',\n          price: '€556',\n          onClick: () => {},\n        },\n      ],\n      [\n        {\n          text: 'Your contribution',\n        },\n        {\n          text: '€210',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n        {\n          text: '€275',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n        {\n          text: '€310',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n      ],\n      [\n        {\n          text: 'Regular vet visits & medication',\n          description: 'Annual Only',\n        },\n        { text: 'No', description: 'Annual Only' },\n        { text: '50%' },\n        { text: '80%-100%' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'Operations info' },\n        { checkmarkValue: true, modalContent: 'Operations info column 2' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'Rating info' },\n        { rating: { type: 'zap', value: 1 } },\n        {\n          rating: { type: 'zap', value: 3 },\n          modalContent: 'Rating info column 3',\n        },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n  {\n    section: {\n      icon: <DentalPlusIcon size={24} noMargin />,\n      title: 'Dental',\n    },\n    rows: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No' },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'info' },\n        { checkmarkValue: true, modalContent: 'Maybe' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'info' },\n        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n  {\n    section: {\n      title: 'Travel',\n      icon: <PlaneIcon size={24} noMargin />,\n    },\n    rows: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No', checkmarkValue: false },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'info' },\n        { checkmarkValue: true, modalContent: 'Maybe' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'info' },\n        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n];\n\nconst story = {\n  title: 'JSX/Table',\n  component: Table,\n  argTypes: {\n    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    text?: ReactNode;\n    modalContent?: ReactNode;\n    subContent?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    openModal?: (modalContent: ReactNode) => void;\n  }[][];\n}[];\n      `}\n    </pre>\n  );\n};\n\nTableStory.storyName = 'Table';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}

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

@@ -0,0 +1,121 @@
+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 '../../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 '../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';
+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-a355828b.js';
+import '../../index-a0ef2ab4.js';
+import './components/TableContents/TableContents.js';
+import '../../TableSection-f6d0028e.js';
+import '../../useTableNavigation-2899712c.js';
+import './components/TableControls/TableControls.js';
+import '../icon/icons/ChevronLeft.js';
+import '../../useScrollSync-b2d28bed.js';
+
+var tableData = [
+    {
+        section: {
+            title: 'Section 1',
+            icon: jsx("span", { children: "Icon 1" }),
+        },
+        rows: [[{ text: 'Item 1' }, { text: 'Item 2' }]],
+    },
+    {
+        section: {
+            title: 'Section 2',
+            icon: jsx("span", { children: "Icon 2" }),
+        },
+        rows: [
+            [{ text: 'Item 3' }, { text: 'Item 4', modalContent: 'Additional item' }],
+        ],
+    },
+];
+describe('Table', function () {
+    it('renders the table with sections and items', function () {
+        customRender(jsx(Table, { tableData: tableData, 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 = [{ rows: tableData[0].rows }];
+        customRender(jsx(Table, { tableData: 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, { tableData: tableData, 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, { tableData: tableData, hideDetails: true, title: "Test Table" }));
+        expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();
+    });
+    it('hides the sections if hideDetails is true', function () {
+        customRender(jsx(Table, { tableData: tableData, 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, { tableData: tableData, 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, { tableData: tableData, title: "Test Table" })).user;
+                    return [4 /*yield*/, user.click(screen.getByTestId('ds-table-info-button'))];
+                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';\nimport { TableSectionData } from './types';\n\nconst tableData: TableSectionData[] = [\n  {\n    section: {\n      title: 'Section 1',\n      icon: <span>Icon 1</span>,\n    },\n    rows: [[{ text: 'Item 1' }, { text: 'Item 2' }]],\n  },\n  {\n    section: {\n      title: 'Section 2',\n      icon: <span>Icon 2</span>,\n    },\n    rows: [\n      [{ text: 'Item 3' }, { text: 'Item 4', modalContent: 'Additional item' }],\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.fontVariant, fontVariant = _c === void 0 ? 'NORMAL' : _c, _d = _a.description, description = _d === void 0 ? '' : _d, _e = _a.modalContent, modalContent = _e === void 0 ? '' : _e, openModal = _a.openModal, rating = _a.rating, _f = _a.text, text = _f === void 0 ? '' : _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 text === 'string' ? progressLookup[text] : 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" })) })), text && fontVariant === 'NORMAL' && (jsx("div", { className: "p-p", "data-testid": "table-cell-text", children: text })), text && fontVariant === 'PRICE' && (jsx("div", { className: "p-h1 p--serif tc-primary-500", "data-testid": "table-cell-content", children: text })), text && fontVariant === 'BIG_WITH_UNDERLINE' && (jsx("div", { "aria-hidden": true, className: classNames('tc-grey-800 p-h2 p--serif', styles.bigWithUnderline), children: text }))] }), description && (jsx("div", { className: classNames('d-flex p-p--small tc-grey-500', alignClassName), children: description }))] }), 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 {\n  CheckIcon,\n  XIcon,\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 FontVariant = 'NORMAL' | 'BIG_WITH_UNDERLINE' | 'PRICE';\n\nconst progressLookup: Record<string, number> = {\n  '30%': 1,\n  '50%': 2,\n  '70%': 3,\n  '75%': 4,\n  '80%': 4,\n  '90%': 4,\n  '75%-90%': 4,\n  '75%-100%': 4,\n  '80%-100%': 4,\n  '100%': 5,\n};\n\nexport type Alignment = 'center' | 'left' | 'right';\n\nexport type BaseCellProps = {\n  align?: Alignment;\n  checkmarkValue?: boolean;\n  fontVariant?: FontVariant;\n  description?: ReactNode;\n  modalContent?: ReactNode;\n  openModal?: (modalContent: ReactNode) => void;\n  text?: ReactNode;\n  rating?: {\n    value: number;\n    type: 'zap' | 'star';\n  };\n};\n\nexport const BaseCell = ({\n  align = 'center',\n  checkmarkValue,\n  fontVariant = 'NORMAL',\n  description = '',\n  modalContent = '',\n  openModal,\n  rating,\n  text = '',\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 text === 'string' ? progressLookup[text] : 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          {text && fontVariant === 'NORMAL' && (\n            <div className=\"p-p\" data-testid=\"table-cell-text\">\n              {text}\n            </div>\n          )}\n\n          {text && fontVariant === 'PRICE' && (\n            <div\n              className=\"p-h1 p--serif tc-primary-500\"\n              data-testid=\"table-cell-content\"\n            >\n              {text}\n            </div>\n          )}\n\n          {text && fontVariant === 'BIG_WITH_UNDERLINE' && (\n            <div\n              aria-hidden\n              className={classNames(\n                'tc-grey-800 p-h2 p--serif',\n                styles.bigWithUnderline\n              )}\n            >\n              {text}\n            </div>\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      {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: {
+        text: 'For dogs',
+        description: 'Annual only',
+        modalContent: 'More info',
+        fontVariant: 'NORMAL',
+        checkmarkValue: undefined,
+        rating: {
+            value: 2,
+            type: 'zap',
+        },
+    },
+};
+var BaseCellStory = function (_a) {
+    var text = _a.text, description = _a.description, modalContent = _a.modalContent, checkmarkValue = _a.checkmarkValue, rating = _a.rating, fontVariant = _a.fontVariant, align = _a.align;
+    return (jsx("div", { className: "p48 d-flex fd-column gap16 bg-white", children: jsx(BaseCell, { align: align, checkmarkValue: checkmarkValue, fontVariant: fontVariant, description: description, modalContent: modalContent, openModal: function () { }, rating: rating, text: text }) }));
+};
+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    text: 'For dogs',\n    description: 'Annual only',\n    modalContent: 'More info',\n    fontVariant: 'NORMAL',\n    checkmarkValue: undefined,\n    rating: {\n      value: 2,\n      type: 'zap',\n    },\n  },\n};\n\nexport const BaseCellStory = ({\n  text,\n  description,\n  modalContent,\n  checkmarkValue,\n  rating,\n  fontVariant,\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      fontVariant={fontVariant}\n      description={description}\n      modalContent={modalContent}\n      openModal={() => {}}\n      rating={rating}\n      text={text}\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,IAAI,EAAE,UAAU;QAChB,WAAW,EAAE,aAAa;QAC1B,YAAY,EAAE,WAAW;QACzB,WAAW,EAAE,QAAQ;QACrB,cAAc,EAAE,SAAS;QACzB,MAAM,EAAE;YACN,KAAK,EAAE,CAAC;YACR,IAAI,EAAE,KAAK;SACZ;KACF;EACD;IAEW,aAAa,GAAG,UAAC,EAQU;QAPtC,IAAI,UAAA,EACJ,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,cAAc,oBAAA,EACd,MAAM,YAAA,EACN,WAAW,iBAAA,EACX,KAAK,WAAA;IACsC,QAC3CA,aAAK,SAAS,EAAC,qCAAqC,YAClDA,IAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,eAAQ,EACnB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,GACV,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_withoutPrice__2rpe9 {\n  height: 64px;\n}\n\n.ButtonCell-module_withPrice__3bd_t {\n  height: 75px;\n}\n\n.ButtonCell-module_selected__22pF_ {\n  transition: all 0.3 ease-in-out;\n  border: 2px solid #8e8cee;\n  background-color: #f7f7ff;\n}";
+var styles = {"buttonCell":"ButtonCell-module_buttonCell__x4NNi","withoutPrice":"ButtonCell-module_withoutPrice__2rpe9","withPrice":"ButtonCell-module_withPrice__3bd_t","selected":"ButtonCell-module_selected__22pF_"};
+styleInject(css_248z);
+
+var ButtonCell = function (_a) {
+    var _b;
+    var isSelected = _a.isSelected, onClick = _a.onClick, buttonCaption = _a.buttonCaption, price = _a.price, 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.withoutPrice] = !price,
+                _b[styles.withPrice] = !!price,
+                _b)), variant: "filledWhite", type: "submit", onClick: onClick, disabled: disabled, children: [buttonCaption, price && jsx("span", { className: "p-p tc-purple-500", children: price })] }) }));
+};
+
+export { ButtonCell };
+//# sourceMappingURL=ButtonCell.js.map