@jobber/components 5.7.9 → 5.9.0

package/dist/styles.css

@@ -1675,6 +1675,200 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   background-color: var(--color-informative);
 }
 
+.Fc3XmKHBRJI- {
+  border-color: hsl(200, 13%, 87%);
+  border-color: var(--color-border);
+  border-style: solid;
+}
+
+.eqs5gwb8U7o- {
+  border-width: var(--box-border);
+}
+
+.tEDeSVLy-lk- {
+  border-top-width: var(--box-border-top);
+}
+
+.WPxnJBHs26s- {
+  border-right-width: var(--box-border-right);
+}
+
+.hjNAtsV6ve8- {
+  border-bottom-width: var(--box-border-bottom);
+}
+
+.oVJMspWfaKU- {
+  border-left-width: var(--box-border-left);
+}
+
+.WjhFgTcWtRQ- {
+  height: auto;
+}
+
+.V38qsc2Nv3I- {
+  width: auto;
+}
+
+.LySXsk4GiSo-,
+._704iSB00BWo- {
+  min-width: 0;
+  min-height: 0;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+
+.z7MVaKdZk1A-,
+.efOAzCs1oK4- {
+  min-width: 0;
+  min-height: 0;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+}
+
+.Pjky1t2oDsI- {
+  margin: 0;
+  margin: var(--box-margin, 0);
+}
+
+._8cP7YNWn2Zk- {
+  margin-left: var(--box-margin-horizontal);
+  margin-right: var(--box-margin-horizontal);
+}
+
+.V9qThknYUH4- {
+  margin-top: var(--box-margin-vertical);
+  margin-bottom: var(--box-margin-vertical);
+}
+
+.xW4ppgE5baw- {
+  margin-top: var(--box-margin-top);
+}
+
+.s4zJGb-14jw- {
+  margin-right: var(--box-margin-right);
+}
+
+.Sjw-W4hUH3I- {
+  margin-bottom: var(--box-margin-bottom);
+}
+
+.yUVKj8HRonc- {
+  margin-left: var(--box-margin-left);
+}
+
+.KVzsbOUPerc- {
+  padding: 0;
+  padding: var(--box-padding, 0);
+}
+
+.SilT7o6mmhA- {
+  padding-left: var(--box-padding-horizontal);
+  padding-right: var(--box-padding-horizontal);
+}
+
+.DbN900qDR-I- {
+  padding-top: var(--box-padding-vertical);
+  padding-bottom: var(--box-padding-vertical);
+}
+
+.zA4BoBuR1vo- {
+  padding-top: var(--box-padding-top);
+}
+
+.H325dsXQAtg- {
+  padding-right: var(--box-padding-right);
+}
+
+.uCGKNtqPMR0- {
+  padding-bottom: var(--box-padding-bottom);
+}
+
+._2VQrXLV9p8w- {
+  padding-left: var(--box-padding-left);
+}
+
+.-I0XNzSRsng- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  min-width: 0;
+}
+
+.MgXLsiG70BE- {
+  white-space: pre-wrap;
+}
+
+.I110VRFhS6g- {
+  gap: calc(16px / 16);
+  gap: var(--space-minuscule);
+}
+
+.-KwWkSHD3jc- {
+  gap: calc(16px / 8);
+  gap: var(--space-smallest);
+}
+
+.lqrj9tAPw08- {
+  gap: calc(16px / 4);
+  gap: var(--space-smaller);
+}
+
+.u7CUJIhbDX0- {
+  gap: calc(16px / 2);
+  gap: var(--space-small);
+}
+
+.-j6RcvHioPk- {
+  gap: calc(16px * 1);
+  gap: var(--space-base);
+}
+
+.YTSq8sF1JOU- {
+  gap: calc(16px * 1.5);
+  gap: var(--space-large);
+}
+
+._6UC4S5oet7U- {
+  gap: calc(16px * 2);
+  gap: var(--space-larger);
+}
+
+.UHSg4Quc-FU- {
+  gap: calc(16px * 3);
+  gap: var(--space-largest);
+}
+
+._1cDbd49j8rQ- {
+  gap: calc(16px * 4);
+  gap: var(--space-extravagant);
+}
+
+._2WZlkl6zzOM- {
+  border-radius: calc(8px / 2);
+  border-radius: var(--radius-small);
+}
+
+._0O-WoWgZuOk- {
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+}
+
+.zZn1OwyCsDs- {
+  border-radius: calc(8px * 2);
+  border-radius: var(--radius-large);
+}
+
+._8sjm89Pi2OU- {
+  border-radius: calc(8px * 3);
+  border-radius: var(--radius-larger);
+}
+
+.Vebr9lHAPyE- {
+  border-radius: 100%;
+  border-radius: var(--radius-circle);
+}
+
 :root {
   --card--accent-color: var(--color-grey);
   --card--base-padding: var(--space-base);
@@ -8196,6 +8390,190 @@ progress.nv5fejwjHzo-[value]::-webkit-progress-value {
   width: 100%;
 }
 
+:root {
+  --sideDrawer--base-padding: var(--space-base);
+  --sideDrawer--background: var(--color-surface);
+}
+
+.f-MKdBvCQXQ- {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+  width: 100%;
+  height: 100%;
+  max-width: 420px;
+}
+
+.ZMrzd2xJCtQ- {
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  overflow-y: auto;
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--sideDrawer--background);
+  -ms-flex-direction: column;
+      flex-direction: column;
+}
+
+.j-us8-p4bfY- {
+  --sideDrawer--background: var(--color-surface--background--subtle);
+}
+
+.di7wVz6Zdy8-,
+.UXAxYfbJy1Q- {
+  display: -ms-flexbox;
+  display: flex;
+  position: sticky;
+  z-index: 1;
+  z-index: var(--elevation-base);
+  padding: calc(16px * 1);
+  padding: var(--sideDrawer--base-padding);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--sideDrawer--background);
+  -ms-flex-direction: column;
+      flex-direction: column;
+  transition:
+    box-shadow 200ms ease-in-out,
+    -webkit-filter 200ms ease-in-out;
+  transition:
+    box-shadow var(--timing-base) ease-in-out,
+    -webkit-filter var(--timing-base) ease-in-out;
+  transition:
+    box-shadow 200ms ease-in-out,
+    filter 200ms ease-in-out;
+  transition:
+    box-shadow var(--timing-base) ease-in-out,
+    filter var(--timing-base) ease-in-out;
+  transition:
+    box-shadow 200ms ease-in-out,
+    filter 200ms ease-in-out,
+    -webkit-filter 200ms ease-in-out;
+  transition:
+    box-shadow var(--timing-base) ease-in-out,
+    filter var(--timing-base) ease-in-out,
+    -webkit-filter var(--timing-base) ease-in-out;
+}
+
+.di7wVz6Zdy8- {
+  top: 0;
+  gap: calc(16px * 1);
+  gap: var(--space-base);
+}
+
+.di7wVz6Zdy8- [data-side-drawer-slot^="back-"]:not(:empty) {
+    margin-left: calc((16px / 2) * -1);
+    margin-left: calc(calc(16px / 2) * -1);
+    margin-left: calc(var(--space-small) * -1);
+    margin-right: calc(16px / 2);
+    margin-right: var(--space-small);
+  }
+
+.-Os-3OnRHg0- {
+  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px
+      rgba(0, 0, 0, 0.1),
+    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-base);
+}
+
+.UXAxYfbJy1Q-.-Os-3OnRHg0- {
+  box-shadow:
+    0px calc(16px / 16) calc(16px / 4) 0px
+      rgba(0, 0, 0, 0.1),
+    0px -2px 12px 0px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0px var(--space-minuscule) var(--space-smaller) 0px
+      rgba(var(--color-black--rgb), 0.1),
+    0px -2px 12px 0px rgba(var(--color-black--rgb), 0.05);
+}
+
+.di7wVz6Zdy8-:has([data-side-drawer-slot^="title-"]:empty) {
+  padding-bottom: calc(16px / 4);
+  padding-bottom: var(--space-smaller);
+  background-color: transparent;
+}
+
+.di7wVz6Zdy8-.-Os-3OnRHg0-:has([data-side-drawer-slot^="title-"]:empty) {
+    box-shadow: none;
+    -webkit-filter: drop-shadow(
+      0 0 calc(16px / 4) rgba(0, 0, 0, 0.25)
+    );
+    -webkit-filter: drop-shadow(
+      0 0 var(--space-smaller) rgba(var(--color-black--rgb), 0.25)
+    );
+            filter: drop-shadow(
+      0 0 calc(16px / 4) rgba(0, 0, 0, 0.25)
+    );
+            filter: drop-shadow(
+      0 0 var(--space-smaller) rgba(var(--color-black--rgb), 0.25)
+    );
+
+    /**
+     * Force the 2 built-in buttons to have a background color when the header
+     * is not present so the drop shadow is applied to the whole button and not
+     * just the icon.
+     */
+  }
+
+.di7wVz6Zdy8-.-Os-3OnRHg0-:has([data-side-drawer-slot^="title-"]:empty) button[aria-label="Close"],
+    .di7wVz6Zdy8-.-Os-3OnRHg0-:has([data-side-drawer-slot^="title-"]:empty) button[aria-label="Back"] {
+      background-color: rgba(255, 255, 255, 1);
+      background-color: var(--color-surface);
+    }
+
+.sUo3MflQPVI- {
+  display: -ms-flexbox;
+  display: flex;
+  margin-right: calc(-1 * (16px / 2));
+  margin-right: calc(-1 * calc(16px / 2));
+  margin-right: calc(-1 * var(--space-small));
+}
+
+.UXAxYfbJy1Q- {
+  bottom: 0;
+}
+
+.zbd79OKr6-M-:empty {
+  display: none;
+}
+
+.zUQipP8Y6Tk- {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  -webkit-appearance: none;
+          appearance: none;
+}
+
+.ngWetY6itkw- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  -ms-flex: 1;
+      flex: 1;
+}
+
+/* Adjust `Content` components public padding to match the drawer */
+
+.ngWetY6itkw- > * {
+  --public-content--padding: var(--sideDrawer--base-padding);
+}
+
+/* Remove the nested `Content` components public padding */
+
+.ngWetY6itkw- > * > * {
+  --public-content--padding: 0;
+}
+
 :root {
   --statusLabel-icon-diameter: 8px;
 }

package/dist/{useActiveLayout-Czt1EjAe.js → useActiveLayout-Db-VjB8s.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var useResponsiveSizing = require('./useResponsiveSizing-Dlh88DDL.js');
-var DataListContext = require('./DataListContext-Do29oEwu.js');
+var useResponsiveSizing = require('./useResponsiveSizing-Ru7y--Nc.js');
+var DataListContext = require('./DataListContext-BhloL1-h.js');
 
 function useActiveLayout() {
     const { layoutBreakpoints, layouts } = DataListContext.useDataListContext();

package/dist/{useActiveLayout-DIZRhnSK.js → useActiveLayout-LDecnKhC.js}

@@ -1,5 +1,5 @@
-import { u as useResponsiveSizing } from './useResponsiveSizing-CtRV3OZ3.js';
-import { u as useDataListContext } from './DataListContext-IZ-lhPAD.js';
+import { u as useResponsiveSizing } from './useResponsiveSizing-ElPLlNIz.js';
+import { u as useDataListContext } from './DataListContext-D4RKZCy9.js';
 
 function useActiveLayout() {
     const { layoutBreakpoints, layouts } = useDataListContext();

package/dist/{useAssert-7puCo0nO.js → useAssert-CTda4rBY.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var _commonjsHelpers = require('./_commonjsHelpers-CPVIbWHU.js');
-var _polyfillNode_process = require('./_polyfill-node.process-BTMynYvT.js');
+var _commonjsHelpers = require('./_commonjsHelpers-CsMxikYM.js');
+var _polyfillNode_process = require('./_polyfill-node.process-BdL4WTh6.js');
 
 var useAssert$1 = {};
 

package/dist/{useAssert-CCGZHwBZ.js → useAssert-DhIokrEA.js}

@@ -1,5 +1,5 @@
-import { a as getAugmentedNamespace, c as commonjsGlobal } from './_commonjsHelpers-CKkXvbU1.js';
-import { _ as _polyfillNode_process } from './_polyfill-node.process-BnvWj9Gh.js';
+import { a as getAugmentedNamespace, c as commonjsGlobal } from './_commonjsHelpers-CtFaYVba.js';
+import { _ as _polyfillNode_process } from './_polyfill-node.process-CUysbTw1.js';
 
 var useAssert$1 = {};
 

package/dist/{useBatchSelect-DJ4fcyqr.js → useBatchSelect-ChAmEJRm.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var DataListContext = require('./DataListContext-Do29oEwu.js');
+var DataListContext = require('./DataListContext-BhloL1-h.js');
 
 function useBatchSelect() {
     const { selected, onSelect, onSelectAll } = DataListContext.useDataListContext();

package/dist/{useBatchSelect-BPfRtiYM.js → useBatchSelect-D9XwNYmQ.js}

@@ -1,4 +1,4 @@
-import { u as useDataListContext } from './DataListContext-IZ-lhPAD.js';
+import { u as useDataListContext } from './DataListContext-D4RKZCy9.js';
 
 function useBatchSelect() {
     const { selected, onSelect, onSelectAll } = useDataListContext();

package/dist/{useIsMounted-C0l17_D3.js → useIsMounted-B7sAwLzO.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var useSafeLayoutEffect$1 = require('./useSafeLayoutEffect-CvhBa2CG.js');
+var useSafeLayoutEffect$1 = require('./useSafeLayoutEffect-CvCbIyTo.js');
 
 var useIsMounted$1 = {};
 

package/dist/{useIsMounted-CDkS4GDr.js → useIsMounted-DDLjyEQd.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { a as useSafeLayoutEffect$1 } from './useSafeLayoutEffect-SCbJpInV.js';
+import { a as useSafeLayoutEffect$1 } from './useSafeLayoutEffect-YQjrBbrt.js';
 
 var useIsMounted$1 = {};
 

package/dist/{useResizeObserver-BM_gKOdY.js → useResizeObserver-CkCQQzgx.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var _commonjsHelpers = require('./_commonjsHelpers-CPVIbWHU.js');
+var _commonjsHelpers = require('./_commonjsHelpers-CsMxikYM.js');
 var React = require('react');
-var debounce$1 = require('./debounce-CY0j19EJ.js');
-var isObjectLike = require('./isObjectLike-C08sEQRf.js');
+var debounce$1 = require('./debounce-Bj9Q8g2_.js');
+var isObjectLike = require('./isObjectLike-CWs8tKhE.js');
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/{useResizeObserver-BC4cm-VR.js → useResizeObserver-t8i-yFhr.js}

@@ -1,7 +1,7 @@
-import { a as getAugmentedNamespace, c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-CKkXvbU1.js';
+import { a as getAugmentedNamespace, c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-CtFaYVba.js';
 import React from 'react';
-import { a as debounce_1 } from './debounce-iv2veFFQ.js';
-import { b as isObject_1 } from './isObjectLike-DLdJulcM.js';
+import { a as debounce_1 } from './debounce-4xNya73B.js';
+import { b as isObject_1 } from './isObjectLike-DRD_omEI.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/{useResponsiveSizing-CtRV3OZ3.js → useResponsiveSizing-ElPLlNIz.js}

@@ -1,5 +1,5 @@
 import { useCallback, useSyncExternalStore } from 'react';
-import { e as BREAKPOINT_SIZES } from './DataList.const-D9lmPE_f.js';
+import { e as BREAKPOINT_SIZES } from './DataList.const-DZ-ezQP2.js';
 
 const mediaQueryStore = {
     subscribe(onChange, query) {

package/dist/{useResponsiveSizing-Dlh88DDL.js → useResponsiveSizing-Ru7y--Nc.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var DataList_const = require('./DataList.const-Ur3-qhRr.js');
+var DataList_const = require('./DataList.const-BIzdTkXC.js');
 
 const mediaQueryStore = {
     subscribe(onChange, query) {

package/dist/{useScrollToActive-h6iyYttr.js → useScrollToActive-BbkuYANs.js}

@@ -1,13 +1,13 @@
 import React, { useRef, useId, useState, useEffect } from 'react';
-import { g as getDefaultExportFromCjs } from './_commonjsHelpers-CKkXvbU1.js';
-import { _ as _overRest, a as _setToString, b as _baseFlatten } from './_setToString-By6wPtZc.js';
-import { b as _arrayMap, c as _baseGet, i as identity_1, e as eq_1, d as _isIndex } from './_defineProperty-CYAtQP_V.js';
-import { _ as _baseEach, a as _baseIteratee } from './_baseEach-B3-wRlkk.js';
-import { c as isArrayLike_1, g as _baseUnary, b as isArray_1 } from './_getTag-CSsuEFuJ.js';
-import { i as isSymbol_1 } from './isSymbol-RwMD0qp3.js';
-import { b as isObject_1 } from './isObjectLike-DLdJulcM.js';
-import { d as debounce } from './debounce-iv2veFFQ.js';
-import { I as Icon } from './Icon-B-mgLrmA.js';
+import { g as getDefaultExportFromCjs } from './_commonjsHelpers-CtFaYVba.js';
+import { _ as _overRest, a as _setToString, b as _baseFlatten } from './_setToString-sSZBUUMA.js';
+import { b as _arrayMap, c as _baseGet, i as identity_1, e as eq_1, d as _isIndex } from './_defineProperty-w7ntS4QC.js';
+import { _ as _baseEach, a as _baseIteratee } from './_baseEach-COuc5SYA.js';
+import { c as isArrayLike_1, g as _baseUnary, b as isArray_1 } from './_getTag-xSgER2N7.js';
+import { i as isSymbol_1 } from './isSymbol-UuOZAZZ5.js';
+import { b as isObject_1 } from './isObjectLike-DRD_omEI.js';
+import { d as debounce } from './debounce-4xNya73B.js';
+import { I as Icon } from './Icon-C5a2rKDn.js';
 import { usePopper } from 'react-popper';
 
 var baseEach = _baseEach,

package/dist/{useScrollToActive-BD3SFzii.js → useScrollToActive-tTcYvugi.js}

@@ -1,15 +1,15 @@
 'use strict';
 
 var React = require('react');
-var _commonjsHelpers = require('./_commonjsHelpers-CPVIbWHU.js');
-var _setToString = require('./_setToString-CW188ZsP.js');
-var _defineProperty = require('./_defineProperty-DV9do81Q.js');
-var _baseEach = require('./_baseEach-3J-K-TxW.js');
-var _getTag = require('./_getTag-Cku5derQ.js');
-var isSymbol$1 = require('./isSymbol-Cu6szsKh.js');
-var isObjectLike = require('./isObjectLike-C08sEQRf.js');
-var debounce = require('./debounce-CY0j19EJ.js');
-var Icon = require('./Icon-ClDwR3Mk.js');
+var _commonjsHelpers = require('./_commonjsHelpers-CsMxikYM.js');
+var _setToString = require('./_setToString-CdS5SHZA.js');
+var _defineProperty = require('./_defineProperty-B_0vuy5c.js');
+var _baseEach = require('./_baseEach-aH9IIblH.js');
+var _getTag = require('./_getTag-BDfSER_B.js');
+var isSymbol$1 = require('./isSymbol-BVM7Nm4V.js');
+var isObjectLike = require('./isObjectLike-CWs8tKhE.js');
+var debounce = require('./debounce-Bj9Q8g2_.js');
+var Icon = require('./Icon-DT5jb3j1.js');
 var reactPopper = require('react-popper');
 
 var baseEach = _baseEach._baseEach,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "5.7.9",
+  "version": "5.9.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -44,6 +44,11 @@
       "import": "./dist/Banner/index.mjs",
       "require": "./dist/Banner/index.cjs"
     },
+    "./Box": {
+      "types": "./dist/Box/index.d.ts",
+      "import": "./dist/Box/index.mjs",
+      "require": "./dist/Box/index.cjs"
+    },
     "./Button": {
       "types": "./dist/Button/index.d.ts",
       "import": "./dist/Button/index.mjs",
@@ -482,5 +487,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "5977d53a501288966c9864534c916ec957f2377f"
+  "gitHead": "bb42ecfc2cd326a48af5160a752fcbfc9a85c43d"
 }