@hero-design/rn 7.21.0 → 7.22.0

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

@@ -1,20 +1,21 @@
-import { fireEvent, within } from '@testing-library/react-native';
-import React from 'react';
-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'}
+    ${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"}
   `(
-    'should return the correct variant when disabled $disabled, errorMessage $errorMessage, editable $false, isFocused $isFocused, isEmptyValue $isEmptyValue',
+    "should return the correct variant when disabled $disabled, errorMessage $errorMessage, editable $false, isFocused $isFocused, isEmptyValue $isEmptyValue",
     ({
       disabled,
       error,
@@ -38,38 +39,39 @@ describe('getVariant', () => {
   );
 });
 
-describe('TextInput', () => {
-  describe('idle', () => {
-    it('renders correctly', () => {
+describe("TextInput", () => {
+  describe("idle", () => {
+    it("renders correctly", () => {
       const { getByTestId, toJSON } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
           prefix="dollar-sign"
           suffix="arrow-down"
           testID="idle-text-input"
+          style={{ borderColor: theme.colors.danger }}
         />
       );
 
       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"
@@ -78,13 +80,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();
@@ -100,23 +102,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)"
@@ -127,16 +129,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)"
@@ -147,17 +149,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,
@@ -173,17 +175,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,
@@ -204,31 +206,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,
@@ -247,18 +249,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
@@ -271,17 +273,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)"
@@ -292,12 +294,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)"
@@ -308,14 +310,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)"
@@ -327,20 +329,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)"
@@ -354,13 +356,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)"
@@ -375,9 +377,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,11 +1,11 @@
-import React from 'react';
-import { StyleSheet } from 'react-native';
+import React from "react";
+import { StyleSheet } from "react-native";
 import type {
   TextInputProps as NativeTextInputProps,
   StyleProp,
   ViewStyle,
   TextStyle,
-} from 'react-native';
+} from "react-native";
 import {
   StyledTextInputContainer,
   StyledLabel,
@@ -24,11 +24,11 @@ import {
   StyledErrorAndHelpTextContainer,
   StyledBorderBackDrop,
   StyledErrorAndMaxLengthContainer,
-} from './StyledTextInput';
-import Icon from '../Icon';
-import { useTheme } from '../../theme';
-import type { Variant } from './StyledTextInput';
-import type { IconName } from '../Icon';
+} from "./StyledTextInput";
+import Icon from "../Icon";
+import { useTheme } from "../../theme";
+import type { Variant } from "./StyledTextInput";
+import type { IconName } from "../Icon";
 
 export interface TextInputProps extends NativeTextInputProps {
   /**
@@ -114,21 +114,21 @@ export const getVariant = ({
   isEmptyValue?: boolean;
 }): Variant => {
   if (disabled) {
-    return 'disabled';
+    return "disabled";
   }
   if (error) {
-    return 'error';
+    return "error";
   }
   if (!editable || loading) {
-    return 'readonly';
+    return "readonly";
   }
   if (isFocused) {
-    return 'focused';
+    return "focused";
   }
   if (!isEmptyValue) {
-    return 'filled';
+    return "filled";
   }
-  return 'default';
+  return "default";
 };
 
 const TextInput = ({
@@ -151,9 +151,9 @@ const TextInput = ({
   renderInputValue,
   ...nativeProps
 }: TextInputProps): JSX.Element => {
-  const displayText = (value !== undefined ? value : defaultValue) ?? '';
+  const displayText = (value !== undefined ? value : defaultValue) ?? "";
   const isEmptyValue = displayText.length === 0;
-  const actualSuffix = loading ? 'loading' : suffix;
+  const actualSuffix = loading ? "loading" : suffix;
 
   const [isFocused, setIsFocused] = React.useState(false);
 
@@ -175,41 +175,40 @@ const TextInput = ({
       { color: theme.__hd__.textInput.colors.text },
       textStyle,
     ]),
-    testID: 'text-input',
+    testID: "text-input",
     accessibilityState: {
-      disabled: variant === 'disabled' || variant === 'readonly',
+      disabled: variant === "disabled" || variant === "readonly",
     },
     // @ts-ignore
     accessibilityLabelledBy,
     ...nativeProps,
-    onFocus: event => {
+    onFocus: (event) => {
       setIsFocused(true);
       nativeProps.onFocus?.(event);
     },
-    onBlur: event => {
+    onBlur: (event) => {
       setIsFocused(false);
       nativeProps.onBlur?.(event);
     },
     editable,
     maxLength,
     value,
-    onChangeText: text => {
+    onChangeText: (text) => {
       nativeProps.onChangeText?.(text);
     },
     defaultValue,
-    placeholder: variant === 'focused' ? nativeProps.placeholder : undefined,
+    placeholder: variant === "focused" ? nativeProps.placeholder : undefined,
   };
 
   return (
     <StyledContainer
-      style={style}
       pointerEvents={
-        variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto'
+        variant === "disabled" || variant === "readonly" ? "none" : "auto"
       }
       testID={testID}
     >
       <StyledTextInputContainer>
-        <StyledBorderBackDrop themeVariant={variant} />
+        <StyledBorderBackDrop themeVariant={variant} style={style} />
         {(isFocused || (label && !isEmptyValue)) && (
           <StyledLabelContainer pointerEvents="none">
             {required && (
@@ -229,9 +228,9 @@ const TextInput = ({
             )}
           </StyledLabelContainer>
         )}
-        {typeof prefix === 'string' ? (
+        {typeof prefix === "string" ? (
           <Icon
-            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
+            intent={variant === "disabled" ? "disabled-text" : "text"}
             testID="input-prefix"
             icon={prefix}
             size="xsmall"
@@ -265,12 +264,12 @@ const TextInput = ({
             <StyledTextInput {...nativeInputProps} />
           )}
         </StyledTextInputAndLabelContainer>
-        {typeof actualSuffix === 'string' ? (
+        {typeof actualSuffix === "string" ? (
           <Icon
-            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
+            intent={variant === "disabled" ? "disabled-text" : "text"}
             testID="input-suffix"
             icon={actualSuffix}
-            spin={actualSuffix === 'loading'}
+            spin={actualSuffix === "loading"}
             size="xsmall"
           />
         ) : (

package/src/components/Toast/ToastContainer.tsx

@@ -28,7 +28,7 @@ const SingleToastDisplay = ({
       key={toast.id}
       style={{ marginBottom: theme.space.small }}
       onDismiss={() => {
-        setToastList(state => state.filter(item => item.id !== toast.id));
+        setToastList((state) => state.filter((item) => item.id !== toast.id));
         toast.props.onDismiss?.();
       }}
     />
@@ -43,17 +43,17 @@ const ToastContainer = React.forwardRef<
   const [toastList, setToastList] = useState<ToastItemProps[]>([]);
 
   useImperativeHandle(ref, () => ({
-    show: props => {
+    show: (props) => {
       const item = {
         id: generateID(),
         props,
       };
 
-      setToastList(state => [item, ...state]);
+      setToastList((state) => [item, ...state]);
       return item.id;
     },
-    hide: id => {
-      setToastList(state => state.filter(item => item.id !== id));
+    hide: (id) => {
+      setToastList((state) => state.filter((item) => item.id !== id));
     },
     clearAll: () => {
       setToastList([]);
@@ -75,7 +75,7 @@ const ToastContainer = React.forwardRef<
             key={id}
             style={{ marginBottom: theme.space.small }}
             onDismiss={() => {
-              setToastList(state => state.filter(item => item.id !== id));
+              setToastList((state) => state.filter((item) => item.id !== id));
               props.onDismiss?.();
             }}
           />

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

@@ -621,20 +621,26 @@ Object {
           "disabled-unchecked": "#ccced1",
           "unchecked": "#808f91",
         },
+        "selector": Object {
+          "background": "#f6f6f7",
+          "textBackground": "#401960",
+        },
         "thumb": "#ffffff",
       },
-      "heights": Object {
-        "medium": 28.799999999999997,
-        "small": 24,
-      },
       "radii": Object {
         "rounded": 999,
+        "selector": Object {
+          "default": 999,
+        },
       },
       "sizes": Object {
         "heights": Object {
           "medium": 32,
           "small": 24,
         },
+        "selector": Object {
+          "height": 56,
+        },
         "thumbs": Object {
           "medium": 24,
           "small": 16,
@@ -646,16 +652,12 @@ Object {
       },
       "spaces": Object {
         "medium": 4,
+        "selector": Object {
+          "iconPadding": 16,
+          "wrapperPadding": 4,
+        },
         "small": 4,
       },
-      "thumbSizes": Object {
-        "medium": 20.8,
-        "small": 16,
-      },
-      "widths": Object {
-        "medium": 56,
-        "small": 48,
-      },
     },
     "tabs": Object {
       "borderWidths": Object {