@parrot-co/parrot-ui 0.1.7 → 0.1.8

package/dist/module.js

@@ -1,9 +1,11 @@
 import {jsx as $hgUW1$jsx, jsxs as $hgUW1$jsxs} from "react/jsx-runtime";
 import $hgUW1$react, {forwardRef as $hgUW1$forwardRef, createContext as $hgUW1$createContext, Children as $hgUW1$Children, useMemo as $hgUW1$useMemo, isValidElement as $hgUW1$isValidElement, useContext as $hgUW1$useContext, useRef as $hgUW1$useRef, cloneElement as $hgUW1$cloneElement, createElement as $hgUW1$createElement, useState as $hgUW1$useState, useEffect as $hgUW1$useEffect, useCallback as $hgUW1$useCallback} from "react";
-import {useTextField as $hgUW1$useTextField, useLocale as $hgUW1$useLocale, useNumberField as $hgUW1$useNumberField, useToggleButton as $hgUW1$useToggleButton, useButton as $hgUW1$useButton, useCheckbox as $hgUW1$useCheckbox, useCheckboxGroupItem as $hgUW1$useCheckboxGroupItem, useFocusRing as $hgUW1$useFocusRing, VisuallyHidden as $hgUW1$VisuallyHidden, useCheckboxGroup as $hgUW1$useCheckboxGroup, useMenuTrigger as $hgUW1$useMenuTrigger, usePress as $hgUW1$usePress, mergeProps as $hgUW1$mergeProps, useMenu as $hgUW1$useMenu, useMenuItem as $hgUW1$useMenuItem, useMenuSection as $hgUW1$useMenuSection, useSeparator as $hgUW1$useSeparator, usePopover as $hgUW1$usePopover, Overlay as $hgUW1$Overlay, useFilter as $hgUW1$useFilter, useComboBox as $hgUW1$useComboBox, useListBox as $hgUW1$useListBox, useOption as $hgUW1$useOption, useListBoxSection as $hgUW1$useListBoxSection, useRadio as $hgUW1$useRadio, useRadioGroup as $hgUW1$useRadioGroup, useDatePicker as $hgUW1$useDatePicker, useDateField as $hgUW1$useDateField, useDateSegment as $hgUW1$useDateSegment, useCalendar as $hgUW1$useCalendar, useCalendarGrid as $hgUW1$useCalendarGrid, useCalendarCell as $hgUW1$useCalendarCell, useDrop as $hgUW1$useDrop, useProgressBar as $hgUW1$useProgressBar, useHover as $hgUW1$useHover, useSwitch as $hgUW1$useSwitch, useTabList as $hgUW1$useTabList, useTab as $hgUW1$useTab, useTabPanel as $hgUW1$useTabPanel, useModalOverlay as $hgUW1$useModalOverlay, useDialog as $hgUW1$useDialog, useOverlayTrigger as $hgUW1$useOverlayTrigger, useTag as $hgUW1$useTag, useTagGroup as $hgUW1$useTagGroup} from "react-aria";
-import {HiMinus as $hgUW1$HiMinus, HiPlus as $hgUW1$HiPlus, HiEye as $hgUW1$HiEye, HiCheck as $hgUW1$HiCheck, HiSelector as $hgUW1$HiSelector, HiX as $hgUW1$HiX, HiOutlineCalendar as $hgUW1$HiOutlineCalendar, HiChevronLeft as $hgUW1$HiChevronLeft, HiChevronRight as $hgUW1$HiChevronRight, HiOutlineDocumentAdd as $hgUW1$HiOutlineDocumentAdd, HiOutlineCheckCircle as $hgUW1$HiOutlineCheckCircle, HiOutlineTrash as $hgUW1$HiOutlineTrash, HiOutlineExclamationCircle as $hgUW1$HiOutlineExclamationCircle, HiOutlineRefresh as $hgUW1$HiOutlineRefresh, HiOutlinePaperClip as $hgUW1$HiOutlinePaperClip} from "react-icons/hi";
-import {useNumberFieldState as $hgUW1$useNumberFieldState, useToggleState as $hgUW1$useToggleState, useCheckboxGroupState as $hgUW1$useCheckboxGroupState, useMenuTriggerState as $hgUW1$useMenuTriggerState, useTreeState as $hgUW1$useTreeState, Item as $hgUW1$Item, Section as $hgUW1$Section, useComboBoxState as $hgUW1$useComboBoxState, useListState as $hgUW1$useListState, useRadioGroupState as $hgUW1$useRadioGroupState, useDatePickerState as $hgUW1$useDatePickerState, useDateFieldState as $hgUW1$useDateFieldState, useCalendarState as $hgUW1$useCalendarState, useTabListState as $hgUW1$useTabListState, useOverlayTriggerState as $hgUW1$useOverlayTriggerState} from "react-stately";
+import {useTextField as $hgUW1$useTextField, useLocale as $hgUW1$useLocale, useNumberField as $hgUW1$useNumberField, useToggleButton as $hgUW1$useToggleButton, useButton as $hgUW1$useButton, useCheckbox as $hgUW1$useCheckbox, useCheckboxGroupItem as $hgUW1$useCheckboxGroupItem, useFocusRing as $hgUW1$useFocusRing, VisuallyHidden as $hgUW1$VisuallyHidden, useCheckboxGroup as $hgUW1$useCheckboxGroup, useMenuTrigger as $hgUW1$useMenuTrigger, usePress as $hgUW1$usePress, mergeProps as $hgUW1$mergeProps, useMenu as $hgUW1$useMenu, useMenuItem as $hgUW1$useMenuItem, useMenuSection as $hgUW1$useMenuSection, useSeparator as $hgUW1$useSeparator, usePopover as $hgUW1$usePopover, Overlay as $hgUW1$Overlay, useFilter as $hgUW1$useFilter, useComboBox as $hgUW1$useComboBox, useListBox as $hgUW1$useListBox, useOption as $hgUW1$useOption, useListBoxSection as $hgUW1$useListBoxSection, useRadio as $hgUW1$useRadio, useRadioGroup as $hgUW1$useRadioGroup, useDatePicker as $hgUW1$useDatePicker, useDateField as $hgUW1$useDateField, useDateSegment as $hgUW1$useDateSegment, useCalendar as $hgUW1$useCalendar, useCalendarGrid as $hgUW1$useCalendarGrid, useCalendarCell as $hgUW1$useCalendarCell, useDrop as $hgUW1$useDrop, useProgressBar as $hgUW1$useProgressBar, useHover as $hgUW1$useHover, useSwitch as $hgUW1$useSwitch, useNumberFormatter as $hgUW1$useNumberFormatter, useSlider as $hgUW1$useSlider, useSliderThumb as $hgUW1$useSliderThumb, useTabList as $hgUW1$useTabList, useTab as $hgUW1$useTab, useTabPanel as $hgUW1$useTabPanel, useModalOverlay as $hgUW1$useModalOverlay, useDialog as $hgUW1$useDialog, useOverlayTrigger as $hgUW1$useOverlayTrigger, useTag as $hgUW1$useTag, useTagGroup as $hgUW1$useTagGroup} from "react-aria";
+import {useNumberFieldState as $hgUW1$useNumberFieldState, useToggleState as $hgUW1$useToggleState, useCheckboxGroupState as $hgUW1$useCheckboxGroupState, useMenuTriggerState as $hgUW1$useMenuTriggerState, useTreeState as $hgUW1$useTreeState, Item as $hgUW1$Item, Section as $hgUW1$Section, useComboBoxState as $hgUW1$useComboBoxState, useListState as $hgUW1$useListState, useRadioGroupState as $hgUW1$useRadioGroupState, useDatePickerState as $hgUW1$useDatePickerState, useDateFieldState as $hgUW1$useDateFieldState, useCalendarState as $hgUW1$useCalendarState, useSliderState as $hgUW1$useSliderState, useTabListState as $hgUW1$useTabListState, useOverlayTriggerState as $hgUW1$useOverlayTriggerState} from "react-stately";
+import {HiEye as $hgUW1$HiEye, HiCheck as $hgUW1$HiCheck, HiSelector as $hgUW1$HiSelector, HiOutlineCalendar as $hgUW1$HiOutlineCalendar, HiChevronLeft as $hgUW1$HiChevronLeft, HiChevronRight as $hgUW1$HiChevronRight, HiOutlineDocumentAdd as $hgUW1$HiOutlineDocumentAdd, HiOutlineCheckCircle as $hgUW1$HiOutlineCheckCircle, HiOutlineTrash as $hgUW1$HiOutlineTrash, HiOutlineExclamationCircle as $hgUW1$HiOutlineExclamationCircle, HiOutlineRefresh as $hgUW1$HiOutlineRefresh, HiOutlinePaperClip as $hgUW1$HiOutlinePaperClip, HiX as $hgUW1$HiX} from "react-icons/hi";
 import {parseDate as $hgUW1$parseDate, GregorianCalendar as $hgUW1$GregorianCalendar, createCalendar as $hgUW1$createCalendar, endOfMonth as $hgUW1$endOfMonth, getWeeksInMonth as $hgUW1$getWeeksInMonth, isSameMonth as $hgUW1$isSameMonth} from "@internationalized/date";
+import {parseColor as $hgUW1$parseColor, useColorAreaState as $hgUW1$useColorAreaState, useColorFieldState as $hgUW1$useColorFieldState, useColorSliderState as $hgUW1$useColorSliderState} from "@react-stately/color";
+import {useColorArea as $hgUW1$useColorArea, useColorField as $hgUW1$useColorField, useColorSwatch as $hgUW1$useColorSwatch, useColorSlider as $hgUW1$useColorSlider} from "@react-aria/color";
 
 
 
@@ -108,6 +110,7 @@ const $ee0105641360f1c1$export$e71c4d32a2263218 = /*#__PURE__*/ $hgUW1$forwardRe
 
 
 
+
 const $074ec3363f6c932f$export$36308cce1deef340 = [
     "tomato",
     "red",
@@ -149,6 +152,9 @@ function $074ec3363f6c932f$var$ps(styles) {
 }
 
 
+function $0ad0bc75b5eb16a6$export$1c4d39b152e0f791(deprecatedProp, newProp, value) {
+    if (!(0, $0f90ef71a188bc45$export$ae45edb09e2fe7c2)(value)) console.warn(`${deprecatedProp} is deprecated and will be removed in a future release. ${newProp ? `Please use ${newProp} instead.` : ""}`);
+}
 function $0ad0bc75b5eb16a6$export$d41d9ab3de2def3d(text) {
     const str = String(text);
     let hash = 0;
@@ -245,6 +251,9 @@ const $e2f278d76a00796a$export$f51f4c4ede09e011 = /*#__PURE__*/ $hgUW1$forwardRe
 
 
 
+
+
+
 const $3157c40f7d0e6fa2$export$f5a10939c0132d55 = (props, ref)=>{
     const { textCase: textCase, size: size = "sm", weight: weight, color: color = "gray", variant: variant = "default", highlight: highlight, align: align, lineHeight: lineHeight, underline: underline, italic: italic, as: Comp = "span", className: className, ...rest } = props;
     return /*#__PURE__*/ (0, $hgUW1$jsx)(Comp, {
@@ -271,6 +280,7 @@ const $3157c40f7d0e6fa2$export$5f1af8db9871e1d6 = /*#__PURE__*/ $hgUW1$forwardRe
 
 const $eea734bbd8b9efff$var$InputLabel = /*#__PURE__*/ (0, $hgUW1$react).forwardRef(({ children: children, className: className, color: color, ...props }, ref)=>{
     return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $3157c40f7d0e6fa2$export$5f1af8db9871e1d6), {
+        ref: ref,
         size: "sm",
         color: color || "gray",
         variant: "light",
@@ -321,7 +331,7 @@ const $41cc567ab0625f8f$var$SpaceContext = /*#__PURE__*/ $hgUW1$createContext({
     classNames: {},
     compactItemWrapperAdjust: ""
 });
-function $41cc567ab0625f8f$var$SpaceComponent({ children: children, compact: compact, gap: gap, className: className, ...props }, ref) {
+function $41cc567ab0625f8f$export$eef1e68107c58ef2({ children: children, compact: compact, gap: gap, className: className, classNames: classNames, style: style, styles: styles, ...props }) {
     const childrenCount = $hgUW1$Children.count(children);
     const nodes = $hgUW1$useMemo(()=>{
         return $hgUW1$Children.map(children, (child, index)=>{
@@ -343,20 +353,22 @@ function $41cc567ab0625f8f$var$SpaceComponent({ children: children, compact: com
     }, [
         children
     ]);
-    const realGap = compact ? "none" : gap;
     return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
         "data-compact": compact,
+        style: {
+            ...style,
+            ...styles?.wrapper
+        },
         className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
             className,
-            "p-space"
+            "p-space",
+            classNames?.wrapper
         ]),
-        ref: ref,
-        gap: realGap,
+        gap: gap ?? "none",
         ...props,
         children: nodes
     });
 }
-const $41cc567ab0625f8f$export$eef1e68107c58ef2 = /*#__PURE__*/ $hgUW1$forwardRef($41cc567ab0625f8f$var$SpaceComponent);
 function $41cc567ab0625f8f$export$450c36e0b0e62ccd() {
     return $hgUW1$useContext($41cc567ab0625f8f$var$SpaceContext);
 }
@@ -393,37 +405,35 @@ function $5fc28f26e128d5c0$export$93d4e7f90805808f(options) {
 
 
 
-const $ef10b8551376ecd8$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $hgUW1$react).forwardRef(({ label: label, error: error, color: color = "gray", appearance: appearance = "outline", size: size = "sm", append: append, prepend: prepend, description: description, isDisabled: isDisabled, validationStatus: validationStatus, className: className, inputRef: inputRef, radius: radius, style: style, ...props }, ref)=>{
+function $095d89378519ff08$export$a455218a85c89869({ label: label, description: description, error: error, color: color = "gray", radius: radius, size: size = "md", className: className, classNames: classNames, style: style, styles: styles, prepend: prepend, append: append, appearance: appearance = "outline", validationStatus: validationStatus, labelProps: labelProps, errorMessageProps: errorMessageProps, descriptionProps: descriptionProps, children: children, replaceDefaultControlWrapper: replaceDefaultControlWrapper, isDisabled: isDisabled, wrapperRef: wrapperRef, ...props }) {
     const space = (0, $41cc567ab0625f8f$export$450c36e0b0e62ccd)();
-    const internalInputRef = (0, $hgUW1$react).useRef(null);
-    const { labelProps: labelProps, inputProps: inputProps, errorMessageProps: errorMessageProps, descriptionProps: descriptionProps } = (0, $hgUW1$useTextField)({
-        ...props,
-        inputElementType: "input",
-        label: label,
-        description: description,
-        isDisabled: isDisabled
-    }, internalInputRef);
     const theme = (0, $5fc28f26e128d5c0$export$93d4e7f90805808f)();
     return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
+        ref: wrapperRef,
+        ...props,
         "data-color": color,
         "data-radius": radius ?? theme?.radius ?? "lg",
         "data-size": size,
-        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-input-group", space.compactItemWrapperAdjust, className),
+        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-input-group", space.compactItemWrapperAdjust, className, classNames?.wrapper),
         stack: true,
-        ref: ref,
         gap: "3xs",
-        stretchX: true,
-        style: style,
+        style: {
+            ...style,
+            ...styles?.wrapper
+        },
         children: [
             label && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $eea734bbd8b9efff$export$2e2bcd8739ae039), {
+                style: styles?.label,
+                className: classNames?.label,
                 color: color,
                 ...labelProps,
                 children: label
             }),
-            /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
+            !replaceDefaultControlWrapper && /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
                 className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)(space.classNames, "p-input-control"),
                 "data-has-error": !!error,
                 "data-appearance": appearance,
+                "data-disabled": isDisabled,
                 stretchX: true,
                 inline: true,
                 position: "relative",
@@ -432,19 +442,14 @@ const $ef10b8551376ecd8$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $hgUW1$react
                         className: "add-on add-on-left",
                         children: prepend
                     }),
-                    /*#__PURE__*/ (0, $hgUW1$jsx)("input", {
-                        ref: (0, $cce662c1d2ec881b$export$c9058316764c140e)(internalInputRef, inputRef),
-                        "data-has-left-addon": !!prepend,
-                        "data-has-right-addon": !!append,
-                        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-text-input-el"),
-                        ...inputProps
-                    }),
+                    children,
                     append && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
                         className: "add-on add-on-right",
                         children: append
                     })
                 ]
             }),
+            replaceDefaultControlWrapper && children,
             error && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $9e021ab4f609c8de$export$2e2bcd8739ae039), {
                 validationStatus: validationStatus,
                 ...errorMessageProps,
@@ -455,13 +460,40 @@ const $ef10b8551376ecd8$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $hgUW1$react
                 variant: "light",
                 color: "gray",
                 size: "sm",
-                lineHeight: "base",
+                lineHeight: "short",
                 ...descriptionProps,
                 children: description
             })
         ]
     });
-});
+}
+$095d89378519ff08$export$a455218a85c89869.displayName = "Field";
+
+
+function $ef10b8551376ecd8$export$f5b8910cec6cf069({ className: className, classNames: classNames, style: style, styles: styles, inputRef: inputRef, ...props }) {
+    const internalInputRef = (0, $hgUW1$react).useRef(null);
+    const { labelProps: labelProps, inputProps: inputProps, errorMessageProps: errorMessageProps, descriptionProps: descriptionProps } = (0, $hgUW1$useTextField)({
+        ...props,
+        inputElementType: "input"
+    }, internalInputRef);
+    return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $095d89378519ff08$export$a455218a85c89869), {
+        labelProps: labelProps,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        className: className,
+        classNames: classNames,
+        styles: styles,
+        style: style,
+        ...props,
+        children: /*#__PURE__*/ (0, $hgUW1$jsx)("input", {
+            ref: (0, $cce662c1d2ec881b$export$c9058316764c140e)(internalInputRef, inputRef),
+            "data-has-left-addon": !!props.prepend,
+            "data-has-right-addon": !!props.append,
+            className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-text-input-el"),
+            ...inputProps
+        })
+    });
+}
 $ef10b8551376ecd8$export$f5b8910cec6cf069.displayName = "Input";
 
 
@@ -590,7 +622,7 @@ const $d95a2216d3ccf702$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $hgUW1$react
     const space = (0, $41cc567ab0625f8f$export$450c36e0b0e62ccd)();
     const buttonGroupProps = (0, $9230e224c5c26d9c$export$749e21be8b14b968)();
     const theme = (0, $5fc28f26e128d5c0$export$93d4e7f90805808f)();
-    const { color: color = theme?.color ?? "violet", variant: variant = "solid", append: append, prepend: prepend, size: size = "md", children: children, as: as = "button", className: className, isLoading: isLoading, radius: radius = "full", isToggle: isToggle, activeColor: activeColor = theme?.color, activeVariant: activeVariant = "solid", idleColor: idleColor = "gray", idleVariant: idleVariant = "outline", isIconButton: isIconButton, style: style, ...otherProps } = {
+    const { color: color = theme?.color ?? "violet", variant: variant = "solid", append: append, prepend: prepend, size: size = "md", children: children, as: as = "button", className: className, isLoading: isLoading, radius: radius = "full", isToggle: isToggle, activeColor: activeColor = theme?.color, activeVariant: activeVariant = "solid", idleColor: idleColor = "gray", idleVariant: idleVariant = "outline", isIconButton: isIconButton, style: style, classNames: classNames, styles: styles, form: form, ...otherProps } = {
         ...buttonGroupProps,
         ...props
     };
@@ -621,7 +653,10 @@ const $d95a2216d3ccf702$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $hgUW1$react
     }
     const Comp = as;
     return /*#__PURE__*/ (0, $hgUW1$jsxs)(Comp, {
-        style: style,
+        style: {
+            ...style,
+            ...styles?.base
+        },
         "data-is-toggle": isToggle,
         "data-pressed": isPressed,
         "data-radius": radius,
@@ -633,20 +668,19 @@ const $d95a2216d3ccf702$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $hgUW1$react
         "data-selected": state.isSelected,
         className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)((0, $0ad0bc75b5eb16a6$export$2db1d02db18b2d82)("size", size), className, "p-button", space.classNames),
         ref: (0, $cce662c1d2ec881b$export$c9058316764c140e)(ref, buttonRef),
-        form: otherProps.form,
+        form: form,
         ...buttonProps,
         children: [
             prepend,
-            /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
-                style: {
-                    padding: isIconButton ? undefined : "0 6px",
-                    lineHeight: 0
-                },
-                children: children
-            }),
+            children,
             isLoading ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e1148cdb3a130657$export$3b0d6d7590275603), {
+                className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
+                    "p-button-loader",
+                    classNames?.loader
+                ]),
                 style: {
-                    marginLeft: 8
+                    marginLeft: 8,
+                    ...styles?.loader
                 },
                 color: "inherit",
                 size: "xs"
@@ -680,88 +714,73 @@ $e3f71af5eaf1c216$export$c25acd513dcc8062.displayName = "IconButton";
 
 
 
-
-
-
-
-const $2e89c7375b40283e$export$6bf0cd3a219bbade = /*#__PURE__*/ $hgUW1$forwardRef((props, ref)=>{
-    const { appearance: appearance = "outline", size: size = "md", color: color = "gray", className: className, append: append, prepend: prepend, placeholder: placeholder, showSteppers: showSteppers = false, radius: radius, ...rest } = props;
+function $2e89c7375b40283e$export$6bf0cd3a219bbade({ appearance: appearance = "outline", size: size = "md", color: color = "gray", classNames: classNames, styles: styles, append: append, prepend: prepend, placeholder: placeholder, showSteppers: showSteppers = false, error: error, label: label, minValue: minValue, maxValue: maxValue, formatOptions: formatOptions, inputRef: inputRef, incrementIcon: incrementIcon, decrementIcon: decrementIcon, ...props }) {
+    const ariaProps = {
+        ...props,
+        maxValue: maxValue,
+        formatOptions: formatOptions,
+        minValue: minValue,
+        "aria-label": props["aria-label"] ?? "number input"
+    };
     const space = (0, $41cc567ab0625f8f$export$450c36e0b0e62ccd)();
     const internalInputRef = $hgUW1$useRef(null);
     const { locale: locale } = (0, $hgUW1$useLocale)();
     const state = (0, $hgUW1$useNumberFieldState)({
-        ...rest,
+        ...ariaProps,
         locale: locale
     });
-    const { errorMessageProps: errorMessageProps, descriptionProps: descriptionProps, labelProps: labelProps, groupProps: groupProps, inputProps: inputProps, incrementButtonProps: incrementButtonProps, decrementButtonProps: decrementButtonProps } = (0, $hgUW1$useNumberField)(rest, state, internalInputRef);
-    const theme = (0, $5fc28f26e128d5c0$export$93d4e7f90805808f)();
-    return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
-        stack: true,
-        gap: "3xs",
-        ref: ref,
-        "data-radius": radius ?? theme?.radius ?? "lg",
-        "data-color": color,
-        "data-size": size,
-        stretchX: true,
-        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-input-group", space.compactItemWrapperAdjust),
-        children: [
-            rest.label && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $eea734bbd8b9efff$export$2e2bcd8739ae039), {
-                ...labelProps,
-                children: rest.label
-            }),
-            /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
-                gap: "4xs",
-                ...groupProps,
-                className: "p-input-container",
-                children: [
-                    showSteppers && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e3f71af5eaf1c216$export$c25acd513dcc8062), {
-                        ...decrementButtonProps,
-                        radius: "md",
-                        color: color,
-                        variant: "outline",
-                        size: size,
-                        children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$HiMinus), {
-                            size: 20
-                        })
-                    }),
-                    /*#__PURE__*/ (0, $hgUW1$jsx)("input", {
-                        ref: (0, $cce662c1d2ec881b$export$c9058316764c140e)(internalInputRef, ref),
-                        placeholder: placeholder,
-                        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-input-control", "space-item", className, space.classNames),
-                        "data-appearance": appearance,
-                        "data-has-left-addon": !!prepend,
-                        "data-has-right-addon": !!append,
-                        type: "text",
-                        ...inputProps
-                    }),
-                    showSteppers && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e3f71af5eaf1c216$export$c25acd513dcc8062), {
-                        ...incrementButtonProps,
-                        radius: "md",
-                        color: color,
-                        variant: "outline",
-                        size: size,
-                        children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$HiPlus), {})
-                    })
-                ]
-            }),
-            rest.description && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $3157c40f7d0e6fa2$export$5f1af8db9871e1d6), {
-                weight: "regular",
-                size: "sm",
-                color: "gray",
-                variant: "light",
-                lineHeight: "base",
-                ...descriptionProps,
-                as: "div",
-                children: rest.description
-            }),
-            rest.error && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $9e021ab4f609c8de$export$2e2bcd8739ae039), {
-                ...errorMessageProps,
-                children: rest.error
-            })
-        ]
+    const { errorMessageProps: errorMessageProps, descriptionProps: descriptionProps, labelProps: labelProps, groupProps: groupProps, inputProps: inputProps, incrementButtonProps: incrementButtonProps, decrementButtonProps: decrementButtonProps } = (0, $hgUW1$useNumberField)(ariaProps, state, internalInputRef);
+    return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $095d89378519ff08$export$a455218a85c89869), {
+        classNames: classNames,
+        color: color,
+        size: size,
+        labelProps: labelProps,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        error: error,
+        label: label,
+        replaceDefaultControlWrapper: true,
+        ...props,
+        children: /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
+            gap: "4xs",
+            ...groupProps,
+            className: "p-input-container",
+            children: [
+                showSteppers && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e3f71af5eaf1c216$export$c25acd513dcc8062), {
+                    ...decrementButtonProps,
+                    radius: "md",
+                    color: color,
+                    variant: "outline",
+                    size: size,
+                    className: classNames?.decrement,
+                    style: styles?.decrement,
+                    children: decrementIcon
+                }),
+                /*#__PURE__*/ (0, $hgUW1$jsx)("input", {
+                    style: styles?.input,
+                    ref: (0, $cce662c1d2ec881b$export$c9058316764c140e)(internalInputRef, inputRef),
+                    placeholder: placeholder,
+                    className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)(classNames?.input, "p-input-control", "space-item", space.classNames),
+                    "data-appearance": appearance,
+                    "data-has-left-addon": !!prepend,
+                    "data-has-right-addon": !!append,
+                    type: "text",
+                    ...inputProps
+                }),
+                showSteppers && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e3f71af5eaf1c216$export$c25acd513dcc8062), {
+                    ...incrementButtonProps,
+                    radius: "md",
+                    color: color,
+                    variant: "outline",
+                    size: size,
+                    className: classNames?.increment,
+                    style: styles?.increment,
+                    children: incrementIcon
+                })
+            ]
+        })
     });
-});
-$2e89c7375b40283e$export$6bf0cd3a219bbade.displayName = "NumberInput";
+}
 
 
 
@@ -911,7 +930,7 @@ $1ab2e355b7aa4310$export$4aa08d5625cb8ead.displayName = "CheckboxGroup";
 
 
 const $0ca204e719955216$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, $hgUW1$react).forwardRef((props, ref)=>{
-    const { appearance: appearance, size: size, shape: shape = "round", color: color, className: className, ...otherProps } = props;
+    const { appearance: appearance, size: size, shape: shape = "round", color: color, className: className, classNames: classNames, styles: styles, style: style, ...otherProps } = props;
     // check if checkbox is rendered in a group context
     const groupContext = (0, $hgUW1$react).useContext((0, $1ab2e355b7aa4310$export$f9c6924e160136d1));
     const groupState = groupContext?.state;
@@ -935,7 +954,11 @@ const $0ca204e719955216$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, $hgUW1$react
     const resolvedAppearance = appearance || groupProps?.appearance || "outline";
     const resolvedSize = size || groupProps?.size || "md";
     return /*#__PURE__*/ (0, $hgUW1$jsxs)("label", {
-        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)(className, "p-checkbox"),
+        style: {
+            ...style,
+            ...styles?.wrapper
+        },
+        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)(className, "p-checkbox", classNames?.wrapper),
         "data-disabled": inputProps?.disabled,
         ref: ref,
         children: [
@@ -948,9 +971,16 @@ const $0ca204e719955216$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, $hgUW1$react
                 })
             }),
             /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+                style: {
+                    ...style,
+                    ...styles?.checkbox
+                },
                 "data-color": resolvedColor,
                 "data-radius": getRadius(),
-                className: "p-fake-checkbox",
+                className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
+                    "p-fake-checkbox",
+                    classNames?.checkbox
+                ]),
                 "data-focused": isFocusVisible,
                 "aria-hidden": "true",
                 "data-checked": isSelected && !props.isIndeterminate,
@@ -959,6 +989,10 @@ const $0ca204e719955216$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, $hgUW1$react
                 "data-appearance": resolvedAppearance,
                 children: [
                     isSelected && !props.isIndeterminate && /*#__PURE__*/ (0, $hgUW1$jsx)("svg", {
+                        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
+                            "p-checkbox-icon",
+                            classNames?.icon
+                        ]),
                         stroke: "white",
                         width: "0.75rem",
                         height: "0.75rem",
@@ -975,6 +1009,10 @@ const $0ca204e719955216$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, $hgUW1$react
                         })
                     }),
                     props.isIndeterminate && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $ee0105641360f1c1$export$e71c4d32a2263218), {
+                        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
+                            "p-checkbox-icon",
+                            classNames?.icon
+                        ]),
                         style: {
                             background: "var(--color-12)",
                             width: "70%",
@@ -1005,25 +1043,39 @@ $0ca204e719955216$export$48513f6b9f8ce62d.displayName = "checkbox";
 
 
 
-function $fc3eb9661261e42e$export$91527519cfe8e396({ state: state, children: children, popoverRef: popoverRef, ...props }) {
+function $fc3eb9661261e42e$export$91527519cfe8e396({ state: state, children: children, popoverRef: popoverRef, style: style, styles: styles, classNames: classNames, className: className, ...props }) {
     const internalPopoverRef = $hgUW1$useRef(null);
     const theme = (0, $5fc28f26e128d5c0$export$93d4e7f90805808f)();
     const { popoverProps: popoverProps, underlayProps: underlayProps } = (0, $hgUW1$usePopover)({
         ...props,
         popoverRef: internalPopoverRef
     }, state);
+    const { style: internalStyle, ...otherPopoverProps } = popoverProps;
     return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Overlay), {
         children: [
             /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                 ...underlayProps,
-                className: "underlay"
+                style: styles?.underlay,
+                className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
+                    "underlay",
+                    classNames?.underlay
+                ])
             }),
             /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                 "data-color": theme?.color,
                 "data-radius": theme?.radius,
-                ...popoverProps,
                 ref: (0, $cce662c1d2ec881b$export$c9058316764c140e)(popoverRef, internalPopoverRef),
-                className: "p-popover",
+                className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
+                    "p-popover",
+                    className,
+                    classNames?.wrapper
+                ]),
+                style: {
+                    ...internalStyle,
+                    ...style,
+                    ...styles?.wrapper
+                },
+                ...otherPopoverProps,
                 children: children
             })
         ]
@@ -1277,30 +1329,38 @@ const $3ba60d401cc6cc09$export$e44a253a59704894 = {
 
 
 
-function $b71fd84ba612e4b0$export$3d7d0414f6db67e7({ children: children, renderOption: renderOption, valueKey: valueKey, sectionKey: sectionKey, getSectionLabel: getSectionLabel, labelKey: labelKey, items: items }) {
+const $c35269c9504bc94d$export$5b7f4051a57920d0 = (0, $hgUW1$Item);
+const $c35269c9504bc94d$export$ef146090a6472d9e = (0, $hgUW1$Section);
+
+
+function $b71fd84ba612e4b0$export$3d7d0414f6db67e7({ children: children, renderOption: renderOption, valueKey: valueKey, sectionKey: sectionKey, renderSectionLabel: renderSectionLabel, labelKey: labelKey, items: items }) {
     const hasChildren = $hgUW1$Children.count(children) > 0;
     if (hasChildren) return children;
     if (items) // eslint-disable-next-line react/display-name
     return (item)=>{
         const label = item?.[labelKey ?? "label"];
-        const value = item?.[valueKey ?? "id"];
+        const value = item?.[valueKey ?? "id" ?? "key" ?? "value"];
         const sectionChildren = item?.[sectionKey ?? "children"] ?? [];
-        if (item?.[sectionKey]) return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $6ae005878b435ce8$export$6e2c8f0811a474ce), {
+        if (item?.[sectionKey]) return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $c35269c9504bc94d$export$ef146090a6472d9e), {
             items: sectionChildren,
-            title: getSectionLabel?.(item),
-            children: (item)=>/*#__PURE__*/ (0, $hgUW1$jsx)((0, $6ae005878b435ce8$export$36d18380658d5d20), {
+            title: renderSectionLabel?.(item),
+            children: (item)=>/*#__PURE__*/ (0, $hgUW1$jsx)((0, $c35269c9504bc94d$export$5b7f4051a57920d0), {
                     textValue: item?.[labelKey ?? "label"],
-                    children: item?.[labelKey ?? "label"] ?? renderOption?.(item)
-                }, item?.[valueKey ?? "id"])
+                    children: renderOption?.(item) ?? item?.[labelKey ?? "label"]
+                }, item?.[valueKey ?? "id" ?? "key" ?? "value"])
         }, value);
-        return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $6ae005878b435ce8$export$36d18380658d5d20), {
+        return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $c35269c9504bc94d$export$5b7f4051a57920d0), {
             textValue: label,
             children: renderOption?.(item) ?? label
-        }, item?.[valueKey ?? "id"]);
+        }, value);
     };
 }
-
-
+function $b71fd84ba612e4b0$export$4c687b6f1150e71b(props) {
+    const children = $hgUW1$useMemo(()=>{
+        return $b71fd84ba612e4b0$export$3d7d0414f6db67e7(props);
+    }, []);
+    return children;
+}
 
 
 
@@ -1315,70 +1375,74 @@ function $db709eeca70b0d61$export$1e60abce570c2b01(props) {
     });
 }
 function $db709eeca70b0d61$export$961f16f221737ce2() {
-    const context = $hgUW1$useContext($db709eeca70b0d61$var$ListBoxContext);
-    if (!context) throw new Error("ListBox components must be rendered within the ListBoxProvider");
-    return context;
+    const ctx = $hgUW1$useContext($db709eeca70b0d61$var$ListBoxContext);
+    if (!ctx) throw new Error("ListBox components must be rendered within the ListBoxProvider");
+    return ctx;
 }
 
 
 
 
-function $6ae005878b435ce8$export$41f133550aa26f48({ state: state, color: color, width: width = 300, showSelectedMarker: showSelectedMarker = true, listBoxRef: listBoxRef, ...props }) {
+function $6ae005878b435ce8$export$41f133550aa26f48({ state: state, color: color, width: width = 300, listBoxRef: listBoxRef, renderEmpty: renderEmpty, classNames: classNames, className: className, style: style, styles: styles, ...props }) {
+    const children = (0, $b71fd84ba612e4b0$export$4c687b6f1150e71b)(props);
     const internalState = (0, $hgUW1$useListState)({
         ...props,
-        children: (0, $b71fd84ba612e4b0$export$3d7d0414f6db67e7)(props)
+        children: children
     });
     const listRef = $hgUW1$useRef(null);
     const listState = state || internalState;
-    const { listBoxProps: listBoxProps } = (0, $hgUW1$useListBox)(props, listState, listRef);
+    const { listBoxProps: listBoxProps } = (0, $hgUW1$useListBox)({
+        ...props,
+        label: props.label ?? "Select an option"
+    }, listState, listRef);
     const options = [
         ...listState.collection
     ];
     const theme = (0, $5fc28f26e128d5c0$export$93d4e7f90805808f)();
+    function renderEmptyState() {
+        return renderEmpty?.() ?? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $3157c40f7d0e6fa2$export$5f1af8db9871e1d6), {
+            color: "gray",
+            variant: "lighter",
+            children: "No options"
+        });
+    }
     return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $db709eeca70b0d61$export$1e60abce570c2b01), {
         ...props,
-        showSelectedMarker: showSelectedMarker,
-        children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
-            "data-color": color ?? theme?.color ?? "gray",
+        children: /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
+            as: "ul",
+            stack: true,
+            gap: "none",
+            className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-list-box-wrapper", classNames?.wrapper, className),
+            ref: (0, $cce662c1d2ec881b$export$c9058316764c140e)(listRef, listBoxRef),
+            "data-radius": "lg",
+            "data-color": color ?? theme?.color,
             style: {
                 width: width,
-                minWidth: 300
+                ...style,
+                ...styles?.wrapper
             },
-            stack: true,
-            gap: "md",
-            children: /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
-                as: "ul",
-                stack: true,
-                gap: "none",
-                className: "p-list-box-wrapper",
-                ref: (0, $cce662c1d2ec881b$export$c9058316764c140e)(listRef, listBoxRef),
-                "data-radius": "lg",
-                ...listBoxProps,
-                children: [
-                    options.length === 0 && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
-                        justify: "center",
-                        align: "center",
-                        style: {
-                            height: 50
-                        },
-                        children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $3157c40f7d0e6fa2$export$5f1af8db9871e1d6), {
-                            color: "gray",
-                            variant: "light",
-                            align: "center",
-                            children: "No Options"
-                        })
-                    }),
-                    options.map((item)=>{
-                        return item.type === "section" ? /*#__PURE__*/ (0, $hgUW1$jsx)($6ae005878b435ce8$var$ListSection, {
-                            section: item,
-                            state: listState
-                        }, item.key) : /*#__PURE__*/ (0, $hgUW1$jsx)($6ae005878b435ce8$var$ListOption, {
-                            state: listState,
-                            item: item
-                        }, item.key);
-                    })
-                ]
-            })
+            ...listBoxProps,
+            children: [
+                options.length === 0 && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
+                    justify: "center",
+                    align: "center",
+                    style: {
+                        height: 50
+                    },
+                    children: renderEmptyState()
+                }),
+                options.map((item)=>{
+                    return item.type === "section" ? /*#__PURE__*/ (0, $hgUW1$jsx)($6ae005878b435ce8$var$ListSection, {
+                        className: classNames?.section,
+                        section: item,
+                        state: listState
+                    }, item.key) : /*#__PURE__*/ (0, $hgUW1$jsx)($6ae005878b435ce8$var$ListOption, {
+                        className: classNames?.option,
+                        state: listState,
+                        item: item
+                    }, item.key);
+                })
+            ]
         })
     });
 }
@@ -1387,24 +1451,28 @@ function $6ae005878b435ce8$var$ListOption({ state: state, item: item }) {
     const { optionProps: optionProps, isDisabled: isDisabled, isFocusVisible: isFocusVisible, isFocused: isFocused, isPressed: isPressed, isSelected: isSelected } = (0, $hgUW1$useOption)({
         key: item.key
     }, state, optionRef);
-    const listBoxContext = (0, $db709eeca70b0d61$export$961f16f221737ce2)();
+    const { showSelectionIndicator: showSelectionIndicator = true, renderSelectionIndicator: renderSelectionIndicator } = (0, $db709eeca70b0d61$export$961f16f221737ce2)().props;
+    const { className: className, classNames: classNames, style: style, styles: styles, color: color, textValue: textValue, title: title, ...otherProps } = item.props;
     return /*#__PURE__*/ (0, $hgUW1$jsxs)("li", {
-        className: "p-list-option",
+        style: {
+            ...style,
+            ...styles?.wrapper
+        },
+        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)(className, "p-list-option", classNames?.wrapper),
         "data-disabled": isDisabled,
         "data-focus-visible": isFocusVisible,
         "data-focused": isFocused,
         "data-pressed": isPressed,
         "data-selected": isSelected,
+        "data-color": color,
         ...optionProps,
-        ...(0, $b35ea695a7e1feb7$export$30a06c8d3562193f)(item.props, [
-            "textValue"
-        ]),
+        ...otherProps,
         ref: optionRef,
         children: [
             item.rendered,
-            isSelected && listBoxContext.props.showSelectedMarker && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$HiCheck), {
-                className: "selected-marker"
-            })
+            isSelected && showSelectionIndicator && (renderSelectionIndicator?.(item) ?? /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                children: "x"
+            }))
         ]
     });
 }
@@ -1414,19 +1482,25 @@ function $6ae005878b435ce8$var$ListSection({ state: state, section: section }) {
         "aria-label": section["aria-label"]
     });
     const listBoxContext = (0, $db709eeca70b0d61$export$961f16f221737ce2)();
-    function getChildren() {
+    const { className: className, classNames: classNames, style: style, styles: styles } = section.props;
+    const children = $hgUW1$useMemo(()=>{
         if (state.collection.getChildren) return [
             ...state.collection.getChildren(section.key)
         ];
         return [];
-    }
+    }, []);
     return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
         gap: "sm",
         stack: true,
-        className: "p-list-section",
+        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)(className, "p-list-section", classNames?.wrapper),
+        style: {
+            ...style,
+            ...styles?.wrapper
+        },
         children: [
-            section.key !== state.collection.getFirstKey() && listBoxContext.props.showSeparator && /*#__PURE__*/ (0, $hgUW1$jsx)("li", {
-                className: "p-list-separator"
+            section.key !== state.collection.getFirstKey() && listBoxContext.props.showSectionSeparator && /*#__PURE__*/ (0, $hgUW1$jsx)("li", {
+                style: styles?.separator,
+                className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-list-separator", classNames?.separator)
             }),
             /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
                 gap: "none",
@@ -1434,20 +1508,18 @@ function $6ae005878b435ce8$var$ListSection({ state: state, section: section }) {
                 as: "li",
                 ...itemProps,
                 children: [
-                    section.rendered && /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
-                        className: "p-list-section-header",
-                        children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $3157c40f7d0e6fa2$export$5f1af8db9871e1d6), {
-                            weight: "regular",
-                            size: "xs",
-                            as: "div",
-                            variant: "light",
-                            ...headingProps,
-                            children: section.rendered
-                        })
+                    section.rendered && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $3157c40f7d0e6fa2$export$5f1af8db9871e1d6), {
+                        style: styles?.heading,
+                        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-list-section-header", classNames?.heading),
+                        as: "div",
+                        variant: "light",
+                        ...headingProps,
+                        children: section.rendered
                     }),
                     /*#__PURE__*/ (0, $hgUW1$jsx)("ul", {
+                        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)(classNames?.items),
                         ...groupProps,
-                        children: getChildren().map((node)=>{
+                        children: children.map((node)=>{
                             return /*#__PURE__*/ (0, $hgUW1$jsx)($6ae005878b435ce8$var$ListOption, {
                                 item: node,
                                 state: state
@@ -1459,8 +1531,7 @@ function $6ae005878b435ce8$var$ListSection({ state: state, section: section }) {
         ]
     });
 }
-const $6ae005878b435ce8$export$36d18380658d5d20 = (0, $hgUW1$Item);
-const $6ae005878b435ce8$export$6e2c8f0811a474ce = (0, $hgUW1$Section);
+
 
 
 
@@ -1733,7 +1804,6 @@ $e3711da06539818f$export$f8afaea2e9656b91.displayName = "RadioCard";
 
 
 
-
 const $c700d45659d35204$export$3288d34c523a1192 = /*#__PURE__*/ (0, $hgUW1$react).forwardRef(({ prepend: prepend, append: append, children: children, hashValue: hashValue, color: color, size: size = "sm", shape: shape = "rounded", variant: variant = "light", className: className, ...props }, ref)=>{
     const randomColor = (0, $hgUW1$react).useMemo(()=>{
         if (hashValue) return (0, $0ad0bc75b5eb16a6$export$e4369cabd7e84cd9)(hashValue);
@@ -1765,44 +1835,46 @@ $c700d45659d35204$export$3288d34c523a1192.displayName = "Tag";
 
 
 
-
-
-function $9f79d30a629e2c71$export$ef9b1a59e592288f({ label: label, selectionMode: selectionMode = "single", appearance: appearance = "outline", renderValue: renderValue, color: color = "gray", error: error, description: description, size: size = "sm", radius: radius, listBoxColor: listBoxColor, className: className, value: value, defaultValue: defaultValue, onChange: onChange, style: style, ...props }) {
+function $9f79d30a629e2c71$export$ef9b1a59e592288f({ label: label, selectionMode: selectionMode = "single", appearance: appearance = "outline", renderValue: renderValue, color: color = "gray", error: error, description: description, size: size = "sm", radius: radius, listBoxColor: listBoxColor, className: className, value: value, defaultValue: defaultValue, onChange: onChange, onSelectionChange: onSelectionChange, style: style, classNames: classNames, styles: styles, showSectionSeparator: showSectionSeparator = true, showSelectionIndicator: showSelectionIndicator = true, ...props }) {
     const isMultiple = selectionMode === "multiple";
-    function getValue(value) {
+    const _value = $hgUW1$useMemo(()=>{
         if (!value) return null;
         if (selectionMode === "single") return [
             value
         ];
         if (isMultiple && !(0, $0f90ef71a188bc45$export$43bee75e5e14138e)(value)) throw new Error("Select: value must be an array when selectionMode is multiple");
         return value;
-    }
-    function onSelectionChange(selectedKeys) {
-        onChange?.({
-            target: {
-                value: isMultiple ? selectedKeys : selectedKeys[0],
-                name: props.name
-            }
-        });
-    }
+    }, [
+        value,
+        selectionMode
+    ]);
+    const children = (0, $b71fd84ba612e4b0$export$4c687b6f1150e71b)(props);
     const space = (0, $41cc567ab0625f8f$export$450c36e0b0e62ccd)();
     const triggerState = (0, $hgUW1$useMenuTriggerState)({});
     const listState = (0, $hgUW1$useListState)({
         ...props,
-        selectedKeys: getValue(value),
-        defaultSelectedKeys: getValue(defaultValue),
+        selectedKeys: _value,
+        defaultSelectedKeys: _value,
         selectionMode: selectionMode,
-        children: (0, $b71fd84ba612e4b0$export$3d7d0414f6db67e7)(props),
+        children: children,
         onSelectionChange (keys) {
-            onSelectionChange([
+            const keysToArray = [
                 ...keys
-            ]);
+            ];
+            onSelectionChange?.(keysToArray);
+            onChange?.({
+                target: {
+                    value: isMultiple ? keysToArray : keysToArray[0],
+                    name: props.name
+                }
+            });
             if (!isMultiple) triggerState.close();
         }
     });
     const triggerRef = $hgUW1$useRef(null);
     const theme = (0, $5fc28f26e128d5c0$export$93d4e7f90805808f)();
-    const { menuTriggerProps: menuTriggerProps } = (0, $hgUW1$useMenuTrigger)({
+    color = color ?? theme?.color;
+    const { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = (0, $hgUW1$useMenuTrigger)({
         type: "listbox",
         trigger: "press",
         isDisabled: false
@@ -1811,8 +1883,10 @@ function $9f79d30a629e2c71$export$ef9b1a59e592288f({ label: label, selectionMode
     const selectedItems = [
         ...listState.selectionManager.selectedKeys
     ].map((item)=>listState.collection.getItem(item));
-    function content() {
+    const content = $hgUW1$useMemo(()=>{
         if (selectedItems.length === 0) return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $3157c40f7d0e6fa2$export$5f1af8db9871e1d6), {
+            style: styles?.placeholder,
+            className: classNames?.placeholder,
             color: color,
             variant: "lighter",
             children: props.placeholder
@@ -1820,67 +1894,64 @@ function $9f79d30a629e2c71$export$ef9b1a59e592288f({ label: label, selectionMode
         if (isMultiple) return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
             gap: "3xs",
             wrap: "wrap",
-            children: selectedItems.map((item)=>/*#__PURE__*/ (0, $hgUW1$jsx)((0, $c700d45659d35204$export$3288d34c523a1192), {
-                    append: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$HiX), {}),
-                    color: (0, $0ad0bc75b5eb16a6$export$e4369cabd7e84cd9)(item?.textValue ?? ""),
+            children: selectedItems.map((item)=>renderValue?.(item?.value) ?? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $c700d45659d35204$export$3288d34c523a1192), {
+                    size: "md",
+                    variant: "pastel",
+                    color: color,
                     children: item?.textValue
                 }, item?.key))
         });
         return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $3157c40f7d0e6fa2$export$5f1af8db9871e1d6), {
+            as: "div",
             variant: "default",
             color: color === "gray" ? "black" : color,
-            className: "single-value",
+            className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("single-value", classNames?.value),
+            style: styles?.value,
             children: renderValue?.(selectedItems[0]?.value) ?? selectedItems[0]?.value?.[props.labelKey ?? "label"] ?? selectedItems[0]?.textValue
         });
-    }
-    return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $ee0105641360f1c1$export$e71c4d32a2263218), {
-        style: style,
-        as: "span",
-        position: "relative",
-        stretchX: true,
+    }, [
+        selectedItems.length,
+        isMultiple,
+        selectedItems[0]?.value
+    ]);
+    return /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-select", className, classNames?.wrapper),
+        style: {
+            ...style,
+            ...styles?.wrapper
+        },
         children: [
-            /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
-                "data-radius": radius ?? theme?.radius ?? "lg",
-                gap: "3xs",
-                stack: true,
-                className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-input-group", className, space.compactItemWrapperAdjust),
-                "data-size": size,
-                "data-color": color ?? "gray",
-                children: [
-                    label && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $eea734bbd8b9efff$export$2e2bcd8739ae039), {
-                        color: color,
-                        children: label
-                    }),
-                    /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
-                        "data-selection-mode": selectionMode,
-                        tabIndex: 0,
-                        role: "button",
-                        ref: triggerRef,
-                        color: "gray",
-                        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-input-control", "p-select", space.classNames),
-                        "data-appearance": appearance,
-                        ...triggerProps,
-                        children: [
-                            content(),
-                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$HiSelector), {
-                                className: "selector",
-                                size: 18
-                            })
-                        ]
-                    }),
-                    error && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $9e021ab4f609c8de$export$2e2bcd8739ae039), {
-                        children: error
-                    }),
-                    description && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $3157c40f7d0e6fa2$export$5f1af8db9871e1d6), {
-                        as: "div",
-                        variant: "light",
-                        color: "gray",
-                        size: "sm",
-                        children: description
-                    })
-                ]
+            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $095d89378519ff08$export$a455218a85c89869), {
+                replaceDefaultControlWrapper: true,
+                label: label,
+                error: error,
+                description: description,
+                className: className,
+                classNames: classNames,
+                size: size,
+                radius: radius,
+                children: /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+                    style: styles?.trigger,
+                    "data-selection-mode": selectionMode,
+                    tabIndex: 0,
+                    role: "button",
+                    ref: triggerRef,
+                    color: "gray",
+                    className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-input-control", "p-select-trigger", space.classNames, classNames?.trigger),
+                    "data-appearance": appearance,
+                    ...triggerProps,
+                    children: [
+                        content,
+                        /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$HiSelector), {
+                            className: "selector",
+                            size: 18
+                        })
+                    ]
+                })
             }),
             triggerState.isOpen && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $fc3eb9661261e42e$export$91527519cfe8e396), {
+                className: classNames?.popover,
+                style: styles?.popover,
                 placement: "bottom start",
                 offset: 4,
                 shouldUpdatePosition: true,
@@ -1888,12 +1959,13 @@ function $9f79d30a629e2c71$export$ef9b1a59e592288f({ label: label, selectionMode
                 state: triggerState,
                 children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $6ae005878b435ce8$export$41f133550aa26f48), {
                     label: label,
-                    showSeparator: props.showSeparator,
-                    showSelectedMarker: props.showSelectedMarker,
+                    showSectionSeparator: showSectionSeparator,
+                    showSelectionIndicator: showSelectionIndicator,
                     width: triggerRef.current?.getBoundingClientRect().width,
                     color: listBoxColor ?? "gray",
                     shouldFocusOnHover: true,
                     state: listState,
+                    ...menuProps,
                     ...props
                 })
             })
@@ -1916,6 +1988,7 @@ function $9f79d30a629e2c71$export$ef9b1a59e592288f({ label: label, selectionMode
 
 
 
+
 function $693c180b2c3a8d81$var$createCalendar() {
     return new (0, $hgUW1$GregorianCalendar)();
 }
@@ -2292,13 +2365,15 @@ $48aceaf3289ec325$export$7edc06cf1783b30f.displayName = "DateInput";
 
 
 
-const $55bcc0e5986993c4$export$e2255cf6045e8d47 = /*#__PURE__*/ $hgUW1$forwardRef(({ src: src, alt: alt, name: name, color: color, variant: variant = "light", fallback: fallback, children: children, size: size = "md", shape: shape = "square", className: className, ...props }, ref)=>{
+const $55bcc0e5986993c4$export$e2255cf6045e8d47 = /*#__PURE__*/ $hgUW1$forwardRef(({ src: src, alt: alt, name: name, color: color, variant: variant = "light", fallback: fallback, children: children, size: size = "md", shape: shape, className: className, radius: radius = "lg", classNames: classNames, styles: styles, style: style, ...props }, ref)=>{
     const [imageError, setImageError] = $hgUW1$useState(false);
     const theme = (0, $5fc28f26e128d5c0$export$93d4e7f90805808f)();
     function getAvatarRadius() {
-        if (theme?.avatarRadiusSize && shape !== "circle") return theme.avatarRadiusSize;
-        if (shape === "circle") return "full";
-        return "md";
+        (0, $0ad0bc75b5eb16a6$export$1c4d39b152e0f791)("shape", "radius", shape);
+        // TODO: remove this when we remove the deprecated shape prop
+        if (shape === "circle" && !radius) radius = "full";
+        if (shape === "square" && !radius) radius = "md";
+        return theme?.avatarRadiusSize || radius;
     }
     const defaultColor = $hgUW1$useMemo(()=>{
         const hash = (0, $0ad0bc75b5eb16a6$export$d41d9ab3de2def3d)(name || "");
@@ -2308,6 +2383,10 @@ const $55bcc0e5986993c4$export$e2255cf6045e8d47 = /*#__PURE__*/ $hgUW1$forwardRe
     ]);
     const renderContent = ()=>{
         if (src && !imageError) return /*#__PURE__*/ (0, $hgUW1$jsx)("img", {
+            className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
+                "avatar-img",
+                classNames?.img
+            ]),
             onLoad: ()=>setImageError(false),
             onError: ()=>setImageError(true),
             src: src,
@@ -2315,14 +2394,24 @@ const $55bcc0e5986993c4$export$e2255cf6045e8d47 = /*#__PURE__*/ $hgUW1$forwardRe
         });
         if (imageError && !children) return fallback;
         if (!src && !children && name) return /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
+            style: styles?.fallback,
+            className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
+                "avatar-fallback",
+                classNames?.fallback
+            ]),
             children: name.charAt(0)
         });
         return children;
     };
     return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+        style: {
+            ...style,
+            ...styles?.base
+        },
         className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
             "p-avatar",
-            className
+            className,
+            classNames?.base
         ]),
         "data-radius": getAvatarRadius(),
         "data-color": color ?? defaultColor,
@@ -2689,8 +2778,97 @@ $fac55dfefd316398$export$b5d5cf8927ab7262.displayName = "Switch";
 
 
 
-function $6a8317ccd5d3ba90$export$dbada5ace43900dd(props) {
-    return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {});
+
+
+
+
+function $17f80f062b7f107f$export$472062a354075cee({ className: className, classNames: classNames, style: style, styles: styles, name: name, size: size = "sm", orientation: orientation = "horizontal", ...props }) {
+    const trackRef = $hgUW1$useRef(null);
+    const numberFormatter = (0, $hgUW1$useNumberFormatter)();
+    const state = (0, $hgUW1$useSliderState)({
+        ...props,
+        numberFormatter: numberFormatter
+    });
+    const { trackProps: trackProps, labelProps: labelProps } = (0, $hgUW1$useSlider)({
+        ...props,
+        "aria-label": props["aria-label"] ?? "slider"
+    }, state, trackRef);
+    const percent = state.getThumbPercent(0);
+    return /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+        "data-size": size,
+        style: {
+            ...style,
+            ...styles?.wrapper
+        },
+        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-slider", orientation, className, classNames?.wrapper),
+        children: [
+            props.label && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $eea734bbd8b9efff$export$2e2bcd8739ae039), {
+                style: styles?.label,
+                className: classNames?.label,
+                ...labelProps,
+                children: props.label
+            }),
+            /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+                ref: trackRef,
+                className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-slider-track", classNames?.track),
+                ...trackProps,
+                children: [
+                    /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                        style: {
+                            width: `${percent * 100}%`
+                        },
+                        className: "p-slider-track-fill"
+                    }),
+                    /*#__PURE__*/ (0, $hgUW1$jsx)($17f80f062b7f107f$var$Thumb, {
+                        styles: {
+                            wrapper: styles?.thumb,
+                            inner: styles?.innerThumb
+                        },
+                        classNames: {
+                            wrapper: classNames?.thumb,
+                            inner: classNames?.innerThumb
+                        },
+                        state: state,
+                        trackRef: trackRef,
+                        index: 0,
+                        name: name
+                    })
+                ]
+            })
+        ]
+    });
+}
+function $17f80f062b7f107f$var$Thumb({ state: state, trackRef: trackRef, index: index, name: name, className: className, classNames: classNames, styles: styles, style: style }) {
+    const inputRef = $hgUW1$useRef(null);
+    const { thumbProps: thumbProps, inputProps: inputProps, isDragging: isDragging } = (0, $hgUW1$useSliderThumb)({
+        index: index,
+        trackRef: trackRef,
+        inputRef: inputRef,
+        name: name
+    }, state);
+    const { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $hgUW1$useFocusRing)();
+    return /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+        "data-dragging": isDragging,
+        "data-focus-visible": isFocusVisible,
+        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-slider-thumb", className, classNames?.wrapper),
+        style: {
+            ...style,
+            ...styles?.wrapper
+        },
+        ...thumbProps,
+        children: [
+            /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                style: styles?.inner,
+                className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-slider-thumb-inner", classNames?.inner)
+            }),
+            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$VisuallyHidden), {
+                children: /*#__PURE__*/ (0, $hgUW1$jsx)("input", {
+                    ref: inputRef,
+                    ...(0, $hgUW1$mergeProps)(inputProps, focusProps)
+                })
+            })
+        ]
+    });
 }
 
 
@@ -3238,7 +3416,7 @@ function $61ac9d13c14b7f5b$export$7dacb05d26466c3({ children: children }) {
         ...triggerProps
     });
 }
-function $61ac9d13c14b7f5b$export$d7e1f420b25549ff({ children: children, offset: offset = 12, placement: placement, style: style, width: width = 160, className: className, ...props }) {
+function $61ac9d13c14b7f5b$export$d7e1f420b25549ff({ children: children, offset: offset = 12, placement: placement, style: style, className: className, ...props }) {
     const ctx = $hgUW1$useContext($61ac9d13c14b7f5b$var$PopoverContext);
     if (!ctx) throw "PopoverContent must be used withing a Popover component";
     if (!ctx.overlayState?.isOpen) return null;
@@ -3253,7 +3431,6 @@ function $61ac9d13c14b7f5b$export$d7e1f420b25549ff({ children: children, offset:
             "data-radius": "md",
             className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)(className, "p-popover-content"),
             style: {
-                width: width,
                 ...style
             },
             children: children
@@ -3372,5 +3549,510 @@ const $31aad62a65b342bc$export$a79147a60006308c = (0, $hgUW1$Item);
 
 
 
-export {$ee0105641360f1c1$export$e71c4d32a2263218 as Box, $11bc53f9891a6532$export$ef2184bd89960b14 as Grid, $11bc53f9891a6532$export$9eb849b9b922d396 as GridItem, $e2f278d76a00796a$export$f51f4c4ede09e011 as Flex, $ef10b8551376ecd8$export$f5b8910cec6cf069 as Input, $2e89c7375b40283e$export$6bf0cd3a219bbade as NumberInput, $3157c40f7d0e6fa2$export$5f1af8db9871e1d6 as Text, $7794de767effca39$export$379139ebc1c2b235 as Textarea, $d95a2216d3ccf702$export$353f5b6fc5456de1 as Button, $e3f71af5eaf1c216$export$c25acd513dcc8062 as IconButton, $9230e224c5c26d9c$export$69b1032f2ecdf404 as ButtonGroup, $0ca204e719955216$export$48513f6b9f8ce62d as Checkbox, $1ab2e355b7aa4310$export$4aa08d5625cb8ead as CheckboxGroup, $3ba60d401cc6cc09$export$e44a253a59704894 as DropdownMenu, $618e53c42107439d$export$72b9695b8216309a as ComboBox, $e00a258f2e8c7774$export$d7b12c4107be0d61 as Radio, $e00a258f2e8c7774$export$a98f0dcb43a68a25 as RadioGroup, $e3711da06539818f$export$f8afaea2e9656b91 as RadioCard, $9f79d30a629e2c71$export$ef9b1a59e592288f as Select, $6ae005878b435ce8$export$36d18380658d5d20 as Option, $6ae005878b435ce8$export$6e2c8f0811a474ce as Section, $48aceaf3289ec325$export$7edc06cf1783b30f as DateInput, $11e1beb2a56c81ba$export$e1aef45b828286de as Calendar, $55bcc0e5986993c4$export$e2255cf6045e8d47 as Avatar, $f9f5a5b674d0a63f$export$1a5cb5295a7d2749 as FileUploader, $1a0bc09c6bea5bcc$export$1ff3c3f08ae963c0 as Separator, $2cc726bf01dd2fe8$export$b25a304ec7d746bb as Progress, $e1148cdb3a130657$export$3b0d6d7590275603 as Loader, $c700d45659d35204$export$3288d34c523a1192 as Tag, $fac55dfefd316398$export$b5d5cf8927ab7262 as Switch, $6a8317ccd5d3ba90$export$dbada5ace43900dd as ColorTray, $62ecff109eaa29fb$export$50e381fea3a45244 as IconTray, $6bbafdf52af7a191$export$ea98c603db73aee7 as Sticker, $28ce03a907630a4d$export$b2539bed5023c21c as Tabs, $28ce03a907630a4d$export$6d08773d2e66f8f2 as Tab, $18afd8c09c9f3065$export$54ec01a60f47d33d as Table, $727b3a4d9b39464f$export$e6a97ba2cae5bb94 as Timeline, $4bad2c10a2b6e638$export$2b77a92f1a5ad772 as Modal, $4bad2c10a2b6e638$export$33ffd74ebf07f060 as useModal, $41cc567ab0625f8f$export$eef1e68107c58ef2 as Space, $aca304249f917497$export$39299b56cfd4e361 as TagInput, $61ac9d13c14b7f5b$export$5b6b19405a83ff9d as Popover, $61ac9d13c14b7f5b$export$d7e1f420b25549ff as PopoverContent, $61ac9d13c14b7f5b$export$7dacb05d26466c3 as PopoverTrigger, $31aad62a65b342bc$export$67ea30858aaf75e3 as TagGroup, $31aad62a65b342bc$export$a79147a60006308c as TagGroupItem, $5fc28f26e128d5c0$export$d8964aec282183a3 as ThemeProvider, $5fc28f26e128d5c0$export$93d4e7f90805808f as useTheme};
+
+
+
+
+
+
+
+
+function $b925f0cf89a3187d$export$9feb1bc2e5f1ccb3({ onChange: onChange, color: colorProp }) {
+    const [colorSpace, setColorSpace] = $hgUW1$useState("hex");
+    const [color, setColor] = (0, $fda09bbc0161c751$export$40bfa8c7b0832715)(colorProp, (0, $hgUW1$parseColor)("#BB66CC").toFormat("hsla"), onChange);
+    function handleChange(color) {
+        setColor(color);
+        onChange?.(color);
+    }
+    function setAlpha(alpha) {
+        if (isNaN(alpha)) return;
+        console.log(alpha);
+        console.log(color);
+        const newColor = color.withChannelValue("alpha", alpha);
+        setColor(newColor);
+        console.log(newColor);
+    }
+    const [h, s, l] = color.getColorChannels();
+    const rgbaColor = color.toFormat("rgba");
+    const [r, g, b] = rgbaColor.getColorChannels();
+    return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
+        stack: true,
+        style: {
+            width: 240
+        },
+        children: [
+            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $d03055b0909e9e3a$export$b2103f68a961418e), {
+                onChange: handleChange,
+                onChangeEnd: handleChange,
+                xChannel: s,
+                yChannel: l,
+                value: color ?? (0, $hgUW1$parseColor)("hsl(219, 79%, 66%)"),
+                style: {
+                    width: "100%",
+                    height: 140
+                }
+            }),
+            /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
+                stack: true,
+                style: {
+                    padding: 8
+                },
+                children: [
+                    /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
+                        stack: true,
+                        gap: "2xs",
+                        children: [
+                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $216a62c521cf5bbd$export$44fd664bcca5b6fb), {
+                                value: color,
+                                onChange: handleChange,
+                                onChangeEnd: handleChange,
+                                channel: h
+                            }),
+                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $216a62c521cf5bbd$export$44fd664bcca5b6fb), {
+                                value: color,
+                                onChange: handleChange,
+                                onChangeEnd: handleChange,
+                                channel: "alpha"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
+                        stack: true,
+                        children: [
+                            /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
+                                style: {
+                                    width: "100%"
+                                },
+                                gap: "3xs",
+                                children: [
+                                    colorSpace === "hex" && /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $41cc567ab0625f8f$export$eef1e68107c58ef2), {
+                                        style: {
+                                            gap: 3
+                                        },
+                                        compact: true,
+                                        children: [
+                                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $2abac2409e7cef4a$export$b865d4358897bb17), {
+                                                value: color,
+                                                onChange: handleChange,
+                                                size: "sm",
+                                                style: {
+                                                    width: "60%"
+                                                },
+                                                appearance: "filled",
+                                                placeholder: "Add a color"
+                                            }),
+                                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $2e89c7375b40283e$export$6bf0cd3a219bbade), {
+                                                onChange: (n)=>setAlpha(n),
+                                                maxValue: 1,
+                                                formatOptions: {
+                                                    style: "percent",
+                                                    maximumFractionDigits: 0
+                                                },
+                                                size: "sm",
+                                                value: color.getChannelValue("alpha"),
+                                                style: {
+                                                    width: "40%"
+                                                },
+                                                appearance: "filled"
+                                            })
+                                        ]
+                                    }),
+                                    [
+                                        "rgb",
+                                        "hsl"
+                                    ].includes(colorSpace) && /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $41cc567ab0625f8f$export$eef1e68107c58ef2), {
+                                        style: {
+                                            gap: 3
+                                        },
+                                        compact: true,
+                                        children: [
+                                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $2e89c7375b40283e$export$6bf0cd3a219bbade), {
+                                                value: colorSpace === "rgb" ? rgbaColor.getChannelValue(r) : color.getChannelValue(h),
+                                                appearance: "filled",
+                                                size: "sm"
+                                            }),
+                                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $2e89c7375b40283e$export$6bf0cd3a219bbade), {
+                                                value: colorSpace === "rgb" ? rgbaColor.getChannelValue(g) : color.getChannelValue(s),
+                                                appearance: "filled",
+                                                size: "sm"
+                                            }),
+                                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $2e89c7375b40283e$export$6bf0cd3a219bbade), {
+                                                value: colorSpace === "rgb" ? rgbaColor.getChannelValue(b) : color.getChannelValue(l),
+                                                appearance: "filled",
+                                                size: "sm"
+                                            }),
+                                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $2e89c7375b40283e$export$6bf0cd3a219bbade), {
+                                                formatOptions: {
+                                                    style: "percent",
+                                                    maximumFractionDigits: 0
+                                                },
+                                                value: colorSpace === "rgb" ? rgbaColor.getChannelValue("alpha") : color.getChannelValue("alpha"),
+                                                appearance: "filled",
+                                                size: "sm"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, $hgUW1$jsx)((0, $9f79d30a629e2c71$export$ef9b1a59e592288f), {
+                                        style: {
+                                            width: "60%"
+                                        },
+                                        valueKey: "id",
+                                        onChange: (v)=>setColorSpace(v.target.value ?? colorSpace),
+                                        showSelectionIndicator: false,
+                                        value: colorSpace,
+                                        size: "sm",
+                                        appearance: "filled",
+                                        items: [
+                                            "hex",
+                                            "rgb",
+                                            "hsl"
+                                        ].map((o)=>({
+                                                label: o.toUpperCase(),
+                                                id: o
+                                            }))
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $1a0bc09c6bea5bcc$export$1ff3c3f08ae963c0), {
+                                color: "gray"
+                            }),
+                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
+                                children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $a364ffae99b57fd7$export$b46792416e3d8515), {
+                                    styles: {
+                                        wrapper: {
+                                            gap: 6
+                                        },
+                                        swatch: {
+                                            borderRadius: 5
+                                        }
+                                    },
+                                    onChange: handleChange,
+                                    colors: [
+                                        "#000000",
+                                        "#333333",
+                                        "#555555",
+                                        "#777777",
+                                        "#999999",
+                                        "#bbbbbb",
+                                        "#dddddd",
+                                        "#ffffff",
+                                        "#4455BB",
+                                        "#1199EE",
+                                        "#55CCFF",
+                                        "#22CCDD",
+                                        "#22AA99",
+                                        "#66BB66",
+                                        "#99CC66",
+                                        "#CCDD33",
+                                        "#7755CC",
+                                        "#BB66CC",
+                                        "#FF88AA",
+                                        "#EE4444",
+                                        "#FF7744",
+                                        "#FFAA22",
+                                        "#FFCC66",
+                                        "#FFEE66"
+                                    ].map((color)=>({
+                                            label: color,
+                                            color: (0, $hgUW1$parseColor)(color).toString("hsl"),
+                                            key: color
+                                        }))
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+
+
+
+
+
+
+
+
+function $d03055b0909e9e3a$export$b2103f68a961418e({ className: className, classNames: classNames, style: style, styles: styles, radius: radius, ...props }) {
+    const inputXRef = $hgUW1$useRef(null);
+    const inputYRef = $hgUW1$useRef(null);
+    const containerRef = $hgUW1$useRef(null);
+    const state = (0, $hgUW1$useColorAreaState)(props);
+    const { colorAreaProps: colorAreaProps, xInputProps: xInputProps, yInputProps: yInputProps, thumbProps: thumbProps } = (0, $hgUW1$useColorArea)({
+        ...props,
+        inputXRef: inputXRef,
+        inputYRef: inputYRef,
+        containerRef: containerRef
+    }, state);
+    const { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $hgUW1$useFocusRing)();
+    const theme = (0, $5fc28f26e128d5c0$export$93d4e7f90805808f)();
+    return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+        ...colorAreaProps,
+        ref: containerRef,
+        style: {
+            ...colorAreaProps.style,
+            ...styles?.wrapper,
+            ...style
+        },
+        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-color-area", className, classNames?.wrapper),
+        "data-disabled": props.isDisabled,
+        "data-radius": radius ?? theme?.radius ?? "lg",
+        children: /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+            ...thumbProps,
+            style: {
+                ...thumbProps.style,
+                ...styles?.thumb
+            },
+            className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-color-area-thumb", classNames?.thumb),
+            "data-focus-visible": isFocusVisible,
+            "data-color": state.getDisplayColor().toString("css"),
+            children: [
+                /*#__PURE__*/ (0, $hgUW1$jsx)("input", {
+                    ...xInputProps,
+                    ref: inputXRef,
+                    ...focusProps
+                }),
+                /*#__PURE__*/ (0, $hgUW1$jsx)("input", {
+                    ...yInputProps,
+                    ref: inputYRef,
+                    ...focusProps
+                })
+            ]
+        })
+    });
+}
+
+
+
+
+
+
+
+
+function $2abac2409e7cef4a$export$b865d4358897bb17({ label: label, description: description, className: className, classNames: classNames, style: style, styles: styles, ...props }) {
+    const state = (0, $hgUW1$useColorFieldState)(props);
+    const inputRef = $hgUW1$useRef(null);
+    const { inputProps: inputProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $hgUW1$useColorField)({
+        ...props,
+        "aria-label": props["aria-label"] ?? "color-field"
+    }, state, inputRef);
+    return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $095d89378519ff08$export$a455218a85c89869), {
+        description: description,
+        label: label,
+        style: style,
+        classNames: classNames,
+        className: className,
+        styles: styles,
+        labelProps: {
+            ...labelProps
+        },
+        descriptionProps: {
+            ...descriptionProps
+        },
+        errorMessageProps: {
+            ...errorMessageProps
+        },
+        ...props,
+        children: /*#__PURE__*/ (0, $hgUW1$jsx)("input", {
+            style: styles?.input,
+            className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)(classNames?.input, "p-text-input-el"),
+            type: "text",
+            ref: inputRef,
+            ...inputProps
+        })
+    });
+}
+
+
+
+
+
+
+
+
+
+
+
+function $a364ffae99b57fd7$export$b46792416e3d8515({ colors: colors, items: items, children: children, radius: radius, size: size, onChange: onChange, selectionMode: selectionMode = "single", className: className, classNames: classNames, style: style, styles: styles, ...props }) {
+    items = colors;
+    children = (item)=>/*#__PURE__*/ (0, $hgUW1$jsx)($a364ffae99b57fd7$var$Color, {
+            textValue: item.color,
+            color: (0, $hgUW1$parseColor)(item.color)
+        }, item.color);
+    const listProps = {
+        ...props,
+        items: items,
+        children: children,
+        selectionMode: selectionMode,
+        ["aria-label"]: "color swatch picker",
+        onSelectionChange: (keys)=>{
+            const keysToArray = [
+                ...keys
+            ];
+            onChange?.((0, $hgUW1$parseColor)(keysToArray[0]));
+            props.onSelectionChange?.(keys);
+        }
+    };
+    const theme = (0, $5fc28f26e128d5c0$export$93d4e7f90805808f)();
+    const wrapperRef = $hgUW1$useRef(null);
+    const listState = (0, $hgUW1$useListState)(listProps);
+    const { listBoxProps: listBoxProps } = (0, $hgUW1$useListBox)(listProps, listState, wrapperRef);
+    const _colors = [
+        ...listState.collection
+    ];
+    radius = radius ?? theme?.radius ?? "md";
+    return /*#__PURE__*/ (0, $hgUW1$jsx)($a364ffae99b57fd7$var$SwatchProvider, {
+        colors: colors,
+        radius: radius,
+        size: size,
+        ...props,
+        children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
+            style: {
+                ...style,
+                ...styles?.wrapper
+            },
+            className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)(className, classNames?.wrapper),
+            wrap: "wrap",
+            ...listBoxProps,
+            ref: wrapperRef,
+            children: _colors.map((color, index)=>/*#__PURE__*/ (0, $hgUW1$jsx)($a364ffae99b57fd7$export$47ce3797af1a0c57, {
+                    className: classNames?.swatch,
+                    style: styles?.swatch,
+                    state: listState,
+                    item: color
+                }, index))
+        })
+    });
+}
+function $a364ffae99b57fd7$export$47ce3797af1a0c57({ item: item, state: state, style: style, className: className }) {
+    const ref = $hgUW1$useRef(null);
+    const { optionProps: optionProps, isDisabled: isDisabled, isFocusVisible: isFocusVisible, isFocused: isFocused, isPressed: isPressed, isSelected: isSelected } = (0, $hgUW1$useOption)({
+        key: item.key
+    }, state, ref);
+    const color = item.props.color;
+    const ctx = $a364ffae99b57fd7$var$useSwatchPickerContext();
+    return /*#__PURE__*/ (0, $hgUW1$jsx)($a364ffae99b57fd7$var$ColorSwatch, {
+        className: className,
+        style: style,
+        color: color,
+        _ref: ref,
+        "data-disabled": isDisabled,
+        "data-selected": isSelected,
+        "data-focused": isFocused,
+        "data-focus-visible": isFocusVisible,
+        "data-pressed": isPressed,
+        "data-radius": ctx.radius,
+        "data-size": ctx.size,
+        ...optionProps
+    });
+}
+function $a364ffae99b57fd7$var$ColorSwatch({ className: className, style: style, _ref: _ref, color: colorProp, ...props }) {
+    const { colorSwatchProps: colorSwatchProps, color: color } = (0, $hgUW1$useColorSwatch)({
+        ...props,
+        color: colorProp
+    });
+    return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+        ...props,
+        ref: _ref,
+        className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-color-swatch", className),
+        ...colorSwatchProps,
+        style: {
+            ...colorSwatchProps.style,
+            background: color.toString("css"),
+            ...style
+        },
+        children: /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+            className: "p-swatch-checkers"
+        })
+    });
+}
+const $a364ffae99b57fd7$var$SwatchPickerContext = /*#__PURE__*/ $hgUW1$createContext(null);
+function $a364ffae99b57fd7$var$SwatchProvider(props) {
+    return /*#__PURE__*/ (0, $hgUW1$jsx)($a364ffae99b57fd7$var$SwatchPickerContext.Provider, {
+        value: props,
+        children: props.children
+    });
+}
+function $a364ffae99b57fd7$var$useSwatchPickerContext() {
+    const ctx = $hgUW1$useContext($a364ffae99b57fd7$var$SwatchPickerContext);
+    if (!ctx) throw new Error("SwatchPicker must be used within a SwatchPickerProvider");
+    return ctx;
+}
+const $a364ffae99b57fd7$var$Color = (0, $hgUW1$Item);
+
+
+
+
+
+
+
+
+function $216a62c521cf5bbd$export$44fd664bcca5b6fb({ label: label, ...props }) {
+    const { locale: locale } = (0, $hgUW1$useLocale)();
+    const state = (0, $hgUW1$useColorSliderState)({
+        ...props,
+        locale: locale
+    });
+    const trackRef = $hgUW1$useRef(null);
+    const inputRef = $hgUW1$useRef(null);
+    const { labelProps: labelProps, trackProps: trackProps, thumbProps: thumbProps, inputProps: inputProps } = (0, $hgUW1$useColorSlider)({
+        ...props,
+        label: label,
+        "aria-label": props["aria-label"] ?? "color-slider",
+        inputRef: inputRef,
+        trackRef: trackRef
+    }, state);
+    const { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $hgUW1$useFocusRing)();
+    return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $095d89378519ff08$export$a455218a85c89869), {
+        label: label,
+        className: "p-color-slider",
+        replaceDefaultControlWrapper: true,
+        labelProps: labelProps,
+        children: /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+            ...trackProps,
+            "data-focus-visible": isFocusVisible,
+            "data-bg": trackProps.style?.background,
+            className: "p-color-slider-track",
+            ref: trackRef,
+            style: {
+                ...trackProps.style,
+                background: trackProps.style?.background
+            },
+            children: [
+                /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                    className: "p-color-slider-checkers"
+                }),
+                /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                    className: "p-color-slider-thumb",
+                    ...thumbProps,
+                    style: {
+                        ...thumbProps.style,
+                        background: state.getDisplayColor().toString("css")
+                    },
+                    children: /*#__PURE__*/ (0, $hgUW1$jsx)("input", {
+                        ref: inputRef,
+                        ...inputProps,
+                        ...focusProps
+                    })
+                })
+            ]
+        })
+    });
+}
+
+
+
+function $8f49d2e6ba434739$export$6e865ea70d7724f(color) {
+    // TODO: add support for rgba colors
+    return (0, $hgUW1$parseColor)(color);
+}
+
+
+
+
+
+
+export {$ee0105641360f1c1$export$e71c4d32a2263218 as Box, $11bc53f9891a6532$export$ef2184bd89960b14 as Grid, $11bc53f9891a6532$export$9eb849b9b922d396 as GridItem, $e2f278d76a00796a$export$f51f4c4ede09e011 as Flex, $ef10b8551376ecd8$export$f5b8910cec6cf069 as Input, $2e89c7375b40283e$export$6bf0cd3a219bbade as NumberInput, $3157c40f7d0e6fa2$export$5f1af8db9871e1d6 as Text, $7794de767effca39$export$379139ebc1c2b235 as Textarea, $d95a2216d3ccf702$export$353f5b6fc5456de1 as Button, $e3f71af5eaf1c216$export$c25acd513dcc8062 as IconButton, $9230e224c5c26d9c$export$69b1032f2ecdf404 as ButtonGroup, $0ca204e719955216$export$48513f6b9f8ce62d as Checkbox, $1ab2e355b7aa4310$export$4aa08d5625cb8ead as CheckboxGroup, $3ba60d401cc6cc09$export$e44a253a59704894 as DropdownMenu, $618e53c42107439d$export$72b9695b8216309a as ComboBox, $e00a258f2e8c7774$export$d7b12c4107be0d61 as Radio, $e00a258f2e8c7774$export$a98f0dcb43a68a25 as RadioGroup, $e3711da06539818f$export$f8afaea2e9656b91 as RadioCard, $9f79d30a629e2c71$export$ef9b1a59e592288f as Select, $c35269c9504bc94d$export$5b7f4051a57920d0 as Option, $c35269c9504bc94d$export$5b7f4051a57920d0 as ListBoxItem, $c35269c9504bc94d$export$ef146090a6472d9e as Section, $c35269c9504bc94d$export$ef146090a6472d9e as ListBoxSection, $48aceaf3289ec325$export$7edc06cf1783b30f as DateInput, $11e1beb2a56c81ba$export$e1aef45b828286de as Calendar, $55bcc0e5986993c4$export$e2255cf6045e8d47 as Avatar, $f9f5a5b674d0a63f$export$1a5cb5295a7d2749 as FileUploader, $1a0bc09c6bea5bcc$export$1ff3c3f08ae963c0 as Separator, $2cc726bf01dd2fe8$export$b25a304ec7d746bb as Progress, $e1148cdb3a130657$export$3b0d6d7590275603 as Loader, $c700d45659d35204$export$3288d34c523a1192 as Tag, $fac55dfefd316398$export$b5d5cf8927ab7262 as Switch, $17f80f062b7f107f$export$472062a354075cee as Slider, $62ecff109eaa29fb$export$50e381fea3a45244 as IconTray, $6bbafdf52af7a191$export$ea98c603db73aee7 as Sticker, $28ce03a907630a4d$export$b2539bed5023c21c as Tabs, $28ce03a907630a4d$export$6d08773d2e66f8f2 as Tab, $18afd8c09c9f3065$export$54ec01a60f47d33d as Table, $727b3a4d9b39464f$export$e6a97ba2cae5bb94 as Timeline, $4bad2c10a2b6e638$export$2b77a92f1a5ad772 as Modal, $4bad2c10a2b6e638$export$33ffd74ebf07f060 as useModal, $41cc567ab0625f8f$export$eef1e68107c58ef2 as Space, $aca304249f917497$export$39299b56cfd4e361 as TagInput, $61ac9d13c14b7f5b$export$5b6b19405a83ff9d as Popover, $61ac9d13c14b7f5b$export$d7e1f420b25549ff as PopoverContent, $61ac9d13c14b7f5b$export$7dacb05d26466c3 as PopoverTrigger, $31aad62a65b342bc$export$67ea30858aaf75e3 as TagGroup, $31aad62a65b342bc$export$a79147a60006308c as TagGroupItem, $5fc28f26e128d5c0$export$d8964aec282183a3 as ThemeProvider, $5fc28f26e128d5c0$export$93d4e7f90805808f as useTheme, $d03055b0909e9e3a$export$b2103f68a961418e as ColorArea, $2abac2409e7cef4a$export$b865d4358897bb17 as ColorField, $b925f0cf89a3187d$export$9feb1bc2e5f1ccb3 as ColorPicker, $216a62c521cf5bbd$export$44fd664bcca5b6fb as ColorSlider, $a364ffae99b57fd7$export$b46792416e3d8515 as ColorSwatchPicker};
 //# sourceMappingURL=module.js.map