@telefonica/mistica 17.0.0 → 17.2.0

package/css/vivo.css

@@ -13,9 +13,9 @@
     --mistica-vivo-pepper: #cc1f59;
     --mistica-vivo-pepperDark: #b71d63;
     --mistica-vivo-vivoPurpleLight20: #e0cceb;
+    --mistica-vivo-grey6: #000000;
     --mistica-vivo-grey4: #8a8c90;
     --mistica-vivo-vivoPurpleLight50: #b280cc;
-    --mistica-vivo-grey6: #000000;
     --mistica-vivo-vivoGreen: #99cc33;
     --mistica-vivo-orange: #ff9900;
     --mistica-vivo-pink: #eb3d7d;
@@ -33,16 +33,26 @@
     --mistica-vivo-pepperLight40: #db628b;
 
     /* Raw palette colors, for use with rgba() */
+    --mistica-vivo-raw-vivoPurple: 102, 0, 153;
     --mistica-vivo-raw-darkModeBlack: 25, 25, 25;
+    --mistica-vivo-raw-white: 255, 255, 255;
     --mistica-vivo-raw-grey6: 0, 0, 0;
-    --mistica-vivo-raw-vivoPurple: 102, 0, 153;
     --mistica-vivo-raw-vivoPurpleDark: 70, 30, 95;
-    --mistica-vivo-raw-white: 255, 255, 255;
+    --mistica-vivo-raw-vivoPurpleLight80: 132, 51, 173;
     --mistica-vivo-raw-darkModeGrey: 36, 36, 36;
 
     /* Colors */
     --mistica-color-background: var(--mistica-vivo-white);
     --mistica-color-backgroundAlternative: var(--mistica-vivo-grey1);
+    --mistica-color-backgroundSelected: rgba(var(--mistica-vivo-raw-vivoPurple), 0.08);
+    --mistica-color-backgroundSelectedHover: rgba(var(--mistica-vivo-raw-vivoPurple), 0.12);
+    --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-vivo-raw-vivoPurple), 0.16);
+    --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.16);
+    --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.24);
+    --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.32);
+    --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-vivo-raw-white), 0.2);
+    --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-vivo-raw-white), 0.28);
+    --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-vivo-raw-white), 0.35);
     --mistica-color-backgroundBrand: var(--mistica-vivo-vivoPurple);
     --mistica-color-backgroundNegative: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-vivoPurpleLight80);
@@ -98,6 +108,13 @@
     --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-grey2);
+    --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-vivo-white);
+    --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-vivo-grey1);
+    --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-vivo-white);
+    --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-vivo-grey1);
+    --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-vivo-white);
+    --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-vivo-grey1);
     --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurple);
     --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-white);
     --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-white);
@@ -161,6 +178,11 @@
     --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
     --mistica-color-textLinkDangerMedia: var(--mistica-vivo-pepper);
     --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight20);
+    --mistica-color-textLinkNeutral: var(--mistica-vivo-grey6);
+    --mistica-color-textLinkNeutralBrand: var(--mistica-vivo-grey6);
+    --mistica-color-textLinkNeutralNegative: var(--mistica-vivo-grey6);
+    --mistica-color-textLinkNeutralAlternative: var(--mistica-vivo-grey6);
+    --mistica-color-textLinkNeutralMedia: var(--mistica-vivo-grey6);
     --mistica-color-textActivated: var(--mistica-vivo-vivoPurple);
     --mistica-color-textBrand: var(--mistica-vivo-vivoPurple);
     --mistica-color-inputBorder: var(--mistica-vivo-grey4);
@@ -341,10 +363,10 @@
     --mistica-border-radius-chip: 24px;
     --mistica-border-radius-tag: 10px;
     --mistica-border-radius-input: 16px;
-    --mistica-border-radius-legacyDisplay: 24px;
     --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;
@@ -433,6 +455,15 @@
 [data-mistica-skin='vivo'][data-mistica-color-scheme='dark'] {
     --mistica-color-background: var(--mistica-vivo-darkModeBlack);
     --mistica-color-backgroundAlternative: var(--mistica-vivo-darkModeBlack);
+    --mistica-color-backgroundSelected: rgba(var(--mistica-vivo-raw-vivoPurpleLight80), 0.18);
+    --mistica-color-backgroundSelectedHover: rgba(var(--mistica-vivo-raw-vivoPurpleLight80), 0.25);
+    --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-vivo-raw-vivoPurpleLight80), 0.33);
+    --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-vivo-raw-vivoPurpleLight80), 0.18);
+    --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-vivo-raw-vivoPurpleLight80), 0.25);
+    --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-vivo-raw-vivoPurpleLight80), 0.33);
+    --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-vivo-raw-vivoPurpleLight80), 0.18);
+    --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-vivo-raw-vivoPurpleLight80), 0.25);
+    --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-vivo-raw-vivoPurpleLight80), 0.33);
     --mistica-color-backgroundBrand: var(--mistica-vivo-darkModeBlack);
     --mistica-color-backgroundNegative: var(--mistica-vivo-darkModeBlack);
     --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-darkModeBlack);
@@ -488,6 +519,13 @@
     --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-vivo-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-vivo-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-vivo-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(var(--mistica-vivo-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-vivo-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
     --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-vivoPurpleLight80);
@@ -551,6 +589,11 @@
     --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
     --mistica-color-textLinkDangerMedia: var(--mistica-vivo-pepper);
     --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-textLinkNeutral: var(--mistica-vivo-grey2);
+    --mistica-color-textLinkNeutralBrand: var(--mistica-vivo-grey2);
+    --mistica-color-textLinkNeutralNegative: var(--mistica-vivo-grey2);
+    --mistica-color-textLinkNeutralAlternative: var(--mistica-vivo-grey2);
+    --mistica-color-textLinkNeutralMedia: var(--mistica-vivo-white);
     --mistica-color-textActivated: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-textBrand: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-inputBorder: var(--mistica-vivo-darkModeGrey5);
@@ -726,6 +769,21 @@
     [data-mistica-skin='vivo'] {
         --mistica-color-background: var(--mistica-vivo-darkModeBlack);
         --mistica-color-backgroundAlternative: var(--mistica-vivo-darkModeBlack);
+        --mistica-color-backgroundSelected: rgba(var(--mistica-vivo-raw-vivoPurpleLight80), 0.18);
+        --mistica-color-backgroundSelectedHover: rgba(var(--mistica-vivo-raw-vivoPurpleLight80), 0.25);
+        --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-vivo-raw-vivoPurpleLight80), 0.33);
+        --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-vivo-raw-vivoPurpleLight80), 0.18);
+        --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-vivo-raw-vivoPurpleLight80), 0.25);
+        --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-vivo-raw-vivoPurpleLight80), 0.33);
+        --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-vivo-raw-vivoPurpleLight80), 0.18);
+        --mistica-color-backgroundSelectedNegativeHover: rgba(
+            var(--mistica-vivo-raw-vivoPurpleLight80),
+            0.25
+        );
+        --mistica-color-backgroundSelectedNegativePressed: rgba(
+            var(--mistica-vivo-raw-vivoPurpleLight80),
+            0.33
+        );
         --mistica-color-backgroundBrand: var(--mistica-vivo-darkModeBlack);
         --mistica-color-backgroundNegative: var(--mistica-vivo-darkModeBlack);
         --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-darkModeBlack);
@@ -781,6 +839,13 @@
         --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-vivo-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-vivo-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-vivo-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(var(--mistica-vivo-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-vivo-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
         --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-vivoPurpleLight80);
@@ -844,6 +909,11 @@
         --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
         --mistica-color-textLinkDangerMedia: var(--mistica-vivo-pepper);
         --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-textLinkNeutral: var(--mistica-vivo-grey2);
+        --mistica-color-textLinkNeutralBrand: var(--mistica-vivo-grey2);
+        --mistica-color-textLinkNeutralNegative: var(--mistica-vivo-grey2);
+        --mistica-color-textLinkNeutralAlternative: var(--mistica-vivo-grey2);
+        --mistica-color-textLinkNeutralMedia: var(--mistica-vivo-white);
         --mistica-color-textActivated: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-textBrand: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-inputBorder: var(--mistica-vivo-darkModeGrey5);
@@ -1018,6 +1088,15 @@
     [data-mistica-skin='vivo'][data-mistica-color-scheme='light'] {
         --mistica-color-background: var(--mistica-vivo-white);
         --mistica-color-backgroundAlternative: var(--mistica-vivo-grey1);
+        --mistica-color-backgroundSelected: rgba(var(--mistica-vivo-raw-vivoPurple), 0.08);
+        --mistica-color-backgroundSelectedHover: rgba(var(--mistica-vivo-raw-vivoPurple), 0.12);
+        --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-vivo-raw-vivoPurple), 0.16);
+        --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.16);
+        --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.24);
+        --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.32);
+        --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-vivo-raw-white), 0.2);
+        --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-vivo-raw-white), 0.28);
+        --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-vivo-raw-white), 0.35);
         --mistica-color-backgroundBrand: var(--mistica-vivo-vivoPurple);
         --mistica-color-backgroundNegative: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-vivoPurpleLight80);
@@ -1073,6 +1152,13 @@
         --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-grey2);
+        --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-vivo-white);
+        --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-vivo-grey1);
+        --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-vivo-white);
+        --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-vivo-grey1);
+        --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-vivo-white);
+        --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-vivo-grey1);
         --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurple);
         --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-white);
         --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-white);
@@ -1136,6 +1222,11 @@
         --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
         --mistica-color-textLinkDangerMedia: var(--mistica-vivo-pepper);
         --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight20);
+        --mistica-color-textLinkNeutral: var(--mistica-vivo-grey6);
+        --mistica-color-textLinkNeutralBrand: var(--mistica-vivo-grey6);
+        --mistica-color-textLinkNeutralNegative: var(--mistica-vivo-grey6);
+        --mistica-color-textLinkNeutralAlternative: var(--mistica-vivo-grey6);
+        --mistica-color-textLinkNeutralMedia: var(--mistica-vivo-grey6);
         --mistica-color-textActivated: var(--mistica-vivo-vivoPurple);
         --mistica-color-textBrand: var(--mistica-vivo-vivoPurple);
         --mistica-color-inputBorder: var(--mistica-vivo-grey4);

package/dist/accordion.css-mistica.js

@@ -9,17 +9,20 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    get accordionContentPadding () {
+        return z;
+    },
     get accordionItem () {
-        return f;
+        return c;
     },
     get boxed () {
-        return r;
+        return s;
     },
     get chevronContainer () {
         return t;
     },
     get itemContent () {
-        return s;
+        return n;
     },
     get panel () {
         return i;
@@ -31,18 +34,18 @@ _export(exports, {
         return x;
     },
     get rightContentContainer () {
-        return _;
+        return e;
     },
     get touchableBackground () {
-        return a;
+        return r;
     },
     get touchableBackgroundOverBrand () {
-        return e;
+        return a;
     }
 });
-/* empty css                                     */ /* empty css                                     */ var s = "v17_8s3szx0 v17_1y2v1nffx v17_1y2v1nfh6 v17_1y2v1nfif v17_1y2v1nfjo v17_1y2v1nfqr v17_1y2v1nfsm v17_1y2v1nffw v17_1y2v1nfq6 v17_1y2v1nfr8", r = "v17_8s3szx1", a = "v17_8s3szx2", e = "v17_8s3szx3", _ = "v17_8s3szx4", t = "v17_8s3szx5", o = "v17_8s3szx6", x = {
-    enter: "v17_8s3szx7",
-    enterActive: "v17_8s3szx8",
-    exit: "v17_8s3szx9",
-    exitActive: "v17_8s3szxa"
-}, i = "v17_8s3szxb", f = "v17_8s3szxc v17_1y2v1nfqr";
+/* 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
+            })
         })
     });
 };