@telefonica/mistica 10.22.2 → 10.24.1

package/dist/text-field-components.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.LABEL_SCALE_DESKTOP = exports.FieldContainer = exports.Label = exports.LABEL_SCALE_MOBILE = exports.DEFAULT_WIDTH = exports.HelperText = exports.LABEL_LEFT_POSITION = void 0;
+exports.FieldContainer = exports.HelperText = exports.Label = exports.LABEL_SCALE_MOBILE = exports.LABEL_SCALE_DESKTOP = exports.LABEL_LEFT_POSITION = exports.DEFAULT_WIDTH = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -19,13 +19,11 @@ function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
     } else {
-        var newObj = {
-        };
+        var newObj = {};
         if (obj != null) {
             for(var key in obj){
                 if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
-                    };
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
                     if (desc.get || desc.set) {
                         Object.defineProperty(newObj, key, desc);
                     } else {
@@ -38,6 +36,11 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
+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;
 }
@@ -55,12 +58,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;
         }
@@ -77,12 +82,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) {
     var _arguments = arguments, _loop = function(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) {
@@ -97,7 +101,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);
 }
 var DEFAULT_WIDTH = 328;
 exports.DEFAULT_WIDTH = DEFAULT_WIDTH;
@@ -107,8 +119,8 @@ var LABEL_SCALE_DESKTOP = parseFloat('0.78'); // Text1/Text3 = 14/18 (desktop)
 exports.LABEL_SCALE_DESKTOP = LABEL_SCALE_DESKTOP;
 var LABEL_SCALE_MOBILE = parseFloat('0.75'); // Text1/Text3 = 12/16 (mobile)
 exports.LABEL_SCALE_MOBILE = LABEL_SCALE_MOBILE;
-var _obj;
 var useLabelStyles = (0, _jss).createUseStyles(function(theme) {
+    var _obj;
     return {
         labelContainer: (_obj = {
             position: 'absolute',
@@ -166,7 +178,7 @@ var Label = function Label(param) {
         error: error
     });
     var ref = _slicedToArray(React.useState(''), 2), transitionStyle = ref[0], setTransitionStyle = ref[1];
-    var ref1 = (0, _hooks).useTheme(), texts = ref1.texts;
+    var texts = (0, _hooks).useTheme().texts;
     // This way we prevent animation when field is filled as initial state
     React.useEffect(function() {
         var tid = setTimeout(function() {
@@ -180,11 +192,9 @@ var Label = function Label(param) {
         };
     }, []);
     return(/*#__PURE__*/ (0, _jsxRuntime).jsxs("label", {
-        className: (0, _classnames).default(classes.labelContainer, _defineProperty({
-        }, classes.shrinked, isShrinked)),
+        className: (0, _classnames).default(classes.labelContainer, _defineProperty({}, classes.shrinked, isShrinked)),
         htmlFor: forId,
-        style: _objectSpread({
-        }, style, {
+        style: _objectSpread({}, style, {
             transition: transitionStyle
         }),
         children: [
@@ -206,7 +216,7 @@ exports.Label = Label;
 var useHelperTextStyles = (0, _jss).createUseStyles(function() {
     return {
         helperContainer: {
-            paddingLeft: 14,
+            paddingLeft: 12,
             paddingRight: 16,
             '& div': {
                 margin: 0,
@@ -226,7 +236,7 @@ var useHelperTextStyles = (0, _jss).createUseStyles(function() {
 var HelperText = function HelperText(param) {
     var leftText = param.leftText, rightText = param.rightText, error = param.error;
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
-    var ref = (0, _hooks).useTheme(), colors = ref.colors;
+    var colors = (0, _hooks).useTheme().colors;
     var classes = useHelperTextStyles();
     var leftColor = isInverse ? colors.textPrimaryInverse : error ? colors.error : colors.textSecondary;
     var rightColor = isInverse ? colors.textPrimaryInverse : colors.textSecondary;
@@ -255,10 +265,10 @@ var HelperText = function HelperText(param) {
     }));
 };
 exports.HelperText = HelperText;
-var _obj1, _obj2;
 var useFieldContainerStyles = (0, _jss).createUseStyles(function(theme) {
+    var _obj, _obj1;
     return {
-        fieldContainer: (_obj1 = {
+        fieldContainer: (_obj = {
             opacity: function opacity(param) {
                 var disabled = param.disabled;
                 return disabled ? 0.5 : 1;
@@ -266,15 +276,15 @@ var useFieldContainerStyles = (0, _jss).createUseStyles(function(theme) {
             display: 'flex',
             flexDirection: 'column',
             minWidth: 96
-        }, _defineProperty(_obj1, theme.mq.tabletOrSmaller, {
+        }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
             width: '100%'
-        }), _defineProperty(_obj1, theme.mq.desktopOrBigger, {
+        }), _defineProperty(_obj, theme.mq.desktopOrBigger, {
             width: function width(param) {
                 var fullWidth = param.fullWidth;
                 return fullWidth ? '100%' : DEFAULT_WIDTH;
             }
-        }), _obj1),
-        border: (_obj2 = {
+        }), _obj),
+        border: (_obj1 = {
             overflow: 'hidden',
             border: "1px solid ".concat(theme.colors.border),
             borderRadius: 4,
@@ -282,12 +292,12 @@ var useFieldContainerStyles = (0, _jss).createUseStyles(function(theme) {
                 var multiline = param.multiline;
                 return multiline ? 152 : 60;
             }
-        }, _defineProperty(_obj2, theme.mq.tabletOrSmaller, {
+        }, _defineProperty(_obj1, theme.mq.tabletOrSmaller, {
             height: function height(param) {
                 var multiline = param.multiline;
                 return multiline ? 152 : 56;
             }
-        }), _defineProperty(_obj2, "display", 'flex'), _defineProperty(_obj2, "position", 'relative'), _defineProperty(_obj2, "backgroundColor", theme.colors.backgroundContainer), _obj2)
+        }), _defineProperty(_obj1, "display", 'flex'), _defineProperty(_obj1, "position", 'relative'), _defineProperty(_obj1, "backgroundColor", theme.colors.backgroundContainer), _obj1)
     };
 });
 var FieldContainer = function FieldContainer(param) {

package/dist/text-field.js

@@ -12,13 +12,11 @@ function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
     } else {
-        var newObj = {
-        };
+        var newObj = {};
         if (obj != null) {
             for(var key in obj){
                 if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
-                    };
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
                     if (desc.get || desc.set) {
                         Object.defineProperty(newObj, key, desc);
                     } else {
@@ -46,8 +44,7 @@ function _defineProperty(obj, key, value) {
 }
 function _objectSpread(target) {
     var _arguments = arguments, _loop = function(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,8 +59,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) {
@@ -78,10 +74,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++){
@@ -92,7 +86,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     return target;
 }
 var TextField = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validate = _param.validate, onChangeValue = _param.onChangeValue, onChange = _param.onChange, value = _param.value, defaultValue = _param.defaultValue, onBlurProp = _param.onBlur, onFocusProp = _param.onFocus, onPress = _param.onPress, rest = _objectWithoutProperties(_param, [
+    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validate = _param.validate, onChangeValue = _param.onChangeValue, onChange = _param.onChange, value1 = _param.value, defaultValue = _param.defaultValue, onBlurProp = _param.onBlur, onFocusProp = _param.onFocus, onPress = _param.onPress, rest = _objectWithoutProperties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -135,7 +129,7 @@ var TextField = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     };
     var fieldProps = (0, _formContext).useFieldProps({
         name: name,
-        value: value,
+        value: value1,
         defaultValue: defaultValue,
         processValue: processValue,
         helperText: helperText,
@@ -147,8 +141,7 @@ var TextField = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
-    }, rest, fieldProps, {
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
         onClick: onPress,
         inputRef: (0, _common).combineRefs(inputRef, fieldProps.inputRef, ref),
         onFocus: onFocus,

package/dist/text-link.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
 var _jss = require("./jss");
 var _touchable = _interopRequireDefault(require("./touchable"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -14,6 +15,27 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {};
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -29,8 +51,7 @@ function _defineProperty(obj, key, value) {
 }
 function _objectSpread(target) {
     var _arguments = arguments, _loop = function(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) {
@@ -45,8 +66,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) {
@@ -61,10 +81,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++){
@@ -74,8 +92,8 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-var _obj;
 var useStyles = (0, _jss).createUseStyles(function(theme) {
+    var _obj;
     return {
         textLink: (_obj = {
             width: 'auto',
@@ -98,7 +116,6 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         }
     };
 });
-var _obj1;
 var TextLink = function TextLink(_param) {
     var children = _param.children, _className = _param.className, className = _className === void 0 ? '' : _className, small = _param.small, disabled = _param.disabled, props = _objectWithoutProperties(_param, [
         "children",
@@ -108,12 +125,11 @@ var TextLink = function TextLink(_param) {
     ]);
     var classes = useStyles();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
-    var ref = (0, _formContext).useForm(), formStatus = ref.formStatus;
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
-    }, props, {
+    var formStatus = (0, _formContext).useForm().formStatus;
+    var _obj;
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({}, props, {
         disabled: disabled || formStatus === 'sending',
-        className: (0, _classnames).default(classes.textLink, className, (_obj1 = {
-        }, _defineProperty(_obj1, classes.small, small), _defineProperty(_obj1, classes.inverse, isInverse), _obj1)),
+        className: (0, _classnames).default(classes.textLink, className, (_obj = {}, _defineProperty(_obj, classes.small, small), _defineProperty(_obj, classes.inverse, isInverse), _obj)),
         children: children
     })));
 };

package/dist/text.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.Text5 = exports.Text6 = exports.Text7 = exports.Text8 = exports.Text9 = exports.Text10 = exports.Text = exports.default = exports.Text1 = exports.Text2 = exports.Text3 = exports.Text4 = void 0;
+exports.default = exports.Text1 = exports.Text2 = exports.Text3 = exports.Text4 = exports.Text5 = exports.Text6 = exports.Text7 = exports.Text8 = exports.Text9 = exports.Text10 = exports.Text = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -18,13 +18,11 @@ function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
     } else {
-        var newObj = {
-        };
+        var newObj = {};
         if (obj != null) {
             for(var key in obj){
                 if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
-                    };
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
                     if (desc.get || desc.set) {
                         Object.defineProperty(newObj, key, desc);
                     } else {
@@ -52,8 +50,7 @@ function _defineProperty(obj, key, value) {
 }
 function _objectSpread(target) {
     var _arguments = arguments, _loop = function(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,15 +64,14 @@ function _objectSpread(target) {
     for(var i = 1; i < arguments.length; i++)_loop(i);
     return target;
 }
-var _obj;
 var useStyles = (0, _jss).createUseStyles(function(theme) {
     var mapToWeight = {
         light: 300,
         regular: 400,
         medium: 500
     };
-    var inverseColorsMap = (_obj = {
-    }, _defineProperty(_obj, theme.colors.textPrimary, theme.colors.textPrimaryInverse), _defineProperty(_obj, theme.colors.textSecondary, theme.colors.textSecondaryInverse), _defineProperty(_obj, theme.colors.textLink, theme.colors.textLinkInverse), _obj);
+    var _obj;
+    var inverseColorsMap = (_obj = {}, _defineProperty(_obj, theme.colors.textPrimary, theme.colors.textPrimaryInverse), _defineProperty(_obj, theme.colors.textSecondary, theme.colors.textSecondaryInverse), _defineProperty(_obj, theme.colors.textLink, theme.colors.textLinkInverse), _obj);
     var lineClamp = function lineClamp(param) {
         var truncate = param.truncate;
         if (truncate === true) {
@@ -86,7 +82,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         }
         return 'initial';
     };
-    var _color, _decoration;
+    var _color1, _decoration;
     return {
         text: _defineProperty({
             lineHeight: function lineHeight(param) {
@@ -112,8 +108,8 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 return weight ? mapToWeight[weight] : 'inherit';
             },
             color: function color(param) {
-                var isInverse = param.isInverse, _color1 = param.color, color1 = _color1 === void 0 ? theme.colors.textPrimary : _color1;
-                return isInverse ? (_color = inverseColorsMap[color1]) !== null && _color !== void 0 ? _color : color1 : color1;
+                var isInverse = param.isInverse, _color = param.color, color1 = _color === void 0 ? theme.colors.textPrimary : _color;
+                return isInverse ? (_color1 = inverseColorsMap[color1]) !== null && _color1 !== void 0 ? _color1 : color1 : color1;
             },
             textDecoration: function textDecoration(p) {
                 return (_decoration = p.decoration) !== null && _decoration !== void 0 ? _decoration : 'inherit';
@@ -169,11 +165,10 @@ var Text = function Text(param) {
         letterSpacing: letterSpacing,
         truncate: truncate
     });
-    if (!children) {
+    if (!children && children !== 0) {
         return null;
     }
-    var className = (0, _classnames).default(classes.text, _defineProperty({
-    }, classes.truncate, !!truncate));
+    var className = (0, _classnames).default(classes.text, _defineProperty({}, classes.truncate, !!truncate));
     return(/*#__PURE__*/ React.createElement(as, {
         className: className,
         id: id,

package/dist/theme-context-provider.d.ts

@@ -3,6 +3,16 @@ import type { ThemeConfig } from './theme';
 export declare const useIsOsDarkModeEnabled: () => boolean;
 declare type Props = {
     theme: ThemeConfig;
+    /**
+     * You should use this prop if you use Strict Mode and Server Side Rendering together.
+     * This identifier will be used to generate unique class names for each instance of ThemeContextProvider.
+     * If no identifier is provided, this will fallback to an auto-incremented id, which will cause
+     * problems in SSR + Strict Mode because the class names from client and server won't match.
+     * More info: https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects
+     *
+     * Once we migrate to React18, we could remove this prop and use the useId hook instead.
+     */
+    providerId?: string;
     children?: React.ReactNode;
 };
 declare const ThemeContextProvider: React.FC<Props>;

package/dist/theme-context-provider.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.useIsOsDarkModeEnabled = exports.default = void 0;
+exports.default = exports.useIsOsDarkModeEnabled = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _reactJss = require("react-jss");
@@ -30,13 +30,11 @@ function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
     } else {
-        var newObj = {
-        };
+        var newObj = {};
         if (obj != null) {
             for(var key in obj){
                 if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
-                    };
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
                     if (desc.get || desc.set) {
                         Object.defineProperty(newObj, key, desc);
                     } else {
@@ -49,6 +47,11 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
+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;
 }
@@ -66,12 +69,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;
         }
@@ -88,12 +93,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) {
     var _arguments = arguments, _loop = function(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) {
@@ -108,7 +112,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);
 }
 var darkModeMedia = '(prefers-color-scheme: dark)';
 var useIsOsDarkModeEnabled = function useIsOsDarkModeEnabled() {
@@ -133,7 +145,7 @@ exports.useIsOsDarkModeEnabled = useIsOsDarkModeEnabled;
 // This counter will increment with every new instance of ThemeContextProvider in the app. In a typical app we don't need more than
 // one instance of ThemeContextProvider. But some apps may depend on libs that use Mistica too, so there may be more than one instance
 // in those cases. We use this counter to avoid class name collisions in those cases.
-var jssInstanceId = 0;
+var nextJssInstanceId = 0;
 var generateId = function() {
     if (process.env.NODE_ENV === 'test') {
         // in tests classnames are just the classame, whithout ids
@@ -154,12 +166,19 @@ var useDefaultHrefDecorator = function useDefaultHrefDecorator() {
     };
 };
 var ThemeContextProvider = function ThemeContextProvider(param) {
-    var theme = param.theme, children = param.children;
-    var classNamePrefix = React.useMemo(// we'll have missmatches when rendering client side. The disadvantage of this is that we can only have one instance of
-    // ThemeContextProvider in apps with ssr.
-    function() {
-        return process.env.NODE_ENV === 'test' ? '' : "mistica-".concat(_packageVersion.PACKAGE_VERSION.replace(/\./g, '-'), "-").concat((0, _environment).isServerSide() ? 0 : jssInstanceId++, "-");
-    }, []);
+    var theme = param.theme, children = param.children, providerId = param.providerId;
+    var ref = _slicedToArray(React.useState(function() {
+        if (providerId) {
+            return providerId;
+        } else {
+            return (0, _environment).isServerSide() ? 0 : nextJssInstanceId++;
+        }
+    }), 1), instanceId = ref[0];
+    var classNamePrefix = React.useMemo(function() {
+        return process.env.NODE_ENV === 'test' ? '' : "mistica-".concat(_packageVersion.PACKAGE_VERSION.replace(/\./g, '-'), "_").concat(instanceId, "_");
+    }, [
+        instanceId
+    ]);
     var nextAriaId = React.useRef(1);
     var getAriaId = React.useCallback(function() {
         return "aria-id-hook-".concat(nextAriaId.current++);
@@ -170,8 +189,7 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
         // TODO: In next major version we could change this to "auto" by default
         var colorScheme = (_colorScheme = theme.colorScheme) !== null && _colorScheme !== void 0 ? _colorScheme : 'light';
         var lightColors = theme.skin.colors;
-        var darkColors = _objectSpread({
-        }, theme.skin.colors, theme.skin.darkModeColors);
+        var darkColors = _objectSpread({}, theme.skin.colors, theme.skin.darkModeColors);
         var isDarkModeEnabled = colorScheme === 'auto' && isOsDarkModeEnabled || colorScheme === 'dark';
         var colors = isDarkModeEnabled ? darkColors : lightColors;
         var platformOverrides = _objectSpread({
@@ -183,15 +201,13 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
             skinName: theme.skin.name,
             i18n: theme.i18n,
             platformOverrides: platformOverrides,
-            texts: _objectSpread({
-            }, (0, _theme).getTexts(theme.i18n.locale), theme.texts),
+            texts: _objectSpread({}, (0, _theme).getTexts(theme.i18n.locale), theme.texts),
             analytics: _objectSpread({
                 logEvent: function logEvent() {
                     return Promise.resolve();
                 }
             }, theme.analytics),
-            dimensions: _objectSpread({
-            }, _theme.dimensions, theme.dimensions),
+            dimensions: _objectSpread({}, _theme.dimensions, theme.dimensions),
             mq: (0, _mediaQueries).createMediaQueries((_mediaQueries1 = theme.mediaQueries) !== null && _mediaQueries1 !== void 0 ? _mediaQueries1 : _theme.mediaQueriesConfig),
             colors: colors,
             Link: (_Link = theme.Link) !== null && _Link !== void 0 ? _Link : _theme.AnchorLink,

package/dist/theme-context-provider.js.flow

@@ -5,6 +5,17 @@ import type { ThemeConfig } from "./theme";
 declare export var useIsOsDarkModeEnabled: () => boolean;
 declare type Props = {
   theme: ThemeConfig,
+
+  /**
+   * You should use this prop if you use Strict Mode and Server Side Rendering together.
+   * This identifier will be used to generate unique class names for each instance of ThemeContextProvider.
+   * If no identifier is provided, this will fallback to an auto-incremented id, which will cause
+   * problems in SSR + Strict Mode because the class names from client and server won't match.
+   * More info: https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects
+   *
+   * Once we migrate to React18, we could remove this prop and use the useId hook instead.
+   */
+  providerId?: string,
   children?: React.Node,
 };
 declare var ThemeContextProvider: React.ComponentType<Props>;

package/dist/theme-context.js

@@ -8,13 +8,11 @@ function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
     } else {
-        var newObj = {
-        };
+        var newObj = {};
         if (obj != null) {
             for(var key in obj){
                 if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
-                    };
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
                     if (desc.get || desc.set) {
                         Object.defineProperty(newObj, key, desc);
                     } else {

package/dist/theme-variant-context.js

@@ -9,13 +9,11 @@ function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
     } else {
-        var newObj = {
-        };
+        var newObj = {};
         if (obj != null) {
             for(var key in obj){
                 if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
-                    };
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
                     if (desc.get || desc.set) {
                         Object.defineProperty(newObj, key, desc);
                     } else {