@telefonica/mistica 15.20.1 → 16.0.0

package/dist/form.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return K;
+        return Y;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -15,6 +15,7 @@ const _hooks = require("./hooks.js");
 const _formcontext = require("./form-context.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
+const _texttokens = require("./text-tokens.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -114,22 +115,22 @@ function _object_spread_props(target, source) {
     return target;
 }
 process.env.NODE_ENV !== "test" && typeof document < "u" && !("scrollBehavior" in document.documentElement.style) && Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("scroll-behavior-polyfill"))).finally(()=>{});
-const W = (param)=>{
-    let { children: R, className: S, onSubmit: b, initialValues: k = {}, autoJump: h = !1, onValidationErrors: a, id: x } = param;
-    const f = _react.useRef(!0), [i, E] = _react.useState(k), [l, I] = _react.useState(k), [w, m] = _react.useState("filling"), [V, y] = _react.useState({}), c = _react.useRef(/* @__PURE__ */ new Map()), d = _react.useRef(null), { texts: g } = (0, _hooks.useTheme)(), v = (0, _hooks.useAriaId)(x);
+const U = (param)=>{
+    let { children: N, className: R, onSubmit: b, initialValues: k = {}, autoJump: y = !1, onValidationErrors: a, id: S } = param;
+    const f = _react.useRef(!0), [i, x] = _react.useState(k), [l, w] = _react.useState(k), [V, m] = _react.useState("filling"), [j, h] = _react.useState({}), c = _react.useRef(/* @__PURE__ */ new Map()), d = _react.useRef(null), { texts: g, t: v } = (0, _hooks.useTheme)(), M = _react.useId(), F = S || M;
     _react.useEffect(()=>(f.current = !0, ()=>{
             f.current = !1;
         }), []);
-    const j = _react.useCallback((e, param)=>{
+    const P = _react.useCallback((e, param)=>{
         let { input: r, validator: o, focusableElement: t } = param;
         r || t ? c.current.set(e, {
             input: r,
             validator: o,
             focusableElement: t
         }) : c.current.delete(e);
-    }, []), P = _react.useCallback((param)=>{
+    }, []), T = _react.useCallback((param)=>{
         let { name: e, error: r } = param;
-        return y((o)=>_object_spread_props(_object_spread({}, o), {
+        return h((o)=>_object_spread_props(_object_spread({}, o), {
                 [e]: r
             }));
     }, []), p = _react.useCallback(()=>{
@@ -137,10 +138,10 @@ const W = (param)=>{
         const e = {};
         for (const [t, { input: s, validator: u }] of c.current)if (s) {
             if (s.disabled) continue;
-            if (s.required && !((o = l[t]) != null && o.trim())) e[t] = g.formFieldErrorIsMandatory;
+            if (s.required && !((o = l[t]) != null && o.trim())) e[t] = g.formFieldErrorIsMandatory || v(_texttokens.formFieldErrorIsMandatory);
             else {
-                const F = u == null ? void 0 : u(i[t], l[t]);
-                F && (e[t] = F);
+                const C = u == null ? void 0 : u(i[t], l[t]);
+                C && (e[t] = C);
             }
         }
         const r = Object.keys(e).map((t)=>{
@@ -157,16 +158,17 @@ const W = (param)=>{
                 });
             } catch (e) {}
         }
-        return y(e), a && Object.keys(e).length > 0 && a(e), e;
+        return h(e), a && Object.keys(e).length > 0 && a(e), e;
     }, [
         a,
         l,
         g,
-        i
-    ]), T = _react.useCallback((e)=>{
+        i,
+        v
+    ]), D = _react.useCallback((e)=>{
         setTimeout(()=>{
             var r;
-            if (h && d.current) {
+            if (y && d.current) {
                 const o = Array.from(d.current.querySelectorAll("input, select")), t = (r = c.current.get(e)) == null ? void 0 : r.input, s = o.indexOf(t);
                 if (s >= 0) {
                     const u = o[s + 1];
@@ -175,56 +177,56 @@ const W = (param)=>{
             }
         }, 100);
     }, [
-        h
-    ]), O = (e)=>[
+        y
+    ]), I = (e)=>[
             ...c.current.keys()
         ].reduce((r, o)=>{
             var t, s;
             return (s = (t = c.current.get(o)) == null ? void 0 : t.input) != null && s.disabled ? r : _object_spread_props(_object_spread({}, r), {
                 [o]: e[o]
             });
-        }, {}), C = _react.useCallback((e)=>(e == null || e.preventDefault(), m("sending"), Object.keys(p()).length > 0 ? (m("filling"), Promise.resolve()) : Promise.resolve(b(O(i), O(l))).finally(()=>{
+        }, {}), O = _react.useCallback((e)=>(e == null || e.preventDefault(), m("sending"), Object.keys(p()).length > 0 ? (m("filling"), Promise.resolve()) : Promise.resolve(b(I(i), I(l))).finally(()=>{
             f.current && m("filling");
         })), [
         b,
         l,
         p,
         i
-    ]), D = _react.useCallback((param)=>{
+    ]), _ = _react.useCallback((param)=>{
         let { name: e, value: r } = param;
-        E((o)=>_object_spread_props(_object_spread({}, o), {
+        x((o)=>_object_spread_props(_object_spread({}, o), {
                 [e]: r
             }));
-    }, []), M = _react.useCallback((param)=>{
+    }, []), q = _react.useCallback((param)=>{
         let { name: e, value: r } = param;
-        I((o)=>_object_spread_props(_object_spread({}, o), {
+        w((o)=>_object_spread_props(_object_spread({}, o), {
                 [e]: r
             }));
     }, []);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_formcontext.FormContext.Provider, {
         value: {
-            formStatus: w,
+            formStatus: V,
             values: i,
-            setValue: D,
+            setValue: _,
             rawValues: l,
-            setRawValue: M,
-            formErrors: V,
-            setFormError: P,
-            register: j,
-            jumpToNext: T,
+            setRawValue: q,
+            formErrors: j,
+            setFormError: T,
+            register: P,
+            jumpToNext: D,
             validate: p,
-            submit: C,
-            formId: v
+            submit: O,
+            formId: F
         },
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("form", {
-            id: v,
-            onSubmit: C,
+            id: F,
+            onSubmit: O,
             ref: d,
             className: (0, _classnames.default)((0, _sprinklescssmistica.sprinkles)({
                 width: "100%"
-            }), S),
+            }), R),
             noValidate: !0,
-            children: R
+            children: N
         })
     });
-}, K = W;
+}, Y = U;

package/dist/generated/mistica-icons/icon-2-g-filled.js

@@ -96,7 +96,7 @@ const n = (_param)=>{
         "color",
         "size"
     ]);
-    const s = (0, _themevariantcontext.useIsInverseVariant)(), t = e !== null && e !== void 0 ? e : s ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
+    const s = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), t = e !== null && e !== void 0 ? e : s ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: a,
         height: a,

package/dist/generated/mistica-icons/icon-2-g-regular.js

@@ -92,17 +92,17 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const t = (_param)=>{
-    var { color: v, size: a = 24 } = _param, c = _object_without_properties(_param, [
+    var { color: e, size: a = 24 } = _param, v = _object_without_properties(_param, [
         "color",
         "size"
     ]);
-    const e = (0, _themevariantcontext.useIsInverseVariant)(), h = v !== null && v !== void 0 ? v : e ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
+    const c = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), h = e !== null && e !== void 0 ? e : c ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: a,
         height: a,
         viewBox: "0 0 24 24",
         role: "presentation"
-    }, c), {
+    }, v), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
             fill: h,
             d: "M2.4 18A1.6 1.6 0 0 1 4 16.4h1A1.6 1.6 0 0 1 6.6 18v2A1.6 1.6 0 0 1 5 21.6H4A1.6 1.6 0 0 1 2.4 20zm1.6-.4a.4.4 0 0 0-.4.4v2c0 .22.18.4.4.4h1a.4.4 0 0 0 .4-.4v-2a.4.4 0 0 0-.4-.4zM7.4 14A1.6 1.6 0 0 1 9 12.4h1a1.6 1.6 0 0 1 1.6 1.6v6a1.6 1.6 0 0 1-1.6 1.6H9A1.6 1.6 0 0 1 7.4 20zm1.6-.4a.4.4 0 0 0-.4.4v6c0 .22.18.4.4.4h1a.4.4 0 0 0 .4-.4v-6a.4.4 0 0 0-.4-.4zM12.4 11A1.6 1.6 0 0 1 14 9.4h1a1.6 1.6 0 0 1 1.6 1.6v9a1.6 1.6 0 0 1-1.6 1.6h-1a1.6 1.6 0 0 1-1.6-1.6zm1.6-.4a.4.4 0 0 0-.4.4v9c0 .22.18.4.4.4h1a.4.4 0 0 0 .4-.4v-9a.4.4 0 0 0-.4-.4zM17.4 6A1.6 1.6 0 0 1 19 4.4h1A1.6 1.6 0 0 1 21.6 6v14a1.6 1.6 0 0 1-1.6 1.6h-1a1.6 1.6 0 0 1-1.6-1.6zm1.6-.4a.4.4 0 0 0-.4.4v14c0 .22.18.4.4.4h1a.4.4 0 0 0 .4-.4V6a.4.4 0 0 0-.4-.4zM2.208 8.432H7.16V7.009H4.727c1.695-1.1 2.386-1.926 2.386-2.894 0-1.27-1.07-2.106-2.557-2.106-.88 0-1.884.314-2.556 1.053l.9 1.082c.454-.427.984-.693 1.656-.693.493 0 .9.228.9.664 0 .627-.511 1.063-3.248 3.045zM7.789 5.273c0 2.01 1.534 3.272 3.418 3.272 1.193 0 2.111-.483 2.793-1.233V4.836h-3.049v1.357H12.4v.531c-.256.209-.7.38-1.193.38-1.032 0-1.761-.797-1.761-1.831s.729-1.831 1.76-1.831c.597 0 1.08.332 1.336.75l1.363-.722C13.441 2.683 12.59 2 11.207 2 9.323 2 7.789 3.262 7.789 5.273"

package/dist/generated/mistica-icons/icon-3-d-view-filled.js

@@ -92,18 +92,18 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const a = (_param)=>{
-    var { color: c, size: e = 24 } = _param, i = _object_without_properties(_param, [
+const h = (_param)=>{
+    var { color: c, size: e = 24 } = _param, l = _object_without_properties(_param, [
         "color",
         "size"
     ]);
-    const s = (0, _themevariantcontext.useIsInverseVariant)(), o = c !== null && c !== void 0 ? c : s ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: n } = (0, _hooks.useTheme)();
+    const s = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), o = c !== null && c !== void 0 ? c : s ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: n } = (0, _hooks.useTheme)();
     return n.match(/^o2-new/i) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", _object_spread_props(_object_spread({
         width: e,
         height: e,
         viewBox: "0 0 24 24",
         role: "presentation"
-    }, i), {
+    }, l), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
                 fill: o,
@@ -119,7 +119,7 @@ const a = (_param)=>{
         height: e,
         viewBox: "0 0 24 24",
         role: "presentation"
-    }, i), {
+    }, l), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
                 fill: o,
@@ -131,4 +131,4 @@ const a = (_param)=>{
             })
         ]
     }));
-}, w = a;
+}, w = h;

package/dist/generated/mistica-icons/icon-3-d-view-light.js

@@ -93,17 +93,17 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const v = (_param)=>{
-    var { color: r, size: e = 24 } = _param, t = _object_without_properties(_param, [
+    var { color: c, size: e = 24 } = _param, r = _object_without_properties(_param, [
         "color",
         "size"
     ]);
-    const i = (0, _themevariantcontext.useIsInverseVariant)(), l = r !== null && r !== void 0 ? r : i ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: s } = (0, _hooks.useTheme)();
-    return s.match(/^o2-new/i) ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
+    const i = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), l = c !== null && c !== void 0 ? c : i ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: a } = (0, _hooks.useTheme)();
+    return a.match(/^o2-new/i) ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: e,
         height: e,
         viewBox: "0 0 24 24",
         role: "presentation"
-    }, t), {
+    }, r), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
             fill: l,
             d: "M17.436 18.207c0-.38.306-.69.68-.69h3.402v3.448c0 .38-.306.69-.68.69a.687.687 0 0 1-.681-.69v-1.137C18.32 21.172 15.497 22 12.334 22 6.79 22 2.47 19.345 2.47 15.966c0-1.483.816-2.828 2.38-3.931v-5.38c0-.241.137-.448.341-.586l6.803-3.966a.61.61 0 0 1 .68 0l6.803 3.966c.204.103.34.345.34.586v7.931c0 .242-.136.448-.34.586l-6.803 3.966a.65.65 0 0 1-.34.103.65.65 0 0 1-.34-.103L5.19 15.172a.67.67 0 0 1-.34-.586v-.793c-.578.586-1.02 1.31-1.02 2.173 0 2.551 3.809 4.655 8.503 4.655 2.721 0 5.17-.655 6.769-1.724h-.987a.687.687 0 0 1-.68-.69m-5.782-7.173L6.21 7.829v6.379l5.443 3.172zm1.36 6.31 5.442-3.137v-6.38l-5.442 3.207zm4.728-10.689-5.408-3.172-5.408 3.172 5.408 3.173z"
@@ -113,7 +113,7 @@ const v = (_param)=>{
         height: e,
         viewBox: "0 0 24 24",
         role: "presentation"
-    }, t), {
+    }, r), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
                 fill: l,

package/dist/generated/mistica-icons/icon-3-d-view-regular.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return u;
+        return d;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -93,17 +93,17 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const s = (_param)=>{
-    var { color: t, size: e = 24 } = _param, r = _object_without_properties(_param, [
+    var { color: a, size: e = 24 } = _param, o = _object_without_properties(_param, [
         "color",
         "size"
     ]);
-    const a = (0, _themevariantcontext.useIsInverseVariant)(), l = t !== null && t !== void 0 ? t : a ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: i } = (0, _hooks.useTheme)();
+    const t = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), l = a !== null && a !== void 0 ? a : t ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: i } = (0, _hooks.useTheme)();
     return i.match(/^o2-new/i) ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: e,
         height: e,
         viewBox: "0 0 24 24",
         role: "presentation"
-    }, r), {
+    }, o), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
             fill: l,
             d: "M17.436 18.207c0-.38.306-.69.68-.69h3.402v3.448c0 .38-.306.69-.68.69a.687.687 0 0 1-.68-.69v-1.137C18.32 21.172 15.497 22 12.333 22 6.79 22 2.47 19.345 2.47 15.966c0-1.483.816-2.828 2.381-3.931v-5.38c0-.241.136-.448.34-.586l6.803-3.966a.61.61 0 0 1 .68 0l6.803 3.966c.204.103.34.345.34.586v7.931c0 .242-.136.448-.34.586l-6.803 3.966a.65.65 0 0 1-.34.103.65.65 0 0 1-.34-.103L5.19 15.172a.67.67 0 0 1-.34-.586v-.793c-.578.586-1.02 1.31-1.02 2.173 0 2.551 3.81 4.655 8.503 4.655 2.721 0 5.17-.655 6.769-1.724h-.987a.687.687 0 0 1-.68-.69m-5.782-7.173L6.212 7.829v6.379l5.442 3.172zm1.36 6.31 5.442-3.137v-6.38l-5.442 3.207zm4.728-10.689-5.408-3.172-5.408 3.172 5.408 3.173z"
@@ -113,10 +113,10 @@ const s = (_param)=>{
         height: e,
         viewBox: "0 0 24 24",
         role: "presentation"
-    }, r), {
+    }, o), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
             fill: l,
             d: "M17.436 18.207c0-.38.306-.69.68-.69h3.402v3.448c0 .38-.306.69-.68.69a.687.687 0 0 1-.68-.69v-1.137C18.32 21.172 15.497 22 12.333 22 6.79 22 2.47 19.345 2.47 15.966c0-1.483.816-2.828 2.381-3.931v-5.38c0-.241.136-.448.34-.586l6.803-3.966a.61.61 0 0 1 .68 0l6.803 3.966c.204.103.34.345.34.586v7.931c0 .242-.136.448-.34.586l-6.803 3.966a.65.65 0 0 1-.34.103.65.65 0 0 1-.34-.103L5.19 15.172a.67.67 0 0 1-.34-.586v-.793c-.578.586-1.02 1.31-1.02 2.173 0 2.551 3.81 4.655 8.503 4.655 2.721 0 5.17-.655 6.769-1.724h-.987a.687.687 0 0 1-.68-.69m-5.782-7.173L6.212 7.829v6.379l5.442 3.172zm1.36 6.31 5.442-3.137v-6.38l-5.442 3.207zm4.728-10.689-5.408-3.172-5.408 3.172 5.408 3.173z"
         })
     }));
-}, u = s;
+}, d = s;

package/dist/generated/mistica-icons/icon-3-g-filled.js

@@ -96,7 +96,7 @@ const i = (_param)=>{
         "color",
         "size"
     ]);
-    const l = (0, _themevariantcontext.useIsInverseVariant)(), t = e !== null && e !== void 0 ? e : l ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
+    const l = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), t = e !== null && e !== void 0 ? e : l ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: a,
         height: a,

package/dist/generated/mistica-icons/icon-3-g-regular.js

@@ -96,7 +96,7 @@ const t = (_param)=>{
         "color",
         "size"
     ]);
-    const e = (0, _themevariantcontext.useIsInverseVariant)(), s = c !== null && c !== void 0 ? c : e ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
+    const e = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), s = c !== null && c !== void 0 ? c : e ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: a,
         height: a,

package/dist/generated/mistica-icons/icon-4-g-filled.js

@@ -97,7 +97,7 @@ const s = (_param)=>{
         "color",
         "size"
     ]);
-    const c = (0, _themevariantcontext.useIsInverseVariant)(), e = r !== null && r !== void 0 ? r : c ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: t } = (0, _hooks.useTheme)();
+    const c = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), e = r !== null && r !== void 0 ? r : c ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: t } = (0, _hooks.useTheme)();
     return t.match(/^blau/i) ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: a,
         height: a,

package/dist/generated/mistica-icons/icon-4-g-light.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return g;
+        return M;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -97,7 +97,7 @@ const m = (_param)=>{
         "color",
         "size"
     ]);
-    const l = (0, _themevariantcontext.useIsInverseVariant)(), a = i !== null && i !== void 0 ? i : l ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: s } = (0, _hooks.useTheme)();
+    const l = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), a = i !== null && i !== void 0 ? i : l ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: s } = (0, _hooks.useTheme)();
     return s.match(/^o2-new/i) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", _object_spread_props(_object_spread({
         width: t,
         height: t,
@@ -135,4 +135,4 @@ const m = (_param)=>{
             })
         ]
     }));
-}, g = m;
+}, M = m;

package/dist/generated/mistica-icons/icon-4-g-regular.js

@@ -93,11 +93,11 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const s = (_param)=>{
-    var { color: o, size: e = 24 } = _param, l = _object_without_properties(_param, [
+    var { color: i, size: e = 24 } = _param, l = _object_without_properties(_param, [
         "color",
         "size"
     ]);
-    const i = (0, _themevariantcontext.useIsInverseVariant)(), h = o !== null && o !== void 0 ? o : i ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: t } = (0, _hooks.useTheme)();
+    const o = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), h = i !== null && i !== void 0 ? i : o ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: t } = (0, _hooks.useTheme)();
     return t.match(/^blau/i) ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: e,
         height: e,

package/dist/generated/mistica-icons/icon-5-g-filled.js

@@ -97,7 +97,7 @@ const s = (_param)=>{
         "color",
         "size"
     ]);
-    const i = (0, _themevariantcontext.useIsInverseVariant)(), e = t !== null && t !== void 0 ? t : i ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: o } = (0, _hooks.useTheme)();
+    const i = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), e = t !== null && t !== void 0 ? t : i ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: o } = (0, _hooks.useTheme)();
     return o.match(/^blau/i) ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: a,
         height: a,

package/dist/generated/mistica-icons/icon-5-g-light.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return g;
+        return M;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -93,11 +93,11 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const m = (_param)=>{
-    var { color: r, size: c = 24 } = _param, t = _object_without_properties(_param, [
+    var { color: h, size: c = 24 } = _param, t = _object_without_properties(_param, [
         "color",
         "size"
     ]);
-    const i = (0, _themevariantcontext.useIsInverseVariant)(), a = r !== null && r !== void 0 ? r : i ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: s } = (0, _hooks.useTheme)();
+    const i = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), a = h !== null && h !== void 0 ? h : i ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: s } = (0, _hooks.useTheme)();
     return s.match(/^o2-new/i) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", _object_spread_props(_object_spread({
         width: c,
         height: c,
@@ -131,4 +131,4 @@ const m = (_param)=>{
             })
         ]
     }));
-}, g = m;
+}, M = m;

package/dist/generated/mistica-icons/icon-5-g-regular.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return p;
+        return f;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -97,7 +97,7 @@ const s = (_param)=>{
         "color",
         "size"
     ]);
-    const o = (0, _themevariantcontext.useIsInverseVariant)(), c = i !== null && i !== void 0 ? i : o ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: t } = (0, _hooks.useTheme)();
+    const o = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), c = i !== null && i !== void 0 ? i : o ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: t } = (0, _hooks.useTheme)();
     return t.match(/^blau/i) ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: a,
         height: a,
@@ -157,4 +157,4 @@ const s = (_param)=>{
             })
         ]
     }));
-}, p = s;
+}, f = s;

package/dist/generated/mistica-icons/icon-academic-filled.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return d;
+        return v;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -96,7 +96,7 @@ const n = (_param)=>{
         "color",
         "size"
     ]);
-    const i = (0, _themevariantcontext.useIsInverseVariant)(), s = e !== null && e !== void 0 ? e : i ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
+    const i = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), s = e !== null && e !== void 0 ? e : i ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: c,
         height: c,
@@ -108,4 +108,4 @@ const n = (_param)=>{
             d: "M21.755 18.091c0-.403-.241-1.05-.647-1.375l-.081-6.555v-.014c0-.478 0-1.396-.81-1.767l-7.933-3.563a1.58 1.58 0 0 0-1.215 0L3.136 8.38c-.566.24-.89.81-.89 1.375 0 .647.324 1.132.89 1.376l7.93 3.563c.16.08.322.162.566.162.16 0 .403-.081.566-.162l7.61-3.401v5.423c-.403.322-.647.97-.647 1.375 0 .241.081.404.244.566.243.244.566.244.89.244h.488c.244 0 .566-.081.728-.244.163-.081.244-.322.244-.566m-9.148-2.67a2.9 2.9 0 0 1-.891.163c-.322 0-.647-.08-.891-.162l-5.83-2.591v2.672c0 .81.567 1.457 1.295 1.62 1.297.243 3.078.727 4.373 1.78.324.244.728.407 1.134.407s.81-.163 1.134-.406c1.297-1.053 3.079-1.538 4.373-1.782a1.654 1.654 0 0 0 1.294-1.619V12.75z"
         })
     }));
-}, d = n;
+}, v = n;

package/dist/generated/mistica-icons/icon-academic-light.js

@@ -92,19 +92,19 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const n = (_param)=>{
-    var { color: s, size: c = 24 } = _param, t = _object_without_properties(_param, [
+    var { color: e, size: c = 24 } = _param, s = _object_without_properties(_param, [
         "color",
         "size"
     ]);
-    const e = (0, _themevariantcontext.useIsInverseVariant)(), l = s !== null && s !== void 0 ? s : e ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
+    const t = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), i = e !== null && e !== void 0 ? e : t ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: c,
         height: c,
         viewBox: "0 0 24 24",
         role: "presentation"
-    }, t), {
+    }, s), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
-            fill: l,
+            fill: i,
             d: "M20.952 10.047v6.677c.572.412.816 1.205.78 1.812-.031.423-.1.521-.286.659-.255.187-.49.246-.735.246h-.49c-.328 0-.655 0-.9-.246-.163-.163-.243-.412-.243-.659 0-.577.327-1.565.979-1.812v-5.77l-1.714.743v3.955c0 .742-.49 1.319-1.143 1.484-1.303.25-3.1.823-4.486 1.896-.328.247-.655.412-1.062.412-.41 0-.735-.165-1.062-.412-1.304-1.154-3.181-1.65-4.487-1.896a1.51 1.51 0 0 1-1.143-1.484v-3.874L3 10.87c-.408-.246-.735-.658-.735-1.235S2.509 8.565 3 8.4l8.078-3.79c.407-.084.735-.084 1.142.082L20.3 8.4c.69.27.667 1.099.653 1.619zM3.083 9.635c0 .165.08.33.244.412l8.078 3.708c.163.081.244.081.408 0l8.077-3.71h-8.322c-.244 0-.407-.166-.407-.413s.163-.411.407-.411h8.486s.017-.031-.08-.082l-8.078-3.708c-.164-.081-.244-.081-.408 0L3.41 9.14c-.247.084-.327.25-.327.496m14.115 6.594c.247 0 .49-.247.49-.577l-.083-3.628-5.462 2.558a1.2 1.2 0 0 1-1.063 0l-5.304-2.474v3.544c0 .246.163.495.49.577 1.387.249 3.425.826 4.895 2.06a.975.975 0 0 0 1.142 0c1.55-1.237 3.508-1.814 4.895-2.06m2.773 2.307h1.062c0-.495-.408-1.072-.572-1.072s-.49.66-.49 1.072"
         })
     }));

package/dist/generated/mistica-icons/icon-academic-regular.js

@@ -96,7 +96,7 @@ const i = (_param)=>{
         "color",
         "size"
     ]);
-    const a = (0, _themevariantcontext.useIsInverseVariant)(), s = o !== null && o !== void 0 ? o : a ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
+    const a = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), s = o !== null && o !== void 0 ? o : a ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: c,
         height: c,

package/dist/generated/mistica-icons/icon-accessories-filled.js

@@ -97,7 +97,7 @@ const v = (_param)=>{
         "color",
         "size"
     ]);
-    const t = (0, _themevariantcontext.useIsInverseVariant)(), e = i !== null && i !== void 0 ? i : t ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: l } = (0, _hooks.useTheme)();
+    const t = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), e = i !== null && i !== void 0 ? i : t ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: l } = (0, _hooks.useTheme)();
     return l.match(/^o2-new/i) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", _object_spread_props(_object_spread({
         width: c,
         height: c,

package/dist/generated/mistica-icons/icon-accessories-light.js

@@ -93,12 +93,12 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const n = (_param)=>{
-    var { color: t, size: v = 24 } = _param, h = _object_without_properties(_param, [
+    var { color: r, size: v = 24 } = _param, h = _object_without_properties(_param, [
         "color",
         "size"
     ]);
-    const r = (0, _themevariantcontext.useIsInverseVariant)(), c = t !== null && t !== void 0 ? t : r ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: s } = (0, _hooks.useTheme)();
-    return s.match(/^o2-new/i) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", _object_spread_props(_object_spread({
+    const t = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), a = r !== null && r !== void 0 ? r : t ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: i } = (0, _hooks.useTheme)();
+    return i.match(/^o2-new/i) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", _object_spread_props(_object_spread({
         width: v,
         height: v,
         viewBox: "0 0 24 24",
@@ -106,11 +106,11 @@ const n = (_param)=>{
     }, h), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
-                fill: c,
+                fill: a,
                 d: "M17.145 5.27c0-1.809-1.45-3.27-3.225-3.27H8.529C6.745 2 5.3 3.47 5.3 5.27v13.46C5.3 20.54 6.75 22 8.525 22h5.387c1.784 0 3.225-1.47 3.225-3.27v-3.688c.327-.232.54-.61.54-1.046V8.551a2.38 2.38 0 0 0-.54-1.51V5.27zm-.54 8.738a.185.185 0 0 1-.18.184.184.184 0 0 1-.182-.184v-3.64a.537.537 0 0 0-.54-.548h-.358c-.43 0-.992-.183-1.252-.403V7.673c.268-.216.823-.404 1.252-.404.69 0 1.252.571 1.252 1.27v5.465h.008zM8.53 20.559c-.992 0-1.792-.818-1.792-1.816V5.27c0-1.006.808-1.817 1.792-1.817h5.383c.992 0 1.791.819 1.791 1.817v.942c-.118-.016-.236-.032-.358-.032-.634 0-1.744.295-2.229.95a.54.54 0 0 0-.102.331V9.65c0 .12.04.231.102.331.438.595 1.394.89 2.044.942v3.102c0 .435.213.81.54 1.046v3.689c.011.978-.8 1.8-1.788 1.8zm14.07-13.425c-.485-.65-1.595-.95-2.23-.95-1.283 0-2.33 1.062-2.33 2.363v5.457c0 .699.563 1.27 1.252 1.27s1.252-.571 1.252-1.27v-3.098c.65-.048 1.61-.347 2.044-.942a.54.54 0 0 0 .102-.331v-2.18a.44.44 0 0 0-.09-.32m-.97 2.295.005-.004v.004zm0 0c-.27.214-.821.4-1.248.4h-.358c-.291 0-.54.239-.54.546v3.641a.185.185 0 0 1-.18.184.184.184 0 0 1-.182-.184V8.551c0-.699.564-1.27 1.253-1.27.429 0 .992.184 1.252.404v1.744z"
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
-                fill: c,
+                fill: a,
                 d: "M11.4 4.547H8.529a.731.731 0 0 0 0 1.461h2.87a.731.731 0 0 0 0-1.461"
             })
         ]
@@ -122,15 +122,15 @@ const n = (_param)=>{
     }, h), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
-                fill: c,
+                fill: a,
                 d: "M13.116 21.288a.71.71 0 0 1-.708.712.71.71 0 0 1-.708-.712.71.71 0 0 1 .708-.712.71.71 0 0 1 .708.712M8.496 4.144h2.131c.588 0 1.061.476 1.061 1.068s-.473 1.068-1.061 1.068h-2.13a1.06 1.06 0 0 1-1.062-1.068c0-.592.473-1.068 1.061-1.068m0 1.428h2.131a.356.356 0 0 0 0-.712h-2.13a.356.356 0 0 0 0 .712"
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
-                fill: c,
+                fill: a,
                 d: "M16.662 4.86v1.716a2.13 2.13 0 0 1 1.061 1.852v5.36a1.062 1.062 0 1 1-2.123 0v-3.216c-.596 0-1.626-.268-2.059-.86a.35.35 0 0 1-.072-.212V7.356a.35.35 0 0 1 .072-.212c.441-.592 1.463-.86 2.06-.86.118 0 .242.016.353.032V4.86a2.14 2.14 0 0 0-2.13-2.144H8.141a2.14 2.14 0 0 0-2.13 2.144v13.932a2.14 2.14 0 0 0 2.13 2.144h2.131a.356.356 0 0 1 0 .712h-2.13a2.85 2.85 0 0 1-2.843-2.86V4.86C5.3 3.28 6.58 2 8.142 2h5.677a2.85 2.85 0 0 1 2.843 2.86m.004 9.284c.194 0 .353-.16.353-.356V8.42c0-.784-.636-1.424-1.415-1.424-.449 0-1.125.208-1.415.492v1.88c.29.28.966.492 1.415.492h.354c.195 0 .354.16.354.356v3.572c0 .196.159.356.354.356m5.959-7.004c-.434-.592-1.463-.86-2.06-.86a2.14 2.14 0 0 0-2.13 2.144v5.36a1.062 1.062 0 1 0 2.123 0v-3.216c.596 0 1.617-.268 2.059-.86a.35.35 0 0 0 .071-.212V7.36a.28.28 0 0 0-.063-.22M20.57 9.86h-.354a.356.356 0 0 0-.354.356v3.572a.356.356 0 0 1-.354.356.356.356 0 0 1-.354-.356v-5.36c0-.784.636-1.424 1.416-1.424.449 0 1.125.212 1.415.492v1.872c-.29.284-.966.492-1.415.492"
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
-                fill: c,
+                fill: a,
                 d: "M16.308 15.928a.356.356 0 0 0-.354.356v2.504c0 .94-.628 1.788-1.53 2.056a.36.36 0 0 0 .095.704c.032 0 .063-.008.103-.016a2.865 2.865 0 0 0 2.036-2.736v-2.504a.35.35 0 0 0-.35-.364"
             })
         ]

package/dist/generated/mistica-icons/icon-accessories-regular.js

@@ -93,17 +93,17 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const n = (_param)=>{
-    var { color: s, size: c = 24 } = _param, e = _object_without_properties(_param, [
+    var { color: s, size: c = 24 } = _param, v = _object_without_properties(_param, [
         "color",
         "size"
     ]);
-    const h = (0, _themevariantcontext.useIsInverseVariant)(), a = s !== null && s !== void 0 ? s : h ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: t } = (0, _hooks.useTheme)();
+    const h = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), a = s !== null && s !== void 0 ? s : h ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: t } = (0, _hooks.useTheme)();
     return t.match(/^o2-new/i) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", _object_spread_props(_object_spread({
         width: c,
         height: c,
         viewBox: "0 0 24 24",
         role: "presentation"
-    }, e), {
+    }, v), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
                 fill: a,
@@ -119,7 +119,7 @@ const n = (_param)=>{
         height: c,
         viewBox: "0 0 24 24",
         role: "presentation"
-    }, e), {
+    }, v), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
                 fill: a,

package/dist/generated/mistica-icons/icon-add-bill-euro-filled.js

@@ -97,8 +97,8 @@ const n = (_param)=>{
         "color",
         "size"
     ]);
-    const l = (0, _themevariantcontext.useIsInverseVariant)(), r = h !== null && h !== void 0 ? h : l ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: i } = (0, _hooks.useTheme)();
-    return i.match(/^o2-new/i) ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
+    const i = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), r = h !== null && h !== void 0 ? h : i ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: l } = (0, _hooks.useTheme)();
+    return l.match(/^o2-new/i) ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: o,
         height: o,
         viewBox: "0 0 24 24",

package/dist/generated/mistica-icons/icon-add-bill-euro-light.js

@@ -97,7 +97,7 @@ const l = (_param)=>{
         "color",
         "size"
     ]);
-    const t = (0, _themevariantcontext.useIsInverseVariant)(), r = e !== null && e !== void 0 ? e : t ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: i } = (0, _hooks.useTheme)();
+    const t = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), r = e !== null && e !== void 0 ? e : t ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: i } = (0, _hooks.useTheme)();
     return i.match(/^o2-new/i) ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: a,
         height: a,