@telefonica/mistica 12.9.1 → 12.10.0

package/dist/maybe-dismissable.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     default: function() {
-        return N;
+        return R;
     },
     useIsDismissable: function() {
-        return D;
+        return N;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
@@ -23,6 +23,7 @@ var _hooksJs = require("./hooks.js");
 var _iconButtonJs = /*#__PURE__*/ _interopRequireDefault(require("./icon-button.js"));
 var _themeVariantContextJs = require("./theme-variant-context.js");
 var _colorJs = require("./utils/color.js");
+var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -68,17 +69,17 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-var a = /*#__PURE__*/ _react.createContext(!1), D = function D() {
+var a = /*#__PURE__*/ _react.createContext(!1), N = function N() {
     return _react.useContext(a);
-}, C = (0, _jssJs.createUseStyles)(function(s) {
+}, g = (0, _jssJs.createUseStyles)(function() {
     return {
         dismissableContainer: {
             position: "relative",
             display: "flex",
             flexShrink: 0,
             width: function width(param) {
-                var t = param.width;
-                return t || "100%";
+                var s = param.width;
+                return s || "100%";
             }
         },
         dismissableButton: {
@@ -100,26 +101,26 @@ var a = /*#__PURE__*/ _react.createContext(!1), D = function D() {
             height: 24,
             margin: "0 0 8px 8px",
             borderRadius: "50%",
-            backgroundColor: (0, _colorJs.applyAlpha)(s.colors.background, 0.7)
+            backgroundColor: (0, _colorJs.applyAlpha)(_skinContractCssMisticaJs.vars.rawColors.background, 0.7)
         }
     };
-}), N = function N(param) {
-    var s = param.children, t = param.width, r = param.onClose, l = param["aria-label"];
-    var n = (0, _themeVariantContextJs.useIsInverseVariant)(), i = C({
-        isInverse: n,
-        width: t
-    }), ref = (0, _hooksJs.useTheme)(), m = ref.colors, c = ref.texts;
-    return r ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("section", {
-        className: i.dismissableContainer,
-        "aria-label": l,
+}), R = function R(param) {
+    var s = param.children, l = param.width, i = param.onClose, n = param["aria-label"];
+    var m = (0, _themeVariantContextJs.useIsInverseVariant)(), t = g({
+        isInverse: m,
+        width: l
+    }), ref = (0, _hooksJs.useTheme)(), c = ref.texts;
+    return i ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("section", {
+        className: t.dismissableContainer,
+        "aria-label": n,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(a.Provider, {
                 value: !0,
                 children: s
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
-                className: i.dismissableButton,
-                onPress: r,
+                className: t.dismissableButton,
+                onPress: i,
                 "aria-label": c.closeButtonLabel,
                 style: {
                     display: "flex",
@@ -127,9 +128,9 @@ var a = /*#__PURE__*/ _react.createContext(!1), D = function D() {
                     height: 48
                 },
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: i.dismissableCircleContainer,
+                    className: t.dismissableCircleContainer,
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCloseRegularJs.default, {
-                        color: m.neutralHigh
+                        color: _skinContractCssMisticaJs.vars.colors.neutralHigh
                     })
                 })
             })

package/dist/media-queries.css.d.ts

@@ -11,9 +11,9 @@ export declare const largeDesktop: string;
 export declare const tabletOrBigger: string;
 export declare const tabletOrSmaller: string;
 export declare const desktopOrBigger: string;
-export declare const supportsHover = "@media (pointer: fine), (pointer: none)";
+export declare const supportsHover = "(pointer: fine), (pointer: none)";
 /**
  * Scopes the styles to touchable devices.
  * See: https://stackoverflow.com/questions/12469875/how-to-code-css-media-queries-targeting-all-mobile-devices-and-tablets/42835826#42835826
  */
-export declare const touchableOnly = "@media (pointer: coarse), @media (hover: none)";
+export declare const touchableOnly = "(pointer: coarse), (hover: none)";

package/dist/media-queries.css.js.flow

@@ -13,9 +13,9 @@ declare export var largeDesktop: string;
 declare export var tabletOrBigger: string;
 declare export var tabletOrSmaller: string;
 declare export var desktopOrBigger: string;
-declare export var supportsHover: "@media (pointer: fine), (pointer: none)";
+declare export var supportsHover: "(pointer: fine), (pointer: none)";
 /**
  * Scopes the styles to touchable devices.
  * See: https://stackoverflow.com/questions/12469875/how-to-code-css-media-queries-targeting-all-mobile-devices-and-tablets/42835826#42835826
  */
-declare export var touchableOnly: "@media (pointer: coarse), @media (hover: none)";
+declare export var touchableOnly: "(pointer: coarse), (hover: none)";

package/dist/navigation-bar.d.ts

@@ -22,7 +22,7 @@ declare type MainNavigationBarSection = {
     title: string;
 };
 declare type MainNavigationBarProps = {
-    sections: Array<MainNavigationBarSection>;
+    sections: ReadonlyArray<MainNavigationBarSection>;
     selectedIndex?: number;
     right?: React.ReactElement;
     logo?: React.ReactElement;