@telefonica/mistica 14.25.0 → 14.26.0

package/dist/menu.js

@@ -2,10 +2,21 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return rt;
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Menu: function() {
+        return qe;
+    },
+    MenuItem: function() {
+        return je;
+    },
+    MenuSection: function() {
+        return Xe;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -18,6 +29,15 @@ const _menucssmistica = require("./menu.css-mistica.js");
 const _hooks = require("./hooks.js");
 const _portal = require("./portal.js");
 const _dynamic = require("@vanilla-extract/dynamic");
+const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
+const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
+const _touchable = /*#__PURE__*/ _interop_require_default(require("./touchable.js"));
+const _text = require("./text.js");
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _divider = /*#__PURE__*/ _interop_require_default(require("./divider.js"));
+const _checkbox = /*#__PURE__*/ _interop_require_default(require("./checkbox.js"));
+const _reacttransitiongroup = require("react-transition-group");
+const _common = require("./utils/common.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -114,105 +134,265 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const K = 350, f = 400, H = 12, J = (param)=>{
-    let { renderTarget: v , renderMenu: y , width: c = K , position: M = "left" , dataAttributes: A  } = param;
-    const [e, i] = _react.useState(!1), [a, O] = _react.useState(null), [u, P] = _react.useState(null), [T, w] = _react.useState(!1), [s, m] = _react.useState(null), p = (0, _hooks.useWindowSize)();
+const Ee = 120, Q = /*#__PURE__*/ _react.createContext({
+    focusedItem: null,
+    isMenuOpen: !1,
+    setFocusedItem: ()=>{},
+    closeMenu: ()=>{}
+}), ke = ()=>_react.useContext(Q), D = (r)=>r ? Array.from(r.querySelectorAll("[role=menuitem],[role=menuitemcheckbox]")) : [], Ne = (r, d)=>{
+    if (!d) return null;
+    const f = D(r).indexOf(d);
+    return f < 0 ? null : f;
+}, je = (param)=>{
+    let { label: r , Icon: d , destructive: f , disabled: m , onPress: E , controlType: o , checked: p  } = param;
+    const { focusedItem: s , setFocusedItem: v , closeMenu: i , isMenuOpen: k  } = ke(), c = _react.useRef(null), h = f ? _skincontractcssmistica.vars.colors.textLinkDanger : _skincontractcssmistica.vars.colors.neutralHigh, x = c == null ? void 0 : c.current, M = (x == null ? void 0 : x.closest("[role=menu]")) || null, u = Ne(M, x), l = ()=>o === "checkbox" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_checkbox.default, {
+            ref: c,
+            name: r,
+            checked: p,
+            onChange: ()=>{
+                k && u !== null && (E(u), i());
+            },
+            disabled: m,
+            role: "menuitemcheckbox",
+            render: (param)=>/* @__PURE__ */ {
+                let { controlElement: N  } = param;
+                return (0, _jsxruntime.jsx)(_box.default, {
+                    paddingX: 8,
+                    paddingY: 12,
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                        space: "between",
+                        alignItems: "center",
+                        children: [
+                            /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                                className: _menucssmistica.itemContent,
+                                children: [
+                                    d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        className: _menucssmistica.iconContainer,
+                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(d, {
+                                            size: 24,
+                                            color: h
+                                        })
+                                    }),
+                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                                        regular: !0,
+                                        color: h,
+                                        children: r
+                                    })
+                                ]
+                            }),
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                paddingLeft: 16,
+                                children: N
+                            })
+                        ]
+                    })
+                });
+            }
+        }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
+            ref: c,
+            onPress: ()=>{
+                k && u !== null && (E(u), i());
+            },
+            disabled: m,
+            role: "menuitem",
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                paddingX: 8,
+                paddingY: 12,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                    className: _menucssmistica.itemContent,
+                    children: [
+                        d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: _menucssmistica.iconContainer,
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(d, {
+                                size: 24,
+                                color: h
+                            })
+                        }),
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                            regular: !0,
+                            color: h,
+                            children: r
+                        })
+                    ]
+                })
+            })
+        });
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        className: (0, _classnames.default)(_menucssmistica.menuItem, {
+            [_menucssmistica.menuItemEnabled]: !m,
+            [_menucssmistica.menuItemDisabled]: m,
+            [_menucssmistica.menuItemHovered]: !m && u !== null && s === u
+        }),
+        onMouseMove: ()=>v(m ? null : u),
+        onMouseLeave: ()=>v(null),
+        children: l()
+    });
+}, Xe = (param)=>{
+    let { children: r  } = param;
+    return r ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            r,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                paddingY: 8,
+                className: _menucssmistica.menuSectionDivider,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
+            })
+        ]
+    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
+}, V = 12, J = 8, qe = (param)=>{
+    let { renderTarget: r , renderMenu: d , width: f , position: m = "left" , dataAttributes: E  } = param;
+    const [o, p] = _react.useState(!1), [s, v] = _react.useState(null), [i, k] = _react.useState(null), [c, h] = _react.useState(null), [x, M] = _react.useState(!1), u = _react.useRef(null), [l, N] = _react.useState(null), R = (0, _hooks.useWindowSize)();
     _react.useEffect(()=>{
-        const o = a == null ? void 0 : a.getBoundingClientRect();
-        if (!u || !o || !e) {
-            w(!1);
-            return;
-        }
-        var _parseInt;
-        const { top: n , width: D , left: E , bottom: d  } = o, g = (_parseInt = parseInt(window.getComputedStyle(u).getPropertyValue("height"))) !== null && _parseInt !== void 0 ? _parseInt : 0, l = M === "left" ? E : E + D - c, h = p.height - d - H, x = n - H, F = h > g, L = x > g;
-        F ? m({
-            left: l,
-            top: `${d}px`,
-            bottom: "auto",
-            maxHeight: f,
-            transformOrigin: "center top"
-        }) : L ? m({
-            left: l,
-            top: `${n - g}px`,
-            bottom: "auto",
-            maxHeight: f,
-            transformOrigin: "center bottom"
-        }) : h > x ? m({
-            left: l,
-            top: `${d}px`,
+        const a = s == null ? void 0 : s.getBoundingClientRect();
+        if (!i || !a || !o) return;
+        const { top: t , right: O , left: g , bottom: F  } = a, T = i.scrollHeight, b = m === "left" ? g : void 0, A = m === "right" ? R.width - O : void 0, L = t - J, $ = F + J, H = R.height - $ - V, P = L - V, B = H > T, z = P > T, te = B || !z && H > P;
+        N(te ? {
+            left: b,
+            right: A,
+            top: `${$}px`,
             bottom: "auto",
-            maxHeight: Math.min(h, f),
+            maxHeight: B ? void 0 : H,
             transformOrigin: "center top"
-        }) : m({
-            left: l,
+        } : {
+            left: b,
+            right: A,
             top: "auto",
-            bottom: `${p.height - n}px`,
-            maxHeight: Math.min(x, f),
+            bottom: `${R.height - L}px`,
+            maxHeight: z ? void 0 : P,
             transformOrigin: "center bottom"
         });
-        let S;
-        return e && (S = requestAnimationFrame(()=>{
-            w(!0);
-        })), ()=>{
-            S && cancelAnimationFrame(S);
-        };
     }, [
-        M,
-        e,
-        u,
-        a,
-        c,
-        p
+        m,
+        o,
+        i,
+        s,
+        f,
+        R
     ]);
-    const C = _react.useMemo(()=>({
-            ref: O,
+    const Z = _react.useMemo(()=>({
+            ref: v,
             onPress: ()=>{
-                i(!e);
+                p(!o);
             }
         }), [
-        O,
-        e,
+        v,
+        o
+    ]), ee = {
+        ref: (0, _common.combineRefs)(k, u),
+        className: _menucssmistica.menuContainer,
+        close: ()=>p(!1)
+    }, w = _react.useCallback(()=>{
+        const t = D(i).findIndex((O)=>!O.getAttribute("aria-disabled"));
+        h(t < 0 ? null : t);
+    }, [
+        i
+    ]), _ = _react.useCallback((a)=>{
+        var T;
+        const t = D(i);
+        a && t.reverse();
+        const O = c === null ? -1 : a ? t.length - 1 - c : c;
+        let g = t.findIndex((b, A)=>!b.getAttribute("aria-disabled") && A > O);
+        g === -1 && (g = t.findIndex((b)=>!b.getAttribute("aria-disabled")));
+        const F = a && g !== -1 ? t.length - 1 - g : g;
+        h(F < 0 ? null : F), (T = t[g]) == null || T.focus();
+    }, [
+        c,
         i
-    ]), $ = _react.useMemo(()=>({
-            ref: P,
-            className: (0, _classnames.default)(_menucssmistica.menuContainer, T ? _menucssmistica.showItems : _menucssmistica.hideItems),
-            close: ()=>{
-                i(!1);
-            }
-        }), [
-        T
     ]);
     return _react.useEffect(()=>{
-        const o = (n)=>{
-            e && (n.keyCode === _keycodes.TAB && (0, _dom.cancelEvent)(n), n.keyCode === _keycodes.ESC && i(!1));
+        o ? x && i && (w(), M(!1)) : h(null);
+    }, [
+        o,
+        w,
+        x,
+        i
+    ]), _react.useEffect(()=>{
+        const a = (t)=>{
+            if (o) switch(t.keyCode){
+                case _keycodes.RIGHT:
+                case _keycodes.DOWN:
+                    (0, _dom.cancelEvent)(t), _();
+                    break;
+                case _keycodes.LEFT:
+                case _keycodes.UP:
+                    (0, _dom.cancelEvent)(t), _(!0);
+                    break;
+                case _keycodes.ESC:
+                    p(!1);
+                    break;
+                case _keycodes.SPACE:
+                case _keycodes.ENTER:
+                    (0, _dom.cancelEvent)(t), c !== null && D(i)[c].click();
+                    break;
+                case _keycodes.TAB:
+                    (0, _dom.cancelEvent)(t);
+                    break;
+            }
+            else switch(t.keyCode){
+                case _keycodes.ENTER:
+                case _keycodes.SPACE:
+                    M(!0);
+                    break;
+                case _keycodes.DOWN:
+                    s === document.activeElement && (M(!0), p(!0));
+                    break;
+            }
         };
-        return document.addEventListener("keydown", o, !1), ()=>{
-            document.removeEventListener("keydown", o, !1);
+        return document.addEventListener("keydown", a, !1), ()=>{
+            document.removeEventListener("keydown", a, !1);
         };
-    }), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(A, "Menu")), {
+    }), _react.useEffect(()=>{
+        s == null || s.setAttribute("aria-expanded", String(o));
+    }, [
+        s,
+        o
+    ]), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(E, "Menu")), {
         children: [
-            v(_object_spread_props(_object_spread({}, C), {
-                isMenuOpen: e
+            r(_object_spread_props(_object_spread({}, Z), {
+                isMenuOpen: o
             })),
-            e ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
-                    onPress: (o)=>{
-                        (0, _dom.cancelEvent)(o), i(!1);
-                    },
-                    disableScroll: !0,
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        style: _object_spread({}, (0, _dynamic.assignInlineVars)(_object_spread({}, s ? {
-                            [_menucssmistica.vars.top]: s.top,
-                            [_menucssmistica.vars.bottom]: s.bottom,
-                            [_menucssmistica.vars.left]: `${s.left}px`,
-                            [_menucssmistica.vars.transformOrigin]: s.transformOrigin,
-                            [_menucssmistica.vars.maxHeight]: `${s.maxHeight}px`,
-                            [_menucssmistica.vars.width]: `${c}px`
-                        } : {}))),
-                        children: y($)
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
+                    in: o,
+                    nodeRef: u,
+                    timeout: Ee,
+                    classNames: _menucssmistica.menuTransitionClasses,
+                    mountOnEnter: !0,
+                    unmountOnExit: !0,
+                    onExit: ()=>s == null ? void 0 : s.focus(),
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
+                        onPress: (a)=>{
+                            (0, _dom.cancelEvent)(a), p(!1);
+                        },
+                        disableScroll: !0,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            style: _object_spread({}, (0, _dynamic.assignInlineVars)(_object_spread({}, l ? _object_spread({
+                                [_menucssmistica.vars.top]: l.top,
+                                [_menucssmistica.vars.bottom]: l.bottom,
+                                [_menucssmistica.vars.transformOrigin]: l.transformOrigin
+                            }, l.left !== void 0 && {
+                                [_menucssmistica.vars.left]: `${l.left}px`
+                            }, l.right !== void 0 && {
+                                [_menucssmistica.vars.right]: `${l.right}px`
+                            }, l.maxHeight !== void 0 && {
+                                [_menucssmistica.vars.maxHeight]: `${l.maxHeight}px`
+                            }, f !== void 0 && {
+                                [_menucssmistica.vars.width]: f ? `${f}px` : ""
+                            }) : {}))),
+                            role: "menu",
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Q.Provider, {
+                                value: {
+                                    isMenuOpen: o,
+                                    focusedItem: c,
+                                    setFocusedItem: h,
+                                    closeMenu: ()=>p(!1)
+                                },
+                                children: d(ee)
+                            })
+                        })
                     })
                 })
-            }) : null
+            })
         ]
     }));
-}, rt = J;
+};

package/dist/overlay.js

@@ -5,53 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return S;
+        return C;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _platform = require("./utils/platform.js");
 const _hooks = require("./hooks.js");
 const _dom = require("./utils/dom.js");
-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 _interop_require_wildcard(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 _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -113,28 +73,27 @@ const x = {
     zIndex: 12,
     outline: "none",
     WebkitTapHighlightColor: "transparent"
-}, g = (param)=>{
-    let { onPress: o , children: a , className: n , style: s , disableScroll: f = !1 , dataAttributes: u  } = param;
-    const [d, r] = _react.useState(!0);
+}, b = (param)=>{
+    let { onPress: o , children: a , className: l , style: n , disableScroll: f = !1 , dataAttributes: u  } = param;
     (0, _hooks.useDisableBodyScroll)(f);
-    const { platformOverrides: e  } = (0, _hooks.useTheme)(), m = (t)=>{
+    const { platformOverrides: e  } = (0, _hooks.useTheme)(), d = (t)=>{
         t.button === 2 && o && o(t);
     };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         "data-overlay": "true"
     }, (0, _dom.getPrefixedDataAttributes)(u, "Overlay")), {
-        style: _object_spread({}, x, s),
-        className: n,
+        style: _object_spread({}, x, n),
+        className: l,
         onPointerDown: (t)=>{
-            t.target.dataset.overlay && o && (a && (0, _platform.isAndroid)(e) && (0, _platform.isChrome)(e) ? (r(!1), t.stopPropagation()) : o(t));
+            t.target.dataset.overlay && o && (a && (0, _platform.isAndroid)(e) && (0, _platform.isChrome)(e) ? t.stopPropagation() : o(t));
         },
         onClick: (t)=>{
-            t.target.dataset.overlay && o && a && (0, _platform.isAndroid)(e) && (0, _platform.isChrome)(e) && (r(!0), o(t));
+            t.target.dataset.overlay && o && a && (0, _platform.isAndroid)(e) && (0, _platform.isChrome)(e) && o(t);
         },
         "touch-action": "auto",
-        onContextMenu: m,
+        onContextMenu: d,
         role: "button",
         tabIndex: 0,
-        children: d && a
+        children: a
     }));
-}, S = g;
+}, C = b;

package/dist/overscroll-color-context.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     OverscrollColorProvider: function() {
-        return T;
+        return P;
     },
     default: function() {
-        return V;
+        return j;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -27,20 +27,20 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const { Provider: g , Getter: h , useSetValue: b  } = (0, _nestablecontext.default)(""), l = (r)=>(0, _platform.getPlatform)(r) === "ios", T = (param)=>{
+const { Provider: p , Getter: g , useSetValue: b  } = (0, _nestablecontext.default)(""), l = (r)=>(0, _platform.getPlatform)(r) === "ios", P = (param)=>{
     let { children: r  } = param;
-    const { platformOverrides: n  } = (0, _hooks.useTheme)(), { isTabletOrSmaller: i  } = (0, _hooks.useScreenSize)(), a = (0, _hooks.useTheme)();
-    return l(n) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(g, {
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(h, {
+    const { platformOverrides: o  } = (0, _hooks.useTheme)(), { isTabletOrSmaller: a  } = (0, _hooks.useScreenSize)(), i = (0, _hooks.useTheme)();
+    return l(o) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(p, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, {
             children: (c)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                     children: [
-                        i ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        a ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             style: {
                                 position: "absolute",
                                 zIndex: 1,
                                 background: c || _skincontractcssmistica.vars.colors.background,
                                 width: "100%",
-                                height: 500 + ((0, _platform.isInsideNovumNativeApp)(n) ? 0 : a.dimensions.headerMobileHeight || 0),
+                                height: 500 + ((0, _platform.isInsideNovumNativeApp)(o) ? 0 : i.dimensions.headerMobileHeight || 0),
                                 left: 0,
                                 marginTop: -500,
                                 transform: "translate3d(0,0,0)"
@@ -53,7 +53,19 @@ const { Provider: g , Getter: h , useSetValue: b  } = (0, _nestablecontext.defau
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
         children: r
     });
+}, C = (r)=>{
+    switch(r){
+        case "default":
+            return _skincontractcssmistica.vars.colors.background;
+        case "alternative":
+            return _skincontractcssmistica.vars.colors.backgroundAlternative;
+        case "inverse":
+            return _skincontractcssmistica.vars.colors.backgroundBrand;
+        default:
+            const o = r;
+            throw new Error(`Invalid variant: ${o}`);
+    }
 }, O = ()=>{
-    const r = (0, _themevariantcontext.useIsInverseVariant)();
-    return b(r ? _skincontractcssmistica.vars.colors.navigationBarBackground : _skincontractcssmistica.vars.colors.background), null;
-}, C = ()=>l((0, _hooks.useTheme)().platformOverrides) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {}) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {}), V = C;
+    const r = (0, _themevariantcontext.useThemeVariant)();
+    return b(C(r)), null;
+}, k = ()=>l((0, _hooks.useTheme)().platformOverrides) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {}) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {}), j = k;

package/dist/package-version.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
         return o;
     }
 });
-const o = "14.25.0";
+const o = "14.26.0";

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

@@ -0,0 +1,37 @@
+"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, {
+    disabled: function() {
+        return f;
+    },
+    field: function() {
+        return y;
+    },
+    focusedField: function() {
+        return r;
+    },
+    input: function() {
+        return d;
+    },
+    passwordDot: function() {
+        return o;
+    },
+    passwordInput: function() {
+        return p;
+    },
+    readOnlyField: function() {
+        return a;
+    }
+});
+require("./sprinkles.css.ts.vanilla.css-mistica.js");
+require("./text-field-base.css.ts.vanilla.css-mistica.js");
+require("./pin-field.css.ts.vanilla.css-mistica.js");
+var f = "_3pc6ro0", y = "_1y2v1nfe6 _1y2v1nfdn _1y2v1nfb6 _1y2v1nfdw _1y2v1nfb0 _1y2v1nfc5 _1y2v1nfcl _1y2v1nf31", r = "_3pc6ro2 _1y2v1nfe6 _1y2v1nfdn _1y2v1nfb6 _1y2v1nfdw _1y2v1nfb0 _1y2v1nfc5 _1y2v1nfcl _1y2v1nf31", d = "_3pc6ro4", o = "_3pc6ro7", p = "_1y2v1nf2x", a = "_1y2v1nfe6 _1y2v1nfdn _1y2v1nfb6 _1y2v1nfdw _1y2v1nfb0 _1y2v1nfc5 _1y2v1nfcl _1y2v1nf4m";

package/dist/pin-field.css.d.ts

@@ -0,0 +1,7 @@
+export declare const disabled: string;
+export declare const field: string;
+export declare const focusedField: string;
+export declare const readOnlyField: string;
+export declare const input: string;
+export declare const passwordInput: string;
+export declare const passwordDot: string;

package/dist/pin-field.css.ts.vanilla.css-mistica.js

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

package/dist/pin-field.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+type OtpFieldProps = {
+    length?: number;
+    /**
+     * Whether to hide the input code (password like input), false by default.
+     */
+    hideCode?: boolean;
+    /**
+     * Whether to read incoming SMS with OTP codes. It's true by default if hideCode is false, and false otherwise.
+     */
+    readSms?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    name: string;
+    value?: string;
+    defaultValue?: string;
+    helperText?: string;
+    error?: boolean;
+    onChangeValue?: (value: string, rawValue: string) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+};
+declare const PinField: ({ length, hideCode, readSms, disabled, readOnly, name, value, defaultValue, helperText, error, onChangeValue, onChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: OtpFieldProps) => React.ReactElement;
+export default PinField;