@jobber/components 9.6.3-JOB-142550-a7d2ff6.7 → 9.7.0

package/dist/Combobox/Combobox.d.ts

@@ -5,6 +5,7 @@ import { ComboboxClearSelection, ComboboxSelectAll, ComboboxSelectedCount } from
 import { ComboboxAction, ComboboxCollection, ComboboxGroup, ComboboxGroupLabel, ComboboxItem, ComboboxList, ComboboxRow, ComboboxSeparator } from "./Combobox.items";
 import { ComboboxPrimitive } from "../primitives/ComboboxPrimitive";
 declare function useFilter(options?: ComboboxFilterOptions): import("@base-ui/react").AutocompleteFilter;
+declare function useFilteredItems<Value = unknown>(): Value[];
 declare function ComboboxRoot<Value, Multiple extends boolean | undefined = false>({ children, className, description, disabled, error, invalid, label, modal, style, multiple, readOnly, size, ...rootProps }: ComboboxRootProps<Value, Multiple>): React.JSX.Element;
 declare function ComboboxLabel({ className, ...labelProps }: ComboboxLabelProps): React.JSX.Element;
 declare function ComboboxLabelNote({ className, ...labelNoteProps }: ComboboxLabelNoteProps): React.JSX.Element;
@@ -63,6 +64,7 @@ declare const Combobox: typeof ComboboxRoot & {
     ClearSelection: typeof ComboboxClearSelection;
     SelectAll: typeof ComboboxSelectAll;
     useFilter: typeof useFilter;
+    useFilteredItems: typeof useFilteredItems;
     getSelectAllState: typeof getSelectAllState;
     getNextSelectAllValues: typeof getNextSelectAllValues;
 };

package/dist/Combobox/Combobox.responsive.d.ts

@@ -19,7 +19,7 @@ export declare const DEFAULT_COMBOBOX_RESPONSIVE_CONFIG: {
     positionerProps: {};
     showChipRemove: true;
 };
-export declare function getComboboxResponsiveConfig(width: number | undefined): {
+export declare function getComboboxResponsiveConfig(isSmallScreen: boolean): {
     defaultModal: false;
     footerActionButtonRecipe: {
         size: "small";

package/dist/Combobox/index.cjs

@@ -3,9 +3,7 @@
 var Combobox = require('../Combobox-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react');
-require('@jobber/hooks');
 require('classnames');
-require('../getMappedBreakpointWidth-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
 require('../Icon-cjs.js');

package/dist/Combobox/index.mjs

@@ -1,9 +1,7 @@
 export { C as Combobox } from '../Combobox-es.js';
 import '../tslib.es6-es.js';
 import 'react';
-import '@jobber/hooks';
 import 'classnames';
-import '../getMappedBreakpointWidth-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
 import '../Icon-es.js';

package/dist/Combobox-cjs.js

@@ -2,9 +2,7 @@
 
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
-var jobberHooks = require('@jobber/hooks');
 var classnames = require('classnames');
-var getMappedBreakpointWidth = require('./getMappedBreakpointWidth-cjs.js');
 var Button = require('./Button-cjs.js');
 var buttonRenderAdapter = require('./buttonRenderAdapter-cjs.js');
 var ComboboxPrimitive = require('./ComboboxPrimitive-cjs.js');
@@ -16,6 +14,56 @@ var Glimmer = require('./Glimmer-cjs.js');
 var HelperText = require('./HelperText-cjs.js');
 var FieldDescription = require('./FieldDescription-cjs.js');
 
+function getWindowDimensions() {
+    if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)) {
+        return {
+            width: undefined,
+            height: undefined,
+        };
+    }
+    const { innerWidth: width, innerHeight: height } = window;
+    return {
+        width,
+        height,
+    };
+}
+function useWindowDimensions() {
+    const [windowDimensions, setWindowDimensions] = React.useState(getWindowDimensions());
+    React.useEffect(() => {
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
+        }
+        window === null || window === void 0 ? void 0 : window.addEventListener("resize", handleResize);
+        return () => window === null || window === void 0 ? void 0 : window.removeEventListener("resize", handleResize);
+    }, []);
+    return windowDimensions;
+}
+
+const BREAKPOINT_SIZES = { sm: 490, md: 768, lg: 1080, xl: 1440 };
+
+/**
+ * SSR-safe check for whether the viewport is a small ("mobile") web screen,
+ * i.e. at or below the `sm` breakpoint.
+ *
+ * Returns `false` on the server and on the client's first (hydration) render —
+ * regardless of the real viewport — so the two renders agree and React can
+ * hydrate without a mismatch. After mount an effect re-renders with the value
+ * derived from the real viewport width, and it stays in sync on resize via
+ * `useWindowDimensions`.
+ *
+ * Prefer this over reading `useWindowDimensions` directly whenever the viewport
+ * size decides which DOM is rendered (e.g. an anchored dropdown vs. a
+ * `BottomSheet`). Reading the width directly re-introduces the hydration
+ * mismatch, because the client's first render sees the real width while the
+ * server saw `undefined`.
+ */
+function useIsSmallScreen() {
+    const [hasMounted, setHasMounted] = React.useState(false);
+    const { width } = useWindowDimensions();
+    React.useEffect(() => setHasMounted(true), []);
+    return hasMounted && width !== undefined && width <= BREAKPOINT_SIZES.sm;
+}
+
 function defaultIsItemEqual(candidateValue, selectedValue) {
     return Object.is(candidateValue, selectedValue);
 }
@@ -75,11 +123,10 @@ const MOBILE_COMBOBOX_RESPONSIVE_CONFIG = {
     },
     showChipRemove: false,
 };
-function getComboboxResponsiveConfig(width) {
-    if (width !== undefined && width <= getMappedBreakpointWidth.AtlantisBreakpoints.sm) {
-        return MOBILE_COMBOBOX_RESPONSIVE_CONFIG;
-    }
-    return DEFAULT_COMBOBOX_RESPONSIVE_CONFIG;
+function getComboboxResponsiveConfig(isSmallScreen) {
+    return isSmallScreen
+        ? MOBILE_COMBOBOX_RESPONSIVE_CONFIG
+        : DEFAULT_COMBOBOX_RESPONSIVE_CONFIG;
 }
 
 const ComboboxContext = React.createContext(null);
@@ -370,6 +417,9 @@ function useFilter(options) {
     const { locale } = AtlantisContext.useAtlantisContext();
     return ComboboxPrimitive.useFilter(Object.assign({ locale }, options));
 }
+function useFilteredItems() {
+    return ComboboxPrimitive.useFilteredItems();
+}
 function getIconSize(size) {
     if (size === "small")
         return "small";
@@ -426,8 +476,8 @@ function getDefaultEmptyChildren({ empty, hasLoading }, emptyContent) {
 }
 function ComboboxRoot(_a) {
     var { children, className, description, disabled, error, invalid, label, modal, style, multiple, readOnly, size = DEFAULT_SIZE } = _a, rootProps = tslib_es6.__rest(_a, ["children", "className", "description", "disabled", "error", "invalid", "label", "modal", "style", "multiple", "readOnly", "size"]);
-    const { width } = jobberHooks.useWindowDimensions();
-    const responsive = getComboboxResponsiveConfig(width);
+    const isSmallScreen = useIsSmallScreen();
+    const responsive = getComboboxResponsiveConfig(isSmallScreen);
     const [positionerAnchor, setPositionerAnchor] = React.useState(null);
     const contextValue = React.useMemo(() => ({
         disabled: Boolean(disabled),
@@ -668,6 +718,7 @@ const Combobox = Object.assign(ComboboxRoot, {
     ClearSelection: ComboboxClearSelection,
     SelectAll: ComboboxSelectAll,
     useFilter,
+    useFilteredItems,
     getSelectAllState,
     getNextSelectAllValues,
 });

package/dist/Combobox-es.js

@@ -1,11 +1,9 @@
 import { _ as __rest } from './tslib.es6-es.js';
-import React__default from 'react';
-import { useWindowDimensions } from '@jobber/hooks';
+import React__default, { useState, useEffect } from 'react';
 import classnames from 'classnames';
-import { A as AtlantisBreakpoints } from './getMappedBreakpointWidth-es.js';
 import { B as Button } from './Button-es.js';
 import { n as normalizeBaseUiButtonProps } from './buttonRenderAdapter-es.js';
-import { a as ComboboxValue, b as ComboboxClear$1, c as ComboboxList$1, d as ComboboxItem$1, e as ComboboxItemIndicator$1, f as ComboboxRow$1, g as ComboboxCollection$1, h as ComboboxGroup$1, i as ComboboxGroupLabel$1, j as ComboboxSeparator$1, k as ComboboxIcon, l as ComboboxChip, m as ComboboxChipRemove, n as ComboboxStatus, u as useFilter$1, o as ComboboxRoot$1, p as ComboboxInputGroup$1, q as ComboboxInput$1, r as ComboboxTrigger$1, s as ComboboxPortal, t as ComboboxBackdrop, v as ComboboxPositioner, w as ComboboxPopup, x as ComboboxChips$1, y as ComboboxEmpty$1 } from './ComboboxPrimitive-es.js';
+import { a as ComboboxValue, b as ComboboxClear$1, c as ComboboxList$1, d as ComboboxItem$1, e as ComboboxItemIndicator$1, f as ComboboxRow$1, g as ComboboxCollection$1, h as ComboboxGroup$1, i as ComboboxGroupLabel$1, j as ComboboxSeparator$1, k as ComboboxIcon, l as ComboboxChip, m as ComboboxChipRemove, n as ComboboxStatus, u as useFilter$1, o as useFilteredItems$1, p as ComboboxRoot$1, q as ComboboxInputGroup$1, r as ComboboxInput$1, s as ComboboxTrigger$1, t as ComboboxPortal, v as ComboboxBackdrop, w as ComboboxPositioner, x as ComboboxPopup, y as ComboboxChips$1, z as ComboboxEmpty$1 } from './ComboboxPrimitive-es.js';
 import { m as mergeProps } from './useRenderElement-es.js';
 import { I as Icon } from './Icon-es.js';
 import { m as mergeClassName } from './mergeClassName-es.js';
@@ -14,6 +12,56 @@ import { G as Glimmer } from './Glimmer-es.js';
 import { H as HelperText } from './HelperText-es.js';
 import { F as FieldRoot, a as FieldLabel, b as FieldDescription, c as FieldError } from './FieldDescription-es.js';
 
+function getWindowDimensions() {
+    if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)) {
+        return {
+            width: undefined,
+            height: undefined,
+        };
+    }
+    const { innerWidth: width, innerHeight: height } = window;
+    return {
+        width,
+        height,
+    };
+}
+function useWindowDimensions() {
+    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+    useEffect(() => {
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
+        }
+        window === null || window === void 0 ? void 0 : window.addEventListener("resize", handleResize);
+        return () => window === null || window === void 0 ? void 0 : window.removeEventListener("resize", handleResize);
+    }, []);
+    return windowDimensions;
+}
+
+const BREAKPOINT_SIZES = { sm: 490, md: 768, lg: 1080, xl: 1440 };
+
+/**
+ * SSR-safe check for whether the viewport is a small ("mobile") web screen,
+ * i.e. at or below the `sm` breakpoint.
+ *
+ * Returns `false` on the server and on the client's first (hydration) render —
+ * regardless of the real viewport — so the two renders agree and React can
+ * hydrate without a mismatch. After mount an effect re-renders with the value
+ * derived from the real viewport width, and it stays in sync on resize via
+ * `useWindowDimensions`.
+ *
+ * Prefer this over reading `useWindowDimensions` directly whenever the viewport
+ * size decides which DOM is rendered (e.g. an anchored dropdown vs. a
+ * `BottomSheet`). Reading the width directly re-introduces the hydration
+ * mismatch, because the client's first render sees the real width while the
+ * server saw `undefined`.
+ */
+function useIsSmallScreen() {
+    const [hasMounted, setHasMounted] = useState(false);
+    const { width } = useWindowDimensions();
+    useEffect(() => setHasMounted(true), []);
+    return hasMounted && width !== undefined && width <= BREAKPOINT_SIZES.sm;
+}
+
 function defaultIsItemEqual(candidateValue, selectedValue) {
     return Object.is(candidateValue, selectedValue);
 }
@@ -73,11 +121,10 @@ const MOBILE_COMBOBOX_RESPONSIVE_CONFIG = {
     },
     showChipRemove: false,
 };
-function getComboboxResponsiveConfig(width) {
-    if (width !== undefined && width <= AtlantisBreakpoints.sm) {
-        return MOBILE_COMBOBOX_RESPONSIVE_CONFIG;
-    }
-    return DEFAULT_COMBOBOX_RESPONSIVE_CONFIG;
+function getComboboxResponsiveConfig(isSmallScreen) {
+    return isSmallScreen
+        ? MOBILE_COMBOBOX_RESPONSIVE_CONFIG
+        : DEFAULT_COMBOBOX_RESPONSIVE_CONFIG;
 }
 
 const ComboboxContext = React__default.createContext(null);
@@ -368,6 +415,9 @@ function useFilter(options) {
     const { locale } = useAtlantisContext();
     return useFilter$1(Object.assign({ locale }, options));
 }
+function useFilteredItems() {
+    return useFilteredItems$1();
+}
 function getIconSize(size) {
     if (size === "small")
         return "small";
@@ -424,8 +474,8 @@ function getDefaultEmptyChildren({ empty, hasLoading }, emptyContent) {
 }
 function ComboboxRoot(_a) {
     var { children, className, description, disabled, error, invalid, label, modal, style, multiple, readOnly, size = DEFAULT_SIZE } = _a, rootProps = __rest(_a, ["children", "className", "description", "disabled", "error", "invalid", "label", "modal", "style", "multiple", "readOnly", "size"]);
-    const { width } = useWindowDimensions();
-    const responsive = getComboboxResponsiveConfig(width);
+    const isSmallScreen = useIsSmallScreen();
+    const responsive = getComboboxResponsiveConfig(isSmallScreen);
     const [positionerAnchor, setPositionerAnchor] = React__default.useState(null);
     const contextValue = React__default.useMemo(() => ({
         disabled: Boolean(disabled),
@@ -666,6 +716,7 @@ const Combobox = Object.assign(ComboboxRoot, {
     ClearSelection: ComboboxClearSelection,
     SelectAll: ComboboxSelectAll,
     useFilter,
+    useFilteredItems,
     getSelectAllState,
     getNextSelectAllValues,
 });

package/dist/ComboboxPrimitive-cjs.js

@@ -92,7 +92,7 @@ function ComboboxPositioner(_a) {
 }
 function ComboboxPopup(_a) {
     var { className } = _a, popupProps = tslib_es6.__rest(_a, ["className"]);
-    return (React.createElement(ComboboxChipRemove$1.ComboboxPopup, Object.assign({}, popupProps, { className: mergeClassName.mergeClassName(styles.popup, className) })));
+    return (React.createElement(ComboboxChipRemove$1.ComboboxPopup, Object.assign({}, popupProps, { className: mergeClassName.mergeClassName(styles.popup, className), "data-elevation": "elevated" })));
 }
 function ComboboxArrow(_a) {
     var { className } = _a, arrowProps = tslib_es6.__rest(_a, ["className"]);
@@ -150,7 +150,9 @@ function ComboboxSeparator(_a) {
     return (React.createElement(Separator.Separator, Object.assign({}, separatorProps, { className: mergeClassName.mergeClassName(styles.separator, className) })));
 }
 const useFilter = ComboboxChipRemove$1.useComboboxFilter;
-const useFilteredItems = ComboboxChipRemove$1.useFilteredItems;
+function useFilteredItems() {
+    return ComboboxChipRemove$1.useFilteredItems();
+}
 
 var ComboboxPrimitive = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -210,3 +212,4 @@ exports.ComboboxStatus = ComboboxStatus;
 exports.ComboboxTrigger = ComboboxTrigger;
 exports.ComboboxValue = ComboboxValue;
 exports.useFilter = useFilter;
+exports.useFilteredItems = useFilteredItems;

package/dist/ComboboxPrimitive-es.js

@@ -90,7 +90,7 @@ function ComboboxPositioner(_a) {
 }
 function ComboboxPopup(_a) {
     var { className } = _a, popupProps = __rest(_a, ["className"]);
-    return (React__default.createElement(ComboboxPopup$1, Object.assign({}, popupProps, { className: mergeClassName(styles.popup, className) })));
+    return (React__default.createElement(ComboboxPopup$1, Object.assign({}, popupProps, { className: mergeClassName(styles.popup, className), "data-elevation": "elevated" })));
 }
 function ComboboxArrow(_a) {
     var { className } = _a, arrowProps = __rest(_a, ["className"]);
@@ -148,7 +148,9 @@ function ComboboxSeparator(_a) {
     return (React__default.createElement(Separator, Object.assign({}, separatorProps, { className: mergeClassName(styles.separator, className) })));
 }
 const useFilter = useComboboxFilter;
-const useFilteredItems = useFilteredItems$1;
+function useFilteredItems() {
+    return useFilteredItems$1();
+}
 
 var ComboboxPrimitive = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -182,4 +184,4 @@ var ComboboxPrimitive = /*#__PURE__*/Object.freeze({
   useFilteredItems: useFilteredItems
 });
 
-export { ComboboxPrimitive as C, ComboboxValue as a, ComboboxClear as b, ComboboxList as c, ComboboxItem as d, ComboboxItemIndicator as e, ComboboxRow as f, ComboboxCollection as g, ComboboxGroup as h, ComboboxGroupLabel as i, ComboboxSeparator as j, ComboboxIcon as k, ComboboxChip as l, ComboboxChipRemove as m, ComboboxStatus as n, ComboboxRoot as o, ComboboxInputGroup as p, ComboboxInput as q, ComboboxTrigger as r, ComboboxPortal as s, ComboboxBackdrop as t, useFilter as u, ComboboxPositioner as v, ComboboxPopup as w, ComboboxChips as x, ComboboxEmpty as y };
+export { ComboboxPrimitive as C, ComboboxValue as a, ComboboxClear as b, ComboboxList as c, ComboboxItem as d, ComboboxItemIndicator as e, ComboboxRow as f, ComboboxCollection as g, ComboboxGroup as h, ComboboxGroupLabel as i, ComboboxSeparator as j, ComboboxIcon as k, ComboboxChip as l, ComboboxChipRemove as m, ComboboxStatus as n, useFilteredItems as o, ComboboxRoot as p, ComboboxInputGroup as q, ComboboxInput as r, ComboboxTrigger as s, ComboboxPortal as t, useFilter as u, ComboboxBackdrop as v, ComboboxPositioner as w, ComboboxPopup as x, ComboboxChips as y, ComboboxEmpty as z };

package/dist/ContentBlock/index.cjs

@@ -5,7 +5,6 @@ require('react');
 require('classnames');
 require('@jobber/hooks');
 require('../getMappedAtlantisSpaceToken-cjs.js');
-require('../getMappedBreakpointWidth-cjs.js');
 
 
 

package/dist/ContentBlock/index.mjs

@@ -3,4 +3,3 @@ import 'react';
 import 'classnames';
 import '@jobber/hooks';
 import '../getMappedAtlantisSpaceToken-es.js';
-import '../getMappedBreakpointWidth-es.js';

package/dist/ContentBlock-cjs.js

@@ -4,12 +4,28 @@ var React = require('react');
 var classnames = require('classnames');
 var jobberHooks = require('@jobber/hooks');
 var getMappedAtlantisSpaceToken = require('./getMappedAtlantisSpaceToken-cjs.js');
-var getMappedBreakpointWidth = require('./getMappedBreakpointWidth-cjs.js');
 
 var styles = {"contentBlock":"rJamQZ6fRes-","left":"bqjXV8MRO-4-","right":"sCMxIxKkFe0-","center":"_2pIQVKvVL1I-","andText":"_6dF2no3aTxw-","gutters":"_8k8YLsatGag-","spinning":"sjMwRWFdKeo-"};
 
+const AtlantisBreakpoints = {
+    xs: 0,
+    sm: 490,
+    md: 768,
+    lg: 1080,
+    xl: 1440,
+};
+const getMappedBreakpointWidth = (maxWidth) => {
+    if (typeof maxWidth === "number") {
+        return `${maxWidth}px`;
+    }
+    if (AtlantisBreakpoints[maxWidth]) {
+        return (AtlantisBreakpoints[maxWidth] + "px");
+    }
+    return maxWidth;
+};
+
 function ContentBlock({ children, maxWidth = jobberHooks.Breakpoints.smaller, andText, gutters, justify = "left", as: Tag = "div", dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }) {
-    return (React.createElement(Tag, Object.assign({ role: role, id: id }, dataAttributes, ariaAttributes, { style: Object.assign({ "--content-block-max-width": getMappedBreakpointWidth.getMappedBreakpointWidth(maxWidth), "--content-block-gutters": getMappedAtlantisSpaceToken.getMappedAtlantisSpaceToken(gutters) }, UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container), className: classnames(styles.contentBlock, andText && styles.andText, gutters && styles.gutters, justify === "left" && styles.left, justify === "right" && styles.right, justify === "center" && styles.center, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container) }), children));
+    return (React.createElement(Tag, Object.assign({ role: role, id: id }, dataAttributes, ariaAttributes, { style: Object.assign({ "--content-block-max-width": getMappedBreakpointWidth(maxWidth), "--content-block-gutters": getMappedAtlantisSpaceToken.getMappedAtlantisSpaceToken(gutters) }, UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container), className: classnames(styles.contentBlock, andText && styles.andText, gutters && styles.gutters, justify === "left" && styles.left, justify === "right" && styles.right, justify === "center" && styles.center, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container) }), children));
 }
 
 exports.ContentBlock = ContentBlock;

package/dist/ContentBlock-es.js

@@ -2,10 +2,26 @@ import React__default from 'react';
 import classnames from 'classnames';
 import { Breakpoints } from '@jobber/hooks';
 import { g as getMappedAtlantisSpaceToken } from './getMappedAtlantisSpaceToken-es.js';
-import { g as getMappedBreakpointWidth } from './getMappedBreakpointWidth-es.js';
 
 var styles = {"contentBlock":"rJamQZ6fRes-","left":"bqjXV8MRO-4-","right":"sCMxIxKkFe0-","center":"_2pIQVKvVL1I-","andText":"_6dF2no3aTxw-","gutters":"_8k8YLsatGag-","spinning":"sjMwRWFdKeo-"};
 
+const AtlantisBreakpoints = {
+    xs: 0,
+    sm: 490,
+    md: 768,
+    lg: 1080,
+    xl: 1440,
+};
+const getMappedBreakpointWidth = (maxWidth) => {
+    if (typeof maxWidth === "number") {
+        return `${maxWidth}px`;
+    }
+    if (AtlantisBreakpoints[maxWidth]) {
+        return (AtlantisBreakpoints[maxWidth] + "px");
+    }
+    return maxWidth;
+};
+
 function ContentBlock({ children, maxWidth = Breakpoints.smaller, andText, gutters, justify = "left", as: Tag = "div", dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }) {
     return (React__default.createElement(Tag, Object.assign({ role: role, id: id }, dataAttributes, ariaAttributes, { style: Object.assign({ "--content-block-max-width": getMappedBreakpointWidth(maxWidth), "--content-block-gutters": getMappedAtlantisSpaceToken(gutters) }, UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container), className: classnames(styles.contentBlock, andText && styles.andText, gutters && styles.gutters, justify === "left" && styles.left, justify === "right" && styles.right, justify === "center" && styles.center, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container) }), children));
 }

package/dist/DataList/components/DataListTotalCount/DataListTotalCount.messages.d.ts

@@ -0,0 +1,10 @@
+export declare const dataListTotalCountMessages: {
+    result: {
+        en: string;
+        es: string;
+    };
+    results: {
+        en: string;
+        es: string;
+    };
+};

package/dist/DataList/components/DataListTotalCount/index.cjs

@@ -2,6 +2,8 @@
 
 var DataListTotalCount = require('../../../DataListTotalCount-cjs.js');
 require('react');
+require('../../../useAtlantisI18n-cjs.js');
+require('../../../AtlantisContext-cjs.js');
 require('../../../Text-cjs.js');
 require('../../../Typography-cjs.js');
 require('classnames');

package/dist/DataList/components/DataListTotalCount/index.mjs

@@ -1,5 +1,7 @@
 export { D as DATALIST_TOTALCOUNT_TEST_ID, a as DataListTotalCount } from '../../../DataListTotalCount-es.js';
 import 'react';
+import '../../../useAtlantisI18n-es.js';
+import '../../../AtlantisContext-es.js';
 import '../../../Text-es.js';
 import '../../../Typography-es.js';
 import 'classnames';

package/dist/DataList/index.cjs

@@ -5,6 +5,8 @@ require('../tslib.es6-cjs.js');
 require('react');
 require('../DataList.module-cjs.js');
 require('../DataListTotalCount-cjs.js');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../Text-cjs.js');
 require('../Typography-cjs.js');
 require('classnames');
@@ -61,8 +63,6 @@ require('../FilterPickerContentSearch-cjs.js');
 require('../FilterPickerContentList-cjs.js');
 require('../Spinner-cjs.js');
 require('../common.messages-cjs.js');
-require('../useAtlantisI18n-cjs.js');
-require('../AtlantisContext-cjs.js');
 require('../AtlantisThemeContext-cjs.js');
 require('../identity-cjs.js');
 require('../_baseAssignValue-cjs.js');

package/dist/DataList/index.mjs

@@ -3,6 +3,8 @@ import '../tslib.es6-es.js';
 import 'react';
 import '../DataList.module-es.js';
 import '../DataListTotalCount-es.js';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../Text-es.js';
 import '../Typography-es.js';
 import 'classnames';
@@ -59,8 +61,6 @@ import '../FilterPickerContentSearch-es.js';
 import '../FilterPickerContentList-es.js';
 import '../Spinner-es.js';
 import '../common.messages-es.js';
-import '../useAtlantisI18n-es.js';
-import '../AtlantisContext-es.js';
 import '../AtlantisThemeContext-es.js';
 import '../identity-es.js';
 import '../_baseAssignValue-es.js';

package/dist/DataListTotalCount-cjs.js

@@ -1,16 +1,30 @@
 'use strict';
 
 var React = require('react');
+var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
+require('./AtlantisContext-cjs.js');
 var Text = require('./Text-cjs.js');
 var Glimmer = require('./Glimmer-cjs.js');
 
 var styles = {"results":"_9wfZRG5vXI8-","spinning":"_7A1FU9kI3mY-"};
 
+const dataListTotalCountMessages = useAtlantisI18n.defineMessages({
+    result: {
+        en: "result",
+        es: "resultado",
+    },
+    results: {
+        en: "results",
+        es: "resultados",
+    },
+});
+
 const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
 function DataListTotalCountContainer({ children }) {
     return (React.createElement("div", { className: styles.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, children));
 }
 function DataListTotalCount({ totalCount, loading, }) {
+    const { t } = useAtlantisI18n.useAtlantisI18n(dataListTotalCountMessages);
     if (totalCount === null && loading) {
         return (React.createElement(DataListTotalCountContainer, null,
             React.createElement(Glimmer.Glimmer, { size: "auto", shape: "rectangle" })));
@@ -21,7 +35,7 @@ function DataListTotalCount({ totalCount, loading, }) {
                 "(",
                 totalCount.toLocaleString(),
                 " ",
-                totalCount == 1 ? "result" : "results",
+                totalCount == 1 ? t("result") : t("results"),
                 ")")));
     }
     return null;

package/dist/DataListTotalCount-es.js

@@ -1,14 +1,28 @@
 import React__default from 'react';
+import { d as defineMessages, u as useAtlantisI18n } from './useAtlantisI18n-es.js';
+import './AtlantisContext-es.js';
 import { T as Text } from './Text-es.js';
 import { G as Glimmer } from './Glimmer-es.js';
 
 var styles = {"results":"_9wfZRG5vXI8-","spinning":"_7A1FU9kI3mY-"};
 
+const dataListTotalCountMessages = defineMessages({
+    result: {
+        en: "result",
+        es: "resultado",
+    },
+    results: {
+        en: "results",
+        es: "resultados",
+    },
+});
+
 const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
 function DataListTotalCountContainer({ children }) {
     return (React__default.createElement("div", { className: styles.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, children));
 }
 function DataListTotalCount({ totalCount, loading, }) {
+    const { t } = useAtlantisI18n(dataListTotalCountMessages);
     if (totalCount === null && loading) {
         return (React__default.createElement(DataListTotalCountContainer, null,
             React__default.createElement(Glimmer, { size: "auto", shape: "rectangle" })));
@@ -19,7 +33,7 @@ function DataListTotalCount({ totalCount, loading, }) {
                 "(",
                 totalCount.toLocaleString(),
                 " ",
-                totalCount == 1 ? "result" : "results",
+                totalCount == 1 ? t("result") : t("results"),
                 ")")));
     }
     return null;

package/dist/Page/index.cjs

@@ -4,8 +4,8 @@ var Page = require('../Page-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
-require('../Menu-cjs.js');
 require('@jobber/hooks');
+require('../Menu-cjs.js');
 require('framer-motion');
 require('../floating-ui.react-cjs.js');
 require('../floating-ui.utils-cjs.js');

package/dist/Page/index.mjs

@@ -2,8 +2,8 @@ export { P as Page } from '../Page-es.js';
 import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
-import '../Menu-es.js';
 import '@jobber/hooks';
+import '../Menu-es.js';
 import 'framer-motion';
 import '../floating-ui.react-es.js';
 import '../floating-ui.utils-es.js';