@hero-design/rn 8.92.1 → 8.92.3

package/src/components/Calendar/__tests__/helper.spec.ts

@@ -73,99 +73,106 @@ describe('isDateInRange', () => {
 });
 
 describe('setStartOrEndDate', () => {
-  // Test case 1: Prevent selecting same date when both dates are set
-  it('should not change dates when selecting same date as start date and both dates are set', () => {
-    const date = new Date('2024-03-15');
-    const startDate = new Date('2024-03-15');
-    const endDate = new Date('2024-03-20');
-
-    const result = setStartOrEndDate({ date, startDate, endDate });
-    expect(result).toEqual({ startDate, endDate });
+  const today = new Date('2024-01-01');
+  const tomorrow = new Date('2024-01-02');
+  const nextWeek = new Date('2024-01-08');
+
+  it('should set start date when no dates are selected', () => {
+    const result = setStartOrEndDate({
+      date: today,
+    });
+
+    expect(result).toEqual({
+      startDate: today,
+      endDate: undefined,
+    });
   });
 
-  // Test case 2: Allow selecting same date as start date when only start date is set
-  it('should allow selecting same date as start date when only start date is set', () => {
-    const date = new Date('2024-03-15');
-    const startDate = new Date('2024-03-15');
+  it('should set end date when only start date is selected', () => {
+    const result = setStartOrEndDate({
+      date: tomorrow,
+      startDate: today,
+    });
 
-    const result = setStartOrEndDate({ date, startDate });
     expect(result).toEqual({
-      startDate: new Date('2024-03-15'),
-      endDate: new Date('2024-03-15'),
+      startDate: today,
+      endDate: tomorrow,
     });
   });
 
-  // Test case 3: Initial selection (no start date)
-  it('should set start date when no dates are selected', () => {
-    const date = new Date('2024-03-15');
+  it('should set start date when date is before current start date', () => {
+    const result = setStartOrEndDate({
+      date: today,
+      startDate: tomorrow,
+    });
 
-    const result = setStartOrEndDate({ date });
     expect(result).toEqual({
-      startDate: new Date('2024-03-15'),
-      endDate: undefined,
+      startDate: today,
+      endDate: tomorrow,
     });
   });
 
-  // Test case 4: Setting end date after start date
-  it('should set end date when start date exists and selected date is after', () => {
-    const date = new Date('2024-03-20');
-    const startDate = new Date('2024-03-15');
+  it('should set end date when date is after current start date', () => {
+    const result = setStartOrEndDate({
+      date: tomorrow,
+      startDate: today,
+    });
 
-    const result = setStartOrEndDate({ date, startDate });
     expect(result).toEqual({
-      startDate: new Date('2024-03-15'),
-      endDate: new Date('2024-03-20'),
+      startDate: today,
+      endDate: tomorrow,
     });
   });
 
-  // Test case 5: Setting end date before start date (should reorder)
-  it('should reorder dates when end date is selected before start date', () => {
-    const date = new Date('2024-03-10');
-    const startDate = new Date('2024-03-15');
+  it('should reset selection when clicking within range', () => {
+    const result = setStartOrEndDate({
+      date: tomorrow,
+      startDate: today,
+      endDate: nextWeek,
+    });
 
-    const result = setStartOrEndDate({ date, startDate });
     expect(result).toEqual({
-      startDate: new Date('2024-03-10'),
-      endDate: new Date('2024-03-15'),
+      startDate: tomorrow,
+      endDate: undefined,
     });
   });
 
-  // Test case 6: Clicking within existing range
-  it('should start new selection when clicking within existing range', () => {
-    const date = new Date('2024-03-17');
-    const startDate = new Date('2024-03-15');
-    const endDate = new Date('2024-03-20');
+  it('should reset selection when clicking outside range', () => {
+    const result = setStartOrEndDate({
+      date: nextWeek,
+      startDate: today,
+      endDate: tomorrow,
+    });
 
-    const result = setStartOrEndDate({ date, startDate, endDate });
     expect(result).toEqual({
-      startDate: new Date('2024-03-17'),
+      startDate: nextWeek,
       endDate: undefined,
     });
   });
 
-  // Test case 7: Extending range before start date
-  it('should extend range when clicking before start date', () => {
-    const date = new Date('2024-03-10');
-    const startDate = new Date('2024-03-15');
-    const endDate = new Date('2024-03-20');
+  it('should set same date for both start and end when clicking start date', () => {
+    const result = setStartOrEndDate({
+      date: today,
+      startDate: today,
+      endDate: tomorrow,
+    });
 
-    const result = setStartOrEndDate({ date, startDate, endDate });
     expect(result).toEqual({
-      startDate: new Date('2024-03-10'),
-      endDate: new Date('2024-03-20'),
+      startDate: today,
+      endDate: today,
     });
   });
 
-  // Test case 8: Extending range after end date
-  it('should extend range when clicking after end date', () => {
-    const date = new Date('2024-03-25');
-    const startDate = new Date('2024-03-15');
-    const endDate = new Date('2024-03-20');
+  it('should set same date for both start and end when clicking end date', () => {
+    const result = setStartOrEndDate({
+      date: tomorrow,
+      startDate: today,
+      endDate: tomorrow,
+    });
 
-    const result = setStartOrEndDate({ date, startDate, endDate });
     expect(result).toEqual({
-      startDate: new Date('2024-03-15'),
-      endDate: new Date('2024-03-25'),
+      startDate: tomorrow,
+      endDate: tomorrow,
     });
   });
 });

package/src/components/Calendar/helpers.ts

@@ -54,15 +54,15 @@ export const setStartOrEndDate = ({
   startDate?: Date;
   endDate?: Date;
 }) => {
-  // Prevent selecting same date when both dates are set
+  // If both dates are set, selecting start or end date will set the same date
   if (
     startDate &&
     endDate &&
     (isEqDate(date, startDate) || isEqDate(date, endDate))
   ) {
     return {
-      startDate,
-      endDate,
+      startDate: date,
+      endDate: date,
     };
   }
 
@@ -95,14 +95,9 @@ export const setStartOrEndDate = ({
     };
   }
 
-  // Clicking outside range - extend range
-  return date < startDate
-    ? {
-        startDate: date,
-        endDate,
-      }
-    : {
-        startDate,
-        endDate: date,
-      };
+  // Clicking outside range - reset range
+  return {
+    startDate: date,
+    endDate: undefined,
+  };
 };

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

@@ -730,7 +730,9 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                   {
                     "color": "#ffffff",
                     "flexShrink": 1,
+                    "lineHeight": undefined,
                     "textAlign": "center",
+                    "textAlignVertical": "center",
                   },
                   undefined,
                 ],
@@ -1725,7 +1727,9 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                   {
                     "color": "#ffffff",
                     "flexShrink": 1,
+                    "lineHeight": undefined,
                     "textAlign": "center",
+                    "textAlignVertical": "center",
                   },
                   undefined,
                 ],
@@ -2001,7 +2005,9 @@ exports[`Carousel should render correctly when image is undefined 1`] = `
                   {
                     "color": "#ffffff",
                     "flexShrink": 1,
+                    "lineHeight": undefined,
                     "textAlign": "center",
+                    "textAlignVertical": "center",
                   },
                   undefined,
                 ],

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -634,6 +634,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                                   "flexShrink": 1,
                                   "lineHeight": 22,
                                   "textAlign": "center",
+                                  "textAlignVertical": "center",
                                 },
                                 undefined,
                               ],
@@ -1316,6 +1317,7 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
                                   "flexShrink": 1,
                                   "lineHeight": 22,
                                   "textAlign": "center",
+                                  "textAlignVertical": "center",
                                 },
                                 undefined,
                               ],

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,"globe":59104,"graduation-cap":59105,"graph":59106,"happy-sun":59107,"health-bag":59108,"heart":59109,"hero-points":59110,"home":59111,"image":59112,"import":59113,"incident-siren":59114,"instapay-daily":59115,"instapay-now":59116,"instapay":59117,"list":59118,"loading-2":59119,"loading":59120,"location-on":59121,"location":59122,"lock":59123,"looks-one":59124,"looks-two":59125,"media-content":59126,"menu":59127,"money-notes":59128,"moneybag":59129,"moon":59130,"multiple-stars":59131,"multiple-users":59132,"near-me":59133,"node":59134,"open-folder":59135,"paperclip-vertical":59136,"paperclip":59137,"payment-summary":59138,"pencil":59139,"phone":59140,"piggy-bank":59141,"plane-up":59142,"plane":59143,"play-arrow":59144,"play-circle":59145,"print":59146,"raising-hands":59147,"reply-arrow":59148,"reply":59149,"reschedule":59150,"rostering":59151,"salary-sacrifice":59152,"save":59153,"schedule-send":59154,"schedule":59155,"search-person":59156,"search":59157,"send":59158,"speaker-active":59159,"speaker":59160,"star-award":59161,"star-badge":59162,"star-circle":59163,"star-medal":59164,"star":59165,"steps-circle":59166,"stopwatch":59167,"suitcase":59168,"surfing":59169,"survey":59170,"swag-pillar-benefit":59171,"swag-pillar-career":59172,"swag-pillar-money":59173,"swag-pillar-work":59174,"swag":59175,"swipe-right":59176,"switch":59177,"tag":59178,"target":59179,"teams":59180,"thumb-down":59181,"timesheet":59182,"touch-id":59183,"trash-bin":59184,"unlock":59185,"user":59186,"video-1":59187,"video-2":59188,"wallet":59189,"warning":59190,"accommodation-outlined":59191,"activate-outlined":59192,"add-credit-card-outlined":59193,"add-person-outlined":59194,"add-section-outlined":59195,"add-time-outlined":59196,"add":59197,"adjustment-outlined":59198,"afternoon-outlined":59199,"ai-outlined":59200,"alignment-2-outlined":59201,"alignment-outlined":59202,"all-caps":59203,"application-outlined":59204,"arrow-down":59205,"arrow-downwards":59206,"arrow-left":59207,"arrow-leftwards":59208,"arrow-right":59209,"arrow-rightwards":59210,"arrow-up":59211,"arrow-upwards":59212,"article-outlined":59213,"at-sign":59214,"auto-graph-outlined":59215,"automotive-outlined":59216,"bakery-outlined":59217,"bar-outlined":59218,"beauty-outlined":59219,"beer-outlined":59220,"bell-active-outlined":59221,"bell-outlined":59222,"bell-slash-outlined":59223,"bill-management-outlined":59224,"billing-outlined":59225,"body-outlined":59226,"bold":59227,"bolt-outlined":59228,"book-outlined":59229,"bookmark-added-outlined":59230,"bookmark-checked-outlined":59231,"bookmark-outlined":59232,"box-1-outlined":59233,"box-check-outlined":59234,"box-outlined":59235,"bullet-points":59236,"cake-outlined":59237,"calendar-dates-outlined":59238,"calendar-star-outlined":59239,"call-outlined":59240,"call-split-outlined":59241,"camera-outlined":59242,"cancel":59243,"car-forward-outlined":59244,"cashback-outlined":59245,"charging-station-outlined":59246,"chat-bubble-outlined":59247,"chat-unread-outlined":59248,"checkmark":59249,"circle-add-outlined":59250,"circle-cancel-outlined":59251,"circle-down-outlined":59252,"circle-info-outlined":59253,"circle-left-outlined":59254,"circle-ok-outlined":59255,"circle-question-outlined":59256,"circle-remove-outlined":59257,"circle-right-outlined":59258,"circle-up-outlined":59259,"circle-warning-outlined":59260,"clock-2-outlined":59261,"clock-in-outlined":59262,"clock-out-outlined":59263,"clock-outlined":59264,"cog-outlined":59265,"coin-outlined":59266,"coin-super-outlined":59267,"comment-outlined":59268,"contacts-outlined":59269,"contacts-user-outlined":59270,"credit-card-outlined":59271,"cultural-site-outlined":59272,"cup-outlined":59273,"dentistry-outlined":59274,"direction-arrows-outlined":59275,"directory-outlined":59276,"document-outlined":59277,"dollar-box-outlined":59278,"dollar-card-outlined":59279,"dollar-coin-shine-outlined":59280,"dollar-credit-card-outlined":59281,"dollar-sign":59282,"double-buildings-outlined":59283,"double-left-arrows":59284,"double-right-arrows":59285,"download-box-outlined":59286,"download-outlined":59287,"edit-template-outlined":59288,"electronics-outlined":59289,"email-outlined":59290,"end-break-outlined":59291,"enter-arrow":59292,"entertainment-outlined":59293,"envelope-outlined":59294,"evening-outlined":59295,"expense-approval-outlined":59296,"expense-outlined":59297,"explore-outlined":59298,"extension-outlined":59299,"external-link":59300,"eye-invisible-outlined":59301,"eye-outlined":59302,"face-id":59303,"face-meh-outlined":59304,"face-open-smiley-outlined":59305,"face-sad-outlined":59306,"face-smiley-outlined":59307,"fastfood-outlined":59308,"feed-outlined":59309,"file-certified-outlined":59310,"file-clone-outlined":59311,"file-copy-outlined":59312,"file-dispose-outlined":59313,"file-dollar-certified-outlined":59314,"file-dollar-outlined":59315,"file-download-outlined":59316,"file-export-outlined":59317,"file-lock-outlined":59318,"file-outlined":59319,"file-search-outlined":59320,"file-secured-outlined":59321,"file-statutory-outlined":59322,"file-verified-outlined":59323,"filter-outlined":59324,"fitness-outlined":59325,"folder-outlined":59326,"folder-upload-outlined":59327,"folder-user-outlined":59328,"form-outlined":59329,"funnel-filter-outline":59330,"goal-outlined":59331,"graph-outlined":59332,"grocery-outlined":59333,"hand-holding-user-outlined":59334,"handshake-outlined":59335,"happy-sun-outlined":59336,"health-bag-outlined":59337,"heart-outlined":59338,"home-active-outlined":59339,"home-outlined":59340,"id-card-outlined":59341,"image-outlined":59342,"import-outlined":59343,"instapay-outlined":59344,"italic":59345,"job-search-outlined":59346,"leave-approval-outlined":59347,"link-1":59348,"link-2":59349,"list-outlined":59350,"live-help-outlined":59351,"local_mall_outlined":59352,"location-on-outlined":59353,"location-outlined":59354,"lock-outlined":59355,"locked-file-outlined":59356,"log-out":59357,"mail-outlined":59358,"map-outlined":59359,"media-content-outlined":59360,"menu-close":59361,"menu-expand":59362,"menu-fold-outlined":59363,"menu-unfold-outlined":59364,"moneybag-outlined":59365,"moon-outlined":59366,"more-horizontal":59367,"more-vertical":59368,"morning-outlined":59369,"multiple-folders-outlined":59370,"multiple-users-outlined":59371,"near-me-outlined":59372,"node-outlined":59373,"number-points":59374,"number":59375,"overview-outlined":59376,"park-outlined":59377,"payment-summary-outlined":59378,"payslip-outlined":59379,"pencil-outlined":59380,"percentage":59381,"phone-outlined":59382,"piggy-bank-outlined":59383,"plane-outlined":59384,"play-circle-outlined":59385,"print-outlined":59386,"propane-tank-outlined":59387,"qr-code-outlined":59388,"qualification-outlined":59389,"re-assign":59390,"redeem":59391,"refresh":59392,"remove":59393,"reply-outlined":59394,"restart":59395,"restaurant-outlined":59396,"resume-outlined":59397,"return-arrow":59398,"rostering-outlined":59399,"safety-outlined":59400,"save-outlined":59401,"schedule-outlined":59402,"search-outlined":59403,"search-secured-outlined":59404,"send-outlined":59405,"share-1":59406,"share-2":59407,"share-outlined-2":59408,"share-outlined":59409,"shop-outlined":59410,"shopping_basket_outlined":59411,"show-chart-outlined":59412,"single-down-arrow":59413,"single-left-arrow":59414,"single-right-arrow":59415,"single-up-arrow":59416,"smart-match-outlined":59417,"sparkle-outlined":59418,"speaker-active-outlined":59419,"speaker-outlined":59420,"star-circle-outlined":59421,"star-outlined":59422,"start-break-outlined":59423,"stash-outlined":59424,"stopwatch-outlined":59425,"strikethrough":59426,"styler-outlined":59427,"suitcase-clock-outlined":59428,"suitcase-outlined":59429,"survey-outlined":59430,"switch-outlined":59431,"sync":59432,"tag-outlined":59433,"target-outlined":59434,"tennis-outlined":59435,"thumb-down-outlined":59436,"ticket-outlined":59437,"timesheet-outlined":59438,"timesheets-outlined":59439,"today-outlined":59440,"transfer":59441,"transportation-outlined":59442,"trash-bin-outlined":59443,"umbrela-outlined":59444,"unavailability-outlined":59445,"unavailable":59446,"underline":59447,"union-outlined":59448,"unlock-outlined":59449,"upload-outlined":59450,"user-circle-outlined":59451,"user-gear-outlined":59452,"user-outlined":59453,"user-rectangle-outlined":59454,"video-1-outlined":59455,"video-2-outlined":59456,"volunteer-outlined":59457,"wallet-outlined":59458,"wellness-outlined":59459}
+{"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,"globe":59104,"graduation-cap":59105,"graph":59106,"happy-sun":59107,"health-bag":59108,"heart":59109,"hero-points":59110,"home":59111,"image":59112,"import":59113,"incident-siren":59114,"instapay-daily":59115,"instapay-now":59116,"instapay":59117,"list":59118,"loading-2":59119,"loading":59120,"location-on":59121,"location":59122,"lock":59123,"looks-one":59124,"looks-two":59125,"media-content":59126,"menu":59127,"money-notes":59128,"moneybag":59129,"moon":59130,"multiple-stars":59131,"multiple-users":59132,"near-me":59133,"node":59134,"open-folder":59135,"paperclip-vertical":59136,"paperclip":59137,"payment-summary":59138,"pencil":59139,"phone":59140,"piggy-bank":59141,"plane-up":59142,"plane":59143,"play-arrow":59144,"play-circle":59145,"print":59146,"raising-hands":59147,"reply-arrow":59148,"reply":59149,"reschedule":59150,"rostering":59151,"salary-sacrifice":59152,"save":59153,"schedule-send":59154,"schedule":59155,"search-person":59156,"search":59157,"send":59158,"speaker-active":59159,"speaker":59160,"star-award":59161,"star-badge":59162,"star-circle":59163,"star-medal":59164,"star":59165,"steps-circle":59166,"stopwatch":59167,"suitcase":59168,"surfing":59169,"survey":59170,"swag-pillar-benefit":59171,"swag-pillar-career":59172,"swag-pillar-money":59173,"swag-pillar-work":59174,"swag":59175,"swipe-right":59176,"switch":59177,"tag":59178,"target":59179,"teams":59180,"thumb-down":59181,"timesheet":59182,"touch-id":59183,"trash-bin":59184,"unlock":59185,"user":59186,"video-1":59187,"video-2":59188,"wallet":59189,"warning":59190,"accommodation-outlined":59191,"activate-outlined":59192,"add-credit-card-outlined":59193,"add-person-outlined":59194,"add-section-outlined":59195,"add-time-outlined":59196,"add":59197,"adjustment-outlined":59198,"afternoon-outlined":59199,"ai-outlined":59200,"alignment-2-outlined":59201,"alignment-outlined":59202,"all-caps":59203,"application-outlined":59204,"arrow-down":59205,"arrow-downwards":59206,"arrow-left":59207,"arrow-leftwards":59208,"arrow-right":59209,"arrow-rightwards":59210,"arrow-up":59211,"arrow-upwards":59212,"article-outlined":59213,"at-sign":59214,"auto-graph-outlined":59215,"automotive-outlined":59216,"bakery-outlined":59217,"bar-outlined":59218,"beauty-outlined":59219,"beer-outlined":59220,"bell-active-outlined":59221,"bell-outlined":59222,"bell-slash-outlined":59223,"bill-management-outlined":59224,"billing-outlined":59225,"body-outlined":59226,"bold":59227,"bolt-outlined":59228,"book-outlined":59229,"bookmark-added-outlined":59230,"bookmark-checked-outlined":59231,"bookmark-outlined":59232,"box-1-outlined":59233,"box-check-outlined":59234,"box-outlined":59235,"bullet-points":59236,"cake-outlined":59237,"calculator-outlined":59238,"calendar-dates-outlined":59239,"calendar-star-outlined":59240,"call-outlined":59241,"call-split-outlined":59242,"camera-outlined":59243,"cancel":59244,"car-forward-outlined":59245,"cashback-outlined":59246,"charging-station-outlined":59247,"chat-bubble-outlined":59248,"chat-unread-outlined":59249,"checkmark":59250,"circle-add-outlined":59251,"circle-cancel-outlined":59252,"circle-down-outlined":59253,"circle-info-outlined":59254,"circle-left-outlined":59255,"circle-ok-outlined":59256,"circle-question-outlined":59257,"circle-remove-outlined":59258,"circle-right-outlined":59259,"circle-up-outlined":59260,"circle-warning-outlined":59261,"clock-2-outlined":59262,"clock-in-outlined":59263,"clock-out-outlined":59264,"clock-outlined":59265,"cog-outlined":59266,"coin-outlined":59267,"coin-super-outlined":59268,"comment-outlined":59269,"contacts-outlined":59270,"contacts-user-outlined":59271,"credit-card-outlined":59272,"cultural-site-outlined":59273,"cup-outlined":59274,"dentistry-outlined":59275,"direction-arrows-outlined":59276,"directory-outlined":59277,"document-outlined":59278,"dollar-box-outlined":59279,"dollar-card-outlined":59280,"dollar-coin-shine-outlined":59281,"dollar-credit-card-outlined":59282,"dollar-sign":59283,"double-buildings-outlined":59284,"double-left-arrows":59285,"double-right-arrows":59286,"download-box-outlined":59287,"download-outlined":59288,"edit-template-outlined":59289,"electronics-outlined":59290,"email-outlined":59291,"end-break-outlined":59292,"enter-arrow":59293,"entertainment-outlined":59294,"envelope-outlined":59295,"evening-outlined":59296,"expense-approval-outlined":59297,"expense-outlined":59298,"explore-outlined":59299,"extension-outlined":59300,"external-link":59301,"eye-invisible-outlined":59302,"eye-outlined":59303,"face-id":59304,"face-meh-outlined":59305,"face-open-smiley-outlined":59306,"face-sad-outlined":59307,"face-smiley-outlined":59308,"fastfood-outlined":59309,"feed-outlined":59310,"file-certified-outlined":59311,"file-clone-outlined":59312,"file-copy-outlined":59313,"file-dispose-outlined":59314,"file-dollar-certified-outlined":59315,"file-dollar-outlined":59316,"file-download-outlined":59317,"file-export-outlined":59318,"file-lock-outlined":59319,"file-outlined":59320,"file-search-outlined":59321,"file-secured-outlined":59322,"file-statutory-outlined":59323,"file-verified-outlined":59324,"filter-outlined":59325,"fitness-outlined":59326,"folder-outlined":59327,"folder-upload-outlined":59328,"folder-user-outlined":59329,"form-outlined":59330,"funnel-filter-outline":59331,"goal-outlined":59332,"graph-outlined":59333,"grocery-outlined":59334,"hand-holding-user-outlined":59335,"handshake-outlined":59336,"happy-sun-outlined":59337,"health-bag-outlined":59338,"heart-outlined":59339,"home-active-outlined":59340,"home-outlined":59341,"id-card-outlined":59342,"image-outlined":59343,"import-outlined":59344,"instapay-outlined":59345,"italic":59346,"job-search-outlined":59347,"leave-approval-outlined":59348,"link-1":59349,"link-2":59350,"list-outlined":59351,"live-help-outlined":59352,"local_mall_outlined":59353,"location-on-outlined":59354,"location-outlined":59355,"lock-outlined":59356,"locked-file-outlined":59357,"log-out":59358,"mail-outlined":59359,"map-outlined":59360,"media-content-outlined":59361,"menu-close":59362,"menu-expand":59363,"menu-fold-outlined":59364,"menu-unfold-outlined":59365,"moneybag-outlined":59366,"moon-outlined":59367,"more-horizontal":59368,"more-vertical":59369,"morning-outlined":59370,"multiple-folders-outlined":59371,"multiple-users-outlined":59372,"near-me-outlined":59373,"node-outlined":59374,"number-points":59375,"number":59376,"overview-outlined":59377,"park-outlined":59378,"payment-summary-outlined":59379,"payslip-outlined":59380,"pencil-outlined":59381,"percentage":59382,"phone-outlined":59383,"piggy-bank-outlined":59384,"plane-outlined":59385,"play-circle-outlined":59386,"print-outlined":59387,"propane-tank-outlined":59388,"qr-code-outlined":59389,"qualification-outlined":59390,"re-assign":59391,"redeem":59392,"refresh":59393,"remove":59394,"reply-outlined":59395,"restart":59396,"restaurant-outlined":59397,"resume-outlined":59398,"return-arrow":59399,"rostering-outlined":59400,"safety-outlined":59401,"save-outlined":59402,"schedule-outlined":59403,"search-outlined":59404,"search-secured-outlined":59405,"send-outlined":59406,"share-1":59407,"share-2":59408,"share-outlined-2":59409,"share-outlined":59410,"shop-outlined":59411,"shopping_basket_outlined":59412,"show-chart-outlined":59413,"single-down-arrow":59414,"single-left-arrow":59415,"single-right-arrow":59416,"single-up-arrow":59417,"smart-match-outlined":59418,"sparkle-outlined":59419,"speaker-active-outlined":59420,"speaker-outlined":59421,"star-circle-outlined":59422,"star-outlined":59423,"start-break-outlined":59424,"stash-outlined":59425,"stopwatch-outlined":59426,"strikethrough":59427,"styler-outlined":59428,"suitcase-clock-outlined":59429,"suitcase-outlined":59430,"survey-outlined":59431,"switch-outlined":59432,"sync":59433,"tag-outlined":59434,"target-outlined":59435,"tennis-outlined":59436,"thumb-down-outlined":59437,"ticket-outlined":59438,"timesheet-outlined":59439,"timesheets-outlined":59440,"today-outlined":59441,"transfer":59442,"transportation-outlined":59443,"trash-bin-outlined":59444,"umbrela-outlined":59445,"unavailability-outlined":59446,"unavailable":59447,"underline":59448,"union-outlined":59449,"unlock-outlined":59450,"upload-outlined":59451,"user-circle-outlined":59452,"user-gear-outlined":59453,"user-outlined":59454,"user-rectangle-outlined":59455,"video-1-outlined":59456,"video-2-outlined":59457,"volunteer-outlined":59458,"wallet-outlined":59459,"wellness-outlined":59460}

package/src/components/Icon/IconList.ts

@@ -238,6 +238,7 @@ const IconList = [
   'box-outlined',
   'bullet-points',
   'cake-outlined',
+  'calculator-outlined',
   'calendar-dates-outlined',
   'calendar-star-outlined',
   'call-outlined',

package/src/components/MapPin/StyledMapPin.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/native';
 import { View } from 'react-native';
 import Icon from '../Icon';
+import { hexToRgba } from '../../utils/helpers';
 
 type State = 'idle' | 'selected' | 'applied';
 
@@ -60,15 +61,6 @@ export const StyledBadgeIcon = styled(Icon)(({ theme }) => ({
   color: theme.__hd__.mapPin.colors.badgeIcon,
 }));
 
-function hexToRgba(hex: string, a: number) {
-  const arrBuff = new ArrayBuffer(4);
-  const vw = new DataView(arrBuff);
-  vw.setUint32(0, parseInt(hex, 16), false);
-  const arrByte = new Uint8Array(arrBuff);
-  const [r, g, b] = arrByte;
-  return `rgba(${r},${g},${b},${a})`;
-}
-
 export const StyledFocusIcon = styled(Icon)(({ theme }) => ({
   fontSize: theme.__hd__.mapPin.fontSizes.icon,
   textShadowColor: hexToRgba(

package/src/components/Progress/ProgressCircle.tsx

@@ -1,17 +1,12 @@
 import { useTheme } from '@emotion/react';
 import React, { useEffect, useRef } from 'react';
-import { Animated, View, StyleSheet } from 'react-native';
+import { Animated, Easing, View } from 'react-native';
+import Svg, { Circle, G } from 'react-native-svg';
 import type { ViewProps, StyleProp, ViewStyle } from 'react-native';
-import {
-  StyledContainer,
-  StyledDonutCircle,
-  StyledHalfCircleInnerFG,
-  StyledHalfCircleInnerBG,
-  StyledHalfCircleWrapper,
-  StyledStrokeEnd,
-} from './StyledProgressCircle';
+import { StyledContainer, StyledDonutCircle } from './StyledProgressCircle';
 import Typography from '../Typography';
-import type { ThemeIntent } from './types';
+import { THEME_INTENT_MAP } from './constants';
+import { hexToRgba } from '../../utils/helpers';
 
 export interface ProgressCircleProps extends ViewProps {
   /**
@@ -48,23 +43,8 @@ export interface ProgressCircleProps extends ViewProps {
   testID?: string;
 }
 
-const HalfCircle = ({
-  type,
-  themeIntent,
-}: {
-  type: 'background' | 'foreground';
-  themeIntent: ThemeIntent;
-}) => (
-  <StyledHalfCircleWrapper>
-    {type === 'background' ? (
-      <StyledHalfCircleInnerBG themeIntent={themeIntent} />
-    ) : (
-      <StyledHalfCircleInnerFG themeIntent={themeIntent} />
-    )}
-  </StyledHalfCircleWrapper>
-);
-
 const defaultRenderValue = (value: number) => `${value}%`;
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
 const ProgressCircle = ({
   value,
@@ -75,101 +55,65 @@ const ProgressCircle = ({
   ...nativeProps
 }: ProgressCircleProps): JSX.Element => {
   const theme = useTheme();
-  const radius = theme.__hd__.progress.sizes.circleDiameter / 2;
-  const progressAnimatedValue = useRef<Animated.Value>(new Animated.Value(0));
+  const size = theme.__hd__.progress.sizes.circleDiameter;
+  const strokeWidth = theme.__hd__.progress.sizes.circleCompletenessHeight;
+  const radius = size / 2 - strokeWidth;
+  const circumference = 2 * Math.PI * radius;
+
+  const progressAnimatedValue = useRef(new Animated.Value(0)).current;
+  const minArc = strokeWidth / 2 / Math.PI; // Minimum arc length
 
   useEffect(() => {
-    const animation = Animated.timing(progressAnimatedValue.current, {
+    Animated.timing(progressAnimatedValue, {
       toValue: value,
       useNativeDriver: true,
-    });
-
-    animation.start();
-
-    return () => animation.stop();
+      easing: Easing.inOut(Easing.ease),
+    }).start();
   }, [value]);
 
-  // Animate progress circle: 0% => 50%
-  const interpolateRotateRightHalf = progressAnimatedValue.current.interpolate({
-    inputRange: [0, 50],
-    outputRange: ['0deg', '180deg'],
-    extrapolate: 'clamp',
-  });
-
-  const interpolateOpacityRightHalf = progressAnimatedValue.current.interpolate(
-    {
-      inputRange: [50, 51], // Transition between left and right half
-      outputRange: [1, 0],
-      extrapolate: 'clamp',
-    }
-  );
-
-  // Animate progress circle: 50% => 100%
-  const interpolateRotateSecondHalf = progressAnimatedValue.current.interpolate(
-    {
-      inputRange: [50, 100],
-      outputRange: ['0deg', '180deg'],
-      extrapolate: 'clamp',
-    }
-  );
-
-  // Curve at the end of progress stroke
-  const interpolateDotRotate = progressAnimatedValue.current.interpolate({
+  const strokeDashoffset = progressAnimatedValue.interpolate({
     inputRange: [0, 100],
-    outputRange: ['0deg', '360deg'],
-    extrapolate: 'clamp',
+    outputRange: [circumference - minArc, 0], // Full circle to zero offset
   });
 
   return (
     <View {...nativeProps} testID={testID} style={style}>
       <StyledContainer>
-        <View>
-          <HalfCircle type="foreground" themeIntent={intent} />
-          <Animated.View
-            style={{
-              ...StyleSheet.absoluteFillObject,
-              transform: [
-                { translateX: radius / 2 },
-                { rotate: interpolateRotateSecondHalf },
-                { translateX: -radius / 2 },
-              ],
-            }}
-          >
-            <HalfCircle type="background" themeIntent={intent} />
-          </Animated.View>
-        </View>
-        <View
-          style={{
-            transform: [{ rotate: '180deg' }],
-            zIndex: 1,
-            marginLeft: -0.1,
-          }}
-        >
-          <HalfCircle type="foreground" themeIntent={intent} />
-          <Animated.View
-            style={{
-              ...StyleSheet.absoluteFillObject,
-              transform: [
-                { translateX: radius / 2 },
-                { rotate: interpolateRotateRightHalf },
-                { translateX: -radius / 2 },
-              ],
-              opacity: interpolateOpacityRightHalf,
-            }}
-          >
-            <HalfCircle type="background" themeIntent={intent} />
-          </Animated.View>
-        </View>
-        <StyledStrokeEnd themeIntent={intent} />
-        <Animated.View
-          style={{
-            ...StyleSheet.absoluteFillObject,
-            zIndex: 2,
-            transform: [{ rotate: interpolateDotRotate }],
-          }}
-        >
-          <StyledStrokeEnd themeIntent={intent} />
-        </Animated.View>
+        <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          {/* rotation -90 in order to move start point from 3 o'clock to 12 o'clock */}
+          <G rotation="-90" origin={`${size / 2}, ${size / 2}`}>
+            {/* Background Circle */}
+            <Circle
+              cx={size / 2}
+              cy={size / 2}
+              r={radius}
+              stroke={hexToRgba(
+                theme.__hd__.progress.colors.incompleteness[
+                  THEME_INTENT_MAP[intent]
+                ],
+                0.1
+              )}
+              strokeWidth={strokeWidth}
+              fill="transparent"
+            />
+            {/* Progress Circle */}
+            <AnimatedCircle
+              cx={size / 2}
+              cy={size / 2}
+              r={radius}
+              stroke={
+                theme.__hd__.progress.colors.completeness[
+                  THEME_INTENT_MAP[intent]
+                ]
+              }
+              strokeWidth={strokeWidth}
+              fill="transparent"
+              strokeDasharray={circumference}
+              strokeDashoffset={strokeDashoffset}
+              strokeLinecap="round"
+            />
+          </G>
+        </Svg>
         <StyledDonutCircle>
           <Typography.Body>{renderValue(value)}</Typography.Body>
         </StyledDonutCircle>

package/src/components/Progress/StyledProgressBar.tsx

@@ -3,15 +3,18 @@ import styled from '@emotion/native';
 import type { ViewProps } from 'react-native';
 import type { ThemeIntent } from './types';
 import { THEME_INTENT_MAP } from './constants';
+import { hexToRgba } from '../../utils/helpers';
 
 const StyledWrapper = styled(View)<ViewProps & { themeIntent: ThemeIntent }>(
   ({ theme, themeIntent }) => ({
     height: theme.__hd__.progress.sizes.barHeight,
     alignSelf: 'stretch',
-    backgroundColor:
+    backgroundColor: hexToRgba(
       theme.__hd__.progress.colors.incompleteness[
         THEME_INTENT_MAP[themeIntent]
       ],
+      0.1
+    ),
     overflow: 'hidden',
     borderRadius: theme.__hd__.progress.radii.default,
   })

package/src/components/Progress/StyledProgressCircle.tsx

@@ -1,44 +1,12 @@
 import { View } from 'react-native';
 import styled from '@emotion/native';
 import type { ViewProps } from 'react-native';
-import type { ThemeIntent } from './types';
-import { THEME_INTENT_MAP } from './constants';
 
 const StyledContainer = styled(View)<ViewProps>(({ theme }) => ({
   flexDirection: 'row',
   borderRadius: theme.__hd__.progress.radii.default,
 }));
 
-const StyledHalfCircleWrapper = styled(View)<ViewProps>(({ theme }) => ({
-  width: theme.__hd__.progress.sizes.circleDiameter / 2,
-  height: theme.__hd__.progress.sizes.circleDiameter,
-  overflow: 'hidden',
-}));
-
-const StyledHalfCircleInnerFG = styled(View)<{ themeIntent: ThemeIntent }>(
-  ({ theme, themeIntent }) => ({
-    width: theme.__hd__.progress.sizes.circleDiameter,
-    height: theme.__hd__.progress.sizes.circleDiameter,
-    borderRadius: theme.__hd__.progress.radii.default,
-    borderColor:
-      theme.__hd__.progress.colors.completeness[THEME_INTENT_MAP[themeIntent]],
-    borderWidth: theme.__hd__.progress.sizes.circleCompletenessHeight,
-  })
-);
-
-const StyledHalfCircleInnerBG = styled(View)<{ themeIntent: ThemeIntent }>(
-  ({ theme, themeIntent }) => ({
-    width: theme.__hd__.progress.sizes.circleDiameter,
-    height: theme.__hd__.progress.sizes.circleDiameter,
-    borderRadius: theme.__hd__.progress.radii.default,
-    borderWidth: theme.__hd__.progress.sizes.circleCompletenessHeight,
-    borderColor:
-      theme.__hd__.progress.colors.incompleteness[
-        THEME_INTENT_MAP[themeIntent]
-      ],
-  })
-);
-
 const StyledDonutCircle = styled(View)<ViewProps>(({ theme }) => ({
   position: 'absolute',
   top: theme.__hd__.progress.sizes.circleCompletenessHeight,
@@ -55,28 +23,4 @@ const StyledDonutCircle = styled(View)<ViewProps>(({ theme }) => ({
   justifyContent: 'center',
 }));
 
-const StyledStrokeEnd = styled(View)<{ themeIntent: ThemeIntent }>(
-  ({ theme, themeIntent }) => ({
-    position: 'absolute',
-    top: 0,
-    left:
-      (theme.__hd__.progress.sizes.circleDiameter -
-        theme.__hd__.progress.sizes.circleCompletenessHeight) /
-      2,
-    width: theme.__hd__.progress.sizes.circleCompletenessHeight,
-    height: theme.__hd__.progress.sizes.circleCompletenessHeight,
-    borderRadius: theme.__hd__.progress.radii.default,
-    backgroundColor:
-      theme.__hd__.progress.colors.completeness[THEME_INTENT_MAP[themeIntent]],
-    zIndex: 2,
-  })
-);
-
-export {
-  StyledContainer,
-  StyledDonutCircle,
-  StyledHalfCircleWrapper,
-  StyledHalfCircleInnerFG,
-  StyledHalfCircleInnerBG,
-  StyledStrokeEnd,
-};
+export { StyledContainer, StyledDonutCircle };