@jobber/components-native 0.75.3-TAYLORtes-c9be7a8.250 → 0.75.3-cleanup-fo-ffcd368.137

package/dist/src/FormatFile/components/FileView/FileView.style.js

@@ -1,64 +1,65 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
-export const styles = StyleSheet.create({
-    overlay: {
-        backgroundColor: tokens["color-overlay--dimmed"],
-    },
-    overlayError: {
-        backgroundColor: tokens["color-overlay--dimmed"],
-        borderColor: tokens["color-critical"],
-        borderWidth: tokens["border-base"],
-    },
-    iconCenter: {
-        marginBottom: tokens["space-large"],
-    },
-    fileBackground: {
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
-    },
-    fileBackgroundGrid: {
-        height: "100%",
-    },
-    fileBackgroundFlat: {
-        justifyContent: "center",
-        height: tokens["space-extravagant"],
-    },
-    fileIconGrid: {
-        top: tokens["space-small"],
-    },
-    fileIconFlat: {
-        top: tokens["space-smaller"],
-    },
-    fileNameError: {
-        alignItems: "center",
-        borderTopColor: tokens["color-border"],
-        borderTopWidth: tokens["space-minuscule"],
-        width: "100%",
-        marginTop: tokens["space-base"],
-    },
-    fileName: {
-        alignItems: "center",
-        borderTopColor: tokens["color-border"],
-        borderTopWidth: tokens["space-minuscule"],
-        width: "100%",
-    },
-    fileNameGrid: {
-        position: "absolute",
-        right: 0,
-        bottom: 0,
-        left: 0,
-    },
-    fileNameFlat: {
-        top: tokens["space-small"],
-    },
-    fileOverlay: {
-        position: "absolute",
-        justifyContent: "center",
-        right: 0,
-        bottom: 0,
-        left: 0,
-        height: "100%",
-        paddingHorizontal: tokens["space-small"],
-    },
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        overlay: {
+            backgroundColor: tokens["color-overlay--dimmed"],
+        },
+        overlayError: {
+            backgroundColor: tokens["color-overlay--dimmed"],
+            borderColor: tokens["color-critical"],
+            borderWidth: tokens["border-base"],
+        },
+        iconCenter: {
+            marginBottom: tokens["space-large"],
+        },
+        fileBackground: {
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+        },
+        fileBackgroundGrid: {
+            height: "100%",
+        },
+        fileBackgroundFlat: {
+            justifyContent: "center",
+            height: tokens["space-extravagant"],
+        },
+        fileIconGrid: {
+            top: tokens["space-small"],
+        },
+        fileIconFlat: {
+            top: tokens["space-smaller"],
+        },
+        fileNameError: {
+            alignItems: "center",
+            borderTopColor: tokens["color-border"],
+            borderTopWidth: tokens["space-minuscule"],
+            width: "100%",
+            marginTop: tokens["space-base"],
+        },
+        fileName: {
+            alignItems: "center",
+            borderTopColor: tokens["color-border"],
+            borderTopWidth: tokens["space-minuscule"],
+            width: "100%",
+        },
+        fileNameGrid: {
+            position: "absolute",
+            right: 0,
+            bottom: 0,
+            left: 0,
+        },
+        fileNameFlat: {
+            top: tokens["space-small"],
+        },
+        fileOverlay: {
+            position: "absolute",
+            justifyContent: "center",
+            right: 0,
+            bottom: 0,
+            left: 0,
+            height: "100%",
+            paddingHorizontal: tokens["space-small"],
+        },
+    };
 });

package/dist/src/FormatFile/components/MediaView/MediaView.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { ImageBackground, View } from "react-native";
-import { styles } from "./MediaView.style";
+import { useStyles } from "./MediaView.style";
 import { StatusCode } from "../../types";
 import { computeA11yLabel } from "../../utils";
 import { ActivityIndicator } from "../../../ActivityIndicator";
@@ -22,32 +22,33 @@ export function MediaView({ accessibilityLabel, showOverlay, showError, file, st
     });
     const hasError = showError || error;
     const uri = thumbnail || file.thumbnailUrl || file.source;
+    const styles = useStyles();
     return (React.createElement(View, { accessible: true, accessibilityLabel: a11yLabel },
         React.createElement(ImageBackground, { style: [
                 styles.imageBackground,
                 styleInGrid ? styles.imageBackgroundGrid : styles.imageBackgroundFlat,
             ], resizeMode: styleInGrid ? "cover" : "contain", source: { uri }, testID: "test-image", onLoadStart: () => setIsLoading(true), onLoadEnd: () => setIsLoading(false) },
-            React.createElement(Overlay, { isLoading: isLoading, showOverlay: showOverlay, hasError: hasError, file: file, onUploadComplete: onUploadComplete }))));
+            React.createElement(Overlay, { isLoading: isLoading, showOverlay: showOverlay, hasError: hasError, file: file, onUploadComplete: onUploadComplete, styles: styles }))));
 }
-function Overlay({ isLoading, showOverlay, hasError, file, onUploadComplete, }) {
+function Overlay({ isLoading, showOverlay, hasError, file, onUploadComplete, styles, }) {
     if (isLoading)
         return React.createElement(ActivityIndicator, null);
     if (hasError)
-        return React.createElement(ErrorOverlay, null);
+        return React.createElement(ErrorOverlay, { styles: styles });
     if (showOverlay) {
-        return (React.createElement(ProgressOverlay, { status: file.status, progress: file.progress, onUploadComplete: onUploadComplete }));
+        return (React.createElement(ProgressOverlay, { status: file.status, progress: file.progress, onUploadComplete: onUploadComplete, styles: styles }));
     }
     if (isVideo(file.type) && file.showFileTypeIndicator) {
         return React.createElement(Icon, { name: "video", color: "white" });
     }
     return React.createElement(React.Fragment, null);
 }
-function ProgressOverlay({ status, progress, onUploadComplete, }) {
+function ProgressOverlay({ status, progress, onUploadComplete, styles, }) {
     const freezeProgressBar = status !== StatusCode.Completed && progress >= 0.9;
     return (React.createElement(View, { style: [styles.imageBackground, styles.overlay], testID: "format-file-progress-bar-container" },
         React.createElement(ProgressBar, { status: status, progress: freezeProgressBar ? 0.9 : progress, onComplete: onUploadComplete })));
 }
-function ErrorOverlay() {
+function ErrorOverlay({ styles, }) {
     return (React.createElement(View, { style: [styles.imageBackground, styles.overlayError], testID: "format-file-error-container" },
         React.createElement(ErrorIcon, null)));
 }

package/dist/src/FormatFile/components/MediaView/MediaView.style.js

@@ -1,27 +1,28 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
-export const styles = StyleSheet.create({
-    imageBackground: {
-        width: "100%",
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    imageBackgroundFlat: {
-        aspectRatio: 375 / 150,
-    },
-    imageBackgroundGrid: {
-        height: "100%",
-    },
-    overlay: {
-        height: "100%",
-        backgroundColor: tokens["color-overlay--dimmed"],
-        paddingHorizontal: tokens["space-small"],
-    },
-    overlayError: {
-        height: "100%",
-        backgroundColor: tokens["color-overlay--dimmed"],
-        paddingHorizontal: tokens["space-small"],
-        borderColor: tokens["color-critical"],
-        borderWidth: tokens["border-base"],
-    },
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        imageBackground: {
+            width: "100%",
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        imageBackgroundFlat: {
+            aspectRatio: 375 / 150,
+        },
+        imageBackgroundGrid: {
+            height: "100%",
+        },
+        overlay: {
+            height: "100%",
+            backgroundColor: tokens["color-overlay--dimmed"],
+            paddingHorizontal: tokens["space-small"],
+        },
+        overlayError: {
+            height: "100%",
+            backgroundColor: tokens["color-overlay--dimmed"],
+            paddingHorizontal: tokens["space-small"],
+            borderColor: tokens["color-critical"],
+            borderWidth: tokens["border-base"],
+        },
+    };
 });

package/dist/src/FormatFile/components/ProgressBar/ProgressBar.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from "react";
 import { Animated, View } from "react-native";
-import { styles } from "./ProgressBar.style";
+import { useStyles } from "./ProgressBar.style";
 import { StatusCode } from "../../types";
 export const ProgressBar = ({ progress, status, onComplete, }) => {
     const barWidth = useRef(new Animated.Value(0)).current;
@@ -19,6 +19,7 @@ export const ProgressBar = ({ progress, status, onComplete, }) => {
             }
         });
     }, [progress, barWidth, onComplete, status]);
+    const styles = useStyles();
     return (React.createElement(View, { testID: "format-file-progress-bar", style: styles.container },
         React.createElement(Animated.View, { testID: "format-file-inner-progress-bar", style: [
                 styles.progress,

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

@@ -1,15 +1,16 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
-export const styles = StyleSheet.create({
-    container: {
-        width: "100%",
-        height: 8,
-        borderRadius: tokens["radius-circle"],
-        overflow: "hidden",
-        backgroundColor: tokens["color-surface--background"],
-    },
-    progress: {
-        height: "100%",
-        backgroundColor: tokens["color-green"],
-    },
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        container: {
+            width: "100%",
+            height: 8,
+            borderRadius: tokens["radius-circle"],
+            overflow: "hidden",
+            backgroundColor: tokens["color-interactive--background"],
+        },
+        progress: {
+            height: "100%",
+            backgroundColor: tokens["color-green"],
+        },
+    };
 });

package/dist/src/Glimmer/Glimmer.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Animated, Easing, View } from "react-native";
 import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
-import { shineWidth, styles } from "./Glimmer.style";
-import { sizeStyles } from "./Glimmer.size.style";
-import { shapeStyles } from "./Glimmer.shape.style";
+import { shineWidth, useStyles } from "./Glimmer.style";
+import { useSizeStyles } from "./Glimmer.size.style";
+import { useShapeStyles } from "./Glimmer.shape.style";
 import { tokens } from "../utils/design";
 export const GLIMMER_TEST_ID = "ATL-Glimmer";
 export const GLIMMER_SHINE_TEST_ID = "ATL-Glimmer-Shine";
@@ -22,6 +22,9 @@ export function Glimmer({ width, shape = "rectangle", size = "base", timing = "b
         shine.start();
         return shine.stop;
     }, [parentWidth]);
+    const styles = useStyles();
+    const sizeStyles = useSizeStyles();
+    const shapeStyles = useShapeStyles();
     return (React.createElement(View, { style: [
             styles.container,
             sizeStyles[size],

package/dist/src/Glimmer/Glimmer.shape.style.js

@@ -1,16 +1,17 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const shapeStyles = StyleSheet.create({
-    rectangle: {
-        width: "100%",
-    },
-    square: {
-        width: "auto",
-        aspectRatio: 1 / 1,
-    },
-    circle: {
-        width: "auto",
-        aspectRatio: 1 / 1,
-        borderRadius: tokens["radius-circle"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useShapeStyles = buildThemedStyles(tokens => {
+    return {
+        rectangle: {
+            width: "100%",
+        },
+        square: {
+            width: "auto",
+            aspectRatio: 1 / 1,
+        },
+        circle: {
+            width: "auto",
+            aspectRatio: 1 / 1,
+            borderRadius: tokens["radius-circle"],
+        },
+    };
 });

package/dist/src/Glimmer/Glimmer.size.style.js

@@ -1,9 +1,10 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const sizeStyles = StyleSheet.create({
-    small: { height: tokens["space-small"] },
-    base: { height: tokens["space-base"] },
-    large: { height: tokens["space-large"] },
-    larger: { height: tokens["space-larger"] },
-    largest: { height: tokens["space-largest"] },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useSizeStyles = buildThemedStyles(tokens => {
+    return {
+        small: { height: tokens["space-small"] },
+        base: { height: tokens["space-base"] },
+        large: { height: tokens["space-large"] },
+        larger: { height: tokens["space-larger"] },
+        largest: { height: tokens["space-largest"] },
+    };
 });

package/dist/src/Glimmer/Glimmer.style.js

@@ -1,20 +1,22 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const shineWidth = tokens["space-largest"];
-export const styles = StyleSheet.create({
-    container: {
-        backgroundColor: "rgba(0, 0, 0, 0.05)",
-        overflow: "hidden",
-        position: "relative",
-        width: "100%",
-        height: tokens["space-base"],
-        borderRadius: tokens["radius-base"],
-    },
-    shine: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: shineWidth,
-        height: "100%",
-    },
+import { tokens as staticTokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const shineWidth = staticTokens["space-largest"];
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        container: {
+            backgroundColor: "rgba(0, 0, 0, 0.05)",
+            overflow: "hidden",
+            position: "relative",
+            width: "100%",
+            height: tokens["space-base"],
+            borderRadius: tokens["radius-base"],
+        },
+        shine: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: shineWidth,
+            height: "100%",
+        },
+    };
 });

package/dist/src/IconButton/IconButton.js

@@ -1,8 +1,9 @@
 import React from "react";
 import { TouchableOpacity } from "react-native";
-import { styles } from "./IconButton.style";
+import { useStyles } from "./IconButton.style";
 import { Icon } from "../Icon";
 export function IconButton({ badge, name, color, customColor, onPress, accessibilityLabel, testID, }) {
+    const styles = useStyles();
     return (React.createElement(TouchableOpacity, { onPress: onPress, style: styles.container, accessibilityLabel: accessibilityLabel, accessibilityRole: "button", testID: testID },
         badge,
         React.createElement(Icon, { name: name, color: color, customColor: customColor })));

package/dist/src/IconButton/IconButton.style.js

@@ -1,10 +1,11 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    container: {
-        width: tokens["space-largest"],
-        height: tokens["space-largest"],
-        justifyContent: "center",
-        alignItems: "center",
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        container: {
+            width: tokens["space-largest"],
+            height: tokens["space-largest"],
+            justifyContent: "center",
+            alignItems: "center",
+        },
+    };
 });

package/dist/src/InputFieldWrapper/CommonInputStyles.style.js

@@ -1,35 +1,49 @@
 import { StyleSheet } from "react-native";
-import { typographyStyles } from "../Typography";
-import { tokens } from "../utils/design";
-export const commonInputStyles = StyleSheet.create({
-    input: {
-        width: "100%",
-        flexShrink: 1,
-        flexGrow: 1,
-        color: tokens["color-text"],
-        fontFamily: typographyStyles.baseRegularRegular.fontFamily,
-        fontSize: typographyStyles.defaultSize.fontSize,
-        letterSpacing: typographyStyles.baseLetterSpacing.letterSpacing,
-        minHeight: tokens["space-largest"] + tokens["space-small"],
-        padding: 0,
-    },
-    inputEmpty: {
-        paddingTop: 0,
-    },
-    inputDisabled: {
-        color: typographyStyles.disabled.color,
-    },
-    container: {
-        paddingLeft: tokens["space-base"],
-        marginVertical: tokens["space-smaller"],
-        backgroundColor: tokens["color-surface"],
-        minHeight: tokens["space-largest"] + tokens["space-small"],
-        flexDirection: "row",
-        justifyContent: "space-between",
-        width: "100%",
-        borderColor: tokens["color-border"],
-        borderStyle: "solid",
-        borderWidth: tokens["border-base"],
-        borderRadius: tokens["radius-base"],
-    },
+import { buildThemedStyles, } from "../AtlantisThemeContext";
+import { getTypographyStyles } from "../Typography";
+import { tokens as staticTokens } from "../utils/design";
+export const createCommonInputTokens = (tokens) => {
+    const typographyStyles = getTypographyStyles(tokens);
+    return {
+        input: {
+            width: "100%",
+            flexShrink: 1,
+            flexGrow: 1,
+            color: tokens["color-text"],
+            fontFamily: typographyStyles.baseRegularRegular.fontFamily,
+            fontSize: typographyStyles.defaultSize.fontSize,
+            letterSpacing: typographyStyles.baseLetterSpacing.letterSpacing,
+            minHeight: tokens["space-largest"] + tokens["space-small"],
+            padding: 0,
+        },
+        inputEmpty: {
+            paddingTop: 0,
+        },
+        inputDisabled: {
+            color: typographyStyles.disabled.color,
+        },
+        container: {
+            paddingLeft: tokens["space-base"],
+            marginVertical: tokens["space-smaller"],
+            backgroundColor: tokens["color-surface"],
+            minHeight: tokens["space-largest"] + tokens["space-small"],
+            flexDirection: "row",
+            justifyContent: "space-between",
+            width: "100%",
+            borderColor: tokens["color-border"],
+            borderStyle: "solid",
+            borderWidth: tokens["border-base"],
+            borderRadius: tokens["radius-base"],
+        },
+    };
+};
+/**
+ * @deprecated Use useCommonInputStyles instead
+ */
+export const commonInputStyles = StyleSheet.create(createCommonInputTokens(staticTokens));
+export const getCommonInputStyles = (tokens) => {
+    return createCommonInputTokens(tokens);
+};
+export const useCommonInputStyles = buildThemedStyles(tokens => {
+    return getCommonInputStyles(tokens);
 });

package/dist/src/InputFieldWrapper/InputFieldWrapper.js

@@ -1,12 +1,12 @@
 import React from "react";
 import { Text as RNText, View, } from "react-native";
-import { styles } from "./InputFieldWrapper.style";
+import { useStyles } from "./InputFieldWrapper.style";
 import { PrefixIcon, PrefixLabel } from "./components/Prefix/Prefix";
 import { SuffixIcon, SuffixLabel } from "./components/Suffix/Suffix";
 import { ClearAction } from "./components/ClearAction";
 import { Glimmer } from "../Glimmer/Glimmer";
 import { ErrorMessageWrapper } from "../ErrorMessageWrapper";
-import { typographyStyles } from "../Typography";
+import { useTypographyStyles } from "../Typography";
 import { Text } from "../Text";
 import { ActivityIndicator } from "../ActivityIndicator";
 export const INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID = "ATL-InputFieldWrapper-Glimmers";
@@ -19,6 +19,7 @@ export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveTex
     const isToolbarVisible = toolbar && (toolbarVisibility === "always" || focused);
     const showLoadingSpinner = loading && loadingType === "spinner";
     const showLoadingGlimmer = loading && loadingType === "glimmer";
+    const styles = useStyles();
     return (React.createElement(ErrorMessageWrapper, { message: getMessage({ invalid, error }) },
         React.createElement(View, { testID: "ATL-InputFieldWrapper", style: [
                 styles.container,
@@ -93,6 +94,7 @@ function getMessage({ invalid, error, }) {
     return messages.join("\n");
 }
 function Placeholder({ placeholder, styleOverride, labelVariation, hasMiniLabel, }) {
+    const typographyStyles = useTypographyStyles();
     return (React.createElement(React.Fragment, null, !styleOverride ? (React.createElement(Text, { hideFromScreenReader: true, maxLines: "single", variation: labelVariation, level: hasMiniLabel ? "textSupporting" : "text" }, placeholder)) : (React.createElement(RNText, { accessibilityRole: "none", accessible: false, importantForAccessibility: "no-hide-descendants", numberOfLines: 1, style: [
             typographyStyles[labelVariation],
             typographyStyles.baseRegularRegular,