@cimpress-ui/react 0.0.0 → 0.0.1

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

@@ -1,7 +1,12 @@
 import { type FormProps as RACFormProps } from 'react-aria-components';
-import type { DOMProps, LabellableProps } from '../types.js';
-export interface FormProps extends DOMProps, Omit<LabellableProps, 'label'>, Pick<RACFormProps, 'action' | 'validationErrors' | 'encType' | 'method' | 'target' | 'autoComplete' | 'autoCapitalize' | 'children' | 'onSubmit' | 'onReset' | 'onInvalid'> {
+import type { CommonProps, LabellableProps } from '../types.js';
+export interface FormProps extends CommonProps, Omit<LabellableProps, 'label'>, Pick<RACFormProps, 'action' | 'validationErrors' | 'encType' | 'method' | 'target' | 'autoComplete' | 'autoCapitalize' | 'children' | 'onSubmit' | 'onReset' | 'onInvalid'> {
 }
-declare const _Form: (props: FormProps & import("react").RefAttributes<HTMLFormElement> & import("../../with-style-props.js").StyleProps) => import("react").ReactNode;
+/**
+ * A group of inputs that allows users to submit data to a server.
+ *
+ * See [forms guide](https://ui.cimpress.io/dev-guides/forms/).
+ */
+declare const _Form: (props: FormProps & import("react").RefAttributes<HTMLFormElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _Form as Form };
 //# sourceMappingURL=form.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../src/components/form/form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGxF,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,SACf,SAAQ,QAAQ,EACd,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,EAC9B,IAAI,CACF,YAAY,EACV,QAAQ,GACR,kBAAkB,GAClB,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,cAAc,GACd,gBAAgB,GAChB,UAAU,GACV,UAAU,GACV,SAAS,GACT,WAAW,CACd;CAAG;AAUR,QAAA,MAAM,KAAK,mJAA2C,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../src/components/form/form.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEhE,MAAM,WAAW,SACf,SAAQ,WAAW,EACjB,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,EAC9B,IAAI,CACF,YAAY,EACV,QAAQ,GACR,kBAAkB,GAClB,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,cAAc,GACd,gBAAgB,GAChB,UAAU,GACV,UAAU,GACV,SAAS,GACT,WAAW,CACd;CAAG;AAUR;;;;GAIG;AACH,QAAA,MAAM,KAAK,4JAA2C,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC"}

package/dist/esm/components/form/form.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { Form as RACForm } from 'react-aria-components';
@@ -6,6 +7,11 @@ import { withStyleProps } from '../../with-style-props.js';
 function Form({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     return (_jsx(RACForm, { ...props, className: clsx('cim-form', UNSAFE_className), style: UNSAFE_style, ref: ref, children: children }));
 }
+/**
+ * A group of inputs that allows users to submit data to a server.
+ *
+ * See [forms guide](https://ui.cimpress.io/dev-guides/forms/).
+ */
 const _Form = withStyleProps(forwardRef(Form), 'Form');
 export { _Form as Form };
 //# sourceMappingURL=form.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../../src/components/form/form.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,IAAI,IAAI,OAAO,EAAkC,MAAM,uBAAuB,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAqB3D,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAa,EAAE,GAAkC;IACjH,OAAO,CACL,KAAC,OAAO,OAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,YAC7F,QAAQ,GACD,CACX,CAAC;AACJ,CAAC;AAED,MAAM,KAAK,GAAG,cAAc,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Form as RACForm, type FormProps as RACFormProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { DOMProps, LabellableProps } from '../types.js';\n\nexport interface FormProps\n  extends DOMProps,\n    Omit<LabellableProps, 'label'>,\n    Pick<\n      RACFormProps,\n      | 'action'\n      | 'validationErrors'\n      | 'encType'\n      | 'method'\n      | 'target'\n      | 'autoComplete'\n      | 'autoCapitalize'\n      | 'children'\n      | 'onSubmit'\n      | 'onReset'\n      | 'onInvalid'\n    > {}\n\nfunction Form({ children, UNSAFE_className, UNSAFE_style, ...props }: FormProps, ref: ForwardedRef<HTMLFormElement>) {\n  return (\n    <RACForm {...props} className={clsx('cim-form', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n      {children}\n    </RACForm>\n  );\n}\n\nconst _Form = withStyleProps(forwardRef(Form), 'Form');\n\nexport { _Form as Form };\n"]}
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../../src/components/form/form.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,IAAI,IAAI,OAAO,EAAkC,MAAM,uBAAuB,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAqB3D,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAa,EAAE,GAAkC;IACjH,OAAO,CACL,KAAC,OAAO,OAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,YAC7F,QAAQ,GACD,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,KAAK,GAAG,cAAc,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Form as RACForm, type FormProps as RACFormProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\n\nexport interface FormProps\n  extends CommonProps,\n    Omit<LabellableProps, 'label'>,\n    Pick<\n      RACFormProps,\n      | 'action'\n      | 'validationErrors'\n      | 'encType'\n      | 'method'\n      | 'target'\n      | 'autoComplete'\n      | 'autoCapitalize'\n      | 'children'\n      | 'onSubmit'\n      | 'onReset'\n      | 'onInvalid'\n    > {}\n\nfunction Form({ children, UNSAFE_className, UNSAFE_style, ...props }: FormProps, ref: ForwardedRef<HTMLFormElement>) {\n  return (\n    <RACForm {...props} className={clsx('cim-form', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n      {children}\n    </RACForm>\n  );\n}\n\n/**\n * A group of inputs that allows users to submit data to a server.\n *\n * See [forms guide](https://ui.cimpress.io/dev-guides/forms/).\n */\nconst _Form = withStyleProps(forwardRef(Form), 'Form');\n\nexport { _Form as Form };\n"]}

package/dist/esm/components/internal/collapsible-list/collapsible-list.d.ts

@@ -0,0 +1,16 @@
+import { type PopoverProps as RACPopoverProps } from 'react-aria-components';
+interface CollapsibleListProps extends Pick<RACPopoverProps, 'placement' | 'offset' | 'maxHeight' | 'children' | 'triggerRef'> {
+    /** A correction amount (in px) to add to the minimum list width. */
+    widthCorrection?: number;
+}
+/**
+ * Displays a collapsible list activated via a trigger element.
+ *
+ * @internal
+ */
+export declare function CollapsibleList({ children, widthCorrection, ...props }: CollapsibleListProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CollapsibleList {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=collapsible-list.d.ts.map

package/dist/esm/components/internal/collapsible-list/collapsible-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-list.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/collapsible-list/collapsible-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,YAAY,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEpG,UAAU,oBACR,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC;IAC/F,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,eAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAahG;yBAbe,eAAe"}

package/dist/esm/components/internal/collapsible-list/collapsible-list.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover as RACPopover } from 'react-aria-components';
+/**
+ * Displays a collapsible list activated via a trigger element.
+ *
+ * @internal
+ */
+export function CollapsibleList({ children, widthCorrection = 0, ...props }) {
+    return (_jsx(RACPopover, { ...props, className: "cim-collapsible-list", 
+        // @ts-expect-error `style` doesn't expect CSS variables
+        style: { '--trigger-width-corr': `${widthCorrection}px` }, containerPadding: 16, "data-cim-style-root": true, children: children }));
+}
+CollapsibleList.displayName = 'CollapsibleList';
+//# sourceMappingURL=collapsible-list.js.map

package/dist/esm/components/internal/collapsible-list/collapsible-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-list.js","sourceRoot":"","sources":["../../../../../src/components/internal/collapsible-list/collapsible-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAwC,MAAM,uBAAuB,CAAC;AAQpG;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,QAAQ,EAAE,eAAe,GAAG,CAAC,EAAE,GAAG,KAAK,EAAwB;IAC/F,OAAO,CACL,KAAC,UAAU,OACL,KAAK,EACT,SAAS,EAAC,sBAAsB;QAChC,wDAAwD;QACxD,KAAK,EAAE,EAAE,sBAAsB,EAAE,GAAG,eAAe,IAAI,EAAE,EACzD,gBAAgB,EAAE,EAAE,yCAGnB,QAAQ,GACE,CACd,CAAC;AACJ,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import { Popover as RACPopover, type PopoverProps as RACPopoverProps } from 'react-aria-components';\n\ninterface CollapsibleListProps\n  extends Pick<RACPopoverProps, 'placement' | 'offset' | 'maxHeight' | 'children' | 'triggerRef'> {\n  /** A correction amount (in px) to add to the minimum list width. */\n  widthCorrection?: number;\n}\n\n/**\n * Displays a collapsible list activated via a trigger element.\n *\n * @internal\n */\nexport function CollapsibleList({ children, widthCorrection = 0, ...props }: CollapsibleListProps) {\n  return (\n    <RACPopover\n      {...props}\n      className=\"cim-collapsible-list\"\n      // @ts-expect-error `style` doesn't expect CSS variables\n      style={{ '--trigger-width-corr': `${widthCorrection}px` }}\n      containerPadding={16}\n      data-cim-style-root\n    >\n      {children}\n    </RACPopover>\n  );\n}\n\nCollapsibleList.displayName = 'CollapsibleList';\n"]}

package/dist/esm/components/internal/form-field/form-field.d.ts

@@ -0,0 +1,29 @@
+import type { FieldError } from '../../types.js';
+/**
+ * Renders a label for a form field.
+ * @internal
+ */
+export declare function FormFieldLabel({ children, isRequired, isDisabled, }: {
+    children: string | undefined;
+    isRequired: boolean | undefined;
+    isDisabled?: boolean | undefined;
+}): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Renders a description for a form field.
+ * @internal
+ */
+export declare function FormFieldDescription({ children }: {
+    children: string | undefined;
+}): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Renders an error message for a form field.
+ *
+ * Must be rendered unconditionally, as it can be populated with browser validation errors
+ * even if an explicit error message isn't provided.
+ *
+ * @internal
+ */
+export declare function FormFieldError({ children }: {
+    children: FieldError;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=form-field.d.ts.map

package/dist/esm/components/internal/form-field/form-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/form-field/form-field.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAIjD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,UAAU,EACV,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAClC,kDAiBA;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,kDAalF;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,UAAU,CAAA;CAAE,2CAMpE"}

package/dist/esm/components/internal/form-field/form-field.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Label as RACLabel, Text as RACText, FieldError as RACFieldError, } from 'react-aria-components';
+import { IconAlertTriangle } from '../../../icons/index.js';
+import { Text } from '../../typography/text.js';
+import { textStyle } from '../../typography/utils.js';
+/**
+ * Renders a label for a form field.
+ * @internal
+ */
+export function FormFieldLabel({ children, isRequired, isDisabled, }) {
+    if (!children) {
+        return null;
+    }
+    return (_jsxs(RACLabel, { className: clsx('cim-form-field-label', textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' })), children: [children, isRequired && (_jsx(Text, { tone: "critical", as: "span", "aria-hidden": true, children: "*" }))] }));
+}
+/**
+ * Renders a description for a form field.
+ * @internal
+ */
+export function FormFieldDescription({ children }) {
+    if (!children) {
+        return null;
+    }
+    return (_jsx(RACText, { slot: "description", className: clsx('cim-form-field-description', textStyle({ variant: 'small', tone: 'subtle' })), children: children }));
+}
+/**
+ * Renders an error message for a form field.
+ *
+ * Must be rendered unconditionally, as it can be populated with browser validation errors
+ * even if an explicit error message isn't provided.
+ *
+ * @internal
+ */
+export function FormFieldError({ children }) {
+    return (_jsx(RACFieldError, { className: clsx('cim-form-field-error', textStyle({ variant: 'small', tone: 'critical' })), children: (validation) => renderFieldError(children, validation) }));
+}
+function renderFieldError(fieldError, validation) {
+    const errors = typeof fieldError === 'function' ? fieldError(validation) : (fieldError ?? validation.validationErrors);
+    if (!errors || !errors.length) {
+        return null;
+    }
+    return typeof errors === 'object' ? (errors.map((error) => _jsx(ErrorMessage, { message: error }, error))) : (_jsx(ErrorMessage, { message: errors }));
+}
+function ErrorMessage({ message }) {
+    return (_jsxs("div", { className: "cim-form-field-error-message", children: [_jsx("div", { className: "cim-form-field-error-icon-wrapper", "aria-hidden": true, children: _jsx(IconAlertTriangle, {}) }), message] }));
+}
+//# sourceMappingURL=form-field.js.map

package/dist/esm/components/internal/form-field/form-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../../../src/components/internal/form-field/form-field.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,KAAK,IAAI,QAAQ,EACjB,IAAI,IAAI,OAAO,EACf,UAAU,IAAI,aAAa,GAE5B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,UAAU,EACV,UAAU,GAKX;IACC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,MAAC,QAAQ,IACP,SAAS,EAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,aAE7G,QAAQ,EACR,UAAU,IAAI,CACb,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,MAAM,uCAExB,CACR,IACQ,CACZ,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAAC,EAAE,QAAQ,EAAoC;IACjF,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAC,aAAa,EAClB,SAAS,EAAE,IAAI,CAAC,4BAA4B,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,YAE7F,QAAQ,GACD,CACX,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAA4B;IACnE,OAAO,CACL,KAAC,aAAa,IAAC,SAAS,EAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,YACtG,CAAC,UAAU,EAAE,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,GACzC,CACjB,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,UAAsB,EAAE,UAA+B;IAC/E,MAAM,MAAM,GACV,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAE1G,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QAC9B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAClC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,YAAY,IAAa,OAAO,EAAE,KAAK,IAArB,KAAK,CAAoB,CAAC,CACpE,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,IAAC,OAAO,EAAE,MAAM,GAAI,CAClC,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,EAAE,OAAO,EAAuB;IACpD,OAAO,CACL,eAAK,SAAS,EAAC,8BAA8B,aAC3C,cAAK,SAAS,EAAC,mCAAmC,iCAChD,KAAC,iBAAiB,KAAG,GACjB,EACL,OAAO,IACJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport {\n  Label as RACLabel,\n  Text as RACText,\n  FieldError as RACFieldError,\n  type ValidationResult as RACValidationResult,\n} from 'react-aria-components';\nimport { IconAlertTriangle } from '../../../icons/index.js';\nimport type { FieldError } from '../../types.js';\nimport { Text } from '../../typography/text.js';\nimport { textStyle } from '../../typography/utils.js';\n\n/**\n * Renders a label for a form field.\n * @internal\n */\nexport function FormFieldLabel({\n  children,\n  isRequired,\n  isDisabled,\n}: {\n  children: string | undefined;\n  isRequired: boolean | undefined;\n  isDisabled?: boolean | undefined;\n}) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <RACLabel\n      className={clsx('cim-form-field-label', textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' }))}\n    >\n      {children}\n      {isRequired && (\n        <Text tone=\"critical\" as=\"span\" aria-hidden>\n          *\n        </Text>\n      )}\n    </RACLabel>\n  );\n}\n\n/**\n * Renders a description for a form field.\n * @internal\n */\nexport function FormFieldDescription({ children }: { children: string | undefined }) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <RACText\n      slot=\"description\"\n      className={clsx('cim-form-field-description', textStyle({ variant: 'small', tone: 'subtle' }))}\n    >\n      {children}\n    </RACText>\n  );\n}\n\n/**\n * Renders an error message for a form field.\n *\n * Must be rendered unconditionally, as it can be populated with browser validation errors\n * even if an explicit error message isn't provided.\n *\n * @internal\n */\nexport function FormFieldError({ children }: { children: FieldError }) {\n  return (\n    <RACFieldError className={clsx('cim-form-field-error', textStyle({ variant: 'small', tone: 'critical' }))}>\n      {(validation) => renderFieldError(children, validation)}\n    </RACFieldError>\n  );\n}\n\nfunction renderFieldError(fieldError: FieldError, validation: RACValidationResult): string | ReactNode | undefined {\n  const errors =\n    typeof fieldError === 'function' ? fieldError(validation) : (fieldError ?? validation.validationErrors);\n\n  if (!errors || !errors.length) {\n    return null;\n  }\n\n  return typeof errors === 'object' ? (\n    errors.map((error) => <ErrorMessage key={error} message={error} />)\n  ) : (\n    <ErrorMessage message={errors} />\n  );\n}\n\nfunction ErrorMessage({ message }: { message: string }) {\n  return (\n    <div className=\"cim-form-field-error-message\">\n      <div className=\"cim-form-field-error-icon-wrapper\" aria-hidden>\n        <IconAlertTriangle />\n      </div>\n      {message}\n    </div>\n  );\n}\n"]}

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

@@ -0,0 +1,18 @@
+import type { ReactNode, Ref } from 'react';
+import type { CommonProps, LabellableProps } from '../../types.js';
+interface SpinnerProps extends CommonProps, Omit<LabellableProps, 'label'> {
+    children?: ReactNode;
+    spinnerRef?: Ref<HTMLDivElement>;
+    size: string;
+}
+/**
+ * Displays a variable-size loading indicator to represent an ongoing operation.
+ *
+ * @internal
+ */
+declare function Spinner({ children, spinnerRef, size, UNSAFE_className, UNSAFE_style, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Spinner {
+    var displayName: string;
+}
+export { Spinner as InternalSpinner };
+//# sourceMappingURL=spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/spinner/spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEnE,UAAU,YAAa,SAAQ,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAuBtG;kBAvBQ,OAAO;;;AA2BhB,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,CAAC"}

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { ProgressBar as RACProgressBar } from 'react-aria-components';
+/**
+ * Displays a variable-size loading indicator to represent an ongoing operation.
+ *
+ * @internal
+ */
+function Spinner({ children, spinnerRef, size, UNSAFE_className, UNSAFE_style, ...props }) {
+    return (_jsxs(RACProgressBar, { ...props, isIndeterminate: true, ref: spinnerRef, className: clsx('cim-spinner', UNSAFE_className), style: UNSAFE_style, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 80 80", width: size, height: size, preserveAspectRatio: "xMidYMid", "aria-hidden": true, children: [_jsx("circle", { className: "cim-spinner-ring-bg", cx: "40", cy: "40", r: "35" }), _jsx("circle", { className: "cim-spinner-ring-fg", cx: "40", cy: "40", r: "35" })] }), children] }));
+}
+Spinner.displayName = 'Spinner';
+export { Spinner as InternalSpinner };
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../../../src/components/internal/spinner/spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAStE;;;;GAIG;AACH,SAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgB;IACrG,OAAO,CACL,MAAC,cAAc,OACT,KAAK,EACT,eAAe,QACf,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,YAAY,aAEnB,eACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,mBAAmB,EAAC,UAAU,kCAG9B,iBAAQ,SAAS,EAAC,qBAAqB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EACjE,iBAAQ,SAAS,EAAC,qBAAqB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,IAC7D,EACL,QAAQ,IACM,CAClB,CAAC;AACJ,CAAC;AAED,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;AAEhC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode, Ref } from 'react';\nimport { ProgressBar as RACProgressBar } from 'react-aria-components';\nimport type { CommonProps, LabellableProps } from '../../types.js';\n\ninterface SpinnerProps extends CommonProps, Omit<LabellableProps, 'label'> {\n  children?: ReactNode;\n  spinnerRef?: Ref<HTMLDivElement>;\n  size: string;\n}\n\n/**\n * Displays a variable-size loading indicator to represent an ongoing operation.\n *\n * @internal\n */\nfunction Spinner({ children, spinnerRef, size, UNSAFE_className, UNSAFE_style, ...props }: SpinnerProps) {\n  return (\n    <RACProgressBar\n      {...props}\n      isIndeterminate\n      ref={spinnerRef}\n      className={clsx('cim-spinner', UNSAFE_className)}\n      style={UNSAFE_style}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 80 80\"\n        width={size}\n        height={size}\n        preserveAspectRatio=\"xMidYMid\"\n        aria-hidden\n      >\n        <circle className=\"cim-spinner-ring-bg\" cx=\"40\" cy=\"40\" r=\"35\" />\n        <circle className=\"cim-spinner-ring-fg\" cx=\"40\" cy=\"40\" r=\"35\" />\n      </svg>\n      {children}\n    </RACProgressBar>\n  );\n}\n\nSpinner.displayName = 'Spinner';\n\nexport { Spinner as InternalSpinner };\n"]}

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

@@ -1,38 +1,48 @@
 import { type ReactNode } from 'react';
 import { type MenuItemProps as RACMenuItemProps } from 'react-aria-components';
-import type { DOMProps, Key, LabellableProps } from '../types.js';
-export interface MenuProps extends DOMProps, LabellableProps {
-    /** The contents of the menu. */
-    children?: ReactNode;
+import type { CommonProps, Key, LabellableProps, NavigationProps, CollectionProps, CollectionItem, StringLikeChildren } from '../types.js';
+export interface MenuProps<T extends CollectionItem = CollectionItem> extends CommonProps, CollectionProps<T>, LabellableProps {
+    /** Whether the menu trigger is disabled. */
+    isDisabled?: boolean;
     /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */
     onAction?: (key: Key) => void;
 }
-declare const _Menu: (props: MenuProps & import("react").RefAttributes<HTMLButtonElement> & import("../../with-style-props.js").StyleProps) => ReactNode;
+/**
+ * Displays a collapsible list of options and actions that users can choose from.
+ *
+ * See [menu usage guidelines](https://ui.cimpress.io/components/menu/usage-guidelines/).
+ */
+declare const _Menu: <T extends CollectionItem>(props: MenuProps<T> & import("react").RefAttributes<HTMLButtonElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _Menu as Menu };
-export interface MenuSectionProps {
+export interface MenuSectionProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T> {
     /** The ID of the section. Has to be unique across all sections and items. */
     id?: Key;
     /** The content to display as the section title. */
     title: string;
-    /** The contents of the section. */
-    children: ReactNode;
 }
-export declare function MenuSection({ title, children, ...props }: MenuSectionProps): import("react/jsx-runtime").JSX.Element;
+/** Groups list items within `Menu` into a section. */
+export declare function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace MenuSection {
     var displayName: string;
 }
-export interface MenuItemProps extends Pick<RACMenuItemProps, 'isDisabled' | 'href' | 'hrefLang' | 'target' | 'rel' | 'download' | 'ping' | 'referrerPolicy' | 'routerOptions' | 'onAction'> {
+export interface MenuItemProps extends NavigationProps, Pick<RACMenuItemProps, 'isDisabled' | 'onAction'> {
     /** The ID of the item. Has to be unique across all sections and items. */
     id?: Key;
     /** The content to display as the label. */
-    label: string;
+    children: StringLikeChildren;
+    /** Additional description for the menu item. */
+    description?: string;
+    /** An icon representing the menu item. */
+    icon?: ReactNode;
 }
-export declare function MenuItem({ label, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+/** Renders a single list item within `Menu`. */
+export declare function MenuItem({ children, description, icon, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MenuItem {
     var displayName: string;
 }
-export declare function MenuSeparator(): import("react/jsx-runtime").JSX.Element;
-export declare namespace MenuSeparator {
+/** Renders a horizontal divider between list items within `Menu`. */
+export declare function MenuDivider(): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuDivider {
     var displayName: string;
 }
 //# sourceMappingURL=menu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAoD,MAAM,OAAO,CAAC;AACzF,OAAO,EAKL,KAAK,aAAa,IAAI,gBAAgB,EAMvC,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAKlE,MAAM,WAAW,SAAU,SAAQ,QAAQ,EAAE,eAAe;IAC1D,gCAAgC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B;AA6BD,QAAA,MAAM,KAAK,qIAA2C,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;AAEzB,MAAM,WAAW,gBAAgB;IAC/B,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAS1E;yBATe,WAAW;;;AAa3B,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,gBAAgB,EACd,YAAY,GACZ,MAAM,GACN,UAAU,GACV,QAAQ,GACR,KAAK,GACL,UAAU,GACV,MAAM,GACN,gBAAgB,GAChB,eAAe,GACf,UAAU,CACb;IACD,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAQ1D;yBARe,QAAQ;;;AAYxB,wBAAgB,aAAa,4CAE5B;yBAFe,aAAa"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAA0C,MAAM,OAAO,CAAC;AAC/E,OAAO,EAIL,KAAK,aAAa,IAAI,gBAAgB,EAMvC,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EACV,WAAW,EACX,GAAG,EACH,eAAe,EACf,eAAe,EACf,eAAe,EACf,cAAc,EACd,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAClE,SAAQ,WAAW,EACjB,eAAe,CAAC,CAAC,CAAC,EAClB,eAAe;IACjB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B;AAkCD;;;;GAIG;AACH,QAAA,MAAM,KAAK,GArCG,CAAC,SAAS,cAAc,gKAqCgB,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;AAmCzB,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACrG,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,sDAAsD;AACtD,wBAAgB,WAAW,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAa9G;yBAbe,WAAW;;;AAiB3B,MAAM,WAAW,aAAc,SAAQ,eAAe,EAAE,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,CAAC;IACvG,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,gDAAgD;AAChD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CA4BhF;yBA5Be,QAAQ;;;AAgCxB,qEAAqE;AACrE,wBAAgB,WAAW,4CAE1B;yBAFe,WAAW"}

package/dist/esm/components/menu/menu.js

@@ -1,34 +1,57 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { useEffect } from 'react';
-import { Button as RACButton, Header as RACHeader, Menu as RACMenu, MenuItem as RACMenuItem, MenuTrigger as RACMenuTrigger, Section as RACSection, Popover as RACPopover, Separator as RACSeparator, Text as RACText, } from 'react-aria-components';
+import { Header as RACHeader, Menu as RACMenu, MenuItem as RACMenuItem, MenuTrigger as RACMenuTrigger, MenuSection as RACMenuSection, Separator as RACSeparator, Collection as RACCollection, Text as RACText, } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
+import { IconChevronDownFill } from '../../icons/index.js';
 import { withStyleProps } from '../../with-style-props.js';
+import { Button } from '../button/button.js';
+import { IconButton } from '../button/icon-button.js';
+import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
 import { textStyle } from '../typography/utils.js';
-function Menu({ label, children, onAction, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+function Menu({ children, isDisabled, onAction, items, ...props }, ref) {
+    const { label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
     useEffect(() => {
         if (!label && !ariaLabel && !ariaLabelledBy) {
-            console.warn('Menu requires one of label / aria-label / aria-labelledby for accessibility');
+            console.warn('`Menu` requires one of `label` / `aria-label` / `aria-labelledby` for accessibility');
         }
     }, [label, ariaLabel, ariaLabelledBy]);
-    return (_jsxs(RACMenuTrigger, { children: [_jsxs(RACButton, { ...props, ref: ref, className: clsx('cim-menu-button', UNSAFE_className), style: UNSAFE_style, children: [label, _jsx(ChevronDownIcon, { height: 12, width: 12, "aria-hidden": true })] }), _jsx(RACPopover, { className: "cim-menu-popover", offset: 2, maxHeight: 315, "data-experimental-cim-style-root": true, children: _jsx(RACMenu, { className: "cim-menu", onAction: onAction, children: children }) })] }));
+    if (items != null && typeof children !== 'function') {
+        console.warn('`Menu` requires `children` to be a function when using `items` prop');
+    }
+    return (_jsxs(RACMenuTrigger, { children: [_jsx(MenuTrigger, { ...props, triggerRef: ref, isDisabled: isDisabled }), _jsx(CollapsibleList, { placement: "bottom start", offset: 1, maxHeight: 315, children: _jsx(RACMenu, { className: "cim-menu", onAction: onAction, items: items, children: children }) })] }));
 }
+/**
+ * Displays a collapsible list of options and actions that users can choose from.
+ *
+ * See [menu usage guidelines](https://ui.cimpress.io/components/menu/usage-guidelines/).
+ */
 const _Menu = withStyleProps(forwardRef(Menu), 'Menu');
 export { _Menu as Menu };
-export function MenuSection({ title, children, ...props }) {
-    return (_jsxs(RACSection, { ...props, className: "cim-menu-section", children: [_jsx(RACHeader, { className: clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' })), children: title }), children] }));
+function MenuTrigger({ label, triggerRef, ...props }) {
+    if (label) {
+        return (_jsx(Button, { ...props, variant: "secondary", size: "medium", ref: triggerRef, iconEnd: _jsx(IconChevronDownFill, { UNSAFE_className: "cim-menu-trigger-icon" }), children: label }));
+    }
+    return (_jsx(IconButton, { ...props, "aria-label": props['aria-label'] ?? '', variant: "secondary", size: "medium", ref: triggerRef, icon: _jsx(IconChevronDownFill, { UNSAFE_className: "cim-menu-trigger-icon" }) }));
+}
+/** Groups list items within `Menu` into a section. */
+export function MenuSection({ title, children, items, ...props }) {
+    if (items != null && typeof children !== 'function') {
+        console.warn('`MenuSection` requires `children` to be a function when using `items` prop');
+    }
+    return (_jsxs(RACMenuSection, { ...props, className: "cim-menu-section", children: [_jsx(RACHeader, { className: clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' })), children: title }), _jsx(RACCollection, { items: items, children: children })] }));
 }
 MenuSection.displayName = 'MenuSection';
-export function MenuItem({ label, ...props }) {
-    return (_jsx(RACMenuItem, { ...props, className: "cim-menu-item", textValue: label, children: _jsx(RACText, { slot: "label", className: clsx('cim-menu-item-label', textStyle({ variant: 'body' })), children: label }) }));
+/** Renders a single list item within `Menu`. */
+export function MenuItem({ children, description, icon, ...props }) {
+    const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
+    return (_jsx(RACMenuItem, { ...props, className: "cim-menu-item", textValue: textValue, children: ({ isDisabled }) => (_jsxs(_Fragment, { children: [icon, _jsxs("div", { className: "cim-menu-item-text", children: [_jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children }), description && (_jsx(RACText, { slot: "description", className: textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' }), children: description }))] })] })) }));
 }
 MenuItem.displayName = 'MenuItem';
-export function MenuSeparator() {
-    return _jsx(RACSeparator, { className: "cim-menu-separator" });
-}
-MenuSeparator.displayName = 'MenuSeparator';
-function ChevronDownIcon(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "currentColor", "data-icon": true, ...props, children: _jsx("path", { d: "M.124 3.603 5.617 9.84a.533.533 0 0 0 .769 0l5.49-6.236a.493.493 0 0 0-.054-.707l-.925-.778a.514.514 0 0 0-.719.055L6.095 6.9a.125.125 0 0 1-.189 0L1.822 2.173A.51.51 0 0 0 1.474 2a.5.5 0 0 0-.37.119l-.926.777a.494.494 0 0 0-.054.707Z" }) }));
+/** Renders a horizontal divider between list items within `Menu`. */
+export function MenuDivider() {
+    return _jsx(RACSeparator, { className: "cim-menu-divider" });
 }
+MenuDivider.displayName = 'MenuDivider';
 //# sourceMappingURL=menu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx';\nimport { type ReactNode, type SVGAttributes, type ForwardedRef, useEffect } from 'react';\nimport {\n  Button as RACButton,\n  Header as RACHeader,\n  Menu as RACMenu,\n  MenuItem as RACMenuItem,\n  type MenuItemProps as RACMenuItemProps,\n  MenuTrigger as RACMenuTrigger,\n  Section as RACSection,\n  Popover as RACPopover,\n  Separator as RACSeparator,\n  Text as RACText,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { DOMProps, Key, LabellableProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\n// TODO: document that when creating the items dynamically, all items must have `key` and `id` defined\n\nexport interface MenuProps extends DOMProps, LabellableProps {\n  /** The contents of the menu. */\n  children?: ReactNode;\n  /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n  onAction?: (key: Key) => void;\n}\n\nfunction Menu(\n  { label, children, onAction, UNSAFE_className, UNSAFE_style, ...props }: MenuProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Menu requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACMenuTrigger>\n      <RACButton {...props} ref={ref} className={clsx('cim-menu-button', UNSAFE_className)} style={UNSAFE_style}>\n        {label}\n        <ChevronDownIcon height={12} width={12} aria-hidden />\n      </RACButton>\n      <RACPopover className=\"cim-menu-popover\" offset={2} maxHeight={315} data-experimental-cim-style-root>\n        <RACMenu className=\"cim-menu\" onAction={onAction}>\n          {children}\n        </RACMenu>\n      </RACPopover>\n    </RACMenuTrigger>\n  );\n}\n\nconst _Menu = withStyleProps(forwardRef(Menu), 'Menu');\n\nexport { _Menu as Menu };\n\nexport interface MenuSectionProps {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n  /** The contents of the section. */\n  children: ReactNode;\n}\n\nexport function MenuSection({ title, children, ...props }: MenuSectionProps) {\n  return (\n    <RACSection {...props} className=\"cim-menu-section\">\n      <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n        {title}\n      </RACHeader>\n      {children}\n    </RACSection>\n  );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps\n  extends Pick<\n    RACMenuItemProps,\n    | 'isDisabled'\n    | 'href'\n    | 'hrefLang'\n    | 'target'\n    | 'rel'\n    | 'download'\n    | 'ping'\n    | 'referrerPolicy'\n    | 'routerOptions'\n    | 'onAction'\n  > {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  label: string;\n}\n\nexport function MenuItem({ label, ...props }: MenuItemProps) {\n  return (\n    <RACMenuItem {...props} className=\"cim-menu-item\" textValue={label}>\n      <RACText slot=\"label\" className={clsx('cim-menu-item-label', textStyle({ variant: 'body' }))}>\n        {label}\n      </RACText>\n    </RACMenuItem>\n  );\n}\n\nMenuItem.displayName = 'MenuItem';\n\nexport function MenuSeparator() {\n  return <RACSeparator className=\"cim-menu-separator\" />;\n}\n\nMenuSeparator.displayName = 'MenuSeparator';\n\nfunction ChevronDownIcon(props: SVGAttributes<SVGSVGElement>) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\" fill=\"currentColor\" data-icon {...props}>\n      <path d=\"M.124 3.603 5.617 9.84a.533.533 0 0 0 .769 0l5.49-6.236a.493.493 0 0 0-.054-.707l-.925-.778a.514.514 0 0 0-.719.055L6.095 6.9a.125.125 0 0 1-.189 0L1.822 2.173A.51.51 0 0 0 1.474 2a.5.5 0 0 0-.37.119l-.926.777a.494.494 0 0 0-.054.707Z\" />\n    </svg>\n  );\n}\n"]}
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ReactNode, type ForwardedRef, useEffect, type Ref } from 'react';\nimport {\n  Header as RACHeader,\n  Menu as RACMenu,\n  MenuItem as RACMenuItem,\n  type MenuItemProps as RACMenuItemProps,\n  MenuTrigger as RACMenuTrigger,\n  MenuSection as RACMenuSection,\n  Separator as RACSeparator,\n  Collection as RACCollection,\n  Text as RACText,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronDownFill } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { Button } from '../button/button.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport type {\n  CommonProps,\n  Key,\n  LabellableProps,\n  NavigationProps,\n  CollectionProps,\n  CollectionItem,\n  StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface MenuProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    CollectionProps<T>,\n    LabellableProps {\n  /** Whether the menu trigger is disabled. */\n  isDisabled?: boolean;\n  /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n  onAction?: (key: Key) => void;\n}\n\nfunction Menu<T extends CollectionItem>(\n  { children, isDisabled, onAction, items, ...props }: MenuProps<T>,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const { label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('`Menu` requires one of `label` / `aria-label` / `aria-labelledby` for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (items != null && typeof children !== 'function') {\n    console.warn('`Menu` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACMenuTrigger>\n      <MenuTrigger {...props} triggerRef={ref} isDisabled={isDisabled} />\n      <CollapsibleList\n        placement=\"bottom start\"\n        offset={1} // Account for border\n        maxHeight={315}\n      >\n        <RACMenu className=\"cim-menu\" onAction={onAction} items={items}>\n          {children}\n        </RACMenu>\n      </CollapsibleList>\n    </RACMenuTrigger>\n  );\n}\n\n/**\n * Displays a collapsible list of options and actions that users can choose from.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/usage-guidelines/).\n */\nconst _Menu = withStyleProps(forwardRef(Menu), 'Menu');\n\nexport { _Menu as Menu };\n\ninterface MenuTriggerProps extends CommonProps, LabellableProps {\n  triggerRef: Ref<HTMLButtonElement>;\n  isDisabled?: boolean;\n}\n\nfunction MenuTrigger({ label, triggerRef, ...props }: MenuTriggerProps) {\n  if (label) {\n    return (\n      <Button\n        {...props}\n        variant=\"secondary\"\n        size=\"medium\"\n        ref={triggerRef}\n        iconEnd={<IconChevronDownFill UNSAFE_className=\"cim-menu-trigger-icon\" />}\n      >\n        {label}\n      </Button>\n    );\n  }\n\n  return (\n    <IconButton\n      {...props}\n      // The warning for missing aria-label would have been already emitted in the <Menu> component, so this is fine\n      aria-label={props['aria-label'] ?? ''}\n      variant=\"secondary\"\n      size=\"medium\"\n      ref={triggerRef}\n      icon={<IconChevronDownFill UNSAFE_className=\"cim-menu-trigger-icon\" />}\n    />\n  );\n}\n\nexport interface MenuSectionProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `Menu` into a section. */\nexport function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>) {\n  if (items != null && typeof children !== 'function') {\n    console.warn('`MenuSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACMenuSection {...props} className=\"cim-menu-section\">\n      <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACMenuSection>\n  );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps extends NavigationProps, Pick<RACMenuItemProps, 'isDisabled' | 'onAction'> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n  /** Additional description for the menu item. */\n  description?: string;\n  /** An icon representing the menu item. */\n  icon?: ReactNode;\n}\n\n/** Renders a single list item within `Menu`. */\nexport function MenuItem({ children, description, icon, ...props }: MenuItemProps) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACMenuItem {...props} className=\"cim-menu-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          {icon}\n\n          <div className=\"cim-menu-item-text\">\n            <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n              {children}\n            </RACText>\n\n            {description && (\n              <RACText\n                slot=\"description\"\n                className={textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' })}\n              >\n                {description}\n              </RACText>\n            )}\n          </div>\n        </>\n      )}\n    </RACMenuItem>\n  );\n}\n\nMenuItem.displayName = 'MenuItem';\n\n/** Renders a horizontal divider between list items within `Menu`. */\nexport function MenuDivider() {\n  return <RACSeparator className=\"cim-menu-divider\" />;\n}\n\nMenuDivider.displayName = 'MenuDivider';\n"]}

package/dist/esm/components/radio/radio-group.d.ts

@@ -1,11 +1,21 @@
 import type { ReactNode } from 'react';
 import { type RadioGroupProps as RACRadioGroupProps } from 'react-aria-components';
-import { type StackProps } from '../spacing/stack/stack.js';
-import type { DOMProps, FieldProps, WithRequired } from '../types.js';
-export interface RadioGroupProps extends DOMProps, WithRequired<FieldProps<string | null>, 'label'>, Pick<RACRadioGroupProps, 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue' | 'name'>, Pick<StackProps, 'inline'> {
+import type { Responsive } from '../spacing/types.js';
+import type { Direction, CommonProps, FieldProps, WithRequired } from '../types.js';
+export interface RadioGroupProps extends CommonProps, WithRequired<FieldProps<string | null>, 'label'>, Pick<RACRadioGroupProps, 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue' | 'name'> {
     /** Radio buttons belonging to the group. */
     children: ReactNode;
+    /**
+     * Determines the direction in which radio buttons will be stacked.
+     * @default 'vertical'
+     */
+    direction?: Responsive<Direction>;
 }
-declare const _RadioGroup: (props: RadioGroupProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => ReactNode;
+/**
+ * Allows users to select a single item from a visible list.
+ *
+ * See [radio usage guidelines](https://ui.cimpress.io/components/radio/usage-guidelines/).
+ */
+declare const _RadioGroup: (props: RadioGroupProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _RadioGroup as RadioGroup };
 //# sourceMappingURL=radio-group.d.ts.map

package/dist/esm/components/radio/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radio-group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAA+B,KAAK,eAAe,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhH,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEnE,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEtE,MAAM,WAAW,eACf,SAAQ,QAAQ,EACd,YAAY,CAAC,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,OAAO,CAAC,EAChD,IAAI,CACF,kBAAkB,EAClB,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,MAAM,CAC1G,EACD,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC;IAC5B,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAC;CACrB;AA2BD,QAAA,MAAM,WAAW,wIAAuD,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radio-group.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAA+B,KAAK,eAAe,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAKhH,OAAO,KAAK,EAAc,UAAU,EAAW,MAAM,qBAAqB,CAAC;AAC3E,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEpF,MAAM,WAAW,eACf,SAAQ,WAAW,EACjB,YAAY,CAAC,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,OAAO,CAAC,EAChD,IAAI,CACF,kBAAkB,EAClB,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,MAAM,CAC1G;IACH,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;CACnC;AA2BD;;;;GAIG;AACH,QAAA,MAAM,WAAW,iKAAuD,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}

package/dist/esm/components/radio/radio-group.js

@@ -1,25 +1,31 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { RadioGroup as RACRadioGroup } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
 import { withStyleProps } from '../../with-style-props.js';
-import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../form-field/form-field.js';
+import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
 import { Stack } from '../spacing/stack/stack.js';
-function RadioGroup({ label, description, error: errorMessage, inline = false, children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return (_jsxs(RACRadioGroup, { ...props, ref: ref, className: clsx('cim-radio-group', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, children: label }), _jsx(Stack, { gap: getGapFromInline(inline), inline: inline, children: children }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] }));
+function RadioGroup({ label, description, error: errorMessage, direction = 'vertical', children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return (_jsxs(RACRadioGroup, { ...props, ref: ref, className: clsx('cim-radio-group', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, children: label }), _jsx(Stack, { gap: getGapFromDirection(direction), direction: direction, children: children }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] }));
 }
+/**
+ * Allows users to select a single item from a visible list.
+ *
+ * See [radio usage guidelines](https://ui.cimpress.io/components/radio/usage-guidelines/).
+ */
 const _RadioGroup = withStyleProps(forwardRef(RadioGroup), 'RadioGroup');
 export { _RadioGroup as RadioGroup };
-// Make sure that radio buttons are spaced by 16px when stacked inline, and 4px otherwise.
-function getGapFromInline(inline) {
-    if (typeof inline === 'object') {
-        const gap = { xs: inline.xs ? 16 : 4 };
-        Object.entries(inline).reduce((acc, curr) => {
-            gap[curr[0]] = curr[1] ? 16 : 4;
+// Make sure that radio buttons are spaced by 16px when stacked horizontally, and 8px otherwise.
+function getGapFromDirection(direction) {
+    if (typeof direction === 'object') {
+        const gap = { xs: direction.xs === 'horizontal' ? 16 : 8 };
+        Object.entries(direction).reduce((acc, curr) => {
+            gap[curr[0]] = curr[1] === 'horizontal' ? 16 : 8;
             return acc;
         }, gap);
         return gap;
     }
-    return inline ? 16 : 4;
+    return direction === 'horizontal' ? 16 : 8;
 }
 //# sourceMappingURL=radio-group.js.map

package/dist/esm/components/radio/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../../src/components/radio/radio-group.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,IAAI,aAAa,EAA8C,MAAM,uBAAuB,CAAC;AAChH,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACnG,OAAO,EAAE,KAAK,EAAmB,MAAM,2BAA2B,CAAC;AAgBnE,SAAS,UAAU,CACjB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,MAAM,GAAG,KAAK,EACd,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACQ,EAClB,GAAiC;IAEjC,OAAO,CACL,MAAC,aAAa,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC3G,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,YAAG,KAAK,GAAkB,EACtE,KAAC,KAAK,IAAC,GAAG,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,YACjD,QAAQ,GACH,EACR,KAAC,cAAc,cAAE,YAAY,GAAkB,EAC/C,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IAC5C,CACjB,CAAC;AACJ,CAAC;AAED,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC;AAErC,0FAA0F;AAC1F,SAAS,gBAAgB,CAAC,MAA2B;IACnD,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE,CAAC;QAC/B,MAAM,GAAG,GAAwB,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE3D,MAAM,CAAC,OAAO,CAAC,MAAM,CAA6B,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YACvE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YAChC,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,OAAO,GAAG,CAAC;IACb,CAAC;IAED,OAAO,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { RadioGroup as RACRadioGroup, type RadioGroupProps as RACRadioGroupProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../form-field/form-field.js';\nimport { Stack, type StackProps } from '../spacing/stack/stack.js';\nimport type { Breakpoint, Responsive, Spacing } from '../spacing/types.js';\nimport type { DOMProps, FieldProps, WithRequired } from '../types.js';\n\nexport interface RadioGroupProps\n  extends DOMProps,\n    WithRequired<FieldProps<string | null>, 'label'>,\n    Pick<\n      RACRadioGroupProps,\n      'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue' | 'name'\n    >,\n    Pick<StackProps, 'inline'> {\n  /** Radio buttons belonging to the group. */\n  children: ReactNode;\n}\n\nfunction RadioGroup(\n  {\n    label,\n    description,\n    error: errorMessage,\n    inline = false,\n    children,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: RadioGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACRadioGroup {...props} ref={ref} className={clsx('cim-radio-group', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired}>{label}</FormFieldLabel>\n      <Stack gap={getGapFromInline(inline)} inline={inline}>\n        {children}\n      </Stack>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACRadioGroup>\n  );\n}\n\nconst _RadioGroup = withStyleProps(forwardRef(RadioGroup), 'RadioGroup');\n\nexport { _RadioGroup as RadioGroup };\n\n// Make sure that radio buttons are spaced by 16px when stacked inline, and 4px otherwise.\nfunction getGapFromInline(inline: Responsive<boolean>): Responsive<Spacing> {\n  if (typeof inline === 'object') {\n    const gap: Responsive<Spacing> = { xs: inline.xs ? 16 : 4 };\n\n    (Object.entries(inline) as [Breakpoint, boolean][]).reduce((acc, curr) => {\n      gap[curr[0]] = curr[1] ? 16 : 4;\n      return acc;\n    }, gap);\n\n    return gap;\n  }\n\n  return inline ? 16 : 4;\n}\n"]}
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../../src/components/radio/radio-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,IAAI,aAAa,EAA8C,MAAM,uBAAuB,CAAC;AAChH,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC5G,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAoBlD,SAAS,UAAU,CACjB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,SAAS,GAAG,UAAU,EACtB,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACQ,EAClB,GAAiC;IAEjC,OAAO,CACL,MAAC,aAAa,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC3G,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,YAAG,KAAK,GAAkB,EACtE,KAAC,KAAK,IAAC,GAAG,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,SAAS,YAC7D,QAAQ,GACH,EACR,KAAC,cAAc,cAAE,YAAY,GAAkB,EAC/C,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IAC5C,CACjB,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;AAErC,gGAAgG;AAChG,SAAS,mBAAmB,CAAC,SAAgC;IAC3D,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;QAClC,MAAM,GAAG,GAAwB,EAAE,EAAE,EAAE,SAAS,CAAC,EAAE,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE/E,MAAM,CAAC,OAAO,CAAC,SAAS,CAA+B,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YAC5E,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YACjD,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,OAAO,GAAG,CAAC;IACb,CAAC;IAED,OAAO,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { RadioGroup as RACRadioGroup, type RadioGroupProps as RACRadioGroupProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Stack } from '../spacing/stack/stack.js';\nimport type { Breakpoint, Responsive, Spacing } from '../spacing/types.js';\nimport type { Direction, CommonProps, FieldProps, WithRequired } from '../types.js';\n\nexport interface RadioGroupProps\n  extends CommonProps,\n    WithRequired<FieldProps<string | null>, 'label'>,\n    Pick<\n      RACRadioGroupProps,\n      'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue' | 'name'\n    > {\n  /** Radio buttons belonging to the group. */\n  children: ReactNode;\n  /**\n   * Determines the direction in which radio buttons will be stacked.\n   * @default 'vertical'\n   */\n  direction?: Responsive<Direction>;\n}\n\nfunction RadioGroup(\n  {\n    label,\n    description,\n    error: errorMessage,\n    direction = 'vertical',\n    children,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: RadioGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACRadioGroup {...props} ref={ref} className={clsx('cim-radio-group', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired}>{label}</FormFieldLabel>\n      <Stack gap={getGapFromDirection(direction)} direction={direction}>\n        {children}\n      </Stack>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACRadioGroup>\n  );\n}\n\n/**\n * Allows users to select a single item from a visible list.\n *\n * See [radio usage guidelines](https://ui.cimpress.io/components/radio/usage-guidelines/).\n */\nconst _RadioGroup = withStyleProps(forwardRef(RadioGroup), 'RadioGroup');\n\nexport { _RadioGroup as RadioGroup };\n\n// Make sure that radio buttons are spaced by 16px when stacked horizontally, and 8px otherwise.\nfunction getGapFromDirection(direction: Responsive<Direction>): Responsive<Spacing> {\n  if (typeof direction === 'object') {\n    const gap: Responsive<Spacing> = { xs: direction.xs === 'horizontal' ? 16 : 8 };\n\n    (Object.entries(direction) as [Breakpoint, Direction][]).reduce((acc, curr) => {\n      gap[curr[0]] = curr[1] === 'horizontal' ? 16 : 8;\n      return acc;\n    }, gap);\n\n    return gap;\n  }\n\n  return direction === 'horizontal' ? 16 : 8;\n}\n"]}

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

@@ -1,9 +1,14 @@
 import { type RadioProps as RACRadioProps } from 'react-aria-components';
-import type { DOMProps, LabellableProps } from '../types.js';
-export interface RadioProps extends DOMProps, Omit<LabellableProps, 'label'>, Pick<RACRadioProps, 'value' | 'isDisabled'> {
+import type { CommonProps, LabellableProps, StringLikeChildren } from '../types.js';
+export interface RadioProps extends CommonProps, Omit<LabellableProps, 'label'>, Pick<RACRadioProps, 'value' | 'isDisabled'> {
     /** The label rendered next to the radio. */
-    children?: string;
+    children?: StringLikeChildren;
 }
-declare const _Radio: (props: RadioProps & import("react").RefAttributes<HTMLLabelElement> & import("../../with-style-props.js").StyleProps) => import("react").ReactNode;
+/**
+ * Renders a single option within `RadioGroup`.
+ *
+ * See [radio usage guidelines](https://ui.cimpress.io/components/radio/usage-guidelines/).
+ */
+declare const _Radio: (props: RadioProps & import("react").RefAttributes<HTMLLabelElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _Radio as Radio };
 //# sourceMappingURL=radio.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,UAAU,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG5F,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAG7D,MAAM,WAAW,UACf,SAAQ,QAAQ,EACd,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,EAC9B,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,YAAY,CAAC;IAC7C,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA8BD,QAAA,MAAM,MAAM,qJAA6C,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAqB,KAAK,UAAU,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG5F,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGpF,MAAM,WAAW,UACf,SAAQ,WAAW,EACjB,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,EAC9B,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,YAAY,CAAC;IAC7C,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AA8BD;;;;GAIG;AACH,QAAA,MAAM,MAAM,8JAA6C,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}