@telefonica/mistica 12.11.1 → 12.12.0

package/dist/radio-button.js

@@ -10,17 +10,16 @@ function _export(target, all) {
 }
 _export(exports, {
     RadioGroup: function() {
-        return te;
+        return le;
     },
     default: function() {
-        return ee;
+        return oe;
     },
     useRadioContext: function() {
-        return H;
+        return J;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-var _jssJs = require("./jss.js");
 var _keyCodesJs = require("./utils/key-codes.js");
 var _formContextJs = require("./form-context.js");
 var _commonJs = require("./utils/common.js");
@@ -29,6 +28,7 @@ var _inlineJs = /*#__PURE__*/ _interopRequireDefault(require("./inline.js"));
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _hooksJs = require("./hooks.js");
 var _domJs = require("./utils/dom.js");
+var _radioButtonCssMisticaJs = require("./radio-button.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -203,108 +203,63 @@ 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);
 }
-var U = (0, _jssJs.createUseStyles)(function(param) {
-    var e = param.colors, a = param.isIos;
-    return {
-        outerCircle: {
-            cursor: "pointer",
-            flexShrink: 0,
-            width: 20,
-            height: 20,
-            borderRadius: "50%",
-            display: "inline-flex",
-            alignItems: "center",
-            justifyContent: "center",
-            verticalAlign: "middle",
-            boxShadow: "inset 0 0 0 ".concat(a ? 1 : 2, "px ").concat(e.control),
-            background: e.background,
-            transition: "background 0.3s, box-shadow 0.3s"
-        },
-        outerCircleChecked: {
-            boxShadow: "inset 0 0 0 ".concat(a ? 5 : 2, "px ").concat(e.controlActivated),
-            background: a ? "radial-gradient(circle, ".concat(e.iosControlKnob, " 0%, ").concat(e.iosControlKnob, " 64%, transparent 64%, transparent 100%)") : e.background
-        },
-        innerCircle: {
-            display: "flex",
-            borderRadius: "50%",
-            transition: "transform 0.2s, opacity 0.2s",
-            opacity: 0,
-            width: 10,
-            height: 10,
-            transform: "scale(0)"
-        },
-        innerCircleChecked: {
-            background: e.controlActivated,
-            opacity: 1,
-            transform: "scale(1)"
-        },
-        radioButton: {
-            cursor: "default"
-        },
-        disabled: {
-            opacity: 0.5,
-            cursor: "default"
-        }
-    };
-}), w = /*#__PURE__*/ _react.createContext({
+var q = /*#__PURE__*/ _react.createContext({
     disabled: !1,
     selectedValue: null,
     focusableValue: null,
     select: function select() {},
     selectNext: function selectNext() {},
     selectPrev: function selectPrev() {}
-}), H = function H() {
-    return _react.useContext(w);
-}, ee = function ee(_param) {
-    var e = _param.value, a = _param.id, x = _param.dataAttributes, y = _param["aria-labelledby"], u = _objectWithoutProperties(_param, [
+}), J = function J() {
+    return _react.useContext(q);
+}, oe = function oe(_param) {
+    var t = _param.value, o = _param.id, R = _param.dataAttributes, g = _param["aria-labelledby"], d = _objectWithoutProperties(_param, [
         "value",
         "id",
         "dataAttributes",
         "aria-labelledby"
     ]);
     var _obj;
-    var ref = H(), n = ref.disabled, k = ref.selectedValue, c = ref.focusableValue, f = ref.select, h = ref.selectNext, R = ref.selectPrev, b = (0, _hooksJs.useAriaId)(y), o = _react.useRef(null), d = e === k, v = c === e ? 0 : -1, l = U({
-        checked: d
-    }), ref1 = (0, _hooksJs.useTheme)(), C = ref1.isIos, g = function g(t) {
-        switch(t.keyCode){
+    var ref = J(), l = ref.disabled, y = ref.selectedValue, i = ref.focusableValue, u = ref.select, f = ref.selectNext, v = ref.selectPrev, m = (0, _hooksJs.useAriaId)(g), r = _react.useRef(null), c = t === y, V = i === t ? 0 : -1, ref1 = (0, _hooksJs.useTheme)(), h = ref1.isIos, p = function p(e) {
+        switch(e.keyCode){
             case _keyCodesJs.SPACE:
-                f(e), t.preventDefault(), t.stopPropagation();
+                u(t), e.preventDefault(), e.stopPropagation();
                 break;
             case _keyCodesJs.RIGHT:
             case _keyCodesJs.DOWN:
-                h(), t.preventDefault(), t.stopPropagation();
+                f(), e.preventDefault(), e.stopPropagation();
                 break;
             case _keyCodesJs.LEFT:
             case _keyCodesJs.UP:
-                R(), t.preventDefault(), t.stopPropagation();
+                v(), e.preventDefault(), e.stopPropagation();
                 break;
         }
-    }, r = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        className: (0, _classnames.default)(l.outerCircle, (_obj = {}, _defineProperty(_obj, l.outerCircleChecked, d), _defineProperty(_obj, l.disabled, n), _obj)),
-        children: !C && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-            className: (0, _classnames.default)(l.innerCircle, _defineProperty({}, l.innerCircleChecked, d))
+    }, b = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+        className: (0, _classnames.default)(h ? _radioButtonCssMisticaJs.outerCircleVariants.ios : _radioButtonCssMisticaJs.outerCircleVariants.default, (_obj = {}, _defineProperty(_obj, _radioButtonCssMisticaJs.outerCircleCheckedVariants[h ? "ios" : "default"], c), _defineProperty(_obj, _radioButtonCssMisticaJs.disabled, l), _obj)),
+        children: !h && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            className: (0, _classnames.default)(_radioButtonCssMisticaJs.innerCircle, _defineProperty({}, _radioButtonCssMisticaJs.innerCircleChecked, c))
         })
     });
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("span", _objectSpreadProps(_objectSpread({
-        ref: o,
-        id: a,
-        tabIndex: n ? void 0 : v,
+        ref: r,
+        id: o,
+        tabIndex: l ? void 0 : V,
         role: "radio",
-        "data-value": e,
-        "aria-checked": d,
-        "aria-disabled": n,
-        "aria-labelledby": b,
-        onClick: n ? void 0 : function() {
-            return f(e);
+        "data-value": t,
+        "aria-checked": c,
+        "aria-disabled": l,
+        "aria-labelledby": m,
+        onClick: l ? void 0 : function() {
+            return u(t);
         },
-        onKeyDown: n ? void 0 : g,
-        className: l.radioButton
-    }, (0, _domJs.getPrefixedDataAttributes)(x)), {
-        children: u.render ? u.render({
-            controlElement: r,
-            disabled: !!n,
-            checked: d,
-            labelId: b
+        onKeyDown: l ? void 0 : p,
+        className: _radioButtonCssMisticaJs.radioButton
+    }, (0, _domJs.getPrefixedDataAttributes)(R, "RadioButton")), {
+        children: d.render ? d.render({
+            controlElement: b,
+            disabled: !!l,
+            checked: c,
+            labelId: m
         }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_inlineJs.default, {
             space: 16,
             children: [
@@ -316,74 +271,75 @@ var U = (0, _jssJs.createUseStyles)(function(param) {
                             position: "relative",
                             top: -2
                         },
-                        children: r
+                        children: b
                     })
                 }),
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                     regular: !0,
                     as: "div",
-                    id: b,
+                    id: m,
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("span", {
-                        className: n ? l.disabled : "",
-                        children: u.children
+                        className: l ? _radioButtonCssMisticaJs.disabled : "",
+                        children: d.children
                     })
                 })
             ]
         })
     }));
-}, te = function te(e) {
-    var C, g;
+}, le = function le(t) {
+    var p, b;
     var ref = (0, _formContextJs.useControlProps)({
-        name: e.name,
-        value: e.value,
-        defaultValue: e.defaultValue,
-        onChange: e.onChange,
-        disabled: e.disabled
-    }), a = ref.value, x = ref.defaultValue, y = ref.onChange, u = ref.focusableRef, n = ref.disabled, k = (typeof a === "undefined" ? "undefined" : _typeof(a)) < "u", ref1 = _slicedToArray(_react.useState((C = a != null ? a : x) != null ? C : ""), 2), c = ref1[0], f = ref1[1];
+        name: t.name,
+        value: t.value,
+        defaultValue: t.defaultValue,
+        onChange: t.onChange,
+        disabled: t.disabled
+    }), o = ref.value, R = ref.defaultValue, g = ref.onChange, d = ref.focusableRef, l = ref.disabled, y = (typeof o === "undefined" ? "undefined" : _typeof(o)) < "u", ref1 = _slicedToArray(_react.useState((p = o != null ? o : R) != null ? p : ""), 2), i = ref1[0], u = ref1[1];
     _react.useEffect(function() {
-        a !== void 0 && f(a);
+        o !== void 0 && u(o);
     }, [
-        a
+        o
     ]);
-    var h = function h(r) {
-        k || f(r), y(r);
-    }, ref2 = _slicedToArray(_react.useState(null), 2), R = ref2[0], b = ref2[1], o = _react.useRef(null), d = function d() {
-        if (o.current) {
-            var r = o.current.querySelector("[role=radio][aria-checked=true]"), t = Array.from(o.current.querySelectorAll("[role=radio]"));
-            if (t.length === 0) return;
-            var S = ((r ? t.indexOf(r) : 0) + 1) % t.length, m = t[S], p = m.dataset.value;
-            p && (m.focus(), h(p));
+    var f = function f(e) {
+        y || u(e), g(e);
+    }, ref2 = _slicedToArray(_react.useState(null), 2), v = ref2[0], m = ref2[1], r = _react.useRef(null), c = function c() {
+        if (r.current) {
+            var e = r.current.querySelector("[role=radio][aria-checked=true]"), a = Array.from(r.current.querySelectorAll("[role=radio]"));
+            if (a.length === 0) return;
+            var k = ((e ? a.indexOf(e) : 0) + 1) % a.length, x = a[k], C = x.dataset.value;
+            C && (x.focus(), f(C));
         }
-    }, v = function v() {
-        if (o.current) {
-            var r = o.current.querySelector("[role=radio][aria-checked=true]"), t = Array.from(o.current.querySelectorAll("[role=radio]"));
-            if (t.length === 0) return;
-            var P = r ? t.indexOf(r) : 0, S = (t.length + P - 1) % t.length, m = t[S], p = m.dataset.value;
-            p && (m.focus(), h(p));
+    }, V = function V() {
+        if (r.current) {
+            var e = r.current.querySelector("[role=radio][aria-checked=true]"), a = Array.from(r.current.querySelectorAll("[role=radio]"));
+            if (a.length === 0) return;
+            var P = e ? a.indexOf(e) : 0, k = (a.length + P - 1) % a.length, x = a[k], C = x.dataset.value;
+            C && (x.focus(), f(C));
         }
     };
     _react.useEffect(function() {
-        var r;
-        if (o.current) {
-            var t = o.current.querySelector("[role=radio]");
-            t && b((r = t.dataset.value) != null ? r : null);
+        var e;
+        if (r.current) {
+            var a = r.current.querySelector("[role=radio]");
+            a && m((e = a.dataset.value) != null ? e : null);
         }
     }, []);
-    var l = (g = c != null ? c : R) != null ? g : null;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        ref: (0, _commonJs.combineRefs)(o, u),
+    var h = (b = i != null ? i : v) != null ? b : null;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({
+        ref: (0, _commonJs.combineRefs)(r, d),
         role: "radiogroup",
-        "aria-labelledby": e["aria-labelledby"],
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(w.Provider, {
+        "aria-labelledby": t["aria-labelledby"]
+    }, (0, _domJs.getPrefixedDataAttributes)(t.dataAttributes, "RadioGroup")), {
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(q.Provider, {
             value: {
-                disabled: n,
-                selectedValue: c != null ? c : x,
-                focusableValue: l,
-                select: h,
-                selectNext: d,
-                selectPrev: v
+                disabled: l,
+                selectedValue: i != null ? i : R,
+                focusableValue: h,
+                select: f,
+                selectNext: c,
+                selectPrev: V
             },
-            children: e.children
+            children: t.children
         })
-    });
+    }));
 };

package/dist/radio-button.js.flow

@@ -39,6 +39,7 @@ declare type RadioGroupProps = {
   value?: string,
   defaultValue?: string,
   onChange?: (value: string) => void,
+  dataAttributes?: DataAttributes,
 };
 declare export var RadioGroup: React.ComponentType<RadioGroupProps>;
 declare export default typeof RadioButton;

package/dist/responsive-layout.css-mistica.js

@@ -10,15 +10,18 @@ function _export(target, all) {
 }
 _export(exports, {
     container: function() {
-        return i;
+        return v;
     },
     fullWidth: function() {
-        return t;
+        return n;
+    },
+    inverseBackground: function() {
+        return a;
     },
     responsiveLayout: function() {
-        return v;
+        return e;
     }
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./responsive-layout.css.ts.vanilla.js");
-var i = "_1y2v1nf9i", t = "_17lofg74 _1y2v1nf9i", v = "_17lofg72";
+var v = "_1y2v1nf75", n = "_17lofg75 _1y2v1nf75", a = "_1y2v1nf2h", e = "_17lofg73";

package/dist/responsive-layout.css.d.ts

@@ -2,5 +2,6 @@ export declare const vars: {
     sideMargin: import("@vanilla-extract/private").CSSVarFunction;
 };
 export declare const container: string;
+export declare const inverseBackground: string;
 export declare const responsiveLayout: string;
 export declare const fullWidth: string;

package/dist/responsive-layout.css.js.flow

@@ -7,5 +7,6 @@ declare export var vars: {
   >,
 };
 declare export var container: string;
+declare export var inverseBackground: string;
 declare export var responsiveLayout: string;
 declare export var fullWidth: string;

package/dist/responsive-layout.d.ts

@@ -4,6 +4,8 @@ declare type Props = {
     children: React.ReactNode;
     fullWidth?: boolean;
     className?: string;
+    isInverse?: boolean;
+    backgroundColor?: string;
     dataAttributes?: DataAttributes;
 };
 declare const ResponsiveLayout: React.FC<Props>;

package/dist/responsive-layout.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return c;
+        return N;
     }
 });
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _domJs = require("./utils/dom.js");
 var _responsiveLayoutCssMisticaJs = require("./responsive-layout.css-mistica.js");
+var _themeVariantContextJs = require("./theme-variant-context.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -69,14 +70,21 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-var c = function c(param) {
-    var e = param.children, r = param.className, o = param.fullWidth, s = param.dataAttributes;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({
-        className: (0, _classnames.default)(_responsiveLayoutCssMisticaJs.container, r)
-    }, (0, _domJs.getPrefixedDataAttributes)(s)), {
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-            className: o ? _responsiveLayoutCssMisticaJs.fullWidth : _responsiveLayoutCssMisticaJs.responsiveLayout,
-            children: e
-        })
-    }));
+var N = function N(param) {
+    var i = param.children, tmp = param.isInverse, t = tmp === void 0 ? !1 : tmp, e = param.backgroundColor, r = param.className, a = param.fullWidth, n = param.dataAttributes;
+    var o = (0, _themeVariantContextJs.useIsInverseVariant)();
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
+        isInverse: t || o,
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({
+            className: (0, _classnames.default)(_responsiveLayoutCssMisticaJs.container, r, _defineProperty({}, _responsiveLayoutCssMisticaJs.inverseBackground, t && !e)),
+            style: e ? {
+                background: e
+            } : void 0
+        }, (0, _domJs.getPrefixedDataAttributes)(n)), {
+            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: a ? _responsiveLayoutCssMisticaJs.fullWidth : _responsiveLayoutCssMisticaJs.responsiveLayout,
+                children: i
+            })
+        }))
+    });
 };

package/dist/responsive-layout.js.flow

@@ -6,6 +6,8 @@ declare type Props = {
   children: React.Node,
   fullWidth?: boolean,
   className?: string,
+  isInverse?: boolean,
+  backgroundColor?: string,
   dataAttributes?: DataAttributes,
 };
 declare var ResponsiveLayout: React.ComponentType<Props>;

package/dist/screen-reader-only.css-mistica.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "screenReaderOnly", {
     enumerable: true,
     get: function() {
-        return v;
+        return y;
     }
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./screen-reader-only.css.ts.vanilla.js");
-var v = "gwdgwo1 _1y2v1nf7y _1y2v1nf8c _1y2v1nf8q _1y2v1nf94 _1y2v1nf77 _1y2v1nfbh _1y2v1nfb9";
+var y = "gwdgwo1 _1y2v1nf5l _1y2v1nf5z _1y2v1nf6d _1y2v1nf6r _1y2v1nf4u _1y2v1nf94 _1y2v1nf8w";

package/dist/select.css-mistica.js

@@ -0,0 +1,60 @@
+"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, {
+    arrowDown: function() {
+        return n;
+    },
+    menuItem: function() {
+        return i;
+    },
+    menuItemSelected: function() {
+        return f;
+    },
+    optionsAnimationsVariants: function() {
+        return y;
+    },
+    optionsContainer: function() {
+        return s;
+    },
+    selectContainerVariants: function() {
+        return a;
+    },
+    selectTextVariants: function() {
+        return t;
+    },
+    selectVariants: function() {
+        return r;
+    },
+    vars: function() {
+        return p;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./select.css.ts.vanilla.js");
+var n = "_1sqpivvo _1y2v1nf4u _1y2v1nfa3", i = "_1sqpivvq _1y2v1nf6i _1y2v1nf6w _1y2v1nf5o _1y2v1nf62 _1y2v1nf1i _1y2v1nf4y _1y2v1nf5d _1y2v1nf93 _1y2v1nf7v", f = "_1y2v1nf2l", y = {
+    show: "_1sqpivv7",
+    hide: "_1sqpivv8"
+}, s = "_1sqpivv6 _1y2v1nf5l _1y2v1nf5z _1y2v1nf6d _1y2v1nf6r _1y2v1nf4u _1y2v1nf90 _1y2v1nf2g", a = {
+    default: "_1sqpivvd _1sqpivvc _1y2v1nf4t",
+    fullWidth: "_1sqpivve _1sqpivvc _1y2v1nf4t"
+}, t = {
+    default: "_1sqpivvl _1sqpivvk _1y2v1nf4u _1y2v1nf94 _1y2v1nf8t _1y2v1nf1i",
+    disabled: "_1sqpivvm _1sqpivvk _1y2v1nf4u _1y2v1nf94 _1y2v1nf8t _1y2v1nf1i"
+}, r = {
+    default: "_1sqpivvh _1sqpivvg _1y2v1nf8w _1y2v1nf1i _1y2v1nf4s _1y2v1nf75 _1y2v1nf7l",
+    disabled: "_1sqpivvi _1sqpivvg _1y2v1nf8w _1y2v1nf1i _1y2v1nf4s _1y2v1nf75 _1y2v1nf7l"
+}, p = {
+    top: "var(--_1sqpivv0)",
+    left: "var(--_1sqpivv1)",
+    transformOrigin: "var(--_1sqpivv2)",
+    minWidth: "var(--_1sqpivv3)",
+    maxHeight: "var(--_1sqpivv4)"
+};

package/dist/select.css.d.ts

@@ -0,0 +1,16 @@
+export declare const vars: {
+    top: import("@vanilla-extract/private").CSSVarFunction;
+    left: import("@vanilla-extract/private").CSSVarFunction;
+    transformOrigin: import("@vanilla-extract/private").CSSVarFunction;
+    minWidth: import("@vanilla-extract/private").CSSVarFunction;
+    maxHeight: import("@vanilla-extract/private").CSSVarFunction;
+};
+export declare const optionsContainer: string;
+export declare const optionsAnimationsVariants: Record<"hide" | "show", string>;
+export declare const actions: string;
+export declare const selectContainerVariants: Record<"default" | "fullWidth", string>;
+export declare const selectVariants: Record<"default" | "disabled", string>;
+export declare const selectTextVariants: Record<"default" | "disabled", string>;
+export declare const arrowDown: string;
+export declare const menuItem: string;
+export declare const menuItemSelected: string;

package/dist/select.css.js.flow

@@ -0,0 +1,30 @@
+// @flow
+
+declare export var vars: {
+  top: $PropertyType<$Exports<"@vanilla-extract/private">, "CSSVarFunction">,
+  left: $PropertyType<$Exports<"@vanilla-extract/private">, "CSSVarFunction">,
+  transformOrigin: $PropertyType<
+    $Exports<"@vanilla-extract/private">,
+    "CSSVarFunction"
+  >,
+  minWidth: $PropertyType<
+    $Exports<"@vanilla-extract/private">,
+    "CSSVarFunction"
+  >,
+  maxHeight: $PropertyType<
+    $Exports<"@vanilla-extract/private">,
+    "CSSVarFunction"
+  >,
+};
+declare export var optionsContainer: string;
+declare export var optionsAnimationsVariants: { hide: string, show: string };
+declare export var actions: string;
+declare export var selectContainerVariants: {
+  default: string,
+  fullWidth: string,
+};
+declare export var selectVariants: { default: string, disabled: string };
+declare export var selectTextVariants: { default: string, disabled: string };
+declare export var arrowDown: string;
+declare export var menuItem: string;
+declare export var menuItemSelected: string;

package/dist/select.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 s;
+    }
+});
+var s = "";