@telefonica/mistica 12.9.1 → 12.10.0

package/dist/navigation-bar.js.flow

@@ -18,7 +18,7 @@ declare type MainNavigationBarSection =
   title: string,
 };
 declare type MainNavigationBarProps = {
-  sections: Array<MainNavigationBarSection>,
+  sections: $ReadOnlyArray<MainNavigationBarSection>,
   selectedIndex?: number,
   right?: React.Element<any>,
   logo?: React.Element<any>,

package/dist/package-version.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
         return o;
     }
 });
-var o = "12.9.1";
+var o = "12.10.0";

package/dist/placeholder.js

@@ -5,22 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Placeholder", {
     enumerable: true,
     get: function() {
-        return a;
+        return n;
     }
 });
 var _colorJs = require("./utils/color.js");
-var _hooksJs = require("./hooks.js");
+var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
-var a = function a(param) {
+var n = function n(param) {
     var tmp = param.width, t = tmp === void 0 ? "auto" : tmp, tmp1 = param.height, i = tmp1 === void 0 ? 120 : tmp1;
-    var ref = (0, _hooksJs.useTheme)(), e = ref.colors;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
         style: {
             height: i,
             width: t,
             boxSizing: "border-box",
-            background: (0, _colorJs.applyAlpha)(e.neutralHigh, 0.08),
-            border: "2px solid ".concat((0, _colorJs.applyAlpha)(e.neutralHigh, 0.3)),
+            background: (0, _colorJs.applyAlpha)(_skinContractCssMisticaJs.vars.rawColors.neutralHigh, 0.08),
+            border: "2px solid ".concat((0, _colorJs.applyAlpha)(_skinContractCssMisticaJs.vars.rawColors.neutralHigh, 0.3)),
             position: "relative"
         },
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("svg", {
@@ -30,7 +29,7 @@ var a = function a(param) {
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("line", {
                     style: {
                         strokeWidth: 2,
-                        stroke: (0, _colorJs.applyAlpha)(e.neutralHigh, 0.1)
+                        stroke: (0, _colorJs.applyAlpha)(_skinContractCssMisticaJs.vars.rawColors.neutralHigh, 0.1)
                     },
                     x1: 0,
                     y1: 0,
@@ -40,7 +39,7 @@ var a = function a(param) {
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("line", {
                     style: {
                         strokeWidth: 2,
-                        stroke: (0, _colorJs.applyAlpha)(e.neutralHigh, 0.1)
+                        stroke: (0, _colorJs.applyAlpha)(_skinContractCssMisticaJs.vars.rawColors.neutralHigh, 0.1)
                     },
                     x1: "100%",
                     y1: 0,

package/dist/radio-button.js

@@ -10,13 +10,13 @@ function _export(target, all) {
 }
 _export(exports, {
     RadioGroup: function() {
-        return ee;
+        return te;
     },
     default: function() {
-        return _;
+        return ee;
     },
     useRadioContext: function() {
-        return U;
+        return H;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
@@ -191,6 +191,10 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
+var _typeof = function _typeof(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+};
 function _unsupportedIterableToArray(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -199,8 +203,8 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-var G = (0, _jssJs.createUseStyles)(function(param) {
-    var e = param.colors, o = param.isIos;
+var U = (0, _jssJs.createUseStyles)(function(param) {
+    var e = param.colors, a = param.isIos;
     return {
         outerCircle: {
             cursor: "pointer",
@@ -212,13 +216,13 @@ var G = (0, _jssJs.createUseStyles)(function(param) {
             alignItems: "center",
             justifyContent: "center",
             verticalAlign: "middle",
-            boxShadow: "inset 0 0 0 ".concat(o ? 1 : 2, "px ").concat(e.control),
+            boxShadow: "inset 0 0 0 ".concat(a ? 1 : 2, "px ").concat(e.control),
             background: e.background,
             transition: "background 0.3s, box-shadow 0.3s"
         },
         outerCircleChecked: {
-            boxShadow: "inset 0 0 0 ".concat(o ? 5 : 2, "px ").concat(e.controlActivated),
-            background: o ? "radial-gradient(circle, ".concat(e.iosControlKnob, " 0%, ").concat(e.iosControlKnob, " 64%, transparent 64%, transparent 100%)") : e.background
+            boxShadow: "inset 0 0 0 ".concat(a ? 5 : 2, "px ").concat(e.controlActivated),
+            background: a ? "radial-gradient(circle, ".concat(e.iosControlKnob, " 0%, ").concat(e.iosControlKnob, " 64%, transparent 64%, transparent 100%)") : e.background
         },
         innerCircle: {
             display: "flex",
@@ -242,65 +246,65 @@ var G = (0, _jssJs.createUseStyles)(function(param) {
             cursor: "default"
         }
     };
-}), A = /*#__PURE__*/ _react.createContext({
+}), w = /*#__PURE__*/ _react.createContext({
     disabled: !1,
     selectedValue: null,
     focusableValue: null,
     select: function select() {},
     selectNext: function selectNext() {},
     selectPrev: function selectPrev() {}
-}), U = function U() {
-    return _react.useContext(A);
-}, _ = function _(_param) {
-    var e = _param.value, o = _param.id, x = _param.dataAttributes, C = _param["aria-labelledby"], h = _objectWithoutProperties(_param, [
+}), H = function H() {
+    return _react.useContext(w);
+}, ee = function ee(_param) {
+    var e = _param.value, a = _param.id, x = _param.dataAttributes, y = _param["aria-labelledby"], u = _objectWithoutProperties(_param, [
         "value",
         "id",
         "dataAttributes",
         "aria-labelledby"
     ]);
     var _obj;
-    var ref = U(), i = ref.disabled, s = ref.selectedValue, p = ref.focusableValue, f = ref.select, y = ref.selectNext, k = ref.selectPrev, r = (0, _hooksJs.useAriaId)(C), R = _react.useRef(null), u = e === s, v = p === e ? 0 : -1, n = G({
-        checked: u
-    }), ref1 = (0, _hooksJs.useTheme)(), g = ref1.isIos, a = function a(l) {
-        switch(l.keyCode){
+    var ref = H(), n = ref.disabled, k = ref.selectedValue, c = ref.focusableValue, f = ref.select, h = ref.selectNext, R = ref.selectPrev, b = (0, _hooksJs.useAriaId)(y), o = _react.useRef(null), d = e === k, v = c === e ? 0 : -1, l = U({
+        checked: d
+    }), ref1 = (0, _hooksJs.useTheme)(), C = ref1.isIos, g = function g(t) {
+        switch(t.keyCode){
             case _keyCodesJs.SPACE:
-                f(e), l.preventDefault(), l.stopPropagation();
+                f(e), t.preventDefault(), t.stopPropagation();
                 break;
             case _keyCodesJs.RIGHT:
             case _keyCodesJs.DOWN:
-                y(), l.preventDefault(), l.stopPropagation();
+                h(), t.preventDefault(), t.stopPropagation();
                 break;
             case _keyCodesJs.LEFT:
             case _keyCodesJs.UP:
-                k(), l.preventDefault(), l.stopPropagation();
+                R(), t.preventDefault(), t.stopPropagation();
                 break;
         }
-    }, t = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        className: (0, _classnames.default)(n.outerCircle, (_obj = {}, _defineProperty(_obj, n.outerCircleChecked, u), _defineProperty(_obj, n.disabled, i), _obj)),
-        children: !g && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-            className: (0, _classnames.default)(n.innerCircle, _defineProperty({}, n.innerCircleChecked, u))
+    }, r = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+        className: (0, _classnames.default)(l.outerCircle, (_obj = {}, _defineProperty(_obj, l.outerCircleChecked, d), _defineProperty(_obj, l.disabled, n), _obj)),
+        children: !C && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            className: (0, _classnames.default)(l.innerCircle, _defineProperty({}, l.innerCircleChecked, d))
         })
     });
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("span", _objectSpreadProps(_objectSpread({
-        ref: R,
-        id: o,
-        tabIndex: i ? void 0 : v,
+        ref: o,
+        id: a,
+        tabIndex: n ? void 0 : v,
         role: "radio",
         "data-value": e,
-        "aria-checked": u,
-        "aria-disabled": i,
-        "aria-labelledby": r,
-        onClick: i ? void 0 : function() {
+        "aria-checked": d,
+        "aria-disabled": n,
+        "aria-labelledby": b,
+        onClick: n ? void 0 : function() {
             return f(e);
         },
-        onKeyDown: i ? void 0 : a,
-        className: n.radioButton
+        onKeyDown: n ? void 0 : g,
+        className: l.radioButton
     }, (0, _domJs.getPrefixedDataAttributes)(x)), {
-        children: h.render ? h.render({
-            controlElement: t,
-            disabled: !!i,
-            checked: u,
-            labelId: r
+        children: u.render ? u.render({
+            controlElement: r,
+            disabled: !!n,
+            checked: d,
+            labelId: b
         }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_inlineJs.default, {
             space: 16,
             children: [
@@ -312,72 +316,72 @@ var G = (0, _jssJs.createUseStyles)(function(param) {
                             position: "relative",
                             top: -2
                         },
-                        children: t
+                        children: r
                     })
                 }),
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                     regular: !0,
                     as: "div",
-                    id: r,
+                    id: b,
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("span", {
-                        className: i ? n.disabled : "",
-                        children: h.children
+                        className: n ? l.disabled : "",
+                        children: u.children
                     })
                 })
             ]
         })
     }));
-}, ee = function ee(e) {
-    var n, g;
+}, te = function te(e) {
+    var C, g;
     var ref = (0, _formContextJs.useControlProps)({
         name: e.name,
         value: e.value,
         defaultValue: e.defaultValue,
         onChange: e.onChange,
         disabled: e.disabled
-    }), o = ref.value, x = ref.defaultValue, C = ref.onChange, h = ref.focusableRef, i = ref.disabled, ref1 = _slicedToArray(_react.useState((n = o != null ? o : x) != null ? n : ""), 2), s = ref1[0], p = ref1[1];
+    }), a = ref.value, x = ref.defaultValue, y = ref.onChange, u = ref.focusableRef, n = ref.disabled, k = (typeof a === "undefined" ? "undefined" : _typeof(a)) < "u", ref1 = _slicedToArray(_react.useState((C = a != null ? a : x) != null ? C : ""), 2), c = ref1[0], f = ref1[1];
     _react.useEffect(function() {
-        o !== void 0 && p(o);
+        a !== void 0 && f(a);
     }, [
-        o
+        a
     ]);
-    var f = function f(a) {
-        p(a), C(a);
-    }, ref2 = _slicedToArray(_react.useState(null), 2), y = ref2[0], k = ref2[1], r = _react.useRef(null), R = function R() {
-        if (r.current) {
-            var a = r.current.querySelector("[role=radio][aria-checked=true]"), t = Array.from(r.current.querySelectorAll("[role=radio]"));
+    var h = function h(r) {
+        k || f(r), y(r);
+    }, ref2 = _slicedToArray(_react.useState(null), 2), R = ref2[0], b = ref2[1], o = _react.useRef(null), d = function d() {
+        if (o.current) {
+            var r = o.current.querySelector("[role=radio][aria-checked=true]"), t = Array.from(o.current.querySelectorAll("[role=radio]"));
             if (t.length === 0) return;
-            var S = ((a ? t.indexOf(a) : 0) + 1) % t.length, b = t[S], m = b.dataset.value;
-            m && (b.focus(), f(m));
+            var S = ((r ? t.indexOf(r) : 0) + 1) % t.length, m = t[S], p = m.dataset.value;
+            p && (m.focus(), h(p));
         }
-    }, u = function u() {
-        if (r.current) {
-            var a = r.current.querySelector("[role=radio][aria-checked=true]"), t = Array.from(r.current.querySelectorAll("[role=radio]"));
+    }, v = function v() {
+        if (o.current) {
+            var r = o.current.querySelector("[role=radio][aria-checked=true]"), t = Array.from(o.current.querySelectorAll("[role=radio]"));
             if (t.length === 0) return;
-            var l = a ? t.indexOf(a) : 0, S = (t.length + l - 1) % t.length, b = t[S], m = b.dataset.value;
-            m && (b.focus(), f(m));
+            var P = r ? t.indexOf(r) : 0, S = (t.length + P - 1) % t.length, m = t[S], p = m.dataset.value;
+            p && (m.focus(), h(p));
         }
     };
     _react.useEffect(function() {
-        var a;
-        if (r.current) {
-            var t = r.current.querySelector("[role=radio]");
-            t && k((a = t.dataset.value) != null ? a : null);
+        var r;
+        if (o.current) {
+            var t = o.current.querySelector("[role=radio]");
+            t && b((r = t.dataset.value) != null ? r : null);
         }
     }, []);
-    var v = (g = s != null ? s : y) != null ? g : null;
+    var l = (g = c != null ? c : R) != null ? g : null;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        ref: (0, _commonJs.combineRefs)(r, h),
+        ref: (0, _commonJs.combineRefs)(o, u),
         role: "radiogroup",
         "aria-labelledby": e["aria-labelledby"],
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(A.Provider, {
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(w.Provider, {
             value: {
-                disabled: i,
-                selectedValue: s != null ? s : x,
-                focusableValue: v,
-                select: f,
-                selectNext: R,
-                selectPrev: u
+                disabled: n,
+                selectedValue: c != null ? c : x,
+                focusableValue: l,
+                select: h,
+                selectNext: d,
+                selectPrev: v
             },
             children: e.children
         })

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

@@ -0,0 +1,29 @@
+"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, {
+    container: function() {
+        return o;
+    },
+    fullWidth: function() {
+        return v;
+    },
+    responsiveLayout: function() {
+        return i;
+    },
+    vars: function() {
+        return f;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./responsive-layout.css.ts.vanilla.js");
+var o = "_1y2v1nf9h", v = "_17lofg74 _1y2v1nf9h", i = "_17lofg72", f = {
+    sideMargin: "var(--_17lofg70)"
+};

package/dist/responsive-layout.css.d.ts

@@ -0,0 +1,6 @@
+export declare const vars: {
+    sideMargin: import("@vanilla-extract/private").CSSVarFunction;
+};
+export declare const container: string;
+export declare const responsiveLayout: string;
+export declare const fullWidth: string;

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

@@ -0,0 +1,11 @@
+// @flow
+
+declare export var vars: {
+  sideMargin: $PropertyType<
+    $Exports<"@vanilla-extract/private">,
+    "CSSVarFunction"
+  >,
+};
+declare export var container: string;
+declare export var responsiveLayout: string;
+declare export var fullWidth: string;

package/dist/responsive-layout.css.ts.vanilla.js

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

package/dist/responsive-layout.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { DataAttributes } from './utils/types';
-export declare const useResonsiveLayoutMargin: () => null | number;
 declare type Props = {
     children: React.ReactNode;
     fullWidth?: boolean;

package/dist/responsive-layout.js

@@ -2,71 +2,23 @@
 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, {
-    default: function() {
-        return I;
-    },
-    useResonsiveLayoutMargin: function() {
-        return E;
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return C;
     }
 });
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-var _jssJs = require("./jss.js");
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _hooksJs = require("./hooks.js");
 var _domJs = require("./utils/dom.js");
 var _containerTypeContextJs = /*#__PURE__*/ _interopRequireDefault(require("./container-type-context.js"));
+var _responsiveLayoutCssMisticaJs = require("./responsive-layout.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.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, {
@@ -119,53 +71,18 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-var a = 16, i = 32, l = 40, M = 1224, S = (0, _jssJs.createUseStyles)(function(t) {
-    var _obj;
-    return {
-        container: {
-            width: "100%"
-        },
-        layout: (_obj = {
-            margin: "auto",
-            paddingLeft: "env(safe-area-inset-left)",
-            paddingRight: "env(safe-area-inset-right)"
-        }, _defineProperty(_obj, t.mq.largeDesktop, {
-            width: M
-        }), _defineProperty(_obj, t.mq.desktop, {
-            width: "calc(100% - ".concat(l * 2, "px)"),
-            margin: "0 ".concat(l, "px")
-        }), _defineProperty(_obj, t.mq.tablet, {
-            width: "calc(100% - ".concat(i * 2, "px)"),
-            margin: "0 ".concat(i, "px")
-        }), _defineProperty(_obj, t.mq.mobile, {
-            width: "calc(100% - ".concat(a * 2, "px)"),
-            margin: "0 ".concat(a, "px")
-        }), _obj),
-        layoutFullWidth: _defineProperty({
-            width: "100%",
-            margin: 0
-        }, t.mq.largeDesktop, {
-            width: "auto",
-            margin: "auto"
-        })
-    };
-}), m = /*#__PURE__*/ _react.createContext(0), E = function E() {
-    return _react.useContext(m);
-}, I = function I(param) {
-    var t = param.children, d = param.className, u = param.fullWidth, p = param.dataAttributes;
-    var o = S(), ref = (0, _hooksJs.useScreenSize)(), n = ref.isMobile, s = ref.isTablet, g = n ? a : s ? i : null, f = n ? "mobile-column" : s ? "tablet-column" : "desktop-wide-column";
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(m.Provider, {
-        value: g,
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_containerTypeContextJs.default.Provider, {
-            value: f,
-            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({
-                className: (0, _classnames.default)(o.container, d)
-            }, (0, _domJs.getPrefixedDataAttributes)(p)), {
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: (0, _classnames.default)(o.layout, _defineProperty({}, o.layoutFullWidth, u)),
-                    children: t
-                })
-            }))
-        })
+var C = function C(param) {
+    var o = param.children, t = param.className, i = param.fullWidth, r = param.dataAttributes;
+    var ref = (0, _hooksJs.useScreenSize)(), s = ref.isMobile, n = ref.isTablet, m = s ? "mobile-column" : n ? "tablet-column" : "desktop-wide-column";
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_containerTypeContextJs.default.Provider, {
+        value: m,
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({
+            className: (0, _classnames.default)(_responsiveLayoutCssMisticaJs.container, t)
+        }, (0, _domJs.getPrefixedDataAttributes)(r)), {
+            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: i ? _responsiveLayoutCssMisticaJs.fullWidth : _responsiveLayoutCssMisticaJs.responsiveLayout,
+                children: o
+            })
+        }))
     });
 };

package/dist/responsive-layout.js.flow

@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import type { DataAttributes } from "./utils/types";
-declare export var useResonsiveLayoutMargin: () => null | number;
 declare type Props = {
   children: React.Node,
   fullWidth?: boolean,

package/dist/screen-size-context.d.ts

@@ -1,11 +1,18 @@
 import * as React from 'react';
-export declare type ScreenSizeContextType = {
+export declare type ScreenSizeContextType = Readonly<{
     isMobile: boolean;
     isTablet: boolean;
     isTabletOrBigger: boolean;
     isTabletOrSmaller: boolean;
     isDesktopOrBigger: boolean;
     isLargeDesktop: boolean;
-};
-declare const ScreenSizeContext: React.Context<ScreenSizeContextType>;
+}>;
+declare const ScreenSizeContext: React.Context<Readonly<{
+    isMobile: boolean;
+    isTablet: boolean;
+    isTabletOrBigger: boolean;
+    isTabletOrSmaller: boolean;
+    isDesktopOrBigger: boolean;
+    isLargeDesktop: boolean;
+}>>;
 export default ScreenSizeContext;

package/dist/screen-size-context.js.flow

@@ -1,13 +1,22 @@
 // @flow
 
 import * as React from "react";
-export type ScreenSizeContextType = {
+export type ScreenSizeContextType = $ReadOnly<{
   isMobile: boolean,
   isTablet: boolean,
   isTabletOrBigger: boolean,
   isTabletOrSmaller: boolean,
   isDesktopOrBigger: boolean,
   isLargeDesktop: boolean,
-};
-declare var ScreenSizeContext: React.Context<ScreenSizeContextType>;
+}>;
+declare var ScreenSizeContext: React.Context<
+  $ReadOnly<{
+    isMobile: boolean,
+    isTablet: boolean,
+    isTabletOrBigger: boolean,
+    isTabletOrSmaller: boolean,
+    isDesktopOrBigger: boolean,
+    isLargeDesktop: boolean,
+  }>
+>;
 declare export default typeof ScreenSizeContext;

package/dist/search-field.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { CommonFormFieldProps } from './text-field-base';
 export interface SearchFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: string, rawValue: string) => void;
-    getSuggestions?: (value: string) => Array<string>;
+    getSuggestions?: (value: string) => ReadonlyArray<string>;
 }
 declare const SearchField: React.FC<SearchFieldProps>;
 export default SearchField;

package/dist/search-field.js.flow

@@ -6,7 +6,7 @@ export type SearchFieldProps = {
   ...$Exact<CommonFormFieldProps>,
 
   onChangeValue?: (value: string, rawValue: string) => void,
-  getSuggestions?: (value: string) => Array<string>,
+  getSuggestions?: (value: string) => $ReadOnlyArray<string>,
 };
 declare var SearchField: React.ComponentType<SearchFieldProps>;
 declare export default typeof SearchField;