@hero-design/rn 7.16.0-alpha.0 → 7.16.0-alpha.3

package/src/components/Icon/IconList.ts

@@ -126,7 +126,6 @@ const IconList = [
   'print',
   'raising-hands',
   'reply',
-  'reply-arrow',
   'reschedule',
   'rostering',
   'save',

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

@@ -1,36 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Icon render correctly with spin prop 1`] = `
-<View
-  collapsable={false}
-  nativeID="animatedComponent"
-  style={
-    Object {
-      "transform": Array [
-        Object {
-          "rotate": "0deg",
-        },
-      ],
-    }
-  }
->
-  <HeroIcon
-    name="sync"
-    style={
-      Array [
-        Object {
-          "color": "#292a2b",
-          "fontSize": 24,
-        },
-        undefined,
-      ]
-    }
-    themeIntent="text"
-    themeSize="medium"
-  />
-</View>
-`;
-
 exports[`Icon renders correctly 1`] = `
 <HeroIcon
   name="home"

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

@@ -22,9 +22,4 @@ describe('Icon', () => {
 
     expect(toJSON()).toMatchSnapshot();
   });
-
-  it('render correctly with spin prop', () => {
-    const { toJSON } = renderWithTheme(<Icon icon="sync" spin />);
-    expect(toJSON()).toMatchSnapshot();
-  });
 });

package/src/components/Icon/index.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
 import HeroIcon from './HeroIcon';
-import AnimatedIcon from './AnimatedIcon';
 
 export type IconName = typeof IconList[number];
 
@@ -27,10 +26,6 @@ export interface IconProps {
    * Size of the Icon.
    */
   size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-  /**
-   * Rotate icon with animation.
-   */
-  spin?: boolean;
   /**
    * Additional style.
    */
@@ -47,24 +42,14 @@ const Icon = ({
   size = 'medium',
   intent = 'text',
   testID,
-  spin = false,
-}: IconProps) =>
-  spin ? (
-    <AnimatedIcon
-      name={icon}
-      themeIntent={intent}
-      themeSize={size}
-      style={style}
-      testID={testID}
-    />
-  ) : (
-    <HeroIcon
-      name={icon}
-      themeIntent={intent}
-      themeSize={size}
-      style={style}
-      testID={testID}
-    />
-  );
+}: IconProps) => (
+  <HeroIcon
+    name={icon}
+    themeIntent={intent}
+    themeSize={size}
+    style={style}
+    testID={testID}
+  />
+);
 
 export default Icon;

package/src/components/RichTextEditor/index.tsx

@@ -1,14 +1,8 @@
-import { ToolbarButtonName } from './constants';
-import Toolbar from './EditorToolbar';
+import RichTextEditor from './RichTextEditor';
 import MentionList from './MentionList';
-import RichTextEditor, {
-  RichTextEditorProps,
-  RichTextEditorRef,
-} from './RichTextEditor';
+import Toolbar from './EditorToolbar';
 
 export default Object.assign(RichTextEditor, {
   MentionList,
   Toolbar,
 });
-
-export { RichTextEditorProps, RichTextEditorRef, ToolbarButtonName };

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -241,9 +241,8 @@ Array [
           }
         }
       />
-      <RCTSafeAreaView
+      <View
         collapsable={false}
-        emulateUnlessSupported={true}
         nativeID="animatedComponent"
         onLayout={[Function]}
         style={
@@ -278,19 +277,22 @@ Array [
             Array [
               Object {
                 "flexDirection": "row",
-                "paddingHorizontal": 16,
-                "paddingVertical": 8,
+                "minHeight": 64,
               },
               undefined,
             ]
           }
         >
           <View
+            adjacentIcon={true}
             style={
               Array [
                 Object {
                   "flex": 1,
                   "justifyContent": "center",
+                  "paddingLeft": 24,
+                  "paddingRight": 0,
+                  "paddingVertical": 8,
                 },
                 undefined,
               ]
@@ -321,10 +323,8 @@ Array [
               Array [
                 Object {
                   "alignItems": "center",
-                  "height": 48,
                   "justifyContent": "center",
-                  "marginLeft": 12,
-                  "width": 48,
+                  "width": 72,
                 },
                 undefined,
               ]
@@ -355,13 +355,13 @@ Array [
                   Array [
                     Object {
                       "color": "#292a2b",
-                      "fontSize": 20,
+                      "fontSize": 24,
                     },
                     undefined,
                   ]
                 }
                 themeIntent="text"
-                themeSize="small"
+                themeSize="medium"
               />
             </View>
           </View>
@@ -901,7 +901,7 @@ Array [
                   "flexDirection": "row",
                   "justifyContent": "flex-end",
                   "minHeight": 64,
-                  "paddingHorizontal": 12,
+                  "paddingHorizontal": 24,
                   "paddingVertical": 8,
                 },
                 undefined,
@@ -953,7 +953,7 @@ Array [
             </View>
           </View>
         </View>
-      </RCTSafeAreaView>
+      </View>
     </View>
   </Modal>,
 ]
@@ -1197,8 +1197,7 @@ Array [
           }
         }
       />
-      <RCTSafeAreaView
-        emulateUnlessSupported={true}
+      <View
         onLayout={[Function]}
         style={
           Object {
@@ -1232,19 +1231,22 @@ Array [
             Array [
               Object {
                 "flexDirection": "row",
-                "paddingHorizontal": 16,
-                "paddingVertical": 8,
+                "minHeight": 64,
               },
               undefined,
             ]
           }
         >
           <View
+            adjacentIcon={true}
             style={
               Array [
                 Object {
                   "flex": 1,
                   "justifyContent": "center",
+                  "paddingLeft": 24,
+                  "paddingRight": 0,
+                  "paddingVertical": 8,
                 },
                 undefined,
               ]
@@ -1275,10 +1277,8 @@ Array [
               Array [
                 Object {
                   "alignItems": "center",
-                  "height": 48,
                   "justifyContent": "center",
-                  "marginLeft": 12,
-                  "width": 48,
+                  "width": 72,
                 },
                 undefined,
               ]
@@ -1307,13 +1307,13 @@ Array [
                   Array [
                     Object {
                       "color": "#292a2b",
-                      "fontSize": 20,
+                      "fontSize": 24,
                     },
                     undefined,
                   ]
                 }
                 themeIntent="text"
-                themeSize="small"
+                themeSize="medium"
               />
             </View>
           </View>
@@ -1853,7 +1853,7 @@ Array [
                   "flexDirection": "row",
                   "justifyContent": "flex-end",
                   "minHeight": 64,
-                  "paddingHorizontal": 12,
+                  "paddingHorizontal": 24,
                   "paddingVertical": 8,
                 },
                 undefined,
@@ -1903,7 +1903,7 @@ Array [
             </View>
           </View>
         </View>
-      </RCTSafeAreaView>
+      </View>
     </View>
   </Modal>,
 ]

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -241,9 +241,8 @@ Array [
           }
         }
       />
-      <RCTSafeAreaView
+      <View
         collapsable={false}
-        emulateUnlessSupported={true}
         nativeID="animatedComponent"
         onLayout={[Function]}
         style={
@@ -278,19 +277,22 @@ Array [
             Array [
               Object {
                 "flexDirection": "row",
-                "paddingHorizontal": 16,
-                "paddingVertical": 8,
+                "minHeight": 64,
               },
               undefined,
             ]
           }
         >
           <View
+            adjacentIcon={true}
             style={
               Array [
                 Object {
                   "flex": 1,
                   "justifyContent": "center",
+                  "paddingLeft": 24,
+                  "paddingRight": 0,
+                  "paddingVertical": 8,
                 },
                 undefined,
               ]
@@ -321,10 +323,8 @@ Array [
               Array [
                 Object {
                   "alignItems": "center",
-                  "height": 48,
                   "justifyContent": "center",
-                  "marginLeft": 12,
-                  "width": 48,
+                  "width": 72,
                 },
                 undefined,
               ]
@@ -355,13 +355,13 @@ Array [
                   Array [
                     Object {
                       "color": "#292a2b",
-                      "fontSize": 20,
+                      "fontSize": 24,
                     },
                     undefined,
                   ]
                 }
                 themeIntent="text"
-                themeSize="small"
+                themeSize="medium"
               />
             </View>
           </View>
@@ -852,7 +852,7 @@ Array [
             </View>
           </View>
         </RCTScrollView>
-      </RCTSafeAreaView>
+      </View>
     </View>
   </Modal>,
 ]
@@ -1096,8 +1096,7 @@ Array [
           }
         }
       />
-      <RCTSafeAreaView
-        emulateUnlessSupported={true}
+      <View
         onLayout={[Function]}
         style={
           Object {
@@ -1131,19 +1130,22 @@ Array [
             Array [
               Object {
                 "flexDirection": "row",
-                "paddingHorizontal": 16,
-                "paddingVertical": 8,
+                "minHeight": 64,
               },
               undefined,
             ]
           }
         >
           <View
+            adjacentIcon={true}
             style={
               Array [
                 Object {
                   "flex": 1,
                   "justifyContent": "center",
+                  "paddingLeft": 24,
+                  "paddingRight": 0,
+                  "paddingVertical": 8,
                 },
                 undefined,
               ]
@@ -1174,10 +1176,8 @@ Array [
               Array [
                 Object {
                   "alignItems": "center",
-                  "height": 48,
                   "justifyContent": "center",
-                  "marginLeft": 12,
-                  "width": 48,
+                  "width": 72,
                 },
                 undefined,
               ]
@@ -1206,13 +1206,13 @@ Array [
                   Array [
                     Object {
                       "color": "#292a2b",
-                      "fontSize": 20,
+                      "fontSize": 24,
                     },
                     undefined,
                   ]
                 }
                 themeIntent="text"
-                themeSize="small"
+                themeSize="medium"
               />
             </View>
           </View>
@@ -1703,7 +1703,7 @@ Array [
             </View>
           </View>
         </RCTScrollView>
-      </RCTSafeAreaView>
+      </View>
     </View>
   </Modal>,
 ]

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -276,9 +276,8 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 }
               }
             />
-            <RCTSafeAreaView
+            <View
               collapsable={false}
-              emulateUnlessSupported={true}
               nativeID="animatedComponent"
               onLayout={[Function]}
               style={
@@ -312,19 +311,22 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   Array [
                     Object {
                       "flexDirection": "row",
-                      "paddingHorizontal": 16,
-                      "paddingVertical": 8,
+                      "minHeight": 64,
                     },
                     undefined,
                   ]
                 }
               >
                 <View
+                  adjacentIcon={true}
                   style={
                     Array [
                       Object {
                         "flex": 1,
                         "justifyContent": "center",
+                        "paddingLeft": 24,
+                        "paddingRight": 0,
+                        "paddingVertical": 8,
                       },
                       undefined,
                     ]
@@ -355,10 +357,8 @@ exports[`TimePickerIOS renders correctly 1`] = `
                     Array [
                       Object {
                         "alignItems": "center",
-                        "height": 48,
                         "justifyContent": "center",
-                        "marginLeft": 12,
-                        "width": 48,
+                        "width": 72,
                       },
                       undefined,
                     ]
@@ -389,13 +389,13 @@ exports[`TimePickerIOS renders correctly 1`] = `
                         Array [
                           Object {
                             "color": "#292a2b",
-                            "fontSize": 20,
+                            "fontSize": 24,
                           },
                           undefined,
                         ]
                       }
                       themeIntent="text"
-                      themeSize="small"
+                      themeSize="medium"
                     />
                   </View>
                 </View>
@@ -456,7 +456,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                         "flexDirection": "row",
                         "justifyContent": "flex-end",
                         "minHeight": 64,
-                        "paddingHorizontal": 12,
+                        "paddingHorizontal": 24,
                         "paddingVertical": 8,
                       },
                       undefined,
@@ -503,7 +503,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   </View>
                 </View>
               </View>
-            </RCTSafeAreaView>
+            </View>
           </View>
         </View>
       </View>

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

@@ -135,15 +135,12 @@ Object {
         "radius": 4.65,
       },
       "sizes": Object {
-        "closeIcon": 48,
+        "closeIconWidth": 72,
         "sectionHeight": 64,
       },
       "space": Object {
-        "closeIconMargin": 12,
-        "footerHorizontalPadding": 12,
-        "footerVerticalPadding": 8,
-        "headerWrapperHorizontalPadding": 16,
-        "headerWrapperVerticalPadding": 8,
+        "horizontalPadding": 24,
+        "verticalPadding": 8,
       },
     },
     "button": Object {

package/src/theme/components/bottomSheet.ts

@@ -1,4 +1,3 @@
-import { scale } from '../../utils/scale';
 import { GlobalTheme } from '../global';
 
 const getBottomSheetTheme = (theme: GlobalTheme) => {
@@ -9,16 +8,13 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    sectionHeight: scale(64),
-    closeIcon: scale(48),
+    sectionHeight: 64,
+    closeIconWidth: 72,
   };
 
   const space = {
-    headerWrapperVerticalPadding: theme.space.small,
-    headerWrapperHorizontalPadding: theme.space.medium,
-    closeIconMargin: theme.space.smallMedium,
-    footerVerticalPadding: theme.space.small,
-    footerHorizontalPadding: theme.space.smallMedium,
+    horizontalPadding: theme.space.large,
+    verticalPadding: theme.space.small,
   };
 
   const shadows = {

package/src/types.ts

@@ -3,23 +3,15 @@ import { IconName } from './components/Icon';
 import { SingleSelectProps, MultiSelectProps } from './components/Select';
 import { TabType } from './components/Tabs';
 import { TextInputProps } from './components/TextInput';
-import {
-  RichTextEditorRef,
-  RichTextEditorProps,
-  ToolbarButtonName,
-} from './components/RichTextEditor';
 
 import { Theme } from './theme';
 
 export type {
   BottomNavigationTabType,
   IconName,
-  MultiSelectProps,
-  RichTextEditorProps,
-  RichTextEditorRef,
   SingleSelectProps,
+  MultiSelectProps,
   TabType,
-  TextInputProps,
   Theme,
-  ToolbarButtonName,
+  TextInputProps,
 };

package/types/components/BottomSheet/StyledBottomSheet.d.ts

@@ -1,11 +1,11 @@
-import { Animated, View, ViewProps } from 'react-native';
+import { Animated, SafeAreaView, View, ViewProps } from 'react-native';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+declare const StyledBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<SafeAreaView>> & {
     children?: import("react").ReactNode;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -26,8 +26,6 @@ declare const StyledHeaderWrapper: import("@emotion/native").StyledComponent<Vie
 declare const StyledHeader: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & {
-    adjacentIcon: boolean;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;

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

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+import StyledHeroIcon from './HeroIcon';
+declare type AnimatedIconProps = ComponentProps<typeof StyledHeroIcon>;
+declare const AnimatedIcon: ({ style, ...otherProps }: AnimatedIconProps) => JSX.Element;
+export default AnimatedIcon;

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

@@ -1,2 +1,2 @@
-declare const IconList: readonly ["activate", "add-emoji", "add-person", "adjustment", "alignment", "archive", "bank", "bell", "billing", "bookmark", "box-check", "box", "buildings", "cake", "calendar-clock", "calendar", "candy-box-menu", "carat-down-small", "carat-down", "carat-left", "carat-right", "carat-up", "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", "clock-3", "cloud-download", "cloud-upload", "cog", "coin", "contacts", "credit-card", "diamond", "direction-arrows", "directory", "document", "dollar-coin-shine", "double-buildings", "edit-template", "envelope", "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-outlined", "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", "loading-2", "location", "lock", "looks-one", "looks-two", "mandatory", "media-content", "menu", "moneybag", "moon", "multiple-stars", "multiple-users", "node", "open-folder", "paperclip", "payment-summary", "pencil", "phone", "piggy-bank", "plane", "play-circle", "print", "raising-hands", "reply", "reschedule", "rostering", "save", "schedule-send", "schedule", "search-person", "send", "speaker", "star-award", "star-badge", "star-medal", "star", "steps-circle", "stopwatch", "suitcase", "survey", "swag", "switch", "tag", "target", "teams", "timesheet", "touch-id", "trash-bin", "unlock", "user", "video-1", "video-2", "activate-outlined", "add-person-outlined", "add-section-outlined", "add-time-outlined", "add", "adjustment-outlined", "alignment-2-outlined", "alignment-outlined", "all-caps", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "at-sign", "bell-outlined", "billing-outlined", "body-outlined", "bold", "bookmark-outlined", "box-check-outlined", "box-outlined", "bullet-points", "cake-outlined", "calendar-dates-outlined", "calendar-star-outlined", "camera-outlined", "cancel", "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", "comment-outlined", "contacts-outlined", "credit-card-outlined", "direction-arrows-outlined", "directory-outlined", "document-outlined", "dollar-coin-shine-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", "external-link", "eye-invisible-outlined", "eye-outlined", "face-id", "face-meh-outlined", "face-open-smiley-outlined", "face-sad-outlined", "face-smiley-outlined", "feed-outlined", "file-certified-outlined", "file-clone-outlined", "file-copy-outlined", "file-dispose-outlined", "file-download-outlined", "file-export-outlined", "file-lock-outlined", "file-outlined", "file-search-outlined", "file-secured-outlined", "file-verified-outlined", "folder-outlined", "folder-user-outlined", "funnel-filter-outline", "graph-outlined", "happy-sun-outlined", "health-bag-outlined", "heart-outlined", "home-outlined", "image-outlined", "import-outlined", "instapay-outlined", "italic", "link-1", "link-2", "list-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", "node-outlined", "number-points", "number", "payment-summary-outlined", "payslip-outlined", "pencil-outlined", "percentage", "phone-outlined", "piggy-bank-outlined", "plane-outlined", "play-circle-outlined", "print-outlined", "qr-code-outlined", "re-assign", "redeem", "refresh", "remove", "reply-outlined", "restart", "return-arrow", "rostering-outlined", "save-outlined", "schedule-outlined", "search-outlined", "send-outlined", "share-1", "share-2", "single-down-arrow", "single-left-arrow", "single-right-arrow", "single-up-arrow", "speaker-outlined", "star-outlined", "stopwatch-outlined", "strikethrough", "suitcase-outlined", "survey-outlined", "switch-outlined", "sync", "target-outlined", "timesheet-outlined", "transfer", "trash-bin-outlined", "unavailable", "underline", "unlock-outlined", "upload-outlined", "user-circle-outlined", "user-outlined", "user-rectangle-outlined", "video-1-outlined", "video-2-outlined", "wallet-outlined", "warning"];
+declare const IconList: readonly ["activate", "add-emoji", "add-person", "adjustment", "alignment", "archive", "bank", "bell", "billing", "bookmark", "box-check", "box", "buildings", "cake", "calendar-clock", "calendar", "candy-box-menu", "carat-down-small", "carat-down", "carat-left", "carat-right", "carat-up", "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", "clock-3", "cloud-download", "cloud-upload", "cog", "coin", "contacts", "credit-card", "diamond", "direction-arrows", "directory", "document", "dollar-coin-shine", "double-buildings", "edit-template", "envelope", "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-outlined", "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", "loading-2", "location", "lock", "looks-one", "looks-two", "mandatory", "media-content", "menu", "moneybag", "moon", "multiple-stars", "multiple-users", "node", "open-folder", "paperclip", "payment-summary", "pencil", "phone", "piggy-bank", "plane", "play-circle", "print", "raising-hands", "reply", "reply-arrow", "reschedule", "rostering", "save", "schedule-send", "schedule", "search-person", "send", "speaker", "star-award", "star-badge", "star-medal", "star", "steps-circle", "stopwatch", "suitcase", "survey", "swag", "switch", "tag", "target", "teams", "timesheet", "touch-id", "trash-bin", "unlock", "user", "video-1", "video-2", "activate-outlined", "add-person-outlined", "add-section-outlined", "add-time-outlined", "add", "adjustment-outlined", "alignment-2-outlined", "alignment-outlined", "all-caps", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "at-sign", "bell-outlined", "billing-outlined", "body-outlined", "bold", "bookmark-outlined", "box-check-outlined", "box-outlined", "bullet-points", "cake-outlined", "calendar-dates-outlined", "calendar-star-outlined", "camera-outlined", "cancel", "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", "comment-outlined", "contacts-outlined", "credit-card-outlined", "direction-arrows-outlined", "directory-outlined", "document-outlined", "dollar-coin-shine-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", "external-link", "eye-invisible-outlined", "eye-outlined", "face-id", "face-meh-outlined", "face-open-smiley-outlined", "face-sad-outlined", "face-smiley-outlined", "feed-outlined", "file-certified-outlined", "file-clone-outlined", "file-copy-outlined", "file-dispose-outlined", "file-download-outlined", "file-export-outlined", "file-lock-outlined", "file-outlined", "file-search-outlined", "file-secured-outlined", "file-verified-outlined", "folder-outlined", "folder-user-outlined", "funnel-filter-outline", "graph-outlined", "happy-sun-outlined", "health-bag-outlined", "heart-outlined", "home-outlined", "image-outlined", "import-outlined", "instapay-outlined", "italic", "link-1", "link-2", "list-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", "node-outlined", "number-points", "number", "payment-summary-outlined", "payslip-outlined", "pencil-outlined", "percentage", "phone-outlined", "piggy-bank-outlined", "plane-outlined", "play-circle-outlined", "print-outlined", "qr-code-outlined", "re-assign", "redeem", "refresh", "remove", "reply-outlined", "restart", "return-arrow", "rostering-outlined", "save-outlined", "schedule-outlined", "search-outlined", "send-outlined", "share-1", "share-2", "single-down-arrow", "single-left-arrow", "single-right-arrow", "single-up-arrow", "speaker-outlined", "star-outlined", "stopwatch-outlined", "strikethrough", "suitcase-outlined", "survey-outlined", "switch-outlined", "sync", "target-outlined", "timesheet-outlined", "transfer", "trash-bin-outlined", "unavailable", "underline", "unlock-outlined", "upload-outlined", "user-circle-outlined", "user-outlined", "user-rectangle-outlined", "video-1-outlined", "video-2-outlined", "wallet-outlined", "warning"];
 export default IconList;

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

@@ -14,6 +14,10 @@ export interface IconProps {
      * Size of the Icon.
      */
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Rotate icon with animation.
+     */
+    spin?: boolean;
     /**
      * Additional style.
      */
@@ -23,5 +27,5 @@ export interface IconProps {
      */
     testID?: string;
 }
-declare const Icon: ({ icon, style, size, intent, testID, }: IconProps) => JSX.Element;
+declare const Icon: ({ icon, style, size, intent, testID, spin, }: IconProps) => JSX.Element;
 export default Icon;