@hero-design/rn 8.27.0 → 8.27.2

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

@@ -10,7 +10,7 @@ describe('ActionGroup', () => {
     ${true}
     ${false}
   `('has active $active', ({ active }) => {
-    const { toJSON, queryByTestId, queryByText } = renderWithTheme(
+    const { toJSON, getByTestId, getByText } = renderWithTheme(
       <ActionGroup
         fabTitle="Shout out"
         active={active}
@@ -39,19 +39,25 @@ describe('ActionGroup', () => {
 
     expect(toJSON()).toMatchSnapshot();
 
-    expect(queryByText('What would you like to create?')).toBeDefined();
-    expect(queryByText('Shout out')).toBeDefined();
-    expect(queryByTestId('speaker-action-item')).toBeDefined();
-    expect(queryByTestId('target-action-item')).toBeDefined();
-    expect(queryByTestId('plane-action-item')).toBeDefined();
-    expect(queryByTestId('health-bag-action-item')).toBeDefined();
+    expect(getByText('What would you like to create?')).toBeDefined();
+    expect(getByText('Shout out')).toBeDefined();
+    expect(getByTestId('speaker-action-item')).toBeDefined();
+    expect(getByTestId('target-action-item')).toBeDefined();
+    expect(getByTestId('plane-action-item')).toBeDefined();
+    expect(getByTestId('health-bag-action-item')).toBeDefined();
 
     if (active) {
       // verify action group appears
-      expect(queryByTestId('action-group')).toHaveStyle({
+      expect(getByTestId('action-group')).toHaveStyle({
         transform: [{ translateX: 0 }],
       });
-      expect(queryByTestId('back-drop')).toHaveProp('pointerEvents', 'auto');
+      expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'auto');
+    } else {
+      // verify action group disappears
+      expect(getByTestId('action-group')).toHaveStyle({
+        transform: [{ translateX: 400 }],
+      });
+      expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'box-none');
     }
   });
 

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

@@ -1,18 +1,16 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, Platform, View } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { Animated, Easing, Modal, Platform, View } from 'react-native';
-import { useTheme } from '../../../theme';
-import type { IconName } from '../../Icon';
-import type { ActionItemProps } from './ActionItem';
 import ActionItem from './ActionItem';
 import {
-  StyledActionGroupContainer,
   StyledBackdrop,
   StyledContainer,
   StyledFAB,
   StyledHeaderText,
-  StyledModalView,
+  StyledActionGroupContainer,
 } from './StyledActionGroup';
+import type { IconName } from '../../Icon';
+import type { ActionItemProps } from './ActionItem';
 
 type ActionItemsContainerProps = {
   style?: StyleProp<ViewStyle>;
@@ -76,7 +74,6 @@ export interface ActionGroupProps {
 
   testID?: string;
 }
-
 const ActionGroup = ({
   headerTitle,
   onPress,
@@ -87,48 +84,18 @@ const ActionGroup = ({
   fabTitle,
   fabIcon = 'add',
 }: ActionGroupProps) => {
-  const theme = useTheme();
-  // Internal state to control the animation of the action group
-  const [visible, setVisibility] = useState(active);
   const tranlateXAnimation = useRef<Animated.Value>(
     new Animated.Value(active ? 1 : 0)
   );
-
-  useEffect(() => {
-    if (active && !visible) {
-      setVisibility(true);
-    }
-  }, [active]);
-
   useEffect(() => {
-    if (active) {
-      const animation = Animated.timing(tranlateXAnimation.current, {
-        toValue: 1,
-        useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
-        easing: Easing.inOut(Easing.cubic),
-      });
-
-      animation.start();
-    }
-  }, [active]);
-
-  //  Make sure the animation finishes running before closing the modal
-  const onInternalFABPress = useCallback(() => {
-    if (!onPress) {
-      return;
-    }
-
     const animation = Animated.timing(tranlateXAnimation.current, {
-      toValue: 0,
+      toValue: active ? 1 : 0,
       useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
       easing: Easing.inOut(Easing.cubic),
     });
 
-    animation.start(() => {
-      setVisibility(false);
-      onPress();
-    });
-  }, [visible]);
+    animation.start();
+  }, [active]);
 
   const interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate(
     {
@@ -150,63 +117,34 @@ const ActionGroup = ({
 
   return (
     <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
-      <Modal
-        visible={visible}
-        transparent
-        statusBarTranslucent
-        animationType="none"
+      <StyledBackdrop
+        pointerEvents={active ? 'auto' : 'box-none'}
+        testID="back-drop"
+        style={{ opacity: interpolatedBackdropOpacityAnimation }}
+      />
+      <StyledActionGroupContainer
+        pointerEvents={active ? 'auto' : 'none'}
+        testID="action-group"
+        style={{
+          opacity: interpolatedActionGroupOpacityAnimation,
+          transform: [{ translateX: interpolatedTranlateXAnimation }],
+        }}
       >
-        <StyledBackdrop
-          style={{
-            opacity: interpolatedBackdropOpacityAnimation,
-          }}
-          testID="back-drop"
-          pointerEvents={active ? 'auto' : 'box-none'}
-        />
-
-        <StyledModalView>
-          <StyledActionGroupContainer
-            pointerEvents={active ? 'auto' : 'none'}
-            testID="action-group"
-            style={{
-              opacity: interpolatedActionGroupOpacityAnimation,
-              transform: [{ translateX: interpolatedTranlateXAnimation }],
-            }}
-          >
-            {!!headerTitle && (
-              <StyledHeaderText testID="header-text">
-                {headerTitle}
-              </StyledHeaderText>
-            )}
-            <ActionItemsListComponent items={items} />
-          </StyledActionGroupContainer>
-
-          {active && (
-            <StyledFAB
-              testID="fab"
-              icon={fabIcon}
-              onPress={onInternalFABPress}
-              animated
-              active={active}
-              title={fabTitle}
-              style={{
-                marginBottom: theme.__hd__.fab.space.internalFABMarginBottom,
-              }}
-            />
-          )}
-        </StyledModalView>
-      </Modal>
-
-      {!active && (
-        <StyledFAB
-          testID="fab"
-          icon={fabIcon}
-          onPress={onPress}
-          animated
-          active={active}
-          title={fabTitle}
-        />
-      )}
+        {!!headerTitle && (
+          <StyledHeaderText testID="header-text">
+            {headerTitle}
+          </StyledHeaderText>
+        )}
+        <ActionItemsListComponent items={items} />
+      </StyledActionGroupContainer>
+      <StyledFAB
+        testID="fab"
+        icon={fabIcon}
+        onPress={onPress}
+        animated
+        active={active}
+        title={fabTitle}
+      />
     </StyledContainer>
   );
 };

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-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,"extension-outlined":59262,"external-link":59263,"eye-invisible-outlined":59264,"eye-outlined":59265,"face-id":59266,"face-meh-outlined":59267,"face-open-smiley-outlined":59268,"face-sad-outlined":59269,"face-smiley-outlined":59270,"fastfood-outlined":59271,"feed-outlined":59272,"file-certified-outlined":59273,"file-clone-outlined":59274,"file-copy-outlined":59275,"file-dispose-outlined":59276,"file-dollar-certified-outlined":59277,"file-dollar-outlined":59278,"file-download-outlined":59279,"file-export-outlined":59280,"file-lock-outlined":59281,"file-outlined":59282,"file-search-outlined":59283,"file-secured-outlined":59284,"file-statutory-outlined":59285,"file-verified-outlined":59286,"filter-outlined":59287,"folder-outlined":59288,"folder-user-outlined":59289,"form-outlined":59290,"funnel-filter-outline":59291,"graph-outlined":59292,"hand-holding-user-outlined":59293,"happy-sun-outlined":59294,"health-bag-outlined":59295,"heart-outlined":59296,"home-active-outlined":59297,"home-outlined":59298,"id-card-outlined":59299,"image-outlined":59300,"import-outlined":59301,"instapay-outlined":59302,"italic":59303,"link-1":59304,"link-2":59305,"list-outlined":59306,"live-help-outlined":59307,"location-on-outlined":59308,"location-outlined":59309,"lock-outlined":59310,"locked-file-outlined":59311,"log-out":59312,"media-content-outlined":59313,"menu-close":59314,"menu-expand":59315,"menu-fold-outlined":59316,"menu-unfold-outlined":59317,"moneybag-outlined":59318,"moon-outlined":59319,"more-horizontal":59320,"more-vertical":59321,"multiple-folders-outlined":59322,"multiple-users-outlined":59323,"near-me-outlined":59324,"node-outlined":59325,"number-points":59326,"number":59327,"overview-outlined":59328,"payment-summary-outlined":59329,"payslip-outlined":59330,"pencil-outlined":59331,"percentage":59332,"phone-outlined":59333,"piggy-bank-outlined":59334,"plane-outlined":59335,"play-circle-outlined":59336,"print-outlined":59337,"qr-code-outlined":59338,"qualification-outlined":59339,"re-assign":59340,"redeem":59341,"refresh":59342,"remove":59343,"reply-outlined":59344,"restart":59345,"return-arrow":59346,"rostering-outlined":59347,"save-outlined":59348,"schedule-outlined":59349,"search-outlined":59350,"search-secured-outlined":59351,"send-outlined":59352,"share-1":59353,"share-2":59354,"share-outlined":59355,"show-chart-outlined":59356,"single-down-arrow":59357,"single-left-arrow":59358,"single-right-arrow":59359,"single-up-arrow":59360,"speaker-active-outlined":59361,"speaker-outlined":59362,"star-circle-outlined":59363,"star-outlined":59364,"stopwatch-outlined":59365,"strikethrough":59366,"styler-outlined":59367,"suitcase-clock-outlined":59368,"suitcase-outlined":59369,"survey-outlined":59370,"switch-outlined":59371,"sync":59372,"tag-outlined":59373,"target-outlined":59374,"tennis-outlined":59375,"ticket-outlined":59376,"timesheet-outlined":59377,"today-outlined":59378,"transfer":59379,"trash-bin-outlined":59380,"umbrela-outlined":59381,"unavailable":59382,"underline":59383,"union-outlined":59384,"unlock-outlined":59385,"upload-outlined":59386,"user-circle-outlined":59387,"user-gear-outlined":59388,"user-outlined":59389,"user-rectangle-outlined":59390,"video-1-outlined":59391,"video-2-outlined":59392,"volunteer-outlined":59393,"wallet-outlined":59394}
+{"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,"ai-outlined":59183,"alignment-2-outlined":59184,"alignment-outlined":59185,"all-caps":59186,"arrow-down":59187,"arrow-downwards":59188,"arrow-left":59189,"arrow-leftwards":59190,"arrow-right":59191,"arrow-rightwards":59192,"arrow-up":59193,"arrow-upwards":59194,"article-outlined":59195,"at-sign":59196,"auto-graph-outlined":59197,"beer-outlined":59198,"bell-active-outlined":59199,"bell-outlined":59200,"bell-slash-outlined":59201,"billing-outlined":59202,"body-outlined":59203,"bold":59204,"book-outlined":59205,"bookmark-added-outlined":59206,"bookmark-outlined":59207,"box-check-outlined":59208,"box-outlined":59209,"bullet-points":59210,"cake-outlined":59211,"calendar-dates-outlined":59212,"calendar-star-outlined":59213,"call-split-outlined":59214,"camera-outlined":59215,"cancel":59216,"car-forward-outlined":59217,"charging-station-outlined":59218,"chat-bubble-outlined":59219,"chat-unread-outlined":59220,"checkmark":59221,"circle-add-outlined":59222,"circle-cancel-outlined":59223,"circle-down-outlined":59224,"circle-info-outlined":59225,"circle-left-outlined":59226,"circle-ok-outlined":59227,"circle-question-outlined":59228,"circle-remove-outlined":59229,"circle-right-outlined":59230,"circle-up-outlined":59231,"circle-warning-outlined":59232,"clock-2-outlined":59233,"clock-outlined":59234,"cog-outlined":59235,"coin-outlined":59236,"coin-super-outlined":59237,"comment-outlined":59238,"contacts-outlined":59239,"contacts-user-outlined":59240,"credit-card-outlined":59241,"cup-outlined":59242,"dentistry-outlined":59243,"direction-arrows-outlined":59244,"directory-outlined":59245,"document-outlined":59246,"dollar-box-outlined":59247,"dollar-card-outlined":59248,"dollar-coin-shine-outlined":59249,"dollar-credit-card-outlined":59250,"dollar-sign":59251,"double-buildings-outlined":59252,"double-left-arrows":59253,"double-right-arrows":59254,"download-box-outlined":59255,"download-outlined":59256,"edit-template-outlined":59257,"email-outlined":59258,"enter-arrow":59259,"envelope-outlined":59260,"expense-outlined":59261,"explore-outlined":59262,"extension-outlined":59263,"external-link":59264,"eye-invisible-outlined":59265,"eye-outlined":59266,"face-id":59267,"face-meh-outlined":59268,"face-open-smiley-outlined":59269,"face-sad-outlined":59270,"face-smiley-outlined":59271,"fastfood-outlined":59272,"feed-outlined":59273,"file-certified-outlined":59274,"file-clone-outlined":59275,"file-copy-outlined":59276,"file-dispose-outlined":59277,"file-dollar-certified-outlined":59278,"file-dollar-outlined":59279,"file-download-outlined":59280,"file-export-outlined":59281,"file-lock-outlined":59282,"file-outlined":59283,"file-search-outlined":59284,"file-secured-outlined":59285,"file-statutory-outlined":59286,"file-verified-outlined":59287,"filter-outlined":59288,"folder-outlined":59289,"folder-user-outlined":59290,"form-outlined":59291,"funnel-filter-outline":59292,"graph-outlined":59293,"hand-holding-user-outlined":59294,"happy-sun-outlined":59295,"health-bag-outlined":59296,"heart-outlined":59297,"home-active-outlined":59298,"home-outlined":59299,"id-card-outlined":59300,"image-outlined":59301,"import-outlined":59302,"instapay-outlined":59303,"italic":59304,"link-1":59305,"link-2":59306,"list-outlined":59307,"live-help-outlined":59308,"location-on-outlined":59309,"location-outlined":59310,"lock-outlined":59311,"locked-file-outlined":59312,"log-out":59313,"media-content-outlined":59314,"menu-close":59315,"menu-expand":59316,"menu-fold-outlined":59317,"menu-unfold-outlined":59318,"moneybag-outlined":59319,"moon-outlined":59320,"more-horizontal":59321,"more-vertical":59322,"multiple-folders-outlined":59323,"multiple-users-outlined":59324,"near-me-outlined":59325,"node-outlined":59326,"number-points":59327,"number":59328,"overview-outlined":59329,"payment-summary-outlined":59330,"payslip-outlined":59331,"pencil-outlined":59332,"percentage":59333,"phone-outlined":59334,"piggy-bank-outlined":59335,"plane-outlined":59336,"play-circle-outlined":59337,"print-outlined":59338,"qr-code-outlined":59339,"qualification-outlined":59340,"re-assign":59341,"redeem":59342,"refresh":59343,"remove":59344,"reply-outlined":59345,"restart":59346,"return-arrow":59347,"rostering-outlined":59348,"save-outlined":59349,"schedule-outlined":59350,"search-outlined":59351,"search-secured-outlined":59352,"send-outlined":59353,"share-1":59354,"share-2":59355,"share-outlined":59356,"show-chart-outlined":59357,"single-down-arrow":59358,"single-left-arrow":59359,"single-right-arrow":59360,"single-up-arrow":59361,"speaker-active-outlined":59362,"speaker-outlined":59363,"star-circle-outlined":59364,"star-outlined":59365,"stopwatch-outlined":59366,"strikethrough":59367,"styler-outlined":59368,"suitcase-clock-outlined":59369,"suitcase-outlined":59370,"survey-outlined":59371,"switch-outlined":59372,"sync":59373,"tag-outlined":59374,"target-outlined":59375,"tennis-outlined":59376,"ticket-outlined":59377,"timesheet-outlined":59378,"today-outlined":59379,"transfer":59380,"trash-bin-outlined":59381,"umbrela-outlined":59382,"unavailable":59383,"underline":59384,"union-outlined":59385,"unlock-outlined":59386,"upload-outlined":59387,"user-circle-outlined":59388,"user-gear-outlined":59389,"user-outlined":59390,"user-rectangle-outlined":59391,"video-1-outlined":59392,"video-2-outlined":59393,"volunteer-outlined":59394,"wallet-outlined":59395}

package/src/components/Icon/IconList.ts

@@ -183,6 +183,7 @@ const IconList = [
   'add-time-outlined',
   'add',
   'adjustment-outlined',
+  'ai-outlined',
   'alignment-2-outlined',
   'alignment-outlined',
   'all-caps',

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

@@ -187,14 +187,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -1587,14 +1587,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -1820,14 +1820,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -3412,14 +3412,14 @@ Array [
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontSize": 16,
+                      "fontSize": 24,
                     },
                     undefined,
                   ]
                 }
                 testID="input-suffix"
                 themeIntent="text"
-                themeSize="xsmall"
+                themeSize="medium"
               />
             </View>
           </View>
@@ -3646,14 +3646,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View

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

@@ -186,14 +186,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -1509,14 +1509,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -1742,14 +1742,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -3203,14 +3203,14 @@ Array [
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontSize": 16,
+                      "fontSize": 24,
                     },
                     undefined,
                   ]
                 }
                 testID="input-suffix"
                 themeIntent="text"
-                themeSize="xsmall"
+                themeSize="medium"
               />
             </View>
           </View>
@@ -3437,14 +3437,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View

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

@@ -1541,14 +1541,14 @@ exports[`TextInput filled renders correctly 1`] = `
         Array [
           Object {
             "color": "#001f23",
-            "fontSize": 16,
+            "fontSize": 24,
           },
           undefined,
         ]
       }
       testID="input-suffix"
       themeIntent="text"
-      themeSize="xsmall"
+      themeSize="medium"
     />
   </View>
   <View
@@ -2006,14 +2006,14 @@ exports[`TextInput idle renders correctly 1`] = `
         Array [
           Object {
             "color": "#001f23",
-            "fontSize": 16,
+            "fontSize": 24,
           },
           undefined,
         ]
       }
       testID="input-suffix"
       themeIntent="text"
-      themeSize="xsmall"
+      themeSize="medium"
     />
   </View>
   <View
@@ -2418,14 +2418,14 @@ exports[`TextInput loading renders correctly 1`] = `
           Array [
             Object {
               "color": "#001f23",
-              "fontSize": 16,
+              "fontSize": 24,
             },
             undefined,
           ]
         }
         testID="input-suffix"
         themeIntent="text"
-        themeSize="xsmall"
+        themeSize="medium"
       />
     </View>
   </View>
@@ -3492,14 +3492,14 @@ exports[`TextInput readonly renders correctly 1`] = `
         Array [
           Object {
             "color": "#001f23",
-            "fontSize": 16,
+            "fontSize": 24,
           },
           undefined,
         ]
       }
       testID="input-suffix"
       themeIntent="text"
-      themeSize="xsmall"
+      themeSize="medium"
     />
   </View>
   <View
@@ -3913,14 +3913,14 @@ exports[`TextInput required renders correctly 1`] = `
         Array [
           Object {
             "color": "#001f23",
-            "fontSize": 16,
+            "fontSize": 24,
           },
           undefined,
         ]
       }
       testID="input-suffix"
       themeIntent="text"
-      themeSize="xsmall"
+      themeSize="medium"
     />
   </View>
   <View

package/src/components/TextInput/index.tsx

@@ -373,7 +373,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
               testID="input-suffix"
               icon={actualSuffix}
               spin={actualSuffix === 'loading'}
-              size="xsmall"
+              size="medium"
             />
           ) : (
             suffix

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

@@ -424,14 +424,14 @@ exports[`TimePickerAndroid renders correctly 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View

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

@@ -424,14 +424,14 @@ exports[`TimePickerIOS renders correctly 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View

package/src/components/Toolbar/StyledToolbar.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/native';
 import { TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
+import Typography from '../Typography';
 
 const ToolbarWrapper = styled(View)<ViewProps>(({ theme }) => ({
   position: 'absolute',
@@ -10,7 +11,6 @@ const ToolbarWrapper = styled(View)<ViewProps>(({ theme }) => ({
   zIndex: 9999,
   elevation: 9999,
   width: '100%',
-  paddingVertical: theme.__hd__.toolbar.space.verticalPadding,
   paddingHorizontal: theme.__hd__.toolbar.space.horizontalPadding,
   borderTopWidth: theme.__hd__.toolbar.borderWidths.default,
   borderColor: theme.__hd__.toolbar.colors.border,
@@ -35,9 +35,30 @@ const ToolbarGroupWrapper = styled(View)<{
 }));
 
 const ToolbarItemWrapper = styled(TouchableOpacity)(({ theme }) => ({
+  height: theme.__hd__.toolbar.sizes.itemWrapperHeight,
   paddingVertical: theme.__hd__.toolbar.space.verticalPadding,
   paddingHorizontal: theme.__hd__.toolbar.space.horizontalPadding,
   alignItems: 'center',
+  flexDirection: 'row',
+}));
+
+const IconButtonWrapper = styled(View)(({ theme }) => ({
+  backgroundColor: theme.__hd__.toolbar.colors.iconButtonBackground,
+  borderRadius: theme.__hd__.toolbar.radii.iconButtonWrapperBorderRadius,
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'row',
+  padding: theme.__hd__.toolbar.space.iconButtonWrapperPadding,
+}));
+
+const IconButtonLabel = styled(Typography.Text)(({ theme }) => ({
+  marginLeft: theme.__hd__.toolbar.space.iconButtonLabelMarginLeft,
 }));
 
-export { ToolbarWrapper, ToolbarGroupWrapper, ToolbarItemWrapper };
+export {
+  ToolbarWrapper,
+  ToolbarGroupWrapper,
+  ToolbarItemWrapper,
+  IconButtonWrapper,
+  IconButtonLabel,
+};