@hero-design/rn 7.22.3 → 7.24.0

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -1,37 +1,27 @@
-import { fireEvent, within } from "@testing-library/react-native";
-import React from "react";
-import { theme } from "../../..";
-import renderWithTheme from "../../../testHelpers/renderWithTheme";
-import Icon from "../../Icon";
-import TextInput, { getVariant } from "../index";
-
-describe("getVariant", () => {
+import { fireEvent, within } from '@testing-library/react-native';
+import React from 'react';
+import { theme } from '../../..';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Icon from '../../Icon';
+import TextInput, { getVariant } from '../index';
+
+describe('getVariant', () => {
   it.each`
-    disabled | error                       | editable | loading  | isFocused | isEmptyValue | expected
-    ${false} | ${undefined}                | ${true}  | ${false} | ${false}  | ${true}      | ${"default"}
-    ${false} | ${undefined}                | ${true}  | ${false} | ${false}  | ${false}     | ${"filled"}
-    ${false} | ${undefined}                | ${true}  | ${false} | ${true}   | ${true}      | ${"focused"}
-    ${false} | ${undefined}                | ${false} | ${true}  | ${true}   | ${true}      | ${"readonly"}
-    ${false} | ${"This field is required"} | ${false} | ${false} | ${true}   | ${true}      | ${"error"}
-    ${true}  | ${"This field is required"} | ${false} | ${false} | ${true}   | ${true}      | ${"disabled"}
+    disabled | error                       | editable | loading  | isEmptyValue | expected
+    ${false} | ${undefined}                | ${true}  | ${false} | ${true}      | ${'default'}
+    ${false} | ${undefined}                | ${true}  | ${false} | ${false}     | ${'filled'}
+    ${false} | ${undefined}                | ${false} | ${true}  | ${true}      | ${'readonly'}
+    ${false} | ${'This field is required'} | ${false} | ${false} | ${true}      | ${'error'}
+    ${true}  | ${'This field is required'} | ${false} | ${false} | ${true}      | ${'disabled'}
   `(
-    "should return the correct variant when disabled $disabled, errorMessage $errorMessage, editable $false, isFocused $isFocused, isEmptyValue $isEmptyValue",
-    ({
-      disabled,
-      error,
-      editable,
-      loading,
-      isFocused,
-      isEmptyValue,
-      expected,
-    }) => {
+    'should return the correct variant when disabled $disabled, errorMessage $errorMessage, editable $false, isEmptyValue $isEmptyValue',
+    ({ disabled, error, editable, loading, isEmptyValue, expected }) => {
       expect(
         getVariant({
           disabled,
           error,
           editable,
           loading,
-          isFocused,
           isEmptyValue,
         })
       ).toBe(expected);
@@ -39,9 +29,9 @@ describe("getVariant", () => {
   );
 });
 
-describe("TextInput", () => {
-  describe("idle", () => {
-    it("renders correctly", () => {
+describe('TextInput', () => {
+  describe('idle', () => {
+    it('renders correctly', () => {
       const { getByTestId, toJSON } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
@@ -53,25 +43,25 @@ describe("TextInput", () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(getByTestId("idle-text-input")).toBeTruthy();
+      expect(getByTestId('idle-text-input')).toBeTruthy();
       expect(
-        within(getByTestId("idle-text-input")).queryAllByTestId("text-input")
+        within(getByTestId('idle-text-input')).queryAllByTestId('text-input')
       ).toHaveLength(1);
       expect(
-        within(getByTestId("idle-text-input")).queryAllByText("Amount (AUD)")
+        within(getByTestId('idle-text-input')).queryAllByText('Amount (AUD)')
       ).toHaveLength(1);
       expect(
-        within(getByTestId("idle-text-input")).queryAllByTestId("input-label")
+        within(getByTestId('idle-text-input')).queryAllByTestId('input-label')
       ).toHaveLength(1);
       expect(
-        within(getByTestId("idle-text-input")).queryAllByTestId("input-prefix")
+        within(getByTestId('idle-text-input')).queryAllByTestId('input-prefix')
       ).toHaveLength(1);
       expect(
-        within(getByTestId("idle-text-input")).queryAllByTestId("input-suffix")
+        within(getByTestId('idle-text-input')).queryAllByTestId('input-suffix')
       ).toHaveLength(1);
     });
 
-    it("should not render input-label if label is empty", () => {
+    it('should not render input-label if label is empty', () => {
       const { getByTestId } = renderWithTheme(
         <TextInput
           prefix="dollar-sign"
@@ -80,13 +70,13 @@ describe("TextInput", () => {
         />
       );
 
-      expect(getByTestId("idle-text-input")).toBeTruthy();
+      expect(getByTestId('idle-text-input')).toBeTruthy();
       expect(
-        within(getByTestId("idle-text-input")).queryAllByTestId("input-label")
+        within(getByTestId('idle-text-input')).queryAllByTestId('input-label')
       ).toHaveLength(0);
     });
 
-    it("onChangeText, onBlur, onFocus", () => {
+    it('onChangeText, onBlur, onFocus', () => {
       const onChangeText = jest.fn();
       const onBlur = jest.fn();
       const onFocus = jest.fn();
@@ -102,23 +92,23 @@ describe("TextInput", () => {
         />
       );
 
-      const testInput = within(getByTestId("idle-text-input")).getByTestId(
-        "text-input"
+      const testInput = within(getByTestId('idle-text-input')).getByTestId(
+        'text-input'
       );
 
-      fireEvent.changeText(testInput, "Thong Quach");
-      expect(onChangeText).toHaveBeenCalledWith("Thong Quach");
+      fireEvent.changeText(testInput, 'Thong Quach');
+      expect(onChangeText).toHaveBeenCalledWith('Thong Quach');
 
-      fireEvent(testInput, "blur");
+      fireEvent(testInput, 'blur');
       expect(onBlur).toHaveBeenCalledTimes(1);
 
-      fireEvent(testInput, "focus");
+      fireEvent(testInput, 'focus');
       expect(onFocus).toHaveBeenCalledTimes(1);
     });
   });
 
-  describe("idle with suffix and prefix are React Element", () => {
-    it("renders correctly", () => {
+  describe('idle with suffix and prefix are React Element', () => {
+    it('renders correctly', () => {
       const { toJSON, queryAllByTestId, queryAllByText } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
@@ -129,16 +119,16 @@ describe("TextInput", () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
-      expect(queryAllByText("*")).toHaveLength(1);
-      expect(queryAllByTestId("input-label")).toHaveLength(1);
-      expect(queryAllByTestId("prefix-element")).toHaveLength(1);
-      expect(queryAllByTestId("suffix-element")).toHaveLength(1);
-      expect(queryAllByTestId("text-input")).toHaveLength(1);
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByText('*')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('prefix-element')).toHaveLength(1);
+      expect(queryAllByTestId('suffix-element')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
     });
   });
-  describe("required", () => {
-    it("renders correctly", () => {
+  describe('required', () => {
+    it('renders correctly', () => {
       const { toJSON, queryAllByTestId, queryAllByText } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
@@ -149,17 +139,17 @@ describe("TextInput", () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
-      expect(queryAllByText("*")).toHaveLength(1);
-      expect(queryAllByTestId("input-label")).toHaveLength(1);
-      expect(queryAllByTestId("input-prefix")).toHaveLength(1);
-      expect(queryAllByTestId("input-suffix")).toHaveLength(1);
-      expect(queryAllByTestId("text-input")).toHaveLength(1);
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByText('*')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
+      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
     });
   });
 
-  describe("filled", () => {
-    it("renders correctly", () => {
+  describe('filled', () => {
+    it('renders correctly', () => {
       const {
         toJSON,
         queryAllByTestId,
@@ -175,17 +165,17 @@ describe("TextInput", () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
-      expect(queryAllByDisplayValue("100")).toHaveLength(1);
-      expect(queryAllByTestId("input-label")).toHaveLength(1);
-      expect(queryAllByTestId("input-prefix")).toHaveLength(1);
-      expect(queryAllByTestId("input-suffix")).toHaveLength(1);
-      expect(queryAllByTestId("text-input")).toHaveLength(1);
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByDisplayValue('100')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
+      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
     });
   });
 
-  describe("readonly", () => {
-    it("renders correctly", () => {
+  describe('readonly', () => {
+    it('renders correctly', () => {
       const onChangeText = jest.fn();
       const {
         toJSON,
@@ -206,31 +196,31 @@ describe("TextInput", () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
-      expect(queryAllByDisplayValue("100")).toHaveLength(1);
-      expect(queryAllByTestId("input-label")).toHaveLength(1);
-      expect(queryAllByTestId("input-prefix")).toHaveLength(1);
-      expect(queryAllByTestId("input-suffix")).toHaveLength(1);
-      expect(queryAllByTestId("text-input")).toHaveLength(1);
-
-      expect(getByTestId("text-input")).not.toHaveProp("editable", "false");
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByDisplayValue('100')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
+      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+
+      expect(getByTestId('text-input')).not.toHaveProp('editable', 'false');
     });
   });
 
-  describe("loading", () => {
-    it("renders correctly", () => {
+  describe('loading', () => {
+    it('renders correctly', () => {
       const { toJSON, queryAllByTestId, getByTestId } = renderWithTheme(
         <TextInput suffix="arrow-down" loading />
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByTestId("text-input")).toHaveLength(1);
-      expect(getByTestId("input-suffix")).toHaveProp("name", "loading");
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      expect(getByTestId('input-suffix')).toHaveProp('name', 'loading');
     });
   });
 
-  describe("max length", () => {
-    it("renders correctly", () => {
+  describe('max length', () => {
+    it('renders correctly', () => {
       const {
         toJSON,
         queryAllByTestId,
@@ -249,18 +239,18 @@ describe("TextInput", () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText("Shout out")).toHaveLength(1);
-      expect(queryAllByDisplayValue("shout out Tung Van")).toHaveLength(1);
-      expect(queryAllByText("18/255")).toHaveLength(1);
-      expect(queryAllByTestId("input-label")).toHaveLength(1);
-      expect(queryAllByTestId("text-input")).toHaveLength(1);
+      expect(queryAllByText('Shout out')).toHaveLength(1);
+      expect(queryAllByDisplayValue('shout out Tung Van')).toHaveLength(1);
+      expect(queryAllByText('18/255')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
 
-      expect(getByTestId("text-input")).not.toHaveProp("multiline", "true");
+      expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
     });
   });
 
-  describe("disabled", () => {
-    it("renders correctly", () => {
+  describe('disabled', () => {
+    it('renders correctly', () => {
       const { toJSON, queryAllByTestId, queryAllByText, getByTestId } =
         renderWithTheme(
           <TextInput
@@ -273,17 +263,17 @@ describe("TextInput", () => {
         );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
-      expect(queryAllByTestId("input-label")).toHaveLength(1);
-      expect(queryAllByTestId("text-input")).toHaveLength(1);
-      expect(getByTestId("disabled-text-input")).toBeDisabled();
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      expect(getByTestId('disabled-text-input')).toBeDisabled();
 
-      expect(getByTestId("text-input")).not.toHaveProp("multiline", "true");
+      expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
     });
   });
 
-  describe("error", () => {
-    it("renders correctly", () => {
+  describe('error', () => {
+    it('renders correctly', () => {
       const { toJSON, queryAllByText } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
@@ -294,12 +284,12 @@ describe("TextInput", () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
-      expect(queryAllByText("This field is required")).toHaveLength(1);
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByText('This field is required')).toHaveLength(1);
     });
   });
-  describe("helper text", () => {
-    it("renders correctly", () => {
+  describe('helper text', () => {
+    it('renders correctly', () => {
       const { toJSON, queryAllByText } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
@@ -310,14 +300,14 @@ describe("TextInput", () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
-      expect(queryAllByText("This is helper text")).toHaveLength(1);
+      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
+      expect(queryAllByText('This is helper text')).toHaveLength(1);
     });
   });
 
-  describe("placeholder", () => {
-    describe("TextInput is idle", () => {
-      it("renders correctly", () => {
+  describe('placeholder', () => {
+    describe('TextInput is idle', () => {
+      it('renders correctly', () => {
         const wrapper = renderWithTheme(
           <TextInput
             label="Amount (AUD)"
@@ -329,20 +319,20 @@ describe("TextInput", () => {
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();
-        expect(wrapper.queryByPlaceholderText("Enter Amount")).toBeFalsy();
+        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeFalsy();
 
-        fireEvent(wrapper.getByTestId("text-input"), "focus");
-        expect(wrapper.queryByPlaceholderText("Enter Amount")).toBeTruthy();
+        fireEvent(wrapper.getByTestId('text-input'), 'focus');
+        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeTruthy();
 
-        fireEvent(wrapper.getByTestId("text-input"), "blur");
-        expect(wrapper.queryByPlaceholderText("Enter Amount")).toBeFalsy();
+        fireEvent(wrapper.getByTestId('text-input'), 'blur');
+        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeFalsy();
       });
     });
   });
 
-  describe("defaultValue", () => {
-    describe("TextInput is idle", () => {
-      it("renders correctly", () => {
+  describe('defaultValue', () => {
+    describe('TextInput is idle', () => {
+      it('renders correctly', () => {
         const wrapper = renderWithTheme(
           <TextInput
             label="Amount (AUD)"
@@ -356,13 +346,13 @@ describe("TextInput", () => {
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();
-        expect(wrapper.queryByDisplayValue("1000")).toBeTruthy();
-        expect(wrapper.queryByText("4/255")).toBeTruthy();
+        expect(wrapper.queryByDisplayValue('1000')).toBeTruthy();
+        expect(wrapper.queryByText('4/255')).toBeTruthy();
       });
     });
 
-    describe("default Value and Value", () => {
-      it("renders correctly with 2000", () => {
+    describe('default Value and Value', () => {
+      it('renders correctly with 2000', () => {
         const wrapper = renderWithTheme(
           <TextInput
             label="Amount (AUD)"
@@ -377,9 +367,9 @@ describe("TextInput", () => {
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();
-        expect(wrapper.queryByDisplayValue("2000")).toBeTruthy();
-        expect(wrapper.queryByDisplayValue("1000")).toBeFalsy();
-        expect(wrapper.queryByText("4/255")).toBeTruthy();
+        expect(wrapper.queryByDisplayValue('2000')).toBeTruthy();
+        expect(wrapper.queryByDisplayValue('1000')).toBeFalsy();
+        expect(wrapper.queryByText('4/255')).toBeTruthy();
       });
     });
   });

package/src/components/TextInput/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import type {
   TextInputProps as NativeTextInputProps,
@@ -22,12 +22,14 @@ import {
   StyledTextInputAndLabelContainer,
   StyledLabelContainerInsideTextInput,
   StyledErrorAndHelpTextContainer,
+  StyledBorderBackDrop,
   StyledErrorAndMaxLengthContainer,
 } from './StyledTextInput';
 import Icon from '../Icon';
 import { useTheme } from '../../theme';
 import type { Variant } from './StyledTextInput';
 import type { IconName } from '../Icon';
+import { omit, pick } from '../../utils/helpers';
 
 export interface TextInputProps extends NativeTextInputProps {
   /**
@@ -102,7 +104,6 @@ export const getVariant = ({
   error,
   editable,
   loading,
-  isFocused,
   isEmptyValue,
 }: {
   disabled?: boolean;
@@ -121,9 +122,6 @@ export const getVariant = ({
   if (!editable || loading) {
     return 'readonly';
   }
-  if (isFocused) {
-    return 'focused';
-  }
   if (!isEmptyValue) {
     return 'filled';
   }
@@ -169,10 +167,25 @@ const TextInput = ({
 
   const theme = useTheme();
 
+  const { borderStyle, textStyleWithoutBorderStyle } = useMemo(() => {
+    if (!textStyle) {
+      return {};
+    }
+
+    const flattenTextStyle = StyleSheet.flatten(textStyle);
+    const borderKeys = Object.keys(flattenTextStyle).filter((key) => {
+      return key.startsWith('border');
+    });
+    return {
+      borderStyle: pick(borderKeys, flattenTextStyle),
+      textStyleWithoutBorderStyle: omit(borderKeys, flattenTextStyle),
+    };
+  }, [textStyle]);
+
   const nativeInputProps: NativeTextInputProps = {
     style: StyleSheet.flatten([
       { color: theme.__hd__.textInput.colors.text },
-      textStyle,
+      textStyleWithoutBorderStyle,
     ]),
     testID: 'text-input',
     accessibilityState: {
@@ -196,19 +209,24 @@ const TextInput = ({
       nativeProps.onChangeText?.(text);
     },
     defaultValue,
-    placeholder: variant === 'focused' ? nativeProps.placeholder : undefined,
+    placeholder:
+      isFocused || label === undefined ? nativeProps.placeholder : undefined,
   };
 
   return (
     <StyledContainer
+      style={style}
       pointerEvents={
         variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto'
       }
       testID={testID}
-      style={style}
-      themeVariant={variant}
     >
       <StyledTextInputContainer>
+        <StyledBorderBackDrop
+          themeFocused={isFocused}
+          themeVariant={variant}
+          style={borderStyle}
+        />
         {(isFocused || (label && !isEmptyValue)) && (
           <StyledLabelContainer pointerEvents="none">
             {required && (

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -26,16 +26,12 @@ exports[`TimePickerAndroid renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#001f23",
-            "borderRadius": 8,
-            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
-      themeVariant="filled"
     >
       <View
         style={
@@ -49,6 +45,25 @@ exports[`TimePickerAndroid renders correctly 1`] = `
           ]
         }
       >
+        <View
+          style={
+            Array [
+              Object {
+                "borderColor": "#001f23",
+                "borderRadius": 8,
+                "borderWidth": 1,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              undefined,
+            ]
+          }
+          themeFocused={false}
+          themeVariant="filled"
+        />
         <View
           pointerEvents="none"
           style={

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -26,16 +26,12 @@ exports[`TimePickerIOS renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#001f23",
-            "borderRadius": 8,
-            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
-      themeVariant="filled"
     >
       <View
         style={
@@ -49,6 +45,25 @@ exports[`TimePickerIOS renders correctly 1`] = `
           ]
         }
       >
+        <View
+          style={
+            Array [
+              Object {
+                "borderColor": "#001f23",
+                "borderRadius": 8,
+                "borderWidth": 1,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              undefined,
+            ]
+          }
+          themeFocused={false}
+          themeVariant="filled"
+        />
         <View
           pointerEvents="none"
           style={

package/src/index.ts

@@ -4,6 +4,8 @@ import theme, {
   useTheme,
   swagSystemPalette,
   workSystemPalette,
+  jobsSystemPalette,
+  ThemeSwitcher,
 } from './theme';
 import { scale } from './utils/scale';
 
@@ -32,6 +34,7 @@ import PinInput from './components/PinInput';
 import Progress from './components/Progress';
 import Slider from './components/Slider';
 import Spinner from './components/Spinner';
+import Swipeable from './components/Swipeable';
 import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
 import Select from './components/Select';
@@ -43,6 +46,7 @@ import TimePicker from './components/TimePicker';
 import Toast from './components/Toast';
 import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
+import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 
 export {
@@ -51,8 +55,10 @@ export {
   useTheme,
   scale,
   ThemeProvider,
+  ThemeSwitcher,
   swagSystemPalette,
   workSystemPalette,
+  jobsSystemPalette,
   Accordion,
   Alert,
   Avatar,
@@ -78,6 +84,7 @@ export {
   Progress,
   Slider,
   Spinner,
+  Swipeable,
   Radio,
   SectionHeading,
   Select,
@@ -89,6 +96,7 @@ export {
   Toast,
   Toolbar,
   Typography,
+  RefreshControl,
   RichTextEditor,
 };