@jobber/components-native 0.76.1-JOB-116234-c33b316.30 → 0.76.1-JOB-116234-6cadae0.33

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/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-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": "c33b3167c0b220f060d1fe7ad6f48db97af8ea15"
+  "gitHead": "6cadae0138cf0633adc31d349b1f03dc50776679"
 }

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/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;
@@ -302,7 +302,7 @@ function getSizeAndHeightStyle(
 }
 
 function getLetterSpacingStyle(
-  letterSpacing: LetterSpacing = "base",
+  letterSpacing: LetterSpacing,
   styles: Record<string, TextStyle>,
 ) {
   return styles[`${letterSpacing}LetterSpacing`];