@veeqo/ui 14.1.1 → 14.3.0-beta-1

package/dist/components/Action/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../src/components/Action/utils.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport baseStyles from './styles/base.module.scss';\nimport buttonStyles from './styles/button.module.scss';\nimport linkStyles from './styles/link.module.scss';\nimport { ActionAppearance, ActionVariant } from './types';\n\ntype AppearanceClassProps = {\n  className?: string;\n  variant?: ActionVariant;\n  disabled?: boolean;\n  compact?: boolean;\n  iconSlot?: React.ReactNode;\n  children?: React.ReactNode;\n};\n\nexport const getButtonVariantClasses = (variant?: ActionVariant) =>\n  [\n    (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles.primary,\n    (variant === 'destructive' || variant === 'primaryDestructive') && buttonStyles.destructive,\n    variant === 'flat' && buttonStyles.flat,\n  ].filter(Boolean);\n\nexport const getAppearanceClasses = (appearance: ActionAppearance, props: AppearanceClassProps) => {\n  const baseClasses = [props.className, baseStyles.reset];\n  const hasIcon = !!props.iconSlot;\n  const isIconOnly = hasIcon && (props.children == null || props.children === '');\n  const iconClasses = [hasIcon && buttonStyles.icon, isIconOnly && buttonStyles.iconOnly];\n\n  switch (appearance) {\n    case 'button':\n      return buildClassnames([\n        ...baseClasses,\n        buttonStyles.button,\n        ...iconClasses,\n        props.disabled && buttonStyles.disabled,\n        props.compact && buttonStyles.compact,\n        ...getButtonVariantClasses(props.variant),\n      ]);\n    case 'link':\n      return buildClassnames([\n        ...baseClasses,\n        linkStyles.link,\n        props.compact && linkStyles.compact,\n      ]);\n    default:\n      return buildClassnames(baseClasses);\n  }\n};\n"],"names":["buttonStyles","baseStyles","buildClassnames","linkStyles"],"mappings":";;;;;;;;MAgBa,uBAAuB,GAAG,CAAC,OAAuB,KAC7D;IACE,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,oBAAoB,KAAKA,aAAY,CAAC,OAAO;IACnF,CAAC,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,oBAAoB,KAAKA,aAAY,CAAC,WAAW;AAC3F,IAAA,OAAO,KAAK,MAAM,IAAIA,aAAY,CAAC,IAAI;AACxC,CAAA,CAAC,MAAM,CAAC,OAAO;MAEL,oBAAoB,GAAG,CAAC,UAA4B,EAAE,KAA2B,KAAI;IAChG,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,SAAS,EAAEC,WAAU,CAAC,KAAK,CAAC;AACvD,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,QAAQ;AAChC,IAAA,MAAM,UAAU,GAAG,OAAO,KAAK,KAAK,CAAC,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC;AAC/E,IAAA,MAAM,WAAW,GAAG,CAAC,OAAO,IAAID,aAAY,CAAC,IAAI,EAAE,UAAU,IAAIA,aAAY,CAAC,QAAQ,CAAC;AAEvF,IAAA,QAAQ,UAAU;AAChB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAOE,+BAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAAF,aAAY,CAAC,MAAM;AACnB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,CAAC,QAAQ,IAAIA,aAAY,CAAC,QAAQ;AACvC,gBAAA,KAAK,CAAC,OAAO,IAAIA,aAAY,CAAC,OAAO;AACrC,gBAAA,GAAG,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC;AAC1C,aAAA,CAAC;AACJ,QAAA,KAAK,MAAM;AACT,YAAA,OAAOE,+BAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAAC,WAAU,CAAC,IAAI;AACf,gBAAA,KAAK,CAAC,OAAO,IAAIA,WAAU,CAAC,OAAO;AACpC,aAAA,CAAC;AACJ,QAAA;AACE,YAAA,OAAOD,+BAAe,CAAC,WAAW,CAAC;AACtC;AACH;;;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../../src/components/Action/utils.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport baseStyles from './styles/base.module.scss';\nimport buttonStyles from './styles/button.module.scss';\nimport linkStyles from './styles/link.module.scss';\nimport { ActionAppearance, ActionSize, ActionVariant } from './types';\n\ntype AppearanceClassProps = {\n  className?: string;\n  variant?: ActionVariant;\n  disabled?: boolean;\n  size?: ActionSize;\n  dropdown?: boolean;\n  iconSlot?: React.ReactNode;\n  children?: React.ReactNode;\n};\n\nexport const getButtonVariantClasses = (variant?: ActionVariant) =>\n  [\n    (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles.primary,\n    (variant === 'destructive' || variant === 'primaryDestructive') && buttonStyles.destructive,\n    variant === 'flat' && buttonStyles.flat,\n  ].filter(Boolean);\n\nexport const getAppearanceClasses = (appearance: ActionAppearance, props: AppearanceClassProps) => {\n  const baseClasses = [props.className, baseStyles.reset];\n  const hasIcon = !!props.iconSlot;\n  const isIconOnly = hasIcon && (props.children == null || props.children === '');\n  const iconClasses = [hasIcon && buttonStyles.icon, isIconOnly && buttonStyles.iconOnly];\n\n  switch (appearance) {\n    case 'button':\n      return buildClassnames([\n        ...baseClasses,\n        buttonStyles.button,\n        ...iconClasses,\n        props.disabled && buttonStyles.disabled,\n        props.size && props.size !== 'base' && buttonStyles[props.size],\n        props.dropdown && buttonStyles.dropdown,\n        ...getButtonVariantClasses(props.variant),\n      ]);\n    case 'link':\n      return buildClassnames([\n        ...baseClasses,\n        linkStyles.link,\n        !props.size && linkStyles.inherit,\n        props.size && props.size !== 'base' && linkStyles[props.size],\n      ]);\n    default:\n      return buildClassnames(baseClasses);\n  }\n};\n"],"names":["buttonStyles","baseStyles","buildClassnames","linkStyles"],"mappings":";;;;;;;;MAiBa,uBAAuB,GAAG,CAAC,OAAuB,KAC7D;IACE,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,oBAAoB,KAAKA,aAAY,CAAC,OAAO;IACnF,CAAC,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,oBAAoB,KAAKA,aAAY,CAAC,WAAW;AAC3F,IAAA,OAAO,KAAK,MAAM,IAAIA,aAAY,CAAC,IAAI;AACxC,CAAA,CAAC,MAAM,CAAC,OAAO;MAEL,oBAAoB,GAAG,CAAC,UAA4B,EAAE,KAA2B,KAAI;IAChG,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,SAAS,EAAEC,WAAU,CAAC,KAAK,CAAC;AACvD,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,QAAQ;AAChC,IAAA,MAAM,UAAU,GAAG,OAAO,KAAK,KAAK,CAAC,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC;AAC/E,IAAA,MAAM,WAAW,GAAG,CAAC,OAAO,IAAID,aAAY,CAAC,IAAI,EAAE,UAAU,IAAIA,aAAY,CAAC,QAAQ,CAAC;AAEvF,IAAA,QAAQ,UAAU;AAChB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAOE,+BAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAAF,aAAY,CAAC,MAAM;AACnB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,CAAC,QAAQ,IAAIA,aAAY,CAAC,QAAQ;AACvC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAIA,aAAY,CAAC,KAAK,CAAC,IAAI,CAAC;AAC/D,gBAAA,KAAK,CAAC,QAAQ,IAAIA,aAAY,CAAC,QAAQ;AACvC,gBAAA,GAAG,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC;AAC1C,aAAA,CAAC;AACJ,QAAA,KAAK,MAAM;AACT,YAAA,OAAOE,+BAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAAC,WAAU,CAAC,IAAI;AACf,gBAAA,CAAC,KAAK,CAAC,IAAI,IAAIA,WAAU,CAAC,OAAO;AACjC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAIA,WAAU,CAAC,KAAK,CAAC,IAAI,CAAC;AAC9D,aAAA,CAAC;AACJ,QAAA;AACE,YAAA,OAAOD,+BAAe,CAAC,WAAW,CAAC;AACtC;AACH;;;;;"}

package/dist/components/Action/utils.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-import { ActionAppearance, ActionVariant } from './types';
+import { ActionAppearance, ActionSize, ActionVariant } from './types';
 type AppearanceClassProps = {
     className?: string;
     variant?: ActionVariant;
     disabled?: boolean;
-    compact?: boolean;
+    size?: ActionSize;
+    dropdown?: boolean;
     iconSlot?: React.ReactNode;
     children?: React.ReactNode;
 };

package/dist/components/Action/utils.js

@@ -21,14 +21,16 @@ const getAppearanceClasses = (appearance, props) => {
                 buttonStyles.button,
                 ...iconClasses,
                 props.disabled && buttonStyles.disabled,
-                props.compact && buttonStyles.compact,
+                props.size && props.size !== 'base' && buttonStyles[props.size],
+                props.dropdown && buttonStyles.dropdown,
                 ...getButtonVariantClasses(props.variant),
             ]);
         case 'link':
             return buildClassnames([
                 ...baseClasses,
                 linkStyles.link,
-                props.compact && linkStyles.compact,
+                !props.size && linkStyles.inherit,
+                props.size && props.size !== 'base' && linkStyles[props.size],
             ]);
         default:
             return buildClassnames(baseClasses);

package/dist/components/Action/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/Action/utils.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport baseStyles from './styles/base.module.scss';\nimport buttonStyles from './styles/button.module.scss';\nimport linkStyles from './styles/link.module.scss';\nimport { ActionAppearance, ActionVariant } from './types';\n\ntype AppearanceClassProps = {\n  className?: string;\n  variant?: ActionVariant;\n  disabled?: boolean;\n  compact?: boolean;\n  iconSlot?: React.ReactNode;\n  children?: React.ReactNode;\n};\n\nexport const getButtonVariantClasses = (variant?: ActionVariant) =>\n  [\n    (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles.primary,\n    (variant === 'destructive' || variant === 'primaryDestructive') && buttonStyles.destructive,\n    variant === 'flat' && buttonStyles.flat,\n  ].filter(Boolean);\n\nexport const getAppearanceClasses = (appearance: ActionAppearance, props: AppearanceClassProps) => {\n  const baseClasses = [props.className, baseStyles.reset];\n  const hasIcon = !!props.iconSlot;\n  const isIconOnly = hasIcon && (props.children == null || props.children === '');\n  const iconClasses = [hasIcon && buttonStyles.icon, isIconOnly && buttonStyles.iconOnly];\n\n  switch (appearance) {\n    case 'button':\n      return buildClassnames([\n        ...baseClasses,\n        buttonStyles.button,\n        ...iconClasses,\n        props.disabled && buttonStyles.disabled,\n        props.compact && buttonStyles.compact,\n        ...getButtonVariantClasses(props.variant),\n      ]);\n    case 'link':\n      return buildClassnames([\n        ...baseClasses,\n        linkStyles.link,\n        props.compact && linkStyles.compact,\n      ]);\n    default:\n      return buildClassnames(baseClasses);\n  }\n};\n"],"names":[],"mappings":";;;;;;MAgBa,uBAAuB,GAAG,CAAC,OAAuB,KAC7D;IACE,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,oBAAoB,KAAK,YAAY,CAAC,OAAO;IACnF,CAAC,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,oBAAoB,KAAK,YAAY,CAAC,WAAW;AAC3F,IAAA,OAAO,KAAK,MAAM,IAAI,YAAY,CAAC,IAAI;AACxC,CAAA,CAAC,MAAM,CAAC,OAAO;MAEL,oBAAoB,GAAG,CAAC,UAA4B,EAAE,KAA2B,KAAI;IAChG,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC;AACvD,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,QAAQ;AAChC,IAAA,MAAM,UAAU,GAAG,OAAO,KAAK,KAAK,CAAC,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC;AAC/E,IAAA,MAAM,WAAW,GAAG,CAAC,OAAO,IAAI,YAAY,CAAC,IAAI,EAAE,UAAU,IAAI,YAAY,CAAC,QAAQ,CAAC;AAEvF,IAAA,QAAQ,UAAU;AAChB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,eAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAA,YAAY,CAAC,MAAM;AACnB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,CAAC,QAAQ,IAAI,YAAY,CAAC,QAAQ;AACvC,gBAAA,KAAK,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO;AACrC,gBAAA,GAAG,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC;AAC1C,aAAA,CAAC;AACJ,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,eAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAA,UAAU,CAAC,IAAI;AACf,gBAAA,KAAK,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO;AACpC,aAAA,CAAC;AACJ,QAAA;AACE,YAAA,OAAO,eAAe,CAAC,WAAW,CAAC;AACtC;AACH;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/Action/utils.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport baseStyles from './styles/base.module.scss';\nimport buttonStyles from './styles/button.module.scss';\nimport linkStyles from './styles/link.module.scss';\nimport { ActionAppearance, ActionSize, ActionVariant } from './types';\n\ntype AppearanceClassProps = {\n  className?: string;\n  variant?: ActionVariant;\n  disabled?: boolean;\n  size?: ActionSize;\n  dropdown?: boolean;\n  iconSlot?: React.ReactNode;\n  children?: React.ReactNode;\n};\n\nexport const getButtonVariantClasses = (variant?: ActionVariant) =>\n  [\n    (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles.primary,\n    (variant === 'destructive' || variant === 'primaryDestructive') && buttonStyles.destructive,\n    variant === 'flat' && buttonStyles.flat,\n  ].filter(Boolean);\n\nexport const getAppearanceClasses = (appearance: ActionAppearance, props: AppearanceClassProps) => {\n  const baseClasses = [props.className, baseStyles.reset];\n  const hasIcon = !!props.iconSlot;\n  const isIconOnly = hasIcon && (props.children == null || props.children === '');\n  const iconClasses = [hasIcon && buttonStyles.icon, isIconOnly && buttonStyles.iconOnly];\n\n  switch (appearance) {\n    case 'button':\n      return buildClassnames([\n        ...baseClasses,\n        buttonStyles.button,\n        ...iconClasses,\n        props.disabled && buttonStyles.disabled,\n        props.size && props.size !== 'base' && buttonStyles[props.size],\n        props.dropdown && buttonStyles.dropdown,\n        ...getButtonVariantClasses(props.variant),\n      ]);\n    case 'link':\n      return buildClassnames([\n        ...baseClasses,\n        linkStyles.link,\n        !props.size && linkStyles.inherit,\n        props.size && props.size !== 'base' && linkStyles[props.size],\n      ]);\n    default:\n      return buildClassnames(baseClasses);\n  }\n};\n"],"names":[],"mappings":";;;;;;MAiBa,uBAAuB,GAAG,CAAC,OAAuB,KAC7D;IACE,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,oBAAoB,KAAK,YAAY,CAAC,OAAO;IACnF,CAAC,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,oBAAoB,KAAK,YAAY,CAAC,WAAW;AAC3F,IAAA,OAAO,KAAK,MAAM,IAAI,YAAY,CAAC,IAAI;AACxC,CAAA,CAAC,MAAM,CAAC,OAAO;MAEL,oBAAoB,GAAG,CAAC,UAA4B,EAAE,KAA2B,KAAI;IAChG,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC;AACvD,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,QAAQ;AAChC,IAAA,MAAM,UAAU,GAAG,OAAO,KAAK,KAAK,CAAC,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC;AAC/E,IAAA,MAAM,WAAW,GAAG,CAAC,OAAO,IAAI,YAAY,CAAC,IAAI,EAAE,UAAU,IAAI,YAAY,CAAC,QAAQ,CAAC;AAEvF,IAAA,QAAQ,UAAU;AAChB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,eAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAA,YAAY,CAAC,MAAM;AACnB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,CAAC,QAAQ,IAAI,YAAY,CAAC,QAAQ;AACvC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC;AAC/D,gBAAA,KAAK,CAAC,QAAQ,IAAI,YAAY,CAAC,QAAQ;AACvC,gBAAA,GAAG,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC;AAC1C,aAAA,CAAC;AACJ,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,eAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAA,UAAU,CAAC,IAAI;AACf,gBAAA,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU,CAAC,OAAO;AACjC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC;AAC9D,aAAA,CAAC;AACJ,QAAA;AACE,YAAA,OAAO,eAAe,CAAC,WAAW,CAAC;AACtC;AACH;;;;"}

package/dist/components/AnimatedDropdown/components/styled.d.ts

@@ -1 +1,2 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const Container: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/dist/components/AnimatedDropdown/styled.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const Wrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Container: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+declare const Wrap: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 declare const Dropdown: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../types").EventHandlerProps & {
     className?: string | undefined;
     children: import("react").ReactNode;

package/dist/components/Badge/styled.cjs

@@ -10,10 +10,33 @@ 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({
+    shouldForwardProp: (prop) => !['hideBorder'].includes(prop),
+}) `
+  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--1v0u0po" }) `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--1ta5k7c" }) `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--joczn3" }) `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;AAEM,MAAM,YAAY,GAAGH,uBAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAE3BI,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,CAAA,kBAAA,EACtBA,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,CAAA,kBAAA,EACxBA,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).withConfig({\n  shouldForwardProp: (prop) => !['hideBorder'].includes(prop),\n})<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,CAAC,UAAU,CAAC;AACjD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC5D,CAAA,CAAC,CAAgB;;;;;;;iBAODC,SAAI,CAAC,SAAS,CAAC,UAAU,CAAA;iBACzBA,SAAI,CAAC,SAAS,CAAC,UAAU,CAAA;;;;;AAK9B,UAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,UAAU,GAAG,MAAM,GAAG,uBAAuB,CAAC,CAAA;;;;;AAK/D,WAAA,EAAAC,WAAK,CAAC,IAAI,CAAA;AACT,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAA;;CAEvB;AAEM,MAAM,YAAY,GAAGH,uBAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAE3BI,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,CAAA,kBAAA,EACtBA,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,CAAA,kBAAA,EACxBA,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAA,OAAA,EAC3CA,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;;;"}

package/dist/components/Badge/styled.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 type BaseBadgeProps = {
     hideBorder: boolean;
 };
-export declare const DefaultBadge: import("styled-components").StyledComponent<"div", any, BaseBadgeProps, never>;
-export declare const PrimaryBadge: import("styled-components").StyledComponent<"div", any, BaseBadgeProps, never>;
-export declare const WarningBadge: import("styled-components").StyledComponent<"div", any, BaseBadgeProps, never>;
+export declare const DefaultBadge: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, BaseBadgeProps, never>;
+export declare const PrimaryBadge: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, BaseBadgeProps, never>;
+export declare const WarningBadge: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, BaseBadgeProps, never>;
 export {};

package/dist/components/Badge/styled.js

@@ -4,10 +4,33 @@ 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({
+    shouldForwardProp: (prop) => !['hideBorder'].includes(prop),
+}) `
+  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--1v0u0po" }) `background-color:inherit;border-color:${colors.secondary.blue.base};color:${colors.secondary.blue.base};`;
+const PrimaryBadge = styled(BaseBadge).withConfig({ displayName: "vui--PrimaryBadge", componentId: "vui--1ta5k7c" }) `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--joczn3" }) `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;AAEM,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAE3B,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,CAAA,kBAAA,EACtB,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,CAAA,kBAAA,EACxB,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).withConfig({\n  shouldForwardProp: (prop) => !['hideBorder'].includes(prop),\n})<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,CAAC,UAAU,CAAC;AACjD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC5D,CAAA,CAAC,CAAgB;;;;;;;iBAOD,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA;iBACzB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA;;;;;AAK9B,UAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,UAAU,GAAG,MAAM,GAAG,uBAAuB,CAAC,CAAA;;;;;AAK/D,WAAA,EAAA,KAAK,CAAC,IAAI,CAAA;AACT,YAAA,EAAA,KAAK,CAAC,IAAI,CAAA;;CAEvB;AAEM,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAE3B,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,CAAA,kBAAA,EACtB,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,CAAA,kBAAA,EACxB,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,35 @@ 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({
+    shouldForwardProp: (prop) => !['accentColor', 'backgroundColor'].includes(prop),
+}) `
+  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;`;
+    `}
+  background-color: ${({ backgroundColor }) => backgroundColor || 'white'};
+`;
+const Row = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--efzdvm" }) `display:flex;flex-direction:row;`;
+const Col = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Col", componentId: "vui--1c3cv6m" }) `display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;`;
+const IconCol = styled__default.default(Col).withConfig({
+    shouldForwardProp: (prop) => !['accentColor'].includes(prop),
+}) `
+  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--1ryyp4c" }) `width:100%;`;
+const HeaderCol = styled__default.default(Col).withConfig({ displayName: "vui--HeaderCol", componentId: "vui--2c6441" }) `flex-grow:2;margin-right:12px;`;
+const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--53focc" }) `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,CAAA,kBAAA,EACiB,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;AAO1B,MAAM,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,CAAA,OAAA,EACT,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).withConfig({\n  shouldForwardProp: (prop) => !['accentColor', 'backgroundColor'].includes(prop),\n})<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).withConfig({\n  shouldForwardProp: (prop) => !['accentColor'].includes(prop),\n})<{ 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,CAAC,UAAU,CAAC;AACpD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAChF,CAAA,CAAC,CAAW;;;;;;;AAOT,EAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAChB,WAAW;AACX,IAAA;0EACsE,WAAW,CAAA;AAChF,IAAA,CAAA;sBACiB,CAAC,EAAE,eAAe,EAAE,KAAK,eAAe,IAAI,OAAO,CAAA;;AAGzE,MAAM,GAAG,GAAGD,uBAAM,CAACC,2BAAa,CAAC;AAKjC,MAAM,GAAG,GAAGD,uBAAM,CAACC,2BAAa,CAAC;AAO1B,MAAM,OAAO,GAAGD,uBAAM,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC;AAC5C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC7D,CAAA,CAAC,CAAyB;;AAEd,WAAA,EAAAE,WAAK,CAAC,EAAE,CAAA;AACP,YAAA,EAAAA,WAAK,CAAC,EAAE,CAAA;AACT,WAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA;;;MAIhC,cAAc,GAAGF,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,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.d.ts

@@ -1,20 +1,20 @@
 /// <reference types="react" />
-declare const BannerLayout: import("styled-components").StyledComponent<"div", any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+declare const BannerLayout: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     children?: import("react").ReactNode;
     className?: string | undefined;
     accentColor?: string | undefined;
     backgroundColor?: string | undefined;
 }, never>;
-declare const Row: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const Col: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconCol: import("styled-components").StyledComponent<"div", any, {
+declare const Row: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+declare const Col: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const IconCol: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
     accentColor: string;
 }, never>;
-export declare const ChildContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const HeaderCol: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChildContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+declare const HeaderCol: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 declare const StyledText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     as?: import("../Text").ValidTextTag | undefined;
     muted?: boolean | undefined;
-    variant?: "body" | "button" | "link" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholder" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
+    variant?: "placeholder" | "link" | "body" | "button" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
 } & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export { BannerLayout as Pill, StyledText as Text, Row, Col, HeaderCol };

package/dist/components/Banner/styled.js

@@ -3,16 +3,35 @@ 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({
+    shouldForwardProp: (prop) => !['accentColor', 'backgroundColor'].includes(prop),
+}) `
+  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;`;
+    `}
+  background-color: ${({ backgroundColor }) => backgroundColor || 'white'};
+`;
+const Row = styled(BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--efzdvm" }) `display:flex;flex-direction:row;`;
+const Col = styled(BaseContainer).withConfig({ displayName: "vui--Col", componentId: "vui--1c3cv6m" }) `display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;`;
+const IconCol = styled(Col).withConfig({
+    shouldForwardProp: (prop) => !['accentColor'].includes(prop),
+}) `
+  svg {
+    width: ${sizes.md};
+    height: ${sizes.md};
+    color: ${({ accentColor }) => accentColor};
+  }
+`;
+const ChildContainer = styled(BaseContainer).withConfig({ displayName: "vui--ChildContainer", componentId: "vui--1ryyp4c" }) `width:100%;`;
+const HeaderCol = styled(Col).withConfig({ displayName: "vui--HeaderCol", componentId: "vui--2c6441" }) `flex-grow:2;margin-right:12px;`;
+const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--53focc" }) `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,CAAA,kBAAA,EACiB,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;AAO1B,MAAM,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,CAAA,OAAA,EACT,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).withConfig({\n  shouldForwardProp: (prop) => !['accentColor', 'backgroundColor'].includes(prop),\n})<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).withConfig({\n  shouldForwardProp: (prop) => !['accentColor'].includes(prop),\n})<{ 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,CAAC,UAAU,CAAC;AACpD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAChF,CAAA,CAAC,CAAW;;;;;;;AAOT,EAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAChB,WAAW;AACX,IAAA;0EACsE,WAAW,CAAA;AAChF,IAAA,CAAA;sBACiB,CAAC,EAAE,eAAe,EAAE,KAAK,eAAe,IAAI,OAAO,CAAA;;AAGzE,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAKjC,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAO1B,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC;AAC5C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC7D,CAAA,CAAC,CAAyB;;AAEd,WAAA,EAAA,KAAK,CAAC,EAAE,CAAA;AACP,YAAA,EAAA,KAAK,CAAC,EAAE,CAAA;AACT,WAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA;;;MAIhC,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,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

@@ -1,12 +1,16 @@
 'use strict';
 
-var styled = require('styled-components');
+var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var BaseContainer_module = require('./BaseContainer.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-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 = React__default.default.forwardRef(({ className, children, ...rest }, ref) => (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([BaseContainer_module.base, className]), ref: ref, ...rest }, children)));
+BaseContainer.displayName = 'BaseContainer';
 
 exports.BaseContainer = BaseContainer;
 //# sourceMappingURL=BaseContainer.cjs.map

package/dist/components/BaseContainer/BaseContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseContainer.cjs","sources":["../../../src/components/BaseContainer/BaseContainer.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const BaseContainer = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n`;\n"],"names":["styled"],"mappings":";;;;;;;;MAEa,aAAa,GAAGA,uBAAM,CAAC,GAAG;;;;"}
+{"version":3,"file":"BaseContainer.cjs","sources":["../../../src/components/BaseContainer/BaseContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport styles from './BaseContainer.module.scss';\n\nexport const BaseContainer = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...rest }, ref) => (\n  <div className={buildClassnames([styles.base, className])} ref={ref} {...rest}>\n    {children}\n  </div>\n));\n\nBaseContainer.displayName = 'BaseContainer';\n"],"names":["React","buildClassnames","styles"],"mappings":";;;;;;;;;;;MAIa,aAAa,GAAGA,sBAAK,CAAC,UAAU,CAG3C,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACtCA,8CAAK,SAAS,EAAEC,+BAAe,CAAC,CAACC,oBAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAA,GAAM,IAAI,IAC1E,QAAQ,CACL,CACP;AAED,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}

package/dist/components/BaseContainer/BaseContainer.d.ts

@@ -1 +1,2 @@
-export declare const BaseContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+import React from 'react';
+export declare const BaseContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/BaseContainer/BaseContainer.js

@@ -1,6 +1,10 @@
-import styled from 'styled-components';
+import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './BaseContainer.module.scss.js';
 
-const BaseContainer = styled.div.withConfig({ displayName: "vui--BaseContainer", componentId: "vui--jtpszk" }) `box-sizing:border-box;position:relative;margin:0;padding:0;`;
+const BaseContainer = React__default.forwardRef(({ className, children, ...rest }, ref) => (React__default.createElement("div", { className: buildClassnames([styles.base, className]), ref: ref, ...rest }, children)));
+BaseContainer.displayName = 'BaseContainer';
 
 export { BaseContainer };
 //# sourceMappingURL=BaseContainer.js.map

package/dist/components/BaseContainer/BaseContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseContainer.js","sources":["../../../src/components/BaseContainer/BaseContainer.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const BaseContainer = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n`;\n"],"names":[],"mappings":";;MAEa,aAAa,GAAG,MAAM,CAAC,GAAG;;;;"}
+{"version":3,"file":"BaseContainer.js","sources":["../../../src/components/BaseContainer/BaseContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport styles from './BaseContainer.module.scss';\n\nexport const BaseContainer = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...rest }, ref) => (\n  <div className={buildClassnames([styles.base, className])} ref={ref} {...rest}>\n    {children}\n  </div>\n));\n\nBaseContainer.displayName = 'BaseContainer';\n"],"names":["React"],"mappings":";;;;;MAIa,aAAa,GAAGA,cAAK,CAAC,UAAU,CAG3C,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACtCA,sCAAK,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAA,GAAM,IAAI,IAC1E,QAAQ,CACL,CACP;AAED,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}

package/dist/components/BaseContainer/BaseContainer.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._base_1khh5_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n}");
+var styles = {"base":"_base_1khh5_1"};
+
+module.exports = styles;
+//# sourceMappingURL=BaseContainer.module.scss.cjs.map

package/dist/components/BaseContainer/BaseContainer.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseContainer.module.scss.cjs","sources":["../../../src/components/BaseContainer/BaseContainer.module.scss"],"sourcesContent":[".base {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,oGAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA;;;;"}

package/dist/components/BaseContainer/BaseContainer.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._base_1khh5_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n}");
+var styles = {"base":"_base_1khh5_1"};
+
+export { styles as default };
+//# sourceMappingURL=BaseContainer.module.scss.js.map

package/dist/components/BaseContainer/BaseContainer.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseContainer.module.scss.js","sources":["../../../src/components/BaseContainer/BaseContainer.module.scss"],"sourcesContent":[".base {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,oGAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA;;;;"}

package/dist/components/DataTable/components/ColumnHeader.d.ts

@@ -3,4 +3,4 @@ export declare const HeaderContent: import("styled-components").StyledComponent<
 export declare const ClickableHeaderContent: import("styled-components").StyledComponent<"span", any, {
     as: string;
     type: string;
-}, "type" | "as">;
+}, "as" | "type">;

package/dist/components/DimensionsInput/DimensionsInput.cjs

@@ -5,9 +5,9 @@ var withLabels = require('../../hoc/withLabels/withLabels.cjs');
 var invalidCharactersNumeric = require('../../utils/invalidCharactersNumeric.cjs');
 var blockInvalidCharacters = require('../../utils/blockInvalidCharacters.cjs');
 var InputAffix = require('../InputAffix/InputAffix.cjs');
-var index$1 = require('../TextField/index.cjs');
+var index = require('../TextField/index.cjs');
 var Stack = require('../Stack/Stack.cjs');
-var index = require('../InputGroup/index.cjs');
+var InputGroup = require('../InputGroup/InputGroup.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -46,17 +46,17 @@ const DimensionsInput = withLabels.withLabels(({ size = 'base', handleChangeHeig
         },
     };
     return (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", className: className },
-        React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+        React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
             React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "L"),
-            React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "length", value: length, "aria-label": "Length", "aria-describedby": "length-unit", onChange: handleChangeLength, placeholder: "0" }),
+            React__default.default.createElement(index.TextField, { ...childProps.textField, name: "length", value: length, "aria-label": "Length", "aria-describedby": "length-unit", onChange: handleChangeLength, placeholder: "0" }),
             React__default.default.createElement(InputAffix.InputAffix, { id: "length-unit", ...childProps.inputAffix }, unit)),
-        React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+        React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
             React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "W"),
-            React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "width", value: width, "aria-label": "Width", "aria-describedby": "width-unit", onChange: handleChangeWidth, placeholder: "0" }),
+            React__default.default.createElement(index.TextField, { ...childProps.textField, name: "width", value: width, "aria-label": "Width", "aria-describedby": "width-unit", onChange: handleChangeWidth, placeholder: "0" }),
             React__default.default.createElement(InputAffix.InputAffix, { id: "width-unit", ...childProps.inputAffix }, unit)),
-        React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+        React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
             React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "H"),
-            React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "height", value: height, "aria-label": "Height", "aria-describedby": "height-unit", onChange: handleChangeHeight, placeholder: "0" }),
+            React__default.default.createElement(index.TextField, { ...childProps.textField, name: "height", value: height, "aria-label": "Height", "aria-describedby": "height-unit", onChange: handleChangeHeight, placeholder: "0" }),
             React__default.default.createElement(InputAffix.InputAffix, { id: "height-unit", ...childProps.inputAffix }, unit))));
 });
 DimensionsInput.displayName = 'DimensionsInput';

package/dist/components/DimensionsInput/DimensionsInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DimensionsInput.cjs","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\nimport { Stack } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nconst styles = {\n  inputGroup: {\n    flex: 1,\n  },\n  textField: {\n    flex: 1,\n  },\n};\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n  ({\n    size = 'base',\n    handleChangeHeight,\n    handleChangeWidth,\n    handleChangeLength,\n    className,\n    height,\n    width,\n    length,\n    unit = 'cm',\n    hasError,\n    ...rest\n  }) => {\n    const compact = size === 'sm';\n\n    const childProps: ChildComponentProps = {\n      inputGroup: {\n        hasError,\n        compact,\n        style: styles.inputGroup,\n      },\n      textField: {\n        type: 'number',\n        min: '0',\n        step: 'any',\n        onKeyDown: blockInvalidChars,\n        size,\n        hasError,\n        style: styles.textField,\n        ...rest,\n      },\n      inputAffix: {\n        compact,\n        hasError,\n      },\n    };\n\n    return (\n      <Stack direction=\"horizontal\" alignY=\"center\" className={className}>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>L</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"length\"\n            value={length}\n            aria-label=\"Length\"\n            aria-describedby=\"length-unit\"\n            onChange={handleChangeLength}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>W</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"width\"\n            value={width}\n            aria-label=\"Width\"\n            aria-describedby=\"width-unit\"\n            onChange={handleChangeWidth}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>H</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"height\"\n            value={height}\n            aria-label=\"Height\"\n            aria-describedby=\"height-unit\"\n            onChange={handleChangeHeight}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n      </Stack>\n    );\n  },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","React","Stack","InputGroup","InputAffix","TextField"],"mappings":"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"}
+{"version":3,"file":"DimensionsInput.cjs","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\nimport { Stack } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nconst styles = {\n  inputGroup: {\n    flex: 1,\n  },\n  textField: {\n    flex: 1,\n  },\n};\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n  ({\n    size = 'base',\n    handleChangeHeight,\n    handleChangeWidth,\n    handleChangeLength,\n    className,\n    height,\n    width,\n    length,\n    unit = 'cm',\n    hasError,\n    ...rest\n  }) => {\n    const compact = size === 'sm';\n\n    const childProps: ChildComponentProps = {\n      inputGroup: {\n        hasError,\n        compact,\n        style: styles.inputGroup,\n      },\n      textField: {\n        type: 'number',\n        min: '0',\n        step: 'any',\n        onKeyDown: blockInvalidChars,\n        size,\n        hasError,\n        style: styles.textField,\n        ...rest,\n      },\n      inputAffix: {\n        compact,\n        hasError,\n      },\n    };\n\n    return (\n      <Stack direction=\"horizontal\" alignY=\"center\" className={className}>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>L</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"length\"\n            value={length}\n            aria-label=\"Length\"\n            aria-describedby=\"length-unit\"\n            onChange={handleChangeLength}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>W</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"width\"\n            value={width}\n            aria-label=\"Width\"\n            aria-describedby=\"width-unit\"\n            onChange={handleChangeWidth}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>H</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"height\"\n            value={height}\n            aria-label=\"Height\"\n            aria-describedby=\"height-unit\"\n            onChange={handleChangeHeight}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n      </Stack>\n    );\n  },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","React","Stack","InputGroup","InputAffix","TextField"],"mappings":"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"}