@hero-design/rn 8.25.2 → 8.26.0

package/src/components/FAB/ActionGroup/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, View } from 'react-native';
+import { Animated, Easing, Platform, View } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 import ActionItem from './ActionItem';
 import {
@@ -19,13 +19,18 @@ type ActionItemsContainerProps = {
 const ActionItemsListComponent = ({
   style,
   items,
-}: ActionItemsContainerProps) => (
-  <View style={style}>
-    {items?.map((itemProp) => (
-      <ActionItem key={itemProp.icon} {...itemProp} />
-    ))}
-  </View>
-);
+}: ActionItemsContainerProps) => {
+  return (
+    <View style={style}>
+      {items?.map((itemProp) => (
+        <ActionItem
+          key={itemProp.key || `${itemProp.icon}_${itemProp.title}`}
+          {...itemProp}
+        />
+      ))}
+    </View>
+  );
+};
 
 export interface ActionGroupProps {
   /**
@@ -85,7 +90,8 @@ const ActionGroup = ({
   useEffect(() => {
     const animation = Animated.timing(tranlateXAnimation.current, {
       toValue: active ? 1 : 0,
-      useNativeDriver: true,
+      useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
+      easing: Easing.inOut(Easing.cubic),
     });
 
     animation.start();

package/src/components/FAB/AnimatedFABIcon.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, StyleSheet } from 'react-native';
+import { Animated, Easing, Platform, StyleSheet } from 'react-native';
 import { StyledFABIcon } from './StyledFAB';
 import type { IconProps } from '../Icon';
 
@@ -16,7 +16,9 @@ const AnimatedFABIcon = ({ active, ...iconProps }: Props) => {
   useEffect(() => {
     const animation = Animated.timing(rotateAnimation.current, {
       toValue: active ? 1 : 0,
-      useNativeDriver: true,
+      useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
+      easing: Easing.inOut(Easing.ease),
+      duration: 300,
     });
 
     animation.start();
@@ -39,7 +41,7 @@ const AnimatedFABIcon = ({ active, ...iconProps }: Props) => {
         },
       ])}
     >
-      <AnimatedIcons {...iconProps} />
+      <AnimatedIcons size="xsmall" {...iconProps} />
     </Animated.View>
   );
 };

package/src/components/FAB/FAB.tsx

@@ -3,7 +3,12 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import { useTheme } from '../../theme';
 import type { IconName } from '../Icon';
 import { AnimatedFABIcon } from './AnimatedFABIcon';
-import { StyledFAB, StyledFABIcon, StyledFABText } from './StyledFAB';
+import {
+  StyledFAB,
+  StyledFABIcon,
+  StyledFABText,
+  StyledIconContainer,
+} from './StyledFAB';
 
 export interface FABProps {
   /**
@@ -54,7 +59,13 @@ const IconOnlyContent = ({
 }) => {
   if (animated) {
     return (
-      <AnimatedFABIcon active={active} icon={icon} testID="animated-fab-icon" />
+      <StyledIconContainer>
+        <AnimatedFABIcon
+          active={active}
+          icon={icon}
+          testID="animated-fab-icon"
+        />
+      </StyledIconContainer>
     );
   }
   return <StyledFABIcon icon={icon} testID="styled-fab-icon" />;
@@ -68,7 +79,9 @@ const IconWithTextContent = ({
   title?: string;
 }) => (
   <>
-    <StyledFABIcon size="xsmall" icon={icon} testID="styled-fab-icon" />
+    <StyledIconContainer>
+      <StyledFABIcon size="xsmall" icon={icon} testID="styled-fab-icon" />
+    </StyledIconContainer>
     <StyledFABText>{title}</StyledFABText>
   </>
 );

package/src/components/FAB/StyledFAB.tsx

@@ -4,6 +4,7 @@ import { TouchableHighlight } from 'react-native';
 import type { IconProps } from '../Icon';
 import Icon from '../Icon';
 import Typography from '../Typography';
+import Box from '../Box';
 
 const StyledFAB = styled(TouchableHighlight)<TouchableHighlightProps>(
   ({ theme }) => ({
@@ -12,8 +13,7 @@ const StyledFAB = styled(TouchableHighlight)<TouchableHighlightProps>(
     alignItems: 'center',
     justifyContent: 'center',
     alignSelf: 'flex-start',
-    paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
-    paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
+    padding: theme.__hd__.fab.space.containerPadding,
     flexDirection: 'row',
     elevation: theme.__hd__.fab.shadows.elevation,
     shadowColor: theme.__hd__.fab.colors.shadow,
@@ -40,4 +40,11 @@ const StyledFABText = styled(Typography.Text)<TextProps>(({ theme }) => ({
   marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal,
 }));
 
-export { StyledFAB, StyledFABIcon, StyledFABText };
+const StyledIconContainer = styled(Box)(({ theme }) => ({
+  width: theme.__hd__.fab.sizes.iconContainerWidth,
+  height: theme.__hd__.fab.sizes.iconContainerHeight,
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
+export { StyledFAB, StyledFABIcon, StyledFABText, StyledIconContainer };

package/src/components/FAB/__tests__/__snapshots__/AnimatedFABIcon.spec.tsx.snap

@@ -19,7 +19,7 @@ exports[`AnimatedFABIcon renders correctly when isActive is false 1`] = `
       Array [
         Object {
           "color": "#001f23",
-          "fontSize": 24,
+          "fontSize": 16,
         },
         Array [
           Object {
@@ -33,7 +33,7 @@ exports[`AnimatedFABIcon renders correctly when isActive is false 1`] = `
       ]
     }
     themeIntent="text"
-    themeSize="medium"
+    themeSize="xsmall"
   />
 </View>
 `;
@@ -57,7 +57,7 @@ exports[`AnimatedFABIcon renders correctly when isActive is true 1`] = `
       Array [
         Object {
           "color": "#001f23",
-          "fontSize": 24,
+          "fontSize": 16,
         },
         Array [
           Object {
@@ -71,7 +71,7 @@ exports[`AnimatedFABIcon renders correctly when isActive is true 1`] = `
       ]
     }
     themeIntent="text"
-    themeSize="medium"
+    themeSize="xsmall"
   />
 </View>
 `;

package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap

@@ -21,8 +21,7 @@ exports[`StyledFAB renders correctly 1`] = `
         "elevation": 2,
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingHorizontal": 16,
-        "paddingVertical": 16,
+        "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": Object {
           "height": 2,

package/src/components/FAB/__tests__/__snapshots__/index.spec.tsx.snap

@@ -21,8 +21,7 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
         "elevation": 2,
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingHorizontal": 16,
-        "paddingVertical": 16,
+        "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": Object {
           "height": 2,
@@ -84,8 +83,7 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
         "elevation": 2,
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingHorizontal": 16,
-        "paddingVertical": 16,
+        "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": Object {
           "height": 2,
@@ -101,40 +99,57 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
   }
 >
   <View
-    collapsable={false}
     style={
-      Object {
-        "transform": Array [
+      Array [
+        Object {},
+        Array [
           Object {
-            "rotate": "0deg",
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "width": 24,
           },
+          undefined,
         ],
-      }
+      ]
     }
   >
-    <HeroIcon
-      name="add"
+    <View
+      collapsable={false}
       style={
-        Array [
-          Object {
-            "color": "#001f23",
-            "fontSize": 24,
-          },
-          Array [
+        Object {
+          "transform": Array [
             Object {
-              "color": "#ffffff",
-              "lineHeight": 24,
-              "textAlign": "center",
-              "textAlignVertical": "center",
+              "rotate": "0deg",
             },
-            Object {},
           ],
-        ]
+        }
       }
-      testID="animated-fab-icon"
-      themeIntent="text"
-      themeSize="medium"
-    />
+    >
+      <HeroIcon
+        name="add"
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontSize": 16,
+            },
+            Array [
+              Object {
+                "color": "#ffffff",
+                "lineHeight": 24,
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              Object {},
+            ],
+          ]
+        }
+        testID="animated-fab-icon"
+        themeIntent="text"
+        themeSize="xsmall"
+      />
+    </View>
   </View>
 </View>
 `;
@@ -160,8 +175,7 @@ exports[`FAB when title has value renders correctly 1`] = `
         "elevation": 2,
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingHorizontal": 16,
-        "paddingVertical": 16,
+        "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": Object {
           "height": 2,
@@ -176,29 +190,46 @@ exports[`FAB when title has value renders correctly 1`] = `
     ]
   }
 >
-  <HeroIcon
-    name="pencil"
+  <View
     style={
       Array [
-        Object {
-          "color": "#001f23",
-          "fontSize": 16,
-        },
+        Object {},
         Array [
           Object {
-            "color": "#ffffff",
-            "lineHeight": 24,
-            "textAlign": "center",
-            "textAlignVertical": "center",
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "width": 24,
           },
           undefined,
         ],
       ]
     }
-    testID="styled-fab-icon"
-    themeIntent="text"
-    themeSize="xsmall"
-  />
+  >
+    <HeroIcon
+      name="pencil"
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontSize": 16,
+          },
+          Array [
+            Object {
+              "color": "#ffffff",
+              "lineHeight": 24,
+              "textAlign": "center",
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="styled-fab-icon"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+  </View>
   <Text
     allowFontScaling={false}
     style={

package/src/components/Icon/HeroIcon/glyphMap.json

@@ -1 +1 @@
-{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bolt":59011,"bookmark-added":59012,"bookmark":59013,"box-check":59014,"box":59015,"bpay":59016,"buildings":59017,"cake":59018,"calendar-clock":59019,"calendar":59020,"candy-box-menu":59021,"caret-down-small":59022,"caret-down":59023,"caret-left-small":59024,"caret-left":59025,"caret-right-small":59026,"caret-right":59027,"caret-up-small":59028,"caret-up":59029,"check-radio":59030,"circle-add":59031,"circle-cancel":59032,"circle-check":59033,"circle-down":59034,"circle-info":59035,"circle-left":59036,"circle-ok":59037,"circle-pencil":59038,"circle-question":59039,"circle-remove":59040,"circle-right":59041,"circle-up":59042,"circle-warning":59043,"clock-3":59044,"clock":59045,"cloud-download":59046,"cloud-upload":59047,"cog":59048,"coin":59049,"contacts":59050,"credit-card":59051,"diamond":59052,"direction-arrows":59053,"directory":59054,"document":59055,"dollar-coin-shine":59056,"double-buildings":59057,"edit-template":59058,"envelope":59059,"exclude":59060,"expense":59061,"eye-circle":59062,"eye-invisible":59063,"eye":59064,"face-meh":59065,"face-sad":59066,"face-smiley":59067,"feed":59068,"feedbacks":59069,"file-certified":59070,"file-clone":59071,"file-copy":59072,"file-csv":59073,"file-dispose":59074,"file-doc":59075,"file-excel":59076,"file-export":59077,"file-lock":59078,"file-pdf":59079,"file-powerpoint":59080,"file-search":59081,"file-secured":59082,"file-sheets":59083,"file-slide":59084,"file-verified":59085,"file-word":59086,"file":59087,"filter":59088,"folder-user":59089,"folder":59090,"format-bold":59091,"format-heading1":59092,"format-heading2":59093,"format-italic":59094,"format-list-bulleted":59095,"format-list-numbered":59096,"format-underlined":59097,"funnel-filter":59098,"global-dollar":59099,"globe":59100,"graduation-cap":59101,"graph":59102,"happy-sun":59103,"health-bag":59104,"heart":59105,"home":59106,"image":59107,"import":59108,"incident-siren":59109,"instapay":59110,"list":59111,"loading-2":59112,"loading":59113,"location":59114,"lock":59115,"looks-one":59116,"looks-two":59117,"media-content":59118,"menu":59119,"money-notes":59120,"moneybag":59121,"moon":59122,"multiple-stars":59123,"multiple-users":59124,"node":59125,"open-folder":59126,"paperclip":59127,"payment-summary":59128,"pencil":59129,"phone":59130,"piggy-bank":59131,"plane-up":59132,"plane":59133,"play-circle":59134,"print":59135,"raising-hands":59136,"reply-arrow":59137,"reply":59138,"reschedule":59139,"rostering":59140,"save":59141,"schedule-send":59142,"schedule":59143,"search-person":59144,"send":59145,"speaker-active":59146,"speaker":59147,"star-award":59148,"star-badge":59149,"star-circle":59150,"star-medal":59151,"star":59152,"steps-circle":59153,"stopwatch":59154,"suitcase":59155,"surfing":59156,"survey":59157,"swag-pillar-benefit":59158,"swag-pillar-career":59159,"swag-pillar-money":59160,"swag-pillar-work":59161,"swag":59162,"switch":59163,"tag":59164,"target":59165,"teams":59166,"timesheet":59167,"touch-id":59168,"trash-bin":59169,"unlock":59170,"user":59171,"video-1":59172,"video-2":59173,"wallet":59174,"warning":59175,"activate-outlined":59176,"add-credit-card-outlined":59177,"add-person-outlined":59178,"add-section-outlined":59179,"add-time-outlined":59180,"add":59181,"adjustment-outlined":59182,"alignment-2-outlined":59183,"alignment-outlined":59184,"all-caps":59185,"arrow-down":59186,"arrow-downwards":59187,"arrow-left":59188,"arrow-leftwards":59189,"arrow-right":59190,"arrow-rightwards":59191,"arrow-up":59192,"arrow-upwards":59193,"article-outlined":59194,"at-sign":59195,"auto-graph-outlined":59196,"beer-outlined":59197,"bell-active-outlined":59198,"bell-outlined":59199,"bell-slash-outlined":59200,"billing-outlined":59201,"body-outlined":59202,"bold":59203,"book-outlined":59204,"bookmark-added-outlined":59205,"bookmark-outlined":59206,"box-check-outlined":59207,"box-outlined":59208,"bullet-points":59209,"cake-outlined":59210,"calendar-dates-outlined":59211,"calendar-star-outlined":59212,"call-split-outlined":59213,"camera-outlined":59214,"cancel":59215,"car-forward-outlined":59216,"charging-station-outlined":59217,"chat-bubble-outlined":59218,"chat-unread-outlined":59219,"checkmark":59220,"circle-add-outlined":59221,"circle-cancel-outlined":59222,"circle-down-outlined":59223,"circle-info-outlined":59224,"circle-left-outlined":59225,"circle-ok-outlined":59226,"circle-question-outlined":59227,"circle-remove-outlined":59228,"circle-right-outlined":59229,"circle-up-outlined":59230,"circle-warning-outlined":59231,"clock-2-outlined":59232,"clock-outlined":59233,"cog-outlined":59234,"coin-outlined":59235,"coin-super-outlined":59236,"comment-outlined":59237,"contacts-outlined":59238,"contacts-user-outlined":59239,"credit-card-outlined":59240,"cup-outlined":59241,"dentistry-outlined":59242,"direction-arrows-outlined":59243,"directory-outlined":59244,"document-outlined":59245,"dollar-box-outlined":59246,"dollar-card-outlined":59247,"dollar-coin-shine-outlined":59248,"dollar-credit-card-outlined":59249,"dollar-sign":59250,"double-buildings-outlined":59251,"double-left-arrows":59252,"double-right-arrows":59253,"download-outlined":59254,"edit-template-outlined":59255,"email-outlined":59256,"enter-arrow":59257,"envelope-outlined":59258,"expense-outlined":59259,"explore-outlined":59260,"external-link":59261,"eye-invisible-outlined":59262,"eye-outlined":59263,"face-id":59264,"face-meh-outlined":59265,"face-open-smiley-outlined":59266,"face-sad-outlined":59267,"face-smiley-outlined":59268,"fastfood-outlined":59269,"feed-outlined":59270,"file-certified-outlined":59271,"file-clone-outlined":59272,"file-copy-outlined":59273,"file-dispose-outlined":59274,"file-dollar-certified-outlined":59275,"file-dollar-outlined":59276,"file-download-outlined":59277,"file-export-outlined":59278,"file-lock-outlined":59279,"file-outlined":59280,"file-search-outlined":59281,"file-secured-outlined":59282,"file-statutory-outlined":59283,"file-verified-outlined":59284,"filter-outlined":59285,"folder-outlined":59286,"folder-user-outlined":59287,"form-outlined":59288,"funnel-filter-outline":59289,"graph-outlined":59290,"hand-holding-user-outlined":59291,"happy-sun-outlined":59292,"health-bag-outlined":59293,"heart-outlined":59294,"home-active-outlined":59295,"home-outlined":59296,"id-card-outlined":59297,"image-outlined":59298,"import-outlined":59299,"instapay-outlined":59300,"italic":59301,"link-1":59302,"link-2":59303,"list-outlined":59304,"live-help-outlined":59305,"location-on-outlined":59306,"location-outlined":59307,"lock-outlined":59308,"locked-file-outlined":59309,"log-out":59310,"media-content-outlined":59311,"menu-close":59312,"menu-expand":59313,"menu-fold-outlined":59314,"menu-unfold-outlined":59315,"moneybag-outlined":59316,"moon-outlined":59317,"more-horizontal":59318,"more-vertical":59319,"multiple-folders-outlined":59320,"multiple-users-outlined":59321,"near-me-outlined":59322,"node-outlined":59323,"number-points":59324,"number":59325,"overview-outlined":59326,"payment-summary-outlined":59327,"payslip-outlined":59328,"pencil-outlined":59329,"percentage":59330,"phone-outlined":59331,"piggy-bank-outlined":59332,"plane-outlined":59333,"play-circle-outlined":59334,"print-outlined":59335,"qr-code-outlined":59336,"qualification-outlined":59337,"re-assign":59338,"redeem":59339,"refresh":59340,"remove":59341,"reply-outlined":59342,"restart":59343,"return-arrow":59344,"rostering-outlined":59345,"save-outlined":59346,"schedule-outlined":59347,"search-outlined":59348,"search-secured-outlined":59349,"send-outlined":59350,"share-1":59351,"share-2":59352,"share-outlined":59353,"show-chart-outlined":59354,"single-down-arrow":59355,"single-left-arrow":59356,"single-right-arrow":59357,"single-up-arrow":59358,"speaker-active-outlined":59359,"speaker-outlined":59360,"star-circle-outlined":59361,"star-outlined":59362,"stopwatch-outlined":59363,"strikethrough":59364,"styler-outlined":59365,"suitcase-clock-outlined":59366,"suitcase-outlined":59367,"survey-outlined":59368,"switch-outlined":59369,"sync":59370,"tag-outlined":59371,"target-outlined":59372,"tennis-outlined":59373,"ticket-outlined":59374,"timesheet-outlined":59375,"today-outlined":59376,"transfer":59377,"trash-bin-outlined":59378,"umbrela-outlined":59379,"unavailable":59380,"underline":59381,"union-outlined":59382,"unlock-outlined":59383,"upload-outlined":59384,"user-circle-outlined":59385,"user-gear-outlined":59386,"user-outlined":59387,"user-rectangle-outlined":59388,"video-1-outlined":59389,"video-2-outlined":59390,"volunteer-outlined":59391,"wallet-outlined":59392}
+{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bolt":59011,"bookmark-added":59012,"bookmark":59013,"box-check":59014,"box":59015,"bpay":59016,"buildings":59017,"cake":59018,"calendar-clock":59019,"calendar":59020,"candy-box-menu":59021,"caret-down-small":59022,"caret-down":59023,"caret-left-small":59024,"caret-left":59025,"caret-right-small":59026,"caret-right":59027,"caret-up-small":59028,"caret-up":59029,"check-radio":59030,"circle-add":59031,"circle-cancel":59032,"circle-check":59033,"circle-down":59034,"circle-info":59035,"circle-left":59036,"circle-ok":59037,"circle-pencil":59038,"circle-question":59039,"circle-remove":59040,"circle-right":59041,"circle-up":59042,"circle-warning":59043,"clock-3":59044,"clock":59045,"cloud-download":59046,"cloud-upload":59047,"cog":59048,"coin":59049,"contacts":59050,"credit-card":59051,"diamond":59052,"direction-arrows":59053,"directory":59054,"document":59055,"dollar-coin-shine":59056,"double-buildings":59057,"edit-template":59058,"envelope":59059,"exclude":59060,"expense":59061,"eye-circle":59062,"eye-invisible":59063,"eye":59064,"face-meh":59065,"face-sad":59066,"face-smiley":59067,"feed":59068,"feedbacks":59069,"file-certified":59070,"file-clone":59071,"file-copy":59072,"file-csv":59073,"file-dispose":59074,"file-doc":59075,"file-excel":59076,"file-export":59077,"file-lock":59078,"file-pdf":59079,"file-powerpoint":59080,"file-search":59081,"file-secured":59082,"file-sheets":59083,"file-slide":59084,"file-verified":59085,"file-word":59086,"file":59087,"filter":59088,"folder-user":59089,"folder":59090,"format-bold":59091,"format-heading1":59092,"format-heading2":59093,"format-italic":59094,"format-list-bulleted":59095,"format-list-numbered":59096,"format-underlined":59097,"funnel-filter":59098,"global-dollar":59099,"globe":59100,"graduation-cap":59101,"graph":59102,"happy-sun":59103,"health-bag":59104,"heart":59105,"home":59106,"image":59107,"import":59108,"incident-siren":59109,"instapay":59110,"list":59111,"loading-2":59112,"loading":59113,"location":59114,"lock":59115,"looks-one":59116,"looks-two":59117,"media-content":59118,"menu":59119,"money-notes":59120,"moneybag":59121,"moon":59122,"multiple-stars":59123,"multiple-users":59124,"node":59125,"open-folder":59126,"paperclip":59127,"payment-summary":59128,"pencil":59129,"phone":59130,"piggy-bank":59131,"plane-up":59132,"plane":59133,"play-circle":59134,"print":59135,"raising-hands":59136,"reply-arrow":59137,"reply":59138,"reschedule":59139,"rostering":59140,"save":59141,"schedule-send":59142,"schedule":59143,"search-person":59144,"send":59145,"speaker-active":59146,"speaker":59147,"star-award":59148,"star-badge":59149,"star-circle":59150,"star-medal":59151,"star":59152,"steps-circle":59153,"stopwatch":59154,"suitcase":59155,"surfing":59156,"survey":59157,"swag-pillar-benefit":59158,"swag-pillar-career":59159,"swag-pillar-money":59160,"swag-pillar-work":59161,"swag":59162,"switch":59163,"tag":59164,"target":59165,"teams":59166,"timesheet":59167,"touch-id":59168,"trash-bin":59169,"unlock":59170,"user":59171,"video-1":59172,"video-2":59173,"wallet":59174,"warning":59175,"activate-outlined":59176,"add-credit-card-outlined":59177,"add-person-outlined":59178,"add-section-outlined":59179,"add-time-outlined":59180,"add":59181,"adjustment-outlined":59182,"alignment-2-outlined":59183,"alignment-outlined":59184,"all-caps":59185,"arrow-down":59186,"arrow-downwards":59187,"arrow-left":59188,"arrow-leftwards":59189,"arrow-right":59190,"arrow-rightwards":59191,"arrow-up":59192,"arrow-upwards":59193,"article-outlined":59194,"at-sign":59195,"auto-graph-outlined":59196,"beer-outlined":59197,"bell-active-outlined":59198,"bell-outlined":59199,"bell-slash-outlined":59200,"billing-outlined":59201,"body-outlined":59202,"bold":59203,"book-outlined":59204,"bookmark-added-outlined":59205,"bookmark-outlined":59206,"box-check-outlined":59207,"box-outlined":59208,"bullet-points":59209,"cake-outlined":59210,"calendar-dates-outlined":59211,"calendar-star-outlined":59212,"call-split-outlined":59213,"camera-outlined":59214,"cancel":59215,"car-forward-outlined":59216,"charging-station-outlined":59217,"chat-bubble-outlined":59218,"chat-unread-outlined":59219,"checkmark":59220,"circle-add-outlined":59221,"circle-cancel-outlined":59222,"circle-down-outlined":59223,"circle-info-outlined":59224,"circle-left-outlined":59225,"circle-ok-outlined":59226,"circle-question-outlined":59227,"circle-remove-outlined":59228,"circle-right-outlined":59229,"circle-up-outlined":59230,"circle-warning-outlined":59231,"clock-2-outlined":59232,"clock-outlined":59233,"cog-outlined":59234,"coin-outlined":59235,"coin-super-outlined":59236,"comment-outlined":59237,"contacts-outlined":59238,"contacts-user-outlined":59239,"credit-card-outlined":59240,"cup-outlined":59241,"dentistry-outlined":59242,"direction-arrows-outlined":59243,"directory-outlined":59244,"document-outlined":59245,"dollar-box-outlined":59246,"dollar-card-outlined":59247,"dollar-coin-shine-outlined":59248,"dollar-credit-card-outlined":59249,"dollar-sign":59250,"double-buildings-outlined":59251,"double-left-arrows":59252,"double-right-arrows":59253,"download-box-outlined":59254,"download-outlined":59255,"edit-template-outlined":59256,"email-outlined":59257,"enter-arrow":59258,"envelope-outlined":59259,"expense-outlined":59260,"explore-outlined":59261,"external-link":59262,"eye-invisible-outlined":59263,"eye-outlined":59264,"face-id":59265,"face-meh-outlined":59266,"face-open-smiley-outlined":59267,"face-sad-outlined":59268,"face-smiley-outlined":59269,"fastfood-outlined":59270,"feed-outlined":59271,"file-certified-outlined":59272,"file-clone-outlined":59273,"file-copy-outlined":59274,"file-dispose-outlined":59275,"file-dollar-certified-outlined":59276,"file-dollar-outlined":59277,"file-download-outlined":59278,"file-export-outlined":59279,"file-lock-outlined":59280,"file-outlined":59281,"file-search-outlined":59282,"file-secured-outlined":59283,"file-statutory-outlined":59284,"file-verified-outlined":59285,"filter-outlined":59286,"folder-outlined":59287,"folder-user-outlined":59288,"form-outlined":59289,"funnel-filter-outline":59290,"graph-outlined":59291,"hand-holding-user-outlined":59292,"happy-sun-outlined":59293,"health-bag-outlined":59294,"heart-outlined":59295,"home-active-outlined":59296,"home-outlined":59297,"id-card-outlined":59298,"image-outlined":59299,"import-outlined":59300,"instapay-outlined":59301,"italic":59302,"link-1":59303,"link-2":59304,"list-outlined":59305,"live-help-outlined":59306,"location-on-outlined":59307,"location-outlined":59308,"lock-outlined":59309,"locked-file-outlined":59310,"log-out":59311,"media-content-outlined":59312,"menu-close":59313,"menu-expand":59314,"menu-fold-outlined":59315,"menu-unfold-outlined":59316,"moneybag-outlined":59317,"moon-outlined":59318,"more-horizontal":59319,"more-vertical":59320,"multiple-folders-outlined":59321,"multiple-users-outlined":59322,"near-me-outlined":59323,"node-outlined":59324,"number-points":59325,"number":59326,"overview-outlined":59327,"payment-summary-outlined":59328,"payslip-outlined":59329,"pencil-outlined":59330,"percentage":59331,"phone-outlined":59332,"piggy-bank-outlined":59333,"plane-outlined":59334,"play-circle-outlined":59335,"print-outlined":59336,"qr-code-outlined":59337,"qualification-outlined":59338,"re-assign":59339,"redeem":59340,"refresh":59341,"remove":59342,"reply-outlined":59343,"restart":59344,"return-arrow":59345,"rostering-outlined":59346,"save-outlined":59347,"schedule-outlined":59348,"search-outlined":59349,"search-secured-outlined":59350,"send-outlined":59351,"share-1":59352,"share-2":59353,"share-outlined":59354,"show-chart-outlined":59355,"single-down-arrow":59356,"single-left-arrow":59357,"single-right-arrow":59358,"single-up-arrow":59359,"speaker-active-outlined":59360,"speaker-outlined":59361,"star-circle-outlined":59362,"star-outlined":59363,"stopwatch-outlined":59364,"strikethrough":59365,"styler-outlined":59366,"suitcase-clock-outlined":59367,"suitcase-outlined":59368,"survey-outlined":59369,"switch-outlined":59370,"sync":59371,"tag-outlined":59372,"target-outlined":59373,"tennis-outlined":59374,"ticket-outlined":59375,"timesheet-outlined":59376,"today-outlined":59377,"transfer":59378,"trash-bin-outlined":59379,"umbrela-outlined":59380,"unavailable":59381,"underline":59382,"union-outlined":59383,"unlock-outlined":59384,"upload-outlined":59385,"user-circle-outlined":59386,"user-gear-outlined":59387,"user-outlined":59388,"user-rectangle-outlined":59389,"video-1-outlined":59390,"video-2-outlined":59391,"volunteer-outlined":59392,"wallet-outlined":59393}

package/src/components/Icon/IconList.ts

@@ -254,6 +254,7 @@ const IconList = [
   'double-buildings-outlined',
   'double-left-arrows',
   'double-right-arrows',
+  'download-box-outlined',
   'download-outlined',
   'edit-template-outlined',
   'email-outlined',

package/src/components/Switch/SelectorSwitch/Option.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
 import type { ReactElement } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, LayoutChangeEvent, Platform } from 'react-native';
 import type { BadgeConfigType, OptionType } from '.';
 import { useTheme } from '../../../theme';
-import { StyledIconWrapper, StyledTextWrapper } from './StyledSelectorSwitch';
-import Typography from '../../Typography';
 import Badge from '../../Badge';
 import Icon from '../../Icon';
+import Typography from '../../Typography';
+import { StyledIconWrapper, StyledTextWrapper } from './StyledSelectorSwitch';
 
 export const OptionContent = ({
   content,
@@ -39,12 +40,34 @@ const Option = <T,>({
   icon,
   badge,
   selected,
+  onLayout,
+  index = 0,
 }: Pick<OptionType<T>, 'text' | 'icon' | 'badge'> & {
   selected: boolean;
+  onLayout?: (e: LayoutChangeEvent) => void;
+  index?: number;
 }): ReactElement => {
+  const animatedValue = useRef(new Animated.Value(1)).current;
+  const translateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: index === 1 ? [-5, 0] : [5, 0],
+  });
+
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: selected ? 1 : 0,
+      duration: 200,
+      easing: Easing.linear,
+      useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
+    }).start();
+  }, [selected]);
+
   if (selected) {
     return (
-      <StyledTextWrapper>
+      <StyledTextWrapper
+        style={{ transform: [{ translateX }] }}
+        onLayout={onLayout}
+      >
         <OptionContent
           content={<Typography.Text fontSize="large">{text}</Typography.Text>}
           badge={badge}
@@ -54,7 +77,10 @@ const Option = <T,>({
   }
 
   return (
-    <StyledIconWrapper>
+    <StyledIconWrapper
+      style={{ transform: [{ translateX }] }}
+      onLayout={onLayout}
+    >
       <OptionContent content={<Icon icon={icon} />} badge={badge} />
     </StyledIconWrapper>
   );

package/src/components/Switch/SelectorSwitch/StyledSelectorSwitch.tsx

@@ -1,5 +1,7 @@
 import styled from '@emotion/native';
-import { View } from 'react-native';
+import { View, Animated } from 'react-native';
+
+const AnimatedView = Animated.createAnimatedComponent(View);
 
 export const StyledWrapper = styled(View)(({ theme }) => ({
   flexDirection: 'row',
@@ -8,18 +10,30 @@ export const StyledWrapper = styled(View)(({ theme }) => ({
   borderRadius: theme.__hd__.switch.radii.selector.default,
   backgroundColor: theme.__hd__.switch.colors.selector.background,
   padding: theme.__hd__.switch.spaces.selector.wrapperPadding,
+  position: 'relative',
 }));
 
-export const StyledTextWrapper = styled(View)(({ theme }) => ({
+export const StyledTextWrapper = styled(AnimatedView)(({ theme }) => ({
   flex: 1,
   borderRadius: theme.__hd__.switch.radii.selector.default,
-  backgroundColor: theme.__hd__.switch.colors.selector.textBackground,
   justifyContent: 'center',
   alignItems: 'center',
+  zIndex: 1,
 }));
 
-export const StyledIconWrapper = styled(View)(({ theme }) => ({
+export const StyledIconWrapper = styled(AnimatedView)(({ theme }) => ({
   paddingHorizontal: theme.__hd__.switch.spaces.selector.iconPadding,
   justifyContent: 'center',
   alignItems: 'center',
+  zIndex: 1,
+}));
+
+export const StyledKnot = styled(AnimatedView)(({ theme }) => ({
+  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,
 }));

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -2,15 +2,19 @@
 
 exports[`Option renders correctly when not selected 1`] = `
 <View
+  collapsable={false}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "justifyContent": "center",
-        "paddingHorizontal": 16,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "justifyContent": "center",
+      "paddingHorizontal": 16,
+      "transform": Array [
+        Object {
+          "translateX": 0,
+        },
+      ],
+      "zIndex": 1,
+    }
   }
 >
   <View
@@ -62,17 +66,20 @@ exports[`Option renders correctly when not selected 1`] = `
 
 exports[`Option renders correctly when selected 1`] = `
 <View
+  collapsable={false}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "#ffffff",
-        "borderRadius": 999,
-        "flex": 1,
-        "justifyContent": "center",
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "borderRadius": 999,
+      "flex": 1,
+      "justifyContent": "center",
+      "transform": Array [
+        Object {
+          "translateX": 0,
+        },
+      ],
+      "zIndex": 1,
+    }
   }
 >
   <View