@veeqo/ui 11.1.0 → 11.3.0

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.js

@@ -0,0 +1,40 @@
+import React__default from 'react';
+import { Skeleton } from '../../../../Skeleton/Skeleton.js';
+import { buildClassnames } from '../../../../../utils/buildClassnames.js';
+import 'uid/secure';
+import { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles.js';
+import '@tanstack/react-table';
+import '../../../../Stack/Stack.js';
+import '../../../../Stack/types.js';
+import { theme } from '../../../../../theme/index.js';
+import '../../../../Choice/components/styled.js';
+import '../../../../Text/Text.js';
+import '../../../../Checkbox/styled.js';
+import '../../../../Radio/Radio.js';
+import { CellContent } from '../../CellContent/CellContent.js';
+import styles from '../BodyCell/BodyCell.module.scss.js';
+
+/**
+ * A cell component for the DataGrid that displays a skeleton loader.
+ */
+const LoadingBodyCell = ({ column }) => {
+    const { justifyContent, textAlign } = column.columnDef.meta;
+    const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({
+        column,
+    });
+    const loadingCellClassname = buildClassnames([
+        styles.bodyCell,
+        pinnedCellClassName,
+        'data-grid-cell',
+        'data-grid-cell-loading',
+    ]);
+    return (React__default.createElement("td", { className: loadingCellClassname, style: pinnedCellStyles, "aria-colindex": column.getIndex() + 1 },
+        React__default.createElement(CellContent, { contentStyle: {
+                justifyContent,
+                textAlign,
+            } },
+            React__default.createElement(Skeleton, { width: "75%", height: theme.sizes[3] }))));
+};
+
+export { LoadingBodyCell };
+//# sourceMappingURL=LoadingBodyCell.js.map

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n  /**\n   * The TanStack Table column instance.\n   */\n  column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n  const { justifyContent, textAlign } = column.columnDef.meta!;\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column,\n  });\n\n  const loadingCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n    'data-grid-cell-loading',\n  ]);\n\n  return (\n    <td\n      className={loadingCellClassname}\n      style={pinnedCellStyles}\n      aria-colindex={column.getIndex() + 1}\n    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        <Skeleton width=\"75%\" height={theme.sizes[3]} />\n      </CellContent>\n    </td>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;AAkBA;;AAEG;MACU,eAAe,GAAG,CAAC,EAAE,MAAM,EAAwB,KAAI;IAClE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,IAAK;AAC5D,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC;QACtE,MAAM;AACP,KAAA,CAAC;IAEF,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAC3C,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;QAChB,wBAAwB;AACzB,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,gBAAgB,mBACR,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAA;QAEpCA,cAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA;AAG1B,YAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAC,KAAK,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACpC,CACX;AAET;;;;"}

package/dist/components/DataGrid/components/Body/LoadingBody/index.d.ts

@@ -0,0 +1 @@
+export { LoadingBody } from './LoadingBody';

package/dist/components/DataGrid/components/Body/Row/Row.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Row.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Row as RowItem } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * The row within the TanStack Table instance.\n   */\n  row: RowItem<any>;\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, enableExpanding, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n    aria-level={enableExpanding ? row.depth + 1 : undefined}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React","buildClassnames"],"mappings":";;;;;;;;;;AA4BO,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAY,MACvEA,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EAAA,EAEtD,QAAQ,CACN;;;;"}
+{"version":3,"file":"Row.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * Row information, including id, index, and depth (typically the TanStack table row).\n   */\n  row: {\n    id: string;\n    index: number;\n    depth: number;\n  };\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, enableExpanding, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n    aria-level={enableExpanding ? row.depth + 1 : undefined}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React","buildClassnames"],"mappings":";;;;;;;;;;AA8BO,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAY,MACvEA,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EAAA,EAEtD,QAAQ,CACN;;;;"}

package/dist/components/DataGrid/components/Body/Row/Row.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
-import { Row as RowItem } from '@tanstack/react-table';
 type RowProps = {
     /**
-     * The row within the TanStack Table instance.
+     * Row information, including id, index, and depth (typically the TanStack table row).
      */
-    row: RowItem<any>;
+    row: {
+        id: string;
+        index: number;
+        depth: number;
+    };
     /**
      * Whether rows should be striped or not.
      */

package/dist/components/DataGrid/components/Body/Row/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Row as RowItem } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * The row within the TanStack Table instance.\n   */\n  row: RowItem<any>;\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, enableExpanding, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n    aria-level={enableExpanding ? row.depth + 1 : undefined}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React"],"mappings":";;;;AA4BO,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAY,MACvEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EAAA,EAEtD,QAAQ,CACN;;;;"}
+{"version":3,"file":"Row.js","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * Row information, including id, index, and depth (typically the TanStack table row).\n   */\n  row: {\n    id: string;\n    index: number;\n    depth: number;\n  };\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, enableExpanding, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n    aria-level={enableExpanding ? row.depth + 1 : undefined}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React"],"mappings":";;;;AA8BO,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAY,MACvEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EAAA,EAEtD,QAAQ,CACN;;;;"}

package/dist/components/DataGrid/components/Body/index.d.ts

@@ -1 +1,3 @@
 export { Body, MemoizedBody } from './Body';
+export { LoadingBody } from './LoadingBody';
+export { EmptyBody } from './EmptyBody';

package/dist/components/DataGrid/components/Footer/Footer.cjs

@@ -11,7 +11,7 @@ const Footer = ({ table, ariaRoles }) => {
     // We're not making use of column grouping, so we only need the first footer group.
     const [footer] = table.getFooterGroups();
     return (React__default.default.createElement("tfoot", { className: "data-grid-footer" },
-        React__default.default.createElement("tr", { className: "data-grid-footer-row" }, footer.headers.map((header) => (React__default.default.createElement(FooterCell.FooterCell, { key: header.id, ariaRoles: ariaRoles, header: header }))))));
+        React__default.default.createElement("tr", { className: "data-grid-footer-row", "aria-rowindex": table.getRowCount() + 1 }, footer.headers.map((header) => (React__default.default.createElement(FooterCell.FooterCell, { key: header.id, ariaRoles: ariaRoles, header: header }))))));
 };
 
 exports.Footer = Footer;

package/dist/components/DataGrid/components/Footer/Footer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.cjs","sources":["../../../../../src/components/DataGrid/components/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { AriaRoles } from '../../types';\nimport { FooterCell } from './FooterCell';\n\ntype FooterProps = {\n  /**\n   * The TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Footer = ({ table, ariaRoles }: FooterProps) => {\n  // We're not making use of column grouping, so we only need the first footer group.\n  const [footer] = table.getFooterGroups();\n\n  return (\n    <tfoot className=\"data-grid-footer\">\n      <tr className=\"data-grid-footer-row\">\n        {footer.headers.map((header) => (\n          <FooterCell key={header.id} ariaRoles={ariaRoles} header={header} />\n        ))}\n      </tr>\n    </tfoot>\n  );\n};\n"],"names":["React","FooterCell"],"mappings":";;;;;;;;;AAkBa,MAAA,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAe,KAAI;;IAE1D,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,EAAE;AAExC,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,kBAAkB,EAAA;AACjC,QAAAA,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sBAAsB,EACjC,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBA,qCAACC,qBAAU,EAAA,EAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA,CACrE,CAAC,CACC,CACC;AAEZ;;;;"}
+{"version":3,"file":"Footer.cjs","sources":["../../../../../src/components/DataGrid/components/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { AriaRoles } from '../../types';\nimport { FooterCell } from './FooterCell';\n\ntype FooterProps = {\n  /**\n   * The TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Footer = ({ table, ariaRoles }: FooterProps) => {\n  // We're not making use of column grouping, so we only need the first footer group.\n  const [footer] = table.getFooterGroups();\n\n  return (\n    <tfoot className=\"data-grid-footer\">\n      <tr className=\"data-grid-footer-row\" aria-rowindex={table.getRowCount() + 1}>\n        {footer.headers.map((header) => (\n          <FooterCell key={header.id} ariaRoles={ariaRoles} header={header} />\n        ))}\n      </tr>\n    </tfoot>\n  );\n};\n"],"names":["React","FooterCell"],"mappings":";;;;;;;;;AAkBa,MAAA,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAe,KAAI;;IAE1D,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,EAAE;AAExC,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,kBAAkB,EAAA;QACjCA,sBAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA,eAAA,EAAgB,KAAK,CAAC,WAAW,EAAE,GAAG,CAAC,IACxE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBA,sBAAC,CAAA,aAAA,CAAAC,qBAAU,IAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA,CAAI,CACrE,CAAC,CACC,CACC;AAEZ;;;;"}

package/dist/components/DataGrid/components/Footer/Footer.js

@@ -5,7 +5,7 @@ const Footer = ({ table, ariaRoles }) => {
     // We're not making use of column grouping, so we only need the first footer group.
     const [footer] = table.getFooterGroups();
     return (React__default.createElement("tfoot", { className: "data-grid-footer" },
-        React__default.createElement("tr", { className: "data-grid-footer-row" }, footer.headers.map((header) => (React__default.createElement(FooterCell, { key: header.id, ariaRoles: ariaRoles, header: header }))))));
+        React__default.createElement("tr", { className: "data-grid-footer-row", "aria-rowindex": table.getRowCount() + 1 }, footer.headers.map((header) => (React__default.createElement(FooterCell, { key: header.id, ariaRoles: ariaRoles, header: header }))))));
 };
 
 export { Footer };

package/dist/components/DataGrid/components/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","sources":["../../../../../src/components/DataGrid/components/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { AriaRoles } from '../../types';\nimport { FooterCell } from './FooterCell';\n\ntype FooterProps = {\n  /**\n   * The TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Footer = ({ table, ariaRoles }: FooterProps) => {\n  // We're not making use of column grouping, so we only need the first footer group.\n  const [footer] = table.getFooterGroups();\n\n  return (\n    <tfoot className=\"data-grid-footer\">\n      <tr className=\"data-grid-footer-row\">\n        {footer.headers.map((header) => (\n          <FooterCell key={header.id} ariaRoles={ariaRoles} header={header} />\n        ))}\n      </tr>\n    </tfoot>\n  );\n};\n"],"names":["React"],"mappings":";;;AAkBa,MAAA,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAe,KAAI;;IAE1D,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,EAAE;AAExC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,kBAAkB,EAAA;AACjC,QAAAA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sBAAsB,EACjC,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBA,6BAAC,UAAU,EAAA,EAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA,CACrE,CAAC,CACC,CACC;AAEZ;;;;"}
+{"version":3,"file":"Footer.js","sources":["../../../../../src/components/DataGrid/components/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { AriaRoles } from '../../types';\nimport { FooterCell } from './FooterCell';\n\ntype FooterProps = {\n  /**\n   * The TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Footer = ({ table, ariaRoles }: FooterProps) => {\n  // We're not making use of column grouping, so we only need the first footer group.\n  const [footer] = table.getFooterGroups();\n\n  return (\n    <tfoot className=\"data-grid-footer\">\n      <tr className=\"data-grid-footer-row\" aria-rowindex={table.getRowCount() + 1}>\n        {footer.headers.map((header) => (\n          <FooterCell key={header.id} ariaRoles={ariaRoles} header={header} />\n        ))}\n      </tr>\n    </tfoot>\n  );\n};\n"],"names":["React"],"mappings":";;;AAkBa,MAAA,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAe,KAAI;;IAE1D,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,EAAE;AAExC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,kBAAkB,EAAA;QACjCA,cAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA,eAAA,EAAgB,KAAK,CAAC,WAAW,EAAE,GAAG,CAAC,IACxE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBA,cAAC,CAAA,aAAA,CAAA,UAAU,IAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA,CAAI,CACrE,CAAC,CACC,CACC;AAEZ;;;;"}

package/dist/components/DataGrid/types/DataGridProps.d.ts

@@ -6,6 +6,7 @@ import { SortState } from './SortState';
 import { PinnedColumnState } from './PinnedColumnState';
 import { RowGroupingConfiguration } from './RowGroupingConfiguration';
 import { ColumnWidths } from './ColumnWidths';
+import { EmptyState } from './EmptyState';
 export type CustomState = {
     iconSlot: ReactElement;
     heading: string;
@@ -120,4 +121,24 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
      * Callback which is raised when the column widths change.
      */
     onColumnsResized?: (columnWidths: ColumnWidths) => void;
+    /** Empty/Loading State */
+    /**
+     * Show the loading state.
+     */
+    isLoading?: boolean;
+    /**
+     * Number of rows to be rendered in the loading state.
+     * @default 5
+     */
+    loadingRowCount?: number;
+    /**
+     * Settings for the empty state, rendered when there are no rows.
+     *
+     * If none is provided, a default empty state will be displayed.
+     */
+    emptyState?: EmptyState;
+    /**
+     * Optional slot for custom content in the empty body, overrides empty state.
+     */
+    emptySlot?: React.ReactElement;
 };

package/dist/components/DataGrid/types/EmptyState.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type EmptyState = {
+    iconSlot?: React.ReactElement;
+    heading?: string;
+    subHeading?: string;
+};

package/dist/components/DataGrid/types/index.d.ts

@@ -5,3 +5,4 @@ export { ColumnDefinition } from './ColumnDefinition';
 export { SortState } from './SortState';
 export { PinnedColumnState } from './PinnedColumnState';
 export { RowGroupingConfiguration, ExpandedRows } from './RowGroupingConfiguration';
+export { EmptyState } from './EmptyState';

package/dist/components/Skeleton/Skeleton.cjs

@@ -1,21 +1,16 @@
 'use strict';
 
-var styled = require('styled-components');
-var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
+var React = require('react');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
+var Skeleton_module = require('./Skeleton.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Skeleton = styled__default.default(BaseContainer.BaseContainer).attrs(() => ({
-    'aria-hidden': true,
-})).withConfig({ displayName: "vui--Skeleton", componentId: "vui--7bl1ak" }) `display:block;background:#f6f7f8;background:linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);background-size:2500px 104px;cursor:progress;border-radius:4px;${({ width = '', height = '' }) => `
-    width: ${width || '100%'};
-    min-width: ${width};
-    height: ${height || '20px'};
-    min-height: ${height};
-  `};@media (prefers-reduced-motion: no-preference){animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;}@keyframes placeHolderShimmer{0%{background-position:-1080px 0;}100%{background-position:1080px 0;}}`;
-Skeleton.displayName = 'Skeleton';
+const Skeleton = ({ width, height }) => {
+    return (React__default.default.createElement("div", { "aria-hidden": "true", style: assignCssVars.assignCssVars({ width, height }), className: Skeleton_module.skeleton }));
+};
 
 exports.Skeleton = Skeleton;
 //# sourceMappingURL=Skeleton.cjs.map

package/dist/components/Skeleton/Skeleton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.cjs","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\n\nexport type SkeletonProps = {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = styled(BaseContainer).attrs(() => ({\n  'aria-hidden': true,\n}))<SkeletonProps>`\n  // General\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n\n  cursor: progress;\n\n  // Sizing\n\n  border-radius: 4px;\n  ${({ width = '', height = '' }) => `\n    width: ${width || '100%'};\n    min-width: ${width};\n    height: ${height || '20px'};\n    min-height: ${height};\n  `};\n\n  // Animation\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: placeHolderShimmer;\n    animation-timing-function: linear;\n  }\n\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -1080px 0;\n    }\n    100% {\n      background-position: 1080px 0;\n    }\n  }\n`;\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["styled","BaseContainer"],"mappings":";;;;;;;;;AAQO,MAAM,QAAQ,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACzD,IAAA,aAAa,EAAE,IAAI;AACpB,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2KAAA,EAYC,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK;AACxB,WAAA,EAAA,KAAK,IAAI,MAAM,CAAA;iBACX,KAAK,CAAA;AACR,YAAA,EAAA,MAAM,IAAI,MAAM,CAAA;kBACZ,MAAM,CAAA;AACrB,EAAA,CAAA,CAAA,8SAAA;AAsBH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Skeleton.cjs","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = ({ width, height }: SkeletonProps) => {\n  return (\n    <div aria-hidden=\"true\" style={assignCssVars({ width, height })} className={styles.skeleton} />\n  );\n};\n"],"names":["React","assignCssVars","styles"],"mappings":";;;;;;;;;;AAWa,MAAA,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAiB,KAAI;IAC3D,QACEA,6DAAiB,MAAM,EAAC,KAAK,EAAEC,2BAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAEC,eAAM,CAAC,QAAQ,EAAI,CAAA;AAEnG;;;;"}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,7 +1,7 @@
-export type SkeletonProps = {
+import React from 'react';
+type SkeletonProps = {
     width?: string;
     height?: string;
 };
-export declare const Skeleton: import("styled-components").StyledComponent<"div", any, {
-    'aria-hidden': true;
-} & SkeletonProps, "aria-hidden">;
+export declare const Skeleton: ({ width, height }: SkeletonProps) => React.JSX.Element;
+export {};

package/dist/components/Skeleton/Skeleton.js

@@ -1,15 +1,10 @@
-import styled from 'styled-components';
-import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+import React__default from 'react';
+import { assignCssVars } from '../../utils/assignCssVars.js';
+import styles from './Skeleton.module.scss.js';
 
-const Skeleton = styled(BaseContainer).attrs(() => ({
-    'aria-hidden': true,
-})).withConfig({ displayName: "vui--Skeleton", componentId: "vui--7bl1ak" }) `display:block;background:#f6f7f8;background:linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);background-size:2500px 104px;cursor:progress;border-radius:4px;${({ width = '', height = '' }) => `
-    width: ${width || '100%'};
-    min-width: ${width};
-    height: ${height || '20px'};
-    min-height: ${height};
-  `};@media (prefers-reduced-motion: no-preference){animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;}@keyframes placeHolderShimmer{0%{background-position:-1080px 0;}100%{background-position:1080px 0;}}`;
-Skeleton.displayName = 'Skeleton';
+const Skeleton = ({ width, height }) => {
+    return (React__default.createElement("div", { "aria-hidden": "true", style: assignCssVars({ width, height }), className: styles.skeleton }));
+};
 
 export { Skeleton };
 //# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\n\nexport type SkeletonProps = {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = styled(BaseContainer).attrs(() => ({\n  'aria-hidden': true,\n}))<SkeletonProps>`\n  // General\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n\n  cursor: progress;\n\n  // Sizing\n\n  border-radius: 4px;\n  ${({ width = '', height = '' }) => `\n    width: ${width || '100%'};\n    min-width: ${width};\n    height: ${height || '20px'};\n    min-height: ${height};\n  `};\n\n  // Animation\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: placeHolderShimmer;\n    animation-timing-function: linear;\n  }\n\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -1080px 0;\n    }\n    100% {\n      background-position: 1080px 0;\n    }\n  }\n`;\n\nSkeleton.displayName = 'Skeleton';\n"],"names":[],"mappings":";;;AAQO,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACzD,IAAA,aAAa,EAAE,IAAI;AACpB,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2KAAA,EAYC,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK;AACxB,WAAA,EAAA,KAAK,IAAI,MAAM,CAAA;iBACX,KAAK,CAAA;AACR,YAAA,EAAA,MAAM,IAAI,MAAM,CAAA;kBACZ,MAAM,CAAA;AACrB,EAAA,CAAA,CAAA,8SAAA;AAsBH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = ({ width, height }: SkeletonProps) => {\n  return (\n    <div aria-hidden=\"true\" style={assignCssVars({ width, height })} className={styles.skeleton} />\n  );\n};\n"],"names":["React"],"mappings":";;;;AAWa,MAAA,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAiB,KAAI;IAC3D,QACEA,qDAAiB,MAAM,EAAC,KAAK,EAAE,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAI,CAAA;AAEnG;;;;"}

package/dist/components/Skeleton/Skeleton.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._skeleton_1w7c5_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: var(--sizes-none);\n  padding: var(--sizes-none);\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n  cursor: progress;\n  border-radius: var(--sizes-1);\n  width: var(--width, \"100%\");\n  min-width: var(--width, \"100%\");\n  height: var(--height, \"20px\");\n  min-height: var(--height, \"20px\");\n}\n@keyframes _placeHolderShimmer_1w7c5_1 {\n  0% {\n    background-position: -1080px 0;\n  }\n  100% {\n    background-position: 1080px 0;\n  }\n}\n@media (prefers-reduced-motion: no-preference) {\n  ._skeleton_1w7c5_1 {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: _placeHolderShimmer_1w7c5_1;\n    animation-timing-function: linear;\n  }\n}");
+var styles = {"skeleton":"_skeleton_1w7c5_1","placeHolderShimmer":"_placeHolderShimmer_1w7c5_1"};
+
+module.exports = styles;
+//# sourceMappingURL=Skeleton.module.scss.cjs.map

package/dist/components/Skeleton/Skeleton.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.module.scss.cjs","sources":["../../../src/components/Skeleton/Skeleton.module.scss"],"sourcesContent":[".skeleton {\n  box-sizing: border-box;\n  position: relative;\n  margin: var(--sizes-none);\n  padding: var(--sizes-none);\n\n  // General\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n\n  cursor: progress;\n\n  // Sizing\n  border-radius: var(--sizes-1);\n\n  width: var(--width, '100%');\n  min-width: var(--width, '100%');\n\n  height: var(--height, '20px');\n  min-height: var(--height, '20px');\n\n  // Animation\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -1080px 0;\n    }\n    100% {\n      background-position: 1080px 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: placeHolderShimmer;\n    animation-timing-function: linear;\n  }\n}\n\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,y5BAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,6BAAA;;;;"}

package/dist/components/Skeleton/Skeleton.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._skeleton_1w7c5_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: var(--sizes-none);\n  padding: var(--sizes-none);\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n  cursor: progress;\n  border-radius: var(--sizes-1);\n  width: var(--width, \"100%\");\n  min-width: var(--width, \"100%\");\n  height: var(--height, \"20px\");\n  min-height: var(--height, \"20px\");\n}\n@keyframes _placeHolderShimmer_1w7c5_1 {\n  0% {\n    background-position: -1080px 0;\n  }\n  100% {\n    background-position: 1080px 0;\n  }\n}\n@media (prefers-reduced-motion: no-preference) {\n  ._skeleton_1w7c5_1 {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: _placeHolderShimmer_1w7c5_1;\n    animation-timing-function: linear;\n  }\n}");
+var styles = {"skeleton":"_skeleton_1w7c5_1","placeHolderShimmer":"_placeHolderShimmer_1w7c5_1"};
+
+export { styles as default };
+//# sourceMappingURL=Skeleton.module.scss.js.map

package/dist/components/Skeleton/Skeleton.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.module.scss.js","sources":["../../../src/components/Skeleton/Skeleton.module.scss"],"sourcesContent":[".skeleton {\n  box-sizing: border-box;\n  position: relative;\n  margin: var(--sizes-none);\n  padding: var(--sizes-none);\n\n  // General\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n\n  cursor: progress;\n\n  // Sizing\n  border-radius: var(--sizes-1);\n\n  width: var(--width, '100%');\n  min-width: var(--width, '100%');\n\n  height: var(--height, '20px');\n  min-height: var(--height, '20px');\n\n  // Animation\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -1080px 0;\n    }\n    100% {\n      background-position: 1080px 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: placeHolderShimmer;\n    animation-timing-function: linear;\n  }\n}\n\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,y5BAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,6BAAA;;;;"}

package/dist/index.cjs

@@ -99,6 +99,7 @@ var withDeprecated = require('./hoc/withDeprecated.cjs');
 var buildClassnames = require('./utils/buildClassnames.cjs');
 var color = require('./utils/color.cjs');
 var generateId = require('./utils/generateId.cjs');
+var assignCssVars = require('./utils/assignCssVars.cjs');
 var index$5 = require('./theme/index.cjs');
 var AccountsIcon = require('./icons/design-system/components/AccountsIcon.cjs');
 var AccountsOutlineIcon = require('./icons/design-system/components/AccountsOutlineIcon.cjs');
@@ -427,6 +428,7 @@ exports.buildClassnames = buildClassnames.buildClassnames;
 exports.getOpaqueHexColor = color.getOpaqueHexColor;
 exports.hexToRgb = color.hexToRgb;
 exports.generateId = generateId.generateId;
+exports.assignCssVars = assignCssVars.assignCssVars;
 exports.theme = index$5.theme;
 exports.AccountsIcon = AccountsIcon.ReactComponent;
 exports.AccountsOutlineIcon = AccountsOutlineIcon.ReactComponent;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -97,6 +97,7 @@ export { withDeprecated } from './hoc/withDeprecated.js';
 export { buildClassnames } from './utils/buildClassnames.js';
 export { getOpaqueHexColor, hexToRgb } from './utils/color.js';
 export { generateId } from './utils/generateId.js';
+export { assignCssVars } from './utils/assignCssVars.js';
 export { theme } from './theme/index.js';
 export { ReactComponent as AccountsIcon } from './icons/design-system/components/AccountsIcon.js';
 export { ReactComponent as AccountsOutlineIcon } from './icons/design-system/components/AccountsOutlineIcon.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/utils/assignCssVars.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+var utils = require('../components/ThemeInjector/utils.cjs');
+
+/**
+ * Utility function which converts an object of properties into a style object with CSS variables, for use when
+ * working with CSS modules.
+ *
+ * Property names are converted from camelCase to kebab-case.
+ *
+ * @param props An object containing props to pass though as CSS variables.
+ * @returns A style object containing the CSS variables.
+ */
+const assignCssVars = (props) => {
+    const styleObject = {};
+    Object.entries(props).forEach(([propName, value]) => {
+        if (value === undefined) {
+            return;
+        }
+        styleObject[`--${utils.camelToKebab(propName)}`] = value.toString();
+    });
+    return styleObject;
+};
+
+exports.assignCssVars = assignCssVars;
+//# sourceMappingURL=assignCssVars.cjs.map

package/dist/utils/assignCssVars.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"assignCssVars.cjs","sources":["../../src/utils/assignCssVars.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { camelToKebab } from '../components/ThemeInjector/utils';\n\ntype ValidCssVariableType = string | number | undefined;\n\n/**\n * Utility function which converts an object of properties into a style object with CSS variables, for use when\n * working with CSS modules.\n *\n * Property names are converted from camelCase to kebab-case.\n *\n * @param props An object containing props to pass though as CSS variables.\n * @returns A style object containing the CSS variables.\n */\nexport const assignCssVars = (props: Record<string, ValidCssVariableType>) => {\n  const styleObject: Record<string, string> = {};\n\n  Object.entries(props).forEach(([propName, value]) => {\n    if (value === undefined) {\n      return;\n    }\n\n    styleObject[`--${camelToKebab(propName)}`] = value.toString();\n  });\n\n  return styleObject as CSSProperties;\n};\n"],"names":["camelToKebab"],"mappings":";;;;AAKA;;;;;;;;AAQG;AACU,MAAA,aAAa,GAAG,CAAC,KAA2C,KAAI;IAC3E,MAAM,WAAW,GAA2B,EAAE;AAE9C,IAAA,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAI;QAClD,IAAI,KAAK,KAAK,SAAS,EAAE;YACvB;AACD;AAED,QAAA,WAAW,CAAC,CAAA,EAAA,EAAKA,kBAAY,CAAC,QAAQ,CAAC,CAAE,CAAA,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAE;AAC/D,KAAC,CAAC;AAEF,IAAA,OAAO,WAA4B;AACrC;;;;"}

package/dist/utils/assignCssVars.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+type ValidCssVariableType = string | number | undefined;
+/**
+ * Utility function which converts an object of properties into a style object with CSS variables, for use when
+ * working with CSS modules.
+ *
+ * Property names are converted from camelCase to kebab-case.
+ *
+ * @param props An object containing props to pass though as CSS variables.
+ * @returns A style object containing the CSS variables.
+ */
+export declare const assignCssVars: (props: Record<string, ValidCssVariableType>) => CSSProperties;
+export {};

package/dist/utils/assignCssVars.js

@@ -0,0 +1,24 @@
+import { camelToKebab } from '../components/ThemeInjector/utils.js';
+
+/**
+ * Utility function which converts an object of properties into a style object with CSS variables, for use when
+ * working with CSS modules.
+ *
+ * Property names are converted from camelCase to kebab-case.
+ *
+ * @param props An object containing props to pass though as CSS variables.
+ * @returns A style object containing the CSS variables.
+ */
+const assignCssVars = (props) => {
+    const styleObject = {};
+    Object.entries(props).forEach(([propName, value]) => {
+        if (value === undefined) {
+            return;
+        }
+        styleObject[`--${camelToKebab(propName)}`] = value.toString();
+    });
+    return styleObject;
+};
+
+export { assignCssVars };
+//# sourceMappingURL=assignCssVars.js.map

package/dist/utils/assignCssVars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assignCssVars.js","sources":["../../src/utils/assignCssVars.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { camelToKebab } from '../components/ThemeInjector/utils';\n\ntype ValidCssVariableType = string | number | undefined;\n\n/**\n * Utility function which converts an object of properties into a style object with CSS variables, for use when\n * working with CSS modules.\n *\n * Property names are converted from camelCase to kebab-case.\n *\n * @param props An object containing props to pass though as CSS variables.\n * @returns A style object containing the CSS variables.\n */\nexport const assignCssVars = (props: Record<string, ValidCssVariableType>) => {\n  const styleObject: Record<string, string> = {};\n\n  Object.entries(props).forEach(([propName, value]) => {\n    if (value === undefined) {\n      return;\n    }\n\n    styleObject[`--${camelToKebab(propName)}`] = value.toString();\n  });\n\n  return styleObject as CSSProperties;\n};\n"],"names":[],"mappings":";;AAKA;;;;;;;;AAQG;AACU,MAAA,aAAa,GAAG,CAAC,KAA2C,KAAI;IAC3E,MAAM,WAAW,GAA2B,EAAE;AAE9C,IAAA,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAI;QAClD,IAAI,KAAK,KAAK,SAAS,EAAE;YACvB;AACD;AAED,QAAA,WAAW,CAAC,CAAA,EAAA,EAAK,YAAY,CAAC,QAAQ,CAAC,CAAE,CAAA,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAE;AAC/D,KAAC,CAAC;AAEF,IAAA,OAAO,WAA4B;AACrC;;;;"}

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export { buildClassnames } from './buildClassnames';
 export { getOpaqueHexColor, hexToRgb } from './color';
 export { generateId } from './generateId';
+export { assignCssVars } from './assignCssVars';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "11.1.0",
+  "version": "11.3.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",

package/dist/components/Alerts/Alert/constants.cjs

@@ -1,18 +0,0 @@
-'use strict';
-
-var index = require('../../../theme/index.cjs');
-
-const SpacingMap = {
-    base: index.theme.sizes.base,
-    sm: index.theme.sizes[3],
-    xs: index.theme.sizes.sm,
-};
-const IconSizeMap = {
-    base: index.theme.sizes.md,
-    sm: index.theme.sizes[5],
-    xs: index.theme.sizes[5],
-};
-
-exports.IconSizeMap = IconSizeMap;
-exports.SpacingMap = SpacingMap;
-//# sourceMappingURL=constants.cjs.map

package/dist/components/Alerts/Alert/constants.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.cjs","sources":["../../../../src/components/Alerts/Alert/constants.ts"],"sourcesContent":["import { theme } from '../../../theme';\n\nimport type { AlertSizes } from './types';\n\nexport const SpacingMap: Record<AlertSizes, string> = {\n  base: theme.sizes.base,\n  sm: theme.sizes[3],\n  xs: theme.sizes.sm,\n};\n\nexport const IconSizeMap: Record<AlertSizes, string> = {\n  base: theme.sizes.md, // 24px\n  sm: theme.sizes[5], // 20px\n  xs: theme.sizes[5],\n};\n"],"names":["theme"],"mappings":";;;;AAIa,MAAA,UAAU,GAA+B;AACpD,IAAA,IAAI,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI;AACtB,IAAA,EAAE,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAClB,IAAA,EAAE,EAAEA,WAAK,CAAC,KAAK,CAAC,EAAE;;AAGP,MAAA,WAAW,GAA+B;AACrD,IAAA,IAAI,EAAEA,WAAK,CAAC,KAAK,CAAC,EAAE;AACpB,IAAA,EAAE,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAClB,IAAA,EAAE,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;;;;"}

package/dist/components/Alerts/Alert/constants.d.ts

@@ -1,3 +0,0 @@
-import type { AlertSizes } from './types';
-export declare const SpacingMap: Record<AlertSizes, string>;
-export declare const IconSizeMap: Record<AlertSizes, string>;

package/dist/components/Alerts/Alert/constants.js

@@ -1,15 +0,0 @@
-import { theme } from '../../../theme/index.js';
-
-const SpacingMap = {
-    base: theme.sizes.base,
-    sm: theme.sizes[3],
-    xs: theme.sizes.sm,
-};
-const IconSizeMap = {
-    base: theme.sizes.md,
-    sm: theme.sizes[5],
-    xs: theme.sizes[5],
-};
-
-export { IconSizeMap, SpacingMap };
-//# sourceMappingURL=constants.js.map

package/dist/components/Alerts/Alert/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.js","sources":["../../../../src/components/Alerts/Alert/constants.ts"],"sourcesContent":["import { theme } from '../../../theme';\n\nimport type { AlertSizes } from './types';\n\nexport const SpacingMap: Record<AlertSizes, string> = {\n  base: theme.sizes.base,\n  sm: theme.sizes[3],\n  xs: theme.sizes.sm,\n};\n\nexport const IconSizeMap: Record<AlertSizes, string> = {\n  base: theme.sizes.md, // 24px\n  sm: theme.sizes[5], // 20px\n  xs: theme.sizes[5],\n};\n"],"names":[],"mappings":";;AAIa,MAAA,UAAU,GAA+B;AACpD,IAAA,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI;AACtB,IAAA,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAClB,IAAA,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;;AAGP,MAAA,WAAW,GAA+B;AACrD,IAAA,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;AACpB,IAAA,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAClB,IAAA,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;;;"}

package/dist/components/Alerts/Alert/styled.cjs

@@ -1,20 +0,0 @@
-'use strict';
-
-var styled = require('styled-components');
-var Stack = require('../../Stack/Stack.cjs');
-require('../../Stack/types.cjs');
-var index = require('../../../theme/index.cjs');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-const AlertContainer = styled__default.default(Stack.Stack).attrs({
-    direction: 'horizontal',
-    alignX: 'between',
-    alignY: 'top',
-    spacing: 0,
-}).withConfig({ displayName: "vui--AlertContainer", componentId: "vui--yb86nz" }) `border:1px solid ${({ colours: { primary } }) => primary};border-radius:${index.theme.radius.base};background-color:${({ colours: { background } }) => background};`;
-
-exports.AlertContainer = AlertContainer;
-//# sourceMappingURL=styled.cjs.map

package/dist/components/Alerts/Alert/styled.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Alerts/Alert/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../Stack';\nimport { AlertColours } from '../types';\nimport { theme } from '../../../theme';\n\nexport const AlertContainer = styled(Stack).attrs<{ colours: AlertColours }>({\n  direction: 'horizontal',\n  alignX: 'between',\n  alignY: 'top',\n  spacing: 0,\n})<{\n  colours: AlertColours;\n}>`\n  border: 1px solid ${({ colours: { primary } }) => primary};\n  border-radius: ${theme.radius.base};\n\n  background-color: ${({ colours: { background } }) => background};\n`;\n"],"names":["styled","Stack","theme"],"mappings":";;;;;;;;;;;AAKa,MAAA,cAAc,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAC,KAAK,CAA4B;AAC3E,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,MAAM,EAAE,KAAK;AACb,IAAA,OAAO,EAAE,CAAC;AACX,CAAA,CAAC,CAGoB,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,kBACxCC,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,kBAAA,EAEd,CAAC,EAAE,OAAO,EAAE,EAAE,UAAU,EAAE,EAAE,KAAK,UAAU;;;;"}

package/dist/components/Alerts/Alert/styled.d.ts

@@ -1,4 +0,0 @@
-import { AlertColours } from '../types';
-export declare const AlertContainer: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps & {
-    colours: AlertColours;
-}, never>;

package/dist/components/Alerts/Alert/styled.js

@@ -1,14 +0,0 @@
-import styled from 'styled-components';
-import { Stack } from '../../Stack/Stack.js';
-import '../../Stack/types.js';
-import { theme } from '../../../theme/index.js';
-
-const AlertContainer = styled(Stack).attrs({
-    direction: 'horizontal',
-    alignX: 'between',
-    alignY: 'top',
-    spacing: 0,
-}).withConfig({ displayName: "vui--AlertContainer", componentId: "vui--yb86nz" }) `border:1px solid ${({ colours: { primary } }) => primary};border-radius:${theme.radius.base};background-color:${({ colours: { background } }) => background};`;
-
-export { AlertContainer };
-//# sourceMappingURL=styled.js.map

package/dist/components/Alerts/Alert/styled.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/Alerts/Alert/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../Stack';\nimport { AlertColours } from '../types';\nimport { theme } from '../../../theme';\n\nexport const AlertContainer = styled(Stack).attrs<{ colours: AlertColours }>({\n  direction: 'horizontal',\n  alignX: 'between',\n  alignY: 'top',\n  spacing: 0,\n})<{\n  colours: AlertColours;\n}>`\n  border: 1px solid ${({ colours: { primary } }) => primary};\n  border-radius: ${theme.radius.base};\n\n  background-color: ${({ colours: { background } }) => background};\n`;\n"],"names":[],"mappings":";;;;;AAKa,MAAA,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAA4B;AAC3E,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,MAAM,EAAE,KAAK;AACb,IAAA,OAAO,EAAE,CAAC;AACX,CAAA,CAAC,CAGoB,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,kBACxC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,kBAAA,EAEd,CAAC,EAAE,OAAO,EAAE,EAAE,UAAU,EAAE,EAAE,KAAK,UAAU;;;;"}

package/dist/components/Alerts/MiniAlert/constants.cjs

@@ -1,22 +0,0 @@
-'use strict';
-
-var index = require('../../../theme/index.cjs');
-
-const TextColourMap = {
-    default: index.theme.colors.neutral.ink.dark,
-    error: index.theme.colors.secondary.red.darkest,
-    success: index.theme.colors.neutral.ink.dark,
-    info: index.theme.colors.neutral.ink.dark,
-    warning: index.theme.colors.neutral.ink.dark,
-    recommend: index.theme.colors.neutral.ink.dark,
-};
-const IconStyles = {
-    minWidth: index.theme.sizes[4],
-    minHeight: index.theme.sizes[4],
-    width: index.theme.sizes[4],
-    height: index.theme.sizes[4],
-};
-
-exports.IconStyles = IconStyles;
-exports.TextColourMap = TextColourMap;
-//# sourceMappingURL=constants.cjs.map

package/dist/components/Alerts/MiniAlert/constants.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.cjs","sources":["../../../../src/components/Alerts/MiniAlert/constants.ts"],"sourcesContent":["import { theme } from 'Theme';\nimport { AlertVariants } from '../types';\n\nexport const TextColourMap: Record<AlertVariants, string> = {\n  default: theme.colors.neutral.ink.dark,\n  error: theme.colors.secondary.red.darkest,\n  success: theme.colors.neutral.ink.dark,\n  info: theme.colors.neutral.ink.dark,\n  warning: theme.colors.neutral.ink.dark,\n  recommend: theme.colors.neutral.ink.dark,\n};\n\nexport const IconStyles = {\n  minWidth: theme.sizes[4],\n  minHeight: theme.sizes[4],\n  width: theme.sizes[4],\n  height: theme.sizes[4],\n};\n"],"names":["theme"],"mappings":";;;;AAGa,MAAA,aAAa,GAAkC;IAC1D,OAAO,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;IACtC,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO;IACzC,OAAO,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;IACtC,IAAI,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;IACnC,OAAO,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;IACtC,SAAS,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;;AAG7B,MAAA,UAAU,GAAG;AACxB,IAAA,QAAQ,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACxB,IAAA,SAAS,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACzB,IAAA,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACrB,IAAA,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;;;;"}

package/dist/components/Alerts/MiniAlert/constants.d.ts

@@ -1,8 +0,0 @@
-import { AlertVariants } from '../types';
-export declare const TextColourMap: Record<AlertVariants, string>;
-export declare const IconStyles: {
-    minWidth: string;
-    minHeight: string;
-    width: string;
-    height: string;
-};