@veeqo/ui 14.1.1 → 14.3.0-beta-1

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

@@ -1,14 +1,7 @@
 /// <reference types="react" />
 import { Loader } from '../Loader';
 declare const Input: import("styled-components").StyledComponent<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 @@ declare const Input: import("styled-components").StyledComponent<import("react")
     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 @@ declare const Input: import("styled-components").StyledComponent<import("react")
     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 @@ declare const Input: import("styled-components").StyledComponent<import("react")
     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;
@@ -301,7 +301,7 @@ declare const Input: import("styled-components").StyledComponent<import("react")
     multiline?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps, "ref"> & import("react").RefAttributes<unknown>>, any, {}, never>;
 declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const Container: import("styled-components").StyledComponent<"div", any, {
+declare const Container: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
     iconPosition: 'left' | 'right';
 }, never>;
 export { Container, Input, IconContainer, Loader };

package/dist/components/Search/styled.js

@@ -5,7 +5,16 @@ import 'react';
 
 const Input = styled(TextField).withConfig({ displayName: "vui--Input", componentId: "vui--je6y84" }) `flex-grow:2;margin-top:0;margin-bottom:0;`;
 const IconContainer = styled.div.withConfig({ displayName: "vui--IconContainer", componentId: "vui--113gfe8" }) `position:absolute;`;
-const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--18q9h8i" }) `position:relative;display:flex;justify-content:flex-start;align-items:center;border-radius:0.25rem;${({ iconPosition }) => {
+const Container = styled(BaseContainer).withConfig({
+    shouldForwardProp: (prop) => !['iconPosition'].includes(prop),
+}) `
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 0.25rem;
+
+  ${({ iconPosition }) => {
     let padding = 'padding-right: 2.5rem;';
     let position = 'right: 0.5rem;';
     if (iconPosition === 'left') {
@@ -21,7 +30,8 @@ const Container = styled(BaseContainer).withConfig({ displayName: "vui--Containe
         ${position}
       }
     `;
-}}`;
+}}
+`;
 
 export { Container, IconContainer, Input };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Search/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { Loader } from '../Loader';\n\nconst Input = styled(TextField)`\n  flex-grow: 2;\n  margin-top: 0;\n  margin-bottom: 0;\n`;\n\nconst IconContainer = styled.div`\n  position: absolute;\n`;\n\nconst Container = styled(BaseContainer)<{ iconPosition: 'left' | 'right' }>`\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 0.25rem;\n\n  ${({ iconPosition }) => {\n    let padding = 'padding-right: 2.5rem;';\n    let position = 'right: 0.5rem;';\n\n    if (iconPosition === 'left') {\n      padding = 'padding-left: 2.5rem';\n      position = 'left: 0.5rem;';\n    }\n\n    return `\n      & ${Input} {\n        ${padding}\n      }\n\n      & ${IconContainer} {\n        ${position}\n      }\n    `;\n  }}\n`;\n\nexport { Container, Input, IconContainer, Loader };\n"],"names":[],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC;AAM/B,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG;AAIhC,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mGAAA,EAOnC,CAAC,EAAE,YAAY,EAAE,KAAI;IACrB,IAAI,OAAO,GAAG,wBAAwB;IACtC,IAAI,QAAQ,GAAG,gBAAgB;IAE/B,IAAI,YAAY,KAAK,MAAM,EAAE;QAC3B,OAAO,GAAG,sBAAsB;QAChC,QAAQ,GAAG,eAAe;AAC3B,IAAA;IAED,OAAO;UACD,KAAK,CAAA;UACL,OAAO;;;UAGP,aAAa,CAAA;UACb,QAAQ;;KAEb;AACH,CAAC;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Search/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { Loader } from '../Loader';\n\nconst Input = styled(TextField)`\n  flex-grow: 2;\n  margin-top: 0;\n  margin-bottom: 0;\n`;\n\nconst IconContainer = styled.div`\n  position: absolute;\n`;\n\nconst Container = styled(BaseContainer).withConfig({\n  shouldForwardProp: (prop) => !['iconPosition'].includes(prop),\n})<{ iconPosition: 'left' | 'right' }>`\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 0.25rem;\n\n  ${({ iconPosition }) => {\n    let padding = 'padding-right: 2.5rem;';\n    let position = 'right: 0.5rem;';\n\n    if (iconPosition === 'left') {\n      padding = 'padding-left: 2.5rem';\n      position = 'left: 0.5rem;';\n    }\n\n    return `\n      & ${Input} {\n        ${padding}\n      }\n\n      & ${IconContainer} {\n        ${position}\n      }\n    `;\n  }}\n`;\n\nexport { Container, Input, IconContainer, Loader };\n"],"names":[],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC;AAM/B,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG;AAIhC,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC;AACjD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC9D,CAAA,CAAC,CAAoC;;;;;;;AAOlC,EAAA,EAAA,CAAC,EAAE,YAAY,EAAE,KAAI;IACrB,IAAI,OAAO,GAAG,wBAAwB;IACtC,IAAI,QAAQ,GAAG,gBAAgB;IAE/B,IAAI,YAAY,KAAK,MAAM,EAAE;QAC3B,OAAO,GAAG,sBAAsB;QAChC,QAAQ,GAAG,eAAe;AAC3B,IAAA;IAED,OAAO;UACD,KAAK,CAAA;UACL,OAAO;;;UAGP,aAAa,CAAA;UACb,QAAQ;;KAEb;AACH,CAAC;;;;;"}

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

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

package/dist/components/Stack/Stack.cjs

@@ -1,59 +1,40 @@
 'use strict';
 
-var styled = require('styled-components');
-var Alignments = require('./Alignments.cjs');
+var React = require('react');
 var index = require('../../theme/index.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var Stack_module = require('./Stack.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 /**
  * @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.
  * Layout component.
  */
-const Stack = styled__default.default.div.withConfig({ displayName: "vui--Stack", componentId: "vui--1mxdupo" }) `display:flex;${(props) => {
-    const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;
-    let alignItems;
-    let justifyContent;
-    let flexDirection;
-    let itemFlex;
-    let marginTop = '';
-    let marginLeft = '';
-    if (direction === 'vertical') {
-        alignItems = alignX && Alignments.Alignments[alignX];
-        justifyContent = alignY && Alignments.Alignments[alignY];
-        marginTop = index.theme.sizes[spacing];
-        flexDirection = 'column';
-    }
-    else {
-        alignItems = alignY && Alignments.Alignments[alignY];
-        justifyContent = alignX && Alignments.Alignments[alignX];
-        marginLeft = index.theme.sizes[spacing];
-        flexDirection = 'row';
-    }
-    // These options result in 'justify-content: stretch' which doesn't exist,
-    // so instead we set the flex of child elements
-    if ((direction === 'vertical' && alignY === 'stretch') ||
-        (direction === 'horizontal' && alignX === 'stretch')) {
-        itemFlex = 1;
-    }
-    return `
-      align-items: ${alignItems};
-      justify-content: ${justifyContent};
-      flex-direction: ${flexDirection};
-
-      & > * {
-        flex: ${itemFlex};
-      }
-
-      /* applies the margin-top/left to all components inside a stack except the first component */
-      && > * + * {
-        margin-top: ${marginTop};
-        margin-left: ${marginLeft};
-      }
-    `;
-}}`;
+const Stack = React__default.default.forwardRef(({ direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base', as: Element = 'div', className, children, style, ...rest }, ref) => {
+    const isVertical = direction === 'vertical';
+    const alignItemsKey = isVertical ? alignX : alignY;
+    const justifyContentKey = isVertical ? alignY : alignX;
+    const isStretch = isVertical ? alignY === 'stretch' : alignX === 'stretch';
+    const spacingValue = index.theme.sizes[spacing];
+    const spacingStyle = isVertical
+        ? { rowGap: spacingValue }
+        : { columnGap: spacingValue };
+    return (React__default.default.createElement(Element, { className: buildClassnames.buildClassnames([
+            Stack_module.base,
+            Stack_module[`${direction}-direction`],
+            Stack_module[`alignItems-${alignItemsKey}`],
+            Stack_module[`justifyContent-${justifyContentKey}`],
+            isStretch ? Stack_module['stretch-children'] : undefined,
+            className,
+        ]), style: {
+            ...spacingStyle,
+            ...style,
+        }, ref: ref, ...rest }, children));
+});
 Stack.displayName = 'Stack';
 
 exports.Stack = Stack;

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.cjs","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Alignments } from './Alignments';\nimport { StackProps } from './types';\n\nimport { theme } from '../../theme';\n\n/**\n * @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.\n * Layout component.\n */\nexport const Stack = styled.div<StackProps>`\n  display: flex;\n\n  ${(props) => {\n    const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;\n\n    let alignItems;\n    let justifyContent;\n    let flexDirection;\n    let itemFlex;\n    let marginTop = '';\n    let marginLeft = '';\n\n    if (direction === 'vertical') {\n      alignItems = alignX && Alignments[alignX];\n      justifyContent = alignY && Alignments[alignY];\n      marginTop = theme.sizes[spacing];\n      flexDirection = 'column';\n    } else {\n      alignItems = alignY && Alignments[alignY];\n      justifyContent = alignX && Alignments[alignX];\n      marginLeft = theme.sizes[spacing];\n      flexDirection = 'row';\n    }\n\n    // These options result in 'justify-content: stretch' which doesn't exist,\n    // so instead we set the flex of child elements\n    if (\n      (direction === 'vertical' && alignY === 'stretch') ||\n      (direction === 'horizontal' && alignX === 'stretch')\n    ) {\n      itemFlex = 1;\n    }\n\n    return `\n      align-items: ${alignItems};\n      justify-content: ${justifyContent};\n      flex-direction: ${flexDirection};\n\n      & > * {\n        flex: ${itemFlex};\n      }\n\n      /* applies the margin-top/left to all components inside a stack except the first component */\n      && > * + * {\n        margin-top: ${marginTop};\n        margin-left: ${marginLeft};\n      }\n    `;\n  }}\n`;\n\nStack.displayName = 'Stack';\n"],"names":["styled","Alignments","theme"],"mappings":";;;;;;;;;;AAOA;;;AAGG;AACI,MAAM,KAAK,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAG3B,CAAC,KAAK,KAAI;AACV,IAAA,MAAM,EAAE,SAAS,GAAG,UAAU,EAAE,MAAM,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,KAAK;AAE9F,IAAA,IAAI,UAAU;AACd,IAAA,IAAI,cAAc;AAClB,IAAA,IAAI,aAAa;AACjB,IAAA,IAAI,QAAQ;IACZ,IAAI,SAAS,GAAG,EAAE;IAClB,IAAI,UAAU,GAAG,EAAE;IAEnB,IAAI,SAAS,KAAK,UAAU,EAAE;AAC5B,QAAA,UAAU,GAAG,MAAM,IAAIC,qBAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAIA,qBAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,SAAS,GAAGC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QAChC,aAAa,GAAG,QAAQ;AACzB,IAAA;AAAM,SAAA;AACL,QAAA,UAAU,GAAG,MAAM,IAAID,qBAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAIA,qBAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,UAAU,GAAGC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QACjC,aAAa,GAAG,KAAK;AACtB,IAAA;;;IAID,IACE,CAAC,SAAS,KAAK,UAAU,IAAI,MAAM,KAAK,SAAS;SAChD,SAAS,KAAK,YAAY,IAAI,MAAM,KAAK,SAAS,CAAC,EACpD;QACA,QAAQ,GAAG,CAAC;AACb,IAAA;IAED,OAAO;qBACU,UAAU,CAAA;yBACN,cAAc,CAAA;wBACf,aAAa,CAAA;;;gBAGrB,QAAQ,CAAA;;;;;sBAKF,SAAS,CAAA;uBACR,UAAU,CAAA;;KAE5B;AACH,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
+{"version":3,"file":"Stack.cjs","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import React from 'react';\n\nimport { StackProps } from './types';\n\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport styles from './Stack.module.scss';\n\n/**\n * @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.\n * Layout component.\n */\nexport const Stack = React.forwardRef<HTMLElement, StackProps>(\n  (\n    {\n      direction = 'vertical',\n      alignX = 'start',\n      alignY = 'start',\n      spacing = 'base',\n      as: Element = 'div',\n      className,\n      children,\n      style,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isVertical = direction === 'vertical';\n\n    const alignItemsKey = isVertical ? alignX : alignY;\n    const justifyContentKey = isVertical ? alignY : alignX;\n\n    const isStretch = isVertical ? alignY === 'stretch' : alignX === 'stretch';\n\n    const spacingValue = theme.sizes[spacing];\n\n    const spacingStyle = isVertical\n      ? { rowGap: spacingValue }\n      : { columnGap: spacingValue };\n\n    return (\n      <Element\n        className={buildClassnames([\n          styles.base,\n          styles[`${direction}-direction`],\n          styles[`alignItems-${alignItemsKey}`],\n          styles[`justifyContent-${justifyContentKey}`],\n          isStretch ? styles['stretch-children'] : undefined,\n          className,\n        ])}\n        style={{\n          ...spacingStyle,\n          ...style,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nStack.displayName = 'Stack';\n"],"names":["React","theme","buildClassnames","styles"],"mappings":";;;;;;;;;;;;AAQA;;;AAGG;MACU,KAAK,GAAGA,sBAAK,CAAC,UAAU,CACnC,CACE,EACE,SAAS,GAAG,UAAU,EACtB,MAAM,GAAG,OAAO,EAChB,MAAM,GAAG,OAAO,EAChB,OAAO,GAAG,MAAM,EAChB,EAAE,EAAE,OAAO,GAAG,KAAK,EACnB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,UAAU,GAAG,SAAS,KAAK,UAAU;IAE3C,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM;IAClD,MAAM,iBAAiB,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM;AAEtD,IAAA,MAAM,SAAS,GAAG,UAAU,GAAG,MAAM,KAAK,SAAS,GAAG,MAAM,KAAK,SAAS;IAE1E,MAAM,YAAY,GAAGC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;IAEzC,MAAM,YAAY,GAAG;AACnB,UAAE,EAAE,MAAM,EAAE,YAAY;AACxB,UAAE,EAAE,SAAS,EAAE,YAAY,EAAE;AAE/B,IAAA,QACED,sBAAA,CAAA,aAAA,CAAC,OAAO,IACN,SAAS,EAAEE,+BAAe,CAAC;AACzB,YAAAC,YAAM,CAAC,IAAI;AACX,YAAAA,YAAM,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,CAAC;AAChC,YAAAA,YAAM,CAAC,CAAA,WAAA,EAAc,aAAa,CAAA,CAAE,CAAC;AACrC,YAAAA,YAAM,CAAC,CAAA,eAAA,EAAkB,iBAAiB,CAAA,CAAE,CAAC;YAC7C,SAAS,GAAGA,YAAM,CAAC,kBAAkB,CAAC,GAAG,SAAS;YAClD,SAAS;SACV,CAAC,EACF,KAAK,EAAE;AACL,YAAA,GAAG,YAAY;AACf,YAAA,GAAG,KAAK;SACT,EACD,GAAG,EAAE,GAAG,EAAA,GACJ,IAAI,EAAA,EAEP,QAAQ,CACD;AAEd,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

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

@@ -1,6 +1,13 @@
-import { StackProps } from './types';
+import React from 'react';
 /**
  * @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.
  * Layout component.
  */
-export declare const Stack: import("styled-components").StyledComponent<"div", any, StackProps, never>;
+export declare const Stack: React.ForwardRefExoticComponent<{
+    children: 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("./types").SizeScale | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLElement>>;

package/dist/components/Stack/Stack.js

@@ -1,53 +1,34 @@
-import styled from 'styled-components';
-import { Alignments } from './Alignments.js';
+import React__default from 'react';
 import { theme } from '../../theme/index.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './Stack.module.scss.js';
 
 /**
  * @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.
  * Layout component.
  */
-const Stack = styled.div.withConfig({ displayName: "vui--Stack", componentId: "vui--1mxdupo" }) `display:flex;${(props) => {
-    const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;
-    let alignItems;
-    let justifyContent;
-    let flexDirection;
-    let itemFlex;
-    let marginTop = '';
-    let marginLeft = '';
-    if (direction === 'vertical') {
-        alignItems = alignX && Alignments[alignX];
-        justifyContent = alignY && Alignments[alignY];
-        marginTop = theme.sizes[spacing];
-        flexDirection = 'column';
-    }
-    else {
-        alignItems = alignY && Alignments[alignY];
-        justifyContent = alignX && Alignments[alignX];
-        marginLeft = theme.sizes[spacing];
-        flexDirection = 'row';
-    }
-    // These options result in 'justify-content: stretch' which doesn't exist,
-    // so instead we set the flex of child elements
-    if ((direction === 'vertical' && alignY === 'stretch') ||
-        (direction === 'horizontal' && alignX === 'stretch')) {
-        itemFlex = 1;
-    }
-    return `
-      align-items: ${alignItems};
-      justify-content: ${justifyContent};
-      flex-direction: ${flexDirection};
-
-      & > * {
-        flex: ${itemFlex};
-      }
-
-      /* applies the margin-top/left to all components inside a stack except the first component */
-      && > * + * {
-        margin-top: ${marginTop};
-        margin-left: ${marginLeft};
-      }
-    `;
-}}`;
+const Stack = React__default.forwardRef(({ direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base', as: Element = 'div', className, children, style, ...rest }, ref) => {
+    const isVertical = direction === 'vertical';
+    const alignItemsKey = isVertical ? alignX : alignY;
+    const justifyContentKey = isVertical ? alignY : alignX;
+    const isStretch = isVertical ? alignY === 'stretch' : alignX === 'stretch';
+    const spacingValue = theme.sizes[spacing];
+    const spacingStyle = isVertical
+        ? { rowGap: spacingValue }
+        : { columnGap: spacingValue };
+    return (React__default.createElement(Element, { className: buildClassnames([
+            styles.base,
+            styles[`${direction}-direction`],
+            styles[`alignItems-${alignItemsKey}`],
+            styles[`justifyContent-${justifyContentKey}`],
+            isStretch ? styles['stretch-children'] : undefined,
+            className,
+        ]), style: {
+            ...spacingStyle,
+            ...style,
+        }, ref: ref, ...rest }, children));
+});
 Stack.displayName = 'Stack';
 
 export { Stack };

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Alignments } from './Alignments';\nimport { StackProps } from './types';\n\nimport { theme } from '../../theme';\n\n/**\n * @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.\n * Layout component.\n */\nexport const Stack = styled.div<StackProps>`\n  display: flex;\n\n  ${(props) => {\n    const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;\n\n    let alignItems;\n    let justifyContent;\n    let flexDirection;\n    let itemFlex;\n    let marginTop = '';\n    let marginLeft = '';\n\n    if (direction === 'vertical') {\n      alignItems = alignX && Alignments[alignX];\n      justifyContent = alignY && Alignments[alignY];\n      marginTop = theme.sizes[spacing];\n      flexDirection = 'column';\n    } else {\n      alignItems = alignY && Alignments[alignY];\n      justifyContent = alignX && Alignments[alignX];\n      marginLeft = theme.sizes[spacing];\n      flexDirection = 'row';\n    }\n\n    // These options result in 'justify-content: stretch' which doesn't exist,\n    // so instead we set the flex of child elements\n    if (\n      (direction === 'vertical' && alignY === 'stretch') ||\n      (direction === 'horizontal' && alignX === 'stretch')\n    ) {\n      itemFlex = 1;\n    }\n\n    return `\n      align-items: ${alignItems};\n      justify-content: ${justifyContent};\n      flex-direction: ${flexDirection};\n\n      & > * {\n        flex: ${itemFlex};\n      }\n\n      /* applies the margin-top/left to all components inside a stack except the first component */\n      && > * + * {\n        margin-top: ${marginTop};\n        margin-left: ${marginLeft};\n      }\n    `;\n  }}\n`;\n\nStack.displayName = 'Stack';\n"],"names":[],"mappings":";;;;AAOA;;;AAGG;AACI,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAG3B,CAAC,KAAK,KAAI;AACV,IAAA,MAAM,EAAE,SAAS,GAAG,UAAU,EAAE,MAAM,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,KAAK;AAE9F,IAAA,IAAI,UAAU;AACd,IAAA,IAAI,cAAc;AAClB,IAAA,IAAI,aAAa;AACjB,IAAA,IAAI,QAAQ;IACZ,IAAI,SAAS,GAAG,EAAE;IAClB,IAAI,UAAU,GAAG,EAAE;IAEnB,IAAI,SAAS,KAAK,UAAU,EAAE;AAC5B,QAAA,UAAU,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QAChC,aAAa,GAAG,QAAQ;AACzB,IAAA;AAAM,SAAA;AACL,QAAA,UAAU,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QACjC,aAAa,GAAG,KAAK;AACtB,IAAA;;;IAID,IACE,CAAC,SAAS,KAAK,UAAU,IAAI,MAAM,KAAK,SAAS;SAChD,SAAS,KAAK,YAAY,IAAI,MAAM,KAAK,SAAS,CAAC,EACpD;QACA,QAAQ,GAAG,CAAC;AACb,IAAA;IAED,OAAO;qBACU,UAAU,CAAA;yBACN,cAAc,CAAA;wBACf,aAAa,CAAA;;;gBAGrB,QAAQ,CAAA;;;;;sBAKF,SAAS,CAAA;uBACR,UAAU,CAAA;;KAE5B;AACH,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
+{"version":3,"file":"Stack.js","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import React from 'react';\n\nimport { StackProps } from './types';\n\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport styles from './Stack.module.scss';\n\n/**\n * @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.\n * Layout component.\n */\nexport const Stack = React.forwardRef<HTMLElement, StackProps>(\n  (\n    {\n      direction = 'vertical',\n      alignX = 'start',\n      alignY = 'start',\n      spacing = 'base',\n      as: Element = 'div',\n      className,\n      children,\n      style,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isVertical = direction === 'vertical';\n\n    const alignItemsKey = isVertical ? alignX : alignY;\n    const justifyContentKey = isVertical ? alignY : alignX;\n\n    const isStretch = isVertical ? alignY === 'stretch' : alignX === 'stretch';\n\n    const spacingValue = theme.sizes[spacing];\n\n    const spacingStyle = isVertical\n      ? { rowGap: spacingValue }\n      : { columnGap: spacingValue };\n\n    return (\n      <Element\n        className={buildClassnames([\n          styles.base,\n          styles[`${direction}-direction`],\n          styles[`alignItems-${alignItemsKey}`],\n          styles[`justifyContent-${justifyContentKey}`],\n          isStretch ? styles['stretch-children'] : undefined,\n          className,\n        ])}\n        style={{\n          ...spacingStyle,\n          ...style,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nStack.displayName = 'Stack';\n"],"names":["React"],"mappings":";;;;;;AAQA;;;AAGG;MACU,KAAK,GAAGA,cAAK,CAAC,UAAU,CACnC,CACE,EACE,SAAS,GAAG,UAAU,EACtB,MAAM,GAAG,OAAO,EAChB,MAAM,GAAG,OAAO,EAChB,OAAO,GAAG,MAAM,EAChB,EAAE,EAAE,OAAO,GAAG,KAAK,EACnB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,UAAU,GAAG,SAAS,KAAK,UAAU;IAE3C,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM;IAClD,MAAM,iBAAiB,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM;AAEtD,IAAA,MAAM,SAAS,GAAG,UAAU,GAAG,MAAM,KAAK,SAAS,GAAG,MAAM,KAAK,SAAS;IAE1E,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;IAEzC,MAAM,YAAY,GAAG;AACnB,UAAE,EAAE,MAAM,EAAE,YAAY;AACxB,UAAE,EAAE,SAAS,EAAE,YAAY,EAAE;AAE/B,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,IACN,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,IAAI;AACX,YAAA,MAAM,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,CAAC;AAChC,YAAA,MAAM,CAAC,CAAA,WAAA,EAAc,aAAa,CAAA,CAAE,CAAC;AACrC,YAAA,MAAM,CAAC,CAAA,eAAA,EAAkB,iBAAiB,CAAA,CAAE,CAAC;YAC7C,SAAS,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,SAAS;YAClD,SAAS;SACV,CAAC,EACF,KAAK,EAAE;AACL,YAAA,GAAG,YAAY;AACf,YAAA,GAAG,KAAK;SACT,EACD,GAAG,EAAE,GAAG,EAAA,GACJ,IAAI,EAAA,EAEP,QAAQ,CACD;AAEd,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

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;