@jobber/components 8.13.1-addeditor-cab44cf.0 → 8.14.0

package/dist/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare const Checkbox: React.ForwardRefExoticComponent<import("./Checkbox.types").CheckboxCoreProps & import("../sharedHelpers/types").AriaInputProps & import("../sharedHelpers/types").FocusEvents<HTMLInputElement> & import("../sharedHelpers/types").MouseEvents<HTMLInputElement> & Pick<import("../sharedHelpers/types").HTMLInputBaseProps, "id" | "name" | "disabled"> & {
+export declare const Checkbox: React.ForwardRefExoticComponent<import("./Checkbox.types").CheckboxCoreProps & import("../sharedHelpers/types").AriaInputProps & import("../sharedHelpers/types").FocusEvents<HTMLInputElement> & import("../sharedHelpers/types").MouseEvents<HTMLInputElement> & Pick<import("../sharedHelpers/types").HTMLInputBaseProps, "disabled" | "name" | "id"> & {
     label?: string | React.ReactElement;
     description?: React.ReactNode;
     invalid?: boolean;

package/dist/DataList/components/DataListHeader/index.cjs

@@ -22,7 +22,6 @@ require('../../../DataListSortingOptions-cjs.js');
 require('../../../Icon-cjs.js');
 require('../../../Heading-cjs.js');
 require('../../../useResponsiveSizing-cjs.js');
-require('../../../AnimatedSwitcher-cjs.js');
 require('framer-motion');
 require('../../../Button-cjs.js');
 require('../../../tslib.es6-cjs.js');

package/dist/DataList/components/DataListHeader/index.mjs

@@ -20,7 +20,6 @@ import '../../../DataListSortingOptions-es.js';
 import '../../../Icon-es.js';
 import '../../../Heading-es.js';
 import '../../../useResponsiveSizing-es.js';
-import '../../../AnimatedSwitcher-es.js';
 import 'framer-motion';
 import '../../../Button-es.js';
 import '../../../tslib.es6-es.js';

package/dist/DataList/components/DataListSearch/index.cjs

@@ -3,12 +3,12 @@
 var DataListSearch = require('../../../DataListSearch-cjs.js');
 require('react');
 require('classnames');
+require('framer-motion');
 require('@jobber/design');
 require('@jobber/hooks');
 require('../../../InputText-cjs.js');
 require('../../../useAtlantisFormFieldName-cjs.js');
 require('../../../FormFieldWrapper-cjs.js');
-require('framer-motion');
 require('../../../Button-cjs.js');
 require('../../../tslib.es6-cjs.js');
 require('react-router-dom');
@@ -25,7 +25,6 @@ require('../../../DataListContext-cjs.js');
 require('../../../noop-cjs.js');
 require('../../../_commonjsHelpers-cjs.js');
 require('../../../DataList.const-cjs.js');
-require('../../../AnimatedSwitcher-cjs.js');
 
 
 

package/dist/DataList/components/DataListSearch/index.mjs

@@ -1,12 +1,12 @@
 export { D as DATA_LIST_SEARCH_TEST_ID, a as DataListSearch, I as InternalDataListSearch } from '../../../DataListSearch-es.js';
 import 'react';
 import 'classnames';
+import 'framer-motion';
 import '@jobber/design';
 import '@jobber/hooks';
 import '../../../InputText-es.js';
 import '../../../useAtlantisFormFieldName-es.js';
 import '../../../FormFieldWrapper-es.js';
-import 'framer-motion';
 import '../../../Button-es.js';
 import '../../../tslib.es6-es.js';
 import 'react-router-dom';
@@ -23,4 +23,3 @@ import '../../../DataListContext-es.js';
 import '../../../noop-es.js';
 import '../../../_commonjsHelpers-es.js';
 import '../../../DataList.const-es.js';
-import '../../../AnimatedSwitcher-es.js';

package/dist/DataList/index.cjs

@@ -53,7 +53,6 @@ require('../filterDataAttributes-cjs.js');
 require('../useBatchSelect-cjs.js');
 require('../DataListItemClickable-cjs.js');
 require('../DataListHeader-cjs.js');
-require('../AnimatedSwitcher-cjs.js');
 require('../DataListBulkActions-cjs.js');
 require('../DataListFilters-cjs.js');
 require('../DataListSort-cjs.js');

package/dist/DataList/index.mjs

@@ -51,7 +51,6 @@ import '../filterDataAttributes-es.js';
 import '../useBatchSelect-es.js';
 import '../DataListItemClickable-es.js';
 import '../DataListHeader-es.js';
-import '../AnimatedSwitcher-es.js';
 import '../DataListBulkActions-es.js';
 import '../DataListFilters-es.js';
 import '../DataListSort-es.js';

package/dist/DataListHeader-cjs.js

@@ -5,7 +5,7 @@ var DataListContext = require('./DataListContext-cjs.js');
 var DataList_utils = require('./DataList.utils-cjs.js');
 var useResponsiveSizing = require('./useResponsiveSizing-cjs.js');
 var classnames = require('classnames');
-var AnimatedSwitcher = require('./AnimatedSwitcher-cjs.js');
+var framerMotion = require('framer-motion');
 var Text = require('./Text-cjs.js');
 var Button = require('./Button-cjs.js');
 var Checkbox = require('./Checkbox-cjs.js');
@@ -14,6 +14,22 @@ var DataListBulkActions = require('./DataListBulkActions-cjs.js');
 var useBatchSelect = require('./useBatchSelect-cjs.js');
 var useActiveLayout = require('./useActiveLayout-cjs.js');
 
+const SWAP_DURATION = 0.1;
+const SLIDE_IN_DOWN = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "-10%", opacity: 0 },
+};
+const SLIDE_IN_UP = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "10%", opacity: 0 },
+};
+// Match the wrapper's display to its child so the animation wrapper does not
+// shift surrounding inline layout.
+function applyChildDisplay(node) {
+    if (node === null || node === void 0 ? void 0 : node.firstElementChild) {
+        node.style.display = window.getComputedStyle(node.firstElementChild).display;
+    }
+}
 const DATA_LIST_HEADER_CHECKBOX_TEST_ID = "ATL-DataList-header-checkbox";
 const DATA_LIST_HEADER_BATCH_SELECT_TEST_ID = "ATL-DataList-header-batch-select";
 function DataListHeaderCheckbox({ children }) {
@@ -67,13 +83,14 @@ function DataListHeaderCheckbox({ children }) {
 }
 function ColumnHeaderContent({ canSelectAll, children, hasAtLeastOneSelected, selectedCount, deselectText, onSelect, }) {
     if (canSelectAll) {
-        return (React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React.createElement("div", { "data-testid": DATA_LIST_HEADER_BATCH_SELECT_TEST_ID, className: DataList_module.styles.batchSelectContainer },
+        return (React.createElement(framerMotion.AnimatePresence, { mode: "wait", initial: false },
+            React.createElement(framerMotion.motion.div, { ref: applyChildDisplay, key: hasAtLeastOneSelected ? "batch-select" : "header", variants: hasAtLeastOneSelected ? SLIDE_IN_UP : SLIDE_IN_DOWN, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: SWAP_DURATION } }, hasAtLeastOneSelected ? (React.createElement("div", { "data-testid": DATA_LIST_HEADER_BATCH_SELECT_TEST_ID, className: DataList_module.styles.batchSelectContainer },
                 React.createElement("div", { className: DataList_module.styles.headerBatchSelect },
-                    Boolean(selectedCount) && React.createElement(Text.Text, null,
+                    Boolean(selectedCount) && (React.createElement(Text.Text, null,
                         selectedCount,
-                        " selected"),
+                        " selected")),
                     React.createElement(Button.Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
-                React.createElement(DataListBulkActions.InternalDataListBulkActions, null)) }));
+                React.createElement(DataListBulkActions.InternalDataListBulkActions, null))) : (children))));
     }
     else {
         return children;

package/dist/DataListHeader-es.js

@@ -3,7 +3,7 @@ import { u as useDataListContext } from './DataListContext-es.js';
 import { c as generateHeaderElements, s as sortBreakpoints } from './DataList.utils-es.js';
 import { u as useResponsiveSizing } from './useResponsiveSizing-es.js';
 import classnames from 'classnames';
-import { A as AnimatedSwitcher } from './AnimatedSwitcher-es.js';
+import { AnimatePresence, motion } from 'framer-motion';
 import { T as Text } from './Text-es.js';
 import { B as Button } from './Button-es.js';
 import { C as Checkbox } from './Checkbox-es.js';
@@ -12,6 +12,22 @@ import { I as InternalDataListBulkActions } from './DataListBulkActions-es.js';
 import { u as useBatchSelect } from './useBatchSelect-es.js';
 import { u as useActiveLayout } from './useActiveLayout-es.js';
 
+const SWAP_DURATION = 0.1;
+const SLIDE_IN_DOWN = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "-10%", opacity: 0 },
+};
+const SLIDE_IN_UP = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "10%", opacity: 0 },
+};
+// Match the wrapper's display to its child so the animation wrapper does not
+// shift surrounding inline layout.
+function applyChildDisplay(node) {
+    if (node === null || node === void 0 ? void 0 : node.firstElementChild) {
+        node.style.display = window.getComputedStyle(node.firstElementChild).display;
+    }
+}
 const DATA_LIST_HEADER_CHECKBOX_TEST_ID = "ATL-DataList-header-checkbox";
 const DATA_LIST_HEADER_BATCH_SELECT_TEST_ID = "ATL-DataList-header-batch-select";
 function DataListHeaderCheckbox({ children }) {
@@ -65,13 +81,14 @@ function DataListHeaderCheckbox({ children }) {
 }
 function ColumnHeaderContent({ canSelectAll, children, hasAtLeastOneSelected, selectedCount, deselectText, onSelect, }) {
     if (canSelectAll) {
-        return (React__default.createElement(AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React__default.createElement("div", { "data-testid": DATA_LIST_HEADER_BATCH_SELECT_TEST_ID, className: styles.batchSelectContainer },
+        return (React__default.createElement(AnimatePresence, { mode: "wait", initial: false },
+            React__default.createElement(motion.div, { ref: applyChildDisplay, key: hasAtLeastOneSelected ? "batch-select" : "header", variants: hasAtLeastOneSelected ? SLIDE_IN_UP : SLIDE_IN_DOWN, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: SWAP_DURATION } }, hasAtLeastOneSelected ? (React__default.createElement("div", { "data-testid": DATA_LIST_HEADER_BATCH_SELECT_TEST_ID, className: styles.batchSelectContainer },
                 React__default.createElement("div", { className: styles.headerBatchSelect },
-                    Boolean(selectedCount) && React__default.createElement(Text, null,
+                    Boolean(selectedCount) && (React__default.createElement(Text, null,
                         selectedCount,
-                        " selected"),
+                        " selected")),
                     React__default.createElement(Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
-                React__default.createElement(InternalDataListBulkActions, null)) }));
+                React__default.createElement(InternalDataListBulkActions, null))) : (children))));
     }
     else {
         return children;

package/dist/DataListSearch-cjs.js

@@ -2,17 +2,33 @@
 
 var React = require('react');
 var classnames = require('classnames');
+var framerMotion = require('framer-motion');
 var design = require('@jobber/design');
 var jobberHooks = require('@jobber/hooks');
 var InputText = require('./InputText-cjs.js');
 var DataListContext = require('./DataListContext-cjs.js');
 var DataList_const = require('./DataList.const-cjs.js');
 var Button = require('./Button-cjs.js');
-var AnimatedSwitcher = require('./AnimatedSwitcher-cjs.js');
 
 var styles = {"wrapper":"S2Bu0Rv4w-E-","searchInput":"N8dyu-defmc-","searchInputVisible":"UhMQC1SZUns-","searchButton":"zQPIm20aF50-","withNoFilters":"oOqZupWkemo-","spinning":"Wq63M3dVuYs-"};
 
 const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
+const SWAP_DURATION = 0.1;
+const SLIDE_IN_DOWN = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "-10%", opacity: 0 },
+};
+const SLIDE_IN_UP = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "10%", opacity: 0 },
+};
+// Match the wrapper's display to its child so the animation wrapper does not
+// shift surrounding inline layout.
+function applyChildDisplay(node) {
+    if (node === null || node === void 0 ? void 0 : node.firstElementChild) {
+        node.style.display = window.getComputedStyle(node.firstElementChild).display;
+    }
+}
 // This component is meant to capture the props of the DataList.Search
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function DataListSearch(_) {
@@ -45,7 +61,8 @@ function InternalDataListSearch() {
                     ? (val) => searchComponent.props.onSearch(val)
                     : handleUncontrolledChange, prefix: { icon: "search" }, clearable: "always" })),
         React.createElement("div", { className: styles.searchButton },
-            React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: visible, initialChild: React.createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React.createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
+            React.createElement(framerMotion.AnimatePresence, { mode: "wait", initial: false },
+                React.createElement(framerMotion.motion.div, { ref: applyChildDisplay, key: visible ? "close" : "search", variants: visible ? SLIDE_IN_UP : SLIDE_IN_DOWN, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: SWAP_DURATION } }, visible ? (React.createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch })) : (React.createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch })))))));
     function getPlaceholder() {
         if (placeholder)
             return placeholder;

package/dist/DataListSearch-es.js

@@ -1,16 +1,32 @@
 import React__default, { useRef, useState } from 'react';
 import classnames from 'classnames';
+import { AnimatePresence, motion } from 'framer-motion';
 import { tokens } from '@jobber/design';
 import { useDebounce } from '@jobber/hooks';
 import { I as InputText } from './InputText-es.js';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { S as SEARCH_DEBOUNCE_DELAY } from './DataList.const-es.js';
 import { B as Button } from './Button-es.js';
-import { A as AnimatedSwitcher } from './AnimatedSwitcher-es.js';
 
 var styles = {"wrapper":"S2Bu0Rv4w-E-","searchInput":"N8dyu-defmc-","searchInputVisible":"UhMQC1SZUns-","searchButton":"zQPIm20aF50-","withNoFilters":"oOqZupWkemo-","spinning":"Wq63M3dVuYs-"};
 
 const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
+const SWAP_DURATION = 0.1;
+const SLIDE_IN_DOWN = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "-10%", opacity: 0 },
+};
+const SLIDE_IN_UP = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "10%", opacity: 0 },
+};
+// Match the wrapper's display to its child so the animation wrapper does not
+// shift surrounding inline layout.
+function applyChildDisplay(node) {
+    if (node === null || node === void 0 ? void 0 : node.firstElementChild) {
+        node.style.display = window.getComputedStyle(node.firstElementChild).display;
+    }
+}
 // This component is meant to capture the props of the DataList.Search
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function DataListSearch(_) {
@@ -43,7 +59,8 @@ function InternalDataListSearch() {
                     ? (val) => searchComponent.props.onSearch(val)
                     : handleUncontrolledChange, prefix: { icon: "search" }, clearable: "always" })),
         React__default.createElement("div", { className: styles.searchButton },
-            React__default.createElement(AnimatedSwitcher, { switched: visible, initialChild: React__default.createElement(Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React__default.createElement(Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
+            React__default.createElement(AnimatePresence, { mode: "wait", initial: false },
+                React__default.createElement(motion.div, { ref: applyChildDisplay, key: visible ? "close" : "search", variants: visible ? SLIDE_IN_UP : SLIDE_IN_DOWN, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: SWAP_DURATION } }, visible ? (React__default.createElement(Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch })) : (React__default.createElement(Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch })))))));
     function getPlaceholder() {
         if (placeholder)
             return placeholder;

package/dist/docs/Banner/Banner.md

@@ -441,8 +441,8 @@ Use `UNSAFE_style` to apply inline custom styles to the Banner.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `backgroundColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "disabled" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — | Sets the background color of the icon. |
-| `color` | `"task" | "text" | "warning" | "disabled" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `backgroundColor` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — | Sets the background color of the icon. |
+| `color` | `"disabled" | "icon" | "task" | "text" | "warning" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
 | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
 | `name` | `IconNames` | No | — | The icon to show. |
 | `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |

package/dist/docs/Box/Box.md

@@ -206,9 +206,9 @@ defaults to respecting theme/modes.
 | `alignItems` | `AlignItems` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
 | `alignSelf` | `AlignSelf` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
 | `as` | `"article" | "aside" | "div" | "main" | "section" | "span"` | No | `div` |  |
-| `background` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "disabled" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — |  |
+| `background` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — |  |
 | `border` | `"base" | "thick" | "thicker" | "thickest" | BoxBorderWidth` | No | — |  |
-| `borderColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "disabled" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — |  |
+| `borderColor` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — |  |
 | `direction` | `FlexDirection` | No | — |  |
 | `gap` | `"base" | "extravagant" | "large" | "larger" | "largest" | "minuscule" | "slim" | "small" | "smaller" | "smallest"` | No | — |  |
 | `height` | `BoxDimension` | No | `auto` |  |

package/dist/docs/Card/Card.md

@@ -265,7 +265,7 @@ desired markup and have no need for either UNSAFE.
 | `accent` | `"indigo" | "teal" | "blue" | "green" | "lime" | "yellowGreen" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "purple" | "pink" | "orange" | "brown" | "navy" | ... 68 more ... | "yellowLightest"` | No | — | The `accent`, if provided, will effect the color accent at the top of the card. |
 | `elevation` | `elevationProp` | No | — |  |
 | `external` | `boolean` | No | — | Makes the URL open in new tab on click. |
-| `header` | `string | ReactElement<unknown, string | JSXElementConstructor<any>> | HeaderActionProps` | No | — | The header props of the card. |
+| `header` | `string | HeaderActionProps | ReactElement<unknown, string | JSXElementConstructor<any>>` | No | — | The header props of the card. |
 | `onClick` | `(event: MouseEvent<HTMLAnchorElement | HTMLDivElement, MouseEvent>) => void` | No | — | Event handler that gets called when the card is clicked. |
 | `title` | `string` | No | — | @deprecated Use header instead. |
 | `UNSAFE_className` | `{ container?: string; header?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |

package/dist/docs/Icon/Icon.md

@@ -415,6 +415,7 @@ export function IconSizesExample() {
 |      | `export`         |
 |      | `filter`         |
 |      | `future`         |
+|      | `history`        |
 |      | `import`         |
 |      | `redo`           |
 |      | `remove`         |
@@ -582,7 +583,7 @@ necessary.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `name` | `IconNames` | Yes | — | The icon to show. |
-| `color` | `"task" | "text" | "warning" | "disabled" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `color` | `"disabled" | "icon" | "task" | "text" | "warning" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
 | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
 | `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |
 | `testID` | `string` | No | — | Used to locate this view in end-to-end tests |

package/dist/docs/Menu/Menu.md

@@ -502,7 +502,7 @@ and should not be used for new implementations.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `name` | `IconNames` | Yes | — | The icon to show. |
-| `color` | `"task" | "text" | "warning" | "disabled" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `color` | `"disabled" | "icon" | "task" | "text" | "warning" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
 | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
 | `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |
 | `testID` | `string` | No | — | Used to locate this view in end-to-end tests |

package/dist/docs/index.md

@@ -1,5 +1,4 @@
 [ActivityIndicator](./ActivityIndicator/ActivityIndicator.md)
-[AnimatedSwitcher](./AnimatedSwitcher/AnimatedSwitcher.md)
 [Animation](./Animation/Animation.md)
 [AtlantisThemeContext](./AtlantisThemeContext/AtlantisThemeContext.md)
 [Autocomplete](./Autocomplete/Autocomplete.md)

package/dist/index.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var ActivityIndicator = require('./ActivityIndicator-cjs.js');
-var AnimatedSwitcher = require('./AnimatedSwitcher-cjs.js');
 var AtlantisContext = require('./AtlantisContext-cjs.js');
 var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
 var updateTheme = require('./updateTheme-cjs.js');
@@ -91,7 +90,6 @@ var showToast = require('./showToast-cjs.js');
 var Tooltip = require('./Tooltip-cjs.js');
 var Typography = require('./Typography-cjs.js');
 require('classnames');
-require('framer-motion');
 require('@jobber/design');
 require('./_commonjsHelpers-cjs.js');
 require('./identity-cjs.js');
@@ -127,6 +125,7 @@ require('./debounce-cjs.js');
 require('./ComboboxContent-cjs.js');
 require('./ComboboxContentSearch-cjs.js');
 require('./ComboboxContentList-cjs.js');
+require('framer-motion');
 require('./ComboboxOption-cjs.js');
 require('./ComboboxLoadMore-cjs.js');
 require('./ComboboxContentHeader-cjs.js');
@@ -202,7 +201,6 @@ function isNormalClick(evt) {
 }
 
 exports.ActivityIndicator = ActivityIndicator.ActivityIndicator;
-exports.AnimatedSwitcher = AnimatedSwitcher.AnimatedSwitcher;
 exports.AtlantisContext = AtlantisContext.AtlantisContext;
 exports.atlantisContextDefaultValues = AtlantisContext.atlantisContextDefaultValues;
 exports.useAtlantisContext = AtlantisContext.useAtlantisContext;

package/dist/index.d.mts

@@ -1,5 +1,4 @@
 export * from "./ActivityIndicator";
-export * from "./AnimatedSwitcher";
 export * from "./AtlantisContext";
 export * from "./AtlantisThemeContext";
 export { Autocomplete } from "./Autocomplete";

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./ActivityIndicator";
-export * from "./AnimatedSwitcher";
 export * from "./AtlantisContext";
 export * from "./AtlantisThemeContext";
 export { Autocomplete } from "./Autocomplete";

package/dist/index.mjs

@@ -1,5 +1,4 @@
 export { A as ActivityIndicator } from './ActivityIndicator-es.js';
-export { A as AnimatedSwitcher } from './AnimatedSwitcher-es.js';
 export { A as AtlantisContext, a as atlantisContextDefaultValues, u as useAtlantisContext } from './AtlantisContext-es.js';
 export { A as AtlantisThemeContextProvider, T as THEME_CHANGE_EVENT, a as atlantisThemeContextDefaultValues, u as useAtlantisTheme } from './AtlantisThemeContext-es.js';
 export { u as updateTheme } from './updateTheme-es.js';
@@ -89,7 +88,6 @@ export { T as Toast, s as showToast } from './showToast-es.js';
 export { T as Tooltip } from './Tooltip-es.js';
 export { T as Typography } from './Typography-es.js';
 import 'classnames';
-import 'framer-motion';
 import '@jobber/design';
 import './_commonjsHelpers-es.js';
 import './identity-es.js';
@@ -125,6 +123,7 @@ import './debounce-es.js';
 import './ComboboxContent-es.js';
 import './ComboboxContentSearch-es.js';
 import './ComboboxContentList-es.js';
+import 'framer-motion';
 import './ComboboxOption-es.js';
 import './ComboboxLoadMore-es.js';
 import './ComboboxContentHeader-es.js';

package/dist/utils/meta/meta.json

@@ -3,8 +3,6 @@
     "ActivityIndicator",
     "AffixIcon",
     "AffixLabel",
-    "AnimatedSwitcher",
-    "AnimatedSwitcher.Icon",
     "AtlantisContext.Consumer",
     "AtlantisContext.Provider",
     "AtlantisThemeContextProvider",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.13.1-addeditor-cab44cf.0+cab44cfa",
+  "version": "8.14.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -30,11 +30,6 @@
       "import": "./dist/ActivityIndicator/index.mjs",
       "require": "./dist/ActivityIndicator/index.cjs"
     },
-    "./AnimatedSwitcher": {
-      "types": "./dist/AnimatedSwitcher/index.d.ts",
-      "import": "./dist/AnimatedSwitcher/index.mjs",
-      "require": "./dist/AnimatedSwitcher/index.cjs"
-    },
     "./AtlantisContext": {
       "types": "./dist/AtlantisContext/index.d.ts",
       "import": "./dist/AtlantisContext/index.mjs",
@@ -497,7 +492,7 @@
   "devDependencies": {
     "@apollo/client": "^3.7.10",
     "@csstools/postcss-global-data": "^1.0.3",
-    "@jobber/design": "0.103.1-addeditor-cab44cf.11+cab44cfa",
+    "@jobber/design": "0.104.0",
     "@jobber/hooks": "2.21.0",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -551,5 +546,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "cab44cfa1430ab6784636b2d3db8ad771db0999a"
+  "gitHead": "783af69e2c4ea59128eaba44e0b96e21b783955d"
 }

package/AnimatedSwitcher.d.ts

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

package/AnimatedSwitcher.js

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

package/dist/AnimatedSwitcher/AnimatedSwitcher.d.ts

@@ -1,32 +0,0 @@
-import type { ReactElement } from "react";
-import React from "react";
-import type { IconNames } from "@jobber/design";
-export interface AnimatedSwitcherProps {
-    /**
-     * Determines when to switch the component to the `switchTo` prop.
-     *
-     * @default false
-     */
-    readonly switched: boolean;
-    /**
-     * The component that shows up when the `switched` prop is `false`
-     */
-    readonly initialChild: ReactElement;
-    /**
-     * The component that shows up when the `switched` prop is `true`
-     */
-    readonly switchTo: ReactElement;
-    /**
-     * Change the transition between 2 elements.
-     */
-    readonly type?: "slideFromBottom" | "fade";
-}
-export declare function AnimatedSwitcher({ initialChild, switched, switchTo, type, }: AnimatedSwitcherProps): React.JSX.Element;
-export declare namespace AnimatedSwitcher {
-    var Icon: ({ switchToIcon, switched, initialIcon, }: AnimatedSwitcherIconProps) => React.JSX.Element;
-}
-interface AnimatedSwitcherIconProps extends Pick<AnimatedSwitcherProps, "switched"> {
-    readonly initialIcon: IconNames;
-    readonly switchToIcon: IconNames;
-}
-export {};

package/dist/AnimatedSwitcher/index.cjs

@@ -1,11 +0,0 @@
-'use strict';
-
-var AnimatedSwitcher = require('../AnimatedSwitcher-cjs.js');
-require('react');
-require('framer-motion');
-require('../Icon-cjs.js');
-require('@jobber/design');
-
-
-
-exports.AnimatedSwitcher = AnimatedSwitcher.AnimatedSwitcher;

package/dist/AnimatedSwitcher/index.d.ts

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

package/dist/AnimatedSwitcher/index.mjs

@@ -1,5 +0,0 @@
-export { A as AnimatedSwitcher } from '../AnimatedSwitcher-es.js';
-import 'react';
-import 'framer-motion';
-import '../Icon-es.js';
-import '@jobber/design';

package/dist/AnimatedSwitcher/transitions.d.ts

@@ -1,8 +0,0 @@
-import type { Variants } from "framer-motion";
-export declare const DURATION_SIMPLE = 0.1;
-export declare const DURATION_AVERAGE = 0.2;
-export declare const FADE: Variants;
-export declare const SLIDE_IN_UP: Variants;
-export declare const SLIDE_IN_DOWN: Variants;
-export declare const SPIN_COUNTER_CLOCK_WISE: Variants;
-export declare const SPIN_CLOCK_WISE: Variants;

package/dist/AnimatedSwitcher-cjs.js

@@ -1,95 +0,0 @@
-'use strict';
-
-var React = require('react');
-var framerMotion = require('framer-motion');
-var Icon = require('./Icon-cjs.js');
-
-const DURATION_SIMPLE = 0.1;
-const DURATION_AVERAGE = 0.2;
-const FADE = {
-    visible: { opacity: 1 },
-    hidden: { opacity: 0 },
-};
-const SLIDE_IN_UP = {
-    visible: { y: 0, opacity: 1 },
-    hidden: { y: "10%", opacity: 0 },
-};
-const SLIDE_IN_DOWN = {
-    visible: { y: 0, opacity: 1 },
-    hidden: { y: "-10%", opacity: 0 },
-};
-const SPIN_COUNTER_CLOCK_WISE = {
-    visible: {
-        rotate: 0,
-        scale: 1,
-        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
-    },
-    hidden: {
-        rotate: 180,
-        scale: 0.6,
-        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
-    },
-};
-const SPIN_CLOCK_WISE = {
-    visible: {
-        rotate: 0,
-        scale: 1,
-        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
-    },
-    hidden: {
-        rotate: -180,
-        scale: 0.6,
-        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
-    },
-};
-
-function AnimatedSwitcher({ initialChild, switched, switchTo, type = "slideFromBottom", }) {
-    const [ref, setRef] = React.useState(null);
-    const isSwitchingBetweenIcons = initialChild.type === Icon.Icon && switchTo.type === Icon.Icon;
-    const { key, transition, child, duration } = getChildData();
-    return (React.createElement(framerMotion.AnimatePresence, { mode: "wait", initial: false },
-        React.createElement(framerMotion.motion.div, { ref: setRef, key: key, variants: transition, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration }, style: { display: getDisplayValue() } }, child)));
-    function getDisplayValue() {
-        if (ref === null || ref === void 0 ? void 0 : ref.firstElementChild) {
-            return window.getComputedStyle(ref.firstElementChild).display;
-        }
-    }
-    function getChildData() {
-        let data = {
-            key: `${initialChild.type.toString()}_1`,
-            child: initialChild,
-        };
-        if (switched) {
-            data = { key: `${switchTo.type.toString()}_2`, child: switchTo };
-        }
-        return Object.assign(Object.assign({}, data), { transition: getTransitionType(), duration: getTransitionDuration() });
-    }
-    function getTransitionType() {
-        if (isSwitchingBetweenIcons) {
-            if (switched)
-                return SPIN_COUNTER_CLOCK_WISE;
-            return SPIN_CLOCK_WISE;
-        }
-        else if (type === "fade") {
-            return FADE;
-        }
-        else {
-            if (switched)
-                return SLIDE_IN_UP;
-            return SLIDE_IN_DOWN;
-        }
-    }
-    function getTransitionDuration() {
-        switch (type) {
-            case "fade":
-                return DURATION_AVERAGE;
-            default:
-                return DURATION_SIMPLE;
-        }
-    }
-}
-AnimatedSwitcher.Icon = function AnimatedSwitcherIcon({ switchToIcon, switched, initialIcon, }) {
-    return (React.createElement(AnimatedSwitcher, { switched: switched, initialChild: React.createElement(Icon.Icon, { name: initialIcon }), switchTo: React.createElement(Icon.Icon, { name: switchToIcon }) }));
-};
-
-exports.AnimatedSwitcher = AnimatedSwitcher;

package/dist/AnimatedSwitcher-es.js

@@ -1,93 +0,0 @@
-import React__default, { useState } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { I as Icon } from './Icon-es.js';
-
-const DURATION_SIMPLE = 0.1;
-const DURATION_AVERAGE = 0.2;
-const FADE = {
-    visible: { opacity: 1 },
-    hidden: { opacity: 0 },
-};
-const SLIDE_IN_UP = {
-    visible: { y: 0, opacity: 1 },
-    hidden: { y: "10%", opacity: 0 },
-};
-const SLIDE_IN_DOWN = {
-    visible: { y: 0, opacity: 1 },
-    hidden: { y: "-10%", opacity: 0 },
-};
-const SPIN_COUNTER_CLOCK_WISE = {
-    visible: {
-        rotate: 0,
-        scale: 1,
-        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
-    },
-    hidden: {
-        rotate: 180,
-        scale: 0.6,
-        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
-    },
-};
-const SPIN_CLOCK_WISE = {
-    visible: {
-        rotate: 0,
-        scale: 1,
-        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
-    },
-    hidden: {
-        rotate: -180,
-        scale: 0.6,
-        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
-    },
-};
-
-function AnimatedSwitcher({ initialChild, switched, switchTo, type = "slideFromBottom", }) {
-    const [ref, setRef] = useState(null);
-    const isSwitchingBetweenIcons = initialChild.type === Icon && switchTo.type === Icon;
-    const { key, transition, child, duration } = getChildData();
-    return (React__default.createElement(AnimatePresence, { mode: "wait", initial: false },
-        React__default.createElement(motion.div, { ref: setRef, key: key, variants: transition, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration }, style: { display: getDisplayValue() } }, child)));
-    function getDisplayValue() {
-        if (ref === null || ref === void 0 ? void 0 : ref.firstElementChild) {
-            return window.getComputedStyle(ref.firstElementChild).display;
-        }
-    }
-    function getChildData() {
-        let data = {
-            key: `${initialChild.type.toString()}_1`,
-            child: initialChild,
-        };
-        if (switched) {
-            data = { key: `${switchTo.type.toString()}_2`, child: switchTo };
-        }
-        return Object.assign(Object.assign({}, data), { transition: getTransitionType(), duration: getTransitionDuration() });
-    }
-    function getTransitionType() {
-        if (isSwitchingBetweenIcons) {
-            if (switched)
-                return SPIN_COUNTER_CLOCK_WISE;
-            return SPIN_CLOCK_WISE;
-        }
-        else if (type === "fade") {
-            return FADE;
-        }
-        else {
-            if (switched)
-                return SLIDE_IN_UP;
-            return SLIDE_IN_DOWN;
-        }
-    }
-    function getTransitionDuration() {
-        switch (type) {
-            case "fade":
-                return DURATION_AVERAGE;
-            default:
-                return DURATION_SIMPLE;
-        }
-    }
-}
-AnimatedSwitcher.Icon = function AnimatedSwitcherIcon({ switchToIcon, switched, initialIcon, }) {
-    return (React__default.createElement(AnimatedSwitcher, { switched: switched, initialChild: React__default.createElement(Icon, { name: initialIcon }), switchTo: React__default.createElement(Icon, { name: switchToIcon }) }));
-};
-
-export { AnimatedSwitcher as A };

package/dist/docs/AnimatedSwitcher/AnimatedSwitcher.md

@@ -1,34 +0,0 @@
-# AnimatedSwitcher
-
-Smoothly switch between two components that aim to add delight when the user
-interacts with them.
-
-
-## Configuration
-
-Animating between 2 icons is done in a more opinionated way where it would spin
-from 1 icon to another. The animation reverses when you want to go back to the
-initial icon. See
-[AnimatedSwitcher/Icon example](/storybook/web/?path=/story/components-utilities-animatedswitcher--icon).
-
-
-## Props
-
-### Web
-
-#### AnimatedSwitcher
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `initialChild` | `ReactElement<unknown, string | JSXElementConstructor<any>>` | Yes | — | The component that shows up when the `switched` prop is `false` |
-| `switched` | `boolean` | Yes | `false` | Determines when to switch the component to the `switchTo` prop. |
-| `switchTo` | `ReactElement<unknown, string | JSXElementConstructor<any>>` | Yes | — | The component that shows up when the `switched` prop is `true` |
-| `type` | `"fade" | "slideFromBottom"` | No | `slideFromBottom` | Change the transition between 2 elements. |
-
-#### AnimatedSwitcher.Icon
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `initialIcon` | `IconNames` | Yes | — |  |
-| `switched` | `boolean` | Yes | `false` | Determines when to switch the component to the `switchTo` prop. |
-| `switchToIcon` | `IconNames` | Yes | — |  |