@veeqo/ui 9.9.2 → 10.0.0-beta.1

package/dist/components/LegacyDataTable/SpecificState/styled.js

@@ -3,10 +3,10 @@ import { theme } from '../../../theme/index.js';
 import { BaseContainer } from '../../BaseContainer/BaseContainer.js';
 import { Text } from '../../Text/Text.js';
 
-const SpecificStateContainer = styled(BaseContainer).withConfig({ displayName: "vui--SpecificStateContainer", componentId: "vui--991hgo" }) `display:flex;flex-direction:column;justify-content:center;align-items:center;height:${(props) => props.height}px;background:white;`;
-const EllipseContainer = styled(BaseContainer).withConfig({ displayName: "vui--EllipseContainer", componentId: "vui--1oi4ebm" }) `display:flex;justify-content:center;align-items:center;width:120px;height:120px;border-radius:100px;background:${theme.colors.neutral.grey.base};svg{width:64px !important;height:64px !important;}`;
-const TitleText = styled(Text).withConfig({ displayName: "vui--TitleText", componentId: "vui--pj8i0k" }) `margin-top:24px;`;
-const SubTitleText = styled(Text).withConfig({ displayName: "vui--SubTitleText", componentId: "vui--19x6udv" }) `margin-top:8px;`;
+const SpecificStateContainer = styled(BaseContainer).withConfig({ displayName: "vui--SpecificStateContainer", componentId: "vui--120wsfh" }) `display:flex;flex-direction:column;justify-content:center;align-items:center;height:${(props) => props.height}px;background:white;`;
+const EllipseContainer = styled(BaseContainer).withConfig({ displayName: "vui--EllipseContainer", componentId: "vui--1khxo3q" }) `display:flex;justify-content:center;align-items:center;width:120px;height:120px;border-radius:100px;background:${theme.colors.neutral.grey.base};svg{width:64px !important;height:64px !important;}`;
+const TitleText = styled(Text).withConfig({ displayName: "vui--TitleText", componentId: "vui--3cvjfj" }) `margin-top:24px;`;
+const SubTitleText = styled(Text).withConfig({ displayName: "vui--SubTitleText", componentId: "vui--mw0wkw" }) `margin-top:8px;`;
 
 export { EllipseContainer, SpecificStateContainer, SubTitleText, TitleText };
 //# sourceMappingURL=styled.js.map

package/dist/components/LegacyDataTable/SpecificState/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/LegacyDataTable/SpecificState/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\n\ntype SpecificStateContainerPropTypes = {\n  height: number;\n};\n\nconst SpecificStateContainer = styled(BaseContainer)<SpecificStateContainerPropTypes>`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: ${(props) => props.height}px;\n  background: white;\n`;\n\nconst EllipseContainer = styled(BaseContainer)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 120px;\n  height: 120px;\n  border-radius: 100px;\n  background: ${theme.colors.neutral.grey.base};\n\n  svg {\n    width: 64px !important;\n    height: 64px !important;\n  }\n`;\n\nconst TitleText = styled(Text)`\n  margin-top: 24px;\n`;\n\nconst SubTitleText = styled(Text)`\n  margin-top: 8px;\n`;\n\nexport { SpecificStateContainer, EllipseContainer, TitleText, SubTitleText };\n"],"names":[],"mappings":";;;;;AASA,MAAM,sBAAsB,GAAG,MAAM,CAAC,aAAa,CAAC,CAKxC,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,oFAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM;AAInC,MAAM,gBAAgB,GAAG,MAAM,CAAC,aAAa,CAAC,CAO9B,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAQ9C,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC;AAI9B,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/LegacyDataTable/SpecificState/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\n\ntype SpecificStateContainerPropTypes = {\n  height: number;\n};\n\nconst SpecificStateContainer = styled(BaseContainer)<SpecificStateContainerPropTypes>`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: ${(props) => props.height}px;\n  background: white;\n`;\n\nconst EllipseContainer = styled(BaseContainer)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 120px;\n  height: 120px;\n  border-radius: 100px;\n  background: ${theme.colors.neutral.grey.base};\n\n  svg {\n    width: 64px !important;\n    height: 64px !important;\n  }\n`;\n\nconst TitleText = styled(Text)`\n  margin-top: 24px;\n`;\n\nconst SubTitleText = styled(Text)`\n  margin-top: 8px;\n`;\n\nexport { SpecificStateContainer, EllipseContainer, TitleText, SubTitleText };\n"],"names":[],"mappings":";;;;;AASA,MAAM,sBAAsB,GAAG,MAAM,CAAC,aAAa,CAAC,CAKxC,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,oFAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM;AAInC,MAAM,gBAAgB,GAAG,MAAM,CAAC,aAAa,CAAC,CAO9B,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAQ9C,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC;AAI9B,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC;;;;"}

package/dist/components/LegacyDataTable/cells/ClickableCell.cjs

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const ClickableButton = styled__default.default(styled$1.CellButton).withConfig({ displayName: "vui--ClickableButton", componentId: "vui--1b7t5il" }) `color:${index.theme.text.link.color};text-decoration:${index.theme.text.link.textDecoration};`;
+const ClickableButton = styled__default.default(styled$1.CellButton).withConfig({ displayName: "vui--ClickableButton", componentId: "vui--1qfw372" }) `color:${index.theme.text.link.color};text-decoration:${index.theme.text.link.textDecoration};`;
 const ClickableCell = ({ onClick, children, ...otherProps }) => (React__default.default.createElement(styled$2.Cell, { ...otherProps },
     React__default.default.createElement(ClickableButton, { onClick: onClick }, children)));
 

package/dist/components/LegacyDataTable/cells/ClickableCell.js

@@ -4,7 +4,7 @@ import { theme } from '../../../theme/index.js';
 import { CellButton } from './styled.js';
 import { Cell } from '../styled.js';
 
-const ClickableButton = styled(CellButton).withConfig({ displayName: "vui--ClickableButton", componentId: "vui--1b7t5il" }) `color:${theme.text.link.color};text-decoration:${theme.text.link.textDecoration};`;
+const ClickableButton = styled(CellButton).withConfig({ displayName: "vui--ClickableButton", componentId: "vui--1qfw372" }) `color:${theme.text.link.color};text-decoration:${theme.text.link.textDecoration};`;
 const ClickableCell = ({ onClick, children, ...otherProps }) => (React__default.createElement(Cell, { ...otherProps },
     React__default.createElement(ClickableButton, { onClick: onClick }, children)));
 

package/dist/components/LegacyDataTable/cells/EditableCell.cjs

@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Content = styled__default.default.div.withConfig({ displayName: "vui--Content", componentId: "vui--n24x0f" }) `text-align:inherit;border-bottom:1px dotted black;`;
+const Content = styled__default.default.div.withConfig({ displayName: "vui--Content", componentId: "vui--1fqu167" }) `text-align:inherit;border-bottom:1px dotted black;`;
 const EditableCell = ({ onClick, children, ...otherProps }) => (React__default.default.createElement(styled$1.Cell, { ...otherProps },
     React__default.default.createElement(styled$2.CellButton, { onClick: onClick },
         React__default.default.createElement(Content, null, children))));

package/dist/components/LegacyDataTable/cells/EditableCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableCell.cjs","sources":["../../../../src/components/LegacyDataTable/cells/EditableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst Content = styled.div`\n  text-align: inherit;\n  border-bottom: 1px dotted black;\n`;\n\nexport interface EditableCellProps extends CellProps {\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  children: React.ReactNode;\n}\n\nexport const EditableCell = ({ onClick, children, ...otherProps }: EditableCellProps) => (\n  <Cell {...otherProps}>\n    <CellButton onClick={onClick}>\n      <Content>{children}</Content>\n    </CellButton>\n  </Cell>\n);\n"],"names":["styled","React","Cell","CellButton"],"mappings":";;;;;;;;;;;;AAKA,MAAM,OAAO,GAAGA,uBAAM,CAAC,GAAG,6HAGzB;MAOY,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,MAClFC,sBAAC,CAAA,aAAA,CAAAC,aAAI,OAAK,UAAU,EAAA;AAClB,IAAAD,sBAAA,CAAA,aAAA,CAACE,mBAAU,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA;AAC1B,QAAAF,sBAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CAClB,CACR;;;;"}
+{"version":3,"file":"EditableCell.cjs","sources":["../../../../src/components/LegacyDataTable/cells/EditableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst Content = styled.div`\n  text-align: inherit;\n  border-bottom: 1px dotted black;\n`;\n\nexport interface EditableCellProps extends CellProps {\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  children: React.ReactNode;\n}\n\nexport const EditableCell = ({ onClick, children, ...otherProps }: EditableCellProps) => (\n  <Cell {...otherProps}>\n    <CellButton onClick={onClick}>\n      <Content>{children}</Content>\n    </CellButton>\n  </Cell>\n);\n"],"names":["styled","React","Cell","CellButton"],"mappings":";;;;;;;;;;;;AAKA,MAAM,OAAO,GAAGA,uBAAM,CAAC,GAAG,8HAGzB;MAOY,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,MAClFC,sBAAC,CAAA,aAAA,CAAAC,aAAI,OAAK,UAAU,EAAA;AAClB,IAAAD,sBAAA,CAAA,aAAA,CAACE,mBAAU,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA;AAC1B,QAAAF,sBAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CAClB,CACR;;;;"}

package/dist/components/LegacyDataTable/cells/EditableCell.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { CellButton } from './styled.js';
 import { Cell } from '../styled.js';
 
-const Content = styled.div.withConfig({ displayName: "vui--Content", componentId: "vui--n24x0f" }) `text-align:inherit;border-bottom:1px dotted black;`;
+const Content = styled.div.withConfig({ displayName: "vui--Content", componentId: "vui--1fqu167" }) `text-align:inherit;border-bottom:1px dotted black;`;
 const EditableCell = ({ onClick, children, ...otherProps }) => (React__default.createElement(Cell, { ...otherProps },
     React__default.createElement(CellButton, { onClick: onClick },
         React__default.createElement(Content, null, children))));

package/dist/components/LegacyDataTable/cells/EditableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableCell.js","sources":["../../../../src/components/LegacyDataTable/cells/EditableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst Content = styled.div`\n  text-align: inherit;\n  border-bottom: 1px dotted black;\n`;\n\nexport interface EditableCellProps extends CellProps {\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  children: React.ReactNode;\n}\n\nexport const EditableCell = ({ onClick, children, ...otherProps }: EditableCellProps) => (\n  <Cell {...otherProps}>\n    <CellButton onClick={onClick}>\n      <Content>{children}</Content>\n    </CellButton>\n  </Cell>\n);\n"],"names":["React"],"mappings":";;;;;AAKA,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,6HAGzB;MAOY,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,MAClFA,cAAC,CAAA,aAAA,CAAA,IAAI,OAAK,UAAU,EAAA;AAClB,IAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA;AAC1B,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CAClB,CACR;;;;"}
+{"version":3,"file":"EditableCell.js","sources":["../../../../src/components/LegacyDataTable/cells/EditableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst Content = styled.div`\n  text-align: inherit;\n  border-bottom: 1px dotted black;\n`;\n\nexport interface EditableCellProps extends CellProps {\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  children: React.ReactNode;\n}\n\nexport const EditableCell = ({ onClick, children, ...otherProps }: EditableCellProps) => (\n  <Cell {...otherProps}>\n    <CellButton onClick={onClick}>\n      <Content>{children}</Content>\n    </CellButton>\n  </Cell>\n);\n"],"names":["React"],"mappings":";;;;;AAKA,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,8HAGzB;MAOY,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,MAClFA,cAAC,CAAA,aAAA,CAAA,IAAI,OAAK,UAAU,EAAA;AAClB,IAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA;AAC1B,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CAClB,CACR;;;;"}

package/dist/components/LegacyDataTable/cells/styled.cjs

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 /* eslint-disable import/prefer-default-export */
-const CellButton = styled__default.default.button.withConfig({ displayName: "vui--CellButton", componentId: "vui--1w0np52" }) `appearance:none;border:0;background-color:transparent;font:inherit;display:inline-block;box-sizing:border-box;width:calc(100% + 1.5rem);margin:-0.75rem -0.75rem;padding:0.75rem 0.75rem;text-align:inherit;line-height:${index.theme.sizes.base};border-radius:${index.theme.radius.base};&:hover{cursor:pointer;background-color:${index.theme.colors.secondary.blue.lightest};}`;
+const CellButton = styled__default.default.button.withConfig({ displayName: "vui--CellButton", componentId: "vui--14e2rl4" }) `appearance:none;border:0;background-color:transparent;font:inherit;display:inline-block;box-sizing:border-box;width:calc(100% + 1.5rem);margin:-0.75rem -0.75rem;padding:0.75rem 0.75rem;text-align:inherit;line-height:${index.theme.sizes.base};border-radius:${index.theme.radius.base};&:hover{cursor:pointer;background-color:${index.theme.colors.secondary.blue.lightest};}`;
 
 exports.CellButton = CellButton;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/LegacyDataTable/cells/styled.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { theme } from '../../../theme/index.js';
 
 /* eslint-disable import/prefer-default-export */
-const CellButton = styled.button.withConfig({ displayName: "vui--CellButton", componentId: "vui--1w0np52" }) `appearance:none;border:0;background-color:transparent;font:inherit;display:inline-block;box-sizing:border-box;width:calc(100% + 1.5rem);margin:-0.75rem -0.75rem;padding:0.75rem 0.75rem;text-align:inherit;line-height:${theme.sizes.base};border-radius:${theme.radius.base};&:hover{cursor:pointer;background-color:${theme.colors.secondary.blue.lightest};}`;
+const CellButton = styled.button.withConfig({ displayName: "vui--CellButton", componentId: "vui--14e2rl4" }) `appearance:none;border:0;background-color:transparent;font:inherit;display:inline-block;box-sizing:border-box;width:calc(100% + 1.5rem);margin:-0.75rem -0.75rem;padding:0.75rem 0.75rem;text-align:inherit;line-height:${theme.sizes.base};border-radius:${theme.radius.base};&:hover{cursor:pointer;background-color:${theme.colors.secondary.blue.lightest};}`;
 
 export { CellButton };
 //# sourceMappingURL=styled.js.map

package/dist/components/LegacyDataTable/styled.cjs

@@ -28,8 +28,8 @@ const startFixedColumnShadow = `
 const endFixedColumnShadow = `
   box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);
 `;
-const TooltipContent = styled__default.default.div.withConfig({ displayName: "vui--TooltipContent", componentId: "vui--11ytygc" }) `display:flex;flex-direction:row;align-items:center;`;
-const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--1g4i0cu" }) `width:100%;overflow-x:${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};overflow-y:hidden;position:relative;border-top:1px solid ${grey.dark};border-bottom:1px solid ${grey.dark};${({ showScrollbar }) => showScrollbar
+const TooltipContent = styled__default.default.div.withConfig({ displayName: "vui--TooltipContent", componentId: "vui--6b6999" }) `display:flex;flex-direction:row;align-items:center;`;
+const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--8prdgq" }) `width:100%;overflow-x:${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};overflow-y:hidden;position:relative;border-top:1px solid ${grey.dark};border-bottom:1px solid ${grey.dark};${({ showScrollbar }) => showScrollbar
     ? `
     scrollbar-width: auto;
 
@@ -73,11 +73,11 @@ const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrap
         : ''};
     };
   `}`;
-const WrapperBordered = styled__default.default(Wrapper).withConfig({ displayName: "vui--WrapperBordered", componentId: "vui--wtdkab" }) `border:1px solid ${grey.dark};border-radius:4px;`;
-const Head = styled__default.default.thead.withConfig({ displayName: "vui--Head", componentId: "vui--1j5avrf" }) `background-color:white;`;
-const Body = styled__default.default.tbody.withConfig({ displayName: "vui--Body", componentId: "vui--n8uysg" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& + & > tr:first-child > td{border-top:1px solid ${grey.base};}tr:not(:first-child)> td{border-top:1px solid transparent;}&&& tr:hover td{background-color:#ebf4fb;}`;
-styled__default.default.tfoot.withConfig({ displayName: "vui--Foot", componentId: "vui--qckqty" }) `& td{background-color:${grey.lightest};padding:1.5rem 1rem;border-top:1px solid ${blue.base};}`;
-const Row = styled__default.default.tr.withConfig({ displayName: "vui--Row", componentId: "vui--10drh9k" }) `&.hidden{visibility:collapse;}${({ accentColor }) => accentColor &&
+const WrapperBordered = styled__default.default(Wrapper).withConfig({ displayName: "vui--WrapperBordered", componentId: "vui--1uzcmg4" }) `border:1px solid ${grey.dark};border-radius:4px;`;
+const Head = styled__default.default.thead.withConfig({ displayName: "vui--Head", componentId: "vui--tbv1ab" }) `background-color:white;`;
+const Body = styled__default.default.tbody.withConfig({ displayName: "vui--Body", componentId: "vui--1f7jdxq" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& + & > tr:first-child > td{border-top:1px solid ${grey.base};}tr:not(:first-child)> td{border-top:1px solid transparent;}&&& tr:hover td{background-color:#ebf4fb;}`;
+styled__default.default.tfoot.withConfig({ displayName: "vui--Foot", componentId: "vui--1ug6bgl" }) `& td{background-color:${grey.lightest};padding:1.5rem 1rem;border-top:1px solid ${blue.base};}`;
+const Row = styled__default.default.tr.withConfig({ displayName: "vui--Row", componentId: "vui--ostkmy" }) `&.hidden{visibility:collapse;}${({ accentColor }) => accentColor &&
     `
     & > td:first-child::before {
       content: "";
@@ -89,17 +89,17 @@ const Row = styled__default.default.tr.withConfig({ displayName: "vui--Row", com
       background-color: ${accentColor};  
     }
   `}`;
-const Cell = styled__default.default.td.withConfig({ displayName: "vui--Cell", componentId: "vui--tljl4p" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.bodySmall.fontFamily};font-size:${text.bodySmall.fontSize};font-weight:${text.bodySmall.fontWeight};color:${text.bodySmall.color};line-height:${sizes.base};width:${({ grow }) => (grow ? '100%' : 'auto')};& > *{vertical-align:middle;}`;
+const Cell = styled__default.default.td.withConfig({ displayName: "vui--Cell", componentId: "vui--9fl65z" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.bodySmall.fontFamily};font-size:${text.bodySmall.fontSize};font-weight:${text.bodySmall.fontWeight};color:${text.bodySmall.color};line-height:${sizes.base};width:${({ grow }) => (grow ? '100%' : 'auto')};& > *{vertical-align:middle;}`;
 const HeaderCell = styled__default.default(Cell).attrs({
     as: 'th',
-}).withConfig({ displayName: "vui--HeaderCell", componentId: "vui--10p2duv" }) `user-select:none;border-bottom:1px solid ${grey.dark};font-family:${text.bodySmallBold.fontFamily};font-size:${text.bodySmallBold.fontSize};font-weight:${text.bodySmallBold.fontWeight};color:${text.bodySmallBold.color};& span{white-space:pre-line;}&.sortable:hover{cursor:pointer;background-color:${grey.light};}`;
+}).withConfig({ displayName: "vui--HeaderCell", componentId: "vui--1mc579o" }) `user-select:none;border-bottom:1px solid ${grey.dark};font-family:${text.bodySmallBold.fontFamily};font-size:${text.bodySmallBold.fontSize};font-weight:${text.bodySmallBold.fontWeight};color:${text.bodySmallBold.color};& span{white-space:pre-line;}&.sortable:hover{cursor:pointer;background-color:${grey.light};}`;
 const alignmentMap = {
     left: 'flex-start',
     center: 'center',
     right: 'flex-end',
 };
-const HeaderCellLayout = styled__default.default.div.withConfig({ displayName: "vui--HeaderCellLayout", componentId: "vui--13i0t50" }) `display:flex;align-items:center;justify-content:${({ align }) => (align ? alignmentMap[align] : 'flex-start')};& > * + *{margin-left:0.25rem;}`;
-const Table = styled__default.default.table.withConfig({ displayName: "vui--Table", componentId: "vui--1bp83gy" }) `width:100%;border-spacing:0;table-layout:${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};${({ striped }) => striped &&
+const HeaderCellLayout = styled__default.default.div.withConfig({ displayName: "vui--HeaderCellLayout", componentId: "vui--iko9ux" }) `display:flex;align-items:center;justify-content:${({ align }) => (align ? alignmentMap[align] : 'flex-start')};& > * + *{margin-left:0.25rem;}`;
+const Table = styled__default.default.table.withConfig({ displayName: "vui--Table", componentId: "vui--1vjqk2m" }) `width:100%;border-spacing:0;table-layout:${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};${({ striped }) => striped &&
     `
     & ${Body}:nth-child(even) td {
       background-color: ${grey.lightest};
@@ -114,9 +114,9 @@ const Table = styled__default.default.table.withConfig({ displayName: "vui--Tabl
       white-space: nowrap;
     }
   `}`;
-const Footer = styled__default.default.tfoot.withConfig({ displayName: "vui--Footer", componentId: "vui--44p3gi" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& ${Cell}{border-top:1px solid ${grey.dark};background-color:${grey.lightest};padding-top:${sizes.base};padding-bottom:${sizes.base};line-height:2rem;}`;
-const StickyHeaderWrapper = styled__default.default.div.withConfig({ displayName: "vui--StickyHeaderWrapper", componentId: "vui--wokb93" }) `position:fixed;top:0;z-index:2;overflow-x:hidden;`;
-const FakeHeaderTable = styled__default.default(Table).withConfig({ displayName: "vui--FakeHeaderTable", componentId: "vui--6s4d56" }) ``;
+const Footer = styled__default.default.tfoot.withConfig({ displayName: "vui--Footer", componentId: "vui--ob9m7j" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& ${Cell}{border-top:1px solid ${grey.dark};background-color:${grey.lightest};padding-top:${sizes.base};padding-bottom:${sizes.base};line-height:2rem;}`;
+const StickyHeaderWrapper = styled__default.default.div.withConfig({ displayName: "vui--StickyHeaderWrapper", componentId: "vui--5eqa3f" }) `position:fixed;top:0;z-index:2;overflow-x:hidden;`;
+const FakeHeaderTable = styled__default.default(Table).withConfig({ displayName: "vui--FakeHeaderTable", componentId: "vui--48b34o" }) ``;
 
 exports.Body = Body;
 exports.Cell = Cell;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/LegacyDataTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { NoWrapType, StripedType } from './utils/types';\nimport { ScrollPosition } from './utils/constants';\n\nconst { text, sizes } = theme;\nconst { blue } = theme.colors.secondary;\nconst { grey } = theme.colors.neutral;\nconst { scrollbar } = theme.colors.system;\n\nconst fixedColumnShadow = `\n  position: absolute;\n  top: 0;\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: box-shadow .3s;\n`;\n\nconst startFixedColumnShadow = `\n  box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\nconst endFixedColumnShadow = `\n  box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\ntype WrapperPropTypes = {\n  scrollDisabled: boolean;\n  scrollPosition?: ScrollPosition;\n  lastStartFixedColumnsIndex?: number;\n  firstEndFixedColumnsIndex?: number;\n  showScrollbar?: boolean;\n};\n\nexport const TooltipContent = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const Wrapper = styled.div<WrapperPropTypes>`\n  width: 100%;\n  overflow-x: ${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid ${grey.dark};\n  border-bottom: 1px solid ${grey.dark};\n\n  ${({ showScrollbar }) =>\n    showScrollbar\n      ? `\n    scrollbar-width: auto;\n\n    &::-webkit-scrollbar {\n      margin-top: 10px;\n      width: 6px;\n      height: 6px;\n    }\n    \n    &::-webkit-scrollbar-track {\n      background: ${scrollbar.background}; \n    }\n    \n    &::-webkit-scrollbar-thumb {\n      background: ${scrollbar.thumb};\n      border-radius: 4px; \n    }\n    `\n      : ''}\n\n  ${({ scrollDisabled, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, scrollPosition }) =>\n    scrollDisabled\n      ? ''\n      : `\n    td:nth-child(${lastStartFixedColumnsIndex}):after,\n    th:nth-child(${lastStartFixedColumnsIndex}):after {\n      right: 0;\n      transform: translate(100%);\n      ${fixedColumnShadow};\n\n      ${\n        scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end\n          ? startFixedColumnShadow\n          : ''\n      };\n    };\n\n    td:nth-last-child(${firstEndFixedColumnsIndex}):after,\n    th:nth-last-child(${firstEndFixedColumnsIndex}):after {\n      left: 0;\n      transform: translate(-100%);\n      ${fixedColumnShadow};\n\n      ${\n        scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle\n          ? endFixedColumnShadow\n          : ''\n      };\n    };\n  `}\n`;\n\nexport const WrapperBordered = styled(Wrapper)`\n  border: 1px solid ${grey.dark};\n  border-radius: 4px;\n`;\n\nexport const Head = styled.thead`\n  background-color: white;\n`;\n\nexport const Body = styled.tbody<{ fixedColumnsStyle?: string }>`\n  tr {\n    ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n  }\n\n  & + & > tr:first-child > td {\n    border-top: 1px solid ${grey.base};\n  }\n\n  tr:not(:first-child) > td {\n    border-top: 1px solid transparent;\n  }\n\n  &&& tr:hover td {\n    background-color: #ebf4fb; /* TODO: Remove magic hex value */\n  }\n`;\n\nexport const Foot = styled.tfoot`\n  & td {\n    background-color: ${grey.lightest};\n    padding: 1.5rem 1rem;\n    border-top: 1px solid ${blue.base};\n  }\n`;\n\nexport interface RowProps {\n  accentColor?: string;\n}\n\nexport const Row = styled.tr<RowProps>`\n  &.hidden {\n    visibility: collapse;\n  }\n\n  ${({ accentColor }) =>\n    accentColor &&\n    `\n    & > td:first-child::before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      width: 4px;\n      background-color: ${accentColor};  \n    }\n  `}\n`;\n\nexport interface CellProps {\n  align?: 'left' | 'center' | 'right';\n  grow?: boolean;\n}\n\nexport const Cell = styled.td<CellProps>`\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: ${({ align }) => align || 'left'};\n  background-color: white;\n\n  font-family: ${text.bodySmall.fontFamily};\n  font-size: ${text.bodySmall.fontSize};\n  font-weight: ${text.bodySmall.fontWeight};\n  color: ${text.bodySmall.color};\n  line-height: ${sizes.base};\n\n  width: ${({ grow }) => (grow ? '100%' : 'auto')};\n\n  & > * {\n    vertical-align: middle;\n  }\n`;\n\nexport const HeaderCell = styled(Cell).attrs({\n  as: 'th',\n})`\n  user-select: none;\n  border-bottom: 1px solid ${grey.dark};\n\n  font-family: ${text.bodySmallBold.fontFamily};\n  font-size: ${text.bodySmallBold.fontSize};\n  font-weight: ${text.bodySmallBold.fontWeight};\n  color: ${text.bodySmallBold.color};\n\n  & span {\n    white-space: pre-line;\n  }\n\n  &.sortable:hover {\n    cursor: pointer;\n    background-color: ${grey.light};\n  }\n`;\n\nconst alignmentMap = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n};\n\nexport interface HeaderCellLayoutProps {\n  align?: 'left' | 'center' | 'right';\n}\n\nexport const HeaderCellLayout = styled.div<HeaderCellLayoutProps>`\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align }) => (align ? alignmentMap[align] : 'flex-start')};\n\n  & > * + * {\n    margin-left: 0.25rem;\n  }\n`;\n\ntype TablePropTypes = {\n  striped?: StripedType;\n  noWrap?: NoWrapType;\n  tableLoading?: boolean;\n  isFixedLayout?: boolean;\n};\n\nexport const Table = styled.table<TablePropTypes>`\n  width: 100%;\n  border-spacing: 0;\n  table-layout: ${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};\n\n  ${({ striped }) =>\n    striped &&\n    `\n    & ${Body}:nth-child(even) td {\n      background-color: ${grey.lightest};\n    }\n  `}\n\n  & * {\n    box-sizing: border-box;\n\n    ${({ tableLoading }) =>\n      tableLoading &&\n      `\n      user-select: none;\n      pointer-events: none;\n    `}\n  }\n\n  ${({ noWrap }) =>\n    noWrap &&\n    `\n    & ${HeaderCell}, & ${HeaderCell} span {\n      white-space: nowrap;\n    }\n  `}\n`;\n\nexport const Footer = styled.tfoot<{ fixedColumnsStyle?: string }>`\n  tr {\n    ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n  }\n\n  & ${Cell} {\n    border-top: 1px solid ${grey.dark};\n    background-color: ${grey.lightest};\n    padding-top: ${sizes.base};\n    padding-bottom: ${sizes.base};\n    line-height: 2rem;\n  }\n`;\n\nexport const StickyHeaderWrapper = styled.div`\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n`;\n\nexport const FakeHeaderTable = styled(Table)``;\n"],"names":["theme","styled","ScrollPosition"],"mappings":"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"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/LegacyDataTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { NoWrapType, StripedType } from './utils/types';\nimport { ScrollPosition } from './utils/constants';\n\nconst { text, sizes } = theme;\nconst { blue } = theme.colors.secondary;\nconst { grey } = theme.colors.neutral;\nconst { scrollbar } = theme.colors.system;\n\nconst fixedColumnShadow = `\n  position: absolute;\n  top: 0;\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: box-shadow .3s;\n`;\n\nconst startFixedColumnShadow = `\n  box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\nconst endFixedColumnShadow = `\n  box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\ntype WrapperPropTypes = {\n  scrollDisabled: boolean;\n  scrollPosition?: ScrollPosition;\n  lastStartFixedColumnsIndex?: number;\n  firstEndFixedColumnsIndex?: number;\n  showScrollbar?: boolean;\n};\n\nexport const TooltipContent = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const Wrapper = styled.div<WrapperPropTypes>`\n  width: 100%;\n  overflow-x: ${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid ${grey.dark};\n  border-bottom: 1px solid ${grey.dark};\n\n  ${({ showScrollbar }) =>\n    showScrollbar\n      ? `\n    scrollbar-width: auto;\n\n    &::-webkit-scrollbar {\n      margin-top: 10px;\n      width: 6px;\n      height: 6px;\n    }\n    \n    &::-webkit-scrollbar-track {\n      background: ${scrollbar.background}; \n    }\n    \n    &::-webkit-scrollbar-thumb {\n      background: ${scrollbar.thumb};\n      border-radius: 4px; \n    }\n    `\n      : ''}\n\n  ${({ scrollDisabled, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, scrollPosition }) =>\n    scrollDisabled\n      ? ''\n      : `\n    td:nth-child(${lastStartFixedColumnsIndex}):after,\n    th:nth-child(${lastStartFixedColumnsIndex}):after {\n      right: 0;\n      transform: translate(100%);\n      ${fixedColumnShadow};\n\n      ${\n        scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end\n          ? startFixedColumnShadow\n          : ''\n      };\n    };\n\n    td:nth-last-child(${firstEndFixedColumnsIndex}):after,\n    th:nth-last-child(${firstEndFixedColumnsIndex}):after {\n      left: 0;\n      transform: translate(-100%);\n      ${fixedColumnShadow};\n\n      ${\n        scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle\n          ? endFixedColumnShadow\n          : ''\n      };\n    };\n  `}\n`;\n\nexport const WrapperBordered = styled(Wrapper)`\n  border: 1px solid ${grey.dark};\n  border-radius: 4px;\n`;\n\nexport const Head = styled.thead`\n  background-color: white;\n`;\n\nexport const Body = styled.tbody<{ fixedColumnsStyle?: string }>`\n  tr {\n    ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n  }\n\n  & + & > tr:first-child > td {\n    border-top: 1px solid ${grey.base};\n  }\n\n  tr:not(:first-child) > td {\n    border-top: 1px solid transparent;\n  }\n\n  &&& tr:hover td {\n    background-color: #ebf4fb; /* TODO: Remove magic hex value */\n  }\n`;\n\nexport const Foot = styled.tfoot`\n  & td {\n    background-color: ${grey.lightest};\n    padding: 1.5rem 1rem;\n    border-top: 1px solid ${blue.base};\n  }\n`;\n\nexport interface RowProps {\n  accentColor?: string;\n}\n\nexport const Row = styled.tr<RowProps>`\n  &.hidden {\n    visibility: collapse;\n  }\n\n  ${({ accentColor }) =>\n    accentColor &&\n    `\n    & > td:first-child::before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      width: 4px;\n      background-color: ${accentColor};  \n    }\n  `}\n`;\n\nexport interface CellProps {\n  align?: 'left' | 'center' | 'right';\n  grow?: boolean;\n}\n\nexport const Cell = styled.td<CellProps>`\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: ${({ align }) => align || 'left'};\n  background-color: white;\n\n  font-family: ${text.bodySmall.fontFamily};\n  font-size: ${text.bodySmall.fontSize};\n  font-weight: ${text.bodySmall.fontWeight};\n  color: ${text.bodySmall.color};\n  line-height: ${sizes.base};\n\n  width: ${({ grow }) => (grow ? '100%' : 'auto')};\n\n  & > * {\n    vertical-align: middle;\n  }\n`;\n\nexport const HeaderCell = styled(Cell).attrs({\n  as: 'th',\n})`\n  user-select: none;\n  border-bottom: 1px solid ${grey.dark};\n\n  font-family: ${text.bodySmallBold.fontFamily};\n  font-size: ${text.bodySmallBold.fontSize};\n  font-weight: ${text.bodySmallBold.fontWeight};\n  color: ${text.bodySmallBold.color};\n\n  & span {\n    white-space: pre-line;\n  }\n\n  &.sortable:hover {\n    cursor: pointer;\n    background-color: ${grey.light};\n  }\n`;\n\nconst alignmentMap = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n};\n\nexport interface HeaderCellLayoutProps {\n  align?: 'left' | 'center' | 'right';\n}\n\nexport const HeaderCellLayout = styled.div<HeaderCellLayoutProps>`\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align }) => (align ? alignmentMap[align] : 'flex-start')};\n\n  & > * + * {\n    margin-left: 0.25rem;\n  }\n`;\n\ntype TablePropTypes = {\n  striped?: StripedType;\n  noWrap?: NoWrapType;\n  tableLoading?: boolean;\n  isFixedLayout?: boolean;\n};\n\nexport const Table = styled.table<TablePropTypes>`\n  width: 100%;\n  border-spacing: 0;\n  table-layout: ${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};\n\n  ${({ striped }) =>\n    striped &&\n    `\n    & ${Body}:nth-child(even) td {\n      background-color: ${grey.lightest};\n    }\n  `}\n\n  & * {\n    box-sizing: border-box;\n\n    ${({ tableLoading }) =>\n      tableLoading &&\n      `\n      user-select: none;\n      pointer-events: none;\n    `}\n  }\n\n  ${({ noWrap }) =>\n    noWrap &&\n    `\n    & ${HeaderCell}, & ${HeaderCell} span {\n      white-space: nowrap;\n    }\n  `}\n`;\n\nexport const Footer = styled.tfoot<{ fixedColumnsStyle?: string }>`\n  tr {\n    ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n  }\n\n  & ${Cell} {\n    border-top: 1px solid ${grey.dark};\n    background-color: ${grey.lightest};\n    padding-top: ${sizes.base};\n    padding-bottom: ${sizes.base};\n    line-height: 2rem;\n  }\n`;\n\nexport const StickyHeaderWrapper = styled.div`\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n`;\n\nexport const FakeHeaderTable = styled(Table)``;\n"],"names":["theme","styled","ScrollPosition"],"mappings":"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"}

package/dist/components/LegacyDataTable/styled.js

@@ -22,8 +22,8 @@ const startFixedColumnShadow = `
 const endFixedColumnShadow = `
   box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);
 `;
-const TooltipContent = styled.div.withConfig({ displayName: "vui--TooltipContent", componentId: "vui--11ytygc" }) `display:flex;flex-direction:row;align-items:center;`;
-const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--1g4i0cu" }) `width:100%;overflow-x:${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};overflow-y:hidden;position:relative;border-top:1px solid ${grey.dark};border-bottom:1px solid ${grey.dark};${({ showScrollbar }) => showScrollbar
+const TooltipContent = styled.div.withConfig({ displayName: "vui--TooltipContent", componentId: "vui--6b6999" }) `display:flex;flex-direction:row;align-items:center;`;
+const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--8prdgq" }) `width:100%;overflow-x:${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};overflow-y:hidden;position:relative;border-top:1px solid ${grey.dark};border-bottom:1px solid ${grey.dark};${({ showScrollbar }) => showScrollbar
     ? `
     scrollbar-width: auto;
 
@@ -67,11 +67,11 @@ const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId
         : ''};
     };
   `}`;
-const WrapperBordered = styled(Wrapper).withConfig({ displayName: "vui--WrapperBordered", componentId: "vui--wtdkab" }) `border:1px solid ${grey.dark};border-radius:4px;`;
-const Head = styled.thead.withConfig({ displayName: "vui--Head", componentId: "vui--1j5avrf" }) `background-color:white;`;
-const Body = styled.tbody.withConfig({ displayName: "vui--Body", componentId: "vui--n8uysg" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& + & > tr:first-child > td{border-top:1px solid ${grey.base};}tr:not(:first-child)> td{border-top:1px solid transparent;}&&& tr:hover td{background-color:#ebf4fb;}`;
-styled.tfoot.withConfig({ displayName: "vui--Foot", componentId: "vui--qckqty" }) `& td{background-color:${grey.lightest};padding:1.5rem 1rem;border-top:1px solid ${blue.base};}`;
-const Row = styled.tr.withConfig({ displayName: "vui--Row", componentId: "vui--10drh9k" }) `&.hidden{visibility:collapse;}${({ accentColor }) => accentColor &&
+const WrapperBordered = styled(Wrapper).withConfig({ displayName: "vui--WrapperBordered", componentId: "vui--1uzcmg4" }) `border:1px solid ${grey.dark};border-radius:4px;`;
+const Head = styled.thead.withConfig({ displayName: "vui--Head", componentId: "vui--tbv1ab" }) `background-color:white;`;
+const Body = styled.tbody.withConfig({ displayName: "vui--Body", componentId: "vui--1f7jdxq" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& + & > tr:first-child > td{border-top:1px solid ${grey.base};}tr:not(:first-child)> td{border-top:1px solid transparent;}&&& tr:hover td{background-color:#ebf4fb;}`;
+styled.tfoot.withConfig({ displayName: "vui--Foot", componentId: "vui--1ug6bgl" }) `& td{background-color:${grey.lightest};padding:1.5rem 1rem;border-top:1px solid ${blue.base};}`;
+const Row = styled.tr.withConfig({ displayName: "vui--Row", componentId: "vui--ostkmy" }) `&.hidden{visibility:collapse;}${({ accentColor }) => accentColor &&
     `
     & > td:first-child::before {
       content: "";
@@ -83,17 +83,17 @@ const Row = styled.tr.withConfig({ displayName: "vui--Row", componentId: "vui--1
       background-color: ${accentColor};  
     }
   `}`;
-const Cell = styled.td.withConfig({ displayName: "vui--Cell", componentId: "vui--tljl4p" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.bodySmall.fontFamily};font-size:${text.bodySmall.fontSize};font-weight:${text.bodySmall.fontWeight};color:${text.bodySmall.color};line-height:${sizes.base};width:${({ grow }) => (grow ? '100%' : 'auto')};& > *{vertical-align:middle;}`;
+const Cell = styled.td.withConfig({ displayName: "vui--Cell", componentId: "vui--9fl65z" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.bodySmall.fontFamily};font-size:${text.bodySmall.fontSize};font-weight:${text.bodySmall.fontWeight};color:${text.bodySmall.color};line-height:${sizes.base};width:${({ grow }) => (grow ? '100%' : 'auto')};& > *{vertical-align:middle;}`;
 const HeaderCell = styled(Cell).attrs({
     as: 'th',
-}).withConfig({ displayName: "vui--HeaderCell", componentId: "vui--10p2duv" }) `user-select:none;border-bottom:1px solid ${grey.dark};font-family:${text.bodySmallBold.fontFamily};font-size:${text.bodySmallBold.fontSize};font-weight:${text.bodySmallBold.fontWeight};color:${text.bodySmallBold.color};& span{white-space:pre-line;}&.sortable:hover{cursor:pointer;background-color:${grey.light};}`;
+}).withConfig({ displayName: "vui--HeaderCell", componentId: "vui--1mc579o" }) `user-select:none;border-bottom:1px solid ${grey.dark};font-family:${text.bodySmallBold.fontFamily};font-size:${text.bodySmallBold.fontSize};font-weight:${text.bodySmallBold.fontWeight};color:${text.bodySmallBold.color};& span{white-space:pre-line;}&.sortable:hover{cursor:pointer;background-color:${grey.light};}`;
 const alignmentMap = {
     left: 'flex-start',
     center: 'center',
     right: 'flex-end',
 };
-const HeaderCellLayout = styled.div.withConfig({ displayName: "vui--HeaderCellLayout", componentId: "vui--13i0t50" }) `display:flex;align-items:center;justify-content:${({ align }) => (align ? alignmentMap[align] : 'flex-start')};& > * + *{margin-left:0.25rem;}`;
-const Table = styled.table.withConfig({ displayName: "vui--Table", componentId: "vui--1bp83gy" }) `width:100%;border-spacing:0;table-layout:${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};${({ striped }) => striped &&
+const HeaderCellLayout = styled.div.withConfig({ displayName: "vui--HeaderCellLayout", componentId: "vui--iko9ux" }) `display:flex;align-items:center;justify-content:${({ align }) => (align ? alignmentMap[align] : 'flex-start')};& > * + *{margin-left:0.25rem;}`;
+const Table = styled.table.withConfig({ displayName: "vui--Table", componentId: "vui--1vjqk2m" }) `width:100%;border-spacing:0;table-layout:${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};${({ striped }) => striped &&
     `
     & ${Body}:nth-child(even) td {
       background-color: ${grey.lightest};
@@ -108,9 +108,9 @@ const Table = styled.table.withConfig({ displayName: "vui--Table", componentId:
       white-space: nowrap;
     }
   `}`;
-const Footer = styled.tfoot.withConfig({ displayName: "vui--Footer", componentId: "vui--44p3gi" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& ${Cell}{border-top:1px solid ${grey.dark};background-color:${grey.lightest};padding-top:${sizes.base};padding-bottom:${sizes.base};line-height:2rem;}`;
-const StickyHeaderWrapper = styled.div.withConfig({ displayName: "vui--StickyHeaderWrapper", componentId: "vui--wokb93" }) `position:fixed;top:0;z-index:2;overflow-x:hidden;`;
-const FakeHeaderTable = styled(Table).withConfig({ displayName: "vui--FakeHeaderTable", componentId: "vui--6s4d56" }) ``;
+const Footer = styled.tfoot.withConfig({ displayName: "vui--Footer", componentId: "vui--ob9m7j" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& ${Cell}{border-top:1px solid ${grey.dark};background-color:${grey.lightest};padding-top:${sizes.base};padding-bottom:${sizes.base};line-height:2rem;}`;
+const StickyHeaderWrapper = styled.div.withConfig({ displayName: "vui--StickyHeaderWrapper", componentId: "vui--5eqa3f" }) `position:fixed;top:0;z-index:2;overflow-x:hidden;`;
+const FakeHeaderTable = styled(Table).withConfig({ displayName: "vui--FakeHeaderTable", componentId: "vui--48b34o" }) ``;
 
 export { Body, Cell, FakeHeaderTable, Footer, Head, HeaderCell, HeaderCellLayout, Row, StickyHeaderWrapper, Table, TooltipContent, Wrapper, WrapperBordered };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/LegacyDataTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { NoWrapType, StripedType } from './utils/types';\nimport { ScrollPosition } from './utils/constants';\n\nconst { text, sizes } = theme;\nconst { blue } = theme.colors.secondary;\nconst { grey } = theme.colors.neutral;\nconst { scrollbar } = theme.colors.system;\n\nconst fixedColumnShadow = `\n  position: absolute;\n  top: 0;\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: box-shadow .3s;\n`;\n\nconst startFixedColumnShadow = `\n  box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\nconst endFixedColumnShadow = `\n  box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\ntype WrapperPropTypes = {\n  scrollDisabled: boolean;\n  scrollPosition?: ScrollPosition;\n  lastStartFixedColumnsIndex?: number;\n  firstEndFixedColumnsIndex?: number;\n  showScrollbar?: boolean;\n};\n\nexport const TooltipContent = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const Wrapper = styled.div<WrapperPropTypes>`\n  width: 100%;\n  overflow-x: ${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid ${grey.dark};\n  border-bottom: 1px solid ${grey.dark};\n\n  ${({ showScrollbar }) =>\n    showScrollbar\n      ? `\n    scrollbar-width: auto;\n\n    &::-webkit-scrollbar {\n      margin-top: 10px;\n      width: 6px;\n      height: 6px;\n    }\n    \n    &::-webkit-scrollbar-track {\n      background: ${scrollbar.background}; \n    }\n    \n    &::-webkit-scrollbar-thumb {\n      background: ${scrollbar.thumb};\n      border-radius: 4px; \n    }\n    `\n      : ''}\n\n  ${({ scrollDisabled, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, scrollPosition }) =>\n    scrollDisabled\n      ? ''\n      : `\n    td:nth-child(${lastStartFixedColumnsIndex}):after,\n    th:nth-child(${lastStartFixedColumnsIndex}):after {\n      right: 0;\n      transform: translate(100%);\n      ${fixedColumnShadow};\n\n      ${\n        scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end\n          ? startFixedColumnShadow\n          : ''\n      };\n    };\n\n    td:nth-last-child(${firstEndFixedColumnsIndex}):after,\n    th:nth-last-child(${firstEndFixedColumnsIndex}):after {\n      left: 0;\n      transform: translate(-100%);\n      ${fixedColumnShadow};\n\n      ${\n        scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle\n          ? endFixedColumnShadow\n          : ''\n      };\n    };\n  `}\n`;\n\nexport const WrapperBordered = styled(Wrapper)`\n  border: 1px solid ${grey.dark};\n  border-radius: 4px;\n`;\n\nexport const Head = styled.thead`\n  background-color: white;\n`;\n\nexport const Body = styled.tbody<{ fixedColumnsStyle?: string }>`\n  tr {\n    ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n  }\n\n  & + & > tr:first-child > td {\n    border-top: 1px solid ${grey.base};\n  }\n\n  tr:not(:first-child) > td {\n    border-top: 1px solid transparent;\n  }\n\n  &&& tr:hover td {\n    background-color: #ebf4fb; /* TODO: Remove magic hex value */\n  }\n`;\n\nexport const Foot = styled.tfoot`\n  & td {\n    background-color: ${grey.lightest};\n    padding: 1.5rem 1rem;\n    border-top: 1px solid ${blue.base};\n  }\n`;\n\nexport interface RowProps {\n  accentColor?: string;\n}\n\nexport const Row = styled.tr<RowProps>`\n  &.hidden {\n    visibility: collapse;\n  }\n\n  ${({ accentColor }) =>\n    accentColor &&\n    `\n    & > td:first-child::before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      width: 4px;\n      background-color: ${accentColor};  \n    }\n  `}\n`;\n\nexport interface CellProps {\n  align?: 'left' | 'center' | 'right';\n  grow?: boolean;\n}\n\nexport const Cell = styled.td<CellProps>`\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: ${({ align }) => align || 'left'};\n  background-color: white;\n\n  font-family: ${text.bodySmall.fontFamily};\n  font-size: ${text.bodySmall.fontSize};\n  font-weight: ${text.bodySmall.fontWeight};\n  color: ${text.bodySmall.color};\n  line-height: ${sizes.base};\n\n  width: ${({ grow }) => (grow ? '100%' : 'auto')};\n\n  & > * {\n    vertical-align: middle;\n  }\n`;\n\nexport const HeaderCell = styled(Cell).attrs({\n  as: 'th',\n})`\n  user-select: none;\n  border-bottom: 1px solid ${grey.dark};\n\n  font-family: ${text.bodySmallBold.fontFamily};\n  font-size: ${text.bodySmallBold.fontSize};\n  font-weight: ${text.bodySmallBold.fontWeight};\n  color: ${text.bodySmallBold.color};\n\n  & span {\n    white-space: pre-line;\n  }\n\n  &.sortable:hover {\n    cursor: pointer;\n    background-color: ${grey.light};\n  }\n`;\n\nconst alignmentMap = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n};\n\nexport interface HeaderCellLayoutProps {\n  align?: 'left' | 'center' | 'right';\n}\n\nexport const HeaderCellLayout = styled.div<HeaderCellLayoutProps>`\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align }) => (align ? alignmentMap[align] : 'flex-start')};\n\n  & > * + * {\n    margin-left: 0.25rem;\n  }\n`;\n\ntype TablePropTypes = {\n  striped?: StripedType;\n  noWrap?: NoWrapType;\n  tableLoading?: boolean;\n  isFixedLayout?: boolean;\n};\n\nexport const Table = styled.table<TablePropTypes>`\n  width: 100%;\n  border-spacing: 0;\n  table-layout: ${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};\n\n  ${({ striped }) =>\n    striped &&\n    `\n    & ${Body}:nth-child(even) td {\n      background-color: ${grey.lightest};\n    }\n  `}\n\n  & * {\n    box-sizing: border-box;\n\n    ${({ tableLoading }) =>\n      tableLoading &&\n      `\n      user-select: none;\n      pointer-events: none;\n    `}\n  }\n\n  ${({ noWrap }) =>\n    noWrap &&\n    `\n    & ${HeaderCell}, & ${HeaderCell} span {\n      white-space: nowrap;\n    }\n  `}\n`;\n\nexport const Footer = styled.tfoot<{ fixedColumnsStyle?: string }>`\n  tr {\n    ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n  }\n\n  & ${Cell} {\n    border-top: 1px solid ${grey.dark};\n    background-color: ${grey.lightest};\n    padding-top: ${sizes.base};\n    padding-bottom: ${sizes.base};\n    line-height: 2rem;\n  }\n`;\n\nexport const StickyHeaderWrapper = styled.div`\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n`;\n\nexport const FakeHeaderTable = styled(Table)``;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/LegacyDataTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { NoWrapType, StripedType } from './utils/types';\nimport { ScrollPosition } from './utils/constants';\n\nconst { text, sizes } = theme;\nconst { blue } = theme.colors.secondary;\nconst { grey } = theme.colors.neutral;\nconst { scrollbar } = theme.colors.system;\n\nconst fixedColumnShadow = `\n  position: absolute;\n  top: 0;\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: box-shadow .3s;\n`;\n\nconst startFixedColumnShadow = `\n  box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\nconst endFixedColumnShadow = `\n  box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\ntype WrapperPropTypes = {\n  scrollDisabled: boolean;\n  scrollPosition?: ScrollPosition;\n  lastStartFixedColumnsIndex?: number;\n  firstEndFixedColumnsIndex?: number;\n  showScrollbar?: boolean;\n};\n\nexport const TooltipContent = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const Wrapper = styled.div<WrapperPropTypes>`\n  width: 100%;\n  overflow-x: ${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid ${grey.dark};\n  border-bottom: 1px solid ${grey.dark};\n\n  ${({ showScrollbar }) =>\n    showScrollbar\n      ? `\n    scrollbar-width: auto;\n\n    &::-webkit-scrollbar {\n      margin-top: 10px;\n      width: 6px;\n      height: 6px;\n    }\n    \n    &::-webkit-scrollbar-track {\n      background: ${scrollbar.background}; \n    }\n    \n    &::-webkit-scrollbar-thumb {\n      background: ${scrollbar.thumb};\n      border-radius: 4px; \n    }\n    `\n      : ''}\n\n  ${({ scrollDisabled, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, scrollPosition }) =>\n    scrollDisabled\n      ? ''\n      : `\n    td:nth-child(${lastStartFixedColumnsIndex}):after,\n    th:nth-child(${lastStartFixedColumnsIndex}):after {\n      right: 0;\n      transform: translate(100%);\n      ${fixedColumnShadow};\n\n      ${\n        scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end\n          ? startFixedColumnShadow\n          : ''\n      };\n    };\n\n    td:nth-last-child(${firstEndFixedColumnsIndex}):after,\n    th:nth-last-child(${firstEndFixedColumnsIndex}):after {\n      left: 0;\n      transform: translate(-100%);\n      ${fixedColumnShadow};\n\n      ${\n        scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle\n          ? endFixedColumnShadow\n          : ''\n      };\n    };\n  `}\n`;\n\nexport const WrapperBordered = styled(Wrapper)`\n  border: 1px solid ${grey.dark};\n  border-radius: 4px;\n`;\n\nexport const Head = styled.thead`\n  background-color: white;\n`;\n\nexport const Body = styled.tbody<{ fixedColumnsStyle?: string }>`\n  tr {\n    ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n  }\n\n  & + & > tr:first-child > td {\n    border-top: 1px solid ${grey.base};\n  }\n\n  tr:not(:first-child) > td {\n    border-top: 1px solid transparent;\n  }\n\n  &&& tr:hover td {\n    background-color: #ebf4fb; /* TODO: Remove magic hex value */\n  }\n`;\n\nexport const Foot = styled.tfoot`\n  & td {\n    background-color: ${grey.lightest};\n    padding: 1.5rem 1rem;\n    border-top: 1px solid ${blue.base};\n  }\n`;\n\nexport interface RowProps {\n  accentColor?: string;\n}\n\nexport const Row = styled.tr<RowProps>`\n  &.hidden {\n    visibility: collapse;\n  }\n\n  ${({ accentColor }) =>\n    accentColor &&\n    `\n    & > td:first-child::before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      width: 4px;\n      background-color: ${accentColor};  \n    }\n  `}\n`;\n\nexport interface CellProps {\n  align?: 'left' | 'center' | 'right';\n  grow?: boolean;\n}\n\nexport const Cell = styled.td<CellProps>`\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: ${({ align }) => align || 'left'};\n  background-color: white;\n\n  font-family: ${text.bodySmall.fontFamily};\n  font-size: ${text.bodySmall.fontSize};\n  font-weight: ${text.bodySmall.fontWeight};\n  color: ${text.bodySmall.color};\n  line-height: ${sizes.base};\n\n  width: ${({ grow }) => (grow ? '100%' : 'auto')};\n\n  & > * {\n    vertical-align: middle;\n  }\n`;\n\nexport const HeaderCell = styled(Cell).attrs({\n  as: 'th',\n})`\n  user-select: none;\n  border-bottom: 1px solid ${grey.dark};\n\n  font-family: ${text.bodySmallBold.fontFamily};\n  font-size: ${text.bodySmallBold.fontSize};\n  font-weight: ${text.bodySmallBold.fontWeight};\n  color: ${text.bodySmallBold.color};\n\n  & span {\n    white-space: pre-line;\n  }\n\n  &.sortable:hover {\n    cursor: pointer;\n    background-color: ${grey.light};\n  }\n`;\n\nconst alignmentMap = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n};\n\nexport interface HeaderCellLayoutProps {\n  align?: 'left' | 'center' | 'right';\n}\n\nexport const HeaderCellLayout = styled.div<HeaderCellLayoutProps>`\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align }) => (align ? alignmentMap[align] : 'flex-start')};\n\n  & > * + * {\n    margin-left: 0.25rem;\n  }\n`;\n\ntype TablePropTypes = {\n  striped?: StripedType;\n  noWrap?: NoWrapType;\n  tableLoading?: boolean;\n  isFixedLayout?: boolean;\n};\n\nexport const Table = styled.table<TablePropTypes>`\n  width: 100%;\n  border-spacing: 0;\n  table-layout: ${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};\n\n  ${({ striped }) =>\n    striped &&\n    `\n    & ${Body}:nth-child(even) td {\n      background-color: ${grey.lightest};\n    }\n  `}\n\n  & * {\n    box-sizing: border-box;\n\n    ${({ tableLoading }) =>\n      tableLoading &&\n      `\n      user-select: none;\n      pointer-events: none;\n    `}\n  }\n\n  ${({ noWrap }) =>\n    noWrap &&\n    `\n    & ${HeaderCell}, & ${HeaderCell} span {\n      white-space: nowrap;\n    }\n  `}\n`;\n\nexport const Footer = styled.tfoot<{ fixedColumnsStyle?: string }>`\n  tr {\n    ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n  }\n\n  & ${Cell} {\n    border-top: 1px solid ${grey.dark};\n    background-color: ${grey.lightest};\n    padding-top: ${sizes.base};\n    padding-bottom: ${sizes.base};\n    line-height: 2rem;\n  }\n`;\n\nexport const StickyHeaderWrapper = styled.div`\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n`;\n\nexport const FakeHeaderTable = styled(Table)``;\n"],"names":[],"mappings":"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"}

package/dist/components/LoginWithAmazonButton/styled.cjs

@@ -6,7 +6,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const LoginButton = styled__default.default.button.withConfig({ displayName: "vui--LoginButton", componentId: "vui--9ns5xb" }) `background:none;border:none;padding:0;cursor:pointer;img{width:156px;height:32px;}`;
+const LoginButton = styled__default.default.button.withConfig({ displayName: "vui--LoginButton", componentId: "vui--wl2n5a" }) `background:none;border:none;padding:0;cursor:pointer;img{width:156px;height:32px;}`;
 
 exports.LoginButton = LoginButton;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/LoginWithAmazonButton/styled.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const LoginButton = styled.button.withConfig({ displayName: "vui--LoginButton", componentId: "vui--9ns5xb" }) `background:none;border:none;padding:0;cursor:pointer;img{width:156px;height:32px;}`;
+const LoginButton = styled.button.withConfig({ displayName: "vui--LoginButton", componentId: "vui--wl2n5a" }) `background:none;border:none;padding:0;cursor:pointer;img{width:156px;height:32px;}`;
 
 export { LoginButton };
 //# sourceMappingURL=styled.js.map

package/dist/components/Modal/components/Dialog/styled.cjs

@@ -35,7 +35,7 @@ const stylesByType = {
 const StyledDialog = styled__default.default(framerMotion.motion.dialog).attrs(({ displayMode }) => ({
     ...animations[displayMode],
     transition: { type: 'tween', duration: 0.25 },
-})).withConfig({ displayName: "vui--StyledDialog", componentId: "vui--1ohvs0u" }) `${baseStyles.baseModalStyles} ${({ displayMode }) => stylesByType[displayMode]} ${({ appearance }) => appearance === 'secondary' &&
+})).withConfig({ displayName: "vui--StyledDialog", componentId: "vui--hfuefb" }) `${baseStyles.baseModalStyles} ${({ displayMode }) => stylesByType[displayMode]} ${({ appearance }) => appearance === 'secondary' &&
     `
     &::backdrop {
       animation: none;

package/dist/components/Modal/components/Dialog/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../../src/components/Modal/components/Dialog/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'framer-motion';\nimport { ModalAppearance, ModalTypes, ModalVariants } from '../../types';\nimport { leftDrawerStyles, modalStyles, rightDrawerStyles } from './styles/modalTypeStyles';\nimport { baseModalStyles } from './styles/baseStyles';\n\n// Animation configurations\nconst animations = {\n  leftDrawer: {\n    initial: { opacity: 0, x: -300, bounce: 0 },\n    exit: { opacity: 0, x: -300, bounce: 0 },\n    animate: { opacity: 1, x: 0, bounce: 0 },\n  },\n  rightDrawer: {\n    initial: { opacity: 0, x: 300, bounce: 0 },\n    exit: { opacity: 0, x: 300, bounce: 0 },\n    animate: { opacity: 1, x: 0, bounce: 0 },\n  },\n  modal: {\n    initial: { opacity: 0, y: -50, bounce: 0 },\n    exit: { opacity: 0, y: -50, bounce: 0 },\n    animate: { opacity: 1, y: 0, bounce: 0 },\n  },\n};\n\nconst stylesByType = {\n  modal: modalStyles,\n  leftDrawer: leftDrawerStyles,\n  rightDrawer: rightDrawerStyles,\n};\n\nexport const StyledDialog = styled(motion.dialog).attrs<{ displayMode: ModalTypes }>(\n  ({ displayMode }) => ({\n    ...animations[displayMode],\n    transition: { type: 'tween', duration: 0.25 },\n  }),\n)<{ variant: ModalVariants; displayMode: ModalTypes; appearance?: ModalAppearance }>`\n  ${baseModalStyles}\n  ${({ displayMode }) => stylesByType[displayMode]}\n\n  ${({ appearance }) =>\n    appearance === 'secondary' &&\n    `\n    &::backdrop {\n      animation: none;\n      opacity: 0;\n    }\n  `}\n`;\n"],"names":["modalStyles","leftDrawerStyles","rightDrawerStyles","styled","motion","baseModalStyles"],"mappings":";;;;;;;;;;;AAMA;AACA,MAAM,UAAU,GAAG;AACjB,IAAA,UAAU,EAAE;AACV,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AAC3C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AACxC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;CACF;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,KAAK,EAAEA,2BAAW;AAClB,IAAA,UAAU,EAAEC,gCAAgB;AAC5B,IAAA,WAAW,EAAEC,iCAAiB;CAC/B;MAEY,YAAY,GAAGC,uBAAM,CAACC,mBAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CACrD,CAAC,EAAE,WAAW,EAAE,MAAM;IACpB,GAAG,UAAU,CAAC,WAAW,CAAC;IAC1B,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE;CAC9C,CAAC,CACH,CACG,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAAAC,0BAAe,CACf,CAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,YAAY,CAAC,WAAW,CAAC,CAE9C,CAAA,EAAA,CAAC,EAAE,UAAU,EAAE,KACf,UAAU,KAAK,WAAW;AAC1B,IAAA;;;;;AAKD,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../../../src/components/Modal/components/Dialog/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'framer-motion';\nimport { ModalAppearance, ModalTypes, ModalVariants } from '../../types';\nimport { leftDrawerStyles, modalStyles, rightDrawerStyles } from './styles/modalTypeStyles';\nimport { baseModalStyles } from './styles/baseStyles';\n\n// Animation configurations\nconst animations = {\n  leftDrawer: {\n    initial: { opacity: 0, x: -300, bounce: 0 },\n    exit: { opacity: 0, x: -300, bounce: 0 },\n    animate: { opacity: 1, x: 0, bounce: 0 },\n  },\n  rightDrawer: {\n    initial: { opacity: 0, x: 300, bounce: 0 },\n    exit: { opacity: 0, x: 300, bounce: 0 },\n    animate: { opacity: 1, x: 0, bounce: 0 },\n  },\n  modal: {\n    initial: { opacity: 0, y: -50, bounce: 0 },\n    exit: { opacity: 0, y: -50, bounce: 0 },\n    animate: { opacity: 1, y: 0, bounce: 0 },\n  },\n};\n\nconst stylesByType = {\n  modal: modalStyles,\n  leftDrawer: leftDrawerStyles,\n  rightDrawer: rightDrawerStyles,\n};\n\nexport const StyledDialog = styled(motion.dialog).attrs<{ displayMode: ModalTypes }>(\n  ({ displayMode }) => ({\n    ...animations[displayMode],\n    transition: { type: 'tween', duration: 0.25 },\n  }),\n)<{ variant: ModalVariants; displayMode: ModalTypes; appearance?: ModalAppearance }>`\n  ${baseModalStyles}\n  ${({ displayMode }) => stylesByType[displayMode]}\n\n  ${({ appearance }) =>\n    appearance === 'secondary' &&\n    `\n    &::backdrop {\n      animation: none;\n      opacity: 0;\n    }\n  `}\n`;\n"],"names":["modalStyles","leftDrawerStyles","rightDrawerStyles","styled","motion","baseModalStyles"],"mappings":";;;;;;;;;;;AAMA;AACA,MAAM,UAAU,GAAG;AACjB,IAAA,UAAU,EAAE;AACV,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AAC3C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AACxC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;CACF;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,KAAK,EAAEA,2BAAW;AAClB,IAAA,UAAU,EAAEC,gCAAgB;AAC5B,IAAA,WAAW,EAAEC,iCAAiB;CAC/B;MAEY,YAAY,GAAGC,uBAAM,CAACC,mBAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CACrD,CAAC,EAAE,WAAW,EAAE,MAAM;IACpB,GAAG,UAAU,CAAC,WAAW,CAAC;IAC1B,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE;CAC9C,CAAC,CACH,CACG,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAAAC,0BAAe,CACf,CAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,YAAY,CAAC,WAAW,CAAC,CAE9C,CAAA,EAAA,CAAC,EAAE,UAAU,EAAE,KACf,UAAU,KAAK,WAAW;AAC1B,IAAA;;;;;AAKD,EAAA,CAAA,CAAA;;;;"}

package/dist/components/Modal/components/Dialog/styled.js

@@ -29,7 +29,7 @@ const stylesByType = {
 const StyledDialog = styled(motion.dialog).attrs(({ displayMode }) => ({
     ...animations[displayMode],
     transition: { type: 'tween', duration: 0.25 },
-})).withConfig({ displayName: "vui--StyledDialog", componentId: "vui--1ohvs0u" }) `${baseModalStyles} ${({ displayMode }) => stylesByType[displayMode]} ${({ appearance }) => appearance === 'secondary' &&
+})).withConfig({ displayName: "vui--StyledDialog", componentId: "vui--hfuefb" }) `${baseModalStyles} ${({ displayMode }) => stylesByType[displayMode]} ${({ appearance }) => appearance === 'secondary' &&
     `
     &::backdrop {
       animation: none;

package/dist/components/Modal/components/Dialog/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../../src/components/Modal/components/Dialog/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'framer-motion';\nimport { ModalAppearance, ModalTypes, ModalVariants } from '../../types';\nimport { leftDrawerStyles, modalStyles, rightDrawerStyles } from './styles/modalTypeStyles';\nimport { baseModalStyles } from './styles/baseStyles';\n\n// Animation configurations\nconst animations = {\n  leftDrawer: {\n    initial: { opacity: 0, x: -300, bounce: 0 },\n    exit: { opacity: 0, x: -300, bounce: 0 },\n    animate: { opacity: 1, x: 0, bounce: 0 },\n  },\n  rightDrawer: {\n    initial: { opacity: 0, x: 300, bounce: 0 },\n    exit: { opacity: 0, x: 300, bounce: 0 },\n    animate: { opacity: 1, x: 0, bounce: 0 },\n  },\n  modal: {\n    initial: { opacity: 0, y: -50, bounce: 0 },\n    exit: { opacity: 0, y: -50, bounce: 0 },\n    animate: { opacity: 1, y: 0, bounce: 0 },\n  },\n};\n\nconst stylesByType = {\n  modal: modalStyles,\n  leftDrawer: leftDrawerStyles,\n  rightDrawer: rightDrawerStyles,\n};\n\nexport const StyledDialog = styled(motion.dialog).attrs<{ displayMode: ModalTypes }>(\n  ({ displayMode }) => ({\n    ...animations[displayMode],\n    transition: { type: 'tween', duration: 0.25 },\n  }),\n)<{ variant: ModalVariants; displayMode: ModalTypes; appearance?: ModalAppearance }>`\n  ${baseModalStyles}\n  ${({ displayMode }) => stylesByType[displayMode]}\n\n  ${({ appearance }) =>\n    appearance === 'secondary' &&\n    `\n    &::backdrop {\n      animation: none;\n      opacity: 0;\n    }\n  `}\n`;\n"],"names":[],"mappings":";;;;;AAMA;AACA,MAAM,UAAU,GAAG;AACjB,IAAA,UAAU,EAAE;AACV,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AAC3C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AACxC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;CACF;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,UAAU,EAAE,gBAAgB;AAC5B,IAAA,WAAW,EAAE,iBAAiB;CAC/B;MAEY,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CACrD,CAAC,EAAE,WAAW,EAAE,MAAM;IACpB,GAAG,UAAU,CAAC,WAAW,CAAC;IAC1B,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE;CAC9C,CAAC,CACH,CACG,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAAA,eAAe,CACf,CAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,YAAY,CAAC,WAAW,CAAC,CAE9C,CAAA,EAAA,CAAC,EAAE,UAAU,EAAE,KACf,UAAU,KAAK,WAAW;AAC1B,IAAA;;;;;AAKD,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../../src/components/Modal/components/Dialog/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'framer-motion';\nimport { ModalAppearance, ModalTypes, ModalVariants } from '../../types';\nimport { leftDrawerStyles, modalStyles, rightDrawerStyles } from './styles/modalTypeStyles';\nimport { baseModalStyles } from './styles/baseStyles';\n\n// Animation configurations\nconst animations = {\n  leftDrawer: {\n    initial: { opacity: 0, x: -300, bounce: 0 },\n    exit: { opacity: 0, x: -300, bounce: 0 },\n    animate: { opacity: 1, x: 0, bounce: 0 },\n  },\n  rightDrawer: {\n    initial: { opacity: 0, x: 300, bounce: 0 },\n    exit: { opacity: 0, x: 300, bounce: 0 },\n    animate: { opacity: 1, x: 0, bounce: 0 },\n  },\n  modal: {\n    initial: { opacity: 0, y: -50, bounce: 0 },\n    exit: { opacity: 0, y: -50, bounce: 0 },\n    animate: { opacity: 1, y: 0, bounce: 0 },\n  },\n};\n\nconst stylesByType = {\n  modal: modalStyles,\n  leftDrawer: leftDrawerStyles,\n  rightDrawer: rightDrawerStyles,\n};\n\nexport const StyledDialog = styled(motion.dialog).attrs<{ displayMode: ModalTypes }>(\n  ({ displayMode }) => ({\n    ...animations[displayMode],\n    transition: { type: 'tween', duration: 0.25 },\n  }),\n)<{ variant: ModalVariants; displayMode: ModalTypes; appearance?: ModalAppearance }>`\n  ${baseModalStyles}\n  ${({ displayMode }) => stylesByType[displayMode]}\n\n  ${({ appearance }) =>\n    appearance === 'secondary' &&\n    `\n    &::backdrop {\n      animation: none;\n      opacity: 0;\n    }\n  `}\n`;\n"],"names":[],"mappings":";;;;;AAMA;AACA,MAAM,UAAU,GAAG;AACjB,IAAA,UAAU,EAAE;AACV,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AAC3C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AACxC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;CACF;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,UAAU,EAAE,gBAAgB;AAC5B,IAAA,WAAW,EAAE,iBAAiB;CAC/B;MAEY,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CACrD,CAAC,EAAE,WAAW,EAAE,MAAM;IACpB,GAAG,UAAU,CAAC,WAAW,CAAC;IAC1B,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE;CAC9C,CAAC,CACH,CACG,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAAA,eAAe,CACf,CAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,YAAY,CAAC,WAAW,CAAC,CAE9C,CAAA,EAAA,CAAC,EAAE,UAAU,EAAE,KACf,UAAU,KAAK,WAAW;AAC1B,IAAA;;;;;AAKD,EAAA,CAAA,CAAA;;;;"}

package/dist/components/Modal/components/styled.cjs

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 const NonScrollableBody = styled.createGlobalStyle `body{overflow:hidden;scrollbar-gutter:stable;}`;
-const MainSection = styled__default.default.section.withConfig({ displayName: "vui--MainSection", componentId: "vui--1ox4j2c" }) `flex:1;overflow-y:auto;${({ fullBleed }) => !fullBleed && `padding: 0 ${index.theme.sizes.md};`} ${({ isScrollable }) => isScrollable &&
+const MainSection = styled__default.default.section.withConfig({ displayName: "vui--MainSection", componentId: "vui--or7d" }) `flex:1;overflow-y:auto;${({ fullBleed }) => !fullBleed && `padding: 0 ${index.theme.sizes.md};`} ${({ isScrollable }) => isScrollable &&
     `
     & + ${Card.Card.Footer} {
       box-shadow: 0px 10px 15px 0px ${index.theme.colors.neutral.ink.dark};

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Modal/components/styled.ts"],"sourcesContent":["import styled, { createGlobalStyle } from 'styled-components';\nimport { Card } from '../../Card';\nimport { theme } from '../../../theme';\n\nexport const NonScrollableBody = createGlobalStyle`\n  body {\n    overflow: hidden;\n    scrollbar-gutter: stable;\n  }\n`;\n\nexport const MainSection = styled.section<{ isScrollable: boolean; fullBleed: boolean }>`\n  flex: 1;\n  overflow-y: auto;\n\n  ${({ fullBleed }) => !fullBleed && `padding: 0 ${theme.sizes.md};`}\n  ${({ isScrollable }) =>\n    isScrollable &&\n    `\n    & + ${Card.Footer} {\n      box-shadow: 0px 10px 15px 0px ${theme.colors.neutral.ink.dark};\n    }\n  `}\n`;\n"],"names":["createGlobalStyle","styled","theme","Card"],"mappings":";;;;;;;;;;AAIa,MAAA,iBAAiB,GAAGA,wBAAiB;AAO3C,MAAM,WAAW,GAAGC,uBAAM,CAAC,OAAO,CAIrC,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uBAAA,EAAA,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,CAAc,WAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,CAAG,CAChE,CAAA,EAAA,CAAC,EAAE,YAAY,EAAE,KACjB,YAAY;AACZ,IAAA;AACM,QAAA,EAAAC,SAAI,CAAC,MAAM,CAAA;AACiB,oCAAA,EAAAD,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;AAEhE,EAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Modal/components/styled.ts"],"sourcesContent":["import styled, { createGlobalStyle } from 'styled-components';\nimport { Card } from '../../Card';\nimport { theme } from '../../../theme';\n\nexport const NonScrollableBody = createGlobalStyle`\n  body {\n    overflow: hidden;\n    scrollbar-gutter: stable;\n  }\n`;\n\nexport const MainSection = styled.section<{ isScrollable: boolean; fullBleed: boolean }>`\n  flex: 1;\n  overflow-y: auto;\n\n  ${({ fullBleed }) => !fullBleed && `padding: 0 ${theme.sizes.md};`}\n  ${({ isScrollable }) =>\n    isScrollable &&\n    `\n    & + ${Card.Footer} {\n      box-shadow: 0px 10px 15px 0px ${theme.colors.neutral.ink.dark};\n    }\n  `}\n`;\n"],"names":["createGlobalStyle","styled","theme","Card"],"mappings":";;;;;;;;;;AAIa,MAAA,iBAAiB,GAAGA,wBAAiB;AAO3C,MAAM,WAAW,GAAGC,uBAAM,CAAC,OAAO,CAIrC,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,WAAA,EAAA,CAAA,CAAA,CAAA,uBAAA,EAAA,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,CAAc,WAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,CAAG,CAChE,CAAA,EAAA,CAAC,EAAE,YAAY,EAAE,KACjB,YAAY;AACZ,IAAA;AACM,QAAA,EAAAC,SAAI,CAAC,MAAM,CAAA;AACiB,oCAAA,EAAAD,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;AAEhE,EAAA,CAAA,CAAA;;;;;"}

package/dist/components/Modal/components/styled.js

@@ -3,7 +3,7 @@ import { Card } from '../../Card/Card.js';
 import { theme } from '../../../theme/index.js';
 
 const NonScrollableBody = createGlobalStyle `body{overflow:hidden;scrollbar-gutter:stable;}`;
-const MainSection = styled.section.withConfig({ displayName: "vui--MainSection", componentId: "vui--1ox4j2c" }) `flex:1;overflow-y:auto;${({ fullBleed }) => !fullBleed && `padding: 0 ${theme.sizes.md};`} ${({ isScrollable }) => isScrollable &&
+const MainSection = styled.section.withConfig({ displayName: "vui--MainSection", componentId: "vui--or7d" }) `flex:1;overflow-y:auto;${({ fullBleed }) => !fullBleed && `padding: 0 ${theme.sizes.md};`} ${({ isScrollable }) => isScrollable &&
     `
     & + ${Card.Footer} {
       box-shadow: 0px 10px 15px 0px ${theme.colors.neutral.ink.dark};

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/Modal/components/styled.ts"],"sourcesContent":["import styled, { createGlobalStyle } from 'styled-components';\nimport { Card } from '../../Card';\nimport { theme } from '../../../theme';\n\nexport const NonScrollableBody = createGlobalStyle`\n  body {\n    overflow: hidden;\n    scrollbar-gutter: stable;\n  }\n`;\n\nexport const MainSection = styled.section<{ isScrollable: boolean; fullBleed: boolean }>`\n  flex: 1;\n  overflow-y: auto;\n\n  ${({ fullBleed }) => !fullBleed && `padding: 0 ${theme.sizes.md};`}\n  ${({ isScrollable }) =>\n    isScrollable &&\n    `\n    & + ${Card.Footer} {\n      box-shadow: 0px 10px 15px 0px ${theme.colors.neutral.ink.dark};\n    }\n  `}\n`;\n"],"names":[],"mappings":";;;;AAIa,MAAA,iBAAiB,GAAG,iBAAiB;AAO3C,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAIrC,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uBAAA,EAAA,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,CAAc,WAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,CAAG,CAChE,CAAA,EAAA,CAAC,EAAE,YAAY,EAAE,KACjB,YAAY;AACZ,IAAA;AACM,QAAA,EAAA,IAAI,CAAC,MAAM,CAAA;AACiB,oCAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;AAEhE,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/Modal/components/styled.ts"],"sourcesContent":["import styled, { createGlobalStyle } from 'styled-components';\nimport { Card } from '../../Card';\nimport { theme } from '../../../theme';\n\nexport const NonScrollableBody = createGlobalStyle`\n  body {\n    overflow: hidden;\n    scrollbar-gutter: stable;\n  }\n`;\n\nexport const MainSection = styled.section<{ isScrollable: boolean; fullBleed: boolean }>`\n  flex: 1;\n  overflow-y: auto;\n\n  ${({ fullBleed }) => !fullBleed && `padding: 0 ${theme.sizes.md};`}\n  ${({ isScrollable }) =>\n    isScrollable &&\n    `\n    & + ${Card.Footer} {\n      box-shadow: 0px 10px 15px 0px ${theme.colors.neutral.ink.dark};\n    }\n  `}\n`;\n"],"names":[],"mappings":";;;;AAIa,MAAA,iBAAiB,GAAG,iBAAiB;AAO3C,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAIrC,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,WAAA,EAAA,CAAA,CAAA,CAAA,uBAAA,EAAA,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,CAAc,WAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,CAAG,CAChE,CAAA,EAAA,CAAC,EAAE,YAAY,EAAE,KACjB,YAAY;AACZ,IAAA;AACM,QAAA,EAAA,IAAI,CAAC,MAAM,CAAA;AACiB,oCAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;AAEhE,EAAA,CAAA,CAAA;;;;"}

package/dist/components/Pagination/styled.cjs

@@ -10,9 +10,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const PageLimitContainer = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--PageLimitContainer", componentId: "vui--11yg0z2" }) `width:${index.theme.sizes.lg};height:30px;background-color:${index.theme.colors.neutral.grey.light};border:1px solid ${index.theme.colors.neutral.grey.base};border-radius:${index.theme.sizes.xs};`;
-const PaginationButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--PaginationButton", componentId: "vui--1xoa6c5" }) `color:${index.theme.colors.neutral.ink.base};width:32px;height:32px;svg{width:24px;height:24px;}`;
-const PageInput = styled__default.default(index$1.TextField).withConfig({ displayName: "vui--PageInput", componentId: "vui--vpfeol" }) `&[type='number']{width:5.5ch;}`;
+const PageLimitContainer = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--PageLimitContainer", componentId: "vui--1psd9g8" }) `width:${index.theme.sizes.lg};height:30px;background-color:${index.theme.colors.neutral.grey.light};border:1px solid ${index.theme.colors.neutral.grey.base};border-radius:${index.theme.sizes.xs};`;
+const PaginationButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--PaginationButton", componentId: "vui--oolvks" }) `color:${index.theme.colors.neutral.ink.base};width:32px;height:32px;svg{width:24px;height:24px;}`;
+const PageInput = styled__default.default(index$1.TextField).withConfig({ displayName: "vui--PageInput", componentId: "vui--jjraff" }) `&[type='number']{width:5.5ch;}`;
 
 exports.PageInput = PageInput;
 exports.PageLimitContainer = PageLimitContainer;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Pagination/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { TextField } from '../TextField';\n\nexport const PageLimitContainer = styled(Stack)`\n  width: ${theme.sizes.lg};\n  height: 30px;\n  background-color: ${theme.colors.neutral.grey.light};\n\n  border: 1px solid ${theme.colors.neutral.grey.base};\n  border-radius: ${theme.sizes.xs};\n`;\n\nexport const PaginationButton = styled(Button)`\n  color: ${theme.colors.neutral.ink.base};\n  width: 32px;\n  height: 32px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const PageInput = styled(TextField)`\n  &[type='number'] {\n    width: 5.5ch;\n  }\n`;\n"],"names":["styled","Stack","theme","Button","TextField"],"mappings":";;;;;;;;;;;;AAMa,MAAA,kBAAkB,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACpCC,WAAK,CAAC,KAAK,CAAC,EAAE,iCAEHA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAE/BA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,kBACjCA,WAAK,CAAC,KAAK,CAAC,EAAE;AAGpB,MAAA,gBAAgB,GAAGF,uBAAM,CAACG,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACnCD,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;MAU3B,SAAS,GAAGF,uBAAM,CAACI,iBAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8BAAA;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Pagination/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { TextField } from '../TextField';\n\nexport const PageLimitContainer = styled(Stack)`\n  width: ${theme.sizes.lg};\n  height: 30px;\n  background-color: ${theme.colors.neutral.grey.light};\n\n  border: 1px solid ${theme.colors.neutral.grey.base};\n  border-radius: ${theme.sizes.xs};\n`;\n\nexport const PaginationButton = styled(Button)`\n  color: ${theme.colors.neutral.ink.base};\n  width: 32px;\n  height: 32px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const PageInput = styled(TextField)`\n  &[type='number'] {\n    width: 5.5ch;\n  }\n`;\n"],"names":["styled","Stack","theme","Button","TextField"],"mappings":";;;;;;;;;;;;AAMa,MAAA,kBAAkB,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACpCC,WAAK,CAAC,KAAK,CAAC,EAAE,iCAEHA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAE/BA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,kBACjCA,WAAK,CAAC,KAAK,CAAC,EAAE;AAGpB,MAAA,gBAAgB,GAAGF,uBAAM,CAACG,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACnCD,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;MAU3B,SAAS,GAAGF,uBAAM,CAACI,iBAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8BAAA;;;;;;"}

package/dist/components/Pagination/styled.js

@@ -4,9 +4,9 @@ import { Stack } from '../Stack/Stack.js';
 import { Button } from '../Button/Button.js';
 import { TextField } from '../TextField/index.js';
 
-const PageLimitContainer = styled(Stack).withConfig({ displayName: "vui--PageLimitContainer", componentId: "vui--11yg0z2" }) `width:${theme.sizes.lg};height:30px;background-color:${theme.colors.neutral.grey.light};border:1px solid ${theme.colors.neutral.grey.base};border-radius:${theme.sizes.xs};`;
-const PaginationButton = styled(Button).withConfig({ displayName: "vui--PaginationButton", componentId: "vui--1xoa6c5" }) `color:${theme.colors.neutral.ink.base};width:32px;height:32px;svg{width:24px;height:24px;}`;
-const PageInput = styled(TextField).withConfig({ displayName: "vui--PageInput", componentId: "vui--vpfeol" }) `&[type='number']{width:5.5ch;}`;
+const PageLimitContainer = styled(Stack).withConfig({ displayName: "vui--PageLimitContainer", componentId: "vui--1psd9g8" }) `width:${theme.sizes.lg};height:30px;background-color:${theme.colors.neutral.grey.light};border:1px solid ${theme.colors.neutral.grey.base};border-radius:${theme.sizes.xs};`;
+const PaginationButton = styled(Button).withConfig({ displayName: "vui--PaginationButton", componentId: "vui--oolvks" }) `color:${theme.colors.neutral.ink.base};width:32px;height:32px;svg{width:24px;height:24px;}`;
+const PageInput = styled(TextField).withConfig({ displayName: "vui--PageInput", componentId: "vui--jjraff" }) `&[type='number']{width:5.5ch;}`;
 
 export { PageInput, PageLimitContainer, PaginationButton };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Pagination/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { TextField } from '../TextField';\n\nexport const PageLimitContainer = styled(Stack)`\n  width: ${theme.sizes.lg};\n  height: 30px;\n  background-color: ${theme.colors.neutral.grey.light};\n\n  border: 1px solid ${theme.colors.neutral.grey.base};\n  border-radius: ${theme.sizes.xs};\n`;\n\nexport const PaginationButton = styled(Button)`\n  color: ${theme.colors.neutral.ink.base};\n  width: 32px;\n  height: 32px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const PageInput = styled(TextField)`\n  &[type='number'] {\n    width: 5.5ch;\n  }\n`;\n"],"names":[],"mappings":";;;;;;AAMa,MAAA,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACpC,KAAK,CAAC,KAAK,CAAC,EAAE,iCAEH,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAE/B,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,kBACjC,KAAK,CAAC,KAAK,CAAC,EAAE;AAGpB,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACnC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;MAU3B,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8BAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Pagination/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { TextField } from '../TextField';\n\nexport const PageLimitContainer = styled(Stack)`\n  width: ${theme.sizes.lg};\n  height: 30px;\n  background-color: ${theme.colors.neutral.grey.light};\n\n  border: 1px solid ${theme.colors.neutral.grey.base};\n  border-radius: ${theme.sizes.xs};\n`;\n\nexport const PaginationButton = styled(Button)`\n  color: ${theme.colors.neutral.ink.base};\n  width: 32px;\n  height: 32px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const PageInput = styled(TextField)`\n  &[type='number'] {\n    width: 5.5ch;\n  }\n`;\n"],"names":[],"mappings":";;;;;;AAMa,MAAA,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACpC,KAAK,CAAC,KAAK,CAAC,EAAE,iCAEH,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAE/B,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,kBACjC,KAAK,CAAC,KAAK,CAAC,EAAE;AAGpB,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACnC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;MAU3B,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8BAAA;;;;"}

package/dist/components/Popover/hooks/useHandleFocus.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
+var tabbableSelectors = require('../../../utils/tabbableSelectors.cjs');
 
-const TABBABLE_SELECTORS = 'input:not([disabled]), summary:not([disabled]), a[href]:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])';
 const useHandleFocus = ({ popperElement, anchorElement, onClose, disableFocusLock = false, }) => {
     /**
      * Focuses first element, when this gets rendered for the first time.
@@ -10,7 +10,7 @@ const useHandleFocus = ({ popperElement, anchorElement, onClose, disableFocusLoc
     React.useEffect(() => {
         if (!popperElement || disableFocusLock)
             return;
-        const focusableElements = popperElement.querySelectorAll(TABBABLE_SELECTORS);
+        const focusableElements = popperElement.querySelectorAll(tabbableSelectors.TABBABLE_SELECTORS);
         if (focusableElements.length < 1)
             return;
         setTimeout(() => {
@@ -28,7 +28,7 @@ const useHandleFocus = ({ popperElement, anchorElement, onClose, disableFocusLoc
             return;
         const focusWithinPopper = (event) => {
             if (event.key === 'Tab' && !event.shiftKey) {
-                const focusableElements = popperElement.querySelectorAll(TABBABLE_SELECTORS);
+                const focusableElements = popperElement.querySelectorAll(tabbableSelectors.TABBABLE_SELECTORS);
                 // When nothing is focusable within the popover, close popover and allow natural tab order.
                 if (focusableElements.length < 1) {
                     onClose();
@@ -49,7 +49,7 @@ const useHandleFocus = ({ popperElement, anchorElement, onClose, disableFocusLoc
      * popover, or forward past the last scrollable element within.
      */
     const handleFocusTrap = (event) => {
-        const focusableElements = popperElement.querySelectorAll(TABBABLE_SELECTORS);
+        const focusableElements = popperElement.querySelectorAll(tabbableSelectors.TABBABLE_SELECTORS);
         const firstElement = focusableElements[0];
         const lastElement = focusableElements[focusableElements.length - 1];
         // If shift tabbing (BACK) and on the first element, loop to last element.