@apple-pie/slice 0.1.59 → 0.2.0

package/dist/cjs/chunks/AudioLevel-uQJ-v5Qz.js

@@ -0,0 +1,54 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), theme_corners = require("../theme/corners.js"), useAudioVisualizer = require("./useAudioVisualizer-D7bStvIe.js"), misc = require("./misc-PmT7cZzC.js"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), css_wrapper = "AudioLevel-module_wrapper__0F9Fl", css_barContainer = "AudioLevel-module_barContainer__QV0Vu", css_bar = "AudioLevel-module_bar__889Me";
+
+const AudioLevel = React.memo(function(rawProps) {
+    const props = resolveColorProps.resolveColorProps(rawProps), {width: width = 100, height: height = 4, gap: gap = 0, audioStream: audioStream, playing: playing = !1, levelName: levelName, minActiveBars: minActiveBars = 0, barCount: barCount = 5, intensity: intensity = 3.5, peakIntensity: peakIntensity = .5, risePerSeconds: risePerSeconds = 4, releasePerSeconds: releasePerSeconds = 1.5, borderRadius: borderRadius = theme_corners.corners["corner-xs"], borderColor: borderColor = "transparent", borderWidth: borderWidth = 0, backgroundColorActive: backgroundColorActive = "var(--feedback-positive)", backgroundColor: backgroundColor = "var(--core-surface-primary-tint)"} = props, divAttributes = tslib_es6.__rest(props, [ "width", "height", "gap", "audioStream", "playing", "levelName", "minActiveBars", "barCount", "intensity", "peakIntensity", "risePerSeconds", "releasePerSeconds", "borderRadius", "borderColor", "borderWidth", "backgroundColorActive", "backgroundColor" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", totalBars = Math.min(1e3, Math.max(1, Math.floor(Number.isFinite(barCount) ? barCount : 5))), minBars = Math.max(0, Math.min(Math.floor(Number.isFinite(minActiveBars) ? minActiveBars : 0), totalBars)), [measuredBars, setMeasuredBars] = React.useState(null), activeBars = Math.max(minBars, Math.min(null != measuredBars ? measuredBars : minBars, totalBars)), accessibleName = null == levelName ? void 0 : levelName.trim(), intensityIntervals = React.useMemo(() => Array.from({
+        length: totalBars
+    }, (_, index) => index), [ totalBars ]), visualizerSettings = React.useMemo(() => ({
+        intensityMultiplier: intensity,
+        peakIntensity: peakIntensity,
+        risePerSecond: risePerSeconds,
+        releasePerSecond: releasePerSeconds
+    }), [ intensity, peakIntensity, risePerSeconds, releasePerSeconds ]);
+    useAudioVisualizer.useAudioVisualizer(audioStream, playing, visualizerSettings, ({intensity: nextIntensity}) => {
+        setMeasuredBars(Math.round(minBars + nextIntensity * (totalBars - minBars)));
+    }, () => setMeasuredBars(null));
+    const cssVars = React.useMemo(() => ({
+        "--level-width": misc.setStyle(width),
+        "--level-height": misc.setStyle(height),
+        "--level-gap": misc.setStyle(gap),
+        "--level-bar-border-radius": misc.setStyle(borderRadius),
+        "--level-border-color": borderColor,
+        "--level-border-width": misc.setStyle(borderWidth),
+        "--level-color": backgroundColorActive,
+        "--level-bg-color": backgroundColor
+    }), [ width, height, gap, borderRadius, borderColor, borderWidth, backgroundColorActive, backgroundColor ]);
+    return jsxRuntime.jsx("div", Object.assign({
+        id: divId,
+        className: `${css_wrapper}${divClass}`,
+        style: Object.assign(Object.assign({}, cssVars), divStyle)
+    }, rest, {
+        role: accessibleName ? "meter" : void 0,
+        "aria-hidden": !accessibleName || void 0,
+        "aria-label": accessibleName || void 0,
+        "aria-valuemin": accessibleName ? 0 : void 0,
+        "aria-valuemax": accessibleName ? totalBars : void 0,
+        "aria-valuenow": accessibleName ? activeBars : void 0,
+        children: intensityIntervals.map(barIndex => {
+            const isActive = barIndex < activeBars;
+            return jsxRuntime.jsx("div", {
+                className: css_barContainer,
+                children: jsxRuntime.jsx("div", {
+                    className: css_bar,
+                    style: {
+                        opacity: isActive ? 1 : 0
+                    }
+                })
+            }, barIndex);
+        })
+    }));
+});
+
+exports.AudioLevel = AudioLevel;

package/dist/cjs/chunks/Avatar-a2GHmu1o.js

@@ -0,0 +1,125 @@
+'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");
+
+const AvatarGroupContext = React.createContext(null);
+
+var css = {
+    wrapper: "Avatar-module_wrapper__ab1D7 flexBox-module_row__z24tF type-module_body-m-regular__LuQBA",
+    user: "Avatar-module_user__ZQv0Q flexBox-module_row__z24tF",
+    image: "Avatar-module_image__ieqGp",
+    xs: "Avatar-module_xs__oSaLL type-module_body-xs-regular__ZAFft",
+    s: "Avatar-module_s__lpCvw type-module_body-s-regular__vRHSP",
+    m: "Avatar-module_m__WNGhX type-module_body-m-regular__LuQBA",
+    l: "Avatar-module_l__jPakz type-module_body-l-regular__lOYbg",
+    xl: "Avatar-module_xl__mW58F type-module_body-xl-regular__pF2kC",
+    overflowLabel: "Avatar-module_overflowLabel__ufKMl",
+    overflow: "Avatar-module_overflow__oNLjK"
+};
+
+/** A new source gets a fresh loading state, including when switching back to an earlier photo. */ function AvatarImage({image: image, lazyLoad: lazyLoad, initials: initials}) {
+    const [loaded, setLoaded] = React.useState(!1), syncLoadedImage = React.useCallback(element => {
+        (null == element ? void 0 : element.complete) && element.naturalWidth > 0 && setLoaded(!0);
+    }, []);
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ !loaded && initials, jsxRuntime.jsx("img", {
+            ref: syncLoadedImage,
+            className: css.image,
+            src: image,
+            alt: "",
+            loading: lazyLoad ? "lazy" : "eager",
+            decoding: "async",
+            "data-loaded": loaded,
+            onLoad: () => setLoaded(!0),
+            onError: () => setLoaded(!1)
+        }) ]
+    });
+}
+
+function AvatarComponent(rawProps) {
+    var _a, _b, _c, _d;
+    const group = React.useContext(AvatarGroupContext), ownProps = Object.fromEntries(Object.entries(rawProps).filter(([, value]) => void 0 !== value)), props = resolveColorProps.resolveColorProps(group ? Object.assign(Object.assign({}, group.avatarProps), ownProps) : rawProps), {info: info, displayText: displayText, name: name, email: email, image: image = "", lazyLoad: lazyLoad = !1, size: size = 34, textSize: textSize = "m", textColor: textColor, backgroundColor: backgroundColor, borderWidth: borderWidth = 0, borderColor: borderColor, borderColorHover: borderColorHover, outerBorderWidth: outerBorderWidth = 0, outerBorderColor: outerBorderColor, onClick: onClick, onKeyDown: onKeyDown, onToolTip: onToolTip, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, tabIndex: tabIndex = 0, className: className, style: style} = props, divAttributes = tslib_es6.__rest(props, [ "info", "displayText", "name", "email", "image", "lazyLoad", "size", "textSize", "textColor", "backgroundColor", "borderWidth", "borderColor", "borderColorHover", "outerBorderWidth", "outerBorderColor", "onClick", "onKeyDown", "onToolTip", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "tabIndex", "className", "style" ]), forwardedAttributes = Object.assign({}, divAttributes);
+    for (const [key, value] of Object.entries(forwardedAttributes)) key.startsWith("on") && "function" == typeof value && (forwardedAttributes[key] = event => value(event, info));
+    const ref = React.useRef(null), hovered = React.useRef(!1), focused = React.useRef(!1), displayName = null !== (_a = null == name ? void 0 : name.trim()) && void 0 !== _a ? _a : "", displayEmail = null !== (_b = null == email ? void 0 : email.trim()) && void 0 !== _b ? _b : "", label = displayName || displayEmail, parts = displayName.split(/\s+/);
+    let initials = displayEmail.charAt(0);
+    displayName && (initials = parts[0].charAt(0), parts.length > 1 && (initials += parts[parts.length - 1].charAt(0)));
+    const avatarVars = {
+        "--avatar-size": misc.setStyle(size),
+        "--avatar-border": `${borderWidth}px`,
+        "--avatar-color": null != textColor ? textColor : "var(--core-text-primary)",
+        "--avatar-bg-color": null != backgroundColor ? backgroundColor : "var(--core-surface-secondary)",
+        "--avatar-border-color": null != borderColor ? borderColor : "var(--core-surface-primary)",
+        "--avatar-border-color-hover": null != borderColorHover ? borderColorHover : "var(--core-link-primary)",
+        "--avatar-outer-border-size": `${outerBorderWidth}px`,
+        "--avatar-outer-border-color": null != outerBorderColor ? outerBorderColor : "var(--core-surface-primary)",
+        "--avatar-cursor": onClick ? "pointer" : "default"
+    }, avatar = jsxRuntime.jsx("div", Object.assign({}, forwardedAttributes, {
+        ref: ref,
+        className: `${css.wrapper}${className ? ` ${className}` : ""}`,
+        style: Object.assign(Object.assign({}, style), avatarVars),
+        onMouseEnter: event => {
+            hovered.current = !0, null == onMouseEnter || onMouseEnter(event, info), null == onToolTip || onToolTip({
+                payload: {
+                    label: label
+                },
+                ref: ref,
+                event: event
+            }, info);
+        },
+        onMouseLeave: event => {
+            hovered.current = !1, null == onMouseLeave || onMouseLeave(event, info), focused.current || null == onToolTip || onToolTip(null, info);
+        },
+        onFocus: event => {
+            focused.current = !0, null == onFocus || onFocus(event, info), null == onToolTip || onToolTip({
+                payload: {
+                    label: label
+                },
+                ref: ref
+            }, info);
+        },
+        onBlur: event => {
+            focused.current = !1, null == onBlur || onBlur(event, info), hovered.current || null == onToolTip || onToolTip(null, info);
+        },
+        onClick: onClick ? event => onClick(event, info) : void 0,
+        onKeyDown: event => {
+            null == onKeyDown || onKeyDown(event, info), !onClick || event.defaultPrevented || event.repeat || misc.accessibleKeyDown(event, () => event.currentTarget.click());
+        },
+        role: null !== (_c = divAttributes.role) && void 0 !== _c ? _c : onClick ? "button" : "img",
+        tabIndex: onClick ? tabIndex : void 0,
+        "aria-label": null !== (_d = divAttributes["aria-label"]) && void 0 !== _d ? _d : `User Avatar - ${label || "Unknown User"}`,
+        children: jsxRuntime.jsx("div", {
+            "aria-hidden": !0,
+            className: `${css.user} ${css[textSize]}`,
+            children: image ? jsxRuntime.jsx(AvatarImage, {
+                image: image,
+                lazyLoad: lazyLoad,
+                initials: initials
+            }, image) : displayText ? jsxRuntime.jsx("span", {
+                className: css.overflowLabel,
+                style: {
+                    "--avatar-label-length": displayText.length
+                },
+                children: displayText
+            }) : initials
+        })
+    }));
+    return group ? jsxRuntime.jsx("div", {
+        className: group.itemClassName,
+        children: avatar
+    }) : avatar;
+}
+
+const Avatar = React.memo(AvatarComponent);
+
+/** Internal overflow renderer: shares the avatar's frame, tooltip, and keyboard behavior. */ exports.Avatar = Avatar, 
+exports.AvatarGroupContext = AvatarGroupContext, exports.AvatarOverflow = function({count: count, onClick: onClick}) {
+    const label = `${count} more ${1 === count ? "avatar" : "avatars"}`;
+    return jsxRuntime.jsx(AvatarComponent, {
+        className: css.overflow,
+        name: label,
+        displayText: `+${count}`,
+        "aria-label": label,
+        onClick: onClick
+    });
+};

package/dist/cjs/chunks/AvatarGroup-CWpoauJP.js

@@ -0,0 +1,70 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), Avatar = require("./Avatar-a2GHmu1o.js"), css_wrapper = "AvatarGroup-module_wrapper__MtOyq flexBox-module_rowStart__4tcxS", css_avatar = "AvatarGroup-module_avatar__5NVpW";
+
+function flattenChildren(children, parentKey = "") {
+    return React.Children.toArray(children).flatMap(child => {
+        if (!React.isValidElement(child)) return [ child ];
+        const key = `${parentKey}/${child.key}`;
+        return child.type === React.Fragment ? flattenChildren(child.props.children, key) : [ React.cloneElement(child, {
+            key: key
+        }) ];
+    });
+}
+
+const AvatarGroup = React.memo(rawProps => {
+    const props = resolveColorProps.resolveColorProps(rawProps), {avatars: avatars = [], children: children, limit: limit, onMore: onMore, size: size = 40, lazyLoad: lazyLoad = !1, textSize: textSize = "m", borderWidth: borderWidth, backgroundColor: backgroundColor, overlap: overlap = 8, gap: gap = 0, groupName: groupName, borderColor: borderColor, borderColorHover: borderColorHover, outerBorderWidth: outerBorderWidth = 3, outerBorderColor: outerBorderColor = "var(--core-surface-primary)", margin: margin = 0, onToolTip: onToolTip} = props, divAttributes = tslib_es6.__rest(props, [ "avatars", "children", "limit", "onMore", "size", "lazyLoad", "textSize", "borderWidth", "backgroundColor", "overlap", "gap", "groupName", "borderColor", "borderColorHover", "outerBorderWidth", "outerBorderColor", "margin", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), accessibleName = (null == groupName ? void 0 : groupName.trim()) || "people", nativeAttributes = Object.fromEntries(Object.entries(rest).filter(([key]) => "role" !== key && !key.startsWith("aria-"))), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", cssVars = React.useMemo(() => ({
+        "--ag-gap": `${null != gap ? gap : 0}px`,
+        "--ag-margin": `${null != margin ? margin : 0}px`,
+        "--ag-overlap": (overlap > 0 ? -overlap : 0) + "px"
+    }), [ overlap, gap, margin ]), context = React.useMemo(() => ({
+        itemClassName: css_avatar,
+        avatarProps: {
+            backgroundColor: backgroundColor,
+            size: size,
+            lazyLoad: lazyLoad,
+            textSize: textSize,
+            borderWidth: borderWidth,
+            borderColor: borderColor,
+            borderColorHover: borderColorHover,
+            outerBorderWidth: outerBorderWidth,
+            outerBorderColor: outerBorderColor,
+            onToolTip: onToolTip
+        }
+    }), [ backgroundColor, size, lazyLoad, textSize, borderWidth, borderColor, borderColorHover, outerBorderWidth, outerBorderColor, onToolTip ]), allChildren = React.useMemo(() => flattenChildren(children), [ children ]), allAvatars = null != avatars ? avatars : [], itemCount = void 0 !== children ? allChildren.length : allAvatars.length, visibleCount = void 0 !== limit && Number.isFinite(limit) ? Math.max(0, Math.floor(limit)) : itemCount, overflowCount = Math.max(0, itemCount - visibleCount), renderedAvatars = void 0 !== children ? allChildren.slice(0, visibleCount) : allAvatars.slice(0, visibleCount).map((avatar, index) => {
+        var _a;
+        return jsxRuntime.jsx(Avatar.Avatar, {
+            name: [ avatar.first, avatar.last ].filter(Boolean).join(" "),
+            email: avatar.email,
+            image: avatar.image,
+            textColor: avatar.textColor,
+            backgroundColor: avatar.backgroundColor
+        }, void 0 !== avatar.id ? `id:${avatar.id}` : `fallback:${null !== (_a = avatar.email) && void 0 !== _a ? _a : ""}:${index}`);
+    }), classNames = React.useMemo(() => `${css_wrapper}${divClass}`, [ divClass ]);
+    return jsxRuntime.jsx("div", Object.assign({
+        id: divId,
+        className: classNames,
+        style: Object.assign(Object.assign({}, divStyle), cssVars)
+    }, nativeAttributes, {
+        role: "group",
+        "aria-label": accessibleName,
+        children: jsxRuntime.jsxs(Avatar.AvatarGroupContext.Provider, {
+            value: context,
+            children: [ renderedAvatars, overflowCount > 0 && jsxRuntime.jsx(Avatar.AvatarOverflow, {
+                count: overflowCount,
+                onClick: onMore ? () => onMore(void 0 !== children ? {
+                    source: "children",
+                    more: allChildren.slice(visibleCount),
+                    all: [ ...allChildren ]
+                } : {
+                    source: "avatars",
+                    more: allAvatars.slice(visibleCount),
+                    all: [ ...allAvatars ]
+                }) : void 0
+            }) ]
+        })
+    }));
+});
+
+exports.AvatarGroup = AvatarGroup;

package/dist/cjs/chunks/Badge-DtVP2qH0.js

@@ -0,0 +1,26 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), css_badge = "Badge-module_badge__RsuMz flexBox-module_row__z24tF type-module_body-xs-medium__s3KvF";
+
+const Badge = React.memo(rawProps => {
+    const props = resolveColorProps.resolveColorProps(rawProps), {count: count, variant: variant = "dark", hideZero: hideZero = !0, backgroundColor: backgroundColor, textColor: textColor, className: className, style: style} = props, divAttributes = tslib_es6.__rest(props, [ "count", "variant", "hideZero", "backgroundColor", "textColor", "className", "style" ]);
+    if (null == count) return null;
+    if ("number" == typeof count && (!Number.isFinite(count) || hideZero && 0 === count)) return null;
+    if ("string" == typeof count && !count.trim()) return null;
+    const displayCount = "number" == typeof count && count > 99 ? "99+" : String(count), cssVars = {
+        "--badge-color": null != textColor ? textColor : "light" === variant ? "var(--core-text-primary)" : "var(--core-text-light)",
+        "--badge-bg": null != backgroundColor ? backgroundColor : "light" === variant ? "var(--core-badge-secondary)" : "var(--core-badge-primary)"
+    };
+    return jsxRuntime.jsx("div", Object.assign({
+        className: `${css_badge}${className ? ` ${className}` : ""}`,
+        style: Object.assign(Object.assign({}, style), cssVars),
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true"
+    }, divAttributes, {
+        children: displayCount
+    }));
+});
+
+exports.Badge = Badge;

package/dist/cjs/chunks/Button-Cr5SlNim.js

@@ -0,0 +1,293 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-PmT7cZzC.js"), theme_corners = require("../theme/corners.js"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), Badge = require("./Badge-DtVP2qH0.js"), Dot = require("./Dot-0Dv8WX0n.js"), Icon = require("./Icon-COY7IZkK.js"), ProgressIndicator = require("./ProgressIndicator-Ddj5dfEA.js"), sharedTypes = require("./sharedTypes-BDMIewR9.js"), css = {
+    button: "Button-module_button__2ZuB7 flexBox-module_row__z24tF",
+    label: "Button-module_label__UJ3Zt",
+    children: "Button-module_children__7Eljd",
+    count: "Button-module_count__DFxVB flexBox-module_row__z24tF",
+    icon: "Button-module_icon__-43u5 flexBox-module_row__z24tF",
+    xs: "Button-module_xs__cF6m0 type-module_body-xs-regular__ZAFft",
+    m: "Button-module_m__DR-gs type-module_body-m-regular__LuQBA",
+    l: "Button-module_l__0E0yI type-module_body-l-regular__lOYbg",
+    xl: "Button-module_xl__nx4V0 type-module_body-xl-regular__pF2kC",
+    s: "Button-module_s__dSKOL type-module_body-s-regular__vRHSP",
+    labelHidden: "Button-module_labelHidden__JlWR-",
+    centerProgress: "Button-module_centerProgress__IduwZ"
+};
+
+const ButtonComponent = React.forwardRef((rawProps, buttonRef) => {
+    const props = resolveColorProps.resolveColorProps(rawProps), {children: children, disabled: disabled = !1, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, buttonSize: buttonSize = "m", gap: gap = sharedTypes.buttonStyleDefaults.gap, padding: padding, paddingTop: paddingTop, paddingBottom: paddingBottom, variant: variant = "outline", label: label, textSize: textSize = "m", iconRight: iconRight, iconLeft: iconLeft, iconFill: iconFill = !1, count: count = (void 0 === props.count ? void 0 : Number(props.count)), showDot: showDot, tooltip: tooltip, round: round = !1, state: state = "normal", fill: fill = !1, iconSize: iconSize = (void 0 === props.iconSize ? 20 : Number(props.iconSize)), width: width = "min-content", underline: underline = !1, borderRadius: borderRadius, borderWidth: borderWidth, borderColor: borderColor, iconColor: iconColor, backgroundColor: backgroundColor, backgroundColorDisabled: backgroundColorDisabled, textColor: textColor, transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, paddingRight: paddingRight, paddingLeft: paddingLeft, progress: progress = !1, working: working = !1, duration: duration, trigger: trigger = !1, destructive: destructive = !1, link: link, target: target = "_self", onClick: onClick, onToolTip: onToolTip} = props, divAttributes = tslib_es6.__rest(props, [ "children", "disabled", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "buttonSize", "gap", "padding", "paddingTop", "paddingBottom", "variant", "label", "textSize", "iconRight", "iconLeft", "iconFill", "count", "showDot", "tooltip", "round", "state", "fill", "iconSize", "width", "underline", "borderRadius", "borderWidth", "borderColor", "iconColor", "backgroundColor", "backgroundColorDisabled", "textColor", "transition", "variants", "initial", "animate", "exit", "paddingRight", "paddingLeft", "progress", "working", "duration", "trigger", "destructive", "link", "target", "onClick", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = backgroundColor, resolvedBackgroundColorDisabled = backgroundColorDisabled, [hovered, setHovered] = React.useState(!1), hoveredRef = React.useRef(!1), focusedRef = React.useRef(!1), isDisabled = disabled || "disabled" === state, btnState = isDisabled ? "disabled" : hovered || "hover" === state ? "hover" : "normal", [lockedWidth, setLockedWidth] = React.useState(void 0), [timedWorking, setTimedWorking] = React.useState(!1), playing = working || timedWorking, timer = React.useRef(null), inFlight = React.useRef(!1), wasTriggered = React.useRef(!1), replayTimedTrigger = React.useRef(!1), latestAction = React.useRef({
+        onClick: onClick,
+        isDisabled: isDisabled,
+        working: working
+    });
+    React.useEffect(() => {
+        latestAction.current = {
+            onClick: onClick,
+            isDisabled: isDisabled,
+            working: working
+        };
+    }, [ onClick, isDisabled, working ]);
+    const ref = React.useRef(null), lockCurrentWidth = React.useCallback(() => {
+        ref.current && setLockedWidth(ref.current.offsetWidth);
+    }, []);
+    React.useEffect(() => {
+        (isDisabled || working) && null !== timer.current && (clearTimeout(timer.current), 
+        timer.current = null, inFlight.current = !1, setTimedWorking(!1));
+    }, [ isDisabled, working ]), React.useEffect(() => () => {
+        replayTimedTrigger.current = null !== timer.current && wasTriggered.current, null !== timer.current && clearTimeout(timer.current), 
+        timer.current = null, inFlight.current = !1;
+    }, []);
+    const handleClick = React.useCallback(event => {
+        if (!(isDisabled || working || inFlight.current)) {
+            if (null == onToolTip || onToolTip(null), progress && void 0 !== duration && Number.isFinite(duration) && duration > 0) return null == event || event.preventDefault(), 
+            lockCurrentWidth(), inFlight.current = !0, setTimedWorking(!0), void (timer.current = setTimeout(() => {
+                var _a, _b;
+                timer.current = null, inFlight.current = !1, setTimedWorking(!1), latestAction.current.isDisabled || latestAction.current.working || null === (_b = (_a = latestAction.current).onClick) || void 0 === _b || _b.call(_a, void 0);
+            }, 1e3 * duration));
+            null == onClick || onClick(event), link && !(null == event ? void 0 : event.defaultPrevented) && void 0 !== globalThis.window && globalThis.window.open(link, target);
+        }
+    }, [ isDisabled, working, onToolTip, progress, duration, lockCurrentWidth, onClick, link, target ]);
+    React.useEffect(() => {
+        working && lockCurrentWidth();
+    }, [ working, lockCurrentWidth ]), React.useEffect(() => {
+        playing || setLockedWidth(void 0);
+    }, [ playing ]), React.useImperativeHandle(buttonRef, () => ({
+        triggerClick: () => handleClick(void 0)
+    }), [ handleClick ]), React.useEffect(() => {
+        !trigger || wasTriggered.current && !replayTimedTrigger.current ? trigger || (wasTriggered.current = !1) : (wasTriggered.current = !0, 
+        replayTimedTrigger.current = !1, handleClick(void 0));
+    }, [ trigger, handleClick ]);
+    const destructiveColor = React.useCallback(icon => {
+        if (icon) {
+            if ("disabled" === btnState) return "var(--core-text-disabled)";
+            if ("solid" === variant) return "var(--core-text-light)";
+        }
+        return destructive ? "var(--feedback-warning)" : "var(--core-text-primary)";
+    }, [ destructive, variant, btnState ]), solid = React.useMemo(() => ({
+        border: "0px",
+        iconColor: {
+            normal: iconColor || destructiveColor(!0),
+            hover: iconColor || destructiveColor(!0),
+            disabled: iconColor || destructiveColor(!0)
+        },
+        background: {
+            normal: resolvedBackgroundColor || (destructive ? "var(--feedback-warning)" : "var(--core-button-primary)"),
+            hover: resolvedBackgroundColor || (destructive ? "var(--feedback-warning)" : "var(--core-button-primary)"),
+            disabled: resolvedBackgroundColorDisabled || "var(--core-button-disabled)"
+        },
+        borderColor: {
+            normal: "transparent",
+            hover: "transparent",
+            disabled: "transparent"
+        },
+        color: {
+            normal: textColor || (destructive ? "white" : "var(--core-text-light)"),
+            hover: textColor || (destructive ? "white" : "var(--core-text-light)"),
+            disabled: "var(--core-text-disabled)"
+        }
+    }), [ textColor, destructive, destructiveColor, resolvedBackgroundColor, resolvedBackgroundColorDisabled, iconColor ]), outline = React.useMemo(() => ({
+        border: "1px",
+        iconColor: {
+            normal: iconColor || destructiveColor(!0),
+            hover: iconColor || destructiveColor(!0),
+            disabled: iconColor || destructiveColor(!0)
+        },
+        background: {
+            normal: resolvedBackgroundColor || "var(--core-surface-primary)",
+            hover: resolvedBackgroundColor || "var(--core-surface-primary)",
+            disabled: resolvedBackgroundColorDisabled || "var(--core-surface-primary)"
+        },
+        borderColor: {
+            normal: destructive ? "var(--feedback-warning)" : "var(--core-outline-primary)",
+            hover: destructive ? "var(--feedback-warning)" : "var(--core-outline-primary)",
+            disabled: "var(--core-outline-primary)"
+        },
+        color: {
+            normal: textColor || (destructive ? "var(--feedback-warning)" : "var(--core-text-primary)"),
+            hover: textColor || (destructive ? "var(--feedback-warning)" : "var(--core-text-special)"),
+            disabled: "var(--core-text-disabled)"
+        }
+    }), [ textColor, destructive, destructiveColor, resolvedBackgroundColor, resolvedBackgroundColorDisabled, iconColor ]), text = React.useMemo(() => ({
+        border: "1px",
+        iconColor: {
+            normal: iconColor || destructiveColor(!0),
+            hover: iconColor || destructiveColor(!0),
+            disabled: iconColor || "var(--core-text-disabled)"
+        },
+        background: {
+            normal: resolvedBackgroundColor || "transparent",
+            hover: resolvedBackgroundColor || "transparent",
+            disabled: resolvedBackgroundColorDisabled || "transparent"
+        },
+        borderColor: {
+            normal: "transparent",
+            hover: "transparent",
+            disabled: "transparent"
+        },
+        color: {
+            normal: textColor || destructiveColor(!1),
+            hover: textColor || destructiveColor(!1),
+            disabled: "var(--core-text-disabled)"
+        }
+    }), [ destructiveColor, textColor, iconColor, resolvedBackgroundColor, resolvedBackgroundColorDisabled ]), colorStyles = React.useMemo(() => ({
+        solid: solid,
+        outline: outline,
+        text: text
+    }), [ solid, outline, text ]), resolvedBorderWidth = misc.setStyle(borderWidth, colorStyles[variant].border), resolvedBorderColor = null != borderColor ? borderColor : colorStyles[variant].borderColor[btnState], autoSize = "auto" === buttonSize, height = autoSize ? "auto" : "number" == typeof buttonSize ? Number.isFinite(buttonSize) && buttonSize > 0 ? buttonSize : sharedTypes.buttonStyleDefaults.sizes.m : null !== (_a = sharedTypes.buttonStyleDefaults.sizes[buttonSize]) && void 0 !== _a ? _a : sharedTypes.buttonStyleDefaults.sizes.m;
+    var _a;
+    const resolvedGap = Number.isFinite(gap) ? Math.max(0, gap) : sharedTypes.buttonStyleDefaults.gap, hasChildren = null != children, verticalPadding = hasChildren || autoSize ? sharedTypes.buttonStyleDefaults.padding.childrenTop : 0, bottomPadding = hasChildren || autoSize ? sharedTypes.buttonStyleDefaults.padding.childrenBottom : 0, getSidePadding = side => {
+        if (void 0 !== padding) return;
+        if (round) return 0;
+        const base = "text" === variant ? "var(--spacing-xs)" : sharedTypes.buttonStyleDefaults.padding.horizontal;
+        return ("left" === side ? iconLeft : iconRight) ? `calc(${base} - var(--spacing-xs))` : base;
+    }, roundWidth = autoSize ? `calc(${iconSize + verticalPadding + bottomPadding}px + 2 * ${resolvedBorderWidth})` : height, handleMouseEnter = React.useCallback(event => {
+        null == onMouseEnter || onMouseEnter(event), isDisabled || (hoveredRef.current = !0, 
+        setHovered(!0), tooltip && (null == onToolTip || onToolTip({
+            type: sharedTypes.ToolTipType.button,
+            payload: {
+                label: tooltip
+            },
+            event: event,
+            ref: ref
+        })));
+    }, [ onMouseEnter, isDisabled, tooltip, onToolTip ]), handleMouseLeave = React.useCallback(event => {
+        null == onMouseLeave || onMouseLeave(event), hoveredRef.current = !1, setHovered(!1), 
+        tooltip && !focusedRef.current && (null == onToolTip || onToolTip(null));
+    }, [ onMouseLeave, tooltip, onToolTip ]), handleFocus = React.useCallback(event => {
+        null == onFocus || onFocus(event), focusedRef.current = !0, tooltip && !isDisabled && (null == onToolTip || onToolTip({
+            type: sharedTypes.ToolTipType.button,
+            payload: {
+                label: tooltip
+            },
+            ref: ref
+        }));
+    }, [ onFocus, tooltip, isDisabled, onToolTip ]), handleBlur = React.useCallback(event => {
+        null == onBlur || onBlur(event), focusedRef.current = !1, tooltip && !hoveredRef.current && (null == onToolTip || onToolTip(null));
+    }, [ onBlur, tooltip, onToolTip ]), buttonContent = null != children ? children : label, hasContent = null != buttonContent && !1 !== buttonContent && "" !== buttonContent, setStyle = React.useCallback(value => void 0 === value ? "unset" : "number" == typeof value ? `${value}px` : value, []), setWidth = React.useMemo(() => playing && lockedWidth && "min-content" === width ? setStyle(lockedWidth) : "fill" === width ? "100%" : width && "fill" !== width ? setStyle(width) : "min-content", [ playing, lockedWidth, width, setStyle ]), resolvedPaddingRight = null != paddingRight ? paddingRight : getSidePadding("right"), resolvedPaddingLeft = null != paddingLeft ? paddingLeft : getSidePadding("left"), buttonStyle = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
+        color: colorStyles[variant].color[btnState],
+        backgroundColor: fill && !isDisabled ? "var(--core-surface-primary)" : colorStyles[variant].background[btnState],
+        backgroundClip: "padding-box"
+    }, void 0 === resolvedPaddingRight ? {} : {
+        paddingRight: resolvedPaddingRight
+    }), void 0 === resolvedPaddingLeft ? {} : {
+        paddingLeft: resolvedPaddingLeft
+    }), void 0 === paddingTop ? {} : {
+        paddingTop: paddingTop
+    }), void 0 === paddingBottom ? {} : {
+        paddingBottom: paddingBottom
+    }), {
+        borderRadius: null != borderRadius ? borderRadius : theme_corners.corners["corner-round"],
+        height: height,
+        maxHeight: autoSize ? "unset" : height,
+        minHeight: autoSize ? 0 : height,
+        flex: "fill" === width ? 1 : "unset",
+        width: round && "min-content" === width ? roundWidth : setWidth,
+        maxWidth: round && "min-content" === width ? "unset" : setWidth,
+        minWidth: 0,
+        gap: resolvedGap,
+        borderWidth: resolvedBorderWidth,
+        borderStyle: "solid",
+        borderColor: resolvedBorderColor,
+        cursor: isDisabled || playing ? "default" : "pointer",
+        transition: "all var(--motion-water-duration) var(--motion-water) 0s"
+    }), progressColor = React.useMemo(() => destructive ? "var(--feedback-warning)" : colorStyles[variant].color[btnState], [ destructive, colorStyles, variant, btnState ]), iconDivSize = React.useMemo(() => round || iconSize ? setStyle(iconSize) : "unset", [ round, iconSize, setStyle ]), cssVars = React.useMemo(() => ({
+        "--ui-button-decoration": underline ? "underline" : "unset",
+        "--ui-button-icon-size": iconDivSize,
+        "--ui-button-gap": `${resolvedGap}px`,
+        "--ui-button-padding": "number" == typeof padding ? `${padding}px` : void 0 !== padding ? padding : round && !autoSize ? "0px" : `${verticalPadding}px 0 ${bottomPadding}px`
+    }), [ underline, iconDivSize, resolvedGap, padding, round, autoSize, verticalPadding, bottomPadding ]);
+    return jsxRuntime.jsxs(react.motion.button, Object.assign({
+        id: divId,
+        type: "button",
+        className: `${css.button}  ${css[textSize]}${divClass}`,
+        ref: ref,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        style: Object.assign(Object.assign(Object.assign({}, divStyle), buttonStyle), cssVars),
+        transition: transition,
+        variants: variants,
+        initial: initial,
+        animate: animate,
+        exit: exit,
+        onClick: e => handleClick(e)
+    }, rest, {
+        disabled: isDisabled || playing,
+        "aria-disabled": isDisabled || playing,
+        "aria-busy": playing,
+        children: [ !playing && iconLeft && jsxRuntime.jsx("div", {
+            className: css.icon,
+            "aria-hidden": "true",
+            children: jsxRuntime.jsx(Icon.Icon, {
+                name: iconLeft,
+                size: iconSize,
+                strokeColor: colorStyles[variant].iconColor[btnState],
+                pointer: !1,
+                tabIndex: -1,
+                fill: iconFill
+            })
+        }), playing && iconLeft && jsxRuntime.jsx("div", {
+            className: css.icon,
+            "aria-hidden": "true",
+            children: jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, {
+                decorative: !0,
+                show: playing,
+                size: iconSize,
+                color: progressColor,
+                inline: !0
+            })
+        }), playing && !iconLeft && !iconRight && jsxRuntime.jsx("div", {
+            className: css.centerProgress,
+            "aria-hidden": "true",
+            children: jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, {
+                decorative: !0,
+                show: playing,
+                size: iconSize,
+                color: progressColor,
+                inline: !1
+            })
+        }), hasContent && jsxRuntime.jsx("div", {
+            className: `${css.label}${hasChildren ? ` ${css.children}` : ""}${!playing || iconLeft || iconRight ? "" : ` ${css.labelHidden}`}`,
+            children: buttonContent
+        }), playing && iconRight && jsxRuntime.jsx("div", {
+            className: css.icon,
+            "aria-hidden": "true",
+            children: jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, {
+                decorative: !0,
+                show: playing,
+                size: iconSize,
+                color: progressColor,
+                inline: !0
+            })
+        }), !playing && iconRight && jsxRuntime.jsx("div", {
+            className: css.icon,
+            "aria-hidden": "true",
+            children: jsxRuntime.jsx(Icon.Icon, {
+                name: iconRight,
+                size: iconSize,
+                strokeColor: colorStyles[variant].iconColor[btnState],
+                pointer: !1,
+                tabIndex: -1,
+                fill: iconFill
+            })
+        }), jsxRuntime.jsx(Dot.Dot, {
+            show: !playing && showDot
+        }), !playing && void 0 !== count && 0 !== count && jsxRuntime.jsx("div", {
+            className: css.count,
+            children: jsxRuntime.jsx(Badge.Badge, {
+                variant: "light",
+                count: count,
+                "aria-live": "off"
+            })
+        }) ]
+    }));
+});
+
+ButtonComponent.displayName = "Button";
+
+const Button = React.memo(ButtonComponent);
+
+exports.Button = Button;