@ovotech/element-native 5.5.0 → 5.6.0

package/dist/components/SelectField/styled.js

@@ -0,0 +1,118 @@
+"use strict";
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledCategory = exports.StyledP = exports.RadioDot = exports.Radio = exports.SelectOption = exports.DropdownContainer = exports.DropdownWrapper = exports.SelectInput = void 0;
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const styled_native_1 = __importStar(require("../../styled.native"));
+const theme_1 = require("../../theme");
+const utils_1 = require("../../utils");
+const P_1 = require("../P");
+exports.SelectInput = styled_native_1.default.TouchableOpacity(({ theme, hasError, isSelected, size }) => {
+    const isSmall = size === 'small';
+    let borderColor = 'transparent';
+    /* prioritise error and selected states for border, even when focused */
+    if (hasError) {
+        borderColor = theme.color.alert.error;
+    }
+    else if (isSelected) {
+        borderColor = theme.color.surface.onSurface;
+    }
+    return (0, styled_native_1.css) `
+    flex-direction: row;
+    align-items: center;
+    background-color: ${theme.color.surface.bright};
+    border-color: ${borderColor};
+    border-width: ${(0, theme_1.numToPx)(theme.border.width.md)};
+    border-radius: ${(0, theme_1.numToPx)(theme.border.radius.md)};
+    padding-top: ${(0, theme_1.numToPx)(theme.space[isSmall ? 200 : 400])};
+    padding-bottom: ${(0, theme_1.numToPx)(theme.space[isSmall ? 200 : 400])};
+    padding-left: ${(0, theme_1.numToPx)(theme.space[400])};
+    padding-right: ${(0, theme_1.numToPx)(theme.space[400])};
+    min-height: ${(0, theme_1.numToPx)(theme.space[isSmall ? 1100 : 1600])};
+    ${(0, utils_1.getShadowCSS)({ theme })}
+  `;
+});
+exports.DropdownWrapper = styled_native_1.default.TouchableOpacity(({ theme }) => (0, styled_native_1.css) `
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+
+    /* 80 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */
+    background-color: ${theme.color.brand.dark}80;
+  `);
+exports.DropdownContainer = (0, styled_native_1.default)(react_native_safe_area_context_1.SafeAreaView)(({ theme }) => (0, styled_native_1.css) `
+    width: 95%;
+    max-height: 70%;
+    border-radius: ${(0, theme_1.numToPx)(theme.border.radius.md)};
+    background-color: ${theme.color.surface.bright};
+  `);
+exports.SelectOption = styled_native_1.default.TouchableOpacity(({ theme, isLastOption }) => (0, styled_native_1.css) `
+    flex-direction: row;
+    align-items: center;
+    border-bottom-color: ${theme.color.input.borderDim};
+    border-bottom-width: ${isLastOption ? 0 : 1}px;
+    padding: 0 ${(0, theme_1.numToPx)(theme.space[400])};
+  `);
+exports.Radio = styled_native_1.default.View(({ theme, isChecked }) => (0, styled_native_1.css) `
+    background-color: ${isChecked
+    ? theme.input.color.selectedTint
+    : 'transparent'};
+    width: ${(0, theme_1.numToPx)(theme.space[600])};
+    height: ${(0, theme_1.numToPx)(theme.space[600])};
+    margin-left: auto;
+    border-radius: ${(0, theme_1.numToPx)(theme.space[600])};
+    border-width: ${(0, theme_1.numToPx)(theme.border.width.md)};
+    border-color: ${theme.input.color[isChecked ? 'selected' : 'border']};
+  `);
+exports.RadioDot = styled_native_1.default.View(({ theme, isChecked }) => (0, styled_native_1.css) `
+    background-color: ${theme.input.color.selected};
+    position: absolute;
+    top: ${(0, theme_1.numToPx)(theme.space[100])};
+    width: ${(0, theme_1.numToPx)(theme.space[300])};
+    height: ${(0, theme_1.numToPx)(theme.space[300])};
+    border-radius: ${(0, theme_1.numToPx)(theme.space[300])};
+    align-self: center;
+    opacity: ${isChecked ? 1 : 0};
+  `);
+exports.StyledP = (0, styled_native_1.default)(P_1.P)(({ theme }) => (0, styled_native_1.css) `
+    margin-top: ${(0, theme_1.numToPx)(theme.space[300])};
+    margin-bottom: ${(0, theme_1.numToPx)(theme.space[300])};
+  `);
+exports.StyledCategory = (0, styled_native_1.default)(P_1.P)(({ theme }) => (0, styled_native_1.css) `
+    font-size: ${(0, theme_1.numToPx)(theme.font.size.xs.mediaQuery.lg)};
+    color: ${theme.color.surface.onSurface};
+    background-color: ${theme.color.surface.surface};
+    padding: ${(0, theme_1.numToPx)(theme.space[100])} ${(0, theme_1.numToPx)(theme.space[400])};
+  `);

package/dist/components/SkeletonText/SkeletonText.js

@@ -21,10 +21,10 @@ const hooks_1 = require("../../hooks");
 const styled_native_1 = __importDefault(require("../../styled.native"));
 const P_1 = require("../P");
 const SkeletonAnimation_1 = require("../SkeletonAnimation");
-const StyledSkeletonText = styled_native_1.default.View(({ theme, aboveSmallBreakpoint, short, size, lines = 1 }) => {
+const StyledSkeletonText = styled_native_1.default.View(({ theme, aboveSmallBreakpoint, short, size, isLast }) => {
     return `
     background-color: ${theme.color.surface.dim};
-    margin-bottom: ${lines > 1 ? (0, element_core_1.numToPx)(theme.space[200]) : 0};
+    margin-bottom: ${isLast ? 0 : (0, element_core_1.numToPx)(theme.space[200])};
     border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.sm)};
     height: ${aboveSmallBreakpoint
         ? (0, element_core_1.numToPx)(theme.font.size.md.mediaQuery.lg)
@@ -37,9 +37,9 @@ const SkeletonText = (_a) => {
     var { lines = 1, size } = _a, rest = __rest(_a, ["lines", "size"]);
     const generatedLines = [];
     const { smallAndUp } = (0, hooks_1.useBreakpoint)();
-    const hasMultipleLines = lines > 1;
     for (let i = 1; i <= lines; i++) {
-        generatedLines.push((0, jsx_runtime_1.jsx)(StyledSkeletonText, { short: hasMultipleLines && i === lines, aboveSmallBreakpoint: smallAndUp, size: size }, `line-${i}`));
+        const isLast = i === lines;
+        generatedLines.push((0, jsx_runtime_1.jsx)(StyledSkeletonText, { short: lines > 1 && isLast, aboveSmallBreakpoint: smallAndUp, size: size, isLast: isLast }, `line-${i}`));
     }
     return (
     // @ts-ignore styled components stuff

package/dist/components/Strong/Strong.d.ts

@@ -37,6 +37,7 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -79,6 +80,7 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -87,6 +89,7 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

package/dist/components/SubLabelText/SubLabelText.d.ts

@@ -42,6 +42,7 @@ declare const SubLabelText: (props: Omit<{
                 "30": string;
                 "40": string;
                 "50": string;
+                "55": string;
                 "56": string;
                 "60": string;
                 "70": string;
@@ -84,6 +85,7 @@ declare const SubLabelText: (props: Omit<{
                 onBrandVariant: string;
                 aiGradientFrom: string;
                 aiGradientTo: string;
+                accessible: string;
                 fixed: {
                     brand: string;
                     dark: string;
@@ -92,6 +94,7 @@ declare const SubLabelText: (props: Omit<{
                     bright: string;
                     onBrand: string;
                     onBrandVariant: string;
+                    accessible: string;
                 };
             };
             outline: {

package/dist/components/Tabs/Tab.d.ts

@@ -46,6 +46,7 @@ declare const TabTouchable: import("styled-components").StyledComponent<typeof i
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -88,6 +89,7 @@ declare const TabTouchable: import("styled-components").StyledComponent<typeof i
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -96,6 +98,7 @@ declare const TabTouchable: import("styled-components").StyledComponent<typeof i
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

package/dist/components/TextareaInput/TextareaInput.js

@@ -47,15 +47,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextareaInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const element_core_1 = require("@ovotech/element-core");
+const hooks_1 = require("../../hooks");
 const styled_native_1 = __importStar(require("../../styled.native"));
 const Input_1 = require("../Input/Input");
-const StyledInput = (0, styled_native_1.default)(Input_1.Input)(({ theme, rows }) => (0, styled_native_1.css) `
-    padding: ${(0, element_core_1.numToPx)(theme.space[200])};
-    padding-top: ${(0, element_core_1.numToPx)(theme.space[300])};
-    height: ${theme.space[800] * rows}px;
-  `);
+const StyledInput = (0, styled_native_1.default)(Input_1.Input)(({ theme, rows, smallAndUp, }) => {
+    const lineHeight = smallAndUp
+        ? theme.font.lineHeight.md.mediaQuery.lg
+        : theme.font.lineHeight.md.mediaQuery.sm;
+    return (0, styled_native_1.css) `
+    min-height: ${theme.space[800] * rows}px;
+    line-height: ${rows > 1 ? (0, element_core_1.numToPx)(lineHeight) : 'normal'};
+  `;
+});
 const TextareaInput = (_a) => {
     var { rows = 3, ref } = _a, rest = __rest(_a, ["rows", "ref"]);
-    return ((0, jsx_runtime_1.jsx)(StyledInput, Object.assign({}, rest, { keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref })));
+    const breakpoints = (0, hooks_1.useBreakpoint)();
+    return ((0, jsx_runtime_1.jsx)(StyledInput, Object.assign({}, rest, breakpoints, { keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref })));
 };
 exports.TextareaInput = TextareaInput;

package/dist/components/Toggle/Toggle.d.ts

@@ -8,6 +8,8 @@ type ToggleProps = Omit<TouchableOpacityProps, 'children'> & {
     hint?: ReactNode;
     labelPosition?: HorizontalPosition;
     ref?: React.RefObject<View>;
+    testID?: string;
+    toggleBackgroundColor?: string;
 };
-export declare const Toggle: ({ activeOpacity, checked, label, hint, inline, labelPosition, testID, ref, ...rest }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toggle: ({ activeOpacity, checked, label, hint, inline, labelPosition, testID, ref, toggleBackgroundColor, ...rest }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Toggle/Toggle.js

@@ -20,7 +20,7 @@ const HintText_1 = require("../HintText/HintText");
 const LabelText_1 = require("../LabelText");
 const styles_1 = require("./styles");
 const Input = (_a) => {
-    var { checked, labelPosition, testID } = _a, rest = __rest(_a, ["checked", "labelPosition", "testID"]);
+    var { checked, labelPosition, testID, toggleBackgroundColor } = _a, rest = __rest(_a, ["checked", "labelPosition", "testID", "toggleBackgroundColor"]);
     const theme = (0, styled_native_1.useTheme)();
     const leftVal = (0, react_1.useRef)(new react_native_1.Animated.Value(checked ? theme.space[600] : theme.space[100])).current;
     (0, react_1.useEffect)(() => {
@@ -30,13 +30,11 @@ const Input = (_a) => {
             useNativeDriver: true,
         }).start();
     }, [checked]);
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledToggleInputWrapper, Object.assign({ labelPosition: labelPosition }, rest, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledToggleInput, { checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(styles_1.StyledToggleDot, { style: {
-                    transform: [{ translateX: leftVal }],
-                }, checked: checked }) }) })));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledToggleInputWrapper, Object.assign({ labelPosition: labelPosition }, rest, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledToggleInput, { checked: checked, testID: testID, toggleBackgroundColor: toggleBackgroundColor, children: (0, jsx_runtime_1.jsx)(styles_1.StyledToggleDot, { style: { transform: [{ translateX: leftVal }] }, checked: checked }) }) })));
 };
 const Toggle = (_a) => {
-    var { activeOpacity = 0.8, checked = false, label, hint, inline, labelPosition = 'left', testID, ref } = _a, rest = __rest(_a, ["activeOpacity", "checked", "label", "hint", "inline", "labelPosition", "testID", "ref"]);
+    var { activeOpacity = 0.8, checked = false, label, hint, inline, labelPosition = 'left', testID, ref, toggleBackgroundColor } = _a, rest = __rest(_a, ["activeOpacity", "checked", "label", "hint", "inline", "labelPosition", "testID", "ref", "toggleBackgroundColor"]);
     const hasLabel = label !== undefined;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledWrapper, Object.assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })) : null, (0, jsx_runtime_1.jsx)(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledWrapper, Object.assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })) : null, (0, jsx_runtime_1.jsx)(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined, toggleBackgroundColor: toggleBackgroundColor })] })));
 };
 exports.Toggle = Toggle;

package/dist/components/Toggle/styles.d.ts

@@ -39,6 +39,7 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -81,6 +82,7 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -89,6 +91,7 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -618,6 +621,7 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -660,6 +664,7 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -668,6 +673,7 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1195,6 +1201,7 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1237,6 +1244,7 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1245,6 +1253,7 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1732,6 +1741,7 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
     };
 }, {
     checked?: boolean;
+    toggleBackgroundColor?: string;
 }, never>;
 export declare const StyledToggleDot: import("styled-components").StyledComponent<Animated.AnimatedComponent<typeof import("react-native").View>, {
     color: {
@@ -1772,6 +1782,7 @@ export declare const StyledToggleDot: import("styled-components").StyledComponen
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1814,6 +1825,7 @@ export declare const StyledToggleDot: import("styled-components").StyledComponen
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1822,6 +1834,7 @@ export declare const StyledToggleDot: import("styled-components").StyledComponen
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

package/dist/components/Toggle/styles.js

@@ -25,14 +25,14 @@ exports.StyledToggleInputWrapper = styled_native_1.default.View(({ theme, labelP
         : ''}
     `;
 });
-exports.StyledToggleInput = styled_native_1.default.View(({ theme, checked }) => {
+exports.StyledToggleInput = styled_native_1.default.View(({ theme, checked, toggleBackgroundColor }) => {
     return `
       width: ${(0, element_core_1.numToPx)(theme.space[1100])};
       height: ${(0, element_core_1.numToPx)(theme.space[600])};
       justify-content: center;
       border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.lg)};
-      background: ${checked
-        ? theme.color.outline.outer
+      background-color: ${checked
+        ? toggleBackgroundColor || theme.color.outline.outer
         : theme.color.surface.onSurfaceVariant};
     `;
 });

package/dist/components/index.d.ts

@@ -16,10 +16,13 @@ export * from './Divider';
 export * from './Em';
 export * from './EmailField';
 export * from './EmailInput';
+export * from './EmptyState';
+export * from './ErrorWrapper';
 export * from './Field';
 export * from './Grid';
 export * from './Heading';
 export * from './Icon';
+export * from './LargeValueReference';
 export * from './LineThrough';
 export * from './Link';
 export * from './List';

package/dist/components/index.js

@@ -32,10 +32,13 @@ __exportStar(require("./Divider"), exports);
 __exportStar(require("./Em"), exports);
 __exportStar(require("./EmailField"), exports);
 __exportStar(require("./EmailInput"), exports);
+__exportStar(require("./EmptyState"), exports);
+__exportStar(require("./ErrorWrapper"), exports);
 __exportStar(require("./Field"), exports);
 __exportStar(require("./Grid"), exports);
 __exportStar(require("./Heading"), exports);
 __exportStar(require("./Icon"), exports);
+__exportStar(require("./LargeValueReference"), exports);
 __exportStar(require("./LineThrough"), exports);
 __exportStar(require("./Link"), exports);
 __exportStar(require("./List"), exports);

package/dist/esm/components/ActionList/Action.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TouchableOpacity, View, } from 'react-native';
+import { useBreakpoint } from '../../hooks';
+import { Badge } from '../Badge';
+import { StyledActionInner, StyledActionNodeWrapper, StyledActionText, StyledActionWrapper, StyledHintText, StyledLeftIcon, StyledRightIcon, StyledTextWrapper, } from './styled';
+const ActionWrapper = (_a) => {
+    var { children, accessibilityRole, accessibilityLabel, accessibilityHint, activeOpacity = 0.75, fullWidth, hasBorder = false, inverted = false, inList, onPress, testID, standalone = false, ref } = _a, rest = __rest(_a, ["children", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inList", "onPress", "testID", "standalone", "ref"]);
+    return (_jsx(StyledActionWrapper, Object.assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID, inList: inList }, rest, { children: _jsx(TouchableOpacity, { activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, standalone: standalone, children: children }) }) })));
+};
+const Action = (_a) => {
+    var { accessibilityRole = 'link', accessibilityLabel, accessibilityHint, children, fullWidth = false, inverted = false, onPress, testID, iconLeft, iconRight, standalone = false, badgeVariant = 'info', badgeText, hint, ref } = _a, rest = __rest(_a, ["accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "fullWidth", "inverted", "onPress", "testID", "iconLeft", "iconRight", "standalone", "badgeVariant", "badgeText", "hint", "ref"]);
+    const { smallAndUp } = useBreakpoint();
+    return (_jsxs(ActionWrapper, Object.assign({ ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID, standalone: standalone, hint: hint, badgeText: badgeText }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, _jsxs(View, { children: [typeof children === 'string' ? (_jsxs(StyledTextWrapper, { children: [_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, children: children }), badgeText ? (_jsx(Badge, { variant: badgeVariant, children: badgeText })) : null] })) : (_jsx(StyledActionNodeWrapper, { children: children })), hint ? (_jsx(StyledHintText, { inverted: inverted, children: hint })) : null] }), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
+};
+export { Action };

package/dist/esm/components/ActionList/ActionList.js

@@ -10,35 +10,19 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, } from 'react';
-import { TouchableOpacity, View, } from 'react-native';
-import { useBreakpoint } from '../../hooks';
+import { Children, cloneElement } from 'react';
+import { View } from 'react-native';
 import { getValidChildren } from '../../utils';
-import { Badge } from '../Badge';
-import { StyledActionInner, StyledActionList, StyledActionNodeWrapper, StyledActionText, StyledActionWrapper, StyledHintText, StyledLeftIcon, StyledRightIcon, StyledTextWrapper, } from './styled';
-const ActionList = (_a) => {
-    var { children, inverted, borderBottom } = _a, rest = __rest(_a, ["children", "inverted", "borderBottom"]);
+import { Divider } from '../Divider';
+import { ActionListHeading } from './components/ActionListHeading';
+import { StyledActionList } from './styled';
+export const ActionList = (_a) => {
+    var { children, iconName, iconColor, heading, subheading } = _a, rest = __rest(_a, ["children", "iconName", "iconColor", "heading", "subheading"]);
     const validChildren = getValidChildren(children);
     const childCount = Children.count(validChildren);
-    return (_jsx(StyledActionList, Object.assign({}, rest, { children: Children.map(validChildren, (child, index) => {
-            var _a, _b;
-            return cloneElement(child, {
-                fullWidth: true,
-                index,
-                hasBorder: (childCount > 1 && index !== childCount - 1) || borderBottom,
-                inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted, // prioritise child prop
-                inList: true,
-                iconRight: (_b = child.props.iconRight) !== null && _b !== void 0 ? _b : 'chevron-right-small',
-            });
-        }) })));
+    return (_jsxs(View, { children: [_jsx(ActionListHeading, { iconName: iconName, heading: heading, subheading: subheading, iconColor: iconColor }), _jsx(StyledActionList, Object.assign({}, rest, { children: Children.map(validChildren, (child, index) => (_jsxs(View, { children: [cloneElement(child, {
+                            fullWidth: true,
+                            index,
+                            inList: true,
+                        }), childCount > 1 && index !== childCount - 1 && _jsx(Divider, {})] }))) }))] }));
 };
-const ActionWrapper = (_a) => {
-    var { children, accessibilityRole, accessibilityLabel, accessibilityHint, activeOpacity = 0.75, fullWidth, hasBorder = false, inverted = false, inList, onPress, testID, standalone = false, ref } = _a, rest = __rest(_a, ["children", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inList", "onPress", "testID", "standalone", "ref"]);
-    return (_jsx(StyledActionWrapper, Object.assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID, inList: inList }, rest, { children: _jsx(TouchableOpacity, { activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, standalone: standalone, children: children }) }) })));
-};
-const Action = (_a) => {
-    var { accessibilityRole = 'link', accessibilityLabel, accessibilityHint, children, fullWidth = false, inverted = false, onPress, testID, iconLeft, iconRight, standalone = false, badgeVariant = 'info', badgeText, hint, ref } = _a, rest = __rest(_a, ["accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "fullWidth", "inverted", "onPress", "testID", "iconLeft", "iconRight", "standalone", "badgeVariant", "badgeText", "hint", "ref"]);
-    const { smallAndUp } = useBreakpoint();
-    return (_jsxs(ActionWrapper, Object.assign({ ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID, standalone: standalone, hint: hint, badgeText: badgeText }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, _jsxs(View, { children: [typeof children === 'string' ? (_jsxs(StyledTextWrapper, { children: [_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, children: children }), badgeText ? (_jsx(Badge, { variant: badgeVariant, children: badgeText })) : null] })) : (_jsx(StyledActionNodeWrapper, { children: children })), hint ? (_jsx(StyledHintText, { inverted: inverted, children: hint })) : null] }), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
-};
-export { Action, ActionList };

package/dist/esm/components/ActionList/ActionListItems/DataListItem.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '../../../styled.native';
+import { Icon } from '../../Icon';
+import { LabelText } from '../../LabelText';
+import { P } from '../../P';
+import { ProgressRing } from './ProgressRing';
+import { ActionListItemWrapper, DataValueText, DirectionAndValueTextContainer, DirectionLabelContainer, GraphicContainer, LeftTextContainer, OnSurfaceP, RightTextContainer, StatusText, StyledImage, ValueTextContainer, } from './styles';
+export const DataListItem = ({ testID, graphic, progressRingPercentage, heading, subHeading, statusText, valueText, valueSubText, directionLabel, }) => {
+    const theme = useTheme();
+    const isError = statusText === 'Error';
+    const hasProgressRing = progressRingPercentage !== undefined;
+    const IconContent = (graphic === null || graphic === void 0 ? void 0 : graphic.type) === 'icon' ? (_jsx(GraphicContainer, { isIcon: true, hasProgress: hasProgressRing, children: _jsx(Icon, { name: graphic.icon, size: 24, color: graphic.iconColor ? graphic.iconColor : theme.color.brand.brand }) })) : null;
+    return (_jsxs(ActionListItemWrapper, { testID: testID, children: [(graphic === null || graphic === void 0 ? void 0 : graphic.type) === 'icon' &&
+                (hasProgressRing ? (_jsx(ProgressRing, { percentage: progressRingPercentage, children: IconContent })) : (IconContent)), (graphic === null || graphic === void 0 ? void 0 : graphic.type) === 'image' && (_jsx(GraphicContainer, { children: _jsx(StyledImage, { source: typeof graphic.image === 'string'
+                        ? { uri: graphic.image }
+                        : graphic.image, resizeMode: "cover", accessibilityLabel: 'Data List Image' }) })), _jsxs(LeftTextContainer, { children: [heading && _jsx(LabelText, { children: heading }), subHeading && _jsx(P, { size: "sm", children: subHeading }), statusText && (_jsx(StatusText, { size: "sm", isError: isError, children: statusText }))] }), _jsxs(RightTextContainer, { children: [_jsxs(DirectionAndValueTextContainer, { children: [directionLabel && (_jsx(DirectionLabelContainer, { children: _jsx(OnSurfaceP, { size: "sm", children: directionLabel }) })), valueText && (_jsx(ValueTextContainer, { children: _jsx(DataValueText, { isError: isError, size: "lg", children: valueText }) }))] }), valueSubText && _jsx(OnSurfaceP, { size: "sm", children: valueSubText })] })] }));
+};