@jobber/components-native 0.76.1-JOB-116234-6cadae0.33 → 0.76.1-JOB-116234-180b1c7.36

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-6cadae0.33+6cadae01",
+  "version": "0.76.1-JOB-116234-180b1c7.36+180b1c74",
   "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": "6cadae0138cf0633adc31d349b1f03dc50776679"
+  "gitHead": "180b1c74afc3e9e14b7f9e9fe42f723ff4390b68"
 }

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

@@ -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`];
@@ -303,7 +303,7 @@ function getSizeAndHeightStyle(
 
 function getLetterSpacingStyle(
   letterSpacing: LetterSpacing,
-  styles: Record<string, TextStyle>,
+  styles: ReturnType<typeof useTypographyStyles>,
 ) {
   return styles[`${letterSpacing}LetterSpacing`];
 }