@telefonica/mistica 14.9.0 → 14.11.0

package/dist/grid.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Grid: ()=>Q,
+    GridItem: ()=>U
+});
+const _dynamic = require("@vanilla-extract/dynamic");
+const _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _gridCssMisticaJs = require("./grid.css-mistica.js");
+const _domJs = require("./utils/dom.js");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
+const B = (i, e)=>{
+    const t = {}, m = (r)=>typeof r == "number" ? `min(${r}px, 100%)` : r, f = (r)=>typeof r == "number" ? `${r}px` : r;
+    return i && typeof i != "number" && (typeof i.minSize < "u" && (t[_gridCssMisticaJs.vars.rowMinSize] = m(i.minSize)), typeof i.maxSize < "u" && (t[_gridCssMisticaJs.vars.rowMaxSize] = f(i.maxSize))), e && typeof e != "number" && (typeof e.minSize < "u" && (t[_gridCssMisticaJs.vars.columnMinSize] = m(e.minSize)), typeof e.maxSize < "u" && (t[_gridCssMisticaJs.vars.columnMaxSize] = f(e.maxSize))), t;
+}, Q = /*#__PURE__*/ _react.forwardRef((param, R)=>{
+    let { rows: i , columns: e , gap: t = 0 , flow: m , justifyItems: f , alignItems: r , justifyContent: n , alignContent: o , height: u , minHeight: l , children: p , as: g = "div" , dataAttributes: A  } = param;
+    const [y, x] = Array.isArray(t) ? t : [
+        t,
+        t
+    ];
+    return /*#__PURE__*/ _react.createElement(g, _objectSpread({
+        ref: R,
+        className: (0, _classnames.default)(_gridCssMisticaJs.grid, e ? typeof e == "number" ? _gridCssMisticaJs.gridTemplateColumns[e] : _gridCssMisticaJs.gridTemplateColumnsAutoRepeat : "", i ? typeof i == "number" ? _gridCssMisticaJs.gridTemplateRows[i] : _gridCssMisticaJs.gridTemplateRowsAutoRepeat : "", m ? _gridCssMisticaJs.gridAutoFlow[m] : "", f ? _gridCssMisticaJs.gridJustifyItems[f] : "", r ? _gridCssMisticaJs.gridAlignItems[r] : "", n ? _gridCssMisticaJs.gridJustifyContent[n] : "", o ? _gridCssMisticaJs.gridAlignContent[o] : ""),
+        style: _objectSpread({
+            height: u,
+            minHeight: l
+        }, (0, _dynamic.assignInlineVars)(_objectSpread({
+            [_gridCssMisticaJs.vars.columnGap]: y ? `${y}px` : "",
+            [_gridCssMisticaJs.vars.rowGap]: x ? `${x}px` : ""
+        }, B(i, e))))
+    }, (0, _domJs.getPrefixedDataAttributes)(A)), p);
+}), U = /*#__PURE__*/ _react.forwardRef((param, p)=>{
+    let { rowStart: i , rowSpan: e , columnStart: t , columnSpan: m , span: f , justifySelf: r , alignSelf: n , children: o , as: u = "div" , dataAttributes: l  } = param;
+    return f && (Array.isArray(f) ? (m = f[0], e = f[1]) : (m = f, e = f)), /*#__PURE__*/ _react.createElement(u, _objectSpread({
+        ref: p,
+        className: (0, _classnames.default)(m ? m === "full" ? _gridCssMisticaJs.fullColumns : _gridCssMisticaJs.spanColumns[m] : "", e ? e === "full" ? _gridCssMisticaJs.fullRows : _gridCssMisticaJs.spanRows[e] : "", t ? _gridCssMisticaJs.columnStart[t] : "", i ? _gridCssMisticaJs.rowStart[i] : "", r ? _gridCssMisticaJs.justifySelf[r] : "", n ? _gridCssMisticaJs.alignSelf[n] : "")
+    }, (0, _domJs.getPrefixedDataAttributes)(l)), o);
+});

package/dist/hero.css-mistica.js

@@ -10,8 +10,8 @@ function _export(target, all) {
 }
 _export(exports, {
     actions: ()=>v,
-    container: ()=>n,
-    containerDesktop: ()=>a,
+    container: ()=>a,
+    containerDesktop: ()=>n,
     containerMobile: ()=>_,
     layout: ()=>i,
     vars: ()=>p
@@ -19,6 +19,6 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.js");
 require("./responsive-layout.css.ts.vanilla.js");
 require("./hero.css.ts.vanilla.js");
-var v = "_16rbpto6 _1y2v1nf5q _1y2v1nf6c _1y2v1nf66", n = "_16rbpto2 _1y2v1nf5q", a = "_1y2v1nf65 _1y2v1nf8d", _ = "_1y2v1nf5w", i = "_16rbpto7", p = {
+var v = "_16rbpto6 _1y2v1nf64 _1y2v1nf6q _1y2v1nf6k", a = "_16rbpto2 _1y2v1nf64", n = "_1y2v1nf6j _1y2v1nf8r", _ = "_1y2v1nf6a", i = "_16rbpto7", p = {
     height: "var(--_16rbpto0)"
 };

package/dist/highlighted-card.css-mistica.js

@@ -9,14 +9,14 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    container: ()=>f,
-    imageContent: ()=>y,
+    container: ()=>y,
+    imageContent: ()=>f,
     textContainerVariant: ()=>_,
     touchableContainer: ()=>r
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./highlighted-card.css.ts.vanilla.js");
-var f = "wrb8722 _1y2v1nf5q _1y2v1nf5v _1y2v1nf62 _1y2v1nf68", y = "wrb8725 _1y2v1nf5q", _ = {
-    withImage: "wrb8728 wrb8727 _1y2v1nf5q _1y2v1nf5w _1y2v1nf64 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7a",
-    withoutImage: "wrb8729 wrb8727 _1y2v1nf5q _1y2v1nf5w _1y2v1nf64 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7a"
-}, r = "_1y2v1nf6d _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf5q _1y2v1nf68 _1y2v1nf9o _1y2v1nf7x _1y2v1nf5k";
+var y = "wrb8722 _1y2v1nf64 _1y2v1nf69 _1y2v1nf6g _1y2v1nf6m", f = "wrb8725 _1y2v1nf64", _ = {
+    withImage: "wrb8728 wrb8727 _1y2v1nf64 _1y2v1nf6a _1y2v1nf6i _1y2v1nf6x _1y2v1nf7b _1y2v1nf7o",
+    withoutImage: "wrb8729 wrb8727 _1y2v1nf64 _1y2v1nf6a _1y2v1nf6i _1y2v1nf6x _1y2v1nf7b _1y2v1nf7o"
+}, r = "_1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x _1y2v1nf64 _1y2v1nf6m _1y2v1nfa2 _1y2v1nf8b _1y2v1nf5y";

package/dist/horizontal-scroll.css-mistica.js

@@ -15,4 +15,4 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.js");
 require("./responsive-layout.css.ts.vanilla.js");
 require("./horizontal-scroll.css.ts.vanilla.js");
-var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nf5q";
+var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nf64";

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

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "base", {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./icon-button.css.ts.vanilla.js");
-var t = "yqt1oe1 _1y2v1nf5u";
+var t = "yqt1oe1 _1y2v1nf68";

package/dist/image.css-mistica.js

@@ -14,4 +14,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./image.css.ts.vanilla.js");
-var f = 300, n = "_17tt25r1 _1y2v1nfa8 _1y2v1nfam _1y2v1nf5s _1y2v1nf7x _1y2v1nf8d _1y2v1nfbs _1y2v1nf9l _1y2v1nf9m";
+var f = 300, n = "_17tt25r1 _1y2v1nfam _1y2v1nfb0 _1y2v1nf66 _1y2v1nf8b _1y2v1nf8r _1y2v1nfc6 _1y2v1nf9z _1y2v1nfa0";

package/dist/image.d.ts

@@ -8,6 +8,7 @@ export declare const MediaBorderRadiusProvider: ({ children, value, }: {
 type ImageErrorProps = {
     noBorderRadius?: boolean;
     withIcon?: boolean;
+    border?: boolean;
 };
 export declare const ImageError: React.ForwardRefExoticComponent<ImageErrorProps & React.RefAttributes<HTMLDivElement>>;
 export type AspectRatio = '1:1' | '16:9' | '7:10' | '4:3';
@@ -33,6 +34,7 @@ export type ImageProps = {
     onLoad?: () => void;
     loadingFallback?: boolean;
     errorFallback?: boolean;
+    border?: boolean;
 };
 export declare const ImageContent: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
 declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;

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.9.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";