@telefonica/mistica 14.40.0 → 14.42.0

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

@@ -10,27 +10,30 @@ function _export(target, all) {
 }
 _export(exports, {
     backgroundVariant: function() {
-        return o;
+        return e;
+    },
+    expandedResponsiveLayoutContainerDesktop: function() {
+        return n;
     },
-    expandedResponsiveLayoutContainer: function() {
+    expandedResponsiveLayoutContainerMobile: function() {
         return r;
     },
     fullWidth: function() {
-        return e;
+        return t;
     },
     fullwidthContainer: function() {
         return v;
     },
     responsiveLayout: function() {
-        return t;
+        return i;
     },
     responsiveLayoutContainer: function() {
-        return i;
+        return f;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./responsive-layout.css.ts.vanilla.css-mistica.js");
-var o = {
-    inverse: "_1y2v1nf3e",
-    alternative: "_1y2v1nf3j"
-}, r = "_17lofg73", e = "_17lofg79 _1y2v1nfh3", v = "_17lofg74", t = "_17lofg77", i = "_17lofg72 _1y2v1nfh3";
+var e = {
+    inverse: "_1y2v1nf3f",
+    alternative: "_1y2v1nf3k"
+}, n = "_17lofg74", r = "_17lofg73", t = "_17lofg7a _1y2v1nfh5", v = "_17lofg75", i = "_17lofg78", f = "_17lofg72 _1y2v1nfh5";

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

@@ -6,7 +6,8 @@ export declare const vars: {
     sideMargin: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 export declare const responsiveLayoutContainer: string;
-export declare const expandedResponsiveLayoutContainer: string;
+export declare const expandedResponsiveLayoutContainerMobile: string;
+export declare const expandedResponsiveLayoutContainerDesktop: string;
 export declare const fullwidthContainer: string;
 export declare const backgroundVariant: {
     inverse: string;

package/dist/responsive-layout.d.ts

@@ -11,7 +11,7 @@ type Props = {
     dataAttributes?: DataAttributes;
 };
 export declare const InternalResponsiveLayout: React.FC<Props & {
-    shouldExpandWhenNested?: boolean;
+    shouldExpandWhenNested?: boolean | 'desktop';
 }>;
 declare const ResponsiveLayout: React.FC<Props>;
 export default ResponsiveLayout;

package/dist/responsive-layout.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     InternalResponsiveLayout: function() {
-        return R;
+        return b;
     },
     default: function() {
-        return k;
+        return j;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -106,29 +106,32 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const R = (param)=>{
-    let { children: a, isInverse: n = !1, variant: i, backgroundColor: o, className: r, fullWidth: s, dataAttributes: d, shouldExpandWhenNested: u = !1 } = param;
-    const m = (0, _themevariantcontext.useThemeVariant)(), e = i || n && "inverse" || void 0;
+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;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-        variant: e !== null && e !== void 0 ? e : m,
+        variant: t !== null && t !== void 0 ? t : d,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-            className: (0, _classnames.default)(s ? _responsivelayoutcssmistica.fullwidthContainer : _responsivelayoutcssmistica.responsiveLayoutContainer, r, e && e !== "default" && _responsivelayoutcssmistica.backgroundVariant[e], u && !s && _responsivelayoutcssmistica.expandedResponsiveLayoutContainer),
-            style: o ? {
-                background: o
+            className: (0, _classnames.default)(e ? _responsivelayoutcssmistica.fullwidthContainer : _responsivelayoutcssmistica.responsiveLayoutContainer, p, t && t !== "default" && _responsivelayoutcssmistica.backgroundVariant[t], {
+                [_responsivelayoutcssmistica.expandedResponsiveLayoutContainerMobile]: i === !0 && !e,
+                [_responsivelayoutcssmistica.expandedResponsiveLayoutContainerDesktop]: i && !e
+            }),
+            style: s ? {
+                background: s
             } : void 0
-        }, (0, _dom.getPrefixedDataAttributes)(d)), {
+        }, (0, _dom.getPrefixedDataAttributes)(u)), {
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: s ? _responsivelayoutcssmistica.fullWidth : _responsivelayoutcssmistica.responsiveLayout,
-                children: a
+                className: e ? _responsivelayoutcssmistica.fullWidth : _responsivelayoutcssmistica.responsiveLayout,
+                children: n
             })
         }))
     });
-}, N = (_param)=>{
-    var { children: a } = _param, n = _object_without_properties(_param, [
+}, C = (_param)=>{
+    var { children: n } = _param, o = _object_without_properties(_param, [
         "children"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(R, _object_spread_props(_object_spread({}, n), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread_props(_object_spread({}, o), {
         shouldExpandWhenNested: !0,
-        children: a
+        children: n
     }));
-}, k = N;
+}, j = C;

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.css-mistica.js");
 require("./screen-reader-only.css.ts.vanilla.css-mistica.js");
-var v = "gwdgwo1 _1y2v1nf69 _1y2v1nf7i _1y2v1nf8r _1y2v1nfa0 _1y2v1nfgb _1y2v1nfjh _1y2v1nfiy";
+var y = "gwdgwo1 _1y2v1nf6b _1y2v1nf7k _1y2v1nf8t _1y2v1nfa2 _1y2v1nfgd _1y2v1nfjj _1y2v1nfj0";

package/dist/search-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return O;
+        return U;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -15,10 +15,10 @@ const _formcontext = require("./form-context.js");
 const _textfieldbase = require("./text-field-base.js");
 const _iconsearchregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-search-regular.js"));
 const _iconcloseregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-close-regular.js"));
-const _iconbutton = /*#__PURE__*/ _interop_require_default(require("./icon-button.js"));
 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");
 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, y)=>{
-    var { disabled: m, error: u, helperText: d, name: p, optional: n, validate: R, onChange: e, onChangeValue: t, onBlur: I, value: a, defaultValue: S } = _param, x = _object_without_properties(_param, [
+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, [
         "disabled",
         "error",
         "helperText",
@@ -156,47 +156,48 @@ const q = /*#__PURE__*/ _react.forwardRef((_param, y)=>{
         "onChangeValue",
         "onBlur",
         "value",
-        "defaultValue"
+        "defaultValue",
+        "dataAttributes"
     ]);
-    const b = (0, _hooks.useTheme)(), o = _react.useRef(), [F, P] = _react.useState(S || ""), i = typeof a < "u", f = i ? a : F, l = _react.useCallback((s, B)=>{
-        i || P(s), t == null || t(s, B);
+    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)=>{
+        c || v(s), t == null || t(s, z);
     }, [
-        i,
+        c,
         t
-    ]), h = _react.useCallback(()=>{
-        l("", ""), o.current && (e == null || e((0, _dom.createChangeEvent)(o.current, "")), o.current.focus());
+    ]), y = _react.useCallback(()=>{
+        i("", ""), o.current && (e == null || e((0, _dom.createChangeEvent)(o.current, "")), o.current.focus());
     }, [
-        l,
+        i,
         e
-    ]), v = (0, _formcontext.useFieldProps)({
-        name: p,
-        value: f,
+    ]), k = (0, _formcontext.useFieldProps)({
+        name: n,
+        value: m,
         defaultValue: void 0,
         processValue: (s)=>s,
-        helperText: d,
-        optional: n,
-        error: u,
-        disabled: m,
+        helperText: u,
+        optional: p,
+        error: d,
+        disabled: f,
         onBlur: I,
-        validate: R,
+        validate: S,
         onChange: e,
-        onChangeValue: l
+        onChangeValue: i
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({
-        ref: (0, _common.combineRefs)(o, y),
-        startIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsearchregular.default, {}),
-        endIcon: f ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
-            size: 48,
-            style: {
-                display: "flex",
-                padding: 12,
-                margin: -12
-            },
-            "aria-label": b.texts.formSearchClear,
-            onPress: h,
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcloseregular.default, {})
+        ref: (0, _common.combineRefs)(o, h),
+        startIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsearchregular.default, {
+            size: _textfieldbasecssmistica.iconSize
+        }),
+        endIcon: m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.FieldEndIcon, {
+            Icon: _iconcloseregular.default,
+            className: _textfieldbasecssmistica.endIconWithShadow,
+            "aria-label": x.texts.formSearchClear,
+            onPress: y
         }) : void 0
-    }, x, v), {
-        type: "search"
+    }, b, k), {
+        type: "search",
+        dataAttributes: _object_spread({
+            "component-name": "SearchField"
+        }, F)
     }));
-}), O = q;
+}), U = q;

package/dist/select.css-mistica.js

@@ -10,22 +10,22 @@ function _export(target, all) {
 }
 _export(exports, {
     arrowDown: function() {
-        return n;
+        return i;
     },
     menuItem: function() {
         return f;
     },
     menuItemSelected: function() {
-        return i;
+        return y;
     },
     optionsAnimationsVariants: function() {
-        return y;
+        return a;
     },
     optionsContainer: function() {
-        return a;
+        return s;
     },
     selectContainerVariants: function() {
-        return s;
+        return t;
     },
     selectTextVariants: function() {
         return r;
@@ -34,24 +34,25 @@ _export(exports, {
         return p;
     },
     vars: function() {
-        return t;
+        return e;
     }
 });
 require("./sprinkles.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 n = "_1sqpivvo _1y2v1nfgb _1y2v1nfkm", f = "_1sqpivvq _1y2v1nf96 _1y2v1nfaf _1y2v1nf6i _1y2v1nf7r _1y2v1nf21 _1y2v1nfgg _1y2v1nfgv _1y2v1nfjg _1y2v1nfhv", i = "_1y2v1nf3j", y = {
+var i = "_1sqpivvo _1y2v1nfgd", f = "_1sqpivvq _1y2v1nf98 _1y2v1nfah _1y2v1nf6k _1y2v1nf7t _1y2v1nf22 _1y2v1nfgi _1y2v1nfgx _1y2v1nfji", y = "_1y2v1nf3k", a = {
     show: "_1sqpivv7",
     hide: "_1sqpivv8"
-}, a = "_1sqpivv6 _1y2v1nf69 _1y2v1nf7i _1y2v1nf8r _1y2v1nfa0 _1y2v1nfgc _1y2v1nfj6 _1y2v1nf36", s = {
-    default: "_1sqpivvd _1sqpivvc _1y2v1nfga _1y2v1nfjg",
-    fullWidth: "_1sqpivve _1sqpivvc _1y2v1nfga _1y2v1nfjg"
+}, s = "_1sqpivv6 _1y2v1nf6b _1y2v1nf7k _1y2v1nf8t _1y2v1nfa2 _1y2v1nfge _1y2v1nfj8 _1y2v1nf37", t = {
+    default: "_1sqpivvd _1sqpivvc _1y2v1nfgc _1y2v1nfji",
+    fullWidth: "_1sqpivve _1sqpivvc _1y2v1nfgc _1y2v1nfji"
 }, r = {
-    default: "_1sqpivvl _1sqpivvk _1y2v1nfgb _1y2v1nfjh _1y2v1nfiv _1y2v1nf21",
-    disabled: "_1sqpivvm _1sqpivvk _1y2v1nfgb _1y2v1nfjh _1y2v1nfiv _1y2v1nf21"
+    default: "_1sqpivvl _1sqpivvk _1y2v1nfgd _1y2v1nfjj _1y2v1nfix _1y2v1nf22",
+    disabled: "_1sqpivvm _1sqpivvk _1y2v1nfgd _1y2v1nfjj _1y2v1nfix _1y2v1nf22"
 }, p = {
-    default: "_1sqpivvh _1sqpivvg _1y2v1nfiy _1y2v1nfjh _1y2v1nf21 _1y2v1nf68 _1y2v1nfh3 _1y2v1nfhk",
-    disabled: "_1sqpivvi _1sqpivvg _1y2v1nfiy _1y2v1nfjh _1y2v1nf21 _1y2v1nf68 _1y2v1nfh3 _1y2v1nfhk"
-}, t = {
+    default: "_1sqpivvh _1sqpivvg _1y2v1nf6b _1y2v1nf7k _1y2v1nfj0 _1y2v1nfjj _1y2v1nf22 _1y2v1nf6a _1y2v1nfh5",
+    disabled: "_1sqpivvi _1sqpivvg _1y2v1nf6b _1y2v1nf7k _1y2v1nfj0 _1y2v1nfjj _1y2v1nf22 _1y2v1nf6a _1y2v1nfh5"
+}, e = {
     top: "var(--_1sqpivv0)",
     left: "var(--_1sqpivv1)",
     transformOrigin: "var(--_1sqpivv2)",

package/dist/select.css.d.ts

@@ -5,6 +5,7 @@ export declare const vars: {
     minWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     maxHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
+export declare const chevronSize: string;
 export declare const optionsContainer: string;
 export declare const optionsAnimationsVariants: Record<"hide" | "show", string>;
 export declare const actions: string;