@veeqo/ui 9.10.3 → 10.0.0-beta.2

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--1yrw4mw" }) `display:inline-flex;flex-direction:column;overflow:hidden;background-color:white;box-shadow:1px 4px 15px ${index.theme.colors.neutral.grey.base};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--a1pzsa" }) `display:inline-flex;flex-direction:column;overflow:hidden;background-color:white;box-shadow:1px 4px 15px ${index.theme.colors.neutral.grey.base};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: 1px 4px 15px ${theme.colors.neutral.grey.base};\n  border-radius: ${theme.radius.base};\n  padding: ${theme.sizes.base};\n`;\n"],"names":["styled","motion","Card","theme"],"mappings":";;;;;;;;;;;AAMa,MAAA,iBAAiB,GAAGA,uBAAM,CAACC,mBAAM,CAACC,SAAI,CAAC,OAAO,CAAC,CAAC,CAMhC,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yGAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACxC,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,SAAA,EACvBA,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: 1px 4px 15px ${theme.colors.neutral.grey.base};\n  border-radius: ${theme.radius.base};\n  padding: ${theme.sizes.base};\n`;\n"],"names":["styled","motion","Card","theme"],"mappings":";;;;;;;;;;;AAMa,MAAA,iBAAiB,GAAGA,uBAAM,CAACC,mBAAM,CAACC,SAAI,CAAC,OAAO,CAAC,CAAC,CAMhC,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,yGAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACxC,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,SAAA,EACvBA,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--1yrw4mw" }) `display:inline-flex;flex-direction:column;overflow:hidden;background-color:white;box-shadow:1px 4px 15px ${theme.colors.neutral.grey.base};border-radius:${theme.radius.base};padding:${theme.sizes.base};`;
+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:1px 4px 15px ${theme.colors.neutral.grey.base};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: 1px 4px 15px ${theme.colors.neutral.grey.base};\n  border-radius: ${theme.radius.base};\n  padding: ${theme.sizes.base};\n`;\n"],"names":[],"mappings":";;;;;AAMa,MAAA,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAMhC,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yGAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACxC,eAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,SAAA,EACvB,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: 1px 4px 15px ${theme.colors.neutral.grey.base};\n  border-radius: ${theme.radius.base};\n  padding: ${theme.sizes.base};\n`;\n"],"names":[],"mappings":";;;;;AAMa,MAAA,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAMhC,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,yGAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACxC,eAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,SAAA,EACvB,KAAK,CAAC,KAAK,CAAC,IAAI;;;;"}

package/dist/components/Dropdown/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, Ref } from 'react';
 import { PopoverProps } from '../Popover/types';
 import { ButtonProps } from '../Button/types';
 export type BasicDropdownProps = {
@@ -9,8 +9,10 @@ export type BasicDropdownProps = {
 export type DropdownProps = Omit<BasicDropdownProps, 'anchorElement' | 'onShouldClose'> & {
     id: string;
     shouldShow?: boolean;
+    disabled?: boolean;
     setShouldShow?: (newValue: boolean) => void;
     ctaIconSlot?: ReactElement;
     ctaProps?: ButtonProps;
+    renderCta?: (buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement>, anchorRef: Ref<HTMLButtonElement>) => ReactElement;
     children?: ReactNode;
 };

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--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;}`;
+}).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;}`;
 
 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 '../../tempIcons/CrossIcon';\nimport { DownArrowIcon } from '../../tempIcons/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;;;;;;;;;;"}
+{"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 '../../tempIcons/CrossIcon';\nimport { DownArrowIcon } from '../../tempIcons/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;;;;;;;;;;"}

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--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;}`;
+}).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;}`;
 
 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 '../../tempIcons/CrossIcon';\nimport { DownArrowIcon } from '../../tempIcons/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;;;;"}
+{"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 '../../tempIcons/CrossIcon';\nimport { DownArrowIcon } from '../../tempIcons/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;;;;"}

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--12w0ynf" }) `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--3pgs92" }) `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,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;;;;"}
+{"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;;;;"}

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--12w0ynf" }) `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--3pgs92" }) `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,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;;;;"}
+{"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;;;;"}

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--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);`;
+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);`;
 
 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--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);`;
+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);`;
 
 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--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;`;
+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;`;
 
 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,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;;;;"}
+{"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;;;;"}

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--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;`;
+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;`;
 
 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,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;;;;"}
+{"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;;;;"}

package/dist/components/InputAffix/InputAffix.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var inputStyles = require('../../utils/forms/inputStyles.cjs');
+var index$1 = require('../../theme/index.cjs');
+var Text = require('../Text/Text.cjs');
+var index = require('../InputGroup/index.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+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};`;
+function InputAffix({ children, ...otherProps }) {
+    return (React__default.default.createElement(Container, { ...otherProps },
+        React__default.default.createElement(StyledHint, { variant: "hintText" }, children)));
+}
+InputAffix.Container = Container;
+
+exports.InputAffix = InputAffix;
+//# sourceMappingURL=InputAffix.cjs.map

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

@@ -0,0 +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 { InputProps } from '../types';\n\ntype InputAffixProps = React.HTMLAttributes<HTMLDivElement> & InputProps;\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;;;;"}

package/dist/components/InputAffix/InputAffix.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { InputProps } from '../types';
+type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & InputProps;
+export declare function InputAffix({ children, ...otherProps }: InputAffixProps): React.JSX.Element;
+export declare namespace InputAffix {
+    var Container: import("styled-components").StyledComponent<"div", any, React.HTMLAttributes<HTMLDivElement> & InputProps, never>;
+}
+export {};

package/dist/components/InputAffix/InputAffix.js

@@ -0,0 +1,17 @@
+import React__default from 'react';
+import styled from 'styled-components';
+import { inputFullStyles } from '../../utils/forms/inputStyles.js';
+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};`;
+function InputAffix({ children, ...otherProps }) {
+    return (React__default.createElement(Container, { ...otherProps },
+        React__default.createElement(StyledHint, { variant: "hintText" }, children)));
+}
+InputAffix.Container = Container;
+
+export { InputAffix };
+//# sourceMappingURL=InputAffix.js.map

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

@@ -0,0 +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 { InputProps } from '../types';\n\ntype InputAffixProps = React.HTMLAttributes<HTMLDivElement> & InputProps;\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;;;;"}

package/dist/components/InputAffix/index.d.ts

@@ -0,0 +1 @@
+export * from './InputAffix';

package/dist/components/InputGroup/index.cjs

@@ -1,15 +1,13 @@
 'use strict';
 
 var styled = require('styled-components');
-require('react');
-require('../Text/Text.cjs');
-require('./components/InputGroupLabel/styled.cjs');
+var variables = require('../../utils/forms/variables.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const InputGroup = styled__default.default.div.withConfig({ displayName: "vui--InputGroup", componentId: "vui--1w0e9jz" }) `display:flex;& > *{margin-left:0;margin-right:0;box-shadow:none;}& > *:not(:last-child){border-right-width:0 !important;}& > *:focus,& > *:active{z-index:5;}& > *:not(:first-child):not(:last-child){border-top-left-radius:0 !important;border-top-right-radius:0 !important;border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important;}& > *:first-child{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;}& > *:last-child{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;}`;
+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;}`;
 
 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';\n\nexport { InputGroupLabel } from './components/InputGroupLabel';\n\nexport const InputGroup = styled.div`\n  display: flex;\n\n  & > * {\n    margin-left: 0;\n    margin-right: 0;\n    box-shadow: none;\n  }\n\n  & > *:not(:last-child) {\n    border-right-width: 0 !important;\n  }\n\n  & > *:focus,\n  & > *:active {\n    z-index: 5;\n  }\n\n  & > *:not(:first-child):not(:last-child) {\n    border-top-left-radius: 0 !important;\n    border-top-right-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n  }\n\n  & > *:first-child {\n    border-top-right-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n  }\n\n  & > *:last-child {\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n  }\n`;\n"],"names":["styled"],"mappings":";;;;;;;;;;;MAIa,UAAU,GAAGA,uBAAM,CAAC,GAAG;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/InputGroup/index.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { inputVariableStyles } from '../../utils/forms/variables';\nimport { InputProps } from '../types';\n\nexport const InputGroup = styled.div<InputProps>`\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":";;;;;;;;;AAIa,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;;;;"}

package/dist/components/InputGroup/index.d.ts

@@ -1,2 +1,2 @@
-export { InputGroupLabel } from './components/InputGroupLabel';
-export declare const InputGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { InputProps } from '../types';
+export declare const InputGroup: import("styled-components").StyledComponent<"div", any, InputProps, never>;

package/dist/components/InputGroup/index.js

@@ -1,9 +1,7 @@
 import styled from 'styled-components';
-import 'react';
-import '../Text/Text.js';
-import './components/InputGroupLabel/styled.js';
+import { inputVariableStyles } from '../../utils/forms/variables.js';
 
-const InputGroup = styled.div.withConfig({ displayName: "vui--InputGroup", componentId: "vui--1w0e9jz" }) `display:flex;& > *{margin-left:0;margin-right:0;box-shadow:none;}& > *:not(:last-child){border-right-width:0 !important;}& > *:focus,& > *:active{z-index:5;}& > *:not(:first-child):not(:last-child){border-top-left-radius:0 !important;border-top-right-radius:0 !important;border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important;}& > *:first-child{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;}& > *:last-child{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;}`;
+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;}`;
 
 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';\n\nexport { InputGroupLabel } from './components/InputGroupLabel';\n\nexport const InputGroup = styled.div`\n  display: flex;\n\n  & > * {\n    margin-left: 0;\n    margin-right: 0;\n    box-shadow: none;\n  }\n\n  & > *:not(:last-child) {\n    border-right-width: 0 !important;\n  }\n\n  & > *:focus,\n  & > *:active {\n    z-index: 5;\n  }\n\n  & > *:not(:first-child):not(:last-child) {\n    border-top-left-radius: 0 !important;\n    border-top-right-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n  }\n\n  & > *:first-child {\n    border-top-right-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n  }\n\n  & > *:last-child {\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n  }\n`;\n"],"names":[],"mappings":";;;;;MAIa,UAAU,GAAG,MAAM,CAAC,GAAG;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/InputGroup/index.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { inputVariableStyles } from '../../utils/forms/variables';\nimport { InputProps } from '../types';\n\nexport const InputGroup = styled.div<InputProps>`\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":";;;AAIa,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;;;;"}

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--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 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 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,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;;;;"}
+{"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;;;;"}

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--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 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 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,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;;;;"}
+{"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;;;;"}

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

@@ -9,10 +9,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const SpecificStateContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--SpecificStateContainer", componentId: "vui--991hgo" }) `display:flex;flex-direction:column;justify-content:center;align-items:center;height:${(props) => props.height}px;background:white;`;
-const EllipseContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--EllipseContainer", componentId: "vui--1oi4ebm" }) `display:flex;justify-content:center;align-items:center;width:120px;height:120px;border-radius:100px;background:${index.theme.colors.neutral.grey.base};svg{width:64px !important;height:64px !important;}`;
-const TitleText = styled__default.default(Text.Text).withConfig({ displayName: "vui--TitleText", componentId: "vui--pj8i0k" }) `margin-top:24px;`;
-const SubTitleText = styled__default.default(Text.Text).withConfig({ displayName: "vui--SubTitleText", componentId: "vui--19x6udv" }) `margin-top:8px;`;
+const SpecificStateContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--SpecificStateContainer", componentId: "vui--e4a4yn" }) `display:flex;flex-direction:column;justify-content:center;align-items:center;height:${(props) => props.height}px;background:white;`;
+const EllipseContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--EllipseContainer", componentId: "vui--1mtoe5h" }) `display:flex;justify-content:center;align-items:center;width:120px;height:120px;border-radius:100px;background:${index.theme.colors.neutral.grey.base};svg{width:64px !important;height:64px !important;}`;
+const TitleText = styled__default.default(Text.Text).withConfig({ displayName: "vui--TitleText", componentId: "vui--1p267dn" }) `margin-top:24px;`;
+const SubTitleText = styled__default.default(Text.Text).withConfig({ displayName: "vui--SubTitleText", componentId: "vui--pd13c2" }) `margin-top:8px;`;
 
 exports.EllipseContainer = EllipseContainer;
 exports.SpecificStateContainer = SpecificStateContainer;

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

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

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

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

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

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

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

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

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

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

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

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

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

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