@cimpress-ui/react 1.9.2 → 1.11.0

package/dist/esm/components/copy/copy-inline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-inline.d.ts","sourceRoot":"","sources":["../../../../src/components/copy/copy-inline.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAO/D,MAAM,WAAW,eACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,EACjC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACvE,gCAAgC;IAChC,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AA0CD;;;;GAIG;AACH,QAAA,MAAM,WAAW,oKAAuD,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}

package/dist/esm/components/copy/{inline-copy.js → copy-inline.js}

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import { useRef } from 'react';
 import { Button as RACButton } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
+import { useLocalizedMessages } from '../../i18n/index.js';
 import { IconCheckCircle, IconCopy } from '../../icons/index.js';
 import { withStyleProps } from '../../with-style-props.js';
 import { Tooltip } from '../tooltip/tooltip.js';
@@ -11,17 +12,21 @@ import { textStyle } from '../typography/utils.js';
 import { useCopyToClipboard } from './use-copy.js';
 // Used to prevent word wrap between icons and text
 const WORD_JOINER = '\u2060';
-function UNSTABLE_InlineCopy({ children, UNSAFE_className, UNSAFE_style, variant, tone, fontStyle, onCopy, ...props }, ref) {
+function CopyInline({ children, UNSAFE_className, UNSAFE_style, variant, onCopy, ...props }, ref) {
     const tooltipTriggerRef = useRef(null);
     const [copyStatus, showCopyFeedback, copyToClipboard] = useCopyToClipboard();
     const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
-    return (_jsx(Tooltip, { isOpen: showCopyFeedback, isDisabled: props.isDisabled, 
-        // TODO: i18n
-        label: copyStatus?.success ? 'Copied to clipboard.' : 'Failed to copy to clipboard.', placement: "top", triggerRef: tooltipTriggerRef, children: _jsxs(RACButton, { ...props, ref: ref, className: clsx('cim-inline-copy', textStyle({ variant, tone, fontStyle }), UNSAFE_className), style: UNSAFE_style, onPress: () => {
+    const messages = useLocalizedMessages('copyToClipboard');
+    return (_jsx(Tooltip, { isOpen: showCopyFeedback, isDisabled: props.isDisabled, label: copyStatus?.success ? messages.format('success') : messages.format('failure'), placement: "top", triggerRef: tooltipTriggerRef, children: _jsxs(RACButton, { ...props, ref: ref, className: clsx('cim-copy-inline', textStyle({ variant, tone: 'base' }), UNSAFE_className), style: UNSAFE_style, onPress: () => {
                 copyToClipboard(textValue);
                 onCopy?.();
-            }, children: [_jsx("span", { className: "cim-inline-copy-text", children: children }), WORD_JOINER, _jsx("span", { className: "cim-inline-copy-icon", ref: tooltipTriggerRef, children: showCopyFeedback ? _jsx(IconCheckCircle, {}) : _jsx(IconCopy, {}) })] }) }));
+            }, children: [_jsx("span", { className: "cim-copy-inline-text", children: children }), WORD_JOINER, _jsx("span", { className: "cim-copy-inline-icon", ref: tooltipTriggerRef, children: showCopyFeedback ? _jsx(IconCheckCircle, {}) : _jsx(IconCopy, {}) })] }) }));
 }
-const _UNSTABLE_InlineCopy = withStyleProps(forwardRef(UNSTABLE_InlineCopy), 'InlineCopy');
-export { _UNSTABLE_InlineCopy as UNSTABLE_InlineCopy };
-//# sourceMappingURL=inline-copy.js.map
+/**
+ * Allows copying an inline value to clipboard.
+ *
+ * See [copy inline usage guidelines](https://ui.cimpress.io/components/copy-inline/).
+ */
+const _CopyInline = withStyleProps(forwardRef(CopyInline), 'CopyInline');
+export { _CopyInline as CopyInline };
+//# sourceMappingURL=copy-inline.js.map

package/dist/esm/components/copy/copy-inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-inline.js","sourceRoot":"","sources":["../../../../src/components/copy/copy-inline.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,EAAqB,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD,mDAAmD;AACnD,MAAM,WAAW,GAAG,QAAQ,CAAC;AAa7B,SAAS,UAAU,CACjB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAmB,EACxF,GAAoC;IAEpC,MAAM,iBAAiB,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,UAAU,EAAE,gBAAgB,EAAE,eAAe,CAAC,GAAG,kBAAkB,EAAE,CAAC;IAE7E,MAAM,SAAS,GACb,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEhH,MAAM,QAAQ,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAEzD,OAAO,CACL,KAAC,OAAO,IACN,MAAM,EAAE,gBAAgB,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,EACpF,SAAS,EAAC,KAAK,EACf,UAAU,EAAE,iBAAiB,YAE7B,MAAC,SAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,gBAAgB,CAAC,EAC1F,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,GAAG,EAAE;gBACZ,eAAe,CAAC,SAAS,CAAC,CAAC;gBAC3B,MAAM,EAAE,EAAE,CAAC;YACb,CAAC,aAED,eAAM,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAQ,EACvD,WAAW,EACZ,eAAM,SAAS,EAAC,sBAAsB,EAAC,GAAG,EAAE,iBAAiB,YAC1D,gBAAgB,CAAC,CAAC,CAAC,KAAC,eAAe,KAAG,CAAC,CAAC,CAAC,KAAC,QAAQ,KAAG,GACjD,IACG,GACJ,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useRef, type ForwardedRef } from 'react';\nimport { Button as RACButton } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheckCircle, IconCopy } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { ActionButtonProps } from '../button/types.js';\nimport { Tooltip } from '../tooltip/tooltip.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport type { TextStyleOptions } from '../typography/types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { useCopyToClipboard } from './use-copy.js';\n\n// Used to prevent word wrap between icons and text\nconst WORD_JOINER = '\\u2060';\n\nexport interface CopyInlineProps\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<TextStyleOptions, 'variant'>,\n    Pick<ActionButtonProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The content to be copied. */\n  children: StringLikeChildren;\n  /** A handler that gets called when the user triggers the copying. */\n  onCopy?: () => void;\n}\n\nfunction CopyInline(\n  { children, UNSAFE_className, UNSAFE_style, variant, onCopy, ...props }: CopyInlineProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const tooltipTriggerRef = useRef<HTMLSpanElement>(null);\n  const [copyStatus, showCopyFeedback, copyToClipboard] = useCopyToClipboard();\n\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  const messages = useLocalizedMessages('copyToClipboard');\n\n  return (\n    <Tooltip\n      isOpen={showCopyFeedback}\n      isDisabled={props.isDisabled}\n      label={copyStatus?.success ? messages.format('success') : messages.format('failure')}\n      placement=\"top\"\n      triggerRef={tooltipTriggerRef}\n    >\n      <RACButton\n        {...props}\n        ref={ref}\n        className={clsx('cim-copy-inline', textStyle({ variant, tone: 'base' }), UNSAFE_className)}\n        style={UNSAFE_style}\n        onPress={() => {\n          copyToClipboard(textValue);\n          onCopy?.();\n        }}\n      >\n        <span className=\"cim-copy-inline-text\">{children}</span>\n        {WORD_JOINER}\n        <span className=\"cim-copy-inline-icon\" ref={tooltipTriggerRef}>\n          {showCopyFeedback ? <IconCheckCircle /> : <IconCopy />}\n        </span>\n      </RACButton>\n    </Tooltip>\n  );\n}\n\n/**\n * Allows copying an inline value to clipboard.\n *\n * See [copy inline usage guidelines](https://ui.cimpress.io/components/copy-inline/).\n */\nconst _CopyInline = withStyleProps(forwardRef(CopyInline), 'CopyInline');\n\nexport { _CopyInline as CopyInline };\n"]}

package/dist/esm/components/internal/input/input.d.ts

@@ -0,0 +1,8 @@
+import { type InputProps as RACInputProps } from 'react-aria-components';
+import type { CommonProps } from '../../types.js';
+interface InputProps extends CommonProps, Exclude<RACInputProps, 'className' | 'style'> {
+    width?: 'fit-content' | 'full-width';
+}
+export declare function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=input.d.ts.map

package/dist/esm/components/internal/input/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/input/input.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,UAAU,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC5F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,UAAU,UAAW,SAAQ,WAAW,EAAE,OAAO,CAAC,aAAa,EAAE,WAAW,GAAG,OAAO,CAAC;IACrF,KAAK,CAAC,EAAE,aAAa,GAAG,YAAY,CAAC;CACtC;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAqDtC"}

package/dist/esm/components/internal/input/input.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect } from '@react-aria/utils';
+import clsx from 'clsx';
+import { useRef } from 'react';
+import { Input as RACInput } from 'react-aria-components';
+import { textStyle } from '../../typography/utils.js';
+export function Input(props) {
+    const inputRef = useRef(null);
+    // TODO: find a better way to extract common props, if a new prop is added to `CommonProps` this will break
+    const { id, UNSAFE_className, UNSAFE_style, 'data-cim-style-root': dataCimStyleRoot, width, ...inputProps } = props;
+    // Field sizing based on input length for browsers that don't support `field-sizing: content`
+    useLayoutEffect(() => {
+        const input = inputRef.current;
+        function setInputLengthStyle() {
+            // Ensure input value changes are flushed before updating input width, especially in Safari
+            requestAnimationFrame(() => input?.style.setProperty('--cim-input-length', input?.value.length.toString() ?? '0'));
+        }
+        if (input != null) {
+            setInputLengthStyle();
+            input.addEventListener('input', setInputLengthStyle);
+            input.addEventListener('change', setInputLengthStyle);
+        }
+        return () => {
+            input?.removeEventListener('input', setInputLengthStyle);
+            input?.removeEventListener('change', setInputLengthStyle);
+        };
+    }, []);
+    return (_jsx("div", { id: id, className: clsx('cim-input', UNSAFE_className), style: UNSAFE_style, "data-cim-style-root": dataCimStyleRoot, children: _jsx(RACInput, { ...inputProps, ref: inputRef, className: clsx('cim-input-control', textStyle({ variant: 'body' })), "data-width": width }) }));
+}
+//# sourceMappingURL=input.js.map

package/dist/esm/components/internal/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../src/components/internal/input/input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAoC,MAAM,uBAAuB,CAAC;AAE5F,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAMtD,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,2GAA2G;IAC3G,MAAM,EACJ,EAAE,EACF,gBAAgB,EAChB,YAAY,EACZ,qBAAqB,EAAE,gBAAgB,EAEvC,KAAK,EAEL,GAAG,UAAU,EACd,GAAG,KAAK,CAAC;IAEV,6FAA6F;IAC7F,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC;QAE/B,SAAS,mBAAmB;YAC1B,2FAA2F;YAC3F,qBAAqB,CAAC,GAAG,EAAE,CACzB,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,GAAG,CAAC,CACtF,CAAC;QACJ,CAAC;QAED,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;YAClB,mBAAmB,EAAE,CAAC;YAEtB,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;YACrD,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAC;QACxD,CAAC;QAED,OAAO,GAAG,EAAE;YACV,KAAK,EAAE,mBAAmB,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;YACzD,KAAK,EAAE,mBAAmB,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAC;QAC5D,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAC9C,KAAK,EAAE,YAAY,yBACE,gBAAgB,YAErC,KAAC,QAAQ,OACH,UAAU,EACd,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,gBACxD,KAAK,GACjB,GACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useLayoutEffect } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport { useRef } from 'react';\nimport { Input as RACInput, type InputProps as RACInputProps } from 'react-aria-components';\nimport type { CommonProps } from '../../types.js';\nimport { textStyle } from '../../typography/utils.js';\n\ninterface InputProps extends CommonProps, Exclude<RACInputProps, 'className' | 'style'> {\n  width?: 'fit-content' | 'full-width';\n}\n\nexport function Input(props: InputProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  // TODO: find a better way to extract common props, if a new prop is added to `CommonProps` this will break\n  const {\n    id,\n    UNSAFE_className,\n    UNSAFE_style,\n    'data-cim-style-root': dataCimStyleRoot,\n\n    width,\n\n    ...inputProps\n  } = props;\n\n  // Field sizing based on input length for browsers that don't support `field-sizing: content`\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n\n    function setInputLengthStyle() {\n      // Ensure input value changes are flushed before updating input width, especially in Safari\n      requestAnimationFrame(() =>\n        input?.style.setProperty('--cim-input-length', input?.value.length.toString() ?? '0'),\n      );\n    }\n\n    if (input != null) {\n      setInputLengthStyle();\n\n      input.addEventListener('input', setInputLengthStyle);\n      input.addEventListener('change', setInputLengthStyle);\n    }\n\n    return () => {\n      input?.removeEventListener('input', setInputLengthStyle);\n      input?.removeEventListener('change', setInputLengthStyle);\n    };\n  }, []);\n\n  return (\n    <div\n      id={id}\n      className={clsx('cim-input', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-cim-style-root={dataCimStyleRoot}\n    >\n      <RACInput\n        {...inputProps}\n        ref={inputRef}\n        className={clsx('cim-input-control', textStyle({ variant: 'body' }))}\n        data-width={width}\n      />\n    </div>\n  );\n}\n"]}

package/dist/esm/components/number-field/number-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGpF,MAAM,WAAW,gBACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,QAAQ,CAAC,cAAc,CAAC,EACxB,IAAI,CACF,mBAAmB,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,WAAW,GACX,UAAU,GACV,UAAU,GACV,MAAM,GACN,eAAe,GACf,SAAS,GACT,QAAQ,GACR,WAAW,CACd;IACH,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAED,iEAAiE;AACjE,MAAM,WAAW,cAAc;IAC7B,+BAA+B;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAqFD;;;;GAIG;AACH,QAAA,MAAM,YAAY,kKAAyD,CAAC;AAE5E,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC"}
+{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGpF,MAAM,WAAW,gBACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,QAAQ,CAAC,cAAc,CAAC,EACxB,IAAI,CACF,mBAAmB,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,WAAW,GACX,UAAU,GACV,UAAU,GACV,MAAM,GACN,eAAe,GACf,SAAS,GACT,QAAQ,GACR,WAAW,CACd;IACH,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAG3C;AAED,iEAAiE;AACjE,MAAM,WAAW,cAAc;IAC7B,+BAA+B;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAwFD;;;;GAIG;AACH,QAAA,MAAM,YAAY,kKAAyD,CAAC;AAE5E,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC"}

package/dist/esm/components/number-field/number-field.js

@@ -11,7 +11,7 @@ import { withStyleProps } from '../../with-style-props.js';
 import { IconButton } from '../button/icon-button.js';
 import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
 import { textStyle } from '../typography/utils.js';
-function NumberField({ label, description, error: errorMessage, placeholder, UNSAFE_className, UNSAFE_style, value, defaultValue, onChange, apiRef, ...props }, ref) {
+function NumberField({ label, description, error: errorMessage, placeholder, UNSAFE_className, UNSAFE_style, value, defaultValue, onChange, apiRef, UNSTABLE_hideSpinner, ...props }, ref) {
     const inputRef = useRef(null);
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
     useProductionWarning(() => {
@@ -28,7 +28,7 @@ function NumberField({ label, description, error: errorMessage, placeholder, UNS
         // NumberField uses `NaN` to signify an empty value, which is unintuitive
         // https://github.com/adobe/react-spectrum/issues/5524
         // https://github.com/adobe/react-spectrum/issues/6971
-        value: value === null ? Number.NaN : value, defaultValue: defaultValue === null ? Number.NaN : defaultValue, onChange: onChange ? (value) => onChange(Number.isNaN(value) ? null : value) : undefined, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACGroup, { className: "cim-number-field-input-group", children: [_jsx(RACInput, { ref: inputRef, className: clsx('cim-number-field-input', textStyle({ variant: 'body' })), placeholder: placeholder }), _jsxs("div", { className: "cim-number-field-spinner", children: [_jsx(IconButton, { slot: "decrement", icon: _jsx(IconSubtract, {}), "aria-label": messages.format('decrement'), variant: "tertiary", size: "small" }), _jsx("div", { className: "cim-number-field-spinner-separator" }), _jsx(IconButton, { slot: "increment", icon: _jsx(IconAdd, {}), "aria-label": messages.format('increment'), variant: "tertiary", size: "small" })] })] }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] }));
+        value: value === null ? Number.NaN : value, defaultValue: defaultValue === null ? Number.NaN : defaultValue, onChange: onChange ? (value) => onChange(Number.isNaN(value) ? null : value) : undefined, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACGroup, { className: "cim-number-field-input-group", children: [_jsx(RACInput, { ref: inputRef, className: clsx('cim-number-field-input', textStyle({ variant: 'body' })), placeholder: placeholder }), !UNSTABLE_hideSpinner && (_jsxs("div", { className: "cim-number-field-spinner", children: [_jsx(IconButton, { slot: "decrement", icon: _jsx(IconSubtract, {}), "aria-label": messages.format('decrement'), variant: "tertiary", size: "small" }), _jsx("div", { className: "cim-number-field-spinner-separator" }), _jsx(IconButton, { slot: "increment", icon: _jsx(IconAdd, {}), "aria-label": messages.format('increment'), variant: "tertiary", size: "small" })] }))] }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] }));
 }
 /**
  * Allows users to edit a number with a keyboard or increment/decrement buttons.

package/dist/esm/components/number-field/number-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.js","sourceRoot":"","sources":["../../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, useImperativeHandle, useRef } from 'react';\nimport {\n  Input as RACInput,\n  NumberField as RACNumberField,\n  type NumberFieldProps as RACNumberFieldProps,\n  Group as RACGroup,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconAdd, IconSubtract } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { ApiProps, CommonProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface NumberFieldProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<number>,\n    ApiProps<NumberFieldApi>,\n    Pick<\n      RACNumberFieldProps,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'autoFocus'\n      | 'minValue'\n      | 'maxValue'\n      | 'step'\n      | 'formatOptions'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onKeyDown'\n    > {\n  /** The current value (controlled). A `null` value means an empty field. */\n  value?: number | null;\n  /** The default value (uncontrolled). A `null` value means an empty field. */\n  defaultValue?: number | null;\n  /** Handler that is called when the value changes. A `null` value means an empty field. */\n  onChange?: (value: number | null) => void;\n}\n\n/** The imperative API exposed by the `NumberField` component. */\nexport interface NumberFieldApi {\n  /** Focuses the input field. */\n  focus: () => void;\n  /** Selects the contents of the input field. */\n  select: () => void;\n}\n\nfunction NumberField(\n  {\n    label,\n    description,\n    error: errorMessage,\n    placeholder,\n    UNSAFE_className,\n    UNSAFE_style,\n    value,\n    defaultValue,\n    onChange,\n    apiRef,\n    ...props\n  }: NumberFieldProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('NumberField requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  const messages = useLocalizedMessages('numberField');\n\n  useImperativeHandle(\n    apiRef,\n    () => ({\n      focus: () => inputRef.current?.focus(),\n      select: () => inputRef.current?.select(),\n    }),\n    [],\n  );\n\n  return (\n    <RACNumberField\n      {...props}\n      ref={ref}\n      className={clsx('cim-number-field', UNSAFE_className)}\n      style={UNSAFE_style}\n      // NumberField uses `NaN` to signify an empty value, which is unintuitive\n      // https://github.com/adobe/react-spectrum/issues/5524\n      // https://github.com/adobe/react-spectrum/issues/6971\n      value={value === null ? Number.NaN : value}\n      defaultValue={defaultValue === null ? Number.NaN : defaultValue}\n      onChange={onChange ? (value) => onChange(Number.isNaN(value) ? null : value) : undefined}\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-number-field-input-group\">\n        <RACInput\n          ref={inputRef}\n          className={clsx('cim-number-field-input', textStyle({ variant: 'body' }))}\n          placeholder={placeholder}\n        />\n        <div className=\"cim-number-field-spinner\">\n          <IconButton\n            slot=\"decrement\"\n            icon={<IconSubtract />}\n            aria-label={messages.format('decrement')}\n            variant=\"tertiary\"\n            size=\"small\"\n          />\n          <div className=\"cim-number-field-spinner-separator\" />\n          <IconButton\n            slot=\"increment\"\n            icon={<IconAdd />}\n            aria-label={messages.format('increment')}\n            variant=\"tertiary\"\n            size=\"small\"\n          />\n        </div>\n      </RACGroup>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACNumberField>\n  );\n}\n\n/**\n * Allows users to edit a number with a keyboard or increment/decrement buttons.\n *\n * See [number field usage guidelines](https://ui.cimpress.io/components/number-field/).\n */\nconst _NumberField = withStyleProps(forwardRef(NumberField), 'NumberField');\n\nexport { _NumberField as NumberField };\n"]}
+{"version":3,"file":"number-field.js","sourceRoot":"","sources":["../../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, useImperativeHandle, useRef } from 'react';\nimport {\n  Input as RACInput,\n  NumberField as RACNumberField,\n  type NumberFieldProps as RACNumberFieldProps,\n  Group as RACGroup,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconAdd, IconSubtract } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { ApiProps, CommonProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface NumberFieldProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<number>,\n    ApiProps<NumberFieldApi>,\n    Pick<\n      RACNumberFieldProps,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'autoFocus'\n      | 'minValue'\n      | 'maxValue'\n      | 'step'\n      | 'formatOptions'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onKeyDown'\n    > {\n  /** The current value (controlled). A `null` value means an empty field. */\n  value?: number | null;\n  /** The default value (uncontrolled). A `null` value means an empty field. */\n  defaultValue?: number | null;\n  /** Handler that is called when the value changes. A `null` value means an empty field. */\n  onChange?: (value: number | null) => void;\n  /** @internal */\n  UNSTABLE_hideSpinner?: boolean;\n}\n\n/** The imperative API exposed by the `NumberField` component. */\nexport interface NumberFieldApi {\n  /** Focuses the input field. */\n  focus: () => void;\n  /** Selects the contents of the input field. */\n  select: () => void;\n}\n\nfunction NumberField(\n  {\n    label,\n    description,\n    error: errorMessage,\n    placeholder,\n    UNSAFE_className,\n    UNSAFE_style,\n    value,\n    defaultValue,\n    onChange,\n    apiRef,\n    UNSTABLE_hideSpinner,\n    ...props\n  }: NumberFieldProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('NumberField requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  const messages = useLocalizedMessages('numberField');\n\n  useImperativeHandle(\n    apiRef,\n    () => ({\n      focus: () => inputRef.current?.focus(),\n      select: () => inputRef.current?.select(),\n    }),\n    [],\n  );\n\n  return (\n    <RACNumberField\n      {...props}\n      ref={ref}\n      className={clsx('cim-number-field', UNSAFE_className)}\n      style={UNSAFE_style}\n      // NumberField uses `NaN` to signify an empty value, which is unintuitive\n      // https://github.com/adobe/react-spectrum/issues/5524\n      // https://github.com/adobe/react-spectrum/issues/6971\n      value={value === null ? Number.NaN : value}\n      defaultValue={defaultValue === null ? Number.NaN : defaultValue}\n      onChange={onChange ? (value) => onChange(Number.isNaN(value) ? null : value) : undefined}\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-number-field-input-group\">\n        <RACInput\n          ref={inputRef}\n          className={clsx('cim-number-field-input', textStyle({ variant: 'body' }))}\n          placeholder={placeholder}\n        />\n        {!UNSTABLE_hideSpinner && (\n          <div className=\"cim-number-field-spinner\">\n            <IconButton\n              slot=\"decrement\"\n              icon={<IconSubtract />}\n              aria-label={messages.format('decrement')}\n              variant=\"tertiary\"\n              size=\"small\"\n            />\n            <div className=\"cim-number-field-spinner-separator\" />\n            <IconButton\n              slot=\"increment\"\n              icon={<IconAdd />}\n              aria-label={messages.format('increment')}\n              variant=\"tertiary\"\n              size=\"small\"\n            />\n          </div>\n        )}\n      </RACGroup>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACNumberField>\n  );\n}\n\n/**\n * Allows users to edit a number with a keyboard or increment/decrement buttons.\n *\n * See [number field usage guidelines](https://ui.cimpress.io/components/number-field/).\n */\nconst _NumberField = withStyleProps(forwardRef(NumberField), 'NumberField');\n\nexport { _NumberField as NumberField };\n"]}

package/dist/esm/components/slider/slider.d.ts

@@ -0,0 +1,34 @@
+import { type SliderProps as RACSliderProps } from 'react-aria-components';
+import type { CommonProps, LabellableProps } from '../types.js';
+export interface UNSTABLE_SliderProps<T extends number | number[] = number> extends CommonProps, LabellableProps, Pick<RACSliderProps<T>, 'isDisabled' | 'minValue' | 'maxValue' | 'step'> {
+    /** A description for the field. Provides a hint such as specific requirements for what to choose. */
+    description?: string;
+    /** The current value (controlled). */
+    value?: T;
+    /** The default value (uncontrolled). */
+    defaultValue?: T;
+    /** Handler that is called when the value changes. */
+    onChange?: (value: T) => void;
+    /** Handler that is called when the slider stops moving. */
+    onChangeEnd?: (value: T) => void;
+    /**
+     * The `<form>` element to associate the input with.
+     * The value of this attribute must be the id of a `<form>` in the same document.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
+     */
+    form?: string;
+    /**
+     * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).
+     */
+    name?: T extends number[] ? string[] : string;
+    /** Show input fields for slider values. */
+    withInput?: boolean;
+    /** Show static labels for minimum and maximum values. */
+    showLabels?: boolean;
+}
+/**
+ * Allows users to select one or more values within a range.
+ */
+declare const _UNSTABLE_Slider: <T extends number | number[] = number>(props: UNSTABLE_SliderProps<T> & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _UNSTABLE_Slider as UNSTABLE_Slider };
+//# sourceMappingURL=slider.d.ts.map

package/dist/esm/components/slider/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAYL,KAAK,WAAW,IAAI,cAAc,EACnC,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAShE,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CACxE,SAAQ,WAAW,EACjB,eAAe,EACf,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IAC1E,qGAAqG;IACrG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,2DAA2D;IAC3D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACjC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;IAC9C,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAiKD;;GAEG;AACH,QAAA,MAAM,gBAAgB,GAlKG,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,iLAkK0B,CAAC;AAE/E,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC"}

package/dist/esm/components/slider/slider.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from '@react-aria/utils';
+import clsx from 'clsx';
+import { useContext } from 'react';
+import { LabelContext as RACLabelContext, NumberField as RACNumberField, Provider as RACProvider, Slider as RACSlider, SliderOutput as RACSliderOutput, SliderStateContext as RACSliderStateContext, SliderThumb as RACSliderThumb, SliderTrack as RACSliderTrack, TextContext as RACTextContext, useSlottedContext, } from 'react-aria-components';
+import { forwardRef } from '../../forward-ref.js';
+import { useProductionWarning } from '../../utils/use-production-warning.js';
+import { withStyleProps } from '../../with-style-props.js';
+import { FormFieldDescription, FormFieldLabel } from '../internal/form-field/form-field.js';
+import { Input } from '../internal/input/input.js';
+import { Text } from '../typography/text.js';
+// TODO: move to translations when stabilized
+const sliderStrings = {
+    srMinimum: 'minimum',
+    srMaximum: 'maximum',
+};
+function UNSTABLE_Slider({ label, description, UNSAFE_className, UNSAFE_style, form, name, withInput, showLabels, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
+    const descriptionId = useId();
+    useProductionWarning(() => {
+        if (!label && !ariaLabel && !ariaLabelledBy) {
+            console.warn('Slider requires one of label / aria-label / aria-labelledby for accessibility');
+        }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    return (_jsx(RACProvider, { values: [[RACTextContext, { slots: { description: { id: descriptionId } } }]], children: _jsx(RACSlider, { ...props, ref: ref, className: clsx('cim-slider', UNSAFE_className), style: UNSAFE_style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation: "horizontal", "aria-describedby": [description && descriptionId, props['aria-describedby']].filter(Boolean).join(' '), children: ({ state, isDisabled }) => {
+                return (_jsxs(_Fragment, { children: [_jsx(FormFieldLabel, { isRequired: false, isDisabled: isDisabled, children: label }), !withInput && label != null && (_jsx(RACSliderOutput, { className: "cim-slider-output", children: _jsx(Text, { as: "span", variant: "medium", children: state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ') }) })), _jsxs("div", { className: "cim-slider-track-container", children: [showLabels && (_jsx(Text, { as: "span", variant: "medium", UNSAFE_className: "cim-slider-label-min", children: state.getThumbMinValue(0) })), _jsx(RACSliderTrack, { className: "cim-slider-track", children: ({ state: trackState, isDisabled: trackIsDisabled }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "cim-slider-track-background", "data-disabled": trackIsDisabled || undefined }), _jsx("div", { className: "cim-slider-fill", style: (state.values.length === 1
+                                                    ? {
+                                                        '--cim-slider-fill-size': trackState.getThumbPercent(0) * 100 + '%',
+                                                    }
+                                                    : state.values.length === 2
+                                                        ? {
+                                                            '--cim-slider-fill-start': trackState.getThumbPercent(0) * 100 + '%',
+                                                            '--cim-slider-fill-size': (trackState.getThumbPercent(1) - trackState.getThumbPercent(0)) * 100 + '%',
+                                                        }
+                                                        : {}) }), trackState.values.map((_, i) => (_jsx(SliderThumb, { index: i, name: typeof name === 'string' ? name : name?.[i], form: form }, i)))] })) }), showLabels && (_jsx(Text, { as: "span", variant: "medium", UNSAFE_className: "cim-slider-label-max", children: state.getThumbMaxValue(state.values.length - 1) })), withInput && (_jsx("div", { className: "cim-slider-inputs-container-wide", children: state.values.map((_, i) => (_jsx(SliderNumberField, { index: i, style: { order: state.values.length === 2 ? (i === 0 ? -1 : 1) : undefined }, children: _jsx(Input, { width: "fit-content" }) }, i))) }))] }), withInput && (_jsx("div", { className: "cim-slider-inputs-container-narrow", children: state.values.map((_, i) => (_jsx(SliderNumberField, { index: i, children: _jsx(Input, {}) }, i))) })), _jsx(FormFieldDescription, { children: description })] }));
+            } }) }));
+}
+// eslint-disable-next-line react-refresh/only-export-components
+function SliderNumberField({ index, ...props }) {
+    const state = useContext(RACSliderStateContext);
+    const labelProps = useSlottedContext(RACLabelContext);
+    return (_jsx(RACNumberField, { ...props, className: "cim-slider-input", value: state.values[index], onChange: (value) => state.setThumbValue(index, value ?? 0), "aria-labelledby": labelProps.id, "aria-label": state.values.length === 2 ? (index === 0 ? sliderStrings.srMinimum : sliderStrings.srMaximum) : undefined }));
+}
+// eslint-disable-next-line react-refresh/only-export-components
+function SliderThumb({ index, name, form }) {
+    const state = useContext(RACSliderStateContext);
+    return (_jsx(RACSliderThumb, { index: index, className: "cim-slider-thumb", name: typeof name === 'string' ? name : name?.[index], form: form, "aria-label": state.values.length === 2 ? (index === 0 ? sliderStrings.srMinimum : sliderStrings.srMaximum) : undefined }));
+}
+/**
+ * Allows users to select one or more values within a range.
+ */
+const _UNSTABLE_Slider = withStyleProps(forwardRef(UNSTABLE_Slider), 'Slider');
+export { _UNSTABLE_Slider as UNSTABLE_Slider };
+//# sourceMappingURL=slider.js.map

package/dist/esm/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useId } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport {\n  LabelContext as RACLabelContext,\n  NumberField as RACNumberField,\n  Provider as RACProvider,\n  Slider as RACSlider,\n  SliderOutput as RACSliderOutput,\n  SliderStateContext as RACSliderStateContext,\n  SliderThumb as RACSliderThumb,\n  SliderTrack as RACSliderTrack,\n  TextContext as RACTextContext,\n  useSlottedContext,\n  type NumberFieldProps as RACNumberFieldProps,\n  type SliderProps as RACSliderProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Input } from '../internal/input/input.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\n// TODO: move to translations when stabilized\nconst sliderStrings = {\n  srMinimum: 'minimum',\n  srMaximum: 'maximum',\n};\n\nexport interface UNSTABLE_SliderProps<T extends number | number[] = number>\n  extends CommonProps,\n    LabellableProps,\n    Pick<RACSliderProps<T>, 'isDisabled' | 'minValue' | 'maxValue' | 'step'> {\n  /** A description for the field. Provides a hint such as specific requirements for what to choose. */\n  description?: string;\n  /** The current value (controlled). */\n  value?: T;\n  /** The default value (uncontrolled). */\n  defaultValue?: T;\n  /** Handler that is called when the value changes. */\n  onChange?: (value: T) => void;\n  /** Handler that is called when the slider stops moving. */\n  onChangeEnd?: (value: T) => void;\n  /**\n   * The `<form>` element to associate the input with.\n   * The value of this attribute must be the id of a `<form>` in the same document.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n   */\n  form?: string;\n  /**\n   * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).\n   */\n  name?: T extends number[] ? string[] : string;\n  /** Show input fields for slider values. */\n  withInput?: boolean;\n  /** Show static labels for minimum and maximum values. */\n  showLabels?: boolean;\n}\n\nfunction UNSTABLE_Slider<T extends number | number[] = number>(\n  {\n    label,\n    description,\n    UNSAFE_className,\n    UNSAFE_style,\n    form,\n    name,\n    withInput,\n    showLabels,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...props\n  }: UNSTABLE_SliderProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const descriptionId = useId();\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Slider requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACProvider values={[[RACTextContext, { slots: { description: { id: descriptionId } } }]]}>\n      <RACSlider\n        {...props}\n        ref={ref}\n        className={clsx('cim-slider', UNSAFE_className)}\n        style={UNSAFE_style}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        orientation=\"horizontal\"\n        aria-describedby={[description && descriptionId, props['aria-describedby']].filter(Boolean).join(' ')}\n      >\n        {({ state, isDisabled }) => {\n          return (\n            <>\n              <FormFieldLabel isRequired={false} isDisabled={isDisabled}>\n                {label}\n              </FormFieldLabel>\n              {!withInput && label != null && (\n                <RACSliderOutput className=\"cim-slider-output\">\n                  <Text as=\"span\" variant=\"medium\">\n                    {state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}\n                  </Text>\n                </RACSliderOutput>\n              )}\n              <div className=\"cim-slider-track-container\">\n                {showLabels && (\n                  <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-slider-label-min\">\n                    {state.getThumbMinValue(0)}\n                  </Text>\n                )}\n\n                <RACSliderTrack className=\"cim-slider-track\">\n                  {({ state: trackState, isDisabled: trackIsDisabled }) => (\n                    <>\n                      <div className=\"cim-slider-track-background\" data-disabled={trackIsDisabled || undefined} />\n                      <div\n                        className=\"cim-slider-fill\"\n                        style={\n                          (state.values.length === 1\n                            ? {\n                                '--cim-slider-fill-size': trackState.getThumbPercent(0) * 100 + '%',\n                              }\n                            : state.values.length === 2\n                              ? {\n                                  '--cim-slider-fill-start': trackState.getThumbPercent(0) * 100 + '%',\n                                  '--cim-slider-fill-size':\n                                    (trackState.getThumbPercent(1) - trackState.getThumbPercent(0)) * 100 + '%',\n                                }\n                              : {}) as React.CSSProperties\n                        }\n                      />\n                      {trackState.values.map((_, i) => (\n                        <SliderThumb key={i} index={i} name={typeof name === 'string' ? name : name?.[i]} form={form} />\n                      ))}\n                    </>\n                  )}\n                </RACSliderTrack>\n                {showLabels && (\n                  <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-slider-label-max\">\n                    {state.getThumbMaxValue(state.values.length - 1)}\n                  </Text>\n                )}\n                {withInput && (\n                  <div className=\"cim-slider-inputs-container-wide\">\n                    {state.values.map((_, i) => (\n                      <SliderNumberField\n                        key={i}\n                        index={i}\n                        style={{ order: state.values.length === 2 ? (i === 0 ? -1 : 1) : undefined }}\n                      >\n                        <Input width=\"fit-content\" />\n                      </SliderNumberField>\n                    ))}\n                  </div>\n                )}\n              </div>\n              {withInput && (\n                <div className=\"cim-slider-inputs-container-narrow\">\n                  {state.values.map((_, i) => (\n                    <SliderNumberField key={i} index={i}>\n                      <Input />\n                    </SliderNumberField>\n                  ))}\n                </div>\n              )}\n              <FormFieldDescription>{description}</FormFieldDescription>\n            </>\n          );\n        }}\n      </RACSlider>\n    </RACProvider>\n  );\n}\n\ninterface SliderNumberFieldProps extends RACNumberFieldProps {\n  index: number;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction SliderNumberField({ index, ...props }: SliderNumberFieldProps) {\n  const state = useContext(RACSliderStateContext)!;\n  const labelProps = useSlottedContext(RACLabelContext)!;\n\n  return (\n    <RACNumberField\n      {...props}\n      className=\"cim-slider-input\"\n      value={state.values[index]}\n      onChange={(value) => state.setThumbValue(index, value ?? 0)}\n      aria-labelledby={labelProps.id}\n      aria-label={\n        state.values.length === 2 ? (index === 0 ? sliderStrings.srMinimum : sliderStrings.srMaximum) : undefined\n      }\n    />\n  );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction SliderThumb({ index, name, form }: { index: number; name?: string | string[]; form?: string }) {\n  const state = useContext(RACSliderStateContext)!;\n\n  return (\n    <RACSliderThumb\n      index={index}\n      className=\"cim-slider-thumb\"\n      name={typeof name === 'string' ? name : name?.[index]}\n      form={form}\n      aria-label={\n        state.values.length === 2 ? (index === 0 ? sliderStrings.srMinimum : sliderStrings.srMaximum) : undefined\n      }\n    />\n  );\n}\n\n/**\n * Allows users to select one or more values within a range.\n */\nconst _UNSTABLE_Slider = withStyleProps(forwardRef(UNSTABLE_Slider), 'Slider');\n\nexport { _UNSTABLE_Slider as UNSTABLE_Slider };\n"]}

package/dist/esm/components/stepper/stepper-item.d.ts

@@ -1,16 +1,16 @@
-import type { CommonProps } from '../types.js';
+import { type ReactNode } from 'react';
+import type { CommonProps, StringLikeChildren } from '../types.js';
 import type { StepperStatus } from './types.js';
 export interface UNSTABLE_StepperItemProps extends CommonProps {
     /** The title of the step. */
-    title: string;
-    /** The description of the step. */
-    description?: string;
+    children: StringLikeChildren;
+    /** The description of the step. Optionally, you can pass a React node to render rich text. */
+    description?: ReactNode;
     /** The status of the step. */
     status?: StepperStatus;
 }
 /**
  * Represents a single step in a stepper component.
  */
-declare const _UNSTABLE_StepperItem: (props: UNSTABLE_StepperItemProps & import("react").RefAttributes<HTMLLIElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
-export { _UNSTABLE_StepperItem as UNSTABLE_StepperItem };
+export declare function UNSTABLE_StepperItem({ children, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_StepperItemProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=stepper-item.d.ts.map

package/dist/esm/components/stepper/stepper-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper-item.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAoED;;GAEG;AACH,QAAA,MAAM,qBAAqB,0KAAkE,CAAC;AAE9F,OAAO,EAAE,qBAAqB,IAAI,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"stepper-item.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAwChD,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,6BAA6B;IAC7B,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,8FAA8F;IAC9F,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,WAAW,EACX,MAAM,EAAE,cAAc,EACtB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAiC3B"}

package/dist/esm/components/stepper/stepper-item.js

@@ -1,31 +1,21 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { useContext } from 'react';
-import { useId } from 'react-aria';
-import { forwardRef } from '../../forward-ref.js';
+import { createElement, Fragment, useContext } from 'react';
+import { Button as RACButton, VisuallyHidden as RACVisuallyHidden } from 'react-aria-components';
 import { IconCheckBold, IconCircleBoldFill } from '../../icons/index.js';
-import { withStyleProps } from '../../with-style-props.js';
 import { Text } from '../typography/text.js';
 import { StepContext } from './context.js';
-function UNSTABLE_StepperItem({ title, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    const labelId = useId();
-    const { currentStep, stepIndex, onChange, stepCount, orientation } = useContext(StepContext);
-    const isCurrent = stepIndex === currentStep;
-    const isPrevious = stepIndex < currentStep;
-    const isLast = stepIndex === stepCount - 1;
-    const status = overrideStatus ?? (isCurrent ? 'in-progress' : isPrevious ? 'complete' : undefined);
-    const isNavigable = !isCurrent && onChange && (status != null || isPrevious);
-    const titleElement = (_jsx(Text, { id: labelId, as: "span", variant: isCurrent ? 'body-semibold' : 'body', UNSAFE_className: "cim-stepper-item-title", children: title }));
-    const iconElement = (_jsx("div", { className: "cim-stepper-item-icon", children: status && _jsx(StepperItemIcon, { status: status, isCurrent: isCurrent }) }));
-    return (_jsxs("li", { ...props, ref: ref, className: clsx('cim-stepper-item', UNSAFE_className), style: UNSAFE_style, "data-status": status, "aria-current": isCurrent, children: [_jsxs("div", { className: "cim-stepper-item-icon-container", children: [isNavigable ? (_jsx("button", { className: "cim-stepper-item-icon-button", type: "button", onClick: onChange, "aria-labelledby": labelId, children: iconElement })) : (iconElement), !isLast && orientation === 'vertical' && _jsx("div", { className: "cim-stepper-item-tail" })] }), _jsxs("div", { className: "cim-stepper-item-content", children: [isNavigable ? (_jsx("button", { className: "cim-stepper-item-title-button", type: "button", onClick: onChange, tabIndex: -1, children: titleElement })) : (titleElement), description && (_jsx(Text, { as: "div", UNSAFE_className: "cim-stepper-item-description", variant: "medium", tone: "muted", children: description }))] })] }));
-}
-/**
- * Represents a single step in a stepper component.
- */
-const _UNSTABLE_StepperItem = withStyleProps(forwardRef(UNSTABLE_StepperItem), 'StepperItem');
-export { _UNSTABLE_StepperItem as UNSTABLE_StepperItem };
-const statusToIcon = {
+// TODO: move to translations
+const assistiveTextMap = {
+    incomplete: 'Incomplete',
+    complete: 'Completed',
+    error: 'Invalid',
+    warning: 'Warning',
+    'in-progress': 'In progress',
+};
+const statusIconMap = {
+    incomplete: Fragment,
     complete: IconCheckBold,
     // TODO: replace with icon from library when available
     error: () => (_jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M24.1421 21.1421C24.9232 21.9232 24.9232 23.1895 24.1421 23.9706C23.3611 24.7516 22.0948 24.7516 21.3137 23.9706L8.58579 11.2426C7.80474 10.4616 7.80474 9.19526 8.58579 8.41421C9.36684 7.63316 10.6332 7.63316 11.4142 8.41421L24.1421 21.1421Z", fill: "currentColor" }), _jsx("path", { d: "M21.1421 8.85786C21.9232 8.07682 23.1895 8.07682 23.9706 8.85786C24.7516 9.63891 24.7516 10.9052 23.9706 11.6863L11.2426 24.4142C10.4616 25.1953 9.19526 25.1953 8.41421 24.4142C7.63316 23.6332 7.63316 22.3668 8.41421 21.5858L21.1421 8.85786Z", fill: "currentColor" })] })),
@@ -33,12 +23,30 @@ const statusToIcon = {
     warning: () => (_jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M18 24C18 25.1046 17.1046 26 16 26C14.8954 26 14 25.1046 14 24C14 22.8954 14.8954 22 16 22C17.1046 22 18 22.8954 18 24Z", fill: "currentColor" }), _jsx("line", { x1: "16", y1: "8", x2: "16", y2: "18", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round" })] })),
     'in-progress': IconCircleBoldFill,
 };
+/**
+ * Represents a single step in a stepper component.
+ */
+export function UNSTABLE_StepperItem({ children, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }) {
+    const { currentStep, stepIndex, onChange, stepCount, orientation } = useContext(StepContext);
+    const isCurrent = stepIndex === currentStep;
+    const isPrevious = stepIndex < currentStep;
+    const isLast = stepIndex === stepCount - 1;
+    const status = overrideStatus ?? (isCurrent ? 'in-progress' : isPrevious ? 'complete' : 'incomplete');
+    const isNavigable = !isCurrent && onChange != null && (overrideStatus != null || isPrevious);
+    return (_jsxs("div", { ...props, role: "listitem", className: clsx('cim-stepper-item', UNSAFE_className), style: UNSAFE_style, "data-status": status, "aria-current": isCurrent, children: [_jsxs("div", { className: "cim-stepper-item-icon-container", "aria-hidden": true, children: [_jsx(StepperItemIndicator, { status: status, isNavigable: isNavigable, isCurrent: isCurrent, onChange: onChange }), !isLast && orientation === 'vertical' && _jsx("div", { className: "cim-stepper-item-tail" })] }), _jsxs("div", { className: "cim-stepper-item-content", children: [_jsx(StepperItemTitle, { status: status, isNavigable: isNavigable, isCurrent: isCurrent, onChange: onChange, children: children }), description && (_jsx(Text, { as: "div", UNSAFE_className: "cim-stepper-item-description", variant: "medium", tone: "muted", children: description }))] })] }));
+}
 // eslint-disable-next-line react-refresh/only-export-components
-function StepperItemIcon({ status, isCurrent }) {
-    const Icon = statusToIcon[status];
-    if (status === 'in-progress' && !isCurrent) {
-        return null;
+function StepperItemIndicator({ status, isNavigable, isCurrent, onChange, }) {
+    const icon = (_jsx("div", { className: "cim-stepper-item-icon", children: status === 'in-progress' && !isCurrent ? null : createElement(statusIconMap[status]) }));
+    if (isNavigable) {
+        return (_jsx(RACButton, { className: "cim-stepper-item-icon-button", type: "button", onClick: onChange, excludeFromTabOrder: true, children: icon }));
     }
-    return _jsx(Icon, { "aria-hidden": true });
+    return _jsx("div", { className: "cim-stepper-item-icon-button", children: icon });
+}
+// eslint-disable-next-line react-refresh/only-export-components
+function StepperItemTitle({ children, status, isNavigable, isCurrent, onChange, }) {
+    const assistiveText = assistiveTextMap[status];
+    const titleElement = (_jsxs(Text, { as: "span", variant: isCurrent ? 'body-semibold' : 'body', UNSAFE_className: "cim-stepper-item-title", children: [_jsxs(RACVisuallyHidden, { children: [assistiveText, ": "] }), children] }));
+    return isNavigable ? (_jsx(RACButton, { className: "cim-stepper-item-title-button", type: "button", onClick: onChange, children: titleElement })) : (_jsx("div", { className: "cim-stepper-item-title-button", children: titleElement }));
 }
 //# sourceMappingURL=stepper-item.js.map

package/dist/esm/components/stepper/stepper-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper-item.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport { useId } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconCircleBoldFill } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { StepContext } from './context.js';\nimport type { StepperStatus } from './types.js';\n\nexport interface UNSTABLE_StepperItemProps extends CommonProps {\n  /** The title of the step. */\n  title: string;\n  /** The description of the step. */\n  description?: string;\n  /** The status of the step. */\n  status?: StepperStatus;\n}\n\nfunction UNSTABLE_StepperItem(\n  { title, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_StepperItemProps,\n  ref: ForwardedRef<HTMLLIElement>,\n) {\n  const labelId = useId();\n\n  const { currentStep, stepIndex, onChange, stepCount, orientation } = useContext(StepContext);\n  const isCurrent = stepIndex === currentStep;\n  const isPrevious = stepIndex < currentStep;\n  const isLast = stepIndex === stepCount - 1;\n\n  const status = overrideStatus ?? (isCurrent ? 'in-progress' : isPrevious ? 'complete' : undefined);\n\n  const isNavigable = !isCurrent && onChange && (status != null || isPrevious);\n\n  const titleElement = (\n    <Text\n      id={labelId}\n      as=\"span\"\n      variant={isCurrent ? 'body-semibold' : 'body'}\n      UNSAFE_className=\"cim-stepper-item-title\"\n    >\n      {title}\n    </Text>\n  );\n  const iconElement = (\n    <div className=\"cim-stepper-item-icon\">{status && <StepperItemIcon status={status} isCurrent={isCurrent} />}</div>\n  );\n\n  return (\n    <li\n      {...props}\n      ref={ref}\n      className={clsx('cim-stepper-item', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-status={status}\n      aria-current={isCurrent}\n    >\n      <div className=\"cim-stepper-item-icon-container\">\n        {isNavigable ? (\n          <button className=\"cim-stepper-item-icon-button\" type=\"button\" onClick={onChange} aria-labelledby={labelId}>\n            {iconElement}\n          </button>\n        ) : (\n          iconElement\n        )}\n        {!isLast && orientation === 'vertical' && <div className=\"cim-stepper-item-tail\" />}\n      </div>\n      <div className=\"cim-stepper-item-content\">\n        {isNavigable ? (\n          <button className=\"cim-stepper-item-title-button\" type=\"button\" onClick={onChange} tabIndex={-1}>\n            {titleElement}\n          </button>\n        ) : (\n          titleElement\n        )}\n        {description && (\n          <Text as=\"div\" UNSAFE_className=\"cim-stepper-item-description\" variant=\"medium\" tone=\"muted\">\n            {description}\n          </Text>\n        )}\n      </div>\n    </li>\n  );\n}\n\n/**\n * Represents a single step in a stepper component.\n */\nconst _UNSTABLE_StepperItem = withStyleProps(forwardRef(UNSTABLE_StepperItem), 'StepperItem');\n\nexport { _UNSTABLE_StepperItem as UNSTABLE_StepperItem };\n\nconst statusToIcon = {\n  complete: IconCheckBold,\n  // TODO: replace with icon from library when available\n  error: () => (\n    <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M24.1421 21.1421C24.9232 21.9232 24.9232 23.1895 24.1421 23.9706C23.3611 24.7516 22.0948 24.7516 21.3137 23.9706L8.58579 11.2426C7.80474 10.4616 7.80474 9.19526 8.58579 8.41421C9.36684 7.63316 10.6332 7.63316 11.4142 8.41421L24.1421 21.1421Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M21.1421 8.85786C21.9232 8.07682 23.1895 8.07682 23.9706 8.85786C24.7516 9.63891 24.7516 10.9052 23.9706 11.6863L11.2426 24.4142C10.4616 25.1953 9.19526 25.1953 8.41421 24.4142C7.63316 23.6332 7.63316 22.3668 8.41421 21.5858L21.1421 8.85786Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  ),\n  // TODO: replace with icon from library when available\n  warning: () => (\n    <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M18 24C18 25.1046 17.1046 26 16 26C14.8954 26 14 25.1046 14 24C14 22.8954 14.8954 22 16 22C17.1046 22 18 22.8954 18 24Z\"\n        fill=\"currentColor\"\n      />\n      <line x1=\"16\" y1=\"8\" x2=\"16\" y2=\"18\" stroke=\"currentColor\" strokeWidth=\"4\" strokeLinecap=\"round\" />\n    </svg>\n  ),\n  'in-progress': IconCircleBoldFill,\n};\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction StepperItemIcon({ status, isCurrent }: { status: StepperStatus; isCurrent: boolean }) {\n  const Icon = statusToIcon[status];\n\n  if (status === 'in-progress' && !isCurrent) {\n    return null;\n  }\n\n  return <Icon aria-hidden />;\n}\n"]}
+{"version":3,"file":"stepper-item.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { createElement, Fragment, useContext, type ReactNode } from 'react';\nimport { Button as RACButton, VisuallyHidden as RACVisuallyHidden } from 'react-aria-components';\nimport { IconCheckBold, IconCircleBoldFill } from '../../icons/index.js';\nimport type { CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { StepContext } from './context.js';\nimport type { StepperStatus } from './types.js';\n\n// TODO: move to translations\nconst assistiveTextMap: Record<StepperStatus, string> = {\n  incomplete: 'Incomplete',\n  complete: 'Completed',\n  error: 'Invalid',\n  warning: 'Warning',\n  'in-progress': 'In progress',\n};\n\nconst statusIconMap: Record<StepperStatus, React.ElementType> = {\n  incomplete: Fragment,\n  complete: IconCheckBold,\n  // TODO: replace with icon from library when available\n  error: () => (\n    <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M24.1421 21.1421C24.9232 21.9232 24.9232 23.1895 24.1421 23.9706C23.3611 24.7516 22.0948 24.7516 21.3137 23.9706L8.58579 11.2426C7.80474 10.4616 7.80474 9.19526 8.58579 8.41421C9.36684 7.63316 10.6332 7.63316 11.4142 8.41421L24.1421 21.1421Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M21.1421 8.85786C21.9232 8.07682 23.1895 8.07682 23.9706 8.85786C24.7516 9.63891 24.7516 10.9052 23.9706 11.6863L11.2426 24.4142C10.4616 25.1953 9.19526 25.1953 8.41421 24.4142C7.63316 23.6332 7.63316 22.3668 8.41421 21.5858L21.1421 8.85786Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  ),\n  // TODO: replace with icon from library when available\n  warning: () => (\n    <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M18 24C18 25.1046 17.1046 26 16 26C14.8954 26 14 25.1046 14 24C14 22.8954 14.8954 22 16 22C17.1046 22 18 22.8954 18 24Z\"\n        fill=\"currentColor\"\n      />\n      <line x1=\"16\" y1=\"8\" x2=\"16\" y2=\"18\" stroke=\"currentColor\" strokeWidth=\"4\" strokeLinecap=\"round\" />\n    </svg>\n  ),\n  'in-progress': IconCircleBoldFill,\n};\n\nexport interface UNSTABLE_StepperItemProps extends CommonProps {\n  /** The title of the step. */\n  children: StringLikeChildren;\n  /** The description of the step. Optionally, you can pass a React node to render rich text. */\n  description?: ReactNode;\n  /** The status of the step. */\n  status?: StepperStatus;\n}\n\n/**\n * Represents a single step in a stepper component.\n */\nexport function UNSTABLE_StepperItem({\n  children,\n  description,\n  status: overrideStatus,\n  UNSAFE_className,\n  UNSAFE_style,\n  ...props\n}: UNSTABLE_StepperItemProps) {\n  const { currentStep, stepIndex, onChange, stepCount, orientation } = useContext(StepContext);\n  const isCurrent = stepIndex === currentStep;\n  const isPrevious = stepIndex < currentStep;\n  const isLast = stepIndex === stepCount - 1;\n  const status = overrideStatus ?? (isCurrent ? 'in-progress' : isPrevious ? 'complete' : 'incomplete');\n  const isNavigable = !isCurrent && onChange != null && (overrideStatus != null || isPrevious);\n\n  return (\n    <div\n      {...props}\n      role=\"listitem\"\n      className={clsx('cim-stepper-item', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-status={status}\n      aria-current={isCurrent}\n    >\n      <div className=\"cim-stepper-item-icon-container\" aria-hidden>\n        <StepperItemIndicator status={status} isNavigable={isNavigable} isCurrent={isCurrent} onChange={onChange} />\n        {!isLast && orientation === 'vertical' && <div className=\"cim-stepper-item-tail\" />}\n      </div>\n      <div className=\"cim-stepper-item-content\">\n        <StepperItemTitle status={status} isNavigable={isNavigable} isCurrent={isCurrent} onChange={onChange}>\n          {children}\n        </StepperItemTitle>\n        {description && (\n          <Text as=\"div\" UNSAFE_className=\"cim-stepper-item-description\" variant=\"medium\" tone=\"muted\">\n            {description}\n          </Text>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction StepperItemIndicator({\n  status,\n  isNavigable,\n  isCurrent,\n  onChange,\n}: {\n  status: StepperStatus;\n  isNavigable: boolean;\n  isCurrent: boolean;\n  onChange?: () => void;\n}) {\n  const icon = (\n    <div className=\"cim-stepper-item-icon\">\n      {status === 'in-progress' && !isCurrent ? null : createElement(statusIconMap[status])}\n    </div>\n  );\n\n  if (isNavigable) {\n    return (\n      <RACButton className=\"cim-stepper-item-icon-button\" type=\"button\" onClick={onChange} excludeFromTabOrder>\n        {icon}\n      </RACButton>\n    );\n  }\n\n  return <div className=\"cim-stepper-item-icon-button\">{icon}</div>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction StepperItemTitle({\n  children,\n  status,\n  isNavigable,\n  isCurrent,\n  onChange,\n}: {\n  children: StringLikeChildren;\n  status: StepperStatus;\n  isNavigable: boolean;\n  isCurrent: boolean;\n  onChange?: () => void;\n}) {\n  const assistiveText = assistiveTextMap[status];\n\n  const titleElement = (\n    <Text as=\"span\" variant={isCurrent ? 'body-semibold' : 'body'} UNSAFE_className=\"cim-stepper-item-title\">\n      <RACVisuallyHidden>{assistiveText}: </RACVisuallyHidden>\n      {children}\n    </Text>\n  );\n\n  return isNavigable ? (\n    <RACButton className=\"cim-stepper-item-title-button\" type=\"button\" onClick={onChange}>\n      {titleElement}\n    </RACButton>\n  ) : (\n    <div className=\"cim-stepper-item-title-button\">{titleElement}</div>\n  );\n}\n"]}

package/dist/esm/components/stepper/stepper.d.ts

@@ -16,6 +16,6 @@ export interface UNSTABLE_StepperProps extends CommonProps {
 /**
  * Displays a series of steps in a process.
  */
-declare const _UNSTABLE_Stepper: (props: UNSTABLE_StepperProps & import("react").RefAttributes<HTMLOListElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+declare const _UNSTABLE_Stepper: (props: UNSTABLE_StepperProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _UNSTABLE_Stepper as UNSTABLE_Stepper };
 //# sourceMappingURL=stepper.d.ts.map

package/dist/esm/components/stepper/stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,2CAA2C;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CACzC;AAoDD;;GAEG;AACH,QAAA,MAAM,iBAAiB,yKAA0D,CAAC;AAElF,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,2CAA2C;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CACzC;AAqDD;;GAEG;AACH,QAAA,MAAM,iBAAiB,uKAA0D,CAAC;AAElF,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC"}

package/dist/esm/components/stepper/stepper.js

@@ -7,7 +7,7 @@ import { withStyleProps } from '../../with-style-props.js';
 import { StepContext } from './context.js';
 function UNSTABLE_Stepper({ children, currentStep, onChange, orientation = 'horizontal', UNSAFE_className, UNSAFE_style, ...props }, ref) {
     const stepCount = Children.count(children);
-    return (_jsx("ol", { ...props, ref: ref, className: clsx('cim-stepper', UNSAFE_className), style: { ...UNSAFE_style, '--cim-stepper-step-count': stepCount }, "data-orientation": orientation, children: Children.map(children, (child, stepIndex) => {
+    return (_jsx("div", { ...props, role: "list", ref: ref, className: clsx('cim-stepper', UNSAFE_className), style: { ...UNSAFE_style, '--cim-stepper-step-count': stepCount }, "data-orientation": orientation, children: Children.map(children, (child, stepIndex) => {
             const isLast = stepIndex === stepCount - 1;
             return (_jsxs(_Fragment, { children: [_jsx(StepContext.Provider, { value: {
                             orientation,
@@ -18,7 +18,7 @@ function UNSTABLE_Stepper({ children, currentStep, onChange, orientation = 'hori
                                 (() => {
                                     onChange(stepIndex);
                                 }),
-                        }, children: child }), !isLast && orientation === 'horizontal' && _jsx("div", { className: "cim-stepper-item-tail" })] }));
+                        }, children: child }), !isLast && orientation === 'horizontal' && _jsx("div", { className: "cim-stepper-item-tail", role: "presentation" })] }));
         }) }));
 }
 /**

package/dist/esm/components/stepper/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAyD,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAgB3C,SAAS,gBAAgB,CACvB,EACE,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACc,EACxB,GAAmC;IAEnC,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE3C,OAAO,CACL,gBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,EAAE,GAAG,YAAY,EAAE,0BAA0B,EAAE,SAAS,EAAmB,sBAChE,WAAW,YAE5B,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE;YAC3C,MAAM,MAAM,GAAG,SAAS,KAAK,SAAS,GAAG,CAAC,CAAC;YAE3C,OAAO,CACL,8BACE,KAAC,WAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;4BACL,WAAW;4BACX,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;4BACnC,WAAW,EAAE,WAAW,IAAI,CAAC,CAAC;4BAC9B,SAAS;4BACT,QAAQ,EACN,QAAQ;gCACR,CAAC,GAAG,EAAE;oCACJ,QAAQ,CAAC,SAAS,CAAC,CAAC;gCACtB,CAAC,CAAC;yBACL,YAEA,KAAK,GACe,EACtB,CAAC,MAAM,IAAI,WAAW,KAAK,YAAY,IAAI,cAAK,SAAS,EAAC,uBAAuB,GAAG,IACpF,CACJ,CAAC;QACJ,CAAC,CAAC,GACC,CACN,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,iBAAiB,GAAG,cAAc,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,CAAC;AAElF,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Children, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { StepContext } from './context.js';\n\nexport interface UNSTABLE_StepperProps extends CommonProps {\n  /** The steps to display in the stepper. */\n  children: ReactNode;\n  /** The index of the active step. */\n  currentStep?: number;\n  /** The callback to call when the current step changes. */\n  onChange?: (step: number) => void;\n  /** The orientation of the stepper.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'vertical' | 'horizontal';\n}\n\nfunction UNSTABLE_Stepper(\n  {\n    children,\n    currentStep,\n    onChange,\n    orientation = 'horizontal',\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: UNSTABLE_StepperProps,\n  ref: ForwardedRef<HTMLOListElement>,\n) {\n  const stepCount = Children.count(children);\n\n  return (\n    <ol\n      {...props}\n      ref={ref}\n      className={clsx('cim-stepper', UNSAFE_className)}\n      style={{ ...UNSAFE_style, '--cim-stepper-step-count': stepCount } as CSSProperties}\n      data-orientation={orientation}\n    >\n      {Children.map(children, (child, stepIndex) => {\n        const isLast = stepIndex === stepCount - 1;\n\n        return (\n          <>\n            <StepContext.Provider\n              value={{\n                orientation,\n                stepCount: Children.count(children),\n                currentStep: currentStep ?? -1,\n                stepIndex,\n                onChange:\n                  onChange &&\n                  (() => {\n                    onChange(stepIndex);\n                  }),\n              }}\n            >\n              {child}\n            </StepContext.Provider>\n            {!isLast && orientation === 'horizontal' && <div className=\"cim-stepper-item-tail\" />}\n          </>\n        );\n      })}\n    </ol>\n  );\n}\n\n/**\n * Displays a series of steps in a process.\n */\nconst _UNSTABLE_Stepper = withStyleProps(forwardRef(UNSTABLE_Stepper), 'Stepper');\n\nexport { _UNSTABLE_Stepper as UNSTABLE_Stepper };\n"]}
+{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAyD,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAgB3C,SAAS,gBAAgB,CACvB,EACE,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACc,EACxB,GAAiC;IAEjC,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE3C,OAAO,CACL,iBACM,KAAK,EACT,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,EAAE,GAAG,YAAY,EAAE,0BAA0B,EAAE,SAAS,EAAmB,sBAChE,WAAW,YAE5B,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE;YAC3C,MAAM,MAAM,GAAG,SAAS,KAAK,SAAS,GAAG,CAAC,CAAC;YAE3C,OAAO,CACL,8BACE,KAAC,WAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;4BACL,WAAW;4BACX,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;4BACnC,WAAW,EAAE,WAAW,IAAI,CAAC,CAAC;4BAC9B,SAAS;4BACT,QAAQ,EACN,QAAQ;gCACR,CAAC,GAAG,EAAE;oCACJ,QAAQ,CAAC,SAAS,CAAC,CAAC;gCACtB,CAAC,CAAC;yBACL,YAEA,KAAK,GACe,EACtB,CAAC,MAAM,IAAI,WAAW,KAAK,YAAY,IAAI,cAAK,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,cAAc,GAAG,IACxG,CACJ,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,iBAAiB,GAAG,cAAc,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,CAAC;AAElF,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Children, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { StepContext } from './context.js';\n\nexport interface UNSTABLE_StepperProps extends CommonProps {\n  /** The steps to display in the stepper. */\n  children: ReactNode;\n  /** The index of the active step. */\n  currentStep?: number;\n  /** The callback to call when the current step changes. */\n  onChange?: (step: number) => void;\n  /** The orientation of the stepper.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'vertical' | 'horizontal';\n}\n\nfunction UNSTABLE_Stepper(\n  {\n    children,\n    currentStep,\n    onChange,\n    orientation = 'horizontal',\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: UNSTABLE_StepperProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const stepCount = Children.count(children);\n\n  return (\n    <div\n      {...props}\n      role=\"list\"\n      ref={ref}\n      className={clsx('cim-stepper', UNSAFE_className)}\n      style={{ ...UNSAFE_style, '--cim-stepper-step-count': stepCount } as CSSProperties}\n      data-orientation={orientation}\n    >\n      {Children.map(children, (child, stepIndex) => {\n        const isLast = stepIndex === stepCount - 1;\n\n        return (\n          <>\n            <StepContext.Provider\n              value={{\n                orientation,\n                stepCount: Children.count(children),\n                currentStep: currentStep ?? -1,\n                stepIndex,\n                onChange:\n                  onChange &&\n                  (() => {\n                    onChange(stepIndex);\n                  }),\n              }}\n            >\n              {child}\n            </StepContext.Provider>\n            {!isLast && orientation === 'horizontal' && <div className=\"cim-stepper-item-tail\" role=\"presentation\" />}\n          </>\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * Displays a series of steps in a process.\n */\nconst _UNSTABLE_Stepper = withStyleProps(forwardRef(UNSTABLE_Stepper), 'Stepper');\n\nexport { _UNSTABLE_Stepper as UNSTABLE_Stepper };\n"]}

package/dist/esm/components/stepper/types.d.ts

@@ -1,2 +1,2 @@
-export type StepperStatus = 'complete' | 'error' | 'warning' | 'in-progress';
+export type StepperStatus = 'incomplete' | 'complete' | 'error' | 'warning' | 'in-progress';
 //# sourceMappingURL=types.d.ts.map

package/dist/esm/components/stepper/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,CAAC"}

package/dist/esm/components/stepper/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/stepper/types.ts"],"names":[],"mappings":"","sourcesContent":["export type StepperStatus = 'complete' | 'error' | 'warning' | 'in-progress';\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/stepper/types.ts"],"names":[],"mappings":"","sourcesContent":["export type StepperStatus = 'incomplete' | 'complete' | 'error' | 'warning' | 'in-progress';\n"]}