@telefonica/mistica 14.9.0 → 14.11.0

package/dist/chip.css-mistica.js

@@ -9,18 +9,19 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    chipInteractiveVariants: ()=>v,
-    chipVariants: ()=>t,
-    icon: ()=>f,
-    iconActive: ()=>y
+    button: ()=>c,
+    chipInteractiveVariants: ()=>t,
+    chipVariants: ()=>f,
+    icon: ()=>y,
+    iconActive: ()=>_
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./chip.css.ts.vanilla.js");
-var v = {
-    light: "cc7htna cc7htn9",
-    dark: "cc7htnb cc7htn9"
-}, t = {
-    default: "cc7htn1 _1y2v1nf5r _1y2v1nf5z _1y2v1nf65 _1y2v1nf9n _1y2v1nf2u _1y2v1nf1s",
-    overAlternative: "cc7htn1 _1y2v1nf5r _1y2v1nf5z _1y2v1nf65 _1y2v1nf9n _1y2v1nf2x _1y2v1nf1s",
-    active: "cc7htn8 cc7htn2 cc7htn1 _1y2v1nf5r _1y2v1nf5z _1y2v1nf65 _1y2v1nf9n _1y2v1nf12 _1y2v1nf59"
-}, f = "cc7htnc", y = "cc7htnd";
+var c = "_1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x _1y2v1nfa2 _1y2v1nf5y", t = {
+    light: "cc7htnb cc7htn9",
+    dark: "cc7htnc cc7htn9"
+}, f = {
+    default: "cc7htn1 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nfa1 _1y2v1nf31 _1y2v1nf1w",
+    overAlternative: "cc7htn1 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nfa1 _1y2v1nf38 _1y2v1nf1w",
+    active: "cc7htn8 cc7htn2 cc7htn1 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nfa1 _1y2v1nf16 _1y2v1nf5k"
+}, y = "cc7htnd", _ = "cc7htne";

package/dist/chip.css.d.ts

@@ -1,4 +1,5 @@
 export declare const chipVariants: Record<"default" | "active" | "overAlternative", string>;
+export declare const button: string;
 export declare const chipInteractiveVariants: Record<"light" | "dark", string>;
 export declare const icon: string;
 export declare const iconActive: string;

package/dist/chip.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { ExclusifyUnion } from './utils/utility-types';
-import type { DataAttributes, IconProps } from './utils/types';
+import type { DataAttributes, IconProps, TrackingEvent } from './utils/types';
 interface SimpleChipProps {
     children: string;
     Icon?: React.FC<IconProps>;
@@ -13,6 +13,25 @@ interface ClosableChipProps extends SimpleChipProps {
 interface ToggleChipProps extends SimpleChipProps {
     active: boolean;
 }
-type ChipProps = ExclusifyUnion<SimpleChipProps | ClosableChipProps | ToggleChipProps>;
+interface HrefChipProps extends SimpleChipProps {
+    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+    href: string;
+    newTab?: boolean;
+    active?: boolean;
+}
+interface ToChipProps extends SimpleChipProps {
+    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+    to: string;
+    fullPageOnWebView?: boolean;
+    replace?: boolean;
+    active?: boolean;
+}
+interface OnPressChipProps extends SimpleChipProps {
+    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+    onPress: () => void;
+    active?: boolean;
+}
+type ClickableChipProps = ExclusifyUnion<HrefChipProps | ToChipProps | OnPressChipProps>;
+type ChipProps = ExclusifyUnion<SimpleChipProps | ClosableChipProps | ToggleChipProps | ClickableChipProps>;
 declare const Chip: React.FC<ChipProps>;
 export default Chip;

package/dist/chip.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>H
+    get: ()=>S
 });
 const _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 const _hooksJs = require("./hooks.js");
@@ -17,6 +17,7 @@ const _chipCssMisticaJs = require("./chip.css-mistica.js");
 const _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 const _domJs = require("./utils/dom.js");
 const _themeVariantContextJs = require("./theme-variant-context.js");
+const _touchableJs = require("./touchable.js");
 const _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -75,33 +76,32 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-const H = (param)=>{
-    let { Icon: t , children: p , id: f , dataAttributes: n , active: o , onClose: a  } = param;
-    const { texts: u , isDarkMode: h  } = (0, _hooksJs.useTheme)(), s = (0, _themeVariantContextJs.useThemeVariant)() === "alternative", m = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
+const S = (e)=>{
+    const { Icon: i , children: v , id: g , dataAttributes: l , active: o , onClose: s  } = e, { texts: b , isDarkMode: x  } = (0, _hooksJs.useTheme)(), m = (0, _themeVariantContextJs.useThemeVariant)() === "alternative", d = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
         children: [
-            t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingRight: 4,
                 className: o ? _chipCssMisticaJs.iconActive : _chipCssMisticaJs.icon,
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(t, {
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(i, {
                     color: "currentColor",
                     size: (0, _cssJs.pxToRem)(16)
                 })
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
-                id: f,
+                id: g,
                 medium: !0,
                 truncate: 1,
                 color: "currentColor",
-                children: p
+                children: v
             })
         ]
-    }), l = t ? 8 : 12;
-    if (a) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxJs.default, _objectSpreadProps(_objectSpread({
-        className: s ? _chipCssMisticaJs.chipVariants.overAlternative : _chipCssMisticaJs.chipVariants.default,
-        paddingLeft: l
-    }, (0, _domJs.getPrefixedDataAttributes)(n, "Chip")), {
+    }), f = i ? 8 : 12;
+    if (s) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxJs.default, _objectSpreadProps(_objectSpread({
+        className: m ? _chipCssMisticaJs.chipVariants.overAlternative : _chipCssMisticaJs.chipVariants.default,
+        paddingLeft: f
+    }, (0, _domJs.getPrefixedDataAttributes)(l, "Chip")), {
         children: [
-            m,
+            d,
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingLeft: 4,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
@@ -111,8 +111,8 @@ const H = (param)=>{
                         justifyContent: "center",
                         alignItems: "center"
                     },
-                    "aria-label": u.closeButtonLabel,
-                    onPress: ()=>a(),
+                    "aria-label": b.closeButtonLabel,
+                    onPress: ()=>s(),
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCloseRegularJs.default, {
                         size: 16,
                         color: _skinContractCssMisticaJs.vars.colors.neutralMedium
@@ -121,16 +121,29 @@ const H = (param)=>{
             })
         ]
     }));
-    {
-        const g = o !== void 0;
-        return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, _objectSpreadProps(_objectSpread({
-            className: (0, _classnames.default)(_chipCssMisticaJs.chipVariants[o ? "active" : s ? "overAlternative" : "default"], {
-                [_chipCssMisticaJs.chipInteractiveVariants[h ? "dark" : "light"]]: g
+    const C = o !== void 0 || e.href || e.onPress || e.to, r = ()=>/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, _objectSpreadProps(_objectSpread({
+            className: (0, _classnames.default)(_chipCssMisticaJs.chipVariants[o ? "active" : m ? "overAlternative" : "default"], {
+                [_chipCssMisticaJs.chipInteractiveVariants[x ? "dark" : "light"]]: C
             }),
-            paddingLeft: l,
+            paddingLeft: f,
             paddingRight: 12
-        }, (0, _domJs.getPrefixedDataAttributes)(n, "Chip")), {
-            children: m
+        }, (0, _domJs.getPrefixedDataAttributes)(l, "Chip")), {
+            children: d
         }));
-    }
+    return e.onPress ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, {
+        className: _chipCssMisticaJs.button,
+        trackingEvent: e.trackingEvent,
+        onPress: e.onPress,
+        children: r()
+    }) : e.to ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, {
+        trackingEvent: e.trackingEvent,
+        to: e.to,
+        fullPageOnWebView: e.fullPageOnWebView,
+        children: r()
+    }) : e.href ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, {
+        trackingEvent: e.trackingEvent,
+        href: e.href,
+        newTab: e.newTab,
+        children: r()
+    }) : r();
 };

package/dist/circle.css-mistica.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "circle", {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./circle.css.ts.vanilla.js");
-var r = "_1wpwyyp1 _1y2v1nf5q _1y2v1nf65 _1y2v1nf5z _1y2v1nf9p";
+var r = "_1wpwyyp1 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfa3";

package/dist/credit-card-number-field.css-mistica.js

@@ -16,7 +16,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./credit-card-number-field.css.ts.vanilla.js");
-var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nf5m", f = {
-    default: "yvyo3q4 _1y2v1nf5l yvyo3q5",
-    backface: "yvyo3q4 _1y2v1nf5l yvyo3q6"
+var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nf60", f = {
+    default: "yvyo3q4 _1y2v1nf5z yvyo3q5",
+    backface: "yvyo3q4 _1y2v1nf5z yvyo3q6"
 };

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

@@ -14,4 +14,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./cvv-field.css.ts.vanilla.js");
-var v = "_10ijton2 _1y2v1nf1s", n = "_1y2v1nf5q _1y2v1nf65";
+var v = "_10ijton2 _1y2v1nf1w", n = "_1y2v1nf64 _1y2v1nf6j";

package/dist/dialog.css-mistica.js

@@ -12,8 +12,8 @@ _export(exports, {
     closedModalContent: ()=>_,
     closedOpactityLayer: ()=>y,
     dialogActions: ()=>f,
-    dialogContent: ()=>l,
-    iconContainer: ()=>a,
+    dialogContent: ()=>a,
+    iconContainer: ()=>l,
     modalCloseButtonContainer: ()=>d,
     modalContent: ()=>o,
     modalOpacityLayer: ()=>r,
@@ -22,7 +22,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./dialog.css.ts.vanilla.js");
-var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf6j", l = "_3dl29lj _1y2v1nf6c _1y2v1nf97", a = "_3dl29lm", d = "_3dl29l8 _1y2v1nf6i _1y2v1nf6w _1y2v1nf7a _1y2v1nf7o _1y2v1nf5m _1y2v1nfa8 _1y2v1nfb0", o = "_3dl29la _1y2v1nf2t _1y2v1nf9x", r = "_3dl29l5 _1y2v1nf5n _1y2v1nf5q _1y2v1nf5z _1y2v1nf65 _1y2v1nf5w _1y2v1nfa8 _1y2v1nfb0 _1y2v1nfbe _1y2v1nfam _1y2v1nf30", t = {
-    dialog: "_3dl29ld _1y2v1nf5q _1y2v1nf5w _1y2v1nf62 _1y2v1nf7b _1y2v1nf7p _1y2v1nf6l _1y2v1nf6x",
-    default: "_3dl29ld _1y2v1nf5q _1y2v1nf5w _1y2v1nf62 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf7p"
-}, e = "_3dl29l3 _1y2v1nf5l";
+var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf6x", a = "_3dl29lj _1y2v1nf6q _1y2v1nf9l", l = "_3dl29lm", d = "_3dl29l8 _1y2v1nf6w _1y2v1nf7a _1y2v1nf7o _1y2v1nf82 _1y2v1nf60 _1y2v1nfam _1y2v1nfbe", o = "_3dl29la _1y2v1nf30 _1y2v1nfab", r = "_3dl29l5 _1y2v1nf61 _1y2v1nf64 _1y2v1nf6d _1y2v1nf6j _1y2v1nf6a _1y2v1nfam _1y2v1nfbe _1y2v1nfbs _1y2v1nfb0 _1y2v1nf3b", t = {
+    dialog: "_3dl29ld _1y2v1nf64 _1y2v1nf6a _1y2v1nf6g _1y2v1nf7p _1y2v1nf83 _1y2v1nf6z _1y2v1nf7b",
+    default: "_3dl29ld _1y2v1nf64 _1y2v1nf6a _1y2v1nf6g _1y2v1nf6x _1y2v1nf7b _1y2v1nf7p _1y2v1nf83"
+}, e = "_3dl29l3 _1y2v1nf5z";

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

@@ -10,6 +10,6 @@ require("./sprinkles.css.ts.vanilla.js");
 require("./text-field-components.css.ts.vanilla.js");
 require("./double-field.css.ts.vanilla.js");
 var n = {
-    default: "skrulh1 _1y2v1nf5q _1y2v1nf5v _1y2v1nf7x",
-    fullWidth: "skrulh2 _1y2v1nf5q _1y2v1nf5v _1y2v1nf7x"
+    default: "skrulh1 _1y2v1nf64 _1y2v1nf69 _1y2v1nf8b",
+    fullWidth: "skrulh2 _1y2v1nf64 _1y2v1nf69 _1y2v1nf8b"
 };

package/dist/empty-state-card.css-mistica.js

@@ -9,10 +9,10 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    container: ()=>a,
+    container: ()=>n,
     iconContainer: ()=>o,
-    image: ()=>p
+    image: ()=>v
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./empty-state-card.css.ts.vanilla.js");
-var a = "_1azor6p0", o = "_1azor6p4 _1y2v1nf88 _1y2v1nf8n", p = "_1azor6p2 _1y2v1nf5s _1y2v1nf8p";
+var n = "_1azor6p0", o = "_1azor6p4 _1y2v1nf8m _1y2v1nf91", v = "_1azor6p2 _1y2v1nf66 _1y2v1nf93";

package/dist/empty-state.css-mistica.js

@@ -20,9 +20,9 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./empty-state.css.ts.vanilla.js");
-var n = "_13fzrua2 _1y2v1nf5q _1y2v1nf5k", v = {
+var n = "_13fzrua2 _1y2v1nf64 _1y2v1nf5y", v = {
     default: "_13fzrua3",
     largeImage: "_13fzrua4"
-}, e = "_13fzrua9 _1y2v1nf8a _1y2v1nf8p", f = "_13fzruac", _ = "_13fzrua7 _1y2v1nf8d", o = "_13fzrua5", u = "_13fzruab _1y2v1nf5s", t = {
+}, e = "_13fzrua9 _1y2v1nf8o _1y2v1nf93", f = "_13fzruac", _ = "_13fzrua7 _1y2v1nf8r", o = "_13fzrua5", u = "_13fzruab _1y2v1nf66", t = {
     backgroundColor: "var(--_13fzrua0)"
 };

package/dist/feedback.css-mistica.js

@@ -9,8 +9,8 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    container: ()=>n,
-    desktopContainer: ()=>r,
+    container: ()=>r,
+    desktopContainer: ()=>n,
     desktopContent: ()=>t,
     feedbackData: ()=>v,
     feedbackDataAppear: ()=>f,
@@ -19,4 +19,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./feedback.css.ts.vanilla.js");
-var n = "gx6h6a3 _1y2v1nf5q _1y2v1nf8d _1y2v1nf7x", r = "_1y2v1nf9y _1y2v1nf5q _1y2v1nf62", t = "gx6h6a1", v = "gx6h6a7", f = "gx6h6a5", o = "gx6h6a6", p = "gx6h6a4";
+var r = "gx6h6a3 _1y2v1nf64 _1y2v1nf8r _1y2v1nf8b", n = "_1y2v1nfac _1y2v1nf64 _1y2v1nf6g", t = "gx6h6a1", v = "gx6h6a7", f = "gx6h6a5", o = "gx6h6a6", p = "gx6h6a4";

package/dist/fixed-footer-layout.css-mistica.js

@@ -10,15 +10,15 @@ function _export(target, all) {
 }
 _export(exports, {
     container: ()=>v,
-    elevated: ()=>t,
-    fixedFooter: ()=>a,
-    footer: ()=>j,
+    elevated: ()=>a,
+    fixedFooter: ()=>j,
+    footer: ()=>t,
     vars: ()=>e,
     withoutFooter: ()=>p
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./fixed-footer-layout.css.ts.vanilla.js");
-var v = "p5j8j58", t = "p5j8j56 _1y2v1nf2u", a = "p5j8j54", j = "p5j8j53 _1y2v1nf7x _1y2v1nf2t", e = {
+var v = "p5j8j58", a = "p5j8j56 _1y2v1nf31", j = "p5j8j54", t = "p5j8j53 _1y2v1nf8b _1y2v1nf30", e = {
     footerHeight: "var(--p5j8j50)",
     backgroundColor: "var(--p5j8j51)"
-}, p = "_1y2v1nf5p";
+}, p = "_1y2v1nf63";

package/dist/form-context.d.ts

@@ -61,7 +61,7 @@ export declare const useFieldProps: ({ name, value, defaultValue, processValue,
     optional: boolean | undefined;
     error: boolean | undefined;
     disabled: boolean | undefined;
-    onBlur: ((event: React.FocusEvent<Element>) => void) | undefined;
+    onBlur?: React.FocusEventHandler<Element> | undefined;
     validate: ((value: any, rawValue: string) => string | undefined) | undefined;
     onChange: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
     onChangeValue: ((value: any, rawValue: string) => void) | undefined;
@@ -73,7 +73,7 @@ export declare const useFieldProps: ({ name, value, defaultValue, processValue,
     required: boolean;
     error: boolean;
     disabled: boolean;
-    onBlur: (event: React.FocusEvent<Element>) => void;
+    onBlur: React.FocusEventHandler;
     inputRef: (field: HTMLInputElement | null) => void;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };

package/dist/grid.css-mistica.js

@@ -0,0 +1,161 @@
+"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, {
+    alignSelf: ()=>i,
+    columnStart: ()=>m,
+    fullColumns: ()=>f,
+    fullRows: ()=>y,
+    grid: ()=>k,
+    gridAlignContent: ()=>e,
+    gridAlignItems: ()=>r,
+    gridAutoFlow: ()=>a,
+    gridJustifyContent: ()=>t,
+    gridJustifyItems: ()=>n,
+    gridTemplateColumns: ()=>s,
+    gridTemplateColumnsAutoRepeat: ()=>o,
+    gridTemplateRows: ()=>l,
+    gridTemplateRowsAutoRepeat: ()=>c,
+    justifySelf: ()=>d,
+    rowStart: ()=>u,
+    spanColumns: ()=>p,
+    spanRows: ()=>g,
+    vars: ()=>w
+});
+require("./grid.css.ts.vanilla.js");
+var i = {
+    start: "mfyikv36",
+    end: "mfyikv37",
+    center: "mfyikv38",
+    stretch: "mfyikv39",
+    baseline: "mfyikv3a"
+}, m = {
+    1: "mfyikv2e",
+    2: "mfyikv2f",
+    3: "mfyikv2g",
+    4: "mfyikv2h",
+    5: "mfyikv2i",
+    6: "mfyikv2j",
+    7: "mfyikv2k",
+    8: "mfyikv2l",
+    9: "mfyikv2m",
+    10: "mfyikv2n",
+    11: "mfyikv2o",
+    12: "mfyikv2p"
+}, f = "mfyikv1o", y = "mfyikv1p", k = "mfyikv6", e = {
+    start: "mfyikv1h",
+    end: "mfyikv1i",
+    center: "mfyikv1j",
+    stretch: "mfyikv1k",
+    "space-between": "mfyikv1l",
+    "space-around": "mfyikv1m",
+    "space-evenly": "mfyikv1n"
+}, r = {
+    start: "mfyikv15",
+    end: "mfyikv16",
+    center: "mfyikv17",
+    stretch: "mfyikv18",
+    baseline: "mfyikv19"
+}, a = {
+    column: "mfyikvx",
+    row: "mfyikvy",
+    "row dense": "mfyikvz",
+    "column dense": "mfyikv10"
+}, t = {
+    start: "mfyikv1a",
+    end: "mfyikv1b",
+    center: "mfyikv1c",
+    stretch: "mfyikv1d",
+    "space-between": "mfyikv1e",
+    "space-around": "mfyikv1f",
+    "space-evenly": "mfyikv1g"
+}, n = {
+    start: "mfyikv11",
+    end: "mfyikv12",
+    center: "mfyikv13",
+    stretch: "mfyikv14"
+}, s = {
+    1: "mfyikv9",
+    2: "mfyikva",
+    3: "mfyikvb",
+    4: "mfyikvc",
+    5: "mfyikvd",
+    6: "mfyikve",
+    7: "mfyikvf",
+    8: "mfyikvg",
+    9: "mfyikvh",
+    10: "mfyikvi",
+    11: "mfyikvj",
+    12: "mfyikvk"
+}, o = "mfyikv7", l = {
+    1: "mfyikvl",
+    2: "mfyikvm",
+    3: "mfyikvn",
+    4: "mfyikvo",
+    5: "mfyikvp",
+    6: "mfyikvq",
+    7: "mfyikvr",
+    8: "mfyikvs",
+    9: "mfyikvt",
+    10: "mfyikvu",
+    11: "mfyikvv",
+    12: "mfyikvw"
+}, c = "mfyikv8", d = {
+    start: "mfyikv32",
+    end: "mfyikv33",
+    center: "mfyikv34",
+    stretch: "mfyikv35"
+}, u = {
+    1: "mfyikv2q",
+    2: "mfyikv2r",
+    3: "mfyikv2s",
+    4: "mfyikv2t",
+    5: "mfyikv2u",
+    6: "mfyikv2v",
+    7: "mfyikv2w",
+    8: "mfyikv2x",
+    9: "mfyikv2y",
+    10: "mfyikv2z",
+    11: "mfyikv30",
+    12: "mfyikv31"
+}, p = {
+    1: "mfyikv1q",
+    2: "mfyikv1r",
+    3: "mfyikv1s",
+    4: "mfyikv1t",
+    5: "mfyikv1u",
+    6: "mfyikv1v",
+    7: "mfyikv1w",
+    8: "mfyikv1x",
+    9: "mfyikv1y",
+    10: "mfyikv1z",
+    11: "mfyikv20",
+    12: "mfyikv21"
+}, g = {
+    1: "mfyikv22",
+    2: "mfyikv23",
+    3: "mfyikv24",
+    4: "mfyikv25",
+    5: "mfyikv26",
+    6: "mfyikv27",
+    7: "mfyikv28",
+    8: "mfyikv29",
+    9: "mfyikv2a",
+    10: "mfyikv2b",
+    11: "mfyikv2c",
+    12: "mfyikv2d"
+}, w = {
+    rowGap: "var(--mfyikv0)",
+    columnGap: "var(--mfyikv1)",
+    rowMinSize: "var(--mfyikv2)",
+    rowMaxSize: "var(--mfyikv3)",
+    columnMinSize: "var(--mfyikv4)",
+    columnMaxSize: "var(--mfyikv5)"
+};

package/dist/grid.css.d.ts

@@ -0,0 +1,26 @@
+export declare const vars: {
+    rowGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    columnGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    rowMinSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    rowMaxSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    columnMinSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    columnMaxSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const grid: string;
+export declare const gridTemplateColumnsAutoRepeat: string;
+export declare const gridTemplateRowsAutoRepeat: string;
+export declare const gridTemplateColumns: Record<2 | 4 | 8 | 12 | 6 | 5 | 1 | 9 | 10 | 3 | 7 | 11, string>;
+export declare const gridTemplateRows: Record<2 | 4 | 8 | 12 | 6 | 5 | 1 | 9 | 10 | 3 | 7 | 11, string>;
+export declare const gridAutoFlow: Record<"column" | "row" | "row dense" | "column dense", string>;
+export declare const gridJustifyItems: Record<"center" | "stretch" | "end" | "start", string>;
+export declare const gridAlignItems: Record<"center" | "stretch" | "end" | "start" | "baseline", string>;
+export declare const gridJustifyContent: Record<"center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "start", string>;
+export declare const gridAlignContent: Record<"center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "start", string>;
+export declare const fullColumns: string;
+export declare const fullRows: string;
+export declare const spanColumns: Record<2 | 4 | 8 | 12 | 6 | 5 | 1 | 9 | 10 | 3 | 7 | 11, string>;
+export declare const spanRows: Record<2 | 4 | 8 | 12 | 6 | 5 | 1 | 9 | 10 | 3 | 7 | 11, string>;
+export declare const columnStart: Record<2 | 4 | 8 | 12 | 6 | 5 | 1 | 9 | 10 | 3 | 7 | 11, string>;
+export declare const rowStart: Record<2 | 4 | 8 | 12 | 6 | 5 | 1 | 9 | 10 | 3 | 7 | 11, string>;
+export declare const justifySelf: Record<"center" | "stretch" | "end" | "start", string>;
+export declare const alignSelf: Record<"center" | "stretch" | "end" | "start" | "baseline", string>;

package/dist/grid.css.ts.vanilla.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>s
+});
+const s = "";

package/dist/grid.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import type { DataAttributes } from './utils/types';
+type RowsColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type Gap = 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80;
+type AutoFillConfig = {
+    minSize?: string | number;
+    /**
+     * default: 1fr
+     */
+    maxSize?: string | number;
+};
+type GridProps = {
+    rows?: RowsColumns | AutoFillConfig;
+    columns?: RowsColumns | AutoFillConfig;
+    gap?: Gap | [Gap, Gap];
+    flow?: 'column' | 'row' | 'column dense' | 'row dense';
+    justifyItems?: 'start' | 'end' | 'center' | 'stretch';
+    alignItems?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+    justifyContent?: 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly';
+    alignContent?: 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly';
+    height?: string | number;
+    minHeight?: string | number;
+    children: React.ReactNode;
+    as?: React.ComponentType<any> | string;
+    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
+    dataAttributes?: DataAttributes;
+};
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+type Span = RowsColumns | 'full';
+type GridItemProps = {
+    columnStart?: RowsColumns;
+    rowStart?: RowsColumns;
+    span?: [Span, Span] | Span;
+    columnSpan?: Span;
+    rowSpan?: Span;
+    justifySelf?: 'start' | 'end' | 'center' | 'stretch';
+    alignSelf?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+    children?: React.ReactNode;
+    as?: React.ComponentType<any> | string;
+    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
+    dataAttributes?: DataAttributes;
+};
+export declare const GridItem: React.ForwardRefExoticComponent<GridItemProps & React.RefAttributes<HTMLDivElement>>;
+export {};