@apple-pie/slice 0.1.29 → 0.1.30

package/dist/esm/chunks/Modal-B9ad9OfJ.mjs

@@ -0,0 +1,115 @@
+import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import React, { useMemo } from "react";
+
+import { s as setStyle } from "./misc-wS74txaa.mjs";
+
+import { B as Button } from "./Button-BQS3rwrS.mjs";
+
+import { I as Icon } from "./Icon--RjjODc9.mjs";
+
+import { I as IconButton } from "./IconButton-ByBYppAj.mjs";
+
+import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
+
+var css = {
+    wrapper: "Modal-module_wrapper__34Hds flexBox-module_columnBetween__ERfp7",
+    title: "Modal-module_title__A5OeE flexBox-module_rowBetween__5FEvi",
+    titleBlock: "Modal-module_titleBlock__HUepX flexBox-module_rowStart__4tcxS",
+    titleIcon: "Modal-module_titleIcon__xJYzy flexBox-module_row__z24tF",
+    content: "Modal-module_content__dWO-B flexBox-module_columnStart__C7P44",
+    actions: "Modal-module_actions__hY6zi flexBox-module_rowBetween__5FEvi",
+    leftActions: "Modal-module_leftActions__-M-DM flexBox-module_rowStart__4tcxS",
+    rightActions: "Modal-module_rightActions__IFgrN flexBox-module_rowEnd__rVdVm",
+    xs: "Modal-module_xs__iPcS9 type-module_body-xs-medium__s3KvF",
+    s: "Modal-module_s__31sYS type-module_body-s-medium__tjdFc",
+    m: "Modal-module_m__Iz82L type-module_body-m-medium__uW1on",
+    l: "Modal-module_l__pntdS type-module_body-l-medium__BqRC7",
+    xl: "Modal-module_xl__MR-68 type-module_body-xl-medium__BeyrH"
+};
+
+styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__ZAFft {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__s3KvF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__Lhqqq {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__vRHSP {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__tjdFc {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__Iy-VX {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__LuQBA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__uW1on {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__UBcvQ {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__lOYbg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__BqRC7 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__Fh2dt {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__pF2kC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__BeyrH {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__Ruknj {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__z8L3G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__0O3g6 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__KXxEB {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__cJeEA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__eRe05 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Xmwtf {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__5q1m3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__k9VFV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.Modal-module_wrapper__34Hds {\n\tposition: relative;\n\tmin-width: var(--modal-min-width);\n\tmin-height: var(--modal-min-height);\n\tmax-height: var(--modal-max-height);\n\tmax-width: var(--modal-max-width);\n\tbackground: var(--modal-background-color);\n\tborder: var(--modal-border-width) solid var(--modal-border-color);\n\tborder-radius: var(--modal-border-radius);\n\tbox-shadow: var(--surface-shadow-soft);\n\toverflow: hidden;\n}\n\n.Modal-module_title__A5OeE {\n\twidth: 100%;\n\tpadding: var(--modal-padding);\n\tgap: 16px;\n\tborder-bottom: var(--modal-title-border-width) solid\n\t\tvar(--modal-title-border-color);\n}\n\n.Modal-module_titleBlock__HUepX {\n\tcolor: var(--modal-title-color);\n\tflex: 1;\n\tgap: 6px;\n\ttouch-action: none;\n\tuser-select: none;\n\t-webkit-user-select: none;\n}\n\n.Modal-module_titleIcon__xJYzy {\n\theight: 20px;\n\twidth: 20px;\n\tmin-height: 20px;\n\tmin-width: 20px;\n\tuser-select: none;\n\t-webkit-user-select: none;\n}\n\n.Modal-module_content__dWO-B {\n\twidth: 100%;\n\tflex: 1;\n\tpadding-right: var(--modal-padding);\n\tpadding-left: var(--modal-padding);\n\toverflow: hidden;\n\toverflow-y: auto;\n\t&::-webkit-scrollbar {\n\t\tbackground-color: var(--modal-background);\n\t\twidth: 6px;\n\t}\n\n\t&::-webkit-scrollbar-track {\n\t\tbackground-color: var(--modal-background);\n\t\twidth: 6px;\n\t}\n\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground-color: var(--modal-scroll-handle);\n\t\tborder-radius: 20px;\n\t\tborder: 1px solid var(--modal-background);\n\t}\n\n\t&::-webkit-scrollbar-thumb:hover {\n\t\tbackground-color: var(--modal-scroll-handle-hover);\n\t\tborder-radius: 20px;\n\t\tborder: 1px solid var(--modal-background);\n\t}\n}\n\n.Modal-module_actions__hY6zi {\n\twidth: 100%;\n\tpadding: var(--modal-padding);\n\tuser-select: none;\n\t-webkit-user-select: none;\n\tborder-top: var(--modal-actions-border-width) solid\n\t\tvar(--modal-actions-border-color);\n}\n\n.Modal-module_leftActions__-M-DM {\n\tgap: 8px;\n}\n\n.Modal-module_rightActions__IFgrN {\n\tgap: 8px;\n}\n\n.Modal-module_xs__iPcS9 {\n}\n\n.Modal-module_s__31sYS {\n}\n\n.Modal-module_m__Iz82L {\n}\n\n.Modal-module_l__pntdS {\n}\n\n.Modal-module_xl__MR-68 {\n}\n");
+
+const Modal = React.memo(props => {
+    const {children: children, id: id, className: className, style: style, minWidth: minWidth = 300, minHeight: minHeight = 200, maxHeight: maxHeight = 400, maxWidth: maxWidth = 400, padding: padding, close: close = !0, title: title, titleSize: titleSize = "l", contentSize: contentSize = "m", actions: actions, titleIcon: titleIcon, titleBorderColor: titleBorderColor = "var(--core-outline-primary)", titleBorderWidth: titleBorderWidth = 0, actionsBorderColor: actionsBorderColor = "var(--core-outline-primary)", actionsBorderWidth: actionsBorderWidth = 0, onAction: onAction, onReject: onReject, onResolve: onResolve, onClose: onClose, onToolTip: onToolTip, onDragPointerDown: onDragPointerDown, backgroundColor: backgroundColor = "var(--core-surface-secondary)", titleColor: titleColor = "var(--core-text-special)", borderColor: borderColor = "var(--core-outline-primary)", borderRadius: borderRadius = 8, borderWidth: borderWidth = 1} = props, rest = __rest(props, [ "children", "id", "className", "style", "minWidth", "minHeight", "maxHeight", "maxWidth", "padding", "close", "title", "titleSize", "contentSize", "actions", "titleIcon", "titleBorderColor", "titleBorderWidth", "actionsBorderColor", "actionsBorderWidth", "onAction", "onReject", "onResolve", "onClose", "onToolTip", "onDragPointerDown", "backgroundColor", "titleColor", "borderColor", "borderRadius", "borderWidth" ]), modalStyle = null != style ? style : {}, modalClass = className ? ` ${className}` : "", cssVars = useMemo(() => ({
+        "--modal-min-width": setStyle(minWidth),
+        "--modal-min-height": setStyle(minHeight),
+        "--modal-max-height": setStyle(maxHeight),
+        "--modal-max-width": setStyle(maxWidth),
+        "--modal-border-color": borderColor,
+        "--modal-title-color": titleColor,
+        "--modal-border-radius": setStyle(borderRadius),
+        "--modal-border-width": setStyle(borderWidth),
+        "--modal-padding": setStyle(padding, 16),
+        "--modal-background-color": backgroundColor,
+        "--modal-title-border-color": titleBorderColor,
+        "--modal-title-border-width": setStyle(titleBorderWidth),
+        "--modal-actions-border-color": actionsBorderColor,
+        "--modal-actions-border-width": setStyle(actionsBorderWidth)
+    }), [ minWidth, minHeight, maxHeight, maxWidth, borderColor, titleColor, borderRadius, borderWidth, padding, titleBorderWidth, titleBorderColor, actionsBorderWidth, actionsBorderColor, backgroundColor ]), renderActions = position => null == actions ? void 0 : actions.map((action, index) => action.position || "left" !== position ? action.position && position !== action.position ? null : jsx(Button, {
+        variant: action.primary ? "solid" : "outline",
+        label: action.label,
+        onClick: e => (action => {
+            const resolves = !action.promise || "resolve" === action.promise, rejects = "reject" === action.promise;
+            null == onAction || onAction(action.value), resolves && (null == onResolve || onResolve(action.value)), 
+            rejects && (null == onReject || onReject(new Error("Modal rejected", {
+                cause: action.value
+            })));
+        })(action),
+        round: !0 === action.round,
+        iconLeft: action.iconLeft,
+        tooltip: action.tooltip,
+        onToolTip: tip => null == onToolTip ? void 0 : onToolTip(tip)
+    }, `${action.id}_${index}`) : null);
+    return jsxs("div", Object.assign({
+        id: id,
+        className: `${css.wrapper}${modalClass}`,
+        style: Object.assign(Object.assign({}, modalStyle), cssVars)
+    }, rest, {
+        children: [ (title || close) && jsxs("div", {
+            className: `${css.title} ${css[titleSize]}`,
+            children: [ jsxs("div", {
+                className: css.titleBlock,
+                onPointerDown: onDragPointerDown,
+                children: [ titleIcon && jsx("div", {
+                    className: css.titleIcon,
+                    children: jsx(Icon, {
+                        name: titleIcon,
+                        size: 20
+                    })
+                }), title ]
+            }), close && jsx("div", {
+                className: css.close,
+                children: jsx("div", {
+                    className: css.titleIcon,
+                    children: jsx(IconButton, {
+                        tooltip: "close",
+                        icon: "x",
+                        onClick: () => {
+                            null == onReject || onReject(new Error("Modal was closed", {
+                                cause: "user action"
+                            })), null == onClose || onClose();
+                        },
+                        onToolTip: tip => null == onToolTip ? void 0 : onToolTip(tip)
+                    })
+                })
+            }) ]
+        }), jsx("div", {
+            className: `${css.content} ${css[contentSize]}`,
+            children: children
+        }), actions && actions.length > 0 && jsxs("div", {
+            className: css.actions,
+            children: [ jsx("div", {
+                className: css.leftActions,
+                children: renderActions("left")
+            }), jsx("div", {
+                className: css.rightActions,
+                children: renderActions("right")
+            }) ]
+        }) ]
+    }));
+});
+
+export { Modal as M };

package/dist/esm/chunks/ModalController-BO5FkAqu.mjs

@@ -0,0 +1,80 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+
+import { useDragControls, AnimatePresence, motion } from "motion/react";
+
+import { O as Overlay } from "./Overlay-sXM7cEYc.mjs";
+
+import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
+
+import { u as useModal, a as useModalActions } from "./modalStore-BpWnLtOF.mjs";
+
+var css_wrapper = "ModalController-module_wrapper__HkOoX flexBox-module_row__z24tF";
+
+styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.ModalController-module_wrapper__HkOoX {\n\tposition: absolute;\n\tz-index: var(--elevation-confirm);\n}\n");
+
+const defaultTransition = {
+    ease: "easeOut",
+    duration: .25,
+    delay: .1
+}, defaultVariants = {
+    initial: {
+        opacity: 0,
+        y: 20
+    },
+    animate: {
+        opacity: 1,
+        y: 0
+    },
+    exit: {
+        opacity: 0,
+        y: 20
+    }
+};
+
+function ModalController(props) {
+    const {dragConstraintsRef: dragConstraintsRef, transition: transition = defaultTransition, variants: variants = defaultVariants, initial: initial = "initial", animate: animate = "animate", exit: exit = "exit", draggable: draggable = !0, overlayOpacity: overlayOpacity = .7, overlayColor: overlayColor = "rgb(0,0,0)"} = props, controls = useDragControls(), modal = useModal(), resolve = useModalActions().resolve, reject = useModalActions().reject, hide = useModalActions().hide, ModalComponent = null == modal ? void 0 : modal.component, modalProps = null == modal ? void 0 : modal.props;
+    return jsxs(Fragment, {
+        children: [ jsx(Overlay, {
+            show: !!modal,
+            type: "dark",
+            opacity: overlayOpacity,
+            color: overlayColor,
+            onClick: () => hide()
+        }), jsx(AnimatePresence, {
+            children: modal && ModalComponent && jsx(motion.div, {
+                className: css_wrapper,
+                variants: variants,
+                initial: initial,
+                animate: animate,
+                exit: exit,
+                transition: transition,
+                drag: draggable,
+                dragListener: !draggable && void 0,
+                dragControls: draggable ? controls : void 0,
+                dragConstraints: draggable ? dragConstraintsRef : void 0,
+                dragElastic: draggable ? 0 : void 0,
+                dragMomentum: !draggable && void 0,
+                children: jsx(ModalComponent, Object.assign({}, modalProps, {
+                    onResolve: value => {
+                        "function" == typeof (null == modalProps ? void 0 : modalProps.onResolve) && modalProps.onResolve(value), 
+                        resolve(value);
+                    },
+                    onReject: error => {
+                        "function" == typeof (null == modalProps ? void 0 : modalProps.onReject) && modalProps.onReject(error), 
+                        reject(error);
+                    },
+                    onClose: () => {
+                        "function" == typeof (null == modalProps ? void 0 : modalProps.onClose) && modalProps.onClose(), 
+                        hide();
+                    },
+                    onDragPointerDown: e => {
+                        "function" == typeof (null == modalProps ? void 0 : modalProps.onDragPointerDown) && (null == modalProps || modalProps.onDragPointerDown(e)), 
+                        controls.start(e);
+                    }
+                }))
+            })
+        }) ]
+    });
+}
+
+export { ModalController as M };

package/dist/esm/chunks/{Overlay-DiSvgIQP.mjs → Overlay-sXM7cEYc.mjs}

@@ -13,8 +13,11 @@ var css_overlay = "Overlay-module_overlay__EkbfA";
 
 styleInject(".Overlay-module_overlay__EkbfA {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tbackground-color: var(--overlay-color);\n\tz-index: var(--elevation-overlay);\n}\n");
 
-const Overlay = React.memo(props => {
-    const {type: type = "clear", global: global = !1, overlay: overlay, color: color = "rgb(0,0,0)", opacity: opacity = 0, onClick: onClick = () => null, toggleOverlay: toggleOverlay = () => null} = props, divAttributes = __rest(props, [ "type", "global", "overlay", "color", "opacity", "onClick", "toggleOverlay" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", show = !global || global && overlay, computedOpacity = useMemo(() => "clear" === type ? 0 : void 0 !== opacity ? opacity : "dark" === type ? .8 : 0, [ type, opacity ]), handleClick = useCallback(() => {
+const defaultTransition = {
+    ease: "easeOut",
+    duration: .25
+}, Overlay = React.memo(props => {
+    const {children: children, show: show = !1, type: type = "clear", global: global = !1, overlay: overlay, color: color = "rgb(0,0,0)", opacity: opacity = 0, transition: transition = defaultTransition, onClick: onClick = () => null, toggleOverlay: toggleOverlay = () => null} = props, divAttributes = __rest(props, [ "children", "show", "type", "global", "overlay", "color", "opacity", "transition", "onClick", "toggleOverlay" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", computedOpacity = useMemo(() => "clear" === type ? 0 : void 0 !== opacity ? opacity : "dark" === type ? .8 : 0, [ type, opacity ]), handleClick = useCallback(() => {
         global && toggleOverlay(!1), onClick();
     }, [ global, toggleOverlay, onClick ]), handleContextMenu = useCallback(e => {
         e.preventDefault();
@@ -37,8 +40,11 @@ const Overlay = React.memo(props => {
                 opacity: 0
             },
             onClick: handleClick,
+            transition: transition,
             onContextMenu: handleContextMenu
-        }, rest))
+        }, rest, {
+            children: children
+        }))
     });
 });
 

package/dist/esm/chunks/{Pager-ByJ2Cr0n.mjs → Pager-Bz0FpgO5.mjs}

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 
 import React, { useState, useMemo, useEffect, useCallback } from "react";
 
-import { a as accessibleKeyDown } from "./misc-Bjbro8Xe.mjs";
+import { a as accessibleKeyDown } from "./misc-wS74txaa.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 

package/dist/esm/chunks/{ProgressIndicator-d2JGUDW_.mjs → ProgressIndicator-B5oByN3i.mjs}

@@ -1,7 +1,7 @@
 'use client';
 import { jsx, jsxs } from "react/jsx-runtime";
 
-import React, { useState, useEffect, useMemo, useRef } from "react";
+import React, { useState, useEffect, useMemo, useId, useRef } from "react";
 
 import { useTheme } from "../hooks/useTheme.mjs";
 
@@ -11,7 +11,7 @@ import { a as __rest } from "./tslib.es6-C-olHjXV.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { I as Icon } from "./Icon-BOJAk-hM.mjs";
+import { I as Icon } from "./Icon--RjjODc9.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 
@@ -61,7 +61,7 @@ const DoneCheck = React.memo(props => {
 var css_container = "ProgressIndicator-module_container__pW2gW flexBox-module_column__ezvMq";
 
 function ProgressIndicator(props) {
-    const theme = useTheme(), {size: size = 20, secondsPerSpin: secondsPerSpin = 1, show: show = !1, color: color = theme.current.colors["core-icon-primary"], stroke: stroke = 1.5, inline: inline = !1, duration: duration, didStart: didStart = () => null, didStop: didStop = () => null} = props, divAttributes = __rest(props, [ "size", "secondsPerSpin", "show", "color", "stroke", "inline", "duration", "didStart", "didStop" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [playing, setPlaying] = useState(show), timer = useRef(null);
+    const theme = useTheme(), {size: size = 20, inset: inset = !0, secondsPerSpin: secondsPerSpin = 1, show: show = !1, color: color = theme.current.colors["core-icon-primary"], stroke: stroke = 1.5, inline: inline = !1, duration: duration, didStart: didStart = () => null, didStop: didStop = () => null} = props, divAttributes = __rest(props, [ "size", "inset", "secondsPerSpin", "show", "color", "stroke", "inline", "duration", "didStart", "didStop" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [playing, setPlaying] = useState(show), gradientId = useId().replace(/:/g, ""), timer = useRef(null);
     useEffect(() => (show ? (setPlaying(!0), didStart(), duration && (timer.current = setTimeout(() => {
         setPlaying(!1), didStop();
     }, 1e3 * duration))) : (setPlaying(!1), didStop()), () => {
@@ -72,7 +72,7 @@ function ProgressIndicator(props) {
         "--pi-inset": inline ? "unset" : "0",
         "--pi-icon-size": `${null != size ? size : 0}px`,
         "--pi-display": inline ? "inline-flex" : "flex"
-    }), [ inline, size ]), openCircle = useMemo(() => OpenCircle(size, secondsPerSpin, color, stroke, playing), [ size, secondsPerSpin, color, stroke, playing ]);
+    }), [ inline, size ]), openCircle = useMemo(() => OpenCircle(size, secondsPerSpin, color, stroke, playing, inset, gradientId), [ size, secondsPerSpin, color, stroke, playing, inset, gradientId ]);
     return jsx(AnimatePresence, {
         initial: !0,
         children: show && jsx(motion.div, Object.assign({
@@ -96,53 +96,57 @@ function ProgressIndicator(props) {
 
 styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.ProgressIndicator-module_container__pW2gW {\n\tdisplay: var(--pi-display) !important;\n\tposition: var(--pi-position);\n\ttop: var(--pi-inset);\n\tbottom: var(--pi-inset);\n\tleft: var(--pi-inset);\n\tright: var(--pi-inset);\n\tcolor: var(--core-text-disabled);\n\tz-index: var(--elevation-status);\n}\n\n.ProgressIndicator-module_iconWrapper__puIt4 {\n\tmin-width: var(--pi-icon-size);\n\tmax-width: var(--pi-icon-size);\n\tmax-height: var(--pi-icon-size);\n\tmin-height: var(--pi-icon-size);\n\theight: var(--pi-icon-size);\n\twidth: var(--pi-icon-size);\n\tpadding: 0;\n\tbackground: none;\n\tborder-radius: 100%;\n}\n");
 
-const OpenCircle = (size, secondsPerSpin, color, stroke = 1.5, playing = !1) => jsxs(motion.svg, {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: size,
-    height: size,
-    viewBox: "0 0 20 20",
-    role: "img",
-    "aria-label": "Loading spinner",
-    transition: {
-        ease: "linear",
-        repeatType: "loop",
-        repeat: playing ? Number.POSITIVE_INFINITY : 0,
-        duration: secondsPerSpin
-    },
-    animate: playing ? {
-        rotate: 360
-    } : {
-        rotate: 0
-    },
-    children: [ jsx("title", {
-        children: "Loading"
-    }), jsx("defs", {
-        children: jsxs("linearGradient", {
-            id: "strokeFill",
-            x1: "0%",
-            y1: "0%",
-            x2: "100%",
-            y2: "0%",
-            children: [ jsx("stop", {
-                offset: "0%",
-                stopColor: color,
-                stopOpacity: 1
-            }), jsx("stop", {
-                offset: "50%",
-                stopColor: color,
-                stopOpacity: 1
-            }), jsx("stop", {
-                offset: "100%",
-                stopColor: color,
-                stopOpacity: 0
-            }) ]
-        })
-    }), jsx(motion.path, {
-        d: "M 17.371 6.886 C 17.776 7.843 18 8.895 18 10 C 18 14.418 14.418 18 10 18 C 5.582 18 2 14.418 2 10 C 2 5.582 5.582 2 10 2",
-        fill: "transparent",
-        strokeWidth: stroke,
-        stroke: "url(#strokeFill)"
-    }) ]
-});
+const OpenCircle = (size, secondsPerSpin, color, stroke = 1.5, playing = !1, inset = !0, gradientId = "strokeFill") => {
+    const edgeRadius = 10 - stroke / 2, edgeStartX = 10 + edgeRadius * Math.cos(-.4), edgeStartY = 10 + edgeRadius * Math.sin(-.4), path = inset ? "M 17.371 6.886 C 17.776 7.843 18 8.895 18 10 C 18 14.418 14.418 18 10 18 C 5.582 18 2 14.418 2 10 C 2 5.582 5.582 2 10 2" : `M ${edgeStartX.toFixed(3)} ${edgeStartY.toFixed(3)} A ${edgeRadius.toFixed(3)} ${edgeRadius.toFixed(3)} 0 1 1 10 ${(10 - edgeRadius).toFixed(3)}`;
+    return jsxs(motion.svg, {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        viewBox: "0 0 20 20",
+        role: "img",
+        "aria-label": "Loading spinner",
+        transition: {
+            ease: "linear",
+            repeatType: "loop",
+            repeat: playing ? Number.POSITIVE_INFINITY : 0,
+            duration: secondsPerSpin
+        },
+        animate: playing ? {
+            rotate: 360
+        } : {
+            rotate: 0
+        },
+        children: [ jsx("title", {
+            children: "Loading"
+        }), jsx("defs", {
+            children: jsxs("linearGradient", {
+                id: gradientId,
+                x1: "0",
+                y1: "0",
+                x2: "20",
+                y2: "0",
+                gradientUnits: "userSpaceOnUse",
+                children: [ jsx("stop", {
+                    offset: "0%",
+                    stopColor: color,
+                    stopOpacity: 1
+                }), jsx("stop", {
+                    offset: "50%",
+                    stopColor: color,
+                    stopOpacity: 1
+                }), jsx("stop", {
+                    offset: "100%",
+                    stopColor: color,
+                    stopOpacity: 0
+                }) ]
+            })
+        }), jsx(motion.path, {
+            d: path,
+            fill: "transparent",
+            strokeWidth: stroke,
+            stroke: `url(#${gradientId})`
+        }) ]
+    });
+};
 
 export { DoneCheck as D, ProgressIndicator as P };

package/dist/esm/chunks/{PromptInput-COJnOFZf.mjs → PromptInput-Cwd53ux7.mjs}

@@ -11,9 +11,9 @@ import "./tslib.es6-C-olHjXV.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { B as Button } from "./Button-CYFpitCp.mjs";
+import { B as Button } from "./Button-BQS3rwrS.mjs";
 
-import { F as FileList } from "./FileList-CxHaEEUi.mjs";
+import { F as FileList } from "./FileList-fh-x9Dzm.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 

package/dist/esm/chunks/{RadioButton-BB73OY2a.mjs → RadioButton-CLeRiZ8x.mjs}

@@ -5,9 +5,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 
-import { s as setStyle } from "./misc-Bjbro8Xe.mjs";
+import { s as setStyle } from "./misc-wS74txaa.mjs";
 
-import { I as Icon } from "./Icon-BOJAk-hM.mjs";
+import { I as Icon } from "./Icon--RjjODc9.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 

package/dist/esm/chunks/{RadioButtonList-XqlqadYn.mjs → RadioButtonList-C_heuiis.mjs}

@@ -5,9 +5,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 import React, { useId, useState, useEffect, useCallback, useMemo } from "react";
 
-import { s as setStyle } from "./misc-Bjbro8Xe.mjs";
+import { s as setStyle } from "./misc-wS74txaa.mjs";
 
-import { R as RadioButton } from "./RadioButton-BB73OY2a.mjs";
+import { R as RadioButton } from "./RadioButton-CLeRiZ8x.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 

package/dist/esm/chunks/{Slider-CU0Zdlpu.mjs → Slider-XEV0D2Rd.mjs}

@@ -7,7 +7,7 @@ import React, { useRef, useState, useMemo, useCallback, useEffect } from "react"
 
 import { useObserveResize } from "../hooks/useObserveResize.mjs";
 
-import { p as pointerPosition } from "./misc-Bjbro8Xe.mjs";
+import { p as pointerPosition } from "./misc-wS74txaa.mjs";
 
 import { d as debounce } from "./debounce-Bst1jxMS.mjs";
 
@@ -35,9 +35,7 @@ const Slider = React.memo(props => {
         didMount.current = !0;
     }, []), initialProgress = useCallback(current => {
         if (!(null == ref ? void 0 : ref.current)) return;
-        const sliderWidth = ref.current.getBoundingClientRect().width, adjustedCurrent = clampValue(current);
-        adjustedCurrent !== current && console.warn("Slider outside range. Adjusted to nearest bound.");
-        const normalized = valueToPercent(adjustedCurrent), pixelPos = normalized * sliderWidth;
+        const sliderWidth = ref.current.getBoundingClientRect().width, adjustedCurrent = clampValue(current), normalized = valueToPercent(adjustedCurrent), pixelPos = normalized * sliderWidth;
         absProgressRef.current = adjustedCurrent, relativeProgressRef.current = normalized, 
         setCurrentValue(adjustedCurrent), setTrackAndHead(pixelPos), didMount.current = !0;
     }, [ clampValue, valueToPercent, setTrackAndHead ]), progress = useCallback(posX => {

package/dist/esm/chunks/{TabBar-v8Dp4dr-.mjs → TabBar-kPZ6ZJxr.mjs}

@@ -13,9 +13,9 @@ import "../hooks/useWindow.mjs";
 
 import { B as Badge } from "./Badge-CC0zSLMf.mjs";
 
-import { I as Icon } from "./Icon-BOJAk-hM.mjs";
+import { I as Icon } from "./Icon--RjjODc9.mjs";
 
-import { I as IconButton } from "./IconButton-Ck0IMn4i.mjs";
+import { I as IconButton } from "./IconButton-ByBYppAj.mjs";
 
 import { T as ToolTipType } from "./sharedTypes-tn9-uJvb.mjs";
 

package/dist/esm/chunks/{TextArea-DGF43RON.mjs → TextArea-CxscPLwN.mjs}

@@ -5,7 +5,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useState, useRef, useCallback, useEffect, useMemo } from "react";
 
-import { B as Button } from "./Button-CYFpitCp.mjs";
+import { B as Button } from "./Button-BQS3rwrS.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 

package/dist/esm/chunks/{TextField-j4q0RUzH.mjs → TextField-DwVKlLI_.mjs}

@@ -11,15 +11,15 @@ import { useTheme } from "../hooks/useTheme.mjs";
 
 import "../theme/colors.mjs";
 
-import { s as setStyle } from "./misc-Bjbro8Xe.mjs";
+import { s as setStyle } from "./misc-wS74txaa.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { B as Button } from "./Button-CYFpitCp.mjs";
+import { B as Button } from "./Button-BQS3rwrS.mjs";
 
-import { I as Icon } from "./Icon-BOJAk-hM.mjs";
+import { I as Icon } from "./Icon--RjjODc9.mjs";
 
-import { I as IconButton } from "./IconButton-Ck0IMn4i.mjs";
+import { I as IconButton } from "./IconButton-ByBYppAj.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 

package/dist/esm/chunks/{Tip-Bj9d-230.mjs → Tip-C6EcX7_M.mjs}

@@ -7,7 +7,7 @@ import { motion } from "motion/react";
 
 import React, { useState, useRef, useEffect, useMemo } from "react";
 
-import { f as filterClasses } from "./misc-Bjbro8Xe.mjs";
+import { f as filterClasses } from "./misc-wS74txaa.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 

package/dist/esm/chunks/{Toast-CoioLlEG.mjs → Toast-D4uMNvaa.mjs}

@@ -11,30 +11,34 @@ import { useTheme } from "../hooks/useTheme.mjs";
 
 import "../theme/colors.mjs";
 
-import { s as setStyle, f as filterClasses, a as accessibleKeyDown } from "./misc-Bjbro8Xe.mjs";
+import { s as setStyle, f as filterClasses, a as accessibleKeyDown } from "./misc-wS74txaa.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { I as Icon } from "./Icon-BOJAk-hM.mjs";
+import { I as Icon } from "./Icon--RjjODc9.mjs";
+
+import { P as ProgressIndicator } from "./ProgressIndicator-B5oByN3i.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 
 var ToastType, css = {
     wrapper: "Toast-module_wrapper__1uj9O flexBox-module_rowBetween__5FEvi",
     close: "Toast-module_close__i10-s flexBox-module_row__z24tF",
+    message: "Toast-module_message__3dP0P flexBox-module_rowStart__4tcxS",
+    progress: "Toast-module_progress__SWsbA flexBox-module_row__z24tF",
     s: "Toast-module_s__kc5Ef type-module_body-s-regular__vRHSP",
     m: "Toast-module_m__JtmLz type-module_body-m-regular__LuQBA",
     l: "Toast-module_l__-W0PD type-module_body-l-regular__lOYbg"
 };
 
-styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__ZAFft {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__s3KvF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__Lhqqq {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__vRHSP {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__tjdFc {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__Iy-VX {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__LuQBA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__uW1on {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__UBcvQ {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__lOYbg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__BqRC7 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__Fh2dt {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__pF2kC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__BeyrH {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__Ruknj {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__z8L3G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__0O3g6 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__KXxEB {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__cJeEA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__eRe05 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Xmwtf {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__5q1m3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__k9VFV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.Toast-module_wrapper__1uj9O {\n\tpadding: var(--toast-padding) !important;\n\tcolor: var(--toast-color);\n\tposition: var(--toast-position);\n\tborder: var(--toast-border);\n\tborder-radius: var(--toast-border-radius);\n\tbackground: var(--toast-background);\n\tz-index: var(--elevation-status);\n\tgap: 16px;\n\tbox-shadow: var(--surface-shadow-soft);\n\tleft: 50%;\n\ttransform: translateX(-50%);\n}\n\n.Toast-module_close__i10-s {\n\tmin-height: 20px;\n\tmax-height: 20px;\n\tmin-width: 20px;\n\tmax-width: 20px;\n\tcursor: pointer;\n}\n\n.Toast-module_s__kc5Ef {\n}\n\n.Toast-module_m__JtmLz {\n}\n.Toast-module_l__-W0PD {\n}\n"), 
+styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__ZAFft {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__s3KvF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__Lhqqq {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__vRHSP {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__tjdFc {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__Iy-VX {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__LuQBA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__uW1on {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__UBcvQ {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__lOYbg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__BqRC7 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__Fh2dt {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__pF2kC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__BeyrH {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__Ruknj {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__z8L3G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__0O3g6 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__KXxEB {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__cJeEA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__eRe05 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Xmwtf {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__5q1m3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__k9VFV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.Toast-module_wrapper__1uj9O {\n\tpadding: var(--toast-padding) !important;\n\tcolor: var(--toast-color);\n\tposition: var(--toast-position);\n\tborder: var(--toast-border);\n\tborder-radius: var(--toast-border-radius);\n\tbackground: var(--toast-background);\n\tz-index: var(--elevation-status);\n\tgap: 16px;\n\tbox-shadow: var(--surface-shadow-soft);\n\tleft: 50%;\n\ttransform: translateX(-50%);\n}\n\n.Toast-module_close__i10-s {\n\tmin-height: 20px;\n\tmax-height: 20px;\n\tmin-width: 20px;\n\tmax-width: 20px;\n\tcursor: pointer;\n}\n\n.Toast-module_message__3dP0P {\n\tgap: 6px;\n}\n\n.Toast-module_progress__SWsbA {\n\tmin-height: 20px;\n\tmax-height: 20px;\n\tmin-width: 20px;\n\tmax-width: 20px;\n}\n\n.Toast-module_s__kc5Ef {\n}\n\n.Toast-module_m__JtmLz {\n}\n.Toast-module_l__-W0PD {\n}\n"), 
 function(ToastType) {
     ToastType.Success = "success", ToastType.Error = "error", ToastType.Warning = "warning", 
     ToastType.Info = "info";
 }(ToastType || (ToastType = {}));
 
 const ToastBase = React.forwardRef((props, ref) => {
-    const {message: message = null, size: size = "m", border: border = !0, padding: padding, radius: radius = 8, container: container = "window", showDelay: showDelay = 0, duration: duration = 5e3, position: position = "bottom", offset: offset = 24, close: close = !0, type: type = ToastType.Info, didHide: didHide = () => null} = props, divAttributes = __rest(props, [ "message", "size", "border", "padding", "radius", "container", "showDelay", "duration", "position", "offset", "close", "type", "didHide" ]), theme = useTheme(), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? `${className}` : "", [ready, setReady] = useState(!1), [content, setContent] = useState(null), timer = useRef(null);
+    const {message: message = null, size: size = "m", border: border = !0, padding: padding, radius: radius = 8, container: container = "window", showDelay: showDelay = 0, duration: duration = 5e3, position: position = "bottom", offset: offset = 24, close: close = !0, progress: progress, type: type = ToastType.Info, didHide: didHide = () => null} = props, divAttributes = __rest(props, [ "message", "size", "border", "padding", "radius", "container", "showDelay", "duration", "position", "offset", "close", "progress", "type", "didHide" ]), theme = useTheme(), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? `${className}` : "", [ready, setReady] = useState(!1), [content, setContent] = useState(null), timer = useRef(null);
     useEffect(() => {
         timer.current && clearTimeout(timer.current);
         return message && message.length > 0 ? timer.current = setTimeout(() => {
@@ -118,7 +122,7 @@ const ToastBase = React.forwardRef((props, ref) => {
         timer.current && clearTimeout(timer.current), "Infinite" !== duration && (timer.current = setTimeout(() => {
             setContent(null);
         }, duration));
-    }, [ duration ]), iconColor = useMemo(() => {
+    }, [ duration ]), showProgress = useMemo(() => void 0 !== progress ? progress : "Infinite" === duration, [ progress, duration ]), iconColor = useMemo(() => {
         switch (type) {
           case ToastType.Error:
             return theme.current.colors["feedback-warning"];
@@ -152,11 +156,18 @@ const ToastBase = React.forwardRef((props, ref) => {
             initial: "initial",
             animate: "animate",
             exit: "exit",
-            children: [ jsx("div", {
+            children: [ jsxs("div", {
                 role: "status",
                 "aria-live": "polite",
                 className: css.message,
-                children: content
+                children: [ showProgress && jsx("div", {
+                    className: css.progress,
+                    children: jsx(ProgressIndicator, {
+                        show: !0,
+                        inline: !0,
+                        color: iconColor
+                    })
+                }), content ]
             }), ("Infinite" === duration || close) && jsx("div", {
                 className: css.close,
                 tabIndex: 0,