@max-ts/kit 1.1.0 → 1.2.0

package/lib/index.mjs

@@ -4,16 +4,16 @@ import clsx_0, { clsx } from "clsx";
 import { ArrowDownNarrowWide, ArrowDownUp, ArrowDownWideNarrow, Calendar1, Check, CheckIcon, ChevronDown, ChevronDownIcon, ChevronLeft, ChevronRight, ChevronRightIcon, ChevronUp, CircleCheck, CircleIcon, Copy, Ellipsis as external_lucide_react_Ellipsis, EllipsisVertical, Info, MoreHorizontalIcon, OctagonAlert, PanelLeftIcon, TriangleAlert, XIcon } from "lucide-react";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { Button } from "@base-ui/react/button";
+import react, { createContext, createElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Combobox } from "@base-ui/react/combobox";
 import { Avatar } from "@base-ui/react/avatar";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { Separator as separator_Separator } from "@base-ui/react/separator";
 import { DayPicker } from "react-day-picker";
 import { ru } from "react-day-picker/locale";
-import react, { createContext, createElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import embla_carousel_react from "embla-carousel-react";
 import { Collapsible } from "@base-ui/react/collapsible";
-import { Combobox } from "@base-ui/react/combobox";
 import { Popover } from "@base-ui/react/popover";
 import { Tooltip } from "@base-ui/react/tooltip";
 import { Menu } from "@base-ui/react/menu";
@@ -272,195 +272,294 @@ AlertDialog_AlertDialog.Title = Title;
 AlertDialog_AlertDialog.Description = Description;
 AlertDialog_AlertDialog.Action = Action;
 AlertDialog_AlertDialog.Cancel = Cancel;
-var badge = 'style__hhcrfl3';
-var fallback = 'style__hhcrfl2';
-var group = 'style__hhcrfl4';
-var groupCount = 'style__hhcrfl5';
-var styles_css_image = 'style__hhcrfl1';
-var styles_css_root = 'style__hhcrfl0';
-function Avatar_Avatar({ className, size = 'default', ...props }) {
-    return /*#__PURE__*/ jsx(Avatar.Root, {
-        "data-slot": "avatar",
-        "data-size": size,
+var addon = 'style__1rv6t1j1';
+var addonAlign = {
+    'inline-start': 'inline-start__1rv6t1j2',
+    'inline-end': 'inline-end__1rv6t1j3',
+    'block-start': 'block-start__1rv6t1j4',
+    'block-end': 'block-end__1rv6t1j5'
+};
+var styles_css_button = 'style__1rv6t1j6';
+var buttonSize = {
+    xs: 'xs__1rv6t1j7',
+    sm: 'sm__1rv6t1j8',
+    'icon-xs': 'icon-xs__1rv6t1j9',
+    'icon-sm': 'icon-sm__1rv6t1ja'
+};
+var control = 'style__1rv6t1jc';
+var input = 'style__1rv6t1jd';
+var styles_css_root = 'style__1rv6t1j0';
+var styles_css_text = 'style__1rv6t1jb';
+var styles_css_textarea = 'style__1rv6t1je';
+function InputGroup({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "input-group",
         className: clsx(styles_css_root, className),
         ...props
     });
 }
-function Image({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Avatar.Image, {
-        "data-slot": "avatar-image",
-        className: clsx(styles_css_image, className),
+function Addon({ className, align = 'inline-start', ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "input-group-addon",
+        "data-align": align,
+        className: clsx(addon, addonAlign[align], className),
         ...props
     });
 }
-function Fallback({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Avatar.Fallback, {
-        "data-slot": "avatar-fallback",
-        className: clsx(fallback, className),
+function InputGroup_Button({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }) {
+    return /*#__PURE__*/ jsx(Button_Button, {
+        type: type,
+        "data-size": size,
+        variant: variant,
+        className: clsx(styles_css_button, buttonSize[size], className),
         ...props
     });
 }
-function Badge({ className, ...props }) {
+function Text({ className, ...props }) {
     return /*#__PURE__*/ jsx("span", {
-        "data-slot": "avatar-badge",
-        className: clsx(badge, className),
+        "data-slot": "input-group-text",
+        className: clsx(styles_css_text, className),
         ...props
     });
 }
-function Group({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "avatar-group",
-        className: clsx(group, className),
+function Input({ className, ...props }) {
+    return /*#__PURE__*/ jsx("input", {
+        "data-slot": "input-group-control",
+        className: clsx(control, input, className),
         ...props
     });
 }
-function GroupCount({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "avatar-group-count",
-        className: clsx(groupCount, className),
+function Textarea({ className, ...props }) {
+    return /*#__PURE__*/ jsx("textarea", {
+        "data-slot": "input-group-control",
+        className: clsx(control, styles_css_textarea, className),
         ...props
     });
 }
-Avatar_Avatar.Image = Image;
-Avatar_Avatar.Fallback = Fallback;
-Avatar_Avatar.Badge = Badge;
-Avatar_Avatar.Group = Group;
-Avatar_Avatar.GroupCount = GroupCount;
-var badgeVariants = {
-    default: 'default__1af895x1',
-    secondary: 'secondary__1af895x2',
-    destructive: 'destructive__1af895x3',
-    outline: 'outline__1af895x4'
+InputGroup.Addon = Addon;
+InputGroup.Button = InputGroup_Button;
+InputGroup.Text = Text;
+InputGroup.Input = Input;
+InputGroup.Textarea = Textarea;
+var chip = 'style__1udu12rh';
+var chipRemove = 'style__1udu12rj';
+var chipRemoveButton = 'style__1udu12rk';
+var chipRemoveSize = {
+    'icon-xs': 'icon-xs__1udu12rm'
 };
-var rootClass = 'style__1af895x0';
-function Badge_Badge({ className, variant = 'default', render, ...props }) {
-    return useRender({
-        defaultTagName: 'span',
-        props: mergeProps({
-            className: clsx(rootClass, badgeVariants[variant], className)
-        }, props),
-        render,
-        state: {
-            slot: 'badge',
-            variant
-        }
+var chipWithRemove = 'style__1udu12ri';
+var chips = 'style__1udu12rg';
+var chipsInput = 'style__1udu12rl';
+var clearIcon = 'style__1udu12r4';
+var Combobox_styles_css_content = 'style__1udu12r9';
+var controlButton = 'style__1udu12r5';
+var empty = 'style__1udu12re';
+var groupLabel = 'style__1udu12rd';
+var inputGroup = 'style__1udu12r6';
+var inputTrigger = 'style__1udu12r7';
+var Combobox_styles_css_item = 'style__1udu12rb';
+var itemIndicator = 'style__1udu12rc';
+var list = 'style__1udu12ra';
+var positioner = 'style__1udu12r8';
+var styles_css_separator = 'style__1udu12rf';
+var Combobox_styles_css_trigger = 'style__1udu12r2';
+var styles_css_triggerIcon = 'style__1udu12r3';
+function Combobox_Combobox(props) {
+    return /*#__PURE__*/ jsx(Combobox.Root, {
+        "data-slot": "combobox",
+        ...props
     });
 }
-var ellipsis = 'style__1dceszz5';
-var Breadcrumb_styles_css_item = 'style__1dceszz1';
-var styles_css_link = 'style__1dceszz2';
-var list = 'style__1dceszz0';
-var page = 'style__1dceszz3';
-var styles_css_separator = 'style__1dceszz4';
-var visuallyHidden = 'style__1dceszz6';
-function Breadcrumb({ className, ...props }) {
-    return /*#__PURE__*/ jsx("nav", {
-        "aria-label": "breadcrumb",
-        "data-slot": "breadcrumb",
-        className: className,
+function Value(props) {
+    return /*#__PURE__*/ jsx(Combobox.Value, {
         ...props
     });
 }
+function Combobox_Trigger({ className, children, ...props }) {
+    return /*#__PURE__*/ jsxs(Combobox.Trigger, {
+        "data-slot": "combobox-trigger",
+        className: clsx(controlButton, Combobox_styles_css_trigger, className),
+        ...props,
+        children: [
+            children,
+            /*#__PURE__*/ jsx(ChevronDownIcon, {
+                className: styles_css_triggerIcon
+            })
+        ]
+    });
+}
+function Clear({ className, children, ...props }) {
+    return /*#__PURE__*/ jsx(Combobox.Clear, {
+        "data-slot": "combobox-clear",
+        className: clsx(controlButton, className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(XIcon, {
+            className: clearIcon
+        })
+    });
+}
+function Combobox_Input({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
+    return /*#__PURE__*/ jsxs(Combobox.InputGroup, {
+        render: /*#__PURE__*/ jsx(InputGroup, {
+            className: clsx(inputGroup, className)
+        }),
+        children: [
+            /*#__PURE__*/ jsx(Combobox.Input, {
+                render: /*#__PURE__*/ jsx(InputGroup.Input, {
+                    disabled: disabled
+                }),
+                disabled: disabled,
+                ...props
+            }),
+            /*#__PURE__*/ jsxs(InputGroup.Addon, {
+                align: "inline-end",
+                children: [
+                    showTrigger && /*#__PURE__*/ jsx(Combobox_Trigger, {
+                        className: inputTrigger,
+                        disabled: disabled
+                    }),
+                    showClear && /*#__PURE__*/ jsx(Clear, {
+                        disabled: disabled
+                    })
+                ]
+            }),
+            children
+        ]
+    });
+}
+function Combobox_Content({ className, side = 'bottom', sideOffset = 8, align = 'start', alignOffset = 0, anchor, ...props }) {
+    return /*#__PURE__*/ jsx(Combobox.Portal, {
+        children: /*#__PURE__*/ jsx(Combobox.Positioner, {
+            side: side,
+            sideOffset: sideOffset,
+            align: align,
+            alignOffset: alignOffset,
+            anchor: anchor,
+            className: positioner,
+            children: /*#__PURE__*/ jsx(Combobox.Popup, {
+                "data-slot": "combobox-content",
+                "data-chips": anchor ? 'true' : void 0,
+                className: clsx(Combobox_styles_css_content, className),
+                ...props
+            })
+        })
+    });
+}
 function List({ className, ...props }) {
-    return /*#__PURE__*/ jsx("ol", {
-        "data-slot": "breadcrumb-list",
+    return /*#__PURE__*/ jsx(Combobox.List, {
+        "data-slot": "combobox-list",
         className: clsx(list, className),
         ...props
     });
 }
-function Breadcrumb_Item({ className, ...props }) {
-    return /*#__PURE__*/ jsx("li", {
-        "data-slot": "breadcrumb-item",
-        className: clsx(Breadcrumb_styles_css_item, className),
+function Combobox_Item({ className, children, ...props }) {
+    return /*#__PURE__*/ jsxs(Combobox.Item, {
+        "data-slot": "combobox-item",
+        className: clsx(Combobox_styles_css_item, className),
+        ...props,
+        children: [
+            children,
+            /*#__PURE__*/ jsx(Combobox.ItemIndicator, {
+                className: itemIndicator,
+                children: /*#__PURE__*/ jsx(CheckIcon, {})
+            })
+        ]
+    });
+}
+function Group({ ...props }) {
+    return /*#__PURE__*/ jsx(Combobox.Group, {
+        "data-slot": "combobox-group",
         ...props
     });
 }
-function Link({ className, render, ...props }) {
-    return useRender({
-        defaultTagName: 'a',
-        props: mergeProps({
-            className: clsx(styles_css_link, className)
-        }, props),
-        render,
-        state: {
-            slot: 'breadcrumb-link'
-        }
+function GroupLabel({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Combobox.GroupLabel, {
+        "data-slot": "combobox-group-label",
+        className: clsx(groupLabel, className),
+        ...props
     });
 }
-function Page({ className, ...props }) {
-    return /*#__PURE__*/ jsx("span", {
-        "data-slot": "breadcrumb-page",
-        "aria-current": "page",
-        className: clsx(page, className),
+function Collection(props) {
+    return /*#__PURE__*/ jsx(Combobox.Collection, {
         ...props
     });
 }
-function Separator({ children, className, ...props }) {
-    return /*#__PURE__*/ jsx("li", {
-        "data-slot": "breadcrumb-separator",
-        role: "presentation",
-        "aria-hidden": "true",
+function Empty({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Combobox.Empty, {
+        "data-slot": "combobox-empty",
+        className: clsx(empty, className),
+        ...props
+    });
+}
+function Separator({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Combobox.Separator, {
+        "data-slot": "combobox-separator",
         className: clsx(styles_css_separator, className),
-        ...props,
-        children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {})
+        ...props
     });
 }
-function Ellipsis({ className, ...props }) {
-    return /*#__PURE__*/ jsxs("span", {
-        "data-slot": "breadcrumb-ellipsis",
-        role: "presentation",
-        "aria-hidden": "true",
-        className: clsx(ellipsis, className),
+function Chips({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Combobox.Chips, {
+        "data-slot": "combobox-chips",
+        className: clsx(chips, className),
+        ...props
+    });
+}
+function Chip({ className, children, showRemove = true, ...props }) {
+    return /*#__PURE__*/ jsxs(Combobox.Chip, {
+        "data-slot": "combobox-chip",
+        className: clsx(chip, {
+            [chipWithRemove]: showRemove
+        }, className),
         ...props,
         children: [
-            /*#__PURE__*/ jsx(MoreHorizontalIcon, {}),
-            /*#__PURE__*/ jsx("span", {
-                className: visuallyHidden,
-                children: "More"
+            children,
+            showRemove && /*#__PURE__*/ jsx(Combobox.ChipRemove, {
+                className: clsx(chipRemove, chipRemoveButton, chipRemoveSize["icon-xs"]),
+                "data-slot": "combobox-chip-remove",
+                children: /*#__PURE__*/ jsx(XIcon, {})
             })
         ]
     });
 }
-Breadcrumb.List = List;
-Breadcrumb.Item = Breadcrumb_Item;
-Breadcrumb.Link = Link;
-Breadcrumb.Page = Page;
-Breadcrumb.Separator = Separator;
-Breadcrumb.Ellipsis = Ellipsis;
-var ButtonGroup_styles_css_root = 'style__1mf3lgr0';
-var ButtonGroup_styles_css_separator = 'style__1mf3lgr2';
-var styles_css_text = 'style__1mf3lgr1';
-function ButtonGroup({ className, orientation = 'horizontal', ...props }) {
-    return /*#__PURE__*/ jsx("fieldset", {
-        "data-slot": "button-group",
-        "data-orientation": orientation,
-        className: clsx(ButtonGroup_styles_css_root, className),
+function ChipsInput({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Combobox.Input, {
+        "data-slot": "combobox-chip-input",
+        className: clsx(chipsInput, className),
         ...props
     });
 }
-function Text({ className, render, ...props }) {
-    return useRender({
-        defaultTagName: 'div',
-        props: mergeProps({
-            className: clsx(styles_css_text, className)
-        }, props),
-        render,
-        state: {
-            slot: 'button-group-text'
-        }
-    });
+function useComboboxAnchor() {
+    return useRef(null);
 }
-function ButtonGroup_Separator({ className, orientation = 'vertical', ...props }) {
-    return /*#__PURE__*/ jsx(separator_Separator, {
-        "data-slot": "button-group-separator",
-        "data-orientation": orientation,
-        orientation: orientation,
-        className: clsx(ButtonGroup_styles_css_separator, className),
+Combobox_Combobox.Value = Value;
+Combobox_Combobox.Trigger = Combobox_Trigger;
+Combobox_Combobox.Clear = Clear;
+Combobox_Combobox.Input = Combobox_Input;
+Combobox_Combobox.Content = Combobox_Content;
+Combobox_Combobox.List = List;
+Combobox_Combobox.Item = Combobox_Item;
+Combobox_Combobox.Group = Group;
+Combobox_Combobox.GroupLabel = GroupLabel;
+Combobox_Combobox.Collection = Collection;
+Combobox_Combobox.Empty = Empty;
+Combobox_Combobox.Separator = Separator;
+Combobox_Combobox.Chips = Chips;
+Combobox_Combobox.Chip = Chip;
+Combobox_Combobox.ChipsInput = ChipsInput;
+var label_css_disabled = 'style__c31e141';
+var label_css_error = 'style__c31e142';
+var label_css_required = 'style__c31e143';
+var label_css_root = 'Label__c31e140';
+const Label = ({ className, disabled, error, ...props })=>/*#__PURE__*/ jsx("label", {
+        "data-slot": "label",
+        className: clsx(label_css_root, {
+            [label_css_disabled]: disabled,
+            [label_css_error]: error,
+            [label_css_required]: props.required
+        }, className),
         ...props
     });
-}
-ButtonGroup.Text = Text;
-ButtonGroup.Separator = ButtonGroup_Separator;
 var alignments = {
     left: 'left__1sba6zok',
     center: 'center__1sba6zol',
@@ -533,10 +632,304 @@ const Typography = ({ className, variant = 'body1', component, color = 'primary'
             [gutterBottomClass]: gutterBottom
         }, className),
         ...props,
-        children: children
+        children: children
+    });
+};
+var styles_css_disabled = 'style__17arfox5';
+var styles_css_error = 'style__17arfox4';
+var styles_css_field = 'style__17arfox0';
+var styles_css_fullWidth = 'style__17arfox1';
+var styles_css_helperText = 'style__17arfox3';
+var styles_css_label = 'style__17arfox2';
+function defaultGetOptionLabel(option) {
+    return 'string' == typeof option ? option : String(option);
+}
+function Autocomplete(props) {
+    const { className, contentClassName, defaultValue, disabled = false, error = false, fullWidth = false, getOptionLabel = defaultGetOptionLabel, getOptionValue = getOptionLabel, helperText, id, inputClassName, isOptionEqualToValue, label, labelClassName, multiple, noOptionsText = 'No results found', onChange, options, placeholder, renderOption, required, style, value, ...rootProps } = props;
+    const generatedId = useId();
+    const inputId = id ?? (label ? generatedId : void 0);
+    const anchor = useComboboxAnchor();
+    const [innerValue, setInnerValue] = useState(defaultValue ?? (multiple ? [] : null));
+    const selectedValue = value ?? innerValue;
+    const invalid = error ? true : void 0;
+    const handleChange = (nextValue)=>{
+        if (void 0 === value) setInnerValue(nextValue);
+        if (multiple) return void onChange?.(Array.isArray(nextValue) ? nextValue : []);
+        onChange?.(nextValue);
+    };
+    const isEqual = isOptionEqualToValue ?? ((option, selectedOption)=>getOptionValue(option) === getOptionValue(selectedOption));
+    const renderItem = (option)=>/*#__PURE__*/ jsx(Combobox_Combobox.Item, {
+            value: option,
+            children: renderOption?.(option) ?? getOptionLabel(option)
+        }, getOptionValue(option));
+    return /*#__PURE__*/ jsxs("div", {
+        style: style,
+        className: clsx(styles_css_field, {
+            [styles_css_fullWidth]: fullWidth
+        }, className),
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                htmlFor: inputId,
+                disabled: disabled,
+                required: required,
+                error: error,
+                className: clsx(styles_css_label, labelClassName),
+                children: label
+            }),
+            /*#__PURE__*/ jsxs(Combobox_Combobox, {
+                ...rootProps,
+                disabled: disabled,
+                isItemEqualToValue: isEqual,
+                itemToStringLabel: getOptionLabel,
+                itemToStringValue: getOptionValue,
+                items: options,
+                multiple: multiple,
+                onValueChange: handleChange,
+                value: selectedValue,
+                children: [
+                    multiple ? /*#__PURE__*/ jsxs(Combobox_Combobox.Chips, {
+                        ref: anchor,
+                        className: clsx({
+                            [styles_css_fullWidth]: fullWidth
+                        }, inputClassName),
+                        children: [
+                            (Array.isArray(selectedValue) ? selectedValue : []).map((option)=>/*#__PURE__*/ jsx(Combobox_Combobox.Chip, {
+                                    children: getOptionLabel(option)
+                                }, getOptionValue(option))),
+                            /*#__PURE__*/ jsx(Combobox_Combobox.ChipsInput, {
+                                id: inputId,
+                                disabled: disabled,
+                                required: required,
+                                "aria-invalid": invalid,
+                                placeholder: Array.isArray(selectedValue) && selectedValue.length ? void 0 : placeholder
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsx(Combobox_Combobox.Input, {
+                        id: inputId,
+                        disabled: disabled,
+                        required: required,
+                        "aria-invalid": invalid,
+                        placeholder: placeholder,
+                        showClear: true,
+                        className: clsx({
+                            [styles_css_fullWidth]: fullWidth
+                        }, inputClassName)
+                    }),
+                    /*#__PURE__*/ jsxs(Combobox_Combobox.Content, {
+                        anchor: multiple ? anchor : void 0,
+                        className: contentClassName,
+                        children: [
+                            /*#__PURE__*/ jsx(Combobox_Combobox.Empty, {
+                                children: noOptionsText
+                            }),
+                            /*#__PURE__*/ jsx(Combobox_Combobox.List, {
+                                children: renderItem
+                            })
+                        ]
+                    })
+                ]
+            }),
+            helperText && /*#__PURE__*/ jsx(Typography, {
+                variant: "caption",
+                className: clsx(styles_css_helperText, {
+                    [styles_css_error]: error,
+                    [styles_css_disabled]: disabled
+                }),
+                children: helperText
+            })
+        ]
+    });
+}
+var badge = 'style__hhcrfl3';
+var fallback = 'style__hhcrfl2';
+var group = 'style__hhcrfl4';
+var groupCount = 'style__hhcrfl5';
+var styles_css_image = 'style__hhcrfl1';
+var Avatar_styles_css_root = 'style__hhcrfl0';
+function Avatar_Avatar({ className, size = 'default', ...props }) {
+    return /*#__PURE__*/ jsx(Avatar.Root, {
+        "data-slot": "avatar",
+        "data-size": size,
+        className: clsx(Avatar_styles_css_root, className),
+        ...props
+    });
+}
+function Image({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Avatar.Image, {
+        "data-slot": "avatar-image",
+        className: clsx(styles_css_image, className),
+        ...props
+    });
+}
+function Fallback({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Avatar.Fallback, {
+        "data-slot": "avatar-fallback",
+        className: clsx(fallback, className),
+        ...props
+    });
+}
+function Badge({ className, ...props }) {
+    return /*#__PURE__*/ jsx("span", {
+        "data-slot": "avatar-badge",
+        className: clsx(badge, className),
+        ...props
+    });
+}
+function Avatar_Group({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "avatar-group",
+        className: clsx(group, className),
+        ...props
+    });
+}
+function GroupCount({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "avatar-group-count",
+        className: clsx(groupCount, className),
+        ...props
+    });
+}
+Avatar_Avatar.Image = Image;
+Avatar_Avatar.Fallback = Fallback;
+Avatar_Avatar.Badge = Badge;
+Avatar_Avatar.Group = Avatar_Group;
+Avatar_Avatar.GroupCount = GroupCount;
+var badgeVariants = {
+    default: 'default__1af895x1',
+    secondary: 'secondary__1af895x2',
+    destructive: 'destructive__1af895x3',
+    outline: 'outline__1af895x4'
+};
+var rootClass = 'style__1af895x0';
+function Badge_Badge({ className, variant = 'default', render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        props: mergeProps({
+            className: clsx(rootClass, badgeVariants[variant], className)
+        }, props),
+        render,
+        state: {
+            slot: 'badge',
+            variant
+        }
+    });
+}
+var ellipsis = 'style__1dceszz5';
+var Breadcrumb_styles_css_item = 'style__1dceszz1';
+var styles_css_link = 'style__1dceszz2';
+var styles_css_list = 'style__1dceszz0';
+var page = 'style__1dceszz3';
+var Breadcrumb_styles_css_separator = 'style__1dceszz4';
+var visuallyHidden = 'style__1dceszz6';
+function Breadcrumb({ className, ...props }) {
+    return /*#__PURE__*/ jsx("nav", {
+        "aria-label": "breadcrumb",
+        "data-slot": "breadcrumb",
+        className: className,
+        ...props
+    });
+}
+function Breadcrumb_List({ className, ...props }) {
+    return /*#__PURE__*/ jsx("ol", {
+        "data-slot": "breadcrumb-list",
+        className: clsx(styles_css_list, className),
+        ...props
+    });
+}
+function Breadcrumb_Item({ className, ...props }) {
+    return /*#__PURE__*/ jsx("li", {
+        "data-slot": "breadcrumb-item",
+        className: clsx(Breadcrumb_styles_css_item, className),
+        ...props
+    });
+}
+function Link({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'a',
+        props: mergeProps({
+            className: clsx(styles_css_link, className)
+        }, props),
+        render,
+        state: {
+            slot: 'breadcrumb-link'
+        }
+    });
+}
+function Page({ className, ...props }) {
+    return /*#__PURE__*/ jsx("span", {
+        "data-slot": "breadcrumb-page",
+        "aria-current": "page",
+        className: clsx(page, className),
+        ...props
+    });
+}
+function Breadcrumb_Separator({ children, className, ...props }) {
+    return /*#__PURE__*/ jsx("li", {
+        "data-slot": "breadcrumb-separator",
+        role: "presentation",
+        "aria-hidden": "true",
+        className: clsx(Breadcrumb_styles_css_separator, className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {})
+    });
+}
+function Ellipsis({ className, ...props }) {
+    return /*#__PURE__*/ jsxs("span", {
+        "data-slot": "breadcrumb-ellipsis",
+        role: "presentation",
+        "aria-hidden": "true",
+        className: clsx(ellipsis, className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(MoreHorizontalIcon, {}),
+            /*#__PURE__*/ jsx("span", {
+                className: visuallyHidden,
+                children: "More"
+            })
+        ]
     });
-};
-var styles_css_button = 'dayButton__hxs6pw0';
+}
+Breadcrumb.List = Breadcrumb_List;
+Breadcrumb.Item = Breadcrumb_Item;
+Breadcrumb.Link = Link;
+Breadcrumb.Page = Page;
+Breadcrumb.Separator = Breadcrumb_Separator;
+Breadcrumb.Ellipsis = Ellipsis;
+var ButtonGroup_styles_css_root = 'style__1mf3lgr0';
+var ButtonGroup_styles_css_separator = 'style__1mf3lgr2';
+var ButtonGroup_styles_css_text = 'style__1mf3lgr1';
+function ButtonGroup({ className, orientation = 'horizontal', ...props }) {
+    return /*#__PURE__*/ jsx("fieldset", {
+        "data-slot": "button-group",
+        "data-orientation": orientation,
+        className: clsx(ButtonGroup_styles_css_root, className),
+        ...props
+    });
+}
+function ButtonGroup_Text({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        props: mergeProps({
+            className: clsx(ButtonGroup_styles_css_text, className)
+        }, props),
+        render,
+        state: {
+            slot: 'button-group-text'
+        }
+    });
+}
+function ButtonGroup_Separator({ className, orientation = 'vertical', ...props }) {
+    return /*#__PURE__*/ jsx(separator_Separator, {
+        "data-slot": "button-group-separator",
+        "data-orientation": orientation,
+        orientation: orientation,
+        className: clsx(ButtonGroup_styles_css_separator, className),
+        ...props
+    });
+}
+ButtonGroup.Text = ButtonGroup_Text;
+ButtonGroup.Separator = ButtonGroup_Separator;
+var DayButton_styles_css_button = 'dayButton__hxs6pw0';
 var outside = 'outside__hxs6pw2';
 var today = 'today__hxs6pw1';
 const DayButton = (props)=>{
@@ -549,7 +942,7 @@ const DayButton = (props)=>{
     ]);
     return /*#__PURE__*/ jsx(Button_Button, {
         ref: ref,
-        className: clsx(styles_css_button, {
+        className: clsx(DayButton_styles_css_button, {
             [outside]: modifiers.outside,
             [today]: modifiers.today
         }, className),
@@ -955,395 +1348,120 @@ const useLogic_useLogic = ({ orientation = 'horizontal', opts, setApi, plugins,
 function Carousel({ width = '100%', height = '100%', ...props }) {
     const { canScrollNext, canScrollPrev, scrollNext, scrollPrev, api, opts, orientation, carouselRef, handleKeyDown, data, isShowButtons, isShowDots } = useLogic_useLogic(props);
     return /*#__PURE__*/ jsx(CarouselContext.Provider, {
-        value: {
-            carouselRef,
-            api,
-            opts,
-            orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
-            scrollPrev,
-            scrollNext,
-            canScrollPrev,
-            canScrollNext
-        },
-        children: /*#__PURE__*/ jsxs("div", {
-            onKeyDownCapture: handleKeyDown,
-            className: clsx(styles_css_rootClass, props.className),
-            "data-slot": "carousel",
-            style: {
-                width,
-                height
-            },
-            children: [
-                /*#__PURE__*/ jsx(Content_Content, {
-                    style: {
-                        width,
-                        height
-                    },
-                    children: data.map((item)=>/*#__PURE__*/ jsx(Item_Item, {
-                            children: props.renderItem(item)
-                        }, `${item[props.keyId]}`))
-                }),
-                isShowButtons && /*#__PURE__*/ jsx(Buttons, {}),
-                isShowDots && /*#__PURE__*/ jsx(Dots, {
-                    api: api,
-                    orientation: orientation
-                })
-            ]
-        })
-    });
-}
-var checkbox_css_icon = 'style__b7yo4k2';
-var indicator = 'style__b7yo4k1';
-var checkbox_css_root = 'style__b7yo4k0';
-const Checkbox_Checkbox = ({ className, ...props })=>/*#__PURE__*/ jsx(Checkbox.Root, {
-        "data-slot": "checkbox",
-        className: clsx(checkbox_css_root, className),
-        ...props,
-        children: /*#__PURE__*/ jsx(Checkbox.Indicator, {
-            className: indicator,
-            children: /*#__PURE__*/ jsx(Check, {
-                className: checkbox_css_icon
-            })
-        })
-    });
-var circle = 'style__m6b9n24';
-var styles_css_colors = {
-    primary: 'primary__m6b9n27',
-    secondary: 'secondary__m6b9n28',
-    inherit: 'inherit__m6b9n29'
-};
-var CircularProgress_styles_css_root = 'style__m6b9n22';
-var svg = 'style__m6b9n23';
-var styles_css_variants = {
-    determinate: 'determinate__m6b9n25',
-    indeterminate: 'indeterminate__m6b9n26'
-};
-const CircularProgress = ({ size = 30, thickness = 2.6, color = 'primary', value = 0, variant = 'indeterminate', className })=>{
-    const radius = (size - thickness) / 2;
-    const circumference = 2 * Math.PI * radius;
-    const dashOffset = 'determinate' === variant ? circumference * (1 - value / 100) : 0.25 * circumference;
-    return /*#__PURE__*/ jsx("div", {
-        className: clsx_0(CircularProgress_styles_css_root, styles_css_variants[variant], styles_css_colors[color], className),
-        style: {
-            width: size,
-            height: size
-        },
-        children: /*#__PURE__*/ jsxs("svg", {
-            className: svg,
-            viewBox: `0 0 ${size} ${size}`,
-            children: [
-                /*#__PURE__*/ jsx("title", {
-                    children: "Progress bar"
-                }),
-                /*#__PURE__*/ jsx("circle", {
-                    className: clsx_0(circle, 'determinate' === variant && styles_css_variants.determinate),
-                    cx: size / 2,
-                    cy: size / 2,
-                    r: radius,
-                    fill: "none",
-                    strokeWidth: thickness,
-                    strokeDasharray: circumference,
-                    strokeDashoffset: dashOffset
-                })
-            ]
-        })
-    });
-};
-function Collapsible_Collapsible({ ...props }) {
-    return /*#__PURE__*/ jsx(Collapsible.Root, {
-        "data-slot": "collapsible",
-        ...props
-    });
-}
-function Collapsible_Trigger({ ...props }) {
-    return /*#__PURE__*/ jsx(Collapsible.Trigger, {
-        "data-slot": "collapsible-trigger",
-        ...props
-    });
-}
-function Collapsible_Content({ ...props }) {
-    return /*#__PURE__*/ jsx(Collapsible.Panel, {
-        "data-slot": "collapsible-content",
-        ...props
-    });
-}
-Collapsible_Collapsible.Trigger = Collapsible_Trigger;
-Collapsible_Collapsible.Content = Collapsible_Content;
-var addon = 'style__1rv6t1j1';
-var addonAlign = {
-    'inline-start': 'inline-start__1rv6t1j2',
-    'inline-end': 'inline-end__1rv6t1j3',
-    'block-start': 'block-start__1rv6t1j4',
-    'block-end': 'block-end__1rv6t1j5'
-};
-var InputGroup_styles_css_button = 'style__1rv6t1j6';
-var buttonSize = {
-    xs: 'xs__1rv6t1j7',
-    sm: 'sm__1rv6t1j8',
-    'icon-xs': 'icon-xs__1rv6t1j9',
-    'icon-sm': 'icon-sm__1rv6t1ja'
-};
-var control = 'style__1rv6t1jc';
-var input = 'style__1rv6t1jd';
-var InputGroup_styles_css_root = 'style__1rv6t1j0';
-var InputGroup_styles_css_text = 'style__1rv6t1jb';
-var styles_css_textarea = 'style__1rv6t1je';
-function InputGroup({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "input-group",
-        className: clsx(InputGroup_styles_css_root, className),
-        ...props
-    });
-}
-function Addon({ className, align = 'inline-start', ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "input-group-addon",
-        "data-align": align,
-        className: clsx(addon, addonAlign[align], className),
-        ...props
-    });
-}
-function InputGroup_Button({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }) {
-    return /*#__PURE__*/ jsx(Button_Button, {
-        type: type,
-        "data-size": size,
-        variant: variant,
-        className: clsx(InputGroup_styles_css_button, buttonSize[size], className),
-        ...props
-    });
-}
-function InputGroup_Text({ className, ...props }) {
-    return /*#__PURE__*/ jsx("span", {
-        "data-slot": "input-group-text",
-        className: clsx(InputGroup_styles_css_text, className),
-        ...props
-    });
-}
-function Input({ className, ...props }) {
-    return /*#__PURE__*/ jsx("input", {
-        "data-slot": "input-group-control",
-        className: clsx(control, input, className),
-        ...props
-    });
-}
-function Textarea({ className, ...props }) {
-    return /*#__PURE__*/ jsx("textarea", {
-        "data-slot": "input-group-control",
-        className: clsx(control, styles_css_textarea, className),
-        ...props
-    });
-}
-InputGroup.Addon = Addon;
-InputGroup.Button = InputGroup_Button;
-InputGroup.Text = InputGroup_Text;
-InputGroup.Input = Input;
-InputGroup.Textarea = Textarea;
-var chip = 'style__1udu12rh';
-var chipRemove = 'style__1udu12rj';
-var chipRemoveButton = 'style__1udu12rk';
-var chipRemoveSize = {
-    'icon-xs': 'icon-xs__1udu12rm'
-};
-var chipWithRemove = 'style__1udu12ri';
-var chips = 'style__1udu12rg';
-var chipsInput = 'style__1udu12rl';
-var clearIcon = 'style__1udu12r4';
-var Combobox_styles_css_content = 'style__1udu12r9';
-var controlButton = 'style__1udu12r5';
-var empty = 'style__1udu12re';
-var inputGroup = 'style__1udu12r6';
-var inputTrigger = 'style__1udu12r7';
-var Combobox_styles_css_item = 'style__1udu12rb';
-var itemIndicator = 'style__1udu12rc';
-var styles_css_label = 'style__1udu12rd';
-var styles_css_list = 'style__1udu12ra';
-var positioner = 'style__1udu12r8';
-var Combobox_styles_css_separator = 'style__1udu12rf';
-var Combobox_styles_css_trigger = 'style__1udu12r2';
-var styles_css_triggerIcon = 'style__1udu12r3';
-function Combobox_Combobox(props) {
-    return /*#__PURE__*/ jsx(Combobox.Root, {
-        "data-slot": "combobox",
-        ...props
-    });
-}
-function Value(props) {
-    return /*#__PURE__*/ jsx(Combobox.Value, {
-        ...props
+        value: {
+            carouselRef,
+            api,
+            opts,
+            orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+            scrollPrev,
+            scrollNext,
+            canScrollPrev,
+            canScrollNext
+        },
+        children: /*#__PURE__*/ jsxs("div", {
+            onKeyDownCapture: handleKeyDown,
+            className: clsx(styles_css_rootClass, props.className),
+            "data-slot": "carousel",
+            style: {
+                width,
+                height
+            },
+            children: [
+                /*#__PURE__*/ jsx(Content_Content, {
+                    style: {
+                        width,
+                        height
+                    },
+                    children: data.map((item)=>/*#__PURE__*/ jsx(Item_Item, {
+                            children: props.renderItem(item)
+                        }, `${item[props.keyId]}`))
+                }),
+                isShowButtons && /*#__PURE__*/ jsx(Buttons, {}),
+                isShowDots && /*#__PURE__*/ jsx(Dots, {
+                    api: api,
+                    orientation: orientation
+                })
+            ]
+        })
     });
 }
-function Combobox_Trigger({ className, children, ...props }) {
-    return /*#__PURE__*/ jsxs(Combobox.Trigger, {
-        "data-slot": "combobox-trigger",
-        className: clsx(controlButton, Combobox_styles_css_trigger, className),
+var checkbox_css_icon = 'style__b7yo4k2';
+var indicator = 'style__b7yo4k1';
+var checkbox_css_root = 'style__b7yo4k0';
+const Checkbox_Checkbox = ({ className, ...props })=>/*#__PURE__*/ jsx(Checkbox.Root, {
+        "data-slot": "checkbox",
+        className: clsx(checkbox_css_root, className),
         ...props,
-        children: [
-            children,
-            /*#__PURE__*/ jsx(ChevronDownIcon, {
-                className: styles_css_triggerIcon
+        children: /*#__PURE__*/ jsx(Checkbox.Indicator, {
+            className: indicator,
+            children: /*#__PURE__*/ jsx(Check, {
+                className: checkbox_css_icon
             })
-        ]
-    });
-}
-function Clear({ className, children, ...props }) {
-    return /*#__PURE__*/ jsx(Combobox.Clear, {
-        "data-slot": "combobox-clear",
-        className: clsx(controlButton, className),
-        ...props,
-        children: children ?? /*#__PURE__*/ jsx(XIcon, {
-            className: clearIcon
         })
     });
-}
-function Combobox_Input({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
-    return /*#__PURE__*/ jsxs(Combobox.InputGroup, {
-        render: /*#__PURE__*/ jsx(InputGroup, {
-            className: clsx(inputGroup, className)
-        }),
-        children: [
-            /*#__PURE__*/ jsx(Combobox.Input, {
-                render: /*#__PURE__*/ jsx(InputGroup.Input, {
-                    disabled: disabled
+var circle = 'style__m6b9n24';
+var styles_css_colors = {
+    primary: 'primary__m6b9n27',
+    secondary: 'secondary__m6b9n28',
+    inherit: 'inherit__m6b9n29'
+};
+var CircularProgress_styles_css_root = 'style__m6b9n22';
+var svg = 'style__m6b9n23';
+var styles_css_variants = {
+    determinate: 'determinate__m6b9n25',
+    indeterminate: 'indeterminate__m6b9n26'
+};
+const CircularProgress = ({ size = 30, thickness = 2.6, color = 'primary', value = 0, variant = 'indeterminate', className })=>{
+    const radius = (size - thickness) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const dashOffset = 'determinate' === variant ? circumference * (1 - value / 100) : 0.25 * circumference;
+    return /*#__PURE__*/ jsx("div", {
+        className: clsx_0(CircularProgress_styles_css_root, styles_css_variants[variant], styles_css_colors[color], className),
+        style: {
+            width: size,
+            height: size
+        },
+        children: /*#__PURE__*/ jsxs("svg", {
+            className: svg,
+            viewBox: `0 0 ${size} ${size}`,
+            children: [
+                /*#__PURE__*/ jsx("title", {
+                    children: "Progress bar"
                 }),
-                disabled: disabled,
-                ...props
-            }),
-            /*#__PURE__*/ jsxs(InputGroup.Addon, {
-                align: "inline-end",
-                children: [
-                    showTrigger && /*#__PURE__*/ jsx(Combobox_Trigger, {
-                        className: inputTrigger,
-                        disabled: disabled
-                    }),
-                    showClear && /*#__PURE__*/ jsx(Clear, {
-                        disabled: disabled
-                    })
-                ]
-            }),
-            children
-        ]
-    });
-}
-function Combobox_Content({ className, side = 'bottom', sideOffset = 8, align = 'start', alignOffset = 0, anchor, ...props }) {
-    return /*#__PURE__*/ jsx(Combobox.Portal, {
-        children: /*#__PURE__*/ jsx(Combobox.Positioner, {
-            side: side,
-            sideOffset: sideOffset,
-            align: align,
-            alignOffset: alignOffset,
-            anchor: anchor,
-            className: positioner,
-            children: /*#__PURE__*/ jsx(Combobox.Popup, {
-                "data-slot": "combobox-content",
-                "data-chips": anchor ? 'true' : void 0,
-                className: clsx(Combobox_styles_css_content, className),
-                ...props
-            })
+                /*#__PURE__*/ jsx("circle", {
+                    className: clsx_0(circle, 'determinate' === variant && styles_css_variants.determinate),
+                    cx: size / 2,
+                    cy: size / 2,
+                    r: radius,
+                    fill: "none",
+                    strokeWidth: thickness,
+                    strokeDasharray: circumference,
+                    strokeDashoffset: dashOffset
+                })
+            ]
         })
     });
-}
-function Combobox_List({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Combobox.List, {
-        "data-slot": "combobox-list",
-        className: clsx(styles_css_list, className),
-        ...props
-    });
-}
-function Combobox_Item({ className, children, ...props }) {
-    return /*#__PURE__*/ jsxs(Combobox.Item, {
-        "data-slot": "combobox-item",
-        className: clsx(Combobox_styles_css_item, className),
-        ...props,
-        children: [
-            children,
-            /*#__PURE__*/ jsx(Combobox.ItemIndicator, {
-                className: itemIndicator,
-                children: /*#__PURE__*/ jsx(CheckIcon, {})
-            })
-        ]
-    });
-}
-function Combobox_Group({ ...props }) {
-    return /*#__PURE__*/ jsx(Combobox.Group, {
-        "data-slot": "combobox-group",
-        ...props
-    });
-}
-function Label({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Combobox.GroupLabel, {
-        "data-slot": "combobox-label",
-        className: clsx(styles_css_label, className),
-        ...props
-    });
-}
-function Collection(props) {
-    return /*#__PURE__*/ jsx(Combobox.Collection, {
-        ...props
-    });
-}
-function Empty({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Combobox.Empty, {
-        "data-slot": "combobox-empty",
-        className: clsx(empty, className),
-        ...props
-    });
-}
-function Combobox_Separator({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Combobox.Separator, {
-        "data-slot": "combobox-separator",
-        className: clsx(Combobox_styles_css_separator, className),
+};
+function Collapsible_Collapsible({ ...props }) {
+    return /*#__PURE__*/ jsx(Collapsible.Root, {
+        "data-slot": "collapsible",
         ...props
     });
 }
-function Chips({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Combobox.Chips, {
-        "data-slot": "combobox-chips",
-        className: clsx(chips, className),
+function Collapsible_Trigger({ ...props }) {
+    return /*#__PURE__*/ jsx(Collapsible.Trigger, {
+        "data-slot": "collapsible-trigger",
         ...props
     });
 }
-function Chip({ className, children, showRemove = true, ...props }) {
-    return /*#__PURE__*/ jsxs(Combobox.Chip, {
-        "data-slot": "combobox-chip",
-        className: clsx(chip, {
-            [chipWithRemove]: showRemove
-        }, className),
-        ...props,
-        children: [
-            children,
-            showRemove && /*#__PURE__*/ jsx(Combobox.ChipRemove, {
-                className: clsx(chipRemove, chipRemoveButton, chipRemoveSize["icon-xs"]),
-                "data-slot": "combobox-chip-remove",
-                children: /*#__PURE__*/ jsx(XIcon, {})
-            })
-        ]
-    });
-}
-function ChipsInput({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Combobox.Input, {
-        "data-slot": "combobox-chip-input",
-        className: clsx(chipsInput, className),
+function Collapsible_Content({ ...props }) {
+    return /*#__PURE__*/ jsx(Collapsible.Panel, {
+        "data-slot": "collapsible-content",
         ...props
     });
 }
-function useComboboxAnchor() {
-    return useRef(null);
-}
-Combobox_Combobox.Value = Value;
-Combobox_Combobox.Trigger = Combobox_Trigger;
-Combobox_Combobox.Clear = Clear;
-Combobox_Combobox.Input = Combobox_Input;
-Combobox_Combobox.Content = Combobox_Content;
-Combobox_Combobox.List = Combobox_List;
-Combobox_Combobox.Item = Combobox_Item;
-Combobox_Combobox.Group = Combobox_Group;
-Combobox_Combobox.Label = Label;
-Combobox_Combobox.Collection = Collection;
-Combobox_Combobox.Empty = Empty;
-Combobox_Combobox.Separator = Combobox_Separator;
-Combobox_Combobox.Chips = Chips;
-Combobox_Combobox.Chip = Chip;
-Combobox_Combobox.ChipsInput = ChipsInput;
+Collapsible_Collapsible.Trigger = Collapsible_Trigger;
+Collapsible_Collapsible.Content = Collapsible_Content;
 var Popover_styles_css_content = 'style__1xy4jvu2';
 var styles_css_positioner = 'style__1xy4jvu3';
 const createHandle = Popover.createHandle;
@@ -1912,7 +2030,7 @@ function Header_Header({ columns, height, sticky }) {
     });
 }
 var DataGrid_styles_css_container = 'style__1gqvluf0';
-var styles_css_disabled = 'style__1gqvluf3';
+var DataGrid_styles_css_disabled = 'style__1gqvluf3';
 var fullHeight = 'style__1gqvluf2';
 var styles_css_loading = 'style__1gqvluf4';
 var table = 'style__1gqvluf1';
@@ -1928,7 +2046,7 @@ function DataGrid({ rows, columns, height = '100%', className, rowHeight = 40, h
         children: [
             /*#__PURE__*/ jsxs("table", {
                 className: clsx(table, {
-                    [styles_css_disabled]: isDisabled,
+                    [DataGrid_styles_css_disabled]: isDisabled,
                     [styles_css_loading]: isLoading,
                     [fullHeight]: isFullHeight
                 }, className),
@@ -2503,19 +2621,6 @@ const Input_Input = ({ error, variant = 'outlined', size = 'md', startAdornment,
             })
         ]
     });
-var label_css_disabled = 'style__c31e141';
-var label_css_error = 'style__c31e142';
-var required = 'style__c31e143';
-var label_css_root = 'Label__c31e140';
-const Label_Label = ({ className, disabled, error, ...props })=>/*#__PURE__*/ jsx("label", {
-        "data-slot": "label",
-        className: clsx(label_css_root, {
-            [label_css_disabled]: disabled,
-            [label_css_error]: error,
-            [required]: props.required
-        }, className),
-        ...props
-    });
 var TextField_styles_css_container = 'style__kqu4y20';
 var TextField_styles_css_disabledClass = 'style__kqu4y23';
 var styles_css_errorClass = 'style__kqu4y24';
@@ -2527,7 +2632,7 @@ const TextField = ({ label, helperText, className, disabled, fullWidth, ref, lab
             [styles_css_fullWidthClass]: fullWidth
         }, className),
         children: [
-            label && /*#__PURE__*/ jsx(Label_Label, {
+            label && /*#__PURE__*/ jsx(Label, {
                 htmlFor: props.id || label,
                 disabled: disabled,
                 required: props.required,
@@ -3447,17 +3552,31 @@ const Footer_Footer_Footer = (props)=>{
     });
 };
 var styles_css_actions = 'style__nvcxbd1';
-var Header_styles_css_content = 'style__nvcxbd2';
+var Header_styles_css_content = 'style__nvcxbd4';
 var Header_styles_css_root = 'style__nvcxbd0';
-const Header_Header_Header = ({ actions, className, htmlTitle, children })=>{
+var sidebarTriggerContainer = 'style__nvcxbd2';
+var titleContainer = 'style__nvcxbd3';
+const Header_Header_Header = ({ actions, className, title, children, sidebarTrigger })=>{
     useEffect(()=>{
-        if (htmlTitle) document.title = htmlTitle;
+        if (title) document.title = title;
     }, [
-        htmlTitle
+        title
     ]);
     return /*#__PURE__*/ jsxs("header", {
         className: clsx(Header_styles_css_root, PAGE_HEADER_CLASSNAME, className),
         children: [
+            /*#__PURE__*/ jsx("div", {
+                className: sidebarTriggerContainer,
+                children: sidebarTrigger ? sidebarTrigger : null
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: titleContainer,
+                children: title && /*#__PURE__*/ jsx(Typography, {
+                    variant: "h4",
+                    component: "h1",
+                    children: title
+                })
+            }),
             /*#__PURE__*/ jsx("div", {
                 className: Header_styles_css_content,
                 children: children
@@ -3758,7 +3877,7 @@ const RadioGroupItem = ({ className, label, ...props })=>/*#__PURE__*/ jsxs("div
                     })
                 })
             }),
-            /*#__PURE__*/ jsx(Label_Label, {
+            /*#__PURE__*/ jsx(Label, {
                 htmlFor: props.id || props.value,
                 "data-slot": "radio-group-label",
                 children: label
@@ -4197,7 +4316,7 @@ var gap = 'style__1xiua9n3';
 var Sidebar_styles_css_group = 'style__1xiua9ni';
 var groupAction = 'style__1xiua9nk';
 var groupContent = 'style__1xiua9nl';
-var groupLabel = 'style__1xiua9nj';
+var styles_css_groupLabel = 'style__1xiua9nj';
 var Sidebar_styles_css_header = 'style__1xiua9ne';
 var inner = 'style__1xiua9n6';
 var Sidebar_styles_css_input = 'style__1xiua9nd';
@@ -4470,14 +4589,14 @@ function Sidebar_Group({ className, ...props }) {
         ...props
     });
 }
-function GroupLabel({ className, render, ...props }) {
+function Sidebar_GroupLabel({ className, render, ...props }) {
     return useRender({
         defaultTagName: 'div',
         render,
         props: mergeProps({
             'data-slot': 'sidebar-group-label',
             'data-sidebar': 'group-label',
-            className: clsx(groupLabel, className)
+            className: clsx(styles_css_groupLabel, className)
         }, props)
     });
 }
@@ -4631,7 +4750,7 @@ const Sidebar_Sidebar = Object.assign(SidebarRoot, {
     Separator: Sidebar_Separator,
     Content: Sidebar_Content,
     Group: Sidebar_Group,
-    GroupLabel: GroupLabel,
+    GroupLabel: Sidebar_GroupLabel,
     GroupAction: GroupAction,
     GroupContent: GroupContent,
     Menu: Sidebar_Menu,
@@ -4704,7 +4823,7 @@ const ToggleGroup = ({ value, onChange, options, size, className, label, multipl
     return /*#__PURE__*/ jsxs("div", {
         className: clsx(toggleGroup_css_containerClass, className),
         children: [
-            label && /*#__PURE__*/ jsx(Label_Label, {
+            label && /*#__PURE__*/ jsx(Label, {
                 className: toggleGroup_css_labelClass,
                 children: label
             }),
@@ -4728,4 +4847,4 @@ const ToggleGroup = ({ value, onChange, options, size, className, label, multipl
         ]
     });
 };
-export { Accordion_Accordion as Accordion, AlertDialog_AlertDialog as AlertDialog, Avatar_Avatar as Avatar, Badge_Badge as Badge, Breadcrumb, ButtonGroup, Button_Button as Button, Button_buttonSizes as buttonSizes, Button_buttonVariants as buttonVariants, Calendar, Card, Carousel, Checkbox_Checkbox as Checkbox, CircularProgress, Collapsible_Collapsible as Collapsible, Combobox_Combobox as Combobox, ConfirmAction, ContentState, CopyTypography, DEFAULT_SEPARATOR, DEFAULT_SYMBOL, DESCRIPTION_ROOT_CLASSNAME, DashboardLayout, DataGrid, DataGridActionCell, DataGridSortHeader, DataList, DatePicker, Description_Description as Description, Dialog_Dialog as Dialog, Drawer_Drawer as Drawer, DropdownMenu, Empty_Empty as Empty, ImageCarousel, Image_Image as Image, InputGroup, InputOTP, Input_Input as Input, Label_Label as Label, MaskField, NOTIFICATION_POSITIONS, NOTIFY_CLASSNAME, Notification, NotificationContainer, OverflowTypography, PageLayout, Pagination, PeriodPicker, Placeholder, Popover_Popover as Popover, RadioGroupItem, RadioGroup_RadioGroup as RadioGroup, RangeInput, ScrollTopButton, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Select_Select as Select, Sheet, Sidebar_Sidebar as Sidebar, Slider_Slider as Slider, Tabs_Tabs as Tabs, TextField, Textarea_Textarea as Textarea, ToggleGroup, Tooltip_Tooltip as Tooltip, Typography, alignments, badgeVariants, calculateSize, colors, constants_NotificationVariantTypes as NotificationVariantTypes, createHandle, displays, negativeSpacing, notification, spacing, theme, transforms, useComboboxAnchor, useDashboard, useIsMobile, useOverflowed, useSidebar, variants, weights };
+export { Accordion_Accordion as Accordion, AlertDialog_AlertDialog as AlertDialog, Autocomplete, Avatar_Avatar as Avatar, Badge_Badge as Badge, Breadcrumb, ButtonGroup, Button_Button as Button, Button_buttonSizes as buttonSizes, Button_buttonVariants as buttonVariants, Calendar, Card, Carousel, Checkbox_Checkbox as Checkbox, CircularProgress, Collapsible_Collapsible as Collapsible, Combobox_Combobox as Combobox, ConfirmAction, ContentState, CopyTypography, DEFAULT_SEPARATOR, DEFAULT_SYMBOL, DESCRIPTION_ROOT_CLASSNAME, DashboardLayout, DataGrid, DataGridActionCell, DataGridSortHeader, DataList, DatePicker, Description_Description as Description, Dialog_Dialog as Dialog, Drawer_Drawer as Drawer, DropdownMenu, Empty_Empty as Empty, ImageCarousel, Image_Image as Image, InputGroup, InputOTP, Input_Input as Input, Label, MaskField, NOTIFICATION_POSITIONS, NOTIFY_CLASSNAME, Notification, NotificationContainer, OverflowTypography, PageLayout, Pagination, PeriodPicker, Placeholder, Popover_Popover as Popover, RadioGroupItem, RadioGroup_RadioGroup as RadioGroup, RangeInput, ScrollTopButton, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Select_Select as Select, Sheet, Sidebar_Sidebar as Sidebar, Slider_Slider as Slider, Tabs_Tabs as Tabs, TextField, Textarea_Textarea as Textarea, ToggleGroup, Tooltip_Tooltip as Tooltip, Typography, alignments, badgeVariants, calculateSize, colors, constants_NotificationVariantTypes as NotificationVariantTypes, createHandle, displays, negativeSpacing, notification, spacing, theme, transforms, useComboboxAnchor, useDashboard, useIsMobile, useOverflowed, useSidebar, variants, weights };