npm - @cimpress-ui/react - Versions diffs - 0.4.0 → 1.0.0 - Mend

@cimpress-ui/react 0.4.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (226) hide show

package/README.md CHANGED Viewed

@@ -4,8 +4,6 @@
 <br />
-:warning: **This project is a work in progress. Not ready for production use.** :warning:
 Cimpress UI is a library of React components for building user interfaces of Cimpress apps. It's a next-generation replacement of `@cimpress/react-components`.
 ## Installation and usage

package/dist/commonjs/components/app-header/app-header.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { CommonProps, Href, NavigationProps, WithRequired } from '../types.js';
+export interface AppHeaderTitleLinkProps extends WithRequired<NavigationProps, 'href'> {
+}
+export interface AppHeaderProps extends CommonProps {
+    /** The title displayed in the header, usually the application name. Rendered as an `<h1>` element. */
+    title: string;
+    /** The props of the link that is rendered around the header title. */
+    titleLink: Href | AppHeaderTitleLinkProps;
+    /** The tools to render at the end of the header. */
+    tools?: ReactNode;
+}
+/**
+ * Displays a basic application header.
+ *
+ * See [app header usage guidelines](https://ui.cimpress.io/components/app-header/).
+ */
+declare const _AppHeader: (props: AppHeaderProps & import("react").RefAttributes<HTMLDivElement>) => import("react").JSX.Element | null;
+export { _AppHeader as AppHeader };
+//# sourceMappingURL=app-header.d.ts.map

package/dist/commonjs/components/app-header/app-header.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"app-header.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKpF,MAAM,WAAW,uBAAwB,SAAQ,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;CAAG;AAEzF,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,sGAAsG;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,SAAS,EAAE,IAAI,GAAG,uBAAuB,CAAC;IAC1C,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAyBD;;;;GAIG;AACH,QAAA,MAAM,UAAU,+GAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}

package/dist/commonjs/components/app-header/app-header.js ADDED Viewed

@@ -0,0 +1,26 @@
+'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.AppHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const forward_ref_js_1 = require("../../forward-ref.js");
+const divider_js_1 = require("../divider/divider.js");
+const link_js_1 = require("../typography/link.js");
+const text_js_1 = require("../typography/text.js");
+const cimpress_logo_js_1 = require("./cimpress-logo.js");
+function AppHeader({ title, titleLink, tools, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };
+    return ((0, jsx_runtime_1.jsxs)("header", { ...props, ref: ref, className: (0, clsx_1.default)('cim-app-header', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-app-header-title", children: [(0, jsx_runtime_1.jsx)(cimpress_logo_js_1.CimpressLogo, { height: 18 }), (0, jsx_runtime_1.jsx)(divider_js_1.Divider, { orientation: "vertical" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "h1", variant: "title-5", tone: "base", children: (0, jsx_runtime_1.jsx)(link_js_1.Link, { ...titleLinkProps, UNSAFE_className: "cim-app-header-title-link", children: title }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools", children: tools })] }));
+}
+/**
+ * Displays a basic application header.
+ *
+ * See [app header usage guidelines](https://ui.cimpress.io/components/app-header/).
+ */
+const _AppHeader = (0, forward_ref_js_1.forwardRef)(AppHeader, 'AppHeader');
+exports.AppHeader = _AppHeader;
+//# sourceMappingURL=app-header.js.map

package/dist/commonjs/components/app-header/app-header.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"app-header.js","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,yDAAkD;AAClD,sDAAgD;AAEhD,mDAA6C;AAC7C,mDAA6C;AAC7C,yDAAkD;AAalD,SAAS,SAAS,CAChB,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EACrF,GAAiC;IAEjC,MAAM,cAAc,GAAG,OAAO,SAAS,KAAK,QAAQ,IAAI,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IAE9G,OAAO,CACL,uCAAY,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACnG,iCAAK,SAAS,EAAC,sBAAsB,aACnC,uBAAC,+BAAY,IAAC,MAAM,EAAE,EAAE,GAAI,EAC5B,uBAAC,oBAAO,IAAC,WAAW,EAAC,UAAU,GAAG,EAClC,uBAAC,cAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YACzC,uBAAC,cAAI,OAAK,cAAc,EAAE,gBAAgB,EAAC,2BAA2B,YACnE,KAAK,GACD,GACF,IACH,EAEN,gCAAK,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAO,IAC5C,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,IAAA,2BAAU,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAE/B,+BAAS","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { Divider } from '../divider/divider.js';\nimport type { CommonProps, Href, NavigationProps, WithRequired } from '../types.js';\nimport { Link } from '../typography/link.js';\nimport { Text } from '../typography/text.js';\nimport { CimpressLogo } from './cimpress-logo.js';\n\nexport interface AppHeaderTitleLinkProps extends WithRequired<NavigationProps, 'href'> {}\n\nexport interface AppHeaderProps extends CommonProps {\n /** The title displayed in the header, usually the application name. Rendered as an `<h1>` element. */\n title: string;\n /** The props of the link that is rendered around the header title. */\n titleLink: Href | AppHeaderTitleLinkProps;\n /** The tools to render at the end of the header. */\n tools?: ReactNode;\n}\n\nfunction AppHeader(\n { title, titleLink, tools, UNSAFE_className, UNSAFE_style, ...props }: AppHeaderProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };\n\n return (\n <header {...props} ref={ref} className={clsx('cim-app-header', UNSAFE_className)} style={UNSAFE_style}>\n <div className=\"cim-app-header-title\">\n <CimpressLogo height={18} />\n <Divider orientation=\"vertical\" />\n <Text as=\"h1\" variant=\"title-5\" tone=\"base\">\n <Link {...titleLinkProps} UNSAFE_className=\"cim-app-header-title-link\">\n {title}\n </Link>\n </Text>\n </div>\n\n <div className=\"cim-app-header-tools\">{tools}</div>\n </header>\n );\n}\n\n/**\n * Displays a basic application header.\n *\n * See [app header usage guidelines](https://ui.cimpress.io/components/app-header/).\n */\nconst _AppHeader = forwardRef(AppHeader, 'AppHeader');\n\nexport { _AppHeader as AppHeader };\n"]}

package/dist/commonjs/components/app-header/cimpress-logo.d.ts.map ADDED Viewed

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

package/dist/commonjs/components/app-header/cimpress-logo.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"cimpress-logo.js","sourceRoot":"","sources":["../../../../src/components/app-header/cimpress-logo.tsx"],"names":[],"mappings":"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","sourcesContent":["/** @internal */\nexport function CimpressLogo({ width, height }: { width?: number; height?: number }) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 16\" fill=\"none\" width={width} height={height}>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M7.82445 7.32716C7.82445 7.32716 7.1549 7.99671 7.82445 8.66552L9.65352 10.4946C9.65352 10.4946 10.3231 11.1641 10.9919 10.4946L12.8188 8.6677C12.8188 8.6677 13.4883 7.99816 12.8188 7.32862L10.9904 5.50027C10.9904 5.50027 10.3209 4.83073 9.65133 5.50027L7.82445 7.32716Z\"\n fill=\"#F0563A\"\n />\n <mask\n id=\"mask0_246_126\"\n style={{ maskType: 'alpha' }}\n maskUnits=\"userSpaceOnUse\"\n x=\"0\"\n y=\"2\"\n width=\"8\"\n height=\"12\"\n >\n <path d=\"M0 2.5517V13.4427H7.41408V2.5517H0H0Z\" fill=\"white\" />\n </mask>\n <g mask=\"url(#mask0_246_126)\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M7.1165 10.8122L4.29439 7.99012L7.10197 5.18254C7.10197 5.18254 7.77151 4.513 7.10197 3.84345L6.10746 2.84895C6.10746 2.84895 5.43792 2.18013 4.7691 2.84895L0.297476 7.32057C0.297476 7.32057 -0.372068 7.99012 0.297476 8.65966L1.29198 9.65416C1.29198 9.65416 1.29416 9.65562 1.29707 9.65925L4.78364 13.1451C4.78364 13.1451 5.45246 13.8146 6.122 13.1451L7.1165 12.1506C7.1165 12.1506 7.78605 11.4818 7.1165 10.8122Z\"\n fill=\"#3A414C\"\n />\n </g>\n <mask\n id=\"mask1_246_126\"\n style={{ maskType: 'alpha' }}\n maskUnits=\"userSpaceOnUse\"\n x=\"10\"\n y=\"0\"\n width=\"11\"\n height=\"16\"\n >\n <path d=\"M20.6549 0H10.6956V15.99H20.6549V0V0Z\" fill=\"white\" />\n </mask>\n <g mask=\"url(#mask1_246_126)\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M20.3573 7.32819L19.365 6.33514L13.3267 0.296886C13.3267 0.296886 12.6572 -0.371931 11.9876 0.296886L10.9931 1.29212C10.9931 1.29212 10.3236 1.96093 10.9931 2.63048L16.3604 7.99773L10.9982 13.3592C10.9982 13.3592 10.3287 14.0287 10.9982 14.6983L11.9927 15.6928C11.9927 15.6928 12.6615 16.3616 13.3311 15.6928L20.3573 8.66655C20.3573 8.66655 21.0268 7.99774 20.3573 7.32819Z\"\n fill=\"#3A414C\"\n />\n </g>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M23.3056 8.02943V7.99162C23.3056 5.12225 25.4996 2.75958 28.5754 2.75958C30.1508 2.75958 31.2383 3.20958 32.1012 3.95982C32.2699 4.10958 32.3448 4.27823 32.3448 4.44689C32.3448 4.61628 32.2699 4.78494 32.1202 4.95359L31.3328 5.79761C31.1634 5.96627 30.9948 6.06005 30.8261 6.06005C30.6764 6.06005 30.507 5.98517 30.3194 5.83542C29.8324 5.44139 29.3068 5.21603 28.5565 5.21603C27.1316 5.21603 26.119 6.47297 26.119 7.95455V7.99162C26.119 9.5299 27.1127 10.7672 28.6692 10.7672C29.3824 10.7672 29.9261 10.5426 30.451 10.1486C30.6197 10.017 30.7883 9.9421 30.9577 9.9421C31.1264 9.9421 31.295 10.017 31.4637 10.1864L32.158 10.8799C32.3448 11.0675 32.4204 11.255 32.4204 11.4237C32.4204 11.5364 32.3826 11.6679 32.2699 11.7799C31.3699 12.6428 30.3013 13.2244 28.5383 13.2244C25.5185 13.2244 23.3056 10.8988 23.3056 8.02943Z\"\n fill=\"#3A414C\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M32.9921 3.6594C32.9921 3.1905 33.2356 2.94696 33.7045 2.94696H35.1301C35.599 2.94696 35.8425 3.1905 35.8425 3.6594V12.2864C35.8425 12.7553 35.599 12.9996 35.1301 12.9996H33.7045C33.2356 12.9996 32.9921 12.7553 32.9921 12.2864V3.6594Z\"\n fill=\"#3A414C\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M36.8636 3.65936C36.8636 3.19047 37.1079 2.94693 37.576 2.94693H39.0016C39.4705 2.94693 39.7141 3.19047 39.7141 3.65936V4.37253C40.3705 3.52851 41.2334 2.75937 42.6772 2.75937C43.9901 2.75937 44.9846 3.34095 45.5095 4.35363C46.3906 3.32205 47.4411 2.75937 48.81 2.75937C50.9291 2.75937 52.2049 4.03448 52.2049 6.45386V12.2864C52.2049 12.7553 51.9607 12.9995 51.4918 12.9995H50.0669C49.598 12.9995 49.3537 12.7553 49.3537 12.2864V7.39166C49.3537 6.04166 48.754 5.3474 47.6846 5.3474C46.616 5.3474 45.9595 6.04166 45.9595 7.39166V12.2864C45.9595 12.7553 45.716 12.9995 45.2471 12.9995H43.8215C43.3526 12.9995 43.109 12.7553 43.109 12.2864V7.39166C43.109 6.04166 42.5085 5.3474 41.4399 5.3474C40.3705 5.3474 39.7141 6.04166 39.7141 7.39166V12.2864C39.7141 12.7553 39.4705 12.9995 39.0016 12.9995H37.576C37.1079 12.9995 36.8636 12.7553 36.8636 12.2864V3.65936Z\"\n fill=\"#3A414C\"\n />\n <mask\n id=\"mask2_246_126\"\n style={{ maskType: 'alpha' }}\n maskUnits=\"userSpaceOnUse\"\n x=\"53\"\n y=\"2\"\n width=\"11\"\n height=\"14\"\n >\n <path d=\"M53.2376 16H63.7962V2.75909H53.2376V16Z\" fill=\"white\" />\n </mask>\n <g mask=\"url(#mask2_246_126)\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M60.9457 7.99186V7.95406C60.9457 6.28492 59.8203 5.17847 58.4892 5.17847C57.1574 5.17847 56.051 6.28492 56.051 7.95406V7.99186C56.051 9.661 57.1574 10.7675 58.4892 10.7675C59.8203 10.7675 60.9457 9.6799 60.9457 7.99186ZM53.2376 3.65909C53.2376 3.19092 53.4811 2.94665 53.95 2.94665H55.3756C55.8445 2.94665 56.088 3.19092 56.088 3.65909V4.39115C56.7823 3.45336 57.739 2.75909 59.2206 2.75909C61.5644 2.75909 63.7962 4.59761 63.7962 7.95406V7.99186C63.7962 11.349 61.6022 13.1868 59.2206 13.1868C57.7012 13.1868 56.7634 12.4926 56.088 11.6864V15.2871C56.088 15.756 55.8445 16.0002 55.3756 16.0002H53.95C53.4811 16.0002 53.2376 15.756 53.2376 15.2871V3.65909Z\"\n fill=\"#3A414C\"\n />\n </g>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M64.36 3.65937C64.36 3.19047 64.5854 2.94694 65.0725 2.94694H66.4792C66.9481 2.94694 67.2105 3.19047 67.2105 3.65937V4.40961C67.5107 3.65937 68.4296 2.98401 69.6866 2.79718C70.1547 2.72157 70.399 3.02181 70.399 3.49071V4.87851C70.399 5.59167 70.1366 5.68473 69.6299 5.76033C67.811 6.04167 67.2105 7.59812 67.2105 9.30434V12.3053C67.2105 12.7742 66.9481 13.0177 66.4792 13.0177H65.0725C64.5854 13.0177 64.36 12.7742 64.36 12.3053V3.65937Z\"\n fill=\"#3A414C\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M77.1967 7.18541C77.028 5.91029 76.2778 5.04737 75.0775 5.04737C73.8962 5.04737 73.1271 5.89139 72.9017 7.18541H77.1967ZM70.1072 8.02943V7.99162C70.1072 5.12225 72.1522 2.75958 75.0775 2.75958C78.4347 2.75958 79.9723 5.36652 79.9723 8.21699V8.27296C79.9723 8.72296 79.6909 8.96723 79.2409 8.96723H72.9395C73.2208 10.2612 74.1208 10.9366 75.396 10.9366C76.1462 10.9366 76.7278 10.749 77.3283 10.3361C77.5158 10.2045 77.6845 10.1297 77.8531 10.1297C78.0029 10.1297 78.1723 10.2045 78.322 10.3361L78.9225 10.8799C79.1282 11.0486 79.2409 11.2361 79.2409 11.4237C79.2409 11.5553 79.166 11.6868 79.0534 11.7988C78.1534 12.6995 76.9342 13.2244 75.3589 13.2244C72.339 13.2244 70.1072 11.1053 70.1072 8.02943Z\"\n fill=\"#3A414C\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M80.243 12.0802C80.0176 11.9304 79.9049 11.724 79.9049 11.5175C79.9049 11.3859 79.9616 11.2362 80.0554 11.0864L80.5054 10.3922C80.6552 10.1486 80.8435 10.0359 81.0681 10.0359C81.199 10.0359 81.3494 10.0919 81.4992 10.1864C82.3999 10.7113 83.2999 10.9926 84.0691 10.9926C84.8942 10.9926 85.2693 10.6924 85.2693 10.2424V10.2046C85.2693 9.66082 84.5001 9.43619 83.5623 9.15485C83.4497 9.11705 83.3188 9.07924 83.1872 9.04217C81.7805 8.62925 80.187 7.97279 80.187 6.02231V5.98524C80.187 3.94098 81.8372 2.79672 83.8626 2.79672C84.9131 2.79672 86.0377 3.09696 87.0133 3.60294C87.2757 3.73452 87.4073 3.92208 87.4073 4.14744C87.4073 4.2783 87.3506 4.42878 87.2757 4.57854L86.8635 5.30988C86.7131 5.57231 86.5255 5.7039 86.3009 5.7039C86.1882 5.7039 86.0377 5.66609 85.8879 5.59122C85.1188 5.2161 84.3875 4.99146 83.8066 4.99146C83.1123 4.99146 82.7561 5.29097 82.7561 5.685V5.7228C82.7561 6.28548 83.7128 6.54791 84.8004 6.92303C86.2071 7.39193 87.8384 8.06657 87.8384 9.90509V9.94216C87.8384 12.174 86.1693 13.1867 83.9934 13.1867C82.775 13.1867 81.4432 12.8304 80.243 12.0802Z\"\n fill=\"#3A414C\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M88.2829 12.0802C88.0575 11.9304 87.9456 11.724 87.9456 11.5175C87.9456 11.3859 88.0015 11.2362 88.0953 11.0864L88.5453 10.3922C88.6958 10.1486 88.8834 10.0359 89.108 10.0359C89.2396 10.0359 89.3893 10.0919 89.5398 10.1864C90.4398 10.7113 91.3398 10.9926 92.1089 10.9926C92.9341 10.9926 93.3092 10.6924 93.3092 10.2424V10.2046C93.3092 9.66082 92.54 9.43619 91.6022 9.15485C91.4896 9.11705 91.3587 9.07924 91.2279 9.04217C89.8212 8.62925 88.2269 7.97279 88.2269 6.02231V5.98524C88.2269 3.94098 89.8771 2.79672 91.9025 2.79672C92.953 2.79672 94.0776 3.09696 95.0532 3.60294C95.3156 3.73452 95.4472 3.92208 95.4472 4.14744C95.4472 4.2783 95.3905 4.42878 95.3156 4.57854L94.9034 5.30988C94.753 5.57231 94.5654 5.7039 94.3408 5.7039C94.2281 5.7039 94.0776 5.66609 93.9278 5.59122C93.1594 5.2161 92.4274 4.99146 91.8465 4.99146C91.1522 4.99146 90.796 5.29097 90.796 5.685V5.7228C90.796 6.28548 91.7527 6.54791 92.8403 6.92303C94.247 7.39193 95.8783 8.06657 95.8783 9.90509V9.94216C95.8783 12.174 94.2092 13.1867 92.0341 13.1867C90.8149 13.1867 89.4831 12.8304 88.2829 12.0802Z\"\n fill=\"#3A414C\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M96.4204 3.30818H95.8788V2.94687H97.3538V3.30818H96.8122V4.72796H96.4204V3.30818Z\"\n fill=\"#3A414C\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M97.6551 2.94687H98.0775L98.5457 3.70002L99.0138 2.94687H99.4362V4.72796H99.0466V3.56552L98.5457 4.32594H98.5355L98.039 3.57279V4.72796H97.6551V2.94687Z\"\n fill=\"#3A414C\"\n />\n </svg>\n );\n}\n"]}

package/dist/commonjs/components/app-header/simple-auth-tool.d.ts ADDED Viewed

@@ -0,0 +1,29 @@
+declare const ACCOUNT_CLAIM = "https://claims.cimpress.io/account";
+/** Represents the profile data of the currently logged in user. */
+export interface SimpleAuthProfile {
+    /** The user's full name. */
+    name?: string;
+    /** The user's email address. */
+    email?: string;
+    /** A URL to the user's avatar. */
+    picture?: string;
+    /** The ID of the account associated with the user. */
+    [ACCOUNT_CLAIM]?: string;
+}
+export interface SimpleAuthToolProps {
+    /** The profile data of the currently logged in user. */
+    profile?: SimpleAuthProfile;
+    /** The name of the account associated with the user. */
+    accountName?: string;
+    /** A function called when the user requests to log in. */
+    onLoginRequested: () => void;
+    /** A function called when the user requests to log out. */
+    onLogoutRequested: () => void;
+}
+/** A header tool for simple authentication. */
+export declare function SimpleAuthTool({ profile, accountName, onLoginRequested, onLogoutRequested }: SimpleAuthToolProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SimpleAuthTool {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=simple-auth-tool.d.ts.map

package/dist/commonjs/components/app-header/simple-auth-tool.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"simple-auth-tool.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/simple-auth-tool.tsx"],"names":[],"mappings":"AAUA,QAAA,MAAM,aAAa,uCAAuC,CAAC;AAG3D,mEAAmE;AACnE,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,mBAAmB;IAClC,wDAAwD;IACxD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,2DAA2D;IAC3D,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,+CAA+C;AAC/C,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,EAAE,mBAAmB,2CAgDhH;yBAhDe,cAAc"}

package/dist/commonjs/components/app-header/simple-auth-tool.js ADDED Viewed

@@ -0,0 +1,31 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleAuthTool = SimpleAuthTool;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_aria_components_1 = require("react-aria-components");
+const localization_provider_js_1 = require("../../i18n/localization-provider.js");
+const button_js_1 = require("../button/button.js");
+const popover_js_1 = require("../popover/popover.js");
+const stack_js_1 = require("../spacing/stack/stack.js");
+const link_js_1 = require("../typography/link.js");
+const text_js_1 = require("../typography/text.js");
+const ACCOUNT_CLAIM = 'https://claims.cimpress.io/account';
+const ACCOUNTS_MANAGEMENT_DASHBOARD_URL = 'https://access.cimpress.io/account-management/accounts';
+/** A header tool for simple authentication. */
+function SimpleAuthTool({ profile, accountName, onLoginRequested, onLogoutRequested }) {
+    const messages = (0, localization_provider_js_1.useLocalizedMessages)('simpleAuthTool');
+    if (!profile) {
+        return ((0, jsx_runtime_1.jsx)(button_js_1.Button, { size: "small", onPress: onLoginRequested, children: messages.format('logIn') }));
+    }
+    const { name = messages.format('unknownUser'), email, picture, [ACCOUNT_CLAIM]: account } = profile;
+    return ((0, jsx_runtime_1.jsxs)(popover_js_1.PopoverRoot, { children: [(0, jsx_runtime_1.jsx)(Trigger, { name: name, picture: picture }), (0, jsx_runtime_1.jsx)(popover_js_1.Popover, { "aria-label": messages.format('profileDetails', { userFullName: name }), placement: "bottom right", UNSAFE_className: "cim-simple-auth-tool-popover", children: (0, jsx_runtime_1.jsxs)(stack_js_1.Stack, { gap: 16, align: "center", margin: 12, children: [(0, jsx_runtime_1.jsx)(Avatar, { picture: picture }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "p", variant: "body-semibold", tone: "base", children: name }), (0, jsx_runtime_1.jsxs)(stack_js_1.Stack, { gap: 4, align: "center", children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", tone: "base", children: email }), account && accountName && ((0, jsx_runtime_1.jsx)(link_js_1.Link, { href: `${ACCOUNTS_MANAGEMENT_DASHBOARD_URL}/${account}`, target: "_blank", rel: "noreferrer", variant: "medium", children: accountName }))] }), (0, jsx_runtime_1.jsx)(button_js_1.Button, { tone: "critical", onPress: onLogoutRequested, children: messages.format('logOut') })] }) })] }));
+}
+SimpleAuthTool.displayName = 'SimpleAuthTool';
+function Trigger({ name, picture }) {
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: "cim-simple-auth-tool-trigger", "aria-label": name, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", tone: "base", children: name }), (0, jsx_runtime_1.jsx)(Avatar, { picture: picture })] }));
+}
+function Avatar({ picture }) {
+    return (0, jsx_runtime_1.jsx)("img", { src: picture, alt: "", className: "cim-simple-auth-tool-avatar" });
+}
+//# sourceMappingURL=simple-auth-tool.js.map

package/dist/commonjs/components/app-header/simple-auth-tool.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"simple-auth-tool.js","sourceRoot":"","sources":["../../../../src/components/app-header/simple-auth-tool.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAqCb,wCAgDC;;AAnFD,iEAA4D;AAC5D,kFAA2E;AAC3E,mDAA6C;AAC7C,sDAA6D;AAC7D,wDAAkD;AAClD,mDAA6C;AAC7C,mDAA6C;AAE7C,MAAM,aAAa,GAAG,oCAAoC,CAAC;AAC3D,MAAM,iCAAiC,GAAG,wDAAwD,CAAC;AAyBnG,+CAA+C;AAC/C,SAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,iBAAiB,EAAuB;IAC/G,MAAM,QAAQ,GAAG,IAAA,+CAAoB,EAAC,gBAAgB,CAAC,CAAC;IAExD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CACL,uBAAC,kBAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,gBAAgB,YAC3C,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,GAClB,CACV,CAAC;IACJ,CAAC;IAED,MAAM,EAAE,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;IAEpG,OAAO,CACL,wBAAC,wBAAW,eACV,uBAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,EACzC,uBAAC,oBAAO,kBACM,QAAQ,CAAC,MAAM,CAAC,gBAAgB,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,EACrE,SAAS,EAAC,cAAc,EACxB,gBAAgB,EAAC,8BAA8B,YAE/C,wBAAC,gBAAK,IAAC,GAAG,EAAE,EAAE,EAAE,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAE,EAAE,aACvC,uBAAC,MAAM,IAAC,OAAO,EAAE,OAAO,GAAI,EAC5B,uBAAC,cAAI,IAAC,EAAE,EAAC,GAAG,EAAC,OAAO,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,YAC7C,IAAI,GACA,EACP,wBAAC,gBAAK,IAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,QAAQ,aAC3B,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,YACzC,KAAK,GACD,EACN,OAAO,IAAI,WAAW,IAAI,CACzB,uBAAC,cAAI,IACH,IAAI,EAAE,GAAG,iCAAiC,IAAI,OAAO,EAAE,EACvD,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,OAAO,EAAC,QAAQ,YAEf,WAAW,GACP,CACR,IACK,EACR,uBAAC,kBAAM,IAAC,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,iBAAiB,YAC/C,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,GACnB,IACH,GACA,IACE,CACf,CAAC;AACJ,CAAC;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAE9C,SAAS,OAAO,CAAC,EAAE,IAAI,EAAE,OAAO,EAAsC;IACpE,OAAO,CACL,wBAAC,8BAAS,IAAC,SAAS,EAAC,8BAA8B,gBAAa,IAAI,aAClE,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,YACzC,IAAI,GACA,EACP,uBAAC,MAAM,IAAC,OAAO,EAAE,OAAO,GAAI,IAClB,CACb,CAAC;AACJ,CAAC;AAED,SAAS,MAAM,CAAC,EAAE,OAAO,EAAwB;IAC/C,OAAO,gCAAK,GAAG,EAAE,OAAO,EAAE,GAAG,EAAC,EAAE,EAAC,SAAS,EAAC,6BAA6B,GAAG,CAAC;AAC9E,CAAC","sourcesContent":["'use client';\n\nimport { Button as RACButton } from 'react-aria-components';\nimport { useLocalizedMessages } from '../../i18n/localization-provider.js';\nimport { Button } from '../button/button.js';\nimport { Popover, PopoverRoot } from '../popover/popover.js';\nimport { Stack } from '../spacing/stack/stack.js';\nimport { Link } from '../typography/link.js';\nimport { Text } from '../typography/text.js';\n\nconst ACCOUNT_CLAIM = 'https://claims.cimpress.io/account';\nconst ACCOUNTS_MANAGEMENT_DASHBOARD_URL = 'https://access.cimpress.io/account-management/accounts';\n\n/** Represents the profile data of the currently logged in user. */\nexport interface SimpleAuthProfile {\n /** The user's full name. */\n name?: string;\n /** The user's email address. */\n email?: string;\n /** A URL to the user's avatar. */\n picture?: string;\n /** The ID of the account associated with the user. */\n [ACCOUNT_CLAIM]?: string;\n}\n\nexport interface SimpleAuthToolProps {\n /** The profile data of the currently logged in user. */\n profile?: SimpleAuthProfile;\n /** The name of the account associated with the user. */\n accountName?: string;\n /** A function called when the user requests to log in. */\n onLoginRequested: () => void;\n /** A function called when the user requests to log out. */\n onLogoutRequested: () => void;\n}\n\n/** A header tool for simple authentication. */\nexport function SimpleAuthTool({ profile, accountName, onLoginRequested, onLogoutRequested }: SimpleAuthToolProps) {\n const messages = useLocalizedMessages('simpleAuthTool');\n\n if (!profile) {\n return (\n <Button size=\"small\" onPress={onLoginRequested}>\n {messages.format('logIn')}\n </Button>\n );\n }\n\n const { name = messages.format('unknownUser'), email, picture, [ACCOUNT_CLAIM]: account } = profile;\n\n return (\n <PopoverRoot>\n <Trigger name={name} picture={picture} />\n <Popover\n aria-label={messages.format('profileDetails', { userFullName: name })}\n placement=\"bottom right\"\n UNSAFE_className=\"cim-simple-auth-tool-popover\"\n >\n <Stack gap={16} align=\"center\" margin={12}>\n <Avatar picture={picture} />\n <Text as=\"p\" variant=\"body-semibold\" tone=\"base\">\n {name}\n </Text>\n <Stack gap={4} align=\"center\">\n <Text as=\"span\" variant=\"medium\" tone=\"base\">\n {email}\n </Text>\n {account && accountName && (\n <Link\n href={`${ACCOUNTS_MANAGEMENT_DASHBOARD_URL}/${account}`}\n target=\"_blank\"\n rel=\"noreferrer\"\n variant=\"medium\"\n >\n {accountName}\n </Link>\n )}\n </Stack>\n <Button tone=\"critical\" onPress={onLogoutRequested}>\n {messages.format('logOut')}\n </Button>\n </Stack>\n </Popover>\n </PopoverRoot>\n );\n}\n\nSimpleAuthTool.displayName = 'SimpleAuthTool';\n\nfunction Trigger({ name, picture }: { name: string; picture?: string }) {\n return (\n <RACButton className=\"cim-simple-auth-tool-trigger\" aria-label={name}>\n <Text as=\"span\" variant=\"medium\" tone=\"base\">\n {name}\n </Text>\n <Avatar picture={picture} />\n </RACButton>\n );\n}\n\nfunction Avatar({ picture }: { picture?: string }) {\n return <img src={picture} alt=\"\" className=\"cim-simple-auth-tool-avatar\" />;\n}\n"]}

package/dist/commonjs/components/card/card.d.ts CHANGED Viewed

@@ -1,32 +1,60 @@
 import type { ReactNode } from 'react';
 import type { CommonProps } from '../types.js';
-export interface UNSTABLE_CardProps extends CommonProps {
+export interface CardProps extends CommonProps {
+    /** The contents of the card. */
     children: ReactNode;
-    variant?: 'bordered' | 'borderless';
 }
 /**
  * Groups related blocks of content into a single unit.
  *
  * See [card usage guidelines](https://ui.cimpress.io/components/card/).
  */
-declare const _UNSTABLE_Card: (props: UNSTABLE_CardProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
-export { _UNSTABLE_Card as UNSTABLE_Card };
-export interface UNSTABLE_CardContentProps extends CommonProps {
+declare const _Card: (props: CardProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Card as Card };
+export interface CardContentProps extends CommonProps {
+    /** The content of this block. */
     children: ReactNode;
+    /**
+     * Whether the block's content should stretch to the edges of the block.
+     * @default false
+     */
     fullBleed?: boolean;
 }
-export declare function UNSTABLE_CardContent({ children, UNSAFE_className, UNSAFE_style, fullBleed, ...props }: UNSTABLE_CardContentProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace UNSTABLE_CardContent {
+/** Renders a single block of content within `Card`. */
+export declare function CardContent({ children, UNSAFE_className, UNSAFE_style, fullBleed, ...props }: CardContentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CardContent {
     var displayName: string;
 }
-export interface UNSTABLE_CardHeaderProps extends CommonProps {
+export interface CardHeaderProps extends CommonProps {
+    /** The icon to display at the start of the header. */
     iconStart?: ReactNode;
-    title: string;
-    description?: string;
-    menu?: ReactNode;
+    /**
+     * The title of the card. Optionally, you can pass a React node to render a link.
+     *
+     * @example
+     * <CardHeader title="Card title" />
+     * <CardHeader title={<Link href="#">Card title</Link>} />
+     */
+    title: ReactNode;
+    /**
+     * The description of the card. Optionally, you can pass a React node to render rich text.
+     *
+     * @example
+     * <CardHeader title="Card title" description="Card subtitle" />
+     * <CardHeader title="Card title" description={<Link href="#">Card subtitle</Link>} />
+     */
+    description?: ReactNode;
+    /**
+     * The tools to render at the end of the header. Usually a menu, icon button, or badge. For buttons, use the "small" size variant.
+     *
+     * @example
+     * <CardHeader title="Card title" tools={<IconButton size="small" icon={<IconRatingStar />} aria-label="Favorite" />} />
+     */
+    tools?: ReactNode;
 }
-export declare function UNSTABLE_CardHeader({ UNSAFE_className, UNSAFE_style, iconStart, title, description, menu, ...props }: UNSTABLE_CardHeaderProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace UNSTABLE_CardHeader {
+/** Renders a header within a `Card`. */
+export declare function CardHeader({ UNSAFE_className, UNSAFE_style, iconStart, title, description, tools, ...props }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CardHeader {
     var displayName: string;
 }
 //# sourceMappingURL=card.d.ts.map

package/dist/commonjs/components/card/card.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAMrD~~,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,~~kBAAmB~~,SAAQ,WAAW;~~IACrD~~,QAAQ,EAAE,SAAS,CAAC;~~IACpB,OAAO,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC~~;~~CACrC;AAmBD~~;;;;GAIG;AACH,QAAA,MAAM,~~cAAc~~,~~oKAAoD~~,CAAC;~~AAEzE~~,OAAO,EAAE,~~cAAc~~,IAAI,~~aAAa~~,EAAE,CAAC;~~AAE3C~~,MAAM,WAAW,~~yBAA0B~~,SAAQ,WAAW;~~IAC5D~~,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,~~oBAAoB~~,CAAC,~~EACnC~~,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,SAAiB,EACjB,GAAG,KAAK,EACT,EAAE,~~yBAAyB~~,~~2CAW3B~~;yBAjBe,~~oBAAoB~~;;;~~AAqBpC~~,MAAM,WAAW,~~wBAAyB~~,SAAQ,WAAW;~~IAC3D~~,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,EAAE,~~MAAM~~,CAAC;~~IACd~~,WAAW,CAAC,EAAE,~~MAAM~~,CAAC;~~IACrB~~,~~IAAI~~,CAAC,EAAE,SAAS,CAAC;~~CAClB~~;AAED,wBAAgB,~~mBAAmB~~,CAAC,~~EAClC~~,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,KAAK,EACL,WAAW,EACX,~~IAAI~~,~~EACJ~~,GAAG,KAAK,EACT,EAAE,~~wBAAwB~~,~~2CAuB1B~~;~~yBA/Be~~,~~mBAAmB~~"}
1	+ {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAUD;;;;GAIG;AACH,QAAA,MAAM,KAAK,2JAA2C,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;AAEzB,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,iCAAiC;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,uDAAuD;AACvD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,SAAiB,EACjB,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAWlB;yBAjBe,WAAW;;;AAqB3B,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,sDAAsD;IACtD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,wCAAwC;AACxC,wBAAgB,UAAU,CAAC,EACzB,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,KAAK,EACL,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,2CAmBjB;yBA3Be,UAAU"}

package/dist/commonjs/components/card/card.js CHANGED Viewed

@@ -1,35 +1,35 @@
+'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.UNSTABLE_Card = void 0;
-exports.UNSTABLE_CardContent = UNSTABLE_CardContent;
-exports.UNSTABLE_CardHeader = UNSTABLE_CardHeader;
+exports.Card = void 0;
+exports.CardContent = CardContent;
+exports.CardHeader = CardHeader;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
 const forward_ref_js_1 = require("../../forward-ref.js");
-const index_js_1 = require("../../icons/index.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
-const icon_button_js_1 = require("../button/icon-button.js");
-const menu_js_1 = require("../menu/menu.js");
 const text_js_1 = require("../typography/text.js");
-function UNSTABLE_Card({ children, variant = 'bordered', UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, className: (0, clsx_1.default)('cim-card', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, children: children }));
+function Card({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, className: (0, clsx_1.default)('cim-card', UNSAFE_className), style: UNSAFE_style, children: children }));
 }
 /**
  * Groups related blocks of content into a single unit.
  *
  * See [card usage guidelines](https://ui.cimpress.io/components/card/).
  */
-const _UNSTABLE_Card = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_Card), 'Card');
-exports.UNSTABLE_Card = _UNSTABLE_Card;
-function UNSTABLE_CardContent({ children, UNSAFE_className, UNSAFE_style, fullBleed = false, ...props }) {
+const _Card = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Card), 'Card');
+exports.Card = _Card;
+/** Renders a single block of content within `Card`. */
+function CardContent({ children, UNSAFE_className, UNSAFE_style, fullBleed = false, ...props }) {
     return ((0, jsx_runtime_1.jsx)("div", { ...props, className: (0, clsx_1.default)('cim-card-content', UNSAFE_className), style: UNSAFE_style, "data-full-bleed": fullBleed || undefined, children: children }));
 }
-UNSTABLE_CardContent.displayName = 'CardContent';
-function UNSTABLE_CardHeader({ UNSAFE_className, UNSAFE_style, iconStart, title, description, menu, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, clsx_1.default)('cim-card-header', 'cim-card-content', UNSAFE_className), style: UNSAFE_style, children: [iconStart, (0, jsx_runtime_1.jsxs)("div", { className: "cim-card-header-text", children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "h2", variant: "body-semibold", tone: "base", children: title }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "small", tone: "subtle", children: description })] }), menu && ((0, jsx_runtime_1.jsxs)(menu_js_1.MenuRoot, { children: [(0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { variant: "tertiary", size: "small", icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenuMoreHorizontal, {}), "aria-label": "Actions" }), menu] }))] }));
+CardContent.displayName = 'CardContent';
+/** Renders a header within a `Card`. */
+function CardHeader({ UNSAFE_className, UNSAFE_style, iconStart, title, description, tools, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, clsx_1.default)('cim-card-header', 'cim-card-content', UNSAFE_className), style: UNSAFE_style, children: [iconStart, (0, jsx_runtime_1.jsxs)("div", { className: "cim-card-header-text", children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "h2", variant: "body-semibold", tone: "base", children: title }), description && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "p", variant: "small", tone: "subtle", children: description }))] }), (0, jsx_runtime_1.jsx)("div", { className: "cim-card-header-tools", children: tools })] }));
 }
-UNSTABLE_CardHeader.displayName = 'CardHeader';
+CardHeader.displayName = 'CardHeader';
 //# sourceMappingURL=card.js.map

package/dist/commonjs/components/card/card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"~~;;;;;;AA8CA~~,~~oDAiBC~~;~~AAWD~~,~~kDA+BC~~;;~~AAzGD~~,gDAAwB;AAExB,yDAAkD;AAClD,~~mDAA8D;AAC9D,~~mEAA2D;~~AAC3D~~,~~6DAAsD;AACtD,6CAA2C;AAE3C,~~mDAA6C;AAO7C,SAAS,~~aAAa~~,~~CACpB~~,EAAE,QAAQ,EAAE,~~OAAO,GAAG,UAAU,EAAE,~~gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,~~EAAsB~~,~~EAChG~~,GAAiC;~~IAEjC~~,OAAO,CACL,~~mCACM~~,KAAK,~~EACT~~,GAAG,EAAE,GAAG,~~EACR~~,SAAS,EAAE,IAAA,cAAI,EAAC,UAAU,EAAE,gBAAgB,CAAC,~~EAC7C~~,KAAK,EAAE,YAAY,~~kBACL~~,~~OAAO,YAEpB,~~QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,~~cAAc~~,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,~~aAAa~~,CAAC,EAAE,MAAM,CAAC,CAAC;~~AAE9C~~,~~uCAAa~~;~~AAOxC~~,SAAgB,~~oBAAoB~~,CAAC,~~EACnC~~,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,~~EACkB~~;~~IAC1B~~,OAAO,CACL,mCACM,KAAK,EACT,SAAS,EAAE,IAAA,cAAI,EAAC,kBAAkB,EAAE,gBAAgB,CAAC,EACrD,KAAK,EAAE,YAAY,qBACF,SAAS,IAAI,SAAS,YAEtC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,~~oBAAoB~~,CAAC,WAAW,GAAG,aAAa,CAAC;~~AASjD~~,SAAgB,~~mBAAmB~~,CAAC,~~EAClC~~,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,KAAK,EACL,WAAW,EACX,~~IAAI~~,~~EACJ~~,GAAG,KAAK,~~EACiB~~;~~IACzB~~,OAAO,CACL,oCAAS,KAAK,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,kBAAkB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC1G,SAAS,EAEV,iCAAK,SAAS,EAAC,sBAAsB,aACnC,uBAAC,cAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,YAC9C,KAAK,GACD,~~EACP~~,uBAAC,cAAI,IAAC,EAAE,EAAC,~~MAAM~~,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,~~YAC1C~~,WAAW,GACP,~~IACH~~,~~EAEL~~,~~IAAI~~,~~IAAI~~,~~CACP~~,~~wBAAC,kBAAQ,eAEP,uBAAC,2BAAU,IAAC,OAAO,~~EAAC,~~UAAU~~,~~EAAC~~,~~IAAI~~,~~EAAC~~,~~OAAO~~,~~EAAC,IAAI,EAAE,uBAAC,iCAAsB,KAAG,gBAAa,SAAS,GAAG,EACpG,IAAI,IACI,CACZ,IACG,~~CACP,CAAC;AACJ,CAAC;AAED,~~mBAAmB~~,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["~~import~~ clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { ~~IconMenuMoreHorizontal } from '../../icons/index.js';\nimport {~~ withStyleProps } from '../../with-style-props.js';\nimport ~~{ IconButton } from '../button/icon-button.js';\nimport { MenuRoot } from '../menu/menu.js';\nimport~~ type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface ~~UNSTABLE_CardProps~~ extends CommonProps {\n children: ReactNode;\n ~~variant?: 'bordered' \| 'borderless';\n~~}\n\nfunction ~~UNSTABLE_Card~~(\n { children, ~~variant = 'bordered',~~ UNSAFE_className, UNSAFE_style, ...props }: ~~UNSTABLE_CardProps,\n~~ ref: ForwardedRef<HTMLDivElement~~>,\n~~) {\n return (\n <div\n {...props}\n ref={ref}\n className={clsx('cim-card', UNSAFE_className)}\n style={UNSAFE_style}~~\n data-variant={variant}\n~~ >\n {children}\n </div>\n );\n}\n\n/*\n Groups related blocks of content into a single unit.\n \n See [card usage guidelines](https://ui.cimpress.io/components/card/).\n /\nconst ~~_UNSTABLE_Card~~ = withStyleProps(forwardRef(~~UNSTABLE_Card~~), 'Card');\n\nexport { ~~_UNSTABLE_Card~~ as ~~UNSTABLE_Card~~ };\n\nexport interface ~~UNSTABLE_CardContentProps~~ extends CommonProps {\n children: ReactNode;\n fullBleed?: boolean;\n}\n\nexport function ~~UNSTABLE_CardContent~~({\n children,\n UNSAFE_className,\n UNSAFE_style,\n fullBleed = false,\n ...props\n}: ~~UNSTABLE_CardContentProps~~) {\n return (\n <div\n {...props}\n className={clsx('cim-card-content', UNSAFE_className)}\n style={UNSAFE_style}\n data-full-bleed={fullBleed \|\| undefined}\n >\n {children}\n </div>\n );\n}\n\~~nUNSTABLE_CardContent~~.displayName = 'CardContent';\n\nexport interface ~~UNSTABLE_CardHeaderProps~~ extends CommonProps {\n iconStart?: ReactNode;\n title: ~~string~~;\n description?: ~~string~~;\n menu?: ReactNode;\n}\n\nexport function ~~UNSTABLE_CardHeader~~({\n UNSAFE_className,\n UNSAFE_style,\n iconStart,\n title,\n description,\n ~~menu~~,\n ...props\n}: ~~UNSTABLE_CardHeaderProps~~) {\n return (\n <div {...props} className={clsx('cim-card-header', 'cim-card-content', UNSAFE_className)} style={UNSAFE_style}>\n {iconStart}\n\n <div className=\"cim-card-header-text\">\n <Text as=\"h2\" variant=\"body-semibold\" tone=\"base\">\n {title}\n </Text>\n <Text as=\"~~span~~\" variant=\"small\" tone=\"subtle\">\n {description}\n </Text>\n </div>\n\n ~~{menu && (\n~~ <MenuRoot>\n {/ ~~TODO: i18n */}\n <IconButton variant~~=\"~~tertiary\" size=\"small\" icon={<IconMenuMoreHorizontal />} aria~~-~~label=\"Actions~~\" ~~/>\n~~ {~~menu~~}\n </~~MenuRoot~~>\n ~~)}\n~~ </div>\n );\n}\n\~~nUNSTABLE_CardHeader~~.displayName = 'CardHeader';\n"]}
1	+ {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AA0Cb,kCAiBC;AAiCD,gCA2BC;;AArHD,gDAAwB;AAExB,yDAAkD;AAClD,mEAA2D;AAE3D,mDAA6C;AAO7C,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAa,EAAE,GAAiC;IAChH,OAAO,CACL,mCAAS,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,UAAU,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACzF,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,KAAK,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AAErC,qBAAI;AAYtB,uDAAuD;AACvD,SAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACS;IACjB,OAAO,CACL,mCACM,KAAK,EACT,SAAS,EAAE,IAAA,cAAI,EAAC,kBAAkB,EAAE,gBAAgB,CAAC,EACrD,KAAK,EAAE,YAAY,qBACF,SAAS,IAAI,SAAS,YAEtC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AA8BxC,wCAAwC;AACxC,SAAgB,UAAU,CAAC,EACzB,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,KAAK,EACL,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ;IAChB,OAAO,CACL,oCAAS,KAAK,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,kBAAkB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC1G,SAAS,EAEV,iCAAK,SAAS,EAAC,sBAAsB,aACnC,uBAAC,cAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,YAC9C,KAAK,GACD,EACN,WAAW,IAAI,CACd,uBAAC,cAAI,IAAC,EAAE,EAAC,GAAG,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,YACvC,WAAW,GACP,CACR,IACG,EAEN,gCAAK,SAAS,EAAC,uBAAuB,YAAE,KAAK,GAAO,IAChD,CACP,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface CardProps extends CommonProps {\n /** The contents of the card. /\n children: ReactNode;\n}\n\nfunction Card({ children, UNSAFE_className, UNSAFE_style, ...props }: CardProps, ref: ForwardedRef<HTMLDivElement>) {\n return (\n <div {...props} ref={ref} className={clsx('cim-card', UNSAFE_className)} style={UNSAFE_style}>\n {children}\n </div>\n );\n}\n\n/\n Groups related blocks of content into a single unit.\n \n See [card usage guidelines](https://ui.cimpress.io/components/card/).\n /\nconst _Card = withStyleProps(forwardRef(Card), 'Card');\n\nexport { _Card as Card };\n\nexport interface CardContentProps extends CommonProps {\n /* The content of this block. /\n children: ReactNode;\n /\n Whether the block's content should stretch to the edges of the block.\n * @default false\n /\n fullBleed?: boolean;\n}\n\n/* Renders a single block of content within `Card`. /\nexport function CardContent({\n children,\n UNSAFE_className,\n UNSAFE_style,\n fullBleed = false,\n ...props\n}: CardContentProps) {\n return (\n <div\n {...props}\n className={clsx('cim-card-content', UNSAFE_className)}\n style={UNSAFE_style}\n data-full-bleed={fullBleed \|\| undefined}\n >\n {children}\n </div>\n );\n}\n\nCardContent.displayName = 'CardContent';\n\nexport interface CardHeaderProps extends CommonProps {\n /* The icon to display at the start of the header. /\n iconStart?: ReactNode;\n /\n The title of the card. Optionally, you can pass a React node to render a link.\n \n @example\n * <CardHeader title=\"Card title\" />\n * <CardHeader title={<Link href=\"#\">Card title</Link>} />\n /\n title: ReactNode;\n /\n The description of the card. Optionally, you can pass a React node to render rich text.\n \n @example\n * <CardHeader title=\"Card title\" description=\"Card subtitle\" />\n * <CardHeader title=\"Card title\" description={<Link href=\"#\">Card subtitle</Link>} />\n /\n description?: ReactNode;\n /\n The tools to render at the end of the header. Usually a menu, icon button, or badge. For buttons, use the \"small\" size variant.\n \n @example\n * <CardHeader title=\"Card title\" tools={<IconButton size=\"small\" icon={<IconRatingStar />} aria-label=\"Favorite\" />} />\n /\n tools?: ReactNode;\n}\n\n/* Renders a header within a `Card`. */\nexport function CardHeader({\n UNSAFE_className,\n UNSAFE_style,\n iconStart,\n title,\n description,\n tools,\n ...props\n}: CardHeaderProps) {\n return (\n <div {...props} className={clsx('cim-card-header', 'cim-card-content', UNSAFE_className)} style={UNSAFE_style}>\n {iconStart}\n\n <div className=\"cim-card-header-text\">\n <Text as=\"h2\" variant=\"body-semibold\" tone=\"base\">\n {title}\n </Text>\n {description && (\n <Text as=\"p\" variant=\"small\" tone=\"subtle\">\n {description}\n </Text>\n )}\n </div>\n\n <div className=\"cim-card-header-tools\">{tools}</div>\n </div>\n );\n}\n\nCardHeader.displayName = 'CardHeader';\n"]}

package/dist/commonjs/components/checkbox/checkbox.js CHANGED Viewed

@@ -20,7 +20,7 @@ function Checkbox({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
             console.warn('Checkbox requires one of children / aria-label / aria-labelledby for accessibility');
         }
     }, [children, ariaLabel, ariaLabelledBy]);
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Checkbox, { ...props, ref: ref, className: (0, clsx_1.default)('cim-checkbox', UNSAFE_className), style: UNSAFE_style, children: ({ isIndeterminate }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-checkbox-toggle-wrapper", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-checkbox-toggle", children: isIndeterminate ? (0, jsx_runtime_1.jsx)(index_js_1.IconSubtractBold, {}) : (0, jsx_runtime_1.jsx)(index_js_1.IconCheckBold, {}) }) }), children && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "body", children: children }))] })) }));
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Checkbox, { ...props, ref: ref, className: (0, clsx_1.default)('cim-checkbox', UNSAFE_className), style: UNSAFE_style, children: ({ isIndeterminate }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-checkbox-toggle-wrapper", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-checkbox-toggle", children: isIndeterminate ? (0, jsx_runtime_1.jsx)(index_js_1.IconSubtractBold, {}) : (0, jsx_runtime_1.jsx)(index_js_1.IconCheckBold, {}) }) }), children && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", children: children }))] })) }));
 }
 /**
  * Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.

package/dist/commonjs/components/checkbox/checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAwG;AACxG,yDAAkD;AAClD,mDAAuE;AACvE,qFAA6E;AAC7E,mEAA2D;AAE3D,mDAA6C;AAuB7C,SAAS,QAAQ,CACf,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAiB,EACrE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,uBAAC,gCAAW,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,cAAc,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACrG,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CACxB,6DACE,gCAAK,SAAS,EAAC,6BAA6B,YAC1C,gCAAK,SAAS,EAAC,qBAAqB,YAAE,eAAe,CAAC,CAAC,CAAC,uBAAC,2BAAgB,KAAG,CAAC,CAAC,CAAC,uBAAC,wBAAa,KAAG,GAAO,GACnG,EACL,QAAQ,IAAI,CACX,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,~~MAAM~~,~~YAC3B~~,QAAQ,GACJ,CACR,IACA,CACJ,GACW,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C,6BAAQ","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Checkbox as RACCheckbox, type CheckboxProps as RACCheckboxProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconSubtractBold } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface CheckboxProps\n extends CommonProps,\n AriaLabelingProps,\n Pick<\n RACCheckboxProps,\n \| 'onChange'\n \| 'isSelected'\n \| 'isIndeterminate'\n \| 'isDisabled'\n \| 'isReadOnly'\n \| 'isRequired'\n \| 'isInvalid'\n \| 'name'\n \| 'value'\n \| 'defaultSelected'\n \| 'autoFocus'\n > {\n /** The label rendered next to the checkbox. /\n children?: StringLikeChildren;\n}\n\nfunction Checkbox(\n { children, UNSAFE_className, UNSAFE_style, ...props }: CheckboxProps,\n ref: ForwardedRef<HTMLLabelElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!children && !ariaLabel && !ariaLabelledBy) {\n console.warn('Checkbox requires one of children / aria-label / aria-labelledby for accessibility');\n }\n }, [children, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACCheckbox {...props} ref={ref} className={clsx('cim-checkbox', UNSAFE_className)} style={UNSAFE_style}>\n {({ isIndeterminate }) => (\n <>\n <div className=\"cim-checkbox-toggle-wrapper\">\n <div className=\"cim-checkbox-toggle\">{isIndeterminate ? <IconSubtractBold /> : <IconCheckBold />}</div>\n </div>\n {children && (\n <Text as=\"span\" variant=\"~~body~~\">\n {children}\n </Text>\n )}\n </>\n )}\n </RACCheckbox>\n );\n}\n\n/\n Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.\n \n See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).\n */\nconst _Checkbox = withStyleProps(forwardRef(Checkbox), 'Checkbox');\n\nexport { _Checkbox as Checkbox };\n"]}
1	+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAwG;AACxG,yDAAkD;AAClD,mDAAuE;AACvE,qFAA6E;AAC7E,mEAA2D;AAE3D,mDAA6C;AAuB7C,SAAS,QAAQ,CACf,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAiB,EACrE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,uBAAC,gCAAW,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,cAAc,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACrG,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CACxB,6DACE,gCAAK,SAAS,EAAC,6BAA6B,YAC1C,gCAAK,SAAS,EAAC,qBAAqB,YAAE,eAAe,CAAC,CAAC,CAAC,uBAAC,2BAAgB,KAAG,CAAC,CAAC,CAAC,uBAAC,wBAAa,KAAG,GAAO,GACnG,EACL,QAAQ,IAAI,CACX,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,YAC7B,QAAQ,GACJ,CACR,IACA,CACJ,GACW,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C,6BAAQ","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Checkbox as RACCheckbox, type CheckboxProps as RACCheckboxProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconSubtractBold } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface CheckboxProps\n extends CommonProps,\n AriaLabelingProps,\n Pick<\n RACCheckboxProps,\n \| 'onChange'\n \| 'isSelected'\n \| 'isIndeterminate'\n \| 'isDisabled'\n \| 'isReadOnly'\n \| 'isRequired'\n \| 'isInvalid'\n \| 'name'\n \| 'value'\n \| 'defaultSelected'\n \| 'autoFocus'\n > {\n /** The label rendered next to the checkbox. /\n children?: StringLikeChildren;\n}\n\nfunction Checkbox(\n { children, UNSAFE_className, UNSAFE_style, ...props }: CheckboxProps,\n ref: ForwardedRef<HTMLLabelElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!children && !ariaLabel && !ariaLabelledBy) {\n console.warn('Checkbox requires one of children / aria-label / aria-labelledby for accessibility');\n }\n }, [children, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACCheckbox {...props} ref={ref} className={clsx('cim-checkbox', UNSAFE_className)} style={UNSAFE_style}>\n {({ isIndeterminate }) => (\n <>\n <div className=\"cim-checkbox-toggle-wrapper\">\n <div className=\"cim-checkbox-toggle\">{isIndeterminate ? <IconSubtractBold /> : <IconCheckBold />}</div>\n </div>\n {children && (\n <Text as=\"span\" variant=\"medium\">\n {children}\n </Text>\n )}\n </>\n )}\n </RACCheckbox>\n );\n}\n\n/\n Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.\n \n See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).\n */\nconst _Checkbox = withStyleProps(forwardRef(Checkbox), 'Checkbox');\n\nexport { _Checkbox as Checkbox };\n"]}

package/dist/commonjs/components/combo-box/combo-box.d.ts CHANGED Viewed

@@ -8,6 +8,11 @@ export interface ComboBoxValidationValue {
     inputValue: string;
 }
 export interface ComboBoxProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldWithPlaceholderProps<ComboBoxValidationValue>, CollectionProps<T>, Pick<RACComboBoxProps<T>, 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'selectedKey' | 'defaultSelectedKey' | 'inputValue' | 'defaultInputValue' | 'autoFocus' | 'onSelectionChange' | 'onInputChange' | 'onFocus' | 'onBlur' | 'onOpenChange'>, Pick<RACListBoxProps<T>, 'onScroll'> {
+    /**
+     * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.
+     * @default false
+     */
+    isVirtualized?: boolean;
 }
 /**
  * Allows users to filter a collapsible list and select one item from it.

package/dist/commonjs/components/combo-box/combo-box.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"AAIA,OAAO,EASL,KAAK,YAAY,IAAI,eAAe,~~EAIpC~~,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,~~EAC7C~~,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;~~AAGrB~~,gFAAgF;AAChF,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,WAAW,EAAE,GAAG,GAAG,IAAI,CAAC;IACxB,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SAAQ,WAAW,EACjB,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,aAAa,GACb,oBAAoB,GACpB,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,mBAAmB,GACnB,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;~~CAAG~~;~~AA+D3C~~;;;;GAIG;AACH,QAAA,MAAM,SAAS,~~GAlEG~~,CAAC,SAAS,cAAc,~~iKAkEwB~~,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAsBjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CACzD,SAAQ,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACzF,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAiBlG;yBAjBe,YAAY;;;AAqB5B,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAezB;yBApBe,eAAe"}
1	+ {"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"AAIA,OAAO,EASL,KAAK,YAAY,IAAI,eAAe,EAMpC,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAUrB,gFAAgF;AAChF,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,WAAW,EAAE,GAAG,GAAG,IAAI,CAAC;IACxB,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SAAQ,WAAW,EACjB,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,aAAa,GACb,oBAAoB,GACpB,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,mBAAmB,GACnB,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA0ED;;;;GAIG;AACH,QAAA,MAAM,SAAS,GA7EG,CAAC,SAAS,cAAc,iKA6EwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAsBjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CACzD,SAAQ,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACzF,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAiBlG;yBAjBe,YAAY;;;AAqB5B,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAezB;yBApBe,eAAe"}

package/dist/commonjs/components/combo-box/combo-box.js CHANGED Viewed

@@ -19,7 +19,13 @@ const with_style_props_js_1 = require("../../with-style-props.js");
 const collapsible_list_js_1 = require("../internal/collapsible-list/collapsible-list.js");
 const form_field_js_1 = require("../internal/form-field/form-field.js");
 const utils_js_1 = require("../typography/utils.js");
-function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, onScroll, ...props }, ref) {
+const VIRTUAL_LAYOUT_OPTIONS = {
+    rowHeight: 40,
+    headingHeight: 32,
+    padding: 0,
+    gap: 0,
+};
+function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, onScroll, isVirtualized = false, ...props }, ref) {
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
     (0, use_production_warning_js_1.useProductionWarning)(() => {
         if (!label && !ariaLabel && !ariaLabelledBy) {
@@ -29,7 +35,8 @@ function ComboBox({ label, description, error, items, children, placeholder, UNS
     if (!(0, is_production_js_1.isProduction)() && items != null && typeof children !== 'function') {
         console.warn('`ComboBox` requires `children` to be a function when using `items` prop');
     }
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { ...props, ref: ref, className: (0, clsx_1.default)('cim-combo-box', UNSAFE_className), style: UNSAFE_style, menuTrigger: "focus", isReadOnly: isReadOnly, "data-readonly": isReadOnly ? true : undefined, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-combo-box-input-group", children: [(0, jsx_runtime_1.jsx)(ComboBoxInput, { isReadOnly: isReadOnly, placeholder: placeholder }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-combo-box-button", children: (0, jsx_runtime_1.jsx)(index_js_1.IconChevronDown, {}) })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { offset: 5, maxHeight: 315, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: "cim-combo-box-listbox", onScroll: onScroll, items: items, children: children }) })] }));
+    const listBox = ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: "cim-combo-box-listbox", onScroll: onScroll, items: items, children: children }));
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { ...props, ref: ref, className: (0, clsx_1.default)('cim-combo-box', UNSAFE_className), style: UNSAFE_style, menuTrigger: "focus", isReadOnly: isReadOnly, "data-readonly": isReadOnly ? true : undefined, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-combo-box-input-group", children: [(0, jsx_runtime_1.jsx)(ComboBoxInput, { isReadOnly: isReadOnly, placeholder: placeholder }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-combo-box-button", children: (0, jsx_runtime_1.jsx)(index_js_1.IconChevronDown, {}) })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { offset: 5, maxHeight: 315, children: isVirtualized ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Virtualizer, { layout: react_aria_components_1.ListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) })] }));
 }
 /**
  * Allows users to filter a collapsible list and select one item from it.
@@ -40,7 +47,7 @@ const _ComboBox = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1
 exports.ComboBox = _ComboBox;
 function ComboBoxInput({ isReadOnly, placeholder, }) {
     const comboBoxState = (0, react_1.useContext)(react_aria_components_1.ComboBoxStateContext);
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: (0, clsx_1.default)('cim-combo-box-input', (0, utils_js_1.textStyle)({ variant: 'medium' })),
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: (0, clsx_1.default)('cim-combo-box-input', (0, utils_js_1.textStyle)({ variant: 'body' })),
         // Ensure the popover opens when the input is clicked.
         // By default, React Aria only opens the popover when the input is focused.
         onClick: () => !isReadOnly && comboBoxState.open(), placeholder: placeholder }));

package/dist/commonjs/components/combo-box/combo-box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n ComboBox as RACComboBox,\n ComboBoxStateContext as RACComboBoxStateContext,\n Group as RACGroup,\n Header as RACHeader,\n Input as RACInput,\n ListBox as RACListBox,\n type ListBoxProps as RACListBoxProps,\n ListBoxItem as RACListBoxItem,\n ListBoxSection as RACListBoxSection,\n Text as RACText,\n type ComboBoxProps as RACComboBoxProps,\n type ListBoxItemProps as RACListBoxItemProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type {\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldWithPlaceholderProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\n/** Represents the state of the `ComboBox` component for validation purposes. /\nexport interface ComboBoxValidationValue {\n /* The selected key in the ComboBox. /\n selectedKey: Key \| null;\n /* The value of the ComboBox input. /\n inputValue: string;\n}\n\nexport interface ComboBoxProps<T extends CollectionItem = CollectionItem>\n extends CommonProps,\n FieldWithPlaceholderProps<ComboBoxValidationValue>,\n CollectionProps<T>,\n Pick<\n RACComboBoxProps<T>,\n \| 'isDisabled'\n \| 'isRequired'\n \| 'isInvalid'\n \| 'isReadOnly'\n \| 'selectedKey'\n \| 'defaultSelectedKey'\n \| 'inputValue'\n \| 'defaultInputValue'\n \| 'autoFocus'\n \| 'onSelectionChange'\n \| 'onInputChange'\n \| 'onFocus'\n \| 'onBlur'\n \| 'onOpenChange'\n >,\n Pick<RACListBoxProps<T>, 'onScroll'> {}\n\nfunction ComboBox<T extends CollectionItem>(\n {\n label,\n description,\n error,\n items,\n children,\n placeholder,\n UNSAFE_className,\n UNSAFE_style,\n isReadOnly,\n onScroll,\n ...props\n }: ComboBoxProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('ComboBox requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`ComboBox` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACComboBox\n {...props}\n ref={ref}\n className={clsx('cim-combo-box', UNSAFE_className)}\n style={UNSAFE_style}\n menuTrigger=\"focus\"\n isReadOnly={isReadOnly}\n data-readonly={isReadOnly ? true : undefined}\n >\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <RACGroup className=\"cim-combo-box-input-group\">\n <ComboBoxInput isReadOnly={isReadOnly} placeholder={placeholder} />\n <RACButton className=\"cim-combo-box-button\">\n <IconChevronDown />\n </RACButton>\n </RACGroup>\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-combo-box-listbox\" onScroll={onScroll} items={items}>\n {children}\n </RACListBox>\n </CollapsibleList>\n </RACComboBox>\n );\n}\n\n/\n Allows users to filter a collapsible list and select one item from it.\n \n See [combo box usage guidelines](https://ui.cimpress.com/components/combo-box)\n /\nconst _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');\n\nexport { _ComboBox as ComboBox };\n\nfunction ComboBoxInput({\n isReadOnly,\n placeholder,\n}: {\n isReadOnly: boolean \| undefined;\n placeholder: string \| undefined;\n}) {\n const comboBoxState = useContext(RACComboBoxStateContext);\n\n return (\n <RACInput\n className={clsx('cim-combo-box-input', textStyle({ variant: 'medium' }))}\n // Ensure the popover opens when the input is clicked.\n // By default, React Aria only opens the popover when the input is focused.\n onClick={() => !isReadOnly && comboBoxState!.open()}\n placeholder={placeholder}\n />\n );\n}\n\nexport interface ComboBoxItemProps<T extends CollectionItem>\n extends Pick<RACListBoxItemProps<T>, 'id' \| 'isDisabled' \| 'onHoverStart' \| 'onHoverEnd'> {\n /* The content to display as the label. /\n children: StringLikeChildren;\n}\n\n/* Renders a single list item within `ComboBox`. /\nexport function ComboBoxItem<T extends CollectionItem>({ children, ...props }: ComboBoxItemProps<T>) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACListBoxItem {...props} className=\"cim-combo-box-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\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport interface ComboBoxSectionProps<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 `ComboBox` into a section. */\nexport function ComboBoxSection<T extends CollectionItem>({\n title,\n children,\n items,\n ...props\n}: ComboBoxSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`ComboBoxSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n <RACHeader\n className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nComboBoxSection.displayName = 'ComboBoxSection';\n"]}
1	+ {"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n ComboBox as RACComboBox,\n ComboBoxStateContext as RACComboBoxStateContext,\n Group as RACGroup,\n Header as RACHeader,\n Input as RACInput,\n ListBox as RACListBox,\n type ListBoxProps as RACListBoxProps,\n ListBoxItem as RACListBoxItem,\n ListBoxSection as RACListBoxSection,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n Text as RACText,\n type ComboBoxProps as RACComboBoxProps,\n type ListBoxItemProps as RACListBoxItemProps,\n Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type {\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldWithPlaceholderProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n rowHeight: 40,\n headingHeight: 32,\n padding: 0,\n gap: 0,\n};\n\n/** Represents the state of the `ComboBox` component for validation purposes. /\nexport interface ComboBoxValidationValue {\n /* The selected key in the ComboBox. /\n selectedKey: Key \| null;\n /* The value of the ComboBox input. /\n inputValue: string;\n}\n\nexport interface ComboBoxProps<T extends CollectionItem = CollectionItem>\n extends CommonProps,\n FieldWithPlaceholderProps<ComboBoxValidationValue>,\n CollectionProps<T>,\n Pick<\n RACComboBoxProps<T>,\n \| 'isDisabled'\n \| 'isRequired'\n \| 'isInvalid'\n \| 'isReadOnly'\n \| 'selectedKey'\n \| 'defaultSelectedKey'\n \| 'inputValue'\n \| 'defaultInputValue'\n \| 'autoFocus'\n \| 'onSelectionChange'\n \| 'onInputChange'\n \| 'onFocus'\n \| 'onBlur'\n \| 'onOpenChange'\n >,\n Pick<RACListBoxProps<T>, 'onScroll'> {\n /\n Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n /\n isVirtualized?: boolean;\n}\n\nfunction ComboBox<T extends CollectionItem>(\n {\n label,\n description,\n error,\n items,\n children,\n placeholder,\n UNSAFE_className,\n UNSAFE_style,\n isReadOnly,\n onScroll,\n isVirtualized = false,\n ...props\n }: ComboBoxProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('ComboBox requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`ComboBox` requires `children` to be a function when using `items` prop');\n }\n\n const listBox = (\n <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n {children}\n </RACListBox>\n );\n\n return (\n <RACComboBox\n {...props}\n ref={ref}\n className={clsx('cim-combo-box', UNSAFE_className)}\n style={UNSAFE_style}\n menuTrigger=\"focus\"\n isReadOnly={isReadOnly}\n data-readonly={isReadOnly ? true : undefined}\n >\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <RACGroup className=\"cim-combo-box-input-group\">\n <ComboBoxInput isReadOnly={isReadOnly} placeholder={placeholder} />\n <RACButton className=\"cim-combo-box-button\">\n <IconChevronDown />\n </RACButton>\n </RACGroup>\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n {isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n )}\n </CollapsibleList>\n </RACComboBox>\n );\n}\n\n/\n Allows users to filter a collapsible list and select one item from it.\n \n See [combo box usage guidelines](https://ui.cimpress.com/components/combo-box)\n /\nconst _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');\n\nexport { _ComboBox as ComboBox };\n\nfunction ComboBoxInput({\n isReadOnly,\n placeholder,\n}: {\n isReadOnly: boolean \| undefined;\n placeholder: string \| undefined;\n}) {\n const comboBoxState = useContext(RACComboBoxStateContext);\n\n return (\n <RACInput\n className={clsx('cim-combo-box-input', textStyle({ variant: 'body' }))}\n // Ensure the popover opens when the input is clicked.\n // By default, React Aria only opens the popover when the input is focused.\n onClick={() => !isReadOnly && comboBoxState!.open()}\n placeholder={placeholder}\n />\n );\n}\n\nexport interface ComboBoxItemProps<T extends CollectionItem>\n extends Pick<RACListBoxItemProps<T>, 'id' \| 'isDisabled' \| 'onHoverStart' \| 'onHoverEnd'> {\n /* The content to display as the label. /\n children: StringLikeChildren;\n}\n\n/* Renders a single list item within `ComboBox`. /\nexport function ComboBoxItem<T extends CollectionItem>({ children, ...props }: ComboBoxItemProps<T>) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACListBoxItem {...props} className=\"cim-combo-box-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\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport interface ComboBoxSectionProps<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 `ComboBox` into a section. */\nexport function ComboBoxSection<T extends CollectionItem>({\n title,\n children,\n items,\n ...props\n}: ComboBoxSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`ComboBoxSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n <RACHeader\n className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nComboBoxSection.displayName = 'ComboBoxSection';\n"]}

package/dist/commonjs/components/date-picker/date-picker.js CHANGED Viewed

@@ -26,7 +26,7 @@ function DatePicker({ label, description, error: errorMessage, focusedValue, def
         }
     }, [label, ariaLabel, ariaLabelledBy]);
     const messages = (0, index_js_1.useLocalizedMessages)('datePicker');
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DatePicker, { ...props, ref: ref, className: (0, clsx_1.default)('cim-date-picker', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-date-picker-input-group", "data-readonly": props.isReadOnly || undefined, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.DateInput, { className: (0, clsx_1.default)('cim-date-picker-input', (0, utils_js_1.textStyle)({ variant: 'medium' })), children: (segment) => ((0, jsx_runtime_1.jsx)("span", { className: "cim-date-picker-segment-wrapper", children: (0, jsx_runtime_1.jsx)(react_aria_components_1.DateSegment, { segment: segment }) })) }), (0, jsx_runtime_1.jsxs)("div", { className: "cim-date-picker-input-controls", children: [(0, jsx_runtime_1.jsx)(DatePickerClearButton, { isDisabled: props.isDisabled || props.isReadOnly }), (0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(index_js_2.IconCalendarEmpty, {}), "aria-label": messages.format('openCalendar'), variant: "tertiary", size: "small" })] })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: "cim-date-picker-popover", placement: "bottom end", offset: 5, containerPadding: 16, "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { children: (0, jsx_runtime_1.jsx)(date_picker_calendar_js_1.DatePickerCalendar, { focusedValue: focusedValue, defaultFocusedValue: defaultFocusedValue, placeholderValue: props.placeholderValue }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DatePicker, { ...props, ref: ref, className: (0, clsx_1.default)('cim-date-picker', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-date-picker-input-group", "data-readonly": props.isReadOnly || undefined, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.DateInput, { className: (0, clsx_1.default)('cim-date-picker-input', (0, utils_js_1.textStyle)({ variant: 'body' })), children: (segment) => ((0, jsx_runtime_1.jsx)("span", { className: "cim-date-picker-segment-wrapper", children: (0, jsx_runtime_1.jsx)(react_aria_components_1.DateSegment, { segment: segment }) })) }), (0, jsx_runtime_1.jsxs)("div", { className: "cim-date-picker-input-controls", children: [(0, jsx_runtime_1.jsx)(DatePickerClearButton, { isDisabled: props.isDisabled || props.isReadOnly }), (0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(index_js_2.IconCalendarEmpty, {}), "aria-label": messages.format('openCalendar'), variant: "tertiary", size: "small" })] })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: "cim-date-picker-popover", placement: "bottom end", offset: 5, containerPadding: 16, "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { children: (0, jsx_runtime_1.jsx)(date_picker_calendar_js_1.DatePickerCalendar, { focusedValue: focusedValue, defaultFocusedValue: defaultFocusedValue, placeholderValue: props.placeholderValue }) }) })] }));
 }
 /**
  * Allows users to enter or select a date and time value.