npm - @veeqo/ui - Versions diffs - 10.0.0-beta.1 → 10.0.0-beta.2 - Mend

@veeqo/ui 10.0.0-beta.1 → 10.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (665) hide show

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

@@ -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--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;`;
+const SpecificStateContainer = styled(BaseContainer).withConfig({ displayName: "vui--SpecificStateContainer", componentId: "vui--e4a4yn" }) `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--1mtoe5h" }) `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--1p267dn" }) `margin-top:24px;`;
+const SubTitleText = styled(Text).withConfig({ displayName: "vui--SubTitleText", componentId: "vui--pd13c2" }) `margin-top:8px;`;
 export { EllipseContainer, SpecificStateContainer, SubTitleText, TitleText };
 //# sourceMappingURL=styled.js.map

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

	@@ -1 +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,~~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;;;;"}
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;;;;"}

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

@@ -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--1qfw372" }) `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--rcc63b" }) `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.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ClickableCell.cjs","sources":["../../../../src/components/LegacyDataTable/cells/ClickableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst ClickableButton = styled(CellButton)`\n color: ${theme.text.link.color};\n text-decoration: ${theme.text.link.textDecoration};\n`;\n\nexport interface ClickableCellProps extends CellProps {\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n children: React.ReactNode;\n}\n\nexport const ClickableCell = ({ onClick, children, ...otherProps }: ClickableCellProps) => (\n <Cell {...otherProps}>\n <ClickableButton onClick={onClick}>{children}</ClickableButton>\n </Cell>\n);\n"],"names":["styled","CellButton","theme","React","Cell"],"mappings":";;;;;;;;;;;;;AAMA,MAAM,eAAe,GAAGA,uBAAM,CAACC,mBAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,MAAA,EAC/BC,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CACX,iBAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAA,CAAA,CAClD;MAOY,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAsB,MACpFC,sBAAC,CAAA,aAAA,CAAAC,aAAI,OAAK,UAAU,EAAA;IAClBD,sBAAC,CAAA,aAAA,CAAA,eAAe,EAAC,EAAA,OAAO,EAAE,OAAO,IAAG,QAAQ,CAAmB,CAC1D;;;;"}
1	+ {"version":3,"file":"ClickableCell.cjs","sources":["../../../../src/components/LegacyDataTable/cells/ClickableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst ClickableButton = styled(CellButton)`\n color: ${theme.text.link.color};\n text-decoration: ${theme.text.link.textDecoration};\n`;\n\nexport interface ClickableCellProps extends CellProps {\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n children: React.ReactNode;\n}\n\nexport const ClickableCell = ({ onClick, children, ...otherProps }: ClickableCellProps) => (\n <Cell {...otherProps}>\n <ClickableButton onClick={onClick}>{children}</ClickableButton>\n </Cell>\n);\n"],"names":["styled","CellButton","theme","React","Cell"],"mappings":";;;;;;;;;;;;;AAMA,MAAM,eAAe,GAAGA,uBAAM,CAACC,mBAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAC/BC,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CACX,iBAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAA,CAAA,CAClD;MAOY,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAsB,MACpFC,sBAAC,CAAA,aAAA,CAAAC,aAAI,OAAK,UAAU,EAAA;IAClBD,sBAAC,CAAA,aAAA,CAAA,eAAe,EAAC,EAAA,OAAO,EAAE,OAAO,IAAG,QAAQ,CAAmB,CAC1D;;;;"}

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

@@ -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--1qfw372" }) `color:${theme.text.link.color};text-decoration:${theme.text.link.textDecoration};`;
+const ClickableButton = styled(CellButton).withConfig({ displayName: "vui--ClickableButton", componentId: "vui--rcc63b" }) `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/ClickableCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ClickableCell.js","sources":["../../../../src/components/LegacyDataTable/cells/ClickableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst ClickableButton = styled(CellButton)`\n color: ${theme.text.link.color};\n text-decoration: ${theme.text.link.textDecoration};\n`;\n\nexport interface ClickableCellProps extends CellProps {\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n children: React.ReactNode;\n}\n\nexport const ClickableCell = ({ onClick, children, ...otherProps }: ClickableCellProps) => (\n <Cell {...otherProps}>\n <ClickableButton onClick={onClick}>{children}</ClickableButton>\n </Cell>\n);\n"],"names":["React"],"mappings":";;;;;;AAMA,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,MAAA,EAC/B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CACX,iBAAA,EAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAA,CAAA,CAClD;MAOY,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAsB,MACpFA,cAAC,CAAA,aAAA,CAAA,IAAI,OAAK,UAAU,EAAA;IAClBA,cAAC,CAAA,aAAA,CAAA,eAAe,EAAC,EAAA,OAAO,EAAE,OAAO,IAAG,QAAQ,CAAmB,CAC1D;;;;"}
1	+ {"version":3,"file":"ClickableCell.js","sources":["../../../../src/components/LegacyDataTable/cells/ClickableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst ClickableButton = styled(CellButton)`\n color: ${theme.text.link.color};\n text-decoration: ${theme.text.link.textDecoration};\n`;\n\nexport interface ClickableCellProps extends CellProps {\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n children: React.ReactNode;\n}\n\nexport const ClickableCell = ({ onClick, children, ...otherProps }: ClickableCellProps) => (\n <Cell {...otherProps}>\n <ClickableButton onClick={onClick}>{children}</ClickableButton>\n </Cell>\n);\n"],"names":["React"],"mappings":";;;;;;AAMA,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAC/B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CACX,iBAAA,EAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAA,CAAA,CAClD;MAOY,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAsB,MACpFA,cAAC,CAAA,aAAA,CAAA,IAAI,OAAK,UAAU,EAAA;IAClBA,cAAC,CAAA,aAAA,CAAA,eAAe,EAAC,EAAA,OAAO,EAAE,OAAO,IAAG,QAAQ,CAAmB,CAC1D;;;;"}

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

@@ -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--1fqu167" }) `text-align:inherit;border-bottom:1px dotted black;`;
+const Content = styled__default.default.div.withConfig({ displayName: "vui--Content", componentId: "vui--1s5vas7" }) `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.js CHANGED Viewed

@@ -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--1fqu167" }) `text-align:inherit;border-bottom:1px dotted black;`;
+const Content = styled.div.withConfig({ displayName: "vui--Content", componentId: "vui--1s5vas7" }) `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/styled.cjs CHANGED Viewed

@@ -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--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};}`;
+const CellButton = styled__default.default.button.withConfig({ displayName: "vui--CellButton", componentId: "vui--8x2iud" }) `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.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../../src/components/LegacyDataTable/cells/styled.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\n\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const CellButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n font: inherit;\n\n display: inline-block;\n box-sizing: border-box;\n width: calc(100% + 1.5rem);\n margin: -0.75rem -0.75rem;\n padding: 0.75rem 0.75rem;\n text-align: inherit;\n line-height: ${theme.sizes.base};\n border-radius: ${theme.radius.base};\n\n &:hover {\n cursor: pointer;\n background-color: ${theme.colors.secondary.blue.lightest};\n }\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAAA;AAKO,MAAM,UAAU,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,wNAAA,EAYtBC,WAAK,CAAC,KAAK,CAAC,IAAI,CACd,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI,CAIZ,yCAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../../src/components/LegacyDataTable/cells/styled.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\n\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const CellButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n font: inherit;\n\n display: inline-block;\n box-sizing: border-box;\n width: calc(100% + 1.5rem);\n margin: -0.75rem -0.75rem;\n padding: 0.75rem 0.75rem;\n text-align: inherit;\n line-height: ${theme.sizes.base};\n border-radius: ${theme.radius.base};\n\n &:hover {\n cursor: pointer;\n background-color: ${theme.colors.secondary.blue.lightest};\n }\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAAA;AAKO,MAAM,UAAU,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wNAAA,EAYtBC,WAAK,CAAC,KAAK,CAAC,IAAI,CACd,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI,CAIZ,yCAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ;;;;"}

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

@@ -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--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};}`;
+const CellButton = styled.button.withConfig({ displayName: "vui--CellButton", componentId: "vui--8x2iud" }) `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/cells/styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../../src/components/LegacyDataTable/cells/styled.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\n\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const CellButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n font: inherit;\n\n display: inline-block;\n box-sizing: border-box;\n width: calc(100% + 1.5rem);\n margin: -0.75rem -0.75rem;\n padding: 0.75rem 0.75rem;\n text-align: inherit;\n line-height: ${theme.sizes.base};\n border-radius: ${theme.radius.base};\n\n &:hover {\n cursor: pointer;\n background-color: ${theme.colors.secondary.blue.lightest};\n }\n`;\n"],"names":[],"mappings":";;;AAAA;AAKO,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,wNAAA,EAYtB,KAAK,CAAC,KAAK,CAAC,IAAI,CACd,eAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAIZ,yCAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../../src/components/LegacyDataTable/cells/styled.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\n\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const CellButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n font: inherit;\n\n display: inline-block;\n box-sizing: border-box;\n width: calc(100% + 1.5rem);\n margin: -0.75rem -0.75rem;\n padding: 0.75rem 0.75rem;\n text-align: inherit;\n line-height: ${theme.sizes.base};\n border-radius: ${theme.radius.base};\n\n &:hover {\n cursor: pointer;\n background-color: ${theme.colors.secondary.blue.lightest};\n }\n`;\n"],"names":[],"mappings":";;;AAAA;AAKO,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wNAAA,EAYtB,KAAK,CAAC,KAAK,CAAC,IAAI,CACd,eAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAIZ,yCAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ;;;;"}

package/dist/components/LegacyDataTable/styled.cjs CHANGED Viewed

@@ -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--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
+const TooltipContent = styled__default.default.div.withConfig({ displayName: "vui--TooltipContent", componentId: "vui--1nqpstb" }) `display:flex;flex-direction:row;align-items:center;`;
+const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--1h49cqd" }) `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--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 &&
+const WrapperBordered = styled__default.default(Wrapper).withConfig({ displayName: "vui--WrapperBordered", componentId: "vui--109x8u7" }) `border:1px solid ${grey.dark};border-radius:4px;`;
+const Head = styled__default.default.thead.withConfig({ displayName: "vui--Head", componentId: "vui--14tm173" }) `background-color:white;`;
+const Body = styled__default.default.tbody.withConfig({ displayName: "vui--Body", componentId: "vui--1vyqadw" }) `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--14c87q9" }) `& 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--1jyebee" }) `&.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--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 Cell = styled__default.default.td.withConfig({ displayName: "vui--Cell", componentId: "vui--1kf0vzr" }) `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--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};}`;
+}).withConfig({ displayName: "vui--HeaderCell", componentId: "vui--207sle" }) `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--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 &&
+const HeaderCellLayout = styled__default.default.div.withConfig({ displayName: "vui--HeaderCellLayout", componentId: "vui--tiz1xw" }) `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--16bg3d4" }) `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--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" }) ``;
+const Footer = styled__default.default.tfoot.withConfig({ displayName: "vui--Footer", componentId: "vui--10nnlfx" }) `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--ar694" }) `position:fixed;top:0;z-index:2;overflow-x:hidden;`;
+const FakeHeaderTable = styled__default.default(Table).withConfig({ displayName: "vui--FakeHeaderTable", componentId: "vui--691sx0" }) ``;
 exports.Body = Body;
 exports.Cell = Cell;

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

	@@ -1 +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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"}
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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"}

package/dist/components/LegacyDataTable/styled.js CHANGED Viewed

@@ -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--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
+const TooltipContent = styled.div.withConfig({ displayName: "vui--TooltipContent", componentId: "vui--1nqpstb" }) `display:flex;flex-direction:row;align-items:center;`;
+const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--1h49cqd" }) `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--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 &&
+const WrapperBordered = styled(Wrapper).withConfig({ displayName: "vui--WrapperBordered", componentId: "vui--109x8u7" }) `border:1px solid ${grey.dark};border-radius:4px;`;
+const Head = styled.thead.withConfig({ displayName: "vui--Head", componentId: "vui--14tm173" }) `background-color:white;`;
+const Body = styled.tbody.withConfig({ displayName: "vui--Body", componentId: "vui--1vyqadw" }) `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--14c87q9" }) `& 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--1jyebee" }) `&.hidden{visibility:collapse;}${({ accentColor }) => accentColor &&
     `
     & > td:first-child::before {
       content: "";
@@ -83,17 +83,17 @@ const Row = styled.tr.withConfig({ displayName: "vui--Row", componentId: "vui--o
       background-color: ${accentColor};
     }
   `}`;
-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 Cell = styled.td.withConfig({ displayName: "vui--Cell", componentId: "vui--1kf0vzr" }) `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--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};}`;
+}).withConfig({ displayName: "vui--HeaderCell", componentId: "vui--207sle" }) `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--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 &&
+const HeaderCellLayout = styled.div.withConfig({ displayName: "vui--HeaderCellLayout", componentId: "vui--tiz1xw" }) `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--16bg3d4" }) `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--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" }) ``;
+const Footer = styled.tfoot.withConfig({ displayName: "vui--Footer", componentId: "vui--10nnlfx" }) `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--ar694" }) `position:fixed;top:0;z-index:2;overflow-x:hidden;`;
+const FakeHeaderTable = styled(Table).withConfig({ displayName: "vui--FakeHeaderTable", componentId: "vui--691sx0" }) ``;
 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 CHANGED Viewed

	@@ -1 +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":";;;;AAKA,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK;AAC7B,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS;AACvC,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO;AACrC,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM;AAEzC,MAAM,iBAAiB,GAAG;;;;;;;;;CASzB;AAED,MAAM,sBAAsB,GAAG;;CAE9B;AAED,MAAM,oBAAoB,GAAG;;CAE5B;MAUY,cAAc,GAAG,MAAM,CAAC,GAAG;AAM3B,MAAA,OAAO,GAAG,MAAM,CAAC,GAAG,CAEjB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAC,6DAG3C,IAAI,CAAC,IAAI,CACN,yBAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAA,EAElC,CAAC,EAAE,aAAa,EAAE,KAClB;AACE,MAAE;;;;;;;;;;AAUY,kBAAA,EAAA,SAAS,CAAC,UAAU,CAAA;;;;AAIpB,kBAAA,EAAA,SAAS,CAAC,KAAK,CAAA;;;AAG9B,IAAA;AACC,MAAE,EAAE,CAAA,CAAA,EAEN,CAAC,EAAE,cAAc,EAAE,0BAA0B,EAAE,yBAAyB,EAAE,cAAc,EAAE,KAC1F;AACE,MAAE;AACF,MAAE;mBACW,0BAA0B,CAAA;mBAC1B,0BAA0B,CAAA;;;QAGrC,iBAAiB,CAAA;;QAGjB,cAAc,KAAK,cAAc,CAAC,MAAM,IAAI,cAAc,KAAK,cAAc,CAAC;AAC5E,UAAE;AACF,UAAE,EACN,CAAA;;;wBAGkB,yBAAyB,CAAA;wBACzB,yBAAyB,CAAA;;;QAGzC,iBAAiB,CAAA;;QAGjB,cAAc,KAAK,cAAc,CAAC,KAAK,IAAI,cAAc,KAAK,cAAc,CAAC;AAC3E,UAAE;AACF,UAAE,EACN,CAAA;;AAEH,EAAA,CAAA,CAAA;AAGI,MAAM,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,CACxB,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,IAAI,CAAC,IAAI;MAIlB,IAAI,GAAG,MAAM,CAAC,KAAK;MAInB,IAAI,GAAG,MAAM,CAAC,KAAK,6EAE1B,CAAC,EAAE,iBAAiB,EAAE,KAAK,iBAAiB,sDAItB,IAAI,CAAC,IAAI,CAAA,uGAAA;AAYjB,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAER,IAAI,CAAC,QAAQ,CAET,0CAAA,EAAA,IAAI,CAAC,IAAI;AAQ9B,MAAM,GAAG,GAAG,MAAM,CAAC,EAAE,CAKxB,UAAA,CAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8BAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAChB,WAAW;AACX,IAAA;;;;;;;;0BAQsB,WAAW,CAAA;;AAElC,EAAA,CAAA,CAAA;AAQI,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,kDAAA,EAGb,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,MAAM,CAAA,oCAAA,EAG7B,IAAI,CAAC,SAAS,CAAC,UAAU,CAC3B,WAAA,EAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,gBACrB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,OAAA,EAC/B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA,aAAA,EACd,KAAK,CAAC,IAAI,CAAA,OAAA,EAEhB,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAOpC,MAAA,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;AAC3C,IAAA,EAAE,EAAE,IAAI;AACT,CAAA,CAAC,CAE2B,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yCAAA,EAAA,IAAI,CAAC,IAAI,gBAErB,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,WAAA,EAC/B,IAAI,CAAC,aAAa,CAAC,QAAQ,CACzB,aAAA,EAAA,IAAI,CAAC,aAAa,CAAC,UAAU,UACnC,IAAI,CAAC,aAAa,CAAC,KAAK,CAQX,+EAAA,EAAA,IAAI,CAAC,KAAK;AAIlC,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,UAAU;CAClB;AAMM,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAGrB,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC;AAczE,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAGf,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yCAAA,EAAA,CAAC,EAAE,aAAa,EAAE,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC,CAEvE,CAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KACZ,OAAO;AACP,IAAA;QACI,IAAI,CAAA;AACc,wBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;AAEpC,EAAA,CAAA,CAAA,2BAAA,EAKG,CAAC,EAAE,YAAY,EAAE,KACjB,YAAY;AACZ,IAAA;;;AAGD,IAAA,CAAA,CAAA,CAAA,EAGD,CAAC,EAAE,MAAM,EAAE,KACX,MAAM;AACN,IAAA;AACI,MAAA,EAAA,UAAU,OAAO,UAAU,CAAA;;;AAGhC,EAAA,CAAA,CAAA;AAGI,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAE5B,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,GAAA,EAAA,CAAC,EAAE,iBAAiB,EAAE,KAAK,iBAAiB,CAAA,IAAA,EAG5C,IAAI,CAAA,sBAAA,EACkB,IAAI,CAAC,IAAI,CACb,kBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA,aAAA,EAClB,KAAK,CAAC,IAAI,CACP,gBAAA,EAAA,KAAK,CAAC,IAAI;MAKnB,mBAAmB,GAAG,MAAM,CAAC,GAAG;MAOhC,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA;;;;"}
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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"}

package/dist/components/LoginWithAmazonButton/styled.cjs CHANGED Viewed

@@ -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--wl2n5a" }) `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--1cokrqp" }) `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 CHANGED Viewed

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-const LoginButton = styled.button.withConfig({ displayName: "vui--LoginButton", componentId: "vui--wl2n5a" }) `background:none;border:none;padding:0;cursor:pointer;img{width:156px;height:32px;}`;
+const LoginButton = styled.button.withConfig({ displayName: "vui--LoginButton", componentId: "vui--1cokrqp" }) `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 CHANGED Viewed

@@ -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--hfuefb" }) `${baseStyles.baseModalStyles} ${({ displayMode }) => stylesByType[displayMode]} ${({ appearance }) => appearance === 'secondary' &&
+})).withConfig({ displayName: "vui--StyledDialog", componentId: "vui--1b0h5z1" }) `${baseStyles.baseModalStyles} ${({ displayMode }) => stylesByType[displayMode]} ${({ appearance }) => appearance === 'secondary' &&
     `
     &::backdrop {
       animation: none;

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

	@@ -1 +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,~~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;;;;"}
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;;;;"}

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

@@ -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--hfuefb" }) `${baseModalStyles} ${({ displayMode }) => stylesByType[displayMode]} ${({ appearance }) => appearance === 'secondary' &&
+})).withConfig({ displayName: "vui--StyledDialog", componentId: "vui--1b0h5z1" }) `${baseModalStyles} ${({ displayMode }) => stylesByType[displayMode]} ${({ appearance }) => appearance === 'secondary' &&
     `
     &::backdrop {
       animation: none;

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

	@@ -1 +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,~~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;;;;"}
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;;;;"}

package/dist/components/Modal/components/Dialog/styles/baseStyles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"baseStyles.cjs","sources":["../../../../../../src/components/Modal/components/Dialog/styles/baseStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { ModalVariants } from '~~src/components/Modal/~~types';\nimport { getOpaqueHexColor } from '../../../../../utils/color';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { MainSection } from '../../styled';\nimport { fullScreenBreakpointMap } from '../constants';\n\nexport const baseModalStyles = css<{ variant: ModalVariants }>`\n padding: 0;\n border: none;\n border-radius: ${theme.sizes.sm};\n box-shadow: ${theme.shadows.lg};\n z-index: ${theme.layers.modal};\n\n &::backdrop {\n animation: fadeIn 0.25s ease forwards;\n background-color: ${getOpaqueHexColor(theme.colors.neutral.ink.base, 0.5)};\n width: 100%;\n height: 100%;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n & > ${Card.Surface} {\n display: flex;\n flex-direction: column;\n\n ${MainSection} {\n padding-bottom: ${theme.sizes.md};\n }\n\n ${Card.Footer} {\n margin-top: 0;\n }\n }\n\n @media (max-width: ${({ variant }) => fullScreenBreakpointMap[variant]}) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > ${Card.Surface} {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n`;\n"],"names":["css","theme","getOpaqueHexColor","Card","MainSection","fullScreenBreakpointMap"],"mappings":";;;;;;;;;AAQO,MAAM,eAAe,GAAGA,UAAG,CAGf,CAAA,oCAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE,CACjB,YAAA,EAAAA,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,SAAA,EACnBA,WAAK,CAAC,MAAM,CAAC,KAAK,CAIP,mEAAA,EAAAC,uBAAiB,CAACD,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA,8EAAA,EAcrEE,SAAI,CAAC,OAAO,CAId,oCAAA,EAAAC,oBAAW,CACO,gBAAA,EAAAH,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,EAAA,EAGhCE,SAAI,CAAC,MAAM,CAKM,mCAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAKE,iCAAuB,CAAC,OAAO,CAAC,CAO9D,6DAAA,EAAAF,SAAI,CAAC,OAAO;;;;"}
1	+ {"version":3,"file":"baseStyles.cjs","sources":["../../../../../../src/components/Modal/components/Dialog/styles/baseStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { ModalVariants } from '../../../types';\nimport { getOpaqueHexColor } from '../../../../../utils/color';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { MainSection } from '../../styled';\nimport { fullScreenBreakpointMap } from '../constants';\n\nexport const baseModalStyles = css<{ variant: ModalVariants }>`\n padding: 0;\n border: none;\n border-radius: ${theme.sizes.sm};\n box-shadow: ${theme.shadows.lg};\n z-index: ${theme.layers.modal};\n\n &::backdrop {\n animation: fadeIn 0.25s ease forwards;\n background-color: ${getOpaqueHexColor(theme.colors.neutral.ink.base, 0.5)};\n width: 100%;\n height: 100%;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n & > ${Card.Surface} {\n display: flex;\n flex-direction: column;\n\n ${MainSection} {\n padding-bottom: ${theme.sizes.md};\n }\n\n ${Card.Footer} {\n margin-top: 0;\n }\n }\n\n @media (max-width: ${({ variant }) => fullScreenBreakpointMap[variant]}) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > ${Card.Surface} {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n`;\n"],"names":["css","theme","getOpaqueHexColor","Card","MainSection","fullScreenBreakpointMap"],"mappings":";;;;;;;;;AAQO,MAAM,eAAe,GAAGA,UAAG,CAGf,CAAA,oCAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE,CACjB,YAAA,EAAAA,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,SAAA,EACnBA,WAAK,CAAC,MAAM,CAAC,KAAK,CAIP,mEAAA,EAAAC,uBAAiB,CAACD,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA,8EAAA,EAcrEE,SAAI,CAAC,OAAO,CAId,oCAAA,EAAAC,oBAAW,CACO,gBAAA,EAAAH,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,EAAA,EAGhCE,SAAI,CAAC,MAAM,CAKM,mCAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAKE,iCAAuB,CAAC,OAAO,CAAC,CAO9D,6DAAA,EAAAF,SAAI,CAAC,OAAO;;;;"}

package/dist/components/Modal/components/Dialog/styles/baseStyles.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ModalVariants } from 'src/components/Modal/types';
+import { ModalVariants } from '../../../types';
 export declare const baseModalStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
     variant: ModalVariants;
 }, any>>;

package/dist/components/Modal/components/Dialog/styles/baseStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"baseStyles.js","sources":["../../../../../../src/components/Modal/components/Dialog/styles/baseStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { ModalVariants } from '~~src/components/Modal/~~types';\nimport { getOpaqueHexColor } from '../../../../../utils/color';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { MainSection } from '../../styled';\nimport { fullScreenBreakpointMap } from '../constants';\n\nexport const baseModalStyles = css<{ variant: ModalVariants }>`\n padding: 0;\n border: none;\n border-radius: ${theme.sizes.sm};\n box-shadow: ${theme.shadows.lg};\n z-index: ${theme.layers.modal};\n\n &::backdrop {\n animation: fadeIn 0.25s ease forwards;\n background-color: ${getOpaqueHexColor(theme.colors.neutral.ink.base, 0.5)};\n width: 100%;\n height: 100%;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n & > ${Card.Surface} {\n display: flex;\n flex-direction: column;\n\n ${MainSection} {\n padding-bottom: ${theme.sizes.md};\n }\n\n ${Card.Footer} {\n margin-top: 0;\n }\n }\n\n @media (max-width: ${({ variant }) => fullScreenBreakpointMap[variant]}) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > ${Card.Surface} {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n`;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,eAAe,GAAG,GAAG,CAGf,CAAA,oCAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CACjB,YAAA,EAAA,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,SAAA,EACnB,KAAK,CAAC,MAAM,CAAC,KAAK,CAIP,mEAAA,EAAA,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA,8EAAA,EAcrE,IAAI,CAAC,OAAO,CAId,oCAAA,EAAA,WAAW,CACO,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,EAAA,EAGhC,IAAI,CAAC,MAAM,CAKM,mCAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,uBAAuB,CAAC,OAAO,CAAC,CAO9D,6DAAA,EAAA,IAAI,CAAC,OAAO;;;;"}
1	+ {"version":3,"file":"baseStyles.js","sources":["../../../../../../src/components/Modal/components/Dialog/styles/baseStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { ModalVariants } from '../../../types';\nimport { getOpaqueHexColor } from '../../../../../utils/color';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { MainSection } from '../../styled';\nimport { fullScreenBreakpointMap } from '../constants';\n\nexport const baseModalStyles = css<{ variant: ModalVariants }>`\n padding: 0;\n border: none;\n border-radius: ${theme.sizes.sm};\n box-shadow: ${theme.shadows.lg};\n z-index: ${theme.layers.modal};\n\n &::backdrop {\n animation: fadeIn 0.25s ease forwards;\n background-color: ${getOpaqueHexColor(theme.colors.neutral.ink.base, 0.5)};\n width: 100%;\n height: 100%;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n & > ${Card.Surface} {\n display: flex;\n flex-direction: column;\n\n ${MainSection} {\n padding-bottom: ${theme.sizes.md};\n }\n\n ${Card.Footer} {\n margin-top: 0;\n }\n }\n\n @media (max-width: ${({ variant }) => fullScreenBreakpointMap[variant]}) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > ${Card.Surface} {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n`;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,eAAe,GAAG,GAAG,CAGf,CAAA,oCAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CACjB,YAAA,EAAA,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,SAAA,EACnB,KAAK,CAAC,MAAM,CAAC,KAAK,CAIP,mEAAA,EAAA,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA,8EAAA,EAcrE,IAAI,CAAC,OAAO,CAId,oCAAA,EAAA,WAAW,CACO,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,EAAA,EAGhC,IAAI,CAAC,MAAM,CAKM,mCAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,uBAAuB,CAAC,OAAO,CAAC,CAO9D,6DAAA,EAAA,IAAI,CAAC,OAAO;;;;"}

package/dist/components/Modal/components/Dialog/styles/modalTypeStyles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modalTypeStyles.cjs","sources":["../../../../../../src/components/Modal/components/Dialog/styles/modalTypeStyles.ts"],"sourcesContent":["import { ~~ModalVariants~~ } from '~~src/~~components~~/Modal/types~~';\nimport { ~~css~~ } from '~~styled-components~~';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { heightMap, widthMap } from '../constants';\n\nconst { breakpoints } = theme;\n\nexport const modalStyles = css<{ variant: ModalVariants }>`\n min-width: 464px;\n\n & > ${Card.Surface} {\n max-height: ${({ variant }) => heightMap[variant]};\n }\n\n &:not([open]) {\n display: block;\n position: fixed;\n inset: 0;\n transform: translate(-50%, -50%);\n }\n\n // Responsive Design //\n\n // Tablet\n @media (min-width: calc(${breakpoints.mobile} + 1px)) and (max-width: ${breakpoints.tablet}) {\n max-width: ${({ variant }) => widthMap[breakpoints.tablet][variant]};\n }\n\n // Lg Tablet\n @media (min-width: ${breakpoints.tablet}) and (max-width: ${breakpoints.lgTablet}) {\n max-width: ${({ variant }) => widthMap[breakpoints.lgTablet][variant]};\n }\n\n // Desktop\n @media (min-width: ${breakpoints.lgTablet}) and (max-width: ${breakpoints.desktop}) {\n max-width: ${({ variant }) => widthMap[breakpoints.desktop][variant]};\n }\n\n // Lg Desktop\n @media (min-width: ${breakpoints.desktop}) {\n max-width: ${({ variant }) => widthMap[breakpoints.lgDesktop][variant]};\n }\n`;\n\nconst sideDrawerBaseStyles = css`\n height: 100%;\n max-height: 100%;\n min-width: 320px;\n width: 400px;\n margin: 0;\n position: fixed;\n transform: none;\n border-radius: 0;\n overflow: visible;\n\n & > ${Card.Surface} {\n border-radius: 0;\n height: 100%;\n }\n\n &:not([open]) {\n display: block;\n }\n`;\n\nexport const leftDrawerStyles = css`\n ${sideDrawerBaseStyles}\n inset: 0 auto 0 0;\n`;\n\nexport const rightDrawerStyles = css`\n ${sideDrawerBaseStyles}\n inset: 0 0 0 auto;\n`;\n"],"names":["theme","css","Card","heightMap","widthMap"],"mappings":";;;;;;;AAMA,MAAM,EAAE,WAAW,EAAE,GAAGA,WAAK;AAEhB,MAAA,WAAW,GAAGC,UAAG,CAGtB,CAAA,oBAAA,EAAAC,SAAI,CAAC,OAAO,CACF,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAKC,mBAAS,CAAC,OAAO,CAAC,CAAA,8GAAA,EAazB,WAAW,CAAC,MAAM,CAAA,wBAAA,EAA4B,WAAW,CAAC,MAAM,CAC3E,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAKC,kBAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIhD,WAAW,CAAC,MAAM,CAAA,iBAAA,EAAqB,WAAW,CAAC,QAAQ,CAAA,YAAA,EACjE,CAAC,EAAE,OAAO,EAAE,KAAKA,kBAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIlD,WAAW,CAAC,QAAQ,CAAqB,iBAAA,EAAA,WAAW,CAAC,OAAO,CAClE,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAKA,kBAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAIjD,qBAAA,EAAA,WAAW,CAAC,OAAO,CACzB,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAKA,kBAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAA,EAAA;AAI1E,MAAM,oBAAoB,GAAGH,UAAG,CAAA,CAAA,oIAAA,EAWxBC,SAAI,CAAC,OAAO,6DAQnB;MAEY,gBAAgB,GAAGD,UAAG,CAC/B,CAAA,EAAA,oBAAoB;MAIX,iBAAiB,GAAGA,UAAG,CAChC,CAAA,EAAA,oBAAoB;;;;;;"}
1	+ {"version":3,"file":"modalTypeStyles.cjs","sources":["../../../../../../src/components/Modal/components/Dialog/styles/modalTypeStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { ModalVariants } from '../../../types';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { heightMap, widthMap } from '../constants';\n\nconst { breakpoints } = theme;\n\nexport const modalStyles = css<{ variant: ModalVariants }>`\n min-width: 464px;\n\n & > ${Card.Surface} {\n max-height: ${({ variant }) => heightMap[variant]};\n }\n\n &:not([open]) {\n display: block;\n position: fixed;\n inset: 0;\n transform: translate(-50%, -50%);\n }\n\n // Responsive Design //\n\n // Tablet\n @media (min-width: calc(${breakpoints.mobile} + 1px)) and (max-width: ${breakpoints.tablet}) {\n max-width: ${({ variant }) => widthMap[breakpoints.tablet][variant]};\n }\n\n // Lg Tablet\n @media (min-width: ${breakpoints.tablet}) and (max-width: ${breakpoints.lgTablet}) {\n max-width: ${({ variant }) => widthMap[breakpoints.lgTablet][variant]};\n }\n\n // Desktop\n @media (min-width: ${breakpoints.lgTablet}) and (max-width: ${breakpoints.desktop}) {\n max-width: ${({ variant }) => widthMap[breakpoints.desktop][variant]};\n }\n\n // Lg Desktop\n @media (min-width: ${breakpoints.desktop}) {\n max-width: ${({ variant }) => widthMap[breakpoints.lgDesktop][variant]};\n }\n`;\n\nconst sideDrawerBaseStyles = css`\n height: 100%;\n max-height: 100%;\n min-width: 320px;\n width: 400px;\n margin: 0;\n position: fixed;\n transform: none;\n border-radius: 0;\n overflow: visible;\n\n & > ${Card.Surface} {\n border-radius: 0;\n height: 100%;\n }\n\n &:not([open]) {\n display: block;\n }\n`;\n\nexport const leftDrawerStyles = css`\n ${sideDrawerBaseStyles}\n inset: 0 auto 0 0;\n`;\n\nexport const rightDrawerStyles = css`\n ${sideDrawerBaseStyles}\n inset: 0 0 0 auto;\n`;\n"],"names":["theme","css","Card","heightMap","widthMap"],"mappings":";;;;;;;AAMA,MAAM,EAAE,WAAW,EAAE,GAAGA,WAAK;AAEhB,MAAA,WAAW,GAAGC,UAAG,CAGtB,CAAA,oBAAA,EAAAC,SAAI,CAAC,OAAO,CACF,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAKC,mBAAS,CAAC,OAAO,CAAC,CAAA,8GAAA,EAazB,WAAW,CAAC,MAAM,CAAA,wBAAA,EAA4B,WAAW,CAAC,MAAM,CAC3E,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAKC,kBAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIhD,WAAW,CAAC,MAAM,CAAA,iBAAA,EAAqB,WAAW,CAAC,QAAQ,CAAA,YAAA,EACjE,CAAC,EAAE,OAAO,EAAE,KAAKA,kBAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIlD,WAAW,CAAC,QAAQ,CAAqB,iBAAA,EAAA,WAAW,CAAC,OAAO,CAClE,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAKA,kBAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAIjD,qBAAA,EAAA,WAAW,CAAC,OAAO,CACzB,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAKA,kBAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAA,EAAA;AAI1E,MAAM,oBAAoB,GAAGH,UAAG,CAAA,CAAA,oIAAA,EAWxBC,SAAI,CAAC,OAAO,6DAQnB;MAEY,gBAAgB,GAAGD,UAAG,CAC/B,CAAA,EAAA,oBAAoB;MAIX,iBAAiB,GAAGA,UAAG,CAChC,CAAA,EAAA,oBAAoB;;;;;;"}

package/dist/components/Modal/components/Dialog/styles/modalTypeStyles.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ModalVariants } from 'src/components/Modal/types';
+import { ModalVariants } from '../../../types';
 export declare const modalStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
     variant: ModalVariants;
 }, any>>;

package/dist/components/Modal/components/Dialog/styles/modalTypeStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modalTypeStyles.js","sources":["../../../../../../src/components/Modal/components/Dialog/styles/modalTypeStyles.ts"],"sourcesContent":["import { ~~ModalVariants~~ } from '~~src/~~components~~/Modal/types~~';\nimport { ~~css~~ } from '~~styled-components~~';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { heightMap, widthMap } from '../constants';\n\nconst { breakpoints } = theme;\n\nexport const modalStyles = css<{ variant: ModalVariants }>`\n min-width: 464px;\n\n & > ${Card.Surface} {\n max-height: ${({ variant }) => heightMap[variant]};\n }\n\n &:not([open]) {\n display: block;\n position: fixed;\n inset: 0;\n transform: translate(-50%, -50%);\n }\n\n // Responsive Design //\n\n // Tablet\n @media (min-width: calc(${breakpoints.mobile} + 1px)) and (max-width: ${breakpoints.tablet}) {\n max-width: ${({ variant }) => widthMap[breakpoints.tablet][variant]};\n }\n\n // Lg Tablet\n @media (min-width: ${breakpoints.tablet}) and (max-width: ${breakpoints.lgTablet}) {\n max-width: ${({ variant }) => widthMap[breakpoints.lgTablet][variant]};\n }\n\n // Desktop\n @media (min-width: ${breakpoints.lgTablet}) and (max-width: ${breakpoints.desktop}) {\n max-width: ${({ variant }) => widthMap[breakpoints.desktop][variant]};\n }\n\n // Lg Desktop\n @media (min-width: ${breakpoints.desktop}) {\n max-width: ${({ variant }) => widthMap[breakpoints.lgDesktop][variant]};\n }\n`;\n\nconst sideDrawerBaseStyles = css`\n height: 100%;\n max-height: 100%;\n min-width: 320px;\n width: 400px;\n margin: 0;\n position: fixed;\n transform: none;\n border-radius: 0;\n overflow: visible;\n\n & > ${Card.Surface} {\n border-radius: 0;\n height: 100%;\n }\n\n &:not([open]) {\n display: block;\n }\n`;\n\nexport const leftDrawerStyles = css`\n ${sideDrawerBaseStyles}\n inset: 0 auto 0 0;\n`;\n\nexport const rightDrawerStyles = css`\n ${sideDrawerBaseStyles}\n inset: 0 0 0 auto;\n`;\n"],"names":[],"mappings":";;;;;AAMA,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK;AAEhB,MAAA,WAAW,GAAG,GAAG,CAGtB,CAAA,oBAAA,EAAA,IAAI,CAAC,OAAO,CACF,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,SAAS,CAAC,OAAO,CAAC,CAAA,8GAAA,EAazB,WAAW,CAAC,MAAM,CAAA,wBAAA,EAA4B,WAAW,CAAC,MAAM,CAC3E,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIhD,WAAW,CAAC,MAAM,CAAA,iBAAA,EAAqB,WAAW,CAAC,QAAQ,CAAA,YAAA,EACjE,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIlD,WAAW,CAAC,QAAQ,CAAqB,iBAAA,EAAA,WAAW,CAAC,OAAO,CAClE,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAIjD,qBAAA,EAAA,WAAW,CAAC,OAAO,CACzB,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAA,EAAA;AAI1E,MAAM,oBAAoB,GAAG,GAAG,CAAA,CAAA,oIAAA,EAWxB,IAAI,CAAC,OAAO,6DAQnB;MAEY,gBAAgB,GAAG,GAAG,CAC/B,CAAA,EAAA,oBAAoB;MAIX,iBAAiB,GAAG,GAAG,CAChC,CAAA,EAAA,oBAAoB;;;;"}
1	+ {"version":3,"file":"modalTypeStyles.js","sources":["../../../../../../src/components/Modal/components/Dialog/styles/modalTypeStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { ModalVariants } from '../../../types';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { heightMap, widthMap } from '../constants';\n\nconst { breakpoints } = theme;\n\nexport const modalStyles = css<{ variant: ModalVariants }>`\n min-width: 464px;\n\n & > ${Card.Surface} {\n max-height: ${({ variant }) => heightMap[variant]};\n }\n\n &:not([open]) {\n display: block;\n position: fixed;\n inset: 0;\n transform: translate(-50%, -50%);\n }\n\n // Responsive Design //\n\n // Tablet\n @media (min-width: calc(${breakpoints.mobile} + 1px)) and (max-width: ${breakpoints.tablet}) {\n max-width: ${({ variant }) => widthMap[breakpoints.tablet][variant]};\n }\n\n // Lg Tablet\n @media (min-width: ${breakpoints.tablet}) and (max-width: ${breakpoints.lgTablet}) {\n max-width: ${({ variant }) => widthMap[breakpoints.lgTablet][variant]};\n }\n\n // Desktop\n @media (min-width: ${breakpoints.lgTablet}) and (max-width: ${breakpoints.desktop}) {\n max-width: ${({ variant }) => widthMap[breakpoints.desktop][variant]};\n }\n\n // Lg Desktop\n @media (min-width: ${breakpoints.desktop}) {\n max-width: ${({ variant }) => widthMap[breakpoints.lgDesktop][variant]};\n }\n`;\n\nconst sideDrawerBaseStyles = css`\n height: 100%;\n max-height: 100%;\n min-width: 320px;\n width: 400px;\n margin: 0;\n position: fixed;\n transform: none;\n border-radius: 0;\n overflow: visible;\n\n & > ${Card.Surface} {\n border-radius: 0;\n height: 100%;\n }\n\n &:not([open]) {\n display: block;\n }\n`;\n\nexport const leftDrawerStyles = css`\n ${sideDrawerBaseStyles}\n inset: 0 auto 0 0;\n`;\n\nexport const rightDrawerStyles = css`\n ${sideDrawerBaseStyles}\n inset: 0 0 0 auto;\n`;\n"],"names":[],"mappings":";;;;;AAMA,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK;AAEhB,MAAA,WAAW,GAAG,GAAG,CAGtB,CAAA,oBAAA,EAAA,IAAI,CAAC,OAAO,CACF,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,SAAS,CAAC,OAAO,CAAC,CAAA,8GAAA,EAazB,WAAW,CAAC,MAAM,CAAA,wBAAA,EAA4B,WAAW,CAAC,MAAM,CAC3E,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIhD,WAAW,CAAC,MAAM,CAAA,iBAAA,EAAqB,WAAW,CAAC,QAAQ,CAAA,YAAA,EACjE,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIlD,WAAW,CAAC,QAAQ,CAAqB,iBAAA,EAAA,WAAW,CAAC,OAAO,CAClE,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAIjD,qBAAA,EAAA,WAAW,CAAC,OAAO,CACzB,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAA,EAAA;AAI1E,MAAM,oBAAoB,GAAG,GAAG,CAAA,CAAA,oIAAA,EAWxB,IAAI,CAAC,OAAO,6DAQnB;MAEY,gBAAgB,GAAG,GAAG,CAC/B,CAAA,EAAA,oBAAoB;MAIX,iBAAiB,GAAG,GAAG,CAChC,CAAA,EAAA,oBAAoB;;;;"}

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

@@ -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--or7d" }) `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--c8j5ro" }) `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 CHANGED Viewed

	@@ -1 +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,~~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;;;;;"}
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,aAAA,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 CHANGED Viewed

@@ -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--or7d" }) `flex:1;overflow-y:auto;${({ fullBleed }) => !fullBleed && `padding: 0 ${theme.sizes.md};`} ${({ isScrollable }) => isScrollable &&
+const MainSection = styled.section.withConfig({ displayName: "vui--MainSection", componentId: "vui--c8j5ro" }) `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};