@cimpress-ui/react 0.3.0 → 1.0.0

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

@@ -1,7 +1,9 @@
 import type { ReactNode } from 'react';
 import { type MenuItemProps as RACMenuItemProps, type MenuProps as RACMenuProps, type MenuTriggerProps as RACMenuTriggerProps } from 'react-aria-components';
 import type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';
-export interface MenuRootProps extends Pick<RACMenuTriggerProps, 'children' | 'onOpenChange' | 'isOpen' | 'defaultOpen'> {
+export interface MenuRootProps extends Pick<RACMenuTriggerProps, 'onOpenChange' | 'isOpen' | 'defaultOpen'> {
+    /** The menu trigger with its associated menu. Provide the trigger as the first child, and the menu as the second child. */
+    children: ReactNode;
 }
 /**
  * Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.
@@ -47,9 +49,4 @@ export declare function MenuItem({ children, description, icon, ...props }: Menu
 export declare namespace MenuItem {
     var displayName: string;
 }
-/** Renders a horizontal divider between list items within `Menu`. */
-export declare function MenuDivider(): import("react/jsx-runtime").JSX.Element;
-export declare namespace MenuDivider {
-    var displayName: string;
-}
 //# sourceMappingURL=menu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAKL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,SAAS,IAAI,YAAY,EAG9B,KAAK,gBAAgB,IAAI,mBAAmB,EAG7C,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAG7G,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,cAAc,GAAG,QAAQ,GAAG,aAAa,CAAC;CAAG;AAE9F;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAE5C;yBAFe,QAAQ;;;AAMxB,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAClE,SAAQ,eAAe,CAAC,CAAC,CAAC,EACxB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACnC,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B;AAED,qFAAqF;AACrF,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,2CAcjE;yBAde,IAAI;;;AAkBpB,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACrG,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,sDAAsD;AACtD,wBAAgB,WAAW,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAa9G;yBAbe,WAAW;;;AAiB3B,MAAM,WAAW,aACf,SAAQ,eAAe,EACrB,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;IACnF,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,gDAAgD;AAChD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CA4BhF;yBA5Be,QAAQ;;;AAgCxB,qEAAqE;AACrE,wBAAgB,WAAW,4CAE1B;yBAFe,WAAW"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAKL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,SAAS,IAAI,YAAY,EAG9B,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAG7G,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,EAAE,cAAc,GAAG,QAAQ,GAAG,aAAa,CAAC;IACzG,2HAA2H;IAC3H,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAE5C;yBAFe,QAAQ;;;AAMxB,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAClE,SAAQ,eAAe,CAAC,CAAC,CAAC,EACxB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACnC,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B;AAED,qFAAqF;AACrF,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,2CAcjE;yBAde,IAAI;;;AAkBpB,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACrG,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,sDAAsD;AACtD,wBAAgB,WAAW,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAa9G;yBAbe,WAAW;;;AAiB3B,MAAM,WAAW,aACf,SAAQ,eAAe,EACrB,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;IACnF,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,gDAAgD;AAChD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CA4BhF;yBA5Be,QAAQ"}

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

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { Collection as RACCollection, Header as RACHeader, Menu as RACMenu, MenuItem as RACMenuItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Separator as RACSeparator, Text as RACText, } from 'react-aria-components';
+import { Collection as RACCollection, Header as RACHeader, Menu as RACMenu, MenuItem as RACMenuItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Text as RACText, } from 'react-aria-components';
+import { isProduction } from '../../utils/is-production.js';
 import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
 import { textStyle } from '../typography/utils.js';
 /**
@@ -15,15 +16,15 @@ export function MenuRoot(props) {
 MenuRoot.displayName = 'MenuRoot';
 /** Displays a collapsible list of options and actions that users can choose from. */
 export function Menu(props) {
-    if (props.items != null && typeof props.children !== 'function') {
+    if (!isProduction() && props.items != null && typeof props.children !== 'function') {
         console.warn('`Menu` requires `children` to be a function when using `items` prop');
     }
-    return (_jsx(CollapsibleList, { placement: "bottom start", offset: 5, maxHeight: 315, children: _jsx(RACMenu, { className: "cim-menu", ...props }) }));
+    return (_jsx(CollapsibleList, { placement: "bottom start", offset: 5, maxHeight: 315, children: _jsx(RACMenu, { ...props, className: "cim-menu" }) }));
 }
 Menu.displayName = 'Menu';
 /** Groups list items within `Menu` into a section. */
 export function MenuSection({ title, children, items, ...props }) {
-    if (items != null && typeof children !== 'function') {
+    if (!isProduction() && items != null && typeof children !== 'function') {
         console.warn('`MenuSection` requires `children` to be a function when using `items` prop');
     }
     return (_jsxs(RACMenuSection, { ...props, className: "cim-menu-section", children: [_jsx(RACHeader, { className: clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' })), children: title }), _jsx(RACCollection, { items: items, children: children })] }));
@@ -35,9 +36,4 @@ export function MenuItem({ children, description, icon, ...props }) {
     return (_jsx(RACMenuItem, { ...props, className: "cim-menu-item", textValue: textValue, children: ({ isDisabled }) => (_jsxs(_Fragment, { children: [icon, _jsxs("div", { className: "cim-menu-item-text", children: [_jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children }), description && (_jsx(RACText, { slot: "description", className: textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' }), children: description }))] })] })) }));
 }
 MenuItem.displayName = 'MenuItem';
-/** Renders a horizontal divider between list items within `Menu`. */
-export function MenuDivider() {
-    return _jsx(RACSeparator, { className: "cim-menu-divider" });
-}
-MenuDivider.displayName = 'MenuDivider';
 //# sourceMappingURL=menu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport {\n  Collection as RACCollection,\n  Header as RACHeader,\n  Menu as RACMenu,\n  MenuItem as RACMenuItem,\n  type MenuItemProps as RACMenuItemProps,\n  type MenuProps as RACMenuProps,\n  MenuSection as RACMenuSection,\n  MenuTrigger as RACMenuTrigger,\n  type MenuTriggerProps as RACMenuTriggerProps,\n  Separator as RACSeparator,\n  Text as RACText,\n} from 'react-aria-components';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface MenuRootProps\n  extends Pick<RACMenuTriggerProps, 'children' | 'onOpenChange' | 'isOpen' | 'defaultOpen'> {}\n\n/**\n * Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nexport function MenuRoot(props: MenuRootProps) {\n  return <RACMenuTrigger {...props} />;\n}\n\nMenuRoot.displayName = 'MenuRoot';\n\nexport interface MenuProps<T extends CollectionItem = CollectionItem>\n  extends CollectionProps<T>,\n    Pick<RACMenuProps<T>, 'onScroll'> {\n  /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n  onAction?: (key: Key) => void;\n}\n\n/** Displays a collapsible list of options and actions that users can choose from. */\nexport function Menu<T extends CollectionItem>(props: MenuProps<T>) {\n  if (props.items != null && typeof props.children !== 'function') {\n    console.warn('`Menu` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <CollapsibleList\n      placement=\"bottom start\"\n      offset={5} // 1px border + 4px actual offset\n      maxHeight={315}\n    >\n      <RACMenu className=\"cim-menu\" {...props} />\n    </CollapsibleList>\n  );\n}\n\nMenu.displayName = 'Menu';\n\nexport interface MenuSectionProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `Menu` into a section. */\nexport function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>) {\n  if (items != null && typeof children !== 'function') {\n    console.warn('`MenuSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACMenuSection {...props} className=\"cim-menu-section\">\n      <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACMenuSection>\n  );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps\n  extends NavigationProps,\n    Pick<RACMenuItemProps, 'isDisabled' | 'onAction' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n  /** Additional description for the menu item. */\n  description?: string;\n  /** An icon representing the menu item. */\n  icon?: ReactNode;\n}\n\n/** Renders a single list item within `Menu`. */\nexport function MenuItem({ children, description, icon, ...props }: MenuItemProps) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACMenuItem {...props} className=\"cim-menu-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          {icon}\n\n          <div className=\"cim-menu-item-text\">\n            <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n              {children}\n            </RACText>\n\n            {description && (\n              <RACText\n                slot=\"description\"\n                className={textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' })}\n              >\n                {description}\n              </RACText>\n            )}\n          </div>\n        </>\n      )}\n    </RACMenuItem>\n  );\n}\n\nMenuItem.displayName = 'MenuItem';\n\n/** Renders a horizontal divider between list items within `Menu`. */\nexport function MenuDivider() {\n  return <RACSeparator className=\"cim-menu-divider\" />;\n}\n\nMenuDivider.displayName = 'MenuDivider';\n"]}
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport {\n  Collection as RACCollection,\n  Header as RACHeader,\n  Menu as RACMenu,\n  MenuItem as RACMenuItem,\n  type MenuItemProps as RACMenuItemProps,\n  type MenuProps as RACMenuProps,\n  MenuSection as RACMenuSection,\n  MenuTrigger as RACMenuTrigger,\n  type MenuTriggerProps as RACMenuTriggerProps,\n  Text as RACText,\n} from 'react-aria-components';\nimport { isProduction } from '../../utils/is-production.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface MenuRootProps extends Pick<RACMenuTriggerProps, 'onOpenChange' | 'isOpen' | 'defaultOpen'> {\n  /** The menu trigger with its associated menu. Provide the trigger as the first child, and the menu as the second child. */\n  children: ReactNode;\n}\n\n/**\n * Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nexport function MenuRoot(props: MenuRootProps) {\n  return <RACMenuTrigger {...props} />;\n}\n\nMenuRoot.displayName = 'MenuRoot';\n\nexport interface MenuProps<T extends CollectionItem = CollectionItem>\n  extends CollectionProps<T>,\n    Pick<RACMenuProps<T>, 'onScroll'> {\n  /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n  onAction?: (key: Key) => void;\n}\n\n/** Displays a collapsible list of options and actions that users can choose from. */\nexport function Menu<T extends CollectionItem>(props: MenuProps<T>) {\n  if (!isProduction() && props.items != null && typeof props.children !== 'function') {\n    console.warn('`Menu` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <CollapsibleList\n      placement=\"bottom start\"\n      offset={5} // 1px border + 4px actual offset\n      maxHeight={315}\n    >\n      <RACMenu {...props} className=\"cim-menu\" />\n    </CollapsibleList>\n  );\n}\n\nMenu.displayName = 'Menu';\n\nexport interface MenuSectionProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `Menu` into a section. */\nexport function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>) {\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`MenuSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACMenuSection {...props} className=\"cim-menu-section\">\n      <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACMenuSection>\n  );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps\n  extends NavigationProps,\n    Pick<RACMenuItemProps, 'isDisabled' | 'onAction' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n  /** Additional description for the menu item. */\n  description?: string;\n  /** An icon representing the menu item. */\n  icon?: ReactNode;\n}\n\n/** Renders a single list item within `Menu`. */\nexport function MenuItem({ children, description, icon, ...props }: MenuItemProps) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACMenuItem {...props} className=\"cim-menu-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          {icon}\n\n          <div className=\"cim-menu-item-text\">\n            <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n              {children}\n            </RACText>\n\n            {description && (\n              <RACText\n                slot=\"description\"\n                className={textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' })}\n              >\n                {description}\n              </RACText>\n            )}\n          </div>\n        </>\n      )}\n    </RACMenuItem>\n  );\n}\n\nMenuItem.displayName = 'MenuItem';\n"]}

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

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+import type { AriaLabelingProps, CommonProps } from '../types.js';
+export interface ModalDialogRenderProps {
+    /** Closes the modal dialog when called. */
+    close: () => void;
+}
+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;
+    /**
+     * The size of the modal dialog.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Whether to close the modal dialog when the user interacts outside of it or presses the Escape key.
+     * @default true
+     */
+    isDismissible?: boolean;
+    /**
+     * Whether the modal dialog is open (controlled).
+     * If using `DialogRoot`, this prop has no effect - provide `isOpen` to `DialogRoot` instead.
+     */
+    isOpen?: boolean;
+    /**
+     * Whether the modal dialog is open by default (uncontrolled).
+     * If using `DialogRoot`, this prop has no effect - provide `defaultOpen` to `DialogRoot` instead.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Handler that is called when the modal dialog's open state changes.
+     * If using `DialogRoot`, this prop has no effect - provide `onOpenChange` to `DialogRoot` instead.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * Displays an overlay element which blocks interaction with outside elements.
+ *
+ * See [modal dialog usage guidelines](https://ui.cimpress.io/components/modal-dialog/).
+ */
+declare const _ModalDialog: (props: ModalDialogProps & import("react").RefAttributes<HTMLElement>) => import("react").JSX.Element | null;
+export { _ModalDialog as ModalDialog };
+export interface ModalDialogBodyProps {
+    /** The content to render within the modal dialog. */
+    children: ReactNode;
+}
+/** Renders content within `ModalDialog`. */
+export declare function ModalDialogBody(props: ModalDialogBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ModalDialogBody {
+    var displayName: string;
+}
+export interface ModalDialogActionsProps {
+    /** Actions that should be available in the modal dialog. */
+    children: ReactNode;
+}
+/** Renders actions within `ModalDialog`. */
+export declare function ModalDialogActions({ children, ...props }: ModalDialogActionsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ModalDialogActions {
+    var displayName: string;
+}
+//# sourceMappingURL=modal-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import clsx from 'clsx';
+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 { 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';
+import { textStyle } from '../typography/utils.js';
+function ModalDialog({ children, title, size = 'medium', UNSAFE_className, UNSAFE_style, isDismissible = true, isOpen, defaultOpen, onOpenChange, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    useProductionWarning(() => {
+        if (!title && !ariaLabel && !ariaLabelledBy) {
+            console.warn('ModalDialog requires one of title / aria-label / aria-labelledby for accessibility');
+        }
+    }, [title, ariaLabel, ariaLabelledBy]);
+    const messages = useLocalizedMessages('common');
+    return (_jsx(RACModalOverlay, { className: "cim-modal-overlay", isDismissable: isDismissible, isKeyboardDismissDisabled: !isDismissible, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, "data-cim-style-root": true, children: _jsx(RACModal, { className: clsx('cim-modal', UNSAFE_className), style: UNSAFE_style, "data-size": size, children: _jsx(RACDialog, { ...props, ref: ref, className: "cim-modal-dialog", children: (renderProps) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cim-modal-header", children: [title && (_jsx(RACHeading, { slot: "title", className: clsx('cim-modal-title', textStyle({ variant: 'title-5', tone: 'base' })), children: title })), _jsx(XButton, { "aria-label": messages.format('dismiss'), slot: "close" })] }), typeof children === 'function' ? children(renderProps) : children] })) }) }) }));
+}
+/**
+ * Displays an overlay element which blocks interaction with outside elements.
+ *
+ * See [modal dialog usage guidelines](https://ui.cimpress.io/components/modal-dialog/).
+ */
+const _ModalDialog = forwardRef(ModalDialog, 'ModalDialog');
+export { _ModalDialog as ModalDialog };
+/** Renders content within `ModalDialog`. */
+export function ModalDialogBody(props) {
+    return _jsx(FocusableContainer, { ...props, className: "cim-modal-body", scrollDirection: "vertical" });
+}
+ModalDialogBody.displayName = 'ModalDialogBody';
+/** Renders actions within `ModalDialog`. */
+export function ModalDialogActions({ children, ...props }) {
+    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

@@ -0,0 +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 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.d.ts

@@ -1,6 +1,6 @@
 import { type NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';
 import type { CommonProps, FieldWithPlaceholderProps } from '../types.js';
-export interface NumberFieldProps extends CommonProps, FieldWithPlaceholderProps<number>, Pick<RACNumberFieldProps, 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'name' | 'autoFocus' | 'minValue' | 'maxValue' | 'step' | 'formatOptions' | 'onFocus' | 'onBlur'> {
+export interface NumberFieldProps extends CommonProps, FieldWithPlaceholderProps<number>, Pick<RACNumberFieldProps, 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'autoFocus' | 'minValue' | 'maxValue' | 'step' | 'formatOptions' | 'onFocus' | 'onBlur'> {
     /** The current value (controlled). A `null` value means an empty field. */
     value?: number | null;
     /** The default value (uncontrolled). A `null` value means an empty field. */

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

@@ -1 +1 @@
-{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,WAAW,gBACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,mBAAmB,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,WAAW,GACX,UAAU,GACV,UAAU,GACV,MAAM,GACN,eAAe,GACf,SAAS,GACT,QAAQ,CACX;IACH,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AA4DD;;;;GAIG;AACH,QAAA,MAAM,YAAY,kKAAyD,CAAC;AAE5E,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC"}
+{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,WAAW,gBACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,mBAAmB,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,WAAW,GACX,UAAU,GACV,UAAU,GACV,MAAM,GACN,eAAe,GACf,SAAS,GACT,QAAQ,CACX;IACH,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAwED;;;;GAIG;AACH,QAAA,MAAM,YAAY,kKAAyD,CAAC;AAE5E,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC"}

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

@@ -1,26 +1,28 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { useEffect } from 'react';
 import { Input as RACInput, NumberField as RACNumberField, Group as RACGroup, } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
+import { useLocalizedMessages } from '../../i18n/index.js';
 import { IconAdd, IconSubtract } from '../../icons/index.js';
+import { useProductionWarning } from '../../utils/use-production-warning.js';
 import { withStyleProps } from '../../with-style-props.js';
 import { IconButton } from '../button/icon-button.js';
 import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
 import { textStyle } from '../typography/utils.js';
 function NumberField({ label, description, error: errorMessage, placeholder, UNSAFE_className, UNSAFE_style, value, defaultValue, onChange, ...props }, ref) {
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
-    useEffect(() => {
+    useProductionWarning(() => {
         if (!label && !ariaLabel && !ariaLabelledBy) {
             console.warn('NumberField requires one of label / aria-label / aria-labelledby for accessibility');
         }
     }, [label, ariaLabel, ariaLabelledBy]);
+    const messages = useLocalizedMessages('numberField');
     return (_jsxs(RACNumberField, { ...props, ref: ref, className: clsx('cim-number-field', UNSAFE_className), style: UNSAFE_style, 
         // 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": "Decrement", variant: "tertiary", size: "small" }), _jsx("div", { className: "cim-number-field-spinner-separator" }), _jsx(IconButton, { slot: "increment", icon: _jsx(IconAdd, {}), "aria-label": "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 { useEffect, 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 { IconAdd, IconSubtract } from '../../icons/index.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      | 'name'\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  useEffect(() => {\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  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          {/* TODO: i18n */}\n          <IconButton slot=\"decrement\" icon={<IconSubtract />} aria-label=\"Decrement\" variant=\"tertiary\" size=\"small\" />\n          <div className=\"cim-number-field-spinner-separator\" />\n          {/* TODO: i18n */}\n          <IconButton slot=\"increment\" icon={<IconAdd />} aria-label=\"Increment\" variant=\"tertiary\" size=\"small\" />\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/pagination/base-pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/pagination/base-pagination.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAkBlE,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,iBAAiB;IACzE,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,mJAAmJ;IACnJ,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B"}
+{"version":3,"file":"base-pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/pagination/base-pagination.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAkBlE,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,iBAAiB;IACzE,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,mJAAmJ;IACnJ,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B"}

package/dist/esm/components/pagination/base-pagination.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { useMemo } from 'react';
+import { useLocalizedMessages } from '../../i18n/index.js';
 import { IconChevronLeft, IconChevronRight } from '../../icons/index.js';
 /** @internal */
 export function BasePagination({ currentPage, pageCount, paginatedElementId, UNSAFE_className, UNSAFE_style, navRef, listRef, renderPreviousButton, renderNextButton, renderPageButton, ...props }) {
+    const messages = useLocalizedMessages('pagination');
     const pages = useMemo(() => {
         const visiblePages = getVisiblePages(currentPage, pageCount);
         const firstPageIndex = 0;
@@ -12,8 +14,7 @@ export function BasePagination({ currentPage, pageCount, paginatedElementId, UNS
             const isCurrentPage = typeof page === 'number' && page === currentPage;
             const pageNumber = typeof page === 'number' ? page : page.page;
             const pageButtonProps = {
-                // TODO: i18n
-                'aria-label': `Page ${pageNumber}`,
+                'aria-label': messages.format('goToPage', { pageNumber }),
                 children: typeof page === 'number' ? page : '…',
                 'data-first': index === firstPageIndex || undefined,
                 'data-last': index === lastPageIndex || undefined,
@@ -21,18 +22,16 @@ export function BasePagination({ currentPage, pageCount, paginatedElementId, UNS
             };
             return { pageNumber, isCurrentPage, pageButtonProps };
         });
-    }, [currentPage, pageCount]);
+    }, [currentPage, pageCount, messages]);
     const previousButtonProps = {
         icon: _jsx(IconChevronLeft, {}),
         isDisabled: currentPage === 1,
-        // TODO: internationalization
-        'aria-label': 'Previous',
+        'aria-label': messages.format('previousPage'),
     };
     const nextButtonProps = {
         icon: _jsx(IconChevronRight, {}),
         isDisabled: currentPage === pageCount,
-        // TODO: internationalization
-        'aria-label': 'Next',
+        'aria-label': messages.format('nextPage'),
     };
     return (_jsx("nav", { ...props, ref: navRef, className: clsx('cim-pagination', UNSAFE_className), style: UNSAFE_style, "aria-controls": paginatedElementId, children: _jsxs("ul", { ref: listRef, className: "cim-pagination-list", children: [_jsx("li", { children: renderPreviousButton(previousButtonProps) }), pages.map((pageData) => (_jsx("li", { children: renderPageButton(pageData) }, pageData.pageNumber))), _jsx("li", { children: renderNextButton(nextButtonProps) })] }) }));
 }

package/dist/esm/components/pagination/base-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-pagination.js","sourceRoot":"","sources":["../../../../src/components/pagination/base-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx';\nimport { type ForwardedRef, type MutableRefObject, type ReactNode, useMemo } from 'react';\nimport { IconChevronLeft, IconChevronRight } from '../../icons/index.js';\n\nimport type { ButtonProps } from '../button/button.js';\nimport type { IconButtonProps } from '../button/icon-button.js';\nimport type { IconLinkButtonProps } from '../button/icon-link-button.js';\nimport type { LinkButtonProps } from '../button/link-button.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\n\ntype OmitNever<T extends Record<string, unknown>> = {\n  [K in keyof T as T[K] extends never ? never : K]: T[K];\n};\n\ntype SharedProperties<A, B> = OmitNever<Pick<A & B, keyof A & keyof B>>;\n\n/** @internal */\nexport type IconButtonProperties = SharedProperties<IconButtonProps, IconLinkButtonProps> & {\n  [dataProp: `data-${string}`]: string | number | boolean | undefined;\n};\n\n/** @internal */\nexport type TextButtonProperties = SharedProperties<ButtonProps, LinkButtonProps> & {\n  [dataProp: `data-${string}`]: string | number | boolean | undefined;\n};\n\nexport interface BasePaginationProps extends CommonProps, AriaLabelingProps {\n  /** The current page number. */\n  currentPage: number;\n  /** The total number of pages. */\n  pageCount: number;\n  /** The `id` of the paginated element. You must provide this prop when pagination controls a subsection of the page (for example, a data table). */\n  paginatedElementId?: string;\n}\n\ninterface PaginationRenderProps {\n  navRef?: ForwardedRef<HTMLElement>;\n  // `RefObject` doesn't work for this case, it errors in either React 18 or 19 depending on whether `| null` is included in the generic parameter\n  // TODO: investigate this more\n  listRef?: MutableRefObject<HTMLUListElement | null>;\n  renderPreviousButton: (previousButtonProps: IconButtonProperties) => ReactNode;\n  renderPageButton: (pageData: PageData) => ReactNode;\n  renderNextButton: (nextButtonProps: IconButtonProperties) => ReactNode;\n}\n\ninterface PageData {\n  pageNumber: number;\n  isCurrentPage: boolean;\n  pageButtonProps: TextButtonProperties;\n}\n\n/** @internal */\nexport function BasePagination({\n  currentPage,\n  pageCount,\n  paginatedElementId,\n  UNSAFE_className,\n  UNSAFE_style,\n  navRef,\n  listRef,\n  renderPreviousButton,\n  renderNextButton,\n  renderPageButton,\n  ...props\n}: BasePaginationProps & PaginationRenderProps) {\n  const pages: PageData[] = useMemo(() => {\n    const visiblePages = getVisiblePages(currentPage, pageCount);\n    const firstPageIndex = 0;\n    const lastPageIndex = visiblePages.length - 1;\n\n    return visiblePages.map<PageData>((page, index) => {\n      const isCurrentPage = typeof page === 'number' && page === currentPage;\n      const pageNumber = typeof page === 'number' ? page : page.page;\n\n      const pageButtonProps: TextButtonProperties = {\n        // TODO: i18n\n        'aria-label': `Page ${pageNumber}`,\n        children: typeof page === 'number' ? page : '…',\n        'data-first': index === firstPageIndex || undefined,\n        'data-last': index === lastPageIndex || undefined,\n        variant: isCurrentPage ? 'primary' : 'secondary',\n      };\n\n      return { pageNumber, isCurrentPage, pageButtonProps };\n    });\n  }, [currentPage, pageCount]);\n\n  const previousButtonProps: IconButtonProperties = {\n    icon: <IconChevronLeft />,\n    isDisabled: currentPage === 1,\n    // TODO: internationalization\n    'aria-label': 'Previous',\n  };\n\n  const nextButtonProps: IconButtonProperties = {\n    icon: <IconChevronRight />,\n    isDisabled: currentPage === pageCount,\n    // TODO: internationalization\n    'aria-label': 'Next',\n  };\n\n  return (\n    <nav\n      {...props}\n      ref={navRef}\n      className={clsx('cim-pagination', UNSAFE_className)}\n      style={UNSAFE_style}\n      aria-controls={paginatedElementId}\n    >\n      <ul ref={listRef} className=\"cim-pagination-list\">\n        <li>{renderPreviousButton(previousButtonProps)}</li>\n\n        {pages.map((pageData) => (\n          <li key={pageData.pageNumber}>{renderPageButton(pageData)}</li>\n        ))}\n\n        <li>{renderNextButton(nextButtonProps)}</li>\n      </ul>\n    </nav>\n  );\n}\n\nfunction getVisiblePages(currentPage: number, totalPages: number): (number | { type: 'ellipsis'; page: number })[] {\n  if (totalPages <= 7) {\n    return Array.from({ length: totalPages }, (_, index) => index + 1);\n  }\n\n  if (currentPage <= 4) {\n    return [1, 2, 3, 4, { type: 'ellipsis', page: 5 }, totalPages - 1, totalPages];\n  }\n\n  if (currentPage >= totalPages - 3) {\n    return [\n      1,\n      2,\n      { type: 'ellipsis', page: totalPages - 4 },\n      totalPages - 3,\n      totalPages - 2,\n      totalPages - 1,\n      totalPages,\n    ];\n  }\n\n  return [\n    1,\n    { type: 'ellipsis', page: currentPage - 2 },\n    currentPage - 1,\n    currentPage,\n    currentPage + 1,\n    { type: 'ellipsis', page: currentPage + 2 },\n    totalPages,\n  ];\n}\n"]}
+{"version":3,"file":"base-pagination.js","sourceRoot":"","sources":["../../../../src/components/pagination/base-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx';\nimport { type ForwardedRef, type MutableRefObject, type ReactNode, useMemo } from 'react';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconChevronLeft, IconChevronRight } from '../../icons/index.js';\n\nimport type { ButtonProps } from '../button/button.js';\nimport type { IconButtonProps } from '../button/icon-button.js';\nimport type { IconLinkButtonProps } from '../button/icon-link-button.js';\nimport type { LinkButtonProps } from '../button/link-button.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\n\ntype OmitNever<T extends Record<string, unknown>> = {\n  [K in keyof T as T[K] extends never ? never : K]: T[K];\n};\n\ntype SharedProperties<A, B> = OmitNever<Pick<A & B, keyof A & keyof B>>;\n\n/** @internal */\nexport type IconButtonProperties = SharedProperties<IconButtonProps, IconLinkButtonProps> & {\n  [dataProp: `data-${string}`]: string | number | boolean | undefined;\n};\n\n/** @internal */\nexport type TextButtonProperties = SharedProperties<ButtonProps, LinkButtonProps> & {\n  [dataProp: `data-${string}`]: string | number | boolean | undefined;\n};\n\nexport interface BasePaginationProps extends CommonProps, AriaLabelingProps {\n  /** The current page number. */\n  currentPage: number;\n  /** The total number of pages. */\n  pageCount: number;\n  /** The `id` of the paginated element. You must provide this prop when pagination controls a subsection of the page (for example, a data table). */\n  paginatedElementId?: string;\n}\n\ninterface PaginationRenderProps {\n  navRef?: ForwardedRef<HTMLElement>;\n  // `RefObject` doesn't work for this case, it errors in either React 18 or 19 depending on whether `| null` is included in the generic parameter\n  // TODO: investigate this more\n  listRef?: MutableRefObject<HTMLUListElement | null>;\n  renderPreviousButton: (previousButtonProps: IconButtonProperties) => ReactNode;\n  renderPageButton: (pageData: PageData) => ReactNode;\n  renderNextButton: (nextButtonProps: IconButtonProperties) => ReactNode;\n}\n\ninterface PageData {\n  pageNumber: number;\n  isCurrentPage: boolean;\n  pageButtonProps: TextButtonProperties;\n}\n\n/** @internal */\nexport function BasePagination({\n  currentPage,\n  pageCount,\n  paginatedElementId,\n  UNSAFE_className,\n  UNSAFE_style,\n  navRef,\n  listRef,\n  renderPreviousButton,\n  renderNextButton,\n  renderPageButton,\n  ...props\n}: BasePaginationProps & PaginationRenderProps) {\n  const messages = useLocalizedMessages('pagination');\n\n  const pages: PageData[] = useMemo(() => {\n    const visiblePages = getVisiblePages(currentPage, pageCount);\n    const firstPageIndex = 0;\n    const lastPageIndex = visiblePages.length - 1;\n\n    return visiblePages.map<PageData>((page, index) => {\n      const isCurrentPage = typeof page === 'number' && page === currentPage;\n      const pageNumber = typeof page === 'number' ? page : page.page;\n\n      const pageButtonProps: TextButtonProperties = {\n        'aria-label': messages.format('goToPage', { pageNumber }),\n        children: typeof page === 'number' ? page : '…',\n        'data-first': index === firstPageIndex || undefined,\n        'data-last': index === lastPageIndex || undefined,\n        variant: isCurrentPage ? 'primary' : 'secondary',\n      };\n\n      return { pageNumber, isCurrentPage, pageButtonProps };\n    });\n  }, [currentPage, pageCount, messages]);\n\n  const previousButtonProps: IconButtonProperties = {\n    icon: <IconChevronLeft />,\n    isDisabled: currentPage === 1,\n    'aria-label': messages.format('previousPage'),\n  };\n\n  const nextButtonProps: IconButtonProperties = {\n    icon: <IconChevronRight />,\n    isDisabled: currentPage === pageCount,\n    'aria-label': messages.format('nextPage'),\n  };\n\n  return (\n    <nav\n      {...props}\n      ref={navRef}\n      className={clsx('cim-pagination', UNSAFE_className)}\n      style={UNSAFE_style}\n      aria-controls={paginatedElementId}\n    >\n      <ul ref={listRef} className=\"cim-pagination-list\">\n        <li>{renderPreviousButton(previousButtonProps)}</li>\n\n        {pages.map((pageData) => (\n          <li key={pageData.pageNumber}>{renderPageButton(pageData)}</li>\n        ))}\n\n        <li>{renderNextButton(nextButtonProps)}</li>\n      </ul>\n    </nav>\n  );\n}\n\nfunction getVisiblePages(currentPage: number, totalPages: number): (number | { type: 'ellipsis'; page: number })[] {\n  if (totalPages <= 7) {\n    return Array.from({ length: totalPages }, (_, index) => index + 1);\n  }\n\n  if (currentPage <= 4) {\n    return [1, 2, 3, 4, { type: 'ellipsis', page: 5 }, totalPages - 1, totalPages];\n  }\n\n  if (currentPage >= totalPages - 3) {\n    return [\n      1,\n      2,\n      { type: 'ellipsis', page: totalPages - 4 },\n      totalPages - 3,\n      totalPages - 2,\n      totalPages - 1,\n      totalPages,\n    ];\n  }\n\n  return [\n    1,\n    { type: 'ellipsis', page: currentPage - 2 },\n    currentPage - 1,\n    currentPage,\n    currentPage + 1,\n    { type: 'ellipsis', page: currentPage + 2 },\n    totalPages,\n  ];\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAGhE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,aAAa,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IAC9G,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qFAAqF;IACrF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,6DAA6D;IAC7D,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACjC;AA4DD;;;;GAIG;AACH,QAAA,MAAM,WAAW,8JAAuD,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAGhE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,aAAa,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IAC9G,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qFAAqF;IACrF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,6DAA6D;IAC7D,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACjC;AA8DD;;;;GAIG;AACH,QAAA,MAAM,WAAW,8JAAuD,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}

package/dist/esm/components/pagination/pagination.js

@@ -3,8 +3,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { announce } from '@react-aria/live-announcer';
 import { useUpdateEffect } from '@react-aria/utils';
 import { useControlledState } from '@react-stately/utils';
-import { useEffect } from 'react';
 import { forwardRef } from '../../forward-ref.js';
+import { useLocalizedMessages } from '../../i18n/index.js';
+import { useProductionWarning } from '../../utils/use-production-warning.js';
 import { withStyleProps } from '../../with-style-props.js';
 import { ActionPagination } from './action-pagination.js';
 import { LinkPagination } from './link-pagination.js';
@@ -13,16 +14,17 @@ function Pagination({ currentPage, defaultPage, href, onPageChange,
 hrefLang, target, download, ping, referrerPolicy, rel, routerOptions, ...props }, ref) {
     const [page, setPage] = useControlledState(currentPage, defaultPage ?? 1, onPageChange);
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
-    useEffect(() => {
+    useProductionWarning(() => {
         if (!ariaLabel && !ariaLabelledBy) {
             console.warn('Pagination requires one of aria-label / aria-labelledby for accessibility');
         }
     }, [ariaLabel, ariaLabelledBy]);
+    const messages = useLocalizedMessages('pagination');
+    const selectedPageAnnouncement = messages.format('selectedPageAnnouncement', { pageNumber: page });
     // Announce when the selected page changes
     useUpdateEffect(() => {
-        // TODO: i18n
-        announce(`Selected page: ${page}`, 'polite', 4000);
-    }, [page]);
+        announce(selectedPageAnnouncement, 'polite', 4000);
+    }, [selectedPageAnnouncement]);
     if (href) {
         return (_jsx(LinkPagination, { ...props, currentPage: page, onPageChange: setPage, navRef: ref, href: href, hrefLang: hrefLang, target: target, download: download, ping: ping, referrerPolicy: referrerPolicy, rel: rel, routerOptions: routerOptions }));
     }

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAatD,SAAS,UAAU,CACjB,EACE,WAAW,EACX,WAAW,EACX,IAAI,EACJ,YAAY;AAEZ,mBAAmB;AACnB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,EACH,aAAa,EAEb,GAAG,KAAK,EACQ,EAClB,GAA8B;IAE9B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,kBAAkB,CAAC,WAAW,EAAE,WAAW,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC;IAExF,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAClC,OAAO,CAAC,IAAI,CAAC,2EAA2E,CAAC,CAAC;QAC5F,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEhC,0CAA0C;IAC1C,eAAe,CAAC,GAAG,EAAE;QACnB,aAAa;QACb,QAAQ,CAAC,kBAAkB,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,KAAC,cAAc,OACT,KAAK,EACT,WAAW,EAAE,IAAI,EACjB,YAAY,EAAE,OAAO,EACrB,MAAM,EAAE,GAAG,EACX,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,KAAC,gBAAgB,OAAK,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,GAAI,CAAC;IAChG,CAAC;AACH,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { announce } from '@react-aria/live-announcer';\nimport { useUpdateEffect } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport { type ForwardedRef, useEffect } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { NavigationProps } from '../types.js';\nimport { ActionPagination } from './action-pagination.js';\nimport type { BasePaginationProps } from './base-pagination.js';\nimport { LinkPagination } from './link-pagination.js';\n\nexport interface PaginationProps extends Omit<BasePaginationProps, 'currentPage'>, Omit<NavigationProps, 'href'> {\n  /** The current page number (controlled). Should be between `1` and `pageCount`. */\n  currentPage?: number;\n  /** The default page number (uncontrolled). Should be between `1` and `pageCount`. */\n  defaultPage?: number;\n  /** A callback function that is called when the page number changes. */\n  onPageChange?: (page: number) => void;\n  /** A function that returns a URL for a given page number. */\n  href?: (page: number) => string;\n}\n\nfunction Pagination(\n  {\n    currentPage,\n    defaultPage,\n    href,\n    onPageChange,\n\n    // Navigation props\n    hrefLang,\n    target,\n    download,\n    ping,\n    referrerPolicy,\n    rel,\n    routerOptions,\n\n    ...props\n  }: PaginationProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const [page, setPage] = useControlledState(currentPage, defaultPage ?? 1, onPageChange);\n\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn('Pagination requires one of aria-label / aria-labelledby for accessibility');\n    }\n  }, [ariaLabel, ariaLabelledBy]);\n\n  // Announce when the selected page changes\n  useUpdateEffect(() => {\n    // TODO: i18n\n    announce(`Selected page: ${page}`, 'polite', 4000);\n  }, [page]);\n\n  if (href) {\n    return (\n      <LinkPagination\n        {...props}\n        currentPage={page}\n        onPageChange={setPage}\n        navRef={ref}\n        href={href}\n        hrefLang={hrefLang}\n        target={target}\n        download={download}\n        ping={ping}\n        referrerPolicy={referrerPolicy}\n        rel={rel}\n        routerOptions={routerOptions}\n      />\n    );\n  } else {\n    return <ActionPagination {...props} navRef={ref} currentPage={page} onPageChange={setPage} />;\n  }\n}\n\n/**\n * Allows navigating across multiple pages of related content.\n *\n * See [pagination usage guidelines](https://ui.cimpress.io/components/pagination/).\n */\nconst _Pagination = withStyleProps(forwardRef(Pagination), 'Pagination');\n\nexport { _Pagination as Pagination };\n"]}
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,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,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAatD,SAAS,UAAU,CACjB,EACE,WAAW,EACX,WAAW,EACX,IAAI,EACJ,YAAY;AAEZ,mBAAmB;AACnB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,EACH,aAAa,EAEb,GAAG,KAAK,EACQ,EAClB,GAA8B;IAE9B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,kBAAkB,CAAC,WAAW,EAAE,WAAW,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC;IAExF,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAClC,OAAO,CAAC,IAAI,CAAC,2EAA2E,CAAC,CAAC;QAC5F,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEhC,MAAM,QAAQ,GAAG,oBAAoB,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,wBAAwB,GAAG,QAAQ,CAAC,MAAM,CAAC,0BAA0B,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IAEnG,0CAA0C;IAC1C,eAAe,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,wBAAwB,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAC,CAAC;IAE/B,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,KAAC,cAAc,OACT,KAAK,EACT,WAAW,EAAE,IAAI,EACjB,YAAY,EAAE,OAAO,EACrB,MAAM,EAAE,GAAG,EACX,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,KAAC,gBAAgB,OAAK,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,GAAI,CAAC;IAChG,CAAC;AACH,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { announce } from '@react-aria/live-announcer';\nimport { useUpdateEffect } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { NavigationProps } from '../types.js';\nimport { ActionPagination } from './action-pagination.js';\nimport type { BasePaginationProps } from './base-pagination.js';\nimport { LinkPagination } from './link-pagination.js';\n\nexport interface PaginationProps extends Omit<BasePaginationProps, 'currentPage'>, Omit<NavigationProps, 'href'> {\n  /** The current page number (controlled). Should be between `1` and `pageCount`. */\n  currentPage?: number;\n  /** The default page number (uncontrolled). Should be between `1` and `pageCount`. */\n  defaultPage?: number;\n  /** A callback function that is called when the page number changes. */\n  onPageChange?: (page: number) => void;\n  /** A function that returns a URL for a given page number. */\n  href?: (page: number) => string;\n}\n\nfunction Pagination(\n  {\n    currentPage,\n    defaultPage,\n    href,\n    onPageChange,\n\n    // Navigation props\n    hrefLang,\n    target,\n    download,\n    ping,\n    referrerPolicy,\n    rel,\n    routerOptions,\n\n    ...props\n  }: PaginationProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const [page, setPage] = useControlledState(currentPage, defaultPage ?? 1, onPageChange);\n\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn('Pagination requires one of aria-label / aria-labelledby for accessibility');\n    }\n  }, [ariaLabel, ariaLabelledBy]);\n\n  const messages = useLocalizedMessages('pagination');\n  const selectedPageAnnouncement = messages.format('selectedPageAnnouncement', { pageNumber: page });\n\n  // Announce when the selected page changes\n  useUpdateEffect(() => {\n    announce(selectedPageAnnouncement, 'polite', 4000);\n  }, [selectedPageAnnouncement]);\n\n  if (href) {\n    return (\n      <LinkPagination\n        {...props}\n        currentPage={page}\n        onPageChange={setPage}\n        navRef={ref}\n        href={href}\n        hrefLang={hrefLang}\n        target={target}\n        download={download}\n        ping={ping}\n        referrerPolicy={referrerPolicy}\n        rel={rel}\n        routerOptions={routerOptions}\n      />\n    );\n  } else {\n    return <ActionPagination {...props} navRef={ref} currentPage={page} onPageChange={setPage} />;\n  }\n}\n\n/**\n * Allows navigating across multiple pages of related content.\n *\n * See [pagination usage guidelines](https://ui.cimpress.io/components/pagination/).\n */\nconst _Pagination = withStyleProps(forwardRef(Pagination), 'Pagination');\n\nexport { _Pagination as Pagination };\n"]}

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 import { type PopoverProps as RACPopoverProps } from 'react-aria-components';
 import type { AriaLabelingProps, CommonProps } from '../types.js';
 export interface PopoverRootProps {
@@ -23,7 +23,7 @@ export interface PopoverRenderProps {
     /** Closes the popover when called. */
     close: () => void;
 }
-export interface PopoverProps extends CommonProps, AriaLabelingProps, Pick<RACPopoverProps, 'placement' | 'triggerRef'> {
+export interface PopoverProps extends CommonProps, AriaLabelingProps, Pick<RACPopoverProps, 'placement'> {
     /** The contents of the popover. A function may be provided to access a function to close the popover. */
     children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);
     /** The title of the popover. */
@@ -43,6 +43,11 @@ export interface PopoverProps extends CommonProps, AriaLabelingProps, Pick<RACPo
      * If using `PopoverRoot`, this prop has no effect - provide `onOpenChange` to `PopoverRoot` instead.
      */
     onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * The ref for the element which the popover positions itself with respect to.
+     * When used within `PopoverRoot`, this is set automatically. Provide `triggerRef` only when `Popover` is used standalone.
+     */
+    triggerRef?: RefObject<Element | null>;
 }
 /**
  * Displays an overlay element positioned relative to a trigger.

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

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAGL,KAAK,YAAY,IAAI,eAAe,EAIrC,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,gBAAgB;IAC/B,oIAAoI;IACpI,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAElD;yBAFe,WAAW;;;AAM3B,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,YACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,YAAY,CAAC;IACnD,yGAAyG;IACzG,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,kBAAkB,KAAK,SAAS,CAAC,CAAC;IACvE,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;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;AA8DD;;;;GAIG;AACH,QAAA,MAAM,QAAQ,0GAAiC,CAAC;AAEhD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAGL,KAAK,YAAY,IAAI,eAAe,EAIrC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,gBAAgB;IAC/B,oIAAoI;IACpI,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAElD;yBAFe,WAAW;;;AAM3B,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,iBAAiB,EAAE,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC;IACtG,yGAAyG;IACzG,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,kBAAkB,KAAK,SAAS,CAAC,CAAC;IACvE,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;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;IACzC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;CACxC;AA8DD;;;;GAIG;AACH,QAAA,MAAM,QAAQ,0GAAiC,CAAC;AAEhD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}

package/dist/esm/components/popover/popover.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { useEffect } from 'react';
 import { DialogTrigger as RACDialogTrigger, Popover as RACPopover, OverlayArrow as RACOverlayArrow, Dialog as RACDialog, Heading as RACHeading, } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
+import { useProductionWarning } from '../../utils/use-production-warning.js';
 import { FocusableContainer } from '../internal/focusable-container/focusable-container.js';
 import { textStyle } from '../typography/utils.js';
 /**
@@ -16,7 +16,7 @@ export function PopoverRoot(props) {
 PopoverRoot.displayName = 'PopoverRoot';
 function Popover({ children, title, UNSAFE_className, UNSAFE_style, isOpen, defaultOpen, onOpenChange, placement, triggerRef, ...props }, ref) {
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
-    useEffect(() => {
+    useProductionWarning(() => {
         if (!title && !ariaLabel && !ariaLabelledBy) {
             console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');
         }