@macive/ui 0.0.21 → 0.0.23

package/dist/src/components/Banner/Banner.js

@@ -26,10 +26,7 @@ exports.Banner = (0, react_1.forwardRef)(function Banner({ icon, action, seconda
     const { wrapperRef, handleKeyUp, handleBlur, handleMouseUp, shouldShowFocus } = useBannerFocus(bannerRef);
     const { defaultIcon, iconColor, ariaRoleType } = useBannerAttributes(status);
     const iconName = icon || defaultIcon;
-    const className = (0, css_1.classNames)(Banner_classnames_1.default.Banner, 
-    // status && styles[variationName('status', status)],
-    //@ts-expect-error unknown
-    status && Banner_classnames_1.default[status], onDismiss && Banner_classnames_1.default.hasDismiss, shouldShowFocus && Banner_classnames_1.default.keyFocused, withinContentContainer ? Banner_classnames_1.default.withinContentContainer : Banner_classnames_1.default.withinPage);
+    const className = (0, css_1.classNames)(Banner_classnames_1.default.Banner, status && Banner_classnames_1.default[(0, css_1.variationName)('status', status)], onDismiss && Banner_classnames_1.default.hasDismiss, shouldShowFocus && Banner_classnames_1.default.keyFocused, withinContentContainer ? Banner_classnames_1.default.withinContentContainer : Banner_classnames_1.default.withinPage);
     let headingMarkup = null;
     if (title) {
         headingMarkup = ((0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'h2', variant: 'headingMd', breakWord: true, children: title }));

package/dist/src/components/ComboSelect/ComboSelect.js

@@ -0,0 +1,128 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboSelect = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const HorizontalStack_1 = require("../HorizontalStack");
+const Icons_1 = require("../Icons");
+const react_1 = require("react");
+const Tag_1 = require("../Tag");
+const ActionList_1 = require("../ActionList");
+const Checkbox_1 = require("../Checkbox");
+const Icon_1 = require("../Icon");
+const Text_1 = require("../Text");
+const Popover_1 = require("../Popover");
+const Button_1 = require("../Button");
+const Spinner_1 = require("../Spinner");
+const Listbox_1 = require("../Listbox");
+const Combobox_1 = require("../Combobox");
+function ComboSelect({ label, options: initialOptions, value, onChange, placeholder = 'Select options', disabled = false, error, allowCustom = true, loading = false, }) {
+    const [inputValue, setInputValue] = (0, react_1.useState)('');
+    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(initialOptions);
+    const [popoverActive, setPopoverActive] = (0, react_1.useState)(false);
+    // Include "Custom" option if allowed
+    const allOptions = (0, react_1.useMemo)(() => allowCustom ? [...initialOptions, { label: 'Custom', value: 'Custom' }] : initialOptions, [initialOptions, allowCustom]);
+    // Non-custom options for "Select All"
+    const nonCustomOptions = (0, react_1.useMemo)(() => allOptions.filter((option) => option.value !== 'Custom'), [allOptions]);
+    // Check if all non-custom options are selected
+    const isAllSelected = (0, react_1.useMemo)(() => nonCustomOptions.length > 0 &&
+        nonCustomOptions.every((option) => value.includes(option.value)), [nonCustomOptions, value]);
+    // Sync filteredOptions with allOptions when initialOptions changes
+    (0, react_1.useEffect)(() => {
+        if (inputValue === '') {
+            setFilteredOptions(allOptions);
+        }
+        else {
+            const filterRegex = new RegExp(escapeSpecialRegExCharacters(inputValue), 'i');
+            setFilteredOptions(allOptions.filter((option) => option.label.match(filterRegex)));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [allOptions, inputValue]);
+    // Escape special regex characters for filtering
+    const escapeSpecialRegExCharacters = (0, react_1.useCallback)((str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), []);
+    // Update filtered options based on input
+    const updateText = (0, react_1.useCallback)((text) => {
+        setInputValue(text);
+        if (text === '') {
+            setFilteredOptions(allOptions);
+            return;
+        }
+        const filterRegex = new RegExp(escapeSpecialRegExCharacters(text), 'i');
+        setFilteredOptions(allOptions.filter((option) => option.label.match(filterRegex)));
+    }, [allOptions, escapeSpecialRegExCharacters]);
+    // Handle individual option selection
+    const handleSelect = (0, react_1.useCallback)((selectedValue) => {
+        if (!value.includes(selectedValue)) {
+            const newValues = [...value, selectedValue];
+            onChange(newValues);
+        }
+        setInputValue('');
+        setFilteredOptions(allOptions);
+    }, [value, onChange, allOptions]);
+    // Handle tag removal
+    const handleRemove = (0, react_1.useCallback)((removedValue) => {
+        const newValues = value.filter((v) => v !== removedValue);
+        onChange(newValues);
+    }, [value, onChange]);
+    // Handle "Select All" checkbox toggle
+    const handleSelectAll = (0, react_1.useCallback)((checked) => {
+        if (checked) {
+            // Select all non-custom options, preserving existing custom selections
+            const newValues = [
+                ...value.filter((v) => v === 'Custom' || !nonCustomOptions.some((o) => o.value === v)),
+                ...nonCustomOptions.map((o) => o.value),
+            ];
+            onChange(newValues);
+        }
+        else {
+            // Deselect all non-custom options, preserving custom selections
+            const newValues = value.filter((v) => v === 'Custom' || !nonCustomOptions.some((o) => o.value === v));
+            onChange(newValues);
+        }
+    }, [value, onChange, nonCustomOptions]);
+    // Toggle popover visibility
+    const togglePopoverActive = (0, react_1.useCallback)(() => {
+        setPopoverActive((prev) => !prev);
+    }, []);
+    // Compute insightful popover trigger text
+    const popoverTriggerText = (0, react_1.useMemo)(() => {
+        if (value.length === 0)
+            return 'No items selected';
+        const selectedLabels = value
+            .map((val) => { var _a; return ((_a = allOptions.find((opt) => opt.value === val)) === null || _a === void 0 ? void 0 : _a.label) || val; })
+            .filter(Boolean);
+        if (value.length === 1)
+            return `${selectedLabels[0]} selected`;
+        if (value.length === 2)
+            return `${selectedLabels[0]}, ${selectedLabels[1]} selected`;
+        return `${selectedLabels[0]}, ${selectedLabels[1]}, and ${value.length - 2} others selected`;
+    }, [value, allOptions]);
+    // Compute accessibility label for popover button
+    const popoverAccessibilityLabel = (0, react_1.useMemo)(() => {
+        const selectedLabels = value
+            .map((val) => { var _a; return ((_a = allOptions.find((opt) => opt.value === val)) === null || _a === void 0 ? void 0 : _a.label) || val; })
+            .filter(Boolean);
+        return `View ${value.length} selected items: ${selectedLabels.join(', ')}`;
+    }, [value, allOptions]);
+    // Render selected values as inline tags (up to 4)
+    const inlineTagsMarkup = value.length > 0 && value.length <= 4 && ((0, jsx_runtime_1.jsx)(HorizontalStack_1.HorizontalStack, { blockAlign: 'center', gap: '2', children: value.map((val) => {
+            const option = allOptions.find((opt) => opt.value === val);
+            return ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { onRemove: () => handleRemove(val), disabled: disabled, children: (option === null || option === void 0 ? void 0 : option.label) || val }, val));
+        }) }));
+    // Render selected values in popover (when > 4)
+    const popoverContent = ((0, jsx_runtime_1.jsx)("div", { style: { padding: '1rem', maxHeight: '10rem', overflowY: 'auto', width: '300px' }, children: value.length > 0 ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ActionList_1.ActionList, { items: value.map((val) => {
+                    var _a, _b;
+                    return ({
+                        content: `${((_a = allOptions.find((opt) => opt.value === val)) === null || _a === void 0 ? void 0 : _a.label) || val}`,
+                        onAction: () => handleRemove(val),
+                        prefix: ((0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { label: `${((_b = allOptions.find((opt) => opt.value === val)) === null || _b === void 0 ? void 0 : _b.label) || val}`, labelHidden: true, readOnly: true, checked: true })),
+                        suffix: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: 'critical', source: Icons_1.MaClose }),
+                    });
+                }) }) })) : ((0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'p', variant: 'bodySm', color: 'subdued', children: "No items selected" })) }));
+    // Render popover trigger when > 4 items
+    const popoverMarkup = value.length > 4 && ((0, jsx_runtime_1.jsx)("div", { className: 'mt-2', children: (0, jsx_runtime_1.jsx)(Popover_1.Popover, { active: popoverActive, activator: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: togglePopoverActive, disclosure: true, variant: 'tertiary', plain: true, accessibilityLabel: popoverAccessibilityLabel, children: popoverTriggerText }), onClose: togglePopoverActive, ariaHaspopup: 'listbox', children: popoverContent }) }));
+    // Render dropdown content
+    const dropdownContent = loading ? ((0, jsx_runtime_1.jsx)("div", { className: 'p-2 flex justify-center', children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { accessibilityLabel: 'Loading options', size: 'small' }) })) : filteredOptions.length > 0 ? ((0, jsx_runtime_1.jsx)(Listbox_1.Listbox, { onSelect: handleSelect, children: filteredOptions.map((option) => ((0, jsx_runtime_1.jsx)(Listbox_1.Listbox.Option, { value: option.value, selected: value.includes(option.value), accessibilityLabel: option.label, children: option.label }, option.value))) })) : inputValue && !loading ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'p', variant: 'bodySm', color: 'subdued', children: "No options found" })) : null;
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Combobox_1.Combobox, { allowMultiple: true, activator: (0, jsx_runtime_1.jsx)(Combobox_1.Combobox.TextField, { label: label, value: inputValue, onChange: updateText, placeholder: placeholder, autoComplete: 'off', disabled: disabled, error: error, suffix: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { label: 'Select All', labelHidden: true, checked: isAllSelected, onChange: handleSelectAll, disabled: disabled, "aria-label": 'Toggle selection of all options' }) }), children: dropdownContent }), inlineTagsMarkup || popoverMarkup] }));
+}
+exports.ComboSelect = ComboSelect;

package/dist/src/components/EmptyState/EmptyState.js

@@ -32,6 +32,6 @@ function EmptyState({ children, heading, image, largeImage, imageContained, full
     const detailsMarkup = textContentMarkup || actionsMarkup || footerContentMarkup ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { maxWidth: fullWidth ? '100%' : '400px', children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { inlineAlign: 'center', 
             //@ts-expect-error
             gap: 4, children: [textContentMarkup, actionsMarkup, footerContentMarkup] }) })) : null;
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { paddingInlineStart: '0', paddingInlineEnd: '0', paddingBlockStart: '5', paddingBlockEnd: '16', children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { inlineAlign: 'center', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex w-full items-center justify-center', children: [" ", imageMarkup] }), detailsMarkup] }) }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { paddingInlineStart: '0', paddingInlineEnd: '0', paddingBlockStart: '5', paddingBlockEnd: '16', children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { inlineAlign: 'center', children: [(0, jsx_runtime_1.jsxs)("div", { children: [" ", imageMarkup] }), detailsMarkup] }) }));
 }
 exports.EmptyState = EmptyState;

package/dist/src/components/Icon/Icon.js

@@ -5,10 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-console */
+/* eslint-disable @next/next/no-img-element */
+const react_1 = require("react");
 const css_1 = require("../../utilities/css");
 const Text_1 = require("../Text");
 const Icon_classnames_1 = __importDefault(require("./Icon.classnames"));
-const react_1 = require("react");
 const COLORS_WITH_BACKDROPS = ['base', 'critical', 'highlight', 'success', 'warning'];
 function Icon({ source, color, backdrop, accessibilityLabel, size = 20, theme }) {
     var _a, _b;
@@ -85,9 +87,9 @@ function Icon({ source, color, backdrop, accessibilityLabel, size = 20, theme })
         (0, react_1.isValidElement)(source) ? (source) : ((0, jsx_runtime_1.jsx)("span", { className: Icon_classnames_1.default.Svg, dangerouslySetInnerHTML: {
                 __html: 
                 //@ts-expect-error index
-                typeof source.svg === 'string'
+                typeof (source === null || source === void 0 ? void 0 : source.svg) === 'string'
                     ? //@ts-expect-error index
-                        source.svg
+                        source === null || source === void 0 ? void 0 : source.svg
                     : (_b = JSON.stringify(source)) === null || _b === void 0 ? void 0 : _b.replace(/"/g, "'"),
             }, "aria-hidden": 'true' })),
         placeholder: (0, jsx_runtime_1.jsx)("div", { className: Icon_classnames_1.default.Placeholder }),

package/dist/src/components/Image/Image.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Image = exports.fallbackImageSVG = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+// Fallback SVG as a data URL
 exports.fallbackImageSVG = `
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="#ccc">
     <rect width="100" height="100" />
@@ -12,65 +13,27 @@ exports.fallbackImageSVG = `
 const fallbackSVG = `
 <svg xmlns="http://www.w3.org/2000/svg" fill="#eae6e6" width="32" height="32" viewBox="0 0 32 32" stroke="#eae6e6">
   <path d="M30 3.4141L28.5859 2 2 28.5859 3.4141 30l2-2H26a2.0027 2.0027 0 0 0 2-2V5.4141ZM26 26H7.4141l7.7929-7.793 2.3788 2.3787a2 2 0 0 0 2.8284 0L22 19l4 3.9973ZM26 20.1682l-2.5858-2.5859a2 2 0 0 0-2.8284 0L19 19.1682l-2.377-2.3771L26 7.4141Z"/>
-  <path d="M6 22V19l5-4.9966 1.3733 1.3733 1.4159-1.416-1.375-1.375a2 2 0 0 0-2.8284 0L6 16.1716V6H22V4H6A2.002 2.0027 0 0 0 4 6V22Z"/>
+  <path d="M6 22V19l5-4.9966 1.3733 1.3733 1.4159-1.416-1.375-1.375a2 2 0 0 0-2.8284 0L6 16.1716V6H22V4H6A2.002 2.002 0 0 0 4 6V22Z"/>
 </svg>
 `;
 const errorkSVG = `
 <svg xmlns="http://www.w3.org/2000/svg" fill="#dfc3c3" width="32" height="32" viewBox="0 0 32 32" stroke="#dfc3c3">
   <path d="M30 3.4141L28.5859 2 2 28.5859 3.4141 30l2-2H26a2.0027 2.0027 0 0 0 2-2V5.4141ZM26 26H7.4141l7.7929-7.793 2.3788 2.3787a2 2 0 0 0 2.8284 0L22 19l4 3.9973ZM26 20.1682l-2.5858-2.5859a2 2 0 0 0-2.8284 0L19 19.1682l-2.377-2.3771L26 7.4141Z"/>
-  <path d="M6 22V19l5-4.9966 1.3733 1.3733 1.4159-1.416-1.375-1.375a2 2 0 0 0-2.8284 0L6 16.1716V6H22V4H6A2.002 2.0027 0 0 0 4 6V22Z"/>
+  <path d="M6 22V19l5-4.9966 1.3733 1.3733 1.4159-1.416-1.375-1.375a2 2 0 0 0-2.8284 0L6 16.1716V6H22V4H6A2.002 2.002 0 0 0 4 6V22Z"/>
 </svg>
 `;
 const fallbackImageURL = `data:image/svg+xml;utf8,${encodeURIComponent(fallbackSVG)}`;
-// SVG loader (spinning circle)
-const loaderSVG = `
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50">
-  <circle cx="25" cy="25" r="20" stroke="#ccc" stroke-width="5" fill="none" stroke-dasharray="31.415, 31.415">
-    <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
-  </circle>
-</svg>
-`;
-const loaderImageURL = `data:image/svg+xml;utf8,${encodeURIComponent(loaderSVG)}`;
-// Inline CSS for loader and image wrapper
-const imageStyles = `
-  .image-wrapper {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #f0f0f0; /* Light background for loader */
-  }
-
-  .loader {
-    width: 40px;
-    height: 40px;
-    z-index: 1; /* Ensure loader is above background */
-  }
-
-  .image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: opacity 0.3s ease-in-out;
-    z-index: 2; /* Ensure image is above loader */
-  }
-
-  .image-loading {
-    opacity: 0;
-  }
-`;
-function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className, rounded, lazy = true, style, ...rest }) {
+function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className, rounded, lazy = true, // Default to false
+style, ...rest }) {
     const [isLoading, setIsLoading] = (0, react_1.useState)(true);
-    const [imgSrc, setImgSrc] = (0, react_1.useState)(lazy ? null : source);
-    const [isInView, setIsInView] = (0, react_1.useState)(!lazy);
+    const [imgSrc, setImgSrc] = (0, react_1.useState)(lazy ? '' : source); // Start with empty src if lazy
+    const [isInView, setIsInView] = (0, react_1.useState)(!lazy); // Assume visible if not lazy
     const imgRef = (0, react_1.useRef)(null);
+    // Intersection Observer for lazy loading
     (0, react_1.useEffect)(() => {
-        if (!lazy) {
-            setIsInView(true); // Ensure non-lazy images load immediately
+        if (!lazy)
             return;
-        }
+        // Store the current ref value in a variable
         const currentImgRef = imgRef.current;
         if (!currentImgRef)
             return;
@@ -78,12 +41,12 @@ function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className
             entries.forEach((entry) => {
                 if (entry.isIntersecting) {
                     setIsInView(true);
-                    observer.unobserve(entry.target);
+                    observer.unobserve(entry.target); // Stop observing once the image is in view
                 }
             });
         }, {
             rootMargin: '0px',
-            threshold: 0.1,
+            threshold: 0.1, // Trigger when 10% of the image is visible
         });
         observer.observe(currentImgRef);
         return () => {
@@ -92,6 +55,7 @@ function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className
             }
         };
     }, [lazy]);
+    // Load image when in view
     (0, react_1.useEffect)(() => {
         if (!isInView)
             return;
@@ -112,30 +76,30 @@ function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className
                     onLoad === null || onLoad === void 0 ? void 0 : onLoad();
                 };
                 img.onerror = () => {
-                    setImgSrc(fallbackImageURL);
+                    setImgSrc(fallbackImageURL); // Set fallback SVG on error
                     setIsLoading(false);
                     onError === null || onError === void 0 ? void 0 : onError();
                 };
             }
             catch (error) {
-                setImgSrc(fallbackImageURL);
+                setImgSrc(fallbackImageURL); // Set fallback SVG on error
                 setIsLoading(false);
                 onError === null || onError === void 0 ? void 0 : onError();
             }
         };
         loadImage();
     }, [source, sourceSet, crossOrigin, onLoad, onError, isInView]);
+    // Combine styles for rounded corners
     const combinedStyle = {
         ...(rounded ? { borderRadius: 'var(--p-border-radius-3)' } : {}),
         ...style,
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: imageStyles }), (0, jsx_runtime_1.jsxs)("div", { style: combinedStyle, className: `image-wrapper ${className || ''}`, children: [isLoading && ((0, jsx_runtime_1.jsx)("img", { src: loaderImageURL, alt: 'Loading', className: 'loader', "aria-hidden": 'true' })), (0, jsx_runtime_1.jsx)("img", { ...rest, ref: imgRef, alt: alt, src: imgSrc !== null && imgSrc !== void 0 ? imgSrc : undefined, crossOrigin: crossOrigin, srcSet: sourceSet === null || sourceSet === void 0 ? void 0 : sourceSet.map(({ source, descriptor }) => `${source} ${descriptor || ''}`).join(', '), className: `image ${isLoading ? 'image-loading' : ''}`, loading: lazy ? 'lazy' : 'eager', onLoad: () => {
-                            setIsLoading(false); // Ensure isLoading is false on direct load
-                            onLoad === null || onLoad === void 0 ? void 0 : onLoad();
-                        }, onError: (e) => {
-                            e.currentTarget.src = fallbackImageURL;
-                            setIsLoading(false);
-                            onError === null || onError === void 0 ? void 0 : onError();
-                        } })] })] }));
+    return (
+    // eslint-disable-next-line @next/next/no-img-element
+    (0, jsx_runtime_1.jsx)("img", { ...rest, ref: imgRef, alt: alt, src: imgSrc, style: combinedStyle, crossOrigin: crossOrigin, srcSet: sourceSet === null || sourceSet === void 0 ? void 0 : sourceSet.map(({ source, descriptor }) => `${source} ${descriptor || ''}`).join(', '), className: className, loading: lazy ? 'lazy' : 'eager', onError: (e) => {
+            e.currentTarget.src = fallbackImageURL; // Set fallback SVG on error
+            setIsLoading(false);
+            onError === null || onError === void 0 ? void 0 : onError();
+        } }));
 }
 exports.Image = Image;

package/dist/src/index.js

@@ -16,7 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hsbToHex = exports.hexToRgb = exports.capitalize = exports.Upload = exports.FileViewer = exports.TopBar = exports.Toast = exports.Switch = exports.SkeletonThumbnail = exports.SkeletonTabs = exports.SkeletonTable = exports.SkeletonPage = exports.SkeletonDisplayText = exports.SkeletonBodyText = exports.Scrollable = exports.ResourceList = exports.ResourceItem = exports.PaginationV1 = exports.VerticalSingleMenuItem = exports.VerticalCollapsedMenuItem = exports.CollapsedMenuItemList = exports.isNavigationItemActive = exports.Navigation = exports.Loading = exports.Layout = exports.Input = exports.InlineError = exports.Indicator = exports.IndexTable = exports.useSetIndexFiltersMode = exports.IndexFiltersMode = exports.IndexFilters = exports.FlexBox = exports.DatePicker = exports.DataTable = exports.ContextualSaveBar = exports.ChoiceCard = exports.CheckboxTree = exports.ButtonGroup = exports.buttonsFrom = exports.buttonFrom = exports.CopyButton = exports.Button = exports.BadgeStatusValue = exports.BadgeProgressValue = exports.Badge = exports.Avatar = exports.Tabs = exports.AlphaTabs = exports.ActionList = void 0;
-exports.useIndexResourceState = exports.renderSafeTemplate = exports.useFrame = exports.useDeviceType = exports.cn = exports.rgbaString = exports.rgbToHsl = exports.rgbToHsb = exports.rgbToHex = exports.rgbString = exports.hslToRgb = exports.hsbToRgb = void 0;
+exports.ComboSelect = exports.useIndexResourceState = exports.renderSafeTemplate = exports.useFrame = exports.useDeviceType = exports.cn = exports.rgbaString = exports.rgbToHsl = exports.rgbToHsb = exports.rgbToHex = exports.rgbString = exports.hslToRgb = exports.hsbToRgb = void 0;
 __exportStar(require("./components"), exports);
 var ActionList_1 = require("./components/ActionList");
 Object.defineProperty(exports, "ActionList", { enumerable: true, get: function () { return ActionList_1.ActionList; } });
@@ -122,3 +122,5 @@ var renderSafeTemplate_1 = require("./utilities/renderSafeTemplate");
 Object.defineProperty(exports, "renderSafeTemplate", { enumerable: true, get: function () { return renderSafeTemplate_1.renderSafeTemplate; } });
 var use_index_resource_state_1 = require("./utilities/use-index-resource-state");
 Object.defineProperty(exports, "useIndexResourceState", { enumerable: true, get: function () { return use_index_resource_state_1.useIndexResourceState; } });
+var ComboSelect_1 = require("./components/ComboSelect/ComboSelect");
+Object.defineProperty(exports, "ComboSelect", { enumerable: true, get: function () { return ComboSelect_1.ComboSelect; } });