@hero-design/rn 8.57.0 → 8.58.0

package/lib/index.js

@@ -2433,7 +2433,6 @@ var getCardTheme = function getCardTheme(theme) {
 
 var getCarouselTheme = function getCarouselTheme(theme) {
   var space = {
-    headingMarginTop: theme.space.small,
     headingMarginBottom: theme.space.medium,
     footerPaddingHorizontal: theme.space.large,
     footerPaddingVertical: theme.space.medium,
@@ -12069,6 +12068,9 @@ var ITEM_WIDTH_RATE = 0.85;
  */
 var VIEW_POSITION_CENTER = 0.5;
 
+var getCardCarouselValidIndex = function getCardCarouselValidIndex(index, length) {
+  return Math.min(Math.max(index, 0), length - 1);
+};
 var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var onItemIndexChange = _ref.onItemIndexChange,
     items = _ref.items,
@@ -12095,18 +12097,13 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var viewPosition = reactNative.Platform.OS === 'ios' ? VIEW_POSITION_CENTER : undefined;
   var _snapToIndex = React.useCallback(function (index) {
     var _carouselRef$current;
-    var validIndex = 0;
-    if (index >= items.length) {
-      validIndex = items.length - 1;
-    } else if (index >= 0) {
-      validIndex = index;
-    }
+    var validIndex = getCardCarouselValidIndex(index, items.length);
     (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 || _carouselRef$current.scrollToIndex({
       index: validIndex,
       animated: true,
       viewPosition: viewPosition
     });
-  }, [carouselRef, itemWidth]);
+  }, [items.length, viewPosition]);
   /*
    * snap to the next index. If the curent index is the last one, snap to the first one.
    */
@@ -12121,7 +12118,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       animated: true,
       viewPosition: viewPosition
     });
-  }, [carouselRef, currentIndex, itemWidth, items.length]);
+  }, [currentIndex, items.length, viewPosition]);
   React__default["default"].useImperativeHandle(ref, function () {
     return {
       snapToIndex: function snapToIndex(index) {
@@ -12271,7 +12268,6 @@ var StyledCarouselView = index$9(reactNative.View)(function () {
 var StyledCarouselHeading = index$9(Typography.Title)(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    marginTop: theme.__hd__.carousel.space.headingMarginTop,
     marginBottom: theme.__hd__.carousel.space.headingMarginBottom
   };
 });
@@ -12335,22 +12331,37 @@ var CarouselItem = function CarouselItem(_ref) {
     content = _ref.content,
     heading = _ref.heading,
     body = _ref.body;
+  var theme = useTheme$1();
+  var ImageComponent = React__default["default"].useMemo(function () {
+    if (image) {
+      if (isCarouselImageProps(image)) {
+        return /*#__PURE__*/React__default["default"].createElement(StyledCustomSizeCarouselImage, {
+          source: image,
+          height: image.height,
+          width: image.width,
+          resizeMode: image.resizeMode,
+          style: {
+            marginBottom: theme.space.medium
+          }
+        });
+      }
+      return /*#__PURE__*/React__default["default"].createElement(StyledCarouselImage, {
+        source: typeof image === 'string' ? {
+          uri: image
+        } : image,
+        style: {
+          marginBottom: theme.space.medium
+        }
+      });
+    }
+    return null;
+  }, [image]);
   return /*#__PURE__*/React__default["default"].createElement(Box, {
     style: {
       width: width
     }
-  }, image && (isCarouselImageProps(image) ? /*#__PURE__*/React__default["default"].createElement(StyledCustomSizeCarouselImage, {
-    source: image,
-    height: image.height,
-    width: image.width,
-    resizeMode: image.resizeMode
-  }) : /*#__PURE__*/React__default["default"].createElement(StyledCarouselImage, {
-    source: typeof image === 'string' ? {
-      uri: image
-    } : image
-  })), /*#__PURE__*/React__default["default"].createElement(StyledCarouselContentWrapper, {
-    paddingHorizontal: "large",
-    marginTop: "large",
+  }, ImageComponent, /*#__PURE__*/React__default["default"].createElement(StyledCarouselContentWrapper, {
+    paddingHorizontal: "medium",
     width: width
   }, content, /*#__PURE__*/React__default["default"].createElement(StyledCarouselHeading, {
     level: "h1",
@@ -12876,38 +12887,96 @@ var getState$1 = function getState(_ref) {
 // https://github.com/callstack/react-native-paper/pull/3331
 var EMPTY_PLACEHOLDER_VALUE = ' ';
 var LABEL_ANIMATION_DURATION = 150;
-var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var _ref3;
-  var label = _ref2.label,
-    prefix = _ref2.prefix,
-    suffix = _ref2.suffix,
-    style = _ref2.style,
-    textStyle = _ref2.textStyle,
-    testID = _ref2.testID,
-    accessibilityLabelledBy = _ref2.accessibilityLabelledBy,
-    error = _ref2.error,
-    required = _ref2.required,
-    _ref2$editable = _ref2.editable,
-    editable = _ref2$editable === void 0 ? true : _ref2$editable,
-    _ref2$disabled = _ref2.disabled,
-    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-    _ref2$loading = _ref2.loading,
-    loading = _ref2$loading === void 0 ? false : _ref2$loading,
-    maxLength = _ref2.maxLength,
-    _ref2$hideCharacterCo = _ref2.hideCharacterCount,
-    hideCharacterCount = _ref2$hideCharacterCo === void 0 ? false : _ref2$hideCharacterCo,
-    helpText = _ref2.helpText,
-    value = _ref2.value,
-    defaultValue = _ref2.defaultValue,
-    renderInputValue = _ref2.renderInputValue,
-    _ref2$allowFontScalin = _ref2.allowFontScaling,
-    allowFontScaling = _ref2$allowFontScalin === void 0 ? false : _ref2$allowFontScalin,
-    _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$j);
-  var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
-  var isEmptyValue = displayText.length === 0;
+var renderErrorOrHelpText = function renderErrorOrHelpText(_ref2) {
+  var error = _ref2.error,
+    helpText = _ref2.helpText;
+  return error ? /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    testID: "input-error-icon",
+    icon: "circle-info",
+    size: "xsmall",
+    intent: "danger"
+  }), /*#__PURE__*/React__default["default"].createElement(StyledError, {
+    testID: "input-error-message"
+  }, error)) : !!helpText && /*#__PURE__*/React__default["default"].createElement(StyledHelperText, null, helpText);
+};
+var renderInput = function renderInput(_ref3) {
+  var variant = _ref3.variant,
+    nativeInputProps = _ref3.nativeInputProps,
+    renderInputValue = _ref3.renderInputValue,
+    ref = _ref3.ref;
+  return renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__default["default"].createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
+    themeVariant: variant,
+    multiline: variant === 'textarea' || nativeInputProps.multiline,
+    ref: ref
+  }));
+};
+var renderSuffix = function renderSuffix(_ref4) {
+  var state = _ref4.state,
+    loading = _ref4.loading,
+    suffix = _ref4.suffix;
   var actualSuffix = loading ? 'loading' : suffix;
+  return typeof actualSuffix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    intent: state === 'disabled' ? 'disabled-text' : 'text',
+    testID: "input-suffix",
+    icon: actualSuffix,
+    spin: actualSuffix === 'loading',
+    size: "medium"
+  }) : suffix;
+};
+var renderPrefix = function renderPrefix(_ref5) {
+  var state = _ref5.state,
+    prefix = _ref5.prefix;
+  return typeof prefix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    intent: state === 'disabled' ? 'disabled-text' : 'text',
+    testID: "input-prefix",
+    icon: prefix,
+    size: "xsmall"
+  }) : prefix;
+};
+var renderMaxLengthMessage = function renderMaxLengthMessage(_ref6) {
+  var maxLength = _ref6.maxLength,
+    state = _ref6.state,
+    currentLength = _ref6.currentLength,
+    hideCharacterCount = _ref6.hideCharacterCount;
+  var shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
+  return shouldShowMaxLength && /*#__PURE__*/React__default["default"].createElement(StyledMaxLengthMessage, {
+    themeState: state
+  }, currentLength, "/", maxLength);
+};
+var getDisplayText = function getDisplayText(value, defaultValue) {
+  var _ref7;
+  return (_ref7 = value !== undefined ? value : defaultValue) !== null && _ref7 !== void 0 ? _ref7 : '';
+};
+var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
+  var label = _ref8.label,
+    prefix = _ref8.prefix,
+    suffix = _ref8.suffix,
+    style = _ref8.style,
+    textStyle = _ref8.textStyle,
+    testID = _ref8.testID,
+    accessibilityLabelledBy = _ref8.accessibilityLabelledBy,
+    error = _ref8.error,
+    required = _ref8.required,
+    _ref8$editable = _ref8.editable,
+    editable = _ref8$editable === void 0 ? true : _ref8$editable,
+    _ref8$disabled = _ref8.disabled,
+    disabled = _ref8$disabled === void 0 ? false : _ref8$disabled,
+    _ref8$loading = _ref8.loading,
+    loading = _ref8$loading === void 0 ? false : _ref8$loading,
+    maxLength = _ref8.maxLength,
+    _ref8$hideCharacterCo = _ref8.hideCharacterCount,
+    hideCharacterCount = _ref8$hideCharacterCo === void 0 ? false : _ref8$hideCharacterCo,
+    helpText = _ref8.helpText,
+    value = _ref8.value,
+    defaultValue = _ref8.defaultValue,
+    renderInputValue = _ref8.renderInputValue,
+    _ref8$allowFontScalin = _ref8.allowFontScaling,
+    allowFontScaling = _ref8$allowFontScalin === void 0 ? false : _ref8$allowFontScalin,
+    _ref8$variant = _ref8.variant,
+    variant = _ref8$variant === void 0 ? 'text' : _ref8$variant,
+    nativeProps = _objectWithoutProperties(_ref8, _excluded$j);
+  var displayText = getDisplayText(value, defaultValue);
+  var isEmptyValue = displayText.length === 0;
   var _React$useState = React__default["default"].useState({
       height: 0,
       width: 0
@@ -12935,7 +13004,6 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     isFocused: isFocused,
     isEmptyValue: isEmptyValue
   });
-  var shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
   var theme = useTheme();
   var focusAnimation = React.useRef(new reactNative.Animated.Value(0)).current;
   React.useEffect(function () {
@@ -13073,12 +13141,10 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }, borderStyle]
   }), /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     onLayout: onPrefixLayout
-  }, typeof prefix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    intent: state === 'disabled' ? 'disabled-text' : 'text',
-    testID: "input-prefix",
-    icon: prefix,
-    size: "xsmall"
-  }) : prefix), /*#__PURE__*/React__default["default"].createElement(StyledLabelContainerInsideTextInput, {
+  }, renderPrefix({
+    state: state,
+    prefix: prefix
+  })), /*#__PURE__*/React__default["default"].createElement(StyledLabelContainerInsideTextInput, {
     themeVariant: variant,
     pointerEvents: "none",
     style: [{
@@ -13115,28 +13181,26 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     testID: "input-label",
     themeState: state,
     onLayout: onLabelLayout
-  }, label)), /*#__PURE__*/React__default["default"].createElement(StyledTextInputAndLabelContainer, null, renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__default["default"].createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
-    themeVariant: variant,
-    multiline: variant === 'textarea' || nativeProps.multiline,
-    ref: function ref(reference) {
-      innerTextInput.current = reference;
+  }, label)), /*#__PURE__*/React__default["default"].createElement(StyledTextInputAndLabelContainer, null, renderInput({
+    variant: variant,
+    nativeInputProps: nativeInputProps,
+    renderInputValue: renderInputValue,
+    ref: function ref(rnTextInputRef) {
+      innerTextInput.current = rnTextInputRef;
     }
-  }))), typeof actualSuffix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    intent: state === 'disabled' ? 'disabled-text' : 'text',
-    testID: "input-suffix",
-    icon: actualSuffix,
-    spin: actualSuffix === 'loading',
-    size: "medium"
-  }) : suffix), /*#__PURE__*/React__default["default"].createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    testID: "input-error-icon",
-    icon: "circle-info",
-    size: "xsmall",
-    intent: "danger"
-  }), /*#__PURE__*/React__default["default"].createElement(StyledError, {
-    testID: "input-error-message"
-  }, error)) : !!helpText && /*#__PURE__*/React__default["default"].createElement(StyledHelperText, null, helpText), shouldShowMaxLength && /*#__PURE__*/React__default["default"].createElement(StyledMaxLengthMessage, {
-    themeState: state
-  }, displayText.length, "/", maxLength))));
+  })), renderSuffix({
+    state: state,
+    loading: loading,
+    suffix: suffix
+  })), /*#__PURE__*/React__default["default"].createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledErrorAndMaxLengthContainer, null, renderErrorOrHelpText({
+    error: error,
+    helpText: helpText
+  }), renderMaxLengthMessage({
+    state: state,
+    currentLength: displayText.length,
+    maxLength: maxLength,
+    hideCharacterCount: hideCharacterCount
+  }))));
 });
 
 var getDateValue = function getDateValue(value, minDate, maxDate) {
@@ -14821,13 +14885,30 @@ var CTAWrapper = index$9(reactNative.TouchableOpacity)(function (_ref6) {
   };
 });
 
-var ToastContext = /*#__PURE__*/React.createContext({});
+var fallbackToastControlContext = {
+  show: function show(_) {
+    return '';
+  },
+  hide: function hide(_) {
+    // Fallback empty function
+  },
+  clearAll: function clearAll() {
+    // Fallback empty function
+  }
+};
+var ToastContext = /*#__PURE__*/React.createContext(fallbackToastControlContext);
 var ToastConfigContext = /*#__PURE__*/React.createContext({});
 var useToastConfig = function useToastConfig() {
   return React.useContext(ToastConfigContext);
 };
 var useToast = function useToast() {
-  return React.useContext(ToastContext);
+  var context = React.useContext(ToastContext);
+  if (!context) {
+    // eslint-disable-next-line no-console
+    console.warn('Toast was used without ToastProvider');
+    return fallbackToastControlContext;
+  }
+  return context;
 };
 
 var getIntentIcon = function getIntentIcon(intent) {
@@ -15026,8 +15107,7 @@ var ToastProvider = function ToastProvider(_ref) {
   var position = _position === undefined ? 'bottom' : _position;
   useDeprecation("Toast's position prop is deprecated and will be removed in the next major release.\nPlease remove it.", _position !== undefined);
   var toastRef = React.useRef(null);
-  // @ts-expect-error: TODO: @tungv Fix this type error
-  var _useState = React.useState(null),
+  var _useState = React.useState(),
     _useState2 = _slicedToArray(_useState, 2),
     refState = _useState2[0],
     setRefState = _useState2[1];
@@ -15043,7 +15123,7 @@ var ToastProvider = function ToastProvider(_ref) {
     };
   }, [displayType, position]);
   return /*#__PURE__*/React__default["default"].createElement(ToastContext.Provider, {
-    value: refState
+    value: refState || fallbackToastControlContext
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     style: {
       flex: 1
@@ -17611,18 +17691,16 @@ var ScrollableTabHeader = function ScrollableTabHeader(_ref2) {
         });
       }, 100);
     },
-    style:
-    // Border styles specified in contentContainerStyle don't work
-    // so they need to be placed here instead on Android.
-    reactNative.Platform.OS === 'android' ? {
+    style: {
       borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
       borderBottomWidth: theme.__hd__.tabs.sizes.indicator
-    } : undefined,
-    contentContainerStyle: {
-      paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding,
+    },
+    contentContainerStyle: _objectSpread2({
+      paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding
+    }, reactNative.Platform.OS === 'android' && {
       borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
       borderBottomWidth: theme.__hd__.tabs.sizes.indicator
-    },
+    }),
     renderItem: function renderItem(_ref4) {
       var tab = _ref4.item,
         index = _ref4.index;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.57.0",
+  "version": "8.58.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,13 +24,12 @@
     "@emotion/react": "^11.9.3",
     "@hero-design/colors": "8.42.5",
     "date-fns": "^2.16.1",
-    "events": "^3.2.0",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.6",
-    "@react-native-community/datetimepicker": "^3.5.2",
+    "@hero-design/react-native-month-year-picker": "^8.42.7",
+    "@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",
@@ -49,8 +48,8 @@
     "@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.6",
-    "@react-native-community/datetimepicker": "3.5.2",
+    "@hero-design/react-native-month-year-picker": "^8.42.7",
+    "@react-native-community/datetimepicker": "7.2.0",
     "@react-native-community/slider": "4.4.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.1",
@@ -60,6 +59,7 @@
     "@rollup/plugin-typescript": "^8.3.0",
     "@testing-library/jest-native": "^5.4.2",
     "@testing-library/react-native": "^9.1.0",
+    "@types/events": "^3.0.3",
     "@types/jest": "^29.5.3",
     "@types/react": "^18.2.0",
     "@types/react-native-vector-icons": "^6.4.10",

package/src/components/Calendar/__tests__/index.spec.tsx

@@ -114,9 +114,9 @@ describe('Calendar', () => {
     platform
     ${'ios'}
     ${'android'}
-  `('renders correct picker on $platform', ({ platform }) => {
+  `('renders correct picker on $platform', ({ platform: mockedPlatform }) => {
     jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-      OS: platform,
+      OS: mockedPlatform,
       select: () => null,
     }));
 
@@ -133,7 +133,7 @@ describe('Calendar', () => {
     fireEvent.press(getByTestId('calendar-month-picker'));
 
     // Pickers are mocked at packages/rn/testUtils/setup.tsx
-    if (platform === 'ios') {
+    if (mockedPlatform === 'ios') {
       expect(queryByText('IOS picker')).toBeDefined();
     } else {
       expect(queryByText('Android picker')).toBeDefined();
@@ -146,9 +146,9 @@ describe('Calendar', () => {
     ${'android'}
   `(
     'onToggleMonthPicker is called when toggling month year picker on $platform',
-    ({ platform }) => {
+    ({ platform: mockedPlatform }) => {
       jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-        OS: platform,
+        OS: mockedPlatform,
         select: () => null,
       }));
 

package/src/components/Carousel/CardCarousel.tsx

@@ -67,6 +67,10 @@ export interface CardCarouselProps {
   onLayout?: (event: LayoutChangeEvent) => void;
 }
 
+export const getCardCarouselValidIndex = (index: number, length: number) => {
+  return Math.min(Math.max(index, 0), length - 1);
+};
+
 export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
   (
     {
@@ -92,13 +96,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
       Platform.OS === 'ios' ? VIEW_POSITION_CENTER : undefined;
     const snapToIndex = useCallback(
       (index: number) => {
-        let validIndex = 0;
-
-        if (index >= items.length) {
-          validIndex = items.length - 1;
-        } else if (index >= 0) {
-          validIndex = index;
-        }
+        const validIndex = getCardCarouselValidIndex(index, items.length);
 
         carouselRef.current?.scrollToIndex({
           index: validIndex,
@@ -106,7 +104,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
           viewPosition,
         });
       },
-      [carouselRef, itemWidth]
+      [items.length, viewPosition]
     );
 
     /*
@@ -122,7 +120,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
         animated: true,
         viewPosition,
       });
-    }, [carouselRef, currentIndex, itemWidth, items.length]);
+    }, [currentIndex, items.length, viewPosition]);
 
     React.useImperativeHandle(
       ref,

package/src/components/Carousel/CarouselItem.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTheme } from '@emotion/react';
 import {
   StyledCarouselContentWrapper,
   StyledCarouselHeading,
@@ -26,27 +27,38 @@ const CarouselItem = ({
   heading,
   body,
 }: CarouselItemProps) => {
-  return (
-    <Box style={{ width }}>
-      {image &&
-        (isCarouselImageProps(image) ? (
+  const theme = useTheme();
+
+  const ImageComponent = React.useMemo(() => {
+    if (image) {
+      if (isCarouselImageProps(image)) {
+        return (
           <StyledCustomSizeCarouselImage
             source={image}
             height={image.height}
             width={image.width}
             resizeMode={image.resizeMode}
+            style={{ marginBottom: theme.space.medium }}
           />
-        ) : (
-          <StyledCarouselImage
-            source={typeof image === 'string' ? { uri: image } : image}
-          />
-        ))}
+        );
+      }
+
+      return (
+        <StyledCarouselImage
+          source={typeof image === 'string' ? { uri: image } : image}
+          style={{ marginBottom: theme.space.medium }}
+        />
+      );
+    }
+
+    return null;
+  }, [image]);
+
+  return (
+    <Box style={{ width }}>
+      {ImageComponent}
 
-      <StyledCarouselContentWrapper
-        paddingHorizontal="large"
-        marginTop="large"
-        width={width}
-      >
+      <StyledCarouselContentWrapper paddingHorizontal="medium" width={width}>
         {content}
         <StyledCarouselHeading level="h1" typeface="playful">
           {heading}

package/src/components/Carousel/StyledCarousel.tsx

@@ -22,7 +22,6 @@ const StyledCarouselView = styled(View)(() => ({
 }));
 
 const StyledCarouselHeading = styled(Typography.Title)(({ theme }) => ({
-  marginTop: theme.__hd__.carousel.space.headingMarginTop,
   marginBottom: theme.__hd__.carousel.space.headingMarginBottom,
 }));
 
@@ -34,8 +33,8 @@ const StyledCarouselImage = styled(Image)(() => ({
 }));
 
 const StyledCustomSizeCarouselImage = styled(Image)<{
-  height?: number;
-  width?: number;
+  height?: number | `${number}%`;
+  width?: number | `${number}%`;
   resizeMode?: ImageResizeMode;
 }>(({ height, resizeMode = 'contain', width }) => ({
   alignSelf: 'center',