@hero-design/rn 8.21.0 → 8.22.0

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 46270a3aa1e515d5
+@hero-design/rn:build: cache hit, replaying output ebe8623fbd3e3933
 @hero-design/rn:build: $ yarn build:js && yarn build:types
 @hero-design/rn:build: $ rollup -c
 @hero-design/rn:build: 
 @hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
 @hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 @hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 25s
+@hero-design/rn:build: created lib/index.js, es/index.js in 26.8s
 @hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -914,13 +914,18 @@ var BASE_COLORS = {
   aliceBlue: '#ecf0ff',
   antiFlashWhite: '#f1f2f3',
   apple: '#e3602a',
+  bigStone: '#344348',
   blue1: '#5a68e2',
   blue: '#1dbeee',
+  blueOblivion: '#23438f',
+  blazingBonfire: '#ffa234',
   cornflowerBlue: '#5d80f0',
   currant: '#48000a',
   darkBlue: '#25006e',
   deepSaffron: '#ffa234',
+  deepIntoTheJungle: '#004e48',
   emerald: '#5ace7d',
+  flagstone: '#acacaf',
   frenchSky: '#8999ff',
   gold: '#ffd500',
   green: '#01b39c',
@@ -928,13 +933,17 @@ var BASE_COLORS = {
   grotesqueGreen: '#6af293',
   hitPink: '#ffad79',
   honeydew: '#f0fef4',
+  indianDance: '#f89076',
   jordyBlue: '#92abfc',
   linen: '#fcebe7',
   maasstrichtBlue: '#001f23',
   mauve: '#c38cee',
+  moussaka: '#6f2a17',
   mellowApricot: '#ffbe71',
+  mintLeaf: '#01cbb0',
   nightBlue: '#353957',
   pastelRed: '#f46363',
+  pastelBlue: '#a1b5fc',
   paua: '#130066',
   peach: '#f8ac7d',
   pineGreen: '#017d6d',
@@ -952,6 +961,8 @@ var BASE_COLORS = {
   violet1: '#8505a2',
   violet: '#7622d7',
   vodka: '#b5c3fd',
+  theatreGold: '#a56822',
+  uniformGreen: '#4d4628',
   yellow: '#fadb14'
 };
 var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
@@ -1122,13 +1133,19 @@ var palette$8 = {
 var aliceBlue = colorScales.aliceBlue,
   antiFlashWhite = colorScales.antiFlashWhite,
   apple$2 = colorScales.apple,
+  blazingBonfire = colorScales.blazingBonfire,
+  bigStone = colorScales.bigStone,
+  flagstone = colorScales.flagstone,
   deepSaffron$1 = colorScales.deepSaffron,
+  deepIntoTheJungle = colorScales.deepIntoTheJungle,
   emerald$1 = colorScales.emerald,
   grey$3 = colorScales.grey,
   honeydew$2 = colorScales.honeydew,
+  indianDance = colorScales.indianDance,
   linen$2 = colorScales.linen,
   maasstrichtBlue$2 = colorScales.maasstrichtBlue,
   mellowApricot = colorScales.mellowApricot,
+  moussaka = colorScales.moussaka,
   pastelRed$1 = colorScales.pastelRed,
   pineGreen$1 = colorScales.pineGreen,
   seashell$2 = colorScales.seashell,
@@ -1136,7 +1153,12 @@ var aliceBlue = colorScales.aliceBlue,
   sonicSilver$1 = colorScales.sonicSilver,
   ultramarineBlue$1 = colorScales.ultramarineBlue,
   vermilion$1 = colorScales.vermilion,
-  vodka = colorScales.vodka;
+  vodka = colorScales.vodka,
+  theatreGold = colorScales.theatreGold,
+  uniformGreen = colorScales.uniformGreen,
+  mintLeaf = colorScales.mintLeaf,
+  blueOblivion = colorScales.blueOblivion,
+  pastelBlue = colorScales.pastelBlue;
 var palette$7 = {
   black: '#000000',
   white: '#ffffff',
@@ -1161,17 +1183,29 @@ var palette$7 = {
   pastelRedLight20: pastelRed$1.lighten20,
   mellowApricot: mellowApricot.base,
   mellowApricotLight20: mellowApricot.lighten20,
+  moussaka: moussaka.base,
   emerald: emerald$1.base,
   emeraldLight20: emerald$1.lighten20,
   emeraldDark20: emerald$1.darken20,
   vodka: vodka.base,
   vodkaLight20: vodka.lighten20,
   vermilion: vermilion$1.base,
+  vermilionLight20: vermilion$1.lighten20,
+  vermilionDark10: vermilion$1.darken10,
   deepSaffron: deepSaffron$1.base,
   deepSaffronDark20: deepSaffron$1.darken20,
+  indianDance: indianDance.base,
+  theatreGold: theatreGold.base,
+  theatreGoldLight20: theatreGold.lighten20,
   pineGreen: pineGreen$1.base,
+  pineGreenLight20: pineGreen$1.lighten20,
+  pineGreenDark10: pineGreen$1.darken10,
   ultramarineBlue: ultramarineBlue$1.base,
+  ultramarineBlueLight20: ultramarineBlue$1.lighten20,
+  ultramarineBlueDark10: ultramarineBlue$1.darken10,
   sonicSilver: sonicSilver$1.base,
+  sonicSilverLight50: sonicSilver$1.lighten45,
+  sonicSilverDark10: sonicSilver$1.darken10,
   linen: linen$2.base,
   seashell: seashell$2.base,
   honeydew: honeydew$2.base,
@@ -1179,7 +1213,15 @@ var palette$7 = {
   antiFlashWhite: antiFlashWhite.base,
   apple: apple$2.base,
   silverChalice: silverChalice.base,
-  silverChaliceLight20: silverChalice.lighten20
+  silverChaliceLight20: silverChalice.lighten20,
+  uniformGreen: uniformGreen.base,
+  blazingBonfire: blazingBonfire.base,
+  deepIntoTheJungle: deepIntoTheJungle.base,
+  mintLeaf: mintLeaf.base,
+  blueOblivion: blueOblivion.base,
+  pastelBlue: pastelBlue.base,
+  bigStone: bigStone.base,
+  flagstone: flagstone.base
 };
 var currant$1 = colorScales.currant,
   sonicSilver = colorScales.sonicSilver,
@@ -1385,26 +1427,26 @@ var globalPalette = {
   inactiveOutline: palette$7.maasstrichtBlueLight60,
   disabledOutline: palette$7.greyDark20,
   // Accents
-  error: palette$7.pastelRed,
-  mutedError: palette$7.pastelRedLight20,
-  errorSurface: palette$7.linen,
-  onErrorSurface: palette$7.vermilion,
-  warning: palette$7.mellowApricot,
-  mutedWarning: palette$7.mellowApricotLight20,
-  warningSurface: palette$7.seashell,
-  onWarningSurface: palette$7.deepSaffron,
-  success: palette$7.emerald,
-  mutedSuccess: palette$7.emeraldLight20,
-  successSurface: palette$7.honeydew,
-  onSuccessSurface: palette$7.pineGreen,
-  info: palette$7.vodka,
-  mutedInfo: palette$7.vodkaLight20,
-  infoSurface: palette$7.aliceBlue,
-  onInfoSurface: palette$7.ultramarineBlue,
-  archived: palette$7.silverChalice,
-  mutedArchived: palette$7.silverChaliceLight20,
-  archivedSurface: palette$7.antiFlashWhite,
-  onArchivedSurface: palette$7.sonicSilver
+  error: palette$7.vermilionDark10,
+  mutedError: palette$7.vermilionLight20,
+  errorSurface: palette$7.moussaka,
+  onErrorSurface: palette$7.indianDance,
+  warning: palette$7.theatreGold,
+  mutedWarning: palette$7.theatreGoldLight20,
+  warningSurface: palette$7.uniformGreen,
+  onWarningSurface: palette$7.blazingBonfire,
+  success: palette$7.pineGreenDark10,
+  mutedSuccess: palette$7.pineGreenLight20,
+  successSurface: palette$7.deepIntoTheJungle,
+  onSuccessSurface: palette$7.mintLeaf,
+  info: palette$7.ultramarineBlueDark10,
+  mutedInfo: palette$7.ultramarineBlueLight20,
+  infoSurface: palette$7.blueOblivion,
+  onInfoSurface: palette$7.pastelBlue,
+  archived: palette$7.sonicSilverDark10,
+  mutedArchived: palette$7.sonicSilverLight50,
+  archivedSurface: palette$7.bigStone,
+  onArchivedSurface: palette$7.flagstone
   // End of Updated 21 / Nov / 22
 };
 
@@ -2217,7 +2259,8 @@ var getFABTheme = function getFABTheme(theme) {
     actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
-    actionItemText: theme.colors.onPrimary
+    actionItemText: theme.colors.onPrimary,
+    shadow: theme.colors.primaryOutline
   };
   var sizes = {
     width: theme.sizes.xxxxxlarge,
@@ -2239,6 +2282,15 @@ var getFABTheme = function getFABTheme(theme) {
     title: theme.lineHeights.large,
     icon: theme.lineHeights.large
   };
+  var shadows = {
+    offset: {
+      width: 0,
+      height: 2
+    },
+    opacity: 0.12,
+    radius: theme.radii.medium,
+    elevation: 2
+  };
   var space = {
     actionItemPaddingLeft: theme.space.medium,
     actionItemPaddingRight: theme.space.medium,
@@ -2265,6 +2317,7 @@ var getFABTheme = function getFABTheme(theme) {
     colors: colors,
     sizes: sizes,
     lineHeights: lineHeights,
+    shadows: shadows,
     space: space
   };
 };
@@ -10988,6 +11041,7 @@ var StyledCarouselHeading = index$a(Typography.Text)(function (_ref2) {
 });
 var StyledCarouselImage = index$a(Image)(function () {
   return {
+    flexGrow: 2,
     flex: 1,
     width: '100%',
     resizeMode: 'contain'
@@ -11008,8 +11062,7 @@ var StyledCustomSizeCarouselImage = index$a(Image)(function (_ref3) {
 var StyledCarouselContentWrapper = index$a(Box)(function (_ref4) {
   var width = _ref4.width;
   return {
-    width: width,
-    minHeight: scale(250)
+    width: width
   };
 });
 var StyledCarouselFooterWrapper = index$a(View)(function (_ref5) {
@@ -11338,7 +11391,7 @@ var Carousel = function Carousel(_ref) {
     pageControlPosition = _ref$pageControlPosit === void 0 ? 'bottom' : _ref$pageControlPosit,
     nativeProps = _objectWithoutProperties(_ref, _excluded$e);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop);
-  useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition !== 'bottom');
+  useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var carouselRef = useRef(null);
   var _useStateFromProp = useStateFromProp(selectedItemIndex),
     _useStateFromProp2 = _slicedToArray(_useStateFromProp, 2),
@@ -12703,7 +12756,7 @@ var Error$1 = function Error(_ref2) {
   }, nativeProps));
 };
 
-var StyledFABContainer = index$a(TouchableHighlight)(function (_ref) {
+var StyledFAB$1 = index$a(TouchableHighlight)(function (_ref) {
   var theme = _ref.theme;
   return {
     backgroundColor: theme.__hd__.fab.colors.buttonBackground,
@@ -12714,7 +12767,8 @@ var StyledFABContainer = index$a(TouchableHighlight)(function (_ref) {
     alignSelf: 'flex-start',
     paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
     paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
-    flexDirection: 'row'
+    flexDirection: 'row',
+    elevation: theme.__hd__.fab.shadows.elevation
   };
 });
 var StyledFABIcon = index$a(Icon)(function (_ref2) {
@@ -12738,6 +12792,15 @@ var StyledFABText = index$a(Typography.Text)(function (_ref3) {
     marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal
   };
 });
+var StyledFABContainer = index$a(Box)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    shadowColor: theme.__hd__.fab.colors.shadow,
+    shadowOffset: theme.__hd__.fab.shadows.offset,
+    shadowRadius: theme.__hd__.fab.shadows.radius,
+    shadowOpacity: theme.__hd__.fab.shadows.opacity
+  };
+});
 
 var _excluded$a = ["active"];
 var AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
@@ -12804,9 +12867,10 @@ var FAB = function FAB(_ref3) {
   var isIconOnly = !title;
   var theme = useTheme();
   return /*#__PURE__*/React.createElement(StyledFABContainer, {
-    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
-    testID: testID,
     style: style,
+    testID: testID
+  }, /*#__PURE__*/React.createElement(StyledFAB$1, {
+    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
     onPress: onPress
   }, isIconOnly ? /*#__PURE__*/React.createElement(IconOnlyContent, {
     animated: animated,
@@ -12815,7 +12879,7 @@ var FAB = function FAB(_ref3) {
   }) : /*#__PURE__*/React.createElement(IconWithTextContent, {
     icon: icon,
     title: title
-  }));
+  })));
 };
 
 var StyledActionItem = index$a(TouchableHighlight)(function (_ref) {

package/lib/index.js

@@ -944,13 +944,18 @@ var BASE_COLORS = {
   aliceBlue: '#ecf0ff',
   antiFlashWhite: '#f1f2f3',
   apple: '#e3602a',
+  bigStone: '#344348',
   blue1: '#5a68e2',
   blue: '#1dbeee',
+  blueOblivion: '#23438f',
+  blazingBonfire: '#ffa234',
   cornflowerBlue: '#5d80f0',
   currant: '#48000a',
   darkBlue: '#25006e',
   deepSaffron: '#ffa234',
+  deepIntoTheJungle: '#004e48',
   emerald: '#5ace7d',
+  flagstone: '#acacaf',
   frenchSky: '#8999ff',
   gold: '#ffd500',
   green: '#01b39c',
@@ -958,13 +963,17 @@ var BASE_COLORS = {
   grotesqueGreen: '#6af293',
   hitPink: '#ffad79',
   honeydew: '#f0fef4',
+  indianDance: '#f89076',
   jordyBlue: '#92abfc',
   linen: '#fcebe7',
   maasstrichtBlue: '#001f23',
   mauve: '#c38cee',
+  moussaka: '#6f2a17',
   mellowApricot: '#ffbe71',
+  mintLeaf: '#01cbb0',
   nightBlue: '#353957',
   pastelRed: '#f46363',
+  pastelBlue: '#a1b5fc',
   paua: '#130066',
   peach: '#f8ac7d',
   pineGreen: '#017d6d',
@@ -982,6 +991,8 @@ var BASE_COLORS = {
   violet1: '#8505a2',
   violet: '#7622d7',
   vodka: '#b5c3fd',
+  theatreGold: '#a56822',
+  uniformGreen: '#4d4628',
   yellow: '#fadb14'
 };
 var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
@@ -1152,13 +1163,19 @@ var palette$8 = {
 var aliceBlue = colorScales.aliceBlue,
   antiFlashWhite = colorScales.antiFlashWhite,
   apple$2 = colorScales.apple,
+  blazingBonfire = colorScales.blazingBonfire,
+  bigStone = colorScales.bigStone,
+  flagstone = colorScales.flagstone,
   deepSaffron$1 = colorScales.deepSaffron,
+  deepIntoTheJungle = colorScales.deepIntoTheJungle,
   emerald$1 = colorScales.emerald,
   grey$3 = colorScales.grey,
   honeydew$2 = colorScales.honeydew,
+  indianDance = colorScales.indianDance,
   linen$2 = colorScales.linen,
   maasstrichtBlue$2 = colorScales.maasstrichtBlue,
   mellowApricot = colorScales.mellowApricot,
+  moussaka = colorScales.moussaka,
   pastelRed$1 = colorScales.pastelRed,
   pineGreen$1 = colorScales.pineGreen,
   seashell$2 = colorScales.seashell,
@@ -1166,7 +1183,12 @@ var aliceBlue = colorScales.aliceBlue,
   sonicSilver$1 = colorScales.sonicSilver,
   ultramarineBlue$1 = colorScales.ultramarineBlue,
   vermilion$1 = colorScales.vermilion,
-  vodka = colorScales.vodka;
+  vodka = colorScales.vodka,
+  theatreGold = colorScales.theatreGold,
+  uniformGreen = colorScales.uniformGreen,
+  mintLeaf = colorScales.mintLeaf,
+  blueOblivion = colorScales.blueOblivion,
+  pastelBlue = colorScales.pastelBlue;
 var palette$7 = {
   black: '#000000',
   white: '#ffffff',
@@ -1191,17 +1213,29 @@ var palette$7 = {
   pastelRedLight20: pastelRed$1.lighten20,
   mellowApricot: mellowApricot.base,
   mellowApricotLight20: mellowApricot.lighten20,
+  moussaka: moussaka.base,
   emerald: emerald$1.base,
   emeraldLight20: emerald$1.lighten20,
   emeraldDark20: emerald$1.darken20,
   vodka: vodka.base,
   vodkaLight20: vodka.lighten20,
   vermilion: vermilion$1.base,
+  vermilionLight20: vermilion$1.lighten20,
+  vermilionDark10: vermilion$1.darken10,
   deepSaffron: deepSaffron$1.base,
   deepSaffronDark20: deepSaffron$1.darken20,
+  indianDance: indianDance.base,
+  theatreGold: theatreGold.base,
+  theatreGoldLight20: theatreGold.lighten20,
   pineGreen: pineGreen$1.base,
+  pineGreenLight20: pineGreen$1.lighten20,
+  pineGreenDark10: pineGreen$1.darken10,
   ultramarineBlue: ultramarineBlue$1.base,
+  ultramarineBlueLight20: ultramarineBlue$1.lighten20,
+  ultramarineBlueDark10: ultramarineBlue$1.darken10,
   sonicSilver: sonicSilver$1.base,
+  sonicSilverLight50: sonicSilver$1.lighten45,
+  sonicSilverDark10: sonicSilver$1.darken10,
   linen: linen$2.base,
   seashell: seashell$2.base,
   honeydew: honeydew$2.base,
@@ -1209,7 +1243,15 @@ var palette$7 = {
   antiFlashWhite: antiFlashWhite.base,
   apple: apple$2.base,
   silverChalice: silverChalice.base,
-  silverChaliceLight20: silverChalice.lighten20
+  silverChaliceLight20: silverChalice.lighten20,
+  uniformGreen: uniformGreen.base,
+  blazingBonfire: blazingBonfire.base,
+  deepIntoTheJungle: deepIntoTheJungle.base,
+  mintLeaf: mintLeaf.base,
+  blueOblivion: blueOblivion.base,
+  pastelBlue: pastelBlue.base,
+  bigStone: bigStone.base,
+  flagstone: flagstone.base
 };
 var currant$1 = colorScales.currant,
   sonicSilver = colorScales.sonicSilver,
@@ -1415,26 +1457,26 @@ var globalPalette = {
   inactiveOutline: palette$7.maasstrichtBlueLight60,
   disabledOutline: palette$7.greyDark20,
   // Accents
-  error: palette$7.pastelRed,
-  mutedError: palette$7.pastelRedLight20,
-  errorSurface: palette$7.linen,
-  onErrorSurface: palette$7.vermilion,
-  warning: palette$7.mellowApricot,
-  mutedWarning: palette$7.mellowApricotLight20,
-  warningSurface: palette$7.seashell,
-  onWarningSurface: palette$7.deepSaffron,
-  success: palette$7.emerald,
-  mutedSuccess: palette$7.emeraldLight20,
-  successSurface: palette$7.honeydew,
-  onSuccessSurface: palette$7.pineGreen,
-  info: palette$7.vodka,
-  mutedInfo: palette$7.vodkaLight20,
-  infoSurface: palette$7.aliceBlue,
-  onInfoSurface: palette$7.ultramarineBlue,
-  archived: palette$7.silverChalice,
-  mutedArchived: palette$7.silverChaliceLight20,
-  archivedSurface: palette$7.antiFlashWhite,
-  onArchivedSurface: palette$7.sonicSilver
+  error: palette$7.vermilionDark10,
+  mutedError: palette$7.vermilionLight20,
+  errorSurface: palette$7.moussaka,
+  onErrorSurface: palette$7.indianDance,
+  warning: palette$7.theatreGold,
+  mutedWarning: palette$7.theatreGoldLight20,
+  warningSurface: palette$7.uniformGreen,
+  onWarningSurface: palette$7.blazingBonfire,
+  success: palette$7.pineGreenDark10,
+  mutedSuccess: palette$7.pineGreenLight20,
+  successSurface: palette$7.deepIntoTheJungle,
+  onSuccessSurface: palette$7.mintLeaf,
+  info: palette$7.ultramarineBlueDark10,
+  mutedInfo: palette$7.ultramarineBlueLight20,
+  infoSurface: palette$7.blueOblivion,
+  onInfoSurface: palette$7.pastelBlue,
+  archived: palette$7.sonicSilverDark10,
+  mutedArchived: palette$7.sonicSilverLight50,
+  archivedSurface: palette$7.bigStone,
+  onArchivedSurface: palette$7.flagstone
   // End of Updated 21 / Nov / 22
 };
 
@@ -2247,7 +2289,8 @@ var getFABTheme = function getFABTheme(theme) {
     actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
-    actionItemText: theme.colors.onPrimary
+    actionItemText: theme.colors.onPrimary,
+    shadow: theme.colors.primaryOutline
   };
   var sizes = {
     width: theme.sizes.xxxxxlarge,
@@ -2269,6 +2312,15 @@ var getFABTheme = function getFABTheme(theme) {
     title: theme.lineHeights.large,
     icon: theme.lineHeights.large
   };
+  var shadows = {
+    offset: {
+      width: 0,
+      height: 2
+    },
+    opacity: 0.12,
+    radius: theme.radii.medium,
+    elevation: 2
+  };
   var space = {
     actionItemPaddingLeft: theme.space.medium,
     actionItemPaddingRight: theme.space.medium,
@@ -2295,6 +2347,7 @@ var getFABTheme = function getFABTheme(theme) {
     colors: colors,
     sizes: sizes,
     lineHeights: lineHeights,
+    shadows: shadows,
     space: space
   };
 };
@@ -11018,6 +11071,7 @@ var StyledCarouselHeading = index$a(Typography.Text)(function (_ref2) {
 });
 var StyledCarouselImage = index$a(Image)(function () {
   return {
+    flexGrow: 2,
     flex: 1,
     width: '100%',
     resizeMode: 'contain'
@@ -11038,8 +11092,7 @@ var StyledCustomSizeCarouselImage = index$a(Image)(function (_ref3) {
 var StyledCarouselContentWrapper = index$a(Box)(function (_ref4) {
   var width = _ref4.width;
   return {
-    width: width,
-    minHeight: scale(250)
+    width: width
   };
 });
 var StyledCarouselFooterWrapper = index$a(reactNative.View)(function (_ref5) {
@@ -11368,7 +11421,7 @@ var Carousel = function Carousel(_ref) {
     pageControlPosition = _ref$pageControlPosit === void 0 ? 'bottom' : _ref$pageControlPosit,
     nativeProps = _objectWithoutProperties(_ref, _excluded$e);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop);
-  useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition !== 'bottom');
+  useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var carouselRef = React.useRef(null);
   var _useStateFromProp = useStateFromProp(selectedItemIndex),
     _useStateFromProp2 = _slicedToArray(_useStateFromProp, 2),
@@ -12733,7 +12786,7 @@ var Error$1 = function Error(_ref2) {
   }, nativeProps));
 };
 
-var StyledFABContainer = index$a(reactNative.TouchableHighlight)(function (_ref) {
+var StyledFAB$1 = index$a(reactNative.TouchableHighlight)(function (_ref) {
   var theme = _ref.theme;
   return {
     backgroundColor: theme.__hd__.fab.colors.buttonBackground,
@@ -12744,7 +12797,8 @@ var StyledFABContainer = index$a(reactNative.TouchableHighlight)(function (_ref)
     alignSelf: 'flex-start',
     paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
     paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
-    flexDirection: 'row'
+    flexDirection: 'row',
+    elevation: theme.__hd__.fab.shadows.elevation
   };
 });
 var StyledFABIcon = index$a(Icon)(function (_ref2) {
@@ -12768,6 +12822,15 @@ var StyledFABText = index$a(Typography.Text)(function (_ref3) {
     marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal
   };
 });
+var StyledFABContainer = index$a(Box)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    shadowColor: theme.__hd__.fab.colors.shadow,
+    shadowOffset: theme.__hd__.fab.shadows.offset,
+    shadowRadius: theme.__hd__.fab.shadows.radius,
+    shadowOpacity: theme.__hd__.fab.shadows.opacity
+  };
+});
 
 var _excluded$a = ["active"];
 var AnimatedIcons = reactNative.Animated.createAnimatedComponent(StyledFABIcon);
@@ -12834,9 +12897,10 @@ var FAB = function FAB(_ref3) {
   var isIconOnly = !title;
   var theme = useTheme();
   return /*#__PURE__*/React__default["default"].createElement(StyledFABContainer, {
-    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
-    testID: testID,
     style: style,
+    testID: testID
+  }, /*#__PURE__*/React__default["default"].createElement(StyledFAB$1, {
+    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
     onPress: onPress
   }, isIconOnly ? /*#__PURE__*/React__default["default"].createElement(IconOnlyContent, {
     animated: animated,
@@ -12845,7 +12909,7 @@ var FAB = function FAB(_ref3) {
   }) : /*#__PURE__*/React__default["default"].createElement(IconWithTextContent, {
     icon: icon,
     title: title
-  }));
+  })));
 };
 
 var StyledActionItem = index$a(reactNative.TouchableHighlight)(function (_ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.21.0",
+  "version": "8.22.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.21.0",
+    "@hero-design/colors": "8.22.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -45,7 +45,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.21.0",
+    "@hero-design/eslint-plugin": "8.22.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -61,9 +61,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.21.0",
+    "eslint-config-hd": "8.22.0",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.21.0",
+    "prettier-config-hd": "8.22.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Carousel/StyledCarousel.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/native';
 import Typography from '../Typography';
 import Image from '../Image';
 import Box from '../Box';
-import { scale } from '../../utils/scale';
 import PageControl from '../PageControl';
 
 const StyledBackDrop = styled(View)<{
@@ -31,6 +30,7 @@ const StyledCarouselHeading = styled(Typography.Text)(({ theme }) => ({
 }));
 
 const StyledCarouselImage = styled(Image)(() => ({
+  flexGrow: 2,
   flex: 1,
   width: '100%',
   resizeMode: 'contain',
@@ -51,7 +51,6 @@ const StyledCarouselContentWrapper = styled(Box)<{
   width: number;
 }>(({ width }) => ({
   width,
-  minHeight: scale(250),
 }));
 
 const StyledCarouselFooterWrapper = styled(View)(({ theme }) => ({