@apple-pie/slice 0.1.59 → 0.2.0

package/dist/cjs/theme/themes.js

@@ -1,34 +1,7 @@
 "use strict";
 
-var theme_colors = require("./colors.js"), theme_corners = require("./corners.js"), theme_elevations = require("./elevations.js"), theme_motion = require("./motion.js"), theme_type = require("./type.js");
+require("./colors.js"), require("./corners.js"), require("./elevations.js"), require("./motion.js");
 
-const spacing = {
-    xxs: 2,
-    xs: 4,
-    s: 8,
-    m: 16,
-    l: 24,
-    xl: 32,
-    xxl: 64,
-    h: 128
-}, lightTheme = {
-    name: "lightMode",
-    coreColors: theme_colors.coreColors,
-    colors: theme_colors.light,
-    type: theme_type.type,
-    corners: theme_corners.corners,
-    elevations: theme_elevations.elevations,
-    spacing: spacing,
-    motion: theme_motion.motion
-}, darkTheme = {
-    name: "darkMode",
-    coreColors: theme_colors.coreColors,
-    colors: theme_colors.dark,
-    type: theme_type.type,
-    corners: theme_corners.corners,
-    elevations: theme_elevations.elevations,
-    spacing: spacing,
-    motion: theme_motion.motion
-};
+var theme_themes = require("../chunks/themes-bwU5x3_5.js");
 
-exports.darkTheme = darkTheme, exports.lightTheme = lightTheme, exports.spacing = spacing;
+require("./type.js"), exports.darkTheme = theme_themes.darkTheme, exports.lightTheme = theme_themes.lightTheme;

package/dist/cjs/theme/type.js

@@ -12,6 +12,7 @@ const fontFamily = 'var(--slice-font-family, "Funnel Sans")', fontWeights = {
     m: "0.9375rem",
     l: "1rem",
     xl: "1.0625rem",
+    xxl: "1.125rem",
     h1: "4.25rem",
     h2: "3.5rem",
     h3: "2.75rem",
@@ -46,6 +47,9 @@ const fontFamily = 'var(--slice-font-family, "Funnel Sans")', fontWeights = {
     "body-xl-regular": `\n      font-family: ${fontFamily};\n      font-weight: ${fontWeights.regular};\n      font-size: ${fontSizes.xl};\n      line-height: ${lineHeights.xxl};\n      text-decoration: none;\n      letter-spacing: ${letterSpacings.xs}`,
     "body-xl-medium": `\n      font-family: ${fontFamily};\n      font-weight: ${fontWeights.medium};\n      font-size: ${fontSizes.xl};\n      line-height: ${lineHeights.xxl};\n      text-decoration: none;\n      letter-spacing: ${letterSpacings.xs}`,
     "body-xl-bold": `\n      font-family: ${fontFamily};\n      font-weight: ${fontWeights.bold};\n      font-size: ${fontSizes.xl};\n      line-height: ${lineHeights.xxl};\n      text-decoration: none;\n      letter-spacing: ${letterSpacings.s}`,
+    "body-xxl-regular": `\n      font-family: ${fontFamily};\n      font-weight: ${fontWeights.regular};\n      font-size: ${fontSizes.xxl};\n      line-height: ${lineHeights.m};\n      text-decoration: none;\n      letter-spacing: ${letterSpacings.s}`,
+    "body-xxl-medium": `\n      font-family: ${fontFamily};\n      font-weight: ${fontWeights.medium};\n      font-size: ${fontSizes.xxl};\n      line-height: ${lineHeights.m};\n      text-decoration: none;\n      letter-spacing: ${letterSpacings.s}`,
+    "body-xxl-bold": `\n      font-family: ${fontFamily};\n      font-weight: ${fontWeights.bold};\n      font-size: ${fontSizes.xxl};\n      line-height: ${lineHeights.m};\n      text-decoration: none;\n      letter-spacing: ${letterSpacings.s}`,
     h1: `\n      font-family: ${fontFamily};\n      font-weight: ${fontWeights.extra};\n      font-size: ${fontSizes.h1};\n      line-height: ${lineHeights.xs};\n      letter-spacing: ${letterSpacings.m}`,
     h2: `\n      font-family: ${fontFamily};\n      font-weight: ${fontWeights.extra};\n      font-size: ${fontSizes.h2};\n      line-height: ${lineHeights.xs};\n      letter-spacing: ${letterSpacings.m}`,
     h3: `\n      font-family: ${fontFamily};\n      font-weight: ${fontWeights.extra};\n      font-size: ${fontSizes.h3};\n      line-height: ${lineHeights.xs};\n      letter-spacing: ${letterSpacings.m}`,
@@ -173,6 +177,30 @@ const fontFamily = 'var(--slice-font-family, "Funnel Sans")', fontWeights = {
         textDecoration: "none",
         letterSpacing: `${letterSpacings.s}`
     },
+    "body-xxl-regular": {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.regular}`,
+        fontSize: `${fontSizes.xxl}`,
+        lineHeight: `${lineHeights.m}`,
+        textDecoration: "none",
+        letterSpacing: `${letterSpacings.s}`
+    },
+    "body-xxl-medium": {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.medium}`,
+        fontSize: `${fontSizes.xxl}`,
+        lineHeight: `${lineHeights.m}`,
+        textDecoration: "none",
+        letterSpacing: `${letterSpacings.s}`
+    },
+    "body-xxl-bold": {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.bold}`,
+        fontSize: `${fontSizes.xxl}`,
+        lineHeight: `${lineHeights.m}`,
+        textDecoration: "none",
+        letterSpacing: `${letterSpacings.s}`
+    },
     h1: {
         fontFamily: `${fontFamily}`,
         fontWeight: `${fontWeights.extra}`,
@@ -234,6 +262,9 @@ exports.lineHeights = lineHeights, exports.type = type, exports.typeCssClasses =
     "body-xl-regular": "body-xl-regular",
     "body-xl-medium": "body-xl-medium",
     "body-xl-bold": "body-xl-bold",
+    "body-xxl-regular": "body-xxl-regular",
+    "body-xxl-medium": "body-xxl-medium",
+    "body-xxl-bold": "body-xxl-bold",
     h1: "h1",
     h2: "h2",
     h3: "h3",

package/dist/cjs/theme.js

@@ -1,8 +1,15 @@
 "use strict";
 
-var theme_themes = require("./theme/themes.js"), theme_colors = require("./theme/colors.js"), theme_elevations = require("./theme/elevations.js"), theme_motion = require("./theme/motion.js");
+var theme_themes = require("./chunks/themes-bwU5x3_5.js"), resolveColor = require("./chunks/resolveColor-DkYThq2J.js"), theme_colors = require("./theme/colors.js"), theme_elevations = require("./theme/elevations.js"), theme_motion = require("./theme/motion.js"), breakpoints = require("./chunks/breakpoints-BDw1OJh9.js");
 
 require("./theme/corners.js"), require("./theme/type.js"), exports.darkTheme = theme_themes.darkTheme, 
 exports.lightTheme = theme_themes.lightTheme, exports.spacing = theme_themes.spacing, 
-exports.dark = theme_colors.dark, exports.light = theme_colors.light, exports.Elevation = theme_elevations.elevations, 
-exports.elevations = theme_elevations.elevations, exports.motion = theme_motion.motion;
+exports.resolveColor = resolveColor.resolveColor, exports.dark = theme_colors.dark, 
+exports.light = theme_colors.light, exports.Elevation = theme_elevations.elevations, 
+exports.elevations = theme_elevations.elevations, exports.motion = theme_motion.motion, 
+Object.defineProperty(exports, "FormFactor", {
+    enumerable: !0,
+    get: function() {
+        return breakpoints.FormFactor;
+    }
+}), exports.breakpoints = breakpoints.breakpoints;

package/dist/cjs/utils/index.js

@@ -1,10 +1,12 @@
 "use strict";
 
-var misc = require("../chunks/misc-BallZ366.js"), debounce = require("../chunks/debounce-Bi3gt_i6.js"), rafThrottle = require("../chunks/rafThrottle-DdNEpMIw.js"), colors = require("../chunks/colors-BDwwQ2Y3.js"), IndexedDB = require("../chunks/IndexedDB-ClIpb2ob.js"), audioVisualizer = require("../chunks/audioVisualizer-C74sRH6D.js"), MdStreamBuffer = require("../chunks/MdStreamBuffer-DiL2zm2P.js"), SSEConnection = require("../chunks/SSEConnection-CTxnFASS.js"), WSConnection = require("../chunks/WSConnection-CDWOkk8n.js"), WebRTCConnection = require("../chunks/WebRTCConnection-b8jZNRYr.js"), broadcastChannel = require("../chunks/broadcastChannel-DLSijpj_.js");
+var resolveShortcut = require("../chunks/resolveShortcut-DiQdb8VR.js"), misc = require("../chunks/misc-PmT7cZzC.js"), rafThrottle = require("../chunks/rafThrottle-BRdLzPo7.js"), colors = require("../chunks/colors-hDzzq_Dk.js"), resolveColor = require("../chunks/resolveColor-DkYThq2J.js"), IndexedDB = require("../chunks/IndexedDB-DwKh2Gfp.js"), audioVisualizer = require("../chunks/audioVisualizer-Bak7PWOv.js"), MdStreamBuffer = require("../chunks/MdStreamBuffer-B0KtaR_k.js"), SSEConnection = require("../chunks/SSEConnection-BXWkgT66.js"), WSConnection = require("../chunks/WSConnection-DZKTeDtZ.js"), WebRTCConnection = require("../chunks/WebRTCConnection-DIUG7Gx3.js"), broadcastChannel = require("../chunks/broadcastChannel-DdPZ3LUB.js"), files = require("../chunks/files-RYD9L_pI.js");
 
-require("../chunks/tslib.es6-B2uEaXWi.js"), exports.copyToClipboard = misc.copyToClipboard, 
-exports.hexToRgb = misc.hexToRgb, exports.debounce = debounce.debounce, exports.rafThrottle = rafThrottle.rafThrottle, 
-exports.addOpacity = colors.addOpacity, exports.tintFromColor = colors.tintFromColor, 
+require("../chunks/tslib.es6-B8JY5ZGw.js"), require("../theme/colors.js"), exports.resolveShortcut = resolveShortcut.resolveShortcut, 
+exports.classNames = misc.classNames, exports.copyToClipboard = misc.copyToClipboard, 
+exports.hexToRgb = misc.hexToRgb, exports.setStyle = misc.setStyle, exports.rafThrottle = rafThrottle.rafThrottle, 
+exports.addOpacity = colors.addOpacity, exports.resolveTransparent = colors.resolveTransparent, 
+exports.tintFromColor = colors.tintFromColor, exports.resolveColor = resolveColor.resolveColor, 
 exports.IndexedDB = IndexedDB.IndexedDB, exports.AudioVisualizer = audioVisualizer.AudioVisualizer, 
 exports.MdBuffer = MdStreamBuffer.MdBuffer, exports.SSEConnection = SSEConnection.SSEConnection, 
 exports.WSConnection = WSConnection.WSConnection, exports.WebRTCConnection = WebRTCConnection.WebRTCConnection, 
@@ -13,4 +15,21 @@ exports.BrowserChannel = broadcastChannel.BrowserChannel, Object.defineProperty(
     get: function() {
         return broadcastChannel.MessageType;
     }
-});
+}), exports.resolveFileIconType = files.resolveFileIconType, exports.debounce = 
+/**
+ * Delay a function call until activity stops, with cancel and flush helpers.
+ */
+function(func, delay) {
+    let timeoutId = null, lastArgs = null;
+    const debounced = function(...args) {
+        lastArgs = args, null !== timeoutId && clearTimeout(timeoutId), timeoutId = setTimeout(() => {
+            func.apply(this, null != lastArgs ? lastArgs : []), timeoutId = null, lastArgs = null;
+        }, delay);
+    };
+    return debounced.cancel = () => {
+        null !== timeoutId && (clearTimeout(timeoutId), timeoutId = null, lastArgs = null);
+    }, debounced.flush = function() {
+        null !== timeoutId && null !== lastArgs && (clearTimeout(timeoutId), func.apply(this, lastArgs), 
+        timeoutId = null, lastArgs = null);
+    }, debounced;
+};

package/dist/cjs/utils/objects/index.js

@@ -1,8 +1,8 @@
 "use strict";
 
-var IndexedDB = require("../../chunks/IndexedDB-ClIpb2ob.js"), audioVisualizer = require("../../chunks/audioVisualizer-C74sRH6D.js"), MdStreamBuffer = require("../../chunks/MdStreamBuffer-DiL2zm2P.js"), SSEConnection = require("../../chunks/SSEConnection-CTxnFASS.js"), WSConnection = require("../../chunks/WSConnection-CDWOkk8n.js"), WebRTCConnection = require("../../chunks/WebRTCConnection-b8jZNRYr.js"), broadcastChannel = require("../../chunks/broadcastChannel-DLSijpj_.js");
+var IndexedDB = require("../../chunks/IndexedDB-DwKh2Gfp.js"), audioVisualizer = require("../../chunks/audioVisualizer-Bak7PWOv.js"), MdStreamBuffer = require("../../chunks/MdStreamBuffer-B0KtaR_k.js"), SSEConnection = require("../../chunks/SSEConnection-BXWkgT66.js"), WSConnection = require("../../chunks/WSConnection-DZKTeDtZ.js"), WebRTCConnection = require("../../chunks/WebRTCConnection-DIUG7Gx3.js"), broadcastChannel = require("../../chunks/broadcastChannel-DdPZ3LUB.js");
 
-require("../../chunks/tslib.es6-B2uEaXWi.js"), exports.IndexedDB = IndexedDB.IndexedDB, 
+require("../../chunks/tslib.es6-B8JY5ZGw.js"), exports.IndexedDB = IndexedDB.IndexedDB, 
 exports.AudioVisualizer = audioVisualizer.AudioVisualizer, exports.MdBuffer = MdStreamBuffer.MdBuffer, 
 exports.SSEConnection = SSEConnection.SSEConnection, exports.WSConnection = WSConnection.WSConnection, 
 exports.WebRTCConnection = WebRTCConnection.WebRTCConnection, exports.BrowserChannel = broadcastChannel.BrowserChannel, 

package/dist/cjs/workers/uploads/uploads.js

@@ -1,5 +1,5 @@
 "use strict";
 
-var uploadsWorker = require("../../chunks/uploads-worker-DzrC-YiR.js");
+var uploadsWorker = require("../../chunks/uploads-worker-stCHn8-D.js");
 
-require("../../chunks/tslib.es6-B2uEaXWi.js"), uploadsWorker.registerUploadsWorker();
+require("../../chunks/tslib.es6-B8JY5ZGw.js"), uploadsWorker.registerUploadsWorker();

package/dist/css/type.module.css

@@ -133,6 +133,33 @@
 	letter-spacing: var(--letter-spacing-s);
 }
 
+.body-xxl-regular {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-regular);
+	font-size: var(--font-size-xxl);
+	line-height: var(--line-height-m);
+	text-decoration: none;
+	letter-spacing: var(--letter-spacing-s);
+}
+
+.body-xxl-medium {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-medium);
+	font-size: var(--font-size-xxl);
+	line-height: var(--line-height-m);
+	text-decoration: none;
+	letter-spacing: var(--letter-spacing-s);
+}
+
+.body-xxl-bold {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-bold);
+	font-size: var(--font-size-xxl);
+	line-height: var(--line-height-m);
+	text-decoration: none;
+	letter-spacing: var(--letter-spacing-s);
+}
+
 .h1 {
 	font-family: var(--font-family), sans-serif;
 	font-weight: var(--font-weight-extra);

package/dist/esm/chunks/ActionButton-guWI4qko.mjs

@@ -0,0 +1,235 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import { animate } from "motion/mini";
+
+import { getValueTransition, useAnimationControls, motion, createGeneratorEasing, spring, inertia } from "motion/react";
+
+import React, { useState, useRef, 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 "./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 { u as usePrefersReducedMotion } from "./usePrefersReducedMotion-BWAwMMLE.mjs";
+
+import { B as Badge } from "./Badge-DpnuS-Ey.mjs";
+
+import { D as Dot } from "./Dot-CG395pS6.mjs";
+
+import { I as Icon } from "./Icon-43T0fkr6.mjs";
+
+import { T as ToolTipType, b as buttonStyleDefaults } from "./sharedTypes-DYXO7VNa.mjs";
+
+var css_button = "IconButton-module_button__rziqa flexBox-module_row__z24tF", css_background = "IconButton-module_background__BAuJE", css_content = "IconButton-module_content__nlYrR", css_icon = "IconButton-module_icon__2DDWy", css_indicators = "IconButton-module_indicators__7TT69", css_count = "IconButton-module_count__6r373", css_slot = "IconButton-module_slot__ZG-D0", css_frame = "IconButton-module_frame__Bip5r";
+
+const sizes = buttonStyleDefaults.sizes;
+
+/** Keep the native button mounted when a live motion preference changes. */ function AnimatedSurface({target: target, transition: transition, reduceMotion: reduceMotion, className: className, children: children}) {
+    const controls = useAnimationControls(), mounted = useRef(!1);
+    return useEffect(() => {
+        controls.stop();
+        const {transition: _variantTiming, transitionEnd: transitionEnd} = target, values = __rest(target, [ "transition", "transitionEnd" ]);
+        if (reduceMotion || !mounted.current) {
+            const settled = Object.fromEntries(Object.entries(Object.assign(Object.assign({}, values), transitionEnd)).map(([key, value]) => [ key, Array.isArray(value) ? [ ...value ].reverse().find(item => null !== item) : value ]));
+            controls.set(settled);
+        } else controls.start(Object.assign(Object.assign({}, values), {
+            transitionEnd: transitionEnd,
+            transition: transition
+        }));
+        return mounted.current = !0, () => controls.stop();
+    }, [ controls, target, transition, reduceMotion ]), jsx(motion.span, {
+        "aria-hidden": "true",
+        className: className,
+        initial: !1,
+        animate: controls,
+        children: children
+    });
+}
+
+/** Let the browser blend translucent CSS colors, including live theme color-mix() values. */ function AnimatedBackground({color: color, transition: transition, reduceMotion: reduceMotion}) {
+    const ref = useRef(null), mounted = useRef(!1);
+    return useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element) return;
+        const _a = getValueTransition(transition, "backgroundColor"), {type: type} = _a, timing = __rest(_a, [ "type" ]);
+        if (!mounted.current || reduceMotion || !1 === type || "function" != typeof element.animate) return element.style.backgroundColor = color, 
+        void (mounted.current = !0);
+        const generator = "spring" === type ? spring : "inertia" === type || "decay" === type ? inertia : "function" == typeof type ? type : void 0, animation = animate(element, {
+            backgroundColor: color
+        }, (() => {
+            if (!generator || generator.applyToOptions) return Object.assign(Object.assign({}, timing), {
+                type: generator
+            });
+            const generated = createGeneratorEasing(Object.assign(Object.assign({}, timing), {
+                duration: void 0 === timing.duration ? void 0 : 1e3 * timing.duration
+            }), 100, generator);
+            return Object.assign(Object.assign({}, timing), {
+                ease: generated.ease,
+                duration: generated.duration
+            });
+        })());
+        return () => animation.stop();
+    }, [ color, transition, reduceMotion ]), jsx("span", {
+        ref: ref,
+        "aria-hidden": "true",
+        className: css_background
+    });
+}
+
+const ActionButton = React.memo(function(rawProps) {
+    const props = resolveColorProps(rawProps), {actionName: actionName = "Action", labelContent: labelContent, contentClassName: contentClassName, iconSelected: iconSelected, iconFrame: iconFrame = !1, deselect: deselect = !0, textColor: textColor = "var(--core-text-primary)", textColorHover: textColorHover = "var(--core-text-primary)", textColorSelected: textColorSelected = "var(--core-text-primary)", buttonSize: buttonSize = "m", iconSize: iconSize = 20, iconStrokeWidth: iconStrokeWidth, icon: icon = "basic.more-horiz", iconFill: iconFill = !1, iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-primary)", iconColorSelected: iconColorSelected = "var(--core-text-primary)", backgroundColor: backgroundColor = "var(--core-surface-secondary)", backgroundColorHover: backgroundColorHover = "var(--core-outline-primary)", backgroundColorSelected: backgroundColorSelected = "var(--core-outline-primary)", borderWidth: borderWidth = 0, borderColor: borderColor = "var(--core-outline-primary)", borderRadius: borderRadius = "50%", disabled: disabled = !1, hover: hover = !0, toggle: toggle = !1, selected: selected, defaultSelected: defaultSelected = !1, toggleIcon: toggleIcon = !1, showDot: showDot = !1, count: count = 0, tooltip: tooltip, motionValues: motionValues, transition: transition, onChange: onChange, onToolTip: onToolTip, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, className: className, style: style, type: type = "button"} = props, buttonAttributes = __rest(props, [ "actionName", "labelContent", "contentClassName", "iconSelected", "iconFrame", "deselect", "textColor", "textColorHover", "textColorSelected", "buttonSize", "iconSize", "iconStrokeWidth", "icon", "iconFill", "iconColor", "iconColorHover", "iconColorSelected", "backgroundColor", "backgroundColorHover", "backgroundColorSelected", "borderWidth", "borderColor", "borderRadius", "disabled", "hover", "toggle", "selected", "defaultSelected", "toggleIcon", "showDot", "count", "tooltip", "motionValues", "transition", "onChange", "onToolTip", "onClick", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "className", "style", "type" ]), [internalSelected, setInternalSelected] = useState(defaultSelected), [hovered, setHovered] = useState(!1), on = toggle && (null != selected ? selected : internalSelected), ref = useRef(null), focused = useRef(!1), pointerOver = useRef(!1), tipOpen = useRef(!1), tipCallback = useRef(onToolTip), hasTipCallback = Boolean(onToolTip), reduceMotion = usePrefersReducedMotion(), {current: theme} = useTheme(), themeMotion = theme.motion, motionTransition = useMemo(() => getWaterTransition(themeMotion, transition), [ themeMotion, transition ]), activeHover = hover && hovered && !disabled, size = "auto" === buttonSize ? 0 : "number" == typeof buttonSize ? Number.isFinite(buttonSize) && buttonSize > 0 ? buttonSize : sizes.m : null !== (_a = sizes[buttonSize]) && void 0 !== _a ? _a : sizes.m;
+    var _a;
+    const resolvedIconSize = Number.isFinite(iconSize) && iconSize >= 0 ? iconSize : 20, radius = "number" == typeof borderRadius ? `${Number.isFinite(borderRadius) ? Math.max(0, borderRadius) : 0}px` : borderRadius, color = on ? iconColorSelected : activeHover ? iconColorHover : iconColor, background = on ? backgroundColorSelected : activeHover ? backgroundColorHover : backgroundColor, iconTarget = useMemo(() => {
+        const variant = null == motionValues ? void 0 : motionValues[on ? "selected" : "unselected"], resolved = "function" == typeof variant ? variant(on, {}, {}) : variant;
+        return Object.assign(Object.assign({
+            rotate: 0,
+            scale: 1,
+            opacity: 1
+        }, "object" == typeof resolved ? resolved : {}), {
+            color: null != color ? color : "var(--core-text-primary)"
+        });
+    }, [ motionValues, on, color ]), contentColor = on ? textColorSelected : activeHover ? textColorHover : textColor, textTarget = useMemo(() => ({
+        color: contentColor
+    }), [ contentColor ]), cssVars = {
+        "--ib-button-size": `${size}px`,
+        "--ib-icon-size": `${resolvedIconSize}px`,
+        "--ib-border-radius": radius,
+        "--ib-border-width": `${Number.isFinite(borderWidth) ? Math.max(0, borderWidth) : 0}px`,
+        "--ib-border-color": borderColor
+    }, clearTip = () => {
+        var _a;
+        tipOpen.current && (null === (_a = tipCallback.current) || void 0 === _a || _a.call(tipCallback, null)), 
+        tipOpen.current = !1;
+    }, showTip = event => {
+        !disabled && tooltip && onToolTip && (tipOpen.current = !0, tipCallback.current = onToolTip, 
+        onToolTip({
+            type: ToolTipType.button,
+            payload: {
+                label: tooltip
+            },
+            ref: ref,
+            event: event
+        }));
+    };
+    return useEffect(() => {
+        var _a;
+        return tooltip && hasTipCallback || !tipOpen.current || (null === (_a = tipCallback.current) || void 0 === _a || _a.call(tipCallback, null), 
+        tipOpen.current = !1), disabled && (setHovered(!1), pointerOver.current = !1, focused.current = !1), 
+        () => {
+            var _a;
+            tipOpen.current && (null === (_a = tipCallback.current) || void 0 === _a || _a.call(tipCallback, null)), 
+            tipOpen.current = !1;
+        };
+    }, [ disabled, tooltip, hasTipCallback ]), jsxs("button", Object.assign({}, buttonAttributes, {
+        ref: ref,
+        type: type,
+        disabled: disabled,
+        className: `${css_button}${className ? ` ${className}` : ""}`,
+        style: Object.assign(Object.assign(Object.assign({}, style), cssVars), iconFrame ? {
+            borderWidth: 0
+        } : {}),
+        "aria-label": "string" == typeof actionName && actionName.trim() ? actionName.trim() : "Action",
+        "aria-labelledby": void 0,
+        "aria-disabled": disabled,
+        "aria-pressed": toggle ? on : void 0,
+        onClick: event => {
+            if (!disabled && (null == onClick || onClick(event), !event.defaultPrevented && (clearTip(), 
+            toggle && (!on || deselect)))) {
+                const next = !on;
+                void 0 === selected && setInternalSelected(next), null == onChange || onChange(next);
+            }
+        },
+        onMouseEnter: event => {
+            null == onMouseEnter || onMouseEnter(event), disabled || event.defaultPrevented || (pointerOver.current = !0, 
+            setHovered(!0), showTip(event));
+        },
+        onMouseLeave: event => {
+            null == onMouseLeave || onMouseLeave(event), pointerOver.current = !1, setHovered(!1), 
+            focused.current || clearTip();
+        },
+        onFocus: event => {
+            null == onFocus || onFocus(event), disabled || event.defaultPrevented || (focused.current = !0, 
+            showTip());
+        },
+        onBlur: event => {
+            null == onBlur || onBlur(event), focused.current = !1, pointerOver.current || clearTip();
+        },
+        children: [ !iconFrame && jsx(AnimatedBackground, {
+            color: background,
+            transition: motionTransition,
+            reduceMotion: reduceMotion
+        }), icon && jsxs("span", {
+            className: `${css_slot}${iconFrame ? ` ${css_frame}` : ""}`,
+            "aria-hidden": "true",
+            children: [ iconFrame && jsx(AnimatedBackground, {
+                color: background,
+                transition: motionTransition,
+                reduceMotion: reduceMotion
+            }), jsx("span", {
+                className: css_content,
+                children: jsx(AnimatedSurface, {
+                    className: css_icon,
+                    target: iconTarget,
+                    transition: motionTransition,
+                    reduceMotion: reduceMotion,
+                    children: jsx(Icon, {
+                        name: on && iconSelected ? iconSelected : icon,
+                        size: resolvedIconSize,
+                        strokeColor: "currentColor",
+                        stroke: iconStrokeWidth,
+                        fill: iconFill,
+                        toggle: toggleIcon && on,
+                        pointer: !1,
+                        tabIndex: -1
+                    })
+                })
+            }) ]
+        }), null != labelContent && jsx(AnimatedSurface, {
+            className: null != contentClassName ? contentClassName : css_content,
+            target: textTarget,
+            transition: motionTransition,
+            reduceMotion: reduceMotion,
+            children: labelContent
+        }), (showDot || 0 !== count) && jsxs("span", {
+            className: css_indicators,
+            "aria-hidden": "true",
+            children: [ jsx(Dot, {
+                show: showDot,
+                "aria-hidden": "true",
+                role: "presentation"
+            }), 0 !== count && jsx("span", {
+                className: css_count,
+                children: jsx(Badge, {
+                    variant: "light",
+                    count: count,
+                    hideZero: !0
+                })
+            }) ]
+        }) ]
+    }));
+});
+
+export { ActionButton as A };