@jobber/components-native 0.9.0 → 0.11.0

package/dist/src/Button/Button.js

@@ -0,0 +1,78 @@
+import React from "react";
+import { TouchableHighlight, View } from "react-native";
+import { styles } from "./Button.style";
+// eslint-disable-next-line import/no-internal-modules
+import { InternalButtonLoading } from "./components/InternalButtonLoading";
+import { ActionLabel } from "../ActionLabel";
+import { Icon } from "../Icon";
+import { tokens } from "../utils/design";
+export function Button({ label, onPress, variation = "work", type = "primary", fullHeight = false, fullWidth = true, disabled = false, loading = false, size = "base", accessibilityLabel, accessibilityHint, icon, }) {
+    const buttonStyle = [
+        styles.button,
+        styles[variation],
+        styles[type],
+        styles[size],
+        disabled && styles.disabled,
+        fullHeight && styles.fullHeight,
+        fullWidth && styles.reducedPaddingForFullWidth,
+    ];
+    // attempts to use Pressable caused problems.  When a ScrollView contained
+    // an InputText that was focused, it required two presses to activate the
+    // Pressable.  Using a TouchableHighlight made things register correctly
+    // in a single press
+    return (React.createElement(TouchableHighlight, { onPress: onPress, testID: accessibilityLabel || label, accessibilityLabel: accessibilityLabel || label, accessibilityHint: accessibilityHint, accessibilityRole: "button", accessibilityState: { disabled, busy: loading }, disabled: disabled || loading, underlayColor: tokens["color-greyBlue--dark"], activeOpacity: tokens["opacity-pressed"], style: [
+            styles.touchable,
+            fullWidth && styles.fullWidth,
+            fullHeight && styles.fullHeight,
+        ] },
+        React.createElement(View, { style: buttonStyle },
+            loading && React.createElement(InternalButtonLoading, { variation: variation, type: type }),
+            React.createElement(View, { style: getContentStyles(label, icon) },
+                icon && (React.createElement(View, { style: styles.iconStyle },
+                    React.createElement(Icon, { name: icon, color: getIconColorVariation(variation, type, disabled) }))),
+                label && (React.createElement(View, { style: styles.labelStyle },
+                    React.createElement(ActionLabel, { variation: getActionLabelVariation(variation, type), disabled: disabled, align: icon ? "start" : undefined }, label)))))));
+}
+function getActionLabelVariation(variation, type) {
+    if (type === "primary" && variation !== "cancel") {
+        return "onPrimary";
+    }
+    switch (variation) {
+        case "learning":
+            return "learning";
+        case "destructive":
+            return "destructive";
+        case "cancel":
+            return "subtle";
+        default:
+            return "interactive";
+    }
+}
+function getIconColorVariation(variation, type, disabled) {
+    if (disabled) {
+        return "disabled";
+    }
+    if (type === "primary" && variation !== "cancel") {
+        return "white";
+    }
+    switch (variation) {
+        case "learning":
+            return "informative";
+        case "destructive":
+            return "destructive";
+        case "cancel":
+            return "interactiveSubtle";
+        default:
+            return "interactive";
+    }
+}
+function getContentStyles(label, icon) {
+    if (label && !icon) {
+        return undefined;
+    }
+    return [
+        styles.content,
+        icon && !!label && styles.iconPaddingOffset,
+        !!label && styles.contentWithLabel,
+    ];
+}

package/dist/src/Button/Button.style.js

@@ -0,0 +1,92 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+const iconTranslateY = tokens["space-large"] / 2;
+const buttonRadius = tokens["radius-large"];
+export const baseButtonHeight = tokens["space-base"] * 3.5;
+export const smallButtonHeight = tokens["space-base"] * 2.25;
+export const styles = StyleSheet.create({
+    fullHeight: {
+        flexGrow: 1,
+        flexShrink: 0,
+    },
+    fullWidth: {
+        alignSelf: "stretch",
+    },
+    touchable: {
+        borderRadius: buttonRadius,
+    },
+    button: {
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "stretch",
+        flexDirection: "row",
+        overflow: "hidden",
+        margin: 0,
+        borderRadius: buttonRadius,
+        borderWidth: tokens["border-base"],
+        paddingVertical: tokens["space-small"],
+    },
+    base: {
+        minHeight: baseButtonHeight,
+        paddingHorizontal: tokens["space-base"],
+    },
+    small: {
+        minHeight: smallButtonHeight,
+        paddingHorizontal: tokens["space-small"] + tokens["space-smaller"],
+    },
+    reducedPaddingForFullWidth: {
+        paddingHorizontal: tokens["space-smaller"],
+    },
+    iconPaddingOffset: {
+        paddingRight: tokens["space-smaller"],
+    },
+    content: {
+        paddingLeft: tokens["space-large"],
+        height: "100%",
+    },
+    contentWithLabel: {
+        paddingLeft: tokens["space-large"] + tokens["space-small"],
+    },
+    iconStyle: {
+        position: "absolute",
+        top: "50%",
+        left: 0,
+        transform: [{ translateY: -iconTranslateY }],
+    },
+    labelStyle: {
+        flexGrow: 1,
+        justifyContent: "center",
+    },
+    /* Variations */
+    work: {
+        backgroundColor: tokens["color-interactive"],
+        borderColor: tokens["color-interactive"],
+    },
+    learning: {
+        backgroundColor: tokens["color-informative"],
+        borderColor: tokens["color-informative"],
+    },
+    destructive: {
+        backgroundColor: tokens["color-destructive"],
+        borderColor: tokens["color-destructive"],
+    },
+    /* Cancel is special because, by default, it's styled as a secondary button */
+    cancel: {
+        backgroundColor: tokens["color-surface"],
+        borderColor: tokens["color-interactive--subtle"],
+    },
+    /* Types */
+    primary: {},
+    secondary: {
+        backgroundColor: tokens["color-surface"],
+    },
+    tertiary: {
+        backgroundColor: tokens["color-surface"],
+        borderColor: tokens["color-surface"],
+    },
+    /* Disabled */
+    disabled: {
+        borderColor: tokens["color-disabled--secondary"],
+        backgroundColor: tokens["color-disabled--secondary"],
+    },
+});

package/dist/src/Button/components/InternalButtonLoading/InternalButtonLoading.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { ImageBackground, PixelRatio } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withTiming, } from "react-native-reanimated";
+import { styles } from "./InternalButtonLoading.style";
+import { tokens } from "../../../utils/design";
+const imageWidth = 96;
+const offset = PixelRatio.roundToNearestPixel(imageWidth / PixelRatio.get());
+const leftOffset = -1 * offset;
+const AnimatedImage = Animated.createAnimatedComponent(ImageBackground);
+function InternalButtonLoadingInternal({ variation, type, }) {
+    const translateX = useSharedValue(0);
+    translateX.value = withRepeat(withTiming(offset, {
+        duration: tokens["timing-loading"],
+        easing: Easing.linear,
+    }), -1);
+    const opacity = useSharedValue(0);
+    opacity.value = withDelay(tokens["timing-quick"], withTiming(1, {
+        duration: tokens["timing-base"],
+        easing: Easing.linear,
+    }));
+    const animations = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+        transform: [{ translateX: translateX.value }],
+    }));
+    return (React.createElement(AnimatedImage, { testID: "loadingImage", source: { uri: getLoadingPattern({ variation, type }) }, resizeMode: "repeat", style: [styles.image, { left: leftOffset }, animations] }));
+}
+export const darkPattern = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgAgMAAACf9p+rAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAAITgAACE4AUWWMWAAAAAMUExURQAAAEdwTAAAAAAAAKDh18UAAAAEdFJOUxkADQwimkzpAAAAtUlEQVRIx+3NqxHDQBRDUc0YuxyXokxgSkmT7sdgP++3YoYrqAsOYDto+7gfpwtfHy4Xfj7cLvw3sYlNbOINAoI4IIgTgrggiBuCIAThQyB8CIQLkXAhEi5EwoVIWEiEhURYSISFRMyQiRkyMUMmZsjECIUYoRAjFGKEQvRQiR4q0UMleqhECwuihQXRwoJoYUEQgiAEQQiCEAQhCEIQhCAIQRCCIARBCIIQBCEIQhCEIAhB8AEuzZ5wHe17xgAAAABJRU5ErkJggg==";
+export const lightPattern = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgAgMAAACf9p+rAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAAITgAACE4AUWWMWAAAAAJUExURf///0dwTP///0SistEAAAADdFJOU0AAILGCadYAAAC0SURBVEjH7c2pFcNAFENRHTMX4pKUE5hS0oT7NZjlbyNmOIJ64AK2g7aP+3G68PXhcuHnw+3CfxOb2MQm3iAgiAOCOCGIC4K4IQhCED4EwodAuBAJFyLhQiRciISFRFhIhIVEWEjEDJmYIRMzZGKGTIxQiBEKMUIhRihED5XooRI9VKKHSrSwIFpYEC0siBYWBCEIQhCEIAhBEIIgBEEIghAEIQhCEIQgCEEQgiAEQQiCEAQfva6WeBniVLgAAAAASUVORK5CYII=";
+function getLoadingPattern({ variation, type, }) {
+    if (variation === "cancel")
+        return darkPattern;
+    if (type === "primary")
+        return lightPattern;
+    return darkPattern;
+}
+export const InternalButtonLoading = React.memo(InternalButtonLoadingInternal);

package/dist/src/Button/components/InternalButtonLoading/InternalButtonLoading.style.js

@@ -0,0 +1,4 @@
+import { StyleSheet } from "react-native";
+export const styles = StyleSheet.create({
+    image: StyleSheet.absoluteFillObject,
+});

package/dist/src/Button/components/InternalButtonLoading/index.js

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

package/dist/src/Button/index.js

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

package/dist/src/Button/types.js

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

package/dist/src/InputFieldWrapper/CommonInputStyles.style.js

@@ -0,0 +1,33 @@
+import { StyleSheet } from "react-native";
+import { typographyStyles } from "../Typography";
+import { tokens } from "../utils/design";
+export const commonInputStyles = StyleSheet.create({
+    input: {
+        width: "100%",
+        flexShrink: 1,
+        flexGrow: 1,
+        color: tokens["color-text"],
+        fontFamily: typographyStyles.baseRegularRegular.fontFamily,
+        fontSize: typographyStyles.defaultSize.fontSize,
+        letterSpacing: typographyStyles.baseLetterSpacing.letterSpacing,
+        minHeight: tokens["space-largest"],
+        padding: 0,
+    },
+    inputEmpty: {
+        paddingTop: 0,
+    },
+    inputDisabled: {
+        color: typographyStyles.disabled.color,
+    },
+    container: {
+        marginVertical: tokens["space-smaller"],
+        backgroundColor: tokens["color-surface"],
+        minHeight: tokens["space-largest"],
+        flexDirection: "row",
+        justifyContent: "space-between",
+        width: "100%",
+        borderColor: tokens["color-grey"],
+        borderStyle: "solid",
+        borderBottomWidth: tokens["border-base"],
+    },
+});

package/dist/src/InputFieldWrapper/InputFieldWrapper.js

@@ -0,0 +1,88 @@
+import React from "react";
+import { 
+// eslint-disable-next-line no-restricted-imports
+Text as RNText, View, } from "react-native";
+import { styles } from "./InputFieldWrapper.style";
+import { PrefixIcon, PrefixLabel } from "./components/Prefix/Prefix";
+import { SuffixIcon, SuffixLabel } from "./components/Suffix/Suffix";
+import { ClearAction } from "./components/ClearAction";
+import { ErrorMessageWrapper } from "../ErrorMessageWrapper";
+import { typographyStyles } from "../Typography";
+import { Text } from "../Text";
+export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, hasMiniLabel = false, hasValue = false, error, focused = false, children, onClear, showClearAction = false, styleOverride, }) {
+    fieldAffixRequiredPropsCheck([prefix, suffix]);
+    const handleClear = onClear !== null && onClear !== void 0 ? onClear : noopClear;
+    warnIfClearActionWithNoOnClear(onClear, showClearAction);
+    const inputInvalid = Boolean(invalid) || Boolean(error);
+    return (React.createElement(ErrorMessageWrapper, { message: getMessage({ invalid, error }) },
+        React.createElement(View, { testID: "ATL-InputFieldWrapper", style: [
+                styles.container,
+                focused && styles.inputFocused,
+                (Boolean(invalid) || error) && styles.inputInvalid,
+                disabled && styles.disabled,
+                styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.container,
+            ] },
+            (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && (React.createElement(PrefixIcon, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, icon: prefix.icon })),
+            React.createElement(View, { style: [styles.inputContainer] },
+                React.createElement(View, { style: [
+                        !!placeholder && styles.label,
+                        hasMiniLabel && styles.miniLabel,
+                        disabled && styles.disabled,
+                        hasMiniLabel &&
+                            showClearAction &&
+                            styles.miniLabelShowClearAction,
+                    ], pointerEvents: "none" },
+                    React.createElement(Placeholder, { placeholder: placeholder, labelVariation: getLabelVariation(error, invalid, focused, disabled), hasMiniLabel: hasMiniLabel, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.placeholderText })),
+                (prefix === null || prefix === void 0 ? void 0 : prefix.label) && hasValue && (React.createElement(PrefixLabel, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, label: prefix.label, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.prefixLabel })),
+                children,
+                (showClearAction || (suffix === null || suffix === void 0 ? void 0 : suffix.label) || (suffix === null || suffix === void 0 ? void 0 : suffix.icon)) && (React.createElement(View, { style: styles.inputEndContainer },
+                    showClearAction && (React.createElement(ClearAction, { hasMarginRight: !!(suffix === null || suffix === void 0 ? void 0 : suffix.icon) || !!(suffix === null || suffix === void 0 ? void 0 : suffix.label), onPress: handleClear })),
+                    (suffix === null || suffix === void 0 ? void 0 : suffix.label) && hasValue && (React.createElement(SuffixLabel, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, label: suffix.label, hasLeftMargin: !showClearAction, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.suffixLabel })),
+                    (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React.createElement(SuffixIcon, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, hasLeftMargin: !!(!showClearAction || (suffix === null || suffix === void 0 ? void 0 : suffix.label)), inputInvalid: inputInvalid, icon: suffix.icon, onPress: suffix.onPress })))))),
+        assistiveText && !error && !invalid && (React.createElement(Text, { level: "textSupporting", variation: disabled ? "disabled" : focused ? "interactive" : "subdued" }, assistiveText))));
+}
+function getLabelVariation(error, invalid, focused, disabled) {
+    if (invalid || error) {
+        return "error";
+    }
+    else if (disabled) {
+        return "disabled";
+    }
+    else if (focused) {
+        return "interactive";
+    }
+    return "subdued";
+}
+function fieldAffixRequiredPropsCheck(affixPair) {
+    affixPair.map(affix => {
+        if (typeof affix !== "undefined" && !affix.icon && !affix.label) {
+            throw new Error(`One of 'label' or 'icon' is required by the field affix component.`);
+        }
+    });
+}
+function warnIfClearActionWithNoOnClear(onClear, showClearAction) {
+    if (showClearAction && !onClear && __DEV__) {
+        console.warn("Declare an `onClear` prop on your input. You can set `clearable` to never or `showClearAction` to false if you don't need a clearable input");
+    }
+}
+function noopClear() {
+    warnIfClearActionWithNoOnClear(undefined, true);
+}
+function getMessage({ invalid, error, }) {
+    const messages = [];
+    if (error === null || error === void 0 ? void 0 : error.message)
+        messages.push(error.message);
+    if (invalid && typeof invalid === "string")
+        messages.push(invalid);
+    return messages.join("\n");
+}
+function Placeholder({ placeholder, styleOverride, labelVariation, hasMiniLabel, }) {
+    return (React.createElement(React.Fragment, null, !styleOverride ? (React.createElement(Text, { hideFromScreenReader: true, maxLines: "single", variation: labelVariation, level: hasMiniLabel ? "textSupporting" : "text" }, placeholder)) : (React.createElement(RNText, { accessibilityRole: "none", accessible: false, importantForAccessibility: "no-hide-descendants", numberOfLines: 1, style: [
+            typographyStyles[labelVariation],
+            typographyStyles.baseRegularRegular,
+            hasMiniLabel
+                ? typographyStyles.smallSize
+                : typographyStyles.defaultSize,
+            styleOverride,
+        ] }, placeholder))));
+}

package/dist/src/InputFieldWrapper/InputFieldWrapper.style.js

@@ -0,0 +1,79 @@
+import { StyleSheet } from "react-native";
+import { commonInputStyles } from "./CommonInputStyles.style";
+import { tokens } from "../utils/design";
+import { typographyStyles } from "../Typography";
+export const styles = StyleSheet.create({
+    container: StyleSheet.flatten([commonInputStyles.container]),
+    inputContainer: {
+        flexDirection: "row",
+        flex: 1,
+        justifyContent: "flex-start",
+    },
+    inputFocused: {
+        borderColor: tokens["color-interactive"],
+    },
+    inputInvalid: {
+        borderColor: tokens["color-critical"],
+    },
+    label: {
+        // for placeholder
+        position: "absolute",
+        top: typographyStyles.smallSize.fontSize,
+        right: 0,
+        bottom: 0,
+        left: 0,
+    },
+    miniLabel: {
+        top: 0,
+        paddingTop: tokens["space-smallest"],
+        backgroundColor: tokens["color-surface"],
+        maxHeight: (typographyStyles.smallSize.lineHeight || 0) + tokens["space-smaller"],
+        zIndex: 1,
+    },
+    // Prevents the miniLabel from cutting off the ClearAction button
+    miniLabelShowClearAction: {
+        backgroundColor: "transparent",
+    },
+    disabled: {
+        backgroundColor: tokens["color-disabled--secondary"],
+        borderTopLeftRadius: tokens["radius-large"],
+        borderTopRightRadius: tokens["radius-large"],
+    },
+    fieldAffix: {
+        flexDirection: "row",
+    },
+    fieldAffixMiniLabel: {
+        paddingTop: 0,
+        // @ts-expect-error tsc-ci
+        top: typographyStyles.smallSize.fontSize / 2,
+        right: 0,
+        bottom: 0,
+        left: 0,
+    },
+    prefixIcon: {
+        justifyContent: "center",
+        paddingRight: tokens["space-small"],
+    },
+    prefixLabel: {
+        justifyContent: "center",
+        paddingTop: tokens["space-minuscule"],
+        paddingRight: tokens["space-minuscule"],
+    },
+    suffixIcon: {
+        justifyContent: "center",
+    },
+    suffixLabel: {
+        justifyContent: "center",
+        paddingTop: tokens["space-minuscule"],
+    },
+    suffixIconMargin: {
+        marginLeft: tokens["space-small"] + tokens["space-smaller"],
+    },
+    suffixLabelMargin: {
+        marginLeft: tokens["space-smallest"],
+    },
+    inputEndContainer: {
+        flexDirection: "row",
+        zIndex: 1,
+    },
+});

package/dist/src/InputFieldWrapper/components/ClearAction/ClearAction.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { useIntl } from "react-intl";
+import { styles } from "./ClearAction.style";
+import { messages } from "./messages";
+import { Icon } from "../../../Icon";
+export function ClearAction({ onPress, hasMarginRight = false, }) {
+    const { formatMessage } = useIntl();
+    return (React.createElement(Pressable, { style: [styles.container, hasMarginRight && styles.addedMargin], onPress: onPress, accessibilityLabel: formatMessage(messages.clearTextLabel) },
+        React.createElement(View, { style: styles.circle },
+            React.createElement(Icon, { size: "small", name: "cross", color: "interactiveSubtle" }))));
+}

package/dist/src/InputFieldWrapper/components/ClearAction/ClearAction.style.js

@@ -0,0 +1,25 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+const width = tokens["space-smaller"] + tokens["space-larger"];
+export const styles = StyleSheet.create({
+    container: {
+        width,
+        height: "100%",
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "center",
+    },
+    circle: {
+        backgroundColor: tokens["color-surface--background"],
+        borderRadius: tokens["radius-circle"],
+        width: tokens["space-large"],
+        height: tokens["space-large"],
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    addedMargin: {
+        marginRight: tokens["space-small"],
+    },
+});

package/dist/src/InputFieldWrapper/components/ClearAction/index.js

@@ -0,0 +1,2 @@
+export { ClearAction } from "./ClearAction";
+export { messages } from "./messages";

package/dist/src/InputFieldWrapper/components/ClearAction/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    clearTextLabel: {
+        id: "clearTextLabel",
+        defaultMessage: "Clear input",
+        description: "Accessiblity label for the clear input button",
+    },
+});

package/dist/src/InputFieldWrapper/components/Prefix/Prefix.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { 
+// eslint-disable-next-line no-restricted-imports
+Text as RNText, View, } from "react-native";
+import { Icon } from "../../../Icon";
+import { Text } from "../../../Text";
+import { tokens } from "../../../utils/design";
+import { typographyStyles } from "../../../Typography";
+import { styles } from "../../InputFieldWrapper.style";
+export const prefixLabelTestId = "ATL-InputFieldWrapper-PrefixLabel";
+export const prefixIconTestId = "ATL-InputFieldWrapper-PrefixIcon";
+export function PrefixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, styleOverride, }) {
+    return (React.createElement(View, { style: [
+            styles.fieldAffix,
+            focused && styles.inputFocused,
+            inputInvalid && styles.inputInvalid,
+        ], testID: prefixLabelTestId },
+        React.createElement(View, { style: [styles.prefixLabel, hasMiniLabel && styles.fieldAffixMiniLabel] }, !styleOverride ? (React.createElement(Text, { variation: disabled ? "disabled" : "base" }, label)) : (React.createElement(RNText, { allowFontScaling: true, style: [
+                typographyStyles.baseRegularRegular,
+                typographyStyles.base,
+                typographyStyles.defaultSize,
+                disabled ? typographyStyles.subdued : typographyStyles.base,
+                styleOverride,
+            ] }, label)))));
+}
+export function PrefixIcon({ focused, disabled, inputInvalid, icon, }) {
+    return (React.createElement(View, { testID: prefixIconTestId, style: [
+            styles.fieldAffix,
+            focused && styles.inputFocused,
+            inputInvalid && styles.inputInvalid,
+        ] },
+        React.createElement(View, { style: styles.prefixIcon },
+            React.createElement(Icon, { customColor: disabled ? tokens["color-disabled"] : tokens["color-greyBlue"], name: icon }))));
+}

package/dist/src/InputFieldWrapper/components/Suffix/Suffix.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { Pressable, 
+// eslint-disable-next-line no-restricted-imports
+Text as RNText, View, } from "react-native";
+import { tokens } from "../../../utils/design";
+import { Icon } from "../../../Icon";
+import { Text } from "../../../Text";
+import { typographyStyles } from "../../../Typography";
+import { styles } from "../../InputFieldWrapper.style";
+export const suffixLabelTestId = "ATL-InputFieldWrapper-SuffixLabel";
+export const suffixIconTestId = "ATL-InputFieldWrapper-SuffixIcon";
+export function SuffixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, hasLeftMargin = true, styleOverride, }) {
+    return (React.createElement(View, { testID: suffixLabelTestId, style: [
+            styles.fieldAffix,
+            focused && styles.inputFocused,
+            inputInvalid && styles.inputInvalid,
+            hasLeftMargin && styles.suffixLabelMargin,
+        ] },
+        React.createElement(View, { style: [styles.suffixLabel, hasMiniLabel && styles.fieldAffixMiniLabel] }, !styleOverride ? (React.createElement(Text, { variation: disabled ? "disabled" : "base" }, label)) : (React.createElement(RNText, { allowFontScaling: true, style: [
+                typographyStyles.baseRegularRegular,
+                typographyStyles.base,
+                typographyStyles.defaultSize,
+                disabled ? typographyStyles.subdued : typographyStyles.base,
+                styleOverride,
+            ] }, label)))));
+}
+export function SuffixIcon({ focused, disabled, inputInvalid, icon, hasLeftMargin = false, onPress, }) {
+    return (React.createElement(View, { testID: suffixIconTestId, style: [
+            styles.fieldAffix,
+            focused && styles.inputFocused,
+            inputInvalid && styles.inputInvalid,
+        ] },
+        React.createElement(Pressable, { style: [styles.suffixIcon, hasLeftMargin && styles.suffixIconMargin], onPress: onPress },
+            React.createElement(Icon, { customColor: disabled ? tokens["color-disabled"] : tokens["color-greyBlue"], name: icon }))));
+}

package/dist/src/InputFieldWrapper/hooks/useShowClear.js

@@ -0,0 +1,15 @@
+export function useShowClear({ clearable, multiline, focused, hasValue, disabled = false, }) {
+    if (multiline && clearable !== "never") {
+        throw new Error("Multiline inputs can not be clearable");
+    }
+    // Do not show if there is no value
+    if (!hasValue || clearable === "never" || disabled) {
+        return false;
+    }
+    switch (clearable) {
+        case "while-editing":
+            return focused;
+        case "always":
+            return true;
+    }
+}

package/dist/src/InputFieldWrapper/index.js

@@ -0,0 +1,3 @@
+export { commonInputStyles } from "./CommonInputStyles.style";
+export { InputFieldWrapper } from "./InputFieldWrapper";
+export { useShowClear } from "./hooks/useShowClear";

package/dist/src/index.js

@@ -9,3 +9,5 @@ export * from "./ActivityIndicator";
 export * from "./Card";
 export * from "./StatusLabel";
 export * from "./AtlantisContext";
+export * from "./Button";
+export * from "./InputFieldWrapper";