@lets-events/react 12.1.13 → 12.2.0

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.1.13 build
+> @lets-events/react@12.2.0 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/index.mjs 374.58 KB
-ESM ⚡️ Build success in 286ms
-CJS dist/index.js 388.40 KB
-CJS ⚡️ Build success in 286ms
+CJS dist/index.js 391.96 KB
+CJS ⚡️ Build success in 499ms
+ESM dist/index.mjs 378.06 KB
+ESM ⚡️ Build success in 501ms
 DTS Build start
-DTS ⚡️ Build success in 91323ms
-DTS dist/index.d.mts 388.87 KB
-DTS dist/index.d.ts  388.87 KB
+DTS ⚡️ Build success in 8126ms
+DTS dist/index.d.mts 388.96 KB
+DTS dist/index.d.ts  388.96 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lets-events/react
 
+## 12.2.0
+
+### Minor Changes
+
+- MultiSelect added props
+
 ## 12.1.13
 
 ### Patch Changes

package/dist/index.d.mts

@@ -12595,9 +12595,14 @@ interface TooltipProps {
 }
 declare function Tooltip({ children, content, delayDuration, side, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
-declare const StyledTrigger: _stitches_react_types_styled_component.StyledComponent<"div", {
-    color?: "default" | "error" | undefined;
-    disabled?: boolean | "true" | undefined;
+declare const FlexStyled: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<_radix_ui_themes.FlexProps & React$1.RefAttributes<HTMLDivElement>>, {
+    display?: "flex" | "inline-flex" | undefined;
+    align?: "end" | "stretch" | "center" | "start" | "baseline" | undefined;
+    justify?: "end" | "center" | "start" | "between" | "around" | "evenly" | undefined;
+    direction?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
+    gap?: 0 | 2 | "0" | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
+    gapY?: 2 | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
+    gapX?: 2 | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
@@ -12968,32 +12973,15 @@ declare const StyledTrigger: _stitches_react_types_styled_component.StyledCompon
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
-    placeholder?: string;
-    value?: string[];
-    onValueChange?: (v: string[]) => void;
-    options: Array<{
-        label: string;
-        value: string;
-    }>;
-    width?: string;
-    zIndex?: string;
-    showSelectedValues?: boolean;
-    singleSelect?: boolean;
-    selectedOrientation?: "row" | "column";
-    disabled?: boolean;
-    maxHeight?: string;
+type FlexProps = ComponentProps<typeof FlexStyled> & {
+    as?: ElementType;
+    children: React.ReactNode;
 };
-declare const MultiSelect: React__default.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare function Flex({ children, ...props }: FlexProps): react_jsx_runtime.JSX.Element;
 
-declare const FlexStyled: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<_radix_ui_themes.FlexProps & React$1.RefAttributes<HTMLDivElement>>, {
-    display?: "flex" | "inline-flex" | undefined;
-    align?: "end" | "stretch" | "center" | "start" | "baseline" | undefined;
-    justify?: "end" | "center" | "start" | "between" | "around" | "evenly" | undefined;
-    direction?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
-    gap?: 0 | 2 | "0" | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
-    gapY?: 2 | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
-    gapX?: 2 | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
+declare const StyledTrigger: _stitches_react_types_styled_component.StyledComponent<"div", {
+    color?: "default" | "error" | undefined;
+    disabled?: boolean | "true" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
@@ -13364,11 +13352,27 @@ declare const FlexStyled: _stitches_react_types_styled_component.StyledComponent
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type FlexProps = ComponentProps<typeof FlexStyled> & {
-    as?: ElementType;
-    children: React.ReactNode;
+
+type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
+    placeholder?: string;
+    value?: string[];
+    onValueChange?: (v: string[]) => void;
+    options: Array<{
+        label: string;
+        value: string;
+    }>;
+    width?: string;
+    zIndex?: string;
+    showSelectedValues?: boolean;
+    singleSelect?: boolean;
+    selectedOrientation?: "row" | "column";
+    disabled?: boolean;
+    maxHeight?: string;
+    selectedAllOptions?: boolean;
+    selectedAllText?: string;
+    selectedScroll?: boolean;
 };
-declare function Flex({ children, ...props }: FlexProps): react_jsx_runtime.JSX.Element;
+declare const MultiSelect: React__default.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 declare const Box: React$1.ForwardRefExoticComponent<_radix_ui_themes.BoxProps & React$1.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -12595,9 +12595,14 @@ interface TooltipProps {
 }
 declare function Tooltip({ children, content, delayDuration, side, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
-declare const StyledTrigger: _stitches_react_types_styled_component.StyledComponent<"div", {
-    color?: "default" | "error" | undefined;
-    disabled?: boolean | "true" | undefined;
+declare const FlexStyled: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<_radix_ui_themes.FlexProps & React$1.RefAttributes<HTMLDivElement>>, {
+    display?: "flex" | "inline-flex" | undefined;
+    align?: "end" | "stretch" | "center" | "start" | "baseline" | undefined;
+    justify?: "end" | "center" | "start" | "between" | "around" | "evenly" | undefined;
+    direction?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
+    gap?: 0 | 2 | "0" | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
+    gapY?: 2 | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
+    gapX?: 2 | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
@@ -12968,32 +12973,15 @@ declare const StyledTrigger: _stitches_react_types_styled_component.StyledCompon
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
-    placeholder?: string;
-    value?: string[];
-    onValueChange?: (v: string[]) => void;
-    options: Array<{
-        label: string;
-        value: string;
-    }>;
-    width?: string;
-    zIndex?: string;
-    showSelectedValues?: boolean;
-    singleSelect?: boolean;
-    selectedOrientation?: "row" | "column";
-    disabled?: boolean;
-    maxHeight?: string;
+type FlexProps = ComponentProps<typeof FlexStyled> & {
+    as?: ElementType;
+    children: React.ReactNode;
 };
-declare const MultiSelect: React__default.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare function Flex({ children, ...props }: FlexProps): react_jsx_runtime.JSX.Element;
 
-declare const FlexStyled: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<_radix_ui_themes.FlexProps & React$1.RefAttributes<HTMLDivElement>>, {
-    display?: "flex" | "inline-flex" | undefined;
-    align?: "end" | "stretch" | "center" | "start" | "baseline" | undefined;
-    justify?: "end" | "center" | "start" | "between" | "around" | "evenly" | undefined;
-    direction?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
-    gap?: 0 | 2 | "0" | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
-    gapY?: 2 | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
-    gapX?: 2 | "2" | "4" | "6" | "8" | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 22 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | "full" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "32" | "36" | "40" | "48" | "56" | "64" | "72" | "80" | undefined;
+declare const StyledTrigger: _stitches_react_types_styled_component.StyledComponent<"div", {
+    color?: "default" | "error" | undefined;
+    disabled?: boolean | "true" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
@@ -13364,11 +13352,27 @@ declare const FlexStyled: _stitches_react_types_styled_component.StyledComponent
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type FlexProps = ComponentProps<typeof FlexStyled> & {
-    as?: ElementType;
-    children: React.ReactNode;
+
+type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
+    placeholder?: string;
+    value?: string[];
+    onValueChange?: (v: string[]) => void;
+    options: Array<{
+        label: string;
+        value: string;
+    }>;
+    width?: string;
+    zIndex?: string;
+    showSelectedValues?: boolean;
+    singleSelect?: boolean;
+    selectedOrientation?: "row" | "column";
+    disabled?: boolean;
+    maxHeight?: string;
+    selectedAllOptions?: boolean;
+    selectedAllText?: string;
+    selectedScroll?: boolean;
 };
-declare function Flex({ children, ...props }: FlexProps): react_jsx_runtime.JSX.Element;
+declare const MultiSelect: React__default.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 declare const Box: React$1.ForwardRefExoticComponent<_radix_ui_themes.BoxProps & React$1.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -149,7 +149,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment6 = REACT_FRAGMENT_TYPE;
+        var Fragment5 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -208,7 +208,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element;
         exports2.ForwardRef = ForwardRef;
-        exports2.Fragment = Fragment6;
+        exports2.Fragment = Fragment5;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal;
@@ -9392,13 +9392,15 @@ function Tooltip({
   ] }) });
 }
 
-// src/components/MultiSelect.tsx
+// src/components/MultiSelect/index.tsx
 var import_react16 = __toESM(require("react"));
-var import_themes18 = require("@radix-ui/themes");
+var import_themes19 = require("@radix-ui/themes");
 var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
 var import_free_solid_svg_icons3 = require("@fortawesome/free-solid-svg-icons");
 var import_react17 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+
+// src/components/MultiSelect/styledComponents.ts
+var import_themes18 = require("@radix-ui/themes");
 var StyledContent = styled(import_themes18.DropdownMenu.Content, {
   backgroundColor: "$dark50",
   borderRadius: "$sm",
@@ -9482,12 +9484,67 @@ var StyledFlexWithMaxHeight = styled(Flex2, {
     hasMaxHeight: false
   }
 });
+var StyledFlexSelectedItems = styled(Flex2, {
+  overflowY: "auto",
+  margin: "8px 0",
+  "&::-webkit-scrollbar": {
+    width: "4px"
+  },
+  "&::-webkit-scrollbar-track": {
+    backgroundColor: "$dark100",
+    borderRadius: "2px"
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: "$dark300",
+    borderRadius: "2px",
+    "&:hover": {
+      backgroundColor: "$dark400"
+    }
+  }
+});
 var StyledText = styled(Text, {
   flex: 1,
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis"
 });
+var ButtonSelectAllStyled = styled("button", {
+  display: "flex !important",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  gap: "$8",
+  border: "none",
+  "div": {
+    backgroundCcolor: "#fff",
+    borderRadius: "2px",
+    height: "$16",
+    width: "$16",
+    position: "relative",
+    border: "2px solid $dark300",
+    cursor: "pointer",
+    boxSizing: "border-box",
+    "&.checked::before": {
+      backgroundImage: `url("data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M2%200C0.896875%200%200%200.896875%200%202V12C0%2013.1031%200.896875%2014%202%2014H12C13.1031%2014%2014%2013.1031%2014%2012V2C14%200.896875%2013.1031%200%2012%200H2ZM10.5312%205.53125L6.53125%209.53125C6.2375%209.825%205.7625%209.825%205.47188%209.53125L3.47187%207.53125C3.17812%207.2375%203.17812%206.7625%203.47187%206.47188C3.76562%206.18125%204.24062%206.17813%204.53125%206.47188L6%207.94063L9.46875%204.46875C9.7625%204.175%2010.2375%204.175%2010.5281%204.46875C10.8187%204.7625%2010.8219%205.2375%2010.5281%205.52812L10.5312%205.53125Z'%20fill='%23004ED2'/%3E%3C/svg%3E")`,
+      content: "",
+      width: "1rem",
+      height: "1rem",
+      position: "absolute",
+      top: "-1px",
+      right: "-2px",
+      zIndex: "2",
+      backgroundRepeat: "no-repeat"
+    }
+  },
+  "&:hover": {
+    "div": {
+      transition: "all 300ms ease-out",
+      boxShadow: "rgba(56, 129, 255, 0.5) 0px 0px 0px 4px"
+    }
+  }
+});
+
+// src/components/MultiSelect/index.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var MultiSelect = import_react16.default.forwardRef(
   ({
     placeholder,
@@ -9501,10 +9558,14 @@ var MultiSelect = import_react16.default.forwardRef(
     singleSelect = false,
     selectedOrientation = "column",
     disabled = false,
-    maxHeight
+    maxHeight,
+    selectedAllOptions = false,
+    selectedAllText,
+    selectedScroll = false
   }, fowardedRef) => {
     const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
     const triggerRef = (0, import_react16.useRef)(null);
+    const [allOptionsSelected, setAllOptionsSelected] = (0, import_react16.useState)(false);
     const labelByValue = (0, import_react17.useMemo)(() => {
       return options.reduce((prev, curr) => {
         return __spreadProps(__spreadValues({}, prev), {
@@ -9519,6 +9580,21 @@ var MultiSelect = import_react16.default.forwardRef(
       },
       [selectedValues, onValueChange]
     );
+    const handleSelectAll = (0, import_react16.useCallback)(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const allSelected = selectedValues.length === options.length;
+        if (allSelected) {
+          onValueChange == null ? void 0 : onValueChange([]);
+          setAllOptionsSelected(false);
+        } else {
+          onValueChange == null ? void 0 : onValueChange(options.map((o) => o.value));
+          setAllOptionsSelected(true);
+        }
+      },
+      [selectedValues, options, onValueChange]
+    );
     const text = (0, import_react17.useMemo)(() => {
       if (selectedValues.length > 0 && singleSelect) {
         const value = selectedValues[0];
@@ -9539,9 +9615,9 @@ var MultiSelect = import_react16.default.forwardRef(
       },
       [disabled]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes18.Theme, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes18.DropdownMenu.Root, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes18.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes19.Theme, { style: width !== "100%" ? { width } : void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes19.DropdownMenu.Root, { open: isOpen, onOpenChange: setIsOpen, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes19.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           StyledTrigger,
           {
             ref: (r) => {
@@ -9549,9 +9625,7 @@ var MultiSelect = import_react16.default.forwardRef(
               triggerRef.current = r;
               if (fowardedRef) {
                 if (typeof fowardedRef === "function") fowardedRef(r);
-                else {
-                  fowardedRef.current = r;
-                }
+                else fowardedRef.current = r;
               }
             },
             color,
@@ -9591,15 +9665,31 @@ var MultiSelect = import_react16.default.forwardRef(
                 value: selectedValues,
                 onValueChange: (v) => {
                   onValueChange == null ? void 0 : onValueChange(v);
+                  if (allOptionsSelected) {
+                    setAllOptionsSelected(false);
+                  }
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
                   StyledFlexWithMaxHeight,
                   {
                     direction: "column",
                     gap: 8,
                     hasMaxHeight: !!maxHeight,
                     style: maxHeight ? { maxHeight } : void 0,
-                    children: options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { typography: "labelSmall", children: label }) }, i))
+                    children: [
+                      selectedAllOptions && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                        ButtonSelectAllStyled,
+                        {
+                          css: itemStyle,
+                          onClick: (e) => handleSelectAll(e),
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: allOptionsSelected ? "checked" : "" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { typography: "labelSmall", children: selectedAllText ? selectedAllText : "Selecionar Todos" })
+                          ]
+                        }
+                      ),
+                      options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { typography: "labelSmall", children: label }) }, i))
+                    ]
                   }
                 )
               }
@@ -9616,14 +9706,14 @@ var MultiSelect = import_react16.default.forwardRef(
           }
         )
       ] }),
-      selectedValues.length > 0 && showSelectedValues && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        Flex2,
+      selectedValues.length > 0 && showSelectedValues && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        StyledFlexSelectedItems,
         {
           direction: selectedOrientation,
           gap: 8,
           align: selectedOrientation === "column" ? "start" : "center",
           justify: "start",
-          css: { margin: "8px 0" },
+          css: __spreadValues({}, selectedScroll && { maxHeight: maxHeight || "400px" }),
           children: selectedValues.map((value) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             Flex2,
             {
@@ -9656,15 +9746,15 @@ var MultiSelect = import_react16.default.forwardRef(
             value
           ))
         }
-      ) })
+      )
     ] });
   }
 );
 
 // src/components/Grid.tsx
-var import_themes19 = require("@radix-ui/themes");
+var import_themes20 = require("@radix-ui/themes");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var GridStyled = styled(import_themes19.Grid, {
+var GridStyled = styled(import_themes20.Grid, {
   display: "grid",
   variants: {
     display: {
@@ -9789,9 +9879,9 @@ function Grid(_a) {
 }
 
 // src/components/Container.tsx
-var import_themes20 = require("@radix-ui/themes");
+var import_themes21 = require("@radix-ui/themes");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var ContainerStyled = styled(import_themes20.Container, {
+var ContainerStyled = styled(import_themes21.Container, {
   variants: {
     size: {
       xs: { maxWidth: "576px" },
@@ -9824,9 +9914,9 @@ function Container(_a) {
 }
 
 // src/components/Section.tsx
-var import_themes21 = require("@radix-ui/themes");
+var import_themes22 = require("@radix-ui/themes");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var SectionStyled = styled(import_themes21.Section, {
+var SectionStyled = styled(import_themes22.Section, {
   variants: {
     size: {
       xs: { maxWidth: "576px" },