@telefonica/mistica 12.9.1 → 12.10.0

package/dist/callout.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return E;
+        return K;
     }
 });
 var _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
@@ -13,74 +13,39 @@ var _inlineJs = /*#__PURE__*/ _interopRequireDefault(require("./inline.js"));
 var _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
 var _hooksJs = require("./hooks.js");
 var _themeVariantContextJs = require("./theme-variant-context.js");
-var _jssJs = require("./jss.js");
 var _textJs = require("./text.js");
 var _iconCloseRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular.js"));
 var _iconButtonJs = /*#__PURE__*/ _interopRequireDefault(require("./icon-button.js"));
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _buttonGroupJs = /*#__PURE__*/ _interopRequireDefault(require("./button-group.js"));
+var _calloutCssMisticaJs = require("./callout.css-mistica.js");
+var _sprinklesCssMisticaJs = require("./sprinkles.css-mistica.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 : {
         default: obj
     };
 }
-function _defineProperty(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-var b = (0, _jssJs.createUseStyles)(function(param) {
-    var r = param.colors;
-    return {
-        container: {
-            background: r.backgroundAlternative,
-            borderRadius: 8,
-            padding: 16,
-            overflow: "hidden",
-            display: "flex",
-            minHeight: 56,
-            "& > *": {
-                flexShrink: 0
-            }
-        },
-        icon: {
-            display: "flex",
-            marginRight: 16
-        },
-        content: {
-            alignSelf: "center",
-            flex: 1
-        },
-        overInverse: {
-            background: r.backgroundContainer
-        }
-    };
-}), E = function E(param) {
-    var r = param.title, p = param.description, l = param.icon, a = param.onClose, t = param.button, c = param.secondaryButton, o = param.buttonLink, s = param["aria-label"];
-    var f = o && !t, u = (0, _themeVariantContextJs.useIsInverseVariant)(), i = b({
-        needsButtonLinkAlignment: f
-    }), ref = (0, _hooksJs.useTheme)(), m = ref.colors, h = ref.texts;
+var K = function K(param) {
+    var t = param.title, f = param.description, n = param.icon, s = param.onClose, i = param.button, l = param.secondaryButton, a = param.buttonLink, o = param["aria-label"];
+    var u = (0, _themeVariantContextJs.useIsInverseVariant)(), ref = (0, _hooksJs.useTheme)(), m = ref.colors, h = ref.texts;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("section", {
-        className: (0, _classnames.default)(i.container, _defineProperty({}, i.overInverse, u)),
-        "aria-label": s != null ? s : r,
+        className: (0, _classnames.default)(_calloutCssMisticaJs.container, u ? (0, _sprinklesCssMisticaJs.sprinkles)({
+            backgroundColor: _skinContractCssMisticaJs.vars.colors.backgroundContainer
+        }) : (0, _sprinklesCssMisticaJs.sprinkles)({
+            backgroundColor: _skinContractCssMisticaJs.vars.colors.backgroundAlternative
+        })),
+        "aria-label": o != null ? o : t,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_themeVariantContextJs.ThemeVariant, {
             isInverse: !1,
             children: [
-                l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                     paddingRight: 16,
-                    children: l
+                    children: n
                 }),
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: i.content,
+                    className: _calloutCssMisticaJs.content,
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                         space: 16,
                         children: [
@@ -95,17 +60,17 @@ var b = (0, _jssJs.createUseStyles)(function(param) {
                                             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                                                 as: "h2",
                                                 regular: !0,
-                                                children: r
+                                                children: t
                                             }),
                                             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
                                                 as: "p",
                                                 regular: !0,
                                                 color: m.textSecondary,
-                                                children: p
+                                                children: f
                                             })
                                         ]
                                     }),
-                                    a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
+                                    s && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
                                         size: 40,
                                         style: {
                                             display: "flex",
@@ -113,7 +78,7 @@ var b = (0, _jssJs.createUseStyles)(function(param) {
                                             alignItems: "center",
                                             justifyContent: "center"
                                         },
-                                        onPress: a,
+                                        onPress: s,
                                         "aria-label": h.closeButtonLabel,
                                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCloseRegularJs.default, {
                                             size: 24,
@@ -122,10 +87,10 @@ var b = (0, _jssJs.createUseStyles)(function(param) {
                                     })
                                 ]
                             }),
-                            (t || c || o) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
-                                primaryButton: t,
-                                secondaryButton: c,
-                                link: o
+                            (i || l || a) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
+                                primaryButton: i,
+                                secondaryButton: l,
+                                link: a
                             })
                         ]
                     })

package/dist/card.css-mistica.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    actions: function() {
+        return _;
+    },
+    boxed: function() {
+        return f;
+    },
+    dataCard: function() {
+        return y;
+    },
+    mediaCard: function() {
+        return a;
+    },
+    mediaCardContent: function() {
+        return r;
+    },
+    snapCard: function() {
+        return e;
+    },
+    snapCardTouchableHover: function() {
+        return b;
+    },
+    snapCardTouchableHoverTransparent: function() {
+        return s;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./card.css.ts.vanilla.js");
+var _ = "_15e54s91 _1y2v1nf7b _1y2v1nf7w _1y2v1nf7r", f = "_1y2v1nf7b _1y2v1nf9h _1y2v1nf9x", y = "_15e54s97 _1y2v1nf8u _1y2v1nf98 _1y2v1nf83 _1y2v1nf8h _1y2v1nf7b _1y2v1nf7w _1y2v1nf7h", a = "_1y2v1nf7b _1y2v1nf7h _1y2v1nf9x _1y2v1nf9h", r = "_15e54s95 _1y2v1nf8u _1y2v1nf98 _1y2v1nf7b _1y2v1nf7w _1y2v1nf82 _1y2v1nf8h _1y2v1nf7h", e = "_15e54s99 _1y2v1nf82 _1y2v1nf8g _1y2v1nf8u _1y2v1nf98 _1y2v1nf7b _1y2v1nf9x _1y2v1nf7h _1y2v1nf7n _1y2v1nf7w", b = "_15e54s9b _1y2v1nf7b _1y2v1nf9x", s = "_15e54s9c _1y2v1nf7b _1y2v1nf9x";

package/dist/card.css.d.ts

@@ -0,0 +1,8 @@
+export declare const actions: string;
+export declare const boxed: string;
+export declare const mediaCard: string;
+export declare const mediaCardContent: string;
+export declare const dataCard: string;
+export declare const snapCard: string;
+export declare const snapCardTouchableHover: string;
+export declare const snapCardTouchableHoverTransparent: string;

package/dist/card.css.js.flow

@@ -0,0 +1,10 @@
+// @flow
+
+declare export var actions: string;
+declare export var boxed: string;
+declare export var mediaCard: string;
+declare export var mediaCardContent: string;
+declare export var dataCard: string;
+declare export var snapCard: string;
+declare export var snapCardTouchableHover: string;
+declare export var snapCardTouchableHoverTransparent: string;

package/dist/card.css.ts.vanilla.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return a;
+    }
+});
+var a = "";