@veeqo/ui 14.2.0 → 14.3.0-beta-1

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._base_1i7yi_1 {\n  display: flex;\n}\n\n/* Direction classes */\n._vertical-direction_1i7yi_6 {\n  flex-direction: column;\n}\n\n._horizontal-direction_1i7yi_10 {\n  flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n._alignItems-start_1i7yi_15 {\n  align-items: flex-start;\n}\n\n._alignItems-center_1i7yi_19 {\n  align-items: center;\n}\n\n._alignItems-end_1i7yi_23 {\n  align-items: flex-end;\n}\n\n._alignItems-stretch_1i7yi_27 {\n  align-items: stretch;\n}\n\n._alignItems-between_1i7yi_31 {\n  align-items: space-between;\n}\n\n._alignItems-around_1i7yi_35 {\n  align-items: space-around;\n}\n\n._justifyContent-start_1i7yi_39 {\n  justify-content: flex-start;\n}\n\n._justifyContent-center_1i7yi_43 {\n  justify-content: center;\n}\n\n._justifyContent-end_1i7yi_47 {\n  justify-content: flex-end;\n}\n\n._justifyContent-stretch_1i7yi_51 {\n  justify-content: stretch;\n}\n\n._justifyContent-between_1i7yi_55 {\n  justify-content: space-between;\n}\n\n._justifyContent-around_1i7yi_59 {\n  justify-content: space-around;\n}\n\n/* Spacing is applied via row-gap / column-gap as an inline style on the\n   container (see Stack.tsx). gap is resolved on the parent element, so nested\n   Stacks cannot shadow each other's spacing values.\n   Direct children have their directional margins reset so that gap is the sole\n   spacing source, matching the old styled-components behavior where the\n   && > * + * { margin } rule implicitly overrode child margins. */\n._base_1i7yi_1._vertical-direction_1i7yi_6 > * {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n._base_1i7yi_1._horizontal-direction_1i7yi_10 > * {\n  margin-left: 0;\n  margin-right: 0;\n}\n\n/* Stretch modifier: child items get flex: 1 */\n._stretch-children_1i7yi_80 > * {\n  flex: 1;\n}");
+var styles = {"base":"_base_1i7yi_1","vertical-direction":"_vertical-direction_1i7yi_6","horizontal-direction":"_horizontal-direction_1i7yi_10","alignItems-start":"_alignItems-start_1i7yi_15","alignItems-center":"_alignItems-center_1i7yi_19","alignItems-end":"_alignItems-end_1i7yi_23","alignItems-stretch":"_alignItems-stretch_1i7yi_27","alignItems-between":"_alignItems-between_1i7yi_31","alignItems-around":"_alignItems-around_1i7yi_35","justifyContent-start":"_justifyContent-start_1i7yi_39","justifyContent-center":"_justifyContent-center_1i7yi_43","justifyContent-end":"_justifyContent-end_1i7yi_47","justifyContent-stretch":"_justifyContent-stretch_1i7yi_51","justifyContent-between":"_justifyContent-between_1i7yi_55","justifyContent-around":"_justifyContent-around_1i7yi_59","stretch-children":"_stretch-children_1i7yi_80"};
+
+module.exports = styles;
+//# sourceMappingURL=Stack.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.module.scss.cjs","sources":["../../../src/components/Stack/Stack.module.scss"],"sourcesContent":["@use './variables.scss' as vars;\n\n.base {\n  display: flex;\n}\n\n/* Direction classes */\n.vertical-direction {\n  flex-direction: column;\n}\n\n.horizontal-direction {\n  flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n@each $name, $value in vars.$align-items {\n  .alignItems-#{$name} {\n    align-items: $value;\n  }\n}\n\n@each $name, $value in vars.$justify-content {\n  .justifyContent-#{$name} {\n    justify-content: $value;\n  }\n}\n\n/* Spacing is applied via row-gap / column-gap as an inline style on the\n   container (see Stack.tsx). gap is resolved on the parent element, so nested\n   Stacks cannot shadow each other's spacing values.\n   Direct children have their directional margins reset so that gap is the sole\n   spacing source, matching the old styled-components behavior where the\n   && > * + * { margin } rule implicitly overrode child margins. */\n.base.vertical-direction > * {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.base.horizontal-direction > * {\n  margin-left: 0;\n  margin-right: 0;\n}\n\n/* Stretch modifier: child items get flex: 1 */\n.stretch-children > * {\n  flex: 1;\n}\n"],"names":[],"mappings":";;;;AAGE,eAAA,CAAA,4uDAAA;;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._base_1i7yi_1 {\n  display: flex;\n}\n\n/* Direction classes */\n._vertical-direction_1i7yi_6 {\n  flex-direction: column;\n}\n\n._horizontal-direction_1i7yi_10 {\n  flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n._alignItems-start_1i7yi_15 {\n  align-items: flex-start;\n}\n\n._alignItems-center_1i7yi_19 {\n  align-items: center;\n}\n\n._alignItems-end_1i7yi_23 {\n  align-items: flex-end;\n}\n\n._alignItems-stretch_1i7yi_27 {\n  align-items: stretch;\n}\n\n._alignItems-between_1i7yi_31 {\n  align-items: space-between;\n}\n\n._alignItems-around_1i7yi_35 {\n  align-items: space-around;\n}\n\n._justifyContent-start_1i7yi_39 {\n  justify-content: flex-start;\n}\n\n._justifyContent-center_1i7yi_43 {\n  justify-content: center;\n}\n\n._justifyContent-end_1i7yi_47 {\n  justify-content: flex-end;\n}\n\n._justifyContent-stretch_1i7yi_51 {\n  justify-content: stretch;\n}\n\n._justifyContent-between_1i7yi_55 {\n  justify-content: space-between;\n}\n\n._justifyContent-around_1i7yi_59 {\n  justify-content: space-around;\n}\n\n/* Spacing is applied via row-gap / column-gap as an inline style on the\n   container (see Stack.tsx). gap is resolved on the parent element, so nested\n   Stacks cannot shadow each other's spacing values.\n   Direct children have their directional margins reset so that gap is the sole\n   spacing source, matching the old styled-components behavior where the\n   && > * + * { margin } rule implicitly overrode child margins. */\n._base_1i7yi_1._vertical-direction_1i7yi_6 > * {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n._base_1i7yi_1._horizontal-direction_1i7yi_10 > * {\n  margin-left: 0;\n  margin-right: 0;\n}\n\n/* Stretch modifier: child items get flex: 1 */\n._stretch-children_1i7yi_80 > * {\n  flex: 1;\n}");
+var styles = {"base":"_base_1i7yi_1","vertical-direction":"_vertical-direction_1i7yi_6","horizontal-direction":"_horizontal-direction_1i7yi_10","alignItems-start":"_alignItems-start_1i7yi_15","alignItems-center":"_alignItems-center_1i7yi_19","alignItems-end":"_alignItems-end_1i7yi_23","alignItems-stretch":"_alignItems-stretch_1i7yi_27","alignItems-between":"_alignItems-between_1i7yi_31","alignItems-around":"_alignItems-around_1i7yi_35","justifyContent-start":"_justifyContent-start_1i7yi_39","justifyContent-center":"_justifyContent-center_1i7yi_43","justifyContent-end":"_justifyContent-end_1i7yi_47","justifyContent-stretch":"_justifyContent-stretch_1i7yi_51","justifyContent-between":"_justifyContent-between_1i7yi_55","justifyContent-around":"_justifyContent-around_1i7yi_59","stretch-children":"_stretch-children_1i7yi_80"};
+
+export { styles as default };
+//# sourceMappingURL=Stack.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.module.scss.js","sources":["../../../src/components/Stack/Stack.module.scss"],"sourcesContent":["@use './variables.scss' as vars;\n\n.base {\n  display: flex;\n}\n\n/* Direction classes */\n.vertical-direction {\n  flex-direction: column;\n}\n\n.horizontal-direction {\n  flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n@each $name, $value in vars.$align-items {\n  .alignItems-#{$name} {\n    align-items: $value;\n  }\n}\n\n@each $name, $value in vars.$justify-content {\n  .justifyContent-#{$name} {\n    justify-content: $value;\n  }\n}\n\n/* Spacing is applied via row-gap / column-gap as an inline style on the\n   container (see Stack.tsx). gap is resolved on the parent element, so nested\n   Stacks cannot shadow each other's spacing values.\n   Direct children have their directional margins reset so that gap is the sole\n   spacing source, matching the old styled-components behavior where the\n   && > * + * { margin } rule implicitly overrode child margins. */\n.base.vertical-direction > * {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.base.horizontal-direction > * {\n  margin-left: 0;\n  margin-right: 0;\n}\n\n/* Stretch modifier: child items get flex: 1 */\n.stretch-children > * {\n  flex: 1;\n}\n"],"names":["___$insertStyle"],"mappings":";;AAGEA,WAAA,CAAA,4uDAAA;;;;;"}

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { Alignments } from './Alignments';
 type Alignment = keyof typeof Alignments;
 declare enum SizeAlias {
@@ -23,10 +23,6 @@ declare const sizes: SizeScale;
 export type Size = keyof typeof sizes;
 export type StackProps = {
     children: ReactNode;
-    /**
-     * Classname for description
-     */
-    className?: string;
     /**
      * Direction of component
      */
@@ -34,5 +30,9 @@ export type StackProps = {
     alignX?: Alignment;
     alignY?: Alignment;
     spacing?: Size;
-};
+    /**
+     * Polymorphic element type. Defaults to 'div'.
+     */
+    as?: React.ElementType;
+} & HTMLAttributes<HTMLDivElement>;
 export {};

package/dist/components/Stepper/styled.cjs

@@ -10,9 +10,22 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 const { colors: { neutral, secondary }, radius, } = index.theme;
-const ContainerStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ContainerStack", componentId: "vui--7zcmtq" }) `--background-color:${({ disabled }) => (disabled ? neutral.grey.light : 'white')};--border-color:${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};box-sizing:border-box;display:inline-flex;background-color:var(--background-color);border:${index.theme.sizes.line} solid var(--border-color);border-radius:${radius.base};height:${({ compact }) => (compact ? index.theme.sizes[8] : index.theme.sizes[10])};`;
-const StepButton = styled__default.default.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--z17r9v" }) `appearance:none;border:0;background-color:transparent;border-radius:${radius.base};cursor:pointer;height:100%;aspect-ratio:1;&:hover{background-color:${neutral.grey.light};}${inputStyles.inputFocusStyles}`;
-const StepperDivider = styled__default.default.div.withConfig({ displayName: "vui--StepperDivider", componentId: "vui--1vucank" }) `width:${index.theme.sizes.line};background-color:${neutral.ink.lightest};height:${({ compact }) => (compact ? index.theme.sizes[4] : index.theme.sizes[6])};`;
+const ContainerStack = styled__default.default(Stack.Stack).withConfig({
+    shouldForwardProp: (prop) => !['hasError', 'compact'].includes(prop),
+}) `
+  --background-color: ${({ disabled }) => (disabled ? neutral.grey.light : 'white')};
+  --border-color: ${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};
+
+  box-sizing: border-box;
+  display: inline-flex;
+  background-color: var(--background-color);
+  border: ${index.theme.sizes.line} solid var(--border-color);
+  border-radius: ${radius.base};
+
+  height: ${({ compact }) => (compact ? index.theme.sizes[8] : index.theme.sizes[10])};
+`;
+const StepButton = styled__default.default.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--1j6prbe" }) `appearance:none;border:0;background-color:transparent;border-radius:${radius.base};cursor:pointer;height:100%;aspect-ratio:1;&:hover{background-color:${neutral.grey.light};}${inputStyles.inputFocusStyles}`;
+const StepperDivider = styled__default.default.div.withConfig({ displayName: "vui--StepperDivider", componentId: "vui--19ho080" }) `width:${index.theme.sizes.line};background-color:${neutral.ink.lightest};height:${({ compact }) => (compact ? index.theme.sizes[4] : index.theme.sizes[6])};`;
 
 exports.ContainerStack = ContainerStack;
 exports.StepButton = StepButton;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Stepper/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { inputFocusStyles } from '../../utils/forms/inputStyles';\nimport { Stack } from '../Stack';\nimport { FormComponentProps } from '../types';\n\nconst {\n  colors: { neutral, secondary },\n  radius,\n} = theme;\n\nexport const ContainerStack = styled(Stack)<FormComponentProps>`\n  --background-color: ${({ disabled }) => (disabled ? neutral.grey.light : 'white')};\n  --border-color: ${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};\n\n  box-sizing: border-box;\n  display: inline-flex;\n  background-color: var(--background-color);\n  border: ${theme.sizes.line} solid var(--border-color);\n  border-radius: ${radius.base};\n\n  height: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};\n`;\n\nexport const StepButton = styled.button`\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  border-radius: ${radius.base};\n  cursor: pointer;\n\n  height: 100%;\n  aspect-ratio: 1;\n\n  &:hover {\n    background-color: ${neutral.grey.light};\n  }\n\n  ${inputFocusStyles}\n`;\n\nexport const StepperDivider = styled.div<Pick<FormComponentProps, 'compact'>>`\n  width: ${theme.sizes.line};\n  background-color: ${neutral.ink.lightest};\n  height: ${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};\n`;\n"],"names":["theme","styled","Stack","inputFocusStyles"],"mappings":";;;;;;;;;;;AAMA,MAAM,EACJ,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAC9B,MAAM,GACP,GAAGA,WAAK;MAEI,cAAc,GAAGC,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mBAAA,EACnB,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAA,gBAAA,EAC/D,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,8FAKhFF,WAAK,CAAC,KAAK,CAAC,IAAI,4CACT,MAAM,CAAC,IAAI,CAAA,QAAA,EAElB,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAGA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA,CAAA;MAG5D,UAAU,GAAGC,uBAAM,CAAC,MAAM,mJAIpB,MAAM,CAAC,IAAI,CAAA,oEAAA,EAON,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,EAAA,EAGtCE,4BAAgB;MAGP,cAAc,GAAGF,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAC7BD,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA,kBAAA,EACL,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,QAAA,EAC9B,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Stepper/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { inputFocusStyles } from '../../utils/forms/inputStyles';\nimport { Stack } from '../Stack';\nimport { FormComponentProps } from '../types';\n\nconst {\n  colors: { neutral, secondary },\n  radius,\n} = theme;\n\nexport const ContainerStack = styled(Stack).withConfig({\n  shouldForwardProp: (prop) => !['hasError', 'compact'].includes(prop),\n})<FormComponentProps>`\n  --background-color: ${({ disabled }) => (disabled ? neutral.grey.light : 'white')};\n  --border-color: ${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};\n\n  box-sizing: border-box;\n  display: inline-flex;\n  background-color: var(--background-color);\n  border: ${theme.sizes.line} solid var(--border-color);\n  border-radius: ${radius.base};\n\n  height: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};\n`;\n\nexport const StepButton = styled.button`\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  border-radius: ${radius.base};\n  cursor: pointer;\n\n  height: 100%;\n  aspect-ratio: 1;\n\n  &:hover {\n    background-color: ${neutral.grey.light};\n  }\n\n  ${inputFocusStyles}\n`;\n\nexport const StepperDivider = styled.div<Pick<FormComponentProps, 'compact'>>`\n  width: ${theme.sizes.line};\n  background-color: ${neutral.ink.lightest};\n  height: ${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};\n`;\n"],"names":["theme","styled","Stack","inputFocusStyles"],"mappings":";;;;;;;;;;;AAMA,MAAM,EACJ,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAC9B,MAAM,GACP,GAAGA,WAAK;AAEF,MAAM,cAAc,GAAGC,uBAAM,CAACC,WAAK,CAAC,CAAC,UAAU,CAAC;AACrD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AACrE,CAAA,CAAC,CAAoB;wBACE,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAA;oBAC/D,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;;;;;YAKhFF,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA;AACT,iBAAA,EAAA,MAAM,CAAC,IAAI,CAAA;;YAElB,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAGA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;;MAG5D,UAAU,GAAGC,uBAAM,CAAC,MAAM,oJAIpB,MAAM,CAAC,IAAI,CAAA,oEAAA,EAON,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,EAAA,EAGtCE,4BAAgB;MAGP,cAAc,GAAGF,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAC7BD,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA,kBAAA,EACL,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,QAAA,EAC9B,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA,CAAA;;;;;;"}

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

@@ -1,4 +1,12 @@
+/// <reference types="react" />
 import { FormComponentProps } from '../types';
-export declare const ContainerStack: import("styled-components").StyledComponent<"div", any, import("../Stack").StackProps & FormComponentProps, never>;
+export declare const ContainerStack: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    children: import("react").ReactNode;
+    direction?: "horizontal" | "vertical" | undefined;
+    alignX?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
+    alignY?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
+    spacing?: keyof import("../Stack").SizeScale | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLElement>>, any, FormComponentProps, never>;
 export declare const StepButton: import("styled-components").StyledComponent<"button", any, FormComponentProps, never>;
 export declare const StepperDivider: import("styled-components").StyledComponent<"div", any, Pick<FormComponentProps, "compact">, never>;

package/dist/components/Stepper/styled.js

@@ -4,9 +4,22 @@ import { inputFocusStyles } from '../../utils/forms/inputStyles.js';
 import { Stack } from '../Stack/Stack.js';
 
 const { colors: { neutral, secondary }, radius, } = theme;
-const ContainerStack = styled(Stack).withConfig({ displayName: "vui--ContainerStack", componentId: "vui--7zcmtq" }) `--background-color:${({ disabled }) => (disabled ? neutral.grey.light : 'white')};--border-color:${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};box-sizing:border-box;display:inline-flex;background-color:var(--background-color);border:${theme.sizes.line} solid var(--border-color);border-radius:${radius.base};height:${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};`;
-const StepButton = styled.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--z17r9v" }) `appearance:none;border:0;background-color:transparent;border-radius:${radius.base};cursor:pointer;height:100%;aspect-ratio:1;&:hover{background-color:${neutral.grey.light};}${inputFocusStyles}`;
-const StepperDivider = styled.div.withConfig({ displayName: "vui--StepperDivider", componentId: "vui--1vucank" }) `width:${theme.sizes.line};background-color:${neutral.ink.lightest};height:${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};`;
+const ContainerStack = styled(Stack).withConfig({
+    shouldForwardProp: (prop) => !['hasError', 'compact'].includes(prop),
+}) `
+  --background-color: ${({ disabled }) => (disabled ? neutral.grey.light : 'white')};
+  --border-color: ${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};
+
+  box-sizing: border-box;
+  display: inline-flex;
+  background-color: var(--background-color);
+  border: ${theme.sizes.line} solid var(--border-color);
+  border-radius: ${radius.base};
+
+  height: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};
+`;
+const StepButton = styled.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--1j6prbe" }) `appearance:none;border:0;background-color:transparent;border-radius:${radius.base};cursor:pointer;height:100%;aspect-ratio:1;&:hover{background-color:${neutral.grey.light};}${inputFocusStyles}`;
+const StepperDivider = styled.div.withConfig({ displayName: "vui--StepperDivider", componentId: "vui--19ho080" }) `width:${theme.sizes.line};background-color:${neutral.ink.lightest};height:${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};`;
 
 export { ContainerStack, StepButton, StepperDivider };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Stepper/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { inputFocusStyles } from '../../utils/forms/inputStyles';\nimport { Stack } from '../Stack';\nimport { FormComponentProps } from '../types';\n\nconst {\n  colors: { neutral, secondary },\n  radius,\n} = theme;\n\nexport const ContainerStack = styled(Stack)<FormComponentProps>`\n  --background-color: ${({ disabled }) => (disabled ? neutral.grey.light : 'white')};\n  --border-color: ${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};\n\n  box-sizing: border-box;\n  display: inline-flex;\n  background-color: var(--background-color);\n  border: ${theme.sizes.line} solid var(--border-color);\n  border-radius: ${radius.base};\n\n  height: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};\n`;\n\nexport const StepButton = styled.button`\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  border-radius: ${radius.base};\n  cursor: pointer;\n\n  height: 100%;\n  aspect-ratio: 1;\n\n  &:hover {\n    background-color: ${neutral.grey.light};\n  }\n\n  ${inputFocusStyles}\n`;\n\nexport const StepperDivider = styled.div<Pick<FormComponentProps, 'compact'>>`\n  width: ${theme.sizes.line};\n  background-color: ${neutral.ink.lightest};\n  height: ${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};\n`;\n"],"names":[],"mappings":";;;;;AAMA,MAAM,EACJ,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAC9B,MAAM,GACP,GAAG,KAAK;MAEI,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mBAAA,EACnB,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAA,gBAAA,EAC/D,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,8FAKhF,KAAK,CAAC,KAAK,CAAC,IAAI,4CACT,MAAM,CAAC,IAAI,CAAA,QAAA,EAElB,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA,CAAA;MAG5D,UAAU,GAAG,MAAM,CAAC,MAAM,mJAIpB,MAAM,CAAC,IAAI,CAAA,oEAAA,EAON,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,EAAA,EAGtC,gBAAgB;MAGP,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAC7B,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,kBAAA,EACL,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,QAAA,EAC9B,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA,CAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Stepper/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { inputFocusStyles } from '../../utils/forms/inputStyles';\nimport { Stack } from '../Stack';\nimport { FormComponentProps } from '../types';\n\nconst {\n  colors: { neutral, secondary },\n  radius,\n} = theme;\n\nexport const ContainerStack = styled(Stack).withConfig({\n  shouldForwardProp: (prop) => !['hasError', 'compact'].includes(prop),\n})<FormComponentProps>`\n  --background-color: ${({ disabled }) => (disabled ? neutral.grey.light : 'white')};\n  --border-color: ${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};\n\n  box-sizing: border-box;\n  display: inline-flex;\n  background-color: var(--background-color);\n  border: ${theme.sizes.line} solid var(--border-color);\n  border-radius: ${radius.base};\n\n  height: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};\n`;\n\nexport const StepButton = styled.button`\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  border-radius: ${radius.base};\n  cursor: pointer;\n\n  height: 100%;\n  aspect-ratio: 1;\n\n  &:hover {\n    background-color: ${neutral.grey.light};\n  }\n\n  ${inputFocusStyles}\n`;\n\nexport const StepperDivider = styled.div<Pick<FormComponentProps, 'compact'>>`\n  width: ${theme.sizes.line};\n  background-color: ${neutral.ink.lightest};\n  height: ${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};\n`;\n"],"names":[],"mappings":";;;;;AAMA,MAAM,EACJ,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAC9B,MAAM,GACP,GAAG,KAAK;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;AACrD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AACrE,CAAA,CAAC,CAAoB;wBACE,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAA;oBAC/D,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;;;;;YAKhF,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA;AACT,iBAAA,EAAA,MAAM,CAAC,IAAI,CAAA;;YAElB,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;;MAG5D,UAAU,GAAG,MAAM,CAAC,MAAM,oJAIpB,MAAM,CAAC,IAAI,CAAA,oEAAA,EAON,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,EAAA,EAGtC,gBAAgB;MAGP,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAC7B,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,kBAAA,EACL,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,QAAA,EAC9B,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA,CAAA;;;;"}

package/dist/components/Text/Text.d.ts

@@ -7,5 +7,5 @@ import React from 'react';
 export declare const Text: React.ForwardRefExoticComponent<{
     as?: import("./types").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;
 } & React.HTMLAttributes<HTMLElement> & React.LabelHTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLElement>>;

package/dist/components/TextField/TextField.d.ts

@@ -1,13 +1,6 @@
 import React from 'react';
 export declare const TextField: React.ForwardRefExoticComponent<{
-    form?: string | undefined;
-    slot?: string | undefined;
-    style?: React.CSSProperties | undefined;
-    title?: string | undefined;
-    pattern?: string | undefined;
     rel?: string | undefined;
-    placeholder?: string | undefined;
-    list?: string | undefined;
     className?: string | undefined;
     children?: React.ReactNode;
     defaultChecked?: boolean | undefined;
@@ -24,8 +17,12 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    placeholder?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
+    style?: React.CSSProperties | undefined;
     tabIndex?: number | undefined;
+    title?: string | undefined;
     translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: React.AriaRole | undefined;
@@ -51,7 +48,7 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -263,6 +260,9 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     onAnimationIterationCapture?: (React.AnimationEventHandler<HTMLInputElement> & React.AnimationEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEnd?: (React.TransitionEventHandler<HTMLInputElement> & React.TransitionEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEndCapture?: (React.TransitionEventHandler<HTMLInputElement> & React.TransitionEventHandler<HTMLTextAreaElement>) | undefined;
+    form?: string | undefined;
+    pattern?: string | undefined;
+    list?: string | undefined;
     alt?: string | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;

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

@@ -1,14 +1,7 @@
 /// <reference types="react" />
 export type * from './types';
 export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
-    form?: string | undefined;
-    slot?: string | undefined;
-    style?: import("react").CSSProperties | undefined;
-    title?: string | undefined;
-    pattern?: string | undefined;
     rel?: string | undefined;
-    placeholder?: string | undefined;
-    list?: string | undefined;
     className?: string | undefined;
     children?: import("react").ReactNode;
     defaultChecked?: boolean | undefined;
@@ -25,8 +18,12 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    placeholder?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
+    style?: import("react").CSSProperties | undefined;
     tabIndex?: number | undefined;
+    title?: string | undefined;
     translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
@@ -52,7 +49,7 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -264,6 +261,9 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
     onAnimationIterationCapture?: (import("react").AnimationEventHandler<HTMLInputElement> & import("react").AnimationEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEnd?: (import("react").TransitionEventHandler<HTMLInputElement> & import("react").TransitionEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEndCapture?: (import("react").TransitionEventHandler<HTMLInputElement> & import("react").TransitionEventHandler<HTMLTextAreaElement>) | undefined;
+    form?: string | undefined;
+    pattern?: string | undefined;
+    list?: string | undefined;
     alt?: string | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;

package/dist/components/ToastsLayout/components/styled.cjs

@@ -12,10 +12,43 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 const ToastsLayoutContainer = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ToastsLayoutContainer", componentId: "vui--1iztsl9" }) `position:fixed;bottom:24px;width:100%;pointer-events:none;z-index:${index.theme.layers.tooltip};`;
-const Toast = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--Toast", componentId: "vui--1o64628" }) `background-color:${index.theme.colors.neutral.ink.dark};padding:12px 24px 12px 12px;box-shadow:${index.theme.shadows.lg};border-radius:${index.theme.radius.md};pointer-events:auto;z-index:40;min-width:${({ minWidth }) => minWidth};max-width:80vw;&.veeqo-components-toast-enter{transform:translateY(12px);opacity:0;}&.veeqo-components-toast-enter-active{transform:translateY(0);opacity:1;transition:500ms ease;}&.veeqo-components-toast-exit{transform:${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};opacity:1;}&.veeqo-components-toast-exit-active{transform:${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};opacity:0;transition:500ms ease;}`;
-const IconWrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--1nmtetq" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${index.theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.sizes.md};height:${sizes.sizes.md};}`;
-const ContentStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--fvpujj" }) `flex-grow:1;`;
-const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--ppieao" }) `color:white;font-size:16px;`;
+const Toast = styled__default.default(Stack.Stack).withConfig({
+    shouldForwardProp: (prop) => !['minWidth', 'last'].includes(prop),
+}) `
+  background-color: ${index.theme.colors.neutral.ink.dark};
+  padding: 12px 24px 12px 12px;
+  box-shadow: ${index.theme.shadows.lg};
+  border-radius: ${index.theme.radius.md};
+  pointer-events: auto;
+  z-index: 40;
+  min-width: ${({ minWidth }) => minWidth};
+  max-width: 80vw;
+
+  &.veeqo-components-toast-enter {
+    transform: translateY(12px);
+    opacity: 0;
+  }
+
+  &.veeqo-components-toast-enter-active {
+    transform: translateY(0);
+    opacity: 1;
+    transition: 500ms ease;
+  }
+
+  &.veeqo-components-toast-exit {
+    transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};
+    opacity: 1;
+  }
+
+  &.veeqo-components-toast-exit-active {
+    transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};
+    opacity: 0;
+    transition: 500ms ease;
+  }
+`;
+const IconWrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--1vysgv9" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${index.theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.sizes.md};height:${sizes.sizes.md};}`;
+const ContentStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--19akvqb" }) `flex-grow:1;`;
+const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--1bqcjr9" }) `color:white;font-size:16px;`;
 
 exports.ContentStack = ContentStack;
 exports.IconWrap = IconWrap;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n  minWidth: number | string;\n  last: boolean;\n}>`\n  background-color: ${theme.colors.neutral.ink.dark};\n  padding: 12px 24px 12px 12px;\n  box-shadow: ${theme.shadows.lg};\n  border-radius: ${theme.radius.md};\n  pointer-events: auto;\n  z-index: 40;\n  min-width: ${({ minWidth }) => minWidth};\n  max-width: 80vw;\n\n  &.veeqo-components-toast-enter {\n    transform: translateY(12px);\n    opacity: 0;\n  }\n\n  &.veeqo-components-toast-enter-active {\n    transform: translateY(0);\n    opacity: 1;\n    transition: 500ms ease;\n  }\n\n  &.veeqo-components-toast-exit {\n    transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n    opacity: 1;\n  }\n\n  &.veeqo-components-toast-exit-active {\n    transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n    opacity: 0;\n    transition: 500ms ease;\n  }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: ${theme.radius.md};\n  background-color: ${({ color }) => color};\n  color: #fff;\n\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n  }\n`;\n\nexport const ContentStack = styled(Stack)`\n  flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n  color: white;\n  font-size: 16px;\n`;\n"],"names":["styled","Stack","theme","BaseContainer","sizes","Text"],"mappings":";;;;;;;;;;;;;AAQO,MAAM,qBAAqB,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrCC,WAAK,CAAC,MAAM,CAAC,OAAO;AAG1B,MAAM,KAAK,GAAGF,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAIZC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,wCAAA,EAEnCA,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACbA,WAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAAA,4NAAA,EAexB,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAGF,uBAAM,CAACG,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1BD,WAAK,CAAC,MAAM,CAAC,EAAE,CAAA,kBAAA,EACZ,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAA,sBAAA,EAI7BE,WAAK,CAAC,EAAE,CAAA,QAAA,EACPA,WAAK,CAAC,EAAE;MAIT,YAAY,GAAGJ,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAGD,uBAAM,CAACK,SAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack).withConfig({\n  shouldForwardProp: (prop) => !['minWidth', 'last'].includes(prop),\n})<{\n  minWidth: number | string;\n  last: boolean;\n}>`\n  background-color: ${theme.colors.neutral.ink.dark};\n  padding: 12px 24px 12px 12px;\n  box-shadow: ${theme.shadows.lg};\n  border-radius: ${theme.radius.md};\n  pointer-events: auto;\n  z-index: 40;\n  min-width: ${({ minWidth }) => minWidth};\n  max-width: 80vw;\n\n  &.veeqo-components-toast-enter {\n    transform: translateY(12px);\n    opacity: 0;\n  }\n\n  &.veeqo-components-toast-enter-active {\n    transform: translateY(0);\n    opacity: 1;\n    transition: 500ms ease;\n  }\n\n  &.veeqo-components-toast-exit {\n    transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n    opacity: 1;\n  }\n\n  &.veeqo-components-toast-exit-active {\n    transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n    opacity: 0;\n    transition: 500ms ease;\n  }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: ${theme.radius.md};\n  background-color: ${({ color }) => color};\n  color: #fff;\n\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n  }\n`;\n\nexport const ContentStack = styled(Stack)`\n  flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n  color: white;\n  font-size: 16px;\n`;\n"],"names":["styled","Stack","theme","BaseContainer","sizes","Text"],"mappings":";;;;;;;;;;;;;AAQO,MAAM,qBAAqB,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrCC,WAAK,CAAC,MAAM,CAAC,OAAO;AAG1B,MAAM,KAAK,GAAGF,uBAAM,CAACC,WAAK,CAAC,CAAC,UAAU,CAAC;AAC5C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAClE,CAAA,CAAC,CAGA;AACoB,oBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;gBAEnCA,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA;mBACbA,WAAK,CAAC,MAAM,CAAC,EAAE,CAAA;;;AAGnB,aAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAAA;;;;;;;;;;;;;;;AAexB,eAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA;;;;;AAKxD,eAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC,CAAA;;;;;AAMxE,MAAM,QAAQ,GAAGF,uBAAM,CAACG,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1BD,WAAK,CAAC,MAAM,CAAC,EAAE,CAAA,kBAAA,EACZ,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAA,sBAAA,EAI7BE,WAAK,CAAC,EAAE,CAAA,QAAA,EACPA,WAAK,CAAC,EAAE;MAIT,YAAY,GAAGJ,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAGD,uBAAM,CAACK,SAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;;;;;"}

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

@@ -1,15 +1,36 @@
 /// <reference types="react" />
-export declare const ToastsLayoutContainer: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps, never>;
-export declare const Toast: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps & {
+export declare const ToastsLayoutContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    children: import("react").ReactNode;
+    direction?: "horizontal" | "vertical" | undefined;
+    alignX?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
+    alignY?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
+    spacing?: keyof import("../../Stack").SizeScale | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const Toast: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    children: import("react").ReactNode;
+    direction?: "horizontal" | "vertical" | undefined;
+    alignX?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
+    alignY?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
+    spacing?: keyof import("../../Stack").SizeScale | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLElement>>, any, {
     minWidth: number | string;
     last: boolean;
 }, never>;
-export declare const IconWrap: import("styled-components").StyledComponent<"div", any, {
+export declare const IconWrap: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
     color: string;
 }, never>;
-export declare const ContentStack: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps, never>;
+export declare const ContentStack: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    children: import("react").ReactNode;
+    direction?: "horizontal" | "vertical" | undefined;
+    alignX?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
+    alignY?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
+    spacing?: keyof import("../../Stack").SizeScale | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export 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>;

package/dist/components/ToastsLayout/components/styled.js

@@ -6,10 +6,43 @@ import { theme } from '../../../theme/index.js';
 import { sizes } from '../../../theme/modules/sizes.js';
 
 const ToastsLayoutContainer = styled(Stack).withConfig({ displayName: "vui--ToastsLayoutContainer", componentId: "vui--1iztsl9" }) `position:fixed;bottom:24px;width:100%;pointer-events:none;z-index:${theme.layers.tooltip};`;
-const Toast = styled(Stack).withConfig({ displayName: "vui--Toast", componentId: "vui--1o64628" }) `background-color:${theme.colors.neutral.ink.dark};padding:12px 24px 12px 12px;box-shadow:${theme.shadows.lg};border-radius:${theme.radius.md};pointer-events:auto;z-index:40;min-width:${({ minWidth }) => minWidth};max-width:80vw;&.veeqo-components-toast-enter{transform:translateY(12px);opacity:0;}&.veeqo-components-toast-enter-active{transform:translateY(0);opacity:1;transition:500ms ease;}&.veeqo-components-toast-exit{transform:${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};opacity:1;}&.veeqo-components-toast-exit-active{transform:${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};opacity:0;transition:500ms ease;}`;
-const IconWrap = styled(BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--1nmtetq" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.md};height:${sizes.md};}`;
-const ContentStack = styled(Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--fvpujj" }) `flex-grow:1;`;
-const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--ppieao" }) `color:white;font-size:16px;`;
+const Toast = styled(Stack).withConfig({
+    shouldForwardProp: (prop) => !['minWidth', 'last'].includes(prop),
+}) `
+  background-color: ${theme.colors.neutral.ink.dark};
+  padding: 12px 24px 12px 12px;
+  box-shadow: ${theme.shadows.lg};
+  border-radius: ${theme.radius.md};
+  pointer-events: auto;
+  z-index: 40;
+  min-width: ${({ minWidth }) => minWidth};
+  max-width: 80vw;
+
+  &.veeqo-components-toast-enter {
+    transform: translateY(12px);
+    opacity: 0;
+  }
+
+  &.veeqo-components-toast-enter-active {
+    transform: translateY(0);
+    opacity: 1;
+    transition: 500ms ease;
+  }
+
+  &.veeqo-components-toast-exit {
+    transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};
+    opacity: 1;
+  }
+
+  &.veeqo-components-toast-exit-active {
+    transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};
+    opacity: 0;
+    transition: 500ms ease;
+  }
+`;
+const IconWrap = styled(BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--1vysgv9" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.md};height:${sizes.md};}`;
+const ContentStack = styled(Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--19akvqb" }) `flex-grow:1;`;
+const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--1bqcjr9" }) `color:white;font-size:16px;`;
 
 export { ContentStack, IconWrap, StyledText, Toast, ToastsLayoutContainer };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n  minWidth: number | string;\n  last: boolean;\n}>`\n  background-color: ${theme.colors.neutral.ink.dark};\n  padding: 12px 24px 12px 12px;\n  box-shadow: ${theme.shadows.lg};\n  border-radius: ${theme.radius.md};\n  pointer-events: auto;\n  z-index: 40;\n  min-width: ${({ minWidth }) => minWidth};\n  max-width: 80vw;\n\n  &.veeqo-components-toast-enter {\n    transform: translateY(12px);\n    opacity: 0;\n  }\n\n  &.veeqo-components-toast-enter-active {\n    transform: translateY(0);\n    opacity: 1;\n    transition: 500ms ease;\n  }\n\n  &.veeqo-components-toast-exit {\n    transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n    opacity: 1;\n  }\n\n  &.veeqo-components-toast-exit-active {\n    transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n    opacity: 0;\n    transition: 500ms ease;\n  }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: ${theme.radius.md};\n  background-color: ${({ color }) => color};\n  color: #fff;\n\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n  }\n`;\n\nexport const ContentStack = styled(Stack)`\n  flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n  color: white;\n  font-size: 16px;\n`;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrC,KAAK,CAAC,MAAM,CAAC,OAAO;AAG1B,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAIZ,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,wCAAA,EAEnC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACb,KAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAAA,4NAAA,EAexB,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1B,KAAK,CAAC,MAAM,CAAC,EAAE,CAAA,kBAAA,EACZ,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAA,sBAAA,EAI7B,KAAK,CAAC,EAAE,CAAA,QAAA,EACP,KAAK,CAAC,EAAE;MAIT,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack).withConfig({\n  shouldForwardProp: (prop) => !['minWidth', 'last'].includes(prop),\n})<{\n  minWidth: number | string;\n  last: boolean;\n}>`\n  background-color: ${theme.colors.neutral.ink.dark};\n  padding: 12px 24px 12px 12px;\n  box-shadow: ${theme.shadows.lg};\n  border-radius: ${theme.radius.md};\n  pointer-events: auto;\n  z-index: 40;\n  min-width: ${({ minWidth }) => minWidth};\n  max-width: 80vw;\n\n  &.veeqo-components-toast-enter {\n    transform: translateY(12px);\n    opacity: 0;\n  }\n\n  &.veeqo-components-toast-enter-active {\n    transform: translateY(0);\n    opacity: 1;\n    transition: 500ms ease;\n  }\n\n  &.veeqo-components-toast-exit {\n    transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n    opacity: 1;\n  }\n\n  &.veeqo-components-toast-exit-active {\n    transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n    opacity: 0;\n    transition: 500ms ease;\n  }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: ${theme.radius.md};\n  background-color: ${({ color }) => color};\n  color: #fff;\n\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n  }\n`;\n\nexport const ContentStack = styled(Stack)`\n  flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n  color: white;\n  font-size: 16px;\n`;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrC,KAAK,CAAC,MAAM,CAAC,OAAO;AAG1B,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;AAC5C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAClE,CAAA,CAAC,CAGA;AACoB,oBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;gBAEnC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;mBACb,KAAK,CAAC,MAAM,CAAC,EAAE,CAAA;;;AAGnB,aAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAAA;;;;;;;;;;;;;;;AAexB,eAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA;;;;;AAKxD,eAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC,CAAA;;;;;AAMxE,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1B,KAAK,CAAC,MAAM,CAAC,EAAE,CAAA,kBAAA,EACZ,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAA,sBAAA,EAI7B,KAAK,CAAC,EAAE,CAAA,QAAA,EACP,KAAK,CAAC,EAAE;MAIT,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;"}

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ToggleProps } from './types';
 declare const Slider: import("styled-components").StyledComponent<"span", any, {
     switched?: boolean | undefined;
@@ -5,7 +6,7 @@ declare const Slider: import("styled-components").StyledComponent<"span", any, {
 }, never>;
 declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
 declare const Switch: import("styled-components").StyledComponent<"span", any, ToggleProps, never>;
-declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
+declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
     disabled?: boolean | undefined;
 }, never>;
 export { Switch, Slider, Input, Wrapper };

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

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

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

@@ -12,20 +12,20 @@ export type CounterProps = {
     $active?: boolean;
     $customTextColour?: string;
 } & RequiredPalette;
-declare const Container: 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 CounterText: 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>;
-declare const Contour: import("styled-components").StyledComponent<"div", any, {
+declare const Contour: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
     $active?: boolean | undefined;
     $customTextColour?: string | undefined;
 } & RequiredPalette, never>;
 declare const CounterContainer: 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, {
     $active?: boolean | undefined;
     $customTextColour?: string | undefined;

package/dist/components/ViewTab/ViewTab.d.ts

@@ -6,7 +6,7 @@ export interface ClassNamesReturnPayload {
     active?: string;
     counter?: string;
 }
-export declare const ViewTab: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "id" | "onClick" | "name"> & {
+export declare const ViewTab: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "onClick" | "type" | "name"> & {
     colourPalette?: import("../../theme/modules/colors").ColourPalette | undefined;
     customTextColour?: string | undefined;
     active?: boolean | undefined;

package/dist/components/WeightInput/WeightInput.cjs

@@ -5,9 +5,9 @@ var withLabels = require('../../hoc/withLabels/withLabels.cjs');
 var blockInvalidCharacters = require('../../utils/blockInvalidCharacters.cjs');
 var invalidCharactersNumeric = require('../../utils/invalidCharactersNumeric.cjs');
 var Stack = require('../Stack/Stack.cjs');
-var index = require('../InputGroup/index.cjs');
+var InputGroup = require('../InputGroup/InputGroup.cjs');
 var InputAffix = require('../InputAffix/InputAffix.cjs');
-var index$1 = require('../TextField/index.cjs');
+var index = require('../TextField/index.cjs');
 var types = require('./types.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -46,18 +46,18 @@ const WeightInput = withLabels.withLabels((props) => {
     };
     // If the weight is metric, render grams
     if (types.isWeightMetric(props)) {
-        return (React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup, className: className },
-            React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "gram", value: props.gram, "aria-label": "Grams", onChange: props.handleChangeGram }),
+        return (React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup, className: className },
+            React__default.default.createElement(index.TextField, { ...childProps.textField, name: "gram", value: props.gram, "aria-label": "Grams", onChange: props.handleChangeGram }),
             React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "g")));
     }
     // If the weight is imperial, render pounds and ounces
     if (types.isWeightImperial(props)) {
         return (React__default.default.createElement(Stack.Stack, { ...childProps.stack, className: className },
-            React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup },
-                React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "pound", value: props.pound, "aria-label": "Pounds", onChange: props.handleChangePound }),
+            React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup },
+                React__default.default.createElement(index.TextField, { ...childProps.textField, name: "pound", value: props.pound, "aria-label": "Pounds", onChange: props.handleChangePound }),
                 React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "lb")),
-            React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup },
-                React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "ounce", value: props.ounce, "aria-label": "Ounces", onChange: props.handleChangeOunce }),
+            React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup },
+                React__default.default.createElement(index.TextField, { ...childProps.textField, name: "ounce", value: props.ounce, "aria-label": "Ounces", onChange: props.handleChangeOunce }),
                 React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "oz"))));
     }
     // If neither metric nor imperial, return null or handle as needed