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

package/ProgressIndicator.d.ts

@@ -0,0 +1 @@
+export * from "./dist/ProgressIndicator";

package/{DescriptionList.js → ProgressIndicator.js}

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true,
 });
 
-var DescriptionList = require("./dist/DescriptionList");
+var ProgressIndicator = require("./dist/ProgressIndicator");
 
-Object.keys(DescriptionList).forEach(function(key) {
+Object.keys(ProgressIndicator).forEach(function(key) {
   if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return DescriptionList[key];
+      return ProgressIndicator[key];
     },
   });
 });

package/dist/AtlantisThemeContext/AtlantisThemeContext.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import type { AtlantisThemeContextProviderProps, AtlantisThemeContextValue } from "./types";
 export declare const atlantisThemeContextDefaultValues: AtlantisThemeContextValue;
-export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, }: AtlantisThemeContextProviderProps): React.JSX.Element;
+export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, storageKey, }: AtlantisThemeContextProviderProps): React.JSX.Element;
 export declare function useAtlantisTheme(): AtlantisThemeContextValue;

package/dist/AtlantisThemeContext/index.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var AtlantisThemeContext = require('../AtlantisThemeContext-cjs.js');
-var updateTheme = require('../updateTheme-cjs.js');
 require('@jobber/design');
 require('react');
 require('../_commonjsHelpers-cjs.js');
@@ -19,5 +18,5 @@ require('../_setToString-cjs.js');
 exports.AtlantisThemeContextProvider = AtlantisThemeContext.AtlantisThemeContextProvider;
 exports.THEME_CHANGE_EVENT = AtlantisThemeContext.THEME_CHANGE_EVENT;
 exports.atlantisThemeContextDefaultValues = AtlantisThemeContext.atlantisThemeContextDefaultValues;
+exports.updateTheme = AtlantisThemeContext.updateTheme;
 exports.useAtlantisTheme = AtlantisThemeContext.useAtlantisTheme;
-exports.updateTheme = updateTheme.updateTheme;

package/dist/AtlantisThemeContext/index.mjs

@@ -1,5 +1,4 @@
-export { A as AtlantisThemeContextProvider, T as THEME_CHANGE_EVENT, a as atlantisThemeContextDefaultValues, u as useAtlantisTheme } from '../AtlantisThemeContext-es.js';
-export { u as updateTheme } from '../updateTheme-es.js';
+export { A as AtlantisThemeContextProvider, T as THEME_CHANGE_EVENT, a as atlantisThemeContextDefaultValues, b as updateTheme, u as useAtlantisTheme } from '../AtlantisThemeContext-es.js';
 import '@jobber/design';
 import 'react';
 import '../_commonjsHelpers-es.js';

package/dist/AtlantisThemeContext/themeStore.d.ts

@@ -0,0 +1,11 @@
+import type { Theme } from "./types";
+/**
+ * `useSyncExternalStore` source for the theme. `data-theme` on the document
+ * element is the source of truth: `updateTheme` writes it and dispatches
+ * `THEME_CHANGE_EVENT`, which this store subscribes to.
+ */
+export declare const themeStore: {
+    readonly subscribe: (onStoreChange: () => void) => () => void;
+    readonly getSnapshot: () => Theme;
+    readonly getServerSnapshot: () => Theme;
+};

package/dist/AtlantisThemeContext/types.d.ts

@@ -32,6 +32,20 @@ export interface AtlantisThemeContextProviderProps extends PropsWithChildren {
      * **Important**: you should provide a constant or at least a memoized value for performance reasons.
      */
     readonly dangerouslyOverrideTokens?: OverrideTokens;
+    /**
+     * The `localStorage` key your app writes to when toggling the theme (e.g.
+     * `"jobber_theme"`). When set, the provider listens for `window` `storage`
+     * events on this key and applies theme changes signalled by other browser
+     * tabs. Writing to `localStorage` remains the app's responsibility; Atlantis
+     * only handles the listen-and-react side.
+     *
+     * Cross-tab sync is opt-in: omit this prop and no `storage` listener is added,
+     * preserving the previous within-tab-only behavior.
+     *
+     * Has no effect when `dangerouslyOverrideTheme` is set, since that provider
+     * is intentionally isolated from the shared theme store.
+     */
+    readonly storageKey?: string;
 }
 export type OverrideTokens = {
     [K in keyof typeof tokens]?: (typeof tokens)[K];

package/dist/AtlantisThemeContext/updateTheme.d.ts

@@ -2,6 +2,6 @@ import type { Theme } from "./types";
 /**
  * Toggle the theme of the application. If subscribed, the tokens will be updated accordingly.
  * Will add data-theme="<newTheme>" to the <html> element.
- * Will dispatch a custom event "atlantis.toggle-theme" with the new theme for other providers to subscribe to.
+ * Will dispatch a custom event "atlantis.toggle-theme" that theme providers subscribe to.
  */
 export declare function updateTheme(theme: Theme): void;

package/dist/AtlantisThemeContext-cjs.js

@@ -340,9 +340,45 @@ var merge_1 = merge;
 
 var merge$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(merge_1);
 
+var styles = {"staticThemeProviderWrapper":"P6HrDSaI0Ac-","overrideTokensWrapper":"j-NMCOBL3-E-","spinning":"iq03qkKnXBA-"};
+
 const THEME_CHANGE_EVENT = "atlantis.toggle-theme";
 
-var styles = {"staticThemeProviderWrapper":"P6HrDSaI0Ac-","overrideTokensWrapper":"j-NMCOBL3-E-","spinning":"iq03qkKnXBA-"};
+/**
+ * `useSyncExternalStore` source for the theme. `data-theme` on the document
+ * element is the source of truth: `updateTheme` writes it and dispatches
+ * `THEME_CHANGE_EVENT`, which this store subscribes to.
+ */
+const themeStore = {
+    subscribe(onStoreChange) {
+        globalThis.window.addEventListener(THEME_CHANGE_EVENT, onStoreChange);
+        return () => {
+            globalThis.window.removeEventListener(THEME_CHANGE_EVENT, onStoreChange);
+        };
+    },
+    getSnapshot() {
+        var _a, _b, _c, _d;
+        return ((_d = (_c = (_b = (_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.documentElement) === null || _b === void 0 ? void 0 : _b.dataset) === null || _c === void 0 ? void 0 : _c.theme) !== null && _d !== void 0 ? _d : "light");
+    },
+    getServerSnapshot() {
+        return "light";
+    },
+};
+
+/**
+ * Toggle the theme of the application. If subscribed, the tokens will be updated accordingly.
+ * Will add data-theme="<newTheme>" to the <html> element.
+ * Will dispatch a custom event "atlantis.toggle-theme" that theme providers subscribe to.
+ */
+function updateTheme(theme) {
+    if (!globalThis.window)
+        return;
+    globalThis.document.documentElement.setAttribute("data-theme", theme);
+    const event = new CustomEvent(THEME_CHANGE_EVENT, {
+        detail: { theme },
+    });
+    globalThis.window.dispatchEvent(event);
+}
 
 const atlantisThemeContextDefaultValues = {
     theme: "light",
@@ -350,31 +386,35 @@ const atlantisThemeContextDefaultValues = {
 };
 const actualDarkTokens = merge$1({}, design.tokens, design.darkTokens);
 const AtlantisThemeContext = React.createContext(atlantisThemeContextDefaultValues);
-function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, }) {
+function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, storageKey, }) {
     if (dangerouslyOverrideTheme) {
         return (React.createElement(InternalStaticThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens, dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
     }
-    return (React.createElement(InternalDynamicThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens }, children));
+    return (React.createElement(InternalDynamicThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens, storageKey: storageKey }, children));
 }
-function InternalDynamicThemeProvider({ children, dangerouslyOverrideTokens, }) {
-    var _a;
-    const initialTheme = (_a = globalThis.document.documentElement.dataset.theme) !== null && _a !== void 0 ? _a : "light";
-    const [internalTheme, setInternalTheme] = React.useState(initialTheme);
-    const { finalTokens, cssVariableOverrides } = useTokens(internalTheme, dangerouslyOverrideTokens);
-    const handleThemeChangeEvent = React.useCallback((event) => {
-        const newTheme = event.detail.theme;
-        setInternalTheme(newTheme);
-    }, []);
+function InternalDynamicThemeProvider({ children, dangerouslyOverrideTokens, storageKey, }) {
+    const theme = React.useSyncExternalStore(themeStore.subscribe, themeStore.getSnapshot, themeStore.getServerSnapshot);
+    const { finalTokens, cssVariableOverrides } = useTokens(theme, dangerouslyOverrideTokens);
     React.useEffect(() => {
-        if (!globalThis.window)
+        if (!storageKey || !globalThis.window)
             return;
-        globalThis.window.addEventListener(THEME_CHANGE_EVENT, handleThemeChangeEvent);
+        function handleStorage(event) {
+            if (event.key !== storageKey)
+                return;
+            const next = event.newValue;
+            if (next !== "light" && next !== "dark")
+                return;
+            if (next === themeStore.getSnapshot())
+                return;
+            updateTheme(next);
+        }
+        globalThis.window.addEventListener("storage", handleStorage);
         return () => {
-            globalThis.window.removeEventListener(THEME_CHANGE_EVENT, handleThemeChangeEvent);
+            globalThis.window.removeEventListener("storage", handleStorage);
         };
-    }, [handleThemeChangeEvent]);
+    }, [storageKey]);
     return (React.createElement(AtlantisThemeContext.Provider, { value: {
-            theme: internalTheme,
+            theme: theme,
             tokens: finalTokens,
             overrideTokens: dangerouslyOverrideTokens,
         } }, cssVariableOverrides ? (React.createElement("div", { className: styles.overrideTokensWrapper, style: cssVariableOverrides }, children)) : (children)));
@@ -419,4 +459,5 @@ function useTokens(theme, overrideTokens) {
 exports.AtlantisThemeContextProvider = AtlantisThemeContextProvider;
 exports.THEME_CHANGE_EVENT = THEME_CHANGE_EVENT;
 exports.atlantisThemeContextDefaultValues = atlantisThemeContextDefaultValues;
+exports.updateTheme = updateTheme;
 exports.useAtlantisTheme = useAtlantisTheme;

package/dist/AtlantisThemeContext-es.js

@@ -1,11 +1,11 @@
 import { tokens, darkTokens } from '@jobber/design';
-import React__default, { createContext, useState, useCallback, useEffect, useContext, useMemo } from 'react';
+import React__default, { createContext, useSyncExternalStore, useEffect, useContext, useMemo } from 'react';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
 import { e as eq_1, c as _Stack } from './identity-es.js';
 import { _ as _baseAssignValue } from './_baseAssignValue-es.js';
 import { _ as _baseFor } from './_baseFor-es.js';
 import { _ as _copyObject, k as keysIn_1, a as _cloneBufferExports, b as _cloneTypedArray, c as _copyArray, d as _initCloneObject, i as isPlainObject_1 } from './keysIn-es.js';
-import { b as isArrayLike_1, i as isArguments_1, a as isArray_1, c as isBufferExports, j as isFunction_1, d as isTypedArray_1 } from './isTypedArray-es.js';
+import { b as isArrayLike_1, i as isArguments_1, a as isArray_1, c as isBufferExports, k as isFunction_1, d as isTypedArray_1 } from './isTypedArray-es.js';
 import { i as isObjectLike_1, a as isObject_1 } from './isObjectLike-es.js';
 import { _ as _baseRest, a as _isIterateeCall } from './_isIterateeCall-es.js';
 
@@ -338,9 +338,45 @@ var merge_1 = merge;
 
 var merge$1 = /*@__PURE__*/getDefaultExportFromCjs(merge_1);
 
+var styles = {"staticThemeProviderWrapper":"P6HrDSaI0Ac-","overrideTokensWrapper":"j-NMCOBL3-E-","spinning":"iq03qkKnXBA-"};
+
 const THEME_CHANGE_EVENT = "atlantis.toggle-theme";
 
-var styles = {"staticThemeProviderWrapper":"P6HrDSaI0Ac-","overrideTokensWrapper":"j-NMCOBL3-E-","spinning":"iq03qkKnXBA-"};
+/**
+ * `useSyncExternalStore` source for the theme. `data-theme` on the document
+ * element is the source of truth: `updateTheme` writes it and dispatches
+ * `THEME_CHANGE_EVENT`, which this store subscribes to.
+ */
+const themeStore = {
+    subscribe(onStoreChange) {
+        globalThis.window.addEventListener(THEME_CHANGE_EVENT, onStoreChange);
+        return () => {
+            globalThis.window.removeEventListener(THEME_CHANGE_EVENT, onStoreChange);
+        };
+    },
+    getSnapshot() {
+        var _a, _b, _c, _d;
+        return ((_d = (_c = (_b = (_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.documentElement) === null || _b === void 0 ? void 0 : _b.dataset) === null || _c === void 0 ? void 0 : _c.theme) !== null && _d !== void 0 ? _d : "light");
+    },
+    getServerSnapshot() {
+        return "light";
+    },
+};
+
+/**
+ * Toggle the theme of the application. If subscribed, the tokens will be updated accordingly.
+ * Will add data-theme="<newTheme>" to the <html> element.
+ * Will dispatch a custom event "atlantis.toggle-theme" that theme providers subscribe to.
+ */
+function updateTheme(theme) {
+    if (!globalThis.window)
+        return;
+    globalThis.document.documentElement.setAttribute("data-theme", theme);
+    const event = new CustomEvent(THEME_CHANGE_EVENT, {
+        detail: { theme },
+    });
+    globalThis.window.dispatchEvent(event);
+}
 
 const atlantisThemeContextDefaultValues = {
     theme: "light",
@@ -348,31 +384,35 @@ const atlantisThemeContextDefaultValues = {
 };
 const actualDarkTokens = merge$1({}, tokens, darkTokens);
 const AtlantisThemeContext = createContext(atlantisThemeContextDefaultValues);
-function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, }) {
+function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, storageKey, }) {
     if (dangerouslyOverrideTheme) {
         return (React__default.createElement(InternalStaticThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens, dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
     }
-    return (React__default.createElement(InternalDynamicThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens }, children));
+    return (React__default.createElement(InternalDynamicThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens, storageKey: storageKey }, children));
 }
-function InternalDynamicThemeProvider({ children, dangerouslyOverrideTokens, }) {
-    var _a;
-    const initialTheme = (_a = globalThis.document.documentElement.dataset.theme) !== null && _a !== void 0 ? _a : "light";
-    const [internalTheme, setInternalTheme] = useState(initialTheme);
-    const { finalTokens, cssVariableOverrides } = useTokens(internalTheme, dangerouslyOverrideTokens);
-    const handleThemeChangeEvent = useCallback((event) => {
-        const newTheme = event.detail.theme;
-        setInternalTheme(newTheme);
-    }, []);
+function InternalDynamicThemeProvider({ children, dangerouslyOverrideTokens, storageKey, }) {
+    const theme = useSyncExternalStore(themeStore.subscribe, themeStore.getSnapshot, themeStore.getServerSnapshot);
+    const { finalTokens, cssVariableOverrides } = useTokens(theme, dangerouslyOverrideTokens);
     useEffect(() => {
-        if (!globalThis.window)
+        if (!storageKey || !globalThis.window)
             return;
-        globalThis.window.addEventListener(THEME_CHANGE_EVENT, handleThemeChangeEvent);
+        function handleStorage(event) {
+            if (event.key !== storageKey)
+                return;
+            const next = event.newValue;
+            if (next !== "light" && next !== "dark")
+                return;
+            if (next === themeStore.getSnapshot())
+                return;
+            updateTheme(next);
+        }
+        globalThis.window.addEventListener("storage", handleStorage);
         return () => {
-            globalThis.window.removeEventListener(THEME_CHANGE_EVENT, handleThemeChangeEvent);
+            globalThis.window.removeEventListener("storage", handleStorage);
         };
-    }, [handleThemeChangeEvent]);
+    }, [storageKey]);
     return (React__default.createElement(AtlantisThemeContext.Provider, { value: {
-            theme: internalTheme,
+            theme: theme,
             tokens: finalTokens,
             overrideTokens: dangerouslyOverrideTokens,
         } }, cssVariableOverrides ? (React__default.createElement("div", { className: styles.overrideTokensWrapper, style: cssVariableOverrides }, children)) : (children)));
@@ -414,4 +454,4 @@ function useTokens(theme, overrideTokens) {
     };
 }
 
-export { AtlantisThemeContextProvider as A, THEME_CHANGE_EVENT as T, atlantisThemeContextDefaultValues as a, useAtlantisTheme as u };
+export { AtlantisThemeContextProvider as A, THEME_CHANGE_EVENT as T, atlantisThemeContextDefaultValues as a, updateTheme as b, useAtlantisTheme as u };

package/dist/Avatar-cjs.js

@@ -41,6 +41,7 @@ function deconstructCssCustomProperty(color) {
         .trim();
 }
 
+const MAX_VISIBLE_INITIALS = 3;
 function Avatar({ imageUrl, name, initials, size = "base", color, UNSAFE_className = {}, UNSAFE_style = {}, }) {
     const style = Object.assign({ backgroundColor: color, borderColor: color }, UNSAFE_style.container);
     if (imageUrl) {
@@ -72,9 +73,9 @@ function Initials({ initials, iconColor = "textReverse", iconSize = "base", UNSA
         return (React.createElement(Icon.Icon, { name: "person", color: iconColor, size: iconSize, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.fallbackIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.fallbackIcon }));
     }
     const className = classnames(styles.initials, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.initials, {
-        [styles.smallInitials]: initials.length > 2,
+        [styles.smallInitials]: initials.length >= MAX_VISIBLE_INITIALS,
     });
-    return (React.createElement("span", { className: className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.initials }, initials.substr(0, 3)));
+    return (React.createElement("span", { className: className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.initials }, initials.slice(0, MAX_VISIBLE_INITIALS)));
 }
 
 exports.Avatar = Avatar;

package/dist/Avatar-es.js

@@ -39,6 +39,7 @@ function deconstructCssCustomProperty(color) {
         .trim();
 }
 
+const MAX_VISIBLE_INITIALS = 3;
 function Avatar({ imageUrl, name, initials, size = "base", color, UNSAFE_className = {}, UNSAFE_style = {}, }) {
     const style = Object.assign({ backgroundColor: color, borderColor: color }, UNSAFE_style.container);
     if (imageUrl) {
@@ -70,9 +71,9 @@ function Initials({ initials, iconColor = "textReverse", iconSize = "base", UNSA
         return (React__default.createElement(Icon, { name: "person", color: iconColor, size: iconSize, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.fallbackIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.fallbackIcon }));
     }
     const className = classnames(styles.initials, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.initials, {
-        [styles.smallInitials]: initials.length > 2,
+        [styles.smallInitials]: initials.length >= MAX_VISIBLE_INITIALS,
     });
-    return (React__default.createElement("span", { className: className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.initials }, initials.substr(0, 3)));
+    return (React__default.createElement("span", { className: className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.initials }, initials.slice(0, MAX_VISIBLE_INITIALS)));
 }
 
 export { Avatar as A };

package/dist/BottomSheet-cjs.js

@@ -7,7 +7,7 @@ var buttonRenderAdapter = require('./buttonRenderAdapter-cjs.js');
 var Button = require('./Button-cjs.js');
 var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
 
-var styles = {"backdrop":"Qf3IFhKJwQ0-","popup":"_868PDAA3U2M-","content":"eKuxReHyju8-","scrollRoot":"V--tRnN-P0I-","scrollArea":"_1I0eaFciaWo-","bottomFade":"BYEzqcZUGls-","spinning":"IJxq5fm5qdw-"};
+var styles = {"backdrop":"Qf3IFhKJwQ0-","viewport":"U069n8h0urk-","popup":"_868PDAA3U2M-","content":"eKuxReHyju8-","scrollRoot":"V--tRnN-P0I-","scrollArea":"_1I0eaFciaWo-","bottomFade":"BYEzqcZUGls-","spinning":"IJxq5fm5qdw-"};
 
 // `resolveBottomSheetTriggerRender` so an Atlantis `<Button>` works as a trigger
 // via `children` or `render`. Raw text children are wrapped in a default Button.
@@ -64,11 +64,12 @@ function BottomSheetPopup(_a) {
     const renderScrollArea = React.useContext(BottomSheetScrollAreaContext);
     return (React.createElement(ScrollAreaViewport.DrawerPortal, null,
         React.createElement(ScrollAreaViewport.DrawerBackdrop, { forceRender: true, className: styles.backdrop, "data-testid": "ATL-BottomSheet-Backdrop" }),
-        React.createElement(ScrollAreaViewport.DrawerPopup, Object.assign({}, popupProps, { ref: ref, className: classnames(styles.popup, className), initialFocus: initialFocus, finalFocus: finalFocus }), !renderScrollArea ? (
-        // The consumer manages its own scroll region (e.g. Dialog pins a
-        // header/footer outside a single scroll area) — often by composing
-        // `BottomSheet.ScrollArea` itself.
-        children) : (React.createElement(BottomSheetScrollArea, null, children)))));
+        React.createElement(ScrollAreaViewport.DrawerViewport, { className: styles.viewport, "data-testid": "ATL-BottomSheet-Viewport" },
+            React.createElement(ScrollAreaViewport.DrawerPopup, Object.assign({}, popupProps, { ref: ref, className: classnames(styles.popup, className), initialFocus: initialFocus, finalFocus: finalFocus }), !renderScrollArea ? (
+            // The consumer manages its own scroll region (e.g. Dialog pins a
+            // header/footer outside a single scroll area) — often by composing
+            // `BottomSheet.ScrollArea` itself.
+            children) : (React.createElement(BottomSheetScrollArea, null, children))))));
 }
 /**
  * The sheet's scroll region: a styled BaseUI `ScrollArea` (native scrollbar) with
@@ -78,7 +79,7 @@ function BottomSheetPopup(_a) {
  * directly.
  */
 function BottomSheetScrollArea({ children, className, style, }) {
-    return (React.createElement(ScrollAreaViewport.ScrollAreaRoot, { className: classnames(styles.scrollRoot, className), style: style },
+    return (React.createElement(ScrollAreaViewport.ScrollAreaRoot, { className: classnames(styles.scrollRoot, className), style: style, "data-testid": "ATL-BottomSheet-ScrollRegion" },
         React.createElement(ScrollAreaViewport.ScrollAreaViewport, { className: styles.scrollArea, "data-testid": "ATL-BottomSheet-ScrollArea", 
             // BaseUI sets overflow: scroll in the style prop by default. This is to override that because adding it to the className doesn't work.
             style: { overflow: "auto" } }, children),

package/dist/BottomSheet-es.js

@@ -3,9 +3,9 @@ import React__default from 'react';
 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 { D as DrawerTrigger, a as DrawerRoot, b as DrawerPortal, c as DrawerBackdrop, d as DrawerPopup, S as ScrollAreaRoot, e as ScrollAreaViewport, f as DrawerContent } from './ScrollAreaViewport-es.js';
+import { D as DrawerTrigger, a as DrawerRoot, b as DrawerPortal, c as DrawerBackdrop, d as DrawerViewport, e as DrawerPopup, S as ScrollAreaRoot, f as ScrollAreaViewport, g as DrawerContent } from './ScrollAreaViewport-es.js';
 
-var styles = {"backdrop":"Qf3IFhKJwQ0-","popup":"_868PDAA3U2M-","content":"eKuxReHyju8-","scrollRoot":"V--tRnN-P0I-","scrollArea":"_1I0eaFciaWo-","bottomFade":"BYEzqcZUGls-","spinning":"IJxq5fm5qdw-"};
+var styles = {"backdrop":"Qf3IFhKJwQ0-","viewport":"U069n8h0urk-","popup":"_868PDAA3U2M-","content":"eKuxReHyju8-","scrollRoot":"V--tRnN-P0I-","scrollArea":"_1I0eaFciaWo-","bottomFade":"BYEzqcZUGls-","spinning":"IJxq5fm5qdw-"};
 
 // `resolveBottomSheetTriggerRender` so an Atlantis `<Button>` works as a trigger
 // via `children` or `render`. Raw text children are wrapped in a default Button.
@@ -62,11 +62,12 @@ function BottomSheetPopup(_a) {
     const renderScrollArea = React__default.useContext(BottomSheetScrollAreaContext);
     return (React__default.createElement(DrawerPortal, null,
         React__default.createElement(DrawerBackdrop, { forceRender: true, className: styles.backdrop, "data-testid": "ATL-BottomSheet-Backdrop" }),
-        React__default.createElement(DrawerPopup, Object.assign({}, popupProps, { ref: ref, className: classnames(styles.popup, className), initialFocus: initialFocus, finalFocus: finalFocus }), !renderScrollArea ? (
-        // The consumer manages its own scroll region (e.g. Dialog pins a
-        // header/footer outside a single scroll area) — often by composing
-        // `BottomSheet.ScrollArea` itself.
-        children) : (React__default.createElement(BottomSheetScrollArea, null, children)))));
+        React__default.createElement(DrawerViewport, { className: styles.viewport, "data-testid": "ATL-BottomSheet-Viewport" },
+            React__default.createElement(DrawerPopup, Object.assign({}, popupProps, { ref: ref, className: classnames(styles.popup, className), initialFocus: initialFocus, finalFocus: finalFocus }), !renderScrollArea ? (
+            // The consumer manages its own scroll region (e.g. Dialog pins a
+            // header/footer outside a single scroll area) — often by composing
+            // `BottomSheet.ScrollArea` itself.
+            children) : (React__default.createElement(BottomSheetScrollArea, null, children))))));
 }
 /**
  * The sheet's scroll region: a styled BaseUI `ScrollArea` (native scrollbar) with
@@ -76,7 +77,7 @@ function BottomSheetPopup(_a) {
  * directly.
  */
 function BottomSheetScrollArea({ children, className, style, }) {
-    return (React__default.createElement(ScrollAreaRoot, { className: classnames(styles.scrollRoot, className), style: style },
+    return (React__default.createElement(ScrollAreaRoot, { className: classnames(styles.scrollRoot, className), style: style, "data-testid": "ATL-BottomSheet-ScrollRegion" },
         React__default.createElement(ScrollAreaViewport, { className: styles.scrollArea, "data-testid": "ATL-BottomSheet-ScrollArea", 
             // BaseUI sets overflow: scroll in the style prop by default. This is to override that because adding it to the className doesn't work.
             style: { overflow: "auto" } }, children),

package/dist/ComboboxChipRemove-es.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { z as useControlled, b as useStableCallback, m as useValueAsRef, k as useTransitionStatus, a as useIsoLayoutEffect, J as createGenericEventDetails, G as inputClear, F as inputChange, d as createChangeEventDetails, v as focusOut, Q as outsidePress, g as getTarget, V as itemPress, f as useOpenChangeComplete, O as useValueChanged, C as none, a5 as inputPress, q as contains, D as visuallyHiddenInput, E as visuallyHidden, h as useTimeout, c as useButton, o as ownerDocument, s as stopEvent, r as listNavigation, e as closePress, u as useBaseUiId, W as android, a0 as escapeKey, a6 as clearPress, t as transitionStatusMapping, A as ios, S as SafeReact, j as error, a7 as chipRemovePress } from './useButton-es.js';
+import { z as useControlled, b as useStableCallback, m as useValueAsRef, k as useTransitionStatus, a as useIsoLayoutEffect, J as createGenericEventDetails, G as inputClear, F as inputChange, d as createChangeEventDetails, v as focusOut, Q as outsidePress, g as getTarget, V as itemPress, f as useOpenChangeComplete, O as useValueChanged, C as none, a7 as inputPress, q as contains, D as visuallyHiddenInput, E as visuallyHidden, h as useTimeout, c as useButton, o as ownerDocument, s as stopEvent, r as listNavigation, e as closePress, u as useBaseUiId, a3 as android, _ as escapeKey, a8 as clearPress, t as transitionStatusMapping, A as ios, S as SafeReact, j as error, a9 as chipRemovePress } from './useButton-es.js';
 import { f as formatErrorMessage, b as EMPTY_ARRAY, a as useRefWithInit, E as EMPTY_OBJECT, N as NOOP, m as mergeProps, c as useMergedRefs, u as useRenderElement } from './useRenderElement-es.js';
 import { a as useFormContext, b as useFieldRootContext, c as useLabelableId, d as useRegisterFieldControl, f as fieldValidityMapping, u as useLabelableContext, F as FieldRootContext, e as DEFAULT_FIELD_ROOT_CONTEXT, g as DEFAULT_FIELD_STATE_ATTRIBUTES } from './useLabelableId-es.js';
 import { u as useFloatingRootContext, a as useListNavigation, b as useTypeahead, g as getPseudoElementBounds, C as CompositeList, d as useAnchorPositioning, c as useAnchoredPopupScrollLock, e as usePositioner, f as getDisabledMountTransitionStyles, h as useCompositeListItem, I as IndexGuessBehavior } from './useCompositeListItem-es.js';
 import { h as hasNullItemLabel, c as compareItemEquality, a as stringifyAsLabel, k as isGroupedItems, s as stringifyAsValue, i as selectedValueIncludes, j as removeItem, f as findItemIndex, d as defaultItemEquality, b as areArraysEqual, r as resolveAriaLabelledBy, l as getDefaultLabelId, e as resolveMultipleLabels, g as resolveSelectedLabel } from './resolveAriaLabelledBy-es.js';
-import { ak as getGridNavigatedIndex, e as isIndexOutOfListBounds, t as createSelector, r as useDirection, S as Store, w as useStore, v as useOpenInteractionType, x as useClick, y as useDismiss, F as FOCUSABLE_POPUP_PROPS, z as useOnFirstRender, B as pressableTriggerOpenStateMapping, al as gecko, a0 as isInteractiveElement, W as triggerOpenStateMapping, E as FloatingPortal, p as popupStateMapping, I as InternalBackdrop, G as inertValue, H as DROPDOWN_COLLISION_AVOIDANCE, a as FloatingFocusManager } from './useScrollLock-es.js';
+import { al as getGridNavigatedIndex, e as isIndexOutOfListBounds, t as createSelector, r as useDirection, S as Store, w as useStore, v as useOpenInteractionType, x as useClick, y as useDismiss, F as FOCUSABLE_POPUP_PROPS, z as useOnFirstRender, B as pressableTriggerOpenStateMapping, am as gecko, Q as isInteractiveElement, af as triggerOpenStateMapping, E as FloatingPortal, p as popupStateMapping, I as InternalBackdrop, G as inertValue, H as DROPDOWN_COLLISION_AVOIDANCE, a as FloatingFocusManager } from './useScrollLock-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import { s as stringifyLocale, u as useLabel } from './useLabel-es.js';

package/dist/DatePicker-es.js

@@ -13,7 +13,7 @@ import { c as _Stack } from './identity-es.js';
 import { _ as _copyObject, k as keysIn_1, e as _getPrototype, f as _cloneArrayBuffer, b as _cloneTypedArray, a as _cloneBufferExports, c as _copyArray, d as _initCloneObject, g as _assignValue, i as isPlainObject_1 } from './keysIn-es.js';
 import { a as _getTag } from './_getTag-es.js';
 import { b as _Symbol, i as isObjectLike_1, a as isObject_1 } from './isObjectLike-es.js';
-import { m as _nodeUtilExports, k as _baseUnary, c as isBufferExports, a as isArray_1 } from './isTypedArray-es.js';
+import { m as _nodeUtilExports, j as _baseUnary, c as isBufferExports, a as isArray_1 } from './isTypedArray-es.js';
 import { _ as _baseFlatten } from './_baseFlatten-es.js';
 import { _ as _overRest, a as _setToString } from './_setToString-es.js';
 import { u as useAtlantisContext } from './AtlantisContext-es.js';

package/dist/Dialog/Dialog.d.ts

@@ -1,3 +1,47 @@
-import type { DialogComponent } from "./Dialog.types";
-declare const Dialog: DialogComponent;
-export { Dialog };
+import React from "react";
+import type { DialogBodyProps, DialogCloseProps, DialogContentProps, DialogFooterProps, DialogHandle, DialogHeaderProps, DialogRootProps, DialogScrollAreaProps, DialogTitleProps, DialogTriggerProps } from "./Dialog.types";
+import { DialogActions } from "./dialogComposableShared";
+/**
+ * The Dialog root is a centered modal on
+ * desktop, a bottom sheet on mobile. Compose it with `Dialog.Trigger`,
+ * `Dialog.Content`, and the layout parts.
+ */
+export declare function Dialog<Payload = unknown>({ onRequestClose, size, type, finalFocus, children, onOpenChange, ...rest }: DialogRootProps<Payload>): React.JSX.Element;
+export declare namespace Dialog {
+    var Trigger: typeof DialogTrigger;
+    var Content: typeof DialogContent;
+    var Header: typeof DialogHeader;
+    var Title: typeof DialogTitle;
+    var Close: typeof DialogClose;
+    var Body: typeof DialogBody;
+    var Footer: typeof DialogFooter;
+    var Actions: typeof DialogActions;
+    var ScrollArea: typeof DialogScrollArea;
+    var createHandle: <Payload = unknown>() => DialogHandle<Payload>;
+}
+/**
+ * Opens the dialog. Accepts an Atlantis `<Button>` (via `children` or `render`)
+ * or links a detached `Dialog` through a matching `handle`.
+ */
+declare function DialogTrigger<Payload = unknown>(props: DialogTriggerProps<Payload>): React.JSX.Element;
+/**
+ * The dialog popup surface. Holds the `Header`, `Body`, and `Footer`; renders as a
+ * centered modal on desktop and a bottom sheet on mobile.
+ */
+declare function DialogContent(props: DialogContentProps): React.JSX.Element;
+/** Layout-only header row — typically a `Dialog.Title` and a `Dialog.Close`. */
+declare function DialogHeader(props: DialogHeaderProps): React.JSX.Element;
+/** The dialog's accessible title; wired to `aria-labelledby`. */
+declare function DialogTitle(props: DialogTitleProps): React.JSX.Element;
+/** A dismiss button that closes the dialog. */
+declare function DialogClose(props: DialogCloseProps): React.JSX.Element;
+/** The dialog body; wired to `aria-describedby`. */
+declare function DialogBody(props: DialogBodyProps): React.JSX.Element;
+/** Footer region for actions or supporting content. */
+declare function DialogFooter(props: DialogFooterProps): React.JSX.Element;
+/**
+ * Advanced scroll region. Delegates to the shell: the modal uses a native
+ * scrollbar; the sheet uses the BottomSheet primitive's scroll area (with fade).
+ */
+declare function DialogScrollArea(props: DialogScrollAreaProps): React.JSX.Element;
+export {};

package/dist/Dialog/Dialog.types.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, ComponentPropsWithRef, ComponentPropsWithoutRef, FunctionComponent, ReactElement, ReactNode } from "react";
+import type { CSSProperties, ComponentPropsWithRef, ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 import type { Dialog as BaseDialog } from "../unstyledPrimitives";
 import type { ButtonProps } from "../Button";
 type BaseUIPropsToExclude = "render" | "className" | "style" | "ref" | "children";
@@ -162,20 +162,6 @@ export interface DialogContextValue {
 export interface DialogProviderProps extends DialogContextValue {
     readonly children: ReactNode;
 }
-/** The assembled `Dialog` component: a root with the parts attached. */
-export interface DialogComponent {
-    <Payload = unknown>(props: DialogRootProps<Payload>): ReactElement;
-    Trigger: <Payload = unknown>(props: DialogTriggerProps<Payload>) => ReactElement;
-    Content: FunctionComponent<DialogContentProps>;
-    Header: FunctionComponent<DialogHeaderProps>;
-    Title: FunctionComponent<DialogTitleProps>;
-    Close: FunctionComponent<DialogCloseProps>;
-    Body: FunctionComponent<DialogBodyProps>;
-    Footer: FunctionComponent<DialogFooterProps>;
-    Actions: FunctionComponent<DialogActionsProps>;
-    ScrollArea: FunctionComponent<DialogScrollAreaProps>;
-    createHandle: <Payload = unknown>() => DialogHandle<Payload>;
-}
 export type DialogActionsAlign = "left" | "right" | "fullWidth";
 interface DialogActionsBaseProps extends DialogBaseProps, Omit<ComponentPropsWithoutRef<"div">, "className" | "style" | "children"> {
     /** Primary action (right). */

package/dist/Dialog/DialogBottomSheet.d.ts

@@ -1,9 +1,19 @@
 import React from "react";
 import type { DialogBodyProps, DialogCloseProps, DialogContentProps, DialogScrollAreaProps, DialogShellRootProps, DialogTitleProps, DialogTriggerProps } from "./Dialog.types";
 import { SharedDialogFooter, SharedDialogHeader } from "./dialogComposableShared";
-declare function DialogBottomSheetRoot(props: DialogShellRootProps): React.JSX.Element;
+export declare function DialogBottomSheet(props: DialogShellRootProps): React.JSX.Element;
+export declare namespace DialogBottomSheet {
+    var Trigger: typeof DialogBottomSheetTrigger;
+    var Content: typeof DialogBottomSheetContent;
+    var Header: typeof SharedDialogHeader;
+    var Title: typeof DialogBottomSheetTitle;
+    var Close: typeof DialogBottomSheetClose;
+    var Body: typeof DialogBottomSheetBody;
+    var Footer: typeof SharedDialogFooter;
+    var ScrollArea: typeof DialogBottomSheetScrollArea;
+}
 declare function DialogBottomSheetTrigger<Payload = unknown>(props: DialogTriggerProps<Payload>): React.JSX.Element;
-declare function DialogBottomSheetContent({ children, className, style, ...rest }: DialogContentProps): React.JSX.Element;
+declare function DialogBottomSheetContent({ children, className, style, render, ...rest }: DialogContentProps): React.JSX.Element;
 declare function DialogBottomSheetTitle({ children, ...rest }: DialogTitleProps): React.JSX.Element;
 declare function DialogBottomSheetClose({ children, render, ...rest }: DialogCloseProps): React.JSX.Element;
 /**
@@ -14,15 +24,4 @@ declare function DialogBottomSheetClose({ children, render, ...rest }: DialogClo
  */
 declare function DialogBottomSheetScrollArea({ children, className, style, }: DialogScrollAreaProps): React.JSX.Element;
 declare function DialogBottomSheetBody({ children, fullBleed, className, style, ...rest }: DialogBodyProps): React.JSX.Element;
-/** Mobile shell: a bottom sheet built on the BottomSheet/Drawer primitives. */
-export declare const DialogBottomSheet: typeof DialogBottomSheetRoot & {
-    Trigger: typeof DialogBottomSheetTrigger;
-    Content: typeof DialogBottomSheetContent;
-    Header: typeof SharedDialogHeader;
-    Title: typeof DialogBottomSheetTitle;
-    Close: typeof DialogBottomSheetClose;
-    Body: typeof DialogBottomSheetBody;
-    Footer: typeof SharedDialogFooter;
-    ScrollArea: typeof DialogBottomSheetScrollArea;
-};
 export {};

package/dist/Dialog/DialogModal.d.ts

@@ -1,20 +1,20 @@
 import React from "react";
 import type { DialogBodyProps, DialogCloseProps, DialogContentProps, DialogShellRootProps, DialogTitleProps, DialogTriggerProps } from "./Dialog.types";
 import { DialogScrollArea, SharedDialogFooter, SharedDialogHeader } from "./dialogComposableShared";
-declare function DialogModalRoot(props: DialogShellRootProps): React.JSX.Element;
+export declare function DialogModal(props: DialogShellRootProps): React.JSX.Element;
+export declare namespace DialogModal {
+    var Trigger: typeof DialogModalTrigger;
+    var Content: typeof DialogModalContent;
+    var Header: typeof SharedDialogHeader;
+    var Title: typeof DialogModalTitle;
+    var Close: typeof DialogModalClose;
+    var Body: typeof DialogModalBody;
+    var Footer: typeof SharedDialogFooter;
+    var ScrollArea: typeof DialogScrollArea;
+}
 declare function DialogModalTrigger<Payload = unknown>({ children, render, handle, payload, className, style, ...rest }: DialogTriggerProps<Payload>): React.JSX.Element;
 declare function DialogModalContent({ children, className, style, ...rest }: DialogContentProps): React.JSX.Element;
 declare function DialogModalTitle({ children, ...rest }: DialogTitleProps): React.JSX.Element;
 declare function DialogModalClose({ children, render, ...rest }: DialogCloseProps): React.JSX.Element;
 declare function DialogModalBody({ children, fullBleed, className, style, ...rest }: DialogBodyProps): React.JSX.Element;
-export declare const DialogModal: typeof DialogModalRoot & {
-    Trigger: typeof DialogModalTrigger;
-    Content: typeof DialogModalContent;
-    Header: typeof SharedDialogHeader;
-    Title: typeof DialogModalTitle;
-    Close: typeof DialogModalClose;
-    Body: typeof DialogModalBody;
-    Footer: typeof SharedDialogFooter;
-    ScrollArea: typeof DialogScrollArea;
-};
 export {};