@telefonica/mistica 14.7.1 → 14.9.0

package/dist/skins/types/index.d.ts

@@ -0,0 +1,48 @@
+import type { Colors } from './colors';
+export type { Colors } from './colors';
+export type SkinVariant = 'prominent';
+export type KnownSkinName = 'Movistar' | 'O2' | 'O2-classic' | 'Vivo' | 'Telefonica' | 'Blau';
+export type SkinName = KnownSkinName | string;
+export type GetKnownSkin = (variant?: SkinVariant) => KnownSkin;
+export type FontWeight = 'light' | 'regular' | 'medium' | 'bold';
+type TextPresetName = 'text5' | 'text6' | 'text7' | 'text8' | 'text9' | 'text10' | 'cardTitle';
+export type TextPresetsConfig = {
+    [preset in TextPresetName]: {
+        weight: FontWeight;
+    };
+};
+type PartialTextPresetsConfig = {
+    [preset in TextPresetName]?: {
+        weight?: FontWeight;
+    };
+};
+export type BorderRadiiConfig = {
+    button: string;
+    input: string;
+    container: string;
+    /**
+     * This will be used for DisplayCards and PosterCards only for the moment. One day we'll unify the borderRadius in all the cards to use container.
+     * @deprecated Use `container` instead
+     */
+    legacyDisplay: string;
+    popup: string;
+    checkbox: string;
+    indicator: string;
+    sheet: string;
+    bar: string;
+    avatar: string;
+};
+export type Skin = {
+    name: SkinName;
+    colors: Colors;
+    darkModeColors?: Partial<Colors>;
+    textPresets?: PartialTextPresetsConfig;
+    borderRadii?: BorderRadiiConfig;
+};
+export type KnownSkin = {
+    name: KnownSkinName;
+    colors: Colors;
+    darkModeColors?: Partial<Colors>;
+    textPresets?: PartialTextPresetsConfig;
+    borderRadii?: BorderRadiiConfig;
+};

package/dist/skins/vivo.js

@@ -56,11 +56,12 @@ const e = {
             backgroundContainer: e.white,
             backgroundContainerAlternative: e.grey1,
             backgroundContainerBrand: e.vivoPurple,
+            backgroundContainerBrandOverInverse: e.vivoPurpleDark,
             backgroundBrand: e.vivoPurple,
             backgroundBrandSecondary: e.vivoPurple,
             backgroundOverlay: (0, _colorJs.applyAlpha)(e.grey6, 0.6),
             backgroundSkeleton: e.grey2,
-            backgroundSkeletonInverse: (0, _colorJs.applyAlpha)(e.white, 0.2),
+            backgroundSkeletonInverse: e.vivoPurpleDark,
             backgroundFeedbackBottom: e.vivoPurple,
             navigationBarBackground: e.vivoPurple,
             backgroundAlternative: e.grey1,
@@ -154,6 +155,7 @@ const e = {
             background: e.darkModeBlack,
             backgroundContainer: e.darkModeGrey,
             backgroundContainerBrand: e.darkModeGrey,
+            backgroundContainerBrandOverInverse: e.darkModeGrey,
             backgroundContainerAlternative: e.darkModeGrey,
             backgroundBrand: e.darkModeBlack,
             backgroundBrandSecondary: e.darkModeBlack,

package/dist/snackbar.css-mistica.js

@@ -9,10 +9,10 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TRANSITION_TIME_IN_MS: ()=>v,
-    button: ()=>a,
-    buttonCritical: ()=>o,
-    buttonInfo: ()=>b,
+    TRANSITION_TIME_IN_MS: ()=>a,
+    button: ()=>v,
+    buttonCritical: ()=>b,
+    buttonInfo: ()=>o,
     content: ()=>t,
     longButton: ()=>_,
     snackbar: ()=>f,
@@ -24,4 +24,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./snackbar.css.ts.vanilla.js");
-var v = 300, a = "o7bjb09", o = "_1y2v1nf1s", b = "_1y2v1nf25", t = "_1y2v1nf5o _1y2v1nf60", _ = "o7bjb0a", f = "o7bjb01 _1y2v1nf7v _1y2v1nf5o _1y2v1nf5x", p = "o7bjb02", y = "o7bjb04 _1y2v1nf5l _1y2v1nf9x", e = "_1y2v1nf43", i = "_1y2v1nf44", j = "o7bjb07";
+var a = 300, v = "o7bjb09", b = "_1y2v1nf1t", o = "_1y2v1nf26", t = "_1y2v1nf5q _1y2v1nf62", _ = "o7bjb0a", f = "o7bjb01 _1y2v1nf7x _1y2v1nf5q _1y2v1nf5z", p = "o7bjb02", y = "o7bjb04 _1y2v1nf5n _1y2v1nf9z", e = "_1y2v1nf45", i = "_1y2v1nf46", j = "o7bjb07";

package/dist/spinner.css-mistica.js

@@ -16,4 +16,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./spinner.css.ts.vanilla.js");
-var t = "_1fthc594 _1y2v1nf66", a = "_1fthc595", e = "_1y2v1nf66", f = "_1fthc597";
+var t = "_1fthc594 _1y2v1nf68", a = "_1fthc595", e = "_1y2v1nf68", f = "_1fthc597";

package/dist/spinner.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>j
+    get: ()=>V
 });
 const _platformJs = require("./utils/platform.js");
 const _fadeInJs = /*#__PURE__*/ _interopRequireDefault(require("./fade-in.js"));
@@ -45,101 +45,81 @@ function _objectSpread(target) {
     }
     return target;
 }
-const j = (param)=>{
-    let { color: e , delay: a = "500ms" , size: s = 24 , style: r , rolePresentation: h  } = param;
-    const { texts: p , platformOverrides: f  } = (0, _hooksJs.useTheme)();
-    e = e || _skinContractCssMisticaJs.vars.colors.controlActivated;
-    const i = (0, _hooksJs.useAriaId)(), c = !h, m = p.loading, d = (0, _platformJs.getPlatform)(f) === "ios" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("svg", {
-        "aria-labelledby": i,
+const V = (param)=>{
+    let { color: t , delay: s = "500ms" , size: a = 24 , style: m , rolePresentation: p  } = param;
+    const { texts: h , platformOverrides: o  } = (0, _hooksJs.useTheme)();
+    t = t || _skinContractCssMisticaJs.vars.colors.controlActivated;
+    const l = (0, _hooksJs.useAriaId)(), n = !p, C = h.loading, d = (0, _platformJs.getPlatform)(o) === "ios" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("svg", {
+        "aria-labelledby": l,
         className: _spinnerCssMisticaJs.spinnerIos,
-        height: s,
-        style: _objectSpread({}, r),
+        height: a,
+        style: _objectSpread({}, m),
         role: "img",
-        viewBox: "0 0 28 28",
-        width: s,
+        viewBox: "0 0 30 30",
+        width: a,
         children: [
-            c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("title", {
-                id: i,
-                children: m
+            n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("title", {
+                id: l,
+                children: C
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("g", {
                 role: "presentation",
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
                         className: _spinnerCssMisticaJs.spinnerIosSvgPath,
-                        fill: e,
-                        d: "M18.696 10.5c-.275-.48-.113-1.09.365-1.367l4.76-2.75c.49-.274 1.1-.11 1.37.367.28.48.12 1.092-.36 1.364l-4.76 2.75c-.48.277-1.09.113-1.36-.364z"
+                        fill: t,
+                        d: "M14 1.5C14 0.671573 14.6716 0 15.5 0C16.3284 0 17 0.671573 17 1.5V8.5C17 9.32843 16.3284 10 15.5 10C14.6716 10 14 9.32843 14 8.5V1.5Z"
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
                         className: _spinnerCssMisticaJs.spinnerIosSvgPath,
-                        fill: e,
-                        d: "M16.133 6.938l2.75-4.765c.276-.478.89-.643 1.367-.366.48.276.64.886.365 1.366l-2.748 4.762c-.276.48-.888.645-1.367.368-.48-.276-.644-.89-.367-1.365z"
+                        fill: t,
+                        d: "M21.182 11.1317C20.5962 11.7175 19.6464 11.7175 19.0607 11.1317C18.4749 10.5459 18.4749 9.59619 19.0607 9.01041L24.0104 4.06066C24.5962 3.47487 25.5459 3.47487 26.1317 4.06066C26.7175 4.64645 26.7175 5.59619 26.1317 6.18198L21.182 11.1317Z"
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
                         className: _spinnerCssMisticaJs.spinnerIosSvgPath,
-                        fill: e,
-                        d: "M13.5 7.5c-.553 0-1-.448-1-1V1c0-.554.447-1 1-1 .553 0 1.002.447 1.002 1v5.5c-.002.553-.45 1-1.003 1z"
+                        fill: t,
+                        d: "M28.5 13C29.3284 13 30 13.6716 30 14.5C30 15.3284 29.3284 16 28.5 16H21.5C20.6716 16 20 15.3284 20 14.5C20 13.6716 20.6716 13 21.5 13H28.5Z"
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
                         className: _spinnerCssMisticaJs.spinnerIosSvgPath,
-                        fill: e,
-                        d: "M8.303 10.5c-.277.477-.888.64-1.365.365l-4.763-2.75c-.478-.273-.643-.886-.367-1.365.277-.48.89-.642 1.367-.368l4.762 2.75c.48.278.643.89.366 1.368z"
+                        fill: t,
+                        d: "M19.0607 20.182C18.4749 19.5962 18.4749 18.6464 19.0607 18.0607C19.6464 17.4749 20.5962 17.4749 21.182 18.0607L26.1317 23.0104C26.7175 23.5962 26.7175 24.5459 26.1317 25.1317C25.5459 25.7175 24.5962 25.7175 24.0104 25.1317L19.0607 20.182Z"
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
                         className: _spinnerCssMisticaJs.spinnerIosSvgPath,
-                        fill: e,
-                        d: "M9.133 7.937l-2.75-4.763c-.276-.48-.11-1.09.365-1.366.48-.277 1.09-.114 1.367.366l2.75 4.765c.274.47.112 1.08-.367 1.36-.477.28-1.09.11-1.365-.37z"
+                        fill: t,
+                        d: "M14 21.5C14 20.6716 14.6716 20 15.5 20C16.3284 20 17 20.6716 17 21.5V28.5C17 29.3284 16.3284 30 15.5 30C14.6716 30 14 29.3284 14 28.5V21.5Z"
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
                         className: _spinnerCssMisticaJs.spinnerIosSvgPath,
-                        fill: e,
-                        d: "M6.5 14.5H1c-.554 0-1-.448-1-1 0-.554.447-1 1-1h5.5c.55 0 1 .447 1 1 0 .552-.448 1-1 1z"
+                        fill: t,
+                        d: "M7.18198 25.1317C6.59619 25.7175 5.64645 25.7175 5.06066 25.1317C4.47487 24.5459 4.47487 23.5962 5.06066 23.0104L10.0104 18.0607C10.5962 17.4749 11.5459 17.4749 12.1317 18.0607C12.7175 18.6464 12.7175 19.5962 12.1317 20.182L7.18198 25.1317Z"
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
                         className: _spinnerCssMisticaJs.spinnerIosSvgPath,
-                        fill: e,
-                        d: "M8.303 16.502c.277.478.113 1.088-.365 1.366l-4.762 2.75c-.478.272-1.09.11-1.368-.367-.276-.47-.11-1.08.367-1.36l4.762-2.75c.478-.28 1.09-.11 1.366.37z"
+                        fill: t,
+                        d: "M8.5 13C9.32843 13 10 13.6716 10 14.5C10 15.3284 9.32843 16 8.5 16H1.5C0.671573 16 0 15.3284 0 14.5C0 13.6716 0.671573 13 1.5 13H8.5Z"
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
                         className: _spinnerCssMisticaJs.spinnerIosSvgPath,
-                        fill: e,
-                        d: "M10.866 20.062l-2.75 4.767c-.277.47-.89.63-1.367.36-.48-.28-.65-.89-.37-1.37l2.75-4.77c.27-.48.89-.64 1.36-.37.47.276.64.89.36 1.364z"
-                    }),
-                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
-                        className: _spinnerCssMisticaJs.spinnerIosSvgPath,
-                        fill: e,
-                        d: "M13.5 19.502c.553 0 1.002.448 1.002 1.002v5.498c0 .55-.448 1-1.003 1-.56 0-1-.448-1-1v-5.498c0-.554.44-1.002 1-1.002z"
-                    }),
-                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
-                        className: _spinnerCssMisticaJs.spinnerIosSvgPath,
-                        fill: e,
-                        d: "M17.867 19.062l2.748 4.764c.275.48.113 1.088-.365 1.365-.48.28-1.09.12-1.367-.36l-2.75-4.76c-.276-.47-.11-1.09.367-1.36.48-.27 1.09-.11 1.367.37z"
-                    }),
-                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
-                        className: _spinnerCssMisticaJs.spinnerIosSvgPath,
-                        fill: e,
-                        d: "M18.696 16.502c.276-.48.887-.646 1.365-.367l4.77 2.748c.48.28.64.89.37 1.368-.27.48-.88.64-1.37.37l-4.76-2.75c-.47-.27-.64-.89-.36-1.36z"
-                    }),
-                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
-                        className: _spinnerCssMisticaJs.spinnerIosSvgPath,
-                        fill: e,
-                        d: "M25.998 12.5h-5.5c-.553 0-1.002.447-1.002 1 0 .552.447 1 1 1H26c.554 0 1.002-.448 1.002-1 0-.554-.448-1-1.002-1z"
+                        fill: t,
+                        d: "M5.06066 6.18198C4.47487 5.59619 4.47487 4.64645 5.06066 4.06066C5.64645 3.47487 6.59619 3.47487 7.18198 4.06066L12.1317 9.01041C12.7175 9.59619 12.7175 10.5459 12.1317 11.1317C11.5459 11.7175 10.5962 11.7175 10.0104 11.1317L5.06066 6.18198Z"
                     })
                 ]
             })
         ]
     }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("svg", {
-        "aria-labelledby": c ? i : void 0,
+        "aria-labelledby": n ? l : void 0,
         className: _spinnerCssMisticaJs.spinnerDefault,
-        height: s,
-        style: _objectSpread({}, r),
+        height: a,
+        style: _objectSpread({}, m),
         role: "img",
         viewBox: "0 0 66 66",
-        width: s,
+        width: a,
         children: [
-            c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("title", {
-                id: i,
-                children: m
+            n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("title", {
+                id: l,
+                children: C
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("circle", {
                 className: _spinnerCssMisticaJs.spinnerDefaultPath,
@@ -148,13 +128,13 @@ const j = (param)=>{
                 fill: "none",
                 r: "30",
                 role: "presentation",
-                stroke: e,
+                stroke: t,
                 strokeWidth: "6"
             })
         ]
     });
-    return a === "0" || a === "0s" || a === "0ms" ? d : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_fadeInJs.default, {
-        delay: a,
+    return s === "0" || s === "0s" || s === "0ms" ? d : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_fadeInJs.default, {
+        delay: s,
         dataAttributes: {
             "component-name": "Spinner"
         },