@telefonica/mistica 17.1.0 → 17.2.0

package/css/movistar.css

@@ -376,6 +376,7 @@
     --mistica-border-radius-popup: 8px;
     --mistica-border-radius-sheet: 16px;
     --mistica-border-radius-mediaSmall: 8px;
+    --mistica-border-radius-snackbar: 8px;
 
     /* Text */
     --mistica-font-size-1: 0.75rem;

package/css/o2.css

@@ -46,6 +46,7 @@
     --mistica-o2-raw-white: 255, 255, 255;
     --mistica-o2-raw-black: 0, 0, 30;
     --mistica-o2-raw-beyondBlue90: 0, 16, 51;
+    --mistica-o2-raw-grey30: 217, 217, 221;
     --mistica-o2-raw-beyondBlue30: 128, 167, 255;
     --mistica-o2-raw-darkModeGrey: 8, 19, 43;
 
@@ -126,7 +127,7 @@
     --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-o2-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-o2-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-o2-raw-white), 0.08);
-    --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-o2-grey20);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-o2-raw-grey30), 0.4);
     --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-o2-white);
     --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-o2-grey20);
     --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-o2-white);
@@ -384,6 +385,7 @@
     --mistica-border-radius-popup: 8px;
     --mistica-border-radius-sheet: 16px;
     --mistica-border-radius-mediaSmall: 8px;
+    --mistica-border-radius-snackbar: 8px;
 
     /* Text */
     --mistica-font-size-1: 0.75rem;
@@ -1173,7 +1175,7 @@
         --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-o2-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-o2-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-o2-raw-white), 0.08);
-        --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-o2-grey20);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-o2-raw-grey30), 0.4);
         --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-o2-white);
         --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-o2-grey20);
         --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-o2-white);

package/css/telefonica.css

@@ -49,6 +49,7 @@
     --mistica-telefonica-raw-black: 0, 0, 0;
     --mistica-telefonica-raw-telefonicaBlue: 0, 102, 255;
     --mistica-telefonica-raw-telefonicaBlue80: 0, 46, 115;
+    --mistica-telefonica-raw-grey2: 209, 213, 228;
     --mistica-telefonica-raw-darkModeTelefonicaBlue: 34, 122, 255;
     --mistica-telefonica-raw-darkModeGrey: 0, 24, 47;
     --mistica-telefonica-raw-coral60: 210, 42, 30;
@@ -127,7 +128,7 @@
     --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
-    --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-telefonica-grey1);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-telefonica-raw-grey2), 0.4);
     --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-telefonica-white);
     --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-telefonica-grey1);
     --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-telefonica-white);
@@ -385,6 +386,7 @@
     --mistica-border-radius-popup: 4px;
     --mistica-border-radius-sheet: 0px;
     --mistica-border-radius-mediaSmall: 2px;
+    --mistica-border-radius-snackbar: 4px;
 
     /* Text */
     --mistica-font-size-1: 0.75rem;
@@ -1299,7 +1301,7 @@
         --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
-        --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-telefonica-grey1);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-telefonica-raw-grey2), 0.4);
         --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-telefonica-white);
         --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-telefonica-grey1);
         --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-telefonica-white);

package/css/vivo-evolution.css

@@ -150,7 +150,7 @@
         var(--mistica-vivo-evolution-raw-vivoNeutral0),
         0.1
     );
-    --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-evolution-vivoNeutral25);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-evolution-vivoNeutral100);
     --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-vivo-evolution-vivoNeutral0);
     --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-vivo-evolution-vivoNeutral25);
     --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-vivo-evolution-vivoNeutral0);
@@ -427,11 +427,12 @@
     --mistica-border-radius-container: 24px;
     --mistica-border-radius-indicator: 24px;
     --mistica-border-radius-chip: 24px;
-    --mistica-border-radius-tag: 10px;
+    --mistica-border-radius-tag: 8px;
     --mistica-border-radius-input: 16px;
     --mistica-border-radius-popup: 16px;
     --mistica-border-radius-sheet: 24px;
     --mistica-border-radius-mediaSmall: 12px;
+    --mistica-border-radius-snackbar: 24px;
 
     /* Text */
     --mistica-font-size-1: 0.75rem;
@@ -475,14 +476,14 @@
     --mistica-font-size-title1: 0.75rem;
     --mistica-line-height-title1: 1rem;
     --mistica-font-weight-title1: 500;
-    --mistica-font-size-title2: 1rem;
-    --mistica-line-height-title2: 1.5rem;
+    --mistica-font-size-title2: 0.875rem;
+    --mistica-line-height-title2: 1.25rem;
     --mistica-font-weight-title2: 500;
-    --mistica-font-size-title3: 1.125rem;
+    --mistica-font-size-title3: 1rem;
     --mistica-line-height-title3: 1.5rem;
     --mistica-font-weight-title3: 500;
-    --mistica-font-size-title4: 1.5rem;
-    --mistica-line-height-title4: 2rem;
+    --mistica-font-size-title4: 1.25rem;
+    --mistica-line-height-title4: 1.5rem;
     --mistica-font-weight-title4: 500;
     --mistica-font-weight-indicator: 500;
     --mistica-font-weight-navigationBar: 400;
@@ -1511,7 +1512,7 @@
             var(--mistica-vivo-evolution-raw-vivoNeutral0),
             0.1
         );
-        --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-evolution-vivoNeutral25);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-evolution-vivoNeutral100);
         --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-vivo-evolution-vivoNeutral0);
         --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-vivo-evolution-vivoNeutral25);
         --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-vivo-evolution-vivoNeutral0);
@@ -1820,12 +1821,12 @@
 
         --mistica-font-size-title1: 0.875rem;
         --mistica-line-height-title1: 1.25rem;
-        --mistica-font-size-title2: 1.125rem;
+        --mistica-font-size-title2: 1rem;
         --mistica-line-height-title2: 1.5rem;
-        --mistica-font-size-title3: 1.5rem;
-        --mistica-line-height-title3: 1.75rem;
-        --mistica-font-size-title4: 2rem;
-        --mistica-line-height-title4: 2.5rem;
+        --mistica-font-size-title3: 1.125rem;
+        --mistica-line-height-title3: 1.5rem;
+        --mistica-font-size-title4: 1.75rem;
+        --mistica-line-height-title4: 2rem;
 
         --mistica-font-size-chipLabel: 1rem;
         --mistica-line-height-chipLabel: 1.5rem;

package/css/vivo.css

@@ -108,7 +108,7 @@
     --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-vivo-raw-white), 0.1);
     --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
     --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
-    --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-grey1);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-grey2);
     --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-vivo-white);
     --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-vivo-grey1);
     --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-vivo-white);
@@ -366,6 +366,7 @@
     --mistica-border-radius-popup: 16px;
     --mistica-border-radius-sheet: 24px;
     --mistica-border-radius-mediaSmall: 12px;
+    --mistica-border-radius-snackbar: 16px;
 
     /* Text */
     --mistica-font-size-1: 0.75rem;
@@ -1151,7 +1152,7 @@
         --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-vivo-raw-white), 0.1);
         --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
         --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
-        --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-grey1);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-grey2);
         --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-vivo-white);
         --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-vivo-grey1);
         --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-vivo-white);

package/dist/accordion.css-mistica.js

@@ -9,9 +9,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    get accordionItem () {
+    get accordionContentPadding () {
         return z;
     },
+    get accordionItem () {
+        return c;
+    },
     get boxed () {
         return s;
     },
@@ -25,24 +28,24 @@ _export(exports, {
         return i;
     },
     get panelContainer () {
-        return x;
+        return o;
     },
     get panelTransitionClasses () {
-        return o;
+        return x;
     },
     get rightContentContainer () {
-        return a;
+        return e;
     },
     get touchableBackground () {
         return r;
     },
     get touchableBackgroundOverBrand () {
-        return e;
+        return a;
     }
 });
-/* empty css                                     */ /* empty css                                     */ var n = "v17_1_8s3szx0 v17_1_1y2v1nfh3 v17_1_1y2v1nfic v17_1_1y2v1nfjl v17_1_1y2v1nfku v17_1_1y2v1nfrx v17_1_1y2v1nfts v17_1_1y2v1nfh2 v17_1_1y2v1nfrc v17_1_1y2v1nfse", s = "v17_1_8s3szx1", r = "v17_1_8s3szx2", e = "v17_1_8s3szx3", a = "v17_1_8s3szx4", t = "v17_1_8s3szx5", x = "v17_1_8s3szx6", o = {
-    enter: "v17_1_8s3szx7",
-    enterActive: "v17_1_8s3szx8",
-    exit: "v17_1_8s3szx9",
-    exitActive: "v17_1_8s3szxa"
-}, i = "v17_1_8s3szxb", z = "v17_1_8s3szxc v17_1_1y2v1nfrx";
+/* empty css                                     */ /* empty css                                     */ var n = "v17_2_8s3szx0 v17_2_1y2v1nfh3 v17_2_1y2v1nfic v17_2_1y2v1nfjl v17_2_1y2v1nfku v17_2_1y2v1nfrx v17_2_1y2v1nfts v17_2_1y2v1nfh2 v17_2_1y2v1nfrc v17_2_1y2v1nfse", s = "v17_2_8s3szx1", r = "v17_2_8s3szx2", a = "v17_2_8s3szx3", e = "v17_2_8s3szx4", t = "v17_2_8s3szx5", o = "v17_2_8s3szx6", x = {
+    enter: "v17_2_8s3szx7",
+    enterActive: "v17_2_8s3szx8",
+    exit: "v17_2_8s3szx9",
+    exitActive: "v17_2_8s3szxa"
+}, i = "v17_2_8s3szxb", c = "v17_2_8s3szxc v17_2_1y2v1nfrx", z = "v17_2_8s3szxd";

package/dist/accordion.css.d.ts

@@ -13,3 +13,4 @@ export declare const panelTransitionClasses: {
 };
 export declare const panel: string;
 export declare const accordionItem: string;
+export declare const accordionContentPadding: string;

package/dist/accordion.d.ts

@@ -23,6 +23,7 @@ type AccordionBaseProps = {
     dataAttributes?: DataAttributes;
     onChange?: (index: number, value: boolean) => void;
     role?: string;
+    small?: boolean;
 };
 type SingleOpenProps = {
     singleOpen: true;
@@ -35,10 +36,10 @@ type MultipleOpenProps = {
     defaultIndex?: number | ReadonlyArray<number>;
 };
 type AccordionProps = AccordionBaseProps & ExclusifyUnion<SingleOpenProps | MultipleOpenProps>;
-export declare const Accordion: ({ children, dataAttributes, index, defaultIndex, onChange, singleOpen, role, }: AccordionProps) => JSX.Element;
+export declare const Accordion: ({ children, dataAttributes, index, defaultIndex, onChange, singleOpen, role, small, }: AccordionProps) => JSX.Element;
 interface BoxedAccordionItemProps extends AccordionItemContentProps {
     variant?: 'default' | 'brand';
 }
 export declare const BoxedAccordionItem: React.ForwardRefExoticComponent<BoxedAccordionItemProps & React.RefAttributes<HTMLDivElement>>;
-export declare const BoxedAccordion: ({ children, dataAttributes, index, defaultIndex, onChange, singleOpen, role, }: AccordionProps) => JSX.Element;
+export declare const BoxedAccordion: ({ children, dataAttributes, index, defaultIndex, onChange, singleOpen, role, small, }: AccordionProps) => JSX.Element;
 export {};

package/dist/accordion.js

@@ -11,24 +11,24 @@ function _export(target, all) {
 }
 _export(exports, {
     get Accordion () {
-        return ve;
+        return be;
     },
     get AccordionItem () {
-        return he;
+        return Ae;
     },
     get BoxedAccordion () {
-        return be;
+        return Be;
     },
     get BoxedAccordionItem () {
-        return Ae;
+        return Ce;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _list = require("./list.js");
 const _iconchevron = /*#__PURE__*/ _interop_require_default(require("./icons/icon-chevron.js"));
-const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _accordioncssmistica = require("./accordion.css-mistica.js");
+const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _touchable = require("./touchable.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
@@ -165,58 +165,58 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const B = 400, b = /*#__PURE__*/ _react.createContext({
+const B = 400, A = /*#__PURE__*/ _react.createContext({
     index: [],
     toggle: ()=>{}
-}), $ = ()=>_react.useContext(b), y = (param)=>{
-    let { value: o, defaultValue: e, onChange: n, singleOpen: c } = param;
-    const s = o !== void 0, l = (t)=>t === void 0 ? [] : typeof t == "number" ? [
+}), te = ()=>_react.useContext(A), R = (param)=>{
+    let { value: r, defaultValue: e, onChange: n, singleOpen: c } = param;
+    const s = r !== void 0, l = (t)=>t === void 0 ? [] : typeof t == "number" ? [
             t
-        ] : t, [a, u] = _react.useState(l(e));
+        ] : t, [a, p] = _react.useState(l(e));
     _react.useEffect(()=>{
         if (a.length > 1 && c) {
             const t = [
                 ...a
             ];
-            t.splice(1), u(t);
+            t.splice(1), p(t);
         }
     }, [
         c,
         a
     ]);
-    const f = (t, m)=>{
-        if (!m) return [
+    const x = (t, u)=>{
+        if (!u) return [
             t
         ];
-        const d = m.indexOf(t);
-        let x = [
-            ...m
+        const f = u.indexOf(t);
+        let d = [
+            ...u
         ];
-        return d === -1 ? c ? x = [
+        return f === -1 ? c ? d = [
             t
-        ] : x.push(t) : x.splice(d, 1), x;
-    }, p = (t)=>{
-        if (s || u(f(t, a)), n) {
-            const m = (s ? l(o) : a).includes(t);
-            n(t, !m);
+        ] : d.push(t) : d.splice(f, 1), d;
+    }, m = (t)=>{
+        if (s || p(x(t, a)), n) {
+            const u = (s ? l(r) : a).includes(t);
+            n(t, !u);
         }
     };
     return s ? [
-        l(o),
-        p
+        l(r),
+        m
     ] : [
         a,
-        p
+        m
     ];
-}, ee = (o)=>{
-    const e = o === null || o === void 0 ? void 0 : o.closest("[data-accordion]");
-    if (e) return Array.from(e.querySelectorAll("[data-accordion-item]")).filter((n)=>n.closest("[data-accordion]") === e).findIndex((n)=>n === o);
-}, te = (o)=>{
-    if (!/*#__PURE__*/ _react.isValidElement(o)) return "";
-    const e = o.props;
+}, oe = (r)=>{
+    const e = r === null || r === void 0 ? void 0 : r.closest("[data-accordion]");
+    if (e) return Array.from(e.querySelectorAll("[data-accordion-item]")).filter((n)=>n.closest("[data-accordion]") === e).findIndex((n)=>n === r);
+}, re = (r)=>{
+    if (!/*#__PURE__*/ _react.isValidElement(r)) return "";
+    const e = r.props;
     return typeof e.alt == "string" && e.alt.trim() ? e.alt.trim() : typeof e["aria-label"] == "string" && e["aria-label"].trim() ? e["aria-label"].trim() : "";
-}, R = /*#__PURE__*/ _react.forwardRef((_param, u)=>{
-    var { content: o, dataAttributes: e, trackingEvent: n, right: c, "aria-label": s, "aria-labelledby": l } = _param, a = _object_without_properties(_param, [
+}, S = /*#__PURE__*/ _react.forwardRef((_param, p)=>{
+    var { content: r, dataAttributes: e, trackingEvent: n, right: c, "aria-label": s, "aria-labelledby": l } = _param, a = _object_without_properties(_param, [
         "content",
         "dataAttributes",
         "trackingEvent",
@@ -224,41 +224,41 @@ const B = 400, b = /*#__PURE__*/ _react.createContext({
         "aria-label",
         "aria-labelledby"
     ]);
-    const f = _react.useRef(null), p = _react.useRef(null), { index: t, toggle: m } = $(), d = (0, _themevariantcontext.useThemeVariant)(), x = _react.useId(), C = _react.useId(), S = te(a.asset), T = s !== null && s !== void 0 ? s : [
+    const x = _react.useRef(null), m = _react.useRef(null), { index: t, toggle: u } = te(), f = (0, _themevariantcontext.useThemeVariant)(), d = _react.useId(), b = _react.useId(), T = re(a.asset), O = s !== null && s !== void 0 ? s : [
         a.title,
-        S
-    ].filter(Boolean).join(" "), [h, O] = _react.useState(), g = h !== void 0 && (t === null || t === void 0 ? void 0 : t.includes(h));
+        T
+    ].filter(Boolean).join(" "), [h, P] = _react.useState(), I = h !== void 0 && (t === null || t === void 0 ? void 0 : t.includes(h));
     _react.useEffect(()=>{
-        O(ee(p.current));
+        P(oe(m.current));
     }, []);
     const w = {
-        default: g ? _skincontractcssmistica.vars.colors.chevronIndicator : _skincontractcssmistica.vars.colors.chevronIndicator,
-        alternative: g ? _skincontractcssmistica.vars.colors.chevronIndicator : _skincontractcssmistica.vars.colors.chevronIndicator,
+        default: I ? _skincontractcssmistica.vars.colors.chevronIndicator : _skincontractcssmistica.vars.colors.chevronIndicator,
+        alternative: I ? _skincontractcssmistica.vars.colors.chevronIndicator : _skincontractcssmistica.vars.colors.chevronIndicator,
         brand: _skincontractcssmistica.vars.colors.textSecondaryBrand,
         media: _skincontractcssmistica.vars.colors.textSecondaryBrand,
         negative: _skincontractcssmistica.vars.colors.textSecondaryNegative
-    }[d];
+    }[f];
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
-        ref: p
+        ref: m
     }, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, e), {
         "accordion-item": !0
     }))), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
-                ref: u,
-                className: (0, _classnames.default)(_accordioncssmistica.itemContent, d === "brand" || d === "media" || d === "negative" ? _accordioncssmistica.touchableBackgroundOverBrand : _accordioncssmistica.touchableBackground),
+                ref: p,
+                className: (0, _classnames.default)(_accordioncssmistica.itemContent, f === "brand" || f === "media" || f === "negative" ? _accordioncssmistica.touchableBackgroundOverBrand : _accordioncssmistica.touchableBackground),
                 onPress: ()=>{
-                    h !== void 0 && m(h);
+                    h !== void 0 && u(h);
                 },
                 trackingEvent: n,
-                "aria-expanded": g,
-                "aria-controls": C,
-                "aria-label": T,
+                "aria-expanded": I,
+                "aria-controls": b,
+                "aria-label": O,
                 "aria-labelledby": l,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                    paddingX: 16,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: _accordioncssmistica.accordionContentPadding,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Content, _object_spread_props(_object_spread({
-                        labelId: x
+                        labelId: d
                     }, a), {
                         right: (param)=>{
                             let { centerY: V } = param;
@@ -273,7 +273,7 @@ const B = 400, b = /*#__PURE__*/ _react.createContext({
                                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevron.default, {
                                             size: 20,
                                             transitionDuration: B,
-                                            direction: g ? "up" : "down",
+                                            direction: I ? "up" : "down",
                                             color: w
                                         })
                                     })
@@ -284,78 +284,85 @@ const B = 400, b = /*#__PURE__*/ _react.createContext({
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
-                in: g,
+                in: I,
                 timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : B,
-                nodeRef: f,
+                nodeRef: x,
                 classNames: _accordioncssmistica.panelTransitionClasses,
                 mountOnEnter: !0,
                 unmountOnExit: !0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _accordioncssmistica.panelContainer,
-                    ref: f,
+                    ref: x,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _accordioncssmistica.panel,
                         role: "region",
-                        "aria-labelledby": x,
-                        id: C,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                            paddingX: 16,
-                            paddingBottom: 16,
-                            children: o
+                        "aria-labelledby": d,
+                        id: b,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: _accordioncssmistica.accordionContentPadding,
+                            style: {
+                                paddingBottom: 16
+                            },
+                            children: r
                         })
                     })
                 })
             })
         ]
     }));
-}), he = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
-    var { dataAttributes: o, role: e } = _param, n = _object_without_properties(_param, [
+}), Ae = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
+    var { dataAttributes: r, role: e } = _param, n = _object_without_properties(_param, [
         "dataAttributes",
         "role"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         role: e,
         className: _accordioncssmistica.accordionItem,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(R, _object_spread_props(_object_spread({}, n), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(S, _object_spread_props(_object_spread({}, n), {
             ref: c,
             dataAttributes: _object_spread({
                 testid: "AccordionItem"
-            }, o)
+            }, r)
         }))
     });
-}), ve = (param)=>{
-    let { children: o, dataAttributes: e, index: n, defaultIndex: c, onChange: s, singleOpen: l, role: a } = param;
-    const [u, f] = y({
+}), be = (param)=>{
+    let { children: r, dataAttributes: e, index: n, defaultIndex: c, onChange: s, singleOpen: l, role: a, small: p = !1 } = param;
+    const [x, m] = R({
         value: n,
         defaultValue: c,
         onChange: s,
         singleOpen: l
-    }), p = _react.Children.toArray(o).filter(Boolean), t = p.length - 1;
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(b.Provider, {
+    }), t = _react.Children.toArray(r).filter(Boolean), u = t.length - 1;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(A.Provider, {
         value: {
-            index: u,
-            toggle: f
+            index: x,
+            toggle: m
         },
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-            role: a
-        }, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({
-            testid: "Accordion"
-        }, e), {
-            accordion: !0
-        }))), {
-            children: p.map((m, d)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
-                    children: [
-                        m,
-                        d < t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                            paddingX: 16,
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
-                        })
-                    ]
-                }, d))
-        }))
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.ListContext.Provider, {
+            value: {
+                small: p
+            },
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+                role: a
+            }, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({
+                testid: "Accordion"
+            }, e), {
+                accordion: !0
+            }))), {
+                children: t.map((f, d)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
+                        children: [
+                            f,
+                            d < u && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                paddingX: 16,
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
+                            })
+                        ]
+                    }, d))
+            }))
+        })
     });
-}, Ae = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
-    var { dataAttributes: o, variant: e } = _param, n = _object_without_properties(_param, [
+}, Ce = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
+    var { dataAttributes: r, variant: e } = _param, n = _object_without_properties(_param, [
         "dataAttributes",
         "variant"
     ]);
@@ -366,30 +373,35 @@ const B = 400, b = /*#__PURE__*/ _react.createContext({
         ref: c,
         dataAttributes: _object_spread({
             testid: "BoxedAccordionItem"
-        }, o),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(R, _object_spread({}, n))
+        }, r),
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(S, _object_spread({}, n))
     });
-}), be = (param)=>{
-    let { children: o, dataAttributes: e, index: n, defaultIndex: c, onChange: s, singleOpen: l, role: a } = param;
-    const [u, f] = y({
+}), Be = (param)=>{
+    let { children: r, dataAttributes: e, index: n, defaultIndex: c, onChange: s, singleOpen: l, role: a, small: p = !1 } = param;
+    const [x, m] = R({
         value: n,
         defaultValue: c,
         onChange: s,
         singleOpen: l
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(b.Provider, {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(A.Provider, {
         value: {
-            index: u,
-            toggle: f
+            index: x,
+            toggle: m
         },
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
-            space: 16,
-            role: a,
-            dataAttributes: _object_spread({
-                testid: "BoxedAccordion",
-                accordion: !0
-            }, e),
-            children: o
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.ListContext.Provider, {
+            value: {
+                small: p
+            },
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
+                space: 16,
+                role: a,
+                dataAttributes: _object_spread({
+                    testid: "BoxedAccordion",
+                    accordion: !0
+                }, e),
+                children: r
+            })
         })
     });
 };

package/dist/align.css-mistica.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "container", {
         return o;
     }
 });
-/* empty css                                 */ var o = "v17_1_1mfs0fk0";
+/* empty css                                 */ var o = "v17_2_1mfs0fk0";

package/dist/autocomplete.css-mistica.js

@@ -25,4 +25,4 @@ _export(exports, {
         return r;
     }
 });
-/* empty css                                     */ /* empty css                                        */ var n = "v17_1_1rj3nw81 v17_1_1rj3nw80 v17_1_1y2v1nfr4", r = "v17_1_1rj3nw83 v17_1_1rj3nw82 v17_1_1y2v1nfhc v17_1_1y2v1nfil v17_1_1y2v1nfju v17_1_1y2v1nfl3 v17_1_1y2v1nfr5 v17_1_1y2v1nfu3", f = "v17_1_1rj3nw85 v17_1_1rj3nw84 v17_1_1y2v1nfju v17_1_1y2v1nfl3 v17_1_1y2v1nfhf v17_1_1y2v1nfio", o = "v17_1_1rj3nw87 v17_1_1rj3nw85 v17_1_1rj3nw84 v17_1_1y2v1nfju v17_1_1y2v1nfl3 v17_1_1y2v1nfhf v17_1_1y2v1nfio v17_1_1rj3nw86 v17_1_1y2v1nfuc", y = "v17_1_1rj3nw88";
+/* empty css                                     */ /* empty css                                        */ var n = "v17_2_1rj3nw81 v17_2_1rj3nw80 v17_2_1y2v1nfr4", r = "v17_2_1rj3nw83 v17_2_1rj3nw82 v17_2_1y2v1nfhc v17_2_1y2v1nfil v17_2_1y2v1nfju v17_2_1y2v1nfl3 v17_2_1y2v1nfr5 v17_2_1y2v1nfu3", f = "v17_2_1rj3nw85 v17_2_1rj3nw84 v17_2_1y2v1nfju v17_2_1y2v1nfl3 v17_2_1y2v1nfhf v17_2_1y2v1nfio", o = "v17_2_1rj3nw87 v17_2_1rj3nw85 v17_2_1rj3nw84 v17_2_1y2v1nfju v17_2_1y2v1nfl3 v17_2_1y2v1nfhf v17_2_1y2v1nfio v17_2_1rj3nw86 v17_2_1y2v1nfud", y = "v17_2_1rj3nw88";