@react-native-ama/core 1.2.1 → 2.0.0-beta.0

package/dist/internals/checks/checkImageAlt.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkImageAlt = void 0;
+const checkImageAlt = (node) => {
+    if (node.type !== 'Image') {
+        return null;
+    }
+    if (node.isAccessible === false) {
+        return null;
+    }
+    const { ariaLabel } = node;
+    if (!(ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim())) {
+        return {
+            rule: 'IMAGE_MISSING_ALT_TEXT',
+            viewId: node.viewId,
+        };
+    }
+    return null;
+};
+exports.checkImageAlt = checkImageAlt;

package/dist/internals/checks/checkIsUppercase.d.ts

@@ -0,0 +1,8 @@
+import { AmaNode } from '../../ReactNativeAma.types';
+import { AmaError, AmaRule } from '../types';
+export type UppercaseStringChecker = {
+    node: AmaNode;
+    canBeEmpty?: boolean;
+    rule?: AmaRule;
+};
+export declare const checkIsUppercase: ({ node, canBeEmpty, rule, }: UppercaseStringChecker) => AmaError | null;

package/dist/internals/checks/checkIsUppercase.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkIsUppercase = void 0;
+const isA11yLabelAllowed_1 = require("../utils/isA11yLabelAllowed");
+const checkIsUppercase = ({ node, canBeEmpty = true, rule = 'NO_UPPERCASE_TEXT', }) => {
+    var _a, _b;
+    const text = (_a = node.ariaLabel) !== null && _a !== void 0 ? _a : node.content;
+    const isEmpty = !text || ((_b = text === null || text === void 0 ? void 0 : text.trim()) === null || _b === void 0 ? void 0 : _b.length) === 0;
+    if ((isEmpty && canBeEmpty) || !node.isAccessible) {
+        return null;
+    }
+    const isAllowed = isA11yLabelAllowed_1.isAccessibilityLabelAllowed === null || isA11yLabelAllowed_1.isAccessibilityLabelAllowed === void 0 ? void 0 : (0, isA11yLabelAllowed_1.isAccessibilityLabelAllowed)(text);
+    if (!isAllowed && isUpperCase(text)) {
+        return {
+            rule,
+            label: node.ariaLabel,
+            viewId: node.viewId,
+        };
+    }
+    return null;
+};
+exports.checkIsUppercase = checkIsUppercase;
+const NO_LETTERS = /[^\p{L}]/gu;
+const isUpperCase = (string) => {
+    const cleanString = string.replace(NO_LETTERS, '');
+    if (cleanString.trim().length === 0) {
+        return false;
+    }
+    return cleanString.toUpperCase() === cleanString;
+};

package/dist/internals/checks/checkLongNumber.d.ts

@@ -0,0 +1,3 @@
+import { AmaNode } from '../../ReactNativeAma.types';
+import { AmaError } from '../types';
+export declare const checkLongNumber: (node: AmaNode) => AmaError | null;

package/dist/internals/checks/checkLongNumber.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkLongNumber = void 0;
+const config_1 = __importDefault(require("../config"));
+const checkLongNumber = (node) => {
+    var _a;
+    const text = (_a = node.ariaLabel) !== null && _a !== void 0 ? _a : node.content;
+    if (!text || !node.isAccessible) {
+        return null;
+    }
+    const hasFailed = getLongestDigitRun(text) >= config_1.default.longNumberMinLength;
+    if (hasFailed) {
+        return {
+            rule: 'LONG_NUMBER_NOT_FORMATTED',
+            label: node.ariaLabel,
+            viewId: node.viewId,
+        };
+    }
+    return null;
+};
+exports.checkLongNumber = checkLongNumber;
+const getLongestDigitRun = (text) => {
+    const digitRuns = text.match(/\d+/g);
+    if (!digitRuns) {
+        return 0;
+    }
+    return Math.max(...digitRuns.map((run) => run.length));
+};

package/dist/internals/checks/checkMinimumSize.d.ts

@@ -0,0 +1,3 @@
+import { AmaNode } from '../../ReactNativeAma.types';
+import { AmaError } from '../types';
+export declare const checkMinimumSize: (node: AmaNode) => AmaError | null;

package/dist/internals/checks/checkMinimumSize.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkMinimumSize = void 0;
+const minimumTouchableSize_1 = require("../utils/minimumTouchableSize");
+const checkMinimumSize = (node) => {
+    var _a, _b;
+    const width = Math.ceil((_a = node.bounds) === null || _a === void 0 ? void 0 : _a[0]);
+    const height = Math.ceil((_b = node.bounds) === null || _b === void 0 ? void 0 : _b[1]);
+    if (node.type !== 'Pressable') {
+        return null;
+    }
+    if (width < minimumTouchableSize_1.MINIMUM_TOUCHABLE_SIZE || height < minimumTouchableSize_1.MINIMUM_TOUCHABLE_SIZE) {
+        return {
+            label: node.ariaLabel,
+            viewId: node.viewId,
+            rule: 'MINIMUM_SIZE',
+            extra: `The touchable area must have a minimum size of ${minimumTouchableSize_1.MINIMUM_TOUCHABLE_SIZE}x${minimumTouchableSize_1.MINIMUM_TOUCHABLE_SIZE} found instead: ${width.toFixed(0)}x${height.toFixed(0)}`,
+        };
+    }
+    return null;
+};
+exports.checkMinimumSize = checkMinimumSize;

package/dist/internals/checks/checkTextInput.d.ts

@@ -0,0 +1,3 @@
+import { AmaNode } from '../../ReactNativeAma.types';
+import { AmaError } from '../types';
+export declare const checkTextInputs: (nodesToCheck: AmaNode[]) => AmaError[];

package/dist/internals/checks/checkTextInput.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkTextInputs = void 0;
+const react_native_1 = require("react-native");
+const isRuleDisabled_1 = require("../utils/isRuleDisabled");
+const RETURN_DONE = react_native_1.Platform.select({ ios: 0, default: 6 });
+const REMOVE_ENDING_REGEXT = /\W$/;
+const removeEndingSymbol = (text) => {
+    if (!text) {
+        return null;
+    }
+    const result = text.replace(REMOVE_ENDING_REGEXT, '').trim().toLowerCase();
+    return result;
+};
+const checkTextInputs = (nodesToCheck) => {
+    const inputs = nodesToCheck.filter((node) => node.type === 'TextInput');
+    const errors = [];
+    for (const key in inputs) {
+        const index = parseInt(key, 10);
+        const inputText = inputs[key];
+        const canHaveReturnTypeDone = index === inputs.length - 1;
+        const ariaLabel = removeEndingSymbol(inputText.ariaLabel);
+        const textInputLabel = ariaLabel
+            ? nodesToCheck.find(
+            // Ignores symbols like ":"
+            (node) => node.type === 'Text' && removeEndingSymbol(node.content) === ariaLabel)
+            : false;
+        const isLabelAlsoAccessible = textInputLabel && (textInputLabel === null || textInputLabel === void 0 ? void 0 : textInputLabel.isAccessible);
+        const hasLabel = Boolean(textInputLabel);
+        if (inputText.returnType === RETURN_DONE && !canHaveReturnTypeDone) {
+            errors.push({
+                rule: 'INPUT_INVALID_RETURN_KEY',
+                viewId: inputText.viewId,
+            });
+        }
+        if (isLabelAlsoAccessible) {
+            errors.push({
+                rule: 'INPUT_HAS_FOCUSABLE_LABEL',
+                viewId: textInputLabel.viewId,
+            });
+        }
+        if (ariaLabel && !hasLabel) {
+            errors.push({
+                rule: 'INPUT_HAS_NO_VISIBLE_LABEL',
+                viewId: inputText.viewId,
+            });
+        }
+    }
+    return errors.filter((item) => !(isRuleDisabled_1.isRuleDisabled === null || isRuleDisabled_1.isRuleDisabled === void 0 ? void 0 : (0, isRuleDisabled_1.isRuleDisabled)(item)));
+};
+exports.checkTextInputs = checkTextInputs;

package/dist/internals/checks/performChecks.d.ts

@@ -0,0 +1,3 @@
+import { AmaNode } from '../../ReactNativeAma.types';
+import { AmaError } from '../types';
+export declare const performChecks: (node: AmaNode) => AmaError[];

package/dist/internals/checks/performChecks.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.performChecks = void 0;
+const isRuleDisabled_1 = require("../utils/isRuleDisabled");
+const checkAriaLabel_1 = require("./checkAriaLabel");
+const checkAriaRole_1 = require("./checkAriaRole");
+const checkContrast_1 = require("./checkContrast");
+const checkImageAlt_1 = require("./checkImageAlt");
+const checkIsUppercase_1 = require("./checkIsUppercase");
+const checkLongNumber_1 = require("./checkLongNumber");
+const checkMinimumSize_1 = require("./checkMinimumSize");
+const performChecks = (node) => {
+    return [
+        (0, checkAriaLabel_1.checkAriaLabel)(node),
+        (0, checkAriaRole_1.checkAriaRole)(node),
+        (0, checkImageAlt_1.checkImageAlt)(node),
+        (0, checkMinimumSize_1.checkMinimumSize)(node),
+        (0, checkIsUppercase_1.checkIsUppercase)({ node }),
+        (0, checkContrast_1.checkContrast)(node),
+        (0, checkLongNumber_1.checkLongNumber)(node),
+    ].filter((item) => item !== null && !(isRuleDisabled_1.isRuleDisabled === null || isRuleDisabled_1.isRuleDisabled === void 0 ? void 0 : (0, isRuleDisabled_1.isRuleDisabled)(item)));
+};
+exports.performChecks = performChecks;

package/dist/internals/components/AMAErrorOverlay.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { AmaError } from '../types';
+export declare const AMAErrorOverlay: (({ issues }: {
+    issues?: AmaError[] | undefined;
+}) => React.JSX.Element | null) | null;

package/dist/internals/components/AMAErrorOverlay.js

@@ -0,0 +1,334 @@
+"use strict";
+/* eslint-disable react-native/no-inline-styles */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AMAErrorOverlay = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const amaClearHighlight_1 = require("../utils/amaClearHighlight");
+const amaHighlightComponent_1 = require("../utils/amaHighlightComponent");
+const getRuleErrorInfo_1 = require("../utils/getRuleErrorInfo");
+const logError_1 = require("../utils/logError");
+const rules_1 = require("../utils/rules");
+const AMARuleError_1 = require("./AMARuleError");
+const WINDOW_WIDTH = react_native_1.Dimensions.get('window').width;
+const WINDOW_HEIGHT = react_native_1.Dimensions.get('screen').height;
+const AMAErrorComponent = ({ issues }) => {
+    const [activeIssueIndex, setActiveIssueIndex] = (0, react_1.useState)();
+    const issueToView = (0, react_1.useRef)(null);
+    const previousViewId = (0, react_1.useRef)(null);
+    const clearPreviousHighlight = () => {
+        var _a;
+        if (!previousViewId.current) {
+            return;
+        }
+        amaClearHighlight_1.amaClearHighlight === null || amaClearHighlight_1.amaClearHighlight === void 0 ? void 0 : (0, amaClearHighlight_1.amaClearHighlight)(previousViewId.current);
+        // Get all issues for the previous viewId to restore correct count and color
+        const issuesForPreviousView = (_a = issues === null || issues === void 0 ? void 0 : issues.filter((issue) => { var _a; return issue.viewId === ((_a = previousViewId.current) === null || _a === void 0 ? void 0 : _a.viewId); })) !== null && _a !== void 0 ? _a : [];
+        if (issuesForPreviousView.length > 0) {
+            amaHighlightComponent_1.amaHighlightComponent === null || amaHighlightComponent_1.amaHighlightComponent === void 0 ? void 0 : (0, amaHighlightComponent_1.amaHighlightComponent)(issuesForPreviousView);
+        }
+    };
+    const setActiveIssue = (newIndex) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        clearPreviousHighlight();
+        issueToView.current = issues[newIndex];
+        if (issueToView.current) {
+            // Get all issues for the current viewId
+            const issuesForView = (_a = issues === null || issues === void 0 ? void 0 : issues.filter((issue) => { var _a; return issue.viewId === ((_a = issueToView.current) === null || _a === void 0 ? void 0 : _a.viewId); })) !== null && _a !== void 0 ? _a : [];
+            const position = yield (amaHighlightComponent_1.amaHighlightComponent === null || amaHighlightComponent_1.amaHighlightComponent === void 0 ? void 0 : (0, amaHighlightComponent_1.amaHighlightComponent)(issuesForView, 'both'));
+            setActiveIssueIndex({ id: newIndex, position: position !== null && position !== void 0 ? position : undefined });
+            previousViewId.current = issueToView.current;
+        }
+        else {
+            setActiveIssueIndex(undefined);
+            previousViewId.current = null;
+        }
+    });
+    const showNextIssue = () => {
+        setActiveIssue((activeIssueIndex === null || activeIssueIndex === void 0 ? void 0 : activeIssueIndex.id) != null ? activeIssueIndex.id + 1 : 0);
+    };
+    const showPrevIssue = () => {
+        setActiveIssue((activeIssueIndex === null || activeIssueIndex === void 0 ? void 0 : activeIssueIndex.id) && (activeIssueIndex === null || activeIssueIndex === void 0 ? void 0 : activeIssueIndex.id) > 0
+            ? (activeIssueIndex === null || activeIssueIndex === void 0 ? void 0 : activeIssueIndex.id) - 1
+            : 0);
+    };
+    const closeIssues = () => {
+        clearPreviousHighlight();
+        setActiveIssueIndex(undefined);
+    };
+    const showFirstError = () => {
+        showNextIssue();
+    };
+    if (!(issues === null || issues === void 0 ? void 0 : issues.length)) {
+        return null;
+    }
+    const showActiveIssue = activeIssueIndex !== undefined && issueToView.current;
+    const failedBarBottom = getFailedBarBottomOffset();
+    return (<>
+      {showActiveIssue ? (<AMAOverlay issue={issueToView.current} position={activeIssueIndex.position} closeOverlay={closeIssues} onPrevIssue={showPrevIssue} onNextIssue={showNextIssue} onClose={closeIssues} totalIssues={issues.length} issueIndex={activeIssueIndex.id}/>) : null}
+      <react_native_1.View style={[styles.failedBar, { bottom: failedBarBottom }]} accessible={false} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+        <AMAButton onPress={showFirstError} bg="transparent" color="#fff">
+          <react_native_1.Text style={styles.buttonText}>
+            <react_native_1.Text style={{ color: 'yellow' }}>
+              ⚠️ AMA: {issues.length} issue{issues.length !== 1 ? 's' : ''}{' '}
+              detected
+            </react_native_1.Text>
+            <react_native_1.Text style={{ color: '#fafafa' }}>{' ┆ '}</react_native_1.Text>
+            <react_native_1.Text style={{ fontWeight: 'bold' }}>Inspect ›</react_native_1.Text>
+          </react_native_1.Text>
+        </AMAButton>
+      </react_native_1.View>
+    </>);
+};
+const AMAButton = ({ children, count, singular, bg, onPress, line, disabled, }) => {
+    const plural = count ? `${singular}${count !== 1 ? 's' : ''} ` : singular;
+    return (<react_native_1.Pressable onPress={disabled ? undefined : onPress} style={({ pressed }) => {
+            const opacity = pressed || disabled ? 0.8 : 1;
+            const divider = line
+                ? {
+                    borderRightWidth: 1,
+                    borderRightColor: line,
+                }
+                : {};
+            return Object.assign(Object.assign(Object.assign({}, styles.button), divider), { backgroundColor: bg, opacity });
+        }} role="button" aria-label={`Show ${plural}`} aria-disabled={disabled} importantForAccessibility="no" accessibilityElementsHidden>
+      {children}
+    </react_native_1.Pressable>);
+};
+const AMAOverlay = ({ issue, position, closeOverlay, onNextIssue, onPrevIssue, onClose, totalIssues, issueIndex, }) => {
+    position = position || [24, 100, WINDOW_WIDTH - 48, 0];
+    const { severity, url } = getRuleErrorInfo_1.getAMARuleErrorInfo(issue);
+    const [x, y, width, height] = position;
+    const isMoreThanHalfScreen = y / WINDOW_HEIGHT > 0.57;
+    const maxHeight = isMoreThanHalfScreen
+        ? WINDOW_HEIGHT * 0.43
+        : WINDOW_HEIGHT - y - 160;
+    const yPosition = isMoreThanHalfScreen
+        ? undefined
+        : y + height + POINTER_SIZE + SPACER;
+    const bottomPosition = isMoreThanHalfScreen
+        ? WINDOW_HEIGHT - y + SPACER + POINTER_SIZE
+        : undefined;
+    const openHelp = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            yield react_native_1.Share.share({
+                message: url,
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+    });
+    (0, react_1.useEffect)(() => {
+        logError_1.logError === null || logError_1.logError === void 0 ? void 0 : (0, logError_1.logError)(issue);
+    }, [issue]);
+    return (<>
+      <react_native_1.Pressable style={styles.transparentOverlay} onPress={closeOverlay} accessible={false} importantForAccessibility="no"/>
+      <react_native_1.View style={[
+            styles === null || styles === void 0 ? void 0 : styles.callout,
+            {
+                top: yPosition,
+                bottom: bottomPosition,
+                borderColor: rules_1.AMA_COLORS[severity],
+            },
+        ]}>
+        <react_native_1.Text style={styles.totalIssues}>
+          {issueIndex + 1} / {totalIssues}
+        </react_native_1.Text>
+        {AMARuleError_1.AMARuleError ? (<AMARuleError_1.AMARuleError issue={issue} onClose={onClose} maxHeight={maxHeight}/>) : null}
+
+        <react_native_1.View style={styles.actions}>
+          <react_native_1.Pressable onPress={onPrevIssue} role="button" hitSlop={{ left: 12, top: 12, bottom: 12, right: 12 }} style={[styles.action, styles.previous]} accessible={false} importantForAccessibility="no">
+            <react_native_1.Text>‹ Prev</react_native_1.Text>
+          </react_native_1.Pressable>
+          <react_native_1.Pressable onPress={openHelp} role="button" hitSlop={{ left: 12, top: 12, bottom: 12, right: 12 }} style={[styles.action, styles.learnMore]} accessible={false} importantForAccessibility="no">
+            <react_native_1.Text style={styles.link}>Learn more</react_native_1.Text>
+          </react_native_1.Pressable>
+
+          <react_native_1.Pressable onPress={onNextIssue} role="button" hitSlop={{ left: 12, top: 12, bottom: 12, right: 12 }} style={[styles.action, styles.next]} accessible={false} importantForAccessibility="no">
+            <react_native_1.Text style={{ textAlign: 'right' }}>Next ›</react_native_1.Text>
+          </react_native_1.Pressable>
+        </react_native_1.View>
+      </react_native_1.View>
+      <react_native_1.View style={[
+            styles.triangle,
+            {
+                left: x + width / 2 - POINTER_SIZE,
+            },
+            isMoreThanHalfScreen
+                ? {
+                    top: y - POINTER_SIZE - SPACER,
+                    borderTopWidth: POINTER_SIZE,
+                    borderTopColor: rules_1.AMA_COLORS[severity],
+                    borderBottomWidth: 0,
+                }
+                : {
+                    top: y + height + SPACER,
+                    borderBottomColor: rules_1.AMA_COLORS[severity],
+                },
+        ]}/>
+    </>);
+};
+exports.AMAErrorOverlay = __DEV__ ? AMAErrorComponent : null;
+const SPACER = 4;
+const POINTER_SIZE = 8;
+const Z_INDEX = 9999;
+const getFailedBarBottomOffset = () => {
+    if (react_native_1.Platform.OS !== 'android') {
+        return 40;
+    }
+    return 60;
+};
+const styles = __DEV__
+    ? react_native_1.StyleSheet.create({
+        callout: {
+            position: 'absolute',
+            left: 24,
+            right: 24,
+            backgroundColor: '#fff',
+            padding: 0,
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: Z_INDEX + 1,
+            shadowOffset: {
+                width: 10,
+                height: -10,
+            },
+            boxShadow: '0px 2px 20px #000',
+            shadowOpacity: 0.2,
+            shadowRadius: 24,
+            elevation: 4,
+            borderTopWidth: 2,
+            overflow: 'hidden',
+        },
+        calloutText: {
+            color: '#000',
+            fontSize: 14,
+            marginBottom: 12,
+        },
+        failedBar: {
+            backgroundColor: '#A31420',
+            alignSelf: 'center',
+            flexDirection: 'row',
+            alignItems: 'center',
+            shadowOffset: {
+                width: 10,
+                height: 10,
+            },
+            boxShadow: '0px 2px 6px #000',
+            shadowOpacity: 0.05,
+            shadowRadius: 12,
+            zIndex: Z_INDEX,
+            borderRadius: 20,
+            maxWidth: '90%',
+        },
+        button: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            flex: 1,
+            padding: 12,
+        },
+        buttonText: {
+            flex: 1,
+            fontSize: 16,
+            lineHeight: 24,
+            textAlign: 'center',
+            color: '#fff',
+        },
+        transparentOverlay: {
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: Z_INDEX - 1,
+            backgroundColor: 'transparent',
+        },
+        actions: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            flex: 1,
+            alignItems: 'center',
+            alignContent: 'center',
+        },
+        action: {
+            paddingVertical: 8,
+            marginBottom: 12,
+            width: '27%',
+            borderWidth: 1,
+        },
+        previous: {
+            borderLeftWidth: 0,
+            borderTopEndRadius: 18,
+            borderBottomEndRadius: 18,
+            paddingRight: 12,
+            paddingLeft: 12,
+        },
+        next: {
+            borderRightWidth: 0,
+            borderTopLeftRadius: 18,
+            borderBottomLeftRadius: 18,
+            paddingRight: 12,
+            paddingLeft: 12,
+        },
+        learnMore: {
+            flex: 1,
+            alignItems: 'center',
+            borderRadius: 24,
+            borderWidth: 1,
+            marginHorizontal: 24,
+            paddingVertical: 8,
+            backgroundColor: '#07549C',
+            borderColor: '#07549C',
+        },
+        link: {
+            color: '#fff',
+        },
+        totalIssues: {
+            marginTop: 8,
+        },
+        triangle: {
+            position: 'absolute',
+            width: 0,
+            height: 0,
+            borderLeftWidth: POINTER_SIZE,
+            borderRightWidth: POINTER_SIZE,
+            borderBottomWidth: POINTER_SIZE,
+            borderLeftColor: 'transparent',
+            borderRightColor: 'transparent',
+            zIndex: Z_INDEX + 10,
+        },
+    })
+    : null;

package/dist/internals/components/AMARuleError.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { AmaError } from '../types';
+export declare const AMARuleError: (({ issue, maxHeight, onClose, }: {
+    issue: AmaError;
+    onClose: () => void;
+    maxHeight: number;
+}) => React.JSX.Element) | null;