@hero-design/rn 8.132.1 → 8.134.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.132.1",
+  "version": "8.134.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/AppCue/SpotlightBackdrop.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import Svg, { Defs, Mask, Rect } from 'react-native-svg';
+import { useTheme } from '../../theme';
+
+interface SpotlightBackdropProps {
+  bounds: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  testID?: string;
+}
+
+const SpotlightBackdrop = ({ bounds, testID }: SpotlightBackdropProps) => {
+  const theme = useTheme();
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+
+  const { spotlight: maxSpotlightRadius } = theme.__hd__.appCue.radii;
+  const { backdropColor } = theme.__hd__.appCue.colors;
+
+  const resolvedRadius = Math.min(
+    bounds.height / 2,
+    bounds.width / 2,
+    maxSpotlightRadius
+  );
+
+  return (
+    <Svg
+      width={windowWidth}
+      height={windowHeight}
+      style={{ position: 'absolute', top: 0, left: 0 }}
+    >
+      <Defs>
+        <Mask id="spotlight-mask">
+          <Rect width={windowWidth} height={windowHeight} fill="white" />
+          <Rect
+            x={bounds.x}
+            y={bounds.y}
+            width={bounds.width}
+            height={bounds.height}
+            rx={resolvedRadius}
+            ry={resolvedRadius}
+            fill="black"
+            testID={testID && `${testID}-spotlight`}
+          />
+        </Mask>
+      </Defs>
+      <Rect
+        width={windowWidth}
+        height={windowHeight}
+        fill={backdropColor}
+        mask="url(#spotlight-mask)"
+      />
+    </Svg>
+  );
+};
+
+export default SpotlightBackdrop;

package/src/components/AppCue/StyledAppCue.tsx

@@ -18,11 +18,14 @@ export const StyledContent = styled(View)(({ theme }) => ({
   alignSelf: 'center',
 }));
 
-export const StyledContainer = styled(View)(({ theme }) => ({
+export const StyledModalContainer = styled(View)({
   width: '100%',
   height: '100%',
-  backgroundColor: theme.__hd__.appCue.colors.backdropColor,
-}));
+});
+
+export const StyledContentPositioner = styled(View)({
+  position: 'absolute',
+});
 
 export const StyledIconContainer = styled(Animated.View)<{
   themePlacement: Placement;

package/src/components/AppCue/index.tsx

@@ -1,20 +1,22 @@
-import React, { useCallback, useLayoutEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
 import type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
 import {
   Modal,
   View,
   TouchableWithoutFeedback,
-  StyleSheet,
   useWindowDimensions,
 } from 'react-native';
 import type { Placement } from './StyledAppCue';
 import {
-  StyledContainer,
   StyledContent,
+  StyledContentPositioner,
   StyledIconContainer,
+  StyledModalContainer,
 } from './StyledAppCue';
+import SpotlightBackdrop from './SpotlightBackdrop';
 import Typography from '../Typography';
 import Icon from '../Icon';
+
 import { useTheme } from '../../theme';
 import { calculatePosition, calulateContentMaxWidth } from './utils';
 
@@ -43,6 +45,16 @@ export interface AppCueProps {
    * Testing ID of the component.
    */
   testID?: string;
+  /**
+   * Controls visibility externally. When provided, the component becomes controlled
+   * and will not toggle open/closed on target press.
+   */
+  visible?: boolean;
+  /**
+   * Called when the backdrop is pressed. Use this in controlled mode to update
+   * the `visible` prop.
+   */
+  onDismiss?: () => void;
 }
 
 const AppCue = ({
@@ -51,18 +63,22 @@ const AppCue = ({
   placement = 'top',
   style,
   testID,
+  visible: controlledVisible,
+  onDismiss,
 }: AppCueProps) => {
   const targetContainerRef = useRef<View>(null);
 
-  const [visible, setVisible] = React.useState(false);
+  const isControlled = controlledVisible !== undefined;
+  const [internalVisible, setInternalVisible] = React.useState(false);
+  const open = isControlled ? controlledVisible : internalVisible;
 
   const theme = useTheme();
 
   const { offset } = theme.__hd__.appCue.space;
 
-  const [position, setPosition] = React.useState({
-    pageX: 0,
-    pageY: 0,
+  const [bounds, setBounds] = React.useState({
+    x: 0,
+    y: 0,
     width: 0,
     height: 0,
   });
@@ -75,20 +91,35 @@ const AppCue = ({
   const doMeasure = useCallback((cb?: () => void) => {
     targetContainerRef.current?.measure(
       (_, __, width, height, pageX, pageY) => {
-        setPosition({ pageX, pageY, width, height });
+        setBounds({ x: pageX, y: pageY, width, height });
         cb?.();
       }
     );
   }, []);
 
-  const handleOpen = () => {
-    doMeasure(() => setVisible(true));
-  };
+  const handleOpen = useCallback(() => {
+    if (!isControlled) {
+      doMeasure(() => setInternalVisible(true));
+    }
+  }, [isControlled, doMeasure]);
+
+  const handleDismiss = useCallback(() => {
+    if (!isControlled) {
+      setInternalVisible(false);
+    }
+    onDismiss?.();
+  }, [isControlled, onDismiss]);
 
   useLayoutEffect(() => {
     doMeasure();
   }, [doMeasure]);
 
+  useEffect(() => {
+    if (open) {
+      doMeasure();
+    }
+  }, [open, doMeasure]);
+
   const enhancedTarget = React.cloneElement(
     target,
     {
@@ -110,7 +141,7 @@ const AppCue = ({
   const { width: windowWidth } = useWindowDimensions();
 
   const pos = calculatePosition({
-    position,
+    position: bounds,
     contentSize,
     placement,
     offset,
@@ -118,7 +149,7 @@ const AppCue = ({
   });
 
   const maxWidth = calulateContentMaxWidth({
-    position,
+    position: bounds,
     offset,
     placement,
     windowWidth,
@@ -144,28 +175,28 @@ const AppCue = ({
       </TouchableWithoutFeedback>
       <Modal
         animationType="fade"
-        visible={visible}
-        onDismiss={() => setVisible(false)}
+        visible={open}
+        onDismiss={handleDismiss}
         transparent
         presentationStyle="overFullScreen"
         statusBarTranslucent
       >
         <TouchableWithoutFeedback
           testID={testID && `${testID}-backdrop`}
-          onPress={() => setVisible(false)}
+          onPress={handleDismiss}
         >
-          <StyledContainer>
-            <View
-              style={StyleSheet.flatten([
+          <StyledModalContainer>
+            <SpotlightBackdrop bounds={bounds} testID={testID} />
+            <StyledContentPositioner
+              style={[
                 {
-                  position: 'absolute',
                   top: pos.top,
                   left: pos.left,
                   bottom: pos.bottom,
                   right: pos.right,
                 },
                 style,
-              ])}
+              ]}
               onLayout={measureContent}
               testID={testID}
             >
@@ -181,8 +212,8 @@ const AppCue = ({
               >
                 <Icon icon="caret-down" size="small" />
               </StyledIconContainer>
-            </View>
-          </StyledContainer>
+            </StyledContentPositioner>
+          </StyledModalContainer>
         </TouchableWithoutFeedback>
       </Modal>
     </>

package/src/components/AppCue/utils.ts

@@ -1,24 +1,5 @@
 import type { Placement } from './StyledAppCue';
 
-/**
- * Calculates the position of an element based on its placement relative to a reference position.
- *
- * @param {Object} params - The parameters for calculating the position.
- * @param {Object} params.position - The position and size of target element.
- * @param {number} params.position.pageX - The X coordinate of the target position.
- * @param {number} params.position.pageY - The Y coordinate of the target position.
- * @param {number} params.position.width - The width of the reference element.
- * @param {number} params.position.height - The height of the reference element.
- * @param {Object} params.contentSize - The size of the App Cue content.
- * @param {number} params.contentSize.width - The width of the content.
- * @param {number} params.contentSize.height - The height of the content.
- * @param {Placement} params.placement - The placement of the content relative to the reference position ('top', 'bottom', 'right', 'left').
- * @param {number} params.offset - The offset distance to display an arrow.
- *
- * @returns {Object} The calculated position of the App Cue.
- * @returns {number} return.x - The X coordinate of the App Cue.
- * @returns {number} return.y - The Y coordinate of the App Cue.
- */
 export const calculatePosition = ({
   placement,
   position,
@@ -27,8 +8,8 @@ export const calculatePosition = ({
   windowWidth,
 }: {
   position: {
-    pageX: number;
-    pageY: number;
+    x: number;
+    y: number;
     width: number;
     height: number;
   };
@@ -48,86 +29,55 @@ export const calculatePosition = ({
   switch (placement) {
     case 'top': {
       return {
-        // The X coordinate is calculated by adding the half of the width of the target element to the X coordinate of the target element.
-        left: position.pageX + (position.width - contentSize.width) / 2,
-        // The Y coordinate is calculated by subtracting the height of the content and the offset from the Y coordinate of the target element
-        top: position.pageY - contentSize.height - offset,
+        left: position.x + (position.width - contentSize.width) / 2,
+        top: position.y - contentSize.height - offset,
       };
     }
     case 'bottom': {
       return {
-        // The X coordinate is calculated by adding the half of the width of the target element to the X coordinate of the target element.
-        left: position.pageX + (position.width - contentSize.width) / 2,
-        // The Y coordinate is calculated by adding the height of the target element and the offset to the Y coordinate of the target element.
-        top: position.pageY + position.height + offset,
+        left: position.x + (position.width - contentSize.width) / 2,
+        top: position.y + position.height + offset,
       };
     }
     case 'right': {
       return {
-        // The X coordinate is calculated by adding the width of the target element and the offset to the X coordinate of the target element.
-        left: position.pageX + position.width + offset,
-        // The Y coordinate is calculated by adding half of the height of the target element to the Y coordinate of the target element.
-        top: position.pageY + (position.height - contentSize.height) / 2,
+        left: position.x + position.width + offset,
+        top: position.y + (position.height - contentSize.height) / 2,
       };
     }
     case 'left': {
       return {
-        // The X coordinate is calculated by subtracting the width of the content and the offset from the X coordinate of the target element.
-        left: position.pageX - contentSize.width - offset,
-        // The Y coordinate is calculated by adding half of the height of the target element to the Y coordinate of the target element.
-        top: position.pageY + (position.height - contentSize.height) / 2,
+        left: position.x - contentSize.width - offset,
+        top: position.y + (position.height - contentSize.height) / 2,
       };
     }
     case 'top-left': {
       return {
-        // The X coordinate is calculated by subtracting the width of the content from the X coordinate of the target element.
-        right: windowWidth - position.pageX - position.width,
-        // The Y coordinate is calculated by subtracting the height of the content and the offset from the Y coordinate of the target element
-        top: position.pageY - contentSize.height - offset,
+        right: windowWidth - position.x - position.width,
+        top: position.y - contentSize.height - offset,
       };
     }
     case 'top-right': {
       return {
-        // The X coordinate is calculated by adding the width of the target element to the X coordinate of the target element.
-        left: position.pageX,
-        // The Y coordinate is calculated by subtracting the height of the content and the offset from the Y coordinate of the target element.
-        top: position.pageY - contentSize.height - offset,
+        left: position.x,
+        top: position.y - contentSize.height - offset,
       };
     }
     case 'bottom-left': {
       return {
-        // The X coordinate is calculated by subtracting the width of the content from the X coordinate of the target element.
-        right: windowWidth - position.pageX - position.width,
-        // The Y coordinate is calculated by adding the height of the target element and the offset to the Y coordinate of the target element.
-        top: position.pageY + position.height + offset,
+        right: windowWidth - position.x - position.width,
+        top: position.y + position.height + offset,
       };
     }
     case 'bottom-right': {
       return {
-        // The X coordinate is calculated by adding the width of the target element to the X coordinate of the target element.
-        left: position.pageX,
-        // The Y coordinate is calculated by adding the height of the target element and the offset to the Y coordinate of the target element.
-        top: position.pageY + position.height + offset,
+        left: position.x,
+        top: position.y + position.height + offset,
       };
     }
   }
 };
 
-/**
- * Calculates the maximum width of the content based on its position, offset, placement, and window width.
- *
- * @param {Object} params - The parameters for the calculation.
- * @param {Object} params.position - The position and dimensions of the target element.
- * @param {number} params.position.pageX - The X coordinate of the target element.
- * @param {number} params.position.pageY - The Y coordinate of the target element.
- * @param {number} params.position.width - The width of the target element.
- * @param {number} params.position.height - The height of the target element.
- * @param {number} params.offset - The offset value to display an arrow.
- * @param {Placement} params.placement - The placement of the content relative to the element.
- * @param {number} params.windowWidth - The width of the window.
- *
- * @returns {number | undefined} The maximum width of the content.
- */
 export const calulateContentMaxWidth = ({
   position,
   offset,
@@ -135,8 +85,8 @@ export const calulateContentMaxWidth = ({
   windowWidth,
 }: {
   position: {
-    pageX: number;
-    pageY: number;
+    x: number;
+    y: number;
     width: number;
     height: number;
   };
@@ -152,22 +102,22 @@ export const calulateContentMaxWidth = ({
       return undefined;
     }
     case 'right': {
-      return windowWidth - position.pageX - position.width - offset;
+      return windowWidth - position.x - position.width - offset;
     }
     case 'left': {
-      return position.pageX - offset;
+      return position.x - offset;
     }
     case 'top-left': {
-      return position.pageX + position.width;
+      return position.x + position.width;
     }
     case 'top-right': {
-      return windowWidth - position.pageX;
+      return windowWidth - position.x;
     }
     case 'bottom-left': {
-      return position.pageX + position.width;
+      return position.x + position.width;
     }
     case 'bottom-right': {
-      return windowWidth - position.pageX;
+      return windowWidth - position.x;
     }
   }
 };

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-checked":59013,"bookmark":59014,"box-check":59015,"box":59016,"bpay":59017,"buildings":59018,"cake":59019,"calendar-clock":59020,"calendar":59021,"candy-box-menu":59022,"caret-down-small":59023,"caret-down":59024,"caret-left-small":59025,"caret-left":59026,"caret-right-small":59027,"caret-right":59028,"caret-up-small":59029,"caret-up":59030,"check-radio":59031,"circle-add":59032,"circle-cancel":59033,"circle-check":59034,"circle-down":59035,"circle-info":59036,"circle-left":59037,"circle-ok":59038,"circle-pencil":59039,"circle-question":59040,"circle-remove":59041,"circle-right":59042,"circle-up":59043,"circle-warning":59044,"clock-3":59045,"clock":59046,"cloud-download":59047,"cloud-upload":59048,"cog":59049,"coin":59050,"contacts":59051,"credit-card":59052,"diamond":59053,"direction-arrows":59054,"directory":59055,"document":59056,"dollar-coin-shine":59057,"dot":59058,"double-buildings":59059,"edit-template":59060,"envelope":59061,"exclude":59062,"expand-content":59063,"expense":59064,"explore_nearby":59065,"eye-circle":59066,"eye-invisible":59067,"eye":59068,"face-meh":59069,"face-sad":59070,"face-smiley":59071,"feed":59072,"feedbacks":59073,"file-certified":59074,"file-clone":59075,"file-copy":59076,"file-csv":59077,"file-dispose":59078,"file-doc":59079,"file-excel":59080,"file-export":59081,"file-lock":59082,"file-pdf":59083,"file-powerpoint":59084,"file-search":59085,"file-secured":59086,"file-sheets":59087,"file-slide":59088,"file-verified":59089,"file-word":59090,"file":59091,"filter":59092,"folder-user":59093,"folder":59094,"format-bold":59095,"format-heading1":59096,"format-heading2":59097,"format-italic":59098,"format-list-bulleted":59099,"format-list-numbered":59100,"format-underlined":59101,"funnel-filter":59102,"global-dollar":59103,"global-pound":59104,"globe":59105,"graduation-cap":59106,"graph":59107,"happy-sun":59108,"health-bag":59109,"heart":59110,"hero-points":59111,"home":59112,"image":59113,"import":59114,"incident-siren":59115,"instapay-daily":59116,"instapay-now":59117,"instapay":59118,"list":59119,"loading-2":59120,"loading":59121,"location-on":59122,"location":59123,"lock":59124,"looks-one":59125,"looks-two":59126,"media-content":59127,"menu":59128,"money-notes":59129,"moneybag":59130,"moon":59131,"multiple-stars":59132,"multiple-users":59133,"near-me":59134,"node":59135,"open-folder":59136,"paperclip-vertical":59137,"paperclip":59138,"payment-summary":59139,"pencil":59140,"phone":59141,"piggy-bank":59142,"plane-up":59143,"plane":59144,"play-arrow":59145,"play-circle":59146,"pound-coin-shine":59147,"pound-sign":59148,"print":59149,"raising-hands":59150,"reply-arrow":59151,"reply":59152,"reschedule":59153,"rocket-launch":59154,"rostering":59155,"salary-sacrifice":59156,"save":59157,"schedule-send":59158,"schedule":59159,"search-person":59160,"search":59161,"send":59162,"speaker-active":59163,"speaker":59164,"star-award":59165,"star-badge":59166,"star-circle":59167,"star-medal":59168,"star":59169,"steps-circle":59170,"stopwatch":59171,"suitcase":59172,"surfing":59173,"survey":59174,"swag-pillar-benefit":59175,"swag-pillar-career":59176,"swag-pillar-money":59177,"swag-pillar-work":59178,"swag":59179,"swipe-right":59180,"switch":59181,"tag":59182,"target":59183,"teams":59184,"thumb-down":59185,"thumb-up":59186,"timesheet":59187,"touch-id":59188,"trash-bin":59189,"unlock":59190,"user":59191,"video-1":59192,"video-2":59193,"wallet":59194,"warning":59195,"academic-hat-outlined":59196,"accommodation-outlined":59197,"activate-outlined":59198,"add-credit-card-outlined":59199,"add-person-outlined":59200,"add-section-outlined":59201,"add-time-outlined":59202,"add":59203,"adjustment-outlined":59204,"afternoon-outlined":59205,"ai-outlined":59206,"alignment-2-outlined":59207,"alignment-outlined":59208,"all-caps":59209,"application-outlined":59210,"arrow-down":59211,"arrow-downwards":59212,"arrow-left":59213,"arrow-leftwards":59214,"arrow-right":59215,"arrow-rightwards":59216,"arrow-up":59217,"arrow-upwards":59218,"article-outlined":59219,"at-sign":59220,"auto-graph-outlined":59221,"automotive-outlined":59222,"bakery-outlined":59223,"bar-outlined":59224,"beauty-outlined":59225,"beer-outlined":59226,"bell-active-outlined":59227,"bell-outlined":59228,"bell-slash-outlined":59229,"bill-management-outlined":59230,"billing-outlined":59231,"body-outlined":59232,"bold":59233,"bolt-outlined":59234,"book-outlined":59235,"bookmark-added-outlined":59236,"bookmark-checked-outlined":59237,"bookmark-outlined":59238,"box-1-outlined":59239,"box-check-outlined":59240,"box-outlined":59241,"bullet-points":59242,"cake-outlined":59243,"calculator-outlined":59244,"calendar-dates-outlined":59245,"calendar-edit-outlined":59246,"calendar-star-outlined":59247,"call-outlined":59248,"call-split-outlined":59249,"camera-outlined":59250,"cancel":59251,"car-forward-outlined":59252,"cashback-outlined":59253,"charging-station-outlined":59254,"chat-bubble-outlined":59255,"chat-unread-outlined":59256,"checkmark":59257,"circle-add-outlined":59258,"circle-cancel-outlined":59259,"circle-down-outlined":59260,"circle-info-outlined":59261,"circle-left-outlined":59262,"circle-ok-outlined":59263,"circle-question-outlined":59264,"circle-remove-outlined":59265,"circle-right-outlined":59266,"circle-up-outlined":59267,"circle-warning-outlined":59268,"clock-2-outlined":59269,"clock-in-outlined":59270,"clock-out-outlined":59271,"clock-outlined":59272,"cog-outlined":59273,"coin-outlined":59274,"coin-super-outlined":59275,"comment-outlined":59276,"contacts-outlined":59277,"contacts-user-outlined":59278,"credit-card-outlined":59279,"cultural-site-outlined":59280,"cup-outlined":59281,"dentistry-outlined":59282,"diamond-outlined":59283,"direction-arrows-outlined":59284,"directory-outlined":59285,"document-outlined":59286,"dollar-box-outlined":59287,"dollar-card-outlined":59288,"dollar-coin-shine-outlined":59289,"dollar-credit-card-outlined":59290,"dollar-sign":59291,"double-buildings-outlined":59292,"double-left-arrows":59293,"double-right-arrows":59294,"download-box-outlined":59295,"download-outlined":59296,"edit-template-outlined":59297,"edit-user-outlined":59298,"electronics-outlined":59299,"email-outlined":59300,"end-break-outlined":59301,"enter-arrow":59302,"entertainment-outlined":59303,"envelope-outlined":59304,"evening-outlined":59305,"expense-approval-outlined":59306,"expense-outlined":59307,"explore-outlined":59308,"extension-outlined":59309,"external-link":59310,"eye-invisible-outlined":59311,"eye-outlined":59312,"face-id":59313,"face-meh-outlined":59314,"face-open-smiley-outlined":59315,"face-sad-outlined":59316,"face-smiley-outlined":59317,"fastfood-outlined":59318,"feed-outlined":59319,"feedbacks-outlined":59320,"file-certified-outlined":59321,"file-clone-outlined":59322,"file-copy-outlined":59323,"file-dispose-outlined":59324,"file-dollar-certified-outlined":59325,"file-dollar-outlined":59326,"file-download-outlined":59327,"file-export-outlined":59328,"file-lock-outlined":59329,"file-outlined":59330,"file-pound-outlined":59331,"file-search-outlined":59332,"file-secured-outlined":59333,"file-statutory-outlined":59334,"file-verified-outlined":59335,"filter-outlined":59336,"fitness-outlined":59337,"folder-outlined":59338,"folder-upload-outlined":59339,"folder-user-outlined":59340,"form-outlined":59341,"funnel-filter-outline":59342,"goal-outlined":59343,"graph-outlined":59344,"grocery-outlined":59345,"hand-holding-user-outlined":59346,"handshake-outlined":59347,"happy-sun-outlined":59348,"health-bag-outlined":59349,"heart-outlined":59350,"history-outlined":59351,"home-active-outlined":59352,"home-outlined":59353,"id-card-outlined":59354,"image-outlined":59355,"import-outlined":59356,"instapay-outlined":59357,"italic":59358,"job-search-outlined":59359,"leave-approval-outlined":59360,"lighting-outlined":59361,"link-1":59362,"link-2":59363,"list-outlined":59364,"live-help-outlined":59365,"local_mall_outlined":59366,"location-on-outlined":59367,"location-outlined":59368,"lock-outlined":59369,"locked-file-outlined":59370,"log-out":59371,"mail-outlined":59372,"map-outlined":59373,"media-content-outlined":59374,"menu-close":59375,"menu-expand":59376,"menu-fold-outlined":59377,"menu-unfold-outlined":59378,"mic-outlined":59379,"mic-slash-outlined":59380,"moneybag-outlined":59381,"moon-outlined":59382,"more-horizontal":59383,"more-vertical":59384,"morning-outlined":59385,"multiple-folders-outlined":59386,"multiple-users-outlined":59387,"near-me-outlined":59388,"node-outlined":59389,"number-points":59390,"number":59391,"overview-outlined":59392,"park-outlined":59393,"payment-summary-outlined":59394,"payslip-outlined":59395,"pencil-outlined":59396,"percentage":59397,"phone-outlined":59398,"piggy-bank-outlined":59399,"plane-outlined":59400,"play-circle-outlined":59401,"pound-box-outlined":59402,"pound-card-outlined":59403,"pound-coin-shine-outlined":59404,"pound-credit-card-outlined":59405,"print-outlined":59406,"profile-2user-outlined":59407,"propane-tank-outlined":59408,"qr-code-outlined":59409,"qualification-outlined":59410,"question-mark":59411,"re-assign":59412,"redeem":59413,"refresh":59414,"remove":59415,"reply-outlined":59416,"restart":59417,"restaurant-outlined":59418,"resume-outlined":59419,"return-arrow":59420,"rocket-launch-outlined":59421,"rostering-outlined":59422,"safety-outlined":59423,"save-outlined":59424,"schedule-outlined":59425,"search-outlined":59426,"search-secured-outlined":59427,"send-outlined":59428,"share-1":59429,"share-2":59430,"share-outlined-2":59431,"share-outlined":59432,"shield-check-outlined":59433,"shop-outlined":59434,"shopping_basket_outlined":59435,"show-chart-outlined":59436,"single-down-arrow":59437,"single-left-arrow":59438,"single-right-arrow":59439,"single-up-arrow":59440,"smart-match-outlined":59441,"sparkle-2-outlined":59442,"sparkle-outlined":59443,"speaker-active-outlined":59444,"speaker-outlined":59445,"star-circle-outlined":59446,"star-outlined":59447,"start-break-outlined":59448,"stash-outlined":59449,"stopwatch-outlined":59450,"strikethrough":59451,"styler-outlined":59452,"suitcase-clock-outlined":59453,"suitcase-outlined":59454,"survey-outlined":59455,"switch-outlined":59456,"sync":59457,"tag-outlined":59458,"target-outlined":59459,"tennis-outlined":59460,"thumb-down-outlined":59461,"thumb-up-outlined":59462,"ticket-outlined":59463,"timesheet-outlined":59464,"timesheets-outlined":59465,"today-outlined":59466,"transfer":59467,"transportation-outlined":59468,"trash-bin-outlined":59469,"umbrela-outlined":59470,"unavailability-outlined":59471,"unavailable":59472,"underline":59473,"union-outlined":59474,"unlock-outlined":59475,"upload-outlined":59476,"user-add-outlined":59477,"user-circle-outlined":59478,"user-gear-outlined":59479,"user-out-outlined":59480,"user-outlined":59481,"user-rectangle-outlined":59482,"video-1-outlined":59483,"video-2-outlined":59484,"volunteer-outlined":59485,"wallet-outlined":59486,"wellness-outlined":59487}
+{"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-checked":59013,"bookmark":59014,"box-check":59015,"box":59016,"bpay":59017,"buildings":59018,"cake":59019,"calendar-clock":59020,"calendar":59021,"candy-box-menu":59022,"caret-down-small":59023,"caret-down":59024,"caret-left-small":59025,"caret-left":59026,"caret-right-small":59027,"caret-right":59028,"caret-up-small":59029,"caret-up":59030,"check-radio":59031,"circle-add":59032,"circle-cancel":59033,"circle-check":59034,"circle-down":59035,"circle-info":59036,"circle-left":59037,"circle-ok":59038,"circle-pencil":59039,"circle-question":59040,"circle-remove":59041,"circle-right":59042,"circle-up":59043,"circle-warning":59044,"clock-3":59045,"clock":59046,"cloud-download":59047,"cloud-upload":59048,"cog":59049,"coin":59050,"contacts":59051,"credit-card":59052,"diamond":59053,"direction-arrows":59054,"directory":59055,"document":59056,"dollar-coin-shine":59057,"dot":59058,"double-buildings":59059,"edit-template":59060,"envelope":59061,"exclude":59062,"expand-content":59063,"expense":59064,"explore_nearby":59065,"eye-circle":59066,"eye-invisible":59067,"eye":59068,"face-meh":59069,"face-sad":59070,"face-smiley":59071,"feed":59072,"feedbacks":59073,"file-certified":59074,"file-clone":59075,"file-copy":59076,"file-csv":59077,"file-dispose":59078,"file-doc":59079,"file-excel":59080,"file-export":59081,"file-lock":59082,"file-pdf":59083,"file-powerpoint":59084,"file-search":59085,"file-secured":59086,"file-sheets":59087,"file-slide":59088,"file-verified":59089,"file-word":59090,"file":59091,"filter":59092,"folder-user":59093,"folder":59094,"format-bold":59095,"format-heading1":59096,"format-heading2":59097,"format-italic":59098,"format-list-bulleted":59099,"format-list-numbered":59100,"format-underlined":59101,"funnel-filter":59102,"global-dollar":59103,"global-pound":59104,"globe":59105,"graduation-cap":59106,"graph":59107,"happy-sun":59108,"health-bag":59109,"heart":59110,"hero-points":59111,"home":59112,"image":59113,"import":59114,"incident-siren":59115,"instapay-daily":59116,"instapay-now":59117,"instapay":59118,"list":59119,"loading-2":59120,"loading":59121,"location-on":59122,"location":59123,"lock":59124,"looks-one":59125,"looks-two":59126,"media-content":59127,"menu":59128,"money-notes":59129,"moneybag":59130,"moon":59131,"multiple-stars":59132,"multiple-users":59133,"near-me":59134,"node":59135,"open-folder":59136,"paperclip-vertical":59137,"paperclip":59138,"payment-summary":59139,"pencil":59140,"phone":59141,"piggy-bank":59142,"plane-up":59143,"plane":59144,"play-arrow":59145,"play-circle":59146,"pound-coin-shine":59147,"pound-sign":59148,"print":59149,"raising-hands":59150,"reply-arrow":59151,"reply":59152,"reschedule":59153,"rocket-launch":59154,"rostering":59155,"salary-sacrifice":59156,"save":59157,"schedule-send":59158,"schedule":59159,"search-person":59160,"search":59161,"send":59162,"speaker-active":59163,"speaker":59164,"star-award":59165,"star-badge":59166,"star-circle":59167,"star-medal":59168,"star":59169,"steps-circle":59170,"stopwatch":59171,"suitcase":59172,"surfing":59173,"survey":59174,"swag-pillar-benefit":59175,"swag-pillar-career":59176,"swag-pillar-money":59177,"swag-pillar-work":59178,"swag":59179,"swipe-right":59180,"switch":59181,"tag":59182,"target":59183,"teams":59184,"thumb-down":59185,"thumb-up":59186,"timesheet":59187,"touch-id":59188,"trash-bin":59189,"unlock":59190,"user":59191,"video-1":59192,"video-2":59193,"wallet":59194,"warning":59195,"academic-hat-outlined":59196,"accommodation-outlined":59197,"activate-outlined":59198,"add-credit-card-outlined":59199,"add-emoji-outlined":59200,"add-person-outlined":59201,"add-section-outlined":59202,"add-time-outlined":59203,"add":59204,"adjustment-outlined":59205,"afternoon-outlined":59206,"ai-outlined":59207,"alignment-2-outlined":59208,"alignment-outlined":59209,"all-caps":59210,"application-outlined":59211,"archive-outlined":59212,"arrow-down":59213,"arrow-downwards":59214,"arrow-left":59215,"arrow-leftwards":59216,"arrow-right":59217,"arrow-rightwards":59218,"arrow-up":59219,"arrow-upwards":59220,"article-outlined":59221,"assignment-warning-outlined":59222,"at-sign":59223,"auto-graph-outlined":59224,"automotive-outlined":59225,"bakery-outlined":59226,"bank-outlined":59227,"bar-outlined":59228,"beauty-outlined":59229,"beer-outlined":59230,"bell-active-outlined":59231,"bell-outlined":59232,"bell-slash-outlined":59233,"bill-management-outlined":59234,"billing-outlined":59235,"body-outlined":59236,"bold":59237,"bolt-outlined":59238,"book-outlined":59239,"bookmark-added-outlined":59240,"bookmark-checked-outlined":59241,"bookmark-outlined":59242,"box-1-outlined":59243,"box-check-outlined":59244,"box-outlined":59245,"bullet-points":59246,"cake-outlined":59247,"calculator-outlined":59248,"calendar-clock-outlined":59249,"calendar-dates-outlined":59250,"calendar-edit-outlined":59251,"calendar-outlined":59252,"calendar-star-outlined":59253,"call-outlined":59254,"call-split-outlined":59255,"camera-outlined":59256,"cancel":59257,"car-forward-outlined":59258,"cashback-outlined":59259,"charging-station-outlined":59260,"chat-bubble-outlined":59261,"chat-unread-outlined":59262,"checkmark":59263,"circle-add-outlined":59264,"circle-cancel-outlined":59265,"circle-check-outlined":59266,"circle-down-outlined":59267,"circle-info-outlined":59268,"circle-left-outlined":59269,"circle-ok-outlined":59270,"circle-question-outlined":59271,"circle-remove-outlined":59272,"circle-right-outlined":59273,"circle-up-outlined":59274,"circle-warning-outlined":59275,"clock-2-outlined":59276,"clock-3-outlined":59277,"clock-in-outlined":59278,"clock-out-outlined":59279,"clock-outlined":59280,"cloud-download-outlined":59281,"cog-outlined":59282,"coin-outlined":59283,"coin-super-outlined":59284,"comment-outlined":59285,"contacts-outlined":59286,"contacts-user-outlined":59287,"credit-card-outlined":59288,"cultural-site-outlined":59289,"cup-outlined":59290,"dentistry-outlined":59291,"diamond-outlined":59292,"direction-arrows-outlined":59293,"directory-outlined":59294,"document-outlined":59295,"dollar-box-outlined":59296,"dollar-card-outlined":59297,"dollar-coin-shine-outlined":59298,"dollar-credit-card-outlined":59299,"dollar-sign":59300,"double-buildings-outlined":59301,"double-left-arrows":59302,"double-right-arrows":59303,"download-box-outlined":59304,"download-outlined":59305,"edit-template-outlined":59306,"edit-user-outlined":59307,"electronics-outlined":59308,"email-outlined":59309,"end-break-outlined":59310,"enter-arrow":59311,"entertainment-outlined":59312,"envelope-outlined":59313,"evening-outlined":59314,"expense-approval-outlined":59315,"expense-outlined":59316,"explore-outlined":59317,"extension-outlined":59318,"external-link":59319,"eye-invisible-outlined":59320,"eye-outlined":59321,"face-id":59322,"face-meh-outlined":59323,"face-open-smiley-outlined":59324,"face-sad-outlined":59325,"face-smiley-outlined":59326,"fastfood-outlined":59327,"feed-outlined":59328,"feedbacks-outlined":59329,"file-certified-outlined":59330,"file-clone-outlined":59331,"file-copy-outlined":59332,"file-dispose-outlined":59333,"file-dollar-certified-outlined":59334,"file-dollar-outlined":59335,"file-download-outlined":59336,"file-export-outlined":59337,"file-lock-outlined":59338,"file-outlined":59339,"file-pound-outlined":59340,"file-search-outlined":59341,"file-secured-outlined":59342,"file-statutory-outlined":59343,"file-verified-outlined":59344,"filter-outlined":59345,"fitness-outlined":59346,"folder-outlined":59347,"folder-upload-outlined":59348,"folder-user-outlined":59349,"form-outlined":59350,"funnel-filter-outline":59351,"goal-outlined":59352,"graph-outlined":59353,"grocery-outlined":59354,"hand-holding-user-outlined":59355,"handshake-outlined":59356,"happy-sun-outlined":59357,"health-bag-outlined":59358,"heart-outlined":59359,"history-outlined":59360,"home-active-outlined":59361,"home-outlined":59362,"id-card-outlined":59363,"image-outlined":59364,"import-outlined":59365,"instapay-outlined":59366,"italic":59367,"job-search-outlined":59368,"leave-approval-outlined":59369,"lighting-outlined":59370,"link-1":59371,"link-2":59372,"list-outlined":59373,"live-help-outlined":59374,"local_mall_outlined":59375,"location-on-outlined":59376,"location-outlined":59377,"lock-outlined":59378,"locked-file-outlined":59379,"log-out":59380,"mail-outlined":59381,"map-outlined":59382,"media-content-outlined":59383,"menu-close":59384,"menu-expand":59385,"menu-fold-outlined":59386,"menu-unfold-outlined":59387,"mic-outlined":59388,"mic-slash-outlined":59389,"moneybag-outlined":59390,"moon-outlined":59391,"more-horizontal":59392,"more-vertical":59393,"morning-outlined":59394,"multiple-folders-outlined":59395,"multiple-users-outlined":59396,"near-me-outlined":59397,"node-outlined":59398,"number-points":59399,"number":59400,"overview-outlined":59401,"park-outlined":59402,"payment-summary-outlined":59403,"payslip-outlined":59404,"pencil-outlined":59405,"percentage":59406,"phone-outlined":59407,"piggy-bank-outlined":59408,"plane-outlined":59409,"play-circle-outlined":59410,"pound-box-outlined":59411,"pound-card-outlined":59412,"pound-coin-shine-outlined":59413,"pound-credit-card-outlined":59414,"print-outlined":59415,"profile-2user-outlined":59416,"propane-tank-outlined":59417,"qr-code-outlined":59418,"qualification-outlined":59419,"question-mark":59420,"raising-hands-outlined":59421,"re-assign":59422,"redeem":59423,"refresh":59424,"remove":59425,"reply-outlined":59426,"restart":59427,"restaurant-outlined":59428,"resume-outlined":59429,"return-arrow":59430,"rocket-launch-outlined":59431,"rostering-outlined":59432,"safety-outlined":59433,"save-outlined":59434,"schedule-outlined":59435,"schedule-send-outlined":59436,"search-outlined":59437,"search-secured-outlined":59438,"send-outlined":59439,"share-1":59440,"share-2":59441,"share-outlined-2":59442,"share-outlined":59443,"shield-check-outlined":59444,"shop-outlined":59445,"shopping_basket_outlined":59446,"show-chart-outlined":59447,"single-down-arrow":59448,"single-left-arrow":59449,"single-right-arrow":59450,"single-up-arrow":59451,"smart-match-outlined":59452,"sparkle-2-outlined":59453,"sparkle-outlined":59454,"speaker-active-outlined":59455,"speaker-outlined":59456,"star-award-outlined":59457,"star-badge-outlined":59458,"star-circle-outlined":59459,"star-medal-outlined":59460,"star-outlined":59461,"start-break-outlined":59462,"stash-outlined":59463,"stopwatch-outlined":59464,"strikethrough":59465,"styler-outlined":59466,"suitcase-clock-outlined":59467,"suitcase-outlined":59468,"survey-outlined":59469,"switch-outlined":59470,"sync":59471,"tag-outlined":59472,"target-outlined":59473,"teams-outlined":59474,"tennis-outlined":59475,"thumb-down-outlined":59476,"thumb-up-outlined":59477,"ticket-outlined":59478,"timesheet-outlined":59479,"timesheets-outlined":59480,"today-outlined":59481,"transfer":59482,"transportation-outlined":59483,"trash-bin-outlined":59484,"umbrela-outlined":59485,"unavailability-outlined":59486,"unavailable":59487,"underline":59488,"union-outlined":59489,"unlock-outlined":59490,"upload-outlined":59491,"user-add-outlined":59492,"user-circle-outlined":59493,"user-gear-outlined":59494,"user-out-outlined":59495,"user-outlined":59496,"user-rectangle-outlined":59497,"video-1-outlined":59498,"video-2-outlined":59499,"volunteer-outlined":59500,"wallet-outlined":59501,"warning-outlined":59502,"wellness-outlined":59503}

package/src/components/Icon/IconList.ts

@@ -200,6 +200,7 @@ const IconList = [
   'accommodation-outlined',
   'activate-outlined',
   'add-credit-card-outlined',
+  'add-emoji-outlined',
   'add-person-outlined',
   'add-section-outlined',
   'add-time-outlined',
@@ -211,6 +212,7 @@ const IconList = [
   'alignment-outlined',
   'all-caps',
   'application-outlined',
+  'archive-outlined',
   'arrow-down',
   'arrow-downwards',
   'arrow-left',
@@ -220,10 +222,12 @@ const IconList = [
   'arrow-up',
   'arrow-upwards',
   'article-outlined',
+  'assignment-warning-outlined',
   'at-sign',
   'auto-graph-outlined',
   'automotive-outlined',
   'bakery-outlined',
+  'bank-outlined',
   'bar-outlined',
   'beauty-outlined',
   'beer-outlined',
@@ -245,8 +249,10 @@ const IconList = [
   'bullet-points',
   'cake-outlined',
   'calculator-outlined',
+  'calendar-clock-outlined',
   'calendar-dates-outlined',
   'calendar-edit-outlined',
+  'calendar-outlined',
   'calendar-star-outlined',
   'call-outlined',
   'call-split-outlined',
@@ -260,6 +266,7 @@ const IconList = [
   'checkmark',
   'circle-add-outlined',
   'circle-cancel-outlined',
+  'circle-check-outlined',
   'circle-down-outlined',
   'circle-info-outlined',
   'circle-left-outlined',
@@ -270,9 +277,11 @@ const IconList = [
   'circle-up-outlined',
   'circle-warning-outlined',
   'clock-2-outlined',
+  'clock-3-outlined',
   'clock-in-outlined',
   'clock-out-outlined',
   'clock-outlined',
+  'cloud-download-outlined',
   'cog-outlined',
   'coin-outlined',
   'coin-super-outlined',
@@ -412,6 +421,7 @@ const IconList = [
   'qr-code-outlined',
   'qualification-outlined',
   'question-mark',
+  'raising-hands-outlined',
   're-assign',
   'redeem',
   'refresh',
@@ -426,6 +436,7 @@ const IconList = [
   'safety-outlined',
   'save-outlined',
   'schedule-outlined',
+  'schedule-send-outlined',
   'search-outlined',
   'search-secured-outlined',
   'send-outlined',
@@ -446,7 +457,10 @@ const IconList = [
   'sparkle-outlined',
   'speaker-active-outlined',
   'speaker-outlined',
+  'star-award-outlined',
+  'star-badge-outlined',
   'star-circle-outlined',
+  'star-medal-outlined',
   'star-outlined',
   'start-break-outlined',
   'stash-outlined',
@@ -460,6 +474,7 @@ const IconList = [
   'sync',
   'tag-outlined',
   'target-outlined',
+  'teams-outlined',
   'tennis-outlined',
   'thumb-down-outlined',
   'thumb-up-outlined',
@@ -487,6 +502,7 @@ const IconList = [
   'video-2-outlined',
   'volunteer-outlined',
   'wallet-outlined',
+  'warning-outlined',
   'wellness-outlined',
 ] as const;
 

package/src/theme/components/appCue.ts

@@ -14,6 +14,7 @@ const getAppCueTheme = (theme: GlobalTheme) => {
 
   const radii = {
     container: theme.radii.large,
+    spotlight: theme.radii['5xlarge'],
   };
 
   return { colors, space, radii };

package/types/components/AppCue/SpotlightBackdrop.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface SpotlightBackdropProps {
+    bounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    testID?: string;
+}
+declare const SpotlightBackdrop: ({ bounds, testID }: SpotlightBackdropProps) => React.JSX.Element;
+export default SpotlightBackdrop;

package/types/components/AppCue/StyledAppCue.d.ts

@@ -6,7 +6,13 @@ export declare const StyledContent: import("@emotion/native").StyledComponent<im
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+export declare const StyledModalContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledContentPositioner: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {