@veeqo/ui 10.0.1 → 10.2.0

package/dist/components/DescriptionList/DescriptionList.cjs

@@ -9,12 +9,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const List = styled__default.default.dl.withConfig({ displayName: "vui--List", componentId: "vui--lwzabs" }) `margin:unset;& > * + *{margin-top:${index.theme.sizes.base};}`;
-const Item = styled__default.default.div.withConfig({ displayName: "vui--Item", componentId: "vui--1dxs1r3" }) `& > * + *{margin-top:${index.theme.sizes.xs};}`;
-const ItemRow = styled__default.default.div.withConfig({ displayName: "vui--ItemRow", componentId: "vui--t299mh" }) `display:flex;justify-content:space-between;& > * + *{margin-left:${index.theme.sizes.base};}`;
-const DescriptionContainer = styled__default.default.div.withConfig({ displayName: "vui--DescriptionContainer", componentId: "vui--14xbcpp" }) `text-align:right;& > * + *{margin-top:${index.theme.sizes.xs};}`;
-const Term = styled__default.default.dt.withConfig({ displayName: "vui--Term", componentId: "vui--taczwx" }) `font-family:${index.theme.text.bodyBold.fontFamily};font-size:${index.theme.text.bodyBold.fontSize};font-weight:${index.theme.text.bodyBold.fontWeight};line-height:${index.theme.text.bodyBold.lineHeight};color:${index.theme.text.bodyBold.color};`;
-const Description = styled__default.default.dd.withConfig({ displayName: "vui--Description", componentId: "vui--hqasxa" }) `margin-left:unset;font-family:${index.theme.text.body.fontFamily};font-size:${index.theme.text.body.fontSize};font-weight:${index.theme.text.body.fontWeight};line-height:${index.theme.text.body.lineHeight};color:${index.theme.text.body.color};`;
+const List = styled__default.default.dl.withConfig({ displayName: "vui--List", componentId: "vui--syirga" }) `margin:unset;& > * + *{margin-top:${index.theme.sizes.base};}`;
+const Item = styled__default.default.div.withConfig({ displayName: "vui--Item", componentId: "vui--dz7dgm" }) `& > * + *{margin-top:${index.theme.sizes.xs};}`;
+const ItemRow = styled__default.default.div.withConfig({ displayName: "vui--ItemRow", componentId: "vui--1b0o5wp" }) `display:flex;justify-content:space-between;& > * + *{margin-left:${index.theme.sizes.base};}`;
+const DescriptionContainer = styled__default.default.div.withConfig({ displayName: "vui--DescriptionContainer", componentId: "vui--foltw8" }) `text-align:right;& > * + *{margin-top:${index.theme.sizes.xs};}`;
+const Term = styled__default.default.dt.withConfig({ displayName: "vui--Term", componentId: "vui--s2cfux" }) `font-family:${index.theme.text.bodyBold.fontFamily};font-size:${index.theme.text.bodyBold.fontSize};font-weight:${index.theme.text.bodyBold.fontWeight};line-height:${index.theme.text.bodyBold.lineHeight};color:${index.theme.text.bodyBold.color};`;
+const Description = styled__default.default.dd.withConfig({ displayName: "vui--Description", componentId: "vui--1915ejg" }) `margin-left:unset;font-family:${index.theme.text.body.fontFamily};font-size:${index.theme.text.body.fontSize};font-weight:${index.theme.text.body.fontWeight};line-height:${index.theme.text.body.lineHeight};color:${index.theme.text.body.color};`;
 const DescriptionList = ({ items, horizontal }) => {
     const renderDescription = (description) => {
         if (Array.isArray(description)) {

package/dist/components/DescriptionList/DescriptionList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionList.cjs","sources":["../../../src/components/DescriptionList/DescriptionList.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../theme';\n\nconst List = styled.dl`\n  margin: unset;\n\n  & > * + * {\n    margin-top: ${theme.sizes.base};\n  }\n`;\n\nconst Item = styled.div`\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst ItemRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n\n  & > * + * {\n    margin-left: ${theme.sizes.base};\n  }\n`;\n\nconst DescriptionContainer = styled.div`\n  text-align: right;\n\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst Term = styled.dt`\n  font-family: ${theme.text.bodyBold.fontFamily};\n  font-size: ${theme.text.bodyBold.fontSize};\n  font-weight: ${theme.text.bodyBold.fontWeight};\n  line-height: ${theme.text.bodyBold.lineHeight};\n  color: ${theme.text.bodyBold.color};\n`;\n\nconst Description = styled.dd`\n  margin-left: unset;\n\n  font-family: ${theme.text.body.fontFamily};\n  font-size: ${theme.text.body.fontSize};\n  font-weight: ${theme.text.body.fontWeight};\n  line-height: ${theme.text.body.lineHeight};\n  color: ${theme.text.body.color};\n`;\n\ntype DescriptionListItem = {\n  term: string;\n  description: string | string[];\n};\n\nexport interface DescriptionListProps {\n  items: DescriptionListItem[];\n  horizontal?: boolean;\n}\n\nexport const DescriptionList = ({ items, horizontal }: DescriptionListProps) => {\n  const renderDescription = (description: string | string[]) => {\n    if (Array.isArray(description)) {\n      return description.map((d) => <Description key={d}>{d}</Description>);\n    }\n    return <Description>{description}</Description>;\n  };\n\n  const renderItem = (item: DescriptionListItem) => {\n    if (horizontal) {\n      return (\n        <ItemRow key={item.term}>\n          <Term>{item.term}</Term>\n          <DescriptionContainer>{renderDescription(item.description)}</DescriptionContainer>\n        </ItemRow>\n      );\n    }\n    return (\n      <Item key={item.term}>\n        <Term>{item.term}</Term>\n        {renderDescription(item.description)}\n      </Item>\n    );\n  };\n\n  return <List>{items.map(renderItem)}</List>;\n};\n"],"names":["styled","theme","React"],"mappings":"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"}
+{"version":3,"file":"DescriptionList.cjs","sources":["../../../src/components/DescriptionList/DescriptionList.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../theme';\n\nconst List = styled.dl`\n  margin: unset;\n\n  & > * + * {\n    margin-top: ${theme.sizes.base};\n  }\n`;\n\nconst Item = styled.div`\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst ItemRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n\n  & > * + * {\n    margin-left: ${theme.sizes.base};\n  }\n`;\n\nconst DescriptionContainer = styled.div`\n  text-align: right;\n\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst Term = styled.dt`\n  font-family: ${theme.text.bodyBold.fontFamily};\n  font-size: ${theme.text.bodyBold.fontSize};\n  font-weight: ${theme.text.bodyBold.fontWeight};\n  line-height: ${theme.text.bodyBold.lineHeight};\n  color: ${theme.text.bodyBold.color};\n`;\n\nconst Description = styled.dd`\n  margin-left: unset;\n\n  font-family: ${theme.text.body.fontFamily};\n  font-size: ${theme.text.body.fontSize};\n  font-weight: ${theme.text.body.fontWeight};\n  line-height: ${theme.text.body.lineHeight};\n  color: ${theme.text.body.color};\n`;\n\ntype DescriptionListItem = {\n  term: string;\n  description: string | string[];\n};\n\nexport interface DescriptionListProps {\n  items: DescriptionListItem[];\n  horizontal?: boolean;\n}\n\nexport const DescriptionList = ({ items, horizontal }: DescriptionListProps) => {\n  const renderDescription = (description: string | string[]) => {\n    if (Array.isArray(description)) {\n      return description.map((d) => <Description key={d}>{d}</Description>);\n    }\n    return <Description>{description}</Description>;\n  };\n\n  const renderItem = (item: DescriptionListItem) => {\n    if (horizontal) {\n      return (\n        <ItemRow key={item.term}>\n          <Term>{item.term}</Term>\n          <DescriptionContainer>{renderDescription(item.description)}</DescriptionContainer>\n        </ItemRow>\n      );\n    }\n    return (\n      <Item key={item.term}>\n        <Term>{item.term}</Term>\n        {renderDescription(item.description)}\n      </Item>\n    );\n  };\n\n  return <List>{items.map(renderItem)}</List>;\n};\n"],"names":["styled","theme","React"],"mappings":"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"}

package/dist/components/DescriptionList/DescriptionList.js

@@ -2,12 +2,12 @@ import React__default from 'react';
 import styled from 'styled-components';
 import { theme } from '../../theme/index.js';
 
-const List = styled.dl.withConfig({ displayName: "vui--List", componentId: "vui--lwzabs" }) `margin:unset;& > * + *{margin-top:${theme.sizes.base};}`;
-const Item = styled.div.withConfig({ displayName: "vui--Item", componentId: "vui--1dxs1r3" }) `& > * + *{margin-top:${theme.sizes.xs};}`;
-const ItemRow = styled.div.withConfig({ displayName: "vui--ItemRow", componentId: "vui--t299mh" }) `display:flex;justify-content:space-between;& > * + *{margin-left:${theme.sizes.base};}`;
-const DescriptionContainer = styled.div.withConfig({ displayName: "vui--DescriptionContainer", componentId: "vui--14xbcpp" }) `text-align:right;& > * + *{margin-top:${theme.sizes.xs};}`;
-const Term = styled.dt.withConfig({ displayName: "vui--Term", componentId: "vui--taczwx" }) `font-family:${theme.text.bodyBold.fontFamily};font-size:${theme.text.bodyBold.fontSize};font-weight:${theme.text.bodyBold.fontWeight};line-height:${theme.text.bodyBold.lineHeight};color:${theme.text.bodyBold.color};`;
-const Description = styled.dd.withConfig({ displayName: "vui--Description", componentId: "vui--hqasxa" }) `margin-left:unset;font-family:${theme.text.body.fontFamily};font-size:${theme.text.body.fontSize};font-weight:${theme.text.body.fontWeight};line-height:${theme.text.body.lineHeight};color:${theme.text.body.color};`;
+const List = styled.dl.withConfig({ displayName: "vui--List", componentId: "vui--syirga" }) `margin:unset;& > * + *{margin-top:${theme.sizes.base};}`;
+const Item = styled.div.withConfig({ displayName: "vui--Item", componentId: "vui--dz7dgm" }) `& > * + *{margin-top:${theme.sizes.xs};}`;
+const ItemRow = styled.div.withConfig({ displayName: "vui--ItemRow", componentId: "vui--1b0o5wp" }) `display:flex;justify-content:space-between;& > * + *{margin-left:${theme.sizes.base};}`;
+const DescriptionContainer = styled.div.withConfig({ displayName: "vui--DescriptionContainer", componentId: "vui--foltw8" }) `text-align:right;& > * + *{margin-top:${theme.sizes.xs};}`;
+const Term = styled.dt.withConfig({ displayName: "vui--Term", componentId: "vui--s2cfux" }) `font-family:${theme.text.bodyBold.fontFamily};font-size:${theme.text.bodyBold.fontSize};font-weight:${theme.text.bodyBold.fontWeight};line-height:${theme.text.bodyBold.lineHeight};color:${theme.text.bodyBold.color};`;
+const Description = styled.dd.withConfig({ displayName: "vui--Description", componentId: "vui--1915ejg" }) `margin-left:unset;font-family:${theme.text.body.fontFamily};font-size:${theme.text.body.fontSize};font-weight:${theme.text.body.fontWeight};line-height:${theme.text.body.lineHeight};color:${theme.text.body.color};`;
 const DescriptionList = ({ items, horizontal }) => {
     const renderDescription = (description) => {
         if (Array.isArray(description)) {

package/dist/components/DescriptionList/DescriptionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionList.js","sources":["../../../src/components/DescriptionList/DescriptionList.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../theme';\n\nconst List = styled.dl`\n  margin: unset;\n\n  & > * + * {\n    margin-top: ${theme.sizes.base};\n  }\n`;\n\nconst Item = styled.div`\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst ItemRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n\n  & > * + * {\n    margin-left: ${theme.sizes.base};\n  }\n`;\n\nconst DescriptionContainer = styled.div`\n  text-align: right;\n\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst Term = styled.dt`\n  font-family: ${theme.text.bodyBold.fontFamily};\n  font-size: ${theme.text.bodyBold.fontSize};\n  font-weight: ${theme.text.bodyBold.fontWeight};\n  line-height: ${theme.text.bodyBold.lineHeight};\n  color: ${theme.text.bodyBold.color};\n`;\n\nconst Description = styled.dd`\n  margin-left: unset;\n\n  font-family: ${theme.text.body.fontFamily};\n  font-size: ${theme.text.body.fontSize};\n  font-weight: ${theme.text.body.fontWeight};\n  line-height: ${theme.text.body.lineHeight};\n  color: ${theme.text.body.color};\n`;\n\ntype DescriptionListItem = {\n  term: string;\n  description: string | string[];\n};\n\nexport interface DescriptionListProps {\n  items: DescriptionListItem[];\n  horizontal?: boolean;\n}\n\nexport const DescriptionList = ({ items, horizontal }: DescriptionListProps) => {\n  const renderDescription = (description: string | string[]) => {\n    if (Array.isArray(description)) {\n      return description.map((d) => <Description key={d}>{d}</Description>);\n    }\n    return <Description>{description}</Description>;\n  };\n\n  const renderItem = (item: DescriptionListItem) => {\n    if (horizontal) {\n      return (\n        <ItemRow key={item.term}>\n          <Term>{item.term}</Term>\n          <DescriptionContainer>{renderDescription(item.description)}</DescriptionContainer>\n        </ItemRow>\n      );\n    }\n    return (\n      <Item key={item.term}>\n        <Term>{item.term}</Term>\n        {renderDescription(item.description)}\n      </Item>\n    );\n  };\n\n  return <List>{items.map(renderItem)}</List>;\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DescriptionList.js","sources":["../../../src/components/DescriptionList/DescriptionList.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../theme';\n\nconst List = styled.dl`\n  margin: unset;\n\n  & > * + * {\n    margin-top: ${theme.sizes.base};\n  }\n`;\n\nconst Item = styled.div`\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst ItemRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n\n  & > * + * {\n    margin-left: ${theme.sizes.base};\n  }\n`;\n\nconst DescriptionContainer = styled.div`\n  text-align: right;\n\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst Term = styled.dt`\n  font-family: ${theme.text.bodyBold.fontFamily};\n  font-size: ${theme.text.bodyBold.fontSize};\n  font-weight: ${theme.text.bodyBold.fontWeight};\n  line-height: ${theme.text.bodyBold.lineHeight};\n  color: ${theme.text.bodyBold.color};\n`;\n\nconst Description = styled.dd`\n  margin-left: unset;\n\n  font-family: ${theme.text.body.fontFamily};\n  font-size: ${theme.text.body.fontSize};\n  font-weight: ${theme.text.body.fontWeight};\n  line-height: ${theme.text.body.lineHeight};\n  color: ${theme.text.body.color};\n`;\n\ntype DescriptionListItem = {\n  term: string;\n  description: string | string[];\n};\n\nexport interface DescriptionListProps {\n  items: DescriptionListItem[];\n  horizontal?: boolean;\n}\n\nexport const DescriptionList = ({ items, horizontal }: DescriptionListProps) => {\n  const renderDescription = (description: string | string[]) => {\n    if (Array.isArray(description)) {\n      return description.map((d) => <Description key={d}>{d}</Description>);\n    }\n    return <Description>{description}</Description>;\n  };\n\n  const renderItem = (item: DescriptionListItem) => {\n    if (horizontal) {\n      return (\n        <ItemRow key={item.term}>\n          <Term>{item.term}</Term>\n          <DescriptionContainer>{renderDescription(item.description)}</DescriptionContainer>\n        </ItemRow>\n      );\n    }\n    return (\n      <Item key={item.term}>\n        <Term>{item.term}</Term>\n        {renderDescription(item.description)}\n      </Item>\n    );\n  };\n\n  return <List>{items.map(renderItem)}</List>;\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/DetailPage/styled.cjs

@@ -8,8 +8,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 const { sizes, colors } = index.theme;
-const ColumnGrid = styled__default.default.div.withConfig({ displayName: "vui--ColumnGrid", componentId: "vui--ou7am9" }) `width:100%;display:grid;grid-template-columns:${({ showSidebar = true }) => showSidebar ? `calc(100% - 312px - ${sizes.md}) 312px` : '100% 312px'};align-items:flex-start;grid-gap:${sizes.md};transition:all 0.2s ease-in-out;& > *:nth-child(2){opacity:${({ showSidebar = true }) => (showSidebar ? '1.0' : '0')};transition:opacity 0.2s;}`;
-const ContentContainer = styled__default.default.div.withConfig({ displayName: "vui--ContentContainer", componentId: "vui--13fqlay" }) `width:100%;box-sizing:border-box;padding:${sizes.md};overflow-x:hidden;background-color:${colors.neutral.grey.lightest};`;
+const ColumnGrid = styled__default.default.div.withConfig({ displayName: "vui--ColumnGrid", componentId: "vui--2wnu9m" }) `width:100%;display:grid;grid-template-columns:${({ showSidebar = true }) => showSidebar ? `calc(100% - 312px - ${sizes.md}) 312px` : '100% 312px'};align-items:flex-start;grid-gap:${sizes.md};transition:all 0.2s ease-in-out;& > *:nth-child(2){opacity:${({ showSidebar = true }) => (showSidebar ? '1.0' : '0')};transition:opacity 0.2s;}`;
+const ContentContainer = styled__default.default.div.withConfig({ displayName: "vui--ContentContainer", componentId: "vui--nvukr5" }) `width:100%;box-sizing:border-box;padding:${sizes.md};overflow-x:hidden;background-color:${colors.neutral.grey.lightest};`;
 
 exports.ColumnGrid = ColumnGrid;
 exports.ContentContainer = ContentContainer;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/DetailPage/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nconst { sizes, colors } = theme;\n\nexport const ColumnGrid = styled.div<any>`\n  width: 100%;\n  display: grid;\n  grid-template-columns: ${({ showSidebar = true }) =>\n    showSidebar ? `calc(100% - 312px - ${sizes.md}) 312px` : '100% 312px'};\n  align-items: flex-start;\n  grid-gap: ${sizes.md};\n  transition: all 0.2s ease-in-out;\n\n  & > *:nth-child(2) {\n    opacity: ${({ showSidebar = true }) => (showSidebar ? '1.0' : '0')};\n    transition: opacity 0.2s;\n  }\n`;\n\nexport const ContentContainer = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  padding: ${sizes.md};\n  overflow-x: hidden;\n  background-color: ${colors.neutral.grey.lightest};\n`;\n"],"names":["theme","styled"],"mappings":";;;;;;;;;AAGA,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAGA,WAAK;AAElB,MAAA,UAAU,GAAGC,uBAAM,CAAC,GAAG,CAGT,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8CAAA,EAAA,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,KAC9C,WAAW,GAAG,CAAA,oBAAA,EAAuB,KAAK,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,YAAY,CAAA,iCAAA,EAE3D,KAAK,CAAC,EAAE,CAAA,4DAAA,EAIP,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,WAAW,GAAG,KAAK,GAAG,GAAG,CAAC,CAAA,0BAAA;MAKzD,gBAAgB,GAAGA,uBAAM,CAAC,GAAG,+HAG7B,KAAK,CAAC,EAAE,CAEC,oCAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/DetailPage/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nconst { sizes, colors } = theme;\n\nexport const ColumnGrid = styled.div<any>`\n  width: 100%;\n  display: grid;\n  grid-template-columns: ${({ showSidebar = true }) =>\n    showSidebar ? `calc(100% - 312px - ${sizes.md}) 312px` : '100% 312px'};\n  align-items: flex-start;\n  grid-gap: ${sizes.md};\n  transition: all 0.2s ease-in-out;\n\n  & > *:nth-child(2) {\n    opacity: ${({ showSidebar = true }) => (showSidebar ? '1.0' : '0')};\n    transition: opacity 0.2s;\n  }\n`;\n\nexport const ContentContainer = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  padding: ${sizes.md};\n  overflow-x: hidden;\n  background-color: ${colors.neutral.grey.lightest};\n`;\n"],"names":["theme","styled"],"mappings":";;;;;;;;;AAGA,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAGA,WAAK;AAElB,MAAA,UAAU,GAAGC,uBAAM,CAAC,GAAG,CAGT,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8CAAA,EAAA,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,KAC9C,WAAW,GAAG,CAAA,oBAAA,EAAuB,KAAK,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,YAAY,CAAA,iCAAA,EAE3D,KAAK,CAAC,EAAE,CAAA,4DAAA,EAIP,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,WAAW,GAAG,KAAK,GAAG,GAAG,CAAC,CAAA,0BAAA;MAKzD,gBAAgB,GAAGA,uBAAM,CAAC,GAAG,8HAG7B,KAAK,CAAC,EAAE,CAEC,oCAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;;;;;"}

package/dist/components/DetailPage/styled.js

@@ -2,8 +2,8 @@ import styled from 'styled-components';
 import { theme } from '../../theme/index.js';
 
 const { sizes, colors } = theme;
-const ColumnGrid = styled.div.withConfig({ displayName: "vui--ColumnGrid", componentId: "vui--ou7am9" }) `width:100%;display:grid;grid-template-columns:${({ showSidebar = true }) => showSidebar ? `calc(100% - 312px - ${sizes.md}) 312px` : '100% 312px'};align-items:flex-start;grid-gap:${sizes.md};transition:all 0.2s ease-in-out;& > *:nth-child(2){opacity:${({ showSidebar = true }) => (showSidebar ? '1.0' : '0')};transition:opacity 0.2s;}`;
-const ContentContainer = styled.div.withConfig({ displayName: "vui--ContentContainer", componentId: "vui--13fqlay" }) `width:100%;box-sizing:border-box;padding:${sizes.md};overflow-x:hidden;background-color:${colors.neutral.grey.lightest};`;
+const ColumnGrid = styled.div.withConfig({ displayName: "vui--ColumnGrid", componentId: "vui--2wnu9m" }) `width:100%;display:grid;grid-template-columns:${({ showSidebar = true }) => showSidebar ? `calc(100% - 312px - ${sizes.md}) 312px` : '100% 312px'};align-items:flex-start;grid-gap:${sizes.md};transition:all 0.2s ease-in-out;& > *:nth-child(2){opacity:${({ showSidebar = true }) => (showSidebar ? '1.0' : '0')};transition:opacity 0.2s;}`;
+const ContentContainer = styled.div.withConfig({ displayName: "vui--ContentContainer", componentId: "vui--nvukr5" }) `width:100%;box-sizing:border-box;padding:${sizes.md};overflow-x:hidden;background-color:${colors.neutral.grey.lightest};`;
 
 export { ColumnGrid, ContentContainer };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/DetailPage/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nconst { sizes, colors } = theme;\n\nexport const ColumnGrid = styled.div<any>`\n  width: 100%;\n  display: grid;\n  grid-template-columns: ${({ showSidebar = true }) =>\n    showSidebar ? `calc(100% - 312px - ${sizes.md}) 312px` : '100% 312px'};\n  align-items: flex-start;\n  grid-gap: ${sizes.md};\n  transition: all 0.2s ease-in-out;\n\n  & > *:nth-child(2) {\n    opacity: ${({ showSidebar = true }) => (showSidebar ? '1.0' : '0')};\n    transition: opacity 0.2s;\n  }\n`;\n\nexport const ContentContainer = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  padding: ${sizes.md};\n  overflow-x: hidden;\n  background-color: ${colors.neutral.grey.lightest};\n`;\n"],"names":[],"mappings":";;;AAGA,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK;AAElB,MAAA,UAAU,GAAG,MAAM,CAAC,GAAG,CAGT,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8CAAA,EAAA,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,KAC9C,WAAW,GAAG,CAAA,oBAAA,EAAuB,KAAK,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,YAAY,CAAA,iCAAA,EAE3D,KAAK,CAAC,EAAE,CAAA,4DAAA,EAIP,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,WAAW,GAAG,KAAK,GAAG,GAAG,CAAC,CAAA,0BAAA;MAKzD,gBAAgB,GAAG,MAAM,CAAC,GAAG,+HAG7B,KAAK,CAAC,EAAE,CAEC,oCAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/DetailPage/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nconst { sizes, colors } = theme;\n\nexport const ColumnGrid = styled.div<any>`\n  width: 100%;\n  display: grid;\n  grid-template-columns: ${({ showSidebar = true }) =>\n    showSidebar ? `calc(100% - 312px - ${sizes.md}) 312px` : '100% 312px'};\n  align-items: flex-start;\n  grid-gap: ${sizes.md};\n  transition: all 0.2s ease-in-out;\n\n  & > *:nth-child(2) {\n    opacity: ${({ showSidebar = true }) => (showSidebar ? '1.0' : '0')};\n    transition: opacity 0.2s;\n  }\n`;\n\nexport const ContentContainer = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  padding: ${sizes.md};\n  overflow-x: hidden;\n  background-color: ${colors.neutral.grey.lightest};\n`;\n"],"names":[],"mappings":";;;AAGA,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK;AAElB,MAAA,UAAU,GAAG,MAAM,CAAC,GAAG,CAGT,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8CAAA,EAAA,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,KAC9C,WAAW,GAAG,CAAA,oBAAA,EAAuB,KAAK,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,YAAY,CAAA,iCAAA,EAE3D,KAAK,CAAC,EAAE,CAAA,4DAAA,EAIP,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,WAAW,GAAG,KAAK,GAAG,GAAG,CAAC,CAAA,0BAAA;MAKzD,gBAAgB,GAAG,MAAM,CAAC,GAAG,8HAG7B,KAAK,CAAC,EAAE,CAEC,oCAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;;;;"}

package/dist/components/Dropdown/styled.cjs

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const DropdownContainer = styled__default.default(framerMotion.motion(Card.Card.Surface)).withConfig({ displayName: "vui--DropdownContainer", componentId: "vui--a1pzsa" }) `display:inline-flex;flex-direction:column;overflow:hidden;background-color:white;box-shadow:${index.theme.shadows.md};border-radius:${index.theme.radius.base};padding:${index.theme.sizes.base};`;
+const DropdownContainer = styled__default.default(framerMotion.motion(Card.Card.Surface)).withConfig({ displayName: "vui--DropdownContainer", componentId: "vui--1yrw4mw" }) `display:inline-flex;flex-direction:column;overflow:hidden;background-color:white;box-shadow:${index.theme.shadows.md};border-radius:${index.theme.radius.base};padding:${index.theme.sizes.base};`;
 
 exports.DropdownContainer = DropdownContainer;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Dropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../theme';\nimport { Card } from '../Card';\n\nexport const DropdownContainer = styled(motion(Card.Surface))`\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n\n  background-color: white;\n  box-shadow: ${theme.shadows.md};\n  border-radius: ${theme.radius.base};\n  padding: ${theme.sizes.base};\n`;\n"],"names":["styled","motion","Card","theme"],"mappings":";;;;;;;;;;;AAMO,MAAM,iBAAiB,GAAGA,uBAAM,CAACC,mBAAM,CAACC,SAAI,CAAC,OAAO,CAAC,CAAC,kLAM7CC,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACbA,WAAK,CAAC,MAAM,CAAC,IAAI,CACvB,SAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Dropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../theme';\nimport { Card } from '../Card';\n\nexport const DropdownContainer = styled(motion(Card.Surface))`\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n\n  background-color: white;\n  box-shadow: ${theme.shadows.md};\n  border-radius: ${theme.radius.base};\n  padding: ${theme.sizes.base};\n`;\n"],"names":["styled","motion","Card","theme"],"mappings":";;;;;;;;;;;AAMO,MAAM,iBAAiB,GAAGA,uBAAM,CAACC,mBAAM,CAACC,SAAI,CAAC,OAAO,CAAC,CAAC,mLAM7CC,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACbA,WAAK,CAAC,MAAM,CAAC,IAAI,CACvB,SAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,IAAI;;;;"}

package/dist/components/Dropdown/styled.js

@@ -3,7 +3,7 @@ import { motion } from 'framer-motion';
 import { theme } from '../../theme/index.js';
 import { Card } from '../Card/Card.js';
 
-const DropdownContainer = styled(motion(Card.Surface)).withConfig({ displayName: "vui--DropdownContainer", componentId: "vui--a1pzsa" }) `display:inline-flex;flex-direction:column;overflow:hidden;background-color:white;box-shadow:${theme.shadows.md};border-radius:${theme.radius.base};padding:${theme.sizes.base};`;
+const DropdownContainer = styled(motion(Card.Surface)).withConfig({ displayName: "vui--DropdownContainer", componentId: "vui--1yrw4mw" }) `display:inline-flex;flex-direction:column;overflow:hidden;background-color:white;box-shadow:${theme.shadows.md};border-radius:${theme.radius.base};padding:${theme.sizes.base};`;
 
 export { DropdownContainer };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Dropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../theme';\nimport { Card } from '../Card';\n\nexport const DropdownContainer = styled(motion(Card.Surface))`\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n\n  background-color: white;\n  box-shadow: ${theme.shadows.md};\n  border-radius: ${theme.radius.base};\n  padding: ${theme.sizes.base};\n`;\n"],"names":[],"mappings":";;;;;AAMO,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,kLAM7C,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACb,KAAK,CAAC,MAAM,CAAC,IAAI,CACvB,SAAA,EAAA,KAAK,CAAC,KAAK,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Dropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../theme';\nimport { Card } from '../Card';\n\nexport const DropdownContainer = styled(motion(Card.Surface))`\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n\n  background-color: white;\n  box-shadow: ${theme.shadows.md};\n  border-radius: ${theme.radius.base};\n  padding: ${theme.sizes.base};\n`;\n"],"names":[],"mappings":";;;;;AAMO,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,mLAM7C,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACb,KAAK,CAAC,MAAM,CAAC,IAAI,CACvB,SAAA,EAAA,KAAK,CAAC,KAAK,CAAC,IAAI;;;;"}

package/dist/components/FilterTag/styled.cjs

@@ -18,13 +18,13 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 const Container = styled__default.default(BaseContainer.BaseContainer).attrs({
     as: 'button',
-}).withConfig({ displayName: "vui--Container", componentId: "vui--19s57y8" }) `display:inline-flex;flex-direction:row;align-items:center;background-color:${colors.colors.neutral.grey.base};padding:4px 8px;cursor:pointer;border:1px solid ${colors.colors.neutral.grey.dark};border-radius:4px;svg{width:${sizes.sizes.base};height:${sizes.sizes.base};}&:focus{outline:none;box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}`;
-const NonSelectableText = styled__default.default(Text.Text).withConfig({ displayName: "vui--NonSelectableText", componentId: "vui--1ak8osw" }) `user-select:none;`;
-const GroupLabel = styled__default.default(NonSelectableText).withConfig({ displayName: "vui--GroupLabel", componentId: "vui--1a7ckch" }) `margin-right:4px;`;
-const MainIcon = styled__default.default(DownArrowIcon.DownArrowIcon).withConfig({ displayName: "vui--MainIcon", componentId: "vui--5uv5jf" }) `margin-left:4px;transform:rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});width:10px;height:10px;`;
-const StyledCrossIcon = styled__default.default(CrossIcon.CrossIcon).withConfig({ displayName: "vui--StyledCrossIcon", componentId: "vui--hr40u3" }) `margin-left:4px;height:10px;width:10px;`;
-const Content = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Content", componentId: "vui--1mrrlq1" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;`;
-const Header = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Header", componentId: "vui--n5pc9z" }) `display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:12px 18px;border-bottom:1px solid ${colors.colors.neutral.grey.base};svg{color:${({ color }) => color};width:${sizes.sizes[5]};height:${sizes.sizes[5]};margin-right:10px;}`;
+}).withConfig({ displayName: "vui--Container", componentId: "vui--1tebbdi" }) `display:inline-flex;flex-direction:row;align-items:center;background-color:${colors.colors.neutral.grey.base};padding:4px 8px;cursor:pointer;border:1px solid ${colors.colors.neutral.grey.dark};border-radius:4px;svg{width:${sizes.sizes.base};height:${sizes.sizes.base};}&:focus{outline:none;box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}`;
+const NonSelectableText = styled__default.default(Text.Text).withConfig({ displayName: "vui--NonSelectableText", componentId: "vui--qz697a" }) `user-select:none;`;
+const GroupLabel = styled__default.default(NonSelectableText).withConfig({ displayName: "vui--GroupLabel", componentId: "vui--17i198i" }) `margin-right:4px;`;
+const MainIcon = styled__default.default(DownArrowIcon.DownArrowIcon).withConfig({ displayName: "vui--MainIcon", componentId: "vui--rxq762" }) `margin-left:4px;transform:rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});width:10px;height:10px;`;
+const StyledCrossIcon = styled__default.default(CrossIcon.CrossIcon).withConfig({ displayName: "vui--StyledCrossIcon", componentId: "vui--1o2zyml" }) `margin-left:4px;height:10px;width:10px;`;
+const Content = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Content", componentId: "vui--6n2anv" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;`;
+const Header = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Header", componentId: "vui--n9war0" }) `display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:12px 18px;border-bottom:1px solid ${colors.colors.neutral.grey.base};svg{color:${({ color }) => color};width:${sizes.sizes[5]};height:${sizes.sizes[5]};margin-right:10px;}`;
 
 exports.Text = Text.Text;
 exports.Container = Container;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { AnimatedDropdown } from '../AnimatedDropdown';\nimport { CrossIcon } from '../../icons/CrossIcon';\nimport { DownArrowIcon } from '../../icons/DownArrowIcon';\nimport { sizes } from '../../theme/modules/sizes';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer).attrs({\n  as: 'button',\n})`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${colors.neutral.grey.base};\n  padding: 4px 8px;\n  cursor: pointer;\n\n  border: 1px solid ${colors.neutral.grey.dark};\n  border-radius: 4px;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst NonSelectableText = styled(Text)`\n  user-select: none;\n`;\n\nconst GroupLabel = styled(NonSelectableText)`\n  margin-right: 4px;\n`;\n\nconst MainIcon = styled(DownArrowIcon)<{ $shouldShow?: boolean }>`\n  margin-left: 4px;\n  transform: rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});\n\n  width: 10px;\n  height: 10px;\n`;\n\nconst StyledCrossIcon = styled(CrossIcon)`\n  margin-left: 4px;\n  height: 10px;\n  width: 10px;\n`;\n\nconst Content = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n`;\n\nconst Header = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 12px 18px;\n  border-bottom: 1px solid ${colors.neutral.grey.base};\n\n  svg {\n    color: ${({ color }) => color};\n    width: ${sizes[5]};\n    height: ${sizes[5]};\n    margin-right: 10px;\n  }\n`;\n\nexport {\n  Container,\n  Text,\n  AnimatedDropdown as Dropdown,\n  GroupLabel,\n  Content,\n  Header,\n  MainIcon,\n  StyledCrossIcon as CrossIcon,\n};\n"],"names":["styled","BaseContainer","colors","sizes","theme","Text","DownArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAYM,MAAA,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,EAAE,EAAE,QAAQ;AACb,CAAA,CAAC,CAIoB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2EAAA,EAAAC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iDAAA,EAIxBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,6BAAA,EAIjCC,WAAK,CAAC,IAAI,CACT,QAAA,EAAAA,WAAK,CAAC,IAAI,+CAKIC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,iBAAiB,GAAGJ,uBAAM,CAACK,SAAI,CAAC,uGAErC;AAED,MAAM,UAAU,GAAGL,uBAAM,CAAC,iBAAiB,CAAC;AAItC,MAAA,QAAQ,GAAGA,uBAAM,CAACM,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEhB,CAAC,KAAK,MAAM,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAA,yBAAA;AAMrE,MAAM,eAAe,GAAGN,uBAAM,CAACO,mBAAS,CAAC;AAMzC,MAAM,OAAO,GAAGP,uBAAM,CAACC,2BAAa,CAAC;AAOrC,MAAM,MAAM,GAAGD,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAMPC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,cAGxC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,UACpBC,WAAK,CAAC,CAAC,CAAC,WACPA,WAAK,CAAC,CAAC,CAAC;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { AnimatedDropdown } from '../AnimatedDropdown';\nimport { CrossIcon } from '../../icons/CrossIcon';\nimport { DownArrowIcon } from '../../icons/DownArrowIcon';\nimport { sizes } from '../../theme/modules/sizes';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer).attrs({\n  as: 'button',\n})`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${colors.neutral.grey.base};\n  padding: 4px 8px;\n  cursor: pointer;\n\n  border: 1px solid ${colors.neutral.grey.dark};\n  border-radius: 4px;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst NonSelectableText = styled(Text)`\n  user-select: none;\n`;\n\nconst GroupLabel = styled(NonSelectableText)`\n  margin-right: 4px;\n`;\n\nconst MainIcon = styled(DownArrowIcon)<{ $shouldShow?: boolean }>`\n  margin-left: 4px;\n  transform: rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});\n\n  width: 10px;\n  height: 10px;\n`;\n\nconst StyledCrossIcon = styled(CrossIcon)`\n  margin-left: 4px;\n  height: 10px;\n  width: 10px;\n`;\n\nconst Content = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n`;\n\nconst Header = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 12px 18px;\n  border-bottom: 1px solid ${colors.neutral.grey.base};\n\n  svg {\n    color: ${({ color }) => color};\n    width: ${sizes[5]};\n    height: ${sizes[5]};\n    margin-right: 10px;\n  }\n`;\n\nexport {\n  Container,\n  Text,\n  AnimatedDropdown as Dropdown,\n  GroupLabel,\n  Content,\n  Header,\n  MainIcon,\n  StyledCrossIcon as CrossIcon,\n};\n"],"names":["styled","BaseContainer","colors","sizes","theme","Text","DownArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAYM,MAAA,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,EAAE,EAAE,QAAQ;AACb,CAAA,CAAC,CAIoB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2EAAA,EAAAC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iDAAA,EAIxBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,6BAAA,EAIjCC,WAAK,CAAC,IAAI,CACT,QAAA,EAAAA,WAAK,CAAC,IAAI,+CAKIC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,iBAAiB,GAAGJ,uBAAM,CAACK,SAAI,CAAC,sGAErC;AAED,MAAM,UAAU,GAAGL,uBAAM,CAAC,iBAAiB,CAAC;AAItC,MAAA,QAAQ,GAAGA,uBAAM,CAACM,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEhB,CAAC,KAAK,MAAM,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAA,yBAAA;AAMrE,MAAM,eAAe,GAAGN,uBAAM,CAACO,mBAAS,CAAC;AAMzC,MAAM,OAAO,GAAGP,uBAAM,CAACC,2BAAa,CAAC;AAOrC,MAAM,MAAM,GAAGD,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAMPC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,cAGxC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,UACpBC,WAAK,CAAC,CAAC,CAAC,WACPA,WAAK,CAAC,CAAC,CAAC;;;;;;;;;;"}

package/dist/components/FilterTag/styled.js

@@ -12,13 +12,13 @@ import { theme } from '../../theme/index.js';
 
 const Container = styled(BaseContainer).attrs({
     as: 'button',
-}).withConfig({ displayName: "vui--Container", componentId: "vui--19s57y8" }) `display:inline-flex;flex-direction:row;align-items:center;background-color:${colors.neutral.grey.base};padding:4px 8px;cursor:pointer;border:1px solid ${colors.neutral.grey.dark};border-radius:4px;svg{width:${sizes.base};height:${sizes.base};}&:focus{outline:none;box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}`;
-const NonSelectableText = styled(Text).withConfig({ displayName: "vui--NonSelectableText", componentId: "vui--1ak8osw" }) `user-select:none;`;
-const GroupLabel = styled(NonSelectableText).withConfig({ displayName: "vui--GroupLabel", componentId: "vui--1a7ckch" }) `margin-right:4px;`;
-const MainIcon = styled(DownArrowIcon).withConfig({ displayName: "vui--MainIcon", componentId: "vui--5uv5jf" }) `margin-left:4px;transform:rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});width:10px;height:10px;`;
-const StyledCrossIcon = styled(CrossIcon).withConfig({ displayName: "vui--StyledCrossIcon", componentId: "vui--hr40u3" }) `margin-left:4px;height:10px;width:10px;`;
-const Content = styled(BaseContainer).withConfig({ displayName: "vui--Content", componentId: "vui--1mrrlq1" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;`;
-const Header = styled(BaseContainer).withConfig({ displayName: "vui--Header", componentId: "vui--n5pc9z" }) `display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:12px 18px;border-bottom:1px solid ${colors.neutral.grey.base};svg{color:${({ color }) => color};width:${sizes[5]};height:${sizes[5]};margin-right:10px;}`;
+}).withConfig({ displayName: "vui--Container", componentId: "vui--1tebbdi" }) `display:inline-flex;flex-direction:row;align-items:center;background-color:${colors.neutral.grey.base};padding:4px 8px;cursor:pointer;border:1px solid ${colors.neutral.grey.dark};border-radius:4px;svg{width:${sizes.base};height:${sizes.base};}&:focus{outline:none;box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}`;
+const NonSelectableText = styled(Text).withConfig({ displayName: "vui--NonSelectableText", componentId: "vui--qz697a" }) `user-select:none;`;
+const GroupLabel = styled(NonSelectableText).withConfig({ displayName: "vui--GroupLabel", componentId: "vui--17i198i" }) `margin-right:4px;`;
+const MainIcon = styled(DownArrowIcon).withConfig({ displayName: "vui--MainIcon", componentId: "vui--rxq762" }) `margin-left:4px;transform:rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});width:10px;height:10px;`;
+const StyledCrossIcon = styled(CrossIcon).withConfig({ displayName: "vui--StyledCrossIcon", componentId: "vui--1o2zyml" }) `margin-left:4px;height:10px;width:10px;`;
+const Content = styled(BaseContainer).withConfig({ displayName: "vui--Content", componentId: "vui--6n2anv" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;`;
+const Header = styled(BaseContainer).withConfig({ displayName: "vui--Header", componentId: "vui--n9war0" }) `display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:12px 18px;border-bottom:1px solid ${colors.neutral.grey.base};svg{color:${({ color }) => color};width:${sizes[5]};height:${sizes[5]};margin-right:10px;}`;
 
 export { Container, Content, StyledCrossIcon as CrossIcon, GroupLabel, Header, MainIcon, Text };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { AnimatedDropdown } from '../AnimatedDropdown';\nimport { CrossIcon } from '../../icons/CrossIcon';\nimport { DownArrowIcon } from '../../icons/DownArrowIcon';\nimport { sizes } from '../../theme/modules/sizes';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer).attrs({\n  as: 'button',\n})`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${colors.neutral.grey.base};\n  padding: 4px 8px;\n  cursor: pointer;\n\n  border: 1px solid ${colors.neutral.grey.dark};\n  border-radius: 4px;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst NonSelectableText = styled(Text)`\n  user-select: none;\n`;\n\nconst GroupLabel = styled(NonSelectableText)`\n  margin-right: 4px;\n`;\n\nconst MainIcon = styled(DownArrowIcon)<{ $shouldShow?: boolean }>`\n  margin-left: 4px;\n  transform: rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});\n\n  width: 10px;\n  height: 10px;\n`;\n\nconst StyledCrossIcon = styled(CrossIcon)`\n  margin-left: 4px;\n  height: 10px;\n  width: 10px;\n`;\n\nconst Content = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n`;\n\nconst Header = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 12px 18px;\n  border-bottom: 1px solid ${colors.neutral.grey.base};\n\n  svg {\n    color: ${({ color }) => color};\n    width: ${sizes[5]};\n    height: ${sizes[5]};\n    margin-right: 10px;\n  }\n`;\n\nexport {\n  Container,\n  Text,\n  AnimatedDropdown as Dropdown,\n  GroupLabel,\n  Content,\n  Header,\n  MainIcon,\n  StyledCrossIcon as CrossIcon,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAYM,MAAA,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,EAAE,EAAE,QAAQ;AACb,CAAA,CAAC,CAIoB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2EAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iDAAA,EAIxB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,6BAAA,EAIjC,KAAK,CAAC,IAAI,CACT,QAAA,EAAA,KAAK,CAAC,IAAI,+CAKI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,uGAErC;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAItC,MAAA,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEhB,CAAC,KAAK,MAAM,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAA,yBAAA;AAMrE,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC;AAMzC,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC;AAOrC,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAMP,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,cAGxC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,UACpB,KAAK,CAAC,CAAC,CAAC,WACP,KAAK,CAAC,CAAC,CAAC;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { AnimatedDropdown } from '../AnimatedDropdown';\nimport { CrossIcon } from '../../icons/CrossIcon';\nimport { DownArrowIcon } from '../../icons/DownArrowIcon';\nimport { sizes } from '../../theme/modules/sizes';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer).attrs({\n  as: 'button',\n})`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${colors.neutral.grey.base};\n  padding: 4px 8px;\n  cursor: pointer;\n\n  border: 1px solid ${colors.neutral.grey.dark};\n  border-radius: 4px;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst NonSelectableText = styled(Text)`\n  user-select: none;\n`;\n\nconst GroupLabel = styled(NonSelectableText)`\n  margin-right: 4px;\n`;\n\nconst MainIcon = styled(DownArrowIcon)<{ $shouldShow?: boolean }>`\n  margin-left: 4px;\n  transform: rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});\n\n  width: 10px;\n  height: 10px;\n`;\n\nconst StyledCrossIcon = styled(CrossIcon)`\n  margin-left: 4px;\n  height: 10px;\n  width: 10px;\n`;\n\nconst Content = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n`;\n\nconst Header = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 12px 18px;\n  border-bottom: 1px solid ${colors.neutral.grey.base};\n\n  svg {\n    color: ${({ color }) => color};\n    width: ${sizes[5]};\n    height: ${sizes[5]};\n    margin-right: 10px;\n  }\n`;\n\nexport {\n  Container,\n  Text,\n  AnimatedDropdown as Dropdown,\n  GroupLabel,\n  Content,\n  Header,\n  MainIcon,\n  StyledCrossIcon as CrossIcon,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAYM,MAAA,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,EAAE,EAAE,QAAQ;AACb,CAAA,CAAC,CAIoB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2EAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iDAAA,EAIxB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,6BAAA,EAIjC,KAAK,CAAC,IAAI,CACT,QAAA,EAAA,KAAK,CAAC,IAAI,+CAKI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,sGAErC;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAItC,MAAA,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEhB,CAAC,KAAK,MAAM,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAA,yBAAA;AAMrE,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC;AAMzC,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC;AAOrC,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAMP,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,cAGxC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,UACpB,KAAK,CAAC,CAAC,CAAC,WACP,KAAK,CAAC,CAAC,CAAC;;;;"}

package/dist/components/Grid/index.cjs

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Grid = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Grid", componentId: "vui--3pgs92" }) `display:grid;grid-template-columns:repeat(${({ columns }) => columns}, 1fr);grid-gap:${({ spacing = 'base' }) => (spacing ? sizes.sizes[spacing] : 0)};`;
+const Grid = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Grid", componentId: "vui--12w0ynf" }) `display:grid;grid-template-columns:repeat(${({ columns }) => columns}, 1fr);grid-gap:${({ spacing = 'base' }) => (spacing ? sizes.sizes[spacing] : 0)};`;
 
 exports.Grid = Grid;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Grid/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Grid/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { GridProps } from './types';\n\nexport const Grid = styled(BaseContainer)<GridProps>`\n  display: grid;\n  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);\n  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};\n`;\n"],"names":["styled","BaseContainer","sizes"],"mappings":";;;;;;;;;;AAOa,MAAA,IAAI,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,0CAAA,EAEP,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA,gBAAA,EAC5C,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,OAAO,GAAGC,WAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Grid/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { GridProps } from './types';\n\nexport const Grid = styled(BaseContainer)<GridProps>`\n  display: grid;\n  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);\n  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};\n`;\n"],"names":["styled","BaseContainer","sizes"],"mappings":";;;;;;;;;;AAOa,MAAA,IAAI,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,0CAAA,EAEP,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA,gBAAA,EAC5C,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,OAAO,GAAGC,WAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;;;;"}

package/dist/components/Grid/index.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 import { sizes } from '../../theme/modules/sizes.js';
 
-const Grid = styled(BaseContainer).withConfig({ displayName: "vui--Grid", componentId: "vui--3pgs92" }) `display:grid;grid-template-columns:repeat(${({ columns }) => columns}, 1fr);grid-gap:${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};`;
+const Grid = styled(BaseContainer).withConfig({ displayName: "vui--Grid", componentId: "vui--12w0ynf" }) `display:grid;grid-template-columns:repeat(${({ columns }) => columns}, 1fr);grid-gap:${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};`;
 
 export { Grid };
 //# sourceMappingURL=index.js.map

package/dist/components/Grid/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Grid/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { GridProps } from './types';\n\nexport const Grid = styled(BaseContainer)<GridProps>`\n  display: grid;\n  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);\n  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};\n`;\n"],"names":[],"mappings":";;;;AAOa,MAAA,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,0CAAA,EAEP,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA,gBAAA,EAC5C,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Grid/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { GridProps } from './types';\n\nexport const Grid = styled(BaseContainer)<GridProps>`\n  display: grid;\n  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);\n  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};\n`;\n"],"names":[],"mappings":";;;;AAOa,MAAA,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,0CAAA,EAEP,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA,gBAAA,EAC5C,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;;;;"}

package/dist/components/Image/components/styled.cjs

@@ -6,10 +6,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--is09u5" }) ``;
-const CommonImage = styled__default.default.img.withConfig({ displayName: "vui--CommonImage", componentId: "vui--mr7ygv" }) `box-sizing:border-box;cursor:${({ previewEnabled }) => (previewEnabled ? 'zoom-in' : 'default')};`;
-const PreviewImageContainer = styled__default.default.div.withConfig({ displayName: "vui--PreviewImageContainer", componentId: "vui--1ep6u58" }) `z-index:10;background-color:transparent;`;
-const PreviewImage = styled__default.default.img.withConfig({ displayName: "vui--PreviewImage", componentId: "vui--2t2qen" }) `box-shadow:0 4px 12px rgba(27, 33, 38, 0.2);`;
+const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--yyvmx7" }) ``;
+const CommonImage = styled__default.default.img.withConfig({ displayName: "vui--CommonImage", componentId: "vui--exntyx" }) `box-sizing:border-box;cursor:${({ previewEnabled }) => (previewEnabled ? 'zoom-in' : 'default')};`;
+const PreviewImageContainer = styled__default.default.div.withConfig({ displayName: "vui--PreviewImageContainer", componentId: "vui--jt8oew" }) `z-index:10;background-color:transparent;`;
+const PreviewImage = styled__default.default.img.withConfig({ displayName: "vui--PreviewImage", componentId: "vui--xulm2g" }) `box-shadow:0 4px 12px rgba(27, 33, 38, 0.2);`;
 
 exports.CommonImage = CommonImage;
 exports.Container = Container;

package/dist/components/Image/components/styled.js

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 
-const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--is09u5" }) ``;
-const CommonImage = styled.img.withConfig({ displayName: "vui--CommonImage", componentId: "vui--mr7ygv" }) `box-sizing:border-box;cursor:${({ previewEnabled }) => (previewEnabled ? 'zoom-in' : 'default')};`;
-const PreviewImageContainer = styled.div.withConfig({ displayName: "vui--PreviewImageContainer", componentId: "vui--1ep6u58" }) `z-index:10;background-color:transparent;`;
-const PreviewImage = styled.img.withConfig({ displayName: "vui--PreviewImage", componentId: "vui--2t2qen" }) `box-shadow:0 4px 12px rgba(27, 33, 38, 0.2);`;
+const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--yyvmx7" }) ``;
+const CommonImage = styled.img.withConfig({ displayName: "vui--CommonImage", componentId: "vui--exntyx" }) `box-sizing:border-box;cursor:${({ previewEnabled }) => (previewEnabled ? 'zoom-in' : 'default')};`;
+const PreviewImageContainer = styled.div.withConfig({ displayName: "vui--PreviewImageContainer", componentId: "vui--jt8oew" }) `z-index:10;background-color:transparent;`;
+const PreviewImage = styled.img.withConfig({ displayName: "vui--PreviewImage", componentId: "vui--xulm2g" }) `box-shadow:0 4px 12px rgba(27, 33, 38, 0.2);`;
 
 export { CommonImage, Container, PreviewImage, PreviewImageContainer };
 //# sourceMappingURL=styled.js.map

package/dist/components/Indicator/styled.cjs

@@ -22,7 +22,7 @@ const offset = {
     sm: '-8px',
     xs: '-6px',
 };
-const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--19sif27" }) `position:absolute;top:${({ size }) => offset[size]};right:${({ size }) => offset[size]};box-sizing:border-box;height:${({ size }) => sizes[size]};min-width:${({ size }) => sizes[size]};display:flex;align-items:center;justify-content:center;border-radius:${({ size }) => borderRadius[size]};padding:0 4px;background-color:${({ color }) => color || index.theme.colors.neutral.grey.base};border:2px solid white;font-weight:bold;font-size:12px;`;
+const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--gpqjtl" }) `position:absolute;top:${({ size }) => offset[size]};right:${({ size }) => offset[size]};box-sizing:border-box;height:${({ size }) => sizes[size]};min-width:${({ size }) => sizes[size]};display:flex;align-items:center;justify-content:center;border-radius:${({ size }) => borderRadius[size]};padding:0 4px;background-color:${({ color }) => color || index.theme.colors.neutral.grey.base};border:2px solid white;font-weight:bold;font-size:12px;`;
 
 exports.Wrapper = Wrapper;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Indicator/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\n\nconst sizes = {\n  base: '28px',\n  sm: '20px',\n  xs: '16px',\n};\n\nconst borderRadius = {\n  base: '18px',\n  sm: '10px',\n  xs: '8px',\n};\n\nconst offset = {\n  base: '-12px',\n  sm: '-8px',\n  xs: '-6px',\n};\n\nexport const Wrapper = styled.div<{ size: 'base' | 'sm' | 'xs' }>`\n  position: absolute;\n  top: ${({ size }) => offset[size]};\n  right: ${({ size }) => offset[size]};\n  box-sizing: border-box;\n\n  height: ${({ size }) => sizes[size]};\n  min-width: ${({ size }) => sizes[size]};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ${({ size }) => borderRadius[size]};\n  padding: 0 4px;\n  background-color: ${({ color }) => color || theme.colors.neutral.grey.base};\n  border: 2px solid white;\n  font-weight: bold;\n  font-size: 12px;\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAGA,MAAM,KAAK,GAAG;AACZ,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,KAAK;CACV;AAED,MAAM,MAAM,GAAG;AACb,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAEY,MAAA,OAAO,GAAGA,uBAAM,CAAC,GAAG,CAExB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,CAAA,OAAA,EACxB,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,iCAGzB,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CACtB,WAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAIrB,sEAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAA,gCAAA,EAE7B,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAIC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Indicator/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\n\nconst sizes = {\n  base: '28px',\n  sm: '20px',\n  xs: '16px',\n};\n\nconst borderRadius = {\n  base: '18px',\n  sm: '10px',\n  xs: '8px',\n};\n\nconst offset = {\n  base: '-12px',\n  sm: '-8px',\n  xs: '-6px',\n};\n\nexport const Wrapper = styled.div<{ size: 'base' | 'sm' | 'xs' }>`\n  position: absolute;\n  top: ${({ size }) => offset[size]};\n  right: ${({ size }) => offset[size]};\n  box-sizing: border-box;\n\n  height: ${({ size }) => sizes[size]};\n  min-width: ${({ size }) => sizes[size]};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ${({ size }) => borderRadius[size]};\n  padding: 0 4px;\n  background-color: ${({ color }) => color || theme.colors.neutral.grey.base};\n  border: 2px solid white;\n  font-weight: bold;\n  font-size: 12px;\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAGA,MAAM,KAAK,GAAG;AACZ,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,KAAK;CACV;AAED,MAAM,MAAM,GAAG;AACb,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAEY,MAAA,OAAO,GAAGA,uBAAM,CAAC,GAAG,CAExB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,CAAA,OAAA,EACxB,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,iCAGzB,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CACtB,WAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAIrB,sEAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAA,gCAAA,EAE7B,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAIC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}

package/dist/components/Indicator/styled.js

@@ -16,7 +16,7 @@ const offset = {
     sm: '-8px',
     xs: '-6px',
 };
-const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--19sif27" }) `position:absolute;top:${({ size }) => offset[size]};right:${({ size }) => offset[size]};box-sizing:border-box;height:${({ size }) => sizes[size]};min-width:${({ size }) => sizes[size]};display:flex;align-items:center;justify-content:center;border-radius:${({ size }) => borderRadius[size]};padding:0 4px;background-color:${({ color }) => color || theme.colors.neutral.grey.base};border:2px solid white;font-weight:bold;font-size:12px;`;
+const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--gpqjtl" }) `position:absolute;top:${({ size }) => offset[size]};right:${({ size }) => offset[size]};box-sizing:border-box;height:${({ size }) => sizes[size]};min-width:${({ size }) => sizes[size]};display:flex;align-items:center;justify-content:center;border-radius:${({ size }) => borderRadius[size]};padding:0 4px;background-color:${({ color }) => color || theme.colors.neutral.grey.base};border:2px solid white;font-weight:bold;font-size:12px;`;
 
 export { Wrapper };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Indicator/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\n\nconst sizes = {\n  base: '28px',\n  sm: '20px',\n  xs: '16px',\n};\n\nconst borderRadius = {\n  base: '18px',\n  sm: '10px',\n  xs: '8px',\n};\n\nconst offset = {\n  base: '-12px',\n  sm: '-8px',\n  xs: '-6px',\n};\n\nexport const Wrapper = styled.div<{ size: 'base' | 'sm' | 'xs' }>`\n  position: absolute;\n  top: ${({ size }) => offset[size]};\n  right: ${({ size }) => offset[size]};\n  box-sizing: border-box;\n\n  height: ${({ size }) => sizes[size]};\n  min-width: ${({ size }) => sizes[size]};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ${({ size }) => borderRadius[size]};\n  padding: 0 4px;\n  background-color: ${({ color }) => color || theme.colors.neutral.grey.base};\n  border: 2px solid white;\n  font-weight: bold;\n  font-size: 12px;\n`;\n"],"names":[],"mappings":";;;AAGA,MAAM,KAAK,GAAG;AACZ,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,KAAK;CACV;AAED,MAAM,MAAM,GAAG;AACb,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAEY,MAAA,OAAO,GAAG,MAAM,CAAC,GAAG,CAExB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,CAAA,OAAA,EACxB,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,iCAGzB,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CACtB,WAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAIrB,sEAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAA,gCAAA,EAE7B,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Indicator/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\n\nconst sizes = {\n  base: '28px',\n  sm: '20px',\n  xs: '16px',\n};\n\nconst borderRadius = {\n  base: '18px',\n  sm: '10px',\n  xs: '8px',\n};\n\nconst offset = {\n  base: '-12px',\n  sm: '-8px',\n  xs: '-6px',\n};\n\nexport const Wrapper = styled.div<{ size: 'base' | 'sm' | 'xs' }>`\n  position: absolute;\n  top: ${({ size }) => offset[size]};\n  right: ${({ size }) => offset[size]};\n  box-sizing: border-box;\n\n  height: ${({ size }) => sizes[size]};\n  min-width: ${({ size }) => sizes[size]};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ${({ size }) => borderRadius[size]};\n  padding: 0 4px;\n  background-color: ${({ color }) => color || theme.colors.neutral.grey.base};\n  border: 2px solid white;\n  font-weight: bold;\n  font-size: 12px;\n`;\n"],"names":[],"mappings":";;;AAGA,MAAM,KAAK,GAAG;AACZ,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,KAAK;CACV;AAED,MAAM,MAAM,GAAG;AACb,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAEY,MAAA,OAAO,GAAG,MAAM,CAAC,GAAG,CAExB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,CAAA,OAAA,EACxB,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,iCAGzB,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CACtB,WAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAIrB,sEAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAA,gCAAA,EAE7B,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}

package/dist/components/InputAffix/InputAffix.cjs

@@ -12,8 +12,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--1w9m9mr" }) `user-select:none;flex-shrink:0;${inputStyles.inputFullStyles} ${index.InputGroup}:has(:disabled)&{background-color:${index$1.theme.colors.neutral.grey.light};}`;
-const StyledHint = styled__default.default(Text.Text).attrs({ variant: 'hintText' }).withConfig({ displayName: "vui--StyledHint", componentId: "vui--a1h5ca" }) `font-size:${index$1.theme.text.body.fontSize};`;
+const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--zm6t34" }) `user-select:none;flex-shrink:0;${inputStyles.inputFullStyles} ${index.InputGroup}:has(:disabled)&{background-color:${index$1.theme.colors.neutral.grey.light};}`;
+const StyledHint = styled__default.default(Text.Text).attrs({ variant: 'hintText' }).withConfig({ displayName: "vui--StyledHint", componentId: "vui--8xnkei" }) `font-size:${index$1.theme.text.body.fontSize};`;
 function InputAffix({ children, ...otherProps }) {
     return (React__default.default.createElement(Container, { ...otherProps },
         React__default.default.createElement(StyledHint, { variant: "hintText" }, children)));

package/dist/components/InputAffix/InputAffix.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputAffix.cjs","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { FormComponentProps } from '../types';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nconst Container = styled.div<InputAffixProps>`\n  user-select: none;\n  flex-shrink: 0;\n\n  ${inputFullStyles}\n\n  ${InputGroup}:has(:disabled) & {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n`;\n\nconst StyledHint = styled(Text).attrs({ variant: 'hintText' })`\n  font-size: ${theme.text.body.fontSize};\n`;\n\nexport function InputAffix({ children, ...otherProps }: InputAffixProps) {\n  return (\n    <Container {...otherProps}>\n      <StyledHint variant=\"hintText\">{children}</StyledHint>\n    </Container>\n  );\n}\n\nInputAffix.Container = Container;\n"],"names":["styled","inputFullStyles","InputGroup","theme","Text","React"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG,CAIxB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+BAAA,EAAAC,2BAAe,IAEfC,gBAAU,CAAA,kCAAA,EACUC,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,IAEtD;AAED,MAAM,UAAU,GAAGH,uBAAM,CAACI,SAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAC/C,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAAAD,aAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,CAAA,CACtC;AAEK,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAmB,EAAA;AACrE,IAAA,QACEE,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GAAK,UAAU,EAAA;QACvBA,sBAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,OAAO,EAAC,UAAU,IAAE,QAAQ,CAAc,CAC5C;AAEhB;AAEA,UAAU,CAAC,SAAS,GAAG,SAAS;;;;"}
+{"version":3,"file":"InputAffix.cjs","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { FormComponentProps } from '../types';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nconst Container = styled.div<InputAffixProps>`\n  user-select: none;\n  flex-shrink: 0;\n\n  ${inputFullStyles}\n\n  ${InputGroup}:has(:disabled) & {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n`;\n\nconst StyledHint = styled(Text).attrs({ variant: 'hintText' })`\n  font-size: ${theme.text.body.fontSize};\n`;\n\nexport function InputAffix({ children, ...otherProps }: InputAffixProps) {\n  return (\n    <Container {...otherProps}>\n      <StyledHint variant=\"hintText\">{children}</StyledHint>\n    </Container>\n  );\n}\n\nInputAffix.Container = Container;\n"],"names":["styled","inputFullStyles","InputGroup","theme","Text","React"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG,CAIxB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+BAAA,EAAAC,2BAAe,IAEfC,gBAAU,CAAA,kCAAA,EACUC,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,IAEtD;AAED,MAAM,UAAU,GAAGH,uBAAM,CAACI,SAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAC/C,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAAAD,aAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,CAAA,CACtC;AAEK,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAmB,EAAA;AACrE,IAAA,QACEE,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GAAK,UAAU,EAAA;QACvBA,sBAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,OAAO,EAAC,UAAU,IAAE,QAAQ,CAAc,CAC5C;AAEhB;AAEA,UAAU,CAAC,SAAS,GAAG,SAAS;;;;"}

package/dist/components/InputAffix/InputAffix.js

@@ -5,8 +5,8 @@ import { theme } from '../../theme/index.js';
 import { Text } from '../Text/Text.js';
 import { InputGroup } from '../InputGroup/index.js';
 
-const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--1w9m9mr" }) `user-select:none;flex-shrink:0;${inputFullStyles} ${InputGroup}:has(:disabled)&{background-color:${theme.colors.neutral.grey.light};}`;
-const StyledHint = styled(Text).attrs({ variant: 'hintText' }).withConfig({ displayName: "vui--StyledHint", componentId: "vui--a1h5ca" }) `font-size:${theme.text.body.fontSize};`;
+const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--zm6t34" }) `user-select:none;flex-shrink:0;${inputFullStyles} ${InputGroup}:has(:disabled)&{background-color:${theme.colors.neutral.grey.light};}`;
+const StyledHint = styled(Text).attrs({ variant: 'hintText' }).withConfig({ displayName: "vui--StyledHint", componentId: "vui--8xnkei" }) `font-size:${theme.text.body.fontSize};`;
 function InputAffix({ children, ...otherProps }) {
     return (React__default.createElement(Container, { ...otherProps },
         React__default.createElement(StyledHint, { variant: "hintText" }, children)));

package/dist/components/InputAffix/InputAffix.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputAffix.js","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { FormComponentProps } from '../types';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nconst Container = styled.div<InputAffixProps>`\n  user-select: none;\n  flex-shrink: 0;\n\n  ${inputFullStyles}\n\n  ${InputGroup}:has(:disabled) & {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n`;\n\nconst StyledHint = styled(Text).attrs({ variant: 'hintText' })`\n  font-size: ${theme.text.body.fontSize};\n`;\n\nexport function InputAffix({ children, ...otherProps }: InputAffixProps) {\n  return (\n    <Container {...otherProps}>\n      <StyledHint variant=\"hintText\">{children}</StyledHint>\n    </Container>\n  );\n}\n\nInputAffix.Container = Container;\n"],"names":["React"],"mappings":";;;;;;;AAUA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAIxB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+BAAA,EAAA,eAAe,IAEf,UAAU,CAAA,kCAAA,EACU,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,IAEtD;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAC/C,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,CAAA,CACtC;AAEK,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAmB,EAAA;AACrE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GAAK,UAAU,EAAA;QACvBA,cAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,OAAO,EAAC,UAAU,IAAE,QAAQ,CAAc,CAC5C;AAEhB;AAEA,UAAU,CAAC,SAAS,GAAG,SAAS;;;;"}
+{"version":3,"file":"InputAffix.js","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { FormComponentProps } from '../types';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nconst Container = styled.div<InputAffixProps>`\n  user-select: none;\n  flex-shrink: 0;\n\n  ${inputFullStyles}\n\n  ${InputGroup}:has(:disabled) & {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n`;\n\nconst StyledHint = styled(Text).attrs({ variant: 'hintText' })`\n  font-size: ${theme.text.body.fontSize};\n`;\n\nexport function InputAffix({ children, ...otherProps }: InputAffixProps) {\n  return (\n    <Container {...otherProps}>\n      <StyledHint variant=\"hintText\">{children}</StyledHint>\n    </Container>\n  );\n}\n\nInputAffix.Container = Container;\n"],"names":["React"],"mappings":";;;;;;;AAUA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAIxB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+BAAA,EAAA,eAAe,IAEf,UAAU,CAAA,kCAAA,EACU,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,IAEtD;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAC/C,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,CAAA,CACtC;AAEK,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAmB,EAAA;AACrE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GAAK,UAAU,EAAA;QACvBA,cAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,OAAO,EAAC,UAAU,IAAE,QAAQ,CAAc,CAC5C;AAEhB;AAEA,UAAU,CAAC,SAAS,GAAG,SAAS;;;;"}

package/dist/components/InputGroup/index.cjs

@@ -7,7 +7,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const InputGroup = styled__default.default.div.withConfig({ displayName: "vui--InputGroup", componentId: "vui--diopdk" }) `${variables.inputVariableStyles} display:flex;& > *{margin-left:0;margin-right:0;box-shadow:none;}& > *:focus,& > *:active{z-index:5;}& > *:not(:first-child):not(:last-child){border-radius:0 !important;border-inline:0 !important;}& > *:first-child{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-right:0 !important;}& > *:last-child{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;border-left:0 !important;}`;
+const InputGroup = styled__default.default.div.withConfig({ displayName: "vui--InputGroup", componentId: "vui--1w0e9jz" }) `${variables.inputVariableStyles} display:flex;& > *{margin-left:0;margin-right:0;box-shadow:none;}& > *:focus,& > *:active{z-index:5;}& > *:not(:first-child):not(:last-child){border-radius:0 !important;border-inline:0 !important;}& > *:first-child{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-right:0 !important;}& > *:last-child{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;border-left:0 !important;}`;
 
 exports.InputGroup = InputGroup;
 //# sourceMappingURL=index.cjs.map

package/dist/components/InputGroup/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/InputGroup/index.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { inputVariableStyles } from '../../utils/forms/variables';\nimport { FormComponentProps } from '../types';\n\nexport type InputGroupProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nexport const InputGroup = styled.div<InputGroupProps>`\n  ${inputVariableStyles}\n\n  display: flex;\n\n  /* Remove inline margins from all children */\n  & > * {\n    margin-left: 0;\n    margin-right: 0;\n    box-shadow: none;\n  }\n\n  /* Bring in-focus and active children to the front to maintain outlines */\n  & > *:focus,\n  & > *:active {\n    z-index: 5;\n  }\n\n  /* Remove inline borders for children in the middle */\n  & > *:not(:first-child):not(:last-child) {\n    border-radius: 0 !important;\n    border-inline: 0 !important;\n  }\n\n  /* Remove right border radius from first child */\n  & > *:first-child {\n    border-top-right-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n    border-right: 0 !important;\n  }\n\n  /* Remove left border radius from last child */\n  & > *:last-child {\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    border-left: 0 !important;\n  }\n`;\n"],"names":["styled","inputVariableStyles"],"mappings":";;;;;;;;;AAMa,MAAA,UAAU,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAChCC,6BAAmB,CAAA,sbAAA;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/InputGroup/index.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { inputVariableStyles } from '../../utils/forms/variables';\nimport { FormComponentProps } from '../types';\n\nexport type InputGroupProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nexport const InputGroup = styled.div<InputGroupProps>`\n  ${inputVariableStyles}\n\n  display: flex;\n\n  /* Remove inline margins from all children */\n  & > * {\n    margin-left: 0;\n    margin-right: 0;\n    box-shadow: none;\n  }\n\n  /* Bring in-focus and active children to the front to maintain outlines */\n  & > *:focus,\n  & > *:active {\n    z-index: 5;\n  }\n\n  /* Remove inline borders for children in the middle */\n  & > *:not(:first-child):not(:last-child) {\n    border-radius: 0 !important;\n    border-inline: 0 !important;\n  }\n\n  /* Remove right border radius from first child */\n  & > *:first-child {\n    border-top-right-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n    border-right: 0 !important;\n  }\n\n  /* Remove left border radius from last child */\n  & > *:last-child {\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    border-left: 0 !important;\n  }\n`;\n"],"names":["styled","inputVariableStyles"],"mappings":";;;;;;;;;AAMa,MAAA,UAAU,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAChCC,6BAAmB,CAAA,sbAAA;;;;"}

package/dist/components/InputGroup/index.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { inputVariableStyles } from '../../utils/forms/variables.js';
 
-const InputGroup = styled.div.withConfig({ displayName: "vui--InputGroup", componentId: "vui--diopdk" }) `${inputVariableStyles} display:flex;& > *{margin-left:0;margin-right:0;box-shadow:none;}& > *:focus,& > *:active{z-index:5;}& > *:not(:first-child):not(:last-child){border-radius:0 !important;border-inline:0 !important;}& > *:first-child{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-right:0 !important;}& > *:last-child{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;border-left:0 !important;}`;
+const InputGroup = styled.div.withConfig({ displayName: "vui--InputGroup", componentId: "vui--1w0e9jz" }) `${inputVariableStyles} display:flex;& > *{margin-left:0;margin-right:0;box-shadow:none;}& > *:focus,& > *:active{z-index:5;}& > *:not(:first-child):not(:last-child){border-radius:0 !important;border-inline:0 !important;}& > *:first-child{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-right:0 !important;}& > *:last-child{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;border-left:0 !important;}`;
 
 export { InputGroup };
 //# sourceMappingURL=index.js.map

package/dist/components/InputGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/InputGroup/index.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { inputVariableStyles } from '../../utils/forms/variables';\nimport { FormComponentProps } from '../types';\n\nexport type InputGroupProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nexport const InputGroup = styled.div<InputGroupProps>`\n  ${inputVariableStyles}\n\n  display: flex;\n\n  /* Remove inline margins from all children */\n  & > * {\n    margin-left: 0;\n    margin-right: 0;\n    box-shadow: none;\n  }\n\n  /* Bring in-focus and active children to the front to maintain outlines */\n  & > *:focus,\n  & > *:active {\n    z-index: 5;\n  }\n\n  /* Remove inline borders for children in the middle */\n  & > *:not(:first-child):not(:last-child) {\n    border-radius: 0 !important;\n    border-inline: 0 !important;\n  }\n\n  /* Remove right border radius from first child */\n  & > *:first-child {\n    border-top-right-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n    border-right: 0 !important;\n  }\n\n  /* Remove left border radius from last child */\n  & > *:last-child {\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    border-left: 0 !important;\n  }\n`;\n"],"names":[],"mappings":";;;AAMa,MAAA,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAChC,mBAAmB,CAAA,sbAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/InputGroup/index.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { inputVariableStyles } from '../../utils/forms/variables';\nimport { FormComponentProps } from '../types';\n\nexport type InputGroupProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nexport const InputGroup = styled.div<InputGroupProps>`\n  ${inputVariableStyles}\n\n  display: flex;\n\n  /* Remove inline margins from all children */\n  & > * {\n    margin-left: 0;\n    margin-right: 0;\n    box-shadow: none;\n  }\n\n  /* Bring in-focus and active children to the front to maintain outlines */\n  & > *:focus,\n  & > *:active {\n    z-index: 5;\n  }\n\n  /* Remove inline borders for children in the middle */\n  & > *:not(:first-child):not(:last-child) {\n    border-radius: 0 !important;\n    border-inline: 0 !important;\n  }\n\n  /* Remove right border radius from first child */\n  & > *:first-child {\n    border-top-right-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n    border-right: 0 !important;\n  }\n\n  /* Remove left border radius from last child */\n  & > *:last-child {\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    border-left: 0 !important;\n  }\n`;\n"],"names":[],"mappings":";;;AAMa,MAAA,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAChC,mBAAmB,CAAA,sbAAA;;;;"}

package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.cjs

@@ -10,8 +10,8 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 const { grey } = index.theme.colors.neutral;
-const SkeletonContentWrapper = styled__default.default.div.withConfig({ displayName: "vui--SkeletonContentWrapper", componentId: "vui--1whyuqt" }) `height:16px;width:100%;`;
-const SkeletonContentComponent = styled__default.default.div.withConfig({ displayName: "vui--SkeletonContentComponent", componentId: "vui--1xxnbq2" }) `display:inline-block;color:transparent;border-radius:4px;animation-duration:${({ isLoading = true }) => (isLoading ? '1s' : 0)};animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;background:linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);background-size:800px 104px;border:0;width:100%;height:100%;@keyframes placeHolderShimmer{0%{background-position:-380px 0;}100%{background-position:380px 0;}}`;
+const SkeletonContentWrapper = styled__default.default.div.withConfig({ displayName: "vui--SkeletonContentWrapper", componentId: "vui--oakirc" }) `height:16px;width:100%;`;
+const SkeletonContentComponent = styled__default.default.div.withConfig({ displayName: "vui--SkeletonContentComponent", componentId: "vui--dbfg3y" }) `display:inline-block;color:transparent;border-radius:4px;animation-duration:${({ isLoading = true }) => (isLoading ? '1s' : 0)};animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;background:linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);background-size:800px 104px;border:0;width:100%;height:100%;@keyframes placeHolderShimmer{0%{background-position:-380px 0;}100%{background-position:380px 0;}}`;
 const SkeletonContent = ({ isLoading, style }) => (React__default.default.createElement(SkeletonContentWrapper, { style: style },
     React__default.default.createElement(SkeletonContentComponent, { isLoading: isLoading })));
 

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonContent.cjs","sources":["../../../../src/components/LegacyDataTable/SkeletonContent/SkeletonContent.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst { grey } = theme.colors.neutral;\n\nconst SkeletonContentWrapper = styled.div`\n  height: 16px;\n  width: 100%;\n`;\n\nconst SkeletonContentComponent = styled.div<{ isLoading?: boolean }>`\n  display: inline-block;\n  color: transparent;\n  border-radius: 4px;\n  animation-duration: ${({ isLoading = true }) => (isLoading ? '1s' : 0)};\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: placeHolderShimmer;\n  animation-timing-function: linear;\n  background: linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);\n  background-size: 800px 104px;\n  border: 0;\n  width: 100%;\n  height: 100%;\n\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -380px 0;\n    }\n    100% {\n      background-position: 380px 0;\n    }\n  }\n`;\n\ntype SkeletonContentPropTypes = {\n  isLoading?: boolean;\n  style?: React.CSSProperties;\n};\n\nexport const SkeletonContent = ({ isLoading, style }: SkeletonContentPropTypes) => (\n  <SkeletonContentWrapper style={style}>\n    <SkeletonContentComponent isLoading={isLoading} />\n  </SkeletonContentWrapper>\n);\n"],"names":["theme","styled","React"],"mappings":";;;;;;;;;;;AAIA,MAAM,EAAE,IAAI,EAAE,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO;AAErC,MAAM,sBAAsB,GAAGC,uBAAM,CAAC,GAAG,kHAGxC;AAED,MAAM,wBAAwB,GAAGA,uBAAM,CAAC,GAAG,0KAInB,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,CAAA,yKAAA,EAK9B,IAAI,CAAC,IAAI,CAAQ,KAAA,EAAA,IAAI,CAAC,IAAI,CAAA,MAAA,EAAS,IAAI,CAAC,IAAI,sKAcrF;AAOY,MAAA,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAA4B,MAC5EC,sBAAA,CAAA,aAAA,CAAC,sBAAsB,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;IAClCA,sBAAC,CAAA,aAAA,CAAA,wBAAwB,IAAC,SAAS,EAAE,SAAS,EAAI,CAAA,CAC3B;;;;"}
+{"version":3,"file":"SkeletonContent.cjs","sources":["../../../../src/components/LegacyDataTable/SkeletonContent/SkeletonContent.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst { grey } = theme.colors.neutral;\n\nconst SkeletonContentWrapper = styled.div`\n  height: 16px;\n  width: 100%;\n`;\n\nconst SkeletonContentComponent = styled.div<{ isLoading?: boolean }>`\n  display: inline-block;\n  color: transparent;\n  border-radius: 4px;\n  animation-duration: ${({ isLoading = true }) => (isLoading ? '1s' : 0)};\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: placeHolderShimmer;\n  animation-timing-function: linear;\n  background: linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);\n  background-size: 800px 104px;\n  border: 0;\n  width: 100%;\n  height: 100%;\n\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -380px 0;\n    }\n    100% {\n      background-position: 380px 0;\n    }\n  }\n`;\n\ntype SkeletonContentPropTypes = {\n  isLoading?: boolean;\n  style?: React.CSSProperties;\n};\n\nexport const SkeletonContent = ({ isLoading, style }: SkeletonContentPropTypes) => (\n  <SkeletonContentWrapper style={style}>\n    <SkeletonContentComponent isLoading={isLoading} />\n  </SkeletonContentWrapper>\n);\n"],"names":["theme","styled","React"],"mappings":";;;;;;;;;;;AAIA,MAAM,EAAE,IAAI,EAAE,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO;AAErC,MAAM,sBAAsB,GAAGC,uBAAM,CAAC,GAAG,iHAGxC;AAED,MAAM,wBAAwB,GAAGA,uBAAM,CAAC,GAAG,yKAInB,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,CAAA,yKAAA,EAK9B,IAAI,CAAC,IAAI,CAAQ,KAAA,EAAA,IAAI,CAAC,IAAI,CAAA,MAAA,EAAS,IAAI,CAAC,IAAI,sKAcrF;AAOY,MAAA,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAA4B,MAC5EC,sBAAA,CAAA,aAAA,CAAC,sBAAsB,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;IAClCA,sBAAC,CAAA,aAAA,CAAA,wBAAwB,IAAC,SAAS,EAAE,SAAS,EAAI,CAAA,CAC3B;;;;"}

package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.js

@@ -3,8 +3,8 @@ import styled from 'styled-components';
 import { theme } from '../../../theme/index.js';
 
 const { grey } = theme.colors.neutral;
-const SkeletonContentWrapper = styled.div.withConfig({ displayName: "vui--SkeletonContentWrapper", componentId: "vui--1whyuqt" }) `height:16px;width:100%;`;
-const SkeletonContentComponent = styled.div.withConfig({ displayName: "vui--SkeletonContentComponent", componentId: "vui--1xxnbq2" }) `display:inline-block;color:transparent;border-radius:4px;animation-duration:${({ isLoading = true }) => (isLoading ? '1s' : 0)};animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;background:linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);background-size:800px 104px;border:0;width:100%;height:100%;@keyframes placeHolderShimmer{0%{background-position:-380px 0;}100%{background-position:380px 0;}}`;
+const SkeletonContentWrapper = styled.div.withConfig({ displayName: "vui--SkeletonContentWrapper", componentId: "vui--oakirc" }) `height:16px;width:100%;`;
+const SkeletonContentComponent = styled.div.withConfig({ displayName: "vui--SkeletonContentComponent", componentId: "vui--dbfg3y" }) `display:inline-block;color:transparent;border-radius:4px;animation-duration:${({ isLoading = true }) => (isLoading ? '1s' : 0)};animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;background:linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);background-size:800px 104px;border:0;width:100%;height:100%;@keyframes placeHolderShimmer{0%{background-position:-380px 0;}100%{background-position:380px 0;}}`;
 const SkeletonContent = ({ isLoading, style }) => (React__default.createElement(SkeletonContentWrapper, { style: style },
     React__default.createElement(SkeletonContentComponent, { isLoading: isLoading })));
 

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonContent.js","sources":["../../../../src/components/LegacyDataTable/SkeletonContent/SkeletonContent.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst { grey } = theme.colors.neutral;\n\nconst SkeletonContentWrapper = styled.div`\n  height: 16px;\n  width: 100%;\n`;\n\nconst SkeletonContentComponent = styled.div<{ isLoading?: boolean }>`\n  display: inline-block;\n  color: transparent;\n  border-radius: 4px;\n  animation-duration: ${({ isLoading = true }) => (isLoading ? '1s' : 0)};\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: placeHolderShimmer;\n  animation-timing-function: linear;\n  background: linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);\n  background-size: 800px 104px;\n  border: 0;\n  width: 100%;\n  height: 100%;\n\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -380px 0;\n    }\n    100% {\n      background-position: 380px 0;\n    }\n  }\n`;\n\ntype SkeletonContentPropTypes = {\n  isLoading?: boolean;\n  style?: React.CSSProperties;\n};\n\nexport const SkeletonContent = ({ isLoading, style }: SkeletonContentPropTypes) => (\n  <SkeletonContentWrapper style={style}>\n    <SkeletonContentComponent isLoading={isLoading} />\n  </SkeletonContentWrapper>\n);\n"],"names":["React"],"mappings":";;;;AAIA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO;AAErC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,kHAGxC;AAED,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,0KAInB,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,CAAA,yKAAA,EAK9B,IAAI,CAAC,IAAI,CAAQ,KAAA,EAAA,IAAI,CAAC,IAAI,CAAA,MAAA,EAAS,IAAI,CAAC,IAAI,sKAcrF;AAOY,MAAA,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAA4B,MAC5EA,cAAA,CAAA,aAAA,CAAC,sBAAsB,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;IAClCA,cAAC,CAAA,aAAA,CAAA,wBAAwB,IAAC,SAAS,EAAE,SAAS,EAAI,CAAA,CAC3B;;;;"}
+{"version":3,"file":"SkeletonContent.js","sources":["../../../../src/components/LegacyDataTable/SkeletonContent/SkeletonContent.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst { grey } = theme.colors.neutral;\n\nconst SkeletonContentWrapper = styled.div`\n  height: 16px;\n  width: 100%;\n`;\n\nconst SkeletonContentComponent = styled.div<{ isLoading?: boolean }>`\n  display: inline-block;\n  color: transparent;\n  border-radius: 4px;\n  animation-duration: ${({ isLoading = true }) => (isLoading ? '1s' : 0)};\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: placeHolderShimmer;\n  animation-timing-function: linear;\n  background: linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);\n  background-size: 800px 104px;\n  border: 0;\n  width: 100%;\n  height: 100%;\n\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -380px 0;\n    }\n    100% {\n      background-position: 380px 0;\n    }\n  }\n`;\n\ntype SkeletonContentPropTypes = {\n  isLoading?: boolean;\n  style?: React.CSSProperties;\n};\n\nexport const SkeletonContent = ({ isLoading, style }: SkeletonContentPropTypes) => (\n  <SkeletonContentWrapper style={style}>\n    <SkeletonContentComponent isLoading={isLoading} />\n  </SkeletonContentWrapper>\n);\n"],"names":["React"],"mappings":";;;;AAIA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO;AAErC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,iHAGxC;AAED,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,yKAInB,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,CAAA,yKAAA,EAK9B,IAAI,CAAC,IAAI,CAAQ,KAAA,EAAA,IAAI,CAAC,IAAI,CAAA,MAAA,EAAS,IAAI,CAAC,IAAI,sKAcrF;AAOY,MAAA,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAA4B,MAC5EA,cAAA,CAAA,aAAA,CAAC,sBAAsB,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;IAClCA,cAAC,CAAA,aAAA,CAAA,wBAAwB,IAAC,SAAS,EAAE,SAAS,EAAI,CAAA,CAC3B;;;;"}