@jobber/components 4.49.1 → 4.49.2-JOB-80005.14

package/Flex.d.ts

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

package/Flex.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var Flex = require("./dist/Flex");
+
+Object.keys(Flex).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return Flex[key];
+    },
+  });
+});

package/dist/Banner/Banner.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 import { IconNames } from "@jobber/design";
 import { ButtonProps } from "../Button";
 export type BannerType = "notice" | "success" | "warning" | "error";
-interface BannerProps {
+export interface BannerProps {
     readonly children: ReactNode;
     readonly type: BannerType;
     /**
@@ -21,4 +21,3 @@ interface BannerProps {
     onDismiss?(): void;
 }
 export declare function Banner({ children, type, primaryAction, dismissible, icon, onDismiss, }: BannerProps): JSX.Element;
-export {};

package/dist/Banner/index.d.ts

@@ -1 +1 @@
-export { Banner, BannerType } from "./Banner";
+export { Banner, BannerType, BannerProps } from "./Banner";

package/dist/Banner/index.js

@@ -69,7 +69,7 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
         onDismiss && onDismiss();
     }
 }
-function BannerChildren({ children }) {
+function BannerChildren({ children, }) {
     if (!children)
         return React__default["default"].createElement(React__default["default"].Fragment, null);
     if (children && typeof children === "string") {

package/dist/{Chip-53832bb2.js → Chip-4f7af21e.js}

@@ -8,7 +8,7 @@ var useAssert = require('@jobber/hooks/useAssert');
 var Icon = require('./Icon-405a216c.js');
 var Avatar = require('./Avatar-1aa30ee1.js');
 var Typography = require('./Typography-83915c54.js');
-var Tooltip = require('./Tooltip-d5257798.js');
+var Tooltip = require('./Tooltip-ae33a335.js');
 var sortBy = require('lodash/sortBy');
 var useLiveAnnounce = require('@jobber/hooks/useLiveAnnounce');
 var debounce = require('lodash/debounce');

package/dist/Chips/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Chip = require('../Chip-53832bb2.js');
+var Chip = require('../Chip-4f7af21e.js');
 require('uuid');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
@@ -13,14 +13,14 @@ require('@jobber/design');
 require('../Avatar-1aa30ee1.js');
 require('color');
 require('../Typography-83915c54.js');
-require('../Tooltip-d5257798.js');
+require('../Tooltip-ae33a335.js');
 require('react-dom');
 require('framer-motion');
 require('react-popper');
-require('../Text-54334431.js');
 require('lodash/sortBy');
 require('@jobber/hooks/useLiveAnnounce');
 require('lodash/debounce');
+require('../Text-54334431.js');
 require('../Button-db6114a6.js');
 require('react-router-dom');
 require('../Spinner-9d8fc7ff.js');

package/dist/Combobox/Combobox.d.ts

@@ -1,18 +1,7 @@
-import { ReactElement } from "react";
+import { ComboboxProps } from "@jobber/components/Combobox/Combobox.types";
 import { ComboboxContent } from "./components/ComboboxContent";
 import { ComboboxAction } from "./components/ComboboxAction";
 import { ComboboxTriggerButton, ComboboxTriggerChip } from "./components/ComboboxTrigger";
-export interface ComboboxProps {
-    readonly children: ReactElement | ReactElement[];
-    /**
-     * When `true`, `Combobox` will allow for multiple selections
-     *
-     * @default false
-     */
-    readonly multiSelect?: boolean;
-}
-export declare const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox can only have one Trigger element";
-export declare const COMBOBOX_REQUIRED_CHILDREN_ERROR_MESSAGE = "Combobox must have a Trigger and Combobox.Content element";
 export declare const Combobox: {
     (props: ComboboxProps): JSX.Element;
     TriggerButton: typeof ComboboxTriggerButton;

package/dist/Combobox/Combobox.types.d.ts

@@ -1,4 +1,15 @@
+import { Dispatch, ReactElement, SetStateAction } from "react";
+import { XOR } from "ts-xor";
 import { ButtonProps } from "../Button";
+export interface ComboboxProps {
+    readonly children: ReactElement | ReactElement[];
+    /**
+     * When `true`, `Combobox` will allow for multiple selections
+     *
+     * @default false
+     */
+    readonly multiSelect?: boolean;
+}
 export interface ComboboxTriggerProps {
     /**
      * The label text of the trigger.
@@ -9,6 +20,137 @@ export interface ComboboxTriggerButtonProps extends ComboboxTriggerProps, Pick<B
 }
 export type ComboboxTriggerChipProps = ComboboxTriggerProps;
 export interface ComboboxOption {
+    /**
+     * A unique identifier for the option.
+     */
     id: string | number;
+    /**
+     * The value to be visually displayed in the Combobox options list.
+     */
     label: string;
 }
+interface ComboboxCloseProps {
+    /**
+     * Callback function invoked upon the selection of an option. Provides the selected option(s) as an argument.
+     */
+    readonly onSelect: (selection: ComboboxOption[]) => void;
+}
+interface ComboboxSelectProps {
+    /**
+     * Callback function invoked upon the Combobox menu closing. Provides the selected option(s) as an argument.
+     */
+    readonly onClose: (selection: ComboboxOption[]) => void;
+}
+interface ComboboxContentBaseProps {
+    /**
+     * List of selectable options to display.
+     */
+    readonly options: ComboboxOption[];
+    /**
+     * Optional action button(s) to display at the bottom of the list.
+     */
+    readonly children?: ReactElement | ReactElement[];
+    /**
+     * Placeholder text to display in the search input. Defaults to "Search".
+     */
+    readonly searchPlaceholder?: string;
+    /**
+     * The selected options of the Combobox.
+     */
+    readonly selected: ComboboxOption[];
+    /**
+     * The encapsulating noun for the content of the combobox. Used
+     * in the empty state, and search placeholder. Should be pluralized.
+     */
+    readonly subjectNoun?: string;
+}
+export type ComboboxContentProps = ComboboxContentBaseProps & XOR<ComboboxCloseProps, ComboboxSelectProps>;
+export interface ComboboxSearchProps {
+    /**
+     * The placeholder for the search input.
+     */
+    placeholder?: string;
+    /**
+     * The value of the search input
+     */
+    searchValue: string;
+    /**
+     * The open state of the Combobox listbox.
+     */
+    open: boolean;
+    /**
+     * Setter for the search input value.
+     */
+    setSearchValue: Dispatch<SetStateAction<string>>;
+}
+export interface ComboboxHeaderProps {
+    /**
+     * Does the Combobox have any options visible in the list.
+     */
+    readonly hasOptionsVisible: boolean;
+    /**
+     * The noun to be used in the header label.
+     */
+    readonly subjectNoun?: string;
+    /**
+     * The number of selected options.
+     */
+    readonly selectedCount: number;
+    /**
+     * The function to call when the clear all button is clicked.
+     */
+    readonly onClearAll: () => void;
+    /**
+     * The function to call when the select all button is clicked.
+     */
+    readonly onSelectAll: () => void;
+}
+export interface ComboboxListProps {
+    /**
+     * The options to display in the list. May be the full set of the Combobox or could be filtered.
+     */
+    readonly options: ComboboxOption[];
+    /**
+     * Used to determine if the empty state should be shown and given priority over the options list.
+     */
+    readonly showEmptyState: boolean;
+    /**
+     * The currently selected options.
+     */
+    readonly selected: ComboboxOption[];
+    /**
+     * A ref to the list element.
+     */
+    readonly optionsListRef: React.RefObject<HTMLUListElement>;
+    /**
+     * Setter for the first selected element, which is used to scroll the list to the first selected element on re-opening.
+     */
+    readonly setFirstSelectedElement: React.Dispatch<SetStateAction<HTMLElement | null>>;
+    /**
+     * The callback function to call when an option is selected.
+     */
+    readonly selectionHandler: (option: ComboboxOption) => void;
+    /**
+     * The current search term. Used in the no results message.
+     */
+    readonly searchValue: string;
+    /**
+     * Determines if it is a single selection or multi selection Combobox.
+     */
+    readonly multiselect: boolean;
+    /**
+     * The noun to be used in the empty state message.
+     */
+    readonly subjectNoun?: string;
+}
+export interface ComboboxActionProps {
+    /**
+     * The function to call when the action is clicked.
+     */
+    onClick(event: React.MouseEvent<HTMLButtonElement>): void;
+    /**
+     * The label text of the action.
+     */
+    readonly label: string;
+}
+export {};

package/dist/Combobox/components/ComboboxAction/ComboboxAction.d.ts

@@ -1,12 +1,3 @@
-import React from "react";
-export interface ComboboxActionProps {
-    /**
-     * The function to call when the action is clicked.
-     */
-    onClick(event: React.MouseEvent<HTMLButtonElement>): void;
-    /**
-     * The label text of the action.
-     */
-    readonly label: string;
-}
+/// <reference types="react" />
+import { ComboboxActionProps } from "@jobber/components/Combobox/Combobox.types";
 export declare function ComboboxAction(props: ComboboxActionProps): JSX.Element;

package/dist/Combobox/components/ComboboxAction/index.d.ts

@@ -1 +1 @@
-export { ComboboxAction, ComboboxActionProps } from "./ComboboxAction";
+export { ComboboxAction } from "./ComboboxAction";

package/dist/Combobox/components/ComboboxContent/ComboboxContent.d.ts

@@ -1,44 +1,3 @@
-import { ReactElement } from "react";
-import { XOR } from "ts-xor";
-import { ComboboxOption } from "../../Combobox.types";
-interface ComboboxCloseProps {
-    /**
-     * Callback function invoked upon the selection of an option. Provides the selected option(s) as an argument.
-     */
-    readonly onSelect: (selection: ComboboxOption[]) => void;
-}
-interface ComoboboxSelectProps {
-    /**
-     *
-     * Callback function invoked upon the Combobox menu closing. Provides the selected option(s) as an argument.
-     */
-    readonly onClose: (selection: ComboboxOption[]) => void;
-}
-interface ComboboxContentBaseProps {
-    /**
-     * List of selectable options to display.
-     */
-    readonly options: ComboboxOption[];
-    /**
-     * Optional action button(s) to display at the bottom of the list.
-     */
-    readonly children?: ReactElement | ReactElement[];
-    /**
-     * Placeholder text to display in the search input. Defaults to "Search".
-     */
-    readonly searchPlaceholder?: string;
-    /**
-     * pre selected option
-     * @default ""
-     * @type string
-     */
-    readonly selected: ComboboxOption[];
-    /**
-     * The encapsulating noun for the content of the combobox. Used
-     * in the empty state, and search placeholder. Should be pluralized.
-     */
-    readonly subjectNoun?: string;
-}
-type ComboboxContentProps = ComboboxContentBaseProps & XOR<ComboboxCloseProps, ComoboboxSelectProps>;
+/// <reference types="react" />
+import { ComboboxContentProps } from "@jobber/components/Combobox/Combobox.types";
 export declare function ComboboxContent(props: ComboboxContentProps): JSX.Element;
-export {};

package/dist/Combobox/components/ComboboxContent/ComboboxContentHeader/ComboboxContentHeader.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ComboboxHeaderProps } from "@jobber/components/Combobox/Combobox.types";
+export declare function ComboboxContentHeader(props: ComboboxHeaderProps): JSX.Element;

package/dist/Combobox/components/ComboboxContent/ComboboxContentHeader/index.d.ts

@@ -0,0 +1 @@
+export { ComboboxContentHeader } from "./ComboboxContentHeader";

package/dist/Combobox/components/ComboboxContent/ComboboxContentList/ComboboxContentList.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ComboboxListProps } from "@jobber/components/Combobox/Combobox.types";
+export declare function ComboboxContentList(props: ComboboxListProps): JSX.Element;

package/dist/Combobox/components/ComboboxContent/ComboboxContentList/index.d.ts

@@ -0,0 +1 @@
+export { ComboboxContentList } from "./ComboboxContentList";

package/dist/Combobox/components/ComboboxContent/ComboboxContentSearch/ComboboxContentSearch.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ComboboxSearchProps } from "@jobber/components/Combobox/Combobox.types";
+export declare function ComboboxContentSearch(props: ComboboxSearchProps): JSX.Element;

package/dist/Combobox/components/ComboboxContent/ComboboxContentSearch/index.d.ts

@@ -0,0 +1 @@
+export { ComboboxContentSearch } from "./ComboboxContentSearch";

package/dist/Combobox/components/ComboboxTrigger/ComboboxTriggerButton/ComboboxTriggerButton.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { ComboboxTriggerButtonProps } from "../../../Combobox.types";
+import { ComboboxTriggerButtonProps } from "@jobber/components/Combobox/Combobox.types";
 export declare function ComboboxTriggerButton(props: ComboboxTriggerButtonProps): JSX.Element;

package/dist/Combobox/components/ComboboxTrigger/ComboboxTriggerChip/ComboboxTriggerChip.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { ComboboxTriggerChipProps } from "../../../Combobox.types";
+import { ComboboxTriggerChipProps } from "@jobber/components/Combobox/Combobox.types";
 export declare function ComboboxTriggerChip(props: ComboboxTriggerChipProps): JSX.Element;

package/dist/Combobox/hooks/useComboboxAccessibility.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ComboboxOption } from "../Combobox.types";
+import { ComboboxOption } from "@jobber/components/Combobox/Combobox.types";
 export declare function useComboboxAccessibility(selectionCallback: (selection: ComboboxOption) => void, filteredOptions: ComboboxOption[], optionsListRef: React.RefObject<HTMLUListElement>, open: boolean, setOpen: (open: boolean) => void, wrapperRef: React.RefObject<HTMLDivElement>): {
     popperRef: React.RefObject<HTMLDivElement>;
     popperStyles: {

package/dist/Combobox/hooks/useComboboxContent.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ComboboxOption } from "../Combobox.types";
+import { ComboboxOption } from "@jobber/components/Combobox/Combobox.types";
 interface useComboboxContent {
     searchValue: string;
     setSearchValue: React.Dispatch<React.SetStateAction<string>>;
@@ -7,7 +7,7 @@ interface useComboboxContent {
     filteredOptions: ComboboxOption[];
     optionsListRef: React.RefObject<HTMLUListElement>;
     selectedOptions: ComboboxOption[];
-    setInternalSelected: (selected: ComboboxOption[]) => void;
+    optionsSelectionHandler: (selected: ComboboxOption[]) => void;
 }
-export declare function useComboboxContent(options: ComboboxOption[], open: boolean, selected: ComboboxOption[], onClose: ((selection: ComboboxOption[]) => void) | undefined): useComboboxContent;
+export declare function useComboboxContent(options: ComboboxOption[], open: boolean, selected: ComboboxOption[], onClose: ((selection: ComboboxOption[]) => void) | undefined, onSelect: ((selection: ComboboxOption[]) => void) | undefined): useComboboxContent;
 export {};

package/dist/Combobox/hooks/useComboboxValidation.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export declare const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox can only have one Trigger element";
+export declare const COMBOBOX_REQUIRED_CHILDREN_ERROR_MESSAGE = "Combobox must have a Trigger and Combobox.Content element";
+export declare function useComboboxValidation(children: ReactNode): {
+    triggerElement: ReactNode;
+    contentElement: ReactNode;
+};

package/dist/Combobox/index.d.ts

@@ -1,3 +1,3 @@
-export { Combobox, ComboboxProps, COMBOBOX_REQUIRED_CHILDREN_ERROR_MESSAGE, COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE, } from "./Combobox";
+export { Combobox } from "./Combobox";
 export { ComboboxContextProvider } from "./ComboboxProvider";
-export { ComboboxOption } from "./Combobox.types";
+export { ComboboxOption, ComboboxProps } from "./Combobox.types";

package/dist/Combobox/index.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var useAssert = require('@jobber/hooks/useAssert');
 var classnames = require('classnames');
 var ReactDOM = require('react-dom');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Icon = require('../Icon-405a216c.js');
 var Text = require('../Text-54334431.js');
+var Typography = require('../Typography-83915c54.js');
+var Button = require('../Button-db6114a6.js');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var reactPopper = require('react-popper');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Typography = require('../Typography-83915c54.js');
-var Button = require('../Button-db6114a6.js');
+var useAssert = require('@jobber/hooks/useAssert');
 require('@jobber/design');
 require('react-router-dom');
 
@@ -24,15 +24,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
-var css_248z$5 = ".m1w5vdUZ6rQ- {\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  max-width: var(--popover--width);\n  min-width: calc((16px * 4) * 3.75);\n  min-width: calc(calc(16px * 4) * 3.75);\n  min-width: calc(var(--space-extravagant) * 3.75);\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 / 2);\n  margin-top: var(--space-small);\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  overflow: scroll;\n  overflow-y: auto;\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\n}\n\n/* CAUTION: Tests for content visibility assume this class' presence hides the content\n* so please be careful if you change this class name, or the css rules within.\n*/\n\n.m1w5vdUZ6rQ-.Zlkv2HA096A- {\n  display: none;\n  visibility: hidden;\n}\n\n.YQry-Rd6zfQ- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: sticky;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n  bottom: 0;\n  width: 100%;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.TcpqL34s4lI- {\n  padding-bottom: calc(16px / 2);\n  padding-bottom: var(--space-small);\n}\n";
-var styles$5 = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
-styleInject_es.styleInject(css_248z$5);
+var css_248z$6 = ".m1w5vdUZ6rQ- {\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  max-width: var(--popover--width);\n  min-width: calc((16px * 4) * 3.75);\n  min-width: calc(calc(16px * 4) * 3.75);\n  min-width: calc(var(--space-extravagant) * 3.75);\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 / 2);\n  margin-top: var(--space-small);\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  overflow: scroll;\n  overflow-y: auto;\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\n}\n\n/* CAUTION: Tests for content visibility assume this class' presence hides the content\n* so please be careful if you change this class name, or the css rules within.\n*/\n\n.m1w5vdUZ6rQ-.Zlkv2HA096A- {\n  display: none;\n  visibility: hidden;\n}\n\n.YQry-Rd6zfQ- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: sticky;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n  bottom: 0;\n  width: 100%;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.TcpqL34s4lI- {\n  padding-bottom: calc(16px / 2);\n  padding-bottom: var(--space-small);\n}\n";
+var styles$6 = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
+styleInject_es.styleInject(css_248z$6);
 
-var css_248z$4 = ".ifwwZOYTf8U- {\n  position: relative;\n}\n\n.gIbHknFkZLI- {\n  width: 100%;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  padding-right: calc((16px * 1.5) * 2.25);\n  padding-right: calc(calc(16px * 1.5) * 2.25);\n  padding-right: calc(var(--space-large) * 2.25);\n  border: none;\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\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}\n\n.dZmEG-amk2U- {\n  position: absolute;\n  top: 50%;\n  right: calc(16px * 1);\n  right: var(--space-base);\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  padding: 0;\n  border: none;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n}\n\n.dZmEG-amk2U-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n";
-var styles$4 = {"search":"ifwwZOYTf8U-","searchInput":"gIbHknFkZLI-","clearSearch":"dZmEG-amk2U-"};
-styleInject_es.styleInject(css_248z$4);
+var css_248z$5 = ".MIyb-oFZg9w- {\n  position: relative;\n}\n\n.WZPK91I4aJs- {\n  width: 100%;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  padding-right: calc((16px * 1.5) * 2.25);\n  padding-right: calc(calc(16px * 1.5) * 2.25);\n  padding-right: calc(var(--space-large) * 2.25);\n  border: none;\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\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}\n\n._7loHrVUe-Rk- {\n  position: absolute;\n  top: 50%;\n  right: calc(16px * 1);\n  right: var(--space-base);\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  padding: 0;\n  border: none;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n}\n\n._7loHrVUe-Rk-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n";
+var styles$5 = {"search":"MIyb-oFZg9w-","searchInput":"WZPK91I4aJs-","clearSearch":"_7loHrVUe-Rk-"};
+styleInject_es.styleInject(css_248z$5);
 
-function ComboboxSearch(props) {
+function ComboboxContentSearch(props) {
     const searchRef = React.useRef(null);
     React.useEffect(() => {
         if (props.open) {
@@ -42,9 +42,9 @@ function ComboboxSearch(props) {
             }, 0);
         }
     }, [props.open]);
-    return (React__default["default"].createElement("div", { className: styles$4.search },
-        React__default["default"].createElement("input", { type: "search", ref: searchRef, className: styles$4.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
-        props.searchValue && (React__default["default"].createElement("button", { className: styles$4.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
+    return (React__default["default"].createElement("div", { className: styles$5.search },
+        React__default["default"].createElement("input", { type: "search", ref: searchRef, className: styles$5.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
+        props.searchValue && (React__default["default"].createElement("button", { className: styles$5.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
             React__default["default"].createElement(Icon.Icon, { name: "remove", size: "small" })))));
     function clearSearch() {
         var _a;
@@ -56,14 +56,14 @@ function ComboboxSearch(props) {
     }
 }
 
-var css_248z$3 = "._5n7VvEn39-Y- {\n  position: relative;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n}\n\n.KhX5VfZjAog- {\n  display: -ms-flexbox;\n  display: flex;\n  max-height: calc((16px / 2) * 33.33);\n  max-height: calc(calc(16px / 2) * 33.33);\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: scroll;\n  list-style: none;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.NNCJVHYx6lc- {\n  display: -ms-flexbox;\n  display: flex;\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  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.NNCJVHYx6lc-:hover,\n.NNCJVHYx6lc-:focus {\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n}\n\n.NNCJVHYx6lc-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n\n._2IRm1sf-TUU-,\n.DTuoA8WPNzc- {\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n}\n\n._5n7VvEn39-Y-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: calc(16px / 2);\n  bottom: var(--space-small);\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n}\n\n._5n7VvEn39-Y-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: calc(16px / 2);\n  top: var(--space-small);\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n";
-var styles$3 = {"container":"_5n7VvEn39-Y-","optionsList":"KhX5VfZjAog-","option":"NNCJVHYx6lc-","filterMessage":"_2IRm1sf-TUU-","emptyStateMessage":"DTuoA8WPNzc-"};
-styleInject_es.styleInject(css_248z$3);
+var css_248z$4 = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n}\n\n.TwoTCjgcssc- {\n  display: -ms-flexbox;\n  display: flex;\n  max-height: calc((16px / 2) * 33.33);\n  max-height: calc(calc(16px / 2) * 33.33);\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: scroll;\n  list-style: none;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n._2LVD-wjMRfQ- {\n  display: -ms-flexbox;\n  display: flex;\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  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._2LVD-wjMRfQ-:hover,\n._2LVD-wjMRfQ-:focus {\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n}\n\n._2LVD-wjMRfQ-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n\n._8T5M7MGwCRE-,\n._4y5NXkNeIQM- {\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n}\n\n.SgMzjOcdE-E-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: calc(16px / 2);\n  bottom: var(--space-small);\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n}\n\n.SgMzjOcdE-E-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: calc(16px / 2);\n  top: var(--space-small);\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n";
+var styles$4 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","option":"_2LVD-wjMRfQ-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-"};
+styleInject_es.styleInject(css_248z$4);
 
-function ComboboxList(props) {
+function ComboboxContentList(props) {
     let hasSeenFirstSelected = false;
-    return (React__default["default"].createElement("div", { className: styles$3.container },
-        !props.showEmptyState && props.options.length > 0 && (React__default["default"].createElement("ul", { className: styles$3.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef }, !props.showEmptyState &&
+    return (React__default["default"].createElement("div", { className: styles$4.container },
+        !props.showEmptyState && props.options.length > 0 && (React__default["default"].createElement("ul", { className: styles$4.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef }, !props.showEmptyState &&
             props.options.map(option => {
                 const isSelected = props.selected.some(selection => selection.id.toString() === option.id.toString());
                 return (React__default["default"].createElement("li", { ref: listItem => {
@@ -71,15 +71,15 @@ function ComboboxList(props) {
                             props.setFirstSelectedElement(listItem);
                             hasSeenFirstSelected = true;
                         }
-                    }, key: option.id, tabIndex: -1, role: "option", "aria-selected": isSelected, onClick: () => props.selectionHandler(option), className: classnames__default["default"](styles$3.option) },
+                    }, key: option.id, tabIndex: -1, role: "option", "aria-selected": isSelected, onClick: () => props.selectionHandler(option), className: classnames__default["default"](styles$4.option) },
                     option.label,
                     isSelected && React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" })));
             }))),
-        !props.showEmptyState && props.options.length === 0 && (React__default["default"].createElement("div", { className: styles$3.filterMessage },
+        !props.showEmptyState && props.options.length === 0 && (React__default["default"].createElement("div", { className: styles$4.filterMessage },
             React__default["default"].createElement(Text.Text, { variation: "subdued" },
                 "No results for ",
                 `“${props.searchValue}”`))),
-        props.showEmptyState && (React__default["default"].createElement("div", { className: styles$3.emptyStateMessage },
+        props.showEmptyState && (React__default["default"].createElement("div", { className: styles$4.emptyStateMessage },
             React__default["default"].createElement(Text.Text, { variation: "subdued" }, getZeroIndexStateText(props.subjectNoun))))));
 }
 function getZeroIndexStateText(subjectNoun) {
@@ -89,6 +89,30 @@ function getZeroIndexStateText(subjectNoun) {
     return "No options yet";
 }
 
+var css_248z$3 = ".Q-mwo-g5Fi8- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: calc(16px * 1) calc(16px / 2) 0 calc(16px * 1);\n  padding: var(--space-base) var(--space-small) 0 var(--space-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n";
+var styles$3 = {"header":"Q-mwo-g5Fi8-"};
+styleInject_es.styleInject(css_248z$3);
+
+function ComboboxContentHeader(props) {
+    const hasSelected = props.selectedCount > 0;
+    const actionLabel = hasSelected ? "Clear" : "Select all";
+    const label = getLabel(hasSelected, props.selectedCount, props.subjectNoun);
+    const handleSelectAll = hasSelected ? props.onClearAll : props.onSelectAll;
+    const showAction = hasSelected || props.hasOptionsVisible;
+    return (React__default["default"].createElement("div", { className: styles$3.header, "data-testid": "ATL-Combobox-Header" },
+        React__default["default"].createElement(Typography.Typography, { textColor: "heading", fontWeight: "semiBold" }, label),
+        showAction && (React__default["default"].createElement(Button.Button, { size: "small", label: actionLabel, type: "tertiary", onClick: handleSelectAll }))));
+}
+function getLabel(hasSelected, count, subjectNoun) {
+    if (hasSelected) {
+        return `${count} selected`;
+    }
+    if (subjectNoun) {
+        return `Select ${subjectNoun}`;
+    }
+    return "Select";
+}
+
 var css_248z$2 = ".W8qMZnORYxI- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  background-color: transparent;\n}\n";
 var styles$2 = {"overlay":"W8qMZnORYxI-"};
 styleInject_es.styleInject(css_248z$2);
@@ -104,13 +128,14 @@ function ComboboxContextProvider(props) {
             props.children)));
 }
 
-function useComboboxContent(options, open, selected, onClose) {
+function useComboboxContent(options, open, selected, onClose, onSelect) {
     const [searchValue, setSearchValue] = React.useState("");
     const [firstSelectedElement, setFirstSelectedElement] = React.useState(null);
     const optionsListRef = React.useRef(null);
     const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
     const [internalSelected, setInternalSelected] = React.useState(selected);
     const selectedOptions = onClose ? internalSelected : selected;
+    const optionsSelectionHandler = onSelect ? onSelect : setInternalSelected;
     React.useEffect(() => {
         if (!open && onClose) {
             onClose(selectedOptions);
@@ -135,7 +160,7 @@ function useComboboxContent(options, open, selected, onClose) {
         filteredOptions,
         optionsListRef,
         selectedOptions,
-        setInternalSelected,
+        optionsSelectionHandler,
     };
 }
 
@@ -218,24 +243,26 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
 function ComboboxContent(props) {
     const { open, setOpen, wrapperRef, multiselect } = React__default["default"].useContext(ComboboxContext);
     const optionsExist = props.options.length > 0;
-    const { searchValue, setSearchValue, setFirstSelectedElement, filteredOptions, optionsListRef, selectedOptions, setInternalSelected, } = useComboboxContent(props.options, open, props.selected, props.onClose);
+    const { searchValue, setSearchValue, setFirstSelectedElement, filteredOptions, optionsListRef, selectedOptions, optionsSelectionHandler, } = useComboboxContent(props.options, open, props.selected, props.onClose, props.onSelect);
     const { popperRef, popperStyles, attributes } = useComboboxAccessibility(handleSelection, filteredOptions, optionsListRef, open, setOpen, wrapperRef);
-    const template = (React__default["default"].createElement("div", Object.assign({ ref: popperRef, id: "ATL-Combobox-Content", "data-testid": "ATL-Combobox-Content", tabIndex: 0, className: classnames__default["default"](styles$5.content, { [styles$5.hidden]: !open }), style: popperStyles.popper }, attributes.popper),
-        React__default["default"].createElement(ComboboxSearch, { open: open, placeholder: props.subjectNoun, searchValue: searchValue, setSearchValue: setSearchValue }),
-        React__default["default"].createElement(ComboboxList, { multiselect: multiselect, showEmptyState: !optionsExist, options: filteredOptions, selected: selectedOptions, optionsListRef: optionsListRef, setFirstSelectedElement: setFirstSelectedElement, selectionHandler: handleSelection, searchValue: searchValue, subjectNoun: props.subjectNoun }),
-        props.children && (React__default["default"].createElement("div", { className: styles$5.actions, role: "group" }, React__default["default"].Children.toArray(props.children).map((child, index, childrenArray) => (React__default["default"].createElement("div", { key: index, className: classnames__default["default"]({
-                [styles$5.actionPadding]: index === childrenArray.length - 1,
+    const template = (React__default["default"].createElement("div", Object.assign({ ref: popperRef, id: "ATL-Combobox-Content", "data-testid": "ATL-Combobox-Content", tabIndex: 0, className: classnames__default["default"](styles$6.content, { [styles$6.hidden]: !open }), style: popperStyles.popper }, attributes.popper),
+        React__default["default"].createElement(ComboboxContentSearch, { open: open, placeholder: props.subjectNoun, searchValue: searchValue, setSearchValue: setSearchValue }),
+        multiselect && optionsExist && (React__default["default"].createElement(ComboboxContentHeader, { hasOptionsVisible: filteredOptions.length > 0, subjectNoun: props.subjectNoun, selectedCount: selectedOptions.length, onClearAll: () => {
+                optionsSelectionHandler([]);
+            }, onSelectAll: () => {
+                optionsSelectionHandler(filteredOptions);
+            } })),
+        React__default["default"].createElement(ComboboxContentList, { multiselect: multiselect, showEmptyState: !optionsExist, options: filteredOptions, selected: selectedOptions, optionsListRef: optionsListRef, setFirstSelectedElement: setFirstSelectedElement, selectionHandler: handleSelection, searchValue: searchValue, subjectNoun: props.subjectNoun }),
+        props.children && (React__default["default"].createElement("div", { className: styles$6.actions, role: "group" }, React__default["default"].Children.toArray(props.children).map((child, index, childrenArray) => (React__default["default"].createElement("div", { key: index, className: classnames__default["default"]({
+                [styles$6.actionPadding]: index === childrenArray.length - 1,
             }) }, child)))))));
     return ReactDOM__default["default"].createPortal(template, document.body);
     function handleSelection(selection) {
-        const callbackHandler = props.onSelect
-            ? props.onSelect
-            : setInternalSelected;
         if (multiselect) {
-            handleMultiSelect(callbackHandler, selectedOptions, selection);
+            handleMultiSelect(optionsSelectionHandler, selectedOptions, selection);
         }
         else {
-            handleSingleSelect(callbackHandler, selection);
+            handleSingleSelect(optionsSelectionHandler, selection);
         }
     }
     function handleSingleSelect(selectCallback, selection) {
@@ -284,12 +311,6 @@ function ComboboxTriggerChip(props) {
 
 const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox can only have one Trigger element";
 const COMBOBOX_REQUIRED_CHILDREN_ERROR_MESSAGE = "Combobox must have a Trigger and Combobox.Content element";
-const Combobox = (props) => {
-    const { contentElement, triggerElement } = useComboboxValidation(props.children);
-    return (React__default["default"].createElement(ComboboxContextProvider, { multiselect: props.multiSelect },
-        triggerElement,
-        contentElement));
-};
 function useComboboxValidation(children) {
     const childrenArray = React__default["default"].Children.toArray(children);
     let triggerElement, contentElement, multipleTriggersFound = false;
@@ -318,12 +339,17 @@ function isTriggerElement(child) {
 function isContentElement(child) {
     return React__default["default"].isValidElement(child) && child.type === ComboboxContent;
 }
+
+const Combobox = (props) => {
+    const { contentElement, triggerElement } = useComboboxValidation(props.children);
+    return (React__default["default"].createElement(ComboboxContextProvider, { multiselect: props.multiSelect },
+        triggerElement,
+        contentElement));
+};
 Combobox.TriggerButton = ComboboxTriggerButton;
 Combobox.TriggerChip = ComboboxTriggerChip;
 Combobox.Content = ComboboxContent;
 Combobox.Action = ComboboxAction;
 
-exports.COMBOBOX_REQUIRED_CHILDREN_ERROR_MESSAGE = COMBOBOX_REQUIRED_CHILDREN_ERROR_MESSAGE;
-exports.COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE;
 exports.Combobox = Combobox;
 exports.ComboboxContextProvider = ComboboxContextProvider;

package/dist/Content/Content.d.ts

@@ -12,7 +12,7 @@ interface ContentProps {
      * Change the wrapping element to be one of the available
      * semantic tags.
      *
-     * @default 'div'
+     * @default "div"
      */
     readonly type?: "section" | "aside" | "header" | "footer" | "article" | "main" | "div";
 }

package/dist/DataList/DataList.d.ts

@@ -8,6 +8,7 @@ import { DataListAction } from "./components/DataListAction";
 import { DataListLayoutActions } from "./components/DataListLayoutActions";
 import { DataListBulkActionProps, DataListObject, DataListProps } from "./DataList.types";
 import { DataListBulkActions } from "./components/DataListBulkActions";
+import { DataListStatusBar } from "./components/DataListStatusBar";
 export declare function DataList<T extends DataListObject>({ selected, sorting, ...props }: DataListProps<T>): JSX.Element;
 export declare namespace DataList {
     var Layout: typeof DataListLayout;
@@ -19,4 +20,5 @@ export declare namespace DataList {
     var BulkActions: typeof DataListBulkActions;
     var ItemAction: typeof DataListAction;
     var BatchAction: (props: DataListBulkActionProps) => JSX.Element;
+    var StatusBar: typeof DataListStatusBar;
 }

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

@@ -0,0 +1,10 @@
+import { ReactElement } from "react";
+interface DataListStatusBarProps {
+    readonly children: ReactElement | ReactElement[];
+}
+export declare function DataListStatusBar(_: DataListStatusBarProps): null;
+/**
+ * Renders the DataList.StatusBar component
+ */
+export declare function InternalDataListStatusBar(): JSX.Element | null;
+export {};

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

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

package/dist/DataList/index.js

@@ -11,7 +11,7 @@ var noop = require('lodash/noop');
 var design = require('@jobber/design');
 var framerMotion = require('framer-motion');
 var classnames = require('classnames');
-var Tooltip = require('../Tooltip-d5257798.js');
+var Tooltip = require('../Tooltip-ae33a335.js');
 var Button = require('../Button-db6114a6.js');
 var useInView = require('@jobber/hooks/useInView');
 var isEmpty = require('lodash/isEmpty');
@@ -27,7 +27,7 @@ var reactRouterDom = require('react-router-dom');
 var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
 var Popover = require('../Popover-7c966790.js');
 var Content = require('../Content-2ca1ffe1.js');
-var Chip = require('../Chip-53832bb2.js');
+var Chip = require('../Chip-4f7af21e.js');
 require('@jobber/hooks/useAssert');
 require('../Avatar-1aa30ee1.js');
 require('color');
@@ -987,6 +987,23 @@ function DataListLayoutActionsWrapper({ children }) {
     return React__default["default"].createElement("div", { className: styles.hidden }, children);
 }
 
+// This component is meant to capture the props of the DataList.Filters
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DataListStatusBar(_) {
+    return null;
+}
+/**
+ * Renders the DataList.StatusBar component
+ */
+function InternalDataListStatusBar() {
+    const { children: parentChildren } = useDataListContext();
+    const component = getCompoundComponent(parentChildren, DataListStatusBar);
+    if (!component)
+        return null;
+    const children = component === null || component === void 0 ? void 0 : component.props.children;
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children && children);
+}
+
 function DataList(_a) {
     var { selected = [], sorting } = _a, props = tslib_es6.__rest(_a, ["selected", "sorting"]);
     const [layoutBreakpoints, setLayoutBreakpoints] = React.useState([]);
@@ -1032,6 +1049,7 @@ function InternalDataList() {
             React__default["default"].createElement("div", { className: styles$e.headerFilters },
                 React__default["default"].createElement(InternalDataListFilters, null),
                 React__default["default"].createElement(InternalDataListSearch, null)),
+            React__default["default"].createElement(InternalDataListStatusBar, null),
             React__default["default"].createElement(DataListHeader, null)),
         initialLoading && React__default["default"].createElement(DataListLoadingState, null),
         showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
@@ -1098,5 +1116,9 @@ DataList.ItemAction = DataListAction;
 DataList.BatchAction = function DataListBatchAction(props) {
     return React__default["default"].createElement(DataListAction, Object.assign({}, props));
 };
+/**
+ * Defines a banner that is going to rendered between the filters and the header.
+ */
+DataList.StatusBar = DataListStatusBar;
 
 exports.DataList = DataList;

package/dist/DataTable/DataTable.d.ts

@@ -7,51 +7,51 @@ export interface DataTableProps<T> {
      * Typescript should infer T from typeof data.
      *
      */
-    data: T[];
+    readonly data: T[];
     /**
      * Should follow the @tanstack/react-table [ColumnDef](https://tanstack.com/table/v8/docs/guide/column-defs).
      * [createColumnHelper](https://tanstack.com/table/v8/docs/guide/column-defs#column-helpers) is also exposed to make it more convenient
      * to create columns.
      */
-    columns: ColumnDef<T>[];
+    readonly columns: ColumnDef<T>[];
     /**
      * Enables pagination, mostly follows:
      * https://tanstack.com/table/v8/docs/api/features/pagination
      *
      */
-    pagination?: PaginationType;
+    readonly pagination?: PaginationType;
     /**
      * Enables sorting, mostly follows:
      * https://tanstack.com/table/v8/docs/api/features/sorting#table-options
      *
      */
-    sorting?: SortingType;
+    readonly sorting?: SortingType;
     /**
      * This will force the table to have the specified hight
      *
      */
-    height?: number;
+    readonly height?: number;
     /**
      * When set to true makes the header sticky while scrolling vertically
      *
      */
-    stickyHeader?: boolean;
+    readonly stickyHeader?: boolean;
     /**
      * Pins the firstColumn when scrolling horizontally
      *
      */
-    pinFirstColumn?: boolean;
+    readonly pinFirstColumn?: boolean;
     /**
      * Enables row click action. The provided callback will be executed when the row is clicked.
      */
-    onRowClick?: (row: Row<T>) => void;
+    readonly onRowClick?: (row: Row<T>) => void;
     /**
      * The elements to display when the data table is empty
      */
-    emptyState?: ReactNode | ReactNode[];
+    readonly emptyState?: ReactNode | ReactNode[];
     /**
      * When true, shows the loading state of the DataTable
      */
-    loading?: boolean;
+    readonly loading?: boolean;
 }
 export declare function DataTable<T extends object>({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, loading, }: DataTableProps<T>): JSX.Element;

package/dist/DataTable/Pagination.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { Table } from "@tanstack/react-table";
 interface PaginationProps<T> {
-    table: Table<T>;
-    itemsPerPage?: number[];
-    totalItems: number;
-    loading: boolean;
+    readonly table: Table<T>;
+    readonly itemsPerPage?: number[];
+    readonly totalItems: number;
+    readonly loading: boolean;
+    readonly onPageChange: () => void;
 }
-export declare function Pagination<T extends object>({ table, itemsPerPage, totalItems, loading, }: PaginationProps<T>): JSX.Element;
+export declare function Pagination<T extends object>({ table, itemsPerPage, totalItems, loading, onPageChange, }: PaginationProps<T>): JSX.Element;
 export {};

package/dist/DataTable/index.js

@@ -138,7 +138,7 @@ var styles$2 = {"pagination":"zn0VRVhObt0-","paginationInfo":"_1d4uh90gfSI-","pa
 styleInject_es.styleInject(css_248z$2);
 
 const defaultItemsPerPageOptions = ["10", "20", "30", "40", "50"];
-function Pagination({ table, itemsPerPage, totalItems, loading, }) {
+function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, }) {
     const { pageIndex, pageSize } = table.getState().pagination;
     const totalRows = totalItems;
     const firstPosition = pageIndex * pageSize + 1;
@@ -154,8 +154,14 @@ function Pagination({ table, itemsPerPage, totalItems, loading, }) {
                     }, size: "small" }, itemsPerPageOptions.map(numOfPages => (React__default["default"].createElement(Option.SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)))),
                 React__default["default"].createElement("span", { className: styles$2.paginationSelectLabel }, "per page")),
             React__default["default"].createElement("div", { className: styles$2.paginationButtons },
-                React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage() }),
-                React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: () => table.nextPage(), disabled: !table.getCanNextPage() })))));
+                React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => {
+                        table.previousPage();
+                        onPageChange();
+                    }, disabled: !table.getCanPreviousPage() }),
+                React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: () => {
+                        table.nextPage();
+                        onPageChange();
+                    }, disabled: !table.getCanNextPage() })))));
 }
 
 var css_248z$1 = "._0FexNr-lIgA- {\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  border-top: calc(16px / 8) solid rgb(225, 225, 225);\n  border-top: var(--border-thick) solid var(--color-border);\n}\n\n.PKlqQjoQ6DY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  font-weight: bold;\n}\n\n.PKlqQjoQ6DY- * {\n  text-align: left;\n}\n\n.ItTcVYUbVNM-,\n.ItTcVYUbVNM- * {\n  font-weight: normal;\n  text-align: right;\n}\n\n.PKlqQjoQ6DY-:not(:last-child) {\n  padding-bottom: calc(16px / 2);\n  padding-bottom: var(--space-small);\n}\n";
@@ -255,7 +261,7 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
     });
     const table = reactTable.useReactTable(tableSettings);
     return (React__default["default"].createElement("div", { className: styles$3.dataTableContainer },
-        React__default["default"].createElement("div", { className: styles$3.tableContainer, style: { height }, ref: ref },
+        React__default["default"].createElement("div", { "data-testid": "ATL-DataTable-Container", className: styles$3.tableContainer, style: { height }, ref: ref },
             React__default["default"].createElement("table", { className: tableClasses },
                 React__default["default"].createElement(Header, { table: table, sorting: sorting, onRowClick: onRowClick, stickyHeader: stickyHeader }),
                 React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick, emptyState: emptyState, loading: loading }),
@@ -267,7 +273,7 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
             exactWidth <= jobberHooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table })) : null,
         pagination && (React__default["default"].createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
                 ? pagination.totalItems
-                : table.getCoreRowModel().rows.length, loading: loading }))));
+                : table.getCoreRowModel().rows.length, loading: loading, onPageChange: () => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0); } }))));
 }
 
 const mockContainerWidth = (exactWidth) => {

package/dist/Flex/Flex.d.ts

@@ -0,0 +1,32 @@
+import { PropsWithChildren } from "react";
+import { ColumnKeys, Direction, Spacing } from "./Flex.types";
+interface FlexProps extends PropsWithChildren {
+    /**
+     * Determine how the children gets laid out
+     *
+     * **Supported keys**
+     * - `"grow"` - Grows to the space available. If all children are set to
+     *   grow, then they'll have equal width.
+     * - `"shrink"` - Shrinks to the smallest size possible. Normally the size of
+     *   the child.
+     */
+    readonly template: ColumnKeys[];
+    /**
+     * Adjusts the alignment of the Flex children.
+     */
+    readonly align?: "start" | "end" | "center";
+    /**
+     * The spacing between the children.
+     *
+     *  @default "base"
+     */
+    readonly gap?: Spacing;
+    /**
+     * The direction of the content.
+     *
+     * @default "row"
+     */
+    readonly direction?: Direction;
+}
+export declare function Flex({ align, children, direction, gap, template, }: FlexProps): JSX.Element;
+export {};

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

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

package/dist/Flex/index.d.ts

@@ -0,0 +1 @@
+export { Flex } from "./Flex";

package/dist/Flex/index.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classnames = require('classnames');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css_248z = "._8VpnrMKmsqQ- {\n  display: grid;\n  /* If this gets wrapped in a flex container, it should take the remaining space */\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.ooF1YfV4Usc- {\n  gap: calc(16px / 8);\n  gap: var(--space-smallest);\n}\n\n.ppCZfXq-Kqc- {\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.tElkBalXH3g- {\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n._4u3OwUKxxbg- {\n  gap: calc(16px * 1);\n  gap: var(--space-base);\n}\n\n.RL7CJla0AAI- {\n  gap: calc(16px * 1.5);\n  gap: var(--space-large);\n}\n\n.fV4cvFYkhgo- {\n  gap: 0;\n}\n\n._04xVVjZgr-0- {\n  -ms-flex-align: start;\n      align-items: start;\n}\n\n.Nc3zrqHHYSg- {\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qA-v50wBX1U- {\n  -ms-flex-align: end;\n      align-items: end;\n}\n";
+var styles = {"flexible":"_8VpnrMKmsqQ-","smallestGap":"ooF1YfV4Usc-","smallerGap":"ppCZfXq-Kqc-","smallGap":"tElkBalXH3g-","baseGap":"_4u3OwUKxxbg-","largeGap":"RL7CJla0AAI-","noneGap":"fV4cvFYkhgo-","startAlign":"_04xVVjZgr-0-","centerAlign":"Nc3zrqHHYSg-","endAlign":"qA-v50wBX1U-"};
+styleInject_es.styleInject(css_248z);
+
+function Flex({ align = "center", children, direction = "row", gap = "base", template, }) {
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles.flexible, {
+            [styles[`${gap}Gap`]]: Boolean(gap),
+            [styles[`${align}Align`]]: Boolean(align),
+        }), style: generateGridStylesFromTemplate(direction, template) }, children));
+}
+function generateGridStylesFromTemplate(direction, layoutTemplate) {
+    const containerStyles = {};
+    const templateKeys = {
+        row: "gridTemplateColumns",
+        column: "gridTemplateRows",
+    };
+    const templateValues = {
+        grow: "1fr",
+        shrink: "max-content",
+    };
+    containerStyles[templateKeys[direction]] = layoutTemplate
+        .map(key => templateValues[key])
+        .join(" ");
+    return containerStyles;
+}
+
+exports.Flex = Flex;

package/dist/Tabs/Tabs.d.ts

@@ -1,8 +1,19 @@
 import React, { ReactElement, ReactNode } from "react";
 interface TabsProps {
     readonly children: ReactElement | ReactElement[];
+    /**
+     * Specifies the index of the tab that should be active on mount
+     *
+     * @default 0
+     */
+    readonly defaultTab?: number;
+    /**
+     * Callback that fires when the active tab changes
+     * @param newTabIndex
+     */
+    onTabChange?(newTabIndex: number): void;
 }
-export declare function Tabs({ children }: TabsProps): JSX.Element;
+export declare function Tabs({ children, defaultTab, onTabChange }: TabsProps): JSX.Element;
 interface TabProps {
     readonly label: string;
     readonly children: ReactNode | ReactNode[];

package/dist/Tabs/index.js

@@ -16,8 +16,9 @@ var css_248z = ":root {\n  --tab--height: calc(var(--space-larger) + var(--space
 var styles = {"tabs":"-kxlqXO5UN0-","overflow":"qI4lWMSNH40-","overflowRight":"xohIah5wcoE-","overflowLeft":"qnY4S9sz-8g-","tabRow":"wdW31G8Trag-","tab":"MO7CXQ8xJXo-","selected":"kqof65gyv7g-","tabContent":"AimQioztR1U-"};
 styleInject_es.styleInject(css_248z);
 
-function Tabs({ children }) {
-    const [activeTab, setActiveTab] = React.useState(0);
+function Tabs({ children, defaultTab = 0, onTabChange }) {
+    const activeTabInitialValue = defaultTab < React__default["default"].Children.count(children) ? defaultTab : 0;
+    const [activeTab, setActiveTab] = React.useState(activeTabInitialValue);
     const [overflowRight, setOverflowRight] = React.useState(false);
     const [overflowLeft, setOverflowLeft] = React.useState(false);
     const tabRow = React.useRef();
@@ -28,6 +29,9 @@ function Tabs({ children }) {
     const activateTab = (index) => {
         return () => {
             setActiveTab(index);
+            if (onTabChange) {
+                onTabChange(index);
+            }
         };
     };
     const activeTabProps = React__default["default"].Children.toArray(children)[activeTab].props;

package/dist/Tooltip/index.js

@@ -2,15 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Tooltip = require('../Tooltip-d5257798.js');
+var Tooltip = require('../Tooltip-ae33a335.js');
 require('react');
 require('classnames');
 require('react-dom');
 require('framer-motion');
 require('../style-inject.es-9d2f5f4e.js');
 require('react-popper');
-require('../Text-54334431.js');
-require('../Typography-83915c54.js');
 
 
 

package/dist/{Tooltip-d5257798.js → Tooltip-ae33a335.js}

@@ -6,7 +6,6 @@ var ReactDOM = require('react-dom');
 var framerMotion = require('framer-motion');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var reactPopper = require('react-popper');
-var Text = require('./Text-54334431.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -14,8 +13,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
-var css_248z = ":root {\n  --tooltip--arrow-size: var(--space-small);\n  --tooltip--offset: calc(-1 * calc(var(--space-smaller) + 1px));\n}\n\n.q07bkGoq714- {\n  display: none;\n}\n\n.dkCTRfc3vYk- {\n  display: inline-block;\n  position: absolute;\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n}\n\n.yAFP4gRKlTM- {\n  display: inline-block;\n  position: relative;\n  max-width: calc(16px * 15);\n  max-width: calc(var(--base-unit) * 15);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: calc(16px / 16) solid rgb(60, 162, 224);\n  border: var(--border-base) solid var(--color-informative);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  background-color: rgb(226, 241, 250);\n  background-color: var(--color-informative--surface);\n}\n\n.yAFP4gRKlTM- .j9KgRON7iTU-,\n.yAFP4gRKlTM- .j9KgRON7iTU-::after {\n  width: calc(16px / 2);\n  width: var(--tooltip--arrow-size);\n  height: calc(16px / 2);\n  height: var(--tooltip--arrow-size);\n  background-color: transparent;\n}\n\n.yAFP4gRKlTM- .j9KgRON7iTU-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  border: calc(16px / 16) solid rgb(60, 162, 224);\n  border: var(--border-base) solid var(--color-informative);\n  background-color: rgb(226, 241, 250);\n  background-color: var(--color-informative--surface);\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n}\n\n.B6uh34-qEuA- {\n  padding-bottom: calc(16px / 2);\n  padding-bottom: var(--space-small);\n}\n\n.B6uh34-qEuA- .yAFP4gRKlTM- {\n  -webkit-transform-origin: bottom center;\n          transform-origin: bottom center;\n}\n\n.B6uh34-qEuA- .yAFP4gRKlTM- .j9KgRON7iTU- {\n  bottom: calc(-1 * ((16px / 4) + 1px));\n  bottom: calc(-1 * calc(calc(16px / 4) + 1px));\n  bottom: var(--tooltip--offset);\n}\n\n.B6uh34-qEuA- .yAFP4gRKlTM- .j9KgRON7iTU-::after {\n  border-top-width: 0;\n  border-left-width: 0;\n}\n\n.Wft7Ug-lXEc- {\n  padding-top: calc(16px / 2);\n  padding-top: var(--space-small);\n}\n\n.Wft7Ug-lXEc- .yAFP4gRKlTM- {\n  -webkit-transform-origin: top center;\n          transform-origin: top center;\n}\n\n.Wft7Ug-lXEc- .yAFP4gRKlTM- .j9KgRON7iTU- {\n  top: calc(-1 * ((16px / 4) + 1px));\n  top: calc(-1 * calc(calc(16px / 4) + 1px));\n  top: var(--tooltip--offset);\n}\n\n.Wft7Ug-lXEc- .yAFP4gRKlTM- .j9KgRON7iTU-::after {\n  border-bottom-width: 0;\n  border-right-width: 0;\n}\n";
-var styles = {"shadowActivator":"q07bkGoq714-","tooltipWrapper":"dkCTRfc3vYk-","tooltip":"yAFP4gRKlTM-","arrow":"j9KgRON7iTU-","above":"B6uh34-qEuA-","below":"Wft7Ug-lXEc-"};
+var css_248z = ":root {\n  --tooltip--arrow-size: var(--space-small);\n  --tooltip--offset: calc(-1 * var(--space-smaller));\n  --tooltip--surface: var(--color-surface--reverse);\n}\n\n.q07bkGoq714- {\n  display: none;\n}\n\n.dkCTRfc3vYk- {\n  display: inline-block;\n  position: absolute;\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n}\n\n.yAFP4gRKlTM- {\n  display: inline-block;\n  position: relative;\n  max-width: calc(16px * 15);\n  max-width: calc(var(--base-unit) * 15);\n  padding: calc((16px * 1) - (16px / 8)) calc(16px * 1);\n  padding: calc(calc(16px * 1) - calc(16px / 8)) calc(16px * 1);\n  padding: calc(var(--space-base) - var(--space-smallest)) var(--space-base);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  background-color: rgb(1, 41, 57);\n  background-color: var(--tooltip--surface);\n}\n\n.yAFP4gRKlTM- .j9KgRON7iTU-,\n.yAFP4gRKlTM- .j9KgRON7iTU-::after {\n  width: calc(16px / 2);\n  width: var(--tooltip--arrow-size);\n  height: calc(16px / 2);\n  height: var(--tooltip--arrow-size);\n  background-color: transparent;\n}\n\n.yAFP4gRKlTM- .j9KgRON7iTU-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  background-color: rgb(1, 41, 57);\n  background-color: var(--tooltip--surface);\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n}\n\n.B6uh34-qEuA- {\n  padding-bottom: calc(16px / 2);\n  padding-bottom: var(--space-small);\n}\n\n.B6uh34-qEuA- .yAFP4gRKlTM- {\n  -webkit-transform-origin: bottom center;\n          transform-origin: bottom center;\n}\n\n.B6uh34-qEuA- .yAFP4gRKlTM- .j9KgRON7iTU- {\n  bottom: calc(-1 * (16px / 4));\n  bottom: calc(-1 * calc(16px / 4));\n  bottom: var(--tooltip--offset);\n}\n\n.B6uh34-qEuA- .yAFP4gRKlTM- .j9KgRON7iTU-::after {\n  border-top-width: 0;\n  border-left-width: 0;\n}\n\n.Wft7Ug-lXEc- {\n  padding-top: calc(16px / 2);\n  padding-top: var(--space-small);\n}\n\n.Wft7Ug-lXEc- .yAFP4gRKlTM- {\n  -webkit-transform-origin: top center;\n          transform-origin: top center;\n}\n\n.Wft7Ug-lXEc- .yAFP4gRKlTM- .j9KgRON7iTU- {\n  top: calc(-1 * (16px / 4));\n  top: calc(-1 * calc(16px / 4));\n  top: var(--tooltip--offset);\n}\n\n.Wft7Ug-lXEc- .yAFP4gRKlTM- .j9KgRON7iTU-::after {\n  border-bottom-width: 0;\n  border-right-width: 0;\n}\n\n.TpdeLUuiQMg- {\n  margin: 0;\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-text--reverse);\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: 600;\n  line-height: 1.25;\n  line-height: var(--typography--lineHeight-base);\n}\n";
+var styles = {"shadowActivator":"q07bkGoq714-","tooltipWrapper":"dkCTRfc3vYk-","tooltip":"yAFP4gRKlTM-","arrow":"j9KgRON7iTU-","above":"B6uh34-qEuA-","below":"Wft7Ug-lXEc-","tooltipMessage":"TpdeLUuiQMg-"};
 styleInject_es.styleInject(css_248z);
 
 function useTooltipPositioning() {
@@ -52,11 +51,10 @@ function Tooltip({ message, children }) {
         children,
         React__default["default"].createElement(TooltipPortal, null, show && (React__default["default"].createElement("div", Object.assign({ className: toolTipClassNames, style: popperStyles.popper, ref: setTooltipRef, role: "tooltip" }, attributes.popper),
             React__default["default"].createElement(framerMotion.motion.div, { className: styles.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
-                    type: "spring",
-                    damping: 20,
-                    stiffness: 300,
+                    damping: 50,
+                    stiffness: 500,
                 } },
-                React__default["default"].createElement(Text.Text, null, message),
+                React__default["default"].createElement("p", { className: styles.tooltipMessage }, message),
                 React__default["default"].createElement("div", { ref: setArrowRef, style: popperStyles.arrow, className: styles.arrow })))))));
     function initializeListeners() {
         const showTooltip = () => {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@jobber/components",
-  "version": "4.49.1",
+  "version": "4.49.2-JOB-80005.14+badd0e94",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup --config",
     "bootstrap": "npm run clean; npm run build",
-    "clean": "rm -rf dist/* tsconfig.tsbuildinfo",
+    "clean": "rm -rf dist/* tsconfig.rollup.tsbuildinfo",
     "entryPoints:build": "ts-node --project ../../tsconfig.bin.json ../../scripts/entryPoints.ts",
     "entryPoints:clean": "npm run entryPoints:build clean",
     "prepack": "npm run entryPoints:build",
@@ -20,8 +20,8 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.46.0",
-    "@jobber/formatters": "*",
-    "@jobber/hooks": "^2.6.1",
+    "@jobber/formatters": "^0.2.2",
+    "@jobber/hooks": "^2.6.2-JOB-80005.14+badd0e94",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -56,7 +56,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/user-event": "^12.0.2",
+    "@testing-library/user-event": "^14.5.1",
     "@types/glob": "^7.1.1",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "5668739977ce8c578ac682452ea31261d423bf10"
+  "gitHead": "badd0e9463cb1af5d3e51ac1c2f8afb3a5b21c61"
 }

package/rollup.config.js

@@ -9,6 +9,7 @@ export default {
   plugins: [
     multiInput(),
     typescript({
+      tsconfig: "./tsconfig.rollup.json",
       declarationDir: "dist",
       noEmitOnError: true,
     }),

package/dist/Combobox/components/ComboboxContent/ComboboxList.d.ts

@@ -1,15 +0,0 @@
-import React, { SetStateAction } from "react";
-import { ComboboxOption } from "../../Combobox.types";
-interface ComboboxListProps {
-    readonly options: ComboboxOption[];
-    readonly showEmptyState: boolean;
-    readonly selected: ComboboxOption[];
-    readonly optionsListRef: React.RefObject<HTMLUListElement>;
-    readonly setFirstSelectedElement: React.Dispatch<SetStateAction<HTMLElement | null>>;
-    readonly selectionHandler: (option: ComboboxOption) => void;
-    readonly searchValue: string;
-    readonly multiselect: boolean;
-    readonly subjectNoun?: string;
-}
-export declare function ComboboxList(props: ComboboxListProps): JSX.Element;
-export {};

package/dist/Combobox/components/ComboboxContent/ComboboxSearch.d.ts

@@ -1,7 +0,0 @@
-import { Dispatch, SetStateAction } from "react";
-export declare function ComboboxSearch(props: {
-    placeholder?: string;
-    searchValue: string;
-    open: boolean;
-    setSearchValue: Dispatch<SetStateAction<string>>;
-}): JSX.Element;