@jobber/components 2.73.0 → 2.74.0

package/CHANGELOG.md

@@ -8,6 +8,17 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.74.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.73.0...@jobber/components@2.74.0) (2022-01-26)
+
+
+### Features
+
+* **components:** Support dismissible type on Chips ([#847](https://github.com/GetJobber/atlantis/issues/847)) ([5f88b41](https://github.com/GetJobber/atlantis/commit/5f88b41576f80529bcd7479a5313ffc699d9e31e))
+
+
+
+
+
 # [2.73.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.72.3...@jobber/components@2.73.0) (2022-01-24)
 
 

package/dist/Chips/ChipsTypes.d.ts

@@ -6,7 +6,7 @@ interface ChipFoundationProps {
     /**
      * Change the interaction on the chip.
      */
-    readonly type?: "singleselect" | "multiselect";
+    readonly type?: "singleselect" | "multiselect" | "dismissible";
     /**
      * Determines which chip gets highlighted.
      */
@@ -42,5 +42,41 @@ export interface ChipMultiSelectProps extends ChipFoundationProps {
     readonly selected: string[];
     onChange(value: string[]): void;
 }
-export declare type ChipsProps = XOR<ChipSingleSelectProps, ChipMultiSelectProps>;
+export interface ChipDismissibleProps extends ChipFoundationProps {
+    readonly type: "dismissible";
+    readonly selected: string[];
+    onChange(value: string[]): void;
+    /**
+     * Use a custom activator to trigger the Chip option selector
+     */
+    readonly activator?: ReactElement;
+    /**
+     * Adds a loading indicator
+     */
+    readonly isLoadingMore?: boolean;
+    /**
+     * Callback when the user selects the custom option instead of the available
+     * chips.
+     *
+     * If not implemented, it won't allow custom add.
+     *
+     * @param value
+     */
+    onCustomAdd?(value: string): void;
+    /**
+     * Callback when a user types a word that filters the options. Use this when
+     * you need to query new options from the database based on the search value.
+     *
+     * @param searchValue - The input value
+     */
+    onSearch?(searchValue: string): void;
+    /**
+     * Callback when the user scrolls at the end of the chip option list. Use this
+     * to load more options from the database.
+     *
+     * @param searchValue - The input value
+     */
+    onLoadMore?(searchValue: string): void;
+}
+export declare type ChipsProps = XOR<ChipSingleSelectProps, XOR<ChipMultiSelectProps, ChipDismissibleProps>>;
 export {};

package/dist/Chips/InternalChipDismissible/InternalChipDismissible.d.ts

@@ -0,0 +1,2 @@
+import { InternalChipDismissibleProps } from "./InternalChipDismissibleTypes";
+export declare function InternalChipDismissible(props: InternalChipDismissibleProps): JSX.Element;

package/dist/Chips/InternalChipDismissible/InternalChipDismissibleInput.d.ts

@@ -0,0 +1,2 @@
+import { ChipDismissibleInputProps } from "./InternalChipDismissibleTypes";
+export declare function InternalChipDismissibleInput(props: ChipDismissibleInputProps): JSX.Element;

package/dist/Chips/InternalChipDismissible/InternalChipDismissibleTypes.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ChipProps } from "../Chip";
+import { ChipDismissibleProps } from "../ChipsTypes";
+export declare type InternalChipDismissibleProps = Omit<ChipDismissibleProps, "type">;
+export interface ChipDismissibleInputProps extends Pick<InternalChipDismissibleProps, "activator" | "isLoadingMore" | "onSearch" | "onLoadMore"> {
+    readonly attachTo: React.RefObject<Element | null>;
+    readonly options: ChipProps[];
+    onEmptyBackspace(): void;
+    onCustomOptionSelect?(value: string): void;
+    onOptionSelect(value: string): void;
+}
+export interface ChipDismissibleInputOptionProps extends ChipProps {
+    readonly custom: boolean;
+}

package/dist/Chips/InternalChipDismissible/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./useInternalChipDismissible";
+export * from "./useInternalChipDismissibleInput";
+export * from "./useInView";
+export * from "./useRepositionMenu";
+export * from "./useScrollToActive";

package/dist/Chips/InternalChipDismissible/hooks/useInView.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function useInView<T extends Element>(): {
+    ref: import("react").RefObject<T>;
+    isInView: boolean;
+};

package/dist/Chips/InternalChipDismissible/hooks/useInternalChipDismissible.d.ts

@@ -0,0 +1,12 @@
+import { MouseEvent } from "react";
+import { InternalChipDismissibleProps } from "../InternalChipDismissibleTypes";
+export declare function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }: InternalChipDismissibleProps): {
+    ref: import("react").RefObject<HTMLDivElement>;
+    sortedVisibleChipOptions: import("../../Chip").ChipProps[];
+    availableChipOptions: import("../../Chip").ChipProps[];
+    handleChipRemove: (value: string) => () => void;
+    handleChipAdd: (value: string) => void;
+    handleCustomAdd: ((value: string) => void) | undefined;
+    handleChipClick: (value: string) => ((event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void) | undefined;
+    handleEmptyBackspace: () => void;
+};

package/dist/Chips/InternalChipDismissible/hooks/useInternalChipDismissibleInput.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="lodash" />
+import React from "react";
+import { ChipDismissibleInputOptionProps, ChipDismissibleInputProps } from "../InternalChipDismissibleTypes";
+export declare function useInternalChipDismissibleInput({ options, isLoadingMore, onEmptyBackspace, onCustomOptionSelect, onOptionSelect, onSearch, }: ChipDismissibleInputProps): {
+    menuOpen: boolean;
+    searchValue: string;
+    shouldCancelBlur: boolean;
+    menuId: string;
+    inputRef: React.RefObject<HTMLInputElement>;
+    activeOption: ChipDismissibleInputOptionProps;
+    hasAvailableOptions: boolean;
+    nextOptionIndex: number;
+    previousOptionIndex: number;
+    activeIndex: number;
+    allOptions: ChipDismissibleInputOptionProps[];
+    generateDescendantId: (index: number) => string;
+    handleReset: () => void;
+    handleOpenMenu: () => void;
+    handleCloseMenu: () => void;
+    handleCancelBlur: () => void;
+    handleEnableBlur: () => void;
+    handleBlur: () => void;
+    handleSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleSetActiveOnMouseOver: (index: number) => () => void;
+    handleSelectOption: (selected: ChipDismissibleInputOptionProps) => void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    handleDebouncedSearch: (() => void) & import("lodash").Cancelable;
+};

package/dist/Chips/InternalChipDismissible/hooks/useRepositionMenu.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from "react";
+export declare function useRepositionMenu(attachTo: RefObject<Element | null>): {
+    setPositionedElementRef: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null | undefined>>;
+    targetWidth: number | undefined;
+    styles: {
+        [key: string]: import("react").CSSProperties;
+    };
+    attributes: {
+        [key: string]: {
+            [key: string]: string;
+        } | undefined;
+    };
+    state: import("@popperjs/core").State | null;
+    update: (() => Promise<Partial<import("@popperjs/core").State>>) | null;
+    forceUpdate: (() => void) | null;
+};

package/dist/Chips/InternalChipDismissible/hooks/useScrollToActive.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useScrollToActive(index: number): import("react").RefObject<HTMLDivElement>;

package/dist/Chips/InternalChipDismissible/index.d.ts

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

package/dist/Chips/index.js

@@ -10,19 +10,24 @@ var React__default = _interopDefault(React);
 var __chunk_2 = require('../chunk-17e02351.js');
 var classnames = _interopDefault(require('classnames'));
 var index = require('../Typography/index.js');
-require('../Text/index.js');
+var index$1 = require('../Text/index.js');
 require('@jobber/design');
 var index$2 = require('../Icon/index.js');
 var uuid = require('uuid');
+require('react-router-dom');
+var index$5 = require('../Button/index.js');
 require('framer-motion');
+var index$7 = require('../Spinner/index.js');
 var index$3 = require('../Avatar/index.js');
 require('color');
 var hooks = require('@jobber/hooks');
 require('react-dom');
 require('@popperjs/core');
 var index$4 = require('../Tooltip/index.js');
+var lodash = require('lodash');
+var reactPopper = require('react-popper');
 
-var css = "/**\n * Used in the wrapping chips component:\n * - InternalChipSingleSelect\n * - InternalChipMultiSelect\n */\n\n.uhcyg-a-GLRKF_7oHwvMP {\n  display: -ms-flexbox;\n  display: flex;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n}\n\n._2XfthED8eqbKIyTNoH1aWp {\n  display: inline-grid;\n  position: relative;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-small);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-larger);\n  color: var(--color-text--secondary);\n  text-align: left;\n  vertical-align: middle;\n  background-color: var(--color-surface);\n  transition: var(--timing-base) ease-in-out;\n  transition-property: background-color, box-shadow, color;\n  grid-template-columns: -webkit-max-content;\n  grid-template-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm,\n.fl19i7ccgBu7NZkxnpvcI {\n  padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm {\n  grid-template-columns: -webkit-min-content 1fr;\n  grid-template-columns: min-content 1fr;\n}\n\n.fl19i7ccgBu7NZkxnpvcI {\n  grid-template-columns: 1fr -webkit-min-content;\n  grid-template-columns: 1fr min-content;\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm.fl19i7ccgBu7NZkxnpvcI {\n  grid-template-columns: -webkit-min-content 1fr -webkit-min-content;\n  grid-template-columns: min-content 1fr min-content;\n}\n\n._3Uf2El5YBbG3DmUWHBhuea,\n._35he2rVDYRU4YQko5r4adP ~ ._2XfthED8eqbKIyTNoH1aWp {\n  box-shadow: var(--shadow-base);\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n/**\n * Interaction\n */\n\n._2XfthED8eqbKIyTNoH1aWp:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp {\n  outline: none;\n}\n\n._3Uf2El5YBbG3DmUWHBhuea:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp {\n  box-shadow: var(--shadow-focus);\n}\n\n._3Uf2El5YBbG3DmUWHBhuea:hover,\n._3Uf2El5YBbG3DmUWHBhuea:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp:not(._18wCcoIrboygQTnIVm8yzS) {\n  background-color: var(--color-surface--hover);\n}\n\n/**\n * States\n */\n\n._2XfthED8eqbKIyTNoH1aWp._18wCcoIrboygQTnIVm8yzS {\n  border-color: var(--color-surface--reverse);\n  color: var(--color-text--reverse);\n  background-color: var(--color-surface--reverse);\n}\n\n._2XfthED8eqbKIyTNoH1aWp._1FTJ2ALrm1mVaT7HdMFFGN {\n  border-color: var(--color-critical--onSurface);\n  color: var(--color-critical--onSurface);\n  background-color: var(--color-critical--surface);\n}\n\n._2XfthED8eqbKIyTNoH1aWp.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-disabled--secondary);\n  color: var(--color-disabled);\n  background-color: var(--color-disabled--secondary);\n}\n\n._18wCcoIrboygQTnIVm8yzS.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-disabled);\n  color: var(--color-white);\n  background-color: var(--color-disabled);\n}\n\n._1FTJ2ALrm1mVaT7HdMFFGN.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-critical);\n}\n\n/**\n * Input checkbox/radio\n *\n * Hide checkbox on UI but not screen readers and still allow focus state\n */\n\n._35he2rVDYRU4YQko5r4adP {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  -webkit-clip-path: inset(100%);\n          clip-path: inset(100%);\n  white-space: nowrap;\n}\n\n/**\n * Button\n */\n\n._1M_ek3kiaa7OApx5rwBEc3 {\n  display: -ms-flexbox;\n  display: flex;\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  transition: background-color 200ms ease;\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:hover,\n._1M_ek3kiaa7OApx5rwBEc3:focus {\n  background-color: var(--color-surface--hover);\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:focus,\n._3Uf2El5YBbG3DmUWHBhuea ._1M_ek3kiaa7OApx5rwBEc3:hover {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/**\n * Override icon default colors.\n *\n * NOTE: This is a workaround since some icons have default colors that we don't\n * want to override until the component color prop overrides it.\n * DO NOT COPY!\n */\n\n._3AG5dSWeyKYD1Xfu9fN_DL > svg {\n  fill: var(--color-interactive--subtle);\n}\n\n._3AG5dSWeyKYD1Xfu9fN_DL {\n  display: -ms-flexbox;\n  display: flex;\n}\n";
+var css = "/**\n * Used in the wrapping chips component:\n * - InternalChipSingleSelect\n * - InternalChipMultiSelect\n */\n\n.uhcyg-a-GLRKF_7oHwvMP {\n  display: -ms-flexbox;\n  display: flex;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._2XfthED8eqbKIyTNoH1aWp {\n  display: inline-grid;\n  position: relative;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-small);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-larger);\n  color: var(--color-text--secondary);\n  text-align: left;\n  vertical-align: middle;\n  background-color: var(--color-surface);\n  transition: var(--timing-base) ease-in-out;\n  transition-property: background-color, box-shadow, color;\n  grid-template-columns: -webkit-max-content;\n  grid-template-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm,\n.fl19i7ccgBu7NZkxnpvcI {\n  padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm {\n  grid-template-columns: -webkit-min-content 1fr;\n  grid-template-columns: min-content 1fr;\n}\n\n.fl19i7ccgBu7NZkxnpvcI {\n  grid-template-columns: 1fr -webkit-min-content;\n  grid-template-columns: 1fr min-content;\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm.fl19i7ccgBu7NZkxnpvcI {\n  grid-template-columns: -webkit-min-content 1fr -webkit-min-content;\n  grid-template-columns: min-content 1fr min-content;\n}\n\n._3Uf2El5YBbG3DmUWHBhuea,\n._35he2rVDYRU4YQko5r4adP ~ ._2XfthED8eqbKIyTNoH1aWp {\n  box-shadow: var(--shadow-base);\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n/**\n * Interaction\n */\n\n._2XfthED8eqbKIyTNoH1aWp:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp {\n  outline: none;\n}\n\n._3Uf2El5YBbG3DmUWHBhuea:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp {\n  box-shadow: var(--shadow-focus);\n}\n\n._3Uf2El5YBbG3DmUWHBhuea:hover,\n._3Uf2El5YBbG3DmUWHBhuea:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp:not(._18wCcoIrboygQTnIVm8yzS) {\n  background-color: var(--color-surface--hover);\n}\n\n/**\n * States\n */\n\n._2XfthED8eqbKIyTNoH1aWp._18wCcoIrboygQTnIVm8yzS {\n  border-color: var(--color-surface--reverse);\n  color: var(--color-text--reverse);\n  background-color: var(--color-surface--reverse);\n}\n\n._2XfthED8eqbKIyTNoH1aWp._1FTJ2ALrm1mVaT7HdMFFGN {\n  border-color: var(--color-critical--onSurface);\n  color: var(--color-critical--onSurface);\n  background-color: var(--color-critical--surface);\n}\n\n._2XfthED8eqbKIyTNoH1aWp.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-disabled--secondary);\n  color: var(--color-disabled);\n  background-color: var(--color-disabled--secondary);\n}\n\n._18wCcoIrboygQTnIVm8yzS.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-disabled);\n  color: var(--color-white);\n  background-color: var(--color-disabled);\n}\n\n._1FTJ2ALrm1mVaT7HdMFFGN.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-critical);\n}\n\n/**\n * Input checkbox/radio\n *\n * Hide checkbox on UI but not screen readers and still allow focus state\n */\n\n._35he2rVDYRU4YQko5r4adP {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  -webkit-clip-path: inset(100%);\n          clip-path: inset(100%);\n  white-space: nowrap;\n}\n\n/**\n * Button\n */\n\n._1M_ek3kiaa7OApx5rwBEc3 {\n  display: -ms-flexbox;\n  display: flex;\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  transition: background-color 200ms ease;\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:hover,\n._1M_ek3kiaa7OApx5rwBEc3:focus {\n  background-color: var(--color-surface--hover);\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:focus,\n._3Uf2El5YBbG3DmUWHBhuea ._1M_ek3kiaa7OApx5rwBEc3:hover {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/**\n * Override icon default colors.\n *\n * NOTE: This is a workaround since some icons have default colors that we don't\n * want to override until the component color prop overrides it.\n * DO NOT COPY!\n */\n\n._3AG5dSWeyKYD1Xfu9fN_DL > svg {\n  fill: var(--color-interactive--subtle);\n}\n\n._3AG5dSWeyKYD1Xfu9fN_DL {\n  display: -ms-flexbox;\n  display: flex;\n}\n";
 var styles = {"wrapper":"uhcyg-a-GLRKF_7oHwvMP","chip":"_2XfthED8eqbKIyTNoH1aWp","hasPrefix":"_4U2lNr3Kk6xnNZTk3Fxgm","hasSuffix":"fl19i7ccgBu7NZkxnpvcI","clickable":"_3Uf2El5YBbG3DmUWHBhuea","input":"_35he2rVDYRU4YQko5r4adP","active":"_18wCcoIrboygQTnIVm8yzS","invalid":"_1FTJ2ALrm1mVaT7HdMFFGN","disabled":"B1ELFzeQy9Ihy9oYcv-px","button":"_1M_ek3kiaa7OApx5rwBEc3","icon":"_3AG5dSWeyKYD1Xfu9fN_DL"};
 __chunk_2.styleInject(css);
 
@@ -205,11 +210,265 @@ function InternalChipMultiSelect(_a) {
     }
 }
 
+var css$1 = ".UICoKaZcJNyJZu_jLSFe0 {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  border: var(--border-base) solid transparent;\n  border-radius: var(--radius-base);\n  transition: all var(--timing-base);\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.iYpu9Vckapbgfo7nKby6- {\n  -ms-flex: 1;\n      flex: 1;\n  min-width: 120px;\n  padding: var(--space-small) 0;\n  border: none;\n  border-radius: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-size: var(--typography--fontSize-base);\n  line-height: var(--typography--lineHeight-base);\n  background: transparent;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n.iYpu9Vckapbgfo7nKby6-:focus {\n  outline: none;\n}\n\n._3Y-bhobfNvAAUslopzbOoq {\n  position: relative;\n  z-index: var(--elevation-menu);\n  width: 100%;\n}\n\n._3pV83Z-mpuL-nlud9deXib {\n  max-height: 320px;\n  box-shadow: var(--shadow-base);\n  padding: var(--space-small) 0;\n  border-radius: var(--radius-base);\n  overflow-y: scroll;\n  background-color: var(--color-surface);\n}\n\n.yZlvrckyLt2bbuJSDc3s_,\n._1JS35aIdiRtVwq3RLMJLlj {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  padding: var(--space-small);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n.yZlvrckyLt2bbuJSDc3s_:focus {\n  box-shadow: var(--shadow-focus);\n}\n\n.yZlvrckyLt2bbuJSDc3s_:focus,\n._1P6NA2S4eCq-AiLRgspXJX {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n._1JS35aIdiRtVwq3RLMJLlj {\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n";
+var styles$1 = {"wrapper":"UICoKaZcJNyJZu_jLSFe0","input":"iYpu9Vckapbgfo7nKby6-","menu":"_3Y-bhobfNvAAUslopzbOoq","menuList":"_3pV83Z-mpuL-nlud9deXib","menuListOption":"yZlvrckyLt2bbuJSDc3s_","loadingIndicator":"_1JS35aIdiRtVwq3RLMJLlj","activeOption":"_1P6NA2S4eCq-AiLRgspXJX"};
+__chunk_2.styleInject(css$1);
+
+function useInternalChipDismissible(_a) {
+    var children = _a.children, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick, onCustomAdd = _a.onCustomAdd;
+    var ref = React.useRef(null); // eslint-disable-line no-null/no-null
+    var chipOptions = children.map(function (chip) { return chip.props; });
+    var visibleChipOptions = chipOptions.filter(function (chip) {
+        return selected.includes(chip.value);
+    });
+    var sortedVisibleChipOptions = lodash.sortBy(visibleChipOptions, function (chip) {
+        return selected.indexOf(chip.value);
+    });
+    var availableChipOptions = chipOptions.filter(function (chip) { return !selected.includes(chip.value); });
+    var actions = {
+        handleChipRemove: function (value) {
+            return function () { return onChange(selected.filter(function (val) { return val !== value; })); };
+        },
+        handleChipAdd: function (value) { return onChange(__chunk_1.__spread(selected, [value])); },
+        handleCustomAdd: onCustomAdd,
+        handleChipClick: function (value) {
+            if (onClick === undefined)
+                return;
+            return function (event) { return onClick(event, value); };
+        },
+        handleEmptyBackspace: function () {
+            actions.handleChipRemove(selected[selected.length - 1])();
+        },
+    };
+    return __chunk_1.__assign(__chunk_1.__assign({}, actions), { ref: ref, sortedVisibleChipOptions: sortedVisibleChipOptions, availableChipOptions: availableChipOptions });
+}
+
+var menuId = uuid.v1();
+function useInternalChipDismissibleInput(_a) {
+    var options = _a.options, _b = _a.isLoadingMore, isLoadingMore = _b === void 0 ? false : _b, onEmptyBackspace = _a.onEmptyBackspace, onCustomOptionSelect = _a.onCustomOptionSelect, onOptionSelect = _a.onOptionSelect, onSearch = _a.onSearch;
+    var _c = __chunk_1.__read(React.useState([]), 2), allOptions = _c[0], setAllOptions = _c[1];
+    var _d = __chunk_1.__read(React.useState(""), 2), searchValue = _d[0], setSearchValue = _d[1];
+    var _e = __chunk_1.__read(React.useState(false), 2), menuOpen = _e[0], setMenuOpen = _e[1];
+    var _f = __chunk_1.__read(React.useState(0), 2), activeIndex = _f[0], setActiveIndex = _f[1];
+    var _g = __chunk_1.__read(React.useState(false), 2), shouldCancelBlur = _g[0], setShouldCancelBlur = _g[1];
+    var canAddCustomOption = onCustomOptionSelect !== undefined && !isLoadingMore;
+    var maxOptionIndex = allOptions.length - 1;
+    React.useEffect(function () {
+        setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
+    }, [options]);
+    var computed = {
+        menuId: menuId,
+        inputRef: React.useRef(null),
+        activeOption: allOptions[activeIndex],
+        hasAvailableOptions: allOptions.length > 0,
+        nextOptionIndex: activeIndex < maxOptionIndex ? activeIndex + 1 : 0,
+        previousOptionIndex: activeIndex > 0 ? activeIndex - 1 : maxOptionIndex,
+    };
+    var actions = {
+        generateDescendantId: function (index) { return computed.menuId + "-" + index; },
+        handleReset: function () {
+            setActiveIndex(activeIndex === 0 ? activeIndex : activeIndex - 1);
+            setSearchValue("");
+        },
+        handleOpenMenu: function () { return setMenuOpen(true); },
+        handleCloseMenu: function () {
+            setMenuOpen(false);
+            setActiveIndex(0);
+        },
+        handleCancelBlur: function () { return setShouldCancelBlur(true); },
+        handleEnableBlur: function () { return setShouldCancelBlur(false); },
+        handleBlur: function () {
+            if (shouldCancelBlur)
+                return;
+            actions.handleReset();
+            actions.handleCloseMenu();
+        },
+        handleSearchChange: function (event) {
+            setActiveIndex(0);
+            setSearchValue(event.currentTarget.value);
+        },
+        handleSetActiveOnMouseOver: function (index) {
+            return function () { return setActiveIndex(index); };
+        },
+        handleSelectOption: function (selected) {
+            var _a;
+            if (allOptions.length === 0)
+                return;
+            var setValue = selected.custom ? onCustomOptionSelect : onOptionSelect;
+            if (setValue) {
+                setValue(selected.value);
+                actions.handleReset();
+                (_a = computed.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        },
+        handleKeyDown: function (event) {
+            var callbacks = {
+                Enter: function () { return actions.handleSelectOption(computed.activeOption); },
+                Tab: function () { return actions.handleSelectOption(computed.activeOption); },
+                ",": function () {
+                    if (searchValue.length === 0)
+                        return;
+                    actions.handleSelectOption(generateCustomOptionObject(searchValue));
+                },
+                ArrowDown: function () {
+                    if (isLoadingMore && activeIndex === maxOptionIndex)
+                        return;
+                    setActiveIndex(computed.nextOptionIndex);
+                },
+                ArrowUp: function () { return setActiveIndex(computed.previousOptionIndex); },
+            };
+            if (searchValue.length === 0) {
+                callbacks.Backspace = function () { return onEmptyBackspace(); };
+            }
+            handleKeydownEvents(callbacks, event);
+        },
+        handleDebouncedSearch: lodash.debounce(function () {
+            onSearch && onSearch(searchValue);
+            setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
+        }, 300),
+    };
+    return __chunk_1.__assign(__chunk_1.__assign(__chunk_1.__assign(__chunk_1.__assign({}, actions), { activeIndex: activeIndex,
+        allOptions: allOptions }), computed), { menuOpen: menuOpen,
+        searchValue: searchValue,
+        shouldCancelBlur: shouldCancelBlur });
+}
+function generateOptions(options, searchValue, canAddCustomOption) {
+    var allOptions = options
+        .filter(function (option) {
+        return option.label.toLowerCase().match(searchValue.trim().toLowerCase());
+    })
+        .map(function (opt) { return (__chunk_1.__assign(__chunk_1.__assign({}, opt), { custom: false })); });
+    var _a = generateCustomOption(allOptions, searchValue, canAddCustomOption), shouldAddCustomOption = _a.shouldAddCustomOption, customOption = _a.customOption;
+    shouldAddCustomOption && allOptions.push(customOption);
+    return allOptions;
+}
+function generateCustomOption(options, searchValue, canAddCustomOption) {
+    function shouldAddCustomOption() {
+        var isMatchingOption = options.some(function (option) { return option.label.toLowerCase() === searchValue.trim().toLowerCase(); });
+        return !!searchValue && !isMatchingOption;
+    }
+    return {
+        shouldAddCustomOption: canAddCustomOption && shouldAddCustomOption(),
+        customOption: generateCustomOptionObject(searchValue),
+    };
+}
+function generateCustomOptionObject(searchValue) {
+    return {
+        value: searchValue,
+        label: searchValue,
+        prefix: React__default.createElement(index$2.Icon, { name: "add" }),
+        custom: true,
+    };
+}
+function handleKeydownEvents(callbacks, event) {
+    if (event.shiftKey)
+        return;
+    Object.entries(callbacks).forEach(function (_a) {
+        var _b = __chunk_1.__read(_a, 2), key = _b[0], callback = _b[1];
+        if (event.key === key) {
+            event.preventDefault();
+            callback(event);
+        }
+    });
+}
+
+function useInView() {
+    var ref = React.useRef(null); // eslint-disable-line no-null/no-null
+    var _a = __chunk_1.__read(React.useState(false), 2), isInView = _a[0], setIsInView = _a[1];
+    if (window.IntersectionObserver) {
+        var observer_1 = new IntersectionObserver(function (entries) {
+            setIsInView(entries[0].isIntersecting);
+        });
+        React.useEffect(function () {
+            ref.current && observer_1.observe(ref.current);
+            return function () {
+                if (!ref.current)
+                    return;
+                observer_1.unobserve(ref.current);
+            };
+        });
+    }
+    return { ref: ref, isInView: isInView };
+}
+
+function useRepositionMenu(attachTo) {
+    var _a;
+    var _b = __chunk_1.__read(React.useState(), 2), positionElement = _b[0], setPositionedElementRef = _b[1];
+    var popper = reactPopper.usePopper(attachTo.current, positionElement, {
+        modifiers: [
+            { name: "offset", options: { offset: [0, 8] } },
+            { name: "flip", options: { fallbackPlacements: ["top"] } },
+        ],
+    });
+    var targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+    return __chunk_1.__assign(__chunk_1.__assign({}, popper), { setPositionedElementRef: setPositionedElementRef, targetWidth: targetWidth });
+}
+
+function useScrollToActive(index) {
+    var ref = React.useRef(null); // eslint-disable-line no-null/no-null
+    React.useEffect(function () {
+        var _a, _b;
+        if (!window.HTMLElement.prototype.scrollIntoView)
+            return;
+        (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.children[index]) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start",
+        });
+    }, [index]);
+    return ref;
+}
+
+function InternalChipDismissibleInput(props) {
+    var _a = props.activator, activator = _a === void 0 ? React__default.createElement(index$5.Button, { icon: "add", type: "secondary", ariaLabel: "Add" }) : _a, attachTo = props.attachTo, _b = props.isLoadingMore, isLoadingMore = _b === void 0 ? false : _b, onLoadMore = props.onLoadMore;
+    var _c = useInternalChipDismissibleInput(props), activeIndex = _c.activeIndex, allOptions = _c.allOptions, hasAvailableOptions = _c.hasAvailableOptions, inputRef = _c.inputRef, menuId = _c.menuId, menuOpen = _c.menuOpen, searchValue = _c.searchValue, generateDescendantId = _c.generateDescendantId, handleBlur = _c.handleBlur, handleOpenMenu = _c.handleOpenMenu, handleSearchChange = _c.handleSearchChange, handleCancelBlur = _c.handleCancelBlur, handleEnableBlur = _c.handleEnableBlur, handleSetActiveOnMouseOver = _c.handleSetActiveOnMouseOver, handleKeyDown = _c.handleKeyDown, handleSelectOption = _c.handleSelectOption, handleDebouncedSearch = _c.handleDebouncedSearch;
+    var menuRef = useScrollToActive(activeIndex);
+    var _d = useInView(), visibleChildRef = _d.ref, isInView = _d.isInView;
+    var _e = useRepositionMenu(attachTo), popperStyles = _e.styles, attributes = _e.attributes, forceUpdate = _e.forceUpdate, setPositionedElementRef = _e.setPositionedElementRef;
+    React.useEffect(function () { return forceUpdate === null || forceUpdate === void 0 ? void 0 : forceUpdate(); }, [allOptions]);
+    React.useEffect(function () {
+        handleDebouncedSearch();
+        return handleDebouncedSearch.cancel;
+    }, [searchValue]);
+    React.useEffect(function () {
+        isInView && onLoadMore && onLoadMore(searchValue);
+    }, [isInView]);
+    if (!menuOpen) {
+        return React__default.cloneElement(activator, { onClick: handleOpenMenu });
+    }
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("input", { ref: inputRef, className: styles$1.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": hasAvailableOptions, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: lodash.debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
+        (hasAvailableOptions || isLoadingMore) && (React__default.createElement("div", __chunk_1.__assign({ ref: setPositionedElementRef, className: styles$1.menu, style: popperStyles.popper }, attributes.popper),
+            React__default.createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles$1.menuList },
+                allOptions.map(function (option, i) {
+                    var _a;
+                    return (React__default.createElement("button", { key: option.value, role: "option", id: generateDescendantId(i), className: classnames(styles$1.menuListOption, (_a = {},
+                            _a[styles$1.activeOption] = activeIndex === i,
+                            _a)), onClick: function () { return handleSelectOption(option); }, onMouseEnter: handleSetActiveOnMouseOver(i), onMouseDown: handleCancelBlur, onMouseUp: handleEnableBlur },
+                        React__default.createElement("span", { "aria-hidden": true }, option.prefix),
+                        React__default.createElement(index$1.Text, null, option.label)));
+                }),
+                React__default.createElement("div", { ref: visibleChildRef }),
+                isLoadingMore && (React__default.createElement("div", { className: styles$1.loadingIndicator },
+                    React__default.createElement(index$7.Spinner, { size: "small", inline: true }))))))));
+}
+
+function InternalChipDismissible(props) {
+    var _a = useInternalChipDismissible(props), availableChipOptions = _a.availableChipOptions, wrapperRef = _a.ref, sortedVisibleChipOptions = _a.sortedVisibleChipOptions, handleChipClick = _a.handleChipClick, handleChipAdd = _a.handleChipAdd, handleChipRemove = _a.handleChipRemove, handleCustomAdd = _a.handleCustomAdd, handleEmptyBackspace = _a.handleEmptyBackspace;
+    return (React__default.createElement("div", { ref: wrapperRef, className: styles$1.wrapper, "data-testid": "dismissible-chips" },
+        sortedVisibleChipOptions.map(function (chip) { return (React__default.createElement(ChipDismissible, __chunk_1.__assign({ key: chip.value }, chip, { onClick: handleChipClick(chip.value), onRequestRemove: handleChipRemove(chip.value) }))); }),
+        React__default.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onEmptyBackspace: handleEmptyBackspace, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
+}
+
 function Chips(props) {
-    if (props.type === "multiselect") {
-        return React__default.createElement(InternalChipMultiSelect, __chunk_1.__assign({}, props));
+    switch (props.type) {
+        case "dismissible":
+            return React__default.createElement(InternalChipDismissible, __chunk_1.__assign({}, props));
+        case "multiselect":
+            return React__default.createElement(InternalChipMultiSelect, __chunk_1.__assign({}, props));
+        default:
+            return React__default.createElement(InternalChipSingleSelect, __chunk_1.__assign({}, props));
     }
-    return React__default.createElement(InternalChipSingleSelect, __chunk_1.__assign({}, props));
 }
 
 // Only need the component to pass in the data as a react children

package/dist/Chips/utils/mdxUtils.d.ts

@@ -0,0 +1,9 @@
+export declare function useFakeOptionQuery(): {
+    handleLoadMore: () => void;
+    handleSearch: (searchValue: string) => void;
+    handleSelect: (value: string[]) => void;
+    handleCustomAdd: (value: string) => void;
+    selected: string[];
+    options: string[];
+    loading: boolean;
+};

package/dist/DatePicker/index.js

@@ -15,8 +15,8 @@ require('../Icon/index.js');
 require('react-router-dom');
 var index$5 = require('../Button/index.js');
 var hooks = require('@jobber/hooks');
-var ReactDatePicker = _interopDefault(require('react-datepicker'));
 var lodash = require('lodash');
+var ReactDatePicker = _interopDefault(require('react-datepicker'));
 
 var css = "@charset \"UTF-8\";\n/* stylelint-disable */\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {\n  border-color: #ccc;\n  border-style: solid;\n  border-width: 3px 3px 0 0;\n  content: \"\";\n  display: block;\n  height: 9px;\n  position: absolute;\n  top: 6px;\n  width: 9px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n  margin-left: -4px;\n  position: absolute;\n  width: 0;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n  box-sizing: content-box;\n  position: absolute;\n  border: 8px solid transparent;\n  height: 0;\n  width: 1px;\n  content: \"\";\n  z-index: -1;\n  border-width: 8px;\n  left: -8px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {\n  border-bottom-color: #aeaeae;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n  top: 0;\n  margin-top: -8px;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n  border-top: none;\n  border-bottom-color: #f0f0f0;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n  top: 0;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {\n  top: -1px;\n  border-bottom-color: #aeaeae;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n  bottom: 0;\n  margin-bottom: -8px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {\n  border-bottom: none;\n  border-top-color: #fff;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {\n  bottom: 0;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {\n  bottom: -1px;\n  border-top-color: #aeaeae;\n}\n.react-datepicker-wrapper {\n  display: inline-block;\n  padding: 0;\n  border: 0;\n  width: 100%;\n}\n.react-datepicker {\n  font-family: \"Helvetica Neue\", helvetica, arial, sans-serif;\n  font-size: 0.8rem;\n  background-color: #fff;\n  color: #000;\n  border: 1px solid #aeaeae;\n  border-radius: 0.3rem;\n  display: inline-block;\n  position: relative;\n}\n.react-datepicker--time-only .react-datepicker__triangle {\n  left: 35px;\n}\n.react-datepicker--time-only .react-datepicker__time-container {\n  border-left: 0;\n}\n.react-datepicker--time-only .react-datepicker__time,\n.react-datepicker--time-only .react-datepicker__time-box {\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__triangle {\n  position: absolute;\n  left: 50px;\n}\n.react-datepicker-popper {\n  z-index: 1;\n}\n.react-datepicker-popper[data-placement^=bottom] {\n  padding-top: 10px;\n}\n.react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {\n  left: auto;\n  right: 50px;\n}\n.react-datepicker-popper[data-placement^=top] {\n  padding-bottom: 10px;\n}\n.react-datepicker-popper[data-placement^=right] {\n  padding-left: 8px;\n}\n.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {\n  left: auto;\n  right: 42px;\n}\n.react-datepicker-popper[data-placement^=left] {\n  padding-right: 8px;\n}\n.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {\n  left: 42px;\n  right: auto;\n}\n.react-datepicker__header {\n  text-align: center;\n  background-color: #f0f0f0;\n  border-bottom: 1px solid #aeaeae;\n  border-top-left-radius: 0.3rem;\n  padding: 8px 0;\n  position: relative;\n}\n.react-datepicker__header--time {\n  padding-bottom: 8px;\n  padding-left: 5px;\n  padding-right: 5px;\n}\n.react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n  border-top-left-radius: 0;\n}\n.react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n  border-top-right-radius: 0.3rem;\n}\n.react-datepicker__year-dropdown-container--select,\n.react-datepicker__month-dropdown-container--select,\n.react-datepicker__month-year-dropdown-container--select,\n.react-datepicker__year-dropdown-container--scroll,\n.react-datepicker__month-dropdown-container--scroll,\n.react-datepicker__month-year-dropdown-container--scroll {\n  display: inline-block;\n  margin: 0 2px;\n}\n.react-datepicker__current-month,\n.react-datepicker-time__header,\n.react-datepicker-year-header {\n  margin-top: 0;\n  color: #000;\n  font-weight: bold;\n  font-size: 0.944rem;\n}\n.react-datepicker-time__header {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.react-datepicker__navigation {\n  -ms-flex-align: center;\n      align-items: center;\n  background: none;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  text-align: center;\n  cursor: pointer;\n  position: absolute;\n  top: 2px;\n  padding: 0;\n  border: none;\n  z-index: 1;\n  height: 32px;\n  width: 32px;\n  text-indent: -999em;\n  overflow: hidden;\n}\n.react-datepicker__navigation--previous {\n  left: 2px;\n}\n.react-datepicker__navigation--next {\n  right: 2px;\n}\n.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n  right: 85px;\n}\n.react-datepicker__navigation--years {\n  position: relative;\n  top: 0;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n.react-datepicker__navigation--years-previous {\n  top: 4px;\n}\n.react-datepicker__navigation--years-upcoming {\n  top: -4px;\n}\n.react-datepicker__navigation:hover *::before {\n  border-color: #a6a6a6;\n}\n.react-datepicker__navigation-icon {\n  position: relative;\n  top: -1px;\n  font-size: 20px;\n  width: 0;\n}\n.react-datepicker__navigation-icon--next {\n  left: -2px;\n}\n.react-datepicker__navigation-icon--next::before {\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n  left: -7px;\n}\n.react-datepicker__navigation-icon--previous {\n  right: -2px;\n}\n.react-datepicker__navigation-icon--previous::before {\n  -webkit-transform: rotate(225deg);\n          transform: rotate(225deg);\n  right: -7px;\n}\n.react-datepicker__month-container {\n  float: left;\n}\n.react-datepicker__year {\n  margin: 0.4rem;\n  text-align: center;\n}\n.react-datepicker__year-wrapper {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  max-width: 180px;\n}\n.react-datepicker__year .react-datepicker__year-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n.react-datepicker__month {\n  margin: 0.4rem;\n  text-align: center;\n}\n.react-datepicker__month .react-datepicker__month-text,\n.react-datepicker__month .react-datepicker__quarter-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n.react-datepicker__input-time-container {\n  clear: both;\n  width: 100%;\n  float: left;\n  margin: 5px 0 10px 15px;\n  text-align: left;\n}\n.react-datepicker__input-time-container .react-datepicker-time__caption {\n  display: inline-block;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container {\n  display: inline-block;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {\n  display: inline-block;\n  margin-left: 10px;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {\n  width: auto;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {\n  -moz-appearance: textfield;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {\n  margin-left: 5px;\n  display: inline-block;\n}\n.react-datepicker__time-container {\n  float: right;\n  border-left: 1px solid #aeaeae;\n  width: 85px;\n}\n.react-datepicker__time-container--with-today-button {\n  display: inline;\n  border: 1px solid #aeaeae;\n  border-radius: 0.3rem;\n  position: absolute;\n  right: -72px;\n  top: 0;\n}\n.react-datepicker__time-container .react-datepicker__time {\n  position: relative;\n  background: white;\n  border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n  width: 85px;\n  overflow-x: hidden;\n  margin: 0 auto;\n  text-align: center;\n  border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n  list-style: none;\n  margin: 0;\n  height: calc(195px + (1.7rem / 2));\n  overflow-y: scroll;\n  padding-right: 0;\n  padding-left: 0;\n  width: 100%;\n  box-sizing: content-box;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n  height: 30px;\n  padding: 5px 10px;\n  white-space: nowrap;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n  cursor: pointer;\n  background-color: #f0f0f0;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n  background-color: #216ba5;\n  color: white;\n  font-weight: bold;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n  background-color: #216ba5;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n  color: #ccc;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n  cursor: default;\n  background-color: transparent;\n}\n.react-datepicker__week-number {\n  color: #ccc;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n.react-datepicker__week-number.react-datepicker__week-number--clickable {\n  cursor: pointer;\n}\n.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {\n  border-radius: 0.3rem;\n  background-color: #f0f0f0;\n}\n.react-datepicker__day-names,\n.react-datepicker__week {\n  white-space: nowrap;\n}\n.react-datepicker__day-names {\n  margin-bottom: -8px;\n}\n.react-datepicker__day-name,\n.react-datepicker__day,\n.react-datepicker__time-name {\n  color: #000;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n.react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,\n.react-datepicker__quarter--selected,\n.react-datepicker__quarter--in-selecting-range,\n.react-datepicker__quarter--in-range {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #fff;\n}\n.react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,\n.react-datepicker__quarter--selected:hover,\n.react-datepicker__quarter--in-selecting-range:hover,\n.react-datepicker__quarter--in-range:hover {\n  background-color: #1d5d90;\n}\n.react-datepicker__month--disabled,\n.react-datepicker__quarter--disabled {\n  color: #ccc;\n  pointer-events: none;\n}\n.react-datepicker__month--disabled:hover,\n.react-datepicker__quarter--disabled:hover {\n  cursor: default;\n  background-color: transparent;\n}\n.react-datepicker__day,\n.react-datepicker__month-text,\n.react-datepicker__quarter-text,\n.react-datepicker__year-text {\n  cursor: pointer;\n}\n.react-datepicker__day:hover,\n.react-datepicker__month-text:hover,\n.react-datepicker__quarter-text:hover,\n.react-datepicker__year-text:hover {\n  border-radius: 0.3rem;\n  background-color: #f0f0f0;\n}\n.react-datepicker__day--today,\n.react-datepicker__month-text--today,\n.react-datepicker__quarter-text--today,\n.react-datepicker__year-text--today {\n  font-weight: bold;\n}\n.react-datepicker__day--highlighted,\n.react-datepicker__month-text--highlighted,\n.react-datepicker__quarter-text--highlighted,\n.react-datepicker__year-text--highlighted {\n  border-radius: 0.3rem;\n  background-color: #3dcc4a;\n  color: #fff;\n}\n.react-datepicker__day--highlighted:hover,\n.react-datepicker__month-text--highlighted:hover,\n.react-datepicker__quarter-text--highlighted:hover,\n.react-datepicker__year-text--highlighted:hover {\n  background-color: #32be3f;\n}\n.react-datepicker__day--highlighted-custom-1,\n.react-datepicker__month-text--highlighted-custom-1,\n.react-datepicker__quarter-text--highlighted-custom-1,\n.react-datepicker__year-text--highlighted-custom-1 {\n  color: magenta;\n}\n.react-datepicker__day--highlighted-custom-2,\n.react-datepicker__month-text--highlighted-custom-2,\n.react-datepicker__quarter-text--highlighted-custom-2,\n.react-datepicker__year-text--highlighted-custom-2 {\n  color: green;\n}\n.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,\n.react-datepicker__month-text--selected,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--selected,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--selected,\n.react-datepicker__year-text--in-selecting-range,\n.react-datepicker__year-text--in-range {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #fff;\n}\n.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,\n.react-datepicker__month-text--selected:hover,\n.react-datepicker__month-text--in-selecting-range:hover,\n.react-datepicker__month-text--in-range:hover,\n.react-datepicker__quarter-text--selected:hover,\n.react-datepicker__quarter-text--in-selecting-range:hover,\n.react-datepicker__quarter-text--in-range:hover,\n.react-datepicker__year-text--selected:hover,\n.react-datepicker__year-text--in-selecting-range:hover,\n.react-datepicker__year-text--in-range:hover {\n  background-color: #1d5d90;\n}\n.react-datepicker__day--keyboard-selected,\n.react-datepicker__month-text--keyboard-selected,\n.react-datepicker__quarter-text--keyboard-selected,\n.react-datepicker__year-text--keyboard-selected {\n  border-radius: 0.3rem;\n  background-color: #2a87d0;\n  color: #fff;\n}\n.react-datepicker__day--keyboard-selected:hover,\n.react-datepicker__month-text--keyboard-selected:hover,\n.react-datepicker__quarter-text--keyboard-selected:hover,\n.react-datepicker__year-text--keyboard-selected:hover {\n  background-color: #1d5d90;\n}\n.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range),\n.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range),\n.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range),\n.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range) {\n  background-color: rgba(33, 107, 165, 0.5);\n}\n._3SAj4620ZxCTMkRgUKj7Z7 .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range),\n._3SAj4620ZxCTMkRgUKj7Z7 .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range),\n._3SAj4620ZxCTMkRgUKj7Z7 .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range),\n._3SAj4620ZxCTMkRgUKj7Z7 .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range) {\n  background-color: #f0f0f0;\n  color: #000;\n}\n.react-datepicker__day--disabled,\n.react-datepicker__month-text--disabled,\n.react-datepicker__quarter-text--disabled,\n.react-datepicker__year-text--disabled {\n  cursor: default;\n  color: #ccc;\n}\n.react-datepicker__day--disabled:hover,\n.react-datepicker__month-text--disabled:hover,\n.react-datepicker__quarter-text--disabled:hover,\n.react-datepicker__year-text--disabled:hover {\n  background-color: transparent;\n}\n.react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,\n.react-datepicker__quarter-text.react-datepicker__month--selected:hover,\n.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,\n.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,\n.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {\n  background-color: #216ba5;\n}\n.react-datepicker__month-text:hover,\n.react-datepicker__quarter-text:hover {\n  background-color: #f0f0f0;\n}\n.react-datepicker__input-container {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n}\n.react-datepicker__year-read-view,\n.react-datepicker__month-read-view,\n.react-datepicker__month-year-read-view {\n  border: 1px solid transparent;\n  border-radius: 0.3rem;\n  position: relative;\n}\n.react-datepicker__year-read-view:hover,\n.react-datepicker__month-read-view:hover,\n.react-datepicker__month-year-read-view:hover {\n  cursor: pointer;\n}\n.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n  border-top-color: #b3b3b3;\n}\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view--down-arrow {\n  -webkit-transform: rotate(135deg);\n          transform: rotate(135deg);\n  right: -16px;\n  top: 0;\n}\n.react-datepicker__year-dropdown,\n.react-datepicker__month-dropdown,\n.react-datepicker__month-year-dropdown {\n  background-color: #f0f0f0;\n  position: absolute;\n  width: 50%;\n  left: 25%;\n  top: 30px;\n  z-index: 1;\n  text-align: center;\n  border-radius: 0.3rem;\n  border: 1px solid #aeaeae;\n}\n.react-datepicker__year-dropdown:hover,\n.react-datepicker__month-dropdown:hover,\n.react-datepicker__month-year-dropdown:hover {\n  cursor: pointer;\n}\n.react-datepicker__year-dropdown--scrollable,\n.react-datepicker__month-dropdown--scrollable,\n.react-datepicker__month-year-dropdown--scrollable {\n  height: 150px;\n  overflow-y: scroll;\n}\n.react-datepicker__year-option,\n.react-datepicker__month-option,\n.react-datepicker__month-year-option {\n  line-height: 20px;\n  width: 100%;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n.react-datepicker__year-option:first-of-type,\n.react-datepicker__month-option:first-of-type,\n.react-datepicker__month-year-option:first-of-type {\n  border-top-left-radius: 0.3rem;\n  border-top-right-radius: 0.3rem;\n}\n.react-datepicker__year-option:last-of-type,\n.react-datepicker__month-option:last-of-type,\n.react-datepicker__month-year-option:last-of-type {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__year-option:hover,\n.react-datepicker__month-option:hover,\n.react-datepicker__month-year-option:hover {\n  background-color: #ccc;\n}\n.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,\n.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,\n.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {\n  border-bottom-color: #b3b3b3;\n}\n.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,\n.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,\n.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {\n  border-top-color: #b3b3b3;\n}\n.react-datepicker__year-option--selected,\n.react-datepicker__month-option--selected,\n.react-datepicker__month-year-option--selected {\n  position: absolute;\n  left: 15px;\n}\n.react-datepicker__close-icon {\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  outline: 0;\n  padding: 0 6px 0 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  display: table-cell;\n  vertical-align: middle;\n}\n.react-datepicker__close-icon::after {\n  cursor: pointer;\n  background-color: #216ba5;\n  color: #fff;\n  border-radius: 50%;\n  height: 16px;\n  width: 16px;\n  padding: 2px;\n  font-size: 12px;\n  line-height: 1;\n  text-align: center;\n  display: table-cell;\n  vertical-align: middle;\n  content: \"\\D7\";\n}\n.react-datepicker__today-button {\n  background: #f0f0f0;\n  border-top: 1px solid #aeaeae;\n  cursor: pointer;\n  text-align: center;\n  font-weight: bold;\n  padding: 5px 0;\n  clear: left;\n}\n.react-datepicker__portal {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.8);\n  left: 0;\n  top: 0;\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  z-index: 2147483647;\n}\n.react-datepicker__portal .react-datepicker__day-name,\n.react-datepicker__portal .react-datepicker__day,\n.react-datepicker__portal .react-datepicker__time-name {\n  width: 3rem;\n  line-height: 3rem;\n}\n@media (max-width: 400px), (max-height: 550px) {\n  .react-datepicker__portal .react-datepicker__day-name,\n.react-datepicker__portal .react-datepicker__day,\n.react-datepicker__portal .react-datepicker__time-name {\n    width: 2rem;\n    line-height: 2rem;\n  }\n}\n.react-datepicker__portal .react-datepicker__current-month,\n.react-datepicker__portal .react-datepicker-time__header {\n  font-size: 1.44rem;\n}\n/* stylelint-enable */\n._3X5QGNINiwa77cbEb9mEzZ {\n  display: inline-block;\n}\n._1DR69DMoP49Ux6kq7LUoGR {\n  display: block;\n  width: 100%;\n}\n._2oJDyYPkJRLltnyYbYWifk.react-datepicker {\n  --datepicker-cell-size: calc(var(--space-base) * 2.375);\n  box-shadow: var(--shadow-base);\n  border-color: var(--color-border);\n  border-radius: var(--radius-base);\n  font-family: var(--typography--fontFamily-normal);\n}\n._2oJDyYPkJRLltnyYbYWifk._1YVIHRF3DM3t3EzyRTDvbj {\n  box-shadow: none;\n}\n.react-datepicker__input-container,\n.react-datepicker-wrapper {\n  max-width: 100%;\n}\n._3X5QGNINiwa77cbEb9mEzZ .react-datepicker-popper {\n  z-index: var(--elevation-datepicker);\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__header {\n  padding: 0;\n  border-bottom: var(--border-base) solid var(--color-border);\n  background: var(--color-surface);\n}\n._2XaofeiwYq6Mon3dJkoPd_ {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  width: var(--datepicker-cell-size);\n  height: var(--datepicker-cell-size);\n  margin: 0;\n  border-radius: var(--radius-base);\n  color: var(--color-heading);\n  font-size: var(--typography--fontSize-base);\n  line-height: inherit;\n  background: var(--color-surface);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--outside-month {\n  border-radius: 0;\n  color: var(--color-text);\n  background: var(--color-surface--background);\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__month {\n  margin: 0;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--selected {\n  color: var(--color-text--reverse);\n  background: var(--color-interactive);\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day-names {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  margin: 0;\n  padding: var(--space-smallest) 0 0;\n  color: var(--color-text);\n  text-transform: uppercase;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day-name {\n  width: auto;\n  color: var(--color-text);\n  -ms-flex: 1;\n      flex: 1;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day:hover,\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day:focus {\n  background: var(--color-surface--hover);\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day:focus {\n  position: relative;\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--selected:hover,\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--selected:focus {\n  background: var(--color-interactive--hover);\n}\n._2lX9pishvsqKh-Hj11F0yo {\n  margin-top: var(--space-minuscule);\n  color: var(--color-heading);\n}\n";
 var styles = {"react-datepicker__month--selecting-range":"_3SAj4620ZxCTMkRgUKj7Z7","datePickerWrapper":"_3X5QGNINiwa77cbEb9mEzZ","fullWidth":"_1DR69DMoP49Ux6kq7LUoGR","datePicker":"_2oJDyYPkJRLltnyYbYWifk","inline-left":"_1YVIHRF3DM3t3EzyRTDvbj","inline-right":"_1YVIHRF3DM3t3EzyRTDvbj","inline":"_1YVIHRF3DM3t3EzyRTDvbj","header":"_2XaofeiwYq6Mon3dJkoPd_","month":"_2lX9pishvsqKh-Hj11F0yo"};

package/dist/InputDate/index.js

@@ -22,9 +22,9 @@ require('framer-motion');
 require('../InputValidation/index.js');
 require('../Spinner/index.js');
 require('@jobber/hooks');
+var lodash = require('lodash');
 require('react-datepicker');
 var index$3 = require('../DatePicker/index.js');
-var lodash = require('lodash');
 
 function InputDate(inputProps) {
     return (React__default.createElement(index$3.DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, smartAutofocus: false, activator: function (activatorProps) {

package/dist/List/index.js

@@ -14,11 +14,11 @@ var index$1 = require('../Text/index.js');
 require('@jobber/design');
 var index$2 = require('../Icon/index.js');
 var index$3 = require('../Heading/index.js');
+var lodash = require('lodash');
 require('../Content/index.js');
 require('react-markdown');
 var index$4$1 = require('../Emphasis/index.js');
 var index$6 = require('../Markdown/index.js');
-var lodash = require('lodash');
 
 var css = "._234cpupwZcQnNH7lwFvu3w {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.-W0NAXIbeNMPrAHa9AjQF:not(:last-child) {\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n._3gKGIvbWaCDPfDxdX_9dIp {\n  position: relative;\n}\n\n._3gKGIvbWaCDPfDxdX_9dIp:not(:last-child) ._234cpupwZcQnNH7lwFvu3w {\n  padding-bottom: var(--space-large);\n}\n";
 var styles = {"list":"_234cpupwZcQnNH7lwFvu3w","item":"-W0NAXIbeNMPrAHa9AjQF","section":"_3gKGIvbWaCDPfDxdX_9dIp"};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "2.73.0",
+  "version": "2.74.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -49,6 +49,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^10.3.0",
+    "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^12.0.2",
     "@types/classnames": "^2.2.7",
     "@types/glob": "^7.1.1",
@@ -84,5 +85,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "791d89bc711f8b1e3b3e3c70ef39c8a74fb6bffa"
+  "gitHead": "78e84cb5d7fd49daa2c90414a6244bfeb30b5f2b"
 }