@parrot-co/parrot-ui 0.0.70 → 0.0.72

package/dist/main.js

@@ -48,6 +48,7 @@ $parcel$export(module.exports, "Tabs", () => $33f331db51cbeb3d$export$1aaa3deaa9
 $parcel$export(module.exports, "Table", () => $3dd82f03c348455b$export$54ec01a60f47d33d);
 $parcel$export(module.exports, "Timeline", () => $c07c6db9734c74af$export$e6a97ba2cae5bb94);
 $parcel$export(module.exports, "Modal", () => $ceb05569908c0e0d$export$2b77a92f1a5ad772);
+$parcel$export(module.exports, "Space", () => $78991f4fdd965321$export$eef1e68107c58ef2);
 $parcel$export(module.exports, "parrot", () => $80923bc9c1ba824c$export$3817b7a54a07cec7);
 $parcel$export(module.exports, "ParrotTheme", () => $80923bc9c1ba824c$export$bca14c5b3b88a9c9);
 $parcel$export(module.exports, "ParrotThemeConfig", () => $80923bc9c1ba824c$export$e506a1d27d1eaa20);
@@ -1154,7 +1155,7 @@ function $02a166a5043d2558$export$ccdcc3b9d72a654(color, variant) {
                 background: "transparent",
                 color: `$${color}11`,
                 fill: `$${color}11`,
-                border: `1.5px solid $${color}5`,
+                border: `1px solid $${color}5`,
                 "&:focus": {
                     boxShadow: $02a166a5043d2558$export$71074ab0ed740397(color)
                 }
@@ -1538,8 +1539,8 @@ const $04e5d96aee536e27$var$Socket = (0, $80923bc9c1ba824c$export$3817b7a54a07ce
         }
     }
 });
-const $04e5d96aee536e27$var$Sockets = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef(({ append: append , prepend: prepend , children: children , ...props }, ref)=>{
-    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $04e5d96aee536e27$import$867d6c90a4013129$ffb0004e005737fa), {
+function $04e5d96aee536e27$var$Sockets({ append: append , prepend: prepend , children: children  }) {
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $E4F9t$reactjsxruntime.Fragment), {
         children: [
             prepend && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($04e5d96aee536e27$var$Socket, {
                 side: "left",
@@ -1554,15 +1555,82 @@ const $04e5d96aee536e27$var$Sockets = /*#__PURE__*/ (0, ($parcel$interopDefault(
             })
         ]
     });
-});
-$04e5d96aee536e27$var$Sockets.displayName = "Sockets";
+}
 var $04e5d96aee536e27$export$2e2bcd8739ae039 = $04e5d96aee536e27$var$Sockets;
 
 
 
 
 
-const $a40dc702bc0ad3b7$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef(({ label: label , error: error , appearance: appearance , size: size , shape: shape , append: append , prepend: prepend , description: description , css: css , isDisabled: isDisabled , validationStatus: validationStatus , ...props }, ref)=>{
+
+
+
+
+const $78991f4fdd965321$export$30d85e96e785900a = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
+    variants: {
+        compact: {
+            true: {
+                ".space-item:not(.space-item-first, .space-item-last)": {
+                    borderRadius: 0
+                },
+                ".space-item:not(.space-item-end)": {
+                    marginInlineEnd: -1
+                },
+                ".space-item-first": {
+                    borderStartEndRadius: 0,
+                    borderEndEndRadius: 0
+                },
+                ".space-item-last": {
+                    borderStartStartRadius: 0,
+                    borderEndStartRadius: 0
+                },
+                ".compact-item-wrapper-adjust": {
+                    marginInlineEnd: -1
+                }
+            }
+        }
+    }
+});
+const $78991f4fdd965321$var$SpaceContext = /*#__PURE__*/ $E4F9t$react.createContext({
+    classNames: {},
+    compactItemWrapperAdjust: ""
+});
+function $78991f4fdd965321$export$eef1e68107c58ef2({ children: children , compact: compact , gap: gap , ...props }) {
+    const childrenCount = $E4F9t$react.Children.count(children);
+    const nodes = $E4F9t$react.useMemo(()=>{
+        return $E4F9t$react.Children.map(children, (child, index)=>{
+            const isFirstChild = index == 0;
+            const isLastChild = index == childrenCount - 1;
+            if (!/*#__PURE__*/ $E4F9t$react.isValidElement(child)) return null;
+            return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($78991f4fdd965321$var$SpaceContext.Provider, {
+                value: {
+                    classNames: {
+                        "space-item-first": isFirstChild,
+                        "space-item-last": isLastChild,
+                        "space-item": true
+                    },
+                    compactItemWrapperAdjust: isLastChild ? "" : "compact-item-wrapper-adjust"
+                },
+                children: child
+            });
+        });
+    }, []);
+    const realGap = compact ? undefined : gap;
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($78991f4fdd965321$export$30d85e96e785900a, {
+        gap: realGap,
+        ...props,
+        compact: compact,
+        children: nodes
+    });
+}
+function $78991f4fdd965321$export$450c36e0b0e62ccd() {
+    return $E4F9t$react.useContext($78991f4fdd965321$var$SpaceContext);
+}
+
+
+
+const $a40dc702bc0ad3b7$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef(({ label: label , error: error , appearance: appearance , size: size , shape: shape , append: append , prepend: prepend , description: description , css: css , isDisabled: isDisabled , validationStatus: validationStatus , className: className , ...props }, ref)=>{
+    const space = (0, $78991f4fdd965321$export$450c36e0b0e62ccd)();
     const inputRef = (0, ($parcel$interopDefault($E4F9t$react))).useRef(null);
     const { labelProps: labelProps , inputProps: inputProps , errorMessageProps: errorMessageProps , descriptionProps: descriptionProps  } = (0, $E4F9t$reactaria.useTextField)({
         ...props,
@@ -1584,7 +1652,15 @@ const $a40dc702bc0ad3b7$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$int
     function captureFocus() {
         inputRef.current?.focus();
     }
+    const commonProps = {
+        className: (0, $d5b2fb178ea6b1b9$export$a274e22fb40f762e)({
+            "input-wrapper": true,
+            [className ?? ""]: !!className,
+            ...space.classNames
+        })
+    };
     return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
+        className: space.compactItemWrapperAdjust,
         css: css,
         stack: true,
         ref: ref,
@@ -1596,10 +1672,12 @@ const $a40dc702bc0ad3b7$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$int
                 children: label
             }),
             !hasAddOns && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $61604ea65ee6bc29$export$a195049fd73b3fe2), {
+                ...commonProps,
                 ...variantProps,
                 ...inputProps
             }),
             hasAddOns && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $61604ea65ee6bc29$export$479bffa770f4fc8b), {
+                ...commonProps,
                 onClick: captureFocus,
                 hasPrependComponent: !!prepend,
                 ...variantProps,
@@ -1660,6 +1738,12 @@ const $c68076e2eb9f7d63$export$303ef672e091d99 = (0, $80923bc9c1ba824c$export$db
         pointerEvents: "none"
     },
     variants: {
+        isIconButton: {
+            true: {
+                width: "$$button-base-height",
+                px: 0
+            }
+        },
         appearance: {
             unstyled: {
                 background: "none",
@@ -1680,6 +1764,9 @@ const $c68076e2eb9f7d63$export$303ef672e091d99 = (0, $80923bc9c1ba824c$export$db
             sharp: {},
             round: {
                 borderRadius: "calc($$button-base-height / 4)"
+            },
+            circle: {
+                borderRadius: "50%"
             }
         },
         size: {
@@ -1792,33 +1879,138 @@ $69cfc2fd5ce00dfd$export$3b0d6d7590275603.displayName = "Loader";
 
 
 
-const $8d4373b1a05e63fb$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef(({ color: color , variant: variant , append: append , prepend: prepend , size: size = "sm" , children: children , as: as = "button" , css: css , className: className , appearance: appearance , isLoading: isLoading , shape: shape , ...props }, ref)=>{
+
+
+
+
+
+function $d7cee7e3a6144235$export$30a06c8d3562193f(object, keys) {
+    return Object.keys(object).reduce((obj, key)=>{
+        if (keys.includes(key)) return {
+            ...obj
+        };
+        return {
+            ...obj,
+            [key]: object[key]
+        };
+    }, {});
+}
+function $d7cee7e3a6144235$export$357523c63a2253b9(object, keys) {
+    // TODO handle invalid objects properly
+    if (!object) return {};
+    return Object.keys(object).reduce((obj, key)=>{
+        if (keys.includes(key)) return {
+            ...obj,
+            [key]: object[key]
+        };
+        return {
+            ...obj
+        };
+    }, {});
+}
+function $d7cee7e3a6144235$export$65980d18b75784e2(object, keys) {
+    const picked = $d7cee7e3a6144235$export$357523c63a2253b9(object, keys);
+    const omitted = $d7cee7e3a6144235$export$30a06c8d3562193f(object, keys);
+    return [
+        picked,
+        omitted
+    ];
+}
+function $d7cee7e3a6144235$export$d2dae087199d2383(object) {
+    return Object.keys(object).reduce((obj, key)=>{
+        if (object[key] == null) return {
+            ...obj
+        };
+        return {
+            ...obj,
+            [key]: object[key]
+        };
+    }, {});
+}
+
+
+const $89714b081cb78a2f$var$ButtonGroupContext = /*#__PURE__*/ $E4F9t$react.createContext({});
+function $89714b081cb78a2f$export$69b1032f2ecdf404({ color: color , variant: variant , size: size , compact: compact , shape: shape , gap: gap , children: children , idleColor: idleColor , activeColor: activeColor , idleVariant: idleVariant , activeVariant: activeVariant , isToggle: isToggle  }) {
+    const cleanProps = (0, $d7cee7e3a6144235$export$d2dae087199d2383)({
+        color: color,
+        variant: variant,
+        size: size,
+        shape: shape,
+        idleColor: idleColor,
+        activeColor: activeColor,
+        idleVariant: idleVariant,
+        activeVariant: activeVariant,
+        isToggle: isToggle
+    });
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($89714b081cb78a2f$var$ButtonGroupContext.Provider, {
+        value: cleanProps,
+        children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $78991f4fdd965321$export$eef1e68107c58ef2), {
+            gap: gap,
+            compact: compact,
+            children: children
+        })
+    });
+}
+function $89714b081cb78a2f$export$749e21be8b14b968() {
+    return $E4F9t$react.useContext($89714b081cb78a2f$var$ButtonGroupContext);
+}
+
+
+
+
+const $8d4373b1a05e63fb$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef((props, ref)=>{
+    const space = (0, $78991f4fdd965321$export$450c36e0b0e62ccd)();
+    const buttonGroupProps = (0, $89714b081cb78a2f$export$749e21be8b14b968)();
+    const { color: color , variant: variant , append: append , prepend: prepend , size: size = "sm" , children: children , as: as = "button" , css: css , className: className , appearance: appearance , isLoading: isLoading , shape: shape , isToggle: isToggle , activeColor: activeColor = "violet" , activeVariant: activeVariant = "solid" , idleColor: idleColor = "gray" , idleVariant: idleVariant = "outline" , isIconButton: isIconButton , ...otherProps } = {
+        ...buttonGroupProps,
+        ...props
+    };
+    const state = (0, $E4F9t$reactstately.useToggleState)({
+        children: children,
+        ...otherProps
+    });
     const buttonRef = (0, ($parcel$interopDefault($E4F9t$react))).useRef(null);
-    const { buttonProps: buttonProps  } = (0, $E4F9t$reactaria.useButton)({
-        ...props,
+    const { buttonProps: buttonProps  } = (0, $E4F9t$reactaria.useToggleButton)({
+        ...otherProps,
         elementType: as,
         children: children
-    }, buttonRef);
+    }, state, buttonRef);
     const commonProps = {
-        className: (0, $d5b2fb178ea6b1b9$export$a274e22fb40f762e)([
-            className,
-            "button"
-        ]),
+        className: (0, $d5b2fb178ea6b1b9$export$a274e22fb40f762e)({
+            [className ?? ""]: !!className,
+            button: true,
+            ...space.classNames
+        }),
         css: css,
         as: as,
         ref: (0, $d5b2fb178ea6b1b9$export$c9058316764c140e)(ref, buttonRef)
     };
+    function getColor() {
+        if (!state.isSelected && isToggle) return {
+            color: idleColor,
+            variant: idleVariant
+        };
+        if (state.isSelected && isToggle) return {
+            color: activeColor,
+            variant: activeVariant
+        };
+        return {
+            variant: variant,
+            color: color
+        };
+    }
     if (appearance === "unstyled") return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $c68076e2eb9f7d63$export$3167f6ecaaaa3457), {
         ...commonProps,
         ...buttonProps,
         children: children
     });
     return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $c68076e2eb9f7d63$export$2d5d2ba3c7c8c40b), {
+        isIconButton: isIconButton,
         shape: shape,
         "data-loading": isLoading,
         "aria-busy": isLoading,
-        color: color,
-        variant: variant,
+        color: getColor().color,
+        variant: getColor().variant,
         size: size,
         ...commonProps,
         ...buttonProps,
@@ -1845,75 +2037,17 @@ const $8d4373b1a05e63fb$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, ($parcel$int
     });
 });
 $8d4373b1a05e63fb$export$353f5b6fc5456de1.displayName = "Button";
+$8d4373b1a05e63fb$export$353f5b6fc5456de1.Group = (0, $89714b081cb78a2f$export$69b1032f2ecdf404);
 
 
 
 
 
-
-
-
-const $626c660fba87c9a3$var$StyledButton = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)("button", (0, $02a166a5043d2558$export$5a7eb6284e7684f5), {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "hidden",
-    fontFamily: "$sans",
-    boxSizing: "border-box",
-    outline: "none",
-    border: "none",
-    padding: 0,
-    flexShrink: 0,
-    defaultVariants: {
-        size: "md",
-        shape: "circle"
-    },
-    variants: {
-        shape: {
-            circle: {
-                borderRadius: "50% !important"
-            },
-            square: {}
-        },
-        size: {
-            xs: {
-                size: 24,
-                borderRadius: 6
-            },
-            sm: {
-                size: 32,
-                borderRadius: 6
-            },
-            md: {
-                size: 40,
-                borderRadius: 6
-            },
-            lg: {
-                size: 48,
-                borderRadius: 8
-            },
-            xl: {
-                size: 56,
-                borderRadius: 8
-            }
-        }
-    }
-});
-const $626c660fba87c9a3$export$c25acd513dcc8062 = /*#__PURE__*/ $E4F9t$react.forwardRef(({ color: color = "violet" , variant: variant = "solid" , as: as = "button" , css: css , size: size , shape: shape , ...props }, ref)=>{
-    const buttonRef = $E4F9t$react.useRef(null);
-    const { buttonProps: buttonProps  } = (0, $E4F9t$reactaria.useButton)({
+const $626c660fba87c9a3$export$c25acd513dcc8062 = /*#__PURE__*/ $E4F9t$react.forwardRef((props, ref)=>{
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $8d4373b1a05e63fb$export$353f5b6fc5456de1), {
+        isIconButton: true,
+        ref: ref,
         ...props,
-        elementType: as
-    }, buttonRef);
-    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($626c660fba87c9a3$var$StyledButton, {
-        as: as,
-        shape: shape,
-        size: size,
-        variant: variant,
-        color: color,
-        ref: (0, $d5b2fb178ea6b1b9$export$c9058316764c140e)(buttonRef, ref),
-        css: css,
-        ...buttonProps,
         children: props.children
     });
 });
@@ -1927,6 +2061,8 @@ $626c660fba87c9a3$export$c25acd513dcc8062.displayName = "IconButton";
 
 
 
+
+
 const $502180e4aeb6f85b$var$Wrapper = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)("div", {
     position: "relative",
     width: "100%"
@@ -1977,7 +2113,8 @@ const $502180e4aeb6f85b$var$Steppers = (0, $80923bc9c1ba824c$export$3817b7a54a07
     }
 });
 const $502180e4aeb6f85b$export$6bf0cd3a219bbade = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef((props, ref)=>{
-    const { error: error , label: label , description: description , appearance: appearance , size: size , append: append , hideSteppers: hideSteppers  } = props;
+    const { error: error , label: label , description: description , appearance: appearance , size: size , append: append , hideSteppers: hideSteppers , css: css  } = props;
+    const space = (0, $78991f4fdd965321$export$450c36e0b0e62ccd)();
     const { locale: locale  } = (0, $E4F9t$reactaria.useLocale)();
     const state = (0, $E4F9t$reactstately.useNumberFieldState)({
         ...props,
@@ -1987,6 +2124,8 @@ const $502180e4aeb6f85b$export$6bf0cd3a219bbade = /*#__PURE__*/ (0, ($parcel$int
     const { labelProps: labelProps , groupProps: groupProps , inputProps: inputProps , incrementButtonProps: incrementButtonProps , decrementButtonProps: decrementButtonProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = (0, $E4F9t$reactaria.useNumberField)(props, state, inputRef);
     //TODO clean up append and prepend component placement and positioning
     return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
+        css: css,
+        className: space.compactItemWrapperAdjust,
         stack: true,
         gap: 1,
         children: [
@@ -1999,6 +2138,10 @@ const $502180e4aeb6f85b$export$6bf0cd3a219bbade = /*#__PURE__*/ (0, ($parcel$int
                 ref: ref,
                 children: [
                     /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $61604ea65ee6bc29$export$a195049fd73b3fe2), {
+                        className: (0, $d5b2fb178ea6b1b9$export$a274e22fb40f762e)({
+                            "number-input": true,
+                            ...space.classNames
+                        }),
                         hasError: !!error,
                         appearance: appearance,
                         size: size,
@@ -2844,7 +2987,10 @@ $3347a410c0691704$export$5b6b19405a83ff9d.displayName = "Popover";
 
 
 
+
+
 const $0a4561d925fa922e$export$cd0225d99c675387 = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef((props, ref)=>{
+    const space = (0, $78991f4fdd965321$export$450c36e0b0e62ccd)();
     const { renderValue: renderValue , renderOption: renderOption , placeholder: placeholder = "Select an option" , appearance: appearance , size: size , css: css , labelKey: labelKey , label: label  } = props;
     const state = (0, $E4F9t$reactstately.useSelectState)(props);
     const selectRef = (0, ($parcel$interopDefault($E4F9t$react))).useRef(null);
@@ -2853,6 +2999,7 @@ const $0a4561d925fa922e$export$cd0225d99c675387 = /*#__PURE__*/ (0, ($parcel$int
     const { focusProps: focusProps , isFocused: isFocused  } = (0, $E4F9t$reactaria.useFocusRing)();
     const hasSelection = state.selectedItem != null;
     return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
+        className: space.compactItemWrapperAdjust,
         stretchX: true,
         css: css,
         position: "relative",
@@ -2872,6 +3019,10 @@ const $0a4561d925fa922e$export$cd0225d99c675387 = /*#__PURE__*/ (0, ($parcel$int
                 name: props.name
             }),
             /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $6f8af3bc5f5b1477$export$3ac1e88a1c0b9f1), {
+                className: (0, $d5b2fb178ea6b1b9$export$a274e22fb40f762e)({
+                    "select-trigger": true,
+                    ...space.classNames
+                }),
                 type: "button",
                 "data-focused": isFocused,
                 appearance: appearance,
@@ -3079,39 +3230,6 @@ $913821b64d4cfe80$export$d9781c7894a82487.displayName = "DateField";
 
 
 
-function $d7cee7e3a6144235$export$30a06c8d3562193f(object, keys) {
-    return Object.keys(object).reduce((obj, key)=>{
-        if (keys.includes(key)) return {
-            ...obj
-        };
-        return {
-            ...obj,
-            [key]: object[key]
-        };
-    }, {});
-}
-function $d7cee7e3a6144235$export$357523c63a2253b9(object, keys) {
-    // TODO handle invalid objects properly
-    if (!object) return {};
-    return Object.keys(object).reduce((obj, key)=>{
-        if (keys.includes(key)) return {
-            ...obj,
-            [key]: object[key]
-        };
-        return {
-            ...obj
-        };
-    }, {});
-}
-function $d7cee7e3a6144235$export$65980d18b75784e2(object, keys) {
-    const picked = $d7cee7e3a6144235$export$357523c63a2253b9(object, keys);
-    const omitted = $d7cee7e3a6144235$export$30a06c8d3562193f(object, keys);
-    return [
-        picked,
-        omitted
-    ];
-}
-
 
 function $9784c62924ae0fea$export$d02631cccf789723(start = 0, end, step = 1) {
     const result = [];
@@ -3156,7 +3274,7 @@ const $0ec4a031b4f9a702$export$e1aef45b828286de = /*#__PURE__*/ $E4F9t$react.for
                 className: "header",
                 children: [
                     /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $626c660fba87c9a3$export$c25acd513dcc8062), {
-                        shape: "square",
+                        shape: "sharp",
                         size: "xs",
                         color: "white",
                         ...prevButtonProps,
@@ -3172,7 +3290,7 @@ const $0ec4a031b4f9a702$export$e1aef45b828286de = /*#__PURE__*/ $E4F9t$react.for
                         children: title
                     }),
                     /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $626c660fba87c9a3$export$c25acd513dcc8062), {
-                        shape: "square",
+                        shape: "sharp",
                         size: "xs",
                         color: "white",
                         ...nextButtonProps,
@@ -3274,9 +3392,12 @@ function $2dd111a4532b252d$export$85930906f541ddb8(date) {
 }
 
 
+
+
 const $4d607687132d9f4f$export$5109c6dd95d8fb00 = /*#__PURE__*/ $E4F9t$react.forwardRef(({ appearance: appearance = "filled" , size: size = "md" , css: css , numberOfMonths: numberOfMonths , value: value , onChange: onChange , defaultValue: defaultValue , dropdownIcon: dropdownIcon = /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $E4F9t$reacticonshi.HiOutlineCalendar), {
     size: 16
 }) , ...props }, ref)=>{
+    const space = (0, $78991f4fdd965321$export$450c36e0b0e62ccd)();
     function _onChange(date) {
         onChange?.(new Date(date.year, date.month, date.day), date);
     }
@@ -3300,6 +3421,8 @@ const $4d607687132d9f4f$export$5109c6dd95d8fb00 = /*#__PURE__*/ $E4F9t$react.for
     const pickerRef = $E4F9t$react.useRef(null);
     const { groupProps: groupProps , calendarProps: calendarProps , fieldProps: fieldProps , buttonProps: buttonProps , errorMessageProps: errorMessageProps , labelProps: labelProps  } = (0, $E4F9t$reactaria.useDatePicker)(newPropsWithProxies, state, pickerRef);
     return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
+        className: space.compactItemWrapperAdjust,
+        css: css,
         stretchX: true,
         stack: true,
         gap: 1,
@@ -3311,12 +3434,15 @@ const $4d607687132d9f4f$export$5109c6dd95d8fb00 = /*#__PURE__*/ $E4F9t$react.for
             /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
                 ref: ref,
                 gap: 10,
-                css: css,
                 stretchX: true,
                 inline: true,
                 stack: true,
                 children: [
                     /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $99240aa62a70fb69$export$79e84280796e5e38), {
+                        className: (0, $d5b2fb178ea6b1b9$export$a274e22fb40f762e)({
+                            "date-picker-trigger": true,
+                            ...space.classNames
+                        }),
                         ref: pickerRef,
                         justify: "between",
                         align: "center",
@@ -5148,4 +5274,5 @@ $ceb05569908c0e0d$export$2b77a92f1a5ad772.useModal = $ceb05569908c0e0d$export$33
 
 
 
+
 //# sourceMappingURL=main.js.map