@parrot-co/parrot-ui 0.0.71 → 0.0.72

package/dist/module.js

@@ -1,8 +1,8 @@
 import {createStitches as $kF5Av$createStitches} from "@stitches/react";
 import {gray as $kF5Av$gray, mauve as $kF5Av$mauve, slate as $kF5Av$slate, sage as $kF5Av$sage, olive as $kF5Av$olive, sand as $kF5Av$sand, tomato as $kF5Av$tomato, red as $kF5Av$red, crimson as $kF5Av$crimson, pink as $kF5Av$pink, plum as $kF5Av$plum, purple as $kF5Av$purple, violet as $kF5Av$violet, indigo as $kF5Av$indigo, blue as $kF5Av$blue, sky as $kF5Av$sky, mint as $kF5Av$mint, cyan as $kF5Av$cyan, teal as $kF5Av$teal, green as $kF5Av$green, grass as $kF5Av$grass, lime as $kF5Av$lime, yellow as $kF5Av$yellow, amber as $kF5Av$amber, orange as $kF5Av$orange, brown as $kF5Av$brown, bronze as $kF5Av$bronze, gold as $kF5Av$gold, grayA as $kF5Av$grayA, mauveA as $kF5Av$mauveA, slateA as $kF5Av$slateA, sageA as $kF5Av$sageA, oliveA as $kF5Av$oliveA, sandA as $kF5Av$sandA, tomatoA as $kF5Av$tomatoA, redA as $kF5Av$redA, crimsonA as $kF5Av$crimsonA, pinkA as $kF5Av$pinkA, plumA as $kF5Av$plumA, purpleA as $kF5Av$purpleA, violetA as $kF5Av$violetA, indigoA as $kF5Av$indigoA, blueA as $kF5Av$blueA, skyA as $kF5Av$skyA, mintA as $kF5Av$mintA, cyanA as $kF5Av$cyanA, tealA as $kF5Av$tealA, greenA as $kF5Av$greenA, grassA as $kF5Av$grassA, limeA as $kF5Av$limeA, yellowA as $kF5Av$yellowA, amberA as $kF5Av$amberA, orangeA as $kF5Av$orangeA, brownA as $kF5Av$brownA, bronzeA as $kF5Av$bronzeA, goldA as $kF5Av$goldA, whiteA as $kF5Av$whiteA, blackA as $kF5Av$blackA} from "@radix-ui/colors";
 import {jsxs as $kF5Av$jsxs, jsx as $kF5Av$jsx, Fragment as $kF5Av$Fragment} from "react/jsx-runtime";
-import $kF5Av$react, {forwardRef as $kF5Av$forwardRef, useRef as $kF5Av$useRef, useContext as $kF5Av$useContext, useMemo as $kF5Av$useMemo, useState as $kF5Av$useState, useEffect as $kF5Av$useEffect, cloneElement as $kF5Av$cloneElement} from "react";
-import {useTextField as $kF5Av$useTextField, useLocale as $kF5Av$useLocale, useNumberField as $kF5Av$useNumberField, useButton as $kF5Av$useButton, useCheckbox as $kF5Av$useCheckbox, useCheckboxGroupItem as $kF5Av$useCheckboxGroupItem, useFocusRing as $kF5Av$useFocusRing, VisuallyHidden as $kF5Av$VisuallyHidden, useCheckboxGroup as $kF5Av$useCheckboxGroup, useRadio as $kF5Av$useRadio, useRadioGroup as $kF5Av$useRadioGroup, useSelect as $kF5Av$useSelect, HiddenSelect as $kF5Av$HiddenSelect, mergeProps as $kF5Av$mergeProps, useListBox as $kF5Av$useListBox, useOption as $kF5Av$useOption, useListBoxSection as $kF5Av$useListBoxSection, useSeparator as $kF5Av$useSeparator, usePopover as $kF5Av$usePopover, Overlay as $kF5Av$Overlay, useDatePicker as $kF5Av$useDatePicker, useDateField as $kF5Av$useDateField, useDateSegment as $kF5Av$useDateSegment, useCalendar as $kF5Av$useCalendar, useCalendarGrid as $kF5Av$useCalendarGrid, useCalendarCell as $kF5Av$useCalendarCell, useDrop as $kF5Av$useDrop, useProgressBar as $kF5Av$useProgressBar, useTabList as $kF5Av$useTabList, useTab as $kF5Av$useTab, useTabPanel as $kF5Av$useTabPanel, useHover as $kF5Av$useHover, usePress as $kF5Av$usePress, useSwitch as $kF5Av$useSwitch, useMenuTrigger as $kF5Av$useMenuTrigger, useMenu as $kF5Av$useMenu, useMenuSection as $kF5Av$useMenuSection, useMenuItem as $kF5Av$useMenuItem, useTable as $kF5Av$useTable, useTableRowGroup as $kF5Av$useTableRowGroup, useTableHeaderRow as $kF5Av$useTableHeaderRow, useTableColumnHeader as $kF5Av$useTableColumnHeader, useTableRow as $kF5Av$useTableRow, useTableCell as $kF5Av$useTableCell, useTableSelectionCheckbox as $kF5Av$useTableSelectionCheckbox, useTableSelectAllCheckbox as $kF5Av$useTableSelectAllCheckbox, useModalOverlay as $kF5Av$useModalOverlay, useDialog as $kF5Av$useDialog} from "react-aria";
+import $kF5Av$react, {createContext as $kF5Av$createContext, Children as $kF5Av$Children, useMemo as $kF5Av$useMemo, isValidElement as $kF5Av$isValidElement, useContext as $kF5Av$useContext, forwardRef as $kF5Av$forwardRef, useRef as $kF5Av$useRef, useState as $kF5Av$useState, useEffect as $kF5Av$useEffect, cloneElement as $kF5Av$cloneElement} from "react";
+import {useTextField as $kF5Av$useTextField, useLocale as $kF5Av$useLocale, useNumberField as $kF5Av$useNumberField, useToggleButton as $kF5Av$useToggleButton, useCheckbox as $kF5Av$useCheckbox, useCheckboxGroupItem as $kF5Av$useCheckboxGroupItem, useFocusRing as $kF5Av$useFocusRing, VisuallyHidden as $kF5Av$VisuallyHidden, useCheckboxGroup as $kF5Av$useCheckboxGroup, useRadio as $kF5Av$useRadio, useRadioGroup as $kF5Av$useRadioGroup, useSelect as $kF5Av$useSelect, useButton as $kF5Av$useButton, HiddenSelect as $kF5Av$HiddenSelect, mergeProps as $kF5Av$mergeProps, useListBox as $kF5Av$useListBox, useOption as $kF5Av$useOption, useListBoxSection as $kF5Av$useListBoxSection, useSeparator as $kF5Av$useSeparator, usePopover as $kF5Av$usePopover, Overlay as $kF5Av$Overlay, useDatePicker as $kF5Av$useDatePicker, useDateField as $kF5Av$useDateField, useDateSegment as $kF5Av$useDateSegment, useCalendar as $kF5Av$useCalendar, useCalendarGrid as $kF5Av$useCalendarGrid, useCalendarCell as $kF5Av$useCalendarCell, useDrop as $kF5Av$useDrop, useProgressBar as $kF5Av$useProgressBar, useTabList as $kF5Av$useTabList, useTab as $kF5Av$useTab, useTabPanel as $kF5Av$useTabPanel, useHover as $kF5Av$useHover, usePress as $kF5Av$usePress, useSwitch as $kF5Av$useSwitch, useMenuTrigger as $kF5Av$useMenuTrigger, useMenu as $kF5Av$useMenu, useMenuSection as $kF5Av$useMenuSection, useMenuItem as $kF5Av$useMenuItem, useTable as $kF5Av$useTable, useTableRowGroup as $kF5Av$useTableRowGroup, useTableHeaderRow as $kF5Av$useTableHeaderRow, useTableColumnHeader as $kF5Av$useTableColumnHeader, useTableRow as $kF5Av$useTableRow, useTableCell as $kF5Av$useTableCell, useTableSelectionCheckbox as $kF5Av$useTableSelectionCheckbox, useTableSelectAllCheckbox as $kF5Av$useTableSelectAllCheckbox, useModalOverlay as $kF5Av$useModalOverlay, useDialog as $kF5Av$useDialog} from "react-aria";
 import {HiChevronUp as $kF5Av$HiChevronUp, HiChevronDown as $kF5Av$HiChevronDown, HiSelector as $kF5Av$HiSelector, HiOutlineCalendar as $kF5Av$HiOutlineCalendar, HiChevronLeft as $kF5Av$HiChevronLeft, HiChevronRight as $kF5Av$HiChevronRight, HiOutlineDocumentAdd as $kF5Av$HiOutlineDocumentAdd, HiOutlineCheckCircle as $kF5Av$HiOutlineCheckCircle, HiOutlineTrash as $kF5Av$HiOutlineTrash, HiOutlineExclamationCircle as $kF5Av$HiOutlineExclamationCircle, HiOutlineRefresh as $kF5Av$HiOutlineRefresh, HiOutlinePaperClip as $kF5Av$HiOutlinePaperClip, HiCheck as $kF5Av$HiCheck, HiOutlineGlobe as $kF5Av$HiOutlineGlobe, HiOutlineCurrencyDollar as $kF5Av$HiOutlineCurrencyDollar, HiOutlineGlobeAlt as $kF5Av$HiOutlineGlobeAlt, HiOutlineArchive as $kF5Av$HiOutlineArchive, HiOutlineAnnotation as $kF5Av$HiOutlineAnnotation, HiOutlineFire as $kF5Av$HiOutlineFire, HiOutlineBadgeCheck as $kF5Av$HiOutlineBadgeCheck, HiOutlineSparkles as $kF5Av$HiOutlineSparkles, HiOutlineSpeakerphone as $kF5Av$HiOutlineSpeakerphone, HiOutlineCreditCard as $kF5Av$HiOutlineCreditCard, HiOutlineHeart as $kF5Av$HiOutlineHeart, HiOutlineLocationMarker as $kF5Av$HiOutlineLocationMarker, HiOutlineCursorClick as $kF5Av$HiOutlineCursorClick, HiOutlineLightningBolt as $kF5Av$HiOutlineLightningBolt, HiOutlineDocumentDownload as $kF5Av$HiOutlineDocumentDownload, HiOutlineTag as $kF5Av$HiOutlineTag, HiOutlineAtSymbol as $kF5Av$HiOutlineAtSymbol, HiOutlineUserCircle as $kF5Av$HiOutlineUserCircle, HiOutlineTerminal as $kF5Av$HiOutlineTerminal, HiOutlineMoon as $kF5Av$HiOutlineMoon, HiSortAscending as $kF5Av$HiSortAscending, HiSortDescending as $kF5Av$HiSortDescending} from "react-icons/hi";
 import {useNumberFieldState as $kF5Av$useNumberFieldState, useToggleState as $kF5Av$useToggleState, useCheckboxGroupState as $kF5Av$useCheckboxGroupState, useRadioGroupState as $kF5Av$useRadioGroupState, useSelectState as $kF5Av$useSelectState, Item as $kF5Av$Item, useListState as $kF5Av$useListState, useDatePickerState as $kF5Av$useDatePickerState, useDateFieldState as $kF5Av$useDateFieldState, useCalendarState as $kF5Av$useCalendarState, useTabListState as $kF5Av$useTabListState, useMenuTriggerState as $kF5Av$useMenuTriggerState, useTreeState as $kF5Av$useTreeState, useTableState as $kF5Av$useTableState, TableHeader as $kF5Av$TableHeader, TableBody as $kF5Av$TableBody, Column as $kF5Av$Column, Row as $kF5Av$Row, Cell as $kF5Av$Cell, useOverlayTriggerState as $kF5Av$useOverlayTriggerState} from "react-stately";
 import {createCalendar as $kF5Av$createCalendar, endOfMonth as $kF5Av$endOfMonth, getWeeksInMonth as $kF5Av$getWeeksInMonth, isSameMonth as $kF5Av$isSameMonth, CalendarDate as $kF5Av$CalendarDate} from "@internationalized/date";
@@ -1110,7 +1110,7 @@ function $22d93d8ad1e2d08d$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: $22d93d8ad1e2d08d$export$71074ab0ed740397(color)
                 }
@@ -1517,7 +1517,75 @@ var $f8db34c11dd03189$export$2e2bcd8739ae039 = $f8db34c11dd03189$var$Sockets;
 
 
 
-const $61dde3060428563f$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $kF5Av$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 $aca95339810194aa$export$30d85e96e785900a = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $391d62e0590dec97$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 $aca95339810194aa$var$SpaceContext = /*#__PURE__*/ $kF5Av$createContext({
+    classNames: {},
+    compactItemWrapperAdjust: ""
+});
+function $aca95339810194aa$export$eef1e68107c58ef2({ children: children , compact: compact , gap: gap , ...props }) {
+    const childrenCount = $kF5Av$Children.count(children);
+    const nodes = $kF5Av$useMemo(()=>{
+        return $kF5Av$Children.map(children, (child, index)=>{
+            const isFirstChild = index == 0;
+            const isLastChild = index == childrenCount - 1;
+            if (!/*#__PURE__*/ $kF5Av$isValidElement(child)) return null;
+            return /*#__PURE__*/ (0, $kF5Av$jsx)($aca95339810194aa$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, $kF5Av$jsx)($aca95339810194aa$export$30d85e96e785900a, {
+        gap: realGap,
+        ...props,
+        compact: compact,
+        children: nodes
+    });
+}
+function $aca95339810194aa$export$450c36e0b0e62ccd() {
+    return $kF5Av$useContext($aca95339810194aa$var$SpaceContext);
+}
+
+
+
+const $61dde3060428563f$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $kF5Av$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, $aca95339810194aa$export$450c36e0b0e62ccd)();
     const inputRef = (0, $kF5Av$react).useRef(null);
     const { labelProps: labelProps , inputProps: inputProps , errorMessageProps: errorMessageProps , descriptionProps: descriptionProps  } = (0, $kF5Av$useTextField)({
         ...props,
@@ -1539,7 +1607,15 @@ const $61dde3060428563f$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $kF5Av$react
     function captureFocus() {
         inputRef.current?.focus();
     }
+    const commonProps = {
+        className: (0, $625847aeb8796968$export$a274e22fb40f762e)({
+            "input-wrapper": true,
+            [className ?? ""]: !!className,
+            ...space.classNames
+        })
+    };
     return /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
+        className: space.compactItemWrapperAdjust,
         css: css,
         stack: true,
         ref: ref,
@@ -1551,10 +1627,12 @@ const $61dde3060428563f$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $kF5Av$react
                 children: label
             }),
             !hasAddOns && /*#__PURE__*/ (0, $kF5Av$jsx)((0, $9158bbabd058e6d9$export$a195049fd73b3fe2), {
+                ...commonProps,
                 ...variantProps,
                 ...inputProps
             }),
             hasAddOns && /*#__PURE__*/ (0, $kF5Av$jsx)((0, $9158bbabd058e6d9$export$479bffa770f4fc8b), {
+                ...commonProps,
                 onClick: captureFocus,
                 hasPrependComponent: !!prepend,
                 ...variantProps,
@@ -1615,6 +1693,12 @@ const $6be0cf1a8e0dd120$export$303ef672e091d99 = (0, $9ade691eb9e41cfb$export$db
         pointerEvents: "none"
     },
     variants: {
+        isIconButton: {
+            true: {
+                width: "$$button-base-height",
+                px: 0
+            }
+        },
         appearance: {
             unstyled: {
                 background: "none",
@@ -1635,6 +1719,9 @@ const $6be0cf1a8e0dd120$export$303ef672e091d99 = (0, $9ade691eb9e41cfb$export$db
             sharp: {},
             round: {
                 borderRadius: "calc($$button-base-height / 4)"
+            },
+            circle: {
+                borderRadius: "50%"
             }
         },
         size: {
@@ -1747,33 +1834,138 @@ $8eafe9f534066907$export$3b0d6d7590275603.displayName = "Loader";
 
 
 
-const $59636f06ede7befa$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $kF5Av$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 $5c7d398903852591$export$30a06c8d3562193f(object, keys) {
+    return Object.keys(object).reduce((obj, key)=>{
+        if (keys.includes(key)) return {
+            ...obj
+        };
+        return {
+            ...obj,
+            [key]: object[key]
+        };
+    }, {});
+}
+function $5c7d398903852591$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 $5c7d398903852591$export$65980d18b75784e2(object, keys) {
+    const picked = $5c7d398903852591$export$357523c63a2253b9(object, keys);
+    const omitted = $5c7d398903852591$export$30a06c8d3562193f(object, keys);
+    return [
+        picked,
+        omitted
+    ];
+}
+function $5c7d398903852591$export$d2dae087199d2383(object) {
+    return Object.keys(object).reduce((obj, key)=>{
+        if (object[key] == null) return {
+            ...obj
+        };
+        return {
+            ...obj,
+            [key]: object[key]
+        };
+    }, {});
+}
+
+
+const $d0e2bb45064e4ad9$var$ButtonGroupContext = /*#__PURE__*/ $kF5Av$createContext({});
+function $d0e2bb45064e4ad9$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, $5c7d398903852591$export$d2dae087199d2383)({
+        color: color,
+        variant: variant,
+        size: size,
+        shape: shape,
+        idleColor: idleColor,
+        activeColor: activeColor,
+        idleVariant: idleVariant,
+        activeVariant: activeVariant,
+        isToggle: isToggle
+    });
+    return /*#__PURE__*/ (0, $kF5Av$jsx)($d0e2bb45064e4ad9$var$ButtonGroupContext.Provider, {
+        value: cleanProps,
+        children: /*#__PURE__*/ (0, $kF5Av$jsx)((0, $aca95339810194aa$export$eef1e68107c58ef2), {
+            gap: gap,
+            compact: compact,
+            children: children
+        })
+    });
+}
+function $d0e2bb45064e4ad9$export$749e21be8b14b968() {
+    return $kF5Av$useContext($d0e2bb45064e4ad9$var$ButtonGroupContext);
+}
+
+
+
+
+const $59636f06ede7befa$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $kF5Av$react).forwardRef((props, ref)=>{
+    const space = (0, $aca95339810194aa$export$450c36e0b0e62ccd)();
+    const buttonGroupProps = (0, $d0e2bb45064e4ad9$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, $kF5Av$useToggleState)({
+        children: children,
+        ...otherProps
+    });
     const buttonRef = (0, $kF5Av$react).useRef(null);
-    const { buttonProps: buttonProps  } = (0, $kF5Av$useButton)({
-        ...props,
+    const { buttonProps: buttonProps  } = (0, $kF5Av$useToggleButton)({
+        ...otherProps,
         elementType: as,
         children: children
-    }, buttonRef);
+    }, state, buttonRef);
     const commonProps = {
-        className: (0, $625847aeb8796968$export$a274e22fb40f762e)([
-            className,
-            "button"
-        ]),
+        className: (0, $625847aeb8796968$export$a274e22fb40f762e)({
+            [className ?? ""]: !!className,
+            button: true,
+            ...space.classNames
+        }),
         css: css,
         as: as,
         ref: (0, $625847aeb8796968$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, $kF5Av$jsx)((0, $6be0cf1a8e0dd120$export$3167f6ecaaaa3457), {
         ...commonProps,
         ...buttonProps,
         children: children
     });
     return /*#__PURE__*/ (0, $kF5Av$jsx)((0, $6be0cf1a8e0dd120$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,
@@ -1800,75 +1992,17 @@ const $59636f06ede7befa$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $kF5Av$react
     });
 });
 $59636f06ede7befa$export$353f5b6fc5456de1.displayName = "Button";
+$59636f06ede7befa$export$353f5b6fc5456de1.Group = (0, $d0e2bb45064e4ad9$export$69b1032f2ecdf404);
 
 
 
 
 
-
-
-
-const $39ebe5a116c39d6c$var$StyledButton = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)("button", (0, $22d93d8ad1e2d08d$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 $39ebe5a116c39d6c$export$c25acd513dcc8062 = /*#__PURE__*/ $kF5Av$forwardRef(({ color: color = "violet" , variant: variant = "solid" , as: as = "button" , css: css , size: size , shape: shape , ...props }, ref)=>{
-    const buttonRef = $kF5Av$useRef(null);
-    const { buttonProps: buttonProps  } = (0, $kF5Av$useButton)({
+const $39ebe5a116c39d6c$export$c25acd513dcc8062 = /*#__PURE__*/ $kF5Av$forwardRef((props, ref)=>{
+    return /*#__PURE__*/ (0, $kF5Av$jsx)((0, $59636f06ede7befa$export$353f5b6fc5456de1), {
+        isIconButton: true,
+        ref: ref,
         ...props,
-        elementType: as
-    }, buttonRef);
-    return /*#__PURE__*/ (0, $kF5Av$jsx)($39ebe5a116c39d6c$var$StyledButton, {
-        as: as,
-        shape: shape,
-        size: size,
-        variant: variant,
-        color: color,
-        ref: (0, $625847aeb8796968$export$c9058316764c140e)(buttonRef, ref),
-        css: css,
-        ...buttonProps,
         children: props.children
     });
 });
@@ -1882,6 +2016,8 @@ $39ebe5a116c39d6c$export$c25acd513dcc8062.displayName = "IconButton";
 
 
 
+
+
 const $a625eab1563a2126$var$Wrapper = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)("div", {
     position: "relative",
     width: "100%"
@@ -1932,7 +2068,8 @@ const $a625eab1563a2126$var$Steppers = (0, $9ade691eb9e41cfb$export$3817b7a54a07
     }
 });
 const $a625eab1563a2126$export$6bf0cd3a219bbade = /*#__PURE__*/ (0, $kF5Av$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, $aca95339810194aa$export$450c36e0b0e62ccd)();
     const { locale: locale  } = (0, $kF5Av$useLocale)();
     const state = (0, $kF5Av$useNumberFieldState)({
         ...props,
@@ -1942,6 +2079,8 @@ const $a625eab1563a2126$export$6bf0cd3a219bbade = /*#__PURE__*/ (0, $kF5Av$react
     const { labelProps: labelProps , groupProps: groupProps , inputProps: inputProps , incrementButtonProps: incrementButtonProps , decrementButtonProps: decrementButtonProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = (0, $kF5Av$useNumberField)(props, state, inputRef);
     //TODO clean up append and prepend component placement and positioning
     return /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
+        css: css,
+        className: space.compactItemWrapperAdjust,
         stack: true,
         gap: 1,
         children: [
@@ -1954,6 +2093,10 @@ const $a625eab1563a2126$export$6bf0cd3a219bbade = /*#__PURE__*/ (0, $kF5Av$react
                 ref: ref,
                 children: [
                     /*#__PURE__*/ (0, $kF5Av$jsx)((0, $9158bbabd058e6d9$export$a195049fd73b3fe2), {
+                        className: (0, $625847aeb8796968$export$a274e22fb40f762e)({
+                            "number-input": true,
+                            ...space.classNames
+                        }),
                         hasError: !!error,
                         appearance: appearance,
                         size: size,
@@ -2799,7 +2942,10 @@ $c4793c1ed42b26da$export$5b6b19405a83ff9d.displayName = "Popover";
 
 
 
+
+
 const $604e914a624d5a0f$export$cd0225d99c675387 = /*#__PURE__*/ (0, $kF5Av$react).forwardRef((props, ref)=>{
+    const space = (0, $aca95339810194aa$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, $kF5Av$useSelectState)(props);
     const selectRef = (0, $kF5Av$react).useRef(null);
@@ -2808,6 +2954,7 @@ const $604e914a624d5a0f$export$cd0225d99c675387 = /*#__PURE__*/ (0, $kF5Av$react
     const { focusProps: focusProps , isFocused: isFocused  } = (0, $kF5Av$useFocusRing)();
     const hasSelection = state.selectedItem != null;
     return /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
+        className: space.compactItemWrapperAdjust,
         stretchX: true,
         css: css,
         position: "relative",
@@ -2827,6 +2974,10 @@ const $604e914a624d5a0f$export$cd0225d99c675387 = /*#__PURE__*/ (0, $kF5Av$react
                 name: props.name
             }),
             /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $8f062ce7b62fd0a2$export$3ac1e88a1c0b9f1), {
+                className: (0, $625847aeb8796968$export$a274e22fb40f762e)({
+                    "select-trigger": true,
+                    ...space.classNames
+                }),
                 type: "button",
                 "data-focused": isFocused,
                 appearance: appearance,
@@ -3034,39 +3185,6 @@ $bb9dfe97a38c22dd$export$d9781c7894a82487.displayName = "DateField";
 
 
 
-function $5c7d398903852591$export$30a06c8d3562193f(object, keys) {
-    return Object.keys(object).reduce((obj, key)=>{
-        if (keys.includes(key)) return {
-            ...obj
-        };
-        return {
-            ...obj,
-            [key]: object[key]
-        };
-    }, {});
-}
-function $5c7d398903852591$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 $5c7d398903852591$export$65980d18b75784e2(object, keys) {
-    const picked = $5c7d398903852591$export$357523c63a2253b9(object, keys);
-    const omitted = $5c7d398903852591$export$30a06c8d3562193f(object, keys);
-    return [
-        picked,
-        omitted
-    ];
-}
-
 
 function $80dfb6e58ec8ad02$export$d02631cccf789723(start = 0, end, step = 1) {
     const result = [];
@@ -3111,7 +3229,7 @@ const $dcb2850cb2ddaca2$export$e1aef45b828286de = /*#__PURE__*/ $kF5Av$forwardRe
                 className: "header",
                 children: [
                     /*#__PURE__*/ (0, $kF5Av$jsx)((0, $39ebe5a116c39d6c$export$c25acd513dcc8062), {
-                        shape: "square",
+                        shape: "sharp",
                         size: "xs",
                         color: "white",
                         ...prevButtonProps,
@@ -3127,7 +3245,7 @@ const $dcb2850cb2ddaca2$export$e1aef45b828286de = /*#__PURE__*/ $kF5Av$forwardRe
                         children: title
                     }),
                     /*#__PURE__*/ (0, $kF5Av$jsx)((0, $39ebe5a116c39d6c$export$c25acd513dcc8062), {
-                        shape: "square",
+                        shape: "sharp",
                         size: "xs",
                         color: "white",
                         ...nextButtonProps,
@@ -3229,9 +3347,12 @@ function $774063d921c2c189$export$85930906f541ddb8(date) {
 }
 
 
+
+
 const $8370e4d32f002899$export$5109c6dd95d8fb00 = /*#__PURE__*/ $kF5Av$forwardRef(({ appearance: appearance = "filled" , size: size = "md" , css: css , numberOfMonths: numberOfMonths , value: value , onChange: onChange , defaultValue: defaultValue , dropdownIcon: dropdownIcon = /*#__PURE__*/ (0, $kF5Av$jsx)((0, $kF5Av$HiOutlineCalendar), {
     size: 16
 }) , ...props }, ref)=>{
+    const space = (0, $aca95339810194aa$export$450c36e0b0e62ccd)();
     function _onChange(date) {
         onChange?.(new Date(date.year, date.month, date.day), date);
     }
@@ -3255,6 +3376,8 @@ const $8370e4d32f002899$export$5109c6dd95d8fb00 = /*#__PURE__*/ $kF5Av$forwardRe
     const pickerRef = $kF5Av$useRef(null);
     const { groupProps: groupProps , calendarProps: calendarProps , fieldProps: fieldProps , buttonProps: buttonProps , errorMessageProps: errorMessageProps , labelProps: labelProps  } = (0, $kF5Av$useDatePicker)(newPropsWithProxies, state, pickerRef);
     return /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
+        className: space.compactItemWrapperAdjust,
+        css: css,
         stretchX: true,
         stack: true,
         gap: 1,
@@ -3266,12 +3389,15 @@ const $8370e4d32f002899$export$5109c6dd95d8fb00 = /*#__PURE__*/ $kF5Av$forwardRe
             /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
                 ref: ref,
                 gap: 10,
-                css: css,
                 stretchX: true,
                 inline: true,
                 stack: true,
                 children: [
                     /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $83078af43f67af46$export$79e84280796e5e38), {
+                        className: (0, $625847aeb8796968$export$a274e22fb40f762e)({
+                            "date-picker-trigger": true,
+                            ...space.classNames
+                        }),
                         ref: pickerRef,
                         justify: "between",
                         align: "center",
@@ -5103,5 +5229,6 @@ $9da3b07c262d31a5$export$2b77a92f1a5ad772.useModal = $9da3b07c262d31a5$export$33
 
 
 
-export {$d22d8a7881f7b33f$export$2e2bcd8739ae039 as Box, $07781ffe9a5ae30b$export$ef2184bd89960b14 as Grid, $07781ffe9a5ae30b$export$9eb849b9b922d396 as GridItem, $f09084fde7cc0470$export$2e2bcd8739ae039 as Column, $391d62e0590dec97$export$2e2bcd8739ae039 as Flex, $61dde3060428563f$export$f5b8910cec6cf069 as Input, $4fdef5d0844b7575$export$2e2bcd8739ae039 as Text, $7f7599719bb2a749$export$379139ebc1c2b235 as Textarea, $59636f06ede7befa$export$353f5b6fc5456de1 as Button, $39ebe5a116c39d6c$export$c25acd513dcc8062 as IconButton, $b5830f3daeb33bb2$export$48513f6b9f8ce62d as Checkbox, $5711a5825d7012d3$export$4aa08d5625cb8ead as CheckboxGroup, $b5c60232b181c4bd$export$d7b12c4107be0d61 as Radio, $b5c60232b181c4bd$export$a98f0dcb43a68a25 as RadioGroup, $f7762930a14621d8$export$f8afaea2e9656b91 as RadioCard, $604e914a624d5a0f$export$a26e8b900a29a570 as Select, $8370e4d32f002899$export$5109c6dd95d8fb00 as DatePicker, $2b3b1dc9b2ed8672$export$e2255cf6045e8d47 as Avatar, $c0386802302e82e5$export$1a5cb5295a7d2749 as FileUploader, $4724a2c0da358be5$export$1ff3c3f08ae963c0 as Separator, $12105c91de6d0b91$export$b25a304ec7d746bb as Progress, $8eafe9f534066907$export$3b0d6d7590275603 as Loader, $d20773ec72923119$export$be92b6f5f03c0fe9 as Root, $d20773ec72923119$export$6d08773d2e66f8f2 as Item, $827cce002ec16c4b$export$3288d34c523a1192 as Tag, $4fd64b5726f94f78$export$b5d5cf8927ab7262 as Switch, $fd0a1cc8c4288e44$export$dbada5ace43900dd as ColorTray, $d2eff3f3a30a8f9a$export$50e381fea3a45244 as IconTray, $ea604f064e7efbe1$export$ea98c603db73aee7 as Sticker, $b13859906e03ed0f$export$e44a253a59704894 as DropdownMenu, $40e1dcf58e198ee9$export$1aaa3deaa90ea306 as Tabs, $2c3cbfa2e31957ff$export$54ec01a60f47d33d as Table, $cdf79c1aee6c465f$export$e6a97ba2cae5bb94 as Timeline, $9da3b07c262d31a5$export$2b77a92f1a5ad772 as Modal, $9ade691eb9e41cfb$export$3817b7a54a07cec7 as parrot, $9ade691eb9e41cfb$export$bca14c5b3b88a9c9 as ParrotTheme, $9ade691eb9e41cfb$export$e506a1d27d1eaa20 as ParrotThemeConfig};
+
+export {$d22d8a7881f7b33f$export$2e2bcd8739ae039 as Box, $07781ffe9a5ae30b$export$ef2184bd89960b14 as Grid, $07781ffe9a5ae30b$export$9eb849b9b922d396 as GridItem, $f09084fde7cc0470$export$2e2bcd8739ae039 as Column, $391d62e0590dec97$export$2e2bcd8739ae039 as Flex, $61dde3060428563f$export$f5b8910cec6cf069 as Input, $4fdef5d0844b7575$export$2e2bcd8739ae039 as Text, $7f7599719bb2a749$export$379139ebc1c2b235 as Textarea, $59636f06ede7befa$export$353f5b6fc5456de1 as Button, $39ebe5a116c39d6c$export$c25acd513dcc8062 as IconButton, $b5830f3daeb33bb2$export$48513f6b9f8ce62d as Checkbox, $5711a5825d7012d3$export$4aa08d5625cb8ead as CheckboxGroup, $b5c60232b181c4bd$export$d7b12c4107be0d61 as Radio, $b5c60232b181c4bd$export$a98f0dcb43a68a25 as RadioGroup, $f7762930a14621d8$export$f8afaea2e9656b91 as RadioCard, $604e914a624d5a0f$export$a26e8b900a29a570 as Select, $8370e4d32f002899$export$5109c6dd95d8fb00 as DatePicker, $2b3b1dc9b2ed8672$export$e2255cf6045e8d47 as Avatar, $c0386802302e82e5$export$1a5cb5295a7d2749 as FileUploader, $4724a2c0da358be5$export$1ff3c3f08ae963c0 as Separator, $12105c91de6d0b91$export$b25a304ec7d746bb as Progress, $8eafe9f534066907$export$3b0d6d7590275603 as Loader, $d20773ec72923119$export$be92b6f5f03c0fe9 as Root, $d20773ec72923119$export$6d08773d2e66f8f2 as Item, $827cce002ec16c4b$export$3288d34c523a1192 as Tag, $4fd64b5726f94f78$export$b5d5cf8927ab7262 as Switch, $fd0a1cc8c4288e44$export$dbada5ace43900dd as ColorTray, $d2eff3f3a30a8f9a$export$50e381fea3a45244 as IconTray, $ea604f064e7efbe1$export$ea98c603db73aee7 as Sticker, $b13859906e03ed0f$export$e44a253a59704894 as DropdownMenu, $40e1dcf58e198ee9$export$1aaa3deaa90ea306 as Tabs, $2c3cbfa2e31957ff$export$54ec01a60f47d33d as Table, $cdf79c1aee6c465f$export$e6a97ba2cae5bb94 as Timeline, $9da3b07c262d31a5$export$2b77a92f1a5ad772 as Modal, $aca95339810194aa$export$eef1e68107c58ef2 as Space, $9ade691eb9e41cfb$export$3817b7a54a07cec7 as parrot, $9ade691eb9e41cfb$export$bca14c5b3b88a9c9 as ParrotTheme, $9ade691eb9e41cfb$export$e506a1d27d1eaa20 as ParrotThemeConfig};
 //# sourceMappingURL=module.js.map