@cimpress-ui/react 1.33.0 → 1.34.0

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

@@ -3,7 +3,7 @@ import type { CommonProps, Href, NavigationProps, WithRequired } from '../types.
 export interface AppHeaderTitleLinkProps extends WithRequired<NavigationProps, 'href'> {
 }
 export interface AppHeaderProps extends CommonProps {
-    /** The title displayed in the header, usually the application name. Rendered as an `<h1>` element. */
+    /** The title displayed in the header, usually the application name.  */
     title: string;
     /** The props of the link that is rendered around the header title. */
     titleLink: Href | AppHeaderTitleLinkProps;

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,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQtE,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMpF,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;IAC/B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B;AAqED;;;;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,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQtE,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMpF,MAAM,WAAW,uBAAwB,SAAQ,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;CAAG;AAEzF,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,wEAAwE;IACxE,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;IAC/B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B;AAqED;;;;GAIG;AACH,QAAA,MAAM,UAAU,+GAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}

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

@@ -23,7 +23,7 @@ function AppHeader({ title, titleLink, tools, UNSTABLE_navButton: navButton, UNS
     const isMobile = (0, use_is_mobile_js_1.useIsMobile)();
     const appShellContext = (0, react_1.useContext)(app_shell_context_js_1.AppShellContext);
     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, "data-react-aria-top-layer": appShellContext?.mobileNavIsOpen || undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-app-header-title", children: [navButton !== undefined ? (navButton) : appShellContext ? ((0, jsx_runtime_1.jsx)(nav_button_js_1.UNSTABLE_AppHeaderNavButton, { "data-app-shell-controlled": true })) : null, (0, jsx_runtime_1.jsx)(cimpress_logo_js_1.CimpressLogo, { height: 24 }), (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 }) }), postTitle] }), search && (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-search", children: search }), (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools", children: isMobile && tools ? ((0, jsx_runtime_1.jsxs)(popover_js_1.PopoverRoot, { children: [(0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenuMoreVertical, {}), "aria-label": "Expand/collapse header", variant: "tertiary", size: "small" }), (0, jsx_runtime_1.jsx)(popover_js_1.Popover, { "aria-label": "Expanded header", placement: "bottom end", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools-collapsed", children: tools }) })] })) : (tools) })] }));
+    return ((0, jsx_runtime_1.jsxs)("header", { ...props, ref: ref, className: (0, clsx_1.default)('cim-app-header', UNSAFE_className), style: UNSAFE_style, "data-react-aria-top-layer": appShellContext?.mobileNavIsOpen || undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-app-header-title", children: [navButton !== undefined ? (navButton) : appShellContext ? ((0, jsx_runtime_1.jsx)(nav_button_js_1.UNSTABLE_AppHeaderNavButton, { "data-app-shell-controlled": true })) : null, (0, jsx_runtime_1.jsx)(cimpress_logo_js_1.CimpressLogo, { height: 24 }), (0, jsx_runtime_1.jsx)(divider_js_1.Divider, { orientation: "vertical" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", 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 }) }), postTitle] }), search && (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-search", children: search }), (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools", children: isMobile && tools ? ((0, jsx_runtime_1.jsxs)(popover_js_1.PopoverRoot, { children: [(0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenuMoreVertical, {}), "aria-label": "Expand/collapse header", variant: "tertiary", size: "small" }), (0, jsx_runtime_1.jsx)(popover_js_1.Popover, { "aria-label": "Expanded header", placement: "bottom end", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools-collapsed", children: tools }) })] })) : (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;AACxB,iCAAsE;AACtE,yDAAkD;AAClD,mDAA4D;AAC5D,mEAA2D;AAC3D,4EAAoE;AACpE,6DAAsD;AACtD,sDAAgD;AAChD,sDAA6D;AAE7D,mDAA6C;AAC7C,mDAA6C;AAC7C,yDAAkD;AAClD,mDAAoF;AAgBpF,SAAS,SAAS,CAChB,EACE,KAAK,EACL,SAAS,EACT,KAAK,EACL,kBAAkB,EAAE,SAAS,EAC7B,kBAAkB,EAAE,SAAS,EAC7B,eAAe,EAAE,MAAM,EACvB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACO,EACjB,GAAiC;IAEjC,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAC/B,MAAM,eAAe,GAAG,IAAA,kBAAU,EAAC,sCAAe,CAAC,CAAC;IACpD,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,uCACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EACnD,KAAK,EAAE,YAAY,+BACQ,eAAe,EAAE,eAAe,IAAI,SAAS,aAExE,iCAAK,SAAS,EAAC,sBAAsB,aAClC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CACzB,SAAS,CACV,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CACpB,uBAAC,2CAAkB,wCAA6B,CACjD,CAAC,CAAC,CAAC,IAAI,EACR,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,EAEN,SAAS,IACN,EAEL,MAAM,IAAI,gCAAK,SAAS,EAAC,uBAAuB,YAAE,MAAM,GAAO,EAEhE,gCAAK,SAAS,EAAC,sBAAsB,YAClC,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,CACnB,wBAAC,wBAAW,eACV,uBAAC,2BAAU,IACT,IAAI,EAAE,uBAAC,+BAAoB,KAAG,gBAEnB,wBAAwB,EACnC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,EACF,uBAAC,oBAAO,kBAAY,iBAAiB,EAAC,SAAS,EAAC,YAAY,YAC1D,gCAAK,SAAS,EAAC,gCAAgC,YAAE,KAAK,GAAO,GACrD,IACE,CACf,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACG,IACC,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 { useContext, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenuMoreVertical } from '../../icons/index.js';\nimport { useIsMobile } from '../../utils/use-is-mobile.js';\nimport { AppShellContext } from '../app-shell/app-shell-context.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { Divider } from '../divider/divider.js';\nimport { Popover, PopoverRoot } from '../popover/popover.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';\nimport { UNSTABLE_AppHeaderNavButton as AppHeaderNavButton } from './nav-button.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  UNSTABLE_postTitle?: ReactNode;\n  UNSTABLE_search?: ReactNode;\n}\n\nfunction AppHeader(\n  {\n    title,\n    titleLink,\n    tools,\n    UNSTABLE_navButton: navButton,\n    UNSTABLE_postTitle: postTitle,\n    UNSTABLE_search: search,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: AppHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const isMobile = useIsMobile();\n  const appShellContext = useContext(AppShellContext);\n  const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };\n\n  return (\n    <header\n      {...props}\n      ref={ref}\n      className={clsx('cim-app-header', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-react-aria-top-layer={appShellContext?.mobileNavIsOpen || undefined}\n    >\n      <div className=\"cim-app-header-title\">\n        {navButton !== undefined ? (\n          navButton\n        ) : appShellContext ? (\n          <AppHeaderNavButton data-app-shell-controlled />\n        ) : null}\n        <CimpressLogo height={24} />\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\n        {postTitle}\n      </div>\n\n      {search && <div className=\"cim-app-header-search\">{search}</div>}\n\n      <div className=\"cim-app-header-tools\">\n        {isMobile && tools ? (\n          <PopoverRoot>\n            <IconButton\n              icon={<IconMenuMoreVertical />}\n              // TODO: i18n\n              aria-label=\"Expand/collapse header\"\n              variant=\"tertiary\"\n              size=\"small\"\n            />\n            <Popover aria-label=\"Expanded header\" placement=\"bottom end\">\n              <div className=\"cim-app-header-tools-collapsed\">{tools}</div>\n            </Popover>\n          </PopoverRoot>\n        ) : (\n          tools\n        )}\n      </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;AACxB,iCAAsE;AACtE,yDAAkD;AAClD,mDAA4D;AAC5D,mEAA2D;AAC3D,4EAAoE;AACpE,6DAAsD;AACtD,sDAAgD;AAChD,sDAA6D;AAE7D,mDAA6C;AAC7C,mDAA6C;AAC7C,yDAAkD;AAClD,mDAAoF;AAgBpF,SAAS,SAAS,CAChB,EACE,KAAK,EACL,SAAS,EACT,KAAK,EACL,kBAAkB,EAAE,SAAS,EAC7B,kBAAkB,EAAE,SAAS,EAC7B,eAAe,EAAE,MAAM,EACvB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACO,EACjB,GAAiC;IAEjC,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAC/B,MAAM,eAAe,GAAG,IAAA,kBAAU,EAAC,sCAAe,CAAC,CAAC;IACpD,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,uCACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EACnD,KAAK,EAAE,YAAY,+BACQ,eAAe,EAAE,eAAe,IAAI,SAAS,aAExE,iCAAK,SAAS,EAAC,sBAAsB,aAClC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CACzB,SAAS,CACV,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CACpB,uBAAC,2CAAkB,wCAA6B,CACjD,CAAC,CAAC,CAAC,IAAI,EACR,uBAAC,+BAAY,IAAC,MAAM,EAAE,EAAE,GAAI,EAC5B,uBAAC,oBAAO,IAAC,WAAW,EAAC,UAAU,GAAG,EAClC,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YAC3C,uBAAC,cAAI,OAAK,cAAc,EAAE,gBAAgB,EAAC,2BAA2B,YACnE,KAAK,GACD,GACF,EAEN,SAAS,IACN,EAEL,MAAM,IAAI,gCAAK,SAAS,EAAC,uBAAuB,YAAE,MAAM,GAAO,EAEhE,gCAAK,SAAS,EAAC,sBAAsB,YAClC,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,CACnB,wBAAC,wBAAW,eACV,uBAAC,2BAAU,IACT,IAAI,EAAE,uBAAC,+BAAoB,KAAG,gBAEnB,wBAAwB,EACnC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,EACF,uBAAC,oBAAO,kBAAY,iBAAiB,EAAC,SAAS,EAAC,YAAY,YAC1D,gCAAK,SAAS,EAAC,gCAAgC,YAAE,KAAK,GAAO,GACrD,IACE,CACf,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACG,IACC,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 { useContext, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenuMoreVertical } from '../../icons/index.js';\nimport { useIsMobile } from '../../utils/use-is-mobile.js';\nimport { AppShellContext } from '../app-shell/app-shell-context.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { Divider } from '../divider/divider.js';\nimport { Popover, PopoverRoot } from '../popover/popover.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';\nimport { UNSTABLE_AppHeaderNavButton as AppHeaderNavButton } from './nav-button.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.  */\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  UNSTABLE_postTitle?: ReactNode;\n  UNSTABLE_search?: ReactNode;\n}\n\nfunction AppHeader(\n  {\n    title,\n    titleLink,\n    tools,\n    UNSTABLE_navButton: navButton,\n    UNSTABLE_postTitle: postTitle,\n    UNSTABLE_search: search,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: AppHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const isMobile = useIsMobile();\n  const appShellContext = useContext(AppShellContext);\n  const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };\n\n  return (\n    <header\n      {...props}\n      ref={ref}\n      className={clsx('cim-app-header', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-react-aria-top-layer={appShellContext?.mobileNavIsOpen || undefined}\n    >\n      <div className=\"cim-app-header-title\">\n        {navButton !== undefined ? (\n          navButton\n        ) : appShellContext ? (\n          <AppHeaderNavButton data-app-shell-controlled />\n        ) : null}\n        <CimpressLogo height={24} />\n        <Divider orientation=\"vertical\" />\n        <Text as=\"span\" variant=\"title-5\" tone=\"base\">\n          <Link {...titleLinkProps} UNSAFE_className=\"cim-app-header-title-link\">\n            {title}\n          </Link>\n        </Text>\n\n        {postTitle}\n      </div>\n\n      {search && <div className=\"cim-app-header-search\">{search}</div>}\n\n      <div className=\"cim-app-header-tools\">\n        {isMobile && tools ? (\n          <PopoverRoot>\n            <IconButton\n              icon={<IconMenuMoreVertical />}\n              // TODO: i18n\n              aria-label=\"Expand/collapse header\"\n              variant=\"tertiary\"\n              size=\"small\"\n            />\n            <Popover aria-label=\"Expanded header\" placement=\"bottom end\">\n              <div className=\"cim-app-header-tools-collapsed\">{tools}</div>\n            </Popover>\n          </PopoverRoot>\n        ) : (\n          tools\n        )}\n      </div>\n    </header>\n  );\n}\n\n/**\n * Displays a basic application header.\n *\n * See [app header usage guidelines](https://ui.cimpress.io/components/app-header/).\n */\nconst _AppHeader = forwardRef(AppHeader, 'AppHeader');\n\nexport { _AppHeader as AppHeader };\n"]}

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

@@ -1,5 +1,16 @@
 import type { ActionButtonProps, BaseButtonProps, TextButtonProps } from './types.js';
-export interface ButtonProps extends BaseButtonProps, TextButtonProps, ActionButtonProps {
+export interface ButtonProps extends BaseButtonProps, TextButtonProps, Omit<ActionButtonProps, 'isDisabled'> {
+    /**
+     * Whether the button is disabled.
+     *
+     * Optionally, you can provide an object with the `reason` property explaining why the button is disabled.
+     * This information will be shown to end-users as a tooltip or a popover.
+     *
+     * @default false
+     */
+    isDisabled?: boolean | {
+        reason: string;
+    };
 }
 /**
  * Displays a labelled button that allows users to perform an action.

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/button.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAEtF,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe,EAAE,iBAAiB;CAAG;AAmD3F;;;;GAIG;AACH,QAAA,MAAM,OAAO,gKAA+C,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/button.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAEtF,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe,EAAE,IAAI,CAAC,iBAAiB,EAAE,YAAY,CAAC;IAC1G;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3C;AAyDD;;;;GAIG;AACH,QAAA,MAAM,OAAO,gKAA+C,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC"}

package/dist/commonjs/components/button/button.js

@@ -13,13 +13,17 @@ const use_production_warning_js_1 = require("../../utils/use-production-warning.
 const with_style_props_js_1 = require("../../with-style-props.js");
 const spinner_js_1 = require("../internal/spinner/spinner.js");
 const constants_js_1 = require("./constants.js");
-function Button({ children, variant = 'secondary', tone = 'base', size = 'medium', iconStart, iconEnd, isLoading, loadingLabel, isDisabled, fullWidth, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+const disabled_with_reason_js_1 = require("./disabled-with-reason.js");
+function Button({ children, variant = 'secondary', tone = 'base', size = 'medium', iconStart, iconEnd, isLoading, loadingLabel, isDisabled, fullWidth, UNSAFE_className, UNSAFE_style, slot, ...props }, ref) {
     (0, use_production_warning_js_1.useProductionWarning)(() => {
         if (isLoading && !loadingLabel) {
             console.warn('Button requires loadingLabel when isLoading is true for accessibility');
         }
     }, [isLoading, loadingLabel]);
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { ...props, ref: ref, className: (0, clsx_1.default)('cim-button', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-tone": tone, "data-size": size, "data-full-width": fullWidth || undefined, isDisabled: isDisabled, isPending: isLoading, children: ({ isPending }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iconStart, (0, jsx_runtime_1.jsx)("span", { className: "cim-button-text", children: children }), iconEnd, isPending && (0, jsx_runtime_1.jsx)(spinner_js_1.InternalSpinner, { size: constants_js_1.SPINNER_SIZES[size], "aria-label": loadingLabel })] })) }));
+    const hasDisabledReason = typeof isDisabled === 'object' && isDisabled.reason !== '';
+    props = (0, disabled_with_reason_js_1.useDisableInteractions)(props, isDisabled ?? false);
+    const button = ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { ...props, ref: ref, slot: slot, className: (0, clsx_1.default)('cim-button', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-tone": tone, "data-size": size, "data-full-width": fullWidth || undefined, isPending: isLoading, children: ({ isPending }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iconStart, (0, jsx_runtime_1.jsx)("span", { className: "cim-button-text", children: children }), iconEnd, isPending && (0, jsx_runtime_1.jsx)(spinner_js_1.InternalSpinner, { size: constants_js_1.SPINNER_SIZES[size], "aria-label": loadingLabel })] })) }));
+    return hasDisabledReason ? (0, jsx_runtime_1.jsx)(disabled_with_reason_js_1.DisabledWithReason, { reason: isDisabled.reason, children: button }) : button;
 }
 /**
  * Displays a labelled button that allows users to perform an action.

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAA4D;AAC5D,yDAAkD;AAClD,qFAA6E;AAC7E,mEAA2D;AAC3D,+DAAiE;AACjE,iDAA+C;AAK/C,SAAS,MAAM,CACb,EACE,QAAQ,EACR,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACI,EACd,GAAoC;IAEpC,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,SAAS,IAAI,CAAC,YAAY,EAAE,CAAC;YAC/B,OAAO,CAAC,IAAI,CAAC,uEAAuE,CAAC,CAAC;QACxF,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAE9B,OAAO,CACL,uBAAC,8BAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,YAAY,EAAE,gBAAgB,CAAC,EAC/C,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,eACJ,IAAI,qBACE,SAAS,IAAI,SAAS,EACvC,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,YAEnB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAClB,6DACG,SAAS,EACV,iCAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EAClD,OAAO,EACP,SAAS,IAAI,uBAAC,4BAAe,IAAC,IAAI,EAAE,4BAAa,CAAC,IAAI,CAAC,gBAAc,YAAY,GAAI,IACrF,CACJ,GACS,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;AAEzC,yBAAM","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Button as RACButton } 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 { InternalSpinner } from '../internal/spinner/spinner.js';\nimport { SPINNER_SIZES } from './constants.js';\nimport type { ActionButtonProps, BaseButtonProps, TextButtonProps } from './types.js';\n\nexport interface ButtonProps extends BaseButtonProps, TextButtonProps, ActionButtonProps {}\n\nfunction Button(\n  {\n    children,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    iconStart,\n    iconEnd,\n    isLoading,\n    loadingLabel,\n    isDisabled,\n    fullWidth,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: ButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  useProductionWarning(() => {\n    if (isLoading && !loadingLabel) {\n      console.warn('Button requires loadingLabel when isLoading is true for accessibility');\n    }\n  }, [isLoading, loadingLabel]);\n\n  return (\n    <RACButton\n      {...props}\n      ref={ref}\n      className={clsx('cim-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-full-width={fullWidth || undefined}\n      isDisabled={isDisabled}\n      isPending={isLoading}\n    >\n      {({ isPending }) => (\n        <>\n          {iconStart}\n          <span className=\"cim-button-text\">{children}</span>\n          {iconEnd}\n          {isPending && <InternalSpinner size={SPINNER_SIZES[size]} aria-label={loadingLabel} />}\n        </>\n      )}\n    </RACButton>\n  );\n}\n\n/**\n * Displays a labelled button that allows users to perform an action.\n *\n * See [button usage guidelines](https://ui.cimpress.io/components/button/).\n */\nconst _Button = withStyleProps(forwardRef(Button), 'Button');\n\nexport { _Button as Button };\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAA4D;AAC5D,yDAAkD;AAClD,qFAA6E;AAC7E,mEAA2D;AAC3D,+DAAiE;AACjE,iDAA+C;AAC/C,uEAAuF;AAevF,SAAS,MAAM,CACb,EACE,QAAQ,EACR,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,GAAG,KAAK,EACI,EACd,GAAoC;IAEpC,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,SAAS,IAAI,CAAC,YAAY,EAAE,CAAC;YAC/B,OAAO,CAAC,IAAI,CAAC,uEAAuE,CAAC,CAAC;QACxF,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAE9B,MAAM,iBAAiB,GAAG,OAAO,UAAU,KAAK,QAAQ,IAAI,UAAU,CAAC,MAAM,KAAK,EAAE,CAAC;IACrF,KAAK,GAAG,IAAA,gDAAsB,EAAC,KAAK,EAAE,UAAU,IAAI,KAAK,CAAC,CAAC;IAE3D,MAAM,MAAM,GAAG,CACb,uBAAC,8BAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,cAAI,EAAC,YAAY,EAAE,gBAAgB,CAAC,EAC/C,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,eACJ,IAAI,qBACE,SAAS,IAAI,SAAS,EACvC,SAAS,EAAE,SAAS,YAEnB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAClB,6DACG,SAAS,EACV,iCAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EAClD,OAAO,EACP,SAAS,IAAI,uBAAC,4BAAe,IAAC,IAAI,EAAE,4BAAa,CAAC,IAAI,CAAC,gBAAc,YAAY,GAAI,IACrF,CACJ,GACS,CACb,CAAC;IAEF,OAAO,iBAAiB,CAAC,CAAC,CAAC,uBAAC,4CAAkB,IAAC,MAAM,EAAE,UAAU,CAAC,MAAM,YAAG,MAAM,GAAsB,CAAC,CAAC,CAAC,MAAM,CAAC;AACnH,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;AAEzC,yBAAM","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Button as RACButton } 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 { InternalSpinner } from '../internal/spinner/spinner.js';\nimport { SPINNER_SIZES } from './constants.js';\nimport { DisabledWithReason, useDisableInteractions } from './disabled-with-reason.js';\nimport type { ActionButtonProps, BaseButtonProps, TextButtonProps } from './types.js';\n\nexport interface ButtonProps extends BaseButtonProps, TextButtonProps, Omit<ActionButtonProps, 'isDisabled'> {\n  /**\n   * Whether the button is disabled.\n   *\n   * Optionally, you can provide an object with the `reason` property explaining why the button is disabled.\n   * This information will be shown to end-users as a tooltip or a popover.\n   *\n   * @default false\n   */\n  isDisabled?: boolean | { reason: string };\n}\n\nfunction Button(\n  {\n    children,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    iconStart,\n    iconEnd,\n    isLoading,\n    loadingLabel,\n    isDisabled,\n    fullWidth,\n    UNSAFE_className,\n    UNSAFE_style,\n    slot,\n    ...props\n  }: ButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  useProductionWarning(() => {\n    if (isLoading && !loadingLabel) {\n      console.warn('Button requires loadingLabel when isLoading is true for accessibility');\n    }\n  }, [isLoading, loadingLabel]);\n\n  const hasDisabledReason = typeof isDisabled === 'object' && isDisabled.reason !== '';\n  props = useDisableInteractions(props, isDisabled ?? false);\n\n  const button = (\n    <RACButton\n      {...props}\n      ref={ref}\n      slot={slot}\n      className={clsx('cim-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-full-width={fullWidth || undefined}\n      isPending={isLoading}\n    >\n      {({ isPending }) => (\n        <>\n          {iconStart}\n          <span className=\"cim-button-text\">{children}</span>\n          {iconEnd}\n          {isPending && <InternalSpinner size={SPINNER_SIZES[size]} aria-label={loadingLabel} />}\n        </>\n      )}\n    </RACButton>\n  );\n\n  return hasDisabledReason ? <DisabledWithReason reason={isDisabled.reason}>{button}</DisabledWithReason> : button;\n}\n\n/**\n * Displays a labelled button that allows users to perform an action.\n *\n * See [button usage guidelines](https://ui.cimpress.io/components/button/).\n */\nconst _Button = withStyleProps(forwardRef(Button), 'Button');\n\nexport { _Button as Button };\n"]}

package/dist/commonjs/components/button/disabled-with-reason.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=disabled-with-reason.d.ts.map

package/dist/commonjs/components/button/disabled-with-reason.d.ts.map

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

package/dist/commonjs/components/button/disabled-with-reason.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisabledWithReason = DisabledWithReason;
+exports.useDisableInteractions = useDisableInteractions;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_media_query_js_1 = require("../../utils/use-media-query.js");
+const popover_js_1 = require("../popover/popover.js");
+const tooltip_js_1 = require("../tooltip/tooltip.js");
+/** @internal */
+function DisabledWithReason({ children, reason }) {
+    const hasHover = (0, use_media_query_js_1.useMediaQuery)('(hover: hover)', { defaultValue: true, initializeWithValue: true });
+    if (hasHover) {
+        return (0, jsx_runtime_1.jsx)(tooltip_js_1.Tooltip, { label: reason, children: children });
+    }
+    else {
+        return ((0, jsx_runtime_1.jsxs)(popover_js_1.PopoverRoot, { children: [children, (0, jsx_runtime_1.jsx)(popover_js_1.Popover, { children: reason })] }));
+    }
+}
+// Events to preserve when `isDisabled` is true (for tooltips and other overlays)
+const PRESERVED_EVENT_PATTERN = /Focus|Blur|Hover|Pointer(Enter|Leave|Over|Out)|Mouse(Enter|Leave|Over|Out)/;
+/** @internal */
+// eslint-disable-next-line react-refresh/only-export-components
+function useDisableInteractions(props, isDisabled) {
+    if (isDisabled !== false) {
+        for (const key in props) {
+            if (key.startsWith('on') && !PRESERVED_EVENT_PATTERN.test(key)) {
+                delete props[key];
+            }
+        }
+    }
+    if (typeof isDisabled === 'object' && isDisabled.reason) {
+        // Use `aria-disabled` instead of `disabled`
+        props['aria-disabled'] = true;
+        // Prevent form submission
+        props.type = props.type === 'submit' ? 'button' : props.type;
+    }
+    else if (isDisabled !== false) {
+        // Make the button actually disabled
+        props.isDisabled = true;
+    }
+    return props;
+}
+//# sourceMappingURL=disabled-with-reason.js.map

package/dist/commonjs/components/button/disabled-with-reason.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"disabled-with-reason.js","sourceRoot":"","sources":["../../../../src/components/button/disabled-with-reason.tsx"],"names":[],"mappings":";;AAOA,gDAcC;AAOD,wDAuBC;;AAjDD,uEAA+D;AAC/D,sDAA6D;AAC7D,sDAAgD;AAEhD,gBAAgB;AAChB,SAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAA2C;IAC9F,MAAM,QAAQ,GAAG,IAAA,kCAAa,EAAC,gBAAgB,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,CAAC;IAEpG,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,uBAAC,oBAAO,IAAC,KAAK,EAAE,MAAM,YAAG,QAAQ,GAAW,CAAC;IACtD,CAAC;SAAM,CAAC;QACN,OAAO,CACL,wBAAC,wBAAW,eACT,QAAQ,EAET,uBAAC,oBAAO,cAAE,MAAM,GAAW,IACf,CACf,CAAC;IACJ,CAAC;AACH,CAAC;AAED,iFAAiF;AACjF,MAAM,uBAAuB,GAAG,4EAA4E,CAAC;AAE7G,gBAAgB;AAChB,gEAAgE;AAChE,SAAgB,sBAAsB,CACpC,KAAQ,EACR,UAAwC;IAExC,IAAI,UAAU,KAAK,KAAK,EAAE,CAAC;QACzB,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE,CAAC;YACxB,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC/D,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC;YACpB,CAAC;QACH,CAAC;IACH,CAAC;IAED,IAAI,OAAO,UAAU,KAAK,QAAQ,IAAI,UAAU,CAAC,MAAM,EAAE,CAAC;QACxD,4CAA4C;QAC5C,KAAK,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC;QAC9B,0BAA0B;QAC1B,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IAC/D,CAAC;SAAM,IAAI,UAAU,KAAK,KAAK,EAAE,CAAC;QAChC,oCAAoC;QACpC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC;IAC1B,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ButtonProps as RACButtonProps } from 'react-aria-components';\nimport { useMediaQuery } from '../../utils/use-media-query.js';\nimport { Popover, PopoverRoot } from '../popover/popover.js';\nimport { Tooltip } from '../tooltip/tooltip.js';\n\n/** @internal */\nexport function DisabledWithReason({ children, reason }: { children: ReactNode; reason: string }) {\n  const hasHover = useMediaQuery('(hover: hover)', { defaultValue: true, initializeWithValue: true });\n\n  if (hasHover) {\n    return <Tooltip label={reason}>{children}</Tooltip>;\n  } else {\n    return (\n      <PopoverRoot>\n        {children}\n        {/* TODO: add aria-label */}\n        <Popover>{reason}</Popover>\n      </PopoverRoot>\n    );\n  }\n}\n\n// Events to preserve when `isDisabled` is true (for tooltips and other overlays)\nconst PRESERVED_EVENT_PATTERN = /Focus|Blur|Hover|Pointer(Enter|Leave|Over|Out)|Mouse(Enter|Leave|Over|Out)/;\n\n/** @internal */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useDisableInteractions<T extends Partial<RACButtonProps & HTMLAttributes<HTMLButtonElement>>>(\n  props: T,\n  isDisabled: boolean | { reason: string },\n): T {\n  if (isDisabled !== false) {\n    for (const key in props) {\n      if (key.startsWith('on') && !PRESERVED_EVENT_PATTERN.test(key)) {\n        delete props[key];\n      }\n    }\n  }\n\n  if (typeof isDisabled === 'object' && isDisabled.reason) {\n    // Use `aria-disabled` instead of `disabled`\n    props['aria-disabled'] = true;\n    // Prevent form submission\n    props.type = props.type === 'submit' ? 'button' : props.type;\n  } else if (isDisabled !== false) {\n    // Make the button actually disabled\n    props.isDisabled = true;\n  }\n\n  return props;\n}\n"]}

package/dist/commonjs/components/button/icon-button.d.ts

@@ -1,5 +1,16 @@
 import type { ActionButtonProps, BaseButtonProps, SingleIconButtonProps } from './types.js';
-export interface IconButtonProps extends BaseButtonProps, SingleIconButtonProps, ActionButtonProps {
+export interface IconButtonProps extends BaseButtonProps, SingleIconButtonProps, Omit<ActionButtonProps, 'isDisabled'> {
+    /**
+     * Whether the button is disabled.
+     *
+     * Optionally, you can provide an object with the `reason` property explaining why the button is disabled.
+     * This information will be shown to the end-users as a tooltip or a popover.
+     *
+     * @default false
+     */
+    isDisabled?: boolean | {
+        reason: string;
+    };
 }
 /**
  * Displays an icon-only button that allows users to perform an action.

package/dist/commonjs/components/button/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/icon-button.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAE5F,MAAM,WAAW,eAAgB,SAAQ,eAAe,EAAE,qBAAqB,EAAE,iBAAiB;CAAG;AA+CrG;;;;GAIG;AACH,QAAA,MAAM,WAAW,oKAAuD,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/icon-button.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAE5F,MAAM,WAAW,eAAgB,SAAQ,eAAe,EAAE,qBAAqB,EAAE,IAAI,CAAC,iBAAiB,EAAE,YAAY,CAAC;IACpH;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3C;AAqDD;;;;GAIG;AACH,QAAA,MAAM,WAAW,oKAAuD,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}

package/dist/commonjs/components/button/icon-button.js

@@ -13,13 +13,17 @@ const use_production_warning_js_1 = require("../../utils/use-production-warning.
 const with_style_props_js_1 = require("../../with-style-props.js");
 const spinner_js_1 = require("../internal/spinner/spinner.js");
 const constants_js_1 = require("./constants.js");
-function IconButton({ icon, variant = 'secondary', tone = 'base', size = 'medium', isLoading, loadingLabel, isDisabled, fullWidth, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+const disabled_with_reason_js_1 = require("./disabled-with-reason.js");
+function IconButton({ icon, variant = 'secondary', tone = 'base', size = 'medium', isLoading, loadingLabel, isDisabled, fullWidth, UNSAFE_className, UNSAFE_style, slot, ...props }, ref) {
     (0, use_production_warning_js_1.useProductionWarning)(() => {
         if (isLoading && !loadingLabel) {
             console.warn('IconButton requires loadingLabel when isLoading is true for accessibility');
         }
     }, [isLoading, loadingLabel]);
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { ...props, ref: ref, className: (0, clsx_1.default)('cim-icon-button', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-tone": tone, "data-size": size, "data-full-width": fullWidth || undefined, isDisabled: isDisabled, isPending: isLoading, children: ({ isPending }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, isPending && (0, jsx_runtime_1.jsx)(spinner_js_1.InternalSpinner, { size: constants_js_1.SPINNER_SIZES[size], "aria-label": loadingLabel })] })) }));
+    const hasDisabledReason = typeof isDisabled === 'object' && isDisabled.reason !== '';
+    props = (0, disabled_with_reason_js_1.useDisableInteractions)(props, isDisabled ?? false);
+    const button = ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { ...props, ref: ref, slot: slot, className: (0, clsx_1.default)('cim-icon-button', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-tone": tone, "data-size": size, "data-full-width": fullWidth || undefined, isPending: isLoading, children: ({ isPending }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, isPending && (0, jsx_runtime_1.jsx)(spinner_js_1.InternalSpinner, { size: constants_js_1.SPINNER_SIZES[size], "aria-label": loadingLabel })] })) }));
+    return hasDisabledReason ? (0, jsx_runtime_1.jsx)(disabled_with_reason_js_1.DisabledWithReason, { reason: isDisabled.reason, children: button }) : button;
 }
 /**
  * Displays an icon-only button that allows users to perform an action.

package/dist/commonjs/components/button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../../src/components/button/icon-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAA4D;AAC5D,yDAAkD;AAClD,qFAA6E;AAC7E,mEAA2D;AAC3D,+DAAiE;AACjE,iDAA+C;AAK/C,SAAS,UAAU,CACjB,EACE,IAAI,EACJ,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACQ,EAClB,GAAoC;IAEpC,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,SAAS,IAAI,CAAC,YAAY,EAAE,CAAC;YAC/B,OAAO,CAAC,IAAI,CAAC,2EAA2E,CAAC,CAAC;QAC5F,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAE9B,OAAO,CACL,uBAAC,8BAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,gBAAgB,CAAC,EACpD,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,eACJ,IAAI,qBACE,SAAS,IAAI,SAAS,EACvC,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,YAEnB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAClB,6DACG,IAAI,EACJ,SAAS,IAAI,uBAAC,4BAAe,IAAC,IAAI,EAAE,4BAAa,CAAC,IAAI,CAAC,gBAAc,YAAY,GAAI,IACrF,CACJ,GACS,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEjD,iCAAU","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Button as RACButton } 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 { InternalSpinner } from '../internal/spinner/spinner.js';\nimport { SPINNER_SIZES } from './constants.js';\nimport type { ActionButtonProps, BaseButtonProps, SingleIconButtonProps } from './types.js';\n\nexport interface IconButtonProps extends BaseButtonProps, SingleIconButtonProps, ActionButtonProps {}\n\nfunction IconButton(\n  {\n    icon,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    isLoading,\n    loadingLabel,\n    isDisabled,\n    fullWidth,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: IconButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  useProductionWarning(() => {\n    if (isLoading && !loadingLabel) {\n      console.warn('IconButton requires loadingLabel when isLoading is true for accessibility');\n    }\n  }, [isLoading, loadingLabel]);\n\n  return (\n    <RACButton\n      {...props}\n      ref={ref}\n      className={clsx('cim-icon-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-full-width={fullWidth || undefined}\n      isDisabled={isDisabled}\n      isPending={isLoading}\n    >\n      {({ isPending }) => (\n        <>\n          {icon}\n          {isPending && <InternalSpinner size={SPINNER_SIZES[size]} aria-label={loadingLabel} />}\n        </>\n      )}\n    </RACButton>\n  );\n}\n\n/**\n * Displays an icon-only button that allows users to perform an action.\n *\n * See [button usage guidelines](https://ui.cimpress.io/components/button/).\n */\nconst _IconButton = withStyleProps(forwardRef(IconButton), 'IconButton');\n\nexport { _IconButton as IconButton };\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../../src/components/button/icon-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAA4D;AAC5D,yDAAkD;AAClD,qFAA6E;AAC7E,mEAA2D;AAC3D,+DAAiE;AACjE,iDAA+C;AAC/C,uEAAuF;AAevF,SAAS,UAAU,CACjB,EACE,IAAI,EACJ,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,GAAG,KAAK,EACQ,EAClB,GAAoC;IAEpC,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,SAAS,IAAI,CAAC,YAAY,EAAE,CAAC;YAC/B,OAAO,CAAC,IAAI,CAAC,2EAA2E,CAAC,CAAC;QAC5F,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAE9B,MAAM,iBAAiB,GAAG,OAAO,UAAU,KAAK,QAAQ,IAAI,UAAU,CAAC,MAAM,KAAK,EAAE,CAAC;IACrF,KAAK,GAAG,IAAA,gDAAsB,EAAC,KAAK,EAAE,UAAU,IAAI,KAAK,CAAC,CAAC;IAE3D,MAAM,MAAM,GAAG,CACb,uBAAC,8BAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,gBAAgB,CAAC,EACpD,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,eACJ,IAAI,qBACE,SAAS,IAAI,SAAS,EACvC,SAAS,EAAE,SAAS,YAEnB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAClB,6DACG,IAAI,EACJ,SAAS,IAAI,uBAAC,4BAAe,IAAC,IAAI,EAAE,4BAAa,CAAC,IAAI,CAAC,gBAAc,YAAY,GAAI,IACrF,CACJ,GACS,CACb,CAAC;IAEF,OAAO,iBAAiB,CAAC,CAAC,CAAC,uBAAC,4CAAkB,IAAC,MAAM,EAAE,UAAU,CAAC,MAAM,YAAG,MAAM,GAAsB,CAAC,CAAC,CAAC,MAAM,CAAC;AACnH,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEjD,iCAAU","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Button as RACButton } 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 { InternalSpinner } from '../internal/spinner/spinner.js';\nimport { SPINNER_SIZES } from './constants.js';\nimport { DisabledWithReason, useDisableInteractions } from './disabled-with-reason.js';\nimport type { ActionButtonProps, BaseButtonProps, SingleIconButtonProps } from './types.js';\n\nexport interface IconButtonProps extends BaseButtonProps, SingleIconButtonProps, Omit<ActionButtonProps, 'isDisabled'> {\n  /**\n   * Whether the button is disabled.\n   *\n   * Optionally, you can provide an object with the `reason` property explaining why the button is disabled.\n   * This information will be shown to the end-users as a tooltip or a popover.\n   *\n   * @default false\n   */\n  isDisabled?: boolean | { reason: string };\n}\n\nfunction IconButton(\n  {\n    icon,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    isLoading,\n    loadingLabel,\n    isDisabled,\n    fullWidth,\n    UNSAFE_className,\n    UNSAFE_style,\n    slot,\n    ...props\n  }: IconButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  useProductionWarning(() => {\n    if (isLoading && !loadingLabel) {\n      console.warn('IconButton requires loadingLabel when isLoading is true for accessibility');\n    }\n  }, [isLoading, loadingLabel]);\n\n  const hasDisabledReason = typeof isDisabled === 'object' && isDisabled.reason !== '';\n  props = useDisableInteractions(props, isDisabled ?? false);\n\n  const button = (\n    <RACButton\n      {...props}\n      ref={ref}\n      slot={slot}\n      className={clsx('cim-icon-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-full-width={fullWidth || undefined}\n      isPending={isLoading}\n    >\n      {({ isPending }) => (\n        <>\n          {icon}\n          {isPending && <InternalSpinner size={SPINNER_SIZES[size]} aria-label={loadingLabel} />}\n        </>\n      )}\n    </RACButton>\n  );\n\n  return hasDisabledReason ? <DisabledWithReason reason={isDisabled.reason}>{button}</DisabledWithReason> : button;\n}\n\n/**\n * Displays an icon-only button that allows users to perform an action.\n *\n * See [button usage guidelines](https://ui.cimpress.io/components/button/).\n */\nconst _IconButton = withStyleProps(forwardRef(IconButton), 'IconButton');\n\nexport { _IconButton as IconButton };\n"]}

package/dist/commonjs/components/button/icon-link-button.d.ts

@@ -1,7 +1,18 @@
 import { type LinkProps as RACLinkProps } from 'react-aria-components';
 import type { NavigationProps, WithRequired } from '../types.js';
 import type { BaseButtonProps, SingleIconButtonProps } from './types.js';
-export interface IconLinkButtonProps extends Omit<BaseButtonProps, 'id'>, SingleIconButtonProps, WithRequired<NavigationProps, 'href'>, Pick<RACLinkProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
+export interface IconLinkButtonProps extends Omit<BaseButtonProps, 'id'>, SingleIconButtonProps, WithRequired<NavigationProps, 'href'>, Pick<RACLinkProps, 'onHoverStart' | 'onHoverEnd'> {
+    /**
+     * Whether the button is disabled.
+     *
+     * Optionally, you can provide an object with the `reason` property explaining why the button is disabled.
+     * This information will be shown to the end-users as a tooltip or a popover.
+     *
+     * @default false
+     */
+    isDisabled?: boolean | {
+        reason: string;
+    };
 }
 /**
  * Displays an icon-only button that allows users to navigate to another page or resource.

package/dist/commonjs/components/button/icon-link-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-link-button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/icon-link-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGxF,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACjE,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEzE,MAAM,WAAW,mBACf,SACE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,EAC3B,qBAAqB,EACrB,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,EACrC,IAAI,CAAC,YAAY,EAAE,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;CAAG;AAiCvE;;;;GAIG;AACH,QAAA,MAAM,eAAe,wKAA+D,CAAC;AAErF,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC"}
+{"version":3,"file":"icon-link-button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/icon-link-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGxF,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEjE,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEzE,MAAM,WAAW,mBACf,SACE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,EAC3B,qBAAqB,EACrB,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,EACrC,IAAI,CAAC,YAAY,EAAE,cAAc,GAAG,YAAY,CAAC;IACnD;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3C;AAsDD;;;;GAIG;AACH,QAAA,MAAM,eAAe,wKAA+D,CAAC;AAErF,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC"}

package/dist/commonjs/components/button/icon-link-button.js

@@ -10,8 +10,15 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
+const icon_button_js_1 = require("./icon-button.js");
 function IconLinkButton({ icon, variant = 'secondary', tone = 'base', size = 'medium', isDisabled = false, fullWidth = false, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Link, { ...props, ref: ref, className: (0, clsx_1.default)('cim-icon-button', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-tone": tone, "data-size": size, "data-full-width": fullWidth || undefined, isDisabled: isDisabled, children: icon }));
+    const hasDisabledReason = typeof isDisabled === 'object' && isDisabled.reason !== '';
+    if (hasDisabledReason) {
+        // `RACLink` doesn't support aria-disabled while keeping interactivity, so we render an `IconButton` instead
+        const { href, target, hrefLang, download, ping, referrerPolicy, rel, routerOptions, ...buttonProps } = props;
+        return ((0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { ...buttonProps, icon: icon, variant: variant, tone: tone, size: size, isDisabled: isDisabled, fullWidth: fullWidth, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Link, { ...props, ref: ref, className: (0, clsx_1.default)('cim-icon-button', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-tone": tone, "data-size": size, "data-full-width": fullWidth || undefined, isDisabled: !!isDisabled, children: icon }));
 }
 /**
  * Displays an icon-only button that allows users to navigate to another page or resource.

package/dist/commonjs/components/button/icon-link-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-link-button.js","sourceRoot":"","sources":["../../../../src/components/button/icon-link-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAwF;AACxF,yDAAkD;AAClD,mEAA2D;AAW3D,SAAS,cAAc,CACrB,EACE,IAAI,EACJ,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACY,EACtB,GAAoC;IAEpC,OAAO,CACL,uBAAC,4BAAO,OACF,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,gBAAgB,CAAC,EACpD,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,eACJ,IAAI,qBACE,SAAS,IAAI,SAAS,EACvC,UAAU,EAAE,UAAU,YAErB,IAAI,GACG,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,eAAe,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,cAAc,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAEzD,yCAAc","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Link as RACLink, type LinkProps as RACLinkProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { NavigationProps, WithRequired } from '../types.js';\nimport type { BaseButtonProps, SingleIconButtonProps } from './types.js';\n\nexport interface IconLinkButtonProps\n  extends\n    Omit<BaseButtonProps, 'id'>,\n    SingleIconButtonProps,\n    WithRequired<NavigationProps, 'href'>,\n    Pick<RACLinkProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {}\n\nfunction IconLinkButton(\n  {\n    icon,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    isDisabled = false,\n    fullWidth = false,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: IconLinkButtonProps,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  return (\n    <RACLink\n      {...props}\n      ref={ref}\n      className={clsx('cim-icon-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-full-width={fullWidth || undefined}\n      isDisabled={isDisabled}\n    >\n      {icon}\n    </RACLink>\n  );\n}\n\n/**\n * Displays an icon-only button that allows users to navigate to another page or resource.\n *\n * See [button usage guidelines](https://ui.cimpress.io/components/button/).\n */\nconst _IconLinkButton = withStyleProps(forwardRef(IconLinkButton), 'IconLinkButton');\n\nexport { _IconLinkButton as IconLinkButton };\n"]}
+{"version":3,"file":"icon-link-button.js","sourceRoot":"","sources":["../../../../src/components/button/icon-link-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAwF;AACxF,yDAAkD;AAClD,mEAA2D;AAE3D,qDAA8C;AAoB9C,SAAS,cAAc,CACrB,EACE,IAAI,EACJ,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACY,EACtB,GAAoC;IAEpC,MAAM,iBAAiB,GAAG,OAAO,UAAU,KAAK,QAAQ,IAAI,UAAU,CAAC,MAAM,KAAK,EAAE,CAAC;IAErF,IAAI,iBAAiB,EAAE,CAAC;QACtB,4GAA4G;QAC5G,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;QAE7G,OAAO,CACL,uBAAC,2BAAU,OACL,WAAW,EACf,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,uBAAC,4BAAO,OACF,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,gBAAgB,CAAC,EACpD,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,eACJ,IAAI,qBACE,SAAS,IAAI,SAAS,EACvC,UAAU,EAAE,CAAC,CAAC,UAAU,YAEvB,IAAI,GACG,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,eAAe,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,cAAc,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAEzD,yCAAc","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Link as RACLink, type LinkProps as RACLinkProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { NavigationProps, WithRequired } from '../types.js';\nimport { IconButton } from './icon-button.js';\nimport type { BaseButtonProps, SingleIconButtonProps } from './types.js';\n\nexport interface IconLinkButtonProps\n  extends\n    Omit<BaseButtonProps, 'id'>,\n    SingleIconButtonProps,\n    WithRequired<NavigationProps, 'href'>,\n    Pick<RACLinkProps, 'onHoverStart' | 'onHoverEnd'> {\n  /**\n   * Whether the button is disabled.\n   *\n   * Optionally, you can provide an object with the `reason` property explaining why the button is disabled.\n   * This information will be shown to the end-users as a tooltip or a popover.\n   *\n   * @default false\n   */\n  isDisabled?: boolean | { reason: string };\n}\n\nfunction IconLinkButton(\n  {\n    icon,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    isDisabled = false,\n    fullWidth = false,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: IconLinkButtonProps,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  const hasDisabledReason = typeof isDisabled === 'object' && isDisabled.reason !== '';\n\n  if (hasDisabledReason) {\n    // `RACLink` doesn't support aria-disabled while keeping interactivity, so we render an `IconButton` instead\n    const { href, target, hrefLang, download, ping, referrerPolicy, rel, routerOptions, ...buttonProps } = props;\n\n    return (\n      <IconButton\n        {...buttonProps}\n        icon={icon}\n        variant={variant}\n        tone={tone}\n        size={size}\n        isDisabled={isDisabled}\n        fullWidth={fullWidth}\n        UNSAFE_className={UNSAFE_className}\n        UNSAFE_style={UNSAFE_style}\n      />\n    );\n  }\n\n  return (\n    <RACLink\n      {...props}\n      ref={ref}\n      className={clsx('cim-icon-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-full-width={fullWidth || undefined}\n      isDisabled={!!isDisabled}\n    >\n      {icon}\n    </RACLink>\n  );\n}\n\n/**\n * Displays an icon-only button that allows users to navigate to another page or resource.\n *\n * See [button usage guidelines](https://ui.cimpress.io/components/button/).\n */\nconst _IconLinkButton = withStyleProps(forwardRef(IconLinkButton), 'IconLinkButton');\n\nexport { _IconLinkButton as IconLinkButton };\n"]}

package/dist/commonjs/components/button/link-button.d.ts

@@ -1,7 +1,18 @@
 import { type LinkProps as RACLinkProps } from 'react-aria-components';
 import type { NavigationProps, WithRequired } from '../types.js';
 import type { BaseButtonProps, TextButtonProps } from './types.js';
-export interface LinkButtonProps extends Omit<BaseButtonProps, 'id'>, TextButtonProps, WithRequired<NavigationProps, 'href'>, Pick<RACLinkProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
+export interface LinkButtonProps extends Omit<BaseButtonProps, 'id'>, TextButtonProps, WithRequired<NavigationProps, 'href'>, Pick<RACLinkProps, 'onHoverStart' | 'onHoverEnd'> {
+    /**
+     * Whether the button is disabled.
+     *
+     * Optionally, you can provide an object with the `reason` property explaining why the button is disabled.
+     * This information will be shown to the end-users as a tooltip or a popover.
+     *
+     * @default false
+     */
+    isDisabled?: boolean | {
+        reason: string;
+    };
 }
 /**
  * Displays a labelled button that allows users to navigate to another page or resource.

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

@@ -1 +1 @@
-{"version":3,"file":"link-button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/link-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGxF,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACjE,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAEnE,MAAM,WAAW,eACf,SACE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,EAC3B,eAAe,EACf,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,EACrC,IAAI,CAAC,YAAY,EAAE,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;CAAG;AAqCvE;;;;GAIG;AACH,QAAA,MAAM,WAAW,oKAAuD,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}
+{"version":3,"file":"link-button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/link-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGxF,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEjE,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAEnE,MAAM,WAAW,eACf,SACE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,EAC3B,eAAe,EACf,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,EACrC,IAAI,CAAC,YAAY,EAAE,cAAc,GAAG,YAAY,CAAC;IACnD;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3C;AA6DD;;;;GAIG;AACH,QAAA,MAAM,WAAW,oKAAuD,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}

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

@@ -10,8 +10,15 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
+const button_js_1 = require("./button.js");
 function LinkButton({ children, variant = 'secondary', tone = 'base', size = 'medium', iconStart, iconEnd, isDisabled = false, fullWidth = false, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Link, { ...props, ref: ref, className: (0, clsx_1.default)('cim-button', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-tone": tone, "data-size": size, "data-full-width": fullWidth || undefined, isDisabled: isDisabled, children: [iconStart, (0, jsx_runtime_1.jsx)("span", { className: "cim-button-text", children: children }), iconEnd] }));
+    const hasDisabledReason = typeof isDisabled === 'object' && isDisabled.reason !== '';
+    if (hasDisabledReason) {
+        // `RACLink` doesn't support aria-disabled while keeping interactivity, so we render a `Button` instead
+        const { href, target, hrefLang, download, ping, referrerPolicy, rel, routerOptions, ...buttonProps } = props;
+        return ((0, jsx_runtime_1.jsx)(button_js_1.Button, { ...buttonProps, variant: variant, tone: tone, size: size, iconStart: iconStart, iconEnd: iconEnd, isDisabled: isDisabled, fullWidth: fullWidth, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, children: children }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Link, { ...props, ref: ref, className: (0, clsx_1.default)('cim-button', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-tone": tone, "data-size": size, "data-full-width": fullWidth || undefined, isDisabled: !!isDisabled, children: [iconStart, (0, jsx_runtime_1.jsx)("span", { className: "cim-button-text", children: children }), iconEnd] }));
 }
 /**
  * Displays a labelled button that allows users to navigate to another page or resource.

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

@@ -1 +1 @@
-{"version":3,"file":"link-button.js","sourceRoot":"","sources":["../../../../src/components/button/link-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAwF;AACxF,yDAAkD;AAClD,mEAA2D;AAW3D,SAAS,UAAU,CACjB,EACE,QAAQ,EACR,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACQ,EAClB,GAAoC;IAEpC,OAAO,CACL,wBAAC,4BAAO,OACF,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,YAAY,EAAE,gBAAgB,CAAC,EAC/C,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,eACJ,IAAI,qBACE,SAAS,IAAI,SAAS,EACvC,UAAU,EAAE,UAAU,aAErB,SAAS,EACV,iCAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EAClD,OAAO,IACA,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEjD,iCAAU","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Link as RACLink, type LinkProps as RACLinkProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { NavigationProps, WithRequired } from '../types.js';\nimport type { BaseButtonProps, TextButtonProps } from './types.js';\n\nexport interface LinkButtonProps\n  extends\n    Omit<BaseButtonProps, 'id'>,\n    TextButtonProps,\n    WithRequired<NavigationProps, 'href'>,\n    Pick<RACLinkProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {}\n\nfunction LinkButton(\n  {\n    children,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    iconStart,\n    iconEnd,\n    isDisabled = false,\n    fullWidth = false,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: LinkButtonProps,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  return (\n    <RACLink\n      {...props}\n      ref={ref}\n      className={clsx('cim-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-full-width={fullWidth || undefined}\n      isDisabled={isDisabled}\n    >\n      {iconStart}\n      <span className=\"cim-button-text\">{children}</span>\n      {iconEnd}\n    </RACLink>\n  );\n}\n\n/**\n * Displays a labelled button that allows users to navigate to another page or resource.\n *\n * See [button usage guidelines](https://ui.cimpress.io/components/button/).\n */\nconst _LinkButton = withStyleProps(forwardRef(LinkButton), 'LinkButton');\n\nexport { _LinkButton as LinkButton };\n"]}
+{"version":3,"file":"link-button.js","sourceRoot":"","sources":["../../../../src/components/button/link-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAwF;AACxF,yDAAkD;AAClD,mEAA2D;AAE3D,2CAAqC;AAoBrC,SAAS,UAAU,CACjB,EACE,QAAQ,EACR,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACQ,EAClB,GAAoC;IAEpC,MAAM,iBAAiB,GAAG,OAAO,UAAU,KAAK,QAAQ,IAAI,UAAU,CAAC,MAAM,KAAK,EAAE,CAAC;IAErF,IAAI,iBAAiB,EAAE,CAAC;QACtB,uGAAuG;QACvG,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;QAE7G,OAAO,CACL,uBAAC,kBAAM,OACD,WAAW,EACf,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,YAAY,YAEzB,QAAQ,GACF,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,wBAAC,4BAAO,OACF,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,YAAY,EAAE,gBAAgB,CAAC,EAC/C,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,eACJ,IAAI,qBACE,SAAS,IAAI,SAAS,EACvC,UAAU,EAAE,CAAC,CAAC,UAAU,aAEvB,SAAS,EACV,iCAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EAClD,OAAO,IACA,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEjD,iCAAU","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Link as RACLink, type LinkProps as RACLinkProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { NavigationProps, WithRequired } from '../types.js';\nimport { Button } from './button.js';\nimport type { BaseButtonProps, TextButtonProps } from './types.js';\n\nexport interface LinkButtonProps\n  extends\n    Omit<BaseButtonProps, 'id'>,\n    TextButtonProps,\n    WithRequired<NavigationProps, 'href'>,\n    Pick<RACLinkProps, 'onHoverStart' | 'onHoverEnd'> {\n  /**\n   * Whether the button is disabled.\n   *\n   * Optionally, you can provide an object with the `reason` property explaining why the button is disabled.\n   * This information will be shown to the end-users as a tooltip or a popover.\n   *\n   * @default false\n   */\n  isDisabled?: boolean | { reason: string };\n}\n\nfunction LinkButton(\n  {\n    children,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    iconStart,\n    iconEnd,\n    isDisabled = false,\n    fullWidth = false,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: LinkButtonProps,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  const hasDisabledReason = typeof isDisabled === 'object' && isDisabled.reason !== '';\n\n  if (hasDisabledReason) {\n    // `RACLink` doesn't support aria-disabled while keeping interactivity, so we render a `Button` instead\n    const { href, target, hrefLang, download, ping, referrerPolicy, rel, routerOptions, ...buttonProps } = props;\n\n    return (\n      <Button\n        {...buttonProps}\n        variant={variant}\n        tone={tone}\n        size={size}\n        iconStart={iconStart}\n        iconEnd={iconEnd}\n        isDisabled={isDisabled}\n        fullWidth={fullWidth}\n        UNSAFE_className={UNSAFE_className}\n        UNSAFE_style={UNSAFE_style}\n      >\n        {children}\n      </Button>\n    );\n  }\n\n  return (\n    <RACLink\n      {...props}\n      ref={ref}\n      className={clsx('cim-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-full-width={fullWidth || undefined}\n      isDisabled={!!isDisabled}\n    >\n      {iconStart}\n      <span className=\"cim-button-text\">{children}</span>\n      {iconEnd}\n    </RACLink>\n  );\n}\n\n/**\n * Displays a labelled button that allows users to navigate to another page or resource.\n *\n * See [button usage guidelines](https://ui.cimpress.io/components/button/).\n */\nconst _LinkButton = withStyleProps(forwardRef(LinkButton), 'LinkButton');\n\nexport { _LinkButton as LinkButton };\n"]}

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

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import type { CommonProps } from '../types.js';
+export interface UNSTABLE_PageHeaderProps extends CommonProps {
+    /** The title describing the page. Rendered as an `<h1>` element. */
+    title: string;
+    /** Optional navigation breadcrumbs displayed above the title. */
+    breadcrumbs?: ReactNode;
+    /** Optional action buttons or controls displayed to the right of the title. */
+    actions?: ReactNode;
+    /** Optional row beneath the title for metadata or a short description. Automatically styled as subtle when a string is provided. */
+    description?: ReactNode;
+    /** Optional tabs displayed below the header content. */
+    tabs?: ReactNode;
+}
+declare const _UNSTABLE_PageHeader: (props: UNSTABLE_PageHeaderProps & import("react").RefAttributes<HTMLElement>) => import("react").JSX.Element | null;
+export { _UNSTABLE_PageHeader as UNSTABLE_PageHeader };
+//# sourceMappingURL=page-header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../../src/components/page-header/page-header.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oIAAoI;IACpI,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wDAAwD;IACxD,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAgDD,QAAA,MAAM,oBAAoB,sHAAgD,CAAC;AAE3E,OAAO,EAAE,oBAAoB,IAAI,mBAAmB,EAAE,CAAC"}

package/dist/commonjs/components/page-header/page-header.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_PageHeader = 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 stack_js_1 = require("../spacing/stack/stack.js");
+const text_js_1 = require("../typography/text.js");
+const utils_js_1 = require("../typography/utils.js");
+function UNSTABLE_PageHeader({ title, breadcrumbs, actions, description, tabs, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)("header", { ...props, className: (0, clsx_1.default)('cim-page-header', UNSAFE_className), style: UNSAFE_style, ref: ref, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-page-header-container", children: [breadcrumbs && (0, jsx_runtime_1.jsx)("div", { className: "cim-page-header-breadcrumbs", children: breadcrumbs }), (0, jsx_runtime_1.jsxs)(stack_js_1.Stack, { direction: "horizontal", gap: 16, justify: "space-between", wrap: true, children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-page-header-title", children: (0, jsx_runtime_1.jsxs)(stack_js_1.Stack, { gap: 4, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "h1", variant: "title-2", UNSAFE_className: "cim-page-header-title-text", children: title }), description && ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-page-header-description', typeof description === 'string' && (0, utils_js_1.textStyle)({ variant: 'medium', tone: 'subtle' })), children: description }))] }) }), (0, jsx_runtime_1.jsx)(stack_js_1.Stack, { direction: "horizontal", gap: 12, UNSAFE_className: "cim-page-header-actions", wrap: true, children: actions })] })] }), tabs && (0, jsx_runtime_1.jsx)("div", { className: "cim-page-header-tabs", children: tabs })] }));
+}
+const _UNSTABLE_PageHeader = (0, forward_ref_js_1.forwardRef)(UNSTABLE_PageHeader, 'PageHeader');
+exports.UNSTABLE_PageHeader = _UNSTABLE_PageHeader;
+//# sourceMappingURL=page-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.js","sourceRoot":"","sources":["../../../../src/components/page-header/page-header.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAAwB;AAExB,yDAAkD;AAClD,wDAAkD;AAElD,mDAA6C;AAC7C,qDAAmD;AAenD,SAAS,mBAAmB,CAC1B,EACE,KAAK,EACL,WAAW,EACX,OAAO,EACP,WAAW,EACX,IAAI,EACJ,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACiB,EAC3B,GAA8B;IAE9B,OAAO,CACL,uCAAY,KAAK,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,aACpG,iCAAK,SAAS,EAAC,2BAA2B,aACvC,WAAW,IAAI,gCAAK,SAAS,EAAC,6BAA6B,YAAE,WAAW,GAAO,EAChF,wBAAC,gBAAK,IAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAE,EAAE,EAAE,OAAO,EAAC,eAAe,EAAC,IAAI,mBACjE,gCAAK,SAAS,EAAC,uBAAuB,YACpC,wBAAC,gBAAK,IAAC,GAAG,EAAE,CAAC,aACX,uBAAC,cAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,gBAAgB,EAAC,4BAA4B,YAC1E,KAAK,GACD,EAEN,WAAW,IAAI,CACd,gCACE,SAAS,EAAE,IAAA,cAAI,EACb,6BAA6B,EAC7B,OAAO,WAAW,KAAK,QAAQ,IAAI,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CACpF,YAEA,WAAW,GACR,CACP,IACK,GACJ,EACN,uBAAC,gBAAK,IAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAE,EAAE,EAAE,gBAAgB,EAAC,yBAAyB,EAAC,IAAI,kBACnF,OAAO,GACF,IACF,IACJ,EACL,IAAI,IAAI,gCAAK,SAAS,EAAC,sBAAsB,YAAE,IAAI,GAAO,IACpD,CACV,CAAC;AACJ,CAAC;AAED,MAAM,oBAAoB,GAAG,IAAA,2BAAU,EAAC,mBAAmB,EAAE,YAAY,CAAC,CAAC;AAE1C,mDAAmB","sourcesContent":["import clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { Stack } from '../spacing/stack/stack.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface UNSTABLE_PageHeaderProps extends CommonProps {\n  /** The title describing the page. Rendered as an `<h1>` element. */\n  title: string;\n  /** Optional navigation breadcrumbs displayed above the title. */\n  breadcrumbs?: ReactNode;\n  /** Optional action buttons or controls displayed to the right of the title. */\n  actions?: ReactNode;\n  /** Optional row beneath the title for metadata or a short description. Automatically styled as subtle when a string is provided. */\n  description?: ReactNode;\n  /** Optional tabs displayed below the header content. */\n  tabs?: ReactNode;\n}\n\nfunction UNSTABLE_PageHeader(\n  {\n    title,\n    breadcrumbs,\n    actions,\n    description,\n    tabs,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: UNSTABLE_PageHeaderProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  return (\n    <header {...props} className={clsx('cim-page-header', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n      <div className=\"cim-page-header-container\">\n        {breadcrumbs && <div className=\"cim-page-header-breadcrumbs\">{breadcrumbs}</div>}\n        <Stack direction=\"horizontal\" gap={16} justify=\"space-between\" wrap>\n          <div className=\"cim-page-header-title\">\n            <Stack gap={4}>\n              <Text as=\"h1\" variant=\"title-2\" UNSAFE_className=\"cim-page-header-title-text\">\n                {title}\n              </Text>\n\n              {description && (\n                <div\n                  className={clsx(\n                    'cim-page-header-description',\n                    typeof description === 'string' && textStyle({ variant: 'medium', tone: 'subtle' }),\n                  )}\n                >\n                  {description}\n                </div>\n              )}\n            </Stack>\n          </div>\n          <Stack direction=\"horizontal\" gap={12} UNSAFE_className=\"cim-page-header-actions\" wrap>\n            {actions}\n          </Stack>\n        </Stack>\n      </div>\n      {tabs && <div className=\"cim-page-header-tabs\">{tabs}</div>}\n    </header>\n  );\n}\n\nconst _UNSTABLE_PageHeader = forwardRef(UNSTABLE_PageHeader, 'PageHeader');\n\nexport { _UNSTABLE_PageHeader as UNSTABLE_PageHeader };\n"]}

package/dist/commonjs/index.d.ts

@@ -90,6 +90,7 @@ export * from './components/stepper/stepper-item.js';
 export type { StepperStatus } from './components/stepper/types.js';
 export * from './components/hidden/hidden.js';
 export * from './components/page-layout/page-layout.js';
+export * from './components/page-header/page-header.js';
 export * from './components/nav-list/nav-list.js';
 export * from './components/app-header/nav-button.js';
 export * from './components/mobile-nav/mobile-nav.js';

package/dist/commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,yCAAyC,CAAC;AACxD,cAAc,iCAAiC,CAAC;AAChD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAC5F,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qCAAqC,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,uCAAuC,CAAC;AACtD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,0CAA0C,CAAC;AACzD,cAAc,wCAAwC,CAAC;AACvD,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,wCAAwC,CAAC;AACvD,cAAc,yCAAyC,CAAC;AACxD,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,0CAA0C,CAAC;AACzD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,YAAY,EAAE,gBAAgB,IAAI,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AAC5G,YAAY,EAAE,sBAAsB,IAAI,2BAA2B,EAAE,MAAM,kDAAkD,CAAC;AAC9H,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,oCAAoC,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAChF,YAAY,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,kDAAkD,CAAC;AACjE,cAAc,mDAAmD,CAAC;AAClE,cAAc,8BAA8B,CAAC;AAE7C,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AAEpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAEhD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,YAAY,EACV,cAAc,EACd,SAAS,EACT,UAAU,EACV,UAAU,EACV,GAAG,EACH,SAAS,EACT,UAAU,EACV,YAAY,EACZ,IAAI,EACJ,aAAa,EACb,gBAAgB,GACjB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AACzE,YAAY,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAExD,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AAEtD,cAAc,4CAA4C,CAAC;AAE3D,cAAc,0BAA0B,CAAC;AAGzC,cAAc,iDAAiD,CAAC;AAChE,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,sCAAsC,CAAC;AACrD,YAAY,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/dist/commonjs/index.js

@@ -100,6 +100,7 @@ __exportStar(require("./components/stepper/stepper.js"), exports);
 __exportStar(require("./components/stepper/stepper-item.js"), exports);
 __exportStar(require("./components/hidden/hidden.js"), exports);
 __exportStar(require("./components/page-layout/page-layout.js"), exports);
+__exportStar(require("./components/page-header/page-header.js"), exports);
 __exportStar(require("./components/nav-list/nav-list.js"), exports);
 __exportStar(require("./components/app-header/nav-button.js"), exports);
 __exportStar(require("./components/mobile-nav/mobile-nav.js"), exports);

package/dist/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,8DAA4C;AAC5C,4EAA0D;AAC1D,wEAAsD;AACtD,8EAA4D;AAC5D,sEAAoD;AACpD,oEAAkD;AAClD,kEAAgD;AAChD,8DAA4C;AAC5C,gEAA8C;AAC9C,qEAAmD;AACnD,qEAAmD;AACnD,0EAAwD;AACxD,kEAAgD;AAChD,4DAA0C;AAC1C,oEAAkD;AAClD,0EAAwD;AACxD,sEAAoD;AACpD,4DAA0C;AAC1C,wEAAsD;AACtD,mEAAiD;AACjD,mEAAiD;AACjD,0EAAwD;AACxD,0EAAwD;AACxD,wEAAsD;AACtD,8EAA4D;AAE5D,kEAAgD;AAChD,gEAA8C;AAC9C,4DAA0C;AAC1C,sEAAoD;AACpD,4DAA0C;AAC1C,4EAA0D;AAC1D,4EAA0D;AAC1D,wEAAsD;AACtD,4EAA0D;AAC1D,8DAA4C;AAC5C,oEAAkD;AAClD,gEAA8C;AAC9C,gEAA8C;AAC9C,kEAAgD;AAChD,2EAAyD;AACzD,yEAAuD;AACvD,wEAAsD;AACtD,0EAAwD;AACxD,kEAAgD;AAChD,kEAAgD;AAChD,gEAA8C;AAC9C,wEAAsD;AACtD,8DAA4C;AAC5C,qEAAmD;AACnD,yEAAuD;AACvD,0EAAwD;AACxD,mEAAiD;AACjD,uEAAqD;AACrD,wEAAsD;AACtD,2EAAyD;AACzD,gFAA8D;AAC9D,0EAAwD;AAGxD,4DAA0C;AAC1C,0DAAwC;AACxC,gEAA8C;AAC9C,sEAAoD;AACpD,qEAAmD;AACnD,oEAAgF;AAAvE,4GAAA,UAAU,OAAA;AAEnB,8EAA4D;AAC5D,mFAAiE;AACjE,oFAAkE;AAClE,+DAA6C;AAE7C,kEAAgD;AAChD,sEAAoD;AAEpD,kEAAgD;AAChD,kEAAgD;AAChD,kEAAgD;AAoBhD,kEAAgD;AAChD,wEAAsD;AAEtD,6EAA2D;AAE3D,2DAAyC;AAEzC,2BAA2B;AAC3B,kFAAgE;AAChE,0EAAwD;AACxD,sEAAoD;AACpD,kEAAgD;AAChD,uEAAqD;AAErD,gEAA8C;AAC9C,0EAAwD;AACxD,oEAAkD;AAClD,wEAAsD;AACtD,wEAAsD","sourcesContent":["export * from './components/alert/alert.js';\nexport * from './components/alert-dialog/alert-dialog.js';\nexport * from './components/app-header/app-header.js';\nexport * from './components/app-header/simple-auth-tool.js';\nexport * from './components/app-shell/app-shell.js';\nexport * from './components/side-nav/side-nav.js';\nexport * from './components/top-nav/top-nav.js';\nexport * from './components/badge/badge.js';\nexport * from './components/button/button.js';\nexport * from './components/button/link-button.js';\nexport * from './components/button/icon-button.js';\nexport * from './components/button/icon-link-button.js';\nexport * from './components/callout/callout.js';\nexport * from './components/card/card.js';\nexport * from './components/checkbox/checkbox.js';\nexport * from './components/checkbox/checkbox-group.js';\nexport * from './components/combo-box/combo-box.js';\nexport * from './components/code/code.js';\nexport * from './components/code-block/code-block.js';\nexport * from './components/copy/copy-button.js';\nexport * from './components/copy/copy-inline.js';\nexport * from './components/date-picker/date-picker.js';\nexport * from './components/dialog-root/dialog-root.js';\nexport * from './components/disclosure/disclosure.js';\nexport * from './components/disclosure/disclosure-group.js';\nexport type { DisclosureSize, DisclosureVariant } from './components/disclosure/context.js';\nexport * from './components/divider/divider.js';\nexport * from './components/drawer/drawer.js';\nexport * from './components/form/form.js';\nexport * from './components/link-tabs/link-tabs.js';\nexport * from './components/menu/menu.js';\nexport * from './components/modal-dialog/modal-dialog.js';\nexport * from './components/number-field/number-field.js';\nexport * from './components/pagination/pagination.js';\nexport * from './components/progress-bar/progress-bar.js';\nexport * from './components/radio/radio.js';\nexport * from './components/radio/radio-group.js';\nexport * from './components/select/select.js';\nexport * from './components/slider/slider.js';\nexport * from './components/spinner/spinner.js';\nexport * from './components/text-inputs/search-field.js';\nexport * from './components/text-inputs/text-field.js';\nexport * from './components/text-inputs/text-area.js';\nexport * from './components/breadcrumbs/breadcrumbs.js';\nexport * from './components/tooltip/tooltip.js';\nexport * from './components/popover/popover.js';\nexport * from './components/switch/switch.js';\nexport * from './components/table/table-container.js';\nexport * from './components/table/table.js';\nexport * from './components/table/table-header.js';\nexport * from './components/table/table-header-row.js';\nexport * from './components/table/table-header-cell.js';\nexport * from './components/table/table-body.js';\nexport * from './components/table/table-body-row.js';\nexport * from './components/table/table-body-cell.js';\nexport * from './components/table/table-row-selector.js';\nexport * from './components/table/table-all-rows-selector.js';\nexport * from './components/table/table-empty-state.js';\nexport type { RowSelectionMode as TableRowSelectionMode } from './components/table/contexts/table-state.js';\nexport type { ColumnContentAlignment as TableColumnContentAlignment } from './components/table/contexts/column-collection.js';\nexport * from './components/tabs/tabs.js';\nexport * from './components/tag/tag.js';\nexport * from './components/tag/tag-group.js';\nexport * from './components/tag-field/tag-field.js';\nexport * from './components/toast/toast-region.js';\nexport { toastQueue, type ToastQueue } from './components/toast/toast-queue.js';\nexport type { ToastOptions } from './components/toast/types.js';\nexport * from './components/toggle-button/toggle-button.js';\nexport * from './components/toggle-button/toggle-icon-button.js';\nexport * from './components/toggle-button/toggle-button-group.js';\nexport * from './components/file-trigger.js';\n\nexport * from './components/spacing/box/box.js';\nexport * from './components/spacing/stack/stack.js';\n\nexport * from './components/typography/text.js';\nexport * from './components/typography/link.js';\nexport * from './components/typography/list.js';\n\nexport type { ForegroundTone } from './utils/style/types.js';\n\nexport type {\n  CollectionItem,\n  Direction,\n  FieldError,\n  HoverEvent,\n  Key,\n  Selection,\n  PressEvent,\n  RouterConfig,\n  Href,\n  RouterOptions,\n  ValidationResult,\n} from './components/types.js';\nexport type { Spacing, Responsive } from './components/spacing/types.js';\nexport type { StyleProps } from './with-style-props.js';\n\nexport * from './providers/ssr/ssr-provider.js';\nexport * from './providers/router/router-provider.js';\n\nexport * from './components/internal/x-button/x-button.js';\n\nexport * from './utils/use-is-mobile.js';\n\n// Unfinished exports below\nexport * from './components/visually-hidden/visually-hidden.js';\nexport * from './components/file-picker/file-picker.js';\nexport * from './components/container/container.js';\nexport * from './components/stepper/stepper.js';\nexport * from './components/stepper/stepper-item.js';\nexport type { StepperStatus } from './components/stepper/types.js';\nexport * from './components/hidden/hidden.js';\nexport * from './components/page-layout/page-layout.js';\nexport * from './components/nav-list/nav-list.js';\nexport * from './components/app-header/nav-button.js';\nexport * from './components/mobile-nav/mobile-nav.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,8DAA4C;AAC5C,4EAA0D;AAC1D,wEAAsD;AACtD,8EAA4D;AAC5D,sEAAoD;AACpD,oEAAkD;AAClD,kEAAgD;AAChD,8DAA4C;AAC5C,gEAA8C;AAC9C,qEAAmD;AACnD,qEAAmD;AACnD,0EAAwD;AACxD,kEAAgD;AAChD,4DAA0C;AAC1C,oEAAkD;AAClD,0EAAwD;AACxD,sEAAoD;AACpD,4DAA0C;AAC1C,wEAAsD;AACtD,mEAAiD;AACjD,mEAAiD;AACjD,0EAAwD;AACxD,0EAAwD;AACxD,wEAAsD;AACtD,8EAA4D;AAE5D,kEAAgD;AAChD,gEAA8C;AAC9C,4DAA0C;AAC1C,sEAAoD;AACpD,4DAA0C;AAC1C,4EAA0D;AAC1D,4EAA0D;AAC1D,wEAAsD;AACtD,4EAA0D;AAC1D,8DAA4C;AAC5C,oEAAkD;AAClD,gEAA8C;AAC9C,gEAA8C;AAC9C,kEAAgD;AAChD,2EAAyD;AACzD,yEAAuD;AACvD,wEAAsD;AACtD,0EAAwD;AACxD,kEAAgD;AAChD,kEAAgD;AAChD,gEAA8C;AAC9C,wEAAsD;AACtD,8DAA4C;AAC5C,qEAAmD;AACnD,yEAAuD;AACvD,0EAAwD;AACxD,mEAAiD;AACjD,uEAAqD;AACrD,wEAAsD;AACtD,2EAAyD;AACzD,gFAA8D;AAC9D,0EAAwD;AAGxD,4DAA0C;AAC1C,0DAAwC;AACxC,gEAA8C;AAC9C,sEAAoD;AACpD,qEAAmD;AACnD,oEAAgF;AAAvE,4GAAA,UAAU,OAAA;AAEnB,8EAA4D;AAC5D,mFAAiE;AACjE,oFAAkE;AAClE,+DAA6C;AAE7C,kEAAgD;AAChD,sEAAoD;AAEpD,kEAAgD;AAChD,kEAAgD;AAChD,kEAAgD;AAoBhD,kEAAgD;AAChD,wEAAsD;AAEtD,6EAA2D;AAE3D,2DAAyC;AAEzC,2BAA2B;AAC3B,kFAAgE;AAChE,0EAAwD;AACxD,sEAAoD;AACpD,kEAAgD;AAChD,uEAAqD;AAErD,gEAA8C;AAC9C,0EAAwD;AACxD,0EAAwD;AACxD,oEAAkD;AAClD,wEAAsD;AACtD,wEAAsD","sourcesContent":["export * from './components/alert/alert.js';\nexport * from './components/alert-dialog/alert-dialog.js';\nexport * from './components/app-header/app-header.js';\nexport * from './components/app-header/simple-auth-tool.js';\nexport * from './components/app-shell/app-shell.js';\nexport * from './components/side-nav/side-nav.js';\nexport * from './components/top-nav/top-nav.js';\nexport * from './components/badge/badge.js';\nexport * from './components/button/button.js';\nexport * from './components/button/link-button.js';\nexport * from './components/button/icon-button.js';\nexport * from './components/button/icon-link-button.js';\nexport * from './components/callout/callout.js';\nexport * from './components/card/card.js';\nexport * from './components/checkbox/checkbox.js';\nexport * from './components/checkbox/checkbox-group.js';\nexport * from './components/combo-box/combo-box.js';\nexport * from './components/code/code.js';\nexport * from './components/code-block/code-block.js';\nexport * from './components/copy/copy-button.js';\nexport * from './components/copy/copy-inline.js';\nexport * from './components/date-picker/date-picker.js';\nexport * from './components/dialog-root/dialog-root.js';\nexport * from './components/disclosure/disclosure.js';\nexport * from './components/disclosure/disclosure-group.js';\nexport type { DisclosureSize, DisclosureVariant } from './components/disclosure/context.js';\nexport * from './components/divider/divider.js';\nexport * from './components/drawer/drawer.js';\nexport * from './components/form/form.js';\nexport * from './components/link-tabs/link-tabs.js';\nexport * from './components/menu/menu.js';\nexport * from './components/modal-dialog/modal-dialog.js';\nexport * from './components/number-field/number-field.js';\nexport * from './components/pagination/pagination.js';\nexport * from './components/progress-bar/progress-bar.js';\nexport * from './components/radio/radio.js';\nexport * from './components/radio/radio-group.js';\nexport * from './components/select/select.js';\nexport * from './components/slider/slider.js';\nexport * from './components/spinner/spinner.js';\nexport * from './components/text-inputs/search-field.js';\nexport * from './components/text-inputs/text-field.js';\nexport * from './components/text-inputs/text-area.js';\nexport * from './components/breadcrumbs/breadcrumbs.js';\nexport * from './components/tooltip/tooltip.js';\nexport * from './components/popover/popover.js';\nexport * from './components/switch/switch.js';\nexport * from './components/table/table-container.js';\nexport * from './components/table/table.js';\nexport * from './components/table/table-header.js';\nexport * from './components/table/table-header-row.js';\nexport * from './components/table/table-header-cell.js';\nexport * from './components/table/table-body.js';\nexport * from './components/table/table-body-row.js';\nexport * from './components/table/table-body-cell.js';\nexport * from './components/table/table-row-selector.js';\nexport * from './components/table/table-all-rows-selector.js';\nexport * from './components/table/table-empty-state.js';\nexport type { RowSelectionMode as TableRowSelectionMode } from './components/table/contexts/table-state.js';\nexport type { ColumnContentAlignment as TableColumnContentAlignment } from './components/table/contexts/column-collection.js';\nexport * from './components/tabs/tabs.js';\nexport * from './components/tag/tag.js';\nexport * from './components/tag/tag-group.js';\nexport * from './components/tag-field/tag-field.js';\nexport * from './components/toast/toast-region.js';\nexport { toastQueue, type ToastQueue } from './components/toast/toast-queue.js';\nexport type { ToastOptions } from './components/toast/types.js';\nexport * from './components/toggle-button/toggle-button.js';\nexport * from './components/toggle-button/toggle-icon-button.js';\nexport * from './components/toggle-button/toggle-button-group.js';\nexport * from './components/file-trigger.js';\n\nexport * from './components/spacing/box/box.js';\nexport * from './components/spacing/stack/stack.js';\n\nexport * from './components/typography/text.js';\nexport * from './components/typography/link.js';\nexport * from './components/typography/list.js';\n\nexport type { ForegroundTone } from './utils/style/types.js';\n\nexport type {\n  CollectionItem,\n  Direction,\n  FieldError,\n  HoverEvent,\n  Key,\n  Selection,\n  PressEvent,\n  RouterConfig,\n  Href,\n  RouterOptions,\n  ValidationResult,\n} from './components/types.js';\nexport type { Spacing, Responsive } from './components/spacing/types.js';\nexport type { StyleProps } from './with-style-props.js';\n\nexport * from './providers/ssr/ssr-provider.js';\nexport * from './providers/router/router-provider.js';\n\nexport * from './components/internal/x-button/x-button.js';\n\nexport * from './utils/use-is-mobile.js';\n\n// Unfinished exports below\nexport * from './components/visually-hidden/visually-hidden.js';\nexport * from './components/file-picker/file-picker.js';\nexport * from './components/container/container.js';\nexport * from './components/stepper/stepper.js';\nexport * from './components/stepper/stepper-item.js';\nexport type { StepperStatus } from './components/stepper/types.js';\nexport * from './components/hidden/hidden.js';\nexport * from './components/page-layout/page-layout.js';\nexport * from './components/page-header/page-header.js';\nexport * from './components/nav-list/nav-list.js';\nexport * from './components/app-header/nav-button.js';\nexport * from './components/mobile-nav/mobile-nav.js';\n"]}

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

@@ -3,7 +3,7 @@ import type { CommonProps, Href, NavigationProps, WithRequired } from '../types.
 export interface AppHeaderTitleLinkProps extends WithRequired<NavigationProps, 'href'> {
 }
 export interface AppHeaderProps extends CommonProps {
-    /** The title displayed in the header, usually the application name. Rendered as an `<h1>` element. */
+    /** The title displayed in the header, usually the application name.  */
     title: string;
     /** The props of the link that is rendered around the header title. */
     titleLink: Href | AppHeaderTitleLinkProps;

package/dist/esm/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,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQtE,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMpF,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;IAC/B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B;AAqED;;;;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,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQtE,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMpF,MAAM,WAAW,uBAAwB,SAAQ,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;CAAG;AAEzF,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,wEAAwE;IACxE,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;IAC/B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B;AAqED;;;;GAIG;AACH,QAAA,MAAM,UAAU,+GAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}

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

@@ -17,7 +17,7 @@ function AppHeader({ title, titleLink, tools, UNSTABLE_navButton: navButton, UNS
     const isMobile = useIsMobile();
     const appShellContext = useContext(AppShellContext);
     const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };
-    return (_jsxs("header", { ...props, ref: ref, className: clsx('cim-app-header', UNSAFE_className), style: UNSAFE_style, "data-react-aria-top-layer": appShellContext?.mobileNavIsOpen || undefined, children: [_jsxs("div", { className: "cim-app-header-title", children: [navButton !== undefined ? (navButton) : appShellContext ? (_jsx(AppHeaderNavButton, { "data-app-shell-controlled": true })) : null, _jsx(CimpressLogo, { height: 24 }), _jsx(Divider, { orientation: "vertical" }), _jsx(Text, { as: "h1", variant: "title-5", tone: "base", children: _jsx(Link, { ...titleLinkProps, UNSAFE_className: "cim-app-header-title-link", children: title }) }), postTitle] }), search && _jsx("div", { className: "cim-app-header-search", children: search }), _jsx("div", { className: "cim-app-header-tools", children: isMobile && tools ? (_jsxs(PopoverRoot, { children: [_jsx(IconButton, { icon: _jsx(IconMenuMoreVertical, {}), "aria-label": "Expand/collapse header", variant: "tertiary", size: "small" }), _jsx(Popover, { "aria-label": "Expanded header", placement: "bottom end", children: _jsx("div", { className: "cim-app-header-tools-collapsed", children: tools }) })] })) : (tools) })] }));
+    return (_jsxs("header", { ...props, ref: ref, className: clsx('cim-app-header', UNSAFE_className), style: UNSAFE_style, "data-react-aria-top-layer": appShellContext?.mobileNavIsOpen || undefined, children: [_jsxs("div", { className: "cim-app-header-title", children: [navButton !== undefined ? (navButton) : appShellContext ? (_jsx(AppHeaderNavButton, { "data-app-shell-controlled": true })) : null, _jsx(CimpressLogo, { height: 24 }), _jsx(Divider, { orientation: "vertical" }), _jsx(Text, { as: "span", variant: "title-5", tone: "base", children: _jsx(Link, { ...titleLinkProps, UNSAFE_className: "cim-app-header-title-link", children: title }) }), postTitle] }), search && _jsx("div", { className: "cim-app-header-search", children: search }), _jsx("div", { className: "cim-app-header-tools", children: isMobile && tools ? (_jsxs(PopoverRoot, { children: [_jsx(IconButton, { icon: _jsx(IconMenuMoreVertical, {}), "aria-label": "Expand/collapse header", variant: "tertiary", size: "small" }), _jsx(Popover, { "aria-label": "Expanded header", placement: "bottom end", children: _jsx("div", { className: "cim-app-header-tools-collapsed", children: tools }) })] })) : (tools) })] }));
 }
 /**
  * Displays a basic application header.