@cimpress-ui/react 1.30.0 → 1.31.0

package/dist/commonjs/i18n/messages/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/i18n/messages/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { LocalizedStringFormatter } from 'react-aria';\n\n/**\n * Represents a localized piece of text used within a component.\n * It can either be a plain string, or a function that returns a plain string based on provided context.\n */\nexport type LocalizedString =\n  | string\n  | ((\n      args?: Record<string, string | number | boolean>,\n      formatter?: LocalizedStringFormatter<string, LocalizedString>,\n    ) => string);\n\n/** A collection of localized strings used by Cimpress UI components. */\nexport type LocalizedMessages = {\n  common: {\n    /** An ARIA label for a button that clears the value of a field. */\n    clearValue: LocalizedString;\n    /** An ARIA label for a button that closes or dismisses an alert, a callout, a dialog, or other overlay component. Used for accessibility purposes to clearly indicate the button's function to screen reader users. */\n    dismiss: LocalizedString;\n    /** A visually hidden label that indicates a text field can be cleared by pressing the Escape key. This text is only announced by screen readers. */\n    clearValueDescription: LocalizedString;\n  };\n  copyToClipboard: {\n    /** The message displayed in a tooltip when a value is successfully copied to clipboard. */\n    success: LocalizedString;\n    /** The message displayed in a tooltip when a value fails to be copied to clipboard. */\n    failure: LocalizedString;\n  };\n  label: {\n    /** A visually hidden label that indicates a form field is required. This text is appended to the field's visible label and is only announced by screen readers. */\n    required: LocalizedString;\n  };\n  datePicker: {\n    /** An ARIA label for a button that clears the value of a date picker field. */\n    clearValue: LocalizedString;\n    /** An ARIA label for a button that opens a calendar popup. Part of a date picker. */\n    openCalendar: LocalizedString;\n    /** An ARIA label for a button that displays the previous month in a calendar popup. Part of a date picker. */\n    previousMonth: LocalizedString;\n    /** An ARIA label for a button that displays the next month in a calendar popup. Part of a date picker. */\n    nextMonth: LocalizedString;\n    /** An ARIA label for a button that changes the calendar popup to a single-year view. Part of a date picker. */\n    switchToYearView: LocalizedString;\n    /** An ARIA label for a button that displays the previous year in a calendar popup. Part of a date picker. */\n    previousYear: LocalizedString;\n    /** An ARIA label for a button that displays the next year in a calendar popup. Part of a date picker. */\n    nextYear: LocalizedString;\n    /** An ARIA label for a button that changes the calendar popup to a multi-year view. Part of a date picker. */\n    switchToMultiYearView: LocalizedString;\n    /** An ARIA label for a button that displays the previous section of a multi-year view in a calendar popup. Year count will always be larger than 1. Part of a date picker. */\n    previousMultiYearSection: LocalizedString;\n    /** An ARIA label for a button that displays the next section of a multi-year view in a calendar popup. Year count will always be larger than 1. Part of a date picker. */\n    nextMultiYearSection: LocalizedString;\n  };\n  numberField: {\n    /** An ARIA label for a button that decrements the value of a number field. */\n    decrement: LocalizedString;\n    /** An ARIA label for a button that increments the value of a number field. */\n    increment: LocalizedString;\n  };\n  pagination: {\n    /** An ARIA label for a button that navigates to a specific page. Part of a pagination navigation structure. */\n    goToPage: LocalizedString;\n    /** An ARIA label for a button that navigates to the previous page. Part of a pagination navigation structure. */\n    previousPage: LocalizedString;\n    /** An ARIA label for a button that navigates to the next page. Part of a pagination navigation structure. */\n    nextPage: LocalizedString;\n    /** A screen reader announcement for when the selected page changes. Part of a pagination navigation structure. */\n    selectedPageAnnouncement: LocalizedString;\n  };\n  slider: {\n    /** An ARIA label for a slider thumb that is used to select the start (minimum) value of a range. */\n    rangeStart: LocalizedString;\n    /** An ARIA label for a slider thumb that is used to select the end (maximum) value of a range. */\n    rangeEnd: LocalizedString;\n  };\n  tagField: {\n    /** A label displayed within a tag field to inform the user about the number of selected items. */\n    itemsSelected: LocalizedString;\n  };\n  filePicker: {\n    /** A label for the button that opens the native file picker dialog. */\n    chooseFile: LocalizedString;\n    /** A label for when no files are selected. */\n    noFilesSelected: LocalizedString;\n    /** A label for when multiple files are selected. */\n    multipleFilesSelected: LocalizedString;\n  };\n  table: {\n    /** An ARIA label for a spinner displayed when data is being loaded into a table. */\n    loadingData: LocalizedString;\n    /** An ARIA label for a button that toggles the sort order of a specific column in a data table. This label will be followed by the name of the column. */\n    toggleColumnSortOrder: LocalizedString;\n  };\n  simpleAuthTool: {\n    /** A label used for a button that redirects to a login flow. */\n    logIn: LocalizedString;\n    /** A label used for a button that logs the current user out. */\n    logOut: LocalizedString;\n    /** An ARIA label for a popover that contains information about the logged in user. */\n    profileDetails: LocalizedString;\n    /** A name that's displayed when the current user's name is unknown. */\n    unknownUser: LocalizedString;\n  };\n  select: {\n    /** An ARIA label for the search field displayed inside a filterable select dropdown. */\n    searchLabel: LocalizedString;\n    /** Placeholder text for the search field displayed inside a filterable select dropdown. */\n    searchPlaceholder: LocalizedString;\n    /** Message displayed when filtering a select list yields no matching options. */\n    noResultsFound: LocalizedString;\n    /** An ARIA label for a button that clears the current selection in a select. */\n    clearSelection: LocalizedString;\n    /** An ARIA label for the group of tags representing selected items in a multi-select. */\n    selectedItems: LocalizedString;\n  };\n  UNSTABLE_collection: {\n    /** An ARIA label for a spinner displayed when the list of items is first being loaded in a collection. */\n    loading: LocalizedString;\n    /** An ARIA label for a spinner displayed when more items are being loaded into a collection. */\n    loadingMore: LocalizedString;\n    /** A label displayed within a select to inform the user about the number of selected items. */\n    itemsSelected: LocalizedString;\n  };\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/i18n/messages/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { LocalizedStringFormatter } from 'react-aria';\n\n/**\n * Represents a localized piece of text used within a component.\n * It can either be a plain string, or a function that returns a plain string based on provided context.\n */\nexport type LocalizedString =\n  | string\n  | ((\n      args?: Record<string, string | number | boolean>,\n      formatter?: LocalizedStringFormatter<string, LocalizedString>,\n    ) => string);\n\n/** A collection of localized strings used by Cimpress UI components. */\nexport type LocalizedMessages = {\n  common: {\n    /** An ARIA label for a button that clears the value of a field. */\n    clearValue: LocalizedString;\n    /** An ARIA label for a button that closes or dismisses an alert, a callout, a dialog, or other overlay component. Used for accessibility purposes to clearly indicate the button's function to screen reader users. */\n    dismiss: LocalizedString;\n    /** A visually hidden label that indicates a text field can be cleared by pressing the Escape key. This text is only announced by screen readers. */\n    clearValueDescription: LocalizedString;\n  };\n  appShell: {\n    /** Label for a skip link rendered by the app shell that moves keyboard focus to the main content area. */\n    skipToContent: LocalizedString;\n  };\n  topNav: {\n    /** An ARIA label for the top navigation landmark. */\n    srLabel: LocalizedString;\n  };\n  sideNav: {\n    /** An ARIA label for the side navigation landmark. */\n    srLabel: LocalizedString;\n  };\n  copyToClipboard: {\n    /** The message displayed in a tooltip when a value is successfully copied to clipboard. */\n    success: LocalizedString;\n    /** The message displayed in a tooltip when a value fails to be copied to clipboard. */\n    failure: LocalizedString;\n  };\n  label: {\n    /** A visually hidden label that indicates a form field is required. This text is appended to the field's visible label and is only announced by screen readers. */\n    required: LocalizedString;\n  };\n  datePicker: {\n    /** An ARIA label for a button that clears the value of a date picker field. */\n    clearValue: LocalizedString;\n    /** An ARIA label for a button that opens a calendar popup. Part of a date picker. */\n    openCalendar: LocalizedString;\n    /** An ARIA label for a button that displays the previous month in a calendar popup. Part of a date picker. */\n    previousMonth: LocalizedString;\n    /** An ARIA label for a button that displays the next month in a calendar popup. Part of a date picker. */\n    nextMonth: LocalizedString;\n    /** An ARIA label for a button that changes the calendar popup to a single-year view. Part of a date picker. */\n    switchToYearView: LocalizedString;\n    /** An ARIA label for a button that displays the previous year in a calendar popup. Part of a date picker. */\n    previousYear: LocalizedString;\n    /** An ARIA label for a button that displays the next year in a calendar popup. Part of a date picker. */\n    nextYear: LocalizedString;\n    /** An ARIA label for a button that changes the calendar popup to a multi-year view. Part of a date picker. */\n    switchToMultiYearView: LocalizedString;\n    /** An ARIA label for a button that displays the previous section of a multi-year view in a calendar popup. Year count will always be larger than 1. Part of a date picker. */\n    previousMultiYearSection: LocalizedString;\n    /** An ARIA label for a button that displays the next section of a multi-year view in a calendar popup. Year count will always be larger than 1. Part of a date picker. */\n    nextMultiYearSection: LocalizedString;\n  };\n  numberField: {\n    /** An ARIA label for a button that decrements the value of a number field. */\n    decrement: LocalizedString;\n    /** An ARIA label for a button that increments the value of a number field. */\n    increment: LocalizedString;\n  };\n  pagination: {\n    /** An ARIA label for a button that navigates to a specific page. Part of a pagination navigation structure. */\n    goToPage: LocalizedString;\n    /** An ARIA label for a button that navigates to the previous page. Part of a pagination navigation structure. */\n    previousPage: LocalizedString;\n    /** An ARIA label for a button that navigates to the next page. Part of a pagination navigation structure. */\n    nextPage: LocalizedString;\n    /** A screen reader announcement for when the selected page changes. Part of a pagination navigation structure. */\n    selectedPageAnnouncement: LocalizedString;\n  };\n  slider: {\n    /** An ARIA label for a slider thumb that is used to select the start (minimum) value of a range. */\n    rangeStart: LocalizedString;\n    /** An ARIA label for a slider thumb that is used to select the end (maximum) value of a range. */\n    rangeEnd: LocalizedString;\n  };\n  tagField: {\n    /** A label displayed within a tag field to inform the user about the number of selected items. */\n    itemsSelected: LocalizedString;\n  };\n  filePicker: {\n    /** A label for the button that opens the native file picker dialog. */\n    chooseFile: LocalizedString;\n    /** A label for when no files are selected. */\n    noFilesSelected: LocalizedString;\n    /** A label for when multiple files are selected. */\n    multipleFilesSelected: LocalizedString;\n  };\n  table: {\n    /** An ARIA label for a spinner displayed when data is being loaded into a table. */\n    loadingData: LocalizedString;\n    /** An ARIA label for a button that toggles the sort order of a specific column in a data table. This label will be followed by the name of the column. */\n    toggleColumnSortOrder: LocalizedString;\n  };\n  simpleAuthTool: {\n    /** A label used for a button that redirects to a login flow. */\n    logIn: LocalizedString;\n    /** A label used for a button that logs the current user out. */\n    logOut: LocalizedString;\n    /** An ARIA label for a popover that contains information about the logged in user. */\n    profileDetails: LocalizedString;\n    /** A name that's displayed when the current user's name is unknown. */\n    unknownUser: LocalizedString;\n  };\n  select: {\n    /** An ARIA label for the search field displayed inside a filterable select dropdown. */\n    searchLabel: LocalizedString;\n    /** Placeholder text for the search field displayed inside a filterable select dropdown. */\n    searchPlaceholder: LocalizedString;\n    /** Message displayed when filtering a select list yields no matching options. */\n    noResultsFound: LocalizedString;\n    /** An ARIA label for a button that clears the current selection in a select. */\n    clearSelection: LocalizedString;\n    /** An ARIA label for the group of tags representing selected items in a multi-select. */\n    selectedItems: LocalizedString;\n  };\n  UNSTABLE_collection: {\n    /** An ARIA label for a spinner displayed when the list of items is first being loaded in a collection. */\n    loading: LocalizedString;\n    /** An ARIA label for a spinner displayed when more items are being loaded into a collection. */\n    loadingMore: LocalizedString;\n    /** A label displayed within a select to inform the user about the number of selected items. */\n    itemsSelected: LocalizedString;\n  };\n};\n"]}

package/dist/commonjs/index.d.ts

@@ -2,6 +2,9 @@ export * from './components/alert/alert.js';
 export * from './components/alert-dialog/alert-dialog.js';
 export * from './components/app-header/app-header.js';
 export * from './components/app-header/simple-auth-tool.js';
+export * from './components/app-shell/app-shell.js';
+export * from './components/side-nav/side-nav.js';
+export * from './components/top-nav/top-nav.js';
 export * from './components/badge/badge.js';
 export * from './components/button/button.js';
 export * from './components/button/link-button.js';
@@ -85,10 +88,7 @@ export * from './components/container/container.js';
 export * from './components/stepper/stepper.js';
 export * from './components/stepper/stepper-item.js';
 export type { StepperStatus } from './components/stepper/types.js';
-export * from './components/app-shell/app-shell.js';
-export * from './components/side-nav/side-nav.js';
 export * from './components/hidden/hidden.js';
-export * from './components/top-nav/top-nav.js';
 export * from './components/page-layout/page-layout.js';
 export * from './components/nav-list/nav-list.js';
 export * from './components/app-header/nav-button.js';

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

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

package/dist/commonjs/index.js

@@ -19,6 +19,9 @@ __exportStar(require("./components/alert/alert.js"), exports);
 __exportStar(require("./components/alert-dialog/alert-dialog.js"), exports);
 __exportStar(require("./components/app-header/app-header.js"), exports);
 __exportStar(require("./components/app-header/simple-auth-tool.js"), exports);
+__exportStar(require("./components/app-shell/app-shell.js"), exports);
+__exportStar(require("./components/side-nav/side-nav.js"), exports);
+__exportStar(require("./components/top-nav/top-nav.js"), exports);
 __exportStar(require("./components/badge/badge.js"), exports);
 __exportStar(require("./components/button/button.js"), exports);
 __exportStar(require("./components/button/link-button.js"), exports);
@@ -95,10 +98,7 @@ __exportStar(require("./components/file-picker/file-picker.js"), exports);
 __exportStar(require("./components/container/container.js"), exports);
 __exportStar(require("./components/stepper/stepper.js"), exports);
 __exportStar(require("./components/stepper/stepper-item.js"), exports);
-__exportStar(require("./components/app-shell/app-shell.js"), exports);
-__exportStar(require("./components/side-nav/side-nav.js"), exports);
 __exportStar(require("./components/hidden/hidden.js"), exports);
-__exportStar(require("./components/top-nav/top-nav.js"), exports);
 __exportStar(require("./components/page-layout/page-layout.js"), exports);
 __exportStar(require("./components/nav-list/nav-list.js"), exports);
 __exportStar(require("./components/app-header/nav-button.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,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;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/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';\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,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"]}

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":"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;AA6BD,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;AAiCD,QAAA,MAAM,4BAA4B,qLAAgF,CAAC;AAEnH,OAAO,EAAE,4BAA4B,IAAI,2BAA2B,EAAE,CAAC"}

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

@@ -12,7 +12,9 @@ function UNSTABLE_AppHeaderNavButton({ isOpen, onPress, UNSAFE_className, UNSAFE
         onPress?.();
         appShellContext?.toggleSideNav();
     };
-    return (_jsx(IconButton, { ...props, "aria-expanded": isOpen ?? appShellContext?.mobileNavIsOpen, 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 }));
+    return (_jsx(IconButton, { ...props, "aria-expanded": isOpen ??
+            (appShellContext?.sideNavIsCollapsible && !appShellContext?.sideNavIsCollapsed) ??
+            appShellContext?.mobileNavIsOpen, icon: _jsx(IconMenu, {}), "aria-label": "Open navigation 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;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,EAAE,GAAG,KAAK,EAAoC,EAC/F,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,OACL,KAAK,mBACM,MAAM,IAAI,eAAe,EAAE,eAAe,EACzD,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, ...props }: 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      {...props}\n      aria-expanded={isOpen ?? appShellContext?.mobileNavIsOpen}\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"]}
+{"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,EAAE,GAAG,KAAK,EAAoC,EAC/F,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,OACL,KAAK,mBAEP,MAAM;YACN,CAAC,eAAe,EAAE,oBAAoB,IAAI,CAAC,eAAe,EAAE,kBAAkB,CAAC;YAC/E,eAAe,EAAE,eAAe,EAElC,IAAI,EAAE,KAAC,QAAQ,KAAG,gBAEP,sBAAsB,EACjC,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, ...props }: 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      {...props}\n      aria-expanded={\n        isOpen ??\n        (appShellContext?.sideNavIsCollapsible && !appShellContext?.sideNavIsCollapsed) ??\n        appShellContext?.mobileNavIsOpen\n      }\n      icon={<IconMenu />}\n      // TODO\n      aria-label=\"Open navigation 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.js.map

@@ -1 +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,CAQlC,IAAI,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\n\n/** @internal */\nexport const AppShellContext = createContext<{\n  mobileNavIsOpen: boolean;\n  toggleMobileNav: (isOpen?: boolean) => void;\n  sideNavIsCollapsed: boolean | undefined;\n  toggleSideNavCollapse: (isCollapsed?: boolean) => void;\n  sideNavIsCollapsible: boolean;\n  setSideNavIsCollapsible: (isCollapsible: boolean) => void;\n  toggleSideNav: () => void;\n} | null>(null);\n"]}
+{"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,CAUlC,IAAI,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\n\n/** @internal */\nexport const AppShellContext = createContext<{\n  mobileNavIsOpen: boolean;\n  toggleMobileNav: (isOpen?: boolean) => void;\n  sideNavIsCollapsed: boolean | undefined;\n  toggleSideNavCollapse: (isCollapsed?: boolean) => void;\n  sideNavIsCollapsible: boolean;\n  setSideNavIsCollapsible: (isCollapsible: boolean) => void;\n  toggleSideNav: () => void;\n  /** ID of the main content area targeted by the skip link. */\n  mainContentId: string;\n} | null>(null);\n"]}

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

@@ -1,11 +1,33 @@
 import { type ReactNode } from 'react';
 import type { CommonProps } from '../types.js';
-export interface UNSTABLE_AppShellProps extends CommonProps {
+export interface AppShellProps extends CommonProps {
+    /**
+     * The children of the app shell should be composed using specific components to fill the available layout slots:
+     * - `<AppHeader />` for the global header
+     * - `<SideNav />` for the side navigation
+     * - `<TopNav />` for the top navigation bar
+     * - `<AppShellBody />` for the main content area
+     *
+     * These components should be passed as direct children to correctly populate the app shell layout.
+     */
     children: ReactNode;
 }
-export declare function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppShellProps): import("react/jsx-runtime").JSX.Element;
-export interface UNSTABLE_AppShellBodyProps extends CommonProps {
+/**
+ * Provides the foundational layout structure for applications, including header, navigation, and main content slots.
+ *
+ * See [app shell usage guidelines](https://ui.cimpress.io/components/app-shell/).
+ */
+export declare function AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AppShell {
+    var displayName: string;
+}
+export interface AppShellBodyProps extends Omit<CommonProps, 'id'> {
+    /** Main content area of the app shell. */
     children: ReactNode;
 }
-export declare function UNSTABLE_AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppShellBodyProps): import("react/jsx-runtime").JSX.Element;
+/** Renders the main content area within `AppShell`. */
+export declare function AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }: AppShellBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AppShellBody {
+    var displayName: string;
+}
 //# sourceMappingURL=app-shell.d.ts.map

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,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,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,2CAmC/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":"AAGA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CA2C7F;yBA3Ce,QAAQ;;;AA8CxB,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;IAChE,0CAA0C;IAC1C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uDAAuD;AACvD,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CASrG;yBATe,YAAY"}

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

@@ -1,9 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { useCallback, useState } from 'react';
+import { useCallback, useContext, useState } from 'react';
+import { useId } from 'react-aria';
+import { useLocalizedMessages } from '../../i18n/index.js';
 import { matchesBreakpoint } from '../../utils/breakpoints.js';
+import { LinkButton } from '../button/link-button.js';
+import { UNSTABLE_VisuallyHidden as VisuallyHidden } from '../visually-hidden/visually-hidden.js';
 import { AppShellContext } from './app-shell-context.js';
-export function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }) {
+/**
+ * Provides the foundational layout structure for applications, including header, navigation, and main content slots.
+ *
+ * See [app shell usage guidelines](https://ui.cimpress.io/components/app-shell/).
+ */
+export function AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }) {
+    const messages = useLocalizedMessages('appShell');
+    const mainContentId = 'app-shell-body-' + useId();
     const [sideNavIsCollapsible, setSideNavIsCollapsible] = useState(false);
     const [mobileNavIsOpen, setMobileNavIsOpen] = useState(false);
     const toggleMobileNav = useCallback((isOpen) => {
@@ -29,9 +41,15 @@ export function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ..
             sideNavIsCollapsed,
             toggleSideNavCollapse,
             toggleSideNav,
-        }, children: _jsx("div", { className: clsx('cim-app-shell', UNSAFE_className), style: UNSAFE_style, ...props, children: children }) }));
+            mainContentId,
+        }, children: _jsxs("div", { ...props, className: clsx('cim-app-shell', UNSAFE_className), style: UNSAFE_style, children: [_jsx(VisuallyHidden, { showWhenFocused: true, UNSAFE_className: "cim-app-shell-skip-link", children: _jsx(LinkButton, { href: `#${encodeURIComponent(mainContentId)}`, target: "_self", variant: "secondary", size: "small", children: messages.format('skipToContent') }) }), 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 }));
+AppShell.displayName = 'AppShell';
+/** Renders the main content area within `AppShell`. */
+export function AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }) {
+    const appShellContext = useContext(AppShellContext);
+    const mainContentId = appShellContext?.mainContentId;
+    return (_jsx("div", { ...props, id: mainContentId, className: clsx('cim-app-shell-body', UNSAFE_className), style: UNSAFE_style, children: children }));
 }
+AppShellBody.displayName = 'AppShellBody';
 //# 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;AACxB,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,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,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,MAAgB,EAAE,EAAE;QACvD,kBAAkB,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5D,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAC;IAC7F,MAAM,qBAAqB,GAAG,WAAW,CAAC,CAAC,WAAqB,EAAE,EAAE;QAClE,qBAAqB,CAAC,CAAC,eAAe,EAAE,EAAE,CAAC,WAAW,IAAI,CAAC,eAAe,CAAC,CAAC;IAC9E,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,IAAI,oBAAoB,IAAI,iBAAiB,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;YAC7D,qBAAqB,EAAE,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,eAAe,EAAE,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,eAAe,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEnE,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,oBAAoB;YACpB,uBAAuB;YACvB,eAAe;YACf,eAAe;YACf,kBAAkB;YAClB,qBAAqB;YACrB,aAAa;SACd,YAED,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,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 { useCallback, useState, type ReactNode } from 'react';\nimport { matchesBreakpoint } from '../../utils/breakpoints.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 [sideNavIsCollapsible, setSideNavIsCollapsible] = useState(false);\n  const [mobileNavIsOpen, setMobileNavIsOpen] = useState(false);\n  const toggleMobileNav = useCallback((isOpen?: boolean) => {\n    setMobileNavIsOpen((prevIsOpen) => isOpen ?? !prevIsOpen);\n  }, []);\n  const [sideNavIsCollapsed, setSideNavIsCollapsed] = useState<boolean | undefined>(undefined);\n  const toggleSideNavCollapse = useCallback((isCollapsed?: boolean) => {\n    setSideNavIsCollapsed((prevIsCollapsed) => isCollapsed ?? !prevIsCollapsed);\n  }, []);\n  const toggleSideNav = useCallback(() => {\n    if (sideNavIsCollapsible && matchesBreakpoint({ min: 'md' })) {\n      toggleSideNavCollapse();\n    } else {\n      toggleMobileNav();\n    }\n  }, [sideNavIsCollapsible, toggleMobileNav, toggleSideNavCollapse]);\n\n  return (\n    <AppShellContext.Provider\n      value={{\n        sideNavIsCollapsible,\n        setSideNavIsCollapsible,\n        mobileNavIsOpen,\n        toggleMobileNav,\n        sideNavIsCollapsed,\n        toggleSideNavCollapse,\n        toggleSideNav,\n      }}\n    >\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  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":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useCallback, useContext, useState, type ReactNode } from 'react';\nimport { useId } from 'react-aria';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { matchesBreakpoint } from '../../utils/breakpoints.js';\nimport { LinkButton } from '../button/link-button.js';\nimport type { CommonProps } from '../types.js';\nimport { UNSTABLE_VisuallyHidden as VisuallyHidden } from '../visually-hidden/visually-hidden.js';\nimport { AppShellContext } from './app-shell-context.js';\n\nexport interface AppShellProps extends CommonProps {\n  /**\n   * The children of the app shell should be composed using specific components to fill the available layout slots:\n   * - `<AppHeader />` for the global header\n   * - `<SideNav />` for the side navigation\n   * - `<TopNav />` for the top navigation bar\n   * - `<AppShellBody />` for the main content area\n   *\n   * These components should be passed as direct children to correctly populate the app shell layout.\n   */\n  children: ReactNode;\n}\n\n/**\n * Provides the foundational layout structure for applications, including header, navigation, and main content slots.\n *\n * See [app shell usage guidelines](https://ui.cimpress.io/components/app-shell/).\n */\nexport function AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }: AppShellProps) {\n  const messages = useLocalizedMessages('appShell');\n  const mainContentId = 'app-shell-body-' + useId();\n  const [sideNavIsCollapsible, setSideNavIsCollapsible] = useState(false);\n  const [mobileNavIsOpen, setMobileNavIsOpen] = useState(false);\n  const toggleMobileNav = useCallback((isOpen?: boolean) => {\n    setMobileNavIsOpen((prevIsOpen) => isOpen ?? !prevIsOpen);\n  }, []);\n  const [sideNavIsCollapsed, setSideNavIsCollapsed] = useState<boolean | undefined>(undefined);\n  const toggleSideNavCollapse = useCallback((isCollapsed?: boolean) => {\n    setSideNavIsCollapsed((prevIsCollapsed) => isCollapsed ?? !prevIsCollapsed);\n  }, []);\n  const toggleSideNav = useCallback(() => {\n    if (sideNavIsCollapsible && matchesBreakpoint({ min: 'md' })) {\n      toggleSideNavCollapse();\n    } else {\n      toggleMobileNav();\n    }\n  }, [sideNavIsCollapsible, toggleMobileNav, toggleSideNavCollapse]);\n\n  return (\n    <AppShellContext.Provider\n      value={{\n        sideNavIsCollapsible,\n        setSideNavIsCollapsible,\n        mobileNavIsOpen,\n        toggleMobileNav,\n        sideNavIsCollapsed,\n        toggleSideNavCollapse,\n        toggleSideNav,\n        mainContentId,\n      }}\n    >\n      <div {...props} className={clsx('cim-app-shell', UNSAFE_className)} style={UNSAFE_style}>\n        <VisuallyHidden showWhenFocused UNSAFE_className=\"cim-app-shell-skip-link\">\n          <LinkButton href={`#${encodeURIComponent(mainContentId)}`} target=\"_self\" variant=\"secondary\" size=\"small\">\n            {messages.format('skipToContent')}\n          </LinkButton>\n        </VisuallyHidden>\n        {children}\n      </div>\n    </AppShellContext.Provider>\n  );\n}\nAppShell.displayName = 'AppShell';\n\nexport interface AppShellBodyProps extends Omit<CommonProps, 'id'> {\n  /** Main content area of the app shell. */\n  children: ReactNode;\n}\n\n/** Renders the main content area within `AppShell`. */\nexport function AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }: AppShellBodyProps) {\n  const appShellContext = useContext(AppShellContext);\n  const mainContentId = appShellContext?.mainContentId;\n\n  return (\n    <div {...props} id={mainContentId} className={clsx('cim-app-shell-body', UNSAFE_className)} style={UNSAFE_style}>\n      {children}\n    </div>\n  );\n}\nAppShellBody.displayName = 'AppShellBody';\n"]}

package/dist/esm/components/side-nav/side-nav.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
 import type { Href, StringLikeChildren } from '../types.js';
-export interface UNSTABLE_SideNavProps {
+export interface SideNavProps {
+    /** The contents of the side navigation. Typically a `<SideNavList>`. */
     children: ReactNode;
     /**
      * Determines if the side navigation can be collapsed down to an icon-only rail, allowing for more screen space when needed.
@@ -16,21 +17,48 @@ export interface UNSTABLE_SideNavProps {
         onCollapseChange?: (isCollapsed: boolean) => void;
     };
 }
-export declare function UNSTABLE_SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }: UNSTABLE_SideNavProps): import("react/jsx-runtime").JSX.Element;
-export interface UNSTABLE_SideNavListProps {
+/**
+ * Displays persistent side navigation for applications with multiple sections or pages.
+ *
+ * See [side nav usage guidelines](https://ui.cimpress.io/components/side-nav/).
+ */
+export declare function SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }: SideNavProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SideNav {
+    var displayName: string;
+}
+export interface SideNavListProps {
+    /** Navigation items and sections belonging to the list. */
     children: ReactNode;
 }
-export declare function UNSTABLE_SideNavList({ children }: UNSTABLE_SideNavListProps): import("react/jsx-runtime").JSX.Element;
-export interface UNSTABLE_SideNavListItemProps {
+/** Renders a list of navigation items within `SideNav`. */
+export declare function SideNavList({ children }: SideNavListProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SideNavList {
+    var displayName: string;
+}
+export interface SideNavListItemProps {
+    /** The text to display as the navigation item label. */
     children: StringLikeChildren;
+    /** A URL to link to. */
     href: Href;
+    /** Whether the navigation item represents the current page. */
     isActive?: boolean;
+    /** An icon displayed before the navigation item label. Required when the side nav is collapsible. */
     icon?: ReactNode;
 }
-export declare function UNSTABLE_SideNavListItem({ children, href, isActive, icon }: UNSTABLE_SideNavListItemProps): import("react/jsx-runtime").JSX.Element;
-export interface UNSTABLE_SideNavListSectionProps {
+/** Renders a single navigation item within `SideNavList`. */
+export declare function SideNavListItem({ children, href, isActive, icon }: SideNavListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SideNavListItem {
+    var displayName: string;
+}
+export interface SideNavListSectionProps {
+    /** Navigation items belonging to the section. */
     children: ReactNode;
+    /** The content to display as the section title. */
     label?: string;
 }
-export declare function UNSTABLE_SideNavListSection({ children, label }: UNSTABLE_SideNavListSectionProps): import("react/jsx-runtime").JSX.Element;
+/** Renders a section of navigation items within `SideNavList`. */
+export declare function SideNavListSection({ children, label }: SideNavListSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SideNavListSection {
+    var displayName: string;
+}
 //# sourceMappingURL=side-nav.d.ts.map

package/dist/esm/components/side-nav/side-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../../../src/components/side-nav/side-nav.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ1E,OAAO,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAK5D,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,sBAAsB,CAAC,EACnB,OAAO,GACP;QACE,yFAAyF;QACzF,gBAAgB,CAAC,EAAE,IAAI,CAAC;QACxB,qHAAqH;QACrH,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,mFAAmF;QACnF,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACnD,CAAC;CACP;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,sBAAsB,EAAE,aAAa,EAAE,EAAE,qBAAqB,2CAiB1G;AA6DD,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE,yBAAyB,2CAE3E;AAED,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,6BAA6B,2CAazG;AAED,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,gCAAgC,2CAahG"}
+{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../../../src/components/side-nav/side-nav.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS1E,OAAO,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAQ5D,MAAM,WAAW,YAAY;IAC3B,wEAAwE;IACxE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,sBAAsB,CAAC,EACnB,OAAO,GACP;QACE,yFAAyF;QACzF,gBAAgB,CAAC,EAAE,IAAI,CAAC;QACxB,qHAAqH;QACrH,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,mFAAmF;QACnF,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACnD,CAAC;CACP;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,sBAAsB,EAAE,aAAa,EAAE,EAAE,YAAY,2CAwBxF;yBAxBe,OAAO;;;AA4FvB,MAAM,WAAW,gBAAgB;IAC/B,2DAA2D;IAC3D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,2DAA2D;AAC3D,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAEzD;yBAFe,WAAW;;;AAK3B,MAAM,WAAW,oBAAoB;IACnC,wDAAwD;IACxD,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,wBAAwB;IACxB,IAAI,EAAE,IAAI,CAAC;IACX,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qGAAqG;IACrG,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,6DAA6D;AAC7D,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,oBAAoB,2CAavF;yBAbe,eAAe;;;AAgB/B,MAAM,WAAW,uBAAuB;IACtC,iDAAiD;IACjD,QAAQ,EAAE,SAAS,CAAC;IACpB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,kEAAkE;AAClE,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,uBAAuB,2CAa9E;yBAbe,kBAAkB"}

package/dist/esm/components/side-nav/side-nav.js

@@ -4,6 +4,7 @@ import { useEffectEvent, useLayoutEffect } from '@react-aria/utils';
 import { createContext, useContext, useRef } from 'react';
 import { useOverlay } from 'react-aria';
 import { Link as RACLink } from 'react-aria-components';
+import { useLocalizedMessages } from '../../i18n/index.js';
 import { matchesBreakpoint, useBreakpoint } from '../../utils/breakpoints.js';
 import { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';
 import { AppShellContext } from '../app-shell/app-shell-context.js';
@@ -11,14 +12,24 @@ import { UNSTABLE_MobileNav as MobileNav } from '../mobile-nav/mobile-nav.js';
 import { Tooltip } from '../tooltip/tooltip.js';
 import { Text } from '../typography/text.js';
 const SideNavContext = createContext({ isCollapsed: false });
-export function UNSTABLE_SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }) {
+/**
+ * Displays persistent side navigation for applications with multiple sections or pages.
+ *
+ * See [side nav usage guidelines](https://ui.cimpress.io/components/side-nav/).
+ */
+export function SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }) {
     const appShellContext = useContext(AppShellContext);
     useLayoutEffect(() => {
         appShellContext?.setSideNavIsCollapsible(typeof isCollapsible === 'object' || isCollapsible || false);
     }, [isCollapsible, appShellContext]);
-    return (_jsxs(_Fragment, { children: [_jsx(SideNavInner, { UNSTABLE_isCollapsible: isCollapsible, children: children }), appShellContext && (_jsx(MobileNav, { isOpen: appShellContext.mobileNavIsOpen, onOpenChange: () => appShellContext.toggleMobileNav(false), children: children }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SideNavInner, { UNSTABLE_isCollapsible: isCollapsible, children: children }), appShellContext && (_jsx(MobileNav, { isOpen: appShellContext.mobileNavIsOpen, onOpenChange: () => appShellContext.toggleMobileNav(false), children: _jsx(SideNavContext.Provider, { value: {
+                        isCollapsed: false,
+                        onItemSelect: () => appShellContext.toggleMobileNav(false),
+                    }, children: children }) }))] }));
 }
+SideNav.displayName = 'SideNav';
 function SideNavInner({ children, UNSTABLE_isCollapsible: isCollapsible }) {
+    const messages = useLocalizedMessages('sideNav');
     const appShellContext = useContext(AppShellContext);
     const sideNavRef = useRef(null);
     const isOverlaySideNav = useBreakpoint({ max: 'md' }) && isCollapsible !== false;
@@ -51,16 +62,25 @@ function SideNavInner({ children, UNSTABLE_isCollapsible: isCollapsible }) {
     useLayoutEffect(() => {
         resetState();
     }, [isOverlaySideNav]);
-    return (_jsx(SideNavContext.Provider, { value: { isCollapsed: isCollapsed ?? false }, children: _jsx("div", { ...(isOverlaySideNav ? overlayProps : {}), className: "cim-side-nav", "data-collapsible": typeof isCollapsible === 'object' ? true : isCollapsible || false, "data-collapsed": isCollapsed, "aria-label": "Side navigation", ref: sideNavRef, children: _jsx("div", { className: "cim-side-nav-panel", children: children }) }) }));
+    return (_jsx(SideNavContext.Provider, { value: {
+            isCollapsed: isCollapsed ?? false,
+            onItemSelect: isOverlaySideNav ? handleClose : undefined,
+        }, children: _jsx("div", { ...(isOverlaySideNav ? overlayProps : {}), className: "cim-side-nav", "data-collapsible": typeof isCollapsible === 'object' ? true : isCollapsible || false, "data-collapsed": isCollapsed, "aria-label": messages.format('srLabel'), ref: sideNavRef, children: _jsx("div", { className: "cim-side-nav-panel", children: children }) }) }));
 }
-export function UNSTABLE_SideNavList({ children }) {
+/** Renders a list of navigation items within `SideNav`. */
+export function SideNavList({ children }) {
     return _jsx("nav", { className: "cim-side-nav-list", children: children });
 }
-export function UNSTABLE_SideNavListItem({ children, href, isActive, icon }) {
-    const { isCollapsed } = useContext(SideNavContext);
-    return (_jsx(Tooltip, { label: stringLikeChildrenToString(children), placement: "right", isDisabled: !isCollapsed, children: _jsxs(RACLink, { href: href, className: "cim-side-nav-list-item", "data-active": isActive, children: [icon, _jsx(Text, { as: "span", variant: "medium", UNSAFE_className: "cim-side-nav-list-item-label", children: children })] }) }));
+SideNavList.displayName = 'SideNavList';
+/** Renders a single navigation item within `SideNavList`. */
+export function SideNavListItem({ children, href, isActive, icon }) {
+    const { isCollapsed, onItemSelect } = useContext(SideNavContext);
+    return (_jsx(Tooltip, { label: stringLikeChildrenToString(children), placement: "right", isDisabled: !isCollapsed, children: _jsxs(RACLink, { href: href, className: "cim-side-nav-list-item", "data-active": isActive, onPress: onItemSelect, children: [icon, _jsx(Text, { as: "span", variant: "medium", UNSAFE_className: "cim-side-nav-list-item-label", children: children })] }) }));
 }
-export function UNSTABLE_SideNavListSection({ children, label }) {
+SideNavListItem.displayName = 'SideNavListItem';
+/** Renders a section of navigation items within `SideNavList`. */
+export function SideNavListSection({ children, label }) {
     return (_jsxs("div", { className: "cim-side-nav-list-section", children: [label && (_jsx("div", { className: "cim-side-nav-list-section-header", children: _jsx(Text, { as: "p", variant: "small-semibold", tone: "subtle", UNSAFE_className: "cim-side-nav-list-section-header-label", children: label }) })), children] }));
 }
+SideNavListSection.displayName = 'SideNavListSection';
 //# sourceMappingURL=side-nav.js.map

package/dist/esm/components/side-nav/side-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.js","sourceRoot":"","sources":["../../../../src/components/side-nav/side-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useEffectEvent, useLayoutEffect } from '@react-aria/utils';\nimport { createContext, useContext, useRef, type ReactNode } from 'react';\nimport { useOverlay } from 'react-aria';\nimport { Link as RACLink } from 'react-aria-components';\nimport { matchesBreakpoint, useBreakpoint } from '../../utils/breakpoints.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { AppShellContext } from '../app-shell/app-shell-context.js';\nimport { UNSTABLE_MobileNav as MobileNav } from '../mobile-nav/mobile-nav.js';\nimport { Tooltip } from '../tooltip/tooltip.js';\nimport type { Href, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nconst SideNavContext = createContext<{ isCollapsed: boolean }>({ isCollapsed: false });\n\nexport interface UNSTABLE_SideNavProps {\n  children: ReactNode;\n  /**\n   * Determines if the side navigation can be collapsed down to an icon-only rail, allowing for more screen space when needed.\n   *\n   * Setting to `true` will enable collapsibility. Passing an object allows for more advanced configuration, including fully controlled usage outside app shell context.\n   */\n  UNSTABLE_isCollapsible?:\n    | boolean\n    | {\n        /** Whether the side nav should be collapsed by default. Only affects large viewports. */\n        defaultCollapsed?: true;\n        /** Whether the side nav is currently collapsed. Only needed when the side nav is not controlled by the app shell. */\n        isCollapsed?: boolean;\n        /** Callback function that is called when the side nav is collapsed or expanded. */\n        onCollapseChange?: (isCollapsed: boolean) => void;\n      };\n}\n\nexport function UNSTABLE_SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }: UNSTABLE_SideNavProps) {\n  const appShellContext = useContext(AppShellContext);\n\n  useLayoutEffect(() => {\n    appShellContext?.setSideNavIsCollapsible(typeof isCollapsible === 'object' || isCollapsible || false);\n  }, [isCollapsible, appShellContext]);\n\n  return (\n    <>\n      <SideNavInner UNSTABLE_isCollapsible={isCollapsible}>{children}</SideNavInner>\n      {appShellContext && (\n        <MobileNav isOpen={appShellContext.mobileNavIsOpen} onOpenChange={() => appShellContext.toggleMobileNav(false)}>\n          {children}\n        </MobileNav>\n      )}\n    </>\n  );\n}\n\nfunction SideNavInner({ children, UNSTABLE_isCollapsible: isCollapsible }: UNSTABLE_SideNavProps) {\n  const appShellContext = useContext(AppShellContext);\n  const sideNavRef = useRef<HTMLDivElement>(null);\n  const isOverlaySideNav = useBreakpoint({ max: 'md' }) && isCollapsible !== false;\n  const isCollapsed =\n    typeof isCollapsible === 'object'\n      ? (isCollapsible.isCollapsed ?? appShellContext?.sideNavIsCollapsed ?? isCollapsible.defaultCollapsed)\n      : isCollapsible\n        ? appShellContext?.sideNavIsCollapsed\n        : undefined;\n\n  function handleClose() {\n    appShellContext?.toggleSideNavCollapse(true);\n\n    if (typeof isCollapsible === 'object') {\n      isCollapsible.onCollapseChange?.(true);\n    }\n  }\n\n  const { overlayProps } = useOverlay(\n    {\n      isDismissable: isOverlaySideNav,\n      isOpen: isOverlaySideNav && isCollapsed !== undefined ? !isCollapsed : undefined,\n      onClose: () => handleClose(),\n    },\n    sideNavRef,\n  );\n\n  const resetState = useEffectEvent(() => {\n    if (typeof isCollapsible === 'object' || isCollapsible) {\n      const defaultIsCollapsed = typeof isCollapsible === 'object' ? isCollapsible.defaultCollapsed : false;\n      appShellContext?.toggleSideNavCollapse(defaultIsCollapsed || matchesBreakpoint({ max: 'md' }));\n      if (typeof isCollapsible === 'object') {\n        isCollapsible.onCollapseChange?.(defaultIsCollapsed || matchesBreakpoint({ max: 'md' }));\n      }\n    }\n  });\n\n  // Hydrate state and reset when screen size changes to or from overlay mode\n  useLayoutEffect(() => {\n    resetState();\n  }, [isOverlaySideNav]);\n\n  return (\n    <SideNavContext.Provider value={{ isCollapsed: isCollapsed ?? false }}>\n      <div\n        {...(isOverlaySideNav ? overlayProps : {})}\n        className=\"cim-side-nav\"\n        data-collapsible={typeof isCollapsible === 'object' ? true : isCollapsible || false}\n        data-collapsed={isCollapsed}\n        aria-label=\"Side navigation\"\n        ref={sideNavRef}\n      >\n        <div className=\"cim-side-nav-panel\">{children}</div>\n      </div>\n    </SideNavContext.Provider>\n  );\n}\n\nexport interface UNSTABLE_SideNavListProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_SideNavList({ children }: UNSTABLE_SideNavListProps) {\n  return <nav className=\"cim-side-nav-list\">{children}</nav>;\n}\n\nexport interface UNSTABLE_SideNavListItemProps {\n  children: StringLikeChildren;\n  href: Href;\n  isActive?: boolean;\n  icon?: ReactNode;\n}\n\nexport function UNSTABLE_SideNavListItem({ children, href, isActive, icon }: UNSTABLE_SideNavListItemProps) {\n  const { isCollapsed } = useContext(SideNavContext);\n\n  return (\n    <Tooltip label={stringLikeChildrenToString(children)} placement=\"right\" isDisabled={!isCollapsed}>\n      <RACLink href={href} className=\"cim-side-nav-list-item\" data-active={isActive}>\n        {icon}\n        <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-side-nav-list-item-label\">\n          {children}\n        </Text>\n      </RACLink>\n    </Tooltip>\n  );\n}\n\nexport interface UNSTABLE_SideNavListSectionProps {\n  children: ReactNode;\n  label?: string;\n}\n\nexport function UNSTABLE_SideNavListSection({ children, label }: UNSTABLE_SideNavListSectionProps) {\n  return (\n    <div className=\"cim-side-nav-list-section\">\n      {label && (\n        <div className=\"cim-side-nav-list-section-header\">\n          <Text as=\"p\" variant=\"small-semibold\" tone=\"subtle\" UNSAFE_className=\"cim-side-nav-list-section-header-label\">\n            {label}\n          </Text>\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"side-nav.js","sourceRoot":"","sources":["../../../../src/components/side-nav/side-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useEffectEvent, useLayoutEffect } from '@react-aria/utils';\nimport { createContext, useContext, useRef, type ReactNode } from 'react';\nimport { useOverlay } from 'react-aria';\nimport { Link as RACLink } from 'react-aria-components';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { matchesBreakpoint, useBreakpoint } from '../../utils/breakpoints.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { AppShellContext } from '../app-shell/app-shell-context.js';\nimport { UNSTABLE_MobileNav as MobileNav } from '../mobile-nav/mobile-nav.js';\nimport { Tooltip } from '../tooltip/tooltip.js';\nimport type { Href, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nconst SideNavContext = createContext<{\n  isCollapsed: boolean;\n  onItemSelect?: () => void;\n}>({ isCollapsed: false });\n\nexport interface SideNavProps {\n  /** The contents of the side navigation. Typically a `<SideNavList>`. */\n  children: ReactNode;\n  /**\n   * Determines if the side navigation can be collapsed down to an icon-only rail, allowing for more screen space when needed.\n   *\n   * Setting to `true` will enable collapsibility. Passing an object allows for more advanced configuration, including fully controlled usage outside app shell context.\n   */\n  UNSTABLE_isCollapsible?:\n    | boolean\n    | {\n        /** Whether the side nav should be collapsed by default. Only affects large viewports. */\n        defaultCollapsed?: true;\n        /** Whether the side nav is currently collapsed. Only needed when the side nav is not controlled by the app shell. */\n        isCollapsed?: boolean;\n        /** Callback function that is called when the side nav is collapsed or expanded. */\n        onCollapseChange?: (isCollapsed: boolean) => void;\n      };\n}\n\n/**\n * Displays persistent side navigation for applications with multiple sections or pages.\n *\n * See [side nav usage guidelines](https://ui.cimpress.io/components/side-nav/).\n */\nexport function SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }: SideNavProps) {\n  const appShellContext = useContext(AppShellContext);\n\n  useLayoutEffect(() => {\n    appShellContext?.setSideNavIsCollapsible(typeof isCollapsible === 'object' || isCollapsible || false);\n  }, [isCollapsible, appShellContext]);\n\n  return (\n    <>\n      <SideNavInner UNSTABLE_isCollapsible={isCollapsible}>{children}</SideNavInner>\n      {appShellContext && (\n        <MobileNav isOpen={appShellContext.mobileNavIsOpen} onOpenChange={() => appShellContext.toggleMobileNav(false)}>\n          <SideNavContext.Provider\n            value={{\n              isCollapsed: false,\n              onItemSelect: () => appShellContext.toggleMobileNav(false),\n            }}\n          >\n            {children}\n          </SideNavContext.Provider>\n        </MobileNav>\n      )}\n    </>\n  );\n}\nSideNav.displayName = 'SideNav';\n\nfunction SideNavInner({ children, UNSTABLE_isCollapsible: isCollapsible }: SideNavProps) {\n  const messages = useLocalizedMessages('sideNav');\n  const appShellContext = useContext(AppShellContext);\n  const sideNavRef = useRef<HTMLDivElement>(null);\n  const isOverlaySideNav = useBreakpoint({ max: 'md' }) && isCollapsible !== false;\n  const isCollapsed =\n    typeof isCollapsible === 'object'\n      ? (isCollapsible.isCollapsed ?? appShellContext?.sideNavIsCollapsed ?? isCollapsible.defaultCollapsed)\n      : isCollapsible\n        ? appShellContext?.sideNavIsCollapsed\n        : undefined;\n\n  function handleClose() {\n    appShellContext?.toggleSideNavCollapse(true);\n\n    if (typeof isCollapsible === 'object') {\n      isCollapsible.onCollapseChange?.(true);\n    }\n  }\n\n  const { overlayProps } = useOverlay(\n    {\n      isDismissable: isOverlaySideNav,\n      isOpen: isOverlaySideNav && isCollapsed !== undefined ? !isCollapsed : undefined,\n      onClose: () => handleClose(),\n    },\n    sideNavRef,\n  );\n\n  const resetState = useEffectEvent(() => {\n    if (typeof isCollapsible === 'object' || isCollapsible) {\n      const defaultIsCollapsed = typeof isCollapsible === 'object' ? isCollapsible.defaultCollapsed : false;\n      appShellContext?.toggleSideNavCollapse(defaultIsCollapsed || matchesBreakpoint({ max: 'md' }));\n      if (typeof isCollapsible === 'object') {\n        isCollapsible.onCollapseChange?.(defaultIsCollapsed || matchesBreakpoint({ max: 'md' }));\n      }\n    }\n  });\n\n  // Hydrate state and reset when screen size changes to or from overlay mode\n  useLayoutEffect(() => {\n    resetState();\n  }, [isOverlaySideNav]);\n\n  return (\n    <SideNavContext.Provider\n      value={{\n        isCollapsed: isCollapsed ?? false,\n        onItemSelect: isOverlaySideNav ? handleClose : undefined,\n      }}\n    >\n      <div\n        {...(isOverlaySideNav ? overlayProps : {})}\n        className=\"cim-side-nav\"\n        data-collapsible={typeof isCollapsible === 'object' ? true : isCollapsible || false}\n        data-collapsed={isCollapsed}\n        aria-label={messages.format('srLabel')}\n        ref={sideNavRef}\n      >\n        <div className=\"cim-side-nav-panel\">{children}</div>\n      </div>\n    </SideNavContext.Provider>\n  );\n}\n\nexport interface SideNavListProps {\n  /** Navigation items and sections belonging to the list. */\n  children: ReactNode;\n}\n\n/** Renders a list of navigation items within `SideNav`. */\nexport function SideNavList({ children }: SideNavListProps) {\n  return <nav className=\"cim-side-nav-list\">{children}</nav>;\n}\nSideNavList.displayName = 'SideNavList';\n\nexport interface SideNavListItemProps {\n  /** The text to display as the navigation item label. */\n  children: StringLikeChildren;\n  /** A URL to link to. */\n  href: Href;\n  /** Whether the navigation item represents the current page. */\n  isActive?: boolean;\n  /** An icon displayed before the navigation item label. Required when the side nav is collapsible. */\n  icon?: ReactNode;\n}\n\n/** Renders a single navigation item within `SideNavList`. */\nexport function SideNavListItem({ children, href, isActive, icon }: SideNavListItemProps) {\n  const { isCollapsed, onItemSelect } = useContext(SideNavContext);\n\n  return (\n    <Tooltip label={stringLikeChildrenToString(children)} placement=\"right\" isDisabled={!isCollapsed}>\n      <RACLink href={href} className=\"cim-side-nav-list-item\" data-active={isActive} onPress={onItemSelect}>\n        {icon}\n        <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-side-nav-list-item-label\">\n          {children}\n        </Text>\n      </RACLink>\n    </Tooltip>\n  );\n}\nSideNavListItem.displayName = 'SideNavListItem';\n\nexport interface SideNavListSectionProps {\n  /** Navigation items belonging to the section. */\n  children: ReactNode;\n  /** The content to display as the section title. */\n  label?: string;\n}\n\n/** Renders a section of navigation items within `SideNavList`. */\nexport function SideNavListSection({ children, label }: SideNavListSectionProps) {\n  return (\n    <div className=\"cim-side-nav-list-section\">\n      {label && (\n        <div className=\"cim-side-nav-list-section-header\">\n          <Text as=\"p\" variant=\"small-semibold\" tone=\"subtle\" UNSAFE_className=\"cim-side-nav-list-section-header-label\">\n            {label}\n          </Text>\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\nSideNavListSection.displayName = 'SideNavListSection';\n"]}

package/dist/esm/components/top-nav/top-nav.d.ts

@@ -1,12 +1,27 @@
 import type { ReactNode } from 'react';
 import type { NavigationProps, StringLikeChildren, WithRequired } from '../types.js';
-export interface UNSTABLE_TopNavProps {
+export interface TopNavProps {
+    /** The contents of the top navigation. Must be one or more of `<TopNavItem>`. */
     children: ReactNode;
 }
-export declare function UNSTABLE_TopNav({ children }: UNSTABLE_TopNavProps): import("react/jsx-runtime").JSX.Element;
-export interface UNSTABLE_TopNavItemProps extends WithRequired<NavigationProps, 'href'> {
+/**
+ * Displays horizontal navigation, typically below the app header.
+ *
+ * See [top nav usage guidelines](https://ui.cimpress.io/components/top-nav/).
+ */
+export declare function TopNav({ children, ...props }: TopNavProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TopNav {
+    var displayName: string;
+}
+export interface TopNavItemProps extends WithRequired<NavigationProps, 'href'> {
+    /** The text to display as the navigation item label. */
     children: StringLikeChildren;
+    /** Whether the navigation item represents the current page. */
     isActive?: boolean;
 }
-export declare function UNSTABLE_TopNavItem({ children, href, isActive, ...props }: UNSTABLE_TopNavItemProps): import("react/jsx-runtime").JSX.Element;
+/** Renders a single navigation item within `TopNav`. */
+export declare function TopNavItem({ children, href, isActive, ...props }: TopNavItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TopNavItem {
+    var displayName: string;
+}
 //# sourceMappingURL=top-nav.d.ts.map

package/dist/esm/components/top-nav/top-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top-nav.d.ts","sourceRoot":"","sources":["../../../../src/components/top-nav/top-nav.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGrF,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CAMjE;AAED,MAAM,WAAW,wBAAyB,SAAQ,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;IACrF,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,2CAgBnG"}
+{"version":3,"file":"top-nav.d.ts","sourceRoot":"","sources":["../../../../src/components/top-nav/top-nav.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGrF,MAAM,WAAW,WAAW;IAC1B,iFAAiF;IACjF,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAQzD;yBARe,MAAM;;;AAWtB,MAAM,WAAW,eAAgB,SAAQ,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;IAC5E,wDAAwD;IACxD,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wDAAwD;AACxD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAgBjF;yBAhBe,UAAU"}

package/dist/esm/components/top-nav/top-nav.js

@@ -1,11 +1,22 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { Link as RACLink } from 'react-aria-components';
+import { useLocalizedMessages } from '../../i18n/index.js';
 import { Text } from '../typography/text.js';
-export function UNSTABLE_TopNav({ children }) {
-    return (_jsx("nav", { className: clsx('cim-top-nav', 'cim-link-tabs'), children: _jsx("ul", { className: "cim-tab-list", children: children }) }));
+/**
+ * Displays horizontal navigation, typically below the app header.
+ *
+ * See [top nav usage guidelines](https://ui.cimpress.io/components/top-nav/).
+ */
+export function TopNav({ children, ...props }) {
+    const messages = useLocalizedMessages('topNav');
+    return (_jsx("nav", { ...props, className: clsx('cim-top-nav', 'cim-link-tabs'), "aria-label": messages.format('srLabel'), children: _jsx("ul", { className: "cim-tab-list", children: children }) }));
 }
-export function UNSTABLE_TopNavItem({ children, href, isActive, ...props }) {
+TopNav.displayName = 'TopNav';
+/** Renders a single navigation item within `TopNav`. */
+export function TopNavItem({ children, href, isActive, ...props }) {
     return (_jsx("li", { children: _jsx(RACLink, { ...props, className: clsx('cim-tab-item', 'cim-link-tab-item'), href: href, "aria-current": isActive ? 'page' : undefined, "data-selected": isActive || undefined, children: _jsx(Text, { as: "span", variant: "medium-semibold", alignment: "center", children: children }) }) }));
 }
+TopNavItem.displayName = 'TopNavItem';
 //# sourceMappingURL=top-nav.js.map