@veeqo/ui 9.0.0-beta-3 → 9.0.0

package/dist/components/DataTable/components/ColumnDivider.js

@@ -1,22 +1,65 @@
-import e,{createRef as t}from"react";import n from"styled-components";import{theme as r}from"../../../theme/index.js";const d=n.div`
-  position: absolute;
-  right: 0;
-  top: 37.5%;
-  width: 1px;
-  background: ${r.colors.neutral.grey.dark};
-  min-height: 25%;
-  cursor: col-resize;
-  user-select: none;
+import React, { createRef } from 'react';
+import styled from 'styled-components';
+import { theme } from '../../../theme/index.js';
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: -150%;
-    left: 0;
-    width: 12px;
-    min-height: 400%;
-    z-index: 1;
-    transform: translateX(-6px);
-  }
-`,i=({columnId:n,setColumnWidth:r,minWidth:i})=>{const a=t(),o=e=>{const{minTranslate:t,dragDivider:n,dragInitX:r}=window.tableHeaders,d=Math.max(e.clientX-(r||0),t||0);n.parentElement.parentElement.classList.add("hideHeaderDetails"),n.style.transform=`translateX(${d}px)`},s=({event:e})=>{const{dragInitX:t,dragDivider:n}=window.tableHeaders,{parentElement:r}=n,d=null==r?void 0:r.getBoundingClientRect().width,a=r.querySelector(".headerContent").getBoundingClientRect().width,o=i&&a<i?i:a,s=(e.clientX||0)-(t||0);return Math.max((d||0)+s,o+24)},l=e=>{window.removeEventListener("mouseup",l),window.removeEventListener("dragend",l),window.removeEventListener("mousemove",o),window.removeEventListener("drag",o),null==r||r({columnId:n,width:s({event:e})}),window.tableHeaders&&(window.tableHeaders.dragDivider.style.transform="translateX(0)",window.tableHeaders.dragDivider.parentElement.style.justifyContent="",window.tableHeaders.dragInitX=void 0,window.tableHeaders.minTranslate=void 0,window.tableHeaders.dragDivider.parentElement.parentElement.classList.remove("hideHeaderDetails"))},w=e=>{0!==e.button&&"dragstart"!==e.type||(window.tableHeaders={dragInitX:e.clientX,dragDivider:a.current},window.tableHeaders.minTranslate=(()=>{const{parentElement:e}=window.tableHeaders.dragDivider;return e.querySelector(".headerContent").getBoundingClientRect().width-e.getBoundingClientRect().width+24})(),window.addEventListener("mouseup",l),window.addEventListener("dragend",l),window.addEventListener("mousemove",o),window.addEventListener("drag",o))};return e.createElement(d,{ref:a,className:"th-divider",onMouseDown:w,onDragStart:w})};export{i as ColumnDivider,d as ResizerBar};
+const ResizerBar = styled.div.withConfig({ displayName: "vui--ResizerBar", componentId: "vui--115ilx" }) `position:absolute;right:0;top:37.5%;width:1px;background:${theme.colors.neutral.grey.dark};min-height:25%;cursor:col-resize;user-select:none;&::before{content:'';position:absolute;top:-150%;left:0;width:12px;min-height:400%;z-index:1;transform:translateX(-6px);}`;
+const ColumnDivider = ({ columnId, setColumnWidth, minWidth }) => {
+    const ref = createRef();
+    const padding = 24;
+    const mouseMove = (event) => {
+        const { minTranslate, dragDivider, dragInitX } = window.tableHeaders;
+        const translate = Math.max(event.clientX - (dragInitX || 0), minTranslate || 0);
+        dragDivider.parentElement.parentElement.classList.add('hideHeaderDetails');
+        dragDivider.style.transform = `translateX(${translate}px)`;
+    };
+    const minTranslate = () => {
+        const { parentElement } = window.tableHeaders.dragDivider;
+        const contentWidth = parentElement
+            .querySelector('.headerContent')
+            .getBoundingClientRect().width;
+        const currWidth = parentElement.getBoundingClientRect().width;
+        return contentWidth - currWidth + padding;
+    };
+    const calculateWidth = ({ event }) => {
+        const { dragInitX, dragDivider } = window.tableHeaders;
+        const { parentElement } = dragDivider;
+        const initWidth = parentElement === null || parentElement === undefined ? undefined : parentElement.getBoundingClientRect().width;
+        const contentWidth = parentElement
+            .querySelector('.headerContent')
+            .getBoundingClientRect().width;
+        const finalWidth = minWidth && contentWidth < minWidth ? minWidth : contentWidth;
+        const deltaX = (event.clientX || 0) - (dragInitX || 0);
+        return Math.max((initWidth || 0) + deltaX, finalWidth + padding);
+    };
+    const mouseUp = (event) => {
+        window.removeEventListener('mouseup', mouseUp);
+        window.removeEventListener('dragend', mouseUp);
+        window.removeEventListener('mousemove', mouseMove);
+        window.removeEventListener('drag', mouseMove);
+        setColumnWidth === null || setColumnWidth === undefined ? undefined : setColumnWidth({ columnId, width: calculateWidth({ event }) });
+        if (window.tableHeaders) {
+            window.tableHeaders.dragDivider.style.transform = 'translateX(0)';
+            window.tableHeaders.dragDivider.parentElement.style.justifyContent = '';
+            window.tableHeaders.dragInitX = undefined;
+            window.tableHeaders.minTranslate = undefined;
+            window.tableHeaders.dragDivider.parentElement.parentElement.classList.remove('hideHeaderDetails');
+        }
+    };
+    const trackMouseStart = (event) => {
+        if (event.button !== 0 && event.type !== 'dragstart')
+            return;
+        window.tableHeaders = {
+            dragInitX: event.clientX,
+            dragDivider: ref.current,
+        };
+        window.tableHeaders.minTranslate = minTranslate();
+        window.addEventListener('mouseup', mouseUp);
+        window.addEventListener('dragend', mouseUp);
+        window.addEventListener('mousemove', mouseMove);
+        window.addEventListener('drag', mouseMove);
+    };
+    return (React.createElement(ResizerBar, { ref: ref, className: "th-divider", onMouseDown: trackMouseStart, onDragStart: trackMouseStart }));
+};
+
+export { ColumnDivider, ResizerBar };
 //# sourceMappingURL=ColumnDivider.js.map

package/dist/components/DataTable/components/ColumnDivider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnDivider.js","sources":["../../../../src/components/DataTable/components/ColumnDivider.tsx"],"sourcesContent":[null],"names":["ResizerBar","styled","div","colors","neutral","grey","dark"],"mappings":"sHAMU,MAAAA,EAAWC,EAAAC,GAAA;;;;;kBAMDC,OAAAC,QAAAC,KAAAC;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ColumnDivider.js","sources":["../../../../src/components/DataTable/components/ColumnDivider.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/components/DataTable/components/ColumnHeader.cjs

@@ -1,43 +1,20 @@
-"use strict";var e=require("styled-components"),t=require("../../../theme/index.cjs");function o(e){return e&&e.__esModule?e:{default:e}}var n=o(e);const r=n.default.div`
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: white;
-  color: ${t.theme.colors.neutral.ink.lightest};
-`,a=n.default.span`
-  display: flex;
-  height: 28px;
-  align-items: center;
-  gap: 4px;
-  white-space: nowrap;
+'use strict';
 
-  color: ${t.theme.text.headingTable.color};
-  font-family: ${t.theme.text.headingTable.fontFamily};
-  font-size: ${t.theme.text.headingTable.fontSize};
-  font-style: ${t.theme.text.headingTable.fontStyle};
-  font-weight: ${t.theme.text.headingTable.fontWeight};
-  line-height: ${t.theme.text.headingTable.lineHeight};
-`,i=n.default(a).attrs((()=>({as:"button",type:"button"})))`
-  appearance: none;
-  padding: 0;
-  border: 0;
-  border-radius: 4px;
-  background-color: transparent;
+var styled = require('styled-components');
+var index = require('../../../theme/index.cjs');
 
-  &:not(:disabled):hover {
-    cursor: pointer;
-  }
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-  &:hover ${r} {
-    background-color: ${t.theme.colors.neutral.grey.light};
-    color: ${t.theme.colors.neutral.ink.base};
-  }
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-  &:focus-visible {
-    outline: 0;
-    box-shadow: 0px 0px 0px 2px ${t.theme.colors.secondary.blue.light};
-  }
-`;exports.ClickableHeaderContent=i,exports.HeaderContent=a,exports.SortIndicator=r;
+const SortIndicator = styled__default.default.div.withConfig({ displayName: "vui--SortIndicator", componentId: "vui--o7masx" }) `width:20px;height:20px;display:flex;align-items:center;justify-content:center;background-color:white;color:${index.theme.colors.neutral.ink.lightest};`;
+const HeaderContent = styled__default.default.span.withConfig({ displayName: "vui--HeaderContent", componentId: "vui--vlccds" }) `display:flex;height:28px;align-items:center;gap:4px;white-space:nowrap;color:${index.theme.text.headingTable.color};font-family:${index.theme.text.headingTable.fontFamily};font-size:${index.theme.text.headingTable.fontSize};font-style:${index.theme.text.headingTable.fontStyle};font-weight:${index.theme.text.headingTable.fontWeight};line-height:${index.theme.text.headingTable.lineHeight};`;
+const ClickableHeaderContent = styled__default.default(HeaderContent).attrs(() => ({
+    as: 'button',
+    type: 'button',
+})).withConfig({ displayName: "vui--ClickableHeaderContent", componentId: "vui--xbox8h" }) `appearance:none;padding:0;border:0;border-radius:4px;background-color:transparent;&:not(:disabled):hover{cursor:pointer;}&:hover ${SortIndicator}{background-color:${index.theme.colors.neutral.grey.light};color:${index.theme.colors.neutral.ink.base};}&:focus-visible{outline:0;box-shadow:0px 0px 0px 2px ${index.theme.colors.secondary.blue.light};}`;
+
+exports.ClickableHeaderContent = ClickableHeaderContent;
+exports.HeaderContent = HeaderContent;
+exports.SortIndicator = SortIndicator;
 //# sourceMappingURL=ColumnHeader.cjs.map

package/dist/components/DataTable/components/ColumnHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeader.cjs","sources":["../../../../src/components/DataTable/components/ColumnHeader.tsx"],"sourcesContent":[null],"names":["SortIndicator","styled","div"],"mappings":"oJA4BA,MAAAA,EAAmCC,EAAAA,QAAAC,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ColumnHeader.cjs","sources":["../../../../src/components/DataTable/components/ColumnHeader.tsx"],"sourcesContent":[null],"names":["styled","theme"],"mappings":";;;;;;;;;AAGa,MAAA,aAAa,GAAGA,uBAAM,CAAC,GAAG,CAO5B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2GAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;AAG/B,MAAA,aAAa,GAAGD,uBAAM,CAAC,IAAI,CAO7B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,6EAAA,EAAAC,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAA,aAAA,EACvBA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,WAAA,EACpCA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAC/B,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAChC,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,aAAA,EAClCA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,CAAA;AAG5C,MAAM,sBAAsB,GAAGD,uBAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACvE,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,IAAI,EAAE,QAAQ;AACf,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iIAAA,EAWS,aAAa,CAAA,kBAAA,EACDC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,OAAA,EAC1CA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,0DAKRA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;;;"}

package/dist/components/DataTable/components/ColumnHeader.d.ts

@@ -4,4 +4,3 @@ export declare const ClickableHeaderContent: import("styled-components").StyledC
     as: string;
     type: string;
 }, "type" | "as">;
-//# sourceMappingURL=ColumnHeader.d.ts.map

package/dist/components/DataTable/components/ColumnHeader.js

@@ -1,43 +1,12 @@
-import e from"styled-components";import{theme as t}from"../../../theme/index.js";const o=e.div`
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: white;
-  color: ${t.colors.neutral.ink.lightest};
-`,n=e.span`
-  display: flex;
-  height: 28px;
-  align-items: center;
-  gap: 4px;
-  white-space: nowrap;
+import styled from 'styled-components';
+import { theme } from '../../../theme/index.js';
 
-  color: ${t.text.headingTable.color};
-  font-family: ${t.text.headingTable.fontFamily};
-  font-size: ${t.text.headingTable.fontSize};
-  font-style: ${t.text.headingTable.fontStyle};
-  font-weight: ${t.text.headingTable.fontWeight};
-  line-height: ${t.text.headingTable.lineHeight};
-`,i=e(n).attrs((()=>({as:"button",type:"button"})))`
-  appearance: none;
-  padding: 0;
-  border: 0;
-  border-radius: 4px;
-  background-color: transparent;
+const SortIndicator = styled.div.withConfig({ displayName: "vui--SortIndicator", componentId: "vui--o7masx" }) `width:20px;height:20px;display:flex;align-items:center;justify-content:center;background-color:white;color:${theme.colors.neutral.ink.lightest};`;
+const HeaderContent = styled.span.withConfig({ displayName: "vui--HeaderContent", componentId: "vui--vlccds" }) `display:flex;height:28px;align-items:center;gap:4px;white-space:nowrap;color:${theme.text.headingTable.color};font-family:${theme.text.headingTable.fontFamily};font-size:${theme.text.headingTable.fontSize};font-style:${theme.text.headingTable.fontStyle};font-weight:${theme.text.headingTable.fontWeight};line-height:${theme.text.headingTable.lineHeight};`;
+const ClickableHeaderContent = styled(HeaderContent).attrs(() => ({
+    as: 'button',
+    type: 'button',
+})).withConfig({ displayName: "vui--ClickableHeaderContent", componentId: "vui--xbox8h" }) `appearance:none;padding:0;border:0;border-radius:4px;background-color:transparent;&:not(:disabled):hover{cursor:pointer;}&:hover ${SortIndicator}{background-color:${theme.colors.neutral.grey.light};color:${theme.colors.neutral.ink.base};}&:focus-visible{outline:0;box-shadow:0px 0px 0px 2px ${theme.colors.secondary.blue.light};}`;
 
-  &:not(:disabled):hover {
-    cursor: pointer;
-  }
-
-  &:hover ${o} {
-    background-color: ${t.colors.neutral.grey.light};
-    color: ${t.colors.neutral.ink.base};
-  }
-
-  &:focus-visible {
-    outline: 0;
-    box-shadow: 0px 0px 0px 2px ${t.colors.secondary.blue.light};
-  }
-`;export{i as ClickableHeaderContent,n as HeaderContent,o as SortIndicator};
+export { ClickableHeaderContent, HeaderContent, SortIndicator };
 //# sourceMappingURL=ColumnHeader.js.map

package/dist/components/DataTable/components/ColumnHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeader.js","sources":["../../../../src/components/DataTable/components/ColumnHeader.tsx"],"sourcesContent":[null],"names":["SortIndicator","styled","div"],"mappings":"iFA4BA,MAAAA,EAAmCC,EAAAC,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ColumnHeader.js","sources":["../../../../src/components/DataTable/components/ColumnHeader.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;AAGa,MAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAO5B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2GAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;AAG/B,MAAA,aAAa,GAAG,MAAM,CAAC,IAAI,CAO7B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,6EAAA,EAAA,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAA,aAAA,EACvB,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,WAAA,EACpC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAC/B,YAAA,EAAA,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAChC,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,aAAA,EAClC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,CAAA;AAG5C,MAAM,sBAAsB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACvE,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,IAAI,EAAE,QAAQ;AACf,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iIAAA,EAWS,aAAa,CAAA,kBAAA,EACD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,OAAA,EAC1C,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,0DAKR,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;"}

package/dist/components/DataTable/components/ColumnMenu.cjs

@@ -1,2 +1,51 @@
-"use strict";var e=require("react"),t=require("../../Button/Button.cjs"),n=require("../../Card/Card.cjs"),l=require("../../Popover/Popover.cjs"),a=require("../../Stack/Stack.cjs"),r=require("../../../theme/index.cjs"),c=require("../../../tempIcons/VisibilityIcon.cjs"),o=require("../../../tempIcons/VisibilityOffIcon.cjs"),i=require("../../../tempIcons/ReorderIcon.cjs");function u(e){return e&&e.__esModule?e:{default:e}}var s=u(e);exports.ColumnMenu=function({columns:u,columnGroups:d,setColumns:m}){const[f,p]=e.useState(null),[E,k]=e.useState(!1),h=u.map((e=>[e.id,e])),S=Object.fromEntries(h),y=d.map((e=>e.map((e=>S[e])))),C=(e,t)=>{const n=y[e].map((e=>e.id)),l=[...u];n.forEach((e=>{const n=l.findIndex((t=>t.id===e));n<0||(l[n]={...l[n],hidden:t})})),m(l)};return s.default.createElement(s.default.Fragment,null,s.default.createElement(t.Button,{ref:p,dropdown:!0,onClick:()=>k(!0)},"Columns"),E&&s.default.createElement(l.Popover,{anchorElement:f,onShouldClose:()=>k(!1)},s.default.createElement(n.Card,{style:{width:600}},s.default.createElement(a.Stack,{alignX:"stretch",spacing:"sm"},y.map(((e,n)=>s.default.createElement(a.Stack,{key:e[0].id,direction:"horizontal",alignY:"center",spacing:"sm",style:{border:"1px solid black",padding:8}},s.default.createElement(t.Button,{variant:"flat",iconSlot:s.default.createElement(i.ReorderIcon,null)}),s.default.createElement(a.Stack,{spacing:"sm",style:{flex:1}},e.map((e=>s.default.createElement("div",{key:e.id},e.title)))),s.default.createElement(a.Stack,{direction:"horizontal",spacing:"sm"},e[0].hidden?s.default.createElement(t.Button,{variant:"flat",iconSlot:s.default.createElement(o.VisiblityOffIcon,null),onClick:()=>C(n,!1),style:{color:r.theme.colors.neutral.ink.lightest}}):s.default.createElement(t.Button,{variant:"flat",iconSlot:s.default.createElement(c.VisiblityIcon,null),onClick:()=>C(n,!0)})))))))))};
+'use strict';
+
+var React = require('react');
+var Button = require('../../Button/Button.cjs');
+var Card = require('../../Card/Card.cjs');
+var Popover = require('../../Popover/Popover.cjs');
+var Stack = require('../../Stack/Stack.cjs');
+var index = require('../../../theme/index.cjs');
+var VisibilityIcon = require('../../../tempIcons/VisibilityIcon.cjs');
+var VisibilityOffIcon = require('../../../tempIcons/VisibilityOffIcon.cjs');
+var ReorderIcon = require('../../../tempIcons/ReorderIcon.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+function ColumnMenu({ columns, columnGroups, setColumns }) {
+    const [popoverAnchor, setPopoverAnchor] = React.useState(null);
+    const [showPopover, setShowPopover] = React.useState(false);
+    const columnEntries = columns.map((column) => [column.id, column]);
+    const columnsMap = Object.fromEntries(columnEntries);
+    const groups = columnGroups.map((group) => group.map((columnId) => columnsMap[columnId]));
+    const setHidden = (groupIndex, hidden) => {
+        const columnIds = groups[groupIndex].map((column) => column.id);
+        const newColumns = [...columns];
+        columnIds.forEach((columnId) => {
+            const index = newColumns.findIndex((column) => column.id === columnId);
+            if (index < 0)
+                return;
+            newColumns[index] = {
+                ...newColumns[index],
+                hidden,
+            };
+        });
+        setColumns(newColumns);
+    };
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(Button.Button, { ref: setPopoverAnchor, dropdown: true, onClick: () => setShowPopover(true) }, "Columns"),
+        showPopover && (React__default.default.createElement(Popover.Popover, { anchorElement: popoverAnchor, onShouldClose: () => setShowPopover(false) },
+            React__default.default.createElement(Card.Card, { style: { width: 600 } },
+                React__default.default.createElement(Stack.Stack, { alignX: "stretch", spacing: "sm" }, groups.map((group, groupIndex) => (React__default.default.createElement(Stack.Stack, { key: group[0].id, direction: "horizontal", alignY: "center", spacing: "sm", style: {
+                        border: '1px solid black',
+                        padding: 8,
+                    } },
+                    React__default.default.createElement(Button.Button, { variant: "flat", iconSlot: React__default.default.createElement(ReorderIcon.ReorderIcon, null) }),
+                    React__default.default.createElement(Stack.Stack, { spacing: "sm", style: { flex: 1 } }, group.map((column) => (React__default.default.createElement("div", { key: column.id }, column.title)))),
+                    React__default.default.createElement(Stack.Stack, { direction: "horizontal", spacing: "sm" }, group[0].hidden ? (React__default.default.createElement(Button.Button, { variant: "flat", iconSlot: React__default.default.createElement(VisibilityOffIcon.VisiblityOffIcon, null), onClick: () => setHidden(groupIndex, false), style: { color: index.theme.colors.neutral.ink.lightest } })) : (React__default.default.createElement(Button.Button, { variant: "flat", iconSlot: React__default.default.createElement(VisibilityIcon.VisiblityIcon, null), onClick: () => setHidden(groupIndex, true) }))))))))))));
+}
+
+exports.ColumnMenu = ColumnMenu;
 //# sourceMappingURL=ColumnMenu.cjs.map

package/dist/components/DataTable/components/ColumnMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnMenu.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"ColumnMenu.cjs","sources":["../../../../src/components/DataTable/components/ColumnMenu.tsx"],"sourcesContent":[null],"names":["useState","React","Button","Popover","Card","Stack","ReorderIcon","VisiblityOffIcon","theme","VisiblityIcon"],"mappings":"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"}

package/dist/components/DataTable/components/ColumnMenu.d.ts

@@ -6,4 +6,3 @@ export interface ColumnMenuProps {
     setColumns: (columns: ColumnConfigs) => void;
 }
 export declare function ColumnMenu({ columns, columnGroups, setColumns }: ColumnMenuProps): React.JSX.Element;
-//# sourceMappingURL=ColumnMenu.d.ts.map

package/dist/components/DataTable/components/ColumnMenu.js

@@ -1,2 +1,45 @@
-import e,{useState as t}from"react";import{Button as n}from"../../Button/Button.js";import{Card as o}from"../../Card/Card.js";import{Popover as r}from"../../Popover/Popover.js";import{Stack as l}from"../../Stack/Stack.js";import{theme as i}from"../../../theme/index.js";import{VisiblityIcon as m}from"../../../tempIcons/VisibilityIcon.js";import{VisiblityOffIcon as c}from"../../../tempIcons/VisibilityOffIcon.js";import{ReorderIcon as a}from"../../../tempIcons/ReorderIcon.js";function s({columns:s,columnGroups:p,setColumns:d}){const[f,E]=t(null),[u,h]=t(!1),g=s.map((e=>[e.id,e])),j=Object.fromEntries(g),k=p.map((e=>e.map((e=>j[e])))),y=(e,t)=>{const n=k[e].map((e=>e.id)),o=[...s];n.forEach((e=>{const n=o.findIndex((t=>t.id===e));n<0||(o[n]={...o[n],hidden:t})})),d(o)};return e.createElement(e.Fragment,null,e.createElement(n,{ref:E,dropdown:!0,onClick:()=>h(!0)},"Columns"),u&&e.createElement(r,{anchorElement:f,onShouldClose:()=>h(!1)},e.createElement(o,{style:{width:600}},e.createElement(l,{alignX:"stretch",spacing:"sm"},k.map(((t,o)=>e.createElement(l,{key:t[0].id,direction:"horizontal",alignY:"center",spacing:"sm",style:{border:"1px solid black",padding:8}},e.createElement(n,{variant:"flat",iconSlot:e.createElement(a,null)}),e.createElement(l,{spacing:"sm",style:{flex:1}},t.map((t=>e.createElement("div",{key:t.id},t.title)))),e.createElement(l,{direction:"horizontal",spacing:"sm"},t[0].hidden?e.createElement(n,{variant:"flat",iconSlot:e.createElement(c,null),onClick:()=>y(o,!1),style:{color:i.colors.neutral.ink.lightest}}):e.createElement(n,{variant:"flat",iconSlot:e.createElement(m,null),onClick:()=>y(o,!0)})))))))))}export{s as ColumnMenu};
+import React, { useState } from 'react';
+import { Button } from '../../Button/Button.js';
+import { Card } from '../../Card/Card.js';
+import { Popover } from '../../Popover/Popover.js';
+import { Stack } from '../../Stack/Stack.js';
+import { theme } from '../../../theme/index.js';
+import { VisiblityIcon } from '../../../tempIcons/VisibilityIcon.js';
+import { VisiblityOffIcon } from '../../../tempIcons/VisibilityOffIcon.js';
+import { ReorderIcon } from '../../../tempIcons/ReorderIcon.js';
+
+function ColumnMenu({ columns, columnGroups, setColumns }) {
+    const [popoverAnchor, setPopoverAnchor] = useState(null);
+    const [showPopover, setShowPopover] = useState(false);
+    const columnEntries = columns.map((column) => [column.id, column]);
+    const columnsMap = Object.fromEntries(columnEntries);
+    const groups = columnGroups.map((group) => group.map((columnId) => columnsMap[columnId]));
+    const setHidden = (groupIndex, hidden) => {
+        const columnIds = groups[groupIndex].map((column) => column.id);
+        const newColumns = [...columns];
+        columnIds.forEach((columnId) => {
+            const index = newColumns.findIndex((column) => column.id === columnId);
+            if (index < 0)
+                return;
+            newColumns[index] = {
+                ...newColumns[index],
+                hidden,
+            };
+        });
+        setColumns(newColumns);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { ref: setPopoverAnchor, dropdown: true, onClick: () => setShowPopover(true) }, "Columns"),
+        showPopover && (React.createElement(Popover, { anchorElement: popoverAnchor, onShouldClose: () => setShowPopover(false) },
+            React.createElement(Card, { style: { width: 600 } },
+                React.createElement(Stack, { alignX: "stretch", spacing: "sm" }, groups.map((group, groupIndex) => (React.createElement(Stack, { key: group[0].id, direction: "horizontal", alignY: "center", spacing: "sm", style: {
+                        border: '1px solid black',
+                        padding: 8,
+                    } },
+                    React.createElement(Button, { variant: "flat", iconSlot: React.createElement(ReorderIcon, null) }),
+                    React.createElement(Stack, { spacing: "sm", style: { flex: 1 } }, group.map((column) => (React.createElement("div", { key: column.id }, column.title)))),
+                    React.createElement(Stack, { direction: "horizontal", spacing: "sm" }, group[0].hidden ? (React.createElement(Button, { variant: "flat", iconSlot: React.createElement(VisiblityOffIcon, null), onClick: () => setHidden(groupIndex, false), style: { color: theme.colors.neutral.ink.lightest } })) : (React.createElement(Button, { variant: "flat", iconSlot: React.createElement(VisiblityIcon, null), onClick: () => setHidden(groupIndex, true) }))))))))))));
+}
+
+export { ColumnMenu };
 //# sourceMappingURL=ColumnMenu.js.map

package/dist/components/DataTable/components/ColumnMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnMenu.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"ColumnMenu.js","sources":["../../../../src/components/DataTable/components/ColumnMenu.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/components/DataTable/components/EmptyBodyContent.cjs

@@ -1,15 +1,15 @@
-"use strict";var e=require("styled-components"),t=require("../../../theme/index.cjs");function r(e){return e&&e.__esModule?e:{default:e}}var d=r(e);const n=d.default.div`
-  padding-top: ${t.theme.sizes.lg};
-  padding-bottom: ${t.theme.sizes.lg};
-  grid-column: ${({columnCount:e})=>`1 / span ${e}`};
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: ${t.theme.sizes.md};
-`,o=d.default.div`
-  padding: ${t.theme.sizes.md};
-  background-color: ${t.theme.colors.neutral.grey.light};
-  border-radius: ${t.theme.radius.full};
-`;exports.EmptyBodyContent=n,exports.EmptyBodyGlyphWrapper=o;
+'use strict';
+
+var styled = require('styled-components');
+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 EmptyBodyContent = styled__default.default.div.withConfig({ displayName: "vui--EmptyBodyContent", componentId: "vui--grzgy2" }) `padding-top:${index.theme.sizes.lg};padding-bottom:${index.theme.sizes.lg};grid-column:${({ columnCount }) => `1 / span ${columnCount}`};display:flex;flex-direction:column;align-items:center;justify-content:center;gap:${index.theme.sizes.md};`;
+const EmptyBodyGlyphWrapper = styled__default.default.div.withConfig({ displayName: "vui--EmptyBodyGlyphWrapper", componentId: "vui--1uqall4" }) `padding:${index.theme.sizes.md};background-color:${index.theme.colors.neutral.grey.light};border-radius:${index.theme.radius.full};`;
+
+exports.EmptyBodyContent = EmptyBodyContent;
+exports.EmptyBodyGlyphWrapper = EmptyBodyGlyphWrapper;
 //# sourceMappingURL=EmptyBodyContent.cjs.map

package/dist/components/DataTable/components/EmptyBodyContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyBodyContent.cjs","sources":["../../../../src/components/DataTable/components/EmptyBodyContent.ts"],"sourcesContent":[null],"names":["EmptyBodyContent","styled","div","theme","sizes","lg"],"mappings":"oJAKC,MAAAA,EAAAC,EAAAA,QAAAC,GAAA;iBAEMC,EAAsBA,MAAAC,MAAAC;oBAWtBF,EAA2BA,MAAAC,MAAAC;;;;;;;;;;;"}
+{"version":3,"file":"EmptyBodyContent.cjs","sources":["../../../../src/components/DataTable/components/EmptyBodyContent.ts"],"sourcesContent":[null],"names":["styled","theme"],"mappings":";;;;;;;;;AAOa,MAAA,gBAAgB,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EACzBC,WAAK,CAAC,KAAK,CAAC,EAAE,CACX,gBAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,aAAA,EACjB,CAAC,EAAE,WAAW,EAAE,KAAK,CAAA,SAAA,EAAY,WAAW,CAAA,CAAE,qFAKtDA,WAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,qBAAqB,GAAGD,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EAClCC,WAAK,CAAC,KAAK,CAAC,EAAE,CACL,kBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAClC,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI;;;;;"}

package/dist/components/DataTable/components/EmptyBodyContent.d.ts

@@ -3,4 +3,3 @@ export interface EmptyBodyContentProps {
 }
 export declare const EmptyBodyContent: import("styled-components").StyledComponent<"div", any, EmptyBodyContentProps, never>;
 export declare const EmptyBodyGlyphWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-//# sourceMappingURL=EmptyBodyContent.d.ts.map

package/dist/components/DataTable/components/EmptyBodyContent.js

@@ -1,15 +1,8 @@
-import o from"styled-components";import{theme as e}from"../../../theme/index.js";const i=o.div`
-  padding-top: ${e.sizes.lg};
-  padding-bottom: ${e.sizes.lg};
-  grid-column: ${({columnCount:o})=>`1 / span ${o}`};
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: ${e.sizes.md};
-`,n=o.div`
-  padding: ${e.sizes.md};
-  background-color: ${e.colors.neutral.grey.light};
-  border-radius: ${e.radius.full};
-`;export{i as EmptyBodyContent,n as EmptyBodyGlyphWrapper};
+import styled from 'styled-components';
+import { theme } from '../../../theme/index.js';
+
+const EmptyBodyContent = styled.div.withConfig({ displayName: "vui--EmptyBodyContent", componentId: "vui--grzgy2" }) `padding-top:${theme.sizes.lg};padding-bottom:${theme.sizes.lg};grid-column:${({ columnCount }) => `1 / span ${columnCount}`};display:flex;flex-direction:column;align-items:center;justify-content:center;gap:${theme.sizes.md};`;
+const EmptyBodyGlyphWrapper = styled.div.withConfig({ displayName: "vui--EmptyBodyGlyphWrapper", componentId: "vui--1uqall4" }) `padding:${theme.sizes.md};background-color:${theme.colors.neutral.grey.light};border-radius:${theme.radius.full};`;
+
+export { EmptyBodyContent, EmptyBodyGlyphWrapper };
 //# sourceMappingURL=EmptyBodyContent.js.map

package/dist/components/DataTable/components/EmptyBodyContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyBodyContent.js","sources":["../../../../src/components/DataTable/components/EmptyBodyContent.ts"],"sourcesContent":[null],"names":["EmptyBodyContent","styled","div","theme","sizes","lg"],"mappings":"iFAKC,MAAAA,EAAAC,EAAAC,GAAA;iBAEMC,EAAsBC,MAAAC;oBAWtBF,EAA2BC,MAAAC;;;;;;;;;;;"}
+{"version":3,"file":"EmptyBodyContent.js","sources":["../../../../src/components/DataTable/components/EmptyBodyContent.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAOa,MAAA,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EACzB,KAAK,CAAC,KAAK,CAAC,EAAE,CACX,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,aAAA,EACjB,CAAC,EAAE,WAAW,EAAE,KAAK,CAAA,SAAA,EAAY,WAAW,CAAA,CAAE,qFAKtD,KAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EAClC,KAAK,CAAC,KAAK,CAAC,EAAE,CACL,kBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAClC,eAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI;;;;"}

package/dist/components/DataTable/components/Header.cjs

@@ -1,17 +1,17 @@
-"use strict";var e=require("styled-components"),t=require("../../../theme/index.cjs"),i=require("../utils/alignmentToFlex.cjs");require("../types.cjs"),require("react");var n=require("../constants.cjs");function r(e){return e&&e.__esModule?e:{default:e}}const s=r(e).default.th`
-  height: ${n.headerCellHeight};
+'use strict';
 
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: ${({align:e="left"})=>i.alignmentToFlex(e)};
-  z-index: ${({zIndex:e=0})=>e};
+var styled = require('styled-components');
+var index = require('../../../theme/index.cjs');
+var alignmentToFlex = require('../utils/alignmentToFlex.cjs');
+require('../types.cjs');
+require('react');
+var constants = require('../constants.cjs');
 
-  background-color: white;
-  padding-left: ${({spacing:e=n.defaultCellSpacing})=>t.theme.sizes[e]};
-  padding-right: ${({spacing:e=n.defaultCellSpacing})=>t.theme.sizes[e]};
-  border-bottom: 1px solid ${t.theme.colors.neutral.grey.base};
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-  grid-column-end: ${({span:e=1})=>`span ${e}`};
-`;exports.Header=s;
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const Header = styled__default.default.th.withConfig({ displayName: "vui--Header", componentId: "vui--12e6ib8" }) `height:${constants.headerCellHeight};position:relative;display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex.alignmentToFlex(align)};z-index:${({ zIndex = 0 }) => zIndex};background-color:white;padding-left:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};padding-right:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};border-bottom:1px solid ${index.theme.colors.neutral.grey.base};grid-column-end:${({ span = 1 }) => `span ${span}`};`;
+
+exports.Header = Header;
 //# sourceMappingURL=Header.cjs.map

package/dist/components/DataTable/components/Header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"Header.cjs","sources":["../../../../src/components/DataTable/components/Header.ts"],"sourcesContent":[null],"names":["styled","headerCellHeight","alignmentToFlex","defaultCellSpacing","theme"],"mappings":";;;;;;;;;;;;;AAMa,MAAA,MAAM,GAAGA,uBAAM,CAAC,EAAE,CACnB,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,OAAA,EAAAC,0BAAgB,sEAKP,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAKC,+BAAe,CAAC,KAAK,CAAC,CAAA,SAAA,EACtD,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,MAAM,CAGrB,qCAAA,EAAA,CAAC,EAAE,OAAO,GAAGC,4BAAkB,EAAE,KAAKC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBACzD,CAAC,EAAE,OAAO,GAAGD,4BAAkB,EAAE,KAAKC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAChD,yBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iBAAA,EAEtC,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,QAAQ,IAAI,CAAA,CAAE;;;;"}

package/dist/components/DataTable/components/Header.d.ts

@@ -1,3 +1,2 @@
 import { HeaderProps } from '../types';
 export declare const Header: import("styled-components").StyledComponent<"th", any, HeaderProps, never>;
-//# sourceMappingURL=Header.d.ts.map

package/dist/components/DataTable/components/Header.js

@@ -1,17 +1,11 @@
-import t from"styled-components";import{theme as e}from"../../../theme/index.js";import{alignmentToFlex as i}from"../utils/alignmentToFlex.js";import"../types.js";import"react";import{headerCellHeight as o,defaultCellSpacing as n}from"../constants.js";const s=t.th`
-  height: ${o};
+import styled from 'styled-components';
+import { theme } from '../../../theme/index.js';
+import { alignmentToFlex } from '../utils/alignmentToFlex.js';
+import '../types.js';
+import 'react';
+import { headerCellHeight, defaultCellSpacing } from '../constants.js';
 
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: ${({align:t="left"})=>i(t)};
-  z-index: ${({zIndex:t=0})=>t};
+const Header = styled.th.withConfig({ displayName: "vui--Header", componentId: "vui--12e6ib8" }) `height:${headerCellHeight};position:relative;display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex(align)};z-index:${({ zIndex = 0 }) => zIndex};background-color:white;padding-left:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};padding-right:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};border-bottom:1px solid ${theme.colors.neutral.grey.base};grid-column-end:${({ span = 1 }) => `span ${span}`};`;
 
-  background-color: white;
-  padding-left: ${({spacing:t=n})=>e.sizes[t]};
-  padding-right: ${({spacing:t=n})=>e.sizes[t]};
-  border-bottom: 1px solid ${e.colors.neutral.grey.base};
-
-  grid-column-end: ${({span:t=1})=>`span ${t}`};
-`;export{s as Header};
+export { Header };
 //# sourceMappingURL=Header.js.map

package/dist/components/DataTable/components/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"Header.js","sources":["../../../../src/components/DataTable/components/Header.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAMa,MAAA,MAAM,GAAG,MAAM,CAAC,EAAE,CACnB,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,OAAA,EAAA,gBAAgB,sEAKP,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,eAAe,CAAC,KAAK,CAAC,CAAA,SAAA,EACtD,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,MAAM,CAGrB,qCAAA,EAAA,CAAC,EAAE,OAAO,GAAG,kBAAkB,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBACzD,CAAC,EAAE,OAAO,GAAG,kBAAkB,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAChD,yBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iBAAA,EAEtC,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,QAAQ,IAAI,CAAA,CAAE;;;;"}

package/dist/components/DataTable/components/LoadingCellContent.cjs

@@ -1,33 +1,16 @@
-"use strict";var e=require("styled-components"),i=require("../../../theme/index.cjs");function n(e){return e&&e.__esModule?e:{default:e}}var r=n(e);const a=i.theme.colors.neutral.grey.base,t=i.theme.colors.neutral.grey.dark,o=r.default.div`
-  height: 20px;
-  width: 75%;
-  border-radius: ${i.theme.radius.base};
+'use strict';
 
-  background: ${a};
-  background-image: linear-gradient(
-    to right,
-    ${a} 0%,
-    ${t} 20%,
-    ${a} 40%,
-    ${a} 100%
-  );
-  background-repeat: no-repeat;
-  background-size: 800px 104px;
+var styled = require('styled-components');
+var index = require('../../../theme/index.cjs');
 
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-name: placeholderShimmer;
-  animation-timing-function: linear;
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-  @keyframes placeholderShimmer {
-    0% {
-      background-position: -468px 0;
-    }
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-    100% {
-      background-position: 468px 0;
-    }
-  }
-`;exports.LoadingCellContent=o;
+/* Loading content shimmer animation */
+const shimmerLight = index.theme.colors.neutral.grey.base;
+const shimmerDark = index.theme.colors.neutral.grey.dark;
+const LoadingCellContent = styled__default.default.div.withConfig({ displayName: "vui--LoadingCellContent", componentId: "vui--1mf4ayh" }) `height:20px;width:75%;border-radius:${index.theme.radius.base};background:${shimmerLight};background-image:linear-gradient(\n    to right,\n    ${shimmerLight} 0%,\n    ${shimmerDark} 20%,\n    ${shimmerLight} 40%,\n    ${shimmerLight} 100%\n  );background-repeat:no-repeat;background-size:800px 104px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeholderShimmer;animation-timing-function:linear;@keyframes placeholderShimmer{0%{background-position:-468px 0;}100%{background-position:468px 0;}}`;
+
+exports.LoadingCellContent = LoadingCellContent;
 //# sourceMappingURL=LoadingCellContent.cjs.map

package/dist/components/DataTable/components/LoadingCellContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingCellContent.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"LoadingCellContent.cjs","sources":["../../../../src/components/DataTable/components/LoadingCellContent.ts"],"sourcesContent":[null],"names":["theme","styled"],"mappings":";;;;;;;;;AAGA;AACA,MAAM,YAAY,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AACnD,MAAM,WAAW,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAErC,MAAA,kBAAkB,GAAGC,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,oCAAA,EAGzBD,WAAK,CAAC,MAAM,CAAC,IAAI,CAEpB,YAAA,EAAA,YAAY,CAGtB,uDAAA,EAAA,YAAY,CACZ,UAAA,EAAA,WAAW,cACX,YAAY,CAAA,WAAA,EACZ,YAAY,CAAA,8TAAA;;;;"}

package/dist/components/DataTable/components/LoadingCellContent.d.ts

@@ -1,2 +1 @@
 export declare const LoadingCellContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-//# sourceMappingURL=LoadingCellContent.d.ts.map