@cimpress-ui/react 1.6.0 → 1.7.1

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

@@ -9,6 +9,7 @@ export interface AppHeaderProps extends CommonProps {
     titleLink: Href | AppHeaderTitleLinkProps;
     /** The tools to render at the end of the header. */
     tools?: ReactNode;
+    UNSTABLE_navButton?: ReactNode;
 }
 /**
  * Displays a basic application header.

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

@@ -1 +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"}
+{"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;IAClB,kBAAkB,CAAC,EAAE,SAAS,CAAC;CAChC;AA4BD;;;;GAIG;AACH,QAAA,MAAM,UAAU,+GAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}

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

@@ -12,9 +12,9 @@ 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) {
+function AppHeader({ title, titleLink, tools, UNSTABLE_navButton: navButton, 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 })] }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-container", children: (0, jsx_runtime_1.jsxs)("header", { ...props, ref: ref, className: (0, clsx_1.default)('cim-app-header', UNSAFE_className), style: UNSAFE_style, children: [navButton, (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.

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

@@ -1 +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"]}
+{"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;AAclD,SAAS,SAAS,CAChB,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EACpH,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,gCAAK,SAAS,EAAC,0BAA0B,YACvC,uCAAY,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAClG,SAAS,EACV,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,GACL,CACP,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  UNSTABLE_navButton?: ReactNode;\n}\n\nfunction AppHeader(\n  { title, titleLink, tools, UNSTABLE_navButton: navButton, 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    <div className=\"cim-app-header-container\">\n      <header {...props} ref={ref} className={clsx('cim-app-header', UNSAFE_className)} style={UNSAFE_style}>\n        {navButton}\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    </div>\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/nav-button.d.ts

@@ -0,0 +1,8 @@
+import type { CommonProps } from '../types.js';
+export interface UNSTABLE_AppHeaderNavButtonProps extends CommonProps {
+    isOpen: boolean;
+    onPress: () => void;
+}
+declare const _UNSTABLE_AppHeaderNavButton: (props: UNSTABLE_AppHeaderNavButtonProps & import("react").RefAttributes<HTMLButtonElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _UNSTABLE_AppHeaderNavButton as UNSTABLE_AppHeaderNavButton };
+//# sourceMappingURL=nav-button.d.ts.map

package/dist/commonjs/components/app-header/nav-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-button.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,gCAAiC,SAAQ,WAAW;IACnE,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAsBD,QAAA,MAAM,4BAA4B,qLAAgF,CAAC;AAEnH,OAAO,EAAE,4BAA4B,IAAI,2BAA2B,EAAE,CAAC"}

package/dist/commonjs/components/app-header/nav-button.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNSTABLE_AppHeaderNavButton = 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 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");
+function UNSTABLE_AppHeaderNavButton({ isOpen, onPress, UNSAFE_className, UNSAFE_style }, ref) {
+    return ((0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { "aria-expanded": isOpen, icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenu, {}), size: "small", "aria-label": "Open menu", variant: "tertiary", onPress: onPress, ref: ref, UNSAFE_className: (0, clsx_1.default)('cim-app-header-nav-toggle', UNSAFE_className), UNSAFE_style: UNSAFE_style }));
+}
+const _UNSTABLE_AppHeaderNavButton = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_AppHeaderNavButton, 'AppHeaderNavButton'));
+exports.UNSTABLE_AppHeaderNavButton = _UNSTABLE_AppHeaderNavButton;
+//# sourceMappingURL=nav-button.js.map

package/dist/commonjs/components/app-header/nav-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-button.js","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAAwB;AAExB,yDAAkD;AAClD,mDAAgD;AAChD,mEAA2D;AAC3D,6DAAsD;AAQtD,SAAS,2BAA2B,CAClC,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAoC,EACrF,GAAoC;IAEpC,OAAO,CACL,uBAAC,2BAAU,qBACM,MAAM,EACrB,IAAI,EAAE,uBAAC,mBAAQ,KAAG,EAClB,IAAI,EAAC,OAAO,gBAED,WAAW,EACtB,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,IAAA,cAAI,EAAC,2BAA2B,EAAE,gBAAgB,CAAC,EACrE,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC;AAED,MAAM,4BAA4B,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,2BAA2B,EAAE,oBAAoB,CAAC,CAAC,CAAC;AAE1E,mEAA2B","sourcesContent":["import clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenu } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { IconButton } from '../button/icon-button.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_AppHeaderNavButtonProps extends CommonProps {\n  isOpen: boolean;\n  onPress: () => void;\n}\n\nfunction UNSTABLE_AppHeaderNavButton(\n  { isOpen, onPress, UNSAFE_className, UNSAFE_style }: UNSTABLE_AppHeaderNavButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  return (\n    <IconButton\n      aria-expanded={isOpen}\n      icon={<IconMenu />}\n      size=\"small\"\n      // TODO\n      aria-label=\"Open menu\"\n      variant=\"tertiary\"\n      onPress={onPress}\n      ref={ref}\n      UNSAFE_className={clsx('cim-app-header-nav-toggle', UNSAFE_className)}\n      UNSAFE_style={UNSAFE_style}\n    />\n  );\n}\n\nconst _UNSTABLE_AppHeaderNavButton = withStyleProps(forwardRef(UNSTABLE_AppHeaderNavButton, 'AppHeaderNavButton'));\n\nexport { _UNSTABLE_AppHeaderNavButton as UNSTABLE_AppHeaderNavButton };\n"]}

package/dist/commonjs/components/app-header/side-nav.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+import type { Href } from '../types.js';
+export interface UNSTABLE_SideNavProps {
+    children: ReactNode;
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Determines how the side nav is displayed and behaves.
+     * - `overlay`: The side nav slides in as an overlay on top of the main content. This is used when all available screen space is needed for the main content.
+     * - `fixed`: The side nav is fixed to the side and includes an expand button to toggle between a compact icon-only view and an expanded view showing labels. On smaller screens, it slides in as an overlay.
+     *
+     * @default 'fixed'
+     */
+    variant?: 'overlay' | 'fixed';
+}
+export declare function UNSTABLE_SideNav({ children, isOpen, onOpenChange, variant }: UNSTABLE_SideNavProps): import("react/jsx-runtime").JSX.Element;
+export interface UNSTABLE_SideNavListProps {
+    children: ReactNode;
+}
+export declare function UNSTABLE_SideNavList({ children }: UNSTABLE_SideNavListProps): import("react/jsx-runtime").JSX.Element;
+interface UNSTABLE_SideNavListItem {
+    label: string;
+    href: Href;
+    isActive?: boolean;
+    icon?: ReactNode;
+}
+export declare function UNSTABLE_SideNavListItem({ label, href, isActive, icon }: UNSTABLE_SideNavListItem): import("react/jsx-runtime").JSX.Element;
+export interface UNSTABLE_SideNavListSectionProps {
+    children: ReactNode;
+    label?: string;
+}
+export declare function UNSTABLE_SideNavListSection({ children, label }: UNSTABLE_SideNavListSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=side-nav.d.ts.map

package/dist/commonjs/components/app-header/side-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/side-nav.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQlE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAKxC,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC/B;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,OAAiB,EAAE,EAAE,qBAAqB,2CA6B5G;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE,yBAAyB,2CAE3E;AAED,UAAU,wBAAwB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,wBAAgB,wBAAwB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,wBAAwB,2CAajG;AAED,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,gCAAgC,2CAehG"}

package/dist/commonjs/components/app-header/side-nav.js

@@ -0,0 +1,35 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNSTABLE_SideNav = UNSTABLE_SideNav;
+exports.UNSTABLE_SideNavList = UNSTABLE_SideNavList;
+exports.UNSTABLE_SideNavListItem = UNSTABLE_SideNavListItem;
+exports.UNSTABLE_SideNavListSection = UNSTABLE_SideNavListSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_aria_components_1 = require("react-aria-components");
+const index_js_1 = require("../../icons/index.js");
+const use_is_mobile_js_1 = require("../../utils/use-is-mobile.js");
+const icon_button_js_1 = require("../button/icon-button.js");
+const drawer_js_1 = require("../drawer/drawer.js");
+const hidden_js_1 = require("../hidden/hidden.js");
+const tooltip_js_1 = require("../tooltip/tooltip.js");
+const text_js_1 = require("../typography/text.js");
+const SideNavContext = (0, react_1.createContext)({ isOpen: false });
+function UNSTABLE_SideNav({ children, isOpen, onOpenChange, variant = 'fixed' }) {
+    const isMobile = (0, use_is_mobile_js_1.useIsMobile)();
+    const drawer = (isMobile || variant === 'overlay') && ((0, jsx_runtime_1.jsx)(drawer_js_1.Drawer, { UNSTABLE_placement: "start", isOpen: isOpen, onOpenChange: onOpenChange, "aria-label": "Side navigation", children: (0, jsx_runtime_1.jsx)(drawer_js_1.DrawerBody, { children: children }) }));
+    return ((0, jsx_runtime_1.jsxs)(SideNavContext.Provider, { value: { isOpen: isOpen ?? false }, children: [drawer, variant === 'fixed' && ((0, jsx_runtime_1.jsx)(hidden_js_1.UNSTABLE_Hidden, { hide: { sm: true, md: false }, children: (0, jsx_runtime_1.jsxs)("div", { className: "cim-side-nav", "data-expanded": isOpen, children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-side-nav-header", children: (0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { variant: "tertiary", icon: (0, jsx_runtime_1.jsx)(index_js_1.UNSTABLE_IconExpand, { UNSAFE_style: isOpen ? { transform: 'rotate(180deg)' } : {} }), "aria-label": "Expand sidebar", onPress: () => onOpenChange?.(!isOpen) }) }), (0, jsx_runtime_1.jsx)("div", { className: "cim-side-nav-list-container", children: children })] }) }))] }));
+}
+function UNSTABLE_SideNavList({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: "cim-side-nav-list", children: children });
+}
+function UNSTABLE_SideNavListItem({ label, href, isActive, icon }) {
+    const { isOpen } = (0, react_1.useContext)(SideNavContext);
+    return ((0, jsx_runtime_1.jsx)(tooltip_js_1.Tooltip, { label: label, placement: "right", isDisabled: isOpen, children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Link, { href: href, className: "cim-side-nav-list-item", "data-active": isActive, "data-expanded": isOpen, children: [icon, (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", UNSAFE_className: "cim-side-nav-list-item-label", children: label })] }) }));
+}
+function UNSTABLE_SideNavListSection({ children, label }) {
+    const { isOpen } = (0, react_1.useContext)(SideNavContext);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "cim-side-nav-list-section", "data-expanded": isOpen, children: [label && ((0, jsx_runtime_1.jsx)("div", { className: "cim-side-nav-list-section-header", children: (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "p", variant: "small-semibold", tone: "subtle", UNSAFE_className: "cim-side-nav-list-section-header-label", children: label }) })), children] }));
+}
+//# sourceMappingURL=side-nav.js.map

package/dist/commonjs/components/app-header/side-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.js","sourceRoot":"","sources":["../../../../src/components/app-header/side-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { createContext, useContext, type ReactNode } from 'react';\nimport { Link as RACLink } from 'react-aria-components';\nimport { UNSTABLE_IconExpand } from '../../icons/index.js';\nimport { useIsMobile } from '../../utils/use-is-mobile.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { Drawer, DrawerBody } from '../drawer/drawer.js';\nimport { UNSTABLE_Hidden } from '../hidden/hidden.js';\nimport { Tooltip } from '../tooltip/tooltip.js';\nimport type { Href } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nconst SideNavContext = createContext<{ isOpen: boolean }>({ isOpen: false });\n\nexport interface UNSTABLE_SideNavProps {\n  children: ReactNode;\n  isOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * Determines how the side nav is displayed and behaves.\n   * - `overlay`: The side nav slides in as an overlay on top of the main content. This is used when all available screen space is needed for the main content.\n   * - `fixed`: The side nav is fixed to the side and includes an expand button to toggle between a compact icon-only view and an expanded view showing labels. On smaller screens, it slides in as an overlay.\n   *\n   * @default 'fixed'\n   */\n  variant?: 'overlay' | 'fixed';\n}\n\nexport function UNSTABLE_SideNav({ children, isOpen, onOpenChange, variant = 'fixed' }: UNSTABLE_SideNavProps) {\n  const isMobile = useIsMobile();\n\n  const drawer = (isMobile || variant === 'overlay') && (\n    <Drawer UNSTABLE_placement=\"start\" isOpen={isOpen} onOpenChange={onOpenChange} aria-label=\"Side navigation\">\n      <DrawerBody>{children}</DrawerBody>\n    </Drawer>\n  );\n\n  return (\n    <SideNavContext.Provider value={{ isOpen: isOpen ?? false }}>\n      {drawer}\n      {variant === 'fixed' && (\n        <UNSTABLE_Hidden hide={{ sm: true, md: false }}>\n          <div className=\"cim-side-nav\" data-expanded={isOpen}>\n            <div className=\"cim-side-nav-header\">\n              <IconButton\n                variant=\"tertiary\"\n                icon={<UNSTABLE_IconExpand UNSAFE_style={isOpen ? { transform: 'rotate(180deg)' } : {}} />}\n                aria-label=\"Expand sidebar\"\n                onPress={() => onOpenChange?.(!isOpen)}\n              />\n            </div>\n            <div className=\"cim-side-nav-list-container\">{children}</div>\n          </div>\n        </UNSTABLE_Hidden>\n      )}\n    </SideNavContext.Provider>\n  );\n}\n\nexport interface UNSTABLE_SideNavListProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_SideNavList({ children }: UNSTABLE_SideNavListProps) {\n  return <div className=\"cim-side-nav-list\">{children}</div>;\n}\n\ninterface UNSTABLE_SideNavListItem {\n  label: string;\n  href: Href;\n  isActive?: boolean;\n  icon?: ReactNode;\n}\n\nexport function UNSTABLE_SideNavListItem({ label, href, isActive, icon }: UNSTABLE_SideNavListItem) {\n  const { isOpen } = useContext(SideNavContext);\n\n  return (\n    <Tooltip label={label} placement=\"right\" isDisabled={isOpen}>\n      <RACLink href={href} className=\"cim-side-nav-list-item\" data-active={isActive} data-expanded={isOpen}>\n        {icon}\n        <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-side-nav-list-item-label\">\n          {label}\n        </Text>\n      </RACLink>\n    </Tooltip>\n  );\n}\n\nexport interface UNSTABLE_SideNavListSectionProps {\n  children: ReactNode;\n  label?: string;\n}\n\nexport function UNSTABLE_SideNavListSection({ children, label }: UNSTABLE_SideNavListSectionProps) {\n  const { isOpen } = useContext(SideNavContext);\n\n  return (\n    <div className=\"cim-side-nav-list-section\" data-expanded={isOpen}>\n      {label && (\n        <div className=\"cim-side-nav-list-section-header\">\n          <Text as=\"p\" variant=\"small-semibold\" tone=\"subtle\" UNSAFE_className=\"cim-side-nav-list-section-header-label\">\n            {label}\n          </Text>\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/commonjs/components/app-shell/app-shell.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface UNSTABLE_AppShellProps {
+    children: ReactNode;
+}
+export declare function UNSTABLE_AppShell({ children }: UNSTABLE_AppShellProps): import("react/jsx-runtime").JSX.Element;
+export interface UNSTABLE_AppShellBodyProps {
+    children: ReactNode;
+}
+export declare function UNSTABLE_AppShellBody({ children }: UNSTABLE_AppShellBodyProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=app-shell.d.ts.map

package/dist/commonjs/components/app-shell/app-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAErE;AAED,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,EAAE,0BAA0B,2CAE7E"}

package/dist/commonjs/components/app-shell/app-shell.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNSTABLE_AppShell = UNSTABLE_AppShell;
+exports.UNSTABLE_AppShellBody = UNSTABLE_AppShellBody;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+function UNSTABLE_AppShell({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-app-shell'), children: children });
+}
+function UNSTABLE_AppShellBody({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: "cim-app-shell-main", children: children });
+}
+//# sourceMappingURL=app-shell.js.map

package/dist/commonjs/components/app-shell/app-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.js","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":";;;;;AAOA,8CAEC;AAMD,sDAEC;;AAjBD,gDAAwB;AAOxB,SAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAA0B;IACpE,OAAO,gCAAK,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,CAAC,YAAG,QAAQ,GAAO,CAAC;AACjE,CAAC;AAMD,SAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAA8B;IAC5E,OAAO,gCAAK,SAAS,EAAC,oBAAoB,YAAE,QAAQ,GAAO,CAAC;AAC9D,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\n\nexport interface UNSTABLE_AppShellProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_AppShell({ children }: UNSTABLE_AppShellProps) {\n  return <div className={clsx('cim-app-shell')}>{children}</div>;\n}\n\nexport interface UNSTABLE_AppShellBodyProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_AppShellBody({ children }: UNSTABLE_AppShellBodyProps) {\n  return <div className=\"cim-app-shell-main\">{children}</div>;\n}\n"]}

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

@@ -26,7 +26,7 @@ export interface DrawerProps extends CommonProps, AriaLabelingProps {
     /** The contents of the drawer. A function may be provided to access a function to close the drawer. */
     children: ReactNode | ((renderProps: DrawerRenderProps) => ReactNode);
     /** The title of the drawer. */
-    title: string;
+    title?: string;
     /**
      * The size of the drawer. This prop is ignored on small devices - drawers on small devices will always take up all available width.
      * @default 'small'
@@ -53,6 +53,11 @@ export interface DrawerProps extends CommonProps, AriaLabelingProps {
      * If using `DrawerRoot`, this prop has no effect - provide `onOpenChange` to `DrawerRoot` instead.
      */
     onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * The placement of the drawer.
+     * @default 'end'
+     */
+    UNSTABLE_placement?: 'start' | 'end';
 }
 /**
  * Displays an overlay element which blocks interaction with outside elements.

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAYrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,eAAe;IAC9B,iIAAiI;IACjI,QAAQ,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mEAAmE;IACnE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAEhD;yBAFe,UAAU;;;AAM1B,MAAM,WAAW,iBAAiB;IAChC,qCAAqC;IACrC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,iBAAiB;IACjE,uGAAuG;IACvG,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,iBAAiB,KAAK,SAAS,CAAC,CAAC;IACtE,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AA6DD;;;;GAIG;AACH,QAAA,MAAM,OAAO,yGAA+B,CAAC;AAE7C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC;AAE7B,MAAM,WAAW,eAAe;IAC9B,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uCAAuC;AACvC,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAEhD;yBAFe,UAAU;;;AAM1B,MAAM,WAAW,kBAAkB;IACjC,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uCAAuC;AACvC,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAMvE;yBANe,aAAa"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAYrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,eAAe;IAC9B,iIAAiI;IACjI,QAAQ,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mEAAmE;IACnE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAEhD;yBAFe,UAAU;;;AAM1B,MAAM,WAAW,iBAAiB;IAChC,qCAAqC;IACrC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,iBAAiB;IACjE,uGAAuG;IACvG,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,iBAAiB,KAAK,SAAS,CAAC,CAAC;IACtE,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACtC;AAoED;;;;GAIG;AACH,QAAA,MAAM,OAAO,yGAA+B,CAAC;AAE7C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC;AAE7B,MAAM,WAAW,eAAe;IAC9B,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uCAAuC;AACvC,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAEhD;yBAFe,UAAU;;;AAM1B,MAAM,WAAW,kBAAkB;IACjC,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uCAAuC;AACvC,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAMvE;yBANe,aAAa"}

package/dist/commonjs/components/drawer/drawer.js

@@ -24,7 +24,7 @@ function DrawerRoot(props) {
     return (0, jsx_runtime_1.jsx)(react_aria_components_1.DialogTrigger, { ...props });
 }
 DrawerRoot.displayName = 'DrawerRoot';
-function Drawer({ children, title, size = 'small', UNSAFE_className, UNSAFE_style, isDismissible = true, isOpen, defaultOpen, onOpenChange, ...props }, ref) {
+function Drawer({ children, title, size = 'small', UNSAFE_className, UNSAFE_style, isDismissible = true, isOpen, defaultOpen, onOpenChange, UNSTABLE_placement: placement = 'end', ...props }, ref) {
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
     (0, use_production_warning_js_1.useProductionWarning)(() => {
         if (!title && !ariaLabel && !ariaLabelledBy) {
@@ -32,7 +32,7 @@ function Drawer({ children, title, size = 'small', UNSAFE_className, UNSAFE_styl
         }
     }, [title, ariaLabel, ariaLabelledBy]);
     const messages = (0, index_js_1.useLocalizedMessages)('common');
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ModalOverlay, { className: "cim-drawer-overlay", isDismissable: isDismissible, isKeyboardDismissDisabled: !isDismissible, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Modal, { className: (0, clsx_1.default)('cim-drawer', UNSAFE_className), style: UNSAFE_style, "data-size": size, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { ...props, ref: ref, className: "cim-drawer-dialog", children: (renderProps) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-drawer-header", children: [title && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { slot: "title", className: (0, clsx_1.default)('cim-drawer-title', (0, utils_js_1.textStyle)({ variant: 'title-5', tone: 'base' })), children: title })), isDismissible && (0, jsx_runtime_1.jsx)(x_button_js_1.XButton, { "aria-label": messages.format('dismiss'), slot: "close" })] }), typeof children === 'function' ? children(renderProps) : children] })) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ModalOverlay, { className: "cim-drawer-overlay", isDismissable: isDismissible, isKeyboardDismissDisabled: !isDismissible, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, "data-cim-style-root": true, "data-placement": placement, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Modal, { className: (0, clsx_1.default)('cim-drawer', UNSAFE_className), style: UNSAFE_style, "data-size": size, "data-placement": placement, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { ...props, ref: ref, className: "cim-drawer-dialog", children: (renderProps) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-drawer-header", children: [title && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { slot: "title", className: (0, clsx_1.default)('cim-drawer-title', (0, utils_js_1.textStyle)({ variant: 'title-5', tone: 'base' })), children: title })), isDismissible && (0, jsx_runtime_1.jsx)(x_button_js_1.XButton, { "aria-label": messages.format('dismiss'), slot: "close" })] }), typeof children === 'function' ? children(renderProps) : children] })) }) }) }));
 }
 /**
  * Displays an overlay element which blocks interaction with outside elements.

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAiCb,gCAEC;AAoHD,gCAEC;AAUD,sCAMC;;AAvKD,gDAAwB;AAExB,iEAM+B;AAC/B,yDAAkD;AAClD,kDAA2D;AAC3D,qFAA6E;AAC7E,kEAA2D;AAE3D,qDAAmD;AAanD;;;GAGG;AACH,SAAgB,UAAU,CAAC,KAAsB;IAC/C,OAAO,uBAAC,qCAAgB,OAAK,KAAK,GAAI,CAAC;AACzC,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAwCtC,SAAS,MAAM,CACb,EACE,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,OAAO,EACd,gBAAgB,EAChB,YAAY,EACZ,aAAa,GAAG,IAAI,EACpB,MAAM,EACN,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACI,EACd,GAA8B;IAE9B,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,+EAA+E,CAAC,CAAC;QAChG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,IAAA,+BAAoB,EAAC,QAAQ,CAAC,CAAC;IAEhD,OAAO,CACL,uBAAC,oCAAe,IACd,SAAS,EAAC,oBAAoB,EAC9B,aAAa,EAAE,aAAa,EAC5B,yBAAyB,EAAE,CAAC,aAAa,EACzC,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,yCAG1B,uBAAC,6BAAQ,IAAC,SAAS,EAAE,IAAA,cAAI,EAAC,YAAY,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,eAAa,IAAI,YAC7F,uBAAC,8BAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,mBAAmB,YAC1D,CAAC,WAAW,EAAE,EAAE,CAAC,CAChB,6DACE,iCAAK,SAAS,EAAC,mBAAmB,aAC/B,KAAK,IAAI,CACR,uBAAC,+BAAU,IACT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,IAAA,cAAI,EAAC,kBAAkB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,YAEnF,KAAK,GACK,CACd,EACA,aAAa,IAAI,uBAAC,qBAAO,kBAAa,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,GAAG,IAC9E,EACL,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,IACjE,CACJ,GACS,GACH,GACK,CACnB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,GAAG,IAAA,2BAAU,EAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAEzB,yBAAM;AAO1B,uCAAuC;AACvC,SAAgB,UAAU,CAAC,KAAsB;IAC/C,OAAO,mCAAS,KAAK,EAAE,SAAS,EAAC,iBAAiB,GAAG,CAAC;AACxD,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAOtC,uCAAuC;AACvC,SAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsB;IACtE,OAAO,CACL,mCAAS,KAAK,EAAE,SAAS,EAAC,oBAAoB,YAC3C,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n  Dialog as RACDialog,\n  DialogTrigger as RACDialogTrigger,\n  Heading as RACHeading,\n  Modal as RACModal,\n  ModalOverlay as RACModalOverlay,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface DrawerRootProps {\n  /** The drawer trigger with its associated drawer. Provide the trigger as the first child, and the drawer as the second child. */\n  children: ReactNode;\n  /** Whether the drawer is open (controlled). */\n  isOpen?: boolean;\n  /** Whether the drawer is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Handler that is called when the drawer's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a drawer trigger and its associated drawer.\n * The trigger can be any Cimpress UI button, and the drawer will be displayed when the trigger is activated.\n */\nexport function DrawerRoot(props: DrawerRootProps) {\n  return <RACDialogTrigger {...props} />;\n}\n\nDrawerRoot.displayName = 'DrawerRoot';\n\nexport interface DrawerRenderProps {\n  /** Closes the drawer when called. */\n  close: () => void;\n}\n\nexport interface DrawerProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the drawer. A function may be provided to access a function to close the drawer. */\n  children: ReactNode | ((renderProps: DrawerRenderProps) => ReactNode);\n  /** The title of the drawer. */\n  title: string;\n  /**\n   * The size of the drawer. This prop is ignored on small devices - drawers on small devices will always take up all available width.\n   * @default 'small'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Whether the drawer can be closed by clicking the close button, clicking outside of the drawer, or pressing the Escape key.\n   * When `false`, the drawer can only be closed programmatically.\n   * @default true\n   */\n  isDismissible?: boolean;\n  /**\n   * Whether the drawer is open (controlled).\n   * If using `DrawerRoot`, this prop has no effect - provide `isOpen` to `DrawerRoot` instead.\n   */\n  isOpen?: boolean;\n  /**\n   * Whether the drawer is open by default (uncontrolled).\n   * If using `DrawerRoot`, this prop has no effect - provide `defaultOpen` to `DrawerRoot` instead.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Handler that is called when the drawer's open state changes.\n   * If using `DrawerRoot`, this prop has no effect - provide `onOpenChange` to `DrawerRoot` instead.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\nfunction Drawer(\n  {\n    children,\n    title,\n    size = 'small',\n    UNSAFE_className,\n    UNSAFE_style,\n    isDismissible = true,\n    isOpen,\n    defaultOpen,\n    onOpenChange,\n    ...props\n  }: DrawerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!title && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Drawer requires one of title / aria-label / aria-labelledby for accessibility');\n    }\n  }, [title, ariaLabel, ariaLabelledBy]);\n\n  const messages = useLocalizedMessages('common');\n\n  return (\n    <RACModalOverlay\n      className=\"cim-drawer-overlay\"\n      isDismissable={isDismissible}\n      isKeyboardDismissDisabled={!isDismissible}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      data-cim-style-root\n    >\n      <RACModal className={clsx('cim-drawer', UNSAFE_className)} style={UNSAFE_style} data-size={size}>\n        <RACDialog {...props} ref={ref} className=\"cim-drawer-dialog\">\n          {(renderProps) => (\n            <>\n              <div className=\"cim-drawer-header\">\n                {title && (\n                  <RACHeading\n                    slot=\"title\"\n                    className={clsx('cim-drawer-title', textStyle({ variant: 'title-5', tone: 'base' }))}\n                  >\n                    {title}\n                  </RACHeading>\n                )}\n                {isDismissible && <XButton aria-label={messages.format('dismiss')} slot=\"close\" />}\n              </div>\n              {typeof children === 'function' ? children(renderProps) : children}\n            </>\n          )}\n        </RACDialog>\n      </RACModal>\n    </RACModalOverlay>\n  );\n}\n\n/**\n * Displays an overlay element which blocks interaction with outside elements.\n *\n * See [drawer usage guidelines](https://ui.cimpress.io/components/drawer/).\n */\nconst _Drawer = forwardRef(Drawer, 'Drawer');\n\nexport { _Drawer as Drawer };\n\nexport interface DrawerBodyProps {\n  /** The content to render within the drawer. */\n  children: ReactNode;\n}\n\n/** Renders content within `Drawer`. */\nexport function DrawerBody(props: DrawerBodyProps) {\n  return <div {...props} className=\"cim-drawer-body\" />;\n}\n\nDrawerBody.displayName = 'DrawerBody';\n\nexport interface DrawerActionsProps {\n  /** Actions that should be available in the drawer. */\n  children: ReactNode;\n}\n\n/** Renders actions within `Drawer`. */\nexport function DrawerActions({ children, ...props }: DrawerActionsProps) {\n  return (\n    <div {...props} className=\"cim-drawer-actions\">\n      {children}\n    </div>\n  );\n}\n\nDrawerActions.displayName = 'DrawerActions';\n"]}
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n  Dialog as RACDialog,\n  DialogTrigger as RACDialogTrigger,\n  Heading as RACHeading,\n  Modal as RACModal,\n  ModalOverlay as RACModalOverlay,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface DrawerRootProps {\n  /** The drawer trigger with its associated drawer. Provide the trigger as the first child, and the drawer as the second child. */\n  children: ReactNode;\n  /** Whether the drawer is open (controlled). */\n  isOpen?: boolean;\n  /** Whether the drawer is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Handler that is called when the drawer's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a drawer trigger and its associated drawer.\n * The trigger can be any Cimpress UI button, and the drawer will be displayed when the trigger is activated.\n */\nexport function DrawerRoot(props: DrawerRootProps) {\n  return <RACDialogTrigger {...props} />;\n}\n\nDrawerRoot.displayName = 'DrawerRoot';\n\nexport interface DrawerRenderProps {\n  /** Closes the drawer when called. */\n  close: () => void;\n}\n\nexport interface DrawerProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the drawer. A function may be provided to access a function to close the drawer. */\n  children: ReactNode | ((renderProps: DrawerRenderProps) => ReactNode);\n  /** The title of the drawer. */\n  title?: string;\n  /**\n   * The size of the drawer. This prop is ignored on small devices - drawers on small devices will always take up all available width.\n   * @default 'small'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Whether the drawer can be closed by clicking the close button, clicking outside of the drawer, or pressing the Escape key.\n   * When `false`, the drawer can only be closed programmatically.\n   * @default true\n   */\n  isDismissible?: boolean;\n  /**\n   * Whether the drawer is open (controlled).\n   * If using `DrawerRoot`, this prop has no effect - provide `isOpen` to `DrawerRoot` instead.\n   */\n  isOpen?: boolean;\n  /**\n   * Whether the drawer is open by default (uncontrolled).\n   * If using `DrawerRoot`, this prop has no effect - provide `defaultOpen` to `DrawerRoot` instead.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Handler that is called when the drawer's open state changes.\n   * If using `DrawerRoot`, this prop has no effect - provide `onOpenChange` to `DrawerRoot` instead.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * The placement of the drawer.\n   * @default 'end'\n   */\n  UNSTABLE_placement?: 'start' | 'end';\n}\n\nfunction Drawer(\n  {\n    children,\n    title,\n    size = 'small',\n    UNSAFE_className,\n    UNSAFE_style,\n    isDismissible = true,\n    isOpen,\n    defaultOpen,\n    onOpenChange,\n    UNSTABLE_placement: placement = 'end',\n    ...props\n  }: DrawerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!title && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Drawer requires one of title / aria-label / aria-labelledby for accessibility');\n    }\n  }, [title, ariaLabel, ariaLabelledBy]);\n\n  const messages = useLocalizedMessages('common');\n\n  return (\n    <RACModalOverlay\n      className=\"cim-drawer-overlay\"\n      isDismissable={isDismissible}\n      isKeyboardDismissDisabled={!isDismissible}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      data-cim-style-root\n      data-placement={placement}\n    >\n      <RACModal\n        className={clsx('cim-drawer', UNSAFE_className)}\n        style={UNSAFE_style}\n        data-size={size}\n        data-placement={placement}\n      >\n        <RACDialog {...props} ref={ref} className=\"cim-drawer-dialog\">\n          {(renderProps) => (\n            <>\n              <div className=\"cim-drawer-header\">\n                {title && (\n                  <RACHeading\n                    slot=\"title\"\n                    className={clsx('cim-drawer-title', textStyle({ variant: 'title-5', tone: 'base' }))}\n                  >\n                    {title}\n                  </RACHeading>\n                )}\n                {isDismissible && <XButton aria-label={messages.format('dismiss')} slot=\"close\" />}\n              </div>\n              {typeof children === 'function' ? children(renderProps) : children}\n            </>\n          )}\n        </RACDialog>\n      </RACModal>\n    </RACModalOverlay>\n  );\n}\n\n/**\n * Displays an overlay element which blocks interaction with outside elements.\n *\n * See [drawer usage guidelines](https://ui.cimpress.io/components/drawer/).\n */\nconst _Drawer = forwardRef(Drawer, 'Drawer');\n\nexport { _Drawer as Drawer };\n\nexport interface DrawerBodyProps {\n  /** The content to render within the drawer. */\n  children: ReactNode;\n}\n\n/** Renders content within `Drawer`. */\nexport function DrawerBody(props: DrawerBodyProps) {\n  return <div {...props} className=\"cim-drawer-body\" />;\n}\n\nDrawerBody.displayName = 'DrawerBody';\n\nexport interface DrawerActionsProps {\n  /** Actions that should be available in the drawer. */\n  children: ReactNode;\n}\n\n/** Renders actions within `Drawer`. */\nexport function DrawerActions({ children, ...props }: DrawerActionsProps) {\n  return (\n    <div {...props} className=\"cim-drawer-actions\">\n      {children}\n    </div>\n  );\n}\n\nDrawerActions.displayName = 'DrawerActions';\n"]}

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import type { Responsive } from '../spacing/types.js';
+export declare function UNSTABLE_Hidden({ children, hide }: {
+    children: ReactNode;
+    hide: Responsive<boolean>;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=hidden.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hidden.d.ts","sourceRoot":"","sources":["../../../../src/components/hidden/hidden.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,UAAU,CAAC,OAAO,CAAC,CAAA;CAAE,2CAiBrG"}

package/dist/commonjs/components/hidden/hidden.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNSTABLE_Hidden = UNSTABLE_Hidden;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+function UNSTABLE_Hidden({ children, hide }) {
+    const hiddenDataAttributes = typeof hide === 'object'
+        ? Object.fromEntries(Object.entries(hide).map(([breakpoint, value]) => {
+            return [`data-hidden-${breakpoint}`, value];
+        }))
+        : {
+            'data-hidden-sm': hide,
+        };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-hidden'), ...hiddenDataAttributes, children: children }));
+}
+//# sourceMappingURL=hidden.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hidden.js","sourceRoot":"","sources":["../../../../src/components/hidden/hidden.tsx"],"names":[],"mappings":";;;;;AAIA,0CAiBC;;AArBD,gDAAwB;AAIxB,SAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAsD;IACpG,MAAM,oBAAoB,GACxB,OAAO,IAAI,KAAK,QAAQ;QACtB,CAAC,CAAC,MAAM,CAAC,WAAW,CAChB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE;YAC/C,OAAO,CAAC,eAAe,UAAU,EAAE,EAAE,KAAK,CAAC,CAAC;QAC9C,CAAC,CAAC,CACH;QACH,CAAC,CAAC;YACE,gBAAgB,EAAE,IAAI;SACvB,CAAC;IAER,OAAO,CACL,gCAAK,SAAS,EAAE,IAAA,cAAI,EAAC,YAAY,CAAC,KAAM,oBAAoB,YACzD,QAAQ,GACL,CACP,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport type { Responsive } from '../spacing/types.js';\n\nexport function UNSTABLE_Hidden({ children, hide }: { children: ReactNode; hide: Responsive<boolean> }) {\n  const hiddenDataAttributes =\n    typeof hide === 'object'\n      ? Object.fromEntries(\n          Object.entries(hide).map(([breakpoint, value]) => {\n            return [`data-hidden-${breakpoint}`, value];\n          }),\n        )\n      : {\n          'data-hidden-sm': hide,\n        };\n\n  return (\n    <div className={clsx('cim-hidden')} {...hiddenDataAttributes}>\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/commonjs/components/number-field/number-field.d.ts

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

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

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

package/dist/commonjs/components/number-field/number-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.js","sourceRoot":"","sources":["../../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAK+B;AAC/B,yDAAkD;AAClD,kDAA2D;AAC3D,mDAA6D;AAC7D,qFAA6E;AAC7E,mEAA2D;AAC3D,6DAAsD;AACtD,wEAA4G;AAE5G,qDAAmD;AA2BnD,SAAS,WAAW,CAClB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACS,EACnB,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,IAAA,+BAAoB,EAAC,aAAa,CAAC,CAAC;IAErD,OAAO,CACL,wBAAC,mCAAc,OACT,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,kBAAkB,EAAE,gBAAgB,CAAC,EACrD,KAAK,EAAE,YAAY;QACnB,yEAAyE;QACzE,sDAAsD;QACtD,sDAAsD;QACtD,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAC1C,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,EAC/D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,aAExF,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,wBAAC,6BAAQ,IAAC,SAAS,EAAC,8BAA8B,aAChD,uBAAC,6BAAQ,IACP,SAAS,EAAE,IAAA,cAAI,EAAC,wBAAwB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,EACzE,WAAW,EAAE,WAAW,GACxB,EACF,iCAAK,SAAS,EAAC,0BAA0B,aACvC,uBAAC,2BAAU,IACT,IAAI,EAAC,WAAW,EAChB,IAAI,EAAE,uBAAC,uBAAY,KAAG,gBACV,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,EACxC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,EACF,gCAAK,SAAS,EAAC,oCAAoC,GAAG,EACtD,uBAAC,2BAAU,IACT,IAAI,EAAC,WAAW,EAChB,IAAI,EAAE,uBAAC,kBAAO,KAAG,gBACL,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,EACxC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,IACE,IACG,EACX,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IAC3C,CAClB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;AAEnD,mCAAW","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport {\n  Input as RACInput,\n  NumberField as RACNumberField,\n  type NumberFieldProps as RACNumberFieldProps,\n  Group as RACGroup,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconAdd, IconSubtract } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface NumberFieldProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<number>,\n    Pick<\n      RACNumberFieldProps,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'autoFocus'\n      | 'minValue'\n      | 'maxValue'\n      | 'step'\n      | 'formatOptions'\n      | 'onFocus'\n      | 'onBlur'\n    > {\n  /** The current value (controlled). A `null` value means an empty field. */\n  value?: number | null;\n  /** The default value (uncontrolled). A `null` value means an empty field. */\n  defaultValue?: number | null;\n  /** Handler that is called when the value changes. A `null` value means an empty field. */\n  onChange?: (value: number | null) => void;\n}\n\nfunction NumberField(\n  {\n    label,\n    description,\n    error: errorMessage,\n    placeholder,\n    UNSAFE_className,\n    UNSAFE_style,\n    value,\n    defaultValue,\n    onChange,\n    ...props\n  }: NumberFieldProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('NumberField requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  const messages = useLocalizedMessages('numberField');\n\n  return (\n    <RACNumberField\n      {...props}\n      ref={ref}\n      className={clsx('cim-number-field', UNSAFE_className)}\n      style={UNSAFE_style}\n      // NumberField uses `NaN` to signify an empty value, which is unintuitive\n      // https://github.com/adobe/react-spectrum/issues/5524\n      // https://github.com/adobe/react-spectrum/issues/6971\n      value={value === null ? Number.NaN : value}\n      defaultValue={defaultValue === null ? Number.NaN : defaultValue}\n      onChange={onChange ? (value) => onChange(Number.isNaN(value) ? null : value) : undefined}\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-number-field-input-group\">\n        <RACInput\n          className={clsx('cim-number-field-input', textStyle({ variant: 'body' }))}\n          placeholder={placeholder}\n        />\n        <div className=\"cim-number-field-spinner\">\n          <IconButton\n            slot=\"decrement\"\n            icon={<IconSubtract />}\n            aria-label={messages.format('decrement')}\n            variant=\"tertiary\"\n            size=\"small\"\n          />\n          <div className=\"cim-number-field-spinner-separator\" />\n          <IconButton\n            slot=\"increment\"\n            icon={<IconAdd />}\n            aria-label={messages.format('increment')}\n            variant=\"tertiary\"\n            size=\"small\"\n          />\n        </div>\n      </RACGroup>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACNumberField>\n  );\n}\n\n/**\n * Allows users to edit a number with a keyboard or increment/decrement buttons.\n *\n * See [number field usage guidelines](https://ui.cimpress.io/components/number-field/).\n */\nconst _NumberField = withStyleProps(forwardRef(NumberField), 'NumberField');\n\nexport { _NumberField as NumberField };\n"]}
+{"version":3,"file":"number-field.js","sourceRoot":"","sources":["../../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAK+B;AAC/B,yDAAkD;AAClD,kDAA2D;AAC3D,mDAA6D;AAC7D,qFAA6E;AAC7E,mEAA2D;AAC3D,6DAAsD;AACtD,wEAA4G;AAE5G,qDAAmD;AA4BnD,SAAS,WAAW,CAClB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACS,EACnB,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,IAAA,+BAAoB,EAAC,aAAa,CAAC,CAAC;IAErD,OAAO,CACL,wBAAC,mCAAc,OACT,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,kBAAkB,EAAE,gBAAgB,CAAC,EACrD,KAAK,EAAE,YAAY;QACnB,yEAAyE;QACzE,sDAAsD;QACtD,sDAAsD;QACtD,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAC1C,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,EAC/D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,aAExF,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,wBAAC,6BAAQ,IAAC,SAAS,EAAC,8BAA8B,aAChD,uBAAC,6BAAQ,IACP,SAAS,EAAE,IAAA,cAAI,EAAC,wBAAwB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,EACzE,WAAW,EAAE,WAAW,GACxB,EACF,iCAAK,SAAS,EAAC,0BAA0B,aACvC,uBAAC,2BAAU,IACT,IAAI,EAAC,WAAW,EAChB,IAAI,EAAE,uBAAC,uBAAY,KAAG,gBACV,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,EACxC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,EACF,gCAAK,SAAS,EAAC,oCAAoC,GAAG,EACtD,uBAAC,2BAAU,IACT,IAAI,EAAC,WAAW,EAChB,IAAI,EAAE,uBAAC,kBAAO,KAAG,gBACL,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,EACxC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,IACE,IACG,EACX,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IAC3C,CAClB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;AAEnD,mCAAW","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport {\n  Input as RACInput,\n  NumberField as RACNumberField,\n  type NumberFieldProps as RACNumberFieldProps,\n  Group as RACGroup,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconAdd, IconSubtract } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface NumberFieldProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<number>,\n    Pick<\n      RACNumberFieldProps,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'autoFocus'\n      | 'minValue'\n      | 'maxValue'\n      | 'step'\n      | 'formatOptions'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onKeyDown'\n    > {\n  /** The current value (controlled). A `null` value means an empty field. */\n  value?: number | null;\n  /** The default value (uncontrolled). A `null` value means an empty field. */\n  defaultValue?: number | null;\n  /** Handler that is called when the value changes. A `null` value means an empty field. */\n  onChange?: (value: number | null) => void;\n}\n\nfunction NumberField(\n  {\n    label,\n    description,\n    error: errorMessage,\n    placeholder,\n    UNSAFE_className,\n    UNSAFE_style,\n    value,\n    defaultValue,\n    onChange,\n    ...props\n  }: NumberFieldProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('NumberField requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  const messages = useLocalizedMessages('numberField');\n\n  return (\n    <RACNumberField\n      {...props}\n      ref={ref}\n      className={clsx('cim-number-field', UNSAFE_className)}\n      style={UNSAFE_style}\n      // NumberField uses `NaN` to signify an empty value, which is unintuitive\n      // https://github.com/adobe/react-spectrum/issues/5524\n      // https://github.com/adobe/react-spectrum/issues/6971\n      value={value === null ? Number.NaN : value}\n      defaultValue={defaultValue === null ? Number.NaN : defaultValue}\n      onChange={onChange ? (value) => onChange(Number.isNaN(value) ? null : value) : undefined}\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-number-field-input-group\">\n        <RACInput\n          className={clsx('cim-number-field-input', textStyle({ variant: 'body' }))}\n          placeholder={placeholder}\n        />\n        <div className=\"cim-number-field-spinner\">\n          <IconButton\n            slot=\"decrement\"\n            icon={<IconSubtract />}\n            aria-label={messages.format('decrement')}\n            variant=\"tertiary\"\n            size=\"small\"\n          />\n          <div className=\"cim-number-field-spinner-separator\" />\n          <IconButton\n            slot=\"increment\"\n            icon={<IconAdd />}\n            aria-label={messages.format('increment')}\n            variant=\"tertiary\"\n            size=\"small\"\n          />\n        </div>\n      </RACGroup>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACNumberField>\n  );\n}\n\n/**\n * Allows users to edit a number with a keyboard or increment/decrement buttons.\n *\n * See [number field usage guidelines](https://ui.cimpress.io/components/number-field/).\n */\nconst _NumberField = withStyleProps(forwardRef(NumberField), 'NumberField');\n\nexport { _NumberField as NumberField };\n"]}

package/dist/commonjs/components/text-inputs/text-area.d.ts

@@ -1,6 +1,16 @@
+import { type RefObject } from 'react';
 import { type TextAreaProps as RACTextAreaProps, type TextFieldProps as RACTextFieldProps } from 'react-aria-components';
 import type { CommonProps, FieldWithPlaceholderProps } from '../types.js';
-export interface TextAreaProps extends CommonProps, FieldWithPlaceholderProps<string>, Pick<RACTextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'type' | 'autoFocus' | 'autoComplete' | 'inputMode' | 'minLength' | 'maxLength' | 'onFocus' | 'onBlur'>, Pick<RACTextAreaProps, 'autoCapitalize' | 'autoCorrect' | 'rows' | 'spellCheck' | 'wrap'> {
+export interface TextAreaProps extends CommonProps, FieldWithPlaceholderProps<string>, Pick<RACTextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'type' | 'autoFocus' | 'autoComplete' | 'inputMode' | 'minLength' | 'maxLength' | 'onFocus' | 'onBlur' | 'onKeyDown'>, Pick<RACTextAreaProps, 'autoCapitalize' | 'autoCorrect' | 'rows' | 'spellCheck' | 'wrap'> {
+    /** A React ref that allows access to the imperative API of this component. */
+    apiRef?: RefObject<TextAreaApi | null>;
+}
+/** The imperative API exposed by the `TextArea` component. */
+export interface TextAreaApi {
+    /** Focuses the text area. */
+    focus: () => void;
+    /** Selects the contents of the text area. */
+    select: () => void;
 }
 /**
  * Allows users to enter multiple lines of text with a keyboard.

package/dist/commonjs/components/text-inputs/text-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-area.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,cAAc,IAAI,iBAAiB,EAEzC,MAAM,uBAAuB,CAAC;AAK/B,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,WAAW,aACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,iBAAiB,EACf,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,WAAW,GACX,WAAW,GACX,SAAS,GACT,QAAQ,CACX,EACD,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,MAAM,CAAC;CAAG;AAwDhG;;;;GAIG;AACH,QAAA,MAAM,SAAS,+JAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-area.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAkD,MAAM,OAAO,CAAC;AACvF,OAAO,EAGL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,cAAc,IAAI,iBAAiB,EAEzC,MAAM,uBAAuB,CAAC;AAK/B,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,WAAW,aACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,iBAAiB,EACf,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,WAAW,GACX,WAAW,GACX,SAAS,GACT,QAAQ,GACR,WAAW,CACd,EACD,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,MAAM,CAAC;IAC3F,8EAA8E;IAC9E,MAAM,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACxC;AAED,8DAA8D;AAC9D,MAAM,WAAW,WAAW;IAC1B,6BAA6B;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,6CAA6C;IAC7C,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAkED;;;;GAIG;AACH,QAAA,MAAM,SAAS,+JAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}

package/dist/commonjs/components/text-inputs/text-area.js

@@ -14,7 +14,7 @@ const use_production_warning_js_1 = require("../../utils/use-production-warning.
 const with_style_props_js_1 = require("../../with-style-props.js");
 const form_field_js_1 = require("../internal/form-field/form-field.js");
 const utils_js_1 = require("../typography/utils.js");
-function TextArea({ label, description, error: errorMessage, placeholder, autoCapitalize, autoCorrect, rows, spellCheck, wrap, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+function TextArea({ label, description, error: errorMessage, placeholder, autoCapitalize, autoCorrect, rows, spellCheck, wrap, UNSAFE_className, UNSAFE_style, apiRef, ...props }, ref) {
     const textAreaRef = (0, react_1.useRef)(null);
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
     (0, use_production_warning_js_1.useProductionWarning)(() => {
@@ -22,6 +22,10 @@ function TextArea({ label, description, error: errorMessage, placeholder, autoCa
             console.warn('TextArea requires one of label / aria-label / aria-labelledby for accessibility');
         }
     }, [label, ariaLabel, ariaLabelledBy]);
+    (0, react_1.useImperativeHandle)(apiRef, () => ({
+        focus: () => textAreaRef.current?.focus(),
+        select: () => textAreaRef.current?.select(),
+    }), []);
     return ((0, jsx_runtime_1.jsx)(react_aria_components_1.TextField, { ...props, ref: ref, className: (0, clsx_1.default)('cim-text-area', UNSAFE_className), style: UNSAFE_style, children: ({ isDisabled, isRequired }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: isRequired, isDisabled: isDisabled, children: label }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Group, { className: "cim-text-area-input-group", onClick: () => textAreaRef.current?.focus(), children: (0, jsx_runtime_1.jsx)(react_aria_components_1.TextArea, { ref: textAreaRef, className: (0, clsx_1.default)('cim-text-area-input', (0, utils_js_1.textStyle)({ variant: 'body' })), placeholder: placeholder, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, rows: rows, spellCheck: spellCheck, wrap: wrap }) }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] })) }));
 }
 /**

package/dist/commonjs/components/text-inputs/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-area.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAkD;AAClD,iEAM+B;AAC/B,yDAAkD;AAClD,qFAA6E;AAC7E,mEAA2D;AAC3D,wEAA4G;AAE5G,qDAAmD;AAyBnD,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,WAAW,EACX,cAAc,EACd,WAAW,EACX,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACM,EAChB,GAAiC;IAEjC,MAAM,WAAW,GAAG,IAAA,cAAM,EAAsB,IAAI,CAAC,CAAC;IAEtD,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,uBAAC,iCAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACvG,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAC/B,6DACE,uBAAC,8BAAc,IAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,YAC3D,KAAK,GACS,EACjB,uBAAC,6BAAQ,IAAC,SAAS,EAAC,2BAA2B,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,YACzF,uBAAC,gCAAW,IACV,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,EACtE,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,GACV,GACO,EACX,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IACzD,CACJ,GACY,CAChB,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 { useRef, type ForwardedRef } from 'react';\nimport {\n  TextArea as RACTextArea,\n  TextField as RACTextField,\n  type TextAreaProps as RACTextAreaProps,\n  type TextFieldProps as RACTextFieldProps,\n  Group as RACGroup,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface TextAreaProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<string>,\n    Pick<\n      RACTextFieldProps,\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'type'\n      | 'autoFocus'\n      | 'autoComplete'\n      | 'inputMode'\n      | 'minLength'\n      | 'maxLength'\n      | 'onFocus'\n      | 'onBlur'\n    >,\n    Pick<RACTextAreaProps, 'autoCapitalize' | 'autoCorrect' | 'rows' | 'spellCheck' | 'wrap'> {}\n\nfunction TextArea(\n  {\n    label,\n    description,\n    error: errorMessage,\n    placeholder,\n    autoCapitalize,\n    autoCorrect,\n    rows,\n    spellCheck,\n    wrap,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: TextAreaProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('TextArea requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACTextField {...props} ref={ref} className={clsx('cim-text-area', UNSAFE_className)} style={UNSAFE_style}>\n      {({ isDisabled, isRequired }) => (\n        <>\n          <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n            {label}\n          </FormFieldLabel>\n          <RACGroup className=\"cim-text-area-input-group\" onClick={() => textAreaRef.current?.focus()}>\n            <RACTextArea\n              ref={textAreaRef}\n              className={clsx('cim-text-area-input', textStyle({ variant: 'body' }))}\n              placeholder={placeholder}\n              autoCapitalize={autoCapitalize}\n              autoCorrect={autoCorrect}\n              rows={rows}\n              spellCheck={spellCheck}\n              wrap={wrap}\n            />\n          </RACGroup>\n          <FormFieldError>{errorMessage}</FormFieldError>\n          <FormFieldDescription>{description}</FormFieldDescription>\n        </>\n      )}\n    </RACTextField>\n  );\n}\n\n/**\n * Allows users to enter multiple lines of text with a keyboard.\n *\n * See [text area usage guidelines](https://ui.cimpress.io/components/text-area/).\n */\nconst _TextArea = withStyleProps(forwardRef(TextArea), 'TextArea');\n\nexport { _TextArea as TextArea };\n"]}
+{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-area.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAuF;AACvF,iEAM+B;AAC/B,yDAAkD;AAClD,qFAA6E;AAC7E,mEAA2D;AAC3D,wEAA4G;AAE5G,qDAAmD;AAqCnD,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,WAAW,EACX,cAAc,EACd,WAAW,EACX,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,gBAAgB,EAChB,YAAY,EACZ,MAAM,EACN,GAAG,KAAK,EACM,EAChB,GAAiC;IAEjC,MAAM,WAAW,GAAG,IAAA,cAAM,EAAsB,IAAI,CAAC,CAAC;IAEtD,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,IAAA,2BAAmB,EACjB,MAAM,EACN,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE;QACzC,MAAM,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE;KAC5C,CAAC,EACF,EAAE,CACH,CAAC;IAEF,OAAO,CACL,uBAAC,iCAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACvG,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAC/B,6DACE,uBAAC,8BAAc,IAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,YAC3D,KAAK,GACS,EACjB,uBAAC,6BAAQ,IAAC,SAAS,EAAC,2BAA2B,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,YACzF,uBAAC,gCAAW,IACV,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,EACtE,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,GACV,GACO,EACX,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IACzD,CACJ,GACY,CAChB,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 RefObject, useRef, type ForwardedRef, useImperativeHandle } from 'react';\nimport {\n  TextArea as RACTextArea,\n  TextField as RACTextField,\n  type TextAreaProps as RACTextAreaProps,\n  type TextFieldProps as RACTextFieldProps,\n  Group as RACGroup,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface TextAreaProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<string>,\n    Pick<\n      RACTextFieldProps,\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'type'\n      | 'autoFocus'\n      | 'autoComplete'\n      | 'inputMode'\n      | 'minLength'\n      | 'maxLength'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onKeyDown'\n    >,\n    Pick<RACTextAreaProps, 'autoCapitalize' | 'autoCorrect' | 'rows' | 'spellCheck' | 'wrap'> {\n  /** A React ref that allows access to the imperative API of this component. */\n  apiRef?: RefObject<TextAreaApi | null>;\n}\n\n/** The imperative API exposed by the `TextArea` component. */\nexport interface TextAreaApi {\n  /** Focuses the text area. */\n  focus: () => void;\n  /** Selects the contents of the text area. */\n  select: () => void;\n}\n\nfunction TextArea(\n  {\n    label,\n    description,\n    error: errorMessage,\n    placeholder,\n    autoCapitalize,\n    autoCorrect,\n    rows,\n    spellCheck,\n    wrap,\n    UNSAFE_className,\n    UNSAFE_style,\n    apiRef,\n    ...props\n  }: TextAreaProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('TextArea requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  useImperativeHandle(\n    apiRef,\n    () => ({\n      focus: () => textAreaRef.current?.focus(),\n      select: () => textAreaRef.current?.select(),\n    }),\n    [],\n  );\n\n  return (\n    <RACTextField {...props} ref={ref} className={clsx('cim-text-area', UNSAFE_className)} style={UNSAFE_style}>\n      {({ isDisabled, isRequired }) => (\n        <>\n          <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n            {label}\n          </FormFieldLabel>\n          <RACGroup className=\"cim-text-area-input-group\" onClick={() => textAreaRef.current?.focus()}>\n            <RACTextArea\n              ref={textAreaRef}\n              className={clsx('cim-text-area-input', textStyle({ variant: 'body' }))}\n              placeholder={placeholder}\n              autoCapitalize={autoCapitalize}\n              autoCorrect={autoCorrect}\n              rows={rows}\n              spellCheck={spellCheck}\n              wrap={wrap}\n            />\n          </RACGroup>\n          <FormFieldError>{errorMessage}</FormFieldError>\n          <FormFieldDescription>{description}</FormFieldDescription>\n        </>\n      )}\n    </RACTextField>\n  );\n}\n\n/**\n * Allows users to enter multiple lines of text with a keyboard.\n *\n * See [text area usage guidelines](https://ui.cimpress.io/components/text-area/).\n */\nconst _TextArea = withStyleProps(forwardRef(TextArea), 'TextArea');\n\nexport { _TextArea as TextArea };\n"]}

package/dist/commonjs/components/text-inputs/text-field.d.ts

@@ -1,11 +1,21 @@
+import { type RefObject } from 'react';
 import { type TextFieldProps as RACTextFieldProps } from 'react-aria-components';
 import type { AffixProps, CommonProps, FieldWithPlaceholderProps } from '../types.js';
-export interface TextFieldProps extends CommonProps, FieldWithPlaceholderProps<string>, AffixProps, Pick<RACTextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'type' | 'autoFocus' | 'autoComplete' | 'inputMode' | 'minLength' | 'maxLength' | 'pattern' | 'onFocus' | 'onBlur'> {
+export interface TextFieldProps extends CommonProps, FieldWithPlaceholderProps<string>, AffixProps, Pick<RACTextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'type' | 'autoFocus' | 'autoComplete' | 'inputMode' | 'minLength' | 'maxLength' | 'pattern' | 'onFocus' | 'onBlur' | 'onKeyDown'> {
     /**
      * Whether to render a button that can be used to clear the text field.
      * @default false
      */
     isClearable?: boolean;
+    /** A React ref that allows access to the imperative API of this component. */
+    apiRef?: RefObject<TextFieldApi | null>;
+}
+/** The imperative API exposed by the `TextField` component. */
+export interface TextFieldApi {
+    /** Focuses the input field. */
+    focus: () => void;
+    /** Selects the contents of the input field. */
+    select: () => void;
 }
 /**
  * Allows users to enter a single line of text with a keyboard.

package/dist/commonjs/components/text-inputs/text-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-field.tsx"],"names":[],"mappings":"AAMA,OAAO,EACL,KAAK,cAAc,IAAI,iBAAiB,EAIzC,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,cACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,UAAU,EACV,IAAI,CACF,iBAAiB,EACf,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,WAAW,GACX,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,CACX;IACH;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqHD;;;;GAIG;AACH,QAAA,MAAM,UAAU,gKAAqD,CAAC;AAEtE,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-field.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAyC,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAC3G,OAAO,EACL,KAAK,cAAc,IAAI,iBAAiB,EAIzC,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,cACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,UAAU,EACV,IAAI,CACF,iBAAiB,EACf,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,WAAW,GACX,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,GACR,WAAW,CACd;IACH;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;CACzC;AAED,+DAA+D;AAC/D,MAAM,WAAW,YAAY;IAC3B,+BAA+B;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAmID;;;;GAIG;AACH,QAAA,MAAM,UAAU,gKAAqD,CAAC;AAEtE,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}

package/dist/commonjs/components/text-inputs/text-field.js

@@ -18,18 +18,23 @@ const with_style_props_js_1 = require("../../with-style-props.js");
 const form_field_js_1 = require("../internal/form-field/form-field.js");
 const x_button_js_1 = require("../internal/x-button/x-button.js");
 const utils_js_1 = require("../typography/utils.js");
-function TextField({ label, description, error: errorMessage, placeholder, prefix, suffix, UNSAFE_className, UNSAFE_style, isClearable = false, value: consumerValue, defaultValue: consumerDefaultValue, onChange, ...props }, ref) {
+function TextField({ label, description, error: errorMessage, placeholder, prefix, suffix, UNSAFE_className, UNSAFE_style, isClearable = false, value: consumerValue, defaultValue: consumerDefaultValue, onChange, apiRef, ...props }, ref) {
     const { isDisabled, isReadOnly } = props;
     const inputRef = (0, react_1.useRef)(null);
     const [value, setValue] = (0, utils_2.useControlledState)(consumerValue, consumerDefaultValue ?? '', onChange);
     const messages = (0, localization_provider_js_1.useLocalizedMessages)('common');
     const clearDescriptionId = (0, utils_1.useId)();
+    (0, react_1.useImperativeHandle)(apiRef, () => ({
+        focus: () => inputRef.current?.focus(),
+        select: () => inputRef.current?.select(),
+    }), []);
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    const isFieldClearable = isClearable && !isDisabled && !isReadOnly;
     function onKeyDown(e) {
-        if (isDisabled || isReadOnly) {
+        if (!isFieldClearable) {
             return;
         }
-        if (e.key === 'Escape' && isClearable) {
+        if (e.key === 'Escape') {
             e.preventDefault();
             setValue('');
         }
@@ -39,9 +44,9 @@ function TextField({ label, description, error: errorMessage, placeholder, prefi
             console.warn('TextField requires one of label / aria-label / aria-labelledby for accessibility');
         }
     }, [label, ariaLabel, ariaLabelledBy]);
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.TextField, { ...props, ref: ref, className: (0, clsx_1.default)('cim-text-field', UNSAFE_className), style: UNSAFE_style, value: value, onChange: setValue, "aria-describedby": [props['aria-describedby'], isClearable ? clearDescriptionId : undefined]
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.TextField, { ...props, ref: ref, className: (0, clsx_1.default)('cim-text-field', UNSAFE_className), style: UNSAFE_style, value: value, onChange: setValue, "aria-describedby": [props['aria-describedby'], isFieldClearable ? clearDescriptionId : undefined]
             .filter(Boolean)
-            .join(' '), children: ({ isDisabled, isRequired }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: isRequired, isDisabled: isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-text-field-input-group", onClick: () => inputRef.current?.focus(), children: [prefix && ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-text-field-affix', (0, utils_js_1.textStyle)({ variant: 'body', tone: isDisabled ? 'muted' : 'subtle' })), "aria-hidden": true, children: prefix })), (0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { ref: inputRef, className: (0, clsx_1.default)('cim-text-field-input', (0, utils_js_1.textStyle)({ variant: 'body' })), placeholder: placeholder, onKeyDown: onKeyDown }), isClearable && value !== '' && !isDisabled && !isReadOnly && ((0, jsx_runtime_1.jsx)(x_button_js_1.XButton, { slot: null, UNSAFE_className: "cim-text-field-clear", "aria-label": messages.format('clearValue'), onPress: () => setValue(''), iconType: "circled", excludeFromTabOrder: true })), suffix && ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-text-field-affix', (0, utils_js_1.textStyle)({ variant: 'body', tone: isDisabled ? 'muted' : 'subtle' })), "aria-hidden": true, children: suffix }))] }), (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)("p", { id: clearDescriptionId, className: "cim-text-field-clear-description", hidden: true, children: messages.format('clearValueDescription') })] })) }));
+            .join(' '), children: ({ isDisabled, isRequired }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: isRequired, isDisabled: isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-text-field-input-group", onClick: () => inputRef.current?.focus(), children: [prefix && ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-text-field-affix', (0, utils_js_1.textStyle)({ variant: 'body', tone: isDisabled ? 'muted' : 'subtle' })), "aria-hidden": true, children: prefix })), (0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { ref: inputRef, className: (0, clsx_1.default)('cim-text-field-input', (0, utils_js_1.textStyle)({ variant: 'body' })), placeholder: placeholder, onKeyDown: onKeyDown }), isFieldClearable && value !== '' && ((0, jsx_runtime_1.jsx)(x_button_js_1.XButton, { slot: null, UNSAFE_className: "cim-text-field-clear", "aria-label": messages.format('clearValue'), onPress: () => setValue(''), iconType: "circled", excludeFromTabOrder: true })), suffix && ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-text-field-affix', (0, utils_js_1.textStyle)({ variant: 'body', tone: isDisabled ? 'muted' : 'subtle' })), "aria-hidden": true, children: suffix }))] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), isFieldClearable && ((0, jsx_runtime_1.jsx)("p", { id: clearDescriptionId, className: "cim-text-field-clear-description", hidden: true, children: messages.format('clearValueDescription') }))] })) }));
 }
 /**
  * Allows users to enter a single line of text with a keyboard.