@jobber/components-native 0.77.1 → 0.79.0

package/dist/src/InputFieldWrapper/components/Prefix/Prefix.js

@@ -2,12 +2,14 @@ import React from "react";
 import { Text as RNText, View, } from "react-native";
 import { Icon } from "../../../Icon";
 import { Text } from "../../../Text";
-import { tokens } from "../../../utils/design";
-import { typographyStyles } from "../../../Typography";
-import { styles } from "../../InputFieldWrapper.style";
+import { useAtlantisTheme } from "../../../AtlantisThemeContext";
+import { useTypographyStyles } from "../../../Typography";
+import { useStyles } from "../../InputFieldWrapper.style";
 export const prefixLabelTestId = "ATL-InputFieldWrapper-PrefixLabel";
 export const prefixIconTestId = "ATL-InputFieldWrapper-PrefixIcon";
 export function PrefixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, styleOverride, }) {
+    const styles = useStyles();
+    const typographyStyles = useTypographyStyles();
     return (React.createElement(View, { style: [
             styles.fieldAffix,
             focused && styles.inputFocused,
@@ -22,6 +24,8 @@ export function PrefixLabel({ focused, disabled, hasMiniLabel, inputInvalid, lab
             ] }, label)))));
 }
 export function PrefixIcon({ focused, disabled, inputInvalid, icon, }) {
+    const styles = useStyles();
+    const { tokens } = useAtlantisTheme();
     return (React.createElement(View, { testID: prefixIconTestId, style: [
             styles.fieldAffix,
             focused && styles.inputFocused,

package/dist/src/InputFieldWrapper/components/Suffix/Suffix.js

@@ -1,13 +1,15 @@
 import React from "react";
 import { Pressable, Text as RNText, View, } from "react-native";
-import { tokens } from "../../../utils/design";
 import { Icon } from "../../../Icon";
 import { Text } from "../../../Text";
-import { typographyStyles } from "../../../Typography";
-import { styles } from "../../InputFieldWrapper.style";
+import { useTypographyStyles } from "../../../Typography";
+import { useAtlantisTheme } from "../../../AtlantisThemeContext";
+import { useStyles } from "../../InputFieldWrapper.style";
 export const suffixLabelTestId = "ATL-InputFieldWrapper-SuffixLabel";
 export const suffixIconTestId = "ATL-InputFieldWrapper-SuffixIcon";
 export function SuffixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, hasLeftMargin = true, styleOverride, }) {
+    const styles = useStyles();
+    const typographyStyles = useTypographyStyles();
     return (React.createElement(View, { testID: suffixLabelTestId, style: [
             styles.fieldAffix,
             focused && styles.inputFocused,
@@ -23,6 +25,8 @@ export function SuffixLabel({ focused, disabled, hasMiniLabel, inputInvalid, lab
             ] }, label)))));
 }
 export function SuffixIcon({ focused, disabled, inputInvalid, icon, hasLeftMargin = false, onPress, }) {
+    const styles = useStyles();
+    const { tokens } = useAtlantisTheme();
     return (React.createElement(View, { testID: suffixIconTestId, style: [
             styles.fieldAffix,
             focused && styles.inputFocused,

package/dist/src/InputFieldWrapper/index.js

@@ -1,2 +1,2 @@
-export { commonInputStyles } from "./CommonInputStyles.style";
+export { getCommonInputStyles, useCommonInputStyles, } from "./CommonInputStyles.style";
 export { InputFieldWrapper } from "./InputFieldWrapper";

package/dist/src/InputPressable/InputPressable.js

@@ -1,8 +1,8 @@
 import React, { forwardRef, useEffect, useState } from "react";
 import { Text as NativeText, Pressable } from "react-native";
 import { useShowClear } from "@jobber/hooks";
-import { styles } from "./InputPressable.style";
-import { InputFieldWrapper, commonInputStyles } from "../InputFieldWrapper";
+import { useStyles } from "./InputPressable.style";
+import { InputFieldWrapper, useCommonInputStyles } from "../InputFieldWrapper";
 export const InputPressable = forwardRef(InputPressableInternal);
 export function InputPressableInternal({ value, placeholder, disabled, invalid, error, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable = "never", onClear, focused, }, ref) {
     const hasValue = !!value;
@@ -17,6 +17,8 @@ export function InputPressableInternal({ value, placeholder, disabled, invalid,
         hasValue,
         disabled,
     });
+    const styles = useStyles();
+    const commonInputStyles = useCommonInputStyles();
     return (React.createElement(InputFieldWrapper, { prefix: prefix, suffix: suffix, hasValue: hasValue, hasMiniLabel: hasMiniLabel, focused: focused, error: error, invalid: invalid, placeholder: placeholder, disabled: disabled, showClearAction: showClear, onClear: onClear },
         React.createElement(Pressable, { style: styles.pressable, onPress: onPress, disabled: disabled, accessibilityLabel: accessibilityLabel || placeholder, accessibilityHint: accessibilityHint, accessibilityValue: { text: value } },
             React.createElement(NativeText, { style: [

package/dist/src/InputPressable/InputPressable.style.js

@@ -1,23 +1,25 @@
-import { tokens } from "@jobber/design";
-import { StyleSheet } from "react-native";
-import { typographyStyles } from "../Typography/Typography.style";
-export const styles = StyleSheet.create({
-    pressable: {
-        flex: 1,
-    },
-    inputPressableStyles: {
-        paddingTop: (typographyStyles.defaultSize.fontSize || 0) +
-            tokens["space-small"] +
-            tokens["space-smaller"],
-        lineHeight: typographyStyles.defaultSize.lineHeight,
-    },
-    inputEmpty: {
-        paddingTop: 0,
-    },
-    inputDisabled: {
-        color: typographyStyles.disabled.color,
-    },
-    inputInvalid: {
-        borderColor: tokens["color-critical"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+import { getTypographyStyles } from "../Typography";
+export const useStyles = buildThemedStyles(tokens => {
+    const typographyStyles = getTypographyStyles(tokens);
+    return {
+        pressable: {
+            flex: 1,
+        },
+        inputPressableStyles: {
+            paddingTop: (typographyStyles.defaultSize.fontSize || 0) +
+                tokens["space-small"] +
+                tokens["space-smaller"],
+            lineHeight: typographyStyles.defaultSize.lineHeight,
+        },
+        inputEmpty: {
+            paddingTop: 0,
+        },
+        inputDisabled: {
+            color: typographyStyles.disabled.color,
+        },
+        inputInvalid: {
+            borderColor: tokens["color-critical"],
+        },
+    };
 });

package/dist/src/InputText/InputText.js

@@ -2,11 +2,11 @@ import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, use
 import { Platform, TextInput, } from "react-native";
 import identity from "lodash/identity";
 import { useShowClear } from "@jobber/hooks";
-import { styles } from "./InputText.style";
+import { useStyles } from "./InputText.style";
 import { useInputAccessoriesContext } from "./context";
 import { useFormController } from "../hooks";
 import { InputFieldWrapper } from "../InputFieldWrapper";
-import { commonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
+import { useCommonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
 export const InputText = forwardRef(InputTextInternal);
 // eslint-disable-next-line max-statements
 function InputTextInternal({ invalid, disabled, readonly = false, name, placeholder, assistiveText, keyboard, value: controlledValue, defaultValue, autoFocus, autoComplete = "off", spellCheck, textContentType = "none", validations, onChangeText, onSubmitEditing, onFocus, accessibilityLabel, accessibilityHint, autoCorrect, autoCapitalize, onBlur, multiline = false, prefix, suffix, transform = {}, clearable = multiline ? "never" : "while-editing", testID, secureTextEntry, styleOverride, toolbar, toolbarVisibility, loading, loadingType, }, ref) {
@@ -72,6 +72,8 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
         }
         onFocusNext();
     }
+    const styles = useStyles();
+    const commonInputStyles = useCommonInputStyles();
     return (React.createElement(InputFieldWrapper, { prefix: prefix, suffix: suffix, hasValue: hasValue, hasMiniLabel: hasMiniLabel, assistiveText: assistiveText, focused: focused, error: error, invalid: invalid, placeholder: placeholder, disabled: disabled, onClear: handleClear, showClearAction: showClear, styleOverride: styleOverride, toolbar: toolbar, toolbarVisibility: toolbarVisibility, loading: loading, loadingType: loadingType },
         React.createElement(TextInput, Object.assign({ inputAccessoryViewID: inputAccessoryID || undefined, testID: testID, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, spellCheck: spellCheck, style: [
                 commonInputStyles.input,

package/dist/src/InputText/InputText.style.js

@@ -1,23 +1,24 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-import { typographyStyles } from "../Typography";
-export const styles = StyleSheet.create({
-    inputPaddingTop: {
-        paddingTop: (typographyStyles.smallSize.fontSize || 0) +
-            tokens["space-smaller"] +
-            tokens["space-smallest"],
-    },
-    multiLineInput: {
-        paddingTop: 0,
-        lineHeight: typographyStyles.defaultSize.lineHeight,
-        paddingRight: tokens["space-base"] - tokens["space-smallest"],
-    },
-    multiLineInputWithMini: {
-        paddingTop: tokens["space-large"] + tokens["space-smallest"],
-        paddingBottom: tokens["space-small"] - tokens["space-smallest"],
-    },
-    multilineInputiOS: {
-        // for placeholder
-        paddingTop: (typographyStyles.defaultSize.fontSize || 0) + tokens["space-smallest"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+import { getTypographyStyles } from "../Typography";
+export const useStyles = buildThemedStyles(tokens => {
+    const typographyStyles = getTypographyStyles(tokens);
+    return {
+        inputPaddingTop: {
+            paddingTop: (typographyStyles.smallSize.fontSize || 0) +
+                tokens["space-smaller"] +
+                tokens["space-smallest"],
+        },
+        multiLineInput: {
+            paddingTop: 0,
+            lineHeight: typographyStyles.defaultSize.lineHeight,
+            paddingRight: tokens["space-base"] - tokens["space-smallest"],
+        },
+        multiLineInputWithMini: {
+            paddingTop: tokens["space-large"] + tokens["space-smallest"],
+            paddingBottom: tokens["space-small"] - tokens["space-smallest"],
+        },
+        multilineInputiOS: {
+            paddingTop: (typographyStyles.defaultSize.fontSize || 0) + tokens["space-smallest"],
+        },
+    };
 });

package/dist/src/InputText/context/InputAccessoriesProvider.js

@@ -2,11 +2,12 @@ import React, { useEffect, useRef, useState } from "react";
 import { InputAccessoryView, Keyboard, Platform, Button as RNButton, View, useColorScheme, } from "react-native";
 import { v4 } from "react-native-uuid";
 import { InputAccessoriesContext } from "./InputAccessoriesContext";
-import { styles } from "./InputAccessoriesProvider.style";
+import { useStyles } from "./InputAccessoriesProvider.style";
 export function InputAccessoriesProvider({ children, }) {
     const inputAccessoryID = useRef(v4()).current;
     const { focusedInput, setFocusedInput, canFocusNext, canFocusPrevious, elements, setElements, previousKey, nextKey, } = useInputAccessoriesProviderState();
     const colorScheme = useColorScheme();
+    const styles = useStyles();
     return (React.createElement(InputAccessoriesContext.Provider, { value: {
             elements,
             focusedInput,

package/dist/src/InputText/context/InputAccessoriesProvider.style.js

@@ -1,21 +1,23 @@
-import { PlatformColor, StyleSheet } from "react-native";
-import { tokens } from "../../utils/design";
+import { PlatformColor } from "react-native";
+import { buildThemedStyles } from "../../AtlantisThemeContext";
 const BAR_HEIGHT = 44;
-export const styles = StyleSheet.create({
-    container: {
-        flexDirection: "row",
-        justifyContent: "flex-end",
-        alignItems: "center",
-        paddingHorizontal: tokens["space-small"],
-        borderTopWidth: tokens["space-minuscule"],
-        borderTopColor: tokens["color-border"],
-        height: BAR_HEIGHT,
-    },
-    lightTheme: {
-        backgroundColor: tokens["color-surface--background"],
-    },
-    darkTheme: {
-        // PlatformColor has to be conditional for Storybook to run without error
-        backgroundColor: PlatformColor === null || PlatformColor === void 0 ? void 0 : PlatformColor("systemGray3"),
-    },
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        container: {
+            flexDirection: "row",
+            justifyContent: "flex-end",
+            alignItems: "center",
+            paddingHorizontal: tokens["space-small"],
+            borderTopWidth: tokens["space-minuscule"],
+            borderTopColor: tokens["color-border"],
+            height: BAR_HEIGHT,
+        },
+        lightTheme: {
+            backgroundColor: tokens["color-surface--background"],
+        },
+        darkTheme: {
+            // PlatformColor has to be conditional for Storybook to run without error
+            backgroundColor: PlatformColor === null || PlatformColor === void 0 ? void 0 : PlatformColor("systemGray3"),
+        },
+    };
 });

package/dist/src/Menu/Menu.js

@@ -2,15 +2,15 @@ import React, { useCallback, useRef, useState } from "react";
 import { Keyboard, Platform, Pressable, View, useWindowDimensions, } from "react-native";
 import { Portal } from "react-native-portalize";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
-import { styles } from "./Menu.style";
+import { useStyles } from "./Menu.style";
 import { findViewpoint } from "./utils";
 import { MenuOption } from "./components/MenuOption";
 import { Overlay } from "./components/Overlay";
-import { tokens } from "../utils/design";
 import { Button } from "../Button";
 import { Content } from "../Content";
 import { useAtlantisContext } from "../AtlantisContext";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 export function Menu({ menuOptions, customActivator }) {
     const [open, setOpen] = useState(false);
     const [menuPosition, setMenuPosition] = useState();
@@ -18,11 +18,12 @@ export function Menu({ menuOptions, customActivator }) {
     const menuButtonRef = useRef();
     const screenInfo = useScreenInformation();
     const { t } = useAtlantisI18n();
+    const styles = useStyles();
     const findMenuLayout = useCallback(() => {
         if (activatorLayout.current) {
-            setMenuPosition(findViewpoint(screenInfo, activatorLayout.current));
+            setMenuPosition(findViewpoint(screenInfo, activatorLayout.current, styles));
         }
-    }, [screenInfo, activatorLayout]);
+    }, [screenInfo, activatorLayout, styles]);
     const openMenu = () => {
         var _a;
         (_a = menuButtonRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((x, y, width, height) => {
@@ -48,6 +49,7 @@ export function Menu({ menuOptions, customActivator }) {
             openMenu();
         }
     };
+    const { tokens } = useAtlantisTheme();
     return (React.createElement(React.Fragment, null,
         React.createElement(View, { ref: ref => {
                 menuButtonRef.current = ref;

package/dist/src/Menu/Menu.style.js

@@ -1,6 +1,7 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 const menuWidth = 208;
-export const styles = StyleSheet.create({
-    menu: Object.assign({ position: "absolute", backgroundColor: tokens["color-surface"], paddingHorizontal: tokens["space-small"], paddingVertical: tokens["space-small"] + tokens["space-smallest"], borderRadius: tokens["radius-base"], width: menuWidth }, tokens["shadow-high"]),
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        menu: Object.assign({ position: "absolute", backgroundColor: tokens["color-surface"], paddingHorizontal: tokens["space-small"], paddingVertical: tokens["space-small"] + tokens["space-smallest"], borderRadius: tokens["radius-base"], width: menuWidth }, tokens["shadow-high"]),
+    };
 });

package/dist/src/Menu/components/MenuOption/MenuOption.js

@@ -1,14 +1,16 @@
 import React from "react";
 import { Pressable, View } from "react-native";
 import capitalize from "lodash/capitalize";
-import { styles } from "./MenuOption.style";
-import { tokens } from "../../../utils/design";
+import { useStyles } from "./MenuOption.style";
 import { Flex } from "../../../Flex";
 import { Typography } from "../../../Typography";
 import { Icon } from "../../../Icon";
+import { useAtlantisTheme } from "../../../AtlantisThemeContext";
 export function MenuOption({ label, icon, iconColor = "heading", textAlign, destructive, textTransform = "capitalize", onPress, setOpen, }) {
     const destructiveColor = "destructive";
     const textVariation = destructive ? destructiveColor : "heading";
+    const styles = useStyles();
+    const { tokens } = useAtlantisTheme();
     return (React.createElement(View, { testID: "ATL-MENU-OPTIONS" },
         React.createElement(Pressable, { style: ({ pressed }) => [
                 styles.menuOption,

package/dist/src/Menu/components/MenuOption/MenuOption.style.js

@@ -1,10 +1,11 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
-export const styles = StyleSheet.create({
-    menuOption: {
-        display: "flex",
-        paddingHorizontal: tokens["space-base"],
-        paddingVertical: tokens["space-small"],
-        borderRadius: tokens["radius-large"],
-    },
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        menuOption: {
+            display: "flex",
+            paddingHorizontal: tokens["space-base"],
+            paddingVertical: tokens["space-small"],
+            borderRadius: tokens["radius-large"],
+        },
+    };
 });

package/dist/src/Menu/components/Overlay/Overlay.js

@@ -1,7 +1,8 @@
 import React from "react";
 import { Pressable, View } from "react-native";
-import { styles } from "./Overlay.style";
+import { useStyles } from "./Overlay.style";
 export function Overlay({ setOpen }) {
+    const styles = useStyles();
     return (React.createElement(Pressable, { onPressIn: () => {
             setOpen(false);
         } },

package/dist/src/Menu/components/Overlay/Overlay.style.js

@@ -1,6 +1,8 @@
 import { Dimensions, StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 const { height } = Dimensions.get("window");
-export const styles = StyleSheet.create({
-    overlay: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: tokens["color-overlay"], opacity: 0, height }),
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        overlay: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: tokens["color-overlay"], opacity: 0, height }),
+    };
 });

package/dist/src/Menu/utils.js

@@ -1,5 +1,4 @@
-import { styles } from "./Menu.style";
-export function findViewpoint(screenInfo, activatorLayout) {
+export function findViewpoint(screenInfo, activatorLayout, styles) {
     const { windowHeight, windowWidth, headerHeight } = screenInfo;
     const pos = {};
     const menuWidth = styles.menu.width;

package/dist/src/ProgressBar/ProgressBar.js

@@ -1,13 +1,15 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./ProgressBar.style";
+import { useStyles } from "./ProgressBar.style";
 import { ProgressBarInner, calculateWidth } from "./ProgressBarInner";
 import { ProgressBarStepped } from "./ProgressBarStepped";
 import { sizeStyles } from "./ProgressBar.size.style";
-import { tokens } from "../utils/design";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 export function ProgressBar({ loading, total, current, inProgress = 0, reverseTheme = false, header, variation = "progress", size = "base", }) {
     const { t } = useAtlantisI18n();
+    const styles = useStyles();
+    const { tokens } = useAtlantisTheme();
     return (React.createElement(View, { accessible: true, accessibilityRole: "progressbar", accessibilityLabel: getA11yLabel() },
         header,
         variation === "stepped" ? (React.createElement(ProgressBarStepped, { total: total, current: current, color: reverseTheme ? undefined : tokens["color-surface--background"], loading: loading, inProgress: inProgress })) : (React.createElement(View, { style: [styles.progressBarContainer, sizeStyles[size]] },

package/dist/src/ProgressBar/ProgressBar.style.js

@@ -1,36 +1,37 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    progressBarContainer: {
-        marginTop: tokens["space-small"],
-        marginBottom: tokens["space-small"],
-        position: "relative",
-        flexDirection: "row",
-    },
-    progressBarInner: {
-        backgroundColor: "rgba(255,255,255,0.3)",
-        width: "100%",
-        height: "100%",
-        position: "absolute",
-        left: 0,
-        top: 0,
-        borderRadius: 100,
-    },
-    progressInner: {
-        height: "100%",
-        borderRadius: 100,
-    },
-    step: {
-        flex: 1,
-        marginRight: tokens["space-small"],
-        height: "100%",
-        borderRadius: 100,
-        borderColor: "rgba(255,255,255,0.3)",
-    },
-    completedStep: {
-        backgroundColor: tokens["color-interactive"],
-    },
-    inProgressStep: {
-        backgroundColor: tokens["color-informative"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        progressBarContainer: {
+            marginTop: tokens["space-small"],
+            marginBottom: tokens["space-small"],
+            position: "relative",
+            flexDirection: "row",
+        },
+        progressBarInner: {
+            backgroundColor: "rgba(255,255,255,0.3)",
+            width: "100%",
+            height: "100%",
+            position: "absolute",
+            left: 0,
+            top: 0,
+            borderRadius: 100,
+        },
+        progressInner: {
+            height: "100%",
+            borderRadius: 100,
+        },
+        step: {
+            flex: 1,
+            marginRight: tokens["space-small"],
+            height: "100%",
+            borderRadius: 100,
+            borderColor: "rgba(255,255,255,0.3)",
+        },
+        completedStep: {
+            backgroundColor: tokens["color-interactive"],
+        },
+        inProgressStep: {
+            backgroundColor: tokens["color-informative"],
+        },
+    };
 });

package/dist/src/ProgressBar/ProgressBarInner.js

@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 // import Reanimated from "react-native-reanimated";
 // import { useTiming } from "utils/reanimated";
-import { styles } from "./ProgressBar.style";
+import { useStyles } from "./ProgressBar.style";
 export function ProgressBarInner({ width, 
 // animationDuration = 0,
 color, }) {
@@ -12,6 +12,7 @@ color, }) {
     //   fromValue: 0,
     //   toValue: 1,
     // });
+    const styles = useStyles();
     return (React.createElement(View, { style: [
             styles.progressBarInner,
             Object.assign({ width: `${width}%` }, (color && { backgroundColor: color })),

package/dist/src/ProgressBar/ProgressBarStepped.js

@@ -1,7 +1,8 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./ProgressBar.style";
+import { useStyles } from "./ProgressBar.style";
 export function ProgressBarStepped({ total, current, color, loading, inProgress, }) {
+    const styles = useStyles();
     return (React.createElement(View, { style: [styles.progressBarContainer, { height: 10 }] }, Array.from({ length: total }).map((_, index) => {
         const step = index + 1;
         const isCompleted = step <= current;
@@ -16,6 +17,10 @@ export function ProgressBarStepped({ total, current, color, loading, inProgress,
                     step <= inProgressSteps &&
                     styles.inProgressStep,
                 lastStep && { marginRight: 0 },
-            ], testID: "progress-step" }));
+            ], testID: isCompleted
+                ? "progress-step-completed"
+                : step <= inProgressSteps
+                    ? "progress-step-in-progress"
+                    : "progress-step-incomplete" }));
     })));
 }

package/dist/src/Select/Select.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./Select.style";
+import { useStyles } from "./Select.style";
 import { SelectInternalPicker } from "./components/SelectInternalPicker";
 import { InputFieldWrapper } from "../InputFieldWrapper";
 import { Icon } from "../Icon";
@@ -21,6 +21,7 @@ export function Select({ value, defaultValue, onChange, children, placeholder, l
     });
     const valueTextVariation = disabled ? "disabled" : undefined;
     const hasValue = internalValue && (internalValue === null || internalValue === void 0 ? void 0 : internalValue.length) > 0;
+    const styles = useStyles();
     return (React.createElement(InputFieldWrapper, { error: error, invalid: invalid || !!error, hasValue: hasValue, styleOverride: {
             container: { paddingLeft: undefined },
         }, assistiveText: assistiveText },