@jobber/components 6.26.0 → 6.26.2

package/dist/SegmentedControl-es.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useCallback, useMemo, useId, forwardRef, Children, useRef } from 'react';
+import React__default, { createContext, useContext, useState, useCallback, useMemo, useId, forwardRef, Children, useRef } from 'react';
 import classnames from 'classnames';
 
 const SegmentedControlContext = createContext({
@@ -22,7 +22,7 @@ function SegmentedControlProvider({ children, selectedValue, onSelectValue, defa
     const currentSelectedOption = isControlled
         ? selectedValue
         : internalSelectedValue;
-    return (React.createElement(SegmentedControlContext.Provider, { value: {
+    return (React__default.createElement(SegmentedControlContext.Provider, { value: {
             handleChange,
             selectedValue: currentSelectedOption,
             segmentedControlName: name,
@@ -33,9 +33,9 @@ function SegmentedControlOption({ value, children, ariaLabel, }) {
     const { selectedValue, handleChange, segmentedControlName } = useSegmentedControl();
     const localChecked = useMemo(() => selectedValue === value, [selectedValue, value]);
     const inputId = `${value.toString()}_${useId()}`;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("input", { type: "radio", id: inputId, name: segmentedControlName, checked: localChecked, value: value, onChange: handleChange, "aria-label": ariaLabel, tabIndex: localChecked ? 0 : -1 }),
-        React.createElement("label", { htmlFor: inputId }, children)));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("input", { type: "radio", id: inputId, name: segmentedControlName, checked: localChecked, value: value, onChange: handleChange, "aria-label": ariaLabel, tabIndex: localChecked ? 0 : -1 }),
+        React__default.createElement("label", { htmlFor: inputId }, children)));
 }
 
 var styles = {"container":"FDDKTZkTdfM-","small":"V41prM1xcKI-","large":"DbXvfxdDF-c-","spinning":"iKliBX-y4ec-"};
@@ -46,17 +46,17 @@ const SegmentedControlBase = forwardRef(function SegmentedControlBase({ children
         [styles.small]: size === "small",
         [styles.large]: size === "large",
     });
-    return (React.createElement("div", { ref: ref, className: containerClassNames, role: "radiogroup", style: {
+    return (React__default.createElement("div", { ref: ref, className: containerClassNames, role: "radiogroup", style: {
             "--segmentedControl--option-count": optionCount,
         } },
         children,
-        React.createElement("span", null)));
+        React__default.createElement("span", null)));
 });
 
 function SegmentedControl({ selectedValue, onSelectValue, defaultValue, children, name = useId(), size = "base", }) {
     const container = useRef(null);
-    return (React.createElement(SegmentedControlProvider, { selectedValue: selectedValue, onSelectValue: onSelectValue, defaultValue: defaultValue, name: name },
-        React.createElement(SegmentedControlBase, { ref: container, size: size }, children)));
+    return (React__default.createElement(SegmentedControlProvider, { selectedValue: selectedValue, onSelectValue: onSelectValue, defaultValue: defaultValue, name: name },
+        React__default.createElement(SegmentedControlBase, { ref: container, size: size }, children)));
 }
 SegmentedControl.Option = SegmentedControlOption;
 SegmentedControl.Base = SegmentedControlBase;

package/dist/Select/Select.d.ts

@@ -5,6 +5,6 @@ import { FormFieldProps } from "../FormField";
  * Unfortunately Docz doesn't currently support Omit so it has been reduced to
  * its component parts.
  */
-type SelectProps = Pick<FormFieldProps, Exclude<keyof FormFieldProps, "type" | "rows" | "keyboard" | "actionsRef" | "clearable">>;
+type SelectProps = Pick<FormFieldProps, Exclude<keyof FormFieldProps, "type" | "rows" | "keyboard" | "actionsRef" | "clearable" | "pattern">>;
 export declare function Select(props: SelectProps): JSX.Element;
 export {};

package/dist/SideDrawer-es.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useState, useId } from 'react';
+import React__default, { createContext, useContext, useEffect, useState, useId } from 'react';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
@@ -27,7 +27,7 @@ function SideDrawerActions({ children }) {
     const { actionPortal } = useSideDrawerContext();
     if (!actionPortal)
         return null;
-    return createPortal(React.createElement(React.Fragment, null, children), actionPortal);
+    return createPortal(React__default.createElement(React__default.Fragment, null, children), actionPortal);
 }
 
 function SideDrawerTitle({ children }) {
@@ -35,7 +35,7 @@ function SideDrawerTitle({ children }) {
     if (!titlePortal)
         return null;
     if (typeof children === "string") {
-        return createPortal(React.createElement(Heading, { level: 2 }, children), titlePortal);
+        return createPortal(React__default.createElement(Heading, { level: 2 }, children), titlePortal);
     }
     return createPortal(children, titlePortal);
 }
@@ -59,14 +59,14 @@ function SideDrawerBackButton({ onClick, }) {
     }, []);
     if (!backPortal)
         return null;
-    return createPortal(React.createElement(Button, { ariaLabel: "Back", icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
+    return createPortal(React__default.createElement(Button, { ariaLabel: "Back", icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
 }
 
 function SideDrawerFooter({ children }) {
     const { footerPortal } = useSideDrawerContext();
     if (!footerPortal)
         return null;
-    return createPortal(React.createElement(React.Fragment, null, children), footerPortal);
+    return createPortal(React__default.createElement(React__default.Fragment, null, children), footerPortal);
 }
 
 const variants = {
@@ -110,7 +110,7 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
     const isMounted = useIsMounted_2();
     if (!isMounted.current && !container)
         return null;
-    const SideDrawerRender = (React.createElement(SideDrawerContext.Provider, { value: {
+    const SideDrawerRender = (React__default.createElement(SideDrawerContext.Provider, { value: {
             actionPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(slots.actions.selector),
             titlePortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(slots.title.selector),
             toolbarPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(slots.toolbar.selector),
@@ -120,34 +120,34 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
             registerComponent: key => setComponents(prev => (Object.assign(Object.assign({}, prev), { [key]: true }))),
             unRegisterComponent: key => setComponents(prev => (Object.assign(Object.assign({}, prev), { [key]: false }))),
         } },
-        open && !inline && (React.createElement("button", { className: styles.overlay, "aria-label": "Close", onClick: onRequestClose, type: "button" })),
-        React.createElement(AnimatePresence, { initial: false }, open && (React.createElement(motion.div, { className: classnames(styles.drawer, {
+        open && !inline && (React__default.createElement("button", { className: styles.overlay, "aria-label": "Close", onClick: onRequestClose, type: "button" })),
+        React__default.createElement(AnimatePresence, { initial: false }, open && (React__default.createElement(motion.div, { className: classnames(styles.drawer, {
                 [styles.reverseScroll]: scrollDirection === "reverse",
                 [styles.inline]: inline,
             }, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container), ref: setRef, "data-elevation": "elevated", variants: inline ? inlineVariants : variants, initial: "initial", animate: "visible", exit: "hidden", transition: {
                 duration: tokens["timing-base"] / 1000,
             }, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container },
-            React.createElement("div", { ref: sideDrawerRef, role: "dialog", className: classnames(styles.container, styles.hasShadow, {
+            React__default.createElement("div", { ref: sideDrawerRef, role: "dialog", className: classnames(styles.container, styles.hasShadow, {
                     [styles.subtle]: variation === "subtle",
                 }), tabIndex: 0, onKeyUp: handleKeyUp },
-                React.createElement("div", { className: classnames(styles.header, {
+                React__default.createElement("div", { className: classnames(styles.header, {
                         [styles.hasShadow]: headerShadowRef.current && !noHeaderShadow,
                     }) },
-                    React.createElement(Flex, { template: ["grow", "shrink"], align: "start" },
-                        React.createElement(Flex, { template: ["shrink", "grow"], align: "start", gap: "none" },
-                            React.createElement("div", Object.assign({ className: classnames(styles.backButton, {
+                    React__default.createElement(Flex, { template: ["grow", "shrink"], align: "start" },
+                        React__default.createElement(Flex, { template: ["shrink", "grow"], align: "start", gap: "none" },
+                            React__default.createElement("div", Object.assign({ className: classnames(styles.backButton, {
                                     [styles.backButtonVisible]: components.backButton,
                                 }) }, slots.backButton.attr)),
-                            React.createElement("div", Object.assign({ className: classnames(styles.heading) }, slots.title.attr))),
-                        React.createElement("div", { className: styles.headerActions },
-                            React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.actions.attr)),
-                            React.createElement(Button, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
-                    React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.toolbar.attr))),
-                React.createElement("div", { className: styles.content },
-                    React.createElement("div", { className: styles.headerShadowListener, ref: headerShadowRef }),
+                            React__default.createElement("div", Object.assign({ className: classnames(styles.heading) }, slots.title.attr))),
+                        React__default.createElement("div", { className: styles.headerActions },
+                            React__default.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.actions.attr)),
+                            React__default.createElement(Button, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
+                    React__default.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.toolbar.attr))),
+                React__default.createElement("div", { className: styles.content },
+                    React__default.createElement("div", { className: styles.headerShadowListener, ref: headerShadowRef }),
                     children,
-                    React.createElement("div", { className: styles.footerShadowListener, ref: footerShadowRef })),
-                React.createElement("div", Object.assign({ className: classnames(styles.footer, styles.hideWhenEmpty, {
+                    React__default.createElement("div", { className: styles.footerShadowListener, ref: footerShadowRef })),
+                React__default.createElement("div", Object.assign({ className: classnames(styles.footer, styles.hideWhenEmpty, {
                         [styles.hasShadow]: footerShadowRef.current && !noFooterShadow,
                     }) }, slots.footer.attr))))))));
     if (inline) {

package/dist/Spinner-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 
 var styles = {"spinner":"_6hfmGZoXNyg-","animationSpin":"aT3CETCJ4hQ-","small":"bMfynkzmlL4-","inline":"NA68eWblbLo-","spinning":"aCBq1WrkI4M-"};
@@ -8,7 +8,7 @@ function Spinner({ size = "base", inline }) {
         [styles.small]: size === "small",
         [styles.inline]: inline,
     });
-    return (React.createElement("div", { className: spinnerStyles, role: "alert", "aria-busy": true, "aria-label": "loading" }));
+    return (React__default.createElement("div", { className: spinnerStyles, role: "alert", "aria-busy": true, "aria-label": "loading" }));
 }
 
 export { Spinner as S };

package/dist/StatusIndicator-es.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React__default from 'react';
 
 var styles = {"statusIndicator":"WiSIdMrztSU-","spinning":"HtjGZ9un0j0-"};
 
 function StatusIndicator({ status }) {
-    return (React.createElement("span", { style: { backgroundColor: `var(--color-${status})` }, className: styles.statusIndicator, "data-testid": `ATL-Status-Indicator-${status}` }));
+    return (React__default.createElement("span", { style: { backgroundColor: `var(--color-${status})` }, className: styles.statusIndicator, "data-testid": `ATL-Status-Indicator-${status}` }));
 }
 
 export { StatusIndicator as S };

package/dist/StatusLabel-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 import { T as Typography } from './Typography-es.js';
 import { S as StatusIndicator } from './StatusIndicator-es.js';
@@ -7,10 +7,10 @@ var styles = {"statusLabelRow":"OADGAhZt8dY-","success":"gQdAtJ0BiSk-","warning"
 
 function StatusLabel({ label, alignment = "start", status = "inactive", }) {
     const containerClassNames = classnames(styles.statusLabelRow, styles[status], alignment === "end" && styles.labelTextEndAligned);
-    return (React.createElement("div", { role: "status", className: containerClassNames },
-        React.createElement("div", { className: styles.statusIndicatorWrapper },
-            React.createElement(StatusIndicator, { status: status })),
-        React.createElement(Typography, { size: "small", align: alignment }, label)));
+    return (React__default.createElement("div", { role: "status", className: containerClassNames },
+        React__default.createElement("div", { className: styles.statusIndicatorWrapper },
+            React__default.createElement(StatusIndicator, { status: status })),
+        React__default.createElement(Typography, { size: "small", align: alignment }, label)));
 }
 
 export { StatusLabel as S };

package/dist/Switch-es.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React__default, { useState } from 'react';
 import classnames from 'classnames';
 import { T as Typography } from './Typography-es.js';
 
@@ -21,13 +21,13 @@ function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, })
         [styles.isChecked]: value,
         [styles.disabled]: disabled,
     });
-    return (React.createElement(React.Fragment, null,
-        React.createElement("button", { id: name, type: "button", role: "switch", "aria-checked": value, "aria-label": ariaLabel, className: className, onClick: toggleSwitch, disabled: disabled },
-            React.createElement("span", { className: styles.toggle },
-                React.createElement(Label, { as: "On", disabled: disabled }),
-                React.createElement("span", { className: styles.pip }),
-                React.createElement(Label, { as: "Off", disabled: disabled }))),
-        React.createElement("input", { name: name, type: "hidden", value: String(value) })));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("button", { id: name, type: "button", role: "switch", "aria-checked": value, "aria-label": ariaLabel, className: className, onClick: toggleSwitch, disabled: disabled },
+            React__default.createElement("span", { className: styles.toggle },
+                React__default.createElement(Label, { as: "On", disabled: disabled }),
+                React__default.createElement("span", { className: styles.pip }),
+                React__default.createElement(Label, { as: "Off", disabled: disabled }))),
+        React__default.createElement("input", { name: name, type: "hidden", value: String(value) })));
 }
 function Label({ as, disabled }) {
     const getTextColor = () => {
@@ -39,8 +39,8 @@ function Label({ as, disabled }) {
         }
         return "greyBlue";
     };
-    return (React.createElement("span", { className: styles.label },
-        React.createElement(Typography, { element: "span", textColor: getTextColor(), size: "small", fontWeight: "bold", textCase: "uppercase" }, as)));
+    return (React__default.createElement("span", { className: styles.label },
+        React__default.createElement(Typography, { element: "span", textColor: getTextColor(), size: "small", fontWeight: "bold", textCase: "uppercase" }, as)));
 }
 
 export { Switch as S };

package/dist/Tabs-es.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import React__default, { useState, useRef, useCallback, useEffect } from 'react';
 import classnames from 'classnames';
 import { t as throttle } from './throttle-es.js';
 import { T as Typography } from './Typography-es.js';
@@ -67,7 +67,7 @@ const useArrowKeyNavigation = ({ elementsRef, onActivate, }) => {
 
 function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabChange, }) {
     var _a;
-    const activeTabInitialValue = defaultTab < React.Children.count(children) ? defaultTab : 0;
+    const activeTabInitialValue = defaultTab < React__default.Children.count(children) ? defaultTab : 0;
     const [internalActiveTab, setInternalActiveTab] = useState(activeTabInitialValue);
     const activeTab = controlledActiveTab !== undefined ? controlledActiveTab : internalActiveTab;
     const { overflowRight, overflowLeft, tabRow } = useTabsOverflow();
@@ -90,27 +90,27 @@ function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabC
         elementsRef: tabRefs,
         onActivate: index => activateTab(index)(),
     });
-    const activeTabProps = (_a = React.Children.toArray(children)[activeTab]) === null || _a === void 0 ? void 0 : _a.props;
+    const activeTabProps = (_a = React__default.Children.toArray(children)[activeTab]) === null || _a === void 0 ? void 0 : _a.props;
     useEffect(() => {
-        if (activeTab > React.Children.count(children) - 1) {
+        if (activeTab > React__default.Children.count(children) - 1) {
             setInternalActiveTab(activeTabInitialValue);
         }
-    }, [React.Children.count(children)]);
-    return (React.createElement("div", { className: styles.tabs },
-        React.createElement("div", { className: overflowClassNames },
-            React.createElement("ul", { role: "tablist", className: styles.tabRow, ref: tabRow, onKeyDown: handleKeyDown }, React.Children.map(children, (tab, index) => (React.createElement(InternalTab, { label: tab.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: tab.props.onClick, ref: el => (tabRefs.current[index] = el), tabIndex: activeTab === index ? 0 : -1 }))))),
-        React.createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.label }, activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.children)));
+    }, [React__default.Children.count(children)]);
+    return (React__default.createElement("div", { className: styles.tabs },
+        React__default.createElement("div", { className: overflowClassNames },
+            React__default.createElement("ul", { role: "tablist", className: styles.tabRow, ref: tabRow, onKeyDown: handleKeyDown }, React__default.Children.map(children, (tab, index) => (React__default.createElement(InternalTab, { label: tab.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: tab.props.onClick, ref: el => (tabRefs.current[index] = el), tabIndex: activeTab === index ? 0 : -1 }))))),
+        React__default.createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.label }, activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.children)));
 }
 function Tab({ label }) {
-    return React.createElement(React.Fragment, null, label);
+    return React__default.createElement(React__default.Fragment, null, label);
 }
-const InternalTab = React.forwardRef(({ label, selected, activateTab, onClick, tabIndex }, ref) => {
+const InternalTab = React__default.forwardRef(({ label, selected, activateTab, onClick, tabIndex }, ref) => {
     const className = classnames(styles.tab, { [styles.selected]: selected });
-    return (React.createElement("li", { role: "presentation" },
-        React.createElement("button", { type: "button", role: "tab", className: className, onClick: event => {
+    return (React__default.createElement("li", { role: "presentation" },
+        React__default.createElement("button", { type: "button", role: "tab", className: className, onClick: event => {
                 activateTab();
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
-            }, ref: ref, tabIndex: tabIndex }, typeof label === "string" ? (React.createElement(Typography, { element: "span", size: "large", fontWeight: "semiBold" }, label)) : (label))));
+            }, ref: ref, tabIndex: tabIndex }, typeof label === "string" ? (React__default.createElement(Typography, { element: "span", size: "large", fontWeight: "semiBold" }, label)) : (label))));
 });
 InternalTab.displayName = "InternalTab";
 

package/dist/Text-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { T as Typography } from './Typography-es.js';
 
 function Text({ variation = "default", size = "base", align = "start", children, maxLines = "unlimited", }) {
@@ -19,7 +19,7 @@ function Text({ variation = "default", size = "base", align = "start", children,
         larger: 16,
         unlimited: undefined,
     };
-    return (React.createElement(Typography, { textColor: textColors[variation], size: size, numberOfLines: maxLineToNumber[maxLines], align: align }, children));
+    return (React__default.createElement(Typography, { textColor: textColors[variation], size: size, numberOfLines: maxLineToNumber[maxLines], align: align }, children));
 }
 
 export { Text as T };

package/dist/Tooltip-es.js

@@ -1,6 +1,6 @@
-import React, { useRef, useState } from 'react';
+import React__default, { useRef, useState } from 'react';
 import classnames from 'classnames';
-import ReactDOM from 'react-dom';
+import ReactDOM__default from 'react-dom';
 import { motion } from 'framer-motion';
 import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-es.js';
 import { u as useIsMounted_2 } from './useIsMounted-es.js';
@@ -38,17 +38,17 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
     const { attributes, placement, shadowRef, styles: popperStyles, setArrowRef, setTooltipRef, } = useTooltipPositioning({ preferredPlacement: preferredPlacement });
     initializeListeners();
     const toolTipClassNames = classnames(styles.tooltipWrapper, placement === "bottom" && styles.bottom, placement === "top" && styles.top, placement === "left" && styles.left, placement === "right" && styles.right);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
         children,
-        React.createElement(TooltipPortal, null, show && Boolean(message) && (React.createElement("div", Object.assign({ className: toolTipClassNames, style: popperStyles.popper, ref: setTooltipRef, role: "tooltip" }, attributes.popper),
-            React.createElement(motion.div, { className: styles.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
+        React__default.createElement(TooltipPortal, null, show && Boolean(message) && (React__default.createElement("div", Object.assign({ className: toolTipClassNames, style: popperStyles.popper, ref: setTooltipRef, role: "tooltip" }, attributes.popper),
+            React__default.createElement(motion.div, { className: styles.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
                     ease: "easeOut",
                     duration: 0.15,
                     delay: 0.3,
                 } },
-                React.createElement("p", { className: styles.tooltipMessage }, message),
-                React.createElement("div", { ref: setArrowRef, style: popperStyles.arrow, className: styles.arrow })))))));
+                React__default.createElement("p", { className: styles.tooltipMessage }, message),
+                React__default.createElement("div", { ref: setArrowRef, style: popperStyles.arrow, className: styles.arrow })))))));
     function initializeListeners() {
         const showTooltip = () => {
             setShow(true);
@@ -104,7 +104,7 @@ function TooltipPortal({ children }) {
     if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
         return null;
     }
-    return ReactDOM.createPortal(children, document.body);
+    return ReactDOM__default.createPortal(children, document.body);
 }
 
 export { Tooltip as T };

package/dist/Typography-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 
 var styles = {"base":"j4h-0Mxa5gk-","spinning":"vNKBQk0oak4-"};
@@ -31,7 +31,7 @@ function Typography({ id, children, element: Tag = "p", size, align, fontWeight
         }
         : {};
     const underlineInlineStyles = computeUnderlineStyles(underline, textColor);
-    return (React.createElement(Tag, { id: id, className: className, style: Object.assign(Object.assign(Object.assign({}, truncateStyles), underlineInlineStyles), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.textStyle) }, children));
+    return (React__default.createElement(Tag, { id: id, className: className, style: Object.assign(Object.assign(Object.assign({}, truncateStyles), underlineInlineStyles), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.textStyle) }, children));
 }
 function computeUnderlineStyles(underline, textColor) {
     if (!underline) {

package/dist/showToast-es.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
+import React__default, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
 import { createRoot } from 'react-dom/client';
 import { AnimatePresence, motion } from 'framer-motion';
 import { I as Icon } from './Icon-es.js';
@@ -13,18 +13,18 @@ function Toast({ message, variation = "success", action, actionLabel, }) {
     const icon = getIcon();
     let timer;
     useEffect(() => startTimer(), []);
-    return (React.createElement(AnimatePresence, null, visible && (React.createElement(motion.div, { className: styles.toast, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, onMouseEnter: () => stopTimer(), onMouseLeave: () => startTimer(), exit: {
+    return (React__default.createElement(AnimatePresence, null, visible && (React__default.createElement(motion.div, { className: styles.toast, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, onMouseEnter: () => stopTimer(), onMouseLeave: () => startTimer(), exit: {
             opacity: 0,
             scale: 0.8,
             height: 0,
             transition: { duration: 0.4 },
         } },
-        React.createElement("div", { className: styles.slice },
-            React.createElement(Icon, { color: icon.color, name: icon.name }),
-            React.createElement(Typography, { element: "span", size: "large" }, message),
-            action && (React.createElement(Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
-            React.createElement("div", { className: styles.button },
-                React.createElement(Button, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
+        React__default.createElement("div", { className: styles.slice },
+            React__default.createElement(Icon, { color: icon.color, name: icon.name }),
+            React__default.createElement(Typography, { element: "span", size: "large" }, message),
+            action && (React__default.createElement(Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
+            React__default.createElement("div", { className: styles.button },
+                React__default.createElement(Button, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
     function startTimer() {
         timer = setTimeout(() => handleToastClose(), getTimeout());
     }
@@ -75,14 +75,14 @@ function showToast(props) {
         root = createRoot(target);
     }
     if (root && target && globalThis.document.body.contains(target)) {
-        root.render(React.createElement(ToasterOven, Object.assign({}, props)));
+        root.render(React__default.createElement(ToasterOven, Object.assign({}, props)));
     }
 }
 const ToastContainer = forwardRef(ToastInternal);
 function ToasterOven(props) {
     const toastRef = useRef();
     useEffect(() => toastRef.current.add(props));
-    return React.createElement(ToastContainer, { ref: toastRef });
+    return React__default.createElement(ToastContainer, { ref: toastRef });
 }
 function ToastInternal(_, ref) {
     const [toastKey, setToastKey] = useState(0);
@@ -96,7 +96,7 @@ function ToastInternal(_, ref) {
             ]);
         },
     }));
-    return (React.createElement("div", { className: styles.container }, toasts.map(toast => (React.createElement(Toast, Object.assign({}, toast, { key: toast.id }))))));
+    return (React__default.createElement("div", { className: styles.container }, toasts.map(toast => (React__default.createElement(Toast, Object.assign({}, toast, { key: toast.id }))))));
 }
 
 export { Toast as T, showToast as s };

package/dist/styles.css

@@ -877,6 +877,11 @@
   outline: none;
 }
 
+.MVhuQuzUBUs- {
+  padding-left: calc(var(--field--padding-left) + 4px);
+  padding-left: calc(var(--field--padding-left) + var(--space-smaller));
+}
+
 .hGr6YW4AeLM- .yVXYv6hkuOA- {
   display: -ms-flexbox;
   display: flex;
@@ -3377,8 +3382,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   width: calc(var(--space-extravagant) * 3.75);
   box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
   box-shadow: var(--shadow-base);
-  margin-top: 8px;
-  margin-top: var(--space-small);
   border: 1px solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: 8px;

package/dist/useChildComponent-es.js

@@ -1,4 +1,4 @@
-import React, { useMemo, isValidElement } from 'react';
+import React__default, { useMemo, isValidElement } from 'react';
 
 /**
  * Returns the first React Child that receives `true` from isCorrectComponent
@@ -8,7 +8,7 @@ import React, { useMemo, isValidElement } from 'react';
  */
 function useChildComponent(children, isCorrectComponent) {
     return useMemo(() => {
-        return React.Children.toArray(children).find(d => isValidElement(d) && isCorrectComponent(d));
+        return React__default.Children.toArray(children).find(d => isValidElement(d) && isCorrectComponent(d));
     }, [children]);
 }
 

package/dist/useFocusTrap-es.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 
 var useFocusTrap$1 = {};
 
 Object.defineProperty(useFocusTrap$1, "__esModule", { value: true });
 var useFocusTrap_2 = useFocusTrap$1.useFocusTrap = useFocusTrap;
-const react_1 = React;
+const react_1 = React__default;
 /**
  * Traps the focus within the children of the ref element.
  *

package/dist/useInView-es.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 
 var useInView$1 = {};
 
 Object.defineProperty(useInView$1, "__esModule", { value: true });
 var useInView_2 = useInView$1.useInView = useInView;
-const react_1 = React;
+const react_1 = React__default;
 function useInView() {
     const ref = (0, react_1.useRef)(null);
     const [isInView, setIsInView] = (0, react_1.useState)(false);

package/dist/useIsMounted-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { a as useSafeLayoutEffect$1 } from './useSafeLayoutEffect-es.js';
 
 var useIsMounted$1 = {};
@@ -14,7 +14,7 @@ var useSafeLayoutEffect = {};
 
 Object.defineProperty(useIsMounted$1, "__esModule", { value: true });
 var useIsMounted_2 = useIsMounted$1.useIsMounted = useIsMounted;
-const react_1 = React;
+const react_1 = React__default;
 const useSafeLayoutEffect_1 = useSafeLayoutEffect;
 /**
  * If you are using this hook in order to only perform an action once after mounting (for example sending

package/dist/useOnKeyDown-es.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 
 var useOnKeyDown$1 = {};
 
 Object.defineProperty(useOnKeyDown$1, "__esModule", { value: true });
 var useOnKeyDown_2 = useOnKeyDown$1.useOnKeyDown = useOnKeyDown;
-const react_1 = React;
+const react_1 = React__default;
 function useOnKeyDown(callback, keys) {
     (0, react_1.useEffect)(() => {
         window.addEventListener("keydown", handler);

package/dist/useRefocusOnActivator-es.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 
 var useRefocusOnActivator$1 = {};
 
 Object.defineProperty(useRefocusOnActivator$1, "__esModule", { value: true });
 var useRefocusOnActivator_2 = useRefocusOnActivator$1.useRefocusOnActivator = useRefocusOnActivator;
-const react_1 = React;
+const react_1 = React__default;
 /**
  * Brings back the focus to the element that opened an overlaid element once
  * said overlaid element is dismissed.

package/dist/useResizeObserver-es.js

@@ -1,5 +1,5 @@
 import { a as getAugmentedNamespace, c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
-import React from 'react';
+import React__default from 'react';
 import { a as throttle_1 } from './throttle-es.js';
 
 function _mergeNamespaces(n, m) {
@@ -956,7 +956,7 @@ var require$$0 = /*@__PURE__*/getAugmentedNamespace(ResizeObserver_es);
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var ResizeObserver = _interopDefault(require$$0);
-var react = React;
+var react = React__default;
 
 function useResizeObserver$1(opts) {
   if (opts === void 0) {
@@ -1055,7 +1055,7 @@ var polyfilled = useResizeObserver$1;
 	Object.defineProperty(exports, "__esModule", { value: true });
 	exports.Breakpoints = void 0;
 	exports.useResizeObserver = useResizeObserver;
-	const react_1 = React;
+	const react_1 = React__default;
 	// Importing the polyfilled version of ResizeObserver
 	// eslint-disable-next-line import/no-internal-modules
 	const polyfilled_1 = __importDefault(polyfilled);

package/dist/useSafeLayoutEffect-es.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 
 var useSafeLayoutEffect = {};
 
 Object.defineProperty(useSafeLayoutEffect, "__esModule", { value: true });
 var useSafeLayoutEffect_1 = useSafeLayoutEffect.useSafeLayoutEffect = void 0;
-const react_1 = React;
+const react_1 = React__default;
 useSafeLayoutEffect_1 = useSafeLayoutEffect.useSafeLayoutEffect = (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
     ? react_1.useLayoutEffect
     : react_1.useEffect;

package/dist/useScrollToActive-es.js

@@ -1,4 +1,4 @@
-import React, { useRef, useId, useState, useEffect } from 'react';
+import React__default, { useRef, useId, useState, useEffect } from 'react';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
 import { _ as _baseFlatten } from './_baseFlatten-es.js';
 import { a as _arrayMap, b as _baseGet } from './_baseGet-es.js';
@@ -249,7 +249,7 @@ var useLiveAnnounce$1 = {};
 
 Object.defineProperty(useLiveAnnounce$1, "__esModule", { value: true });
 var useLiveAnnounce_2 = useLiveAnnounce$1.useLiveAnnounce = useLiveAnnounce;
-const react_1 = React;
+const react_1 = React__default;
 /**
  * Announce a message on voice over whenever you do an action. This is
  * especially helpful when you have an action that adds or deletes an element
@@ -479,7 +479,7 @@ function generateCustomOptionObject(searchValue) {
     return {
         value: searchValue,
         label: searchValue,
-        prefix: React.createElement(Icon, { name: "add" }),
+        prefix: React__default.createElement(Icon, { name: "add" }),
         custom: true,
     };
 }