@aws-amplify/ui-react-native 1.2.22 → 1.2.23

package/lib/InAppMessaging/hooks/useMessageImage/utils.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLayoutImageDimensions = exports.prefetchNetworkImage = void 0;
+const react_native_1 = require("react-native");
+const core_1 = require("@aws-amplify/core");
+const constants_1 = require("./constants");
+const logger = new core_1.ConsoleLogger('Notifications.InAppMessaging');
+const inAppMessageImageSizes = {
+    BOTTOM_BANNER: constants_1.BANNER_IMAGE_SCREEN_SIZE,
+    MIDDLE_BANNER: constants_1.BANNER_IMAGE_SCREEN_SIZE,
+    TOP_BANNER: constants_1.BANNER_IMAGE_SCREEN_SIZE,
+    CAROUSEL: constants_1.CAROUSEL_IMAGE_SCREEN_SIZE,
+    FULL_SCREEN: constants_1.FULL_SCREEN_IMAGE_SCREEN_SIZE,
+    MODAL: constants_1.MODAL_IMAGE_SCREEN_SIZE,
+};
+const prefetchNetworkImage = async (url) => {
+    try {
+        const loaded = await react_native_1.Image.prefetch(url);
+        if (loaded) {
+            return 'loaded';
+        }
+        logger.error(`Image failed to load: ${url}`);
+        return 'failed';
+    }
+    catch (e) {
+        logger.error(`Image.prefetch failed: ${e}`);
+        return 'failed';
+    }
+};
+exports.prefetchNetworkImage = prefetchNetworkImage;
+const getLayoutImageDimensions = (imageHeight, imageWidth, layout) => {
+    // determine aspect ratio for scaling rendered image
+    const aspectRatio = imageWidth / imageHeight;
+    const isSquare = aspectRatio === 1;
+    const isPortrait = imageHeight > imageWidth;
+    const isLandscape = imageWidth > imageHeight;
+    // an image that has smaller dimensions than the max image dimension (e.g. 10px x 10px)
+    // will be scaled up in size to match the size the message component expects.
+    // While this could lead to pixelated images, it was ultimately a product decision,
+    // ideally the message creator would follow the image guidelines in the pinpoint console
+    const maxImageDimension = inAppMessageImageSizes[layout];
+    let height = undefined;
+    let width = undefined;
+    // set square image dimensions
+    if (isSquare) {
+        height = maxImageDimension;
+        width = maxImageDimension;
+    }
+    // set portrait image dimensions
+    if (isPortrait) {
+        height = maxImageDimension;
+        width = maxImageDimension * aspectRatio;
+    }
+    // set landscape image dimensions
+    if (isLandscape) {
+        height = maxImageDimension / aspectRatio;
+        width = maxImageDimension;
+    }
+    return { height, width };
+};
+exports.getLayoutImageDimensions = getLayoutImageDimensions;

package/lib/InAppMessaging/hooks/useMessageProps/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMessageProps = void 0;
+var useMessageProps_1 = require("./useMessageProps");
+Object.defineProperty(exports, "useMessageProps", { enumerable: true, get: function () { return __importDefault(useMessageProps_1).default; } });

package/lib/InAppMessaging/hooks/useMessageProps/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/InAppMessaging/hooks/useMessageProps/useMessageProps.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const ui_1 = require("@aws-amplify/ui");
+const useMessageImage_1 = require("../useMessageImage");
+const utils_1 = require("./utils");
+/**
+ * Handle common message UI component prop logic including setting of image dimensions,
+ * render booleans, and style resolving
+ *
+ * @param {MessageComponentBaseProps} props - message UI component props
+ * @param {GetDefaultStyle} getDefaultStyle - returns default UI component style
+ *
+ * @returns {UseMessageProps} message UI component render related booleans and styles
+ */
+function useMessageProps(props, getDefaultStyle) {
+    const { image, layout, onDisplay, primaryButton, secondaryButton } = props;
+    const hasDisplayed = (0, react_1.useRef)(false);
+    const { hasRenderableImage, imageDimensions, isImageFetching } = (0, useMessageImage_1.useMessageImage)(image, layout);
+    const shouldRenderMessage = !isImageFetching;
+    (0, react_1.useEffect)(() => {
+        if (!hasDisplayed.current && shouldRenderMessage) {
+            onDisplay?.();
+            hasDisplayed.current = true;
+        }
+    }, [onDisplay, shouldRenderMessage]);
+    const hasPrimaryButton = !(0, ui_1.isEmpty)(primaryButton);
+    const hasSecondaryButton = !(0, ui_1.isEmpty)(secondaryButton);
+    const hasButtons = hasPrimaryButton || hasSecondaryButton;
+    const styles = (0, react_1.useMemo)(() => {
+        // prevent generating style if message rendering is delayed
+        if (!shouldRenderMessage) {
+            return null;
+        }
+        const defaultStyle = getDefaultStyle(imageDimensions);
+        const payloadStyle = (0, utils_1.getPayloadStyle)(props);
+        const overrideStyle = props.style;
+        return (0, utils_1.getMessageStyles)({
+            styleParams: { defaultStyle, payloadStyle, overrideStyle },
+            layout,
+        });
+    }, [getDefaultStyle, layout, imageDimensions, props, shouldRenderMessage]);
+    return {
+        hasButtons,
+        hasPrimaryButton,
+        hasRenderableImage,
+        hasSecondaryButton,
+        shouldRenderMessage,
+        styles,
+    };
+}
+exports.default = useMessageProps;

package/lib/InAppMessaging/hooks/useMessageProps/utils.js

@@ -0,0 +1,201 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMessageStyles = exports.getPayloadStyle = exports.getContainerAndWrapperStyle = exports.shouldFillDeviceScreen = exports.getComponentButtonStyle = void 0;
+const react_native_1 = require("react-native");
+const ui_1 = require("@aws-amplify/ui");
+const primitives_1 = require("../../../primitives");
+const constants_1 = require("../../constants");
+// Carousel page indicator size + margins
+const DEFAULT_CAROUSEL_INDICATOR_PADDING = (primitives_1.DEFAULT_CAROUSEL_INDICATOR_SIZE * 5) / 3;
+/**
+ * Parse and assign appropriate button container and text style from style objects params
+ *
+ * @param {MessageButtonStyleParams} params - message styleParams and button type
+ * @returns {MessageButtonStyleProps} resolved button container and text style arrays
+ */
+const getComponentButtonStyle = ({ styleParams, buttonType, }) => {
+    const { defaultStyle, payloadStyle, overrideStyle } = styleParams;
+    // default component styles defined at the UI component level
+    const { buttonContainer: containerDefaultStyle = {}, buttonText: textDefaultStyle = {}, } = defaultStyle ?? {};
+    // message specific styles in the in-app message payload, overrides default component styles
+    const { backgroundColor, borderRadius, color } = payloadStyle?.[buttonType] ?? {};
+    const containePayloadStyle = {
+        ...(backgroundColor ? { backgroundColor } : null),
+        ...(borderRadius ? { borderRadius } : null),
+    };
+    const textMessageStyle = { ...(color ? { color } : null) };
+    // custom component override styles passed as style prop, overrides all previous styles
+    const { container: containerOverrideStyle = {}, text: textOverrideStyle = {}, } = overrideStyle?.[buttonType] ?? {};
+    return {
+        // the style prop of the React Native Pressable component used in the message UI accepts either a ViewStyle array
+        // or a function receiving a boolean reflecting whether the component is currently pressed, returning a ViewStyle
+        // array. Utilizing the latter, we add an opacity value to the UI message button style during press events
+        container: ({ pressed } = { pressed: false }) => {
+            // default button press interaction opacity
+            const pressedOpacity = pressed ? { opacity: constants_1.BUTTON_PRESSED_OPACITY } : {};
+            // pass `pressed` to containerOverrideStyle and evaluate if the consumer passed a function for custom
+            // button style
+            const containerOverrideFinalStyle = (0, ui_1.isFunction)(containerOverrideStyle)
+                ? containerOverrideStyle({ pressed })
+                : containerOverrideStyle;
+            return [
+                pressedOpacity,
+                containerDefaultStyle,
+                containePayloadStyle,
+                containerOverrideFinalStyle,
+            ];
+        },
+        text: [textDefaultStyle, textMessageStyle, textOverrideStyle],
+    };
+};
+exports.getComponentButtonStyle = getComponentButtonStyle;
+/**
+ * Utility for determining if the provided layout requires filling the entire device screen.
+ *
+ * @param {InAppMessageLayout} layout - message layout
+ * @returns {Boolean} boolean indicating whether entire screen should be filled
+ */
+const shouldFillDeviceScreen = (layout) => {
+    switch (layout) {
+        case 'CAROUSEL':
+        case 'FULL_SCREEN': {
+            return true;
+        }
+        case 'MODAL':
+        case 'TOP_BANNER':
+        case 'MIDDLE_BANNER':
+        case 'BOTTOM_BANNER':
+        default: {
+            return false;
+        }
+    }
+};
+exports.shouldFillDeviceScreen = shouldFillDeviceScreen;
+/**
+ * Parse and assign appropriate message container and wrapper style from style params
+ *
+ * @param {MessageStyleParams} params - message styleParams, layout, and device orientation
+ * @returns {ContainerAndWrapperStyle} resolved containerStyle and wrapperStyle
+ */
+const getContainerAndWrapperStyle = ({ styleParams, layout, }) => {
+    const { defaultStyle, payloadStyle, overrideStyle } = styleParams;
+    const containerDefaultStyle = defaultStyle?.container ?? {};
+    const containerPayloadStyle = payloadStyle?.container ?? {};
+    const containerOverrideStyle = overrideStyle?.container ?? {};
+    const wrapperDefaultStyle = defaultStyle?.wrapper ?? {};
+    if (!(0, exports.shouldFillDeviceScreen)(layout)) {
+        return {
+            wrapper: wrapperDefaultStyle,
+            container: [
+                containerDefaultStyle,
+                containerPayloadStyle,
+                containerOverrideStyle,
+            ],
+        };
+    }
+    // in non-banner and landscape modal layouts container backgroundColor values should be applied as
+    // wrapper style to ensure that the backgroundColor is applied to the entire screen
+    const { backgroundColor: defaultBackgroundColor, ...restContainerDefaultStyle } = containerDefaultStyle;
+    const { backgroundColor: messageBackgroundColor, ...restContainerPayloadStyle } = containerPayloadStyle;
+    // flatten overrideStyle to access override backgroundColor
+    const { backgroundColor: overrideBackgroundColor, ...restContainerOverrideStyle } = react_native_1.StyleSheet.flatten(containerOverrideStyle);
+    // all non-backgroundColor container override style are applied to the container View
+    const container = [
+        restContainerDefaultStyle,
+        restContainerPayloadStyle,
+        restContainerOverrideStyle,
+    ];
+    // use ternaries to prevent passing backgroundColor object with undefined or null value
+    const wrapper = [
+        wrapperDefaultStyle,
+        defaultBackgroundColor ? { backgroundColor: defaultBackgroundColor } : {},
+        messageBackgroundColor ? { backgroundColor: messageBackgroundColor } : {},
+        overrideBackgroundColor ? { backgroundColor: overrideBackgroundColor } : {},
+    ];
+    return { wrapper, container };
+};
+exports.getContainerAndWrapperStyle = getContainerAndWrapperStyle;
+/**
+ * Utility for extracting message payload style
+ *
+ * @param {MessageComponentBaseProps} props - message props
+ * @returns {Object} message payload specific style
+ */
+const getPayloadStyle = ({ body, container, header, primaryButton, secondaryButton, }) => ({
+    body: body?.style ?? {},
+    container: container?.style ?? {},
+    header: header?.style ?? {},
+    primaryButton: primaryButton?.style ?? {},
+    secondaryButton: secondaryButton?.style ?? {},
+});
+exports.getPayloadStyle = getPayloadStyle;
+/**
+ * Receives message styling and returns style property values for use with in-app message
+ * UI components. Handles resolvement style precedence between default, payload, and custom style
+ *
+ * Style param resolve precedence from lowest to highest:
+ *   1. defaultStyle
+ *   2. messageStyle
+ *   3. overrideStyle
+ *
+ * @param {MessageStyleParams} params - message style params, layout, and device orientation
+ * @returns {MessageStyles} message style props
+ */
+function getMessageStyles({ styleParams, layout, }) {
+    // view style applied to the wrapper and primary container views
+    const { wrapper, container } = (0, exports.getContainerAndWrapperStyle)({
+        styleParams,
+        layout,
+    });
+    // primary and secondary button container and text style
+    const primaryButton = (0, exports.getComponentButtonStyle)({
+        styleParams,
+        buttonType: 'primaryButton',
+    });
+    const secondaryButton = (0, exports.getComponentButtonStyle)({
+        styleParams,
+        buttonType: 'secondaryButton',
+    });
+    const { defaultStyle, payloadStyle, overrideStyle } = styleParams;
+    // image style composed of default and override style
+    const image = [defaultStyle?.image, overrideStyle?.image];
+    const iconButton = {
+        // view style applied to icon button
+        container: [defaultStyle?.iconButton, overrideStyle?.closeIconButton],
+        // close icon color, only specified as an overrideStyle
+        iconColor: overrideStyle?.closeIconColor,
+    };
+    // text style applied to message body and header respectively
+    const body = [defaultStyle?.body, payloadStyle?.body, overrideStyle?.body];
+    const header = [
+        defaultStyle?.header,
+        payloadStyle?.header,
+        overrideStyle?.header,
+    ];
+    const { buttonsContainer, contentContainer, imageContainer, textContainer } = defaultStyle ?? {};
+    const styleProps = {
+        body,
+        buttonsContainer,
+        wrapper,
+        contentContainer,
+        container,
+        header,
+        iconButton,
+        image,
+        imageContainer,
+        primaryButton,
+        secondaryButton,
+        textContainer,
+    };
+    if (layout === 'CAROUSEL') {
+        styleProps.container = [
+            styleProps.container,
+            // Add bottom padding for carousel page indicators
+            {
+                paddingBottom: constants_1.SPACING_EXTRA_LARGE + DEFAULT_CAROUSEL_INDICATOR_PADDING,
+            },
+        ];
+    }
+    return styleProps;
+}
+exports.getMessageStyles = getMessageStyles;

package/lib/InAppMessaging/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withInAppMessaging = exports.InAppMessageDisplay = exports.useInAppMessaging = exports.InAppMessagingProvider = void 0;
+var ui_react_core_notifications_1 = require("@aws-amplify/ui-react-core-notifications");
+Object.defineProperty(exports, "InAppMessagingProvider", { enumerable: true, get: function () { return ui_react_core_notifications_1.InAppMessagingProvider; } });
+Object.defineProperty(exports, "useInAppMessaging", { enumerable: true, get: function () { return ui_react_core_notifications_1.useInAppMessaging; } });
+var components_1 = require("./components");
+Object.defineProperty(exports, "InAppMessageDisplay", { enumerable: true, get: function () { return components_1.InAppMessageDisplay; } });
+Object.defineProperty(exports, "withInAppMessaging", { enumerable: true, get: function () { return components_1.withInAppMessaging; } });

package/lib/assets/icons/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const icons = {
+    amazonLogo: require('./amazonLogo.png'),
+    appleLogo: require('./appleLogo.png'),
+    checkboxFilled: require('./checkboxFilled.png'),
+    checkboxOutline: require('./checkboxOutline.png'),
+    close: require('./close.png'),
+    copy: require('./copy.png'),
+    error: require('./error.png'),
+    facebookLogo: require('./facebookLogo.png'),
+    googleLogo: require('./googleLogo.png'),
+    visibilityOn: require('./visibilityOn.png'),
+    visibilityOff: require('./visibilityOff.png'),
+};
+exports.default = icons;

package/lib/assets/icons/index.ts

@@ -0,0 +1,17 @@
+import { ImageSourcePropType } from 'react-native';
+
+const icons = {
+  amazonLogo: require('./amazonLogo.png') as ImageSourcePropType,
+  appleLogo: require('./appleLogo.png') as ImageSourcePropType,
+  checkboxFilled: require('./checkboxFilled.png') as ImageSourcePropType,
+  checkboxOutline: require('./checkboxOutline.png') as ImageSourcePropType,
+  close: require('./close.png') as ImageSourcePropType,
+  copy: require('./copy.png') as ImageSourcePropType,
+  error: require('./error.png') as ImageSourcePropType,
+  facebookLogo: require('./facebookLogo.png') as ImageSourcePropType,
+  googleLogo: require('./googleLogo.png') as ImageSourcePropType,
+  visibilityOn: require('./visibilityOn.png') as ImageSourcePropType,
+  visibilityOff: require('./visibilityOff.png') as ImageSourcePropType,
+};
+
+export default icons;

package/lib/assets/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.icons = void 0;
+var icons_1 = require("./icons");
+Object.defineProperty(exports, "icons", { enumerable: true, get: function () { return __importDefault(icons_1).default; } });

package/lib/hooks/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePressableContainerStyles = exports.useDeviceOrientation = exports.useDeprecationWarning = void 0;
+var useDeprecationWarning_1 = require("./useDeprecationWarning");
+Object.defineProperty(exports, "useDeprecationWarning", { enumerable: true, get: function () { return useDeprecationWarning_1.useDeprecationWarning; } });
+var useDeviceOrientation_1 = require("./useDeviceOrientation");
+Object.defineProperty(exports, "useDeviceOrientation", { enumerable: true, get: function () { return useDeviceOrientation_1.useDeviceOrientation; } });
+var usePressableContainerStyles_1 = require("./usePressableContainerStyles");
+Object.defineProperty(exports, "usePressableContainerStyles", { enumerable: true, get: function () { return usePressableContainerStyles_1.usePressableContainerStyles; } });

package/lib/hooks/useDeprecationWarning/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeprecationWarning = void 0;
+var useDeprecationWarning_1 = require("./useDeprecationWarning");
+Object.defineProperty(exports, "useDeprecationWarning", { enumerable: true, get: function () { return __importDefault(useDeprecationWarning_1).default; } });

package/lib/hooks/useDeprecationWarning/useDeprecationWarning.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ui_react_core_1 = require("@aws-amplify/ui-react-core");
+const utils_1 = require("../../utils");
+/**
+ * Logs a deprecation warning `message` to the console.
+ */
+const useDeprecationWarning = ({ message, shouldWarn: _shouldWarn, }) => {
+    // only log warnings in dev
+    const shouldWarn = _shouldWarn && utils_1.platform.IS_DEV;
+    (0, ui_react_core_1.useDeprecationWarning)({ message, shouldWarn });
+};
+exports.default = useDeprecationWarning;

package/lib/hooks/useDeviceOrientation/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeviceOrientation = void 0;
+var useDeviceOrientation_1 = require("./useDeviceOrientation");
+Object.defineProperty(exports, "useDeviceOrientation", { enumerable: true, get: function () { return __importDefault(useDeviceOrientation_1).default; } });

package/lib/hooks/useDeviceOrientation/useDeviceOrientation.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const ui_1 = require("@aws-amplify/ui");
+const getDeviceOrientation = () => {
+    const { height, width } = react_native_1.Dimensions.get('screen');
+    return height >= width ? 'portrait' : 'landscape';
+};
+function useDeviceOrientation() {
+    const [deviceOrientation, setDeviceOrientation] = (0, react_1.useState)(getDeviceOrientation);
+    const isLandscapeMode = deviceOrientation === 'landscape';
+    const isPortraitMode = deviceOrientation === 'portrait';
+    (0, react_1.useEffect)(() => {
+        const handler = () => {
+            setDeviceOrientation(getDeviceOrientation);
+        };
+        // The below cast and conditional unsubscribe handling is due to subscription removal variation
+        // between `Dimensions.addEventListener` in React Native prior to and after v0.65.
+        //
+        // Beginning with v0.65, `Dimensions.addEventListener` returns an `EventSubscription` object,
+        // which includes a `remove` method for removing the subscription. Prior versions return
+        // `undefined`, and subscription removal is handled by `Dimensions.removeEventListener`,
+        // which is deprecated in v0.65
+        const subscription = react_native_1.Dimensions.addEventListener('change', handler);
+        return () => {
+            if ((0, ui_1.isFunction)(subscription?.remove)) {
+                subscription.remove();
+            }
+            else {
+                react_native_1.Dimensions.removeEventListener('change', handler);
+            }
+        };
+    }, []);
+    return { deviceOrientation, isLandscapeMode, isPortraitMode };
+}
+exports.default = useDeviceOrientation;

package/lib/hooks/usePressableContainerStyles/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePressableContainerStyles = void 0;
+var usePressableContainerStyles_1 = require("./usePressableContainerStyles");
+Object.defineProperty(exports, "usePressableContainerStyles", { enumerable: true, get: function () { return usePressableContainerStyles_1.usePressableContainerStyles; } });

package/lib/hooks/usePressableContainerStyles/usePressableContainerStyles.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePressableContainerStyles = void 0;
+const react_1 = require("react");
+const ui_1 = require("@aws-amplify/ui");
+const usePressableContainerStyles = ({ overrideStyle, containerStyle, pressedStyle, }) => {
+    return (0, react_1.useCallback)(({ pressed }) => {
+        const pressedOverrideStyle = (0, ui_1.isFunction)(overrideStyle)
+            ? overrideStyle({ pressed })
+            : overrideStyle;
+        return [
+            containerStyle,
+            pressed ? pressedStyle : undefined,
+            // include last to override other styles
+            pressedOverrideStyle,
+        ];
+    }, [containerStyle, overrideStyle, pressedStyle]);
+};
+exports.usePressableContainerStyles = usePressableContainerStyles;

package/lib/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = exports.defaultTheme = exports.defaultDarkModeOverride = exports.ThemeProvider = exports.withAuthenticator = exports.useAuthenticator = exports.Authenticator = void 0;
+const tslib_1 = require("tslib");
+var Authenticator_1 = require("./Authenticator");
+Object.defineProperty(exports, "Authenticator", { enumerable: true, get: function () { return Authenticator_1.Authenticator; } });
+Object.defineProperty(exports, "useAuthenticator", { enumerable: true, get: function () { return Authenticator_1.useAuthenticator; } });
+Object.defineProperty(exports, "withAuthenticator", { enumerable: true, get: function () { return Authenticator_1.withAuthenticator; } });
+tslib_1.__exportStar(require("./InAppMessaging"), exports);
+var theme_1 = require("./theme");
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return theme_1.ThemeProvider; } });
+Object.defineProperty(exports, "defaultDarkModeOverride", { enumerable: true, get: function () { return theme_1.defaultDarkModeOverride; } });
+Object.defineProperty(exports, "defaultTheme", { enumerable: true, get: function () { return theme_1.defaultTheme; } });
+Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return theme_1.useTheme; } });

package/lib/primitives/Button/Button.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const ui_1 = require("@aws-amplify/ui");
+const hooks_1 = require("../../hooks");
+const theme_1 = require("../../theme");
+const styles_1 = require("./styles");
+function Button({ accessibilityRole = 'button', children, disabled, style, textStyle, variant = 'default', ...rest }) {
+    const theme = (0, theme_1.useTheme)();
+    const themedStyle = (0, styles_1.getThemedStyles)(theme);
+    const containerStyle = (0, react_1.useMemo)(() => ({
+        ...themedStyle.container,
+        ...themedStyle[`container${(0, ui_1.capitalize)(variant)}`],
+        ...(disabled && themedStyle.disabled),
+    }), [disabled, themedStyle, variant]);
+    const pressableStyle = (0, hooks_1.usePressableContainerStyles)({
+        overrideStyle: style,
+        containerStyle,
+        pressedStyle: themedStyle.pressed,
+    });
+    const buttonTextStyle = (0, react_1.useMemo)(() => ({
+        ...themedStyle.text,
+        ...themedStyle[`text${(0, ui_1.capitalize)(variant)}`],
+    }), [themedStyle, variant]);
+    return (<react_native_1.Pressable {...rest} accessibilityRole={accessibilityRole} disabled={disabled} style={pressableStyle}>
+      {typeof children === 'string' ? (<react_native_1.Text style={[buttonTextStyle, textStyle]}>{children}</react_native_1.Text>) : (children)}
+    </react_native_1.Pressable>);
+}
+exports.default = Button;

package/lib/primitives/Button/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+var Button_1 = require("./Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });