@hero-design/rn 7.22.2 → 7.23.0

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

@@ -1,4 +1,45 @@
-export type SystemPalette = {
+export type GlobalSystemPalette = {
+  globalPrimary: string;
+  mutedGlobalPrimary: string;
+  onGlobalPrimary: string;
+  globalSecondary: string;
+  globalPrimaryOutline: string;
+  globalSecondaryOutline: string;
+  defaultGlobalSurface: string;
+  onDefaultGlobalSurface: string;
+  neutralGlobalSurface: string;
+  disabledOnDefaultGlobalSurface: string;
+  error: string;
+  errorSurface: string;
+  onErrorSurface: string;
+  warning: string;
+  warningSurface: string;
+  onWarningSurface: string;
+  success: string;
+  successSurface: string;
+  onSuccessSurface: string;
+  info: string;
+  infoSurface: string;
+  onInfoSurface: string;
+  archived: string;
+  archivedSurface: string;
+  onArchivedSurface: string;
+};
+
+export type BrandSystemPalette = {
+  primary: string;
+  mutedPrimary: string;
+  onPrimary: string;
+  secondary: string;
+  highlightedSecondarySurface: string; // TODO: Ask Ariel to add this
+  onSecondary: string;
+  mutedSecondary: string;
+  disabledSecondary: string;
+  highlightedSurface: string;
+  lightHighlightedSurface: string;
+};
+
+export type LegacySystemPalette = {
   globalPrimary: string;
   globalPrimaryLight: string;
   globalPrimaryBackground: string;
@@ -42,30 +83,8 @@ export type SystemPalette = {
   black: string;
   inactiveBackground: string;
   shadow: string;
-
-  __alpha__globalPrimary: string;
-
-  __alpha__globalSecondary1: string;
-  __alpha__globalSecondary4: string;
-
-  __alpha__globalNeutral3: string;
-
-  __alpha__globalLabel1: string;
-  __alpha__globalLabel2: string;
-  __alpha__globalLabel3: string;
-  __alpha__globalLabel4: string;
-  __alpha__globalLabel5: string;
-  __alpha__globalLabel6: string;
-  __alpha__globalLabel7: string;
-  __alpha__globalLabel8: string;
-  __alpha__globalLabel9: string;
-
-  __alpha__primary1: string;
-  __alpha__primary2: string;
-
-  __alpha__secondary1: string;
-  __alpha__secondary2: string;
-  __alpha__secondary3: string;
-  __alpha__secondary4: string;
-  __alpha__lightHighlightedSurface: string;
 };
+
+export type SystemPalette = LegacySystemPalette &
+  GlobalSystemPalette &
+  BrandSystemPalette;

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

@@ -1,18 +1,19 @@
-import { workPalette } from '@hero-design/colors';
+import { workPalette as palette } from '@hero-design/colors';
 import swag from './swag';
 import type { SystemPalette } from './types';
 
 const workSystemPalette: SystemPalette = {
   ...swag,
-  primary: workPalette.gold,
-  primaryLight: workPalette.goldLight50,
-  primaryDark: workPalette.goldLight20,
-  primaryBackground: workPalette.goldLight90,
 
-  __alpha__secondary1: workPalette.goldLight20,
-  __alpha__secondary2: workPalette.goldLight50,
-  __alpha__secondary3: workPalette.goldLight70,
-  __alpha__secondary4: workPalette.goldLight90,
+  primary: palette.gold,
+  mutedPrimary: palette.goldLight90,
+  onPrimary: palette.maasstrichtBlue,
+  secondary: palette.violet,
+  onSecondary: palette.white,
+  mutedSecondary: palette.maasstrichtBlueLight50,
+  disabledSecondary: palette.violetLight50,
+  highlightedSurface: palette.violetLight80,
+  lightHighlightedSurface: palette.violetLight90,
 };
 
 export default workSystemPalette;

package/src/theme/global/index.ts

@@ -1,6 +1,7 @@
 import { scale as defaultScale } from './scale';
 import swagSystemPalette from './colors/swag';
 import workSystemPalette from './colors/work';
+import jobsSystemPalette from './colors/jobs';
 
 import { getFonts, getFontSizes, getLineHeights } from './typography';
 import { getSpace } from './space';
@@ -36,4 +37,10 @@ type GlobalTheme = ReturnType<typeof getGlobalTheme>;
 
 export type { GlobalTheme, Scale, SystemPalette };
 
-export { getGlobalTheme, defaultScale, swagSystemPalette, workSystemPalette };
+export {
+  getGlobalTheme,
+  defaultScale,
+  swagSystemPalette,
+  workSystemPalette,
+  jobsSystemPalette,
+};

package/src/theme/index.ts

@@ -1,7 +1,11 @@
 import getTheme from './getTheme';
 import ThemeProvider, { useTheme } from './ThemeProvider';
 import ThemeSwitcher from './ThemeSwitcher';
-import { swagSystemPalette, workSystemPalette } from './global';
+import {
+  swagSystemPalette,
+  workSystemPalette,
+  jobsSystemPalette,
+} from './global';
 
 import type { Theme } from './getTheme';
 
@@ -16,6 +20,7 @@ export {
   useTheme,
   swagSystemPalette,
   workSystemPalette,
+  jobsSystemPalette,
 };
 
 export default defaultTheme;

package/src/utils/__tests__/helpers.spec.ts

@@ -0,0 +1,27 @@
+import { omit, pick } from '../helpers';
+
+describe('pick', () => {
+  it('works', () => {
+    const keys = ['a', 'b', 'f'];
+    const props = { a: 1, b: true, c: 'outline', d: null, f: 'whatever' };
+
+    expect(pick(keys, props)).toEqual({
+      a: 1,
+      b: true,
+      f: 'whatever',
+    });
+  });
+});
+
+describe('omit', () => {
+  it('works', () => {
+    const keys = ['a', 'b'];
+    const props = { a: 1, b: true, c: 'outline', d: null, f: 'whatever' };
+
+    expect(omit(keys, props)).toEqual({
+      c: 'outline',
+      d: null,
+      f: 'whatever',
+    });
+  });
+});

package/src/utils/helpers.ts

@@ -2,3 +2,24 @@ import { Platform } from 'react-native';
 
 export const isIOS = Platform.OS === 'ios';
 export const isAndroid = Platform.OS === 'android';
+
+export const pick = (keys: Array<string>, props: Record<string, any>) =>
+  keys
+    .filter((key) => key in props)
+    .reduce(
+      (result, cur) => ({
+        ...result,
+        [cur]: props[cur],
+      }),
+      {}
+    );
+
+export const omit = (keys: Array<string>, props: Record<string, any>) => {
+  const result = props;
+
+  keys.forEach((key) => {
+    delete result[key];
+  });
+
+  return result;
+};

package/tsconfig.prod.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["src/**/*.spec.ts", "src/**/*.spec.tsx"]
+}

package/types/components/Icon/HeroIcon/index.d.ts

@@ -1,5 +1,5 @@
 declare type ThemeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-declare type ThemeIntent = 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text' | 'text-inverted';
+declare type ThemeIntent = 'text' | 'primary' | 'secondary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text' | 'text-inverted';
 declare const StyledHeroIcon: import("@emotion/native").StyledComponent<import("react-native-vector-icons/Icon").IconProps & {
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;

package/types/components/Icon/index.d.ts

@@ -9,7 +9,7 @@ export interface IconProps {
     /**
      * Intent of the Icon.
      */
-    intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text' | 'text-inverted';
+    intent?: 'text' | 'primary' | 'secondary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text' | 'text-inverted';
     /**
      * Size of the Icon.
      */

package/types/components/RefreshControl/index.d.ts

@@ -0,0 +1,5 @@
+import { RefreshControlProps as NativeRefreshControlProps } from 'react-native';
+export interface RefreshControlProps extends Omit<NativeRefreshControlProps, 'colors' | 'tintColor'> {
+}
+declare const RefreshControl: ({ ...props }: RefreshControlProps) => JSX.Element;
+export default RefreshControl;

package/types/components/RichTextEditor/MentionList.d.ts

@@ -1,4 +1,8 @@
-export interface MentionListProps {
+interface OnSelectOptionsType<TMetaData> {
+    highlighted: boolean;
+    meta?: TMetaData;
+}
+export interface MentionListProps<TMetaData = unknown> {
     /**
      * Unique name used to communicate with webview, should be the same with the RichTextEditor component it used with
      */
@@ -6,7 +10,7 @@ export interface MentionListProps {
     /**
      * Function used to render mention options
      */
-    render: (searchText: string, onSelect: (id: string, name: string) => void) => JSX.Element;
+    render: (searchText: string, onSelect: (id: string, name: string, options?: OnSelectOptionsType<TMetaData>) => void) => JSX.Element;
 }
-declare const MentionList: ({ name: eventPrefix, render }: MentionListProps) => JSX.Element;
+declare const MentionList: <TMetaData>({ name: eventPrefix, render }: MentionListProps<TMetaData>) => JSX.Element;
 export default MentionList;

package/types/components/RichTextEditor/index.d.ts

@@ -1,7 +1,7 @@
 import type { RichTextEditorProps, RichTextEditorRef } from './RichTextEditor';
 export type { RichTextEditorProps, RichTextEditorRef };
 declare const _default: import("react").ForwardRefExoticComponent<Omit<RichTextEditorProps, "forwardedRef"> & import("react").RefAttributes<RichTextEditorRef>> & {
-    MentionList: ({ name: eventPrefix, render }: import("./MentionList").MentionListProps) => JSX.Element;
+    MentionList: <TMetaData>({ name: eventPrefix, render }: import("./MentionList").MentionListProps<TMetaData>) => JSX.Element;
     Toolbar: ({ name, buttons, testID, }: import("./EditorToolbar").EditorToolbarProps) => JSX.Element;
 };
 export default _default;

package/types/components/Select/types.d.ts

@@ -57,9 +57,7 @@ export interface SelectProps<V, T extends OptionType<V>> extends Pick<TextInputP
     /**
      * Props that are passed to TextInput.
      */
-    inputProps?: {
-        loading?: boolean;
-    };
+    inputProps?: Pick<TextInputProps, 'loading' | 'required'>;
     /**
      * Field label.
      */

package/types/components/TextInput/StyledTextInput.d.ts

@@ -3,8 +3,6 @@ export declare type Variant = 'default' | 'filled' | 'focused' | 'disabled' | 'r
 declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;
-} & {
-    themeVariant: Variant;
 }, {}, {
     ref?: import("react").Ref<View>;
 }>;
@@ -70,6 +68,14 @@ declare const StyledTextInput: import("@emotion/native").StyledComponent<import(
 }, {}, {
     ref?: import("react").Ref<TextInput>;
 }>;
+declare const StyledBorderBackDrop: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+} & {
+    themeVariant: Variant;
+}, {}, {
+    ref?: import("react").Ref<View>;
+}>;
 declare const StyledTextInputContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;
@@ -94,4 +100,4 @@ declare const StyledErrorAndMaxLengthContainer: import("@emotion/native").Styled
 }, {}, {
     ref?: import("react").Ref<View>;
 }>;
-export { StyledTextInputContainer, StyledLabel, StyledLabelContainer, StyledAsteriskLabel, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledErrorAndMaxLengthContainer, };
+export { StyledTextInputContainer, StyledLabel, StyledLabelContainer, StyledAsteriskLabel, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledBorderBackDrop, StyledErrorAndMaxLengthContainer, };

package/types/components/Toolbar/ToolbarItem.d.ts

@@ -3,7 +3,7 @@ export interface ToolbarItemProps {
     /**
      * Visual intent of the toolbar item.
      */
-    intent?: 'primary' | 'info' | 'success' | 'danger' | 'warning';
+    intent?: 'primary' | 'secondary' | 'info' | 'success' | 'danger' | 'warning';
     /**
      * Icon of the toolbar item.
      */

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

@@ -5,7 +5,7 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("reac
 } & {
     themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
-    themeIntent: 'body' | 'subdued' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted';
+    themeIntent: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted';
 }, {}, {
     ref?: import("react").Ref<Text>;
 }>;

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

@@ -16,7 +16,7 @@ export interface TextProps extends NativeTextProps {
     /**
      * Visual intent color to apply to the text.
      */
-    intent?: 'body' | 'subdued' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted';
+    intent?: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted';
     /**
      * Additional style.
      */

package/types/index.d.ts

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

package/types/theme/ThemeSwitcher.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type ThemeName = 'swag' | 'work';
+declare type ThemeName = 'swag' | 'work' | 'jobs';
 declare const ThemeSwitcher: ({ name, children, }: {
     name?: ThemeName;
     children: React.ReactNode;

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

@@ -8,7 +8,6 @@ declare const getEmptyTheme: (theme: GlobalTheme) => {
         text: string;
         invertedText: string;
         subduedText: string;
-        illustrationBackground: string;
     };
     sizes: {
         image: number;

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

@@ -3,6 +3,7 @@ declare const getIconTheme: (theme: GlobalTheme) => {
     colors: {
         text: string;
         primary: string;
+        secondary: string;
         info: string;
         danger: string;
         success: string;

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

@@ -0,0 +1,7 @@
+import type { GlobalTheme } from '../global';
+declare const getRefreshControlTheme: (theme: GlobalTheme) => {
+    colors: {
+        indicator: string;
+    };
+};
+export default getRefreshControlTheme;

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

@@ -9,9 +9,7 @@ declare const getRichTextEditorTheme: (theme: GlobalTheme) => {
         wrapperMarginBottom: number;
         toolbarHorizontalPadding: number;
         editorPadding: number;
-    };
-    borderWidths: {
-        webViewBorderBottomWidth: number;
+        mention: number;
     };
     fontSizes: {
         editor: number;
@@ -22,5 +20,8 @@ declare const getRichTextEditorTheme: (theme: GlobalTheme) => {
         toolbarSeparatorWidth: number;
         toolbarSeparatorHeight: number;
     };
+    radii: {
+        mention: number;
+    };
 };
 export default getRichTextEditorTheme;

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

@@ -1,10 +1,7 @@
 import type { GlobalTheme } from '../global';
 declare const getSpinnerTheme: (theme: GlobalTheme) => {
     colors: {
-        dot1: string;
-        dot2: string;
-        dot3: string;
-        dot4: string;
+        dot: string;
     };
     space: {
         spinnerDot: {

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

@@ -4,6 +4,7 @@ declare const getToolbarTheme: (theme: GlobalTheme) => {
         background: string;
         border: string;
         primary: string;
+        secondary: string;
         info: string;
         success: string;
         danger: string;

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

@@ -4,6 +4,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         body: string;
         subdued: string;
         primary: string;
+        secondary: string;
         info: string;
         danger: string;
         warning: string;

package/types/theme/getTheme.d.ts

@@ -20,6 +20,7 @@ import getListTheme from './components/list';
 import getPinInputTheme from './components/pinInput';
 import getProgressTheme from './components/progress';
 import getRadioTheme from './components/radio';
+import getRefreshControlTheme from './components/refreshControl';
 import getRichTextEditorTheme from './components/richTextEditor';
 import getSectionHeadingTheme from './components/sectionHeading';
 import getSelectTheme from './components/select';
@@ -58,6 +59,7 @@ declare type Theme = GlobalTheme & {
         pinInput: ReturnType<typeof getPinInputTheme>;
         progress: ReturnType<typeof getProgressTheme>;
         radio: ReturnType<typeof getRadioTheme>;
+        refreshControl: ReturnType<typeof getRefreshControlTheme>;
         richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
         sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
         select: ReturnType<typeof getSelectTheme>;

package/types/theme/global/colors/global.d.ts

@@ -0,0 +1,3 @@
+import type { GlobalSystemPalette } from './types';
+declare const globalPalette: GlobalSystemPalette;
+export default globalPalette;

package/types/theme/global/colors/jobs.d.ts

@@ -0,0 +1,3 @@
+import type { SystemPalette } from './types';
+declare const jobsSystemPalette: SystemPalette;
+export default jobsSystemPalette;

package/types/theme/global/colors/legacySystemPalette.d.ts

@@ -0,0 +1,3 @@
+import type { LegacySystemPalette } from './types';
+declare const legacySystemPalette: LegacySystemPalette;
+export default legacySystemPalette;

package/types/theme/global/colors/types.d.ts

@@ -1,4 +1,43 @@
-export declare type SystemPalette = {
+export declare type GlobalSystemPalette = {
+    globalPrimary: string;
+    mutedGlobalPrimary: string;
+    onGlobalPrimary: string;
+    globalSecondary: string;
+    globalPrimaryOutline: string;
+    globalSecondaryOutline: string;
+    defaultGlobalSurface: string;
+    onDefaultGlobalSurface: string;
+    neutralGlobalSurface: string;
+    disabledOnDefaultGlobalSurface: string;
+    error: string;
+    errorSurface: string;
+    onErrorSurface: string;
+    warning: string;
+    warningSurface: string;
+    onWarningSurface: string;
+    success: string;
+    successSurface: string;
+    onSuccessSurface: string;
+    info: string;
+    infoSurface: string;
+    onInfoSurface: string;
+    archived: string;
+    archivedSurface: string;
+    onArchivedSurface: string;
+};
+export declare type BrandSystemPalette = {
+    primary: string;
+    mutedPrimary: string;
+    onPrimary: string;
+    secondary: string;
+    highlightedSecondarySurface: string;
+    onSecondary: string;
+    mutedSecondary: string;
+    disabledSecondary: string;
+    highlightedSurface: string;
+    lightHighlightedSurface: string;
+};
+export declare type LegacySystemPalette = {
     globalPrimary: string;
     globalPrimaryLight: string;
     globalPrimaryBackground: string;
@@ -42,24 +81,5 @@ export declare type SystemPalette = {
     black: string;
     inactiveBackground: string;
     shadow: string;
-    __alpha__globalPrimary: string;
-    __alpha__globalSecondary1: string;
-    __alpha__globalSecondary4: string;
-    __alpha__globalNeutral3: string;
-    __alpha__globalLabel1: string;
-    __alpha__globalLabel2: string;
-    __alpha__globalLabel3: string;
-    __alpha__globalLabel4: string;
-    __alpha__globalLabel5: string;
-    __alpha__globalLabel6: string;
-    __alpha__globalLabel7: string;
-    __alpha__globalLabel8: string;
-    __alpha__globalLabel9: string;
-    __alpha__primary1: string;
-    __alpha__primary2: string;
-    __alpha__secondary1: string;
-    __alpha__secondary2: string;
-    __alpha__secondary3: string;
-    __alpha__secondary4: string;
-    __alpha__lightHighlightedSurface: string;
 };
+export declare type SystemPalette = LegacySystemPalette & GlobalSystemPalette & BrandSystemPalette;

package/types/theme/global/index.d.ts

@@ -1,6 +1,7 @@
 import { scale as defaultScale } from './scale';
 import swagSystemPalette from './colors/swag';
 import workSystemPalette from './colors/work';
+import jobsSystemPalette from './colors/jobs';
 import type { Scale } from './scale';
 import type { SystemPalette } from './colors/types';
 declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
@@ -48,26 +49,34 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         black: string;
         inactiveBackground: string;
         shadow: string;
-        __alpha__globalPrimary: string;
-        __alpha__globalSecondary1: string;
-        __alpha__globalSecondary4: string;
-        __alpha__globalNeutral3: string;
-        __alpha__globalLabel1: string;
-        __alpha__globalLabel2: string;
-        __alpha__globalLabel3: string;
-        __alpha__globalLabel4: string;
-        __alpha__globalLabel5: string;
-        __alpha__globalLabel6: string;
-        __alpha__globalLabel7: string;
-        __alpha__globalLabel8: string;
-        __alpha__globalLabel9: string;
-        __alpha__primary1: string;
-        __alpha__primary2: string;
-        __alpha__secondary1: string;
-        __alpha__secondary2: string;
-        __alpha__secondary3: string;
-        __alpha__secondary4: string;
-        __alpha__lightHighlightedSurface: string;
+        mutedGlobalPrimary: string;
+        onGlobalPrimary: string;
+        globalSecondary: string;
+        globalPrimaryOutline: string;
+        globalSecondaryOutline: string;
+        defaultGlobalSurface: string;
+        onDefaultGlobalSurface: string;
+        neutralGlobalSurface: string;
+        disabledOnDefaultGlobalSurface: string;
+        error: string;
+        errorSurface: string;
+        onErrorSurface: string;
+        warningSurface: string;
+        onWarningSurface: string;
+        successSurface: string;
+        onSuccessSurface: string;
+        infoSurface: string;
+        onInfoSurface: string;
+        archivedSurface: string;
+        onArchivedSurface: string;
+        mutedPrimary: string;
+        onPrimary: string;
+        highlightedSecondarySurface: string;
+        onSecondary: string;
+        mutedSecondary: string;
+        disabledSecondary: string;
+        highlightedSurface: string;
+        lightHighlightedSurface: string;
     };
     fonts: import("./typography").Fonts;
     fontSizes: import("./typography").FontSizes;
@@ -79,4 +88,4 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
 };
 declare type GlobalTheme = ReturnType<typeof getGlobalTheme>;
 export type { GlobalTheme, Scale, SystemPalette };
-export { getGlobalTheme, defaultScale, swagSystemPalette, workSystemPalette };
+export { getGlobalTheme, defaultScale, swagSystemPalette, workSystemPalette, jobsSystemPalette, };

package/types/theme/index.d.ts

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

package/types/utils/helpers.d.ts

@@ -1,2 +1,4 @@
 export declare const isIOS: boolean;
 export declare const isAndroid: boolean;
+export declare const pick: (keys: Array<string>, props: Record<string, any>) => {};
+export declare const omit: (keys: Array<string>, props: Record<string, any>) => Record<string, any>;

package/src/components/Box/__tests__/helpers.spec.ts

@@ -1,14 +0,0 @@
-import { pick } from '../helpers';
-
-describe('pick', () => {
-  it('works', () => {
-    const keys = ['a', 'b', 'f'];
-    const props = { a: 1, b: true, c: 'outline', d: null, f: 'whatever' };
-
-    expect(pick(keys, props)).toEqual({
-      a: 1,
-      b: true,
-      f: 'whatever',
-    });
-  });
-});