@jobber/components 4.36.0 → 4.38.0

package/dist/Autocomplete/index.js

@@ -13,13 +13,13 @@ var reactPopper = require('react-popper');
 var Text = require('../Text-e7ed0974.js');
 var Icon = require('../Icon-405a216c.js');
 var Heading = require('../Heading-a1191b15.js');
-var InputText = require('../InputText-bb03f6d1.js');
+var InputText = require('../InputText-d1a52550.js');
 require('../Typography-fd6f932a.js');
 require('@jobber/design');
-require('../FormField-0f880b07.js');
+require('../FormField-d6138b7f.js');
 require('uuid');
 require('react-hook-form');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../InputValidation-b5a3d92c.js');
 require('framer-motion');

package/dist/Banner/index.js

@@ -8,7 +8,7 @@ var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Icon = require('../Icon-405a216c.js');
 var Text = require('../Text-e7ed0974.js');
-var Button = require('../Button-7698424c.js');
+var Button = require('../Button-fd8413b2.js');
 require('@jobber/design');
 require('../Typography-fd6f932a.js');
 require('react-router-dom');

package/dist/Button/Button.d.ts

@@ -59,6 +59,12 @@ interface SubmitButtonProps extends Omit<ButtonFoundationProps, "external" | "on
      */
     submit: boolean;
 }
-export type ButtonProps = XOR<BaseActionProps, XOR<DestructiveActionProps, SubmitActionProps>> & XOR<SubmitButtonProps, XOR<ButtonLinkProps, ButtonAnchorProps>> & XOR<ButtonIconProps, ButtonLabelProps>;
+interface BasicButtonProps extends ButtonFoundationProps {
+    /**
+     * Used to override the default button role.
+     */
+    readonly role?: string;
+}
+export type ButtonProps = XOR<BaseActionProps, XOR<DestructiveActionProps, SubmitActionProps>> & XOR<XOR<SubmitButtonProps, BasicButtonProps>, XOR<ButtonLinkProps, ButtonAnchorProps>> & XOR<ButtonIconProps, ButtonLabelProps>;
 export declare function Button(props: ButtonProps): JSX.Element;
 export {};

package/dist/Button/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Button = require('../Button-7698424c.js');
+var Button = require('../Button-fd8413b2.js');
 require('react');
 require('classnames');
 require('react-router-dom');

package/dist/{Button-7698424c.js → Button-fd8413b2.js}

@@ -17,7 +17,7 @@ var styles = {"button":"U9VsquOtk2I-","work":"qkFQwI0PKfw-","learning":"jsKQEOBd
 styleInject_es.styleInject(css_248z);
 
 function Button(props) {
-    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, fullWidth, icon, label, iconOnRight, id, loading, onClick, onMouseDown, size = "base", type = "primary", url, to, variation = "work", submit, } = props;
+    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, fullWidth, icon, label, iconOnRight, id, loading, onClick, onMouseDown, role, size = "base", type = "primary", url, to, variation = "work", submit, } = props;
     const buttonClassNames = classnames__default["default"](styles.button, styles[size], {
         [styles.onlyIcon]: icon && !label,
         [styles.hasIconAndLabel]: icon && label,
@@ -30,7 +30,7 @@ function Button(props) {
     });
     const buttonType = submit ? "submit" : "button";
     const tagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: buttonClassNames, disabled,
-        id }, (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel });
+        id }, (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
     const buttonInternals = React__default["default"].createElement(ButtonInternals, Object.assign({}, props));
     if (to) {
         return (React__default["default"].createElement(reactRouterDom.Link, Object.assign({}, tagProps, { to: to }), buttonInternals));

package/dist/ButtonDismiss/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ButtonDismiss = require('../ButtonDismiss-c7ee94a9.js');
+var ButtonDismiss = require('../ButtonDismiss-82680c7d.js');
 require('react');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('classnames');
 require('react-router-dom');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/{ButtonDismiss-c7ee94a9.js → ButtonDismiss-82680c7d.js}

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

package/dist/Card/index.js

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../Card-4553732a.js');
+var Card = require('../Card-cc2ffbaa.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Heading-a1191b15.js');
 require('../Typography-fd6f932a.js');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-2b5fd0b2.js');
+require('../Menu-51f8712f.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');

package/dist/{Card-4553732a.js → Card-cc2ffbaa.js}

@@ -4,8 +4,8 @@ var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Heading = require('./Heading-a1191b15.js');
-var Button = require('./Button-7698424c.js');
-var Menu = require('./Menu-2b5fd0b2.js');
+var Button = require('./Button-fd8413b2.js');
+var Menu = require('./Menu-51f8712f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Chips/index.js

@@ -16,7 +16,7 @@ var useLiveAnnounce = require('@jobber/hooks/useLiveAnnounce');
 var debounce = require('lodash/debounce');
 var reactPopper = require('react-popper');
 var Text = require('../Text-e7ed0974.js');
-var Button = require('../Button-7698424c.js');
+var Button = require('../Button-fd8413b2.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
 require('@jobber/design');
 require('color');

package/dist/ConfirmationModal/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ConfirmationModal = require('../ConfirmationModal-5df4ef33.js');
+var ConfirmationModal = require('../ConfirmationModal-6b61ebf5.js');
 require('react');
 require('@jobber/hooks/useOnKeyDown');
-require('../Modal-b684b273.js');
+require('../Modal-a9ab9565.js');
 require('react-dom');
 require('classnames');
 require('framer-motion');
@@ -14,11 +14,11 @@ require('@jobber/hooks/useFocusTrap');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Heading-a1191b15.js');
 require('../Typography-fd6f932a.js');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../ButtonDismiss-c7ee94a9.js');
+require('../ButtonDismiss-82680c7d.js');
 require('../Content-2ca1ffe1.js');
 require('../Markdown-f6748dcb.js');
 require('react-markdown');

package/dist/{ConfirmationModal-5df4ef33.js → ConfirmationModal-6b61ebf5.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Modal = require('./Modal-b684b273.js');
+var Modal = require('./Modal-a9ab9565.js');
 var Content = require('./Content-2ca1ffe1.js');
 var Markdown = require('./Markdown-f6748dcb.js');
 

package/dist/DataDump/index.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-4553732a.js');
+var Card = require('../Card-cc2ffbaa.js');
 var Content = require('../Content-2ca1ffe1.js');
 var Emphasis = require('../Emphasis-76a10790.js');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Heading-a1191b15.js');
 require('../Typography-fd6f932a.js');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-2b5fd0b2.js');
+require('../Menu-51f8712f.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');

package/dist/DataList/DataList.d.ts

@@ -6,7 +6,7 @@ import { DataListEmptyState } from "./components/DataListEmptyState";
 import { DataListObject, DataListProps } from "./DataList.types";
 import { DataListItemActions } from "./components/DataListItemActions";
 import { DataListAction } from "./components/DataListAction";
-export declare function DataList<T extends DataListObject>(props: DataListProps<T>): JSX.Element;
+export declare function DataList<T extends DataListObject>({ sorting, ...props }: DataListProps<T>): JSX.Element;
 export declare namespace DataList {
     var Layout: typeof DataListLayout;
     var EmptyState: typeof DataListEmptyState;

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

@@ -30,6 +30,10 @@ export interface DataListObject {
 export type DataListHeader<T extends DataListObject> = {
     readonly [K in keyof T]?: string;
 };
+export interface DataListSorting {
+    readonly key: string;
+    readonly direction: "asc" | "desc";
+}
 export interface DataListProps<T extends DataListObject> {
     /**
      * The data to render in the DataList.
@@ -77,6 +81,16 @@ export interface DataListProps<T extends DataListObject> {
      * The callback function when the user scrolls to the bottom of the list.
      */
     readonly onLoadMore?: () => void;
+    /**
+     * `sortable`: List of keys that are sortable.
+     * `state`: The state of the sorting.
+     * `onSort`: The callback function when the user sorting a column.
+     */
+    readonly sorting?: {
+        readonly sortable: (keyof DataListHeader<T>)[];
+        readonly state: DataListSorting | undefined;
+        readonly onSort: (sorting?: DataListSorting) => void;
+    };
     /**
      * Callback when an item checkbox is clicked.
      */

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DataListHeader, DataListObject } from "../../DataList.types";
+interface DataListHeaderTileProps<T extends DataListObject> {
+    readonly headers: DataListHeader<T>;
+    readonly headerKey: string;
+}
+export declare function DataListHeaderTile<T extends DataListObject>({ headers, headerKey, }: DataListHeaderTileProps<T>): JSX.Element;
+export {};

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function SortingArrows({ order }: {
+    order: "asc" | "desc";
+}): JSX.Element;

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

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

package/dist/DataList/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./DataList";
-export { DataListItemType } from "./DataList.types";
+export { DataListItemType, DataListSorting } from "./DataList.types";

package/dist/DataList/index.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Text = require('../Text-e7ed0974.js');
@@ -10,30 +11,29 @@ var framerMotion = require('framer-motion');
 var design = require('@jobber/design');
 var isEmpty = require('lodash/isEmpty');
 var InlineLabel = require('../InlineLabel-afd5fc6f.js');
+var classnames = require('classnames');
+var Icon = require('../Icon-405a216c.js');
 var FormatDate = require('../FormatDate-70ea5b43.js');
 var Heading = require('../Heading-a1191b15.js');
-var classnames = require('classnames');
 require('uuid');
 require('react-hook-form');
 var Checkbox = require('../Checkbox-3bccf65c.js');
 var Typography = require('../Typography-fd6f932a.js');
 require('react-router-dom');
-var Button = require('../Button-7698424c.js');
+var Button = require('../Button-fd8413b2.js');
 require('react-dom');
 var Tooltip = require('../Tooltip-bf67fe6e.js');
 require('react-popper');
 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 useInView = require('@jobber/hooks/useInView');
 var debounce = require('lodash/debounce');
-var InputText = require('../InputText-bb03f6d1.js');
+var InputText = require('../InputText-d1a52550.js');
 var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
-require('../tslib.es6-5b8768b7.js');
 require('../Content-2ca1ffe1.js');
-require('../FormField-0f880b07.js');
+require('../FormField-d6138b7f.js');
 require('../InputValidation-b5a3d92c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -43,13 +43,13 @@ var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var css_248z$b = ".TkdrExYnvcY- {\n  display: -ms-flexbox;\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.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) 0;\n  padding: var(--space-small) 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 -webkit-max-content;\n  grid-template-columns: auto max-content;\n}\n\n.jGHZZYZm1ZY- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(225, 225, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.Gj9kAGnfKco- > * {\n  font-weight: 500;\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(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.d-79rkMqufg- {\n  display: grid;\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          grid-column-gap: calc(16px / 2);\n          grid-column-gap: var(--space-small);\n          column-gap: var(--space-small);\n  -ms-flex-align: start;\n      align-items: flex-start;\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\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.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\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- > :first-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :first-child {\n  opacity: 1;\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";
-var styles$b = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","headerLabel":"Gj9kAGnfKco-","listItem":"ise8kHCfhCY-","selectable":"d-79rkMqufg-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-"};
-styleInject_es.styleInject(css_248z$b);
+var css_248z$d = ".TkdrExYnvcY- {\n  display: -ms-flexbox;\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.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) 0;\n  padding: var(--space-small) 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 -webkit-max-content;\n  grid-template-columns: auto max-content;\n}\n\n.jGHZZYZm1ZY- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(225, 225, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\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(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.d-79rkMqufg- {\n  display: grid;\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          grid-column-gap: calc(16px / 2);\n          grid-column-gap: var(--space-small);\n          column-gap: var(--space-small);\n  -ms-flex-align: start;\n      align-items: flex-start;\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\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.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\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- > :first-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :first-child {\n  opacity: 1;\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";
+var styles$d = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","listItem":"ise8kHCfhCY-","selectable":"d-79rkMqufg-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-"};
+styleInject_es.styleInject(css_248z$d);
 
-var css_248z$a = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
-var styles$a = {"results":"F56prQsXm3A-"};
-styleInject_es.styleInject(css_248z$a);
+var css_248z$c = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
+var styles$c = {"results":"F56prQsXm3A-"};
+styleInject_es.styleInject(css_248z$c);
 
 const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
 function DataListTotalCount({ totalCount, loading, }) {
@@ -65,12 +65,12 @@ function DataListTotalCount({ totalCount, loading, }) {
             totalCount.toLocaleString(),
             " results)"));
     }
-    return (React__default["default"].createElement("div", { className: styles$a.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
+    return (React__default["default"].createElement("div", { className: styles$c.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
 }
 
-var css_248z$9 = ".Rh--6fVpkm4- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n\n.zbS7UvpVoWI- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  height: calc(16px * 3);\n  height: var(--space-largest);\n  padding: calc(16px * 1) 0;\n  padding: var(--space-base) 0;\n}\n";
-var styles$9 = {"loadingItem":"Rh--6fVpkm4-","mobileLoadingState":"zbS7UvpVoWI-"};
-styleInject_es.styleInject(css_248z$9);
+var css_248z$b = ".Rh--6fVpkm4- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n\n.zbS7UvpVoWI- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  height: calc(16px * 3);\n  height: var(--space-largest);\n  padding: calc(16px * 1) 0;\n  padding: var(--space-base) 0;\n}\n";
+var styles$b = {"loadingItem":"Rh--6fVpkm4-","mobileLoadingState":"zbS7UvpVoWI-"};
+styleInject_es.styleInject(css_248z$b);
 
 const EMPTY_RESULTS_MESSAGE = "List is looking empty";
 const EMPTY_FILTER_RESULTS_MESSAGE = "No results for selected filters";
@@ -93,9 +93,9 @@ const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
 const TRANSITION_DURATION_IN_SECONDS = design.tokens["timing-base"] / 1000;
 const TRANSITION_DELAY_IN_SECONDS = design.tokens["timing-quick"] / 1000;
 
-var css_248z$8 = ".WRV-UmQmPzo- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  overflow: hidden;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.liQeWCMenD0- {\n  --overflow-bg: var(--color-white);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  padding-left: calc(16px * 1);\n  padding-left: var(--space-base);\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    rgba(255, 255, 255, 1) calc(16px * 1),\n    rgba(255, 255, 255, 1) 100%\n  );\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    var(--overflow-bg) var(--space-base),\n    var(--overflow-bg) 100%\n  );\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
-var styles$8 = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
-styleInject_es.styleInject(css_248z$8);
+var css_248z$a = ".WRV-UmQmPzo- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  overflow: hidden;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.liQeWCMenD0- {\n  --overflow-bg: var(--color-white);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  padding-left: calc(16px * 1);\n  padding-left: var(--space-base);\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    rgba(255, 255, 255, 1) calc(16px * 1),\n    rgba(255, 255, 255, 1) 100%\n  );\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    var(--overflow-bg) var(--space-base),\n    var(--overflow-bg) 100%\n  );\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
+var styles$a = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
+styleInject_es.styleInject(css_248z$a);
 
 function DataListTags({ items }) {
     const ref = React.useRef(null);
@@ -115,10 +115,10 @@ 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$8.tags, ref: ref },
+    return (React__default["default"].createElement("div", { className: styles$a.tags, ref: ref },
         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)))),
-        Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$8.tagCount },
+        Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$a.tagCount },
             React__default["default"].createElement(Text.Text, null,
                 "+",
                 visibleItems)))));
@@ -147,6 +147,63 @@ 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.UG8cHUT3Hds- {\n  cursor: pointer;\n}\n\n.fLmJZJJqMcE- > * {\n  font-weight: 500;\n}\n";
+var styles$9 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
+styleInject_es.styleInject(css_248z$9);
+
+var css_248z$8 = ".XWu7WFLqpYw- {\n  position: absolute;\n  bottom: calc((16px * 1) - (16px / 8));\n  bottom: calc(calc(16px * 1) - calc(16px / 8));\n  bottom: calc(var(--space-base) - var(--space-smallest));\n}\n\n.bZLExYQzHAk- {\n  position: absolute;\n  bottom: calc(16px / 2);\n  bottom: var(--space-small);\n}\n";
+var styles$8 = {"arrowUp":"XWu7WFLqpYw-","arrowDown":"bZLExYQzHAk-"};
+styleInject_es.styleInject(css_248z$8);
+
+function SortingArrows({ order }) {
+    const activeColor = "blue";
+    const inactiveColor = "greyBlueLighter";
+    return (React__default["default"].createElement("div", null,
+        React__default["default"].createElement("span", { className: styles$8.arrowUp },
+            React__default["default"].createElement(Icon.Icon, { name: "arrowUp", color: order === "asc" ? activeColor : inactiveColor, size: "small" })),
+        React__default["default"].createElement("span", { className: styles$8.arrowDown },
+            React__default["default"].createElement(Icon.Icon, { name: "arrowDown", color: order === "desc" ? activeColor : inactiveColor, size: "small" }))));
+}
+
+const defaultValues = {
+    title: "",
+    data: [],
+    headers: {},
+    children: [],
+    selected: [],
+};
+const DataListContext = React.createContext(defaultValues);
+function useDataListContext() {
+    return React.useContext(DataListContext);
+}
+
+function DataListHeaderTile({ headers, headerKey, }) {
+    const { sorting } = useDataListContext();
+    const isSortable = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.includes(headerKey);
+    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 },
+        React__default["default"].createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
+        (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey && (React__default["default"].createElement(SortingArrows, { order: sortingState.direction }))));
+    function toggleSorting(sortingKey) {
+        if ((sortingState === null || sortingState === void 0 ? void 0 : sortingState.direction) === "desc") {
+            sorting === null || sorting === void 0 ? void 0 : sorting.onSort(undefined);
+            return;
+        }
+        sorting === null || sorting === void 0 ? void 0 : sorting.onSort({
+            direction: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.direction) === "asc" ? "desc" : "asc",
+            key: sortingKey,
+        });
+    }
+    function handleOnClick() {
+        if (!isSortable)
+            return;
+        toggleSorting(headerKey);
+    }
+}
+
 /**
  * Return the child component that matches the `type` provided
  */
@@ -196,8 +253,7 @@ function generateListItemElements(data) {
  * 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("div", { className: styles$b.headerLabel },
-            React__default["default"].createElement(Text.Text, { variation: "subdued", maxLines: "single", size: "small" }, headers[key]))) })), {});
+    const headerElements = Object.keys(headers).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: React__default["default"].createElement(DataListHeaderTile, { headers: headers, headerKey: key }) })), {});
     return isEmpty__default["default"](headerElements) ? undefined : headerElements;
 }
 function sortSizeProp(sizeProp) {
@@ -236,23 +292,11 @@ function isLayoutVisible({ layoutSize, mediaMatches, sizePropsOfLayouts, }) {
     return isVisibleBreakpoint && largerLayoutIsNotVisible;
 }
 
-const defaultValues = {
-    title: "",
-    data: [],
-    headers: {},
-    children: [],
-    selected: [],
-};
-const DataListContext = React.createContext(defaultValues);
-function useDataListContext() {
-    return React.useContext(DataListContext);
-}
-
 function DataListItemInternal({ children, item, }) {
     const { selected, onSelect } = useDataListContext();
     if (selected !== undefined && onSelect) {
-        return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$b.selectable, {
-                [styles$b.selected]: selected === null || selected === void 0 ? void 0 : selected.length,
+        return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$d.selectable, {
+                [styles$d.selected]: selected === null || selected === void 0 ? void 0 : selected.length,
             }) },
             React__default["default"].createElement(Checkbox.Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange }),
             children));
@@ -398,7 +442,7 @@ function DataListItems({ layouts, mediaMatches, data, }) {
     return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => {
             return (React__default["default"].createElement(React__default["default"].Fragment, null, elementData.map((child, i) => {
                 const item = data[i];
-                return (React__default["default"].createElement("div", { onMouseEnter: () => setHover(item.id), onMouseLeave: () => setHover(undefined), className: styles$b.listItem, key: item.id },
+                return (React__default["default"].createElement("div", { onMouseEnter: () => setHover(item.id), onMouseLeave: () => setHover(undefined), className: styles$d.listItem, key: item.id },
                     React__default["default"].createElement(DataListItemInternal, { item: data[i] }, layout.props.children(child)),
                     React__default["default"].createElement(framerMotion.AnimatePresence, null, hover === item.id && (React__default["default"].createElement(InternalDataListItemActions, { item: item })))));
             })));
@@ -416,7 +460,7 @@ function DataListHeader({ layouts, mediaMatches, headerData, headerVisibility, }
     if (!showHeader || !headerData)
         return React__default["default"].createElement(React__default["default"].Fragment, null);
     return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, renderLayout: layout => {
-            return (React__default["default"].createElement("div", { className: styles$b.headerTitles }, layout.props.children(headerData)));
+            return (React__default["default"].createElement("div", { className: styles$d.headerTitles }, layout.props.children(headerData)));
         }, mediaMatches: mediaMatches }));
 }
 
@@ -432,13 +476,13 @@ function DataListLoadingState({ headers, layouts, mediaMatches, }) {
             if (layout.props.size === "xs") {
                 return React__default["default"].createElement(LoadingStateXSBreakpoint, null);
             }
-            return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingElements.map((child, i) => (React__default["default"].createElement("div", { className: styles$9.loadingItem, key: i, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout.props.children(child))))));
+            return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingElements.map((child, i) => (React__default["default"].createElement("div", { className: styles$b.loadingItem, key: i, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout.props.children(child))))));
         } }));
 }
 function LoadingStateXSBreakpoint() {
     const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(0);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingData.map((_, i) => {
-        return (React__default["default"].createElement("div", { className: styles$9.mobileLoadingState, key: i },
+        return (React__default["default"].createElement("div", { className: styles$b.mobileLoadingState, key: i },
             React__default["default"].createElement(Glimmer.Glimmer.Text, null)));
     })));
 }
@@ -640,8 +684,9 @@ function breakpointToMediaQuery(breakpoint) {
     return `(min-width: ${BREAKPOINT_SIZES[breakpoint]}px)`;
 }
 
-function DataList(props) {
-    var _a;
+function DataList(_a) {
+    var _b;
+    var { sorting } = _a, props = tslib_es6.__rest(_a, ["sorting"]);
     const searchComponent = getCompoundComponent(props.children, DataListSearch);
     const filterComponent = getCompoundComponent(props.children, DataListFilters);
     const layoutComponents = getCompoundComponents(props.children, DataListLayout);
@@ -651,7 +696,9 @@ function DataList(props) {
             filterComponent,
             layoutComponents,
             emptyStateComponents,
-            itemActionComponent }, props), { selected: (_a = props.selected) !== null && _a !== void 0 ? _a : [] }) },
+            itemActionComponent }, props), { selected: (_b = props.selected) !== null && _b !== void 0 ? _b : [], 
+            // T !== DataListObject
+            sorting: sorting }) },
         React__default["default"].createElement(InternalDataList, null)));
 }
 function InternalDataList() {
@@ -662,21 +709,21 @@ function InternalDataList() {
     const initialLoading = loadingState === "initial";
     const showEmptyState = !initialLoading && data.length === 0;
     const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
-    return (React__default["default"].createElement("div", { className: styles$b.wrapper },
-        React__default["default"].createElement("div", { className: styles$b.titleContainer },
+    return (React__default["default"].createElement("div", { className: styles$d.wrapper },
+        React__default["default"].createElement("div", { className: styles$d.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$b.headerFilters },
+            React__default["default"].createElement("div", { className: styles$d.headerFilters },
                 React__default["default"].createElement(InternalDataListFilters, null),
                 React__default["default"].createElement(InternalDataListSearch, null)),
             headerData && (React__default["default"].createElement(DataListHeader, { layouts: layoutComponents, headerData: headerData, headerVisibility: headerVisibility, mediaMatches: mediaMatches }))),
         initialLoading && (React__default["default"].createElement(DataListLoadingState, { headers: headers, layouts: layoutComponents, mediaMatches: mediaMatches })),
         showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
         !initialLoading && (React__default["default"].createElement(DataListItems, { data: data, layouts: layoutComponents, mediaMatches: mediaMatches })),
-        loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$b.filtering },
-            React__default["default"].createElement("div", { className: styles$b.filteringSpinner },
+        loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$d.filtering },
+            React__default["default"].createElement("div", { className: styles$d.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,11 +9,11 @@ var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Glimmer = require('../Glimmer-cfa92a88.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-63267b27.js');
-var Button = require('../Button-7698424c.js');
+var Option = require('../Option-b903e7ac.js');
+var Button = require('../Button-fd8413b2.js');
 var Text = require('../Text-e7ed0974.js');
 require('../Content-2ca1ffe1.js');
-require('../FormField-0f880b07.js');
+require('../FormField-d6138b7f.js');
 require('uuid');
 require('react-hook-form');
 require('../Icon-405a216c.js');

package/dist/DatePicker/index.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DatePicker = require('../DatePicker-2bfdba58.js');
+var DatePicker = require('../DatePicker-b31baae4.js');
 require('react');
 require('classnames');
 require('react-datepicker');
 require('@jobber/hooks/useRefocusOnActivator');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Typography-fd6f932a.js');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/{DatePicker-2bfdba58.js → DatePicker-b31baae4.js}

@@ -6,7 +6,7 @@ var ReactDatePicker = require('react-datepicker');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Typography = require('./Typography-fd6f932a.js');
-var Button = require('./Button-7698424c.js');
+var Button = require('./Button-fd8413b2.js');
 var omit = require('lodash/omit');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/Drawer/index.js

@@ -6,9 +6,9 @@ var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Heading = require('../Heading-a1191b15.js');
-var ButtonDismiss = require('../ButtonDismiss-c7ee94a9.js');
+var ButtonDismiss = require('../ButtonDismiss-82680c7d.js');
 require('../Typography-fd6f932a.js');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/FeatureSwitch/index.js

@@ -10,7 +10,7 @@ var Heading = require('../Heading-a1191b15.js');
 var Text = require('../Text-e7ed0974.js');
 var Content = require('../Content-2ca1ffe1.js');
 var Switch = require('../Switch-e75145cc.js');
-var Button = require('../Button-7698424c.js');
+var Button = require('../Button-fd8413b2.js');
 var Emphasis = require('../Emphasis-76a10790.js');
 var Markdown = require('../Markdown-f6748dcb.js');
 require('../Typography-fd6f932a.js');

package/dist/FormField/index.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormField = require('../FormField-0f880b07.js');
+var FormField = require('../FormField-d6138b7f.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/{FormField-0f880b07.js → FormField-d6138b7f.js}

@@ -6,7 +6,7 @@ var uuid = require('uuid');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var classnames = require('classnames');
-var Button = require('./Button-7698424c.js');
+var Button = require('./Button-fd8413b2.js');
 var Icon = require('./Icon-405a216c.js');
 var Text = require('./Text-e7ed0974.js');
 var InputValidation = require('./InputValidation-b5a3d92c.js');

package/dist/FormatFile/index.js

@@ -2,25 +2,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-7462422e.js');
+var FormatFile = require('../FormatFile-aa1898f9.js');
 require('react');
 require('classnames');
 require('filesize');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-fd6f932a.js');
-require('../ConfirmationModal-5df4ef33.js');
+require('../ConfirmationModal-6b61ebf5.js');
 require('@jobber/hooks/useOnKeyDown');
-require('../Modal-b684b273.js');
+require('../Modal-a9ab9565.js');
 require('react-dom');
 require('framer-motion');
 require('@jobber/hooks/useRefocusOnActivator');
 require('@jobber/hooks/useFocusTrap');
 require('../Heading-a1191b15.js');
-require('../ButtonDismiss-c7ee94a9.js');
+require('../ButtonDismiss-82680c7d.js');
 require('../Content-2ca1ffe1.js');
 require('../Markdown-f6748dcb.js');
 require('react-markdown');

package/dist/{FormatFile-7462422e.js → FormatFile-aa1898f9.js}

@@ -4,8 +4,8 @@ var React = require('react');
 var classnames = require('classnames');
 var getHumanReadableFileSize = require('filesize');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Button = require('./Button-7698424c.js');
-var ConfirmationModal = require('./ConfirmationModal-5df4ef33.js');
+var Button = require('./Button-fd8413b2.js');
+var ConfirmationModal = require('./ConfirmationModal-6b61ebf5.js');
 var Glimmer = require('./Glimmer-cfa92a88.js');
 var Icon = require('./Icon-405a216c.js');
 var Typography = require('./Typography-fd6f932a.js');

package/dist/Gallery/index.js

@@ -5,19 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var LightBox = require('../LightBox-b59ee23b.js');
-var FormatFile = require('../FormatFile-7462422e.js');
-var Button = require('../Button-7698424c.js');
+var LightBox = require('../LightBox-437a1c8b.js');
+var FormatFile = require('../FormatFile-aa1898f9.js');
+var Button = require('../Button-fd8413b2.js');
 require('framer-motion');
 require('react-dom');
 require('lodash/debounce');
 require('@jobber/hooks/useRefocusOnActivator');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useFocusTrap');
-require('../ButtonDismiss-c7ee94a9.js');
+require('../ButtonDismiss-82680c7d.js');
 require('filesize');
-require('../ConfirmationModal-5df4ef33.js');
-require('../Modal-b684b273.js');
+require('../ConfirmationModal-6b61ebf5.js');
+require('../Modal-a9ab9565.js');
 require('../Heading-a1191b15.js');
 require('../Typography-fd6f932a.js');
 require('../Content-2ca1ffe1.js');

package/dist/InputAvatar/index.js

@@ -6,9 +6,9 @@ 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-1aa30ee1.js');
-var InputFile = require('../InputFile-54d4531d.js');
+var InputFile = require('../InputFile-2a06c2c0.js');
 var ProgressBar = require('../ProgressBar-5dfc1885.js');
-var Button = require('../Button-7698424c.js');
+var Button = require('../Button-fd8413b2.js');
 require('classnames');
 require('color');
 require('../Icon-405a216c.js');

package/dist/InputDate/index.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var omit = require('lodash/omit');
 var React = require('react');
-var FormField = require('../FormField-0f880b07.js');
-var DatePicker = require('../DatePicker-2bfdba58.js');
+var FormField = require('../FormField-d6138b7f.js');
+var DatePicker = require('../DatePicker-b31baae4.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/InputEmail/index.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-0f880b07.js');
+var FormField = require('../FormField-d6138b7f.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/InputFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputFile = require('../InputFile-54d4531d.js');
+var InputFile = require('../InputFile-2a06c2c0.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('classnames');
@@ -10,7 +10,7 @@ require('react-dropzone');
 require('axios');
 require('uuid');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/{InputFile-54d4531d.js → InputFile-2a06c2c0.js}

@@ -7,7 +7,7 @@ var reactDropzone = require('react-dropzone');
 var axios = require('axios');
 var uuid = require('uuid');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Button = require('./Button-7698424c.js');
+var Button = require('./Button-fd8413b2.js');
 var Content = require('./Content-2ca1ffe1.js');
 var Typography = require('./Typography-fd6f932a.js');
 

package/dist/InputNumber/index.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputNumber = require('../InputNumber-49873d31.js');
+var InputNumber = require('../InputNumber-07b03067.js');
 require('react');
-require('../FormField-0f880b07.js');
+require('../FormField-d6138b7f.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/{InputNumber-49873d31.js → InputNumber-07b03067.js}

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

package/dist/InputPassword/index.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-0f880b07.js');
+var FormField = require('../FormField-d6138b7f.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/InputPhoneNumber/index.js

@@ -6,10 +6,10 @@ 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-0f880b07.js');
+var FormField = require('../FormField-d6138b7f.js');
 require('uuid');
 require('classnames');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/InputText/index.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-bb03f6d1.js');
+var InputText = require('../InputText-d1a52550.js');
 require('react');
-require('../FormField-0f880b07.js');
+require('../FormField-d6138b7f.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/{InputText-bb03f6d1.js → InputText-d1a52550.js}

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

package/dist/InputTime/index.js

@@ -6,12 +6,12 @@ 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-0f880b07.js');
+var FormField = require('../FormField-d6138b7f.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/LightBox/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var LightBox = require('../LightBox-b59ee23b.js');
+var LightBox = require('../LightBox-437a1c8b.js');
 require('react');
 require('framer-motion');
 require('react-dom');
@@ -11,8 +11,8 @@ require('@jobber/hooks/useRefocusOnActivator');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useFocusTrap');
 require('../style-inject.es-9d2f5f4e.js');
-require('../ButtonDismiss-c7ee94a9.js');
-require('../Button-7698424c.js');
+require('../ButtonDismiss-82680c7d.js');
+require('../Button-fd8413b2.js');
 require('classnames');
 require('react-router-dom');
 require('../Icon-405a216c.js');

package/dist/{LightBox-b59ee23b.js → LightBox-437a1c8b.js}

@@ -8,8 +8,8 @@ var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var ButtonDismiss = require('./ButtonDismiss-c7ee94a9.js');
-var Button = require('./Button-7698424c.js');
+var ButtonDismiss = require('./ButtonDismiss-82680c7d.js');
+var Button = require('./Button-fd8413b2.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Menu/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Menu = require('../Menu-2b5fd0b2.js');
+var Menu = require('../Menu-51f8712f.js');
 require('react');
 require('uuid');
 require('classnames');
@@ -10,7 +10,7 @@ require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/{Menu-2b5fd0b2.js → Menu-51f8712f.js}

@@ -7,7 +7,7 @@ var framerMotion = require('framer-motion');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Button = require('./Button-7698424c.js');
+var Button = require('./Button-fd8413b2.js');
 var Typography = require('./Typography-fd6f932a.js');
 var Icon = require('./Icon-405a216c.js');
 

package/dist/Modal/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Modal = require('../Modal-b684b273.js');
+var Modal = require('../Modal-a9ab9565.js');
 require('react');
 require('react-dom');
 require('classnames');
@@ -13,11 +13,11 @@ require('@jobber/hooks/useFocusTrap');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Heading-a1191b15.js');
 require('../Typography-fd6f932a.js');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../ButtonDismiss-c7ee94a9.js');
+require('../ButtonDismiss-82680c7d.js');
 
 
 

package/dist/{Modal-b684b273.js → Modal-a9ab9565.js}

@@ -9,8 +9,8 @@ var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Heading = require('./Heading-a1191b15.js');
-var Button = require('./Button-7698424c.js');
-var ButtonDismiss = require('./ButtonDismiss-c7ee94a9.js');
+var Button = require('./Button-fd8413b2.js');
+var ButtonDismiss = require('./ButtonDismiss-82680c7d.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/{Option-63267b27.js → Option-b903e7ac.js}

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

package/dist/Page/index.js

@@ -10,8 +10,8 @@ var Heading = require('../Heading-a1191b15.js');
 var Text = require('../Text-e7ed0974.js');
 var Content = require('../Content-2ca1ffe1.js');
 var Markdown = require('../Markdown-f6748dcb.js');
-var Button = require('../Button-7698424c.js');
-var Menu = require('../Menu-2b5fd0b2.js');
+var Button = require('../Button-fd8413b2.js');
+var Menu = require('../Menu-51f8712f.js');
 var Emphasis = require('../Emphasis-76a10790.js');
 require('../Typography-fd6f932a.js');
 require('react-markdown');

package/dist/Popover/index.js

@@ -6,8 +6,8 @@ var React = require('react');
 var reactPopper = require('react-popper');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var ButtonDismiss = require('../ButtonDismiss-c7ee94a9.js');
-require('../Button-7698424c.js');
+var ButtonDismiss = require('../ButtonDismiss-82680c7d.js');
+require('../Button-fd8413b2.js');
 require('classnames');
 require('react-router-dom');
 require('../Icon-405a216c.js');

package/dist/RecurringSelect/index.js

@@ -9,14 +9,14 @@ var RadioGroup = require('../RadioGroup-8e76d20b.js');
 var Text = require('../Text-e7ed0974.js');
 require('classnames');
 require('../Typography-fd6f932a.js');
-var Option = require('../Option-63267b27.js');
-var InputNumber = require('../InputNumber-49873d31.js');
+var Option = require('../Option-b903e7ac.js');
+var InputNumber = require('../InputNumber-07b03067.js');
 var InputGroup = require('../InputGroup-3fdde16b.js');
 var Content = require('../Content-2ca1ffe1.js');
-require('../FormField-0f880b07.js');
+require('../FormField-d6138b7f.js');
 require('../tslib.es6-5b8768b7.js');
 require('react-hook-form');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/Select/index.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Option = require('../Option-63267b27.js');
+var Option = require('../Option-b903e7ac.js');
 require('react');
-require('../FormField-0f880b07.js');
+require('../FormField-d6138b7f.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-7698424c.js');
+require('../Button-fd8413b2.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/Toast/index.js

@@ -7,7 +7,7 @@ var client = require('react-dom/client');
 var framerMotion = require('framer-motion');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Icon = require('../Icon-405a216c.js');
-var Button = require('../Button-7698424c.js');
+var Button = require('../Button-fd8413b2.js');
 var Typography = require('../Typography-fd6f932a.js');
 require('@jobber/design');
 require('classnames');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.36.0",
+  "version": "4.38.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,7 +19,7 @@
     "dist/*"
   ],
   "dependencies": {
-    "@jobber/design": "^0.44.4",
+    "@jobber/design": "^0.45.0",
     "@jobber/formatters": "*",
     "@jobber/hooks": "^2.3.0",
     "@popperjs/core": "^2.0.6",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "0bc5252f5ef1f24f7a46fbe49204084bc4469b98"
+  "gitHead": "3784b9f6104838ae10ea72eacf9119b8e1f43663"
 }