@veeqo/ui 9.9.2 → 10.0.0-beta.1

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.cjs","sources":["../../../../src/components/DataTable/components/ActionBar.tsx"],"sourcesContent":["import React, { useEffect, useState, RefObject, CSSProperties, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { renderHeader } from '../renderers/renderHeader';\nimport { ColumnConfig } from '../types';\nimport { headerCellHeight } from '../constants';\n\nconst Container = styled.div`\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: ${headerCellHeight};\n  background-color: white;\n`;\n\nconst Content = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  border-bottom: 1px solid ${theme.colors.neutral.grey.base};\n\n  & > * {\n    flex: 1;\n  }\n`;\n\nexport interface ActionBarProps {\n  children: ReactNode;\n  selectionColumn: ColumnConfig;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n}\n\nexport function ActionBar({\n  selectionColumn,\n  intersectionTargetRef,\n  containerRef,\n  children,\n}: ActionBarProps) {\n  const [isSticky, setIsSticky] = useState(false);\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const callback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsSticky(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(callback);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    /* eslint-disable-next-line consistent-return */\n    return () => intersectionObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [intersectionTargetRef.current]);\n\n  const containerRect = containerRef.current?.getBoundingClientRect();\n\n  const defaultPositionStyles: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  };\n\n  const stickyPositionStyles: CSSProperties = {\n    position: 'fixed',\n    top: 0,\n    left: containerRect?.left,\n    width: containerRect?.width,\n  };\n\n  const style = isSticky ? stickyPositionStyles : defaultPositionStyles;\n\n  return (\n    <Container style={style}>\n      {renderHeader({ column: selectionColumn })}\n      <Content>{children}</Content>\n    </Container>\n  );\n}\n"],"names":["styled","headerCellHeight","theme","useState","useEffect","React","renderHeader"],"mappings":";;;;;;;;;;;;;AAOA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG,CAShB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAAAC,0BAAgB,0BAE3B;AAED,MAAM,OAAO,GAAGD,uBAAM,CAAC,GAAG,4KAMGE,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,iBAK1D;AASK,SAAU,SAAS,CAAC,EACxB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACO,EAAA;;IACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;IAE/CC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE;AACpC,QAAA,MAAM,QAAQ,GAAiC,CAAC,OAAO,KAAI;AACzD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,WAAW,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC;AACpC,aAAC,CAAC;AACJ,SAAC;AACD,QAAA,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,QAAQ,CAAC;AAC/D,QAAA,oBAAoB,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC;;AAE3D,QAAA,OAAO,MAAM,oBAAoB,CAAC,UAAU,EAAE;;AAEhD,KAAC,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,qBAAqB,EAAE;AAEnE,IAAA,MAAM,qBAAqB,GAAkB;AAC3C,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;KACT;AAED,IAAA,MAAM,oBAAoB,GAAkB;AAC1C,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,IAAI;AACzB,QAAA,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,KAAK;KAC5B;IAED,MAAM,KAAK,GAAG,QAAQ,GAAG,oBAAoB,GAAG,qBAAqB;AAErE,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;AACpB,QAAAC,yBAAY,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;AAC1C,QAAAD,sBAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACnB;AAEhB;;;;"}
+{"version":3,"file":"ActionBar.cjs","sources":["../../../../src/components/DataTable/components/ActionBar.tsx"],"sourcesContent":["import React, { useEffect, useState, RefObject, CSSProperties, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { renderHeader } from '../renderers/renderHeader';\nimport { ColumnConfig } from '../types';\nimport { headerCellHeight } from '../constants';\n\nconst Container = styled.div`\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: ${headerCellHeight};\n  background-color: white;\n`;\n\nconst Content = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  border-bottom: 1px solid ${theme.colors.neutral.grey.base};\n\n  & > * {\n    flex: 1;\n  }\n`;\n\nexport interface ActionBarProps {\n  children: ReactNode;\n  selectionColumn: ColumnConfig;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n}\n\nexport function ActionBar({\n  selectionColumn,\n  intersectionTargetRef,\n  containerRef,\n  children,\n}: ActionBarProps) {\n  const [isSticky, setIsSticky] = useState(false);\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const callback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsSticky(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(callback);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    /* eslint-disable-next-line consistent-return */\n    return () => intersectionObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [intersectionTargetRef.current]);\n\n  const containerRect = containerRef.current?.getBoundingClientRect();\n\n  const defaultPositionStyles: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  };\n\n  const stickyPositionStyles: CSSProperties = {\n    position: 'fixed',\n    top: 0,\n    left: containerRect?.left,\n    width: containerRect?.width,\n  };\n\n  const style = isSticky ? stickyPositionStyles : defaultPositionStyles;\n\n  return (\n    <Container style={style}>\n      {renderHeader({ column: selectionColumn })}\n      <Content>{children}</Content>\n    </Container>\n  );\n}\n"],"names":["styled","headerCellHeight","theme","useState","useEffect","React","renderHeader"],"mappings":";;;;;;;;;;;;;AAOA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG,CAShB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAAAC,0BAAgB,0BAE3B;AAED,MAAM,OAAO,GAAGD,uBAAM,CAAC,GAAG,4KAMGE,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,iBAK1D;AASK,SAAU,SAAS,CAAC,EACxB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACO,EAAA;;IACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;IAE/CC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE;AACpC,QAAA,MAAM,QAAQ,GAAiC,CAAC,OAAO,KAAI;AACzD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,WAAW,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC;AACpC,aAAC,CAAC;AACJ,SAAC;AACD,QAAA,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,QAAQ,CAAC;AAC/D,QAAA,oBAAoB,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC;;AAE3D,QAAA,OAAO,MAAM,oBAAoB,CAAC,UAAU,EAAE;;AAEhD,KAAC,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,qBAAqB,EAAE;AAEnE,IAAA,MAAM,qBAAqB,GAAkB;AAC3C,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;KACT;AAED,IAAA,MAAM,oBAAoB,GAAkB;AAC1C,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,IAAI;AACzB,QAAA,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,KAAK;KAC5B;IAED,MAAM,KAAK,GAAG,QAAQ,GAAG,oBAAoB,GAAG,qBAAqB;AAErE,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;AACpB,QAAAC,yBAAY,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;AAC1C,QAAAD,sBAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACnB;AAEhB;;;;"}

package/dist/components/DataTable/components/ActionBar.js

@@ -4,8 +4,8 @@ import { theme } from '../../../theme/index.js';
 import { renderHeader } from '../renderers/renderHeader.js';
 import { headerCellHeight } from '../constants.js';
 
-const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--1feqxrw" }) `display:grid;grid-template-columns:auto 1fr;align-items:center;position:absolute;top:0;left:0;right:0;z-index:50;height:${headerCellHeight};background-color:white;`;
-const Content = styled.div.withConfig({ displayName: "vui--Content", componentId: "vui--dbz7t3" }) `width:100%;height:100%;display:flex;align-items:center;padding:0 0.5rem;border-bottom:1px solid ${theme.colors.neutral.grey.base};& > *{flex:1;}`;
+const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--uoc40o" }) `display:grid;grid-template-columns:auto 1fr;align-items:center;position:absolute;top:0;left:0;right:0;z-index:50;height:${headerCellHeight};background-color:white;`;
+const Content = styled.div.withConfig({ displayName: "vui--Content", componentId: "vui--x1996k" }) `width:100%;height:100%;display:flex;align-items:center;padding:0 0.5rem;border-bottom:1px solid ${theme.colors.neutral.grey.base};& > *{flex:1;}`;
 function ActionBar({ selectionColumn, intersectionTargetRef, containerRef, children, }) {
     var _a;
     const [isSticky, setIsSticky] = useState(false);

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.js","sources":["../../../../src/components/DataTable/components/ActionBar.tsx"],"sourcesContent":["import React, { useEffect, useState, RefObject, CSSProperties, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { renderHeader } from '../renderers/renderHeader';\nimport { ColumnConfig } from '../types';\nimport { headerCellHeight } from '../constants';\n\nconst Container = styled.div`\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: ${headerCellHeight};\n  background-color: white;\n`;\n\nconst Content = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  border-bottom: 1px solid ${theme.colors.neutral.grey.base};\n\n  & > * {\n    flex: 1;\n  }\n`;\n\nexport interface ActionBarProps {\n  children: ReactNode;\n  selectionColumn: ColumnConfig;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n}\n\nexport function ActionBar({\n  selectionColumn,\n  intersectionTargetRef,\n  containerRef,\n  children,\n}: ActionBarProps) {\n  const [isSticky, setIsSticky] = useState(false);\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const callback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsSticky(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(callback);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    /* eslint-disable-next-line consistent-return */\n    return () => intersectionObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [intersectionTargetRef.current]);\n\n  const containerRect = containerRef.current?.getBoundingClientRect();\n\n  const defaultPositionStyles: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  };\n\n  const stickyPositionStyles: CSSProperties = {\n    position: 'fixed',\n    top: 0,\n    left: containerRect?.left,\n    width: containerRect?.width,\n  };\n\n  const style = isSticky ? stickyPositionStyles : defaultPositionStyles;\n\n  return (\n    <Container style={style}>\n      {renderHeader({ column: selectionColumn })}\n      <Content>{children}</Content>\n    </Container>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;AAOA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAShB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAAA,gBAAgB,0BAE3B;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,4KAMG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,iBAK1D;AASK,SAAU,SAAS,CAAC,EACxB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACO,EAAA;;IACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE;AACpC,QAAA,MAAM,QAAQ,GAAiC,CAAC,OAAO,KAAI;AACzD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,WAAW,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC;AACpC,aAAC,CAAC;AACJ,SAAC;AACD,QAAA,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,QAAQ,CAAC;AAC/D,QAAA,oBAAoB,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC;;AAE3D,QAAA,OAAO,MAAM,oBAAoB,CAAC,UAAU,EAAE;;AAEhD,KAAC,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,qBAAqB,EAAE;AAEnE,IAAA,MAAM,qBAAqB,GAAkB;AAC3C,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;KACT;AAED,IAAA,MAAM,oBAAoB,GAAkB;AAC1C,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,IAAI;AACzB,QAAA,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,KAAK;KAC5B;IAED,MAAM,KAAK,GAAG,QAAQ,GAAG,oBAAoB,GAAG,qBAAqB;AAErE,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;AACpB,QAAA,YAAY,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;AAC1C,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACnB;AAEhB;;;;"}
+{"version":3,"file":"ActionBar.js","sources":["../../../../src/components/DataTable/components/ActionBar.tsx"],"sourcesContent":["import React, { useEffect, useState, RefObject, CSSProperties, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { renderHeader } from '../renderers/renderHeader';\nimport { ColumnConfig } from '../types';\nimport { headerCellHeight } from '../constants';\n\nconst Container = styled.div`\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: ${headerCellHeight};\n  background-color: white;\n`;\n\nconst Content = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  border-bottom: 1px solid ${theme.colors.neutral.grey.base};\n\n  & > * {\n    flex: 1;\n  }\n`;\n\nexport interface ActionBarProps {\n  children: ReactNode;\n  selectionColumn: ColumnConfig;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n}\n\nexport function ActionBar({\n  selectionColumn,\n  intersectionTargetRef,\n  containerRef,\n  children,\n}: ActionBarProps) {\n  const [isSticky, setIsSticky] = useState(false);\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const callback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsSticky(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(callback);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    /* eslint-disable-next-line consistent-return */\n    return () => intersectionObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [intersectionTargetRef.current]);\n\n  const containerRect = containerRef.current?.getBoundingClientRect();\n\n  const defaultPositionStyles: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  };\n\n  const stickyPositionStyles: CSSProperties = {\n    position: 'fixed',\n    top: 0,\n    left: containerRect?.left,\n    width: containerRect?.width,\n  };\n\n  const style = isSticky ? stickyPositionStyles : defaultPositionStyles;\n\n  return (\n    <Container style={style}>\n      {renderHeader({ column: selectionColumn })}\n      <Content>{children}</Content>\n    </Container>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;AAOA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAShB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAAA,gBAAgB,0BAE3B;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,4KAMG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,iBAK1D;AASK,SAAU,SAAS,CAAC,EACxB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACO,EAAA;;IACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE;AACpC,QAAA,MAAM,QAAQ,GAAiC,CAAC,OAAO,KAAI;AACzD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,WAAW,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC;AACpC,aAAC,CAAC;AACJ,SAAC;AACD,QAAA,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,QAAQ,CAAC;AAC/D,QAAA,oBAAoB,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC;;AAE3D,QAAA,OAAO,MAAM,oBAAoB,CAAC,UAAU,EAAE;;AAEhD,KAAC,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,qBAAqB,EAAE;AAEnE,IAAA,MAAM,qBAAqB,GAAkB;AAC3C,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;KACT;AAED,IAAA,MAAM,oBAAoB,GAAkB;AAC1C,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,IAAI;AACzB,QAAA,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,KAAK;KAC5B;IAED,MAAM,KAAK,GAAG,QAAQ,GAAG,oBAAoB,GAAG,qBAAqB;AAErE,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;AACpB,QAAA,YAAY,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;AAC1C,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACnB;AAEhB;;;;"}

package/dist/components/DataTable/components/Cell.cjs

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Cell = styled__default.default.td.withConfig({ displayName: "vui--Cell", componentId: "vui--1oz46st" }) `display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex.alignmentToFlex(align)};background-color:white;padding-bottom:var(--density);padding-top:var(--density);padding-left:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};padding-right:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};color:${index.theme.text.bodySmall.color};font-family:${index.theme.text.bodySmall.fontFamily};font-size:${index.theme.text.bodySmall.fontSize};font-style:${index.theme.text.bodySmall.fontStyle};font-weight:${index.theme.text.bodySmall.fontWeight};line-height:${index.theme.text.bodySmall.lineHeight};grid-column-end:${({ span = 1 }) => `span ${span}`};tfoot &{min-height:${constants.footerCellHeight};border-top:1px solid ${index.theme.colors.secondary.blue.base};background-color:${index.theme.colors.neutral.grey.lightest};}`;
+const Cell = styled__default.default.td.withConfig({ displayName: "vui--Cell", componentId: "vui--3tw1b6" }) `display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex.alignmentToFlex(align)};background-color:white;padding-bottom:var(--density);padding-top:var(--density);padding-left:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};padding-right:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};color:${index.theme.text.bodySmall.color};font-family:${index.theme.text.bodySmall.fontFamily};font-size:${index.theme.text.bodySmall.fontSize};font-style:${index.theme.text.bodySmall.fontStyle};font-weight:${index.theme.text.bodySmall.fontWeight};line-height:${index.theme.text.bodySmall.lineHeight};grid-column-end:${({ span = 1 }) => `span ${span}`};tfoot &{min-height:${constants.footerCellHeight};border-top:1px solid ${index.theme.colors.secondary.blue.base};background-color:${index.theme.colors.neutral.grey.lightest};}`;
 
 exports.Cell = Cell;
 //# sourceMappingURL=Cell.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Cell.cjs","sources":["../../../../src/components/DataTable/components/Cell.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { ColumnAlignment, ColumnSpacing } from '../types';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing, footerCellHeight } from '../constants';\n\nexport interface CellProps {\n  align?: ColumnAlignment;\n  spacing?: ColumnSpacing;\n  span?: number;\n}\n\nexport const Cell = styled.td<CellProps>`\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};\n\n  /* Styling */\n  background-color: white;\n  padding-bottom: var(--density);\n  padding-top: var(--density);\n  padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n\n  /* Content */\n  color: ${theme.text.bodySmall.color};\n  font-family: ${theme.text.bodySmall.fontFamily};\n  font-size: ${theme.text.bodySmall.fontSize};\n  font-style: ${theme.text.bodySmall.fontStyle};\n  font-weight: ${theme.text.bodySmall.fontWeight};\n  line-height: ${theme.text.bodySmall.lineHeight};\n\n  /* Grid */\n  grid-column-end: ${({ span = 1 }) => `span ${span}`};\n\n  tfoot & {\n    min-height: ${footerCellHeight};\n    border-top: 1px solid ${theme.colors.secondary.blue.base};\n    background-color: ${theme.colors.neutral.grey.lightest};\n  }\n`;\n"],"names":["styled","alignmentToFlex","defaultCellSpacing","theme","footerCellHeight"],"mappings":";;;;;;;;;;;;;AAYO,MAAM,IAAI,GAAGA,uBAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAGR,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAKC,+BAAe,CAAC,KAAK,CAAC,iGAMjD,CAAC,EAAE,OAAO,GAAGC,4BAAkB,EAAE,KAAKC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CACzD,eAAA,EAAA,CAAC,EAAE,OAAO,GAAGD,4BAAkB,EAAE,KAAKC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,OAAA,EAGlEA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CACpB,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,WAAA,EACjCA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,YAAA,EAC5BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAC7B,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,aAAA,EAC/BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAG3B,iBAAA,EAAA,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAGnC,oBAAA,EAAAC,0BAAgB,CACN,sBAAA,EAAAD,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EACpCA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;;;;"}
+{"version":3,"file":"Cell.cjs","sources":["../../../../src/components/DataTable/components/Cell.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { ColumnAlignment, ColumnSpacing } from '../types';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing, footerCellHeight } from '../constants';\n\nexport interface CellProps {\n  align?: ColumnAlignment;\n  spacing?: ColumnSpacing;\n  span?: number;\n}\n\nexport const Cell = styled.td<CellProps>`\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};\n\n  /* Styling */\n  background-color: white;\n  padding-bottom: var(--density);\n  padding-top: var(--density);\n  padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n\n  /* Content */\n  color: ${theme.text.bodySmall.color};\n  font-family: ${theme.text.bodySmall.fontFamily};\n  font-size: ${theme.text.bodySmall.fontSize};\n  font-style: ${theme.text.bodySmall.fontStyle};\n  font-weight: ${theme.text.bodySmall.fontWeight};\n  line-height: ${theme.text.bodySmall.lineHeight};\n\n  /* Grid */\n  grid-column-end: ${({ span = 1 }) => `span ${span}`};\n\n  tfoot & {\n    min-height: ${footerCellHeight};\n    border-top: 1px solid ${theme.colors.secondary.blue.base};\n    background-color: ${theme.colors.neutral.grey.lightest};\n  }\n`;\n"],"names":["styled","alignmentToFlex","defaultCellSpacing","theme","footerCellHeight"],"mappings":";;;;;;;;;;;;;AAYO,MAAM,IAAI,GAAGA,uBAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAGR,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAKC,+BAAe,CAAC,KAAK,CAAC,iGAMjD,CAAC,EAAE,OAAO,GAAGC,4BAAkB,EAAE,KAAKC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CACzD,eAAA,EAAA,CAAC,EAAE,OAAO,GAAGD,4BAAkB,EAAE,KAAKC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,OAAA,EAGlEA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CACpB,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,WAAA,EACjCA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,YAAA,EAC5BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAC7B,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,aAAA,EAC/BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAG3B,iBAAA,EAAA,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAGnC,oBAAA,EAAAC,0BAAgB,CACN,sBAAA,EAAAD,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EACpCA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;;;;"}

package/dist/components/DataTable/components/Cell.js

@@ -5,7 +5,7 @@ import '../types.js';
 import 'react';
 import { defaultCellSpacing, footerCellHeight } from '../constants.js';
 
-const Cell = styled.td.withConfig({ displayName: "vui--Cell", componentId: "vui--1oz46st" }) `display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex(align)};background-color:white;padding-bottom:var(--density);padding-top:var(--density);padding-left:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};padding-right:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};color:${theme.text.bodySmall.color};font-family:${theme.text.bodySmall.fontFamily};font-size:${theme.text.bodySmall.fontSize};font-style:${theme.text.bodySmall.fontStyle};font-weight:${theme.text.bodySmall.fontWeight};line-height:${theme.text.bodySmall.lineHeight};grid-column-end:${({ span = 1 }) => `span ${span}`};tfoot &{min-height:${footerCellHeight};border-top:1px solid ${theme.colors.secondary.blue.base};background-color:${theme.colors.neutral.grey.lightest};}`;
+const Cell = styled.td.withConfig({ displayName: "vui--Cell", componentId: "vui--3tw1b6" }) `display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex(align)};background-color:white;padding-bottom:var(--density);padding-top:var(--density);padding-left:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};padding-right:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};color:${theme.text.bodySmall.color};font-family:${theme.text.bodySmall.fontFamily};font-size:${theme.text.bodySmall.fontSize};font-style:${theme.text.bodySmall.fontStyle};font-weight:${theme.text.bodySmall.fontWeight};line-height:${theme.text.bodySmall.lineHeight};grid-column-end:${({ span = 1 }) => `span ${span}`};tfoot &{min-height:${footerCellHeight};border-top:1px solid ${theme.colors.secondary.blue.base};background-color:${theme.colors.neutral.grey.lightest};}`;
 
 export { Cell };
 //# sourceMappingURL=Cell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","sources":["../../../../src/components/DataTable/components/Cell.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { ColumnAlignment, ColumnSpacing } from '../types';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing, footerCellHeight } from '../constants';\n\nexport interface CellProps {\n  align?: ColumnAlignment;\n  spacing?: ColumnSpacing;\n  span?: number;\n}\n\nexport const Cell = styled.td<CellProps>`\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};\n\n  /* Styling */\n  background-color: white;\n  padding-bottom: var(--density);\n  padding-top: var(--density);\n  padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n\n  /* Content */\n  color: ${theme.text.bodySmall.color};\n  font-family: ${theme.text.bodySmall.fontFamily};\n  font-size: ${theme.text.bodySmall.fontSize};\n  font-style: ${theme.text.bodySmall.fontStyle};\n  font-weight: ${theme.text.bodySmall.fontWeight};\n  line-height: ${theme.text.bodySmall.lineHeight};\n\n  /* Grid */\n  grid-column-end: ${({ span = 1 }) => `span ${span}`};\n\n  tfoot & {\n    min-height: ${footerCellHeight};\n    border-top: 1px solid ${theme.colors.secondary.blue.base};\n    background-color: ${theme.colors.neutral.grey.lightest};\n  }\n`;\n"],"names":[],"mappings":";;;;;;;AAYO,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAGR,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,eAAe,CAAC,KAAK,CAAC,iGAMjD,CAAC,EAAE,OAAO,GAAG,kBAAkB,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CACzD,eAAA,EAAA,CAAC,EAAE,OAAO,GAAG,kBAAkB,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,OAAA,EAGlE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CACpB,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,WAAA,EACjC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,YAAA,EAC5B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAC7B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,aAAA,EAC/B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAG3B,iBAAA,EAAA,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAGnC,oBAAA,EAAA,gBAAgB,CACN,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EACpC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;;;;"}
+{"version":3,"file":"Cell.js","sources":["../../../../src/components/DataTable/components/Cell.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { ColumnAlignment, ColumnSpacing } from '../types';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing, footerCellHeight } from '../constants';\n\nexport interface CellProps {\n  align?: ColumnAlignment;\n  spacing?: ColumnSpacing;\n  span?: number;\n}\n\nexport const Cell = styled.td<CellProps>`\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};\n\n  /* Styling */\n  background-color: white;\n  padding-bottom: var(--density);\n  padding-top: var(--density);\n  padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n\n  /* Content */\n  color: ${theme.text.bodySmall.color};\n  font-family: ${theme.text.bodySmall.fontFamily};\n  font-size: ${theme.text.bodySmall.fontSize};\n  font-style: ${theme.text.bodySmall.fontStyle};\n  font-weight: ${theme.text.bodySmall.fontWeight};\n  line-height: ${theme.text.bodySmall.lineHeight};\n\n  /* Grid */\n  grid-column-end: ${({ span = 1 }) => `span ${span}`};\n\n  tfoot & {\n    min-height: ${footerCellHeight};\n    border-top: 1px solid ${theme.colors.secondary.blue.base};\n    background-color: ${theme.colors.neutral.grey.lightest};\n  }\n`;\n"],"names":[],"mappings":";;;;;;;AAYO,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAGR,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,eAAe,CAAC,KAAK,CAAC,iGAMjD,CAAC,EAAE,OAAO,GAAG,kBAAkB,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CACzD,eAAA,EAAA,CAAC,EAAE,OAAO,GAAG,kBAAkB,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,OAAA,EAGlE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CACpB,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,WAAA,EACjC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,YAAA,EAC5B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAC7B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,aAAA,EAC/B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAG3B,iBAAA,EAAA,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAGnC,oBAAA,EAAA,gBAAgB,CACN,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EACpC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;;;;"}

package/dist/components/DataTable/components/ColumnDivider.cjs

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const ResizerBar = styled__default.default.div.withConfig({ displayName: "vui--ResizerBar", componentId: "vui--115ilx" }) `position:absolute;right:0;top:37.5%;width:1px;background:${index.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 ResizerBar = styled__default.default.div.withConfig({ displayName: "vui--ResizerBar", componentId: "vui--by8xz0" }) `position:absolute;right:0;top:37.5%;width:1px;background:${index.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 = React.createRef();
     const padding = 24;

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

@@ -2,7 +2,7 @@ import React__default, { createRef } from 'react';
 import styled from 'styled-components';
 import { theme } from '../../../theme/index.js';
 
-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 ResizerBar = styled.div.withConfig({ displayName: "vui--ResizerBar", componentId: "vui--by8xz0" }) `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;

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

@@ -7,12 +7,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-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 SortIndicator = styled__default.default.div.withConfig({ displayName: "vui--SortIndicator", componentId: "vui--1x79m95" }) `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--1kiwwja" }) `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};}`;
+})).withConfig({ displayName: "vui--ClickableHeaderContent", componentId: "vui--p1ald0" }) `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;

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeader.cjs","sources":["../../../../src/components/DataTable/components/ColumnHeader.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const SortIndicator = styled.div`\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: ${theme.colors.neutral.ink.lightest};\n`;\n\nexport const HeaderContent = styled.span`\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n\n  color: ${theme.text.headingTable.color};\n  font-family: ${theme.text.headingTable.fontFamily};\n  font-size: ${theme.text.headingTable.fontSize};\n  font-style: ${theme.text.headingTable.fontStyle};\n  font-weight: ${theme.text.headingTable.fontWeight};\n  line-height: ${theme.text.headingTable.lineHeight};\n`;\n\nexport const ClickableHeaderContent = styled(HeaderContent).attrs(() => ({\n  as: 'button',\n  type: 'button',\n}))`\n  appearance: none;\n  padding: 0;\n  border: 0;\n  border-radius: 4px;\n  background-color: transparent;\n\n  &:not(:disabled):hover {\n    cursor: pointer;\n  }\n\n  &:hover ${SortIndicator} {\n    background-color: ${theme.colors.neutral.grey.light};\n    color: ${theme.colors.neutral.ink.base};\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow: 0px 0px 0px 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n"],"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;;;;;;"}
+{"version":3,"file":"ColumnHeader.cjs","sources":["../../../../src/components/DataTable/components/ColumnHeader.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const SortIndicator = styled.div`\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: ${theme.colors.neutral.ink.lightest};\n`;\n\nexport const HeaderContent = styled.span`\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n\n  color: ${theme.text.headingTable.color};\n  font-family: ${theme.text.headingTable.fontFamily};\n  font-size: ${theme.text.headingTable.fontSize};\n  font-style: ${theme.text.headingTable.fontStyle};\n  font-weight: ${theme.text.headingTable.fontWeight};\n  line-height: ${theme.text.headingTable.lineHeight};\n`;\n\nexport const ClickableHeaderContent = styled(HeaderContent).attrs(() => ({\n  as: 'button',\n  type: 'button',\n}))`\n  appearance: none;\n  padding: 0;\n  border: 0;\n  border-radius: 4px;\n  background-color: transparent;\n\n  &:not(:disabled):hover {\n    cursor: pointer;\n  }\n\n  &:hover ${SortIndicator} {\n    background-color: ${theme.colors.neutral.grey.light};\n    color: ${theme.colors.neutral.ink.base};\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow: 0px 0px 0px 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAGa,MAAA,aAAa,GAAGA,uBAAM,CAAC,GAAG,CAO5B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,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,cAAA,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.js

@@ -1,12 +1,12 @@
 import styled from 'styled-components';
 import { theme } from '../../../theme/index.js';
 
-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 SortIndicator = styled.div.withConfig({ displayName: "vui--SortIndicator", componentId: "vui--1x79m95" }) `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--1kiwwja" }) `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};}`;
+})).withConfig({ displayName: "vui--ClickableHeaderContent", componentId: "vui--p1ald0" }) `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};}`;
 
 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":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const SortIndicator = styled.div`\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: ${theme.colors.neutral.ink.lightest};\n`;\n\nexport const HeaderContent = styled.span`\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n\n  color: ${theme.text.headingTable.color};\n  font-family: ${theme.text.headingTable.fontFamily};\n  font-size: ${theme.text.headingTable.fontSize};\n  font-style: ${theme.text.headingTable.fontStyle};\n  font-weight: ${theme.text.headingTable.fontWeight};\n  line-height: ${theme.text.headingTable.lineHeight};\n`;\n\nexport const ClickableHeaderContent = styled(HeaderContent).attrs(() => ({\n  as: 'button',\n  type: 'button',\n}))`\n  appearance: none;\n  padding: 0;\n  border: 0;\n  border-radius: 4px;\n  background-color: transparent;\n\n  &:not(:disabled):hover {\n    cursor: pointer;\n  }\n\n  &:hover ${SortIndicator} {\n    background-color: ${theme.colors.neutral.grey.light};\n    color: ${theme.colors.neutral.ink.base};\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow: 0px 0px 0px 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n"],"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;;;;"}
+{"version":3,"file":"ColumnHeader.js","sources":["../../../../src/components/DataTable/components/ColumnHeader.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const SortIndicator = styled.div`\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: ${theme.colors.neutral.ink.lightest};\n`;\n\nexport const HeaderContent = styled.span`\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n\n  color: ${theme.text.headingTable.color};\n  font-family: ${theme.text.headingTable.fontFamily};\n  font-size: ${theme.text.headingTable.fontSize};\n  font-style: ${theme.text.headingTable.fontStyle};\n  font-weight: ${theme.text.headingTable.fontWeight};\n  line-height: ${theme.text.headingTable.lineHeight};\n`;\n\nexport const ClickableHeaderContent = styled(HeaderContent).attrs(() => ({\n  as: 'button',\n  type: 'button',\n}))`\n  appearance: none;\n  padding: 0;\n  border: 0;\n  border-radius: 4px;\n  background-color: transparent;\n\n  &:not(:disabled):hover {\n    cursor: pointer;\n  }\n\n  &:hover ${SortIndicator} {\n    background-color: ${theme.colors.neutral.grey.light};\n    color: ${theme.colors.neutral.ink.base};\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow: 0px 0px 0px 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n"],"names":[],"mappings":";;;AAGa,MAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAO5B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,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,cAAA,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/EmptyBodyContent.cjs

@@ -7,8 +7,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 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};`;
+const EmptyBodyContent = styled__default.default.div.withConfig({ displayName: "vui--EmptyBodyContent", componentId: "vui--klb9dq" }) `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--12lmw1" }) `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;

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyBodyContent.cjs","sources":["../../../../src/components/DataTable/components/EmptyBodyContent.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport interface EmptyBodyContentProps {\n  columnCount: number;\n}\n\nexport const EmptyBodyContent = styled.div<EmptyBodyContentProps>`\n  padding-top: ${theme.sizes.lg};\n  padding-bottom: ${theme.sizes.lg};\n  grid-column: ${({ columnCount }) => `1 / span ${columnCount}`};\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${theme.sizes.md};\n`;\n\nexport const EmptyBodyGlyphWrapper = styled.div`\n  padding: ${theme.sizes.md};\n  background-color: ${theme.colors.neutral.grey.light};\n  border-radius: ${theme.radius.full};\n`;\n"],"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;;;;;"}
+{"version":3,"file":"EmptyBodyContent.cjs","sources":["../../../../src/components/DataTable/components/EmptyBodyContent.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport interface EmptyBodyContentProps {\n  columnCount: number;\n}\n\nexport const EmptyBodyContent = styled.div<EmptyBodyContentProps>`\n  padding-top: ${theme.sizes.lg};\n  padding-bottom: ${theme.sizes.lg};\n  grid-column: ${({ columnCount }) => `1 / span ${columnCount}`};\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${theme.sizes.md};\n`;\n\nexport const EmptyBodyGlyphWrapper = styled.div`\n  padding: ${theme.sizes.md};\n  background-color: ${theme.colors.neutral.grey.light};\n  border-radius: ${theme.radius.full};\n`;\n"],"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,aAAA,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.js

@@ -1,8 +1,8 @@
 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};`;
+const EmptyBodyContent = styled.div.withConfig({ displayName: "vui--EmptyBodyContent", componentId: "vui--klb9dq" }) `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--12lmw1" }) `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":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport interface EmptyBodyContentProps {\n  columnCount: number;\n}\n\nexport const EmptyBodyContent = styled.div<EmptyBodyContentProps>`\n  padding-top: ${theme.sizes.lg};\n  padding-bottom: ${theme.sizes.lg};\n  grid-column: ${({ columnCount }) => `1 / span ${columnCount}`};\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${theme.sizes.md};\n`;\n\nexport const EmptyBodyGlyphWrapper = styled.div`\n  padding: ${theme.sizes.md};\n  background-color: ${theme.colors.neutral.grey.light};\n  border-radius: ${theme.radius.full};\n`;\n"],"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;;;;"}
+{"version":3,"file":"EmptyBodyContent.js","sources":["../../../../src/components/DataTable/components/EmptyBodyContent.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport interface EmptyBodyContentProps {\n  columnCount: number;\n}\n\nexport const EmptyBodyContent = styled.div<EmptyBodyContentProps>`\n  padding-top: ${theme.sizes.lg};\n  padding-bottom: ${theme.sizes.lg};\n  grid-column: ${({ columnCount }) => `1 / span ${columnCount}`};\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${theme.sizes.md};\n`;\n\nexport const EmptyBodyGlyphWrapper = styled.div`\n  padding: ${theme.sizes.md};\n  background-color: ${theme.colors.neutral.grey.light};\n  border-radius: ${theme.radius.full};\n`;\n"],"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,aAAA,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

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 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}`};`;
+const Header = styled__default.default.th.withConfig({ displayName: "vui--Header", componentId: "vui--ilge6b" }) `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":["../../../../src/components/DataTable/components/Header.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing, headerCellHeight } from '../constants';\nimport { HeaderProps } from '../types';\n\nexport const Header = styled.th<HeaderProps>`\n  height: ${headerCellHeight};\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};\n  z-index: ${({ zIndex = 0 }) => zIndex};\n\n  background-color: white;\n  padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  border-bottom: 1px solid ${theme.colors.neutral.grey.base};\n\n  grid-column-end: ${({ span = 1 }) => `span ${span}`};\n`;\n"],"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;;;;"}
+{"version":3,"file":"Header.cjs","sources":["../../../../src/components/DataTable/components/Header.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing, headerCellHeight } from '../constants';\nimport { HeaderProps } from '../types';\n\nexport const Header = styled.th<HeaderProps>`\n  height: ${headerCellHeight};\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};\n  z-index: ${({ zIndex = 0 }) => zIndex};\n\n  background-color: white;\n  padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  border-bottom: 1px solid ${theme.colors.neutral.grey.base};\n\n  grid-column-end: ${({ span = 1 }) => `span ${span}`};\n`;\n"],"names":["styled","headerCellHeight","alignmentToFlex","defaultCellSpacing","theme"],"mappings":";;;;;;;;;;;;;AAMa,MAAA,MAAM,GAAGA,uBAAM,CAAC,EAAE,CACnB,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,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.js

@@ -5,7 +5,7 @@ import '../types.js';
 import 'react';
 import { headerCellHeight, defaultCellSpacing } from '../constants.js';
 
-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}`};`;
+const Header = styled.th.withConfig({ displayName: "vui--Header", componentId: "vui--ilge6b" }) `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}`};`;
 
 export { Header };
 //# sourceMappingURL=Header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../src/components/DataTable/components/Header.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing, headerCellHeight } from '../constants';\nimport { HeaderProps } from '../types';\n\nexport const Header = styled.th<HeaderProps>`\n  height: ${headerCellHeight};\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};\n  z-index: ${({ zIndex = 0 }) => zIndex};\n\n  background-color: white;\n  padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  border-bottom: 1px solid ${theme.colors.neutral.grey.base};\n\n  grid-column-end: ${({ span = 1 }) => `span ${span}`};\n`;\n"],"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;;;;"}
+{"version":3,"file":"Header.js","sources":["../../../../src/components/DataTable/components/Header.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing, headerCellHeight } from '../constants';\nimport { HeaderProps } from '../types';\n\nexport const Header = styled.th<HeaderProps>`\n  height: ${headerCellHeight};\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};\n  z-index: ${({ zIndex = 0 }) => zIndex};\n\n  background-color: white;\n  padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  border-bottom: 1px solid ${theme.colors.neutral.grey.base};\n\n  grid-column-end: ${({ span = 1 }) => `span ${span}`};\n`;\n"],"names":[],"mappings":";;;;;;;AAMa,MAAA,MAAM,GAAG,MAAM,CAAC,EAAE,CACnB,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,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

@@ -10,7 +10,7 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 /* 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;}}`;
+const LoadingCellContent = styled__default.default.div.withConfig({ displayName: "vui--LoadingCellContent", componentId: "vui--1bv9ck1" }) `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.js

@@ -4,7 +4,7 @@ import { theme } from '../../../theme/index.js';
 /* Loading content shimmer animation */
 const shimmerLight = theme.colors.neutral.grey.base;
 const shimmerDark = theme.colors.neutral.grey.dark;
-const LoadingCellContent = styled.div.withConfig({ displayName: "vui--LoadingCellContent", componentId: "vui--1mf4ayh" }) `height:20px;width:75%;border-radius:${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;}}`;
+const LoadingCellContent = styled.div.withConfig({ displayName: "vui--LoadingCellContent", componentId: "vui--1bv9ck1" }) `height:20px;width:75%;border-radius:${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;}}`;
 
 export { LoadingCellContent };
 //# sourceMappingURL=LoadingCellContent.js.map

package/dist/components/DataTable/components/NoWrap.cjs

@@ -6,7 +6,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const NoWrap = styled__default.default.div.withConfig({ displayName: "vui--NoWrap", componentId: "vui--208yv4" }) `white-space:nowrap;`;
+const NoWrap = styled__default.default.div.withConfig({ displayName: "vui--NoWrap", componentId: "vui--kbcaqo" }) `white-space:nowrap;`;
 
 exports.NoWrap = NoWrap;
 //# sourceMappingURL=NoWrap.cjs.map

package/dist/components/DataTable/components/NoWrap.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const NoWrap = styled.div.withConfig({ displayName: "vui--NoWrap", componentId: "vui--208yv4" }) `white-space:nowrap;`;
+const NoWrap = styled.div.withConfig({ displayName: "vui--NoWrap", componentId: "vui--kbcaqo" }) `white-space:nowrap;`;
 
 export { NoWrap };
 //# sourceMappingURL=NoWrap.js.map

package/dist/components/DataTable/components/Row.cjs

@@ -7,7 +7,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Row = styled__default.default.tr.withConfig({ displayName: "vui--Row", componentId: "vui--ryxbs1" }) `display:contents;${({ selected }) => selected &&
+const Row = styled__default.default.tr.withConfig({ displayName: "vui--Row", componentId: "vui--9t9651" }) `display:contents;${({ selected }) => selected &&
     `
     &&&& > td {
       background-color: ${index.theme.colors.brand.blue.lightest};

package/dist/components/DataTable/components/Row.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { theme } from '../../../theme/index.js';
 
-const Row = styled.tr.withConfig({ displayName: "vui--Row", componentId: "vui--ryxbs1" }) `display:contents;${({ selected }) => selected &&
+const Row = styled.tr.withConfig({ displayName: "vui--Row", componentId: "vui--9t9651" }) `display:contents;${({ selected }) => selected &&
     `
     &&&& > td {
       background-color: ${theme.colors.brand.blue.lightest};

package/dist/components/DataTable/components/ScrollContainer.cjs

@@ -6,7 +6,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const ScrollContainer = styled__default.default.div.withConfig({ displayName: "vui--ScrollContainer", componentId: "vui--1bx96p0" }) `position:relative;width:100%;overflow-x:auto;overflow-y:hidden;`;
+const ScrollContainer = styled__default.default.div.withConfig({ displayName: "vui--ScrollContainer", componentId: "vui--1lne8xk" }) `position:relative;width:100%;overflow-x:auto;overflow-y:hidden;`;
 
 exports.ScrollContainer = ScrollContainer;
 //# sourceMappingURL=ScrollContainer.cjs.map

package/dist/components/DataTable/components/ScrollContainer.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const ScrollContainer = styled.div.withConfig({ displayName: "vui--ScrollContainer", componentId: "vui--1bx96p0" }) `position:relative;width:100%;overflow-x:auto;overflow-y:hidden;`;
+const ScrollContainer = styled.div.withConfig({ displayName: "vui--ScrollContainer", componentId: "vui--1lne8xk" }) `position:relative;width:100%;overflow-x:auto;overflow-y:hidden;`;
 
 export { ScrollContainer };
 //# sourceMappingURL=ScrollContainer.js.map

package/dist/components/DataTable/components/TableGrid.cjs

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 const defaultDensity = 'base';
-const TableGrid = styled__default.default.table.withConfig({ displayName: "vui--TableGrid", componentId: "vui--1fsix8g" }) `min-width:100%;width:max-content;display:grid;& thead,& tbody,& tfoot{display:contents;}--density:${index.theme.sizes[defaultDensity]};&& tr:hover td{background-color:#f2f8fc;}${({ css }) => css}`;
+const TableGrid = styled__default.default.table.withConfig({ displayName: "vui--TableGrid", componentId: "vui--15hxahr" }) `min-width:100%;width:max-content;display:grid;& thead,& tbody,& tfoot{display:contents;}--density:${index.theme.sizes[defaultDensity]};&& tr:hover td{background-color:#f2f8fc;}${({ css }) => css}`;
 
 exports.TableGrid = TableGrid;
 //# sourceMappingURL=TableGrid.cjs.map

package/dist/components/DataTable/components/TableGrid.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { theme } from '../../../theme/index.js';
 
 const defaultDensity = 'base';
-const TableGrid = styled.table.withConfig({ displayName: "vui--TableGrid", componentId: "vui--1fsix8g" }) `min-width:100%;width:max-content;display:grid;& thead,& tbody,& tfoot{display:contents;}--density:${theme.sizes[defaultDensity]};&& tr:hover td{background-color:#f2f8fc;}${({ css }) => css}`;
+const TableGrid = styled.table.withConfig({ displayName: "vui--TableGrid", componentId: "vui--15hxahr" }) `min-width:100%;width:max-content;display:grid;& thead,& tbody,& tfoot{display:contents;}--density:${theme.sizes[defaultDensity]};&& tr:hover td{background-color:#f2f8fc;}${({ css }) => css}`;
 
 export { TableGrid };
 //# sourceMappingURL=TableGrid.js.map

package/dist/components/DataTable/components/Truncate.cjs

@@ -6,7 +6,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Truncate = styled__default.default.div.withConfig({ displayName: "vui--Truncate", componentId: "vui--14fzkum" }) `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
+const Truncate = styled__default.default.div.withConfig({ displayName: "vui--Truncate", componentId: "vui--coqvc6" }) `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
 
 exports.Truncate = Truncate;
 //# sourceMappingURL=Truncate.cjs.map

package/dist/components/DataTable/components/Truncate.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const Truncate = styled.div.withConfig({ displayName: "vui--Truncate", componentId: "vui--14fzkum" }) `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
+const Truncate = styled.div.withConfig({ displayName: "vui--Truncate", componentId: "vui--coqvc6" }) `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
 
 export { Truncate };
 //# sourceMappingURL=Truncate.js.map

package/dist/components/DataTable/components/Wrapper.cjs

@@ -12,7 +12,7 @@ const borderModeStyles = {
     vertical: 'border-width: 0; border-top-width: 1px; border-bottom-width: 1px;',
     none: 'border-width: 0;',
 };
-const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--5gfhdd" }) `width:100%;position:relative;border-style:solid;border-color:${index.theme.colors.neutral.grey.dark};${({ borderMode = 'full' }) => borderModeStyles[borderMode]} &,& *{box-sizing:border-box;}.hideHeaderDetails th{> *{opacity:0.1;}.th-divider{opacity:1;}}`;
+const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--nnuzgr" }) `width:100%;position:relative;border-style:solid;border-color:${index.theme.colors.neutral.grey.dark};${({ borderMode = 'full' }) => borderModeStyles[borderMode]} &,& *{box-sizing:border-box;}.hideHeaderDetails th{> *{opacity:0.1;}.th-divider{opacity:1;}}`;
 
 exports.Wrapper = Wrapper;
 //# sourceMappingURL=Wrapper.cjs.map

package/dist/components/DataTable/components/Wrapper.js

@@ -6,7 +6,7 @@ const borderModeStyles = {
     vertical: 'border-width: 0; border-top-width: 1px; border-bottom-width: 1px;',
     none: 'border-width: 0;',
 };
-const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--5gfhdd" }) `width:100%;position:relative;border-style:solid;border-color:${theme.colors.neutral.grey.dark};${({ borderMode = 'full' }) => borderModeStyles[borderMode]} &,& *{box-sizing:border-box;}.hideHeaderDetails th{> *{opacity:0.1;}.th-divider{opacity:1;}}`;
+const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--nnuzgr" }) `width:100%;position:relative;border-style:solid;border-color:${theme.colors.neutral.grey.dark};${({ borderMode = 'full' }) => borderModeStyles[borderMode]} &,& *{box-sizing:border-box;}.hideHeaderDetails th{> *{opacity:0.1;}.th-divider{opacity:1;}}`;
 
 export { Wrapper };
 //# sourceMappingURL=Wrapper.js.map

package/dist/components/DateInputField/styled.cjs

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const DateRangeGroup = styled__default.default(reactAriaComponents.Group).withConfig({ displayName: "vui--DateRangeGroup", componentId: "vui--cprola" }) `${utils.getTextStyles(index.theme.text.body)} display:flex;align-items:center;justify-content:space-between;gap:8px;height:22px;z-index:1;border:1px solid ${index.theme.colors.neutral.ink.lightest};border-radius:${index.theme.radius.base};gap:${index.theme.sizes.xs};padding:${index.theme.sizes.sm};&[data-focus-within]{box-shadow:0 0 0 4px ${index.theme.colors.secondary.blue.light};}&:has(*[data-invalid]){box-shadow:0 0 0 4px ${index.theme.colors.secondary.red.light};border:1px solid ${index.theme.colors.secondary.red.base};}${({ $hasError }) => !!$hasError &&
+const DateRangeGroup = styled__default.default(reactAriaComponents.Group).withConfig({ displayName: "vui--DateRangeGroup", componentId: "vui--1eb8epi" }) `${utils.getTextStyles(index.theme.text.body)} display:flex;align-items:center;justify-content:space-between;gap:8px;height:22px;z-index:1;border:1px solid ${index.theme.colors.neutral.ink.lightest};border-radius:${index.theme.radius.base};gap:${index.theme.sizes.xs};padding:${index.theme.sizes.sm};&[data-focus-within]{box-shadow:0 0 0 4px ${index.theme.colors.secondary.blue.light};}&:has(*[data-invalid]){box-shadow:0 0 0 4px ${index.theme.colors.secondary.red.light};border:1px solid ${index.theme.colors.secondary.red.base};}${({ $hasError }) => !!$hasError &&
     `
     box-shadow: 0 0 0 4px ${index.theme.colors.secondary.red.light};
     border: 1px solid ${index.theme.colors.secondary.red.base};

package/dist/components/DateInputField/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/DateInputField/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Group } from 'react-aria-components';\nimport { getTextStyles } from 'Theme/utils';\nimport { theme } from '../../theme';\n\nexport const DateRangeGroup = styled(Group)<{ $hasError?: boolean }>`\n  ${getTextStyles(theme.text.body)}\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n\n  height: 22px;\n  z-index: 1;\n\n  border: 1px solid ${theme.colors.neutral.ink.lightest};\n  border-radius: ${theme.radius.base};\n\n  gap: ${theme.sizes.xs};\n  padding: ${theme.sizes.sm};\n\n  &[data-focus-within] {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n  }\n\n  &:has(*[data-invalid]) {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  }\n\n  ${({ $hasError }) =>\n    !!$hasError &&\n    `\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  `}\n\n  *[data-placeholder],\n  *[data-placeholder] + div,\n  *:has(*[data-placeholder]) ~ .date-range-input-splitter {\n    color: ${theme.colors.neutral.ink.light};\n  }\n\n  .date-range-input-splitter {\n    margin: 0 ${theme.sizes.sm};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${theme.colors.neutral.grey.light};\n\n    .react-aria-DateInput .react-aria-DateSegment,\n    .date-range-input-splitter {\n      cursor: not-allowed;\n      color: ${theme.colors.neutral.ink.light};\n    }\n  }\n  .react-aria-DateInput {\n    display: flex;\n    align-items: center;\n\n    cursor: text;\n    caret-color: transparent;\n\n    .react-aria-DateSegment {\n      padding: 0 1px;\n      border-radius: ${theme.radius.base};\n\n      &[data-focused] {\n        color: white;\n        background-color: ${theme.colors.secondary.blue.dark};\n\n        &[data-invalid] {\n          background-color: ${theme.colors.secondary.red.lightest};\n        }\n      }\n\n      &[data-invalid] {\n        font-weight: bold;\n        color: ${theme.colors.secondary.red.dark};\n      }\n\n      &:focus-visible {\n        outline: none;\n      }\n    }\n  }\n`;\n"],"names":["styled","Group","getTextStyles","theme"],"mappings":";;;;;;;;;;;AAKa,MAAA,cAAc,GAAGA,uBAAM,CAACC,yBAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EACvCC,mBAAa,CAACC,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,iHAUZA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,eAAA,EACpCA,WAAK,CAAC,MAAM,CAAC,IAAI,QAE3BA,WAAK,CAAC,KAAK,CAAC,EAAE,YACVA,WAAK,CAAC,KAAK,CAAC,EAAE,CAGC,2CAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,iDAIjCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,kBAAA,EACpCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,KAGnD,CAAC,EAAE,SAAS,EAAE,KACd,CAAC,CAAC,SAAS;AACX,IAAA;AACwB,0BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AACpC,sBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACpD,EAAA,CAAA,CAAA,4GAAA,EAKUA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,yCAI3BA,WAAK,CAAC,KAAK,CAAC,EAAE,CAKN,uDAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,mGAAA,EAKxCA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,iJAAA,EAYtBA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,8CAAA,EAIZA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kCAAA,EAG9BA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,6CAMhDA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/DateInputField/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Group } from 'react-aria-components';\nimport { getTextStyles } from 'Theme/utils';\nimport { theme } from '../../theme';\n\nexport const DateRangeGroup = styled(Group)<{ $hasError?: boolean }>`\n  ${getTextStyles(theme.text.body)}\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n\n  height: 22px;\n  z-index: 1;\n\n  border: 1px solid ${theme.colors.neutral.ink.lightest};\n  border-radius: ${theme.radius.base};\n\n  gap: ${theme.sizes.xs};\n  padding: ${theme.sizes.sm};\n\n  &[data-focus-within] {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n  }\n\n  &:has(*[data-invalid]) {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  }\n\n  ${({ $hasError }) =>\n    !!$hasError &&\n    `\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  `}\n\n  *[data-placeholder],\n  *[data-placeholder] + div,\n  *:has(*[data-placeholder]) ~ .date-range-input-splitter {\n    color: ${theme.colors.neutral.ink.light};\n  }\n\n  .date-range-input-splitter {\n    margin: 0 ${theme.sizes.sm};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${theme.colors.neutral.grey.light};\n\n    .react-aria-DateInput .react-aria-DateSegment,\n    .date-range-input-splitter {\n      cursor: not-allowed;\n      color: ${theme.colors.neutral.ink.light};\n    }\n  }\n  .react-aria-DateInput {\n    display: flex;\n    align-items: center;\n\n    cursor: text;\n    caret-color: transparent;\n\n    .react-aria-DateSegment {\n      padding: 0 1px;\n      border-radius: ${theme.radius.base};\n\n      &[data-focused] {\n        color: white;\n        background-color: ${theme.colors.secondary.blue.dark};\n\n        &[data-invalid] {\n          background-color: ${theme.colors.secondary.red.lightest};\n        }\n      }\n\n      &[data-invalid] {\n        font-weight: bold;\n        color: ${theme.colors.secondary.red.dark};\n      }\n\n      &:focus-visible {\n        outline: none;\n      }\n    }\n  }\n`;\n"],"names":["styled","Group","getTextStyles","theme"],"mappings":";;;;;;;;;;;AAKa,MAAA,cAAc,GAAGA,uBAAM,CAACC,yBAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EACvCC,mBAAa,CAACC,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,iHAUZA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,eAAA,EACpCA,WAAK,CAAC,MAAM,CAAC,IAAI,QAE3BA,WAAK,CAAC,KAAK,CAAC,EAAE,YACVA,WAAK,CAAC,KAAK,CAAC,EAAE,CAGC,2CAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,iDAIjCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,kBAAA,EACpCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,KAGnD,CAAC,EAAE,SAAS,EAAE,KACd,CAAC,CAAC,SAAS;AACX,IAAA;AACwB,0BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AACpC,sBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACpD,EAAA,CAAA,CAAA,4GAAA,EAKUA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,yCAI3BA,WAAK,CAAC,KAAK,CAAC,EAAE,CAKN,uDAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,mGAAA,EAKxCA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,iJAAA,EAYtBA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,8CAAA,EAIZA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kCAAA,EAG9BA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,6CAMhDA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;;;;"}

package/dist/components/DateInputField/styled.js

@@ -3,7 +3,7 @@ import { Group } from 'react-aria-components';
 import { getTextStyles } from '../../theme/utils.js';
 import { theme } from '../../theme/index.js';
 
-const DateRangeGroup = styled(Group).withConfig({ displayName: "vui--DateRangeGroup", componentId: "vui--cprola" }) `${getTextStyles(theme.text.body)} display:flex;align-items:center;justify-content:space-between;gap:8px;height:22px;z-index:1;border:1px solid ${theme.colors.neutral.ink.lightest};border-radius:${theme.radius.base};gap:${theme.sizes.xs};padding:${theme.sizes.sm};&[data-focus-within]{box-shadow:0 0 0 4px ${theme.colors.secondary.blue.light};}&:has(*[data-invalid]){box-shadow:0 0 0 4px ${theme.colors.secondary.red.light};border:1px solid ${theme.colors.secondary.red.base};}${({ $hasError }) => !!$hasError &&
+const DateRangeGroup = styled(Group).withConfig({ displayName: "vui--DateRangeGroup", componentId: "vui--1eb8epi" }) `${getTextStyles(theme.text.body)} display:flex;align-items:center;justify-content:space-between;gap:8px;height:22px;z-index:1;border:1px solid ${theme.colors.neutral.ink.lightest};border-radius:${theme.radius.base};gap:${theme.sizes.xs};padding:${theme.sizes.sm};&[data-focus-within]{box-shadow:0 0 0 4px ${theme.colors.secondary.blue.light};}&:has(*[data-invalid]){box-shadow:0 0 0 4px ${theme.colors.secondary.red.light};border:1px solid ${theme.colors.secondary.red.base};}${({ $hasError }) => !!$hasError &&
     `
     box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};
     border: 1px solid ${theme.colors.secondary.red.base};

package/dist/components/DateInputField/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/DateInputField/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Group } from 'react-aria-components';\nimport { getTextStyles } from 'Theme/utils';\nimport { theme } from '../../theme';\n\nexport const DateRangeGroup = styled(Group)<{ $hasError?: boolean }>`\n  ${getTextStyles(theme.text.body)}\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n\n  height: 22px;\n  z-index: 1;\n\n  border: 1px solid ${theme.colors.neutral.ink.lightest};\n  border-radius: ${theme.radius.base};\n\n  gap: ${theme.sizes.xs};\n  padding: ${theme.sizes.sm};\n\n  &[data-focus-within] {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n  }\n\n  &:has(*[data-invalid]) {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  }\n\n  ${({ $hasError }) =>\n    !!$hasError &&\n    `\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  `}\n\n  *[data-placeholder],\n  *[data-placeholder] + div,\n  *:has(*[data-placeholder]) ~ .date-range-input-splitter {\n    color: ${theme.colors.neutral.ink.light};\n  }\n\n  .date-range-input-splitter {\n    margin: 0 ${theme.sizes.sm};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${theme.colors.neutral.grey.light};\n\n    .react-aria-DateInput .react-aria-DateSegment,\n    .date-range-input-splitter {\n      cursor: not-allowed;\n      color: ${theme.colors.neutral.ink.light};\n    }\n  }\n  .react-aria-DateInput {\n    display: flex;\n    align-items: center;\n\n    cursor: text;\n    caret-color: transparent;\n\n    .react-aria-DateSegment {\n      padding: 0 1px;\n      border-radius: ${theme.radius.base};\n\n      &[data-focused] {\n        color: white;\n        background-color: ${theme.colors.secondary.blue.dark};\n\n        &[data-invalid] {\n          background-color: ${theme.colors.secondary.red.lightest};\n        }\n      }\n\n      &[data-invalid] {\n        font-weight: bold;\n        color: ${theme.colors.secondary.red.dark};\n      }\n\n      &:focus-visible {\n        outline: none;\n      }\n    }\n  }\n`;\n"],"names":[],"mappings":";;;;;AAKa,MAAA,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EACvC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,iHAUZ,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,eAAA,EACpC,KAAK,CAAC,MAAM,CAAC,IAAI,QAE3B,KAAK,CAAC,KAAK,CAAC,EAAE,YACV,KAAK,CAAC,KAAK,CAAC,EAAE,CAGC,2CAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,iDAIjC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,kBAAA,EACpC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,KAGnD,CAAC,EAAE,SAAS,EAAE,KACd,CAAC,CAAC,SAAS;AACX,IAAA;AACwB,0BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AACpC,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACpD,EAAA,CAAA,CAAA,4GAAA,EAKU,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,yCAI3B,KAAK,CAAC,KAAK,CAAC,EAAE,CAKN,uDAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,mGAAA,EAKxC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,iJAAA,EAYtB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,8CAAA,EAIZ,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kCAAA,EAG9B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,6CAMhD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/DateInputField/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Group } from 'react-aria-components';\nimport { getTextStyles } from 'Theme/utils';\nimport { theme } from '../../theme';\n\nexport const DateRangeGroup = styled(Group)<{ $hasError?: boolean }>`\n  ${getTextStyles(theme.text.body)}\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n\n  height: 22px;\n  z-index: 1;\n\n  border: 1px solid ${theme.colors.neutral.ink.lightest};\n  border-radius: ${theme.radius.base};\n\n  gap: ${theme.sizes.xs};\n  padding: ${theme.sizes.sm};\n\n  &[data-focus-within] {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n  }\n\n  &:has(*[data-invalid]) {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  }\n\n  ${({ $hasError }) =>\n    !!$hasError &&\n    `\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  `}\n\n  *[data-placeholder],\n  *[data-placeholder] + div,\n  *:has(*[data-placeholder]) ~ .date-range-input-splitter {\n    color: ${theme.colors.neutral.ink.light};\n  }\n\n  .date-range-input-splitter {\n    margin: 0 ${theme.sizes.sm};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${theme.colors.neutral.grey.light};\n\n    .react-aria-DateInput .react-aria-DateSegment,\n    .date-range-input-splitter {\n      cursor: not-allowed;\n      color: ${theme.colors.neutral.ink.light};\n    }\n  }\n  .react-aria-DateInput {\n    display: flex;\n    align-items: center;\n\n    cursor: text;\n    caret-color: transparent;\n\n    .react-aria-DateSegment {\n      padding: 0 1px;\n      border-radius: ${theme.radius.base};\n\n      &[data-focused] {\n        color: white;\n        background-color: ${theme.colors.secondary.blue.dark};\n\n        &[data-invalid] {\n          background-color: ${theme.colors.secondary.red.lightest};\n        }\n      }\n\n      &[data-invalid] {\n        font-weight: bold;\n        color: ${theme.colors.secondary.red.dark};\n      }\n\n      &:focus-visible {\n        outline: none;\n      }\n    }\n  }\n`;\n"],"names":[],"mappings":";;;;;AAKa,MAAA,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EACvC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,iHAUZ,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,eAAA,EACpC,KAAK,CAAC,MAAM,CAAC,IAAI,QAE3B,KAAK,CAAC,KAAK,CAAC,EAAE,YACV,KAAK,CAAC,KAAK,CAAC,EAAE,CAGC,2CAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,iDAIjC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,kBAAA,EACpC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,KAGnD,CAAC,EAAE,SAAS,EAAE,KACd,CAAC,CAAC,SAAS;AACX,IAAA;AACwB,0BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AACpC,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACpD,EAAA,CAAA,CAAA,4GAAA,EAKU,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,yCAI3B,KAAK,CAAC,KAAK,CAAC,EAAE,CAKN,uDAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,mGAAA,EAKxC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,iJAAA,EAYtB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,8CAAA,EAIZ,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kCAAA,EAG9B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,6CAMhD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;;;;"}

package/dist/components/DatePicker/styled.cjs

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const DatePickerFooter = styled__default.default.footer.withConfig({ displayName: "vui--DatePickerFooter", componentId: "vui--17flrd9" }) `display:flex;justify-content:end;margin-top:${sizes.sizes.base};margin-left:-${sizes.sizes.base};margin-right:-${sizes.sizes.base};padding:${sizes.sizes.base};padding-bottom:0;border-top:${sizes.sizes.line} solid ${colors.colors.neutral.grey.base};`;
+const DatePickerFooter = styled__default.default.footer.withConfig({ displayName: "vui--DatePickerFooter", componentId: "vui--ghkisb" }) `display:flex;justify-content:end;margin-top:${sizes.sizes.base};margin-left:-${sizes.sizes.base};margin-right:-${sizes.sizes.base};padding:${sizes.sizes.base};padding-bottom:0;border-top:${sizes.sizes.line} solid ${colors.colors.neutral.grey.base};`;
 
 exports.DatePickerFooter = DatePickerFooter;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/DatePicker/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/DatePicker/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { colors } from 'Theme/modules/colors';\nimport { sizes } from 'Theme/modules/sizes';\n\nexport const DatePickerFooter = styled.footer`\n  display: flex;\n  justify-content: end;\n\n  margin-top: ${sizes.base};\n  margin-left: -${sizes.base};\n  margin-right: -${sizes.base};\n\n  padding: ${sizes.base};\n  padding-bottom: 0;\n\n  border-top: ${sizes.line} solid ${colors.neutral.grey.base};\n`;\n"],"names":["styled","sizes","colors"],"mappings":";;;;;;;;;;AAIa,MAAA,gBAAgB,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,4CAAA,EAI7BC,WAAK,CAAC,IAAI,CACR,cAAA,EAAAA,WAAK,CAAC,IAAI,kBACTA,WAAK,CAAC,IAAI,CAAA,SAAA,EAEhBA,WAAK,CAAC,IAAI,CAGP,6BAAA,EAAAA,WAAK,CAAC,IAAI,CAAA,OAAA,EAAUC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/DatePicker/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { colors } from 'Theme/modules/colors';\nimport { sizes } from 'Theme/modules/sizes';\n\nexport const DatePickerFooter = styled.footer`\n  display: flex;\n  justify-content: end;\n\n  margin-top: ${sizes.base};\n  margin-left: -${sizes.base};\n  margin-right: -${sizes.base};\n\n  padding: ${sizes.base};\n  padding-bottom: 0;\n\n  border-top: ${sizes.line} solid ${colors.neutral.grey.base};\n`;\n"],"names":["styled","sizes","colors"],"mappings":";;;;;;;;;;AAIa,MAAA,gBAAgB,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,4CAAA,EAI7BC,WAAK,CAAC,IAAI,CACR,cAAA,EAAAA,WAAK,CAAC,IAAI,kBACTA,WAAK,CAAC,IAAI,CAAA,SAAA,EAEhBA,WAAK,CAAC,IAAI,CAGP,6BAAA,EAAAA,WAAK,CAAC,IAAI,CAAA,OAAA,EAAUC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}

package/dist/components/DatePicker/styled.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { colors } from '../../theme/modules/colors.js';
 import { sizes } from '../../theme/modules/sizes.js';
 
-const DatePickerFooter = styled.footer.withConfig({ displayName: "vui--DatePickerFooter", componentId: "vui--17flrd9" }) `display:flex;justify-content:end;margin-top:${sizes.base};margin-left:-${sizes.base};margin-right:-${sizes.base};padding:${sizes.base};padding-bottom:0;border-top:${sizes.line} solid ${colors.neutral.grey.base};`;
+const DatePickerFooter = styled.footer.withConfig({ displayName: "vui--DatePickerFooter", componentId: "vui--ghkisb" }) `display:flex;justify-content:end;margin-top:${sizes.base};margin-left:-${sizes.base};margin-right:-${sizes.base};padding:${sizes.base};padding-bottom:0;border-top:${sizes.line} solid ${colors.neutral.grey.base};`;
 
 export { DatePickerFooter };
 //# sourceMappingURL=styled.js.map

package/dist/components/DatePicker/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/DatePicker/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { colors } from 'Theme/modules/colors';\nimport { sizes } from 'Theme/modules/sizes';\n\nexport const DatePickerFooter = styled.footer`\n  display: flex;\n  justify-content: end;\n\n  margin-top: ${sizes.base};\n  margin-left: -${sizes.base};\n  margin-right: -${sizes.base};\n\n  padding: ${sizes.base};\n  padding-bottom: 0;\n\n  border-top: ${sizes.line} solid ${colors.neutral.grey.base};\n`;\n"],"names":[],"mappings":";;;;AAIa,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,4CAAA,EAI7B,KAAK,CAAC,IAAI,CACR,cAAA,EAAA,KAAK,CAAC,IAAI,kBACT,KAAK,CAAC,IAAI,CAAA,SAAA,EAEhB,KAAK,CAAC,IAAI,CAGP,6BAAA,EAAA,KAAK,CAAC,IAAI,CAAA,OAAA,EAAU,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/DatePicker/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { colors } from 'Theme/modules/colors';\nimport { sizes } from 'Theme/modules/sizes';\n\nexport const DatePickerFooter = styled.footer`\n  display: flex;\n  justify-content: end;\n\n  margin-top: ${sizes.base};\n  margin-left: -${sizes.base};\n  margin-right: -${sizes.base};\n\n  padding: ${sizes.base};\n  padding-bottom: 0;\n\n  border-top: ${sizes.line} solid ${colors.neutral.grey.base};\n`;\n"],"names":[],"mappings":";;;;AAIa,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,4CAAA,EAI7B,KAAK,CAAC,IAAI,CACR,cAAA,EAAA,KAAK,CAAC,IAAI,kBACT,KAAK,CAAC,IAAI,CAAA,SAAA,EAEhB,KAAK,CAAC,IAAI,CAGP,6BAAA,EAAA,KAAK,CAAC,IAAI,CAAA,OAAA,EAAU,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}