@apple-pie/slice 0.1.60 → 0.2.0

package/dist/cjs/chunks/CheckBox-DBaKpMhg.js

@@ -0,0 +1,66 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-PmT7cZzC.js"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), Icon = require("./Icon-COY7IZkK.js"), css = {
+    wrapper: "CheckBox-module_wrapper__uRsjI",
+    icon: "CheckBox-module_icon__FoDJN",
+    label: "CheckBox-module_label__0AiBp",
+    xs: "CheckBox-module_xs__8HP4h type-module_body-xs-regular__ZAFft",
+    s: "CheckBox-module_s__qWZbK type-module_body-s-regular__vRHSP",
+    m: "CheckBox-module_m__cOkhr type-module_body-m-regular__LuQBA",
+    l: "CheckBox-module_l__wz2rr type-module_body-l-regular__lOYbg",
+    xl: "CheckBox-module_xl__exBbQ type-module_body-xl-regular__pF2kC"
+};
+
+const CheckBox = React.memo(rawProps => {
+    var _a;
+    const props = resolveColorProps.resolveColorProps(rawProps), {align: align = "middle", children: children, label: label, checked: checked = !1, disabled: disabled = !1, iconChecked: iconChecked = "system.checkbox-checked", iconUnChecked: iconUnChecked = "system.checkbox", iconPartial: iconPartial = "system.checkbox-partial", iconColor: iconColor, iconColorSelected: iconColorSelected, iconSize: iconSize = 20, gap: gap = 6, textColor: textColor, textSize: textSize = "m", textTopOffset: textTopOffset = 0, onChange: onChange, onClick: onClick, onKeyDown: onKeyDown, tabIndex: tabIndex = 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: className, style: style} = props, rest = tslib_es6.__rest(props, [ "align", "children", "label", "checked", "disabled", "iconChecked", "iconUnChecked", "iconPartial", "iconColor", "iconColorSelected", "iconSize", "gap", "textColor", "textSize", "textTopOffset", "onChange", "onClick", "onKeyDown", "tabIndex", "aria-label", "aria-labelledby", "className", "style" ]), [state, setState] = React.useState(checked), contentId = React.useId(), content = null != label ? label : children, hasContent = null != content && !1 !== content;
+    React.useEffect(() => setState(checked), [ checked ]);
+    const iconName = !0 === state ? iconChecked : "mixed" === state ? iconPartial : iconUnChecked, selectedIconColor = !1 !== state ? iconColorSelected : void 0, resolvedIconColor = null !== (_a = null != selectedIconColor ? selectedIconColor : iconColor) && void 0 !== _a ? _a : disabled ? "var(--core-icon-disabled)" : "mixed" === state ? "var(--core-icon-primary)" : state ? "var(--core-text-special)" : "var(--core-icon-secondary)", resolvedTextColor = null != textColor ? textColor : disabled ? "var(--core-text-disabled)" : "var(--core-text-primary)", offset = Number.isFinite(textTopOffset) ? textTopOffset : 0, textShift = "top" === align ? Math.min(offset, 0) : "bottom" === align ? Math.max(offset, 0) : offset / 2, cssVars = {
+        "--cb-align": "top" === align ? "flex-start" : "bottom" === align ? "flex-end" : "center",
+        "--cb-icon-size": `${iconSize}px`,
+        "--cb-gap": `${gap}px`,
+        "--cb-text-color": resolvedTextColor,
+        "--cb-text-padding-top": `${Math.max(offset, 0)}px`,
+        "--cb-text-padding-bottom": `${Math.max(-offset, 0)}px`,
+        "--cb-text-shift": `${textShift}px`,
+        "--cb-cursor": disabled ? "default" : "pointer"
+    }, handleToggle = () => {
+        if (disabled) return;
+        const next = !0 !== state;
+        setState(next), null == onChange || onChange(next);
+    };
+    return jsxRuntime.jsxs("div", Object.assign({}, rest, {
+        className: `${css.wrapper}${className ? ` ${className}` : ""}`,
+        style: Object.assign(Object.assign({}, style), cssVars),
+        role: "checkbox",
+        "aria-checked": state,
+        "aria-disabled": disabled,
+        "aria-label": null != ariaLabel ? ariaLabel : ariaLabelledBy ? void 0 : label,
+        "aria-labelledby": null != ariaLabelledBy ? ariaLabelledBy : void 0 === ariaLabel && void 0 === label && hasContent ? contentId : void 0,
+        tabIndex: disabled ? -1 : tabIndex,
+        onClick: event => {
+            null == onClick || onClick(event), event.defaultPrevented || handleToggle();
+        },
+        onKeyDown: event => {
+            null == onKeyDown || onKeyDown(event), event.defaultPrevented || misc.accessibleKeyDown(event, handleToggle);
+        },
+        children: [ jsxRuntime.jsx("span", {
+            className: css.icon,
+            "aria-hidden": "true",
+            children: jsxRuntime.jsx(Icon.Icon, {
+                name: iconName,
+                strokeColor: resolvedIconColor,
+                size: iconSize,
+                pointer: !1,
+                tabIndex: -1
+            })
+        }), hasContent && jsxRuntime.jsx("span", {
+            id: contentId,
+            className: `${css.label} ${css[textSize]}`,
+            children: content
+        }) ]
+    }));
+});
+
+exports.CheckBox = CheckBox;

package/dist/cjs/chunks/Chip-DsZHDLKG.js

@@ -0,0 +1,203 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js"), misc = require("./misc-PmT7cZzC.js"), theme_corners = require("../theme/corners.js"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), usePrefersReducedMotion = require("./usePrefersReducedMotion-GpD17CAE.js"), Icon = require("./Icon-COY7IZkK.js"), sharedTypes = require("./sharedTypes-BDMIewR9.js"), css = {
+    chip: "Chip-module_chip__0nys-",
+    action: "Chip-module_action__-EHB0",
+    remove: "Chip-module_remove__PcFU2",
+    content: "Chip-module_content__1dG8p",
+    icon: "Chip-module_icon__dtR-K",
+    xs: "Chip-module_xs__s-KNG type-module_body-xs-regular__ZAFft",
+    s: "Chip-module_s__2KTXi type-module_body-s-regular__vRHSP",
+    m: "Chip-module_m__l2u3N type-module_body-m-regular__LuQBA",
+    l: "Chip-module_l__3MqPN type-module_body-l-regular__lOYbg",
+    xl: "Chip-module_xl__iJX-F type-module_body-xl-regular__pF2kC"
+};
+
+function ChipPresence({children: children}) {
+    return children(react.useIsPresent());
+}
+
+const Chip = React.memo(rawProps => {
+    var _a;
+    const props = resolveColorProps.resolveColorProps(rawProps), interactive = Boolean(props.onClick || props.onRemove), {onClick: onClick, onRemove: onRemove, removeLabel: removeLabel, selected: selected, textColorSelected: textColorSelected = "var(--core-text-special)", iconColorSelected: iconColorSelected = "var(--core-text-special)", backgroundColorSelected: backgroundColorSelected = "var(--core-surface-secondary)", borderColorSelected: borderColorSelected = "transparent", layout: layout = void 0 !== selected, transition: transition, children: children, label: label, icon: icon, tooltip: tooltip, iconSize: iconSize = 16, disabled: disabled = !1, iconPosition: iconPosition = "left", textSize: textSize = "m", textColor: textColor = "var(--core-text-primary)", textColorHover: textColorHover = (interactive ? "var(--core-text-special)" : textColor), iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = (interactive ? "var(--core-text-special)" : iconColor), backgroundColor: backgroundColor = "var(--core-fill-primary)", backgroundColorHover: backgroundColorHover = (interactive ? "var(--core-fill-primary)" : backgroundColor), borderWidth: borderWidth = 0, borderColor: borderColor = "var(--core-outline-primary)", borderColorHover: borderColorHover = (interactive ? "var(--core-text-special)" : borderColor), borderColorDisabled: borderColorDisabled = "var(--core-fill-primary)", borderRadius: borderRadius = theme_corners.corners["corner-l"], padding: padding, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, gap: gap = 4, onToolTip: onToolTip, className: className, style: style} = props, nativeAttributes = tslib_es6.__rest(props, [ "onClick", "onRemove", "removeLabel", "selected", "textColorSelected", "iconColorSelected", "backgroundColorSelected", "borderColorSelected", "layout", "transition", "children", "label", "icon", "tooltip", "iconSize", "disabled", "iconPosition", "textSize", "textColor", "textColorHover", "iconColor", "iconColorHover", "backgroundColor", "backgroundColorHover", "borderWidth", "borderColor", "borderColorHover", "borderColorDisabled", "borderRadius", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "gap", "onToolTip", "className", "style" ]), rootRef = React.useRef(null), reduceMotion = usePrefersReducedMotion.usePrefersReducedMotion(), [removed, setRemoved] = React.useState(!1), pendingRemoval = React.useRef(null), waterCurve = null === (_a = hooks_useTheme.useTheme().current.motion["motion-water"].match(/cubic-bezier\(([^)]+)\)/)) || void 0 === _a ? void 0 : _a[1].split(",").map(Number), waterEase = 4 === (null == waterCurve ? void 0 : waterCurve.length) && waterCurve.every(Number.isFinite) ? waterCurve : [ .36, 0, .64, 1 ], layoutTransition = reduceMotion ? {
+        duration: 0
+    } : null != transition ? transition : {
+        type: "tween",
+        duration: .15,
+        ease: waterEase
+    }, animateLayout = layout && !reduceMotion, hovered = React.useRef(!1), focused = React.useRef(!1), content = null != label ? label : children, hasContent = null != content && !1 !== content && "" !== content, compact = "xs" === textSize || "s" === textSize, vertical = compact ? "var(--spacing-xs)" : "var(--spacing-s)", horizontal = compact ? "var(--spacing-s)" : "var(--spacing-m)", iconSide = `calc(${horizontal} - var(--spacing-${compact ? "xxs" : "xs"}))`, iconOnly = Boolean(icon) && !hasContent, hasLeadingIcon = Boolean(icon) && ("left" === iconPosition || iconOnly), hasTrailingIcon = Boolean(onRemove) || Boolean(icon) && ("right" === iconPosition || iconOnly), paddingSides = {
+        paddingTop: void 0 === paddingTop ? void 0 : misc.setStyle(paddingTop),
+        paddingRight: void 0 === paddingRight ? void 0 : misc.setStyle(paddingRight),
+        paddingBottom: void 0 === paddingBottom ? void 0 : misc.setStyle(paddingBottom),
+        paddingLeft: void 0 === paddingLeft ? void 0 : misc.setStyle(paddingLeft)
+    }, stateColor = (normal, selectedColor, disabledColor = normal) => disabled ? disabledColor : selected ? selectedColor : normal, cssVars = {
+        "--ui-chip-padding": void 0 === padding ? void 0 : misc.setStyle(padding),
+        "--ui-chip-padding-top": vertical,
+        "--ui-chip-padding-right": hasTrailingIcon ? iconSide : horizontal,
+        "--ui-chip-padding-bottom": vertical,
+        "--ui-chip-padding-left": hasLeadingIcon ? iconSide : horizontal,
+        "--ui-chip-gap": `${gap}px`,
+        "--ui-chip-icon-size": `${iconSize}px`,
+        "--ui-chip-border-radius": misc.setStyle(borderRadius),
+        "--ui-chip-border-width": `${borderWidth}px`,
+        "--ui-chip-border-color": stateColor(borderColor, borderColorSelected, borderColorDisabled),
+        "--ui-chip-border-color-hover": stateColor(borderColorHover, borderColorSelected, borderColorDisabled),
+        "--ui-chip-bg-color": stateColor(backgroundColor, backgroundColorSelected),
+        "--ui-chip-bg-color-hover": stateColor(backgroundColorHover, backgroundColorSelected, backgroundColor),
+        "--ui-chip-text-color": stateColor(textColor, textColorSelected, "var(--core-text-disabled)"),
+        "--ui-chip-text-color-hover": stateColor(textColorHover, textColorSelected, "var(--core-text-disabled)"),
+        "--ui-chip-icon-color": stateColor(iconColor, iconColorSelected, "var(--core-text-disabled)"),
+        "--ui-chip-icon-color-hover": stateColor(iconColorHover, iconColorSelected, "var(--core-text-disabled)"),
+        "--ui-chip-cursor": disabled || !interactive ? "default" : "pointer"
+    }, iconContent = icon ? jsxRuntime.jsx("span", {
+        className: css.icon,
+        "aria-hidden": "true",
+        children: jsxRuntime.jsx(Icon.Icon, {
+            name: icon,
+            size: iconSize,
+            strokeColor: "currentColor",
+            pointer: !1,
+            tabIndex: -1
+        })
+    }) : null, contentNodes = jsxRuntime.jsxs(react.motion.span, {
+        className: css.content,
+        layout: !!animateLayout && "position",
+        transition: {
+            layout: layoutTransition
+        },
+        children: [ "left" === iconPosition && iconContent, hasContent && jsxRuntime.jsx("span", {
+            className: css[textSize],
+            children: content
+        }), "right" === iconPosition && iconContent ]
+    }), actionShared = {
+        className: css.action,
+        "aria-disabled": !!disabled || nativeAttributes["aria-disabled"],
+        style: Object.assign(Object.assign({}, paddingSides), {
+            paddingRight: onRemove ? void 0 : paddingSides.paddingRight
+        })
+    };
+    function handlers(attributes) {
+        const showTooltip = event => {
+            tooltip && (null == onToolTip || onToolTip({
+                type: sharedTypes.ToolTipType.button,
+                payload: {
+                    label: tooltip
+                },
+                ref: rootRef,
+                event: event
+            }));
+        };
+        return {
+            onClick: event => {
+                var _a;
+                disabled ? event.preventDefault() : (null === (_a = attributes.onClick) || void 0 === _a || _a.call(attributes, event), 
+                null == onToolTip || onToolTip(null));
+            },
+            onMouseEnter: event => {
+                var _a;
+                null === (_a = attributes.onMouseEnter) || void 0 === _a || _a.call(attributes, event), 
+                event.defaultPrevented || (hovered.current = !0, showTooltip(event));
+            },
+            onMouseLeave: event => {
+                var _a;
+                null === (_a = attributes.onMouseLeave) || void 0 === _a || _a.call(attributes, event), 
+                hovered.current = !1, focused.current || null == onToolTip || onToolTip(null);
+            },
+            onFocus: event => {
+                var _a;
+                null === (_a = attributes.onFocus) || void 0 === _a || _a.call(attributes, event), 
+                event.defaultPrevented || (focused.current = !0, showTooltip());
+            },
+            onBlur: event => {
+                var _a;
+                null === (_a = attributes.onBlur) || void 0 === _a || _a.call(attributes, event), 
+                focused.current = !1, hovered.current || null == onToolTip || onToolTip(null);
+            }
+        };
+    }
+    const primary = onClick ? (() => {
+        var _a;
+        const attributes = nativeAttributes;
+        return jsxRuntime.jsx("button", Object.assign({}, attributes, actionShared, handlers(Object.assign(Object.assign({}, attributes), {
+            onClick: onClick
+        })), {
+            type: null !== (_a = attributes.type) && void 0 !== _a ? _a : "button",
+            disabled: disabled,
+            "aria-pressed": selected,
+            children: contentNodes
+        }));
+    })() : (() => {
+        const attributes = nativeAttributes;
+        return jsxRuntime.jsx("span", Object.assign({}, attributes, actionShared, handlers(attributes), {
+            children: contentNodes
+        }));
+    })(), readableLabel = null != label ? label : "string" == typeof children || "number" == typeof children ? String(children) : void 0, removalName = null != removeLabel ? removeLabel : readableLabel ? `Remove ${readableLabel}` : "Remove chip";
+    return jsxRuntime.jsx(react.AnimatePresence, {
+        initial: !1,
+        onExitComplete: () => {
+            const notify = pendingRemoval.current;
+            pendingRemoval.current = null, null == notify || notify();
+        },
+        children: !removed && jsxRuntime.jsx(ChipPresence, {
+            children: isPresent => jsxRuntime.jsxs(react.motion.span, {
+                ref: rootRef,
+                className: `${css.chip}${className ? ` ${className}` : ""}`,
+                style: Object.assign(Object.assign({}, cssVars), style),
+                layout: animateLayout,
+                initial: !1,
+                animate: {
+                    opacity: 1,
+                    scale: 1
+                },
+                exit: reduceMotion ? {
+                    opacity: 1,
+                    scale: 1
+                } : {
+                    opacity: 0,
+                    scale: .9
+                },
+                transition: Object.assign(Object.assign({}, layoutTransition), {
+                    layout: layoutTransition
+                }),
+                inert: !isPresent,
+                "aria-hidden": !isPresent || void 0,
+                "data-selected": !0 === selected ? "true" : void 0,
+                "data-removable": onRemove ? "true" : void 0,
+                children: [ primary, onRemove && jsxRuntime.jsx("button", {
+                    className: css.remove,
+                    style: Object.assign(Object.assign({}, paddingSides), {
+                        paddingLeft: 0
+                    }),
+                    type: "button",
+                    "aria-label": removalName,
+                    disabled: disabled,
+                    onClick: event => {
+                        if (event.stopPropagation(), pendingRemoval.current) return;
+                        const removalEvent = Object.assign(Object.assign({}, event), {
+                            currentTarget: event.currentTarget
+                        });
+                        pendingRemoval.current = () => onRemove(removalEvent), setRemoved(!0), null == onToolTip || onToolTip(null);
+                    },
+                    children: jsxRuntime.jsx(react.motion.span, {
+                        layout: !!animateLayout && "position",
+                        transition: {
+                            layout: layoutTransition
+                        },
+                        className: css.icon,
+                        "aria-hidden": "true",
+                        children: jsxRuntime.jsx(Icon.Icon, {
+                            name: "basic.cross",
+                            size: iconSize,
+                            strokeColor: "currentColor",
+                            pointer: !1,
+                            tabIndex: -1
+                        })
+                    })
+                }) ]
+            })
+        }, "chip")
+    });
+});
+
+exports.Chip = Chip;

package/dist/cjs/chunks/ContentEditable-BaxU62Mg.js

@@ -0,0 +1,144 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-PmT7cZzC.js"), theme_corners = require("../theme/corners.js"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), css = {
+    input: "ContentEditable-module_input__fFaaA",
+    xs: "ContentEditable-module_xs__xo-26 type-module_body-xs-regular__ZAFft",
+    s: "ContentEditable-module_s__Pe-jp type-module_body-s-regular__vRHSP",
+    m: "ContentEditable-module_m__DbJgE type-module_body-m-regular__LuQBA",
+    l: "ContentEditable-module_l__zy7GY type-module_body-l-regular__lOYbg",
+    xl: "ContentEditable-module_xl__vdqCU type-module_body-xl-regular__pF2kC"
+};
+
+const useClientLayoutEffect = "undefined" == typeof window ? React.useEffect : React.useLayoutEffect, singleLine = text => text.replace(/[\r\n\t]+/g, " ");
+
+function selectText(element, all) {
+    const selection = element.ownerDocument.getSelection();
+    if (!selection) return;
+    const range = element.ownerDocument.createRange();
+    range.selectNodeContents(element), all || range.collapse(!1), selection.removeAllRanges(), 
+    selection.addRange(range);
+}
+
+function ContentEditableComponent(rawProps) {
+    const props = resolveColorProps.resolveColorProps(rawProps), {name: name = "Editable text", value: value, defaultValue: defaultValue = "", isEditable: isEditable = !1, selectOnEdit: selectOnEdit = !1, placeholder: placeholder = "Untitled", width: width = "auto", textAlign: textAlign = "left", textSize: textSize, textColor: textColor, textColorPlaceholder: textColorPlaceholder = "var(--core-text-tertiary)", clamp: clamp = 0, padding: padding = 0, borderRadius: borderRadius = theme_corners.corners["corner-xs"], backgroundColor: backgroundColor = "var(--core-surface-secondary)", onChange: onChange, onCommit: onCommit, onEditStart: onEditStart, onEditEnd: onEditEnd, onInput: onInput, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, onPaste: onPaste, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, tabIndex: tabIndex, className: className, style: style} = props, attributes = tslib_es6.__rest(props, [ "name", "value", "defaultValue", "isEditable", "selectOnEdit", "placeholder", "width", "textAlign", "textSize", "textColor", "textColorPlaceholder", "clamp", "padding", "borderRadius", "backgroundColor", "onChange", "onCommit", "onEditStart", "onEditEnd", "onInput", "onKeyDown", "onFocus", "onBlur", "onPaste", "onCompositionStart", "onCompositionEnd", "tabIndex", "className", "style" ]), controlled = void 0 !== value, [localValue, setLocalValue] = React.useState(defaultValue), committed = controlled ? null != value ? value : "" : localValue, firstText = React.useRef(committed), ref = React.useRef(null), session = React.useRef({
+        active: !1,
+        initial: committed
+    }), draftRef = React.useRef(committed), composing = React.useRef(!1), [draft, setDraft] = React.useState(committed), [isFocused, setIsFocused] = React.useState(!1), syncText = text => {
+        ref.current && ref.current.textContent !== text && (ref.current.textContent = text), 
+        draftRef.current = text, setDraft(text);
+    }, start = () => {
+        session.current.active || (session.current = {
+            active: !0,
+            initial: committed
+        }, syncText(committed));
+    }, publish = () => {
+        var _a;
+        if (!session.current.active || !ref.current) return;
+        const next = singleLine(null !== (_a = ref.current.textContent) && void 0 !== _a ? _a : "");
+        next !== draftRef.current && (draftRef.current = next, setDraft(next), null == onChange || onChange(next));
+    }, finish = (reason, blur = !0) => {
+        var _a, _b;
+        if (!session.current.active) return;
+        const previous = session.current.initial, next = singleLine(null !== (_b = null === (_a = ref.current) || void 0 === _a ? void 0 : _a.textContent) && void 0 !== _b ? _b : draftRef.current);
+        session.current.active = !1, composing.current = !1, "escape" === reason ? syncText(committed) : (draftRef.current = next, 
+        setDraft(next), controlled || setLocalValue(next));
+        try {
+            "escape" !== reason && next !== previous && (null == onCommit || onCommit(next, previous));
+        } finally {
+            null == onEditEnd || onEditEnd(reason);
+            const element = ref.current;
+            blur && element && element.ownerDocument.activeElement === element && element.blur();
+        }
+    };
+    useClientLayoutEffect(() => {
+        const element = ref.current;
+        if (element) if (isEditable) {
+            const selection = element.ownerDocument.getSelection();
+            let activationRange;
+            (null == selection ? void 0 : selection.rangeCount) && element.contains(selection.getRangeAt(0).commonAncestorContainer) && (activationRange = selection.getRangeAt(0).cloneRange()), 
+            start(), element.focus(), selectOnEdit || !element.textContent ? selectText(element, selectOnEdit) : selection && activationRange && element.contains(activationRange.commonAncestorContainer) ? (selection.removeAllRanges(), 
+            selection.addRange(activationRange)) : selectText(element, !1);
+        } else session.current.active && finish("external");
+    }, [ isEditable ]), useClientLayoutEffect(() => {
+        session.current.active || syncText(committed);
+    });
+    const cssVars = {
+        "--di-width": misc.setStyle(width),
+        "--di-padding": misc.setStyle(padding),
+        "--di-text-align": textAlign,
+        "--di-color": null != textColor ? textColor : "inherit",
+        "--di-placeholder-color": textColorPlaceholder,
+        "--di-background": isEditable ? backgroundColor : "transparent",
+        "--di-radius": misc.setStyle(borderRadius),
+        "--di-clamp": Number.isFinite(clamp) && clamp > 0 ? Math.floor(clamp) : "none"
+    };
+    return jsxRuntime.jsx("span", Object.assign({}, (attributes => Object.fromEntries(Object.entries(attributes).filter(([key]) => !key.startsWith("aria-") && "role" !== key)))(attributes), {
+        ref: ref,
+        className: `${css.input}${textSize ? ` ${css[textSize]}` : ""}${className ? ` ${className}` : ""}`,
+        style: Object.assign(Object.assign({}, style), cssVars),
+        contentEditable: isEditable,
+        suppressContentEditableWarning: !0,
+        role: isEditable ? "textbox" : void 0,
+        "aria-label": isEditable ? name.trim() || "Editable text" : void 0,
+        "aria-multiline": !isEditable && void 0,
+        tabIndex: null != tabIndex ? tabIndex : isEditable || onEditStart ? 0 : void 0,
+        "data-editable": isEditable || void 0,
+        "data-clamped": Number.isFinite(clamp) && clamp > 0 || void 0,
+        "data-focused": isFocused || void 0,
+        "data-empty": 0 === draft.length || void 0,
+        "data-placeholder": placeholder,
+        onInput: event => {
+            null == onInput || onInput(event), isEditable && publish();
+        },
+        onKeyDown: event => {
+            null == onKeyDown || onKeyDown(event), event.defaultPrevented || composing.current || event.nativeEvent.isComposing || 229 === event.nativeEvent.keyCode || (isEditable ? "Enter" === event.key ? (event.preventDefault(), 
+            event.stopPropagation(), finish("enter")) : "Escape" === event.key && (event.preventDefault(), 
+            event.stopPropagation(), finish("escape")) : !onEditStart || "Enter" !== event.key && "F2" !== event.key || (event.preventDefault(), 
+            onEditStart()));
+        },
+        onFocus: event => {
+            isEditable && !session.current.active && (start(), selectOnEdit && selectText(event.currentTarget, !0)), 
+            setIsFocused(!0), null == onFocus || onFocus(event);
+        },
+        onBlur: event => {
+            setIsFocused(!1), finish("blur", !1), null == onBlur || onBlur(event);
+        },
+        onPaste: event => {
+            null == onPaste || onPaste(event), !event.defaultPrevented && isEditable && (event.preventDefault(), 
+            (text => {
+                var _a, _b;
+                const element = ref.current;
+                if (!element || !session.current.active) return;
+                const document = element.ownerDocument, selection = document.getSelection();
+                if (!selection) return;
+                element.textContent && selection.rangeCount && element.contains(selection.getRangeAt(0).commonAncestorContainer) || selectText(element, !1);
+                let inserted = !1;
+                try {
+                    inserted = null !== (_b = null === (_a = document.execCommand) || void 0 === _a ? void 0 : _a.call(document, "insertText", !1, text)) && void 0 !== _b && _b;
+                } catch (_c) {}
+                if (!inserted && selection.rangeCount) {
+                    const range = selection.getRangeAt(0);
+                    range.deleteContents();
+                    const node = document.createTextNode(text);
+                    range.insertNode(node), range.setStartAfter(node), range.collapse(!0), selection.removeAllRanges(), 
+                    selection.addRange(range);
+                }
+                publish();
+            })(singleLine(event.clipboardData.getData("text/plain"))));
+        },
+        onCompositionStart: event => {
+            composing.current = !0, null == onCompositionStart || onCompositionStart(event);
+        },
+        onCompositionEnd: event => {
+            composing.current = !1, isEditable && publish(), null == onCompositionEnd || onCompositionEnd(event);
+        },
+        children: firstText.current
+    }));
+}
+
+ContentEditableComponent.displayName = "ContentEditable";
+
+const ContentEditable = React.memo(ContentEditableComponent);
+
+exports.ContentEditable = ContentEditable;

package/dist/cjs/chunks/DialogBox-C-ZvHDH6.js

@@ -0,0 +1,204 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useObserveResize = require("../hooks/useObserveResize.js"), misc = require("./misc-PmT7cZzC.js"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), Button = require("./Button-Cr5SlNim.js"), Icon = require("./Icon-COY7IZkK.js"), IconButton = require("./IconButton-KJr15EW6.js"), ModalHostContext = require("./ModalHostContext-DLgUa9Vl.js"), css = {
+    wrapper: "DialogBox-module_wrapper__wjjoL",
+    title: "DialogBox-module_title__--Kqh",
+    titleBlock: "DialogBox-module_titleBlock__IYvXQ",
+    titleIcon: "DialogBox-module_titleIcon__c1D62",
+    contentWrapper: "DialogBox-module_contentWrapper__joTiu scrollBars-module_scrollbars__c-ZPl",
+    content: "DialogBox-module_content__v-uwY",
+    actions: "DialogBox-module_actions__3cCCV",
+    leftActions: "DialogBox-module_leftActions__FdJuY",
+    rightActions: "DialogBox-module_rightActions__ITrsA",
+    xs: "DialogBox-module_xs__auub2 type-module_body-xs-medium__s3KvF",
+    s: "DialogBox-module_s__5wLg8 type-module_body-s-medium__tjdFc",
+    m: "DialogBox-module_m__vszaJ type-module_body-m-medium__uW1on",
+    l: "DialogBox-module_l__BdCML type-module_body-l-medium__BqRC7",
+    xl: "DialogBox-module_xl__BDrzK type-module_body-xl-medium__BeyrH",
+    close: "DialogBox-module_close__Xu-Dk",
+    heading: "DialogBox-module_heading__DRHIp"
+};
+
+function Title(_props) {
+    throw new Error("DialogBox.Title must be a direct child of DialogBox (fragments are supported).");
+}
+
+function Content(_props) {
+    throw new Error("DialogBox.Content must be a direct child of DialogBox (fragments are supported).");
+}
+
+function Actions(_props) {
+    throw new Error("DialogBox.Actions must be a direct child of DialogBox (fragments are supported).");
+}
+
+Title.displayName = "DialogBox.Title", Content.displayName = "DialogBox.Content", 
+Actions.displayName = "DialogBox.Actions";
+
+const sections = {
+    Title: Title,
+    Content: Content,
+    Actions: Actions
+};
+
+const DialogBoxContext = React.createContext(null);
+
+/** Use inside a descendant of DialogBox. Match T to the parent's action value type. */ const DialogBox = Object.assign(React.memo(rawProps => {
+    const props = resolveColorProps.resolveColorProps(rawProps), {children: children, id: id, className: className, style: style, minWidth: minWidth, minHeight: minHeight = "unset", maxHeight: maxHeight = 400, maxWidth: maxWidth = 400, padding: padding, close: close = !0, title: title, dialogName: dialogName, titleBackgroundColor: titleBackgroundColor, titleTextSize: titleTextSize = "l", contentTextSize: contentTextSize = "m", actions: actions, actionsBackgroundColor: actionsBackgroundColor, titleIcon: titleIcon, titleIconFill: titleIconFill = !0, titleBorderColor: titleBorderColor = "var(--core-fill-primary)", titleBorderWidth: titleBorderWidth, actionsBorderColor: actionsBorderColor = "var(--core-fill-primary)", actionsBorderWidth: actionsBorderWidth = 0, autoBorderBottom: autoBorderBottom = !0, onAction: onAction, onReject: onReject, onResolve: onResolve, onClose: onClose, onToolTip: onToolTip, onDragPointerDown: onDragPointerDown, backgroundColor: backgroundColor = "var(--core-surface-secondary)", scrollHandleColor: scrollHandleColor = "var(--core-text-disabled)", scrollHandleColorHover: scrollHandleColorHover = "var(--core-text-disabled)", titleTextColor: titleTextColor = "var(--core-text-primary)", borderColor: borderColor = "var(--core-outline-primary)", borderRadius: borderRadius = "var(--corner-xl)", borderWidth: borderWidth = 0} = props, rest = tslib_es6.__rest(props, [ "children", "id", "className", "style", "minWidth", "minHeight", "maxHeight", "maxWidth", "padding", "close", "title", "dialogName", "titleBackgroundColor", "titleTextSize", "contentTextSize", "actions", "actionsBackgroundColor", "titleIcon", "titleIconFill", "titleBorderColor", "titleBorderWidth", "actionsBorderColor", "actionsBorderWidth", "autoBorderBottom", "onAction", "onReject", "onResolve", "onClose", "onToolTip", "onDragPointerDown", "backgroundColor", "scrollHandleColor", "scrollHandleColorHover", "titleTextColor", "borderColor", "borderRadius", "borderWidth" ]), slots = function(children, title, actions) {
+        const found = new Map;
+        let unsupported = !1;
+        const visit = nodes => React.Children.forEach(nodes, child => {
+            if (null == child || "boolean" == typeof child || "string" == typeof child && "" === child.trim()) return;
+            if (React.isValidElement(child) && child.type === React.Fragment) return void visit(child.props.children);
+            let slot;
+            if (React.isValidElement(child) && (child.type === sections.Title && (slot = "title"), 
+            child.type === sections.Content && (slot = "content"), child.type === sections.Actions && (slot = "actions"), 
+            slot)) {
+                if (found.has(slot)) throw new Error(`DialogBox accepts only one ${slot} section.`);
+                found.set(slot, child.props.children);
+            } else unsupported = !0;
+        });
+        visit(children);
+        const composed = found.size > 0;
+        if (composed && unsupported) throw new Error("DialogBox composition accepts only DialogBox.Title, DialogBox.Content, and DialogBox.Actions as direct children. Place body content inside DialogBox.Content.");
+        if (found.has("title") && void 0 !== title) throw new Error("Use either title or DialogBox.Title, not both.");
+        if (found.has("actions") && void 0 !== actions) throw new Error("Use either actions or DialogBox.Actions, not both.");
+        return {
+            title: found.has("title") ? found.get("title") : title,
+            content: composed ? found.get("content") : children,
+            actions: found.get("actions"),
+            hasActions: found.has("actions")
+        };
+    }(children, title, actions), hasTitle = React.Children.toArray(slots.title).some(child => "string" != typeof child || child.trim().length > 0), accessibleName = null == dialogName ? void 0 : dialogName.trim(), controls = React.useMemo(() => ({
+        close: () => null == onClose ? void 0 : onClose(),
+        resolve: value => null == onResolve ? void 0 : onResolve(value),
+        reject: error => null == onReject ? void 0 : onReject(error)
+    }), [ onClose, onResolve, onReject ]), titleId = React.useId(), modalHost = React.useContext(ModalHostContext.ModalHostContext), contentRef = React.useRef(null), contentWrapperRef = React.useRef(null), modalStyle = null != style ? style : {}, modalClass = className ? ` ${className}` : "", contentSize = hooks_useObserveResize.useObserveResize(contentRef), viewportSize = hooks_useObserveResize.useObserveResize(contentWrapperRef), scrolls = contentSize.height > viewportSize.height, resolvedTitleBorderWidth = null != titleBorderWidth ? titleBorderWidth : scrolls ? 1 : 0, titlePaddingBottom = scrolls ? "var(--spacing-xs)" : "0px", setActionBorderWidth = React.useMemo(() => scrolls && 0 === actionsBorderWidth && autoBorderBottom ? "1px" : misc.setStyle(actionsBorderWidth), [ actionsBorderWidth, scrolls, autoBorderBottom ]), setPaddingAdjustment = React.useMemo(() => scrolls ? padding && "number" == typeof padding ? misc.setStyle(padding) : padding && "string" == typeof padding ? padding.split(" ")[0] : "var(--spacing-s)" : "0px", [ scrolls, padding ]), cssVars = React.useMemo(() => ({
+        "--modal-min-width": misc.setStyle(minWidth, "min(300px, 100%)"),
+        "--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": titleTextColor,
+        "--modal-border-radius": misc.setStyle(borderRadius),
+        "--modal-border-width": misc.setStyle(borderWidth),
+        "--modal-padding": misc.setStyle(padding, "var(--spacing-m) var(--spacing-m)"),
+        "--modal-title-padding": misc.setStyle(padding, `var(--spacing-m) var(--spacing-m) ${titlePaddingBottom}`),
+        "--modal-padding-adjust": setPaddingAdjustment,
+        "--modal-content-margin-top": scrolls ? "var(--spacing-xxs)" : "0px",
+        "--modal-background-color": backgroundColor,
+        "--modal-title-border-color": titleBorderColor,
+        "--modal-title-border-width": misc.setStyle(resolvedTitleBorderWidth),
+        "--modal-title-background-color": null != titleBackgroundColor ? titleBackgroundColor : backgroundColor,
+        "--modal-actions-background-color": null != actionsBackgroundColor ? actionsBackgroundColor : backgroundColor,
+        "--modal-actions-border-color": actionsBorderColor,
+        "--modal-scroll-handle": misc.setStyle(scrollHandleColor),
+        "--modal-scroll-handle-hover": misc.setStyle(scrollHandleColorHover),
+        "--modal-actions-border-width": setActionBorderWidth
+    }), [ minWidth, minHeight, maxHeight, maxWidth, borderColor, titleTextColor, borderRadius, borderWidth, padding, setPaddingAdjustment, scrolls, titlePaddingBottom, resolvedTitleBorderWidth, titleBorderColor, actionsBorderColor, actionsBackgroundColor, titleBackgroundColor, backgroundColor, scrollHandleColor, scrollHandleColorHover, setActionBorderWidth ]), handleClose = controls.close, renderActions = position => null == actions ? void 0 : actions.map(action => action.position || "left" !== position ? action.position && position !== action.position ? null : jsxRuntime.jsx(Button.Button, {
+        variant: action.primary ? "solid" : "outline",
+        label: action.label,
+        "aria-label": action.label || action.tooltip || "Action",
+        onClick: () => (action => {
+            if (action.disabled || action.working) return;
+            const resolves = !action.promise || "resolve" === action.promise, rejects = "reject" === action.promise;
+            try {
+                null == onAction || onAction(action.value);
+            } finally {
+                resolves && (null == onResolve || onResolve(action.value)), rejects && (null == onReject || onReject(new Error("DialogBox rejected", {
+                    cause: action.value
+                })));
+            }
+        })(action),
+        disabled: action.disabled,
+        working: action.working,
+        round: !0 === action.round,
+        iconLeft: action.iconLeft,
+        iconRight: action.iconRight,
+        tooltip: action.tooltip,
+        onToolTip: tip => null == onToolTip ? void 0 : onToolTip(tip)
+    }, action.id) : null);
+    return jsxRuntime.jsx(DialogBoxContext.Provider, {
+        value: controls,
+        children: jsxRuntime.jsxs("div", Object.assign({}, Object.fromEntries(Object.entries(rest).filter(([key]) => !key.startsWith("aria-") && "role" !== key)), {
+            id: id,
+            className: `${css.wrapper}${modalClass}`,
+            style: Object.assign(Object.assign({}, modalStyle), cssVars),
+            role: "dialog",
+            "aria-modal": modalHost || void 0,
+            "aria-labelledby": !accessibleName && hasTitle ? titleId : void 0,
+            "aria-label": accessibleName || (hasTitle ? void 0 : "Dialog"),
+            tabIndex: -1,
+            children: [ (hasTitle || close) && jsxRuntime.jsxs("div", {
+                className: `${css.title} ${css[titleTextSize]}`,
+                onPointerDown: event => {
+                    event.target.closest('button, a, input, select, textarea, [contenteditable="true"]') || null == onDragPointerDown || onDragPointerDown(event);
+                },
+                children: [ jsxRuntime.jsxs("div", {
+                    className: css.titleBlock,
+                    children: [ titleIcon && jsxRuntime.jsx("div", {
+                        className: css.titleIcon,
+                        "aria-hidden": "true",
+                        children: jsxRuntime.jsx(Icon.Icon, {
+                            name: titleIcon,
+                            fill: titleIconFill,
+                            size: 20
+                        })
+                    }), hasTitle && jsxRuntime.jsx("h2", {
+                        id: titleId,
+                        className: css.heading,
+                        children: slots.title
+                    }) ]
+                }), close && jsxRuntime.jsx("div", {
+                    className: css.close,
+                    children: jsxRuntime.jsx("div", {
+                        className: css.titleIcon,
+                        children: jsxRuntime.jsx(IconButton.IconButton, {
+                            tooltip: "close",
+                            actionName: "close",
+                            icon: "basic.cross",
+                            onClick: handleClose,
+                            onToolTip: tip => null == onToolTip ? void 0 : onToolTip(tip),
+                            hover: !1,
+                            backgroundColor: "transparent",
+                            backgroundColorHover: "transparent",
+                            backgroundColorSelected: "transparent",
+                            buttonSize: "s"
+                        })
+                    })
+                }) ]
+            }), jsxRuntime.jsx("div", {
+                className: css.contentWrapper,
+                ref: contentWrapperRef,
+                children: jsxRuntime.jsx("div", {
+                    ref: contentRef,
+                    className: `${css.content} ${css[contentTextSize]}`,
+                    children: slots.content
+                })
+            }), (slots.hasActions || actions && actions.length > 0) && jsxRuntime.jsx("div", {
+                className: css.actions,
+                onPointerDown: event => {
+                    event.target.closest('button, a, input, select, textarea, [contenteditable="true"]') || null == onDragPointerDown || onDragPointerDown(event);
+                },
+                children: slots.hasActions ? jsxRuntime.jsx("div", {
+                    className: css.rightActions,
+                    children: slots.actions
+                }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                    children: [ jsxRuntime.jsx("div", {
+                        className: css.leftActions,
+                        children: renderActions("left")
+                    }), jsxRuntime.jsx("div", {
+                        className: css.rightActions,
+                        children: renderActions("right")
+                    }) ]
+                })
+            }) ]
+        }))
+    });
+}), sections);
+
+exports.DialogBox = DialogBox, exports.useDialogBox = function() {
+    const context = React.useContext(DialogBoxContext);
+    if (!context) throw new Error("useDialogBox must be used inside DialogBox.");
+    return context;
+};