linkedunion-design-kit 1.11.6 → 1.11.8

package/dist/src/components/Dropdown/Combobox/{Combobox.js → Combobox.jsx}

@@ -8,7 +8,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useMemo } from "react";
 import { cn } from "../../../lib/utils";
 import { Badge } from "../../../components/Badge/Badge";
@@ -96,25 +95,35 @@ var Combobox = function (props) {
                     : multiValue.includes(option.value);
             });
             if (selectedOptions.length <= maxVisibleBadges) {
-                return (_jsx("div", { className: "flex flex-wrap gap-1", children: selectedOptions.map(function (option) {
+                return (<div className="flex flex-wrap gap-1">
+            {selectedOptions.map(function (option) {
                         return renderBadge(typeof option === "string"
                             ? { key: option, value: option }
                             : option, handleRemove);
-                    }) }));
+                    })}
+          </div>);
             }
             var remainingCount = selectedOptions.length - maxVisibleBadges;
             var remainingOptions = selectedOptions.slice(maxVisibleBadges);
-            return (_jsxs("div", { className: "flex flex-wrap gap-1", children: [selectedOptions
-                        .slice(0, maxVisibleBadges)
-                        .map(function (option) {
-                        return renderBadge(typeof option === "string"
-                            ? { key: option, value: option }
-                            : option, handleRemove);
-                    }), _jsx(Tooltip, { title: remainingOptions
-                            .map(function (option) {
-                            return typeof option === "string" ? option : option.key;
-                        })
-                            .join(", "), children: _jsxs(Badge, { color: "light-blue", className: "cursor-help", children: ["+", remainingCount] }) })] }));
+            return (<div className="flex flex-wrap gap-1">
+          {selectedOptions
+                    .slice(0, maxVisibleBadges)
+                    .map(function (option) {
+                    return renderBadge(typeof option === "string"
+                        ? { key: option, value: option }
+                        : option, handleRemove);
+                })}
+          {/* TODO: Update Tooltip design */}
+          <Tooltip title={remainingOptions
+                    .map(function (option) {
+                    return typeof option === "string" ? option : option.key;
+                })
+                    .join(", ")}>
+            <Badge color="light-blue" className="cursor-help">
+              +{remainingCount}
+            </Badge>
+          </Tooltip>
+        </div>);
         }
         else {
             if (!singleValue)
@@ -141,20 +150,49 @@ var Combobox = function (props) {
         setSingleValue,
     ]);
     var normalizedOptions = useMemo(function () { return (Array.isArray(options) ? options : []); }, [options]);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ref: buttonRef, variant: "outline", role: "combobox", color: "light-gray", "aria-expanded": open, className: cn("w-full justify-between !py-3 !px-4 font-normal !leading-normal hover:!bg-transparent active:!bg-transparent", comboboxSizes[size], comboboxSelectType[variant], comboboxColor[variant][color], open && comboboxColor[variant]["blue"], disabled && [
-                        variant === "fill" && "bg-gray-100",
-                        "border border-gray-300 cursor-not-allowed pointer-events-none",
-                    ], "min-h-[42px]"), shape: comboboxShapes[shape], disabled: disabled, tabIndex: disabled ? -1 : 0, children: [_jsx("div", { className: "flex-grow flex items-center", children: getDisplay }), _jsx(LUIcon, { icon: "angle-down", size: iconSizeMap[size], color: "light-gray" })] }) }), _jsx(PopoverContent, { className: "p-0", style: popoverWidth ? { width: popoverWidth } : {}, children: _jsxs(Command, { children: [isSearch && (_jsx(CommandInput, { placeholder: "Search", className: comboboxSizes[size] })), isMulti && normalizedOptions.length > 0 && (_jsxs("div", { className: "flex flex-col gap-1 !px-4 !py-3 rounded-sm bg-gray-50 text-gray-800", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "select-all", checked: multiValue.length === normalizedOptions.length, onCheckedChange: handleSelectAll, size: size }), _jsx(Label, { variant: getLabelVariant(size), children: "Select All" })] }), _jsxs(Caption, { variant: "sm", className: "text-gray-500", children: ["Selected (", multiValue.length, ")"] })] })), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: empty_message }), _jsx(CommandGroup, { children: normalizedOptions.map(function (option) {
-                                        var normalizedOption = typeof option === "string"
-                                            ? { key: option, value: option }
-                                            : option;
-                                        var selected = isMulti
-                                            ? multiValue.includes(normalizedOption.value)
-                                            : singleValue === normalizedOption.value;
-                                        return (_jsx(CommandItem, { value: normalizedOption.value, onSelect: function () { return handleSelect(normalizedOption.value); }, size: size, className: cn(selected &&
-                                                "bg-blue-50 text-blue-600 hover:text-blue-600"), children: renderOption
-                                                ? renderOption(normalizedOption)
-                                                : normalizedOption.key }, normalizedOption.value));
-                                    }) })] })] }) })] }));
+    return (<Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button ref={buttonRef} variant="outline" role="combobox" color="light-gray" aria-expanded={open} className={cn("w-full justify-between !py-3 !px-4 font-normal !leading-normal hover:!bg-transparent active:!bg-transparent", comboboxSizes[size], comboboxSelectType[variant], comboboxColor[variant][color], open && comboboxColor[variant]["blue"], disabled && [
+            variant === "fill" && "bg-gray-100",
+            "border border-gray-300 cursor-not-allowed pointer-events-none",
+        ], "min-h-[42px]")} shape={comboboxShapes[shape]} disabled={disabled} tabIndex={disabled ? -1 : 0}>
+          <div className="flex-grow flex items-center">{getDisplay}</div>
+          <LUIcon icon="angle-down" size={iconSizeMap[size]} color="light-gray"/>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={popoverWidth ? { width: popoverWidth } : {}}>
+        <Command>
+          {isSearch && (<CommandInput placeholder="Search" className={comboboxSizes[size]}/>)}
+          {isMulti && normalizedOptions.length > 0 && (<div className="flex flex-col gap-1 !px-4 !py-3 rounded-sm bg-gray-50 text-gray-800">
+              <div className="flex items-center gap-2">
+                <Checkbox id="select-all" checked={multiValue.length === normalizedOptions.length} onCheckedChange={handleSelectAll} size={size}/>
+                <Label variant={getLabelVariant(size)}>Select All</Label>
+              </div>
+              <Caption variant="sm" className="text-gray-500">
+                Selected ({multiValue.length})
+              </Caption>
+            </div>)}
+          <CommandList>
+            <CommandEmpty>{empty_message}</CommandEmpty>
+            <CommandGroup>
+              {normalizedOptions.map(function (option) {
+            var normalizedOption = typeof option === "string"
+                ? { key: option, value: option }
+                : option;
+            var selected = isMulti
+                ? multiValue.includes(normalizedOption.value)
+                : singleValue === normalizedOption.value;
+            return (<CommandItem key={normalizedOption.value} value={normalizedOption.value} onSelect={function () { return handleSelect(normalizedOption.value); }} size={size} className={cn(selected &&
+                    "bg-blue-50 text-blue-600 hover:text-blue-600")}>
+                    {renderOption
+                    ? renderOption(normalizedOption)
+                    : normalizedOption.key}
+                  </CommandItem>);
+        })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>);
 };
 export default Combobox;

package/dist/src/components/Dropdown/Combobox/Combobox.stories.d.ts

@@ -3,11 +3,11 @@ import { Meta } from "@storybook/react";
 declare const _default: Meta<ComboboxProps>;
 export default _default;
 export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ComboboxProps>;
-export declare const Basic: () => import("react/jsx-runtime").JSX.Element;
-export declare const ComboboxSize: () => import("react/jsx-runtime").JSX.Element;
-export declare const ComboboxType: () => import("react/jsx-runtime").JSX.Element;
-export declare const ComboboxWithCheckbox: () => import("react/jsx-runtime").JSX.Element;
-export declare const ComboboxWithUserIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const ComboboxWithDefaultValue: () => import("react/jsx-runtime").JSX.Element;
-export declare const ListOfArray: () => import("react/jsx-runtime").JSX.Element;
-export declare const ComboboxValidation: () => import("react/jsx-runtime").JSX.Element;
+export declare const Basic: () => import("react").JSX.Element;
+export declare const ComboboxSize: () => import("react").JSX.Element;
+export declare const ComboboxType: () => import("react").JSX.Element;
+export declare const ComboboxWithCheckbox: () => import("react").JSX.Element;
+export declare const ComboboxWithUserIcon: () => import("react").JSX.Element;
+export declare const ComboboxWithDefaultValue: () => import("react").JSX.Element;
+export declare const ListOfArray: () => import("react").JSX.Element;
+export declare const ComboboxValidation: () => import("react").JSX.Element;

package/dist/src/components/Dropdown/Combobox/Combobox.stories.jsx

@@ -0,0 +1,289 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { useState } from "react";
+import Combobox from "./Combobox";
+import { comboboxColor, comboboxSelectType, comboboxShapes, comboboxSizes, } from ".";
+import LUIcon from "../../../components/Icons/LUIcon";
+import { Label } from "../../../components/Label/Label";
+import Tooltip from "../../../components/ToolTip/Tooltip";
+import { Caption } from "../../../components/Typography/Caption/caption";
+import { Button } from "../../../components/Button/Button/Button";
+import { Checkbox } from "../../../components/Checkbox/checkbox";
+import { Badge } from "../../../components/Badge/Badge";
+export default {
+    title: "Components/Dropdown/Combobox",
+    component: Combobox,
+    tags: ["autodocs"],
+    argTypes: {
+        options: {
+            control: { type: "object" },
+            description: "Options for the combobox dropdown",
+            table: {
+                type: { summary: "Array<{ value: string; label: string }>" },
+                defaultValue: { summary: "See default" },
+            },
+        },
+        size: {
+            control: { type: "select" },
+            options: Object.keys(comboboxSizes),
+            description: "Size of the combobox button",
+            table: {
+                type: { summary: "comboboxSizes" },
+                defaultValue: { summary: "md" },
+            },
+        },
+        placeholder: {
+            control: { type: "text" },
+            description: "Placeholder text for the combobox",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "Select Options" },
+            },
+        },
+        shape: {
+            control: { type: "select" },
+            options: Object.keys(comboboxShapes),
+            description: "Shape of the combobox button",
+            table: {
+                type: { summary: "comboboxShapes" },
+                defaultValue: { summary: "rectangular" },
+            },
+        },
+        variant: {
+            control: { type: "select" },
+            options: Object.keys(comboboxSelectType),
+            description: "Type of the combobox",
+            table: {
+                type: { summary: "comboboxSelectType" },
+                defaultValue: { summary: "fill" },
+            },
+        },
+        color: {
+            control: { type: "select" },
+            options: Object.keys(comboboxColor.fill),
+            description: "Color of the combobox",
+            table: {
+                type: { summary: "comboboxColor" },
+                defaultValue: { summary: "default" },
+            },
+        },
+        isSearch: {
+            control: { type: "boolean" },
+            description: "Enable search functionality",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "false" },
+            },
+        },
+        isMulti: {
+            control: { type: "boolean" },
+            description: "Enable multi-select functionality",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "false" },
+            },
+        },
+        onSelect: {
+            control: false,
+            description: "Callback fired when an option is selected",
+            table: {
+                type: { summary: "(selected: any) => void" },
+            },
+        },
+        disabled: {
+            control: { type: "boolean" },
+            description: "Disable the combobox",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "false" },
+            },
+        },
+        renderOption: {
+            control: false,
+            description: "Custom render function for options",
+            table: {
+                type: { summary: "(option: any) => ReactNode" },
+            },
+        },
+        defaultValue: {
+            control: { type: "text" },
+            description: "Default value for the combobox",
+            table: {
+                type: { summary: "string | string[]" },
+            },
+        },
+    },
+};
+var Template = function (args) { return <Combobox {...args}/>; };
+export var Default = Template.bind({});
+Default.args = {
+    size: "md",
+    placeholder: "Select Options",
+    shape: "rectangular",
+    options: [
+        { key: "next.js", value: "Next.js" },
+        { key: "sveltekit", value: "SvelteKit" },
+        { key: "nest.js", value: "Nest.js" },
+        { key: "remix", value: "Remix" },
+        { key: "astro", value: "Astro" },
+        { key: "react", value: "React" },
+        { key: "nest", value: "Nest" },
+        { key: "python", value: "Python" },
+        { key: "ai", value: "AI" },
+    ],
+    isSearch: true,
+    isMulti: true,
+    renderOption: function (option) { return (<>
+      {option.icon && <LUIcon icon={option.icon} size="md"/>}
+      <span>{option.key}</span>
+    </>); },
+    onSelect: function (value) { return console.log(value); },
+};
+export var Basic = function () { return (<Combobox options={[
+        { key: "React", value: "react" },
+        { key: "Vue", value: "vue" },
+    ]} onSelect={function (value) { return console.log(value); }}/>); };
+export var ComboboxSize = function () { return (<div className="space-y-4">
+    <Combobox size="sm" options={[
+        { key: "React", value: "react" },
+        { key: "Vue", value: "vue" },
+    ]} onSelect={function (value) { return console.log(value); }}/>
+    <Combobox size="md" options={[
+        { key: "React", value: "react" },
+        { key: "Vue", value: "vue" },
+    ]} onSelect={function (value) { return console.log(value); }}/>
+    <Combobox size="lg" options={[
+        { key: "React", value: "react" },
+        { key: "Vue", value: "vue" },
+    ]} onSelect={function (value) { return console.log(value); }}/>
+  </div>); };
+export var ComboboxType = function () { return (<div className="space-y-4">
+    <Label variant="label-sm">Text</Label>
+    <Combobox isMulti options={["React", "Vue", "Angular"]} renderOption={function (option) { return <span>{option.value}</span>; }}/>
+
+    <Label variant="label-sm">Text With Right Icon</Label>
+    <Combobox isMulti options={["React", "Vue", "Angular"]} renderOption={function (option) { return (<div className="flex items-center justify-between w-full">
+          <span>{option.value}</span>
+          <LUIcon icon="plus"/>
+        </div>); }}/>
+
+    <Label variant="label-sm">Text With Left Icon</Label>
+    <Combobox isMulti options={[
+        { key: "next.js", value: "Next.js", icon: "plus" },
+        { key: "sveltekit", value: "SvelteKit", icon: "star" },
+        { key: "nest.js", value: "Nest.js", icon: "check" },
+        { key: "remix", value: "Remix", icon: "minus" },
+        { key: "astro", value: "Astro", icon: "plus" },
+    ]} renderOption={function (option) { return (<div className="flex items-center gap-2 w-full">
+          <LUIcon icon={option.icon}/>
+          <span>{option.value}</span>
+        </div>); }}/>
+
+    <Label variant="label-sm">Badge</Label>
+    <Combobox isMulti options={["React", "Vue", "Angular"]} renderOption={function (option) { return (<Badge startIcon="star" color="light-blue">
+          {option.value}
+        </Badge>); }}/>
+
+    <Label variant="label-sm">Text+Counter</Label>
+    <Combobox isMulti options={["React", "Vue", "Angular"]} renderOption={function (option) { return (<div className="flex items-center justify-between w-full">
+          <span>{option.value}</span>
+          <Badge color="light-blue">{+3}</Badge>
+        </div>); }}/>
+  </div>); };
+export var ComboboxWithCheckbox = function () {
+    var _a = useState([]), selected = _a[0], setSelected = _a[1];
+    var options = ["React", "Vue", "Angular"];
+    var onCheckChange = function (value) {
+        setSelected(function (prev) {
+            return prev.includes(value) ? prev.filter(function (v) { return v !== value; }) : __spreadArray(__spreadArray([], prev, true), [value], false);
+        });
+    };
+    return (<Combobox isMulti options={options} onSelect={function (value) {
+            if (Array.isArray(value)) {
+                setSelected(value);
+            }
+        }} renderOption={function (option) { return (<div className="flex items-center gap-2 w-full">
+          <Checkbox id={"checkbox-".concat(option.value)} checked={selected.includes(option.value)} onCheckedChange={function () {
+                onCheckChange(option.value);
+            }}/>
+          <span>{option.value}</span>
+        </div>); }}/>);
+};
+export var ComboboxWithUserIcon = function () { return (<Combobox isMulti options={["React", "Vue", "Angular", "Nest", "Next"]} renderOption={function (option) { return (<div className="flex items-center gap-2 w-full">
+        {/* TODO: Replace it with Avatar */}
+        <LUIcon icon="user" variant="padded"/>
+        <span>{option.value}</span>
+      </div>); }}/>); };
+export var ComboboxWithDefaultValue = function () { return (<div className="space-y-4">
+    <Label variant="label-sm">Multiple Default Values in Multiple Select</Label>
+    <Combobox isMulti isSearch options={["React", "Vue", "Angular", "Nest", "Next"]} defaultValue={["React", "Vue"]} renderOption={function (option) { return (<div className="flex items-center gap-2 w-full">
+          <LUIcon icon="plus"/>
+          <span>{option.value}</span>
+        </div>); }}/>
+
+    <Label variant="label-sm">Single Default Value in Multiple Select</Label>
+    <Combobox isMulti isSearch options={["React", "Vue", "Angular", "Nest", "Next"]} defaultValue={["React"]} renderOption={function (option) { return (<div className="flex items-center gap-2 w-full">
+          <LUIcon icon="plus"/>
+          <span>{option.value}</span>
+        </div>); }}/>
+
+    <Label variant="label-sm">Single Default Value in Single Select</Label>
+    <Combobox isSearch options={["React", "Vue", "Angular", "Nest", "Next"]} defaultValue={"React"} renderOption={function (option) { return (<div className="flex items-center gap-2 w-full">
+          <LUIcon icon="plus"/>
+          <span>{option.value}</span>
+        </div>); }}/>
+  </div>); };
+export var ListOfArray = function () { return (<Combobox isMulti isSearch options={["React", "Vue", "Angular", "Nest", "Next"]} renderOption={function (option) { return (<div className="flex items-center gap-2 w-full">
+        <LUIcon icon="plus"/>
+        <span>{option.value}</span>
+      </div>); }}/>); };
+export var ComboboxValidation = function () {
+    var _a = useState(""), selected = _a[0], setSelected = _a[1];
+    var _b = useState(false), error = _b[0], setError = _b[1];
+    var handleSelect = function (value) {
+        // Since isMulti is false, value will be string
+        if (typeof value === "string") {
+            setSelected(value);
+            if (value && error)
+                setError(false);
+        }
+    };
+    var handleSubmit = function (e) {
+        e.preventDefault();
+        if (!selected) {
+            setError(true);
+        }
+        else {
+            setError(false);
+        }
+    };
+    return (<form className="space-y-4" onSubmit={handleSubmit}>
+      <div className="flex items-center gap-2 mb-2">
+        <Label variant="label-sm">Select Category</Label>
+        <span className="text-red-600">*</span>
+        <Tooltip title="Select Option">
+          <LUIcon variant="padded" size="xs" shape="rounded" icon="question" color="light-blue"/>
+        </Tooltip>
+      </div>
+      <div>
+        <Combobox placeholder="Select framework..." size="md" options={[
+            { key: "next.js", value: "Next.js" },
+            { key: "sveltekit", value: "SvelteKit" },
+            { key: "nest.js", value: "Nest.js" },
+            { key: "remix", value: "Remix" },
+            { key: "astro", value: "Astro" },
+        ]} isSearch onSelect={handleSelect} color={error ? "red" : "default"} renderOption={function (option) { return <span>{option.value}</span>; }}/>
+        {error && (<Caption variant="md" className="mt-1 text-red-600">
+            field is required
+          </Caption>)}
+      </div>
+      <Button type="submit">Submit</Button>
+    </form>);
+};

package/dist/src/components/Dropdown/Combobox/dialog.d.ts

@@ -1,15 +1,15 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
-declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
-declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
 declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
-declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/src/components/Dropdown/Combobox/dialog.jsx

@@ -0,0 +1,66 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { cn } from "../../../lib/utils";
+function Dialog(_a) {
+    var props = __rest(_a, []);
+    return <DialogPrimitive.Root data-slot="dialog" {...props}/>;
+}
+function DialogTrigger(_a) {
+    var props = __rest(_a, []);
+    return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props}/>;
+}
+function DialogPortal(_a) {
+    var props = __rest(_a, []);
+    return <DialogPrimitive.Portal data-slot="dialog-portal" {...props}/>;
+}
+function DialogClose(_a) {
+    var props = __rest(_a, []);
+    return <DialogPrimitive.Close data-slot="dialog-close" {...props}/>;
+}
+function DialogOverlay(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<DialogPrimitive.Overlay data-slot="dialog-overlay" className={cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className)} {...props}/>);
+}
+function DialogContent(_a) {
+    var className = _a.className, children = _a.children, _b = _a.showCloseButton, showCloseButton = _b === void 0 ? true : _b, props = __rest(_a, ["className", "children", "showCloseButton"]);
+    return (<DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content data-slot="dialog-content" className={cn("bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200", className)} {...props}>
+        {children}
+        {showCloseButton && (<DialogPrimitive.Close data-slot="dialog-close" className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>)}
+      </DialogPrimitive.Content>
+    </DialogPortal>);
+}
+function DialogHeader(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<div data-slot="dialog-header" className={cn("flex flex-col gap-2 text-center sm:text-left", className)} {...props}/>);
+}
+function DialogFooter(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<div data-slot="dialog-footer" className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} {...props}/>);
+}
+function DialogTitle(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<DialogPrimitive.Title data-slot="dialog-title" className={cn("text-lg leading-none font-semibold", className)} {...props}/>);
+}
+function DialogDescription(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<DialogPrimitive.Description data-slot="dialog-description" className={cn("text-muted-foreground text-sm", className)} {...props}/>);
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/src/components/Dropdown/Combobox/utils/renderBadge.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+import { Badge } from "../../../../components/Badge/Badge";
+export var renderBadge = function (option, handleRemove) {
+    return (<Badge key={option.value} color="light-blue" startIcon={option.icon} onRemove={function () { return handleRemove(option.value); }}>
+      {option.key}
+    </Badge>);
+};

package/dist/src/components/Dropdown/DropdownMenu/DropdownMenu.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { checkBoxSize, dropdownMenuSize } from ".";
+import { checkBoxSize, dropdownContentPosition, dropdownMenuSize } from ".";
 declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
@@ -13,9 +13,13 @@ declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<Dropd
 declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     size?: keyof typeof dropdownMenuSize;
 } & React.RefAttributes<HTMLDivElement>>;
+export type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    size?: keyof typeof dropdownMenuSize;
+    align?: keyof typeof dropdownContentPosition;
+};
 declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     size?: keyof typeof dropdownMenuSize;
-    align?: "start" | "center" | "end";
+    align?: keyof typeof dropdownContentPosition;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
@@ -31,7 +35,7 @@ declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMe
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuShortcut: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
     displayName: string;
 };
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };