@telefonica/mistica 15.20.1 → 16.0.0

package/dist-es/accordion.js

@@ -78,104 +78,103 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsxs as R, jsx as o } from "react/jsx-runtime";
-import * as s from "react";
-import { Content as S } from "./list.js";
-import T from "./icons/icon-chevron.js";
+import { jsxs as C, jsx as o } from "react/jsx-runtime";
+import * as i from "react";
+import { Content as N } from "./list.js";
+import S from "./icons/icon-chevron.js";
 import A from "./box.js";
-import { itemContent as w, touchableBackgroundInverse as O, touchableBackground as y, chevronContainer as D, panelTransitionClasses as P, panelContainer as V, panel as k } from "./accordion.css-mistica.js";
-import E from "./stack.js";
-import { BaseTouchable as _ } from "./touchable.js";
-import L from "classnames";
+import { itemContent as O, touchableBackgroundInverse as T, touchableBackground as w, chevronContainer as y, panelTransitionClasses as D, panelContainer as P, panel as V } from "./accordion.css-mistica.js";
+import k from "./stack.js";
+import { BaseTouchable as E } from "./touchable.js";
+import _ from "classnames";
 import { vars as h } from "./skins/skin-contract.css-mistica.js";
-import { getPrefixedDataAttributes as B } from "./utils/dom.js";
-import X from "./divider.js";
-import { Boxed as j } from "./boxed.js";
-import { useIsInverseVariant as M } from "./theme-variant-context.js";
-import { useAriaId as v } from "./hooks.js";
-import { CSSTransition as q } from "react-transition-group";
-import { isRunningAcceptanceTest as z } from "./utils/platform.js";
-import { sprinkles as F } from "./sprinkles.css-mistica.js";
-const C = 400, g = /*#__PURE__*/ s.createContext({
+import { getPrefixedDataAttributes as R } from "./utils/dom.js";
+import L from "./divider.js";
+import { Boxed as M } from "./boxed.js";
+import { useIsInverseOrMediaVariant as X } from "./theme-variant-context.js";
+import { CSSTransition as j } from "react-transition-group";
+import { isRunningAcceptanceTest as q } from "./utils/platform.js";
+import { sprinkles as z } from "./sprinkles.css-mistica.js";
+const v = 400, g = /*#__PURE__*/ i.createContext({
     index: [],
     toggle: ()=>{}
-}), H = ()=>s.useContext(g), b = (param)=>{
-    let { value: t, defaultValue: r, onChange: n, singleOpen: i } = param;
-    const u = t !== void 0, d = (e)=>e === void 0 ? [] : typeof e == "number" ? [
+}), F = ()=>i.useContext(g), B = (param)=>{
+    let { value: t, defaultValue: r, onChange: n, singleOpen: c } = param;
+    const m = t !== void 0, d = (e)=>e === void 0 ? [] : typeof e == "number" ? [
             e
-        ] : e, [c, a] = s.useState(d(r));
-    s.useEffect(()=>{
-        if (c.length > 1 && i) {
+        ] : e, [s, a] = i.useState(d(r));
+    i.useEffect(()=>{
+        if (s.length > 1 && c) {
             const e = [
-                ...c
+                ...s
             ];
             e.splice(1), a(e);
         }
     }, [
-        i,
-        c
+        c,
+        s
     ]);
     const p = (e, l)=>{
         if (!l) return [
             e
         ];
-        const m = l.indexOf(e);
+        const u = l.indexOf(e);
         let I = [
             ...l
         ];
-        return m === -1 ? i ? I = [
+        return u === -1 ? c ? I = [
             e
-        ] : I.push(e) : I.splice(m, 1), I;
+        ] : I.push(e) : I.splice(u, 1), I;
     }, f = (e)=>{
-        if (u || a(p(e, c)), n) {
-            const l = (u ? d(t) : c).includes(e);
+        if (m || a(p(e, s)), n) {
+            const l = (m ? d(t) : s).includes(e);
             n(e, !l);
         }
     };
-    return u ? [
+    return m ? [
         d(t),
         f
     ] : [
-        c,
+        s,
         f
     ];
-}, U = (t)=>{
+}, H = (t)=>{
     const r = t == null ? void 0 : t.closest("[data-accordion]");
     if (r) return Array.from(r.querySelectorAll("[data-accordion-item]")).filter((n)=>n.closest("[data-accordion]") === r).findIndex((n)=>n === t);
-}, N = /*#__PURE__*/ s.forwardRef((_param, u)=>{
-    var { content: t, dataAttributes: r, trackingEvent: n } = _param, i = _object_without_properties(_param, [
+}, b = /*#__PURE__*/ i.forwardRef((_param, m)=>{
+    var { content: t, dataAttributes: r, trackingEvent: n } = _param, c = _object_without_properties(_param, [
         "content",
         "dataAttributes",
         "trackingEvent"
     ]);
-    const d = s.useRef(null), c = s.useRef(null), { index: a, toggle: p } = H(), f = M(), e = v(), l = v(), [m, I] = s.useState(), x = m !== void 0 && (a == null ? void 0 : a.includes(m));
-    return s.useEffect(()=>{
-        I(U(c.current));
-    }, []), /* @__PURE__ */ R("div", _object_spread_props(_object_spread({
-        ref: c
-    }, B(_object_spread_props(_object_spread({}, r), {
+    const d = i.useRef(null), s = i.useRef(null), { index: a, toggle: p } = F(), f = X(), e = i.useId(), l = i.useId(), [u, I] = i.useState(), x = u !== void 0 && (a == null ? void 0 : a.includes(u));
+    return i.useEffect(()=>{
+        I(H(s.current));
+    }, []), /* @__PURE__ */ C("div", _object_spread_props(_object_spread({
+        ref: s
+    }, R(_object_spread_props(_object_spread({}, r), {
         "accordion-item": !0
     }))), {
         children: [
-            /* @__PURE__ */ o(_, {
-                ref: u,
-                className: L(w, f ? O : y),
+            /* @__PURE__ */ o(E, {
+                ref: m,
+                className: _(O, f ? T : w),
                 onPress: ()=>{
-                    m !== void 0 && p(m);
+                    u !== void 0 && p(u);
                 },
                 trackingEvent: n,
                 "aria-expanded": x,
                 "aria-controls": l,
                 children: /* @__PURE__ */ o(A, {
                     paddingX: 16,
-                    children: /* @__PURE__ */ o(S, _object_spread_props(_object_spread({
+                    children: /* @__PURE__ */ o(N, _object_spread_props(_object_spread({
                         labelId: e
-                    }, i), {
+                    }, c), {
                         right: /* @__PURE__ */ o("div", {
-                            className: D,
-                            children: /* @__PURE__ */ o(T, {
+                            className: y,
+                            children: /* @__PURE__ */ o(S, {
                                 size: 24,
-                                transitionDuration: C,
+                                transitionDuration: v,
                                 direction: x ? "up" : "down",
                                 color: f ? h.colors.inverse : x ? h.colors.neutralHigh : h.colors.neutralMedium
                             })
@@ -183,18 +182,18 @@ const C = 400, g = /*#__PURE__*/ s.createContext({
                     }))
                 })
             }),
-            /* @__PURE__ */ o(q, {
+            /* @__PURE__ */ o(j, {
                 in: x,
-                timeout: z() ? 0 : C,
+                timeout: q() ? 0 : v,
                 nodeRef: d,
-                classNames: P,
+                classNames: D,
                 mountOnEnter: !0,
                 unmountOnExit: !0,
                 children: /* @__PURE__ */ o("div", {
-                    className: V,
+                    className: P,
                     ref: d,
                     children: /* @__PURE__ */ o("div", {
-                        className: k,
+                        className: V,
                         role: "region",
                         "aria-labelledby": e,
                         id: l,
@@ -208,71 +207,71 @@ const C = 400, g = /*#__PURE__*/ s.createContext({
             })
         ]
     }));
-}), ae = /*#__PURE__*/ s.forwardRef((_param, i)=>{
+}), se = /*#__PURE__*/ i.forwardRef((_param, c)=>{
     var { dataAttributes: t, role: r } = _param, n = _object_without_properties(_param, [
         "dataAttributes",
         "role"
     ]);
     return /* @__PURE__ */ o("div", {
         role: r,
-        className: F({
+        className: z({
             width: "100%"
         }),
-        children: /* @__PURE__ */ o(N, _object_spread_props(_object_spread({}, n), {
-            ref: i,
+        children: /* @__PURE__ */ o(b, _object_spread_props(_object_spread({}, n), {
+            ref: c,
             dataAttributes: _object_spread({
                 "component-name": "AccordionItem"
             }, t)
         }))
     });
-}), le = (param)=>{
-    let { children: t, dataAttributes: r, index: n, defaultIndex: i, onChange: u, singleOpen: d, role: c } = param;
-    const [a, p] = b({
+}), de = (param)=>{
+    let { children: t, dataAttributes: r, index: n, defaultIndex: c, onChange: m, singleOpen: d, role: s } = param;
+    const [a, p] = B({
         value: n,
-        defaultValue: i,
-        onChange: u,
+        defaultValue: c,
+        onChange: m,
         singleOpen: d
-    }), f = s.Children.toArray(t).filter(Boolean), e = f.length - 1;
+    }), f = i.Children.toArray(t).filter(Boolean), e = f.length - 1;
     return /* @__PURE__ */ o(g.Provider, {
         value: {
             index: a,
             toggle: p
         },
         children: /* @__PURE__ */ o("div", _object_spread_props(_object_spread({
-            role: c
-        }, B(_object_spread_props(_object_spread({}, r), {
+            role: s
+        }, R(_object_spread_props(_object_spread({}, r), {
             accordion: !0
         }), "Accordion")), {
-            children: f.map((l, m)=>/* @__PURE__ */ R(s.Fragment, {
+            children: f.map((l, u)=>/* @__PURE__ */ C(i.Fragment, {
                     children: [
                         l,
-                        m < e && /* @__PURE__ */ o(A, {
+                        u < e && /* @__PURE__ */ o(A, {
                             paddingX: 16,
-                            children: /* @__PURE__ */ o(X, {})
+                            children: /* @__PURE__ */ o(L, {})
                         })
                     ]
-                }, m))
+                }, u))
         }))
     });
-}, me = /*#__PURE__*/ s.forwardRef((_param, i)=>{
+}, ae = /*#__PURE__*/ i.forwardRef((_param, c)=>{
     var { dataAttributes: t, isInverse: r } = _param, n = _object_without_properties(_param, [
         "dataAttributes",
         "isInverse"
     ]);
-    return /* @__PURE__ */ o(j, {
+    return /* @__PURE__ */ o(M, {
         isInverse: r,
-        ref: i,
+        ref: c,
         dataAttributes: _object_spread({
             "component-name": "BoxedAccordionItem"
         }, t),
-        children: /* @__PURE__ */ o(N, _object_spread({}, n))
+        children: /* @__PURE__ */ o(b, _object_spread({}, n))
     });
-}), ue = (param)=>{
-    let { children: t, dataAttributes: r, index: n, defaultIndex: i, onChange: u, singleOpen: d, role: c } = param;
-    const [a, p] = b({
+}), le = (param)=>{
+    let { children: t, dataAttributes: r, index: n, defaultIndex: c, onChange: m, singleOpen: d, role: s } = param;
+    const [a, p] = B({
         value: n,
-        defaultValue: i,
-        onChange: u,
+        defaultValue: c,
+        onChange: m,
         singleOpen: d
     });
     return /* @__PURE__ */ o(g.Provider, {
@@ -280,9 +279,9 @@ const C = 400, g = /*#__PURE__*/ s.createContext({
             index: a,
             toggle: p
         },
-        children: /* @__PURE__ */ o(E, {
+        children: /* @__PURE__ */ o(k, {
             space: 16,
-            role: c,
+            role: s,
             dataAttributes: _object_spread({
                 "component-name": "BoxedAccordion",
                 accordion: !0
@@ -291,4 +290,4 @@ const C = 400, g = /*#__PURE__*/ s.createContext({
         })
     });
 };
-export { le as Accordion, ae as AccordionItem, ue as BoxedAccordion, me as BoxedAccordionItem };
+export { de as Accordion, se as AccordionItem, le as BoxedAccordion, ae as BoxedAccordionItem };

package/dist-es/avatar.js

@@ -82,7 +82,7 @@ import { jsx as n } from "react/jsx-runtime";
 import * as d from "react";
 import C from "./badge.js";
 import w from "./generated/mistica-icons/icon-user-account-regular.js";
-import { useIsInverseVariant as E } from "./theme-variant-context.js";
+import { useIsInverseOrMediaVariant as E } from "./theme-variant-context.js";
 import { avatar as L, image as P } from "./avatar.css-mistica.js";
 import { vars as a } from "./skins/skin-contract.css-mistica.js";
 import { getPrefixedDataAttributes as R } from "./utils/dom.js";
@@ -112,9 +112,9 @@ const $ = (r, o)=>{
         "dataAttributes"
     ]);
     var _s_backgroundColor, _s_textColor;
-    const l = E(), g = (_s_backgroundColor = s.backgroundColor) !== null && _s_backgroundColor !== void 0 ? _s_backgroundColor : l ? a.colors.brandHigh : a.colors.brandLow, b = (_s_textColor = s.textColor) !== null && _s_textColor !== void 0 ? _s_textColor : l ? a.colors.textPrimaryInverse : a.colors.textBrand, [h, i] = d.useState(!1);
+    const i = E(), g = (_s_backgroundColor = s.backgroundColor) !== null && _s_backgroundColor !== void 0 ? _s_backgroundColor : i ? a.colors.brandHigh : a.colors.brandLow, b = (_s_textColor = s.textColor) !== null && _s_textColor !== void 0 ? _s_textColor : i ? a.colors.textPrimaryInverse : a.colors.textBrand, [h, l] = d.useState(!1);
     d.useEffect(()=>{
-        i(!1);
+        l(!1);
     }, [
         o
     ]);
@@ -139,7 +139,7 @@ const $ = (r, o)=>{
             children: I ? /* @__PURE__ */ n("img", {
                 src: o,
                 className: P,
-                onError: ()=>i(!0),
+                onError: ()=>l(!0),
                 role: "none",
                 width: r,
                 height: r
@@ -149,5 +149,5 @@ const $ = (r, o)=>{
             })
         }))
     });
-}, O = y;
-export { O as default };
+}, H = y;
+export { H as default };

package/dist-es/badge.js

@@ -58,7 +58,7 @@ import { getPrefixedDataAttributes as N } from "./utils/dom.js";
 import { Text1 as h } from "./text.js";
 import { useTheme as I } from "./hooks.js";
 import { vars as y } from "./skins/skin-contract.css-mistica.js";
-import { useIsInverseVariant as P } from "./theme-variant-context.js";
+import { useIsInverseOrMediaVariant as P } from "./theme-variant-context.js";
 const j = (param)=>{
     let { children: e, value: r, right: s, top: o, dataAttributes: c } = param;
     const f = P(), { textPresets: g } = I();
@@ -102,5 +102,5 @@ const j = (param)=>{
             })
         ]
     }));
-}, M = j;
-export { M as default };
+}, F = j;
+export { F as default };

package/dist-es/boxed.js

@@ -53,16 +53,16 @@ function _object_spread_props(target, source) {
 }
 import { jsx as a } from "react/jsx-runtime";
 import * as f from "react";
-import O from "classnames";
-import { useIsInverseVariant as R, ThemeVariant as V } from "./theme-variant-context.js";
+import R from "classnames";
+import { useIsInverseOrMediaVariant as V, ThemeVariant as D } from "./theme-variant-context.js";
 import { getPrefixedDataAttributes as I } from "./utils/dom.js";
 import { vars as n } from "./skins/skin-contract.css-mistica.js";
-import { boxed as D, desktopOnly as W, boxBorder as $, vars as i } from "./boxed.css-mistica.js";
+import { boxed as W, desktopOnly as $, boxBorder as j, vars as i } from "./boxed.css-mistica.js";
 import { sprinkles as l } from "./sprinkles.css-mistica.js";
-import { applyCssVars as j } from "./utils/css.js";
-const z = (o, r)=>o || r ? l({
+import { applyCssVars as z } from "./utils/css.js";
+const A = (o, r)=>o || r ? l({
         border: "none"
-    }) : $, s = (o)=>typeof o == "number" ? `${o}px` : o !== null && o !== void 0 ? o : "initial", e = (o, r)=>{
+    }) : j, s = (o)=>typeof o == "number" ? `${o}px` : o !== null && o !== void 0 ? o : "initial", e = (o, r)=>{
     if (typeof r == "number" || typeof r == "string" || typeof r > "u") return {
         [i[o]]: s(r)
     };
@@ -71,31 +71,31 @@ const z = (o, r)=>o || r ? l({
         [i.desktop[o]]: s(r.desktop)
     };
     return r.tablet && (t[i.tablet[o]] = s(r.tablet)), t;
-}, A = /*#__PURE__*/ f.forwardRef((param, w)=>{
-    let { children: o, isInverse: r = !1, className: t, role: p, dataAttributes: b, "aria-label": c, "aria-labelledby": y, width: h, maxWidth: x, minWidth: g, height: k, minHeight: u, borderRadius: B = n.borderRadii.container, background: d, desktopOnly: C } = param;
-    const m = R();
+}, H = /*#__PURE__*/ f.forwardRef((param, w)=>{
+    let { children: o, isInverse: r = !1, className: t, role: p, dataAttributes: b, "aria-label": c, "aria-labelledby": y, width: h, maxWidth: x, minWidth: g, height: k, minHeight: u, borderRadius: B = n.borderRadii.container, background: d, desktopOnly: C, variant: O } = param;
+    const m = V();
     return /* @__PURE__ */ a("div", _object_spread_props(_object_spread({
         ref: w,
-        style: _object_spread_props(_object_spread({}, j(_object_spread({}, e("width", h), e("maxWidth", x), e("minWidth", g), e("height", k), e("minHeight", u)))), {
+        style: _object_spread_props(_object_spread({}, z(_object_spread({}, e("width", h), e("maxWidth", x), e("minWidth", g), e("height", k), e("minHeight", u)))), {
             background: d
         }),
-        className: O(t, D, z(m, r), l({
+        className: R(t, W, A(m, r), l({
             borderRadius: B,
             overflow: "hidden",
             background: (d !== null && d !== void 0 ? d : r) ? m ? n.colors.backgroundContainerBrandOverInverse : n.colors.backgroundContainerBrand : n.colors.backgroundContainer
         }), {
-            [W]: C
+            [$]: C
         }),
         role: p,
         "aria-label": c,
         "aria-labelledby": y
     }, I(b)), {
-        children: /* @__PURE__ */ a(V, {
-            isInverse: r,
+        children: /* @__PURE__ */ a(D, {
+            variant: O !== null && O !== void 0 ? O : r ? "inverse" : void 0,
             children: o
         })
     }));
-}), J = /*#__PURE__*/ f.forwardRef((o, r)=>/* @__PURE__ */ a(A, _object_spread_props(_object_spread({}, o), {
+}), G = /*#__PURE__*/ f.forwardRef((o, r)=>/* @__PURE__ */ a(H, _object_spread_props(_object_spread({}, o), {
         ref: r
     })));
-export { J as Boxed, A as InternalBoxed };
+export { G as Boxed, H as InternalBoxed };

package/dist-es/button-fixed-footer-layout.js

@@ -1,35 +1,32 @@
-"use client";
 import { jsx as o } from "react/jsx-runtime";
 import d from "./fixed-footer-layout.js";
-import l from "./button-layout.js";
-import { useScreenSize as f } from "./hooks.js";
-import { InternalResponsiveLayout as h } from "./responsive-layout.js";
-import x from "./box.js";
-const F = (param)=>{
-    let { isFooterVisible: i = !0, button: t, secondaryButton: e, link: s, children: n, desktopButtonAlign: r, footerBgColor: a, containerBgColor: m, onChangeFooterHeight: u } = param;
-    const { isDesktopOrBigger: p } = f();
+import m from "./button-layout.js";
+import { InternalResponsiveLayout as p } from "./responsive-layout.js";
+import l from "./box.js";
+const f = (param)=>{
+    let { isFooterVisible: r = !0, button: t, secondaryButton: e, link: i, children: n, footerBgColor: a, containerBgColor: s, onChangeFooterHeight: u } = param;
     return /* @__PURE__ */ o(d, {
         onChangeFooterHeight: u,
-        isFooterVisible: (!!t || !!e) && i,
+        isFooterVisible: (!!t || !!e) && r,
         footerBgColor: a,
-        containerBgColor: m,
-        footer: /* @__PURE__ */ o(h, {
+        containerBgColor: s,
+        footer: /* @__PURE__ */ o(p, {
             shouldExpandWhenNested: "desktop",
-            children: /* @__PURE__ */ o(x, {
+            children: /* @__PURE__ */ o(l, {
                 paddingY: {
                     mobile: 16,
                     tablet: 32,
                     desktop: 0
                 },
-                children: /* @__PURE__ */ o(l, {
+                children: /* @__PURE__ */ o(m, {
                     primaryButton: t,
                     secondaryButton: e,
-                    align: p && r ? r : "full-width",
-                    link: s
+                    align: "full-width",
+                    link: i
                 })
             })
         }),
         children: n
     });
-}, S = F;
-export { S as default };
+}, c = f;
+export { c as default };

package/dist-es/button-group.css-mistica.js

@@ -1,4 +1,5 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
+import "./button.css.ts.vanilla.css-mistica.js";
 import "./button-group.css.ts.vanilla.css-mistica.js";
-var r = "_1xdd1h67", t = "_1xdd1h66", e = "_1xdd1h64", h = "_1xdd1h62", v = "_1xdd1h63", _ = "_1xdd1h65", a = "_1xdd1h61 _1y2v1nfhl _1y2v1nfhz _1y2v1nfhp";
-export { r as buttonChild, t as buttons, e as centerInDesktop, h as centerInMobile, v as centerInTablet, _ as container, a as inline };
+var r = "_1xdd1h69", h = "_1xdd1h67", a = "_1xdd1h68", e = "_1xdd1h64", i = "_1xdd1h62", v = "_1xdd1h63", _ = "_1xdd1h65", o = "_1xdd1h66", x = "_1xdd1h61 _1y2v1nfhl _1y2v1nfhz _1y2v1nfhp";
+export { r as buttonChild, h as buttons, a as buttonsWithSmallLink, e as centerInDesktop, i as centerInMobile, v as centerInTablet, _ as container, o as containerWithSmallLink, x as inline };

package/dist-es/button-group.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -50,14 +51,22 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as r, jsx as c } from "react/jsx-runtime";
-import n from "classnames";
-import { getPrefixedDataAttributes as f } from "./utils/dom.js";
-import { inline as b, container as p, centerInDesktop as h, centerInTablet as u, centerInMobile as v, buttons as N, buttonChild as i } from "./button-group.css-mistica.js";
-const k = (param)=>{
-    let { primaryButton: t, secondaryButton: o, link: s, align: e = "left", dataAttributes: m } = param;
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import * as b from "react";
+import p from "classnames";
+import { getPrefixedDataAttributes as N } from "./utils/dom.js";
+import { inline as d, containerWithSmallLink as v, container as S, centerInDesktop as x, centerInTablet as I, centerInMobile as C, buttonsWithSmallLink as G, buttons as R, buttonChild as n } from "./button-group.css-mistica.js";
+import { smallLink as j } from "./button.css-mistica.js";
+import { useIsomorphicLayoutEffect as A } from "./hooks.js";
+const D = (param)=>{
+    let { primaryButton: t, secondaryButton: s, link: o, align: e = "left", dataAttributes: u } = param;
+    const r = b.useRef(null), [m, h] = b.useState(!1);
+    A(()=>{
+        var a, c;
+        (c = (a = r.current) == null ? void 0 : a.getElementsByClassName(j)) != null && c.length && h(!0);
+    }, []);
     var _e_mobile, _e_tablet, _ref, _e_desktop;
-    const d = !!t || !!o || !!s, a = !!t && !!o, l = typeof e == "string" ? {
+    const k = !!t || !!s || !!o, L = !!t && !!s, l = typeof e == "string" ? {
         mobile: e,
         tablet: e,
         desktop: e
@@ -66,35 +75,36 @@ const k = (param)=>{
         tablet: (_ref = (_e_tablet = e.tablet) !== null && _e_tablet !== void 0 ? _e_tablet : e.mobile) !== null && _ref !== void 0 ? _ref : "left",
         desktop: (_e_desktop = e.desktop) !== null && _e_desktop !== void 0 ? _e_desktop : "left"
     };
-    return d ? /* @__PURE__ */ r("div", _object_spread_props(_object_spread({
-        className: n(b, p, {
-            [h]: l.desktop === "center",
-            [u]: l.tablet === "center",
-            [v]: l.mobile === "center"
+    return k ? /* @__PURE__ */ f("div", _object_spread_props(_object_spread({
+        className: p(d, m ? v : S, {
+            [x]: l.desktop === "center",
+            [I]: l.tablet === "center",
+            [C]: l.mobile === "center"
         })
-    }, f(m, "ButtonGroup")), {
+    }, N(u, "ButtonGroup")), {
         children: [
-            (t || o) && /* @__PURE__ */ r("div", {
-                className: n(b, N),
+            (t || s) && /* @__PURE__ */ f("div", {
+                className: p(d, m ? G : R),
                 children: [
-                    t && /* @__PURE__ */ c("div", {
-                        className: i,
+                    t && /* @__PURE__ */ i("div", {
+                        className: n,
                         children: t
                     }),
-                    o && /* @__PURE__ */ c("div", {
-                        className: i,
-                        children: o
+                    s && /* @__PURE__ */ i("div", {
+                        className: n,
+                        children: s
                     })
                 ]
             }),
-            s && /* @__PURE__ */ c("div", {
-                className: i,
+            o && /* @__PURE__ */ i("div", {
+                ref: r,
+                className: n,
                 style: {
-                    width: a ? "100%" : "auto"
+                    width: L ? "100%" : "auto"
                 },
-                children: s
+                children: o
             })
         ]
     })) : null;
-}, A = k;
-export { A as default };
+}, T = D;
+export { T as default };

package/dist-es/button-layout.css-mistica.js

@@ -1,10 +1,20 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./button.css.ts.vanilla.css-mistica.js";
 import "./button-layout.css.ts.vanilla.css-mistica.js";
-var y = {
-    right: "kfxylh8 _1y2v1nfhu",
-    left: "kfxylh9 _1y2v1nfhs",
-    center: "kfxylha _1y2v1nfht",
-    "full-width": "kfxylhb _1y2v1nfht"
-}, l = "kfxylh2 _1y2v1nfhk _1y2v1nfhz", i = "kfxylh3", k = "kfxylhe kfxylhd _1y2v1nfhk _1y2v1nfi7", r = "kfxylhf kfxylhd _1y2v1nfhk _1y2v1nfi7", t = "kfxylh0";
-export { y as alignVariant, l as container, i as containerWithTwoButtons, k as link, r as linkInNewLine, t as margins };
+var n = {
+    right: "kfxylh7 _1y2v1nfhu",
+    left: "kfxylh8 _1y2v1nfhs",
+    center: "kfxylh9 _1y2v1nfht",
+    "full-width": "kfxylha _1y2v1nfht"
+}, l = "kfxylh1 _1y2v1nfhk _1y2v1nfhz", k = "kfxylh2", v = "kfxylhd kfxylhc _1y2v1nfhk _1y2v1nfi7", i = {
+    center: "kfxylhc _1y2v1nfhk _1y2v1nfi7",
+    left: "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhe",
+    right: "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhf",
+    "full-width": "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhg"
+}, t = {
+    center: "kfxylhc _1y2v1nfhk _1y2v1nfi7",
+    left: "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhl",
+    right: "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhm",
+    "full-width": "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhn"
+};
+export { n as alignVariant, l as container, k as containerWithTwoButtons, v as link, i as linkInNewLine, t as smallLinkInNewLine };