@app-studio/web 0.8.40 → 0.8.42

package/dist/web.umd.development.js

@@ -2390,7 +2390,7 @@
         ariaLabel,
         // Initializes default values for the ButtonProps object; useful for defining states like isAuto, isFilled, etc.
         externalHref,
-        isAuto,
+        isAuto = false,
         // Determines if button should be active based on isDisabled and isLoading properties.
         isFilled = false,
         // Prepares default properties for the native button element based on isActive state.
@@ -2468,7 +2468,8 @@
     var buttonSizeStyles = ButtonSizes[size];
     var buttonVariant = ButtonVariants[variant];
     var scaleWidth = {
-      minWidth: isAuto ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width
+      width: isAuto === true ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width,
+      minWidth: isAuto === true ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width
     };
     var changePadding = isIconRounded ? IconSizes$1[size] : ButtonSizes[size];
     var content = /*#__PURE__*/React__default.createElement(Horizontal, {
@@ -6616,46 +6617,51 @@
   };
 
   var useModalStore = /*#__PURE__*/zustand.create(set => ({
-    modal: false,
-    modalProps: {
-      isVisible: false
-    },
-    overlayProps: {},
-    show: function show(modal, modalProps, overlayProps) {
+    modals: [],
+    show: function show(name, modalProps, overlayProps) {
       if (modalProps === void 0) {
         modalProps = {};
       }
       if (overlayProps === void 0) {
         overlayProps = {};
       }
-      if (modal) {
-        modalProps.isVisible = true;
-      }
-      set(state => Object.assign({}, state, {
-        modal,
-        modalProps,
-        overlayProps
+      set(state => ({
+        modals: [...state.modals, {
+          name,
+          props: Object.assign({}, modalProps, {
+            isVisible: true
+          }),
+          overlayProps
+        }]
       }));
     },
-    hide: () => {
-      set(state => Object.assign({}, state, {
-        modalProps: Object.assign({}, state.modalProps, {
-          isVisible: false
-        })
-      }));
+    hide: name => {
+      set(state => {
+        if (!name) {
+          // Hide all modals
+          return {
+            modals: []
+          };
+        }
+        // Hide specific modal by name
+        return {
+          modals: state.modals.filter(modal => modal.name !== name)
+        };
+      });
     }
   }));
-  var showModal = function showModal(modal, modalProps, overlayProps) {
+  var showModal = function showModal(name, modalProps, overlayProps) {
     if (modalProps === void 0) {
       modalProps = {};
     }
     if (overlayProps === void 0) {
       overlayProps = {};
     }
-    useModalStore.getState().show(modal, modalProps, overlayProps);
+    useModalStore.getState().show(name, modalProps, overlayProps);
   };
-  var hideModal = () => {
-    useModalStore.getState().hide();
+  var hideModal = name => {
+    console.log('hideModal', name);
+    useModalStore.getState().hide(typeof name === 'string' ? name : undefined);
   };
 
   var ContainerShapes = {
@@ -6825,33 +6831,29 @@
 
   var ModalLayout = _ref => {
     var {
-      modals
+      modals: availableModals
     } = _ref;
-    var modalStore = useModalStore(_ref2 => {
-      var {
-        modal,
-        modalProps,
-        overlayProps
-      } = _ref2;
-      return {
-        modal,
-        modalProps,
-        overlayProps
-      };
-    });
-    if (typeof modalStore.modal === 'boolean') {
-      return null;
-    }
-    var Modal = modals[modalStore.modal];
-    if (!Modal) {
-      console.error(modalStore.modal + " modal doesn't exist");
+    var activeModals = useModalStore(state => state.modals);
+    if (activeModals.length === 0) {
       return null;
     }
-    return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(ModalOverlay, Object.assign({
-      isOpen: modalStore.modalProps.isVisible,
-      onClose: hideModal,
-      blur: 10
-    }, modalStore.overlayProps), Modal !== undefined && /*#__PURE__*/React__default.createElement(Modal, Object.assign({}, modalStore.modalProps))));
+    return /*#__PURE__*/React__default.createElement(React.Fragment, null, activeModals.map((modal, index) => {
+      var ModalComponent = availableModals[modal.name];
+      if (!ModalComponent) {
+        console.error(modal.name + " modal doesn't exist");
+        return null;
+      }
+      return /*#__PURE__*/React__default.createElement(ModalOverlay, Object.assign({
+        key: index,
+        isOpen: modal.props.isVisible,
+        onClose: () => hideModal(modal.name),
+        blur: 5
+      }, modal.overlayProps, {
+        style: {
+          zIndex: 1000 + index
+        }
+      }), /*#__PURE__*/React__default.createElement(ModalComponent, Object.assign({}, modal.props)));
+    }));
   };
 
   /**