@veeqo/ui 14.1.1 → 14.3.0-beta-1

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

package/dist/components/WeightInput/WeightInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"WeightInput.cjs","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n\nimport { Stack, StackProps } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\n\nimport { WeightProps, isWeightImperial, isWeightMetric } from './types';\n\ntype ChildComponentProps = {\n  stack: Partial<StackProps>;\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst flexStyle = { flex: 1 };\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const WeightInput = withLabels<WeightProps>((props) => {\n  const { size = 'base', hasError, disabled, className } = props;\n\n  const compact = size === 'sm';\n\n  const childProps: ChildComponentProps = {\n    stack: {\n      direction: 'horizontal',\n      alignY: 'center',\n      spacing: 'base',\n    },\n    inputGroup: {\n      style: flexStyle,\n    },\n    textField: {\n      type: 'number',\n      placeholder: '0',\n      min: '0',\n      step: 'any',\n      size,\n      disabled,\n      hasError,\n      onKeyDown: blockInvalidChars,\n      style: flexStyle,\n    },\n    inputAffix: {\n      compact,\n      hasError,\n    },\n  };\n\n  // If the weight is metric, render grams\n  if (isWeightMetric(props)) {\n    return (\n      <InputGroup {...childProps.inputGroup} className={className}>\n        <TextField\n          {...childProps.textField}\n          name=\"gram\"\n          value={props.gram}\n          aria-label=\"Grams\"\n          onChange={props.handleChangeGram}\n        />\n        <InputAffix {...childProps.inputAffix}>g</InputAffix>\n      </InputGroup>\n    );\n  }\n\n  // If the weight is imperial, render pounds and ounces\n  if (isWeightImperial(props)) {\n    return (\n      <Stack {...childProps.stack} className={className}>\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"pound\"\n            value={props.pound}\n            aria-label=\"Pounds\"\n            onChange={props.handleChangePound}\n          />\n          <InputAffix {...childProps.inputAffix}>lb</InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"ounce\"\n            value={props.ounce}\n            aria-label=\"Ounces\"\n            onChange={props.handleChangeOunce}\n          />\n          <InputAffix {...childProps.inputAffix}>oz</InputAffix>\n        </InputGroup>\n      </Stack>\n    );\n  }\n\n  // If neither metric nor imperial, return null or handle as needed\n  return null;\n});\n\nWeightInput.displayName = 'WeightInput';\n\nWeightInput.defaultProps = {\n  weightUnit: 'lb',\n};\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","isWeightMetric","React","InputGroup","TextField","InputAffix","isWeightImperial","Stack"],"mappings":"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"}
+{"version":3,"file":"WeightInput.cjs","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n\nimport { Stack, StackProps } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\n\nimport { WeightProps, isWeightImperial, isWeightMetric } from './types';\n\ntype ChildComponentProps = {\n  stack: Partial<StackProps>;\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst flexStyle = { flex: 1 };\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const WeightInput = withLabels<WeightProps>((props) => {\n  const { size = 'base', hasError, disabled, className } = props;\n\n  const compact = size === 'sm';\n\n  const childProps: ChildComponentProps = {\n    stack: {\n      direction: 'horizontal',\n      alignY: 'center',\n      spacing: 'base',\n    },\n    inputGroup: {\n      style: flexStyle,\n    },\n    textField: {\n      type: 'number',\n      placeholder: '0',\n      min: '0',\n      step: 'any',\n      size,\n      disabled,\n      hasError,\n      onKeyDown: blockInvalidChars,\n      style: flexStyle,\n    },\n    inputAffix: {\n      compact,\n      hasError,\n    },\n  };\n\n  // If the weight is metric, render grams\n  if (isWeightMetric(props)) {\n    return (\n      <InputGroup {...childProps.inputGroup} className={className}>\n        <TextField\n          {...childProps.textField}\n          name=\"gram\"\n          value={props.gram}\n          aria-label=\"Grams\"\n          onChange={props.handleChangeGram}\n        />\n        <InputAffix {...childProps.inputAffix}>g</InputAffix>\n      </InputGroup>\n    );\n  }\n\n  // If the weight is imperial, render pounds and ounces\n  if (isWeightImperial(props)) {\n    return (\n      <Stack {...childProps.stack} className={className}>\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"pound\"\n            value={props.pound}\n            aria-label=\"Pounds\"\n            onChange={props.handleChangePound}\n          />\n          <InputAffix {...childProps.inputAffix}>lb</InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"ounce\"\n            value={props.ounce}\n            aria-label=\"Ounces\"\n            onChange={props.handleChangeOunce}\n          />\n          <InputAffix {...childProps.inputAffix}>oz</InputAffix>\n        </InputGroup>\n      </Stack>\n    );\n  }\n\n  // If neither metric nor imperial, return null or handle as needed\n  return null;\n});\n\nWeightInput.displayName = 'WeightInput';\n\nWeightInput.defaultProps = {\n  weightUnit: 'lb',\n};\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","isWeightMetric","React","InputGroup","TextField","InputAffix","isWeightImperial","Stack"],"mappings":"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"}

package/dist/components/WeightInput/WeightInput.js

@@ -3,7 +3,7 @@ import { withLabels } from '../../hoc/withLabels/withLabels.js';
 import { blockInvalidCharacters } from '../../utils/blockInvalidCharacters.js';
 import { invalidCharsList } from '../../utils/invalidCharactersNumeric.js';
 import { Stack } from '../Stack/Stack.js';
-import { InputGroup } from '../InputGroup/index.js';
+import { InputGroup } from '../InputGroup/InputGroup.js';
 import { InputAffix } from '../InputAffix/InputAffix.js';
 import { TextField } from '../TextField/index.js';
 import { isWeightMetric, isWeightImperial } from './types.js';

package/dist/components/index.d.ts

@@ -34,7 +34,7 @@ export { FilterTag } from './FilterTag';
 export { Grid } from './Grid';
 export { Image } from './Image';
 export { InputAffix } from './InputAffix';
-export { InputGroup } from './InputGroup';
+export { InputGroup, type InputGroupProps } from './InputGroup';
 export { LegacyDataTable } from './LegacyDataTable';
 export { Loader } from './Loader';
 export { LoginWithAmazonButton } from './LoginWithAmazonButton';

package/dist/hoc/withClassNames/withClassNames.d.ts

@@ -24,5 +24,5 @@ type WithClassName = {
  * @param Component Component to render with styles applied.
  * @param classNames An array of class names to apply to instances of the component.
  */
-export declare const withClassNames: <C extends keyof JSX.IntrinsicElements | React.ComponentType<any> | AnyStyledComponent>(Component: PropsOf<C> extends WithClassName ? C : never, classNames: string[]) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropsOf<C>> & React.RefAttributes<unknown>>;
+export declare const withClassNames: <C extends React.ComponentType<any> | keyof JSX.IntrinsicElements | AnyStyledComponent>(Component: PropsOf<C> extends WithClassName ? C : never, classNames: string[]) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropsOf<C>> & React.RefAttributes<unknown>>;
 export {};

package/dist/hoc/withLabels/styled.d.ts

@@ -1,4 +1,12 @@
-export declare const RootStack: import("styled-components").StyledComponent<"div", any, import("../../components/Stack").StackProps, never>;
+/// <reference types="react" />
+export declare const RootStack: 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("../../components/Stack").SizeScale | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
 export declare const Hint: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Error: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/index.cjs

@@ -44,7 +44,7 @@ var FilterTag = require('./components/FilterTag/FilterTag.cjs');
 var index$1 = require('./components/Grid/index.cjs');
 var Image = require('./components/Image/Image.cjs');
 var InputAffix = require('./components/InputAffix/InputAffix.cjs');
-var index$2 = require('./components/InputGroup/index.cjs');
+var InputGroup = require('./components/InputGroup/InputGroup.cjs');
 var LegacyDataTable = require('./components/LegacyDataTable/LegacyDataTable.cjs');
 var Loader = require('./components/Loader/Loader.cjs');
 var LoginWithAmazonButton = require('./components/LoginWithAmazonButton/LoginWithAmazonButton.cjs');
@@ -68,7 +68,7 @@ var Stepper = require('./components/Stepper/Stepper.cjs');
 var SystemBanner = require('./components/SystemBanner/SystemBanner.cjs');
 var Tag = require('./components/Tag/Tag.cjs');
 var Text = require('./components/Text/Text.cjs');
-var index$5 = require('./components/TextField/index.cjs');
+var index$4 = require('./components/TextField/index.cjs');
 var ToastsLayout = require('./components/ToastsLayout/ToastsLayout.cjs');
 var Toggle = require('./components/Toggle/Toggle.cjs');
 var ToggleButton = require('./components/ToggleButton/ToggleButton.cjs');
@@ -84,13 +84,13 @@ var ViewTab = require('./components/ViewTab/ViewTab.cjs');
 var ViewsContainer = require('./components/ViewsContainer/ViewsContainer.cjs');
 var WeightInput = require('./components/WeightInput/WeightInput.cjs');
 var Indicator = require('./components/Indicator/Indicator.cjs');
-var index$4 = require('./components/SelectDropdown/index.cjs');
+var index$3 = require('./components/SelectDropdown/index.cjs');
 var ThemeInjector = require('./components/ThemeInjector/ThemeInjector.cjs');
 var TokenProvider = require('./components/TokenProvider/TokenProvider.cjs');
 var DataGrid = require('./components/DataGrid/DataGrid.cjs');
 var FlexCol = require('./components/Flex/FlexCol/FlexCol.cjs');
 var FlexRow = require('./components/Flex/FlexRow/FlexRow.cjs');
-var index$3 = require('./components/PhoneInput/index.cjs');
+var index$2 = require('./components/PhoneInput/index.cjs');
 var ChannelMark = require('./components/ChannelMark/ChannelMark.cjs');
 var constants$2 = require('./components/ChannelMark/constants.cjs');
 var CarrierMark = require('./components/CarrierMark/CarrierMark.cjs');
@@ -118,7 +118,7 @@ var assignCssVars = require('./utils/assignCssVars.cjs');
 var buildChannelMarkUrl = require('./utils/buildChannelMarkUrl.cjs');
 var buildCarrierMarkUrl = require('./utils/buildCarrierMarkUrl.cjs');
 var getContextAwareLink = require('./utils/getContextAwareLink.cjs');
-var index$6 = require('./theme/index.cjs');
+var index$5 = require('./theme/index.cjs');
 var AccountsIcon = require('./icons/design-system/components/AccountsIcon.cjs');
 var AccountsOutlineIcon = require('./icons/design-system/components/AccountsOutlineIcon.cjs');
 var AddIcon = require('./icons/design-system/components/AddIcon.cjs');
@@ -404,7 +404,7 @@ exports.FilterTag = FilterTag.FilterTag;
 exports.Grid = index$1.Grid;
 exports.Image = Image.Image;
 exports.InputAffix = InputAffix.InputAffix;
-exports.InputGroup = index$2.InputGroup;
+exports.InputGroup = InputGroup.InputGroup;
 exports.LegacyDataTable = LegacyDataTable.LegacyDataTable;
 exports.Loader = Loader.Loader;
 exports.LoginWithAmazonButton = LoginWithAmazonButton.LoginWithAmazonButton;
@@ -428,7 +428,7 @@ exports.Stepper = Stepper.Stepper;
 exports.SystemBanner = SystemBanner.SystemBanner;
 exports.Tag = Tag.Tag;
 exports.Text = Text.Text;
-exports.TextField = index$5.TextField;
+exports.TextField = index$4.TextField;
 exports.ToastsLayout = ToastsLayout.ToastsLayout;
 exports.Toggle = Toggle.Toggle;
 exports.ToggleButton = ToggleButton.ToggleButton;
@@ -451,13 +451,13 @@ exports.ViewTab = ViewTab.ViewTab;
 exports.ViewsContainer = ViewsContainer.ViewsContainer;
 exports.WeightInput = WeightInput.WeightInput;
 exports.Indicator = Indicator.Indicator;
-exports.SelectDropdown = index$4.SelectDropdown;
+exports.SelectDropdown = index$3.SelectDropdown;
 exports.ThemeInjector = ThemeInjector.ThemeInjector;
 exports.TokenProvider = TokenProvider.TokenProvider;
 exports.DataGrid = DataGrid.DataGrid;
 exports.FlexCol = FlexCol.FlexCol;
 exports.FlexRow = FlexRow.FlexRow;
-exports.PhoneInput = index$3.PhoneInput;
+exports.PhoneInput = index$2.PhoneInput;
 exports.ChannelMark = ChannelMark.ChannelMark;
 exports.ChannelTypeMap = constants$2.ChannelTypeMap;
 exports.CarrierMark = CarrierMark.CarrierMark;
@@ -487,7 +487,7 @@ exports.assignCssVars = assignCssVars.assignCssVars;
 exports.buildChannelMarkUrl = buildChannelMarkUrl.buildChannelMarkUrl;
 exports.buildCarrierMarkUrl = buildCarrierMarkUrl.buildCarrierMarkUrl;
 exports.getContextAwareLink = getContextAwareLink.getContextAwareLink;
-exports.theme = index$6.theme;
+exports.theme = index$5.theme;
 exports.AccountsIcon = AccountsIcon.ReactComponent;
 exports.AccountsOutlineIcon = AccountsOutlineIcon.ReactComponent;
 exports.AddIcon = AddIcon.ReactComponent;

package/dist/index.js

@@ -42,7 +42,7 @@ export { FilterTag } from './components/FilterTag/FilterTag.js';
 export { Grid } from './components/Grid/index.js';
 export { Image } from './components/Image/Image.js';
 export { InputAffix } from './components/InputAffix/InputAffix.js';
-export { InputGroup } from './components/InputGroup/index.js';
+export { InputGroup } from './components/InputGroup/InputGroup.js';
 export { LegacyDataTable } from './components/LegacyDataTable/LegacyDataTable.js';
 export { Loader } from './components/Loader/Loader.js';
 export { LoginWithAmazonButton } from './components/LoginWithAmazonButton/LoginWithAmazonButton.js';

package/dist/utils/forms/inputStyles.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var styled = require('styled-components');
-var index$1 = require('../../components/InputGroup/index.cjs');
 var index = require('../../theme/index.cjs');
 var variables = require('./variables.cjs');
 var utils = require('../../theme/utils.cjs');
@@ -22,7 +21,7 @@ const inputDisabledStyles = styled.css `&:disabled,&[data-disabled]{opacity:1;bo
  * @deprecated
  * use css modules instead
  */
-const inputBaseStyles = ({ compact }) => styled.css `${variables.inputVariableStyles} ${utils.getTextStyles(text.body)} appearance:none;box-sizing:border-box;background-color:white;text-align:left;min-height:${compact ? sizes[8] : sizes[10]};padding-inline:var(--padding);border:1px solid var(--border-color);border-radius:${radius.base};display:flex;align-items:center;justify-content:flex-start;${index$1.InputGroup} > &:first-child{padding-right:calc(var(--padding-right) - ${sizes[1]});}${index$1.InputGroup} > &:last-child{padding-left:${sizes[2]};}${index$1.InputGroup} > &:not(:first-child):not(:last-child){padding-inline:${sizes[2]};}`;
+const inputBaseStyles = ({ compact }) => styled.css `${variables.inputVariableStyles} ${utils.getTextStyles(text.body)} appearance:none;box-sizing:border-box;background-color:white;text-align:left;min-height:${compact ? sizes[8] : sizes[10]};padding-inline:var(--padding);border:1px solid var(--border-color);border-radius:${radius.base};display:flex;align-items:center;justify-content:flex-start;[data-input-group] > &:first-child{padding-right:calc(var(--padding-right) - ${sizes[1]});}[data-input-group] > &:last-child{padding-left:${sizes[2]};}[data-input-group] > &:not(:first-child):not(:last-child){padding-inline:${sizes[2]};}`;
 /**
  * @deprecated
  * use css modules instead from src/utils/forms/form.module.scss

package/dist/utils/forms/inputStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"inputStyles.cjs","sources":["../../../src/utils/forms/inputStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { InputGroup } from '../../components/InputGroup';\nimport { FormComponentProps } from '../../components/types';\nimport { getTextStyles, theme } from '../../theme';\nimport { inputVariableStyles } from './variables';\n\nconst { colors, radius, sizes, text } = theme;\n\n/**\n * @deprecated\n * Styles in this file have been converted to CSS modules in src/utils/forms/form.module.scss\n */\nexport const inputFocusStyles = ({ hasError }: FormComponentProps) => css`\n  &:focus {\n    --border-color: ${hasError ? colors.secondary.red.base : colors.secondary.blue.base};\n    border-color: var(--border-color);\n    box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n    outline: 0;\n  }\n`;\n/**\n * @deprecated\n * use css modules instead\n */\nexport const inputDisabledStyles = css`\n  &:disabled,\n  &[data-disabled] {\n    opacity: 1;\n    box-shadow: none;\n    background-color: ${colors.neutral.grey.light};\n    cursor: not-allowed;\n  }\n`;\n\n/**\n *\n * @deprecated\n * use css modules instead\n */\nexport const inputBaseStyles = ({ compact }: FormComponentProps) => css`\n  ${inputVariableStyles}\n  ${getTextStyles(text.body)}\n\n  appearance: none;\n  box-sizing: border-box;\n\n  background-color: white;\n  text-align: left;\n\n  min-height: ${compact ? sizes[8] : sizes[10]};\n  padding-inline: var(--padding);\n  border: 1px solid var(--border-color);\n  border-radius: ${radius.base};\n\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  /* When inside an InputGroup, reduce inline padding to bring content closer together */\n  ${InputGroup} > &:first-child {\n    padding-right: calc(var(--padding-right) - ${sizes[1]});\n  }\n\n  ${InputGroup} > &:last-child {\n    padding-left: ${sizes[2]};\n  }\n\n  ${InputGroup} > &:not(:first-child):not(:last-child) {\n    padding-inline: ${sizes[2]};\n  }\n`;\n\n/**\n * @deprecated\n * use css modules instead from src/utils/forms/form.module.scss\n */\nexport const inputFullStyles = css`\n  ${inputBaseStyles}\n  ${inputDisabledStyles}\n  ${inputFocusStyles}\n\n  &::placeholder {\n    ${getTextStyles(text.placeholder)}\n  }\n\n  &:invalid {\n    box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n    border-color: ${colors.secondary.red.base};\n  }\n`;\n"],"names":["theme","css","inputVariableStyles","getTextStyles","InputGroup"],"mappings":";;;;;;;;AAMA,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAGA,WAAK;AAE7C;;;AAGG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAsB,KAAKC,UAAG,CAAA,CAAA,uBAAA,EAEnD,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAMvF;;;AAGG;AACI,MAAM,mBAAmB,GAAGA,UAAG,CAAA,CAAA,uEAAA,EAKd,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK;AAKjD;;;;AAIG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAsB,KAAKA,UAAG,CAAA,CAAA,EACnEC,6BAAmB,CAAA,CAAA,EACnBC,mBAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,yFAAA,EAQZ,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAA,kFAAA,EAG3B,MAAM,CAAC,IAAI,CAAA,4DAAA,EAO1BC,kBAAU,CAAA,2DAAA,EACmC,KAAK,CAAC,CAAC,CAAC,CAAA,GAAA,EAGrDA,kBAAU,CAAA,6BAAA,EACM,KAAK,CAAC,CAAC,CAAC,CAAA,EAAA,EAGxBA,kBAAU,CAAA,uDAAA,EACQ,KAAK,CAAC,CAAC,CAAC;AAI9B;;;AAGG;AACI,MAAM,eAAe,GAAGH,UAAG,CAAA,CAAA,EAC9B,eAAe,CAAA,CAAA,EACf,mBAAmB,CAAA,CAAA,EACnB,gBAAgB,CAAA,gBAAA,EAGdE,mBAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA,gFAAA,EAKjB,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA,EAAA;;;;;;;"}
+{"version":3,"file":"inputStyles.cjs","sources":["../../../src/utils/forms/inputStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { FormComponentProps } from '../../components/types';\nimport { getTextStyles, theme } from '../../theme';\nimport { inputVariableStyles } from './variables';\n\nconst { colors, radius, sizes, text } = theme;\n\n/**\n * @deprecated\n * Styles in this file have been converted to CSS modules in src/utils/forms/form.module.scss\n */\nexport const inputFocusStyles = ({ hasError }: FormComponentProps) => css`\n  &:focus {\n    --border-color: ${hasError ? colors.secondary.red.base : colors.secondary.blue.base};\n    border-color: var(--border-color);\n    box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n    outline: 0;\n  }\n`;\n/**\n * @deprecated\n * use css modules instead\n */\nexport const inputDisabledStyles = css`\n  &:disabled,\n  &[data-disabled] {\n    opacity: 1;\n    box-shadow: none;\n    background-color: ${colors.neutral.grey.light};\n    cursor: not-allowed;\n  }\n`;\n\n/**\n *\n * @deprecated\n * use css modules instead\n */\nexport const inputBaseStyles = ({ compact }: FormComponentProps) => css`\n  ${inputVariableStyles}\n  ${getTextStyles(text.body)}\n\n  appearance: none;\n  box-sizing: border-box;\n\n  background-color: white;\n  text-align: left;\n\n  min-height: ${compact ? sizes[8] : sizes[10]};\n  padding-inline: var(--padding);\n  border: 1px solid var(--border-color);\n  border-radius: ${radius.base};\n\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  /* When inside an InputGroup, reduce inline padding to bring content closer together */\n  [data-input-group] > &:first-child {\n    padding-right: calc(var(--padding-right) - ${sizes[1]});\n  }\n\n  [data-input-group] > &:last-child {\n    padding-left: ${sizes[2]};\n  }\n\n  [data-input-group] > &:not(:first-child):not(:last-child) {\n    padding-inline: ${sizes[2]};\n  }\n`;\n\n/**\n * @deprecated\n * use css modules instead from src/utils/forms/form.module.scss\n */\nexport const inputFullStyles = css`\n  ${inputBaseStyles}\n  ${inputDisabledStyles}\n  ${inputFocusStyles}\n\n  &::placeholder {\n    ${getTextStyles(text.placeholder)}\n  }\n\n  &:invalid {\n    box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n    border-color: ${colors.secondary.red.base};\n  }\n`;\n"],"names":["theme","css","inputVariableStyles","getTextStyles"],"mappings":";;;;;;;AAKA,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAGA,WAAK;AAE7C;;;AAGG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAsB,KAAKC,UAAG,CAAA,CAAA,uBAAA,EAEnD,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAMvF;;;AAGG;AACI,MAAM,mBAAmB,GAAGA,UAAG,CAAA,CAAA,uEAAA,EAKd,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK;AAKjD;;;;AAIG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAsB,KAAKA,UAAG,CAAA,CAAA,EACnEC,6BAAmB,CAAA,CAAA,EACnBC,mBAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,yFAAA,EAQZ,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAA,kFAAA,EAG3B,MAAM,CAAC,IAAI,CAAA,yIAAA,EAQmB,KAAK,CAAC,CAAC,CAAC,CAAA,kDAAA,EAIrC,KAAK,CAAC,CAAC,CAAC,CAAA,2EAAA,EAIN,KAAK,CAAC,CAAC,CAAC,CAAA,EAAA;AAI9B;;;AAGG;AACI,MAAM,eAAe,GAAGF,UAAG,CAAA,CAAA,EAC9B,eAAe,CAAA,CAAA,EACf,mBAAmB,CAAA,CAAA,EACnB,gBAAgB,CAAA,gBAAA,EAGdE,mBAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA,gFAAA,EAKjB,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA,EAAA;;;;;;;"}

package/dist/utils/forms/inputStyles.js

@@ -1,5 +1,4 @@
 import { css } from 'styled-components';
-import { InputGroup } from '../../components/InputGroup/index.js';
 import { theme } from '../../theme/index.js';
 import { inputVariableStyles } from './variables.js';
 import { getTextStyles } from '../../theme/utils.js';
@@ -20,7 +19,7 @@ const inputDisabledStyles = css `&:disabled,&[data-disabled]{opacity:1;box-shado
  * @deprecated
  * use css modules instead
  */
-const inputBaseStyles = ({ compact }) => css `${inputVariableStyles} ${getTextStyles(text.body)} appearance:none;box-sizing:border-box;background-color:white;text-align:left;min-height:${compact ? sizes[8] : sizes[10]};padding-inline:var(--padding);border:1px solid var(--border-color);border-radius:${radius.base};display:flex;align-items:center;justify-content:flex-start;${InputGroup} > &:first-child{padding-right:calc(var(--padding-right) - ${sizes[1]});}${InputGroup} > &:last-child{padding-left:${sizes[2]};}${InputGroup} > &:not(:first-child):not(:last-child){padding-inline:${sizes[2]};}`;
+const inputBaseStyles = ({ compact }) => css `${inputVariableStyles} ${getTextStyles(text.body)} appearance:none;box-sizing:border-box;background-color:white;text-align:left;min-height:${compact ? sizes[8] : sizes[10]};padding-inline:var(--padding);border:1px solid var(--border-color);border-radius:${radius.base};display:flex;align-items:center;justify-content:flex-start;[data-input-group] > &:first-child{padding-right:calc(var(--padding-right) - ${sizes[1]});}[data-input-group] > &:last-child{padding-left:${sizes[2]};}[data-input-group] > &:not(:first-child):not(:last-child){padding-inline:${sizes[2]};}`;
 /**
  * @deprecated
  * use css modules instead from src/utils/forms/form.module.scss

package/dist/utils/forms/inputStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputStyles.js","sources":["../../../src/utils/forms/inputStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { InputGroup } from '../../components/InputGroup';\nimport { FormComponentProps } from '../../components/types';\nimport { getTextStyles, theme } from '../../theme';\nimport { inputVariableStyles } from './variables';\n\nconst { colors, radius, sizes, text } = theme;\n\n/**\n * @deprecated\n * Styles in this file have been converted to CSS modules in src/utils/forms/form.module.scss\n */\nexport const inputFocusStyles = ({ hasError }: FormComponentProps) => css`\n  &:focus {\n    --border-color: ${hasError ? colors.secondary.red.base : colors.secondary.blue.base};\n    border-color: var(--border-color);\n    box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n    outline: 0;\n  }\n`;\n/**\n * @deprecated\n * use css modules instead\n */\nexport const inputDisabledStyles = css`\n  &:disabled,\n  &[data-disabled] {\n    opacity: 1;\n    box-shadow: none;\n    background-color: ${colors.neutral.grey.light};\n    cursor: not-allowed;\n  }\n`;\n\n/**\n *\n * @deprecated\n * use css modules instead\n */\nexport const inputBaseStyles = ({ compact }: FormComponentProps) => css`\n  ${inputVariableStyles}\n  ${getTextStyles(text.body)}\n\n  appearance: none;\n  box-sizing: border-box;\n\n  background-color: white;\n  text-align: left;\n\n  min-height: ${compact ? sizes[8] : sizes[10]};\n  padding-inline: var(--padding);\n  border: 1px solid var(--border-color);\n  border-radius: ${radius.base};\n\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  /* When inside an InputGroup, reduce inline padding to bring content closer together */\n  ${InputGroup} > &:first-child {\n    padding-right: calc(var(--padding-right) - ${sizes[1]});\n  }\n\n  ${InputGroup} > &:last-child {\n    padding-left: ${sizes[2]};\n  }\n\n  ${InputGroup} > &:not(:first-child):not(:last-child) {\n    padding-inline: ${sizes[2]};\n  }\n`;\n\n/**\n * @deprecated\n * use css modules instead from src/utils/forms/form.module.scss\n */\nexport const inputFullStyles = css`\n  ${inputBaseStyles}\n  ${inputDisabledStyles}\n  ${inputFocusStyles}\n\n  &::placeholder {\n    ${getTextStyles(text.placeholder)}\n  }\n\n  &:invalid {\n    box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n    border-color: ${colors.secondary.red.base};\n  }\n`;\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK;AAE7C;;;AAGG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAsB,KAAK,GAAG,CAAA,CAAA,uBAAA,EAEnD,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAMvF;;;AAGG;AACI,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA,uEAAA,EAKd,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK;AAKjD;;;;AAIG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAsB,KAAK,GAAG,CAAA,CAAA,EACnE,mBAAmB,CAAA,CAAA,EACnB,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,yFAAA,EAQZ,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAA,kFAAA,EAG3B,MAAM,CAAC,IAAI,CAAA,4DAAA,EAO1B,UAAU,CAAA,2DAAA,EACmC,KAAK,CAAC,CAAC,CAAC,CAAA,GAAA,EAGrD,UAAU,CAAA,6BAAA,EACM,KAAK,CAAC,CAAC,CAAC,CAAA,EAAA,EAGxB,UAAU,CAAA,uDAAA,EACQ,KAAK,CAAC,CAAC,CAAC;AAI9B;;;AAGG;AACI,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA,EAC9B,eAAe,CAAA,CAAA,EACf,mBAAmB,CAAA,CAAA,EACnB,gBAAgB,CAAA,gBAAA,EAGd,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA,gFAAA,EAKjB,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA,EAAA;;;;"}
+{"version":3,"file":"inputStyles.js","sources":["../../../src/utils/forms/inputStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { FormComponentProps } from '../../components/types';\nimport { getTextStyles, theme } from '../../theme';\nimport { inputVariableStyles } from './variables';\n\nconst { colors, radius, sizes, text } = theme;\n\n/**\n * @deprecated\n * Styles in this file have been converted to CSS modules in src/utils/forms/form.module.scss\n */\nexport const inputFocusStyles = ({ hasError }: FormComponentProps) => css`\n  &:focus {\n    --border-color: ${hasError ? colors.secondary.red.base : colors.secondary.blue.base};\n    border-color: var(--border-color);\n    box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n    outline: 0;\n  }\n`;\n/**\n * @deprecated\n * use css modules instead\n */\nexport const inputDisabledStyles = css`\n  &:disabled,\n  &[data-disabled] {\n    opacity: 1;\n    box-shadow: none;\n    background-color: ${colors.neutral.grey.light};\n    cursor: not-allowed;\n  }\n`;\n\n/**\n *\n * @deprecated\n * use css modules instead\n */\nexport const inputBaseStyles = ({ compact }: FormComponentProps) => css`\n  ${inputVariableStyles}\n  ${getTextStyles(text.body)}\n\n  appearance: none;\n  box-sizing: border-box;\n\n  background-color: white;\n  text-align: left;\n\n  min-height: ${compact ? sizes[8] : sizes[10]};\n  padding-inline: var(--padding);\n  border: 1px solid var(--border-color);\n  border-radius: ${radius.base};\n\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  /* When inside an InputGroup, reduce inline padding to bring content closer together */\n  [data-input-group] > &:first-child {\n    padding-right: calc(var(--padding-right) - ${sizes[1]});\n  }\n\n  [data-input-group] > &:last-child {\n    padding-left: ${sizes[2]};\n  }\n\n  [data-input-group] > &:not(:first-child):not(:last-child) {\n    padding-inline: ${sizes[2]};\n  }\n`;\n\n/**\n * @deprecated\n * use css modules instead from src/utils/forms/form.module.scss\n */\nexport const inputFullStyles = css`\n  ${inputBaseStyles}\n  ${inputDisabledStyles}\n  ${inputFocusStyles}\n\n  &::placeholder {\n    ${getTextStyles(text.placeholder)}\n  }\n\n  &:invalid {\n    box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n    border-color: ${colors.secondary.red.base};\n  }\n`;\n"],"names":[],"mappings":";;;;;AAKA,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK;AAE7C;;;AAGG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAsB,KAAK,GAAG,CAAA,CAAA,uBAAA,EAEnD,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAMvF;;;AAGG;AACI,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA,uEAAA,EAKd,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK;AAKjD;;;;AAIG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAsB,KAAK,GAAG,CAAA,CAAA,EACnE,mBAAmB,CAAA,CAAA,EACnB,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,yFAAA,EAQZ,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAA,kFAAA,EAG3B,MAAM,CAAC,IAAI,CAAA,yIAAA,EAQmB,KAAK,CAAC,CAAC,CAAC,CAAA,kDAAA,EAIrC,KAAK,CAAC,CAAC,CAAC,CAAA,2EAAA,EAIN,KAAK,CAAC,CAAC,CAAC,CAAA,EAAA;AAI9B;;;AAGG;AACI,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA,EAC9B,eAAe,CAAA,CAAA,EACf,mBAAmB,CAAA,CAAA,EACnB,gBAAgB,CAAA,gBAAA,EAGd,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA,gFAAA,EAKjB,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA,EAAA;;;;"}