@hero-design/rn 7.17.0 → 7.18.0

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/components/Progress/StyledProgressCircle.d.ts

@@ -1,12 +1,18 @@
 import { View, ViewProps } from 'react-native';
 import { ThemeIntent } from './types';
-declare const HalfCircleWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+declare const StyledContainer: 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 HalfCircleInnerFG: import("@emotion/native").StyledComponent<ViewProps & {
+declare const StyledHalfCircleWrapper: 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 StyledHalfCircleInnerFG: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
@@ -14,19 +20,19 @@ declare const HalfCircleInnerFG: import("@emotion/native").StyledComponent<ViewP
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const HalfCircleInnerBG: import("@emotion/native").StyledComponent<ViewProps & {
+declare const StyledHalfCircleInnerBG: 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 DonutCircle: import("@emotion/native").StyledComponent<ViewProps & {
+declare const StyledDonutCircle: 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 StrokeEnd: import("@emotion/native").StyledComponent<ViewProps & {
+declare const StyledStrokeEnd: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
@@ -34,4 +40,4 @@ declare const StrokeEnd: import("@emotion/native").StyledComponent<ViewProps & {
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { DonutCircle, HalfCircleWrapper, HalfCircleInnerFG, HalfCircleInnerBG, StrokeEnd, };
+export { StyledContainer, StyledDonutCircle, StyledHalfCircleWrapper, StyledHalfCircleInnerFG, StyledHalfCircleInnerBG, StyledStrokeEnd, };

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;

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

@@ -4,9 +4,11 @@ declare const getDrawerTheme: (theme: GlobalTheme) => {
         shadow: string;
         background: string;
         backdrop: string;
+        handler: string;
     };
     radii: {
         default: number;
+        handler: number;
     };
     shadows: {
         offset: {
@@ -17,5 +19,12 @@ declare const getDrawerTheme: (theme: GlobalTheme) => {
         radius: number;
         elevation: number;
     };
+    space: {
+        handlerPaddingVertical: number;
+    };
+    sizes: {
+        handlerWidth: number;
+        handlerHeight: number;
+    };
 };
 export default getDrawerTheme;

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

@@ -14,8 +14,9 @@ declare const getEmptyTheme: (theme: GlobalTheme) => {
         illustration: number;
     };
     space: {
-        medium: number;
-        large: number;
+        titleMargin: number;
+        illustrationMargin: number;
+        wrapperPadding: number;
     };
     fonts: {
         title: string;

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

@@ -10,8 +10,7 @@ declare const getProgressTheme: (theme: GlobalTheme) => {
         innerBackground: string;
     };
     sizes: {
-        radius: number;
-        strokeWidth: number;
+        circleWidth: number;
         barHeight: number;
     };
     radii: {

package/types/theme/getTheme.d.ts

@@ -0,0 +1,74 @@
+import { GlobalTheme, Scale, SystemPalette } 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';
+declare 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>;
+    };
+};
+declare const getTheme: (scale?: Scale, systemPallete?: SystemPalette) => Theme;
+export { Theme };
+export default getTheme;

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

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

package/types/theme/global/{colors.d.ts → colors/types.d.ts}

@@ -1,4 +1,7 @@
-declare const systemPalette: {
+export declare type SystemPalette = {
+    globalPrimary: string;
+    globalPrimaryLight: string;
+    globalPrimaryBackground: string;
     primary: string;
     primaryLight: string;
     primaryDark: string;
@@ -40,5 +43,3 @@ declare const systemPalette: {
     inactiveBackground: string;
     shadow: string;
 };
-declare type SystemPalette = typeof systemPalette;
-export { systemPalette, SystemPalette };

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

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

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

@@ -1,7 +1,12 @@
 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';
 declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
     colors: {
+        globalPrimary: string;
+        globalPrimaryLight: string;
+        globalPrimaryBackground: string;
         primary: string;
         primaryLight: string;
         primaryDark: string;
@@ -51,4 +56,4 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
     radii: import("./borders").Radii;
 };
 declare type GlobalTheme = ReturnType<typeof getGlobalTheme>;
-export { GlobalTheme, Scale, SystemPalette, getGlobalTheme, defaultScale, defaultSystemPalette, };
+export { GlobalTheme, Scale, SystemPalette, getGlobalTheme, defaultScale, swagSystemPalette, workSystemPalette, };

package/types/theme/index.d.ts

@@ -1,84 +1,7 @@
-import { GlobalTheme, Scale, SystemPalette } 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';
-declare 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>;
-    };
-};
-declare const getTheme: (scale?: Scale, systemPallete?: SystemPalette) => Theme;
-declare const theme: Theme;
-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 { Theme, getTheme, ThemeProvider, useTheme };
-export default theme;
+import getTheme, { Theme } from './getTheme';
+import ThemeProvider, { useTheme } from './ThemeProvider';
+import ThemeSwitcher from './ThemeSwitcher';
+import { swagSystemPalette, workSystemPalette } from './global';
+declare const defaultTheme: Theme;
+export { Theme, getTheme, ThemeProvider, ThemeSwitcher, useTheme, swagSystemPalette, workSystemPalette, };
+export default defaultTheme;

package/src/theme/global/colors.ts

@@ -1,50 +0,0 @@
-import palette, {
-  defaultMobilePalette as mobilePalette,
-} from '@hero-design/colors';
-
-const systemPalette = {
-  primary: palette.violet,
-  primaryLight: palette.violetLight60,
-  primaryDark: palette.purpleDark15,
-  primaryBackground: palette.violetLight90,
-  primaryBackgroundDark: mobilePalette.maasstrichtBlueLight30,
-  secondary: palette.dodgerBlue,
-  secondaryLight: palette.dodgerBlueLight75,
-  secondaryBackground: palette.dodgerBlueLight90,
-  info: palette.dodgerBlue,
-  infoMediumLight: mobilePalette.vodka,
-  infoLight: palette.dodgerBlueLight75,
-  infoBackground: palette.dodgerBlueLight90,
-  success: palette.green,
-  successLight: mobilePalette.emerald,
-  successDark: palette.greenDark30,
-  successBackground: palette.grotesqueGreenLight90,
-  danger: palette.red,
-  dangerMediumLight: mobilePalette.apple,
-  dangerLight: palette.redLight60,
-  dangerBackground: palette.redLight90,
-  warning: palette.orange,
-  warningLight: mobilePalette.mellowApricot,
-  warningDark: palette.orangeDark15,
-  warningBackground: palette.orangeLight90,
-  platformBackground: palette.white,
-  backgroundLight: palette.greyLight95,
-  backgroundDark: palette.greyDark75,
-  text: palette.greyDark75, // should be Maastricht Blue
-  subduedText: palette.greyDark30,
-  disabledText: palette.greyDark15,
-  disabledLightText: palette.greyLight45,
-  invertedText: palette.white,
-  outline: palette.greyLight60,
-  archived: palette.greyLight45,
-  archivedLight: mobilePalette.greyLight30,
-  archivedDark: mobilePalette.sonicSilver,
-  archivedBackground: mobilePalette.antiFlashWhite,
-  black: palette.black,
-  inactiveBackground: palette.greyDark30,
-  shadow: palette.greyLight60,
-};
-
-type SystemPalette = typeof systemPalette;
-
-export { systemPalette, SystemPalette };