@telefonica/mistica 14.6.0 → 14.7.1

package/dist/sprinkles.css.d.ts

@@ -21,7 +21,7 @@ export declare const sprinkles: ((props: {
     readonly maxWidth?: "100%" | undefined;
     readonly maxHeight?: "100%" | undefined;
     readonly border?: "regular" | "none" | undefined;
-    readonly borderRadius?: 2 | 4 | 8 | 16 | "50%" | 20 | undefined;
+    readonly borderRadius?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | 2 | 4 | 8 | 16 | "50%" | 20 | undefined;
     readonly cursor?: "pointer" | undefined;
     readonly overflow?: "hidden" | "visible" | undefined;
     readonly top?: 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;

package/dist/stepper.css-mistica.js

@@ -11,19 +11,19 @@ function _export(target, all) {
 _export(exports, {
     bar: ()=>_,
     barFilled: ()=>r,
-    barFilledAnimation: ()=>f,
-    barFilledReverseAnimation: ()=>a,
-    currentNumber: ()=>e,
-    iconAnimation: ()=>m,
-    number: ()=>y,
+    barFilledAnimation: ()=>a,
+    barFilledReverseAnimation: ()=>e,
+    currentNumber: ()=>f,
+    iconAnimation: ()=>y,
+    number: ()=>m,
     step: ()=>i,
-    stepIconNumber: ()=>h,
-    stepper: ()=>t,
+    stepIconNumber: ()=>t,
+    stepper: ()=>h,
     textContainer: ()=>o,
-    vars: ()=>p
+    vars: ()=>q
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./stepper.css.ts.vanilla.js");
-var _ = "_14h93mqk _1y2v1nf88 _1y2v1nf7p _1y2v1nf9j _1y2v1nf9o", r = "_14h93mqm _1y2v1nf88 _1y2v1nf7p _1y2v1nf9m _1y2v1nf9o", f = "_14h93mqn", a = "_14h93mqp _1y2v1nf7r", e = "_14h93mqf", m = "_14h93mqc", y = "_14h93mqe _1y2v1nf5i _1y2v1nf5x _1y2v1nf5r _1y2v1nf9h", i = "_14h93mq9 _1y2v1nf5d _1y2v1nf5j _1y2v1nf5o _1y2v1nf5x", h = "_14h93mqb _1y2v1nf5d _1y2v1nf5i", t = "_14h93mq7 _1y2v1nf5i _1y2v1nf95", o = "_14h93mqh _1y2v1nf5e", p = {
+var _ = "_14h93mqk _1y2v1nf8e _1y2v1nf7v _1y2v1nfa1 _1y2v1nfa4", r = "_14h93mqm _1y2v1nf8e _1y2v1nf7v _1y2v1nfa1 _1y2v1nfa4", a = "_14h93mqn", e = "_14h93mqp _1y2v1nf7x", f = "_14h93mqf", y = "_14h93mqc", m = "_14h93mqe _1y2v1nf5o _1y2v1nf63 _1y2v1nf5x _1y2v1nf9n", i = "_14h93mq9 _1y2v1nf5j _1y2v1nf5p _1y2v1nf5u _1y2v1nf63", t = "_14h93mqb _1y2v1nf5j _1y2v1nf5o", h = "_14h93mq7 _1y2v1nf5o _1y2v1nf9b", o = "_14h93mqh _1y2v1nf5k", q = {
     stepperMinHeight: "var(--_14h93mq0)"
 };

package/dist/switch-component.css-mistica.js

@@ -9,32 +9,32 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    ballVariants: ()=>n,
-    barVariants: ()=>v,
-    checkboxVariants: ()=>p,
-    container: ()=>f,
-    disabled: ()=>q,
+    ballVariants: ()=>h,
+    barVariants: ()=>q,
+    checkboxVariants: ()=>v,
+    container: ()=>p,
+    disabled: ()=>f,
     switchCheckboxContainerVariants: ()=>y,
     switchCheckboxLabel: ()=>_
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./switch-component.css.ts.vanilla.js");
-var n = {
-    default: "q0hp3as q0hp3aq q0hp3ap _1y2v1nf5e _1y2v1nfaw _1y2v1nf5k _1y2v1nf9h",
-    ios: "q0hp3at q0hp3ar q0hp3ap _1y2v1nf5e _1y2v1nfaw _1y2v1nf5k _1y2v1nf9h",
-    checked: "q0hp3au q0hp3aq q0hp3ap _1y2v1nf5e _1y2v1nfaw _1y2v1nf5k _1y2v1nf9h",
-    checkedIos: "q0hp3av q0hp3ar q0hp3ap _1y2v1nf5e _1y2v1nfaw _1y2v1nf5k _1y2v1nf9h"
+var h = {
+    default: "q0hp3as q0hp3aq q0hp3ap _1y2v1nf5k _1y2v1nfbc _1y2v1nf5q _1y2v1nf9n",
+    ios: "q0hp3at q0hp3ar q0hp3ap _1y2v1nf5k _1y2v1nfbc _1y2v1nf5q _1y2v1nf9n",
+    checked: "q0hp3au q0hp3aq q0hp3ap _1y2v1nf5k _1y2v1nfbc _1y2v1nf5q _1y2v1nf9n",
+    checkedIos: "q0hp3av q0hp3ar q0hp3ap _1y2v1nf5k _1y2v1nfbc _1y2v1nf5q _1y2v1nf9n"
+}, q = {
+    default: "q0hp3ai q0hp3ah _1y2v1nf5q",
+    ios: "q0hp3aj q0hp3ah _1y2v1nf5q",
+    checked: "q0hp3ak q0hp3ah _1y2v1nf5q",
+    checkedIos: "q0hp3al q0hp3ah _1y2v1nf5q"
 }, v = {
-    default: "q0hp3ai q0hp3ah _1y2v1nf5k",
-    ios: "q0hp3aj q0hp3ah _1y2v1nf5k",
-    checked: "q0hp3ak q0hp3ah _1y2v1nf5k",
-    checkedIos: "q0hp3al q0hp3ah _1y2v1nf5k"
-}, p = {
-    default: "q0hp3a6 _1y2v1nf5m _1y2v1nf9n",
-    ios: "q0hp3a7 _1y2v1nf5m _1y2v1nf9n",
-    disabled: "q0hp3a8 _1y2v1nf5m _1y2v1nf9n",
-    disabledIos: "q0hp3a9 _1y2v1nf5m _1y2v1nf9n"
-}, f = "q0hp3am", q = "q0hp3an", y = {
-    default: "q0hp3ac q0hp3ab _1y2v1nf5d",
-    ios: "q0hp3ad q0hp3ab _1y2v1nf5d"
-}, _ = "q0hp3af _1y2v1nf5k _1y2v1nf9o";
+    default: "q0hp3a6 _1y2v1nf5s _1y2v1nfa3",
+    ios: "q0hp3a7 _1y2v1nf5s _1y2v1nfa3",
+    disabled: "q0hp3a8 _1y2v1nf5s _1y2v1nfa3",
+    disabledIos: "q0hp3a9 _1y2v1nf5s _1y2v1nfa3"
+}, p = "q0hp3am", f = "q0hp3an", y = {
+    default: "q0hp3ac q0hp3ab _1y2v1nf5j",
+    ios: "q0hp3ad q0hp3ab _1y2v1nf5j"
+}, _ = "q0hp3af _1y2v1nf5q _1y2v1nfa4";

package/dist/tabs.css-mistica.js

@@ -13,20 +13,20 @@ _export(exports, {
     icon: ()=>y,
     inner: ()=>_,
     outer: ()=>a,
-    outerBorder: ()=>o,
-    tabSelectionVariants: ()=>e,
-    tabVariants: ()=>r,
-    tabWithIcon: ()=>g,
-    tabsContainer: ()=>t
+    outerBorder: ()=>m,
+    tabSelectionVariants: ()=>o,
+    tabVariants: ()=>t,
+    tabWithIcon: ()=>r,
+    tabsContainer: ()=>e
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./tabs.css.ts.vanilla.js");
-var v = "_1y2v1nf5h _1y2v1nf5e _1y2v1nfa4 _1y2v1nfaw _1y2v1nf87 _1y2v1nf3n", y = "lgofm1m", _ = "lgofm14 _1y2v1nf5e _1y2v1nfa4 _1y2v1nfai _1y2v1nf8j", a = "lgofm12 _1y2v1nf8g _1y2v1nf5d _1y2v1nf9o", o = "lgofm10", e = {
-    noSelected: "_1y2v1nf1q",
-    selected: "_1y2v1nf1o lgofm1h",
-    selectedAnimating: "_1y2v1nf1o lgofm1i"
-}, r = {
-    default: "lgofm17 _1y2v1nf5j _1y2v1nf5x _1y2v1nf5r _1y2v1nf72 _1y2v1nf7g _1y2v1nf8g _1y2v1nf5c lgofm18",
-    tabs2: "lgofm17 _1y2v1nf5j _1y2v1nf5x _1y2v1nf5r _1y2v1nf72 _1y2v1nf7g _1y2v1nf8g _1y2v1nf5c lgofm19",
-    tabs3: "lgofm17 _1y2v1nf5j _1y2v1nf5x _1y2v1nf5r _1y2v1nf72 _1y2v1nf7g _1y2v1nf8g _1y2v1nf5c lgofm1a"
-}, g = "lgofm1e", t = "_1y2v1nf8g _1y2v1nf5i";
+var v = "_1y2v1nf5n _1y2v1nf5k _1y2v1nfak _1y2v1nfbc _1y2v1nf8d _1y2v1nf3s", y = "lgofm1m", _ = "lgofm14 _1y2v1nf5k _1y2v1nfak _1y2v1nfay _1y2v1nf8p", a = "lgofm12 _1y2v1nf8m _1y2v1nf5j _1y2v1nfa4", m = "lgofm10", o = {
+    noSelected: "_1y2v1nf1t",
+    selected: "_1y2v1nf1r lgofm1h",
+    selectedAnimating: "_1y2v1nf1r lgofm1i"
+}, t = {
+    default: "lgofm17 _1y2v1nf5p _1y2v1nf63 _1y2v1nf5x _1y2v1nf78 _1y2v1nf7m _1y2v1nf8m _1y2v1nf5i lgofm18",
+    tabs2: "lgofm17 _1y2v1nf5p _1y2v1nf63 _1y2v1nf5x _1y2v1nf78 _1y2v1nf7m _1y2v1nf8m _1y2v1nf5i lgofm19",
+    tabs3: "lgofm17 _1y2v1nf5p _1y2v1nf63 _1y2v1nf5x _1y2v1nf78 _1y2v1nf7m _1y2v1nf8m _1y2v1nf5i lgofm1a"
+}, r = "lgofm1e", e = "_1y2v1nf8m _1y2v1nf5o";

package/dist/tag.css-mistica.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "tag", {
     enumerable: true,
-    get: ()=>n
+    get: ()=>_
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./tag.css.ts.vanilla.js");
-var n = "_1wy08671 _1y2v1nf67 _1y2v1nf6l _1y2v1nf5j _1y2v1nf5n _1y2v1nf5x _1y2v1nf5r _1y2v1nf8v _1y2v1nf7f";
+var _ = "_1wy08671 _1y2v1nf6d _1y2v1nf6r _1y2v1nf5p _1y2v1nf5t _1y2v1nf63 _1y2v1nf5x _1y2v1nf91 _1y2v1nf7l";

package/dist/tag.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>R
+    get: ()=>N
 });
 const _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
 const _textJs = require("./text.js");
@@ -73,10 +73,10 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-const { colors: r  } = _skinContractCssMisticaJs.vars, R = (param)=>{
-    let { Icon: o , children: i , dataAttributes: m , type: c = "promo"  } = param;
-    const s = (0, _themeVariantContextJs.useIsInverseVariant)();
-    if (!i) return null;
+const { colors: r  } = _skinContractCssMisticaJs.vars, N = (param)=>{
+    let { Icon: o , children: s , dataAttributes: c , type: l = "promo"  } = param;
+    const t = (0, _themeVariantContextJs.useThemeVariant)(), i = t === "inverse";
+    if (!s) return null;
     const g = {
         promo: [
             r.promoHigh,
@@ -91,7 +91,7 @@ const { colors: r  } = _skinContractCssMisticaJs.vars, R = (param)=>{
         inactive: [
             r.neutralMedium,
             r.neutralMediumInverse,
-            r.neutralLow
+            t === "alternative" ? r.neutralLowAlternative : r.neutralLow
         ],
         success: [
             r.successHigh,
@@ -108,17 +108,17 @@ const { colors: r  } = _skinContractCssMisticaJs.vars, R = (param)=>{
             r.errorHighInverse,
             r.errorLow
         ]
-    }, [n, t, l] = g[c];
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("span", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(m, "Tag")), {
+    }, [n, a, p] = g[l];
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("span", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(c, "Tag")), {
         className: (0, _classnames.default)(_tagCssMisticaJs.tag, (0, _sprinklesCssMisticaJs.sprinkles)({
             paddingLeft: o ? 8 : 12,
-            background: s ? r.inverse : l
+            background: i ? r.inverse : p
         })),
         children: [
             o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingRight: 4,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(o, {
-                    color: s ? t : n,
+                    color: i ? a : n,
                     size: (0, _cssJs.pxToRem)(16),
                     className: (0, _sprinklesCssMisticaJs.sprinkles)({
                         display: "block"
@@ -128,12 +128,12 @@ const { colors: r  } = _skinContractCssMisticaJs.vars, R = (param)=>{
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
                 isInverse: !1,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text, {
-                    color: s ? t : n,
+                    color: i ? a : n,
                     size: 14,
                     lineHeight: 20,
                     weight: "medium",
                     truncate: !0,
-                    children: i
+                    children: s
                 })
             })
         ]

package/dist/text-field-base.css-mistica.js

@@ -10,22 +10,22 @@ function _export(target, all) {
 }
 _export(exports, {
     endIcon: ()=>n,
-    fullWidth: ()=>t,
-    input: ()=>e,
-    inputFirefoxStyles: ()=>f,
-    inputWithLabel: ()=>r,
+    fullWidth: ()=>r,
+    input: ()=>t,
+    inputFirefoxStyles: ()=>e,
+    inputWithLabel: ()=>f,
     inputWithoutLabel: ()=>_,
     menuItem: ()=>a,
     menuItemSelected: ()=>h,
     prefix: ()=>i,
     prefixWithLabel: ()=>o,
     prefixWithoutLabel: ()=>l,
-    startIcon: ()=>p,
-    suggestionsContainer: ()=>x,
-    textArea: ()=>u,
-    textAreaWithLabel: ()=>b,
-    textAreaWithoutLabel: ()=>m
+    startIcon: ()=>u,
+    suggestionsContainer: ()=>p,
+    textArea: ()=>b,
+    textAreaWithLabel: ()=>m,
+    textAreaWithoutLabel: ()=>x
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./text-field-base.css.ts.vanilla.js");
-var n = "rhey4tf _1y2v1nf70 _1y2v1nf7g _1y2v1nf5i _1y2v1nf5x", t = "rhey4t4", e = "rhey4ta _1y2v1nf5d _1y2v1nf85 rhey4t1 _1y2v1nf9g _1y2v1nf8l _1y2v1nf1o _1y2v1nf7p", f = "rhey4tb", r = "rhey4tc", _ = "_1y2v1nf6a _1y2v1nf6o", a = "rhey4to _1y2v1nf8f _1y2v1nf5i _1y2v1nf5x _1y2v1nf9n", h = "_1y2v1nf2w", i = "rhey4tj _1y2v1nf71 _1y2v1nf7g", o = "rhey4tl _1y2v1nf6m", l = "_1y2v1nf6a _1y2v1nf6o", p = "rhey4th _1y2v1nf71 _1y2v1nf7f _1y2v1nf5i _1y2v1nf5x _1y2v1nf85 _1y2v1nf5e", x = "rhey4tr _1y2v1nf5e", u = "rhey4t6 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b rhey4t1 _1y2v1nf9g _1y2v1nf8l _1y2v1nf1o _1y2v1nf7p", b = "rhey4t7", m = "rhey4t8";
+var n = "rhey4tf _1y2v1nf76 _1y2v1nf7m _1y2v1nf5o _1y2v1nf63", r = "rhey4t4", t = "rhey4ta _1y2v1nf5j _1y2v1nf8b rhey4t1 _1y2v1nf9m _1y2v1nf8r _1y2v1nf1r _1y2v1nf7v", e = "rhey4tb", f = "rhey4tc", _ = "_1y2v1nf6g _1y2v1nf6u", a = "rhey4to _1y2v1nf8l _1y2v1nf5o _1y2v1nf63 _1y2v1nfa3", h = "_1y2v1nf31", i = "rhey4tj _1y2v1nf77 _1y2v1nf7m", o = "rhey4tl _1y2v1nf6s", l = "_1y2v1nf6g _1y2v1nf6u", u = "rhey4th _1y2v1nf77 _1y2v1nf7l _1y2v1nf5o _1y2v1nf63 _1y2v1nf8b _1y2v1nf5k", p = "rhey4tr _1y2v1nf5k", b = "rhey4t6 _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h rhey4t1 _1y2v1nf9m _1y2v1nf8r _1y2v1nf1r _1y2v1nf7v", m = "rhey4t7", x = "rhey4t8";

package/dist/text-field-base.js

@@ -148,7 +148,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     return target;
 }
 const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
-    var { error: c , helperText: A , label: n , inputProps: g , inputRef: y , defaultValue: o , value: t , onFocus: u , onBlur: p , inputComponent: f , prefix: m , startIcon: e , endIcon: a , endIconOverlay: x , shrinkLabel: H , multiline: L = !1 , focus: C , fieldRef: K , maxLength: S , id: M , autoComplete: G , fullWidth: J  } = _param, r = _objectWithoutProperties(_param, [
+    var { error: c , helperText: A , label: n , inputProps: g , inputRef: y , defaultValue: o , value: t , onFocus: u , onBlur: p , inputComponent: h , prefix: m , startIcon: e , endIcon: a , endIconOverlay: x , shrinkLabel: H , multiline: L = !1 , focus: C , fieldRef: K , maxLength: S , id: M , autoComplete: G , fullWidth: J  } = _param, r = _objectWithoutProperties(_param, [
         "error",
         "helperText",
         "label",
@@ -173,13 +173,13 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
         "fullWidth"
     ]);
     var q;
-    const F = (0, _hooksJs.useAriaId)(M), [h, d] = _react.useState((o == null ? void 0 : o.length) || (t == null ? void 0 : t.length) ? "filled" : "default"), { isTabletOrSmaller: U  } = (0, _hooksJs.useScreenSize)(), [X, N] = _react.useState((q = o == null ? void 0 : o.length) != null ? q : 0), E = !!n || !r.required, w = (0, _hooksJs.useTheme)(), P = H || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, [Y, Z] = _react.useState("baseline");
+    const F = (0, _hooksJs.useAriaId)(M), [f, d] = _react.useState((o == null ? void 0 : o.length) || (t == null ? void 0 : t.length) ? "filled" : "default"), { isTabletOrSmaller: U  } = (0, _hooksJs.useScreenSize)(), [X, N] = _react.useState((q = o == null ? void 0 : o.length) != null ? q : 0), E = !!n || !r.required, w = (0, _hooksJs.useTheme)(), P = H || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, [Y, Z] = _react.useState("baseline");
     (0, _hooksJs.useIsomorphicLayoutEffect)(()=>{
         (0, _platformJs.isSafari)() && Z("initial");
     }, []), _react.useEffect(()=>{
-        h !== "focused" && (t == null ? void 0 : t.length) && (N(t.length), d("filled")), C && d("focused"), C === !1 && !(t != null && t.length) && d("default"), C === !1 && (t == null ? void 0 : t.length) && d("filled");
+        f !== "focused" && (t == null ? void 0 : t.length) && (N(t.length), d("filled")), C && d("focused"), C === !1 && !(t != null && t.length) && d("default"), C === !1 && (t == null ? void 0 : t.length) && d("filled");
     }, [
-        h,
+        f,
         t,
         C
     ]), _react.useEffect(()=>{
@@ -187,14 +187,14 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
     }, [
         r.autoFocus
     ]);
-    const v = L ? "textarea" : "input", $ = f ? {
+    const v = L ? "textarea" : "input", $ = h ? {
         inputRef: y
     } : {
         ref: (0, _commonJs.combineRefs)(Q, y)
     }, b = _objectSpread(_objectSpreadProps(_objectSpread({}, r), {
         maxLength: S,
         autoComplete: G
-    }), g), k = P || h === "focused" || h === "filled", V = k ? U ? _textFieldComponentsCssMisticaJs.LABEL_SCALE_MOBILE : _textFieldComponentsCssMisticaJs.LABEL_SCALE_DESKTOP : 1, ee = {
+    }), g), k = P || f === "focused" || f === "filled", V = k ? U ? _textFieldComponentsCssMisticaJs.LABEL_SCALE_MOBILE : _textFieldComponentsCssMisticaJs.LABEL_SCALE_DESKTOP : 1, ee = {
         left: e ? 48 : _textFieldComponentsCssMisticaJs.LABEL_LEFT_POSITION,
         width: `calc(((100% - ${_textFieldComponentsCssMisticaJs.LABEL_LEFT_POSITION + (e ? 48 : _textFieldComponentsCssMisticaJs.LABEL_LEFT_POSITION)}px)) / ${V})`,
         paddingRight: a && !k ? 36 : 0
@@ -221,7 +221,7 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
             m && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 className: (0, _classnames.default)(_textFieldBaseCssMisticaJs.prefix, E ? _textFieldBaseCssMisticaJs.prefixWithLabel : _textFieldBaseCssMisticaJs.prefixWithoutLabel),
                 style: {
-                    opacity: h === "default" ? 0 : 1,
+                    opacity: f === "default" ? 0 : 1,
                     alignSelf: Y
                 },
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
@@ -239,7 +239,7 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                     as: "div",
                     regular: !0,
-                    children: /*#__PURE__*/ _react.createElement(f || v, _objectSpread(_objectSpreadProps(_objectSpread({}, $, b), {
+                    children: /*#__PURE__*/ _react.createElement(h || v, _objectSpread(_objectSpreadProps(_objectSpread({}, $, b), {
                         id: F,
                         style: _objectSpreadProps(_objectSpread({}, b.style), {
                             fontFamily: te
@@ -255,7 +255,7 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
                         },
                         onChange: (l)=>{
                             var B;
-                            S === void 0 || l.target.value.length <= S ? (N(l.target.value.length), (B = b.onChange) == null || B.call(b, l)) : (l.stopPropagation(), l.preventDefault());
+                            S === void 0 || l.target.value.length <= S ? (N(l.target.value.length), l.target.value.length > 0 && f !== "focused" && d("filled"), (B = b.onChange) == null || B.call(b, l)) : (l.stopPropagation(), l.preventDefault());
                         },
                         defaultValue: o,
                         value: t
@@ -268,7 +268,7 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
                 style: ee,
                 error: c,
                 forId: F,
-                inputState: h,
+                inputState: f,
                 shrinkLabel: P,
                 optional: !r.required,
                 children: n
@@ -285,19 +285,19 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
         "getSuggestions",
         "id"
     ]);
-    const [y, o] = _react.useState([]), t = _react.useRef(null), { platformOverrides: u , texts: p  } = (0, _hooksJs.useTheme)(), f = (0, _hooksJs.useAriaId)(A), m = (0, _hooksJs.useAriaId)();
+    const [y, o] = _react.useState([]), t = _react.useRef(null), { platformOverrides: u , texts: p  } = (0, _hooksJs.useTheme)(), h = (0, _hooksJs.useAriaId)(A), m = (0, _hooksJs.useAriaId)();
     if (c && (n.value === void 0 || n.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
     return c ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_react.Suspense, {
         fallback: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(I, _objectSpreadProps(_objectSpread({}, n), {
             label: (0, _platformJs.isRunningAcceptanceTest)(u) ? "" : n.label,
             autoComplete: "off",
             ref: g,
-            id: f
+            id: h
         })),
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(Ne, {
             id: m,
             inputProps: _objectSpreadProps(_objectSpread({}, n), {
-                id: f,
+                id: h,
                 autoComplete: "off",
                 onChange: (e, param)=>{
                     let { newValue: a  } = param;
@@ -342,7 +342,7 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
                 }))
         })
     }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(I, _objectSpreadProps(_objectSpread({}, n), {
-        id: f,
+        id: h,
         ref: g
     }));
 });

package/dist/text-field-components.css-mistica.js

@@ -11,23 +11,23 @@ function _export(target, all) {
 _export(exports, {
     DEFAULT_WIDTH: ()=>_,
     LABEL_LEFT_POSITION: ()=>n,
-    LABEL_SCALE_DESKTOP: ()=>f,
-    LABEL_SCALE_MOBILE: ()=>a,
+    LABEL_SCALE_DESKTOP: ()=>a,
+    LABEL_SCALE_MOBILE: ()=>f,
     disabled: ()=>e,
-    field: ()=>i,
-    fieldContainer: ()=>y,
+    field: ()=>y,
+    fieldContainer: ()=>i,
     fieldMulti: ()=>l,
     fieldSingle: ()=>t,
-    fullWidth: ()=>k,
-    helperContainer: ()=>u,
-    helperText: ()=>d,
+    fullWidth: ()=>u,
+    helperContainer: ()=>k,
+    helperText: ()=>o,
     labelContainer: ()=>L,
-    labelText: ()=>o,
+    labelText: ()=>d,
     leftText: ()=>E,
     normalWidth: ()=>T,
     rightText: ()=>h,
-    shrinked: ()=>p
+    shrinked: ()=>A
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./text-field-components.css.ts.vanilla.js");
-var _ = 328, n = 12, f = 0.78, a = 0.75, e = "_15k6ur97", i = "_1y2v1nf9o _1y2v1nf9f _1y2v1nf5i _1y2v1nf9k _1y2v1nf5d", y = "_15k6ur96 _1y2v1nf5i _1y2v1nf5o", l = "_15k6ur9e", t = "_15k6ur9d _1y2v1nf8g", k = "_1y2v1nf7p", u = "_1y2v1nf71 _1y2v1nf7g _1y2v1nf5i", d = "_15k6ur9g", L = "_15k6ur91 _1y2v1nf5e _1y2v1nf9q _1y2v1nf8c _1y2v1nf5i _1y2v1nf5n _1y2v1nfa8", o = "_15k6ur93 _1y2v1nf9o _1y2v1nf61", E = "_15k6ur9h", T = "_15k6ur99 _1y2v1nf7p", h = "_15k6ur9i", p = "_15k6ur94";
+var _ = 328, n = 12, a = 0.78, f = 0.75, e = "_15k6ur97", y = "_1y2v1nfa4 _1y2v1nf9l _1y2v1nf5o _1y2v1nf9u _1y2v1nf5j", i = "_15k6ur96 _1y2v1nf5o _1y2v1nf5u", l = "_15k6ur9e", t = "_15k6ur9d _1y2v1nf8m", u = "_1y2v1nf7v", k = "_1y2v1nf77 _1y2v1nf7m _1y2v1nf5o", o = "_15k6ur9g", L = "_15k6ur91 _1y2v1nf5k _1y2v1nfa6 _1y2v1nf8i _1y2v1nf5o _1y2v1nf5t _1y2v1nfao", d = "_15k6ur93 _1y2v1nfa4 _1y2v1nf67", E = "_15k6ur9h", T = "_15k6ur99 _1y2v1nf7v", h = "_15k6ur9i", A = "_15k6ur94";

package/dist/text-link.css-mistica.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "variants", {
     enumerable: true,
-    get: ()=>v
+    get: ()=>r
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./text-link.css.ts.vanilla.js");
-var v = {
-    default: "_1m1n0pr1 _1y2v1nf7q _1y2v1nf5l _1y2v1nf9n _1y2v1nf1z",
-    inverseLight: "_1m1n0pr6 _1m1n0pr1 _1y2v1nf7q _1y2v1nf5l _1y2v1nf9n _1y2v1nf20",
-    inverseDark: "_1m1n0pr7 _1m1n0pr1 _1y2v1nf7q _1y2v1nf5l _1y2v1nf9n _1y2v1nf1z"
+var r = {
+    default: "_1m1n0pr1 _1y2v1nf7w _1y2v1nf5r _1y2v1nfa3 _1y2v1nf22",
+    inverseLight: "_1m1n0pr6 _1m1n0pr1 _1y2v1nf7w _1y2v1nf5r _1y2v1nfa3 _1y2v1nf23",
+    inverseDark: "_1m1n0pr7 _1m1n0pr1 _1y2v1nf7w _1y2v1nf5r _1y2v1nfa3 _1y2v1nf22"
 };

package/dist/theme-context-provider.js

@@ -9,8 +9,8 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    default: ()=>pt,
-    useIsOsDarkModeEnabled: ()=>U
+    default: ()=>bt,
+    useIsOsDarkModeEnabled: ()=>Y
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _dynamic = require("@vanilla-extract/dynamic");
@@ -28,6 +28,7 @@ const _aspectRatioSupportJs = require("./utils/aspect-ratio-support.js");
 const _analyticsJs = require("./utils/analytics.js");
 const _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 const _colorJs = require("./utils/color.js");
+const _defaultsJs = require("./skins/defaults.js");
 const _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -101,44 +102,22 @@ function _objectSpread(target) {
     }
     return target;
 }
-const Q = "(prefers-color-scheme: dark)", U = ()=>{
+const X = "(prefers-color-scheme: dark)", Y = ()=>{
     const [t, c] = _react.useState(!1);
     return (0, _hooksJs.useIsomorphicLayoutEffect)(()=>{
         if (!window.matchMedia) return;
-        const o = window.matchMedia(Q), i = ()=>{
+        const o = window.matchMedia(X), s = ()=>{
             c(o.matches);
         };
-        return o.addListener(i), i(), ()=>o.removeListener(i);
+        return o.addListener(s), s(), ()=>o.removeListener(s);
     }, []), t;
-}, X = ()=>(t)=>t, r = {
-    text5: {
-        weight: "light"
-    },
-    text6: {
-        weight: "light"
-    },
-    text7: {
-        weight: "light"
-    },
-    text8: {
-        weight: "light"
-    },
-    text9: {
-        weight: "light"
-    },
-    text10: {
-        weight: "light"
-    },
-    cardTitle: {
-        weight: "regular"
-    }
-}, Y = (t)=>({
+}, Z = ()=>(t)=>t, tt = (t)=>({
         headerMobileHeight: (t == null ? void 0 : t.headerMobileHeight) === "mistica" ? _themeJs.NAVBAR_HEIGHT_MOBILE : t == null ? void 0 : t.headerMobileHeight
-    }), pt = (param)=>{
+    }), bt = (param)=>{
     let { theme: t , children: c , as: o  } = param;
-    var v;
-    const i = _react.useRef(1), D = _react.useCallback(()=>`aria-id-hook-${i.current++}`, []), w = U(), u = (v = t.colorScheme) != null ? v : "auto", C = t.skin.colors, I = _objectSpread({}, t.skin.colors, t.skin.darkModeColors), f = u === "auto" && w || u === "dark", p = f ? I : C, g = _react.useMemo(()=>{
-        var s, n, d, x, m, h, P, M, b;
+    var b, P;
+    const s = _react.useRef(1), I = _react.useCallback(()=>`aria-id-hook-${s.current++}`, []), E = Y(), u = (b = t.colorScheme) != null ? b : "auto", R = t.skin.colors, A = _objectSpread({}, t.skin.colors, t.skin.darkModeColors), x = u === "auto" && E || u === "dark", p = x ? A : R, k = _react.useMemo(()=>{
+        var i, a, d, f, m, g, M, T, C;
         const l = _objectSpread({
             platform: (0, _platformJs.getPlatform)(),
             insideNovumNativeApp: (0, _platformJs.isInsideNovumNativeApp)()
@@ -152,59 +131,60 @@ const Q = "(prefers-color-scheme: dark)", U = ()=>{
                 logEvent: ()=>Promise.resolve(),
                 eventFormat: "universal-analytics"
             }, t.analytics),
-            dimensions: _objectSpread({}, _themeJs.dimensions, Y(t.dimensions)),
+            dimensions: _objectSpread({}, _themeJs.dimensions, tt(t.dimensions)),
             textPresets: {
-                text5: _objectSpread({}, r.text5, (s = t.skin.textPresets) == null ? void 0 : s.text5),
-                text6: _objectSpread({}, r.text6, (n = t.skin.textPresets) == null ? void 0 : n.text6),
-                text7: _objectSpread({}, r.text7, (d = t.skin.textPresets) == null ? void 0 : d.text7),
-                text8: _objectSpread({}, r.text8, (x = t.skin.textPresets) == null ? void 0 : x.text8),
-                text9: _objectSpread({}, r.text9, (m = t.skin.textPresets) == null ? void 0 : m.text9),
-                text10: _objectSpread({}, r.text10, (h = t.skin.textPresets) == null ? void 0 : h.text10),
-                cardTitle: _objectSpread({}, r.cardTitle, (P = t.skin.textPresets) == null ? void 0 : P.cardTitle)
+                text5: _objectSpread({}, _defaultsJs.defaultTextPresetsConfig.text5, (i = t.skin.textPresets) == null ? void 0 : i.text5),
+                text6: _objectSpread({}, _defaultsJs.defaultTextPresetsConfig.text6, (a = t.skin.textPresets) == null ? void 0 : a.text6),
+                text7: _objectSpread({}, _defaultsJs.defaultTextPresetsConfig.text7, (d = t.skin.textPresets) == null ? void 0 : d.text7),
+                text8: _objectSpread({}, _defaultsJs.defaultTextPresetsConfig.text8, (f = t.skin.textPresets) == null ? void 0 : f.text8),
+                text9: _objectSpread({}, _defaultsJs.defaultTextPresetsConfig.text9, (m = t.skin.textPresets) == null ? void 0 : m.text9),
+                text10: _objectSpread({}, _defaultsJs.defaultTextPresetsConfig.text10, (g = t.skin.textPresets) == null ? void 0 : g.text10),
+                cardTitle: _objectSpread({}, _defaultsJs.defaultTextPresetsConfig.cardTitle, (M = t.skin.textPresets) == null ? void 0 : M.cardTitle)
             },
-            Link: (M = t.Link) != null ? M : _themeJs.AnchorLink,
-            isDarkMode: f,
+            Link: (T = t.Link) != null ? T : _themeJs.AnchorLink,
+            isDarkMode: x,
             isIos: (0, _platformJs.getPlatform)(l) === "ios",
-            useHrefDecorator: (b = t.useHrefDecorator) != null ? b : X,
+            useHrefDecorator: (C = t.useHrefDecorator) != null ? C : Z,
             useId: t.useId
         };
     }, [
         t,
-        f
-    ]), E = Object.fromEntries(Object.entries(p).map((param)=>{
-        let [l, s] = param;
-        let n = "";
-        if (s.startsWith("#")) {
-            const [d, x, m] = (0, _colorJs.fromHexToRgb)(s);
-            n = `${d}, ${x}, ${m}`;
+        x
+    ]), H = Object.fromEntries(Object.entries(p).map((param)=>{
+        let [l, i] = param;
+        let a = "";
+        if (i.startsWith("#")) {
+            const [d, f, m] = (0, _colorJs.fromHexToRgb)(i);
+            a = `${d}, ${f}, ${m}`;
         }
         return [
             l,
-            n
+            a
         ];
-    })), k = (0, _dynamic.assignInlineVars)(_skinContractCssMisticaJs.vars, {
+    })), v = (0, _dynamic.assignInlineVars)(_skinContractCssMisticaJs.vars, {
         colors: p,
-        rawColors: E
+        rawColors: H,
+        borderRadii: (P = t.skin.borderRadii) != null ? P : _defaultsJs.defaultBorderRadiiConfig
     });
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_tabFocusJs.default, {
         disabled: !t.enableTabFocus,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_modalContextProviderJs.default, {
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeContextJs.default.Provider, {
-                value: g,
+                value: k,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_analyticsJs.TrackingConfig, {
-                    eventFormat: g.analytics.eventFormat,
+                    eventFormat: k.analytics.eventFormat,
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_aspectRatioSupportJs.AspectRatioSupportProvider, {
                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_documentVisibilityJs.DocumentVisibilityProvider, {
                             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_ariaIdGetterContextJs.default.Provider, {
-                                value: D,
+                                value: I,
                                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_screenSizeContextProviderJs.default, {
                                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_dialogJs.default, {
                                         children: o ? /*#__PURE__*/ _react.createElement(o, {
-                                            style: k
+                                            style: v
                                         }, c) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
                                             children: [
                                                 (process.env.NODE_ENV !== "test" || process.env.SSR_TEST) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("style", {
-                                                    children: `:root {${k}}`
+                                                    children: `:root {${v}}`
                                                 }),
                                                 c
                                             ]

package/dist/theme-variant-context.d.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
+export type Variant = 'default' | 'inverse' | 'alternative';
 type ThemeVariantProps = {
-    isInverse: boolean;
+    isInverse?: boolean;
+    variant?: Variant;
     children: React.ReactNode;
 };
 export declare const ThemeVariant: React.FC<ThemeVariantProps>;
+export declare const useThemeVariant: () => Variant;
 export declare const useIsInverseVariant: () => boolean;
 export {};

package/dist/theme-variant-context.js

@@ -9,8 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    ThemeVariant: ()=>n,
-    useIsInverseVariant: ()=>i
+    ThemeVariant: ()=>c,
+    useIsInverseVariant: ()=>u,
+    useThemeVariant: ()=>m
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
@@ -53,10 +54,10 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const t = /*#__PURE__*/ _react.createContext(!1), n = (param)=>/* @__PURE__ */ {
-    let { isInverse: r , children: s  } = param;
-    return (0, _jsxRuntimeJs.jsx)(t.Provider, {
-        value: !!r,
-        children: s
+const o = /*#__PURE__*/ _react.createContext("default"), c = (param)=>/* @__PURE__ */ {
+    let { isInverse: s , variant: e , children: r  } = param;
+    return (0, _jsxRuntimeJs.jsx)(o.Provider, {
+        value: e != null ? e : s ? "inverse" : "default",
+        children: r
     });
-}, i = ()=>_react.useContext(t);
+}, m = ()=>_react.useContext(o), u = ()=>m() === "inverse";