@jobber/components 9.6.2 → 9.6.3

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/docs/Combobox/Combobox.md

@@ -0,0 +1,563 @@
+# Combobox
+
+## Summary
+
+Combobox lets a user search and select one or more values from a list. Use it
+when the list benefits from filtering, when the selected values need to appear
+in the field, or when the popup needs supporting actions such as creating a new
+option.
+
+Use Combobox when the selected value is saved, submitted, assigned, or otherwise
+becomes part of the user's work.
+
+## Anatomy
+
+| Part        | Description                                                       |
+| ----------- | ----------------------------------------------------------------- |
+| Field       | Label, optional note, description, and error treatment            |
+| Trigger     | Visible field that opens the popup and displays the current value |
+| Search      | Input used to filter options, either in the trigger or popup      |
+| Content     | Popup or mobile sheet that contains options and affordances       |
+| Item        | Selectable option with optional prefix, description, and suffix   |
+| Empty state | Message shown when search has no matching options                 |
+| Actions     | Sticky action rows below the option list                          |
+| Footer      | Sticky region for multiple-selection affordances                  |
+
+## Behavior
+
+#### Opening and closing
+
+Combobox opens when the trigger is clicked, tapped, or activated by keyboard. It
+closes when the user selects a single-select option, clicks or taps outside the
+popup, or presses Esc.
+
+Multiple-selection comboboxes stay open while values are selected so users can
+choose more than one option.
+
+#### Search
+
+Search filters the option list as the user types. Search can happen directly in
+the trigger or inside the popup, depending on the trigger pattern.
+
+#### Empty state
+
+When no options match, the empty state appears above actions and footer content.
+This keeps creation actions and multiple-selection controls in predictable
+locations.
+
+#### Actions and footer
+
+Actions are anchored below the option list. The multiple-selection footer is
+anchored below options and actions when present.
+
+#### Small screens
+
+On small screens, Combobox automatically presents the popup as a bottom-anchored
+sheet. Consumers use the same Combobox API across desktop and mobile web.
+
+## Trigger patterns
+
+Use `Combobox.TriggerInput` when the user searches directly in the field.
+
+Use `Combobox.TriggerValue` when the closed field should behave more like a
+Select and search belongs inside the popup.
+
+Use `Combobox.TriggerMultipleValue` for multi-select fields that show selected
+chips in the closed field and keep search inside the popup.
+
+## Variants
+
+#### Single select
+
+Use single select when the user can choose one value.
+
+#### Multiple select
+
+Use multiple select when the user can choose several values and needs selected
+values to remain visible in the field.
+
+#### Popup search
+
+Use popup search when the trigger should display the current value and search
+should happen after the popup opens.
+
+## Item content
+
+Items can be plain text for the default row treatment, or composed with
+`Combobox.ItemPrefix`, `Combobox.ItemLabel`, `Combobox.ItemDescription`, and
+`Combobox.ItemSuffix` for richer option content. The selected checkmark is
+included by default.
+
+## Empty and loading states
+
+Combobox includes a default empty state so search results always resolve in the
+right place, above actions and footer content. Customize the message through
+`Combobox.Content`, render your own `Combobox.Empty`, or opt out when the
+experience needs to own that region.
+
+Loading uses four glimmer rows by default. The row count and loading content can
+be customized when a product needs a different loading treatment.
+
+## Actions
+
+Actions are for work outside option selection, such as creating or inviting an
+item. The default action row uses the leading add icon shown in Figma, while
+`Combobox.ActionPrefix` and `Combobox.ActionLabel` are available when the row
+needs custom content.
+
+## Multiple-selection footer
+
+Use `Combobox.SelectionFooter` for the opinionated multiple-select footer. It
+keeps selected count, clear, and select-all controls in a consistent order.
+
+Select-all behavior is product-owned: the app decides whether "all" means
+visible, filtered, loaded, paginated, or server-known results.
+
+## Content Guidelines
+
+#### Labels
+
+Use a short noun label that names the value being selected.
+
+| ✅ Do         | ❌ Don't                          |
+| ------------ | -------------------------------- |
+| Team member  | Choose which team member to use  |
+| Job type     | Select one of these job types    |
+| Service area | Search and pick a service region |
+
+#### Search placeholder
+
+Use placeholder text that describes what can be searched. Keep it short.
+
+| ✅ Do                | ❌ Don't                                   |
+| ------------------- | ----------------------------------------- |
+| Search team members | Start typing to search all team members   |
+| Search clients      | Enter the name of the client to find them |
+| Search job types    | Filter the dropdown                       |
+
+#### Item text
+
+Use the item label for the selectable value. Use descriptions only when they
+help distinguish similar options.
+
+| ✅ Do                         | ❌ Don't                                  |
+| ---------------------------- | ---------------------------------------- |
+| Ryan Clearwater              | Select Ryan Clearwater                   |
+| Ryan Clearwater + Sales lead | Ryan Clearwater, who is the sales lead   |
+| Downtown + Service area      | Downtown service area available for jobs |
+
+#### Actions
+
+Use actions for work outside option selection, such as creating or inviting an
+item. Action labels should be verb-first and sentence-cased.
+
+| ✅ Do               | ❌ Don't                  |
+| ------------------ | ------------------------ |
+| Create team member | Team member creation     |
+| Invite team member | Send invitation to staff |
+| Add client         | Client                   |
+
+## Do's and Don'ts
+
+#### Do
+
+* ✅ Use Combobox when the list benefits from search or filtering
+* ✅ Use enough item context to distinguish similar values
+* ✅ Keep empty state above actions and footer controls
+* ✅ Use the multiple-selection footer for clear and select-all affordances
+* ✅ Define what "select all" means before including it
+
+#### Don't
+
+* ❌ Don't use Combobox for a tiny static list where Select is simpler
+* ❌ Don't hide empty state behind actions or footer controls
+* ❌ Don't assume "select all" means every server result
+* ❌ Don't mix unrelated actions into the popup
+* ❌ Don't overload item rows with content that slows scanning
+
+## Rich item data
+
+Options can include more than a primary label when extra context helps users
+choose confidently. Use descriptions, prefixes, or suffixes when similar options
+need to be distinguished at a glance. Those fields can also be made filterable,
+so search can match the details users naturally type.
+
+## Accessibility
+
+Combobox should have a clear accessible label. Keyboard behavior and active item
+management are provided by Base UI.
+
+#### Keyboard navigation
+
+| Key                | Behavior                                               |
+| ------------------ | ------------------------------------------------------ |
+| Tab                | Moves focus to the trigger, actions, or footer buttons |
+| Up and Down arrows | Moves through available options                        |
+| Enter              | Selects the highlighted option or activates an action  |
+| Esc                | Closes the popup                                       |
+
+## Related components
+
+* To choose one value from a small static list, use [Select](../Select/Select.md)
+* To present actions that do not filter or select form values, use
+  [Menu](../Menu/Menu.md)
+
+
+## Composition
+
+Combobox is a composable field built on `ComboboxPrimitive`. The sugared
+component provides common recipes while preserving access to lower-level pieces
+when a product flow needs more control.
+
+### Trigger recipes
+
+Most implementations should start with one of the trigger recipes.
+
+#### `Combobox.TriggerInput`
+
+Use `Combobox.TriggerInput` when the user should search directly in the field.
+
+```tsx
+<Combobox label="Team member" items={teamMembers}>
+  <Combobox.TriggerInput placeholder="Search team members" />
+  <Combobox.Content>
+    <Combobox.List>
+      {member => (
+        <Combobox.Item key={member.id} value={member}>
+          {member.name}
+        </Combobox.Item>
+      )}
+    </Combobox.List>
+  </Combobox.Content>
+</Combobox>
+```
+
+#### `Combobox.TriggerValue`
+
+Use `Combobox.TriggerValue` when the closed field should display the selected
+value and the search input should live inside the popup.
+
+```tsx
+<Combobox label="Team member" items={teamMembers}>
+  <Combobox.TriggerValue placeholder="Select team member" />
+  <Combobox.Content>
+    <Combobox.Input placeholder="Search team members" />
+    <Combobox.List>
+      {member => (
+        <Combobox.Item key={member.id} value={member}>
+          {member.name}
+        </Combobox.Item>
+      )}
+    </Combobox.List>
+  </Combobox.Content>
+</Combobox>
+```
+
+#### `Combobox.TriggerMultipleValue`
+
+Use `Combobox.TriggerMultipleValue` when the closed field should display
+selected chips and the search input should live inside the popup.
+
+```tsx
+<Combobox multiple label="Assigned team" items={teamMembers}>
+  <Combobox.TriggerMultipleValue getItemLabel={member => member.name} />
+  <Combobox.Content>
+    <Combobox.Input placeholder="Search team members" />
+    <Combobox.List>
+      {member => (
+        <Combobox.Item key={member.id} value={member}>
+          {member.name}
+        </Combobox.Item>
+      )}
+    </Combobox.List>
+  </Combobox.Content>
+</Combobox>
+```
+
+#### `Combobox.TriggerMultipleWithInput`
+
+Use `Combobox.TriggerMultipleWithInput` when multi-select chips and search
+should both live in the trigger.
+
+```tsx
+<Combobox multiple label="Assigned team" items={teamMembers}>
+  <Combobox.TriggerMultipleWithInput getItemLabel={member => member.name} />
+  <Combobox.Content>
+    <Combobox.List>
+      {member => (
+        <Combobox.Item key={member.id} value={member}>
+          {member.name}
+        </Combobox.Item>
+      )}
+    </Combobox.List>
+  </Combobox.Content>
+</Combobox>
+```
+
+### Field text
+
+Pass `label`, `description`, and `error` on `Combobox` for the default Atlantis
+field treatment. If the layout needs different placement, compose
+`Combobox.Label`, `Combobox.Description`, and `Combobox.Error` manually.
+
+```tsx
+<Combobox
+  label="Team member"
+  description="Search by name"
+  error="Choose a team member"
+  items={teamMembers}
+>
+  {/* trigger and content */}
+</Combobox>
+```
+
+### Empty state
+
+`Combobox.Content` renders `"No results found"` by default when search has no
+matches. The empty state is placed after options and before actions or footer
+content.
+
+Use the `empty` prop to customize the default message:
+
+```tsx
+<Combobox.Content empty="No team members found">
+  {/* options */}
+</Combobox.Content>
+```
+
+When the empty state needs custom markup, omit the automatic empty state and
+render `Combobox.Empty` directly:
+
+```tsx
+<Combobox.Content empty={null}>
+  <Combobox.List>{/* options */}</Combobox.List>
+  <Combobox.Empty>No team members match this search.</Combobox.Empty>
+</Combobox.Content>
+```
+
+### Actions
+
+Use `Combobox.Action` for interactive rows that are not selectable options, such
+as creating a new customer or inviting a team member. Use `Combobox.Item` when
+the row represents a value the Combobox can select.
+
+```tsx
+<Combobox.Content empty={`No matches for "${query}"`}>
+  <Combobox.List>{/* options */}</Combobox.List>
+  <Combobox.Actions>
+    <Combobox.Action onClick={() => createTeamMember(query)}>
+      Create team member
+    </Combobox.Action>
+  </Combobox.Actions>
+</Combobox.Content>
+```
+
+Clicking an action runs the action's handler and leaves the popup open. If an
+action should close the popup, control `open` from product state and set it to
+`false` in the action handler. If the action opens another overlay, such as a
+Dialog, also coordinate that from product state so focus and closing behavior
+match the product flow.
+
+```tsx
+const [open, setOpen] = useState(false);
+
+<Combobox open={open} onOpenChange={setOpen}>
+  <Combobox.TriggerInput />
+  <Combobox.Content>
+    <Combobox.List>{/* options */}</Combobox.List>
+    <Combobox.Actions>
+      <Combobox.Action
+        onClick={() => {
+          createTeamMember();
+          setOpen(false);
+        }}
+      >
+        Create team member
+      </Combobox.Action>
+    </Combobox.Actions>
+  </Combobox.Content>
+</Combobox>;
+```
+
+### Footer and select all
+
+`Combobox.SelectionFooter` is the default multiple-select footer. It owns the
+visual ordering for selected count, clear, and select all. Use
+`showSelectedCount={false}` when the count should be omitted.
+
+Select-all behavior is intentionally not automatic. Products must decide the
+candidate set and pass `onSelectAll`.
+
+```tsx
+const selectAllState = Combobox.getSelectAllState({
+  selectedValues,
+  candidateValues: visibleValues,
+});
+```
+
+The candidate set can be visible results, filtered results, loaded results, the
+current page, or another product-defined set.
+
+```tsx
+const [selectedMembers, setSelectedMembers] = useState([]);
+const selectAllState = Combobox.getSelectAllState({
+  selectedValues: selectedMembers,
+  candidateValues: visibleMembers,
+});
+
+<Combobox
+  multiple
+  value={selectedMembers}
+  onValueChange={setSelectedMembers}
+  items={visibleMembers}
+>
+  <Combobox.TriggerMultipleValue getItemLabel={member => member.name} />
+  <Combobox.Content>
+    <Combobox.Input placeholder="Search team members" />
+    <Combobox.List>{/* options */}</Combobox.List>
+    <Combobox.SelectionFooter
+      selectAllState={selectAllState}
+      onSelectAll={() =>
+        setSelectedMembers(
+          Combobox.getNextSelectAllValues({
+            selectedValues: selectedMembers,
+            candidateValues: visibleMembers,
+          })
+        )
+      }
+    />
+  </Combobox.Content>
+</Combobox>;
+```
+
+## Controlled and uncontrolled usage
+
+Combobox follows Base UI's value model. Use `value` and `onValueChange` when the
+app owns selection state, or `defaultValue` for uncontrolled selection.
+
+Single-select values are one item or `null`. Multi-select values are arrays.
+When values are objects, use `itemToString` for display and `itemToValue` for
+form submission.
+
+```tsx
+<Combobox
+  value={selectedMember}
+  onValueChange={setSelectedMember}
+  itemToString={member => member?.name ?? ""}
+  itemToValue={member => member.id}
+  items={teamMembers}
+>
+  {/* trigger and content */}
+</Combobox>
+```
+
+## Filtering and data strategy
+
+For local data, pass `items` and optionally customize the root `filter` prop.
+`Combobox.useFilter` exposes Base UI's filter helper with Atlantis locale wired
+in, so matching handles locale-sensitive text consistently.
+
+```tsx
+const filter = Combobox.useFilter();
+
+<Combobox
+  items={teamMembers}
+  filter={(member, query) =>
+    filter.contains(member.name, query) ||
+    filter.contains(member.department, query) ||
+    filter.contains(member.role, query)
+  }
+>
+  {/* trigger and content */}
+</Combobox>;
+```
+
+`Combobox.useFilteredItems` exposes Base UI's filtered item collection for
+custom list rendering, virtualization, or pagination affordances. It does not
+load additional data on its own; it only reads the filtered items currently
+known to Combobox.
+
+Combobox does not own pagination, but it gives products the pieces to build it.
+Pass the currently loaded items into `items`, load additional pages from product
+state or an API call, and compose loading UI inside the popup with
+`Combobox.Status` and `ActivityIndicator` when needed. For local large lists,
+use `Combobox.useFilteredItems` when custom rendering or virtualization needs
+access to the current filtered collection.
+
+```tsx
+<Combobox.Content>
+  <Combobox.Input placeholder="Search team members" />
+  <Combobox.List>{/* loaded options */}</Combobox.List>
+  {isLoadingMore && (
+    <Combobox.Status>
+      <ActivityIndicator aria-label="Loading more team members" />
+    </Combobox.Status>
+  )}
+</Combobox.Content>
+```
+
+For async, paginated, virtualized, or server-filtered data, keep the data
+strategy in product code. Fetch from input changes, pass the current loaded or
+windowed items to Combobox, and disable client filtering when the server already
+returned filtered results.
+
+> **NOTICE:** Combobox does not infer total result sets, page boundaries, or select-all
+> semantics for server-backed data.
+
+## Mobile web
+
+Combobox automatically switches to a bottom-anchored sheet at the Atlantis small
+breakpoint. This uses Base UI's Combobox modal and backdrop behavior, not
+Atlantis `BottomSheet`, so consumers do not need a separate mobile API.
+
+
+## Props
+
+### Web
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `actionsRef` | `RefObject<Actions>` | No | — | A ref to imperative actions. - `unmount`: Manually unmounts the combobox. Call this after any externally controlled c... |
+| `autoComplete` | `string` | No | — | Provides a hint to the browser for autofill. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attribu... |
+| `autoHighlight` | `boolean` | No | `false` | Whether the first matching item is highlighted automatically while filtering. |
+| `className` | `string` | No | — |  |
+| `defaultInputValue` | `string | number | readonly string[]` | No | — | The uncontrolled input value when initially rendered.  To render a controlled input, use the `inputValue` prop instead. |
+| `defaultOpen` | `boolean` | No | `false` | Whether the popup is initially open.  To render a controlled popup, use the `open` prop instead. |
+| `defaultValue` | `ComboboxValueType<Value, Multiple>` | No | — | The uncontrolled selected value of the combobox when it's initially rendered.  To render a controlled combobox, use t... |
+| `description` | `string` | No | — |  |
+| `disabled` | `boolean` | No | `false` | Whether the component should ignore user interaction. |
+| `error` | `string` | No | — |  |
+| `filter` | `(itemValue: Value, query: string, itemToString?: (itemValue: Value) => string) => boolean` | No | — | Filter function used to match items vs input query. |
+| `filteredItems` | `readonly any[] | readonly Group<any>[]` | No | — | Filtered items to display in the list. When provided, the list will use these items instead of filtering the `items` ... |
+| `form` | `string` | No | — | Identifies the form that owns the internal input. Useful when the combobox is rendered outside the form. |
+| `grid` | `boolean` | No | `false` | Whether list items are presented in a grid layout. When enabled, arrow keys navigate across rows and columns inferred... |
+| `highlightItemOnHover` | `boolean` | No | `true` | Whether moving the pointer over items should highlight them. Disabling this prop allows CSS `:hover` to be differenti... |
+| `id` | `string` | No | — | The id of the component. |
+| `inline` | `boolean` | No | `false` | Whether the list is rendered inline without using the component's own popup.  Specify `open` unconditionally in conju... |
+| `inputRef` | `Ref<HTMLInputElement>` | No | — | A ref to the hidden input element. |
+| `inputValue` | `string | number | readonly string[]` | No | — | The input value of the combobox. Use when controlled. |
+| `invalid` | `boolean` | No | — |  |
+| `isItemEqualToValue` | `(itemValue: Value, value: Value) => boolean` | No | — | Custom comparison logic used to determine if a combobox item value matches the current selected value. Useful when it... |
+| `items` | `readonly any[] | readonly Group<any>[]` | No | — | The items to be displayed in the list. Can be either a flat array of items or an array of groups with items. |
+| `itemToStringLabel` | `(itemValue: Value) => string` | No | — | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a str... |
+| `itemToStringValue` | `(itemValue: Value) => string` | No | — | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a str... |
+| `label` | `ReactNode` | No | — |  |
+| `limit` | `number` | No | `-1` | The maximum number of items to display in the list. |
+| `locale` | `LocalesArgument` | No | — | The locale to use for string comparison. Defaults to the user's runtime locale. |
+| `loopFocus` | `boolean` | No | `true` | Whether to loop keyboard focus back to the input when the end of the list is reached while using the arrow keys. The ... |
+| `modal` | `boolean` | No | `false` | Determines if the popup enters a modal state when open. - `true`: user interaction is limited to the popup: document ... |
+| `multiple` | `boolean` | No | `false` | Whether multiple items can be selected. |
+| `name` | `string` | No | — | Identifies the field when a form is submitted. |
+| `onInputValueChange` | `(inputValue: string, eventDetails: ChangeEventDetails) => void` | No | — | Event handler called when the input value changes. |
+| `onItemHighlighted` | `(highlightedValue: Value, eventDetails: HighlightEventDetails) => void` | No | — | Callback fired when an item is highlighted or unhighlighted. Receives the highlighted item value (or `undefined` if n... |
+| `onOpenChange` | `(open: boolean, eventDetails: ChangeEventDetails) => void` | No | — | Event handler called when the popup is opened or closed. |
+| `onOpenChangeComplete` | `(open: boolean) => void` | No | — | Event handler called after any animations complete when the popup is opened or closed. |
+| `onValueChange` | `(value: ComboboxValueType<Value, Multiple> | (Multiple extends true ? never : null), eventDetails: ChangeEventDetails) => void` | No | — | Event handler called when the selected value of the combobox changes. |
+| `open` | `boolean` | No | — | Whether the popup is currently open. Use when controlled. |
+| `openOnInputClick` | `boolean` | No | `true` | Whether the popup opens when clicking the input. |
+| `readOnly` | `boolean` | No | `false` | Whether the user should be unable to choose a different option from the popup. |
+| `required` | `boolean` | No | `false` | Whether the user must choose a value before submitting a form. |
+| `size` | `ComboboxSize` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+| `value` | `ComboboxValueType<Value, Multiple>` | No | — | The selected value of the combobox. Use when controlled. |
+| `virtualized` | `boolean` | No | `false` | Whether the items are being externally virtualized. |

package/dist/docs/FilterPicker/FilterPicker.md

@@ -1,20 +1,18 @@
 # FilterPicker
 
-> **NOTICE:** This component was previously named `Combobox`. Use `FilterPicker` as the
-> direct replacement.
+> **NOTICE:** This component was previously named `Combobox`. Use `FilterPicker` for
+> filtering existing content. For searchable field selection, use the new Base
+> UI-backed [Combobox](../Combobox/Combobox.md).
 
-The FilterPicker is designed to provide a versatile and accessible interface for
-selecting one or more options from a list. FilterPicker can be used for a
-variety of scenarios, such as selecting items from a predefined list, filtering
-and searching through data.
+FilterPicker lets users narrow an existing list, table, report, or page of
+records. Use it when selected options act as filters for nearby content.
 
-## Design & usage guidelines
+If the user is choosing a value to save, submit, assign, or display in a form
+field, use [Combobox](../Combobox/Combobox.md) instead.
 
-The FilterPicker component's primary function is to facilitate option selection
-and searching within a list of items.
+## Design & usage guidelines
 
-It should be used in scenarios where users need to choose from a set of options,
-with the added benefit of filtering.
+FilterPicker's primary function is to apply filter criteria to existing content.
 
 The FilterPicker also has the flexibility to allow for custom actions, such as
 adding a new item to the list of options or managing a selection.

package/dist/docs/index.md

@@ -15,6 +15,7 @@
 [choosing-components](./choosing-components/choosing-components.md)
 [Cluster](./Cluster/Cluster.md)
 [Colors](./Colors/Colors.md)
+[Combobox](./Combobox/Combobox.md)
 [ConfirmationModal](./ConfirmationModal/ConfirmationModal.md)
 [Container](./Container/Container.md)
 [Content](./Content/Content.md)

package/dist/index.cjs

@@ -115,7 +115,6 @@ require('color');
 require('./tslib.es6-cjs.js');
 require('react-router-dom');
 require('./getMappedAtlantisSpaceToken-cjs.js');
-require('./getMappedBreakpointWidth-cjs.js');
 require('./buttonRenderAdapter-cjs.js');
 require('./useRenderElement-cjs.js');
 require('./ComboboxPrimitive-cjs.js');

package/dist/index.mjs

@@ -113,7 +113,6 @@ import 'color';
 import './tslib.es6-es.js';
 import 'react-router-dom';
 import './getMappedAtlantisSpaceToken-es.js';
-import './getMappedBreakpointWidth-es.js';
 import './buttonRenderAdapter-es.js';
 import './useRenderElement-es.js';
 import './ComboboxPrimitive-es.js';

package/dist/primitives/ComboboxPrimitive/ComboboxPrimitive.d.ts

@@ -28,5 +28,5 @@ declare function ComboboxEmpty({ className, ...emptyProps }: ComboboxPrimitiveEm
 declare function ComboboxClear({ className, render, ...clearProps }: ComboboxPrimitiveClearProps): React.JSX.Element;
 declare function ComboboxSeparator({ className, ...separatorProps }: ComboboxPrimitiveSeparatorProps): React.JSX.Element;
 declare const useFilter: typeof BaseCombobox.useFilter;
-declare const useFilteredItems: typeof BaseCombobox.useFilteredItems;
+declare function useFilteredItems<Value = unknown>(): Value[];
 export { ComboboxRoot as Root, ComboboxLabel as Label, ComboboxValue as Value, ComboboxInput as Input, ComboboxInputGroup as InputGroup, ComboboxTrigger as Trigger, ComboboxList as List, ComboboxStatus as Status, ComboboxPortal as Portal, ComboboxBackdrop as Backdrop, ComboboxPositioner as Positioner, ComboboxPopup as Popup, ComboboxArrow as Arrow, ComboboxIcon as Icon, ComboboxGroup as Group, ComboboxGroupLabel as GroupLabel, ComboboxItem as Item, ComboboxItemIndicator as ItemIndicator, ComboboxChips as Chips, ComboboxChip as Chip, ComboboxChipRemove as ChipRemove, ComboboxRow as Row, ComboboxCollection as Collection, ComboboxEmpty as Empty, ComboboxClear as Clear, ComboboxSeparator as Separator, useFilter, useFilteredItems, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.6.2",
+  "version": "9.6.3",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -549,5 +549,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "a3e6d42140c69289bcda7f63dadfc2d47688b5d5"
+  "gitHead": "2ea35aba9020c49cabbece42af65fb007281284e"
 }

package/dist/getMappedBreakpointWidth-cjs.js

@@ -1,21 +0,0 @@
-'use strict';
-
-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;
-};
-
-exports.AtlantisBreakpoints = AtlantisBreakpoints;
-exports.getMappedBreakpointWidth = getMappedBreakpointWidth;

package/dist/getMappedBreakpointWidth-es.js

@@ -1,18 +0,0 @@
-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;
-};
-
-export { AtlantisBreakpoints as A, getMappedBreakpointWidth as g };