@bioturing/components 0.14.0 → 0.15.0

package/dist/Modal.css

@@ -0,0 +1,317 @@
+@layer components {
+  .ds-stack {
+    display: flex;
+  }
+
+  .ds-stack-hug {
+    display: inline-flex;
+  }
+
+  .ds-stack-horizontal {
+    flex-direction: row;
+  }
+
+  .ds-stack-vertical {
+    flex-direction: column;
+  }
+
+  .ds-stack-fill.ds-stack-vertical {
+    height: 100%;
+  }
+
+  .ds-stack-fill.ds-stack-horizontal {
+    width: 100%;
+  }
+
+  .ds-stack-wrap {
+    flex-wrap: wrap;
+  }
+
+  .ds-stack-gap-0 {
+    gap: 0;
+  }
+
+  .ds-stack-gap-1 {
+    gap: 1px;
+  }
+
+  .ds-stack-gap-2 {
+    gap: 2px;
+  }
+
+  .ds-stack-gap-4 {
+    gap: 4px;
+  }
+
+  .ds-stack-gap-8 {
+    gap: 8px;
+  }
+
+  .ds-stack-gap-12 {
+    gap: 12px;
+  }
+
+  .ds-stack-gap-16 {
+    gap: 16px;
+  }
+
+  .ds-stack-gap-24, .ds-stack-gap-32 {
+    gap: 24px;
+  }
+
+  .ds-stack-align-flex-start {
+    align-items: flex-start;
+  }
+
+  .ds-stack-align-flex-end {
+    align-items: flex-end;
+  }
+
+  .ds-stack-align-center {
+    align-items: center;
+  }
+
+  .ds-stack-align-stretch {
+    align-items: stretch;
+  }
+
+  .ds-stack-align-baseline {
+    align-items: baseline;
+  }
+
+  .ds-stack-justify-flex-start {
+    justify-content: flex-start;
+  }
+
+  .ds-stack-justify-flex-end {
+    justify-content: flex-end;
+  }
+
+  .ds-stack-justify-center {
+    justify-content: center;
+  }
+
+  .ds-stack-justify-space-between {
+    justify-content: space-between;
+  }
+
+  .ds-stack-justify-space-around {
+    justify-content: space-around;
+  }
+
+  .ds-stack-justify-space-evenly {
+    justify-content: space-evenly;
+  }
+
+  .ds-stack-child {
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .ds-stack-child-flex-0 {
+    flex: 0;
+  }
+
+  .ds-stack-child-flex-1 {
+    flex: 1;
+  }
+
+  .ds-stack-child-grow {
+    flex-grow: 1;
+  }
+
+  .ds-stack-child-shrink {
+    flex-shrink: 1;
+  }
+}
+
+@layer components {
+  .ds-truncate {
+    white-space: nowrap;
+    flex-grow: 1;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    display: block;
+    overflow: hidden;
+  }
+
+  .ds-truncate-end {
+    text-overflow: ellipsis;
+  }
+
+  .ds-truncate-middle {
+    text-overflow: clip;
+  }
+
+  .ds-truncate-multiline {
+    -webkit-line-clamp: var(--ds-line-clamp, 2);
+    line-clamp: var(--ds-line-clamp, 2);
+    white-space: normal;
+    text-overflow: ellipsis;
+    word-break: break-word;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+}
+
+@layer components {
+  .ds-icon-button {
+    cursor: pointer;
+    color: var(--ds-color-icon);
+    background-color: #0000;
+    border: none;
+    border-radius: 999px;
+    justify-content: center;
+    align-items: center;
+    transition: all .2s;
+    display: inline-flex;
+  }
+
+  .ds-icon-button:hover {
+    background-color: var(--ds-color-fill-secondary);
+    color: var(--ds-color-icon-hover);
+  }
+
+  .ds-icon-button:active, .ds-icon-button.ds-popover-open {
+    background-color: var(--ds-color-primary-bg);
+    color: var(--ds-color-primary);
+  }
+
+  .ds-icon-button:focus {
+    outline: none;
+  }
+
+  .ds-icon-button:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    color: var(--ds-color-text-disabled);
+  }
+
+  .ds-icon-button.ds-icon-button-medium {
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: .125rem;
+    font-size: 1.25rem;
+  }
+
+  .ds-icon-button.ds-icon-button-small {
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: .125rem;
+    font-size: 1rem;
+  }
+
+  .ds-icon-button.ds-icon-button-negative-margin {
+    margin: -.125rem;
+  }
+}
+
+@layer components {
+  .ds-modal-wrap {
+    max-height: 100vh;
+  }
+
+  .ds-modal-wrap .ds-modal-close-x {
+    width: 100%;
+    display: flex;
+  }
+
+  .ds-modal-wrap .ds-modal {
+    max-height: 100vh;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-bottom: 0;
+    top: 0;
+  }
+
+  :is(.ds-modal-wrap .ds-modal) .ds-modal-content {
+    box-shadow: var(--ds-box-shadow-secondary);
+    background: var(--ds-modal-bg);
+    flex-direction: column;
+    padding: 0;
+    display: flex;
+  }
+
+  :is(.ds-modal-wrap .ds-modal) .ds-modal-body {
+    padding: var(--ds-modal-content-padding);
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  :is(.ds-modal-wrap .ds-modal) .ds-modal-header {
+    padding: calc(var(--ds-modal-padding) * 2 / 3) var(--ds-modal-padding) 0 var(--ds-modal-padding);
+    background: none;
+    margin-bottom: 0;
+  }
+
+  :is(.ds-modal-wrap .ds-modal) .ds-modal-footer {
+    padding: 0 var(--ds-modal-padding) var(--ds-modal-padding) var(--ds-modal-padding);
+    background: none;
+    margin-top: 0;
+  }
+
+  :is(.ds-modal-wrap .ds-modal) .ds-modal-close {
+    top: calc(var(--ds-modal-padding) * 2 / 3 - 4px);
+  }
+
+  .ds-modal-wrap:not(.ds-modal-centered) .ds-modal-inner {
+    margin-top: 4rem;
+  }
+
+  .ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal-content {
+    max-height: calc(100vh - var(--ds-modal-edge-padding) * 2);
+    margin: var(--ds-modal-edge-padding);
+  }
+
+  .ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal > div[tabindex="0"] {
+    max-height: calc(100vh - var(--ds-modal-edge-padding) * 2);
+  }
+
+  .ds-modal-no-body-scroll .ds-modal {
+    max-height: 100%;
+  }
+
+  :is(.ds-modal-no-body-scroll .ds-modal) .ds-modal-body {
+    display: grid;
+    overflow: hidden;
+  }
+
+  :is(:is(.ds-modal-no-body-scroll .ds-modal) .ds-modal-body) > * {
+    min-height: 0;
+  }
+
+  .ds-modal-fullscreen .ds-modal > div[tabindex="0"], .ds-modal-fullscreen .ds-modal .ds-modal-inner {
+    height: 100%;
+  }
+
+  .ds-modal-fullscreen .ds-modal .ds-modal-content {
+    border-radius: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  :is(.ds-modal-fixed .ds-modal) .ds-modal-footer {
+    border-top: 1px solid var(--ds-color-split);
+    padding: calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding);
+    margin-top: 0;
+  }
+
+  :is(.ds-modal-fixed .ds-modal) .ds-modal-header {
+    border-bottom: 1px solid var(--ds-color-split);
+    padding: calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding);
+    margin-bottom: 0;
+  }
+
+  :is(.ds-modal-fixed .ds-modal) .ds-modal-close {
+    top: 8px;
+  }
+
+  :is(.ds-modal-content-overflow .ds-modal) .ds-modal-inner {
+    margin-top: 0;
+  }
+}
+

package/dist/Modal.js

@@ -6,13 +6,15 @@ import * as __WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__ from "@biotur
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_config_provider_6a57beb3__ from "antd/es/config-provider";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_theme_useToken_e8911485__ from "antd/es/theme/useToken";
-import "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_context_bc73863f__ from "antd/es/modal/context";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_components_NormalCancelBtn_54ff398c__ from "antd/es/modal/components/NormalCancelBtn";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_components_NormalOkBtn_897b50c4__ from "antd/es/modal/components/NormalOkBtn";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_locale_f16c0933__ from "antd/es/modal/locale";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_locale_31079002__ from "antd/es/locale";
 import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
+import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_use_render_2fb9dc6d__ from "@base-ui-components/react/use-render";
+import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_merge_props_04b69945__ from "@base-ui-components/react/merge-props";
 function cx(...args) {
     const classes = [];
     for (const arg of args)if (arg) {
@@ -24,6 +26,12 @@ function cx(...args) {
     }
     return classes;
 }
+function clsx(...args) {
+    return cx(...args).join(" ");
+}
+function cn(...args) {
+    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(cx(...args));
+}
 "use client";
 const useAntdCssVarClassname = ()=>{
     var _token_;
@@ -98,9 +106,244 @@ var constants_ModalSize = /*#__PURE__*/ function(ModalSize) {
     ModalSize["fullscreen"] = "100%";
     return ModalSize;
 }({});
+const measureText = (container)=>{
+    const span = document.createElement("span");
+    span.style.opacity = "0";
+    span.style.position = "absolute";
+    span.style.top = "-1000px";
+    span.style.left = "-1000px";
+    span.style.whiteSpace = "nowrap";
+    span.style.pointerEvents = "none";
+    container.appendChild(span);
+    return {
+        measure: (text)=>{
+            span.innerText = text;
+            return span.clientWidth;
+        },
+        destroy: ()=>{
+            container.removeChild(span);
+        }
+    };
+};
+const getMiddleTruncatedString = (text, ellipsis, container)=>{
+    var _Object_values_reverse_find;
+    if (!text) return text;
+    const { measure: getTextWidth, destroy: destroyMeasure } = measureText(container);
+    const textWidth = getTextWidth(text);
+    const containerWidth = container.clientWidth;
+    const initialOffset = Math.floor(containerWidth / textWidth * text.length);
+    if (textWidth <= containerWidth) {
+        destroyMeasure();
+        return text;
+    }
+    let offset = initialOffset;
+    const attempts = {};
+    const maxAttempts = 20;
+    const buffer = 10;
+    while(Object.values(attempts).length <= maxAttempts){
+        if (attempts[offset]) break;
+        if (offset <= 1) {
+            attempts[0] = [
+                0,
+                ellipsis
+            ];
+            break;
+        }
+        const start = text.slice(0, Math.ceil((offset - ellipsis.length) / 2 - 1)).trimEnd();
+        const end = text.slice(Math.floor((offset - ellipsis.length) / 2) - offset).trimStart();
+        const truncatedStr = start + ellipsis + end;
+        const width = getTextWidth(truncatedStr);
+        attempts[offset] = [
+            width,
+            truncatedStr
+        ];
+        if (width >= containerWidth) offset -= 2;
+        else {
+            if (containerWidth - width < buffer) break;
+            offset += 2;
+        }
+    }
+    destroyMeasure();
+    return (null == (_Object_values_reverse_find = Object.values(attempts).reverse().find(([width])=>width < containerWidth)) ? void 0 : _Object_values_reverse_find[1]) ?? Object.values(attempts)[0][1];
+};
+"use client";
+const Truncate = ({ children, position = "end", lines = 1, className, style, ...rest })=>{
+    const cls = useCls();
+    const containerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const [isTruncated, setIsTruncated] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [truncatedText, setTruncatedText] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(children);
+    const text = children;
+    const getContainerStyles = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
+        if ("auto" !== lines) return {
+            ...style,
+            ...lines > 1 ? {
+                "--ds-line-clamp": lines
+            } : {}
+        };
+        return {
+            ...style,
+            "--ds-line-clamp": 999
+        };
+    }, [
+        lines,
+        style
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
+        const container = containerRef.current;
+        if (!container) return;
+        if ("auto" === lines) {
+            var _window_document_fonts_ready, _window_document_fonts;
+            setTruncatedText(text);
+            const calculateLines = ()=>{
+                const parent = container.parentElement;
+                if (!parent) return;
+                const styles = window.getComputedStyle(container);
+                const fontSize = parseFloat(styles.fontSize);
+                const lineHeight = "normal" === styles.lineHeight ? 1.2 * fontSize : parseFloat(styles.lineHeight);
+                const parentStyles = window.getComputedStyle(parent);
+                const paddingTop = parseFloat(parentStyles.paddingTop) || 0;
+                const paddingBottom = parseFloat(parentStyles.paddingBottom) || 0;
+                const borderTopWidth = parseFloat(parentStyles.borderTopWidth) || 0;
+                const borderBottomWidth = parseFloat(parentStyles.borderBottomWidth) || 0;
+                const parentHeight = parent.clientHeight;
+                const availableHeight = parentHeight - paddingTop - paddingBottom - borderTopWidth - borderBottomWidth;
+                const maxLines = Math.max(1, Math.floor(availableHeight / lineHeight));
+                if (container) container.style.setProperty("--ds-line-clamp", String(maxLines));
+                const clone = document.createElement("span");
+                clone.style.visibility = "hidden";
+                clone.style.position = "absolute";
+                clone.style.width = `${container.clientWidth}px`;
+                clone.style.fontSize = styles.fontSize;
+                clone.style.fontFamily = styles.fontFamily;
+                clone.style.lineHeight = styles.lineHeight;
+                clone.textContent = text;
+                document.body.appendChild(clone);
+                const isTruncated = clone.scrollHeight > availableHeight;
+                document.body.removeChild(clone);
+                setIsTruncated(isTruncated);
+            };
+            null == (_window_document_fonts = window.document.fonts) || null == (_window_document_fonts_ready = _window_document_fonts.ready) || _window_document_fonts_ready.then(calculateLines);
+            const observer = new ResizeObserver(()=>{
+                window.requestAnimationFrame(calculateLines);
+            });
+            observer.observe(container);
+            if (container.parentElement) observer.observe(container.parentElement);
+            return ()=>observer.disconnect();
+        }
+        if ("number" == typeof lines && lines > 1) {
+            var _window_document_fonts_ready1, _window_document_fonts1;
+            setTruncatedText(text);
+            const checkIfTruncated = ()=>{
+                const clone = document.createElement("span");
+                clone.style.visibility = "hidden";
+                clone.style.position = "absolute";
+                clone.style.width = `${container.clientWidth}px`;
+                clone.textContent = text;
+                document.body.appendChild(clone);
+                const isTruncated = clone.scrollHeight > (container.clientHeight || container.offsetHeight);
+                document.body.removeChild(clone);
+                setIsTruncated(isTruncated);
+            };
+            null == (_window_document_fonts1 = window.document.fonts) || null == (_window_document_fonts_ready1 = _window_document_fonts1.ready) || _window_document_fonts_ready1.then(checkIfTruncated);
+            const observer = new ResizeObserver(()=>{
+                window.requestAnimationFrame(checkIfTruncated);
+            });
+            observer.observe(container);
+            return ()=>observer.disconnect();
+        }
+        let cancellationToken = {
+            cancelled: false
+        };
+        const calculateTruncatedString = ()=>{
+            if (cancellationToken) cancellationToken.cancelled = true;
+            const requestCancellationToken = {
+                cancelled: false
+            };
+            cancellationToken = requestCancellationToken;
+            const truncated = getMiddleTruncatedString(text, "\u2026", container);
+            if (requestCancellationToken.cancelled) return;
+            setTruncatedText(truncated);
+        };
+        if ("middle" == position) {
+            var _window_document_fonts_ready2, _window_document_fonts2;
+            null == (_window_document_fonts2 = window.document.fonts) || null == (_window_document_fonts_ready2 = _window_document_fonts2.ready) || _window_document_fonts_ready2.then(calculateTruncatedString);
+        }
+        if ("end" == position) setTruncatedText(text);
+        const observer = new ResizeObserver(()=>{
+            if ("middle" == position) window.requestAnimationFrame(calculateTruncatedString);
+            if ("end" == position) {
+                const isOverflowing = container.scrollWidth > container.clientWidth;
+                if (isOverflowing) setIsTruncated(true);
+            }
+        });
+        observer.observe(container);
+        return ()=>{
+            cancellationToken.cancelled = true;
+            observer.disconnect();
+        };
+    }, [
+        text,
+        position,
+        lines
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+        ref: containerRef,
+        style: getContainerStyles(),
+        className: clsx(1 === lines ? cls("truncate") : cls("truncate-multiline"), "middle" === position ? cls("truncate-middle") : cls("truncate-end"), className),
+        title: isTruncated ? text : void 0,
+        ...rest,
+        children: text === truncatedText ? text : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+            children: truncatedText
+        })
+    });
+};
+const Stack = ({ hug = false, align = "flex-start", justify = "flex-start", vertical = false, gap = 0, wrap = false, className, children, ...rest })=>{
+    const cls = useCls();
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: cn(cls("stack"), hug ? cls("stack-hug") : cls("stack-fill"), cls(`stack-gap-${gap}`), vertical ? cls("stack-vertical") : cls("stack-horizontal"), wrap && cls("stack-wrap"), cls(`stack-align-${align}`), cls(`stack-justify-${justify}`), className),
+        ...rest,
+        children: children
+    });
+};
+const StackChild = ({ flex, grow = false, shrink = false, children, style, stack = false, hug = false, align = "flex-start", justify = "flex-start", vertical = false, gap = 0, wrap = false, className, ...rest })=>{
+    const cls = useCls();
+    const stackProps = {
+        hug,
+        align,
+        justify,
+        vertical,
+        gap,
+        wrap
+    };
+    let flexClass = "";
+    if ("boolean" == typeof flex) flexClass = flex ? cls("stack-child-flex-1") : cls("stack-child-flex-0");
+    const combinedClassName = cn(cls("stack-child"), grow && cls("stack-child-grow"), shrink && cls("stack-child-shrink"), flexClass, className);
+    const flexValue = "string" == typeof flex || "number" == typeof flex ? flex : void 0;
+    const { renderElement } = (0, __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_use_render_2fb9dc6d__.useRender)({
+        render: ()=>/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].isValidElement(children) ? children : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                children: children
+            }),
+        props: (0, __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_merge_props_04b69945__.mergeProps)({
+            className: combinedClassName,
+            style: {
+                ...style,
+                flex: flexValue
+            },
+            ...rest
+        })
+    });
+    return stack ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Stack, {
+        ...stackProps,
+        className: combinedClassName,
+        children: children
+    }) : renderElement();
+};
+const Stack_Stack = Object.assign(Stack, {
+    Child: StackChild
+});
 "use client";
 const Modal = ({ open: externalOpen, closeIcon, children, size: sizeProp, footer, width, style, styles, classNames, okButtonProps, cancelButtonProps, loading, onOk, onCancel, okText, okType = "primary", confirmLoading, cancelText = "Close", hideOkButton = false, hideCancelButton = false, contentPadding, title, afterTitle, beforeCloseButton, afterCloseButton, defaultFixedHeaderFooter = false, centered = true, type = "default", defaultOpen = true, background: backgroundProp, bodyScrollable = true, ...rest })=>{
-    const defaultCloseIcon = void 0 === closeIcon ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.X, {
+    const defaultCloseIcon = void 0 === closeIcon ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.XIcon, {
         size: 16,
         weight: "bold"
     }) : closeIcon;
@@ -183,17 +426,21 @@ const Modal = ({ open: externalOpen, closeIcon, children, size: sizeProp, footer
     });
     const renderTitle = ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
             children: [
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd__.Flex, {
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Stack_Stack, {
                     align: "center",
                     gap: 8,
                     className: cls("modal-title-wrapper"),
                     children: [
-                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                            className: cls("grow", "truncate"),
-                            children: title
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Stack_Stack.Child, {
+                            grow: true,
+                            children: "string" == typeof title ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Truncate, {
+                                children: title
+                            }) : title
                         }),
-                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-                            className: "flex items-center gap-2",
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Stack_Stack.Child, {
+                            stack: true,
+                            hug: true,
+                            align: "center",
                             children: [
                                 beforeCloseButton,
                                 /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(IconButton, {
@@ -216,7 +463,7 @@ const Modal = ({ open: externalOpen, closeIcon, children, size: sizeProp, footer
         title: renderTitle(),
         classNames: {
             ...classNames,
-            wrapper: cls("modal-wrap", "fullscreen" == size && "modal-fullscreen", isContentOverflow && "modal-content-overflow", false === bodyScrollable && "modal-no-body-scroll", (defaultFixedHeaderFooter || isContentOverflow || "fullscreen" == size) && "modal-fixed")
+            wrapper: cls("modal-wrap", "fullscreen" == size && "modal-fullscreen", isContentOverflow && "modal-content-overflow", false === bodyScrollable && "modal-no-body-scroll", defaultFixedHeaderFooter || isContentOverflow || "fullscreen" == size ? "modal-fixed" : "")
         },
         styles: modalStyles,
         modalRender: (modal)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {