@telefonica/mistica 10.22.1 → 10.24.0

package/dist-es/phone-number-field.js

@@ -7,6 +7,11 @@ import { TextFieldBaseAutosuggest } from './text-field-base';
 import { useTheme } from './hooks';
 import { createChangeEvent } from './utils/dom';
 import { combineRefs } from './utils/common';
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
@@ -24,12 +29,14 @@ function _defineProperty(obj, key, value) {
     return obj;
 }
 function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
     var _arr = [];
     var _n = true;
     var _d = false;
-    var _e = undefined;
+    var _s, _e;
     try {
-        for(var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true){
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
             _arr.push(_s.value);
             if (i && _arr.length === i) break;
         }
@@ -46,12 +53,11 @@ function _iterableToArrayLimit(arr, i) {
     return _arr;
 }
 function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _objectSpread(target) {
     for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[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) {
@@ -65,8 +71,7 @@ function _objectSpread(target) {
     return target;
 }
 function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {
-    };
+    if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
@@ -81,10 +86,8 @@ function _objectWithoutProperties(source, excluded) {
     return target;
 }
 function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {
-    };
-    var target = {
-    };
+    if (source == null) return {};
+    var target = {};
     var sourceKeys = Object.keys(source);
     var key, i;
     for(i = 0; i < sourceKeys.length; i++){
@@ -95,7 +98,15 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     return target;
 }
 function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    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 formatPhone = function(regionCode, number) {
     return formatAsYouType(number.replace(/[^\d+*#]/g, ''), regionCode);
@@ -104,13 +115,20 @@ var isValidPrefix = function(prefix) {
     return !!prefix.match(/^\+\d+$/);
 };
 var PhoneInput = function(_param) {
-    var inputRef = _param.inputRef, value = _param.value, defaultValue = _param.defaultValue, onChange = _param.onChange, prefix = _param.prefix, e164 = _param.e164, other = _objectWithoutProperties(_param, ["inputRef", "value", "defaultValue", "onChange", "prefix", "e164"]);
+    var inputRef = _param.inputRef, value1 = _param.value, defaultValue = _param.defaultValue, onChange = _param.onChange, prefix = _param.prefix, e164 = _param.e164, other = _objectWithoutProperties(_param, [
+        "inputRef",
+        "value",
+        "defaultValue",
+        "onChange",
+        "prefix",
+        "e164"
+    ]);
     var ref = _slicedToArray(React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''), 2), selfValue = ref[0], setSelfValue = ref[1];
     var ref1 = React.useRef(null);
-    var ref2 = useTheme(), i18n = ref2.i18n;
+    var i18n = useTheme().i18n;
     var regionCode = i18n.phoneNumberFormattingRegionCode;
-    var isControlledByParent = typeof value !== 'undefined';
-    var controlledValue = isControlledByParent ? value : selfValue;
+    var isControlledByParent = typeof value1 !== 'undefined';
+    var controlledValue = isControlledByParent ? value1 : selfValue;
     var handleChangeValue = React.useCallback(function(newFormattedValue) {
         if (!isControlledByParent) {
             setSelfValue(newFormattedValue);
@@ -155,8 +173,7 @@ var PhoneInput = function(_param) {
             return s.replace(/@/g, '-');
         }
     });
-    return(/*#__PURE__*/ _jsx("input", _objectSpread({
-    }, other, {
+    return(/*#__PURE__*/ _jsx("input", _objectSpread({}, other, {
         value: rifm.value,
         onChange: rifm.onChange,
         type: "tel" // shows telephone keypad in Android and iOS
@@ -165,8 +182,21 @@ var PhoneInput = function(_param) {
     })));
 };
 var PhoneNumberField = function(_param) {
-    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validate = _param.validate, onChange = _param.onChange, onChangeValue = _param.onChangeValue, onBlur = _param.onBlur, value = _param.value, defaultValue = _param.defaultValue, e164 = _param.e164, rest = _objectWithoutProperties(_param, ["disabled", "error", "helperText", "name", "optional", "validate", "onChange", "onChangeValue", "onBlur", "value", "defaultValue", "e164"]);
-    var ref = useTheme(), i18n = ref.i18n;
+    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validate = _param.validate, onChange = _param.onChange, onChangeValue = _param.onChangeValue, onBlur = _param.onBlur, value2 = _param.value, defaultValue = _param.defaultValue, e164 = _param.e164, rest = _objectWithoutProperties(_param, [
+        "disabled",
+        "error",
+        "helperText",
+        "name",
+        "optional",
+        "validate",
+        "onChange",
+        "onChangeValue",
+        "onBlur",
+        "value",
+        "defaultValue",
+        "e164"
+    ]);
+    var i18n = useTheme().i18n;
     var processValue = function(value) {
         if (e164) {
             try {
@@ -187,7 +217,7 @@ var PhoneNumberField = function(_param) {
     };
     var fieldProps = useFieldProps({
         name: name,
-        value: value,
+        value: value2,
         defaultValue: defaultValue,
         processValue: processValue,
         helperText: helperText,
@@ -199,8 +229,7 @@ var PhoneNumberField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
-    }, rest, fieldProps, {
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
         type: "phone",
         inputProps: {
             prefix: rest.prefix

package/dist-es/placeholder.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import { applyAlpha } from './utils/color';
 import { useTheme } from './hooks';
 export var AvatarPlaceholder = function(param) {
@@ -14,7 +15,7 @@ export var AvatarPlaceholder = function(param) {
 };
 export var Placeholder = function(param) {
     var _width = param.width, width = _width === void 0 ? 'auto' : _width, _height = param.height, height = _height === void 0 ? 120 : _height;
-    var ref = useTheme(), colors = ref.colors;
+    var colors = useTheme().colors;
     return(/*#__PURE__*/ _jsx("div", {
         style: {
             height: height,

package/dist-es/popover.js

@@ -4,6 +4,11 @@ import { createUseStyles } from './jss';
 import IcnCloseRegular from './generated/mistica-icons/icon-close-regular';
 import IconButton from './icon-button';
 import { useTheme, useScreenSize } from './hooks';
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
@@ -21,12 +26,14 @@ function _defineProperty(obj, key, value) {
     return obj;
 }
 function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
     var _arr = [];
     var _n = true;
     var _d = false;
-    var _e = undefined;
+    var _s, _e;
     try {
-        for(var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true){
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
             _arr.push(_s.value);
             if (i && _arr.length === i) break;
         }
@@ -43,12 +50,11 @@ function _iterableToArrayLimit(arr, i) {
     return _arr;
 }
 function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _objectSpread(target) {
     for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[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) {
@@ -62,7 +68,15 @@ function _objectSpread(target) {
     return target;
 }
 function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    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);
 }
 // Zeplin definition:
 // https://app.zeplin.io/project/5c9b6f097168bc065782b5c3/screen/5d15d87e46571573089f2863
@@ -154,8 +168,8 @@ var useStyles = createUseStyles(function(theme) {
 var getWidthDesktop = function(customWidth) {
     return customWidth ? customWidth : maxWidthDesktop;
 };
-var getPosition = function(param, isTabletOrSmaller) {
-    var position = param === void 0 ? defaultPositionDesktop : param;
+var getPosition = function() {
+    var position = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : defaultPositionDesktop, isTabletOrSmaller = arguments.length > 1 ? arguments[1] : void 0;
     return isTabletOrSmaller && (position === 'left' || position === 'right') ? defaultPositionMobile : position;
 };
 var getWidth = function(isTabletOrSmaller, width) {
@@ -233,8 +247,8 @@ var getTargetPosition = function(targetWrapper) {
 var Popover = function(param) {
     var description = param.description, title = param.title, onClose = param.onClose, trackingEvent = param.trackingEvent, position = param.position, width = param.width, target = param.target, asset = param.asset, _isVisible = param.isVisible, isVisible = _isVisible === void 0 ? true : _isVisible;
     var ref = useTheme(), texts = ref.texts, colors = ref.colors;
-    var ref1 = useScreenSize(), isTabletOrSmaller = ref1.isTabletOrSmaller;
-    var ref2 = _slicedToArray(React.useState(null), 2), targetPosition = ref2[0], setTargetPosition = ref2[1];
+    var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
+    var ref1 = _slicedToArray(React.useState(null), 2), targetPosition = ref1[0], setTargetPosition = ref1[1];
     var targetWrapperRef = React.useRef(null);
     position = getPosition(position, isTabletOrSmaller);
     var innerWidth = getWidth(isTabletOrSmaller, width);
@@ -263,7 +277,7 @@ var Popover = function(param) {
     };
     var popoverContainer = null;
     if (isVisible && targetPosition) {
-        var ref = getPositionStyles(position, innerWidth, targetPosition, isTabletOrSmaller), containerStyles = ref.containerStyles, arrowStyles = ref.arrowStyles;
+        var ref2 = getPositionStyles(position, innerWidth, targetPosition, isTabletOrSmaller), containerStyles = ref2.containerStyles, arrowStyles = ref2.arrowStyles;
         popoverContainer = /*#__PURE__*/ _jsxs("div", {
             className: classes.container,
             style: _objectSpread({

package/dist-es/portal.js

@@ -1,27 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import ReactDOM from 'react-dom';
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) {
-        for(var i = 0, arr2 = new Array(arr.length); i < arr.length; i++){
-            arr2[i] = arr[i];
-        }
-        return arr2;
-    }
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
 }
 function _iterableToArray(iter) {
-    if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
 function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
     var _arr = [];
     var _n = true;
     var _d = false;
-    var _e = undefined;
+    var _s, _e;
     try {
-        for(var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true){
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
             _arr.push(_s.value);
             if (i && _arr.length === i) break;
         }
@@ -38,23 +40,30 @@ function _iterableToArrayLimit(arr, i) {
     return _arr;
 }
 function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance");
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    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);
 }
 /**
  * @deprecated - to be removed in next major
  */ var PortalNodes = /*#__PURE__*/ React.createContext({
     portalNodes: [],
-    setPortalNodes: function() {
-    }
+    setPortalNodes: function() {}
 });
 /**
  * @deprecated - to be removed in next major
@@ -77,7 +86,7 @@ function _toConsumableArray(arr) {
 export var Portal = function(param) {
     var children = param.children, className = param.className;
     var ref = _slicedToArray(React.useState(null), 2), container = ref[0], setContainer = ref[1];
-    var ref1 = usePortalNodes(), setPortalNodes = ref1.setPortalNodes;
+    var setPortalNodes = usePortalNodes().setPortalNodes;
     React.useEffect(function() {
         if (!container) {
             var newContainer = document.createElement('div');

package/dist-es/progress-bar.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
 import { createUseStyles } from './jss';
 var transition = '1s cubic-bezier(0.75, 0, 0.27, 1)';
-var useStyles = createUseStyles(function(param) {
-    var colors = param.colors;
+var useStyles = createUseStyles(function(param1) {
+    var colors = param1.colors;
     return {
         barBackground: {
             height: 4,

package/dist-es/radio-button.js

@@ -9,6 +9,11 @@ import Inline from './inline';
 import classnames from 'classnames';
 import { useTheme } from './hooks';
 import { getPrefixedDataAttributes } from './utils/dom';
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
@@ -26,12 +31,14 @@ function _defineProperty(obj, key, value) {
     return obj;
 }
 function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
     var _arr = [];
     var _n = true;
     var _d = false;
-    var _e = undefined;
+    var _s, _e;
     try {
-        for(var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true){
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
             _arr.push(_s.value);
             if (i && _arr.length === i) break;
         }
@@ -48,12 +55,11 @@ function _iterableToArrayLimit(arr, i) {
     return _arr;
 }
 function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _objectSpread(target) {
     for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[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) {
@@ -67,8 +73,7 @@ function _objectSpread(target) {
     return target;
 }
 function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {
-    };
+    if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
@@ -83,10 +88,8 @@ function _objectWithoutProperties(source, excluded) {
     return target;
 }
 function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {
-    };
-    var target = {
-    };
+    if (source == null) return {};
+    var target = {};
     var sourceKeys = Object.keys(source);
     var key, i;
     for(i = 0; i < sourceKeys.length; i++){
@@ -97,7 +100,15 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     return target;
 }
 function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    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 useRadioButtonStyles = createUseStyles(function(param) {
     var colors = param.colors, isIos = param.isIos;
@@ -148,19 +159,19 @@ var RadioContext = /*#__PURE__*/ React.createContext({
     disabled: false,
     selectedValue: null,
     focusableValue: null,
-    select: function() {
-    },
-    selectNext: function() {
-    },
-    selectPrev: function() {
-    }
+    select: function() {},
+    selectNext: function() {},
+    selectPrev: function() {}
 });
 export var useRadioContext = function() {
     return React.useContext(RadioContext);
 };
-var _obj;
 var RadioButton = function(_param) {
-    var value = _param.value, id = _param.id, dataAttributes = _param.dataAttributes, rest = _objectWithoutProperties(_param, ["value", "id", "dataAttributes"]);
+    var value = _param.value, id = _param.id, dataAttributes = _param.dataAttributes, rest = _objectWithoutProperties(_param, [
+        "value",
+        "id",
+        "dataAttributes"
+    ]);
     var ref = useRadioContext(), disabled = ref.disabled, selectedValue = ref.selectedValue, focusableValue = ref.focusableValue, select = ref.select, selectNext = ref.selectNext, selectPrev = ref.selectPrev;
     var ref1 = React.useRef(null);
     var checked = value === selectedValue;
@@ -168,7 +179,7 @@ var RadioButton = function(_param) {
     var classes = useRadioButtonStyles({
         checked: checked
     });
-    var ref2 = useTheme(), isIos = ref2.isIos;
+    var isIos = useTheme().isIos;
     var handleKeyDown = function(event) {
         switch(event.keyCode){
             case SPACE:
@@ -191,12 +202,11 @@ var RadioButton = function(_param) {
             default:
         }
     };
+    var _obj;
     var radio = /*#__PURE__*/ _jsx("div", {
-        className: classnames(classes.outerCircle, (_obj = {
-        }, _defineProperty(_obj, classes.outerCircleChecked, checked), _defineProperty(_obj, classes.disabled, disabled), _obj)),
+        className: classnames(classes.outerCircle, (_obj = {}, _defineProperty(_obj, classes.outerCircleChecked, checked), _defineProperty(_obj, classes.disabled, disabled), _obj)),
         children: !isIos && /*#__PURE__*/ _jsx("div", {
-            className: classnames(classes.innerCircle, _defineProperty({
-            }, classes.innerCircleChecked, checked))
+            className: classnames(classes.innerCircle, _defineProperty({}, classes.innerCircleChecked, checked))
         })
     });
     return(// eslint-disable-next-line jsx-a11y/interactive-supports-focus
@@ -248,9 +258,9 @@ export var RadioGroup = function(props) {
         onChange: props.onChange,
         disabled: props.disabled
     }), valueContext = ref.value, defaultValue = ref.defaultValue, onChangeContext = ref.onChange, focusableRef = ref.focusableRef, disabled = ref.disabled;
-    var ref1;
+    var ref2;
     // This state is needed because the component should be able to work outside a Form context
-    var ref2 = _slicedToArray(React.useState((ref1 = valueContext !== null && valueContext !== void 0 ? valueContext : defaultValue) !== null && ref1 !== void 0 ? ref1 : ''), 2), value = ref2[0], setValue = ref2[1];
+    var ref3 = _slicedToArray(React.useState((ref2 = valueContext !== null && valueContext !== void 0 ? valueContext : defaultValue) !== null && ref2 !== void 0 ? ref2 : ''), 2), value1 = ref3[0], setValue = ref3[1];
     // Propagate context value to inner state
     React.useEffect(function() {
         if (valueContext !== undefined) {
@@ -263,12 +273,12 @@ export var RadioGroup = function(props) {
         setValue(value);
         onChangeContext(value);
     };
-    var ref3 = _slicedToArray(React.useState(null), 2), firstRadioValue = ref3[0], setFirstRadioValue = ref3[1];
-    var ref4 = React.useRef(null);
+    var ref4 = _slicedToArray(React.useState(null), 2), firstRadioValue = ref4[0], setFirstRadioValue = ref4[1];
+    var ref5 = React.useRef(null);
     var selectNext = function() {
-        if (ref4.current) {
-            var checkedRadio = ref4.current.querySelector('[role=radio][aria-checked=true]');
-            var allRadios = Array.from(ref4.current.querySelectorAll('[role=radio]'));
+        if (ref5.current) {
+            var checkedRadio = ref5.current.querySelector('[role=radio][aria-checked=true]');
+            var allRadios = Array.from(ref5.current.querySelectorAll('[role=radio]'));
             if (allRadios.length === 0) {
                 return;
             }
@@ -283,9 +293,9 @@ export var RadioGroup = function(props) {
         }
     };
     var selectPrev = function() {
-        if (ref4.current) {
-            var checkedRadio = ref4.current.querySelector('[role=radio][aria-checked=true]');
-            var allRadios = Array.from(ref4.current.querySelectorAll('[role=radio]'));
+        if (ref5.current) {
+            var checkedRadio = ref5.current.querySelector('[role=radio][aria-checked=true]');
+            var allRadios = Array.from(ref5.current.querySelectorAll('[role=radio]'));
             if (allRadios.length === 0) {
                 return;
             }
@@ -300,24 +310,24 @@ export var RadioGroup = function(props) {
         }
     };
     React.useEffect(function() {
-        if (ref4.current) {
-            var radio = ref4.current.querySelector('[role=radio]');
+        if (ref5.current) {
+            var radio = ref5.current.querySelector('[role=radio]');
             if (radio) {
                 var _value;
                 setFirstRadioValue((_value = radio.dataset.value) !== null && _value !== void 0 ? _value : null);
             }
         }
     }, []);
-    var ref5;
-    var focusableValue = (ref5 = value !== null && value !== void 0 ? value : firstRadioValue) !== null && ref5 !== void 0 ? ref5 : null;
+    var ref6;
+    var focusableValue = (ref6 = value1 !== null && value1 !== void 0 ? value1 : firstRadioValue) !== null && ref6 !== void 0 ? ref6 : null;
     return(/*#__PURE__*/ _jsx("div", {
-        ref: combineRefs(ref4, focusableRef),
+        ref: combineRefs(ref5, focusableRef),
         role: "radiogroup",
         "aria-labelledby": props['aria-labelledby'],
         children: /*#__PURE__*/ _jsx(RadioContext.Provider, {
             value: {
                 disabled: disabled,
-                selectedValue: value !== null && value !== void 0 ? value : defaultValue,
+                selectedValue: value1 !== null && value1 !== void 0 ? value1 : defaultValue,
                 focusableValue: focusableValue,
                 select: onChange,
                 selectNext: selectNext,

package/dist-es/responsive-layout.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
 import { createUseStyles } from './jss';
 import classnames from 'classnames';
+import { useScreenSize } from './hooks';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -18,8 +20,8 @@ var MOBILE_SIDE_MARGIN = 16;
 var TABLET_SIDE_MARGIN = 32;
 var SMALL_DESKTOP_SIDE_MARGIN = 40;
 var LARGE_DESKTOP_MAX_WIDTH = 1224;
-var _obj;
 var useStyles = createUseStyles(function(theme) {
+    var _obj;
     return {
         container: {
             width: '100%'
@@ -47,15 +49,23 @@ var useStyles = createUseStyles(function(theme) {
         })
     };
 });
+var ResponsiveLayoutMarginContext = /*#__PURE__*/ React.createContext(0);
+export var useResonsiveLayoutMargin = function() {
+    return React.useContext(ResponsiveLayoutMarginContext);
+};
 var ResponsiveLayout = function(param) {
     var children = param.children, className = param.className, fullWidth = param.fullWidth;
     var classes = useStyles();
-    return(/*#__PURE__*/ _jsx("div", {
-        className: classnames(classes.container, className),
+    var ref = useScreenSize(), isMobile = ref.isMobile, isTablet = ref.isTablet;
+    var sideMargin = isMobile ? MOBILE_SIDE_MARGIN : isTablet ? TABLET_SIDE_MARGIN : null;
+    return(/*#__PURE__*/ _jsx(ResponsiveLayoutMarginContext.Provider, {
+        value: sideMargin,
         children: /*#__PURE__*/ _jsx("div", {
-            className: classnames(classes.layout, _defineProperty({
-            }, classes.layoutFullWidth, fullWidth)),
-            children: children
+            className: classnames(classes.container, className),
+            children: /*#__PURE__*/ _jsx("div", {
+                className: classnames(classes.layout, _defineProperty({}, classes.layoutFullWidth, fullWidth)),
+                children: children
+            })
         })
     }));
 };