@apple-pie/slice 0.1.60 → 0.2.0

package/dist/cjs/chunks/TextArea-UudvZQ9R.js

@@ -0,0 +1,189 @@
+'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"), Icon = require("./Icon-COY7IZkK.js"), css = {
+    field: "TextArea-module_field__Tx6iH",
+    label: "TextArea-module_label__2TV89",
+    wrapper: "TextArea-module_wrapper__O0sWP",
+    textarea: "TextArea-module_textarea__-R2n0 scrollBars-module_scrollbars__c-ZPl",
+    resizeGrip: "TextArea-module_resizeGrip__TOC7J",
+    message: "TextArea-module_message__y0kVC",
+    sendSpace: "TextArea-module_sendSpace__dvtg9",
+    send: "TextArea-module_send__Cub13",
+    xs: "TextArea-module_xs__5e748 type-module_body-xs-regular__ZAFft",
+    s: "TextArea-module_s__Ac-fq type-module_body-s-regular__vRHSP",
+    m: "TextArea-module_m__dod4R type-module_body-m-regular__LuQBA",
+    l: "TextArea-module_l__-uLCG type-module_body-l-regular__lOYbg",
+    xl: "TextArea-module_xl__H6-7T type-module_body-xl-regular__pF2kC"
+};
+
+const useClientLayoutEffect = "undefined" == typeof window ? React.useEffect : React.useLayoutEffect, withoutAria = attributes => Object.fromEntries(Object.entries(attributes).filter(([key]) => !key.startsWith("aria-") && "role" !== key)), defaultSendOffset = {
+    bottom: 10,
+    right: 10
+};
+
+function TextAreaComponent(rawProps) {
+    var _a;
+    const props = resolveColorProps.resolveColorProps(rawProps), {value: value, inputRef: inputRef, defaultValue: defaultValue = "", name: name, inputName: inputName, inputId: inputId, inputAttributes: inputAttributes = {}, label: label, labelSize: labelSize = "m", labelColor: labelColor = "var(--core-text-primary)", width: width = "100%", height: height = "auto", maxHeight: maxHeight, minWidth: minWidth, rows: rows = 6, autoGrow: autoGrow = !0, focused: focused, placeholder: placeholder = "Enter text here...", padding: padding = "var(--spacing-m) var(--spacing-s) var(--spacing-m) var(--spacing-m)", borderStyle: borderStyle = "box", borderRadius: borderRadius = theme_corners.corners["corner-xs"], error: error = !1, errorMessage: errorMessage, tip: tip, borderColor: borderColor = "var(--core-outline-primary)", borderColorFocused: borderColorFocused = "var(--core-link-primary)", borderColorError: borderColorError = "var(--feedback-warning)", backgroundColor: backgroundColor = "var(--core-surface-secondary)", resizable: resizable = !0, showSendButton: showSendButton = !1, sendActionName: sendActionName = "Send", sendOffset: sendOffset = defaultSendOffset, sendSize: sendSize = 36, returnSubmits: returnSubmits = !1, textSize: textSize = "m", textColor: textColor = "var(--core-text-primary)", textColorDisabled: textColorDisabled = "var(--core-text-disabled)", textColorPlaceholder: textColorPlaceholder = "var(--core-text-disabled)", textColorError: textColorError = "var(--feedback-warning)", disabled: disabled = !1, readOnly: readOnly = !1, submitClears: submitClears = !0, allowEmptySubmit: allowEmptySubmit = !1, maxLength: maxLength, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onSubmit: onSubmit, onKeyDown: onKeyDown, onPaste: onPaste, className: className, style: style} = props, divAttributes = tslib_es6.__rest(props, [ "value", "inputRef", "defaultValue", "name", "inputName", "inputId", "inputAttributes", "label", "labelSize", "labelColor", "width", "height", "maxHeight", "minWidth", "rows", "autoGrow", "focused", "placeholder", "padding", "borderStyle", "borderRadius", "error", "errorMessage", "tip", "borderColor", "borderColorFocused", "borderColorError", "backgroundColor", "resizable", "showSendButton", "sendActionName", "sendOffset", "sendSize", "returnSubmits", "textSize", "textColor", "textColorDisabled", "textColorPlaceholder", "textColorError", "disabled", "readOnly", "submitClears", "allowEmptySubmit", "maxLength", "onChange", "onFocus", "onBlur", "onSubmit", "onKeyDown", "onPaste", "className", "style" ]), generatedId = React.useId(), id = inputId || generatedId, hasLabel = Boolean(null == label ? void 0 : label.trim()), message = null === (_a = error ? errorMessage : tip) || void 0 === _a ? void 0 : _a.trim(), messageId = `${id}-message`, ref = React.useRef(null), setInputRef = React.useCallback(element => {
+        if (ref.current = element, "function" == typeof inputRef) {
+            const cleanup = inputRef(element);
+            if ("function" == typeof cleanup) return () => {
+                ref.current = null, cleanup();
+            };
+        } else inputRef && (inputRef.current = element);
+    }, [ inputRef ]), wrapperRef = React.useRef(null), initialValue = React.useRef(defaultValue), [localText, setLocalText] = React.useState(defaultValue), [isFocused, setIsFocused] = React.useState(!1), controlled = void 0 !== value, text = controlled ? value : localText, canEdit = !disabled && !readOnly, canSubmit = canEdit && (Boolean(text.trim()) || allowEmptySubmit) && Boolean(onSubmit), growing = autoGrow && "auto" === height, nativeResizable = resizable && !growing && "auto" === height, rowCount = Number.isFinite(rows) ? Math.max(1, Math.floor(rows)) : 6, buttonSize = Number.isFinite(sendSize) ? Math.max(0, sendSize) : 36, bottomOffset = Number.isFinite(sendOffset.bottom) ? Math.max(0, sendOffset.bottom) : 10, rightOffset = Number.isFinite(sendOffset.right) ? Math.max(0, sendOffset.right) : 10, changeText = next => {
+        canEdit && (controlled || setLocalText(next), null == onChange || onChange(next));
+    }, submit = () => {
+        var _a;
+        canSubmit && (null == onSubmit || onSubmit(text), submitClears && changeText(""), 
+        null === (_a = ref.current) || void 0 === _a || _a.focus());
+    };
+    React.useEffect(() => {
+        var _a, _b;
+        disabled ? setIsFocused(!1) : void 0 !== focused && (focused ? null === (_a = ref.current) || void 0 === _a || _a.focus() : null === (_b = ref.current) || void 0 === _b || _b.blur());
+    }, [ focused, disabled ]), React.useEffect(() => {
+        var _a;
+        if (controlled) return;
+        const form = null === (_a = ref.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 ]), useClientLayoutEffect(() => {
+        var _a;
+        const element = ref.current, wrapper = wrapperRef.current;
+        if (!element || !wrapper) return;
+        const measure = () => {
+            var _a, _b;
+            const styles = getComputedStyle(wrapper), resizeOffset = Math.max(0, Number.parseFloat(styles.paddingBottom) - Number.parseFloat(styles.paddingRight));
+            if (wrapper.style.setProperty("--ta-resize-offset", `${resizeOffset}px`), null === (_a = wrapper.parentElement) || void 0 === _a || _a.style.setProperty("--ta-message-left", styles.paddingLeft), 
+            null === (_b = wrapper.parentElement) || void 0 === _b || _b.style.setProperty("--ta-message-right", styles.paddingRight), 
+            !growing) return;
+            element.style.height = "auto";
+            const baseline = element.offsetHeight;
+            element.style.height = "0px";
+            const content = element.scrollHeight;
+            element.style.height = `${Math.max(baseline, content)}px`;
+        };
+        measure();
+        let previousWidth = wrapper.clientWidth;
+        const observer = new ResizeObserver(() => {
+            wrapper.clientWidth !== previousWidth && (previousWidth = wrapper.clientWidth, measure());
+        });
+        observer.observe(wrapper);
+        let mounted = !0;
+        return null === (_a = document.fonts) || void 0 === _a || _a.ready.then(() => {
+            mounted && measure();
+        }), () => {
+            mounted = !1, observer.disconnect(), growing && element.style.removeProperty("height");
+        };
+    }, [ growing, text, rowCount, width, height, maxHeight, minWidth, textSize, padding, showSendButton, resizable, sendSize, sendOffset, style, className ]), 
+    useClientLayoutEffect(() => {
+        const element = ref.current, wrapper = wrapperRef.current;
+        if (!nativeResizable || !element || !wrapper) return;
+        const positionGrip = () => {
+            wrapper.style.setProperty("--ta-grip-top", element.offsetTop + element.offsetHeight - 16 + "px"), 
+            wrapper.style.setProperty("--ta-grip-right", wrapper.clientWidth - element.offsetLeft - element.offsetWidth + "px");
+        };
+        positionGrip();
+        const observer = new ResizeObserver(positionGrip);
+        return observer.observe(element), observer.observe(wrapper), () => observer.disconnect();
+    }, [ nativeResizable, padding, style ]);
+    const getBorderColor = () => error ? borderColorError : isFocused ? borderColorFocused : borderColor, getResize = () => !resizable || growing || "auto" !== height ? "none" : "vertical", cssVars = {
+        "--ta-height": misc.setStyle(height),
+        "--ta-max-height": misc.setStyle(maxHeight, "none"),
+        "--ta-padding": misc.setStyle(padding),
+        "--ta-border-radius": misc.setStyle(borderRadius),
+        "--ta-bg-color": backgroundColor,
+        "--ta-box-shadow": "none" === borderStyle ? "none" : "underline" === borderStyle ? `0 1px 0 0 ${getBorderColor()}` : `0 0 0 1px ${getBorderColor()}`,
+        "--ta-text-color": disabled ? textColorDisabled : textColor,
+        "--ta-placeholder-color": textColorPlaceholder,
+        "--ta-label-color": disabled ? textColorDisabled : labelColor,
+        "--ta-send-bottom": `${bottomOffset}px`,
+        "--ta-send-right": `${rightOffset}px`,
+        "--ta-send-size": `${buttonSize}px`,
+        "--ta-resize": getResize()
+    };
+    return jsxRuntime.jsxs("div", {
+        className: css.field,
+        style: Object.assign({
+            width: misc.setStyle(width),
+            minWidth: misc.setStyle(minWidth, "0px")
+        }, cssVars),
+        children: [ hasLabel && jsxRuntime.jsx("label", {
+            htmlFor: id,
+            className: `${css.label} ${css[labelSize]}`,
+            children: label
+        }), jsxRuntime.jsxs("div", Object.assign({}, withoutAria(divAttributes), {
+            ref: wrapperRef,
+            className: `${css.wrapper}${className ? ` ${className}` : ""}`,
+            style: Object.assign(Object.assign({}, style), cssVars),
+            children: [ jsxRuntime.jsx("textarea", Object.assign({}, withoutAria(inputAttributes), {
+                ref: setInputRef,
+                id: id,
+                name: name,
+                className: `${css.textarea} ${css[textSize]}`,
+                "data-resizable": "vertical" === getResize() || void 0,
+                value: text,
+                placeholder: placeholder,
+                "aria-label": (null == inputName ? void 0 : inputName.trim()) ? inputName.trim() : hasLabel ? void 0 : (null == name ? void 0 : name.trim()) || "Text input",
+                "aria-invalid": error || void 0,
+                "aria-describedby": message ? messageId : void 0,
+                rows: rowCount,
+                maxLength: maxLength,
+                disabled: disabled,
+                readOnly: readOnly,
+                onChange: event => changeText(event.currentTarget.value),
+                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));
+                },
+                onKeyDown: event => {
+                    null == onKeyDown || onKeyDown(event), event.defaultPrevented || !canEdit || !returnSubmits || !onSubmit || "Enter" !== event.key || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing || 229 === event.nativeEvent.keyCode || (event.preventDefault(), 
+                    submit());
+                }
+            })), nativeResizable && jsxRuntime.jsx("span", {
+                className: css.resizeGrip,
+                "aria-hidden": "true"
+            }), showSendButton && jsxRuntime.jsx("div", {
+                className: css.sendSpace,
+                children: jsxRuntime.jsx("button", {
+                    type: "button",
+                    className: css.send,
+                    "aria-label": sendActionName.trim() || "Send",
+                    disabled: !canSubmit,
+                    onMouseDown: event => event.preventDefault(),
+                    onClick: submit,
+                    children: jsxRuntime.jsx(Icon.Icon, {
+                        name: "arrows.arrow-top",
+                        size: 20,
+                        "aria-hidden": "true",
+                        strokeColor: "var(--core-text-light)"
+                    })
+                })
+            }) ]
+        })), message && jsxRuntime.jsx("div", {
+            id: messageId,
+            className: `${css.message} ${css.xs}`,
+            style: {
+                color: error ? textColorError : "var(--core-text-tertiary)"
+            },
+            children: message
+        }) ]
+    });
+}
+
+TextAreaComponent.displayName = "TextArea";
+
+const TextArea = React.memo(TextAreaComponent);
+
+exports.TextArea = TextArea;

package/dist/cjs/chunks/TextField-QzgdqFys.js

@@ -0,0 +1,312 @@
+'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");
+
+require("../theme/colors.js"), require("../theme/type.js"), require("./resolveColor-DkYThq2J.js"), 
+require("./breakpoints-BDw1OJh9.js");
+
+var misc = require("./misc-PmT7cZzC.js");
+
+require("./broadcastChannel-DdPZ3LUB.js"), require("./files-RYD9L_pI.js"), require("./webRTCStore-OGkXAovD.js"), 
+require("./microphoneStore-D7DuvQeX.js"), require("./volumeStore-BoEoo9wA.js");
+
+var resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), getWaterTransition = require("./getWaterTransition-s_55VKK2.js"), type_module = require("./type.module-Dk5b_rHG.js"), usePrefersReducedMotion = require("./usePrefersReducedMotion-GpD17CAE.js"), Button = require("./Button-Cr5SlNim.js"), Icon = require("./Icon-COY7IZkK.js"), IconButton = require("./IconButton-KJr15EW6.js"), 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 ? React.useEffect : React.useLayoutEffect, defaultClearButton = {
+    size: 20
+};
+
+function ActionFrame({children: children, settings: settings}) {
+    const [present, safeToRemove] = react.usePresence(), presenceSettings = react.usePresenceData(), live = present ? settings : null != presenceSettings ? presenceSettings : settings, controls = react.useAnimationControls();
+    return React.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 ]), jsxRuntime.jsx(react.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.resolveColorProps(rawProps), theme = hooks_useTheme.useTheme(), reduced = usePrefersReducedMotion.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 = tslib_es6.__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 = React.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 = React.useRef(null), column = React.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 = React.useRef(defaultValue), [localText, setLocalText] = React.useState(defaultValue), controlled = void 0 !== value, text = controlled ? value : localText, [isFocused, setIsFocused] = React.useState(!1), [show, setShow] = React.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 = React.useMemo(() => getWaterTransition.getWaterTransition(theme.current.motion, transition), [ theme.current.motion, transition ]), actionMotion = React.useMemo(() => ({
+        reduced: reduced,
+        transition: timing
+    }), [ reduced, timing ]);
+    React.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 ]), React.useEffect(() => {
+        "password" !== inputType && setShow(!1);
+    }, [ inputType ]), React.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": misc.setStyle(width),
+        "--tf-height": misc.setStyle(height),
+        "--tf-padding": (() => {
+            if (null != padding) return misc.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": misc.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": misc.setStyle(null !== (_b = null == clearButton ? void 0 : clearButton.size) && void 0 !== _b ? _b : 20),
+        "--tf-icon-size": misc.setStyle(null !== (_c = null == iconLeft ? void 0 : iconLeft.size) && void 0 !== _c ? _c : 20),
+        "--tf-stacked-gap": misc.setStyle(Number.isFinite(stackedGap) ? Math.max(0, stackedGap) : 2),
+        "--tf-label-background": labelBackgroundColor
+    }, leadingIcon = iconLeft ? jsxRuntime.jsx("span", {
+        className: css.leadingIcon,
+        "aria-hidden": "true",
+        children: jsxRuntime.jsx(Icon.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 jsxRuntime.jsxs("div", {
+        className: css.field,
+        style: {
+            width: misc.setStyle(width)
+        },
+        children: [ jsxRuntime.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 && jsxRuntime.jsx("label", {
+                className: `${css.label} ${css[labelSize]}`,
+                htmlFor: id,
+                children: label
+            }), hasLabel && "simple" === variant && jsxRuntime.jsx("span", {
+                className: `${css.separator} ${css[labelSize]}`,
+                "aria-hidden": "true",
+                children: "|"
+            }), jsxRuntime.jsxs("div", {
+                className: css.container,
+                children: [ "simple" !== variant && leadingIcon, jsxRuntime.jsxs("div", {
+                    ref: column,
+                    className: css.textColumn,
+                    children: [ hasLabel && "simple" !== variant && jsxRuntime.jsx("div", {
+                        className: css.labelSlot,
+                        children: jsxRuntime.jsx("label", {
+                            className: `${css.label} ${null !== (_f = type_module.typeCss[stackedLabelTextSize]) && void 0 !== _f ? _f : type_module.typeCss["body-xs-regular"]}`,
+                            htmlFor: id,
+                            children: label
+                        })
+                    }), jsxRuntime.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 && jsxRuntime.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: jsxRuntime.jsx(Icon.Icon, {
+                        "aria-hidden": "true",
+                        name: "basic.cross",
+                        size: null !== (_j = clearButton.size) && void 0 !== _j ? _j : 20,
+                        strokeColor: theme.current.colors["core-icon-secondary"]
+                    })
+                }), jsxRuntime.jsx(react.AnimatePresence, {
+                    initial: !1,
+                    custom: actionMotion,
+                    children: actionButton && jsxRuntime.jsx(ActionFrame, {
+                        settings: actionMotion,
+                        children: jsxRuntime.jsx(Button.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 && jsxRuntime.jsx("div", {
+                    className: css.showPassword,
+                    children: jsxRuntime.jsx(IconButton.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 && jsxRuntime.jsx("div", {
+            id: messageId,
+            className: `${css.message} ${type_module.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);
+
+exports.TextField = TextField;

package/dist/cjs/chunks/Tip-BxS2Wzz3.js

@@ -0,0 +1,115 @@
+'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"), getWaterTransition = require("./getWaterTransition-s_55VKK2.js"), usePrefersReducedMotion = require("./usePrefersReducedMotion-GpD17CAE.js"), 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.resolveColorProps(rawProps), {tip: tip, textSize: textSize = "s", backgroundColor: backgroundColor, textColor: textColor, border: border = !0, borderColor: borderColor, padding: padding, borderRadius: borderRadius = theme_corners.corners["corner-xs"], coords: coords, showDelay: showDelay = 500, hideDelay: hideDelay = 2500, motionValues: motionValues, transition: transition, id: suppliedId, className: className, style: style} = props, attributes = tslib_es6.__rest(props, [ "tip", "textSize", "backgroundColor", "textColor", "border", "borderColor", "padding", "borderRadius", "coords", "showDelay", "hideDelay", "motionValues", "transition", "id", "className", "style" ]), generatedId = React.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] = React.useState(null), showTimer = React.useRef(void 0), hideTimer = React.useRef(void 0), clearTimers = React.useCallback(() => {
+            clearTimeout(showTimer.current), clearTimeout(hideTimer.current);
+        }, []), dismiss = React.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 React.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.usePrefersReducedMotion(), theme = hooks_useTheme.useTheme().current, controls = react.useAnimationControls(), variants = React.useMemo(() => reduced ? {
+        initial: staticState,
+        animate: staticState
+    } : misc.mergedPresenceMotionValues({
+        initial: {
+            opacity: 0
+        },
+        animate: {
+            opacity: 1
+        }
+    }, motionValues), [ reduced, motionValues ]), resolvedTransition = React.useMemo(() => getWaterTransition.getWaterTransition(theme.motion, Object.assign({
+        duration: .15
+    }, transition)), [ theme.motion, transition ]);
+    React.useEffect(() => {
+        controls.stop(), reduced ? controls.set(staticState) : (controls.set("initial"), 
+        visible && variants.animate && controls.start("animate"));
+    }, [ visible, reduced, variants, controls ]), React.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 ]), React.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": misc.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": misc.setStyle(borderRadius)
+    };
+    return jsxRuntime.jsx(react.motion.div, Object.assign({}, attributes, {
+        ref: ref,
+        id: id,
+        role: "tooltip",
+        "aria-hidden": !visible,
+        className: misc.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);
+
+exports.Tip = Tip;