@jobber/components 5.37.1 → 5.39.0

package/dist/styles.css

@@ -2718,28 +2718,37 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   padding-left: calc(var(--checkbox--size) + var(--space-small));
 }
 
+:root {
+  --public-chip-base-bg-color: var(--color-surface--background);
+  --public-chip-base-hover-bg-color: var(--color-surface--background--hover);
+  --public-chip-base-content-color: var(--color-heading);
+}
+
 .af7U8MvcbHE- {
-  --chip--gradient-color-variation: var(--chip-base-bg);
-  --chip--gradient-color-variation--hover: var(--chip-base--hover);
+  --chip-base-bg-color: var(--public-chip-base-bg-color);
+  --chip-base-hover-bg-color: var(--public-chip-base-hover-bg-color);
+  --chip-base-content-color: var(--public-chip-base-content-color);
+  --chip-border-color: transparent;
   --chip-height: 40px;
   --chip-radius: 20px;
-  --chip-base-bg: var(--color-surface--background);
-  --chip-base--hover: var(--color-surface--background--hover);
-  display: -ms-flexbox;
-  display: flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   position: relative;
   height: 40px;
   height: var(--chip-height);
   min-width: 0;
-  padding: 8px 16px;
-  padding: var(--space-small) var(--base-unit);
+  box-sizing: border-box;
+  padding: 0 16px;
+  padding: 0 var(--base-unit);
   border: 1px solid transparent;
-  border: var(--border-base) solid transparent;
+  border: var(--border-base) solid var(--chip-border-color);
   border-radius: 20px;
   border-radius: var(--chip-radius);
   color: hsl(197, 90%, 12%);
   color: var(--color-heading);
   text-align: left;
+  background-color: hsl(53, 21%, 93%);
+  background-color: var(--chip-base-bg-color);
   cursor: pointer;
   transition: all 200ms;
   transition: all var(--timing-base);
@@ -2747,10 +2756,14 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
       align-items: center;
 }
 
+.af7U8MvcbHE-:hover,
 .af7U8MvcbHE-:focus,
 .af7U8MvcbHE-:focus-visible,
 .GnA73aYUbak-:focus-visible {
+  border: 1px solid var(--chip-border-color);
+  border: var(--border-base) solid var(--chip-border-color);
   outline: transparent;
+  background-color: var(--chip-base-hover-bg-color);
 }
 
 .af7U8MvcbHE- .GnA73aYUbak- {
@@ -2829,91 +2842,63 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   background-color: var(--color-surface);
 }
 
-.wSI5L-5rODg- {
-  border: 1px solid transparent;
-  border: var(--border-base) solid transparent;
-  color: hsl(197, 90%, 12%);
-  color: var(--color-heading);
-  background-color: var(--chip-base-bg);
-  --chip--gradient-color-variation: var(--chip-base-bg);
+.wSI5L-5rODg-,
+.wSI5L-5rODg- p {
+  color: var(--chip-base-content-color);
 }
 
-.wSI5L-5rODg-:hover,
-.wSI5L-5rODg-:focus-visible {
-  background-color: var(--chip-base--hover);
-  --chip--gradient-color-variation--hover: var(--chip-base--hover);
+.wSI5L-5rODg- .dg1-Izy1eQA- {
+  background-color: var(--chip-base-content-color);
 }
 
 .SmUxkzpIC84-,
-.SmUxkzpIC84-:hover,
-.SmUxkzpIC84-:focus-visible,
-.Mux23dmZSuw-.SmUxkzpIC84-,
-.Mux23dmZSuw-.SmUxkzpIC84-:hover,
-.Mux23dmZSuw-.SmUxkzpIC84-:focus-visible {
-  border: 1px solid hsl(6, 64%, 51%);
-  border: var(--border-base) solid var(--color-critical);
-  background-color: hsl(7, 63%, 95%);
-  background-color: var(--color-critical--surface);
-  --chip--gradient-color-variation: var(--color-critical--surface);
-  --chip--gradient-color-variation--hover: var(--color-critical--surface);
+.Mux23dmZSuw-.SmUxkzpIC84- {
+  --chip-border-color: var(--color-critical);
+  --chip-base-bg-color: var(--color-critical--surface);
 }
 
+/* If these change, please update InternalChip.css focus-visible rules */
+
 .SmUxkzpIC84-:hover,
 .SmUxkzpIC84-:focus-visible,
 .Mux23dmZSuw-.SmUxkzpIC84-:hover,
 .Mux23dmZSuw-.SmUxkzpIC84-:focus-visible {
-  background-color: hsl(51, 17%, 85%);
-  background-color: var(--color-surface--background--hover);
-  --chip--gradient-color-variation: var(--color-surface--background--hover);
-  --chip--gradient-color-variation--hover: var(
-    --color-surface--background--hover
-  );
+  --chip-border-color: var(--color-critical);
+  --chip-base-hover-bg-color: var(--color-surface--background--hover);
 }
 
 .Mux23dmZSuw- {
-  border: 1px solid hsl(200, 13%, 87%);
-  border: var(--border-base) solid var(--color-border--interactive);
-  background-color: rgba(255, 255, 255, 1);
-  background-color: var(--color-surface);
-  --chip--gradient-color-variation: var(--color-surface);
+  --chip-border-color: var(--color-border--interactive);
+  --chip-base-bg-color: var(--color-surface);
 }
 
-/* CAUTION: Order is important here since
-* there is are different styles for subtle:focus and subtle:hover
-* and we want hover to take priority
-*/
-
-.Mux23dmZSuw-:focus-visible {
-  --chip--gradient-color-variation--hover: var(--color-surface);
-}
+/* If these change, please update InternalChip.css focus-visible rules */
 
+.Mux23dmZSuw-:focus-visible,
 .Mux23dmZSuw-:hover {
-  border: 1px solid var(--chip-base-bg);
-  border: var(--border-base) solid var(--chip-base-bg);
-  background-color: var(--chip-base-bg);
-  --chip--gradient-color-variation--hover: var(--chip-base-bg);
+  --chip-border-color: var(--chip-base-bg-color);
+  --chip-base-hover-bg-color: var(--color-surface--background);
 }
 
 .SmUxkzpIC84-.MbRItb9vKhc-,
 .SmUxkzpIC84-.MbRItb9vKhc-:hover,
 .SmUxkzpIC84-.MbRItb9vKhc-:focus-visible {
-  background-color: hsl(0, 0%, 93%);
-  background-color: var(--color-disabled--secondary);
-  cursor: auto;
+  --chip-base-bg-color: var(--color-disabled--secondary);
+  --chip-base-hover-bg-color: var(--color-disabled--secondary);
+  cursor: not-allowed;
 }
 
+/* If these change, please update InternalChip.css focus-visible rules */
+
 .MbRItb9vKhc-,
 .MbRItb9vKhc-:hover,
 .MbRItb9vKhc-:focus-visible {
-  border: 1px solid hsl(0, 0%, 93%);
-  border: var(--border-base) solid var(--color-disabled--secondary);
+  --chip-border-color: var(--color-disabled--secondary);
   color: hsl(0, 0%, 72%);
   color: var(--color-disabled);
-  background-color: hsl(0, 0%, 93%);
-  background-color: var(--color-disabled--secondary);
-  cursor: auto;
-  --chip--gradient-color-variation: var(--color-disabled--secondary);
-  --chip--gradient-color-variation--hover: var(--color-disabled--secondary);
+  --chip-base-bg-color: var(--color-disabled--secondary);
+  --chip-base-hover-bg-color: var(--color-disabled--secondary);
+  cursor: not-allowed;
 }
 
 .MbRItb9vKhc- .dg1-Izy1eQA- {
@@ -2959,16 +2944,18 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   height: 100%;
   background: linear-gradient(
     to left,
-    var(--chip--gradient-color-variation) 5%,
+    var(--chip-base-bg-color) 5%,
     rgba(255, 255, 255, 0)
   );
+  transition: all 200ms;
+  transition: all var(--timing-base);
 }
 
 .af7U8MvcbHE-:focus-visible .G3QXY0rNcK0-,
 .af7U8MvcbHE-:hover .G3QXY0rNcK0- {
   background: linear-gradient(
     to left,
-    var(--chip--gradient-color-variation--hover) 5%,
+    var(--chip-base-hover-bg-color) 5%,
     rgba(255, 255, 255, 0)
   );
 }
@@ -2978,6 +2965,116 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   width: 1px;
 }
 
+/**
+ * Used in the wrapping chips component:
+ * - InternalChipSingleSelect
+ * - InternalChipMultiSelect
+ */
+
+.zn6onyiQVmA- {
+  display: -ms-flexbox;
+  display: flex;
+  gap: 8px;
+  gap: var(--space-small);
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -ms-flex-align: center;
+      align-items: center;
+}
+
+/**
+ * Interaction
+ *
+ * NOTE:
+ * Since the Chip component is not being focused, rather it's the input
+ * We are copying the styles from the Chip component to ensure the same experience
+ */
+
+.W4D98cvEth4-:focus-visible ~ div[role="option"],
+.W4D98cvEth4-:focus-visible ~ div[role="button"] {
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  box-shadow: var(--shadow-focus);
+  outline: none;
+}
+
+.W4D98cvEth4-.k842jZ-eBvM-:focus-visible ~ div[role="option"],
+.W4D98cvEth4-.k842jZ-eBvM-:focus-visible ~ div[role="button"] {
+  background-color: hsl(53, 21%, 93%);
+  background-color: var(--color-surface--background);
+}
+
+.W4D98cvEth4-.JApS2787BU8-:focus-visible ~ div[role="option"],
+.W4D98cvEth4-.JApS2787BU8-:focus-visible ~ div[role="button"] {
+  background-color: hsl(51, 17%, 85%);
+  background-color: var(--color-surface--background--hover);
+}
+
+.W4D98cvEth4-.Kg0c8WVgMpg-:focus-visible ~ div[role="option"],
+.W4D98cvEth4-.Kg0c8WVgMpg-:focus-visible ~ div[role="button"] {
+  background-color: hsl(0, 0%, 93%);
+  background-color: var(--color-disabled--secondary);
+}
+
+/**
+ * Input checkbox/radio
+ *
+ * Hide checkbox on UI but not screen readers and still allow focus state
+ */
+
+.W4D98cvEth4- {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+  white-space: nowrap;
+}
+
+/**
+ * Button
+ */
+
+._0-ZWexS4Gfg- {
+  display: -ms-flexbox;
+  display: flex;
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  cursor: pointer;
+  transition: background-color 200ms ease;
+}
+
+._0-ZWexS4Gfg-:hover,
+._0-ZWexS4Gfg-:focus {
+  background-color: hsl(53, 21%, 93%);
+  background-color: var(--color-surface--hover);
+}
+
+._0-ZWexS4Gfg-:focus {
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  box-shadow: var(--shadow-focus);
+  outline: none;
+}
+
+/**
+ * Override icon default colors.
+ *
+ * NOTE: This is a workaround since some icons have default colors that we don't
+ * want to override until the component color prop overrides it.
+ * DO NOT COPY!
+ */
+
+.DQPnZP4UZpw- > svg {
+  fill: hsl(198, 35%, 21%);
+  fill: var(--color-interactive--subtle);
+}
+
+.DQPnZP4UZpw- {
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .q07bkGoq714- {
   display: none;
 }
@@ -3088,205 +3185,6 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   line-height: var(--typography--lineHeight-base);
 }
 
-/**
- * Used in the wrapping chips component:
- * - InternalChipSingleSelect
- * - InternalChipMultiSelect
- */
-
-.zn6onyiQVmA- {
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  gap: var(--space-small);
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -ms-flex-align: center;
-      align-items: center;
-}
-
-.PEnZzMEgbhU- {
-  display: inline-grid;
-  position: relative;
-  max-width: 100%;
-  box-sizing: border-box;
-  padding: 8px;
-  padding: var(--space-small);
-  border: 1px solid hsl(200, 13%, 87%);
-  border: var(--border-base) solid var(--color-border--interactive);
-  border-radius: 24px;
-  border-radius: var(--radius-larger);
-  color: hsl(197, 15%, 45%);
-  color: var(--color-text--secondary);
-  text-align: left;
-  vertical-align: middle;
-  background-color: rgba(255, 255, 255, 1);
-  background-color: var(--color-surface);
-  transition: 200ms ease-in-out;
-  transition: var(--timing-base) ease-in-out;
-  transition-property: background-color, box-shadow, color;
-  grid-template-columns: -webkit-max-content;
-  grid-template-columns: max-content;
-  -ms-flex-align: center;
-      align-items: center;
-  gap: 8px;
-  gap: var(--space-small);
-}
-
-.dtysUhwYdG4-,
-.xGaMCAYsdwA- {
-  padding: calc(4px + 2px) 8px;
-  padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small);
-}
-
-.dtysUhwYdG4- {
-  grid-template-columns: -webkit-min-content 1fr;
-  grid-template-columns: min-content 1fr;
-}
-
-.xGaMCAYsdwA- {
-  grid-template-columns: 1fr -webkit-min-content;
-  grid-template-columns: 1fr min-content;
-}
-
-.dtysUhwYdG4-.xGaMCAYsdwA- {
-  grid-template-columns: -webkit-min-content 1fr -webkit-min-content;
-  grid-template-columns: min-content 1fr min-content;
-}
-
-.SNT7gGV-h-o-,
-.W4D98cvEth4- ~ .PEnZzMEgbhU- {
-  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--shadow-base);
-  cursor: pointer;
-  -webkit-appearance: none;
-          appearance: none;
-}
-
-/**
- * Interaction
- */
-
-.PEnZzMEgbhU-:focus,
-.W4D98cvEth4-:focus ~ .PEnZzMEgbhU- {
-  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
-  box-shadow: var(--shadow-focus);
-  outline: none;
-}
-
-.SNT7gGV-h-o-:hover,
-.W4D98cvEth4- ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-):hover,
-.W4D98cvEth4-:focus ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-) {
-  background-color: hsl(53, 21%, 93%);
-  background-color: var(--color-surface--hover);
-}
-
-/**
- * States
- */
-
-.PEnZzMEgbhU-._0hEzaTXK9M0- {
-  border-color: hsl(197, 90%, 12%);
-  border-color: var(--color-surface--reverse);
-  color: rgba(255, 255, 255, 1);
-  color: var(--color-text--reverse);
-  background-color: hsl(197, 90%, 12%);
-  background-color: var(--color-surface--reverse);
-}
-
-.PEnZzMEgbhU-.JApS2787BU8- {
-  border-color: hsl(6, 100%, 24%);
-  border-color: var(--color-critical--onSurface);
-  color: hsl(6, 100%, 24%);
-  color: var(--color-critical--onSurface);
-  background-color: hsl(7, 63%, 95%);
-  background-color: var(--color-critical--surface);
-}
-
-.PEnZzMEgbhU-.Kg0c8WVgMpg- {
-  border-color: hsl(0, 0%, 93%);
-  border-color: var(--color-disabled--secondary);
-  color: hsl(0, 0%, 72%);
-  color: var(--color-disabled);
-  background-color: hsl(0, 0%, 93%);
-  background-color: var(--color-disabled--secondary);
-}
-
-._0hEzaTXK9M0-.Kg0c8WVgMpg- {
-  border-color: hsl(0, 0%, 72%);
-  border-color: var(--color-disabled);
-  color: rgba(255, 255, 255, 1);
-  color: var(--color-white);
-  background-color: hsl(0, 0%, 72%);
-  background-color: var(--color-disabled);
-}
-
-.JApS2787BU8-.Kg0c8WVgMpg- {
-  border-color: hsl(6, 64%, 51%);
-  border-color: var(--color-critical);
-}
-
-/**
- * Input checkbox/radio
- *
- * Hide checkbox on UI but not screen readers and still allow focus state
- */
-
-.W4D98cvEth4- {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(100%);
-          clip-path: inset(100%);
-  white-space: nowrap;
-}
-
-/**
- * Button
- */
-
-._0-ZWexS4Gfg- {
-  display: -ms-flexbox;
-  display: flex;
-  border-radius: 8px;
-  border-radius: var(--radius-base);
-  cursor: pointer;
-  transition: background-color 200ms ease;
-}
-
-._0-ZWexS4Gfg-:hover,
-._0-ZWexS4Gfg-:focus {
-  background-color: hsl(53, 21%, 93%);
-  background-color: var(--color-surface--hover);
-}
-
-._0-ZWexS4Gfg-:focus,
-.SNT7gGV-h-o- ._0-ZWexS4Gfg-:hover {
-  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
-  box-shadow: var(--shadow-focus);
-  outline: none;
-}
-
-/**
- * Override icon default colors.
- *
- * NOTE: This is a workaround since some icons have default colors that we don't
- * want to override until the component color prop overrides it.
- * DO NOT COPY!
- */
-
-.DQPnZP4UZpw- > svg {
-  fill: hsl(198, 35%, 21%);
-  fill: var(--color-interactive--subtle);
-}
-
-.DQPnZP4UZpw- {
-  display: -ms-flexbox;
-  display: flex;
-}
-
 .sCNIjluCskc- {
   display: -ms-flexbox;
   display: flex;

package/dist/{throttle-Cprv6cRN.js → throttle-QtIZuNyM.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var _commonjsHelpers = require('./_commonjsHelpers-CeSHm1M2.js');
-var debounce$1 = require('./debounce-3grWz_0o.js');
-var isObjectLike = require('./isObjectLike-i_S0AKMg.js');
+var _commonjsHelpers = require('./_commonjsHelpers-BLIunDkT.js');
+var debounce$1 = require('./debounce-s15hWybq.js');
+var isObjectLike = require('./isObjectLike-4Yd8T8FR.js');
 
 var debounce = debounce$1.debounce_1,
     isObject = isObjectLike.isObject_1;

package/dist/{throttle-BdsTStEK.js → throttle-gSkQbGPK.js}

@@ -1,6 +1,6 @@
-import { g as getDefaultExportFromCjs } from './_commonjsHelpers-pBx_5ASz.js';
-import { d as debounce_1 } from './debounce-4ZcizSQk.js';
-import { i as isObject_1 } from './isObjectLike-DTwl2dr2.js';
+import { g as getDefaultExportFromCjs } from './_commonjsHelpers-Wxgt4_Xa.js';
+import { d as debounce_1 } from './debounce-B08Maooe.js';
+import { i as isObject_1 } from './isObjectLike-D1YiP1XU.js';
 
 var debounce = debounce_1,
     isObject = isObject_1;

package/dist/{updateTheme-C4xUL5Rh.js → updateTheme-5GzkzB5d.js}

@@ -1,13 +1,13 @@
 import { tokens, darkTokens } from '@jobber/design';
 import React, { createContext, useState, useCallback, useEffect, useContext } from 'react';
-import { g as getDefaultExportFromCjs } from './_commonjsHelpers-pBx_5ASz.js';
-import { e as eq_1, b as _Stack } from './identity-CBz1SXvU.js';
-import { _ as _baseAssignValue } from './_baseAssignValue-CQPk8ome.js';
-import { _ as _baseFor } from './_baseFor-CAR1UOUq.js';
-import { _ as _copyObject, k as keysIn_1, a as _cloneBufferExports, b as _cloneTypedArray, c as _copyArray, d as _initCloneObject, i as isPlainObject_1 } from './keysIn-CohO8U3u.js';
-import { b as isArrayLike_1, i as isArguments_1, a as isArray_1, c as isBufferExports, j as isFunction_1, d as isTypedArray_1 } from './isTypedArray-Cd4gzGPz.js';
-import { a as isObjectLike_1, i as isObject_1 } from './isObjectLike-DTwl2dr2.js';
-import { _ as _baseRest, a as _isIterateeCall } from './_isIterateeCall-5JAuCV4M.js';
+import { g as getDefaultExportFromCjs } from './_commonjsHelpers-Wxgt4_Xa.js';
+import { e as eq_1, b as _Stack } from './identity-BAOeCZJm.js';
+import { _ as _baseAssignValue } from './_baseAssignValue-DGmqudAT.js';
+import { _ as _baseFor } from './_baseFor-AiaFeKTR.js';
+import { _ as _copyObject, k as keysIn_1, a as _cloneBufferExports, b as _cloneTypedArray, c as _copyArray, d as _initCloneObject, i as isPlainObject_1 } from './keysIn-Dfdr3z5Z.js';
+import { b as isArrayLike_1, i as isArguments_1, a as isArray_1, c as isBufferExports, j as isFunction_1, d as isTypedArray_1 } from './isTypedArray-B8ZChn46.js';
+import { a as isObjectLike_1, i as isObject_1 } from './isObjectLike-D1YiP1XU.js';
+import { _ as _baseRest, a as _isIterateeCall } from './_isIterateeCall-BNl3cdoq.js';
 
 var baseAssignValue = _baseAssignValue,
     eq = eq_1;

package/dist/{updateTheme-Dy4NdRvb.js → updateTheme-JKZqjR35.js}

@@ -2,14 +2,14 @@
 
 var design = require('@jobber/design');
 var React = require('react');
-var _commonjsHelpers = require('./_commonjsHelpers-CeSHm1M2.js');
-var identity = require('./identity-CjCnhCLi.js');
-var _baseAssignValue = require('./_baseAssignValue-DqutJn-l.js');
-var _baseFor = require('./_baseFor-BYQUrQxA.js');
-var keysIn$2 = require('./keysIn-CHML7XSO.js');
-var isTypedArray$1 = require('./isTypedArray-K4_TLJfP.js');
-var isObjectLike$1 = require('./isObjectLike-i_S0AKMg.js');
-var _isIterateeCall = require('./_isIterateeCall-CzcrXhGB.js');
+var _commonjsHelpers = require('./_commonjsHelpers-BLIunDkT.js');
+var identity = require('./identity-ZxEoiIJX.js');
+var _baseAssignValue = require('./_baseAssignValue-CeHu5KJ7.js');
+var _baseFor = require('./_baseFor--lofiDp-.js');
+var keysIn$2 = require('./keysIn-hQcVLKcp.js');
+var isTypedArray$1 = require('./isTypedArray-CmPxpu8_.js');
+var isObjectLike$1 = require('./isObjectLike-4Yd8T8FR.js');
+var _isIterateeCall = require('./_isIterateeCall-BIAGiMig.js');
 
 var baseAssignValue = _baseAssignValue._baseAssignValue,
     eq = identity.eq_1;

package/dist/{useActiveLayout-DlI6NCb5.js → useActiveLayout-3t2ekYEU.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var useResponsiveSizing = require('./useResponsiveSizing-BTk6Z4hD.js');
-var DataListContext = require('./DataListContext-nc3OMIku.js');
+var useResponsiveSizing = require('./useResponsiveSizing-ComOPgOQ.js');
+var DataListContext = require('./DataListContext-5u4Tklkl.js');
 
 function useActiveLayout() {
     const { layoutBreakpoints, layouts } = DataListContext.useDataListContext();

package/dist/{useActiveLayout-kVPdH4fH.js → useActiveLayout-B2M1H53H.js}

@@ -1,5 +1,5 @@
-import { u as useResponsiveSizing } from './useResponsiveSizing-s676YOix.js';
-import { u as useDataListContext } from './DataListContext-DSdVeYAt.js';
+import { u as useResponsiveSizing } from './useResponsiveSizing-9QQN0EFU.js';
+import { u as useDataListContext } from './DataListContext-DheTAQ2a.js';
 
 function useActiveLayout() {
     const { layoutBreakpoints, layouts } = useDataListContext();

package/dist/{useAssert-D4PJ4ymq.js → useAssert-DeDzmf8w.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var _commonjsHelpers = require('./_commonjsHelpers-CeSHm1M2.js');
-var _polyfillNode_process = require('./_polyfill-node.process-BsVBF5ZD.js');
+var _commonjsHelpers = require('./_commonjsHelpers-BLIunDkT.js');
+var _polyfillNode_process = require('./_polyfill-node.process-B9jKKjWE.js');
 
 var useAssert$1 = {};
 

package/dist/{useAssert-6YWzzvfL.js → useAssert-nolVn0-0.js}

@@ -1,5 +1,5 @@
-import { a as getAugmentedNamespace, c as commonjsGlobal } from './_commonjsHelpers-pBx_5ASz.js';
-import { _ as _polyfillNode_process } from './_polyfill-node.process-C_XaL-sh.js';
+import { a as getAugmentedNamespace, c as commonjsGlobal } from './_commonjsHelpers-Wxgt4_Xa.js';
+import { _ as _polyfillNode_process } from './_polyfill-node.process-ChNelYVc.js';
 
 var useAssert$1 = {};
 

package/dist/{useBatchSelect-CD3CQd6g.js → useBatchSelect-ByI0BqEk.js}

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

package/dist/{useBatchSelect-2xrVPfVW.js → useBatchSelect-DWinxSDP.js}

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

package/dist/{useIsMounted-B7_9jE75.js → useIsMounted-BRwZjot8.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var useSafeLayoutEffect$1 = require('./useSafeLayoutEffect-CqNRT675.js');
+var useSafeLayoutEffect$1 = require('./useSafeLayoutEffect-CIw8eTBT.js');
 
 var useIsMounted$1 = {};
 
@@ -19,6 +19,9 @@ exports.useIsMounted_2 = useIsMounted$1.useIsMounted = void 0;
 const react_1 = React;
 const useSafeLayoutEffect_1 = useSafeLayoutEffect;
 /**
+ * If you are using this hook in order to only perform an action once after mounting (for example sending
+ * analytics events), use `useOnMount` instead
+ *
  * Why does this work?
  *
  * The following is from the react docs:

package/dist/{useIsMounted-CSRPXMQN.js → useIsMounted-C5IR8jDM.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { a as useSafeLayoutEffect$1 } from './useSafeLayoutEffect-DldEYPfW.js';
+import { a as useSafeLayoutEffect$1 } from './useSafeLayoutEffect-DUsEPAJl.js';
 
 var useIsMounted$1 = {};
 
@@ -17,6 +17,9 @@ var useIsMounted_2 = useIsMounted$1.useIsMounted = void 0;
 const react_1 = React;
 const useSafeLayoutEffect_1 = useSafeLayoutEffect;
 /**
+ * If you are using this hook in order to only perform an action once after mounting (for example sending
+ * analytics events), use `useOnMount` instead
+ *
  * Why does this work?
  *
  * The following is from the react docs: