@jobber/components 3.4.4 → 3.4.6-pre.6

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.4.5](https://github.com/GetJobber/atlantis/compare/@jobber/components@3.4.4...@jobber/components@3.4.5) (2023-03-06)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
 ## [3.4.4](https://github.com/GetJobber/atlantis/compare/@jobber/components@3.4.3...@jobber/components@3.4.4) (2023-03-03)
 
 **Note:** Version bump only for package @jobber/components

package/dist/Autocomplete/Autocomplete.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { XOR } from "ts-xor";
 import { GroupOption, Option } from "./Option";
 import { FormFieldProps } from "../FormField";

package/dist/Autocomplete/Menu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Option } from "./Option";
 interface MenuProps {
     readonly visible: boolean;

package/dist/Avatar/Avatar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { XOR } from "ts-xor";
 declare type AvatarSize = "base" | "large" | "small";
 interface AvatarFoundationProps {

package/dist/Banner/index.js

@@ -19,8 +19,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css$1 = ":root {\n  --flash--inset: var(--space-base);\n  --flash--inset--small: var(--space-small);\n}\n\n._364vcgV1m5AeWxKbtAvmwW {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-shadow: var(--shadow-base);\n  padding: var(--space-base);\n  padding: var(--space-base);\n  padding: var(--flash--inset);\n  color: var(--color-black);\n  background-color: var(--color-grey--lightest);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._3vGMT9on-QbjXBlSaiNcgm {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n._2iRHpLiGUYBO-8xY0h00rp {\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n\n._3GnUCvx5Y7mFbH2Z7IN5U- {\n  padding-top: var(--space-smallest);\n  padding-right: var(--space-base);\n  padding-right: var(--space-base);\n  padding-right: var(--flash--inset);\n}\n\n._3vGMT9on-QbjXBlSaiNcgm > * {\n  margin-top: var(--space-small);\n  margin-top: var(--space-small);\n  margin-top: var(--flash--inset--small);\n  margin-bottom: var(--space-small);\n  margin-bottom: var(--space-small);\n  margin-bottom: var(--flash--inset--small);\n}\n\n._3vGMT9on-QbjXBlSaiNcgm > *:first-child {\n  margin-top: 0;\n  margin-right: var(--space-base);\n}\n\n._3vGMT9on-QbjXBlSaiNcgm > *:last-child {\n  margin-bottom: 0;\n}\n\n._1S5EoHZng2ePaBlNMXhUYb ._3vGMT9on-QbjXBlSaiNcgm {\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n}\n\n._1S5EoHZng2ePaBlNMXhUYb ._3vGMT9on-QbjXBlSaiNcgm > * {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n._12QzEnq3z7-XCpLmgYARp {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n._2MtsHfzp46XdG3BZQtOLm- {\n  padding: var(--space-smallest);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  -ms-flex: 0;\n      flex: 0;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n}\n\n._2MtsHfzp46XdG3BZQtOLm-:hover {\n  background: rgba(0, 0, 0, 0.025);\n}\n\n._2MtsHfzp46XdG3BZQtOLm-:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n  background: rgba(0, 0, 0, 0.05);\n}\n";
-var styles = {"flash":"_364vcgV1m5AeWxKbtAvmwW","bannerContent":"_3vGMT9on-QbjXBlSaiNcgm","bannerChildren":"_2iRHpLiGUYBO-8xY0h00rp","dismissibleSpacing":"_3GnUCvx5Y7mFbH2Z7IN5U-","medium":"_1S5EoHZng2ePaBlNMXhUYb","bannerAction":"_12QzEnq3z7-XCpLmgYARp","closeButton":"_2MtsHfzp46XdG3BZQtOLm-"};
+var css$1 = ".XnQ3RJFzByInxjZ8LTsv8 {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-shadow: var(--shadow-base);\n  padding: var(--space-base);\n  color: var(--color-text);\n  background-color: var(--color-surface--background);\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._3vGMT9on-QbjXBlSaiNcgm {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\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-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n._2iRHpLiGUYBO-8xY0h00rp {\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n\n._3vGMT9on-QbjXBlSaiNcgm > *:last-child {\n  margin-bottom: 0;\n}\n\n._1S5EoHZng2ePaBlNMXhUYb ._3vGMT9on-QbjXBlSaiNcgm {\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n}\n\n._12QzEnq3z7-XCpLmgYARp {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n._2MtsHfzp46XdG3BZQtOLm- {\n  margin: calc(var(--space-smallest) * -1) 0;\n  padding: var(--space-smallest);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  -ms-flex: 0;\n      flex: 0;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n}\n\n._2MtsHfzp46XdG3BZQtOLm-:hover {\n  background: rgba(0, 0, 0, 0.025);\n}\n\n._2MtsHfzp46XdG3BZQtOLm-:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n  background: rgba(0, 0, 0, 0.05);\n}\n";
+var styles = {"banner":"XnQ3RJFzByInxjZ8LTsv8","bannerContent":"_3vGMT9on-QbjXBlSaiNcgm","bannerChildren":"_2iRHpLiGUYBO-8xY0h00rp","medium":"_1S5EoHZng2ePaBlNMXhUYb","bannerAction":"_12QzEnq3z7-XCpLmgYARp","closeButton":"_2MtsHfzp46XdG3BZQtOLm-"};
 styleInject_es.styleInject(css$1);
 
 var css = ".nw7Tf4jicBNmfENtxh7tG {\n  background-color: var(--color-informative--surface);\n}\n\n/* Our Banner \"surface\" colors should be lighter than they are so we're leaving the following alone for now */\n\n.myY4eq0vr_r4Twz0QcBwu {\n  background-color: var(--color-green--lighter);\n}\n\n.eExwEf69eCfam2C6Ekk5D {\n  background-color: var(--color-yellow--lighter);\n}\n\n._1U_-uPZepxvaZPO5hh8G4O {\n  background-color: var(--color-red--lighter);\n}\n";
@@ -28,21 +28,21 @@ var types = {"notice":"nw7Tf4jicBNmfENtxh7tG","success":"myY4eq0vr_r4Twz0QcBwu",
 styleInject_es.styleInject(css);
 
 function Banner(_a) {
-    var _b, _c;
-    var children = _a.children, type = _a.type, primaryAction = _a.primaryAction, _d = _a.dismissible, dismissible = _d === void 0 ? true : _d, onDismiss = _a.onDismiss;
-    var _e = tslib_es6.__read(React.useState(true), 2), showFlash = _e[0], setShowFlash = _e[1];
+    var _b;
+    var children = _a.children, type = _a.type, primaryAction = _a.primaryAction, _c = _a.dismissible, dismissible = _c === void 0 ? true : _c, onDismiss = _a.onDismiss;
+    var _d = tslib_es6.__read(React.useState(true), 2), showBanner = _d[0], setShowBanner = _d[1];
     var bannerWidths = {
         small: 320,
         medium: 480,
     };
-    var _f = tslib_es6.__read(jobberHooks.useResizeObserver({
+    var _e = tslib_es6.__read(jobberHooks.useResizeObserver({
         widths: bannerWidths,
-    }), 2), bannerRef = _f[0], _g = _f[1].width, bannerWidth = _g === void 0 ? bannerWidths.small : _g;
+    }), 2), bannerRef = _e[0], _f = _e[1].width, bannerWidth = _f === void 0 ? bannerWidths.small : _f;
     var iconColors = {
-        notice: "lightBlue",
-        success: "green",
-        warning: "yellow",
-        error: "red",
+        notice: "informative",
+        success: "success",
+        warning: "warning",
+        error: "critical",
     };
     if (primaryAction != undefined) {
         primaryAction = Object.assign({
@@ -51,14 +51,11 @@ function Banner(_a) {
             variation: type === "notice" ? "learning" : "work",
         }, primaryAction);
     }
-    var flashClassNames = classnames__default["default"](styles.flash, types[type], (_b = {},
+    var bannerClassNames = classnames__default["default"](styles.banner, types[type], (_b = {},
         _b[styles.medium] = bannerWidth >= bannerWidths.medium,
         _b));
-    var contentClassNames = classnames__default["default"](styles.bannerContent, (_c = {},
-        _c[styles.dismissibleSpacing] = dismissible,
-        _c));
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, showFlash && (React__default["default"].createElement("div", { className: flashClassNames, ref: bannerRef, role: type === "error" ? "alert" : "status" },
-        React__default["default"].createElement("div", { className: contentClassNames },
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, showBanner && (React__default["default"].createElement("div", { className: bannerClassNames, ref: bannerRef, role: type === "error" ? "alert" : "status" },
+        React__default["default"].createElement("div", { className: styles.bannerContent },
             React__default["default"].createElement("div", { className: styles.bannerChildren },
                 React__default["default"].createElement(BannerChildren, null, children)),
             primaryAction && (React__default["default"].createElement("div", { className: styles.bannerAction },
@@ -66,7 +63,7 @@ function Banner(_a) {
         dismissible && (React__default["default"].createElement("button", { className: styles.closeButton, onClick: handleClose, "aria-label": "Close this notification" },
             React__default["default"].createElement(Icon.Icon, { name: "cross", color: iconColors[type] })))))));
     function handleClose() {
-        setShowFlash(!showFlash);
+        setShowBanner(!showBanner);
         onDismiss && onDismiss();
     }
 }

package/dist/Card/CardHeader.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CardProps } from "./types";
 /**
  * Intended to be used in the Card component.

package/dist/Chips/Chip.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { InternalChipProps } from "./ChipTypes";
 export interface ChipProps extends Pick<InternalChipProps, "label" | "prefix" | "disabled" | "invalid"> {
     /**

package/dist/Chips/Chips.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { ChipsProps } from "./ChipsTypes";
 export declare function Chips(props: ChipsProps): JSX.Element;

package/dist/Chips/InternalChip.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { InternalChipProps } from "./ChipTypes";
 export declare function InternalChip({ label, active, disabled, invalid, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }: InternalChipProps): JSX.Element;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { InternalChipDismissibleProps } from "./InternalChipDismissibleTypes";
 export declare function InternalChipDismissible(props: InternalChipDismissibleProps): JSX.Element;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { ChipDismissibleInputProps } from "./InternalChipDismissibleTypes";
 export declare function InternalChipDismissibleInput(props: ChipDismissibleInputProps): JSX.Element;

package/dist/Chips/InternalChipMultiSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ChipMultiSelectProps } from "./ChipsTypes";
 declare type InternalChipChoiceMultipleProps = Pick<ChipMultiSelectProps, "selected" | "onChange" | "children" | "onClick">;
 export declare function InternalChipMultiSelect({ children, selected, onChange, onClick, }: InternalChipChoiceMultipleProps): JSX.Element;

package/dist/Chips/InternalChipSingleSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ChipSingleSelectProps } from "./ChipsTypes";
 declare type InternalChipChoiceProps = Pick<ChipSingleSelectProps, "selected" | "onChange" | "children" | "onClick" | "name">;
 export declare function InternalChipSingleSelect({ children, selected, name, onChange, onClick, }: InternalChipChoiceProps): JSX.Element;

package/dist/ConfirmationModal/ConfirmationModal.d.ts

@@ -74,5 +74,5 @@ interface StringMessage extends BaseConfirmationModalProps {
     message: string;
     children?: never;
 }
-export declare const ConfirmationModal: React.ForwardRefExoticComponent<(SimpleConfirmationModalProps & ChildrenMessage & React.RefAttributes<ConfirmationModalRef>) | (SimpleConfirmationModalProps & StringMessage & React.RefAttributes<ConfirmationModalRef>) | (ComplexConfirmationModalProps & ChildrenMessage & React.RefAttributes<ConfirmationModalRef>) | (ComplexConfirmationModalProps & StringMessage & React.RefAttributes<ConfirmationModalRef>)>;
+export declare const ConfirmationModal: React.ForwardRefExoticComponent<(SimpleConfirmationModalProps & ChildrenMessage & React.RefAttributes<ConfirmationModalRef>) | (SimpleConfirmationModalProps & StringMessage & React.RefAttributes<ConfirmationModalRef>) | (Pick<ComplexConfirmationModalProps & ChildrenMessage, "children" | "size" | "title" | "variation" | "message" | "open" | "onRequestClose" | "onCancel" | "confirmLabel" | "cancelLabel" | "onConfirm"> & React.RefAttributes<ConfirmationModalRef>) | (Pick<ComplexConfirmationModalProps & StringMessage, "children" | "size" | "title" | "variation" | "message" | "open" | "onRequestClose" | "onCancel" | "confirmLabel" | "cancelLabel" | "onConfirm"> & React.RefAttributes<ConfirmationModalRef>)>;
 export {};

package/dist/Countdown/Countdown.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CivilDate } from "@std-proposal/temporal";
 /**
  * Options for deciding how much information is shown to the user

package/dist/DataDump/DataDump.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface DataDebuggerProps {
     /**
      * Label for the DataDump

package/dist/DataTable/Footer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Table } from "@tanstack/react-table";
 export declare type ViewType = "desktop" | "handheld";
 export interface FooterProps<T> {

package/dist/DataTable/Header.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Row, Table } from "@tanstack/react-table";
 import { SortingType } from "./types";
 interface HeaderProps<T> {

package/dist/DataTable/Pagination.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Table } from "@tanstack/react-table";
 interface PaginationProps<T> {
     table: Table<T>;

package/dist/DataTable/SortIcon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare enum SortDirection {
     ascending = 0,
     descending = 1,

package/dist/DatePicker/DatePickerCustomHeader.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { ReactDatePickerCustomHeaderProps } from "react-datepicker";
 export declare function DatePickerCustomHeader({ monthDate, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }: ReactDatePickerCustomHeaderProps): JSX.Element;

package/dist/Divider/Divider.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface DividerProps {
     /**
      * The weight of the divider.

package/dist/FormField/FormField.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { FormFieldProps } from "./FormFieldTypes";
 export declare function FormField(props: FormFieldProps): JSX.Element;

package/dist/FormField/FormFieldDescription.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface FormFieldDescriptionProps {
     readonly id: string;
     readonly description: string;

package/dist/FormField/FormFieldPostFix.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface FormFieldPostFixProps {
     readonly variation: "select" | "spinner";
 }

package/dist/FormatDate/FormatDate.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CivilDate } from "@std-proposal/temporal";
 interface FormatDateProps {
     /**

package/dist/FormatEmail/FormatEmail.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface FormatEmailProps {
     /**
      * Email address to format

package/dist/FormatFile/FormatFileDeleteButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface DeleteButtonProps {
     size?: "base" | "large";
     onDelete?: () => void;

package/dist/FormatFile/InternalThumbnail.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FileUpload } from "../InputFile";
 interface InternalThumbnailProps {
     readonly name?: string;

package/dist/FormatRelativeDateTime/FormatRelativeDateTime.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CivilDateTime } from "@std-proposal/temporal";
 interface FormatRelativeDateTimeProps {
     /**

package/dist/FormatTime/FormatTime.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CivilTime } from "@std-proposal/temporal";
 interface FormatTimeProps {
     /**

package/dist/Gallery/Gallery.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { GalleryProps } from "./GalleryTypes";
 export declare function Gallery({ files, size, max, onDelete }: GalleryProps): JSX.Element;

package/dist/Gallery/index.js

@@ -6,20 +6,19 @@ var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var LightBox = require('../LightBox-6aea2128.js');
+var LightBox = require('../LightBox-4eb2e6f0.js');
 var FormatFile = require('../FormatFile-44fc7b58.js');
 var Button = require('../Button-cd30df0f.js');
-require('react-image-lightbox');
-require('react-image-lightbox/style.css');
+require('framer-motion');
+require('react-dom');
+require('lodash/debounce');
+require('@jobber/hooks');
+require('../ButtonDismiss-a9590195.js');
 require('filesize');
 require('../ConfirmationModal-e95f46d7.js');
-require('@jobber/hooks');
 require('../Modal-cc3bd7bf.js');
-require('react-dom');
-require('framer-motion');
 require('../Heading-a9a66964.js');
 require('../Typography-fbe0ed6e.js');
-require('../ButtonDismiss-a9590195.js');
 require('../Content-18de5fbb.js');
 require('../Markdown-b53e0308.js');
 require('react-markdown');

package/dist/Icon/Icon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconColorNames, IconNames, IconSizes } from "@jobber/design";
 export { IconColorNames, IconNames } from "@jobber/design";
 export interface IconProps {

package/dist/InputAvatar/InputAvatar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AvatarProps } from "../Avatar";
 import { FileUpload, UploadParams } from "../InputFile";
 interface InputAvatarProps extends Omit<AvatarProps, "size"> {

package/dist/InputDate/InputDate.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CommonFormFieldProps, FormFieldProps } from "../FormField";
 interface InputDateProps extends CommonFormFieldProps, Pick<FormFieldProps, "readonly" | "disabled" | "onEnter" | "onFocus" | "inputRef" | "validations" | "placeholder" | "onChange" | "onBlur"> {
     /**

package/dist/InputEmail/InputEmail.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CommonFormFieldProps, FormFieldProps } from "../FormField";
 declare type InputEmailProps = CommonFormFieldProps & Pick<FormFieldProps, "maxLength" | "readonly" | "validations" | "defaultValue">;
 export declare const validationMessage = "Please enter a valid email";

package/dist/InputFile/InputFile.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface FileUpload {
     /**
      * File Identifier

package/dist/InputPassword/InputPassword.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CommonFormFieldProps, FormFieldProps } from "../FormField";
 interface InputPasswordProps extends CommonFormFieldProps, Pick<FormFieldProps, "autocomplete" | "onEnter" | "onFocus" | "onBlur" | "inputRef" | "validations" | "defaultValue"> {
     value?: string;

package/dist/InputTime/InputTime.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { InputTimeProps } from "./InputTimeProps";
 export declare function InputTime({ defaultValue, value, onChange, ...params }: InputTimeProps): JSX.Element;

package/dist/InputTime/InputTimeSafari.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { InputTimeProps } from "./InputTimeProps";
 export declare function InputTimeSafari({ defaultValue, value, onChange, ...params }: InputTimeProps): JSX.Element;

package/dist/InputValidation/InputValidation.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface InputValidationProps {
     /**
      * Validation message to be displayed

package/dist/LightBox/LightBox.d.ts

@@ -1,4 +1,4 @@
-import "react-image-lightbox/style.css";
+import React from "react";
 interface PresentedImage {
     title?: string;
     caption?: string;
@@ -33,5 +33,5 @@ interface LightBoxProps {
      */
     onRequestClose(options: RequestCloseOptions): void;
 }
-export declare function LightBox({ open, images, imageIndex, onRequestClose, }: LightBoxProps): JSX.Element;
+export declare function LightBox({ open, images, imageIndex, onRequestClose, }: LightBoxProps): React.ReactPortal;
 export {};

package/dist/LightBox/index.js

@@ -2,12 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var LightBox = require('../LightBox-6aea2128.js');
+var LightBox = require('../LightBox-4eb2e6f0.js');
 require('../tslib.es6-5b50eb8e.js');
 require('react');
-require('react-image-lightbox');
+require('framer-motion');
+require('react-dom');
+require('lodash/debounce');
+require('@jobber/hooks');
 require('../style-inject.es-dcee06b6.js');
-require('react-image-lightbox/style.css');
+require('../ButtonDismiss-a9590195.js');
+require('../Button-cd30df0f.js');
+require('classnames');
+require('react-router-dom');
+require('../Icon-d5ad1a6d.js');
+require('@jobber/design');
+require('../Typography-fbe0ed6e.js');
 
 
 

package/dist/LightBox-4eb2e6f0.js

@@ -0,0 +1,118 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
+var React = require('react');
+var framerMotion = require('framer-motion');
+var ReactDOM = require('react-dom');
+var debounce = require('lodash/debounce');
+var jobberHooks = require('@jobber/hooks');
+var styleInject_es = require('./style-inject.es-dcee06b6.js');
+var ButtonDismiss = require('./ButtonDismiss-a9590195.js');
+var Button = require('./Button-cd30df0f.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+
+var css = "._2qgU3ylcPWUJGRthB18cb,\n._27gh3HPkx5J1Ru4Tqp_1tF {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  z-index: var(--elevation-base);\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n}\n\n._2qgU3ylcPWUJGRthB18cb {\n  right: var(--space-base);\n}\n\n._27gh3HPkx5J1Ru4Tqp_1tF {\n  left: var(--space-base);\n}\n\n._3FuSx2b8rfxjzTQKeVn6MW {\n  display: -ms-flexbox;\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--elevation-modal);\n  width: 100%;\n  height: 100%;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-direction: column;\n      flex-direction: column;\n}\n\n._2gGRj41uQJhcl0zcSNgsOA {\n  display: -ms-flexbox;\n  display: flex;\n  z-index: var(--elevation-base);\n  padding: var(--space-small) var(--space-base);\n  color: var(--color-text--reverse--secondary);\n  font-size: var(--typography--fontSize-large);\n  background-color: var(--color-surface--reverse);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n}\n\n.oyIA3-aR1Fvwn0lpp1Mgx {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._1PPDSsP7v3FAZG3DA--Oq3 {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  position: relative;\n  -ms-flex: 1 1 0px;\n      flex: 1 1 0;\n  min-height: 0;\n}\n\n._23IH8HE3ZATpurQqLyWj-l {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--color-overlay);\n}\n\n._2UNyNw_u8HDWIzzxcSLUU6 {\n  position: absolute;\n  top: 50%;\n  max-width: 100%;\n  max-height: 100%;\n  margin: auto;\n}\n";
+var styles = {"next":"_2qgU3ylcPWUJGRthB18cb","prev":"_27gh3HPkx5J1Ru4Tqp_1tF","lightboxWrapper":"_3FuSx2b8rfxjzTQKeVn6MW","toolbar":"_2gGRj41uQJhcl0zcSNgsOA","title":"oyIA3-aR1Fvwn0lpp1Mgx","imagesWrapper":"_1PPDSsP7v3FAZG3DA--Oq3","overlay":"_23IH8HE3ZATpurQqLyWj-l","image":"_2UNyNw_u8HDWIzzxcSLUU6"};
+styleInject_es.styleInject(css);
+
+var swipeConfidenceThreshold = 10000;
+var swipePower = function (offset, velocity) {
+    return Math.abs(offset) * velocity;
+};
+var variants = {
+    enter: function (direction) {
+        return {
+            x: direction > 0 ? 1000 : -1000,
+            opacity: 0,
+        };
+    },
+    center: {
+        zIndex: 1,
+        x: 0,
+        opacity: 1,
+    },
+    exit: function (direction) {
+        return {
+            zIndex: 0,
+            x: direction < 0 ? 1000 : -1000,
+            opacity: 0,
+        };
+    },
+};
+var imageTransition = {
+    x: { type: "spring", stiffness: 300, damping: 30 },
+    opacity: { duration: 0.2 },
+};
+// A little bit more than the transition's duration
+// We're doing this to prevent a bug from framer-motion
+// https://github.com/framer/motion/issues/1769
+var debounceDuration = 250;
+function LightBox(_a) {
+    var open = _a.open, images = _a.images, _b = _a.imageIndex, imageIndex = _b === void 0 ? 0 : _b, onRequestClose = _a.onRequestClose;
+    var _c = tslib_es6.__read(React.useState(imageIndex), 2), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
+    var _d = tslib_es6.__read(React.useState(0), 2), direction = _d[0], setDirection = _d[1];
+    var lightboxRef = jobberHooks.useFocusTrap(open);
+    var debouncedHandleNext = debounce__default["default"](handleMoveNext, debounceDuration);
+    var debouncedHandlePrevious = debounce__default["default"](handleMovePrevious, debounceDuration);
+    jobberHooks.useRefocusOnActivator(open);
+    jobberHooks.useOnKeyDown(handleRequestClose, "Escape");
+    jobberHooks.useOnKeyDown(debouncedHandlePrevious, {
+        key: "ArrowLeft",
+    });
+    jobberHooks.useOnKeyDown(debouncedHandleNext, {
+        key: "ArrowRight",
+    });
+    React.useEffect(function () {
+        setCurrentImageIndex(imageIndex);
+    }, [imageIndex, open]);
+    var template = (React__default["default"].createElement(React__default["default"].Fragment, null, open && (React__default["default"].createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox", key: "Lightbox", ref: lightboxRef },
+        React__default["default"].createElement("div", { className: styles.toolbar },
+            React__default["default"].createElement("span", { className: styles.title }, images[currentImageIndex].title),
+            React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })),
+        React__default["default"].createElement("div", { className: styles.imagesWrapper },
+            React__default["default"].createElement(framerMotion.AnimatePresence, { initial: false },
+                React__default["default"].createElement(framerMotion.motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, style: { y: "-50%" }, initial: "enter", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
+        React__default["default"].createElement(PreviousButton, { onClick: debouncedHandlePrevious }),
+        React__default["default"].createElement(NextButton, { onClick: debouncedHandleNext }),
+        React__default["default"].createElement("div", { className: styles.toolbar }, images[currentImageIndex].caption),
+        React__default["default"].createElement("div", { className: styles.overlay, onClick: handleRequestClose })))));
+    return ReactDOM__default["default"].createPortal(template, document.body);
+    function handleMovePrevious() {
+        setDirection(-1);
+        setCurrentImageIndex((currentImageIndex + images.length - 1) % images.length);
+    }
+    function handleMoveNext() {
+        setDirection(1);
+        setCurrentImageIndex((currentImageIndex + 1) % images.length);
+    }
+    function handleRequestClose() {
+        onRequestClose({ lastPosition: currentImageIndex });
+    }
+    function handleOnDragEnd(event, _a) {
+        var offset = _a.offset, velocity = _a.velocity;
+        var swipe = swipePower(offset.x, velocity.x);
+        if (swipe < -swipeConfidenceThreshold) {
+            handleMoveNext();
+        }
+        else if (swipe > swipeConfidenceThreshold) {
+            handleMovePrevious();
+        }
+    }
+}
+function PreviousButton(_a) {
+    var onClick = _a.onClick;
+    return (React__default["default"].createElement("div", { className: styles.prev },
+        React__default["default"].createElement(Button.Button, { size: "large", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
+}
+function NextButton(_a) {
+    var onClick = _a.onClick;
+    return (React__default["default"].createElement("div", { className: styles.next },
+        React__default["default"].createElement(Button.Button, { size: "large", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
+}
+
+exports.LightBox = LightBox;

package/dist/List/List.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ListItemProps } from "./ListItem";
 interface ListProps {
     /**

package/dist/List/List.stories.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { ListItemProps } from "./ListItem";
 export declare const StorybookListPropsInterface: (_: ListItemProps) => JSX.Element;

package/dist/Markdown/Markdown.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface MarkdownProps {
     /**
      * Rich text content.

package/dist/Menu/Menu.stories.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { SectionProps } from ".";
 export declare const StorybookMenuSectionShape: (_: SectionProps) => JSX.Element;

package/dist/ProgressBar/ProgressBar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import sizes from "./Sizes.css";
 interface ProgressBarProps {
     /**

package/dist/RecurringSelect/CurrentRecurrenceComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RecurrenceRule } from "./types";
 interface RecurringSelectProps {
     disabled?: boolean;

package/dist/RecurringSelect/RecurringSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RecurrenceRule } from "./types";
 interface RecurringSelectProps {
     readonly disabled?: boolean;

package/dist/RecurringSelect/components/DayOfMonthSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DayOfMonth } from "../types";
 interface DayOfMonthSelectProps {
     selectedDays: Set<DayOfMonth>;

package/dist/RecurringSelect/components/MonthlyDayOfWeekSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { WeekDay } from "../types";
 interface MonthlyDayOfWeekSelectProps {
     disabled: boolean;

package/dist/RecurringSelect/components/MonthlySelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DurationPeriod } from "../types";
 interface MonthlySelectProps {
     disabled: boolean;

package/dist/RecurringSelect/components/WeeklySelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { WeekDay } from "../types";
 interface WeeklySelectProps {
     disabled: boolean;

package/dist/Select/Select.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FormFieldProps } from "../FormField";
 /**
  * The following is the same as:

package/dist/Spinner/Spinner.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface SpinnerProps {
     /**
      * Specifies the size of the spinner

package/dist/StatusLabel/StatusLabel.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type StatusType = "success" | "warning" | "critical" | "inactive" | "informative";
 export interface StatusLabelType {
     readonly statusLabel: string;

package/dist/Switch/Switch.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface SwitchProps {
     readonly value?: boolean;
     /**

package/dist/Table/Cells/CellCurrency.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CurrencyType } from "@jobber/formatters";
 import { CellNumericProps } from "./CellNumeric";
 interface CellCurrencyProps extends CellNumericProps {

package/dist/Table/Cells/CellNumeric.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface CellNumericProps {
     value: number | string;
 }

package/dist/Toast/Toast.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { XOR } from "ts-xor";
 interface BaseToastProps {
     readonly variation?: "info" | "success" | "error";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "3.4.4",
+  "version": "3.4.6-pre.6+932bbb8b",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,9 +18,9 @@
     "dist/*"
   ],
   "dependencies": {
-    "@jobber/design": "^0.29.3",
-    "@jobber/formatters": "^0.2.1",
-    "@jobber/hooks": "^1.13.0",
+    "@jobber/design": "^0.29.4-pre.34+932bbb8b",
+    "@jobber/formatters": "^0.2.2-pre.34+932bbb8b",
+    "@jobber/hooks": "^1.13.1-pre.19+932bbb8b",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -41,7 +41,6 @@
     "react-datepicker": "^4.10.0",
     "react-dropzone": "^11.0.2",
     "react-hook-form": "^6.15.8",
-    "react-image-lightbox": "^5.1.1",
     "react-markdown": "^8.0.3",
     "react-popper": "^2.2.5",
     "react-router-dom": "~5.2.0",
@@ -53,13 +52,13 @@
     "@rollup/plugin-commonjs": "^23.0.0",
     "@rollup/plugin-typescript": "^9.0.1",
     "@testing-library/jest-dom": "^5.10.1",
-    "@testing-library/react": "^10.3.0",
+    "@testing-library/react": "^14.0.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",
-    "@types/react": "^16.9.43",
-    "@types/react-dom": "^16.8.4",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "@types/uuid": "^8.3.3",
     "autoprefixer": "^9.5.1",
     "copyfiles": "^2.4.1",
@@ -77,13 +76,13 @@
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
   },
   "browserslist": [
     "last 1 version",
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "df4f27f66d6c395606d792bc11ccc80ea72c04e6"
+  "gitHead": "932bbb8b9dd1cdacc858efb1f7feed546a710d11"
 }

package/rollup.config.js

@@ -50,8 +50,6 @@ export default {
     "react-countdown",
     "react-popper",
     "react-datepicker",
-    "react-image-lightbox",
-    "react-image-lightbox/style.css",
     "react-dropzone",
     "axios",
     "filesize",

package/dist/LightBox-6aea2128.js

@@ -1,42 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
-var React = require('react');
-var ExternalLightBox = require('react-image-lightbox');
-var styleInject_es = require('./style-inject.es-dcee06b6.js');
-require('react-image-lightbox/style.css');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var ExternalLightBox__default = /*#__PURE__*/_interopDefaultLegacy(ExternalLightBox);
-
-var css = "._23H2TI8rNmnv0zlHOHZooa.ril__outer {\n  font-family: var(--typography--fontFamily-normal);\n  background-color: transparent;\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer:before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-overlay);\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer .ril__captionContent {\n  color: var(--color-greyBlue--lighter);\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer .ril__toolbarItem {\n  color: var(--color-greyBlue--lighter);\n}\n";
-var styles = {"wrapper":"_23H2TI8rNmnv0zlHOHZooa"};
-styleInject_es.styleInject(css);
-
-function LightBox(_a) {
-    var open = _a.open, images = _a.images, _b = _a.imageIndex, imageIndex = _b === void 0 ? 0 : _b, onRequestClose = _a.onRequestClose;
-    var _c = tslib_es6.__read(React.useState(imageIndex), 2), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
-    var nextSrc = undefined;
-    var prevSrc = undefined;
-    if (images.length > 1) {
-        nextSrc = images[(currentImageIndex + 1) % images.length].url;
-        prevSrc =
-            images[(currentImageIndex + images.length - 1) % images.length].url;
-    }
-    React.useEffect(function () {
-        setCurrentImageIndex(imageIndex);
-    }, [imageIndex]);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, open && (React__default["default"].createElement(ExternalLightBox__default["default"], { wrapperClassName: styles.wrapper, mainSrc: images[currentImageIndex].url, enableZoom: false, nextSrc: nextSrc, prevSrc: prevSrc, imageTitle: images[currentImageIndex].title, imageCaption: images[currentImageIndex].caption, onCloseRequest: function () {
-            return onRequestClose({ lastPosition: currentImageIndex });
-        }, onMovePrevRequest: handleMovePrevious, onMoveNextRequest: handleMoveNext }))));
-    function handleMovePrevious() {
-        setCurrentImageIndex((currentImageIndex + images.length - 1) % images.length);
-    }
-    function handleMoveNext() {
-        setCurrentImageIndex((currentImageIndex + 1) % images.length);
-    }
-}
-
-exports.LightBox = LightBox;