@telefonica/mistica 12.13.0 → 13.0.1

package/dist-es/overscroll-color-context.js

@@ -1,25 +1,26 @@
 import { useIsInverseVariant as c } from "./theme-variant-context.js";
-import { useTheme as t, useScreenSize as m } from "./hooks.js";
-import d from "./nestable-context.js";
-import { isInsideNovumNativeApp as u, getPlatform as p } from "./utils/platform.js";
-import { jsx as e, Fragment as s, jsxs as v } from "./_virtual/jsx-runtime.js";
-var ref = d(""), f = ref.Provider, h = ref.Getter, g = ref.useSetValue, i = function(r) {
-    return p(r) === "ios";
-}, S = function(param) {
+import { useTheme as o, useScreenSize as d } from "./hooks.js";
+import u from "./nestable-context.js";
+import { isInsideNovumNativeApp as p, getPlatform as v } from "./utils/platform.js";
+import { vars as t } from "./skins/skin-contract.css-mistica.js";
+import { jsx as e, Fragment as s, jsxs as f } from "./_virtual/jsx-runtime.js";
+var ref = u(""), g = ref.Provider, h = ref.Getter, b = ref.useSetValue, i = function(r) {
+    return v(r) === "ios";
+}, P = function(param) {
     var r = param.children;
-    var ref = t(), o = ref.platformOverrides, ref1 = m(), l = ref1.isTabletOrSmaller, n = t();
-    return i(o) ? /* @__PURE__ */ e(f, {
+    var ref = o(), n = ref.platformOverrides, ref1 = d(), l = ref1.isTabletOrSmaller, a = o();
+    return i(n) ? /* @__PURE__ */ e(g, {
         children: /* @__PURE__ */ e(h, {
-            children: function(a) {
-                return /* @__PURE__ */ v(s, {
+            children: function(m) {
+                return /* @__PURE__ */ f(s, {
                     children: [
                         l ? /* @__PURE__ */ e("div", {
                             style: {
                                 position: "absolute",
                                 zIndex: 1,
-                                background: a || n.colors.background,
+                                background: m || t.colors.background,
                                 width: "100%",
-                                height: 500 + (u(o) ? 0 : n.dimensions.headerMobileHeight),
+                                height: 500 + (p(n) ? 0 : a.dimensions.headerMobileHeight),
                                 left: 0,
                                 marginTop: -500,
                                 transform: "translate3d(0,0,0)"
@@ -33,10 +34,10 @@ var ref = d(""), f = ref.Provider, h = ref.Getter, g = ref.useSetValue, i = func
     }) : /* @__PURE__ */ e(s, {
         children: r
     });
-}, b = function() {
-    var r = c(), o = t();
-    return g(r ? o.colors.navigationBarBackground : o.colors.background), null;
-}, N = function() {
-    return i(t().platformOverrides) ? /* @__PURE__ */ e(b, {}) : /* @__PURE__ */ e(s, {});
+}, O = function() {
+    var r = c();
+    return b(r ? t.colors.navigationBarBackground : t.colors.background), null;
+}, T = function() {
+    return i(o().platformOverrides) ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ e(s, {});
 };
-export { S as OverscrollColorProvider, N as default };
+export { P as OverscrollColorProvider, T as default };

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
-var o = "12.13.0";
+var o = "13.0.1";
 export { o as PACKAGE_VERSION };

package/dist-es/popover.js

@@ -106,26 +106,27 @@ import H from "./inline.js";
 import { Text3 as X, Text2 as $ } from "./text.js";
 import * as O from "./popover.css-mistica.js";
 import { container as _, arrowWrapper as q, arrow as C, textAlign as F, textContent as G, closeButtonIcon as J } from "./popover.css-mistica.js";
-import { sprinkles as k } from "./sprinkles.css-mistica.js";
+import { sprinkles as T } from "./sprinkles.css-mistica.js";
+import { vars as k } from "./skins/skin-contract.css-mistica.js";
 import { getPrefixedDataAttributes as K } from "./utils/dom.js";
 import { jsxs as i, jsx as o } from "./_virtual/jsx-runtime.js";
-var Q = O.defaultPositionDesktop, U = O.defaultPositionMobile, d = O.distanceToTarget, m = O.marginLeftRightMobile, Z = O.maxWidthDesktop, L = O.arrowSize, V = function(t) {
+var Q = O.defaultPositionDesktop, U = O.defaultPositionMobile, m = O.distanceToTarget, d = O.marginLeftRightMobile, Z = O.maxWidthDesktop, L = O.arrowSize, V = function(t) {
     return t || Z;
 }, tt = function() {
     var t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : Q, r = arguments.length > 1 ? arguments[1] : void 0;
     return r && (t === "left" || t === "right") ? U : t;
 }, et = function(t, r, e) {
-    return t ? (r ? window.screen.width : window.innerWidth) - m * 2 : V(e);
-}, rt = function(t, r, e, n) {
+    return t ? (r ? window.screen.width : window.innerWidth) - d * 2 : V(e);
+}, rt = function(t, r, e, s) {
     var a = {
         right: {
-            left: e.width + d,
+            left: e.width + m,
             top: e.height / 2,
             transform: "translateY(-50%)",
             WebkitTransform: "translateY(-50%)"
         },
         left: {
-            left: e.left - r - d,
+            left: e.left - r - m,
             top: e.height / 2,
             transform: "translateY(-50%)",
             WebkitTransform: "translateY(-50%)"
@@ -133,12 +134,12 @@ var Q = O.defaultPositionDesktop, U = O.defaultPositionMobile, d = O.distanceToT
         top: {
             transform: "translateY(-100%)",
             WebkitTransform: "translateY(-100%)",
-            top: -d,
-            left: n ? m - e.parentLeft : Math.max(e.width / 2 - r / 2, 0)
+            top: -m,
+            left: s ? d - e.parentLeft : Math.max(e.width / 2 - r / 2, 0)
         },
         bottom: {
-            top: e.height + d,
-            left: n ? m - e.parentLeft : Math.max(e.width / 2 - r / 2, 0)
+            top: e.height + m,
+            left: s ? d - e.parentLeft : Math.max(e.width / 2 - r / 2, 0)
         }
     }[t], f = {
         right: {
@@ -164,7 +165,7 @@ var Q = O.defaultPositionDesktop, U = O.defaultPositionMobile, d = O.distanceToT
             transform: "translateX(-50%) rotate(180deg)"
         }
     }[t];
-    return n && (f.left = e.parentLeft + e.width / 2 - m), {
+    return s && (f.left = e.parentLeft + e.width / 2 - d), {
         containerStyles: a,
         arrowStyles: f
     };
@@ -176,31 +177,31 @@ var Q = O.defaultPositionDesktop, U = O.defaultPositionMobile, d = O.distanceToT
         height: t.offsetHeight,
         parentLeft: t.parentNode.offsetLeft
     } : null;
-}, pt = function(param) {
-    var t = param.description, r = param.title, e = param.onClose, n = param.trackingEvent, s = param.position, a = param.width, w = param.target, f = param.asset, tmp = param.isVisible, g = tmp === void 0 ? !0 : tmp, Y = param.extra, B = param.dataAttributes;
-    var ref = P(), R = ref.texts, x = ref.colors, z = ref.isIos, D = ref.isDarkMode, ref1 = A(), h = ref1.isTabletOrSmaller, ref2 = _slicedToArray(c.useState(null), 2), b = ref2[0], y = ref2[1], p = c.useRef(null);
-    s = tt(s, h);
-    var S = et(h, z, a), v = D ? 1 : 0.2;
+}, ut = function(param) {
+    var t = param.description, r = param.title, e = param.onClose, s = param.trackingEvent, n = param.position, a = param.width, w = param.target, f = param.asset, tmp = param.isVisible, g = tmp === void 0 ? !0 : tmp, Y = param.extra, B = param.dataAttributes;
+    var ref = P(), R = ref.texts, z = ref.isIos, D = ref.isDarkMode, ref1 = A(), h = ref1.isTabletOrSmaller, ref2 = _slicedToArray(c.useState(null), 2), x = ref2[0], b = ref2[1], p = c.useRef(null);
+    n = tt(n, h);
+    var y = et(h, z, a), S = D ? 1 : 0.2;
     c.useEffect(function() {
         var l = function() {
-            y(N(p.current));
+            b(N(p.current));
         };
         return l(), window.addEventListener("resize", l), function() {
             window.removeEventListener("resize", l);
         };
     }, []), c.useEffect(function() {
-        y(N(p.current));
+        b(N(p.current));
     }, [
         g
     ]);
-    var T = null;
-    if (g && b) {
-        var ref3 = rt(s, S, b, h), l = ref3.containerStyles, I = ref3.arrowStyles;
-        T = /* @__PURE__ */ i("div", _objectSpreadProps(_objectSpread({
+    var v = null;
+    if (g && x) {
+        var ref3 = rt(n, y, x, h), l = ref3.containerStyles, I = ref3.arrowStyles;
+        v = /* @__PURE__ */ i("div", _objectSpreadProps(_objectSpread({
             className: _,
             style: _objectSpread({
-                width: S,
-                boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(v, ")")
+                width: y,
+                boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(S, ")")
             }, l)
         }, K(B, "Popover")), {
             children: [
@@ -213,7 +214,7 @@ var Q = O.defaultPositionDesktop, U = O.defaultPositionMobile, d = O.distanceToT
                             width: L,
                             height: L,
                             boxSizing: "border-box",
-                            boxShadow: s === "bottom" ? "initial" : "0 0 4px 0 rgba(0, 0, 0, ".concat(v, ")")
+                            boxShadow: n === "bottom" ? "initial" : "0 0 4px 0 rgba(0, 0, 0, ".concat(S, ")")
                         }
                     })
                 }),
@@ -222,7 +223,7 @@ var Q = O.defaultPositionDesktop, U = O.defaultPositionMobile, d = O.distanceToT
                     children: [
                         /* @__PURE__ */ o(u, {
                             paddingRight: 24,
-                            className: k({
+                            className: T({
                                 display: "flex"
                             }),
                             children: /* @__PURE__ */ i(H, {
@@ -241,7 +242,7 @@ var Q = O.defaultPositionDesktop, U = O.defaultPositionMobile, d = O.distanceToT
                                                 }),
                                                 /* @__PURE__ */ o($, {
                                                     regular: !0,
-                                                    color: x.textSecondary,
+                                                    color: k.colors.textSecondary,
                                                     children: t
                                                 })
                                             ]
@@ -255,10 +256,10 @@ var Q = O.defaultPositionDesktop, U = O.defaultPositionMobile, d = O.distanceToT
                             onPress: function(M) {
                                 e == null || e(), M.stopPropagation();
                             },
-                            trackingEvent: n,
+                            trackingEvent: s,
                             "aria-label": R.modalClose,
                             children: /* @__PURE__ */ o(W, {
-                                color: x.neutralHigh
+                                color: k.colors.neutralHigh
                             })
                         }),
                         Y
@@ -268,7 +269,7 @@ var Q = O.defaultPositionDesktop, U = O.defaultPositionMobile, d = O.distanceToT
         }));
     }
     return /* @__PURE__ */ i("div", {
-        className: k({
+        className: T({
             position: "relative"
         }),
         children: [
@@ -276,8 +277,8 @@ var Q = O.defaultPositionDesktop, U = O.defaultPositionMobile, d = O.distanceToT
                 ref: p,
                 children: w
             }),
-            T
+            v
         ]
     });
 };
-export { pt as default };
+export { ut as default };

package/dist-es/screen-size-context-provider.js

@@ -44,107 +44,86 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-import * as a from "react";
-import B from "./screen-size-context.js";
-import { useIsomorphicLayoutEffect as S, useTheme as D } from "./hooks.js";
-import { jsx as I } from "./_virtual/jsx-runtime.js";
-var s = function(i) {
-    return i.replace(/^@media /, "");
-}, z = function(param) {
-    var i = param.children;
-    var ref = _slicedToArray(a.useState(!0), 2), r = ref[0], u = ref[1];
-    S(function() {
-        u(!1);
+import * as t from "react";
+import k from "./screen-size-context.js";
+import { useIsomorphicLayoutEffect as l } from "./hooks.js";
+import { mobile as d, tablet as u, tabletOrBigger as S, tabletOrSmaller as h, largeDesktop as w } from "./media-queries.css-mistica.js";
+import { jsx as x } from "./_virtual/jsx-runtime.js";
+var P = function(param) {
+    var p = param.children;
+    var ref = _slicedToArray(t.useState(!0), 2), e = ref[0], b = ref[1];
+    l(function() {
+        b(!1);
     }, []);
-    var t = D(), e = a.useMemo(function() {
-        return {
-            mobile: s(t.mq.mobile),
-            tablet: s(t.mq.tablet),
-            tabletOrBigger: s(t.mq.tabletOrBigger),
-            tabletOrSmaller: s(t.mq.tabletOrSmaller),
-            largeDesktop: s(t.mq.largeDesktop)
-        };
-    }, [
-        t.mq.mobile,
-        t.mq.tablet,
-        t.mq.tabletOrBigger,
-        t.mq.tabletOrSmaller,
-        t.mq.largeDesktop
-    ]), ref1 = _slicedToArray(a.useState(function() {
-        return !r && window.matchMedia(e.mobile).matches;
-    }), 2), c = ref1[0], p = ref1[1], ref2 = _slicedToArray(a.useState(function() {
-        return !r && window.matchMedia(e.tablet).matches;
-    }), 2), b = ref2[0], h = ref2[1], ref3 = _slicedToArray(a.useState(function() {
-        return !r && window.matchMedia(e.tabletOrBigger).matches;
-    }), 2), g = ref3[0], O = ref3[1], ref4 = _slicedToArray(a.useState(function() {
-        return !r && window.matchMedia(e.tabletOrSmaller).matches;
-    }), 2), l = ref4[0], w = ref4[1], ref5 = _slicedToArray(a.useState(function() {
-        return !r && window.matchMedia(e.largeDesktop).matches;
-    }), 2), d = ref5[0], M = ref5[1];
-    S(function() {
+    var ref1 = _slicedToArray(t.useState(function() {
+        return !e && window.matchMedia(d).matches;
+    }), 2), i = ref1[0], f = ref1[1], ref2 = _slicedToArray(t.useState(function() {
+        return !e && window.matchMedia(u).matches;
+    }), 2), n = ref2[0], g = ref2[1], ref3 = _slicedToArray(t.useState(function() {
+        return !e && window.matchMedia(S).matches;
+    }), 2), c = ref3[0], M = ref3[1], ref4 = _slicedToArray(t.useState(function() {
+        return !e && window.matchMedia(h).matches;
+    }), 2), s = ref4[0], I = ref4[1], ref5 = _slicedToArray(t.useState(function() {
+        return !e && window.matchMedia(w).matches;
+    }), 2), m = ref5[0], O = ref5[1];
+    l(function() {
         if (!window.matchMedia) return;
-        var q = [
+        var T = [
             [
-                e.mobile,
-                p
+                d,
+                f
             ],
             [
-                e.tablet,
-                h
+                u,
+                g
             ],
             [
-                e.tabletOrBigger,
-                O
+                S,
+                M
             ],
             [
-                e.tabletOrSmaller,
-                w
+                h,
+                I
             ],
             [
-                e.largeDesktop,
-                M
+                w,
+                O
             ]
         ].map(function(param) {
-            var _param = _slicedToArray(param, 2), o = _param[0], k = _param[1];
-            var m = window.matchMedia(o), n = function() {
-                k(m.matches);
+            var _param = _slicedToArray(param, 2), r = _param[0], L = _param[1];
+            var a = window.matchMedia(r), o = function() {
+                L(a.matches);
             };
-            return m.addListener(n), n(), function() {
-                return m.removeListener(n);
+            return a.addListener(o), o(), function() {
+                return a.removeListener(o);
             };
         });
         return function() {
-            return q.forEach(function(o) {
-                return o();
+            return T.forEach(function(r) {
+                return r();
             });
         };
-    }, [
-        e.mobile,
-        e.tablet,
-        e.tabletOrBigger,
-        e.tabletOrSmaller,
-        e.largeDesktop
-    ]);
-    var f = a.useMemo(function() {
+    }, []);
+    var v = t.useMemo(function() {
         return {
-            isMobile: c,
-            isTablet: b,
-            isTabletOrBigger: g,
-            isTabletOrSmaller: l,
-            isDesktopOrBigger: r ? !1 : !l,
-            isLargeDesktop: d
+            isMobile: i,
+            isTablet: n,
+            isTabletOrBigger: c,
+            isTabletOrSmaller: s,
+            isDesktopOrBigger: e ? !1 : !s,
+            isLargeDesktop: m
         };
     }, [
+        i,
+        n,
         c,
-        b,
-        g,
-        l,
-        d,
-        r
+        s,
+        m,
+        e
     ]);
-    return /* @__PURE__ */ I(B.Provider, {
-        value: f,
-        children: i
+    return /* @__PURE__ */ x(k.Provider, {
+        value: v,
+        children: p
     });
 };
-export { z as default };
+export { P as default };

package/dist-es/skins/blau.js

@@ -53,9 +53,9 @@ var e = {
             backgroundAlternative: e.blauBluePrimary20,
             backgroundFeedbackBottom: e.blauBluePrimary,
             skeletonWave: e.grey2,
-            borderLight: e.grey1,
+            borderLow: e.grey1,
             border: e.grey2,
-            borderDark: e.grey5,
+            borderHigh: e.grey5,
             borderSelected: e.blauBlueSecondary60,
             buttonDangerBackground: e.blauRed,
             buttonDangerBackgroundSelected: e.blauRed70,
@@ -139,7 +139,7 @@ var e = {
             backgroundFeedbackBottom: e.darkModeBlack,
             navigationBarBackground: e.darkModeBlack,
             skeletonWave: e.grey5,
-            borderLight: e.darkModeBlack,
+            borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
             buttonLinkBackgroundSelected: r(e.blauPurple, 0.3),
             buttonLinkBackgroundSelectedInverse: r(e.blauPurple, 0.3),

package/dist-es/skins/movistar.js

@@ -57,9 +57,9 @@ var e = {
             backgroundAlternative: e.grey1,
             backgroundFeedbackBottom: e.movistarBlue,
             skeletonWave: e.grey2,
-            borderLight: e.grey1,
+            borderLow: e.grey1,
             border: e.grey3,
-            borderDark: e.grey5,
+            borderHigh: e.grey5,
             borderSelected: e.movistarBlue,
             buttonDangerBackground: e.pepper,
             buttonDangerBackgroundSelected: e.pepper55,
@@ -144,7 +144,7 @@ var e = {
             backgroundAlternative: e.darkModeGrey,
             backgroundFeedbackBottom: e.darkModeBlack,
             skeletonWave: e.grey5,
-            borderLight: e.darkModeBlack,
+            borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
             buttonLinkBackgroundSelected: r(e.white, 0.05),
             buttonLinkBackgroundSelectedInverse: r(e.white, 0.05),

package/dist-es/skins/o2-classic.js

@@ -65,9 +65,9 @@ var e = {
             backgroundAlternative: e.grey1,
             backgroundFeedbackBottom: e.o2GradientFourth,
             skeletonWave: e.grey2,
-            borderLight: e.grey1,
+            borderLow: e.grey1,
             border: e.grey3,
-            borderDark: e.grey5,
+            borderHigh: e.grey5,
             borderSelected: e.o2Gem,
             buttonDangerBackground: e.pepper,
             buttonDangerBackgroundSelected: e.pepper55,
@@ -151,9 +151,9 @@ var e = {
             backgroundAlternative: e.darkModeGrey,
             backgroundFeedbackBottom: e.darkModeBlack,
             skeletonWave: e.grey5,
-            borderLight: e.darkModeBlack,
+            borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
-            borderDark: e.grey5,
+            borderHigh: e.grey5,
             borderSelected: e.o2SkyBlue,
             buttonLinkBackgroundSelected: r(e.white, 0.05),
             buttonLinkBackgroundSelectedInverse: r(e.white, 0.05),

package/dist-es/skins/o2.js

@@ -55,9 +55,9 @@ var e = {
             backgroundAlternative: e.grey1,
             backgroundFeedbackBottom: e.o2BluePrimary,
             skeletonWave: e.grey2,
-            borderLight: e.grey1,
+            borderLow: e.grey1,
             border: e.grey3,
-            borderDark: e.grey5,
+            borderHigh: e.grey5,
             borderSelected: e.o2BluePrimary,
             buttonDangerBackground: e.pepper,
             buttonDangerBackgroundSelected: e.pepper60,
@@ -141,9 +141,9 @@ var e = {
             backgroundAlternative: e.darkModeGrey,
             backgroundFeedbackBottom: e.darkModeBlack,
             skeletonWave: e.grey5,
-            borderLight: e.darkModeBlack,
+            borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
-            borderDark: e.grey5,
+            borderHigh: e.grey5,
             borderSelected: e.darkModeO2BluePrimary,
             buttonLinkBackgroundSelected: r(e.white, 0.05),
             buttonLinkBackgroundSelectedInverse: r(e.white, 0.05),

package/dist-es/skins/skin-contract.css-mistica.js

@@ -12,8 +12,8 @@ var r = {
         navigationBarBackground: "var(--_1vqcj1i9)",
         skeletonWave: "var(--_1vqcj1ia)",
         border: "var(--_1vqcj1ib)",
-        borderLight: "var(--_1vqcj1ic)",
-        borderDark: "var(--_1vqcj1id)",
+        borderLow: "var(--_1vqcj1ic)",
+        borderHigh: "var(--_1vqcj1id)",
         borderSelected: "var(--_1vqcj1ie)",
         buttonDangerBackground: "var(--_1vqcj1if)",
         buttonDangerBackgroundSelected: "var(--_1vqcj1ig)",
@@ -98,8 +98,8 @@ var r = {
         navigationBarBackground: "var(--_1vqcj1i2l)",
         skeletonWave: "var(--_1vqcj1i2m)",
         border: "var(--_1vqcj1i2n)",
-        borderLight: "var(--_1vqcj1i2o)",
-        borderDark: "var(--_1vqcj1i2p)",
+        borderLow: "var(--_1vqcj1i2o)",
+        borderHigh: "var(--_1vqcj1i2p)",
         borderSelected: "var(--_1vqcj1i2q)",
         buttonDangerBackground: "var(--_1vqcj1i2r)",
         buttonDangerBackgroundSelected: "var(--_1vqcj1i2s)",

package/dist-es/skins/telefonica.js

@@ -51,9 +51,9 @@ var e = {
             backgroundAlternative: e.grey1,
             backgroundFeedbackBottom: e.telefonicaBlue,
             skeletonWave: e.grey2,
-            borderLight: e.grey1,
+            borderLow: e.grey1,
             border: e.grey2,
-            borderDark: e.grey5,
+            borderHigh: e.grey5,
             borderSelected: e.telefonicaBlue,
             buttonDangerBackground: e.coral,
             buttonDangerBackgroundSelected: e.coral80,
@@ -137,7 +137,7 @@ var e = {
             backgroundAlternative: e.darkModeGrey,
             backgroundFeedbackBottom: e.darkModeBlack,
             skeletonWave: e.grey5,
-            borderLight: e.darkModeBlack,
+            borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
             buttonLinkBackgroundSelected: r(e.white, 0.05),
             buttonLinkBackgroundSelectedInverse: r(e.white, 0.05),

package/dist-es/skins/vivo.js

@@ -1,5 +1,5 @@
 import { applyAlpha as r } from "../utils/color.js";
-import { VIVO_SKIN as t } from "./constants.js";
+import { VIVO_SKIN as o } from "./constants.js";
 var e = {
     vivoPurple: "#660099",
     vivoPurpleDark: "#461E5F",
@@ -34,9 +34,9 @@ var e = {
     darkModeBlack: "#191919",
     darkModeGrey: "#242424",
     darkModeGrey6: "#313235"
-}, i = function() {
+}, a = function() {
     return {
-        name: t,
+        name: o,
         colors: {
             appBarBackground: e.white,
             background: e.white,
@@ -49,9 +49,9 @@ var e = {
             navigationBarBackground: e.vivoPurple,
             backgroundAlternative: e.grey1,
             skeletonWave: e.grey2,
-            borderLight: e.grey1,
+            borderLow: e.grey1,
             border: e.grey3,
-            borderDark: e.grey5,
+            borderHigh: e.grey5,
             borderSelected: e.vivoPurple,
             buttonDangerBackground: e.pepper,
             buttonDangerBackgroundSelected: e.pepperDark,
@@ -135,9 +135,9 @@ var e = {
             backgroundAlternative: e.darkModeGrey,
             backgroundFeedbackBottom: e.darkModeBlack,
             skeletonWave: e.grey5,
-            borderLight: e.darkModeBlack,
+            borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
-            borderDark: e.grey5,
+            borderHigh: e.grey5,
             borderSelected: e.vivoPurpleLight80,
             buttonLinkBackgroundSelected: r(e.white, 0.05),
             buttonLinkBackgroundSelectedInverse: r(e.white, 0.05),
@@ -199,4 +199,4 @@ var e = {
         }
     };
 };
-export { i as getVivoSkin, e as palette };
+export { a as getVivoSkin, e as palette };