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

package/dist/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/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,50 +1,48 @@
 import { StyleSheet } from "react-native";
 import { 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, 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 commonInputStyles = StyleSheet.create(createCommonInputTokens(staticTokens));
 export const getCommonInputStyles = (tokens) => {
-    const typographyStyles = getTypographyStyles(tokens);
-    return createCommonInputTokens(tokens, typographyStyles);
+    return createCommonInputTokens(tokens);
 };
 export const useCommonInputStyles = buildThemedStyles(tokens => {
     return getCommonInputStyles(tokens);

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

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

package/dist/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.ios.js

@@ -4,14 +4,13 @@ import {
 Button, Modal, TouchableOpacity, View, } 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 { SelectPressable } from "../SelectPressable/SelectPressable";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 export function SelectDefaultPicker({ children, options, onChange, }) {
     const [show, setShow] = useState(false);
     const { t } = useAtlantisI18n();
     const selectedLanguage = options.find(option => option.isActive);
-    const styles = useStyles();
     return (React.createElement(React.Fragment, null,
         React.createElement(SelectPressable, { onPress: showPicker }, children),
         React.createElement(Modal, { visible: show, transparent: true, animationType: "slide", onRequestClose: hidePicker },

package/dist/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.js

@@ -1,13 +1,12 @@
 import React, { useRef } from "react";
 import { Picker } from "@react-native-picker/picker";
-import { useStyles } from "./SelectDefaultPicker.style";
+import { styles } from "./SelectDefaultPicker.style";
 import { SelectPressable } from "../SelectPressable";
 import { useAtlantisTheme } from "../../../AtlantisThemeContext";
 export function SelectDefaultPicker({ children, options, disabled, onChange, }) {
     var _a;
     const selectedItem = options.find(option => option.isActive);
     const pickerRef = useRef(null);
-    const styles = useStyles();
     const { tokens } = useAtlantisTheme();
     return (React.createElement(SelectPressable, { onPress: (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.focus },
         children,

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

@@ -1,33 +1,29 @@
-import { buildThemedStyles } from "../../../AtlantisThemeContext";
-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,
-        },
-    };
+import { StyleSheet } from "react-native";
+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/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`];
 }