@vinyasa/form 1.0.22 → 1.0.23

package/dist/cjs/time-picker.css

@@ -126,7 +126,7 @@
 }
 
 .sbqkrxf {
-  align-items: center;
+  align-items: flex-start;
   gap: var(--vinyasa-space2);
   display: inline-flex;
 }

package/dist/cjs/toggle-button.cjs

@@ -1,14 +1,11 @@
 "use strict";
 var __webpack_modules__ = {
-    570 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-        __webpack_require__.d(__webpack_exports__, {
-            A: ()=>toggle_button_ToggleButton
-        });
-        var jsx_runtime_ = __webpack_require__(732);
-        const react_toggle_namespaceObject = require("@radix-ui/react-toggle");
-        var button_ = __webpack_require__(60);
-        var button_default = /*#__PURE__*/ __webpack_require__.n(button_);
-        var external_react_ = __webpack_require__(15);
+    519 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+        var react_jsx_runtime__rspack_import_0 = __webpack_require__(732);
+        var _radix_ui_react_toggle__rspack_import_1 = __webpack_require__(386);
+        var _vinyasa_button__rspack_import_2 = __webpack_require__(60);
+        var _vinyasa_button__rspack_import_2_default = /*#__PURE__*/ __webpack_require__.n(_vinyasa_button__rspack_import_2);
+        var react__rspack_import_3 = __webpack_require__(15);
         function _define_property(obj, key, value) {
             if (key in obj) Object.defineProperty(obj, key, {
                 value: value,
@@ -68,7 +65,7 @@ var __webpack_modules__ = {
             }
             return target;
         }
-        const ToggleButton = /*#__PURE__*/ (0, external_react_.forwardRef)((_0, _1)=>{
+        const ToggleButton = /*#__PURE__*/ (0, react__rspack_import_3.forwardRef)((_0, _1)=>{
             let _ref = [
                 _0,
                 _1
@@ -79,26 +76,32 @@ var __webpack_modules__ = {
                 "pressedVariant",
                 "unpressedVariant"
             ]), [ref] = _rest;
-            const [uncontrolledPressed, setUncontrolledPressed] = (0, external_react_.useState)(defaultPressed);
+            const [uncontrolledPressed, setUncontrolledPressed] = (0, react__rspack_import_3.useState)(defaultPressed);
             const isControlled = void 0 !== pressed;
             const currentPressed = isControlled ? pressed : uncontrolledPressed;
             const handlePressedChange = (next)=>{
                 if (!isControlled) setUncontrolledPressed(next);
                 null == onPressedChange || onPressedChange(next);
             };
-            return /*#__PURE__*/ (0, jsx_runtime_.jsx)(react_toggle_namespaceObject.Root, {
+            return /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(_radix_ui_react_toggle__rspack_import_1.Root, {
                 pressed: pressed,
                 defaultPressed: defaultPressed,
                 onPressedChange: handlePressedChange,
                 asChild: true,
-                children: /*#__PURE__*/ (0, jsx_runtime_.jsx)(button_default(), _object_spread({
+                children: /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(_vinyasa_button__rspack_import_2_default(), _object_spread({
                     ref: ref,
                     variant: currentPressed ? pressedVariant : unpressedVariant
                 }, buttonProps))
             });
         });
         ToggleButton.displayName = 'ToggleButton';
-        const toggle_button_ToggleButton = ToggleButton;
+        const __rspack_default_export = ToggleButton;
+        __webpack_require__.d(__webpack_exports__, {}, {
+            A: __rspack_default_export
+        });
+    },
+    386 (module) {
+        module.exports = require("@radix-ui/react-toggle");
     },
     60 (module) {
         module.exports = require("@vinyasa/button");
@@ -157,7 +160,7 @@ function __webpack_require__(moduleId) {
 var __webpack_exports__ = {};
 (()=>{
     __webpack_require__.r(__webpack_exports__);
-    var _ToggleButton__rspack_import_0 = __webpack_require__(570);
+    var _ToggleButton__rspack_import_0 = __webpack_require__(519);
     const __rspack_default_export = _ToggleButton__rspack_import_0.A;
     __webpack_require__.d(__webpack_exports__, {}, {
         default: __rspack_default_export

package/dist/esm/{switch.css → 1485.css}

@@ -27,6 +27,10 @@
   cursor: not-allowed;
 }
 
+._1u7tp1u0[aria-invalid="true"] {
+  box-shadow: inset 0 0 0 var(--vinyasa-border-width-thin) var(--vinyasa-error);
+}
+
 ._1u7tp1u1 {
   border-radius: var(--vinyasa-radius-full);
   background-color: var(--vinyasa-on-primary);

package/dist/esm/1485.js

@@ -0,0 +1,28 @@
+import "./1485.css";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useResolvedFieldProps } from "./2315.js";
+import * as __rspack_external__radix_ui_react_switch_5e92b7ed from "@radix-ui/react-switch";
+var root = '_1u7tp1u0';
+var thumb = '_1u7tp1u1';
+const Switch = /*#__PURE__*/ forwardRef(({ className, invalid, id: idProp, ...rest }, ref)=>{
+    const { id, invalid: isInvalid, describedBy } = useResolvedFieldProps({
+        id: idProp,
+        invalid
+    });
+    return /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_switch_5e92b7ed.Root, {
+        ref: ref,
+        id: id,
+        "aria-invalid": isInvalid,
+        "aria-describedby": describedBy,
+        className: className ? `${root} ${className}` : root,
+        ...rest
+    });
+});
+Switch.displayName = 'Switch';
+const SwitchThumb = ({ className, ...rest })=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_switch_5e92b7ed.Thumb, {
+        className: className ? `${thumb} ${className}` : thumb,
+        ...rest
+    });
+SwitchThumb.displayName = 'SwitchThumb';
+export { Switch, SwitchThumb };

package/dist/esm/{2995.css → 2315.css}

@@ -122,7 +122,7 @@
 }
 
 .sbqkrxf {
-  align-items: center;
+  align-items: flex-start;
   gap: var(--vinyasa-space2);
   display: inline-flex;
 }

package/dist/esm/{2995.js → 2315.js}

@@ -1,4 +1,7 @@
-import "./2995.css";
+import "./2315.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { Children, createContext, isValidElement, useContext, useId } from "react";
 function toPrimitive(t, r) {
     if ("object" != typeof t || !t) return t;
     var e = t[Symbol.toPrimitive];
@@ -85,8 +88,6 @@ var createRuntimeFn = (config)=>{
     };
     return runtimeFn;
 };
-var controlLabel = 'sbqkrxg';
-var controlRow = 'sbqkrxf';
 var descriptionText = 'sbqkrxd';
 var errorText = 'sbqkrxe';
 var fieldControl = createRuntimeFn({
@@ -114,4 +115,95 @@ var fieldIconLeading = 'sbqkrx6';
 var fieldIconTrailing = 'sbqkrx7';
 var label = 'sbqkrxb';
 var requiredMark = 'sbqkrxc';
-export { controlLabel, controlRow, createRuntimeFn, descriptionText, errorText, fieldControl, fieldControlWithLeadingIcon, fieldControlWithTrailingIcon, fieldGroup, fieldIconButton, fieldIconLeading, fieldIconTrailing, label, requiredMark };
+const FieldContext = /*#__PURE__*/ createContext(null);
+const useFieldContext = ()=>useContext(FieldContext);
+const useResolvedFieldProps = (props)=>{
+    const context = useFieldContext();
+    const generatedId = useId();
+    return {
+        id: props.id ?? context?.id ?? generatedId,
+        invalid: props.invalid ?? context?.invalid ?? false,
+        describedBy: props.describedBy ?? context?.describedBy
+    };
+};
+const Field = ({ invalid = false, children, ...rest })=>{
+    const generatedId = useId();
+    const descriptionId = `${generatedId}-description`;
+    const errorId = `${generatedId}-error`;
+    const labelId = `${generatedId}-label`;
+    const directChildren = Children.toArray(children).filter(isValidElement);
+    const describedByIds = directChildren.reduce((ids, child)=>{
+        if (child.type === FieldDescription) ids.push(descriptionId);
+        if (child.type === FieldError) ids.push(errorId);
+        return ids;
+    }, []);
+    const labelChild = directChildren.find((child)=>child.type === FieldLabel);
+    const labelChildText = labelChild && 'string' == typeof labelChild.props.children ? labelChild.props.children : void 0;
+    const value = {
+        id: generatedId,
+        descriptionId,
+        errorId,
+        describedBy: describedByIds.length > 0 ? describedByIds.join(' ') : void 0,
+        invalid,
+        labelId: labelChild ? labelId : void 0,
+        labelText: labelChildText
+    };
+    return /*#__PURE__*/ jsx(FieldContext.Provider, {
+        value: value,
+        children: /*#__PURE__*/ jsx("div", {
+            ...rest,
+            children: children
+        })
+    });
+};
+Field.displayName = 'Field';
+const FieldLabel = ({ required, htmlFor, id, children, ...rest })=>{
+    const context = useFieldContext();
+    const resolvedHtmlFor = false === htmlFor ? void 0 : htmlFor ?? context?.id;
+    return /*#__PURE__*/ jsxs("label", {
+        htmlFor: resolvedHtmlFor,
+        id: id ?? context?.labelId,
+        className: label,
+        ...rest,
+        children: [
+            children,
+            required ? /*#__PURE__*/ jsx("span", {
+                className: requiredMark,
+                "aria-hidden": "true",
+                children: "*"
+            }) : null
+        ]
+    });
+};
+FieldLabel.displayName = 'FieldLabel';
+const FieldControl = ({ children, ...rest })=>{
+    const context = useFieldContext();
+    return /*#__PURE__*/ jsx(Slot, {
+        id: context?.id,
+        "aria-describedby": context?.describedBy,
+        "aria-invalid": context?.invalid,
+        ...rest,
+        children: children
+    });
+};
+FieldControl.displayName = 'FieldControl';
+const FieldDescription = ({ id, ...rest })=>{
+    const context = useFieldContext();
+    return /*#__PURE__*/ jsx("p", {
+        id: id ?? context?.descriptionId,
+        className: descriptionText,
+        ...rest
+    });
+};
+FieldDescription.displayName = "FieldDescription";
+const FieldError = ({ id, ...rest })=>{
+    const context = useFieldContext();
+    return /*#__PURE__*/ jsx("p", {
+        id: id ?? context?.errorId,
+        className: errorText,
+        role: "alert",
+        ...rest
+    });
+};
+FieldError.displayName = 'FieldError';
+export { Field, FieldControl, FieldDescription, FieldError, FieldLabel, createRuntimeFn, fieldControl, fieldControlWithLeadingIcon, fieldControlWithTrailingIcon, fieldGroup, fieldIconButton, fieldIconLeading, fieldIconTrailing, useFieldContext, useResolvedFieldProps };

package/dist/esm/2692.js

@@ -0,0 +1,114 @@
+import "./2692.css";
+import { jsx } from "react/jsx-runtime";
+import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "@vinyasa/icons";
+import { createContext, useContext, useState } from "react";
+import { DayPicker } from "react-day-picker";
+import { fieldControl, useResolvedFieldProps } from "./2315.js";
+import * as __rspack_external__radix_ui_react_popover_e2827c9f from "@radix-ui/react-popover";
+var content = '_4znv390';
+var day = '_4znv39c';
+var dayButton = '_4znv39d';
+var disabled = '_4znv39g';
+var month = '_4znv397';
+var monthCaption = '_4znv398';
+var months = '_4znv396';
+var nav = '_4znv399';
+var navButton = '_4znv39a';
+var outside = '_4znv39f';
+var root = '_4znv395';
+var selected = '_4znv39h';
+var today = '_4znv39e';
+var trigger = '_4znv391';
+var triggerIcon = '_4znv394';
+var triggerText = '_4znv393';
+var weekday = '_4znv39b';
+const DatePickerOpenContext = /*#__PURE__*/ createContext(null);
+const DatePicker = ({ open, defaultOpen, onOpenChange, children, ...rest })=>{
+    const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+    const isControlled = void 0 !== open;
+    const currentOpen = isControlled ? open : internalOpen;
+    const handleOpenChange = (next)=>{
+        if (!isControlled) setInternalOpen(next);
+        onOpenChange?.(next);
+    };
+    return /*#__PURE__*/ jsx(DatePickerOpenContext.Provider, {
+        value: handleOpenChange,
+        children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Root, {
+            open: currentOpen,
+            onOpenChange: handleOpenChange,
+            ...rest,
+            children: children
+        })
+    });
+};
+DatePicker.displayName = 'DatePicker';
+const DatePickerTrigger = ({ invalid, size, id: idProp, className, ...rest })=>{
+    const { id, invalid: isInvalid, describedBy } = useResolvedFieldProps({
+        id: idProp,
+        invalid
+    });
+    const base = `${fieldControl({
+        size,
+        invalid: isInvalid
+    })} ${trigger}`;
+    return /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Trigger, {
+        id: id,
+        className: className ? `${base} ${className}` : base,
+        "aria-invalid": isInvalid,
+        "aria-describedby": describedBy,
+        ...rest
+    });
+};
+DatePickerTrigger.displayName = 'DatePickerTrigger';
+const DatePickerValue = ({ className, ...rest })=>/*#__PURE__*/ jsx("span", {
+        className: className ? `${triggerText} ${className}` : triggerText,
+        ...rest
+    });
+DatePickerValue.displayName = 'DatePickerValue';
+const DatePickerIcon = ({ className, children, ...rest })=>/*#__PURE__*/ jsx("span", {
+        className: className ? `${triggerIcon} ${className}` : triggerIcon,
+        "aria-hidden": "true",
+        ...rest,
+        children: children ?? /*#__PURE__*/ jsx(CalendarIcon, {})
+    });
+DatePickerIcon.displayName = 'DatePickerIcon';
+const DatePickerContent = ({ onSelect, ...rest })=>{
+    const setOpen = useContext(DatePickerOpenContext);
+    return /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Content, {
+        className: content,
+        align: "start",
+        sideOffset: 4,
+        onOpenAutoFocus: (event)=>{
+            event.preventDefault();
+        },
+        children: /*#__PURE__*/ jsx(DayPicker, {
+            mode: "single",
+            onSelect: (date, triggerDate, modifiers, event)=>{
+                onSelect?.(date, triggerDate, modifiers, event);
+                setOpen?.(false);
+            },
+            classNames: {
+                root: root,
+                months: months,
+                month: month,
+                month_caption: monthCaption,
+                nav: nav,
+                button_previous: navButton,
+                button_next: navButton,
+                weekday: weekday,
+                day: day,
+                day_button: dayButton,
+                today: today,
+                outside: outside,
+                disabled: disabled,
+                selected: selected
+            },
+            components: {
+                Chevron: ({ orientation })=>'left' === orientation ? /*#__PURE__*/ jsx(ChevronLeftIcon, {}) : /*#__PURE__*/ jsx(ChevronRightIcon, {})
+            },
+            ...rest
+        })
+    });
+};
+DatePickerContent.displayName = 'DatePickerContent';
+export { DatePicker, DatePickerContent, DatePickerIcon, DatePickerTrigger, DatePickerValue };

package/dist/esm/27.js

@@ -1,38 +1,34 @@
 import "./27.css";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import * as __rspack_external__radix_ui_react_slider_67d82a63 from "@radix-ui/react-slider";
 var range = '_1qawm8c2';
 var root = '_1qawm8c0';
 var thumb = '_1qawm8c3';
 var track = '_1qawm8c1';
-const Slider = /*#__PURE__*/ forwardRef(({ label = 'Value', value, defaultValue = [
+const Slider = /*#__PURE__*/ forwardRef(({ className, defaultValue = [
     0
-], className, ...rest }, ref)=>{
-    const thumbCount = (value ?? defaultValue).length;
-    const classes = className ? `${root} ${className}` : root;
-    return /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_slider_67d82a63.Root, {
+], ...rest }, ref)=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_slider_67d82a63.Root, {
         ref: ref,
-        className: classes,
-        value: value,
+        className: className ? `${root} ${className}` : root,
         defaultValue: defaultValue,
-        ...rest,
-        children: [
-            /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_slider_67d82a63.Track, {
-                className: track,
-                children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_slider_67d82a63.Range, {
-                    className: range
-                })
-            }),
-            Array.from({
-                length: thumbCount
-            }, (_, index)=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_slider_67d82a63.Thumb, {
-                    className: thumb,
-                    "aria-label": Array.isArray(label) ? label[index] : label
-                }, index))
-        ]
-    });
-});
+        ...rest
+    }));
 Slider.displayName = 'Slider';
-const slider_Slider = Slider;
-export { slider_Slider };
+const SliderTrack = ({ className, ...rest })=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_slider_67d82a63.Track, {
+        className: className ? `${track} ${className}` : track,
+        ...rest
+    });
+SliderTrack.displayName = 'SliderTrack';
+const SliderRange = ({ className, ...rest })=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_slider_67d82a63.Range, {
+        className: className ? `${range} ${className}` : range,
+        ...rest
+    });
+SliderRange.displayName = 'SliderRange';
+const SliderThumb = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref)=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_slider_67d82a63.Thumb, {
+        ref: ref,
+        className: className ? `${thumb} ${className}` : thumb,
+        ...rest
+    }));
+SliderThumb.displayName = 'SliderThumb';
+export { Slider, SliderRange, SliderThumb, SliderTrack };

package/dist/esm/345.js

@@ -0,0 +1,81 @@
+import { jsx } from "react/jsx-runtime";
+import { Command } from "cmdk";
+import { createContext, useContext, useState } from "react";
+import { useFieldContext, useResolvedFieldProps, fieldControl } from "./2315.js";
+import { content } from "./6720.js";
+import { ComboboxItem } from "./8479.js";
+import * as __rspack_external__radix_ui_react_popover_e2827c9f from "@radix-ui/react-popover";
+const AutocompleteOpenContext = /*#__PURE__*/ createContext(null);
+const Autocomplete = ({ children })=>{
+    const [open, setOpen] = useState(false);
+    const labelText = useFieldContext()?.labelText;
+    return /*#__PURE__*/ jsx(Command, {
+        loop: true,
+        shouldFilter: true,
+        label: labelText,
+        children: /*#__PURE__*/ jsx(AutocompleteOpenContext.Provider, {
+            value: setOpen,
+            children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Root, {
+                open: open,
+                onOpenChange: setOpen,
+                children: children
+            })
+        })
+    });
+};
+Autocomplete.displayName = 'Autocomplete';
+const AutocompleteInput = ({ invalid, size, className, onClick, onFocus, ...rest })=>{
+    const { invalid: isInvalid, describedBy } = useResolvedFieldProps({
+        invalid
+    });
+    const setOpen = useContext(AutocompleteOpenContext);
+    const classes = fieldControl({
+        size,
+        invalid: isInvalid
+    });
+    return /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Trigger, {
+        asChild: true,
+        children: /*#__PURE__*/ jsx(Command.Input, {
+            onClick: (event)=>{
+                event.preventDefault();
+                onClick?.(event);
+            },
+            onFocus: (event)=>{
+                setOpen?.(true);
+                onFocus?.(event);
+            },
+            "aria-invalid": isInvalid,
+            "aria-describedby": describedBy,
+            className: className ? `${classes} ${className}` : classes,
+            ...rest
+        })
+    });
+};
+AutocompleteInput.displayName = 'AutocompleteInput';
+const AutocompleteContent = ({ className, onOpenAutoFocus, onCloseAutoFocus, ...rest })=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Content, {
+        className: className ? `${content} ${className}` : content,
+        align: "start",
+        sideOffset: 4,
+        onOpenAutoFocus: (event)=>{
+            event.preventDefault();
+            onOpenAutoFocus?.(event);
+        },
+        onCloseAutoFocus: (event)=>{
+            event.preventDefault();
+            onCloseAutoFocus?.(event);
+        },
+        ...rest
+    });
+AutocompleteContent.displayName = 'AutocompleteContent';
+const AutocompleteItem = ({ onSelect, ...rest })=>{
+    const setOpen = useContext(AutocompleteOpenContext);
+    return /*#__PURE__*/ jsx(ComboboxItem, {
+        onSelect: (value)=>{
+            onSelect?.(value);
+            setOpen?.(false);
+        },
+        ...rest
+    });
+};
+AutocompleteItem.displayName = 'AutocompleteItem';
+export { Autocomplete, AutocompleteContent, AutocompleteInput, AutocompleteItem };

package/dist/esm/5074.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { XIcon } from "@vinyasa/icons";
+import { useFieldContext, useResolvedFieldProps, fieldControl } from "./2315.js";
+import { placeholder, chip, chipRow, chipOverflow, triggerBox, chipRemove } from "./6720.js";
+import * as __rspack_external__radix_ui_react_popover_e2827c9f from "@radix-ui/react-popover";
+const MultiSelect = __rspack_external__radix_ui_react_popover_e2827c9f.Root;
+const MultiSelectTrigger = ({ invalid, size, id: idProp, className, onKeyDown, ...rest })=>{
+    const { id, invalid: isInvalid, describedBy } = useResolvedFieldProps({
+        id: idProp,
+        invalid
+    });
+    const labelId = useFieldContext()?.labelId;
+    const base = `${fieldControl({
+        size,
+        invalid: isInvalid
+    })} ${triggerBox}`;
+    return /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Trigger, {
+        asChild: true,
+        children: /*#__PURE__*/ jsx("div", {
+            id: id,
+            role: "combobox",
+            "aria-labelledby": labelId,
+            "aria-invalid": isInvalid,
+            "aria-describedby": describedBy,
+            tabIndex: 0,
+            className: className ? `${base} ${className}` : base,
+            onKeyDown: (event)=>{
+                onKeyDown?.(event);
+                if ('Enter' === event.key || ' ' === event.key) {
+                    event.preventDefault();
+                    event.currentTarget.click();
+                }
+            },
+            ...rest
+        })
+    });
+};
+MultiSelectTrigger.displayName = 'MultiSelectTrigger';
+const MultiSelectPlaceholder = ({ className, ...rest })=>/*#__PURE__*/ jsx("span", {
+        className: className ? `${placeholder} ${className}` : placeholder,
+        ...rest
+    });
+MultiSelectPlaceholder.displayName = 'MultiSelectPlaceholder';
+const MultiSelectChipRow = ({ className, ...rest })=>/*#__PURE__*/ jsx("span", {
+        className: className ? `${chipRow} ${className}` : chipRow,
+        ...rest
+    });
+MultiSelectChipRow.displayName = 'MultiSelectChipRow';
+const MultiSelectChip = ({ className, ...rest })=>/*#__PURE__*/ jsx("span", {
+        className: className ? `${chip} ${className}` : chip,
+        ...rest
+    });
+MultiSelectChip.displayName = 'MultiSelectChip';
+const MultiSelectChipRemove = ({ className, children, type = 'button', ...rest })=>/*#__PURE__*/ jsx("button", {
+        type: type,
+        className: className ? `${chipRemove} ${className}` : chipRemove,
+        ...rest,
+        children: children ?? /*#__PURE__*/ jsx(XIcon, {})
+    });
+MultiSelectChipRemove.displayName = 'MultiSelectChipRemove';
+const MultiSelectChipOverflow = ({ className, ...rest })=>/*#__PURE__*/ jsx("span", {
+        className: className ? `${chipOverflow} ${className}` : chipOverflow,
+        ...rest
+    });
+MultiSelectChipOverflow.displayName = 'MultiSelectChipOverflow';
+export { MultiSelect, MultiSelectChip, MultiSelectChipOverflow, MultiSelectChipRemove, MultiSelectChipRow, MultiSelectPlaceholder, MultiSelectTrigger };

package/dist/esm/5333.js

@@ -0,0 +1,72 @@
+import "./5333.css";
+import { jsx } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon } from "@vinyasa/icons";
+import { fieldControl, useResolvedFieldProps } from "./2315.js";
+import * as __rspack_external__radix_ui_react_select_36a82244 from "@radix-ui/react-select";
+var content = '_1lum7te4';
+var icon = '_1lum7te3';
+var item = '_1lum7te6';
+var itemIndicator = '_1lum7te7';
+var Select_css_placeholder = '_1lum7te1';
+var trigger = '_1lum7te0';
+var triggerText = '_1lum7te2';
+var viewport = '_1lum7te5';
+const Select = __rspack_external__radix_ui_react_select_36a82244.Root;
+const SelectTrigger = ({ invalid, size, id: idProp, className, ...rest })=>{
+    const { id, invalid: isInvalid, describedBy } = useResolvedFieldProps({
+        id: idProp,
+        invalid
+    });
+    const base = `${fieldControl({
+        size,
+        invalid: isInvalid
+    })} ${trigger}`;
+    return /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Trigger, {
+        id: id,
+        className: className ? `${base} ${className}` : base,
+        "aria-describedby": describedBy,
+        "aria-invalid": isInvalid,
+        ...rest
+    });
+};
+SelectTrigger.displayName = 'SelectTrigger';
+const SelectValue = ({ className, placeholder, ...rest })=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Value, {
+        className: className ? `${triggerText} ${className}` : triggerText,
+        placeholder: /*#__PURE__*/ jsx("span", {
+            className: Select_css_placeholder,
+            children: placeholder
+        }),
+        ...rest
+    });
+SelectValue.displayName = 'SelectValue';
+const SelectIcon = ({ className, children, ...rest })=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Icon, {
+        className: className ? `${icon} ${className}` : icon,
+        ...rest,
+        children: children ?? /*#__PURE__*/ jsx(ChevronDownIcon, {})
+    });
+SelectIcon.displayName = 'SelectIcon';
+const SelectContent = ({ className, ...rest })=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Content, {
+        className: className ? `${content} ${className}` : content,
+        position: "popper",
+        sideOffset: 4,
+        ...rest
+    });
+SelectContent.displayName = 'SelectContent';
+const SelectViewport = ({ className, ...rest })=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Viewport, {
+        className: className ? `${viewport} ${className}` : viewport,
+        ...rest
+    });
+SelectViewport.displayName = 'SelectViewport';
+const SelectItem = ({ className, ...rest })=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Item, {
+        className: className ? `${item} ${className}` : item,
+        ...rest
+    });
+SelectItem.displayName = 'SelectItem';
+const SelectItemText = __rspack_external__radix_ui_react_select_36a82244.ItemText;
+const SelectItemIndicator = ({ className, children, ...rest })=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.ItemIndicator, {
+        className: className ? `${itemIndicator} ${className}` : itemIndicator,
+        ...rest,
+        children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
+    });
+SelectItemIndicator.displayName = 'SelectItemIndicator';
+export { Select, SelectContent, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger, SelectValue, SelectViewport };