@hero-design/rn 8.12.2 → 8.12.3

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 11fbf9e3773167e6
-@hero-design/rn:build: $ yarn build:js && yarn build:types
-@hero-design/rn:build: $ rollup -c
-@hero-design/rn:build: 
-@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
-@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 24.8s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output eea1c2ee08c7c3cf
+@hero-design/rn:build: $ yarn build:js && yarn build:types
+@hero-design/rn:build: $ rollup -c
+@hero-design/rn:build: 
+@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
+@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
+@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
+@hero-design/rn:build: created lib/index.js, es/index.js in 31.1s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -969,7 +969,7 @@ var blue$1 = colorScales.blue,
   purple$1 = colorScales.purple,
   vermilion$3 = colorScales.vermilion,
   smalt = colorScales.smalt,
-  violet$2 = colorScales.violet,
+  violet$1 = colorScales.violet,
   yellow$1 = colorScales.yellow;
 ({
   black: '#000000',
@@ -1042,16 +1042,16 @@ var blue$1 = colorScales.blue,
   smaltLight45: smalt.lighten45,
   smaltLight75: smalt.lighten75,
   smaltLight90: smalt.lighten90,
-  violet: violet$2.base,
-  violetDark15: violet$2.darken15,
-  violetDark30: violet$2.darken30,
-  violetDark45: violet$2.darken45,
-  violetDark60: violet$2.darken60,
-  violetDark75: violet$2.darken75,
-  violetLight30: violet$2.lighten30,
-  violetLight60: violet$2.lighten60,
-  violetLight75: violet$2.lighten75,
-  violetLight90: violet$2.lighten90,
+  violet: violet$1.base,
+  violetDark15: violet$1.darken15,
+  violetDark30: violet$1.darken30,
+  violetDark45: violet$1.darken45,
+  violetDark60: violet$1.darken60,
+  violetDark75: violet$1.darken75,
+  violetLight30: violet$1.lighten30,
+  violetLight60: violet$1.lighten60,
+  violetLight75: violet$1.lighten75,
+  violetLight90: violet$1.lighten90,
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
   yellowDark75: yellow$1.darken75,
@@ -1191,8 +1191,8 @@ var currant$1 = colorScales.currant,
   pastelRed = colorScales.pastelRed,
   vermilion = colorScales.vermilion,
   mauve$3 = colorScales.mauve,
-  violet1$2 = colorScales.violet1,
-  violet$1 = colorScales.violet,
+  violet1$3 = colorScales.violet1,
+  violet$2 = colorScales.violet,
   scarletGum$2 = colorScales.scarletGum;
 var palette$6 = {
   currant: currant$1.base,
@@ -1211,18 +1211,18 @@ var palette$6 = {
   pastelRed: pastelRed.base,
   vermilion: vermilion.base,
   mauve: mauve$3.base,
-  violetLight30: violet$1.lighten30,
-  violet1: violet1$2.base,
-  violet: violet$1.base,
+  violetLight30: violet$2.lighten30,
+  violet1: violet1$3.base,
+  violet: violet$2.base,
   scarletGum: scarletGum$2.base
 };
-var violet$3 = colorScales.violet,
+var violet1$2 = colorScales.violet1,
   mauve$2 = colorScales.mauve;
 var palette$5 = Object.assign(Object.assign({}, palette$8), {
-  violet: violet$3.base,
-  violetLight20: violet$3.lighten20,
-  violetLight30: violet$3.lighten30,
-  violetLight90: violet$3.lighten90,
+  violet: violet1$2.base,
+  violetLight20: violet1$2.lighten20,
+  violetLight30: violet1$2.lighten30,
+  violetLight90: violet1$2.lighten90,
   mauve: mauve$2.base,
   mauveLight80: mauve$2.lighten80
 });
@@ -2869,6 +2869,7 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     archived: theme.colors.onArchivedSurface
   };
   var fontSizes = {
+    xsmall: theme.fontSizes.xsmall,
     small: theme.fontSizes.small,
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
@@ -2880,6 +2881,7 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     '7xlarge': theme.fontSizes['7xlarge']
   };
   var lineHeights = {
+    xsmall: theme.lineHeights.xsmall,
     small: theme.lineHeights.small,
     medium: theme.lineHeights.medium,
     large: theme.lineHeights.large,

package/lib/index.js

@@ -998,7 +998,7 @@ var blue$1 = colorScales.blue,
   purple$1 = colorScales.purple,
   vermilion$3 = colorScales.vermilion,
   smalt = colorScales.smalt,
-  violet$2 = colorScales.violet,
+  violet$1 = colorScales.violet,
   yellow$1 = colorScales.yellow;
 ({
   black: '#000000',
@@ -1071,16 +1071,16 @@ var blue$1 = colorScales.blue,
   smaltLight45: smalt.lighten45,
   smaltLight75: smalt.lighten75,
   smaltLight90: smalt.lighten90,
-  violet: violet$2.base,
-  violetDark15: violet$2.darken15,
-  violetDark30: violet$2.darken30,
-  violetDark45: violet$2.darken45,
-  violetDark60: violet$2.darken60,
-  violetDark75: violet$2.darken75,
-  violetLight30: violet$2.lighten30,
-  violetLight60: violet$2.lighten60,
-  violetLight75: violet$2.lighten75,
-  violetLight90: violet$2.lighten90,
+  violet: violet$1.base,
+  violetDark15: violet$1.darken15,
+  violetDark30: violet$1.darken30,
+  violetDark45: violet$1.darken45,
+  violetDark60: violet$1.darken60,
+  violetDark75: violet$1.darken75,
+  violetLight30: violet$1.lighten30,
+  violetLight60: violet$1.lighten60,
+  violetLight75: violet$1.lighten75,
+  violetLight90: violet$1.lighten90,
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
   yellowDark75: yellow$1.darken75,
@@ -1220,8 +1220,8 @@ var currant$1 = colorScales.currant,
   pastelRed = colorScales.pastelRed,
   vermilion = colorScales.vermilion,
   mauve$3 = colorScales.mauve,
-  violet1$2 = colorScales.violet1,
-  violet$1 = colorScales.violet,
+  violet1$3 = colorScales.violet1,
+  violet$2 = colorScales.violet,
   scarletGum$2 = colorScales.scarletGum;
 var palette$6 = {
   currant: currant$1.base,
@@ -1240,18 +1240,18 @@ var palette$6 = {
   pastelRed: pastelRed.base,
   vermilion: vermilion.base,
   mauve: mauve$3.base,
-  violetLight30: violet$1.lighten30,
-  violet1: violet1$2.base,
-  violet: violet$1.base,
+  violetLight30: violet$2.lighten30,
+  violet1: violet1$3.base,
+  violet: violet$2.base,
   scarletGum: scarletGum$2.base
 };
-var violet$3 = colorScales.violet,
+var violet1$2 = colorScales.violet1,
   mauve$2 = colorScales.mauve;
 var palette$5 = Object.assign(Object.assign({}, palette$8), {
-  violet: violet$3.base,
-  violetLight20: violet$3.lighten20,
-  violetLight30: violet$3.lighten30,
-  violetLight90: violet$3.lighten90,
+  violet: violet1$2.base,
+  violetLight20: violet1$2.lighten20,
+  violetLight30: violet1$2.lighten30,
+  violetLight90: violet1$2.lighten90,
   mauve: mauve$2.base,
   mauveLight80: mauve$2.lighten80
 });
@@ -2898,6 +2898,7 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     archived: theme.colors.onArchivedSurface
   };
   var fontSizes = {
+    xsmall: theme.fontSizes.xsmall,
     small: theme.fontSizes.small,
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
@@ -2909,6 +2910,7 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     '7xlarge': theme.fontSizes['7xlarge']
   };
   var lineHeights = {
+    xsmall: theme.lineHeights.xsmall,
     small: theme.lineHeights.small,
     medium: theme.lineHeights.medium,
     large: theme.lineHeights.large,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.12.2",
+  "version": "8.12.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.12.2",
+    "@hero-design/colors": "8.12.3",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.12.2",
+    "@hero-design/eslint-plugin": "8.12.3",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.12.2",
+    "eslint-config-hd": "8.12.3",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.12.2",
+    "prettier-config-hd": "8.12.3",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

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

@@ -355,7 +355,7 @@ exports[`Tabs renders correctly 1`] = `
                 themeIntent="body"
                 themeTypeface="neutral"
               >
-                Wallet
+                Money
               </Text>
               <View
                 collapsable={false}
@@ -584,7 +584,7 @@ exports[`Tabs renders correctly 1`] = `
           }
         >
           <Text>
-            Wallet Screen
+            Money Screen
           </Text>
         </View>
       </View>

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

@@ -35,9 +35,9 @@ const TestTabsComponent = (
       },
     },
     {
-      key: 'wallet',
-      activeItem: 'Wallet',
-      component: <Text>Wallet Screen</Text>,
+      key: 'money',
+      activeItem: 'Money',
+      component: <Text>Money Screen</Text>,
       badge: {
         type: 'counter',
         value: 50,
@@ -82,8 +82,8 @@ describe('Tabs', () => {
     expect(getByText('Home Screen')).toBeDefined();
     fireEvent.press(getByText('Move to Work'));
     expect(getByText('Work Screen')).toBeDefined();
-    fireEvent.press(getByText('Wallet'));
-    expect(getByText('Wallet Screen')).toBeDefined();
+    fireEvent.press(getByText('Money'));
+    expect(getByText('Money Screen')).toBeDefined();
     expect(getByText('50')).toBeDefined();
   });
 

package/src/components/Typography/Text/StyledText.tsx

@@ -9,6 +9,7 @@ const FONTWEIGHT_MAP = {
 
 const StyledText = styled(Text)<{
   themeFontSize:
+    | 'xsmall'
     | 'small'
     | 'medium'
     | 'large'

package/src/components/Typography/Text/__tests__/StyledText.spec.tsx

@@ -5,6 +5,7 @@ import { StyledText } from '../StyledText';
 describe('StyledText', () => {
   it.each`
     fontSize
+    ${'xsmall'}
     ${'small'}
     ${'medium'}
     ${'large'}

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -391,6 +391,29 @@ exports[`StyledText has xlarge fontSize style 1`] = `
 </Text>
 `;
 
+exports[`StyledText has xsmall fontSize style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 10,
+        "letterSpacing": 0.3,
+        "lineHeight": 18,
+      },
+      undefined,
+    ]
+  }
+  themeFontSize="xsmall"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeTypeface="neutral"
+>
+  This is a test
+</Text>
+`;
+
 exports[`StyledText has xxxlarge fontSize style 1`] = `
 <Text
   style={

package/src/components/Typography/Text/index.tsx

@@ -16,6 +16,7 @@ export interface TextProps extends NativeTextProps {
    * Size of the text.
    */
   fontSize?:
+    | 'xsmall'
     | 'small'
     | 'medium'
     | 'large'

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

@@ -982,6 +982,7 @@ Object {
         "medium": 14,
         "small": 12,
         "xlarge": 18,
+        "xsmall": 10,
         "xxxlarge": 24,
         "xxxxlarge": 28,
         "xxxxxlarge": 32,
@@ -1005,6 +1006,7 @@ Object {
         "medium": 22,
         "small": 20,
         "xlarge": 26,
+        "xsmall": 18,
         "xxxlarge": 32,
         "xxxxlarge": 36,
         "xxxxxlarge": 40,

package/src/theme/components/typography.ts

@@ -15,6 +15,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
   };
 
   const fontSizes = {
+    xsmall: theme.fontSizes.xsmall,
     small: theme.fontSizes.small,
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
@@ -27,6 +28,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
   };
 
   const lineHeights = {
+    xsmall: theme.lineHeights.xsmall,
     small: theme.lineHeights.small,
     medium: theme.lineHeights.medium,
     large: theme.lineHeights.large,

package/src/theme/global/colors/__tests__/__snapshots__/eBens.spec.ts.snap

@@ -13,7 +13,7 @@ Object {
   "disabledOutline": "#bfc1c5",
   "error": "#f46363",
   "errorSurface": "#fcebe7",
-  "highlightedSurface": "#f1e9fb",
+  "highlightedSurface": "#f3e6f6",
   "inactiveOnDefaultGlobalSurface": "#808f91",
   "inactiveOutline": "#808f91",
   "info": "#b5c3fd",
@@ -35,10 +35,10 @@ Object {
   "onSuccessSurface": "#017d6d",
   "onWarningSurface": "#ffa234",
   "overlayGlobalSurface": "#000000",
-  "pressedSurface": "#914edf",
-  "primary": "#7622d7",
+  "pressedSurface": "#9d37b5",
+  "primary": "#8505a2",
   "primaryOutline": "#001f23",
-  "secondary": "#9f64e3",
+  "secondary": "#aa50be",
   "secondaryOutline": "#e8e9ea",
   "success": "#5ace7d",
   "successSurface": "#f0fef4",

package/types/components/Typography/Text/StyledText.d.ts

@@ -4,7 +4,7 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("reac
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
+    themeFontSize: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
     themeIntent: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | 'archived';
     themeTypeface: 'neutral' | 'playful';

package/types/components/Typography/Text/index.d.ts

@@ -8,7 +8,7 @@ export interface TextProps extends NativeTextProps {
     /**
      * Size of the text.
      */
-    fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
+    fontSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
     /**
      * Font weight of the text.
      */

package/types/theme/components/typography.d.ts

@@ -14,6 +14,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
     };
     fonts: import("../global/typography").Fonts;
     fontSizes: {
+        xsmall: number;
         small: number;
         medium: number;
         large: number;
@@ -25,6 +26,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         '7xlarge': number;
     };
     lineHeights: {
+        xsmall: number;
         small: number;
         medium: number;
         large: number;