@hero-design/rn 7.23.0 → 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

@@ -104,7 +104,6 @@ export const getVariant = ({
   error,
   editable,
   loading,
-  isFocused,
   isEmptyValue,
 }: {
   disabled?: boolean;
@@ -123,9 +122,6 @@ export const getVariant = ({
   if (!editable || loading) {
     return 'readonly';
   }
-  if (isFocused) {
-    return 'focused';
-  }
   if (!isEmptyValue) {
     return 'filled';
   }
@@ -213,7 +209,8 @@ const TextInput = ({
       nativeProps.onChangeText?.(text);
     },
     defaultValue,
-    placeholder: variant === 'focused' ? nativeProps.placeholder : undefined,
+    placeholder:
+      isFocused || label === undefined ? nativeProps.placeholder : undefined,
   };
 
   return (
@@ -225,7 +222,11 @@ const TextInput = ({
       testID={testID}
     >
       <StyledTextInputContainer>
-        <StyledBorderBackDrop themeVariant={variant} style={borderStyle} />
+        <StyledBorderBackDrop
+          themeFocused={isFocused}
+          themeVariant={variant}
+          style={borderStyle}
+        />
         {(isFocused || (label && !isEmptyValue)) && (
           <StyledLabelContainer pointerEvents="none">
             {required && (

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

@@ -61,6 +61,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
               undefined,
             ]
           }
+          themeFocused={false}
           themeVariant="filled"
         />
         <View

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

@@ -61,6 +61,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
               undefined,
             ]
           }
+          themeFocused={false}
           themeVariant="filled"
         />
         <View

package/src/index.ts

@@ -5,6 +5,7 @@ import theme, {
   swagSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
+  ThemeSwitcher,
 } from './theme';
 import { scale } from './utils/scale';
 
@@ -33,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';
@@ -53,6 +55,7 @@ export {
   useTheme,
   scale,
   ThemeProvider,
+  ThemeSwitcher,
   swagSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
@@ -81,6 +84,7 @@ export {
   Progress,
   Slider,
   Spinner,
+  Swipeable,
   Radio,
   SectionHeading,
   Select,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -597,7 +597,10 @@ Object {
     },
     "spinner": Object {
       "colors": Object {
-        "dot": "#001f23",
+        "dot": Object {
+          "inverted": "#ffffff",
+          "primary": "#001f23",
+        },
       },
       "radii": Object {
         "default": 999,
@@ -617,6 +620,13 @@ Object {
         },
       },
     },
+    "swipeable": Object {
+      "colors": Object {
+        "danger": "#f46363",
+        "primary": "#001f23",
+        "success": "#5ace7d",
+      },
+    },
     "switch": Object {
       "colors": Object {
         "backgroundColors": Object {
@@ -736,7 +746,6 @@ Object {
           "disabled": "#bfc1c5",
           "error": "#f46363",
           "filled": "#f46363",
-          "focused": "#f46363",
           "readonly": "#808f91",
         },
         "borders": Object {
@@ -744,7 +753,6 @@ Object {
           "disabled": "#bfc1c5",
           "error": "#f46363",
           "filled": "#001f23",
-          "focused": "#001f23",
           "readonly": "#808f91",
         },
         "disabledLabel": "#bfc1c5",
@@ -756,7 +764,6 @@ Object {
           "disabled": "#bfc1c5",
           "error": "#001f23",
           "filled": "#001f23",
-          "focused": "#001f23",
           "readonly": "#bfc1c5",
         },
         "labelsInsideTextInput": Object {
@@ -764,7 +771,6 @@ Object {
           "disabled": "#bfc1c5",
           "error": "#001f23",
           "filled": "#001f23",
-          "focused": "#001f23",
           "readonly": "#bfc1c5",
         },
         "maxLengthLabels": Object {
@@ -772,7 +778,6 @@ Object {
           "disabled": "#bfc1c5",
           "error": "#f46363",
           "filled": "#001f23",
-          "focused": "#001f23",
           "readonly": "#bfc1c5",
         },
         "placeholderIfFocued": "#808f91",

package/src/theme/components/spinner.ts

@@ -2,7 +2,10 @@ import type { GlobalTheme } from '../global';
 
 const getSpinnerTheme = (theme: GlobalTheme) => {
   const colors = {
-    dot: theme.colors.primary,
+    dot: {
+      primary: theme.colors.primary,
+      inverted: theme.colors.onPrimary,
+    },
   };
 
   const space = {

package/src/theme/components/swipeable.ts

@@ -0,0 +1,13 @@
+import type { GlobalTheme } from '../global';
+
+const getSwipeableTheme = (theme: GlobalTheme) => {
+  const colors = {
+    success: theme.colors.success,
+    danger: theme.colors.error,
+    primary: theme.colors.primary,
+  };
+
+  return { colors };
+};
+
+export default getSwipeableTheme;

package/src/theme/components/textInput.ts

@@ -9,7 +9,6 @@ const getTextInputTheme = (theme: GlobalTheme) => {
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
       readonly: theme.colors.mutedSecondary,
       filled: theme.colors.error,
-      focused: theme.colors.error,
     },
     error: theme.colors.error,
     placeholderIfNotFocused: theme.colors.globalPrimary,
@@ -24,7 +23,6 @@ const getTextInputTheme = (theme: GlobalTheme) => {
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
       readonly: theme.colors.mutedSecondary,
       filled: theme.colors.globalPrimary,
-      focused: theme.colors.globalPrimary,
     },
     labels: {
       default: theme.colors.globalPrimary,
@@ -32,7 +30,6 @@ const getTextInputTheme = (theme: GlobalTheme) => {
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
       readonly: theme.colors.disabledOnDefaultGlobalSurface,
       filled: theme.colors.globalPrimary,
-      focused: theme.colors.globalPrimary,
     },
     labelsInsideTextInput: {
       default: theme.colors.globalPrimary,
@@ -40,7 +37,6 @@ const getTextInputTheme = (theme: GlobalTheme) => {
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
       readonly: theme.colors.disabledOnDefaultGlobalSurface,
       filled: theme.colors.globalPrimary,
-      focused: theme.colors.globalPrimary,
     },
     maxLengthLabels: {
       default: theme.colors.globalPrimary,
@@ -48,7 +44,6 @@ const getTextInputTheme = (theme: GlobalTheme) => {
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
       readonly: theme.colors.disabledOnDefaultGlobalSurface,
       filled: theme.colors.globalPrimary,
-      focused: theme.colors.globalPrimary,
     },
   };