npm - @hero-design/rn - Versions diffs - 8.75.0 → 8.76.1-alpha.0 - Mend

@hero-design/rn 8.75.0 → 8.76.1-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (359) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.75.0",
+  "version": "8.76.1-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,7 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.45.1",
+    "@hero-design/colors": "8.45.2-alpha.0",
     "date-fns": "^2.16.1",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"

package/src/components/AnimatedScroller/__tests__/__snapshots__/ScrollablesWithFAB.spec.tsx.snap CHANGED Viewed

@@ -772,6 +772,15 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
       style={{}}
     >
       <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
         accessibilityValue={
           {
             "max": undefined,
@@ -781,6 +790,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
           }
         }
         accessible={true}
+        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onLayout={[Function]}
@@ -794,7 +804,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
           {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
+            "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
             "elevation": 3,
@@ -803,6 +813,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
             "justifyContent": "center",
             "marginRight": 24,
             "marginTop": 24,
+            "opacity": 1,
             "padding": 20,
             "shadowColor": "#001f23",
             "shadowOffset": {
@@ -855,7 +866,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
                   },
                   [
                     {
-                      "color": "#ffffff",
+                      "color": "#FDFBFF",
                       "lineHeight": 24,
                       "textAlign": "center",
                       "textAlignVertical": "center",
@@ -882,7 +893,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
                 },
                 [
                   {
-                    "color": "#ffffff",
+                    "color": "#FDFBFF",
                     "marginHorizontal": 8,
                     "textAlign": "center",
                     "textAlignVertical": "center",
@@ -1675,6 +1686,15 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
     </View>
   </RCTScrollView>
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
     accessibilityValue={
       {
         "max": undefined,
@@ -1684,6 +1704,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
       }
     }
     accessible={true}
+    collapsable={false}
     focusable={false}
     onClick={[Function]}
     onLayout={[Function]}
@@ -1697,13 +1718,14 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#401960",
+        "backgroundColor": "#000000",
         "borderRadius": 999,
         "bottom": undefined,
         "elevation": 3,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
+        "opacity": 1,
         "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": {
@@ -1755,7 +1777,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
               },
               [
                 {
-                  "color": "#ffffff",
+                  "color": "#FDFBFF",
                   "lineHeight": 24,
                   "textAlign": "center",
                   "textAlignVertical": "center",
@@ -1782,7 +1804,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
             },
             [
               {
-                "color": "#ffffff",
+                "color": "#FDFBFF",
                 "marginHorizontal": 8,
                 "textAlign": "center",
                 "textAlignVertical": "center",
@@ -1934,6 +1956,15 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
       style={{}}
     >
       <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
         accessibilityValue={
           {
             "max": undefined,
@@ -1943,6 +1974,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
           }
         }
         accessible={true}
+        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onLayout={[Function]}
@@ -1956,7 +1988,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
           {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
+            "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
             "elevation": 3,
@@ -1965,6 +1997,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
             "justifyContent": "center",
             "marginRight": 24,
             "marginTop": 24,
+            "opacity": 1,
             "padding": 20,
             "shadowColor": "#001f23",
             "shadowOffset": {
@@ -2017,7 +2050,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
                   },
                   [
                     {
-                      "color": "#ffffff",
+                      "color": "#FDFBFF",
                       "lineHeight": 24,
                       "textAlign": "center",
                       "textAlignVertical": "center",
@@ -2044,7 +2077,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
                 },
                 [
                   {
-                    "color": "#ffffff",
+                    "color": "#FDFBFF",
                     "marginHorizontal": 8,
                     "textAlign": "center",
                     "textAlignVertical": "center",
@@ -2177,6 +2210,15 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
     </View>
   </RCTScrollView>
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
     accessibilityValue={
       {
         "max": undefined,
@@ -2186,6 +2228,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
       }
     }
     accessible={true}
+    collapsable={false}
     focusable={false}
     onClick={[Function]}
     onLayout={[Function]}
@@ -2199,13 +2242,14 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#401960",
+        "backgroundColor": "#000000",
         "borderRadius": 999,
         "bottom": undefined,
         "elevation": 3,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
+        "opacity": 1,
         "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": {
@@ -2257,7 +2301,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
               },
               [
                 {
-                  "color": "#ffffff",
+                  "color": "#FDFBFF",
                   "lineHeight": 24,
                   "textAlign": "center",
                   "textAlignVertical": "center",
@@ -2284,7 +2328,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
             },
             [
               {
-                "color": "#ffffff",
+                "color": "#FDFBFF",
                 "marginHorizontal": 8,
                 "textAlign": "center",
                 "textAlignVertical": "center",
@@ -2743,6 +2787,15 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
       style={{}}
     >
       <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
         accessibilityValue={
           {
             "max": undefined,
@@ -2752,6 +2805,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
           }
         }
         accessible={true}
+        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onLayout={[Function]}
@@ -2765,7 +2819,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
           {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
+            "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
             "elevation": 3,
@@ -2774,6 +2828,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
             "justifyContent": "center",
             "marginRight": 24,
             "marginTop": 24,
+            "opacity": 1,
             "padding": 20,
             "shadowColor": "#001f23",
             "shadowOffset": {
@@ -2826,7 +2881,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
                   },
                   [
                     {
-                      "color": "#ffffff",
+                      "color": "#FDFBFF",
                       "lineHeight": 24,
                       "textAlign": "center",
                       "textAlignVertical": "center",
@@ -2853,7 +2908,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
                 },
                 [
                   {
-                    "color": "#ffffff",
+                    "color": "#FDFBFF",
                     "marginHorizontal": 8,
                     "textAlign": "center",
                     "textAlignVertical": "center",
@@ -3293,6 +3348,15 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
     </View>
   </RCTScrollView>
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
     accessibilityValue={
       {
         "max": undefined,
@@ -3302,6 +3366,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
       }
     }
     accessible={true}
+    collapsable={false}
     focusable={false}
     onClick={[Function]}
     onLayout={[Function]}
@@ -3315,13 +3380,14 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#401960",
+        "backgroundColor": "#000000",
         "borderRadius": 999,
         "bottom": undefined,
         "elevation": 3,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
+        "opacity": 1,
         "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": {
@@ -3373,7 +3439,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
               },
               [
                 {
-                  "color": "#ffffff",
+                  "color": "#FDFBFF",
                   "lineHeight": 24,
                   "textAlign": "center",
                   "textAlignVertical": "center",
@@ -3400,7 +3466,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
             },
             [
               {
-                "color": "#ffffff",
+                "color": "#FDFBFF",
                 "marginHorizontal": 8,
                 "textAlign": "center",
                 "textAlignVertical": "center",

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/StyledAvatarStack.spec.tsx.snap CHANGED Viewed

@@ -38,7 +38,7 @@ exports[`StyledAvatar renders correctly with $variant 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#460078",
         "borderRadius": 999,
         "height": 40,
         "left": 56,
@@ -160,7 +160,7 @@ exports[`StyledAvatar renders correctly with $variant 2`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#460078",
         "borderRadius": 999,
         "height": 40,
         "left": undefined,

package/src/components/Avatar/__tests__/__snapshots__/StyledAvatar.spec.tsx.snap CHANGED Viewed

@@ -86,7 +86,7 @@ exports[`StyledPressable renders correct style 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#460078",
         "borderRadius": 999,
         "height": 32,
         "opacity": 1,

package/src/components/Avatar/__tests__/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -38,7 +38,7 @@ exports[`Avatar fallbacks to title when there image failed to load 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#460078",
         "borderRadius": 999,
         "height": 32,
         "opacity": 1,
@@ -177,7 +177,7 @@ exports[`Avatar prioritizes source over title 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#460078",
         "borderRadius": 999,
         "height": 32,
         "opacity": 1,
@@ -270,7 +270,7 @@ exports[`Avatar shows title when there is no source 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#460078",
         "borderRadius": 999,
         "height": 32,
         "opacity": 1,

package/src/components/BottomNavigation/__tests__/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -72,7 +72,7 @@ exports[`BottomNavigation renders correctly 1`] = `
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
-              "shadowColor": "#401960",
+              "shadowColor": "#460078",
               "shadowOffset": {
                 "height": 3,
                 "width": 0,
@@ -139,7 +139,7 @@ exports[`BottomNavigation renders correctly 1`] = `
               style={
                 [
                   {
-                    "color": "#401960",
+                    "color": "#460078",
                     "fontSize": 24,
                   },
                   undefined,
@@ -155,7 +155,7 @@ exports[`BottomNavigation renders correctly 1`] = `
               style={
                 [
                   {
-                    "color": "#401960",
+                    "color": "#460078",
                     "fontFamily": "BeVietnamPro-SemiBold",
                     "fontSize": 12,
                     "letterSpacing": 0.24,

package/src/components/BottomSheet/index.tsx CHANGED Viewed

@@ -145,6 +145,8 @@ const BottomSheet = ({
       onAnimationEnd?.();
     });
+    return () => animation.stop();
   }, [open]);
   const interpolateY = animatedValue.current.interpolate({

package/src/components/Calendar/__tests__/__snapshots__/CalendarRowItem.spec.tsx.snap CHANGED Viewed

@@ -90,7 +90,7 @@ exports[`CalendarRowItem renders correctly 1`] = `
         style={
           [
             {
-              "backgroundColor": "#401960",
+              "backgroundColor": "#460078",
               "borderRadius": 999,
               "bottom": "10%",
               "height": 4,
@@ -218,7 +218,7 @@ exports[`CalendarRowItem renders correctly 2`] = `
         style={
           [
             {
-              "backgroundColor": "#401960",
+              "backgroundColor": "#460078",
               "borderRadius": 999,
               "bottom": "10%",
               "height": 4,
@@ -310,7 +310,7 @@ exports[`CalendarRowItem renders correctly when is current date 1`] = `
       style={
         {
           "alignItems": "center",
-          "backgroundColor": "#401960",
+          "backgroundColor": "#460078",
           "borderColor": "#001f23",
           "borderRadius": 999,
           "borderWidth": 0,
@@ -437,7 +437,7 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
       style={
         {
           "alignItems": "center",
-          "backgroundColor": "#401960",
+          "backgroundColor": "#460078",
           "borderColor": "#001f23",
           "borderRadius": 999,
           "borderWidth": 0,
@@ -564,7 +564,7 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
       style={
         {
           "alignItems": "center",
-          "backgroundColor": "#401960",
+          "backgroundColor": "#460078",
           "borderColor": "#001f23",
           "borderRadius": 999,
           "borderWidth": 0,

package/src/components/Card/DataCard/__tests__/__snapshots__/StyledDataCard.spec.tsx.snap CHANGED Viewed

@@ -144,7 +144,7 @@ exports[`Indicator renders correctly when intent is primary 1`] = `
     style={
       [
         {
-          "backgroundColor": "#401960",
+          "backgroundColor": "#460078",
           "height": "100%",
           "width": 16,
         },

package/src/components/Card/__tests__/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -210,7 +210,7 @@ exports[`Card renders correctly when intent is primary 1`] = `
     style={
       [
         {
-          "backgroundColor": "#401960",
+          "backgroundColor": "#460078",
           "borderRadius": 12,
           "overflow": "hidden",
         },

package/src/components/Carousel/__tests__/__snapshots__/CardCarousel.spec.tsx.snap CHANGED Viewed

@@ -243,7 +243,7 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
         collapsable={false}
         style={
           {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#460078",
             "borderRadius": 999,
             "height": 8,
             "marginHorizontal": 8,
@@ -262,7 +262,7 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
         collapsable={false}
         style={
           {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#460078",
             "borderRadius": 999,
             "height": 8,
             "marginHorizontal": 8,
@@ -540,7 +540,7 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
         collapsable={false}
         style={
           {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#460078",
             "borderRadius": 999,
             "height": 8,
             "marginHorizontal": 8,
@@ -559,7 +559,7 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
         collapsable={false}
         style={
           {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#460078",
             "borderRadius": 999,
             "height": 8,
             "marginHorizontal": 8,

package/src/components/Carousel/__tests__/__snapshots__/StyledCardCarousel.spec.tsx.snap CHANGED Viewed

@@ -125,7 +125,7 @@ exports[`StyledPageControl should render correctly 1`] = `
       collapsable={false}
       style={
         {
-          "backgroundColor": "#401960",
+          "backgroundColor": "#460078",
           "borderRadius": 999,
           "height": 8,
           "marginHorizontal": 8,
@@ -144,7 +144,7 @@ exports[`StyledPageControl should render correctly 1`] = `
       collapsable={false}
       style={
         {
-          "backgroundColor": "#401960",
+          "backgroundColor": "#460078",
           "borderRadius": 999,
           "height": 8,
           "marginHorizontal": 8,
@@ -163,7 +163,7 @@ exports[`StyledPageControl should render correctly 1`] = `
       collapsable={false}
       style={
         {
-          "backgroundColor": "#401960",
+          "backgroundColor": "#460078",
           "borderRadius": 999,
           "height": 8,
           "marginHorizontal": 8,

package/src/components/Carousel/__tests__/__snapshots__/StyledCarousel.spec.tsx.snap CHANGED Viewed

@@ -12,7 +12,7 @@ exports[`StyledBackDrop renders correct basic style 1`] = `
     style={
       [
         {
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": "#f1e9fb",
           "bottom": 0,
           "left": 0,
           "position": "absolute",
@@ -22,7 +22,7 @@ exports[`StyledBackDrop renders correct basic style 1`] = `
         undefined,
       ]
     }
-    themeSlideBackground="#ece8ef"
+    themeSlideBackground="#f1e9fb"
   />
   <View
     pointerEvents="box-none"