@hero-design/rn 7.17.1 → 7.18.1

package/src/theme/getTheme.ts

@@ -0,0 +1,129 @@
+import {
+  GlobalTheme,
+  Scale,
+  SystemPalette,
+  getGlobalTheme,
+  defaultScale,
+  swagSystemPalette,
+} from './global';
+
+import getAccordionTheme from './components/accordion';
+import getAlertTheme from './components/alert';
+import getAvatarTheme from './components/avatar';
+import getBadgeTheme from './components/badge';
+import getBottomNavigationTheme from './components/bottomNavigation';
+import getBottomSheetTheme from './components/bottomSheet';
+import getButtonTheme from './components/button';
+import getCalendarTheme from './components/calendar';
+import getCardTheme from './components/card';
+import getCheckboxTheme from './components/checkbox';
+import getContentNavigatorTheme from './components/contentNavigator';
+import getDatePickerTheme from './components/datePicker';
+import getDividerTheme from './components/divider';
+import getDrawerTheme from './components/drawer';
+import getEmptyTheme from './components/empty';
+import getFABTheme from './components/fab';
+import getIconTheme from './components/icon';
+import getListTheme from './components/list';
+import getPinInputTheme from './components/pinInput';
+import getProgressTheme from './components/progress';
+import getRadioTheme from './components/radio';
+import getRichTextEditorTheme from './components/richTextEditor';
+import getSectionHeadingTheme from './components/sectionHeading';
+import getSelectTheme from './components/select';
+import getSpinnerTheme from './components/spinner';
+import getSwitchTheme from './components/switch';
+import getTabsTheme from './components/tabs';
+import getTagTheme from './components/tag';
+import getTextInputTheme from './components/textInput';
+import getTimePickerTheme from './components/timePicker';
+import getToastTheme from './components/toast';
+import getToolbarTheme from './components/toolbar';
+import getTypographyTheme from './components/typography';
+
+type Theme = GlobalTheme & {
+  __hd__: {
+    accordion: ReturnType<typeof getAccordionTheme>;
+    alert: ReturnType<typeof getAlertTheme>;
+    avatar: ReturnType<typeof getAvatarTheme>;
+    badge: ReturnType<typeof getBadgeTheme>;
+    bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
+    bottomSheet: ReturnType<typeof getBottomSheetTheme>;
+    button: ReturnType<typeof getButtonTheme>;
+    calendar: ReturnType<typeof getCalendarTheme>;
+    card: ReturnType<typeof getCardTheme>;
+    checkbox: ReturnType<typeof getCheckboxTheme>;
+    contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
+    datePicker: ReturnType<typeof getDatePickerTheme>;
+    divider: ReturnType<typeof getDividerTheme>;
+    drawer: ReturnType<typeof getDrawerTheme>;
+    empty: ReturnType<typeof getEmptyTheme>;
+    fab: ReturnType<typeof getFABTheme>;
+    icon: ReturnType<typeof getIconTheme>;
+    list: ReturnType<typeof getListTheme>;
+    pinInput: ReturnType<typeof getPinInputTheme>;
+    progress: ReturnType<typeof getProgressTheme>;
+    radio: ReturnType<typeof getRadioTheme>;
+    richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
+    sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
+    select: ReturnType<typeof getSelectTheme>;
+    spinner: ReturnType<typeof getSpinnerTheme>;
+    switch: ReturnType<typeof getSwitchTheme>;
+    tabs: ReturnType<typeof getTabsTheme>;
+    tag: ReturnType<typeof getTagTheme>;
+    textInput: ReturnType<typeof getTextInputTheme>;
+    timePicker: ReturnType<typeof getTimePickerTheme>;
+    toast: ReturnType<typeof getToastTheme>;
+    toolbar: ReturnType<typeof getToolbarTheme>;
+    typography: ReturnType<typeof getTypographyTheme>;
+  };
+};
+
+const getTheme = (
+  scale: Scale = defaultScale,
+  systemPallete: SystemPalette = swagSystemPalette
+): Theme => {
+  const globalTheme = getGlobalTheme(scale, systemPallete);
+  return {
+    ...globalTheme,
+    __hd__: {
+      accordion: getAccordionTheme(globalTheme),
+      avatar: getAvatarTheme(globalTheme),
+      alert: getAlertTheme(globalTheme),
+      badge: getBadgeTheme(globalTheme),
+      bottomNavigation: getBottomNavigationTheme(globalTheme),
+      bottomSheet: getBottomSheetTheme(globalTheme),
+      button: getButtonTheme(globalTheme),
+      calendar: getCalendarTheme(globalTheme),
+      card: getCardTheme(globalTheme),
+      checkbox: getCheckboxTheme(globalTheme),
+      contentNavigator: getContentNavigatorTheme(globalTheme),
+      datePicker: getDatePickerTheme(),
+      divider: getDividerTheme(globalTheme),
+      drawer: getDrawerTheme(globalTheme),
+      empty: getEmptyTheme(globalTheme),
+      fab: getFABTheme(globalTheme),
+      icon: getIconTheme(globalTheme),
+      list: getListTheme(globalTheme),
+      pinInput: getPinInputTheme(globalTheme),
+      progress: getProgressTheme(globalTheme),
+      radio: getRadioTheme(globalTheme),
+      richTextEditor: getRichTextEditorTheme(globalTheme),
+      sectionHeading: getSectionHeadingTheme(globalTheme),
+      select: getSelectTheme(globalTheme),
+      spinner: getSpinnerTheme(globalTheme),
+      switch: getSwitchTheme(globalTheme),
+      tabs: getTabsTheme(globalTheme),
+      tag: getTagTheme(globalTheme),
+      textInput: getTextInputTheme(globalTheme),
+      timePicker: getTimePickerTheme(),
+      toast: getToastTheme(globalTheme),
+      toolbar: getToolbarTheme(globalTheme),
+      typography: getTypographyTheme(globalTheme),
+    },
+  };
+};
+
+export { Theme };
+
+export default getTheme;

package/src/theme/global/{colors.ts → colors/swag.ts}

@@ -3,7 +3,12 @@ import {
   swagPalette,
 } from '@hero-design/colors';
 
-const systemPalette = {
+import { SystemPalette } from './types';
+
+const swagSystemPalette: SystemPalette = {
+  globalPrimary: palette.maasstrichtBlue,
+  globalPrimaryLight: palette.maasstrichtBlueLight50,
+  globalPrimaryBackground: palette.maasstrichtBlueLight90,
   primary: swagPalette.violet,
   primaryLight: swagPalette.violetLight50, // no longer needed after revising Button
   primaryDark: swagPalette.scarletGumLight30, // DEPRECATED
@@ -40,12 +45,10 @@ const systemPalette = {
   archived: palette.greyLight45, // no usage
   archivedLight: palette.greyLight30,
   archivedDark: palette.sonicSilver, // should replace archived as archived has no usage?
-  archivedBackground: palette.antiFlashWhite,
+  archivedBackground: palette.greyLight90,
   black: palette.black,
   inactiveBackground: palette.maasstrichtBlueLight50,
   shadow: palette.greyLight45, // waiting for new color
 };
 
-type SystemPalette = typeof systemPalette;
-
-export { systemPalette, SystemPalette };
+export default swagSystemPalette;

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

@@ -0,0 +1,45 @@
+export type SystemPalette = {
+  globalPrimary: string;
+  globalPrimaryLight: string;
+  globalPrimaryBackground: string;
+  primary: string;
+  primaryLight: string;
+  primaryDark: string;
+  primaryBackground: string;
+  primaryBackgroundDark: string;
+  secondary: string;
+  secondaryLight: string;
+  secondaryBackground: string;
+  info: string;
+  infoMediumLight: string;
+  infoLight: string;
+  infoBackground: string;
+  success: string;
+  successLight: string;
+  successDark: string;
+  successBackground: string;
+  danger: string;
+  dangerMediumLight: string;
+  dangerLight: string;
+  dangerBackground: string;
+  warning: string;
+  warningLight: string;
+  warningDark: string;
+  warningBackground: string;
+  platformBackground: string;
+  backgroundLight: string;
+  backgroundDark: string;
+  text: string;
+  subduedText: string;
+  disabledText: string;
+  disabledLightText: string;
+  invertedText: string;
+  outline: string;
+  archived: string;
+  archivedLight: string;
+  archivedDark: string;
+  archivedBackground: string;
+  black: string;
+  inactiveBackground: string;
+  shadow: string;
+};

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

@@ -0,0 +1,14 @@
+import { workPalette } from '@hero-design/colors';
+
+import { SystemPalette } from './types';
+import swag from './swag';
+
+const workSystemPalette: SystemPalette = {
+  ...swag,
+  primary: workPalette.gold,
+  primaryLight: workPalette.goldLight50,
+  primaryDark: workPalette.goldLight20,
+  primaryBackground: workPalette.goldLight90,
+};
+
+export default workSystemPalette;

package/src/theme/global/index.ts

@@ -1,5 +1,8 @@
 import { scale as defaultScale, Scale } from './scale';
-import { systemPalette as defaultSystemPalette, SystemPalette } from './colors';
+import { SystemPalette } from './colors/types';
+import swagSystemPalette from './colors/swag';
+import workSystemPalette from './colors/work';
+
 import { getFonts, getFontSizes, getLineHeights } from './typography';
 import { getSpace } from './space';
 import { getBorderWidths, getRadii } from './borders';
@@ -33,5 +36,6 @@ export {
   SystemPalette,
   getGlobalTheme,
   defaultScale,
-  defaultSystemPalette,
+  swagSystemPalette,
+  workSystemPalette,
 };

package/src/theme/index.ts

@@ -1,145 +1,18 @@
-import * as Emotion from '@emotion/react';
-
-import {
-  GlobalTheme,
-  Scale,
-  SystemPalette,
-  getGlobalTheme,
-  defaultScale,
-  defaultSystemPalette,
-} from './global';
-
-import getAccordionTheme from './components/accordion';
-import getAlertTheme from './components/alert';
-import getAvatarTheme from './components/avatar';
-import getBadgeTheme from './components/badge';
-import getBottomNavigationTheme from './components/bottomNavigation';
-import getBottomSheetTheme from './components/bottomSheet';
-import getButtonTheme from './components/button';
-import getCalendarTheme from './components/calendar';
-import getCardTheme from './components/card';
-import getCheckboxTheme from './components/checkbox';
-import getContentNavigatorTheme from './components/contentNavigator';
-import getDatePickerTheme from './components/datePicker';
-import getDividerTheme from './components/divider';
-import getDrawerTheme from './components/drawer';
-import getEmptyTheme from './components/empty';
-import getFABTheme from './components/fab';
-import getIconTheme from './components/icon';
-import getListTheme from './components/list';
-import getPinInputTheme from './components/pinInput';
-import getProgressTheme from './components/progress';
-import getRadioTheme from './components/radio';
-import getRichTextEditorTheme from './components/richTextEditor';
-import getSectionHeadingTheme from './components/sectionHeading';
-import getSelectTheme from './components/select';
-import getSpinnerTheme from './components/spinner';
-import getSwitchTheme from './components/switch';
-import getTabsTheme from './components/tabs';
-import getTagTheme from './components/tag';
-import getTextInputTheme from './components/textInput';
-import getTimePickerTheme from './components/timePicker';
-import getToastTheme from './components/toast';
-import getToolbarTheme from './components/toolbar';
-import getTypographyTheme from './components/typography';
-
-type Theme = GlobalTheme & {
-  __hd__: {
-    accordion: ReturnType<typeof getAccordionTheme>;
-    alert: ReturnType<typeof getAlertTheme>;
-    avatar: ReturnType<typeof getAvatarTheme>;
-    badge: ReturnType<typeof getBadgeTheme>;
-    bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
-    bottomSheet: ReturnType<typeof getBottomSheetTheme>;
-    button: ReturnType<typeof getButtonTheme>;
-    calendar: ReturnType<typeof getCalendarTheme>;
-    card: ReturnType<typeof getCardTheme>;
-    checkbox: ReturnType<typeof getCheckboxTheme>;
-    contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
-    datePicker: ReturnType<typeof getDatePickerTheme>;
-    divider: ReturnType<typeof getDividerTheme>;
-    drawer: ReturnType<typeof getDrawerTheme>;
-    empty: ReturnType<typeof getEmptyTheme>;
-    fab: ReturnType<typeof getFABTheme>;
-    icon: ReturnType<typeof getIconTheme>;
-    list: ReturnType<typeof getListTheme>;
-    pinInput: ReturnType<typeof getPinInputTheme>;
-    progress: ReturnType<typeof getProgressTheme>;
-    radio: ReturnType<typeof getRadioTheme>;
-    richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
-    sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
-    select: ReturnType<typeof getSelectTheme>;
-    spinner: ReturnType<typeof getSpinnerTheme>;
-    switch: ReturnType<typeof getSwitchTheme>;
-    tabs: ReturnType<typeof getTabsTheme>;
-    tag: ReturnType<typeof getTagTheme>;
-    textInput: ReturnType<typeof getTextInputTheme>;
-    timePicker: ReturnType<typeof getTimePickerTheme>;
-    toast: ReturnType<typeof getToastTheme>;
-    toolbar: ReturnType<typeof getToolbarTheme>;
-    typography: ReturnType<typeof getTypographyTheme>;
-  };
-};
-
-const getTheme = (
-  scale: Scale = defaultScale,
-  systemPallete: SystemPalette = defaultSystemPalette
-): Theme => {
-  const globalTheme = getGlobalTheme(scale, systemPallete);
-  return {
-    ...globalTheme,
-    __hd__: {
-      accordion: getAccordionTheme(globalTheme),
-      avatar: getAvatarTheme(globalTheme),
-      alert: getAlertTheme(globalTheme),
-      badge: getBadgeTheme(globalTheme),
-      bottomNavigation: getBottomNavigationTheme(globalTheme),
-      bottomSheet: getBottomSheetTheme(globalTheme),
-      button: getButtonTheme(globalTheme),
-      calendar: getCalendarTheme(globalTheme),
-      card: getCardTheme(globalTheme),
-      checkbox: getCheckboxTheme(globalTheme),
-      contentNavigator: getContentNavigatorTheme(globalTheme),
-      datePicker: getDatePickerTheme(),
-      divider: getDividerTheme(globalTheme),
-      drawer: getDrawerTheme(globalTheme),
-      empty: getEmptyTheme(globalTheme),
-      fab: getFABTheme(globalTheme),
-      icon: getIconTheme(globalTheme),
-      list: getListTheme(globalTheme),
-      pinInput: getPinInputTheme(globalTheme),
-      progress: getProgressTheme(globalTheme),
-      radio: getRadioTheme(globalTheme),
-      richTextEditor: getRichTextEditorTheme(globalTheme),
-      sectionHeading: getSectionHeadingTheme(globalTheme),
-      select: getSelectTheme(globalTheme),
-      spinner: getSpinnerTheme(globalTheme),
-      switch: getSwitchTheme(globalTheme),
-      tabs: getTabsTheme(globalTheme),
-      tag: getTagTheme(globalTheme),
-      textInput: getTextInputTheme(globalTheme),
-      timePicker: getTimePickerTheme(),
-      toast: getToastTheme(globalTheme),
-      toolbar: getToolbarTheme(globalTheme),
-      typography: getTypographyTheme(globalTheme),
-    },
-  };
+import getTheme, { Theme } from './getTheme';
+import ThemeProvider, { useTheme } from './ThemeProvider';
+import ThemeSwitcher from './ThemeSwitcher';
+import { swagSystemPalette, workSystemPalette } from './global';
+
+const defaultTheme = getTheme();
+
+export {
+  Theme,
+  getTheme,
+  ThemeProvider,
+  ThemeSwitcher,
+  useTheme,
+  swagSystemPalette,
+  workSystemPalette,
 };
 
-const theme = getTheme();
-
-export interface ThemeProviderProps {
-  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
-  children: React.ReactNode;
-}
-
-interface ThemeProviderType {
-  (props: ThemeProviderProps): React.ReactElement;
-}
-
-const ThemeProvider = Emotion.ThemeProvider as ThemeProviderType;
-
-const useTheme = Emotion.useTheme as () => Theme;
-export { Theme, getTheme, ThemeProvider, useTheme };
-
-export default theme;
+export default defaultTheme;

package/src/utils/scale.ts

@@ -1,8 +1,11 @@
-import { Dimensions } from 'react-native';
+import { Dimensions, Platform } from 'react-native';
 
 export const BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 
 export const horizontalScale = (size: number) => {
+  if (Platform.OS === 'web') {
+    return size;
+  }
   const { width, height } = Dimensions.get('window');
   const shortDimension = width < height ? width : height;
 

package/types/components/Button/Button.d.ts

@@ -49,6 +49,7 @@ export interface ButtonProps {
     text: ReactChild;
     /**
      * Button type.
+     * basic-transparent is deprecated and will be removed in the next major release.
      */
     variant?: 'basic-transparent' | 'filled' | 'outlined' | 'text';
 }

package/types/components/Drawer/DragableDrawer/__tests__/helpers.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/Drawer/DragableDrawer/__tests__/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/Drawer/DragableDrawer/helpers.d.ts

@@ -0,0 +1,8 @@
+export declare const getOffset: (height: number, percentage: number) => number;
+export declare type SnapPointsData = {
+    list: number[];
+    minHeightOffset: number;
+    maxHeightOffset: number;
+};
+export declare const calculateSnapPointsData: (minimumHeight: number, height: number, snapPoints: number[]) => SnapPointsData;
+export declare const calculateAnimatedToValue: (position: number, heightSnapPoints: number[]) => number;

package/types/components/Drawer/DragableDrawer/index.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+export interface DragableDrawerProps {
+    /**
+     * Drawer's content.
+     */
+    children?: ReactNode;
+    /**
+     * Initial visible height percentage of the drawer. Can be used to programmatically control the drawer height. Range: [0,100].
+     */
+    initialHeightPercentage?: number;
+    /**
+     * Mininum visible height percentage of the drawer. This will be the lowest point in snap points list. Range: [0,100].
+     */
+    minimumHeightPercentage?: number;
+    /**
+     * Callback function is called when the drawer expand to max position.
+     */
+    onExpanded?: () => void;
+    /**
+     * Callback function is called when the drawer collapsed to min position.
+     */
+    onCollapsed?: () => void;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Nearest height snap points that the drawer will attach to on release gesture. Range: [0,100]
+     */
+    snapPoints?: number[];
+}
+declare const DragableDrawer: ({ children, initialHeightPercentage, minimumHeightPercentage, snapPoints, onExpanded, onCollapsed, testID, }: DragableDrawerProps) => JSX.Element;
+export default DragableDrawer;

package/types/components/Drawer/StyledDrawer.d.ts

@@ -1,5 +1,13 @@
-import { Animated, View } from 'react-native';
-declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+import { Animated, View, ViewProps } from 'react-native';
+declare const StyledContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    enableShadow: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledDragableContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
@@ -13,7 +21,7 @@ declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const StyledDrawerContainer: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+declare const StyledDrawerContainer: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
     children?: import("react").ReactNode;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -21,4 +29,26 @@ declare const StyledDrawerContainer: import("@emotion/native").StyledComponent<A
 } & {
     enableShadow: boolean;
 }, {}, {}>;
-export { StyledBackdrop, StyledContainer, StyledDrawerContainer };
+declare const StyledDragableDrawerContainer: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    enableShadow: boolean;
+}, {}, {}>;
+declare const StyledHandlerContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledHandler: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    active?: boolean | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledBackdrop, StyledContainer, StyledDrawerContainer, StyledHandlerContainer, StyledHandler, StyledDragableContainer, StyledDragableDrawerContainer, };

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

@@ -21,5 +21,7 @@ interface DrawerProps {
      * */
     testID?: string;
 }
-declare const Drawer: ({ visible, children, hasBackdrop, onDismiss, testID, }: DrawerProps) => JSX.Element;
-export default Drawer;
+declare const _default: (({ visible, children, hasBackdrop, onDismiss, testID, }: DrawerProps) => JSX.Element) & {
+    Dragable: ({ children, initialHeightPercentage, minimumHeightPercentage, snapPoints, onExpanded, onCollapsed, testID, }: import("./DragableDrawer").DragableDrawerProps) => JSX.Element;
+};
+export default _default;

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

@@ -10,7 +10,7 @@ interface EmptyProps {
     description?: string;
     /**
      * Empty's variant
-     * 'dark' if rendered on a dark background and 'white' otherwise
+     * 'dark' if rendered on a dark background and 'light' otherwise
      */
     variant?: 'light' | 'dark';
     /**

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

@@ -1,2 +1,2 @@
-declare const isHeroIcon: (x: any) => x is "number" | "image" | "menu" | "switch" | "list" | "bold" | "warning" | "activate" | "add-emoji" | "add-person" | "adjustment" | "alignment" | "archive" | "bank" | "bell" | "billing" | "bookmark" | "box-check" | "box" | "buildings" | "cake" | "calendar-clock" | "calendar" | "candy-box-menu" | "carat-down-small" | "carat-down" | "carat-left" | "carat-right" | "carat-up" | "circle-add" | "circle-cancel" | "circle-check" | "circle-down" | "circle-info" | "circle-left" | "circle-ok" | "circle-pencil" | "circle-question" | "circle-remove" | "circle-right" | "circle-up" | "circle-warning" | "clock" | "clock-3" | "cloud-download" | "cloud-upload" | "cog" | "coin" | "contacts" | "credit-card" | "diamond" | "direction-arrows" | "directory" | "document" | "dollar-coin-shine" | "double-buildings" | "edit-template" | "envelope" | "expense" | "eye-circle" | "eye-invisible" | "eye" | "face-meh" | "face-sad" | "face-smiley" | "feed" | "feedbacks" | "file-certified" | "file-clone" | "file-copy" | "file-csv" | "file-dispose" | "file-doc" | "file-excel" | "file-export" | "file-lock" | "file-pdf" | "file-powerpoint" | "file-search" | "file-secured" | "file-sheets" | "file-slide" | "file-verified" | "file-word" | "file" | "filter-outlined" | "folder-user" | "folder" | "format-bold" | "format-heading1" | "format-heading2" | "format-italic" | "format-list-bulleted" | "format-list-numbered" | "format-underlined" | "funnel-filter" | "global-dollar" | "globe" | "graduation-cap" | "graph" | "happy-sun" | "health-bag" | "heart" | "home" | "import" | "incident-siren" | "instapay" | "loading" | "loading-2" | "location" | "lock" | "looks-one" | "looks-two" | "mandatory" | "media-content" | "moneybag" | "moon" | "multiple-stars" | "multiple-users" | "node" | "open-folder" | "paperclip" | "payment-summary" | "pencil" | "phone" | "piggy-bank" | "plane" | "play-circle" | "print" | "raising-hands" | "reply" | "reply-arrow" | "reschedule" | "rostering" | "save" | "schedule-send" | "schedule" | "search-person" | "send" | "speaker" | "star-award" | "star-badge" | "star-medal" | "star" | "steps-circle" | "stopwatch" | "suitcase" | "survey" | "swag" | "tag" | "target" | "teams" | "timesheet" | "touch-id" | "trash-bin" | "unlock" | "user" | "video-1" | "video-2" | "activate-outlined" | "add-person-outlined" | "add-section-outlined" | "add-time-outlined" | "add" | "adjustment-outlined" | "alignment-2-outlined" | "alignment-outlined" | "all-caps" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "at-sign" | "bell-outlined" | "billing-outlined" | "body-outlined" | "bookmark-outlined" | "box-check-outlined" | "box-outlined" | "bullet-points" | "cake-outlined" | "calendar-dates-outlined" | "calendar-star-outlined" | "camera-outlined" | "cancel" | "checkmark" | "circle-add-outlined" | "circle-cancel-outlined" | "circle-down-outlined" | "circle-info-outlined" | "circle-left-outlined" | "circle-ok-outlined" | "circle-question-outlined" | "circle-remove-outlined" | "circle-right-outlined" | "circle-up-outlined" | "circle-warning-outlined" | "clock-2-outlined" | "clock-outlined" | "cog-outlined" | "coin-outlined" | "comment-outlined" | "contacts-outlined" | "credit-card-outlined" | "direction-arrows-outlined" | "directory-outlined" | "document-outlined" | "dollar-coin-shine-outlined" | "dollar-sign" | "double-buildings-outlined" | "double-left-arrows" | "double-right-arrows" | "download-outlined" | "edit-template-outlined" | "email-outlined" | "enter-arrow" | "envelope-outlined" | "expense-outlined" | "external-link" | "eye-invisible-outlined" | "eye-outlined" | "face-id" | "face-meh-outlined" | "face-open-smiley-outlined" | "face-sad-outlined" | "face-smiley-outlined" | "feed-outlined" | "file-certified-outlined" | "file-clone-outlined" | "file-copy-outlined" | "file-dispose-outlined" | "file-download-outlined" | "file-export-outlined" | "file-lock-outlined" | "file-outlined" | "file-search-outlined" | "file-secured-outlined" | "file-verified-outlined" | "folder-outlined" | "folder-user-outlined" | "funnel-filter-outline" | "graph-outlined" | "happy-sun-outlined" | "health-bag-outlined" | "heart-outlined" | "home-outlined" | "image-outlined" | "import-outlined" | "instapay-outlined" | "italic" | "link-1" | "link-2" | "list-outlined" | "location-outlined" | "lock-outlined" | "locked-file-outlined" | "log-out" | "media-content-outlined" | "menu-close" | "menu-expand" | "menu-fold-outlined" | "menu-unfold-outlined" | "moneybag-outlined" | "moon-outlined" | "more-horizontal" | "more-vertical" | "multiple-folders-outlined" | "multiple-users-outlined" | "node-outlined" | "number-points" | "payment-summary-outlined" | "payslip-outlined" | "pencil-outlined" | "percentage" | "phone-outlined" | "piggy-bank-outlined" | "plane-outlined" | "play-circle-outlined" | "print-outlined" | "qr-code-outlined" | "re-assign" | "redeem" | "refresh" | "remove" | "reply-outlined" | "restart" | "return-arrow" | "rostering-outlined" | "save-outlined" | "schedule-outlined" | "search-outlined" | "send-outlined" | "share-1" | "share-2" | "single-down-arrow" | "single-left-arrow" | "single-right-arrow" | "single-up-arrow" | "speaker-outlined" | "star-outlined" | "stopwatch-outlined" | "strikethrough" | "suitcase-outlined" | "survey-outlined" | "switch-outlined" | "sync" | "target-outlined" | "timesheet-outlined" | "transfer" | "trash-bin-outlined" | "unavailable" | "underline" | "unlock-outlined" | "upload-outlined" | "user-circle-outlined" | "user-outlined" | "user-rectangle-outlined" | "video-1-outlined" | "video-2-outlined" | "wallet-outlined";
+declare const isHeroIcon: (x: any) => x is "number" | "swag" | "bold" | "menu" | "image" | "switch" | "list" | "warning" | "activate" | "add-emoji" | "add-person" | "adjustment" | "alignment" | "archive" | "bank" | "bell" | "billing" | "bookmark" | "box-check" | "box" | "buildings" | "cake" | "calendar-clock" | "calendar" | "candy-box-menu" | "carat-down-small" | "carat-down" | "carat-left" | "carat-right" | "carat-up" | "circle-add" | "circle-cancel" | "circle-check" | "circle-down" | "circle-info" | "circle-left" | "circle-ok" | "circle-pencil" | "circle-question" | "circle-remove" | "circle-right" | "circle-up" | "circle-warning" | "clock" | "clock-3" | "cloud-download" | "cloud-upload" | "cog" | "coin" | "contacts" | "credit-card" | "diamond" | "direction-arrows" | "directory" | "document" | "dollar-coin-shine" | "double-buildings" | "edit-template" | "envelope" | "expense" | "eye-circle" | "eye-invisible" | "eye" | "face-meh" | "face-sad" | "face-smiley" | "feed" | "feedbacks" | "file-certified" | "file-clone" | "file-copy" | "file-csv" | "file-dispose" | "file-doc" | "file-excel" | "file-export" | "file-lock" | "file-pdf" | "file-powerpoint" | "file-search" | "file-secured" | "file-sheets" | "file-slide" | "file-verified" | "file-word" | "file" | "filter-outlined" | "folder-user" | "folder" | "format-bold" | "format-heading1" | "format-heading2" | "format-italic" | "format-list-bulleted" | "format-list-numbered" | "format-underlined" | "funnel-filter" | "global-dollar" | "globe" | "graduation-cap" | "graph" | "happy-sun" | "health-bag" | "heart" | "home" | "import" | "incident-siren" | "instapay" | "loading" | "loading-2" | "location" | "lock" | "looks-one" | "looks-two" | "mandatory" | "media-content" | "moneybag" | "moon" | "multiple-stars" | "multiple-users" | "node" | "open-folder" | "paperclip" | "payment-summary" | "pencil" | "phone" | "piggy-bank" | "plane" | "play-circle" | "print" | "raising-hands" | "reply" | "reply-arrow" | "reschedule" | "rostering" | "save" | "schedule-send" | "schedule" | "search-person" | "send" | "speaker" | "star-award" | "star-badge" | "star-medal" | "star" | "steps-circle" | "stopwatch" | "suitcase" | "survey" | "tag" | "target" | "teams" | "timesheet" | "touch-id" | "trash-bin" | "unlock" | "user" | "video-1" | "video-2" | "activate-outlined" | "add-person-outlined" | "add-section-outlined" | "add-time-outlined" | "add" | "adjustment-outlined" | "alignment-2-outlined" | "alignment-outlined" | "all-caps" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "at-sign" | "bell-outlined" | "billing-outlined" | "body-outlined" | "bookmark-outlined" | "box-check-outlined" | "box-outlined" | "bullet-points" | "cake-outlined" | "calendar-dates-outlined" | "calendar-star-outlined" | "camera-outlined" | "cancel" | "checkmark" | "circle-add-outlined" | "circle-cancel-outlined" | "circle-down-outlined" | "circle-info-outlined" | "circle-left-outlined" | "circle-ok-outlined" | "circle-question-outlined" | "circle-remove-outlined" | "circle-right-outlined" | "circle-up-outlined" | "circle-warning-outlined" | "clock-2-outlined" | "clock-outlined" | "cog-outlined" | "coin-outlined" | "comment-outlined" | "contacts-outlined" | "credit-card-outlined" | "direction-arrows-outlined" | "directory-outlined" | "document-outlined" | "dollar-coin-shine-outlined" | "dollar-sign" | "double-buildings-outlined" | "double-left-arrows" | "double-right-arrows" | "download-outlined" | "edit-template-outlined" | "email-outlined" | "enter-arrow" | "envelope-outlined" | "expense-outlined" | "external-link" | "eye-invisible-outlined" | "eye-outlined" | "face-id" | "face-meh-outlined" | "face-open-smiley-outlined" | "face-sad-outlined" | "face-smiley-outlined" | "feed-outlined" | "file-certified-outlined" | "file-clone-outlined" | "file-copy-outlined" | "file-dispose-outlined" | "file-download-outlined" | "file-export-outlined" | "file-lock-outlined" | "file-outlined" | "file-search-outlined" | "file-secured-outlined" | "file-verified-outlined" | "folder-outlined" | "folder-user-outlined" | "funnel-filter-outline" | "graph-outlined" | "happy-sun-outlined" | "health-bag-outlined" | "heart-outlined" | "home-outlined" | "image-outlined" | "import-outlined" | "instapay-outlined" | "italic" | "link-1" | "link-2" | "list-outlined" | "location-outlined" | "lock-outlined" | "locked-file-outlined" | "log-out" | "media-content-outlined" | "menu-close" | "menu-expand" | "menu-fold-outlined" | "menu-unfold-outlined" | "moneybag-outlined" | "moon-outlined" | "more-horizontal" | "more-vertical" | "multiple-folders-outlined" | "multiple-users-outlined" | "node-outlined" | "number-points" | "payment-summary-outlined" | "payslip-outlined" | "pencil-outlined" | "percentage" | "phone-outlined" | "piggy-bank-outlined" | "plane-outlined" | "play-circle-outlined" | "print-outlined" | "qr-code-outlined" | "re-assign" | "redeem" | "refresh" | "remove" | "reply-outlined" | "restart" | "return-arrow" | "rostering-outlined" | "save-outlined" | "schedule-outlined" | "search-outlined" | "send-outlined" | "share-1" | "share-2" | "single-down-arrow" | "single-left-arrow" | "single-right-arrow" | "single-up-arrow" | "speaker-outlined" | "star-outlined" | "stopwatch-outlined" | "strikethrough" | "suitcase-outlined" | "survey-outlined" | "switch-outlined" | "sync" | "target-outlined" | "timesheet-outlined" | "transfer" | "trash-bin-outlined" | "unavailable" | "underline" | "unlock-outlined" | "upload-outlined" | "user-circle-outlined" | "user-outlined" | "user-rectangle-outlined" | "video-1-outlined" | "video-2-outlined" | "wallet-outlined";
 export { isHeroIcon };

package/types/index.d.ts

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

package/types/theme/ThemeProvider.d.ts

@@ -0,0 +1,12 @@
+import { Theme } from './getTheme';
+export interface ThemeProviderProps {
+    theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+    children: React.ReactNode;
+}
+interface ThemeProviderType {
+    (props: ThemeProviderProps): React.ReactElement;
+}
+declare const ThemeProvider: ThemeProviderType;
+declare const useTheme: () => Theme;
+export { useTheme };
+export default ThemeProvider;

package/types/theme/ThemeSwitcher.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type ThemeName = 'swag' | 'work';
+declare const ThemeSwitcher: ({ name, children, }: {
+    name?: ThemeName | undefined;
+    children: React.ReactNode;
+}) => JSX.Element;
+export default ThemeSwitcher;

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

@@ -5,6 +5,7 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
     };
     fonts: {
         default: string;
+        utility: string;
     };
     fontSize: {
         default: number;
@@ -51,7 +52,6 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
         buttonPadding: number;
         iconPadding: number;
         utilityPadding: number;
-        utilityIconPadding: number;
     };
 };
 export default getButtonTheme;