@jobber/components-native 0.76.1-JOB-116234-314c5ff.22 → 0.76.1-JOB-116234-4bc5afd.23

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.76.1-JOB-116234-314c5ff.22+314c5ff4",
+    "version": "0.76.1-JOB-116234-4bc5afd.23+4bc5afdb",
     "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": "314c5ff4e8322594d2fc7ffce54a204f4a6731cb"
+    "gitHead": "4bc5afdb99786f50a9ae8474ac282eb593dd9867"
 }

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

@@ -1,6 +1,8 @@
 import { StyleSheet } from "react-native";
 import { buildThemedStyles, } from "../AtlantisThemeContext";
-import { typographyStyles as staticTypographyStyles, useTypographyStyles, } from "../Typography";
+import { 
+// eslint-disable-next-line import/no-deprecated
+typographyStyles as staticTypographyStyles, useTypographyStyles, } from "../Typography";
 import { tokens as staticTokens } from "../utils/design";
 export const createCommonInputTokens = (tokens, typographyStyles) => ({
     input: {
@@ -37,7 +39,9 @@ export const createCommonInputTokens = (tokens, typographyStyles) => ({
 /**
  * @deprecated Use useCommonInputStyles instead
  */
-export const commonInputStyles = StyleSheet.create(createCommonInputTokens(staticTokens, staticTypographyStyles));
+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))();

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

@@ -2,13 +2,14 @@ import React from "react";
 import { Pressable, Text as RNText, View, } from "react-native";
 import { Icon } from "../../../Icon";
 import { Text } from "../../../Text";
-import { typographyStyles } from "../../../Typography";
+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,

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

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

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

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

package/dist/src/Typography/Typography.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { I18nManager, StyleSheet, Text, } from "react-native";
 import { TypographyGestureDetector } from "./TypographyGestureDetector";
-import { typographyStyles as styles } from "./Typography.style";
+import { useTypographyStyles } from "./Typography.style";
 import { capitalize } from "../utils/intl";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 const maxNumberOfLines = {
@@ -15,13 +15,14 @@ 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, }) {
-    const sizeAndHeight = getSizeAndHeightStyle(size, lineHeight);
+    const styles = useTypographyStyles();
+    const sizeAndHeight = getSizeAndHeightStyle(size, styles, lineHeight);
     const style = [
-        getFontStyle(fontFamily, fontStyle, fontWeight),
-        getColorStyle(color, reverseTheme),
-        getAlignStyle(align),
+        getFontStyle(fontFamily, fontStyle, fontWeight, styles),
+        getColorStyle(styles, color, reverseTheme),
+        getAlignStyle(styles, align),
         sizeAndHeight,
-        getLetterSpacingStyle(letterSpacing),
+        getLetterSpacingStyle(letterSpacing, styles),
     ];
     if (strikeThrough) {
         style.push(styles.strikeThrough);
@@ -57,7 +58,7 @@ function getScaleMultiplier(maxFontScaleSize = 0, size = 1) {
         return undefined;
     return maxFontScaleSize / size;
 }
-function getFontStyle(fontFamily = "base", fontStyle = "regular", fontWeight = "regular") {
+function getFontStyle(fontFamily = "base", fontStyle = "regular", fontWeight = "regular", styles) {
     const defaultBaseFontStyling = styles.baseRegularRegular;
     const defaultDisplayFontStyling = styles.displayRegularBold;
     const styleKey = `${fontFamily}${capitalize(fontStyle)}${capitalize(fontWeight)}`;
@@ -83,17 +84,17 @@ function getTransformedText(text, transform) {
             return text;
     }
 }
-function getColorStyle(color, reverseTheme) {
+function getColorStyle(styles, color, reverseTheme) {
     if (color === "default" || !color) {
         return styles.greyBlue;
     }
     const colorStyleKey = `${color}${reverseTheme ? "Reverse" : ""}`;
     return styles[`${colorStyleKey}`];
 }
-function getAlignStyle(alignStyle = I18nManager.isRTL ? "end" : "start") {
+function getAlignStyle(styles, alignStyle = I18nManager.isRTL ? "end" : "start") {
     return styles[`${alignStyle}Align`];
 }
-function getSizeAndHeightStyle(textSize, lineHeightOverwrite) {
+function getSizeAndHeightStyle(textSize, styles, lineHeightOverwrite) {
     const fontSize = styles[`${textSize}Size`];
     if (lineHeightOverwrite) {
         const lineHeight = styles[`${lineHeightOverwrite}LineHeight`];
@@ -101,6 +102,6 @@ function getSizeAndHeightStyle(textSize, lineHeightOverwrite) {
     }
     return fontSize;
 }
-function getLetterSpacingStyle(letterSpacing = "base") {
+function getLetterSpacingStyle(letterSpacing = "base", styles) {
     return styles[`${letterSpacing}LetterSpacing`];
 }

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

@@ -354,7 +354,7 @@ export const createTypographyTokens = (tokens) => (Object.assign(Object.assign({
         textDecorationLine: "line-through",
     } }));
 /**
- * @deprecated Use useCommonInputStyles instead
+ * @deprecated Use useTypographyStyles instead
  */
 export const typographyStyles = StyleSheet.create(createTypographyTokens(staticTokens));
 export const useTypographyStyles = buildThemedStyles(createTypographyTokens);