@cimpress-ui/react 1.25.1 → 1.26.0

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,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,sEAAoD;AACpD,sEAAoD;AACpD,gEAA8C;AAC9C,wEAAsD;AACtD,kEAAgD;AAChD,0EAAwD;AACxD,oEAAkD","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/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/app-shell/app-shell.js';\nexport * from './components/app-header/side-nav.js';\nexport * from './components/hidden/hidden.js';\nexport * from './components/app-header/nav-button.js';\nexport * from './components/top-nav/top-nav.js';\nexport * from './components/page-layout/page-layout.js';\nexport * from './components/nav-list/nav-list.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,8DAA4C;AAC5C,4EAA0D;AAC1D,wEAAsD;AACtD,8EAA4D;AAC5D,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,sEAAoD;AACpD,oEAAkD;AAClD,gEAA8C;AAC9C,kEAAgD;AAChD,0EAAwD;AACxD,oEAAkD;AAClD,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/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/app-shell/app-shell.js';\nexport * from './components/side-nav/side-nav.js';\nexport * from './components/hidden/hidden.js';\nexport * from './components/top-nav/top-nav.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';\n"]}

package/dist/commonjs/utils/breakpoints.d.ts

@@ -0,0 +1,9 @@
+import type { Breakpoint } from '../components/spacing/types.js';
+import { type UseMediaQueryOptions } from './use-media-query.js';
+export type BreakpointRange = {
+    min?: Breakpoint;
+    max?: Breakpoint;
+};
+export declare function useBreakpoint(range: BreakpointRange, options?: UseMediaQueryOptions): boolean;
+export declare function matchesBreakpoint(range: BreakpointRange): boolean;
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/commonjs/utils/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAiB,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAchF,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,GAAG,CAAC,EAAE,UAAU,CAAC;CAClB,CAAC;AAgCF,wBAAgB,aAAa,CAAC,KAAK,EAAE,eAAe,EAAE,OAAO,GAAE,oBAAyB,GAAG,OAAO,CAEjG;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,GAAG,OAAO,CAEjE"}

package/dist/commonjs/utils/breakpoints.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBreakpoint = useBreakpoint;
+exports.matchesBreakpoint = matchesBreakpoint;
+const use_media_query_js_1 = require("./use-media-query.js");
+const breakpoints = {
+    sm: { maxWidth: 639 },
+    md: { minWidth: 640, maxWidth: 1023 },
+    lg: { minWidth: 1024, maxWidth: 1439 },
+    xl: { minWidth: 1440 },
+};
+function buildBreakpointQuery({ min, max }) {
+    if (min === undefined && max === undefined) {
+        throw new Error('useBreakpoint requires at least one of "min" or "max".');
+    }
+    const parts = [];
+    if (min !== undefined) {
+        const minWidth = breakpoints[min].minWidth;
+        if (minWidth === undefined) {
+            throw new Error(`Breakpoint "${min}" does not have a min width.`);
+        }
+        parts.push(`(min-width: ${minWidth}px)`);
+    }
+    if (max !== undefined) {
+        const maxWidth = breakpoints[max].maxWidth;
+        if (maxWidth === undefined) {
+            throw new Error(`Breakpoint "${max}" does not have a max width.`);
+        }
+        parts.push(`(max-width: ${maxWidth}px)`);
+    }
+    return parts.join(' and ');
+}
+function useBreakpoint(range, options = {}) {
+    return (0, use_media_query_js_1.useMediaQuery)(buildBreakpointQuery(range), options);
+}
+function matchesBreakpoint(range) {
+    return window.matchMedia(buildBreakpointQuery(range)).matches;
+}
+//# sourceMappingURL=breakpoints.js.map

package/dist/commonjs/utils/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../../src/utils/breakpoints.ts"],"names":[],"mappings":";;AAkDA,sCAEC;AAED,8CAEC;AAvDD,6DAAgF;AAOhF,MAAM,WAAW,GAA6C;IAC5D,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;IACrB,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE;IACrC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE;IACtC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;CACvB,CAAC;AAOF,SAAS,oBAAoB,CAAC,EAAE,GAAG,EAAE,GAAG,EAAmB;IACzD,IAAI,GAAG,KAAK,SAAS,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;QAC3C,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;IAC5E,CAAC;IAED,MAAM,KAAK,GAAa,EAAE,CAAC;IAE3B,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;QACtB,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC;QAE3C,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,MAAM,IAAI,KAAK,CAAC,eAAe,GAAG,8BAA8B,CAAC,CAAC;QACpE,CAAC;QAED,KAAK,CAAC,IAAI,CAAC,eAAe,QAAQ,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;QACtB,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC;QAE3C,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,MAAM,IAAI,KAAK,CAAC,eAAe,GAAG,8BAA8B,CAAC,CAAC;QACpE,CAAC;QAED,KAAK,CAAC,IAAI,CAAC,eAAe,QAAQ,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAC7B,CAAC;AAED,SAAgB,aAAa,CAAC,KAAsB,EAAE,UAAgC,EAAE;IACtF,OAAO,IAAA,kCAAa,EAAC,oBAAoB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAC7D,CAAC;AAED,SAAgB,iBAAiB,CAAC,KAAsB;IACtD,OAAO,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;AAChE,CAAC","sourcesContent":["import type { Breakpoint } from '../components/spacing/types.js';\nimport { useMediaQuery, type UseMediaQueryOptions } from './use-media-query.js';\n\ntype BreakpointDefinition = {\n  minWidth?: number;\n  maxWidth?: number;\n};\n\nconst breakpoints: Record<Breakpoint, BreakpointDefinition> = {\n  sm: { maxWidth: 639 },\n  md: { minWidth: 640, maxWidth: 1023 },\n  lg: { minWidth: 1024, maxWidth: 1439 },\n  xl: { minWidth: 1440 },\n};\n\nexport type BreakpointRange = {\n  min?: Breakpoint;\n  max?: Breakpoint;\n};\n\nfunction buildBreakpointQuery({ min, max }: BreakpointRange): string {\n  if (min === undefined && max === undefined) {\n    throw new Error('useBreakpoint requires at least one of \"min\" or \"max\".');\n  }\n\n  const parts: string[] = [];\n\n  if (min !== undefined) {\n    const minWidth = breakpoints[min].minWidth;\n\n    if (minWidth === undefined) {\n      throw new Error(`Breakpoint \"${min}\" does not have a min width.`);\n    }\n\n    parts.push(`(min-width: ${minWidth}px)`);\n  }\n\n  if (max !== undefined) {\n    const maxWidth = breakpoints[max].maxWidth;\n\n    if (maxWidth === undefined) {\n      throw new Error(`Breakpoint \"${max}\" does not have a max width.`);\n    }\n\n    parts.push(`(max-width: ${maxWidth}px)`);\n  }\n\n  return parts.join(' and ');\n}\n\nexport function useBreakpoint(range: BreakpointRange, options: UseMediaQueryOptions = {}): boolean {\n  return useMediaQuery(buildBreakpointQuery(range), options);\n}\n\nexport function matchesBreakpoint(range: BreakpointRange): boolean {\n  return window.matchMedia(buildBreakpointQuery(range)).matches;\n}\n"]}

package/dist/commonjs/utils/use-is-mobile.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsMobile = useIsMobile;
-const use_media_query_js_1 = require("./use-media-query.js");
+const breakpoints_js_1 = require("./breakpoints.js");
 function useIsMobile() {
-    return (0, use_media_query_js_1.useMediaQuery)('(max-width: 639px)');
+    return (0, breakpoints_js_1.useBreakpoint)({ max: 'sm' });
 }
 //# sourceMappingURL=use-is-mobile.js.map

package/dist/commonjs/utils/use-is-mobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-is-mobile.js","sourceRoot":"","sources":["../../../src/utils/use-is-mobile.ts"],"names":[],"mappings":";;AAEA,kCAEC;AAJD,6DAAqD;AAErD,SAAgB,WAAW;IACzB,OAAO,IAAA,kCAAa,EAAC,oBAAoB,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { useMediaQuery } from './use-media-query.js';\n\nexport function useIsMobile() {\n  return useMediaQuery('(max-width: 639px)');\n}\n"]}
+{"version":3,"file":"use-is-mobile.js","sourceRoot":"","sources":["../../../src/utils/use-is-mobile.ts"],"names":[],"mappings":";;AAEA,kCAEC;AAJD,qDAAiD;AAEjD,SAAgB,WAAW;IACzB,OAAO,IAAA,8BAAa,EAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;AACtC,CAAC","sourcesContent":["import { useBreakpoint } from './breakpoints.js';\n\nexport function useIsMobile() {\n  return useBreakpoint({ max: 'sm' });\n}\n"]}

package/dist/commonjs/utils/use-media-query.d.ts

@@ -1,2 +1,5 @@
-export {};
+export type UseMediaQueryOptions = {
+    defaultValue?: boolean;
+    initializeWithValue?: boolean;
+};
 //# sourceMappingURL=use-media-query.d.ts.map

package/dist/commonjs/utils/use-media-query.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-media-query.d.ts","sourceRoot":"","sources":["../../../src/utils/use-media-query.ts"],"names":[],"mappings":""}
+{"version":3,"file":"use-media-query.d.ts","sourceRoot":"","sources":["../../../src/utils/use-media-query.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC"}

package/dist/commonjs/utils/use-media-query.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-media-query.js","sourceRoot":"","sources":["../../../src/utils/use-media-query.ts"],"names":[],"mappings":";AAAA,kEAAkE;;AAqBlE,sCA6BC;AAhDD,6CAAoD;AACpD,iCAAiC;AAOjC,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AAEhD,MAAM,UAAU,GAAG,CAAC,KAAa,EAAE,eAAwB,KAAK,EAAW,EAAE;IAC3E,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;AAC1C,CAAC,CAAC;AAEF,gBAAgB;AAChB,SAAgB,aAAa,CAC3B,KAAa,EACb,EAAE,YAAY,GAAG,KAAK,EAAE,mBAAmB,GAAG,IAAI,KAA2B,EAAE;IAE/E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAU,GAAG,EAAE;QACnD,IAAI,mBAAmB,EAAE,CAAC;YACxB,OAAO,UAAU,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;QACzC,CAAC;QAED,OAAO,YAAY,CAAC;IACtB,CAAC,CAAC,CAAC;IAEH,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,SAAS,YAAY;YACnB,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;QAC9C,CAAC;QAED,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAE5C,YAAY,EAAE,CAAC;QAEf,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAEpD,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE1B,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["// Adapted from https://usehooks-ts.com/react-hook/use-media-query\n\nimport { useLayoutEffect } from '@react-aria/utils';\nimport { useState } from 'react';\n\ntype UseMediaQueryOptions = {\n  defaultValue?: boolean;\n  initializeWithValue?: boolean;\n};\n\nconst IS_SERVER = typeof window === 'undefined';\n\nconst getMatches = (query: string, defaultValue: boolean = false): boolean => {\n  if (IS_SERVER) {\n    return defaultValue;\n  }\n\n  return window.matchMedia(query).matches;\n};\n\n/** @internal */\nexport function useMediaQuery(\n  query: string,\n  { defaultValue = false, initializeWithValue = true }: UseMediaQueryOptions = {},\n): boolean {\n  const [matches, setMatches] = useState<boolean>(() => {\n    if (initializeWithValue) {\n      return getMatches(query, defaultValue);\n    }\n\n    return defaultValue;\n  });\n\n  useLayoutEffect(() => {\n    function handleChange() {\n      setMatches(getMatches(query, defaultValue));\n    }\n\n    const matchMedia = window.matchMedia(query);\n\n    handleChange();\n\n    matchMedia.addEventListener('change', handleChange);\n\n    return () => {\n      matchMedia.removeEventListener('change', handleChange);\n    };\n  }, [query, defaultValue]);\n\n  return matches;\n}\n"]}
+{"version":3,"file":"use-media-query.js","sourceRoot":"","sources":["../../../src/utils/use-media-query.ts"],"names":[],"mappings":";AAAA,kEAAkE;;AAqBlE,sCA6BC;AAhDD,6CAAoD;AACpD,iCAAiC;AAOjC,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AAEhD,MAAM,UAAU,GAAG,CAAC,KAAa,EAAE,eAAwB,KAAK,EAAW,EAAE;IAC3E,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;AAC1C,CAAC,CAAC;AAEF,gBAAgB;AAChB,SAAgB,aAAa,CAC3B,KAAa,EACb,EAAE,YAAY,GAAG,KAAK,EAAE,mBAAmB,GAAG,IAAI,KAA2B,EAAE;IAE/E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAU,GAAG,EAAE;QACnD,IAAI,mBAAmB,EAAE,CAAC;YACxB,OAAO,UAAU,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;QACzC,CAAC;QAED,OAAO,YAAY,CAAC;IACtB,CAAC,CAAC,CAAC;IAEH,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,SAAS,YAAY;YACnB,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;QAC9C,CAAC;QAED,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAE5C,YAAY,EAAE,CAAC;QAEf,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAEpD,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE1B,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["// Adapted from https://usehooks-ts.com/react-hook/use-media-query\n\nimport { useLayoutEffect } from '@react-aria/utils';\nimport { useState } from 'react';\n\nexport type UseMediaQueryOptions = {\n  defaultValue?: boolean;\n  initializeWithValue?: boolean;\n};\n\nconst IS_SERVER = typeof window === 'undefined';\n\nconst getMatches = (query: string, defaultValue: boolean = false): boolean => {\n  if (IS_SERVER) {\n    return defaultValue;\n  }\n\n  return window.matchMedia(query).matches;\n};\n\n/** @internal */\nexport function useMediaQuery(\n  query: string,\n  { defaultValue = false, initializeWithValue = true }: UseMediaQueryOptions = {},\n): boolean {\n  const [matches, setMatches] = useState<boolean>(() => {\n    if (initializeWithValue) {\n      return getMatches(query, defaultValue);\n    }\n\n    return defaultValue;\n  });\n\n  useLayoutEffect(() => {\n    function handleChange() {\n      setMatches(getMatches(query, defaultValue));\n    }\n\n    const matchMedia = window.matchMedia(query);\n\n    handleChange();\n\n    matchMedia.addEventListener('change', handleChange);\n\n    return () => {\n      matchMedia.removeEventListener('change', handleChange);\n    };\n  }, [query, defaultValue]);\n\n  return matches;\n}\n"]}

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { CommonProps, Href, NavigationProps, WithRequired } from '../types.js';
 export interface AppHeaderTitleLinkProps extends WithRequired<NavigationProps, 'href'> {
 }

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,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAOrD,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKpF,MAAM,WAAW,uBAAwB,SAAQ,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;CAAG;AAEzF,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,sGAAsG;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,SAAS,EAAE,IAAI,GAAG,uBAAuB,CAAC;IAC1C,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B;AA2DD;;;;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,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;AAiED;;;;GAIG;AACH,QAAA,MAAM,UAAU,+GAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}

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

@@ -1,19 +1,23 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
+import { useContext } from 'react';
 import { forwardRef } from '../../forward-ref.js';
 import { IconMenuMoreVertical } from '../../icons/index.js';
 import { useIsMobile } from '../../utils/use-is-mobile.js';
+import { AppShellContext } from '../app-shell/app-shell-context.js';
 import { IconButton } from '../button/icon-button.js';
 import { Divider } from '../divider/divider.js';
 import { Popover, PopoverRoot } from '../popover/popover.js';
 import { Link } from '../typography/link.js';
 import { Text } from '../typography/text.js';
 import { CimpressLogo } from './cimpress-logo.js';
+import { UNSTABLE_AppHeaderNavButton as AppHeaderNavButton } from './nav-button.js';
 function AppHeader({ title, titleLink, tools, UNSTABLE_navButton: navButton, UNSTABLE_postTitle: postTitle, UNSTABLE_search: search, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     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, children: [_jsxs("div", { className: "cim-app-header-title", children: [navButton, _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?.sideNavIsOpen || undefined, children: [_jsxs("div", { className: "cim-app-header-title", children: [navButton !== undefined ? navButton : appShellContext ? _jsx(AppHeaderNavButton, {}) : 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) })] }));
 }
 /**
  * Displays a basic application header.

package/dist/esm/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,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAgBlD,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,WAAW,EAAE,CAAC;IAE/B,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,qBAAY,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACnG,eAAK,SAAS,EAAC,sBAAsB,aAClC,SAAS,EACV,KAAC,YAAY,IAAC,MAAM,EAAE,EAAE,GAAI,EAC5B,KAAC,OAAO,IAAC,WAAW,EAAC,UAAU,GAAG,EAClC,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YACzC,KAAC,IAAI,OAAK,cAAc,EAAE,gBAAgB,EAAC,2BAA2B,YACnE,KAAK,GACD,GACF,EAEN,SAAS,IACN,EAEL,MAAM,IAAI,cAAK,SAAS,EAAC,uBAAuB,YAAE,MAAM,GAAO,EAEhE,cAAK,SAAS,EAAC,sBAAsB,YAClC,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,CACnB,MAAC,WAAW,eACV,KAAC,UAAU,IACT,IAAI,EAAE,KAAC,oBAAoB,KAAG,gBAEnB,wBAAwB,EACnC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,EACF,KAAC,OAAO,kBAAY,iBAAiB,EAAC,SAAS,EAAC,YAAY,YAC1D,cAAK,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,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenuMoreVertical } from '../../icons/index.js';\nimport { useIsMobile } from '../../utils/use-is-mobile.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';\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\n  const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };\n\n  return (\n    <header {...props} ref={ref} className={clsx('cim-app-header', UNSAFE_className)} style={UNSAFE_style}>\n      <div className=\"cim-app-header-title\">\n        {navButton}\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":"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","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?.sideNavIsOpen || undefined}\n    >\n      <div className=\"cim-app-header-title\">\n        {navButton !== undefined ? navButton : appShellContext ? <AppHeaderNavButton /> : 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"]}

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

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

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

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

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

@@ -1,11 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
+import { useContext } from 'react';
 import { forwardRef } from '../../forward-ref.js';
 import { IconMenu } from '../../icons/index.js';
 import { withStyleProps } from '../../with-style-props.js';
+import { AppShellContext } from '../app-shell/app-shell-context.js';
 import { IconButton } from '../button/icon-button.js';
 function UNSTABLE_AppHeaderNavButton({ isOpen, onPress, UNSAFE_className, UNSAFE_style }, ref) {
-    return (_jsx(IconButton, { "aria-expanded": isOpen, icon: _jsx(IconMenu, {}), size: "small", "aria-label": "Open menu", variant: "tertiary", onPress: onPress, ref: ref, UNSAFE_className: clsx('cim-app-header-nav-toggle', UNSAFE_className), UNSAFE_style: UNSAFE_style }));
+    const appShellContext = useContext(AppShellContext);
+    const handlePress = () => {
+        onPress?.();
+        appShellContext?.toggleSideNav();
+    };
+    return (_jsx(IconButton, { "aria-expanded": isOpen ?? appShellContext?.sideNavIsOpen, icon: _jsx(IconMenu, {}), "aria-label": "Open menu", variant: "tertiary", onPress: handlePress, ref: ref, UNSAFE_className: clsx('cim-app-header-nav-toggle', UNSAFE_className), UNSAFE_style: UNSAFE_style }));
 }
 const _UNSTABLE_AppHeaderNavButton = withStyleProps(forwardRef(UNSTABLE_AppHeaderNavButton, 'AppHeaderNavButton'));
 export { _UNSTABLE_AppHeaderNavButton as UNSTABLE_AppHeaderNavButton };

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

@@ -1 +1 @@
-{"version":3,"file":"nav-button.js","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAQtD,SAAS,2BAA2B,CAClC,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAoC,EACrF,GAAoC;IAEpC,OAAO,CACL,KAAC,UAAU,qBACM,MAAM,EACrB,IAAI,EAAE,KAAC,QAAQ,KAAG,EAClB,IAAI,EAAC,OAAO,gBAED,WAAW,EACtB,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,IAAI,CAAC,2BAA2B,EAAE,gBAAgB,CAAC,EACrE,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC;AAED,MAAM,4BAA4B,GAAG,cAAc,CAAC,UAAU,CAAC,2BAA2B,EAAE,oBAAoB,CAAC,CAAC,CAAC;AAEnH,OAAO,EAAE,4BAA4B,IAAI,2BAA2B,EAAE,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenu } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { IconButton } from '../button/icon-button.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_AppHeaderNavButtonProps extends CommonProps {\n  isOpen: boolean;\n  onPress: () => void;\n}\n\nfunction UNSTABLE_AppHeaderNavButton(\n  { isOpen, onPress, UNSAFE_className, UNSAFE_style }: UNSTABLE_AppHeaderNavButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  return (\n    <IconButton\n      aria-expanded={isOpen}\n      icon={<IconMenu />}\n      size=\"small\"\n      // TODO\n      aria-label=\"Open menu\"\n      variant=\"tertiary\"\n      onPress={onPress}\n      ref={ref}\n      UNSAFE_className={clsx('cim-app-header-nav-toggle', UNSAFE_className)}\n      UNSAFE_style={UNSAFE_style}\n    />\n  );\n}\n\nconst _UNSTABLE_AppHeaderNavButton = withStyleProps(forwardRef(UNSTABLE_AppHeaderNavButton, 'AppHeaderNavButton'));\n\nexport { _UNSTABLE_AppHeaderNavButton as UNSTABLE_AppHeaderNavButton };\n"]}
+{"version":3,"file":"nav-button.js","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAQtD,SAAS,2BAA2B,CAClC,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAoC,EACrF,GAAoC;IAEpC,MAAM,eAAe,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEpD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,OAAO,EAAE,EAAE,CAAC;QACZ,eAAe,EAAE,aAAa,EAAE,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,UAAU,qBACM,MAAM,IAAI,eAAe,EAAE,aAAa,EACvD,IAAI,EAAE,KAAC,QAAQ,KAAG,gBAEP,WAAW,EACtB,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,IAAI,CAAC,2BAA2B,EAAE,gBAAgB,CAAC,EACrE,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC;AAED,MAAM,4BAA4B,GAAG,cAAc,CAAC,UAAU,CAAC,2BAA2B,EAAE,oBAAoB,CAAC,CAAC,CAAC;AAEnH,OAAO,EAAE,4BAA4B,IAAI,2BAA2B,EAAE,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenu } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { AppShellContext } from '../app-shell/app-shell-context.js';\nimport { IconButton } from '../button/icon-button.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_AppHeaderNavButtonProps extends CommonProps {\n  isOpen?: boolean;\n  onPress?: () => void;\n}\n\nfunction UNSTABLE_AppHeaderNavButton(\n  { isOpen, onPress, UNSAFE_className, UNSAFE_style }: UNSTABLE_AppHeaderNavButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const appShellContext = useContext(AppShellContext);\n\n  const handlePress = () => {\n    onPress?.();\n    appShellContext?.toggleSideNav();\n  };\n\n  return (\n    <IconButton\n      aria-expanded={isOpen ?? appShellContext?.sideNavIsOpen}\n      icon={<IconMenu />}\n      // TODO\n      aria-label=\"Open menu\"\n      variant=\"tertiary\"\n      onPress={handlePress}\n      ref={ref}\n      UNSAFE_className={clsx('cim-app-header-nav-toggle', UNSAFE_className)}\n      UNSAFE_style={UNSAFE_style}\n    />\n  );\n}\n\nconst _UNSTABLE_AppHeaderNavButton = withStyleProps(forwardRef(UNSTABLE_AppHeaderNavButton, 'AppHeaderNavButton'));\n\nexport { _UNSTABLE_AppHeaderNavButton as UNSTABLE_AppHeaderNavButton };\n"]}

package/dist/esm/components/app-shell/app-shell-context.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=app-shell-context.d.ts.map

package/dist/esm/components/app-shell/app-shell-context.d.ts.map

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

package/dist/esm/components/app-shell/app-shell-context.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+/** @internal */
+export const AppShellContext = createContext(null);
+//# sourceMappingURL=app-shell-context.js.map

package/dist/esm/components/app-shell/app-shell-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell-context.js","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,gBAAgB;AAChB,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAGlC,IAAI,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\n\n/** @internal */\nexport const AppShellContext = createContext<{\n  sideNavIsOpen: boolean;\n  toggleSideNav: (isOpen?: boolean) => void;\n} | null>(null);\n"]}

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { CommonProps } from '../types.js';
 export interface UNSTABLE_AppShellProps extends CommonProps {
     children: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAM/G;AAED,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAM5B"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAa/G;AAED,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAkB5B"}

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

@@ -1,9 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
+import { useCallback, useContext, useState } from 'react';
+import { useIsMobile } from '../../utils/use-is-mobile.js';
+import { AppShellContext } from './app-shell-context.js';
 export function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }) {
-    return (_jsx("div", { className: clsx('cim-app-shell', UNSAFE_className), style: UNSAFE_style, ...props, children: children }));
+    const [sideNavIsOpen, setSideNavIsOpen] = useState(true);
+    const toggleSideNav = useCallback((isOpen) => {
+        setSideNavIsOpen((prevIsOpen) => isOpen ?? !prevIsOpen);
+    }, []);
+    return (_jsx(AppShellContext.Provider, { value: { sideNavIsOpen, toggleSideNav }, children: _jsx("div", { className: clsx('cim-app-shell', UNSAFE_className), style: UNSAFE_style, ...props, children: children }) }));
 }
 export function UNSTABLE_AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }) {
-    return (_jsx("div", { className: clsx('cim-app-shell-body', UNSAFE_className), style: UNSAFE_style, ...props, children: children }));
+    const appShellContext = useContext(AppShellContext);
+    const sideNavIsOpen = appShellContext?.sideNavIsOpen ?? false;
+    const isMobile = useIsMobile();
+    return (_jsx("div", { className: clsx('cim-app-shell-body', UNSAFE_className), style: UNSAFE_style, inert: isMobile && sideNavIsOpen ? '' : undefined, ...props, children: children }));
 }
 //# sourceMappingURL=app-shell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"app-shell.js","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAQxB,MAAM,UAAU,iBAAiB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAA0B;IAC9G,OAAO,CACL,cAAK,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,KAAM,KAAK,YACpF,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAMD,MAAM,UAAU,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACmB;IAC3B,OAAO,CACL,cAAK,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,KAAM,KAAK,YACzF,QAAQ,GACL,CACP,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_AppShellProps extends CommonProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppShellProps) {\n  return (\n    <div className={clsx('cim-app-shell', UNSAFE_className)} style={UNSAFE_style} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport interface UNSTABLE_AppShellBodyProps extends CommonProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_AppShellBody({\n  children,\n  UNSAFE_className,\n  UNSAFE_style,\n  ...props\n}: UNSTABLE_AppShellBodyProps) {\n  return (\n    <div className={clsx('cim-app-shell-body', UNSAFE_className)} style={UNSAFE_style} {...props}>\n      {children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"app-shell.js","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAMzD,MAAM,UAAU,iBAAiB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAA0B;IAC9G,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,MAAgB,EAAE,EAAE;QACrD,gBAAgB,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,aAAa,EAAE,aAAa,EAAE,YAC/D,cAAK,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,KAAM,KAAK,YACpF,QAAQ,GACL,GACmB,CAC5B,CAAC;AACJ,CAAC;AAMD,MAAM,UAAU,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACmB;IAC3B,MAAM,eAAe,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IACpD,MAAM,aAAa,GAAG,eAAe,EAAE,aAAa,IAAI,KAAK,CAAC;IAC9D,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,EACvD,KAAK,EAAE,YAAY,EAIb,KAAK,EAAE,QAAQ,IAAI,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,KACnD,KAAK,YAER,QAAQ,GACL,CACP,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { useCallback, useContext, useState, type ReactNode } from 'react';\nimport { useIsMobile } from '../../utils/use-is-mobile.js';\nimport type { CommonProps } from '../types.js';\nimport { AppShellContext } from './app-shell-context.js';\n\nexport interface UNSTABLE_AppShellProps extends CommonProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppShellProps) {\n  const [sideNavIsOpen, setSideNavIsOpen] = useState(true);\n  const toggleSideNav = useCallback((isOpen?: boolean) => {\n    setSideNavIsOpen((prevIsOpen) => isOpen ?? !prevIsOpen);\n  }, []);\n\n  return (\n    <AppShellContext.Provider value={{ sideNavIsOpen, toggleSideNav }}>\n      <div className={clsx('cim-app-shell', UNSAFE_className)} style={UNSAFE_style} {...props}>\n        {children}\n      </div>\n    </AppShellContext.Provider>\n  );\n}\n\nexport interface UNSTABLE_AppShellBodyProps extends CommonProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_AppShellBody({\n  children,\n  UNSAFE_className,\n  UNSAFE_style,\n  ...props\n}: UNSTABLE_AppShellBodyProps) {\n  const appShellContext = useContext(AppShellContext);\n  const sideNavIsOpen = appShellContext?.sideNavIsOpen ?? false;\n  const isMobile = useIsMobile();\n\n  return (\n    <div\n      className={clsx('cim-app-shell-body', UNSAFE_className)}\n      style={UNSAFE_style}\n      // Make the body inert when the side nav is open on mobile so that tabbing is contained to app header and side nav\n      // Workaround for React not having type definitions for the `inert` attribute\n      // eslint-disable-next-line internal/no-extra-props-in-spread\n      {...{ inert: isMobile && sideNavIsOpen ? '' : undefined }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/esm/components/internal/input/input.d.ts

@@ -1,8 +1,2 @@
-import { type InputProps as RACInputProps } from 'react-aria-components';
-import type { CommonProps } from '../../types.js';
-interface InputProps extends CommonProps, Exclude<RACInputProps, 'className' | 'style'> {
-    width?: 'fit-content' | 'full-width';
-}
-export declare function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=input.d.ts.map

package/dist/esm/components/internal/input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/input/input.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,UAAU,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC5F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,UAAU,UAAW,SAAQ,WAAW,EAAE,OAAO,CAAC,aAAa,EAAE,WAAW,GAAG,OAAO,CAAC;IACrF,KAAK,CAAC,EAAE,aAAa,GAAG,YAAY,CAAC;CACtC;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAqDtC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/input/input.tsx"],"names":[],"mappings":""}

package/dist/esm/components/internal/input/input.js

@@ -1,30 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useLayoutEffect } from '@react-aria/utils';
 import clsx from 'clsx';
-import { useRef } from 'react';
 import { Input as RACInput } from 'react-aria-components';
 import { textStyle } from '../../typography/utils.js';
+/**
+ * Renders a styled input field.
+ * @internal
+ */
 export function Input(props) {
-    const inputRef = useRef(null);
     // TODO: find a better way to extract common props, if a new prop is added to `CommonProps` this will break
-    const { id, UNSAFE_className, UNSAFE_style, 'data-cim-style-root': dataCimStyleRoot, width, ...inputProps } = props;
-    // Field sizing based on input length for browsers that don't support `field-sizing: content`
-    useLayoutEffect(() => {
-        const input = inputRef.current;
-        function setInputLengthStyle() {
-            // Ensure input value changes are flushed before updating input width, especially in Safari
-            requestAnimationFrame(() => input?.style.setProperty('--cim-input-length', input?.value.length.toString() ?? '0'));
-        }
-        if (input != null) {
-            setInputLengthStyle();
-            input.addEventListener('input', setInputLengthStyle);
-            input.addEventListener('change', setInputLengthStyle);
-        }
-        return () => {
-            input?.removeEventListener('input', setInputLengthStyle);
-            input?.removeEventListener('change', setInputLengthStyle);
-        };
-    }, []);
-    return (_jsx("div", { id: id, className: clsx('cim-input', UNSAFE_className), style: UNSAFE_style, "data-cim-style-root": dataCimStyleRoot, children: _jsx(RACInput, { ...inputProps, ref: inputRef, className: clsx('cim-input-control', textStyle({ variant: 'body' })), "data-width": width }) }));
+    const { id, UNSAFE_className, UNSAFE_style, 'data-cim-style-root': dataCimStyleRoot, contentWidth, ...inputProps } = props;
+    return (_jsx("div", { id: id, className: clsx('cim-input', UNSAFE_className), style: UNSAFE_style, "data-cim-style-root": dataCimStyleRoot, children: _jsx(RACInput, { ...inputProps, className: clsx('cim-input-control', textStyle({ variant: 'body' })), style: { '--cim-input-content-width': contentWidth } }) }));
 }
 //# sourceMappingURL=input.js.map

package/dist/esm/components/internal/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../src/components/internal/input/input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAoC,MAAM,uBAAuB,CAAC;AAE5F,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAMtD,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,2GAA2G;IAC3G,MAAM,EACJ,EAAE,EACF,gBAAgB,EAChB,YAAY,EACZ,qBAAqB,EAAE,gBAAgB,EAEvC,KAAK,EAEL,GAAG,UAAU,EACd,GAAG,KAAK,CAAC;IAEV,6FAA6F;IAC7F,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC;QAE/B,SAAS,mBAAmB;YAC1B,2FAA2F;YAC3F,qBAAqB,CAAC,GAAG,EAAE,CACzB,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,GAAG,CAAC,CACtF,CAAC;QACJ,CAAC;QAED,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;YAClB,mBAAmB,EAAE,CAAC;YAEtB,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;YACrD,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAC;QACxD,CAAC;QAED,OAAO,GAAG,EAAE;YACV,KAAK,EAAE,mBAAmB,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;YACzD,KAAK,EAAE,mBAAmB,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAC;QAC5D,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAC9C,KAAK,EAAE,YAAY,yBACE,gBAAgB,YAErC,KAAC,QAAQ,OACH,UAAU,EACd,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,gBACxD,KAAK,GACjB,GACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useLayoutEffect } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport { useRef } from 'react';\nimport { Input as RACInput, type InputProps as RACInputProps } from 'react-aria-components';\nimport type { CommonProps } from '../../types.js';\nimport { textStyle } from '../../typography/utils.js';\n\ninterface InputProps extends CommonProps, Exclude<RACInputProps, 'className' | 'style'> {\n  width?: 'fit-content' | 'full-width';\n}\n\nexport function Input(props: InputProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  // TODO: find a better way to extract common props, if a new prop is added to `CommonProps` this will break\n  const {\n    id,\n    UNSAFE_className,\n    UNSAFE_style,\n    'data-cim-style-root': dataCimStyleRoot,\n\n    width,\n\n    ...inputProps\n  } = props;\n\n  // Field sizing based on input length for browsers that don't support `field-sizing: content`\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n\n    function setInputLengthStyle() {\n      // Ensure input value changes are flushed before updating input width, especially in Safari\n      requestAnimationFrame(() =>\n        input?.style.setProperty('--cim-input-length', input?.value.length.toString() ?? '0'),\n      );\n    }\n\n    if (input != null) {\n      setInputLengthStyle();\n\n      input.addEventListener('input', setInputLengthStyle);\n      input.addEventListener('change', setInputLengthStyle);\n    }\n\n    return () => {\n      input?.removeEventListener('input', setInputLengthStyle);\n      input?.removeEventListener('change', setInputLengthStyle);\n    };\n  }, []);\n\n  return (\n    <div\n      id={id}\n      className={clsx('cim-input', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-cim-style-root={dataCimStyleRoot}\n    >\n      <RACInput\n        {...inputProps}\n        ref={inputRef}\n        className={clsx('cim-input-control', textStyle({ variant: 'body' }))}\n        data-width={width}\n      />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../src/components/internal/input/input.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAoC,MAAM,uBAAuB,CAAC;AAE5F,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAMtD;;;GAGG;AACH,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,2GAA2G;IAC3G,MAAM,EACJ,EAAE,EACF,gBAAgB,EAChB,YAAY,EACZ,qBAAqB,EAAE,gBAAgB,EAEvC,YAAY,EAEZ,GAAG,UAAU,EACd,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAC9C,KAAK,EAAE,YAAY,yBACE,gBAAgB,YAErC,KAAC,QAAQ,OACH,UAAU,EACd,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,EACpE,KAAK,EAAE,EAAE,2BAA2B,EAAE,YAAY,EAAmB,GACrE,GACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { Input as RACInput, type InputProps as RACInputProps } from 'react-aria-components';\nimport type { CommonProps } from '../../types.js';\nimport { textStyle } from '../../typography/utils.js';\n\ninterface InputProps extends CommonProps, Exclude<RACInputProps, 'className' | 'style'> {\n  contentWidth?: CSSProperties['width'];\n}\n\n/**\n * Renders a styled input field.\n * @internal\n */\nexport function Input(props: InputProps) {\n  // TODO: find a better way to extract common props, if a new prop is added to `CommonProps` this will break\n  const {\n    id,\n    UNSAFE_className,\n    UNSAFE_style,\n    'data-cim-style-root': dataCimStyleRoot,\n\n    contentWidth,\n\n    ...inputProps\n  } = props;\n\n  return (\n    <div\n      id={id}\n      className={clsx('cim-input', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-cim-style-root={dataCimStyleRoot}\n    >\n      <RACInput\n        {...inputProps}\n        className={clsx('cim-input-control', textStyle({ variant: 'body' }))}\n        style={{ '--cim-input-content-width': contentWidth } as CSSProperties}\n      />\n    </div>\n  );\n}\n"]}

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

@@ -19,11 +19,13 @@ export declare function PopoverRoot(props: PopoverRootProps): import("react/jsx-
 export declare namespace PopoverRoot {
     var displayName: string;
 }
+interface DialogProps extends CommonProps, AriaLabelingProps {
+}
 export interface PopoverRenderProps {
     /** Closes the popover when called. */
     close: () => void;
 }
-export interface PopoverProps extends CommonProps, AriaLabelingProps, Pick<RACPopoverProps, 'placement'> {
+export interface PopoverProps extends DialogProps, Pick<RACPopoverProps, 'placement'> {
     /** The contents of the popover. A function may be provided to access a function to close the popover. */
     children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);
     /** The title of the popover. */

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

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA0C,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/F,OAAO,EAGL,KAAK,YAAY,IAAI,eAAe,EAKrC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,gBAAgB;IAC/B,oIAAoI;IACpI,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAElD;yBAFe,WAAW;;;AAM3B,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,iBAAiB,EAAE,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC;IACtG,yGAAyG;IACzG,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,kBAAkB,KAAK,SAAS,CAAC,CAAC;IACvE,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACvC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAkGD;;;;GAIG;AACH,QAAA,MAAM,QAAQ,0GAAiC,CAAC;AAEhD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA0C,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/F,OAAO,EAGL,KAAK,YAAY,IAAI,eAAe,EAKrC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,gBAAgB;IAC/B,oIAAoI;IACpI,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAElD;yBAFe,WAAW;;;AAM3B,UAAU,WAAY,SAAQ,WAAW,EAAE,iBAAiB;CAAG;AAE/D,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC;IACnF,yGAAyG;IACzG,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,kBAAkB,KAAK,SAAS,CAAC,CAAC;IACvE,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACvC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAyGD;;;;GAIG;AACH,QAAA,MAAM,QAAQ,0GAAiC,CAAC;AAEhD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}

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

@@ -24,9 +24,9 @@ function Popover({ children, title, UNSAFE_className, UNSAFE_style, isOpen, defa
         }
     }, [title, ariaLabel, ariaLabelledBy]);
     const popoverRef = useObjectRef(ref);
-    return (_jsx(RACPopover, { ref: popoverRef, className: clsx('cim-popover', UNSAFE_className), style: UNSAFE_style, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, triggerRef: triggerRef, placement: placement, containerPadding: 16, offset: 5, arrowBoundaryOffset: 4, isNonModal: UNSTABLE_isNonModal, maxHeight: UNSTABLE_maxHeight, "data-cim-style-root": true, children: _jsx(PopoverInner, { title: title, children: children, popoverRef: popoverRef, isNonModal: UNSTABLE_isNonModal }) }));
+    return (_jsx(RACPopover, { ref: popoverRef, className: clsx('cim-popover', UNSAFE_className), style: UNSAFE_style, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, triggerRef: triggerRef, placement: placement, containerPadding: 16, offset: 5, arrowBoundaryOffset: 4, isNonModal: UNSTABLE_isNonModal, maxHeight: UNSTABLE_maxHeight, "data-cim-style-root": true, children: _jsx(PopoverInner, { dialogProps: props, title: title, children: children, popoverRef: popoverRef, isNonModal: UNSTABLE_isNonModal }) }));
 }
-function PopoverInner({ title, children, popoverRef, isNonModal }) {
+function PopoverInner({ title, children, popoverRef, isNonModal, dialogProps }) {
     const overlayTriggerState = useContext(RACOverlayTriggerStateContext);
     const renderProps = useMemo(() => ({ close: () => overlayTriggerState?.close() }), [overlayTriggerState]);
     // For non-modal popovers, React Aria does not handle outside interaction by default,
@@ -42,7 +42,7 @@ function PopoverInner({ title, children, popoverRef, isNonModal }) {
         },
         isDisabled: !isNonModal,
     });
-    return (_jsxs(_Fragment, { children: [_jsx(RACOverlayArrow, { className: "cim-popover-arrow", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "10", viewBox: "0 0 16 10", children: _jsx("path", { d: "M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0" }) }) }), _jsxs(RACDialog, { className: "cim-popover-body", children: [title && (_jsx(RACHeading, { slot: "title", className: clsx('cim-popover-title', textStyle({ variant: 'title-5' })), children: title })), _jsx(FocusableContainer, { className: "cim-popover-content", scrollDirection: "vertical", children: typeof children === 'function' ? children(renderProps) : children })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(RACOverlayArrow, { className: "cim-popover-arrow", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "10", viewBox: "0 0 16 10", children: _jsx("path", { d: "M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0" }) }) }), _jsxs(RACDialog, { ...dialogProps, className: "cim-popover-body", children: [title && (_jsx(RACHeading, { slot: "title", className: clsx('cim-popover-title', textStyle({ variant: 'title-5' })), children: title })), _jsx(FocusableContainer, { className: "cim-popover-content", scrollDirection: "vertical", children: typeof children === 'function' ? children(renderProps) : children })] })] }));
 }
 /**
  * Displays an overlay element positioned relative to a trigger.

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

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, useMemo, type ForwardedRef, type ReactNode, type RefObject } from 'react';\nimport { useInteractOutside, useObjectRef } from 'react-aria';\nimport {\n  DialogTrigger as RACDialogTrigger,\n  Popover as RACPopover,\n  type PopoverProps as RACPopoverProps,\n  OverlayArrow as RACOverlayArrow,\n  Heading as RACHeading,\n  OverlayTriggerStateContext as RACOverlayTriggerStateContext,\n  Dialog as RACDialog,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface PopoverRootProps {\n  /** The popover trigger with its associated popover. Provide the trigger as the first child, and the popover as the second child. */\n  children: ReactNode;\n  /** Whether the popover is open (controlled). */\n  isOpen?: boolean;\n  /** Whether the popover is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Handler that is called when the popover's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a popover trigger and its associated popover.\n * The trigger can be any Cimpress UI button, and the popover will be displayed when the trigger is activated.\n */\nexport function PopoverRoot(props: PopoverRootProps) {\n  return <RACDialogTrigger {...props} />;\n}\n\nPopoverRoot.displayName = 'PopoverRoot';\n\nexport interface PopoverRenderProps {\n  /** Closes the popover when called. */\n  close: () => void;\n}\n\nexport interface PopoverProps extends CommonProps, AriaLabelingProps, Pick<RACPopoverProps, 'placement'> {\n  /** The contents of the popover. A function may be provided to access a function to close the popover. */\n  children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n  /** The title of the popover. */\n  title?: string;\n  /**\n   * Whether the popover is open (controlled).\n   * If using `PopoverRoot`, this prop has no effect - provide `isOpen` to `PopoverRoot` instead.\n   */\n  isOpen?: boolean;\n  /**\n   * Whether the popover is open by default (uncontrolled).\n   * If using `PopoverRoot`, this prop has no effect - provide `defaultOpen` to `PopoverRoot` instead.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Handler that is called when the popover's open state changes.\n   * If using `PopoverRoot`, this prop has no effect - provide `onOpenChange` to `PopoverRoot` instead.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * The ref for the element which the popover positions itself with respect to.\n   * When used within `PopoverRoot`, this is set automatically. Provide `triggerRef` only when `Popover` is used standalone.\n   */\n  triggerRef?: RefObject<Element | null>;\n  /**\n   * Allows the popover to be non-modal, meaning it will not block interactions outside the popover.\n   * This is non-default behavior and can lead to accessibility and interaction issues. Use only if you have a specific, valid reason.\n   */\n  UNSTABLE_isNonModal?: boolean;\n  /**\n   * Limits the maximum height of the popover.\n   */\n  UNSTABLE_maxHeight?: number;\n}\n\nfunction Popover(\n  {\n    children,\n    title,\n    UNSAFE_className,\n    UNSAFE_style,\n    isOpen,\n    defaultOpen,\n    onOpenChange,\n    placement,\n    triggerRef,\n    UNSTABLE_isNonModal,\n    UNSTABLE_maxHeight,\n    ...props\n  }: PopoverProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!title && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');\n    }\n  }, [title, ariaLabel, ariaLabelledBy]);\n\n  const popoverRef = useObjectRef(ref);\n\n  return (\n    <RACPopover\n      ref={popoverRef}\n      className={clsx('cim-popover', UNSAFE_className)}\n      style={UNSAFE_style}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      triggerRef={triggerRef}\n      placement={placement}\n      containerPadding={16}\n      offset={5} // 1px border + 4px actual offset\n      arrowBoundaryOffset={4} // offset by border radius so that the arrow is never positioned over the rounded corner\n      isNonModal={UNSTABLE_isNonModal}\n      maxHeight={UNSTABLE_maxHeight}\n      data-cim-style-root\n    >\n      <PopoverInner title={title} children={children} popoverRef={popoverRef} isNonModal={UNSTABLE_isNonModal} />\n    </RACPopover>\n  );\n}\n\ninterface PopoverInnerProps {\n  title?: string;\n  children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n  popoverRef: RefObject<HTMLElement>;\n  isNonModal?: boolean;\n}\n\nfunction PopoverInner({ title, children, popoverRef, isNonModal }: PopoverInnerProps) {\n  const overlayTriggerState = useContext(RACOverlayTriggerStateContext);\n  const renderProps = useMemo(() => ({ close: () => overlayTriggerState?.close() }), [overlayTriggerState]);\n\n  // For non-modal popovers, React Aria does not handle outside interaction by default,\n  // so we use a custom handler here. Modal popovers already handle this internally.\n  useInteractOutside({\n    ref: popoverRef,\n    onInteractOutside: () => {\n      // Delay closing to prevent race conditions: when the trigger is pressed, both the trigger and the interact outside handler fire.\n      // Without this delay, the popover may immediately reopen after closing.\n      requestAnimationFrame(() => {\n        overlayTriggerState?.close();\n      });\n    },\n    isDisabled: !isNonModal,\n  });\n\n  return (\n    <>\n      <RACOverlayArrow className=\"cim-popover-arrow\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"10\" viewBox=\"0 0 16 10\">\n          <path d=\"M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0\" />\n        </svg>\n      </RACOverlayArrow>\n\n      <RACDialog className=\"cim-popover-body\">\n        {title && (\n          <RACHeading slot=\"title\" className={clsx('cim-popover-title', textStyle({ variant: 'title-5' }))}>\n            {title}\n          </RACHeading>\n        )}\n        <FocusableContainer className=\"cim-popover-content\" scrollDirection=\"vertical\">\n          {typeof children === 'function' ? children(renderProps) : children}\n        </FocusableContainer>\n      </RACDialog>\n    </>\n  );\n}\n\n/**\n * Displays an overlay element positioned relative to a trigger.\n *\n * See [popover usage guidelines](https://ui.cimpress.io/components/popover/).\n */\nconst _Popover = forwardRef(Popover, 'Popover');\n\nexport { _Popover as Popover };\n"]}
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, useMemo, type ForwardedRef, type ReactNode, type RefObject } from 'react';\nimport { useInteractOutside, useObjectRef } from 'react-aria';\nimport {\n  DialogTrigger as RACDialogTrigger,\n  Popover as RACPopover,\n  type PopoverProps as RACPopoverProps,\n  OverlayArrow as RACOverlayArrow,\n  Heading as RACHeading,\n  OverlayTriggerStateContext as RACOverlayTriggerStateContext,\n  Dialog as RACDialog,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface PopoverRootProps {\n  /** The popover trigger with its associated popover. Provide the trigger as the first child, and the popover as the second child. */\n  children: ReactNode;\n  /** Whether the popover is open (controlled). */\n  isOpen?: boolean;\n  /** Whether the popover is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Handler that is called when the popover's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a popover trigger and its associated popover.\n * The trigger can be any Cimpress UI button, and the popover will be displayed when the trigger is activated.\n */\nexport function PopoverRoot(props: PopoverRootProps) {\n  return <RACDialogTrigger {...props} />;\n}\n\nPopoverRoot.displayName = 'PopoverRoot';\n\ninterface DialogProps extends CommonProps, AriaLabelingProps {}\n\nexport interface PopoverRenderProps {\n  /** Closes the popover when called. */\n  close: () => void;\n}\n\nexport interface PopoverProps extends DialogProps, Pick<RACPopoverProps, 'placement'> {\n  /** The contents of the popover. A function may be provided to access a function to close the popover. */\n  children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n  /** The title of the popover. */\n  title?: string;\n  /**\n   * Whether the popover is open (controlled).\n   * If using `PopoverRoot`, this prop has no effect - provide `isOpen` to `PopoverRoot` instead.\n   */\n  isOpen?: boolean;\n  /**\n   * Whether the popover is open by default (uncontrolled).\n   * If using `PopoverRoot`, this prop has no effect - provide `defaultOpen` to `PopoverRoot` instead.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Handler that is called when the popover's open state changes.\n   * If using `PopoverRoot`, this prop has no effect - provide `onOpenChange` to `PopoverRoot` instead.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * The ref for the element which the popover positions itself with respect to.\n   * When used within `PopoverRoot`, this is set automatically. Provide `triggerRef` only when `Popover` is used standalone.\n   */\n  triggerRef?: RefObject<Element | null>;\n  /**\n   * Allows the popover to be non-modal, meaning it will not block interactions outside the popover.\n   * This is non-default behavior and can lead to accessibility and interaction issues. Use only if you have a specific, valid reason.\n   */\n  UNSTABLE_isNonModal?: boolean;\n  /**\n   * Limits the maximum height of the popover.\n   */\n  UNSTABLE_maxHeight?: number;\n}\n\nfunction Popover(\n  {\n    children,\n    title,\n    UNSAFE_className,\n    UNSAFE_style,\n    isOpen,\n    defaultOpen,\n    onOpenChange,\n    placement,\n    triggerRef,\n    UNSTABLE_isNonModal,\n    UNSTABLE_maxHeight,\n    ...props\n  }: PopoverProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!title && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');\n    }\n  }, [title, ariaLabel, ariaLabelledBy]);\n\n  const popoverRef = useObjectRef(ref);\n\n  return (\n    <RACPopover\n      ref={popoverRef}\n      className={clsx('cim-popover', UNSAFE_className)}\n      style={UNSAFE_style}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      triggerRef={triggerRef}\n      placement={placement}\n      containerPadding={16}\n      offset={5} // 1px border + 4px actual offset\n      arrowBoundaryOffset={4} // offset by border radius so that the arrow is never positioned over the rounded corner\n      isNonModal={UNSTABLE_isNonModal}\n      maxHeight={UNSTABLE_maxHeight}\n      data-cim-style-root\n    >\n      <PopoverInner\n        dialogProps={props}\n        title={title}\n        children={children}\n        popoverRef={popoverRef}\n        isNonModal={UNSTABLE_isNonModal}\n      />\n    </RACPopover>\n  );\n}\n\ninterface PopoverInnerProps {\n  dialogProps: Omit<DialogProps, 'UNSAFE_className' | 'UNSAFE_style'>;\n  title?: string;\n  children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n  popoverRef: RefObject<HTMLElement>;\n  isNonModal?: boolean;\n}\n\nfunction PopoverInner({ title, children, popoverRef, isNonModal, dialogProps }: PopoverInnerProps) {\n  const overlayTriggerState = useContext(RACOverlayTriggerStateContext);\n  const renderProps = useMemo(() => ({ close: () => overlayTriggerState?.close() }), [overlayTriggerState]);\n\n  // For non-modal popovers, React Aria does not handle outside interaction by default,\n  // so we use a custom handler here. Modal popovers already handle this internally.\n  useInteractOutside({\n    ref: popoverRef,\n    onInteractOutside: () => {\n      // Delay closing to prevent race conditions: when the trigger is pressed, both the trigger and the interact outside handler fire.\n      // Without this delay, the popover may immediately reopen after closing.\n      requestAnimationFrame(() => {\n        overlayTriggerState?.close();\n      });\n    },\n    isDisabled: !isNonModal,\n  });\n\n  return (\n    <>\n      <RACOverlayArrow className=\"cim-popover-arrow\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"10\" viewBox=\"0 0 16 10\">\n          <path d=\"M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0\" />\n        </svg>\n      </RACOverlayArrow>\n\n      <RACDialog {...dialogProps} className=\"cim-popover-body\">\n        {title && (\n          <RACHeading slot=\"title\" className={clsx('cim-popover-title', textStyle({ variant: 'title-5' }))}>\n            {title}\n          </RACHeading>\n        )}\n        <FocusableContainer className=\"cim-popover-content\" scrollDirection=\"vertical\">\n          {typeof children === 'function' ? children(renderProps) : children}\n        </FocusableContainer>\n      </RACDialog>\n    </>\n  );\n}\n\n/**\n * Displays an overlay element positioned relative to a trigger.\n *\n * See [popover usage guidelines](https://ui.cimpress.io/components/popover/).\n */\nconst _Popover = forwardRef(Popover, 'Popover');\n\nexport { _Popover as Popover };\n"]}

package/dist/esm/components/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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"}

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

@@ -51,12 +51,21 @@ function Select({ children, items, label, description, error, UNSAFE_className,
 }
 function SelectPopover({ children }) {
     const popoverRef = useRef(null);
+    const interactOutsideTarget = useRef(null);
     const selectState = useContext(RACSelectStateContext);
     // Popover is non-modal, but we still want to close it when the user interacts outside
     useInteractOutside({
         ref: popoverRef,
-        onInteractOutside: () => {
-            selectState?.close();
+        onInteractOutsideStart: (e) => {
+            interactOutsideTarget.current = e.target;
+        },
+        onInteractOutside: (e) => {
+            if (interactOutsideTarget.current === e.target) {
+                requestAnimationFrame(() => {
+                    selectState?.close();
+                });
+            }
+            interactOutsideTarget.current = null;
         },
         isDisabled: !selectState?.isOpen,
     });