@jobber/components-native 0.76.1-JOB-116234-63c4467.27 → 0.76.1-JOB-116234-6cadae0.33

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.76.1-JOB-116234-63c4467.27+63c44675",
+    "version": "0.76.1-JOB-116234-6cadae0.33+6cadae01",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -80,5 +80,5 @@
         "react-native-safe-area-context": "^4.5.2",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "63c446753585b99a48ea4782613671ca6ff3c8b1"
+    "gitHead": "6cadae0138cf0633adc31d349b1f03dc50776679"
 }

package/dist/src/BottomSheet/BottomSheet.style.js

@@ -1,9 +1,8 @@
 import { Dimensions, StyleSheet } from "react-native";
-import { tokens as staticTokens } from "../utils/design";
 import { buildThemedStyles } from "../AtlantisThemeContext";
 const { height } = Dimensions.get("window");
-const modalBorderRadius = staticTokens["radius-larger"];
 export const useStyles = buildThemedStyles(tokens => {
+    const modalBorderRadius = tokens["radius-larger"];
     return {
         overlayModalize: {
             backgroundColor: "transparent",

package/dist/src/Button/Button.style.js

@@ -29,7 +29,7 @@ export const useStyles = buildThemedStyles(tokens => {
         },
         base: {
             minHeight: baseButtonHeight,
-            // paddingHorizontal: tokens["space-base"],
+            paddingHorizontal: tokens["space-base"],
         },
         small: {
             minHeight: smallButtonHeight,

package/dist/src/Checkbox/Checkbox.style.js

@@ -1,7 +1,6 @@
-import { tokens as staticTokens } from "../utils/design";
 import { buildThemedStyles } from "../AtlantisThemeContext";
-const checkboxDimensions = staticTokens["space-large"] + staticTokens["space-smaller"];
 export const useStyles = buildThemedStyles(tokens => {
+    const checkboxDimensions = tokens["space-large"] + tokens["space-smaller"];
     return {
         container: {
             width: "100%",

package/dist/src/Chip/Chip.style.js

@@ -1,7 +1,6 @@
-import { tokens as staticTokens } from "../utils/design";
 import { buildThemedStyles } from "../AtlantisThemeContext";
-const chipHeight = staticTokens["space-larger"] + staticTokens["space-small"];
 export const useStyles = buildThemedStyles(tokens => {
+    const chipHeight = tokens["space-larger"] + tokens["space-small"];
     return {
         container: {
             alignItems: "center",

package/dist/src/ContentOverlay/ContentOverlay.style.js

@@ -1,8 +1,7 @@
-import { tokens as staticTokens } from "../utils/design";
 import { buildThemedStyles } from "../AtlantisThemeContext";
-const modalBorderRadius = staticTokens["radius-larger"];
-const titleOffsetFromHandle = staticTokens["space-base"];
 export const useStyles = buildThemedStyles(tokens => {
+    const modalBorderRadius = tokens["radius-larger"];
+    const titleOffsetFromHandle = tokens["space-base"];
     return {
         handle: {
             width: tokens["space-largest"],

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

@@ -1,49 +1,49 @@
 import { StyleSheet } from "react-native";
 import { buildThemedStyles, } from "../AtlantisThemeContext";
-import { 
-// eslint-disable-next-line import/no-deprecated
-typographyStyles as staticTypographyStyles, useTypographyStyles, } from "../Typography";
+import { getTypographyStyles } from "../Typography";
 import { tokens as staticTokens } from "../utils/design";
-export const createCommonInputTokens = (tokens, typographyStyles) => ({
-    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"],
-    },
-});
+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(
-// eslint-disable-next-line import/no-deprecated
-createCommonInputTokens(staticTokens, staticTypographyStyles));
-export const useCommonInputStyles = () => {
-    const typographyStyles = useTypographyStyles();
-    const themedStyles = buildThemedStyles(tokens => createCommonInputTokens(tokens, typographyStyles))();
-    return themedStyles;
+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.style.js

@@ -1,11 +1,11 @@
 import { StyleSheet } from "react-native";
-import { useCommonInputStyles } from "./CommonInputStyles.style";
+import { getCommonInputStyles } from "./CommonInputStyles.style";
 import { buildThemedStyles } from "../AtlantisThemeContext";
-import { useTypographyStyles } from "../Typography";
-export const useStyles = () => {
-    const commonInputStyles = useCommonInputStyles();
-    const typographyStyles = useTypographyStyles();
-    return buildThemedStyles(tokens => ({
+import { getTypographyStyles } from "../Typography";
+export const useStyles = buildThemedStyles(tokens => {
+    const commonInputStyles = getCommonInputStyles(tokens);
+    const typographyStyles = getTypographyStyles(tokens);
+    return {
         container: StyleSheet.flatten([
             commonInputStyles.container,
             {
@@ -119,5 +119,5 @@ export const useStyles = () => {
             paddingTop: tokens["space-base"] - tokens["space-smaller"],
             bottom: tokens["space-smaller"],
         },
-    }))();
-};
+    };
+});

package/dist/src/InputFieldWrapper/index.js

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

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

@@ -1,8 +1,8 @@
 import { buildThemedStyles } from "../AtlantisThemeContext";
-import { useTypographyStyles } from "../Typography";
-export const useStyles = () => {
-    const typographyStyles = useTypographyStyles();
-    return buildThemedStyles(tokens => ({
+import { getTypographyStyles } from "../Typography";
+export const useStyles = buildThemedStyles(tokens => {
+    const typographyStyles = getTypographyStyles(tokens);
+    return {
         pressable: {
             flex: 1,
         },
@@ -21,5 +21,5 @@ export const useStyles = () => {
         inputInvalid: {
             borderColor: tokens["color-critical"],
         },
-    }))();
-};
+    };
+});

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

@@ -1,8 +1,8 @@
 import { buildThemedStyles } from "../AtlantisThemeContext";
-import { useTypographyStyles } from "../Typography";
-export const useStyles = () => {
-    const typographyStyles = useTypographyStyles();
-    return buildThemedStyles(tokens => ({
+import { getTypographyStyles } from "../Typography";
+export const useStyles = buildThemedStyles(tokens => {
+    const typographyStyles = getTypographyStyles(tokens);
+    return {
         inputPaddingTop: {
             paddingTop: (typographyStyles.smallSize.fontSize || 0) +
                 tokens["space-smaller"] +
@@ -20,5 +20,5 @@ export const useStyles = () => {
         multilineInputiOS: {
             paddingTop: (typographyStyles.defaultSize.fontSize || 0) + tokens["space-smallest"],
         },
-    }))();
-};
+    };
+});

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

@@ -1,17 +1,8 @@
-import { Dimensions } from "react-native";
+import { Dimensions, StyleSheet } from "react-native";
 import { buildThemedStyles } from "../../../AtlantisThemeContext";
 const { height } = Dimensions.get("window");
 export const useStyles = buildThemedStyles(tokens => {
     return {
-        overlay: {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: tokens["color-overlay"],
-            opacity: 0,
-            height,
-        },
+        overlay: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: tokens["color-overlay"], opacity: 0, height }),
     };
 });

package/dist/src/Select/Select.style.js

@@ -1,9 +1,9 @@
 import { StyleSheet } from "react-native";
-import { useCommonInputStyles } from "../InputFieldWrapper";
+import { getCommonInputStyles } from "../InputFieldWrapper";
 import { buildThemedStyles } from "../AtlantisThemeContext";
-export const useStyles = () => {
-    const commonInputStyles = useCommonInputStyles();
-    return buildThemedStyles(tokens => ({
+export const useStyles = buildThemedStyles(tokens => {
+    const commonInputStyles = getCommonInputStyles(tokens);
+    return {
         container: StyleSheet.flatten([
             commonInputStyles.container,
             {
@@ -14,14 +14,17 @@ export const useStyles = () => {
                 borderWidth: 0,
             },
         ]),
-        input: {
-            flexDirection: "row",
-            flexGrow: 0,
-            paddingTop: tokens["space-smaller"],
-            minHeight: 0,
-            minWidth: "100%",
-            paddingRight: tokens["space-small"],
-        },
+        input: StyleSheet.flatten([
+            commonInputStyles.input,
+            {
+                flexDirection: "row",
+                flexGrow: 0,
+                paddingTop: tokens["space-smaller"],
+                minHeight: 0,
+                minWidth: "100%",
+                paddingRight: tokens["space-small"],
+            },
+        ]),
         value: {
             flexGrow: 1,
             flexShrink: 1,
@@ -47,5 +50,5 @@ export const useStyles = () => {
             paddingTop: tokens["space-smaller"],
             flexDirection: "row",
         },
-    }))();
-};
+    };
+});

package/dist/src/Typography/Typography.js

@@ -14,7 +14,7 @@ const maxNumberOfLines = {
 };
 export const Typography = React.memo(InternalTypography);
 // eslint-disable-next-line max-statements
-function InternalTypography({ fontFamily, fontStyle, fontWeight, transform, color, align, size = "default", children, maxLines = "unlimited", allowFontScaling = true, maxFontScaleSize, adjustsFontSizeToFit = false, lineHeight, letterSpacing, reverseTheme = false, hideFromScreenReader = false, accessibilityRole = "text", strikeThrough = false, underline, UNSAFE_style, selectable = true, }) {
+function InternalTypography({ fontFamily, fontStyle, fontWeight, transform, color, align, size = "default", children, maxLines = "unlimited", allowFontScaling = true, maxFontScaleSize, adjustsFontSizeToFit = false, lineHeight, letterSpacing = "base", reverseTheme = false, hideFromScreenReader = false, accessibilityRole = "text", strikeThrough = false, underline, UNSAFE_style, selectable = true, }) {
     const styles = useTypographyStyles();
     const sizeAndHeight = getSizeAndHeightStyle(size, styles, lineHeight);
     const style = [
@@ -102,6 +102,6 @@ function getSizeAndHeightStyle(textSize, styles, lineHeightOverwrite) {
     }
     return fontSize;
 }
-function getLetterSpacingStyle(letterSpacing = "base", styles) {
+function getLetterSpacingStyle(letterSpacing, styles) {
     return styles[`${letterSpacing}LetterSpacing`];
 }

package/dist/src/Typography/Typography.style.js

@@ -62,9 +62,9 @@ const fonts = Platform.select({
     default: deviceFonts,
 });
 /**
- * Reusable typography tokens to ensure consistency for any client facing texts.
+ * Reusable typography styles to ensure consistency for any client facing texts.
  */
-export const createTypographyTokens = (tokens) => (Object.assign(Object.assign({}, fonts), { italic: {
+export const getTypographyStyles = (tokens) => (Object.assign(Object.assign({}, fonts), { italic: {
         fontStyle: "italic",
     }, underline: {
         textDecorationColor: tokens["color-text--secondary"],
@@ -356,5 +356,5 @@ export const createTypographyTokens = (tokens) => (Object.assign(Object.assign({
 /**
  * @deprecated Use useTypographyStyles instead
  */
-export const typographyStyles = StyleSheet.create(createTypographyTokens(staticTokens));
-export const useTypographyStyles = buildThemedStyles(createTypographyTokens);
+export const typographyStyles = StyleSheet.create(getTypographyStyles(staticTokens));
+export const useTypographyStyles = buildThemedStyles(getTypographyStyles);

package/dist/src/Typography/index.js

@@ -1,4 +1,4 @@
 export { Typography } from "./Typography";
-export { useTypographyStyles } from "./Typography.style";
+export { getTypographyStyles, useTypographyStyles } from "./Typography.style";
 export { typographyStyles } from "./Typography.style";
 export { TypographyGestureDetector } from "./TypographyGestureDetector";