@telefonica/mistica 14.24.1 → 14.26.0

package/dist/tooltip.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return oe;
+        return ae;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -145,8 +145,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500, M = ()=>{}, It = (r)=>r === "bottom" ? `translateY(${v}px)` : r === "top" ? `translateY(calc(-100% - ${v}px))` : r === "right" ? `translateX(${v}px) translateY(-50%)` : r === "left" ? `translateX(-${v}px) translateY(-50%)` : `translateY(-${v}px)`, Mt = (r)=>r === "top" ? "translateY(-100%)" : r === "bottom" ? "translateY(0)" : "translateY(-50%)", Nt = (r)=>r === "bottom" ? "translateY(0)" : r === "top" ? "translateY(-100%)" : r === "right" || r === "left" ? "translateX(0px) translateY(-50%)" : "translateY(0px)", kt = (r)=>r === "top" ? _tooltipcssmistica.fadeInTopKeyframes : r === "bottom" ? _tooltipcssmistica.fadeInBottomKeyframes : _tooltipcssmistica.fadeInXKeyframes, Lt = (r)=>r ? "1" : "0.2", Vt = (r)=>r === "top" ? `2px 2px 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "right" ? `0 0 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "left" ? `0 0 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "bottom" ? `-1px -1px 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : "", jt = (_param)=>{
-    var { children: r , extra: N , description: S , target: k , title: Y , targetLabel: L , delay: V = !0 , dataAttributes: j , targetStyle: K , unstable_offsetX: f  } = _param, C = _object_without_properties(_param, [
+const $t = "bottom", Bt = "top", Et = 12, m = 4 + Et, It = 500, v = 12, Mt = 500, M = ()=>{}, Nt = (r)=>r === "bottom" ? `translateY(${v}px)` : r === "top" ? `translateY(calc(-100% - ${v}px))` : r === "right" ? `translateX(${v}px) translateY(-50%)` : r === "left" ? `translateX(-${v}px) translateY(-50%)` : `translateY(-${v}px)`, kt = (r)=>r === "top" ? "translateY(-100%)" : r === "bottom" ? "translateY(0)" : "translateY(-50%)", Lt = (r)=>r === "bottom" ? "translateY(0)" : r === "top" ? "translateY(-100%)" : r === "right" || r === "left" ? "translateX(0px) translateY(-50%)" : "translateY(0px)", Vt = (r)=>r === "top" ? _tooltipcssmistica.fadeInTopKeyframes : r === "bottom" ? _tooltipcssmistica.fadeInBottomKeyframes : _tooltipcssmistica.fadeInXKeyframes, jt = (r)=>r ? "1" : "0.2", Kt = (r)=>r === "top" ? `2px 2px 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "right" ? `0 0 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "left" ? `0 0 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "bottom" ? `-1px -1px 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : "", zt = (_param)=>{
+    var { children: r , extra: N , description: S , target: k , title: Y , targetLabel: L , delay: V = !0 , dataAttributes: j , targetStyle: K , unstable_offsetX: f , textCenter: z  } = _param, y = _object_without_properties(_param, [
         "children",
         "extra",
         "description",
@@ -156,16 +156,17 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
         "delay",
         "dataAttributes",
         "targetStyle",
-        "unstable_offsetX"
+        "unstable_offsetX",
+        "textCenter"
     ]);
-    const { isDarkMode: z  } = (0, _hooks.useTheme)(), [a, O] = _react.useState(!1), { isTabletOrSmaller: F  } = (0, _hooks.useScreenSize)(), D = (0, _hooks.useAriaId)(), h = _react.useRef(!1), c = _react.useRef(null), g = _react.useRef(null), R = _react.useRef(null), x = _react.useRef(null), t = _react.useRef({
+    const { isDarkMode: F  } = (0, _hooks.useTheme)(), [a, C] = _react.useState(!1), { isTabletOrSmaller: H  } = (0, _hooks.useScreenSize)(), D = (0, _hooks.useAriaId)(), h = _react.useRef(!1), c = _react.useRef(null), g = _react.useRef(null), O = _react.useRef(null), x = _react.useRef(null), t = _react.useRef({
         top: 0,
         right: 0,
         left: 0,
         bottom: 0,
         width: 0,
         height: 0
-    }), [H, X] = _react.useState({}), q = (n)=>F ? n || Wt : n || Dt, [e, G] = _react.useState(void 0), i = ((n)=>{
+    }), [X, q] = _react.useState({}), G = (n)=>H ? n || Bt : n || $t, [e, J] = _react.useState(void 0), i = ((n)=>{
         if (!e) return n;
         const u = (d)=>{
             const p = t.current.top > e.height;
@@ -177,21 +178,21 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
             left: t.current.left < e.width ? t.current.right + e.width > window.innerWidth ? t.current.top < e.height ? "bottom" : "top" : "right" : n,
             bottom: t.current.bottom + e.height > window.innerHeight ? l("top") : l(n)
         })[n];
-    })(q(C.position)), y = (0, _environment.isClientSide)() ? window.matchMedia("(pointer: coarse)").matches : !1, W = ()=>{
-        a && O(!1);
+    })(G(y.position)), R = (0, _environment.isClientSide)() ? window.matchMedia("(pointer: coarse)").matches : !1, W = ()=>{
+        a && C(!1);
     };
     _react.useEffect(()=>(window.addEventListener("resize", W), ()=>{
             window.removeEventListener("resize", W);
         }));
     const $ = ()=>{
-        O(!1);
+        C(!1);
     }, T = ()=>{
-        R.current && (t.current = R.current.getBoundingClientRect(), O(!a));
-    }, J = ()=>{
+        O.current && (t.current = O.current.getBoundingClientRect(), C(!a));
+    }, Q = ()=>{
         a || T();
-    }, Q = (n)=>{
-        n.keyCode === _keycodes.TAB && $();
     }, U = (n)=>{
+        n.keyCode === _keycodes.TAB && $();
+    }, Z = (n)=>{
         if (!e) return {};
         const u = e.width > t.current.width && t.current.left + t.current.width / 2 < e.width / 2 + 16 ? t.current.width / 2 : "50%";
         return n === "bottom" || n === "top" ? {
@@ -221,42 +222,42 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
     }, [
         f,
         e
-    ]), b = (()=>C.width)(), Z = {
+    ]), b = (()=>y.width)(), _ = {
         top: _tooltipcssmistica.arrowTop,
         bottom: _tooltipcssmistica.arrowBottom,
         left: _tooltipcssmistica.arrowLeft,
         right: _tooltipcssmistica.arrowRight
-    }, _ = i && (0, _dynamic.assignInlineVars)({
-        [_tooltipcssmistica.vars.enterTransform]: It(i),
-        [_tooltipcssmistica.vars.exitTransform]: Nt(i),
-        [_tooltipcssmistica.vars.enterActiveAnimationName]: kt(i),
-        [_tooltipcssmistica.vars.enterDoneTransform]: Mt(i),
-        [_tooltipcssmistica.vars.shadowAlpha]: Lt(z),
-        [_tooltipcssmistica.vars.arrowBoxShadow]: Vt(i)
+    }, tt = i && (0, _dynamic.assignInlineVars)({
+        [_tooltipcssmistica.vars.enterTransform]: Nt(i),
+        [_tooltipcssmistica.vars.exitTransform]: Lt(i),
+        [_tooltipcssmistica.vars.enterActiveAnimationName]: Vt(i),
+        [_tooltipcssmistica.vars.enterDoneTransform]: kt(i),
+        [_tooltipcssmistica.vars.shadowAlpha]: jt(F),
+        [_tooltipcssmistica.vars.arrowBoxShadow]: Kt(i)
     });
     return _react.useEffect(()=>{
-        i && x.current && a && X(B(i, b || 0));
+        i && x.current && a && q(B(i, b || 0));
     }, [
         a,
         B,
         i,
         b
     ]), _react.useEffect(()=>{
-        x.current && (x.current.getBoundingClientRect(), a && G(x.current.getBoundingClientRect()));
+        x.current && (x.current.getBoundingClientRect(), a && J(x.current.getBoundingClientRect()));
     }, [
         a
     ]), /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                ref: R,
+                ref: O,
                 style: K,
                 className: _tooltipcssmistica.wrapper,
                 onPointerOver: ()=>{
                     c.current && (clearTimeout(c.current), c.current = null), !h.current && (h.current = !0, V ? g.current = setTimeout(()=>{
                         g.current = null, T();
-                    }, Et) : T());
+                    }, Mt) : T());
                 },
-                onPointerLeave: y ? M : ()=>{
+                onPointerLeave: R ? M : ()=>{
                     if (g.current) {
                         clearTimeout(g.current), g.current = null, h.current = !1;
                         return;
@@ -265,8 +266,8 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
                         h.current && (c.current = null, h.current = !1, T());
                     }, 100);
                 },
-                onFocus: J,
-                onKeyDown: Q,
+                onFocus: Q,
+                onKeyDown: U,
                 "touch-action": "auto",
                 role: "button",
                 tabIndex: 0,
@@ -277,12 +278,12 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_portal.Portal, {
                 children: [
-                    a && y && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
+                    a && R && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
                         onPress: $
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
                         in: a,
-                        timeout: Bt,
+                        timeout: It,
                         classNames: {
                             enter: _tooltipcssmistica.enter,
                             enterActive: _tooltipcssmistica.enterActive,
@@ -296,22 +297,22 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
                         }, (0, _dom.getPrefixedDataAttributes)(j, "Tooltip")), {
                             role: "tooltip",
                             id: D,
-                            className: (0, _classnames.default)(_tooltipcssmistica.container, _tooltipcssmistica.textAlign),
+                            className: (0, _classnames.default)(_tooltipcssmistica.container, _tooltipcssmistica.textAlign, z ? _tooltipcssmistica.textCenter : ""),
                             style: _object_spread({
                                 width: b
-                            }, H, _),
+                            }, X, tt),
                             onPointerOver: ()=>{
                                 c.current && (clearTimeout(c.current), c.current = null);
                             },
-                            onPointerLeave: y ? M : ()=>{
+                            onPointerLeave: R ? M : ()=>{
                                 c.current = setTimeout(()=>{
                                     h.current && (c.current = null, h.current = !1, T());
                                 }, 100);
                             },
                             children: [
                                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                    style: U(i),
-                                    className: (0, _classnames.default)(_tooltipcssmistica.arrowWrapper, Z[i]),
+                                    style: Z(i),
+                                    className: (0, _classnames.default)(_tooltipcssmistica.arrowWrapper, _[i]),
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                         className: _tooltipcssmistica.arrow
                                     })
@@ -337,4 +338,4 @@ const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500
             })
         ]
     });
-}, oe = jt;
+}, ae = zt;

package/dist/touchable.js

@@ -137,13 +137,14 @@ const L = function(e) {
         style: e.style,
         role: e.role,
         "aria-checked": e["aria-checked"],
+        "aria-disabled": e.disabled ? !0 : void 0,
         "aria-controls": e["aria-controls"],
         "aria-expanded": e["aria-expanded"],
         "aria-hidden": e["aria-hidden"],
         "aria-selected": e["aria-selected"],
         "aria-live": e["aria-live"],
         tabIndex: e.tabIndex
-    }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Touchable")), u = e.type ? e.type : "button", r = !!e.href && !!e.newTab, m = !r && !!e.href && !!e.loadOnTop, s = (a)=>{
+    }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Touchable")), u = e.type ? e.type : "button", r = !!e.href && !!e.newTab, m = !r && !!e.href && !!e.loadOnTop, b = (a)=>{
         e.stopPropagation && a.stopPropagation();
     }, h = (a)=>{
         e.onPress && e.onPress(a);
@@ -152,15 +153,15 @@ const L = function(e) {
             f.current = !1, a();
         }));
     }, x = (a)=>{
-        if (s(a), !i.length) {
+        if (b(a), !i.length) {
             h(a);
             return;
         }
         g(()=>h(a));
     }, R = (a)=>{
-        s(a), i.length && (a.preventDefault(), g(()=>L(k(), r, m)));
+        b(a), i.length && (a.preventDefault(), g(()=>L(k(), r, m)));
     }, D = (a)=>{
-        s(a), y();
+        b(a), y();
     }, w = (a)=>{
         (a.keyCode === _keycodes.ENTER || a.keyCode === _keycodes.SPACE) && (a.preventDefault(), a.currentTarget.click());
     };

package/dist/utils/locale.d.ts

@@ -1 +1 @@
-export type Locale = 'ca-ES' | 'en-US' | 'de-DE' | 'es-AR' | 'es-CO' | 'es-EC' | 'es-ES' | 'es-MX' | 'es-PE' | 'es-UY' | 'eu-ES' | 'gl-ES' | 'pt-BR';
+export type Locale = 'ca-ES' | 'en-US' | 'en-GB' | 'de-DE' | 'es-AR' | 'es-CO' | 'es-EC' | 'es-ES' | 'es-MX' | 'es-PE' | 'es-UY' | 'eu-ES' | 'gl-ES' | 'pt-BR';

package/dist/video.js

@@ -137,8 +137,8 @@ const q = {
         "aspectRatio",
         "dataAttributes"
     ]);
-    const [a, l] = _react.useReducer(D, "loading"), s = _react.useRef(null), C = _react.useRef(), f = _react.useRef(null), w = (0, _image.useMediaBorderRadius)(), g = typeof c == "number" ? c : K[c], v = _react.useCallback(()=>{
-        a === "loading" && (l("fail"), h == null || h());
+    const [a, d] = _react.useReducer(D, "loading"), s = _react.useRef(null), C = _react.useRef(), f = _react.useRef(null), w = (0, _image.useMediaBorderRadius)(), g = typeof c == "number" ? c : K[c], v = _react.useCallback(()=>{
+        a === "loading" && (d("fail"), h == null || h());
     }, [
         h,
         a
@@ -146,9 +146,8 @@ const q = {
     _react.useEffect(()=>{
         var e;
         if (C.current !== r) {
-            C.current = r;
-            const t = setTimeout(v, T);
-            return l("reset"), (e = s.current) == null || e.load(), ()=>{
+            let t;
+            return C.current = r, d("reset"), r ? (t = setTimeout(v, T), (e = s.current) == null || e.load()) : d("fail"), ()=>{
                 clearTimeout(t);
             };
         }
@@ -160,7 +159,7 @@ const q = {
     const I = ()=>{
         y == null || y();
         const e = s.current, t = p && !(0, _platform.isRunningAcceptanceTest)();
-        l("finishLoad"), e && t && e.paused && e.play();
+        d("finishLoad"), e && t && e.paused && e.play();
     }, U = (Array.isArray(r) ? r : [
         r
     ]).map((e)=>typeof e == "string" ? {
@@ -176,11 +175,11 @@ const q = {
         preload: k,
         onError: v,
         onPause: ()=>{
-            R == null || R(), l("pause");
+            R == null || R(), d("pause");
         },
         onTimeUpdate: ()=>{
             var e;
-            a !== "playing" && ((e = s.current) == null ? void 0 : e.currentTime) !== 0 && (b == null || b(), l("play"));
+            a !== "playing" && ((e = s.current) == null ? void 0 : e.currentTime) !== 0 && (b == null || b(), d("play"));
         },
         onCanPlay: ()=>{
             p === "streaming" && I();
@@ -255,7 +254,7 @@ const q = {
                         var i;
                         (i = f.current) != null && i.style && (f.current.style.width = "100%", f.current.style.height = "100%"), setTimeout(()=>{
                             var S;
-                            l("reset"), (S = s.current) == null || S.load();
+                            d("reset"), (S = s.current) == null || S.load();
                         }, 100);
                     }, t.setCurrentTime = (i)=>{
                         s.current && (s.current.currentTime = i);

package/dist-es/accordion.css-mistica.js

@@ -0,0 +1,9 @@
+import "./sprinkles.css.ts.vanilla.css-mistica.js";
+import "./accordion.css.ts.vanilla.css-mistica.js";
+var e = "_8s3szx3", v = "_1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfbt _1y2v1nfdo _1y2v1nf5y _1y2v1nfb8 _1y2v1nfca", a = "_8s3szx9", r = "_8s3szx4", t = {
+    enter: "_8s3szx5",
+    enterActive: "_8s3szx6",
+    exit: "_8s3szx7",
+    exitActive: "_8s3szx8"
+}, _ = "_8s3szx1", o = "_8s3szx2";
+export { e as chevronContainer, v as itemContent, a as panel, r as panelContainer, t as panelTransitionClasses, _ as touchableBackground, o as touchableBackgroundInverse };

package/dist-es/accordion.css.ts.vanilla.css-mistica.js

@@ -0,0 +1,2 @@
+const a = "";
+export { a as default };

package/dist-es/accordion.js

@@ -0,0 +1,280 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import * as c from "react";
+import { Content as N } from "./list.js";
+import S from "./icons/icon-chevron.js";
+import h from "./box.js";
+import { itemContent as y, touchableBackgroundInverse as O, touchableBackground as T, chevronContainer as D, panelTransitionClasses as w, panelContainer as E, panel as P } from "./accordion.css-mistica.js";
+import L from "./stack.js";
+import { BaseTouchable as _ } from "./touchable.js";
+import k from "classnames";
+import { vars as A } from "./skins/skin-contract.css-mistica.js";
+import { getPrefixedDataAttributes as C } from "./utils/dom.js";
+import V from "./divider.js";
+import { Boxed as X } from "./boxed.js";
+import { useIsInverseVariant as j } from "./theme-variant-context.js";
+import { useAriaId as v } from "./hooks.js";
+import { CSSTransition as M } from "react-transition-group";
+const q = 400, x = /*#__PURE__*/ c.createContext({
+    index: [],
+    toogle: ()=>{}
+}), z = ()=>c.useContext(x), B = (param)=>{
+    let { value: o , defaultValue: r , onChange: n , singleOpen: d  } = param;
+    const m = o !== void 0, a = (e)=>e === void 0 ? [] : typeof e == "number" ? [
+            e
+        ] : e, [i, l] = c.useState(a(r));
+    c.useEffect(()=>l(a(r)), [
+        r
+    ]), c.useEffect(()=>{
+        i.length > 1 && d && (i.splice(1), l([
+            ...i
+        ]));
+    }, [
+        d,
+        i
+    ]);
+    const p = (e, s)=>{
+        if (!s) return [
+            e
+        ];
+        const u = s.indexOf(e);
+        return u === -1 ? d ? s = [
+            e
+        ] : s.push(e) : s.splice(u, 1), [
+            ...s
+        ];
+    }, f = (e)=>{
+        if (m || l(p(e, i)), n) {
+            const s = (m ? a(o) : i).includes(e);
+            n(e, !s);
+        }
+    };
+    return m ? [
+        a(o),
+        f
+    ] : [
+        i,
+        f
+    ];
+}, F = (o)=>{
+    const r = o == null ? void 0 : o.closest("[data-accordion]");
+    if (r) return Array.from(r.querySelectorAll("[data-accordion-item]")).filter((n)=>n.closest("[data-accordion]") === r).findIndex((n)=>n === o);
+}, R = /*#__PURE__*/ c.forwardRef((_param, m)=>{
+    var { content: o , dataAttributes: r , trackingEvent: n  } = _param, d = _object_without_properties(_param, [
+        "content",
+        "dataAttributes",
+        "trackingEvent"
+    ]);
+    const a = c.useRef(null), i = c.useRef(null), { index: l , toogle: p  } = z(), f = j(), e = v(), s = v(), [u, b] = c.useState(), I = u !== void 0 && (l == null ? void 0 : l.includes(u));
+    return c.useEffect(()=>{
+        b(F(i.current));
+    }, []), /* @__PURE__ */ g("div", _object_spread_props(_object_spread({
+        ref: i
+    }, C(_object_spread_props(_object_spread({}, r), {
+        "accordion-item": !0
+    }))), {
+        children: [
+            /* @__PURE__ */ t(_, {
+                ref: m,
+                className: k(y, f ? O : T),
+                onPress: ()=>{
+                    u !== void 0 && p(u);
+                },
+                trackingEvent: n,
+                "aria-expanded": I,
+                "aria-controls": s,
+                children: /* @__PURE__ */ t(h, {
+                    paddingX: 16,
+                    children: /* @__PURE__ */ t(N, _object_spread_props(_object_spread({
+                        labelId: e,
+                        type: "custom"
+                    }, d), {
+                        right: /* @__PURE__ */ t("div", {
+                            className: D,
+                            children: /* @__PURE__ */ t(S, {
+                                size: 24,
+                                transitionDuration: 400,
+                                direction: I ? "up" : "down",
+                                color: f ? A.colors.inverse : I ? A.colors.neutralHigh : A.colors.neutralMedium
+                            })
+                        })
+                    }))
+                })
+            }),
+            /* @__PURE__ */ t(M, {
+                in: I,
+                timeout: q,
+                nodeRef: a,
+                classNames: w,
+                mountOnEnter: !0,
+                unmountOnExit: !0,
+                children: /* @__PURE__ */ t("div", {
+                    className: E,
+                    ref: a,
+                    children: /* @__PURE__ */ t("div", {
+                        className: P,
+                        role: "region",
+                        "aria-labelledby": e,
+                        id: s,
+                        children: /* @__PURE__ */ t(h, {
+                            paddingX: 16,
+                            paddingBottom: 16,
+                            children: o
+                        })
+                    })
+                })
+            })
+        ]
+    }));
+}), co = /*#__PURE__*/ c.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: o  } = _param, r = _object_without_properties(_param, [
+        "dataAttributes"
+    ]);
+    return t(R, _object_spread_props(_object_spread({}, r), {
+        ref: n,
+        dataAttributes: _object_spread({
+            "component-name": "AccordionItem"
+        }, o)
+    }));
+}), io = (param)=>{
+    let { children: o , dataAttributes: r , noLastDivider: n , index: d , defaultIndex: m , onChange: a , singleOpen: i  } = param;
+    const [l, p] = B({
+        value: d,
+        defaultValue: m,
+        onChange: a,
+        singleOpen: i
+    }), f = c.Children.count(o) - 1, e = !n;
+    return /* @__PURE__ */ t(x.Provider, {
+        value: {
+            index: l,
+            toogle: p
+        },
+        children: /* @__PURE__ */ t("div", _object_spread_props(_object_spread({}, C(_object_spread_props(_object_spread({}, r), {
+            accordion: !0
+        }), "Accordion")), {
+            children: c.Children.toArray(o).filter(Boolean).map((s, u)=>/* @__PURE__ */ g(c.Fragment, {
+                    children: [
+                        s,
+                        (u < f || e) && /* @__PURE__ */ t(h, {
+                            paddingX: 16,
+                            children: /* @__PURE__ */ t(V, {})
+                        })
+                    ]
+                }, u))
+        }))
+    });
+}, so = /*#__PURE__*/ c.forwardRef((_param, d)=>/* @__PURE__ */ {
+    var { dataAttributes: o , isInverse: r  } = _param, n = _object_without_properties(_param, [
+        "dataAttributes",
+        "isInverse"
+    ]);
+    return t(X, {
+        isInverse: r,
+        ref: d,
+        dataAttributes: _object_spread({
+            "component-name": "BoxedAccordionItem"
+        }, o),
+        children: /* @__PURE__ */ t(R, _object_spread({}, n))
+    });
+}), ao = (param)=>{
+    let { children: o , dataAttributes: r , index: n , defaultIndex: d , onChange: m , singleOpen: a  } = param;
+    const [i, l] = B({
+        value: n,
+        defaultValue: d,
+        onChange: m,
+        singleOpen: a
+    });
+    return /* @__PURE__ */ t(x.Provider, {
+        value: {
+            index: i,
+            toogle: l
+        },
+        children: /* @__PURE__ */ t(L, {
+            space: 16,
+            dataAttributes: _object_spread({
+                "component-name": "BoxedAccordion",
+                accordion: !0
+            }, r),
+            children: o
+        })
+    });
+};
+export { io as Accordion, co as AccordionItem, ao as BoxedAccordion, so as BoxedAccordionItem, z as useAccordionContext };

package/dist-es/boxed.js

@@ -50,42 +50,43 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import * as i from "react";
-import v from "classnames";
-import { useIsInverseVariant as g, ThemeVariant as B } from "./theme-variant-context.js";
-import { getPrefixedDataAttributes as k } from "./utils/dom.js";
-import { vars as e } from "./skins/skin-contract.css-mistica.js";
+import g from "classnames";
+import { useIsInverseVariant as B, ThemeVariant as k } from "./theme-variant-context.js";
+import { getPrefixedDataAttributes as y } from "./utils/dom.js";
+import { vars as o } from "./skins/skin-contract.css-mistica.js";
 import { boxBorder as R } from "./boxed.css-mistica.js";
 import { sprinkles as s } from "./sprinkles.css-mistica.js";
-const h = (o, r)=>o || r ? s({
+const h = (e, r)=>e || r ? s({
         border: "none"
-    }) : R, w = /*#__PURE__*/ i.forwardRef((param, x)=>{
-    let { children: o , isInverse: r = !1 , className: d , role: m , dataAttributes: f , "aria-label": l , width: c , height: b , minHeight: p , borderRadius: u = e.borderRadii.container , background: a  } = param;
-    const n = g();
-    return /* @__PURE__ */ t("div", _object_spread_props(_object_spread({
-        ref: x,
+    }) : R, w = /*#__PURE__*/ i.forwardRef((param, v)=>{
+    let { children: e , isInverse: r = !1 , className: l , role: d , dataAttributes: m , "aria-label": b , "aria-labelledby": f , width: c , height: p , minHeight: u , borderRadius: x = o.borderRadii.container , background: t  } = param;
+    const n = B();
+    return /* @__PURE__ */ a("div", _object_spread_props(_object_spread({
+        ref: v,
         style: {
             width: c,
-            height: b,
-            minHeight: p,
+            height: p,
+            minHeight: u,
             boxSizing: "border-box",
-            background: a
+            background: t
         },
-        className: v(d, h(n, r), s({
-            borderRadius: u,
+        className: g(l, h(n, r), s({
+            borderRadius: x,
             overflow: "hidden",
-            background: (a !== null && a !== void 0 ? a : r) ? n ? e.colors.backgroundContainerBrandOverInverse : e.colors.backgroundContainerBrand : e.colors.backgroundContainer
+            background: (t !== null && t !== void 0 ? t : r) ? n ? o.colors.backgroundContainerBrandOverInverse : o.colors.backgroundContainerBrand : o.colors.backgroundContainer
         })),
-        role: m,
-        "aria-label": l
-    }, k(f)), {
-        children: /* @__PURE__ */ t(B, {
+        role: d,
+        "aria-label": b,
+        "aria-labelledby": f
+    }, y(m)), {
+        children: /* @__PURE__ */ a(k, {
             isInverse: r,
-            children: o
+            children: e
         })
     }));
-}), z = /*#__PURE__*/ i.forwardRef((o, r)=>/* @__PURE__ */ t(w, _object_spread_props(_object_spread({}, o), {
+}), A = /*#__PURE__*/ i.forwardRef((e, r)=>/* @__PURE__ */ a(w, _object_spread_props(_object_spread({}, e), {
         ref: r
     })));
-export { z as Boxed, w as InternalBoxed };
+export { A as Boxed, w as InternalBoxed };