@apple-pie/slice 0.1.29 → 0.1.31

package/dist/esm/chunks/IconButton-DdLhTUl0.mjs

@@ -0,0 +1,96 @@
+'use client';
+import { a as __rest } from "./tslib.es6-BX2F90pK.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import { motion } from "motion/react";
+
+import React, { useRef, useState, useEffect, useCallback, useMemo } from "react";
+
+import { B as Badge } from "./Badge-pLwG0zm7.mjs";
+
+import { D as Dot } from "./Dot-h26m47Z-.mjs";
+
+import { I as Icon } from "./Icon-DjW0Krm8.mjs";
+
+import { T as ToolTipType } from "./sharedTypes-U5H1I85x.mjs";
+
+var 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 = __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 = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = useRef(null), [on, setOn] = useState(isToggled), [hovered, setHovered] = useState(!1);
+    useEffect(() => setOn(isToggled), [ isToggled ]);
+    const handleClick = useCallback(e => {
+        disabled || (tooltip && onToolTip(null), toggle && setOn(!on), onClick(e));
+    }, [ disabled, tooltip, onToolTip, on, onClick, toggle ]), handleMouseEnter = useCallback(e => {
+        if (setHovered(!0), !(null == ref ? void 0 : ref.current) || !tooltip) return;
+        const tip = {
+            type: ToolTipType.button,
+            payload: {
+                label: tooltip
+            },
+            event: e,
+            ref: ref
+        };
+        onToolTip(tip);
+    }, [ tooltip, onToolTip ]), handleMouseLeave = useCallback(() => {
+        setHovered(!1), tooltip && onToolTip(null);
+    }, [ tooltip, onToolTip ]), bgColorNormal = useMemo(() => on ? bgColorOn : null != bgColor ? bgColor : "var(--core-surface-secondary)", [ bgColorOn, bgColor, on ]), bgHoverColor = useMemo(() => hover && on ? bgColorOn : hover ? bgColorHover : null != bgColor ? bgColor : "transparent", [ hover, bgColor, bgColorOn, bgColorHover, on ]), textColor = useMemo(() => on ? colorOn : null != color ? color : "var(--core-text-primary)", [ on, colorOn, color ]), setIconColor = useMemo(() => on ? iconColorOn : hovered ? iconColorHover : null != iconColor ? iconColor : "var(--core-text-primary)", [ on, iconColorOn, iconColor, iconColorHover, hovered ]), size = useMemo(() => buttonSize ? "s" === buttonSize ? 24 : "m" === buttonSize ? 36 : "l" === buttonSize ? 44 : "xl" === buttonSize ? 56 : void 0 : frameSize, [ frameSize, buttonSize ]), cssVars = 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 jsxs(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: [ jsx("div", {
+            className: css_icon,
+            style: {
+                opacity: disabled ? .3 : 1
+            },
+            children: jsx(Icon, {
+                name: icon,
+                strokeColor: setIconColor,
+                fillColor: fillColor,
+                disabled: disabled,
+                size: iconSize,
+                fill: iconFill,
+                toggle: !!toggleIcon && on,
+                pointer: !0
+            })
+        }), label && jsx("div", {
+            className: css_label,
+            children: label
+        }), jsx(Dot, {
+            show: showDot
+        }), 0 !== count && jsx("div", {
+            className: css_count,
+            children: jsx(Badge, {
+                variant: "light",
+                count: count,
+                hideNull: !0
+            })
+        }) ]
+    }));
+});
+
+export { IconButton as I };

package/dist/esm/chunks/{IndexedDB-Dk7a4fPS.mjs → IndexedDB-DVoDikoA.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter } from "./tslib.es6-C-olHjXV.mjs";
+import { _ as __awaiter } from "./tslib.es6-BX2F90pK.mjs";
 
 class IndexedDB {
     constructor(storeName, options = {}) {

package/dist/esm/chunks/Label-DhmJ_Sln.mjs

@@ -0,0 +1,113 @@
+'use client';
+import { a as __rest } from "./tslib.es6-BX2F90pK.mjs";
+
+import { jsx } from "react/jsx-runtime";
+
+import { useCallback, useMemo } from "react";
+
+import { s as setStyle } from "./misc-CTGTuM2J.mjs";
+
+var LabelBackground, 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 LabelBackground[semanticKey] ? LabelBackground[semanticKey] : Object.values(LabelBackground).find(value => value === backgroundColor);
+}
+
+function Label(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 = __rest(props, [ "children", "label", "backgroundColor", "borderWidth", "borderSize", "borderColor", "bgColor", "borderRadius", "padding", "textColor", "textSize", "onClick" ]), {id: divId, className: className, style: style} = divAttributes, rest = __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 = useCallback(e => {
+        isInteractive && (null == onClick || onClick(e));
+    }, [ isInteractive, onClick ]), setBgColor = 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 = 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 = useMemo(() => padding ? setStyle(padding) : "2px 4px", [ padding ]), cssVars = useMemo(() => ({
+        "--label-padding": setPadding,
+        "--label-border-radius": setStyle(borderRadius),
+        "--label-cursor": onClick ? "pointer" : "default",
+        "--label-color": textColor,
+        "--label-bg-color": setBgColor,
+        "--label-border-size": setStyle(resolvedBorderWidth),
+        "--label-border-color": setBorderColor
+    }), [ setPadding, borderRadius, onClick, textColor, setBorderColor, setBgColor, resolvedBorderWidth ]);
+    return isInteractive ? 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
+    })) : 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
+    }));
+}
+
+!function(LabelBackground) {
+    LabelBackground.red = "red", LabelBackground.yellow = "yellow", LabelBackground.green = "green", 
+    LabelBackground.blue = "blue", LabelBackground.grey = "grey", LabelBackground.lightGrey = "lightGrey", 
+    LabelBackground.white = "white";
+}(LabelBackground || (LabelBackground = {}));
+
+export { Label as L, LabelBackground as a };

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

@@ -0,0 +1,113 @@
+import { a as __rest } from "./tslib.es6-BX2F90pK.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import React, { useMemo } from "react";
+
+import { s as setStyle } from "./misc-CTGTuM2J.mjs";
+
+import { B as Button } from "./Button-BJoMLZIs.mjs";
+
+import { I as Icon } from "./Icon-DjW0Krm8.mjs";
+
+import { I as IconButton } from "./IconButton-DdLhTUl0.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"
+};
+
+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 = __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 = 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,
+        iconRight: action.iconRight,
+        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,
+                        fill: titleIconFill,
+                        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-C1BnM5Dz.mjs

@@ -0,0 +1,76 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+
+import { useDragControls, AnimatePresence, motion } from "motion/react";
+
+import { O as Overlay } from "./Overlay-Dsy55Bxm.mjs";
+
+import { u as useModal, a as useModalActions } from "./modalStore-Crg_QmSJ.mjs";
+
+var 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
+    }
+};
+
+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-Dsy55Bxm.mjs

@@ -0,0 +1,47 @@
+'use client';
+import { a as __rest } from "./tslib.es6-BX2F90pK.mjs";
+
+import { jsx } from "react/jsx-runtime";
+
+import { AnimatePresence, motion } from "motion/react";
+
+import React, { useMemo, useCallback } from "react";
+
+var 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 = __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();
+    }, []), cssVars = useMemo(() => ({
+        "--overlay-color": null != color ? color : "rgb(0,0,0)"
+    }), [ color ]);
+    return jsx(AnimatePresence, {
+        initial: !1,
+        children: show && jsx(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
+        }))
+    });
+});
+
+export { Overlay as O };

package/dist/esm/chunks/Pager-BqSdwL0L.mjs

@@ -0,0 +1,42 @@
+'use client';
+import { a as __rest } from "./tslib.es6-BX2F90pK.mjs";
+
+import { jsx } from "react/jsx-runtime";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+
+import { a as accessibleKeyDown } from "./misc-CTGTuM2J.mjs";
+
+var 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 = __rest(props, [ "size", "index", "color", "colorHover", "colorOn", "pages", "gap", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [selected, setSelected] = useState(index), bullets = useMemo(() => Array.from({
+        length: pages
+    }, (_, i) => i), [ pages ]);
+    useEffect(() => setSelected(index), [ index ]);
+    const handleClick = useCallback(i => {
+        setSelected(i), onChange(i);
+    }, [ onChange ]), cssVars = 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 jsx("div", Object.assign({
+        id: divId,
+        style: Object.assign(Object.assign({}, divStyle), cssVars),
+        className: `${css_wrapper}${divClass}`
+    }, rest, {
+        children: bullets.map(bulletId => jsx("input", {
+            className: `${css_bullet} ${selected === bulletId ? css_selected : ""}`,
+            type: "button",
+            onClick: () => handleClick(bulletId),
+            onKeyDown: e => accessibleKeyDown(e, () => handleClick(bulletId)),
+            onTouchStart: () => handleClick(bulletId),
+            tabIndex: bulletId
+        }, `paging_bullet_${bulletId}`))
+    }));
+});
+
+export { Pager as P };

package/dist/esm/chunks/ProgressIndicator-BnqZFATV.mjs

@@ -0,0 +1,146 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+
+import React, { useState, useEffect, useMemo, useId, useRef } from "react";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import "../theme/colors.mjs";
+
+import { a as __rest } from "./tslib.es6-BX2F90pK.mjs";
+
+import "../hooks/useWindow.mjs";
+
+import { I as Icon } from "./Icon-DjW0Krm8.mjs";
+
+import { AnimatePresence, motion } from "motion/react";
+
+var 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 = 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] = useState(!play);
+    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 = useMemo(() => `scale ${duration}s var(--motion-spring) ${delay}s`, [ delay, duration ]), cssVars = useMemo(() => ({
+        "--icon-size": `${size}px`,
+        "--icon-scale": playing ? 1 : 0,
+        "--icon-transition": play ? transition : "unset"
+    }), [ size, playing, play, transition ]);
+    return jsx("div", {
+        className: css$1_wrapper,
+        role: "status",
+        "aria-live": "polite",
+        children: jsx("div", {
+            className: css$1_icon,
+            style: cssVars,
+            onTransitionEnd: () => null == didEnd ? void 0 : didEnd(),
+            onTransitionStart: () => null == didStart ? void 0 : didStart(),
+            children: jsx(Icon, {
+                name: "check circle",
+                size: size,
+                color: color,
+                stroke: stroke,
+                strokeColor: color
+            })
+        })
+    });
+});
+
+var css_container = "ProgressIndicator-module_container__pW2gW flexBox-module_column__ezvMq";
+
+function ProgressIndicator(props) {
+    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()), () => {
+        (null == timer ? void 0 : timer.current) && clearTimeout(timer.current);
+    }), [ show, didStart, didStop, duration ]);
+    const cssVars = 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 = 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({
+            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
+        }))
+    });
+}
+
+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 };