@hero-design/rn 8.34.1 → 8.34.2

package/lib/index.js

@@ -948,6 +948,7 @@ var BASE_COLORS = {
   antiFlashWhite: '#f1f2f3',
   apple: '#e3602a',
   bigStone: '#344348',
+  black: '#000000',
   blue1: '#5a68e2',
   blue: '#1dbeee',
   blueOblivion: '#23438f',
@@ -1005,16 +1006,16 @@ var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
   return Object.assign(Object.assign({}, acc), _defineProperty({}, key, createColorScales(value)));
 }, {});
 var blue$1 = colorScales.blue,
-  ultramarineBlue$3 = colorScales.ultramarineBlue,
+  ultramarineBlue$2 = colorScales.ultramarineBlue,
   green$1 = colorScales.green,
   grey$2 = colorScales.grey,
   grotesqueGreen = colorScales.grotesqueGreen,
-  deepSaffron$3 = colorScales.deepSaffron,
+  deepSaffron$2 = colorScales.deepSaffron,
   pink$1 = colorScales.pink,
   purple$1 = colorScales.purple,
-  vermilion$3 = colorScales.vermilion,
+  vermilion$2 = colorScales.vermilion,
   smalt = colorScales.smalt,
-  violet$2 = colorScales.violet,
+  violet$1 = colorScales.violet,
   yellow$1 = colorScales.yellow;
 var palette$b = {
   black: '#000000',
@@ -1025,14 +1026,14 @@ var palette$b = {
   blueLight30: blue$1.lighten30,
   blueLight75: blue$1.lighten75,
   blueLight90: blue$1.lighten90,
-  dodgerBlue: ultramarineBlue$3.base,
-  dodgerBlueDark15: ultramarineBlue$3.darken15,
-  dodgerBlueDark30: ultramarineBlue$3.darken30,
-  dodgerBlueLight30: ultramarineBlue$3.lighten30,
-  dodgerBlueLight45: ultramarineBlue$3.lighten45,
-  dodgerBlueLight60: ultramarineBlue$3.lighten60,
-  dodgerBlueLight75: ultramarineBlue$3.lighten75,
-  dodgerBlueLight90: ultramarineBlue$3.lighten90,
+  dodgerBlue: ultramarineBlue$2.base,
+  dodgerBlueDark15: ultramarineBlue$2.darken15,
+  dodgerBlueDark30: ultramarineBlue$2.darken30,
+  dodgerBlueLight30: ultramarineBlue$2.lighten30,
+  dodgerBlueLight45: ultramarineBlue$2.lighten45,
+  dodgerBlueLight60: ultramarineBlue$2.lighten60,
+  dodgerBlueLight75: ultramarineBlue$2.lighten75,
+  dodgerBlueLight90: ultramarineBlue$2.lighten90,
   green: green$1.base,
   greenDark15: green$1.darken15,
   greenDark30: green$1.darken30,
@@ -1058,13 +1059,13 @@ var palette$b = {
   grotesqueGreenLight60: grotesqueGreen.lighten60,
   grotesqueGreenLight75: grotesqueGreen.lighten75,
   grotesqueGreenLight90: grotesqueGreen.lighten90,
-  orange: deepSaffron$3.base,
-  orangeDark15: deepSaffron$3.darken15,
-  orangeDark30: deepSaffron$3.darken30,
-  orangeDark75: deepSaffron$3.darken75,
-  orangeLight30: deepSaffron$3.lighten30,
-  orangeLight75: deepSaffron$3.lighten75,
-  orangeLight90: deepSaffron$3.lighten90,
+  orange: deepSaffron$2.base,
+  orangeDark15: deepSaffron$2.darken15,
+  orangeDark30: deepSaffron$2.darken30,
+  orangeDark75: deepSaffron$2.darken75,
+  orangeLight30: deepSaffron$2.lighten30,
+  orangeLight75: deepSaffron$2.lighten75,
+  orangeLight90: deepSaffron$2.lighten90,
   pink: pink$1.base,
   pinkDark15: pink$1.darken15,
   pinkDark30: pink$1.darken30,
@@ -1076,31 +1077,31 @@ var palette$b = {
   pinkLight90: pink$1.lighten90,
   purple: purple$1.base,
   purpleDark15: purple$1.darken15,
-  red: vermilion$3.base,
-  redDark15: vermilion$3.darken15,
-  redDark30: vermilion$3.darken30,
-  redDark75: vermilion$3.darken75,
-  redLight15: vermilion$3.lighten15,
-  redLight30: vermilion$3.lighten30,
-  redLight60: vermilion$3.lighten60,
-  redLight75: vermilion$3.lighten75,
-  redLight90: vermilion$3.lighten90,
+  red: vermilion$2.base,
+  redDark15: vermilion$2.darken15,
+  redDark30: vermilion$2.darken30,
+  redDark75: vermilion$2.darken75,
+  redLight15: vermilion$2.lighten15,
+  redLight30: vermilion$2.lighten30,
+  redLight60: vermilion$2.lighten60,
+  redLight75: vermilion$2.lighten75,
+  redLight90: vermilion$2.lighten90,
   smalt: smalt.base,
   smaltDark75: smalt.darken75,
   smaltLight30: smalt.lighten30,
   smaltLight45: smalt.lighten45,
   smaltLight75: smalt.lighten75,
   smaltLight90: smalt.lighten90,
-  violet: violet$2.base,
-  violetDark15: violet$2.darken15,
-  violetDark30: violet$2.darken30,
-  violetDark45: violet$2.darken45,
-  violetDark60: violet$2.darken60,
-  violetDark75: violet$2.darken75,
-  violetLight30: violet$2.lighten30,
-  violetLight60: violet$2.lighten60,
-  violetLight75: violet$2.lighten75,
-  violetLight90: violet$2.lighten90,
+  violet: violet$1.base,
+  violetDark15: violet$1.darken15,
+  violetDark30: violet$1.darken30,
+  violetDark45: violet$1.darken45,
+  violetDark60: violet$1.darken60,
+  violetDark75: violet$1.darken75,
+  violetLight30: violet$1.lighten30,
+  violetLight60: violet$1.lighten60,
+  violetLight75: violet$1.lighten75,
+  violetLight90: violet$1.lighten90,
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
   yellowDark75: yellow$1.darken75,
@@ -1109,45 +1110,46 @@ var palette$b = {
   yellowLight75: yellow$1.lighten75,
   yellowLight90: yellow$1.lighten90
 };
-var mauve$4 = colorScales.mauve,
-  violet$1 = colorScales.violet;
+var mauve$3 = colorScales.mauve,
+  violet$2 = colorScales.violet;
 Object.assign(Object.assign({}, palette$b), {
-  mauve: mauve$4.base,
-  mauveLight80: mauve$4.lighten80,
-  violetDark50: violet$1.darken50
+  mauve: mauve$3.base,
+  mauveLight80: mauve$3.lighten80,
+  violetDark50: violet$2.darken50
 });
-var apple$4 = colorScales.apple,
+var apple$3 = colorScales.apple,
   hitPink$1 = colorScales.hitPink,
   maasstrichtBlue$4 = colorScales.maasstrichtBlue;
 Object.assign(Object.assign({}, palette$b), {
-  apple: apple$4.base,
-  appleDark20: apple$4.darken20,
-  appleDark50: apple$4.darken50,
-  appleLight90: apple$4.lighten90,
+  apple: apple$3.base,
+  appleDark20: apple$3.darken20,
+  appleDark50: apple$3.darken50,
+  appleLight90: apple$3.lighten90,
   hitPink: hitPink$1.base,
   hitPinkLight80: hitPink$1.lighten80,
   maasstrichtBlueLight30: maasstrichtBlue$4.lighten30
 });
 var aliceBlue$1 = colorScales.aliceBlue,
   antiFlashWhite$1 = colorScales.antiFlashWhite,
-  apple$3 = colorScales.apple,
-  deepSaffron$2 = colorScales.deepSaffron,
-  emerald$2 = colorScales.emerald,
+  apple$2 = colorScales.apple,
+  deepSaffron$1 = colorScales.deepSaffron,
+  emerald$1 = colorScales.emerald,
   grey$1 = colorScales.grey,
   honeydew$1 = colorScales.honeydew,
   linen$1 = colorScales.linen,
   maasstrichtBlue$3 = colorScales.maasstrichtBlue,
   mellowApricot$1 = colorScales.mellowApricot,
-  pastelRed$2 = colorScales.pastelRed,
-  pineGreen$2 = colorScales.pineGreen,
+  pastelRed$1 = colorScales.pastelRed,
+  pineGreen$1 = colorScales.pineGreen,
   seashell$1 = colorScales.seashell,
   silverChalice$1 = colorScales.silverChalice,
-  sonicSilver$2 = colorScales.sonicSilver,
-  ultramarineBlue$2 = colorScales.ultramarineBlue,
-  vermilion$2 = colorScales.vermilion,
-  vodka$1 = colorScales.vodka;
+  sonicSilver$1 = colorScales.sonicSilver,
+  ultramarineBlue$1 = colorScales.ultramarineBlue,
+  vermilion$1 = colorScales.vermilion,
+  vodka$1 = colorScales.vodka,
+  black$1 = colorScales.black;
 var palette$8 = {
-  black: '#000000',
+  black: black$1.base,
   white: '#ffffff',
   greyLight95: grey$1.lighten95,
   greyLight90: grey$1.lighten90,
@@ -1160,39 +1162,39 @@ var palette$8 = {
   maasstrichtBlueLight50: maasstrichtBlue$3.lighten50,
   maasstrichtBlueLight30: maasstrichtBlue$3.lighten30,
   maasstrichtBlue: maasstrichtBlue$3.base,
-  pastelRed: pastelRed$2.base,
-  pastelRedLight20: pastelRed$2.lighten20,
+  pastelRed: pastelRed$1.base,
+  pastelRedLight20: pastelRed$1.lighten20,
   mellowApricot: mellowApricot$1.base,
   mellowApricotLight20: mellowApricot$1.lighten20,
-  emerald: emerald$2.base,
-  emeraldLight20: emerald$2.lighten20,
-  emeraldDark20: emerald$2.darken20,
+  emerald: emerald$1.base,
+  emeraldLight20: emerald$1.lighten20,
+  emeraldDark20: emerald$1.darken20,
   vodka: vodka$1.base,
   vodkaLight20: vodka$1.lighten20,
-  vermilion: vermilion$2.base,
-  deepSaffron: deepSaffron$2.base,
-  deepSaffronDark20: deepSaffron$2.darken20,
-  pineGreen: pineGreen$2.base,
-  ultramarineBlue: ultramarineBlue$2.base,
-  sonicSilver: sonicSilver$2.base,
+  vermilion: vermilion$1.base,
+  deepSaffron: deepSaffron$1.base,
+  deepSaffronDark20: deepSaffron$1.darken20,
+  pineGreen: pineGreen$1.base,
+  ultramarineBlue: ultramarineBlue$1.base,
+  sonicSilver: sonicSilver$1.base,
   linen: linen$1.base,
   seashell: seashell$1.base,
   honeydew: honeydew$1.base,
   aliceBlue: aliceBlue$1.base,
   antiFlashWhite: antiFlashWhite$1.base,
-  apple: apple$3.base,
+  apple: apple$2.base,
   silverChalice: silverChalice$1.base,
   silverChaliceLight20: silverChalice$1.lighten20
 };
 var aliceBlue = colorScales.aliceBlue,
   antiFlashWhite = colorScales.antiFlashWhite,
-  apple$2 = colorScales.apple,
+  apple$1 = colorScales.apple,
   blazingBonfire = colorScales.blazingBonfire,
   bigStone = colorScales.bigStone,
   flagstone = colorScales.flagstone,
-  deepSaffron$1 = colorScales.deepSaffron,
+  deepSaffron = colorScales.deepSaffron,
   deepIntoTheJungle = colorScales.deepIntoTheJungle,
-  emerald$1 = colorScales.emerald,
+  emerald = colorScales.emerald,
   grey$3 = colorScales.grey,
   honeydew$2 = colorScales.honeydew,
   indianDance = colorScales.indianDance,
@@ -1200,13 +1202,13 @@ var aliceBlue = colorScales.aliceBlue,
   maasstrichtBlue$2 = colorScales.maasstrichtBlue,
   mellowApricot = colorScales.mellowApricot,
   moussaka = colorScales.moussaka,
-  pastelRed$1 = colorScales.pastelRed,
-  pineGreen$1 = colorScales.pineGreen,
+  pastelRed = colorScales.pastelRed,
+  pineGreen = colorScales.pineGreen,
   seashell$2 = colorScales.seashell,
   silverChalice = colorScales.silverChalice,
-  sonicSilver$1 = colorScales.sonicSilver,
-  ultramarineBlue$1 = colorScales.ultramarineBlue,
-  vermilion$1 = colorScales.vermilion,
+  sonicSilver = colorScales.sonicSilver,
+  ultramarineBlue = colorScales.ultramarineBlue,
+  vermilion = colorScales.vermilion,
   vodka = colorScales.vodka,
   theatreGold = colorScales.theatreGold,
   uniformGreen = colorScales.uniformGreen,
@@ -1233,39 +1235,39 @@ var palette$7 = {
   maasstrichtBlueLight15: maasstrichtBlue$2.lighten15,
   maasstrichtBlueLight10: maasstrichtBlue$2.lighten10,
   maasstrichtBlue: maasstrichtBlue$2.base,
-  pastelRed: pastelRed$1.base,
-  pastelRedLight20: pastelRed$1.lighten20,
+  pastelRed: pastelRed.base,
+  pastelRedLight20: pastelRed.lighten20,
   mellowApricot: mellowApricot.base,
   mellowApricotLight20: mellowApricot.lighten20,
   moussaka: moussaka.base,
-  emerald: emerald$1.base,
-  emeraldLight20: emerald$1.lighten20,
-  emeraldDark20: emerald$1.darken20,
+  emerald: emerald.base,
+  emeraldLight20: emerald.lighten20,
+  emeraldDark20: emerald.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,
+  vermilion: vermilion.base,
+  vermilionLight20: vermilion.lighten20,
+  vermilionDark10: vermilion.darken10,
+  deepSaffron: deepSaffron.base,
+  deepSaffronDark20: deepSaffron.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,
+  pineGreen: pineGreen.base,
+  pineGreenLight20: pineGreen.lighten20,
+  pineGreenDark10: pineGreen.darken10,
+  ultramarineBlue: ultramarineBlue.base,
+  ultramarineBlueLight20: ultramarineBlue.lighten20,
+  ultramarineBlueDark10: ultramarineBlue.darken10,
+  sonicSilver: sonicSilver.base,
+  sonicSilverLight50: sonicSilver.lighten45,
+  sonicSilverDark10: sonicSilver.darken10,
   linen: linen$2.base,
   seashell: seashell$2.base,
   honeydew: honeydew$2.base,
   aliceBlue: aliceBlue.base,
   antiFlashWhite: antiFlashWhite.base,
-  apple: apple$2.base,
+  apple: apple$1.base,
   silverChalice: silverChalice.base,
   silverChaliceLight20: silverChalice.lighten20,
   uniformGreen: uniformGreen.base,
@@ -1277,45 +1279,17 @@ var palette$7 = {
   bigStone: bigStone.base,
   flagstone: flagstone.base
 };
-var currant$1 = colorScales.currant,
-  sonicSilver = colorScales.sonicSilver,
-  maasstrichtBlue$1 = colorScales.maasstrichtBlue,
-  nightBlue = colorScales.nightBlue,
-  darkBlue = colorScales.darkBlue,
-  ultramarineBlue = colorScales.ultramarineBlue,
-  royalBlue$1 = colorScales.royalBlue,
-  emerald = colorScales.emerald,
-  pineGreen = colorScales.pineGreen,
-  deepSaffron = colorScales.deepSaffron,
-  gold$1 = colorScales.gold,
-  apple$1 = colorScales.apple,
-  pastelRed = colorScales.pastelRed,
-  vermilion = colorScales.vermilion,
-  mauve$3 = colorScales.mauve,
-  violet1$3 = colorScales.violet1,
-  violet$3 = colorScales.violet,
-  scarletGum$2 = colorScales.scarletGum;
+var maasstrichtBlue$1 = colorScales.maasstrichtBlue;
 var palette$6 = {
-  currant: currant$1.base,
-  sonicSilver: sonicSilver.base,
   maasstrichtBlue: maasstrichtBlue$1.base,
-  nightBlue: nightBlue.base,
-  darkBlue: darkBlue.base,
-  ultramarineBlue: ultramarineBlue.base,
-  royalBlue: royalBlue$1.base,
-  royalBlueDark20: royalBlue$1.darken20,
-  emeraldDark20: emerald.darken20,
-  pineGreen: pineGreen.base,
-  deepSaffronDark20: deepSaffron.darken20,
-  goldDark40: gold$1.darken40,
-  apple: apple$1.base,
-  pastelRed: pastelRed.base,
-  vermilion: vermilion.base,
-  mauve: mauve$3.base,
-  violetLight30: violet$3.lighten30,
-  violet1: violet1$3.base,
-  violet: violet$3.base,
-  scarletGum: scarletGum$2.base
+  maasstrichtBlueLight5: maasstrichtBlue$1.lighten5,
+  maasstrichtBlueLight10: maasstrichtBlue$1.lighten10,
+  maasstrichtBlueLight15: maasstrichtBlue$1.lighten15,
+  maasstrichtBlueLight20: maasstrichtBlue$1.lighten20,
+  maasstrichtBlueLight25: maasstrichtBlue$1.lighten25,
+  maasstrichtBlueLight30: maasstrichtBlue$1.lighten30,
+  maasstrichtBlueLight35: maasstrichtBlue$1.lighten35,
+  maasstrichtBlueLight40: maasstrichtBlue$1.lighten40
 };
 var violet1$2 = colorScales.violet1,
   mauve$2 = colorScales.mauve;
@@ -1394,15 +1368,18 @@ var palette$1 = Object.assign(Object.assign({}, palette$8), {
   frenchSkyLight70: frenchSky.lighten70,
   frenchSkyLight80: frenchSky.lighten80
 });
-var gold$2 = colorScales.gold,
-  policeBlue = colorScales.policeBlue;
+var gold$1 = colorScales.gold,
+  policeBlue = colorScales.policeBlue,
+  black$2 = colorScales.black;
 var palette = Object.assign(Object.assign({}, palette$8), {
-  goldLight20: gold$2.lighten20,
-  goldLight50: gold$2.lighten50,
-  goldLight70: gold$2.lighten70,
-  goldLight80: gold$2.lighten80,
-  goldLight90: gold$2.lighten90,
-  gold: gold$2.base,
+  blackLight30: black$2.lighten30,
+  blackLight90: black$2.lighten90,
+  goldLight20: gold$1.lighten20,
+  goldLight50: gold$1.lighten50,
+  goldLight70: gold$1.lighten70,
+  goldLight80: gold$1.lighten80,
+  goldLight90: gold$1.lighten90,
+  gold: gold$1.base,
   policeBlue: policeBlue.base,
   policeBlueLight20: policeBlue.lighten20,
   policeBlueLight25: policeBlue.lighten25,
@@ -1518,13 +1495,13 @@ var swagDarkBrandSystemPalette = {
 var swagDarkSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPalette);
 
 var workBrandSystemPallete = {
-  primary: palette.policeBlue,
+  primary: palette.black,
   onPrimary: palette.white,
-  secondary: palette.policeBlueLight25,
+  secondary: palette.blackLight30,
   onSecondary: palette.white,
   defaultSurface: palette.white,
-  highlightedSurface: palette.policeBlueLight90,
-  pressedSurface: palette.policeBlueLight20,
+  highlightedSurface: palette.blackLight90,
+  pressedSurface: palette.black,
   decorativePrimary: palette.gold,
   decorativePrimarySurface: palette.goldLight80
 };
@@ -2320,6 +2297,7 @@ var getFABTheme = function getFABTheme(theme) {
   var colors = {
     buttonBackground: theme.colors.primary,
     buttonPressedBackground: theme.colors.pressedSurface,
+    buttonActiveBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
     headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.secondary,
@@ -2441,7 +2419,7 @@ var getListTheme = function getListTheme(theme) {
     suffixContainerMarginLeft: theme.space.small
   };
   var radii = {
-    card: theme.radii.medium,
+    item: theme.radii.medium,
     basicItem: theme.radii.base,
     cardShadow: theme.radii.base,
     leadingStatus: theme.radii.rounded
@@ -2576,8 +2554,8 @@ var getProgressTheme = function getProgressTheme(theme) {
   };
   var sizes = {
     circleDiameter: theme.sizes['6xlarge'],
-    circleCompletenessHeight: theme.sizes.xsmall,
-    barHeight: theme.sizes.xsmall
+    circleCompletenessHeight: theme.sizes.small,
+    barHeight: theme.sizes.small
   };
   var radii = {
     "default": theme.radii.rounded
@@ -2831,8 +2809,8 @@ var getSwitchTheme = function getSwitchTheme(theme) {
     },
     thumb: theme.colors.onSecondary,
     selector: {
-      background: theme.colors.neutralGlobalSurface,
-      textBackground: theme.colors.decorativePrimary
+      background: theme.colors.defaultGlobalSurface,
+      textBackground: theme.colors.decorativePrimarySurface
     }
   };
   var sizes = {
@@ -2840,14 +2818,14 @@ var getSwitchTheme = function getSwitchTheme(theme) {
     width: theme.sizes.xxxlarge,
     height: theme.sizes.large,
     selector: {
-      height: theme.sizes.xxxxlarge
+      height: theme.sizes.xxlarge
     }
   };
   var spaces = {
     paddingHorizontal: theme.space.xsmall,
     selector: {
       iconPadding: theme.space.medium,
-      wrapperPadding: theme.space.xsmall
+      wrapperHorizontalPadding: theme.space.xsmall
     }
   };
   var radii = {
@@ -2882,7 +2860,7 @@ var getTabsTheme = function getTabsTheme(theme) {
     outlineVerticalPadding: theme.space.xsmall
   };
   var radii = {
-    outline: theme.radii.medium
+    outline: theme.radii.xlarge
   };
   var borderWidths = {
     headerBottom: theme.borderWidths.base
@@ -13314,9 +13292,10 @@ var Error$1 = function Error(_ref2) {
 };
 
 var StyledFAB$1 = index$b(reactNative.TouchableHighlight)(function (_ref) {
-  var theme = _ref.theme;
+  var theme = _ref.theme,
+    themeActive = _ref.themeActive;
   return {
-    backgroundColor: theme.__hd__.fab.colors.buttonBackground,
+    backgroundColor: themeActive ? theme.__hd__.fab.colors.buttonActiveBackground : theme.__hd__.fab.colors.buttonBackground,
     borderRadius: theme.radii.rounded,
     alignItems: 'center',
     justifyContent: 'center',
@@ -13493,7 +13472,8 @@ var FAB = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     style: [style, {
       bottom: displayState.hideButton ? -(marginBottom + theme.__hd__.fab.sizes.height * 2) : (_StyleSheet$flatten2 = reactNative.StyleSheet.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.bottom
     }],
-    testID: testID
+    testID: testID,
+    themeActive: active
   }, isIconOnly ? /*#__PURE__*/React__default["default"].createElement(IconOnlyContent, {
     animated: animated,
     active: active,
@@ -13658,7 +13638,7 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [active]);
   var interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, 0.4]
+    outputRange: [0, 0.25]
   });
   var interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
@@ -13725,7 +13705,8 @@ var StyledListItemContainer$1 = index$b(reactNative.TouchableHighlight)(function
   var sharedStyles = {
     flexDirection: 'row',
     backgroundColor: themeSelected ? theme.__hd__.list.colors.checkedListItemContainerBackground : theme.__hd__.list.colors.listItemContainerBackground,
-    padding: theme.__hd__.list.space.listItemContainerPadding
+    padding: theme.__hd__.list.space.listItemContainerPadding,
+    borderRadius: theme.__hd__.list.radii.item
   };
   switch (themeVariant) {
     case 'basic':
@@ -13733,7 +13714,6 @@ var StyledListItemContainer$1 = index$b(reactNative.TouchableHighlight)(function
     case 'card':
       return _objectSpread2(_objectSpread2({}, sharedStyles), {}, {
         alignItems: 'center',
-        borderRadius: theme.__hd__.list.radii.card,
         shadowColor: theme.colors.secondaryOutline,
         shadowRadius: theme.__hd__.list.radii.cardShadow,
         shadowOffset: theme.__hd__.list.shadows.cardOffset,
@@ -14552,7 +14532,8 @@ var StyledWrapper$4 = index$b(reactNative.View)(function (_ref) {
     height: theme.__hd__.progress.sizes.barHeight,
     alignSelf: 'stretch',
     backgroundColor: theme.__hd__.progress.colors.incompleteness[THEME_INTENT_MAP[themeIntent]],
-    overflow: 'hidden'
+    overflow: 'hidden',
+    borderRadius: theme.__hd__.progress.radii["default"]
   };
 });
 var StyledInner = index$b(reactNative.Animated.View)(function (_ref2) {
@@ -15819,7 +15800,7 @@ var StyledWrapper$2 = index$b(reactNative.View)(function (_ref) {
     height: theme.__hd__["switch"].sizes.selector.height,
     borderRadius: theme.__hd__["switch"].radii.selector["default"],
     backgroundColor: theme.__hd__["switch"].colors.selector.background,
-    padding: theme.__hd__["switch"].spaces.selector.wrapperPadding,
+    paddingHorizontal: theme.__hd__["switch"].spaces.selector.wrapperHorizontalPadding,
     position: 'relative'
   };
 });
@@ -15844,15 +15825,10 @@ var StyledIconWrapper$1 = index$b(AnimatedView)(function (_ref3) {
 });
 var StyledKnot$1 = index$b(AnimatedView)(function (_ref4) {
   var theme = _ref4.theme;
-  return {
+  return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     borderRadius: theme.__hd__["switch"].radii.selector["default"],
-    backgroundColor: theme.__hd__["switch"].colors.selector.textBackground,
-    position: 'absolute',
-    top: theme.__hd__["switch"].spaces.selector.wrapperPadding,
-    bottom: theme.__hd__["switch"].spaces.selector.wrapperPadding,
-    left: theme.__hd__["switch"].spaces.selector.wrapperPadding,
-    right: theme.__hd__["switch"].spaces.selector.wrapperPadding
-  };
+    backgroundColor: theme.__hd__["switch"].colors.selector.textBackground
+  });
 });
 
 var OptionContent = function OptionContent(_ref) {
@@ -15928,7 +15904,6 @@ var SelectorSwitch = function SelectorSwitch(_ref) {
     _onPress = _ref.onPress,
     style = _ref.style,
     testID = _ref.testID;
-  var theme = useTheme$1();
   var _useState = React.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     knotWidth = _useState2[0],
@@ -15940,7 +15915,7 @@ var SelectorSwitch = function SelectorSwitch(_ref) {
   var animatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
   var translateX = animatedValue.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, Math.floor(containerWidth - knotWidth - theme.space.small)]
+    outputRange: [0, Math.floor(containerWidth - knotWidth)]
   });
   React.useEffect(function () {
     reactNative.Animated.timing(animatedValue, {
@@ -15949,10 +15924,10 @@ var SelectorSwitch = function SelectorSwitch(_ref) {
       easing: reactNative.Easing.inOut(reactNative.Easing.ease),
       useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android'
     }).start();
-  }, [value]);
+  }, [value, animatedValue, options]);
   var onContainerLayout = React.useCallback(function (e) {
     setContainerWidth(e.nativeEvent.layout.width);
-  }, [options]);
+  }, []);
   var onItemLayout = React.useCallback(function (e, optionValue) {
     if (optionValue === value) {
       setKnotWidth(e.nativeEvent.layout.width);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.34.1",
+  "version": "8.34.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,14 +21,13 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.34.1",
-    "@hero-design/react-native-month-year-picker": "^8.34.1",
+    "@hero-design/colors": "8.34.2",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.34.1",
+    "@hero-design/react-native-month-year-picker": "^8.34.2",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -48,7 +47,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.34.1",
+    "@hero-design/eslint-plugin": "8.34.2",
+    "@hero-design/react-native-month-year-picker": "^8.34.2",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -64,10 +64,10 @@
     "@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.34.1",
+    "eslint-config-hd": "8.34.2",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.34.1",
+    "prettier-config-hd": "8.34.2",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",