@cimpress-ui/react 0.2.1 → 0.4.0

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

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasePagination = BasePagination;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const index_js_1 = require("../../i18n/index.js");
+const index_js_2 = require("../../icons/index.js");
+/** @internal */
+function BasePagination({ currentPage, pageCount, paginatedElementId, UNSAFE_className, UNSAFE_style, navRef, listRef, renderPreviousButton, renderNextButton, renderPageButton, ...props }) {
+    const messages = (0, index_js_1.useLocalizedMessages)('pagination');
+    const pages = (0, react_1.useMemo)(() => {
+        const visiblePages = getVisiblePages(currentPage, pageCount);
+        const firstPageIndex = 0;
+        const lastPageIndex = visiblePages.length - 1;
+        return visiblePages.map((page, index) => {
+            const isCurrentPage = typeof page === 'number' && page === currentPage;
+            const pageNumber = typeof page === 'number' ? page : page.page;
+            const pageButtonProps = {
+                'aria-label': messages.format('goToPage', { pageNumber }),
+                children: typeof page === 'number' ? page : '…',
+                'data-first': index === firstPageIndex || undefined,
+                'data-last': index === lastPageIndex || undefined,
+                variant: isCurrentPage ? 'primary' : 'secondary',
+            };
+            return { pageNumber, isCurrentPage, pageButtonProps };
+        });
+    }, [currentPage, pageCount, messages]);
+    const previousButtonProps = {
+        icon: (0, jsx_runtime_1.jsx)(index_js_2.IconChevronLeft, {}),
+        isDisabled: currentPage === 1,
+        'aria-label': messages.format('previousPage'),
+    };
+    const nextButtonProps = {
+        icon: (0, jsx_runtime_1.jsx)(index_js_2.IconChevronRight, {}),
+        isDisabled: currentPage === pageCount,
+        'aria-label': messages.format('nextPage'),
+    };
+    return ((0, jsx_runtime_1.jsx)("nav", { ...props, ref: navRef, className: (0, clsx_1.default)('cim-pagination', UNSAFE_className), style: UNSAFE_style, "aria-controls": paginatedElementId, children: (0, jsx_runtime_1.jsxs)("ul", { ref: listRef, className: "cim-pagination-list", children: [(0, jsx_runtime_1.jsx)("li", { children: renderPreviousButton(previousButtonProps) }), pages.map((pageData) => ((0, jsx_runtime_1.jsx)("li", { children: renderPageButton(pageData) }, pageData.pageNumber))), (0, jsx_runtime_1.jsx)("li", { children: renderNextButton(nextButtonProps) })] }) }));
+}
+function getVisiblePages(currentPage, totalPages) {
+    if (totalPages <= 7) {
+        return Array.from({ length: totalPages }, (_, index) => index + 1);
+    }
+    if (currentPage <= 4) {
+        return [1, 2, 3, 4, { type: 'ellipsis', page: 5 }, totalPages - 1, totalPages];
+    }
+    if (currentPage >= totalPages - 3) {
+        return [
+            1,
+            2,
+            { type: 'ellipsis', page: totalPages - 4 },
+            totalPages - 3,
+            totalPages - 2,
+            totalPages - 1,
+            totalPages,
+        ];
+    }
+    return [
+        1,
+        { type: 'ellipsis', page: currentPage - 2 },
+        currentPage - 1,
+        currentPage,
+        currentPage + 1,
+        { type: 'ellipsis', page: currentPage + 2 },
+        totalPages,
+    ];
+}
+//# sourceMappingURL=base-pagination.js.map

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

@@ -0,0 +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 { 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/commonjs/components/pagination/link-pagination.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=link-pagination.d.ts.map

package/dist/commonjs/components/pagination/link-pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/pagination/link-pagination.tsx"],"names":[],"mappings":""}

package/dist/commonjs/components/pagination/link-pagination.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkPagination = LinkPagination;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const focus_1 = require("@react-aria/focus");
+const utils_1 = require("@react-aria/utils");
+const react_1 = require("react");
+const router_provider_js_1 = require("../../providers/router/router-provider.js");
+const icon_link_button_js_1 = require("../button/icon-link-button.js");
+const link_button_js_1 = require("../button/link-button.js");
+const base_pagination_js_1 = require("./base-pagination.js");
+/** @internal */
+function LinkPagination({ currentPage, pageCount, href, onPageChange, 
+// Navigation props
+hrefLang, target, download, ping, referrerPolicy, rel, routerOptions, ...props }) {
+    const router = (0, utils_1.useRouter)();
+    const listRef = (0, react_1.useRef)(null);
+    const navigationProps = {
+        hrefLang,
+        target,
+        download,
+        ping,
+        referrerPolicy,
+        rel,
+        routerOptions,
+    };
+    const navigationInterceptor = (0, react_1.useCallback)((path, routerOptions) => {
+        // If navigation would cause the activated link to become disabled,
+        // we have to move focus to a different link beforehand.
+        if (!listRef.current) {
+            return;
+        }
+        const { paginationPrevious, paginationNext } = routerOptions?.__INTERNAL__CIMPRESS__UI__ ?? {};
+        const element = listRef.current.querySelector(`[href='${path}']${paginationPrevious ? '[data-previous]' : ':not([data-previous])'}${paginationNext ? '[data-next]' : ':not([data-next])'}`);
+        if (paginationPrevious && currentPage === 2) {
+            // "Previous" link will become disabled, so move focus to the first page link
+            (0, focus_1.focusSafely)(listRef.current?.querySelector(`[href][data-first]`));
+        }
+        else if (paginationNext && currentPage === pageCount - 1) {
+            // "Next" link will become disabled, so move focus to the last page link
+            (0, focus_1.focusSafely)(listRef.current?.querySelector(`[href][data-last]`));
+        }
+        onPageChange?.(Number(element.dataset.page));
+        // We don't have access to the modifiers of the original event.
+        // However, this function wouldn't run if the original modifiers impacted routing, so it is safe to pass an empty object.
+        router.open(element, {}, path, routerOptions);
+    }, [router, currentPage, pageCount, onPageChange]);
+    return ((0, jsx_runtime_1.jsx)(router_provider_js_1.RouterProvider, { navigate: navigationInterceptor, children: (0, jsx_runtime_1.jsx)(base_pagination_js_1.BasePagination, { ...props, listRef: listRef, currentPage: currentPage, pageCount: pageCount, renderPreviousButton: (previousButtonProps) => ((0, jsx_runtime_1.jsx)(icon_link_button_js_1.IconLinkButton, { ...navigationProps, ...previousButtonProps, href: href(currentPage - 1), routerOptions: {
+                    ...(navigationProps.routerOptions ?? {}),
+                    __INTERNAL__CIMPRESS__UI__: {
+                        paginationPrevious: true,
+                    },
+                }, "data-previous": true, "data-page": currentPage - 1 })), renderNextButton: (nextButtonProps) => ((0, jsx_runtime_1.jsx)(icon_link_button_js_1.IconLinkButton, { ...navigationProps, ...nextButtonProps, href: href(currentPage + 1), routerOptions: {
+                    ...(navigationProps.routerOptions ?? {}),
+                    __INTERNAL__CIMPRESS__UI__: {
+                        paginationNext: true,
+                    },
+                }, "data-next": true, "data-page": currentPage + 1 })), renderPageButton: ({ pageNumber, isCurrentPage, pageButtonProps }) => ((0, jsx_runtime_1.jsx)(link_button_js_1.LinkButton, { ...navigationProps, ...pageButtonProps, "aria-current": isCurrentPage ? 'page' : undefined, href: href(pageNumber), "data-page": pageNumber })) }) }));
+}
+//# sourceMappingURL=link-pagination.js.map

package/dist/commonjs/components/pagination/link-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-pagination.js","sourceRoot":"","sources":["../../../../src/components/pagination/link-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { focusSafely } from '@react-aria/focus';\nimport { useRouter } from '@react-aria/utils';\nimport { type ForwardedRef, useCallback, useRef } from 'react';\nimport { RouterProvider } from '../../providers/router/router-provider.js';\nimport { IconLinkButton } from '../button/icon-link-button.js';\nimport { LinkButton } from '../button/link-button.js';\nimport type { FocusableElement, Href, NavigationProps, RouterOptions } from '../types.js';\nimport { BasePagination, type BasePaginationProps } from './base-pagination.js';\n\ninterface PaginationRouterOptions {\n  __INTERNAL__CIMPRESS__UI__?: {\n    paginationPrevious?: boolean;\n    paginationNext?: boolean;\n  };\n}\n\n/** @internal */\nexport interface LinkPaginationProps extends BasePaginationProps, Omit<NavigationProps, 'href'> {\n  navRef?: ForwardedRef<HTMLElement>;\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\n/** @internal */\nexport function LinkPagination({\n  currentPage,\n  pageCount,\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}: LinkPaginationProps) {\n  const router = useRouter();\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const navigationProps = {\n    hrefLang,\n    target,\n    download,\n    ping,\n    referrerPolicy,\n    rel,\n    routerOptions,\n  };\n\n  const navigationInterceptor = useCallback(\n    (path: Href, routerOptions?: RouterOptions) => {\n      // If navigation would cause the activated link to become disabled,\n      // we have to move focus to a different link beforehand.\n\n      if (!listRef.current) {\n        return;\n      }\n\n      const { paginationPrevious, paginationNext } =\n        (routerOptions as PaginationRouterOptions | undefined)?.__INTERNAL__CIMPRESS__UI__ ?? {};\n\n      const element = listRef.current.querySelector(\n        `[href='${path}']${paginationPrevious ? '[data-previous]' : ':not([data-previous])'}${paginationNext ? '[data-next]' : ':not([data-next])'}`,\n      )!;\n\n      if (paginationPrevious && currentPage === 2) {\n        // \"Previous\" link will become disabled, so move focus to the first page link\n        focusSafely(listRef.current?.querySelector(`[href][data-first]`) as FocusableElement);\n      } else if (paginationNext && currentPage === pageCount - 1) {\n        // \"Next\" link will become disabled, so move focus to the last page link\n        focusSafely(listRef.current?.querySelector(`[href][data-last]`) as FocusableElement);\n      }\n\n      onPageChange?.(Number((element as HTMLElement).dataset.page));\n\n      // We don't have access to the modifiers of the original event.\n      // However, this function wouldn't run if the original modifiers impacted routing, so it is safe to pass an empty object.\n      router.open(element, {}, path, routerOptions);\n    },\n    [router, currentPage, pageCount, onPageChange],\n  );\n\n  return (\n    <RouterProvider navigate={navigationInterceptor}>\n      <BasePagination\n        {...props}\n        listRef={listRef}\n        currentPage={currentPage}\n        pageCount={pageCount}\n        renderPreviousButton={(previousButtonProps) => (\n          <IconLinkButton\n            {...navigationProps}\n            {...previousButtonProps}\n            href={href(currentPage - 1)}\n            routerOptions={\n              {\n                ...(navigationProps.routerOptions ?? {}),\n                __INTERNAL__CIMPRESS__UI__: {\n                  paginationPrevious: true,\n                },\n              } as PaginationRouterOptions as RouterOptions\n            }\n            data-previous\n            data-page={currentPage - 1}\n          />\n        )}\n        renderNextButton={(nextButtonProps) => (\n          <IconLinkButton\n            {...navigationProps}\n            {...nextButtonProps}\n            href={href(currentPage + 1)}\n            routerOptions={\n              {\n                ...(navigationProps.routerOptions ?? {}),\n                __INTERNAL__CIMPRESS__UI__: {\n                  paginationNext: true,\n                },\n              } as PaginationRouterOptions as RouterOptions\n            }\n            data-next\n            data-page={currentPage + 1}\n          />\n        )}\n        renderPageButton={({ pageNumber, isCurrentPage, pageButtonProps }) => (\n          <LinkButton\n            {...navigationProps}\n            {...pageButtonProps}\n            aria-current={isCurrentPage ? 'page' : undefined}\n            href={href(pageNumber)}\n            data-page={pageNumber}\n          />\n        )}\n      />\n    </RouterProvider>\n  );\n}\n"]}

package/dist/commonjs/components/pagination/pagination.d.ts

@@ -1,14 +1,20 @@
-export interface PaginationProps {
-    /** The current page number. */
-    value: number;
-    /** The total number of pages. */
-    count: number;
-    /** The accessibility label for the pagination navigation, must be unique to the page. */
-    'aria-label': string;
+import type { NavigationProps } from '../types.js';
+import type { BasePaginationProps } from './base-pagination.js';
+export interface PaginationProps extends Omit<BasePaginationProps, 'currentPage'>, Omit<NavigationProps, 'href'> {
+    /** The current page number (controlled). Should be between `1` and `pageCount`. */
+    currentPage?: number;
+    /** The default page number (uncontrolled). Should be between `1` and `pageCount`. */
+    defaultPage?: number;
     /** A callback function that is called when the page number changes. */
     onPageChange?: (page: number) => void;
     /** A function that returns a URL for a given page number. */
     href?: (page: number) => string;
 }
-export declare function UNSTABLE_Pagination({ value, count, onPageChange, href, 'aria-label': ariaLabel }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Allows navigating across multiple pages of related content.
+ *
+ * See [pagination usage guidelines](https://ui.cimpress.io/components/pagination/).
+ */
+declare const _Pagination: (props: PaginationProps & import("react").RefAttributes<HTMLElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Pagination as Pagination };
 //# sourceMappingURL=pagination.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,yFAAyF;IACzF,YAAY,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;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,eAAe,2CA+DjH"}
+{"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/commonjs/components/pagination/pagination.js

@@ -1,69 +1,45 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_Pagination = UNSTABLE_Pagination;
+exports.Pagination = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const index_js_1 = require("../../icons/index.js");
-const button_js_1 = require("../button/button.js");
-const icon_button_js_1 = require("../button/icon-button.js");
-const icon_link_button_js_1 = require("../button/icon-link-button.js");
-const link_button_js_1 = require("../button/link-button.js");
-function UNSTABLE_Pagination({ value, count, onPageChange, href, 'aria-label': ariaLabel }) {
-    const visiblePages = getVisiblePages(value, count);
-    const previousButtonProps = {
-        // TODO: icon doesn't look optically centered, see: https://www.figma.com/design/JVWmaCjDeOlrYAkLlJD5gr?node-id=10376-1487#1082340181
-        icon: (0, jsx_runtime_1.jsx)(index_js_1.UNSTABLE_IconChevronLeftFill, {}),
-        isDisabled: value === 1,
-        // TODO: internationalization
-        'aria-label': 'Previous',
-    };
-    const nextButtonProps = {
-        // TODO: icon doesn't look optically centered, see: https://www.figma.com/design/JVWmaCjDeOlrYAkLlJD5gr?node-id=10376-1487#1082340181
-        icon: (0, jsx_runtime_1.jsx)(index_js_1.UNSTABLE_IconChevronRightFill, {}),
-        isDisabled: value === count,
-        // TODO: internationalization
-        'aria-label': 'Next',
-    };
-    return ((0, jsx_runtime_1.jsx)("nav", { className: "cim-pagination", "aria-label": ariaLabel, children: (0, jsx_runtime_1.jsxs)("ul", { className: "cim-pagination-list", children: [(0, jsx_runtime_1.jsx)("li", { children: href ? ((0, jsx_runtime_1.jsx)(icon_link_button_js_1.IconLinkButton, { ...previousButtonProps, href: href?.(value - 1) })) : ((0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { ...previousButtonProps, onPress: () => onPageChange?.(value - 1) })) }), visiblePages.map((page) => {
-                    const isCurrentPage = typeof page === 'number' && page === value;
-                    const pageNumber = typeof page === 'number' ? page : page.page;
-                    const pageButtonProps = {
-                        // TODO: internationalization
-                        // TODO: review if "Current page" is needed once we put `aria-current` on the `button`/`link`
-                        'aria-label': isCurrentPage ? `Current page, page ${pageNumber}` : `Go to page ${pageNumber}`,
-                        children: typeof page === 'number' ? page : '…',
-                    };
-                    return (
-                    // TODO: Put `aria-current` on the `button`/`link` instead of the `li` for better accessibility/screen reader support
-                    // RAC Button doesn't support `aria-current` as of now
-                    (0, jsx_runtime_1.jsx)("li", { "aria-current": isCurrentPage && href != null ? 'page' : isCurrentPage, children: href ? ((0, jsx_runtime_1.jsx)(link_button_js_1.LinkButton, { href: href?.(pageNumber), ...pageButtonProps })) : ((0, jsx_runtime_1.jsx)(button_js_1.Button, { onPress: () => onPageChange?.(pageNumber), ...pageButtonProps })) }, pageNumber));
-                }), (0, jsx_runtime_1.jsx)("li", { children: href ? ((0, jsx_runtime_1.jsx)(icon_link_button_js_1.IconLinkButton, { ...nextButtonProps, href: href?.(value + 1) })) : ((0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { ...nextButtonProps, onPress: () => onPageChange?.(value + 1) })) })] }) }));
-}
-function getVisiblePages(currentPage, totalPages) {
-    if (totalPages <= 7) {
-        return Array.from({ length: totalPages }, (_, index) => index + 1);
-    }
-    if (currentPage <= 4) {
-        return [1, 2, 3, 4, { type: 'ellipsis', page: 5 }, totalPages - 1, totalPages];
+const live_announcer_1 = require("@react-aria/live-announcer");
+const utils_1 = require("@react-aria/utils");
+const utils_2 = require("@react-stately/utils");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const index_js_1 = require("../../i18n/index.js");
+const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
+const with_style_props_js_1 = require("../../with-style-props.js");
+const action_pagination_js_1 = require("./action-pagination.js");
+const link_pagination_js_1 = require("./link-pagination.js");
+function Pagination({ currentPage, defaultPage, href, onPageChange, 
+// Navigation props
+hrefLang, target, download, ping, referrerPolicy, rel, routerOptions, ...props }, ref) {
+    const [page, setPage] = (0, utils_2.useControlledState)(currentPage, defaultPage ?? 1, onPageChange);
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    (0, use_production_warning_js_1.useProductionWarning)(() => {
+        if (!ariaLabel && !ariaLabelledBy) {
+            console.warn('Pagination requires one of aria-label / aria-labelledby for accessibility');
+        }
+    }, [ariaLabel, ariaLabelledBy]);
+    const messages = (0, index_js_1.useLocalizedMessages)('pagination');
+    const selectedPageAnnouncement = messages.format('selectedPageAnnouncement', { pageNumber: page });
+    // Announce when the selected page changes
+    (0, utils_1.useUpdateEffect)(() => {
+        (0, live_announcer_1.announce)(selectedPageAnnouncement, 'polite', 4000);
+    }, [selectedPageAnnouncement]);
+    if (href) {
+        return ((0, jsx_runtime_1.jsx)(link_pagination_js_1.LinkPagination, { ...props, currentPage: page, onPageChange: setPage, navRef: ref, href: href, hrefLang: hrefLang, target: target, download: download, ping: ping, referrerPolicy: referrerPolicy, rel: rel, routerOptions: routerOptions }));
     }
-    if (currentPage >= totalPages - 3) {
-        return [
-            1,
-            2,
-            { type: 'ellipsis', page: totalPages - 4 },
-            totalPages - 3,
-            totalPages - 2,
-            totalPages - 1,
-            totalPages,
-        ];
+    else {
+        return (0, jsx_runtime_1.jsx)(action_pagination_js_1.ActionPagination, { ...props, navRef: ref, currentPage: page, onPageChange: setPage });
     }
-    return [
-        1,
-        { type: 'ellipsis', page: currentPage - 2 },
-        currentPage - 1,
-        currentPage,
-        currentPage + 1,
-        { type: 'ellipsis', page: currentPage + 2 },
-        totalPages,
-    ];
 }
+/**
+ * Allows navigating across multiple pages of related content.
+ *
+ * See [pagination usage guidelines](https://ui.cimpress.io/components/pagination/).
+ */
+const _Pagination = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Pagination), 'Pagination');
+exports.Pagination = _Pagination;
 //# sourceMappingURL=pagination.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { UNSTABLE_IconChevronLeftFill, UNSTABLE_IconChevronRightFill } from '../../icons/index.js';\nimport { Button } from '../button/button.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { IconLinkButton } from '../button/icon-link-button.js';\nimport { LinkButton } from '../button/link-button.js';\n\nexport interface PaginationProps {\n  /** The current page number. */\n  value: number;\n  /** The total number of pages. */\n  count: number;\n  /** The accessibility label for the pagination navigation, must be unique to the page. */\n  'aria-label': string;\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\nexport function UNSTABLE_Pagination({ value, count, onPageChange, href, 'aria-label': ariaLabel }: PaginationProps) {\n  const visiblePages = getVisiblePages(value, count);\n\n  const previousButtonProps = {\n    // TODO: icon doesn't look optically centered, see: https://www.figma.com/design/JVWmaCjDeOlrYAkLlJD5gr?node-id=10376-1487#1082340181\n    icon: <UNSTABLE_IconChevronLeftFill />,\n    isDisabled: value === 1,\n    // TODO: internationalization\n    'aria-label': 'Previous',\n  };\n\n  const nextButtonProps = {\n    // TODO: icon doesn't look optically centered, see: https://www.figma.com/design/JVWmaCjDeOlrYAkLlJD5gr?node-id=10376-1487#1082340181\n    icon: <UNSTABLE_IconChevronRightFill />,\n    isDisabled: value === count,\n    // TODO: internationalization\n    'aria-label': 'Next',\n  };\n\n  return (\n    <nav className=\"cim-pagination\" aria-label={ariaLabel}>\n      <ul className=\"cim-pagination-list\">\n        <li>\n          {href ? (\n            <IconLinkButton {...previousButtonProps} href={href?.(value - 1)} />\n          ) : (\n            <IconButton {...previousButtonProps} onPress={() => onPageChange?.(value - 1)} />\n          )}\n        </li>\n\n        {visiblePages.map((page) => {\n          const isCurrentPage = typeof page === 'number' && page === value;\n          const pageNumber = typeof page === 'number' ? page : page.page;\n          const pageButtonProps = {\n            // TODO: internationalization\n            // TODO: review if \"Current page\" is needed once we put `aria-current` on the `button`/`link`\n            'aria-label': isCurrentPage ? `Current page, page ${pageNumber}` : `Go to page ${pageNumber}`,\n            children: typeof page === 'number' ? page : '…',\n          };\n\n          return (\n            // TODO: Put `aria-current` on the `button`/`link` instead of the `li` for better accessibility/screen reader support\n            // RAC Button doesn't support `aria-current` as of now\n            <li key={pageNumber} aria-current={isCurrentPage && href != null ? 'page' : isCurrentPage}>\n              {href ? (\n                <LinkButton href={href?.(pageNumber)} {...pageButtonProps} />\n              ) : (\n                <Button onPress={() => onPageChange?.(pageNumber)} {...pageButtonProps} />\n              )}\n            </li>\n          );\n        })}\n\n        <li>\n          {href ? (\n            <IconLinkButton {...nextButtonProps} href={href?.(value + 1)} />\n          ) : (\n            <IconButton {...nextButtonProps} onPress={() => onPageChange?.(value + 1)} />\n          )}\n        </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":"pagination.js","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,+DAAsD;AACtD,6CAAoD;AACpD,gDAA0D;AAE1D,yDAAkD;AAClD,kDAA2D;AAC3D,qFAA6E;AAC7E,mEAA2D;AAE3D,iEAA0D;AAE1D,6DAAsD;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,IAAA,0BAAkB,EAAC,WAAW,EAAE,WAAW,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC;IAExF,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,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,IAAA,+BAAoB,EAAC,YAAY,CAAC,CAAC;IACpD,MAAM,wBAAwB,GAAG,QAAQ,CAAC,MAAM,CAAC,0BAA0B,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IAEnG,0CAA0C;IAC1C,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,IAAA,yBAAQ,EAAC,wBAAwB,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAC,CAAC;IAE/B,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,uBAAC,mCAAc,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,uBAAC,uCAAgB,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,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEjD,iCAAU","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/commonjs/components/popover/popover.d.ts

@@ -0,0 +1,59 @@
+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 {
+    /** The popover trigger with its associated popover. Provide the trigger as the first child, and the popover as the second child. */
+    children: ReactNode;
+    /** Whether the popover is open (controlled). */
+    isOpen?: boolean;
+    /** Whether the popover is open by default (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Handler that is called when the popover's open state changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * Encapsulates a popover trigger and its associated popover.
+ * The trigger can be any Cimpress UI button, and the popover will be displayed when the trigger is activated.
+ */
+export declare function PopoverRoot(props: PopoverRootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PopoverRoot {
+    var displayName: string;
+}
+export interface PopoverRenderProps {
+    /** Closes the popover when called. */
+    close: () => void;
+}
+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. */
+    title?: string;
+    /**
+     * Whether the popover is open (controlled).
+     * If using `PopoverRoot`, this prop has no effect - provide `isOpen` to `PopoverRoot` instead.
+     */
+    isOpen?: boolean;
+    /**
+     * Whether the popover is open by default (uncontrolled).
+     * If using `PopoverRoot`, this prop has no effect - provide `defaultOpen` to `PopoverRoot` instead.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Handler that is called when the popover's open state changes.
+     * 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.
+ *
+ * See [popover usage guidelines](https://ui.cimpress.io/components/popover/).
+ */
+declare const _Popover: (props: PopoverProps & import("react").RefAttributes<HTMLElement>) => import("react").JSX.Element | null;
+export { _Popover as Popover };
+//# sourceMappingURL=popover.d.ts.map

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

@@ -0,0 +1 @@
+{"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/commonjs/components/popover/popover.js

@@ -0,0 +1,40 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popover = void 0;
+exports.PopoverRoot = PopoverRoot;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_aria_components_1 = require("react-aria-components");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
+const focusable_container_js_1 = require("../internal/focusable-container/focusable-container.js");
+const utils_js_1 = require("../typography/utils.js");
+/**
+ * Encapsulates a popover trigger and its associated popover.
+ * The trigger can be any Cimpress UI button, and the popover will be displayed when the trigger is activated.
+ */
+function PopoverRoot(props) {
+    return (0, jsx_runtime_1.jsx)(react_aria_components_1.DialogTrigger, { ...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;
+    (0, use_production_warning_js_1.useProductionWarning)(() => {
+        if (!title && !ariaLabel && !ariaLabelledBy) {
+            console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');
+        }
+    }, [title, ariaLabel, ariaLabelledBy]);
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Popover, { className: (0, clsx_1.default)('cim-popover', UNSAFE_className), style: UNSAFE_style, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, triggerRef: triggerRef, placement: placement, containerPadding: 16, offset: 5, arrowBoundaryOffset: 4, "data-cim-style-root": true, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.OverlayArrow, { className: "cim-popover-arrow", children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "10", viewBox: "0 0 16 10", children: (0, jsx_runtime_1.jsx)("path", { d: "M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0" }) }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { ...props, ref: ref, className: "cim-popover-dialog", children: (renderProps) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { slot: "title", className: (0, clsx_1.default)('cim-popover-title', (0, utils_js_1.textStyle)({ variant: 'title-5' })), children: title })), (0, jsx_runtime_1.jsx)(focusable_container_js_1.FocusableContainer, { className: "cim-popover-content", scrollDirection: "vertical", children: typeof children === 'function' ? children(renderProps) : children })] })) })] }));
+}
+/**
+ * Displays an overlay element positioned relative to a trigger.
+ *
+ * See [popover usage guidelines](https://ui.cimpress.io/components/popover/).
+ */
+const _Popover = (0, forward_ref_js_1.forwardRef)(Popover, 'Popover');
+exports.Popover = _Popover;
+//# sourceMappingURL=popover.js.map

package/dist/commonjs/components/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAiCb,kCAEC;;AAjCD,gDAAwB;AAExB,iEAO+B;AAC/B,yDAAkD;AAClD,qFAA6E;AAC7E,mGAA4F;AAE5F,qDAAmD;AAanD;;;GAGG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,OAAO,uBAAC,qCAAgB,OAAK,KAAK,GAAI,CAAC;AACzC,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAkCxC,SAAS,OAAO,CACd,EACE,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,YAAY,EACZ,MAAM,EACN,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACK,EACf,GAA8B;IAE9B,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,gFAAgF,CAAC,CAAC;QACjG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,wBAAC,+BAAU,IACT,SAAS,EAAE,IAAA,cAAI,EAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,EAAE,EACpB,MAAM,EAAE,CAAC,EACT,mBAAmB,EAAE,CAAC,0CAGtB,uBAAC,oCAAe,IAAC,SAAS,EAAC,mBAAmB,YAC5C,gCAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,YAChF,iCAAM,CAAC,EAAC,mEAAmE,GAAG,GAC1E,GACU,EAClB,uBAAC,8BAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,oBAAoB,YAC3D,CAAC,WAAW,EAAE,EAAE,CAAC,CAChB,6DACG,KAAK,IAAI,CACR,uBAAC,+BAAU,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAA,cAAI,EAAC,mBAAmB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,YAC7F,KAAK,GACK,CACd,EACD,uBAAC,2CAAkB,IAAC,SAAS,EAAC,qBAAqB,EAAC,eAAe,EAAC,UAAU,YAC3E,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,GAC/C,IACpB,CACJ,GACS,IACD,CACd,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,QAAQ,GAAG,IAAA,2BAAU,EAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAE3B,2BAAO","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode, RefObject } from 'react';\nimport {\n  DialogTrigger as RACDialogTrigger,\n  Popover as RACPopover,\n  type PopoverProps as RACPopoverProps,\n  OverlayArrow as RACOverlayArrow,\n  Dialog as RACDialog,\n  Heading as RACHeading,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface PopoverRootProps {\n  /** The popover trigger with its associated popover. Provide the trigger as the first child, and the popover as the second child. */\n  children: ReactNode;\n  /** Whether the popover is open (controlled). */\n  isOpen?: boolean;\n  /** Whether the popover is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Handler that is called when the popover's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a popover trigger and its associated popover.\n * The trigger can be any Cimpress UI button, and the popover will be displayed when the trigger is activated.\n */\nexport function PopoverRoot(props: PopoverRootProps) {\n  return <RACDialogTrigger {...props} />;\n}\n\nPopoverRoot.displayName = 'PopoverRoot';\n\nexport interface PopoverRenderProps {\n  /** Closes the popover when called. */\n  close: () => void;\n}\n\nexport interface PopoverProps extends CommonProps, AriaLabelingProps, Pick<RACPopoverProps, 'placement'> {\n  /** The contents of the popover. A function may be provided to access a function to close the popover. */\n  children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n  /** The title of the popover. */\n  title?: string;\n  /**\n   * Whether the popover is open (controlled).\n   * If using `PopoverRoot`, this prop has no effect - provide `isOpen` to `PopoverRoot` instead.\n   */\n  isOpen?: boolean;\n  /**\n   * Whether the popover is open by default (uncontrolled).\n   * If using `PopoverRoot`, this prop has no effect - provide `defaultOpen` to `PopoverRoot` instead.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Handler that is called when the popover's open state changes.\n   * If using `PopoverRoot`, this prop has no effect - provide `onOpenChange` to `PopoverRoot` instead.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * The ref for the element which the popover positions itself with respect to.\n   * When used within `PopoverRoot`, this is set automatically. Provide `triggerRef` only when `Popover` is used standalone.\n   */\n  triggerRef?: RefObject<Element | null>;\n}\n\nfunction Popover(\n  {\n    children,\n    title,\n    UNSAFE_className,\n    UNSAFE_style,\n    isOpen,\n    defaultOpen,\n    onOpenChange,\n    placement,\n    triggerRef,\n    ...props\n  }: PopoverProps,\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('Popover requires one of title / aria-label / aria-labelledby for accessibility');\n    }\n  }, [title, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACPopover\n      className={clsx('cim-popover', UNSAFE_className)}\n      style={UNSAFE_style}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      triggerRef={triggerRef}\n      placement={placement}\n      containerPadding={16}\n      offset={5} // 1px border + 4px actual offset\n      arrowBoundaryOffset={4} // offset by border radius so that the arrow is never positioned over the rounded corner\n      data-cim-style-root\n    >\n      <RACOverlayArrow className=\"cim-popover-arrow\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"10\" viewBox=\"0 0 16 10\">\n          <path d=\"M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0\" />\n        </svg>\n      </RACOverlayArrow>\n      <RACDialog {...props} ref={ref} className=\"cim-popover-dialog\">\n        {(renderProps) => (\n          <>\n            {title && (\n              <RACHeading slot=\"title\" className={clsx('cim-popover-title', textStyle({ variant: 'title-5' }))}>\n                {title}\n              </RACHeading>\n            )}\n            <FocusableContainer className=\"cim-popover-content\" scrollDirection=\"vertical\">\n              {typeof children === 'function' ? children(renderProps) : children}\n            </FocusableContainer>\n          </>\n        )}\n      </RACDialog>\n    </RACPopover>\n  );\n}\n\n/**\n * Displays an overlay element positioned relative to a trigger.\n *\n * See [popover usage guidelines](https://ui.cimpress.io/components/popover/).\n */\nconst _Popover = forwardRef(Popover, 'Popover');\n\nexport { _Popover as Popover };\n"]}

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

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { type RadioGroupProps as RACRadioGroupProps } from 'react-aria-components';
 import type { Responsive } from '../spacing/types.js';
 import type { Direction, CommonProps, FieldProps, WithRequired } from '../types.js';
-export interface RadioGroupProps extends CommonProps, WithRequired<FieldProps<string | null>, 'label'>, Pick<RACRadioGroupProps, 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue' | 'name'> {
+export interface RadioGroupProps extends CommonProps, WithRequired<FieldProps<string | null>, 'label'>, Pick<RACRadioGroupProps, 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue'> {
     /** Radio buttons belonging to the group. */
     children: ReactNode;
     /**

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

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

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

@@ -13,7 +13,7 @@ const with_style_props_js_1 = require("../../with-style-props.js");
 const form_field_js_1 = require("../internal/form-field/form-field.js");
 const stack_js_1 = require("../spacing/stack/stack.js");
 function RadioGroup({ label, description, error: errorMessage, direction = 'vertical', children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.RadioGroup, { ...props, ref: ref, className: (0, clsx_1.default)('cim-radio-group', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, children: label }), (0, jsx_runtime_1.jsx)(stack_js_1.Stack, { gap: getGapFromDirection(direction), direction: direction, children: children }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.RadioGroup, { ...props, ref: ref, className: (0, clsx_1.default)('cim-radio-group', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, children: label }), (0, jsx_runtime_1.jsx)(stack_js_1.Stack, { gap: getGapFromDirection(direction), direction: direction, wrap: true, children: children }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] }));
 }
 /**
  * Allows users to select a single item from a visible list.
@@ -25,7 +25,7 @@ exports.RadioGroup = _RadioGroup;
 // Make sure that radio buttons are spaced by 16px when stacked horizontally, and 8px otherwise.
 function getGapFromDirection(direction) {
     if (typeof direction === 'object') {
-        const gap = { xs: direction.xs === 'horizontal' ? 16 : 8 };
+        const gap = { sm: direction.sm === 'horizontal' ? 16 : 8 };
         Object.entries(direction).reduce((acc, curr) => {
             gap[curr[0]] = curr[1] === 'horizontal' ? 16 : 8;
             return acc;

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

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../../src/components/radio/radio-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAgH;AAChH,yDAAkD;AAClD,mEAA2D;AAC3D,wEAA4G;AAC5G,wDAAkD;AAoBlD,SAAS,UAAU,CACjB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,SAAS,GAAG,UAAU,EACtB,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACQ,EAClB,GAAiC;IAEjC,OAAO,CACL,wBAAC,kCAAa,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC3G,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,YAAG,KAAK,GAAkB,EACtE,uBAAC,gBAAK,IAAC,GAAG,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,SAAS,YAC7D,QAAQ,GACH,EACR,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IAC5C,CACjB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEjD,iCAAU;AAElC,gGAAgG;AAChG,SAAS,mBAAmB,CAAC,SAAgC;IAC3D,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;QAClC,MAAM,GAAG,GAAwB,EAAE,EAAE,EAAE,SAAS,CAAC,EAAE,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE/E,MAAM,CAAC,OAAO,CAAC,SAAS,CAA+B,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YAC5E,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YACjD,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,OAAO,GAAG,CAAC;IACb,CAAC;IAED,OAAO,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { RadioGroup as RACRadioGroup, type RadioGroupProps as RACRadioGroupProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Stack } from '../spacing/stack/stack.js';\nimport type { Breakpoint, Responsive, Spacing } from '../spacing/types.js';\nimport type { Direction, CommonProps, FieldProps, WithRequired } from '../types.js';\n\nexport interface RadioGroupProps\n  extends CommonProps,\n    WithRequired<FieldProps<string | null>, 'label'>,\n    Pick<\n      RACRadioGroupProps,\n      'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue' | 'name'\n    > {\n  /** Radio buttons belonging to the group. */\n  children: ReactNode;\n  /**\n   * Determines the direction in which radio buttons will be stacked.\n   * @default 'vertical'\n   */\n  direction?: Responsive<Direction>;\n}\n\nfunction RadioGroup(\n  {\n    label,\n    description,\n    error: errorMessage,\n    direction = 'vertical',\n    children,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: RadioGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACRadioGroup {...props} ref={ref} className={clsx('cim-radio-group', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired}>{label}</FormFieldLabel>\n      <Stack gap={getGapFromDirection(direction)} direction={direction}>\n        {children}\n      </Stack>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACRadioGroup>\n  );\n}\n\n/**\n * Allows users to select a single item from a visible list.\n *\n * See [radio group usage guidelines](https://ui.cimpress.io/components/radio-group/).\n */\nconst _RadioGroup = withStyleProps(forwardRef(RadioGroup), 'RadioGroup');\n\nexport { _RadioGroup as RadioGroup };\n\n// Make sure that radio buttons are spaced by 16px when stacked horizontally, and 8px otherwise.\nfunction getGapFromDirection(direction: Responsive<Direction>): Responsive<Spacing> {\n  if (typeof direction === 'object') {\n    const gap: Responsive<Spacing> = { xs: direction.xs === 'horizontal' ? 16 : 8 };\n\n    (Object.entries(direction) as [Breakpoint, Direction][]).reduce((acc, curr) => {\n      gap[curr[0]] = curr[1] === 'horizontal' ? 16 : 8;\n      return acc;\n    }, gap);\n\n    return gap;\n  }\n\n  return direction === 'horizontal' ? 16 : 8;\n}\n"]}
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../../src/components/radio/radio-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAgH;AAChH,yDAAkD;AAClD,mEAA2D;AAC3D,wEAA4G;AAC5G,wDAAkD;AAoBlD,SAAS,UAAU,CACjB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,SAAS,GAAG,UAAU,EACtB,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACQ,EAClB,GAAiC;IAEjC,OAAO,CACL,wBAAC,kCAAa,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC3G,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,YAAG,KAAK,GAAkB,EACtE,uBAAC,gBAAK,IAAC,GAAG,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,kBACnE,QAAQ,GACH,EACR,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IAC5C,CACjB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEjD,iCAAU;AAElC,gGAAgG;AAChG,SAAS,mBAAmB,CAAC,SAAgC;IAC3D,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;QAClC,MAAM,GAAG,GAAwB,EAAE,EAAE,EAAE,SAAS,CAAC,EAAE,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE/E,MAAM,CAAC,OAAO,CAAC,SAAS,CAA+B,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YAC5E,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YACjD,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,OAAO,GAAG,CAAC;IACb,CAAC;IAED,OAAO,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { RadioGroup as RACRadioGroup, type RadioGroupProps as RACRadioGroupProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Stack } from '../spacing/stack/stack.js';\nimport type { Breakpoint, Responsive, Spacing } from '../spacing/types.js';\nimport type { Direction, CommonProps, FieldProps, WithRequired } from '../types.js';\n\nexport interface RadioGroupProps\n  extends CommonProps,\n    WithRequired<FieldProps<string | null>, 'label'>,\n    Pick<\n      RACRadioGroupProps,\n      'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue'\n    > {\n  /** Radio buttons belonging to the group. */\n  children: ReactNode;\n  /**\n   * Determines the direction in which radio buttons will be stacked.\n   * @default 'vertical'\n   */\n  direction?: Responsive<Direction>;\n}\n\nfunction RadioGroup(\n  {\n    label,\n    description,\n    error: errorMessage,\n    direction = 'vertical',\n    children,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: RadioGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACRadioGroup {...props} ref={ref} className={clsx('cim-radio-group', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired}>{label}</FormFieldLabel>\n      <Stack gap={getGapFromDirection(direction)} direction={direction} wrap>\n        {children}\n      </Stack>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACRadioGroup>\n  );\n}\n\n/**\n * Allows users to select a single item from a visible list.\n *\n * See [radio group usage guidelines](https://ui.cimpress.io/components/radio-group/).\n */\nconst _RadioGroup = withStyleProps(forwardRef(RadioGroup), 'RadioGroup');\n\nexport { _RadioGroup as RadioGroup };\n\n// Make sure that radio buttons are spaced by 16px when stacked horizontally, and 8px otherwise.\nfunction getGapFromDirection(direction: Responsive<Direction>): Responsive<Spacing> {\n  if (typeof direction === 'object') {\n    const gap: Responsive<Spacing> = { sm: direction.sm === 'horizontal' ? 16 : 8 };\n\n    (Object.entries(direction) as [Breakpoint, Direction][]).reduce((acc, curr) => {\n      gap[curr[0]] = curr[1] === 'horizontal' ? 16 : 8;\n      return acc;\n    }, gap);\n\n    return gap;\n  }\n\n  return direction === 'horizontal' ? 16 : 8;\n}\n"]}

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

@@ -1,6 +1,6 @@
 import { type RadioProps as RACRadioProps } from 'react-aria-components';
-import type { CommonProps, LabellableProps, StringLikeChildren } from '../types.js';
-export interface RadioProps extends CommonProps, Omit<LabellableProps, 'label'>, Pick<RACRadioProps, 'value' | 'isDisabled' | 'autoFocus'> {
+import type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';
+export interface RadioProps extends CommonProps, AriaLabelingProps, Pick<RACRadioProps, 'value' | 'isDisabled' | 'autoFocus'> {
     /** The label rendered next to the radio. */
     children?: StringLikeChildren;
 }

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

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