@jobber/components-native 0.76.1-JOB-116234-c33b316.30 → 0.76.1-JOB-116234-50e11a8.34

package/dist/types/src/Button/Button.style.d.ts

@@ -24,6 +24,7 @@ export declare const useStyles: () => {
     };
     base: {
         minHeight: number;
+        paddingHorizontal: number;
     };
     small: {
         minHeight: number;

package/dist/types/src/InputFieldWrapper/CommonInputStyles.style.d.ts

@@ -1,7 +1,7 @@
 import { TextStyle, ViewStyle } from "react-native";
 import { AtlantisThemeContextValue } from "../AtlantisThemeContext";
 import { tokens as staticTokens } from "../utils/design";
-export declare const createCommonInputTokens: (tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens, typographyStyles: Record<string, TextStyle>) => Record<string, ViewStyle | TextStyle>;
+export declare const createCommonInputTokens: (tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens) => Record<string, ViewStyle | TextStyle>;
 /**
  * @deprecated Use useCommonInputStyles instead
  */

package/dist/types/src/Menu/components/Overlay/Overlay.style.d.ts

@@ -1,12 +1,12 @@
 export declare const useStyles: () => {
     overlay: {
-        position: "absolute";
-        top: number;
-        left: number;
-        right: number;
-        bottom: number;
         backgroundColor: string;
         opacity: number;
         height: number;
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
     };
 };

package/dist/types/src/Select/Select.style.d.ts

@@ -1,13 +1,6 @@
 export declare const useStyles: () => {
     container: import("react-native").ViewStyle;
-    input: {
-        flexDirection: "row";
-        flexGrow: number;
-        paddingTop: number;
-        minHeight: number;
-        minWidth: "100%";
-        paddingRight: number;
-    };
+    input: import("react-native").ViewStyle;
     value: {
         flexGrow: number;
         flexShrink: number;

package/dist/types/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.style.d.ts

@@ -1,4 +1,4 @@
-export declare const useStyles: () => {
+export declare const styles: {
     overlay: {
         flex: number;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.76.1-JOB-116234-c33b316.30+c33b3167",
+  "version": "0.76.1-JOB-116234-50e11a8.34+50e11a8a",
   "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": "c33b3167c0b220f060d1fe7ad6f48db97af8ea15"
+  "gitHead": "50e11a8ac73483bb0be9fd7b4e9fa72ad637a45a"
 }

package/src/BottomSheet/BottomSheet.style.ts

@@ -1,11 +1,11 @@
 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/src/Button/Button.style.ts

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

package/src/Checkbox/Checkbox.style.ts

@@ -1,10 +1,8 @@
-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/src/Chip/Chip.style.ts

@@ -1,9 +1,8 @@
-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/src/ContentOverlay/ContentOverlay.style.ts

@@ -1,10 +1,9 @@
-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/src/InputFieldWrapper/CommonInputStyles.style.ts

@@ -3,66 +3,62 @@ import {
   AtlantisThemeContextValue,
   buildThemedStyles,
 } from "../AtlantisThemeContext";
-import {
-  getTypographyStyles,
-  // eslint-disable-next-line import/no-deprecated
-  typographyStyles as staticTypographyStyles,
-} from "../Typography";
+import { getTypographyStyles } from "../Typography";
 import { tokens as staticTokens } from "../utils/design";
 
 export const createCommonInputTokens = (
   tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens,
-  typographyStyles: Record<string, TextStyle>,
-): Record<string, ViewStyle | TextStyle> => ({
-  input: {
-    width: "100%" as const,
-    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,
-  },
+): Record<string, ViewStyle | TextStyle> => {
+  const typographyStyles = getTypographyStyles(tokens);
 
-  inputEmpty: {
-    paddingTop: 0,
-  },
+  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,
+    },
 
-  inputDisabled: {
-    color: typographyStyles.disabled.color,
-  },
+    inputEmpty: {
+      paddingTop: 0,
+    },
 
-  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"],
-  },
-});
+    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),
+  createCommonInputTokens(staticTokens),
 );
 
 export const getCommonInputStyles = (
   tokens: AtlantisThemeContextValue["tokens"],
 ) => {
-  const typographyStyles = getTypographyStyles(tokens);
-
-  return createCommonInputTokens(tokens, typographyStyles);
+  return createCommonInputTokens(tokens);
 };
 
 export const useCommonInputStyles = buildThemedStyles(tokens => {

package/src/InputFieldWrapper/InputFieldWrapper.style.ts

@@ -14,6 +14,7 @@ export const useStyles = buildThemedStyles(tokens => {
         flexDirection: "column",
       },
     ]),
+
     field: {
       flexDirection: "row",
       alignItems: "center",

package/src/Menu/components/Overlay/Overlay.style.ts

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

package/src/Select/Select.style.ts

@@ -17,14 +17,17 @@ export const useStyles = buildThemedStyles(tokens => {
       },
     ]),
 
-    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,

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.ios.tsx

@@ -8,7 +8,7 @@ import {
 } from "react-native";
 import { Picker } from "@react-native-picker/picker";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { useStyles } from "./SelectDefaultPicker.style";
+import { styles } from "./SelectDefaultPicker.style";
 import { SelectInternalPickerProps } from "../../types";
 import { SelectPressable } from "../SelectPressable/SelectPressable";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
@@ -23,7 +23,6 @@ export function SelectDefaultPicker({
   const [show, setShow] = useState(false);
   const { t } = useAtlantisI18n();
   const selectedLanguage = options.find(option => option.isActive);
-  const styles = useStyles();
 
   return (
     <>

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.style.ts

@@ -1,34 +1,30 @@
-import { buildThemedStyles } from "../../../AtlantisThemeContext";
+import { StyleSheet } from "react-native";
 
-export const useStyles = buildThemedStyles(tokens => {
-  return {
-    overlay: {
-      flex: 1,
-    },
-    actionBar: {
-      flexDirection: "row",
-      height: 45,
-      justifyContent: "flex-end",
-      alignItems: "center",
-      paddingHorizontal: tokens["space-small"],
-      backgroundColor: tokens["color-surface--background"],
-      borderTopWidth: tokens["border-base"],
-      borderTopColor: tokens["color-border"],
-      zIndex: 2,
-    },
-    pickerContainer: {
-      justifyContent: "center",
-      backgroundColor: tokens["color-surface--background"],
-    },
-    androidPickerContainer: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      width: "100%",
-      height: "100%",
-      color: "transparent",
-      backgroundColor: "transparent",
-      opacity: 0,
-    },
-  };
+export const styles = StyleSheet.create({
+  overlay: { flex: 1 },
+  actionBar: {
+    flexDirection: "row",
+    height: 45,
+    justifyContent: "flex-end",
+    alignItems: "center",
+    paddingHorizontal: 10,
+    backgroundColor: "#f8f8f8",
+    borderTopWidth: 1,
+    borderTopColor: "#dedede",
+    zIndex: 2,
+  },
+  pickerContainer: {
+    justifyContent: "center",
+    backgroundColor: "#d0d4da",
+  },
+  androidPickerContainer: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    color: "transparent",
+    backgroundColor: "transparent",
+    opacity: 0,
+  },
 });

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.tsx

@@ -1,6 +1,6 @@
 import React, { useRef } from "react";
 import { Picker } from "@react-native-picker/picker";
-import { useStyles } from "./SelectDefaultPicker.style";
+import { styles } from "./SelectDefaultPicker.style";
 import { SelectInternalPickerProps } from "../../types";
 import { SelectPressable } from "../SelectPressable";
 import { useAtlantisTheme } from "../../../AtlantisThemeContext";
@@ -15,7 +15,6 @@ export function SelectDefaultPicker({
 }: SelectDefaultPickerProps): JSX.Element {
   const selectedItem = options.find(option => option.isActive);
   const pickerRef = useRef<Picker<string>>(null);
-  const styles = useStyles();
   const { tokens } = useAtlantisTheme();
 
   return (

package/src/Typography/Typography.tsx

@@ -152,7 +152,7 @@ function InternalTypography<T extends FontFamily = "base">({
   maxFontScaleSize,
   adjustsFontSizeToFit = false,
   lineHeight,
-  letterSpacing,
+  letterSpacing = "base",
   reverseTheme = false,
   hideFromScreenReader = false,
   accessibilityRole = "text",
@@ -234,7 +234,7 @@ function getFontStyle(
   fontFamily: FontFamily = "base",
   fontStyle: FontStyle = "regular",
   fontWeight: FontWeight = "regular",
-  styles: Record<string, TextStyle>,
+  styles: ReturnType<typeof useTypographyStyles>,
 ) {
   const defaultBaseFontStyling = styles.baseRegularRegular;
   const defaultDisplayFontStyling = styles.displayRegularBold;
@@ -266,7 +266,7 @@ function getTransformedText(text?: string, transform?: TextTransform) {
 }
 
 function getColorStyle(
-  styles: Record<string, TextStyle>,
+  styles: ReturnType<typeof useTypographyStyles>,
   color?: TextColor,
   reverseTheme?: boolean,
 ) {
@@ -279,7 +279,7 @@ function getColorStyle(
 }
 
 function getAlignStyle(
-  styles: Record<string, TextStyle>,
+  styles: ReturnType<typeof useTypographyStyles>,
   alignStyle: TextAlign = I18nManager.isRTL ? "end" : "start",
 ) {
   return styles[`${alignStyle}Align`];
@@ -287,7 +287,7 @@ function getAlignStyle(
 
 function getSizeAndHeightStyle(
   textSize: TextSize,
-  styles: Record<string, TextStyle>,
+  styles: ReturnType<typeof useTypographyStyles>,
   lineHeightOverwrite?: LineHeight,
 ) {
   const fontSize = styles[`${textSize}Size`];
@@ -302,8 +302,8 @@ function getSizeAndHeightStyle(
 }
 
 function getLetterSpacingStyle(
-  letterSpacing: LetterSpacing = "base",
-  styles: Record<string, TextStyle>,
+  letterSpacing: LetterSpacing,
+  styles: ReturnType<typeof useTypographyStyles>,
 ) {
   return styles[`${letterSpacing}LetterSpacing`];
 }