npm - @telefonica/mistica - Versions diffs - 15.20.0 → 16.0.0 - Mend

@telefonica/mistica 15.20.0 → 16.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3863) hide show

package/css/vivo.css CHANGED Viewed

@@ -67,33 +67,33 @@
     --mistica-color-coverBackgroundHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.25);
     --mistica-color-coverBackgroundPressed: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.35);
     --mistica-color-buttonDangerBackground: var(--mistica-vivo-pepper);
-    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-vivo-pepperDark);
+    --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-pepperDark);
     --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-pepperDark);
-    --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-vivo-pepperLight10);
+    --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-vivo-pepperLight10);
     --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-vivo-white);
-    --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-vivo-pepperLight10);
-    --mistica-color-buttonLinkBackgroundSelected: var(--mistica-vivo-vivoPurpleLight10);
-    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.1);
+    --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-vivo-pepperLight10);
+    --mistica-color-buttonLinkBackgroundPressed: var(--mistica-vivo-vivoPurpleLight10);
+    --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.1);
     --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurple);
     --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-white);
-    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-vivoPurple);
-    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-vivoPurpleLight10);
-    --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-vivo-vivoPurpleLight10);
+    --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-vivo-vivoPurpleLight10);
     --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
-    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-vivo-white);
+    --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-white);
     --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.15);
     --mistica-color-textButtonPrimary: var(--mistica-vivo-white);
     --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-vivoPurple);
-    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-vivo-vivoPurple);
+    --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-vivoPurple);
     --mistica-color-textButtonSecondary: var(--mistica-vivo-vivoPurple);
-    --mistica-color-textButtonSecondarySelected: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-white);
-    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-vivo-white);
+    --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-white);
     --mistica-color-textLink: var(--mistica-vivo-vivoPurple);
     --mistica-color-textLinkInverse: var(--mistica-vivo-white);
     --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
@@ -224,9 +224,10 @@
     --mistica-font-weight-tabsLabel: 500;
     --mistica-font-weight-link: 500;
     --mistica-font-weight-title1: 500;
-    --mistica-font-size-title2: 1.25rem;
-    --mistica-line-height-title2: 1.5rem;
     --mistica-font-weight-title2: 300;
+    --mistica-font-size-title3: 1.25rem;
+    --mistica-line-height-title3: 1.5rem;
+    --mistica-font-weight-title3: 300;
     --mistica-font-weight-indicator: 500;
     --mistica-font-weight-navigationBar: 500;
 }
@@ -260,33 +261,33 @@
     --mistica-color-coverBackgroundHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.25);
     --mistica-color-coverBackgroundPressed: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.35);
     --mistica-color-buttonDangerBackground: var(--mistica-vivo-pepper);
-    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-vivo-pepperDark);
+    --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-pepperDark);
     --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-pepperDark);
-    --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-vivo-raw-white), 0.08);
+    --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
     --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-vivo-raw-white), 0);
-    --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.08);
-    --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-vivo-raw-white), 0.08);
-    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.08);
+    --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.08);
     --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-vivoPurpleLight80);
-    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-vivo-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.15);
     --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-white);
-    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-vivo-white);
+    --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-white);
     --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
-    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-vivo-white);
+    --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-white);
     --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.15);
     --mistica-color-textButtonPrimary: var(--mistica-vivo-grey2);
     --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-grey2);
-    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-vivo-grey2);
+    --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-grey2);
     --mistica-color-textButtonSecondary: var(--mistica-vivo-grey2);
-    --mistica-color-textButtonSecondarySelected: var(--mistica-vivo-grey2);
+    --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-grey2);
     --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-grey2);
-    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-vivo-grey2);
+    --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-grey2);
     --mistica-color-textLink: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-textLinkInverse: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
@@ -399,33 +400,33 @@
         --mistica-color-coverBackgroundHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.25);
         --mistica-color-coverBackgroundPressed: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.35);
         --mistica-color-buttonDangerBackground: var(--mistica-vivo-pepper);
-        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-vivo-pepperDark);
+        --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-pepperDark);
         --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-pepperDark);
-        --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-vivo-raw-white), 0.08);
+        --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
         --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-vivo-raw-white), 0);
-        --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.08);
-        --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-vivo-raw-white), 0.08);
-        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.08);
+        --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.08);
+        --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
+        --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.08);
         --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-vivoPurpleLight80);
-        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-vivo-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.15);
         --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-white);
-        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-vivo-white);
+        --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-white);
         --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
-        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-vivo-white);
+        --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-white);
         --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.15);
         --mistica-color-textButtonPrimary: var(--mistica-vivo-grey2);
         --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-grey2);
-        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-vivo-grey2);
+        --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-grey2);
         --mistica-color-textButtonSecondary: var(--mistica-vivo-grey2);
-        --mistica-color-textButtonSecondarySelected: var(--mistica-vivo-grey2);
+        --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-grey2);
         --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-grey2);
-        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-vivo-grey2);
+        --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-grey2);
         --mistica-color-textLink: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-textLinkInverse: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
@@ -537,33 +538,33 @@
         --mistica-color-coverBackgroundHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.25);
         --mistica-color-coverBackgroundPressed: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.35);
         --mistica-color-buttonDangerBackground: var(--mistica-vivo-pepper);
-        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-vivo-pepperDark);
+        --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-pepperDark);
         --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-pepperDark);
-        --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-vivo-pepperLight10);
+        --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-vivo-pepperLight10);
         --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-vivo-white);
-        --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-vivo-pepperLight10);
-        --mistica-color-buttonLinkBackgroundSelected: var(--mistica-vivo-vivoPurpleLight10);
-        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.1);
+        --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-vivo-pepperLight10);
+        --mistica-color-buttonLinkBackgroundPressed: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.1);
         --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurple);
         --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-white);
-        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-vivoPurpleLight10);
-        --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-vivo-vivoPurpleLight10);
         --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-vivoPurple);
-        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
-        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-vivo-white);
+        --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-white);
         --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.15);
         --mistica-color-textButtonPrimary: var(--mistica-vivo-white);
         --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-vivoPurple);
-        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-vivo-vivoPurple);
+        --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-vivoPurple);
         --mistica-color-textButtonSecondary: var(--mistica-vivo-vivoPurple);
-        --mistica-color-textButtonSecondarySelected: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-white);
-        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-vivo-white);
+        --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-white);
         --mistica-color-textLink: var(--mistica-vivo-vivoPurple);
         --mistica-color-textLinkInverse: var(--mistica-vivo-white);
         --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
@@ -676,7 +677,7 @@
         --mistica-font-size-tabsLabel: 1.125rem;
         --mistica-line-height-tabsLabel: 1.5rem;
-        --mistica-font-size-title2: 1.75rem;
-        --mistica-line-height-title2: 2rem;
+        --mistica-font-size-title3: 1.75rem;
+        --mistica-line-height-title3: 2rem;
     }
 }

package/dist/accordion.d.ts CHANGED Viewed

@@ -12,8 +12,6 @@ interface AccordionItemContentProps {
     dataAttributes?: DataAttributes;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     role?: string;
-    /** @deprecated Use onChange Accordion's onChange callback instead */
-    onToogle?: (value: boolean) => void;
 }
 export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemContentProps & React.RefAttributes<TouchableElement>>;
 type AccordionBaseProps = {
@@ -33,10 +31,10 @@ type MultipleOpenProps = {
     defaultIndex?: number | ReadonlyArray<number>;
 };
 type AccordionProps = AccordionBaseProps & ExclusifyUnion<SingleOpenProps | MultipleOpenProps>;
-export declare const Accordion: React.FC<AccordionProps>;
+export declare const Accordion: ({ children, dataAttributes, index, defaultIndex, onChange, singleOpen, role, }: AccordionProps) => JSX.Element;
 interface BoxedAccordionItemProps extends AccordionItemContentProps {
     isInverse?: boolean;
 }
 export declare const BoxedAccordionItem: React.ForwardRefExoticComponent<BoxedAccordionItemProps & React.RefAttributes<HTMLDivElement>>;
-export declare const BoxedAccordion: React.FC<AccordionProps>;
+export declare const BoxedAccordion: ({ children, dataAttributes, index, defaultIndex, onChange, singleOpen, role, }: AccordionProps) => JSX.Element;
 export {};

package/dist/accordion.js CHANGED Viewed

@@ -11,16 +11,16 @@ function _export(target, all) {
 }
 _export(exports, {
     Accordion: function() {
-        return le;
+        return de;
     },
     AccordionItem: function() {
-        return ae;
+        return se;
     },
     BoxedAccordion: function() {
-        return ue;
+        return le;
     },
     BoxedAccordionItem: function() {
-        return me;
+        return ae;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -37,7 +37,6 @@ const _dom = require("./utils/dom.js");
 const _divider = /*#__PURE__*/ _interop_require_default(require("./divider.js"));
 const _boxed = require("./boxed.js");
 const _themevariantcontext = require("./theme-variant-context.js");
-const _hooks = require("./hooks.js");
 const _reacttransitiongroup = require("react-transition-group");
 const _platform = require("./utils/platform.js");
 const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
@@ -166,72 +165,72 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const C = 400, g = /*#__PURE__*/ _react.createContext({
+const v = 400, g = /*#__PURE__*/ _react.createContext({
     index: [],
     toggle: ()=>{}
-}), H = ()=>_react.useContext(g), b = (param)=>{
-    let { value: t, defaultValue: r, onChange: n, singleOpen: i } = param;
-    const u = t !== void 0, d = (e)=>e === void 0 ? [] : typeof e == "number" ? [
+}), F = ()=>_react.useContext(g), B = (param)=>{
+    let { value: t, defaultValue: r, onChange: n, singleOpen: c } = param;
+    const m = t !== void 0, d = (e)=>e === void 0 ? [] : typeof e == "number" ? [
             e
-        ] : e, [c, a] = _react.useState(d(r));
+        ] : e, [s, a] = _react.useState(d(r));
     _react.useEffect(()=>{
-        if (c.length > 1 && i) {
+        if (s.length > 1 && c) {
             const e = [
-                ...c
+                ...s
             ];
             e.splice(1), a(e);
         }
     }, [
-        i,
-        c
+        c,
+        s
     ]);
     const p = (e, l)=>{
         if (!l) return [
             e
         ];
-        const m = l.indexOf(e);
+        const u = l.indexOf(e);
         let I = [
             ...l
         ];
-        return m === -1 ? i ? I = [
+        return u === -1 ? c ? I = [
             e
-        ] : I.push(e) : I.splice(m, 1), I;
+        ] : I.push(e) : I.splice(u, 1), I;
     }, f = (e)=>{
-        if (u || a(p(e, c)), n) {
-            const l = (u ? d(t) : c).includes(e);
+        if (m || a(p(e, s)), n) {
+            const l = (m ? d(t) : s).includes(e);
             n(e, !l);
         }
     };
-    return u ? [
+    return m ? [
         d(t),
         f
     ] : [
-        c,
+        s,
         f
     ];
-}, U = (t)=>{
+}, H = (t)=>{
     const r = t == null ? void 0 : t.closest("[data-accordion]");
     if (r) return Array.from(r.querySelectorAll("[data-accordion-item]")).filter((n)=>n.closest("[data-accordion]") === r).findIndex((n)=>n === t);
-}, N = /*#__PURE__*/ _react.forwardRef((_param, u)=>{
-    var { content: t, dataAttributes: r, trackingEvent: n } = _param, i = _object_without_properties(_param, [
+}, b = /*#__PURE__*/ _react.forwardRef((_param, m)=>{
+    var { content: t, dataAttributes: r, trackingEvent: n } = _param, c = _object_without_properties(_param, [
         "content",
         "dataAttributes",
         "trackingEvent"
     ]);
-    const d = _react.useRef(null), c = _react.useRef(null), { index: a, toggle: p } = H(), f = (0, _themevariantcontext.useIsInverseVariant)(), e = (0, _hooks.useAriaId)(), l = (0, _hooks.useAriaId)(), [m, I] = _react.useState(), x = m !== void 0 && (a == null ? void 0 : a.includes(m));
+    const d = _react.useRef(null), s = _react.useRef(null), { index: a, toggle: p } = F(), f = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), e = _react.useId(), l = _react.useId(), [u, I] = _react.useState(), x = u !== void 0 && (a == null ? void 0 : a.includes(u));
     return _react.useEffect(()=>{
-        I(U(c.current));
+        I(H(s.current));
     }, []), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
-        ref: c
+        ref: s
     }, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, r), {
         "accordion-item": !0
     }))), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
-                ref: u,
+                ref: m,
                 className: (0, _classnames.default)(_accordioncssmistica.itemContent, f ? _accordioncssmistica.touchableBackgroundInverse : _accordioncssmistica.touchableBackground),
                 onPress: ()=>{
-                    m !== void 0 && p(m);
+                    u !== void 0 && p(u);
                 },
                 trackingEvent: n,
                 "aria-expanded": x,
@@ -240,12 +239,12 @@ const C = 400, g = /*#__PURE__*/ _react.createContext({
                     paddingX: 16,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Content, _object_spread_props(_object_spread({
                         labelId: e
-                    }, i), {
+                    }, c), {
                         right: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _accordioncssmistica.chevronContainer,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevron.default, {
                                 size: 24,
-                                transitionDuration: C,
+                                transitionDuration: v,
                                 direction: x ? "up" : "down",
                                 color: f ? _skincontractcssmistica.vars.colors.inverse : x ? _skincontractcssmistica.vars.colors.neutralHigh : _skincontractcssmistica.vars.colors.neutralMedium
                             })
@@ -255,7 +254,7 @@ const C = 400, g = /*#__PURE__*/ _react.createContext({
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
                 in: x,
-                timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : C,
+                timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : v,
                 nodeRef: d,
                 classNames: _accordioncssmistica.panelTransitionClasses,
                 mountOnEnter: !0,
@@ -278,7 +277,7 @@ const C = 400, g = /*#__PURE__*/ _react.createContext({
             })
         ]
     }));
-}), ae = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
+}), se = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
     var { dataAttributes: t, role: r } = _param, n = _object_without_properties(_param, [
         "dataAttributes",
         "role"
@@ -288,19 +287,19 @@ const C = 400, g = /*#__PURE__*/ _react.createContext({
         className: (0, _sprinklescssmistica.sprinkles)({
             width: "100%"
         }),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(N, _object_spread_props(_object_spread({}, n), {
-            ref: i,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread_props(_object_spread({}, n), {
+            ref: c,
             dataAttributes: _object_spread({
                 "component-name": "AccordionItem"
             }, t)
         }))
     });
-}), le = (param)=>{
-    let { children: t, dataAttributes: r, index: n, defaultIndex: i, onChange: u, singleOpen: d, role: c } = param;
-    const [a, p] = b({
+}), de = (param)=>{
+    let { children: t, dataAttributes: r, index: n, defaultIndex: c, onChange: m, singleOpen: d, role: s } = param;
+    const [a, p] = B({
         value: n,
-        defaultValue: i,
-        onChange: u,
+        defaultValue: c,
+        onChange: m,
         singleOpen: d
     }), f = _react.Children.toArray(t).filter(Boolean), e = f.length - 1;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(g.Provider, {
@@ -309,40 +308,40 @@ const C = 400, g = /*#__PURE__*/ _react.createContext({
             toggle: p
         },
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-            role: c
+            role: s
         }, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, r), {
             accordion: !0
         }), "Accordion")), {
-            children: f.map((l, m)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
+            children: f.map((l, u)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
                     children: [
                         l,
-                        m < e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                        u < e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                             paddingX: 16,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
                         })
                     ]
-                }, m))
+                }, u))
         }))
     });
-}, me = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
+}, ae = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
     var { dataAttributes: t, isInverse: r } = _param, n = _object_without_properties(_param, [
         "dataAttributes",
         "isInverse"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
         isInverse: r,
-        ref: i,
+        ref: c,
         dataAttributes: _object_spread({
             "component-name": "BoxedAccordionItem"
         }, t),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(N, _object_spread({}, n))
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread({}, n))
     });
-}), ue = (param)=>{
-    let { children: t, dataAttributes: r, index: n, defaultIndex: i, onChange: u, singleOpen: d, role: c } = param;
-    const [a, p] = b({
+}), le = (param)=>{
+    let { children: t, dataAttributes: r, index: n, defaultIndex: c, onChange: m, singleOpen: d, role: s } = param;
+    const [a, p] = B({
         value: n,
-        defaultValue: i,
-        onChange: u,
+        defaultValue: c,
+        onChange: m,
         singleOpen: d
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(g.Provider, {
@@ -352,7 +351,7 @@ const C = 400, g = /*#__PURE__*/ _react.createContext({
         },
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
             space: 16,
-            role: c,
+            role: s,
             dataAttributes: _object_spread({
                 "component-name": "BoxedAccordion",
                 accordion: !0

package/dist/avatar.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import type { DataAttributes, IconProps } from './utils/types';
 type AvatarProps = {
     size: number;
@@ -6,7 +6,7 @@ type AvatarProps = {
     initials?: string;
     textColor?: string;
     backgroundColor?: string;
-    Icon?: React.FC<IconProps>;
+    Icon?: (props: IconProps) => JSX.Element;
     badge?: boolean | number;
     'aria-label'?: string;
     dataAttributes?: DataAttributes;

package/dist/avatar.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return O;
+        return H;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -168,9 +168,9 @@ const $ = (r, o)=>{
         "dataAttributes"
     ]);
     var _s_backgroundColor, _s_textColor;
-    const l = (0, _themevariantcontext.useIsInverseVariant)(), g = (_s_backgroundColor = s.backgroundColor) !== null && _s_backgroundColor !== void 0 ? _s_backgroundColor : l ? _skincontractcssmistica.vars.colors.brandHigh : _skincontractcssmistica.vars.colors.brandLow, b = (_s_textColor = s.textColor) !== null && _s_textColor !== void 0 ? _s_textColor : l ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textBrand, [h, i] = _react.useState(!1);
+    const i = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), g = (_s_backgroundColor = s.backgroundColor) !== null && _s_backgroundColor !== void 0 ? _s_backgroundColor : i ? _skincontractcssmistica.vars.colors.brandHigh : _skincontractcssmistica.vars.colors.brandLow, b = (_s_textColor = s.textColor) !== null && _s_textColor !== void 0 ? _s_textColor : i ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textBrand, [h, l] = _react.useState(!1);
     _react.useEffect(()=>{
-        i(!1);
+        l(!1);
     }, [
         o
     ]);
@@ -195,7 +195,7 @@ const $ = (r, o)=>{
             children: I ? /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
                 src: o,
                 className: _avatarcssmistica.image,
-                onError: ()=>i(!0),
+                onError: ()=>l(!0),
                 role: "none",
                 width: r,
                 height: r
@@ -205,4 +205,4 @@ const $ = (r, o)=>{
             })
         }))
     });
-}, O = y;
+}, H = y;

package/dist/badge.d.ts CHANGED Viewed

@@ -15,5 +15,5 @@ type Props = {
  *   <IconButton aria-label="Shopping Cart with 2 items" Icon={IconShoppingCartFilled}/>
  * </Badge>
  */
-declare const Badge: React.FC<Props>;
+declare const Badge: ({ children, value, right, top, dataAttributes }: Props) => JSX.Element | null;
 export default Badge;

package/dist/badge.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return M;
+        return F;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -76,7 +76,7 @@ function _object_spread_props(target, source) {
 }
 const j = (param)=>{
     let { children: e, value: r, right: s, top: o, dataAttributes: c } = param;
-    const f = (0, _themevariantcontext.useIsInverseVariant)(), { textPresets: g } = (0, _hooks.useTheme)();
+    const f = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), { textPresets: g } = (0, _hooks.useTheme)();
     if (e && r === 0) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
         children: e
     });
@@ -117,4 +117,4 @@ const j = (param)=>{
             })
         ]
     }));
-}, M = j;
+}, F = j;

package/dist/boxed.d.ts CHANGED Viewed

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { vars } from './skins/skin-contract.css';
+import type { Variant } from './theme-variant-context';
 import type { ByBreakpoint, DataAttributes } from './utils/types';
 type Props = {
     children: React.ReactNode;
+    /** @deprecated use variant instead */
     isInverse?: boolean;
+    variant?: Variant;
     className?: string;
     role?: string;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */

package/dist/boxed.js CHANGED Viewed

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     Boxed: function() {
-        return J;
+        return G;
     },
     InternalBoxed: function() {
-        return A;
+        return H;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -124,7 +124,7 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const z = (o, r)=>o || r ? (0, _sprinklescssmistica.sprinkles)({
+const A = (o, r)=>o || r ? (0, _sprinklescssmistica.sprinkles)({
         border: "none"
     }) : _boxedcssmistica.boxBorder, s = (o)=>typeof o == "number" ? `${o}px` : o !== null && o !== void 0 ? o : "initial", e = (o, r)=>{
     if (typeof r == "number" || typeof r == "string" || typeof r > "u") return {
@@ -135,15 +135,15 @@ const z = (o, r)=>o || r ? (0, _sprinklescssmistica.sprinkles)({
         [_boxedcssmistica.vars.desktop[o]]: s(r.desktop)
     };
     return r.tablet && (t[_boxedcssmistica.vars.tablet[o]] = s(r.tablet)), t;
-}, A = /*#__PURE__*/ _react.forwardRef((param, w)=>{
-    let { children: o, isInverse: r = !1, className: t, role: p, dataAttributes: b, "aria-label": c, "aria-labelledby": y, width: h, maxWidth: x, minWidth: g, height: k, minHeight: u, borderRadius: B = _skincontractcssmistica.vars.borderRadii.container, background: d, desktopOnly: C } = param;
-    const m = (0, _themevariantcontext.useIsInverseVariant)();
+}, H = /*#__PURE__*/ _react.forwardRef((param, w)=>{
+    let { children: o, isInverse: r = !1, className: t, role: p, dataAttributes: b, "aria-label": c, "aria-labelledby": y, width: h, maxWidth: x, minWidth: g, height: k, minHeight: u, borderRadius: B = _skincontractcssmistica.vars.borderRadii.container, background: d, desktopOnly: C, variant: O } = param;
+    const m = (0, _themevariantcontext.useIsInverseOrMediaVariant)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         ref: w,
         style: _object_spread_props(_object_spread({}, (0, _css.applyCssVars)(_object_spread({}, e("width", h), e("maxWidth", x), e("minWidth", g), e("height", k), e("minHeight", u)))), {
             background: d
         }),
-        className: (0, _classnames.default)(t, _boxedcssmistica.boxed, z(m, r), (0, _sprinklescssmistica.sprinkles)({
+        className: (0, _classnames.default)(t, _boxedcssmistica.boxed, A(m, r), (0, _sprinklescssmistica.sprinkles)({
             borderRadius: B,
             overflow: "hidden",
             background: (d !== null && d !== void 0 ? d : r) ? m ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainerBrand : _skincontractcssmistica.vars.colors.backgroundContainer
@@ -155,10 +155,10 @@ const z = (o, r)=>o || r ? (0, _sprinklescssmistica.sprinkles)({
         "aria-labelledby": y
     }, (0, _dom.getPrefixedDataAttributes)(b)), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-            isInverse: r,
+            variant: O !== null && O !== void 0 ? O : r ? "inverse" : void 0,
             children: o
         })
     }));
-}), J = /*#__PURE__*/ _react.forwardRef((o, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(A, _object_spread_props(_object_spread({}, o), {
+}), G = /*#__PURE__*/ _react.forwardRef((o, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(H, _object_spread_props(_object_spread({}, o), {
         ref: r
     })));