@jobber/components 6.84.0 → 6.85.0

package/dist/Flex/Flex.types.d.ts

@@ -1,6 +1,6 @@
 export type ColumnKeys = "shrink" | "grow";
 export type Direction = "row" | "column";
-export declare const spacing: readonly ["none", "smallest", "smaller", "small", "base", "large"];
+export declare const spacing: readonly ["none", "minuscule", "smallest", "smaller", "small", "slim", "base", "large", "larger", "largest", "extravagant"];
 type ValuesOfSpacing<T extends typeof spacing> = T[number];
 export type Spacing = ValuesOfSpacing<typeof spacing>;
 export {};

package/dist/Flex-cjs.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var classnames = require('classnames');
 
-var styles = {"flexible":"pEdV7Oo29SE-","smallestGap":"ftl4BEGpmyA-","smallerGap":"ikaEWOhu3ZI-","smallGap":"V9xi4msiJlM-","baseGap":"Jzbdj1Ja38E-","largeGap":"cLrQOLCo-z8-","noneGap":"VZokN5bjMl0-","startAlign":"_9CW5WRJdMFo-","centerAlign":"zVzX2gVWEGw-","endAlign":"cnhrFSJxBCo-","spinning":"WKqP-JY0YEw-"};
+var styles = {"flexible":"pEdV7Oo29SE-","minusculeGap":"Zm7CagsL-WU-","smallestGap":"ftl4BEGpmyA-","smallerGap":"ikaEWOhu3ZI-","smallGap":"V9xi4msiJlM-","slimGap":"odJ-gd44AYY-","baseGap":"Jzbdj1Ja38E-","largeGap":"cLrQOLCo-z8-","largerGap":"l-DqnL94mmw-","largestGap":"_4bEByMh7pHI-","extravagantGap":"pdH9lzFTcIc-","noneGap":"VZokN5bjMl0-","startAlign":"_9CW5WRJdMFo-","centerAlign":"zVzX2gVWEGw-","endAlign":"cnhrFSJxBCo-","spinning":"WKqP-JY0YEw-"};
 
 function Flex({ align = "center", children, direction = "row", gap = "base", template, }) {
     return (React.createElement("div", { className: classnames(styles.flexible, {

package/dist/Flex-es.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import classnames from 'classnames';
 
-var styles = {"flexible":"pEdV7Oo29SE-","smallestGap":"ftl4BEGpmyA-","smallerGap":"ikaEWOhu3ZI-","smallGap":"V9xi4msiJlM-","baseGap":"Jzbdj1Ja38E-","largeGap":"cLrQOLCo-z8-","noneGap":"VZokN5bjMl0-","startAlign":"_9CW5WRJdMFo-","centerAlign":"zVzX2gVWEGw-","endAlign":"cnhrFSJxBCo-","spinning":"WKqP-JY0YEw-"};
+var styles = {"flexible":"pEdV7Oo29SE-","minusculeGap":"Zm7CagsL-WU-","smallestGap":"ftl4BEGpmyA-","smallerGap":"ikaEWOhu3ZI-","smallGap":"V9xi4msiJlM-","slimGap":"odJ-gd44AYY-","baseGap":"Jzbdj1Ja38E-","largeGap":"cLrQOLCo-z8-","largerGap":"l-DqnL94mmw-","largestGap":"_4bEByMh7pHI-","extravagantGap":"pdH9lzFTcIc-","noneGap":"VZokN5bjMl0-","startAlign":"_9CW5WRJdMFo-","centerAlign":"zVzX2gVWEGw-","endAlign":"cnhrFSJxBCo-","spinning":"WKqP-JY0YEw-"};
 
 function Flex({ align = "center", children, direction = "row", gap = "base", template, }) {
     return (React__default.createElement("div", { className: classnames(styles.flexible, {

package/dist/Grid/Grid.d.ts

@@ -2,11 +2,18 @@ import type { ReactNode } from "react";
 import React from "react";
 import alignments from "./GridAlign.module.css";
 import { GridCell } from "./GridCell";
-interface GridProps {
+import type { GapSpacing } from "../sharedHelpers/types";
+export interface GridProps {
     /**
-     * Add spacing between elements.
+     * Add spacing between elements. Can be a boolean for default spacing,
+     * or a semantic token for custom spacing.
+     * @default true
+     *
+     * @deprecated The boolean type for the 'gap' prop is deprecated and will be removed in a future version.
+     * Please use a GapSpacing token (e.g., 'small', 'base', 'large') for fixed spacing.
+     * Using 'true' applies default responsive spacing. Using 'false' results in no gap.
      */
-    readonly gap?: boolean;
+    readonly gap?: boolean | GapSpacing;
     /**
      * Adjust the alignment of columns. We only support a few select properties
      * from `align-items` due to the nature of the other properties acting the
@@ -23,4 +30,3 @@ export declare function Grid({ alignItems, gap, children, }: GridProps): React.J
 export declare namespace Grid {
     var Cell: typeof GridCell;
 }
-export {};

package/dist/Grid/index.cjs

@@ -4,6 +4,7 @@ var Grid = require('../Grid-cjs.js');
 require('react');
 require('classnames');
 require('../GridCell-cjs.js');
+require('../getMappedAtlantisSpaceToken-cjs.js');
 
 
 

package/dist/Grid/index.mjs

@@ -2,3 +2,4 @@ export { G as GRID_TEST_ID, a as Grid } from '../Grid-es.js';
 import 'react';
 import 'classnames';
 import '../GridCell-es.js';
+import '../getMappedAtlantisSpaceToken-es.js';

package/dist/Grid-cjs.js

@@ -3,17 +3,29 @@
 var React = require('react');
 var classnames = require('classnames');
 var GridCell = require('./GridCell-cjs.js');
+var getMappedAtlantisSpaceToken = require('./getMappedAtlantisSpaceToken-cjs.js');
 
 var styles = {"grid":"_0X4jj5NERa4-","gap":"d3vl57tdCWA-","spinning":"Y--XfgJk5Fw-"};
 
 var alignments = {"center":"V-24AGDyie4-","start":"H0zdYNTapmM-","end":"O5VtcGWRV3M-","stretch":"wVv5gaWrouI-","spinning":"DcsVgHCowbg-"};
 
 const GRID_TEST_ID = "ATL-Grid";
+function getGapStyles(gap) {
+    if (typeof gap === "boolean") {
+        if (gap === true) {
+            return { className: styles.gap };
+        }
+        return {};
+    }
+    const gapValue = getMappedAtlantisSpaceToken.getMappedAtlantisSpaceToken(gap);
+    if (gapValue) {
+        return { style: { gap: gapValue } };
+    }
+    return {};
+}
 function Grid({ alignItems = "start", gap = true, children, }) {
-    const classnames$1 = classnames(styles.grid, alignments[alignItems], {
-        [styles.gap]: gap,
-    });
-    return (React.createElement("div", { "data-testid": GRID_TEST_ID, className: classnames$1 }, children));
+    const { className: gapClass, style: gapStyle } = getGapStyles(gap);
+    return (React.createElement("div", { "data-testid": GRID_TEST_ID, className: classnames(styles.grid, alignments[alignItems], gapClass), style: gapStyle }, children));
 }
 Grid.Cell = GridCell.GridCell;
 

package/dist/Grid-es.js

@@ -1,17 +1,29 @@
 import React__default from 'react';
 import classnames from 'classnames';
 import { a as GridCell } from './GridCell-es.js';
+import { g as getMappedAtlantisSpaceToken } from './getMappedAtlantisSpaceToken-es.js';
 
 var styles = {"grid":"_0X4jj5NERa4-","gap":"d3vl57tdCWA-","spinning":"Y--XfgJk5Fw-"};
 
 var alignments = {"center":"V-24AGDyie4-","start":"H0zdYNTapmM-","end":"O5VtcGWRV3M-","stretch":"wVv5gaWrouI-","spinning":"DcsVgHCowbg-"};
 
 const GRID_TEST_ID = "ATL-Grid";
+function getGapStyles(gap) {
+    if (typeof gap === "boolean") {
+        if (gap === true) {
+            return { className: styles.gap };
+        }
+        return {};
+    }
+    const gapValue = getMappedAtlantisSpaceToken(gap);
+    if (gapValue) {
+        return { style: { gap: gapValue } };
+    }
+    return {};
+}
 function Grid({ alignItems = "start", gap = true, children, }) {
-    const classnames$1 = classnames(styles.grid, alignments[alignItems], {
-        [styles.gap]: gap,
-    });
-    return (React__default.createElement("div", { "data-testid": GRID_TEST_ID, className: classnames$1 }, children));
+    const { className: gapClass, style: gapStyle } = getGapStyles(gap);
+    return (React__default.createElement("div", { "data-testid": GRID_TEST_ID, className: classnames(styles.grid, alignments[alignItems], gapClass), style: gapStyle }, children));
 }
 Grid.Cell = GridCell;
 

package/dist/getMappedAtlantisSpaceToken-cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const spaceTokens = {
+    none: "0px",
     minuscule: "var(--space-minuscule)",
     slim: "var(--space-slim)",
     smallest: "var(--space-smallest)",

package/dist/getMappedAtlantisSpaceToken-es.js

@@ -1,4 +1,5 @@
 const spaceTokens = {
+    none: "0px",
     minuscule: "var(--space-minuscule)",
     slim: "var(--space-slim)",
     smallest: "var(--space-smallest)",

package/dist/sharedHelpers/types.d.ts

@@ -13,5 +13,5 @@ export interface CommonAtlantisProps {
 /** Represents a day of the week as a number where 0 = Sunday, 1 = Monday, etc. */
 export type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export type CommonAllowedElements = "section" | "p" | "article" | "ul" | "li" | "div" | "span" | "dl" | "dd" | "dt";
-export type Spaces = "minuscule" | "slim" | "smallest" | "smaller" | "small" | "base" | "large" | "larger" | "largest" | "extravagant";
+export type Spaces = "none" | "minuscule" | "slim" | "smallest" | "smaller" | "small" | "base" | "large" | "larger" | "largest" | "extravagant";
 export type GapSpacing = Spaces | (string & NonNullable<unknown>);

package/dist/styles.css

@@ -4092,6 +4092,11 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       flex: 1;
 }
 
+.Zm7CagsL-WU- {
+  gap: 1px;
+  gap: var(--space-minuscule);
+}
+
 .ftl4BEGpmyA- {
   gap: 2px;
   gap: var(--space-smallest);
@@ -4107,6 +4112,11 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   gap: var(--space-small);
 }
 
+.odJ-gd44AYY- {
+  gap: 12px;
+  gap: var(--space-slim);
+}
+
 .Jzbdj1Ja38E- {
   gap: 16px;
   gap: var(--space-base);
@@ -4117,6 +4127,21 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   gap: var(--space-large);
 }
 
+.l-DqnL94mmw- {
+  gap: 32px;
+  gap: var(--space-larger);
+}
+
+._4bEByMh7pHI- {
+  gap: 48px;
+  gap: var(--space-largest);
+}
+
+.pdH9lzFTcIc- {
+  gap: 64px;
+  gap: var(--space-extravagant);
+}
+
 .VZokN5bjMl0- {
   gap: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.84.0",
+  "version": "6.85.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -547,5 +547,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "6800733d34b235bdbf4d4155d412df1d1efff94b"
+  "gitHead": "d1e41d8cd060ab3c9bdc2a4419228cf8e3fe3242"
 }