@intlayer/design-system 2.0.13 → 3.0.1

package/dist/components/Select/Multiselect.mjs

@@ -0,0 +1,334 @@
+"use client";
+import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
+import { X, Check } from "lucide-react";
+import { createContext, forwardRef, useCallback, useContext, useState, useRef, useEffect, useMemo } from "react";
+import { cn } from "../../utils/cn.mjs";
+import { Badge } from "../Badge/index.mjs";
+import { Command, CommandRoot } from "../Command/index.mjs";
+const MultiSelectContext = createContext(null);
+const useMultiSelect = () => {
+  const context = useContext(MultiSelectContext);
+  if (!context) {
+    throw new Error("useMultiSelect must be used within MultiSelectProvider");
+  }
+  return context;
+};
+const MultiSelectRoot = ({
+  values: valuesProp,
+  defaultValues,
+  onValueChange,
+  loop = false,
+  className,
+  children,
+  dir,
+  ...props
+}) => {
+  const [value, setValue] = useState(defaultValues ?? []);
+  const [inputValue, setInputValue] = useState("");
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const inputRef = useRef(null);
+  const [isValueSelected, setIsValueSelected] = useState(false);
+  const [selectedValue, setSelectedValue] = useState("");
+  useEffect(() => {
+    if (valuesProp) {
+      setValue(valuesProp);
+    }
+  }, [valuesProp]);
+  const onValueChangeHandler = useCallback(
+    (val) => {
+      if (value.includes(val)) {
+        const newValue = value.filter((item) => item !== val);
+        setValue(newValue);
+        onValueChange?.(newValue);
+      } else {
+        const newValue = [...value, val];
+        setValue(newValue);
+        onValueChange?.(newValue);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [value]
+  );
+  const handleSelect = useCallback(
+    (e) => {
+      e.preventDefault();
+      const target = e.currentTarget;
+      const selection = target.value.substring(
+        target.selectionStart ?? 0,
+        target.selectionEnd ?? 0
+      );
+      setSelectedValue(selection);
+      setIsValueSelected(selection === inputValue);
+    },
+    [inputValue]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      e.stopPropagation();
+      const target = inputRef.current;
+      if (!target) return;
+      const moveNext = () => {
+        const nextIndex = activeIndex + 1;
+        setActiveIndex(
+          nextIndex > value.length - 1 ? loop ? 0 : -1 : nextIndex
+        );
+      };
+      const movePrev = () => {
+        const prevIndex = activeIndex - 1;
+        setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);
+      };
+      const moveCurrent = () => {
+        const newIndex = activeIndex - 1 <= 0 ? value.length - 1 === 0 ? -1 : 0 : activeIndex - 1;
+        setActiveIndex(newIndex);
+      };
+      switch (e.key) {
+        case "ArrowLeft":
+          if (dir === "rtl") {
+            if (value.length > 0 && (activeIndex !== -1 || loop)) {
+              moveNext();
+            }
+          } else if (value.length > 0 && target.selectionStart === 0) {
+            movePrev();
+          }
+          break;
+        case "ArrowRight":
+          if (dir === "rtl") {
+            if (value.length > 0 && target.selectionStart === 0) {
+              movePrev();
+            }
+          } else if (value.length > 0 && (activeIndex !== -1 || loop)) {
+            moveNext();
+          }
+          break;
+        case "Backspace":
+        case "Delete":
+          if (value.length > 0) {
+            if (activeIndex !== -1 && activeIndex < value.length) {
+              onValueChangeHandler(value[activeIndex]);
+              moveCurrent();
+            } else if (target.selectionStart === 0 && selectedValue === inputValue || isValueSelected) {
+              onValueChangeHandler(value[value.length - 1]);
+            }
+          }
+          break;
+        case "Enter":
+          setOpen(true);
+          break;
+        case "Escape":
+          if (activeIndex !== -1) {
+            setActiveIndex(-1);
+          } else if (open) {
+            setOpen(false);
+          }
+          break;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [value, inputValue, activeIndex, loop]
+  );
+  const memoValue = useMemo(
+    () => ({
+      value,
+      onValueChange: onValueChangeHandler,
+      open,
+      setOpen,
+      inputValue,
+      setInputValue,
+      activeIndex,
+      setActiveIndex,
+      ref: inputRef,
+      handleSelect
+    }),
+    [
+      value,
+      onValueChangeHandler,
+      open,
+      setOpen,
+      inputValue,
+      setInputValue,
+      activeIndex,
+      setActiveIndex,
+      inputRef,
+      handleSelect
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectContext.Provider, { value: memoValue, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    CommandRoot,
+    {
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "flex w-full flex-col gap-2 overflow-visible bg-transparent",
+        className
+      ),
+      dir,
+      ...props,
+      children
+    }
+  ) });
+};
+const MultiSelectTrigger = forwardRef(
+  ({
+    className,
+    getBadgeValue = (value) => value,
+    validationStyleEnabled = false,
+    children,
+    ...props
+  }, ref) => {
+    const { value, onValueChange, activeIndex } = useMultiSelect();
+    const mousePreventDefault = useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    }, []);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex w-full flex-col gap-3 rounded-lg p-1 py-2",
+          "border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+          "bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all",
+          "border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
+          "aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark",
+          validationStyleEnabled && "valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark",
+          className
+        ),
+        ...props,
+        children: [
+          value.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-wrap gap-1", children: value.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Badge,
+            {
+              className: cn(
+                "flex items-center gap-1 rounded-xl px-1",
+                activeIndex === index && "ring-muted-foreground ring-2"
+              ),
+              color: "text",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: getBadgeValue(item) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "button",
+                  {
+                    "aria-label": `Remove ${item} option`,
+                    "aria-roledescription": "button to remove option",
+                    onMouseDown: mousePreventDefault,
+                    onClick: () => onValueChange(item),
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sr-only", children: [
+                        "Remove ",
+                        item,
+                        " option"
+                      ] }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-4 cursor-pointer" })
+                    ]
+                  }
+                )
+              ]
+            },
+            item
+          )) }),
+          children
+        ]
+      }
+    );
+  }
+);
+MultiSelectTrigger.displayName = "MultiSelectTrigger";
+const MultiSelectInput = ({
+  className,
+  ...props
+}) => {
+  const {
+    setOpen,
+    inputValue,
+    setInputValue,
+    activeIndex,
+    setActiveIndex,
+    handleSelect,
+    ref: inputRef
+  } = useMultiSelect();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Command.Input,
+    {
+      ...props,
+      tabIndex: 0,
+      ref: inputRef,
+      value: inputValue,
+      onValueChange: activeIndex === -1 ? setInputValue : void 0,
+      onSelect: handleSelect,
+      onBlur: () => setOpen(false),
+      onFocus: () => setOpen(true),
+      onClick: () => setActiveIndex(-1),
+      className: cn(
+        "ml-2 flex-1 cursor-pointer outline-none",
+        className,
+        activeIndex !== -1 && "caret-transparent"
+      )
+    }
+  );
+};
+MultiSelectInput.displayName = "MultiSelectInput";
+const MultiSelectContent = forwardRef(({ children }, ref) => {
+  const { open } = useMultiSelect();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, className: "relative", children: open && children });
+});
+MultiSelectContent.displayName = "MultiSelectContent";
+const MultiSelectList = forwardRef(({ className, children }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  Command.List,
+  {
+    ref,
+    className: cn(
+      "border-muted bg-input-background dark:bg-input-background-dark absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors",
+      className
+    ),
+    children: [
+      children,
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Command.Empty, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: "No results found" }) })
+    ]
+  }
+));
+MultiSelectList.displayName = "MultiSelectList";
+const MultiSelectItem = forwardRef(({ className, value, children, ...props }, ref) => {
+  const { value: Options, onValueChange, setInputValue } = useMultiSelect();
+  const mousePreventDefault = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    []
+  );
+  const isIncluded = Options.includes(value);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Command.Item,
+    {
+      ref,
+      ...props,
+      onSelect: () => {
+        onValueChange(value);
+        setInputValue("");
+      },
+      className: cn(
+        "flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors",
+        "hover:bg-neutral/10 dark:hover:bg-neutral-dark/10",
+        className,
+        isIncluded && "opacity-50",
+        props.disabled && "cursor-not-allowed opacity-50"
+      ),
+      onMouseDown: mousePreventDefault,
+      children: [
+        children,
+        isIncluded && /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-4" })
+      ]
+    }
+  );
+});
+MultiSelectItem.displayName = "MultiSelectItem";
+const MultiSelect = MultiSelectRoot;
+MultiSelect.Trigger = MultiSelectTrigger;
+MultiSelect.Input = MultiSelectInput;
+MultiSelect.Content = MultiSelectContent;
+MultiSelect.List = MultiSelectList;
+MultiSelect.Item = MultiSelectItem;
+export {
+  MultiSelect
+};
+//# sourceMappingURL=Multiselect.mjs.map

package/dist/components/Select/Multiselect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Multiselect.mjs","sources":["../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-nested-conditional */\n/* eslint-disable sonarjs/cognitive-complexity */\n'use client';\n\nimport { X as RemoveIcon, Check } from 'lucide-react';\nimport {\n  type ComponentPropsWithoutRef,\n  type Dispatch,\n  type ElementRef,\n  type FC,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEventHandler,\n  type RefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Badge } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\ntype MultiSelectContextProps = {\n  value: string[];\n  onValueChange: (value: string) => void;\n  open: boolean;\n  setOpen: (value: boolean) => void;\n  inputValue: string;\n  setInputValue: Dispatch<SetStateAction<string>>;\n  activeIndex: number;\n  setActiveIndex: Dispatch<SetStateAction<number>>;\n  ref: RefObject<HTMLInputElement>;\n  handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps | null>(null);\n\nconst useMultiSelect = () => {\n  const context = useContext(MultiSelectContext);\n  if (!context) {\n    throw new Error('useMultiSelect must be used within MultiSelectProvider');\n  }\n  return context;\n};\n\n/**\n * MultiSelect Docs: {@link: https://shadcn-extension.vercel.app/docs/multi-select}\n */\n\ntype MultiSelectProps = ComponentPropsWithoutRef<typeof CommandRoot> & {\n  values?: string[];\n  defaultValues?: string[];\n  onValueChange?: (value: string[]) => void;\n  loop?: boolean;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n *   values={value}\n *   onValuesChange={setValue}\n *   loop\n * >\n *   <MultiSelectTrigger>\n *     <MultiSelectInput placeholder=\"Select your framework\" />\n *   </MultiSelectTrigger>\n *   <MultiSelectContent>\n *     <MultiSelectList>\n *       <MultiSelectItem value={\"React\"}>React</MultiSelectItem>\n *       <MultiSelectItem value={\"Vue\"}>Vue</MultiSelectItem>\n *       <MultiSelectItem value={\"Svelte\"}>Svelte</MultiSelectItem>\n *     </MultiSelectList>\n *   </MultiSelectContent>\n * </MultiSelect>\n * ```\n */\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n  values: valuesProp,\n  defaultValues,\n  onValueChange: onValueChange,\n  loop = false,\n  className,\n  children,\n  dir,\n  ...props\n}) => {\n  const [value, setValue] = useState<string[]>(defaultValues ?? []);\n  const [inputValue, setInputValue] = useState('');\n  const [open, setOpen] = useState<boolean>(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isValueSelected, setIsValueSelected] = useState(false);\n  const [selectedValue, setSelectedValue] = useState('');\n\n  useEffect(() => {\n    if (valuesProp) {\n      setValue(valuesProp);\n    }\n  }, [valuesProp]);\n\n  const onValueChangeHandler = useCallback(\n    (val: string) => {\n      if (value.includes(val)) {\n        const newValue = value.filter((item) => item !== val);\n        setValue(newValue);\n        onValueChange?.(newValue);\n      } else {\n        const newValue = [...value, val];\n        setValue(newValue);\n        onValueChange?.(newValue);\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [value]\n  );\n\n  const handleSelect = useCallback(\n    (e: SyntheticEvent<HTMLInputElement>) => {\n      e.preventDefault();\n      const target = e.currentTarget;\n      const selection = target.value.substring(\n        target.selectionStart ?? 0,\n        target.selectionEnd ?? 0\n      );\n\n      setSelectedValue(selection);\n      setIsValueSelected(selection === inputValue);\n    },\n    [inputValue]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      e.stopPropagation();\n      const target = inputRef.current;\n\n      if (!target) return;\n\n      const moveNext = () => {\n        const nextIndex = activeIndex + 1;\n        setActiveIndex(\n          nextIndex > value.length - 1 ? (loop ? 0 : -1) : nextIndex\n        );\n      };\n\n      const movePrev = () => {\n        const prevIndex = activeIndex - 1;\n        setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);\n      };\n\n      const moveCurrent = () => {\n        const newIndex =\n          activeIndex - 1 <= 0\n            ? value.length - 1 === 0\n              ? -1\n              : 0\n            : activeIndex - 1;\n        setActiveIndex(newIndex);\n      };\n\n      switch (e.key) {\n        case 'ArrowLeft':\n          if (dir === 'rtl') {\n            if (value.length > 0 && (activeIndex !== -1 || loop)) {\n              moveNext();\n            }\n          } else if (value.length > 0 && target.selectionStart === 0) {\n            movePrev();\n          }\n          break;\n\n        case 'ArrowRight':\n          if (dir === 'rtl') {\n            if (value.length > 0 && target.selectionStart === 0) {\n              movePrev();\n            }\n          } else if (value.length > 0 && (activeIndex !== -1 || loop)) {\n            moveNext();\n          }\n          break;\n\n        case 'Backspace':\n        case 'Delete':\n          if (value.length > 0) {\n            if (activeIndex !== -1 && activeIndex < value.length) {\n              onValueChangeHandler(value[activeIndex]);\n              moveCurrent();\n            } else if (\n              (target.selectionStart === 0 && selectedValue === inputValue) ||\n              isValueSelected\n            ) {\n              onValueChangeHandler(value[value.length - 1]);\n            }\n          }\n          break;\n\n        case 'Enter':\n          setOpen(true);\n          break;\n\n        case 'Escape':\n          if (activeIndex !== -1) {\n            setActiveIndex(-1);\n          } else if (open) {\n            setOpen(false);\n          }\n          break;\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [value, inputValue, activeIndex, loop]\n  );\n\n  const memoValue = useMemo(\n    () => ({\n      value,\n      onValueChange: onValueChangeHandler,\n      open,\n      setOpen,\n      inputValue,\n      setInputValue,\n      activeIndex,\n      setActiveIndex,\n      ref: inputRef,\n      handleSelect,\n    }),\n    [\n      value,\n      onValueChangeHandler,\n      open,\n      setOpen,\n      inputValue,\n      setInputValue,\n      activeIndex,\n      setActiveIndex,\n      inputRef,\n      handleSelect,\n    ]\n  );\n\n  return (\n    <MultiSelectContext.Provider value={memoValue}>\n      <CommandRoot\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'flex w-full flex-col gap-2 overflow-visible bg-transparent',\n          className\n        )}\n        dir={dir}\n        {...props}\n      >\n        {children}\n      </CommandRoot>\n    </MultiSelectContext.Provider>\n  );\n};\n\nconst MultiSelectTrigger = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement> & {\n    getBadgeValue?: (value: string) => string;\n    validationStyleEnabled?: boolean;\n  }\n>(\n  (\n    {\n      className,\n      getBadgeValue = (value) => value,\n      validationStyleEnabled = false,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { value, onValueChange, activeIndex } = useMultiSelect();\n\n    const mousePreventDefault: MouseEventHandler<HTMLButtonElement> =\n      useCallback((e) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }, []);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex w-full flex-col gap-3 rounded-lg p-1 py-2',\n          'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n          'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n          'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n          'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n          validationStyleEnabled &&\n            'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\n          className\n        )}\n        {...props}\n      >\n        {value.length > 0 && (\n          <div className=\"flex w-full flex-wrap gap-1\">\n            {value.map((item, index) => (\n              <Badge\n                key={item}\n                className={cn(\n                  'flex items-center gap-1 rounded-xl px-1',\n                  activeIndex === index && 'ring-muted-foreground ring-2'\n                )}\n                color=\"text\"\n              >\n                <span className=\"text-xs\">{getBadgeValue(item)}</span>\n                <button\n                  aria-label={`Remove ${item} option`}\n                  aria-roledescription=\"button to remove option\"\n                  onMouseDown={mousePreventDefault}\n                  onClick={() => onValueChange(item)}\n                >\n                  <span className=\"sr-only\">Remove {item} option</span>\n                  <RemoveIcon className=\"size-4 cursor-pointer\" />\n                </button>\n              </Badge>\n            ))}\n          </div>\n        )}\n        {children}\n      </div>\n    );\n  }\n);\n\nMultiSelectTrigger.displayName = 'MultiSelectTrigger';\n\nconst MultiSelectInput: FC<ComponentPropsWithoutRef<typeof Command.Input>> = ({\n  className,\n  ...props\n}) => {\n  const {\n    setOpen,\n    inputValue,\n    setInputValue,\n    activeIndex,\n    setActiveIndex,\n    handleSelect,\n    ref: inputRef,\n  } = useMultiSelect();\n\n  return (\n    <Command.Input\n      {...props}\n      tabIndex={0}\n      ref={inputRef}\n      value={inputValue}\n      onValueChange={activeIndex === -1 ? setInputValue : undefined}\n      onSelect={handleSelect}\n      onBlur={() => setOpen(false)}\n      onFocus={() => setOpen(true)}\n      onClick={() => setActiveIndex(-1)}\n      className={cn(\n        'ml-2 flex-1 cursor-pointer outline-none',\n        className,\n        activeIndex !== -1 && 'caret-transparent'\n      )}\n    />\n  );\n};\n\nMultiSelectInput.displayName = 'MultiSelectInput';\n\nconst MultiSelectContent = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement>\n>(({ children }, ref) => {\n  const { open } = useMultiSelect();\n  return (\n    <div ref={ref} className=\"relative\">\n      {open && children}\n    </div>\n  );\n});\n\nMultiSelectContent.displayName = 'MultiSelectContent';\n\nconst MultiSelectList = forwardRef<\n  ElementRef<typeof Command.List>,\n  ComponentPropsWithoutRef<typeof Command.List>\n>(({ className, children }, ref) => (\n  <Command.List\n    ref={ref}\n    className={cn(\n      'border-muted bg-input-background dark:bg-input-background-dark absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors',\n      className\n    )}\n  >\n    {children}\n    <Command.Empty>\n      <span className=\"text-muted-foreground\">No results found</span>\n    </Command.Empty>\n  </Command.List>\n));\n\nMultiSelectList.displayName = 'MultiSelectList';\n\nconst MultiSelectItem = forwardRef<\n  ElementRef<typeof Command.Item>,\n  { value: string } & ComponentPropsWithoutRef<typeof Command.Item>\n>(({ className, value, children, ...props }, ref) => {\n  const { value: Options, onValueChange, setInputValue } = useMultiSelect();\n\n  const mousePreventDefault: MouseEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    []\n  );\n\n  const isIncluded = Options.includes(value);\n  return (\n    <Command.Item\n      ref={ref}\n      {...props}\n      onSelect={() => {\n        onValueChange(value);\n        setInputValue('');\n      }}\n      className={cn(\n        'flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors',\n        'hover:bg-neutral/10 dark:hover:bg-neutral-dark/10',\n        className,\n        isIncluded && 'opacity-50',\n        props.disabled && 'cursor-not-allowed opacity-50'\n      )}\n      onMouseDown={mousePreventDefault}\n    >\n      {children}\n      {isIncluded && <Check className=\"size-4\" />}\n    </Command.Item>\n  );\n});\n\nMultiSelectItem.displayName = 'MultiSelectItem';\n\ntype MultiSelectType = typeof MultiSelectRoot & {\n  Trigger: typeof MultiSelectTrigger;\n  Input: typeof MultiSelectInput;\n  Content: typeof MultiSelectContent;\n  List: typeof MultiSelectList;\n  Item: typeof MultiSelectItem;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n *   values={value}\n *   onValuesChange={setValue}\n *   loop\n * >\n *   <MultiSelect.Trigger>\n *     <MultiSelect.Input placeholder=\"Select your framework\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.List>\n *       <MultiSelect.Item value={\"React\"}>React</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Vue\"}>Vue</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Svelte\"}>Svelte</MultiSelect.Item>\n *     </MultiSelect.List>\n *   </MultiSelect.Content>\n * </MultiSelect>\n * ```\n */\nexport const MultiSelect = MultiSelectRoot as MultiSelectType;\nMultiSelect.Trigger = MultiSelectTrigger;\nMultiSelect.Input = MultiSelectInput;\nMultiSelect.Content = MultiSelectContent;\nMultiSelect.List = MultiSelectList;\nMultiSelect.Item = MultiSelectItem;\n"],"names":["jsx","jsxs","RemoveIcon"],"mappings":"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"}

package/dist/components/Select/Select.cjs

@@ -0,0 +1,152 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
+const SelectPrimitive = require("@radix-ui/react-select");
+const lucideReact = require("lucide-react");
+const require$$0 = require("react");
+const utils_cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const SelectPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SelectPrimitive);
+const SelectRoot = SelectPrimitive__namespace.Root;
+const SelectGroup = SelectPrimitive__namespace.Group;
+const SelectValue = SelectPrimitive__namespace.Value;
+const SelectTrigger = require$$0.forwardRef(({ validationStyleEnabled = false, className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+  SelectPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: utils_cn.cn(
+      "border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all",
+      "border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
+      "aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark",
+      validationStyleEnabled && "valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(lucideReact.ChevronsUpDown, { className: "size-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
+const SelectScrollUpButton = require$$0.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  SelectPrimitive__namespace.ScrollUpButton,
+  {
+    ref,
+    className: utils_cn.cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(lucideReact.ChevronUpIcon, {})
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
+const SelectScrollDownButton = require$$0.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  SelectPrimitive__namespace.ScrollDownButton,
+  {
+    ref,
+    className: utils_cn.cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(lucideReact.ChevronDownIcon, {})
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
+const SelectContent = require$$0.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+  SelectPrimitive__namespace.Content,
+  {
+    ref,
+    className: utils_cn.cn(
+      "bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 p-1 text-sm shadow-none outline-0 transition-all",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden border shadow-md",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        SelectPrimitive__namespace.Viewport,
+        {
+          className: utils_cn.cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
+const SelectLabel = require$$0.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  SelectPrimitive__namespace.Label,
+  {
+    ref,
+    className: utils_cn.cn("px-1 py-0.5 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
+const SelectItem = require$$0.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+  SelectPrimitive__namespace.Item,
+  {
+    ref,
+    className: utils_cn.cn(
+      "focus:bg-neutral/10 dark:focus:bg-neutral-dark/10 relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(lucideReact.CheckIcon, { className: "size-4" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(SelectPrimitive__namespace.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
+const SelectSeparator = require$$0.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  SelectPrimitive__namespace.Separator,
+  {
+    ref,
+    className: utils_cn.cn("-mx-1 my-1 h-px bg-red-300", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
+const Select = SelectRoot;
+Select.Group = SelectGroup;
+Select.Value = SelectValue;
+Select.Trigger = SelectTrigger;
+Select.ScrollUpButton = SelectScrollUpButton;
+Select.ScrollDownButton = SelectScrollDownButton;
+Select.Content = SelectContent;
+Select.Label = SelectLabel;
+Select.Item = SelectItem;
+Select.Separator = SelectSeparator;
+exports.Select = Select;
+exports.SelectContent = SelectContent;
+exports.SelectLabel = SelectLabel;
+exports.SelectSeparator = SelectSeparator;
+//# sourceMappingURL=Select.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport {\n  ChevronsUpDown,\n  CheckIcon,\n  ChevronDownIcon,\n  ChevronUpIcon,\n} from 'lucide-react';\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  forwardRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = forwardRef<\n  ElementRef<typeof SelectPrimitive.Trigger>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {\n    validationStyleEnabled?: boolean;\n  }\n>(({ validationStyleEnabled = false, className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n      'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n      'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n      'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n      validationStyleEnabled &&\n        'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronsUpDown className=\"size-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = forwardRef<\n  ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-1',\n      className\n    )}\n    {...props}\n  >\n    <ChevronUpIcon />\n  </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = forwardRef<\n  ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-1',\n      className\n    )}\n    {...props}\n  >\n    <ChevronDownIcon />\n  </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName;\n\nexport const SelectContent = forwardRef<\n  ElementRef<typeof SelectPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 p-1 text-sm shadow-none outline-0 transition-all',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden border shadow-md',\n        position === 'popper' &&\n          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        className\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          'p-1',\n          position === 'popper' &&\n            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nexport const SelectLabel = forwardRef<\n  ElementRef<typeof SelectPrimitive.Label>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn('px-1 py-0.5 text-sm font-semibold', className)}\n    {...props}\n  />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = forwardRef<\n  ElementRef<typeof SelectPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      'focus:bg-neutral/10 dark:focus:bg-neutral-dark/10 relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <CheckIcon className=\"size-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nexport const SelectSeparator = forwardRef<\n  ElementRef<typeof SelectPrimitive.Separator>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-1 my-1 h-px bg-red-300', className)}\n    {...props}\n  />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\ntype SelectType = typeof SelectRoot & {\n  Group: typeof SelectGroup;\n  Value: typeof SelectValue;\n  Trigger: typeof SelectTrigger;\n  ScrollUpButton: typeof SelectScrollUpButton;\n  ScrollDownButton: typeof SelectScrollDownButton;\n  Content: typeof SelectContent;\n  Label: typeof SelectLabel;\n  Item: typeof SelectItem;\n  Separator: typeof SelectSeparator;\n};\n\n/**\n * Usage example:\n * ```jsx\n * <Select>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Theme\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Item value=\"light\">Light</Select.Item>\n *     <Select.Item value=\"dark\">Dark</Select.Item>\n *     <Select.Item value=\"system\">System</Select.Item>\n *   </Select.Content>\n * </Select>\n * ```\n */\nexport const Select = SelectRoot as SelectType;\nSelect.Group = SelectGroup;\nSelect.Value = SelectValue;\nSelect.Trigger = SelectTrigger;\nSelect.ScrollUpButton = SelectScrollUpButton;\nSelect.ScrollDownButton = SelectScrollDownButton;\nSelect.Content = SelectContent;\nSelect.Label = SelectLabel;\nSelect.Item = SelectItem;\nSelect.Separator = SelectSeparator;\n"],"names":["SelectPrimitive","forwardRef","jsxs","cn","jsx","ChevronsUpDown","ChevronUpIcon","ChevronDownIcon","CheckIcon"],"mappings":"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"}

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

@@ -0,0 +1,42 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+declare const SelectRoot: import('react').FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: import('react').ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const SelectValue: import('react').ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & import('react').RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
+    validationStyleEnabled?: boolean;
+} & import('react').RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectContent: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectLabel: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const SelectItem: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectSeparator: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+type SelectType = typeof SelectRoot & {
+    Group: typeof SelectGroup;
+    Value: typeof SelectValue;
+    Trigger: typeof SelectTrigger;
+    ScrollUpButton: typeof SelectScrollUpButton;
+    ScrollDownButton: typeof SelectScrollDownButton;
+    Content: typeof SelectContent;
+    Label: typeof SelectLabel;
+    Item: typeof SelectItem;
+    Separator: typeof SelectSeparator;
+};
+/**
+ * Usage example:
+ * ```jsx
+ * <Select>
+ *   <Select.Trigger>
+ *     <Select.Value placeholder="Theme" />
+ *   </Select.Trigger>
+ *   <Select.Content>
+ *     <Select.Item value="light">Light</Select.Item>
+ *     <Select.Item value="dark">Dark</Select.Item>
+ *     <Select.Item value="system">System</Select.Item>
+ *   </Select.Content>
+ * </Select>
+ * ```
+ */
+export declare const Select: SelectType;
+export {};
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAc1D,QAAA,MAAM,UAAU,iDAAuB,CAAC;AACxC,QAAA,MAAM,WAAW,6HAAwB,CAAC;AAC1C,QAAA,MAAM,WAAW,8HAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa;6BAGU,OAAO;qDAqBlC,CAAC;AAGH,QAAA,MAAM,oBAAoB,mMAcxB,CAAC;AAGH,QAAA,MAAM,sBAAsB,qMAc1B,CAAC;AAIH,eAAO,MAAM,aAAa,4LA8BxB,CAAC;AAGH,eAAO,MAAM,WAAW,0LAStB,CAAC;AAGH,QAAA,MAAM,UAAU,yLAmBd,CAAC;AAGH,eAAO,MAAM,eAAe,8LAS1B,CAAC;AAGH,KAAK,UAAU,GAAG,OAAO,UAAU,GAAG;IACpC,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,cAAc,EAAE,OAAO,oBAAoB,CAAC;IAC5C,gBAAgB,EAAE,OAAO,sBAAsB,CAAC;IAChD,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,SAAS,EAAE,OAAO,eAAe,CAAC;CACnC,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,EAAiB,UAAU,CAAC"}