@digigov/ui 2.0.0-e7d30530 → 2.0.0-eaf330f5

package/content/Table/Table.stories/index.js

@@ -0,0 +1,211 @@
+import React from "react";
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell
+} from "@digigov/ui/content/Table";
+var Table_stories_default = {
+  title: "Digigov UI/content/Table",
+  description: "Use the table component to make information easier to compare and scan for users.",
+  link: "https://guide.services.gov.gr/docs/components/table",
+  component: Table,
+  displayName: "Table"
+};
+const data = {
+  title: "\u03A7\u03C1\u03AE\u03C3\u03C4\u03B5\u03C2",
+  labels: {
+    name: "\u039F\u03BD\u03BF\u03BC\u03B1\u03C4\u03B5\u03C0\u03CE\u03BD\u03C5\u03BC\u03BF",
+    role: "\u03A1\u03CC\u03BB\u03BF\u03C2",
+    email: "Email",
+    phone: "\u038F\u03C1\u03B5\u03C2"
+  },
+  content: [
+    {
+      name: "\u039C\u03AC\u03C1\u03B9\u03BF\u03C2 \u039C\u03B5\u03BD\u03B5\u03BE\u03AD\u03C2",
+      role: "\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "marios@mail.com",
+      phone: "34"
+    },
+    {
+      name: "\u039A\u03B1\u03BB\u03BB\u03B9\u03CC\u03C0\u03B7 \u03A0\u03B1\u03C0\u03B1\u03B4\u03BF\u03C0\u03BF\u03CD\u03BB\u03BF\u03C5",
+      role: "\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "kalliopi@mail.com",
+      phone: "65"
+    },
+    {
+      name: "\u039C\u03B1\u03C1\u03AF\u03B1 \u03A6\u03BB\u03BF\u03CD\u03C0\u03B7",
+      role: "\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "maria@mail.com",
+      phone: "12"
+    },
+    {
+      name: "\u0397\u03BB\u03AD\u03BA\u03C4\u03C1\u03B1 \u0391\u03C0\u03BF\u03C3\u03C4\u03CC\u03BB\u03BF\u03C5",
+      role: "\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "ilektra@mail.com",
+      phone: "26"
+    }
+  ]
+};
+const WithControls = {
+  render: (args) => {
+    return /* @__PURE__ */ React.createElement(TableContainer, { border: args.containerBorder }, /* @__PURE__ */ React.createElement(
+      Table,
+      {
+        headerVariant: args.headerVariant,
+        verticalBorders: args.verticalBorders,
+        variant: args.variant,
+        dense: args.dense,
+        stacked: args.stacked
+      },
+      data && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TableCaption, { size: args.tableCaptionSize }, data.title), /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, data.labels && Object.keys(data.labels).map((key, index) => /* @__PURE__ */ React.createElement(
+        TableHeadCell,
+        {
+          key,
+          width: index === 0 && args.firstTableHeadCellWidth,
+          dataType: key === "phone" && args.tableHeadCellDataType
+        },
+        data.labels[key]
+      )))), /* @__PURE__ */ React.createElement(TableBody, null, data.content && data.content.map((item, index) => /* @__PURE__ */ React.createElement(
+        TableRow,
+        {
+          key: index,
+          highlight: index === 1 && args.tableRowHighlight,
+          color: index === 1 && args.tableRowColor
+        },
+        /* @__PURE__ */ React.createElement(TableDataCell, { "data-label": data.labels.name }, item.name),
+        /* @__PURE__ */ React.createElement(TableDataCell, { "data-label": data.labels.role }, item.role),
+        /* @__PURE__ */ React.createElement(TableDataCell, { "data-label": data.labels.email }, item.email),
+        /* @__PURE__ */ React.createElement(
+          TableDataCell,
+          {
+            "data-label": data.labels.phone,
+            dataType: args.tableHeadCellDataType
+          },
+          item.phone
+        )
+      ))))
+    ));
+  },
+  args: {
+    containerBorder: false,
+    headerVariant: "light",
+    verticalBorders: false,
+    variant: "default",
+    stacked: "md",
+    dense: false,
+    tableCaptionSize: "md",
+    tableRowHighlight: false,
+    tableRowColor: "primary",
+    firstTableHeadCellWidth: "25%",
+    tableHeadCellDataType: "text"
+  },
+  argTypes: {
+    containerBorder: {
+      control: {
+        type: "boolean"
+      }
+    },
+    headerVariant: {
+      options: ["dark", "light"],
+      control: { type: "inline-radio" }
+    },
+    verticalBorders: {
+      control: {
+        type: "boolean"
+      }
+    },
+    variant: {
+      control: { type: "inline-radio" },
+      options: ["default", "zebra"]
+    },
+    stacked: {
+      control: {
+        type: "select"
+      },
+      options: ["always", "sm", "md", "never"]
+    },
+    dense: {
+      control: {
+        type: "boolean"
+      }
+    },
+    tableCaptionSize: {
+      control: {
+        type: "select"
+      },
+      options: ["sm", "md", "lg", "xl"]
+    },
+    tableRowHighlight: {
+      control: {
+        type: "boolean"
+      }
+    },
+    tableRowColor: {
+      control: {
+        type: "inline-radio"
+      },
+      options: ["primary", "secondary"]
+    },
+    firstTableHeadCellWidth: {
+      control: {
+        type: "select"
+      },
+      options: ["25%", "33.3%", "50%", "66.6%", "75%", "100%", "full"]
+    },
+    tableHeadCellDataType: {
+      control: {
+        type: "inline-radio"
+      },
+      options: ["numeric", "text"]
+    }
+  },
+  parameters: {
+    controls: { exclude: ["ref"] }
+  }
+};
+import { Default } from "@digigov/ui/content/Table/__stories__/Default";
+import { TableCaptions } from "@digigov/ui/content/Table/__stories__/TableCaptions";
+import { NoData } from "@digigov/ui/content/Table/__stories__/NoData";
+import { VerticalHeaders } from "@digigov/ui/content/Table/__stories__/VerticalHeaders";
+import { ZebraProp } from "@digigov/ui/content/Table/__stories__/ZebraProp";
+import { NumericDataType } from "@digigov/ui/content/Table/__stories__/NumericDataType";
+import { VerticalBorders } from "@digigov/ui/content/Table/__stories__/VerticalBorders";
+import { Stacked } from "@digigov/ui/content/Table/__stories__/Stacked";
+import { DarkVariant } from "@digigov/ui/content/Table/__stories__/DarkVariant";
+import { DarkVariantWithVerticalHeaders } from "@digigov/ui/content/Table/__stories__/DarkVariantWithVerticalHeaders";
+import { WithLoader } from "@digigov/ui/content/Table/__stories__/WithLoader";
+import { DefinedWidth } from "@digigov/ui/content/Table/__stories__/DefinedWidth";
+import { Dense } from "@digigov/ui/content/Table/__stories__/Dense";
+import { RowColors } from "@digigov/ui/content/Table/__stories__/RowColors";
+import { MultipleProps } from "@digigov/ui/content/Table/__stories__/MultipleProps";
+import { WithSortFilters } from "@digigov/ui/content/Table/__stories__/WithSortFilters";
+import { WithFloatingScroll } from "@digigov/ui/content/Table/__stories__/WithFloatingScroll";
+import { Full } from "@digigov/ui/content/Table/__stories__/Full";
+export {
+  DarkVariant,
+  DarkVariantWithVerticalHeaders,
+  Default,
+  DefinedWidth,
+  Dense,
+  Full,
+  MultipleProps,
+  NoData,
+  NumericDataType,
+  RowColors,
+  Stacked,
+  TableCaptions,
+  VerticalBorders,
+  VerticalHeaders,
+  WithControls,
+  WithFloatingScroll,
+  WithLoader,
+  WithSortFilters,
+  ZebraProp,
+  Table_stories_default as default
+};
+//# sourceMappingURL=Table.stories.js.map

package/content/Table/Table.stories/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../cjs/content/Table/Table.stories/index.js"
+}

package/content/Table/Table.stories.d.ts

@@ -3,8 +3,6 @@ declare namespace _default {
     export let description: string;
     export let link: string;
     export { Table as component };
-    export let tags: string[];
-    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;

package/content/Table/Table.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/content/Table/Table.stories.jsx"],
+  "sourcesContent": ["import React from 'react';\n\nimport {\n  TableContainer,\n  Table,\n  TableCaption,\n  TableHead,\n  TableRow,\n  TableBody,\n  TableHeadCell,\n  TableDataCell,\n} from '@digigov/ui/content/Table';\n\nexport default {\n  title: 'Digigov UI/content/Table',\n  description:\n    'Use the table component to make information easier to compare and scan for users.',\n  link: 'https://guide.services.gov.gr/docs/components/table',\n  component: Table,\n  displayName: 'Table',\n};\n\nconst data = {\n  title: '\u03A7\u03C1\u03AE\u03C3\u03C4\u03B5\u03C2',\n  labels: {\n    name: '\u039F\u03BD\u03BF\u03BC\u03B1\u03C4\u03B5\u03C0\u03CE\u03BD\u03C5\u03BC\u03BF',\n    role: '\u03A1\u03CC\u03BB\u03BF\u03C2',\n    email: 'Email',\n    phone: '\u038F\u03C1\u03B5\u03C2',\n  },\n  content: [\n    {\n      name: '\u039C\u03AC\u03C1\u03B9\u03BF\u03C2 \u039C\u03B5\u03BD\u03B5\u03BE\u03AD\u03C2',\n      role: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'marios@mail.com',\n      phone: '34',\n    },\n    {\n      name: '\u039A\u03B1\u03BB\u03BB\u03B9\u03CC\u03C0\u03B7 \u03A0\u03B1\u03C0\u03B1\u03B4\u03BF\u03C0\u03BF\u03CD\u03BB\u03BF\u03C5',\n      role: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'kalliopi@mail.com',\n      phone: '65',\n    },\n    {\n      name: '\u039C\u03B1\u03C1\u03AF\u03B1 \u03A6\u03BB\u03BF\u03CD\u03C0\u03B7',\n      role: '\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'maria@mail.com',\n      phone: '12',\n    },\n    {\n      name: '\u0397\u03BB\u03AD\u03BA\u03C4\u03C1\u03B1 \u0391\u03C0\u03BF\u03C3\u03C4\u03CC\u03BB\u03BF\u03C5',\n      role: '\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'ilektra@mail.com',\n      phone: '26',\n    },\n  ],\n};\n\nexport const WithControls = {\n  render: (args) => {\n    return (\n      <TableContainer border={args.containerBorder}>\n        <Table\n          headerVariant={args.headerVariant}\n          verticalBorders={args.verticalBorders}\n          variant={args.variant}\n          dense={args.dense}\n          stacked={args.stacked}\n        >\n          {data && (\n            <>\n              <TableCaption size={args.tableCaptionSize}>\n                {data.title}\n              </TableCaption>\n              <TableHead>\n                <TableRow>\n                  {data.labels &&\n                    Object.keys(data.labels).map((key, index) => (\n                      <TableHeadCell\n                        key={key}\n                        width={index === 0 && args.firstTableHeadCellWidth}\n                        dataType={key === 'phone' && args.tableHeadCellDataType}\n                      >\n                        {data.labels[key]}\n                      </TableHeadCell>\n                    ))}\n                </TableRow>\n              </TableHead>\n              <TableBody>\n                {data.content &&\n                  data.content.map((item, index) => (\n                    <TableRow\n                      key={index}\n                      highlight={index === 1 && args.tableRowHighlight}\n                      color={index === 1 && args.tableRowColor}\n                    >\n                      <TableDataCell data-label={data.labels.name}>\n                        {item.name}\n                      </TableDataCell>\n                      <TableDataCell data-label={data.labels.role}>\n                        {item.role}\n                      </TableDataCell>\n                      <TableDataCell data-label={data.labels.email}>\n                        {item.email}\n                      </TableDataCell>\n                      <TableDataCell\n                        data-label={data.labels.phone}\n                        dataType={args.tableHeadCellDataType}\n                      >\n                        {item.phone}\n                      </TableDataCell>\n                    </TableRow>\n                  ))}\n              </TableBody>\n            </>\n          )}\n        </Table>\n      </TableContainer>\n    );\n  },\n  args: {\n    containerBorder: false,\n    headerVariant: 'light',\n    verticalBorders: false,\n    variant: 'default',\n    stacked: 'md',\n    dense: false,\n    tableCaptionSize: 'md',\n    tableRowHighlight: false,\n    tableRowColor: 'primary',\n    firstTableHeadCellWidth: '25%',\n    tableHeadCellDataType: 'text',\n  },\n  argTypes: {\n    containerBorder: {\n      control: {\n        type: 'boolean',\n      },\n    },\n    headerVariant: {\n      options: ['dark', 'light'],\n      control: { type: 'inline-radio' },\n    },\n    verticalBorders: {\n      control: {\n        type: 'boolean',\n      },\n    },\n    variant: {\n      control: { type: 'inline-radio' },\n      options: ['default', 'zebra'],\n    },\n    stacked: {\n      control: {\n        type: 'select',\n      },\n      options: ['always', 'sm', 'md', 'never'],\n    },\n    dense: {\n      control: {\n        type: 'boolean',\n      },\n    },\n    tableCaptionSize: {\n      control: {\n        type: 'select',\n      },\n      options: ['sm', 'md', 'lg', 'xl'],\n    },\n    tableRowHighlight: {\n      control: {\n        type: 'boolean',\n      },\n    },\n    tableRowColor: {\n      control: {\n        type: 'inline-radio',\n      },\n      options: ['primary', 'secondary'],\n    },\n    firstTableHeadCellWidth: {\n      control: {\n        type: 'select',\n      },\n      options: ['25%', '33.3%', '50%', '66.6%', '75%', '100%', 'full'],\n    },\n    tableHeadCellDataType: {\n      control: {\n        type: 'inline-radio',\n      },\n      options: ['numeric', 'text'],\n    },\n  },\n  parameters: {\n    controls: { exclude: ['ref'] },\n  },\n};\n\nexport { Default } from '@digigov/ui/content/Table/__stories__/Default';\nexport { TableCaptions } from '@digigov/ui/content/Table/__stories__/TableCaptions';\nexport { NoData } from '@digigov/ui/content/Table/__stories__/NoData';\nexport { VerticalHeaders } from '@digigov/ui/content/Table/__stories__/VerticalHeaders';\nexport { ZebraProp } from '@digigov/ui/content/Table/__stories__/ZebraProp';\nexport { NumericDataType } from '@digigov/ui/content/Table/__stories__/NumericDataType';\nexport { VerticalBorders } from '@digigov/ui/content/Table/__stories__/VerticalBorders';\nexport { Stacked } from '@digigov/ui/content/Table/__stories__/Stacked';\nexport { DarkVariant } from '@digigov/ui/content/Table/__stories__/DarkVariant';\nexport { DarkVariantWithVerticalHeaders } from '@digigov/ui/content/Table/__stories__/DarkVariantWithVerticalHeaders';\nexport { WithLoader } from '@digigov/ui/content/Table/__stories__/WithLoader';\nexport { DefinedWidth } from '@digigov/ui/content/Table/__stories__/DefinedWidth';\nexport { Dense } from '@digigov/ui/content/Table/__stories__/Dense';\nexport { RowColors } from '@digigov/ui/content/Table/__stories__/RowColors';\nexport { MultipleProps } from '@digigov/ui/content/Table/__stories__/MultipleProps';\nexport { WithSortFilters } from '@digigov/ui/content/Table/__stories__/WithSortFilters';\nexport { WithFloatingScroll } from '@digigov/ui/content/Table/__stories__/WithFloatingScroll';\nexport { Full } from '@digigov/ui/content/Table/__stories__/Full';\n"],
+  "mappings": "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",
+  "names": []
+}

package/content/Table/__stories__/DarkVariant/index.js

@@ -0,0 +1,50 @@
+import React from "react";
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell
+} from "@digigov/ui/content/Table";
+const data = {
+  title: "\u03A7\u03C1\u03AE\u03C3\u03C4\u03B5\u03C2",
+  labels: {
+    name: "\u039F\u03BD\u03BF\u03BC\u03B1\u03C4\u03B5\u03C0\u03CE\u03BD\u03C5\u03BC\u03BF",
+    role: "\u03A1\u03CC\u03BB\u03BF\u03C2",
+    email: "Email"
+  },
+  content: [
+    {
+      name: "\u039C\u03AC\u03C1\u03B9\u03BF\u03C2 \u039C\u03B5\u03BD\u03B5\u03BE\u03AD\u03C2",
+      role: "\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "marios@mail.com"
+    },
+    {
+      name: "\u039A\u03B1\u03BB\u03BB\u03B9\u03CC\u03C0\u03B7 \u03A0\u03B1\u03C0\u03B1\u03B4\u03BF\u03C0\u03BF\u03CD\u03BB\u03BF\u03C5",
+      role: "\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "kalliopi@mail.com"
+    },
+    {
+      name: "\u039C\u03B1\u03C1\u03AF\u03B1 \u03A6\u03BB\u03BF\u03CD\u03C0\u03B7",
+      role: "\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "maria@mail.com"
+    },
+    {
+      name: "\u0397\u03BB\u03AD\u03BA\u03C4\u03C1\u03B1 \u0391\u03C0\u03BF\u03C3\u03C4\u03CC\u03BB\u03BF\u03C5",
+      role: "\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "ilektra@mail.com"
+    }
+  ]
+};
+const DarkVariant = () => {
+  return /* @__PURE__ */ React.createElement(TableContainer, null, /* @__PURE__ */ React.createElement(Table, { headerVariant: "dark" }, data && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TableCaption, null, data.title), /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, data.labels && Object.keys(data.labels).map((key) => /* @__PURE__ */ React.createElement(TableHeadCell, { key }, data.labels[key])))), /* @__PURE__ */ React.createElement(TableBody, null, data.content && data.content.map((item, index) => /* @__PURE__ */ React.createElement(TableRow, { key: index }, /* @__PURE__ */ React.createElement(TableDataCell, { "data-label": data.labels.name }, item.name), /* @__PURE__ */ React.createElement(TableDataCell, { "data-label": data.labels.role }, item.role), /* @__PURE__ */ React.createElement(TableDataCell, { "data-label": data.labels.email }, item.email)))))));
+};
+var DarkVariant_default = DarkVariant;
+export {
+  DarkVariant,
+  DarkVariant_default as default
+};
+//# sourceMappingURL=DarkVariant.js.map

package/content/Table/__stories__/DarkVariant/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../cjs/content/Table/__stories__/DarkVariant/index.js"
+}

package/content/Table/__stories__/DarkVariant.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const DarkVariant: (_: any) => React.JSX.Element;
+export declare const DarkVariant: () => React.JSX.Element;
 export default DarkVariant;

package/content/Table/__stories__/DarkVariant.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/content/Table/__stories__/DarkVariant.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport {\n  TableContainer,\n  Table,\n  TableCaption,\n  TableHead,\n  TableRow,\n  TableBody,\n  TableHeadCell,\n  TableDataCell,\n} from '@digigov/ui/content/Table';\n\nconst data = {\n  title: '\u03A7\u03C1\u03AE\u03C3\u03C4\u03B5\u03C2',\n  labels: {\n    name: '\u039F\u03BD\u03BF\u03BC\u03B1\u03C4\u03B5\u03C0\u03CE\u03BD\u03C5\u03BC\u03BF',\n    role: '\u03A1\u03CC\u03BB\u03BF\u03C2',\n    email: 'Email',\n  },\n  content: [\n    {\n      name: '\u039C\u03AC\u03C1\u03B9\u03BF\u03C2 \u039C\u03B5\u03BD\u03B5\u03BE\u03AD\u03C2',\n      role: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'marios@mail.com',\n    },\n    {\n      name: '\u039A\u03B1\u03BB\u03BB\u03B9\u03CC\u03C0\u03B7 \u03A0\u03B1\u03C0\u03B1\u03B4\u03BF\u03C0\u03BF\u03CD\u03BB\u03BF\u03C5',\n      role: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'kalliopi@mail.com',\n    },\n    {\n      name: '\u039C\u03B1\u03C1\u03AF\u03B1 \u03A6\u03BB\u03BF\u03CD\u03C0\u03B7',\n      role: '\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'maria@mail.com',\n    },\n    {\n      name: '\u0397\u03BB\u03AD\u03BA\u03C4\u03C1\u03B1 \u0391\u03C0\u03BF\u03C3\u03C4\u03CC\u03BB\u03BF\u03C5',\n      role: '\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'ilektra@mail.com',\n    },\n  ],\n};\n\nexport const DarkVariant = () => {\n  return (\n    <TableContainer>\n      <Table headerVariant=\"dark\">\n        {data && (\n          <>\n            <TableCaption>{data.title}</TableCaption>\n            <TableHead>\n              <TableRow>\n                {data.labels &&\n                  Object.keys(data.labels).map((key) => (\n                    <TableHeadCell key={key}>{data.labels[key]}</TableHeadCell>\n                  ))}\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              {data.content &&\n                data.content.map((item, index) => (\n                  <TableRow key={index}>\n                    <TableDataCell data-label={data.labels.name}>\n                      {item.name}\n                    </TableDataCell>\n                    <TableDataCell data-label={data.labels.role}>\n                      {item.role}\n                    </TableDataCell>\n                    <TableDataCell data-label={data.labels.email}>\n                      {item.email}\n                    </TableDataCell>\n                  </TableRow>\n                ))}\n            </TableBody>\n          </>\n        )}\n      </Table>\n    </TableContainer>\n  );\n};\nexport default DarkVariant;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAEO,MAAM,cAAc,MAAM;AAC/B,SACE,oCAAC,sBACC,oCAAC,SAAM,eAAc,UAClB,QACC,0DACE,oCAAC,oBAAc,KAAK,KAAM,GAC1B,oCAAC,iBACC,oCAAC,gBACE,KAAK,UACJ,OAAO,KAAK,KAAK,MAAM,EAAE,IAAI,CAAC,QAC5B,oCAAC,iBAAc,OAAW,KAAK,OAAO,GAAG,CAAE,CAC5C,CACL,CACF,GACA,oCAAC,iBACE,KAAK,WACJ,KAAK,QAAQ,IAAI,CAAC,MAAM,UACtB,oCAAC,YAAS,KAAK,SACb,oCAAC,iBAAc,cAAY,KAAK,OAAO,QACpC,KAAK,IACR,GACA,oCAAC,iBAAc,cAAY,KAAK,OAAO,QACpC,KAAK,IACR,GACA,oCAAC,iBAAc,cAAY,KAAK,OAAO,SACpC,KAAK,KACR,CACF,CACD,CACL,CACF,CAEJ,CACF;AAEJ;AACA,IAAO,sBAAQ;",
+  "names": []
+}

package/content/Table/__stories__/DarkVariantWithVerticalHeaders/index.js

@@ -0,0 +1,50 @@
+import React from "react";
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell
+} from "@digigov/ui/content/Table";
+const data = {
+  title: "\u03A7\u03C1\u03AE\u03C3\u03C4\u03B5\u03C2",
+  labels: {
+    name: "\u039F\u03BD\u03BF\u03BC\u03B1\u03C4\u03B5\u03C0\u03CE\u03BD\u03C5\u03BC\u03BF",
+    role: "\u03A1\u03CC\u03BB\u03BF\u03C2",
+    email: "Email"
+  },
+  content: [
+    {
+      name: "\u039C\u03AC\u03C1\u03B9\u03BF\u03C2 \u039C\u03B5\u03BD\u03B5\u03BE\u03AD\u03C2",
+      role: "\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "marios@mail.com"
+    },
+    {
+      name: "\u039A\u03B1\u03BB\u03BB\u03B9\u03CC\u03C0\u03B7 \u03A0\u03B1\u03C0\u03B1\u03B4\u03BF\u03C0\u03BF\u03CD\u03BB\u03BF\u03C5",
+      role: "\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "kalliopi@mail.com"
+    },
+    {
+      name: "\u039C\u03B1\u03C1\u03AF\u03B1 \u03A6\u03BB\u03BF\u03CD\u03C0\u03B7",
+      role: "\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "maria@mail.com"
+    },
+    {
+      name: "\u0397\u03BB\u03AD\u03BA\u03C4\u03C1\u03B1 \u0391\u03C0\u03BF\u03C3\u03C4\u03CC\u03BB\u03BF\u03C5",
+      role: "\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "ilektra@mail.com"
+    }
+  ]
+};
+const DarkVariantWithVerticalHeaders = () => {
+  return /* @__PURE__ */ React.createElement(TableContainer, null, /* @__PURE__ */ React.createElement(Table, { headerVariant: "dark" }, data && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TableCaption, null, data.title), /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, data.labels && Object.keys(data.labels).map((key) => /* @__PURE__ */ React.createElement(TableHeadCell, { key }, data.labels[key])))), /* @__PURE__ */ React.createElement(TableBody, null, data.content && data.content.map((item, index) => /* @__PURE__ */ React.createElement(TableRow, { key: index }, /* @__PURE__ */ React.createElement(TableHeadCell, { "data-label": data.labels.name }, item.name), /* @__PURE__ */ React.createElement(TableDataCell, { "data-label": data.labels.role }, item.role), /* @__PURE__ */ React.createElement(TableDataCell, { "data-label": data.labels.email }, item.email)))))));
+};
+var DarkVariantWithVerticalHeaders_default = DarkVariantWithVerticalHeaders;
+export {
+  DarkVariantWithVerticalHeaders,
+  DarkVariantWithVerticalHeaders_default as default
+};
+//# sourceMappingURL=DarkVariantWithVerticalHeaders.js.map

package/content/Table/__stories__/DarkVariantWithVerticalHeaders/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../cjs/content/Table/__stories__/DarkVariantWithVerticalHeaders/index.js"
+}

package/content/Table/__stories__/DarkVariantWithVerticalHeaders.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const DarkVariantWithVerticalHeaders: (_: any) => React.JSX.Element;
+export declare const DarkVariantWithVerticalHeaders: () => React.JSX.Element;
 export default DarkVariantWithVerticalHeaders;

package/content/Table/__stories__/DarkVariantWithVerticalHeaders.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/content/Table/__stories__/DarkVariantWithVerticalHeaders.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport {\n  TableContainer,\n  Table,\n  TableCaption,\n  TableHead,\n  TableRow,\n  TableBody,\n  TableHeadCell,\n  TableDataCell,\n} from '@digigov/ui/content/Table';\n\nconst data = {\n  title: '\u03A7\u03C1\u03AE\u03C3\u03C4\u03B5\u03C2',\n  labels: {\n    name: '\u039F\u03BD\u03BF\u03BC\u03B1\u03C4\u03B5\u03C0\u03CE\u03BD\u03C5\u03BC\u03BF',\n    role: '\u03A1\u03CC\u03BB\u03BF\u03C2',\n    email: 'Email',\n  },\n  content: [\n    {\n      name: '\u039C\u03AC\u03C1\u03B9\u03BF\u03C2 \u039C\u03B5\u03BD\u03B5\u03BE\u03AD\u03C2',\n      role: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'marios@mail.com',\n    },\n    {\n      name: '\u039A\u03B1\u03BB\u03BB\u03B9\u03CC\u03C0\u03B7 \u03A0\u03B1\u03C0\u03B1\u03B4\u03BF\u03C0\u03BF\u03CD\u03BB\u03BF\u03C5',\n      role: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'kalliopi@mail.com',\n    },\n    {\n      name: '\u039C\u03B1\u03C1\u03AF\u03B1 \u03A6\u03BB\u03BF\u03CD\u03C0\u03B7',\n      role: '\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'maria@mail.com',\n    },\n    {\n      name: '\u0397\u03BB\u03AD\u03BA\u03C4\u03C1\u03B1 \u0391\u03C0\u03BF\u03C3\u03C4\u03CC\u03BB\u03BF\u03C5',\n      role: '\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'ilektra@mail.com',\n    },\n  ],\n};\n\nexport const DarkVariantWithVerticalHeaders = () => {\n  return (\n    <TableContainer>\n      <Table headerVariant=\"dark\">\n        {data && (\n          <>\n            <TableCaption>{data.title}</TableCaption>\n            <TableHead>\n              <TableRow>\n                {data.labels &&\n                  Object.keys(data.labels).map((key) => (\n                    <TableHeadCell key={key}>{data.labels[key]}</TableHeadCell>\n                  ))}\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              {data.content &&\n                data.content.map((item, index) => (\n                  <TableRow key={index}>\n                    <TableHeadCell data-label={data.labels.name}>\n                      {item.name}\n                    </TableHeadCell>\n                    <TableDataCell data-label={data.labels.role}>\n                      {item.role}\n                    </TableDataCell>\n                    <TableDataCell data-label={data.labels.email}>\n                      {item.email}\n                    </TableDataCell>\n                  </TableRow>\n                ))}\n            </TableBody>\n          </>\n        )}\n      </Table>\n    </TableContainer>\n  );\n};\nexport default DarkVariantWithVerticalHeaders;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAEO,MAAM,iCAAiC,MAAM;AAClD,SACE,oCAAC,sBACC,oCAAC,SAAM,eAAc,UAClB,QACC,0DACE,oCAAC,oBAAc,KAAK,KAAM,GAC1B,oCAAC,iBACC,oCAAC,gBACE,KAAK,UACJ,OAAO,KAAK,KAAK,MAAM,EAAE,IAAI,CAAC,QAC5B,oCAAC,iBAAc,OAAW,KAAK,OAAO,GAAG,CAAE,CAC5C,CACL,CACF,GACA,oCAAC,iBACE,KAAK,WACJ,KAAK,QAAQ,IAAI,CAAC,MAAM,UACtB,oCAAC,YAAS,KAAK,SACb,oCAAC,iBAAc,cAAY,KAAK,OAAO,QACpC,KAAK,IACR,GACA,oCAAC,iBAAc,cAAY,KAAK,OAAO,QACpC,KAAK,IACR,GACA,oCAAC,iBAAc,cAAY,KAAK,OAAO,SACpC,KAAK,KACR,CACF,CACD,CACL,CACF,CAEJ,CACF;AAEJ;AACA,IAAO,yCAAQ;",
+  "names": []
+}

package/content/Table/__stories__/Default/index.js

@@ -0,0 +1,45 @@
+import React from "react";
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell
+} from "@digigov/ui/content/Table";
+const data = {
+  title: "\u03A7\u03C1\u03AE\u03C3\u03C4\u03B5\u03C2",
+  labels: {
+    name: "\u039F\u03BD\u03BF\u03BC\u03B1\u03C4\u03B5\u03C0\u03CE\u03BD\u03C5\u03BC\u03BF",
+    role: "\u03A1\u03CC\u03BB\u03BF\u03C2",
+    email: "Email"
+  },
+  content: [
+    {
+      name: "\u039C\u03AC\u03C1\u03B9\u03BF\u03C2 \u039C\u03B5\u03BD\u03B5\u03BE\u03AD\u03C2",
+      role: "\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "marios@mail.com"
+    },
+    {
+      name: "\u039A\u03B1\u03BB\u03BB\u03B9\u03CC\u03C0\u03B7 \u03A0\u03B1\u03C0\u03B1\u03B4\u03BF\u03C0\u03BF\u03CD\u03BB\u03BF\u03C5",
+      role: "\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "kalliopi@mail.com"
+    },
+    {
+      name: "\u039C\u03B1\u03C1\u03AF\u03B1 \u03A6\u03BB\u03BF\u03CD\u03C0\u03B7",
+      role: "\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "maria@mail.com"
+    }
+  ]
+};
+const Default = () => {
+  return /* @__PURE__ */ React.createElement(TableContainer, null, /* @__PURE__ */ React.createElement(Table, null, data && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TableCaption, null, data.title), /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, data.labels && Object.keys(data.labels).map((key) => /* @__PURE__ */ React.createElement(TableHeadCell, { key }, data.labels[key])))), /* @__PURE__ */ React.createElement(TableBody, null, data.content && data.content.map((item, index) => /* @__PURE__ */ React.createElement(TableRow, { key: index }, /* @__PURE__ */ React.createElement(TableDataCell, { "data-label": data.labels.name }, item.name), /* @__PURE__ */ React.createElement(TableDataCell, { "data-label": data.labels.role }, item.role), /* @__PURE__ */ React.createElement(TableDataCell, { "data-label": data.labels.email }, item.email)))))));
+};
+var Default_default = Default;
+export {
+  Default,
+  Default_default as default
+};
+//# sourceMappingURL=Default.js.map

package/content/Table/__stories__/Default/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../cjs/content/Table/__stories__/Default/index.js"
+}

package/content/Table/__stories__/Default.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Default: (_: any) => React.JSX.Element;
+export declare const Default: () => React.JSX.Element;
 export default Default;

package/content/Table/__stories__/Default.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/content/Table/__stories__/Default.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport {\n  TableContainer,\n  Table,\n  TableCaption,\n  TableHead,\n  TableRow,\n  TableBody,\n  TableHeadCell,\n  TableDataCell,\n} from '@digigov/ui/content/Table';\n\nconst data = {\n  title: '\u03A7\u03C1\u03AE\u03C3\u03C4\u03B5\u03C2',\n  labels: {\n    name: '\u039F\u03BD\u03BF\u03BC\u03B1\u03C4\u03B5\u03C0\u03CE\u03BD\u03C5\u03BC\u03BF',\n    role: '\u03A1\u03CC\u03BB\u03BF\u03C2',\n    email: 'Email',\n  },\n  content: [\n    {\n      name: '\u039C\u03AC\u03C1\u03B9\u03BF\u03C2 \u039C\u03B5\u03BD\u03B5\u03BE\u03AD\u03C2',\n      role: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'marios@mail.com',\n    },\n    {\n      name: '\u039A\u03B1\u03BB\u03BB\u03B9\u03CC\u03C0\u03B7 \u03A0\u03B1\u03C0\u03B1\u03B4\u03BF\u03C0\u03BF\u03CD\u03BB\u03BF\u03C5',\n      role: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'kalliopi@mail.com',\n    },\n    {\n      name: '\u039C\u03B1\u03C1\u03AF\u03B1 \u03A6\u03BB\u03BF\u03CD\u03C0\u03B7',\n      role: '\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'maria@mail.com',\n    },\n  ],\n};\n\nexport const Default = () => {\n  return (\n    <TableContainer>\n      <Table>\n        {data && (\n          <>\n            <TableCaption>{data.title}</TableCaption>\n            <TableHead>\n              <TableRow>\n                {data.labels &&\n                  Object.keys(data.labels).map((key) => (\n                    <TableHeadCell key={key}>{data.labels[key]}</TableHeadCell>\n                  ))}\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              {data.content &&\n                data.content.map((item, index) => (\n                  <TableRow key={index}>\n                    <TableDataCell data-label={data.labels.name}>\n                      {item.name}\n                    </TableDataCell>\n                    <TableDataCell data-label={data.labels.role}>\n                      {item.role}\n                    </TableDataCell>\n                    <TableDataCell data-label={data.labels.email}>\n                      {item.email}\n                    </TableDataCell>\n                  </TableRow>\n                ))}\n            </TableBody>\n          </>\n        )}\n      </Table>\n    </TableContainer>\n  );\n};\nexport default Default;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAEO,MAAM,UAAU,MAAM;AAC3B,SACE,oCAAC,sBACC,oCAAC,aACE,QACC,0DACE,oCAAC,oBAAc,KAAK,KAAM,GAC1B,oCAAC,iBACC,oCAAC,gBACE,KAAK,UACJ,OAAO,KAAK,KAAK,MAAM,EAAE,IAAI,CAAC,QAC5B,oCAAC,iBAAc,OAAW,KAAK,OAAO,GAAG,CAAE,CAC5C,CACL,CACF,GACA,oCAAC,iBACE,KAAK,WACJ,KAAK,QAAQ,IAAI,CAAC,MAAM,UACtB,oCAAC,YAAS,KAAK,SACb,oCAAC,iBAAc,cAAY,KAAK,OAAO,QACpC,KAAK,IACR,GACA,oCAAC,iBAAc,cAAY,KAAK,OAAO,QACpC,KAAK,IACR,GACA,oCAAC,iBAAc,cAAY,KAAK,OAAO,SACpC,KAAK,KACR,CACF,CACD,CACL,CACF,CAEJ,CACF;AAEJ;AACA,IAAO,kBAAQ;",
+  "names": []
+}

package/content/Table/__stories__/DefinedWidth/index.js

@@ -0,0 +1,45 @@
+import React from "react";
+import {
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell,
+  TableCaption
+} from "@digigov/ui/content/Table";
+const data = {
+  title: "\u03A7\u03C1\u03AE\u03C3\u03C4\u03B5\u03C2",
+  labels: {
+    name: "\u039F\u03BD\u03BF\u03BC\u03B1\u03C4\u03B5\u03C0\u03CE\u03BD\u03C5\u03BC\u03BF",
+    role: "\u03A1\u03CC\u03BB\u03BF\u03C2",
+    email: "Email"
+  },
+  content: [
+    {
+      name: "\u039C\u03AC\u03C1\u03B9\u03BF\u03C2 \u039C\u03B5\u03BD\u03B5\u03BE\u03AD\u03C2",
+      role: "\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "marios@mail.com"
+    },
+    {
+      name: "\u039A\u03B1\u03BB\u03BB\u03B9\u03CC\u03C0\u03B7 \u03A0\u03B1\u03C0\u03B1\u03B4\u03BF\u03C0\u03BF\u03CD\u03BB\u03BF\u03C5",
+      role: "\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "kalliopi@mail.com"
+    },
+    {
+      name: "\u039C\u03B1\u03C1\u03AF\u03B1 \u03A6\u03BB\u03BF\u03CD\u03C0\u03B7",
+      role: "\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "maria@mail.com"
+    }
+  ]
+};
+const DefinedWidth = () => {
+  return /* @__PURE__ */ React.createElement(TableContainer, null, /* @__PURE__ */ React.createElement(Table, null, data && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TableCaption, null, data.title), /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, data.labels && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TableHeadCell, { width: "50%" }, data.labels.name), /* @__PURE__ */ React.createElement(TableHeadCell, { width: "25%" }, data.labels.role), /* @__PURE__ */ React.createElement(TableHeadCell, { width: "25%" }, data.labels.email)))), /* @__PURE__ */ React.createElement(TableBody, null, data.content && data.content.map((item, index) => /* @__PURE__ */ React.createElement(TableRow, { key: index }, /* @__PURE__ */ React.createElement(TableHeadCell, { "data-label": data.labels.name }, item.name), /* @__PURE__ */ React.createElement(TableDataCell, { "data-label": data.labels.role }, item.role), /* @__PURE__ */ React.createElement(TableDataCell, { "data-label": data.labels.email }, item.email)))))));
+};
+var DefinedWidth_default = DefinedWidth;
+export {
+  DefinedWidth,
+  DefinedWidth_default as default
+};
+//# sourceMappingURL=DefinedWidth.js.map

package/content/Table/__stories__/DefinedWidth/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../cjs/content/Table/__stories__/DefinedWidth/index.js"
+}

package/content/Table/__stories__/DefinedWidth.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const DefinedWidth: (_: any) => React.JSX.Element;
+export declare const DefinedWidth: () => React.JSX.Element;
 export default DefinedWidth;

package/content/Table/__stories__/DefinedWidth.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/content/Table/__stories__/DefinedWidth.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport {\n  TableContainer,\n  Table,\n  TableHead,\n  TableRow,\n  TableBody,\n  TableHeadCell,\n  TableDataCell,\n  TableCaption,\n} from '@digigov/ui/content/Table';\n\nconst data = {\n  title: '\u03A7\u03C1\u03AE\u03C3\u03C4\u03B5\u03C2',\n  labels: {\n    name: '\u039F\u03BD\u03BF\u03BC\u03B1\u03C4\u03B5\u03C0\u03CE\u03BD\u03C5\u03BC\u03BF',\n    role: '\u03A1\u03CC\u03BB\u03BF\u03C2',\n    email: 'Email',\n  },\n  content: [\n    {\n      name: '\u039C\u03AC\u03C1\u03B9\u03BF\u03C2 \u039C\u03B5\u03BD\u03B5\u03BE\u03AD\u03C2',\n      role: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'marios@mail.com',\n    },\n    {\n      name: '\u039A\u03B1\u03BB\u03BB\u03B9\u03CC\u03C0\u03B7 \u03A0\u03B1\u03C0\u03B1\u03B4\u03BF\u03C0\u03BF\u03CD\u03BB\u03BF\u03C5',\n      role: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'kalliopi@mail.com',\n    },\n    {\n      name: '\u039C\u03B1\u03C1\u03AF\u03B1 \u03A6\u03BB\u03BF\u03CD\u03C0\u03B7',\n      role: '\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n      email: 'maria@mail.com',\n    },\n  ],\n};\n\nexport const DefinedWidth = () => {\n  return (\n    <TableContainer>\n      <Table>\n        {data && (\n          <>\n            <TableCaption>{data.title}</TableCaption>\n            <TableHead>\n              <TableRow>\n                {data.labels && (\n                  <>\n                    <TableHeadCell width=\"50%\">\n                      {data.labels.name}\n                    </TableHeadCell>\n                    <TableHeadCell width=\"25%\">\n                      {data.labels.role}\n                    </TableHeadCell>\n                    <TableHeadCell width=\"25%\">\n                      {data.labels.email}\n                    </TableHeadCell>\n                  </>\n                )}\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              {data.content &&\n                data.content.map((item, index) => (\n                  <TableRow key={index}>\n                    <TableHeadCell data-label={data.labels.name}>\n                      {item.name}\n                    </TableHeadCell>\n                    <TableDataCell data-label={data.labels.role}>\n                      {item.role}\n                    </TableDataCell>\n                    <TableDataCell data-label={data.labels.email}>\n                      {item.email}\n                    </TableDataCell>\n                  </TableRow>\n                ))}\n            </TableBody>\n          </>\n        )}\n      </Table>\n    </TableContainer>\n  );\n};\nexport default DefinedWidth;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAEO,MAAM,eAAe,MAAM;AAChC,SACE,oCAAC,sBACC,oCAAC,aACE,QACC,0DACE,oCAAC,oBAAc,KAAK,KAAM,GAC1B,oCAAC,iBACC,oCAAC,gBACE,KAAK,UACJ,0DACE,oCAAC,iBAAc,OAAM,SAClB,KAAK,OAAO,IACf,GACA,oCAAC,iBAAc,OAAM,SAClB,KAAK,OAAO,IACf,GACA,oCAAC,iBAAc,OAAM,SAClB,KAAK,OAAO,KACf,CACF,CAEJ,CACF,GACA,oCAAC,iBACE,KAAK,WACJ,KAAK,QAAQ,IAAI,CAAC,MAAM,UACtB,oCAAC,YAAS,KAAK,SACb,oCAAC,iBAAc,cAAY,KAAK,OAAO,QACpC,KAAK,IACR,GACA,oCAAC,iBAAc,cAAY,KAAK,OAAO,QACpC,KAAK,IACR,GACA,oCAAC,iBAAc,cAAY,KAAK,OAAO,SACpC,KAAK,KACR,CACF,CACD,CACL,CACF,CAEJ,CACF;AAEJ;AACA,IAAO,uBAAQ;",
+  "names": []
+}