@jobber/components 8.24.1 → 8.24.2-visual-reg-5479aeb.18

package/dist/dialogReturnFocus-cjs.js

@@ -7,10 +7,10 @@ var classnames = require('classnames');
 var buttonRenderAdapter = require('./buttonRenderAdapter-cjs.js');
 var Button = require('./Button-cjs.js');
 var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
+var useRenderElement = require('./useRenderElement-cjs.js');
 var Heading = require('./Heading-cjs.js');
 var BottomSheet = require('./BottomSheet-cjs.js');
 var DrawerTitle = require('./DrawerTitle-cjs.js');
-var useRenderElement = require('./useRenderElement-cjs.js');
 var DrawerDescription = require('./DrawerDescription-cjs.js');
 
 // Copied from Menu's constant so the two surfaces agree on what "mobile" means.
@@ -81,6 +81,24 @@ function resolveComposableCloseRender({ children, render, }) {
     return buttonRenderAdapter.renderAtlantisButtonTarget(React.createElement(Button.Button, { type: "tertiary", variation: "subtle", ariaLabel: "Close dialog" },
         React.createElement(Button.Button.Icon, { name: "remove" })));
 }
+/**
+ * Adapts a `Dialog.Content` `render` for the bottom sheet's drawer popup. A
+ * render element passes through; a render function is wrapped to receive the
+ * drawer's state re-shaped as the dialog popup's state (e.g. `nestedDrawerOpen`
+ * becomes `nestedDialogOpen`), so `render` sees the same shape as the desktop
+ * dialog.
+ */
+function resolveBottomSheetContentRender(render) {
+    if (typeof render !== "function") {
+        return render;
+    }
+    return (props, drawerState) => render(props, {
+        open: drawerState.open,
+        transitionStatus: drawerState.transitionStatus,
+        nested: drawerState.nested,
+        nestedDialogOpen: drawerState.nestedDrawerOpen,
+    });
+}
 const DialogContext = React.createContext({
     type: "dialog",
     size: "base",
@@ -115,11 +133,11 @@ function useInsideDialogScrollArea() {
  * backed by the BottomSheet primitive's scroll area, for its fade.)
  */
 function DialogScrollArea$1({ children, className, style, }) {
-    return (React.createElement(ScrollAreaViewport.ScrollAreaRoot, { className: classnames(styles.scrollRegion, className), style: style },
+    return (React.createElement(ScrollAreaViewport.ScrollAreaRoot, { className: classnames(styles.scrollRegion, className), style: style, "data-testid": "ATL-Dialog-ScrollRegion" },
         React.createElement(ScrollAreaViewport.ScrollAreaViewport, { className: styles.scrollViewport, 
             // BaseUI defaults the viewport to `overflow: scroll`; `auto` so the
             // native scrollbar only shows when the content overflows.
-            style: { overflow: "auto" } },
+            style: { overflow: "auto" }, "data-testid": "ATL-Dialog-ScrollViewport" },
             React.createElement(DialogScrollAreaContext.Provider, { value: true }, children))));
 }
 /** Layout-only header row; sticky unless nested inside a `Dialog.ScrollArea`. */
@@ -134,15 +152,26 @@ function SharedDialogFooter(_a) {
     const sticky = !useInsideDialogScrollArea();
     return (React.createElement("div", Object.assign({}, rest, { className: classnames(styles.footer, className), style: style, "data-sticky": sticky || undefined, "data-testid": "ATL-Dialog-Footer" }), children));
 }
+function renderActionButton(action, defaults) {
+    if (!action)
+        return null;
+    return React.isValidElement(action) ? (action) : (React.createElement(Button.Button, Object.assign({}, useRenderElement.mergeProps(defaults, action))));
+}
 /**
  * The action-button layout: tertiary on the left, primary/secondary grouped on
  * the right. Drop it inside a `Dialog.Footer`.
  */
 function DialogActions(_a) {
     var { primary, secondary, tertiary, align = "right", className, style } = _a, rest = tslib_es6.__rest(_a, ["primary", "secondary", "tertiary", "align", "className", "style"]);
-    const secondaryAction = secondary && React.isValidElement(secondary) ? (secondary) : (React.createElement(Button.Button, Object.assign({ type: "primary", variation: "subtle" }, secondary)));
-    const primaryAction = primary && React.isValidElement(primary) ? (primary) : (React.createElement(Button.Button, Object.assign({ type: "primary" }, primary)));
-    const tertiaryAction = tertiary && React.isValidElement(tertiary) ? (tertiary) : (React.createElement(Button.Button, Object.assign({ type: "secondary", variation: "destructive" }, tertiary)));
+    const primaryAction = renderActionButton(primary, { type: "primary" });
+    const secondaryAction = renderActionButton(secondary, {
+        type: "primary",
+        variation: "subtle",
+    });
+    const tertiaryAction = renderActionButton(tertiary, {
+        type: "secondary",
+        variation: "destructive",
+    });
     return (React.createElement("div", Object.assign({}, rest, { className: classnames(actionsStyles.actions, [actionsStyles[`align-${align}`]], className), style: style, "data-testid": "ATL-Dialog-Actions" }),
         tertiary && (React.createElement("div", { className: actionsStyles.leftActions }, tertiaryAction)),
         React.createElement("div", { className: classnames(actionsStyles.buttonGroup, actionsStyles[`align-${align}`]) },
@@ -150,20 +179,24 @@ function DialogActions(_a) {
             primary && primaryAction)));
 }
 
-function DialogBottomSheetRoot(props) {
+function DialogBottomSheet(props) {
     return (React.createElement(BottomSheet.BottomSheet.Root, Object.assign({}, props)));
 }
 function DialogBottomSheetTrigger(props) {
     return (React.createElement(BottomSheet.BottomSheet.Trigger, Object.assign({}, props)));
 }
 function DialogBottomSheetContent(_a) {
-    var { children, className, style } = _a, rest = tslib_es6.__rest(_a, ["children", "className", "style"]);
+    var { children, className, style, render } = _a, rest = tslib_es6.__rest(_a, ["children", "className", "style", "render"]);
     const { type, size, finalFocus } = useDialogContext();
     return (
     // Opt-out of the BottomSheet's built-in scroll area.
     // Dialog will handle the scroll area itself.
     React.createElement(BottomSheet.BottomSheetScrollAreaContext.Provider, { value: false },
-        React.createElement(BottomSheet.BottomSheet.Popup, Object.assign({}, rest, { className: classnames(styles.sheetSurface, className), style: style, role: type, finalFocus: finalFocus, "data-dialog-variant": "sheet", "data-size": size }), children)));
+        React.createElement(BottomSheet.BottomSheet.Popup, Object.assign({}, rest, { 
+            // The bottom sheet is backed by a drawer popup, so re-shape its state
+            // into the dialog popup state the consumer's `render` is typed against.
+            render: resolveBottomSheetContentRender(render), className: classnames(styles.sheetSurface, className), style: style, role: type, finalFocus: finalFocus, "data-dialog-variant": "sheet", "data-size": size }),
+            React.createElement(ScrollAreaViewport.DrawerContent, { "data-base-ui-swipe-ignore": true }, children))));
 }
 function DialogBottomSheetTitle(_a) {
     var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
@@ -194,18 +227,16 @@ function DialogBottomSheetBody(_a) {
     return insideScrollArea ? (content) : (React.createElement(DialogBottomSheetScrollArea, null, content));
 }
 /** Mobile shell: a bottom sheet built on the BottomSheet/Drawer primitives. */
-const DialogBottomSheet = Object.assign(DialogBottomSheetRoot, {
-    Trigger: DialogBottomSheetTrigger,
-    Content: DialogBottomSheetContent,
-    Header: SharedDialogHeader,
-    Title: DialogBottomSheetTitle,
-    Close: DialogBottomSheetClose,
-    Body: DialogBottomSheetBody,
-    Footer: SharedDialogFooter,
-    ScrollArea: DialogBottomSheetScrollArea,
-});
+DialogBottomSheet.Trigger = DialogBottomSheetTrigger;
+DialogBottomSheet.Content = DialogBottomSheetContent;
+DialogBottomSheet.Header = SharedDialogHeader;
+DialogBottomSheet.Title = DialogBottomSheetTitle;
+DialogBottomSheet.Close = DialogBottomSheetClose;
+DialogBottomSheet.Body = DialogBottomSheetBody;
+DialogBottomSheet.Footer = SharedDialogFooter;
+DialogBottomSheet.ScrollArea = DialogBottomSheetScrollArea;
 
-function DialogModalRoot(props) {
+function DialogModal(props) {
     return React.createElement(ScrollAreaViewport.DialogRoot, Object.assign({}, props));
 }
 function DialogModalTrigger(_a) {
@@ -217,7 +248,7 @@ function DialogModalContent(_a) {
     const { type, size, finalFocus } = useDialogContext();
     return (React.createElement(ScrollAreaViewport.DialogPortal, null,
         React.createElement(DrawerDescription.DialogBackdrop, { forceRender: true, className: styles.backdrop, "data-testid": "ATL-Dialog-Backdrop" }),
-        React.createElement(DrawerDescription.DialogViewport, { className: styles.viewport },
+        React.createElement(ScrollAreaViewport.DialogViewport, { className: styles.viewport },
             React.createElement(DrawerDescription.DialogPopup, Object.assign({}, rest, { className: classnames(styles.popup, styles[size], className), style: style, role: type, finalFocus: finalFocus, "data-dialog-variant": "modal" }), children))));
 }
 function DialogModalTitle(_a) {
@@ -238,17 +269,14 @@ function DialogModalBody(_a) {
     const content = (React.createElement(DrawerDescription.DialogDescription, { render: descriptionProps => (React.createElement("div", Object.assign({}, rest, descriptionProps, { className: classnames(styles.body, { [styles.fullBleed]: fullBleed }, className), style: style }), children)) }));
     return insideScrollArea ? (content) : (React.createElement(DialogScrollArea$1, null, content));
 }
-const DialogModal = Object.assign(DialogModalRoot, {
-    Trigger: DialogModalTrigger,
-    Content: DialogModalContent,
-    Header: SharedDialogHeader,
-    Title: DialogModalTitle,
-    Close: DialogModalClose,
-    Body: DialogModalBody,
-    Footer: SharedDialogFooter,
-    // The modal keeps the plain native-scrollbar scroll region.
-    ScrollArea: DialogScrollArea$1,
-});
+DialogModal.Trigger = DialogModalTrigger;
+DialogModal.Content = DialogModalContent;
+DialogModal.Header = SharedDialogHeader;
+DialogModal.Title = DialogModalTitle;
+DialogModal.Close = DialogModalClose;
+DialogModal.Body = DialogModalBody;
+DialogModal.Footer = SharedDialogFooter;
+DialogModal.ScrollArea = DialogScrollArea$1;
 
 /**
  * Creates a handle that opens/closes a `Dialog` from detached triggers (e.g. an
@@ -273,7 +301,7 @@ function useDialogShell() {
  * desktop, a bottom sheet on mobile. Compose it with `Dialog.Trigger`,
  * `Dialog.Content`, and the layout parts.
  */
-function DialogRoot(_a) {
+function Dialog(_a) {
     var { onRequestClose, size = "base", type = "dialog", finalFocus, children, onOpenChange } = _a, rest = tslib_es6.__rest(_a, ["onRequestClose", "size", "type", "finalFocus", "children", "onOpenChange"]);
     function handleOpenChange(nextOpen, eventDetails) {
         if (!nextOpen) {
@@ -339,7 +367,6 @@ function DialogScrollArea(props) {
     const Shell = useDialogShell();
     return React.createElement(Shell.ScrollArea, Object.assign({}, props));
 }
-const Dialog = DialogRoot;
 Dialog.Trigger = DialogTrigger;
 Dialog.Content = DialogContent;
 Dialog.Header = DialogHeader;

package/dist/dialogReturnFocus-es.js

@@ -4,12 +4,12 @@ import { useWindowDimensions } from '@jobber/hooks';
 import classnames from 'classnames';
 import { n as normalizeBaseUiButtonProps, i as isAtlantisButtonRenderTarget, s as stripNativeTypeFromButtonRenderTarget, r as renderAtlantisButtonTarget } from './buttonRenderAdapter-es.js';
 import { B as Button } from './Button-es.js';
-import { S as ScrollAreaRoot, e as ScrollAreaViewport, g as DialogRoot$1, h as DialogTrigger$1, i as DialogPortal } from './ScrollAreaViewport-es.js';
+import { S as ScrollAreaRoot, f as ScrollAreaViewport, g as DrawerContent, j as DialogRoot, k as DialogTrigger$1, l as DialogPortal, m as DialogViewport } from './ScrollAreaViewport-es.js';
+import { m as mergeProps } from './useRenderElement-es.js';
 import { H as Heading } from './Heading-es.js';
 import { a as BottomSheet, B as BottomSheetScrollAreaContext } from './BottomSheet-es.js';
 import { D as DrawerTitle, a as DrawerClose, b as DialogTitle$1, c as DialogClose$1 } from './DrawerTitle-es.js';
-import { m as mergeProps } from './useRenderElement-es.js';
-import { D as DrawerDescription, a as DialogBackdrop, b as DialogViewport, c as DialogPopup, d as DialogDescription, e as createDialogHandle } from './DrawerDescription-es.js';
+import { D as DrawerDescription, a as DialogBackdrop, b as DialogPopup, c as DialogDescription, d as createDialogHandle } from './DrawerDescription-es.js';
 
 // Copied from Menu's constant so the two surfaces agree on what "mobile" means.
 // (The proposal calls for copying shared Menu values into the component first
@@ -79,6 +79,24 @@ function resolveComposableCloseRender({ children, render, }) {
     return renderAtlantisButtonTarget(React__default.createElement(Button, { type: "tertiary", variation: "subtle", ariaLabel: "Close dialog" },
         React__default.createElement(Button.Icon, { name: "remove" })));
 }
+/**
+ * Adapts a `Dialog.Content` `render` for the bottom sheet's drawer popup. A
+ * render element passes through; a render function is wrapped to receive the
+ * drawer's state re-shaped as the dialog popup's state (e.g. `nestedDrawerOpen`
+ * becomes `nestedDialogOpen`), so `render` sees the same shape as the desktop
+ * dialog.
+ */
+function resolveBottomSheetContentRender(render) {
+    if (typeof render !== "function") {
+        return render;
+    }
+    return (props, drawerState) => render(props, {
+        open: drawerState.open,
+        transitionStatus: drawerState.transitionStatus,
+        nested: drawerState.nested,
+        nestedDialogOpen: drawerState.nestedDrawerOpen,
+    });
+}
 const DialogContext = React__default.createContext({
     type: "dialog",
     size: "base",
@@ -113,11 +131,11 @@ function useInsideDialogScrollArea() {
  * backed by the BottomSheet primitive's scroll area, for its fade.)
  */
 function DialogScrollArea$1({ children, className, style, }) {
-    return (React__default.createElement(ScrollAreaRoot, { className: classnames(styles.scrollRegion, className), style: style },
+    return (React__default.createElement(ScrollAreaRoot, { className: classnames(styles.scrollRegion, className), style: style, "data-testid": "ATL-Dialog-ScrollRegion" },
         React__default.createElement(ScrollAreaViewport, { className: styles.scrollViewport, 
             // BaseUI defaults the viewport to `overflow: scroll`; `auto` so the
             // native scrollbar only shows when the content overflows.
-            style: { overflow: "auto" } },
+            style: { overflow: "auto" }, "data-testid": "ATL-Dialog-ScrollViewport" },
             React__default.createElement(DialogScrollAreaContext.Provider, { value: true }, children))));
 }
 /** Layout-only header row; sticky unless nested inside a `Dialog.ScrollArea`. */
@@ -132,15 +150,26 @@ function SharedDialogFooter(_a) {
     const sticky = !useInsideDialogScrollArea();
     return (React__default.createElement("div", Object.assign({}, rest, { className: classnames(styles.footer, className), style: style, "data-sticky": sticky || undefined, "data-testid": "ATL-Dialog-Footer" }), children));
 }
+function renderActionButton(action, defaults) {
+    if (!action)
+        return null;
+    return isValidElement(action) ? (action) : (React__default.createElement(Button, Object.assign({}, mergeProps(defaults, action))));
+}
 /**
  * The action-button layout: tertiary on the left, primary/secondary grouped on
  * the right. Drop it inside a `Dialog.Footer`.
  */
 function DialogActions(_a) {
     var { primary, secondary, tertiary, align = "right", className, style } = _a, rest = __rest(_a, ["primary", "secondary", "tertiary", "align", "className", "style"]);
-    const secondaryAction = secondary && isValidElement(secondary) ? (secondary) : (React__default.createElement(Button, Object.assign({ type: "primary", variation: "subtle" }, secondary)));
-    const primaryAction = primary && isValidElement(primary) ? (primary) : (React__default.createElement(Button, Object.assign({ type: "primary" }, primary)));
-    const tertiaryAction = tertiary && isValidElement(tertiary) ? (tertiary) : (React__default.createElement(Button, Object.assign({ type: "secondary", variation: "destructive" }, tertiary)));
+    const primaryAction = renderActionButton(primary, { type: "primary" });
+    const secondaryAction = renderActionButton(secondary, {
+        type: "primary",
+        variation: "subtle",
+    });
+    const tertiaryAction = renderActionButton(tertiary, {
+        type: "secondary",
+        variation: "destructive",
+    });
     return (React__default.createElement("div", Object.assign({}, rest, { className: classnames(actionsStyles.actions, [actionsStyles[`align-${align}`]], className), style: style, "data-testid": "ATL-Dialog-Actions" }),
         tertiary && (React__default.createElement("div", { className: actionsStyles.leftActions }, tertiaryAction)),
         React__default.createElement("div", { className: classnames(actionsStyles.buttonGroup, actionsStyles[`align-${align}`]) },
@@ -148,20 +177,24 @@ function DialogActions(_a) {
             primary && primaryAction)));
 }
 
-function DialogBottomSheetRoot(props) {
+function DialogBottomSheet(props) {
     return (React__default.createElement(BottomSheet.Root, Object.assign({}, props)));
 }
 function DialogBottomSheetTrigger(props) {
     return (React__default.createElement(BottomSheet.Trigger, Object.assign({}, props)));
 }
 function DialogBottomSheetContent(_a) {
-    var { children, className, style } = _a, rest = __rest(_a, ["children", "className", "style"]);
+    var { children, className, style, render } = _a, rest = __rest(_a, ["children", "className", "style", "render"]);
     const { type, size, finalFocus } = useDialogContext();
     return (
     // Opt-out of the BottomSheet's built-in scroll area.
     // Dialog will handle the scroll area itself.
     React__default.createElement(BottomSheetScrollAreaContext.Provider, { value: false },
-        React__default.createElement(BottomSheet.Popup, Object.assign({}, rest, { className: classnames(styles.sheetSurface, className), style: style, role: type, finalFocus: finalFocus, "data-dialog-variant": "sheet", "data-size": size }), children)));
+        React__default.createElement(BottomSheet.Popup, Object.assign({}, rest, { 
+            // The bottom sheet is backed by a drawer popup, so re-shape its state
+            // into the dialog popup state the consumer's `render` is typed against.
+            render: resolveBottomSheetContentRender(render), className: classnames(styles.sheetSurface, className), style: style, role: type, finalFocus: finalFocus, "data-dialog-variant": "sheet", "data-size": size }),
+            React__default.createElement(DrawerContent, { "data-base-ui-swipe-ignore": true }, children))));
 }
 function DialogBottomSheetTitle(_a) {
     var { children } = _a, rest = __rest(_a, ["children"]);
@@ -192,19 +225,17 @@ function DialogBottomSheetBody(_a) {
     return insideScrollArea ? (content) : (React__default.createElement(DialogBottomSheetScrollArea, null, content));
 }
 /** Mobile shell: a bottom sheet built on the BottomSheet/Drawer primitives. */
-const DialogBottomSheet = Object.assign(DialogBottomSheetRoot, {
-    Trigger: DialogBottomSheetTrigger,
-    Content: DialogBottomSheetContent,
-    Header: SharedDialogHeader,
-    Title: DialogBottomSheetTitle,
-    Close: DialogBottomSheetClose,
-    Body: DialogBottomSheetBody,
-    Footer: SharedDialogFooter,
-    ScrollArea: DialogBottomSheetScrollArea,
-});
+DialogBottomSheet.Trigger = DialogBottomSheetTrigger;
+DialogBottomSheet.Content = DialogBottomSheetContent;
+DialogBottomSheet.Header = SharedDialogHeader;
+DialogBottomSheet.Title = DialogBottomSheetTitle;
+DialogBottomSheet.Close = DialogBottomSheetClose;
+DialogBottomSheet.Body = DialogBottomSheetBody;
+DialogBottomSheet.Footer = SharedDialogFooter;
+DialogBottomSheet.ScrollArea = DialogBottomSheetScrollArea;
 
-function DialogModalRoot(props) {
-    return React__default.createElement(DialogRoot$1, Object.assign({}, props));
+function DialogModal(props) {
+    return React__default.createElement(DialogRoot, Object.assign({}, props));
 }
 function DialogModalTrigger(_a) {
     var { children, render, handle, payload, className, style } = _a, rest = __rest(_a, ["children", "render", "handle", "payload", "className", "style"]);
@@ -236,17 +267,14 @@ function DialogModalBody(_a) {
     const content = (React__default.createElement(DialogDescription, { render: descriptionProps => (React__default.createElement("div", Object.assign({}, rest, descriptionProps, { className: classnames(styles.body, { [styles.fullBleed]: fullBleed }, className), style: style }), children)) }));
     return insideScrollArea ? (content) : (React__default.createElement(DialogScrollArea$1, null, content));
 }
-const DialogModal = Object.assign(DialogModalRoot, {
-    Trigger: DialogModalTrigger,
-    Content: DialogModalContent,
-    Header: SharedDialogHeader,
-    Title: DialogModalTitle,
-    Close: DialogModalClose,
-    Body: DialogModalBody,
-    Footer: SharedDialogFooter,
-    // The modal keeps the plain native-scrollbar scroll region.
-    ScrollArea: DialogScrollArea$1,
-});
+DialogModal.Trigger = DialogModalTrigger;
+DialogModal.Content = DialogModalContent;
+DialogModal.Header = SharedDialogHeader;
+DialogModal.Title = DialogModalTitle;
+DialogModal.Close = DialogModalClose;
+DialogModal.Body = DialogModalBody;
+DialogModal.Footer = SharedDialogFooter;
+DialogModal.ScrollArea = DialogScrollArea$1;
 
 /**
  * Creates a handle that opens/closes a `Dialog` from detached triggers (e.g. an
@@ -271,7 +299,7 @@ function useDialogShell() {
  * desktop, a bottom sheet on mobile. Compose it with `Dialog.Trigger`,
  * `Dialog.Content`, and the layout parts.
  */
-function DialogRoot(_a) {
+function Dialog(_a) {
     var { onRequestClose, size = "base", type = "dialog", finalFocus, children, onOpenChange } = _a, rest = __rest(_a, ["onRequestClose", "size", "type", "finalFocus", "children", "onOpenChange"]);
     function handleOpenChange(nextOpen, eventDetails) {
         if (!nextOpen) {
@@ -337,7 +365,6 @@ function DialogScrollArea(props) {
     const Shell = useDialogShell();
     return React__default.createElement(Shell.ScrollArea, Object.assign({}, props));
 }
-const Dialog = DialogRoot;
 Dialog.Trigger = DialogTrigger;
 Dialog.Content = DialogContent;
 Dialog.Header = DialogHeader;

package/dist/docs/AtlantisThemeContext/AtlantisThemeContext.md

@@ -116,6 +116,46 @@ function ThemedComponent() {
 }
 ```
 
+### Cross-tab theme sync (Web Only)
+
+The provider can keep the theme in sync across a user's open browser tabs. This
+is opt-in: pass the `localStorage` key your app writes to as the `storageKey`
+prop. The provider then listens for
+[`storage` events](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event)
+on that key and applies theme changes from other tabs. The `storage` event fires
+only in tabs *other* than the one that wrote the value, so there's no feedback
+loop.
+
+**Your app is responsible for writing to `localStorage`** when the theme changes
+— Atlantis only handles the listen-and-react side.
+
+```tsx
+<AtlantisThemeContextProvider storageKey="my_app_theme">
+  <ThemedComponent />
+</AtlantisThemeContextProvider>
+```
+
+```tsx
+// Theme toggle — write to the same key after calling updateTheme
+import { updateTheme } from "@jobber/components/AtlantisThemeContext";
+
+function toggleTheme(newTheme: "light" | "dark") {
+  updateTheme(newTheme); // updates all providers in this tab immediately
+
+  try {
+    localStorage.setItem("my_app_theme", newTheme); // signals other tabs
+  } catch {
+    // localStorage unavailable (e.g. private mode) — degrades gracefully
+  }
+}
+```
+
+Omit `storageKey` and no `storage` listener is added, keeping the previous
+within-tab-only behavior. Multiple dynamic providers on the same page all share
+the same internal store, so a single provider with a `storageKey` is enough — a
+cross-tab signal updates every dynamic provider at once. Providers mounted with
+`dangerouslyOverrideTheme` are unaffected.
+
 ### Forcing a theme for an AtlantisThemeContextProvider
 
 In some scenarios you may want to force a theme for specific components
@@ -255,3 +295,4 @@ Key features:
 | `children` | `ReactNode` | Yes | — | The children to render. |
 | `dangerouslyOverrideTheme` | `Theme` | No | — | Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain... |
 | `dangerouslyOverrideTokens` | `OverrideTokens` | No | — | Overrides existing design tokens with custom values. Can also supply custom tokens which will be accessible via useAt... |
+| `storageKey` | `string` | No | — | The `localStorage` key your app writes to when toggling the theme (e.g. `"jobber_theme"`). When set, the provider lis... |

package/dist/docs/DataTable/DataTable.md

@@ -33,10 +33,6 @@ numerical data (and their headers) round to the same decimal point, and are
 right-aligned. This makes it much easier for the reader to quickly parse large
 distinctions in dollar amounts, inventory counts, and other key business data.
 
-If you have a small list of information with a 1:1 label-to-data relationship
-(for example, the issued and due dates on an invoice), consider using
-[DescriptionList](../DescriptionList/DescriptionList.md).
-
 **Note**: The atomic DataTable components are the path forward and should be
 considered prior to using the [DataList](../DataList/DataList.md) and
 [Table](../Table/Table.md) components.