@parrot-co/parrot-ui 0.1.7 → 0.1.8

package/dist/main.js

@@ -1,9 +1,11 @@
 var $8zHUo$reactjsxruntime = require("react/jsx-runtime");
 var $8zHUo$react = require("react");
 var $8zHUo$reactaria = require("react-aria");
-var $8zHUo$reacticonshi = require("react-icons/hi");
 var $8zHUo$reactstately = require("react-stately");
+var $8zHUo$reacticonshi = require("react-icons/hi");
 var $8zHUo$internationalizeddate = require("@internationalized/date");
+var $8zHUo$reactstatelycolor = require("@react-stately/color");
+var $8zHUo$reactariacolor = require("@react-aria/color");
 
 
 function $parcel$export(e, n, v, s) {
@@ -33,8 +35,10 @@ $parcel$export(module.exports, "Radio", () => $e158c5cf7e190200$export$d7b12c410
 $parcel$export(module.exports, "RadioGroup", () => $e158c5cf7e190200$export$a98f0dcb43a68a25);
 $parcel$export(module.exports, "RadioCard", () => $71fcf48f7e2e9427$export$f8afaea2e9656b91);
 $parcel$export(module.exports, "Select", () => $e37831ebf64d8e7d$export$ef9b1a59e592288f);
-$parcel$export(module.exports, "Option", () => $dcfc4542aa84c062$export$36d18380658d5d20);
-$parcel$export(module.exports, "Section", () => $dcfc4542aa84c062$export$6e2c8f0811a474ce);
+$parcel$export(module.exports, "Option", () => $86685406b084d356$export$5b7f4051a57920d0);
+$parcel$export(module.exports, "Section", () => $86685406b084d356$export$ef146090a6472d9e);
+$parcel$export(module.exports, "ListBoxItem", () => $86685406b084d356$export$5b7f4051a57920d0);
+$parcel$export(module.exports, "ListBoxSection", () => $86685406b084d356$export$ef146090a6472d9e);
 $parcel$export(module.exports, "DateInput", () => $e0a58c83d4c36e4e$export$7edc06cf1783b30f);
 $parcel$export(module.exports, "Calendar", () => $284d30e280d297d3$export$e1aef45b828286de);
 $parcel$export(module.exports, "Avatar", () => $2fdd5844efb4cca1$export$e2255cf6045e8d47);
@@ -44,7 +48,7 @@ $parcel$export(module.exports, "Progress", () => $e04b6210b7063851$export$b25a30
 $parcel$export(module.exports, "Loader", () => $a28e128499dd0b02$export$3b0d6d7590275603);
 $parcel$export(module.exports, "Tag", () => $cfadb0728cf907ff$export$3288d34c523a1192);
 $parcel$export(module.exports, "Switch", () => $c5c6f63b49c9056a$export$b5d5cf8927ab7262);
-$parcel$export(module.exports, "ColorTray", () => $de38c06a5c24ee45$export$dbada5ace43900dd);
+$parcel$export(module.exports, "Slider", () => $a945a7e4eb75da9e$export$472062a354075cee);
 $parcel$export(module.exports, "IconTray", () => $43de550aebbf1320$export$50e381fea3a45244);
 $parcel$export(module.exports, "Sticker", () => $fedef2bba4e6812a$export$ea98c603db73aee7);
 $parcel$export(module.exports, "Tabs", () => $6c55ad3905040a74$export$b2539bed5023c21c);
@@ -62,6 +66,11 @@ $parcel$export(module.exports, "TagGroup", () => $d26053f02b9f370b$export$67ea30
 $parcel$export(module.exports, "TagGroupItem", () => $d26053f02b9f370b$export$a79147a60006308c);
 $parcel$export(module.exports, "ThemeProvider", () => $f2fd0cbe11b7f0dd$export$d8964aec282183a3);
 $parcel$export(module.exports, "useTheme", () => $f2fd0cbe11b7f0dd$export$93d4e7f90805808f);
+$parcel$export(module.exports, "ColorArea", () => $ce7da1514c7ab67c$export$b2103f68a961418e);
+$parcel$export(module.exports, "ColorField", () => $ca14d49a10ed918f$export$b865d4358897bb17);
+$parcel$export(module.exports, "ColorPicker", () => $b4c448f742efa2a7$export$9feb1bc2e5f1ccb3);
+$parcel$export(module.exports, "ColorSlider", () => $7796dcb4fe09bf12$export$44fd664bcca5b6fb);
+$parcel$export(module.exports, "ColorSwatchPicker", () => $799f02b9b0e744b9$export$b46792416e3d8515);
 
 
 function $d99c85a751d7ffbd$export$7e4aa119212bc614(value) {
@@ -165,6 +174,7 @@ const $eb8f27c3596a0e6b$export$e71c4d32a2263218 = /*#__PURE__*/ $8zHUo$react.for
 
 
 
+
 const $8ddcc69383feb36a$export$36308cce1deef340 = [
     "tomato",
     "red",
@@ -206,6 +216,9 @@ function $8ddcc69383feb36a$var$ps(styles) {
 }
 
 
+function $4af7da5c7dd0b9c2$export$1c4d39b152e0f791(deprecatedProp, newProp, value) {
+    if (!(0, $d99c85a751d7ffbd$export$ae45edb09e2fe7c2)(value)) console.warn(`${deprecatedProp} is deprecated and will be removed in a future release. ${newProp ? `Please use ${newProp} instead.` : ""}`);
+}
 function $4af7da5c7dd0b9c2$export$d41d9ab3de2def3d(text) {
     const str = String(text);
     let hash = 0;
@@ -302,6 +315,9 @@ const $c3a954a7c0cb5109$export$f51f4c4ede09e011 = /*#__PURE__*/ $8zHUo$react.for
 
 
 
+
+
+
 const $88fa102d91bf323a$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, $8zHUo$reactjsxruntime.jsx)(Comp, {
@@ -328,6 +344,7 @@ const $88fa102d91bf323a$export$5f1af8db9871e1d6 = /*#__PURE__*/ $8zHUo$react.for
 
 const $5a5b41d120374960$var$InputLabel = /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).forwardRef(({ children: children, className: className, color: color, ...props }, ref)=>{
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
+        ref: ref,
         size: "sm",
         color: color || "gray",
         variant: "light",
@@ -378,7 +395,7 @@ const $eae337549f49a5a2$var$SpaceContext = /*#__PURE__*/ $8zHUo$react.createCont
     classNames: {},
     compactItemWrapperAdjust: ""
 });
-function $eae337549f49a5a2$var$SpaceComponent({ children: children, compact: compact, gap: gap, className: className, ...props }, ref) {
+function $eae337549f49a5a2$export$eef1e68107c58ef2({ children: children, compact: compact, gap: gap, className: className, classNames: classNames, style: style, styles: styles, ...props }) {
     const childrenCount = $8zHUo$react.Children.count(children);
     const nodes = $8zHUo$react.useMemo(()=>{
         return $8zHUo$react.Children.map(children, (child, index)=>{
@@ -400,20 +417,22 @@ function $eae337549f49a5a2$var$SpaceComponent({ children: children, compact: com
     }, [
         children
     ]);
-    const realGap = compact ? "none" : gap;
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
         "data-compact": compact,
+        style: {
+            ...style,
+            ...styles?.wrapper
+        },
         className: (0, $62f1c614c0962470$export$a274e22fb40f762e)([
             className,
-            "p-space"
+            "p-space",
+            classNames?.wrapper
         ]),
-        ref: ref,
-        gap: realGap,
+        gap: gap ?? "none",
         ...props,
         children: nodes
     });
 }
-const $eae337549f49a5a2$export$eef1e68107c58ef2 = /*#__PURE__*/ $8zHUo$react.forwardRef($eae337549f49a5a2$var$SpaceComponent);
 function $eae337549f49a5a2$export$450c36e0b0e62ccd() {
     return $8zHUo$react.useContext($eae337549f49a5a2$var$SpaceContext);
 }
@@ -450,37 +469,35 @@ function $f2fd0cbe11b7f0dd$export$93d4e7f90805808f(options) {
 
 
 
-const $d9ffc65197682590$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$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 $ec2376a5dd0d13e6$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, $eae337549f49a5a2$export$450c36e0b0e62ccd)();
-    const internalInputRef = (0, ($parcel$interopDefault($8zHUo$react))).useRef(null);
-    const { labelProps: labelProps, inputProps: inputProps, errorMessageProps: errorMessageProps, descriptionProps: descriptionProps } = (0, $8zHUo$reactaria.useTextField)({
-        ...props,
-        inputElementType: "input",
-        label: label,
-        description: description,
-        isDisabled: isDisabled
-    }, internalInputRef);
     const theme = (0, $f2fd0cbe11b7f0dd$export$93d4e7f90805808f)();
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+        ref: wrapperRef,
+        ...props,
         "data-color": color,
         "data-radius": radius ?? theme?.radius ?? "lg",
         "data-size": size,
-        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-input-group", space.compactItemWrapperAdjust, className),
+        className: (0, $62f1c614c0962470$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, $8zHUo$reactjsxruntime.jsx)((0, $5a5b41d120374960$export$2e2bcd8739ae039), {
+                style: styles?.label,
+                className: classNames?.label,
                 color: color,
                 ...labelProps,
                 children: label
             }),
-            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+            !replaceDefaultControlWrapper && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
                 className: (0, $62f1c614c0962470$export$a274e22fb40f762e)(space.classNames, "p-input-control"),
                 "data-has-error": !!error,
                 "data-appearance": appearance,
+                "data-disabled": isDisabled,
                 stretchX: true,
                 inline: true,
                 position: "relative",
@@ -489,19 +506,14 @@ const $d9ffc65197682590$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$int
                         className: "add-on add-on-left",
                         children: prepend
                     }),
-                    /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
-                        ref: (0, $62f1c614c0962470$export$c9058316764c140e)(internalInputRef, inputRef),
-                        "data-has-left-addon": !!prepend,
-                        "data-has-right-addon": !!append,
-                        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-text-input-el"),
-                        ...inputProps
-                    }),
+                    children,
                     append && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
                         className: "add-on add-on-right",
                         children: append
                     })
                 ]
             }),
+            replaceDefaultControlWrapper && children,
             error && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $4b54f76a59afa8a5$export$2e2bcd8739ae039), {
                 validationStatus: validationStatus,
                 ...errorMessageProps,
@@ -512,13 +524,40 @@ const $d9ffc65197682590$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$int
                 variant: "light",
                 color: "gray",
                 size: "sm",
-                lineHeight: "base",
+                lineHeight: "short",
                 ...descriptionProps,
                 children: description
             })
         ]
     });
-});
+}
+$ec2376a5dd0d13e6$export$a455218a85c89869.displayName = "Field";
+
+
+function $d9ffc65197682590$export$f5b8910cec6cf069({ className: className, classNames: classNames, style: style, styles: styles, inputRef: inputRef, ...props }) {
+    const internalInputRef = (0, ($parcel$interopDefault($8zHUo$react))).useRef(null);
+    const { labelProps: labelProps, inputProps: inputProps, errorMessageProps: errorMessageProps, descriptionProps: descriptionProps } = (0, $8zHUo$reactaria.useTextField)({
+        ...props,
+        inputElementType: "input"
+    }, internalInputRef);
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $ec2376a5dd0d13e6$export$a455218a85c89869), {
+        labelProps: labelProps,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        className: className,
+        classNames: classNames,
+        styles: styles,
+        style: style,
+        ...props,
+        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
+            ref: (0, $62f1c614c0962470$export$c9058316764c140e)(internalInputRef, inputRef),
+            "data-has-left-addon": !!props.prepend,
+            "data-has-right-addon": !!props.append,
+            className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-text-input-el"),
+            ...inputProps
+        })
+    });
+}
 $d9ffc65197682590$export$f5b8910cec6cf069.displayName = "Input";
 
 
@@ -647,7 +686,7 @@ const $5a6f28f3fd58ff6e$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, ($parcel$int
     const space = (0, $eae337549f49a5a2$export$450c36e0b0e62ccd)();
     const buttonGroupProps = (0, $7f70742e736041ff$export$749e21be8b14b968)();
     const theme = (0, $f2fd0cbe11b7f0dd$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
     };
@@ -678,7 +717,10 @@ const $5a6f28f3fd58ff6e$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, ($parcel$int
     }
     const Comp = as;
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)(Comp, {
-        style: style,
+        style: {
+            ...style,
+            ...styles?.base
+        },
         "data-is-toggle": isToggle,
         "data-pressed": isPressed,
         "data-radius": radius,
@@ -690,20 +732,19 @@ const $5a6f28f3fd58ff6e$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, ($parcel$int
         "data-selected": state.isSelected,
         className: (0, $62f1c614c0962470$export$a274e22fb40f762e)((0, $4af7da5c7dd0b9c2$export$2db1d02db18b2d82)("size", size), className, "p-button", space.classNames),
         ref: (0, $62f1c614c0962470$export$c9058316764c140e)(ref, buttonRef),
-        form: otherProps.form,
+        form: form,
         ...buttonProps,
         children: [
             prepend,
-            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("span", {
-                style: {
-                    padding: isIconButton ? undefined : "0 6px",
-                    lineHeight: 0
-                },
-                children: children
-            }),
+            children,
             isLoading ? /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $a28e128499dd0b02$export$3b0d6d7590275603), {
+                className: (0, $62f1c614c0962470$export$a274e22fb40f762e)([
+                    "p-button-loader",
+                    classNames?.loader
+                ]),
                 style: {
-                    marginLeft: 8
+                    marginLeft: 8,
+                    ...styles?.loader
                 },
                 color: "inherit",
                 size: "xs"
@@ -737,88 +778,73 @@ $3af04cd154cf4de1$export$c25acd513dcc8062.displayName = "IconButton";
 
 
 
-
-
-
-
-const $77c71203b3212c65$export$6bf0cd3a219bbade = /*#__PURE__*/ $8zHUo$react.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 $77c71203b3212c65$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, $eae337549f49a5a2$export$450c36e0b0e62ccd)();
     const internalInputRef = $8zHUo$react.useRef(null);
     const { locale: locale } = (0, $8zHUo$reactaria.useLocale)();
     const state = (0, $8zHUo$reactstately.useNumberFieldState)({
-        ...rest,
+        ...ariaProps,
         locale: locale
     });
-    const { errorMessageProps: errorMessageProps, descriptionProps: descriptionProps, labelProps: labelProps, groupProps: groupProps, inputProps: inputProps, incrementButtonProps: incrementButtonProps, decrementButtonProps: decrementButtonProps } = (0, $8zHUo$reactaria.useNumberField)(rest, state, internalInputRef);
-    const theme = (0, $f2fd0cbe11b7f0dd$export$93d4e7f90805808f)();
-    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
-        stack: true,
-        gap: "3xs",
-        ref: ref,
-        "data-radius": radius ?? theme?.radius ?? "lg",
-        "data-color": color,
-        "data-size": size,
-        stretchX: true,
-        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-input-group", space.compactItemWrapperAdjust),
-        children: [
-            rest.label && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $5a5b41d120374960$export$2e2bcd8739ae039), {
-                ...labelProps,
-                children: rest.label
-            }),
-            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
-                gap: "4xs",
-                ...groupProps,
-                className: "p-input-container",
-                children: [
-                    showSteppers && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $3af04cd154cf4de1$export$c25acd513dcc8062), {
-                        ...decrementButtonProps,
-                        radius: "md",
-                        color: color,
-                        variant: "outline",
-                        size: size,
-                        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reacticonshi.HiMinus), {
-                            size: 20
-                        })
-                    }),
-                    /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
-                        ref: (0, $62f1c614c0962470$export$c9058316764c140e)(internalInputRef, ref),
-                        placeholder: placeholder,
-                        className: (0, $62f1c614c0962470$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, $8zHUo$reactjsxruntime.jsx)((0, $3af04cd154cf4de1$export$c25acd513dcc8062), {
-                        ...incrementButtonProps,
-                        radius: "md",
-                        color: color,
-                        variant: "outline",
-                        size: size,
-                        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reacticonshi.HiPlus), {})
-                    })
-                ]
-            }),
-            rest.description && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
-                weight: "regular",
-                size: "sm",
-                color: "gray",
-                variant: "light",
-                lineHeight: "base",
-                ...descriptionProps,
-                as: "div",
-                children: rest.description
-            }),
-            rest.error && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $4b54f76a59afa8a5$export$2e2bcd8739ae039), {
-                ...errorMessageProps,
-                children: rest.error
-            })
-        ]
+    const { errorMessageProps: errorMessageProps, descriptionProps: descriptionProps, labelProps: labelProps, groupProps: groupProps, inputProps: inputProps, incrementButtonProps: incrementButtonProps, decrementButtonProps: decrementButtonProps } = (0, $8zHUo$reactaria.useNumberField)(ariaProps, state, internalInputRef);
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $ec2376a5dd0d13e6$export$a455218a85c89869), {
+        classNames: classNames,
+        color: color,
+        size: size,
+        labelProps: labelProps,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        error: error,
+        label: label,
+        replaceDefaultControlWrapper: true,
+        ...props,
+        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+            gap: "4xs",
+            ...groupProps,
+            className: "p-input-container",
+            children: [
+                showSteppers && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $3af04cd154cf4de1$export$c25acd513dcc8062), {
+                    ...decrementButtonProps,
+                    radius: "md",
+                    color: color,
+                    variant: "outline",
+                    size: size,
+                    className: classNames?.decrement,
+                    style: styles?.decrement,
+                    children: decrementIcon
+                }),
+                /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
+                    style: styles?.input,
+                    ref: (0, $62f1c614c0962470$export$c9058316764c140e)(internalInputRef, inputRef),
+                    placeholder: placeholder,
+                    className: (0, $62f1c614c0962470$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, $8zHUo$reactjsxruntime.jsx)((0, $3af04cd154cf4de1$export$c25acd513dcc8062), {
+                    ...incrementButtonProps,
+                    radius: "md",
+                    color: color,
+                    variant: "outline",
+                    size: size,
+                    className: classNames?.increment,
+                    style: styles?.increment,
+                    children: incrementIcon
+                })
+            ]
+        })
     });
-});
-$77c71203b3212c65$export$6bf0cd3a219bbade.displayName = "NumberInput";
+}
 
 
 
@@ -968,7 +994,7 @@ $0f8ef6f4acac1766$export$4aa08d5625cb8ead.displayName = "CheckboxGroup";
 
 
 const $f88e10ca2ba68239$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$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, ($parcel$interopDefault($8zHUo$react))).useContext((0, $0f8ef6f4acac1766$export$f9c6924e160136d1));
     const groupState = groupContext?.state;
@@ -992,7 +1018,11 @@ const $f88e10ca2ba68239$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, ($parcel$int
     const resolvedAppearance = appearance || groupProps?.appearance || "outline";
     const resolvedSize = size || groupProps?.size || "md";
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("label", {
-        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)(className, "p-checkbox"),
+        style: {
+            ...style,
+            ...styles?.wrapper
+        },
+        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)(className, "p-checkbox", classNames?.wrapper),
         "data-disabled": inputProps?.disabled,
         ref: ref,
         children: [
@@ -1005,9 +1035,16 @@ const $f88e10ca2ba68239$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, ($parcel$int
                 })
             }),
             /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("div", {
+                style: {
+                    ...style,
+                    ...styles?.checkbox
+                },
                 "data-color": resolvedColor,
                 "data-radius": getRadius(),
-                className: "p-fake-checkbox",
+                className: (0, $62f1c614c0962470$export$a274e22fb40f762e)([
+                    "p-fake-checkbox",
+                    classNames?.checkbox
+                ]),
                 "data-focused": isFocusVisible,
                 "aria-hidden": "true",
                 "data-checked": isSelected && !props.isIndeterminate,
@@ -1016,6 +1053,10 @@ const $f88e10ca2ba68239$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, ($parcel$int
                 "data-appearance": resolvedAppearance,
                 children: [
                     isSelected && !props.isIndeterminate && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("svg", {
+                        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)([
+                            "p-checkbox-icon",
+                            classNames?.icon
+                        ]),
                         stroke: "white",
                         width: "0.75rem",
                         height: "0.75rem",
@@ -1032,6 +1073,10 @@ const $f88e10ca2ba68239$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, ($parcel$int
                         })
                     }),
                     props.isIndeterminate && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $eb8f27c3596a0e6b$export$e71c4d32a2263218), {
+                        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)([
+                            "p-checkbox-icon",
+                            classNames?.icon
+                        ]),
                         style: {
                             background: "var(--color-12)",
                             width: "70%",
@@ -1062,25 +1107,39 @@ $f88e10ca2ba68239$export$48513f6b9f8ce62d.displayName = "checkbox";
 
 
 
-function $9a1eb1c261c8b852$export$91527519cfe8e396({ state: state, children: children, popoverRef: popoverRef, ...props }) {
+function $9a1eb1c261c8b852$export$91527519cfe8e396({ state: state, children: children, popoverRef: popoverRef, style: style, styles: styles, classNames: classNames, className: className, ...props }) {
     const internalPopoverRef = $8zHUo$react.useRef(null);
     const theme = (0, $f2fd0cbe11b7f0dd$export$93d4e7f90805808f)();
     const { popoverProps: popoverProps, underlayProps: underlayProps } = (0, $8zHUo$reactaria.usePopover)({
         ...props,
         popoverRef: internalPopoverRef
     }, state);
+    const { style: internalStyle, ...otherPopoverProps } = popoverProps;
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $8zHUo$reactaria.Overlay), {
         children: [
             /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
                 ...underlayProps,
-                className: "underlay"
+                style: styles?.underlay,
+                className: (0, $62f1c614c0962470$export$a274e22fb40f762e)([
+                    "underlay",
+                    classNames?.underlay
+                ])
             }),
             /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
                 "data-color": theme?.color,
                 "data-radius": theme?.radius,
-                ...popoverProps,
                 ref: (0, $62f1c614c0962470$export$c9058316764c140e)(popoverRef, internalPopoverRef),
-                className: "p-popover",
+                className: (0, $62f1c614c0962470$export$a274e22fb40f762e)([
+                    "p-popover",
+                    className,
+                    classNames?.wrapper
+                ]),
+                style: {
+                    ...internalStyle,
+                    ...style,
+                    ...styles?.wrapper
+                },
+                ...otherPopoverProps,
                 children: children
             })
         ]
@@ -1334,30 +1393,38 @@ const $3b903582a5253460$export$e44a253a59704894 = {
 
 
 
-function $fc43ab93aaa777d9$export$3d7d0414f6db67e7({ children: children, renderOption: renderOption, valueKey: valueKey, sectionKey: sectionKey, getSectionLabel: getSectionLabel, labelKey: labelKey, items: items }) {
+const $86685406b084d356$export$5b7f4051a57920d0 = (0, $8zHUo$reactstately.Item);
+const $86685406b084d356$export$ef146090a6472d9e = (0, $8zHUo$reactstately.Section);
+
+
+function $fc43ab93aaa777d9$export$3d7d0414f6db67e7({ children: children, renderOption: renderOption, valueKey: valueKey, sectionKey: sectionKey, renderSectionLabel: renderSectionLabel, labelKey: labelKey, items: items }) {
     const hasChildren = $8zHUo$react.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, $8zHUo$reactjsxruntime.jsx)((0, $dcfc4542aa84c062$export$6e2c8f0811a474ce), {
+        if (item?.[sectionKey]) return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $86685406b084d356$export$ef146090a6472d9e), {
             items: sectionChildren,
-            title: getSectionLabel?.(item),
-            children: (item)=>/*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $dcfc4542aa84c062$export$36d18380658d5d20), {
+            title: renderSectionLabel?.(item),
+            children: (item)=>/*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $86685406b084d356$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, $8zHUo$reactjsxruntime.jsx)((0, $dcfc4542aa84c062$export$36d18380658d5d20), {
+        return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $86685406b084d356$export$5b7f4051a57920d0), {
             textValue: label,
             children: renderOption?.(item) ?? label
-        }, item?.[valueKey ?? "id"]);
+        }, value);
     };
 }
-
-
+function $fc43ab93aaa777d9$export$4c687b6f1150e71b(props) {
+    const children = $8zHUo$react.useMemo(()=>{
+        return $fc43ab93aaa777d9$export$3d7d0414f6db67e7(props);
+    }, []);
+    return children;
+}
 
 
 
@@ -1372,70 +1439,74 @@ function $71edc9998a9f3b41$export$1e60abce570c2b01(props) {
     });
 }
 function $71edc9998a9f3b41$export$961f16f221737ce2() {
-    const context = $8zHUo$react.useContext($71edc9998a9f3b41$var$ListBoxContext);
-    if (!context) throw new Error("ListBox components must be rendered within the ListBoxProvider");
-    return context;
+    const ctx = $8zHUo$react.useContext($71edc9998a9f3b41$var$ListBoxContext);
+    if (!ctx) throw new Error("ListBox components must be rendered within the ListBoxProvider");
+    return ctx;
 }
 
 
 
 
-function $dcfc4542aa84c062$export$41f133550aa26f48({ state: state, color: color, width: width = 300, showSelectedMarker: showSelectedMarker = true, listBoxRef: listBoxRef, ...props }) {
+function $dcfc4542aa84c062$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, $fc43ab93aaa777d9$export$4c687b6f1150e71b)(props);
     const internalState = (0, $8zHUo$reactstately.useListState)({
         ...props,
-        children: (0, $fc43ab93aaa777d9$export$3d7d0414f6db67e7)(props)
+        children: children
     });
     const listRef = $8zHUo$react.useRef(null);
     const listState = state || internalState;
-    const { listBoxProps: listBoxProps } = (0, $8zHUo$reactaria.useListBox)(props, listState, listRef);
+    const { listBoxProps: listBoxProps } = (0, $8zHUo$reactaria.useListBox)({
+        ...props,
+        label: props.label ?? "Select an option"
+    }, listState, listRef);
     const options = [
         ...listState.collection
     ];
     const theme = (0, $f2fd0cbe11b7f0dd$export$93d4e7f90805808f)();
+    function renderEmptyState() {
+        return renderEmpty?.() ?? /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
+            color: "gray",
+            variant: "lighter",
+            children: "No options"
+        });
+    }
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $71edc9998a9f3b41$export$1e60abce570c2b01), {
         ...props,
-        showSelectedMarker: showSelectedMarker,
-        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
-            "data-color": color ?? theme?.color ?? "gray",
+        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+            as: "ul",
+            stack: true,
+            gap: "none",
+            className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-list-box-wrapper", classNames?.wrapper, className),
+            ref: (0, $62f1c614c0962470$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, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
-                as: "ul",
-                stack: true,
-                gap: "none",
-                className: "p-list-box-wrapper",
-                ref: (0, $62f1c614c0962470$export$c9058316764c140e)(listRef, listBoxRef),
-                "data-radius": "lg",
-                ...listBoxProps,
-                children: [
-                    options.length === 0 && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
-                        justify: "center",
-                        align: "center",
-                        style: {
-                            height: 50
-                        },
-                        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
-                            color: "gray",
-                            variant: "light",
-                            align: "center",
-                            children: "No Options"
-                        })
-                    }),
-                    options.map((item)=>{
-                        return item.type === "section" ? /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($dcfc4542aa84c062$var$ListSection, {
-                            section: item,
-                            state: listState
-                        }, item.key) : /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($dcfc4542aa84c062$var$ListOption, {
-                            state: listState,
-                            item: item
-                        }, item.key);
-                    })
-                ]
-            })
+            ...listBoxProps,
+            children: [
+                options.length === 0 && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+                    justify: "center",
+                    align: "center",
+                    style: {
+                        height: 50
+                    },
+                    children: renderEmptyState()
+                }),
+                options.map((item)=>{
+                    return item.type === "section" ? /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($dcfc4542aa84c062$var$ListSection, {
+                        className: classNames?.section,
+                        section: item,
+                        state: listState
+                    }, item.key) : /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($dcfc4542aa84c062$var$ListOption, {
+                        className: classNames?.option,
+                        state: listState,
+                        item: item
+                    }, item.key);
+                })
+            ]
         })
     });
 }
@@ -1444,24 +1515,28 @@ function $dcfc4542aa84c062$var$ListOption({ state: state, item: item }) {
     const { optionProps: optionProps, isDisabled: isDisabled, isFocusVisible: isFocusVisible, isFocused: isFocused, isPressed: isPressed, isSelected: isSelected } = (0, $8zHUo$reactaria.useOption)({
         key: item.key
     }, state, optionRef);
-    const listBoxContext = (0, $71edc9998a9f3b41$export$961f16f221737ce2)();
+    const { showSelectionIndicator: showSelectionIndicator = true, renderSelectionIndicator: renderSelectionIndicator } = (0, $71edc9998a9f3b41$export$961f16f221737ce2)().props;
+    const { className: className, classNames: classNames, style: style, styles: styles, color: color, textValue: textValue, title: title, ...otherProps } = item.props;
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("li", {
-        className: "p-list-option",
+        style: {
+            ...style,
+            ...styles?.wrapper
+        },
+        className: (0, $62f1c614c0962470$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, $ff6fce0e059b3a1a$export$30a06c8d3562193f)(item.props, [
-            "textValue"
-        ]),
+        ...otherProps,
         ref: optionRef,
         children: [
             item.rendered,
-            isSelected && listBoxContext.props.showSelectedMarker && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reacticonshi.HiCheck), {
-                className: "selected-marker"
-            })
+            isSelected && showSelectionIndicator && (renderSelectionIndicator?.(item) ?? /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+                children: "x"
+            }))
         ]
     });
 }
@@ -1471,19 +1546,25 @@ function $dcfc4542aa84c062$var$ListSection({ state: state, section: section }) {
         "aria-label": section["aria-label"]
     });
     const listBoxContext = (0, $71edc9998a9f3b41$export$961f16f221737ce2)();
-    function getChildren() {
+    const { className: className, classNames: classNames, style: style, styles: styles } = section.props;
+    const children = $8zHUo$react.useMemo(()=>{
         if (state.collection.getChildren) return [
             ...state.collection.getChildren(section.key)
         ];
         return [];
-    }
+    }, []);
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
         gap: "sm",
         stack: true,
-        className: "p-list-section",
+        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)(className, "p-list-section", classNames?.wrapper),
+        style: {
+            ...style,
+            ...styles?.wrapper
+        },
         children: [
-            section.key !== state.collection.getFirstKey() && listBoxContext.props.showSeparator && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("li", {
-                className: "p-list-separator"
+            section.key !== state.collection.getFirstKey() && listBoxContext.props.showSectionSeparator && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("li", {
+                style: styles?.separator,
+                className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-list-separator", classNames?.separator)
             }),
             /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
                 gap: "none",
@@ -1491,20 +1572,18 @@ function $dcfc4542aa84c062$var$ListSection({ state: state, section: section }) {
                 as: "li",
                 ...itemProps,
                 children: [
-                    section.rendered && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
-                        className: "p-list-section-header",
-                        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
-                            weight: "regular",
-                            size: "xs",
-                            as: "div",
-                            variant: "light",
-                            ...headingProps,
-                            children: section.rendered
-                        })
+                    section.rendered && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
+                        style: styles?.heading,
+                        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-list-section-header", classNames?.heading),
+                        as: "div",
+                        variant: "light",
+                        ...headingProps,
+                        children: section.rendered
                     }),
                     /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("ul", {
+                        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)(classNames?.items),
                         ...groupProps,
-                        children: getChildren().map((node)=>{
+                        children: children.map((node)=>{
                             return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($dcfc4542aa84c062$var$ListOption, {
                                 item: node,
                                 state: state
@@ -1516,8 +1595,7 @@ function $dcfc4542aa84c062$var$ListSection({ state: state, section: section }) {
         ]
     });
 }
-const $dcfc4542aa84c062$export$36d18380658d5d20 = (0, $8zHUo$reactstately.Item);
-const $dcfc4542aa84c062$export$6e2c8f0811a474ce = (0, $8zHUo$reactstately.Section);
+
 
 
 
@@ -1790,7 +1868,6 @@ $71fcf48f7e2e9427$export$f8afaea2e9656b91.displayName = "RadioCard";
 
 
 
-
 const $cfadb0728cf907ff$export$3288d34c523a1192 = /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$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, ($parcel$interopDefault($8zHUo$react))).useMemo(()=>{
         if (hashValue) return (0, $4af7da5c7dd0b9c2$export$e4369cabd7e84cd9)(hashValue);
@@ -1822,44 +1899,46 @@ $cfadb0728cf907ff$export$3288d34c523a1192.displayName = "Tag";
 
 
 
-
-
-function $e37831ebf64d8e7d$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 $e37831ebf64d8e7d$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 = $8zHUo$react.useMemo(()=>{
         if (!value) return null;
         if (selectionMode === "single") return [
             value
         ];
         if (isMultiple && !(0, $d99c85a751d7ffbd$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, $fc43ab93aaa777d9$export$4c687b6f1150e71b)(props);
     const space = (0, $eae337549f49a5a2$export$450c36e0b0e62ccd)();
     const triggerState = (0, $8zHUo$reactstately.useMenuTriggerState)({});
     const listState = (0, $8zHUo$reactstately.useListState)({
         ...props,
-        selectedKeys: getValue(value),
-        defaultSelectedKeys: getValue(defaultValue),
+        selectedKeys: _value,
+        defaultSelectedKeys: _value,
         selectionMode: selectionMode,
-        children: (0, $fc43ab93aaa777d9$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 = $8zHUo$react.useRef(null);
     const theme = (0, $f2fd0cbe11b7f0dd$export$93d4e7f90805808f)();
-    const { menuTriggerProps: menuTriggerProps } = (0, $8zHUo$reactaria.useMenuTrigger)({
+    color = color ?? theme?.color;
+    const { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = (0, $8zHUo$reactaria.useMenuTrigger)({
         type: "listbox",
         trigger: "press",
         isDisabled: false
@@ -1868,8 +1947,10 @@ function $e37831ebf64d8e7d$export$ef9b1a59e592288f({ label: label, selectionMode
     const selectedItems = [
         ...listState.selectionManager.selectedKeys
     ].map((item)=>listState.collection.getItem(item));
-    function content() {
+    const content = $8zHUo$react.useMemo(()=>{
         if (selectedItems.length === 0) return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
+            style: styles?.placeholder,
+            className: classNames?.placeholder,
             color: color,
             variant: "lighter",
             children: props.placeholder
@@ -1877,67 +1958,64 @@ function $e37831ebf64d8e7d$export$ef9b1a59e592288f({ label: label, selectionMode
         if (isMultiple) return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
             gap: "3xs",
             wrap: "wrap",
-            children: selectedItems.map((item)=>/*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $cfadb0728cf907ff$export$3288d34c523a1192), {
-                    append: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reacticonshi.HiX), {}),
-                    color: (0, $4af7da5c7dd0b9c2$export$e4369cabd7e84cd9)(item?.textValue ?? ""),
+            children: selectedItems.map((item)=>renderValue?.(item?.value) ?? /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $cfadb0728cf907ff$export$3288d34c523a1192), {
+                    size: "md",
+                    variant: "pastel",
+                    color: color,
                     children: item?.textValue
                 }, item?.key))
         });
         return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
+            as: "div",
             variant: "default",
             color: color === "gray" ? "black" : color,
-            className: "single-value",
+            className: (0, $62f1c614c0962470$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, $8zHUo$reactjsxruntime.jsxs)((0, $eb8f27c3596a0e6b$export$e71c4d32a2263218), {
-        style: style,
-        as: "span",
-        position: "relative",
-        stretchX: true,
+    }, [
+        selectedItems.length,
+        isMultiple,
+        selectedItems[0]?.value
+    ]);
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("div", {
+        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-select", className, classNames?.wrapper),
+        style: {
+            ...style,
+            ...styles?.wrapper
+        },
         children: [
-            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
-                "data-radius": radius ?? theme?.radius ?? "lg",
-                gap: "3xs",
-                stack: true,
-                className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-input-group", className, space.compactItemWrapperAdjust),
-                "data-size": size,
-                "data-color": color ?? "gray",
-                children: [
-                    label && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $5a5b41d120374960$export$2e2bcd8739ae039), {
-                        color: color,
-                        children: label
-                    }),
-                    /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("div", {
-                        "data-selection-mode": selectionMode,
-                        tabIndex: 0,
-                        role: "button",
-                        ref: triggerRef,
-                        color: "gray",
-                        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-input-control", "p-select", space.classNames),
-                        "data-appearance": appearance,
-                        ...triggerProps,
-                        children: [
-                            content(),
-                            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reacticonshi.HiSelector), {
-                                className: "selector",
-                                size: 18
-                            })
-                        ]
-                    }),
-                    error && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $4b54f76a59afa8a5$export$2e2bcd8739ae039), {
-                        children: error
-                    }),
-                    description && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
-                        as: "div",
-                        variant: "light",
-                        color: "gray",
-                        size: "sm",
-                        children: description
-                    })
-                ]
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $ec2376a5dd0d13e6$export$a455218a85c89869), {
+                replaceDefaultControlWrapper: true,
+                label: label,
+                error: error,
+                description: description,
+                className: className,
+                classNames: classNames,
+                size: size,
+                radius: radius,
+                children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("div", {
+                    style: styles?.trigger,
+                    "data-selection-mode": selectionMode,
+                    tabIndex: 0,
+                    role: "button",
+                    ref: triggerRef,
+                    color: "gray",
+                    className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-input-control", "p-select-trigger", space.classNames, classNames?.trigger),
+                    "data-appearance": appearance,
+                    ...triggerProps,
+                    children: [
+                        content,
+                        /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reacticonshi.HiSelector), {
+                            className: "selector",
+                            size: 18
+                        })
+                    ]
+                })
             }),
             triggerState.isOpen && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $9a1eb1c261c8b852$export$91527519cfe8e396), {
+                className: classNames?.popover,
+                style: styles?.popover,
                 placement: "bottom start",
                 offset: 4,
                 shouldUpdatePosition: true,
@@ -1945,12 +2023,13 @@ function $e37831ebf64d8e7d$export$ef9b1a59e592288f({ label: label, selectionMode
                 state: triggerState,
                 children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $dcfc4542aa84c062$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
                 })
             })
@@ -1973,6 +2052,7 @@ function $e37831ebf64d8e7d$export$ef9b1a59e592288f({ label: label, selectionMode
 
 
 
+
 function $5a757815ed1b91e3$var$createCalendar() {
     return new (0, $8zHUo$internationalizeddate.GregorianCalendar)();
 }
@@ -2349,13 +2429,15 @@ $e0a58c83d4c36e4e$export$7edc06cf1783b30f.displayName = "DateInput";
 
 
 
-const $2fdd5844efb4cca1$export$e2255cf6045e8d47 = /*#__PURE__*/ $8zHUo$react.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 $2fdd5844efb4cca1$export$e2255cf6045e8d47 = /*#__PURE__*/ $8zHUo$react.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] = $8zHUo$react.useState(false);
     const theme = (0, $f2fd0cbe11b7f0dd$export$93d4e7f90805808f)();
     function getAvatarRadius() {
-        if (theme?.avatarRadiusSize && shape !== "circle") return theme.avatarRadiusSize;
-        if (shape === "circle") return "full";
-        return "md";
+        (0, $4af7da5c7dd0b9c2$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 = $8zHUo$react.useMemo(()=>{
         const hash = (0, $4af7da5c7dd0b9c2$export$d41d9ab3de2def3d)(name || "");
@@ -2365,6 +2447,10 @@ const $2fdd5844efb4cca1$export$e2255cf6045e8d47 = /*#__PURE__*/ $8zHUo$react.for
     ]);
     const renderContent = ()=>{
         if (src && !imageError) return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("img", {
+            className: (0, $62f1c614c0962470$export$a274e22fb40f762e)([
+                "avatar-img",
+                classNames?.img
+            ]),
             onLoad: ()=>setImageError(false),
             onError: ()=>setImageError(true),
             src: src,
@@ -2372,14 +2458,24 @@ const $2fdd5844efb4cca1$export$e2255cf6045e8d47 = /*#__PURE__*/ $8zHUo$react.for
         });
         if (imageError && !children) return fallback;
         if (!src && !children && name) return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("span", {
+            style: styles?.fallback,
+            className: (0, $62f1c614c0962470$export$a274e22fb40f762e)([
+                "avatar-fallback",
+                classNames?.fallback
+            ]),
             children: name.charAt(0)
         });
         return children;
     };
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+        style: {
+            ...style,
+            ...styles?.base
+        },
         className: (0, $62f1c614c0962470$export$a274e22fb40f762e)([
             "p-avatar",
-            className
+            className,
+            classNames?.base
         ]),
         "data-radius": getAvatarRadius(),
         "data-color": color ?? defaultColor,
@@ -2746,8 +2842,97 @@ $c5c6f63b49c9056a$export$b5d5cf8927ab7262.displayName = "Switch";
 
 
 
-function $de38c06a5c24ee45$export$dbada5ace43900dd(props) {
-    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {});
+
+
+
+
+function $a945a7e4eb75da9e$export$472062a354075cee({ className: className, classNames: classNames, style: style, styles: styles, name: name, size: size = "sm", orientation: orientation = "horizontal", ...props }) {
+    const trackRef = $8zHUo$react.useRef(null);
+    const numberFormatter = (0, $8zHUo$reactaria.useNumberFormatter)();
+    const state = (0, $8zHUo$reactstately.useSliderState)({
+        ...props,
+        numberFormatter: numberFormatter
+    });
+    const { trackProps: trackProps, labelProps: labelProps } = (0, $8zHUo$reactaria.useSlider)({
+        ...props,
+        "aria-label": props["aria-label"] ?? "slider"
+    }, state, trackRef);
+    const percent = state.getThumbPercent(0);
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("div", {
+        "data-size": size,
+        style: {
+            ...style,
+            ...styles?.wrapper
+        },
+        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-slider", orientation, className, classNames?.wrapper),
+        children: [
+            props.label && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $5a5b41d120374960$export$2e2bcd8739ae039), {
+                style: styles?.label,
+                className: classNames?.label,
+                ...labelProps,
+                children: props.label
+            }),
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("div", {
+                ref: trackRef,
+                className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-slider-track", classNames?.track),
+                ...trackProps,
+                children: [
+                    /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+                        style: {
+                            width: `${percent * 100}%`
+                        },
+                        className: "p-slider-track-fill"
+                    }),
+                    /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($a945a7e4eb75da9e$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 $a945a7e4eb75da9e$var$Thumb({ state: state, trackRef: trackRef, index: index, name: name, className: className, classNames: classNames, styles: styles, style: style }) {
+    const inputRef = $8zHUo$react.useRef(null);
+    const { thumbProps: thumbProps, inputProps: inputProps, isDragging: isDragging } = (0, $8zHUo$reactaria.useSliderThumb)({
+        index: index,
+        trackRef: trackRef,
+        inputRef: inputRef,
+        name: name
+    }, state);
+    const { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $8zHUo$reactaria.useFocusRing)();
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("div", {
+        "data-dragging": isDragging,
+        "data-focus-visible": isFocusVisible,
+        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-slider-thumb", className, classNames?.wrapper),
+        style: {
+            ...style,
+            ...styles?.wrapper
+        },
+        ...thumbProps,
+        children: [
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+                style: styles?.inner,
+                className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-slider-thumb-inner", classNames?.inner)
+            }),
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reactaria.VisuallyHidden), {
+                children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
+                    ref: inputRef,
+                    ...(0, $8zHUo$reactaria.mergeProps)(inputProps, focusProps)
+                })
+            })
+        ]
+    });
 }
 
 
@@ -3295,7 +3480,7 @@ function $0f347092d3465402$export$7dacb05d26466c3({ children: children }) {
         ...triggerProps
     });
 }
-function $0f347092d3465402$export$d7e1f420b25549ff({ children: children, offset: offset = 12, placement: placement, style: style, width: width = 160, className: className, ...props }) {
+function $0f347092d3465402$export$d7e1f420b25549ff({ children: children, offset: offset = 12, placement: placement, style: style, className: className, ...props }) {
     const ctx = $8zHUo$react.useContext($0f347092d3465402$var$PopoverContext);
     if (!ctx) throw "PopoverContent must be used withing a Popover component";
     if (!ctx.overlayState?.isOpen) return null;
@@ -3310,7 +3495,6 @@ function $0f347092d3465402$export$d7e1f420b25549ff({ children: children, offset:
             "data-radius": "md",
             className: (0, $62f1c614c0962470$export$a274e22fb40f762e)(className, "p-popover-content"),
             style: {
-                width: width,
                 ...style
             },
             children: children
@@ -3429,4 +3613,509 @@ const $d26053f02b9f370b$export$a79147a60006308c = (0, $8zHUo$reactstately.Item);
 
 
 
+
+
+
+
+
+
+
+
+function $b4c448f742efa2a7$export$9feb1bc2e5f1ccb3({ onChange: onChange, color: colorProp }) {
+    const [colorSpace, setColorSpace] = $8zHUo$react.useState("hex");
+    const [color, setColor] = (0, $c410efc80bcce413$export$40bfa8c7b0832715)(colorProp, (0, $8zHUo$reactstatelycolor.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, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+        stack: true,
+        style: {
+            width: 240
+        },
+        children: [
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $ce7da1514c7ab67c$export$b2103f68a961418e), {
+                onChange: handleChange,
+                onChangeEnd: handleChange,
+                xChannel: s,
+                yChannel: l,
+                value: color ?? (0, $8zHUo$reactstatelycolor.parseColor)("hsl(219, 79%, 66%)"),
+                style: {
+                    width: "100%",
+                    height: 140
+                }
+            }),
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+                stack: true,
+                style: {
+                    padding: 8
+                },
+                children: [
+                    /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+                        stack: true,
+                        gap: "2xs",
+                        children: [
+                            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $7796dcb4fe09bf12$export$44fd664bcca5b6fb), {
+                                value: color,
+                                onChange: handleChange,
+                                onChangeEnd: handleChange,
+                                channel: h
+                            }),
+                            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $7796dcb4fe09bf12$export$44fd664bcca5b6fb), {
+                                value: color,
+                                onChange: handleChange,
+                                onChangeEnd: handleChange,
+                                channel: "alpha"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+                        stack: true,
+                        children: [
+                            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+                                style: {
+                                    width: "100%"
+                                },
+                                gap: "3xs",
+                                children: [
+                                    colorSpace === "hex" && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $eae337549f49a5a2$export$eef1e68107c58ef2), {
+                                        style: {
+                                            gap: 3
+                                        },
+                                        compact: true,
+                                        children: [
+                                            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $ca14d49a10ed918f$export$b865d4358897bb17), {
+                                                value: color,
+                                                onChange: handleChange,
+                                                size: "sm",
+                                                style: {
+                                                    width: "60%"
+                                                },
+                                                appearance: "filled",
+                                                placeholder: "Add a color"
+                                            }),
+                                            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $77c71203b3212c65$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, $8zHUo$reactjsxruntime.jsxs)((0, $eae337549f49a5a2$export$eef1e68107c58ef2), {
+                                        style: {
+                                            gap: 3
+                                        },
+                                        compact: true,
+                                        children: [
+                                            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $77c71203b3212c65$export$6bf0cd3a219bbade), {
+                                                value: colorSpace === "rgb" ? rgbaColor.getChannelValue(r) : color.getChannelValue(h),
+                                                appearance: "filled",
+                                                size: "sm"
+                                            }),
+                                            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $77c71203b3212c65$export$6bf0cd3a219bbade), {
+                                                value: colorSpace === "rgb" ? rgbaColor.getChannelValue(g) : color.getChannelValue(s),
+                                                appearance: "filled",
+                                                size: "sm"
+                                            }),
+                                            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $77c71203b3212c65$export$6bf0cd3a219bbade), {
+                                                value: colorSpace === "rgb" ? rgbaColor.getChannelValue(b) : color.getChannelValue(l),
+                                                appearance: "filled",
+                                                size: "sm"
+                                            }),
+                                            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $77c71203b3212c65$export$6bf0cd3a219bbade), {
+                                                formatOptions: {
+                                                    style: "percent",
+                                                    maximumFractionDigits: 0
+                                                },
+                                                value: colorSpace === "rgb" ? rgbaColor.getChannelValue("alpha") : color.getChannelValue("alpha"),
+                                                appearance: "filled",
+                                                size: "sm"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $e37831ebf64d8e7d$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, $8zHUo$reactjsxruntime.jsx)((0, $9e8a15ca4065ce60$export$1ff3c3f08ae963c0), {
+                                color: "gray"
+                            }),
+                            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+                                children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $799f02b9b0e744b9$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, $8zHUo$reactstatelycolor.parseColor)(color).toString("hsl"),
+                                            key: color
+                                        }))
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+
+
+
+
+
+
+
+
+function $ce7da1514c7ab67c$export$b2103f68a961418e({ className: className, classNames: classNames, style: style, styles: styles, radius: radius, ...props }) {
+    const inputXRef = $8zHUo$react.useRef(null);
+    const inputYRef = $8zHUo$react.useRef(null);
+    const containerRef = $8zHUo$react.useRef(null);
+    const state = (0, $8zHUo$reactstatelycolor.useColorAreaState)(props);
+    const { colorAreaProps: colorAreaProps, xInputProps: xInputProps, yInputProps: yInputProps, thumbProps: thumbProps } = (0, $8zHUo$reactariacolor.useColorArea)({
+        ...props,
+        inputXRef: inputXRef,
+        inputYRef: inputYRef,
+        containerRef: containerRef
+    }, state);
+    const { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $8zHUo$reactaria.useFocusRing)();
+    const theme = (0, $f2fd0cbe11b7f0dd$export$93d4e7f90805808f)();
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+        ...colorAreaProps,
+        ref: containerRef,
+        style: {
+            ...colorAreaProps.style,
+            ...styles?.wrapper,
+            ...style
+        },
+        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-color-area", className, classNames?.wrapper),
+        "data-disabled": props.isDisabled,
+        "data-radius": radius ?? theme?.radius ?? "lg",
+        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("div", {
+            ...thumbProps,
+            style: {
+                ...thumbProps.style,
+                ...styles?.thumb
+            },
+            className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-color-area-thumb", classNames?.thumb),
+            "data-focus-visible": isFocusVisible,
+            "data-color": state.getDisplayColor().toString("css"),
+            children: [
+                /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
+                    ...xInputProps,
+                    ref: inputXRef,
+                    ...focusProps
+                }),
+                /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
+                    ...yInputProps,
+                    ref: inputYRef,
+                    ...focusProps
+                })
+            ]
+        })
+    });
+}
+
+
+
+
+
+
+
+
+function $ca14d49a10ed918f$export$b865d4358897bb17({ label: label, description: description, className: className, classNames: classNames, style: style, styles: styles, ...props }) {
+    const state = (0, $8zHUo$reactstatelycolor.useColorFieldState)(props);
+    const inputRef = $8zHUo$react.useRef(null);
+    const { inputProps: inputProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $8zHUo$reactariacolor.useColorField)({
+        ...props,
+        "aria-label": props["aria-label"] ?? "color-field"
+    }, state, inputRef);
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $ec2376a5dd0d13e6$export$a455218a85c89869), {
+        description: description,
+        label: label,
+        style: style,
+        classNames: classNames,
+        className: className,
+        styles: styles,
+        labelProps: {
+            ...labelProps
+        },
+        descriptionProps: {
+            ...descriptionProps
+        },
+        errorMessageProps: {
+            ...errorMessageProps
+        },
+        ...props,
+        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
+            style: styles?.input,
+            className: (0, $62f1c614c0962470$export$a274e22fb40f762e)(classNames?.input, "p-text-input-el"),
+            type: "text",
+            ref: inputRef,
+            ...inputProps
+        })
+    });
+}
+
+
+
+
+
+
+
+
+
+
+
+function $799f02b9b0e744b9$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, $8zHUo$reactjsxruntime.jsx)($799f02b9b0e744b9$var$Color, {
+            textValue: item.color,
+            color: (0, $8zHUo$reactstatelycolor.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, $8zHUo$reactstatelycolor.parseColor)(keysToArray[0]));
+            props.onSelectionChange?.(keys);
+        }
+    };
+    const theme = (0, $f2fd0cbe11b7f0dd$export$93d4e7f90805808f)();
+    const wrapperRef = $8zHUo$react.useRef(null);
+    const listState = (0, $8zHUo$reactstately.useListState)(listProps);
+    const { listBoxProps: listBoxProps } = (0, $8zHUo$reactaria.useListBox)(listProps, listState, wrapperRef);
+    const _colors = [
+        ...listState.collection
+    ];
+    radius = radius ?? theme?.radius ?? "md";
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($799f02b9b0e744b9$var$SwatchProvider, {
+        colors: colors,
+        radius: radius,
+        size: size,
+        ...props,
+        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+            style: {
+                ...style,
+                ...styles?.wrapper
+            },
+            className: (0, $62f1c614c0962470$export$a274e22fb40f762e)(className, classNames?.wrapper),
+            wrap: "wrap",
+            ...listBoxProps,
+            ref: wrapperRef,
+            children: _colors.map((color, index)=>/*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($799f02b9b0e744b9$export$47ce3797af1a0c57, {
+                    className: classNames?.swatch,
+                    style: styles?.swatch,
+                    state: listState,
+                    item: color
+                }, index))
+        })
+    });
+}
+function $799f02b9b0e744b9$export$47ce3797af1a0c57({ item: item, state: state, style: style, className: className }) {
+    const ref = $8zHUo$react.useRef(null);
+    const { optionProps: optionProps, isDisabled: isDisabled, isFocusVisible: isFocusVisible, isFocused: isFocused, isPressed: isPressed, isSelected: isSelected } = (0, $8zHUo$reactaria.useOption)({
+        key: item.key
+    }, state, ref);
+    const color = item.props.color;
+    const ctx = $799f02b9b0e744b9$var$useSwatchPickerContext();
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($799f02b9b0e744b9$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 $799f02b9b0e744b9$var$ColorSwatch({ className: className, style: style, _ref: _ref, color: colorProp, ...props }) {
+    const { colorSwatchProps: colorSwatchProps, color: color } = (0, $8zHUo$reactariacolor.useColorSwatch)({
+        ...props,
+        color: colorProp
+    });
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+        ...props,
+        ref: _ref,
+        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-color-swatch", className),
+        ...colorSwatchProps,
+        style: {
+            ...colorSwatchProps.style,
+            background: color.toString("css"),
+            ...style
+        },
+        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+            className: "p-swatch-checkers"
+        })
+    });
+}
+const $799f02b9b0e744b9$var$SwatchPickerContext = /*#__PURE__*/ $8zHUo$react.createContext(null);
+function $799f02b9b0e744b9$var$SwatchProvider(props) {
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($799f02b9b0e744b9$var$SwatchPickerContext.Provider, {
+        value: props,
+        children: props.children
+    });
+}
+function $799f02b9b0e744b9$var$useSwatchPickerContext() {
+    const ctx = $8zHUo$react.useContext($799f02b9b0e744b9$var$SwatchPickerContext);
+    if (!ctx) throw new Error("SwatchPicker must be used within a SwatchPickerProvider");
+    return ctx;
+}
+const $799f02b9b0e744b9$var$Color = (0, $8zHUo$reactstately.Item);
+
+
+
+
+
+
+
+
+function $7796dcb4fe09bf12$export$44fd664bcca5b6fb({ label: label, ...props }) {
+    const { locale: locale } = (0, $8zHUo$reactaria.useLocale)();
+    const state = (0, $8zHUo$reactstatelycolor.useColorSliderState)({
+        ...props,
+        locale: locale
+    });
+    const trackRef = $8zHUo$react.useRef(null);
+    const inputRef = $8zHUo$react.useRef(null);
+    const { labelProps: labelProps, trackProps: trackProps, thumbProps: thumbProps, inputProps: inputProps } = (0, $8zHUo$reactariacolor.useColorSlider)({
+        ...props,
+        label: label,
+        "aria-label": props["aria-label"] ?? "color-slider",
+        inputRef: inputRef,
+        trackRef: trackRef
+    }, state);
+    const { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $8zHUo$reactaria.useFocusRing)();
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $ec2376a5dd0d13e6$export$a455218a85c89869), {
+        label: label,
+        className: "p-color-slider",
+        replaceDefaultControlWrapper: true,
+        labelProps: labelProps,
+        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.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, $8zHUo$reactjsxruntime.jsx)("div", {
+                    className: "p-color-slider-checkers"
+                }),
+                /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+                    className: "p-color-slider-thumb",
+                    ...thumbProps,
+                    style: {
+                        ...thumbProps.style,
+                        background: state.getDisplayColor().toString("css")
+                    },
+                    children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
+                        ref: inputRef,
+                        ...inputProps,
+                        ...focusProps
+                    })
+                })
+            ]
+        })
+    });
+}
+
+
+
+function $e93fd810053d36a8$export$6e865ea70d7724f(color) {
+    // TODO: add support for rgba colors
+    return (0, $8zHUo$reactstatelycolor.parseColor)(color);
+}
+
+
+
+
+
+
 //# sourceMappingURL=main.js.map