@hero-design/rn 8.61.1 → 8.61.2

package/lib/index.js

@@ -36,6 +36,7 @@ function _interopNamespace(e) {
 }
 
 var reactNative__namespace = /*#__PURE__*/_interopNamespace(reactNative);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var DateTimePicker__default = /*#__PURE__*/_interopDefaultLegacy(DateTimePicker);
 var RnSlider__default = /*#__PURE__*/_interopDefaultLegacy(RnSlider);
@@ -3870,6 +3871,7 @@ var RULESET = 'rule';
 var DECLARATION = 'decl';
 var IMPORT = '@import';
 var KEYFRAMES = '@keyframes';
+var LAYER = '@layer';
 
 /**
  * @param {number}
@@ -3895,7 +3897,7 @@ var assign = Object.assign;
  * @return {number}
  */
 function hash(value, length) {
-  return (((length << 2 ^ charat(value, 0)) << 2 ^ charat(value, 1)) << 2 ^ charat(value, 2)) << 2 ^ charat(value, 3);
+  return charat(value, 0) ^ 45 ? (((length << 2 ^ charat(value, 0)) << 2 ^ charat(value, 1)) << 2 ^ charat(value, 2)) << 2 ^ charat(value, 3) : 0;
 }
 
 /**
@@ -4249,7 +4251,7 @@ function parse$2(value, root, parent, rule, rules, rulesets, pseudo, points, dec
   while (scanning) switch (previous = character, character = next()) {
     // (
     case 40:
-      if (previous != 108 && characters.charCodeAt(length - 1) == 58) {
+      if (previous != 108 && charat(characters, length - 1) == 58) {
         if (indexof(characters += replace(delimit(character), '&', '&\f'), '&\f') != -1) ampersand = -1;
         break;
       }
@@ -4295,6 +4297,7 @@ function parse$2(value, root, parent, rule, rules, rulesets, pseudo, points, dec
           scanning = 0;
         // ;
         case 59 + offset:
+          if (ampersand == -1) characters = replace(characters, /\f/g, '');
           if (property > 0 && strlen(characters) - length) append(property > 32 ? declaration(characters + ';', rule, parent, length - 1) : declaration(replace(characters, ' ', '') + ';', rule, parent, length - 2), declarations);
           break;
         // @ ;
@@ -4303,9 +4306,10 @@ function parse$2(value, root, parent, rule, rules, rulesets, pseudo, points, dec
         // { rule/at-rule
         default:
           append(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length), rulesets);
-          if (character === 123) if (offset === 0) parse$2(characters, root, reference, reference, props, rulesets, length, points, children);else switch (atrule) {
-            // d m s
+          if (character === 123) if (offset === 0) parse$2(characters, root, reference, reference, props, rulesets, length, points, children);else switch (atrule === 99 && charat(characters, 3) === 110 ? 100 : atrule) {
+            // d l m s
             case 100:
+            case 108:
             case 109:
             case 115:
               parse$2(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children);
@@ -4387,157 +4391,6 @@ function declaration(value, root, parent, length) {
   return node$1(value, root, parent, DECLARATION, substr(value, 0, length), substr(value, length + 1, -1), length);
 }
 
-/**
- * @param {string} value
- * @param {number} length
- * @return {string}
- */
-function prefix(value, length) {
-  switch (hash(value, length)) {
-    // color-adjust
-    case 5103:
-      return WEBKIT + 'print-' + value + value;
-    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
-    case 5737:
-    case 4201:
-    case 3177:
-    case 3433:
-    case 1641:
-    case 4457:
-    case 2921:
-    // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
-    case 5572:
-    case 6356:
-    case 5844:
-    case 3191:
-    case 6645:
-    case 3005:
-    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
-    case 6391:
-    case 5879:
-    case 5623:
-    case 6135:
-    case 4599:
-    case 4855:
-    // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
-    case 4215:
-    case 6389:
-    case 5109:
-    case 5365:
-    case 5621:
-    case 3829:
-      return WEBKIT + value + value;
-    // appearance, user-select, transform, hyphens, text-size-adjust
-    case 5349:
-    case 4246:
-    case 4810:
-    case 6968:
-    case 2756:
-      return WEBKIT + value + MOZ + value + MS + value + value;
-    // flex, flex-direction
-    case 6828:
-    case 4268:
-      return WEBKIT + value + MS + value + value;
-    // order
-    case 6165:
-      return WEBKIT + value + MS + 'flex-' + value + value;
-    // align-items
-    case 5187:
-      return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + 'box-$1$2' + MS + 'flex-$1$2') + value;
-    // align-self
-    case 5443:
-      return WEBKIT + value + MS + 'flex-item-' + replace(value, /flex-|-self/, '') + value;
-    // align-content
-    case 4675:
-      return WEBKIT + value + MS + 'flex-line-pack' + replace(value, /align-content|flex-|-self/, '') + value;
-    // flex-shrink
-    case 5548:
-      return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value;
-    // flex-basis
-    case 5292:
-      return WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value;
-    // flex-grow
-    case 6060:
-      return WEBKIT + 'box-' + replace(value, '-grow', '') + WEBKIT + value + MS + replace(value, 'grow', 'positive') + value;
-    // transition
-    case 4554:
-      return WEBKIT + replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') + value;
-    // cursor
-    case 6187:
-      return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + '$1'), /(image-set)/, WEBKIT + '$1'), value, '') + value;
-    // background, background-image
-    case 5495:
-    case 3959:
-      return replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1');
-    // justify-content
-    case 4968:
-      return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + WEBKIT + value + value;
-    // (margin|padding)-inline-(start|end)
-    case 4095:
-    case 3583:
-    case 4068:
-    case 2532:
-      return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value;
-    // (min|max)?(width|height|inline-size|block-size)
-    case 8116:
-    case 7059:
-    case 5753:
-    case 5535:
-    case 5445:
-    case 5701:
-    case 4933:
-    case 4677:
-    case 5533:
-    case 5789:
-    case 5021:
-    case 4765:
-      // stretch, max-content, min-content, fill-available
-      if (strlen(value) - 1 - length > 6) switch (charat(value, length + 1)) {
-        // (m)ax-content, (m)in-content
-        case 109:
-          // -
-          if (charat(value, length + 4) !== 45) break;
-        // (f)ill-available, (f)it-content
-        case 102:
-          return replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;
-        // (s)tretch
-        case 115:
-          return ~indexof(value, 'stretch') ? prefix(replace(value, 'stretch', 'fill-available'), length) + value : value;
-      }
-      break;
-    // position: sticky
-    case 4949:
-      // (s)ticky?
-      if (charat(value, length + 1) !== 115) break;
-    // display: (flex|inline-flex)
-    case 6444:
-      switch (charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))) {
-        // stic(k)y
-        case 107:
-          return replace(value, ':', ':' + WEBKIT) + value;
-        // (inline-)?fl(e)x
-        case 101:
-          return replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + WEBKIT + (charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value;
-      }
-      break;
-    // writing-mode
-    case 5936:
-      switch (charat(value, length + 11)) {
-        // vertical-l(r)
-        case 114:
-          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value;
-        // vertical-r(l)
-        case 108:
-          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value;
-        // horizontal(-)tb
-        case 45:
-          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value;
-      }
-      return WEBKIT + value + MS + value + value;
-  }
-  return value;
-}
-
 /**
  * @param {object[]} children
  * @param {function} callback
@@ -4559,6 +4412,8 @@ function serialize(children, callback) {
  */
 function stringify$2(element, index, children, callback) {
   switch (element.type) {
+    case LAYER:
+      if (element.children.length) break;
     case IMPORT:
     case DECLARATION:
       return element["return"] = element["return"] || element.value;
@@ -4595,45 +4450,6 @@ function rulesheet(callback) {
   };
 }
 
-/**
- * @param {object} element
- * @param {number} index
- * @param {object[]} children
- * @param {function} callback
- */
-function prefixer(element, index, children, callback) {
-  if (element.length > -1) if (!element["return"]) switch (element.type) {
-    case DECLARATION:
-      element["return"] = prefix(element.value, element.length);
-      break;
-    case KEYFRAMES:
-      return serialize([copy(element, {
-        value: replace(element.value, '@', '@' + WEBKIT)
-      })], callback);
-    case RULESET:
-      if (element.length) return combine(element.props, function (value) {
-        switch (match$2(value, /(::plac\w+|:read-\w+)/)) {
-          // :read-(only|write)
-          case ':read-only':
-          case ':read-write':
-            return serialize([copy(element, {
-              props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]
-            })], callback);
-          // :placeholder
-          case '::placeholder':
-            return serialize([copy(element, {
-              props: [replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1')]
-            }), copy(element, {
-              props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]
-            }), copy(element, {
-              props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]
-            })], callback);
-        }
-        return '';
-      });
-  }
-}
-
 var weakMemoize = function weakMemoize(func) {
   // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
   var cache = new WeakMap();
@@ -4755,6 +4571,211 @@ var removeLabel = function removeLabel(element) {
     }
   }
 };
+
+/* eslint-disable no-fallthrough */
+
+function prefix(value, length) {
+  switch (hash(value, length)) {
+    // color-adjust
+    case 5103:
+      return WEBKIT + 'print-' + value + value;
+    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
+
+    case 5737:
+    case 4201:
+    case 3177:
+    case 3433:
+    case 1641:
+    case 4457:
+    case 2921: // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
+
+    case 5572:
+    case 6356:
+    case 5844:
+    case 3191:
+    case 6645:
+    case 3005: // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
+
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855: // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
+
+    case 4215:
+    case 6389:
+    case 5109:
+    case 5365:
+    case 5621:
+    case 3829:
+      return WEBKIT + value + value;
+    // appearance, user-select, transform, hyphens, text-size-adjust
+
+    case 5349:
+    case 4246:
+    case 4810:
+    case 6968:
+    case 2756:
+      return WEBKIT + value + MOZ + value + MS + value + value;
+    // flex, flex-direction
+
+    case 6828:
+    case 4268:
+      return WEBKIT + value + MS + value + value;
+    // order
+
+    case 6165:
+      return WEBKIT + value + MS + 'flex-' + value + value;
+    // align-items
+
+    case 5187:
+      return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + 'box-$1$2' + MS + 'flex-$1$2') + value;
+    // align-self
+
+    case 5443:
+      return WEBKIT + value + MS + 'flex-item-' + replace(value, /flex-|-self/, '') + value;
+    // align-content
+
+    case 4675:
+      return WEBKIT + value + MS + 'flex-line-pack' + replace(value, /align-content|flex-|-self/, '') + value;
+    // flex-shrink
+
+    case 5548:
+      return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value;
+    // flex-basis
+
+    case 5292:
+      return WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value;
+    // flex-grow
+
+    case 6060:
+      return WEBKIT + 'box-' + replace(value, '-grow', '') + WEBKIT + value + MS + replace(value, 'grow', 'positive') + value;
+    // transition
+
+    case 4554:
+      return WEBKIT + replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') + value;
+    // cursor
+
+    case 6187:
+      return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + '$1'), /(image-set)/, WEBKIT + '$1'), value, '') + value;
+    // background, background-image
+
+    case 5495:
+    case 3959:
+      return replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1');
+    // justify-content
+
+    case 4968:
+      return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + WEBKIT + value + value;
+    // (margin|padding)-inline-(start|end)
+
+    case 4095:
+    case 3583:
+    case 4068:
+    case 2532:
+      return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value;
+    // (min|max)?(width|height|inline-size|block-size)
+
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      // stretch, max-content, min-content, fill-available
+      if (strlen(value) - 1 - length > 6) switch (charat(value, length + 1)) {
+        // (m)ax-content, (m)in-content
+        case 109:
+          // -
+          if (charat(value, length + 4) !== 45) break;
+        // (f)ill-available, (f)it-content
+
+        case 102:
+          return replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;
+        // (s)tretch
+
+        case 115:
+          return ~indexof(value, 'stretch') ? prefix(replace(value, 'stretch', 'fill-available'), length) + value : value;
+      }
+      break;
+    // position: sticky
+
+    case 4949:
+      // (s)ticky?
+      if (charat(value, length + 1) !== 115) break;
+    // display: (flex|inline-flex)
+
+    case 6444:
+      switch (charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))) {
+        // stic(k)y
+        case 107:
+          return replace(value, ':', ':' + WEBKIT) + value;
+        // (inline-)?fl(e)x
+
+        case 101:
+          return replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + WEBKIT + (charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value;
+      }
+      break;
+    // writing-mode
+
+    case 5936:
+      switch (charat(value, length + 11)) {
+        // vertical-l(r)
+        case 114:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value;
+        // vertical-r(l)
+
+        case 108:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value;
+        // horizontal(-)tb
+
+        case 45:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value;
+      }
+      return WEBKIT + value + MS + value + value;
+  }
+  return value;
+}
+var prefixer = function prefixer(element, index, children, callback) {
+  if (element.length > -1) if (!element["return"]) switch (element.type) {
+    case DECLARATION:
+      element["return"] = prefix(element.value, element.length);
+      break;
+    case KEYFRAMES:
+      return serialize([copy(element, {
+        value: replace(element.value, '@', '@' + WEBKIT)
+      })], callback);
+    case RULESET:
+      if (element.length) return combine(element.props, function (value) {
+        switch (match$2(value, /(::plac\w+|:read-\w+)/)) {
+          // :read-(only|write)
+          case ':read-only':
+          case ':read-write':
+            return serialize([copy(element, {
+              props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]
+            })], callback);
+          // :placeholder
+
+          case '::placeholder':
+            return serialize([copy(element, {
+              props: [replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1')]
+            }), copy(element, {
+              props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]
+            }), copy(element, {
+              props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]
+            })], callback);
+        }
+        return '';
+      });
+  }
+};
 var defaultStylisPlugins = [prefixer];
 var createCache = function createCache(options) {
   var key = options.key;
@@ -4850,7 +4871,7 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-var EmotionCacheContext = /* #__PURE__ */React.createContext(
+var EmotionCacheContext = /* #__PURE__ */React__namespace.createContext(
 // we're doing this to avoid preconstruct's dead code elimination in this one case
 // because this module is primarily intended for the browser and node
 // but it's also required in react native and similar environments sometimes
@@ -4861,9 +4882,9 @@ typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({
   key: 'css'
 }) : null);
 EmotionCacheContext.Provider;
-var ThemeContext = /* #__PURE__ */React.createContext({});
+var ThemeContext = /* #__PURE__ */React__namespace.createContext({});
 var useTheme$1 = function useTheme() {
-  return React.useContext(ThemeContext);
+  return React__namespace.useContext(ThemeContext);
 };
 var getTheme = function getTheme(outerTheme, theme) {
   if (typeof theme === 'function') {
@@ -4878,11 +4899,11 @@ var createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {
   });
 });
 var ThemeProvider$1 = function ThemeProvider(props) {
-  var theme = React.useContext(ThemeContext);
+  var theme = React__namespace.useContext(ThemeContext);
   if (props.theme !== theme) {
     theme = createCacheWithTheme(theme)(props.theme);
   }
-  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+  return /*#__PURE__*/React__namespace.createElement(ThemeContext.Provider, {
     value: theme
   }, props.children);
 };
@@ -6548,7 +6569,7 @@ function createStyled(StyleSheet, _temp) {
       } // do we really want to use the same infra as the web since it only really uses theming?
       // $FlowFixMe
 
-      var Styled = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var Styled = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
         var finalTag = shouldUseAs && props.as || component;
         var mergedProps = props;
         if (props.theme == null) {
@@ -6556,7 +6577,7 @@ function createStyled(StyleSheet, _temp) {
           for (var key in props) {
             mergedProps[key] = props[key];
           }
-          mergedProps.theme = React.useContext(ThemeContext);
+          mergedProps.theme = React__namespace.useContext(ThemeContext);
         }
         var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getShouldForwardProp(finalTag) : defaultShouldForwardProp;
         var newProps = {};
@@ -6569,7 +6590,7 @@ function createStyled(StyleSheet, _temp) {
         newProps.style = [css.apply(mergedProps, styles), props.style];
         newProps.ref = ref; // $FlowFixMe
 
-        return /*#__PURE__*/React.createElement(finalTag, newProps);
+        return /*#__PURE__*/React__namespace.createElement(finalTag, newProps);
       }); // $FlowFixMe
 
       Styled.withComponent = function (newComponent) {
@@ -11670,7 +11691,7 @@ var StyledCalendarRow = index$9(reactNative.View)(function (_ref5) {
 var StyledCalendarRowItem = index$9(reactNative.View)(function (_ref6) {
   var theme = _ref6.theme;
   return {
-    flexBasis: "".concat(Math.floor(100.0 / 7.0).toString(), "%"),
+    flexBasis: "".concat(Math.floor(100.0 / 7.0), "%"),
     alignItems: 'center',
     width: theme.__hd__.calendar.sizes.cellWidth,
     height: theme.__hd__.calendar.sizes.cellHeight,
@@ -11680,7 +11701,7 @@ var StyledCalendarRowItem = index$9(reactNative.View)(function (_ref6) {
 var StyledDisabledCalendarRowItem = index$9(reactNative.View)(function (_ref7) {
   var theme = _ref7.theme;
   return {
-    flexBasis: "".concat(Math.floor(100.0 / 7.0).toString(), "%"),
+    flexBasis: "".concat(Math.floor(100.0 / 7.0), "%"),
     alignItems: 'center',
     width: theme.__hd__.calendar.sizes.cellWidth,
     height: theme.__hd__.calendar.sizes.cellHeight
@@ -12290,15 +12311,15 @@ var StyledCarouselImage = index$9(Image)(function () {
   };
 });
 var StyledCustomSizeCarouselImage = index$9(Image)(function (_ref3) {
-  var height = _ref3.height,
-    _ref3$resizeMode = _ref3.resizeMode,
-    resizeMode = _ref3$resizeMode === void 0 ? 'contain' : _ref3$resizeMode,
-    width = _ref3.width;
+  var themeHeight = _ref3.themeHeight,
+    _ref3$themeResizeMode = _ref3.themeResizeMode,
+    themeResizeMode = _ref3$themeResizeMode === void 0 ? 'contain' : _ref3$themeResizeMode,
+    themeWidth = _ref3.themeWidth;
   return {
     alignSelf: 'center',
-    width: width,
-    height: height,
-    resizeMode: resizeMode
+    width: themeWidth,
+    height: themeHeight,
+    resizeMode: themeResizeMode
   };
 });
 var StyledCarouselContentWrapper = index$9(Box)(function (_ref4) {
@@ -12347,9 +12368,9 @@ var CarouselItem = function CarouselItem(_ref) {
       if (isCarouselImageProps(image)) {
         return /*#__PURE__*/React__default["default"].createElement(StyledCustomSizeCarouselImage, {
           source: image,
-          height: image.height,
-          width: image.width,
-          resizeMode: image.resizeMode,
+          themeHeight: image.height,
+          themeWidth: image.width,
+          themeResizeMode: image.resizeMode,
           style: {
             marginBottom: theme.space.medium
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.61.1",
+  "version": "8.61.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -28,11 +28,11 @@
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.7",
+    "@hero-design/react-native-month-year-picker": "^8.42.8",
     "@react-native-community/datetimepicker": "^3.5.2 || ^7.2.0",
     "@react-native-community/slider": "4.4.3",
     "react": "18.2.0",
-    "react-native": "^0.71.0",
+    "react-native": "^0.72.11",
     "react-native-gesture-handler": "^1.10.3 || ~2.5.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",
@@ -48,7 +48,7 @@
     "@babel/runtime": "^7.20.0",
     "@emotion/jest": "^11.11.0",
     "@hero-design/eslint-plugin": "9.0.0",
-    "@hero-design/react-native-month-year-picker": "^8.42.7",
+    "@hero-design/react-native-month-year-picker": "^8.42.8",
     "@react-native-community/datetimepicker": "7.2.0",
     "@react-native-community/slider": "4.4.3",
     "@rollup/plugin-babel": "^5.3.1",
@@ -64,6 +64,7 @@
     "@types/react": "^18.2.0",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
+    "babel-preset-expo": "9.5.2",
     "core-js": "^3.33.0",
     "eslint": "^8.56.0",
     "eslint-config-hd": "8.42.4",
@@ -74,7 +75,7 @@
     "prettier-config-hd": "8.42.4",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "0.71.14",
+    "react-native": "0.72.11",
     "react-native-gesture-handler": "~2.5.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",

package/src/components/Calendar/StyledCalendar.tsx

@@ -40,7 +40,7 @@ const StyledCalendarRow = styled(View)<ViewProps>(({ theme }) => ({
 }));
 
 const StyledCalendarRowItem = styled(View)<ViewProps>(({ theme }) => ({
-  flexBasis: `${Math.floor(100.0 / 7.0).toString()}%`,
+  flexBasis: `${Math.floor(100.0 / 7.0)}%`,
   alignItems: 'center',
   width: theme.__hd__.calendar.sizes.cellWidth,
   height: theme.__hd__.calendar.sizes.cellHeight,
@@ -48,7 +48,7 @@ const StyledCalendarRowItem = styled(View)<ViewProps>(({ theme }) => ({
 }));
 
 const StyledDisabledCalendarRowItem = styled(View)<ViewProps>(({ theme }) => ({
-  flexBasis: `${Math.floor(100.0 / 7.0).toString()}%`,
+  flexBasis: `${Math.floor(100.0 / 7.0)}%`,
   alignItems: 'center',
   width: theme.__hd__.calendar.sizes.cellWidth,
   height: theme.__hd__.calendar.sizes.cellHeight,

package/src/components/Carousel/CardCarousel.tsx

@@ -160,7 +160,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
     );
 
     const getItemLayout = useCallback(
-      (_: React.ReactNode, index: number) => ({
+      (_: ArrayLike<React.ReactNode> | null | undefined, index: number) => ({
         length: itemWidth,
         offset: itemWidth * index,
         index,
@@ -193,7 +193,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
       theme.__hd__.cardCarousel.space;
     return (
       <StyledWrapper style={style} testID={testID}>
-        <FlatList
+        <FlatList<React.ReactNode>
           contentInset={{
             top: 0,
             left: contentContainerPaddingHorizontal,

package/src/components/Carousel/CarouselItem.tsx

@@ -35,9 +35,9 @@ const CarouselItem = ({
         return (
           <StyledCustomSizeCarouselImage
             source={image}
-            height={image.height}
-            width={image.width}
-            resizeMode={image.resizeMode}
+            themeHeight={image.height}
+            themeWidth={image.width}
+            themeResizeMode={image.resizeMode}
             style={{ marginBottom: theme.space.medium }}
           />
         );