@apple-pie/slice 0.1.29 → 0.1.31

package/dist/cjs/chunks/IconButton-CgsuJIuF.js

@@ -0,0 +1,82 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), Badge = require("./Badge-D2TbyfJS.js"), Dot = require("./Dot-C0MvSJOl.js"), Icon = require("./Icon-BFZ_5Qv3.js"), sharedTypes = require("./sharedTypes-CthHPjrO.js"), css_button = "IconButton-module_button__rziqa flexBox-module_row__z24tF", css_label = "IconButton-module_label__qWGFD flexBox-module_row__z24tF type-module_body-l-regular__lOYbg", css_icon = "IconButton-module_icon__2DDWy flexBox-module_row__z24tF", css_count = "IconButton-module_count__6r373 flexBox-module_row__z24tF";
+
+const IconButton = React.memo(props => {
+    const {frameSize: frameSize = 36, iconSize: iconSize = 20, round: round = !0, icon: icon = "more", borderRadius: borderRadius = 4, border: border = !1, tooltip: tooltip, color: color, colorOn: colorOn, iconFill: iconFill = !1, bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "var(--core-outline-primary)", bgColorOn: bgColorOn = "var(--core-outline-primary)", iconColor: iconColor = "var(--core-text-primary)", iconColorOn: iconColorOn = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-primary)", transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, fillColor: fillColor, label: label, hover: hover = !0, count: count = 0, toggle: toggle = !1, toggleIcon: toggleIcon = !1, isToggled: isToggled = !1, disabled: disabled = !1, showDot: showDot = !1, buttonSize: buttonSize = "m", onClick: onClick = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "frameSize", "iconSize", "round", "icon", "borderRadius", "border", "tooltip", "color", "colorOn", "iconFill", "bgColor", "bgColorHover", "bgColorOn", "iconColor", "iconColorOn", "iconColorHover", "transition", "variants", "initial", "animate", "exit", "fillColor", "label", "hover", "count", "toggle", "toggleIcon", "isToggled", "disabled", "showDot", "buttonSize", "onClick", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = React.useRef(null), [on, setOn] = React.useState(isToggled), [hovered, setHovered] = React.useState(!1);
+    React.useEffect(() => setOn(isToggled), [ isToggled ]);
+    const handleClick = React.useCallback(e => {
+        disabled || (tooltip && onToolTip(null), toggle && setOn(!on), onClick(e));
+    }, [ disabled, tooltip, onToolTip, on, onClick, toggle ]), handleMouseEnter = React.useCallback(e => {
+        if (setHovered(!0), !(null == ref ? void 0 : ref.current) || !tooltip) return;
+        const tip = {
+            type: sharedTypes.ToolTipType.button,
+            payload: {
+                label: tooltip
+            },
+            event: e,
+            ref: ref
+        };
+        onToolTip(tip);
+    }, [ tooltip, onToolTip ]), handleMouseLeave = React.useCallback(() => {
+        setHovered(!1), tooltip && onToolTip(null);
+    }, [ tooltip, onToolTip ]), bgColorNormal = React.useMemo(() => on ? bgColorOn : null != bgColor ? bgColor : "var(--core-surface-secondary)", [ bgColorOn, bgColor, on ]), bgHoverColor = React.useMemo(() => hover && on ? bgColorOn : hover ? bgColorHover : null != bgColor ? bgColor : "transparent", [ hover, bgColor, bgColorOn, bgColorHover, on ]), textColor = React.useMemo(() => on ? colorOn : null != color ? color : "var(--core-text-primary)", [ on, colorOn, color ]), setIconColor = React.useMemo(() => on ? iconColorOn : hovered ? iconColorHover : null != iconColor ? iconColor : "var(--core-text-primary)", [ on, iconColorOn, iconColor, iconColorHover, hovered ]), size = React.useMemo(() => buttonSize ? "s" === buttonSize ? 24 : "m" === buttonSize ? 36 : "l" === buttonSize ? 44 : "xl" === buttonSize ? 56 : void 0 : frameSize, [ frameSize, buttonSize ]), cssVars = React.useMemo(() => ({
+        "--ib-bg-color": bgColorNormal,
+        "--ib-bg-color-hover": disabled ? bgColorNormal : bgHoverColor,
+        "--ib-icon-size": `${null != iconSize ? iconSize : 0}px`,
+        "--ib-button-size": `${null != size ? size : 0}px`,
+        "--ib-border-radius": round ? "100%" : `${null != borderRadius ? borderRadius : 0}px`,
+        "--ib-border": border ? "1px" : 0,
+        "--ib-color": textColor,
+        "--ib-cursor": disabled ? "default" : "pointer"
+    }), [ bgColorNormal, bgHoverColor, textColor, border, size, borderRadius, iconSize, round, disabled ]);
+    return jsxRuntime.jsxs(react.motion.button, Object.assign({
+        id: divId,
+        type: "button",
+        className: `${css_button}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars),
+        onClick: e => handleClick(e),
+        onMouseOutCapture: handleMouseLeave,
+        onMouseOverCapture: handleMouseEnter,
+        transition: transition,
+        variants: variants,
+        initial: initial,
+        animate: animate,
+        exit: exit,
+        disabled: disabled,
+        "aria-disabled": disabled,
+        ref: ref
+    }, rest, {
+        children: [ jsxRuntime.jsx("div", {
+            className: css_icon,
+            style: {
+                opacity: disabled ? .3 : 1
+            },
+            children: jsxRuntime.jsx(Icon.Icon, {
+                name: icon,
+                strokeColor: setIconColor,
+                fillColor: fillColor,
+                disabled: disabled,
+                size: iconSize,
+                fill: iconFill,
+                toggle: !!toggleIcon && on,
+                pointer: !0
+            })
+        }), label && jsxRuntime.jsx("div", {
+            className: css_label,
+            children: label
+        }), jsxRuntime.jsx(Dot.Dot, {
+            show: showDot
+        }), 0 !== count && jsxRuntime.jsx("div", {
+            className: css_count,
+            children: jsxRuntime.jsx(Badge.Badge, {
+                variant: "light",
+                count: count,
+                hideNull: !0
+            })
+        }) ]
+    }));
+});
+
+exports.IconButton = IconButton;

package/dist/cjs/chunks/{IndexedDB-BaVmQgkK.js → IndexedDB-Dgwal8na.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-C8dZW5nY.js");
+var tslib_es6 = require("./tslib.es6-CzpRaW14.js");
 
 exports.IndexedDB = class {
     constructor(storeName, options = {}) {

package/dist/cjs/chunks/Label-BuyhcJbF.js

@@ -0,0 +1,102 @@
+'use client';
+"use strict";
+
+var LabelBackground, tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-DZAbObFp.js"), css = {
+    label: "Label-module_label__RaRvM",
+    button: "Label-module_button__N8bcQ type-module_body-m-regular__LuQBA",
+    xs: "Label-module_xs__K9Ai6 type-module_body-xs-regular__ZAFft",
+    s: "Label-module_s__Zh8Gp type-module_body-s-regular__vRHSP",
+    m: "Label-module_m__BJtGL type-module_body-m-regular__LuQBA",
+    l: "Label-module_l__t70tt type-module_body-l-regular__lOYbg"
+};
+
+function resolveSemanticBackground(backgroundColor) {
+    if (!backgroundColor || "string" != typeof backgroundColor) return;
+    const semanticKey = backgroundColor;
+    return exports.LabelBackground[semanticKey] ? exports.LabelBackground[semanticKey] : Object.values(exports.LabelBackground).find(value => value === backgroundColor);
+}
+
+exports.LabelBackground = void 0, (LabelBackground = exports.LabelBackground || (exports.LabelBackground = {})).red = "red", 
+LabelBackground.yellow = "yellow", LabelBackground.green = "green", LabelBackground.blue = "blue", 
+LabelBackground.grey = "grey", LabelBackground.lightGrey = "lightGrey", LabelBackground.white = "white", 
+exports.Label = function(props) {
+    const {children: children, label: label, backgroundColor: backgroundColor, borderWidth: borderWidth, borderSize: borderSize = 1, borderColor: borderColor = "var(--core-outline-primary)", bgColor: bgColor = "transparent", borderRadius: borderRadius = 4, padding: padding, textColor: textColor = "var(--core-text-primary)", textSize: textSize = "s", onClick: onClick} = props, divAttributes = tslib_es6.__rest(props, [ "children", "label", "backgroundColor", "borderWidth", "borderSize", "borderColor", "bgColor", "borderRadius", "padding", "textColor", "textSize", "onClick" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", isInteractive = Boolean(onClick), resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, handleClick = React.useCallback(e => {
+        isInteractive && (null == onClick || onClick(e));
+    }, [ isInteractive, onClick ]), setBgColor = React.useMemo(() => {
+        if (!resolvedBackgroundColor) return "transparent";
+        const fill = resolveSemanticBackground(resolvedBackgroundColor);
+        if (!fill) return resolvedBackgroundColor;
+        switch (fill) {
+          case "red":
+            return "var(--feedback-warning)";
+
+          case "green":
+            return "var(--feedback-positive)";
+
+          case "yellow":
+            return "var(--array-yellow)";
+
+          case "grey":
+          case "white":
+            return "var(--core-surface-secondary)";
+
+          case "lightGrey":
+            return "var(--core-button-disabled)";
+
+          case "blue":
+            return "var(--core-button-primary)";
+
+          default:
+            return "var(--core-surface-primary)";
+        }
+    }, [ resolvedBackgroundColor ]), setBorderColor = React.useMemo(() => {
+        if (!resolvedBackgroundColor) return borderColor;
+        const fill = resolveSemanticBackground(resolvedBackgroundColor);
+        if (!fill) return borderColor;
+        switch (fill) {
+          case "red":
+            return "var(--feedback-warning)";
+
+          case "green":
+            return "var(--feedback-positive)";
+
+          case "yellow":
+            return "var(--array-yellow-label)";
+
+          case "grey":
+          case "lightGrey":
+          case "white":
+            return "var(--core-outline-primary)";
+
+          case "blue":
+            return "var(--core-button-primary)";
+
+          default:
+            return "var(--core-surface-primary)";
+        }
+    }, [ resolvedBackgroundColor, borderColor ]), setPadding = React.useMemo(() => padding ? misc.setStyle(padding) : "2px 4px", [ padding ]), cssVars = React.useMemo(() => ({
+        "--label-padding": setPadding,
+        "--label-border-radius": misc.setStyle(borderRadius),
+        "--label-cursor": onClick ? "pointer" : "default",
+        "--label-color": textColor,
+        "--label-bg-color": setBgColor,
+        "--label-border-size": misc.setStyle(resolvedBorderWidth),
+        "--label-border-color": setBorderColor
+    }), [ setPadding, borderRadius, onClick, textColor, setBorderColor, setBgColor, resolvedBorderWidth ]);
+    return isInteractive ? jsxRuntime.jsx("button", Object.assign({
+        id: divId,
+        type: "button",
+        className: `${css.button} ${css[textSize]}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars),
+        "aria-label": "Label button",
+        onClick: e => handleClick(e)
+    }, rest, {
+        children: null != children ? children : label
+    })) : jsxRuntime.jsx("span", Object.assign({
+        id: divId,
+        className: `${css.label} ${css[textSize]}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars)
+    }, rest, {
+        children: null != children ? children : label
+    }));
+};

package/dist/cjs/chunks/Modal-ByRyv3wy.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-DZAbObFp.js"), Button = require("./Button-CTsHZBEB.js"), Icon = require("./Icon-BFZ_5Qv3.js"), IconButton = require("./IconButton-CgsuJIuF.js"), 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"
+};
+
+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, titleIconFill: titleIconFill = !0, 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 = tslib_es6.__rest(props, [ "children", "id", "className", "style", "minWidth", "minHeight", "maxHeight", "maxWidth", "padding", "close", "title", "titleSize", "contentSize", "actions", "titleIcon", "titleIconFill", "titleBorderColor", "titleBorderWidth", "actionsBorderColor", "actionsBorderWidth", "onAction", "onReject", "onResolve", "onClose", "onToolTip", "onDragPointerDown", "backgroundColor", "titleColor", "borderColor", "borderRadius", "borderWidth" ]), modalStyle = null != style ? style : {}, modalClass = className ? ` ${className}` : "", cssVars = React.useMemo(() => ({
+        "--modal-min-width": misc.setStyle(minWidth),
+        "--modal-min-height": misc.setStyle(minHeight),
+        "--modal-max-height": misc.setStyle(maxHeight),
+        "--modal-max-width": misc.setStyle(maxWidth),
+        "--modal-border-color": borderColor,
+        "--modal-title-color": titleColor,
+        "--modal-border-radius": misc.setStyle(borderRadius),
+        "--modal-border-width": misc.setStyle(borderWidth),
+        "--modal-padding": misc.setStyle(padding, 16),
+        "--modal-background-color": backgroundColor,
+        "--modal-title-border-color": titleBorderColor,
+        "--modal-title-border-width": misc.setStyle(titleBorderWidth),
+        "--modal-actions-border-color": actionsBorderColor,
+        "--modal-actions-border-width": misc.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 : jsxRuntime.jsx(Button.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,
+        iconRight: action.iconRight,
+        tooltip: action.tooltip,
+        onToolTip: tip => null == onToolTip ? void 0 : onToolTip(tip)
+    }, `${action.id}_${index}`) : null);
+    return jsxRuntime.jsxs("div", Object.assign({
+        id: id,
+        className: `${css.wrapper}${modalClass}`,
+        style: Object.assign(Object.assign({}, modalStyle), cssVars)
+    }, rest, {
+        children: [ (title || close) && jsxRuntime.jsxs("div", {
+            className: `${css.title} ${css[titleSize]}`,
+            children: [ jsxRuntime.jsxs("div", {
+                className: css.titleBlock,
+                onPointerDown: onDragPointerDown,
+                children: [ titleIcon && jsxRuntime.jsx("div", {
+                    className: css.titleIcon,
+                    children: jsxRuntime.jsx(Icon.Icon, {
+                        name: titleIcon,
+                        fill: titleIconFill,
+                        size: 20
+                    })
+                }), title ]
+            }), close && jsxRuntime.jsx("div", {
+                className: css.close,
+                children: jsxRuntime.jsx("div", {
+                    className: css.titleIcon,
+                    children: jsxRuntime.jsx(IconButton.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)
+                    })
+                })
+            }) ]
+        }), jsxRuntime.jsx("div", {
+            className: `${css.content} ${css[contentSize]}`,
+            children: children
+        }), actions && actions.length > 0 && jsxRuntime.jsxs("div", {
+            className: css.actions,
+            children: [ jsxRuntime.jsx("div", {
+                className: css.leftActions,
+                children: renderActions("left")
+            }), jsxRuntime.jsx("div", {
+                className: css.rightActions,
+                children: renderActions("right")
+            }) ]
+        }) ]
+    }));
+});
+
+exports.Modal = Modal;

package/dist/cjs/chunks/ModalController-xjflFsjF.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), Overlay = require("./Overlay-FooE9M_s.js"), modalStore = require("./modalStore-D4bOjuWd.js"), css_wrapper = "ModalController-module_wrapper__HkOoX flexBox-module_row__z24tF";
+
+const defaultTransition = {
+    ease: "easeOut",
+    duration: .25,
+    delay: .1
+}, defaultVariants = {
+    initial: {
+        opacity: 0,
+        y: 20
+    },
+    animate: {
+        opacity: 1,
+        y: 0
+    },
+    exit: {
+        opacity: 0,
+        y: 20
+    }
+};
+
+exports.ModalController = function(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 = react.useDragControls(), modal = modalStore.useModal(), resolve = modalStore.useModalActions().resolve, reject = modalStore.useModalActions().reject, hide = modalStore.useModalActions().hide, ModalComponent = null == modal ? void 0 : modal.component, modalProps = null == modal ? void 0 : modal.props;
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ jsxRuntime.jsx(Overlay.Overlay, {
+            show: !!modal,
+            type: "dark",
+            opacity: overlayOpacity,
+            color: overlayColor,
+            onClick: () => hide()
+        }), jsxRuntime.jsx(react.AnimatePresence, {
+            children: modal && ModalComponent && jsxRuntime.jsx(react.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: jsxRuntime.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);
+                    }
+                }))
+            })
+        }) ]
+    });
+};

package/dist/cjs/chunks/Overlay-FooE9M_s.js

@@ -0,0 +1,41 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), css_overlay = "Overlay-module_overlay__EkbfA";
+
+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 = tslib_es6.__rest(props, [ "children", "show", "type", "global", "overlay", "color", "opacity", "transition", "onClick", "toggleOverlay" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", computedOpacity = React.useMemo(() => "clear" === type ? 0 : void 0 !== opacity ? opacity : "dark" === type ? .8 : 0, [ type, opacity ]), handleClick = React.useCallback(() => {
+        global && toggleOverlay(!1), onClick();
+    }, [ global, toggleOverlay, onClick ]), handleContextMenu = React.useCallback(e => {
+        e.preventDefault();
+    }, []), cssVars = React.useMemo(() => ({
+        "--overlay-color": null != color ? color : "rgb(0,0,0)"
+    }), [ color ]);
+    return jsxRuntime.jsx(react.AnimatePresence, {
+        initial: !1,
+        children: show && jsxRuntime.jsx(react.motion.div, Object.assign({
+            id: divId,
+            className: `${css_overlay}${divClass}`,
+            style: Object.assign(Object.assign({}, divStyle), cssVars),
+            initial: {
+                opacity: 0
+            },
+            animate: {
+                opacity: computedOpacity
+            },
+            exit: {
+                opacity: 0
+            },
+            onClick: handleClick,
+            transition: transition,
+            onContextMenu: handleContextMenu
+        }, rest, {
+            children: children
+        }))
+    });
+});
+
+exports.Overlay = Overlay;

package/dist/cjs/chunks/Pager-B-cuwffo.js

@@ -0,0 +1,36 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-DZAbObFp.js"), css_wrapper = "Pager-module_wrapper__eutVg flexBox-module_row__z24tF", css_bullet = "Pager-module_bullet__TxyR5 flexBox-module_row__z24tF", css_selected = "Pager-module_selected__C6xbR";
+
+const Pager = React.memo(props => {
+    const {size: size = 8, index: index = 0, color: color, colorHover: colorHover, colorOn: colorOn, pages: pages = 2, gap: gap = 4, onChange: onChange = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "size", "index", "color", "colorHover", "colorOn", "pages", "gap", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [selected, setSelected] = React.useState(index), bullets = React.useMemo(() => Array.from({
+        length: pages
+    }, (_, i) => i), [ pages ]);
+    React.useEffect(() => setSelected(index), [ index ]);
+    const handleClick = React.useCallback(i => {
+        setSelected(i), onChange(i);
+    }, [ onChange ]), cssVars = React.useMemo(() => ({
+        "--pager-gap": `${gap}px`,
+        "--pager-size": `${size}px`,
+        "--pager-color": null != color ? color : "var(--core-text-disabled)",
+        "--pager-colorOn": null != colorOn ? colorOn : "var(--core-text-primary)",
+        "--pager-colorHover": null != colorHover ? colorHover : "var(--core-text-disabled)"
+    }), [ gap, size, color, colorOn, colorHover ]);
+    return jsxRuntime.jsx("div", Object.assign({
+        id: divId,
+        style: Object.assign(Object.assign({}, divStyle), cssVars),
+        className: `${css_wrapper}${divClass}`
+    }, rest, {
+        children: bullets.map(bulletId => jsxRuntime.jsx("input", {
+            className: `${css_bullet} ${selected === bulletId ? css_selected : ""}`,
+            type: "button",
+            onClick: () => handleClick(bulletId),
+            onKeyDown: e => misc.accessibleKeyDown(e, () => handleClick(bulletId)),
+            onTouchStart: () => handleClick(bulletId),
+            tabIndex: bulletId
+        }, `paging_bullet_${bulletId}`))
+    }));
+});
+
+exports.Pager = Pager;

package/dist/cjs/chunks/ProgressIndicator-ByZ_aYAZ.js

@@ -0,0 +1,138 @@
+'use client';
+"use strict";
+
+var jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+
+require("../theme/colors.js");
+
+var tslib_es6 = require("./tslib.es6-CzpRaW14.js");
+
+require("../hooks/useWindow.js");
+
+var Icon = require("./Icon-BFZ_5Qv3.js"), react = require("motion/react"), css$1_wrapper = "DoneCheck-module_wrapper__AlISD flexBox-module_row__z24tF", css$1_icon = "DoneCheck-module_icon__bKaFp flexBox-module_row__z24tF";
+
+const DoneCheck = React.memo(props => {
+    const theme = hooks_useTheme.useTheme(), {size: size = 88, stroke: stroke = 1.5, color: color = theme.current.colors["feedback-positive"], play: play = !0, delay: delay = 5, duration: duration = 1, didStart: didStart, didEnd: didEnd} = props, [playing, setPlaying] = React.useState(!play);
+    React.useEffect(() => {
+        let frameOne = 0, frameTwo = 0;
+        return play ? (setPlaying(!1), frameOne = requestAnimationFrame(() => {
+            frameTwo = requestAnimationFrame(() => {
+                setPlaying(!0);
+            });
+        })) : setPlaying(!0), () => {
+            frameOne && cancelAnimationFrame(frameOne), frameTwo && cancelAnimationFrame(frameTwo);
+        };
+    }, [ play ]);
+    const transition = React.useMemo(() => `scale ${duration}s var(--motion-spring) ${delay}s`, [ delay, duration ]), cssVars = React.useMemo(() => ({
+        "--icon-size": `${size}px`,
+        "--icon-scale": playing ? 1 : 0,
+        "--icon-transition": play ? transition : "unset"
+    }), [ size, playing, play, transition ]);
+    return jsxRuntime.jsx("div", {
+        className: css$1_wrapper,
+        role: "status",
+        "aria-live": "polite",
+        children: jsxRuntime.jsx("div", {
+            className: css$1_icon,
+            style: cssVars,
+            onTransitionEnd: () => null == didEnd ? void 0 : didEnd(),
+            onTransitionStart: () => null == didStart ? void 0 : didStart(),
+            children: jsxRuntime.jsx(Icon.Icon, {
+                name: "check circle",
+                size: size,
+                color: color,
+                stroke: stroke,
+                strokeColor: color
+            })
+        })
+    });
+});
+
+var css_container = "ProgressIndicator-module_container__pW2gW flexBox-module_column__ezvMq";
+
+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 jsxRuntime.jsxs(react.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: [ jsxRuntime.jsx("title", {
+            children: "Loading"
+        }), jsxRuntime.jsx("defs", {
+            children: jsxRuntime.jsxs("linearGradient", {
+                id: gradientId,
+                x1: "0",
+                y1: "0",
+                x2: "20",
+                y2: "0",
+                gradientUnits: "userSpaceOnUse",
+                children: [ jsxRuntime.jsx("stop", {
+                    offset: "0%",
+                    stopColor: color,
+                    stopOpacity: 1
+                }), jsxRuntime.jsx("stop", {
+                    offset: "50%",
+                    stopColor: color,
+                    stopOpacity: 1
+                }), jsxRuntime.jsx("stop", {
+                    offset: "100%",
+                    stopColor: color,
+                    stopOpacity: 0
+                }) ]
+            })
+        }), jsxRuntime.jsx(react.motion.path, {
+            d: path,
+            fill: "transparent",
+            strokeWidth: stroke,
+            stroke: `url(#${gradientId})`
+        }) ]
+    });
+};
+
+exports.DoneCheck = DoneCheck, exports.ProgressIndicator = function(props) {
+    const theme = hooks_useTheme.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 = tslib_es6.__rest(props, [ "size", "inset", "secondsPerSpin", "show", "color", "stroke", "inline", "duration", "didStart", "didStop" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [playing, setPlaying] = React.useState(show), gradientId = React.useId().replace(/:/g, ""), timer = React.useRef(null);
+    React.useEffect(() => (show ? (setPlaying(!0), didStart(), duration && (timer.current = setTimeout(() => {
+        setPlaying(!1), didStop();
+    }, 1e3 * duration))) : (setPlaying(!1), didStop()), () => {
+        (null == timer ? void 0 : timer.current) && clearTimeout(timer.current);
+    }), [ show, didStart, didStop, duration ]);
+    const cssVars = React.useMemo(() => ({
+        "--pi-position": inline ? "relative" : "absolute",
+        "--pi-inset": inline ? "unset" : "0",
+        "--pi-icon-size": `${null != size ? size : 0}px`,
+        "--pi-display": inline ? "inline-flex" : "flex"
+    }), [ inline, size ]), openCircle = React.useMemo(() => OpenCircle(size, secondsPerSpin, color, stroke, playing, inset, gradientId), [ size, secondsPerSpin, color, stroke, playing, inset, gradientId ]);
+    return jsxRuntime.jsx(react.AnimatePresence, {
+        initial: !0,
+        children: show && jsxRuntime.jsx(react.motion.div, Object.assign({
+            id: divId,
+            className: `${css_container}${divClass}`,
+            style: Object.assign(Object.assign({}, divStyle), cssVars),
+            initial: {
+                opacity: 0
+            },
+            animate: {
+                opacity: 1
+            },
+            exit: {
+                opacity: 0
+            }
+        }, rest, {
+            children: openCircle
+        }))
+    });
+};

package/dist/cjs/chunks/{PromptInput-C8-V67sS.js → PromptInput--grtHPvy.js}

@@ -3,9 +3,9 @@
 
 var jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
-require("../theme/colors.js"), require("./tslib.es6-C8dZW5nY.js"), require("../hooks/useWindow.js");
+require("../theme/colors.js"), require("./tslib.es6-CzpRaW14.js"), require("../hooks/useWindow.js");
 
-var Button = require("./Button-B1qbfQgN.js"), FileList = require("./FileList-D5_igVaC.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css = {
+var Button = require("./Button-CTsHZBEB.js"), FileList = require("./FileList-CDcfKIV6.js"), css = {
     wrapperBg: "PromptInput-module_wrapperBg__zabZq flexBox-module_columnStart__C7P44",
     bgRotate: "PromptInput-module_bgRotate__Um720",
     textareaWrapper: "PromptInput-module_textareaWrapper__KusiV flexBox-module_columnStart__C7P44",
@@ -19,8 +19,6 @@ var Button = require("./Button-B1qbfQgN.js"), FileList = require("./FileList-D5_
     l: "PromptInput-module_l__TlceW type-module_body-l-regular__lOYbg"
 };
 
-styleInject_es.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.PromptInput-module_wrapperBg__zabZq {\n\tposition: relative;\n\t--border-angle: 0turn;\n\t--conic-gradient-dark: conic-gradient(\n\t\tfrom var(--border-angle),\n\t\tvar(--core-text-special) 0deg,\n\t\tvar(--core-text-special) 45deg,\n\t\tvar(--core-text-special) 90deg,\n\t\tvar(--array-magenta-label) 135deg,\n\t\tvar(--array-magenta-label) 180deg,\n\t\tvar(--array-magenta-label) 225deg,\n\t\tvar(--array-land) 270deg,\n\t\tvar(--array-land) 315deg,\n\t\tvar(--array-land) 360deg\n\t);\n\t--conic-gradient-light: conic-gradient(\n\t\tfrom var(--border-angle),\n\t\tvar(--core-text-special) 0deg,\n\t\tvar(--core-text-special) 45deg,\n\t\tvar(--core-text-special) 90deg,\n\t\tvar(--array-magenta-label) 135deg,\n\t\tvar(--array-magenta-label) 180deg,\n\t\tvar(--array-magenta-label) 225deg,\n\t\tvar(--array-land-label) 270deg,\n\t\tvar(--array-land-label) 315deg,\n\t\tvar(--array-land-label) 360deg\n\t);\n\tz-index: 0;\n\theight: auto;\n\tmax-height: var(--prompt-max-height);\n\twidth: 100%;\n\tborder-radius: var(--prompt-border-radius);\n\toverflow: hidden;\n\tpadding: var(--prompt-border-width) !important;\n\tbackground: var(--prompt-border-color);\n\tanimation: PromptInput-module_bgRotate__Um720 3s linear infinite;\n\tanimation-play-state: var(--prompt-state);\n\ttransition: background var(--motion-water-duration) var(--motion-water) 0s;\n}\n\n@property --border-angle {\n\tsyntax: "<angle>";\n\tinherits: false;\n\tinitial-value: 0turn;\n}\n\n@keyframes PromptInput-module_bgRotate__Um720 {\n\t100% {\n\t\t--border-angle: 1turn;\n\t}\n}\n\n.PromptInput-module_textareaWrapper__KusiV {\n\talign-items: flex-start;\n\twidth: 100%;\n\theight: min-content;\n\tmax-height: 400px;\n\toverflow: hidden;\n\toverflow-y: auto;\n\tborder-radius: var(--prompt-inner-border-radius);\n\tbackground: var(--core-surface-secondary);\n}\n\n.PromptInput-module_attachments__rqgY1 {\n\tpadding: 16px 16px 0 16px !important;\n\twidth: 100%;\n}\n\n.PromptInput-module_clear__MFroM {\n\tpadding: 12px 8px 0 0 !important;\n\tdisplay: var(--prompt-clear) !important;\n}\n\n.PromptInput-module_buttonBar__X8LDe {\n\tpadding: 8px 16px 16px 16px !important;\n\twidth: 100%;\n\tcursor: text;\n}\n\n.PromptInput-module_toolBar__GBvPT {\n\tflex: 1;\n\tgap: 8px;\n}\n\n.PromptInput-module_textarea__e4Kxn {\n\tpadding: 16px !important;\n\tbox-sizing: border-box;\n\tfield-sizing: content;\n\twidth: 100%;\n\tresize: none;\n\tborder: 0;\n\toutline: none;\n\tcolor: var(--core-text-primary);\n\tbackground: transparent;\n\tborder-radius: var(--prompt-border-radius);\n\t&::placeholder {\n\t\tcolor: var(--core-text-disabled);\n\t}\n}\n\n.PromptInput-module_s__ivyC9 {\n}\n\n.PromptInput-module_m__LFHvW {\n}\n\n.PromptInput-module_l__TlceW {\n}\n');
-
 const PromptInputBase = React.forwardRef((props, ref) => {
     const {children: children, attachments: attachments = [], value: value = "", working: working = !1, maxHeight: maxHeight, borderStyle: borderStyle = "gradient", borderColor: borderColor, borderColorOn: borderColorOn, borderAnimate: borderAnimate = !0, borderWidth: borderWidth = 1, borderRadius: borderRadius = 8, focused: focused = !1, placeholder: placeholder = "Ask me anything ...", placeholderWorking: placeholderWorking = "Working ...", submitClears: submitClears = !0, submitEnablesStop: submitEnablesStop = !0, enterSubmits: enterSubmits = !0, attachButton: attachButton = !0, sendButton: sendButton = !0, stopEnabled: stopEnabled = !1, textSize: textSize = "m", maxLength: maxLength, toolbarGap: toolbarGap = 8, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onSubmit: onSubmit, onStop: onStop, onAttachmentsChange: onAttachmentsChange} = props, {isDark: isDark} = hooks_useTheme.useTheme(), [isFocused, setIsFocused] = React.useState(null != focused && focused), [isWorking, setIsWorking] = React.useState(null != working && working), [isStopEnabled, setIsStopEnabled] = React.useState(stopEnabled), [textValue, setTextValue] = React.useState(value), textAreaRef = React.useRef(null), handleFocus = React.useCallback(() => {
         var _a, _b;