@veeqo/ui 16.0.0 → 16.2.0

package/dist/components/DimensionsInput/DimensionsInput.cjs

@@ -2,33 +2,33 @@
 
 var React = require('react');
 var withLabels = require('../../hoc/withLabels/withLabels.cjs');
-var invalidCharactersNumeric = require('../../utils/invalidCharactersNumeric.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
 var blockInvalidCharacters = require('../../utils/blockInvalidCharacters.cjs');
+var invalidCharactersNumeric = require('../../utils/invalidCharactersNumeric.cjs');
+var WeightInput_module = require('../WeightInput/WeightInput.module.scss.cjs');
 var InputAffix = require('../InputAffix/InputAffix.cjs');
-var index = require('../TextField/index.cjs');
-var Stack = require('../Stack/Stack.cjs');
 var InputGroup = require('../InputGroup/InputGroup.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
+var index = require('../TextField/index.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const blockInvalidChars = (e) => blockInvalidCharacters.blockInvalidCharacters(e, invalidCharactersNumeric.invalidCharsList);
-const styles = {
-    inputGroup: {
-        flex: 1,
-    },
-    textField: {
-        flex: 1,
-    },
-};
-const DimensionsInput = withLabels.withLabels(({ size = 'base', handleChangeHeight, handleChangeWidth, handleChangeLength, className, height, width, length, unit = 'cm', hasError, ...rest }) => {
+const DimensionsInput = withLabels.withLabels(({ size = 'base', handleChangeHeight, handleChangeWidth, handleChangeLength, className, height, width, length, unit = 'cm', hasError, placeholder = '0', ...rest }) => {
     const compact = size === 'sm';
+    // Default (grey-base) outline for both field + affix; omitted on error so the
+    // error/focus border colours take over. Matches WeightInput exactly.
+    const defaultBorder = hasError ? undefined : WeightInput_module.defaultBorder;
+    // Group gets an error modifier so the focus-within ring turns red on error.
+    const groupClass = buildClassnames.buildClassnames([WeightInput_module.group, hasError && WeightInput_module.groupError]);
     const childProps = {
         inputGroup: {
             hasError,
             compact,
-            style: styles.inputGroup,
+            className: groupClass,
         },
         textField: {
             type: 'number',
@@ -37,25 +37,26 @@ const DimensionsInput = withLabels.withLabels(({ size = 'base', handleChangeHeig
             onKeyDown: blockInvalidChars,
             size,
             hasError,
-            style: styles.textField,
+            className: buildClassnames.buildClassnames([WeightInput_module.field, defaultBorder]),
             ...rest,
         },
         inputAffix: {
             compact,
+            className: buildClassnames.buildClassnames([WeightInput_module.affix, defaultBorder]),
         },
     };
-    return (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", className: className },
-        React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+    return (React__default.default.createElement(FlexRow.FlexRow, { alignItems: "center", gap: 3, className: className },
+        React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup },
             React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "L"),
-            React__default.default.createElement(index.TextField, { ...childProps.textField, name: "length", value: length, "aria-label": "Length", "aria-describedby": "length-unit", onChange: handleChangeLength, placeholder: "0" }),
+            React__default.default.createElement(index.TextField, { ...childProps.textField, name: "length", value: length, "aria-label": "Length", "aria-describedby": "length-unit", onChange: handleChangeLength, placeholder: placeholder }),
             React__default.default.createElement(InputAffix.InputAffix, { id: "length-unit", ...childProps.inputAffix }, unit)),
-        React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+        React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup },
             React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "W"),
-            React__default.default.createElement(index.TextField, { ...childProps.textField, name: "width", value: width, "aria-label": "Width", "aria-describedby": "width-unit", onChange: handleChangeWidth, placeholder: "0" }),
+            React__default.default.createElement(index.TextField, { ...childProps.textField, name: "width", value: width, "aria-label": "Width", "aria-describedby": "width-unit", onChange: handleChangeWidth, placeholder: placeholder }),
             React__default.default.createElement(InputAffix.InputAffix, { id: "width-unit", ...childProps.inputAffix }, unit)),
-        React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+        React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup },
             React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "H"),
-            React__default.default.createElement(index.TextField, { ...childProps.textField, name: "height", value: height, "aria-label": "Height", "aria-describedby": "height-unit", onChange: handleChangeHeight, placeholder: "0" }),
+            React__default.default.createElement(index.TextField, { ...childProps.textField, name: "height", value: height, "aria-label": "Height", "aria-describedby": "height-unit", onChange: handleChangeHeight, placeholder: placeholder }),
             React__default.default.createElement(InputAffix.InputAffix, { id: "height-unit", ...childProps.inputAffix }, unit))));
 });
 DimensionsInput.displayName = 'DimensionsInput';

package/dist/components/DimensionsInput/DimensionsInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DimensionsInput.cjs","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\nimport { Stack } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nconst styles = {\n  inputGroup: {\n    flex: 1,\n  },\n  textField: {\n    flex: 1,\n  },\n};\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n  ({\n    size = 'base',\n    handleChangeHeight,\n    handleChangeWidth,\n    handleChangeLength,\n    className,\n    height,\n    width,\n    length,\n    unit = 'cm',\n    hasError,\n    ...rest\n  }) => {\n    const compact = size === 'sm';\n\n    const childProps: ChildComponentProps = {\n      inputGroup: {\n        hasError,\n        compact,\n        style: styles.inputGroup,\n      },\n      textField: {\n        type: 'number',\n        min: '0',\n        step: 'any',\n        onKeyDown: blockInvalidChars,\n        size,\n        hasError,\n        style: styles.textField,\n        ...rest,\n      },\n      inputAffix: {\n        compact,\n      },\n    };\n\n    return (\n      <Stack direction=\"horizontal\" alignY=\"center\" className={className}>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>L</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"length\"\n            value={length}\n            aria-label=\"Length\"\n            aria-describedby=\"length-unit\"\n            onChange={handleChangeLength}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>W</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"width\"\n            value={width}\n            aria-label=\"Width\"\n            aria-describedby=\"width-unit\"\n            onChange={handleChangeWidth}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>H</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"height\"\n            value={height}\n            aria-label=\"Height\"\n            aria-describedby=\"height-unit\"\n            onChange={handleChangeHeight}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n      </Stack>\n    );\n  },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","React","Stack","InputGroup","InputAffix","TextField"],"mappings":"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"}
+{"version":3,"file":"DimensionsInput.cjs","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n// Share WeightInput's module so both inputs use one source of truth for the\n// group/field/affix border + affix text treatment.\nimport styles from '../WeightInput/WeightInput.module.scss';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { TextField, TextFieldProps } from '../TextField';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n  ({\n    size = 'base',\n    handleChangeHeight,\n    handleChangeWidth,\n    handleChangeLength,\n    className,\n    height,\n    width,\n    length,\n    unit = 'cm',\n    hasError,\n    placeholder = '0',\n    ...rest\n  }) => {\n    const compact = size === 'sm';\n\n    // Default (grey-base) outline for both field + affix; omitted on error so the\n    // error/focus border colours take over. Matches WeightInput exactly.\n    const defaultBorder = hasError ? undefined : styles.defaultBorder;\n\n    // Group gets an error modifier so the focus-within ring turns red on error.\n    const groupClass = buildClassnames([styles.group, hasError && styles.groupError]);\n\n    const childProps: ChildComponentProps = {\n      inputGroup: {\n        hasError,\n        compact,\n        className: groupClass,\n      },\n      textField: {\n        type: 'number',\n        min: '0',\n        step: 'any',\n        onKeyDown: blockInvalidChars,\n        size,\n        hasError,\n        className: buildClassnames([styles.field, defaultBorder]),\n        ...rest,\n      },\n      inputAffix: {\n        compact,\n        className: buildClassnames([styles.affix, defaultBorder]),\n      },\n    };\n\n    return (\n      <FlexRow alignItems=\"center\" gap={3} className={className}>\n        <InputGroup {...childProps.inputGroup}>\n          <InputAffix {...childProps.inputAffix}>L</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"length\"\n            value={length}\n            aria-label=\"Length\"\n            aria-describedby=\"length-unit\"\n            onChange={handleChangeLength}\n            placeholder={placeholder}\n          />\n          <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup}>\n          <InputAffix {...childProps.inputAffix}>W</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"width\"\n            value={width}\n            aria-label=\"Width\"\n            aria-describedby=\"width-unit\"\n            onChange={handleChangeWidth}\n            placeholder={placeholder}\n          />\n          <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup}>\n          <InputAffix {...childProps.inputAffix}>H</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"height\"\n            value={height}\n            aria-label=\"Height\"\n            aria-describedby=\"height-unit\"\n            onChange={handleChangeHeight}\n            placeholder={placeholder}\n          />\n          <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n      </FlexRow>\n    );\n  },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","styles","buildClassnames","React","FlexRow","InputGroup","InputAffix","TextField"],"mappings":"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"}

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

@@ -328,4 +328,5 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     unit?: string | undefined;
     className?: string | undefined;
     hasError?: boolean | undefined;
+    placeholder?: string | undefined;
 } & import("../../hoc/withLabels/withLabels").WithLabelsProps & React.RefAttributes<unknown>>;

package/dist/components/DimensionsInput/DimensionsInput.js

@@ -1,28 +1,28 @@
 import React__default from 'react';
 import { withLabels } from '../../hoc/withLabels/withLabels.js';
-import { invalidCharsList } from '../../utils/invalidCharactersNumeric.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
 import { blockInvalidCharacters } from '../../utils/blockInvalidCharacters.js';
+import { invalidCharsList } from '../../utils/invalidCharactersNumeric.js';
+import styles from '../WeightInput/WeightInput.module.scss.js';
 import { InputAffix } from '../InputAffix/InputAffix.js';
-import { TextField } from '../TextField/index.js';
-import { Stack } from '../Stack/Stack.js';
 import { InputGroup } from '../InputGroup/InputGroup.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
+import { TextField } from '../TextField/index.js';
 
 const blockInvalidChars = (e) => blockInvalidCharacters(e, invalidCharsList);
-const styles = {
-    inputGroup: {
-        flex: 1,
-    },
-    textField: {
-        flex: 1,
-    },
-};
-const DimensionsInput = withLabels(({ size = 'base', handleChangeHeight, handleChangeWidth, handleChangeLength, className, height, width, length, unit = 'cm', hasError, ...rest }) => {
+const DimensionsInput = withLabels(({ size = 'base', handleChangeHeight, handleChangeWidth, handleChangeLength, className, height, width, length, unit = 'cm', hasError, placeholder = '0', ...rest }) => {
     const compact = size === 'sm';
+    // Default (grey-base) outline for both field + affix; omitted on error so the
+    // error/focus border colours take over. Matches WeightInput exactly.
+    const defaultBorder = hasError ? undefined : styles.defaultBorder;
+    // Group gets an error modifier so the focus-within ring turns red on error.
+    const groupClass = buildClassnames([styles.group, hasError && styles.groupError]);
     const childProps = {
         inputGroup: {
             hasError,
             compact,
-            style: styles.inputGroup,
+            className: groupClass,
         },
         textField: {
             type: 'number',
@@ -31,25 +31,26 @@ const DimensionsInput = withLabels(({ size = 'base', handleChangeHeight, handleC
             onKeyDown: blockInvalidChars,
             size,
             hasError,
-            style: styles.textField,
+            className: buildClassnames([styles.field, defaultBorder]),
             ...rest,
         },
         inputAffix: {
             compact,
+            className: buildClassnames([styles.affix, defaultBorder]),
         },
     };
-    return (React__default.createElement(Stack, { direction: "horizontal", alignY: "center", className: className },
-        React__default.createElement(InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+    return (React__default.createElement(FlexRow, { alignItems: "center", gap: 3, className: className },
+        React__default.createElement(InputGroup, { ...childProps.inputGroup },
             React__default.createElement(InputAffix, { ...childProps.inputAffix }, "L"),
-            React__default.createElement(TextField, { ...childProps.textField, name: "length", value: length, "aria-label": "Length", "aria-describedby": "length-unit", onChange: handleChangeLength, placeholder: "0" }),
+            React__default.createElement(TextField, { ...childProps.textField, name: "length", value: length, "aria-label": "Length", "aria-describedby": "length-unit", onChange: handleChangeLength, placeholder: placeholder }),
             React__default.createElement(InputAffix, { id: "length-unit", ...childProps.inputAffix }, unit)),
-        React__default.createElement(InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+        React__default.createElement(InputGroup, { ...childProps.inputGroup },
             React__default.createElement(InputAffix, { ...childProps.inputAffix }, "W"),
-            React__default.createElement(TextField, { ...childProps.textField, name: "width", value: width, "aria-label": "Width", "aria-describedby": "width-unit", onChange: handleChangeWidth, placeholder: "0" }),
+            React__default.createElement(TextField, { ...childProps.textField, name: "width", value: width, "aria-label": "Width", "aria-describedby": "width-unit", onChange: handleChangeWidth, placeholder: placeholder }),
             React__default.createElement(InputAffix, { id: "width-unit", ...childProps.inputAffix }, unit)),
-        React__default.createElement(InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+        React__default.createElement(InputGroup, { ...childProps.inputGroup },
             React__default.createElement(InputAffix, { ...childProps.inputAffix }, "H"),
-            React__default.createElement(TextField, { ...childProps.textField, name: "height", value: height, "aria-label": "Height", "aria-describedby": "height-unit", onChange: handleChangeHeight, placeholder: "0" }),
+            React__default.createElement(TextField, { ...childProps.textField, name: "height", value: height, "aria-label": "Height", "aria-describedby": "height-unit", onChange: handleChangeHeight, placeholder: placeholder }),
             React__default.createElement(InputAffix, { id: "height-unit", ...childProps.inputAffix }, unit))));
 });
 DimensionsInput.displayName = 'DimensionsInput';

package/dist/components/DimensionsInput/DimensionsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DimensionsInput.js","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\nimport { Stack } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nconst styles = {\n  inputGroup: {\n    flex: 1,\n  },\n  textField: {\n    flex: 1,\n  },\n};\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n  ({\n    size = 'base',\n    handleChangeHeight,\n    handleChangeWidth,\n    handleChangeLength,\n    className,\n    height,\n    width,\n    length,\n    unit = 'cm',\n    hasError,\n    ...rest\n  }) => {\n    const compact = size === 'sm';\n\n    const childProps: ChildComponentProps = {\n      inputGroup: {\n        hasError,\n        compact,\n        style: styles.inputGroup,\n      },\n      textField: {\n        type: 'number',\n        min: '0',\n        step: 'any',\n        onKeyDown: blockInvalidChars,\n        size,\n        hasError,\n        style: styles.textField,\n        ...rest,\n      },\n      inputAffix: {\n        compact,\n      },\n    };\n\n    return (\n      <Stack direction=\"horizontal\" alignY=\"center\" className={className}>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>L</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"length\"\n            value={length}\n            aria-label=\"Length\"\n            aria-describedby=\"length-unit\"\n            onChange={handleChangeLength}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>W</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"width\"\n            value={width}\n            aria-label=\"Width\"\n            aria-describedby=\"width-unit\"\n            onChange={handleChangeWidth}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>H</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"height\"\n            value={height}\n            aria-label=\"Height\"\n            aria-describedby=\"height-unit\"\n            onChange={handleChangeHeight}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n      </Stack>\n    );\n  },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DimensionsInput.js","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n// Share WeightInput's module so both inputs use one source of truth for the\n// group/field/affix border + affix text treatment.\nimport styles from '../WeightInput/WeightInput.module.scss';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { TextField, TextFieldProps } from '../TextField';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n  ({\n    size = 'base',\n    handleChangeHeight,\n    handleChangeWidth,\n    handleChangeLength,\n    className,\n    height,\n    width,\n    length,\n    unit = 'cm',\n    hasError,\n    placeholder = '0',\n    ...rest\n  }) => {\n    const compact = size === 'sm';\n\n    // Default (grey-base) outline for both field + affix; omitted on error so the\n    // error/focus border colours take over. Matches WeightInput exactly.\n    const defaultBorder = hasError ? undefined : styles.defaultBorder;\n\n    // Group gets an error modifier so the focus-within ring turns red on error.\n    const groupClass = buildClassnames([styles.group, hasError && styles.groupError]);\n\n    const childProps: ChildComponentProps = {\n      inputGroup: {\n        hasError,\n        compact,\n        className: groupClass,\n      },\n      textField: {\n        type: 'number',\n        min: '0',\n        step: 'any',\n        onKeyDown: blockInvalidChars,\n        size,\n        hasError,\n        className: buildClassnames([styles.field, defaultBorder]),\n        ...rest,\n      },\n      inputAffix: {\n        compact,\n        className: buildClassnames([styles.affix, defaultBorder]),\n      },\n    };\n\n    return (\n      <FlexRow alignItems=\"center\" gap={3} className={className}>\n        <InputGroup {...childProps.inputGroup}>\n          <InputAffix {...childProps.inputAffix}>L</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"length\"\n            value={length}\n            aria-label=\"Length\"\n            aria-describedby=\"length-unit\"\n            onChange={handleChangeLength}\n            placeholder={placeholder}\n          />\n          <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup}>\n          <InputAffix {...childProps.inputAffix}>W</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"width\"\n            value={width}\n            aria-label=\"Width\"\n            aria-describedby=\"width-unit\"\n            onChange={handleChangeWidth}\n            placeholder={placeholder}\n          />\n          <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup}>\n          <InputAffix {...childProps.inputAffix}>H</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"height\"\n            value={height}\n            aria-label=\"Height\"\n            aria-describedby=\"height-unit\"\n            onChange={handleChangeHeight}\n            placeholder={placeholder}\n          />\n          <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n      </FlexRow>\n    );\n  },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["React"],"mappings":"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"}

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

@@ -9,4 +9,6 @@ export type DimensionsProps = TextFieldProps & {
     unit?: string;
     className?: string;
     hasError?: boolean;
+    /** Placeholder shown in each empty field. Mirrors Figma's `Placeholder` property. Defaults to `'0'`. */
+    placeholder?: string;
 };

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.cjs

@@ -2,29 +2,51 @@
 
 var React = require('react');
 var LoginWithAmazonButton_module = require('./LoginWithAmazonButton.module.scss.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var Action = require('../Action/Action.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';
-const buttonPressedImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';
 const buttonDescription = 'Log in with Amazon';
+const LWA_IMAGE_BASE = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa';
+/** Amazon's abbreviated colour code used in the button asset filenames. */
+const VARIANT_COLOR = {
+    gold: 'gold',
+    darkgray: 'drkgry',
+    lightgray: 'gry',
+};
+/** Intrinsic pixel dimensions of the button asset for each size. */
+const SIZE_DIMENSIONS = {
+    base: '312x64',
+    sm: '152x64',
+    xs: '64x64',
+};
+/** Rendered size (half the 2x asset). Set on the <img> so the browser reserves space before load (CLS). */
+const RENDERED_SIZE = {
+    base: { width: 156, height: 32 },
+    sm: { width: 76, height: 32 },
+    xs: { width: 32, height: 32 },
+};
+const lwaImageSrc = (variant, size, pressed) => `${LWA_IMAGE_BASE}/btnLWA_${VARIANT_COLOR[variant]}_${SIZE_DIMENSIONS[size]}${pressed ? '_pressed' : ''}.png`;
 /**
- * Image used in this button is to comply with official
- * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).
+ * A "Log in with Amazon" button rendered from Amazon's official button artwork,
+ * in line with the [Login with Amazon button guidelines](https://developer.amazon.com/docs/login-with-amazon/button.html).
+ *
+ * Built on `Action` (`appearance="unstyled"`), so it inherits Action's reset, native
+ * `disabled` handling and data-attribute support. The button swaps to its pressed artwork
+ * via `:active`, so mouse, touch and keyboard activation all show it. Colour is chosen with
+ * `variant` (gold / darkgray / lightgray) and dimensions with `size` (base / sm / xs); the
+ * two together select the exact asset. The accessible name defaults to "Log in with Amazon"
+ * and can be overridden via `aria-label` for localisation.
+ *
+ * @summary official Amazon sign-in button
  */
-const LoginWithAmazonButton = (props) => {
-    const [image, setImage] = React.useState(buttonImg);
-    const handleMouseDown = () => {
-        setImage(buttonPressedImg);
-    };
-    const handleMouseUp = () => {
-        setImage(buttonImg);
-    };
-    return (React__default.default.createElement("button", { type: "button", className: LoginWithAmazonButton_module.loginButton, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
-        React__default.default.createElement("img", { src: image, alt: buttonDescription })));
-};
+const LoginWithAmazonButton = ({ variant = 'gold', size = 'base', className, ...props }) => (React__default.default.createElement(Action.Action, { "aria-label": buttonDescription, ...props, appearance: "unstyled", className: buildClassnames.buildClassnames([LoginWithAmazonButton_module.loginButton, className]) },
+    React__default.default.createElement("img", { className: LoginWithAmazonButton_module['default-state'], src: lwaImageSrc(variant, size, false), alt: "", ...RENDERED_SIZE[size] }),
+    React__default.default.createElement("img", { className: LoginWithAmazonButton_module['pressed-state'], src: lwaImageSrc(variant, size, true), alt: "", ...RENDERED_SIZE[size] })));
 
 exports.LoginWithAmazonButton = LoginWithAmazonButton;
 exports.buttonDescription = buttonDescription;

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoginWithAmazonButton.cjs","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styles from './LoginWithAmazonButton.module.scss';\n\nconst buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';\nconst buttonPressedImg =\n  'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';\n\nexport const buttonDescription = 'Log in with Amazon';\n\n/**\n * Image used in this button is to comply with official\n * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).\n */\nexport const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = (\n  props,\n) => {\n  const [image, setImage] = useState(buttonImg);\n\n  const handleMouseDown = () => {\n    setImage(buttonPressedImg);\n  };\n\n  const handleMouseUp = () => {\n    setImage(buttonImg);\n  };\n\n  return (\n    <button\n      type=\"button\"\n      className={styles.loginButton}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      aria-label={buttonDescription}\n      {...props}\n    >\n      {/* alt attr for better accessibility if image is failed to load */}\n      <img src={image} alt={buttonDescription} />\n    </button>\n  );\n};\n"],"names":["useState","React","styles"],"mappings":";;;;;;;;;AAGA,MAAM,SAAS,GAAG,gFAAgF;AAClG,MAAM,gBAAgB,GACpB,wFAAwF;AAEnF,MAAM,iBAAiB,GAAG;AAEjC;;;AAGG;AACI,MAAM,qBAAqB,GAA4D,CAC5F,KAAK,KACH;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAC,SAAS,CAAC;IAE7C,MAAM,eAAe,GAAG,MAAK;QAC3B,QAAQ,CAAC,gBAAgB,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,CAAC,SAAS,CAAC;AACrB,IAAA,CAAC;IAED,QACEC,iDACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAEC,4BAAM,CAAC,WAAW,EAC7B,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EAAA,YAAA,EACZ,iBAAiB,EAAA,GACzB,KAAK,EAAA;QAGTD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAA,CAAI,CACpC;AAEb;;;;;"}
+{"version":3,"file":"LoginWithAmazonButton.cjs","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './LoginWithAmazonButton.module.scss';\nimport { buildClassnames } from '../../utils';\nimport { Action } from '../Action';\nimport type {\n  LoginWithAmazonButtonProps,\n  LoginWithAmazonButtonSize,\n  LoginWithAmazonButtonVariant,\n} from './types';\n\nexport const buttonDescription = 'Log in with Amazon';\n\nconst LWA_IMAGE_BASE = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa';\n\n/** Amazon's abbreviated colour code used in the button asset filenames. */\nconst VARIANT_COLOR: Record<LoginWithAmazonButtonVariant, string> = {\n  gold: 'gold',\n  darkgray: 'drkgry',\n  lightgray: 'gry',\n};\n\n/** Intrinsic pixel dimensions of the button asset for each size. */\nconst SIZE_DIMENSIONS: Record<LoginWithAmazonButtonSize, string> = {\n  base: '312x64',\n  sm: '152x64',\n  xs: '64x64',\n};\n\n/** Rendered size (half the 2x asset). Set on the <img> so the browser reserves space before load (CLS). */\nconst RENDERED_SIZE: Record<LoginWithAmazonButtonSize, { width: number; height: number }> = {\n  base: { width: 156, height: 32 },\n  sm: { width: 76, height: 32 },\n  xs: { width: 32, height: 32 },\n};\n\nconst lwaImageSrc = (\n  variant: LoginWithAmazonButtonVariant,\n  size: LoginWithAmazonButtonSize,\n  pressed: boolean,\n) =>\n  `${LWA_IMAGE_BASE}/btnLWA_${VARIANT_COLOR[variant]}_${SIZE_DIMENSIONS[size]}${pressed ? '_pressed' : ''}.png`;\n\n/**\n * A \"Log in with Amazon\" button rendered from Amazon's official button artwork,\n * in line with the [Login with Amazon button guidelines](https://developer.amazon.com/docs/login-with-amazon/button.html).\n *\n * Built on `Action` (`appearance=\"unstyled\"`), so it inherits Action's reset, native\n * `disabled` handling and data-attribute support. The button swaps to its pressed artwork\n * via `:active`, so mouse, touch and keyboard activation all show it. Colour is chosen with\n * `variant` (gold / darkgray / lightgray) and dimensions with `size` (base / sm / xs); the\n * two together select the exact asset. The accessible name defaults to \"Log in with Amazon\"\n * and can be overridden via `aria-label` for localisation.\n *\n * @summary official Amazon sign-in button\n */\nexport const LoginWithAmazonButton = ({\n  variant = 'gold',\n  size = 'base',\n  className,\n  ...props\n}: LoginWithAmazonButtonProps) => (\n  <Action\n    aria-label={buttonDescription}\n    {...props}\n    appearance=\"unstyled\"\n    className={buildClassnames([styles.loginButton, className])}\n  >\n    {/* Both images are rendered so the pressed artwork is preloaded; CSS shows one at a time.\n        They are decorative (alt=\"\") because the button's aria-label carries the accessible name. */}\n    <img\n      className={styles['default-state']}\n      src={lwaImageSrc(variant, size, false)}\n      alt=\"\"\n      {...RENDERED_SIZE[size]}\n    />\n    <img\n      className={styles['pressed-state']}\n      src={lwaImageSrc(variant, size, true)}\n      alt=\"\"\n      {...RENDERED_SIZE[size]}\n    />\n  </Action>\n);\n"],"names":["React","Action","buildClassnames","styles"],"mappings":";;;;;;;;;;;;AAUO,MAAM,iBAAiB,GAAG;AAEjC,MAAM,cAAc,GAAG,yDAAyD;AAEhF;AACA,MAAM,aAAa,GAAiD;AAClE,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,QAAQ,EAAE,QAAQ;AAClB,IAAA,SAAS,EAAE,KAAK;CACjB;AAED;AACA,MAAM,eAAe,GAA8C;AACjE,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,OAAO;CACZ;AAED;AACA,MAAM,aAAa,GAAyE;IAC1F,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE;IAChC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;IAC7B,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;CAC9B;AAED,MAAM,WAAW,GAAG,CAClB,OAAqC,EACrC,IAA+B,EAC/B,OAAgB,KAEhB,CAAA,EAAG,cAAc,CAAA,QAAA,EAAW,aAAa,CAAC,OAAO,CAAC,CAAA,CAAA,EAAI,eAAe,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,UAAU,GAAG,EAAE,MAAM;AAE/G;;;;;;;;;;;;AAYG;MACU,qBAAqB,GAAG,CAAC,EACpC,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,SAAS,EACT,GAAG,KAAK,EACmB,MAC3BA,sBAAA,CAAA,aAAA,CAACC,aAAM,kBACO,iBAAiB,EAAA,GACzB,KAAK,EACT,UAAU,EAAC,UAAU,EACrB,SAAS,EAAEC,+BAAe,CAAC,CAACC,4BAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,EAAA;IAI3DH,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEG,4BAAM,CAAC,eAAe,CAAC,EAClC,GAAG,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,EACtC,GAAG,EAAC,EAAE,EAAA,GACF,aAAa,CAAC,IAAI,CAAC,EAAA,CACvB;AACF,IAAAH,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEG,4BAAM,CAAC,eAAe,CAAC,EAClC,GAAG,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,EACrC,GAAG,EAAC,EAAE,EAAA,GACF,aAAa,CAAC,IAAI,CAAC,EAAA,CACvB,CACK;;;;;"}

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.d.ts

@@ -1,7 +1,17 @@
 import React from 'react';
+import type { LoginWithAmazonButtonProps } from './types';
 export declare const buttonDescription = "Log in with Amazon";
 /**
- * Image used in this button is to comply with official
- * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).
+ * A "Log in with Amazon" button rendered from Amazon's official button artwork,
+ * in line with the [Login with Amazon button guidelines](https://developer.amazon.com/docs/login-with-amazon/button.html).
+ *
+ * Built on `Action` (`appearance="unstyled"`), so it inherits Action's reset, native
+ * `disabled` handling and data-attribute support. The button swaps to its pressed artwork
+ * via `:active`, so mouse, touch and keyboard activation all show it. Colour is chosen with
+ * `variant` (gold / darkgray / lightgray) and dimensions with `size` (base / sm / xs); the
+ * two together select the exact asset. The accessible name defaults to "Log in with Amazon"
+ * and can be overridden via `aria-label` for localisation.
+ *
+ * @summary official Amazon sign-in button
  */
-export declare const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>>;
+export declare const LoginWithAmazonButton: ({ variant, size, className, ...props }: LoginWithAmazonButtonProps) => React.JSX.Element;

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.js

@@ -1,24 +1,46 @@
-import React__default, { useState } from 'react';
+import React__default from 'react';
 import styles from './LoginWithAmazonButton.module.scss.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { Action } from '../Action/Action.js';
 
-const buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';
-const buttonPressedImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';
 const buttonDescription = 'Log in with Amazon';
+const LWA_IMAGE_BASE = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa';
+/** Amazon's abbreviated colour code used in the button asset filenames. */
+const VARIANT_COLOR = {
+    gold: 'gold',
+    darkgray: 'drkgry',
+    lightgray: 'gry',
+};
+/** Intrinsic pixel dimensions of the button asset for each size. */
+const SIZE_DIMENSIONS = {
+    base: '312x64',
+    sm: '152x64',
+    xs: '64x64',
+};
+/** Rendered size (half the 2x asset). Set on the <img> so the browser reserves space before load (CLS). */
+const RENDERED_SIZE = {
+    base: { width: 156, height: 32 },
+    sm: { width: 76, height: 32 },
+    xs: { width: 32, height: 32 },
+};
+const lwaImageSrc = (variant, size, pressed) => `${LWA_IMAGE_BASE}/btnLWA_${VARIANT_COLOR[variant]}_${SIZE_DIMENSIONS[size]}${pressed ? '_pressed' : ''}.png`;
 /**
- * Image used in this button is to comply with official
- * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).
+ * A "Log in with Amazon" button rendered from Amazon's official button artwork,
+ * in line with the [Login with Amazon button guidelines](https://developer.amazon.com/docs/login-with-amazon/button.html).
+ *
+ * Built on `Action` (`appearance="unstyled"`), so it inherits Action's reset, native
+ * `disabled` handling and data-attribute support. The button swaps to its pressed artwork
+ * via `:active`, so mouse, touch and keyboard activation all show it. Colour is chosen with
+ * `variant` (gold / darkgray / lightgray) and dimensions with `size` (base / sm / xs); the
+ * two together select the exact asset. The accessible name defaults to "Log in with Amazon"
+ * and can be overridden via `aria-label` for localisation.
+ *
+ * @summary official Amazon sign-in button
  */
-const LoginWithAmazonButton = (props) => {
-    const [image, setImage] = useState(buttonImg);
-    const handleMouseDown = () => {
-        setImage(buttonPressedImg);
-    };
-    const handleMouseUp = () => {
-        setImage(buttonImg);
-    };
-    return (React__default.createElement("button", { type: "button", className: styles.loginButton, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
-        React__default.createElement("img", { src: image, alt: buttonDescription })));
-};
+const LoginWithAmazonButton = ({ variant = 'gold', size = 'base', className, ...props }) => (React__default.createElement(Action, { "aria-label": buttonDescription, ...props, appearance: "unstyled", className: buildClassnames([styles.loginButton, className]) },
+    React__default.createElement("img", { className: styles['default-state'], src: lwaImageSrc(variant, size, false), alt: "", ...RENDERED_SIZE[size] }),
+    React__default.createElement("img", { className: styles['pressed-state'], src: lwaImageSrc(variant, size, true), alt: "", ...RENDERED_SIZE[size] })));
 
 export { LoginWithAmazonButton, buttonDescription };
 //# sourceMappingURL=LoginWithAmazonButton.js.map

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoginWithAmazonButton.js","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styles from './LoginWithAmazonButton.module.scss';\n\nconst buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';\nconst buttonPressedImg =\n  'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';\n\nexport const buttonDescription = 'Log in with Amazon';\n\n/**\n * Image used in this button is to comply with official\n * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).\n */\nexport const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = (\n  props,\n) => {\n  const [image, setImage] = useState(buttonImg);\n\n  const handleMouseDown = () => {\n    setImage(buttonPressedImg);\n  };\n\n  const handleMouseUp = () => {\n    setImage(buttonImg);\n  };\n\n  return (\n    <button\n      type=\"button\"\n      className={styles.loginButton}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      aria-label={buttonDescription}\n      {...props}\n    >\n      {/* alt attr for better accessibility if image is failed to load */}\n      <img src={image} alt={buttonDescription} />\n    </button>\n  );\n};\n"],"names":["React"],"mappings":";;;AAGA,MAAM,SAAS,GAAG,gFAAgF;AAClG,MAAM,gBAAgB,GACpB,wFAAwF;AAEnF,MAAM,iBAAiB,GAAG;AAEjC;;;AAGG;AACI,MAAM,qBAAqB,GAA4D,CAC5F,KAAK,KACH;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC;IAE7C,MAAM,eAAe,GAAG,MAAK;QAC3B,QAAQ,CAAC,gBAAgB,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,CAAC,SAAS,CAAC;AACrB,IAAA,CAAC;IAED,QACEA,yCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EAAA,YAAA,EACZ,iBAAiB,EAAA,GACzB,KAAK,EAAA;QAGTA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAA,CAAI,CACpC;AAEb;;;;"}
+{"version":3,"file":"LoginWithAmazonButton.js","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './LoginWithAmazonButton.module.scss';\nimport { buildClassnames } from '../../utils';\nimport { Action } from '../Action';\nimport type {\n  LoginWithAmazonButtonProps,\n  LoginWithAmazonButtonSize,\n  LoginWithAmazonButtonVariant,\n} from './types';\n\nexport const buttonDescription = 'Log in with Amazon';\n\nconst LWA_IMAGE_BASE = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa';\n\n/** Amazon's abbreviated colour code used in the button asset filenames. */\nconst VARIANT_COLOR: Record<LoginWithAmazonButtonVariant, string> = {\n  gold: 'gold',\n  darkgray: 'drkgry',\n  lightgray: 'gry',\n};\n\n/** Intrinsic pixel dimensions of the button asset for each size. */\nconst SIZE_DIMENSIONS: Record<LoginWithAmazonButtonSize, string> = {\n  base: '312x64',\n  sm: '152x64',\n  xs: '64x64',\n};\n\n/** Rendered size (half the 2x asset). Set on the <img> so the browser reserves space before load (CLS). */\nconst RENDERED_SIZE: Record<LoginWithAmazonButtonSize, { width: number; height: number }> = {\n  base: { width: 156, height: 32 },\n  sm: { width: 76, height: 32 },\n  xs: { width: 32, height: 32 },\n};\n\nconst lwaImageSrc = (\n  variant: LoginWithAmazonButtonVariant,\n  size: LoginWithAmazonButtonSize,\n  pressed: boolean,\n) =>\n  `${LWA_IMAGE_BASE}/btnLWA_${VARIANT_COLOR[variant]}_${SIZE_DIMENSIONS[size]}${pressed ? '_pressed' : ''}.png`;\n\n/**\n * A \"Log in with Amazon\" button rendered from Amazon's official button artwork,\n * in line with the [Login with Amazon button guidelines](https://developer.amazon.com/docs/login-with-amazon/button.html).\n *\n * Built on `Action` (`appearance=\"unstyled\"`), so it inherits Action's reset, native\n * `disabled` handling and data-attribute support. The button swaps to its pressed artwork\n * via `:active`, so mouse, touch and keyboard activation all show it. Colour is chosen with\n * `variant` (gold / darkgray / lightgray) and dimensions with `size` (base / sm / xs); the\n * two together select the exact asset. The accessible name defaults to \"Log in with Amazon\"\n * and can be overridden via `aria-label` for localisation.\n *\n * @summary official Amazon sign-in button\n */\nexport const LoginWithAmazonButton = ({\n  variant = 'gold',\n  size = 'base',\n  className,\n  ...props\n}: LoginWithAmazonButtonProps) => (\n  <Action\n    aria-label={buttonDescription}\n    {...props}\n    appearance=\"unstyled\"\n    className={buildClassnames([styles.loginButton, className])}\n  >\n    {/* Both images are rendered so the pressed artwork is preloaded; CSS shows one at a time.\n        They are decorative (alt=\"\") because the button's aria-label carries the accessible name. */}\n    <img\n      className={styles['default-state']}\n      src={lwaImageSrc(variant, size, false)}\n      alt=\"\"\n      {...RENDERED_SIZE[size]}\n    />\n    <img\n      className={styles['pressed-state']}\n      src={lwaImageSrc(variant, size, true)}\n      alt=\"\"\n      {...RENDERED_SIZE[size]}\n    />\n  </Action>\n);\n"],"names":["React"],"mappings":";;;;;;AAUO,MAAM,iBAAiB,GAAG;AAEjC,MAAM,cAAc,GAAG,yDAAyD;AAEhF;AACA,MAAM,aAAa,GAAiD;AAClE,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,QAAQ,EAAE,QAAQ;AAClB,IAAA,SAAS,EAAE,KAAK;CACjB;AAED;AACA,MAAM,eAAe,GAA8C;AACjE,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,OAAO;CACZ;AAED;AACA,MAAM,aAAa,GAAyE;IAC1F,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE;IAChC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;IAC7B,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;CAC9B;AAED,MAAM,WAAW,GAAG,CAClB,OAAqC,EACrC,IAA+B,EAC/B,OAAgB,KAEhB,CAAA,EAAG,cAAc,CAAA,QAAA,EAAW,aAAa,CAAC,OAAO,CAAC,CAAA,CAAA,EAAI,eAAe,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,UAAU,GAAG,EAAE,MAAM;AAE/G;;;;;;;;;;;;AAYG;MACU,qBAAqB,GAAG,CAAC,EACpC,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,SAAS,EACT,GAAG,KAAK,EACmB,MAC3BA,cAAA,CAAA,aAAA,CAAC,MAAM,kBACO,iBAAiB,EAAA,GACzB,KAAK,EACT,UAAU,EAAC,UAAU,EACrB,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,EAAA;IAI3DA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAClC,GAAG,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,EACtC,GAAG,EAAC,EAAE,EAAA,GACF,aAAa,CAAC,IAAI,CAAC,EAAA,CACvB;AACF,IAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAClC,GAAG,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,EACrC,GAAG,EAAC,EAAE,EAAA,GACF,aAAa,CAAC,IAAI,CAAC,EAAA,CACvB,CACK;;;;"}

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

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._loginButton_y5bj1_1 {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n}\n._loginButton_y5bj1_1 img {\n  width: 156px;\n  height: 32px;\n}");
-var styles = {"loginButton":"_loginButton_y5bj1_1"};
+___$insertStyle("._loginButton_1aojq_1 {\n  --lwa-outline-width: var(--sizes-xs);\n  --lwa-highlight-color: var(--colors-secondary-blue-light);\n}\n._loginButton_1aojq_1 img {\n  display: block;\n}\n._loginButton_1aojq_1:hover:not(:disabled) {\n  opacity: 0.9;\n}\n._loginButton_1aojq_1:focus-visible {\n  outline: var(--lwa-outline-width) solid var(--lwa-highlight-color);\n}\n._loginButton_1aojq_1:disabled, ._loginButton_1aojq_1:disabled:hover {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n._loginButton_1aojq_1 ._pressed-state_1aojq_18, ._loginButton_1aojq_1:active:not(:disabled) ._default-state_1aojq_18 {\n  display: none;\n}\n._loginButton_1aojq_1:active:not(:disabled) ._pressed-state_1aojq_18 {\n  display: block;\n}");
+var styles = {"loginButton":"_loginButton_1aojq_1","pressed-state":"_pressed-state_1aojq_18","default-state":"_default-state_1aojq_18"};
 
 module.exports = styles;
 //# sourceMappingURL=LoginWithAmazonButton.module.scss.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"LoginWithAmazonButton.module.scss.cjs","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.module.scss"],"sourcesContent":[".loginButton {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n\n  img {\n    width: 156px;\n    height: 32px;\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,uKAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA;;;;"}
+{"version":3,"file":"LoginWithAmazonButton.module.scss.cjs","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.module.scss"],"sourcesContent":["// Reset (appearance/border/background/padding/cursor) comes from Action's `unstyled` appearance.\n// Image dimensions are set via width/height attributes on the <img> (see RENDERED_SIZE in the\n// component) so the browser reserves space before load.\n.loginButton {\n  --lwa-outline-width: var(--sizes-xs);\n  --lwa-highlight-color: var(--colors-secondary-blue-light);\n\n  img {\n    display: block;\n  }\n\n  // The fill is fixed raster artwork, so a background hover would be invisible;\n  // a slight dim is the treatment Amazon's own LWA guidelines use.\n  &:hover:not(:disabled) {\n    opacity: 0.9;\n  }\n\n  &:focus-visible {\n    outline: var(--lwa-outline-width) solid var(--lwa-highlight-color);\n  }\n\n  // `&:disabled:hover` out-specifies Action's reset `:hover { cursor: pointer }`,\n  // which would otherwise win depending on stylesheet load order.\n  &:disabled,\n  &:disabled:hover {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .pressed-state,\n  &:active:not(:disabled) .default-state {\n    display: none;\n  }\n\n  &:active:not(:disabled) .pressed-state {\n    display: block;\n  }\n}\n"],"names":[],"mappings":";;;;AAIE,eAAA,CAAA,wsBAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,eAAA,CAAA,yBAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._loginButton_y5bj1_1 {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n}\n._loginButton_y5bj1_1 img {\n  width: 156px;\n  height: 32px;\n}");
-var styles = {"loginButton":"_loginButton_y5bj1_1"};
+insertStyle("._loginButton_1aojq_1 {\n  --lwa-outline-width: var(--sizes-xs);\n  --lwa-highlight-color: var(--colors-secondary-blue-light);\n}\n._loginButton_1aojq_1 img {\n  display: block;\n}\n._loginButton_1aojq_1:hover:not(:disabled) {\n  opacity: 0.9;\n}\n._loginButton_1aojq_1:focus-visible {\n  outline: var(--lwa-outline-width) solid var(--lwa-highlight-color);\n}\n._loginButton_1aojq_1:disabled, ._loginButton_1aojq_1:disabled:hover {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n._loginButton_1aojq_1 ._pressed-state_1aojq_18, ._loginButton_1aojq_1:active:not(:disabled) ._default-state_1aojq_18 {\n  display: none;\n}\n._loginButton_1aojq_1:active:not(:disabled) ._pressed-state_1aojq_18 {\n  display: block;\n}");
+var styles = {"loginButton":"_loginButton_1aojq_1","pressed-state":"_pressed-state_1aojq_18","default-state":"_default-state_1aojq_18"};
 
 export { styles as default };
 //# sourceMappingURL=LoginWithAmazonButton.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LoginWithAmazonButton.module.scss.js","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.module.scss"],"sourcesContent":[".loginButton {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n\n  img {\n    width: 156px;\n    height: 32px;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,uKAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA;;;;"}
+{"version":3,"file":"LoginWithAmazonButton.module.scss.js","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.module.scss"],"sourcesContent":["// Reset (appearance/border/background/padding/cursor) comes from Action's `unstyled` appearance.\n// Image dimensions are set via width/height attributes on the <img> (see RENDERED_SIZE in the\n// component) so the browser reserves space before load.\n.loginButton {\n  --lwa-outline-width: var(--sizes-xs);\n  --lwa-highlight-color: var(--colors-secondary-blue-light);\n\n  img {\n    display: block;\n  }\n\n  // The fill is fixed raster artwork, so a background hover would be invisible;\n  // a slight dim is the treatment Amazon's own LWA guidelines use.\n  &:hover:not(:disabled) {\n    opacity: 0.9;\n  }\n\n  &:focus-visible {\n    outline: var(--lwa-outline-width) solid var(--lwa-highlight-color);\n  }\n\n  // `&:disabled:hover` out-specifies Action's reset `:hover { cursor: pointer }`,\n  // which would otherwise win depending on stylesheet load order.\n  &:disabled,\n  &:disabled:hover {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .pressed-state,\n  &:active:not(:disabled) .default-state {\n    display: none;\n  }\n\n  &:active:not(:disabled) .pressed-state {\n    display: block;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AAIEA,WAAA,CAAA,wsBAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,eAAA,CAAA,yBAAA;;;;"}

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

@@ -1 +1,2 @@
 export { LoginWithAmazonButton } from './LoginWithAmazonButton';
+export type { LoginWithAmazonButtonProps, LoginWithAmazonButtonSize, LoginWithAmazonButtonVariant, } from './types';

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

@@ -0,0 +1,25 @@
+import type { ActionProps } from '../Action';
+export type LoginWithAmazonButtonVariant = 'gold' | 'darkgray' | 'lightgray';
+export type LoginWithAmazonButtonSize = 'base' | 'sm' | 'xs';
+/**
+ * Built on `Action` with the `unstyled` appearance. The Action props that would fight
+ * the fixed Amazon artwork are removed: `children`/`iconSlot`/`dropdown` (the artwork IS
+ * the content), `href`/`as` (always a `<button>`), Action's own `variant`/`size`/
+ * `appearance` (replaced by the artwork-specific ones below), and `loading` (Action's
+ * spinner is absolutely positioned against `.base`, which `unstyled` does not apply, so
+ * it would render outside the button).
+ */
+export type LoginWithAmazonButtonProps = Omit<ActionProps<'button'>, 'appearance' | 'as' | 'children' | 'dropdown' | 'href' | 'iconSlot' | 'loading' | 'size' | 'variant'> & {
+    /**
+     * Official Amazon button colour. `gold` is Amazon's recommended default;
+     * use `darkgray` on light surfaces and `lightgray` on dark surfaces where
+     * gold lacks contrast. Selects the hardcoded Amazon artwork — not themeable.
+     */
+    variant?: LoginWithAmazonButtonVariant;
+    /**
+     * Button size, selecting both the rendered dimensions and the matching artwork.
+     * `base` (156×32) and `sm` (76×32) are wide badges; `xs` (32×32) is Amazon's
+     * square icon-only mark, so it is a different aspect ratio rather than a smaller badge.
+     */
+    size?: LoginWithAmazonButtonSize;
+};

package/dist/components/Skeleton/Skeleton.cjs

@@ -10,6 +10,17 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+/**
+ * Skeleton is a shimmering placeholder shown while content is loading, giving a
+ * consistent sense of where content will appear before it arrives. Size it with
+ * `width` and `height` to match the content it stands in for.
+ *
+ * It is intentionally barebones and is hidden from screen readers
+ * (`aria-hidden`). Loading must be communicated to assistive technology at the
+ * container or page level using `aria-busy` and a `ScreenReaderOnly` label.
+ *
+ * @summary loading placeholder for content
+ */
 const Skeleton = ({ width, height, style, className, ...rest }) => {
     return (React__default.default.createElement("div", { "aria-hidden": "true", style: { ...assignCssVars.assignCssVars({ width, height }), ...style }, className: buildClassnames.buildClassnames([Skeleton_module.skeleton, className]), ...rest }));
 };

package/dist/components/Skeleton/Skeleton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.cjs","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement> & {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = ({ width, height, style, className, ...rest }: SkeletonProps) => {\n  return (\n    <div\n      aria-hidden=\"true\"\n      style={{ ...assignCssVars({ width, height }), ...style }}\n      className={buildClassnames([styles.skeleton, className])}\n      {...rest}\n    />\n  );\n};\n"],"names":["React","assignCssVars","buildClassnames","styles"],"mappings":";;;;;;;;;;;;AAYO,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAiB,KAAI;AACtF,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,KAAK,EAAE,EAAE,GAAGC,2BAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EACxD,SAAS,EAAEC,+BAAe,CAAC,CAACC,eAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,KACpD,IAAI,EAAA,CACR;AAEN;;;;"}
+{"version":3,"file":"Skeleton.cjs","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement> & {\n  /** Width of the placeholder as any CSS length. Defaults to `100%`. */\n  width?: string;\n  /** Height of the placeholder as any CSS length. Defaults to `20px`. */\n  height?: string;\n};\n\n/**\n * Skeleton is a shimmering placeholder shown while content is loading, giving a\n * consistent sense of where content will appear before it arrives. Size it with\n * `width` and `height` to match the content it stands in for.\n *\n * It is intentionally barebones and is hidden from screen readers\n * (`aria-hidden`). Loading must be communicated to assistive technology at the\n * container or page level using `aria-busy` and a `ScreenReaderOnly` label.\n *\n * @summary loading placeholder for content\n */\nexport const Skeleton = ({ width, height, style, className, ...rest }: SkeletonProps) => {\n  return (\n    <div\n      aria-hidden=\"true\"\n      style={{ ...assignCssVars({ width, height }), ...style }}\n      className={buildClassnames([styles.skeleton, className])}\n      {...rest}\n    />\n  );\n};\n"],"names":["React","assignCssVars","buildClassnames","styles"],"mappings":";;;;;;;;;;;;AAcA;;;;;;;;;;AAUG;AACI,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAiB,KAAI;AACtF,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,KAAK,EAAE,EAAE,GAAGC,2BAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EACxD,SAAS,EAAEC,+BAAe,CAAC,CAACC,eAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,KACpD,IAAI,EAAA,CACR;AAEN;;;;"}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,7 +1,20 @@
 import React, { HTMLAttributes } from 'react';
 type SkeletonProps = HTMLAttributes<HTMLDivElement> & {
+    /** Width of the placeholder as any CSS length. Defaults to `100%`. */
     width?: string;
+    /** Height of the placeholder as any CSS length. Defaults to `20px`. */
     height?: string;
 };
+/**
+ * Skeleton is a shimmering placeholder shown while content is loading, giving a
+ * consistent sense of where content will appear before it arrives. Size it with
+ * `width` and `height` to match the content it stands in for.
+ *
+ * It is intentionally barebones and is hidden from screen readers
+ * (`aria-hidden`). Loading must be communicated to assistive technology at the
+ * container or page level using `aria-busy` and a `ScreenReaderOnly` label.
+ *
+ * @summary loading placeholder for content
+ */
 export declare const Skeleton: ({ width, height, style, className, ...rest }: SkeletonProps) => React.JSX.Element;
 export {};

package/dist/components/Skeleton/Skeleton.js

@@ -4,6 +4,17 @@ import 'uid/secure';
 import { assignCssVars } from '../../utils/assignCssVars.js';
 import styles from './Skeleton.module.scss.js';
 
+/**
+ * Skeleton is a shimmering placeholder shown while content is loading, giving a
+ * consistent sense of where content will appear before it arrives. Size it with
+ * `width` and `height` to match the content it stands in for.
+ *
+ * It is intentionally barebones and is hidden from screen readers
+ * (`aria-hidden`). Loading must be communicated to assistive technology at the
+ * container or page level using `aria-busy` and a `ScreenReaderOnly` label.
+ *
+ * @summary loading placeholder for content
+ */
 const Skeleton = ({ width, height, style, className, ...rest }) => {
     return (React__default.createElement("div", { "aria-hidden": "true", style: { ...assignCssVars({ width, height }), ...style }, className: buildClassnames([styles.skeleton, className]), ...rest }));
 };

package/dist/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement> & {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = ({ width, height, style, className, ...rest }: SkeletonProps) => {\n  return (\n    <div\n      aria-hidden=\"true\"\n      style={{ ...assignCssVars({ width, height }), ...style }}\n      className={buildClassnames([styles.skeleton, className])}\n      {...rest}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAYO,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAiB,KAAI;AACtF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,KAAK,EAAE,EAAE,GAAG,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EACxD,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,KACpD,IAAI,EAAA,CACR;AAEN;;;;"}
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement> & {\n  /** Width of the placeholder as any CSS length. Defaults to `100%`. */\n  width?: string;\n  /** Height of the placeholder as any CSS length. Defaults to `20px`. */\n  height?: string;\n};\n\n/**\n * Skeleton is a shimmering placeholder shown while content is loading, giving a\n * consistent sense of where content will appear before it arrives. Size it with\n * `width` and `height` to match the content it stands in for.\n *\n * It is intentionally barebones and is hidden from screen readers\n * (`aria-hidden`). Loading must be communicated to assistive technology at the\n * container or page level using `aria-busy` and a `ScreenReaderOnly` label.\n *\n * @summary loading placeholder for content\n */\nexport const Skeleton = ({ width, height, style, className, ...rest }: SkeletonProps) => {\n  return (\n    <div\n      aria-hidden=\"true\"\n      style={{ ...assignCssVars({ width, height }), ...style }}\n      className={buildClassnames([styles.skeleton, className])}\n      {...rest}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAcA;;;;;;;;;;AAUG;AACI,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAiB,KAAI;AACtF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,KAAK,EAAE,EAAE,GAAG,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EACxD,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,KACpD,IAAI,EAAA,CACR;AAEN;;;;"}

package/dist/components/WeightInput/WeightInput.cjs

@@ -9,8 +9,8 @@ var invalidCharactersNumeric = require('../../utils/invalidCharactersNumeric.cjs
 var WeightInput_module = require('./WeightInput.module.scss.cjs');
 var InputAffix = require('../InputAffix/InputAffix.cjs');
 var InputGroup = require('../InputGroup/InputGroup.cjs');
-var Stack = require('../Stack/Stack.cjs');
 var index = require('../TextField/index.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
 var types = require('./types.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -27,11 +27,6 @@ const WeightInput = withLabels.withLabels((props) => {
     // Group gets an error modifier so the focus-within ring turns red on error.
     const groupClass = buildClassnames.buildClassnames([WeightInput_module.group, hasError && WeightInput_module.groupError]);
     const childProps = {
-        stack: {
-            direction: 'horizontal',
-            alignY: 'center',
-            spacing: 'base',
-        },
         inputGroup: {
             className: groupClass,
             hasError,
@@ -60,7 +55,7 @@ const WeightInput = withLabels.withLabels((props) => {
     }
     // If the weight is imperial, render pounds and ounces
     if (types.isWeightImperial(props)) {
-        return (React__default.default.createElement(Stack.Stack, { ...childProps.stack, className: className },
+        return (React__default.default.createElement(FlexRow.FlexRow, { alignItems: "center", gap: "base", className: className },
             React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup },
                 React__default.default.createElement(index.TextField, { ...childProps.textField, name: "pound", value: props.pound, "aria-label": "Pounds", onChange: props.handleChangePound }),
                 React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "lb")),

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

@@ -1 +1 @@
-{"version":3,"file":"WeightInput.cjs","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport styles from './WeightInput.module.scss';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\nimport { Stack, StackProps } from '../Stack';\nimport { TextField, TextFieldProps } from '../TextField';\n\nimport { WeightProps, isWeightImperial, isWeightMetric } from './types';\n\ntype ChildComponentProps = {\n  stack: Partial<StackProps>;\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const WeightInput = withLabels<WeightProps>((props) => {\n  const { size = 'base', hasError, disabled, className } = props;\n\n  const compact = size === 'sm';\n\n  // Default (#CDD1D5) outline for both field + affix; omitted on error so the\n  // error/focus border colours take over.\n  const defaultBorder = hasError ? undefined : styles.defaultBorder;\n\n  // Group gets an error modifier so the focus-within ring turns red on error.\n  const groupClass = buildClassnames([styles.group, hasError && styles.groupError]);\n\n  const childProps: ChildComponentProps = {\n    stack: {\n      direction: 'horizontal',\n      alignY: 'center',\n      spacing: 'base',\n    },\n    inputGroup: {\n      className: groupClass,\n      hasError,\n    },\n    textField: {\n      type: 'number',\n      placeholder: '0.00',\n      min: '0',\n      step: 'any',\n      size,\n      disabled,\n      hasError,\n      onKeyDown: blockInvalidChars,\n      className: buildClassnames([styles.field, defaultBorder]),\n    },\n    inputAffix: {\n      compact,\n      className: buildClassnames([styles.affix, defaultBorder]),\n    },\n  };\n\n  // If the weight is metric, render grams\n  if (isWeightMetric(props)) {\n    return (\n      <InputGroup {...childProps.inputGroup} className={buildClassnames([groupClass, className])}>\n        <TextField\n          {...childProps.textField}\n          name=\"gram\"\n          value={props.gram}\n          aria-label=\"Grams\"\n          onChange={props.handleChangeGram}\n        />\n        <InputAffix {...childProps.inputAffix}>g</InputAffix>\n      </InputGroup>\n    );\n  }\n\n  // If the weight is imperial, render pounds and ounces\n  if (isWeightImperial(props)) {\n    return (\n      <Stack {...childProps.stack} className={className}>\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"pound\"\n            value={props.pound}\n            aria-label=\"Pounds\"\n            onChange={props.handleChangePound}\n          />\n          <InputAffix {...childProps.inputAffix}>lb</InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"ounce\"\n            value={props.ounce}\n            aria-label=\"Ounces\"\n            onChange={props.handleChangeOunce}\n          />\n          <InputAffix {...childProps.inputAffix}>oz</InputAffix>\n        </InputGroup>\n      </Stack>\n    );\n  }\n\n  // If neither metric nor imperial, return null or handle as needed\n  return null;\n});\n\nWeightInput.displayName = 'WeightInput';\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","styles","buildClassnames","isWeightMetric","React","InputGroup","TextField","InputAffix","isWeightImperial","Stack"],"mappings":"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"}
+{"version":3,"file":"WeightInput.cjs","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport styles from './WeightInput.module.scss';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\nimport { TextField, TextFieldProps } from '../TextField';\n\nimport { FlexRow } from '../Flex/FlexRow';\nimport { WeightProps, isWeightImperial, isWeightMetric } from './types';\n\ntype ChildComponentProps = {\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const WeightInput = withLabels<WeightProps>((props) => {\n  const { size = 'base', hasError, disabled, className } = props;\n\n  const compact = size === 'sm';\n\n  // Default (#CDD1D5) outline for both field + affix; omitted on error so the\n  // error/focus border colours take over.\n  const defaultBorder = hasError ? undefined : styles.defaultBorder;\n\n  // Group gets an error modifier so the focus-within ring turns red on error.\n  const groupClass = buildClassnames([styles.group, hasError && styles.groupError]);\n\n  const childProps: ChildComponentProps = {\n    inputGroup: {\n      className: groupClass,\n      hasError,\n    },\n    textField: {\n      type: 'number',\n      placeholder: '0.00',\n      min: '0',\n      step: 'any',\n      size,\n      disabled,\n      hasError,\n      onKeyDown: blockInvalidChars,\n      className: buildClassnames([styles.field, defaultBorder]),\n    },\n    inputAffix: {\n      compact,\n      className: buildClassnames([styles.affix, defaultBorder]),\n    },\n  };\n\n  // If the weight is metric, render grams\n  if (isWeightMetric(props)) {\n    return (\n      <InputGroup {...childProps.inputGroup} className={buildClassnames([groupClass, className])}>\n        <TextField\n          {...childProps.textField}\n          name=\"gram\"\n          value={props.gram}\n          aria-label=\"Grams\"\n          onChange={props.handleChangeGram}\n        />\n        <InputAffix {...childProps.inputAffix}>g</InputAffix>\n      </InputGroup>\n    );\n  }\n\n  // If the weight is imperial, render pounds and ounces\n  if (isWeightImperial(props)) {\n    return (\n      <FlexRow alignItems=\"center\" gap=\"base\" className={className}>\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"pound\"\n            value={props.pound}\n            aria-label=\"Pounds\"\n            onChange={props.handleChangePound}\n          />\n          <InputAffix {...childProps.inputAffix}>lb</InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"ounce\"\n            value={props.ounce}\n            aria-label=\"Ounces\"\n            onChange={props.handleChangeOunce}\n          />\n          <InputAffix {...childProps.inputAffix}>oz</InputAffix>\n        </InputGroup>\n      </FlexRow>\n    );\n  }\n\n  // If neither metric nor imperial, return null or handle as needed\n  return null;\n});\n\nWeightInput.displayName = 'WeightInput';\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","styles","buildClassnames","isWeightMetric","React","InputGroup","TextField","InputAffix","isWeightImperial","FlexRow"],"mappings":"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"}

package/dist/components/WeightInput/WeightInput.js

@@ -7,8 +7,8 @@ import { invalidCharsList } from '../../utils/invalidCharactersNumeric.js';
 import styles from './WeightInput.module.scss.js';
 import { InputAffix } from '../InputAffix/InputAffix.js';
 import { InputGroup } from '../InputGroup/InputGroup.js';
-import { Stack } from '../Stack/Stack.js';
 import { TextField } from '../TextField/index.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
 import { isWeightMetric, isWeightImperial } from './types.js';
 
 const blockInvalidChars = (e) => blockInvalidCharacters(e, invalidCharsList);
@@ -21,11 +21,6 @@ const WeightInput = withLabels((props) => {
     // Group gets an error modifier so the focus-within ring turns red on error.
     const groupClass = buildClassnames([styles.group, hasError && styles.groupError]);
     const childProps = {
-        stack: {
-            direction: 'horizontal',
-            alignY: 'center',
-            spacing: 'base',
-        },
         inputGroup: {
             className: groupClass,
             hasError,
@@ -54,7 +49,7 @@ const WeightInput = withLabels((props) => {
     }
     // If the weight is imperial, render pounds and ounces
     if (isWeightImperial(props)) {
-        return (React__default.createElement(Stack, { ...childProps.stack, className: className },
+        return (React__default.createElement(FlexRow, { alignItems: "center", gap: "base", className: className },
             React__default.createElement(InputGroup, { ...childProps.inputGroup },
                 React__default.createElement(TextField, { ...childProps.textField, name: "pound", value: props.pound, "aria-label": "Pounds", onChange: props.handleChangePound }),
                 React__default.createElement(InputAffix, { ...childProps.inputAffix }, "lb")),

package/dist/components/WeightInput/WeightInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"WeightInput.js","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport styles from './WeightInput.module.scss';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\nimport { Stack, StackProps } from '../Stack';\nimport { TextField, TextFieldProps } from '../TextField';\n\nimport { WeightProps, isWeightImperial, isWeightMetric } from './types';\n\ntype ChildComponentProps = {\n  stack: Partial<StackProps>;\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const WeightInput = withLabels<WeightProps>((props) => {\n  const { size = 'base', hasError, disabled, className } = props;\n\n  const compact = size === 'sm';\n\n  // Default (#CDD1D5) outline for both field + affix; omitted on error so the\n  // error/focus border colours take over.\n  const defaultBorder = hasError ? undefined : styles.defaultBorder;\n\n  // Group gets an error modifier so the focus-within ring turns red on error.\n  const groupClass = buildClassnames([styles.group, hasError && styles.groupError]);\n\n  const childProps: ChildComponentProps = {\n    stack: {\n      direction: 'horizontal',\n      alignY: 'center',\n      spacing: 'base',\n    },\n    inputGroup: {\n      className: groupClass,\n      hasError,\n    },\n    textField: {\n      type: 'number',\n      placeholder: '0.00',\n      min: '0',\n      step: 'any',\n      size,\n      disabled,\n      hasError,\n      onKeyDown: blockInvalidChars,\n      className: buildClassnames([styles.field, defaultBorder]),\n    },\n    inputAffix: {\n      compact,\n      className: buildClassnames([styles.affix, defaultBorder]),\n    },\n  };\n\n  // If the weight is metric, render grams\n  if (isWeightMetric(props)) {\n    return (\n      <InputGroup {...childProps.inputGroup} className={buildClassnames([groupClass, className])}>\n        <TextField\n          {...childProps.textField}\n          name=\"gram\"\n          value={props.gram}\n          aria-label=\"Grams\"\n          onChange={props.handleChangeGram}\n        />\n        <InputAffix {...childProps.inputAffix}>g</InputAffix>\n      </InputGroup>\n    );\n  }\n\n  // If the weight is imperial, render pounds and ounces\n  if (isWeightImperial(props)) {\n    return (\n      <Stack {...childProps.stack} className={className}>\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"pound\"\n            value={props.pound}\n            aria-label=\"Pounds\"\n            onChange={props.handleChangePound}\n          />\n          <InputAffix {...childProps.inputAffix}>lb</InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"ounce\"\n            value={props.ounce}\n            aria-label=\"Ounces\"\n            onChange={props.handleChangeOunce}\n          />\n          <InputAffix {...childProps.inputAffix}>oz</InputAffix>\n        </InputGroup>\n      </Stack>\n    );\n  }\n\n  // If neither metric nor imperial, return null or handle as needed\n  return null;\n});\n\nWeightInput.displayName = 'WeightInput';\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"WeightInput.js","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport styles from './WeightInput.module.scss';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\nimport { TextField, TextFieldProps } from '../TextField';\n\nimport { FlexRow } from '../Flex/FlexRow';\nimport { WeightProps, isWeightImperial, isWeightMetric } from './types';\n\ntype ChildComponentProps = {\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const WeightInput = withLabels<WeightProps>((props) => {\n  const { size = 'base', hasError, disabled, className } = props;\n\n  const compact = size === 'sm';\n\n  // Default (#CDD1D5) outline for both field + affix; omitted on error so the\n  // error/focus border colours take over.\n  const defaultBorder = hasError ? undefined : styles.defaultBorder;\n\n  // Group gets an error modifier so the focus-within ring turns red on error.\n  const groupClass = buildClassnames([styles.group, hasError && styles.groupError]);\n\n  const childProps: ChildComponentProps = {\n    inputGroup: {\n      className: groupClass,\n      hasError,\n    },\n    textField: {\n      type: 'number',\n      placeholder: '0.00',\n      min: '0',\n      step: 'any',\n      size,\n      disabled,\n      hasError,\n      onKeyDown: blockInvalidChars,\n      className: buildClassnames([styles.field, defaultBorder]),\n    },\n    inputAffix: {\n      compact,\n      className: buildClassnames([styles.affix, defaultBorder]),\n    },\n  };\n\n  // If the weight is metric, render grams\n  if (isWeightMetric(props)) {\n    return (\n      <InputGroup {...childProps.inputGroup} className={buildClassnames([groupClass, className])}>\n        <TextField\n          {...childProps.textField}\n          name=\"gram\"\n          value={props.gram}\n          aria-label=\"Grams\"\n          onChange={props.handleChangeGram}\n        />\n        <InputAffix {...childProps.inputAffix}>g</InputAffix>\n      </InputGroup>\n    );\n  }\n\n  // If the weight is imperial, render pounds and ounces\n  if (isWeightImperial(props)) {\n    return (\n      <FlexRow alignItems=\"center\" gap=\"base\" className={className}>\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"pound\"\n            value={props.pound}\n            aria-label=\"Pounds\"\n            onChange={props.handleChangePound}\n          />\n          <InputAffix {...childProps.inputAffix}>lb</InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"ounce\"\n            value={props.ounce}\n            aria-label=\"Ounces\"\n            onChange={props.handleChangeOunce}\n          />\n          <InputAffix {...childProps.inputAffix}>oz</InputAffix>\n        </InputGroup>\n      </FlexRow>\n    );\n  }\n\n  // If neither metric nor imperial, return null or handle as needed\n  return null;\n});\n\nWeightInput.displayName = 'WeightInput';\n"],"names":["React"],"mappings":"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"}

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

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._group_ypnkv_1 {\n  flex: 1;\n  --interactive-border: var(--colors-secondary-blue-base);\n  --focus-ring: var(--colors-secondary-blue-light);\n  /* Only focus/active states additionally get the outer focus ring. */\n}\n._group_ypnkv_1 ._defaultBorder_ypnkv_7 {\n  --border-color: var(--colors-neutral-grey-dark);\n}\n._group_ypnkv_1:not(:has(:disabled)):hover, ._group_ypnkv_1:focus-within, ._group_ypnkv_1:not(:has(:disabled)):active {\n  border-radius: var(--radius-base);\n}\n._group_ypnkv_1:not(:has(:disabled)):hover > ._field_ypnkv_13,\n._group_ypnkv_1:not(:has(:disabled)):hover > ._affix_ypnkv_14, ._group_ypnkv_1:focus-within > ._field_ypnkv_13,\n._group_ypnkv_1:focus-within > ._affix_ypnkv_14, ._group_ypnkv_1:not(:has(:disabled)):active > ._field_ypnkv_13,\n._group_ypnkv_1:not(:has(:disabled)):active > ._affix_ypnkv_14 {\n  outline: none;\n  border-color: var(--interactive-border);\n}\n._group_ypnkv_1:focus-within, ._group_ypnkv_1:not(:has(:disabled)):active {\n  outline: var(--sizes-xs) solid var(--focus-ring);\n}\n\n._field_ypnkv_13 {\n  flex: 1;\n}\n\n._affix_ypnkv_14 {\n  flex: 0;\n}\n\n._groupError_ypnkv_32 {\n  --interactive-border: var(--colors-secondary-red-base);\n  --focus-ring: var(--colors-secondary-red-light);\n}\n._groupError_ypnkv_32 > ._field_ypnkv_13,\n._groupError_ypnkv_32 > ._affix_ypnkv_14 {\n  outline: none;\n  border-color: var(--colors-secondary-red-base);\n}");
-var styles = {"group":"_group_ypnkv_1","defaultBorder":"_defaultBorder_ypnkv_7","field":"_field_ypnkv_13","affix":"_affix_ypnkv_14","groupError":"_groupError_ypnkv_32"};
+___$insertStyle("._group_5x4fb_1 {\n  flex: 1;\n  --interactive-border: var(--colors-secondary-blue-base);\n  --focus-ring: var(--colors-secondary-blue-light);\n  /* Only focus/active states additionally get the outer focus ring. */\n}\n._group_5x4fb_1 ._defaultBorder_5x4fb_7 {\n  --border-color: var(--colors-neutral-grey-base);\n}\n._group_5x4fb_1:not(:has(:disabled)):hover, ._group_5x4fb_1:focus-within, ._group_5x4fb_1:not(:has(:disabled)):active {\n  border-radius: var(--radius-base);\n}\n._group_5x4fb_1:not(:has(:disabled)):hover > ._field_5x4fb_13,\n._group_5x4fb_1:not(:has(:disabled)):hover > ._affix_5x4fb_14, ._group_5x4fb_1:focus-within > ._field_5x4fb_13,\n._group_5x4fb_1:focus-within > ._affix_5x4fb_14, ._group_5x4fb_1:not(:has(:disabled)):active > ._field_5x4fb_13,\n._group_5x4fb_1:not(:has(:disabled)):active > ._affix_5x4fb_14 {\n  outline: none;\n  border-color: var(--interactive-border);\n}\n._group_5x4fb_1:focus-within, ._group_5x4fb_1:not(:has(:disabled)):active {\n  outline: var(--sizes-xs) solid var(--focus-ring);\n}\n\n._field_5x4fb_13 {\n  flex: 1;\n}\n\n._affix_5x4fb_14 {\n  flex: 0;\n  --text-hint-text-color: var(--colors-neutral-ink-lightest);\n  --text-hint-text-line-height: var(--text-body-line-height);\n}\n\n._groupError_5x4fb_34 {\n  --interactive-border: var(--colors-secondary-red-base);\n  --focus-ring: var(--colors-secondary-red-light);\n}\n._groupError_5x4fb_34 > ._field_5x4fb_13,\n._groupError_5x4fb_34 > ._affix_5x4fb_14 {\n  outline: none;\n  border-color: var(--colors-secondary-red-base);\n}");
+var styles = {"group":"_group_5x4fb_1","defaultBorder":"_defaultBorder_5x4fb_7","field":"_field_5x4fb_13","affix":"_affix_5x4fb_14","groupError":"_groupError_5x4fb_34"};
 
 module.exports = styles;
 //# sourceMappingURL=WeightInput.module.scss.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"WeightInput.module.scss.cjs","sources":["../../../src/components/WeightInput/WeightInput.module.scss"],"sourcesContent":[".group {\n  flex: 1;\n\n  --interactive-border: var(--colors-secondary-blue-base);\n  --focus-ring: var(--colors-secondary-blue-light);\n  .defaultBorder {\n    --border-color: var(--colors-neutral-grey-dark);\n  }\n\n  &:not(:has(:disabled)):hover,\n  &:focus-within,\n  &:not(:has(:disabled)):active {\n    border-radius: var(--radius-base);\n    > .field,\n    > .affix {\n      outline: none;\n      border-color: var(--interactive-border);\n    }\n  }\n\n  /* Only focus/active states additionally get the outer focus ring. */\n  &:focus-within,\n  &:not(:has(:disabled)):active {\n    outline: var(--sizes-xs) solid var(--focus-ring);\n  }\n}\n\n.field {\n  flex: 1;\n}\n\n.affix {\n  flex: 0;\n}\n\n.groupError {\n  --interactive-border: var(--colors-secondary-red-base);\n  --focus-ring: var(--colors-secondary-red-light);\n\n  > .field,\n  > .affix {\n    outline: none;\n    border-color: var(--colors-secondary-red-base);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,i4CAAA;AAEA,aAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}
+{"version":3,"file":"WeightInput.module.scss.cjs","sources":["../../../src/components/WeightInput/WeightInput.module.scss"],"sourcesContent":[".group {\n  flex: 1;\n\n  --interactive-border: var(--colors-secondary-blue-base);\n  --focus-ring: var(--colors-secondary-blue-light);\n  .defaultBorder {\n    --border-color: var(--colors-neutral-grey-base);\n  }\n\n  &:not(:has(:disabled)):hover,\n  &:focus-within,\n  &:not(:has(:disabled)):active {\n    border-radius: var(--radius-base);\n    > .field,\n    > .affix {\n      outline: none;\n      border-color: var(--interactive-border);\n    }\n  }\n\n  /* Only focus/active states additionally get the outer focus ring. */\n  &:focus-within,\n  &:not(:has(:disabled)):active {\n    outline: var(--sizes-xs) solid var(--focus-ring);\n  }\n}\n\n.field {\n  flex: 1;\n}\n\n.affix {\n  flex: 0;\n\n  --text-hint-text-color: var(--colors-neutral-ink-lightest);\n  --text-hint-text-line-height: var(--text-body-line-height);\n}\n\n.groupError {\n  --interactive-border: var(--colors-secondary-red-base);\n  --focus-ring: var(--colors-secondary-red-light);\n\n  > .field,\n  > .affix {\n    outline: none;\n    border-color: var(--colors-secondary-red-base);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+/CAAA;AAEA,aAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._group_ypnkv_1 {\n  flex: 1;\n  --interactive-border: var(--colors-secondary-blue-base);\n  --focus-ring: var(--colors-secondary-blue-light);\n  /* Only focus/active states additionally get the outer focus ring. */\n}\n._group_ypnkv_1 ._defaultBorder_ypnkv_7 {\n  --border-color: var(--colors-neutral-grey-dark);\n}\n._group_ypnkv_1:not(:has(:disabled)):hover, ._group_ypnkv_1:focus-within, ._group_ypnkv_1:not(:has(:disabled)):active {\n  border-radius: var(--radius-base);\n}\n._group_ypnkv_1:not(:has(:disabled)):hover > ._field_ypnkv_13,\n._group_ypnkv_1:not(:has(:disabled)):hover > ._affix_ypnkv_14, ._group_ypnkv_1:focus-within > ._field_ypnkv_13,\n._group_ypnkv_1:focus-within > ._affix_ypnkv_14, ._group_ypnkv_1:not(:has(:disabled)):active > ._field_ypnkv_13,\n._group_ypnkv_1:not(:has(:disabled)):active > ._affix_ypnkv_14 {\n  outline: none;\n  border-color: var(--interactive-border);\n}\n._group_ypnkv_1:focus-within, ._group_ypnkv_1:not(:has(:disabled)):active {\n  outline: var(--sizes-xs) solid var(--focus-ring);\n}\n\n._field_ypnkv_13 {\n  flex: 1;\n}\n\n._affix_ypnkv_14 {\n  flex: 0;\n}\n\n._groupError_ypnkv_32 {\n  --interactive-border: var(--colors-secondary-red-base);\n  --focus-ring: var(--colors-secondary-red-light);\n}\n._groupError_ypnkv_32 > ._field_ypnkv_13,\n._groupError_ypnkv_32 > ._affix_ypnkv_14 {\n  outline: none;\n  border-color: var(--colors-secondary-red-base);\n}");
-var styles = {"group":"_group_ypnkv_1","defaultBorder":"_defaultBorder_ypnkv_7","field":"_field_ypnkv_13","affix":"_affix_ypnkv_14","groupError":"_groupError_ypnkv_32"};
+insertStyle("._group_5x4fb_1 {\n  flex: 1;\n  --interactive-border: var(--colors-secondary-blue-base);\n  --focus-ring: var(--colors-secondary-blue-light);\n  /* Only focus/active states additionally get the outer focus ring. */\n}\n._group_5x4fb_1 ._defaultBorder_5x4fb_7 {\n  --border-color: var(--colors-neutral-grey-base);\n}\n._group_5x4fb_1:not(:has(:disabled)):hover, ._group_5x4fb_1:focus-within, ._group_5x4fb_1:not(:has(:disabled)):active {\n  border-radius: var(--radius-base);\n}\n._group_5x4fb_1:not(:has(:disabled)):hover > ._field_5x4fb_13,\n._group_5x4fb_1:not(:has(:disabled)):hover > ._affix_5x4fb_14, ._group_5x4fb_1:focus-within > ._field_5x4fb_13,\n._group_5x4fb_1:focus-within > ._affix_5x4fb_14, ._group_5x4fb_1:not(:has(:disabled)):active > ._field_5x4fb_13,\n._group_5x4fb_1:not(:has(:disabled)):active > ._affix_5x4fb_14 {\n  outline: none;\n  border-color: var(--interactive-border);\n}\n._group_5x4fb_1:focus-within, ._group_5x4fb_1:not(:has(:disabled)):active {\n  outline: var(--sizes-xs) solid var(--focus-ring);\n}\n\n._field_5x4fb_13 {\n  flex: 1;\n}\n\n._affix_5x4fb_14 {\n  flex: 0;\n  --text-hint-text-color: var(--colors-neutral-ink-lightest);\n  --text-hint-text-line-height: var(--text-body-line-height);\n}\n\n._groupError_5x4fb_34 {\n  --interactive-border: var(--colors-secondary-red-base);\n  --focus-ring: var(--colors-secondary-red-light);\n}\n._groupError_5x4fb_34 > ._field_5x4fb_13,\n._groupError_5x4fb_34 > ._affix_5x4fb_14 {\n  outline: none;\n  border-color: var(--colors-secondary-red-base);\n}");
+var styles = {"group":"_group_5x4fb_1","defaultBorder":"_defaultBorder_5x4fb_7","field":"_field_5x4fb_13","affix":"_affix_5x4fb_14","groupError":"_groupError_5x4fb_34"};
 
 export { styles as default };
 //# sourceMappingURL=WeightInput.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"WeightInput.module.scss.js","sources":["../../../src/components/WeightInput/WeightInput.module.scss"],"sourcesContent":[".group {\n  flex: 1;\n\n  --interactive-border: var(--colors-secondary-blue-base);\n  --focus-ring: var(--colors-secondary-blue-light);\n  .defaultBorder {\n    --border-color: var(--colors-neutral-grey-dark);\n  }\n\n  &:not(:has(:disabled)):hover,\n  &:focus-within,\n  &:not(:has(:disabled)):active {\n    border-radius: var(--radius-base);\n    > .field,\n    > .affix {\n      outline: none;\n      border-color: var(--interactive-border);\n    }\n  }\n\n  /* Only focus/active states additionally get the outer focus ring. */\n  &:focus-within,\n  &:not(:has(:disabled)):active {\n    outline: var(--sizes-xs) solid var(--focus-ring);\n  }\n}\n\n.field {\n  flex: 1;\n}\n\n.affix {\n  flex: 0;\n}\n\n.groupError {\n  --interactive-border: var(--colors-secondary-red-base);\n  --focus-ring: var(--colors-secondary-red-light);\n\n  > .field,\n  > .affix {\n    outline: none;\n    border-color: var(--colors-secondary-red-base);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,i4CAAA;AAEA,aAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}
+{"version":3,"file":"WeightInput.module.scss.js","sources":["../../../src/components/WeightInput/WeightInput.module.scss"],"sourcesContent":[".group {\n  flex: 1;\n\n  --interactive-border: var(--colors-secondary-blue-base);\n  --focus-ring: var(--colors-secondary-blue-light);\n  .defaultBorder {\n    --border-color: var(--colors-neutral-grey-base);\n  }\n\n  &:not(:has(:disabled)):hover,\n  &:focus-within,\n  &:not(:has(:disabled)):active {\n    border-radius: var(--radius-base);\n    > .field,\n    > .affix {\n      outline: none;\n      border-color: var(--interactive-border);\n    }\n  }\n\n  /* Only focus/active states additionally get the outer focus ring. */\n  &:focus-within,\n  &:not(:has(:disabled)):active {\n    outline: var(--sizes-xs) solid var(--focus-ring);\n  }\n}\n\n.field {\n  flex: 1;\n}\n\n.affix {\n  flex: 0;\n\n  --text-hint-text-color: var(--colors-neutral-ink-lightest);\n  --text-hint-text-line-height: var(--text-body-line-height);\n}\n\n.groupError {\n  --interactive-border: var(--colors-secondary-red-base);\n  --focus-ring: var(--colors-secondary-red-light);\n\n  > .field,\n  > .affix {\n    outline: none;\n    border-color: var(--colors-secondary-red-base);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+/CAAA;AAEA,aAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}

package/dist/components/index.d.ts

@@ -39,7 +39,7 @@ export { InputAffix } from './InputAffix';
 export { InputGroup, type InputGroupProps } from './InputGroup';
 export { LegacyDataTable } from './LegacyDataTable';
 export { Loader } from './Loader';
-export { LoginWithAmazonButton } from './LoginWithAmazonButton';
+export { LoginWithAmazonButton, type LoginWithAmazonButtonProps, type LoginWithAmazonButtonSize, type LoginWithAmazonButtonVariant, } from './LoginWithAmazonButton';
 export { Modal, type Action as ModalAction, type ModalProps } from './Modal';
 export { Pagination } from './Pagination';
 export { Popover } from './Popover';

package/package.json

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