@veeqo/ui 9.9.2 → 10.0.0-beta.1

package/dist/components/Anchor/styled.js

@@ -1,7 +1,24 @@
 import styled from 'styled-components';
+import { getTextStyles } from '../../theme/utils.js';
 import { theme } from '../../theme/index.js';
 
-const CommonAnchor = styled.a.withConfig({ displayName: "vui--CommonAnchor", componentId: "vui--14i39s8" }) `box-sizing:border-box;display:inline-flex;margin:0;padding:0;font-family:${theme.text.link.fontFamily};font-style:${theme.text.link.fontStyle};font-weight:${theme.text.link.fontWeight};font-size:${theme.text.link.fontSize};line-height:${theme.text.link.lineHeight};color:${theme.colors.secondary.blue.base};text-decoration:${theme.text.link.textDecoration};&:hover{color:${theme.colors.secondary.blue.dark};}`;
+const sizeMappings = {
+    lg: theme.sizes.md,
+    md: theme.sizes[5],
+    base: theme.sizes.base,
+    small: theme.sizes[3],
+};
+const styleMappings = {
+    lg: 'linkLarge',
+    md: 'linkMedium',
+    base: 'link',
+    small: 'linkSmall',
+};
+const BaseAnchor = styled.a.withConfig({ displayName: "vui--BaseAnchor", componentId: "vui--1q44nrt" }) ``;
+// Standard variant styling
+const StandardAnchor = styled(BaseAnchor).withConfig({ displayName: "vui--StandardAnchor", componentId: "vui--1omsw63" }) `display:inline-flex;align-items:center;cursor:pointer;transition:color 0.1s ease;text-decoration:none;padding:0 2px;${({ size }) => getTextStyles(theme.text[styleMappings[size]])};&:focus{outline:0;border-color:${theme.colors.secondary.blue.dark};border-radius:${theme.radius.base};box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}&:hover{color:${theme.colors.secondary.blue.dark};}svg{width:${({ size }) => sizeMappings[size]};height:${({ size }) => sizeMappings[size]};vertical-align:middle;}`;
+// Unstyled variant with minimal styling
+const UnstyledAnchor = styled(BaseAnchor).withConfig({ displayName: "vui--UnstyledAnchor", componentId: "vui--7yxtrk" }) ``;
 
-export { CommonAnchor };
+export { BaseAnchor, StandardAnchor, UnstyledAnchor };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Anchor/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { theme } from '../../theme';\n\nexport const CommonAnchor = styled.a`\n  box-sizing: border-box;\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n\n  font-family: ${theme.text.link.fontFamily};\n  font-style: ${theme.text.link.fontStyle};\n  font-weight: ${theme.text.link.fontWeight};\n  font-size: ${theme.text.link.fontSize};\n  line-height: ${theme.text.link.lineHeight};\n  color: ${theme.colors.secondary.blue.base};\n  text-decoration: ${theme.text.link.textDecoration};\n\n  &:hover {\n    color: ${theme.colors.secondary.blue.dark};\n  }\n`;\n"],"names":[],"mappings":";;;AAIa,MAAA,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yEAAA,EAMnB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,eAC3B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CACxB,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAC5B,WAAA,EAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,aAAA,EACtB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA,OAAA,EAChC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,iBAAA,EACtB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,kBAGtC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Anchor/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { getTextStyles } from '../../theme/utils';\nimport { theme } from '../../theme';\nimport { AnchorSize } from './types';\n\ntype StyledAnchorProps = {\n  size: AnchorSize;\n};\n\nconst sizeMappings: Record<StyledAnchorProps['size'], string> = {\n  lg: theme.sizes.md,\n  md: theme.sizes[5],\n  base: theme.sizes.base,\n  small: theme.sizes[3],\n};\n\nconst styleMappings: Record<StyledAnchorProps['size'], string> = {\n  lg: 'linkLarge',\n  md: 'linkMedium',\n  base: 'link',\n  small: 'linkSmall',\n};\n\nexport const BaseAnchor = styled.a<StyledAnchorProps>``;\n\n// Standard variant styling\nexport const StandardAnchor = styled(BaseAnchor)<StyledAnchorProps>`\n  display: inline-flex;\n  align-items: center;\n\n  cursor: pointer;\n  transition: color 0.1s ease;\n  text-decoration: none;\n  padding: 0 2px;\n\n  ${({ size }) => getTextStyles(theme.text[styleMappings[size]])};\n\n  &:focus {\n    outline: 0;\n    border-color: ${theme.colors.secondary.blue.dark};\n    border-radius: ${theme.radius.base};\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n\n  &:hover {\n    color: ${theme.colors.secondary.blue.dark};\n  }\n\n  svg {\n    width: ${({ size }) => sizeMappings[size]};\n    height: ${({ size }) => sizeMappings[size]};\n    vertical-align: middle;\n  }\n`;\n\n// Unstyled variant with minimal styling\nexport const UnstyledAnchor = styled(BaseAnchor)<StyledAnchorProps>``;\n"],"names":[],"mappings":";;;;AASA,MAAM,YAAY,GAA8C;AAC9D,IAAA,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;AAClB,IAAA,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAClB,IAAA,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI;AACtB,IAAA,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;CACtB;AAED,MAAM,aAAa,GAA8C;AAC/D,IAAA,EAAE,EAAE,WAAW;AACf,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,KAAK,EAAE,WAAW;CACnB;MAEY,UAAU,GAAG,MAAM,CAAC,CAAC;AAElC;AACa,MAAA,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,oHAAA,EAS5C,CAAC,EAAE,IAAI,EAAE,KAAK,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA,gCAAA,EAI5C,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,kBAC/B,KAAK,CAAC,MAAM,CAAC,IAAI,CACV,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gBAAA,EAIhD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,eAIhC,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC,WAC/B,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC;AAK9C;MACa,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA;;;;"}

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

@@ -0,0 +1,40 @@
+import { AnchorHTMLAttributes, ReactNode } from 'react';
+/**
+ * Available style variants for the Anchor component
+ */
+export type AnchorVariant = 'base' | 'unstyled';
+export type AnchorSize = 'lg' | 'md' | 'base' | 'small';
+/**
+ * Props for the Anchor component
+ */
+export interface AnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * The visual style variant of the anchor
+     * @default 'base'
+     */
+    variant?: AnchorVariant;
+    /**
+     * The size of the anchor
+     * @default 'base'
+     */
+    size?: AnchorSize;
+    /**
+     * Whether to show a help icon on the left side of the anchor text
+     * @default false
+     */
+    showHelpIcon?: boolean;
+    /**
+     * Slot for a custom icon on the left side of the anchor text
+     * @default null
+     */
+    leftIconSlot?: ReactNode | null;
+    /**
+     * Whether to hide the external link icon
+     * @default false
+     */
+    hideExternalLinkIcon?: boolean;
+    /**
+     * The content of the anchor
+     */
+    children: ReactNode;
+}

package/dist/components/Anchor/utils/urlUtils.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+/**
+ * Utility functions for URL processing
+ */
+/**
+ * Checks if the URL should have a prefix added based on the current context
+ * @returns {boolean} Whether a prefix should be added
+ */
+const shouldAddPrefix = () => !!(window.veeqoContext &&
+    window.veeqoContext.vqHost !== 'standalone' &&
+    window.veeqoContext.baseUrl);
+/**
+ * Checks if a URL is relative (not starting with http://, https://, or //)
+ * @param {string} url - The URL to check
+ * @returns {boolean} Whether the URL is relative
+ */
+const isRelativeUrl = (url) => !url.match(/^(https?:\/\/|\/\/)/);
+/**
+ * Adds the appropriate prefix to a URL based on the current context
+ * @param {string} url - The URL to add a prefix to
+ * @returns {string} The URL with prefix added if needed
+ */
+const addPrefixToUrl = (url) => { var _a; return `${((_a = window.veeqoContext) === null || _a === undefined ? undefined : _a.baseUrl) || ''}${url.startsWith('/') ? '' : '/'}${url}`; };
+/**
+ * Processes a URL by adding the appropriate prefix if needed
+ * @param {string} url - The URL to process
+ * @returns {string} The processed URL
+ */
+const createContextAwareUrl = (url) => {
+    if (shouldAddPrefix() && isRelativeUrl(url)) {
+        return addPrefixToUrl(url);
+    }
+    return url;
+};
+
+exports.addPrefixToUrl = addPrefixToUrl;
+exports.createContextAwareUrl = createContextAwareUrl;
+exports.isRelativeUrl = isRelativeUrl;
+exports.shouldAddPrefix = shouldAddPrefix;
+//# sourceMappingURL=urlUtils.cjs.map

package/dist/components/Anchor/utils/urlUtils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"urlUtils.cjs","sources":["../../../../src/components/Anchor/utils/urlUtils.ts"],"sourcesContent":["/**\n * Utility functions for URL processing\n */\n\n/**\n * Checks if the URL should have a prefix added based on the current context\n * @returns {boolean} Whether a prefix should be added\n */\nexport const shouldAddPrefix = (): boolean =>\n  !!(\n    window.veeqoContext &&\n    window.veeqoContext.vqHost !== 'standalone' &&\n    window.veeqoContext.baseUrl\n  );\n\n/**\n * Checks if a URL is relative (not starting with http://, https://, or //)\n * @param {string} url - The URL to check\n * @returns {boolean} Whether the URL is relative\n */\nexport const isRelativeUrl = (url: string): boolean => !url.match(/^(https?:\\/\\/|\\/\\/)/);\n\n/**\n * Adds the appropriate prefix to a URL based on the current context\n * @param {string} url - The URL to add a prefix to\n * @returns {string} The URL with prefix added if needed\n */\nexport const addPrefixToUrl = (url: string): string =>\n  `${window.veeqoContext?.baseUrl || ''}${url.startsWith('/') ? '' : '/'}${url}`;\n\n/**\n * Processes a URL by adding the appropriate prefix if needed\n * @param {string} url - The URL to process\n * @returns {string} The processed URL\n */\nexport const createContextAwareUrl = (url: string): string => {\n  if (shouldAddPrefix() && isRelativeUrl(url)) {\n    return addPrefixToUrl(url);\n  }\n  return url;\n};\n"],"names":[],"mappings":";;AAAA;;AAEG;AAEH;;;AAGG;AACI,MAAM,eAAe,GAAG,MAC7B,CAAC,EACC,MAAM,CAAC,YAAY;AACnB,IAAA,MAAM,CAAC,YAAY,CAAC,MAAM,KAAK,YAAY;AAC3C,IAAA,MAAM,CAAC,YAAY,CAAC,OAAO;AAG/B;;;;AAIG;AACU,MAAA,aAAa,GAAG,CAAC,GAAW,KAAc,CAAC,GAAG,CAAC,KAAK,CAAC,qBAAqB;AAEvF;;;;AAIG;AACU,MAAA,cAAc,GAAG,CAAC,GAAW,KAAY,EAAA,IAAA,EAAA,CAAA,CACpD,OAAA,CAAA,EAAG,CAAA,CAAA,EAAA,GAAA,MAAM,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,OAAO,KAAI,EAAE,CAAG,EAAA,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,CAAA,EAAG,GAAG,CAAE,CAAA,CAAA;AAEhF;;;;AAIG;AACU,MAAA,qBAAqB,GAAG,CAAC,GAAW,KAAY;AAC3D,IAAA,IAAI,eAAe,EAAE,IAAI,aAAa,CAAC,GAAG,CAAC,EAAE;AAC3C,QAAA,OAAO,cAAc,CAAC,GAAG,CAAC;AAC3B;AACD,IAAA,OAAO,GAAG;AACZ;;;;;;;"}

package/dist/components/Anchor/utils/urlUtils.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Utility functions for URL processing
+ */
+/**
+ * Checks if the URL should have a prefix added based on the current context
+ * @returns {boolean} Whether a prefix should be added
+ */
+export declare const shouldAddPrefix: () => boolean;
+/**
+ * Checks if a URL is relative (not starting with http://, https://, or //)
+ * @param {string} url - The URL to check
+ * @returns {boolean} Whether the URL is relative
+ */
+export declare const isRelativeUrl: (url: string) => boolean;
+/**
+ * Adds the appropriate prefix to a URL based on the current context
+ * @param {string} url - The URL to add a prefix to
+ * @returns {string} The URL with prefix added if needed
+ */
+export declare const addPrefixToUrl: (url: string) => string;
+/**
+ * Processes a URL by adding the appropriate prefix if needed
+ * @param {string} url - The URL to process
+ * @returns {string} The processed URL
+ */
+export declare const createContextAwareUrl: (url: string) => string;

package/dist/components/Anchor/utils/urlUtils.js

@@ -0,0 +1,36 @@
+/**
+ * Utility functions for URL processing
+ */
+/**
+ * Checks if the URL should have a prefix added based on the current context
+ * @returns {boolean} Whether a prefix should be added
+ */
+const shouldAddPrefix = () => !!(window.veeqoContext &&
+    window.veeqoContext.vqHost !== 'standalone' &&
+    window.veeqoContext.baseUrl);
+/**
+ * Checks if a URL is relative (not starting with http://, https://, or //)
+ * @param {string} url - The URL to check
+ * @returns {boolean} Whether the URL is relative
+ */
+const isRelativeUrl = (url) => !url.match(/^(https?:\/\/|\/\/)/);
+/**
+ * Adds the appropriate prefix to a URL based on the current context
+ * @param {string} url - The URL to add a prefix to
+ * @returns {string} The URL with prefix added if needed
+ */
+const addPrefixToUrl = (url) => { var _a; return `${((_a = window.veeqoContext) === null || _a === undefined ? undefined : _a.baseUrl) || ''}${url.startsWith('/') ? '' : '/'}${url}`; };
+/**
+ * Processes a URL by adding the appropriate prefix if needed
+ * @param {string} url - The URL to process
+ * @returns {string} The processed URL
+ */
+const createContextAwareUrl = (url) => {
+    if (shouldAddPrefix() && isRelativeUrl(url)) {
+        return addPrefixToUrl(url);
+    }
+    return url;
+};
+
+export { addPrefixToUrl, createContextAwareUrl, isRelativeUrl, shouldAddPrefix };
+//# sourceMappingURL=urlUtils.js.map

package/dist/components/Anchor/utils/urlUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"urlUtils.js","sources":["../../../../src/components/Anchor/utils/urlUtils.ts"],"sourcesContent":["/**\n * Utility functions for URL processing\n */\n\n/**\n * Checks if the URL should have a prefix added based on the current context\n * @returns {boolean} Whether a prefix should be added\n */\nexport const shouldAddPrefix = (): boolean =>\n  !!(\n    window.veeqoContext &&\n    window.veeqoContext.vqHost !== 'standalone' &&\n    window.veeqoContext.baseUrl\n  );\n\n/**\n * Checks if a URL is relative (not starting with http://, https://, or //)\n * @param {string} url - The URL to check\n * @returns {boolean} Whether the URL is relative\n */\nexport const isRelativeUrl = (url: string): boolean => !url.match(/^(https?:\\/\\/|\\/\\/)/);\n\n/**\n * Adds the appropriate prefix to a URL based on the current context\n * @param {string} url - The URL to add a prefix to\n * @returns {string} The URL with prefix added if needed\n */\nexport const addPrefixToUrl = (url: string): string =>\n  `${window.veeqoContext?.baseUrl || ''}${url.startsWith('/') ? '' : '/'}${url}`;\n\n/**\n * Processes a URL by adding the appropriate prefix if needed\n * @param {string} url - The URL to process\n * @returns {string} The processed URL\n */\nexport const createContextAwareUrl = (url: string): string => {\n  if (shouldAddPrefix() && isRelativeUrl(url)) {\n    return addPrefixToUrl(url);\n  }\n  return url;\n};\n"],"names":[],"mappings":"AAAA;;AAEG;AAEH;;;AAGG;AACI,MAAM,eAAe,GAAG,MAC7B,CAAC,EACC,MAAM,CAAC,YAAY;AACnB,IAAA,MAAM,CAAC,YAAY,CAAC,MAAM,KAAK,YAAY;AAC3C,IAAA,MAAM,CAAC,YAAY,CAAC,OAAO;AAG/B;;;;AAIG;AACU,MAAA,aAAa,GAAG,CAAC,GAAW,KAAc,CAAC,GAAG,CAAC,KAAK,CAAC,qBAAqB;AAEvF;;;;AAIG;AACU,MAAA,cAAc,GAAG,CAAC,GAAW,KAAY,EAAA,IAAA,EAAA,CAAA,CACpD,OAAA,CAAA,EAAG,CAAA,CAAA,EAAA,GAAA,MAAM,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,OAAO,KAAI,EAAE,CAAG,EAAA,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,CAAA,EAAG,GAAG,CAAE,CAAA,CAAA;AAEhF;;;;AAIG;AACU,MAAA,qBAAqB,GAAG,CAAC,GAAW,KAAY;AAC3D,IAAA,IAAI,eAAe,EAAE,IAAI,aAAa,CAAC,GAAG,CAAC,EAAE;AAC3C,QAAA,OAAO,cAAc,CAAC,GAAG,CAAC;AAC3B;AACD,IAAA,OAAO,GAAG;AACZ;;;;"}

package/dist/components/AnimatedDropdown/components/styled.cjs

@@ -7,7 +7,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--r1m0qe" }) `display:inline-flex;background-color:#ffffff;box-shadow:1px 4px 15px rgba(27, 33, 38, 0.25);border-radius:4px;overflow:hidden;`;
+const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--901a1g" }) `display:inline-flex;background-color:#ffffff;box-shadow:1px 4px 15px rgba(27, 33, 38, 0.25);border-radius:4px;overflow:hidden;`;
 
 exports.Container = Container;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/AnimatedDropdown/components/styled.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { BaseContainer } from '../../BaseContainer/BaseContainer.js';
 
-const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--r1m0qe" }) `display:inline-flex;background-color:#ffffff;box-shadow:1px 4px 15px rgba(27, 33, 38, 0.25);border-radius:4px;overflow:hidden;`;
+const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--901a1g" }) `display:inline-flex;background-color:#ffffff;box-shadow:1px 4px 15px rgba(27, 33, 38, 0.25);border-radius:4px;overflow:hidden;`;
 
 export { Container };
 //# sourceMappingURL=styled.js.map

package/dist/components/AnimatedDropdown/styled.cjs

@@ -9,9 +9,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--q4276w" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;`;
-const Wrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Wrap", componentId: "vui--cfebb1" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;min-width:100%;`;
-const Dropdown = styled__default.default(BasicDropdown.BasicDropdown).withConfig({ displayName: "vui--Dropdown", componentId: "vui--u4w0zl" }) `flex-direction:column;position:absolute;z-index:${index.theme.layers.popup};${(props) => (props.reversed ? 'bottom: 8px;' : 'top: 6px;')} &.dropdown-enter{opacity:0;transform:translateY(-6px);}&.dropdown-enter-active{opacity:1;transition:all 200ms;transform:translateY(0px);}&.dropdown-exit{opacity:1;transform:translateY(0px);}&.dropdown-exit-active{opacity:0;transition:all 200ms;transform:translateY(-6px);}`;
+const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--602vf7" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;`;
+const Wrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Wrap", componentId: "vui--npjssh" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;min-width:100%;`;
+const Dropdown = styled__default.default(BasicDropdown.BasicDropdown).withConfig({ displayName: "vui--Dropdown", componentId: "vui--dv3wrs" }) `flex-direction:column;position:absolute;z-index:${index.theme.layers.popup};${(props) => (props.reversed ? 'bottom: 8px;' : 'top: 6px;')} &.dropdown-enter{opacity:0;transform:translateY(-6px);}&.dropdown-enter-active{opacity:1;transition:all 200ms;transform:translateY(0px);}&.dropdown-exit{opacity:1;transform:translateY(0px);}&.dropdown-exit-active{opacity:0;transition:all 200ms;transform:translateY(-6px);}`;
 
 exports.Container = Container;
 exports.Dropdown = Dropdown;

package/dist/components/AnimatedDropdown/styled.js

@@ -3,9 +3,9 @@ import { BasicDropdown } from './components/BasicDropdown.js';
 import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 import { theme } from '../../theme/index.js';
 
-const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--q4276w" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;`;
-const Wrap = styled(BaseContainer).withConfig({ displayName: "vui--Wrap", componentId: "vui--cfebb1" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;min-width:100%;`;
-const Dropdown = styled(BasicDropdown).withConfig({ displayName: "vui--Dropdown", componentId: "vui--u4w0zl" }) `flex-direction:column;position:absolute;z-index:${theme.layers.popup};${(props) => (props.reversed ? 'bottom: 8px;' : 'top: 6px;')} &.dropdown-enter{opacity:0;transform:translateY(-6px);}&.dropdown-enter-active{opacity:1;transition:all 200ms;transform:translateY(0px);}&.dropdown-exit{opacity:1;transform:translateY(0px);}&.dropdown-exit-active{opacity:0;transition:all 200ms;transform:translateY(-6px);}`;
+const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--602vf7" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;`;
+const Wrap = styled(BaseContainer).withConfig({ displayName: "vui--Wrap", componentId: "vui--npjssh" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;min-width:100%;`;
+const Dropdown = styled(BasicDropdown).withConfig({ displayName: "vui--Dropdown", componentId: "vui--dv3wrs" }) `flex-direction:column;position:absolute;z-index:${theme.layers.popup};${(props) => (props.reversed ? 'bottom: 8px;' : 'top: 6px;')} &.dropdown-enter{opacity:0;transform:translateY(-6px);}&.dropdown-enter-active{opacity:1;transition:all 200ms;transform:translateY(0px);}&.dropdown-exit{opacity:1;transform:translateY(0px);}&.dropdown-exit-active{opacity:0;transition:all 200ms;transform:translateY(-6px);}`;
 
 export { Container, Dropdown, Wrap };
 //# sourceMappingURL=styled.js.map

package/dist/components/Avatar/styled.cjs

@@ -7,7 +7,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const AvatarSC = styled__default.default.div.withConfig({ displayName: "vui--AvatarSC", componentId: "vui--1gxc5tv" }) `width:${(props) => props.width};height:${(props) => props.width};border:3px solid ${index.theme.colors.neutral.grey.base};color:${(props) => props.textColor};background-color:${(props) => props.bgColor};cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center;background-size:cover;span{font-family:${index.theme.text.bodySmallBold.fontFamily};font-weight:${index.theme.text.bodySmallBold.fontWeight};font-size:${index.theme.text.bodySmallBold.fontSize};line-height:${index.theme.text.bodySmallBold.lineHeight};}`;
+const AvatarSC = styled__default.default.div.withConfig({ displayName: "vui--AvatarSC", componentId: "vui--224xhi" }) `width:${(props) => props.width};height:${(props) => props.width};border:3px solid ${index.theme.colors.neutral.grey.base};color:${(props) => props.textColor};background-color:${(props) => props.bgColor};cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center;background-size:cover;span{font-family:${index.theme.text.bodySmallBold.fontFamily};font-weight:${index.theme.text.bodySmallBold.fontWeight};font-size:${index.theme.text.bodySmallBold.fontSize};line-height:${index.theme.text.bodySmallBold.lineHeight};}`;
 
 exports.AvatarSC = AvatarSC;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Avatar/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { AvatarSCProps } from './types';\n\nexport const AvatarSC = styled.div<AvatarSCProps>`\n  width: ${(props) => props.width};\n  height: ${(props) => props.width};\n  border: 3px solid ${theme.colors.neutral.grey.base};\n  color: ${(props) => props.textColor};\n  background-color: ${(props) => props.bgColor};\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-size: cover;\n\n  span {\n    font-family: ${theme.text.bodySmallBold.fontFamily};\n    font-weight: ${theme.text.bodySmallBold.fontWeight};\n    font-size: ${theme.text.bodySmallBold.fontSize};\n    line-height: ${theme.text.bodySmallBold.lineHeight};\n  }\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAIa,MAAA,QAAQ,GAAGA,uBAAM,CAAC,GAAG,CACvB,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA,QAAA,EACrB,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,qBACZC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACzC,OAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS,CAAA,kBAAA,EACf,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAA,gIAAA,EAS3BA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,aAAA,EACnCA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,WAAA,EACrCA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAC/B,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Avatar/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { AvatarSCProps } from './types';\n\nexport const AvatarSC = styled.div<AvatarSCProps>`\n  width: ${(props) => props.width};\n  height: ${(props) => props.width};\n  border: 3px solid ${theme.colors.neutral.grey.base};\n  color: ${(props) => props.textColor};\n  background-color: ${(props) => props.bgColor};\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-size: cover;\n\n  span {\n    font-family: ${theme.text.bodySmallBold.fontFamily};\n    font-weight: ${theme.text.bodySmallBold.fontWeight};\n    font-size: ${theme.text.bodySmallBold.fontSize};\n    line-height: ${theme.text.bodySmallBold.lineHeight};\n  }\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAIa,MAAA,QAAQ,GAAGA,uBAAM,CAAC,GAAG,CACvB,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA,QAAA,EACrB,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,qBACZC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACzC,OAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS,CAAA,kBAAA,EACf,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAA,gIAAA,EAS3BA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,aAAA,EACnCA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,WAAA,EACrCA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAC/B,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU;;;;"}

package/dist/components/Avatar/styled.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { theme } from '../../theme/index.js';
 
-const AvatarSC = styled.div.withConfig({ displayName: "vui--AvatarSC", componentId: "vui--1gxc5tv" }) `width:${(props) => props.width};height:${(props) => props.width};border:3px solid ${theme.colors.neutral.grey.base};color:${(props) => props.textColor};background-color:${(props) => props.bgColor};cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center;background-size:cover;span{font-family:${theme.text.bodySmallBold.fontFamily};font-weight:${theme.text.bodySmallBold.fontWeight};font-size:${theme.text.bodySmallBold.fontSize};line-height:${theme.text.bodySmallBold.lineHeight};}`;
+const AvatarSC = styled.div.withConfig({ displayName: "vui--AvatarSC", componentId: "vui--224xhi" }) `width:${(props) => props.width};height:${(props) => props.width};border:3px solid ${theme.colors.neutral.grey.base};color:${(props) => props.textColor};background-color:${(props) => props.bgColor};cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center;background-size:cover;span{font-family:${theme.text.bodySmallBold.fontFamily};font-weight:${theme.text.bodySmallBold.fontWeight};font-size:${theme.text.bodySmallBold.fontSize};line-height:${theme.text.bodySmallBold.lineHeight};}`;
 
 export { AvatarSC };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Avatar/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { AvatarSCProps } from './types';\n\nexport const AvatarSC = styled.div<AvatarSCProps>`\n  width: ${(props) => props.width};\n  height: ${(props) => props.width};\n  border: 3px solid ${theme.colors.neutral.grey.base};\n  color: ${(props) => props.textColor};\n  background-color: ${(props) => props.bgColor};\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-size: cover;\n\n  span {\n    font-family: ${theme.text.bodySmallBold.fontFamily};\n    font-weight: ${theme.text.bodySmallBold.fontWeight};\n    font-size: ${theme.text.bodySmallBold.fontSize};\n    line-height: ${theme.text.bodySmallBold.lineHeight};\n  }\n`;\n"],"names":[],"mappings":";;;AAIa,MAAA,QAAQ,GAAG,MAAM,CAAC,GAAG,CACvB,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA,QAAA,EACrB,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,qBACZ,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACzC,OAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS,CAAA,kBAAA,EACf,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAA,gIAAA,EAS3B,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,aAAA,EACnC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,WAAA,EACrC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAC/B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Avatar/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { AvatarSCProps } from './types';\n\nexport const AvatarSC = styled.div<AvatarSCProps>`\n  width: ${(props) => props.width};\n  height: ${(props) => props.width};\n  border: 3px solid ${theme.colors.neutral.grey.base};\n  color: ${(props) => props.textColor};\n  background-color: ${(props) => props.bgColor};\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-size: cover;\n\n  span {\n    font-family: ${theme.text.bodySmallBold.fontFamily};\n    font-weight: ${theme.text.bodySmallBold.fontWeight};\n    font-size: ${theme.text.bodySmallBold.fontSize};\n    line-height: ${theme.text.bodySmallBold.lineHeight};\n  }\n`;\n"],"names":[],"mappings":";;;AAIa,MAAA,QAAQ,GAAG,MAAM,CAAC,GAAG,CACvB,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA,QAAA,EACrB,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,qBACZ,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACzC,OAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS,CAAA,kBAAA,EACf,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAA,gIAAA,EAS3B,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,aAAA,EACnC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,WAAA,EACrC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAC/B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU;;;;"}

package/dist/components/Badge/styled.cjs

@@ -10,10 +10,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const BaseBadge = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--BaseBadge", componentId: "vui--1l3fzu" }) `display:inline-flex;align-items:center;vertical-align:middle;gap:4px;padding:0.35em 0.65em;font-family:${text.text.bodySmall.fontFamily};font-weight:${text.text.bodySmall.fontWeight};font-size:75%;line-height:16px;border-radius:0.75rem;border:${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};cursor:default;svg{width:${sizes.sizes.base};height:${sizes.sizes.base};}`;
-const DefaultBadge = styled__default.default(BaseBadge).withConfig({ displayName: "vui--DefaultBadge", componentId: "vui--rwc6j0" }) `background-color:inherit;border-color:${colors.colors.secondary.blue.base};color:${colors.colors.secondary.blue.base};`;
-const PrimaryBadge = styled__default.default(BaseBadge).withConfig({ displayName: "vui--PrimaryBadge", componentId: "vui--1fakkjy" }) `border-color:${colors.colors.secondary.blue.base};background-color:${colors.colors.secondary.blue.lightest};color:${colors.colors.secondary.blue.base};`;
-const WarningBadge = styled__default.default(BaseBadge).withConfig({ displayName: "vui--WarningBadge", componentId: "vui--1r2egf1" }) `border-color:${colors.colors.secondary.yellow.base};background-color:${colors.colors.secondary.yellow.lightest};color:${colors.colors.secondary.orange.dark};`;
+const BaseBadge = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--BaseBadge", componentId: "vui--idt2e7" }) `display:inline-flex;align-items:center;vertical-align:middle;gap:4px;padding:0.35em 0.65em;font-family:${text.text.bodySmall.fontFamily};font-weight:${text.text.bodySmall.fontWeight};font-size:75%;line-height:16px;border-radius:0.75rem;border:${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};cursor:default;svg{width:${sizes.sizes.base};height:${sizes.sizes.base};}`;
+const DefaultBadge = styled__default.default(BaseBadge).withConfig({ displayName: "vui--DefaultBadge", componentId: "vui--cjoxaq" }) `background-color:inherit;border-color:${colors.colors.secondary.blue.base};color:${colors.colors.secondary.blue.base};`;
+const PrimaryBadge = styled__default.default(BaseBadge).withConfig({ displayName: "vui--PrimaryBadge", componentId: "vui--12dvheo" }) `border-color:${colors.colors.secondary.blue.base};background-color:${colors.colors.secondary.blue.lightest};color:${colors.colors.secondary.blue.base};`;
+const WarningBadge = styled__default.default(BaseBadge).withConfig({ displayName: "vui--WarningBadge", componentId: "vui--5cooo3" }) `border-color:${colors.colors.secondary.yellow.base};background-color:${colors.colors.secondary.yellow.lightest};color:${colors.colors.secondary.orange.dark};`;
 
 exports.DefaultBadge = DefaultBadge;
 exports.PrimaryBadge = PrimaryBadge;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Badge/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\nimport { text } from '../../theme/modules/text';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype BaseBadgeProps = {\n  hideBorder: boolean;\n};\n\nconst BaseBadge = styled(BaseContainer)<BaseBadgeProps>`\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n  gap: 4px;\n  padding: 0.35em 0.65em;\n\n  font-family: ${text.bodySmall.fontFamily};\n  font-weight: ${text.bodySmall.fontWeight};\n  font-size: 75%;\n  line-height: 16px;\n\n  border-radius: 0.75rem;\n  border: ${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};\n\n  cursor: default;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n`;\n\nexport const DefaultBadge = styled(BaseBadge)`\n  background-color: inherit;\n  border-color: ${colors.secondary.blue.base};\n  color: ${colors.secondary.blue.base};\n`;\n\nexport const PrimaryBadge = styled(BaseBadge)`\n  border-color: ${colors.secondary.blue.base};\n  background-color: ${colors.secondary.blue.lightest};\n  color: ${colors.secondary.blue.base};\n`;\n\nexport const WarningBadge = styled(BaseBadge)`\n  border-color: ${colors.secondary.yellow.base};\n  background-color: ${colors.secondary.yellow.lightest};\n  color: ${colors.secondary.orange.dark};\n`;\n"],"names":["styled","BaseContainer","text","sizes","colors"],"mappings":";;;;;;;;;;;;AAUA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uGAAA,EAOtBC,SAAI,CAAC,SAAS,CAAC,UAAU,CAAA,aAAA,EACzBA,SAAI,CAAC,SAAS,CAAC,UAAU,CAAA,6DAAA,EAK9B,CAAC,KAAK,MAAM,KAAK,CAAC,UAAU,GAAG,MAAM,GAAG,uBAAuB,CAAC,CAAA,0BAAA,EAK/DC,WAAK,CAAC,IAAI,WACTA,WAAK,CAAC,IAAI,CAAA,EAAA,CAEvB;AAEY,MAAA,YAAY,GAAGH,uBAAM,CAAC,SAAS,CAAC,CAE3B,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAAAI,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,OAAA,EACjCA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,CAAA;AAG9B,MAAM,YAAY,GAAGJ,uBAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAC3BI,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CACtB,kBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,OAAA,EACzCA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAG9B,MAAM,YAAY,GAAGJ,uBAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAC3BI,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CACxB,kBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAA,OAAA,EAC3CA,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Badge/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\nimport { text } from '../../theme/modules/text';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype BaseBadgeProps = {\n  hideBorder: boolean;\n};\n\nconst BaseBadge = styled(BaseContainer)<BaseBadgeProps>`\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n  gap: 4px;\n  padding: 0.35em 0.65em;\n\n  font-family: ${text.bodySmall.fontFamily};\n  font-weight: ${text.bodySmall.fontWeight};\n  font-size: 75%;\n  line-height: 16px;\n\n  border-radius: 0.75rem;\n  border: ${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};\n\n  cursor: default;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n`;\n\nexport const DefaultBadge = styled(BaseBadge)`\n  background-color: inherit;\n  border-color: ${colors.secondary.blue.base};\n  color: ${colors.secondary.blue.base};\n`;\n\nexport const PrimaryBadge = styled(BaseBadge)`\n  border-color: ${colors.secondary.blue.base};\n  background-color: ${colors.secondary.blue.lightest};\n  color: ${colors.secondary.blue.base};\n`;\n\nexport const WarningBadge = styled(BaseBadge)`\n  border-color: ${colors.secondary.yellow.base};\n  background-color: ${colors.secondary.yellow.lightest};\n  color: ${colors.secondary.orange.dark};\n`;\n"],"names":["styled","BaseContainer","text","sizes","colors"],"mappings":";;;;;;;;;;;;AAUA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uGAAA,EAOtBC,SAAI,CAAC,SAAS,CAAC,UAAU,CAAA,aAAA,EACzBA,SAAI,CAAC,SAAS,CAAC,UAAU,CAAA,6DAAA,EAK9B,CAAC,KAAK,MAAM,KAAK,CAAC,UAAU,GAAG,MAAM,GAAG,uBAAuB,CAAC,CAAA,0BAAA,EAK/DC,WAAK,CAAC,IAAI,WACTA,WAAK,CAAC,IAAI,CAAA,EAAA,CAEvB;AAEY,MAAA,YAAY,GAAGH,uBAAM,CAAC,SAAS,CAAC,CAE3B,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAAAI,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,OAAA,EACjCA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,CAAA;AAG9B,MAAM,YAAY,GAAGJ,uBAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAC3BI,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CACtB,kBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,OAAA,EACzCA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAG9B,MAAM,YAAY,GAAGJ,uBAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAC3BI,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CACxB,kBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAA,OAAA,EAC3CA,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;;;"}

package/dist/components/Badge/styled.js

@@ -4,10 +4,10 @@ import { text } from '../../theme/modules/text.js';
 import { colors } from '../../theme/modules/colors.js';
 import { sizes } from '../../theme/modules/sizes.js';
 
-const BaseBadge = styled(BaseContainer).withConfig({ displayName: "vui--BaseBadge", componentId: "vui--1l3fzu" }) `display:inline-flex;align-items:center;vertical-align:middle;gap:4px;padding:0.35em 0.65em;font-family:${text.bodySmall.fontFamily};font-weight:${text.bodySmall.fontWeight};font-size:75%;line-height:16px;border-radius:0.75rem;border:${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};cursor:default;svg{width:${sizes.base};height:${sizes.base};}`;
-const DefaultBadge = styled(BaseBadge).withConfig({ displayName: "vui--DefaultBadge", componentId: "vui--rwc6j0" }) `background-color:inherit;border-color:${colors.secondary.blue.base};color:${colors.secondary.blue.base};`;
-const PrimaryBadge = styled(BaseBadge).withConfig({ displayName: "vui--PrimaryBadge", componentId: "vui--1fakkjy" }) `border-color:${colors.secondary.blue.base};background-color:${colors.secondary.blue.lightest};color:${colors.secondary.blue.base};`;
-const WarningBadge = styled(BaseBadge).withConfig({ displayName: "vui--WarningBadge", componentId: "vui--1r2egf1" }) `border-color:${colors.secondary.yellow.base};background-color:${colors.secondary.yellow.lightest};color:${colors.secondary.orange.dark};`;
+const BaseBadge = styled(BaseContainer).withConfig({ displayName: "vui--BaseBadge", componentId: "vui--idt2e7" }) `display:inline-flex;align-items:center;vertical-align:middle;gap:4px;padding:0.35em 0.65em;font-family:${text.bodySmall.fontFamily};font-weight:${text.bodySmall.fontWeight};font-size:75%;line-height:16px;border-radius:0.75rem;border:${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};cursor:default;svg{width:${sizes.base};height:${sizes.base};}`;
+const DefaultBadge = styled(BaseBadge).withConfig({ displayName: "vui--DefaultBadge", componentId: "vui--cjoxaq" }) `background-color:inherit;border-color:${colors.secondary.blue.base};color:${colors.secondary.blue.base};`;
+const PrimaryBadge = styled(BaseBadge).withConfig({ displayName: "vui--PrimaryBadge", componentId: "vui--12dvheo" }) `border-color:${colors.secondary.blue.base};background-color:${colors.secondary.blue.lightest};color:${colors.secondary.blue.base};`;
+const WarningBadge = styled(BaseBadge).withConfig({ displayName: "vui--WarningBadge", componentId: "vui--5cooo3" }) `border-color:${colors.secondary.yellow.base};background-color:${colors.secondary.yellow.lightest};color:${colors.secondary.orange.dark};`;
 
 export { DefaultBadge, PrimaryBadge, WarningBadge };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Badge/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\nimport { text } from '../../theme/modules/text';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype BaseBadgeProps = {\n  hideBorder: boolean;\n};\n\nconst BaseBadge = styled(BaseContainer)<BaseBadgeProps>`\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n  gap: 4px;\n  padding: 0.35em 0.65em;\n\n  font-family: ${text.bodySmall.fontFamily};\n  font-weight: ${text.bodySmall.fontWeight};\n  font-size: 75%;\n  line-height: 16px;\n\n  border-radius: 0.75rem;\n  border: ${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};\n\n  cursor: default;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n`;\n\nexport const DefaultBadge = styled(BaseBadge)`\n  background-color: inherit;\n  border-color: ${colors.secondary.blue.base};\n  color: ${colors.secondary.blue.base};\n`;\n\nexport const PrimaryBadge = styled(BaseBadge)`\n  border-color: ${colors.secondary.blue.base};\n  background-color: ${colors.secondary.blue.lightest};\n  color: ${colors.secondary.blue.base};\n`;\n\nexport const WarningBadge = styled(BaseBadge)`\n  border-color: ${colors.secondary.yellow.base};\n  background-color: ${colors.secondary.yellow.lightest};\n  color: ${colors.secondary.orange.dark};\n`;\n"],"names":[],"mappings":";;;;;;AAUA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uGAAA,EAOtB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,aAAA,EACzB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,6DAAA,EAK9B,CAAC,KAAK,MAAM,KAAK,CAAC,UAAU,GAAG,MAAM,GAAG,uBAAuB,CAAC,CAAA,0BAAA,EAK/D,KAAK,CAAC,IAAI,WACT,KAAK,CAAC,IAAI,CAAA,EAAA,CAEvB;AAEY,MAAA,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAE3B,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,OAAA,EACjC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,CAAA;AAG9B,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAC3B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CACtB,kBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,OAAA,EACzC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAG9B,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAC3B,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CACxB,kBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAA,OAAA,EAC3C,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Badge/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\nimport { text } from '../../theme/modules/text';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype BaseBadgeProps = {\n  hideBorder: boolean;\n};\n\nconst BaseBadge = styled(BaseContainer)<BaseBadgeProps>`\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n  gap: 4px;\n  padding: 0.35em 0.65em;\n\n  font-family: ${text.bodySmall.fontFamily};\n  font-weight: ${text.bodySmall.fontWeight};\n  font-size: 75%;\n  line-height: 16px;\n\n  border-radius: 0.75rem;\n  border: ${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};\n\n  cursor: default;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n`;\n\nexport const DefaultBadge = styled(BaseBadge)`\n  background-color: inherit;\n  border-color: ${colors.secondary.blue.base};\n  color: ${colors.secondary.blue.base};\n`;\n\nexport const PrimaryBadge = styled(BaseBadge)`\n  border-color: ${colors.secondary.blue.base};\n  background-color: ${colors.secondary.blue.lightest};\n  color: ${colors.secondary.blue.base};\n`;\n\nexport const WarningBadge = styled(BaseBadge)`\n  border-color: ${colors.secondary.yellow.base};\n  background-color: ${colors.secondary.yellow.lightest};\n  color: ${colors.secondary.orange.dark};\n`;\n"],"names":[],"mappings":";;;;;;AAUA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uGAAA,EAOtB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,aAAA,EACzB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,6DAAA,EAK9B,CAAC,KAAK,MAAM,KAAK,CAAC,UAAU,GAAG,MAAM,GAAG,uBAAuB,CAAC,CAAA,0BAAA,EAK/D,KAAK,CAAC,IAAI,WACT,KAAK,CAAC,IAAI,CAAA,EAAA,CAEvB;AAEY,MAAA,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAE3B,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,OAAA,EACjC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,CAAA;AAG9B,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAC3B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CACtB,kBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,OAAA,EACzC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAG9B,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAC3B,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CACxB,kBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAA,OAAA,EAC3C,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;"}

package/dist/components/Banner/styled.cjs

@@ -9,16 +9,16 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const BannerLayout = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--BannerLayout", componentId: "vui--c6sp3u" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:20px 24px 24px 24px;border-radius:4px;${({ accentColor }) => accentColor &&
+const BannerLayout = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--BannerLayout", componentId: "vui--5tzoxx" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:20px 24px 24px 24px;border-radius:4px;${({ accentColor }) => accentColor &&
     `
       box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};
     `} background-color:${({ backgroundColor }) => backgroundColor || 'white'};`;
-const Row = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--1rdjrmx" }) `display:flex;flex-direction:row;`;
-const Col = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Col", componentId: "vui--1ttgibs" }) `display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;`;
-const IconCol = styled__default.default(Col).withConfig({ displayName: "vui--IconCol", componentId: "vui--1z6c5f" }) `svg{width:${sizes.sizes.md};height:${sizes.sizes.md};color:${({ accentColor }) => accentColor};}`;
-const ChildContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--ChildContainer", componentId: "vui--kn3qcr" }) `width:100%;`;
-const HeaderCol = styled__default.default(Col).withConfig({ displayName: "vui--HeaderCol", componentId: "vui--1nlkkdb" }) `flex-grow:2;margin-right:12px;`;
-const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--1ioilg" }) `position:relative;top:-2px;`;
+const Row = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--9nzbbv" }) `display:flex;flex-direction:row;`;
+const Col = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Col", componentId: "vui--zplr21" }) `display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;`;
+const IconCol = styled__default.default(Col).withConfig({ displayName: "vui--IconCol", componentId: "vui--1j9d69e" }) `svg{width:${sizes.sizes.md};height:${sizes.sizes.md};color:${({ accentColor }) => accentColor};}`;
+const ChildContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--ChildContainer", componentId: "vui--wt59q7" }) `width:100%;`;
+const HeaderCol = styled__default.default(Col).withConfig({ displayName: "vui--HeaderCol", componentId: "vui--1wkol92" }) `flex-grow:2;margin-right:12px;`;
+const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--150p0zs" }) `position:relative;top:-2px;`;
 
 exports.ChildContainer = ChildContainer;
 exports.Col = Col;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Banner/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\nimport { PillProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst BannerLayout = styled(BaseContainer)<PillProps>`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  padding: 20px 24px 24px 24px;\n  border-radius: 4px;\n  ${({ accentColor }) =>\n    accentColor &&\n    `\n      box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};\n    `}\n  background-color: ${({ backgroundColor }) => backgroundColor || 'white'};\n`;\n\nconst Row = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Col = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  flex-wrap: wrap;\n`;\n\nexport const IconCol = styled(Col)<{ accentColor: string }>`\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n    color: ${({ accentColor }) => accentColor};\n  }\n`;\n\nexport const ChildContainer = styled(BaseContainer)`\n  width: 100%;\n`;\n\nconst HeaderCol = styled(Col)`\n  flex-grow: 2;\n  margin-right: 12px;\n`;\n\nconst StyledText = styled(Text)`\n  position: relative;\n  top: -2px;\n`;\n\nexport { BannerLayout as Pill, StyledText as Text, Row, Col, HeaderCol };\n"],"names":["styled","BaseContainer","sizes","Text"],"mappings":";;;;;;;;;;;AAOA,MAAM,YAAY,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,gIAAA,EAOtC,CAAC,EAAE,WAAW,EAAE,KAChB,WAAW;AACX,IAAA;0EACsE,WAAW,CAAA;KAChF,CACiB,kBAAA,EAAA,CAAC,EAAE,eAAe,EAAE,KAAK,eAAe,IAAI,OAAO,CAAA,CAAA;AAGzE,MAAM,GAAG,GAAGD,uBAAM,CAACC,2BAAa,CAAC;AAKjC,MAAM,GAAG,GAAGD,uBAAM,CAACC,2BAAa,CAAC;AAOpB,MAAA,OAAO,GAAGD,uBAAM,CAAC,GAAG,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAErBE,WAAK,CAAC,EAAE,CAAA,QAAA,EACPA,WAAK,CAAC,EAAE,CACT,OAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,EAAA;MAIhC,cAAc,GAAGF,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,WAAA;AAInD,MAAM,SAAS,GAAGD,uBAAM,CAAC,GAAG,CAAC;AAK7B,MAAM,UAAU,GAAGA,uBAAM,CAACG,SAAI,CAAC;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Banner/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\nimport { PillProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst BannerLayout = styled(BaseContainer)<PillProps>`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  padding: 20px 24px 24px 24px;\n  border-radius: 4px;\n  ${({ accentColor }) =>\n    accentColor &&\n    `\n      box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};\n    `}\n  background-color: ${({ backgroundColor }) => backgroundColor || 'white'};\n`;\n\nconst Row = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Col = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  flex-wrap: wrap;\n`;\n\nexport const IconCol = styled(Col)<{ accentColor: string }>`\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n    color: ${({ accentColor }) => accentColor};\n  }\n`;\n\nexport const ChildContainer = styled(BaseContainer)`\n  width: 100%;\n`;\n\nconst HeaderCol = styled(Col)`\n  flex-grow: 2;\n  margin-right: 12px;\n`;\n\nconst StyledText = styled(Text)`\n  position: relative;\n  top: -2px;\n`;\n\nexport { BannerLayout as Pill, StyledText as Text, Row, Col, HeaderCol };\n"],"names":["styled","BaseContainer","sizes","Text"],"mappings":";;;;;;;;;;;AAOA,MAAM,YAAY,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,gIAAA,EAOtC,CAAC,EAAE,WAAW,EAAE,KAChB,WAAW;AACX,IAAA;0EACsE,WAAW,CAAA;KAChF,CACiB,kBAAA,EAAA,CAAC,EAAE,eAAe,EAAE,KAAK,eAAe,IAAI,OAAO,CAAA,CAAA;AAGzE,MAAM,GAAG,GAAGD,uBAAM,CAACC,2BAAa,CAAC;AAKjC,MAAM,GAAG,GAAGD,uBAAM,CAACC,2BAAa,CAAC;AAOpB,MAAA,OAAO,GAAGD,uBAAM,CAAC,GAAG,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAErBE,WAAK,CAAC,EAAE,CAAA,QAAA,EACPA,WAAK,CAAC,EAAE,CACT,OAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,EAAA;MAIhC,cAAc,GAAGF,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,WAAA;AAInD,MAAM,SAAS,GAAGD,uBAAM,CAAC,GAAG,CAAC;AAK7B,MAAM,UAAU,GAAGA,uBAAM,CAACG,SAAI,CAAC;;;;;;;;;;"}

package/dist/components/Banner/styled.js

@@ -3,16 +3,16 @@ import { Text } from '../Text/Text.js';
 import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 import { sizes } from '../../theme/modules/sizes.js';
 
-const BannerLayout = styled(BaseContainer).withConfig({ displayName: "vui--BannerLayout", componentId: "vui--c6sp3u" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:20px 24px 24px 24px;border-radius:4px;${({ accentColor }) => accentColor &&
+const BannerLayout = styled(BaseContainer).withConfig({ displayName: "vui--BannerLayout", componentId: "vui--5tzoxx" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:20px 24px 24px 24px;border-radius:4px;${({ accentColor }) => accentColor &&
     `
       box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};
     `} background-color:${({ backgroundColor }) => backgroundColor || 'white'};`;
-const Row = styled(BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--1rdjrmx" }) `display:flex;flex-direction:row;`;
-const Col = styled(BaseContainer).withConfig({ displayName: "vui--Col", componentId: "vui--1ttgibs" }) `display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;`;
-const IconCol = styled(Col).withConfig({ displayName: "vui--IconCol", componentId: "vui--1z6c5f" }) `svg{width:${sizes.md};height:${sizes.md};color:${({ accentColor }) => accentColor};}`;
-const ChildContainer = styled(BaseContainer).withConfig({ displayName: "vui--ChildContainer", componentId: "vui--kn3qcr" }) `width:100%;`;
-const HeaderCol = styled(Col).withConfig({ displayName: "vui--HeaderCol", componentId: "vui--1nlkkdb" }) `flex-grow:2;margin-right:12px;`;
-const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--1ioilg" }) `position:relative;top:-2px;`;
+const Row = styled(BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--9nzbbv" }) `display:flex;flex-direction:row;`;
+const Col = styled(BaseContainer).withConfig({ displayName: "vui--Col", componentId: "vui--zplr21" }) `display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;`;
+const IconCol = styled(Col).withConfig({ displayName: "vui--IconCol", componentId: "vui--1j9d69e" }) `svg{width:${sizes.md};height:${sizes.md};color:${({ accentColor }) => accentColor};}`;
+const ChildContainer = styled(BaseContainer).withConfig({ displayName: "vui--ChildContainer", componentId: "vui--wt59q7" }) `width:100%;`;
+const HeaderCol = styled(Col).withConfig({ displayName: "vui--HeaderCol", componentId: "vui--1wkol92" }) `flex-grow:2;margin-right:12px;`;
+const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--150p0zs" }) `position:relative;top:-2px;`;
 
 export { ChildContainer, Col, HeaderCol, IconCol, BannerLayout as Pill, Row, StyledText as Text };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Banner/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\nimport { PillProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst BannerLayout = styled(BaseContainer)<PillProps>`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  padding: 20px 24px 24px 24px;\n  border-radius: 4px;\n  ${({ accentColor }) =>\n    accentColor &&\n    `\n      box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};\n    `}\n  background-color: ${({ backgroundColor }) => backgroundColor || 'white'};\n`;\n\nconst Row = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Col = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  flex-wrap: wrap;\n`;\n\nexport const IconCol = styled(Col)<{ accentColor: string }>`\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n    color: ${({ accentColor }) => accentColor};\n  }\n`;\n\nexport const ChildContainer = styled(BaseContainer)`\n  width: 100%;\n`;\n\nconst HeaderCol = styled(Col)`\n  flex-grow: 2;\n  margin-right: 12px;\n`;\n\nconst StyledText = styled(Text)`\n  position: relative;\n  top: -2px;\n`;\n\nexport { BannerLayout as Pill, StyledText as Text, Row, Col, HeaderCol };\n"],"names":[],"mappings":";;;;;AAOA,MAAM,YAAY,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,gIAAA,EAOtC,CAAC,EAAE,WAAW,EAAE,KAChB,WAAW;AACX,IAAA;0EACsE,WAAW,CAAA;KAChF,CACiB,kBAAA,EAAA,CAAC,EAAE,eAAe,EAAE,KAAK,eAAe,IAAI,OAAO,CAAA,CAAA;AAGzE,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAKjC,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAOpB,MAAA,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAErB,KAAK,CAAC,EAAE,CAAA,QAAA,EACP,KAAK,CAAC,EAAE,CACT,OAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,EAAA;MAIhC,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,WAAA;AAInD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC;AAK7B,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Banner/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\nimport { PillProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst BannerLayout = styled(BaseContainer)<PillProps>`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  padding: 20px 24px 24px 24px;\n  border-radius: 4px;\n  ${({ accentColor }) =>\n    accentColor &&\n    `\n      box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};\n    `}\n  background-color: ${({ backgroundColor }) => backgroundColor || 'white'};\n`;\n\nconst Row = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Col = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  flex-wrap: wrap;\n`;\n\nexport const IconCol = styled(Col)<{ accentColor: string }>`\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n    color: ${({ accentColor }) => accentColor};\n  }\n`;\n\nexport const ChildContainer = styled(BaseContainer)`\n  width: 100%;\n`;\n\nconst HeaderCol = styled(Col)`\n  flex-grow: 2;\n  margin-right: 12px;\n`;\n\nconst StyledText = styled(Text)`\n  position: relative;\n  top: -2px;\n`;\n\nexport { BannerLayout as Pill, StyledText as Text, Row, Col, HeaderCol };\n"],"names":[],"mappings":";;;;;AAOA,MAAM,YAAY,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,gIAAA,EAOtC,CAAC,EAAE,WAAW,EAAE,KAChB,WAAW;AACX,IAAA;0EACsE,WAAW,CAAA;KAChF,CACiB,kBAAA,EAAA,CAAC,EAAE,eAAe,EAAE,KAAK,eAAe,IAAI,OAAO,CAAA,CAAA;AAGzE,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAKjC,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAOpB,MAAA,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAErB,KAAK,CAAC,EAAE,CAAA,QAAA,EACP,KAAK,CAAC,EAAE,CACT,OAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,EAAA;MAIhC,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,WAAA;AAInD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC;AAK7B,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC;;;;"}

package/dist/components/BaseContainer/BaseContainer.cjs

@@ -6,7 +6,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const BaseContainer = styled__default.default.div.withConfig({ displayName: "vui--BaseContainer", componentId: "vui--jtpszk" }) `box-sizing:border-box;position:relative;margin:0;padding:0;`;
+const BaseContainer = styled__default.default.div.withConfig({ displayName: "vui--BaseContainer", componentId: "vui--bg86rb" }) `box-sizing:border-box;position:relative;margin:0;padding:0;`;
 
 exports.BaseContainer = BaseContainer;
 //# sourceMappingURL=BaseContainer.cjs.map

package/dist/components/BaseContainer/BaseContainer.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const BaseContainer = styled.div.withConfig({ displayName: "vui--BaseContainer", componentId: "vui--jtpszk" }) `box-sizing:border-box;position:relative;margin:0;padding:0;`;
+const BaseContainer = styled.div.withConfig({ displayName: "vui--BaseContainer", componentId: "vui--bg86rb" }) `box-sizing:border-box;position:relative;margin:0;padding:0;`;
 
 export { BaseContainer };
 //# sourceMappingURL=BaseContainer.js.map

package/dist/components/Breadcrumbs/components/styled.cjs

@@ -7,8 +7,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const BreadcrumbsSC = styled__default.default.ul.withConfig({ displayName: "vui--BreadcrumbsSC", componentId: "vui--1kzms7s" }) `list-style:none;padding:0;margin:0;display:flex;align-items:center;font-family:${text.text.body.fontFamily};font-weight:${text.text.body.fontWeight};font-size:${text.text.body.fontSize};line-height:${text.text.body.lineHeight};`;
-const BreadcrumbSC = styled__default.default.li.withConfig({ displayName: "vui--BreadcrumbSC", componentId: "vui--17agc2w" }) `display:flex;align-items:center;.separator{display:flex;align-items:center;padding:0px 0.4rem;}a{color:inherit;text-decoration:none;text-transform:capitalize;}a:hover{text-decoration:underline;}span{font-weight:600;text-transform:capitalize;}`;
+const BreadcrumbsSC = styled__default.default.ul.withConfig({ displayName: "vui--BreadcrumbsSC", componentId: "vui--16f283b" }) `list-style:none;padding:0;margin:0;display:flex;align-items:center;font-family:${text.text.body.fontFamily};font-weight:${text.text.body.fontWeight};font-size:${text.text.body.fontSize};line-height:${text.text.body.lineHeight};`;
+const BreadcrumbSC = styled__default.default.li.withConfig({ displayName: "vui--BreadcrumbSC", componentId: "vui--19n9row" }) `display:flex;align-items:center;.separator{display:flex;align-items:center;padding:0px 0.4rem;}a{color:inherit;text-decoration:none;text-transform:capitalize;}a:hover{text-decoration:underline;}span{font-weight:600;text-transform:capitalize;}`;
 
 exports.BreadcrumbSC = BreadcrumbSC;
 exports.BreadcrumbsSC = BreadcrumbsSC;

package/dist/components/Breadcrumbs/components/styled.js

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 import { text } from '../../../theme/modules/text.js';
 
-const BreadcrumbsSC = styled.ul.withConfig({ displayName: "vui--BreadcrumbsSC", componentId: "vui--1kzms7s" }) `list-style:none;padding:0;margin:0;display:flex;align-items:center;font-family:${text.body.fontFamily};font-weight:${text.body.fontWeight};font-size:${text.body.fontSize};line-height:${text.body.lineHeight};`;
-const BreadcrumbSC = styled.li.withConfig({ displayName: "vui--BreadcrumbSC", componentId: "vui--17agc2w" }) `display:flex;align-items:center;.separator{display:flex;align-items:center;padding:0px 0.4rem;}a{color:inherit;text-decoration:none;text-transform:capitalize;}a:hover{text-decoration:underline;}span{font-weight:600;text-transform:capitalize;}`;
+const BreadcrumbsSC = styled.ul.withConfig({ displayName: "vui--BreadcrumbsSC", componentId: "vui--16f283b" }) `list-style:none;padding:0;margin:0;display:flex;align-items:center;font-family:${text.body.fontFamily};font-weight:${text.body.fontWeight};font-size:${text.body.fontSize};line-height:${text.body.lineHeight};`;
+const BreadcrumbSC = styled.li.withConfig({ displayName: "vui--BreadcrumbSC", componentId: "vui--19n9row" }) `display:flex;align-items:center;.separator{display:flex;align-items:center;padding:0px 0.4rem;}a{color:inherit;text-decoration:none;text-transform:capitalize;}a:hover{text-decoration:underline;}span{font-weight:600;text-transform:capitalize;}`;
 
 export { BreadcrumbSC, BreadcrumbsSC };
 //# sourceMappingURL=styled.js.map

package/dist/components/Button/components/styled.cjs

@@ -8,8 +8,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const MainContent = styled__default.default.span.withConfig({ displayName: "vui--MainContent", componentId: "vui--exbqdz" }) `display:inline-flex;align-items:center;gap:${({ hasText }) => (hasText ? '8px' : '4px')};${({ $loading }) => ($loading ? 'opacity: 0;' : null)};svg{width:${({ size }) => sizes.sizes[size]};height:${({ size }) => sizes.sizes[size]};}`;
-const BaseButton = styled__default.default.button.withConfig({ displayName: "vui--BaseButton", componentId: "vui--nvz516" }) `position:relative;box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${index.theme.fontFamily};font-weight:400;border:1px solid;background-color:transparent;white-space:nowrap;${(props) => {
+const MainContent = styled__default.default.span.withConfig({ displayName: "vui--MainContent", componentId: "vui--3juln2" }) `display:inline-flex;align-items:center;gap:${({ hasText }) => (hasText ? '8px' : '4px')};${({ $loading }) => ($loading ? 'opacity: 0;' : null)};svg{width:${({ size }) => sizes.sizes[size]};height:${({ size }) => sizes.sizes[size]};}`;
+const BaseButton = styled__default.default.button.withConfig({ displayName: "vui--BaseButton", componentId: "vui--1xsghtl" }) `position:relative;box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${index.theme.fontFamily};font-weight:400;border:1px solid;background-color:transparent;white-space:nowrap;${(props) => {
     let height = '40px';
     let paddingLeft = '24px';
     let paddingRight = '24px';
@@ -51,14 +51,14 @@ const BaseButton = styled__default.default.button.withConfig({ displayName: "vui
       line-height: ${fontSize};
     `;
 }} &:hover{cursor:pointer;}&:disabled{pointer-events:none;cursor:unset !important;}`;
-const DefaultButton = styled__default.default(BaseButton).withConfig({ displayName: "vui--DefaultButton", componentId: "vui--1xzjfje" }) `border-color:${index.theme.colors.neutral.grey.dark};background-color:white;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);color:${({ hasText }) => hasText ? index.theme.colors.neutral.ink.base : index.theme.colors.secondary.blue.base};&:hover{background-color:${index.theme.colors.neutral.grey.lightest};}&:active{background-color:${index.theme.colors.neutral.grey.lightest};border-color:${index.theme.colors.secondary.blue.base};box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};outline:0;}&:disabled{box-shadow:none !important;background-color:${index.theme.colors.neutral.grey.base} !important;border-color:${index.theme.colors.neutral.grey.base} !important;color:${index.theme.colors.neutral.ink.light} !important;}`;
-const DefaultDestructiveButton = styled__default.default(DefaultButton).withConfig({ displayName: "vui--DefaultDestructiveButton", componentId: "vui--1ixaf03" }) `color:${index.theme.colors.secondary.red.base};&:hover{color:${index.theme.colors.secondary.red.dark};}&:active{border-color:${index.theme.colors.secondary.red.base};box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.red.light};color:${index.theme.colors.secondary.red.dark};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.red.light};}`;
-const PrimaryButton = styled__default.default(DefaultButton).withConfig({ displayName: "vui--PrimaryButton", componentId: "vui--16w0ufk" }) `background-color:${index.theme.colors.secondary.blue.base};border-color:${index.theme.colors.secondary.blue.base};color:white;&:hover{background-color:${index.theme.colors.secondary.blue.dark};border-color:${index.theme.colors.secondary.blue.dark};}&:active{background-color:${index.theme.colors.secondary.blue.dark};border-color:${index.theme.colors.secondary.blue.dark};box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};}`;
-const PrimaryDestructiveButton = styled__default.default(PrimaryButton).withConfig({ displayName: "vui--PrimaryDestructiveButton", componentId: "vui--1w3lv3r" }) `background-color:${index.theme.colors.secondary.red.base};border-color:${index.theme.colors.secondary.red.base};color:white;&:hover{background-color:${index.theme.colors.secondary.red.dark};border-color:${index.theme.colors.secondary.red.dark};}&:active{background-color:${index.theme.colors.secondary.red.dark};border-color:${index.theme.colors.secondary.red.dark};box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.red.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.red.light};}`;
-const FlatButton = styled__default.default(BaseButton).withConfig({ displayName: "vui--FlatButton", componentId: "vui--fqczse" }) `border-color:transparent;box-shadow:none;color:${index.theme.colors.neutral.ink.base};&:hover{background-color:${index.theme.colors.neutral.grey.light};}&:active{background-color:${index.theme.colors.neutral.grey.light};box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};outline:0;}&:disabled{background-color:transparent;border-color:transparent;}`;
-const UnstyledButton = styled__default.default.button.withConfig({ displayName: "vui--UnstyledButton", componentId: "vui--1fxilc" }) `appearance:none;border:0;background-color:transparent;padding:0;font:inherit;&:hover{cursor:pointer;}`;
-const LinkButton = styled__default.default(UnstyledButton).withConfig({ displayName: "vui--LinkButton", componentId: "vui--z932nb" }) `display:inline-flex;flex-direction:row;align-items:center;font-family:${index.theme.text.link.fontFamily};font-size:${index.theme.text.link.fontSize};line-height:${index.theme.text.link.fontSize};font-weight:${index.theme.text.link.fontWeight};line-height:${index.theme.text.link.lineHeight};text-decoration:${index.theme.text.link.textDecoration};color:${index.theme.colors.secondary.blue.base};&:hover{color:${index.theme.colors.secondary.blue.dark};}& > * + *{margin-left:${index.theme.sizes.xs};}&:focus-visible{outline:0;box-shadow:0 0 0 4px white,0 0 0 8px ${index.theme.colors.secondary.blue.light};border-radius:4px;}`;
-const LoadingWrapper = styled__default.default.div.withConfig({ displayName: "vui--LoadingWrapper", componentId: "vui--1qt232p" }) `position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;margin-left:0;`;
+const DefaultButton = styled__default.default(BaseButton).withConfig({ displayName: "vui--DefaultButton", componentId: "vui--1mceh7z" }) `border-color:${index.theme.colors.neutral.grey.dark};background-color:white;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);color:${({ hasText }) => hasText ? index.theme.colors.neutral.ink.base : index.theme.colors.secondary.blue.base};&:hover{background-color:${index.theme.colors.neutral.grey.lightest};}&:active{background-color:${index.theme.colors.neutral.grey.lightest};border-color:${index.theme.colors.secondary.blue.base};box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};outline:0;}&:disabled{box-shadow:none !important;background-color:${index.theme.colors.neutral.grey.base} !important;border-color:${index.theme.colors.neutral.grey.base} !important;color:${index.theme.colors.neutral.ink.light} !important;}`;
+const DefaultDestructiveButton = styled__default.default(DefaultButton).withConfig({ displayName: "vui--DefaultDestructiveButton", componentId: "vui--1vhc5dm" }) `color:${index.theme.colors.secondary.red.base};&:hover{color:${index.theme.colors.secondary.red.dark};}&:active{border-color:${index.theme.colors.secondary.red.base};box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.red.light};color:${index.theme.colors.secondary.red.dark};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.red.light};}`;
+const PrimaryButton = styled__default.default(DefaultButton).withConfig({ displayName: "vui--PrimaryButton", componentId: "vui--lamrqo" }) `background-color:${index.theme.colors.secondary.blue.base};border-color:${index.theme.colors.secondary.blue.base};color:white;&:hover{background-color:${index.theme.colors.secondary.blue.dark};border-color:${index.theme.colors.secondary.blue.dark};}&:active{background-color:${index.theme.colors.secondary.blue.dark};border-color:${index.theme.colors.secondary.blue.dark};box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};}`;
+const PrimaryDestructiveButton = styled__default.default(PrimaryButton).withConfig({ displayName: "vui--PrimaryDestructiveButton", componentId: "vui--14zrdl" }) `background-color:${index.theme.colors.secondary.red.base};border-color:${index.theme.colors.secondary.red.base};color:white;&:hover{background-color:${index.theme.colors.secondary.red.dark};border-color:${index.theme.colors.secondary.red.dark};}&:active{background-color:${index.theme.colors.secondary.red.dark};border-color:${index.theme.colors.secondary.red.dark};box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.red.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.red.light};}`;
+const FlatButton = styled__default.default(BaseButton).withConfig({ displayName: "vui--FlatButton", componentId: "vui--1w880uc" }) `border-color:transparent;box-shadow:none;color:${index.theme.colors.neutral.ink.base};&:hover{background-color:${index.theme.colors.neutral.grey.light};}&:active{background-color:${index.theme.colors.neutral.grey.light};box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};outline:0;}&:disabled{background-color:transparent;border-color:transparent;}`;
+const UnstyledButton = styled__default.default.button.withConfig({ displayName: "vui--UnstyledButton", componentId: "vui--kyccjz" }) `appearance:none;border:0;background-color:transparent;padding:0;font:inherit;&:hover{cursor:pointer;}`;
+const LinkButton = styled__default.default(UnstyledButton).withConfig({ displayName: "vui--LinkButton", componentId: "vui--eh2yja" }) `display:inline-flex;flex-direction:row;align-items:center;font-family:${index.theme.text.link.fontFamily};font-size:${index.theme.text.link.fontSize};line-height:${index.theme.text.link.fontSize};font-weight:${index.theme.text.link.fontWeight};line-height:${index.theme.text.link.lineHeight};text-decoration:${index.theme.text.link.textDecoration};color:${index.theme.colors.secondary.blue.base};&:hover{color:${index.theme.colors.secondary.blue.dark};}& > * + *{margin-left:${index.theme.sizes.xs};}&:focus-visible{outline:0;box-shadow:0 0 0 4px white,0 0 0 8px ${index.theme.colors.secondary.blue.light};border-radius:4px;}`;
+const LoadingWrapper = styled__default.default.div.withConfig({ displayName: "vui--LoadingWrapper", componentId: "vui--cvu4hf" }) `position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;margin-left:0;`;
 
 exports.DefaultButton = DefaultButton;
 exports.DefaultDestructiveButton = DefaultDestructiveButton;