@veeqo/ui 14.1.0 → 14.1.1

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

@@ -6,16 +6,18 @@ declare const Input: import("styled-components").StyledComponent<import("react")
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
     pattern?: string | undefined;
+    rel?: string | undefined;
     placeholder?: string | undefined;
-    name?: string | undefined;
+    list?: string | undefined;
+    className?: string | undefined;
+    children?: import("react").ReactNode;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
-    className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -25,7 +27,7 @@ declare const Input: import("styled-components").StyledComponent<import("react")
     nonce?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined;
-    translate?: "no" | "yes" | undefined;
+    translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
@@ -34,7 +36,6 @@ declare const Input: import("styled-components").StyledComponent<import("react")
     inlist?: any;
     prefix?: string | undefined;
     property?: string | undefined;
-    rel?: string | undefined;
     resource?: string | undefined;
     rev?: string | undefined;
     typeof?: string | undefined;
@@ -51,27 +52,27 @@ declare const Input: import("styled-components").StyledComponent<import("react")
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "none" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
-    'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
+    'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
     'aria-busy'?: (boolean | "true" | "false") | undefined;
     'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "step" | "date" | "true" | "false" | "page" | "location" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "step" | "date" | "page" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -88,7 +89,7 @@ declare const Input: import("styled-components").StyledComponent<import("react")
     'aria-posinset'?: number | undefined;
     'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-readonly'?: (boolean | "true" | "false") | undefined;
-    'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     'aria-required'?: (boolean | "true" | "false") | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
@@ -96,12 +97,11 @@ declare const Input: import("styled-components").StyledComponent<import("react")
     'aria-rowspan'?: number | undefined;
     'aria-selected'?: (boolean | "true" | "false") | undefined;
     'aria-setsize'?: number | undefined;
-    'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+    'aria-sort'?: "other" | "none" | "ascending" | "descending" | undefined;
     'aria-valuemax'?: number | undefined;
     'aria-valuemin'?: number | undefined;
     'aria-valuenow'?: number | undefined;
     'aria-valuetext'?: string | undefined;
-    children?: import("react").ReactNode;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;
@@ -264,12 +264,7 @@ 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;
-    height?: string | number | undefined;
-    max?: string | number | undefined;
-    min?: string | number | undefined;
-    width?: string | number | undefined;
     alt?: string | undefined;
-    src?: string | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;
@@ -281,15 +276,20 @@ declare const Input: import("styled-components").StyledComponent<import("react")
     capture?: boolean | "user" | "environment" | undefined;
     checked?: boolean | undefined;
     enterKeyHint?: "search" | "previous" | "next" | "enter" | "done" | "go" | "send" | undefined;
-    list?: string | undefined;
+    multiple?: boolean | undefined;
+    cols?: number | undefined;
+    dirName?: string | undefined;
     maxLength?: number | undefined;
     minLength?: number | undefined;
-    multiple?: boolean | undefined;
+    src?: string | undefined;
+    name?: string | undefined;
+    height?: string | number | undefined;
+    max?: string | number | undefined;
+    min?: string | number | undefined;
+    width?: string | number | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
     step?: string | number | undefined;
-    cols?: number | undefined;
-    dirName?: string | undefined;
     rows?: number | undefined;
     wrap?: string | undefined;
 } & {

package/dist/components/Stack/Stack.cjs

@@ -3,7 +3,6 @@
 var styled = require('styled-components');
 var Alignments = require('./Alignments.cjs');
 var index = require('../../theme/index.cjs');
-var Text = require('../Text/Text.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -48,9 +47,8 @@ const Stack = styled__default.default.div.withConfig({ displayName: "vui--Stack"
         flex: ${itemFlex};
       }
 
-      & > * + *,
-      // Increase specificity to overwrite Text's Margin: 0
-      && > * + ${Text.Text} {
+      /* applies the margin-top/left to all components inside a stack except the first component */
+      && > * + * {
         margin-top: ${marginTop};
         margin-left: ${marginLeft};
       }

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 { StackProps } from './types';\nimport { Alignments } from './Alignments';\n\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\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      & > * + *,\n      // Increase specificity to overwrite Text's Margin: 0\n      && > * + ${Text} {\n        margin-top: ${marginTop};\n        margin-left: ${marginLeft};\n      }\n    `;\n  }}\n`;\n\nStack.displayName = 'Stack';\n"],"names":["styled","Alignments","theme","Text"],"mappings":";;;;;;;;;;;AAQA;;;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;;;;;iBAKPC,SAAI,CAAA;sBACC,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 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;;;;"}

package/dist/components/Stack/Stack.js

@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 import { Alignments } from './Alignments.js';
 import { theme } from '../../theme/index.js';
-import { Text } from '../Text/Text.js';
 
 /**
  * @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.
@@ -42,9 +41,8 @@ const Stack = styled.div.withConfig({ displayName: "vui--Stack", componentId: "v
         flex: ${itemFlex};
       }
 
-      & > * + *,
-      // Increase specificity to overwrite Text's Margin: 0
-      && > * + ${Text} {
+      /* applies the margin-top/left to all components inside a stack except the first component */
+      && > * + * {
         margin-top: ${marginTop};
         margin-left: ${marginLeft};
       }

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 { StackProps } from './types';\nimport { Alignments } from './Alignments';\n\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\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      & > * + *,\n      // Increase specificity to overwrite Text's Margin: 0\n      && > * + ${Text} {\n        margin-top: ${marginTop};\n        margin-left: ${marginLeft};\n      }\n    `;\n  }}\n`;\n\nStack.displayName = 'Stack';\n"],"names":[],"mappings":";;;;;AAQA;;;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;;;;;iBAKP,IAAI,CAAA;sBACC,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 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;;;;"}

package/dist/components/Text/Text.cjs

@@ -1,36 +1,36 @@
 'use strict';
 
-var styled = require('styled-components');
-var utils = require('./utils.cjs');
-var index = require('../../theme/index.cjs');
+var React = require('react');
+var text_module = require('../../theme/scss/text.module.scss.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var utils = require('../ThemeInjector/utils.cjs');
+var Text_module = require('./Text.module.scss.cjs');
+var textVariants = require('./textVariants.cjs');
+var utils$1 = require('./utils.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const { text, colors, fontFamily } = index.theme;
-const Text = styled__default.default.span.attrs(({ as, variant }) => ({
-    as: utils.getComponentOverride(as, variant),
-})).withConfig({ displayName: "vui--Text", componentId: "vui--p74sf8" }) `box-sizing:border-box;display:inline-block;margin:0;padding:0;font-style:normal;font-weight:normal;font-size:12px;font-family:${fontFamily};line-height:16px;color:#37424d;${({ variant }) => (variant === 'button' || variant === 'buttonSmall') &&
-    `
-    cursor: pointer;
-    background-color: transparent;
-    border: 0;
-  `} ${({ variant, muted = false }) => {
-    if (!variant)
-        return '';
-    const color = muted ? colors.neutral.ink.lightest : text[variant].color;
-    return `
-      font-family: ${text[variant].fontFamily};
-      font-style: ${text[variant].fontStyle};
-      font-weight: ${text[variant].fontWeight};
-      font-size: ${text[variant].fontSize};
-      line-height: ${text[variant].lineHeight};
-      color: ${color};
-      text-decoration: ${text[variant].textDecoration};
-      letter-spacing: ${text[variant].letterSpacing};
-    `;
-}}`;
+/**
+ * Text component for rendering semantic typography with predefined design system variants.
+ * Automatically maps heading variants to appropriate HTML elements for accessibility.
+ * Use the `as` prop to override the default HTML tag when needed.
+ */
+const Text = React.forwardRef(({ variant = 'body', as, muted, className, children, ...rest }, ref) => {
+    const Component = utils$1.getComponentOverride(as, variant);
+    const isInteractive = React.useMemo(() => textVariants.deprecatedTextVariants.includes(variant), [variant]);
+    const kebabCase = React.useMemo(() => utils.camelToKebab(variant), [variant]);
+    const classNames = buildClassnames.buildClassnames([
+        text_module[kebabCase],
+        muted && Text_module.muted,
+        isInteractive && Text_module.interactive,
+        Text_module.text,
+        className,
+    ]);
+    return (React__default.default.createElement(Component, { className: classNames, ref: ref, ...rest }, children));
+});
 
 exports.Text = Text;
 //# sourceMappingURL=Text.cjs.map

package/dist/components/Text/Text.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.cjs","sources":["../../../src/components/Text/Text.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { TextProps } from './types';\nimport { getComponentOverride } from './utils';\nimport { theme } from '../../theme';\n\nconst { text, colors, fontFamily } = theme;\n\nexport const Text = styled.span.attrs<TextProps>(({ as, variant }) => ({\n  as: getComponentOverride(as, variant),\n}))<TextProps>`\n  box-sizing: border-box;\n  display: inline-block;\n  margin: 0;\n  padding: 0;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 12px;\n  font-family: ${fontFamily};\n  line-height: 16px;\n  color: #37424d;\n\n  ${({ variant }) =>\n    (variant === 'button' || variant === 'buttonSmall') &&\n    `\n    cursor: pointer;\n    background-color: transparent;\n    border: 0;\n  `}\n\n  ${({ variant, muted = false }) => {\n    if (!variant) return '';\n    const color = muted ? colors.neutral.ink.lightest : text[variant].color;\n    return `\n      font-family: ${text[variant].fontFamily};\n      font-style: ${text[variant].fontStyle};\n      font-weight: ${text[variant].fontWeight};\n      font-size: ${text[variant].fontSize};\n      line-height: ${text[variant].lineHeight};\n      color: ${color};\n      text-decoration: ${text[variant].textDecoration};\n      letter-spacing: ${text[variant].letterSpacing};\n    `;\n  }}\n`;\n"],"names":["theme","styled","getComponentOverride"],"mappings":";;;;;;;;;;AAKA,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,GAAGA,WAAK;AAEnC,MAAM,IAAI,GAAGC,uBAAM,CAAC,IAAI,CAAC,KAAK,CAAY,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM;AACrE,IAAA,EAAE,EAAEC,0BAAoB,CAAC,EAAE,EAAE,OAAO,CAAC;AACtC,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8HAAA,EAQc,UAAU,mCAIvB,CAAC,EAAE,OAAO,EAAE,KACZ,CAAC,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,aAAa;AAClD,IAAA;;;;GAID,CAAA,CAAA,EAEC,CAAC,EAAE,OAAO,EAAE,KAAK,GAAG,KAAK,EAAE,KAAI;AAC/B,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,EAAE;IACvB,MAAM,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK;IACvE,OAAO;AACU,mBAAA,EAAA,IAAI,CAAC,OAAO,CAAC,CAAC,UAAU,CAAA;AACzB,kBAAA,EAAA,IAAI,CAAC,OAAO,CAAC,CAAC,SAAS,CAAA;AACtB,mBAAA,EAAA,IAAI,CAAC,OAAO,CAAC,CAAC,UAAU,CAAA;AAC1B,iBAAA,EAAA,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAA;AACpB,mBAAA,EAAA,IAAI,CAAC,OAAO,CAAC,CAAC,UAAU,CAAA;eAC9B,KAAK,CAAA;AACK,uBAAA,EAAA,IAAI,CAAC,OAAO,CAAC,CAAC,cAAc,CAAA;AAC7B,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAC,CAAC,aAAa,CAAA;KAC9C;AACH,CAAC;;;;"}
+{"version":3,"file":"Text.cjs","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport textStyles from '../../theme/scss/text.module.scss';\nimport { buildClassnames } from '../../utils';\nimport { camelToKebab } from '../ThemeInjector/utils';\nimport styles from './Text.module.scss';\nimport { deprecatedTextVariants } from './textVariants';\nimport { TextProps } from './types';\nimport { getComponentOverride } from './utils';\n\n/**\n * Text component for rendering semantic typography with predefined design system variants.\n * Automatically maps heading variants to appropriate HTML elements for accessibility.\n * Use the `as` prop to override the default HTML tag when needed.\n */\nexport const Text = forwardRef<HTMLElement, TextProps>(\n  ({ variant = 'body', as, muted, className, children, ...rest }, ref) => {\n    const Component = getComponentOverride(as, variant);\n    const isInteractive = useMemo(\n      () => (deprecatedTextVariants as readonly string[]).includes(variant),\n      [variant],\n    );\n    const kebabCase = useMemo(() => camelToKebab(variant as string), [variant]);\n    const classNames = buildClassnames([\n      textStyles[kebabCase],\n      muted && styles.muted,\n      isInteractive && styles.interactive,\n      styles.text,\n      className,\n    ]);\n    return (\n      <Component className={classNames} ref={ref} {...rest}>\n        {children}\n      </Component>\n    );\n  },\n);\n"],"names":["forwardRef","getComponentOverride","useMemo","deprecatedTextVariants","camelToKebab","buildClassnames","textStyles","styles","React"],"mappings":";;;;;;;;;;;;;;;AASA;;;;AAIG;AACI,MAAM,IAAI,GAAGA,gBAAU,CAC5B,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;IACrE,MAAM,SAAS,GAAGC,4BAAoB,CAAC,EAAE,EAAE,OAAO,CAAC;AACnD,IAAA,MAAM,aAAa,GAAGC,aAAO,CAC3B,MAAOC,mCAA4C,CAAC,QAAQ,CAAC,OAAO,CAAC,EACrE,CAAC,OAAO,CAAC,CACV;AACD,IAAA,MAAM,SAAS,GAAGD,aAAO,CAAC,MAAME,kBAAY,CAAC,OAAiB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAC3E,MAAM,UAAU,GAAGC,+BAAe,CAAC;QACjCC,WAAU,CAAC,SAAS,CAAC;QACrB,KAAK,IAAIC,WAAM,CAAC,KAAK;QACrB,aAAa,IAAIA,WAAM,CAAC,WAAW;AACnC,QAAAA,WAAM,CAAC,IAAI;QACX,SAAS;AACV,KAAA,CAAC;AACF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,GAAG,EAAA,GAAM,IAAI,IACjD,QAAQ,CACC;AAEhB,CAAC;;;;"}

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

@@ -1,2 +1,11 @@
-import type { TextProps } from './types';
-export declare const Text: import("styled-components").StyledComponent<"span", any, {} & TextProps, never>;
+import React from 'react';
+/**
+ * Text component for rendering semantic typography with predefined design system variants.
+ * Automatically maps heading variants to appropriate HTML elements for accessibility.
+ * Use the `as` prop to override the default HTML tag when needed.
+ */
+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;
+} & React.HTMLAttributes<HTMLElement> & React.LabelHTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLElement>>;

package/dist/components/Text/Text.js

@@ -1,30 +1,30 @@
-import styled from 'styled-components';
+import React__default, { forwardRef, useMemo } from 'react';
+import textStyles from '../../theme/scss/text.module.scss.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { camelToKebab } from '../ThemeInjector/utils.js';
+import styles from './Text.module.scss.js';
+import { deprecatedTextVariants } from './textVariants.js';
 import { getComponentOverride } from './utils.js';
-import { theme } from '../../theme/index.js';
 
-const { text, colors, fontFamily } = theme;
-const Text = styled.span.attrs(({ as, variant }) => ({
-    as: getComponentOverride(as, variant),
-})).withConfig({ displayName: "vui--Text", componentId: "vui--p74sf8" }) `box-sizing:border-box;display:inline-block;margin:0;padding:0;font-style:normal;font-weight:normal;font-size:12px;font-family:${fontFamily};line-height:16px;color:#37424d;${({ variant }) => (variant === 'button' || variant === 'buttonSmall') &&
-    `
-    cursor: pointer;
-    background-color: transparent;
-    border: 0;
-  `} ${({ variant, muted = false }) => {
-    if (!variant)
-        return '';
-    const color = muted ? colors.neutral.ink.lightest : text[variant].color;
-    return `
-      font-family: ${text[variant].fontFamily};
-      font-style: ${text[variant].fontStyle};
-      font-weight: ${text[variant].fontWeight};
-      font-size: ${text[variant].fontSize};
-      line-height: ${text[variant].lineHeight};
-      color: ${color};
-      text-decoration: ${text[variant].textDecoration};
-      letter-spacing: ${text[variant].letterSpacing};
-    `;
-}}`;
+/**
+ * Text component for rendering semantic typography with predefined design system variants.
+ * Automatically maps heading variants to appropriate HTML elements for accessibility.
+ * Use the `as` prop to override the default HTML tag when needed.
+ */
+const Text = forwardRef(({ variant = 'body', as, muted, className, children, ...rest }, ref) => {
+    const Component = getComponentOverride(as, variant);
+    const isInteractive = useMemo(() => deprecatedTextVariants.includes(variant), [variant]);
+    const kebabCase = useMemo(() => camelToKebab(variant), [variant]);
+    const classNames = buildClassnames([
+        textStyles[kebabCase],
+        muted && styles.muted,
+        isInteractive && styles.interactive,
+        styles.text,
+        className,
+    ]);
+    return (React__default.createElement(Component, { className: classNames, ref: ref, ...rest }, children));
+});
 
 export { Text };
 //# sourceMappingURL=Text.js.map

package/dist/components/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../src/components/Text/Text.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { TextProps } from './types';\nimport { getComponentOverride } from './utils';\nimport { theme } from '../../theme';\n\nconst { text, colors, fontFamily } = theme;\n\nexport const Text = styled.span.attrs<TextProps>(({ as, variant }) => ({\n  as: getComponentOverride(as, variant),\n}))<TextProps>`\n  box-sizing: border-box;\n  display: inline-block;\n  margin: 0;\n  padding: 0;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 12px;\n  font-family: ${fontFamily};\n  line-height: 16px;\n  color: #37424d;\n\n  ${({ variant }) =>\n    (variant === 'button' || variant === 'buttonSmall') &&\n    `\n    cursor: pointer;\n    background-color: transparent;\n    border: 0;\n  `}\n\n  ${({ variant, muted = false }) => {\n    if (!variant) return '';\n    const color = muted ? colors.neutral.ink.lightest : text[variant].color;\n    return `\n      font-family: ${text[variant].fontFamily};\n      font-style: ${text[variant].fontStyle};\n      font-weight: ${text[variant].fontWeight};\n      font-size: ${text[variant].fontSize};\n      line-height: ${text[variant].lineHeight};\n      color: ${color};\n      text-decoration: ${text[variant].textDecoration};\n      letter-spacing: ${text[variant].letterSpacing};\n    `;\n  }}\n`;\n"],"names":[],"mappings":";;;;AAKA,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK;AAEnC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAY,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM;AACrE,IAAA,EAAE,EAAE,oBAAoB,CAAC,EAAE,EAAE,OAAO,CAAC;AACtC,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8HAAA,EAQc,UAAU,mCAIvB,CAAC,EAAE,OAAO,EAAE,KACZ,CAAC,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,aAAa;AAClD,IAAA;;;;GAID,CAAA,CAAA,EAEC,CAAC,EAAE,OAAO,EAAE,KAAK,GAAG,KAAK,EAAE,KAAI;AAC/B,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,EAAE;IACvB,MAAM,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK;IACvE,OAAO;AACU,mBAAA,EAAA,IAAI,CAAC,OAAO,CAAC,CAAC,UAAU,CAAA;AACzB,kBAAA,EAAA,IAAI,CAAC,OAAO,CAAC,CAAC,SAAS,CAAA;AACtB,mBAAA,EAAA,IAAI,CAAC,OAAO,CAAC,CAAC,UAAU,CAAA;AAC1B,iBAAA,EAAA,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAA;AACpB,mBAAA,EAAA,IAAI,CAAC,OAAO,CAAC,CAAC,UAAU,CAAA;eAC9B,KAAK,CAAA;AACK,uBAAA,EAAA,IAAI,CAAC,OAAO,CAAC,CAAC,cAAc,CAAA;AAC7B,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAC,CAAC,aAAa,CAAA;KAC9C;AACH,CAAC;;;;"}
+{"version":3,"file":"Text.js","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport textStyles from '../../theme/scss/text.module.scss';\nimport { buildClassnames } from '../../utils';\nimport { camelToKebab } from '../ThemeInjector/utils';\nimport styles from './Text.module.scss';\nimport { deprecatedTextVariants } from './textVariants';\nimport { TextProps } from './types';\nimport { getComponentOverride } from './utils';\n\n/**\n * Text component for rendering semantic typography with predefined design system variants.\n * Automatically maps heading variants to appropriate HTML elements for accessibility.\n * Use the `as` prop to override the default HTML tag when needed.\n */\nexport const Text = forwardRef<HTMLElement, TextProps>(\n  ({ variant = 'body', as, muted, className, children, ...rest }, ref) => {\n    const Component = getComponentOverride(as, variant);\n    const isInteractive = useMemo(\n      () => (deprecatedTextVariants as readonly string[]).includes(variant),\n      [variant],\n    );\n    const kebabCase = useMemo(() => camelToKebab(variant as string), [variant]);\n    const classNames = buildClassnames([\n      textStyles[kebabCase],\n      muted && styles.muted,\n      isInteractive && styles.interactive,\n      styles.text,\n      className,\n    ]);\n    return (\n      <Component className={classNames} ref={ref} {...rest}>\n        {children}\n      </Component>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;;;;;AASA;;;;AAIG;AACI,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;IACrE,MAAM,SAAS,GAAG,oBAAoB,CAAC,EAAE,EAAE,OAAO,CAAC;AACnD,IAAA,MAAM,aAAa,GAAG,OAAO,CAC3B,MAAO,sBAA4C,CAAC,QAAQ,CAAC,OAAO,CAAC,EACrE,CAAC,OAAO,CAAC,CACV;AACD,IAAA,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,YAAY,CAAC,OAAiB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAC3E,MAAM,UAAU,GAAG,eAAe,CAAC;QACjC,UAAU,CAAC,SAAS,CAAC;QACrB,KAAK,IAAI,MAAM,CAAC,KAAK;QACrB,aAAa,IAAI,MAAM,CAAC,WAAW;AACnC,QAAA,MAAM,CAAC,IAAI;QACX,SAAS;AACV,KAAA,CAAC;AACF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,GAAG,EAAA,GAAM,IAAI,IACjD,QAAQ,CACC;AAEhB,CAAC;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._text_1n3c9_1 {\n  box-sizing: border-box;\n  display: inline-block;\n  margin: 0;\n  padding: 0;\n}\n\n._interactive_1n3c9_8 {\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n}\n\n._muted_1n3c9_14 {\n  color: var(--colors-neutral-ink-lightest);\n}");
+var styles = {"text":"_text_1n3c9_1","interactive":"_interactive_1n3c9_8","muted":"_muted_1n3c9_14"};
+
+module.exports = styles;
+//# sourceMappingURL=Text.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.module.scss.cjs","sources":["../../../src/components/Text/Text.module.scss"],"sourcesContent":[".text {\n  box-sizing: border-box;\n  display: inline-block;\n  margin: 0;\n  padding: 0;\n}\n\n.interactive {\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n}\n\n.muted {\n  color: var(--colors-neutral-ink-lightest);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,gRAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,OAAA,CAAA,iBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._text_1n3c9_1 {\n  box-sizing: border-box;\n  display: inline-block;\n  margin: 0;\n  padding: 0;\n}\n\n._interactive_1n3c9_8 {\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n}\n\n._muted_1n3c9_14 {\n  color: var(--colors-neutral-ink-lightest);\n}");
+var styles = {"text":"_text_1n3c9_1","interactive":"_interactive_1n3c9_8","muted":"_muted_1n3c9_14"};
+
+export { styles as default };
+//# sourceMappingURL=Text.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.module.scss.js","sources":["../../../src/components/Text/Text.module.scss"],"sourcesContent":[".text {\n  box-sizing: border-box;\n  display: inline-block;\n  margin: 0;\n  padding: 0;\n}\n\n.interactive {\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n}\n\n.muted {\n  color: var(--colors-neutral-ink-lightest);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,gRAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,OAAA,CAAA,iBAAA;;;;"}

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

@@ -1 +1,2 @@
 export { Text } from './Text';
+export type { TextProps, TextVariant, ValidTextTag } from './types';

package/dist/components/Text/textVariants.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+/** @deprecated do not use me */
+const deprecatedTextVariants = [
+    'button',
+    'buttonSmall',
+    'linkLarge',
+    'linkMedium',
+    'link',
+    'linkSmall',
+];
+
+exports.deprecatedTextVariants = deprecatedTextVariants;
+//# sourceMappingURL=textVariants.cjs.map

package/dist/components/Text/textVariants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"textVariants.cjs","sources":["../../../src/components/Text/textVariants.ts"],"sourcesContent":["export const headerVariants = [\n  'headingXXL',\n  'headingXL',\n  'headingLarge',\n  'headingMedium',\n  'headingSmall',\n] as const;\n\nexport const textVariants = [\n  ...headerVariants,\n  'headingTable',\n  'subheadingLarge',\n  'subheadingMedium',\n  'subheadingSmall',\n  'subheadingSmallBold',\n  'body',\n  'bodySmall',\n  'bodyBold',\n  'bodyBoldDark',\n  'bodySmallBold',\n  'inputLabel',\n  'inputLabelSmall',\n  'hintText',\n  'placeholder',\n  'placeholderSmall',\n  'placeholderCode',\n  'placeholderCodeSmall',\n  'error',\n  'errorSmall',\n  'successSmall',\n] as const;\n\n/** @deprecated do not use me */\nexport const deprecatedTextVariants = [\n  'button',\n  'buttonSmall',\n  'linkLarge',\n  'linkMedium',\n  'link',\n  'linkSmall',\n] as const;\n"],"names":[],"mappings":";;AAgCA;AACO,MAAM,sBAAsB,GAAG;IACpC,QAAQ;IACR,aAAa;IACb,WAAW;IACX,YAAY;IACZ,MAAM;IACN,WAAW;;;;;"}

package/dist/components/Text/textVariants.js

@@ -0,0 +1,12 @@
+/** @deprecated do not use me */
+const deprecatedTextVariants = [
+    'button',
+    'buttonSmall',
+    'linkLarge',
+    'linkMedium',
+    'link',
+    'linkSmall',
+];
+
+export { deprecatedTextVariants };
+//# sourceMappingURL=textVariants.js.map

package/dist/components/Text/textVariants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textVariants.js","sources":["../../../src/components/Text/textVariants.ts"],"sourcesContent":["export const headerVariants = [\n  'headingXXL',\n  'headingXL',\n  'headingLarge',\n  'headingMedium',\n  'headingSmall',\n] as const;\n\nexport const textVariants = [\n  ...headerVariants,\n  'headingTable',\n  'subheadingLarge',\n  'subheadingMedium',\n  'subheadingSmall',\n  'subheadingSmallBold',\n  'body',\n  'bodySmall',\n  'bodyBold',\n  'bodyBoldDark',\n  'bodySmallBold',\n  'inputLabel',\n  'inputLabelSmall',\n  'hintText',\n  'placeholder',\n  'placeholderSmall',\n  'placeholderCode',\n  'placeholderCodeSmall',\n  'error',\n  'errorSmall',\n  'successSmall',\n] as const;\n\n/** @deprecated do not use me */\nexport const deprecatedTextVariants = [\n  'button',\n  'buttonSmall',\n  'linkLarge',\n  'linkMedium',\n  'link',\n  'linkSmall',\n] as const;\n"],"names":[],"mappings":"AAgCA;AACO,MAAM,sBAAsB,GAAG;IACpC,QAAQ;IACR,aAAa;IACb,WAAW;IACX,YAAY;IACZ,MAAM;IACN,WAAW;;;;;"}

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

@@ -1,14 +1,13 @@
-import { textVariants, deprecatedTextVariants, headerVariants } from './textVariants';
+import type { HTMLAttributes, LabelHTMLAttributes } from 'react';
+import { deprecatedTextVariants, headerVariants, textVariants } from './textVariants';
 export type HeaderVariant = (typeof headerVariants)[number];
 export type TextVariant = (typeof textVariants)[number];
 export type DeprecatedTextVariants = (typeof deprecatedTextVariants)[number];
 export type ValidTextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'strong' | 'em' | 'mark' | 'small' | 'abbr' | 'time' | 'li' | 'ol' | 'ul' | 'dl' | 'dt' | 'dd' | 'blockquote' | 'code';
-export type TextProps = {
+type BaseTextProps = {
     as?: ValidTextTag;
     muted?: boolean;
-} & ({
-    variant: TextVariant;
-} | {
-    /** @deprecated to be removed, bad for accessibility. Use `Button` or `Anchor` */
-    variant?: DeprecatedTextVariants;
-});
+    variant?: TextVariant | DeprecatedTextVariants;
+};
+export type TextProps = BaseTextProps & HTMLAttributes<HTMLElement> & LabelHTMLAttributes<HTMLLabelElement>;
+export {};

package/dist/components/Text/utils.cjs

@@ -15,9 +15,9 @@ const componentMap = {
 const getComponentOverride = (as, variant) => {
     if (as)
         return as;
-    if (variant)
+    if (variant && componentMap[variant])
         return componentMap[variant];
-    return undefined;
+    return 'span';
 };
 
 exports.getComponentOverride = getComponentOverride;

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

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../src/components/Text/utils.ts"],"sourcesContent":["import { TextVariant, DeprecatedTextVariants, ValidTextTag } from './types';\n\nconst componentMap: { [key in TextVariant | DeprecatedTextVariants]?: string } = {\n  inputLabel: 'label',\n  inputLabelSmall: 'label',\n  headingSmall: 'h3',\n  headingMedium: 'h3',\n  headingLarge: 'h2',\n  headingXL: 'h1',\n  headingXXL: 'h1',\n  // Deprecated, but quickfix for A11y.\n  button: 'button',\n  buttonSmall: 'button',\n};\n\nexport const getComponentOverride = (\n  as: ValidTextTag | undefined,\n  variant: TextVariant | DeprecatedTextVariants | undefined,\n) => {\n  if (as) return as;\n  if (variant) return componentMap[variant];\n  return undefined;\n};\n"],"names":[],"mappings":";;AAEA,MAAM,YAAY,GAA+D;AAC/E,IAAA,UAAU,EAAE,OAAO;AACnB,IAAA,eAAe,EAAE,OAAO;AACxB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,aAAa,EAAE,IAAI;AACnB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,SAAS,EAAE,IAAI;AACf,IAAA,UAAU,EAAE,IAAI;;AAEhB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,WAAW,EAAE,QAAQ;CACtB;MAEY,oBAAoB,GAAG,CAClC,EAA4B,EAC5B,OAAyD,KACvD;AACF,IAAA,IAAI,EAAE;AAAE,QAAA,OAAO,EAAE;AACjB,IAAA,IAAI,OAAO;AAAE,QAAA,OAAO,YAAY,CAAC,OAAO,CAAC;AACzC,IAAA,OAAO,SAAS;AAClB;;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../../src/components/Text/utils.ts"],"sourcesContent":["import type { ElementType } from 'react';\nimport { DeprecatedTextVariants, TextVariant, ValidTextTag } from './types';\n\nconst componentMap: { [key in TextVariant | DeprecatedTextVariants]?: string } = {\n  inputLabel: 'label',\n  inputLabelSmall: 'label',\n  headingSmall: 'h3',\n  headingMedium: 'h3',\n  headingLarge: 'h2',\n  headingXL: 'h1',\n  headingXXL: 'h1',\n  // Deprecated, but quickfix for A11y.\n  button: 'button',\n  buttonSmall: 'button',\n};\n\nexport const getComponentOverride = (\n  as?: ElementType,\n  variant?: TextVariant | DeprecatedTextVariants,\n): ElementType => {\n  if (as) return as;\n  if (variant && componentMap[variant]) return componentMap[variant] as ValidTextTag;\n  return 'span';\n};\n"],"names":[],"mappings":";;AAGA,MAAM,YAAY,GAA+D;AAC/E,IAAA,UAAU,EAAE,OAAO;AACnB,IAAA,eAAe,EAAE,OAAO;AACxB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,aAAa,EAAE,IAAI;AACnB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,SAAS,EAAE,IAAI;AACf,IAAA,UAAU,EAAE,IAAI;;AAEhB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,WAAW,EAAE,QAAQ;CACtB;MAEY,oBAAoB,GAAG,CAClC,EAAgB,EAChB,OAA8C,KAC/B;AACf,IAAA,IAAI,EAAE;AAAE,QAAA,OAAO,EAAE;AACjB,IAAA,IAAI,OAAO,IAAI,YAAY,CAAC,OAAO,CAAC;AAAE,QAAA,OAAO,YAAY,CAAC,OAAO,CAAiB;AAClF,IAAA,OAAO,MAAM;AACf;;;;"}

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

@@ -1,2 +1,3 @@
-import { TextVariant, DeprecatedTextVariants, ValidTextTag } from './types';
-export declare const getComponentOverride: (as: ValidTextTag | undefined, variant: TextVariant | DeprecatedTextVariants | undefined) => string | undefined;
+import type { ElementType } from 'react';
+import { DeprecatedTextVariants, TextVariant } from './types';
+export declare const getComponentOverride: (as?: ElementType, variant?: TextVariant | DeprecatedTextVariants) => ElementType;

package/dist/components/Text/utils.js

@@ -13,9 +13,9 @@ const componentMap = {
 const getComponentOverride = (as, variant) => {
     if (as)
         return as;
-    if (variant)
+    if (variant && componentMap[variant])
         return componentMap[variant];
-    return undefined;
+    return 'span';
 };
 
 export { getComponentOverride };

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/Text/utils.ts"],"sourcesContent":["import { TextVariant, DeprecatedTextVariants, ValidTextTag } from './types';\n\nconst componentMap: { [key in TextVariant | DeprecatedTextVariants]?: string } = {\n  inputLabel: 'label',\n  inputLabelSmall: 'label',\n  headingSmall: 'h3',\n  headingMedium: 'h3',\n  headingLarge: 'h2',\n  headingXL: 'h1',\n  headingXXL: 'h1',\n  // Deprecated, but quickfix for A11y.\n  button: 'button',\n  buttonSmall: 'button',\n};\n\nexport const getComponentOverride = (\n  as: ValidTextTag | undefined,\n  variant: TextVariant | DeprecatedTextVariants | undefined,\n) => {\n  if (as) return as;\n  if (variant) return componentMap[variant];\n  return undefined;\n};\n"],"names":[],"mappings":"AAEA,MAAM,YAAY,GAA+D;AAC/E,IAAA,UAAU,EAAE,OAAO;AACnB,IAAA,eAAe,EAAE,OAAO;AACxB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,aAAa,EAAE,IAAI;AACnB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,SAAS,EAAE,IAAI;AACf,IAAA,UAAU,EAAE,IAAI;;AAEhB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,WAAW,EAAE,QAAQ;CACtB;MAEY,oBAAoB,GAAG,CAClC,EAA4B,EAC5B,OAAyD,KACvD;AACF,IAAA,IAAI,EAAE;AAAE,QAAA,OAAO,EAAE;AACjB,IAAA,IAAI,OAAO;AAAE,QAAA,OAAO,YAAY,CAAC,OAAO,CAAC;AACzC,IAAA,OAAO,SAAS;AAClB;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/Text/utils.ts"],"sourcesContent":["import type { ElementType } from 'react';\nimport { DeprecatedTextVariants, TextVariant, ValidTextTag } from './types';\n\nconst componentMap: { [key in TextVariant | DeprecatedTextVariants]?: string } = {\n  inputLabel: 'label',\n  inputLabelSmall: 'label',\n  headingSmall: 'h3',\n  headingMedium: 'h3',\n  headingLarge: 'h2',\n  headingXL: 'h1',\n  headingXXL: 'h1',\n  // Deprecated, but quickfix for A11y.\n  button: 'button',\n  buttonSmall: 'button',\n};\n\nexport const getComponentOverride = (\n  as?: ElementType,\n  variant?: TextVariant | DeprecatedTextVariants,\n): ElementType => {\n  if (as) return as;\n  if (variant && componentMap[variant]) return componentMap[variant] as ValidTextTag;\n  return 'span';\n};\n"],"names":[],"mappings":"AAGA,MAAM,YAAY,GAA+D;AAC/E,IAAA,UAAU,EAAE,OAAO;AACnB,IAAA,eAAe,EAAE,OAAO;AACxB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,aAAa,EAAE,IAAI;AACnB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,SAAS,EAAE,IAAI;AACf,IAAA,UAAU,EAAE,IAAI;;AAEhB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,WAAW,EAAE,QAAQ;CACtB;MAEY,oBAAoB,GAAG,CAClC,EAAgB,EAChB,OAA8C,KAC/B;AACf,IAAA,IAAI,EAAE;AAAE,QAAA,OAAO,EAAE;AACjB,IAAA,IAAI,OAAO,IAAI,YAAY,CAAC,OAAO,CAAC;AAAE,QAAA,OAAO,YAAY,CAAC,OAAO,CAAiB;AAClF,IAAA,OAAO,MAAM;AACf;;;;"}