@hero-design/rn 8.11.4-rc.1 → 8.12.0-rc.0

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 8b8d88efdbc74b01
-@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 '/Volumes/Data/Projects/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 33.6s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output ee6a5718811b5702
+@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 '/Volumes/Data/Projects/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 29.8s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -1400,7 +1400,7 @@ var globalPalette = {
   // End of Updated 21 / Nov / 22
 };
 
-var swagDarkBrandSystemPallete = {
+var swagDarkBrandSystemPalette = {
   primary: palette$2.mauve,
   onPrimary: palette$2.maasstrichtBlue,
   secondary: palette$2.mauveLight30,
@@ -1411,7 +1411,7 @@ var swagDarkBrandSystemPallete = {
   decorativePrimary: palette$2.maasstrichtBlue,
   decorativePrimarySurface: palette$2.maasstrichtBlueLight10
 };
-var swagDarkSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPallete);
+var swagDarkSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPalette);
 
 var workBrandSystemPallete = {
   primary: palette.policeBlue,
@@ -4105,12 +4105,21 @@ var ThemeSwitcher = function ThemeSwitcher(_ref) {
         return getTheme$1(scale$1, walletSystemPalette);
       case 'eBens':
         return getTheme$1(scale$1, eBensSystemPalette);
+      case 'swagDark':
+        return getTheme$1(scale$1, swagDarkSystemPalette);
     }
   }, [name]);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, children);
 };
+var withTheme = function withTheme(C, themeName) {
+  return function (props) {
+    return /*#__PURE__*/React.createElement(ThemeSwitcher, {
+      name: themeName
+    }, /*#__PURE__*/React.createElement(C, props));
+  };
+};
 
 var defaultTheme = getTheme$1();
 
@@ -31686,4 +31695,4 @@ var index = Object.assign(RichTextEditor$1, {
   Toolbar: EditorToolbar
 });
 
-export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, Card$1 as Card, index$8 as Carousel, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, index$6 as FAB, Icon, Image, List, PageControl, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Slider, Spinner, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagDarkSystemPalette, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, workSystemPalette };
+export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, Card$1 as Card, index$8 as Carousel, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, index$6 as FAB, Icon, Image, List, PageControl, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Slider, Spinner, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagDarkSystemPalette, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };

package/lib/index.js

@@ -1429,7 +1429,7 @@ var globalPalette = {
   // End of Updated 21 / Nov / 22
 };
 
-var swagDarkBrandSystemPallete = {
+var swagDarkBrandSystemPalette = {
   primary: palette$2.mauve,
   onPrimary: palette$2.maasstrichtBlue,
   secondary: palette$2.mauveLight30,
@@ -1440,7 +1440,7 @@ var swagDarkBrandSystemPallete = {
   decorativePrimary: palette$2.maasstrichtBlue,
   decorativePrimarySurface: palette$2.maasstrichtBlueLight10
 };
-var swagDarkSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPallete);
+var swagDarkSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPalette);
 
 var workBrandSystemPallete = {
   primary: palette.policeBlue,
@@ -4134,12 +4134,21 @@ var ThemeSwitcher = function ThemeSwitcher(_ref) {
         return getTheme$1(scale$1, walletSystemPalette);
       case 'eBens':
         return getTheme$1(scale$1, eBensSystemPalette);
+      case 'swagDark':
+        return getTheme$1(scale$1, swagDarkSystemPalette);
     }
   }, [name]);
   return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
     theme: theme
   }, children);
 };
+var withTheme = function withTheme(C, themeName) {
+  return function (props) {
+    return /*#__PURE__*/React__default["default"].createElement(ThemeSwitcher, {
+      name: themeName
+    }, /*#__PURE__*/React__default["default"].createElement(C, props));
+  };
+};
 
 var defaultTheme = getTheme$1();
 
@@ -31769,4 +31778,5 @@ exports.theme = defaultTheme;
 exports.useAvatarColors = useAvatarColors;
 exports.useTheme = useTheme;
 exports.walletSystemPalette = walletSystemPalette;
+exports.withTheme = withTheme;
 exports.workSystemPalette = workSystemPalette;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.11.4-rc.1",
+  "version": "8.12.0-rc.0",
   "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.11.4-rc.1",
+    "@hero-design/colors": "8.12.0-rc.0",
     "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.11.4-rc.1",
+    "@hero-design/eslint-plugin": "8.12.0-rc.0",
     "@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.11.4-rc.1",
+    "eslint-config-hd": "8.12.0-rc.0",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.11.4-rc.1",
+    "prettier-config-hd": "8.12.0-rc.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/index.ts

@@ -9,6 +9,7 @@ import theme, {
   walletSystemPalette,
   eBensSystemPalette,
   ThemeSwitcher,
+  withTheme,
 } from './theme';
 import { scale } from './utils/scale';
 
@@ -62,6 +63,7 @@ export {
   scale,
   ThemeProvider,
   ThemeSwitcher,
+  withTheme,
   swagSystemPalette,
   swagDarkSystemPalette,
   workSystemPalette,

package/src/theme/ThemeSwitcher.tsx

@@ -8,10 +8,11 @@ import {
   jobsSystemPalette,
   walletSystemPalette,
   eBensSystemPalette,
+  swagDarkSystemPalette,
 } from './global';
 import ThemeProvider from './ThemeProvider';
 
-type ThemeName = 'swag' | 'work' | 'jobs' | 'wallet' | 'eBens';
+type ThemeName = 'swag' | 'swagDark' | 'work' | 'jobs' | 'wallet' | 'eBens';
 
 const ThemeSwitcher = ({
   name = 'swag',
@@ -32,9 +33,21 @@ const ThemeSwitcher = ({
         return getTheme(defaultScale, walletSystemPalette);
       case 'eBens':
         return getTheme(defaultScale, eBensSystemPalette);
+      case 'swagDark':
+        return getTheme(defaultScale, swagDarkSystemPalette);
     }
   }, [name]);
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 };
 
+export const withTheme =
+  <P extends {}>(C: React.ComponentType<P>, themeName: ThemeName) =>
+  (props: P) => {
+    return (
+      <ThemeSwitcher name={themeName}>
+        <C {...props} />
+      </ThemeSwitcher>
+    );
+  };
+
 export default ThemeSwitcher;

package/src/theme/global/colors/globalDark.ts

@@ -1,4 +1,4 @@
-import { defaultDarkMobilePalette as palette } from '@hero-design/colors';
+import { defaultMobileDarkPalette as palette } from '@hero-design/colors';
 import type { GlobalSystemPalette } from './types';
 
 const globalPalette: GlobalSystemPalette = {

package/src/theme/global/colors/swagDark.ts

@@ -2,7 +2,7 @@ import { swagDarkPalette as palette } from '@hero-design/colors';
 import type { SystemPalette, BrandSystemPalette } from './types';
 import globalDarkPalette from './globalDark';
 
-const swagDarkBrandSystemPallete: BrandSystemPalette = {
+const swagDarkBrandSystemPalette: BrandSystemPalette = {
   primary: palette.mauve,
   onPrimary: palette.maasstrichtBlue,
   secondary: palette.mauveLight30,
@@ -19,7 +19,7 @@ const swagDarkSystemPalette: SystemPalette = {
   // Global
   ...globalDarkPalette,
   // Brand
-  ...swagDarkBrandSystemPallete,
+  ...swagDarkBrandSystemPalette,
 };
 
 export default swagDarkSystemPalette;

package/src/theme/index.ts

@@ -1,6 +1,6 @@
 import getTheme from './getTheme';
 import ThemeProvider, { useTheme } from './ThemeProvider';
-import ThemeSwitcher from './ThemeSwitcher';
+import ThemeSwitcher, { withTheme } from './ThemeSwitcher';
 import {
   swagSystemPalette,
   swagDarkSystemPalette,
@@ -17,6 +17,7 @@ const defaultTheme = getTheme();
 export type { Theme };
 
 export {
+  withTheme,
   getTheme,
   ThemeProvider,
   ThemeSwitcher,

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import theme, { getTheme, ThemeProvider, useTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, ThemeSwitcher } from './theme';
+import theme, { getTheme, ThemeProvider, useTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, ThemeSwitcher, withTheme } from './theme';
 import { scale } from './utils/scale';
 import Accordion from './components/Accordion';
 import Alert from './components/Alert';
@@ -42,5 +42,5 @@ import Typography from './components/Typography';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, Image, List, PinInput, Progress, PageControl, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, Image, List, PinInput, Progress, PageControl, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
 export * from './types';

package/types/theme/ThemeSwitcher.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-declare type ThemeName = 'swag' | 'work' | 'jobs' | 'wallet' | 'eBens';
+declare type ThemeName = 'swag' | 'swagDark' | 'work' | 'jobs' | 'wallet' | 'eBens';
 declare const ThemeSwitcher: ({ name, children, }: {
     name?: ThemeName | undefined;
     children: React.ReactNode;
 }) => JSX.Element;
+export declare const withTheme: <P extends {}>(C: React.ComponentType<P>, themeName: ThemeName) => (props: P) => JSX.Element;
 export default ThemeSwitcher;

package/types/theme/index.d.ts

@@ -1,9 +1,9 @@
 import getTheme from './getTheme';
 import ThemeProvider, { useTheme } from './ThemeProvider';
-import ThemeSwitcher from './ThemeSwitcher';
+import ThemeSwitcher, { withTheme } from './ThemeSwitcher';
 import { swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette } from './global';
 import type { Theme } from './getTheme';
 declare const defaultTheme: Theme;
 export type { Theme };
-export { getTheme, ThemeProvider, ThemeSwitcher, useTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, };
+export { withTheme, getTheme, ThemeProvider, ThemeSwitcher, useTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, };
 export default defaultTheme;