@jobber/components 4.49.2 → 4.50.1

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/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,116 @@ 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 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/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>>;

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,7 +3,6 @@
 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');
@@ -15,6 +14,7 @@ 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');
 
@@ -28,11 +28,11 @@ var css_248z$5 = ".m1w5vdUZ6rQ- {\n  z-index: 1002;\n  z-index: var(--elevation-
 var styles$5 = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
 styleInject_es.styleInject(css_248z$5);
 
-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-"};
+var css_248z$4 = ".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$4 = {"search":"MIyb-oFZg9w-","searchInput":"WZPK91I4aJs-","clearSearch":"_7loHrVUe-Rk-"};
 styleInject_es.styleInject(css_248z$4);
 
-function ComboboxSearch(props) {
+function ComboboxContentSearch(props) {
     const searchRef = React.useRef(null);
     React.useEffect(() => {
         if (props.open) {
@@ -56,11 +56,11 @@ 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-"};
+var css_248z$3 = ".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$3 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","option":"_2LVD-wjMRfQ-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-"};
 styleInject_es.styleInject(css_248z$3);
 
-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 &&
@@ -221,8 +221,8 @@ function ComboboxContent(props) {
     const { searchValue, setSearchValue, setFirstSelectedElement, filteredOptions, optionsListRef, selectedOptions, setInternalSelected, } = useComboboxContent(props.options, open, props.selected, props.onClose);
     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 }),
+        React__default["default"].createElement(ComboboxContentSearch, { open: open, placeholder: props.subjectNoun, searchValue: searchValue, setSearchValue: setSearchValue }),
+        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$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,
             }) }, child)))))));
@@ -284,12 +284,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 +312,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.49.2",
+  "version": "4.50.1",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "363a8b6e95f8fe46e6f7482be321c513377714ae"
+  "gitHead": "8c5b021daef4b90c333a3a01f7a1ba564869027e"
 }

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;