@jobber/components 4.46.0 → 4.46.1-JOB-79340.32

package/dist/ConfirmationModal/index.js

@@ -2,28 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ConfirmationModal = require('../ConfirmationModal-92f07027.js');
+var ConfirmationModal = require('../ConfirmationModal-285c3cbe.js');
 require('react');
 require('@jobber/hooks/useOnKeyDown');
-require('../Modal-dcdc0032.js');
+require('../Modal-c17cc105.js');
 require('react-dom');
 require('classnames');
 require('framer-motion');
 require('@jobber/hooks/useRefocusOnActivator');
 require('@jobber/hooks/useFocusTrap');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Heading-4562900a.js');
-require('../Typography-9bff9c91.js');
-require('../Button-d89f2271.js');
+require('../Heading-4cde9989.js');
+require('../Typography-83915c54.js');
+require('../Button-db6114a6.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../ButtonDismiss-250840a4.js');
+require('../ButtonDismiss-1ccb84ec.js');
 require('../Content-2ca1ffe1.js');
-require('../Markdown-b37cf9ec.js');
+require('../Markdown-d53b01bf.js');
 require('react-markdown');
-require('../Text-59bde58c.js');
-require('../Emphasis-cc3456ac.js');
+require('../Text-54334431.js');
+require('../Emphasis-e10dde65.js');
 
 
 

package/dist/{ConfirmationModal-92f07027.js → ConfirmationModal-285c3cbe.js}

@@ -2,9 +2,9 @@
 
 var React = require('react');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Modal = require('./Modal-dcdc0032.js');
+var Modal = require('./Modal-c17cc105.js');
 var Content = require('./Content-2ca1ffe1.js');
-var Markdown = require('./Markdown-b37cf9ec.js');
+var Markdown = require('./Markdown-d53b01bf.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Content/Content.d.ts

@@ -12,7 +12,7 @@ interface ContentProps {
      * Change the wrapping element to be one of the available
      * semantic tags.
      *
-     * @default 'div'
+     * @default "div"
      */
     readonly type?: "section" | "aside" | "header" | "footer" | "article" | "main" | "div";
 }

package/dist/DataDump/index.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-69304e99.js');
+var Card = require('../Card-116af709.js');
 var Content = require('../Content-2ca1ffe1.js');
-var Emphasis = require('../Emphasis-cc3456ac.js');
+var Emphasis = require('../Emphasis-e10dde65.js');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Heading-4562900a.js');
-require('../Typography-9bff9c91.js');
-require('../Button-d89f2271.js');
+require('../Heading-4cde9989.js');
+require('../Typography-83915c54.js');
+require('../Button-db6114a6.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-cec53b50.js');
+require('../Menu-2e64307a.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');

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

@@ -117,7 +117,15 @@ export interface DataListSearchProps {
      * prepended by "Search" or just falls back to "Search".
      */
     readonly placeholder?: string;
-    readonly onSearch: (search: string) => void;
+    /**
+     * The initial value of the search input.
+     *
+     * Updating this prop after the component has mounted will rerender the
+     * component with the new value. Only update the value of this when you
+     * absolutely have to.
+     */
+    readonly initialValue?: string;
+    readonly onSearch: (value: string) => void;
 }
 export interface DataListFiltersProps {
     readonly children: ReactElement | ReactElement[];

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

@@ -3,6 +3,6 @@ import { DataListSearchProps } from "../../DataList.types";
 export declare const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
 export declare function DataListSearch(_: DataListSearchProps): null;
 /**
- * Renders the DataList.Search component
+ * Renders the DataList.Search component.
  */
 export declare function InternalDataListSearch(): JSX.Element | null;

package/dist/DataList/index.js

@@ -5,45 +5,46 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Text = require('../Text-59bde58c.js');
+var Text = require('../Text-54334431.js');
 var Glimmer = require('../Glimmer-cfa92a88.js');
 var noop = require('lodash/noop');
 var design = require('@jobber/design');
 var framerMotion = require('framer-motion');
 var classnames = require('classnames');
-var Tooltip = require('../Tooltip-59dbab5b.js');
-var Button = require('../Button-d89f2271.js');
+var Tooltip = require('../Tooltip-ae33a335.js');
+var Button = require('../Button-db6114a6.js');
 var useInView = require('@jobber/hooks/useInView');
 var isEmpty = require('lodash/isEmpty');
-var InlineLabel = require('../InlineLabel-3d461632.js');
+var InlineLabel = require('../InlineLabel-a24706c4.js');
 var FormatDate = require('../FormatDate-70ea5b43.js');
-var Heading = require('../Heading-4562900a.js');
+var Heading = require('../Heading-4cde9989.js');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var ReactDOM = require('react-dom');
-var Checkbox = require('../Checkbox-eac63b7f.js');
+var Checkbox = require('../Checkbox-bc4bc968.js');
 var reactRouterDom = require('react-router-dom');
 var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
-var Popover = require('../Popover-d401fb54.js');
+var Popover = require('../Popover-7c966790.js');
 var Content = require('../Content-2ca1ffe1.js');
-var Chip = require('../Chip-4d8e6370.js');
+var Chips = require('../Chips-5ff2b9d2.js');
 require('@jobber/hooks/useAssert');
 require('../Avatar-1aa30ee1.js');
 require('color');
-var Typography = require('../Typography-9bff9c91.js');
+var Typography = require('../Typography-83915c54.js');
 require('react-popper');
+var Chip = require('../Chip-00e281e9.js');
+require('lodash/sortBy');
+require('@jobber/hooks/useLiveAnnounce');
 var debounce = require('lodash/debounce');
-var InputText = require('../InputText-5ac5cfe0.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
+var InputText = require('../InputText-ab237501.js');
 var Icon = require('../Icon-405a216c.js');
 require('uuid');
 require('react-hook-form');
-require('../ButtonDismiss-250840a4.js');
-require('lodash/sortBy');
-require('@jobber/hooks/useLiveAnnounce');
-require('../FormField-bef41ec9.js');
-require('../InputValidation-4e809bdd.js');
+require('../ButtonDismiss-1ccb84ec.js');
+require('../FormField-fa9254dc.js');
+require('../InputValidation-377d6c62.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -101,6 +102,19 @@ function useDataListContext() {
 }
 
 function useMediaQuery(CSSMediaQuery) {
+    /**
+     * matchMedia have had full support for browsers since 2012 but jest, being a
+     * lite version of a DOM, doesn't support it.
+     *
+     * Instead of the consumers mocking matchMedia on every usage of DataList,
+     * we can just return true to mimic the largest screen we support.
+     *
+     * In the event that the consumer wants to test the DataList on different
+     * screen sizes, they can use the `mockViewportWidth` function from
+     * `@jobber/components/useBreakpoints`.
+     */
+    if (window.matchMedia === undefined)
+        return true;
     const [matches, setMatches] = React.useState(window.matchMedia(CSSMediaQuery).matches);
     React.useEffect(() => {
         const media = window.matchMedia(CSSMediaQuery);
@@ -484,6 +498,8 @@ function InternalDataListItemActions() {
     if (!itemActionComponent)
         return null;
     const { children } = itemActionComponent.props;
+    if (!children)
+        return null;
     return (React__default["default"].createElement(framerMotion.motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
             duration: TRANSITION_DURATION_IN_SECONDS,
             delay: TRANSITION_DELAY_IN_SECONDS,
@@ -707,11 +723,11 @@ function DataListSort() {
         React__default["default"].createElement(Popover.Popover, { attachTo: divRef, open: showPopover, onRequestClose: () => setShowPopover(false) },
             React__default["default"].createElement(Content.Content, null,
                 React__default["default"].createElement(Heading.Heading, { level: 5 }, "Sort by"),
-                React__default["default"].createElement(Chip.Chips, { selected: (state === null || state === void 0 ? void 0 : state.key) || "none", onChange: handleKeyChange }, sortByOptions.map(({ label, value }) => (React__default["default"].createElement(Chip.Chip, { key: label, label: label, value: value })))),
+                React__default["default"].createElement(Chips.Chips, { selected: (state === null || state === void 0 ? void 0 : state.key) || "none", onChange: handleKeyChange }, sortByOptions.map(({ label, value }) => (React__default["default"].createElement(Chip.Chip, { key: label, label: label, value: value, role: "radio" })))),
                 React__default["default"].createElement(Heading.Heading, { level: 5 }, "Ordered by"),
-                React__default["default"].createElement(Chip.Chips, { selected: state === null || state === void 0 ? void 0 : state.order, onChange: handleSortingChange },
-                    React__default["default"].createElement(Chip.Chip, { label: "Ascending", value: "asc", disabled: canChangeOrder }),
-                    React__default["default"].createElement(Chip.Chip, { label: "Descending", value: "desc", disabled: canChangeOrder }))))));
+                React__default["default"].createElement(Chips.Chips, { selected: (state === null || state === void 0 ? void 0 : state.order) || "", onChange: handleSortingChange },
+                    React__default["default"].createElement(Chip.Chip, { label: "Ascending", value: "asc", disabled: canChangeOrder, role: "radio" }),
+                    React__default["default"].createElement(Chip.Chip, { label: "Descending", value: "desc", disabled: canChangeOrder, role: "radio" }))))));
     function getSortByOptions() {
         const options = sortable.reduce((acc, sort) => {
             const label = headers[sort];
@@ -731,14 +747,14 @@ function DataListSort() {
         return `Sort by: ${label}, ${state.order}`;
     }
     function handleKeyChange(value) {
-        if (value && value !== "none") {
+        if (value && value !== "none" && value !== (state === null || state === void 0 ? void 0 : state.order)) {
             onSort({ key: value, order: (state === null || state === void 0 ? void 0 : state.order) || "asc" });
             return;
         }
         onSort(undefined);
     }
     function handleSortingChange(value) {
-        if ((state === null || state === void 0 ? void 0 : state.key) && value) {
+        if ((state === null || state === void 0 ? void 0 : state.key) && value && value !== (state === null || state === void 0 ? void 0 : state.order)) {
             onSort({ key: state.key, order: value });
             return;
         }
@@ -811,7 +827,7 @@ function DataListSearch(_) {
     return null;
 }
 /**
- * Renders the DataList.Search component
+ * Renders the DataList.Search component.
  */
 function InternalDataListSearch() {
     const inputRef = React.useRef(null);
@@ -820,14 +836,18 @@ function InternalDataListSearch() {
     const debouncedSearch = React.useCallback(debounce__default["default"]((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, SEARCH_DEBOUNCE_DELAY), [searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props.onSearch]);
     if (!searchComponent)
         return null;
-    const { placeholder } = searchComponent.props;
+    const { placeholder, initialValue } = searchComponent.props;
     return (React__default["default"].createElement("div", { className: classnames__default["default"]({
             [styles$4.withNoFilters]: !filterComponent && !sorting,
         }) },
         React__default["default"].createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames__default["default"](styles$4.searchInput, {
                 [styles$4.searchInputVisible]: visible,
             }) },
-            React__default["default"].createElement(InputText.InputText, { ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, size: "small" })),
+            React__default["default"].createElement(InputText.InputText
+            // If the initial value changes, reset the input.
+            , { 
+                // If the initial value changes, reset the input.
+                key: initialValue, defaultValue: initialValue, ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, size: "small" })),
         React__default["default"].createElement("div", { className: styles$4.searchButton },
             React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: visible, initialChild: React__default["default"].createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React__default["default"].createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
     function getPlaceholder() {
@@ -1054,6 +1074,9 @@ DataList.EmptyState = DataListEmptyState;
 DataList.Filters = DataListFilters;
 /**
  * Enables the search functionality of the DataList.
+ *
+ * Since the debounce is implemented within the component, it can only be an
+ * uncontrolled component. Thus the lack of a `value` prop.
  */
 DataList.Search = DataListSearch;
 /**

package/dist/DataTable/index.js

@@ -9,20 +9,20 @@ var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Glimmer = require('../Glimmer-cfa92a88.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-9f4a65da.js');
-var Button = require('../Button-d89f2271.js');
-var Text = require('../Text-59bde58c.js');
+var Option = require('../Option-07a24acd.js');
+var Button = require('../Button-db6114a6.js');
+var Text = require('../Text-54334431.js');
 require('../Content-2ca1ffe1.js');
-require('../FormField-bef41ec9.js');
+require('../FormField-fa9254dc.js');
 require('uuid');
 require('react-hook-form');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../InputValidation-4e809bdd.js');
+require('../InputValidation-377d6c62.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 require('react-router-dom');
-require('../Typography-9bff9c91.js');
+require('../Typography-83915c54.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/DatePicker/index.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DatePicker = require('../DatePicker-39d2dc8b.js');
+var DatePicker = require('../DatePicker-49213434.js');
 require('react');
 require('classnames');
 require('react-datepicker');
 require('@jobber/hooks/useRefocusOnActivator');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Typography-9bff9c91.js');
-require('../Button-d89f2271.js');
+require('../Typography-83915c54.js');
+require('../Button-db6114a6.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/{DatePicker-39d2dc8b.js → DatePicker-49213434.js}

@@ -5,8 +5,8 @@ var classnames = require('classnames');
 var ReactDatePicker = require('react-datepicker');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Typography = require('./Typography-9bff9c91.js');
-var Button = require('./Button-d89f2271.js');
+var Typography = require('./Typography-83915c54.js');
+var Button = require('./Button-db6114a6.js');
 var omit = require('lodash/omit');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/DescriptionList/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Typography = require('../Typography-9bff9c91.js');
+var Typography = require('../Typography-83915c54.js');
 require('classnames');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/Disclosure/index.js

@@ -6,7 +6,7 @@ var React = require('react');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Icon = require('../Icon-405a216c.js');
-var Typography = require('../Typography-9bff9c91.js');
+var Typography = require('../Typography-83915c54.js');
 require('@jobber/design');
 require('classnames');
 

package/dist/Drawer/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Heading = require('../Heading-4562900a.js');
-var ButtonDismiss = require('../ButtonDismiss-250840a4.js');
-require('../Typography-9bff9c91.js');
-require('../Button-d89f2271.js');
+var Heading = require('../Heading-4cde9989.js');
+var ButtonDismiss = require('../ButtonDismiss-1ccb84ec.js');
+require('../Typography-83915c54.js');
+require('../Button-db6114a6.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/Emphasis/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Emphasis = require('../Emphasis-cc3456ac.js');
+var Emphasis = require('../Emphasis-e10dde65.js');
 require('react');
-require('../Typography-9bff9c91.js');
+require('../Typography-83915c54.js');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
 

package/dist/{Emphasis-cc3456ac.js → Emphasis-e10dde65.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Typography = require('./Typography-9bff9c91.js');
+var Typography = require('./Typography-83915c54.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/FeatureSwitch/index.js

@@ -6,14 +6,14 @@ var React = require('react');
 var framerMotion = require('framer-motion');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Heading = require('../Heading-4562900a.js');
-var Text = require('../Text-59bde58c.js');
+var Heading = require('../Heading-4cde9989.js');
+var Text = require('../Text-54334431.js');
 var Content = require('../Content-2ca1ffe1.js');
-var Switch = require('../Switch-165f01e3.js');
-var Button = require('../Button-d89f2271.js');
-var Emphasis = require('../Emphasis-cc3456ac.js');
-var Markdown = require('../Markdown-b37cf9ec.js');
-require('../Typography-9bff9c91.js');
+var Switch = require('../Switch-cc9b645c.js');
+var Button = require('../Button-db6114a6.js');
+var Emphasis = require('../Emphasis-e10dde65.js');
+var Markdown = require('../Markdown-d53b01bf.js');
+require('../Typography-83915c54.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/Flex/Flex.d.ts

@@ -0,0 +1,32 @@
+import { PropsWithChildren } from "react";
+import { ColumnKeys, Direction, Spacing } from "./Flex.types";
+interface FlexProps extends PropsWithChildren {
+    /**
+     * Determine how the children gets laid out
+     *
+     * **Supported keys**
+     * - `"grow"` - Grows to the space available. If all children are set to
+     *   grow, then they'll have equal width.
+     * - `"shrink"` - Shrinks to the smallest size possible. Normally the size of
+     *   the child.
+     */
+    readonly template: ColumnKeys[];
+    /**
+     * Adjusts the alignment of the Flex children.
+     */
+    readonly align?: "start" | "end" | "center";
+    /**
+     * The spacing between the children.
+     *
+     *  @default "base"
+     */
+    readonly gap?: Spacing;
+    /**
+     * The direction of the content.
+     *
+     * @default "row"
+     */
+    readonly direction?: Direction;
+}
+export declare function Flex({ align, children, direction, gap, template, }: FlexProps): JSX.Element;
+export {};

package/dist/Flex/Flex.types.d.ts

@@ -0,0 +1,6 @@
+export type ColumnKeys = "shrink" | "grow";
+export type Direction = "row" | "column";
+export declare const spacing: readonly ["none", "smallest", "smaller", "small", "base", "large"];
+type ValuesOfSpacing<T extends typeof spacing> = T[number];
+export type Spacing = ValuesOfSpacing<typeof spacing>;
+export {};

package/dist/Flex/index.d.ts

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

package/dist/Flex/index.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classnames = require('classnames');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css_248z = "._8VpnrMKmsqQ- {\n  display: grid;\n  /* If this gets wrapped in a flex container, it should take the remaining space */\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.ooF1YfV4Usc- {\n  gap: calc(16px / 8);\n  gap: var(--space-smallest);\n}\n\n.ppCZfXq-Kqc- {\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.tElkBalXH3g- {\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n._4u3OwUKxxbg- {\n  gap: calc(16px * 1);\n  gap: var(--space-base);\n}\n\n.RL7CJla0AAI- {\n  gap: calc(16px * 1.5);\n  gap: var(--space-large);\n}\n\n.fV4cvFYkhgo- {\n  gap: 0;\n}\n\n._04xVVjZgr-0- {\n  -ms-flex-align: start;\n      align-items: start;\n}\n\n.Nc3zrqHHYSg- {\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qA-v50wBX1U- {\n  -ms-flex-align: end;\n      align-items: end;\n}\n";
+var styles = {"flexible":"_8VpnrMKmsqQ-","smallestGap":"ooF1YfV4Usc-","smallerGap":"ppCZfXq-Kqc-","smallGap":"tElkBalXH3g-","baseGap":"_4u3OwUKxxbg-","largeGap":"RL7CJla0AAI-","noneGap":"fV4cvFYkhgo-","startAlign":"_04xVVjZgr-0-","centerAlign":"Nc3zrqHHYSg-","endAlign":"qA-v50wBX1U-"};
+styleInject_es.styleInject(css_248z);
+
+function Flex({ align = "center", children, direction = "row", gap = "base", template, }) {
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles.flexible, {
+            [styles[`${gap}Gap`]]: Boolean(gap),
+            [styles[`${align}Align`]]: Boolean(align),
+        }), style: generateGridStylesFromTemplate(direction, template) }, children));
+}
+function generateGridStylesFromTemplate(direction, layoutTemplate) {
+    const containerStyles = {};
+    const templateKeys = {
+        row: "gridTemplateColumns",
+        column: "gridTemplateRows",
+    };
+    const templateValues = {
+        grow: "1fr",
+        shrink: "max-content",
+    };
+    containerStyles[templateKeys[direction]] = layoutTemplate
+        .map(key => templateValues[key])
+        .join(" ");
+    return containerStyles;
+}
+
+exports.Flex = Flex;

package/dist/FormField/index.js

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormField = require('../FormField-bef41ec9.js');
+var FormField = require('../FormField-fa9254dc.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-d89f2271.js');
+require('../Button-db6114a6.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-9bff9c91.js');
-require('../Text-59bde58c.js');
-require('../InputValidation-4e809bdd.js');
+require('../Typography-83915c54.js');
+require('../Text-54334431.js');
+require('../InputValidation-377d6c62.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 

package/dist/{FormField-bef41ec9.js → FormField-fa9254dc.js}

@@ -6,10 +6,10 @@ var uuid = require('uuid');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var classnames = require('classnames');
-var Button = require('./Button-d89f2271.js');
+var Button = require('./Button-db6114a6.js');
 var Icon = require('./Icon-405a216c.js');
-var Text = require('./Text-59bde58c.js');
-var InputValidation = require('./InputValidation-4e809bdd.js');
+var Text = require('./Text-54334431.js');
+var InputValidation = require('./InputValidation-377d6c62.js');
 var Spinner = require('./Spinner-9d8fc7ff.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/FormatFile/index.js

@@ -2,30 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-a470c0f2.js');
+var FormatFile = require('../FormatFile-6423c3b5.js');
 require('react');
 require('classnames');
 require('filesize');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Button-d89f2271.js');
+require('../Button-db6114a6.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-9bff9c91.js');
-require('../ConfirmationModal-92f07027.js');
+require('../Typography-83915c54.js');
+require('../ConfirmationModal-285c3cbe.js');
 require('@jobber/hooks/useOnKeyDown');
-require('../Modal-dcdc0032.js');
+require('../Modal-c17cc105.js');
 require('react-dom');
 require('framer-motion');
 require('@jobber/hooks/useRefocusOnActivator');
 require('@jobber/hooks/useFocusTrap');
-require('../Heading-4562900a.js');
-require('../ButtonDismiss-250840a4.js');
+require('../Heading-4cde9989.js');
+require('../ButtonDismiss-1ccb84ec.js');
 require('../Content-2ca1ffe1.js');
-require('../Markdown-b37cf9ec.js');
+require('../Markdown-d53b01bf.js');
 require('react-markdown');
-require('../Text-59bde58c.js');
-require('../Emphasis-cc3456ac.js');
+require('../Text-54334431.js');
+require('../Emphasis-e10dde65.js');
 require('../Glimmer-cfa92a88.js');
 require('../tslib.es6-5b8768b7.js');
 require('../ProgressBar-5dfc1885.js');

package/dist/{FormatFile-a470c0f2.js → FormatFile-6423c3b5.js}

@@ -4,12 +4,12 @@ var React = require('react');
 var classnames = require('classnames');
 var getHumanReadableFileSize = require('filesize');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Button = require('./Button-d89f2271.js');
-var ConfirmationModal = require('./ConfirmationModal-92f07027.js');
+var Button = require('./Button-db6114a6.js');
+var ConfirmationModal = require('./ConfirmationModal-285c3cbe.js');
 var Glimmer = require('./Glimmer-cfa92a88.js');
 var Icon = require('./Icon-405a216c.js');
-var Typography = require('./Typography-9bff9c91.js');
-var Text = require('./Text-59bde58c.js');
+var Typography = require('./Typography-83915c54.js');
+var Text = require('./Text-54334431.js');
 var ProgressBar = require('./ProgressBar-5dfc1885.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }