@flipdish/ui-library 0.31.0 → 0.31.2

package/dist/components/molecules/Select/components/Combobox.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
+var Input = require('@flipdish/ui-library/components/atoms/Input');
+var useResizeObserver = require('@flipdish/ui-library/hooks/useResizeObserver');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var useHotkeyHint = require('../../../../hooks/__internal__/useHotkeyHint/useHotkeyHint.cjs');
+var componentGuard_utils = require('../../../../utilities/__internal__/componentGuardUtils/componentGuard.utils.cjs');
+var Popover = require('./Popover.cjs');
+var SelectShared = require('./SelectShared.cjs');
+
+const ComboBoxValue = ({ size, shortcut, placeholder, shortcutClassName, icon: IconProp, ref, ...otherProps }) => {
+    const state = React.useContext(reactAriaComponents.ComboBoxStateContext);
+    const shortcutHint = useHotkeyHint.useHotkeyHint('mod+k');
+    const value = state?.selectedItem?.value || null;
+    const inputValue = state?.inputValue || null;
+    const first = inputValue?.split(value?.supportingText)?.[0] || '';
+    const last = inputValue?.split(first)[1];
+    return (jsxRuntime.jsxs(reactAriaComponents.Group, { ref: ref, ...otherProps, className: ({ isFocusWithin, isDisabled }) => cx.cx('relative flex w-full items-center gap-2 rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition-shadow duration-100 ease-linear ring-inset', isDisabled && 'cursor-not-allowed opacity-50', isFocusWithin && 'ring-2 ring-brand', 
+        // Icon styles
+        '*:data-icon:shrink-0 *:data-icon:text-fg-quaternary', SelectShared.sizes[size].root), children: [componentGuard_utils.isReactComponent(IconProp) ? (jsxRuntime.jsx(IconProp, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" })) : React.isValidElement(IconProp) ? (IconProp) : (jsxRuntime.jsx(uiIcons.SearchLg, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" })), jsxRuntime.jsxs("div", { className: "relative flex w-full items-center", children: [inputValue && (jsxRuntime.jsxs("span", { className: cx.cx('absolute top-1/2 z-0 inline-flex w-full -translate-y-1/2 truncate', SelectShared.sizes[size].textContainer), "aria-hidden": "true", children: [jsxRuntime.jsx("p", { className: cx.cx('font-medium text-primary', SelectShared.sizes[size].text), children: first }), last && jsxRuntime.jsx("p", { className: cx.cx('-ml-0.75 text-tertiary', SelectShared.sizes[size].text), children: last })] })), jsxRuntime.jsx(reactAriaComponents.Input, { placeholder: placeholder, className: cx.cx('z-10 w-full appearance-none bg-transparent text-transparent caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed', SelectShared.sizes[size].text) })] }), shortcut && (jsxRuntime.jsx("div", { className: cx.cx('absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex', SelectShared.sizes[size].shortcut, shortcutClassName), children: jsxRuntime.jsx("span", { className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset", "aria-hidden": "true", children: shortcutHint }) }))] }));
+};
+const ComboBox = ({ placeholder = 'Search', shortcut = true, size = 'md', children, items, shortcutClassName, icon, hideRequiredIndicator, ...otherProps }) => {
+    const placeholderRef = React.useRef(null);
+    const [popoverWidth, setPopoverWidth] = React.useState('');
+    // Resize observer for popover width
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We need to pass the setPopoverWidth function to the onResize callback
+    const onResize = React.useCallback(() => {
+        if (!placeholderRef.current)
+            return;
+        const divRect = placeholderRef.current?.getBoundingClientRect();
+        setPopoverWidth(`${divRect.width}px`);
+    }, [placeholderRef, setPopoverWidth]);
+    useResizeObserver.useResizeObserver({
+        ref: placeholderRef,
+        box: 'border-box',
+        onResize,
+    });
+    return (jsxRuntime.jsx(SelectShared.SelectContext.Provider, { value: { size }, children: jsxRuntime.jsx(reactAriaComponents.ComboBox, { menuTrigger: "focus", ...otherProps, children: (state) => (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [otherProps.label && (jsxRuntime.jsx(Input.Label, { isRequired: hideRequiredIndicator ? false : state.isRequired, tooltip: otherProps.tooltip, children: otherProps.label })), jsxRuntime.jsx(ComboBoxValue, { ref: placeholderRef, placeholder: placeholder, shortcut: shortcut, shortcutClassName: shortcutClassName, icon: icon, size: size, 
+                        // This is a workaround to correctly calculating the trigger width
+                        // while using ResizeObserver wasn't 100% reliable.
+                        onFocus: onResize, onPointerEnter: onResize }), jsxRuntime.jsx(Popover.Popover, { size: size, triggerRef: placeholderRef, style: { width: popoverWidth }, className: otherProps.popoverClassName, children: jsxRuntime.jsx(reactAriaComponents.ListBox, { items: items, className: "size-full outline-hidden", children: children }) }), otherProps.hint && (jsxRuntime.jsx(Input.HintText, { isInvalid: state.isInvalid, className: cx.cx(size === 'sm' && 'text-xs'), children: otherProps.hint }))] })) }) }));
+};
+
+exports.ComboBox = ComboBox;
+//# sourceMappingURL=Combobox.cjs.map

package/dist/components/molecules/Select/components/Combobox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.cjs","sources":["../../../../../src/components/molecules/Select/components/Combobox.tsx"],"sourcesContent":[null],"names":["useContext","ComboBoxStateContext","useHotkeyHint","_jsxs","AriaGroup","cx","sizes","isReactComponent","_jsx","isValidElement","SearchLg","AriaInput","useRef","useState","useCallback","useResizeObserver","SelectContext","AriaComboBox","Label","Popover","AriaListBox","HintText"],"mappings":"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"}

package/dist/components/molecules/Select/components/Combobox.d.ts

@@ -0,0 +1,15 @@
+import type { FC, ReactNode, RefAttributes } from 'react';
+import type { ComboBoxProps as AriaComboBoxProps, ListBoxProps as AriaListBoxProps } from 'react-aria-components';
+import { type CommonProps, type SelectItemType } from './SelectShared';
+interface ComboBoxProps extends Omit<AriaComboBoxProps<SelectItemType>, 'children' | 'items'>, RefAttributes<HTMLDivElement>, CommonProps {
+    shortcut?: boolean;
+    items?: SelectItemType[];
+    popoverClassName?: string;
+    shortcutClassName?: string;
+    /** Leading icon component displayed before the input. */
+    icon?: FC | ReactNode;
+    children: AriaListBoxProps<SelectItemType>['children'];
+}
+export declare const ComboBox: ({ placeholder, shortcut, size, children, items, shortcutClassName, icon, hideRequiredIndicator, ...otherProps }: ComboBoxProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Combobox.d.ts.map

package/dist/components/molecules/Select/components/Combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Select/components/Combobox.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,EAA0C,SAAS,EAAO,aAAa,EAAE,MAAM,OAAO,CAAC;AAEvG,OAAO,KAAK,EAAE,aAAa,IAAI,iBAAiB,EAAgC,YAAY,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAWhJ,OAAO,EAAE,KAAK,WAAW,EAAiB,KAAK,cAAc,EAAS,MAAM,gBAAgB,CAAC;AAE7F,UAAU,aAAc,SAAQ,IAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,WAAW;IACvI,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yDAAyD;IACzD,IAAI,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;IACtB,QAAQ,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC;CACxD;AAqFD,eAAO,MAAM,QAAQ,GAAI,iHAUtB,aAAa,gCA4Df,CAAC"}

package/dist/components/molecules/Select/components/Combobox.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { SearchLg } from '@flipdish/ui-icons';
+import { Label, HintText } from '@flipdish/ui-library/components/atoms/Input';
+import { useResizeObserver } from '@flipdish/ui-library/hooks/useResizeObserver';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useRef, useState, useCallback, useContext, isValidElement } from 'react';
+import { ComboBox as ComboBox$1, ListBox, ComboBoxStateContext, Group, Input } from 'react-aria-components';
+import { useHotkeyHint } from '../../../../hooks/__internal__/useHotkeyHint/useHotkeyHint.js';
+import { isReactComponent } from '../../../../utilities/__internal__/componentGuardUtils/componentGuard.utils.js';
+import { Popover } from './Popover.js';
+import { SelectContext, sizes } from './SelectShared.js';
+
+const ComboBoxValue = ({ size, shortcut, placeholder, shortcutClassName, icon: IconProp, ref, ...otherProps }) => {
+    const state = useContext(ComboBoxStateContext);
+    const shortcutHint = useHotkeyHint('mod+k');
+    const value = state?.selectedItem?.value || null;
+    const inputValue = state?.inputValue || null;
+    const first = inputValue?.split(value?.supportingText)?.[0] || '';
+    const last = inputValue?.split(first)[1];
+    return (jsxs(Group, { ref: ref, ...otherProps, className: ({ isFocusWithin, isDisabled }) => cx('relative flex w-full items-center gap-2 rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition-shadow duration-100 ease-linear ring-inset', isDisabled && 'cursor-not-allowed opacity-50', isFocusWithin && 'ring-2 ring-brand', 
+        // Icon styles
+        '*:data-icon:shrink-0 *:data-icon:text-fg-quaternary', sizes[size].root), children: [isReactComponent(IconProp) ? (jsx(IconProp, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" })) : isValidElement(IconProp) ? (IconProp) : (jsx(SearchLg, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" })), jsxs("div", { className: "relative flex w-full items-center", children: [inputValue && (jsxs("span", { className: cx('absolute top-1/2 z-0 inline-flex w-full -translate-y-1/2 truncate', sizes[size].textContainer), "aria-hidden": "true", children: [jsx("p", { className: cx('font-medium text-primary', sizes[size].text), children: first }), last && jsx("p", { className: cx('-ml-0.75 text-tertiary', sizes[size].text), children: last })] })), jsx(Input, { placeholder: placeholder, className: cx('z-10 w-full appearance-none bg-transparent text-transparent caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed', sizes[size].text) })] }), shortcut && (jsx("div", { className: cx('absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex', sizes[size].shortcut, shortcutClassName), children: jsx("span", { className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset", "aria-hidden": "true", children: shortcutHint }) }))] }));
+};
+const ComboBox = ({ placeholder = 'Search', shortcut = true, size = 'md', children, items, shortcutClassName, icon, hideRequiredIndicator, ...otherProps }) => {
+    const placeholderRef = useRef(null);
+    const [popoverWidth, setPopoverWidth] = useState('');
+    // Resize observer for popover width
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We need to pass the setPopoverWidth function to the onResize callback
+    const onResize = useCallback(() => {
+        if (!placeholderRef.current)
+            return;
+        const divRect = placeholderRef.current?.getBoundingClientRect();
+        setPopoverWidth(`${divRect.width}px`);
+    }, [placeholderRef, setPopoverWidth]);
+    useResizeObserver({
+        ref: placeholderRef,
+        box: 'border-box',
+        onResize,
+    });
+    return (jsx(SelectContext.Provider, { value: { size }, children: jsx(ComboBox$1, { menuTrigger: "focus", ...otherProps, children: (state) => (jsxs("div", { className: "flex flex-col gap-1.5", children: [otherProps.label && (jsx(Label, { isRequired: hideRequiredIndicator ? false : state.isRequired, tooltip: otherProps.tooltip, children: otherProps.label })), jsx(ComboBoxValue, { ref: placeholderRef, placeholder: placeholder, shortcut: shortcut, shortcutClassName: shortcutClassName, icon: icon, size: size, 
+                        // This is a workaround to correctly calculating the trigger width
+                        // while using ResizeObserver wasn't 100% reliable.
+                        onFocus: onResize, onPointerEnter: onResize }), jsx(Popover, { size: size, triggerRef: placeholderRef, style: { width: popoverWidth }, className: otherProps.popoverClassName, children: jsx(ListBox, { items: items, className: "size-full outline-hidden", children: children }) }), otherProps.hint && (jsx(HintText, { isInvalid: state.isInvalid, className: cx(size === 'sm' && 'text-xs'), children: otherProps.hint }))] })) }) }));
+};
+
+export { ComboBox };
+//# sourceMappingURL=Combobox.js.map

package/dist/components/molecules/Select/components/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sources":["../../../../../src/components/molecules/Select/components/Combobox.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaGroup","_jsx","AriaInput","AriaComboBox","AriaListBox"],"mappings":"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"}

package/dist/components/molecules/Select/components/MultiSelect.cjs

@@ -0,0 +1,104 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
+var Button = require('@flipdish/ui-library/components/atoms/Button');
+var FeaturedIcon = require('@flipdish/ui-library/components/atoms/FeaturedIcon');
+var Input = require('@flipdish/ui-library/components/atoms/Input');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var children_utils = require('../../../../utilities/__internal__/childrenUtils/children.utils.cjs');
+var SelectItem = require('./SelectItem.cjs');
+var SelectShared = require('./SelectShared.cjs');
+
+const searchSizes = {
+    sm: { wrapper: 'py-1', root: 'px-3 py-2 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]', text: 'text-sm' },
+    md: { wrapper: 'py-0.5', root: 'px-3 py-2 gap-2 *:data-icon:size-5', text: 'text-md' },
+    lg: { wrapper: 'py-0.5', root: 'px-3.5 py-2.5 gap-2 *:data-icon:size-5', text: 'text-md' },
+};
+const footerButtonSize = {
+    sm: 'xs',
+    md: 'sm',
+    lg: 'sm',
+};
+const popoverMaxHeights = {
+    sm: 'max-h-68',
+    md: 'max-h-76',
+    lg: 'max-h-92',
+};
+const MultiSelectFooter = ({ size = 'sm', onReset, onSelectAll, className }) => {
+    const btnSize = footerButtonSize[size];
+    return (jsxRuntime.jsxs("div", { className: cx.cx('flex shrink-0 items-center justify-between border-t border-secondary p-3', className), children: [jsxRuntime.jsx(Button.Button, { size: btnSize, color: "secondary", onClick: onReset, children: "Reset" }), jsxRuntime.jsx(Button.Button, { size: btnSize, color: "secondary", onClick: onSelectAll, children: "Select all" })] }));
+};
+const MultiSelectEmptyState = ({ title = 'No results found', description = 'Please try a different search term.', onClearSearch, className, }) => (jsxRuntime.jsxs("div", { className: cx.cx('flex flex-col items-center gap-3 px-4 py-4', className), children: [jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3", children: [jsxRuntime.jsx(FeaturedIcon.FeaturedIcon, { icon: uiIcons.SearchLg, size: "sm", color: "gray", theme: "modern" }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5 text-center text-sm", children: [jsxRuntime.jsx("p", { className: "font-semibold text-primary", children: title }), jsxRuntime.jsx("p", { className: "text-tertiary", children: description })] })] }), onClearSearch && (jsxRuntime.jsx(Button.Button, { size: "sm", color: "link-color", onClick: onClearSearch, children: "Clear search" }))] }));
+const MultiSelectRoot = ({ items, children, size = 'md', selectedKeys, defaultSelectedKeys, onSelectionChange, isDisabled, isRequired, isInvalid, 'aria-label': ariaLabel, placeholder = 'Select', label, hint, tooltip, hideRequiredIndicator, popoverClassName, className, onReset, onSelectAll, showFooter = true, showSearch = true, emptyStateTitle, emptyStateDescription, selectedCountFormatter, supportingText, ref, 'data-testid': dataTestId, }) => {
+    const { contains } = reactAriaComponents.useFilter({ sensitivity: 'base' });
+    const [searchValue, setSearchValue] = React.useState('');
+    const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'multi-select', rootName: 'multi-select' });
+    const triggerRef = React.useRef(null);
+    const [popoverWidth, setPopoverWidth] = React.useState('');
+    const onResize = React.useCallback(() => {
+        if (!triggerRef.current)
+            return;
+        const rect = triggerRef.current.getBoundingClientRect();
+        setPopoverWidth(`${rect.width}px`);
+    }, []);
+    // Controlled when `selectedKeys` is supplied; otherwise track selection internally
+    // (seeded from `defaultSelectedKeys`) so the trigger summary, footer, and item ticks
+    // all reflect choices even without the parent wiring `onSelectionChange`.
+    const isControlled = selectedKeys !== undefined;
+    const [internalSelectedKeys, setInternalSelectedKeys] = React.useState(defaultSelectedKeys ?? new Set());
+    const currentSelectedKeys = isControlled ? selectedKeys : internalSelectedKeys;
+    const handleSelectionChange = (keys) => {
+        if (!isControlled)
+            setInternalSelectedKeys(keys);
+        onSelectionChange?.(keys);
+    };
+    const handleReset = () => {
+        if (!isControlled)
+            setInternalSelectedKeys(new Set());
+        onReset?.();
+    };
+    // Every selectable key — from `items` when data-driven, else from the ids of the
+    // static `MultiSelect.Item` children, so "Select all" works in both modes.
+    const getSelectableKeys = () => {
+        if (items)
+            return new Set(items.map((item) => item.id));
+        if (typeof children === 'function')
+            return new Set();
+        return new Set(children_utils.flattenChildren(children)
+            .filter(React.isValidElement)
+            .map((child) => child.props.id)
+            .filter((id) => id != null));
+    };
+    const handleSelectAll = () => {
+        if (!isControlled)
+            setInternalSelectedKeys(getSelectableKeys());
+        onSelectAll?.();
+    };
+    const selectedCount = currentSelectedKeys instanceof Set ? currentSelectedKeys.size : currentSelectedKeys === 'all' ? (items?.length ?? 0) : 0;
+    const hasSelection = selectedCount > 0;
+    const handleClearSearch = React.useCallback(() => {
+        setSearchValue('');
+    }, []);
+    return (jsxRuntime.jsx(SelectShared.SelectContext.Provider, { value: { size, testIdPrefix: rootTestId }, children: jsxRuntime.jsxs("div", { ref: ref, "data-testid": rootTestId, className: cx.cx('flex flex-col gap-1.5', className), children: [label && (jsxRuntime.jsx(Input.Label, { isRequired: hideRequiredIndicator ? false : isRequired, isInvalid: isInvalid, tooltip: tooltip, children: label })), jsxRuntime.jsxs(reactAriaComponents.DialogTrigger, { children: [jsxRuntime.jsx(reactAriaComponents.Button, { ref: triggerRef, "data-testid": testIdUtils.joinTestId(rootTestId, 'trigger'), isDisabled: isDisabled, "aria-label": label ? undefined : ariaLabel, "data-invalid": isInvalid || undefined, "data-required": isRequired || undefined, onClick: onResize, className: (state) => cx.cx('relative flex w-full cursor-pointer items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset', (state.isFocusVisible || state.isPressed) && 'ring-2 ring-brand', state.isDisabled && 'cursor-not-allowed opacity-50'), children: jsxRuntime.jsxs("span", { className: cx.cx('flex w-full items-center truncate text-left', SelectShared.sizes[size].root, '*:data-icon:shrink-0 *:data-icon:text-fg-quaternary'), children: [hasSelection ? (jsxRuntime.jsxs("span", { className: cx.cx('flex items-center', SelectShared.sizes[size].textContainer), children: [jsxRuntime.jsx("span", { className: cx.cx('font-medium text-primary', SelectShared.sizes[size].text), children: selectedCountFormatter ? selectedCountFormatter(selectedCount) : `${selectedCount} selected` }), supportingText && jsxRuntime.jsx("span", { className: cx.cx('text-tertiary', SelectShared.sizes[size].text), children: supportingText })] })) : (jsxRuntime.jsx("span", { className: cx.cx('text-placeholder', SelectShared.sizes[size].text), children: placeholder })), jsxRuntime.jsx(uiIcons.ChevronDown, { "aria-hidden": "true", className: cx.cx('ml-auto shrink-0 text-fg-quaternary', size === 'lg' ? 'size-5' : 'size-4 stroke-[2.25px]') })] }) }), jsxRuntime.jsx(reactAriaComponents.Popover, { placement: "bottom", offset: 4, containerPadding: 0, style: { width: popoverWidth || undefined }, className: (state) => cx.cx('w-(--trigger-width) origin-(--trigger-anchor-point) overflow-hidden rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt outline-hidden', 
+                            // Only while animating: a resting `will-change: transform` stops iOS WebKit touch-scrolling the nested list.
+                            (state.isEntering || state.isExiting) && 'will-change-transform', state.isEntering &&
+                                'duration-150 ease-out animate-in fade-in placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5', state.isExiting &&
+                                'duration-100 ease-in animate-out fade-out placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5', popoverClassName), children: jsxRuntime.jsxs(reactAriaComponents.Dialog, { className: "flex max-h-[inherit] flex-col outline-hidden", children: [jsxRuntime.jsxs(reactAriaComponents.Autocomplete, { filter: contains, inputValue: searchValue, onInputChange: setSearchValue, children: [showSearch && (jsxRuntime.jsx("div", { className: cx.cx('shrink-0 border-b border-secondary', searchSizes[size].wrapper), children: jsxRuntime.jsx(reactAriaComponents.SearchField, { "aria-label": "Search", value: searchValue, onChange: setSearchValue, autoFocus: true, children: jsxRuntime.jsxs("div", { className: cx.cx('flex items-center', searchSizes[size].root), children: [jsxRuntime.jsx(uiIcons.SearchLg, { "data-icon": true, "aria-hidden": "true", className: "shrink-0 text-fg-quaternary" }), jsxRuntime.jsx(reactAriaComponents.Input, { placeholder: "Search", className: cx.cx('w-full appearance-none bg-transparent text-primary caret-alpha-black/90 outline-hidden placeholder:text-placeholder', searchSizes[size].text) })] }) }) })), jsxRuntime.jsx(reactAriaComponents.ListBox, { "aria-label": label || 'Options', items: items, selectionMode: "multiple", selectedKeys: currentSelectedKeys, onSelectionChange: handleSelectionChange, renderEmptyState: () => (jsxRuntime.jsx(MultiSelectEmptyState, { title: emptyStateTitle, description: emptyStateDescription, onClearSearch: searchValue ? handleClearSearch : undefined })), className: cx.cx('min-h-0 overflow-y-auto py-1 outline-hidden', popoverMaxHeights[size]), children: children })] }), showFooter && jsxRuntime.jsx(MultiSelectFooter, { size: size, onReset: handleReset, onSelectAll: handleSelectAll })] }) })] }), hint && (jsxRuntime.jsx(Input.HintText, { isInvalid: isInvalid, className: cx.cx(size === 'sm' && 'text-xs'), children: hint }))] }) }));
+};
+/**
+ * An interactive dropdown that lets the user select multiple options from a
+ * searchable list, with built-in Reset and Select all footer actions.
+ *
+ * @summary pick multiple options from a searchable dropdown list
+ */
+const MultiSelect = MultiSelectRoot;
+MultiSelect.Item = SelectItem.SelectItem;
+MultiSelect.Footer = MultiSelectFooter;
+MultiSelect.EmptyState = MultiSelectEmptyState;
+
+exports.MultiSelect = MultiSelect;
+//# sourceMappingURL=MultiSelect.cjs.map

package/dist/components/molecules/Select/components/MultiSelect.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.cjs","sources":["../../../../../src/components/molecules/Select/components/MultiSelect.tsx"],"sourcesContent":[null],"names":["_jsxs","cx","_jsx","Button","FeaturedIcon","SearchLg","useFilter","useState","useResolvedTestId","useRef","useCallback","flattenChildren","isValidElement","SelectContext","Label","AriaDialogTrigger","AriaButton","joinTestId","sizes","ChevronDown","AriaPopover","AriaDialog","AriaAutocomplete","AriaSearchField","AriaInput","AriaListBox","HintText","SelectItem"],"mappings":"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"}

package/dist/components/molecules/Select/components/MultiSelect.d.ts

@@ -0,0 +1,95 @@
+import type { ReactNode, RefAttributes } from 'react';
+import type { Selection } from 'react-aria-components';
+import { SelectItem } from './SelectItem';
+import { type CommonProps, type SelectItemType } from './SelectShared';
+export interface MultiSelectFooterProps {
+    /**
+     * The size of the footer buttons.
+     * @default "sm"
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /** Handler that is called when the reset button is clicked. */
+    onReset?: () => void;
+    /** Handler that is called when the select all button is clicked. */
+    onSelectAll?: () => void;
+    /** Additional class name. */
+    className?: string;
+}
+declare const MultiSelectFooter: ({ size, onReset, onSelectAll, className }: MultiSelectFooterProps) => import("react").JSX.Element;
+export interface MultiSelectEmptyStateProps {
+    /**
+     * The title to display.
+     * @default "No results found"
+     */
+    title?: string;
+    /**
+     * The description to display.
+     * @default "Please try a different search term."
+     */
+    description?: string;
+    /** Handler that is called when the clear search button is clicked. */
+    onClearSearch?: () => void;
+    /** Additional class name. */
+    className?: string;
+}
+declare const MultiSelectEmptyState: ({ title, description, onClearSearch, className, }: MultiSelectEmptyStateProps) => import("react").JSX.Element;
+export interface MultiSelectProps extends RefAttributes<HTMLDivElement>, CommonProps {
+    /** The items to display in the listbox. */
+    items?: SelectItemType[];
+    /** The children to render for each item. */
+    children: ReactNode | ((item: SelectItemType) => ReactNode);
+    /** The currently selected keys (controlled). */
+    selectedKeys?: Selection;
+    /** The initial selected keys (uncontrolled). */
+    defaultSelectedKeys?: Selection;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: (keys: Selection) => void;
+    /** Whether the select is disabled. */
+    isDisabled?: boolean;
+    /** Whether the select is required. */
+    isRequired?: boolean;
+    /** Whether the select is in an invalid state. */
+    isInvalid?: boolean;
+    /** Accessible name for the trigger, for when no visible `label` is provided. */
+    'aria-label'?: string;
+    /** Additional class name for the popover. */
+    popoverClassName?: string;
+    /** Additional class name for the root element. */
+    className?: string;
+    /** Handler that is called when the reset button is clicked. */
+    onReset?: () => void;
+    /** Handler that is called when the select all button is clicked. */
+    onSelectAll?: () => void;
+    /**
+     * Whether to show the footer with reset and select all buttons.
+     * @default true
+     */
+    showFooter?: boolean;
+    /**
+     * Whether to show the search input in the popover.
+     * @default true
+     */
+    showSearch?: boolean;
+    /** The title to display when no items match the search. */
+    emptyStateTitle?: string;
+    /** The description to display when no items match the search. */
+    emptyStateDescription?: string;
+    /** Custom formatter for the selected count text in the trigger. */
+    selectedCountFormatter?: (count: number) => ReactNode;
+    /** Supporting text displayed next to the selected count in the trigger. */
+    supportingText?: ReactNode;
+}
+declare const MultiSelectRoot: ({ items, children, size, selectedKeys, defaultSelectedKeys, onSelectionChange, isDisabled, isRequired, isInvalid, "aria-label": ariaLabel, placeholder, label, hint, tooltip, hideRequiredIndicator, popoverClassName, className, onReset, onSelectAll, showFooter, showSearch, emptyStateTitle, emptyStateDescription, selectedCountFormatter, supportingText, ref, "data-testid": dataTestId, }: MultiSelectProps) => import("react").JSX.Element;
+/**
+ * An interactive dropdown that lets the user select multiple options from a
+ * searchable list, with built-in Reset and Select all footer actions.
+ *
+ * @summary pick multiple options from a searchable dropdown list
+ */
+declare const MultiSelect: typeof MultiSelectRoot & {
+    Item: typeof SelectItem;
+    Footer: typeof MultiSelectFooter;
+    EmptyState: typeof MultiSelectEmptyState;
+};
+export { MultiSelect };
+//# sourceMappingURL=MultiSelect.d.ts.map

package/dist/components/molecules/Select/components/MultiSelect.d.ts.map

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

package/dist/components/molecules/Select/components/MultiSelect.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChevronDown, SearchLg } from '@flipdish/ui-icons';
+import { Button as Button$1 } from '@flipdish/ui-library/components/atoms/Button';
+import { FeaturedIcon } from '@flipdish/ui-library/components/atoms/FeaturedIcon';
+import { Label, HintText } from '@flipdish/ui-library/components/atoms/Input';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+import { useState, useRef, useCallback, isValidElement } from 'react';
+import { useFilter, DialogTrigger, Button, Popover, Dialog, Autocomplete, SearchField, Input, ListBox } from 'react-aria-components';
+import { flattenChildren } from '../../../../utilities/__internal__/childrenUtils/children.utils.js';
+import { SelectItem } from './SelectItem.js';
+import { SelectContext, sizes } from './SelectShared.js';
+
+const searchSizes = {
+    sm: { wrapper: 'py-1', root: 'px-3 py-2 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]', text: 'text-sm' },
+    md: { wrapper: 'py-0.5', root: 'px-3 py-2 gap-2 *:data-icon:size-5', text: 'text-md' },
+    lg: { wrapper: 'py-0.5', root: 'px-3.5 py-2.5 gap-2 *:data-icon:size-5', text: 'text-md' },
+};
+const footerButtonSize = {
+    sm: 'xs',
+    md: 'sm',
+    lg: 'sm',
+};
+const popoverMaxHeights = {
+    sm: 'max-h-68',
+    md: 'max-h-76',
+    lg: 'max-h-92',
+};
+const MultiSelectFooter = ({ size = 'sm', onReset, onSelectAll, className }) => {
+    const btnSize = footerButtonSize[size];
+    return (jsxs("div", { className: cx('flex shrink-0 items-center justify-between border-t border-secondary p-3', className), children: [jsx(Button$1, { size: btnSize, color: "secondary", onClick: onReset, children: "Reset" }), jsx(Button$1, { size: btnSize, color: "secondary", onClick: onSelectAll, children: "Select all" })] }));
+};
+const MultiSelectEmptyState = ({ title = 'No results found', description = 'Please try a different search term.', onClearSearch, className, }) => (jsxs("div", { className: cx('flex flex-col items-center gap-3 px-4 py-4', className), children: [jsxs("div", { className: "flex flex-col items-center gap-3", children: [jsx(FeaturedIcon, { icon: SearchLg, size: "sm", color: "gray", theme: "modern" }), jsxs("div", { className: "flex flex-col items-center gap-0.5 text-center text-sm", children: [jsx("p", { className: "font-semibold text-primary", children: title }), jsx("p", { className: "text-tertiary", children: description })] })] }), onClearSearch && (jsx(Button$1, { size: "sm", color: "link-color", onClick: onClearSearch, children: "Clear search" }))] }));
+const MultiSelectRoot = ({ items, children, size = 'md', selectedKeys, defaultSelectedKeys, onSelectionChange, isDisabled, isRequired, isInvalid, 'aria-label': ariaLabel, placeholder = 'Select', label, hint, tooltip, hideRequiredIndicator, popoverClassName, className, onReset, onSelectAll, showFooter = true, showSearch = true, emptyStateTitle, emptyStateDescription, selectedCountFormatter, supportingText, ref, 'data-testid': dataTestId, }) => {
+    const { contains } = useFilter({ sensitivity: 'base' });
+    const [searchValue, setSearchValue] = useState('');
+    const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'multi-select', rootName: 'multi-select' });
+    const triggerRef = useRef(null);
+    const [popoverWidth, setPopoverWidth] = useState('');
+    const onResize = useCallback(() => {
+        if (!triggerRef.current)
+            return;
+        const rect = triggerRef.current.getBoundingClientRect();
+        setPopoverWidth(`${rect.width}px`);
+    }, []);
+    // Controlled when `selectedKeys` is supplied; otherwise track selection internally
+    // (seeded from `defaultSelectedKeys`) so the trigger summary, footer, and item ticks
+    // all reflect choices even without the parent wiring `onSelectionChange`.
+    const isControlled = selectedKeys !== undefined;
+    const [internalSelectedKeys, setInternalSelectedKeys] = useState(defaultSelectedKeys ?? new Set());
+    const currentSelectedKeys = isControlled ? selectedKeys : internalSelectedKeys;
+    const handleSelectionChange = (keys) => {
+        if (!isControlled)
+            setInternalSelectedKeys(keys);
+        onSelectionChange?.(keys);
+    };
+    const handleReset = () => {
+        if (!isControlled)
+            setInternalSelectedKeys(new Set());
+        onReset?.();
+    };
+    // Every selectable key — from `items` when data-driven, else from the ids of the
+    // static `MultiSelect.Item` children, so "Select all" works in both modes.
+    const getSelectableKeys = () => {
+        if (items)
+            return new Set(items.map((item) => item.id));
+        if (typeof children === 'function')
+            return new Set();
+        return new Set(flattenChildren(children)
+            .filter(isValidElement)
+            .map((child) => child.props.id)
+            .filter((id) => id != null));
+    };
+    const handleSelectAll = () => {
+        if (!isControlled)
+            setInternalSelectedKeys(getSelectableKeys());
+        onSelectAll?.();
+    };
+    const selectedCount = currentSelectedKeys instanceof Set ? currentSelectedKeys.size : currentSelectedKeys === 'all' ? (items?.length ?? 0) : 0;
+    const hasSelection = selectedCount > 0;
+    const handleClearSearch = useCallback(() => {
+        setSearchValue('');
+    }, []);
+    return (jsx(SelectContext.Provider, { value: { size, testIdPrefix: rootTestId }, children: jsxs("div", { ref: ref, "data-testid": rootTestId, className: cx('flex flex-col gap-1.5', className), children: [label && (jsx(Label, { isRequired: hideRequiredIndicator ? false : isRequired, isInvalid: isInvalid, tooltip: tooltip, children: label })), jsxs(DialogTrigger, { children: [jsx(Button, { ref: triggerRef, "data-testid": joinTestId(rootTestId, 'trigger'), isDisabled: isDisabled, "aria-label": label ? undefined : ariaLabel, "data-invalid": isInvalid || undefined, "data-required": isRequired || undefined, onClick: onResize, className: (state) => cx('relative flex w-full cursor-pointer items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset', (state.isFocusVisible || state.isPressed) && 'ring-2 ring-brand', state.isDisabled && 'cursor-not-allowed opacity-50'), children: jsxs("span", { className: cx('flex w-full items-center truncate text-left', sizes[size].root, '*:data-icon:shrink-0 *:data-icon:text-fg-quaternary'), children: [hasSelection ? (jsxs("span", { className: cx('flex items-center', sizes[size].textContainer), children: [jsx("span", { className: cx('font-medium text-primary', sizes[size].text), children: selectedCountFormatter ? selectedCountFormatter(selectedCount) : `${selectedCount} selected` }), supportingText && jsx("span", { className: cx('text-tertiary', sizes[size].text), children: supportingText })] })) : (jsx("span", { className: cx('text-placeholder', sizes[size].text), children: placeholder })), jsx(ChevronDown, { "aria-hidden": "true", className: cx('ml-auto shrink-0 text-fg-quaternary', size === 'lg' ? 'size-5' : 'size-4 stroke-[2.25px]') })] }) }), jsx(Popover, { placement: "bottom", offset: 4, containerPadding: 0, style: { width: popoverWidth || undefined }, className: (state) => cx('w-(--trigger-width) origin-(--trigger-anchor-point) overflow-hidden rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt outline-hidden', 
+                            // Only while animating: a resting `will-change: transform` stops iOS WebKit touch-scrolling the nested list.
+                            (state.isEntering || state.isExiting) && 'will-change-transform', state.isEntering &&
+                                'duration-150 ease-out animate-in fade-in placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5', state.isExiting &&
+                                'duration-100 ease-in animate-out fade-out placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5', popoverClassName), children: jsxs(Dialog, { className: "flex max-h-[inherit] flex-col outline-hidden", children: [jsxs(Autocomplete, { filter: contains, inputValue: searchValue, onInputChange: setSearchValue, children: [showSearch && (jsx("div", { className: cx('shrink-0 border-b border-secondary', searchSizes[size].wrapper), children: jsx(SearchField, { "aria-label": "Search", value: searchValue, onChange: setSearchValue, autoFocus: true, children: jsxs("div", { className: cx('flex items-center', searchSizes[size].root), children: [jsx(SearchLg, { "data-icon": true, "aria-hidden": "true", className: "shrink-0 text-fg-quaternary" }), jsx(Input, { placeholder: "Search", className: cx('w-full appearance-none bg-transparent text-primary caret-alpha-black/90 outline-hidden placeholder:text-placeholder', searchSizes[size].text) })] }) }) })), jsx(ListBox, { "aria-label": label || 'Options', items: items, selectionMode: "multiple", selectedKeys: currentSelectedKeys, onSelectionChange: handleSelectionChange, renderEmptyState: () => (jsx(MultiSelectEmptyState, { title: emptyStateTitle, description: emptyStateDescription, onClearSearch: searchValue ? handleClearSearch : undefined })), className: cx('min-h-0 overflow-y-auto py-1 outline-hidden', popoverMaxHeights[size]), children: children })] }), showFooter && jsx(MultiSelectFooter, { size: size, onReset: handleReset, onSelectAll: handleSelectAll })] }) })] }), hint && (jsx(HintText, { isInvalid: isInvalid, className: cx(size === 'sm' && 'text-xs'), children: hint }))] }) }));
+};
+/**
+ * An interactive dropdown that lets the user select multiple options from a
+ * searchable list, with built-in Reset and Select all footer actions.
+ *
+ * @summary pick multiple options from a searchable dropdown list
+ */
+const MultiSelect = MultiSelectRoot;
+MultiSelect.Item = SelectItem;
+MultiSelect.Footer = MultiSelectFooter;
+MultiSelect.EmptyState = MultiSelectEmptyState;
+
+export { MultiSelect };
+//# sourceMappingURL=MultiSelect.js.map

package/dist/components/molecules/Select/components/MultiSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.js","sources":["../../../../../src/components/molecules/Select/components/MultiSelect.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","Button","AriaDialogTrigger","AriaButton","AriaPopover","AriaDialog","AriaAutocomplete","AriaSearchField","AriaInput","AriaListBox"],"mappings":"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"}

package/dist/components/molecules/Select/components/Popover.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var reactAriaComponents = require('react-aria-components');
+
+const Popover = (props) => {
+    return (jsxRuntime.jsx(reactAriaComponents.Popover, { placement: "bottom", containerPadding: 0, offset: 4, ...props, className: (state) => cx.cx('w-(--trigger-width) origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto rounded-lg bg-primary py-1 shadow-lg ring-1 ring-secondary_alt outline-hidden will-change-transform', state.isEntering &&
+            'duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5', state.isExiting &&
+            'duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5', props.size === 'sm' && 'max-h-56!', props.size === 'md' && 'max-h-64!', props.size === 'lg' && 'max-h-80!', typeof props.className === 'function' ? props.className(state) : props.className) }));
+};
+
+exports.Popover = Popover;
+//# sourceMappingURL=Popover.cjs.map

package/dist/components/molecules/Select/components/Popover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.cjs","sources":["../../../../../src/components/molecules/Select/components/Popover.tsx"],"sourcesContent":[null],"names":["_jsx","AriaPopover","cx"],"mappings":";;;;;;AAWO,MAAM,OAAO,GAAG,CAAC,KAAmB,KAAI;AAC7C,IAAA,QACEA,cAAA,CAACC,2BAAW,EAAA,EACV,SAAS,EAAC,QAAQ,EAClB,gBAAgB,EAAE,CAAC,EACnB,MAAM,EAAE,CAAC,EAAA,GACL,KAAK,EACT,SAAS,EAAE,CAAC,KAAK,KACfC,KAAE,CACA,2LAA2L,EAE3L,KAAK,CAAC,UAAU;YACd,+JAA+J,EACjK,KAAK,CAAC,SAAS;YACb,6JAA6J,EAE/J,KAAK,CAAC,IAAI,KAAK,IAAI,IAAI,WAAW,EAClC,KAAK,CAAC,IAAI,KAAK,IAAI,IAAI,WAAW,EAClC,KAAK,CAAC,IAAI,KAAK,IAAI,IAAI,WAAW,EAElC,OAAO,KAAK,CAAC,SAAS,KAAK,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,SAAS,CACjF,EAAA,CAEH;AAEN;;"}

package/dist/components/molecules/Select/components/Popover.d.ts

@@ -0,0 +1,8 @@
+import type { RefAttributes } from 'react';
+import type { PopoverProps as AriaPopoverProps } from 'react-aria-components';
+interface PopoverProps extends AriaPopoverProps, RefAttributes<HTMLElement> {
+    size: 'sm' | 'md' | 'lg';
+}
+export declare const Popover: (props: PopoverProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Popover.d.ts.map

package/dist/components/molecules/Select/components/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Select/components/Popover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,YAAY,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG9E,UAAU,YAAa,SAAQ,gBAAgB,EAAE,aAAa,CAAC,WAAW,CAAC;IACzE,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,gCAyB1C,CAAC"}

package/dist/components/molecules/Select/components/Popover.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { Popover as Popover$1 } from 'react-aria-components';
+
+const Popover = (props) => {
+    return (jsx(Popover$1, { placement: "bottom", containerPadding: 0, offset: 4, ...props, className: (state) => cx('w-(--trigger-width) origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto rounded-lg bg-primary py-1 shadow-lg ring-1 ring-secondary_alt outline-hidden will-change-transform', state.isEntering &&
+            'duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5', state.isExiting &&
+            'duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5', props.size === 'sm' && 'max-h-56!', props.size === 'md' && 'max-h-64!', props.size === 'lg' && 'max-h-80!', typeof props.className === 'function' ? props.className(state) : props.className) }));
+};
+
+export { Popover };
+//# sourceMappingURL=Popover.js.map

package/dist/components/molecules/Select/components/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../../../src/components/molecules/Select/components/Popover.tsx"],"sourcesContent":[null],"names":["_jsx","AriaPopover"],"mappings":";;;;AAWO,MAAM,OAAO,GAAG,CAAC,KAAmB,KAAI;AAC7C,IAAA,QACEA,GAAA,CAACC,SAAW,EAAA,EACV,SAAS,EAAC,QAAQ,EAClB,gBAAgB,EAAE,CAAC,EACnB,MAAM,EAAE,CAAC,EAAA,GACL,KAAK,EACT,SAAS,EAAE,CAAC,KAAK,KACf,EAAE,CACA,2LAA2L,EAE3L,KAAK,CAAC,UAAU;YACd,+JAA+J,EACjK,KAAK,CAAC,SAAS;YACb,6JAA6J,EAE/J,KAAK,CAAC,IAAI,KAAK,IAAI,IAAI,WAAW,EAClC,KAAK,CAAC,IAAI,KAAK,IAAI,IAAI,WAAW,EAClC,KAAK,CAAC,IAAI,KAAK,IAAI,IAAI,WAAW,EAElC,OAAO,KAAK,CAAC,SAAS,KAAK,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,SAAS,CACjF,EAAA,CAEH;AAEN;;"}