@max-ts/kit 0.27.0 → 0.28.0

package/lib/index.mjs

@@ -14,19 +14,20 @@ import react, { createContext, createElement, useCallback, useContext, useEffect
 import embla_carousel_react from "embla-carousel-react";
 import { Collapsible } from "@base-ui/react/collapsible";
 import { Popover } from "@base-ui/react/popover";
-import { Arrow, Content as react_tooltip_Content, Portal as react_tooltip_Portal, Provider, Root, Trigger as react_tooltip_Trigger } from "@radix-ui/react-tooltip";
+import { Tooltip } from "@base-ui/react/tooltip";
 import { Menu } from "@base-ui/react/menu";
 import { Virtuoso } from "react-virtuoso";
 import { useMask } from "@react-input/mask";
-import { Root as react_label_Root } from "@radix-ui/react-label";
 import { Dialog } from "@base-ui/react/dialog";
-import { Drawer, Root as external_vaul_Root } from "vaul";
+import { Drawer } from "@base-ui/react/drawer";
 import { OTPInput } from "input-otp";
 import { Toaster, toast } from "sonner";
-import { Indicator, Item as react_radio_group_Item, Root as react_radio_group_Root } from "@radix-ui/react-radio-group";
+import { RadioGroup as radio_group_RadioGroup } from "@base-ui/react/radio-group";
+import { Radio } from "@base-ui/react/radio";
 import { Slider } from "@base-ui/react/slider";
-import { Content as react_select_Content, Group as react_select_Group, Icon, Item as react_select_Item, ItemIndicator, ItemText, Label as react_select_Label, Portal as react_select_Portal, Root as react_select_Root, ScrollDownButton, ScrollUpButton, Separator as react_select_Separator, Trigger as react_select_Trigger, Value as react_select_Value, Viewport } from "@radix-ui/react-select";
-import { Content as react_tabs_Content, List as react_tabs_List, Tabs, Trigger as react_tabs_Trigger } from "@radix-ui/react-tabs";
+import { Select } from "@base-ui/react/select";
+import { Tabs } from "@base-ui/react/tabs";
+import { Controller, FormProvider, useController, useFieldArray, useForm, useFormContext, useWatch } from "react-hook-form";
 import * as __rspack_external_react from "react";
 var __webpack_require__ = {};
 (()=>{
@@ -559,7 +560,12 @@ const DayButton = (props)=>{
 var Dropdown_styles_css_trigger = 'style__1e2msjb0';
 function Dropdown(props) {
     const { options, onChange, ...restProps } = props;
-    const selectedOption = options?.find(({ value })=>value === restProps.value);
+    const selectedValue = 'string' == typeof restProps.value || 'number' == typeof restProps.value ? restProps.value.toString() : void 0;
+    const selectedOption = options?.find(({ value })=>value.toString() === selectedValue);
+    const items = options?.map(({ value, label })=>({
+            value: value.toString(),
+            label
+        }));
     const handleChange = (value)=>{
         if (onChange) onChange({
             target: {
@@ -567,9 +573,10 @@ function Dropdown(props) {
             }
         });
     };
-    return /*#__PURE__*/ jsxs(Select, {
-        value: selectedOption?.value.toString(),
+    return /*#__PURE__*/ jsxs(Select_Select, {
+        value: selectedValue,
         onValueChange: handleChange,
+        items: items,
         children: [
             /*#__PURE__*/ jsx(SelectTrigger, {
                 className: Dropdown_styles_css_trigger,
@@ -630,7 +637,7 @@ const Calendar = ({ className, classNames, showOutsideDays = true, ...props })=>
         },
         ...props
     });
-var theme_css_theme = {
+var theme = {
     colors: {
         primary: 'var(--colors-primary)',
         secondary: 'var(--colors-secondary)',
@@ -707,6 +714,9 @@ var theme_css_theme = {
         lg: 'var(--borderRadius-lg)'
     }
 };
+const negativeSpacing = (...keys)=>keys.map((key)=>`calc(-1 * ${theme.spacing[key]})`).join(' ');
+const spacing = (...keys)=>keys.map((key)=>theme.spacing[key]).join(' ');
+const calculateSize = (value)=>'number' == typeof value ? `${value}px` : value;
 var card_css_content = 'style__oyalw04';
 var card_css_description = 'style__oyalw03';
 var card_css_footer = 'style__oyalw05';
@@ -715,7 +725,7 @@ var card_css_root = 'style__oyalw00';
 var card_css_title = 'style__oyalw02';
 const Card = ({ className, elevation = 2, ...props })=>/*#__PURE__*/ jsx("div", {
         style: {
-            boxShadow: theme_css_theme.elevation[elevation]
+            boxShadow: theme.elevation[elevation]
         },
         className: clsx(card_css_root, className),
         ...props
@@ -1130,7 +1140,7 @@ const ConfirmAction = (props)=>{
         onOpenChange: onOpenChange,
         children: [
             /*#__PURE__*/ jsx(Popover_Popover.Trigger, {
-                children: actionComponent({
+                render: actionComponent({
                     onClick: onActionComponentClick
                 })
             }),
@@ -1285,43 +1295,42 @@ const ContentState = ({ isLoading, isError, isCustom, errorState, customState, c
     }
     return children;
 };
-var arrowClass = 'style__izacrl4';
-var contentClass = 'style__izacrl2';
-var textClass = 'style__izacrl3';
-const TooltipProvider = Provider;
-const TooltipRoot = Root;
-const TooltipTrigger = react_tooltip_Trigger;
-const TooltipContent = ({ sideOffset = 4, alignOffset, ref, ...props })=>/*#__PURE__*/ jsx(react_tooltip_Content, {
-        ref: ref,
-        sideOffset: sideOffset,
-        ...props
-    });
-const Tooltip = ({ text, content, children, side = 'top', sideOffset = 10, alignOffset, delayDuration = 0, className, ref, ...props })=>/*#__PURE__*/ jsx(TooltipProvider, {
-        delayDuration: delayDuration,
-        children: /*#__PURE__*/ jsxs(TooltipRoot, {
+var arrowClass = 'style__izacrl5';
+var contentClass = 'style__izacrl3';
+var positionerClass = 'style__izacrl2';
+var textClass = 'style__izacrl4';
+const TooltipProvider = Tooltip.Provider;
+const TooltipRootComponent = Tooltip.Root;
+const TooltipTrigger = Tooltip.Trigger;
+const Tooltip_Tooltip = ({ text, content, children, side = 'top', sideOffset = 10, align = 'center', alignOffset, arrow, delayDuration = 0, className, ref, ...props })=>/*#__PURE__*/ jsx(TooltipProvider, {
+        delay: delayDuration,
+        children: /*#__PURE__*/ jsxs(TooltipRootComponent, {
             ...props,
             children: [
                 /*#__PURE__*/ jsx(TooltipTrigger, {
                     ref: ref,
-                    asChild: true,
-                    children: children
+                    render: children
                 }),
-                content || text ? /*#__PURE__*/ jsx(react_tooltip_Portal, {
-                    children: /*#__PURE__*/ jsxs(TooltipContent, {
-                        className: clsx_0(contentClass, className),
+                content || text ? /*#__PURE__*/ jsx(Tooltip.Portal, {
+                    children: /*#__PURE__*/ jsx(Tooltip.Positioner, {
+                        align: align,
                         alignOffset: alignOffset,
                         sideOffset: sideOffset,
-                        hideWhenDetached: true,
                         side: side,
-                        children: [
-                            content ?? /*#__PURE__*/ jsx("p", {
-                                className: textClass,
-                                children: text
-                            }),
-                            props.arrow && /*#__PURE__*/ jsx(Arrow, {
-                                className: arrowClass
-                            })
-                        ]
+                        className: positionerClass,
+                        children: /*#__PURE__*/ jsxs(Tooltip.Popup, {
+                            "data-slot": "tooltip-content",
+                            className: clsx_0(contentClass, className),
+                            children: [
+                                content ?? /*#__PURE__*/ jsx("p", {
+                                    className: textClass,
+                                    children: text
+                                }),
+                                arrow && /*#__PURE__*/ jsx(Tooltip.Arrow, {
+                                    className: arrowClass
+                                })
+                            ]
+                        })
                     })
                 }) : null
             ]
@@ -1362,7 +1371,7 @@ const CopyTypography = (props)=>{
             className: copyIconClass
         });
     const { tooltipOpen, handleMouseEnter, handleMouseLeave, handleClick, tooltipTitle, isIconOnLeft } = useLogic_useLogic_useLogic(props);
-    return /*#__PURE__*/ jsx(Tooltip, {
+    return /*#__PURE__*/ jsx(Tooltip_Tooltip, {
         open: tooltipOpen,
         arrow: true,
         text: tooltipTitle,
@@ -1876,7 +1885,7 @@ const MainIconButton = (props)=>{
     const { tooltipProps } = MainIconButton_useLogic_useLogic_useLogic(props);
     const { action, onActionClick, isDisabled, tooltipPlacement } = props;
     const { name, icon, needConfirm, confirmText, confirmButtonProps, disabled, isLoading, onClick } = action;
-    const renderButton = (renderProps)=>/*#__PURE__*/ jsx(Tooltip, {
+    const renderButton = (renderProps)=>/*#__PURE__*/ jsx(Tooltip_Tooltip, {
             arrow: true,
             side: tooltipPlacement,
             ...tooltipProps,
@@ -1905,7 +1914,7 @@ const MainAction = ({ action, onActionClick, isDisabled, tooltipPlacement })=>{
         const { disabled, icon, name, disabledReason, actions, isLoading } = action;
         return /*#__PURE__*/ jsxs(DropdownMenu, {
             children: [
-                /*#__PURE__*/ jsx(Tooltip, {
+                /*#__PURE__*/ jsx(Tooltip_Tooltip, {
                     text: disabledReason || name,
                     side: tooltipPlacement,
                     arrow: true,
@@ -1953,7 +1962,7 @@ const SecondaryActions = ({ actions, onActionClick, tooltipPlacement, isDisabled
             /*#__PURE__*/ jsx(DropdownMenu.Content, {
                 children: actions.map((action)=>{
                     const { onClick, name, disabledReason, isLoading } = action;
-                    return /*#__PURE__*/ jsx(Tooltip, {
+                    return /*#__PURE__*/ jsx(Tooltip_Tooltip, {
                         arrow: true,
                         side: tooltipPlacement,
                         text: disabledReason,
@@ -2223,10 +2232,11 @@ 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, ...props })=>/*#__PURE__*/ jsx(react_label_Root, {
+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]: props.error,
+            [label_css_error]: error,
             [required]: props.required
         }, className),
         ...props
@@ -2614,65 +2624,72 @@ Dialog_Dialog.Header = Dialog_Header;
 Dialog_Dialog.Footer = Dialog_Footer;
 Dialog_Dialog.Title = Dialog_Title;
 Dialog_Dialog.Description = Dialog_Description;
-var Drawer_styles_css_content = 'style__ccss503';
-var Drawer_styles_css_description = 'style__ccss508';
-var dragHandle = 'style__ccss504';
-var Drawer_styles_css_footer = 'style__ccss506';
-var Drawer_styles_css_header = 'style__ccss505';
+var Drawer_styles_css_content = 'style__ccss504';
+var contentInner = 'style__ccss505';
+var Drawer_styles_css_description = 'style__ccss50a';
+var dragHandle = 'style__ccss506';
+var Drawer_styles_css_footer = 'style__ccss508';
+var Drawer_styles_css_header = 'style__ccss507';
 var Drawer_styles_css_overlay = 'style__ccss502';
-var Drawer_styles_css_title = 'style__ccss507';
-const Drawer_Drawer = ({ children, trigger, className, title, description = '', footer, closeButton, ...props })=>/*#__PURE__*/ jsxs(external_vaul_Root, {
+var Drawer_styles_css_title = 'style__ccss509';
+var viewport = 'style__ccss503';
+const Drawer_Drawer = ({ children, trigger, className, title, description = '', footer, closeButton, swipeDirection = 'down', ...props })=>/*#__PURE__*/ jsxs(Drawer.Root, {
+        swipeDirection: swipeDirection,
         ...props,
         children: [
             trigger && /*#__PURE__*/ jsx(Drawer.Trigger, {
                 "data-slot": "drawer-trigger",
-                asChild: true,
-                children: trigger
+                render: trigger
             }),
             /*#__PURE__*/ jsxs(Drawer.Portal, {
                 "data-slot": "drawer-portal",
                 children: [
-                    /*#__PURE__*/ jsx(Drawer.Overlay, {
+                    /*#__PURE__*/ jsx(Drawer.Backdrop, {
                         "data-slot": "drawer-overlay",
                         className: Drawer_styles_css_overlay
                     }),
-                    /*#__PURE__*/ jsxs(Drawer.Content, {
-                        "data-slot": "drawer-content",
-                        className: clsx('group/drawer-content', Drawer_styles_css_content, className),
-                        children: [
-                            /*#__PURE__*/ jsx("div", {
-                                className: dragHandle
-                            }),
-                            /*#__PURE__*/ jsxs("div", {
-                                "data-slot": "drawer-header",
-                                className: Drawer_styles_css_header,
+                    /*#__PURE__*/ jsx(Drawer.Viewport, {
+                        className: viewport,
+                        children: /*#__PURE__*/ jsx(Drawer.Popup, {
+                            "data-slot": "drawer-content",
+                            className: clsx('group/drawer-content', Drawer_styles_css_content, className),
+                            children: /*#__PURE__*/ jsxs(Drawer.Content, {
+                                className: contentInner,
                                 children: [
-                                    /*#__PURE__*/ jsx(Drawer.Title, {
-                                        "data-slot": "drawer-title",
-                                        className: Drawer_styles_css_title,
-                                        children: title
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: dragHandle
                                     }),
-                                    /*#__PURE__*/ jsx(Drawer.Description, {
-                                        "data-slot": "drawer-description",
-                                        className: Drawer_styles_css_description,
-                                        children: description
-                                    })
-                                ]
-                            }),
-                            children,
-                            /*#__PURE__*/ jsxs("div", {
-                                "data-slot": "drawer-footer",
-                                className: Drawer_styles_css_footer,
-                                children: [
-                                    footer,
-                                    closeButton && /*#__PURE__*/ jsx(Drawer.Close, {
-                                        "data-slot": "drawer-close",
-                                        asChild: true,
-                                        children: closeButton
+                                    /*#__PURE__*/ jsxs("div", {
+                                        "data-slot": "drawer-header",
+                                        className: Drawer_styles_css_header,
+                                        children: [
+                                            /*#__PURE__*/ jsx(Drawer.Title, {
+                                                "data-slot": "drawer-title",
+                                                className: Drawer_styles_css_title,
+                                                children: title
+                                            }),
+                                            /*#__PURE__*/ jsx(Drawer.Description, {
+                                                "data-slot": "drawer-description",
+                                                className: Drawer_styles_css_description,
+                                                children: description
+                                            })
+                                        ]
+                                    }),
+                                    children,
+                                    /*#__PURE__*/ jsxs("div", {
+                                        "data-slot": "drawer-footer",
+                                        className: Drawer_styles_css_footer,
+                                        children: [
+                                            footer,
+                                            closeButton && /*#__PURE__*/ jsx(Drawer.Close, {
+                                                "data-slot": "drawer-close",
+                                                render: closeButton
+                                            })
+                                        ]
                                     })
                                 ]
                             })
-                        ]
+                        })
                     })
                 ]
             })
@@ -2736,7 +2753,7 @@ Empty.Media = Empty_Media;
 Empty.Title = Empty_Title;
 Empty.Description = Empty_Description;
 Empty.Content = Empty_Content;
-var arrow = 'style__a5l83v4';
+var styles_css_arrow = 'style__a5l83v4';
 var arrowLeft = 'style__a5l83v5';
 var arrowRight = 'style__a5l83v6';
 var carousel = 'style__a5l83v0';
@@ -2792,7 +2809,7 @@ const ImageCarousel = ({ images = [], autoPlay = false, interval = 5000 })=>{
                 children: [
                     /*#__PURE__*/ jsx("button", {
                         type: "button",
-                        className: clsx(arrow, arrowLeft),
+                        className: clsx(styles_css_arrow, arrowLeft),
                         onClick: goToPrevious,
                         children: /*#__PURE__*/ jsx(ChevronLeft, {
                             size: 24
@@ -2800,7 +2817,7 @@ const ImageCarousel = ({ images = [], autoPlay = false, interval = 5000 })=>{
                     }),
                     /*#__PURE__*/ jsx("button", {
                         type: "button",
-                        className: clsx(arrow, arrowRight),
+                        className: clsx(styles_css_arrow, arrowRight),
                         onClick: goToNext,
                         children: /*#__PURE__*/ jsx(ChevronRight, {
                             size: 24
@@ -2928,19 +2945,19 @@ const NotificationContainer = ({ position = 'bottomRight', ...props })=>/*#__PUR
         icons: {
             error: /*#__PURE__*/ jsx(OctagonAlert, {
                 size: 20,
-                color: theme_css_theme.colors.error
+                color: theme.colors.error
             }),
             success: /*#__PURE__*/ jsx(CircleCheck, {
                 size: 20,
-                color: theme_css_theme.colors.success
+                color: theme.colors.success
             }),
             warning: /*#__PURE__*/ jsx(TriangleAlert, {
                 size: 20,
-                color: theme_css_theme.colors.warning
+                color: theme.colors.warning
             }),
             info: /*#__PURE__*/ jsx(Info, {
                 size: 20,
-                color: theme_css_theme.colors.info
+                color: theme.colors.info
             })
         },
         position: NOTIFICATION_POSITIONS[position],
@@ -3042,7 +3059,7 @@ const getRowsCountStyle = (rowsCount, style)=>({
         ...style,
         '--rows-count': rowsCount
     });
-const OverflowTypography_useLogic_useLogic = ({ text, children, tooltipProps, visibleLastSymbolsCount = 0, rowsCount = 1, ref, style: styleProp })=>{
+const OverflowTypography_useLogic_useLogic = ({ text, children, tooltipProps, visibleLastSymbolsCount = 0, rowsCount = 1, ref, style: styleProp, ...restProps })=>{
     const style = getRowsCountStyle(rowsCount, styleProp);
     const label = text ?? ('string' == typeof children ? children : void 0);
     const hasVisibleLastSymbols = Boolean(label && visibleLastSymbolsCount > 0);
@@ -3070,15 +3087,16 @@ const OverflowTypography_useLogic_useLogic = ({ text, children, tooltipProps, vi
         tooltipContent: resolvedTooltipContent,
         restTooltipProps,
         style,
-        visibleLastSymbolsCount
+        visibleLastSymbolsCount,
+        restProps
     };
 };
 const OverflowTypography = (props)=>{
-    const { label, hasVisibleLastSymbols, hasMultipleRows, overflowRef, tooltipContent, restTooltipProps, style, visibleLastSymbolsCount } = OverflowTypography_useLogic_useLogic(props);
+    const { label, hasVisibleLastSymbols, visibleLastSymbolsCount, hasMultipleRows, overflowRef, tooltipContent, restTooltipProps, style, restProps } = OverflowTypography_useLogic_useLogic(props);
     const { align = 'left', className, text, children } = props;
     if (hasVisibleLastSymbols && label) {
         const { firstPartLabel, secondPartLabel } = truncateString(visibleLastSymbolsCount, label);
-        return /*#__PURE__*/ jsx(Tooltip, {
+        return /*#__PURE__*/ jsx(Tooltip_Tooltip, {
             ...restTooltipProps,
             arrow: true,
             content: tooltipContent,
@@ -3087,7 +3105,7 @@ const OverflowTypography = (props)=>{
                 "data-slot": "overflow-typography",
                 children: [
                     /*#__PURE__*/ jsx(Typography, {
-                        ...props,
+                        ...restProps,
                         align: align,
                         className: clsx(truncate, className),
                         component: "span",
@@ -3098,7 +3116,7 @@ const OverflowTypography = (props)=>{
                         children: firstPartLabel
                     }),
                     /*#__PURE__*/ jsx(Typography, {
-                        ...props,
+                        ...restProps,
                         align: align,
                         className: className,
                         component: "span",
@@ -3110,12 +3128,12 @@ const OverflowTypography = (props)=>{
             })
         });
     }
-    return /*#__PURE__*/ jsx(Tooltip, {
+    return /*#__PURE__*/ jsx(Tooltip_Tooltip, {
         ...restTooltipProps,
         arrow: true,
         content: tooltipContent,
         children: /*#__PURE__*/ jsx(Typography, {
-            ...props,
+            ...restProps,
             align: align,
             className: clsx(truncate, hasMultipleRows && multipleRows, className),
             "data-slot": "overflow-typography",
@@ -3175,7 +3193,7 @@ const Header_Header_Header = (props)=>{
             /*#__PURE__*/ jsxs("div", {
                 className: buttonsClass,
                 children: [
-                    /*#__PURE__*/ jsx(Tooltip, {
+                    /*#__PURE__*/ jsx(Tooltip_Tooltip, {
                         text: pinned ? 'Развернуть' : 'Свернуть',
                         children: /*#__PURE__*/ jsx(Button_Button, {
                             variant: "ghost",
@@ -3184,7 +3202,7 @@ const Header_Header_Header = (props)=>{
                             children: pinned ? /*#__PURE__*/ jsx(PanelLeftOpen, {}) : /*#__PURE__*/ jsx(PanelLeftClose, {})
                         })
                     }),
-                    backButton && /*#__PURE__*/ jsx(Tooltip, {
+                    backButton && /*#__PURE__*/ jsx(Tooltip_Tooltip, {
                         text: "Назад",
                         children: /*#__PURE__*/ jsx(Button_Button, {
                             ...backButton,
@@ -3373,7 +3391,7 @@ function YearsDropdown({ year, onSelect, minDate, maxDate }) {
     const onChange = (year)=>{
         onSelect?.(Number(year));
     };
-    return /*#__PURE__*/ jsxs(Select, {
+    return /*#__PURE__*/ jsxs(Select_Select, {
         onValueChange: onChange,
         value: year.toString(),
         children: [
@@ -3492,7 +3510,7 @@ var indicatorClass = 'style__ia95d13';
 var styles_css_itemClass = 'style__ia95d12';
 var itemWrapperClass = 'style__ia95d11';
 var radioGroupClass = 'RadioGroup__ia95d10';
-const RadioGroup_RadioGroup = ({ className, ...props })=>/*#__PURE__*/ jsx(react_radio_group_Root, {
+const RadioGroup_RadioGroup = ({ className, ...props })=>/*#__PURE__*/ jsx(radio_group_RadioGroup, {
         "data-slot": "radio-group",
         className: clsx_0(radioGroupClass, className),
         ...props
@@ -3500,12 +3518,12 @@ const RadioGroup_RadioGroup = ({ className, ...props })=>/*#__PURE__*/ jsx(react
 const RadioGroupItem = ({ className, label, ...props })=>/*#__PURE__*/ jsxs("div", {
         className: itemWrapperClass,
         children: [
-            /*#__PURE__*/ jsx(react_radio_group_Item, {
+            /*#__PURE__*/ jsx(Radio.Root, {
                 "data-slot": "radio-group-item",
                 id: props.id || props.value,
                 className: clsx(styles_css_itemClass, className),
                 ...props,
-                children: /*#__PURE__*/ jsx(Indicator, {
+                children: /*#__PURE__*/ jsx(Radio.Indicator, {
                     "data-slot": "radio-group-indicator",
                     className: indicatorClass,
                     children: /*#__PURE__*/ jsx(CircleIcon, {
@@ -3520,7 +3538,7 @@ const RadioGroupItem = ({ className, label, ...props })=>/*#__PURE__*/ jsxs("div
             })
         ]
     });
-var control = 'style__h9oy581';
+var styles_css_control = 'style__h9oy581';
 var styles_css_range = 'style__h9oy583';
 var Slider_styles_css_root = 'style__h9oy580';
 var styles_css_thumb = 'style__h9oy584';
@@ -3557,7 +3575,7 @@ function Slider_Slider({ className, defaultValue, value, min = 0, max = 100, onV
         },
         ...props,
         children: /*#__PURE__*/ jsxs(Slider.Control, {
-            className: control,
+            className: styles_css_control,
             children: [
                 /*#__PURE__*/ jsx(Slider.Track, {
                     "data-slot": "slider-track",
@@ -3734,89 +3752,106 @@ function ScrollTopButton({ onClick, variant = 'outline', ...props }) {
         children: /*#__PURE__*/ jsx(ChevronUp, {})
     });
 }
-var chevron = 'style__5ilg7oe';
-var Select_styles_css_content = 'style__5ilg7o7';
-var Select_styles_css_icon = 'style__5ilg7od';
-var Select_styles_css_item = 'style__5ilg7oa';
-var itemIndicatorWrapper = 'style__5ilg7ob';
-var Select_styles_css_label = 'style__5ilg7o9';
+var chevron = 'style__5ilg7of';
+var Select_styles_css_content = 'style__5ilg7o8';
+var Select_styles_css_icon = 'style__5ilg7oe';
+var Select_styles_css_item = 'style__5ilg7ob';
+var itemIndicatorWrapper = 'style__5ilg7oc';
+var Select_styles_css_label = 'style__5ilg7oa';
+var Select_styles_css_positioner = 'style__5ilg7o7';
 var scrollButton = 'style__5ilg7o6';
-var Select_styles_css_separator = 'style__5ilg7oc';
+var Select_styles_css_separator = 'style__5ilg7od';
 var Select_styles_css_sizes = {
     sm: 'sm__5ilg7o3',
     md: 'md__5ilg7o4',
     lg: 'lg__5ilg7o5'
 };
 var Select_styles_css_trigger = 'style__5ilg7o2';
-var viewport = 'style__5ilg7o8';
-const Select = react_select_Root;
-const SelectGroup = react_select_Group;
-const SelectValue = react_select_Value;
-const SelectTrigger = ({ className, children, size = 'md', ...props })=>/*#__PURE__*/ jsxs(react_select_Trigger, {
+var styles_css_viewport = 'style__5ilg7o9';
+const Select_Select = ({ onValueChange, ...props })=>/*#__PURE__*/ jsx(Select.Root, {
+        ...props,
+        onValueChange: (value, eventDetails)=>{
+            if (null !== value) onValueChange?.(value, eventDetails);
+        }
+    });
+const SelectGroup = Select.Group;
+const SelectValue = Select.Value;
+const SelectTrigger = ({ className, children, size = 'md', ...props })=>/*#__PURE__*/ jsxs(Select.Trigger, {
+        "data-slot": "select-trigger",
         className: clsx(Select_styles_css_trigger, Select_styles_css_sizes[size], className),
         ...props,
         children: [
             children,
-            /*#__PURE__*/ jsx(Icon, {
-                asChild: true,
-                children: /*#__PURE__*/ jsx(ChevronDown, {
+            /*#__PURE__*/ jsx(Select.Icon, {
+                render: /*#__PURE__*/ jsx(ChevronDown, {
                     className: chevron
                 })
             })
         ]
     });
-const SelectScrollUpButton = ({ className, ...props })=>/*#__PURE__*/ jsx(ScrollUpButton, {
+const SelectScrollUpButton = ({ className, ...props })=>/*#__PURE__*/ jsx(Select.ScrollUpArrow, {
+        "data-slot": "select-scroll-up-button",
         className: clsx(scrollButton, className),
         ...props,
         children: /*#__PURE__*/ jsx(ChevronUp, {
             className: Select_styles_css_icon
         })
     });
-const SelectScrollDownButton = ({ className, ...props })=>/*#__PURE__*/ jsx(ScrollDownButton, {
+const SelectScrollDownButton = ({ className, ...props })=>/*#__PURE__*/ jsx(Select.ScrollDownArrow, {
+        "data-slot": "select-scroll-down-button",
         className: clsx(scrollButton, className),
         ...props,
         children: /*#__PURE__*/ jsx(ChevronDown, {
             className: Select_styles_css_icon
         })
     });
-const SelectContent = ({ className, children, position = 'popper', ...props })=>/*#__PURE__*/ jsx(react_select_Portal, {
-        children: /*#__PURE__*/ jsxs(react_select_Content, {
-            className: clsx(Select_styles_css_content, className),
-            position: position,
-            ...props,
-            children: [
-                /*#__PURE__*/ jsx(SelectScrollUpButton, {}),
-                /*#__PURE__*/ jsx(Viewport, {
-                    className: viewport,
-                    children: children
-                }),
-                /*#__PURE__*/ jsx(SelectScrollDownButton, {})
-            ]
+const SelectContent = ({ className, children, side = 'bottom', sideOffset = 4, align = 'center', alignOffset = 0, alignItemWithTrigger, position = 'popper', ...props })=>/*#__PURE__*/ jsx(Select.Portal, {
+        children: /*#__PURE__*/ jsx(Select.Positioner, {
+            side: side,
+            sideOffset: sideOffset,
+            align: align,
+            alignOffset: alignOffset,
+            alignItemWithTrigger: alignItemWithTrigger ?? 'item-aligned' === position,
+            className: Select_styles_css_positioner,
+            children: /*#__PURE__*/ jsxs(Select.Popup, {
+                "data-slot": "select-content",
+                className: clsx(Select_styles_css_content, className),
+                ...props,
+                children: [
+                    /*#__PURE__*/ jsx(SelectScrollUpButton, {}),
+                    /*#__PURE__*/ jsx(Select.List, {
+                        className: styles_css_viewport,
+                        children: children
+                    }),
+                    /*#__PURE__*/ jsx(SelectScrollDownButton, {})
+                ]
+            })
         })
     });
-const SelectLabel = ({ className, ...props })=>/*#__PURE__*/ jsx(react_select_Label, {
-        className: `${Select_styles_css_label} ${className || ''}`,
+const SelectLabel = ({ className, ...props })=>/*#__PURE__*/ jsx(Select.GroupLabel, {
+        "data-slot": "select-label",
+        className: clsx(Select_styles_css_label, className),
         ...props
     });
-const SelectItem = ({ className, children, ...props })=>/*#__PURE__*/ jsxs(react_select_Item, {
-        className: `${Select_styles_css_item} ${className || ''}`,
+const SelectItem = ({ className, children, ...props })=>/*#__PURE__*/ jsxs(Select.Item, {
+        "data-slot": "select-item",
+        className: clsx(Select_styles_css_item, className),
         ...props,
         children: [
-            /*#__PURE__*/ jsx("span", {
+            /*#__PURE__*/ jsx(Select.ItemIndicator, {
                 className: itemIndicatorWrapper,
-                children: /*#__PURE__*/ jsx(ItemIndicator, {
-                    children: /*#__PURE__*/ jsx(Check, {
-                        className: Select_styles_css_icon
-                    })
+                children: /*#__PURE__*/ jsx(Check, {
+                    className: Select_styles_css_icon
                 })
             }),
-            /*#__PURE__*/ jsx(ItemText, {
+            /*#__PURE__*/ jsx(Select.ItemText, {
                 children: children
             })
         ]
     });
-const SelectSeparator = ({ className, ...props })=>/*#__PURE__*/ jsx(react_select_Separator, {
-        className: `${Select_styles_css_separator} ${className || ''}`,
+const SelectSeparator = ({ className, ...props })=>/*#__PURE__*/ jsx(Select.Separator, {
+        "data-slot": "select-separator",
+        className: clsx(Select_styles_css_separator, className),
         ...props
     });
 var Sheet_styles_css_closeButton = 'style__5dkj2fc';
@@ -3979,7 +4014,7 @@ function useSidebar() {
     if (!context) throw new Error('useSidebar must be used within a Sidebar.Provider.');
     return context;
 }
-function Sidebar_Provider({ defaultOpen = true, open: openProp, onOpenChange, className, style, children, ...props }) {
+function Provider({ defaultOpen = true, open: openProp, onOpenChange, className, style, children, ...props }) {
     const isMobile = useIsMobile();
     const [openMobile, setOpenMobile] = __rspack_external_react.useState(false);
     const [_open, _setOpen] = __rspack_external_react.useState(defaultOpen);
@@ -4280,7 +4315,7 @@ function MenuButton({ isActive = false, variant = 'default', size = 'default', t
         }, props)
     });
     if (!tooltip || 'collapsed' !== state || isMobile) return button;
-    return /*#__PURE__*/ jsx(Tooltip, {
+    return /*#__PURE__*/ jsx(Tooltip_Tooltip, {
         side: "right",
         ...getTooltipProps(tooltip),
         children: button
@@ -4359,7 +4394,7 @@ function MenuSubButton({ size = 'md', isActive = false, className, render, ...pr
     });
 }
 const Sidebar_Sidebar = Object.assign(SidebarRoot, {
-    Provider: Sidebar_Provider,
+    Provider: Provider,
     Trigger: Sidebar_Trigger,
     Rail: Rail,
     Inset: Inset,
@@ -4390,19 +4425,23 @@ var Tabs_styles_css_sizes = {
     lg: 'lg__hworoa4'
 };
 var styles_css_triggerClass = 'style__hworoa1';
-const TabsContent = ({ className, ...props })=>/*#__PURE__*/ jsx(react_tabs_Content, {
+const TabsContent = ({ className, ...props })=>/*#__PURE__*/ jsx(Tabs.Panel, {
+        "data-slot": "tabs-content",
         className: clsx(Tabs_styles_css_contentClass, className),
         ...props
     });
-const TabsList = ({ className, ...props })=>/*#__PURE__*/ jsx(react_tabs_List, {
+const TabsList = ({ className, ...props })=>/*#__PURE__*/ jsx(Tabs.List, {
+        "data-slot": "tabs-list",
         className: clsx(listClass, className),
         ...props
     });
-const TabsTrigger = ({ className, size = 'md', ...props })=>/*#__PURE__*/ jsx(react_tabs_Trigger, {
+const TabsTrigger = ({ className, size = 'md', ...props })=>/*#__PURE__*/ jsx(Tabs.Tab, {
+        "data-slot": "tabs-trigger",
         className: clsx(styles_css_triggerClass, Tabs_styles_css_sizes[size], className),
         ...props
     });
-const Tabs_Tabs = (props)=>/*#__PURE__*/ jsx(Tabs, {
+const Tabs_Tabs = (props)=>/*#__PURE__*/ jsx(Tabs.Root, {
+        "data-slot": "tabs",
         ...props
     });
 Tabs_Tabs.Content = TabsContent;
@@ -4436,7 +4475,7 @@ const ToggleGroup = ({ value, onChange, options, size, className, label, multipl
             }),
             /*#__PURE__*/ jsx("div", {
                 className: toggleGroup_css_buttonsClass,
-                children: options.map((option)=>/*#__PURE__*/ jsx(Tooltip, {
+                children: options.map((option)=>/*#__PURE__*/ jsx(Tooltip_Tooltip, {
                         arrow: true,
                         text: option.title,
                         children: /*#__PURE__*/ jsx(Button_Button, {
@@ -4454,4 +4493,53 @@ 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, 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, ImageCarousel, Image_Image as Image, Input, InputOTP, 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, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sheet, Sidebar_Sidebar as Sidebar, Slider_Slider as Slider, Tabs_Tabs as Tabs, TextField, ToggleGroup, Tooltip, Typography, alignments, badgeVariants, colors, constants_NotificationVariantTypes as NotificationVariantTypes, createHandle, displays, notification, transforms, useDashboard, useSidebar, variants, weights };
+const Form = ({ form, children, ...props })=>/*#__PURE__*/ jsx(FormProvider, {
+        ...form,
+        children: /*#__PURE__*/ jsx("form", {
+            noValidate: true,
+            ...props,
+            children: children
+        })
+    });
+function FormMaskField({ name, control, ...props }) {
+    return /*#__PURE__*/ jsx(Controller, {
+        control: control,
+        name: name,
+        render: ({ field, fieldState })=>/*#__PURE__*/ jsx(MaskField, {
+                ...props,
+                ...field,
+                error: !!fieldState.error,
+                helperText: fieldState.error?.message
+            })
+    });
+}
+const useForm_useForm = ({ mode = 'onBlur', ...params } = {})=>useForm({
+        ...params,
+        mode
+    });
+const FormSubmitButton = ({ children, isLoading, ...props })=>{
+    const { formState } = useFormContext();
+    return /*#__PURE__*/ jsx(Button_Button, {
+        type: "submit",
+        isLoading: isLoading || formState.isSubmitting,
+        ...props,
+        children: children
+    });
+};
+function FormTextField({ name, control, gridArea, ...props }) {
+    return /*#__PURE__*/ jsx(Controller, {
+        control: control,
+        name: name,
+        render: ({ field, fieldState })=>/*#__PURE__*/ jsx(TextField, {
+                ...props,
+                ...field,
+                style: {
+                    gridArea
+                },
+                value: field.value || '',
+                error: !!fieldState.error,
+                helperText: fieldState.error?.message
+            })
+    });
+}
+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, ConfirmAction, ContentState, Controller as FormController, 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, Form, FormMaskField, FormProvider, FormSubmitButton, FormTextField, ImageCarousel, Image_Image as Image, Input, InputOTP, 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, ToggleGroup, Tooltip_Tooltip as Tooltip, Typography, alignments, badgeVariants, calculateSize, colors, constants_NotificationVariantTypes as NotificationVariantTypes, createHandle, displays, negativeSpacing, notification, spacing, theme, transforms, useController as useFormController, useDashboard, useFieldArray as useFormFieldArray, useFormContext, useForm_useForm as useForm, useIsMobile, useOverflowed, useSidebar, useWatch as useFormWatch, variants, weights };