@veeqo/ui 14.5.0 → 14.7.0

package/dist/components/DimensionsInput/DimensionsInput.d.ts

@@ -296,6 +296,7 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     type?: import("../TextField").TextFieldType | undefined;
     onChange?: ((value: string) => void) | undefined;
     hasError?: boolean | undefined;
+    disabledMessage?: React.ReactNode;
     size?: "base" | "sm" | undefined;
     multiline?: boolean | undefined;
 } & {

package/dist/components/FeatureBanner/FeatureBanner.cjs

@@ -1,34 +1,35 @@
 'use strict';
 
 var React = require('react');
+var withTokens = require('../../hoc/withTokens/withTokens.cjs');
+var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
-var withTokens = require('../../hoc/withTokens/withTokens.cjs');
-var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
+var Action = require('../Action/Action.cjs');
 var FlexCol = require('../Flex/FlexCol/FlexCol.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
 var Text = require('../Text/Text.cjs');
-var Button = require('../Button/Button.cjs');
-var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
 var FeatureBanner_module = require('./FeatureBanner.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const FeatureBannerBase = ({ variant = 'primary', size = 'default', layout = 'vertical', title, contentSlot, iconSlot, actions, onClose, className, ...divProps }) => {
-    return (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", alignItems: "flex-start", justifyContent: "space-between", gap: "none", className: buildClassnames.buildClassnames([
+const FeatureBannerBase = ({ variant = 'primary', size = 'base', direction = 'vertical', title, contentSlot, iconSlot, actions, onClose, className, ...divProps }) => {
+    return (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", alignItems: "flex-start", gap: "none", justifyContent: "space-between", className: buildClassnames.buildClassnames([
             FeatureBanner_module.featureBanner,
             FeatureBanner_module[`${size}-size`],
             FeatureBanner_module[`${variant}-variant`],
+            FeatureBanner_module[`${direction}-layout`],
             className,
         ]), role: "region", "aria-label": title, ...divProps },
         iconSlot && React__default.default.createElement("div", { className: FeatureBanner_module.iconBackground }, iconSlot),
-        React__default.default.createElement(FlexCol.FlexCol, { gap: "sm", flexGrow: "1", className: FeatureBanner_module[layout] },
+        React__default.default.createElement(FlexCol.FlexCol, { gap: size === 'base' ? 'base' : '3', flexGrow: "1", className: FeatureBanner_module[direction] },
             React__default.default.createElement(FlexCol.FlexCol, { gap: "xs" },
                 React__default.default.createElement(Text.Text, { variant: "headingSmall" }, title),
-                contentSlot && React__default.default.createElement(FlexCol.FlexCol, { gap: size === 'default' ? 'sm' : 'xs' }, contentSlot)),
-            actions && actions.length > 0 && (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "sm" }, actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (React__default.default.createElement(Button.Button, { key: label, size: "sm", variant: actionVariant, ...actionProps }, label)))))),
-        onClose && (React__default.default.createElement(Button.Button, { variant: "flat", size: "sm", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), onClick: onClose, "aria-label": "Close banner", className: layout === 'horizontal' ? FeatureBanner_module.centerButton : undefined }))));
+                contentSlot && React__default.default.createElement(FlexCol.FlexCol, { gap: "sm" }, contentSlot)),
+            actions && actions.length > 0 && (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "sm", className: FeatureBanner_module[`actions-${direction}`] }, actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (React__default.default.createElement(Action.Action, { key: label, size: "sm", variant: actionVariant, ...actionProps }, label)))))),
+        onClose && (React__default.default.createElement(Action.Action, { variant: "flat", size: "sm", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), onClick: onClose, "aria-label": "Close banner", className: direction === 'horizontal' ? FeatureBanner_module.centerButton : undefined }))));
 };
 const FeatureBanner = withTokens.withTokens(FeatureBannerBase, 'default');
 

package/dist/components/FeatureBanner/FeatureBanner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureBanner.cjs","sources":["../../../src/components/FeatureBanner/FeatureBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { withTokens } from '../../hoc/withTokens';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { CrossIcon } from '../../icons';\nimport { FeatureBannerProps } from './types';\n\nimport styles from './FeatureBanner.module.scss';\n\nconst FeatureBannerBase = ({\n  variant = 'primary',\n  size = 'default',\n  layout = 'vertical',\n  title,\n  contentSlot,\n  iconSlot,\n  actions,\n  onClose,\n  className,\n  ...divProps\n}: FeatureBannerProps) => {\n  return (\n    <FlexRow\n      flexWrap=\"nowrap\"\n      alignItems=\"flex-start\"\n      justifyContent=\"space-between\"\n      gap=\"none\"\n      className={buildClassnames([\n        styles.featureBanner,\n        styles[`${size}-size`],\n        styles[`${variant}-variant`],\n        className,\n      ])}\n      role=\"region\"\n      aria-label={title}\n      {...divProps}\n    >\n      {iconSlot && <div className={styles.iconBackground}>{iconSlot}</div>}\n\n      <FlexCol gap=\"sm\" flexGrow=\"1\" className={styles[layout]}>\n        <FlexCol gap=\"xs\">\n          <Text variant=\"headingSmall\">{title}</Text>\n\n          {contentSlot && <FlexCol gap={size === 'default' ? 'sm' : 'xs'}>{contentSlot}</FlexCol>}\n        </FlexCol>\n\n        {actions && actions.length > 0 && (\n          <FlexRow flexWrap=\"nowrap\" gap=\"sm\">\n            {actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (\n              <Button key={label} size=\"sm\" variant={actionVariant} {...actionProps}>\n                {label}\n              </Button>\n            ))}\n          </FlexRow>\n        )}\n      </FlexCol>\n\n      {onClose && (\n        <Button\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClose}\n          aria-label=\"Close banner\"\n          className={layout === 'horizontal' ? styles.centerButton : undefined}\n        />\n      )}\n    </FlexRow>\n  );\n};\n\nexport const FeatureBanner = withTokens(FeatureBannerBase, 'default');\n"],"names":["React","FlexRow","buildClassnames","styles","FlexCol","Text","Button","CrossIcon","withTokens"],"mappings":";;;;;;;;;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,UAAU,EACnB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACQ,KAAI;IACvB,QACEA,qCAACC,eAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAC,YAAY,EACvB,cAAc,EAAC,eAAe,EAC9B,GAAG,EAAC,MAAM,EACV,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,oBAAM,CAAC,aAAa;AACpB,YAAAA,oBAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAAA,oBAAM,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;YAC5B,SAAS;AACV,SAAA,CAAC,EACF,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,KAAK,KACb,QAAQ,EAAA;QAEX,QAAQ,IAAIH,8CAAK,SAAS,EAAEG,oBAAM,CAAC,cAAc,EAAA,EAAG,QAAQ,CAAO;AAEpE,QAAAH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAED,oBAAM,CAAC,MAAM,CAAC,EAAA;AACtD,YAAAH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,SAAI,EAAA,EAAC,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;gBAE1C,WAAW,IAAIL,qCAACI,eAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,EAAA,EAAG,WAAW,CAAW,CAC/E;AAET,YAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,KAC5BJ,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAA,EAChC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,EAAE,GAAG,WAAW,EAAE,MACzED,sBAAA,CAAA,aAAA,CAACM,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,aAAa,EAAA,GAAM,WAAW,EAAA,EAClE,KAAK,CACC,CACV,CAAC,CACM,CACX,CACO;QAET,OAAO,KACNN,sBAAA,CAAA,aAAA,CAACM,aAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEN,sBAAA,CAAA,aAAA,CAACO,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,gBACL,cAAc,EACzB,SAAS,EAAE,MAAM,KAAK,YAAY,GAAGJ,oBAAM,CAAC,YAAY,GAAG,SAAS,GACpE,CACH,CACO;AAEd,CAAC;AAEM,MAAM,aAAa,GAAGK,qBAAU,CAAC,iBAAiB,EAAE,SAAS;;;;"}
+{"version":3,"file":"FeatureBanner.cjs","sources":["../../../src/components/FeatureBanner/FeatureBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withTokens } from '../../hoc/withTokens';\nimport { CrossIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\nimport { Action } from '../Action';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Text } from '../Text';\nimport { FeatureBannerProps } from './types';\n\nimport styles from './FeatureBanner.module.scss';\n\nconst FeatureBannerBase = ({\n  variant = 'primary',\n  size = 'base',\n  direction = 'vertical',\n  title,\n  contentSlot,\n  iconSlot,\n  actions,\n  onClose,\n  className,\n  ...divProps\n}: FeatureBannerProps) => {\n  return (\n    <FlexRow\n      flexWrap=\"nowrap\"\n      alignItems=\"flex-start\"\n      gap=\"none\"\n      justifyContent=\"space-between\"\n      className={buildClassnames([\n        styles.featureBanner,\n        styles[`${size}-size`],\n        styles[`${variant}-variant`],\n        styles[`${direction}-layout`],\n        className,\n      ])}\n      role=\"region\"\n      aria-label={title}\n      {...divProps}\n    >\n      {iconSlot && <div className={styles.iconBackground}>{iconSlot}</div>}\n\n      <FlexCol gap={size === 'base' ? 'base' : '3'} flexGrow=\"1\" className={styles[direction]}>\n        <FlexCol gap=\"xs\">\n          <Text variant=\"headingSmall\">{title}</Text>\n\n          {contentSlot && <FlexCol gap=\"sm\">{contentSlot}</FlexCol>}\n        </FlexCol>\n\n        {actions && actions.length > 0 && (\n          <FlexRow flexWrap=\"nowrap\" gap=\"sm\" className={styles[`actions-${direction}`]}>\n            {actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (\n              <Action key={label} size=\"sm\" variant={actionVariant} {...actionProps}>\n                {label}\n              </Action>\n            ))}\n          </FlexRow>\n        )}\n      </FlexCol>\n\n      {onClose && (\n        <Action\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClose}\n          aria-label=\"Close banner\"\n          className={direction === 'horizontal' ? styles.centerButton : undefined}\n        />\n      )}\n    </FlexRow>\n  );\n};\n\nexport const FeatureBanner = withTokens(FeatureBannerBase, 'default');\n"],"names":["React","FlexRow","buildClassnames","styles","FlexCol","Text","Action","CrossIcon","withTokens"],"mappings":";;;;;;;;;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,SAAS,GAAG,UAAU,EACtB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACQ,KAAI;IACvB,QACEA,qCAACC,eAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAC,YAAY,EACvB,GAAG,EAAC,MAAM,EACV,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,oBAAM,CAAC,aAAa;AACpB,YAAAA,oBAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAAA,oBAAM,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;AAC5B,YAAAA,oBAAM,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,CAAC;YAC7B,SAAS;AACV,SAAA,CAAC,EACF,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,KAAK,KACb,QAAQ,EAAA;QAEX,QAAQ,IAAIH,8CAAK,SAAS,EAAEG,oBAAM,CAAC,cAAc,EAAA,EAAG,QAAQ,CAAO;QAEpEH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAED,oBAAM,CAAC,SAAS,CAAC,EAAA;AACrF,YAAAH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,SAAI,EAAA,EAAC,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;gBAE1C,WAAW,IAAIL,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA,EAAE,WAAW,CAAW,CACjD;AAET,YAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,KAC5BJ,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAEE,oBAAM,CAAC,WAAW,SAAS,CAAA,CAAE,CAAC,EAAA,EAC1E,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,EAAE,GAAG,WAAW,EAAE,MACzEH,sBAAA,CAAA,aAAA,CAACM,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,aAAa,EAAA,GAAM,WAAW,EAAA,EAClE,KAAK,CACC,CACV,CAAC,CACM,CACX,CACO;QAET,OAAO,KACNN,sBAAA,CAAA,aAAA,CAACM,aAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEN,sBAAA,CAAA,aAAA,CAACO,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,gBACL,cAAc,EACzB,SAAS,EAAE,SAAS,KAAK,YAAY,GAAGJ,oBAAM,CAAC,YAAY,GAAG,SAAS,GACvE,CACH,CACO;AAEd,CAAC;AAEM,MAAM,aAAa,GAAGK,qBAAU,CAAC,iBAAiB,EAAE,SAAS;;;;"}

package/dist/components/FeatureBanner/FeatureBanner.d.ts

@@ -2,10 +2,12 @@ import React from 'react';
 export declare const FeatureBanner: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & import("../../hoc/withTokens").WithTokensProps & {
     variant?: import("./types").FeatureBannerVariant | undefined;
     size?: import("./types").FeatureBannerSize | undefined;
-    layout?: import("./types").FeatureBannerLayout | undefined;
+    direction?: import("./types").FeatureBannerDirection | undefined;
     title: string;
     contentSlot?: React.ReactNode;
     iconSlot?: React.ReactNode;
-    actions?: import("..").ModalAction[] | undefined;
+    actions?: ((Omit<import("../Action").ActionProps<"button">, "children" | "size"> | Omit<import("../Action").ActionProps<"a">, "children" | "size">) & {
+        label: string;
+    })[] | undefined;
     onClose?: (() => void) | undefined;
 } & React.RefAttributes<never>>;

package/dist/components/FeatureBanner/FeatureBanner.js

@@ -1,28 +1,29 @@
 import React__default from 'react';
+import { withTokens } from '../../hoc/withTokens/withTokens.js';
+import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
-import { withTokens } from '../../hoc/withTokens/withTokens.js';
-import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
+import { Action } from '../Action/Action.js';
 import { FlexCol } from '../Flex/FlexCol/FlexCol.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
 import { Text } from '../Text/Text.js';
-import { Button } from '../Button/Button.js';
-import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
 import styles from './FeatureBanner.module.scss.js';
 
-const FeatureBannerBase = ({ variant = 'primary', size = 'default', layout = 'vertical', title, contentSlot, iconSlot, actions, onClose, className, ...divProps }) => {
-    return (React__default.createElement(FlexRow, { flexWrap: "nowrap", alignItems: "flex-start", justifyContent: "space-between", gap: "none", className: buildClassnames([
+const FeatureBannerBase = ({ variant = 'primary', size = 'base', direction = 'vertical', title, contentSlot, iconSlot, actions, onClose, className, ...divProps }) => {
+    return (React__default.createElement(FlexRow, { flexWrap: "nowrap", alignItems: "flex-start", gap: "none", justifyContent: "space-between", className: buildClassnames([
             styles.featureBanner,
             styles[`${size}-size`],
             styles[`${variant}-variant`],
+            styles[`${direction}-layout`],
             className,
         ]), role: "region", "aria-label": title, ...divProps },
         iconSlot && React__default.createElement("div", { className: styles.iconBackground }, iconSlot),
-        React__default.createElement(FlexCol, { gap: "sm", flexGrow: "1", className: styles[layout] },
+        React__default.createElement(FlexCol, { gap: size === 'base' ? 'base' : '3', flexGrow: "1", className: styles[direction] },
             React__default.createElement(FlexCol, { gap: "xs" },
                 React__default.createElement(Text, { variant: "headingSmall" }, title),
-                contentSlot && React__default.createElement(FlexCol, { gap: size === 'default' ? 'sm' : 'xs' }, contentSlot)),
-            actions && actions.length > 0 && (React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "sm" }, actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (React__default.createElement(Button, { key: label, size: "sm", variant: actionVariant, ...actionProps }, label)))))),
-        onClose && (React__default.createElement(Button, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClose, "aria-label": "Close banner", className: layout === 'horizontal' ? styles.centerButton : undefined }))));
+                contentSlot && React__default.createElement(FlexCol, { gap: "sm" }, contentSlot)),
+            actions && actions.length > 0 && (React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "sm", className: styles[`actions-${direction}`] }, actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (React__default.createElement(Action, { key: label, size: "sm", variant: actionVariant, ...actionProps }, label)))))),
+        onClose && (React__default.createElement(Action, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClose, "aria-label": "Close banner", className: direction === 'horizontal' ? styles.centerButton : undefined }))));
 };
 const FeatureBanner = withTokens(FeatureBannerBase, 'default');
 

package/dist/components/FeatureBanner/FeatureBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureBanner.js","sources":["../../../src/components/FeatureBanner/FeatureBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { withTokens } from '../../hoc/withTokens';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { CrossIcon } from '../../icons';\nimport { FeatureBannerProps } from './types';\n\nimport styles from './FeatureBanner.module.scss';\n\nconst FeatureBannerBase = ({\n  variant = 'primary',\n  size = 'default',\n  layout = 'vertical',\n  title,\n  contentSlot,\n  iconSlot,\n  actions,\n  onClose,\n  className,\n  ...divProps\n}: FeatureBannerProps) => {\n  return (\n    <FlexRow\n      flexWrap=\"nowrap\"\n      alignItems=\"flex-start\"\n      justifyContent=\"space-between\"\n      gap=\"none\"\n      className={buildClassnames([\n        styles.featureBanner,\n        styles[`${size}-size`],\n        styles[`${variant}-variant`],\n        className,\n      ])}\n      role=\"region\"\n      aria-label={title}\n      {...divProps}\n    >\n      {iconSlot && <div className={styles.iconBackground}>{iconSlot}</div>}\n\n      <FlexCol gap=\"sm\" flexGrow=\"1\" className={styles[layout]}>\n        <FlexCol gap=\"xs\">\n          <Text variant=\"headingSmall\">{title}</Text>\n\n          {contentSlot && <FlexCol gap={size === 'default' ? 'sm' : 'xs'}>{contentSlot}</FlexCol>}\n        </FlexCol>\n\n        {actions && actions.length > 0 && (\n          <FlexRow flexWrap=\"nowrap\" gap=\"sm\">\n            {actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (\n              <Button key={label} size=\"sm\" variant={actionVariant} {...actionProps}>\n                {label}\n              </Button>\n            ))}\n          </FlexRow>\n        )}\n      </FlexCol>\n\n      {onClose && (\n        <Button\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClose}\n          aria-label=\"Close banner\"\n          className={layout === 'horizontal' ? styles.centerButton : undefined}\n        />\n      )}\n    </FlexRow>\n  );\n};\n\nexport const FeatureBanner = withTokens(FeatureBannerBase, 'default');\n"],"names":["React"],"mappings":";;;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,UAAU,EACnB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACQ,KAAI;IACvB,QACEA,6BAAC,OAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAC,YAAY,EACvB,cAAc,EAAC,eAAe,EAC9B,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,aAAa;AACpB,YAAA,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAA,MAAM,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;YAC5B,SAAS;AACV,SAAA,CAAC,EACF,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,KAAK,KACb,QAAQ,EAAA;QAEX,QAAQ,IAAIA,sCAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA,EAAG,QAAQ,CAAO;AAEpE,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,EAAA;AACtD,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;gBAE1C,WAAW,IAAIA,6BAAC,OAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,EAAA,EAAG,WAAW,CAAW,CAC/E;AAET,YAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,KAC5BA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAA,EAChC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,EAAE,GAAG,WAAW,EAAE,MACzEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,aAAa,EAAA,GAAM,WAAW,EAAA,EAClE,KAAK,CACC,CACV,CAAC,CACM,CACX,CACO;QAET,OAAO,KACNA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,gBACL,cAAc,EACzB,SAAS,EAAE,MAAM,KAAK,YAAY,GAAG,MAAM,CAAC,YAAY,GAAG,SAAS,GACpE,CACH,CACO;AAEd,CAAC;AAEM,MAAM,aAAa,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS;;;;"}
+{"version":3,"file":"FeatureBanner.js","sources":["../../../src/components/FeatureBanner/FeatureBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withTokens } from '../../hoc/withTokens';\nimport { CrossIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\nimport { Action } from '../Action';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Text } from '../Text';\nimport { FeatureBannerProps } from './types';\n\nimport styles from './FeatureBanner.module.scss';\n\nconst FeatureBannerBase = ({\n  variant = 'primary',\n  size = 'base',\n  direction = 'vertical',\n  title,\n  contentSlot,\n  iconSlot,\n  actions,\n  onClose,\n  className,\n  ...divProps\n}: FeatureBannerProps) => {\n  return (\n    <FlexRow\n      flexWrap=\"nowrap\"\n      alignItems=\"flex-start\"\n      gap=\"none\"\n      justifyContent=\"space-between\"\n      className={buildClassnames([\n        styles.featureBanner,\n        styles[`${size}-size`],\n        styles[`${variant}-variant`],\n        styles[`${direction}-layout`],\n        className,\n      ])}\n      role=\"region\"\n      aria-label={title}\n      {...divProps}\n    >\n      {iconSlot && <div className={styles.iconBackground}>{iconSlot}</div>}\n\n      <FlexCol gap={size === 'base' ? 'base' : '3'} flexGrow=\"1\" className={styles[direction]}>\n        <FlexCol gap=\"xs\">\n          <Text variant=\"headingSmall\">{title}</Text>\n\n          {contentSlot && <FlexCol gap=\"sm\">{contentSlot}</FlexCol>}\n        </FlexCol>\n\n        {actions && actions.length > 0 && (\n          <FlexRow flexWrap=\"nowrap\" gap=\"sm\" className={styles[`actions-${direction}`]}>\n            {actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (\n              <Action key={label} size=\"sm\" variant={actionVariant} {...actionProps}>\n                {label}\n              </Action>\n            ))}\n          </FlexRow>\n        )}\n      </FlexCol>\n\n      {onClose && (\n        <Action\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClose}\n          aria-label=\"Close banner\"\n          className={direction === 'horizontal' ? styles.centerButton : undefined}\n        />\n      )}\n    </FlexRow>\n  );\n};\n\nexport const FeatureBanner = withTokens(FeatureBannerBase, 'default');\n"],"names":["React"],"mappings":";;;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,SAAS,GAAG,UAAU,EACtB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACQ,KAAI;IACvB,QACEA,6BAAC,OAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAC,YAAY,EACvB,GAAG,EAAC,MAAM,EACV,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,aAAa;AACpB,YAAA,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAA,MAAM,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;AAC5B,YAAA,MAAM,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,CAAC;YAC7B,SAAS;AACV,SAAA,CAAC,EACF,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,KAAK,KACb,QAAQ,EAAA;QAEX,QAAQ,IAAIA,sCAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA,EAAG,QAAQ,CAAO;QAEpEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EAAA;AACrF,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;gBAE1C,WAAW,IAAIA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA,EAAE,WAAW,CAAW,CACjD;AAET,YAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,KAC5BA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,SAAS,CAAA,CAAE,CAAC,EAAA,EAC1E,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,EAAE,GAAG,WAAW,EAAE,MACzEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,aAAa,EAAA,GAAM,WAAW,EAAA,EAClE,KAAK,CACC,CACV,CAAC,CACM,CACX,CACO;QAET,OAAO,KACNA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,gBACL,cAAc,EACzB,SAAS,EAAE,SAAS,KAAK,YAAY,GAAG,MAAM,CAAC,YAAY,GAAG,SAAS,GACvE,CACH,CACO;AAEd,CAAC;AAEM,MAAM,aAAa,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS;;;;"}

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

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("/* Sizes */\n._default-size_1lkzx_2 {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-base);\n  --banner-gap: var(--sizes-base);\n}\n\n._sm-size_1lkzx_9 {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n}\n\n._xs-size_1lkzx_16 {\n  --banner-padding: var(--sizes-sm);\n  --content-padding: 8px 8px;\n  --icon-size: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n}\n\n/* Variants */\n._primary-variant_1lkzx_24 {\n  --feature-banner-bg: var(--theme-surface);\n  --icon-bg-color: var(--theme-primary);\n  --icon-color: var(--theme-on-primary);\n}\n\n._secondary-variant_1lkzx_30 {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-primary);\n  border: none;\n}\n\n._featureBanner_1lkzx_37 {\n  border: var(--sizes-line) solid var(--theme-surface-alt);\n  border-radius: var(--radius-base);\n  background-color: var(--feature-banner-bg);\n  padding: var(--banner-padding);\n}\n\n/* Layout */\n._vertical_1lkzx_45 {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n  gap: var(--banner-gap);\n}\n\n._horizontal_1lkzx_52 {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-inline: var(--content-padding);\n  gap: var(--banner-gap);\n}\n\n/* Icon background */\n._iconBackground_1lkzx_61 {\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n  padding: var(--sizes-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n._iconBackground_1lkzx_61 svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}\n\n._centerButton_1lkzx_76 {\n  align-self: center;\n}");
-var styles = {"default-size":"_default-size_1lkzx_2","sm-size":"_sm-size_1lkzx_9","xs-size":"_xs-size_1lkzx_16","primary-variant":"_primary-variant_1lkzx_24","secondary-variant":"_secondary-variant_1lkzx_30","featureBanner":"_featureBanner_1lkzx_37","vertical":"_vertical_1lkzx_45","horizontal":"_horizontal_1lkzx_52","iconBackground":"_iconBackground_1lkzx_61","centerButton":"_centerButton_1lkzx_76"};
+___$insertStyle("._base-size_i33v4_1 {\n  --banner-padding: var(--sizes-base);\n  --banner-gap: var(--sizes-base);\n  --horizontal-gap: var(--sizes-none);\n  --horizontal-padding-left: var(--sizes-base);\n  --horizontal-action-padding: var(--sizes-sm);\n  --icon-size: var(--sizes-base);\n}\n\n._sm-size_i33v4_10 {\n  --banner-padding: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n  --horizontal-gap: var(--sizes-none);\n  --horizontal-padding-left: var(--sizes-3);\n  --horizontal-action-padding: var(--sizes-sm);\n  --icon-size: var(--sizes-3);\n}\n\n._xs-size_i33v4_19 {\n  --banner-padding: var(--sizes-sm);\n  --banner-gap: var(--sizes-2);\n  --horizontal-gap: var(--sizes-2);\n  --horizontal-padding-left: var(--sizes-none);\n  --horizontal-action-padding: var(--sizes-none);\n  --icon-size: var(--sizes-3);\n}\n\n._primary-variant_i33v4_28 {\n  --feature-banner-bg: var(--theme-surface);\n  --icon-bg-color: var(--theme-primary);\n  --icon-color: var(--theme-on-primary);\n}\n\n._secondary-variant_i33v4_34 {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-primary);\n}\n\n._featureBanner_i33v4_40 {\n  border: var(--sizes-line) solid var(--theme-surface-alt);\n  border-radius: var(--radius-base);\n  background-color: var(--feature-banner-bg);\n  padding: var(--banner-padding);\n}\n._featureBanner_i33v4_40._vertical-layout_i33v4_46 {\n  gap: var(--banner-gap);\n}\n._featureBanner_i33v4_40._horizontal-layout_i33v4_49 {\n  gap: var(--horizontal-gap);\n}\n\n._featureBanner_i33v4_40 ._vertical_i33v4_46 {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n._featureBanner_i33v4_40 ._horizontal_i33v4_49 {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-left: var(--horizontal-padding-left);\n}\n\n._actions-vertical_i33v4_65 {\n  padding: var(--sizes-none);\n}\n\n._actions-horizontal_i33v4_69 {\n  padding: var(--horizontal-action-padding);\n}\n\n._iconBackground_i33v4_73 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: var(--sizes-xs);\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n}\n._iconBackground_i33v4_73 svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}\n\n._centerButton_i33v4_88 {\n  align-self: center;\n}");
+var styles = {"base-size":"_base-size_i33v4_1","sm-size":"_sm-size_i33v4_10","xs-size":"_xs-size_i33v4_19","primary-variant":"_primary-variant_i33v4_28","secondary-variant":"_secondary-variant_i33v4_34","featureBanner":"_featureBanner_i33v4_40","vertical-layout":"_vertical-layout_i33v4_46","horizontal-layout":"_horizontal-layout_i33v4_49","vertical":"_vertical_i33v4_46","horizontal":"_horizontal_i33v4_49","actions-vertical":"_actions-vertical_i33v4_65","actions-horizontal":"_actions-horizontal_i33v4_69","iconBackground":"_iconBackground_i33v4_73","centerButton":"_centerButton_i33v4_88"};
 
 module.exports = styles;
 //# sourceMappingURL=FeatureBanner.module.scss.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeatureBanner.module.scss.cjs","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":["/* Sizes */\n.default-size {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-base);\n  --banner-gap: var(--sizes-base);\n}\n\n.sm-size {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n}\n\n.xs-size {\n  --banner-padding: var(--sizes-sm);\n  --content-padding: 8px 8px;\n  --icon-size: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n}\n\n/* Variants */\n.primary-variant {\n  --feature-banner-bg: var(--theme-surface);\n  --icon-bg-color: var(--theme-primary);\n  --icon-color: var(--theme-on-primary);\n}\n\n.secondary-variant {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-primary);\n  border: none;\n}\n\n.featureBanner {\n  border: var(--sizes-line) solid var(--theme-surface-alt);\n  border-radius: var(--radius-base);\n  background-color: var(--feature-banner-bg);\n  padding: var(--banner-padding);\n}\n\n/* Layout */\n.vertical {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n  gap: var(--banner-gap);\n}\n\n.horizontal {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-inline: var(--content-padding);\n  gap: var(--banner-gap);\n}\n\n/* Icon background */\n.iconBackground {\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n  padding: var(--sizes-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n\n  & svg {\n    width: var(--icon-size);\n    height: var(--icon-size);\n    color: var(--icon-color);\n  }\n}\n\n.centerButton {\n  align-self: center;\n}\n"],"names":[],"mappings":";;;;AACA,eAAA,CAAA,m1DAAA;AACE,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}
+{"version":3,"file":"FeatureBanner.module.scss.cjs","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":[".base-size {\n  --banner-padding: var(--sizes-base);\n  --banner-gap: var(--sizes-base);\n  --horizontal-gap: var(--sizes-none);\n  --horizontal-padding-left: var(--sizes-base);\n  --horizontal-action-padding: var(--sizes-sm);\n  --icon-size: var(--sizes-base);\n}\n\n.sm-size {\n  --banner-padding: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n  --horizontal-gap: var(--sizes-none);\n  --horizontal-padding-left: var(--sizes-3);\n  --horizontal-action-padding: var(--sizes-sm);\n  --icon-size: var(--sizes-3);\n}\n\n.xs-size {\n  --banner-padding: var(--sizes-sm);\n  --banner-gap: var(--sizes-2);\n  --horizontal-gap: var(--sizes-2);\n  --horizontal-padding-left: var(--sizes-none);\n  --horizontal-action-padding: var(--sizes-none);\n  --icon-size: var(--sizes-3);\n}\n\n.primary-variant {\n  --feature-banner-bg: var(--theme-surface);\n  --icon-bg-color: var(--theme-primary);\n  --icon-color: var(--theme-on-primary);\n}\n\n.secondary-variant {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-primary);\n}\n\n.featureBanner {\n  border: var(--sizes-line) solid var(--theme-surface-alt);\n  border-radius: var(--radius-base);\n  background-color: var(--feature-banner-bg);\n  padding: var(--banner-padding);\n\n  &.vertical-layout {\n    gap: var(--banner-gap);\n  }\n\n  &.horizontal-layout {\n    gap: var(--horizontal-gap);\n  }\n}\n\n.featureBanner .vertical {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.featureBanner .horizontal {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-left: var(--horizontal-padding-left);\n}\n\n.actions-vertical {\n  padding: var(--sizes-none);\n}\n\n.actions-horizontal {\n  padding: var(--horizontal-action-padding);\n}\n\n.iconBackground {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: var(--sizes-xs);\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n\n  & svg {\n    width: var(--icon-size);\n    height: var(--icon-size);\n    color: var(--icon-color);\n  }\n}\n\n.centerButton {\n  align-self: center;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,q1EAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("/* Sizes */\n._default-size_1lkzx_2 {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-base);\n  --banner-gap: var(--sizes-base);\n}\n\n._sm-size_1lkzx_9 {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n}\n\n._xs-size_1lkzx_16 {\n  --banner-padding: var(--sizes-sm);\n  --content-padding: 8px 8px;\n  --icon-size: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n}\n\n/* Variants */\n._primary-variant_1lkzx_24 {\n  --feature-banner-bg: var(--theme-surface);\n  --icon-bg-color: var(--theme-primary);\n  --icon-color: var(--theme-on-primary);\n}\n\n._secondary-variant_1lkzx_30 {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-primary);\n  border: none;\n}\n\n._featureBanner_1lkzx_37 {\n  border: var(--sizes-line) solid var(--theme-surface-alt);\n  border-radius: var(--radius-base);\n  background-color: var(--feature-banner-bg);\n  padding: var(--banner-padding);\n}\n\n/* Layout */\n._vertical_1lkzx_45 {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n  gap: var(--banner-gap);\n}\n\n._horizontal_1lkzx_52 {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-inline: var(--content-padding);\n  gap: var(--banner-gap);\n}\n\n/* Icon background */\n._iconBackground_1lkzx_61 {\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n  padding: var(--sizes-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n._iconBackground_1lkzx_61 svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}\n\n._centerButton_1lkzx_76 {\n  align-self: center;\n}");
-var styles = {"default-size":"_default-size_1lkzx_2","sm-size":"_sm-size_1lkzx_9","xs-size":"_xs-size_1lkzx_16","primary-variant":"_primary-variant_1lkzx_24","secondary-variant":"_secondary-variant_1lkzx_30","featureBanner":"_featureBanner_1lkzx_37","vertical":"_vertical_1lkzx_45","horizontal":"_horizontal_1lkzx_52","iconBackground":"_iconBackground_1lkzx_61","centerButton":"_centerButton_1lkzx_76"};
+insertStyle("._base-size_i33v4_1 {\n  --banner-padding: var(--sizes-base);\n  --banner-gap: var(--sizes-base);\n  --horizontal-gap: var(--sizes-none);\n  --horizontal-padding-left: var(--sizes-base);\n  --horizontal-action-padding: var(--sizes-sm);\n  --icon-size: var(--sizes-base);\n}\n\n._sm-size_i33v4_10 {\n  --banner-padding: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n  --horizontal-gap: var(--sizes-none);\n  --horizontal-padding-left: var(--sizes-3);\n  --horizontal-action-padding: var(--sizes-sm);\n  --icon-size: var(--sizes-3);\n}\n\n._xs-size_i33v4_19 {\n  --banner-padding: var(--sizes-sm);\n  --banner-gap: var(--sizes-2);\n  --horizontal-gap: var(--sizes-2);\n  --horizontal-padding-left: var(--sizes-none);\n  --horizontal-action-padding: var(--sizes-none);\n  --icon-size: var(--sizes-3);\n}\n\n._primary-variant_i33v4_28 {\n  --feature-banner-bg: var(--theme-surface);\n  --icon-bg-color: var(--theme-primary);\n  --icon-color: var(--theme-on-primary);\n}\n\n._secondary-variant_i33v4_34 {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-primary);\n}\n\n._featureBanner_i33v4_40 {\n  border: var(--sizes-line) solid var(--theme-surface-alt);\n  border-radius: var(--radius-base);\n  background-color: var(--feature-banner-bg);\n  padding: var(--banner-padding);\n}\n._featureBanner_i33v4_40._vertical-layout_i33v4_46 {\n  gap: var(--banner-gap);\n}\n._featureBanner_i33v4_40._horizontal-layout_i33v4_49 {\n  gap: var(--horizontal-gap);\n}\n\n._featureBanner_i33v4_40 ._vertical_i33v4_46 {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n._featureBanner_i33v4_40 ._horizontal_i33v4_49 {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-left: var(--horizontal-padding-left);\n}\n\n._actions-vertical_i33v4_65 {\n  padding: var(--sizes-none);\n}\n\n._actions-horizontal_i33v4_69 {\n  padding: var(--horizontal-action-padding);\n}\n\n._iconBackground_i33v4_73 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: var(--sizes-xs);\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n}\n._iconBackground_i33v4_73 svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}\n\n._centerButton_i33v4_88 {\n  align-self: center;\n}");
+var styles = {"base-size":"_base-size_i33v4_1","sm-size":"_sm-size_i33v4_10","xs-size":"_xs-size_i33v4_19","primary-variant":"_primary-variant_i33v4_28","secondary-variant":"_secondary-variant_i33v4_34","featureBanner":"_featureBanner_i33v4_40","vertical-layout":"_vertical-layout_i33v4_46","horizontal-layout":"_horizontal-layout_i33v4_49","vertical":"_vertical_i33v4_46","horizontal":"_horizontal_i33v4_49","actions-vertical":"_actions-vertical_i33v4_65","actions-horizontal":"_actions-horizontal_i33v4_69","iconBackground":"_iconBackground_i33v4_73","centerButton":"_centerButton_i33v4_88"};
 
 export { styles as default };
 //# sourceMappingURL=FeatureBanner.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeatureBanner.module.scss.js","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":["/* Sizes */\n.default-size {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-base);\n  --banner-gap: var(--sizes-base);\n}\n\n.sm-size {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n}\n\n.xs-size {\n  --banner-padding: var(--sizes-sm);\n  --content-padding: 8px 8px;\n  --icon-size: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n}\n\n/* Variants */\n.primary-variant {\n  --feature-banner-bg: var(--theme-surface);\n  --icon-bg-color: var(--theme-primary);\n  --icon-color: var(--theme-on-primary);\n}\n\n.secondary-variant {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-primary);\n  border: none;\n}\n\n.featureBanner {\n  border: var(--sizes-line) solid var(--theme-surface-alt);\n  border-radius: var(--radius-base);\n  background-color: var(--feature-banner-bg);\n  padding: var(--banner-padding);\n}\n\n/* Layout */\n.vertical {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n  gap: var(--banner-gap);\n}\n\n.horizontal {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-inline: var(--content-padding);\n  gap: var(--banner-gap);\n}\n\n/* Icon background */\n.iconBackground {\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n  padding: var(--sizes-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n\n  & svg {\n    width: var(--icon-size);\n    height: var(--icon-size);\n    color: var(--icon-color);\n  }\n}\n\n.centerButton {\n  align-self: center;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACAA,WAAA,CAAA,m1DAAA;AACE,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}
+{"version":3,"file":"FeatureBanner.module.scss.js","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":[".base-size {\n  --banner-padding: var(--sizes-base);\n  --banner-gap: var(--sizes-base);\n  --horizontal-gap: var(--sizes-none);\n  --horizontal-padding-left: var(--sizes-base);\n  --horizontal-action-padding: var(--sizes-sm);\n  --icon-size: var(--sizes-base);\n}\n\n.sm-size {\n  --banner-padding: var(--sizes-3);\n  --banner-gap: var(--sizes-3);\n  --horizontal-gap: var(--sizes-none);\n  --horizontal-padding-left: var(--sizes-3);\n  --horizontal-action-padding: var(--sizes-sm);\n  --icon-size: var(--sizes-3);\n}\n\n.xs-size {\n  --banner-padding: var(--sizes-sm);\n  --banner-gap: var(--sizes-2);\n  --horizontal-gap: var(--sizes-2);\n  --horizontal-padding-left: var(--sizes-none);\n  --horizontal-action-padding: var(--sizes-none);\n  --icon-size: var(--sizes-3);\n}\n\n.primary-variant {\n  --feature-banner-bg: var(--theme-surface);\n  --icon-bg-color: var(--theme-primary);\n  --icon-color: var(--theme-on-primary);\n}\n\n.secondary-variant {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-primary);\n}\n\n.featureBanner {\n  border: var(--sizes-line) solid var(--theme-surface-alt);\n  border-radius: var(--radius-base);\n  background-color: var(--feature-banner-bg);\n  padding: var(--banner-padding);\n\n  &.vertical-layout {\n    gap: var(--banner-gap);\n  }\n\n  &.horizontal-layout {\n    gap: var(--horizontal-gap);\n  }\n}\n\n.featureBanner .vertical {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.featureBanner .horizontal {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-left: var(--horizontal-padding-left);\n}\n\n.actions-vertical {\n  padding: var(--sizes-none);\n}\n\n.actions-horizontal {\n  padding: var(--horizontal-action-padding);\n}\n\n.iconBackground {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: var(--sizes-xs);\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n\n  & svg {\n    width: var(--icon-size);\n    height: var(--icon-size);\n    color: var(--icon-color);\n  }\n}\n\n.centerButton {\n  align-self: center;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,q1EAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}

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

@@ -1,2 +1,2 @@
 export { FeatureBanner } from './FeatureBanner';
-export type { FeatureBannerProps, FeatureBannerVariant, FeatureBannerSize, FeatureBannerLayout, } from './types';
+export type { FeatureBannerDirection, FeatureBannerProps, FeatureBannerSize, FeatureBannerVariant, } from './types';

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

@@ -1,27 +1,29 @@
-import { ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 import { WithTokensProps } from '../../hoc/withTokens/withTokens';
-import { Action } from '../Modal';
+import type { ActionProps } from '../Action/types';
 /** Visual style of the banner */
 export type FeatureBannerVariant = 'primary' | 'secondary';
 /** Controls the padding density of the banner */
-export type FeatureBannerSize = 'default' | 'sm' | 'xs';
+export type FeatureBannerSize = 'base' | 'sm' | 'xs';
 /** Direction of the banner content flow */
-export type FeatureBannerLayout = 'vertical' | 'horizontal';
-export type FeatureBannerProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & WithTokensProps & {
+export type FeatureBannerDirection = 'vertical' | 'horizontal';
+export type FeatureBannerProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & WithTokensProps & {
     /** Visual style of the banner. `'primary'` has a solid icon background, `'secondary'` has a white background */
     variant?: FeatureBannerVariant;
     /** Controls padding density */
     size?: FeatureBannerSize;
     /** Direction of content flow. `'vertical'` stacks content, `'horizontal'` places content side-by-side */
-    layout?: FeatureBannerLayout;
+    direction?: FeatureBannerDirection;
     /** Banner heading text, also used as the `aria-label` for the region */
     title: string;
     /** Flexible content area below the title for message text, links, or any custom content */
     contentSlot?: ReactNode;
     /** Icon displayed in a themed background container */
     iconSlot?: ReactNode;
-    /** Action buttons rendered below the content */
-    actions?: Action[];
+    /** Actions rendered below the content. Supports both button and link actions. */
+    actions?: ((Omit<ActionProps<'button'>, 'children' | 'size'> | Omit<ActionProps<'a'>, 'children' | 'size'>) & {
+        label: string;
+    })[];
     /** Close handler. When provided, renders a close button */
     onClose?: () => void;
 };

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

@@ -312,6 +312,7 @@ export declare const PageInput: import("styled-components").StyledComponent<impo
     type?: import("../TextField").TextFieldType | undefined;
     onChange?: ((value: string) => void) | undefined;
     hasError?: boolean | undefined;
+    disabledMessage?: import("react").ReactNode;
     size?: "base" | "sm" | undefined;
     multiline?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps, "ref"> & import("react").RefAttributes<unknown>>, any, {}, never>;

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

@@ -296,6 +296,7 @@ export declare const PhoneInput: import("react").ForwardRefExoticComponent<{
     type?: import("..").TextFieldType | undefined;
     onChange?: ((value: string) => void) | undefined;
     hasError?: boolean | undefined;
+    disabledMessage?: import("react").ReactNode;
     size?: "base" | "sm" | undefined;
     multiline?: boolean | undefined;
 } & {

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

@@ -296,6 +296,7 @@ export declare const Search: React.ForwardRefExoticComponent<{
     type?: import("..").TextFieldType | undefined;
     onChange?: ((value: string) => void) | undefined;
     hasError?: boolean | undefined;
+    disabledMessage?: React.ReactNode;
     size?: "base" | "sm" | undefined;
     multiline?: boolean | undefined;
 } & {

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

@@ -297,6 +297,7 @@ declare const Input: import("styled-components").StyledComponent<import("react")
     type?: import("../TextField").TextFieldType | undefined;
     onChange?: ((value: string) => void) | undefined;
     hasError?: boolean | undefined;
+    disabledMessage?: import("react").ReactNode;
     size?: "base" | "sm" | undefined;
     multiline?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps, "ref"> & import("react").RefAttributes<unknown>>, any, {}, never>;

package/dist/components/Select/Select.cjs

@@ -1,20 +1,37 @@
 'use strict';
 
 var React = require('react');
-var styled = require('./styled.cjs');
 var withLabels = require('../../hoc/withLabels/withLabels.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var form_module = require('../../utils/forms/form.module.scss.cjs');
+var Select_module = require('./Select.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Select = withLabels.withLabels(React.forwardRef(({ className, options, value, onChange, size, disabled, hasError, ...otherProps }, ref) => {
+const Select = withLabels.withLabels(React.forwardRef(({ className, options, value, onChange, size, disabled, disabledMessage, hasError, id, ...otherProps }, ref) => {
     const handleChange = React.useCallback((e) => {
         if (!onChange)
             return;
         onChange(e.currentTarget.value);
     }, [onChange]);
-    return (React__default.default.createElement(styled.SelectInput, { className: className, compact: size === 'sm', value: value !== null && value !== void 0 ? value : undefined, onChange: handleChange, disabled: disabled, hasError: hasError, ref: ref, ...otherProps }, !!options &&
+    const getAriaDescribedBy = () => {
+        if (hasError && id)
+            return `${id}-error`;
+        if (disabledMessage && id)
+            return `${id}-disabled`;
+        return undefined;
+    };
+    return (React__default.default.createElement("select", { className: buildClassnames.buildClassnames([
+            form_module.base,
+            form_module.fullStyles,
+            Select_module.select,
+            size === 'sm' && form_module.compact,
+            hasError && form_module.error,
+            className,
+        ]), id: id, value: value !== null && value !== void 0 ? value : undefined, onChange: handleChange, disabled: disabled, "aria-describedby": getAriaDescribedBy(), ref: ref, ...otherProps }, !!options &&
         options.map((option) => (React__default.default.createElement("option", { key: option.label, value: option.value, disabled: option.disabled, hidden: option.hidden }, option.label)))));
 }));
 Select.displayName = 'Select';

package/dist/components/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useCallback } from 'react';\n\nimport { SelectInput } from './styled';\nimport { withLabels } from '../../hoc';\n\nexport type SelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  hidden?: boolean;\n};\n\nexport interface SelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {\n  id?: string;\n  className?: string;\n  options: Array<SelectOption>;\n  value?: string;\n  size?: 'sm' | 'base';\n  disabled?: boolean;\n  hasError?: boolean;\n  onChange?: (value: string) => void;\n}\n\nexport const Select = withLabels(\n  forwardRef<HTMLSelectElement, SelectProps>(\n    (\n      { className, options, value, onChange, size, disabled, hasError, ...otherProps }: SelectProps,\n      ref,\n    ) => {\n      const handleChange = useCallback(\n        (e: ChangeEvent<HTMLSelectElement>) => {\n          if (!onChange) return;\n          onChange(e.currentTarget.value);\n        },\n        [onChange],\n      );\n\n      return (\n        <SelectInput\n          className={className}\n          compact={size === 'sm'}\n          value={value ?? undefined}\n          onChange={handleChange}\n          disabled={disabled}\n          hasError={hasError}\n          ref={ref}\n          {...otherProps}\n        >\n          {!!options &&\n            options.map((option) => (\n              <option\n                key={option.label}\n                value={option.value}\n                disabled={option.disabled}\n                hidden={option.hidden}\n              >\n                {option.label}\n              </option>\n            ))}\n        </SelectInput>\n      );\n    },\n  ),\n);\n\nSelect.displayName = 'Select';\n"],"names":["withLabels","forwardRef","useCallback","React","SelectInput"],"mappings":";;;;;;;;;;AAwBO,MAAM,MAAM,GAAGA,qBAAU,CAC9BC,gBAAU,CACR,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAe,EAC7F,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,IAAA,CAAC,EACD,CAAC,QAAQ,CAAC,CACX;IAED,QACEC,qCAACC,kBAAW,EAAA,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,KAAK,IAAI,EACtB,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,cAAL,KAAK,GAAI,SAAS,EACzB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EAAA,EAEb,CAAC,CAAC,OAAO;AACR,QAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACjBD,iDACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAA,EAEpB,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACQ;AAElB,CAAC,CACF;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useCallback } from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\n\nimport formStyles from '../../utils/forms/form.module.scss';\nimport styles from './Select.module.scss';\n\nexport type SelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  hidden?: boolean;\n};\n\nexport interface SelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {\n  id?: string;\n  className?: string;\n  /** Array of options to render in the select dropdown. */\n  options: Array<SelectOption>;\n  /** Currently selected value. */\n  value?: string;\n  /** Component size variant. Defaults to `'base'`. */\n  size?: 'sm' | 'base';\n  /** Disables the select element. */\n  disabled?: boolean;\n  /**\n   * When provided, links the select to the disabled message element via `aria-describedby`.\n   * Passed through from `withLabels` — the HOC renders the visible message and sets `disabled`.\n   */\n  disabledMessage?: React.ReactNode;\n  /** When true, applies error styling. Used with `withLabels` to display an error message. */\n  hasError?: boolean;\n  /** Callback fired with the new value on change. */\n  onChange?: (value: string) => void;\n}\n\nexport const Select = withLabels(\n  forwardRef<HTMLSelectElement, SelectProps>(\n    (\n      {\n        className,\n        options,\n        value,\n        onChange,\n        size,\n        disabled,\n        disabledMessage,\n        hasError,\n        id,\n        ...otherProps\n      }: SelectProps,\n      ref,\n    ) => {\n      const handleChange = useCallback(\n        (e: ChangeEvent<HTMLSelectElement>) => {\n          if (!onChange) return;\n          onChange(e.currentTarget.value);\n        },\n        [onChange],\n      );\n\n      const getAriaDescribedBy = () => {\n        if (hasError && id) return `${id}-error`;\n        if (disabledMessage && id) return `${id}-disabled`;\n        return undefined;\n      };\n\n      return (\n        <select\n          className={buildClassnames([\n            formStyles.base,\n            formStyles.fullStyles,\n            styles.select,\n            size === 'sm' && formStyles.compact,\n            hasError && formStyles.error,\n            className,\n          ])}\n          id={id}\n          value={value ?? undefined}\n          onChange={handleChange}\n          disabled={disabled}\n          aria-describedby={getAriaDescribedBy()}\n          ref={ref}\n          {...otherProps}\n        >\n          {!!options &&\n            options.map((option) => (\n              <option\n                key={option.label}\n                value={option.value}\n                disabled={option.disabled}\n                hidden={option.hidden}\n              >\n                {option.label}\n              </option>\n            ))}\n        </select>\n      );\n    },\n  ),\n);\n\nSelect.displayName = 'Select';\n"],"names":["withLabels","forwardRef","useCallback","React","buildClassnames","formStyles","styles"],"mappings":";;;;;;;;;;;;;AAsCO,MAAM,MAAM,GAAGA,qBAAU,CAC9BC,gBAAU,CACR,CACE,EACE,SAAS,EACT,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,QAAQ,EACR,EAAE,EACF,GAAG,UAAU,EACD,EACd,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,IAAA,CAAC,EACD,CAAC,QAAQ,CAAC,CACX;IAED,MAAM,kBAAkB,GAAG,MAAK;QAC9B,IAAI,QAAQ,IAAI,EAAE;YAAE,OAAO,CAAA,EAAG,EAAE,CAAA,MAAA,CAAQ;QACxC,IAAI,eAAe,IAAI,EAAE;YAAE,OAAO,CAAA,EAAG,EAAE,CAAA,SAAA,CAAW;AAClD,QAAA,OAAO,SAAS;AAClB,IAAA,CAAC;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,WAAU,CAAC,IAAI;AACf,YAAAA,WAAU,CAAC,UAAU;AACrB,YAAAC,aAAM,CAAC,MAAM;AACb,YAAA,IAAI,KAAK,IAAI,IAAID,WAAU,CAAC,OAAO;YACnC,QAAQ,IAAIA,WAAU,CAAC,KAAK;YAC5B,SAAS;AACV,SAAA,CAAC,EACF,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,GAAI,SAAS,EACzB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAAA,kBAAA,EACA,kBAAkB,EAAE,EACtC,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EAAA,EAEb,CAAC,CAAC,OAAO;AACR,QAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACjBF,iDACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAA,EAEpB,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACG;AAEb,CAAC,CACF;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/dist/components/Select/Select.d.ts

@@ -8,11 +8,22 @@ export type SelectOption = {
 export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {
     id?: string;
     className?: string;
+    /** Array of options to render in the select dropdown. */
     options: Array<SelectOption>;
+    /** Currently selected value. */
     value?: string;
+    /** Component size variant. Defaults to `'base'`. */
     size?: 'sm' | 'base';
+    /** Disables the select element. */
     disabled?: boolean;
+    /**
+     * When provided, links the select to the disabled message element via `aria-describedby`.
+     * Passed through from `withLabels` — the HOC renders the visible message and sets `disabled`.
+     */
+    disabledMessage?: React.ReactNode;
+    /** When true, applies error styling. Used with `withLabels` to display an error message. */
     hasError?: boolean;
+    /** Callback fired with the new value on change. */
     onChange?: (value: string) => void;
 }
 export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps & React.RefAttributes<HTMLSelectElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps, "ref"> & React.RefAttributes<unknown>>;

package/dist/components/Select/Select.js

@@ -1,14 +1,31 @@
 import React__default, { forwardRef, useCallback } from 'react';
-import { SelectInput } from './styled.js';
 import { withLabels } from '../../hoc/withLabels/withLabels.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import formStyles from '../../utils/forms/form.module.scss.js';
+import styles from './Select.module.scss.js';
 
-const Select = withLabels(forwardRef(({ className, options, value, onChange, size, disabled, hasError, ...otherProps }, ref) => {
+const Select = withLabels(forwardRef(({ className, options, value, onChange, size, disabled, disabledMessage, hasError, id, ...otherProps }, ref) => {
     const handleChange = useCallback((e) => {
         if (!onChange)
             return;
         onChange(e.currentTarget.value);
     }, [onChange]);
-    return (React__default.createElement(SelectInput, { className: className, compact: size === 'sm', value: value !== null && value !== void 0 ? value : undefined, onChange: handleChange, disabled: disabled, hasError: hasError, ref: ref, ...otherProps }, !!options &&
+    const getAriaDescribedBy = () => {
+        if (hasError && id)
+            return `${id}-error`;
+        if (disabledMessage && id)
+            return `${id}-disabled`;
+        return undefined;
+    };
+    return (React__default.createElement("select", { className: buildClassnames([
+            formStyles.base,
+            formStyles.fullStyles,
+            styles.select,
+            size === 'sm' && formStyles.compact,
+            hasError && formStyles.error,
+            className,
+        ]), id: id, value: value !== null && value !== void 0 ? value : undefined, onChange: handleChange, disabled: disabled, "aria-describedby": getAriaDescribedBy(), ref: ref, ...otherProps }, !!options &&
         options.map((option) => (React__default.createElement("option", { key: option.label, value: option.value, disabled: option.disabled, hidden: option.hidden }, option.label)))));
 }));
 Select.displayName = 'Select';

package/dist/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useCallback } from 'react';\n\nimport { SelectInput } from './styled';\nimport { withLabels } from '../../hoc';\n\nexport type SelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  hidden?: boolean;\n};\n\nexport interface SelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {\n  id?: string;\n  className?: string;\n  options: Array<SelectOption>;\n  value?: string;\n  size?: 'sm' | 'base';\n  disabled?: boolean;\n  hasError?: boolean;\n  onChange?: (value: string) => void;\n}\n\nexport const Select = withLabels(\n  forwardRef<HTMLSelectElement, SelectProps>(\n    (\n      { className, options, value, onChange, size, disabled, hasError, ...otherProps }: SelectProps,\n      ref,\n    ) => {\n      const handleChange = useCallback(\n        (e: ChangeEvent<HTMLSelectElement>) => {\n          if (!onChange) return;\n          onChange(e.currentTarget.value);\n        },\n        [onChange],\n      );\n\n      return (\n        <SelectInput\n          className={className}\n          compact={size === 'sm'}\n          value={value ?? undefined}\n          onChange={handleChange}\n          disabled={disabled}\n          hasError={hasError}\n          ref={ref}\n          {...otherProps}\n        >\n          {!!options &&\n            options.map((option) => (\n              <option\n                key={option.label}\n                value={option.value}\n                disabled={option.disabled}\n                hidden={option.hidden}\n              >\n                {option.label}\n              </option>\n            ))}\n        </SelectInput>\n      );\n    },\n  ),\n);\n\nSelect.displayName = 'Select';\n"],"names":["React"],"mappings":";;;;AAwBO,MAAM,MAAM,GAAG,UAAU,CAC9B,UAAU,CACR,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAe,EAC7F,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,IAAA,CAAC,EACD,CAAC,QAAQ,CAAC,CACX;IAED,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,KAAK,IAAI,EACtB,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,cAAL,KAAK,GAAI,SAAS,EACzB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EAAA,EAEb,CAAC,CAAC,OAAO;AACR,QAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACjBA,yCACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAA,EAEpB,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACQ;AAElB,CAAC,CACF;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useCallback } from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\n\nimport formStyles from '../../utils/forms/form.module.scss';\nimport styles from './Select.module.scss';\n\nexport type SelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  hidden?: boolean;\n};\n\nexport interface SelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {\n  id?: string;\n  className?: string;\n  /** Array of options to render in the select dropdown. */\n  options: Array<SelectOption>;\n  /** Currently selected value. */\n  value?: string;\n  /** Component size variant. Defaults to `'base'`. */\n  size?: 'sm' | 'base';\n  /** Disables the select element. */\n  disabled?: boolean;\n  /**\n   * When provided, links the select to the disabled message element via `aria-describedby`.\n   * Passed through from `withLabels` — the HOC renders the visible message and sets `disabled`.\n   */\n  disabledMessage?: React.ReactNode;\n  /** When true, applies error styling. Used with `withLabels` to display an error message. */\n  hasError?: boolean;\n  /** Callback fired with the new value on change. */\n  onChange?: (value: string) => void;\n}\n\nexport const Select = withLabels(\n  forwardRef<HTMLSelectElement, SelectProps>(\n    (\n      {\n        className,\n        options,\n        value,\n        onChange,\n        size,\n        disabled,\n        disabledMessage,\n        hasError,\n        id,\n        ...otherProps\n      }: SelectProps,\n      ref,\n    ) => {\n      const handleChange = useCallback(\n        (e: ChangeEvent<HTMLSelectElement>) => {\n          if (!onChange) return;\n          onChange(e.currentTarget.value);\n        },\n        [onChange],\n      );\n\n      const getAriaDescribedBy = () => {\n        if (hasError && id) return `${id}-error`;\n        if (disabledMessage && id) return `${id}-disabled`;\n        return undefined;\n      };\n\n      return (\n        <select\n          className={buildClassnames([\n            formStyles.base,\n            formStyles.fullStyles,\n            styles.select,\n            size === 'sm' && formStyles.compact,\n            hasError && formStyles.error,\n            className,\n          ])}\n          id={id}\n          value={value ?? undefined}\n          onChange={handleChange}\n          disabled={disabled}\n          aria-describedby={getAriaDescribedBy()}\n          ref={ref}\n          {...otherProps}\n        >\n          {!!options &&\n            options.map((option) => (\n              <option\n                key={option.label}\n                value={option.value}\n                disabled={option.disabled}\n                hidden={option.hidden}\n              >\n                {option.label}\n              </option>\n            ))}\n        </select>\n      );\n    },\n  ),\n);\n\nSelect.displayName = 'Select';\n"],"names":["React"],"mappings":";;;;;;;AAsCO,MAAM,MAAM,GAAG,UAAU,CAC9B,UAAU,CACR,CACE,EACE,SAAS,EACT,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,QAAQ,EACR,EAAE,EACF,GAAG,UAAU,EACD,EACd,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,IAAA,CAAC,EACD,CAAC,QAAQ,CAAC,CACX;IAED,MAAM,kBAAkB,GAAG,MAAK;QAC9B,IAAI,QAAQ,IAAI,EAAE;YAAE,OAAO,CAAA,EAAG,EAAE,CAAA,MAAA,CAAQ;QACxC,IAAI,eAAe,IAAI,EAAE;YAAE,OAAO,CAAA,EAAG,EAAE,CAAA,SAAA,CAAW;AAClD,QAAA,OAAO,SAAS;AAClB,IAAA,CAAC;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,UAAU,CAAC,IAAI;AACf,YAAA,UAAU,CAAC,UAAU;AACrB,YAAA,MAAM,CAAC,MAAM;AACb,YAAA,IAAI,KAAK,IAAI,IAAI,UAAU,CAAC,OAAO;YACnC,QAAQ,IAAI,UAAU,CAAC,KAAK;YAC5B,SAAS;AACV,SAAA,CAAC,EACF,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,GAAI,SAAS,EACzB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAAA,kBAAA,EACA,kBAAkB,EAAE,EACtC,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EAAA,EAEb,CAAC,CAAC,OAAO;AACR,QAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACjBA,yCACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAA,EAEpB,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACG;AAEb,CAAC,CACF;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._select_1kp7e_1 {\n  --padding-right: var(--sizes-9);\n  padding-right: var(--padding-right);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%, 0 0;\n}\n._select_1kp7e_1:has(option:disabled:checked) {\n  color: var(--colors-neutral-ink-light);\n}");
+var styles = {"select":"_select_1kp7e_1"};
+
+module.exports = styles;
+//# sourceMappingURL=Select.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.module.scss.cjs","sources":["../../../src/components/Select/Select.module.scss"],"sourcesContent":[".select {\n  --padding-right: var(--sizes-9);\n\n  padding-right: var(--padding-right);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position:\n    right var(--sizes-3) top 50%,\n    0 0;\n\n  &:has(option:disabled:checked) {\n    color: var(--colors-neutral-ink-light);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,0hBAAA;AAEA,aAAA,CAAA,QAAA,CAAA,iBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._select_1kp7e_1 {\n  --padding-right: var(--sizes-9);\n  padding-right: var(--padding-right);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%, 0 0;\n}\n._select_1kp7e_1:has(option:disabled:checked) {\n  color: var(--colors-neutral-ink-light);\n}");
+var styles = {"select":"_select_1kp7e_1"};
+
+export { styles as default };
+//# sourceMappingURL=Select.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.module.scss.js","sources":["../../../src/components/Select/Select.module.scss"],"sourcesContent":[".select {\n  --padding-right: var(--sizes-9);\n\n  padding-right: var(--padding-right);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position:\n    right var(--sizes-3) top 50%,\n    0 0;\n\n  &:has(option:disabled:checked) {\n    color: var(--colors-neutral-ink-light);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,0hBAAA;AAEA,aAAA,CAAA,QAAA,CAAA,iBAAA;;;;"}

package/dist/components/TextField/TextField.cjs

@@ -2,14 +2,16 @@
 
 var React = require('react');
 var generateId = require('../../utils/generateId.cjs');
-var styled = require('./styled.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+var form_module = require('../../utils/forms/form.module.scss.cjs');
+var TextField_module = require('./TextField.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const NUMBER_REGEX = /^-?[0-9]*\.?[0-9]+$/;
-const TextField = React.forwardRef(({ id, className, disabled = false, hasError, multiline = false, spellCheck = false, name, onChange, placeholder, size = 'base', type = 'text', value, ...otherProps }, ref) => {
+const TextField = React.forwardRef(({ id, className, disabled = false, disabledMessage, hasError, multiline = false, spellCheck = false, name, onChange, placeholder, size = 'base', type = 'text', value, ...otherProps }, ref) => {
     const handleChange = React.useCallback((event) => {
         if (!onChange)
             return;
@@ -32,14 +34,29 @@ const TextField = React.forwardRef(({ id, className, disabled = false, hasError,
     const ariaDescribedBy = React.useMemo(() => {
         if (hasError)
             return `${componentId}-error`;
-        if (disabled)
+        if (disabledMessage)
             return `${componentId}-disabled`;
         return undefined;
-    }, [hasError, componentId, disabled]);
+    }, [hasError, disabledMessage, componentId]);
+    const isCompact = size === 'sm';
     if (type === 'text' && multiline) {
-        return (React__default.default.createElement(styled.Textarea, { className: className, disabled: disabled, hasError: hasError, id: componentId, name: name, onChange: handleChange, placeholder: placeholder, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
+        return (React__default.default.createElement("textarea", { className: buildClassnames.buildClassnames([
+                form_module.base,
+                form_module.fullStyles,
+                TextField_module.textarea,
+                isCompact && form_module.compact,
+                hasError && form_module.error,
+                className,
+            ]), disabled: disabled, id: componentId, name: name, onChange: handleChange, placeholder: placeholder, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
     }
-    return (React__default.default.createElement(styled.Input, { className: className, disabled: disabled, hasError: hasError, id: componentId, compact: size === 'sm', name: name, "aria-label": name, onChange: handleChange, placeholder: placeholder, type: type, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
+    return (React__default.default.createElement("input", { className: buildClassnames.buildClassnames([
+            form_module.base,
+            form_module.fullStyles,
+            TextField_module.input,
+            isCompact && form_module.compact,
+            hasError && form_module.error,
+            className,
+        ]), disabled: disabled, id: componentId, name: name, "aria-label": name, onChange: handleChange, placeholder: placeholder, type: type, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
 });
 
 exports.TextField = TextField;

package/dist/components/TextField/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import React, { useCallback, ChangeEvent, forwardRef, useMemo } from 'react';\nimport { TextFieldProps } from './types';\nimport { generateId } from '../../utils/generateId';\n\nimport { Input, Textarea } from './styled';\n\nconst NUMBER_REGEX = /^-?[0-9]*\\.?[0-9]+$/;\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      id,\n      className,\n      disabled = false,\n      hasError,\n      multiline = false,\n      spellCheck = false,\n      name,\n      onChange,\n      placeholder,\n      size = 'base',\n      type = 'text',\n      value,\n      ...otherProps\n    }: TextFieldProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!onChange) return;\n        const newValue = event.currentTarget.value;\n\n        if (newValue === '') {\n          onChange(newValue);\n          return;\n        }\n\n        if (type !== 'number') {\n          onChange(newValue);\n          return;\n        }\n\n        const reg = new RegExp(NUMBER_REGEX);\n        if (!reg.test(newValue)) {\n          return;\n        }\n\n        onChange(newValue);\n      },\n      [onChange, type],\n    );\n\n    const componentId = useMemo(() => id ?? generateId('textfield'), [id]);\n    const ariaDescribedBy = useMemo(() => {\n      if (hasError) return `${componentId}-error`;\n      if (disabled) return `${componentId}-disabled`;\n      return undefined;\n    }, [hasError, componentId, disabled]);\n\n    if (type === 'text' && multiline) {\n      return (\n        <Textarea\n          className={className}\n          disabled={disabled}\n          hasError={hasError}\n          id={componentId}\n          name={name}\n          onChange={handleChange}\n          placeholder={placeholder}\n          value={value}\n          ref={ref}\n          spellCheck={spellCheck}\n          aria-describedby={ariaDescribedBy}\n          {...otherProps}\n        />\n      );\n    }\n\n    return (\n      <Input\n        className={className}\n        disabled={disabled}\n        hasError={hasError}\n        id={componentId}\n        compact={size === 'sm'}\n        name={name}\n        aria-label={name}\n        onChange={handleChange}\n        placeholder={placeholder}\n        type={type}\n        value={value}\n        ref={ref}\n        spellCheck={spellCheck}\n        aria-describedby={ariaDescribedBy}\n        {...otherProps}\n      />\n    );\n  },\n);\n"],"names":["forwardRef","useCallback","useMemo","generateId","React","Textarea","Input"],"mappings":";;;;;;;;;;AAMA,MAAM,YAAY,GAAG,qBAAqB;MAE7B,SAAS,GAAGA,gBAAU,CACjC,CACE,EACE,EAAE,EACF,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,MAAM,EACb,KAAK,EACL,GAAG,UAAU,EACE,EACjB,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,KAA0D,KAAI;AAC7D,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK;QAE1C,IAAI,QAAQ,KAAK,EAAE,EAAE;YACnB,QAAQ,CAAC,QAAQ,CAAC;YAClB;AACD,QAAA;QAED,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,QAAQ,CAAC,QAAQ,CAAC;YAClB;AACD,QAAA;AAED,QAAA,MAAM,GAAG,GAAG,IAAI,MAAM,CAAC,YAAY,CAAC;AACpC,QAAA,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YACvB;AACD,QAAA;QAED,QAAQ,CAAC,QAAQ,CAAC;AACpB,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,CACjB;IAED,MAAM,WAAW,GAAGC,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACtE,IAAA,MAAM,eAAe,GAAGD,aAAO,CAAC,MAAK;AACnC,QAAA,IAAI,QAAQ;YAAE,OAAO,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ;AAC3C,QAAA,IAAI,QAAQ;YAAE,OAAO,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW;AAC9C,QAAA,OAAO,SAAS;IAClB,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC;AAErC,IAAA,IAAI,IAAI,KAAK,MAAM,IAAI,SAAS,EAAE;QAChC,QACEE,qCAACC,eAAQ,EAAA,EACP,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EAAA,kBAAA,EACJ,eAAe,EAAA,GAC7B,UAAU,EAAA,CACd;AAEL,IAAA;AAED,IAAA,QACED,sBAAA,CAAA,aAAA,CAACE,YAAK,EAAA,EACJ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,IAAI,KAAK,IAAI,EACtB,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,IAAI,EAChB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EAAA,kBAAA,EACJ,eAAe,EAAA,GAC7B,UAAU,EAAA,CACd;AAEN,CAAC;;;;"}
+{"version":3,"file":"TextField.cjs","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import React, { useCallback, ChangeEvent, forwardRef, useMemo } from 'react';\nimport { TextFieldProps } from './types';\nimport { generateId } from '../../utils/generateId';\nimport { buildClassnames } from '../../utils';\n\nimport formStyles from '../../utils/forms/form.module.scss';\nimport styles from './TextField.module.scss';\n\nconst NUMBER_REGEX = /^-?[0-9]*\\.?[0-9]+$/;\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      id,\n      className,\n      disabled = false,\n      disabledMessage,\n      hasError,\n      multiline = false,\n      spellCheck = false,\n      name,\n      onChange,\n      placeholder,\n      size = 'base',\n      type = 'text',\n      value,\n      ...otherProps\n    }: TextFieldProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!onChange) return;\n        const newValue = event.currentTarget.value;\n\n        if (newValue === '') {\n          onChange(newValue);\n          return;\n        }\n\n        if (type !== 'number') {\n          onChange(newValue);\n          return;\n        }\n\n        const reg = new RegExp(NUMBER_REGEX);\n        if (!reg.test(newValue)) {\n          return;\n        }\n\n        onChange(newValue);\n      },\n      [onChange, type],\n    );\n\n    const componentId = useMemo(() => id ?? generateId('textfield'), [id]);\n    const ariaDescribedBy = useMemo(() => {\n      if (hasError) return `${componentId}-error`;\n      if (disabledMessage) return `${componentId}-disabled`;\n      return undefined;\n    }, [hasError, disabledMessage, componentId]);\n\n    const isCompact = size === 'sm';\n\n    if (type === 'text' && multiline) {\n      return (\n        <textarea\n          className={buildClassnames([\n            formStyles.base,\n            formStyles.fullStyles,\n            styles.textarea,\n            isCompact && formStyles.compact,\n            hasError && formStyles.error,\n            className,\n          ])}\n          disabled={disabled}\n          id={componentId}\n          name={name}\n          onChange={handleChange}\n          placeholder={placeholder}\n          value={value}\n          ref={ref as React.Ref<HTMLTextAreaElement>}\n          spellCheck={spellCheck}\n          aria-describedby={ariaDescribedBy}\n          {...otherProps}\n        />\n      );\n    }\n\n    return (\n      <input\n        className={buildClassnames([\n          formStyles.base,\n          formStyles.fullStyles,\n          styles.input,\n          isCompact && formStyles.compact,\n          hasError && formStyles.error,\n          className,\n        ])}\n        disabled={disabled}\n        id={componentId}\n        name={name}\n        aria-label={name}\n        onChange={handleChange}\n        placeholder={placeholder}\n        type={type}\n        value={value}\n        ref={ref}\n        spellCheck={spellCheck}\n        aria-describedby={ariaDescribedBy}\n        {...otherProps}\n      />\n    );\n  },\n);\n"],"names":["forwardRef","useCallback","useMemo","generateId","React","buildClassnames","formStyles","styles"],"mappings":"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"}

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

@@ -296,6 +296,7 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     type?: import("./types").TextFieldType | undefined;
     onChange?: ((value: string) => void) | undefined;
     hasError?: boolean | undefined;
+    disabledMessage?: React.ReactNode;
     size?: "base" | "sm" | undefined;
     multiline?: boolean | undefined;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/components/TextField/TextField.js

@@ -1,9 +1,11 @@
 import React__default, { forwardRef, useCallback, useMemo } from 'react';
 import { generateId } from '../../utils/generateId.js';
-import { Textarea, Input } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import formStyles from '../../utils/forms/form.module.scss.js';
+import styles from './TextField.module.scss.js';
 
 const NUMBER_REGEX = /^-?[0-9]*\.?[0-9]+$/;
-const TextField = forwardRef(({ id, className, disabled = false, hasError, multiline = false, spellCheck = false, name, onChange, placeholder, size = 'base', type = 'text', value, ...otherProps }, ref) => {
+const TextField = forwardRef(({ id, className, disabled = false, disabledMessage, hasError, multiline = false, spellCheck = false, name, onChange, placeholder, size = 'base', type = 'text', value, ...otherProps }, ref) => {
     const handleChange = useCallback((event) => {
         if (!onChange)
             return;
@@ -26,14 +28,29 @@ const TextField = forwardRef(({ id, className, disabled = false, hasError, multi
     const ariaDescribedBy = useMemo(() => {
         if (hasError)
             return `${componentId}-error`;
-        if (disabled)
+        if (disabledMessage)
             return `${componentId}-disabled`;
         return undefined;
-    }, [hasError, componentId, disabled]);
+    }, [hasError, disabledMessage, componentId]);
+    const isCompact = size === 'sm';
     if (type === 'text' && multiline) {
-        return (React__default.createElement(Textarea, { className: className, disabled: disabled, hasError: hasError, id: componentId, name: name, onChange: handleChange, placeholder: placeholder, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
+        return (React__default.createElement("textarea", { className: buildClassnames([
+                formStyles.base,
+                formStyles.fullStyles,
+                styles.textarea,
+                isCompact && formStyles.compact,
+                hasError && formStyles.error,
+                className,
+            ]), disabled: disabled, id: componentId, name: name, onChange: handleChange, placeholder: placeholder, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
     }
-    return (React__default.createElement(Input, { className: className, disabled: disabled, hasError: hasError, id: componentId, compact: size === 'sm', name: name, "aria-label": name, onChange: handleChange, placeholder: placeholder, type: type, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
+    return (React__default.createElement("input", { className: buildClassnames([
+            formStyles.base,
+            formStyles.fullStyles,
+            styles.input,
+            isCompact && formStyles.compact,
+            hasError && formStyles.error,
+            className,
+        ]), disabled: disabled, id: componentId, name: name, "aria-label": name, onChange: handleChange, placeholder: placeholder, type: type, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
 });
 
 export { TextField };

package/dist/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import React, { useCallback, ChangeEvent, forwardRef, useMemo } from 'react';\nimport { TextFieldProps } from './types';\nimport { generateId } from '../../utils/generateId';\n\nimport { Input, Textarea } from './styled';\n\nconst NUMBER_REGEX = /^-?[0-9]*\\.?[0-9]+$/;\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      id,\n      className,\n      disabled = false,\n      hasError,\n      multiline = false,\n      spellCheck = false,\n      name,\n      onChange,\n      placeholder,\n      size = 'base',\n      type = 'text',\n      value,\n      ...otherProps\n    }: TextFieldProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!onChange) return;\n        const newValue = event.currentTarget.value;\n\n        if (newValue === '') {\n          onChange(newValue);\n          return;\n        }\n\n        if (type !== 'number') {\n          onChange(newValue);\n          return;\n        }\n\n        const reg = new RegExp(NUMBER_REGEX);\n        if (!reg.test(newValue)) {\n          return;\n        }\n\n        onChange(newValue);\n      },\n      [onChange, type],\n    );\n\n    const componentId = useMemo(() => id ?? generateId('textfield'), [id]);\n    const ariaDescribedBy = useMemo(() => {\n      if (hasError) return `${componentId}-error`;\n      if (disabled) return `${componentId}-disabled`;\n      return undefined;\n    }, [hasError, componentId, disabled]);\n\n    if (type === 'text' && multiline) {\n      return (\n        <Textarea\n          className={className}\n          disabled={disabled}\n          hasError={hasError}\n          id={componentId}\n          name={name}\n          onChange={handleChange}\n          placeholder={placeholder}\n          value={value}\n          ref={ref}\n          spellCheck={spellCheck}\n          aria-describedby={ariaDescribedBy}\n          {...otherProps}\n        />\n      );\n    }\n\n    return (\n      <Input\n        className={className}\n        disabled={disabled}\n        hasError={hasError}\n        id={componentId}\n        compact={size === 'sm'}\n        name={name}\n        aria-label={name}\n        onChange={handleChange}\n        placeholder={placeholder}\n        type={type}\n        value={value}\n        ref={ref}\n        spellCheck={spellCheck}\n        aria-describedby={ariaDescribedBy}\n        {...otherProps}\n      />\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;AAMA,MAAM,YAAY,GAAG,qBAAqB;MAE7B,SAAS,GAAG,UAAU,CACjC,CACE,EACE,EAAE,EACF,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,MAAM,EACb,KAAK,EACL,GAAG,UAAU,EACE,EACjB,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAA0D,KAAI;AAC7D,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK;QAE1C,IAAI,QAAQ,KAAK,EAAE,EAAE;YACnB,QAAQ,CAAC,QAAQ,CAAC;YAClB;AACD,QAAA;QAED,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,QAAQ,CAAC,QAAQ,CAAC;YAClB;AACD,QAAA;AAED,QAAA,MAAM,GAAG,GAAG,IAAI,MAAM,CAAC,YAAY,CAAC;AACpC,QAAA,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YACvB;AACD,QAAA;QAED,QAAQ,CAAC,QAAQ,CAAC;AACpB,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,CACjB;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACtE,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAK;AACnC,QAAA,IAAI,QAAQ;YAAE,OAAO,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ;AAC3C,QAAA,IAAI,QAAQ;YAAE,OAAO,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW;AAC9C,QAAA,OAAO,SAAS;IAClB,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC;AAErC,IAAA,IAAI,IAAI,KAAK,MAAM,IAAI,SAAS,EAAE;QAChC,QACEA,6BAAC,QAAQ,EAAA,EACP,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EAAA,kBAAA,EACJ,eAAe,EAAA,GAC7B,UAAU,EAAA,CACd;AAEL,IAAA;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,IAAI,KAAK,IAAI,EACtB,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,IAAI,EAChB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EAAA,kBAAA,EACJ,eAAe,EAAA,GAC7B,UAAU,EAAA,CACd;AAEN,CAAC;;;;"}
+{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import React, { useCallback, ChangeEvent, forwardRef, useMemo } from 'react';\nimport { TextFieldProps } from './types';\nimport { generateId } from '../../utils/generateId';\nimport { buildClassnames } from '../../utils';\n\nimport formStyles from '../../utils/forms/form.module.scss';\nimport styles from './TextField.module.scss';\n\nconst NUMBER_REGEX = /^-?[0-9]*\\.?[0-9]+$/;\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      id,\n      className,\n      disabled = false,\n      disabledMessage,\n      hasError,\n      multiline = false,\n      spellCheck = false,\n      name,\n      onChange,\n      placeholder,\n      size = 'base',\n      type = 'text',\n      value,\n      ...otherProps\n    }: TextFieldProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!onChange) return;\n        const newValue = event.currentTarget.value;\n\n        if (newValue === '') {\n          onChange(newValue);\n          return;\n        }\n\n        if (type !== 'number') {\n          onChange(newValue);\n          return;\n        }\n\n        const reg = new RegExp(NUMBER_REGEX);\n        if (!reg.test(newValue)) {\n          return;\n        }\n\n        onChange(newValue);\n      },\n      [onChange, type],\n    );\n\n    const componentId = useMemo(() => id ?? generateId('textfield'), [id]);\n    const ariaDescribedBy = useMemo(() => {\n      if (hasError) return `${componentId}-error`;\n      if (disabledMessage) return `${componentId}-disabled`;\n      return undefined;\n    }, [hasError, disabledMessage, componentId]);\n\n    const isCompact = size === 'sm';\n\n    if (type === 'text' && multiline) {\n      return (\n        <textarea\n          className={buildClassnames([\n            formStyles.base,\n            formStyles.fullStyles,\n            styles.textarea,\n            isCompact && formStyles.compact,\n            hasError && formStyles.error,\n            className,\n          ])}\n          disabled={disabled}\n          id={componentId}\n          name={name}\n          onChange={handleChange}\n          placeholder={placeholder}\n          value={value}\n          ref={ref as React.Ref<HTMLTextAreaElement>}\n          spellCheck={spellCheck}\n          aria-describedby={ariaDescribedBy}\n          {...otherProps}\n        />\n      );\n    }\n\n    return (\n      <input\n        className={buildClassnames([\n          formStyles.base,\n          formStyles.fullStyles,\n          styles.input,\n          isCompact && formStyles.compact,\n          hasError && formStyles.error,\n          className,\n        ])}\n        disabled={disabled}\n        id={componentId}\n        name={name}\n        aria-label={name}\n        onChange={handleChange}\n        placeholder={placeholder}\n        type={type}\n        value={value}\n        ref={ref}\n        spellCheck={spellCheck}\n        aria-describedby={ariaDescribedBy}\n        {...otherProps}\n      />\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._input_qtip3_1 {\n  /* Overrides browser default width - note: this breaks the native [size] attribute  */\n  width: 100%;\n  /* Hide number arrows/spinners */\n}\n._input_qtip3_1::-webkit-outer-spin-button, ._input_qtip3_1::-webkit-inner-spin-button {\n  appearance: none;\n  margin: 0;\n}\n._input_qtip3_1[type=number] {\n  appearance: textfield;\n  min-width: 8ch;\n  text-align: right;\n}\n\n._textarea_qtip3_16 {\n  padding-block: var(--sizes-2);\n}");
+var styles = {"input":"_input_qtip3_1","textarea":"_textarea_qtip3_16"};
+
+module.exports = styles;
+//# sourceMappingURL=TextField.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.module.scss.cjs","sources":["../../../src/components/TextField/TextField.module.scss"],"sourcesContent":[".input {\n  /* Overrides browser default width - note: this breaks the native [size] attribute  */\n  width: 100%;\n\n  /* Hide number arrows/spinners */\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    appearance: none;\n    margin: 0;\n  }\n\n  &[type='number'] {\n    appearance: textfield;\n    min-width: 8ch;\n    text-align: right;\n  }\n}\n\n.textarea {\n  padding-block: var(--sizes-2);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,ycAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._input_qtip3_1 {\n  /* Overrides browser default width - note: this breaks the native [size] attribute  */\n  width: 100%;\n  /* Hide number arrows/spinners */\n}\n._input_qtip3_1::-webkit-outer-spin-button, ._input_qtip3_1::-webkit-inner-spin-button {\n  appearance: none;\n  margin: 0;\n}\n._input_qtip3_1[type=number] {\n  appearance: textfield;\n  min-width: 8ch;\n  text-align: right;\n}\n\n._textarea_qtip3_16 {\n  padding-block: var(--sizes-2);\n}");
+var styles = {"input":"_input_qtip3_1","textarea":"_textarea_qtip3_16"};
+
+export { styles as default };
+//# sourceMappingURL=TextField.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.module.scss.js","sources":["../../../src/components/TextField/TextField.module.scss"],"sourcesContent":[".input {\n  /* Overrides browser default width - note: this breaks the native [size] attribute  */\n  width: 100%;\n\n  /* Hide number arrows/spinners */\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    appearance: none;\n    margin: 0;\n  }\n\n  &[type='number'] {\n    appearance: textfield;\n    min-width: 8ch;\n    text-align: right;\n  }\n}\n\n.textarea {\n  padding-block: var(--sizes-2);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,ycAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

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

@@ -297,6 +297,7 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
     type?: import("./types").TextFieldType | undefined;
     onChange?: ((value: string) => void) | undefined;
     hasError?: boolean | undefined;
+    disabledMessage?: import("react").ReactNode;
     size?: "base" | "sm" | undefined;
     multiline?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps, "ref"> & import("react").RefAttributes<unknown>>;

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

@@ -1,14 +1,25 @@
-/// <reference types="react" />
+import React from 'react';
 import { ComponentSizeType } from '../types';
 export type TextFieldType = 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' | 'currency';
 export declare const textFieldTypes: readonly ["text", "email", "number", "password", "search", "tel", "url", "date", "datetime-local", "month", "time", "week", "currency"];
 type CommonAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement> & React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'size' | 'type' | 'value'>;
 export type TextFieldProps = CommonAttributes & {
+    /** Current input value. */
     value?: string;
+    /** HTML input type. Defaults to `'text'`. */
     type?: TextFieldType;
+    /** Callback fired with the new value on change. */
     onChange?: (value: string) => void;
+    /** When true, applies error styling. Used with `withLabels` to display an error message. */
     hasError?: boolean;
+    /**
+     * When provided, links the input to the disabled message element via `aria-describedby`.
+     * Passed through from `withLabels` — the HOC renders the visible message and sets `disabled`.
+     */
+    disabledMessage?: React.ReactNode;
+    /** Component size variant. Defaults to `'base'`. */
     size?: ComponentSizeType;
+    /** Renders a `<textarea>` instead of `<input>` when `type` is `'text'`. */
     multiline?: boolean;
 };
 export {};

package/dist/hoc/withLabels/withLabels.cjs

@@ -21,14 +21,14 @@ const withLabels = (Component) => {
     const ComponentWithLabels = React.forwardRef(({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {
         const componentId = useId.useId({ id, prefix: Component.name });
         if (!label)
-            return (React__default.default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }));
+            return (React__default.default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, disabledMessage: disabledMessage, ...otherProps }));
         return (React__default.default.createElement(FlexCol.FlexCol, { className: withLabels_module.rootStack },
             React__default.default.createElement(FlexRow.FlexRow, null,
                 React__default.default.createElement(Text.Text, { variant: "inputLabel", id: `${componentId}-label`, htmlFor: componentId }, label),
                 (tooltip || tooltipContent) && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip, content: tooltipContent },
                     React__default.default.createElement(HelpIcon.ReactComponent, { "data-testid": "tooltip-help", width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light })))),
-            hint && React__default.default.createElement(Text.Text, { variant: "hintText", as: "span", className: withLabels_module.hint, id: `${componentId}-hint` }, hint),
-            React__default.default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }),
+            hint && (React__default.default.createElement(Text.Text, { variant: "hintText", as: "span", className: withLabels_module.hint, id: `${componentId}-hint` }, hint)),
+            React__default.default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, disabledMessage: disabledMessage, ...otherProps }),
             error && (React__default.default.createElement(FlexRow.FlexRow, { id: `${componentId}-error`, gap: "xs" },
                 React__default.default.createElement(CriticalIcon.ReactComponent, { width: 16, height: 16, color: index.theme.colors.secondary.red.base }),
                 React__default.default.createElement(Text.Text, { variant: "error", as: "span", className: withLabels_module.error }, error))),

package/dist/hoc/withLabels/withLabels.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './styled';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <FlexCol className={styles.rootStack}>\n          <FlexRow>\n            <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Text>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>{hint}</Text>}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <FlexRow id={`${componentId}-error`} gap=\"xs\">\n              <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n              <Text variant=\"error\" as=\"span\" className={styles.error}>{error}</Text>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${componentId}-disabled`} gap=\"xs\">\n              <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n              <Text variant=\"bodyBold\" as=\"span\">{disabledMessage}</Text>\n            </FlexRow>\n          )}\n        </FlexCol>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["forwardRef","useId","React","FlexCol","styles","FlexRow","Text","BlockTooltip","HelpIcon","theme","CriticalIcon","LockIcon"],"mappings":"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"}
+{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './styled';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <FlexCol className={styles.rootStack}>\n          <FlexRow>\n            <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Text>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && (\n            <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n              {hint}\n            </Text>\n          )}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <FlexRow id={`${componentId}-error`} gap=\"xs\">\n              <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n              <Text variant=\"error\" as=\"span\" className={styles.error}>\n                {error}\n              </Text>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${componentId}-disabled`} gap=\"xs\">\n              <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n              <Text variant=\"bodyBold\" as=\"span\">\n                {disabledMessage}\n              </Text>\n            </FlexRow>\n          )}\n        </FlexCol>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["forwardRef","useId","React","FlexCol","styles","FlexRow","Text","BlockTooltip","HelpIcon","theme","CriticalIcon","LockIcon"],"mappings":"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"}

package/dist/hoc/withLabels/withLabels.js

@@ -15,14 +15,14 @@ const withLabels = (Component) => {
     const ComponentWithLabels = forwardRef(({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {
         const componentId = useId({ id, prefix: Component.name });
         if (!label)
-            return (React__default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }));
+            return (React__default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, disabledMessage: disabledMessage, ...otherProps }));
         return (React__default.createElement(FlexCol, { className: labelStyles.rootStack },
             React__default.createElement(FlexRow, null,
                 React__default.createElement(Text, { variant: "inputLabel", id: `${componentId}-label`, htmlFor: componentId }, label),
                 (tooltip || tooltipContent) && (React__default.createElement(BlockTooltip, { text: tooltip, content: tooltipContent },
                     React__default.createElement(HelpIcon, { "data-testid": "tooltip-help", width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.neutral.ink.light })))),
-            hint && React__default.createElement(Text, { variant: "hintText", as: "span", className: labelStyles.hint, id: `${componentId}-hint` }, hint),
-            React__default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }),
+            hint && (React__default.createElement(Text, { variant: "hintText", as: "span", className: labelStyles.hint, id: `${componentId}-hint` }, hint)),
+            React__default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, disabledMessage: disabledMessage, ...otherProps }),
             error && (React__default.createElement(FlexRow, { id: `${componentId}-error`, gap: "xs" },
                 React__default.createElement(CriticalIcon, { width: 16, height: 16, color: theme.colors.secondary.red.base }),
                 React__default.createElement(Text, { variant: "error", as: "span", className: labelStyles.error }, error))),

package/dist/hoc/withLabels/withLabels.js.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './styled';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <FlexCol className={styles.rootStack}>\n          <FlexRow>\n            <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Text>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>{hint}</Text>}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <FlexRow id={`${componentId}-error`} gap=\"xs\">\n              <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n              <Text variant=\"error\" as=\"span\" className={styles.error}>{error}</Text>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${componentId}-disabled`} gap=\"xs\">\n              <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n              <Text variant=\"bodyBold\" as=\"span\">{disabledMessage}</Text>\n            </FlexRow>\n          )}\n        </FlexCol>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["React","styles"],"mappings":"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"}
+{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './styled';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <FlexCol className={styles.rootStack}>\n          <FlexRow>\n            <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Text>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && (\n            <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n              {hint}\n            </Text>\n          )}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <FlexRow id={`${componentId}-error`} gap=\"xs\">\n              <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n              <Text variant=\"error\" as=\"span\" className={styles.error}>\n                {error}\n              </Text>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${componentId}-disabled`} gap=\"xs\">\n              <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n              <Text variant=\"bodyBold\" as=\"span\">\n                {disabledMessage}\n              </Text>\n            </FlexRow>\n          )}\n        </FlexCol>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["React","styles"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "14.5.0",
+  "version": "14.7.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",

package/dist/components/Select/styled.cjs

@@ -1,16 +0,0 @@
-'use strict';
-
-var styled = require('styled-components');
-var inputStyles = require('../../utils/forms/inputStyles.cjs');
-var index = require('../../theme/index.cjs');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-const dropdownIndicatorStyles = styled.css `--padding-right:${index.theme.sizes[9]};padding-right:var(--padding-right);background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right ${index.theme.sizes[3]} top 50%,0 0;`;
-const SelectInput = styled__default.default.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--1v4mu6a" }) `${inputStyles.inputFullStyles} ${dropdownIndicatorStyles} &:has(option:disabled:checked){color:${index.theme.colors.neutral.ink.light};}`;
-
-exports.SelectInput = SelectInput;
-exports.dropdownIndicatorStyles = dropdownIndicatorStyles;
-//# sourceMappingURL=styled.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Select/styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\n\nexport const dropdownIndicatorStyles = css`\n  --padding-right: ${theme.sizes[9]};\n\n  padding-right: var(--padding-right);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position:\n    right ${theme.sizes[3]} top 50%,\n    0 0;\n`;\n\nexport const SelectInput = styled.select<any>`\n  ${inputFullStyles}\n  ${dropdownIndicatorStyles}\n\n  /* Simulate placeholder styles when a disabled option is selected */\n  &:has(option:disabled:checked) {\n    color: ${theme.colors.neutral.ink.light};\n  }\n`;\n"],"names":["css","theme","styled","inputFullStyles"],"mappings":";;;;;;;;;;MAIa,uBAAuB,GAAGA,UAAG,CAAA,CAAA,gBAAA,EACrBC,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,+UAAA,EAMvBA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;MAIb,WAAW,GAAGC,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EACpCC,2BAAe,CAAA,CAAA,EACf,uBAAuB,yCAIdF,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,EAAA;;;;;"}

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

@@ -1,2 +0,0 @@
-export declare const dropdownIndicatorStyles: import("styled-components").FlattenSimpleInterpolation;
-export declare const SelectInput: import("styled-components").StyledComponent<"select", any, any, never>;

package/dist/components/Select/styled.js

@@ -1,9 +0,0 @@
-import styled, { css } from 'styled-components';
-import { inputFullStyles } from '../../utils/forms/inputStyles.js';
-import { theme } from '../../theme/index.js';
-
-const dropdownIndicatorStyles = css `--padding-right:${theme.sizes[9]};padding-right:var(--padding-right);background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right ${theme.sizes[3]} top 50%,0 0;`;
-const SelectInput = styled.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--1v4mu6a" }) `${inputFullStyles} ${dropdownIndicatorStyles} &:has(option:disabled:checked){color:${theme.colors.neutral.ink.light};}`;
-
-export { SelectInput, dropdownIndicatorStyles };
-//# sourceMappingURL=styled.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Select/styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\n\nexport const dropdownIndicatorStyles = css`\n  --padding-right: ${theme.sizes[9]};\n\n  padding-right: var(--padding-right);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position:\n    right ${theme.sizes[3]} top 50%,\n    0 0;\n`;\n\nexport const SelectInput = styled.select<any>`\n  ${inputFullStyles}\n  ${dropdownIndicatorStyles}\n\n  /* Simulate placeholder styles when a disabled option is selected */\n  &:has(option:disabled:checked) {\n    color: ${theme.colors.neutral.ink.light};\n  }\n`;\n"],"names":[],"mappings":";;;;MAIa,uBAAuB,GAAG,GAAG,CAAA,CAAA,gBAAA,EACrB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,+UAAA,EAMvB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;MAIb,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EACpC,eAAe,CAAA,CAAA,EACf,uBAAuB,yCAId,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,EAAA;;;;"}

package/dist/components/TextField/styled.cjs

@@ -1,16 +0,0 @@
-'use strict';
-
-var styled = require('styled-components');
-var inputStyles = require('../../utils/forms/inputStyles.cjs');
-var index = require('../../theme/index.cjs');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--3jt15a" }) `${inputStyles.inputFullStyles} width:100%;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;min-width:8ch;text-align:right;}`;
-const Textarea = styled__default.default.textarea.withConfig({ displayName: "vui--Textarea", componentId: "vui--1k04ik" }) `${inputStyles.inputFullStyles} padding-block:${index.theme.sizes[2]};`;
-
-exports.Input = Input;
-exports.Textarea = Textarea;
-//# sourceMappingURL=styled.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/TextField/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\n\nexport const Input = styled.input<any>`\n  ${inputFullStyles}\n\n  /* Overrides browser default width - note: this breaks the native [size] attribute  */\n  width: 100%;\n\n  /* Hide number arrows/spinners */\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &[type='number'] {\n    -moz-appearance: textfield;\n    min-width: 8ch;\n    text-align: right;\n  }\n`;\n\nexport const Textarea = styled.textarea<any>`\n  ${inputFullStyles}\n\n  padding-block: ${theme.sizes[2]};\n`;\n"],"names":["styled","inputFullStyles","theme"],"mappings":";;;;;;;;;;AAIO,MAAM,KAAK,GAAGA,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC7BC,2BAAe,CAAA,mLAAA;AAkBZ,MAAM,QAAQ,GAAGD,uBAAM,CAAC,QAAQ,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EACnCC,2BAAe,CAAA,eAAA,EAEAC,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;;;"}

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

@@ -1,2 +0,0 @@
-export declare const Input: import("styled-components").StyledComponent<"input", any, any, never>;
-export declare const Textarea: import("styled-components").StyledComponent<"textarea", any, any, never>;

package/dist/components/TextField/styled.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-import { inputFullStyles } from '../../utils/forms/inputStyles.js';
-import { theme } from '../../theme/index.js';
-
-const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--3jt15a" }) `${inputFullStyles} width:100%;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;min-width:8ch;text-align:right;}`;
-const Textarea = styled.textarea.withConfig({ displayName: "vui--Textarea", componentId: "vui--1k04ik" }) `${inputFullStyles} padding-block:${theme.sizes[2]};`;
-
-export { Input, Textarea };
-//# sourceMappingURL=styled.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/TextField/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\n\nexport const Input = styled.input<any>`\n  ${inputFullStyles}\n\n  /* Overrides browser default width - note: this breaks the native [size] attribute  */\n  width: 100%;\n\n  /* Hide number arrows/spinners */\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &[type='number'] {\n    -moz-appearance: textfield;\n    min-width: 8ch;\n    text-align: right;\n  }\n`;\n\nexport const Textarea = styled.textarea<any>`\n  ${inputFullStyles}\n\n  padding-block: ${theme.sizes[2]};\n`;\n"],"names":[],"mappings":";;;;AAIO,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC7B,eAAe,CAAA,mLAAA;AAkBZ,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EACnC,eAAe,CAAA,eAAA,EAEA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;;"}