@telefonica/mistica 14.45.0 → 14.46.0

package/dist/password-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return C;
+        return D;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -16,7 +16,6 @@ const _textfieldbase = require("./text-field-base.js");
 const _hooks = require("./hooks.js");
 const _iconeyeoffregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-eye-off-regular.js"));
 const _iconeyeregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-eye-regular.js"));
-const _textfieldbasecssmistica = require("./text-field-base.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -142,19 +141,25 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const B = (param)=>{
-    let { isVisible: e, setVisibility: n, focus: i } = param;
-    const { texts: c } = (0, _hooks.useTheme)();
+const j = (param)=>{
+    let { isVisible: n, setVisibility: i, focus: c } = param;
+    const { texts: t } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.FieldEndIcon, {
-        Icon: e ? _iconeyeoffregular.default : _iconeyeregular.default,
-        "aria-label": c.togglePasswordVisibilityLabel,
-        className: _textfieldbasecssmistica.endIconWithShadow,
-        onPress: ()=>{
-            n(!e), i();
+        checkedProps: {
+            Icon: _iconeyeoffregular.default,
+            "aria-label": t.disablePasswordVisibility
+        },
+        uncheckedProps: {
+            Icon: _iconeyeregular.default,
+            "aria-label": t.enablePasswordVisibility
+        },
+        checked: n,
+        onChange: (a)=>{
+            i(a), c();
         }
     });
-}, L = (_param)=>{
-    var { disabled: e, error: n, helperText: i, name: c, optional: f, validate: m, onChange: d, onChangeValue: p, onBlur: P, value: R, autoComplete: w = "current-password", defaultValue: F, dataAttributes: I } = _param, b = _object_without_properties(_param, [
+}, q = (_param)=>{
+    var { disabled: n, error: i, helperText: c, name: t, optional: a, validate: f, onChange: m, onChangeValue: p, onBlur: P, value: b, autoComplete: R = "current-password", defaultValue: w, dataAttributes: F } = _param, I = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -169,52 +174,52 @@ const B = (param)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const [a, g] = _react.useState(!1), s = _react.useRef(0), o = _react.useRef(null), x = (t)=>t, y = ()=>{
-        const t = o.current;
-        t && (t.selectionStart !== null && (s.current = t.selectionStart), t.focus());
+    const [u, y] = _react.useState(!1), s = _react.useRef(0), o = _react.useRef(null), V = (e)=>e, g = ()=>{
+        const e = o.current;
+        e && (e.selectionStart !== null && (s.current = e.selectionStart), e.focus());
     };
     _react.useEffect(()=>{
-        const t = o.current;
-        if (t) {
-            const A = requestAnimationFrame(()=>{
-                t.selectionStart = s.current, t.selectionEnd = s.current;
+        const e = o.current;
+        if (e) {
+            const h = requestAnimationFrame(()=>{
+                e.selectionStart = s.current, e.selectionEnd = s.current;
             });
             return ()=>{
-                cancelAnimationFrame(A);
+                cancelAnimationFrame(h);
             };
         }
     }, [
-        a,
+        u,
         s,
         o
     ]);
-    const l = (0, _formcontext.useFieldProps)({
-        name: c,
-        value: R,
-        defaultValue: F,
-        processValue: x,
-        helperText: i,
-        optional: f,
-        error: n,
-        disabled: e,
+    const d = (0, _formcontext.useFieldProps)({
+        name: t,
+        value: b,
+        defaultValue: w,
+        processValue: V,
+        helperText: c,
+        optional: a,
+        error: i,
+        disabled: n,
         onBlur: P,
-        validate: m,
-        onChange: d,
+        validate: f,
+        onChange: m,
         onChangeValue: p
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, b, l), {
-        type: a ? "text" : "password",
-        inputRef: (t)=>{
-            l.inputRef(t), o.current = t;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, I, d), {
+        type: u ? "text" : "password",
+        inputRef: (e)=>{
+            d.inputRef(e), o.current = e;
         },
-        autoComplete: w,
-        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {
-            focus: y,
-            isVisible: a,
-            setVisibility: g
+        autoComplete: R,
+        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(j, {
+            focus: g,
+            isVisible: u,
+            setVisibility: y
         }),
         dataAttributes: _object_spread({
             "component-name": "PasswordField"
-        }, I)
+        }, F)
     }));
-}, C = L;
+}, D = q;

package/dist/pin-field.css-mistica.js

@@ -10,34 +10,35 @@ function _export(target, all) {
 }
 _export(exports, {
     disabled: function() {
-        return r;
+        return f;
     },
     field: function() {
-        return f;
+        return i;
     },
     fieldContainer: function() {
-        return y;
+        return p;
     },
     focusedField: function() {
-        return i;
+        return y;
     },
     input: function() {
-        return p;
+        return o;
     },
     passwordDot: function() {
-        return o;
+        return a;
     },
     passwordInput: function() {
-        return a;
+        return c;
     },
     pinInputLineHeight: function() {
-        return c;
+        return e;
     },
     readOnlyField: function() {
-        return e;
+        return t;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
+require("./icon-button.css.ts.vanilla.css-mistica.js");
 require("./text-field-base.css.ts.vanilla.css-mistica.js");
 require("./pin-field.css.ts.vanilla.css-mistica.js");
-var r = "_3pc6ro1", f = "_3pc6ro3 _1y2v1nfjj _1y2v1nfiz _1y2v1nfgi _1y2v1nfj8 _1y2v1nfgc _1y2v1nf37", y = "_3pc6ro0", i = "_3pc6ro4 _3pc6ro3 _1y2v1nfjj _1y2v1nfiz _1y2v1nfgi _1y2v1nfj8 _1y2v1nfgc _1y2v1nf37", p = "_3pc6ro6", o = "_3pc6ro9", a = "_1y2v1nf33", c = "1.000rem", e = "_3pc6ro5 _3pc6ro3 _1y2v1nfjj _1y2v1nfiz _1y2v1nfgi _1y2v1nfj8 _1y2v1nfgc _1y2v1nf37";
+var f = "_3pc6ro1", i = "_3pc6ro3 _1y2v1nfjj _1y2v1nfiz _1y2v1nfgi _1y2v1nfj8 _1y2v1nfgc _1y2v1nf37", p = "_3pc6ro0", y = "_3pc6ro4 _3pc6ro3 _1y2v1nfjj _1y2v1nfiz _1y2v1nfgi _1y2v1nfj8 _1y2v1nfgc _1y2v1nf37", o = "_3pc6ro6", a = "_3pc6ro9", c = "_1y2v1nf33", e = "1.000rem", t = "_3pc6ro5 _3pc6ro3 _1y2v1nfjj _1y2v1nfiz _1y2v1nfgi _1y2v1nfj8 _1y2v1nfgc _1y2v1nf37";

package/dist/pin-field.js

@@ -171,7 +171,7 @@ const x = (param)=>{
         l,
         d
     ]);
-    const H = (s)=>(e)=>{
+    const D = (s)=>(e)=>{
             var k;
             const r = e.target.value;
             if (r === "") return;
@@ -226,7 +226,7 @@ const x = (param)=>{
                         readOnly: y,
                         autoComplete: d ? "one-time-code" : void 0,
                         value: (_t_e = t[e]) !== null && _t_e !== void 0 ? _t_e : "",
-                        onChange: H(e),
+                        onChange: D(e),
                         onKeyDown: (r)=>{
                             switch(r.key){
                                 case "Backspace":

package/dist/popover.js

@@ -17,6 +17,7 @@ const _text = require("./text.js");
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _popovercssmistica = require("./popover.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _iconbuttoncssmistica = require("./icon-button.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -78,7 +79,7 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const T = (_param)=>{
-    var { open: m, isVisible: c, extra: l, children: p, onClose: i = ()=>{}, dataAttributes: s, trackingEvent: f, title: o, description: e, asset: n } = _param, d = _object_without_properties(_param, [
+    var { open: a, isVisible: m, extra: c, children: i, onClose: l = ()=>{}, dataAttributes: p, trackingEvent: s, title: o, description: e, asset: n } = _param, f = _object_without_properties(_param, [
         "open",
         "isVisible",
         "extra",
@@ -94,8 +95,10 @@ const T = (_param)=>{
         content: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, {
             className: _popovercssmistica.content,
             children: [
-                (o || e || n) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                    paddingRight: 16,
+                (o || e || n) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    style: {
+                        paddingRight: `calc((${_iconbuttoncssmistica.iconContainerSize.small} - 8px)`
+                    },
                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
                         space: 16,
                         children: [
@@ -117,17 +120,17 @@ const T = (_param)=>{
                         ]
                     })
                 }),
-                l !== null && l !== void 0 ? l : p
+                c !== null && c !== void 0 ? c : i
             ]
         }),
         centerContent: !1,
-        open: m !== null && m !== void 0 ? m : c,
+        open: a !== null && a !== void 0 ? a : m,
         hasPointerInteractionOnly: !0,
         delay: !1,
-        onClose: i,
-        trackingEvent: f,
+        onClose: l,
+        trackingEvent: s,
         dataAttributes: _object_spread({
             "component-name": "Popover"
-        }, s)
-    }, d));
+        }, p)
+    }, f));
 }, N = T;

package/dist/progress-bar.js

@@ -144,16 +144,16 @@ const E = (param)=>{
     }));
 }, R = (param)=>{
     let { steps: r, currentStep: o = 0, color: d, dataAttributes: l, "aria-label": i, "aria-labelledby": n } = param;
-    const { texts: c } = (0, _hooks.useTheme)(), [a, p] = _react.useState(Math.ceil(o)), [s, y] = _react.useState(!1);
+    const { texts: c } = (0, _hooks.useTheme)(), [a, p] = _react.useState(Math.ceil(o)), [s, k] = _react.useState(!1);
     _react.useEffect(()=>{
         const e = Math.ceil(o);
-        a !== e && (y(e < a), p(e));
+        a !== e && (k(e < a), p(e));
     }, [
         o,
         r,
         a
     ]);
-    const A = n ? void 0 : (()=>{
+    const y = n ? void 0 : (()=>{
         const e = c.progressBarStepLabel.replace("1$s", String(a)).replace("2$s", String(r));
         return i ? `${i}, ${e.toLowerCase()}` : e;
     })();
@@ -162,7 +162,7 @@ const E = (param)=>{
         "aria-valuenow": a,
         "aria-valuemin": 0,
         "aria-valuemax": r,
-        "aria-label": A,
+        "aria-label": y,
         "aria-labelledby": n,
         className: _progressbarcssmistica.progressBarSteppedContainer,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {

package/dist/radio-button.js

@@ -156,14 +156,14 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const N = /*#__PURE__*/ _react.createContext({
+const D = /*#__PURE__*/ _react.createContext({
     disabled: !1,
     selectedValue: null,
     focusableValue: null,
     select: ()=>{},
     selectNext: ()=>{},
     selectPrev: ()=>{}
-}), z = ()=>_react.useContext(N), J = (_param)=>{
+}), z = ()=>_react.useContext(D), J = (_param)=>{
     var { value: e, id: s, dataAttributes: C, "aria-labelledby": R } = _param, d = _object_without_properties(_param, [
         "value",
         "id",
@@ -286,7 +286,7 @@ const N = /*#__PURE__*/ _react.createContext({
         role: "radiogroup",
         "aria-labelledby": e["aria-labelledby"]
     }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "RadioGroup")), {
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(N.Provider, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(D.Provider, {
             value: {
                 disabled: l,
                 selectedValue: p !== null && p !== void 0 ? p : C,

package/dist/responsive-layout.js

@@ -107,8 +107,8 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const b = (param)=>{
-    let { children: n, isInverse: o = !1, variant: r, backgroundColor: s, className: p, fullWidth: e, dataAttributes: u, shouldExpandWhenNested: i = !1 } = param;
-    const d = (0, _themevariantcontext.useThemeVariant)(), t = r || o && "inverse" || void 0;
+    let { children: o, isInverse: n = !1, variant: r, backgroundColor: s, className: p, fullWidth: e, dataAttributes: u, shouldExpandWhenNested: i = !1 } = param;
+    const d = (0, _themevariantcontext.useThemeVariant)(), t = r || n && "inverse" || void 0;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
         variant: t !== null && t !== void 0 ? t : d,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
@@ -122,16 +122,16 @@ const b = (param)=>{
         }, (0, _dom.getPrefixedDataAttributes)(u)), {
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: e ? _responsivelayoutcssmistica.fullWidth : _responsivelayoutcssmistica.responsiveLayout,
-                children: n
+                children: o
             })
         }))
     });
 }, C = (_param)=>{
-    var { children: n } = _param, o = _object_without_properties(_param, [
+    var { children: o } = _param, n = _object_without_properties(_param, [
         "children"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread_props(_object_spread({}, o), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread_props(_object_spread({}, n), {
         shouldExpandWhenNested: !0,
-        children: n
+        children: o
     }));
 }, j = C;

package/dist/search-field.js

@@ -18,7 +18,7 @@ const _iconcloseregular = /*#__PURE__*/ _interop_require_default(require("./gene
 const _hooks = require("./hooks.js");
 const _dom = require("./utils/dom.js");
 const _common = require("./utils/common.js");
-const _textfieldbasecssmistica = require("./text-field-base.css-mistica.js");
+const _iconbuttoncssmistica = require("./icon-button.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -144,8 +144,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const q = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
-    var { disabled: f, error: d, helperText: u, name: n, optional: p, validate: S, onChange: e, onChangeValue: t, onBlur: I, value: l, defaultValue: R, dataAttributes: F } = _param, b = _object_without_properties(_param, [
+const D = /*#__PURE__*/ _react.forwardRef((_param, x)=>{
+    var { disabled: m, error: u, helperText: d, name: p, optional: n, validate: S, onChange: e, onChangeValue: t, onBlur: I, value: l, defaultValue: R, dataAttributes: F } = _param, b = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -159,7 +159,7 @@ const q = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const x = (0, _hooks.useTheme)(), o = _react.useRef(), [P, v] = _react.useState(R || ""), c = typeof l < "u", m = c ? l : P, i = _react.useCallback((s, z)=>{
+    const P = (0, _hooks.useTheme)(), o = _react.useRef(), [h, v] = _react.useState(R || ""), c = typeof l < "u", f = c ? l : h, i = _react.useCallback((s, z)=>{
         c || v(s), t == null || t(s, z);
     }, [
         c,
@@ -170,28 +170,27 @@ const q = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
         i,
         e
     ]), k = (0, _formcontext.useFieldProps)({
-        name: n,
-        value: m,
+        name: p,
+        value: f,
         defaultValue: void 0,
         processValue: (s)=>s,
-        helperText: u,
-        optional: p,
-        error: d,
-        disabled: f,
+        helperText: d,
+        optional: n,
+        error: u,
+        disabled: m,
         onBlur: I,
         validate: S,
         onChange: e,
         onChangeValue: i
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({
-        ref: (0, _common.combineRefs)(o, h),
+        ref: (0, _common.combineRefs)(o, x),
         startIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsearchregular.default, {
-            size: _textfieldbasecssmistica.iconSize
+            size: _iconbuttoncssmistica.iconSize.default
         }),
-        endIcon: m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.FieldEndIcon, {
+        endIcon: f ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.FieldEndIcon, {
             Icon: _iconcloseregular.default,
-            className: _textfieldbasecssmistica.endIconWithShadow,
-            "aria-label": x.texts.formSearchClear,
+            "aria-label": P.texts.formSearchClear,
             onPress: y
         }) : void 0
     }, b, k), {
@@ -200,4 +199,4 @@ const q = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
             "component-name": "SearchField"
         }, F)
     }));
-}), U = q;
+}), U = D;

package/dist/select.css-mistica.js

@@ -10,49 +10,53 @@ function _export(target, all) {
 }
 _export(exports, {
     arrowDown: function() {
-        return i;
+        return f;
+    },
+    iconContainer: function() {
+        return y;
     },
     menuItem: function() {
-        return f;
+        return a;
     },
     menuItemSelected: function() {
-        return y;
+        return s;
     },
     optionsAnimationsVariants: function() {
-        return a;
+        return r;
     },
     optionsContainer: function() {
-        return s;
+        return t;
     },
     selectContainerVariants: function() {
-        return t;
+        return p;
     },
     selectTextVariants: function() {
-        return r;
+        return e;
     },
     selectVariants: function() {
-        return p;
+        return q;
     },
     vars: function() {
-        return e;
+        return o;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
+require("./icon-button.css.ts.vanilla.css-mistica.js");
 require("./text-field-base.css.ts.vanilla.css-mistica.js");
 require("./select.css.ts.vanilla.css-mistica.js");
-var i = "_1sqpivvo _1y2v1nfgd", f = "_1sqpivvq _1y2v1nf98 _1y2v1nfah _1y2v1nf6k _1y2v1nf7t _1y2v1nf22 _1y2v1nfgi _1y2v1nfgx _1y2v1nfji", y = "_1y2v1nf3k", a = {
+var f = "_1sqpivvo _1y2v1nfgd", y = "_1sqpivvp", a = "_1sqpivvr _1y2v1nf98 _1y2v1nfah _1y2v1nf6k _1y2v1nf7t _1y2v1nf22 _1y2v1nfgi _1y2v1nfgx _1y2v1nfji", s = "_1y2v1nf3k", r = {
     show: "_1sqpivv7",
     hide: "_1sqpivv8"
-}, s = "_1sqpivv6 _1y2v1nf6b _1y2v1nf7k _1y2v1nf8t _1y2v1nfa2 _1y2v1nfge _1y2v1nfj8 _1y2v1nf37", t = {
+}, t = "_1sqpivv6 _1y2v1nf6b _1y2v1nf7k _1y2v1nf8t _1y2v1nfa2 _1y2v1nfge _1y2v1nfj8 _1y2v1nf37", p = {
     default: "_1sqpivvd _1sqpivvc _1y2v1nfgc _1y2v1nfji",
     fullWidth: "_1sqpivve _1sqpivvc _1y2v1nfgc _1y2v1nfji"
-}, r = {
+}, e = {
     default: "_1sqpivvl _1sqpivvk _1y2v1nfgd _1y2v1nfjj _1y2v1nfix _1y2v1nf22",
     disabled: "_1sqpivvm _1sqpivvk _1y2v1nfgd _1y2v1nfjj _1y2v1nfix _1y2v1nf22"
-}, p = {
+}, q = {
     default: "_1sqpivvh _1sqpivvg _1y2v1nf6b _1y2v1nf7k _1y2v1nfj0 _1y2v1nfjj _1y2v1nf22 _1y2v1nf6a _1y2v1nfh5",
     disabled: "_1sqpivvi _1sqpivvg _1y2v1nf6b _1y2v1nf7k _1y2v1nfj0 _1y2v1nfjj _1y2v1nf22 _1y2v1nf6a _1y2v1nfh5"
-}, e = {
+}, o = {
     top: "var(--_1sqpivv0)",
     left: "var(--_1sqpivv1)",
     transformOrigin: "var(--_1sqpivv2)",

package/dist/select.css.d.ts

@@ -13,5 +13,6 @@ export declare const selectContainerVariants: Record<"default" | "fullWidth", st
 export declare const selectVariants: Record<"default" | "disabled", string>;
 export declare const selectTextVariants: Record<"default" | "disabled", string>;
 export declare const arrowDown: string;
+export declare const iconContainer: string;
 export declare const menuItem: string;
 export declare const menuItemSelected: string;