@jobber/components-native 0.76.1-JOB-116234-4bc5afd.23 → 0.76.1-JOB-116234-63c4467.27

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.76.1-JOB-116234-4bc5afd.23+4bc5afdb",
+    "version": "0.76.1-JOB-116234-63c4467.27+63c44675",
     "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": "4bc5afdb99786f50a9ae8474ac282eb593dd9867"
+    "gitHead": "63c446753585b99a48ea4782613671ca6ff3c8b1"
 }

package/dist/src/Flex/Flex.js

@@ -1,8 +1,7 @@
 import React, { Children } from "react";
 import { View } from "react-native";
 import chunk from "lodash/chunk";
-import { columnStyles, styles } from "./Flex.styles";
-import { useGapStyles } from "./Flex.gap.styles";
+import { columnStyles, gapStyles, styles } from "./Flex.styles";
 import { Content } from "../Content";
 export function Flex({ template = [], align = "center", gap = "base", children, }) {
     if (template.length === 1) {
@@ -27,6 +26,6 @@ export function Flex({ template = [], align = "center", gap = "base", children,
 function Row({ template = [], align = "center", gap = "base", children, }) {
     return (React.createElement(View, { testID: "ATL-Flex-Row", style: [styles.row, { alignItems: align }] }, Children.map(children, (child, index) => (React.createElement(View, { style: [
             columnStyles[template[index]] || columnStyles.grow,
-            index > 0 && gap && useGapStyles()[gap],
+            index > 0 && gap && gapStyles[gap],
         ] }, child)))));
 }

package/dist/src/Flex/Flex.styles.js

@@ -1,4 +1,6 @@
 import { StyleSheet } from "react-native";
+import { spacing } from "./types";
+import { tokens as staticTokens } from "../utils/design";
 export const styles = StyleSheet.create({
     row: { flexDirection: "row" },
 });
@@ -13,3 +15,10 @@ export const columnStyles = StyleSheet.create({
         flexBasis: 0,
     },
 });
+export const gapStyles = StyleSheet.create(spacing.reduce((gapObj, space) => {
+    let paddingLeft = 0;
+    if (space !== "none")
+        paddingLeft = staticTokens[`space-${space}`];
+    gapObj[space] = { paddingLeft };
+    return gapObj;
+}, {}));