@cimpress-ui/react 0.4.0 → 1.0.1

package/dist/esm/components/link-tabs/link-tabs.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from '@react-aria/utils';
+import { useControlledState } from '@react-stately/utils';
+import clsx from 'clsx';
+import { useMemo, useContext } from 'react';
+import { Link as RACLink } 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 { Text } from '../typography/text.js';
+import { LinkTabsContext } from './context.js';
+function LinkTabs({ children, currentHref, defaultHref, onHrefChange, UNSAFE_className, UNSAFE_style, id, isDisabled, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    useProductionWarning(() => {
+        if (!ariaLabel && !ariaLabelledBy) {
+            console.warn('LinkTabs requires one of aria-label / aria-labelledby for accessibility');
+        }
+    }, [ariaLabel, ariaLabelledBy]);
+    const linkTabsId = useId(id);
+    const [href, setHref] = useControlledState(currentHref, defaultHref ?? null, onHrefChange);
+    const linkTabsContext = useMemo(() => ({
+        isDisabled,
+        currentHref: href,
+        setCurrentHref: setHref,
+    }), [isDisabled, href, setHref]);
+    return (_jsx("nav", { ...props, ref: ref, id: linkTabsId, children: _jsx("ul", { className: clsx('cim-tab-list', 'cim-link-tabs', UNSAFE_className), style: UNSAFE_style, "aria-labelledby": linkTabsId, "data-disabled": isDisabled, children: _jsx(LinkTabsContext.Provider, { value: linkTabsContext, children: children }) }) }));
+}
+/**
+ * Displays a list of tabs to help users navigate through a website.
+ *
+ * See [tabs usage guidelines](https://ui.cimpress.io/components/tabs/).
+ */
+const _LinkTabs = withStyleProps(forwardRef(LinkTabs), 'LinkTabs');
+export { _LinkTabs as LinkTabs };
+/** Renders a single tab within `LinkTabs`. */
+export function LinkTab({ children, href, iconStart, badge, UNSAFE_className, UNSAFE_style, isDisabled, ...props }) {
+    const linkTabsContext = useContext(LinkTabsContext);
+    if (!linkTabsContext) {
+        throw new Error('Cannot use link tab outside of link tabs');
+    }
+    const { isDisabled: isGroupDisabled, currentHref, setCurrentHref } = linkTabsContext;
+    const isCurrent = href === currentHref;
+    return (_jsx("li", { children: _jsxs(RACLink, { ...props, className: clsx('cim-tab-item', 'cim-link-tab-item', UNSAFE_className), style: UNSAFE_style, href: href, onPress: () => setCurrentHref(href), "aria-current": isCurrent ? 'page' : undefined, "data-selected": isCurrent || undefined, isDisabled: isDisabled || isGroupDisabled, children: [iconStart, _jsx(Text, { as: "span", variant: "medium-semibold", alignment: "center", children: children }), badge] }) }));
+}
+LinkTab.displayName = 'LinkTab';
+//# sourceMappingURL=link-tabs.js.map

package/dist/esm/components/link-tabs/link-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-tabs.js","sourceRoot":"","sources":["../../../../src/components/link-tabs/link-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useId } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { type ReactNode, type ForwardedRef, useMemo, useContext } from 'react';\nimport { Link as RACLink, type LinkProps as RACLinkProps } 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 type {\n  AriaLabelingProps,\n  CommonProps,\n  Href,\n  NavigationProps,\n  StringLikeChildren,\n  WithRequired,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { LinkTabsContext, type LinkTabsContextValue } from './context.js';\n\nexport interface LinkTabsProps extends CommonProps, AriaLabelingProps {\n  /** Link tabs belonging to the group. */\n  children: ReactNode;\n  /** Whether the link tabs are disabled. */\n  isDisabled?: boolean;\n  /** The currently selected key in the collection (controlled). */\n  currentHref?: Href | null;\n  /** The initial selected key in the collection (uncontrolled). */\n  defaultHref?: Href | null;\n  /** Handler that is called when the selection changes. */\n  onHrefChange?: (href: Href | null) => void;\n}\n\nfunction LinkTabs(\n  {\n    children,\n    currentHref,\n    defaultHref,\n    onHrefChange,\n    UNSAFE_className,\n    UNSAFE_style,\n    id,\n    isDisabled,\n    ...props\n  }: LinkTabsProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn('LinkTabs requires one of aria-label / aria-labelledby for accessibility');\n    }\n  }, [ariaLabel, ariaLabelledBy]);\n\n  const linkTabsId = useId(id);\n  const [href, setHref] = useControlledState(currentHref, defaultHref ?? null, onHrefChange);\n\n  const linkTabsContext: LinkTabsContextValue = useMemo(\n    () => ({\n      isDisabled,\n      currentHref: href,\n      setCurrentHref: setHref,\n    }),\n    [isDisabled, href, setHref],\n  );\n\n  return (\n    <nav {...props} ref={ref} id={linkTabsId}>\n      <ul\n        className={clsx('cim-tab-list', 'cim-link-tabs', UNSAFE_className)}\n        style={UNSAFE_style}\n        aria-labelledby={linkTabsId}\n        data-disabled={isDisabled}\n      >\n        <LinkTabsContext.Provider value={linkTabsContext}>{children}</LinkTabsContext.Provider>\n      </ul>\n    </nav>\n  );\n}\n\n/**\n * Displays a list of tabs to help users navigate through a website.\n *\n * See [tabs usage guidelines](https://ui.cimpress.io/components/tabs/).\n */\nconst _LinkTabs = withStyleProps(forwardRef(LinkTabs), 'LinkTabs');\n\nexport { _LinkTabs as LinkTabs };\n\nexport interface LinkTabProps\n  extends Omit<CommonProps, 'id'>,\n    WithRequired<NavigationProps, 'href'>,\n    Pick<RACLinkProps, 'children' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The text to display as the tab title. */\n  children: StringLikeChildren;\n  /** An icon displayed before the tab title. */\n  iconStart?: ReactNode;\n  /** A badge displayed after the tab title. */\n  badge?: ReactNode;\n}\n\n/** Renders a single tab within `LinkTabs`. */\nexport function LinkTab({\n  children,\n  href,\n  iconStart,\n  badge,\n  UNSAFE_className,\n  UNSAFE_style,\n  isDisabled,\n  ...props\n}: LinkTabProps) {\n  const linkTabsContext = useContext(LinkTabsContext);\n  if (!linkTabsContext) {\n    throw new Error('Cannot use link tab outside of link tabs');\n  }\n\n  const { isDisabled: isGroupDisabled, currentHref, setCurrentHref } = linkTabsContext;\n\n  const isCurrent = href === currentHref;\n\n  return (\n    <li>\n      <RACLink\n        {...props}\n        className={clsx('cim-tab-item', 'cim-link-tab-item', UNSAFE_className)}\n        style={UNSAFE_style}\n        href={href}\n        onPress={() => setCurrentHref(href)}\n        aria-current={isCurrent ? 'page' : undefined}\n        data-selected={isCurrent || undefined}\n        isDisabled={isDisabled || isGroupDisabled}\n      >\n        {iconStart}\n        <Text as=\"span\" variant=\"medium-semibold\" alignment=\"center\">\n          {children}\n        </Text>\n        {badge}\n      </RACLink>\n    </li>\n  );\n}\n\nLinkTab.displayName = 'LinkTab';\n"]}

package/dist/esm/components/modal-dialog/modal-dialog.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { AriaLabelingProps, CommonProps } from '../types.js';
 export interface ModalDialogRenderProps {
     /** Closes the modal dialog when called. */
@@ -8,9 +8,9 @@ export interface ModalDialogProps extends CommonProps, AriaLabelingProps {
     /** The contents of the modal dialog. A function may be provided to access a function to close the modal dialog. */
     children: ReactNode | ((renderProps: ModalDialogRenderProps) => ReactNode);
     /** The title of the modal dialog. */
-    title?: string;
+    title: string;
     /**
-     * The size of the modal dialog. This prop is ignored on small devices - modal dialogs on small devices will always take up all available width.
+     * The size of the modal dialog.
      * @default 'medium'
      */
     size?: 'small' | 'medium' | 'large';

package/dist/esm/components/modal-dialog/modal-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/modal-dialog/modal-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAapE,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,sBAAsB;IACrC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,gBAAiB,SAAQ,WAAW,EAAE,iBAAiB;IACtE,mHAAmH;IACnH,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,sBAAsB,KAAK,SAAS,CAAC,CAAC;IAC3E,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AA6DD;;;;GAIG;AACH,QAAA,MAAM,YAAY,8GAAyC,CAAC;AAE5D,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC;AAEvC,MAAM,WAAW,oBAAoB;IACnC,qDAAqD;IACrD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,4CAA4C;AAC5C,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAE1D;yBAFe,eAAe;;;AAM/B,MAAM,WAAW,uBAAuB;IACtC,4DAA4D;IAC5D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,4CAA4C;AAC5C,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CASjF;yBATe,kBAAkB"}
+{"version":3,"file":"modal-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/modal-dialog/modal-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAYrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,sBAAsB;IACrC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,gBAAiB,SAAQ,WAAW,EAAE,iBAAiB;IACtE,mHAAmH;IACnH,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,sBAAsB,KAAK,SAAS,CAAC,CAAC;IAC3E,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AA6DD;;;;GAIG;AACH,QAAA,MAAM,YAAY,8GAAyC,CAAC;AAE5D,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC;AAEvC,MAAM,WAAW,oBAAoB;IACnC,qDAAqD;IACrD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,4CAA4C;AAC5C,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAE1D;yBAFe,eAAe;;;AAM/B,MAAM,WAAW,uBAAuB;IACtC,4DAA4D;IAC5D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,4CAA4C;AAC5C,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAMjF;yBANe,kBAAkB"}

package/dist/esm/components/modal-dialog/modal-dialog.js

@@ -1,11 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { Children } from 'react';
 import { Dialog as RACDialog, Heading as RACHeading, Modal as RACModal, ModalOverlay as RACModalOverlay, } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
 import { useLocalizedMessages } from '../../i18n/index.js';
-import { useMediaQuery } from '../../utils/use-media-query.js';
 import { useProductionWarning } from '../../utils/use-production-warning.js';
 import { FocusableContainer } from '../internal/focusable-container/focusable-container.js';
 import { XButton } from '../internal/x-button/x-button.js';
@@ -34,9 +32,7 @@ export function ModalDialogBody(props) {
 ModalDialogBody.displayName = 'ModalDialogBody';
 /** Renders actions within `ModalDialog`. */
 export function ModalDialogActions({ children, ...props }) {
-    const matches = useMediaQuery('(min-width: 640px)');
-    const componentChildren = matches ? children : Children.toArray(children).reverse();
-    return (_jsx("div", { ...props, className: "cim-modal-actions", children: componentChildren }));
+    return (_jsx("div", { ...props, className: "cim-modal-actions", children: children }));
 }
 ModalDialogActions.displayName = 'ModalDialogActions';
 //# sourceMappingURL=modal-dialog.js.map

package/dist/esm/components/modal-dialog/modal-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-dialog.js","sourceRoot":"","sources":["../../../../src/components/modal-dialog/modal-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Children, type ForwardedRef, type ReactNode } from 'react';\nimport {\n  Dialog as RACDialog,\n  Heading as RACHeading,\n  Modal as RACModal,\n  ModalOverlay as RACModalOverlay,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { useMediaQuery } from '../../utils/use-media-query.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface ModalDialogRenderProps {\n  /** Closes the modal dialog when called. */\n  close: () => void;\n}\n\nexport interface ModalDialogProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the modal dialog. A function may be provided to access a function to close the modal dialog. */\n  children: ReactNode | ((renderProps: ModalDialogRenderProps) => ReactNode);\n  /** The title of the modal dialog. */\n  title?: string;\n  /**\n   * The size of the modal dialog. This prop is ignored on small devices - modal dialogs on small devices will always take up all available width.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Whether to close the modal dialog when the user interacts outside of it or presses the Escape key.\n   * @default true\n   */\n  isDismissible?: boolean;\n  /**\n   * Whether the modal dialog is open (controlled).\n   * If using `DialogRoot`, this prop has no effect - provide `isOpen` to `DialogRoot` instead.\n   */\n  isOpen?: boolean;\n  /**\n   * Whether the modal dialog is open by default (uncontrolled).\n   * If using `DialogRoot`, this prop has no effect - provide `defaultOpen` to `DialogRoot` instead.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Handler that is called when the modal dialog's open state changes.\n   * If using `DialogRoot`, this prop has no effect - provide `onOpenChange` to `DialogRoot` instead.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\nfunction ModalDialog(\n  {\n    children,\n    title,\n    size = 'medium',\n    UNSAFE_className,\n    UNSAFE_style,\n    isDismissible = true,\n    isOpen,\n    defaultOpen,\n    onOpenChange,\n    ...props\n  }: ModalDialogProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!title && !ariaLabel && !ariaLabelledBy) {\n      console.warn('ModalDialog requires one of title / aria-label / aria-labelledby for accessibility');\n    }\n  }, [title, ariaLabel, ariaLabelledBy]);\n\n  const messages = useLocalizedMessages('common');\n\n  return (\n    <RACModalOverlay\n      className=\"cim-modal-overlay\"\n      isDismissable={isDismissible}\n      isKeyboardDismissDisabled={!isDismissible}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      data-cim-style-root\n    >\n      <RACModal className={clsx('cim-modal', UNSAFE_className)} style={UNSAFE_style} data-size={size}>\n        <RACDialog {...props} ref={ref} className=\"cim-modal-dialog\">\n          {(renderProps) => (\n            <>\n              <div className=\"cim-modal-header\">\n                {title && (\n                  <RACHeading\n                    slot=\"title\"\n                    className={clsx('cim-modal-title', textStyle({ variant: 'title-5', tone: 'base' }))}\n                  >\n                    {title}\n                  </RACHeading>\n                )}\n                <XButton aria-label={messages.format('dismiss')} slot=\"close\" />\n              </div>\n              {typeof children === 'function' ? children(renderProps) : children}\n            </>\n          )}\n        </RACDialog>\n      </RACModal>\n    </RACModalOverlay>\n  );\n}\n\n/**\n * Displays an overlay element which blocks interaction with outside elements.\n *\n * See [modal dialog usage guidelines](https://ui.cimpress.io/components/modal-dialog/).\n */\nconst _ModalDialog = forwardRef(ModalDialog, 'ModalDialog');\n\nexport { _ModalDialog as ModalDialog };\n\nexport interface ModalDialogBodyProps {\n  /** The content to render within the modal dialog. */\n  children: ReactNode;\n}\n\n/** Renders content within `ModalDialog`. */\nexport function ModalDialogBody(props: ModalDialogBodyProps) {\n  return <FocusableContainer {...props} className=\"cim-modal-body\" scrollDirection=\"vertical\" />;\n}\n\nModalDialogBody.displayName = 'ModalDialogBody';\n\nexport interface ModalDialogActionsProps {\n  /** Actions that should be available in the modal dialog. */\n  children: ReactNode;\n}\n\n/** Renders actions within `ModalDialog`. */\nexport function ModalDialogActions({ children, ...props }: ModalDialogActionsProps) {\n  const matches = useMediaQuery('(min-width: 640px)');\n  const componentChildren = matches ? children : Children.toArray(children).reverse();\n\n  return (\n    <div {...props} className=\"cim-modal-actions\">\n      {componentChildren}\n    </div>\n  );\n}\n\nModalDialogActions.displayName = 'ModalDialogActions';\n"]}
+{"version":3,"file":"modal-dialog.js","sourceRoot":"","sources":["../../../../src/components/modal-dialog/modal-dialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,MAAM,IAAI,SAAS,EACnB,OAAO,IAAI,UAAU,EACrB,KAAK,IAAI,QAAQ,EACjB,YAAY,IAAI,eAAe,GAChC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AAC5F,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAE3D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAuCnD,SAAS,WAAW,CAClB,EACE,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,gBAAgB,EAChB,YAAY,EACZ,aAAa,GAAG,IAAI,EACpB,MAAM,EACN,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACS,EACnB,GAA8B;IAE9B,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IAEhD,OAAO,CACL,KAAC,eAAe,IACd,SAAS,EAAC,mBAAmB,EAC7B,aAAa,EAAE,aAAa,EAC5B,yBAAyB,EAAE,CAAC,aAAa,EACzC,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,yCAG1B,KAAC,QAAQ,IAAC,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,eAAa,IAAI,YAC5F,KAAC,SAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,kBAAkB,YACzD,CAAC,WAAW,EAAE,EAAE,CAAC,CAChB,8BACE,eAAK,SAAS,EAAC,kBAAkB,aAC9B,KAAK,IAAI,CACR,KAAC,UAAU,IACT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,YAElF,KAAK,GACK,CACd,EACD,KAAC,OAAO,kBAAa,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,GAAG,IAC5D,EACL,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,IACjE,CACJ,GACS,GACH,GACK,CACnB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAG,UAAU,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAE5D,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC;AAOvC,4CAA4C;AAC5C,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,OAAO,KAAC,kBAAkB,OAAK,KAAK,EAAE,SAAS,EAAC,gBAAgB,EAAC,eAAe,EAAC,UAAU,GAAG,CAAC;AACjG,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAOhD,4CAA4C;AAC5C,MAAM,UAAU,kBAAkB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA2B;IAChF,OAAO,CACL,iBAAS,KAAK,EAAE,SAAS,EAAC,mBAAmB,YAC1C,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n  Dialog as RACDialog,\n  Heading as RACHeading,\n  Modal as RACModal,\n  ModalOverlay as RACModalOverlay,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface ModalDialogRenderProps {\n  /** Closes the modal dialog when called. */\n  close: () => void;\n}\n\nexport interface ModalDialogProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the modal dialog. A function may be provided to access a function to close the modal dialog. */\n  children: ReactNode | ((renderProps: ModalDialogRenderProps) => ReactNode);\n  /** The title of the modal dialog. */\n  title: string;\n  /**\n   * The size of the modal dialog.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Whether to close the modal dialog when the user interacts outside of it or presses the Escape key.\n   * @default true\n   */\n  isDismissible?: boolean;\n  /**\n   * Whether the modal dialog is open (controlled).\n   * If using `DialogRoot`, this prop has no effect - provide `isOpen` to `DialogRoot` instead.\n   */\n  isOpen?: boolean;\n  /**\n   * Whether the modal dialog is open by default (uncontrolled).\n   * If using `DialogRoot`, this prop has no effect - provide `defaultOpen` to `DialogRoot` instead.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Handler that is called when the modal dialog's open state changes.\n   * If using `DialogRoot`, this prop has no effect - provide `onOpenChange` to `DialogRoot` instead.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\nfunction ModalDialog(\n  {\n    children,\n    title,\n    size = 'medium',\n    UNSAFE_className,\n    UNSAFE_style,\n    isDismissible = true,\n    isOpen,\n    defaultOpen,\n    onOpenChange,\n    ...props\n  }: ModalDialogProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!title && !ariaLabel && !ariaLabelledBy) {\n      console.warn('ModalDialog requires one of title / aria-label / aria-labelledby for accessibility');\n    }\n  }, [title, ariaLabel, ariaLabelledBy]);\n\n  const messages = useLocalizedMessages('common');\n\n  return (\n    <RACModalOverlay\n      className=\"cim-modal-overlay\"\n      isDismissable={isDismissible}\n      isKeyboardDismissDisabled={!isDismissible}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      data-cim-style-root\n    >\n      <RACModal className={clsx('cim-modal', UNSAFE_className)} style={UNSAFE_style} data-size={size}>\n        <RACDialog {...props} ref={ref} className=\"cim-modal-dialog\">\n          {(renderProps) => (\n            <>\n              <div className=\"cim-modal-header\">\n                {title && (\n                  <RACHeading\n                    slot=\"title\"\n                    className={clsx('cim-modal-title', textStyle({ variant: 'title-5', tone: 'base' }))}\n                  >\n                    {title}\n                  </RACHeading>\n                )}\n                <XButton aria-label={messages.format('dismiss')} slot=\"close\" />\n              </div>\n              {typeof children === 'function' ? children(renderProps) : children}\n            </>\n          )}\n        </RACDialog>\n      </RACModal>\n    </RACModalOverlay>\n  );\n}\n\n/**\n * Displays an overlay element which blocks interaction with outside elements.\n *\n * See [modal dialog usage guidelines](https://ui.cimpress.io/components/modal-dialog/).\n */\nconst _ModalDialog = forwardRef(ModalDialog, 'ModalDialog');\n\nexport { _ModalDialog as ModalDialog };\n\nexport interface ModalDialogBodyProps {\n  /** The content to render within the modal dialog. */\n  children: ReactNode;\n}\n\n/** Renders content within `ModalDialog`. */\nexport function ModalDialogBody(props: ModalDialogBodyProps) {\n  return <FocusableContainer {...props} className=\"cim-modal-body\" scrollDirection=\"vertical\" />;\n}\n\nModalDialogBody.displayName = 'ModalDialogBody';\n\nexport interface ModalDialogActionsProps {\n  /** Actions that should be available in the modal dialog. */\n  children: ReactNode;\n}\n\n/** Renders actions within `ModalDialog`. */\nexport function ModalDialogActions({ children, ...props }: ModalDialogActionsProps) {\n  return (\n    <div {...props} className=\"cim-modal-actions\">\n      {children}\n    </div>\n  );\n}\n\nModalDialogActions.displayName = 'ModalDialogActions';\n"]}

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

@@ -22,7 +22,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, { className: clsx('cim-number-field-input', textStyle({ variant: 'medium' })), 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, { 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 })] }));
 }
 /**
  * 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 } 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 { CommonProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface NumberFieldProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<number>,\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    > {\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\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    ...props\n  }: NumberFieldProps,\n  ref: ForwardedRef<HTMLDivElement>,\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  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          className={clsx('cim-number-field-input', textStyle({ variant: 'medium' }))}\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 } 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 { CommonProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface NumberFieldProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<number>,\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    > {\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\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    ...props\n  }: NumberFieldProps,\n  ref: ForwardedRef<HTMLDivElement>,\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  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          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"]}

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

@@ -13,7 +13,7 @@ function Radio({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
             console.warn('Radio requires one of children / aria-label / aria-labelledby for accessibility');
         }
     }, [children, ariaLabel, ariaLabelledBy]);
-    return (_jsxs(RACRadio, { ...props, className: clsx('cim-radio', UNSAFE_className), style: UNSAFE_style, ref: ref, children: [_jsx("div", { className: "cim-radio-toggle-wrapper", children: _jsx("div", { className: "cim-radio-toggle", children: _jsx("div", { className: "cim-radio-toggle-inner" }) }) }), children && (_jsx(Text, { as: "span", variant: "body", children: children }))] }));
+    return (_jsxs(RACRadio, { ...props, className: clsx('cim-radio', UNSAFE_className), style: UNSAFE_style, ref: ref, children: [_jsx("div", { className: "cim-radio-toggle-wrapper", children: _jsx("div", { className: "cim-radio-toggle", children: _jsx("div", { className: "cim-radio-toggle-inner" }) }) }), children && (_jsx(Text, { as: "span", variant: "medium", children: children }))] }));
 }
 /**
  * Renders a single option within `RadioGroup`.

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

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAoC,MAAM,uBAAuB,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAU7C,SAAS,KAAK,CACZ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAc,EAClE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,MAAC,QAAQ,OAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,aAChG,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,kBAAkB,YAC/B,cAAK,SAAS,EAAC,wBAAwB,GAAG,GACtC,GACF,EACL,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,YAC3B,QAAQ,GACJ,CACR,IACQ,CACZ,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,MAAM,GAAG,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Radio as RACRadio, type RadioProps as RACRadioProps } 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 type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface RadioProps\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<RACRadioProps, 'value' | 'isDisabled' | 'autoFocus'> {\n  /** The label rendered next to the radio. */\n  children?: StringLikeChildren;\n}\n\nfunction Radio(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: RadioProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Radio requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACRadio {...props} className={clsx('cim-radio', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n      <div className=\"cim-radio-toggle-wrapper\">\n        <div className=\"cim-radio-toggle\">\n          <div className=\"cim-radio-toggle-inner\" />\n        </div>\n      </div>\n      {children && (\n        <Text as=\"span\" variant=\"body\">\n          {children}\n        </Text>\n      )}\n    </RACRadio>\n  );\n}\n\n/**\n * Renders a single option within `RadioGroup`.\n *\n * See [radio group usage guidelines](https://ui.cimpress.io/components/radio-group/).\n */\nconst _Radio = withStyleProps(forwardRef(Radio), 'Radio');\n\nexport { _Radio as Radio };\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAoC,MAAM,uBAAuB,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAU7C,SAAS,KAAK,CACZ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAc,EAClE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,MAAC,QAAQ,OAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,aAChG,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,kBAAkB,YAC/B,cAAK,SAAS,EAAC,wBAAwB,GAAG,GACtC,GACF,EACL,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,YAC7B,QAAQ,GACJ,CACR,IACQ,CACZ,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,MAAM,GAAG,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Radio as RACRadio, type RadioProps as RACRadioProps } 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 type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface RadioProps\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<RACRadioProps, 'value' | 'isDisabled' | 'autoFocus'> {\n  /** The label rendered next to the radio. */\n  children?: StringLikeChildren;\n}\n\nfunction Radio(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: RadioProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Radio requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACRadio {...props} className={clsx('cim-radio', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n      <div className=\"cim-radio-toggle-wrapper\">\n        <div className=\"cim-radio-toggle\">\n          <div className=\"cim-radio-toggle-inner\" />\n        </div>\n      </div>\n      {children && (\n        <Text as=\"span\" variant=\"medium\">\n          {children}\n        </Text>\n      )}\n    </RACRadio>\n  );\n}\n\n/**\n * Renders a single option within `RadioGroup`.\n *\n * See [radio group usage guidelines](https://ui.cimpress.io/components/radio-group/).\n */\nconst _Radio = withStyleProps(forwardRef(Radio), 'Radio');\n\nexport { _Radio as Radio };\n"]}

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

@@ -1,6 +1,11 @@
 import { type ListBoxProps as RACListBoxProps, type ListBoxItemProps as RACListBoxItemProps, type SelectProps as RACSelectProps } from 'react-aria-components';
 import type { CollectionItem, CollectionProps, CommonProps, FieldProps, Key, StringLikeChildren } from '../types.js';
 export interface SelectProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldProps<Key>, CollectionProps<T>, Pick<RACSelectProps<T>, 'isDisabled' | 'isRequired' | 'isInvalid' | 'selectedKey' | 'defaultSelectedKey' | 'autoComplete' | 'autoFocus' | 'onSelectionChange' | 'placeholder' | 'onFocus' | 'onBlur' | 'onOpenChange'>, Pick<RACListBoxProps<T>, 'onScroll'> {
+    /**
+     * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.
+     * @default false
+     */
+    isVirtualized?: boolean;
 }
 /**
  * Allows users to select one item from a collapsible list.

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAKL,KAAK,YAAY,IAAI,eAAe,EAMpC,KAAK,gBAAgB,IAAI,mBAAmB,EAC5C,KAAK,WAAW,IAAI,cAAc,EACnC,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGrH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACpE,SAAQ,WAAW,EACjB,UAAU,CAAC,GAAG,CAAC,EACf,eAAe,CAAC,CAAC,CAAC,EAClB,IAAI,CACF,cAAc,CAAC,CAAC,CAAC,EACf,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,aAAa,GACb,oBAAoB,GACpB,cAAc,GACd,WAAW,GACX,mBAAmB,GACnB,aAAa,GACb,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;CAAG;AA6C3C;;;;GAIG;AACH,QAAA,MAAM,OAAO,GAhDG,CAAC,SAAS,cAAc,+JAgDoB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC;AAE7B,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACtF,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,kDAAkD;AAClD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAiBjE;yBAjBe,UAAU;;;AAqB1B,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACtF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wDAAwD;AACxD,wBAAgB,aAAa,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAelH;yBAfe,aAAa"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAKL,KAAK,YAAY,IAAI,eAAe,EAQpC,KAAK,gBAAgB,IAAI,mBAAmB,EAC5C,KAAK,WAAW,IAAI,cAAc,EAEnC,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAUrH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACpE,SAAQ,WAAW,EACjB,UAAU,CAAC,GAAG,CAAC,EACf,eAAe,CAAC,CAAC,CAAC,EAClB,IAAI,CACF,cAAc,CAAC,CAAC,CAAC,EACf,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,aAAa,GACb,oBAAoB,GACpB,cAAc,GACd,WAAW,GACX,mBAAmB,GACnB,aAAa,GACb,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAkED;;;;GAIG;AACH,QAAA,MAAM,OAAO,GArEG,CAAC,SAAS,cAAc,+JAqEoB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC;AAE7B,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACtF,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,kDAAkD;AAClD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAiBjE;yBAjBe,UAAU;;;AAqB1B,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACtF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wDAAwD;AACxD,wBAAgB,aAAa,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAelH;yBAfe,aAAa"}

package/dist/esm/components/select/select.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { Button as RACButton, Collection as RACCollection, Header as RACHeader, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxSection as RACListBoxSection, Select as RACSelect, SelectValue as RACSelectValue, Text as RACText, } from 'react-aria-components';
+import { Button as RACButton, Collection as RACCollection, Header as RACHeader, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxSection as RACListBoxSection, ListLayout as RACListLayout, Select as RACSelect, SelectValue as RACSelectValue, Text as RACText, Virtualizer as RACVirtualizer, } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
 import { IconCheck, IconChevronDown } from '../../icons/index.js';
 import { isProduction } from '../../utils/is-production.js';
@@ -10,7 +10,13 @@ import { withStyleProps } from '../../with-style-props.js';
 import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
 import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
 import { textStyle } from '../typography/utils.js';
-function Select({ children, items, label, description, error, UNSAFE_className, UNSAFE_style, onScroll, ...props }, ref) {
+const VIRTUAL_LAYOUT_OPTIONS = {
+    rowHeight: 40,
+    headingHeight: 32,
+    padding: 0,
+    gap: 0,
+};
+function Select({ children, items, label, description, error, UNSAFE_className, UNSAFE_style, onScroll, isVirtualized = false, ...props }, ref) {
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
     useProductionWarning(() => {
         if (!label && !ariaLabel && !ariaLabelledBy) {
@@ -20,7 +26,8 @@ function Select({ children, items, label, description, error, UNSAFE_className,
     if (!isProduction() && items != null && typeof children !== 'function') {
         console.warn('`Select` requires `children` to be a function when using `items` prop');
     }
-    return (_jsxs(RACSelect, { ...props, ref: ref, className: clsx('cim-select', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACButton, { className: "cim-select-button", children: [_jsx(RACSelectValue, { className: (values) => clsx(values.defaultClassName, textStyle({ variant: 'medium', alignment: 'start' })), children: ({ selectedText }) => selectedText }), _jsx(IconChevronDown, {})] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: _jsx(RACListBox, { className: "cim-select-listbox", onScroll: onScroll, items: items, children: children }) })] }));
+    const listBox = (_jsx(RACListBox, { className: "cim-select-listbox", onScroll: onScroll, items: items, children: children }));
+    return (_jsxs(RACSelect, { ...props, ref: ref, className: clsx('cim-select', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACButton, { className: "cim-select-button", children: [_jsx(RACSelectValue, { className: (values) => clsx(values.defaultClassName, textStyle({ variant: 'body', alignment: 'start' })), children: ({ selectedText }) => selectedText }), _jsx(IconChevronDown, {})] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: isVirtualized ? (_jsx(RACVirtualizer, { layout: RACListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) })] }));
 }
 /**
  * Allows users to select one item from a collapsible list.

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

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  Header as RACHeader,\n  ListBox as RACListBox,\n  type ListBoxProps as RACListBoxProps,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  Select as RACSelect,\n  SelectValue as RACSelectValue,\n  Text as RACText,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type SelectProps as RACSelectProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CollectionItem, CollectionProps, CommonProps, FieldProps, Key, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface SelectProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldProps<Key>,\n    CollectionProps<T>,\n    Pick<\n      RACSelectProps<T>,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'autoComplete'\n      | 'autoFocus'\n      | 'onSelectionChange'\n      | 'placeholder'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    >,\n    Pick<RACListBoxProps<T>, 'onScroll'> {}\n\nfunction Select<T extends CollectionItem>(\n  { children, items, label, description, error, UNSAFE_className, UNSAFE_style, onScroll, ...props }: SelectProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`Select` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACSelect {...props} ref={ref} className={clsx('cim-select', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACButton className=\"cim-select-button\">\n        <RACSelectValue\n          className={(values) => clsx(values.defaultClassName, textStyle({ variant: 'medium', alignment: 'start' }))}\n        >\n          {({ selectedText }) => selectedText}\n        </RACSelectValue>\n        <IconChevronDown />\n      </RACButton>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        <RACListBox className=\"cim-select-listbox\" onScroll={onScroll} items={items}>\n          {children}\n        </RACListBox>\n      </CollapsibleList>\n    </RACSelect>\n  );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps\n  extends Pick<RACListBoxItemProps, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheck />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends 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 `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-select-section\">\n      <RACHeader\n        className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  Header as RACHeader,\n  ListBox as RACListBox,\n  type ListBoxProps as RACListBoxProps,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  ListLayout as RACListLayout,\n  type ListLayoutOptions as RACListLayoutOptions,\n  Select as RACSelect,\n  SelectValue as RACSelectValue,\n  Text as RACText,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type SelectProps as RACSelectProps,\n  Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CollectionItem, CollectionProps, CommonProps, FieldProps, Key, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n  rowHeight: 40,\n  headingHeight: 32,\n  padding: 0,\n  gap: 0,\n};\n\nexport interface SelectProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldProps<Key>,\n    CollectionProps<T>,\n    Pick<\n      RACSelectProps<T>,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'autoComplete'\n      | 'autoFocus'\n      | 'onSelectionChange'\n      | 'placeholder'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    >,\n    Pick<RACListBoxProps<T>, 'onScroll'> {\n  /**\n   * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n   * @default false\n   */\n  isVirtualized?: boolean;\n}\n\nfunction Select<T extends CollectionItem>(\n  {\n    children,\n    items,\n    label,\n    description,\n    error,\n    UNSAFE_className,\n    UNSAFE_style,\n    onScroll,\n    isVirtualized = false,\n    ...props\n  }: SelectProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`Select` requires `children` to be a function when using `items` prop');\n  }\n\n  const listBox = (\n    <RACListBox className=\"cim-select-listbox\" onScroll={onScroll} items={items}>\n      {children}\n    </RACListBox>\n  );\n\n  return (\n    <RACSelect {...props} ref={ref} className={clsx('cim-select', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACButton className=\"cim-select-button\">\n        <RACSelectValue\n          className={(values) => clsx(values.defaultClassName, textStyle({ variant: 'body', alignment: 'start' }))}\n        >\n          {({ selectedText }) => selectedText}\n        </RACSelectValue>\n        <IconChevronDown />\n      </RACButton>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        {isVirtualized ? (\n          <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n            {listBox}\n          </RACVirtualizer>\n        ) : (\n          listBox\n        )}\n      </CollapsibleList>\n    </RACSelect>\n  );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps\n  extends Pick<RACListBoxItemProps, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheck />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends 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 `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-select-section\">\n      <RACHeader\n        className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}

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

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react';
+import { type TabsProps as RACTabsProps, type TabProps as RACTabProps } from 'react-aria-components';
+import type { AriaLabelingProps, CollectionItem, CollectionProps, CommonProps, Key, StringLikeChildren } from '../types.js';
+export interface TabsProps extends CommonProps, AriaLabelingProps, Pick<RACTabsProps, 'selectedKey' | 'defaultSelectedKey' | 'disabledKeys' | 'onSelectionChange'> {
+    /** The children of the `<Tabs>` element. Should include `<TabList>` and `<TabPanels>` elements. */
+    children: ReactNode;
+}
+/**
+ * Organizes content into multiple sections that users can switch between.
+ *
+ * See [tabs usage guidelines](https://ui.cimpress.io/components/tabs/).
+ */
+declare const _Tabs: (props: TabsProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Tabs as Tabs };
+export interface TabListProps<T extends CollectionItem> extends CollectionProps<T> {
+}
+/** Renders a collection of `Tab` components within `Tabs`. */
+export declare function TabList<T extends CollectionItem>({ children, ...props }: TabListProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace TabList {
+    var displayName: string;
+}
+export interface TabProps extends Pick<RACTabProps, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
+    /** The text to display as the tab title. */
+    children: StringLikeChildren;
+    /** An icon displayed before the tab title. */
+    iconStart?: ReactNode;
+    /** A badge displayed after the tab title. */
+    badge?: ReactNode;
+}
+/** Renders a single tab within `TabList`. */
+export declare function Tab({ children, iconStart, badge, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Tab {
+    var displayName: string;
+}
+export interface TabPanelsProps<T extends CollectionItem> extends CollectionProps<T> {
+}
+/** Renders a collection of `TabPanel` components within `Tabs`. */
+export declare function TabPanels<T extends CollectionItem>({ ...props }: TabPanelsProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace TabPanels {
+    var displayName: string;
+}
+export interface TabPanelProps {
+    /** The content to display in the tab panel. */
+    children: ReactNode;
+    /** The unique id of the associated tab. */
+    id?: Key;
+}
+/** Renders a single tab panel within `TabPanels`. */
+export declare function TabPanel({ children, id, ...props }: TabPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TabPanel {
+    var displayName: string;
+}
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,EAML,KAAK,SAAS,IAAI,YAAY,EAC9B,KAAK,QAAQ,IAAI,WAAW,EAC7B,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,WAAW,EACX,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AASrB,MAAM,WAAW,SACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CAAC,YAAY,EAAE,aAAa,GAAG,oBAAoB,GAAG,cAAc,GAAG,mBAAmB,CAAC;IACjG,mGAAmG;IACnG,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgDD;;;;GAIG;AACH,QAAA,MAAM,KAAK,2JAA2C,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;AAEzB,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;CAAG;AAErF,8DAA8D;AAC9D,wBAAgB,OAAO,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,2CAqBxF;yBArBe,OAAO;;;AAyBvB,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACtG,4CAA4C;IAC5C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,6CAA6C;AAC7C,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,2CAUrE;yBAVe,GAAG;;;AAcnB,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;CAAG;AAEvF,mEAAmE;AACnE,wBAAgB,SAAS,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,2CAElF;yBAFe,SAAS;;;AAMzB,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAG3C,EAAE,CAAC,EAAE,GAAG,CAAC;CACV;AAED,qDAAqD;AACrD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAWjE;yBAXe,QAAQ"}

package/dist/esm/components/tabs/tabs.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { createContext, useContext } from 'react';
+import { Collection as RACCollection, Tab as RACTab, TabList as RACTabList, TabPanel as RACTabPanel, Tabs as RACTabs, } 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 { Text } from '../typography/text.js';
+const TabsContext = createContext({});
+function Tabs({ children, UNSAFE_className, UNSAFE_style, 
+// Aria labeling props
+'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-details': ariaDetails, ...props }, ref) {
+    useProductionWarning(() => {
+        if (!ariaLabel && !ariaLabelledBy) {
+            console.warn('Tabs requires one of aria-label / aria-labelledby for accessibility');
+        }
+    }, [ariaLabel, ariaLabelledBy]);
+    return (_jsx(TabsContext.Provider, { value: {
+            tabsProps: {
+                'aria-label': ariaLabel,
+                'aria-labelledby': ariaLabelledBy,
+                'aria-describedby': ariaDescribedBy,
+                'aria-details': ariaDetails,
+            },
+        }, children: _jsx(RACTabs, { ...props, ref: ref, className: clsx('cim-tabs', UNSAFE_className), style: UNSAFE_style, keyboardActivation: "manual", children: children }) }));
+}
+/**
+ * Organizes content into multiple sections that users can switch between.
+ *
+ * See [tabs usage guidelines](https://ui.cimpress.io/components/tabs/).
+ */
+const _Tabs = withStyleProps(forwardRef(Tabs), 'Tabs');
+export { _Tabs as Tabs };
+/** Renders a collection of `Tab` components within `Tabs`. */
+export function TabList({ children, ...props }) {
+    const { tabsProps } = useContext(TabsContext);
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-details': ariaDetails, } = tabsProps ?? {};
+    return (_jsx(RACTabList, { ...props, className: "cim-tab-list", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, children: children }));
+}
+TabList.displayName = 'TabList';
+/** Renders a single tab within `TabList`. */
+export function Tab({ children, iconStart, badge, ...props }) {
+    return (_jsxs(RACTab, { ...props, className: "cim-tab-item", children: [iconStart, _jsx(Text, { as: "span", variant: "medium-semibold", alignment: "center", children: children }), badge] }));
+}
+Tab.displayName = 'Tab';
+/** Renders a collection of `TabPanel` components within `Tabs`. */
+export function TabPanels({ ...props }) {
+    return _jsx(RACCollection, { ...props });
+}
+TabPanels.displayName = 'TabPanels';
+/** Renders a single tab panel within `TabPanels`. */
+export function TabPanel({ children, id, ...props }) {
+    return (_jsx(RACTabPanel, { ...props, className: "cim-tab-panel", 
+        // @ts-expect-error -- https://github.com/adobe/react-spectrum/issues/8422
+        id: id, children: children }));
+}
+TabPanel.displayName = 'TabPanel';
+//# sourceMappingURL=tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { createContext, useContext, type ForwardedRef, type ReactNode } from 'react';\nimport {\n  Collection as RACCollection,\n  Tab as RACTab,\n  TabList as RACTabList,\n  TabPanel as RACTabPanel,\n  Tabs as RACTabs,\n  type TabsProps as RACTabsProps,\n  type TabProps as RACTabProps,\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 type {\n  AriaLabelingProps,\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\n\ninterface TabsContextValue {\n  tabsProps?: AriaLabelingProps;\n}\n\nconst TabsContext = createContext<TabsContextValue>({});\n\nexport interface TabsProps\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<RACTabsProps, 'selectedKey' | 'defaultSelectedKey' | 'disabledKeys' | 'onSelectionChange'> {\n  /** The children of the `<Tabs>` element. Should include `<TabList>` and `<TabPanels>` elements. */\n  children: ReactNode;\n}\n\nfunction Tabs(\n  {\n    children,\n    UNSAFE_className,\n    UNSAFE_style,\n\n    // Aria labeling props\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n\n    ...props\n  }: TabsProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  useProductionWarning(() => {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn('Tabs requires one of aria-label / aria-labelledby for accessibility');\n    }\n  }, [ariaLabel, ariaLabelledBy]);\n\n  return (\n    <TabsContext.Provider\n      value={{\n        tabsProps: {\n          'aria-label': ariaLabel,\n          'aria-labelledby': ariaLabelledBy,\n          'aria-describedby': ariaDescribedBy,\n          'aria-details': ariaDetails,\n        },\n      }}\n    >\n      <RACTabs\n        {...props}\n        ref={ref}\n        className={clsx('cim-tabs', UNSAFE_className)}\n        style={UNSAFE_style}\n        keyboardActivation=\"manual\"\n      >\n        {children}\n      </RACTabs>\n    </TabsContext.Provider>\n  );\n}\n\n/**\n * Organizes content into multiple sections that users can switch between.\n *\n * See [tabs usage guidelines](https://ui.cimpress.io/components/tabs/).\n */\nconst _Tabs = withStyleProps(forwardRef(Tabs), 'Tabs');\n\nexport { _Tabs as Tabs };\n\nexport interface TabListProps<T extends CollectionItem> extends CollectionProps<T> {}\n\n/** Renders a collection of `Tab` components within `Tabs`. */\nexport function TabList<T extends CollectionItem>({ children, ...props }: TabListProps<T>) {\n  const { tabsProps } = useContext(TabsContext);\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n  } = tabsProps ?? {};\n\n  return (\n    <RACTabList\n      {...props}\n      className=\"cim-tab-list\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      aria-details={ariaDetails}\n    >\n      {children}\n    </RACTabList>\n  );\n}\n\nTabList.displayName = 'TabList';\n\nexport interface TabProps extends Pick<RACTabProps, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The text to display as the tab title. */\n  children: StringLikeChildren;\n  /** An icon displayed before the tab title. */\n  iconStart?: ReactNode;\n  /** A badge displayed after the tab title. */\n  badge?: ReactNode;\n}\n\n/** Renders a single tab within `TabList`. */\nexport function Tab({ children, iconStart, badge, ...props }: TabProps) {\n  return (\n    <RACTab {...props} className=\"cim-tab-item\">\n      {iconStart}\n      <Text as=\"span\" variant=\"medium-semibold\" alignment=\"center\">\n        {children}\n      </Text>\n      {badge}\n    </RACTab>\n  );\n}\n\nTab.displayName = 'Tab';\n\nexport interface TabPanelsProps<T extends CollectionItem> extends CollectionProps<T> {}\n\n/** Renders a collection of `TabPanel` components within `Tabs`. */\nexport function TabPanels<T extends CollectionItem>({ ...props }: TabPanelsProps<T>) {\n  return <RACCollection {...props} />;\n}\n\nTabPanels.displayName = 'TabPanels';\n\nexport interface TabPanelProps {\n  /** The content to display in the tab panel. */\n  children: ReactNode;\n  /** The unique id of the associated tab. */\n  // `id` is not typed correctly in `react-aria-components`\n  // https://github.com/adobe/react-spectrum/issues/8422\n  id?: Key;\n}\n\n/** Renders a single tab panel within `TabPanels`. */\nexport function TabPanel({ children, id, ...props }: TabPanelProps) {\n  return (\n    <RACTabPanel\n      {...props}\n      className=\"cim-tab-panel\"\n      // @ts-expect-error -- https://github.com/adobe/react-spectrum/issues/8422\n      id={id}\n    >\n      {children}\n    </RACTabPanel>\n  );\n}\n\nTabPanel.displayName = 'TabPanel';\n"]}

package/dist/esm/components/tag-field/tag-field-input.js

@@ -12,12 +12,11 @@ export function TagFieldInput({ isReadOnly, isRequired, isInvalid, placeholder,
     const { id: errorMessageId } = useSlottedContext(RACTextContext, 'errorMessage');
     return (_jsx(RACInputContext.Provider, { value: {
             ...inputContext,
-            // name: undefined,
             // Change `required` to `aria-required` so that form submission isn't blocked, but required state is still announced by screen readers
             required: false,
             'aria-required': isRequired,
             'aria-invalid': isInvalid || undefined,
-        }, children: _jsx(RACInput, { className: clsx('cim-combo-box-input', textStyle({ variant: 'medium' })), 
+        }, children: _jsx(RACInput, { className: clsx('cim-combo-box-input', textStyle({ variant: 'body' })), 
             // Ensure the popover opens when the input is clicked.
             // By default, React Aria only opens the popover when the input is focused.
             onClick: () => !isReadOnly && comboBoxState.open(), placeholder: placeholder, onFocus: () => onFocusChange(true), onBlur: () => onFocusChange(false), "aria-describedby": [descriptionId, errorMessageId, ariaDescribedby].filter(Boolean).join(' ') || undefined }) }));

package/dist/esm/components/tag-field/tag-field-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-field-input.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-input.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EACL,oBAAoB,IAAI,uBAAuB,EAC/C,KAAK,IAAI,QAAQ,EACjB,YAAY,IAAI,eAAe,EAC/B,WAAW,IAAI,cAAc,EAC7B,iBAAiB,GAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,gBAAgB;AAChB,MAAM,UAAU,aAAa,CAAC,EAC5B,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,aAAa,EACb,kBAAkB,EAAE,eAAe,GAQpC;IACC,MAAM,aAAa,GAAG,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,uGAAuG;IACvG,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,GAAG,iBAAiB,CAAC,cAAc,EAAE,aAAa,CAAE,CAAC;IAChF,MAAM,EAAE,EAAE,EAAE,cAAc,EAAE,GAAG,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAAE,CAAC;IAElF,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,GAAG,YAAY;YACf,mBAAmB;YACnB,sIAAsI;YACtI,QAAQ,EAAE,KAAK;YACf,eAAe,EAAE,UAAU;YAC3B,cAAc,EAAE,SAAS,IAAI,SAAS;SACvC,YAED,KAAC,QAAQ,IACP,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC;YACxE,sDAAsD;YACtD,2EAA2E;YAC3E,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,UAAU,IAAI,aAAc,CAAC,IAAI,EAAE,EACnD,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,MAAM,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,sBAChB,CAAC,aAAa,EAAE,cAAc,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,GACzG,GACuB,CAC5B,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { useContext } from 'react';\nimport {\n  ComboBoxStateContext as RACComboBoxStateContext,\n  Input as RACInput,\n  InputContext as RACInputContext,\n  TextContext as RACTextContext,\n  useSlottedContext,\n} from 'react-aria-components';\nimport { textStyle } from '../typography/utils.js';\n\n/** @internal */\nexport function TagFieldInput({\n  isReadOnly,\n  isRequired,\n  isInvalid,\n  placeholder,\n  onFocusChange,\n  'aria-describedby': ariaDescribedby,\n}: {\n  isReadOnly: boolean | undefined;\n  isRequired: boolean | undefined;\n  isInvalid: boolean | undefined;\n  placeholder: string | undefined;\n  onFocusChange: (isFocused: boolean) => void;\n  'aria-describedby': string | undefined;\n}) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n  const inputContext = useContext(RACInputContext);\n\n  // We use custom IDs for description and error message, so we need to manually attach them to the input\n  const { id: descriptionId } = useSlottedContext(RACTextContext, 'description')!;\n  const { id: errorMessageId } = useSlottedContext(RACTextContext, 'errorMessage')!;\n\n  return (\n    <RACInputContext.Provider\n      value={{\n        ...inputContext,\n        // name: undefined,\n        // Change `required` to `aria-required` so that form submission isn't blocked, but required state is still announced by screen readers\n        required: false,\n        'aria-required': isRequired,\n        'aria-invalid': isInvalid || undefined,\n      }}\n    >\n      <RACInput\n        className={clsx('cim-combo-box-input', textStyle({ variant: 'medium' }))}\n        // Ensure the popover opens when the input is clicked.\n        // By default, React Aria only opens the popover when the input is focused.\n        onClick={() => !isReadOnly && comboBoxState!.open()}\n        placeholder={placeholder}\n        onFocus={() => onFocusChange(true)}\n        onBlur={() => onFocusChange(false)}\n        aria-describedby={[descriptionId, errorMessageId, ariaDescribedby].filter(Boolean).join(' ') || undefined}\n      />\n    </RACInputContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"tag-field-input.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-input.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EACL,oBAAoB,IAAI,uBAAuB,EAC/C,KAAK,IAAI,QAAQ,EACjB,YAAY,IAAI,eAAe,EAC/B,WAAW,IAAI,cAAc,EAC7B,iBAAiB,GAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,gBAAgB;AAChB,MAAM,UAAU,aAAa,CAAC,EAC5B,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,aAAa,EACb,kBAAkB,EAAE,eAAe,GAQpC;IACC,MAAM,aAAa,GAAG,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,uGAAuG;IACvG,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,GAAG,iBAAiB,CAAC,cAAc,EAAE,aAAa,CAAE,CAAC;IAChF,MAAM,EAAE,EAAE,EAAE,cAAc,EAAE,GAAG,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAAE,CAAC;IAElF,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,GAAG,YAAY;YACf,sIAAsI;YACtI,QAAQ,EAAE,KAAK;YACf,eAAe,EAAE,UAAU;YAC3B,cAAc,EAAE,SAAS,IAAI,SAAS;SACvC,YAED,KAAC,QAAQ,IACP,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;YACtE,sDAAsD;YACtD,2EAA2E;YAC3E,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,UAAU,IAAI,aAAc,CAAC,IAAI,EAAE,EACnD,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,MAAM,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,sBAChB,CAAC,aAAa,EAAE,cAAc,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,GACzG,GACuB,CAC5B,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { useContext } from 'react';\nimport {\n  ComboBoxStateContext as RACComboBoxStateContext,\n  Input as RACInput,\n  InputContext as RACInputContext,\n  TextContext as RACTextContext,\n  useSlottedContext,\n} from 'react-aria-components';\nimport { textStyle } from '../typography/utils.js';\n\n/** @internal */\nexport function TagFieldInput({\n  isReadOnly,\n  isRequired,\n  isInvalid,\n  placeholder,\n  onFocusChange,\n  'aria-describedby': ariaDescribedby,\n}: {\n  isReadOnly: boolean | undefined;\n  isRequired: boolean | undefined;\n  isInvalid: boolean | undefined;\n  placeholder: string | undefined;\n  onFocusChange: (isFocused: boolean) => void;\n  'aria-describedby': string | undefined;\n}) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n  const inputContext = useContext(RACInputContext);\n\n  // We use custom IDs for description and error message, so we need to manually attach them to the input\n  const { id: descriptionId } = useSlottedContext(RACTextContext, 'description')!;\n  const { id: errorMessageId } = useSlottedContext(RACTextContext, 'errorMessage')!;\n\n  return (\n    <RACInputContext.Provider\n      value={{\n        ...inputContext,\n        // Change `required` to `aria-required` so that form submission isn't blocked, but required state is still announced by screen readers\n        required: false,\n        'aria-required': isRequired,\n        'aria-invalid': isInvalid || undefined,\n      }}\n    >\n      <RACInput\n        className={clsx('cim-combo-box-input', textStyle({ variant: 'body' }))}\n        // Ensure the popover opens when the input is clicked.\n        // By default, React Aria only opens the popover when the input is focused.\n        onClick={() => !isReadOnly && comboBoxState!.open()}\n        placeholder={placeholder}\n        onFocus={() => onFocusChange(true)}\n        onBlur={() => onFocusChange(false)}\n        aria-describedby={[descriptionId, errorMessageId, ariaDescribedby].filter(Boolean).join(' ') || undefined}\n      />\n    </RACInputContext.Provider>\n  );\n}\n"]}

package/dist/esm/components/tag-field/tag-field-list-box.js

@@ -1,8 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useMemo } from 'react';
-import { ListBox as RACListBox, ListStateContext as RACListStateContext } from 'react-aria-components';
+import { ListBox as RACListBox, ListLayout as RACListLayout, ListStateContext as RACListStateContext, Virtualizer as RACVirtualizer, } from 'react-aria-components';
+const VIRTUAL_LAYOUT_OPTIONS = {
+    rowHeight: 36,
+    headingHeight: 32,
+    padding: 0,
+    gap: 0,
+};
 /** @internal */
-export function TagFieldListBox({ children, selectedKeys, setSelectedKeys, items, onScroll, }) {
+export function TagFieldListBox({ children, selectedKeys, setSelectedKeys, items, onScroll, isVirtualized, }) {
     const listState = useContext(RACListStateContext);
     // Override RACListStateContext to allow multiple selection within the list
     const updatedListState = useMemo(() => {
@@ -23,6 +29,7 @@ export function TagFieldListBox({ children, selectedKeys, setSelectedKeys, items
             ...listState,
         };
     }, [listState, selectedKeys, setSelectedKeys]);
-    return (_jsx(RACListStateContext.Provider, { value: updatedListState, children: _jsx(RACListBox, { className: "cim-combo-box-listbox", onScroll: onScroll, items: items, children: children }) }));
+    const listBox = (_jsx(RACListBox, { className: "cim-combo-box-listbox", onScroll: onScroll, items: items, children: children }));
+    return (_jsx(RACListStateContext.Provider, { value: updatedListState, children: isVirtualized ? (_jsx(RACVirtualizer, { layout: RACListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) }));
 }
 //# sourceMappingURL=tag-field-list-box.js.map

package/dist/esm/components/tag-field/tag-field-list-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-field-list-box.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-list-box.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,gBAAgB,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAIvG,gBAAgB;AAChB,MAAM,UAAU,eAAe,CAA2B,EACxD,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,KAAK,EACL,QAAQ,GAIT;IACC,MAAM,SAAS,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAElD,2EAA2E;IAC3E,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,CAAC;YAC9C,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,uDAAuD;QACvD,wEAAwE;QACxE,sDAAsD;QACtD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,aAAa,GAAG,UAAU,CAAC;QAC5D,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;QAC7D,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,eAAe,GAAG,eAAe,CAAC;QACnE,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,sBAAsB,GAAG,KAAK,CAAC;QAEhE,OAAO;YACL,GAAG,SAAS;SACb,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;IAE/C,OAAO,CACL,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,gBAAgB,YACnD,KAAC,UAAU,IAAC,SAAS,EAAC,uBAAuB,EAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAC3E,QAAQ,GACE,GACgB,CAChC,CAAC;AACJ,CAAC","sourcesContent":["import { useContext, useMemo } from 'react';\nimport { ListBox as RACListBox, ListStateContext as RACListStateContext } from 'react-aria-components';\nimport type { CollectionItem, Key } from '../types.js';\nimport type { UNSTABLE_TagFieldProps } from './tag-field.js';\n\n/** @internal */\nexport function TagFieldListBox<T extends CollectionItem>({\n  children,\n  selectedKeys,\n  setSelectedKeys,\n  items,\n  onScroll,\n}: Pick<UNSTABLE_TagFieldProps<T>, 'children' | 'items' | 'onScroll'> & {\n  selectedKeys: Set<Key>;\n  setSelectedKeys: (keys: Set<Key>) => void;\n}) {\n  const listState = useContext(RACListStateContext);\n\n  // Override RACListStateContext to allow multiple selection within the list\n  const updatedListState = useMemo(() => {\n    if (!listState || !listState.selectionManager) {\n      return listState;\n    }\n\n    // @ts-expect-error `selectionManager.state` is private\n    // This is a temporary mutation before a context update, so this is fine\n    // eslint-disable-next-line react-hooks/react-compiler\n    listState.selectionManager.state.selectionMode = 'multiple';\n    // @ts-expect-error `selectionManager.state` is private\n    listState.selectionManager.state.selectedKeys = selectedKeys;\n    // @ts-expect-error `selectionManager.state` is private\n    listState.selectionManager.state.setSelectedKeys = setSelectedKeys;\n    // @ts-expect-error `selectionManager.state` is private\n    listState.selectionManager.state.disallowEmptySelection = false;\n\n    return {\n      ...listState,\n    };\n  }, [listState, selectedKeys, setSelectedKeys]);\n\n  return (\n    <RACListStateContext.Provider value={updatedListState}>\n      <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n        {children}\n      </RACListBox>\n    </RACListStateContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"tag-field-list-box.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-list-box.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,UAAU,IAAI,aAAa,EAE3B,gBAAgB,IAAI,mBAAmB,EACvC,WAAW,IAAI,cAAc,GAC9B,MAAM,uBAAuB,CAAC;AAI/B,MAAM,sBAAsB,GAAyB;IACnD,SAAS,EAAE,EAAE;IACb,aAAa,EAAE,EAAE;IACjB,OAAO,EAAE,CAAC;IACV,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,gBAAgB;AAChB,MAAM,UAAU,eAAe,CAA2B,EACxD,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,KAAK,EACL,QAAQ,EACR,aAAa,GAId;IACC,MAAM,SAAS,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAElD,2EAA2E;IAC3E,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,CAAC;YAC9C,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,uDAAuD;QACvD,wEAAwE;QACxE,sDAAsD;QACtD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,aAAa,GAAG,UAAU,CAAC;QAC5D,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;QAC7D,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,eAAe,GAAG,eAAe,CAAC;QACnE,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,sBAAsB,GAAG,KAAK,CAAC;QAEhE,OAAO;YACL,GAAG,SAAS;SACb,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;IAE/C,MAAM,OAAO,GAAG,CACd,KAAC,UAAU,IAAC,SAAS,EAAC,uBAAuB,EAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAC3E,QAAQ,GACE,CACd,CAAC;IAEF,OAAO,CACL,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,gBAAgB,YAClD,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,cAAc,IAAC,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,sBAAsB,YACzE,OAAO,GACO,CAClB,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GAC4B,CAChC,CAAC;AACJ,CAAC","sourcesContent":["import { useContext, useMemo } from 'react';\nimport {\n  ListBox as RACListBox,\n  ListLayout as RACListLayout,\n  type ListLayoutOptions as RACListLayoutOptions,\n  ListStateContext as RACListStateContext,\n  Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport type { CollectionItem, Key } from '../types.js';\nimport type { TagFieldProps } from './tag-field.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n  rowHeight: 36,\n  headingHeight: 32,\n  padding: 0,\n  gap: 0,\n};\n\n/** @internal */\nexport function TagFieldListBox<T extends CollectionItem>({\n  children,\n  selectedKeys,\n  setSelectedKeys,\n  items,\n  onScroll,\n  isVirtualized,\n}: Pick<TagFieldProps<T>, 'children' | 'items' | 'onScroll' | 'isVirtualized'> & {\n  selectedKeys: Set<Key>;\n  setSelectedKeys: (keys: Set<Key>) => void;\n}) {\n  const listState = useContext(RACListStateContext);\n\n  // Override RACListStateContext to allow multiple selection within the list\n  const updatedListState = useMemo(() => {\n    if (!listState || !listState.selectionManager) {\n      return listState;\n    }\n\n    // @ts-expect-error `selectionManager.state` is private\n    // This is a temporary mutation before a context update, so this is fine\n    // eslint-disable-next-line react-hooks/react-compiler\n    listState.selectionManager.state.selectionMode = 'multiple';\n    // @ts-expect-error `selectionManager.state` is private\n    listState.selectionManager.state.selectedKeys = selectedKeys;\n    // @ts-expect-error `selectionManager.state` is private\n    listState.selectionManager.state.setSelectedKeys = setSelectedKeys;\n    // @ts-expect-error `selectionManager.state` is private\n    listState.selectionManager.state.disallowEmptySelection = false;\n\n    return {\n      ...listState,\n    };\n  }, [listState, selectedKeys, setSelectedKeys]);\n\n  const listBox = (\n    <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n      {children}\n    </RACListBox>\n  );\n\n  return (\n    <RACListStateContext.Provider value={updatedListState}>\n      {isVirtualized ? (\n        <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n          {listBox}\n        </RACVirtualizer>\n      ) : (\n        listBox\n      )}\n    </RACListStateContext.Provider>\n  );\n}\n"]}