@hero-design/rn 7.20.0 → 7.21.0

package/src/theme/getTheme.ts

@@ -17,6 +17,7 @@ import getDrawerTheme from './components/drawer';
 import getEmptyTheme from './components/empty';
 import getFABTheme from './components/fab';
 import getIconTheme from './components/icon';
+import getImageTheme from './components/image';
 import getListTheme from './components/list';
 import getPinInputTheme from './components/pinInput';
 import getProgressTheme from './components/progress';
@@ -24,6 +25,7 @@ import getRadioTheme from './components/radio';
 import getRichTextEditorTheme from './components/richTextEditor';
 import getSectionHeadingTheme from './components/sectionHeading';
 import getSelectTheme from './components/select';
+import getSliderTheme from './components/slider';
 import getSpinnerTheme from './components/spinner';
 import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
@@ -33,6 +35,7 @@ import getTimePickerTheme from './components/timePicker';
 import getToastTheme from './components/toast';
 import getToolbarTheme from './components/toolbar';
 import getTypographyTheme from './components/typography';
+
 import type { GlobalTheme, Scale, SystemPalette } from './global';
 
 type Theme = GlobalTheme & {
@@ -54,6 +57,7 @@ type Theme = GlobalTheme & {
     empty: ReturnType<typeof getEmptyTheme>;
     fab: ReturnType<typeof getFABTheme>;
     icon: ReturnType<typeof getIconTheme>;
+    image: ReturnType<typeof getImageTheme>;
     list: ReturnType<typeof getListTheme>;
     pinInput: ReturnType<typeof getPinInputTheme>;
     progress: ReturnType<typeof getProgressTheme>;
@@ -61,6 +65,7 @@ type Theme = GlobalTheme & {
     richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
     sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
     select: ReturnType<typeof getSelectTheme>;
+    slider: ReturnType<typeof getSliderTheme>;
     spinner: ReturnType<typeof getSpinnerTheme>;
     switch: ReturnType<typeof getSwitchTheme>;
     tabs: ReturnType<typeof getTabsTheme>;
@@ -92,12 +97,13 @@ const getTheme = (
       card: getCardTheme(globalTheme),
       checkbox: getCheckboxTheme(globalTheme),
       contentNavigator: getContentNavigatorTheme(globalTheme),
-      datePicker: getDatePickerTheme(),
+      datePicker: getDatePickerTheme(globalTheme),
       divider: getDividerTheme(globalTheme),
       drawer: getDrawerTheme(globalTheme),
       empty: getEmptyTheme(globalTheme),
       fab: getFABTheme(globalTheme),
       icon: getIconTheme(globalTheme),
+      image: getImageTheme(globalTheme),
       list: getListTheme(globalTheme),
       pinInput: getPinInputTheme(globalTheme),
       progress: getProgressTheme(globalTheme),
@@ -105,12 +111,13 @@ const getTheme = (
       richTextEditor: getRichTextEditorTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
       select: getSelectTheme(globalTheme),
+      slider: getSliderTheme(globalTheme),
       spinner: getSpinnerTheme(globalTheme),
       switch: getSwitchTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),
       tag: getTagTheme(globalTheme),
       textInput: getTextInputTheme(globalTheme),
-      timePicker: getTimePickerTheme(),
+      timePicker: getTimePickerTheme(globalTheme),
       toast: getToastTheme(globalTheme),
       toolbar: getToolbarTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),

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

@@ -52,6 +52,7 @@ const swagSystemPalette: SystemPalette = {
   __alpha__globalPrimary: palette.maasstrichtBlue,
 
   __alpha__globalSecondary1: palette.maasstrichtBlueLight30,
+  __alpha__globalSecondary4: palette.maasstrichtBlueLight90,
 
   __alpha__globalNeutral3: palette.greyLight90,
 
@@ -65,6 +66,7 @@ const swagSystemPalette: SystemPalette = {
   __alpha__globalLabel8: palette.honeydew,
   __alpha__globalLabel9: palette.aliceBlue,
 
+  __alpha__primary1: swagPalette.scarletGum,
   __alpha__primary2: swagPalette.mauve,
 
   __alpha__secondary1: swagPalette.scarletGumLight30,

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

@@ -46,6 +46,7 @@ export type SystemPalette = {
   __alpha__globalPrimary: string;
 
   __alpha__globalSecondary1: string;
+  __alpha__globalSecondary4: string;
 
   __alpha__globalNeutral3: string;
 
@@ -59,6 +60,7 @@ export type SystemPalette = {
   __alpha__globalLabel8: string;
   __alpha__globalLabel9: string;
 
+  __alpha__primary1: string;
   __alpha__primary2: string;
 
   __alpha__secondary1: string;

package/src/theme/global/index.ts

@@ -4,6 +4,7 @@ import workSystemPalette from './colors/work';
 
 import { getFonts, getFontSizes, getLineHeights } from './typography';
 import { getSpace } from './space';
+import { getSizes } from './sizes';
 import { getBorderWidths, getRadii } from './borders';
 import type { Scale } from './scale';
 import type { SystemPalette } from './colors/types';
@@ -14,6 +15,7 @@ const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
   const lineHeights = getLineHeights(fontSizes);
   const borderWidths = getBorderWidths(scale.borderWidth);
   const space = getSpace(scale.space);
+  const sizes = getSizes(scale.size);
   const radii = getRadii(scale.radius);
 
   return {
@@ -25,6 +27,7 @@ const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
     lineHeights,
     borderWidths,
     space,
+    sizes,
     radii,
   };
 };

package/src/theme/global/scale.ts

@@ -2,6 +2,8 @@ const BASE_BORDER_WIDTH = 1;
 
 const BASE_SPACE = 8;
 
+const BASE_SIZE = 8;
+
 const BASE_FONT = 'BeVietnamPro';
 
 const BASE_FONT_SIZE = 10;
@@ -11,6 +13,7 @@ const BASE_RADIUS = 4;
 const scale = {
   borderWidth: BASE_BORDER_WIDTH,
   space: BASE_SPACE,
+  size: BASE_SIZE,
   font: BASE_FONT,
   fontSize: BASE_FONT_SIZE,
   radius: BASE_RADIUS,

package/src/theme/global/sizes.ts

@@ -0,0 +1,29 @@
+import { getSpace } from './space';
+import type { Space } from './space';
+import { scale } from '../../utils/scale';
+
+interface Sizes extends Space {
+  xxxxxlarge: number;
+  '6xlarge': number;
+  '7xlarge': number;
+  '9xlarge': number;
+  '14xlarge': number;
+  '15xlarge': number;
+  '18xlarge': number;
+  '19xlarge': number;
+}
+
+const getSizes = (baseSize: number): Sizes => ({
+  ...getSpace(baseSize),
+  xxxxxlarge: scale(baseSize * 8), // 64
+  '6xlarge': scale(baseSize * 9), // 72
+  '7xlarge': scale(baseSize * 10), // 80
+  '9xlarge': scale(baseSize * 12), // 96
+  '14xlarge': scale(baseSize * 17), // 136
+  '15xlarge': scale(baseSize * 18), // 144
+  '18xlarge': scale(baseSize * 21), // 168
+  '19xlarge': scale(baseSize * 22), // 176
+});
+
+export { getSizes };
+export type { Sizes };

package/src/types.ts

@@ -1,4 +1,3 @@
-import { ToolbarButtonName } from './components/RichTextEditor';
 import type { BottomNavigationTabType } from './components/BottomNavigation';
 import type { IconName } from './components/Icon';
 import type { SingleSelectProps, MultiSelectProps } from './components/Select';
@@ -26,5 +25,4 @@ export type {
   TabType,
   TextInputProps,
   Theme,
-  ToolbarButtonName,
 };

package/testUtils/setup.tsx

@@ -1,3 +1,7 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/prefer-stateless-function */
+/* eslint-disable max-classes-per-file */
 jest.mock('react-native-vector-icons', () => ({
   createIconSetFromIcoMoon: jest.fn(() => 'HeroIcon'),
 }));
@@ -52,6 +56,16 @@ jest.mock('@react-native-community/datetimepicker', () => {
   };
 });
 
+jest.mock('@react-native-community/slider', () => {
+  const React = jest.requireActual('react');
+
+  return class Slider extends React.Component {
+    render() {
+      return React.createElement('Slider', this.props, this.props.children);
+    }
+  };
+});
+
 jest.mock('react-native-webview', () => {
   const React = jest.requireActual('react');
 

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

@@ -17,6 +17,10 @@ interface BottomSheetProps {
      * Bottom sheet's content.
      */
     children?: ReactNode;
+    /**
+     * Callback is called when the Bottom Sheet finishes running animation.
+     */
+    onAnimationEnd?: () => void;
     /**
      * Callback is called when the Bottom Sheet is opened.
      */
@@ -51,5 +55,5 @@ interface BottomSheetProps {
      */
     testID?: string;
 }
-declare const BottomSheet: ({ open, header, footer, children, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, }: BottomSheetProps) => JSX.Element;
+declare const BottomSheet: ({ open, header, footer, children, onAnimationEnd, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, }: BottomSheetProps) => JSX.Element;
 export default BottomSheet;

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

@@ -6,12 +6,6 @@ declare const StyledWrapper: import("@emotion/native").StyledComponent<import("r
 }, {}, {
     ref?: import("react").Ref<View>;
 }>;
-declare const StyledIllustration: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
-}, {}, {
-    ref?: import("react").Ref<View>;
-}>;
 declare const StyledTitle: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;
@@ -28,4 +22,4 @@ declare const StyledDescription: import("@emotion/native").StyledComponent<impor
 }, {}, {
     ref?: import("react").Ref<Text>;
 }>;
-export { StyledWrapper, StyledIllustration, StyledTitle, StyledDescription };
+export { StyledWrapper, StyledTitle, StyledDescription };

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

@@ -1,5 +1,11 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle, ImageProps as RNImageProps } from 'react-native';
+import { ImageProps } from '../Image';
 interface EmptyProps {
+    /**
+     * Image to be displayed.
+     */
+    image?: ReactElement<ImageProps | RNImageProps>;
     /**
      * Empty's title.
      */
@@ -22,5 +28,5 @@ interface EmptyProps {
      */
     testID?: string;
 }
-declare const Empty: ({ title, description, style, testID, variant, }: EmptyProps) => JSX.Element;
+declare const Empty: ({ image, title, description, style, testID, variant, }: EmptyProps) => JSX.Element;
 export default Empty;

package/types/components/Image/__tests__/index.spec.d.ts

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

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

@@ -0,0 +1,17 @@
+import type { ImageProps as RNImageProps } from 'react-native';
+export interface ImageProps extends RNImageProps {
+    /**
+     * Whether the image is rounded.
+     */
+    rounded?: boolean;
+    /**
+     * Image sizes, following the same sizes as the `sizes` global theme.
+     */
+    size?: '6xlarge' | '15xlarge';
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Image: ({ rounded, size, testID, style, ...imageNativeProps }: ImageProps) => JSX.Element;
+export default Image;

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

@@ -1,4 +1,4 @@
-import { ToolbarButtonName } from './constants';
+import { ToolbarButtonName } from './types';
 export interface EditorToolbarProps {
     /**
      * List of buttons to display in toolbar

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

@@ -9,6 +9,10 @@ export declare type EditorValue = {
     children: any;
 }[];
 export interface RichTextEditorProps {
+    /**
+     * If true, the editor will be focused when the user enters the screen
+     */
+    autoFocus?: boolean;
     /**
      * Error message
      */

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

@@ -7,13 +7,3 @@ export declare enum ToolbarEvents {
     HeadingOne = "heading-one",
     HeadingTwo = "heading-two"
 }
-export declare enum ToolbarButtonName {
-    Bold = "bold",
-    Italic = "italic",
-    Underline = "underline",
-    BulletedList = "bulletedList",
-    NumberedList = "numberedList",
-    HeadingOne = "headingOne",
-    HeadingTwo = "headingTwo",
-    Seperator = "|"
-}

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

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

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

@@ -0,0 +1 @@
+export declare type ToolbarButtonName = 'bold' | 'italic' | 'underline' | 'bulletedList' | 'numberedList' | 'headingOne' | 'headingTwo' | '|';

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

@@ -1,8 +1,11 @@
+import React from 'react';
+import type { SectionList } from 'react-native';
 import type { MultiSelectProps } from '.';
-import type { OptionType, SectionData } from '../types';
+import type { OptionType, SectionData, SectionType } from '../types';
 declare type OptionListProps<V, T extends OptionType<V>> = Pick<MultiSelectProps<V, T>, 'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange' | 'value' | 'renderOption'> & {
     onPress: (value: V[]) => void;
     sections: SectionData<V, T>[];
+    sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 };
-declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, }: OptionListProps<V, T>) => JSX.Element;
+declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, sectionListRef, }: OptionListProps<V, T>) => JSX.Element;
 export default OptionList;

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

@@ -1,3 +1,5 @@
+import React from 'react';
+import type { TextInputProps as NativeTextInputProps } from 'react-native';
 import type { OptionType, SelectProps } from '../types';
 export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>> extends SelectProps<V, T> {
     /**
@@ -12,6 +14,10 @@ export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>> ex
      * Footer label.
      */
     footerLabel: string;
+    /**
+     * Customise the selected value rendering.
+     */
+    renderSelectedValue?: (selectedValue: V[], inputProps: NativeTextInputProps) => React.ReactNode;
 }
-declare function MultiSelect<V, T extends OptionType<V>>({ footerLabel, label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, query, error, editable, disabled, numberOfLines, style, testID, value, }: MultiSelectProps<V, T>): JSX.Element;
+declare function MultiSelect<V, T extends OptionType<V>>({ footerLabel, label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, numberOfLines, style, testID, value, }: MultiSelectProps<V, T>): JSX.Element;
 export default MultiSelect;

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

@@ -1,8 +1,11 @@
+import React from 'react';
+import type { SectionList } from 'react-native';
 import type { SingleSelectProps } from '.';
-import type { OptionType, SectionData } from '../types';
+import type { OptionType, SectionData, SectionType } from '../types';
 declare type OptionListProps<V, T extends OptionType<V>> = Pick<SingleSelectProps<V, T>, 'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange' | 'value' | 'renderOption'> & {
     onPress: (value: V | null) => void;
     sections: SectionData<V, T>[];
+    sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 };
-declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, }: OptionListProps<V, T>) => JSX.Element;
+declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, sectionListRef, }: OptionListProps<V, T>) => JSX.Element;
 export default OptionList;

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

@@ -1,3 +1,5 @@
+import React from 'react';
+import type { TextInputProps as NativeTextInputProps } from 'react-native';
 import type { OptionType, SelectProps } from '../types';
 export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>> extends SelectProps<V, T> {
     /**
@@ -5,9 +7,13 @@ export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>> e
      */
     value: V | null;
     /**
-     * on select event handler
+     * On select event handler
      */
     onConfirm: (value: V | null) => void;
+    /**
+     * Customise the selected value rendering.
+     */
+    renderSelectedValue?: (selectedValue: V | null, inputProps: NativeTextInputProps) => React.ReactNode;
 }
-declare const SingleSelect: <V, T extends OptionType<V>>({ label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, query, error, editable, disabled, numberOfLines, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element;
+declare const SingleSelect: <V, T extends OptionType<V>>({ label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, numberOfLines, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element;
 export default SingleSelect;

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

@@ -1,11 +1,12 @@
+import React from 'react';
+import { SectionList } from 'react-native';
 import type { ReactElement } from 'react';
 import type { SectionListRenderItemInfo } from 'react-native';
-import type { ScrollParams } from './helpers';
 import type { SectionData, OptionType, SelectProps, SectionType } from './types';
 export declare type StyledOptionListProps<V, T extends OptionType<V>> = Pick<SelectProps<V, T>, 'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange'> & {
-    scrollParams: ScrollParams;
     sections: SectionData<V, T>[];
     renderItem: (info: SectionListRenderItemInfo<T, SectionType>) => ReactElement;
+    sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 };
-declare const StyledOptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onQueryChange, sections, renderItem, scrollParams, }: StyledOptionListProps<V, T>) => JSX.Element;
+declare const StyledOptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onQueryChange, sections, renderItem, sectionListRef, }: StyledOptionListProps<V, T>) => JSX.Element;
 export default StyledOptionList;

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

@@ -2,7 +2,7 @@ import MultiSelect from './MultiSelect';
 import type { MultiSelectProps } from './MultiSelect';
 import type { SingleSelectProps } from './SingleSelect';
 export type { MultiSelectProps, SingleSelectProps };
-declare const _default: (<V, T extends import("./types").OptionType<V>>({ label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, query, error, editable, disabled, numberOfLines, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element) & {
+declare const _default: (<V, T extends import("./types").OptionType<V>>({ label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, numberOfLines, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element) & {
     Multi: typeof MultiSelect;
 };
 export default _default;

package/types/components/Slider/__tests__/index.spec.d.ts

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

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

@@ -0,0 +1,52 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export interface SliderProps {
+    /**
+     * Minimum value of the slider.
+     * Defaults to 0.
+     */
+    minimumValue?: number;
+    /**
+     * Maximum value of the slider.
+     * Defaults to 1.
+     */
+    maximumValue?: number;
+    /**
+     * Step value of the slider.
+     * The value should be between 0 and (maximumValue - minimumValue).
+     * Defaults to 0.
+     */
+    step?: number;
+    /**
+     * Value of the slider.
+     * Defaults to 0.
+     */
+    value?: number;
+    /**
+     * Callback continuously called while the user is dragging the slider.
+     */
+    onValueChange?: (value: number) => void;
+    /**
+     * Callback that is called when the user picks up the slider.
+     * The initial value is passed as an argument to the callback handler.
+     */
+    onSlidingStart?: (value: number) => void;
+    /**
+     * Callback that is called when the user releases the slider, regardless if the value has changed.
+     * The current value is passed as an argument to the callback handler.
+     */
+    onSlidingComplete?: (value: number) => void;
+    /**
+     * Whether the slider is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+export declare const Slider: ({ minimumValue, maximumValue, step, value, onValueChange, onSlidingStart, onSlidingComplete, disabled, style, testID, }: SliderProps) => JSX.Element;
+export default Slider;

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

@@ -51,6 +51,7 @@ export interface TextInputProps extends NativeTextInputProps {
     loading?: boolean;
     maxLength?: number;
     helpText?: string;
+    renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
 }
 export declare const getVariant: ({ disabled, error, editable, loading, isFocused, isEmptyValue, }: {
     disabled?: boolean;
@@ -60,5 +61,5 @@ export declare const getVariant: ({ disabled, error, editable, loading, isFocuse
     isFocused?: boolean;
     isEmptyValue?: boolean;
 }) => Variant;
-declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, error, required, editable, disabled, loading, maxLength, helpText, value, defaultValue, ...nativeProps }: TextInputProps) => JSX.Element;
+declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, error, required, editable, disabled, loading, maxLength, helpText, value, defaultValue, renderInputValue, ...nativeProps }: TextInputProps) => JSX.Element;
 export default TextInput;

package/types/index.d.ts

@@ -19,9 +19,11 @@ import Drawer from './components/Drawer';
 import Empty from './components/Empty';
 import FAB from './components/FAB';
 import Icon from './components/Icon';
+import Image from './components/Image';
 import List from './components/List';
 import PinInput from './components/PinInput';
 import Progress from './components/Progress';
+import Slider from './components/Slider';
 import Spinner from './components/Spinner';
 import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
@@ -35,5 +37,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, swagSystemPalette, workSystemPalette, Accordion, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Box, 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, 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 * from './types';

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

@@ -1,4 +1,5 @@
-declare const getDatePickerTheme: () => {
+import { GlobalTheme } from '../global';
+declare const getDatePickerTheme: (theme: GlobalTheme) => {
     sizes: {
         height: number;
     };

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

@@ -11,19 +11,16 @@ declare const getEmptyTheme: (theme: GlobalTheme) => {
         illustrationBackground: string;
     };
     sizes: {
-        illustration: number;
+        image: number;
     };
     space: {
         titleMargin: number;
-        illustrationMargin: number;
+        imageMargin: number;
         wrapperPadding: number;
     };
     fonts: {
         title: string;
         description: string;
     };
-    radii: {
-        illustration: number;
-    };
 };
 export default getEmptyTheme;

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

@@ -0,0 +1,8 @@
+import type { GlobalTheme } from '../global';
+declare const getImageTheme: (theme: GlobalTheme) => {
+    sizes: {
+        '6xlarge': number;
+        '15xlarge': number;
+    };
+};
+export default getImageTheme;

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

@@ -0,0 +1,9 @@
+import type { GlobalTheme } from '../global';
+declare const getSliderTheme: (theme: GlobalTheme) => {
+    colors: {
+        minimumTrackTint: string;
+        thumbTint: string;
+        maximumTrackTint: string;
+    };
+};
+export default getSliderTheme;

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

@@ -9,6 +9,20 @@ declare const getSwitchTheme: (theme: GlobalTheme) => {
         };
         thumb: string;
     };
+    sizes: {
+        thumbs: {
+            small: number;
+            medium: number;
+        };
+        widths: {
+            small: number;
+            medium: number;
+        };
+        heights: {
+            small: number;
+            medium: number;
+        };
+    };
     thumbSizes: {
         small: number;
         medium: number;
@@ -24,7 +38,6 @@ declare const getSwitchTheme: (theme: GlobalTheme) => {
     spaces: {
         small: number;
         medium: number;
-        inactive: number;
     };
     radii: {
         rounded: number;

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

@@ -1,4 +1,5 @@
-declare const getTimePickerTheme: () => {
+import { GlobalTheme } from '../global';
+declare const getTimePickerTheme: (theme: GlobalTheme) => {
     sizes: {
         height: number;
     };