@jobber/components 4.75.0 → 4.76.1-job-85845.0

package/dist/Autocomplete/index.js

@@ -13,12 +13,11 @@ var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var Text = require('../Text-259af966.js');
 var Icon = require('../Icon-405a216c.js');
 var Heading = require('../Heading-1e8e4bd3.js');
-var InputText = require('../InputText-9e61365c.js');
+var InputText = require('../InputText-ed025475.js');
 require('../Typography-c45bf216.js');
 require('@jobber/design');
 require('../getAtlantisConfig-0f3e8af2.js');
-require('../FormField-b0e74d32.js');
-require('uuid');
+require('../FormField-5d977ffd.js');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');
 require('../Button-b73a5e01.js');

package/dist/Card/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../Card-426a68a8.js');
+var Card = require('../Card-84e80c94.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
@@ -13,8 +13,7 @@ require('../Button-b73a5e01.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-81b12936.js');
-require('uuid');
+require('../Menu-3e137b7d.js');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');

package/dist/{Card-426a68a8.js → Card-84e80c94.js}

@@ -5,7 +5,7 @@ var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Heading = require('./Heading-1e8e4bd3.js');
 var Button = require('./Button-b73a5e01.js');
-var Menu = require('./Menu-81b12936.js');
+var Menu = require('./Menu-3e137b7d.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Checkbox/index.js

@@ -2,10 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Checkbox = require('../Checkbox-1cdd5cf6.js');
+var Checkbox = require('../Checkbox-2915069b.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
-require('uuid');
 require('classnames');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/{Checkbox-1cdd5cf6.js → Checkbox-2915069b.js}

@@ -2,7 +2,6 @@
 
 var tslib_es6 = require('./tslib.es6-5b8768b7.js');
 var React = require('react');
-var uuid = require('uuid');
 var classnames = require('classnames');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
@@ -23,7 +22,7 @@ function Checkbox({ checked, defaultChecked, disabled, label, name, value, indet
         ? reactHookForm.useFormContext()
         : // If there isn't a Form Context being provided, get a form for this field.
             reactHookForm.useForm({ mode: "onTouched" });
-    const [identifier] = React.useState(uuid.v1());
+    const [identifier] = React.useState(React.useId());
     /**
      * Generate a name if one is not supplied, this is the name
      * that will be used for react-hook-form and not neccessarily

package/dist/Chips/index.js

@@ -10,15 +10,14 @@ var Icon = require('../Icon-405a216c.js');
 var Avatar = require('../Avatar-76a799fa.js');
 var Typography = require('../Typography-c45bf216.js');
 var Tooltip = require('../Tooltip-27771182.js');
-var uuid = require('uuid');
 var sortBy = require('lodash/sortBy');
 var useLiveAnnounce = require('@jobber/hooks/useLiveAnnounce');
 var debounce = require('lodash/debounce');
+require('@jobber/design');
 var reactPopper = require('react-popper');
 var Text = require('../Text-259af966.js');
 var Button = require('../Button-b73a5e01.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
-require('@jobber/design');
 require('color');
 require('react-dom');
 require('framer-motion');
@@ -129,7 +128,7 @@ function ChipDismissible({ label, disabled, invalid, prefix, onClick, onRequestR
     return (React__default["default"].createElement(InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React__default["default"].createElement(InternalChipButton, { icon: "remove", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));
 }
 
-function InternalChipSingleSelect({ children, selected, name = uuid.v1(), onChange, onClick, }) {
+function InternalChipSingleSelect({ children, selected, name = React.useId(), onChange, onClick, }) {
     return (React__default["default"].createElement("div", { className: styles$1.wrapper, "data-testid": "singleselect-chips" }, React__default["default"].Children.map(children, child => {
         const isSelected = child.props.value === selected;
         return (React__default["default"].createElement("label", null,
@@ -269,9 +268,9 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
         availableChipOptions });
 }
 
-const menuId = uuid.v1();
 // eslint-disable-next-line max-statements
 function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCustomOptionSelect, onOptionSelect, onSearch, }) {
+    const menuId = React.useId();
     const [allOptions, setAllOptions] = React.useState([]);
     const [searchValue, setSearchValue] = React.useState("");
     const [menuOpen, setMenuOpen] = React.useState(false);

package/dist/DataDump/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-426a68a8.js');
+var Card = require('../Card-84e80c94.js');
 var Content = require('../Content-e3f7b6fc.js');
 var Emphasis = require('../Emphasis-bda56d3b.js');
 require('classnames');
@@ -15,8 +15,7 @@ require('../Button-b73a5e01.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-81b12936.js');
-require('uuid');
+require('../Menu-3e137b7d.js');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');

package/dist/DataList/DataList.types.d.ts

@@ -31,8 +31,11 @@ export interface DataListObject {
 export type DataListHeader<T extends DataListObject> = {
     readonly [K in keyof T]?: string;
 };
-export interface DataListSorting {
+export interface DataListSorting extends SortableOptions {
     readonly key: string;
+}
+export interface SortableOptions {
+    readonly label: string;
     readonly order: "asc" | "desc";
 }
 export interface DataListProps<T extends DataListObject> {
@@ -88,7 +91,10 @@ export interface DataListProps<T extends DataListObject> {
      * `onSort`: The callback function when the user sorting a column.
      */
     readonly sorting?: {
-        readonly sortable: (keyof DataListHeader<T>)[];
+        readonly sortable: {
+            key: string;
+            options?: SortableOptions[];
+        }[];
         readonly state: DataListSorting | undefined;
         readonly onSort: (sorting?: DataListSorting) => void;
     };

package/dist/DataList/components/DataListHeaderTile/DataListHeaderTile.d.ts

@@ -3,6 +3,7 @@ import { DataListHeader, DataListObject } from "../../DataList.types";
 interface DataListHeaderTileProps<T extends DataListObject> {
     readonly headers: DataListHeader<T>;
     readonly headerKey: string;
+    readonly visible: boolean;
 }
-export declare function DataListHeaderTile<T extends DataListObject>({ headers, headerKey, }: DataListHeaderTileProps<T>): JSX.Element;
+export declare function DataListHeaderTile<T extends DataListObject>({ headers, headerKey, visible, }: DataListHeaderTileProps<T>): JSX.Element;
 export {};

package/dist/DataList/components/DataListHeaderTile/components/DataListSortingOptions.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { SortableOptions } from "../../../DataList.types";
+interface DataListSortingOptionsProps {
+    readonly options: SortableOptions[];
+    readonly selectedOption: SortableOptions | null;
+    readonly onSelectChange: (selectedOption: SortableOptions) => void;
+    readonly onClose: () => void;
+    readonly optionsListRef: React.RefObject<HTMLUListElement>;
+    readonly dataListHeaderTileRef: React.RefObject<HTMLElement>;
+}
+export declare function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }: DataListSortingOptionsProps): JSX.Element;
+export {};

package/dist/DataList/components/DataListHeaderTile/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./DataListSortingOptions";

package/dist/DataList/index.js

@@ -16,31 +16,30 @@ var Button = require('../Button-b73a5e01.js');
 var useInView = require('@jobber/hooks/useInView');
 var isEmpty = require('lodash/isEmpty');
 var InlineLabel = require('../InlineLabel-a6557829.js');
-var FormatDate = require('../FormatDate-70ea5b43.js');
-var Heading = require('../Heading-1e8e4bd3.js');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
+var Icon = require('../Icon-405a216c.js');
+var FormatDate = require('../FormatDate-70ea5b43.js');
+var Heading = require('../Heading-1e8e4bd3.js');
 var ReactDOM = require('react-dom');
-var Checkbox = require('../Checkbox-1cdd5cf6.js');
+var Checkbox = require('../Checkbox-2915069b.js');
 var reactRouterDom = require('react-router-dom');
 var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
 var Combobox = require('../Combobox-ac089920.js');
 var Chip = require('../Chip-c91fd6c8.js');
-var Icon = require('../Icon-405a216c.js');
 var debounce = require('lodash/debounce');
-var InputText = require('../InputText-9e61365c.js');
+var InputText = require('../InputText-ed025475.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
 var Typography = require('../Typography-c45bf216.js');
 require('../Content-e3f7b6fc.js');
 require('react-popper');
 require('../getAtlantisConfig-0f3e8af2.js');
-require('uuid');
 require('react-hook-form');
 require('@jobber/hooks/useAssert');
 require('../Avatar-76a799fa.js');
 require('color');
-require('../FormField-b0e74d32.js');
+require('../FormField-5d977ffd.js');
 require('@jobber/hooks/useShowClear');
 require('../InputValidation-a7a737f9.js');
 
@@ -52,13 +51,13 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var css_248z$f = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n  --data-list--minimum-item-height: calc(var(--base-unit) * 3.5);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n/*\n * Header\n */\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TFO76ysivmg- {\n  display: grid;\n  padding: calc((16px / 2) + (16px / 4)) 0;\n  padding: calc(calc(16px / 2) + calc(16px / 4)) 0;\n  padding: calc(var(--space-small) + var(--space-smaller)) 0;\n  gap: calc(16px / 2);\n  grid-gap: calc(16px / 2);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto fit-content(calc(16px * 14));\n  grid-template-columns: auto fit-content(calc(var(--base-unit) * 14));\n}\n\n.jGHZZYZm1ZY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: center;\n      justify-content: center;\n  min-height: calc(16px * 3);\n  min-height: var(--space-largest);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(217, 223, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n  --data-list--header-actions-gap: var(--space-small);\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px / 2);\n  gap: var(--data-list--header-actions-gap);\n}\n\n@media (max-width: 489px) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n.jMSVGIAr5tk- > p {\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: var(--data-list--header-actions-gap);\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n  position: relative;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-,\n.Tq6e0BGwcSM- {\n  display: grid;\n  grid-template-columns: minmax(0px, auto);\n  min-height: var(--data-list--minimum-item-height);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n  --data-list-item-active-color: var(--color-surface--hover);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  text-align: left;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n/**\n * Reset CSS properties on focus to ensure we only have the focus state on the\n * parent .listItem\n */\n\n.Tq6e0BGwcSM-:focus {\n  outline: none;\n  background-color: transparent;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n  .ise8kHCfhCY-:hover,\n  .ise8kHCfhCY-:focus-within {\n    background-color: transparent;\n  }\n\n  .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n    background-color: var(--data-list-item-active-color);\n  }\n}\n\n/*\n * List Item Selection\n */\n\n.d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\n  -webkit-column-gap: calc(16px / 2);\n  -webkit-column-gap: var(--space-small);\n     -moz-column-gap: calc(16px / 2);\n     -moz-column-gap: var(--space-small);\n          column-gap: calc(16px / 2);\n          column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qm-SSuWTXkI- {\n  display: -ms-flexbox;\n  display: flex;\n  visibility: hidden;\n\n  /* To compensate the Checkbox's label margin that we are using for screen-readers */\n  margin-right: calc((16px * 1) * -1);\n  margin-right: calc(calc(16px * 1) * -1);\n  margin-right: calc(var(--space-base) * -1);\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n  visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n  -ms-flex-order: 2;\n      order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n  -ms-flex-order: 1;\n      order: 1;\n  padding-top: calc(16px / 4);\n  padding-top: var(--space-smaller);\n  opacity: 1;\n  transition: opacity 100ms ease-in-out;\n  transition: opacity var(--transition-properties);\n  --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n  opacity: 1;\n}\n\n/*\n * Filters\n */\n\n.Kkp-IYmwq-s- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(255, 255, 255, 0.6);\n  background-color: var(--color-overlay--dimmed);\n  -ms-flex-align: start;\n      align-items: flex-start;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.m-eCShL7TU4- {\n  position: sticky;\n  top: 50vh;\n}\n\n/* This hides the text from the UI but not from the screen readers */\n\n.esUiRgWabYw- {\n  position: absolute;\n  top: auto;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  text-indent: -10000px;\n}\n";
-var styles$f = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","batchSelectContainer":"GiD7MjZJbcw-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","listItemClickable":"Tq6e0BGwcSM-","active":"Pc0JGX6jCD4-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-","srOnly":"esUiRgWabYw-"};
-styleInject_es.styleInject(css_248z$f);
+var css_248z$g = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n  --data-list--minimum-item-height: calc(var(--base-unit) * 3.5);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n/*\n * Header\n */\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TFO76ysivmg- {\n  display: grid;\n  padding: calc((16px / 2) + (16px / 4)) 0;\n  padding: calc(calc(16px / 2) + calc(16px / 4)) 0;\n  padding: calc(var(--space-small) + var(--space-smaller)) 0;\n  gap: calc(16px / 2);\n  grid-gap: calc(16px / 2);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto fit-content(calc(16px * 14));\n  grid-template-columns: auto fit-content(calc(var(--base-unit) * 14));\n}\n\n.jGHZZYZm1ZY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: center;\n      justify-content: center;\n  min-height: calc(16px * 3);\n  min-height: var(--space-largest);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(217, 223, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n  --data-list--header-actions-gap: var(--space-small);\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px / 2);\n  gap: var(--data-list--header-actions-gap);\n}\n\n@media (max-width: 489px) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n.jMSVGIAr5tk- > p {\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: var(--data-list--header-actions-gap);\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n  position: relative;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-,\n.Tq6e0BGwcSM- {\n  display: grid;\n  grid-template-columns: minmax(0px, auto);\n  min-height: var(--data-list--minimum-item-height);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n  --data-list-item-active-color: var(--color-surface--hover);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  text-align: left;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n/**\n * Reset CSS properties on focus to ensure we only have the focus state on the\n * parent .listItem\n */\n\n.Tq6e0BGwcSM-:focus {\n  outline: none;\n  background-color: transparent;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n  .ise8kHCfhCY-:hover,\n  .ise8kHCfhCY-:focus-within {\n    background-color: transparent;\n  }\n\n  .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n    background-color: var(--data-list-item-active-color);\n  }\n}\n\n/*\n * List Item Selection\n */\n\n.d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\n  -webkit-column-gap: calc(16px / 2);\n  -webkit-column-gap: var(--space-small);\n     -moz-column-gap: calc(16px / 2);\n     -moz-column-gap: var(--space-small);\n          column-gap: calc(16px / 2);\n          column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qm-SSuWTXkI- {\n  display: -ms-flexbox;\n  display: flex;\n  visibility: hidden;\n\n  /* To compensate the Checkbox's label margin that we are using for screen-readers */\n  margin-right: calc((16px * 1) * -1);\n  margin-right: calc(calc(16px * 1) * -1);\n  margin-right: calc(var(--space-base) * -1);\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n  visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n  -ms-flex-order: 2;\n      order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n  -ms-flex-order: 1;\n      order: 1;\n  padding-top: calc(16px / 4);\n  padding-top: var(--space-smaller);\n  opacity: 1;\n  transition: opacity 100ms ease-in-out;\n  transition: opacity var(--transition-properties);\n  --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n  opacity: 1;\n}\n\n/*\n * Filters\n */\n\n.Kkp-IYmwq-s- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(255, 255, 255, 0.6);\n  background-color: var(--color-overlay--dimmed);\n  -ms-flex-align: start;\n      align-items: flex-start;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.m-eCShL7TU4- {\n  position: sticky;\n  top: 50vh;\n}\n\n/* This hides the text from the UI but not from the screen readers */\n\n.esUiRgWabYw- {\n  position: absolute;\n  top: auto;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  text-indent: -10000px;\n}\n";
+var styles$g = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","batchSelectContainer":"GiD7MjZJbcw-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","listItemClickable":"Tq6e0BGwcSM-","active":"Pc0JGX6jCD4-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-","srOnly":"esUiRgWabYw-"};
+styleInject_es.styleInject(css_248z$g);
 
-var css_248z$e = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
-var styles$e = {"results":"F56prQsXm3A-"};
-styleInject_es.styleInject(css_248z$e);
+var css_248z$f = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
+var styles$f = {"results":"F56prQsXm3A-"};
+styleInject_es.styleInject(css_248z$f);
 
 const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
 function DataListTotalCount({ totalCount, loading, }) {
@@ -74,7 +73,7 @@ function DataListTotalCount({ totalCount, loading, }) {
             totalCount.toLocaleString(),
             " results)"));
     }
-    return (React__default["default"].createElement("div", { className: styles$e.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
+    return (React__default["default"].createElement("div", { className: styles$f.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
 }
 
 const defaultValues$1 = {
@@ -169,9 +168,9 @@ function useActiveLayout() {
     return { layout, activeBreakpoint };
 }
 
-var css_248z$d = "._8cMzUF8XEwY- {\n  position: relative;\n}\n\n._8cMzUF8XEwY-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 100px;\n  background-image: linear-gradient(\n    to top,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  background-image: linear-gradient(\n    to top,\n    var(--color-surface) 0%,\n    rgba(var(--color-white--rgb), 0) 100%\n  );\n}\n\n.Rh--6fVpkm4- {\n  padding: calc(16px * 1) calc(16px / 2);\n  padding: var(--space-base) var(--space-small);\n}\n\n.NFaWWvmxtkw- {\n  width: 100%;\n  min-width: calc(16px * 3);\n  min-width: var(--space-largest);\n}\n";
-var styles$d = {"wrapper":"_8cMzUF8XEwY-","loadingItem":"Rh--6fVpkm4-","glimmer":"NFaWWvmxtkw-"};
-styleInject_es.styleInject(css_248z$d);
+var css_248z$e = "._8cMzUF8XEwY- {\n  position: relative;\n}\n\n._8cMzUF8XEwY-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 100px;\n  background-image: linear-gradient(\n    to top,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  background-image: linear-gradient(\n    to top,\n    var(--color-surface) 0%,\n    rgba(var(--color-white--rgb), 0) 100%\n  );\n}\n\n.Rh--6fVpkm4- {\n  padding: calc(16px * 1) calc(16px / 2);\n  padding: var(--space-base) var(--space-small);\n}\n\n.NFaWWvmxtkw- {\n  width: 100%;\n  min-width: calc(16px * 3);\n  min-width: var(--space-largest);\n}\n";
+var styles$e = {"wrapper":"_8cMzUF8XEwY-","loadingItem":"Rh--6fVpkm4-","glimmer":"NFaWWvmxtkw-"};
+styleInject_es.styleInject(css_248z$e);
 
 const LOADING_STATE_LIMIT_ITEMS = 10;
 const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
@@ -181,10 +180,10 @@ function DataListLoadingState() {
     if (!layout)
         return null;
     const glimmerSize = activeBreakpoint === "xs" ? "small" : "large";
-    const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React__default["default"].createElement("div", { className: styles$d.glimmer },
+    const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React__default["default"].createElement("div", { className: styles$e.glimmer },
             React__default["default"].createElement(Glimmer.Glimmer, { size: glimmerSize }))) })), {});
     const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(glimmersFromHeader);
-    return (React__default["default"].createElement("div", { className: styles$d.wrapper }, loadingData.map((child, i) => (React__default["default"].createElement("div", { key: i, className: styles$d.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
+    return (React__default["default"].createElement("div", { className: styles$e.wrapper }, loadingData.map((child, i) => (React__default["default"].createElement("div", { key: i, className: styles$e.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
 }
 
 const defaultValues = {
@@ -197,32 +196,32 @@ function useDataListLayoutContext() {
     return React.useContext(DataListLayoutContext);
 }
 
-var css_248z$c = ".jHcHGQ-HDbk- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: calc((16px / 2) * -1);\n  top: calc(calc(16px / 2) * -1);\n  top: calc(var(--space-small) * -1);\n  right: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px / 4);\n  padding: var(--space-smaller);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.jobber-retheme .jHcHGQ-HDbk- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n";
-var styles$c = {"menu":"jHcHGQ-HDbk-"};
-styleInject_es.styleInject(css_248z$c);
+var css_248z$d = ".jHcHGQ-HDbk- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: calc((16px / 2) * -1);\n  top: calc(calc(16px / 2) * -1);\n  top: calc(var(--space-small) * -1);\n  right: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px / 4);\n  padding: var(--space-smaller);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.jobber-retheme .jHcHGQ-HDbk- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n";
+var styles$d = {"menu":"jHcHGQ-HDbk-"};
+styleInject_es.styleInject(css_248z$d);
 
 const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
 
-var css_248z$b = ".jbBRoxlZlNI- {\n  --overflow-fade--offset: var(--space-smaller);\n  --overflow-fade--negative-offset: calc(var(--overflow-fade--offset) * -1);\n\n  -ms-flex-item-align: center;\n\n      align-self: center;\n  position: relative;\n  min-width: 0;\n}\n\n.P6uJ-vHfKrM-,\n.MnN8qbS4hw4- {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: -webkit-max-content;\n  grid-auto-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.P6uJ-vHfKrM- {\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.MnN8qbS4hw4- {\n  margin: var(--overflow-fade--negative-offset);\n  padding: var(--overflow-fade--offset);\n  overflow-x: auto;\n  overflow-y: visible;\n}\n\n.b-5P7Z8eGO8- {\n  visibility: hidden;\n}\n\n.xzaCS4slLpI-::before,\n.Jf227kC8Nu0-::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: 100%;\n  background-image: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  background-image: linear-gradient(\n    var(--data-list-overflow-shadow-angle, to right),\n    var(--color-surface) 0%,\n    rgba(var(--color-white--rgb), 0) 100%\n  );\n  pointer-events: none;\n}\n\n.xzaCS4slLpI-::before {\n  left: var(--overflow-fade--negative-offset);\n}\n\n.Jf227kC8Nu0-::after {\n  --data-list-overflow-shadow-angle: to left;\n  right: var(--overflow-fade--negative-offset);\n}\n";
-var styles$b = {"fadeContainer":"jbBRoxlZlNI-","overflowItems":"P6uJ-vHfKrM-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
-styleInject_es.styleInject(css_248z$b);
+var css_248z$c = ".jbBRoxlZlNI- {\n  --overflow-fade--offset: var(--space-smaller);\n  --overflow-fade--negative-offset: calc(var(--overflow-fade--offset) * -1);\n\n  -ms-flex-item-align: center;\n\n      align-self: center;\n  position: relative;\n  min-width: 0;\n}\n\n.P6uJ-vHfKrM-,\n.MnN8qbS4hw4- {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: -webkit-max-content;\n  grid-auto-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.P6uJ-vHfKrM- {\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.MnN8qbS4hw4- {\n  margin: var(--overflow-fade--negative-offset);\n  padding: var(--overflow-fade--offset);\n  overflow-x: auto;\n  overflow-y: visible;\n}\n\n.b-5P7Z8eGO8- {\n  visibility: hidden;\n}\n\n.xzaCS4slLpI-::before,\n.Jf227kC8Nu0-::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: 100%;\n  background-image: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  background-image: linear-gradient(\n    var(--data-list-overflow-shadow-angle, to right),\n    var(--color-surface) 0%,\n    rgba(var(--color-white--rgb), 0) 100%\n  );\n  pointer-events: none;\n}\n\n.xzaCS4slLpI-::before {\n  left: var(--overflow-fade--negative-offset);\n}\n\n.Jf227kC8Nu0-::after {\n  --data-list-overflow-shadow-angle: to left;\n  right: var(--overflow-fade--negative-offset);\n}\n";
+var styles$c = {"fadeContainer":"jbBRoxlZlNI-","overflowItems":"P6uJ-vHfKrM-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
+styleInject_es.styleInject(css_248z$c);
 
 function DataListOverflowFade({ children }) {
     const [leftRef, isLeftVisible] = useInView.useInView();
     const [rightRef, isRightVisible] = useInView.useInView();
-    return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$b.fadeContainer, {
-            [styles$b.overflowLeft]: !isLeftVisible,
-            [styles$b.overflowRight]: !isRightVisible,
+    return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$c.fadeContainer, {
+            [styles$c.overflowLeft]: !isLeftVisible,
+            [styles$c.overflowRight]: !isRightVisible,
         }) },
-        React__default["default"].createElement("div", { className: styles$b.overflowGrid },
-            React__default["default"].createElement("span", { ref: leftRef, className: styles$b.overflowTrigger }),
-            React__default["default"].createElement("div", { className: styles$b.overflowItems }, children),
-            React__default["default"].createElement("span", { ref: rightRef, className: styles$b.overflowTrigger }))));
+        React__default["default"].createElement("div", { className: styles$c.overflowGrid },
+            React__default["default"].createElement("span", { ref: leftRef, className: styles$c.overflowTrigger }),
+            React__default["default"].createElement("div", { className: styles$c.overflowItems }, children),
+            React__default["default"].createElement("span", { ref: rightRef, className: styles$c.overflowTrigger }))));
 }
 
-var css_248z$a = "._8MYxAQYdZzM- {\n  position: relative;\n}\n\n.WRV-UmQmPzo- {\n  --inline-label-height: calc(\n    var(--typography--fontSize-small) * 1.5 + calc(var(--space-smaller) * 1.25) *\n      2\n  );\n\n  display: -ms-flexbox;\n\n  display: flex;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  max-height: calc((\n    ((16px * 1) * 0.75) * 1.5 + ((16px / 4) * 1.25) *\n      2\n  ) * 2);\n  max-height: calc(calc(\n    calc(calc(16px * 1) * 0.75) * 1.5 + calc(calc(16px / 4) * 1.25) *\n      2\n  ) * 2);\n  max-height: calc(var(--inline-label-height) * 2);\n  overflow: hidden;\n  white-space: nowrap;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.ND-cN-mX5-c- {\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n}\n\n.liQeWCMenD0- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
-var styles$a = {"tagWrapper":"_8MYxAQYdZzM-","tags":"WRV-UmQmPzo-","tagsMask":"ND-cN-mX5-c-","tagCount":"liQeWCMenD0-"};
-styleInject_es.styleInject(css_248z$a);
+var css_248z$b = "._8MYxAQYdZzM- {\n  position: relative;\n}\n\n.WRV-UmQmPzo- {\n  --inline-label-height: calc(\n    var(--typography--fontSize-small) * 1.5 + calc(var(--space-smaller) * 1.25) *\n      2\n  );\n\n  display: -ms-flexbox;\n\n  display: flex;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  max-height: calc((\n    ((16px * 1) * 0.75) * 1.5 + ((16px / 4) * 1.25) *\n      2\n  ) * 2);\n  max-height: calc(calc(\n    calc(calc(16px * 1) * 0.75) * 1.5 + calc(calc(16px / 4) * 1.25) *\n      2\n  ) * 2);\n  max-height: calc(var(--inline-label-height) * 2);\n  overflow: hidden;\n  white-space: nowrap;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.ND-cN-mX5-c- {\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n}\n\n.liQeWCMenD0- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
+var styles$b = {"tagWrapper":"_8MYxAQYdZzM-","tags":"WRV-UmQmPzo-","tagsMask":"ND-cN-mX5-c-","tagCount":"liQeWCMenD0-"};
+styleInject_es.styleInject(css_248z$b);
 
 function DataListTags({ items }) {
     const ref = React.useRef(null);
@@ -244,12 +243,12 @@ function DataListTags({ items }) {
             elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
         };
     }, [items]);
-    return (React__default["default"].createElement("div", { className: styles$a.tagWrapper, ref: ref },
-        React__default["default"].createElement("div", { className: classnames__default["default"](styles$a.tags, {
-                [styles$a.tagsMask]: shouldShowTagCount,
+    return (React__default["default"].createElement("div", { className: styles$b.tagWrapper, ref: ref },
+        React__default["default"].createElement("div", { className: classnames__default["default"](styles$b.tags, {
+                [styles$b.tagsMask]: shouldShowTagCount,
             }) }, items.filter(Boolean).map((tag, index) => (React__default["default"].createElement("div", { key: tag, "data-tag-element": index },
             React__default["default"].createElement(InlineLabel.InlineLabel, null, tag))))),
-        shouldShowTagCount && (React__default["default"].createElement("div", { className: styles$a.tagCount },
+        shouldShowTagCount && (React__default["default"].createElement("div", { className: styles$b.tagCount },
             React__default["default"].createElement(Text.Text, null,
                 "+",
                 visibleItems)))));
@@ -278,50 +277,109 @@ function buildIntersectionThreshold(items) {
     return thresholds;
 }
 
-var css_248z$9 = ".fLmJZJJqMcE- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n}\n\n.fLmJZJJqMcE-:focus,\n.fLmJZJJqMcE-:focus-visible {\n  outline: none;\n}\n\n.fLmJZJJqMcE-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.UG8cHUT3Hds- {\n  cursor: pointer;\n}\n";
-var styles$9 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
-styleInject_es.styleInject(css_248z$9);
+var css_248z$a = ".fLmJZJJqMcE- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n}\n\n.fLmJZJJqMcE-:focus,\n.fLmJZJJqMcE-:focus-visible {\n  outline: none;\n}\n\n.fLmJZJJqMcE-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.UG8cHUT3Hds- {\n  cursor: pointer;\n}\n";
+var styles$a = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
+styleInject_es.styleInject(css_248z$a);
 
-var css_248z$8 = ".AN5egORYy-0- {\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n.AN5egORYy-0- path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\n  transition: all 200ms ease;\n  transition: all var(--timing-base) ease;\n}\n\n.AN5egORYy-0- path.F1uTDCK0Sb0- {\n  fill: rgb(1, 41, 57);\n  fill: var(--color-heading);\n}\n\n.AN5egORYy-0- path._6KYeQXWXLQ8- {\n  fill: rgb(217, 223, 225);\n  fill: var(--color-inactive--surface);\n}\n\n.AN5egORYy-0-:hover path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\n  transition: all 200ms ease;\n  transition: all var(--timing-base) ease;\n}\n";
-var styles$8 = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
-styleInject_es.styleInject(css_248z$8);
+var css_248z$9 = ".AN5egORYy-0- {\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n.AN5egORYy-0- path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\n  transition: all 200ms ease;\n  transition: all var(--timing-base) ease;\n}\n\n.AN5egORYy-0- path.F1uTDCK0Sb0- {\n  fill: rgb(1, 41, 57);\n  fill: var(--color-heading);\n}\n\n.AN5egORYy-0- path._6KYeQXWXLQ8- {\n  fill: rgb(217, 223, 225);\n  fill: var(--color-inactive--surface);\n}\n\n.AN5egORYy-0-:hover path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\n  transition: all 200ms ease;\n  transition: all var(--timing-base) ease;\n}\n";
+var styles$9 = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
+styleInject_es.styleInject(css_248z$9);
 
 const SORTING_ICON_TEST_ID = "ATL-DataList-Sorting-Icon";
 function DataListSortingArrows({ order }) {
-    return (React__default["default"].createElement("div", { className: styles$8.sortIcon, "data-testid": SORTING_ICON_TEST_ID },
+    return (React__default["default"].createElement("div", { className: styles$9.sortIcon, "data-testid": SORTING_ICON_TEST_ID },
         React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             React__default["default"].createElement("path", { className: getActiveClassName("asc"), d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
             React__default["default"].createElement("path", { className: getActiveClassName("desc"), d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
     function getActiveClassName(targetOrder) {
-        return order === targetOrder ? styles$8.active : styles$8.inactive;
+        return order === targetOrder ? styles$9.active : styles$9.inactive;
     }
 }
 
-function DataListHeaderTile({ headers, headerKey, }) {
+var css_248z$8 = ".thBUfVNaigs- {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  max-width: var(--popover--width);\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  margin-top: calc(16px / 4);\n  margin-top: var(--space-smaller);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n.QaXuqbVjG04- {\n  display: -ms-flexbox;\n  display: flex;\n  min-width: calc((16px * 3) * 3.5);\n  min-width: calc(calc(16px * 3) * 3.5);\n  min-width: calc(var(--space-largest) * 3.5);\n  min-height: calc((calc(16px * 3) - calc(16px / 4)));\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  font-weight: 500;\n  white-space: nowrap;\n  list-style: none;\n  cursor: pointer;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.jobber-retheme .QaXuqbVjG04-,\n.jobber-retheme .thBUfVNaigs- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n.QaXuqbVjG04-:hover,\n.QaXuqbVjG04-:focus {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.QaXuqbVjG04-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
+var styles$8 = {"optionsList":"thBUfVNaigs-","option":"QaXuqbVjG04-"};
+styleInject_es.styleInject(css_248z$8);
+
+function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }) {
+    useRefocusOnActivator.useRefocusOnActivator(!optionsListRef.current);
+    useOnKeyDown.useOnKeyDown(() => onClose(), "Escape");
+    React__default["default"].useEffect(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [optionsListRef, dataListHeaderTileRef, onClose]);
+    return (React__default["default"].createElement("ul", { className: styles$8.optionsList, ref: optionsListRef }, options.map((option, index) => (React__default["default"].createElement("li", { className: styles$8.option, key: index, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0 },
+        option.label,
+        option.label === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && (React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" })))))));
+    function handleKeyDown(event, option) {
+        if (event.key === "Enter") {
+            onSelectChange(option);
+        }
+    }
+    function handleClickOutside(event) {
+        var _a, _b;
+        const isClickInsideOptions = (_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target);
+        const isClickInsideHeader = (_b = dataListHeaderTileRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target);
+        if (!isClickInsideOptions && !isClickInsideHeader) {
+            onClose();
+        }
+    }
+}
+
+/* eslint-disable max-statements */
+function DataListHeaderTile({ headers, headerKey, visible = false, }) {
+    useRefocusOnActivator.useRefocusOnActivator(visible);
     const { sorting } = useDataListContext();
-    const isSortable = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.includes(headerKey);
+    const [isDropDownOpen, setIsDropDownOpen] = React__default["default"].useState(false);
+    const [selectedSortOption, setSelectedSortOption] = React__default["default"].useState(null);
+    const optionsListRef = useFocusTrap.useFocusTrap(isDropDownOpen);
+    const dataListHeaderTileRef = React__default["default"].useRef(null);
+    const sortableItem = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.find(item => item.key === headerKey);
+    const isSortable = Boolean(sortableItem);
     const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
     const Tag = isSortable ? "button" : "div";
-    return (React__default["default"].createElement(Tag, { className: classnames__default["default"](styles$9.headerLabel, {
-            [styles$9.sortable]: isSortable,
-        }), onClick: handleOnClick },
+    return (React__default["default"].createElement(Tag, { className: classnames__default["default"](styles$a.headerLabel, {
+            [styles$a.sortable]: isSortable,
+        }), onClick: handleOnClick, ref: dataListHeaderTileRef },
         React__default["default"].createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
+        isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React__default["default"].createElement(DataListSortingOptions, { options: sortableItem.options, selectedOption: selectedSortOption, onSelectChange: handleSelectChange, onClose: () => setIsDropDownOpen(false), optionsListRef: optionsListRef, dataListHeaderTileRef: dataListHeaderTileRef })),
         (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? (React__default["default"].createElement(DataListSortingArrows, { order: sortingState.order })) : (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) !== headerKey && isSortable ? (React__default["default"].createElement(DataListSortingArrows, { order: "none" })) : null));
-    function toggleSorting(sortingKey) {
-        const isSameKey = sortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
-        if (isSameKey && (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc") {
+    function toggleSorting(sortingKey, label, order) {
+        const isSameKey = (sortingState === null || sortingState === void 0 ? void 0 : sortingState.label) === label && sortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
+        const isDescending = (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc";
+        if (isSameKey && isDescending && order !== "asc") {
+            if (order === "desc")
+                return;
             sorting === null || sorting === void 0 ? void 0 : sorting.onSort(undefined);
             return;
         }
+        const sortingOrder = order || (isSameKey && !isDescending ? "desc" : "asc");
         sorting === null || sorting === void 0 ? void 0 : sorting.onSort({
-            order: isSameKey && (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "asc" ? "desc" : "asc",
             key: sortingKey,
+            label,
+            order: sortingOrder,
         });
     }
     function handleOnClick() {
         if (!isSortable)
             return;
-        toggleSorting(headerKey);
+        if (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) {
+            setIsDropDownOpen(!isDropDownOpen);
+        }
+        else {
+            const headerValue = headers[headerKey];
+            if (headerValue !== undefined) {
+                toggleSorting(headerKey, headerValue);
+            }
+        }
+    }
+    function handleSelectChange(selectedOption) {
+        if (sortableItem) {
+            toggleSorting(sortableItem.key, selectedOption.label, selectedOption.order);
+        }
+        setSelectedSortOption(selectedOption);
+        setIsDropDownOpen(true);
     }
 }
 
@@ -374,7 +432,7 @@ function generateListItemElement(item) {
  * Generate the header elements with the default styling
  */
 function generateHeaderElements(headers) {
-    const headerElements = Object.keys(headers).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: React__default["default"].createElement(DataListHeaderTile, { headers: headers, headerKey: key }) })), {});
+    const headerElements = Object.keys(headers).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: React__default["default"].createElement(DataListHeaderTile, { headers: headers, headerKey: key, visible: true }) })), {});
     return isEmpty__default["default"](headerElements) ? undefined : headerElements;
 }
 function sortBreakpoints(sizeProp) {
@@ -517,7 +575,7 @@ function InternalDataListItemActions({ actions, }) {
     return (React__default["default"].createElement(framerMotion.motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
             duration: TRANSITION_DURATION_IN_SECONDS,
             delay: TRANSITION_DELAY_IN_SECONDS,
-        }, className: styles$c.menu, onContextMenu: handleContextMenu },
+        }, className: styles$d.menu, onContextMenu: handleContextMenu },
         React__default["default"].createElement(DataListActions, null, actions)));
 }
 function handleContextMenu(event) {
@@ -561,8 +619,8 @@ function DataListItemInternal({ children, item, }) {
     const { canSelect, hasAtLeastOneSelected, isSelectAll, selectedIDs, selected, onSelect, } = useBatchSelect();
     if (!canSelect)
         return children;
-    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$f.selectable, {
-            [styles$f.selected]: hasAtLeastOneSelected,
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$g.selectable, {
+            [styles$g.selected]: hasAtLeastOneSelected,
         }) },
         children,
         React__default["default"].createElement(Checkbox.Checkbox, { checked: getIsChecked(), onChange: handleChange })));
@@ -607,17 +665,17 @@ function DataListItemClickableInternal({ onClick, url, to, children, }) {
         return React__default["default"].createElement(React__default["default"].Fragment, null, children);
     if (to) {
         const computedTo = typeof to === "string" ? to : to(activeItem);
-        return (React__default["default"].createElement(reactRouterDom.Link, { className: styles$f.listItemClickable, to: computedTo, onClick: handleClick }, children));
+        return (React__default["default"].createElement(reactRouterDom.Link, { className: styles$g.listItemClickable, to: computedTo, onClick: handleClick }, children));
     }
     if (url) {
         const href = typeof url === "string" ? url : url(activeItem);
-        return (React__default["default"].createElement("a", { className: styles$f.listItemClickable, href: href, onClick: handleClick }, children));
+        return (React__default["default"].createElement("a", { className: styles$g.listItemClickable, href: href, onClick: handleClick }, children));
     }
     if (onClick) {
         return (
         // A button can be nested within the list item. To prevent a button inside
         // button error, we need to manually declare a div to be a button
-        React__default["default"].createElement("div", { role: "button", tabIndex: 0, className: styles$f.listItemClickable, onClick: handleClick, onKeyDown: e => {
+        React__default["default"].createElement("div", { role: "button", tabIndex: 0, className: styles$g.listItemClickable, onClick: handleClick, onKeyDown: e => {
                 if (e.key === "Enter" || e.key === " ") {
                     e.preventDefault();
                     handleClick();
@@ -667,8 +725,8 @@ function DataListItem({ item, layout, }) {
     const isContextMenuVisible = Boolean(contextPosition);
     const shouldShowContextMenu = showMenu && isContextMenuVisible && hasActions;
     return (React__default["default"].createElement(DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
-        React__default["default"].createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames__default["default"](styles$f.listItem, {
-                [styles$f.active]: showMenu && isContextMenuVisible,
+        React__default["default"].createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames__default["default"](styles$g.listItem, {
+                [styles$g.active]: showMenu && isContextMenuVisible,
             }), key: item.id },
             React__default["default"].createElement(DataListItemInternal, { item: item },
                 React__default["default"].createElement(DataListItemClickable, null, layout(generatedItem))),
@@ -754,14 +812,14 @@ function DataListHeaderCheckbox({ children }) {
         return children;
     const deselectText = sm ? "Deselect All" : "Deselect";
     const selectedLabel = selectedCount ? `${selectedCount} selected` : "";
-    return (React__default["default"].createElement("div", { className: styles$f.selectable },
-        React__default["default"].createElement("div", { className: classnames__default["default"](styles$f.selectAllCheckbox, {
-                [styles$f.visible]: canSelectAll,
+    return (React__default["default"].createElement("div", { className: styles$g.selectable },
+        React__default["default"].createElement("div", { className: classnames__default["default"](styles$g.selectAllCheckbox, {
+                [styles$g.visible]: canSelectAll,
             }) },
             React__default["default"].createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
-                React__default["default"].createElement("div", { className: styles$f.srOnly }, selectedLabel))),
-        React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$f.batchSelectContainer },
-                React__default["default"].createElement("div", { className: styles$f.headerBatchSelect },
+                React__default["default"].createElement("div", { className: styles$g.srOnly }, selectedLabel))),
+        React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$g.batchSelectContainer },
+                React__default["default"].createElement("div", { className: styles$g.headerBatchSelect },
                     Boolean(selectedCount) && React__default["default"].createElement(Text.Text, null,
                         selectedCount,
                         " selected"),
@@ -813,7 +871,7 @@ function DataListHeader() {
     const headerData = generateHeaderElements(headers);
     if (!headerData)
         return null;
-    return (React__default["default"].createElement("div", { className: styles$f.headerTitles },
+    return (React__default["default"].createElement("div", { className: styles$g.headerTitles },
         React__default["default"].createElement(DataListHeaderCheckbox, null, layout(headerData))));
     function getVisibleSize() {
         const visibilityKeys = Object.keys(headerVisibility);
@@ -831,7 +889,7 @@ function DataListSort() {
     const sortByOptions = getSortByOptions();
     return (React__default["default"].createElement(Combobox.Combobox, { onSelect: selection => handleKeyChange(selection[0].id.toString()), selected: [
             {
-                id: `${state === null || state === void 0 ? void 0 : state.key},${state === null || state === void 0 ? void 0 : state.order}`,
+                id: `${state === null || state === void 0 ? void 0 : state.key},${state === null || state === void 0 ? void 0 : state.order},${state === null || state === void 0 ? void 0 : state.label}`,
                 label: (state === null || state === void 0 ? void 0 : state.order) || "",
             },
         ] },
@@ -841,17 +899,27 @@ function DataListSort() {
         sortByOptions.map(({ label, value }) => (React__default["default"].createElement(Combobox.Combobox.Option, { key: value, id: value, label: label })))));
     function getSortByOptions() {
         const options = sortable.reduce((acc, sort) => {
-            const label = headers[sort];
+            const label = headers[sort.key];
             if (!label)
                 return acc;
-            if (label === "Last activity") {
-                acc.push({ label: "Last Activity (Newest)", value: `${sort},desc` });
-                acc.push({ label: "Last Activity (Oldest)", value: `${sort},asc` });
-            }
-            else {
-                acc.push({ label: `${label} (A-Z)`, value: `${sort},asc` });
-                acc.push({ label: `${label} (Z-A)`, value: `${sort},desc` });
+            const customOptions = sort.options;
+            if (customOptions) {
+                customOptions.forEach(option => {
+                    acc.push({
+                        label: option.label || "",
+                        value: `${sort.key},${option.order},${option.label}`,
+                    });
+                });
+                return acc;
             }
+            acc.push({
+                label: `${label} (A-Z)`,
+                value: `${sort.key},asc,${label}`,
+            });
+            acc.push({
+                label: `${label} (Z-A)`,
+                value: `${sort.key},desc,${label}`,
+            });
             return acc;
         }, []);
         // Inject a none option as the first option
@@ -859,13 +927,13 @@ function DataListSort() {
         return options;
     }
     function getButtonLabel() {
-        const selectedOption = sortByOptions.find(option => option.value === `${state === null || state === void 0 ? void 0 : state.key},${state === null || state === void 0 ? void 0 : state.order}`);
+        const selectedOption = sortByOptions.find(option => option.value === `${state === null || state === void 0 ? void 0 : state.key},${state === null || state === void 0 ? void 0 : state.order},${state === null || state === void 0 ? void 0 : state.label}`);
         return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || "";
     }
     function handleKeyChange(value) {
         if (value && value !== "none") {
-            const [key, order] = value.split(",");
-            onSort({ key, order: order });
+            const [key, order, label] = value.split(",");
+            onSort({ key, order: order, label });
             return;
         }
         onSort(undefined);
@@ -1164,13 +1232,13 @@ function InternalDataList() {
     const initialLoading = loadingState === "initial";
     const showEmptyState = !initialLoading && data.length === 0;
     const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
-    return (React__default["default"].createElement("div", { className: styles$f.wrapper },
-        React__default["default"].createElement("div", { className: styles$f.titleContainer },
+    return (React__default["default"].createElement("div", { className: styles$g.wrapper },
+        React__default["default"].createElement("div", { className: styles$g.titleContainer },
             title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
             React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
         React__default["default"].createElement("div", { ref: backToTopRef }),
         React__default["default"].createElement(DataListStickyHeader, null,
-            React__default["default"].createElement("div", { className: styles$f.headerFilters },
+            React__default["default"].createElement("div", { className: styles$g.headerFilters },
                 React__default["default"].createElement(InternalDataListFilters, null),
                 React__default["default"].createElement(InternalDataListSearch, null)),
             React__default["default"].createElement(InternalDataListStatusBar, null),
@@ -1178,8 +1246,8 @@ function InternalDataList() {
         initialLoading && React__default["default"].createElement(DataListLoadingState, null),
         showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
         layoutComponents,
-        loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$f.filtering },
-            React__default["default"].createElement("div", { className: styles$f.filteringSpinner },
+        loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$g.filtering },
+            React__default["default"].createElement("div", { className: styles$g.filteringSpinner },
                 React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
         shouldRenderLoadMoreTrigger && (React__default["default"].createElement(DataListLoadMore, { onBackToTop: handleBackToTop }))));
     function handleBackToTop() {

package/dist/DataTable/index.js

@@ -9,12 +9,11 @@ var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Glimmer = require('../Glimmer-f40d5ea5.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-b715f6b4.js');
+var Option = require('../Option-2234938d.js');
 var Button = require('../Button-b73a5e01.js');
 var Text = require('../Text-259af966.js');
 require('../Content-e3f7b6fc.js');
-require('../FormField-b0e74d32.js');
-require('uuid');
+require('../FormField-5d977ffd.js');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');
 require('../Icon-405a216c.js');

package/dist/FormField/index.js

@@ -2,10 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormField = require('../FormField-b0e74d32.js');
+var FormField = require('../FormField-5d977ffd.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
-require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');

package/dist/{FormField-b0e74d32.js → FormField-5d977ffd.js}

@@ -2,7 +2,6 @@
 
 var tslib_es6 = require('./tslib.es6-5b8768b7.js');
 var React = require('react');
-var uuid = require('uuid');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var classnames = require('classnames');
@@ -151,8 +150,8 @@ function FormField(props) {
         ? reactHookForm.useFormContext()
         : // If there isn't a Form Context being provided, get a form for this field.
             reactHookForm.useForm({ mode: "onTouched" });
-    const [identifier] = React.useState(uuid.v1());
-    const [descriptionIdentifier] = React.useState(`descriptionUUID--${uuid.v1()}`);
+    const [identifier] = React.useState(React.useId());
+    const [descriptionIdentifier] = React.useState(`descriptionUUID--${React.useId()}`);
     /**
      * Generate a name if one is not supplied, this is the name
      * that will be used for react-hook-form and not neccessarily

package/dist/InputAvatar/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Avatar = require('../Avatar-76a799fa.js');
-var InputFile = require('../InputFile-d080dec5.js');
+var InputFile = require('../InputFile-b396510d.js');
 var ProgressBar = require('../ProgressBar-b68edc8f.js');
 var Button = require('../Button-b73a5e01.js');
 require('classnames');
@@ -15,7 +15,6 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('react-dropzone');
 require('axios');
-require('uuid');
 require('../InputValidation-a7a737f9.js');
 require('framer-motion');
 require('../Text-259af966.js');

package/dist/InputDate/index.js

@@ -4,10 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var omit = require('lodash/omit');
 var React = require('react');
-var FormField = require('../FormField-b0e74d32.js');
+var FormField = require('../FormField-5d977ffd.js');
 var DatePicker = require('../DatePicker-64c5ab1a.js');
 require('../tslib.es6-5b8768b7.js');
-require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');

package/dist/InputEmail/index.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-b0e74d32.js');
+var FormField = require('../FormField-5d977ffd.js');
 require('../tslib.es6-5b8768b7.js');
-require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');

package/dist/InputFile/InputFile.d.ts

@@ -39,7 +39,7 @@ export interface UploadParams {
     readonly url: string;
     /**
      * Key to identify file.
-     * If unspecified a `uuid` will be used.
+     * If unspecified a `useId` will be used.
      */
     readonly key?: string;
     /**

package/dist/InputFile/index.js

@@ -2,13 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputFile = require('../InputFile-d080dec5.js');
+var InputFile = require('../InputFile-b396510d.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('classnames');
 require('react-dropzone');
 require('axios');
-require('uuid');
 require('../style-inject.es-9d2f5f4e.js');
 require('../InputValidation-a7a737f9.js');
 require('framer-motion');

package/dist/{InputFile-d080dec5.js → InputFile-b396510d.js}

@@ -5,7 +5,6 @@ var React = require('react');
 var classnames = require('classnames');
 var reactDropzone = require('react-dropzone');
 var axios = require('axios');
-var uuid = require('uuid');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var InputValidation = require('./InputValidation-a7a737f9.js');
 var Button = require('./Button-b73a5e01.js');
@@ -72,7 +71,7 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
                 onUploadError && onUploadError(new Error("Failed to get upload params"));
                 return;
             }
-            const { url, key = uuid.v1(), fields = {}, httpMethod = "POST" } = params;
+            const { url, key = React.useId(), fields = {}, httpMethod = "POST" } = params;
             const fileUpload = getFileUpload(file, key, url);
             onUploadStart && onUploadStart(Object.assign({}, fileUpload));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/InputNumber/index.js

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputNumber = require('../InputNumber-79da1cdc.js');
+var InputNumber = require('../InputNumber-7c6d8aa5.js');
 require('react');
-require('../FormField-b0e74d32.js');
+require('../FormField-5d977ffd.js');
 require('../tslib.es6-5b8768b7.js');
-require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');

package/dist/{InputNumber-79da1cdc.js → InputNumber-7c6d8aa5.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-b0e74d32.js');
+var FormField = require('./FormField-5d977ffd.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputPassword/index.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-b0e74d32.js');
+var FormField = require('../FormField-5d977ffd.js');
 require('../tslib.es6-5b8768b7.js');
-require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');

package/dist/InputPhoneNumber/index.js

@@ -6,8 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var FormField = require('../FormField-b0e74d32.js');
-require('uuid');
+var FormField = require('../FormField-5d977ffd.js');
 require('classnames');
 require('@jobber/hooks/useShowClear');
 require('../Button-b73a5e01.js');

package/dist/InputText/index.js

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-9e61365c.js');
+var InputText = require('../InputText-ed025475.js');
 require('react');
-require('../FormField-b0e74d32.js');
+require('../FormField-5d977ffd.js');
 require('../tslib.es6-5b8768b7.js');
-require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');

package/dist/{InputText-9e61365c.js → InputText-ed025475.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-b0e74d32.js');
+var FormField = require('./FormField-5d977ffd.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputTime/index.js

@@ -6,8 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var debounce = require('lodash/debounce');
 var temporal = require('@std-proposal/temporal');
-var FormField = require('../FormField-b0e74d32.js');
-require('uuid');
+var FormField = require('../FormField-5d977ffd.js');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');

package/dist/Menu/Menu.d.ts

@@ -25,15 +25,15 @@ export interface ActionProps {
     /**
      * Action label
      */
-    label: string;
+    readonly label: string;
     /**
      * Parent Section Label
      */
-    sectionLabel?: string;
+    readonly sectionLabel?: string;
     /**
      * Visual cue for the action label
      */
-    icon?: IconNames;
+    readonly icon?: IconNames;
     /**
      * Callback when an action gets clicked
      */
@@ -41,5 +41,5 @@ export interface ActionProps {
     /**
      * Focus on the action when rendered
      */
-    shouldFocus?: boolean;
+    readonly shouldFocus?: boolean;
 }

package/dist/Menu/index.js

@@ -2,9 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Menu = require('../Menu-81b12936.js');
+var Menu = require('../Menu-3e137b7d.js');
 require('react');
-require('uuid');
 require('classnames');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');

package/dist/{Menu-81b12936.js → Menu-3e137b7d.js}

@@ -1,7 +1,6 @@
 'use strict';
 
 var React = require('react');
-var uuid = require('uuid');
 var classnames = require('classnames');
 var framerMotion = require('framer-motion');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
@@ -42,8 +41,8 @@ function Menu({ activator, items }) {
         horizontal: "right",
     });
     const wrapperRef = React.createRef();
-    const buttonID = uuid.v1();
-    const menuID = uuid.v1();
+    const buttonID = React.useId();
+    const menuID = React.useId();
     useOnKeyDown.useOnKeyDown(handleKeyboardShortcut, ["Escape"]);
     React.useLayoutEffect(() => {
         if (wrapperRef.current) {

package/dist/MultiSelect/index.js

@@ -5,11 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Checkbox = require('../Checkbox-1cdd5cf6.js');
+var Checkbox = require('../Checkbox-2915069b.js');
 var Text = require('../Text-259af966.js');
 var Icon = require('../Icon-405a216c.js');
 require('../tslib.es6-5b8768b7.js');
-require('uuid');
 require('react-hook-form');
 require('../Typography-c45bf216.js');
 require('@jobber/design');

package/dist/{Option-b715f6b4.js → Option-2234938d.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-b0e74d32.js');
+var FormField = require('./FormField-5d977ffd.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Page/index.js

@@ -11,7 +11,7 @@ var Text = require('../Text-259af966.js');
 var Content = require('../Content-e3f7b6fc.js');
 var Markdown = require('../Markdown-f7c55304.js');
 var Button = require('../Button-b73a5e01.js');
-var Menu = require('../Menu-81b12936.js');
+var Menu = require('../Menu-3e137b7d.js');
 var Emphasis = require('../Emphasis-bda56d3b.js');
 require('../Typography-c45bf216.js');
 require('../getAtlantisConfig-0f3e8af2.js');
@@ -19,7 +19,6 @@ require('react-markdown');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');

package/dist/RadioGroup/index.js

@@ -2,9 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var RadioGroup = require('../RadioGroup-ca7a5978.js');
+var RadioGroup = require('../RadioGroup-17b67ade.js');
 require('react');
-require('uuid');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Text-259af966.js');
 require('../Typography-c45bf216.js');

package/dist/{RadioGroup-ca7a5978.js → RadioGroup-17b67ade.js}

@@ -1,7 +1,6 @@
 'use strict';
 
 var React = require('react');
-var uuid = require('uuid');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Text = require('./Text-259af966.js');
 
@@ -21,7 +20,7 @@ function RadioOption({ children }) {
     return React__default["default"].createElement(React__default["default"].Fragment, null, children);
 }
 function InternalRadioOption({ value, name, label, description, disabled, checked, children, onChange, }) {
-    const inputId = `${value.toString()}_${uuid.v1()}`;
+    const inputId = `${value.toString()}_${React.useId()}`;
     const shouldRenderIndependentChildren = label && children;
     return (React__default["default"].createElement("div", null,
         React__default["default"].createElement("input", { onChange: handleChange, type: "radio", name: name, value: value, disabled: disabled, checked: checked, id: inputId, className: styles.input, "aria-describedby": description ? `${inputId}_description` : undefined }),
@@ -34,7 +33,7 @@ function InternalRadioOption({ value, name, label, description, disabled, checke
     }
 }
 
-function RadioGroup({ children, value, ariaLabel, onChange, name = uuid.v1(), }) {
+function RadioGroup({ children, value, ariaLabel, onChange, name = React.useId(), }) {
     return (React__default["default"].createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: styles.radioGroup }, React__default["default"].Children.map(children, option => (React__default["default"].createElement(InternalRadioOption, Object.assign({ checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
     function handleChange(newValue) {
         if (newValue !== value) {

package/dist/RecurringSelect/components/DayOfMonthSelect.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { DayOfMonth } from "../types";
 interface DayOfMonthSelectProps {
-    selectedDays: Set<DayOfMonth>;
-    disabled: boolean;
+    readonly selectedDays: Set<DayOfMonth>;
+    readonly disabled: boolean;
     onChange(selectedDays: Set<DayOfMonth>): void;
 }
 export declare function DayOfMonthSelect({ selectedDays, disabled, onChange, }: DayOfMonthSelectProps): JSX.Element;

package/dist/RecurringSelect/components/WeeklySelect.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { WeekDay } from "../types";
 interface WeeklySelectProps {
-    disabled: boolean;
-    selectedDays: Set<WeekDay>;
+    readonly disabled: boolean;
+    readonly selectedDays: Set<WeekDay>;
     onChange(selectedDays: Set<WeekDay>): void;
 }
 export declare function WeeklySelect({ onChange, selectedDays, disabled, }: WeeklySelectProps): JSX.Element;

package/dist/RecurringSelect/index.js

@@ -3,17 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var uuid = require('uuid');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var RadioGroup = require('../RadioGroup-ca7a5978.js');
+var RadioGroup = require('../RadioGroup-17b67ade.js');
 var Text = require('../Text-259af966.js');
 require('classnames');
 require('../Typography-c45bf216.js');
-var Option = require('../Option-b715f6b4.js');
-var InputNumber = require('../InputNumber-79da1cdc.js');
+var Option = require('../Option-2234938d.js');
+var InputNumber = require('../InputNumber-7c6d8aa5.js');
 var InputGroup = require('../InputGroup-8d4fd4eb.js');
 var Content = require('../Content-e3f7b6fc.js');
-require('../FormField-b0e74d32.js');
+require('../FormField-5d977ffd.js');
 require('../tslib.es6-5b8768b7.js');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');
@@ -99,7 +98,7 @@ function WeeklySelect({ onChange, selectedDays, disabled, }) {
     };
     return (React__default["default"].createElement("div", { className: styles$4.container }, weekDays.map(weekDay => {
         const isSelected = selectedDays.has(weekDay);
-        const inputId = uuid.v1();
+        const inputId = React.useId();
         return (React__default["default"].createElement("div", { key: `${weekDay}`, className: checkboxStyles.checkboxWrapper },
             React__default["default"].createElement("input", { className: checkboxStyles.dayCheckboxInput, disabled: disabled, type: "checkbox", onChange: onChangeWeekDays, id: `weekly-select-${weekDay}${inputId}`, "aria-checked": isSelected, checked: isSelected, value: weekDay }),
             React__default["default"].createElement("label", { className: checkboxStyles.dayCheckbox, htmlFor: `weekly-select-${weekDay}${inputId}` }, `${exports.WeekDay[weekDay].substr(0, 1).toUpperCase()}`)));
@@ -144,7 +143,7 @@ const daysInMonth = [...Array.from({ length: 31 }, (_, i) => i + 1), "LAST"];
 function DayOfMonthSelect({ selectedDays, disabled, onChange, }) {
     return (React__default["default"].createElement("div", { className: styles$1.container }, daysInMonth.map(day => {
         const isSelected = selectedDays.has(day);
-        const inputId = uuid.v1();
+        const inputId = React.useId();
         return (React__default["default"].createElement("div", { key: `${day}`, className: checkboxStyles.checkboxWrapper },
             React__default["default"].createElement("input", { className: checkboxStyles.dayCheckboxInput, disabled: disabled, type: "checkbox", id: `${day}-${inputId}`, onChange: handleChangeDayOfMonth, "aria-checked": isSelected, checked: isSelected, value: day }),
             React__default["default"].createElement("label", { className: checkboxStyles.dayCheckbox, htmlFor: `${day}-${inputId}` }, `${day === "LAST" ? "Last day" : day}`)));

package/dist/Select/index.js

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Option = require('../Option-b715f6b4.js');
+var Option = require('../Option-2234938d.js');
 require('react');
-require('../FormField-b0e74d32.js');
+require('../FormField-5d977ffd.js');
 require('../tslib.es6-5b8768b7.js');
-require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.75.0",
+  "version": "4.76.1-job-85845.0+c80c7b3b",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.52.0",
-    "@jobber/formatters": "*",
+    "@jobber/formatters": "^0.2.2",
     "@jobber/hooks": "^2.8.1",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "27452dd8241062254d7f71c756bbf4076b700471"
+  "gitHead": "c80c7b3bfdd8c97776012b151664530ab59bd575"
 }