@telefonica/mistica 14.10.0 → 14.11.0

package/dist/image.js

@@ -11,9 +11,9 @@ function _export(target, all) {
 _export(exports, {
     ImageContent: ()=>q,
     ImageError: ()=>Z,
-    MediaBorderRadiusProvider: ()=>n1,
-    RATIO: ()=>x,
-    default: ()=>a1,
+    MediaBorderRadiusProvider: ()=>a1,
+    RATIO: ()=>k,
+    default: ()=>d1,
     useMediaBorderRadius: ()=>K
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
@@ -152,7 +152,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const I = /*#__PURE__*/ _react.createContext(!0), K = ()=>_react.useContext(I), n1 = (param)=>/* @__PURE__ */ {
+const I = /*#__PURE__*/ _react.createContext(!0), K = ()=>_react.useContext(I), a1 = (param)=>/* @__PURE__ */ {
     let { children: e , value: r  } = param;
     return (0, _jsxRuntimeJs.jsx)(I.Provider, {
         value: r,
@@ -172,9 +172,9 @@ const I = /*#__PURE__*/ _react.createContext(!0), K = ()=>_react.useContext(I),
             strokeWidth: "2"
         })
     });
-}, Z = /*#__PURE__*/ _react.forwardRef((param, a)=>{
-    let { noBorderRadius: e , withIcon: r = !0  } = param;
-    const o = (0, _themeVariantContextJs.useIsInverseVariant)(), { skinName: d  } = (0, _hooksJs.useTheme)();
+}, Z = /*#__PURE__*/ _react.forwardRef((param, n)=>{
+    let { noBorderRadius: e , withIcon: r = !0 , border: a  } = param;
+    const c = (0, _themeVariantContextJs.useIsInverseVariant)(), { skinName: d  } = (0, _hooksJs.useTheme)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
         style: {
             height: "100%",
@@ -182,10 +182,12 @@ const I = /*#__PURE__*/ _react.createContext(!0), K = ()=>_react.useContext(I),
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: o ? _skinContractCssMisticaJs.vars.colors.backgroundSkeletonInverse : _skinContractCssMisticaJs.vars.colors.backgroundSkeleton,
+            backgroundColor: c ? _skinContractCssMisticaJs.vars.colors.backgroundSkeletonInverse : _skinContractCssMisticaJs.vars.colors.backgroundSkeleton,
+            boxSizing: "border-box",
+            border: a ? `1px solid ${_skinContractCssMisticaJs.vars.colors.borderLow}` : "none",
             borderRadius: e ? void 0 : _skinContractCssMisticaJs.vars.borderRadii.container
         },
-        ref: a,
+        ref: n,
         children: r ? d === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(U, {
             style: {
                 width: "10%",
@@ -201,18 +203,18 @@ const I = /*#__PURE__*/ _react.createContext(!0), K = ()=>_react.useContext(I),
                 maxWidth: 48
             },
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
-                fill: o ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.neutralMedium,
+                fill: c ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.neutralMedium,
                 d: "M20.25 4.622c.832 0 1.591.664 1.591 1.393v11.98c0 .728-.76 1.392-1.591 1.392H3.746c-.863 0-1.591-.639-1.591-1.392V6.015c0-.754.728-1.393 1.59-1.393H20.25zm0 13.558c.193 0 .367-.146.39-.207l-.003-11.956a.555.555 0 00-.384-.182H3.746c-.21 0-.364.132-.387.19v11.973c.014.044.171.182.387.182H20.25zM6.152 9.068c0 .554.451 1.005 1.003 1.005a1.006 1.006 0 000-2.01c-.552 0-1.003.45-1.003 1.005zm1.003 2.215a2.216 2.216 0 010-4.43c1.218 0 2.207.993 2.207 2.215a2.213 2.213 0 01-2.207 2.215zm12.42 1.337l-3.18-2.44a.605.605 0 00-.742.005l-3.636 2.9-.879-.83a.6.6 0 00-.798-.025l-5.168 4.317a.607.607 0 00.386 1.07.59.59 0 00.384-.14l4.759-3.975 3.308 3.123c.241.23.625.221.852-.025a.605.605 0 00-.026-.854l-1.932-1.824 3.131-2.496 2.807 2.154a.603.603 0 00.846-.112.609.609 0 00-.112-.848z"
             })
         }) : void 0
     });
-}), x = {
+}), k = {
     "1:1": 1,
     "16:9": 16 / 9,
     "7:10": 7 / 10,
     "4:3": 4 / 3
-}, q = /*#__PURE__*/ _react.forwardRef((_param, p)=>{
-    var { aspectRatio: e = "1:1" , alt: r = "" , dataAttributes: a , noBorderRadius: o , src: d , onError: l , onLoad: c , loadingFallback: y = !0 , errorFallback: R = !0  } = _param, n = _objectWithoutProperties(_param, [
+}, q = /*#__PURE__*/ _react.forwardRef((_param, S)=>{
+    var { aspectRatio: e = "1:1" , alt: r = "" , dataAttributes: a , noBorderRadius: n , src: c , onError: d , onLoad: l , loadingFallback: y = !0 , errorFallback: R = !0  } = _param, s = _objectWithoutProperties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",
@@ -223,33 +225,36 @@ const I = /*#__PURE__*/ _react.createContext(!0), K = ()=>_react.useContext(I),
         "loadingFallback",
         "errorFallback"
     ]);
-    const C = _react.useRef(), S = K(), m = o != null ? o : !S, [f, g] = _react.useState(!1), [M, b] = _react.useState(!0), [F, v] = _react.useState(!1), h = typeof e == "number" ? e : x[e], w = y && !!(h !== 0 || n.width && n.height), H = R && !!(h !== 0 || n.width && n.height), u = _react.useCallback(()=>{
+    const C = _react.useRef(), p = K(), z = s.border ? `1px solid ${_skinContractCssMisticaJs.vars.colors.borderLow}` : "none", m = n != null ? n : !p, [f, g] = _react.useState(!1), [M, b] = _react.useState(!0), [F, v] = _react.useState(!1), h = typeof e == "number" ? e : k[e], w = y && !!(h !== 0 || s.width && s.height), H = R && !!(h !== 0 || s.width && s.height), u = _react.useCallback(()=>{
         g(!1), b(!1), setTimeout(()=>{
             v(!0);
-        }, _imageCssMisticaJs.FADE_IN_DURATION_MS), c == null || c();
+        }, _imageCssMisticaJs.FADE_IN_DURATION_MS), l == null || l();
     }, [
-        c
-    ]), z = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(a)), {
-        style: _objectSpread({}, M && w ? {
+        l
+    ]), L = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(a)), {
+        style: _objectSpreadProps(_objectSpread({}, M && w ? {
             opacity: 0
         } : {
             opacity: 1
+        }), {
+            boxSizing: "border-box",
+            border: z
         }),
-        ref: (0, _commonJs.combineRefs)(C, p),
-        src: d,
+        ref: (0, _commonJs.combineRefs)(C, S),
+        src: c,
         className: (0, _classnames.default)(_imageCssMisticaJs.image, (0, _sprinklesCssMisticaJs.sprinkles)({
             position: h !== 0 ? "absolute" : "static",
             borderRadius: m ? void 0 : _skinContractCssMisticaJs.vars.borderRadii.container
         })),
         alt: r,
         onError: ()=>{
-            g(!0), b(!1), v(!0), l == null || l();
+            g(!0), b(!1), v(!0), d == null || d();
         },
         onLoad: u
     }));
     return _react.useEffect(()=>{
-        var k;
-        (k = C.current) != null && k.complete && u();
+        var x;
+        (x = C.current) != null && x.complete && u();
     }, [
         u
     ]), /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
@@ -261,8 +266,8 @@ const I = /*#__PURE__*/ _react.createContext(!0), K = ()=>_react.useContext(I),
                     height: "100%"
                 },
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_skeletonsJs.SkeletonRectangle, {
-                    width: n.width,
-                    height: n.height,
+                    width: s.width,
+                    height: s.height,
                     noBorderRadius: m
                 })
             }),
@@ -270,25 +275,27 @@ const I = /*#__PURE__*/ _react.createContext(!0), K = ()=>_react.useContext(I),
                 style: {
                     position: "absolute",
                     width: "100%",
-                    height: "100%"
+                    height: "100%",
+                    zIndex: 1
                 },
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(Z, {
-                    noBorderRadius: m
+                    noBorderRadius: m,
+                    border: s.border
                 })
             }),
-            !f && z
+            !f && L
         ]
     });
-}), a1 = /*#__PURE__*/ _react.forwardRef((_param, a)=>{
+}), d1 = /*#__PURE__*/ _react.forwardRef((_param, a)=>{
     var { aspectRatio: e = "1:1"  } = _param, r = _objectWithoutProperties(_param, [
         "aspectRatio"
     ]);
-    const o = typeof e == "number" ? e : x[e];
+    const n = typeof e == "number" ? e : k[e];
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_aspectRatioSupportJs.AspectRatioElement, {
         style: {
             position: "relative"
         },
-        aspectRatio: o,
+        aspectRatio: n,
         width: r.width,
         height: r.height,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(q, _objectSpreadProps(_objectSpread({

package/dist/index.d.ts

@@ -70,6 +70,8 @@ export { default as Image } from './image';
 export { default as Chip } from './chip';
 export { default as Video } from './video';
 export { Carousel, CenteredCarousel, Slideshow, PageBullets } from './carousel';
+export { Grid, GridItem } from './grid';
+export { default as StackingGroup } from './stacking-group';
 export { default as Form } from './form';
 export { default as Select } from './select';
 export { default as TextField } from './text-field';

package/dist/index.js

@@ -52,6 +52,8 @@ _export(exports, {
     FocusTrap: ()=>_focusTrapJs.default,
     Form: ()=>_formJs.default,
     FunnelNavigationBar: ()=>_navigationBarJs.FunnelNavigationBar,
+    Grid: ()=>_gridJs.Grid,
+    GridItem: ()=>_gridJs.GridItem,
     GridLayout: ()=>_gridLayoutJs.default,
     Header: ()=>_headerJs.Header,
     HeaderLayout: ()=>_headerJs.HeaderLayout,
@@ -1764,6 +1766,7 @@ _export(exports, {
     SnapCard: ()=>_cardJs.SnapCard,
     Spinner: ()=>_spinnerJs.default,
     Stack: ()=>_stackJs.default,
+    StackingGroup: ()=>_stackingGroupJs.default,
     Stepper: ()=>_stepperJs.default,
     SuccessFeedback: ()=>_feedbackJs.SuccessFeedback,
     SuccessFeedbackScreen: ()=>_feedbackJs.SuccessFeedbackScreen,
@@ -1902,6 +1905,8 @@ const _imageJs = /*#__PURE__*/ _interopRequireDefault(require("./image.js"));
 const _chipJs = /*#__PURE__*/ _interopRequireDefault(require("./chip.js"));
 const _videoJs = /*#__PURE__*/ _interopRequireDefault(require("./video.js"));
 const _carouselJs = require("./carousel.js");
+const _gridJs = require("./grid.js");
+const _stackingGroupJs = /*#__PURE__*/ _interopRequireDefault(require("./stacking-group.js"));
 const _formJs = /*#__PURE__*/ _interopRequireDefault(require("./form.js"));
 const _selectJs = /*#__PURE__*/ _interopRequireDefault(require("./select.js"));
 const _textFieldJs = /*#__PURE__*/ _interopRequireDefault(require("./text-field.js"));

package/dist/list.css-mistica.js

@@ -16,14 +16,14 @@ _export(exports, {
     disabled: ()=>a,
     dualActionContainer: ()=>o,
     dualActionDivider: ()=>t,
-    dualActionLeft: ()=>d,
-    dualActionRight: ()=>i,
-    hoverBackground: ()=>e,
-    pointer: ()=>u,
+    dualActionLeft: ()=>i,
+    dualActionRight: ()=>e,
+    hoverBackground: ()=>d,
+    pointer: ()=>j,
     right: ()=>b,
-    rowBody: ()=>g,
-    rowContent: ()=>j
+    rowBody: ()=>u,
+    rowContent: ()=>c
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./list.css.ts.vanilla.js");
-var _ = "_1y2v1nf5q _1y2v1nf68 _1y2v1nf6a", y = "_1y2v1nf5z _1y2v1nf8y _1y2v1nf8d _1y2v1nf68", f = "_1y2v1nf5q _1y2v1nf65", r = "_1y2v1nf5q _1y2v1nf7x _1y2v1nf9j", a = "_2buj9g0", o = "_1y2v1nf5q _1y2v1nf5v", t = "_2buj9gi _1y2v1nf5q", d = "_1y2v1nf6d _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf5s _1y2v1nf9o _1y2v1nf5k _1y2v1nf7a _1y2v1nf7o _1y2v1nf6b", i = "_2buj9gk _1y2v1nf6d _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf5s _1y2v1nf9o _1y2v1nf5k _1y2v1nf7a _1y2v1nf7o _1y2v1nf5q _1y2v1nf65 _1y2v1nf6a _1y2v1nf7y", e = "_2buj9g1", u = "_1y2v1nfa5", b = "_2buj9gb", g = "_1y2v1nf5q _1y2v1nf5w _1y2v1nf6c", j = "_1y2v1nf6d _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x _1y2v1nf9o _1y2v1nf5k";
+var _ = "_1y2v1nf64 _1y2v1nf6m _1y2v1nf6o", y = "_1y2v1nf6d _1y2v1nf9c _1y2v1nf8r _1y2v1nf6m", f = "_1y2v1nf64 _1y2v1nf6j", r = "_1y2v1nf64 _1y2v1nf8b _1y2v1nf9x", a = "_2buj9g0", o = "_1y2v1nf64 _1y2v1nf69", t = "_2buj9gi _1y2v1nf64", i = "_1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x _1y2v1nf66 _1y2v1nfa2 _1y2v1nf5y _1y2v1nf7o _1y2v1nf82 _1y2v1nf6p", e = "_2buj9gk _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x _1y2v1nf66 _1y2v1nfa2 _1y2v1nf5y _1y2v1nf7o _1y2v1nf82 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6o _1y2v1nf8c", d = "_2buj9g1", j = "_1y2v1nfaj", b = "_2buj9gb", u = "_1y2v1nf64 _1y2v1nf6a _1y2v1nf6q", c = "_1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x _1y2v1nf8b _1y2v1nfa2 _1y2v1nf5y";

package/dist/loading-bar.css-mistica.js

@@ -9,16 +9,16 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TRANSITION_DURATION_MS: ()=>r,
+    TRANSITION_DURATION_MS: ()=>v,
     enter: ()=>_,
-    enterActive: ()=>a,
-    exit: ()=>e,
+    enterActive: ()=>e,
+    exit: ()=>a,
     exitActive: ()=>f,
     innerProgress: ()=>y,
-    portal: ()=>g,
-    progress: ()=>m,
-    progressContainer: ()=>t
+    portal: ()=>t,
+    progress: ()=>g,
+    progressContainer: ()=>m
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./loading-bar.css.ts.vanilla.js");
-var r = 400, _ = "_1num3qg9", a = "_1num3qga", e = "_1num3qgb", f = "_1num3qgc", y = "_1num3qg8 _1y2v1nf8d", g = "_1num3qg3 _1y2v1nf5n _1y2v1nfa8 _1y2v1nfam _1y2v1nfb0", m = "_1num3qg6 _1y2v1nf5m _1y2v1nf8d _1y2v1nf7x", t = "_1y2v1nf7x _1y2v1nfa6 _1y2v1nf5l _1y2v1nf3x _1y2v1nf8g";
+var v = 400, _ = "_1num3qg9", e = "_1num3qga", a = "_1num3qgb", f = "_1num3qgc", y = "_1num3qg8 _1y2v1nf8r", t = "_1num3qg3 _1y2v1nf61 _1y2v1nfam _1y2v1nfb0 _1y2v1nfbe", g = "_1num3qg6 _1y2v1nf60 _1y2v1nf8r _1y2v1nf8b", m = "_1y2v1nf8b _1y2v1nfak _1y2v1nf5z _1y2v1nf48 _1y2v1nf8u";

package/dist/maybe-dismissable.css-mistica.js

@@ -9,10 +9,10 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    dismissableButton: ()=>f,
-    dismissableCircleContainer: ()=>y,
+    dismissableButton: ()=>y,
+    dismissableCircleContainer: ()=>f,
     dismissableContainer: ()=>_
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./maybe-dismissable.css.ts.vanilla.js");
-var f = "cim30m2 _1y2v1nf5m _1y2v1nfa8 _1y2v1nfb0 _1y2v1nf88 _1y2v1nf8n _1y2v1nf5q _1y2v1nf65 _1y2v1nf5z", y = "cim30m4 _1y2v1nf5q _1y2v1nf65 _1y2v1nf5z _1y2v1nf85 _1y2v1nf8k _1y2v1nf9p", _ = "_1y2v1nf5l _1y2v1nf5q _1y2v1nf68";
+var y = "cim30m2 _1y2v1nf60 _1y2v1nfam _1y2v1nfbe _1y2v1nf8m _1y2v1nf91 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d", f = "cim30m4 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nf8j _1y2v1nf8y _1y2v1nfa3", _ = "_1y2v1nf5z _1y2v1nf64 _1y2v1nf6m";

package/dist/menu.css-mistica.js

@@ -16,7 +16,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./menu.css.ts.vanilla.js");
-var k = "_2k0k3u9", _ = "_2k0k3u7 _1y2v1nf6d _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf2u _1y2v1nf9x _1y2v1nf5q _1y2v1nf5w _1y2v1nf5m", a = "_2k0k3u8", n = {
+var k = "_2k0k3u9", _ = "_2k0k3u7 _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x _1y2v1nf31 _1y2v1nfab _1y2v1nf64 _1y2v1nf6a _1y2v1nf60", a = "_2k0k3u8", n = {
     top: "var(--_2k0k3u0)",
     bottom: "var(--_2k0k3u1)",
     left: "var(--_2k0k3u2)",

package/dist/navigation-bar.css-mistica.js

@@ -11,35 +11,35 @@ function _export(target, all) {
 _export(exports, {
     burgerIconContainer: ()=>y,
     burgerMenu: ()=>_,
-    burgerMenuEnter: ()=>r,
-    burgerMenuEnterActive: ()=>e,
+    burgerMenuEnter: ()=>e,
+    burgerMenuEnterActive: ()=>r,
     burgerMenuExit: ()=>f,
     burgerMenuExitActive: ()=>a,
-    iconButtonVariants: ()=>c,
-    iconCloseHidden: ()=>d,
+    iconButtonVariants: ()=>d,
+    iconCloseHidden: ()=>c,
     iconMenuHidden: ()=>i,
     lineHeightFix: ()=>t,
     logoContainer: ()=>z,
     navbarBorderColorVariants: ()=>o,
     section: ()=>u,
-    selectedSectionVariantes: ()=>s,
-    spacer: ()=>l,
-    textWrapperVariants: ()=>b,
+    selectedSectionVariantes: ()=>b,
+    spacer: ()=>s,
+    textWrapperVariants: ()=>l,
     topFixed: ()=>g
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./navigation-bar.css.ts.vanilla.js");
-var y = "_1vcy5dz1 _1y2v1nf5l _1y2v1nf85 _1y2v1nf8k", _ = "_1vcy5dzr _1y2v1nf5n _1y2v1nfai _1y2v1nfam _1y2v1nfb0 _1y2v1nf2t", r = "_1vcy5dzl", e = "_1vcy5dzm", f = "_1vcy5dzn", a = "_1vcy5dzo", c = {
-    default: "_1vcy5dzu _1y2v1nf1i",
-    inverse: "_1vcy5dzv _1y2v1nf1h"
-}, d = "_1vcy5dz4 _1vcy5dz3 _1y2v1nf5m", i = "_1vcy5dz5 _1vcy5dz3 _1y2v1nf5m", t = "_1vcy5dzw", z = "_1y2v1nf5q _1y2v1nf5z", o = {
-    default: "_1vcy5dza _1vcy5dz9 _1y2v1nf6i _1y2v1nf6w _1y2v1nf5q _1y2v1nf65 _1y2v1nf7x _1y2v1nf8r",
-    inverse: "_1vcy5dzb _1vcy5dz9 _1y2v1nf6i _1y2v1nf6w _1y2v1nf5q _1y2v1nf65 _1y2v1nf7x _1y2v1nf8r",
-    menuOpen: "_1vcy5dzc _1vcy5dz9 _1y2v1nf6i _1y2v1nf6w _1y2v1nf5q _1y2v1nf65 _1y2v1nf7x _1y2v1nf8r"
-}, u = "_1vcy5dze _1y2v1nf78 _1y2v1nf7m _1y2v1nf8r _1y2v1nf5q _1y2v1nf65 _1y2v1nf9o _1y2v1nf5k", s = {
+var y = "_1vcy5dz1 _1y2v1nf5z _1y2v1nf8j _1y2v1nf8y", _ = "_1vcy5dzr _1y2v1nf61 _1y2v1nfaw _1y2v1nfb0 _1y2v1nfbe _1y2v1nf30", e = "_1vcy5dzl", r = "_1vcy5dzm", f = "_1vcy5dzn", a = "_1vcy5dzo", d = {
+    default: "_1vcy5dzu _1y2v1nf1m",
+    inverse: "_1vcy5dzv _1y2v1nf1l"
+}, c = "_1vcy5dz4 _1vcy5dz3 _1y2v1nf60", i = "_1vcy5dz5 _1vcy5dz3 _1y2v1nf60", t = "_1vcy5dzw", z = "_1y2v1nf64 _1y2v1nf6d", o = {
+    default: "_1vcy5dza _1vcy5dz9 _1y2v1nf6w _1y2v1nf7a _1y2v1nf64 _1y2v1nf6j _1y2v1nf8b _1y2v1nf95",
+    inverse: "_1vcy5dzb _1vcy5dz9 _1y2v1nf6w _1y2v1nf7a _1y2v1nf64 _1y2v1nf6j _1y2v1nf8b _1y2v1nf95",
+    menuOpen: "_1vcy5dzc _1vcy5dz9 _1y2v1nf6w _1y2v1nf7a _1y2v1nf64 _1y2v1nf6j _1y2v1nf8b _1y2v1nf95"
+}, u = "_1vcy5dze _1y2v1nf7m _1y2v1nf80 _1y2v1nf95 _1y2v1nf64 _1y2v1nf6j _1y2v1nfa2 _1y2v1nf5y", b = {
     default: "_1vcy5dzf",
     inverse: "_1vcy5dzg"
-}, l = "_1vcy5dzk _1y2v1nf8r", b = {
+}, s = "_1vcy5dzk _1y2v1nf95", l = {
     default: "_1vcy5dzh",
     inverse: "_1vcy5dzi"
-}, g = "_1vcy5dz7 _1y2v1nf5n _1y2v1nfa8 _1y2v1nfam _1y2v1nfb0";
+}, g = "_1vcy5dz7 _1y2v1nf61 _1y2v1nfam _1y2v1nfb0 _1y2v1nfbe";

package/dist/navigation-breadcrumbs.css-mistica.js

@@ -12,8 +12,8 @@ _export(exports, {
     current: ()=>v,
     link: ()=>f,
     list: ()=>i,
-    listItem: ()=>t
+    listItem: ()=>_
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./navigation-breadcrumbs.css.ts.vanilla.js");
-var v = "_1fniauj3", f = "_1fniauj2", i = "_1fniauj5 _1y2v1nf6d _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j", t = "_1y2v1nf5t";
+var v = "_1fniauj3", f = "_1fniauj2", i = "_1fniauj5 _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x", _ = "_1y2v1nf67";

package/dist/package-version.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
     enumerable: true,
     get: ()=>o
 });
-const o = "14.10.0";
+const o = "14.11.0";

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

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "shadow", {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./password-field.css.ts.vanilla.js");
-var f = "ptqylz1 _1y2v1nf6g _1y2v1nf6u _1y2v1nf78 _1y2v1nf7m _1y2v1nf9p _1y2v1nf5k";
+var f = "ptqylz1 _1y2v1nf6u _1y2v1nf78 _1y2v1nf7m _1y2v1nf80 _1y2v1nfa3 _1y2v1nf5y";

package/dist/popover.css-mistica.js

@@ -9,7 +9,7 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    arrow: ()=>a,
+    arrow: ()=>n,
     arrowSize: ()=>r,
     arrowWrapper: ()=>t,
     closeButtonIcon: ()=>_,
@@ -18,10 +18,10 @@ _export(exports, {
     defaultPositionMobile: ()=>i,
     distanceToTarget: ()=>y,
     marginLeftRightMobile: ()=>e,
-    maxWidthDesktop: ()=>u,
-    textAlign: ()=>g,
-    textContent: ()=>m
+    maxWidthDesktop: ()=>g,
+    textAlign: ()=>p,
+    textContent: ()=>u
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./popover.css.ts.vanilla.js");
-var a = "_12igu661 _1y2v1nf5m _1y2v1nfa8 _1y2v1nf9n _1y2v1nf9q _1y2v1nf2u", r = 12, t = "_12igu663 _1y2v1nf5m _1y2v1nf2 _1y2v1nfa6", _ = "_12igu669 _1y2v1nf5m _1y2v1nfab _1y2v1nfb3", o = "_12igu665 _1y2v1nf5m _1y2v1nf7y _1y2v1nf2u _1y2v1nf9n _1y2v1nf9z", f = "bottom", i = "top", y = 20, e = 16, u = 488, g = "_1y2v1nf5q _1y2v1nf65 _1y2v1nf8d", m = "_12igu667";
+var n = "_12igu661 _1y2v1nf60 _1y2v1nfam _1y2v1nfa1 _1y2v1nfa4 _1y2v1nf31", r = 12, t = "_12igu663 _1y2v1nf60 _1y2v1nf2 _1y2v1nfak", _ = "_12igu669 _1y2v1nf60 _1y2v1nfap _1y2v1nfbh", o = "_12igu665 _1y2v1nf60 _1y2v1nf8c _1y2v1nf31 _1y2v1nfa1 _1y2v1nfad", f = "bottom", i = "top", y = 20, e = 16, g = 488, p = "_1y2v1nf64 _1y2v1nf6j _1y2v1nf8r", u = "_12igu667";

package/dist/progress-bar.css-mistica.js

@@ -16,4 +16,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./progress-bar.css.ts.vanilla.js");
-var v = "_1y2v1nf8d _1y2v1nfa3", n = "_1y2v1nfa3 _1y2v1nf8g _1y2v1nf3t", y = "j0y7r95", f = "j0y7r94";
+var v = "_1y2v1nf8r _1y2v1nfah", n = "_1y2v1nfah _1y2v1nf8u _1y2v1nf44", y = "j0y7r95", f = "j0y7r94";

package/dist/radio-button.css-mistica.js

@@ -9,19 +9,20 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    disabled: ()=>r,
-    innerCircle: ()=>f,
-    innerCircleChecked: ()=>a,
-    outerCircleCheckedVariants: ()=>d,
-    outerCircleVariants: ()=>y,
-    radioButton: ()=>_
+    disabled: ()=>v,
+    innerCircle: ()=>r,
+    innerCircleChecked: ()=>d,
+    outerCircleCheckedVariants: ()=>f,
+    outerCircleVariants: ()=>c,
+    radioButton: ()=>e,
+    radioButtonContainerDisabled: ()=>i
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./radio-button.css.ts.vanilla.js");
-var r = "c6dmsub", f = "c6dmsu5 _1y2v1nf5q _1y2v1nf9p", a = "c6dmsu7 _1y2v1nf3u", d = {
-    default: "c6dmsu9",
-    ios: "c6dmsua"
-}, y = {
-    default: "c6dmsu2 c6dmsu1 _1y2v1nf5r _1y2v1nf65 _1y2v1nf5z _1y2v1nfa5 _1y2v1nf68 _1y2v1nf9p _1y2v1nf2t",
-    ios: "c6dmsu3 c6dmsu1 _1y2v1nf5r _1y2v1nf65 _1y2v1nf5z _1y2v1nfa5 _1y2v1nf68 _1y2v1nf9p _1y2v1nf2t"
-}, _ = "c6dmsu8";
+var v = "c6dmsuc", r = "c6dmsu5 _1y2v1nf64 _1y2v1nfa3", d = "c6dmsu7 _1y2v1nf45", f = {
+    default: "c6dmsua",
+    ios: "c6dmsub"
+}, c = {
+    default: "c6dmsu2 c6dmsu1 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6d _1y2v1nfaj _1y2v1nf6m _1y2v1nfa3 _1y2v1nf30",
+    ios: "c6dmsu3 c6dmsu1 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6d _1y2v1nfaj _1y2v1nf6m _1y2v1nfa3 _1y2v1nf30"
+}, e = "c6dmsu8", i = "c6dmsu9";

package/dist/radio-button.css.d.ts

@@ -2,5 +2,6 @@ export declare const outerCircleVariants: Record<"default" | "ios", string>;
 export declare const innerCircle: string;
 export declare const innerCircleChecked: string;
 export declare const radioButton: string;
+export declare const radioButtonContainerDisabled: string;
 export declare const outerCircleCheckedVariants: Record<"default" | "ios", string>;
 export declare const disabled: string;

package/dist/radio-button.js

@@ -9,9 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    RadioGroup: ()=>le,
-    default: ()=>oe,
-    useRadioContext: ()=>J
+    RadioGroup: ()=>ne,
+    default: ()=>le,
+    useRadioContext: ()=>M
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _keyCodesJs = require("./utils/key-codes.js");
@@ -154,14 +154,14 @@ const q = /*#__PURE__*/ _react.createContext({
     select: ()=>{},
     selectNext: ()=>{},
     selectPrev: ()=>{}
-}), J = ()=>_react.useContext(q), oe = (_param)=>{
-    var { value: t , id: o , dataAttributes: R , "aria-labelledby": g  } = _param, d = _objectWithoutProperties(_param, [
+}), M = ()=>_react.useContext(q), le = (_param)=>{
+    var { value: t , id: l , dataAttributes: R , "aria-labelledby": g  } = _param, d = _objectWithoutProperties(_param, [
         "value",
         "id",
         "dataAttributes",
         "aria-labelledby"
     ]);
-    const { disabled: l , selectedValue: y , focusableValue: i , select: u , selectNext: f , selectPrev: v  } = J(), m = (0, _hooksJs.useAriaId)(g), r = _react.useRef(null), c = t === y, V = i === t ? 0 : -1, { isIos: h  } = (0, _hooksJs.useTheme)(), p = (e)=>{
+    const { disabled: o , selectedValue: y , focusableValue: i , select: u , selectNext: f , selectPrev: v  } = M(), m = (0, _hooksJs.useAriaId)(g), r = _react.useRef(null), c = t === y, V = i === t ? 0 : -1, { isIos: h  } = (0, _hooksJs.useTheme)(), p = (e)=>{
         switch(e.keyCode){
             case _keyCodesJs.SPACE:
                 u(t), e.preventDefault(), e.stopPropagation();
@@ -178,7 +178,7 @@ const q = /*#__PURE__*/ _react.createContext({
     }, b = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
         className: (0, _classnames.default)(h ? _radioButtonCssMisticaJs.outerCircleVariants.ios : _radioButtonCssMisticaJs.outerCircleVariants.default, {
             [_radioButtonCssMisticaJs.outerCircleCheckedVariants[h ? "ios" : "default"]]: c,
-            [_radioButtonCssMisticaJs.disabled]: l
+            [_radioButtonCssMisticaJs.disabled]: o
         }),
         children: !h && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
             className: (0, _classnames.default)(_radioButtonCssMisticaJs.innerCircle, {
@@ -188,24 +188,25 @@ const q = /*#__PURE__*/ _react.createContext({
     });
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("span", _objectSpreadProps(_objectSpread({
         ref: r,
-        id: o,
-        tabIndex: l ? void 0 : V,
+        id: l,
+        tabIndex: o ? void 0 : V,
         role: "radio",
         "data-value": t,
         "aria-checked": c,
-        "aria-disabled": l,
+        "aria-disabled": o,
         "aria-labelledby": m,
-        onClick: l ? void 0 : ()=>u(t),
-        onKeyDown: l ? void 0 : p,
+        onClick: o ? void 0 : ()=>u(t),
+        onKeyDown: o ? void 0 : p,
         className: _radioButtonCssMisticaJs.radioButton
     }, (0, _domJs.getPrefixedDataAttributes)(R, "RadioButton")), {
         children: d.render ? d.render({
             controlElement: b,
-            disabled: !!l,
+            disabled: !!o,
             checked: c,
             labelId: m
         }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_inlineJs.default, {
             space: 16,
+            className: o ? _radioButtonCssMisticaJs.radioButtonContainerDisabled : "",
             children: [
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                     regular: !0,
@@ -223,26 +224,26 @@ const q = /*#__PURE__*/ _react.createContext({
                     as: "div",
                     id: m,
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("span", {
-                        className: l ? _radioButtonCssMisticaJs.disabled : "",
+                        className: o ? _radioButtonCssMisticaJs.disabled : "",
                         children: d.children
                     })
                 })
             ]
         })
     }));
-}, le = (t)=>{
+}, ne = (t)=>{
     var p, b;
-    const { value: o , defaultValue: R , onChange: g , focusableRef: d , disabled: l  } = (0, _formContextJs.useControlProps)({
+    const { value: l , defaultValue: R , onChange: g , focusableRef: d , disabled: o  } = (0, _formContextJs.useControlProps)({
         name: t.name,
         value: t.value,
         defaultValue: t.defaultValue,
         onChange: t.onChange,
         disabled: t.disabled
-    }), y = typeof o < "u", [i, u] = _react.useState((p = o != null ? o : R) != null ? p : "");
+    }), y = typeof l < "u", [i, u] = _react.useState((p = l != null ? l : R) != null ? p : "");
     _react.useEffect(()=>{
-        o !== void 0 && u(o);
+        l !== void 0 && u(l);
     }, [
-        o
+        l
     ]);
     const f = (e)=>{
         y || u(e), g(e);
@@ -276,7 +277,7 @@ const q = /*#__PURE__*/ _react.createContext({
     }, (0, _domJs.getPrefixedDataAttributes)(t.dataAttributes, "RadioGroup")), {
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(q.Provider, {
             value: {
-                disabled: l,
+                disabled: o,
                 selectedValue: i != null ? i : R,
                 focusableValue: h,
                 select: f,

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

@@ -11,12 +11,12 @@ function _export(target, all) {
 _export(exports, {
     backgroundVariant: ()=>n,
     container: ()=>v,
-    fullWidth: ()=>o,
-    responsiveLayout: ()=>t
+    fullWidth: ()=>e,
+    responsiveLayout: ()=>o
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./responsive-layout.css.ts.vanilla.js");
 var n = {
-    inverse: "_1y2v1nf2y",
-    alternative: "_1y2v1nf33"
-}, v = "_1y2v1nf7x", o = "_17lofg76 _1y2v1nf7x", t = "_17lofg74";
+    inverse: "_1y2v1nf39",
+    alternative: "_1y2v1nf3e"
+}, v = "_1y2v1nf8b", e = "_17lofg76 _1y2v1nf8b", o = "_17lofg74";

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

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "screenReaderOnly", {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./screen-reader-only.css.ts.vanilla.js");
-var y = "gwdgwo1 _1y2v1nf6d _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf5m _1y2v1nfa6 _1y2v1nf9o";
+var y = "gwdgwo1 _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x _1y2v1nf60 _1y2v1nfak _1y2v1nfa2";

package/dist/select.css-mistica.js

@@ -12,27 +12,27 @@ _export(exports, {
     arrowDown: ()=>n,
     menuItem: ()=>f,
     menuItemSelected: ()=>i,
-    optionsAnimationsVariants: ()=>s,
+    optionsAnimationsVariants: ()=>a,
     optionsContainer: ()=>y,
-    selectContainerVariants: ()=>a,
+    selectContainerVariants: ()=>s,
     selectTextVariants: ()=>r,
     selectVariants: ()=>p,
     vars: ()=>t
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./select.css.ts.vanilla.js");
-var n = "_1sqpivvo _1y2v1nf5m _1y2v1nfb5", f = "_1sqpivvq _1y2v1nf7a _1y2v1nf7o _1y2v1nf6g _1y2v1nf6u _1y2v1nf1s _1y2v1nf5q _1y2v1nf65 _1y2v1nfa5 _1y2v1nf8n", i = "_1y2v1nf33", s = {
+var n = "_1sqpivvo _1y2v1nf60 _1y2v1nfbj", f = "_1sqpivvq _1y2v1nf7o _1y2v1nf82 _1y2v1nf6u _1y2v1nf78 _1y2v1nf1w _1y2v1nf64 _1y2v1nf6j _1y2v1nfaj _1y2v1nf91", i = "_1y2v1nf3e", a = {
     show: "_1sqpivv7",
     hide: "_1sqpivv8"
-}, y = "_1sqpivv6 _1y2v1nf6d _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf5m _1y2v1nf9w _1y2v1nf2u", a = {
-    default: "_1sqpivvd _1sqpivvc _1y2v1nf5l",
-    fullWidth: "_1sqpivve _1sqpivvc _1y2v1nf5l"
+}, y = "_1sqpivv6 _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x _1y2v1nf60 _1y2v1nfaa _1y2v1nf31", s = {
+    default: "_1sqpivvd _1sqpivvc _1y2v1nf5z _1y2v1nfaj",
+    fullWidth: "_1sqpivve _1sqpivvc _1y2v1nf5z _1y2v1nfaj"
 }, r = {
-    default: "_1sqpivvl _1sqpivvk _1y2v1nf5m _1y2v1nfa6 _1y2v1nf9l _1y2v1nf1s",
-    disabled: "_1sqpivvm _1sqpivvk _1y2v1nf5m _1y2v1nfa6 _1y2v1nf9l _1y2v1nf1s"
+    default: "_1sqpivvl _1sqpivvk _1y2v1nf60 _1y2v1nfak _1y2v1nf9z _1y2v1nf1w",
+    disabled: "_1sqpivvm _1sqpivvk _1y2v1nf60 _1y2v1nfak _1y2v1nf9z _1y2v1nf1w"
 }, p = {
-    default: "_1sqpivvh _1sqpivvg _1y2v1nf9o _1y2v1nf1s _1y2v1nf5k _1y2v1nf7x _1y2v1nf8d",
-    disabled: "_1sqpivvi _1sqpivvg _1y2v1nf9o _1y2v1nf1s _1y2v1nf5k _1y2v1nf7x _1y2v1nf8d"
+    default: "_1sqpivvh _1sqpivvg _1y2v1nfa2 _1y2v1nf1w _1y2v1nf5y _1y2v1nf8b _1y2v1nf8r",
+    disabled: "_1sqpivvi _1sqpivvg _1y2v1nfa2 _1y2v1nf1w _1y2v1nf5y _1y2v1nf8b _1y2v1nf8r"
 }, t = {
     top: "var(--_1sqpivv0)",
     left: "var(--_1sqpivv1)",