@hero-design/rn 8.25.3 → 8.26.1

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

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

@@ -5,6 +5,7 @@ exports[`SelectorSwitch renders correctly 1`] = `
   accessible={true}
   focusable={true}
   onClick={[Function]}
+  onLayout={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -19,6 +20,7 @@ exports[`SelectorSwitch renders correctly 1`] = `
         "flexDirection": "row",
         "height": 56,
         "padding": 4,
+        "position": "relative",
         "width": "100%",
       },
       undefined,
@@ -26,17 +28,21 @@ exports[`SelectorSwitch renders correctly 1`] = `
   }
 >
   <View
+    collapsable={false}
+    onLayout={[Function]}
     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,
+      }
     }
   >
     <Text
@@ -62,15 +68,20 @@ exports[`SelectorSwitch renders correctly 1`] = `
     </Text>
   </View>
   <View
+    collapsable={false}
+    onLayout={[Function]}
     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
@@ -118,5 +129,25 @@ exports[`SelectorSwitch renders correctly 1`] = `
       />
     </View>
   </View>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 999,
+        "bottom": 4,
+        "left": 4,
+        "position": "absolute",
+        "right": 4,
+        "top": 4,
+        "transform": Array [
+          Object {
+            "translateX": 0,
+          },
+        ],
+        "width": 0,
+      }
+    }
+  />
 </View>
 `;

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

@@ -1,9 +1,23 @@
-import React from 'react';
-import type { ReactElement } from 'react';
-import { StyleProp, TouchableWithoutFeedback, ViewStyle } from 'react-native';
-import { StyledWrapper } from './StyledSelectorSwitch';
+import React, {
+  ReactElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Animated,
+  Platform,
+  StyleProp,
+  TouchableWithoutFeedback,
+  ViewStyle,
+  Easing,
+  LayoutChangeEvent,
+} from 'react-native';
+import { useTheme } from '@emotion/react';
 import type { IconName } from '../../Icon';
 import Option from './Option';
+import { StyledKnot, StyledWrapper } from './StyledSelectorSwitch';
 
 type StatusBadgeType = {
   type: 'status';
@@ -46,18 +60,68 @@ const SelectorSwitch = <T,>({
   onPress,
   style,
   testID,
-}: SelectorSwitchProps<T>): ReactElement => (
-  <TouchableWithoutFeedback
-    onPress={onPress !== undefined ? () => onPress(value) : undefined}
-    testID={testID}
-  >
-    <StyledWrapper style={style}>
-      {options.map((opt, index) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <Option {...opt} selected={opt.value === value} key={index} />
-      ))}
-    </StyledWrapper>
-  </TouchableWithoutFeedback>
-);
+}: SelectorSwitchProps<T>): ReactElement => {
+  const theme = useTheme();
+  const [knotWidth, setKnotWidth] = useState(0);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  const translateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [
+      0,
+      Math.floor(containerWidth - knotWidth - theme.space.small),
+    ],
+  });
+
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: value === options[0].value ? 0 : 1,
+      duration: 200,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
+    }).start();
+  }, [value]);
+
+  const onContainerLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      setContainerWidth(e.nativeEvent.layout.width);
+    },
+    [options]
+  );
+
+  const onItemLayout = useCallback(
+    (e: LayoutChangeEvent, optionValue: T) => {
+      if (optionValue === value) {
+        setKnotWidth(e.nativeEvent.layout.width);
+      }
+    },
+    [value]
+  );
+
+  return (
+    <TouchableWithoutFeedback onPress={() => onPress?.(value)} testID={testID}>
+      <StyledWrapper onLayout={onContainerLayout} style={style}>
+        {options.map((opt, index) => (
+          <Option
+            {...opt}
+            selected={opt.value === value}
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            onLayout={(e) => onItemLayout(e, opt.value)}
+            index={index}
+          />
+        ))}
+
+        <StyledKnot
+          style={{
+            width: knotWidth,
+            transform: [{ translateX }],
+          }}
+        />
+      </StyledWrapper>
+    </TouchableWithoutFeedback>
+  );
+};
 
 export default SelectorSwitch;

package/src/components/Switch/index.tsx

@@ -65,6 +65,7 @@ const Switch = ({
     Animated.timing(animatedOffset, {
       toValue: offset,
       easing: Easing.inOut(Easing.cubic),
+      duration: 200,
       useNativeDriver: false,
     }).start();
   }, [checked]);

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -457,7 +457,7 @@ Object {
     },
     "fab": Object {
       "colors": Object {
-        "actionItemBackground": "#401960",
+        "actionItemBackground": "#795e90",
         "actionItemPressedBackground": "#664780",
         "actionItemText": "#ffffff",
         "backdropBackground": "#000000",
@@ -469,7 +469,7 @@ Object {
         "titleText": "#ffffff",
       },
       "fontSizes": Object {
-        "actionItemText": 14,
+        "actionItemText": 16,
         "header": 24,
         "title": 16,
       },
@@ -498,22 +498,21 @@ Object {
       },
       "sizes": Object {
         "height": 64,
+        "iconContainerHeight": 24,
+        "iconContainerWidth": 24,
         "width": 64,
       },
       "space": Object {
         "actionItemMargin": 8,
         "actionItemMarginRight": 24,
-        "actionItemPaddingBottom": 8,
-        "actionItemPaddingLeft": 16,
-        "actionItemPaddingRight": 16,
-        "actionItemPaddingTop": 8,
-        "actionItemTextPaddingLeft": 8,
+        "actionItemPadding": 12,
+        "actionItemTextPaddingLeft": 4,
         "buttonMarginRight": 24,
         "buttonMarginTop": 24,
-        "containerPaddingHorizontal": 16,
-        "containerPaddingVertical": 16,
+        "containerPadding": 20,
         "headerTextMarginBottom": 24,
         "headerTextMarginRight": 24,
+        "internalFABMarginBottom": 24,
         "titleMarginHorizontal": 8,
       },
     },

package/src/theme/components/fab.ts

@@ -6,7 +6,7 @@ const getFABTheme = (theme: GlobalTheme) => {
     buttonPressedBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
     headerText: theme.colors.onDefaultGlobalSurface,
-    actionItemBackground: theme.colors.primary,
+    actionItemBackground: theme.colors.secondary,
     actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
@@ -17,6 +17,8 @@ const getFABTheme = (theme: GlobalTheme) => {
   const sizes = {
     width: theme.sizes.xxxxxlarge,
     height: theme.sizes.xxxxxlarge,
+    iconContainerWidth: theme.sizes.large,
+    iconContainerHeight: theme.sizes.large,
   };
 
   const fonts = {
@@ -27,7 +29,7 @@ const getFABTheme = (theme: GlobalTheme) => {
 
   const fontSizes = {
     header: theme.fontSizes.xxxlarge,
-    actionItemText: theme.fontSizes.medium,
+    actionItemText: theme.fontSizes.large,
     title: theme.fontSizes.large,
   };
 
@@ -46,20 +48,17 @@ const getFABTheme = (theme: GlobalTheme) => {
   };
 
   const space = {
-    actionItemPaddingLeft: theme.space.medium,
-    actionItemPaddingRight: theme.space.medium,
-    actionItemPaddingTop: theme.space.small,
-    actionItemPaddingBottom: theme.space.small,
+    actionItemPadding: theme.space.smallMedium,
     actionItemMargin: theme.space.small,
     actionItemMarginRight: theme.space.large,
-    actionItemTextPaddingLeft: theme.space.small,
+    actionItemTextPaddingLeft: theme.space.xsmall,
     buttonMarginTop: theme.space.large,
     buttonMarginRight: theme.space.large,
     headerTextMarginRight: theme.space.large,
     headerTextMarginBottom: theme.space.large,
-    containerPaddingHorizontal: theme.space.medium,
-    containerPaddingVertical: theme.space.medium,
+    containerPadding: theme.space.large - theme.space.xsmall,
     titleMarginHorizontal: theme.space.small,
+    internalFABMarginBottom: theme.space.large,
   };
 
   const radii = {

package/types/components/FAB/ActionGroup/ActionItem.d.ts

@@ -7,6 +7,7 @@ export interface ActionItemProps {
     icon: ComponentProps<typeof Icon>['icon'];
     onPress?: () => void;
     style?: StyleProp<ViewStyle>;
+    key?: string;
 }
 declare const ActionItem: ({ icon, title, onPress, style, testID, }: ActionItemProps) => JSX.Element;
 export default ActionItem;

package/types/components/FAB/ActionGroup/StyledActionGroup.d.ts

@@ -28,4 +28,10 @@ declare const StyledHeaderText: import("@emotion/native").StyledComponent<TextPr
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledActionGroupContainer, StyledFAB, };
+declare const StyledModalView: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledActionGroupContainer, StyledFAB, StyledModalView, };

package/types/components/FAB/StyledFAB.d.ts

@@ -16,4 +16,8 @@ declare const StyledFABText: import("@emotion/native").StyledComponent<import(".
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & TextProps, {}, {}>;
-export { StyledFAB, StyledFABIcon, StyledFABText };
+declare const StyledIconContainer: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export { StyledFAB, StyledFABIcon, StyledFABText, StyledIconContainer };

package/types/components/Icon/IconList.d.ts

@@ -1,2 +1,2 @@
-declare const IconList: readonly ["activate", "add-emoji", "add-person", "adjustment", "alignment", "antenna", "archive", "assignment-warning", "bank", "bell", "billing", "bolt", "bookmark-added", "bookmark", "box-check", "box", "bpay", "buildings", "cake", "calendar-clock", "calendar", "candy-box-menu", "caret-down-small", "caret-down", "caret-left-small", "caret-left", "caret-right-small", "caret-right", "caret-up-small", "caret-up", "check-radio", "circle-add", "circle-cancel", "circle-check", "circle-down", "circle-info", "circle-left", "circle-ok", "circle-pencil", "circle-question", "circle-remove", "circle-right", "circle-up", "circle-warning", "clock-3", "clock", "cloud-download", "cloud-upload", "cog", "coin", "contacts", "credit-card", "diamond", "direction-arrows", "directory", "document", "dollar-coin-shine", "double-buildings", "edit-template", "envelope", "exclude", "expense", "eye-circle", "eye-invisible", "eye", "face-meh", "face-sad", "face-smiley", "feed", "feedbacks", "file-certified", "file-clone", "file-copy", "file-csv", "file-dispose", "file-doc", "file-excel", "file-export", "file-lock", "file-pdf", "file-powerpoint", "file-search", "file-secured", "file-sheets", "file-slide", "file-verified", "file-word", "file", "filter", "folder-user", "folder", "format-bold", "format-heading1", "format-heading2", "format-italic", "format-list-bulleted", "format-list-numbered", "format-underlined", "funnel-filter", "global-dollar", "globe", "graduation-cap", "graph", "happy-sun", "health-bag", "heart", "home", "image", "import", "incident-siren", "instapay", "list", "loading-2", "loading", "location", "lock", "looks-one", "looks-two", "media-content", "menu", "money-notes", "moneybag", "moon", "multiple-stars", "multiple-users", "node", "open-folder", "paperclip", "payment-summary", "pencil", "phone", "piggy-bank", "plane-up", "plane", "play-circle", "print", "raising-hands", "reply-arrow", "reply", "reschedule", "rostering", "save", "schedule-send", "schedule", "search-person", "send", "speaker-active", "speaker", "star-award", "star-badge", "star-circle", "star-medal", "star", "steps-circle", "stopwatch", "suitcase", "surfing", "survey", "swag-pillar-benefit", "swag-pillar-career", "swag-pillar-money", "swag-pillar-work", "swag", "switch", "tag", "target", "teams", "timesheet", "touch-id", "trash-bin", "unlock", "user", "video-1", "video-2", "wallet", "warning", "activate-outlined", "add-credit-card-outlined", "add-person-outlined", "add-section-outlined", "add-time-outlined", "add", "adjustment-outlined", "alignment-2-outlined", "alignment-outlined", "all-caps", "arrow-down", "arrow-downwards", "arrow-left", "arrow-leftwards", "arrow-right", "arrow-rightwards", "arrow-up", "arrow-upwards", "article-outlined", "at-sign", "auto-graph-outlined", "beer-outlined", "bell-active-outlined", "bell-outlined", "bell-slash-outlined", "billing-outlined", "body-outlined", "bold", "book-outlined", "bookmark-added-outlined", "bookmark-outlined", "box-check-outlined", "box-outlined", "bullet-points", "cake-outlined", "calendar-dates-outlined", "calendar-star-outlined", "call-split-outlined", "camera-outlined", "cancel", "car-forward-outlined", "charging-station-outlined", "chat-bubble-outlined", "chat-unread-outlined", "checkmark", "circle-add-outlined", "circle-cancel-outlined", "circle-down-outlined", "circle-info-outlined", "circle-left-outlined", "circle-ok-outlined", "circle-question-outlined", "circle-remove-outlined", "circle-right-outlined", "circle-up-outlined", "circle-warning-outlined", "clock-2-outlined", "clock-outlined", "cog-outlined", "coin-outlined", "coin-super-outlined", "comment-outlined", "contacts-outlined", "contacts-user-outlined", "credit-card-outlined", "cup-outlined", "dentistry-outlined", "direction-arrows-outlined", "directory-outlined", "document-outlined", "dollar-box-outlined", "dollar-card-outlined", "dollar-coin-shine-outlined", "dollar-credit-card-outlined", "dollar-sign", "double-buildings-outlined", "double-left-arrows", "double-right-arrows", "download-outlined", "edit-template-outlined", "email-outlined", "enter-arrow", "envelope-outlined", "expense-outlined", "explore-outlined", "external-link", "eye-invisible-outlined", "eye-outlined", "face-id", "face-meh-outlined", "face-open-smiley-outlined", "face-sad-outlined", "face-smiley-outlined", "fastfood-outlined", "feed-outlined", "file-certified-outlined", "file-clone-outlined", "file-copy-outlined", "file-dispose-outlined", "file-dollar-certified-outlined", "file-dollar-outlined", "file-download-outlined", "file-export-outlined", "file-lock-outlined", "file-outlined", "file-search-outlined", "file-secured-outlined", "file-statutory-outlined", "file-verified-outlined", "filter-outlined", "folder-outlined", "folder-user-outlined", "form-outlined", "funnel-filter-outline", "graph-outlined", "hand-holding-user-outlined", "happy-sun-outlined", "health-bag-outlined", "heart-outlined", "home-active-outlined", "home-outlined", "id-card-outlined", "image-outlined", "import-outlined", "instapay-outlined", "italic", "link-1", "link-2", "list-outlined", "live-help-outlined", "location-on-outlined", "location-outlined", "lock-outlined", "locked-file-outlined", "log-out", "media-content-outlined", "menu-close", "menu-expand", "menu-fold-outlined", "menu-unfold-outlined", "moneybag-outlined", "moon-outlined", "more-horizontal", "more-vertical", "multiple-folders-outlined", "multiple-users-outlined", "near-me-outlined", "node-outlined", "number-points", "number", "overview-outlined", "payment-summary-outlined", "payslip-outlined", "pencil-outlined", "percentage", "phone-outlined", "piggy-bank-outlined", "plane-outlined", "play-circle-outlined", "print-outlined", "qr-code-outlined", "qualification-outlined", "re-assign", "redeem", "refresh", "remove", "reply-outlined", "restart", "return-arrow", "rostering-outlined", "save-outlined", "schedule-outlined", "search-outlined", "search-secured-outlined", "send-outlined", "share-1", "share-2", "share-outlined", "show-chart-outlined", "single-down-arrow", "single-left-arrow", "single-right-arrow", "single-up-arrow", "speaker-active-outlined", "speaker-outlined", "star-circle-outlined", "star-outlined", "stopwatch-outlined", "strikethrough", "styler-outlined", "suitcase-clock-outlined", "suitcase-outlined", "survey-outlined", "switch-outlined", "sync", "tag-outlined", "target-outlined", "tennis-outlined", "ticket-outlined", "timesheet-outlined", "today-outlined", "transfer", "trash-bin-outlined", "umbrela-outlined", "unavailable", "underline", "union-outlined", "unlock-outlined", "upload-outlined", "user-circle-outlined", "user-gear-outlined", "user-outlined", "user-rectangle-outlined", "video-1-outlined", "video-2-outlined", "volunteer-outlined", "wallet-outlined"];
+declare const IconList: readonly ["activate", "add-emoji", "add-person", "adjustment", "alignment", "antenna", "archive", "assignment-warning", "bank", "bell", "billing", "bolt", "bookmark-added", "bookmark", "box-check", "box", "bpay", "buildings", "cake", "calendar-clock", "calendar", "candy-box-menu", "caret-down-small", "caret-down", "caret-left-small", "caret-left", "caret-right-small", "caret-right", "caret-up-small", "caret-up", "check-radio", "circle-add", "circle-cancel", "circle-check", "circle-down", "circle-info", "circle-left", "circle-ok", "circle-pencil", "circle-question", "circle-remove", "circle-right", "circle-up", "circle-warning", "clock-3", "clock", "cloud-download", "cloud-upload", "cog", "coin", "contacts", "credit-card", "diamond", "direction-arrows", "directory", "document", "dollar-coin-shine", "double-buildings", "edit-template", "envelope", "exclude", "expense", "eye-circle", "eye-invisible", "eye", "face-meh", "face-sad", "face-smiley", "feed", "feedbacks", "file-certified", "file-clone", "file-copy", "file-csv", "file-dispose", "file-doc", "file-excel", "file-export", "file-lock", "file-pdf", "file-powerpoint", "file-search", "file-secured", "file-sheets", "file-slide", "file-verified", "file-word", "file", "filter", "folder-user", "folder", "format-bold", "format-heading1", "format-heading2", "format-italic", "format-list-bulleted", "format-list-numbered", "format-underlined", "funnel-filter", "global-dollar", "globe", "graduation-cap", "graph", "happy-sun", "health-bag", "heart", "home", "image", "import", "incident-siren", "instapay", "list", "loading-2", "loading", "location", "lock", "looks-one", "looks-two", "media-content", "menu", "money-notes", "moneybag", "moon", "multiple-stars", "multiple-users", "node", "open-folder", "paperclip", "payment-summary", "pencil", "phone", "piggy-bank", "plane-up", "plane", "play-circle", "print", "raising-hands", "reply-arrow", "reply", "reschedule", "rostering", "save", "schedule-send", "schedule", "search-person", "send", "speaker-active", "speaker", "star-award", "star-badge", "star-circle", "star-medal", "star", "steps-circle", "stopwatch", "suitcase", "surfing", "survey", "swag-pillar-benefit", "swag-pillar-career", "swag-pillar-money", "swag-pillar-work", "swag", "switch", "tag", "target", "teams", "timesheet", "touch-id", "trash-bin", "unlock", "user", "video-1", "video-2", "wallet", "warning", "activate-outlined", "add-credit-card-outlined", "add-person-outlined", "add-section-outlined", "add-time-outlined", "add", "adjustment-outlined", "alignment-2-outlined", "alignment-outlined", "all-caps", "arrow-down", "arrow-downwards", "arrow-left", "arrow-leftwards", "arrow-right", "arrow-rightwards", "arrow-up", "arrow-upwards", "article-outlined", "at-sign", "auto-graph-outlined", "beer-outlined", "bell-active-outlined", "bell-outlined", "bell-slash-outlined", "billing-outlined", "body-outlined", "bold", "book-outlined", "bookmark-added-outlined", "bookmark-outlined", "box-check-outlined", "box-outlined", "bullet-points", "cake-outlined", "calendar-dates-outlined", "calendar-star-outlined", "call-split-outlined", "camera-outlined", "cancel", "car-forward-outlined", "charging-station-outlined", "chat-bubble-outlined", "chat-unread-outlined", "checkmark", "circle-add-outlined", "circle-cancel-outlined", "circle-down-outlined", "circle-info-outlined", "circle-left-outlined", "circle-ok-outlined", "circle-question-outlined", "circle-remove-outlined", "circle-right-outlined", "circle-up-outlined", "circle-warning-outlined", "clock-2-outlined", "clock-outlined", "cog-outlined", "coin-outlined", "coin-super-outlined", "comment-outlined", "contacts-outlined", "contacts-user-outlined", "credit-card-outlined", "cup-outlined", "dentistry-outlined", "direction-arrows-outlined", "directory-outlined", "document-outlined", "dollar-box-outlined", "dollar-card-outlined", "dollar-coin-shine-outlined", "dollar-credit-card-outlined", "dollar-sign", "double-buildings-outlined", "double-left-arrows", "double-right-arrows", "download-box-outlined", "download-outlined", "edit-template-outlined", "email-outlined", "enter-arrow", "envelope-outlined", "expense-outlined", "explore-outlined", "external-link", "eye-invisible-outlined", "eye-outlined", "face-id", "face-meh-outlined", "face-open-smiley-outlined", "face-sad-outlined", "face-smiley-outlined", "fastfood-outlined", "feed-outlined", "file-certified-outlined", "file-clone-outlined", "file-copy-outlined", "file-dispose-outlined", "file-dollar-certified-outlined", "file-dollar-outlined", "file-download-outlined", "file-export-outlined", "file-lock-outlined", "file-outlined", "file-search-outlined", "file-secured-outlined", "file-statutory-outlined", "file-verified-outlined", "filter-outlined", "folder-outlined", "folder-user-outlined", "form-outlined", "funnel-filter-outline", "graph-outlined", "hand-holding-user-outlined", "happy-sun-outlined", "health-bag-outlined", "heart-outlined", "home-active-outlined", "home-outlined", "id-card-outlined", "image-outlined", "import-outlined", "instapay-outlined", "italic", "link-1", "link-2", "list-outlined", "live-help-outlined", "location-on-outlined", "location-outlined", "lock-outlined", "locked-file-outlined", "log-out", "media-content-outlined", "menu-close", "menu-expand", "menu-fold-outlined", "menu-unfold-outlined", "moneybag-outlined", "moon-outlined", "more-horizontal", "more-vertical", "multiple-folders-outlined", "multiple-users-outlined", "near-me-outlined", "node-outlined", "number-points", "number", "overview-outlined", "payment-summary-outlined", "payslip-outlined", "pencil-outlined", "percentage", "phone-outlined", "piggy-bank-outlined", "plane-outlined", "play-circle-outlined", "print-outlined", "qr-code-outlined", "qualification-outlined", "re-assign", "redeem", "refresh", "remove", "reply-outlined", "restart", "return-arrow", "rostering-outlined", "save-outlined", "schedule-outlined", "search-outlined", "search-secured-outlined", "send-outlined", "share-1", "share-2", "share-outlined", "show-chart-outlined", "single-down-arrow", "single-left-arrow", "single-right-arrow", "single-up-arrow", "speaker-active-outlined", "speaker-outlined", "star-circle-outlined", "star-outlined", "stopwatch-outlined", "strikethrough", "styler-outlined", "suitcase-clock-outlined", "suitcase-outlined", "survey-outlined", "switch-outlined", "sync", "tag-outlined", "target-outlined", "tennis-outlined", "ticket-outlined", "timesheet-outlined", "today-outlined", "transfer", "trash-bin-outlined", "umbrela-outlined", "unavailable", "underline", "union-outlined", "unlock-outlined", "upload-outlined", "user-circle-outlined", "user-gear-outlined", "user-outlined", "user-rectangle-outlined", "video-1-outlined", "video-2-outlined", "volunteer-outlined", "wallet-outlined"];
 export default IconList;

package/types/components/Icon/index.d.ts

@@ -29,6 +29,6 @@ export interface IconProps extends AccessibilityProps {
 }
 declare const Icon: {
     ({ icon, style, size, intent, testID, spin, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityState, accessibilityValue, accessibilityLiveRegion, accessibilityElementsHidden, accessible, accessibilityIgnoresInvertColors, accessibilityViewIsModal, accessibilityActions, }: IconProps): JSX.Element;
-    List: readonly ["activate", "add-emoji", "add-person", "adjustment", "alignment", "antenna", "archive", "assignment-warning", "bank", "bell", "billing", "bolt", "bookmark-added", "bookmark", "box-check", "box", "bpay", "buildings", "cake", "calendar-clock", "calendar", "candy-box-menu", "caret-down-small", "caret-down", "caret-left-small", "caret-left", "caret-right-small", "caret-right", "caret-up-small", "caret-up", "check-radio", "circle-add", "circle-cancel", "circle-check", "circle-down", "circle-info", "circle-left", "circle-ok", "circle-pencil", "circle-question", "circle-remove", "circle-right", "circle-up", "circle-warning", "clock-3", "clock", "cloud-download", "cloud-upload", "cog", "coin", "contacts", "credit-card", "diamond", "direction-arrows", "directory", "document", "dollar-coin-shine", "double-buildings", "edit-template", "envelope", "exclude", "expense", "eye-circle", "eye-invisible", "eye", "face-meh", "face-sad", "face-smiley", "feed", "feedbacks", "file-certified", "file-clone", "file-copy", "file-csv", "file-dispose", "file-doc", "file-excel", "file-export", "file-lock", "file-pdf", "file-powerpoint", "file-search", "file-secured", "file-sheets", "file-slide", "file-verified", "file-word", "file", "filter", "folder-user", "folder", "format-bold", "format-heading1", "format-heading2", "format-italic", "format-list-bulleted", "format-list-numbered", "format-underlined", "funnel-filter", "global-dollar", "globe", "graduation-cap", "graph", "happy-sun", "health-bag", "heart", "home", "image", "import", "incident-siren", "instapay", "list", "loading-2", "loading", "location", "lock", "looks-one", "looks-two", "media-content", "menu", "money-notes", "moneybag", "moon", "multiple-stars", "multiple-users", "node", "open-folder", "paperclip", "payment-summary", "pencil", "phone", "piggy-bank", "plane-up", "plane", "play-circle", "print", "raising-hands", "reply-arrow", "reply", "reschedule", "rostering", "save", "schedule-send", "schedule", "search-person", "send", "speaker-active", "speaker", "star-award", "star-badge", "star-circle", "star-medal", "star", "steps-circle", "stopwatch", "suitcase", "surfing", "survey", "swag-pillar-benefit", "swag-pillar-career", "swag-pillar-money", "swag-pillar-work", "swag", "switch", "tag", "target", "teams", "timesheet", "touch-id", "trash-bin", "unlock", "user", "video-1", "video-2", "wallet", "warning", "activate-outlined", "add-credit-card-outlined", "add-person-outlined", "add-section-outlined", "add-time-outlined", "add", "adjustment-outlined", "alignment-2-outlined", "alignment-outlined", "all-caps", "arrow-down", "arrow-downwards", "arrow-left", "arrow-leftwards", "arrow-right", "arrow-rightwards", "arrow-up", "arrow-upwards", "article-outlined", "at-sign", "auto-graph-outlined", "beer-outlined", "bell-active-outlined", "bell-outlined", "bell-slash-outlined", "billing-outlined", "body-outlined", "bold", "book-outlined", "bookmark-added-outlined", "bookmark-outlined", "box-check-outlined", "box-outlined", "bullet-points", "cake-outlined", "calendar-dates-outlined", "calendar-star-outlined", "call-split-outlined", "camera-outlined", "cancel", "car-forward-outlined", "charging-station-outlined", "chat-bubble-outlined", "chat-unread-outlined", "checkmark", "circle-add-outlined", "circle-cancel-outlined", "circle-down-outlined", "circle-info-outlined", "circle-left-outlined", "circle-ok-outlined", "circle-question-outlined", "circle-remove-outlined", "circle-right-outlined", "circle-up-outlined", "circle-warning-outlined", "clock-2-outlined", "clock-outlined", "cog-outlined", "coin-outlined", "coin-super-outlined", "comment-outlined", "contacts-outlined", "contacts-user-outlined", "credit-card-outlined", "cup-outlined", "dentistry-outlined", "direction-arrows-outlined", "directory-outlined", "document-outlined", "dollar-box-outlined", "dollar-card-outlined", "dollar-coin-shine-outlined", "dollar-credit-card-outlined", "dollar-sign", "double-buildings-outlined", "double-left-arrows", "double-right-arrows", "download-outlined", "edit-template-outlined", "email-outlined", "enter-arrow", "envelope-outlined", "expense-outlined", "explore-outlined", "external-link", "eye-invisible-outlined", "eye-outlined", "face-id", "face-meh-outlined", "face-open-smiley-outlined", "face-sad-outlined", "face-smiley-outlined", "fastfood-outlined", "feed-outlined", "file-certified-outlined", "file-clone-outlined", "file-copy-outlined", "file-dispose-outlined", "file-dollar-certified-outlined", "file-dollar-outlined", "file-download-outlined", "file-export-outlined", "file-lock-outlined", "file-outlined", "file-search-outlined", "file-secured-outlined", "file-statutory-outlined", "file-verified-outlined", "filter-outlined", "folder-outlined", "folder-user-outlined", "form-outlined", "funnel-filter-outline", "graph-outlined", "hand-holding-user-outlined", "happy-sun-outlined", "health-bag-outlined", "heart-outlined", "home-active-outlined", "home-outlined", "id-card-outlined", "image-outlined", "import-outlined", "instapay-outlined", "italic", "link-1", "link-2", "list-outlined", "live-help-outlined", "location-on-outlined", "location-outlined", "lock-outlined", "locked-file-outlined", "log-out", "media-content-outlined", "menu-close", "menu-expand", "menu-fold-outlined", "menu-unfold-outlined", "moneybag-outlined", "moon-outlined", "more-horizontal", "more-vertical", "multiple-folders-outlined", "multiple-users-outlined", "near-me-outlined", "node-outlined", "number-points", "number", "overview-outlined", "payment-summary-outlined", "payslip-outlined", "pencil-outlined", "percentage", "phone-outlined", "piggy-bank-outlined", "plane-outlined", "play-circle-outlined", "print-outlined", "qr-code-outlined", "qualification-outlined", "re-assign", "redeem", "refresh", "remove", "reply-outlined", "restart", "return-arrow", "rostering-outlined", "save-outlined", "schedule-outlined", "search-outlined", "search-secured-outlined", "send-outlined", "share-1", "share-2", "share-outlined", "show-chart-outlined", "single-down-arrow", "single-left-arrow", "single-right-arrow", "single-up-arrow", "speaker-active-outlined", "speaker-outlined", "star-circle-outlined", "star-outlined", "stopwatch-outlined", "strikethrough", "styler-outlined", "suitcase-clock-outlined", "suitcase-outlined", "survey-outlined", "switch-outlined", "sync", "tag-outlined", "target-outlined", "tennis-outlined", "ticket-outlined", "timesheet-outlined", "today-outlined", "transfer", "trash-bin-outlined", "umbrela-outlined", "unavailable", "underline", "union-outlined", "unlock-outlined", "upload-outlined", "user-circle-outlined", "user-gear-outlined", "user-outlined", "user-rectangle-outlined", "video-1-outlined", "video-2-outlined", "volunteer-outlined", "wallet-outlined"];
+    List: readonly ["activate", "add-emoji", "add-person", "adjustment", "alignment", "antenna", "archive", "assignment-warning", "bank", "bell", "billing", "bolt", "bookmark-added", "bookmark", "box-check", "box", "bpay", "buildings", "cake", "calendar-clock", "calendar", "candy-box-menu", "caret-down-small", "caret-down", "caret-left-small", "caret-left", "caret-right-small", "caret-right", "caret-up-small", "caret-up", "check-radio", "circle-add", "circle-cancel", "circle-check", "circle-down", "circle-info", "circle-left", "circle-ok", "circle-pencil", "circle-question", "circle-remove", "circle-right", "circle-up", "circle-warning", "clock-3", "clock", "cloud-download", "cloud-upload", "cog", "coin", "contacts", "credit-card", "diamond", "direction-arrows", "directory", "document", "dollar-coin-shine", "double-buildings", "edit-template", "envelope", "exclude", "expense", "eye-circle", "eye-invisible", "eye", "face-meh", "face-sad", "face-smiley", "feed", "feedbacks", "file-certified", "file-clone", "file-copy", "file-csv", "file-dispose", "file-doc", "file-excel", "file-export", "file-lock", "file-pdf", "file-powerpoint", "file-search", "file-secured", "file-sheets", "file-slide", "file-verified", "file-word", "file", "filter", "folder-user", "folder", "format-bold", "format-heading1", "format-heading2", "format-italic", "format-list-bulleted", "format-list-numbered", "format-underlined", "funnel-filter", "global-dollar", "globe", "graduation-cap", "graph", "happy-sun", "health-bag", "heart", "home", "image", "import", "incident-siren", "instapay", "list", "loading-2", "loading", "location", "lock", "looks-one", "looks-two", "media-content", "menu", "money-notes", "moneybag", "moon", "multiple-stars", "multiple-users", "node", "open-folder", "paperclip", "payment-summary", "pencil", "phone", "piggy-bank", "plane-up", "plane", "play-circle", "print", "raising-hands", "reply-arrow", "reply", "reschedule", "rostering", "save", "schedule-send", "schedule", "search-person", "send", "speaker-active", "speaker", "star-award", "star-badge", "star-circle", "star-medal", "star", "steps-circle", "stopwatch", "suitcase", "surfing", "survey", "swag-pillar-benefit", "swag-pillar-career", "swag-pillar-money", "swag-pillar-work", "swag", "switch", "tag", "target", "teams", "timesheet", "touch-id", "trash-bin", "unlock", "user", "video-1", "video-2", "wallet", "warning", "activate-outlined", "add-credit-card-outlined", "add-person-outlined", "add-section-outlined", "add-time-outlined", "add", "adjustment-outlined", "alignment-2-outlined", "alignment-outlined", "all-caps", "arrow-down", "arrow-downwards", "arrow-left", "arrow-leftwards", "arrow-right", "arrow-rightwards", "arrow-up", "arrow-upwards", "article-outlined", "at-sign", "auto-graph-outlined", "beer-outlined", "bell-active-outlined", "bell-outlined", "bell-slash-outlined", "billing-outlined", "body-outlined", "bold", "book-outlined", "bookmark-added-outlined", "bookmark-outlined", "box-check-outlined", "box-outlined", "bullet-points", "cake-outlined", "calendar-dates-outlined", "calendar-star-outlined", "call-split-outlined", "camera-outlined", "cancel", "car-forward-outlined", "charging-station-outlined", "chat-bubble-outlined", "chat-unread-outlined", "checkmark", "circle-add-outlined", "circle-cancel-outlined", "circle-down-outlined", "circle-info-outlined", "circle-left-outlined", "circle-ok-outlined", "circle-question-outlined", "circle-remove-outlined", "circle-right-outlined", "circle-up-outlined", "circle-warning-outlined", "clock-2-outlined", "clock-outlined", "cog-outlined", "coin-outlined", "coin-super-outlined", "comment-outlined", "contacts-outlined", "contacts-user-outlined", "credit-card-outlined", "cup-outlined", "dentistry-outlined", "direction-arrows-outlined", "directory-outlined", "document-outlined", "dollar-box-outlined", "dollar-card-outlined", "dollar-coin-shine-outlined", "dollar-credit-card-outlined", "dollar-sign", "double-buildings-outlined", "double-left-arrows", "double-right-arrows", "download-box-outlined", "download-outlined", "edit-template-outlined", "email-outlined", "enter-arrow", "envelope-outlined", "expense-outlined", "explore-outlined", "external-link", "eye-invisible-outlined", "eye-outlined", "face-id", "face-meh-outlined", "face-open-smiley-outlined", "face-sad-outlined", "face-smiley-outlined", "fastfood-outlined", "feed-outlined", "file-certified-outlined", "file-clone-outlined", "file-copy-outlined", "file-dispose-outlined", "file-dollar-certified-outlined", "file-dollar-outlined", "file-download-outlined", "file-export-outlined", "file-lock-outlined", "file-outlined", "file-search-outlined", "file-secured-outlined", "file-statutory-outlined", "file-verified-outlined", "filter-outlined", "folder-outlined", "folder-user-outlined", "form-outlined", "funnel-filter-outline", "graph-outlined", "hand-holding-user-outlined", "happy-sun-outlined", "health-bag-outlined", "heart-outlined", "home-active-outlined", "home-outlined", "id-card-outlined", "image-outlined", "import-outlined", "instapay-outlined", "italic", "link-1", "link-2", "list-outlined", "live-help-outlined", "location-on-outlined", "location-outlined", "lock-outlined", "locked-file-outlined", "log-out", "media-content-outlined", "menu-close", "menu-expand", "menu-fold-outlined", "menu-unfold-outlined", "moneybag-outlined", "moon-outlined", "more-horizontal", "more-vertical", "multiple-folders-outlined", "multiple-users-outlined", "near-me-outlined", "node-outlined", "number-points", "number", "overview-outlined", "payment-summary-outlined", "payslip-outlined", "pencil-outlined", "percentage", "phone-outlined", "piggy-bank-outlined", "plane-outlined", "play-circle-outlined", "print-outlined", "qr-code-outlined", "qualification-outlined", "re-assign", "redeem", "refresh", "remove", "reply-outlined", "restart", "return-arrow", "rostering-outlined", "save-outlined", "schedule-outlined", "search-outlined", "search-secured-outlined", "send-outlined", "share-1", "share-2", "share-outlined", "show-chart-outlined", "single-down-arrow", "single-left-arrow", "single-right-arrow", "single-up-arrow", "speaker-active-outlined", "speaker-outlined", "star-circle-outlined", "star-outlined", "stopwatch-outlined", "strikethrough", "styler-outlined", "suitcase-clock-outlined", "suitcase-outlined", "survey-outlined", "switch-outlined", "sync", "tag-outlined", "target-outlined", "tennis-outlined", "ticket-outlined", "timesheet-outlined", "today-outlined", "transfer", "trash-bin-outlined", "umbrela-outlined", "unavailable", "underline", "union-outlined", "unlock-outlined", "upload-outlined", "user-circle-outlined", "user-gear-outlined", "user-outlined", "user-rectangle-outlined", "video-1-outlined", "video-2-outlined", "volunteer-outlined", "wallet-outlined"];
 };
 export default Icon;