@janbox/storefront-ui 1.0.14 → 1.0.16

package/dist/lib/menu/menu/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/menu/menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC"}

package/dist/lib/menu/menu-item/helpers.d.ts

@@ -1,2 +1,3 @@
 import { MenuItemProps } from './types';
-export declare const getMenuItemProps: (extended: MenuItemProps) => import("../..").ButtonProps;
+export declare const getMenuItemProps: (extended: MenuItemProps) => import('../..').ButtonProps;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/menu/menu-item/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/menu/menu-item/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAcxC,eAAO,MAAM,gBAAgB,aAAc,aAAa,gCAEvD,CAAC"}

package/dist/lib/menu/menu-item/helpers.js

@@ -1,13 +1,16 @@
-import { mergeComponentProps } from '../../../utils';
+import { mergeComponentProps } from "../../../utils/index.js";
 const defaultProps = {
-    variant: 'text',
-    color: 'neutral',
-    xs: {
-        css: {
-            width: '100%',
-        },
-    },
+  variant: "text",
+  color: "neutral",
+  xs: {
+    css: {
+      width: "100%"
+    }
+  }
 };
-export const getMenuItemProps = (extended) => {
-    return mergeComponentProps(defaultProps, extended);
+const getMenuItemProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getMenuItemProps
 };

package/dist/lib/menu/menu-item/index.d.ts

@@ -1,2 +1,3 @@
 export * from './menu-item';
 export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/menu/menu-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/menu/menu-item/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}

package/dist/lib/menu/menu-item/menu-item.d.ts

@@ -1 +1,2 @@
-export declare const MenuItem: import("react").ForwardRefExoticComponent<Omit<import("../../button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const MenuItem: import('react').ForwardRefExoticComponent<Omit<import('../../button').ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=menu-item.d.ts.map

package/dist/lib/menu/menu-item/menu-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../../src/lib/menu/menu-item/menu-item.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,QAAQ,+IA2BnB,CAAC"}

package/dist/lib/menu/menu-item/menu-item.js

@@ -0,0 +1,34 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { getMenuItemProps } from "./helpers.js";
+import { HTMLDatasetAttributes, Booleanish } from "../../../constants/index.js";
+import { Button } from "../../button/button.js";
+import { useFloatingContext } from "../../floating/floating/helpers.js";
+const MenuItem = forwardRef((_props, ref) => {
+  const { children, ...props } = getMenuItemProps(_props);
+  const { context } = useFloatingContext();
+  const onClick = (e) => {
+    var _a, _b;
+    if (((_a = e.currentTarget.parentElement) == null ? void 0 : _a.getAttribute(HTMLDatasetAttributes.DATA_MENU_LIST)) === Booleanish.True) {
+      context == null ? void 0 : context.onOpenChange(false, e.nativeEvent, "click");
+    }
+    (_b = props.onClick) == null ? void 0 : _b.call(props, e);
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...props,
+      css: {
+        justifyContent: "start",
+        textAlign: "left",
+        width: "100%"
+      },
+      onClick,
+      ref,
+      children
+    }
+  );
+});
+export {
+  MenuItem
+};

package/dist/lib/menu/menu-item/types.d.ts

@@ -1,2 +1,3 @@
 import { ButtonProps } from '../../button';
 export type MenuItemProps = ButtonProps;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/menu/menu-item/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/menu/menu-item/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC"}

package/dist/lib/menu/menu-list/index.d.ts

@@ -1,2 +1,3 @@
 export * from './menu-list';
 export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/menu/menu-list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/menu/menu-list/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}

package/dist/lib/menu/menu-list/menu-list.d.ts

@@ -1,2 +1,3 @@
 import { MenuListProps } from './types';
 export declare const MenuList: ({ children, ...props }: MenuListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=menu-list.d.ts.map

package/dist/lib/menu/menu-list/menu-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-list.d.ts","sourceRoot":"","sources":["../../../../src/lib/menu/menu-list/menu-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAMxC,eAAO,MAAM,QAAQ,2BAA4B,aAAa,qDAoB7D,CAAC"}

package/dist/lib/menu/menu-list/menu-list.js

@@ -0,0 +1,29 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { HTMLDatasetAttributes } from "../../../constants/index.js";
+import "lodash-es";
+import { getColorVar } from "../../../theme/palette.js";
+import { FloatingContent } from "../../floating/floating-content/floating-content.js";
+const MenuList = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    FloatingContent,
+    {
+      css: {
+        backgroundColor: getColorVar("surface.default"),
+        padding: "0.25rem",
+        borderRadius: "0.75rem",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: getColorVar("neutral.100"),
+        boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+        display: "flex",
+        flexDirection: "column"
+      },
+      ...props,
+      ...{ [HTMLDatasetAttributes.DATA_MENU_LIST]: true },
+      children
+    }
+  );
+};
+export {
+  MenuList
+};

package/dist/lib/menu/menu-list/types.d.ts

@@ -3,3 +3,4 @@ export declare enum MenuListDataAttributes {
     DataMenuList = "data-menu-list"
 }
 export type MenuListProps = FloatingContentProps;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/menu/menu-list/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/menu/menu-list/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,oBAAY,sBAAsB;IAChC,YAAY,mBAAmB;CAChC;AAED,MAAM,MAAM,aAAa,GAAG,oBAAoB,CAAC"}

package/dist/lib/menu/menu-list/types.js

@@ -1,4 +1,7 @@
-export var MenuListDataAttributes;
-(function (MenuListDataAttributes) {
-    MenuListDataAttributes["DataMenuList"] = "data-menu-list";
-})(MenuListDataAttributes || (MenuListDataAttributes = {}));
+var MenuListDataAttributes = /* @__PURE__ */ ((MenuListDataAttributes2) => {
+  MenuListDataAttributes2["DataMenuList"] = "data-menu-list";
+  return MenuListDataAttributes2;
+})(MenuListDataAttributes || {});
+export {
+  MenuListDataAttributes
+};

package/dist/lib/menu/menu-trigger/index.d.ts

@@ -1,2 +1,3 @@
 export * from './menu-trigger';
 export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/menu/menu-trigger/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/menu/menu-trigger/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC"}

package/dist/lib/menu/menu-trigger/menu-trigger.d.ts

@@ -1,2 +1,3 @@
 import { MenuTriggerProps } from './types';
 export declare const MenuTrigger: ({ ...props }: MenuTriggerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=menu-trigger.d.ts.map

package/dist/lib/menu/menu-trigger/menu-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-trigger.d.ts","sourceRoot":"","sources":["../../../../src/lib/menu/menu-trigger/menu-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAI3C,eAAO,MAAM,WAAW,iBAAkB,gBAAgB,qDAEzD,CAAC"}

package/dist/lib/menu/menu-trigger/menu-trigger.js

@@ -0,0 +1,8 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { FloatingTrigger } from "../../floating/floating-trigger/floating-trigger.js";
+const MenuTrigger = ({ ...props }) => {
+  return /* @__PURE__ */ jsx(FloatingTrigger, { ...props });
+};
+export {
+  MenuTrigger
+};

package/dist/lib/menu/menu-trigger/types.d.ts

@@ -1,2 +1,3 @@
 import { FloatingTriggerProps } from '../../..';
 export type MenuTriggerProps = FloatingTriggerProps;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/menu/menu-trigger/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/menu/menu-trigger/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC"}

package/dist/lib/multiple-select/helpers.d.ts

@@ -1,2 +1,3 @@
 import { MultipleSelectProps } from './types';
 export declare const getMultipleSelectProps: <O extends object = object>(extended: MultipleSelectProps<O>) => MultipleSelectProps<O>;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/multiple-select/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/multiple-select/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAU9C,eAAO,MAAM,sBAAsB,GAAI,CAAC,SAAS,MAAM,qBAAqB,mBAAmB,CAAC,CAAC,CAAC,2BAEjG,CAAC"}

package/dist/lib/multiple-select/helpers.js

@@ -1,9 +1,12 @@
-import { mergeComponentProps } from '../../utils';
+import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-    xs: {
-        size: 'md',
-    },
+  xs: {
+    size: "md"
+  }
 };
-export const getMultipleSelectProps = (extended) => {
-    return mergeComponentProps(defaultProps, extended);
+const getMultipleSelectProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getMultipleSelectProps
 };

package/dist/lib/multiple-select/index.d.ts

@@ -1,3 +1,4 @@
 export * from './multiple-select';
 export * from './types';
 export * from './helpers';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/multiple-select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/multiple-select/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/lib/multiple-select/multiple-select.d.ts

@@ -1,2 +1,3 @@
 import { MultipleSelectProps } from './types';
 export declare const MultipleSelect: <O extends object = object>({ ref, ...props }: MultipleSelectProps<O>) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=multiple-select.d.ts.map

package/dist/lib/multiple-select/multiple-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiple-select.d.ts","sourceRoot":"","sources":["../../../src/lib/multiple-select/multiple-select.tsx"],"names":[],"mappings":"AAQA,OAAO,EAA6B,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAiBzE,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,MAAM,8BAA8B,mBAAmB,CAAC,CAAC,CAAC,qDAgYlG,CAAC"}

package/dist/lib/multiple-select/multiple-select.js

@@ -0,0 +1,384 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useRef, useId, useCallback, useMemo, useEffect } from "react";
+import { get, isNil, isElement, trimStart } from "lodash-es";
+import { getMultipleSelectProps } from "./helpers.js";
+import { SvgLoader } from "../../components/svg-loader.js";
+import { VirtualizedList } from "../../components/virtualized-list.js";
+import { useWindowScreen } from "../../hooks/use-window-screen/index.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { getResponsiveProp, getSizeVariantState } from "../../utils/index.js";
+import ArrowDownIcon from "../../assets/svg/arrow-down.svg.js";
+import { getColorVar } from "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { Checkbox } from "../checkbox/checkbox.js";
+import { TextSkeleton } from "../loading/text-skeleton/text-skeleton.js";
+import { ensureArray, matchSearch } from "../../utils/common.js";
+import { Floating } from "../floating/floating/floating.js";
+import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.js";
+import { InputMask as ForwardRefInputMask } from "../input-mask/input-mask.js";
+import { FloatingContent } from "../floating/floating-content/floating-content.js";
+import { Input } from "../input/input.js";
+import { FormHelperText } from "../form-helper-text/form-helper-text.js";
+const DEFAULT_DISPLAY_ROW_COUNT = 5;
+const MultipleSelect = ({ ref, ...props }) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    placement = "bottom-start",
+    open,
+    onOpenChange,
+    searchable = true,
+    value,
+    optionValue,
+    optionLabel,
+    defaultValue,
+    options,
+    onChange,
+    placeholder,
+    listProps,
+    tagLabel,
+    // selectedRenderer,
+    optionSearchLabel,
+    helperText,
+    error,
+    containerProps,
+    inputProps,
+    displayCount = 1,
+    ...rest
+  } = getMultipleSelectProps(props);
+  const searchInputRef = useRef(null);
+  const floatingRef = useRef(null);
+  const uniqueId = useId();
+  const windowScreen = useWindowScreen();
+  const [inputValue, setInputValue] = useControllableState({
+    defaultValue: (inputProps == null ? void 0 : inputProps.defaultValue) ?? "",
+    value: inputProps == null ? void 0 : inputProps.value
+  });
+  const [isOpen, setIsOpen] = useControllableState({
+    defaultValue: open ?? false,
+    value: open
+  });
+  const prehandleOpenChange = (nextOpen, event, reason) => {
+    setIsOpen(nextOpen);
+    onOpenChange == null ? void 0 : onOpenChange(nextOpen, event, reason);
+  };
+  const [controllableValues, setControllableValues] = useControllableState({
+    defaultValue: defaultValue ?? [],
+    value
+  });
+  const getOptionValue = useCallback(
+    (option) => {
+      return typeof optionValue === "function" ? optionValue(option) : get(option, optionValue ?? "value");
+    },
+    [optionValue]
+  );
+  const getTagLabel = (option) => {
+    switch (typeof tagLabel) {
+      case "function":
+        return tagLabel(option);
+      case "string":
+        return get(option, tagLabel);
+      default:
+        return null;
+    }
+  };
+  const getOptionValueRef = useRef(getOptionValue);
+  getOptionValueRef.current = getOptionValue;
+  const selectedValueMap = useMemo(
+    () => new Map(
+      controllableValues.map((item) => {
+        const key = typeof item === "object" ? getOptionValue(item) : item;
+        return [
+          key,
+          typeof item === "object" ? item : options.find((option) => getOptionValue(option) === key) ?? {}
+        ];
+      })
+    ),
+    [controllableValues]
+  );
+  const getOptionLabel = useCallback(
+    (option) => {
+      return typeof optionLabel === "function" ? optionLabel(option) : get(option, optionLabel ?? "label");
+    },
+    [optionLabel]
+  );
+  const handleChange = (option, selected) => {
+    let preset = [...controllableValues];
+    if (selected) {
+      preset.push(option);
+    } else {
+      preset = preset.filter((item) => getOptionValue(item) !== getOptionValue(option));
+    }
+    setControllableValues(preset);
+    onChange == null ? void 0 : onChange(preset);
+  };
+  const responsiveSize = isNil(windowScreen.name) ? void 0 : getResponsiveProp(rest, "size", windowScreen.name);
+  const rowMinHeight = getSizeVariantState(responsiveSize).inputSize ?? 0;
+  const displayOptions = useMemo(() => {
+    if (!inputValue) {
+      return options;
+    }
+    return options.filter((option) => {
+      let searchLabels = [String(getOptionLabel(option))];
+      switch (typeof optionSearchLabel) {
+        case "function":
+          searchLabels = ensureArray(optionSearchLabel(option));
+          break;
+        case "string":
+          searchLabels = ensureArray(String(get(option, optionSearchLabel)));
+          break;
+        case "object":
+          searchLabels = optionSearchLabel.map((label) => String(get(option, label)));
+          break;
+      }
+      return matchSearch(searchLabels, inputValue);
+    });
+  }, [getOptionLabel, inputValue, optionSearchLabel, options]);
+  const RowComponent = ({ row }) => {
+    const rowData = displayOptions.at(row.index);
+    const rowValue = isNil(rowData) ? void 0 : getOptionValue(rowData);
+    const isSelected = isNil(rowValue) ? false : selectedValueMap.has(rowValue);
+    const onCheckboxChange = (e) => {
+      if (isNil(rowData)) return;
+      handleChange(rowData, e.target.checked);
+    };
+    return /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        onChange: onCheckboxChange,
+        checked: isSelected,
+        containerProps: {
+          css: {
+            paddingTop: 2,
+            paddingBottom: 2,
+            paddingLeft: 12,
+            paddingRight: 12,
+            borderRadius: 8,
+            ":hover": { backgroundColor: getColorVar("neutral.100") },
+            minHeight: rowMinHeight,
+            width: "100%"
+          }
+        },
+        children: /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: isNil(rowData) ? /* @__PURE__ */ jsx(TextSkeleton, { css: { width: "100%" } }) : getOptionLabel(rowData) })
+      }
+    );
+  };
+  const sizeOptions = {
+    apply({ elements }) {
+      const { width } = elements.reference.getBoundingClientRect();
+      Object.assign(elements.floating.style, {
+        minWidth: `${width}px`
+      });
+    }
+  };
+  const estimateSize = useCallback(
+    (_index) => {
+      return rowMinHeight ?? 0;
+    },
+    [rowMinHeight]
+  );
+  const getItemKey = useCallback(
+    (index) => {
+      const option = displayOptions.at(index);
+      return option ? getOptionValue(option).toString() : `${uniqueId}-${index}`;
+    },
+    [displayOptions, getOptionValue, uniqueId]
+  );
+  const getTextCss = (sizeVariant) => {
+    if (isNil(sizeVariant)) return {};
+    const { textVariant } = getSizeVariantState(sizeVariant);
+    if (isNil(textVariant)) return {};
+    return getTypographyVar(textVariant);
+  };
+  const onInputChange = (e) => {
+    var _a2;
+    e.target.value = trimStart(e.target.value);
+    setInputValue(e.target.value);
+    (_a2 = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a2.call(inputProps, e);
+  };
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      var _a2;
+      if (isOpen) {
+        (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+      } else {
+        setInputValue("");
+      }
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [isOpen, setInputValue]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...containerProps,
+      css: { display: "flex", flexDirection: "column", width: "100%", ...containerProps == null ? void 0 : containerProps.css },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Floating,
+          {
+            clickProps: {
+              enabled: true
+            },
+            dismissProps: {
+              enabled: true
+            },
+            sizeOptions,
+            placement,
+            open: isOpen,
+            onOpenChange: prehandleOpenChange,
+            ref: floatingRef,
+            children: [
+              /* @__PURE__ */ jsx(FloatingTrigger, { children: /* @__PURE__ */ jsx(
+                ForwardRefInputMask,
+                {
+                  type: "button",
+                  error: isOpen ? false : error,
+                  as: "button",
+                  suffix: /* @__PURE__ */ jsx(
+                    SvgLoader,
+                    {
+                      source: ArrowDownIcon,
+                      width: 20,
+                      height: 20,
+                      css: {
+                        transition: "transform 150ms",
+                        ...isOpen ? { transform: "rotate(-180deg)" } : {}
+                      }
+                    }
+                  ),
+                  ...rest,
+                  ref,
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      css: [
+                        {
+                          flex: 1,
+                          textAlign: "left",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                          paddingTop: 4,
+                          paddingBottom: 4
+                        },
+                        getTextCss((_a = rest.xs) == null ? void 0 : _a.size)
+                      ],
+                      children: selectedValueMap.size > 0 ? /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          css: {
+                            display: "flex",
+                            gap: 4,
+                            ...displayCount > 1 ? { flexWrap: "wrap" } : {}
+                          },
+                          children: [
+                            Array.from(selectedValueMap.values()).slice(0, displayCount).map((selectedOption) => {
+                              const rowValue = getOptionValue(selectedOption);
+                              const rowLabel = getTagLabel(selectedOption) ?? getOptionLabel(selectedOption);
+                              return /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  css: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: 8,
+                                    overflow: "hidden",
+                                    borderRadius: 8,
+                                    backgroundColor: getColorVar("neutral.100"),
+                                    paddingLeft: 8,
+                                    paddingRight: 8,
+                                    paddingTop: 4,
+                                    paddingBottom: 4,
+                                    fontSize: "0.75rem",
+                                    lineHeight: "1rem"
+                                  },
+                                  children: /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: isElement(rowLabel) ? rowLabel : /* @__PURE__ */ jsx("span", { children: rowLabel }) })
+                                },
+                                rowValue.toString()
+                              );
+                            }),
+                            displayCount < selectedValueMap.size && /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                css: {
+                                  borderRadius: 8,
+                                  backgroundColor: getColorVar("neutral.100"),
+                                  paddingLeft: 8,
+                                  paddingRight: 8,
+                                  paddingTop: 4,
+                                  paddingBottom: 4,
+                                  fontSize: "0.75rem",
+                                  lineHeight: "1rem",
+                                  flexShrink: 0
+                                },
+                                children: /* @__PURE__ */ jsxs("span", { css: { fontWeight: 500 }, children: [
+                                  "+",
+                                  selectedValueMap.size - displayCount
+                                ] })
+                              }
+                            )
+                          ]
+                        }
+                      ) : /* @__PURE__ */ jsx("span", { css: { color: getColorVar("neutral.400"), display: "block" }, children: placeholder })
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  css: {
+                    paddingTop: 8,
+                    paddingBottom: 8,
+                    border: "1px solid",
+                    borderColor: getColorVar("border.default"),
+                    borderRadius: 8,
+                    boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+                    fontSize: "0.875rem",
+                    lineHeight: "1.25rem",
+                    backgroundColor: getColorVar("surface.default")
+                  },
+                  children: [
+                    searchable && /* @__PURE__ */ jsx("div", { css: { paddingLeft: 8, paddingRight: 8, paddingBottom: 12, position: "relative" }, children: /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        xs: { size: (_b = rest.xs) == null ? void 0 : _b.size },
+                        sm: { size: (_c = rest.sm) == null ? void 0 : _c.size },
+                        md: { size: (_d = rest.md) == null ? void 0 : _d.size },
+                        lg: { size: (_e = rest.lg) == null ? void 0 : _e.size },
+                        value: inputValue,
+                        ...inputProps,
+                        onChange: onInputChange,
+                        ref: searchInputRef
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      VirtualizedList,
+                      {
+                        ...listProps,
+                        css: { paddingLeft: 4, paddingRight: 4 },
+                        options: {
+                          count: displayOptions.length,
+                          estimateSize,
+                          getItemKey
+                        },
+                        style: {
+                          maxHeight: rowMinHeight * DEFAULT_DISPLAY_ROW_COUNT,
+                          ...listProps == null ? void 0 : listProps.style
+                        },
+                        RowComponent
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+      ]
+    }
+  );
+};
+export {
+  MultipleSelect
+};

package/dist/lib/multiple-select/types.d.ts

@@ -32,3 +32,4 @@ interface MultipleSelectExtendedProps<O extends object> extends ResponsiveDesign
 }
 export type MultipleSelectProps<O extends object = object> = ShallowMerge<InputMaskProps<JSX.IntrinsicElements['button']>, MultipleSelectExtendedProps<O>>;
 export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/multiple-select/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/multiple-select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/E,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEzD,MAAM,MAAM,6BAA6B,GAAG,wBAAwB,CAAC;AAErE,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,CAAC;AAExD,UAAU,2BAA2B,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,gBAAgB,CAAC,6BAA6B,CAAC;IAE7G,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,yBAAyB,CAAC,CAAC;IACnE,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAClF,YAAY,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,yBAAyB,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,yBAAyB,CAAC,CAAC;IACtD,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;QAC9C,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CAAC;IACF,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,CACvE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAC/C,2BAA2B,CAAC,CAAC,CAAC,CAC/B,CAAC"}