@jobber/components 4.26.9-JOB-75261.10 → 4.27.0

package/dist/ConfirmationModal/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ConfirmationModal = require('../ConfirmationModal-1f48131f.js');
+var ConfirmationModal = require('../ConfirmationModal-5df4ef33.js');
 require('react');
 require('@jobber/hooks/useOnKeyDown');
 require('../Modal-b684b273.js');
@@ -19,8 +19,8 @@ require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../ButtonDismiss-c7ee94a9.js');
-require('../Content-a6590328.js');
-require('../Markdown-53a0bfda.js');
+require('../Content-2ca1ffe1.js');
+require('../Markdown-f6748dcb.js');
 require('react-markdown');
 require('../Text-e7ed0974.js');
 require('../Emphasis-76a10790.js');

package/dist/{ConfirmationModal-1f48131f.js → ConfirmationModal-5df4ef33.js}

@@ -3,8 +3,8 @@
 var React = require('react');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var Modal = require('./Modal-b684b273.js');
-var Content = require('./Content-a6590328.js');
-var Markdown = require('./Markdown-53a0bfda.js');
+var Content = require('./Content-2ca1ffe1.js');
+var Markdown = require('./Markdown-f6748dcb.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Content/Content.d.ts

@@ -8,6 +8,15 @@ interface ContentProps {
      * @default base
      */
     readonly spacing?: keyof typeof spacings;
+    /**
+     * Change the wrapping element to be one of the available
+     * semantic tags.
+     *
+     * @default 'div'
+     */
+    readonly type?: "section" | "aside" | "header" | "footer" | "article" | "main" | "div";
 }
-export declare function Content({ children, spacing }: ContentProps): JSX.Element;
+export declare function Content({ children, spacing, type, }: ContentProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
 export {};

package/dist/Content/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Content = require('../Content-a6590328.js');
+var Content = require('../Content-2ca1ffe1.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/{Content-a6590328.js → Content-2ca1ffe1.js}

@@ -6,7 +6,6 @@ var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 var css_248z$1 = ".SRYe3DkjH1c- > :not(:last-child) {\n  margin-bottom: calc(16px * 1);\n  margin-bottom: var(--space-base);\n}\n\n.rDJFaGPzCbE- > :not(:last-child) {\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n}\n\n._7TZ4MI3kr4Y- > :not(:last-child) {\n  margin-bottom: calc(16px * 1.5);\n  margin-bottom: var(--space-large);\n}\n";
@@ -17,9 +16,9 @@ var css_248z = "._4On2F-4nWuY- {\n  padding: 0;\n  padding: var(--public-content
 var styles = {"padded":"_4On2F-4nWuY-"};
 styleInject_es.styleInject(css_248z);
 
-function Content({ children, spacing = "base" }) {
+function Content({ children, spacing = "base", type = "div", }) {
     const className = classnames__default["default"](styles.padded, spacings[spacing]);
-    return React__default["default"].createElement("div", { className: className }, children);
+    return React.createElement(type, { className }, children);
 }
 
 exports.Content = Content;

package/dist/DataDump/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var Card = require('../Card-4553732a.js');
-var Content = require('../Content-a6590328.js');
+var Content = require('../Content-2ca1ffe1.js');
 var Emphasis = require('../Emphasis-76a10790.js');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/DataList/DataList.const.d.ts

@@ -1,2 +1,13 @@
+/**
+ *  Grab the type from breakpoints const
+ */
+type ValuesOf<T extends readonly unknown[]> = T[number];
+export type Breakpoints = ValuesOf<typeof BREAKPOINTS>;
 export declare const EMPTY_FILTER_RESULTS_MESSAGE = "No Results for Selected Filters";
 export declare const EMPTY_FILTER_RESULTS_ACTION_LABEL = "Clear Filters";
+/**
+ * Breakpoints that we support
+ */
+export declare const BREAKPOINTS: readonly ["xs", "sm", "md", "lg", "xl"];
+export declare const BREAKPOINT_SIZES: Record<Breakpoints, number>;
+export {};

package/dist/DataList/DataList.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { DataListLayout } from "./components/DataListLayout";
 import { DataListObject, DataListProps } from "./DataList.types";
-export declare function DataList<T extends DataListObject>({ data, headers, loading, filterApplied, children, title, totalCount, }: DataListProps<T>): JSX.Element;
+export declare function DataList<T extends DataListObject>({ data, headers, loading, filterApplied, children, title, totalCount, headerVisibility, }: DataListProps<T>): JSX.Element;
 export declare namespace DataList {
     var Layout: typeof DataListLayout;
     var EmptyState: typeof import("./components/EmptyState").EmptyState;

package/dist/DataList/DataList.stories.d.ts

@@ -4,3 +4,4 @@ declare const _default: ComponentMeta<typeof DataList>;
 export default _default;
 export declare const Basic: ComponentStory<typeof DataList>;
 export declare const EmptyState: ComponentStory<typeof DataList>;
+export declare const Breakpoints: ComponentStory<typeof DataList>;

package/dist/DataList/DataList.types.d.ts

@@ -1,4 +1,6 @@
 import { ReactElement, ReactNode } from "react";
+import { Breakpoints } from "./DataList.const";
+export { Breakpoints } from "./DataList.const";
 export type DataListItemType<T extends DataListObject[]> = Record<keyof T[number], ReactElement>;
 export type DataListItemTypeFromHeader<TData extends DataListObject, THeader extends DataListHeader<TData>> = Record<keyof THeader, ReactElement>;
 export interface DataListObject {
@@ -54,4 +56,12 @@ export interface DataListProps<T extends DataListObject> {
      * in the list
      */
     readonly totalCount?: number | null;
+    /**
+     * Determine if the header is visible at a given breakpoint. If one isn't provided,
+     * it will use the value from the next smallest breakpoint that has a value.
+     * @default { xs: true, sm: true, md: true, lg: true, xl: true }
+     */
+    readonly headerVisibility?: {
+        [Breakpoint in Breakpoints]?: boolean;
+    };
 }

package/dist/DataList/DataList.utils.d.ts

@@ -1,10 +1,15 @@
 import React, { ReactElement } from "react";
 import { DataListHeader, DataListItemType, DataListItemTypeFromHeader, DataListObject } from "./DataList.types";
 import { EmptyStateProps } from "./components/EmptyState";
+import { Breakpoints } from "./DataList.const";
 /**
  * Return the child component that matches the `type` provided
  */
 export declare function getCompoundComponent<T>(children: ReactElement | ReactElement[], type: ReactElement<T>["type"]): ReactElement<T> | undefined;
+/**
+ * Return all instances child component that matches the `type` provided
+ */
+export declare function getCompoundComponents<T>(children: ReactElement | ReactElement[], type: ReactElement<T>["type"]): ReactElement<T>[];
 /**
  * Generate the default elements the DataList would use on the data provided.
  */
@@ -22,4 +27,5 @@ interface UseDataListEmptyStateProps {
  * Modify EmptyState to include an empty filter results when filtering happens
  */
 export declare function generateDataListEmptyState({ children, isFilterApplied, setIsFilterApplied, }: UseDataListEmptyStateProps): React.ReactElement<EmptyStateProps> | undefined;
+export declare function sortSizeProp(sizeProp: Breakpoints[]): ("xs" | "sm" | "md" | "lg" | "xl")[];
 export {};

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

@@ -1,6 +1,11 @@
 /// <reference types="react" />
-import { DataListItemType, DataListObject } from "../../DataList.types";
+import { Breakpoints, DataListItemType, DataListObject } from "../../DataList.types";
 export interface DataListLayoutProps<T extends DataListObject> {
-    children: (item: DataListItemType<T[]>) => JSX.Element;
+    readonly children: (item: DataListItemType<T[]>) => JSX.Element;
+    /**
+     * The breakpoint at which the layout should be displayed. It will be rendered until a layout with a larger breakpoint is found.
+     * @default "xs"
+     */
+    readonly size?: Breakpoints;
 }
 export declare function DataListLayout<T extends DataListObject>(_: DataListLayoutProps<T>): JSX.Element;

package/dist/DataList/components/DataListLayoutInternal/DataListHeader.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { Breakpoints } from "../../DataList.const";
+import { DataListHeader as DataListHeaderType, DataListItemTypeFromHeader, DataListObject, DataListProps } from "../../DataList.types";
+import { DataListLayoutProps } from "../DataListLayout/DataListLayout";
+interface DataListHeaderProps<T extends DataListObject> {
+    readonly layouts: React.ReactElement<DataListLayoutProps<T>>[] | undefined;
+    readonly mediaMatches?: Record<Breakpoints, boolean>;
+    readonly headerData?: DataListItemTypeFromHeader<T, DataListHeaderType<T>>;
+    readonly headerVisibility: NonNullable<DataListProps<T>["headerVisibility"]>;
+}
+export declare function DataListHeader<T extends DataListObject>({ layouts, mediaMatches, headerData, headerVisibility, }: DataListHeaderProps<T>): JSX.Element;
+export {};

package/dist/DataList/components/DataListLayoutInternal/DataListItems.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Breakpoints } from "../../DataList.const";
+import { DataListObject } from "../../DataList.types";
+import { DataListLayoutProps } from "../DataListLayout/DataListLayout";
+interface DataListItemsProps<T extends DataListObject> {
+    readonly layouts: React.ReactElement<DataListLayoutProps<T>>[] | undefined;
+    readonly mediaMatches?: Record<Breakpoints, boolean>;
+    readonly data: T[];
+}
+export declare function DataListItems<T extends DataListObject>({ layouts, mediaMatches, data, }: DataListItemsProps<T>): JSX.Element;
+export {};

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { Breakpoints } from "../../DataList.const";
+import { DataListObject } from "../../DataList.types";
+import { DataListLayoutProps } from "../DataListLayout/DataListLayout";
+interface DataListLayoutInternalProps<T extends DataListObject> {
+    readonly layouts: React.ReactElement<DataListLayoutProps<T>>[] | undefined;
+    readonly renderLayout: (layout: React.ReactElement<DataListLayoutProps<T>>) => JSX.Element;
+    readonly mediaMatches?: Record<Breakpoints, boolean>;
+}
+export declare function DataListLayoutInternal<T extends DataListObject>({ layouts, renderLayout, mediaMatches, }: DataListLayoutInternalProps<T>): JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export { DataListItems } from "./DataListItems";
+export { DataListHeader } from "./DataListHeader";

package/dist/DataList/hooks/useLayoutMediaQueries.d.ts

@@ -0,0 +1 @@
+export declare function useLayoutMediaQueries(): Record<"xs" | "sm" | "md" | "lg" | "xl", boolean>;

package/dist/DataTable/Body.d.ts

@@ -5,7 +5,6 @@ interface BodyProps<T> {
     onRowClick?: (row: Row<T>) => void;
     height?: number;
     emptyState?: ReactNode | ReactNode[];
-    loading: boolean;
 }
-export declare function Body<T extends object>({ table, onRowClick, emptyState, loading, }: BodyProps<T>): JSX.Element;
+export declare function Body<T extends object>({ table, onRowClick, emptyState, }: BodyProps<T>): JSX.Element;
 export {};

package/dist/DataTable/DataTable.d.ts

@@ -49,9 +49,5 @@ export interface DataTableProps<T> {
      * The elements to display when the data table is empty
      */
     emptyState?: ReactNode | ReactNode[];
-    /**
-     * When true, shows the loading state of the DataTable
-     */
-    loading?: boolean;
 }
-export declare function DataTable<T extends object>({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, loading, }: DataTableProps<T>): JSX.Element;
+export declare function DataTable<T extends object>({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, }: DataTableProps<T>): JSX.Element;

package/dist/DataTable/Pagination.d.ts

@@ -4,7 +4,6 @@ interface PaginationProps<T> {
     table: Table<T>;
     itemsPerPage?: number[];
     totalItems: number;
-    loading: boolean;
 }
-export declare function Pagination<T extends object>({ table, itemsPerPage, totalItems, loading, }: PaginationProps<T>): JSX.Element;
+export declare function Pagination<T extends object>({ table, itemsPerPage, totalItems, }: PaginationProps<T>): JSX.Element;
 export {};

package/dist/DataTable/index.js

@@ -7,12 +7,10 @@ var classnames = require('classnames');
 var React = require('react');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Glimmer = require('../Glimmer-a14ad7fd.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var Option = require('../Option-63267b27.js');
 var Button = require('../Button-7698424c.js');
 var Text = require('../Text-e7ed0974.js');
-require('../Content-a6590328.js');
 require('../FormField-0f880b07.js');
 require('uuid');
 require('react-hook-form');
@@ -52,16 +50,14 @@ var css_248z$3 = ".m5A5oeRFaMs- {\n  position: relative;\n  border: calc(16px /
 var styles$3 = {"dataTableContainer":"m5A5oeRFaMs-","tableContainer":"cY-5BrIIUg8-","table":"y8xnHe7fwrI-","pinFirstColumn":"t8QYvdtkQXQ-","stickyHeader":"Y21JuHX6fhk-","pinFirstHeaderSortable":"PJEX8dlqCMA-","sortableColumn":"_9ps4aWGs8W0-","clickableRow":"_59XEEB8l5pI-","emptyState":"a2BGGBkY5J8-"};
 styleInject_es.styleInject(css_248z$3);
 
-function Body({ table, onRowClick, emptyState, loading, }) {
+function Body({ table, onRowClick, emptyState, }) {
     const bodyRowClasses = classnames__default["default"]({ [styles$3.clickableRow]: !!onRowClick });
     const handleRowClick = React.useCallback((row) => () => {
         if (onRowClick == undefined)
             return;
         onRowClick(row);
     }, [onRowClick]);
-    const loaderRows = table.getState().pagination.pageSize;
-    const loaderColumns = table.getAllColumns().length;
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, !loading ? (table.getRowModel().rows.length ? (React__default["default"].createElement("tbody", null, table.getRowModel().rows.map(row => {
+    return table.getRowModel().rows.length ? (React__default["default"].createElement("tbody", null, table.getRowModel().rows.map(row => {
         return (React__default["default"].createElement("tr", { key: row.id, onClick: handleRowClick(row), className: bodyRowClasses }, row.getVisibleCells().map(cell => {
             return (React__default["default"].createElement("td", { key: cell.id, style: {
                     width: cell.column.getSize(),
@@ -69,8 +65,7 @@ function Body({ table, onRowClick, emptyState, loading, }) {
                     maxWidth: cell.column.columnDef.maxSize,
                 } }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())));
         })));
-    }))) : (React__default["default"].createElement("div", { className: classnames__default["default"](styles$3.emptyState) }, emptyState))) : (React__default["default"].createElement("tbody", null, Array.from(Array(loaderRows).keys()).map(row => (React__default["default"].createElement("tr", { key: row }, Array.from(Array(loaderColumns).keys()).map(arr => (React__default["default"].createElement("td", { key: arr },
-        React__default["default"].createElement(Glimmer.Glimmer, null)))))))))));
+    }))) : (React__default["default"].createElement("div", { className: classnames__default["default"](styles$3.emptyState) }, emptyState));
 }
 
 function createTableSettings(data, columns, options) {
@@ -131,14 +126,15 @@ var styles$2 = {"pagination":"zn0VRVhObt0-","paginationInfo":"_1d4uh90gfSI-","pa
 styleInject_es.styleInject(css_248z$2);
 
 const defaultItemsPerPageOptions = ["10", "20", "30", "40", "50"];
-function Pagination({ table, itemsPerPage, totalItems, loading, }) {
+function Pagination({ table, itemsPerPage, totalItems, }) {
     const { pageIndex, pageSize } = table.getState().pagination;
     const totalRows = totalItems;
     const firstPosition = pageIndex * pageSize + 1;
     const secondPosition = Math.min(totalRows, pageSize * (pageIndex + 1));
     const itemsPerPageOptions = React.useMemo(() => { var _a; return (_a = itemsPerPage === null || itemsPerPage === void 0 ? void 0 : itemsPerPage.map(item => String(item))) !== null && _a !== void 0 ? _a : defaultItemsPerPageOptions; }, [itemsPerPage]);
     return secondPosition <= 0 ? (React__default["default"].createElement("div", { className: styles$2.pagination },
-        React__default["default"].createElement("div", { className: styles$2.paginationInfo }, !loading ? React__default["default"].createElement(Text.Text, null, "No items") : React__default["default"].createElement(Glimmer.Glimmer, { width: 200 })))) : (React__default["default"].createElement("div", { className: styles$2.pagination },
+        React__default["default"].createElement("div", { className: styles$2.paginationInfo },
+            React__default["default"].createElement(Text.Text, null, "No items")))) : (React__default["default"].createElement("div", { className: styles$2.pagination },
         React__default["default"].createElement("div", { className: styles$2.paginationInfo }, `Showing ${firstPosition}-${secondPosition} of ${totalRows} items`),
         React__default["default"].createElement("div", { className: styles$2.paginationNav },
             React__default["default"].createElement("div", { className: styles$2.paginationSelect },
@@ -237,7 +233,7 @@ function Header({ table, stickyHeader, sorting, onRowClick, }) {
     }))))));
 }
 
-function DataTable({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, loading = false, }) {
+function DataTable({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, }) {
     const [ref, { exactWidth }] = jobberHooks.useResizeObserver();
     const tableSettings = createTableSettings(data, columns, {
         pagination,
@@ -251,7 +247,7 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
         React__default["default"].createElement("div", { className: styles$3.tableContainer, style: { height }, ref: ref },
             React__default["default"].createElement("table", { className: tableClasses },
                 React__default["default"].createElement(Header, { table: table, sorting: sorting, onRowClick: onRowClick, stickyHeader: stickyHeader }),
-                React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick, height: height ? height * 0.7 : undefined, emptyState: emptyState, loading: loading }),
+                React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick, height: height ? height * 0.7 : undefined, emptyState: emptyState }),
                 table.getRowModel().rows.length &&
                     exactWidth &&
                     exactWidth > jobberHooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table, viewType: "desktop" })) : null)),
@@ -260,7 +256,7 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
             exactWidth <= jobberHooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table })) : null,
         pagination && (React__default["default"].createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
                 ? pagination.totalItems
-                : table.getCoreRowModel().rows.length, loading: loading }))));
+                : table.getCoreRowModel().rows.length }))));
 }
 
 const mockContainerWidth = (exactWidth) => {

package/dist/FeatureSwitch/index.js

@@ -8,11 +8,11 @@ var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Heading = require('../Heading-a1191b15.js');
 var Text = require('../Text-e7ed0974.js');
-var Content = require('../Content-a6590328.js');
+var Content = require('../Content-2ca1ffe1.js');
 var Switch = require('../Switch-e75145cc.js');
 var Button = require('../Button-7698424c.js');
 var Emphasis = require('../Emphasis-76a10790.js');
-var Markdown = require('../Markdown-53a0bfda.js');
+var Markdown = require('../Markdown-f6748dcb.js');
 require('../Typography-fd6f932a.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');

package/dist/FormatFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-7a77494f.js');
+var FormatFile = require('../FormatFile-7462422e.js');
 require('react');
 require('classnames');
 require('filesize');
@@ -12,7 +12,7 @@ require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-fd6f932a.js');
-require('../ConfirmationModal-1f48131f.js');
+require('../ConfirmationModal-5df4ef33.js');
 require('@jobber/hooks/useOnKeyDown');
 require('../Modal-b684b273.js');
 require('react-dom');
@@ -21,12 +21,12 @@ require('@jobber/hooks/useRefocusOnActivator');
 require('@jobber/hooks/useFocusTrap');
 require('../Heading-a1191b15.js');
 require('../ButtonDismiss-c7ee94a9.js');
-require('../Content-a6590328.js');
-require('../Markdown-53a0bfda.js');
+require('../Content-2ca1ffe1.js');
+require('../Markdown-f6748dcb.js');
 require('react-markdown');
 require('../Text-e7ed0974.js');
 require('../Emphasis-76a10790.js');
-require('../Glimmer-a14ad7fd.js');
+require('../Glimmer-cfa92a88.js');
 require('../tslib.es6-5b8768b7.js');
 require('../ProgressBar-5dfc1885.js');
 

package/dist/{FormatFile-7a77494f.js → FormatFile-7462422e.js}

@@ -5,8 +5,8 @@ var classnames = require('classnames');
 var getHumanReadableFileSize = require('filesize');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Button = require('./Button-7698424c.js');
-var ConfirmationModal = require('./ConfirmationModal-1f48131f.js');
-var Glimmer = require('./Glimmer-a14ad7fd.js');
+var ConfirmationModal = require('./ConfirmationModal-5df4ef33.js');
+var Glimmer = require('./Glimmer-cfa92a88.js');
 var Icon = require('./Icon-405a216c.js');
 var Typography = require('./Typography-fd6f932a.js');
 var Text = require('./Text-e7ed0974.js');

package/dist/Gallery/index.js

@@ -6,7 +6,7 @@ var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var LightBox = require('../LightBox-b59ee23b.js');
-var FormatFile = require('../FormatFile-7a77494f.js');
+var FormatFile = require('../FormatFile-7462422e.js');
 var Button = require('../Button-7698424c.js');
 require('framer-motion');
 require('react-dom');
@@ -16,16 +16,16 @@ require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useFocusTrap');
 require('../ButtonDismiss-c7ee94a9.js');
 require('filesize');
-require('../ConfirmationModal-1f48131f.js');
+require('../ConfirmationModal-5df4ef33.js');
 require('../Modal-b684b273.js');
 require('../Heading-a1191b15.js');
 require('../Typography-fd6f932a.js');
-require('../Content-a6590328.js');
-require('../Markdown-53a0bfda.js');
+require('../Content-2ca1ffe1.js');
+require('../Markdown-f6748dcb.js');
 require('react-markdown');
 require('../Text-e7ed0974.js');
 require('../Emphasis-76a10790.js');
-require('../Glimmer-a14ad7fd.js');
+require('../Glimmer-cfa92a88.js');
 require('../tslib.es6-5b8768b7.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/Glimmer/index.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Glimmer = require('../Glimmer-a14ad7fd.js');
+var Glimmer = require('../Glimmer-cfa92a88.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Content-a6590328.js');
+require('../Content-2ca1ffe1.js');
 
 
 

package/dist/{Glimmer-a14ad7fd.js → Glimmer-cfa92a88.js}

@@ -4,7 +4,7 @@ var tslib_es6 = require('./tslib.es6-5b8768b7.js');
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Content = require('./Content-a6590328.js');
+var Content = require('./Content-2ca1ffe1.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputAvatar/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Avatar = require('../Avatar-1aa30ee1.js');
-var InputFile = require('../InputFile-ee80726f.js');
+var InputFile = require('../InputFile-54d4531d.js');
 var ProgressBar = require('../ProgressBar-5dfc1885.js');
 var Button = require('../Button-7698424c.js');
 require('classnames');
@@ -16,7 +16,7 @@ require('@jobber/design');
 require('react-dropzone');
 require('axios');
 require('uuid');
-require('../Content-a6590328.js');
+require('../Content-2ca1ffe1.js');
 require('../Typography-fd6f932a.js');
 require('react-router-dom');
 

package/dist/InputFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputFile = require('../InputFile-ee80726f.js');
+var InputFile = require('../InputFile-54d4531d.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('classnames');
@@ -15,7 +15,7 @@ require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-fd6f932a.js');
-require('../Content-a6590328.js');
+require('../Content-2ca1ffe1.js');
 
 
 

package/dist/{InputFile-ee80726f.js → InputFile-54d4531d.js}

@@ -8,7 +8,7 @@ var axios = require('axios');
 var uuid = require('uuid');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Button = require('./Button-7698424c.js');
-var Content = require('./Content-a6590328.js');
+var Content = require('./Content-2ca1ffe1.js');
 var Typography = require('./Typography-fd6f932a.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/List/index.js

@@ -11,11 +11,11 @@ var Icon = require('../Icon-405a216c.js');
 var Text = require('../Text-e7ed0974.js');
 var Heading = require('../Heading-a1191b15.js');
 var Typography = require('../Typography-fd6f932a.js');
-var Markdown = require('../Markdown-53a0bfda.js');
+var Markdown = require('../Markdown-f6748dcb.js');
 var Emphasis = require('../Emphasis-76a10790.js');
 require('@jobber/design');
 require('react-markdown');
-require('../Content-a6590328.js');
+require('../Content-2ca1ffe1.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Markdown/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Markdown = require('../Markdown-53a0bfda.js');
+var Markdown = require('../Markdown-f6748dcb.js');
 require('react');
 require('react-markdown');
 require('../Text-e7ed0974.js');
@@ -11,7 +11,7 @@ require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Emphasis-76a10790.js');
 require('../Heading-a1191b15.js');
-require('../Content-a6590328.js');
+require('../Content-2ca1ffe1.js');
 
 
 

package/dist/{Markdown-53a0bfda.js → Markdown-f6748dcb.js}

@@ -5,7 +5,7 @@ var ReactMarkdown = require('react-markdown');
 var Text = require('./Text-e7ed0974.js');
 var Emphasis = require('./Emphasis-76a10790.js');
 var Heading = require('./Heading-a1191b15.js');
-var Content = require('./Content-a6590328.js');
+var Content = require('./Content-2ca1ffe1.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Page/index.js

@@ -8,8 +8,8 @@ var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Heading = require('../Heading-a1191b15.js');
 var Text = require('../Text-e7ed0974.js');
-var Content = require('../Content-a6590328.js');
-var Markdown = require('../Markdown-53a0bfda.js');
+var Content = require('../Content-2ca1ffe1.js');
+var Markdown = require('../Markdown-f6748dcb.js');
 var Button = require('../Button-7698424c.js');
 var Menu = require('../Menu-2b5fd0b2.js');
 var Emphasis = require('../Emphasis-76a10790.js');

package/dist/RecurringSelect/index.js

@@ -12,7 +12,7 @@ require('../Typography-fd6f932a.js');
 var Option = require('../Option-63267b27.js');
 var InputNumber = require('../InputNumber-49873d31.js');
 var InputGroup = require('../InputGroup-3fdde16b.js');
-var Content = require('../Content-a6590328.js');
+var Content = require('../Content-2ca1ffe1.js');
 require('../FormField-0f880b07.js');
 require('../tslib.es6-5b8768b7.js');
 require('react-hook-form');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.26.9-JOB-75261.10+493a1c3c",
+  "version": "4.27.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.44.4",
-    "@jobber/formatters": "^0.2.2",
+    "@jobber/formatters": "*",
     "@jobber/hooks": "^2.1.5",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "493a1c3c084f53371d31038edb0ccb07a2f57cce"
+  "gitHead": "8ae1169e35b132825ecad1640d58a511375d481c"
 }