@apple-pie/slice 0.1.60 → 0.2.0

package/dist/esm/chunks/TextField-BXrN1QkD.mjs

@@ -0,0 +1,344 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+import { AnimatePresence, usePresence, usePresenceData, useAnimationControls, motion } from "motion/react";
+
+import React, { useId, useRef, useState, useMemo, useEffect, useLayoutEffect } from "react";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import "../theme/colors.mjs";
+
+import "../theme/type.mjs";
+
+import "./resolveColor-Kvs7kDyy.mjs";
+
+import "./breakpoints-Dn9DgpJe.mjs";
+
+import { s as setStyle } from "./misc-DI5GSqkt.mjs";
+
+import "./broadcastChannel-CPT0S33H.mjs";
+
+import "./files-6nwSZlJK.mjs";
+
+import "./webRTCStore-BepH2O9l.mjs";
+
+import "./microphoneStore-BzSEbtfK.mjs";
+
+import "./volumeStore-mqWIRL0J.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { g as getWaterTransition } from "./getWaterTransition-CrDSFJdk.mjs";
+
+import { t as typeCss } from "./type.module--fVZ2ic7.mjs";
+
+import { u as usePrefersReducedMotion } from "./usePrefersReducedMotion-BWAwMMLE.mjs";
+
+import { B as Button } from "./Button-BwTo8mSI.mjs";
+
+import { I as Icon } from "./Icon-43T0fkr6.mjs";
+
+import { I as IconButton } from "./IconButton-oqYTUJit.mjs";
+
+var css = {
+    field: "TextField-module_field__2fv4g",
+    message: "TextField-module_message__O6FPe",
+    wrapper: "TextField-module_wrapper__qZ-p-",
+    container: "TextField-module_container__5U9yK",
+    label: "TextField-module_label__jD8MR",
+    input: "TextField-module_input__AkWBQ",
+    leadingIcon: "TextField-module_leadingIcon__PK1q-",
+    showPassword: "TextField-module_showPassword__4Ecfo",
+    clearButton: "TextField-module_clearButton__O9ed3",
+    action: "TextField-module_action__73kLf",
+    xs: "TextField-module_xs__vyt2t type-module_body-xs-regular__ZAFft",
+    s: "TextField-module_s__0qm83 type-module_body-s-regular__vRHSP",
+    m: "TextField-module_m__M-tLl type-module_body-m-regular__LuQBA",
+    l: "TextField-module_l__gbNRz type-module_body-l-regular__lOYbg",
+    xl: "TextField-module_xl__tp--W type-module_body-xl-regular__pF2kC",
+    textColumn: "TextField-module_textColumn__tRLYT",
+    labelSlot: "TextField-module_labelSlot__0ZwGi",
+    separator: "TextField-module_separator__jgs61"
+};
+
+const withoutAria = attributes => Object.fromEntries(Object.entries(attributes).filter(([key]) => !key.startsWith("aria-") && "role" !== key)), useClientLayoutEffect = "undefined" == typeof window ? useEffect : useLayoutEffect, defaultClearButton = {
+    size: 20
+};
+
+function ActionFrame({children: children, settings: settings}) {
+    const [present, safeToRemove] = usePresence(), presenceSettings = usePresenceData(), live = present ? settings : null != presenceSettings ? presenceSettings : settings, controls = useAnimationControls();
+    return useEffect(() => {
+        if (live.reduced) return controls.set({
+            opacity: present ? 1 : 0
+        }), void (present || null == safeToRemove || safeToRemove());
+        let active = !0;
+        return controls.start({
+            opacity: present ? 1 : 0,
+            transition: live.transition
+        }).then(() => {
+            active && !present && (null == safeToRemove || safeToRemove());
+        }), () => {
+            active = !1, controls.stop();
+        };
+    }, [ controls, live.reduced, live.transition, present, safeToRemove ]), jsx(motion.div, {
+        className: css.action,
+        initial: {
+            opacity: live.reduced ? 1 : 0
+        },
+        animate: controls,
+        inert: !present,
+        "aria-hidden": !present || void 0,
+        children: children
+    });
+}
+
+function TextFieldComponent(rawProps) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const props = resolveColorProps(rawProps), theme = useTheme(), reduced = usePrefersReducedMotion(), {name: name, inputName: inputName, inputId: inputId, inputAttributes: inputAttributes = {}, value: value, defaultValue: defaultValue = "", label: label, variant: variant = "simple", behavior: behavior = "persistent", stackedGap: stackedGap = 2, labelBackgroundColor: labelBackgroundColor = "var(--core-surface-primary)", stackedLabelTextSize: stackedLabelTextSize = "body-xs-regular", labelSize: labelSize = "m", textSize: textSize = "m", placeholder: placeholder = "placeholder", focused: focused, onSubmit: onSubmit, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onAction: onAction, onPaste: onPaste, onClear: onClear, actionButton: actionButton = !1, actionLabel: actionLabel = "Action", maxLength: maxLength, width: width = "100%", height: height = "auto", padding: padding, borderRadius: borderRadius, readOnly: readOnly = !1, textAlign: textAlign = "left", inline: inline = !1, showPasswordToggle: showPasswordToggle = !0, borderStyle: borderStyle = "box", error: error = !1, errorMessage: errorMessage, tip: tip, borderColorFocused: borderColorFocused = "var(--core-link-primary)", borderColorBlurred: borderColorBlurred = "var(--core-outline-primary)", borderColorError: borderColorError = "var(--feedback-warning)", backgroundColorFocused: backgroundColorFocused, backgroundColorBlurred: backgroundColorBlurred, textColorFocused: textColorFocused = "var(--core-text-primary)", textColorBlurred: textColorBlurred = "var(--core-text-primary)", textColorError: textColorError = "var(--feedback-warning)", textColorPlaceholder: textColorPlaceholder = "var(--core-text-disabled)", textColorDisabled: textColorDisabled = "var(--core-text-disabled)", labelColor: labelColor = "var(--core-text-primary)", iconLeft: iconLeft, clearButton: clearButton = defaultClearButton, clearBlurs: clearBlurs = !1, disabled: disabled = !1, inputType: inputType = "text", transition: transition, className: className, style: style} = props, divAttributes = __rest(props, [ "name", "inputName", "inputId", "inputAttributes", "value", "defaultValue", "label", "variant", "behavior", "stackedGap", "labelBackgroundColor", "stackedLabelTextSize", "labelSize", "textSize", "placeholder", "focused", "onSubmit", "onChange", "onBlur", "onFocus", "onKeyDown", "onAction", "onPaste", "onClear", "actionButton", "actionLabel", "maxLength", "width", "height", "padding", "borderRadius", "readOnly", "textAlign", "inline", "showPasswordToggle", "borderStyle", "error", "errorMessage", "tip", "borderColorFocused", "borderColorBlurred", "borderColorError", "backgroundColorFocused", "backgroundColorBlurred", "textColorFocused", "textColorBlurred", "textColorError", "textColorPlaceholder", "textColorDisabled", "labelColor", "iconLeft", "clearButton", "clearBlurs", "disabled", "inputType", "transition", "className", "style" ]), generatedId = useId(), id = inputId || generatedId, hasLabel = Boolean(null == label ? void 0 : label.trim()), accessibleName = (() => {
+        const customName = null == inputName ? void 0 : inputName.trim();
+        return customName || (hasLabel ? void 0 : (null == name ? void 0 : name.trim()) || "Text input");
+    })(), message = null === (_a = error ? errorMessage : tip) || void 0 === _a ? void 0 : _a.trim(), messageId = `${id}-message`, input = useRef(null), column = useRef(null);
+    useClientLayoutEffect(() => {
+        if (!message || !input.current) return;
+        const wrapper = input.current.closest("[data-variant]"), field = null == wrapper ? void 0 : wrapper.parentElement;
+        if (!wrapper || !field) return;
+        const measure = () => {
+            const padding = getComputedStyle(wrapper);
+            field.style.setProperty("--tf-message-left", padding.paddingLeft), field.style.setProperty("--tf-message-right", padding.paddingRight);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        return observer.observe(wrapper), () => {
+            observer.disconnect(), field.style.removeProperty("--tf-message-left"), field.style.removeProperty("--tf-message-right");
+        };
+    }, [ message, variant, iconLeft, padding, width, inputType, showPasswordToggle, clearButton, actionButton ]);
+    const initialValue = useRef(defaultValue), [localText, setLocalText] = useState(defaultValue), controlled = void 0 !== value, text = controlled ? value : localText, [isFocused, setIsFocused] = useState(!1), [show, setShow] = useState(!1), canEdit = !disabled && !readOnly, canPreviewPassword = !disabled && text.length > 0, appearing = "stacked" === variant && "appear" === behavior && !reduced && hasLabel, collapsedLabel = appearing && 0 === text.length;
+    useClientLayoutEffect(() => {
+        if ("outlined" !== variant || !hasLabel || !column.current) return;
+        const element = column.current, label = element.querySelector("label"), wrapper = element.closest("[data-variant]"), measure = () => {
+            label && wrapper && wrapper.style.setProperty("--tf-label-font-size", getComputedStyle(label).fontSize), 
+            element.style.setProperty("--tf-column-top", `${element.offsetTop}px`);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        return observer.observe(element), label && observer.observe(label), element.offsetParent && observer.observe(element.offsetParent), 
+        () => {
+            observer.disconnect(), element.style.removeProperty("--tf-column-top"), null == wrapper || wrapper.style.removeProperty("--tf-label-font-size");
+        };
+    }, [ variant, hasLabel, padding, width, height, null == iconLeft ? void 0 : iconLeft.size, labelSize, stackedLabelTextSize ]), 
+    useClientLayoutEffect(() => {
+        if ("stacked" !== variant || !hasLabel || !column.current) return;
+        const slot = column.current.firstElementChild, container = column.current.parentElement;
+        if (!(slot instanceof HTMLElement && container)) return;
+        const measure = () => {
+            const style = getComputedStyle(slot), labelHeight = Number.parseFloat(style.height) || 0, gap = Number.parseFloat(style.marginBottom) || 0;
+            container.style.setProperty("--tf-label-space", `${labelHeight + gap}px`);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        return observer.observe(slot), () => {
+            observer.disconnect(), container.style.removeProperty("--tf-label-space");
+        };
+    }, [ variant, hasLabel, stackedGap, stackedLabelTextSize ]);
+    const timing = useMemo(() => getWaterTransition(theme.current.motion, transition), [ theme.current.motion, transition ]), actionMotion = useMemo(() => ({
+        reduced: reduced,
+        transition: timing
+    }), [ reduced, timing ]);
+    useEffect(() => {
+        var _a, _b;
+        disabled ? setIsFocused(!1) : void 0 !== focused && (focused ? null === (_a = input.current) || void 0 === _a || _a.focus() : null === (_b = input.current) || void 0 === _b || _b.blur());
+    }, [ focused, disabled ]), useEffect(() => {
+        "password" !== inputType && setShow(!1);
+    }, [ inputType ]), useEffect(() => {
+        var _a;
+        if (controlled) return;
+        const form = null === (_a = input.current) || void 0 === _a ? void 0 : _a.form;
+        if (!form) return;
+        let mounted = !0;
+        const reset = event => queueMicrotask(() => {
+            mounted && !event.defaultPrevented && setLocalText(initialValue.current);
+        });
+        return form.addEventListener("reset", reset), () => {
+            mounted = !1, form.removeEventListener("reset", reset);
+        };
+    }, [ controlled, inputAttributes.form ]);
+    const changeText = next => {
+        canEdit && (controlled || setLocalText(next), null == onChange || onChange(next));
+    }, iconInset = "calc(var(--spacing-m) - var(--spacing-xs))", trailingIcon = "password" === inputType && showPasswordToggle || !actionButton && clearButton, cssVars = {
+        "--tf-width": setStyle(width),
+        "--tf-height": setStyle(height),
+        "--tf-padding": (() => {
+            if (null != padding) return setStyle(padding);
+            if ("outlined" === variant) return "calc(var(--spacing-s) + var(--tf-label-font-size, 0px) / 2) var(--spacing-m)";
+            return `var(--spacing-s) ${trailingIcon ? iconInset : "var(--spacing-m)"} var(--spacing-s) ${iconLeft ? iconInset : "var(--spacing-m)"}`;
+        })(),
+        "--tf-border-radius": setStyle(borderRadius, "underline" === borderStyle ? 0 : 8),
+        "--tf-bg-color": (() => {
+            if (inline) return "transparent";
+            const fallback = "underline" === borderStyle ? "transparent" : "var(--core-surface-secondary)";
+            return isFocused ? null != backgroundColorFocused ? backgroundColorFocused : fallback : null != backgroundColorBlurred ? backgroundColorBlurred : fallback;
+        })(),
+        "--tf-box-shadow": (() => {
+            if ("none" === borderStyle) return "none";
+            const borderColor = error ? borderColorError : isFocused ? borderColorFocused : borderColorBlurred;
+            return "underline" === borderStyle ? `0 1px 0 0 ${borderColor}` : `0 0 0 1px ${borderColor}`;
+        })(),
+        "--tf-text-color": disabled ? textColorDisabled : isFocused ? textColorFocused : textColorBlurred,
+        "--tf-label-color": disabled ? textColorDisabled : labelColor,
+        "--tf-text-align": textAlign,
+        "--tf-placeholder-color": textColorPlaceholder,
+        "--tf-field-size": "auto" === width ? "content" : "fixed",
+        "--tf-input-width": "auto" === width ? "auto" : "100%",
+        "--tf-clear-size": setStyle(null !== (_b = null == clearButton ? void 0 : clearButton.size) && void 0 !== _b ? _b : 20),
+        "--tf-icon-size": setStyle(null !== (_c = null == iconLeft ? void 0 : iconLeft.size) && void 0 !== _c ? _c : 20),
+        "--tf-stacked-gap": setStyle(Number.isFinite(stackedGap) ? Math.max(0, stackedGap) : 2),
+        "--tf-label-background": labelBackgroundColor
+    }, leadingIcon = iconLeft ? jsx("span", {
+        className: css.leadingIcon,
+        "aria-hidden": "true",
+        children: jsx(Icon, {
+            name: iconLeft.name,
+            size: null !== (_d = iconLeft.size) && void 0 !== _d ? _d : 20,
+            strokeColor: null !== (_e = iconLeft.color) && void 0 !== _e ? _e : theme.current.colors["core-icon-secondary"]
+        })
+    }) : null;
+    return jsxs("div", {
+        className: css.field,
+        style: {
+            width: setStyle(width)
+        },
+        children: [ jsxs("div", Object.assign({}, withoutAria(divAttributes), {
+            "data-variant": variant,
+            "data-appear": appearing || void 0,
+            "data-collapsed-label": collapsedLabel || void 0,
+            className: `${css.wrapper}${className ? ` ${className}` : ""}`,
+            style: Object.assign(Object.assign(Object.assign({}, style), cssVars), {
+                "--tf-width": "100%"
+            }),
+            children: [ "simple" === variant && leadingIcon, hasLabel && "simple" === variant && jsx("label", {
+                className: `${css.label} ${css[labelSize]}`,
+                htmlFor: id,
+                children: label
+            }), hasLabel && "simple" === variant && jsx("span", {
+                className: `${css.separator} ${css[labelSize]}`,
+                "aria-hidden": "true",
+                children: "|"
+            }), jsxs("div", {
+                className: css.container,
+                children: [ "simple" !== variant && leadingIcon, jsxs("div", {
+                    ref: column,
+                    className: css.textColumn,
+                    children: [ hasLabel && "simple" !== variant && jsx("div", {
+                        className: css.labelSlot,
+                        children: jsx("label", {
+                            className: `${css.label} ${null !== (_f = typeCss[stackedLabelTextSize]) && void 0 !== _f ? _f : typeCss["body-xs-regular"]}`,
+                            htmlFor: id,
+                            children: label
+                        })
+                    }), jsx("input", Object.assign({}, withoutAria(inputAttributes), {
+                        id: id,
+                        className: `${css.input} ${css[textSize]}`,
+                        ref: input,
+                        type: "password" === inputType && show ? "text" : inputType,
+                        name: name,
+                        "aria-label": accessibleName,
+                        "aria-invalid": error || void 0,
+                        "aria-describedby": message ? messageId : void 0,
+                        autoCapitalize: null !== (_g = inputAttributes.autoCapitalize) && void 0 !== _g ? _g : "none",
+                        autoCorrect: null !== (_h = inputAttributes.autoCorrect) && void 0 !== _h ? _h : "off",
+                        value: text,
+                        onChange: event => changeText(event.target.value),
+                        placeholder: collapsedLabel ? label : placeholder,
+                        maxLength: maxLength,
+                        disabled: disabled,
+                        readOnly: readOnly,
+                        onFocus: event => {
+                            setIsFocused(!0), null == onFocus || onFocus(event.currentTarget.value);
+                        },
+                        onBlur: event => {
+                            setIsFocused(!1), null == onBlur || onBlur(event.currentTarget.value);
+                        },
+                        onPaste: event => {
+                            canEdit && (null == onPaste || onPaste(event));
+                        },
+                        onMouseDown: event => {
+                            var _a;
+                            null === (_a = inputAttributes.onMouseDown) || void 0 === _a || _a.call(inputAttributes, event), 
+                            event.stopPropagation();
+                        },
+                        onKeyDown: event => {
+                            disabled || (null == onKeyDown || onKeyDown(event), event.defaultPrevented || readOnly || "Enter" !== event.key || event.nativeEvent.isComposing || 229 === event.nativeEvent.keyCode || onSubmit && (event.preventDefault(), 
+                            onSubmit(event.currentTarget.value), event.currentTarget.blur()));
+                        }
+                    })) ]
+                }), clearButton && jsx("button", {
+                    type: "button",
+                    "aria-label": "Clear text",
+                    className: css.clearButton,
+                    "data-has-value": "" !== text || void 0,
+                    disabled: !canEdit || "" === text,
+                    onMouseDown: event => {
+                        clearBlurs || event.preventDefault();
+                    },
+                    onClick: () => {
+                        var _a, _b;
+                        canEdit && "" !== text && (changeText(""), null == onClear || onClear(), clearBlurs ? null === (_a = input.current) || void 0 === _a || _a.blur() : null === (_b = input.current) || void 0 === _b || _b.focus());
+                    },
+                    children: jsx(Icon, {
+                        "aria-hidden": "true",
+                        name: "basic.cross",
+                        size: null !== (_j = clearButton.size) && void 0 !== _j ? _j : 20,
+                        strokeColor: theme.current.colors["core-icon-secondary"]
+                    })
+                }), jsx(AnimatePresence, {
+                    initial: !1,
+                    custom: actionMotion,
+                    children: actionButton && jsx(ActionFrame, {
+                        settings: actionMotion,
+                        children: jsx(Button, {
+                            label: actionLabel.trim() || "Action",
+                            variant: "text",
+                            buttonSize: "s",
+                            state: canEdit && "" !== text ? "normal" : "disabled",
+                            textColor: theme.current.colors["core-button-primary"],
+                            onClick: () => {
+                                canEdit && "" !== text && (null == onAction || onAction());
+                            }
+                        })
+                    }, "action")
+                }), "password" === inputType && showPasswordToggle && jsx("div", {
+                    className: css.showPassword,
+                    children: jsx(IconButton, {
+                        actionName: show ? "Hide password" : "Show password",
+                        icon: show ? "security.eye-slash" : "security.eye",
+                        toggle: !0,
+                        selected: show,
+                        iconSize: 18,
+                        buttonSize: 18,
+                        disabled: !canPreviewPassword,
+                        onClick: () => {
+                            canPreviewPassword && setShow(previous => !previous);
+                        }
+                    })
+                }) ]
+            }) ]
+        })), message && jsx("div", {
+            id: messageId,
+            className: `${css.message} ${typeCss["body-xs-regular"]}`,
+            "data-error": error || void 0,
+            style: {
+                color: error ? textColorError : "var(--core-text-tertiary)"
+            },
+            children: message
+        }) ]
+    });
+}
+
+TextFieldComponent.displayName = "TextField";
+
+const TextField = React.memo(TextFieldComponent);
+
+export { TextField as T };

package/dist/esm/chunks/Tip-4R9wW1mE.mjs

@@ -0,0 +1,133 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsx } from "react/jsx-runtime";
+
+import { useAnimationControls, motion } from "motion/react";
+
+import React, { useState, useRef, useCallback, useEffect, useId, useMemo } from "react";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import { m as mergedPresenceMotionValues, a as classNames, s as setStyle } from "./misc-DI5GSqkt.mjs";
+
+import { corners } from "../theme/corners.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { g as getWaterTransition } from "./getWaterTransition-CrDSFJdk.mjs";
+
+import { u as usePrefersReducedMotion } from "./usePrefersReducedMotion-BWAwMMLE.mjs";
+
+var css = {
+    wrapper: "Tip-module_wrapper__D7ACT flexBox-module_rowStart__4tcxS",
+    xs: "Tip-module_xs__wsz9y type-module_body-xs-regular__ZAFft",
+    s: "Tip-module_s__Wvz3q type-module_body-s-regular__vRHSP",
+    m: "Tip-module_m__9qJbB type-module_body-m-regular__LuQBA",
+    l: "Tip-module_l__OdNuh type-module_body-l-regular__lOYbg",
+    xl: "Tip-module_xl__izmFk type-module_body-xl-regular__pF2kC"
+};
+
+const milliseconds = (value, fallback) => Number.isFinite(value) ? Math.max(0, value) : fallback;
+
+/** Coordinate updates do not restart a request's show delay or visible lifetime. */ const staticState = {
+    opacity: 1,
+    x: 0,
+    y: 0,
+    scale: 1,
+    scaleX: 1,
+    scaleY: 1,
+    rotate: 0,
+    rotateX: 0,
+    rotateY: 0
+}, TipBase = React.forwardRef((rawProps, ref) => {
+    var _a, _b, _c, _d;
+    const props = resolveColorProps(rawProps), {tip: tip, textSize: textSize = "s", backgroundColor: backgroundColor, textColor: textColor, border: border = !0, borderColor: borderColor, padding: padding, borderRadius: borderRadius = corners["corner-xs"], coords: coords, showDelay: showDelay = 500, hideDelay: hideDelay = 2500, motionValues: motionValues, transition: transition, id: suppliedId, className: className, style: style} = props, attributes = __rest(props, [ "tip", "textSize", "backgroundColor", "textColor", "border", "borderColor", "padding", "borderRadius", "coords", "showDelay", "hideDelay", "motionValues", "transition", "id", "className", "style" ]), generatedId = useId(), id = suppliedId || generatedId, enabled = Boolean((null === (_a = null == tip ? void 0 : tip.payload) || void 0 === _a ? void 0 : _a.label) && coords && Number.isFinite(coords.x) && Number.isFinite(coords.y)), {visible: visible, dismiss: dismiss} = function(tip, enabled, showDelay, hideDelay) {
+        var _a, _b;
+        const [shown, setShown] = useState(null), showTimer = useRef(void 0), hideTimer = useRef(void 0), clearTimers = useCallback(() => {
+            clearTimeout(showTimer.current), clearTimeout(hideTimer.current);
+        }, []), dismiss = useCallback(() => {
+            clearTimers(), setShown(null);
+        }, [ clearTimers ]), lifetime = null !== (_b = null === (_a = null == tip ? void 0 : tip.payload) || void 0 === _a ? void 0 : _a.duration) && void 0 !== _b ? _b : hideDelay;
+        return useEffect(() => {
+            var _a;
+            if (dismiss(), enabled && (null === (_a = null == tip ? void 0 : tip.payload) || void 0 === _a ? void 0 : _a.label)) return showTimer.current = setTimeout(() => {
+                setShown(tip), hideTimer.current = setTimeout(() => setShown(null), milliseconds(lifetime, 2500));
+            }, milliseconds(showDelay, 500)), clearTimers;
+        }, [ tip, enabled, showDelay, lifetime, dismiss, clearTimers ]), {
+            visible: enabled && Boolean(tip) && shown === tip,
+            dismiss: dismiss
+        };
+    }(tip, enabled, showDelay, hideDelay), reduced = usePrefersReducedMotion(), theme = useTheme().current, controls = useAnimationControls(), variants = useMemo(() => reduced ? {
+        initial: staticState,
+        animate: staticState
+    } : mergedPresenceMotionValues({
+        initial: {
+            opacity: 0
+        },
+        animate: {
+            opacity: 1
+        }
+    }, motionValues), [ reduced, motionValues ]), resolvedTransition = useMemo(() => getWaterTransition(theme.motion, Object.assign({
+        duration: .15
+    }, transition)), [ theme.motion, transition ]);
+    useEffect(() => {
+        controls.stop(), reduced ? controls.set(staticState) : (controls.set("initial"), 
+        visible && variants.animate && controls.start("animate"));
+    }, [ visible, reduced, variants, controls ]), useEffect(() => {
+        var _a, _b;
+        const target = null === (_a = null == tip ? void 0 : tip.ref) || void 0 === _a ? void 0 : _a.current;
+        if (!(visible && target instanceof HTMLElement)) return;
+        const existing = (null !== (_b = target.getAttribute("aria-describedby")) && void 0 !== _b ? _b : "").split(/\s+/).filter(Boolean);
+        return existing.includes(id) ? void 0 : (target.setAttribute("aria-describedby", [ ...existing, id ].join(" ")), 
+        () => {
+            var _a;
+            const remaining = (null !== (_a = target.getAttribute("aria-describedby")) && void 0 !== _a ? _a : "").split(/\s+/).filter(value => value && value !== id);
+            remaining.length ? target.setAttribute("aria-describedby", remaining.join(" ")) : target.removeAttribute("aria-describedby");
+        });
+    }, [ tip, visible, id ]), useEffect(() => {
+        var _a, _b, _c;
+        if (!enabled) return;
+        const document = null !== (_c = null === (_b = null === (_a = null == tip ? void 0 : tip.ref) || void 0 === _a ? void 0 : _a.current) || void 0 === _b ? void 0 : _b.ownerDocument) && void 0 !== _c ? _c : globalThis.document, keyDown = event => {
+            "Escape" === event.key && dismiss();
+        };
+        return document.addEventListener("pointerdown", dismiss, !0), document.addEventListener("click", dismiss, !0), 
+        document.addEventListener("keydown", keyDown, !0), () => {
+            document.removeEventListener("pointerdown", dismiss, !0), document.removeEventListener("click", dismiss, !0), 
+            document.removeEventListener("keydown", keyDown, !0);
+        };
+    }, [ enabled, tip, dismiss ]);
+    const cssVars = {
+        "--tooltip-padding": setStyle(padding, "var(--spacing-xs) var(--spacing-s)"),
+        "--tooltip-background": null != backgroundColor ? backgroundColor : "var(--core-surface-secondary)",
+        "--tooltip-color": null != textColor ? textColor : "var(--core-text-primary)",
+        "--tooltip-border": border ? `1px solid ${null != borderColor ? borderColor : "var(--core-outline-primary)"}` : "unset",
+        "--tooltip-border-radius": setStyle(borderRadius)
+    };
+    return jsx(motion.div, Object.assign({}, attributes, {
+        ref: ref,
+        id: id,
+        role: "tooltip",
+        "aria-hidden": !visible,
+        className: classNames(css.wrapper, css[textSize], null != className ? className : ""),
+        style: Object.assign(Object.assign(Object.assign({}, style), cssVars), {
+            left: null !== (_b = null == coords ? void 0 : coords.x) && void 0 !== _b ? _b : 0,
+            top: null !== (_c = null == coords ? void 0 : coords.y) && void 0 !== _c ? _c : 0,
+            visibility: visible ? "visible" : "hidden"
+        }),
+        initial: !1,
+        animate: controls,
+        variants: variants,
+        transition: reduced ? {
+            duration: 0,
+            delay: 0
+        } : resolvedTransition,
+        children: null === (_d = null == tip ? void 0 : tip.payload) || void 0 === _d ? void 0 : _d.label
+    }));
+});
+
+TipBase.displayName = "Tip";
+
+const Tip = React.memo(TipBase);
+
+export { Tip as T };

package/dist/esm/chunks/ToggleButton-CGHa458C.mjs

@@ -0,0 +1,61 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsx } from "react/jsx-runtime";
+
+import React from "react";
+
+import { A as ActionButton } from "./ActionButton-guWI4qko.mjs";
+
+import { b as buttonStyleDefaults } from "./sharedTypes-DYXO7VNa.mjs";
+
+var css = {
+    toggleButton: "ToggleButton-module_toggleButton__H7KgI",
+    label: "ToggleButton-module_label__DwOOg",
+    children: "ToggleButton-module_children__tKRt1",
+    xs: "ToggleButton-module_xs__jK1pl type-module_body-xs-regular__ZAFft",
+    s: "ToggleButton-module_s__YxAKQ type-module_body-s-regular__vRHSP",
+    m: "ToggleButton-module_m__3oEzZ type-module_body-m-regular__LuQBA",
+    l: "ToggleButton-module_l__HyCwr type-module_body-l-regular__lOYbg",
+    xl: "ToggleButton-module_xl__9oy8D type-module_body-xl-regular__pF2kC",
+    bottom: "ToggleButton-module_bottom__8gu-B"
+};
+
+const dimension = (value, fallback) => "number" == typeof value ? Number.isFinite(value) ? `${Math.max(0, value)}px` : fallback : null != value ? value : fallback, ToggleButton = React.memo(function(props) {
+    const {actionName: actionName, label: label, labelOutside: labelOutside = !1, labelPosition: labelPosition = "right", children: children, textSize: textSize = "s", textColor: textColor = "core-text-primary", textColorHover: textColorHover = "core-text-primary", textColorSelected: textColorSelected, icon: icon, iconSelected: iconSelected, gap: gap = buttonStyleDefaults.gap, padding: padding, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, deselect: deselect = !0, borderRadius: borderRadius = 4, backgroundColor: backgroundColor = "core-surface-secondary", backgroundColorHover: backgroundColorHover = "core-surface-secondary", backgroundColorSelected: backgroundColorSelected = "core-text-special", iconColorSelected: iconColorSelected = "core-surface-primary", className: className, style: style} = props, buttonAttributes = __rest(props, [ "actionName", "label", "labelOutside", "labelPosition", "children", "textSize", "textColor", "textColorHover", "textColorSelected", "icon", "iconSelected", "gap", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "deselect", "borderRadius", "backgroundColor", "backgroundColorHover", "backgroundColorSelected", "iconColorSelected", "className", "style" ]), content = null != label ? label : children, hasContent = null != content && "" !== content && "boolean" != typeof content, hasChildrenContent = null == label && hasContent, name = (null == actionName ? void 0 : actionName.trim()) || ("string" == typeof content || "number" == typeof content ? String(content).trim() : "") || "Action", outside = labelOutside && Boolean(icon), {padding: defaultPadding} = buttonStyleDefaults, normal = defaultPadding.horizontal, optical = defaultPadding.icon, adjustIconPadding = void 0 === padding && !outside && Boolean(icon), defaultPaddingLeft = adjustIconPadding ? optical : void 0, defaultPaddingRight = adjustIconPadding && !hasContent ? optical : void 0, cssVars = {
+        "--tb-gap": `${Number.isFinite(gap) ? Math.max(0, gap) : buttonStyleDefaults.gap}px`,
+        "--tb-padding": dimension(padding, (() => {
+            if (hasChildrenContent) {
+                const horizontal = outside ? defaultPadding.outside : normal;
+                return `${defaultPadding.childrenTop}px ${horizontal} ${defaultPadding.childrenBottom}px`;
+            }
+            return outside ? `0 ${defaultPadding.outside}` : `0 ${normal}`;
+        })()),
+        paddingTop: void 0 === paddingTop ? void 0 : dimension(paddingTop, normal),
+        paddingBottom: void 0 === paddingBottom ? void 0 : dimension(paddingBottom, normal),
+        paddingLeft: void 0 === paddingLeft ? defaultPaddingLeft : dimension(paddingLeft, normal),
+        paddingRight: void 0 === paddingRight ? defaultPaddingRight : dimension(paddingRight, normal)
+    };
+    return jsx(ActionButton, Object.assign({}, buttonAttributes, {
+        actionName: name,
+        toggle: !0,
+        deselect: deselect,
+        iconFrame: outside,
+        icon: null != icon ? icon : null,
+        iconSelected: iconSelected,
+        labelContent: hasContent ? content : void 0,
+        contentClassName: `${css.label} ${css[textSize]}${null == label ? ` ${css.children}` : ""}`,
+        textColor: textColor,
+        textColorHover: textColorHover,
+        textColorSelected: null != textColorSelected ? textColorSelected : outside ? textColor : "core-surface-primary",
+        backgroundColor: backgroundColor,
+        backgroundColorHover: backgroundColorHover,
+        backgroundColorSelected: backgroundColorSelected,
+        iconColorSelected: iconColorSelected,
+        borderRadius: borderRadius,
+        className: `${css.toggleButton}${"bottom" === labelPosition && icon ? ` ${css.bottom}` : ""}${className ? ` ${className}` : ""}`,
+        style: Object.assign(Object.assign({}, style), cssVars)
+    }));
+});
+
+export { ToggleButton as T };