@cimpress-ui/react 0.2.1 → 0.3.0

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { focusSafely } from '@react-aria/focus';
+import { useRouter } from '@react-aria/utils';
+import { useCallback, useRef } from 'react';
+import { RouterProvider } from '../../providers/router/router-provider.js';
+import { IconLinkButton } from '../button/icon-link-button.js';
+import { LinkButton } from '../button/link-button.js';
+import { BasePagination } from './base-pagination.js';
+/** @internal */
+export function LinkPagination({ currentPage, pageCount, href, onPageChange, 
+// Navigation props
+hrefLang, target, download, ping, referrerPolicy, rel, routerOptions, ...props }) {
+    const router = useRouter();
+    const listRef = useRef(null);
+    const navigationProps = {
+        hrefLang,
+        target,
+        download,
+        ping,
+        referrerPolicy,
+        rel,
+        routerOptions,
+    };
+    const navigationInterceptor = 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
+            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
+            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 (_jsx(RouterProvider, { navigate: navigationInterceptor, children: _jsx(BasePagination, { ...props, listRef: listRef, currentPage: currentPage, pageCount: pageCount, renderPreviousButton: (previousButtonProps) => (_jsx(IconLinkButton, { ...navigationProps, ...previousButtonProps, href: href(currentPage - 1), routerOptions: {
+                    ...(navigationProps.routerOptions ?? {}),
+                    __INTERNAL__CIMPRESS__UI__: {
+                        paginationPrevious: true,
+                    },
+                }, "data-previous": true, "data-page": currentPage - 1 })), renderNextButton: (nextButtonProps) => (_jsx(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 }) => (_jsx(LinkButton, { ...navigationProps, ...pageButtonProps, "aria-current": isCurrentPage ? 'page' : undefined, href: href(pageNumber), "data-page": pageNumber })) }) }));
+}
+//# sourceMappingURL=link-pagination.js.map

package/dist/esm/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/esm/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/esm/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":"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"}

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

@@ -1,66 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { UNSTABLE_IconChevronLeftFill, UNSTABLE_IconChevronRightFill } from '../../icons/index.js';
-import { Button } from '../button/button.js';
-import { IconButton } from '../button/icon-button.js';
-import { IconLinkButton } from '../button/icon-link-button.js';
-import { LinkButton } from '../button/link-button.js';
-export 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: _jsx(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: _jsx(UNSTABLE_IconChevronRightFill, {}),
-        isDisabled: value === count,
-        // TODO: internationalization
-        'aria-label': 'Next',
-    };
-    return (_jsx("nav", { className: "cim-pagination", "aria-label": ariaLabel, children: _jsxs("ul", { className: "cim-pagination-list", children: [_jsx("li", { children: href ? (_jsx(IconLinkButton, { ...previousButtonProps, href: href?.(value - 1) })) : (_jsx(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
-                    _jsx("li", { "aria-current": isCurrentPage && href != null ? 'page' : isCurrentPage, children: href ? (_jsx(LinkButton, { href: href?.(pageNumber), ...pageButtonProps })) : (_jsx(Button, { onPress: () => onPageChange?.(pageNumber), ...pageButtonProps })) }, pageNumber));
-                }), _jsx("li", { children: href ? (_jsx(IconLinkButton, { ...nextButtonProps, href: href?.(value + 1) })) : (_jsx(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];
+'use client';
+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 { withStyleProps } from '../../with-style-props.js';
+import { ActionPagination } from './action-pagination.js';
+import { LinkPagination } from './link-pagination.js';
+function Pagination({ currentPage, defaultPage, href, onPageChange, 
+// Navigation props
+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(() => {
+        if (!ariaLabel && !ariaLabelledBy) {
+            console.warn('Pagination requires one of aria-label / aria-labelledby for accessibility');
+        }
+    }, [ariaLabel, ariaLabelledBy]);
+    // Announce when the selected page changes
+    useUpdateEffect(() => {
+        // TODO: i18n
+        announce(`Selected page: ${page}`, 'polite', 4000);
+    }, [page]);
+    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 }));
     }
-    if (currentPage >= totalPages - 3) {
-        return [
-            1,
-            2,
-            { type: 'ellipsis', page: totalPages - 4 },
-            totalPages - 3,
-            totalPages - 2,
-            totalPages - 1,
-            totalPages,
-        ];
+    else {
+        return _jsx(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 = withStyleProps(forwardRef(Pagination), 'Pagination');
+export { _Pagination as Pagination };
 //# sourceMappingURL=pagination.js.map

package/dist/esm/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,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"]}

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

@@ -0,0 +1,54 @@
+import { type ReactNode } 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' | 'triggerRef'> {
+    /** 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;
+}
+/**
+ * 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/esm/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,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"}

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

@@ -0,0 +1,33 @@
+'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 { FocusableContainer } from '../internal/focusable-container/focusable-container.js';
+import { textStyle } from '../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.
+ */
+export function PopoverRoot(props) {
+    return _jsx(RACDialogTrigger, { ...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(() => {
+        if (!title && !ariaLabel && !ariaLabelledBy) {
+            console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');
+        }
+    }, [title, ariaLabel, ariaLabelledBy]);
+    return (_jsxs(RACPopover, { className: clsx('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: [_jsx(RACOverlayArrow, { className: "cim-popover-arrow", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "10", viewBox: "0 0 16 10", children: _jsx("path", { d: "M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0" }) }) }), _jsx(RACDialog, { ...props, ref: ref, className: "cim-popover-dialog", children: (renderProps) => (_jsxs(_Fragment, { children: [title && (_jsx(RACHeading, { slot: "title", className: clsx('cim-popover-title', textStyle({ variant: 'title-5' })), children: title })), _jsx(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 = forwardRef(Popover, 'Popover');
+export { _Popover as Popover };
+//# sourceMappingURL=popover.js.map

package/dist/esm/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;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAqB,SAAS,EAAkB,MAAM,OAAO,CAAC;AACrE,OAAO,EACL,aAAa,IAAI,gBAAgB,EACjC,OAAO,IAAI,UAAU,EAErB,YAAY,IAAI,eAAe,EAC/B,MAAM,IAAI,SAAS,EACnB,OAAO,IAAI,UAAU,GACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AAE5F,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAanD;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,OAAO,KAAC,gBAAgB,OAAK,KAAK,GAAI,CAAC;AACzC,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAgCxC,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,SAAS,CAAC,GAAG,EAAE;QACb,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,MAAC,UAAU,IACT,SAAS,EAAE,IAAI,CAAC,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,KAAC,eAAe,IAAC,SAAS,EAAC,mBAAmB,YAC5C,cAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,YAChF,eAAM,CAAC,EAAC,mEAAmE,GAAG,GAC1E,GACU,EAClB,KAAC,SAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,oBAAoB,YAC3D,CAAC,WAAW,EAAE,EAAE,CAAC,CAChB,8BACG,KAAK,IAAI,CACR,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,YAC7F,KAAK,GACK,CACd,EACD,KAAC,kBAAkB,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,UAAU,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAEhD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, useEffect, type ReactNode } 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 { 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\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<RACPopoverProps, 'placement' | 'triggerRef'> {\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\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  useEffect(() => {\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/esm/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/esm/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;AAG5F,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"}

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

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

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

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useEffect } from 'react';
 import { Button as RACButton, Collection as RACCollection, Header as RACHeader, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxSection as RACListBoxSection, Select as RACSelect, SelectValue as RACSelectValue, Text as RACText, } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
-import { IconCheckmark, IconChevronDownFill } from '../../icons/index.js';
+import { IconCheck, IconChevronDown } from '../../icons/index.js';
 import { withStyleProps } from '../../with-style-props.js';
 import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
 import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
@@ -19,7 +19,7 @@ function Select({ children, items, label, description, error, UNSAFE_className,
     if (items != null && typeof children !== 'function') {
         console.warn('`Select` requires `children` to be a function when using `items` prop');
     }
-    return (_jsxs(RACSelect, { ...props, ref: ref, className: clsx('cim-select', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACButton, { className: "cim-select-button", children: [_jsx(RACSelectValue, { className: (values) => clsx(values.defaultClassName, textStyle({ variant: 'medium', alignment: 'start' })), children: ({ selectedText }) => selectedText }), _jsx(IconChevronDownFill, {})] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: _jsx(RACListBox, { className: "cim-select-listbox", onScroll: onScroll, items: items, children: children }) })] }));
+    return (_jsxs(RACSelect, { ...props, ref: ref, className: clsx('cim-select', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACButton, { className: "cim-select-button", children: [_jsx(RACSelectValue, { className: (values) => clsx(values.defaultClassName, textStyle({ variant: 'medium', alignment: 'start' })), children: ({ selectedText }) => selectedText }), _jsx(IconChevronDown, {})] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: _jsx(RACListBox, { className: "cim-select-listbox", onScroll: onScroll, items: items, children: children }) })] }));
 }
 /**
  * Allows users to select one item from a collapsible list.
@@ -31,7 +31,7 @@ export { _Select as Select };
 /** Renders a single list item within `Select`. */
 export function SelectItem({ children, ...props }) {
     const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
-    return (_jsx(RACListBoxItem, { ...props, className: "cim-select-item", textValue: textValue, children: ({ isDisabled }) => (_jsxs(_Fragment, { children: [_jsx(IconCheckmark, {}), _jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
+    return (_jsx(RACListBoxItem, { ...props, className: "cim-select-item", textValue: textValue, children: ({ isDisabled }) => (_jsxs(_Fragment, { children: [_jsx(IconCheck, {}), _jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
 }
 SelectItem.displayName = 'SelectItem';
 /** Groups list items within `Select` into a section. */

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

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

package/dist/esm/components/table/contexts/column-collection.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode, type RefObject } from 'react';
+interface ColumnData {
+    number?: number;
+    width?: string | number;
+    contentAlignment: ColumnContentAlignment;
+}
+/** Represents the direction of content alignment within a table column. */
+export type ColumnContentAlignment = 'start' | 'center' | 'end';
+export declare function ColumnCollectionProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+type ColumnRegistrator = (key: string, data: ColumnData) => () => void;
+export declare function useColumnRegistration(): ColumnRegistrator;
+export declare function useColumnData(key: string): Readonly<ColumnData> | undefined;
+export interface UseEmptyStateCell {
+    columnKey: string;
+    colSpan: number;
+}
+export declare function useEmptyStateCell(ref: RefObject<HTMLTableCellElement | null>): UseEmptyStateCell;
+export {};
+//# sourceMappingURL=column-collection.d.ts.map

package/dist/esm/components/table/contexts/column-collection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-collection.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/column-collection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAyC,MAAM,OAAO,CAAC;AAQ7G,UAAU,UAAU;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gBAAgB,EAAE,sBAAsB,CAAC;CAC1C;AAED,2EAA2E;AAC3E,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAMhE,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAsB7E;AAED,KAAK,iBAAiB,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,MAAM,IAAI,CAAC;AAGvE,wBAAgB,qBAAqB,IAAI,iBAAiB,CAqBzD;AAGD,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC,UAAU,CAAC,GAAG,SAAS,CAO3E;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAGD,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,SAAS,CAAC,oBAAoB,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAchG"}

package/dist/esm/components/table/contexts/column-collection.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useRef, useState } from 'react';
+import { useServerEffectEvent } from '../../../utils/use-server-effect-event.js';
+const ColumnCollectionContext = createContext(null);
+const EMPTY_OBJECT = {};
+export function ColumnCollectionProvider({ children }) {
+    // When column collection is updated, we want to trigger a re-render,
+    // but we also want immediate access to the updated collection during SSR.
+    // Hence why it is stored as both a ref and a state.
+    const columnsRef = useRef(EMPTY_OBJECT);
+    const [_columns, _setColumns] = useState(EMPTY_OBJECT);
+    const collection = useMemo(() => ({
+        get columns() {
+            return columnsRef.current;
+        },
+        setColumns: (columns) => {
+            columnsRef.current = columns;
+            _setColumns(columns);
+        },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [_columns]);
+    return _jsx(ColumnCollectionContext.Provider, { value: collection, children: children });
+}
+// eslint-disable-next-line react-refresh/only-export-components
+export function useColumnRegistration() {
+    const columnCollection = useContext(ColumnCollectionContext);
+    if (!columnCollection) {
+        throw new Error('Cannot use column registration outside of a table');
+    }
+    return useServerEffectEvent((key, data) => {
+        columnCollection.setColumns({
+            ...columnCollection.columns,
+            [key]: data,
+        });
+        return () => {
+            const { columns } = columnCollection;
+            if (columns[key] === data) {
+                delete columns[key];
+                columnCollection.setColumns({ ...columns });
+            }
+        };
+    });
+}
+// eslint-disable-next-line react-refresh/only-export-components
+export function useColumnData(key) {
+    const columnCollection = useContext(ColumnCollectionContext);
+    if (!columnCollection) {
+        throw new Error('Cannot use column data outside of a table');
+    }
+    return columnCollection.columns[key];
+}
+// eslint-disable-next-line react-refresh/only-export-components
+export function useEmptyStateCell(ref) {
+    const columnCollection = useContext(ColumnCollectionContext);
+    if (!columnCollection) {
+        throw new Error('Cannot use empty state cell outside of a table');
+    }
+    // Empty state cell should have the same column key as the first column in the table, so find it
+    const parentTableElement = ref.current?.closest('table');
+    const firstColumn = parentTableElement?.querySelector('[data-cell-row-key][data-cell-column-key]');
+    return {
+        columnKey: firstColumn?.dataset.cellColumnKey ?? '???',
+        colSpan: Object.keys(columnCollection.columns).length,
+    };
+}
+//# sourceMappingURL=column-collection.js.map