@parrot-co/parrot-ui 0.0.84 → 0.0.85

package/dist/module.js

@@ -1,7 +1,7 @@
 import {jsx as $ilZGV$jsx, jsxs as $ilZGV$jsxs} from "react/jsx-runtime";
 import $ilZGV$react, {forwardRef as $ilZGV$forwardRef, useCallback as $ilZGV$useCallback, createContext as $ilZGV$createContext, Children as $ilZGV$Children, useMemo as $ilZGV$useMemo, isValidElement as $ilZGV$isValidElement, useContext as $ilZGV$useContext, useRef as $ilZGV$useRef, useState as $ilZGV$useState, useEffect as $ilZGV$useEffect, cloneElement as $ilZGV$cloneElement} from "react";
 import {useTextField as $ilZGV$useTextField, useLocale as $ilZGV$useLocale, useNumberField as $ilZGV$useNumberField, useToggleButton as $ilZGV$useToggleButton, useCheckbox as $ilZGV$useCheckbox, useCheckboxGroupItem as $ilZGV$useCheckboxGroupItem, useFocusRing as $ilZGV$useFocusRing, VisuallyHidden as $ilZGV$VisuallyHidden, useCheckboxGroup as $ilZGV$useCheckboxGroup, useRadio as $ilZGV$useRadio, useRadioGroup as $ilZGV$useRadioGroup, useMenuTrigger as $ilZGV$useMenuTrigger, usePress as $ilZGV$usePress, HiddenSelect as $ilZGV$HiddenSelect, useListBox as $ilZGV$useListBox, useOption as $ilZGV$useOption, useListBoxSection as $ilZGV$useListBoxSection, usePopover as $ilZGV$usePopover, Overlay as $ilZGV$Overlay, useCalendar as $ilZGV$useCalendar, useCalendarGrid as $ilZGV$useCalendarGrid, useCalendarCell as $ilZGV$useCalendarCell, mergeProps as $ilZGV$mergeProps, useDatePicker as $ilZGV$useDatePicker, useDateField as $ilZGV$useDateField, useDateSegment as $ilZGV$useDateSegment, useDrop as $ilZGV$useDrop, useProgressBar as $ilZGV$useProgressBar, useTabList as $ilZGV$useTabList, useTab as $ilZGV$useTab, useTabPanel as $ilZGV$useTabPanel, useHover as $ilZGV$useHover, useSwitch as $ilZGV$useSwitch, useModalOverlay as $ilZGV$useModalOverlay, useDialog as $ilZGV$useDialog} from "react-aria";
-import {HiMinus as $ilZGV$HiMinus, HiPlus as $ilZGV$HiPlus, HiX as $ilZGV$HiX, HiSelector as $ilZGV$HiSelector, HiChevronLeft as $ilZGV$HiChevronLeft, HiChevronRight as $ilZGV$HiChevronRight, HiOutlineCalendar as $ilZGV$HiOutlineCalendar, HiOutlineDocumentAdd as $ilZGV$HiOutlineDocumentAdd, HiOutlineCheckCircle as $ilZGV$HiOutlineCheckCircle, HiOutlineTrash as $ilZGV$HiOutlineTrash, HiOutlineExclamationCircle as $ilZGV$HiOutlineExclamationCircle, HiOutlineRefresh as $ilZGV$HiOutlineRefresh, HiOutlinePaperClip as $ilZGV$HiOutlinePaperClip, HiCheck as $ilZGV$HiCheck, HiOutlineGlobe as $ilZGV$HiOutlineGlobe, HiOutlineCurrencyDollar as $ilZGV$HiOutlineCurrencyDollar, HiOutlineGlobeAlt as $ilZGV$HiOutlineGlobeAlt, HiOutlineArchive as $ilZGV$HiOutlineArchive, HiOutlineAnnotation as $ilZGV$HiOutlineAnnotation, HiOutlineFire as $ilZGV$HiOutlineFire, HiOutlineBadgeCheck as $ilZGV$HiOutlineBadgeCheck, HiOutlineSparkles as $ilZGV$HiOutlineSparkles, HiOutlineSpeakerphone as $ilZGV$HiOutlineSpeakerphone, HiOutlineCreditCard as $ilZGV$HiOutlineCreditCard, HiOutlineHeart as $ilZGV$HiOutlineHeart, HiOutlineLocationMarker as $ilZGV$HiOutlineLocationMarker, HiOutlineCursorClick as $ilZGV$HiOutlineCursorClick, HiOutlineLightningBolt as $ilZGV$HiOutlineLightningBolt, HiOutlineDocumentDownload as $ilZGV$HiOutlineDocumentDownload, HiOutlineTag as $ilZGV$HiOutlineTag, HiOutlineAtSymbol as $ilZGV$HiOutlineAtSymbol, HiOutlineUserCircle as $ilZGV$HiOutlineUserCircle, HiOutlineTerminal as $ilZGV$HiOutlineTerminal, HiOutlineMoon as $ilZGV$HiOutlineMoon} from "react-icons/hi";
+import {HiMinus as $ilZGV$HiMinus, HiPlus as $ilZGV$HiPlus, HiX as $ilZGV$HiX, HiSelector as $ilZGV$HiSelector, HiCheck as $ilZGV$HiCheck, HiChevronLeft as $ilZGV$HiChevronLeft, HiChevronRight as $ilZGV$HiChevronRight, HiOutlineCalendar as $ilZGV$HiOutlineCalendar, HiOutlineDocumentAdd as $ilZGV$HiOutlineDocumentAdd, HiOutlineCheckCircle as $ilZGV$HiOutlineCheckCircle, HiOutlineTrash as $ilZGV$HiOutlineTrash, HiOutlineExclamationCircle as $ilZGV$HiOutlineExclamationCircle, HiOutlineRefresh as $ilZGV$HiOutlineRefresh, HiOutlinePaperClip as $ilZGV$HiOutlinePaperClip, HiOutlineGlobe as $ilZGV$HiOutlineGlobe, HiOutlineCurrencyDollar as $ilZGV$HiOutlineCurrencyDollar, HiOutlineGlobeAlt as $ilZGV$HiOutlineGlobeAlt, HiOutlineArchive as $ilZGV$HiOutlineArchive, HiOutlineAnnotation as $ilZGV$HiOutlineAnnotation, HiOutlineFire as $ilZGV$HiOutlineFire, HiOutlineBadgeCheck as $ilZGV$HiOutlineBadgeCheck, HiOutlineSparkles as $ilZGV$HiOutlineSparkles, HiOutlineSpeakerphone as $ilZGV$HiOutlineSpeakerphone, HiOutlineCreditCard as $ilZGV$HiOutlineCreditCard, HiOutlineHeart as $ilZGV$HiOutlineHeart, HiOutlineLocationMarker as $ilZGV$HiOutlineLocationMarker, HiOutlineCursorClick as $ilZGV$HiOutlineCursorClick, HiOutlineLightningBolt as $ilZGV$HiOutlineLightningBolt, HiOutlineDocumentDownload as $ilZGV$HiOutlineDocumentDownload, HiOutlineTag as $ilZGV$HiOutlineTag, HiOutlineAtSymbol as $ilZGV$HiOutlineAtSymbol, HiOutlineUserCircle as $ilZGV$HiOutlineUserCircle, HiOutlineTerminal as $ilZGV$HiOutlineTerminal, HiOutlineMoon as $ilZGV$HiOutlineMoon} from "react-icons/hi";
 import {useNumberFieldState as $ilZGV$useNumberFieldState, useToggleState as $ilZGV$useToggleState, useCheckboxGroupState as $ilZGV$useCheckboxGroupState, useRadioGroupState as $ilZGV$useRadioGroupState, useMenuTriggerState as $ilZGV$useMenuTriggerState, useListState as $ilZGV$useListState, Item as $ilZGV$Item, Section as $ilZGV$Section, useCalendarState as $ilZGV$useCalendarState, useDatePickerState as $ilZGV$useDatePickerState, useDateFieldState as $ilZGV$useDateFieldState, useTabListState as $ilZGV$useTabListState, useOverlayTriggerState as $ilZGV$useOverlayTriggerState} from "react-stately";
 import {createCalendar as $ilZGV$createCalendar, endOfMonth as $ilZGV$endOfMonth, getWeeksInMonth as $ilZGV$getWeeksInMonth, isSameMonth as $ilZGV$isSameMonth, CalendarDate as $ilZGV$CalendarDate} from "@internationalized/date";
 
@@ -158,15 +158,16 @@ $7f9359c321db931d$export$f51f4c4ede09e011.displayName = "Flex";
 
 
 const $ad6bb3d9e1e05700$export$5f1af8db9871e1d6 = (props)=>{
-    const { size: size , weight: weight , color: color = "gray" , variant: variant = "default" , highlight: highlight , align: align , lineHeight: lineHeight , underline: underline , italic: italic , as: Tag = "span" , textRef: textRef , className: className , ...rest } = props;
-    return /*#__PURE__*/ (0, $ilZGV$jsx)(Tag, {
+    const { textCase: textCase , size: size , weight: weight , color: color = "gray" , variant: variant = "default" , highlight: highlight , align: align , lineHeight: lineHeight , underline: underline , italic: italic , as: Comp = "span" , textRef: textRef , className: className , ...rest } = props;
+    return /*#__PURE__*/ (0, $ilZGV$jsx)(Comp, {
         className: (0, $c4c58f2604e361a3$export$a274e22fb40f762e)({
             [`text-highlight`]: !!highlight,
             "p-text": true,
             [`text-size-${size}`]: !!size,
             [`text-weight-${weight}`]: !!weight,
-            [`text-alight-${align}`]: !!align,
+            [`text-align-${align}`]: !!align,
             [`text-line-height-${lineHeight}`]: !!lineHeight,
+            [`text-transform-${textCase}`]: !!textCase,
             [`${className}`]: !!className
         }),
         "data-underline": underline,
@@ -561,7 +562,8 @@ const $c104f9e833419de4$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $ilZGV$react
             prepend,
             /*#__PURE__*/ (0, $ilZGV$jsx)("span", {
                 style: {
-                    padding: isIconButton ? undefined : "0 6px"
+                    padding: isIconButton ? undefined : "0 6px",
+                    lineHeight: 0
                 },
                 children: children
             }),
@@ -842,12 +844,12 @@ const $775c2fb4fd112efa$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, $ilZGV$react
                 className: "fake-checkbox",
                 "data-focused": isFocusVisible,
                 "aria-hidden": "true",
-                "data-checked": isSelected,
+                "data-checked": isSelected && !props.isIndeterminate,
                 "data-indeterminate": props.isIndeterminate,
                 "data-size": resolvedSize,
                 "data-appearance": resolvedAppearance,
                 children: [
-                    isSelected && /*#__PURE__*/ (0, $ilZGV$jsx)("svg", {
+                    isSelected && !props.isIndeterminate && /*#__PURE__*/ (0, $ilZGV$jsx)("svg", {
                         stroke: "white",
                         width: "0.75rem",
                         height: "0.75rem",
@@ -865,7 +867,7 @@ const $775c2fb4fd112efa$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, $ilZGV$react
                     }),
                     props.isIndeterminate && /*#__PURE__*/ (0, $ilZGV$jsx)((0, $6cd538350b429e7f$export$e71c4d32a2263218), {
                         style: {
-                            background: "$gray11",
+                            background: "var(--color-12)",
                             width: "70%",
                             height: 2,
                             borderRadius: 4
@@ -1056,7 +1058,26 @@ function $11794b81e576e85c$export$3d7d0414f6db67e7({ children: children , render
 
 
 
-function $0edad8c8c01688ea$export$41f133550aa26f48({ state: state , color: color , width: width = 300 , ...props }) {
+
+
+
+const $33ed584ab3798ace$var$ListBoxContext = /*#__PURE__*/ $ilZGV$createContext(null);
+function $33ed584ab3798ace$export$1e60abce570c2b01(props) {
+    return /*#__PURE__*/ (0, $ilZGV$jsx)($33ed584ab3798ace$var$ListBoxContext.Provider, {
+        value: {
+            props: props
+        },
+        children: props.children
+    });
+}
+function $33ed584ab3798ace$export$961f16f221737ce2() {
+    const context = $ilZGV$useContext($33ed584ab3798ace$var$ListBoxContext);
+    if (!context) throw new Error("ListBox components must be rendered within the ListBoxProvider");
+    return context;
+}
+
+
+function $0edad8c8c01688ea$export$41f133550aa26f48({ state: state , color: color , width: width = 300 , showSelectedMarker: showSelectedMarker = true , ...props }) {
     const internalState = (0, $ilZGV$useListState)({
         ...props,
         children: (0, $11794b81e576e85c$export$3d7d0414f6db67e7)(props)
@@ -1067,23 +1088,18 @@ function $0edad8c8c01688ea$export$41f133550aa26f48({ state: state , color: color
     const options = [
         ...listState.collection
     ];
-    return /*#__PURE__*/ (0, $ilZGV$jsxs)((0, $7f9359c321db931d$export$f51f4c4ede09e011), {
-        "data-color": color,
-        style: {
-            width: width,
-            minWidth: 300
-        },
-        stack: true,
-        gap: "md",
-        children: [
-            props.label && /*#__PURE__*/ (0, $ilZGV$jsx)((0, $ad6bb3d9e1e05700$export$5f1af8db9871e1d6), {
-                size: "sm",
-                variant: "light",
-                as: "div",
-                ...labelProps,
-                children: props.label
-            }),
-            /*#__PURE__*/ (0, $ilZGV$jsxs)((0, $7f9359c321db931d$export$f51f4c4ede09e011), {
+    return /*#__PURE__*/ (0, $ilZGV$jsx)((0, $33ed584ab3798ace$export$1e60abce570c2b01), {
+        ...props,
+        showSelectedMarker: showSelectedMarker,
+        children: /*#__PURE__*/ (0, $ilZGV$jsx)((0, $7f9359c321db931d$export$f51f4c4ede09e011), {
+            "data-color": color,
+            style: {
+                width: width,
+                minWidth: 300
+            },
+            stack: true,
+            gap: "md",
+            children: /*#__PURE__*/ (0, $ilZGV$jsxs)((0, $7f9359c321db931d$export$f51f4c4ede09e011), {
                 as: "ul",
                 stack: true,
                 gap: "none",
@@ -1115,7 +1131,7 @@ function $0edad8c8c01688ea$export$41f133550aa26f48({ state: state , color: color
                     })
                 ]
             })
-        ]
+        })
     });
 }
 function $0edad8c8c01688ea$var$ListOption({ state: state , item: item  }) {
@@ -1123,7 +1139,8 @@ function $0edad8c8c01688ea$var$ListOption({ state: state , item: item  }) {
     const { optionProps: optionProps , isDisabled: isDisabled , isFocusVisible: isFocusVisible , isFocused: isFocused , isPressed: isPressed , isSelected: isSelected  } = (0, $ilZGV$useOption)({
         key: item.key
     }, state, optionRef);
-    return /*#__PURE__*/ (0, $ilZGV$jsx)("li", {
+    const listBoxContext = (0, $33ed584ab3798ace$export$961f16f221737ce2)();
+    return /*#__PURE__*/ (0, $ilZGV$jsxs)("li", {
         className: "list-option",
         "data-disabled": isDisabled,
         "data-focus-visible": isFocusVisible,
@@ -1135,7 +1152,12 @@ function $0edad8c8c01688ea$var$ListOption({ state: state , item: item  }) {
             "textValue"
         ]),
         ref: optionRef,
-        children: item.rendered
+        children: [
+            item.rendered,
+            isSelected && listBoxContext.props.showSelectedMarker && /*#__PURE__*/ (0, $ilZGV$jsx)((0, $ilZGV$HiCheck), {
+                className: "selected-marker"
+            })
+        ]
     });
 }
 function $0edad8c8c01688ea$var$ListSection({ state: state , section: section  }) {
@@ -1143,40 +1165,50 @@ function $0edad8c8c01688ea$var$ListSection({ state: state , section: section  })
         heading: section?.rendered,
         "aria-label": section["aria-label"]
     });
+    const listBoxContext = (0, $33ed584ab3798ace$export$961f16f221737ce2)();
     function getChildren() {
         if (state.collection.getChildren) return [
             ...state.collection.getChildren(section.key)
         ];
         return [];
     }
-    return /*#__PURE__*/ (0, $ilZGV$jsx)((0, $7f9359c321db931d$export$f51f4c4ede09e011), {
+    return /*#__PURE__*/ (0, $ilZGV$jsxs)((0, $7f9359c321db931d$export$f51f4c4ede09e011), {
         gap: "sm",
         stack: true,
         className: "list-section",
-        children: /*#__PURE__*/ (0, $ilZGV$jsxs)((0, $7f9359c321db931d$export$f51f4c4ede09e011), {
-            gap: "sm",
-            stack: true,
-            as: "li",
-            ...itemProps,
-            children: [
-                section.rendered && /*#__PURE__*/ (0, $ilZGV$jsx)((0, $ad6bb3d9e1e05700$export$5f1af8db9871e1d6), {
-                    size: "sm",
-                    as: "div",
-                    variant: "light",
-                    ...headingProps,
-                    children: section.rendered
-                }),
-                /*#__PURE__*/ (0, $ilZGV$jsx)("ul", {
-                    ...groupProps,
-                    children: getChildren().map((node)=>{
-                        return /*#__PURE__*/ (0, $ilZGV$jsx)($0edad8c8c01688ea$var$ListOption, {
-                            item: node,
-                            state: state
-                        }, node.key);
+        children: [
+            section.key !== state.collection.getFirstKey() && listBoxContext.props.showSeparator && /*#__PURE__*/ (0, $ilZGV$jsx)("li", {
+                className: "list-separator"
+            }),
+            /*#__PURE__*/ (0, $ilZGV$jsxs)((0, $7f9359c321db931d$export$f51f4c4ede09e011), {
+                gap: "none",
+                stack: true,
+                as: "li",
+                ...itemProps,
+                children: [
+                    section.rendered && /*#__PURE__*/ (0, $ilZGV$jsx)("div", {
+                        className: "list-section-header",
+                        children: /*#__PURE__*/ (0, $ilZGV$jsx)((0, $ad6bb3d9e1e05700$export$5f1af8db9871e1d6), {
+                            weight: "regular",
+                            size: "xs",
+                            as: "div",
+                            variant: "light",
+                            ...headingProps,
+                            children: section.rendered
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $ilZGV$jsx)("ul", {
+                        ...groupProps,
+                        children: getChildren().map((node)=>{
+                            return /*#__PURE__*/ (0, $ilZGV$jsx)($0edad8c8c01688ea$var$ListOption, {
+                                item: node,
+                                state: state
+                            }, node.key);
+                        })
                     })
-                })
-            ]
-        })
+                ]
+            })
+        ]
     });
 }
 const $0edad8c8c01688ea$export$36d18380658d5d20 = (0, $ilZGV$Item);
@@ -1314,16 +1346,39 @@ function $b107431cb75f5c0b$export$5b6b19405a83ff9d({ state: state , children: ch
 
 
 
-function $0d71c1f2b7db4b85$export$ef9b1a59e592288f({ label: label , selectionMode: selectionMode = "single" , appearance: appearance = "outline" , append: append , prepend: prepend , renderValue: renderValue , color: color = "gray" , error: error , description: description , size: size = "sm" , shape: shape = "rounded" , listBoxColor: listBoxColor , className: className , ...props }) {
+
+function $0d71c1f2b7db4b85$export$ef9b1a59e592288f({ label: label , selectionMode: selectionMode = "single" , appearance: appearance = "outline" , append: append , prepend: prepend , renderValue: renderValue , color: color = "gray" , error: error , description: description , size: size = "sm" , shape: shape = "rounded" , listBoxColor: listBoxColor , className: className , value: value , defaultValue: defaultValue , onChange: onChange , ...props }) {
+    const isMultiple = selectionMode === "multiple";
+    function getValue(value) {
+        if (!value) return null;
+        if (selectionMode === "single") return [
+            value
+        ];
+        if (isMultiple && !(0, $aff4c89355ace90b$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
+            }
+        });
+    }
     const space = (0, $a0b7975efdcbad3c$export$450c36e0b0e62ccd)();
     const [isFocused, setIsFocused] = $ilZGV$useState(false);
     const triggerState = (0, $ilZGV$useMenuTriggerState)({});
     const listState = (0, $ilZGV$useListState)({
         ...props,
+        selectedKeys: getValue(value),
+        defaultSelectedKeys: getValue(defaultValue),
         selectionMode: selectionMode,
         children: (0, $11794b81e576e85c$export$3d7d0414f6db67e7)(props),
-        onSelectionChange () {
-            if (selectionMode === "single") triggerState.close();
+        onSelectionChange (keys) {
+            onSelectionChange([
+                ...keys
+            ]);
+            if (!isMultiple) triggerState.close();
         }
     });
     const triggerRef = $ilZGV$useRef(null);
@@ -1334,7 +1389,6 @@ function $0d71c1f2b7db4b85$export$ef9b1a59e592288f({ label: label , selectionMod
         isDisabled: false
     }, triggerState, triggerRef);
     const { pressProps: triggerProps  } = (0, $ilZGV$usePress)(menuTriggerProps);
-    const isMultiple = selectionMode === "multiple";
     const selectedItems = [
         ...listState.selectionManager.selectedKeys
     ].map((item)=>listState.collection.getItem(item));
@@ -1433,8 +1487,11 @@ function $0d71c1f2b7db4b85$export$ef9b1a59e592288f({ label: label , selectionMod
                 triggerRef: triggerRef,
                 state: triggerState,
                 children: /*#__PURE__*/ (0, $ilZGV$jsx)((0, $0edad8c8c01688ea$export$41f133550aa26f48), {
+                    label: label,
+                    showSeparator: props.showSeparator,
+                    showSelectedMarker: props.showSelectedMarker,
                     width: triggerRef.current?.getBoundingClientRect().width,
-                    color: listBoxColor ?? color,
+                    color: listBoxColor ?? "gray",
                     shouldFocusOnHover: true,
                     state: listState,
                     ...props
@@ -2600,10 +2657,14 @@ function $9e2f19f5522a9ed4$export$e6a97ba2cae5bb94({ items: items , render: rend
 
 
 
+
 function $27dfef5c84f0ece2$export$c6fdb837b070b4ff({ state: state , children: children , ...props }) {
     const modalRef = $ilZGV$useRef(null);
     const { modalProps: modalProps , underlayProps: underlayProps  } = (0, $ilZGV$useModalOverlay)(props, state, modalRef);
     if (!state.isOpen) return null;
+    // bring back aria-overlay when you find a way for theme provider to affect
+    // portalled elements
+    // aria-overlay handles the focus trap
     return /*#__PURE__*/ (0, $ilZGV$jsx)("div", {
         className: "modal-underlay parrot-theme",
         ...underlayProps,
@@ -2615,10 +2676,11 @@ function $27dfef5c84f0ece2$export$c6fdb837b070b4ff({ state: state , children: ch
         })
     });
 }
-function $27dfef5c84f0ece2$var$Dialog({ width: width = 400 , title: title , onCancel: onCancel , onConfirm: onConfirm , confirmLabel: confirmLabel = "Confirm" , cancelLabel: cancelLabel = "Cancel" , description: description , children: children , state: state , confirmButtonProps: confirmButtonProps , cancelButtonProps: cancelButtonProps , variant: variant = "modal"  }) {
+function $27dfef5c84f0ece2$var$Dialog({ width: width = 400 , title: title , onCancel: onCancel , onConfirm: onConfirm , confirmLabel: confirmLabel = "Confirm" , cancelLabel: cancelLabel = "Cancel" , description: description , children: children , state: state , confirmButtonProps: confirmButtonProps , cancelButtonProps: cancelButtonProps , variant: variant = "modal" , showCloseButton: showCloseButton = true , ...props }) {
     const dialogRef = $ilZGV$useRef(null);
     const { dialogProps: dialogProps , titleProps: titleProps  } = (0, $ilZGV$useDialog)({
-        role: "alertdialog"
+        role: "dialog",
+        ...props
     }, dialogRef);
     return /*#__PURE__*/ (0, $ilZGV$jsxs)("div", {
         className: "modal-content",
@@ -2633,24 +2695,38 @@ function $27dfef5c84f0ece2$var$Dialog({ width: width = 400 , title: title , onCa
                 stack: true,
                 children: [
                     /*#__PURE__*/ (0, $ilZGV$jsxs)((0, $7f9359c321db931d$export$f51f4c4ede09e011), {
-                        stack: true,
-                        gap: "3xs",
+                        justify: "space-between",
+                        gap: "2xl",
                         className: "modal-head",
                         children: [
-                            title && /*#__PURE__*/ (0, $ilZGV$jsx)((0, $ad6bb3d9e1e05700$export$5f1af8db9871e1d6), {
-                                weight: "medium",
-                                size: "md",
-                                color: "gray",
-                                ...titleProps,
-                                as: "div",
-                                children: title
+                            /*#__PURE__*/ (0, $ilZGV$jsxs)((0, $7f9359c321db931d$export$f51f4c4ede09e011), {
+                                stack: true,
+                                gap: "3xs",
+                                children: [
+                                    title && /*#__PURE__*/ (0, $ilZGV$jsx)((0, $ad6bb3d9e1e05700$export$5f1af8db9871e1d6), {
+                                        weight: "medium",
+                                        size: "md",
+                                        color: "gray",
+                                        ...titleProps,
+                                        as: "div",
+                                        children: title
+                                    }),
+                                    description && /*#__PURE__*/ (0, $ilZGV$jsx)((0, $ad6bb3d9e1e05700$export$5f1af8db9871e1d6), {
+                                        lineHeight: "base",
+                                        size: "xs",
+                                        variant: "light",
+                                        as: "div",
+                                        children: description
+                                    })
+                                ]
                             }),
-                            description && /*#__PURE__*/ (0, $ilZGV$jsx)((0, $ad6bb3d9e1e05700$export$5f1af8db9871e1d6), {
-                                lineHeight: "base",
-                                size: "xs",
-                                variant: "light",
-                                as: "div",
-                                children: description
+                            props.isDismissable && showCloseButton && /*#__PURE__*/ (0, $ilZGV$jsx)((0, $e588944490abcca5$export$c25acd513dcc8062), {
+                                onPress: state.close,
+                                variant: "ghost",
+                                size: "sm",
+                                children: /*#__PURE__*/ (0, $ilZGV$jsx)((0, $ilZGV$HiX), {
+                                    size: 18
+                                })
                             })
                         ]
                     }),
@@ -2667,10 +2743,10 @@ function $27dfef5c84f0ece2$var$Dialog({ width: width = 400 , title: title , onCa
                 stretchX: true,
                 children: [
                     onCancel && /*#__PURE__*/ (0, $ilZGV$jsx)((0, $c104f9e833419de4$export$353f5b6fc5456de1), {
-                        ...cancelButtonProps,
                         onPress: state.close,
                         variant: "outline",
                         color: "gray",
+                        ...cancelButtonProps,
                         children: cancelLabel
                     }),
                     onConfirm && /*#__PURE__*/ (0, $ilZGV$jsx)((0, $c104f9e833419de4$export$353f5b6fc5456de1), {