@jobber/components-native 0.84.4-JOB-138679-b1552ab.68 → 0.84.4-match-mobi-accfa8a.9

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.84.4-JOB-138679-b1552ab.68+b1552ab31",
+    "version": "0.84.4-match-mobi-accfa8a.9+accfa8aef",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -53,8 +53,9 @@
         "ts-xor": "^1.1.0"
     },
     "devDependencies": {
+        "@gorhom/bottom-sheet": "^5.2.8",
         "@react-native-community/datetimepicker": "^8.4.5",
-        "@react-native/babel-preset": "^0.81.1",
+        "@react-native/babel-preset": "^0.82.1",
         "@storybook/addon-a11y": "^9.1.2",
         "@storybook/react": "^9.1.2",
         "@storybook/react-native-web-vite": "^9.1.2",
@@ -78,6 +79,7 @@
     },
     "peerDependencies": {
         "@babel/core": "^7.4.5",
+        "@gorhom/bottom-sheet": "^5.2.8",
         "@jobber/design": "*",
         "@react-native-community/datetimepicker": ">=6.7.0",
         "date-fns": "^2.30.0",
@@ -94,5 +96,5 @@
         "react-native-safe-area-context": "^5.4.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "b1552ab319204ce883046ea2c22d875952746675"
+    "gitHead": "accfa8aefd00ea92526e90f81830b9a8691bdac7"
 }

package/dist/src/BottomSheet/BottomSheet.js

@@ -1,52 +1,78 @@
-import React, { forwardRef, useState } from "react";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import React, { useCallback, useImperativeHandle, useRef } from "react";
 import { Keyboard, View } from "react-native";
-import { BottomSheetOption } from "./components/BottomSheetOption";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import RNBottomSheet, { BottomSheetBackdrop, BottomSheetView, } from "@gorhom/bottom-sheet";
+import { tokens } from "@jobber/design";
 import { useStyles } from "./BottomSheet.style";
-import { UNSAFE_WrappedModalize } from "../ContentOverlay/UNSAFE_WrappedModalize";
-import { useIsScreenReaderEnabled } from "../hooks";
+import { BottomSheetOption } from "./components/BottomSheetOption";
+import { useBottomSheetBackHandler } from "./hooks/useBottomSheetBackHandler";
 import { Divider } from "../Divider";
 import { Heading } from "../Heading";
+import { useIsScreenReaderEnabled } from "../hooks";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
-export const BottomSheet = forwardRef(BottomSheetInternal);
-function BottomSheetInternal({ children, showCancel, loading = false, heading, onOpen, onClose, }, ref) {
-    const isScreenReaderEnabled = useIsScreenReaderEnabled();
-    const [open, setOpen] = useState(false);
+export function BottomSheet({ children, showCancel, loading = false, heading, onOpen, onClose, ref, }) {
     const styles = useStyles();
-    return (React.createElement(React.Fragment, null,
-        open && React.createElement(Overlay, { styles: styles }),
-        React.createElement(UNSAFE_WrappedModalize, { ref: ref, adjustToContentHeight: true, modalStyle: styles.modal, overlayStyle: styles.overlayModalize, HeaderComponent: heading && React.createElement(Header, { heading: heading, styles: styles }), FooterComponent: React.createElement(Footer, { cancellable: (showCancel && !loading) || isScreenReaderEnabled, onCancel: () => {
-                    var _a;
-                    (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.close();
-                }, styles: styles }), withHandle: false, withReactModal: isScreenReaderEnabled, onOpen: openModal, onClose: closeModal },
-            React.createElement(View, { style: !showCancel && !isScreenReaderEnabled ? styles.children : undefined }, children))));
-    function openModal() {
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-        setOpen(true);
-        dismissKeyboard();
-    }
-    function closeModal() {
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-        setOpen(false);
-    }
+    const isScreenReaderEnabled = useIsScreenReaderEnabled();
+    const cancellable = (showCancel && !loading) || isScreenReaderEnabled;
+    const { t } = useAtlantisI18n();
+    const insets = useSafeAreaInsets();
+    const previousIndexRef = useRef(-1);
+    const bottomSheetRef = useRef(null);
+    const { handleSheetPositionChange } = useBottomSheetBackHandler(bottomSheetRef);
+    useImperativeHandle(ref, () => ({
+        open: () => {
+            var _a;
+            (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.expand();
+        },
+        close: () => {
+            close();
+        },
+    }));
+    const close = useCallback(() => {
+        var _a;
+        (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    }, []);
+    const handleChange = (index) => {
+        // Handle Android back button
+        handleSheetPositionChange(index);
+        const previousIndex = previousIndexRef.current;
+        if (previousIndex === -1 && index >= 0) {
+            // Transitioned from closed to open
+            dismissKeyboard();
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        }
+        else if (previousIndex >= 0 && index === -1) {
+            // Transitioned from open to closed
+            dismissKeyboard();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+        previousIndexRef.current = index;
+    };
+    return (React.createElement(RNBottomSheet, { ref: bottomSheetRef, index: -1, backdropComponent: Backdrop, backgroundStyle: styles.background, enablePanDownToClose: true, onChange: handleChange, keyboardBlurBehavior: "restore", handleStyle: styles.handle },
+        React.createElement(BottomSheetView, { style: {
+                paddingBottom: insets.bottom + tokens["space-small"],
+                paddingTop: tokens["space-small"],
+            } },
+            heading && React.createElement(Header, { heading: heading, styles: styles }),
+            children,
+            cancellable && (React.createElement(Footer, { styles: styles, close: close, cancelLabel: t("cancel") })))));
 }
 function Header({ heading, styles, }) {
     return (React.createElement(View, { style: styles.header },
         React.createElement(Heading, { level: "subtitle" }, heading)));
 }
-function Footer({ cancellable, onCancel, styles, }) {
-    const insets = useSafeAreaInsets();
-    const { t } = useAtlantisI18n();
-    return (React.createElement(View, { style: { marginBottom: insets.bottom } }, cancellable && (React.createElement(View, { style: styles.children },
+function Footer({ styles, close, cancelLabel, }) {
+    return (React.createElement(View, null,
         React.createElement(View, { style: styles.footerDivider },
             React.createElement(Divider, null)),
-        React.createElement(BottomSheetOption, { text: t("cancel"), icon: "remove", onPress: onCancel })))));
+        React.createElement(BottomSheetOption, { text: cancelLabel, icon: "remove", onPress: close })));
 }
 function dismissKeyboard() {
     //Dismisses the keyboard before opening the bottom sheet.
     //In the case where an input text field is focused we don't want to show the bottom sheet behind or above keyboard
     Keyboard.dismiss();
 }
-function Overlay({ styles, }) {
-    return React.createElement(View, { style: styles.overlay });
+function Backdrop(bottomSheetBackdropProps) {
+    const styles = useStyles();
+    return (React.createElement(BottomSheetBackdrop, Object.assign({}, bottomSheetBackdropProps, { appearsOnIndex: 0, disappearsOnIndex: -1, style: styles.backdrop, opacity: 1 })));
 }

package/dist/src/BottomSheet/BottomSheet.style.js

@@ -1,20 +1,16 @@
-import { Dimensions, StyleSheet } from "react-native";
 import { buildThemedStyles } from "../AtlantisThemeContext";
-const { height } = Dimensions.get("window");
 export const useStyles = buildThemedStyles(tokens => {
     const modalBorderRadius = tokens["radius-larger"];
     return {
-        overlayModalize: {
-            backgroundColor: "transparent",
+        backdrop: {
+            backgroundColor: tokens["color-overlay"],
         },
-        overlay: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: tokens["color-overlay"], height }),
-        modal: {
+        background: {
             borderTopLeftRadius: modalBorderRadius,
             borderTopRightRadius: modalBorderRadius,
-            paddingTop: tokens["space-small"],
         },
-        children: {
-            paddingBottom: tokens["space-small"],
+        footerContainer: {
+            backgroundColor: tokens["color-surface"],
         },
         header: {
             paddingHorizontal: tokens["space-base"],
@@ -26,5 +22,8 @@ export const useStyles = buildThemedStyles(tokens => {
             marginTop: tokens["space-small"],
             marginBottom: tokens["space-smaller"],
         },
+        handle: {
+            display: "none",
+        },
     };
 });

package/dist/src/BottomSheet/hooks/useBottomSheetBackHandler.js

@@ -0,0 +1,26 @@
+import { useCallback, useRef } from "react";
+import { BackHandler } from "react-native";
+/**
+ * Hook that closes the bottom sheet on the hardware back button press if it is visible
+ * @param bottomSheetRef ref to the bottom sheet component
+ */
+export function useBottomSheetBackHandler(bottomSheetRef) {
+    const backHandlerSubscriptionRef = useRef(null);
+    const handleSheetPositionChange = useCallback((index) => {
+        var _a;
+        const isBottomSheetVisible = index >= 0;
+        if (isBottomSheetVisible && !backHandlerSubscriptionRef.current) {
+            // Setup the back handler if the bottom sheet is right in front of the user
+            backHandlerSubscriptionRef.current = BackHandler.addEventListener("hardwareBackPress", () => {
+                var _a;
+                (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                return true;
+            });
+        }
+        else if (!isBottomSheetVisible) {
+            (_a = backHandlerSubscriptionRef.current) === null || _a === void 0 ? void 0 : _a.remove();
+            backHandlerSubscriptionRef.current = null;
+        }
+    }, [bottomSheetRef]);
+    return { handleSheetPositionChange };
+}

package/dist/src/Chip/Chip.js

@@ -19,6 +19,7 @@ export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBa
                     : tokens["color-interactive--background"],
             },
             isActive && { backgroundColor: accentColor },
+            getBorderStyle(inactiveBackgroundColor, tokens),
         ];
         const dismiss = (isActive || inactiveBackgroundColor === "surface") &&
             styles.activeDismissIcon;
@@ -27,7 +28,7 @@ export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBa
             iconCustomColor: iconColor,
             dismissColor: dismiss,
         };
-    }, [accent, isActive, inactiveBackgroundColor]);
+    }, [accent, isActive, inactiveBackgroundColor, getBorderStyle, styles]);
     const accessibilityState = useMemo(() => {
         const checkableRoles = ["radio", "switch", "togglebutton", "checkbox"];
         if (checkableRoles.includes(accessibilityRole)) {
@@ -43,3 +44,13 @@ export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBa
         isDismissible && (React.createElement(View, { style: [styles.dismissIcon, dismissColor] },
             React.createElement(Icon, { name: "remove", size: "small" })))));
 }
+function getBorderStyle(inactiveBackgroundColor, tokens) {
+    let borderColor = "transparent";
+    if (inactiveBackgroundColor === "surface") {
+        borderColor = tokens["color-border"];
+    }
+    return {
+        borderColor,
+        borderWidth: tokens["border-base"],
+    };
+}

package/dist/src/Chip/Chip.style.js

@@ -10,7 +10,7 @@ export const useStyles = buildThemedStyles(tokens => {
             justifyContent: "center",
             marginHorizontal: tokens["space-smaller"],
             marginTop: tokens["space-small"],
-            paddingHorizontal: tokens["space-small"],
+            paddingHorizontal: tokens["space-base"],
         },
         iconLeft: {
             marginHorizontal: tokens["space-smallest"],

package/dist/src/Content/ContentHorizontal.style.js

@@ -12,6 +12,9 @@ export const useHorizontalStyles = buildThemedStyles(tokens => {
         noneChildSpace: {
             padding: 0,
         },
+        minusculeChildSpace: {
+            paddingLeft: tokens["space-minuscule"],
+        },
         smallestChildSpace: {
             paddingLeft: tokens["space-smallest"],
         },
@@ -21,11 +24,23 @@ export const useHorizontalStyles = buildThemedStyles(tokens => {
         smallChildSpace: {
             paddingLeft: tokens["space-small"],
         },
+        slimChildSpace: {
+            paddingLeft: tokens["space-slim"],
+        },
         baseChildSpace: {
             paddingLeft: tokens["space-base"],
         },
         largeChildSpace: {
             paddingLeft: tokens["space-large"],
         },
+        largerChildSpace: {
+            paddingLeft: tokens["space-larger"],
+        },
+        largestChildSpace: {
+            paddingLeft: tokens["space-largest"],
+        },
+        extravagantChildSpace: {
+            paddingLeft: tokens["space-extravagant"],
+        },
     };
 });

package/dist/src/Content/ContentSpaceAround.style.js

@@ -4,6 +4,9 @@ export const useSpaceAroundStyles = buildThemedStyles(tokens => {
         noneSpace: {
             padding: 0,
         },
+        minusculeSpace: {
+            padding: tokens["space-minuscule"],
+        },
         smallestSpace: {
             padding: tokens["space-smallest"],
         },
@@ -13,11 +16,23 @@ export const useSpaceAroundStyles = buildThemedStyles(tokens => {
         smallSpace: {
             padding: tokens["space-small"],
         },
+        slimSpace: {
+            padding: tokens["space-slim"],
+        },
         baseSpace: {
             padding: tokens["space-base"],
         },
         largeSpace: {
             padding: tokens["space-large"],
         },
+        largerSpace: {
+            padding: tokens["space-larger"],
+        },
+        largestSpace: {
+            padding: tokens["space-largest"],
+        },
+        extravagantSpace: {
+            padding: tokens["space-extravagant"],
+        },
     };
 });

package/dist/src/Content/ContentVertical.style.js

@@ -12,6 +12,9 @@ export const useVerticalStyles = buildThemedStyles(tokens => {
         noneChildSpace: {
             padding: 0,
         },
+        minusculeChildSpace: {
+            paddingTop: tokens["space-minuscule"],
+        },
         smallestChildSpace: {
             paddingTop: tokens["space-smallest"],
         },
@@ -21,11 +24,23 @@ export const useVerticalStyles = buildThemedStyles(tokens => {
         smallChildSpace: {
             paddingTop: tokens["space-small"],
         },
+        slimChildSpace: {
+            paddingTop: tokens["space-slim"],
+        },
         baseChildSpace: {
             paddingTop: tokens["space-base"],
         },
         largeChildSpace: {
             paddingTop: tokens["space-large"],
         },
+        largerChildSpace: {
+            paddingTop: tokens["space-larger"],
+        },
+        largestChildSpace: {
+            paddingTop: tokens["space-largest"],
+        },
+        extravagantChildSpace: {
+            paddingTop: tokens["space-extravagant"],
+        },
     };
 });

package/dist/src/InputText/InputText.js

@@ -93,10 +93,10 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
                 _name && setFocusedInput(_name);
                 setFocused(true);
                 onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-            }, onBlur: () => {
+            }, onBlur: event => {
                 _name && setFocusedInput("");
                 setFocused(false);
-                onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+                onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
                 field.onBlur();
                 trimWhitespace(inputTransform(field.value), updateFormAndState);
             }, ref: (instance) => {

package/dist/src/ProgressBar/ProgressBar.js

@@ -6,17 +6,21 @@ import { ProgressBarStepped } from "./ProgressBarStepped";
 import { sizeStyles } from "./ProgressBar.size.style";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
-export function ProgressBar({ loading, total, current, inProgress = 0, reverseTheme = false, header, variation = "progress", size = "base", }) {
+export function ProgressBar({ loading, total, current, inProgress = 0, reverseTheme = false, header, variation = "progress", size = "base", UNSAFE_style, }) {
     const { t } = useAtlantisI18n();
     const styles = useStyles();
     const { tokens } = useAtlantisTheme();
-    return (React.createElement(View, { accessible: true, accessibilityRole: "progressbar", accessibilityLabel: getA11yLabel() },
+    return (React.createElement(View, { accessible: true, accessibilityRole: "progressbar", accessibilityLabel: getA11yLabel(), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container },
         header,
-        variation === "stepped" ? (React.createElement(ProgressBarStepped, { total: total, current: current, color: reverseTheme ? undefined : tokens["color-interactive--background"], loading: loading, inProgress: inProgress })) : (React.createElement(View, { style: [styles.progressBarContainer, sizeStyles[size]] },
-            React.createElement(ProgressBarInner, { width: 100, animationDuration: 0, color: reverseTheme ? undefined : tokens["color-interactive--background"] }),
+        variation === "stepped" ? (React.createElement(ProgressBarStepped, { total: total, current: current, color: reverseTheme ? undefined : tokens["color-interactive--background"], loading: loading, inProgress: inProgress, UNSAFE_style: UNSAFE_style })) : (React.createElement(View, { testID: "progressbar-container", style: [
+                styles.progressBarContainer,
+                sizeStyles[size],
+                UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.progressBarContainer,
+            ] },
+            React.createElement(ProgressBarInner, { testID: "progressbar-track", width: 100, animationDuration: 0, color: reverseTheme ? undefined : tokens["color-interactive--background"], style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.track }),
             !loading && (React.createElement(React.Fragment, null,
-                inProgress && inProgress > 0 ? (React.createElement(ProgressBarInner, { width: calculateWidth(total, current + inProgress), color: tokens["color-informative"], animationDuration: 800 })) : (React.createElement(React.Fragment, null)),
-                React.createElement(ProgressBarInner, { width: calculateWidth(total, current), color: tokens["color-interactive"], animationDuration: 600 })))))));
+                inProgress && inProgress > 0 ? (React.createElement(ProgressBarInner, { testID: "progressbar-inprogress", width: calculateWidth(total, current + inProgress), color: tokens["color-informative"], animationDuration: 800, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.inProgressFill })) : (React.createElement(React.Fragment, null)),
+                React.createElement(ProgressBarInner, { testID: "progressbar-fill", width: calculateWidth(total, current), color: tokens["color-interactive"], animationDuration: 600, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.fill })))))));
     function getA11yLabel() {
         const a11yLabelValues = {
             current: String(current),

package/dist/src/ProgressBar/ProgressBarInner.js

@@ -1,21 +1,12 @@
 import React from "react";
 import { View } from "react-native";
-// import Reanimated from "react-native-reanimated";
-// import { useTiming } from "utils/reanimated";
 import { useStyles } from "./ProgressBar.style";
-export function ProgressBarInner({ width, 
-// animationDuration = 0,
-color, }) {
-    // Animation breaking on Android
-    // const [animatedOpacity] = useTiming({
-    //   duration: animationDuration,
-    //   fromValue: 0,
-    //   toValue: 1,
-    // });
+export function ProgressBarInner({ width, color, style, testID, }) {
     const styles = useStyles();
-    return (React.createElement(View, { style: [
+    return (React.createElement(View, { testID: testID, style: [
             styles.progressBarInner,
             Object.assign({ width: `${width}%` }, (color && { backgroundColor: color })),
+            style,
         ] }));
 }
 export function calculateWidth(total, current) {

package/dist/src/ProgressBar/ProgressBarStepped.js

@@ -1,9 +1,13 @@
 import React from "react";
 import { View } from "react-native";
 import { useStyles } from "./ProgressBar.style";
-export function ProgressBarStepped({ total, current, color, loading, inProgress, }) {
+export function ProgressBarStepped({ total, current, color, loading, inProgress, UNSAFE_style, }) {
     const styles = useStyles();
-    return (React.createElement(View, { style: [styles.progressBarContainer, { height: 10 }] }, Array.from({ length: total }).map((_, index) => {
+    return (React.createElement(View, { testID: "progressbar-container", style: [
+            styles.progressBarContainer,
+            { height: 10 },
+            UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.progressBarContainer,
+        ] }, Array.from({ length: total }).map((_, index) => {
         const step = index + 1;
         const isCompleted = step <= current;
         const lastStep = step === total;
@@ -17,6 +21,7 @@ export function ProgressBarStepped({ total, current, color, loading, inProgress,
                     step <= inProgressSteps &&
                     styles.inProgressStep,
                 lastStep && { marginRight: 0 },
+                UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.step,
             ], testID: isCompleted
                 ? "progress-step-completed"
                 : step <= inProgressSteps

package/dist/src/StatusIndicator/StatusIndicator.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { View } from "react-native";
+import { useStyles } from "./StatusIndicator.style";
+import { tokens } from "../utils/design";
+export function StatusIndicator({ status }) {
+    const styles = useStyles();
+    return (React.createElement(View, { testID: `${status}Indicator`, style: [
+            styles.statusIndicator,
+            { backgroundColor: tokens[`color-${status}`] },
+        ] }));
+}

package/dist/src/StatusIndicator/StatusIndicator.style.js

@@ -0,0 +1,12 @@
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    const statusIndicatorDiameter = 8;
+    return {
+        statusIndicator: {
+            borderRadius: tokens["radius-circle"],
+            backgroundColor: tokens["color-success"],
+            width: statusIndicatorDiameter,
+            height: statusIndicatorDiameter,
+        },
+    };
+});

package/dist/src/StatusIndicator/StatusIndicator.type.js

@@ -0,0 +1 @@
+export {};

package/dist/src/StatusIndicator/index.js

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

package/dist/src/StatusLabel/StatusLabel.js

@@ -1,23 +1,17 @@
 import React from "react";
 import { View } from "react-native";
 import { useStyles } from "./StatusLabel.style";
-import { Text } from "../Text";
-import { useAtlantisTheme } from "../AtlantisThemeContext";
+import { Typography } from "../Typography";
+import { StatusIndicator } from "../StatusIndicator";
+import { tokens } from "../utils/design";
 export function StatusLabel({ text, alignment = "end", status = "success", }) {
     const styles = useStyles();
     return (React.createElement(View, { style: [
             styles.statusLabelRow,
+            { backgroundColor: tokens[`color-${status}--surface`] },
             alignment === "start" && styles.labelTextStartAligned,
         ] },
         React.createElement(View, { style: styles.statusLabelText },
-            React.createElement(Text, { align: alignment, level: "textSupporting", variation: "subdued" }, text)),
-        React.createElement(View, { style: styles.innerPad }),
-        React.createElement(StatusLabelIcon, { status: status, styles: styles })));
-}
-function StatusLabelIcon({ status, styles }) {
-    const { tokens } = useAtlantisTheme();
-    return (React.createElement(View, { testID: `${status}LabelIcon`, style: [
-            styles.statusLabelIcon,
-            { backgroundColor: tokens[`color-${status}`] },
-        ] }));
+            React.createElement(Typography, { align: alignment, size: "smaller", fontWeight: "medium", color: `${status}OnSurface` }, text)),
+        React.createElement(StatusIndicator, { status: status })));
 }

package/dist/src/StatusLabel/StatusLabel.style.js

@@ -1,29 +1,26 @@
 import { buildThemedStyles } from "../AtlantisThemeContext";
-const statusLabelRadius = 3; // Needs to be hardcoded to 3 as this shouldn't change with the tokens
 export const useStyles = buildThemedStyles(tokens => {
-    const statusLabelIconDiameter = tokens["space-base"] - tokens["space-smaller"]; //12px
-    const indicatorOffset = tokens["space-smallest"] + tokens["space-minuscule"];
     return {
         statusLabelRow: {
             flexDirection: "row",
             justifyContent: "flex-end",
+            alignItems: "center",
+            alignSelf: "flex-start",
             flexWrap: "nowrap",
+            flexGrow: 0,
+            flexShrink: 1,
+            gap: tokens["space-smaller"],
+            backgroundColor: tokens["color-success--surface"],
+            borderRadius: tokens["radius-large"],
+            paddingVertical: tokens["space-smaller"],
+            paddingHorizontal: tokens["space-small"],
         },
         statusLabelText: {
             flexShrink: 1,
-        },
-        statusLabelIcon: {
-            borderRadius: statusLabelRadius,
-            backgroundColor: tokens["color-success"],
-            width: statusLabelIconDiameter,
-            height: statusLabelIconDiameter,
-            marginTop: indicatorOffset,
+            marginBottom: -1,
         },
         labelTextStartAligned: {
             flexDirection: "row-reverse",
         },
-        innerPad: {
-            width: tokens["space-small"],
-        },
     };
 });

package/dist/src/hooks/useFormController.js

@@ -13,7 +13,7 @@ export function useFormController({ name, value, validations, }) {
         name: fieldName,
         control,
         rules: validations,
-        defaultValue: value || undefined,
+        defaultValue: typeof value === "boolean" ? value : value || undefined,
     });
     // The naming convention established by react-hook-form for arrays of fields is, for example, "emails.0.description".
     // Preserve original behavior: only treat three-part names as nested paths.

package/dist/src/index.js

@@ -39,6 +39,7 @@ export * from "./Menu";
 export * from "./ProgressBar";
 export * from "./Select";
 export * from "./StatusLabel";
+export * from "./StatusIndicator";
 export * from "./Switch";
 export * from "./Text";
 export * from "./TextList";

package/dist/src/utils/meta/meta.json

@@ -57,6 +57,7 @@
         "Option",
         "ProgressBar",
         "Select",
+        "StatusIndicator",
         "StatusLabel",
         "Switch",
         "Text",