@jobber/components 4.85.5 → 4.85.6-CJS-to-ESM.3

package/dist/DrawerGrid-DM3WKmX6.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+var Heading = require('./Heading-suKDLmO4.js');
+var ButtonDismiss = require('./ButtonDismiss-l6Kunmen.js');
+
+var css_248z$1 = ":root {\n  --drawer-width: calc(var(--space-base) * 17.5);\n  --drawer--base-padding: var(--space-base);\n}\n\n.jobber-retheme {\n  --drawer--base-padding: var(--space-large);\n}\n\n.IJAyrFb2GpA- {\n  display: none;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--elevation-modal);\n  overflow: hidden;\n\n  /* SPECIAL CASE:\n     Drawer is primarily used in Jobber Online and is currently used in a layout\n     that rearranges at 640px. For compatibility, this is hardcoded here\n     rather than using the breakpoint custom properties.\n     DO NOT COPY THIS - USE THE BREAKPOINTS DEFINED IN THE @jobber/design package!\n  */\n}\n\n@media (min-width: 640px), print {\n\n.IJAyrFb2GpA- {\n    position: relative;\n    z-index: auto;\n    width: calc(var(--space-base) * 17.5);\n    width: var(--drawer-width);\n}\n  }\n\n@media (--large-screens-and-up) {\n\n.IJAyrFb2GpA- {\n    --drawer-width: calc(var(--space-base) * 26.25);\n}\n  }\n\n.jobber-retheme .IJAyrFb2GpA- {\n  box-shadow: var(--shadow-base);\n  border-top-left-radius: var(--radius-base);\n}\n\n.Hsmk6Pg14PQ- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  border: var(--border-base) solid var(--color-border);\n  background-color: var(--color-surface);\n  -ms-flex-direction: column;\n      flex-direction: column;\n}\n\n.jobber-retheme .Hsmk6Pg14PQ- {\n  border-top-left-radius: var(--radius-base);\n}\n\n.DwF3Q9EMPvQ- {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.TcdyXiTbnMU- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: var(--space-small) var(--space-base);\n  padding: var(--space-small) var(--drawer--base-padding);\n  background-color: var(--color-surface--background);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme .TcdyXiTbnMU- {\n  padding: var(--space-base) var(--space-base) 0 var(--space-base);\n  padding: var(--space-base) var(--space-base) 0 var(--drawer--base-padding);\n  background-color: transparent;\n}\n\n.srL7xqEzwhM- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  overflow-y: auto;\n}\n\n.p6-yqttoIJI- {\n  width: 100%;\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n.p6-yqttoIJI- > * {\n  --public-content--padding: var(--drawer--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n.p6-yqttoIJI- > * > * {\n  --public-content--padding: 0;\n}\n";
+var styles$1 = {"container":"IJAyrFb2GpA-","drawer":"Hsmk6Pg14PQ-","open":"DwF3Q9EMPvQ-","header":"TcdyXiTbnMU-","contentScroll":"srL7xqEzwhM-","content":"p6-yqttoIJI-"};
+styleInject_es.styleInject(css_248z$1);
+
+function Drawer({ title, children, open = true, onRequestClose, id, }) {
+    const drawerClassNames = classnames(styles$1.container, open && styles$1.open);
+    return (React.createElement("aside", { className: drawerClassNames, "data-testid": "drawer-container", "aria-label": title, "aria-hidden": !open, id: id },
+        React.createElement("div", { className: styles$1.drawer },
+            React.createElement(Header, { title: title, onRequestClose: onRequestClose }),
+            React.createElement("div", { className: styles$1.contentScroll },
+                React.createElement("div", { className: styles$1.content }, children)))));
+}
+function Header({ title, onRequestClose }) {
+    return (React.createElement("div", { className: styles$1.header, "data-testid": "drawer-header" },
+        React.createElement(Heading.Heading, { level: 3 }, title),
+        React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: `Close ${title || "drawer"}` })));
+}
+
+var css_248z = "._50Jq09W07gg- {\n  display: grid;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  grid-template-columns: minmax(0, 1fr) minmax(-webkit-min-content, -webkit-max-content);\n  grid-template-columns: minmax(0, 1fr) minmax(min-content, max-content);\n  grid-template-rows: 1fr;\n}\n";
+var styles = {"drawerGrid":"_50Jq09W07gg-"};
+styleInject_es.styleInject(css_248z);
+
+function DrawerGrid({ children }) {
+    return React.createElement("div", { className: styles.drawerGrid }, children);
+}
+
+exports.Drawer = Drawer;
+exports.DrawerGrid = DrawerGrid;

package/dist/Emphasis/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var Emphasis = require('../Emphasis-B3vf8Ek9.js');
+require('react');
+require('../Typography-Dx8KtnBw.js');
+require('classnames');
+require('../style-inject.es-XZHJH68X.js');
+
+
+
+exports.Emphasis = Emphasis.Emphasis;

package/dist/Emphasis/index.mjs

@@ -0,0 +1,5 @@
+export { E as Emphasis } from '../Emphasis-xxFrrT2i.js';
+import 'react';
+import '../Typography-G8pA_xwj.js';
+import 'classnames';
+import '../style-inject.es-tgCJW-Cu.js';

package/dist/Emphasis-B3vf8Ek9.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var Typography = require('./Typography-Dx8KtnBw.js');
+
+function Emphasis({ variation, children }) {
+    const variationMap = {
+        bold: { element: "b", fontWeight: "bold" },
+        italic: { element: "em", emphasisType: "italic" },
+        highlight: { element: "strong", emphasisType: "highlight" },
+    };
+    return React.createElement(Typography.Typography, Object.assign({}, variationMap[variation]), children);
+}
+
+exports.Emphasis = Emphasis;

package/dist/Emphasis-xxFrrT2i.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { T as Typography } from './Typography-G8pA_xwj.js';
+
+function Emphasis({ variation, children }) {
+    const variationMap = {
+        bold: { element: "b", fontWeight: "bold" },
+        italic: { element: "em", emphasisType: "italic" },
+        highlight: { element: "strong", emphasisType: "highlight" },
+    };
+    return React.createElement(Typography, Object.assign({}, variationMap[variation]), children);
+}
+
+export { Emphasis as E };

package/dist/FeatureSwitch/index.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var FeatureSwitch = require('../FeatureSwitch-C66nDoAy.js');
+require('react');
+require('framer-motion');
+require('classnames');
+require('../style-inject.es-XZHJH68X.js');
+require('../Heading-suKDLmO4.js');
+require('../Typography-Dx8KtnBw.js');
+require('../getAtlantisConfig-mcMVqf6m.js');
+require('../Text-D9gsHxbp.js');
+require('../Content-B8Od1cqS.js');
+require('../Switch-CWis2Tw3.js');
+require('../Button-D3mW3Hcg.js');
+require('react-router-dom');
+require('../Icon-B9XNdA1T.js');
+require('@jobber/design');
+require('../Emphasis-B3vf8Ek9.js');
+require('../Markdown-B2B4q1R4.js');
+require('react-markdown');
+
+
+
+exports.FeatureSwitch = FeatureSwitch.FeatureSwitch;

package/dist/FeatureSwitch/index.mjs

@@ -0,0 +1,18 @@
+export { F as FeatureSwitch } from '../FeatureSwitch-C1cXc0VS.js';
+import 'react';
+import 'framer-motion';
+import 'classnames';
+import '../style-inject.es-tgCJW-Cu.js';
+import '../Heading-CL3UujY7.js';
+import '../Typography-G8pA_xwj.js';
+import '../getAtlantisConfig-6FPWID0P.js';
+import '../Text-DEviM1Tv.js';
+import '../Content-BknIp35w.js';
+import '../Switch-CQA6xnNA.js';
+import '../Button-CWVwgwhn.js';
+import 'react-router-dom';
+import '../Icon-CoHJokXb.js';
+import '@jobber/design';
+import '../Emphasis-xxFrrT2i.js';
+import '../Markdown-BqNLA1UK.js';
+import 'react-markdown';

package/dist/FeatureSwitch-C1cXc0VS.js

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import classnames from 'classnames';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+import { H as Heading } from './Heading-CL3UujY7.js';
+import { T as Text } from './Text-DEviM1Tv.js';
+import { C as Content } from './Content-BknIp35w.js';
+import { S as Switch } from './Switch-CQA6xnNA.js';
+import { B as Button } from './Button-CWVwgwhn.js';
+import { E as Emphasis } from './Emphasis-xxFrrT2i.js';
+import { M as Markdown } from './Markdown-BqNLA1UK.js';
+
+var css_248z = ".-sVnhIK4hZw- {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.ZJaXf-cIFgU- {\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  -ms-flex-item-align: center;\n      align-self: center;\n  padding-right: var(--space-base);\n  transition: opacity var(--timing-base);\n}\n\n.OA-s1YYLMMM- {\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n  position: relative;\n}\n\n.lN90IIewHq8- {\n  position: absolute;\n  top: 100%;\n  width: 100%;\n  margin-top: var(--space-smallest);\n  text-align: center;\n}\n\n.mW56hvBHqPM- {\n  opacity: 0.5;\n}\n\n.QfZjM5S-Ls0- {\n  opacity: 1;\n}\n";
+var styles = {"container":"-sVnhIK4hZw-","content":"ZJaXf-cIFgU-","action":"OA-s1YYLMMM-","savedIndicator":"lN90IIewHq8-","featureContent":"mW56hvBHqPM-","enabled":"QfZjM5S-Ls0-"};
+styleInject(css_248z);
+
+function FeatureSwitch({ children, description, disabled = false, enabled, externalLink = false, onEdit, onSwitch, hasSaveIndicator = false, title, }) {
+    const [savedIndicator, setSavedIndicator] = useState(false);
+    const featureContentClassnames = classnames(styles.featureContent, styles.content, enabled && styles.enabled);
+    shouldShowSavedIndicator();
+    return (React.createElement(Content, null,
+        React.createElement("div", { className: styles.container },
+            React.createElement("div", { className: styles.content },
+                React.createElement(Content, null,
+                    title && React.createElement(Heading, { level: 4 }, title),
+                    description && (React.createElement(Text, null,
+                        React.createElement(Markdown, { content: description, basicUsage: true, externalLink: externalLink }))))),
+            onSwitch && (React.createElement("div", { className: styles.action },
+                React.createElement(Switch, { value: enabled, onChange: onSwitch, ariaLabel: description, disabled: disabled }),
+                React.createElement(AnimatePresence, null, hasSaveIndicator && savedIndicator && (React.createElement(motion.div, { className: styles.savedIndicator, initial: { y: -4, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: -4, opacity: 0 }, transition: {
+                        delay: 0.2,
+                        type: "spring",
+                        damping: 20,
+                        stiffness: 300,
+                    }, onAnimationComplete: handleAnimationComplete },
+                    React.createElement(Text, { variation: "success" },
+                        React.createElement(Emphasis, { variation: "italic" }, "Saved")))))))),
+        (children || onEdit) && (React.createElement("div", { className: styles.container },
+            children && (React.createElement("div", { className: featureContentClassnames }, children)),
+            onEdit && (React.createElement("div", { className: styles.action },
+                React.createElement(Button, { label: "Edit", type: "tertiary", onClick: onEdit })))))));
+    function shouldShowSavedIndicator() {
+        // Check if the component is mounted
+        const [didMount, setDidMount] = useState(false);
+        useEffect(() => setDidMount(true), []);
+        useEffect(() => {
+            didMount && hasSaveIndicator && setSavedIndicator(true);
+        }, [enabled]);
+    }
+    function handleAnimationComplete() {
+        setSavedIndicator(false);
+    }
+}
+
+export { FeatureSwitch as F };

package/dist/FeatureSwitch-C66nDoAy.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var classnames = require('classnames');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+var Heading = require('./Heading-suKDLmO4.js');
+var Text = require('./Text-D9gsHxbp.js');
+var Content = require('./Content-B8Od1cqS.js');
+var Switch = require('./Switch-CWis2Tw3.js');
+var Button = require('./Button-D3mW3Hcg.js');
+var Emphasis = require('./Emphasis-B3vf8Ek9.js');
+var Markdown = require('./Markdown-B2B4q1R4.js');
+
+var css_248z = ".-sVnhIK4hZw- {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.ZJaXf-cIFgU- {\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  -ms-flex-item-align: center;\n      align-self: center;\n  padding-right: var(--space-base);\n  transition: opacity var(--timing-base);\n}\n\n.OA-s1YYLMMM- {\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n  position: relative;\n}\n\n.lN90IIewHq8- {\n  position: absolute;\n  top: 100%;\n  width: 100%;\n  margin-top: var(--space-smallest);\n  text-align: center;\n}\n\n.mW56hvBHqPM- {\n  opacity: 0.5;\n}\n\n.QfZjM5S-Ls0- {\n  opacity: 1;\n}\n";
+var styles = {"container":"-sVnhIK4hZw-","content":"ZJaXf-cIFgU-","action":"OA-s1YYLMMM-","savedIndicator":"lN90IIewHq8-","featureContent":"mW56hvBHqPM-","enabled":"QfZjM5S-Ls0-"};
+styleInject_es.styleInject(css_248z);
+
+function FeatureSwitch({ children, description, disabled = false, enabled, externalLink = false, onEdit, onSwitch, hasSaveIndicator = false, title, }) {
+    const [savedIndicator, setSavedIndicator] = React.useState(false);
+    const featureContentClassnames = classnames(styles.featureContent, styles.content, enabled && styles.enabled);
+    shouldShowSavedIndicator();
+    return (React.createElement(Content.Content, null,
+        React.createElement("div", { className: styles.container },
+            React.createElement("div", { className: styles.content },
+                React.createElement(Content.Content, null,
+                    title && React.createElement(Heading.Heading, { level: 4 }, title),
+                    description && (React.createElement(Text.Text, null,
+                        React.createElement(Markdown.Markdown, { content: description, basicUsage: true, externalLink: externalLink }))))),
+            onSwitch && (React.createElement("div", { className: styles.action },
+                React.createElement(Switch.Switch, { value: enabled, onChange: onSwitch, ariaLabel: description, disabled: disabled }),
+                React.createElement(framerMotion.AnimatePresence, null, hasSaveIndicator && savedIndicator && (React.createElement(framerMotion.motion.div, { className: styles.savedIndicator, initial: { y: -4, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: -4, opacity: 0 }, transition: {
+                        delay: 0.2,
+                        type: "spring",
+                        damping: 20,
+                        stiffness: 300,
+                    }, onAnimationComplete: handleAnimationComplete },
+                    React.createElement(Text.Text, { variation: "success" },
+                        React.createElement(Emphasis.Emphasis, { variation: "italic" }, "Saved")))))))),
+        (children || onEdit) && (React.createElement("div", { className: styles.container },
+            children && (React.createElement("div", { className: featureContentClassnames }, children)),
+            onEdit && (React.createElement("div", { className: styles.action },
+                React.createElement(Button.Button, { label: "Edit", type: "tertiary", onClick: onEdit })))))));
+    function shouldShowSavedIndicator() {
+        // Check if the component is mounted
+        const [didMount, setDidMount] = React.useState(false);
+        React.useEffect(() => setDidMount(true), []);
+        React.useEffect(() => {
+            didMount && hasSaveIndicator && setSavedIndicator(true);
+        }, [enabled]);
+    }
+    function handleAnimationComplete() {
+        setSavedIndicator(false);
+    }
+}
+
+exports.FeatureSwitch = FeatureSwitch;

package/dist/Flex/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var Flex = require('../Flex-CBKf3epb.js');
+require('react');
+require('classnames');
+require('../style-inject.es-XZHJH68X.js');
+
+
+
+exports.Flex = Flex.Flex;

package/dist/Flex/index.mjs

@@ -0,0 +1,4 @@
+export { F as Flex } from '../Flex-DXDpEzMI.js';
+import 'react';
+import 'classnames';
+import '../style-inject.es-tgCJW-Cu.js';

package/dist/{Flex-d490c4db.js → Flex-CBKf3epb.js}

@@ -2,19 +2,14 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.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 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: var(--space-smallest);\n}\n\n.ppCZfXq-Kqc- {\n  gap: var(--space-smaller);\n}\n\n.tElkBalXH3g- {\n  gap: var(--space-small);\n}\n\n._4u3OwUKxxbg- {\n  gap: var(--space-base);\n}\n\n.RL7CJla0AAI- {\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, {
+    return (React.createElement("div", { className: classnames(styles.flexible, {
             [styles[`${gap}Gap`]]: Boolean(gap),
             [styles[`${align}Align`]]: Boolean(align),
         }), style: generateGridStylesFromTemplate(direction, template) }, children));

package/dist/Flex-DXDpEzMI.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import classnames from 'classnames';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+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: var(--space-smallest);\n}\n\n.ppCZfXq-Kqc- {\n  gap: var(--space-smaller);\n}\n\n.tElkBalXH3g- {\n  gap: var(--space-small);\n}\n\n._4u3OwUKxxbg- {\n  gap: var(--space-base);\n}\n\n.RL7CJla0AAI- {\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(css_248z);
+
+function Flex({ align = "center", children, direction = "row", gap = "base", template, }) {
+    return (React.createElement("div", { className: classnames(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;
+}
+
+export { Flex as F };

package/dist/Form/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var Form = require('../Form-ChkdN1bx.js');
+require('../tslib.es6-ld72nsZq.js');
+require('react');
+require('react-hook-form');
+
+
+
+exports.Form = Form.Form;

package/dist/Form/index.mjs

@@ -0,0 +1,4 @@
+export { F as Form } from '../Form-Dd9YKBh-.js';
+import '../tslib.es6-Df1SgIEn.js';
+import 'react';
+import 'react-hook-form';

package/dist/{Form/index.js → Form-ChkdN1bx.js}

@@ -1,15 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../tslib.es6-754e2961.js');
+var tslib_es6 = require('./tslib.es6-ld72nsZq.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const Form = React.forwardRef(function InternalForm({ onSubmit, children, onStateChange }, ref) {
     const methods = reactHookForm.useForm({ mode: "onTouched" });
     const { trigger, handleSubmit, formState: { isDirty, isValid, errors }, } = methods;
@@ -41,8 +35,8 @@ const Form = React.forwardRef(function InternalForm({ onSubmit, children, onStat
     const formProps = {
         onSubmit: onSubmit && handleSubmit(submitHandler, errorHandler),
     };
-    return (React__default["default"].createElement(reactHookForm.FormProvider, Object.assign({}, methods),
-        React__default["default"].createElement(Wrapper, Object.assign({}, formProps, { "data-testid": "atlantis-form" }), children)));
+    return (React.createElement(reactHookForm.FormProvider, Object.assign({}, methods),
+        React.createElement(Wrapper, Object.assign({}, formProps, { "data-testid": "atlantis-form" }), children)));
     function submitHandler() {
         onSubmit && onSubmit();
     }

package/dist/Form-Dd9YKBh-.js

@@ -0,0 +1,48 @@
+import { a as __awaiter } from './tslib.es6-Df1SgIEn.js';
+import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
+
+const Form = forwardRef(function InternalForm({ onSubmit, children, onStateChange }, ref) {
+    const methods = useForm({ mode: "onTouched" });
+    const { trigger, handleSubmit, formState: { isDirty, isValid, errors }, } = methods;
+    useEffect(() => onStateChange && onStateChange({ isDirty, isValid }), [isDirty, isValid]);
+    useImperativeHandle(ref, () => ({
+        /**
+         * The `trigger()` method can also accept an array
+         * of fields to validate. We may at some point want
+         * to consider adding a `validate()` method to the
+         * `Form` component.
+         */
+        submit: () => __awaiter(this, void 0, void 0, function* () {
+            const valid = yield trigger();
+            if (valid) {
+                submitHandler();
+            }
+            else {
+                trigger();
+                errorHandler(errors);
+            }
+        }),
+    }));
+    /**
+     * If an onSubmit is not passed into a form, it will only be used
+     * for validation. For that, we do not need to wrap it in a <form>
+     * tag. This allows the <Form> component to be used in legacy code.
+     */
+    const Wrapper = onSubmit ? "form" : "div";
+    const formProps = {
+        onSubmit: onSubmit && handleSubmit(submitHandler, errorHandler),
+    };
+    return (React.createElement(FormProvider, Object.assign({}, methods),
+        React.createElement(Wrapper, Object.assign({}, formProps, { "data-testid": "atlantis-form" }), children)));
+    function submitHandler() {
+        onSubmit && onSubmit();
+    }
+    function errorHandler(errs) {
+        const firstErrName = Object.keys(errs)[0];
+        const element = document.querySelector(`[name="${firstErrName}"]`);
+        element === null || element === void 0 ? void 0 : element.focus();
+    }
+});
+
+export { Form as F };

package/dist/FormField/index.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var FormField = require('../FormField-hCrwUWca.js');
+require('../tslib.es6-ld72nsZq.js');
+require('react');
+require('react-hook-form');
+require('../style-inject.es-XZHJH68X.js');
+require('classnames');
+require('../Button-D3mW3Hcg.js');
+require('react-router-dom');
+require('../Icon-B9XNdA1T.js');
+require('@jobber/design');
+require('../Typography-Dx8KtnBw.js');
+require('../Text-D9gsHxbp.js');
+require('../InputValidation-DIwnbDDv.js');
+require('framer-motion');
+require('../Spinner-DT15aa_r.js');
+
+
+
+exports.FormField = FormField.FormField;

package/dist/FormField/index.mjs

@@ -0,0 +1,15 @@
+export { F as FormField } from '../FormField-D2Dlrypi.js';
+import '../tslib.es6-Df1SgIEn.js';
+import 'react';
+import 'react-hook-form';
+import '../style-inject.es-tgCJW-Cu.js';
+import 'classnames';
+import '../Button-CWVwgwhn.js';
+import 'react-router-dom';
+import '../Icon-CoHJokXb.js';
+import '@jobber/design';
+import '../Typography-G8pA_xwj.js';
+import '../Text-DEviM1Tv.js';
+import '../InputValidation-BmgvSw0e.js';
+import 'framer-motion';
+import '../Spinner-BOhyUAA_.js';