@hero-design/rn 8.11.4-rc.1 → 8.12.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 be75cdb303db3812
+@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 23.2s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -1274,7 +1274,10 @@ var palette$2 = Object.assign(Object.assign({}, palette$8), {
   violetLight90: violet1.lighten90,
   violet: violet1.base,
   mauve: mauve.base,
+  mauveLight15: mauve.lighten15,
   mauveLight30: mauve.lighten30,
+  mauveLight40: mauve.lighten40,
+  mauveDark65: mauve.darken65,
   maasstrichtBlueLight10: maasstrichtBlue.lighten10,
   maasstrichtBlueDark20: maasstrichtBlue.darken20
 });
@@ -1400,18 +1403,18 @@ var globalPalette = {
   // End of Updated 21 / Nov / 22
 };
 
-var swagDarkBrandSystemPallete = {
+var swagDarkBrandSystemPalette = {
   primary: palette$2.mauve,
   onPrimary: palette$2.maasstrichtBlue,
-  secondary: palette$2.mauveLight30,
+  secondary: palette$2.mauveLight40,
   onSecondary: palette$2.maasstrichtBlue,
   defaultSurface: palette$2.maasstrichtBlue,
-  highlightedSurface: palette$2.scarletGumDark65,
-  pressedSurface: palette$2.scarletGumLight20,
+  highlightedSurface: palette$2.mauveDark65,
+  pressedSurface: palette$2.mauveLight15,
   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,
@@ -2841,9 +2844,9 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     primary: theme.colors.primary,
     secondary: theme.colors.secondary,
     info: theme.colors.onInfoSurface,
-    danger: theme.colors.onErrorSurface,
-    warning: theme.colors.onWarningSurface,
-    success: theme.colors.onSuccessSurface,
+    danger: theme.colors.error,
+    warning: theme.colors.warning,
+    success: theme.colors.success,
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface
   };
@@ -4105,12 +4108,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();
 
@@ -13803,7 +13815,7 @@ function MultiSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID,
-    renderInputValue: renderSelectedValue !== undefined ? function (props) {
+    renderInputValue: renderSelectedValue !== undefined && (displayedValue === null || displayedValue === void 0 ? void 0 : displayedValue.length) > 0 ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
   }))))), /*#__PURE__*/React.createElement(BottomSheet$1, {
@@ -13930,7 +13942,10 @@ var OptionList = function OptionList(_ref) {
     onQueryChange: onQueryChange,
     sections: sections,
     renderItem: renderItem,
-    sectionListRef: sectionListRef
+    sectionListRef: sectionListRef,
+    style: _objectSpread2({}, onQueryChange ? {
+      height: Dimensions.get('screen').height
+    } : {})
   }, rest));
 };
 
@@ -13990,7 +14005,7 @@ var SingleSelect = function SingleSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID,
-    renderInputValue: renderSelectedValue !== undefined ? function (props) {
+    renderInputValue: renderSelectedValue !== undefined && !!displayedValue ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
   }))))), /*#__PURE__*/React.createElement(BottomSheet$1, {
@@ -31686,4 +31701,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

@@ -1303,7 +1303,10 @@ var palette$2 = Object.assign(Object.assign({}, palette$8), {
   violetLight90: violet1.lighten90,
   violet: violet1.base,
   mauve: mauve.base,
+  mauveLight15: mauve.lighten15,
   mauveLight30: mauve.lighten30,
+  mauveLight40: mauve.lighten40,
+  mauveDark65: mauve.darken65,
   maasstrichtBlueLight10: maasstrichtBlue.lighten10,
   maasstrichtBlueDark20: maasstrichtBlue.darken20
 });
@@ -1429,18 +1432,18 @@ var globalPalette = {
   // End of Updated 21 / Nov / 22
 };
 
-var swagDarkBrandSystemPallete = {
+var swagDarkBrandSystemPalette = {
   primary: palette$2.mauve,
   onPrimary: palette$2.maasstrichtBlue,
-  secondary: palette$2.mauveLight30,
+  secondary: palette$2.mauveLight40,
   onSecondary: palette$2.maasstrichtBlue,
   defaultSurface: palette$2.maasstrichtBlue,
-  highlightedSurface: palette$2.scarletGumDark65,
-  pressedSurface: palette$2.scarletGumLight20,
+  highlightedSurface: palette$2.mauveDark65,
+  pressedSurface: palette$2.mauveLight15,
   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,
@@ -2870,9 +2873,9 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     primary: theme.colors.primary,
     secondary: theme.colors.secondary,
     info: theme.colors.onInfoSurface,
-    danger: theme.colors.onErrorSurface,
-    warning: theme.colors.onWarningSurface,
-    success: theme.colors.onSuccessSurface,
+    danger: theme.colors.error,
+    warning: theme.colors.warning,
+    success: theme.colors.success,
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface
   };
@@ -4134,12 +4137,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();
 
@@ -13832,7 +13844,7 @@ function MultiSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID,
-    renderInputValue: renderSelectedValue !== undefined ? function (props) {
+    renderInputValue: renderSelectedValue !== undefined && (displayedValue === null || displayedValue === void 0 ? void 0 : displayedValue.length) > 0 ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
   }))))), /*#__PURE__*/React__default["default"].createElement(BottomSheet$1, {
@@ -13959,7 +13971,10 @@ var OptionList = function OptionList(_ref) {
     onQueryChange: onQueryChange,
     sections: sections,
     renderItem: renderItem,
-    sectionListRef: sectionListRef
+    sectionListRef: sectionListRef,
+    style: _objectSpread2({}, onQueryChange ? {
+      height: reactNative.Dimensions.get('screen').height
+    } : {})
   }, rest));
 };
 
@@ -14019,7 +14034,7 @@ var SingleSelect = function SingleSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID,
-    renderInputValue: renderSelectedValue !== undefined ? function (props) {
+    renderInputValue: renderSelectedValue !== undefined && !!displayedValue ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
   }))))), /*#__PURE__*/React__default["default"].createElement(BottomSheet$1, {
@@ -31769,4 +31784,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",
   "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",
     "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",
     "@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",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.11.4-rc.1",
+    "prettier-config-hd": "8.12.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Select/MultiSelect/__tests__/index.spec.tsx

@@ -198,6 +198,26 @@ describe('rendering', () => {
     expect(getByText('Custom daemon')).toBeTruthy();
   });
 
+  it('does not render custom value when value is empty', () => {
+    const { queryByText } = renderWithTheme(
+      <MultiSelect<string, CustomOptionType>
+        label="Choose collaborators"
+        footerLabel="Confirm"
+        options={collaboratorSections}
+        value={[]}
+        onConfirm={jest.fn()}
+        renderSelectedValue={(selectedValue, _inputProps) => (
+          <>
+            {selectedValue.map(() => (
+              <Typography.Text>Custom value</Typography.Text>
+            ))}
+          </>
+        )}
+      />
+    );
+    expect(queryByText('Custom value')).toBeNull();
+  });
+
   it('allows custom footer', () => {
     const { getByText, queryByText } = renderWithTheme(
       <MultiSelect<string, CustomOptionType>

package/src/components/Select/MultiSelect/index.tsx

@@ -111,7 +111,7 @@ function MultiSelect<V, T extends OptionType<V>>({
               style={style}
               testID={testID}
               renderInputValue={
-                renderSelectedValue !== undefined
+                renderSelectedValue !== undefined && displayedValue?.length > 0
                   ? (props) => renderSelectedValue(value, props)
                   : undefined
               }

package/src/components/Select/SingleSelect/OptionList.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import type { SectionListRenderItemInfo, SectionList } from 'react-native';
+import {
+  SectionListRenderItemInfo,
+  SectionList,
+  Dimensions,
+} from 'react-native';
 import Option from './Option';
 import type { SingleSelectProps } from '.';
 import type { OptionType, SectionType } from '../types';
@@ -64,6 +68,9 @@ const OptionList = <V, T extends OptionType<V>>({
       sections={sections}
       renderItem={renderItem}
       sectionListRef={sectionListRef}
+      style={{
+        ...(onQueryChange ? { height: Dimensions.get('screen').height } : {}),
+      }}
       {...rest}
     />
   );

package/src/components/Select/SingleSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -70,7 +70,7 @@ exports[`OptionList render isLoading correctly 1`] = `
         Object {
           "paddingBottom": 16,
         },
-        undefined,
+        Object {},
       ],
     ]
   }
@@ -852,7 +852,7 @@ exports[`OptionList renders correctly 1`] = `
         Object {
           "paddingBottom": 16,
         },
-        undefined,
+        Object {},
       ],
     ]
   }
@@ -1481,7 +1481,7 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
         Object {
           "paddingBottom": 16,
         },
-        undefined,
+        Object {},
       ],
     ]
   }
@@ -2110,7 +2110,7 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
         Object {
           "paddingBottom": 16,
         },
-        undefined,
+        Object {},
       ],
     ]
   }

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -460,7 +460,7 @@ Array [
                   Object {
                     "paddingBottom": 16,
                   },
-                  undefined,
+                  Object {},
                 ],
               ]
             }
@@ -1956,7 +1956,7 @@ Array [
                   Object {
                     "paddingBottom": 16,
                   },
-                  undefined,
+                  Object {},
                 ],
               ]
             }
@@ -3574,7 +3574,7 @@ Array [
                   Object {
                     "paddingBottom": 16,
                   },
-                  undefined,
+                  Object {},
                 ],
               ]
             }

package/src/components/Select/SingleSelect/__tests__/index.spec.tsx

@@ -182,6 +182,21 @@ describe('rendering', () => {
     );
     expect(getByText('Custom daniel')).toBeTruthy();
   });
+
+  it('does not render custom value when value is empty', () => {
+    const { queryByText } = renderWithTheme(
+      <SingleSelect<string, CustomOptionType>
+        label="Choose collaborators"
+        options={collaboratorSections}
+        value=""
+        onConfirm={jest.fn()}
+        renderSelectedValue={() => (
+          <Typography.Text>Custom value</Typography.Text>
+        )}
+      />
+    );
+    expect(queryByText('Custom value')).toBeNull();
+  });
 });
 
 describe('behavior', () => {

package/src/components/Select/SingleSelect/index.tsx

@@ -88,7 +88,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
               style={style}
               testID={testID}
               renderInputValue={
-                renderSelectedValue !== undefined
+                renderSelectedValue !== undefined && !!displayedValue
                   ? (props) => renderSelectedValue(value, props)
                   : undefined
               }

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -113,7 +113,7 @@ exports[`ToolbarItems renders correctly when intent is danger 1`] = `
     style={
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#f46363",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -311,7 +311,7 @@ exports[`ToolbarItems renders correctly when intent is success 1`] = `
     style={
       Array [
         Object {
-          "color": "#017d6d",
+          "color": "#5ace7d",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -377,7 +377,7 @@ exports[`ToolbarItems renders correctly when intent is warning 1`] = `
     style={
       Array [
         Object {
-          "color": "#ffa234",
+          "color": "#ffbe71",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,

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

@@ -28,7 +28,7 @@ exports[`StyledText has danger intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#de350b",
+        "color": "#f46363",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -327,7 +327,7 @@ exports[`StyledText has success intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#017d6d",
+        "color": "#5ace7d",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -350,7 +350,7 @@ exports[`StyledText has warning intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#ffa234",
+        "color": "#ffbe71",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { PropsWithChildren, useMemo } from 'react';
 
 import getTheme from './getTheme';
 import {
@@ -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,24 @@ 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 Record<string, unknown>>(
+    C: React.ComponentType<P>,
+    themeName: ThemeName
+  ) =>
+  (props: PropsWithChildren<P>) => {
+    return (
+      <ThemeSwitcher name={themeName}>
+        <C {...props} />
+      </ThemeSwitcher>
+    );
+  };
+
 export default ThemeSwitcher;

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

@@ -949,14 +949,14 @@ Object {
       "colors": Object {
         "archived": "#737479",
         "body": "#001f23",
-        "danger": "#de350b",
+        "danger": "#f46363",
         "info": "#4568fb",
         "inverted": "#ffffff",
         "primary": "#401960",
         "secondary": "#795e90",
         "subdued": "#4d6265",
-        "success": "#017d6d",
-        "warning": "#ffa234",
+        "success": "#5ace7d",
+        "warning": "#ffbe71",
       },
       "fontSizes": Object {
         "6xlarge": 36,

package/src/theme/components/typography.ts

@@ -7,9 +7,9 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     primary: theme.colors.primary,
     secondary: theme.colors.secondary,
     info: theme.colors.onInfoSurface,
-    danger: theme.colors.onErrorSurface,
-    warning: theme.colors.onWarningSurface,
-    success: theme.colors.onSuccessSurface,
+    danger: theme.colors.error,
+    warning: theme.colors.warning,
+    success: theme.colors.success,
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface,
   };

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

@@ -13,7 +13,7 @@ Object {
   "disabledOutline": "#82858a",
   "error": "#f46363",
   "errorSurface": "#fcebe7",
-  "highlightedSurface": "#160922",
+  "highlightedSurface": "#443153",
   "inactiveOnDefaultGlobalSurface": "#99a5a7",
   "inactiveOutline": "#99a5a7",
   "info": "#b5c3fd",
@@ -35,10 +35,10 @@ Object {
   "onSuccessSurface": "#017d6d",
   "onWarningSurface": "#ffa234",
   "overlayGlobalSurface": "#727478",
-  "pressedSurface": "#664780",
+  "pressedSurface": "#cc9df1",
   "primary": "#c38cee",
   "primaryOutline": "#ffffff",
-  "secondary": "#d5aff3",
+  "secondary": "#dbbaf5",
   "secondaryOutline": "#193539",
   "success": "#5ace7d",
   "successSurface": "#f0fef4",

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,14 +2,14 @@ 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,
+  secondary: palette.mauveLight40,
   onSecondary: palette.maasstrichtBlue,
   defaultSurface: palette.maasstrichtBlue,
-  highlightedSurface: palette.scarletGumDark65,
-  pressedSurface: palette.scarletGumLight20,
+  highlightedSurface: palette.mauveDark65,
+  pressedSurface: palette.mauveLight15,
 
   decorativePrimary: palette.maasstrichtBlue,
   decorativePrimarySurface: palette.maasstrichtBlueLight10,
@@ -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,