@ovotech/element-native 5.5.0 → 5.7.0

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

@@ -2,6 +2,7 @@ export * from './Accordion';
 export * from './ActionCard';
 export * from './ActionList';
 export * from './Badge';
+export * from './BottomActionBar';
 export * from './Button';
 export * from './Card';
 export * from './Cards';
@@ -16,10 +17,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';
@@ -37,6 +41,7 @@ export * from './PhoneInput';
 export * from './Pictogram';
 export * from './Radio';
 export * from './RadioCard';
+export * from './Rail';
 export * from './RemoteImage';
 export * from './ScreenView';
 export * from './SegmentedControls';

package/dist/components/index.js

@@ -18,6 +18,7 @@ __exportStar(require("./Accordion"), exports);
 __exportStar(require("./ActionCard"), exports);
 __exportStar(require("./ActionList"), exports);
 __exportStar(require("./Badge"), exports);
+__exportStar(require("./BottomActionBar"), exports);
 __exportStar(require("./Button"), exports);
 __exportStar(require("./Card"), exports);
 __exportStar(require("./Cards"), exports);
@@ -32,10 +33,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);
@@ -53,6 +57,7 @@ __exportStar(require("./PhoneInput"), exports);
 __exportStar(require("./Pictogram"), exports);
 __exportStar(require("./Radio"), exports);
 __exportStar(require("./RadioCard"), exports);
+__exportStar(require("./Rail"), exports);
 __exportStar(require("./RemoteImage"), exports);
 __exportStar(require("./ScreenView"), exports);
 __exportStar(require("./SegmentedControls"), 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,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFontScaling } from '../../../hooks/use-font-scaling';
+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 { isFontScalingLarge } = useFontScaling();
+    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, { scaledUpFont: isFontScalingLarge, children: _jsx(OnSurfaceP, { size: "sm", children: directionLabel }) })), valueText && (_jsx(ValueTextContainer, { scaledUpFont: isFontScalingLarge, children: _jsx(DataValueText, { isError: isError, size: "lg", children: valueText }) }))] }), valueSubText && _jsx(OnSurfaceP, { size: "sm", children: valueSubText })] })] }));
+};

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

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { CurrencyInput } from '../../CurrencyInput';
+import { EmailInput } from '../../EmailInput';
+import { Input } from '../../Input/Input';
+import { TextLink } from '../../Link';
+import { Margin } from '../../Margin';
+import { NumberInput } from '../../NumberInput';
+import { P } from '../../P';
+import { SelectField } from '../../SelectField';
+import { Strong } from '../../Strong';
+import { TextareaInput } from '../../TextareaInput';
+import { ActionListItemWrapper, EditableListContainer, EditButtonsContainer, InitialStateContainer, ValueText, } from './styles';
+const getInitialValue = (input) => {
+    var _a, _b, _c;
+    switch (input.type) {
+        case 'number':
+        case 'currency':
+            return (_a = input.defaultValue) !== null && _a !== void 0 ? _a : null;
+        case 'select':
+            return (_b = input.defaultValue) !== null && _b !== void 0 ? _b : null;
+        case 'text':
+        case 'location':
+        case 'email':
+        case 'textarea':
+            return (_c = input.defaultValue) !== null && _c !== void 0 ? _c : '';
+    }
+};
+function acceptNumericInput(nextText, prevText) {
+    var _a;
+    if (nextText === '')
+        return '';
+    if (!/^[0-9.]*$/.test(nextText))
+        return prevText;
+    if (((_a = nextText.match(/\./g)) !== null && _a !== void 0 ? _a : []).length > 1)
+        return prevText;
+    return nextText;
+}
+function parseDraftNumericText(text) {
+    if (text === '' || text === '.' || text.endsWith('.'))
+        return null;
+    const n = Number(text);
+    return Number.isFinite(n) ? n : null;
+}
+export const EditableListItem = forwardRef(({ heading, input, onSave }, ref) => {
+    const inputRef = useRef(null);
+    const initialValue = useMemo(() => getInitialValue(input), [input]);
+    const [editState, setEditState] = useState('initial');
+    const [value, setValue] = useState(initialValue);
+    const [draft, setDraft] = useState(initialValue);
+    const [numericInputText, setNumericInputText] = useState('');
+    useImperativeHandle(ref, () => ({
+        getValue: () => value,
+    }));
+    const handleNumericChange = (nextText) => {
+        const accepted = acceptNumericInput(nextText, numericInputText);
+        if (accepted === numericInputText)
+            return;
+        setNumericInputText(accepted);
+    };
+    const startEditing = () => {
+        setDraft(value);
+        setEditState('editing');
+        if (input.type === 'number' || input.type === 'currency') {
+            const n = value;
+            setNumericInputText(n === null ? '' : String(n));
+        }
+        requestAnimationFrame(() => {
+            var _a, _b;
+            (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+    };
+    const saveEditing = () => {
+        const nextValue = input.type === 'number' || input.type === 'currency'
+            ? parseDraftNumericText(numericInputText)
+            : draft;
+        setValue(nextValue);
+        setEditState('initial');
+        onSave === null || onSave === void 0 ? void 0 : onSave(nextValue);
+    };
+    const cancelEditing = () => {
+        setDraft(value);
+        if (input.type === 'number' || input.type === 'currency') {
+            const n = value;
+            setNumericInputText(n === null ? '' : String(n));
+        }
+        setEditState('initial');
+    };
+    const displayValue = useMemo(() => {
+        var _a, _b;
+        switch (input.type) {
+            case 'select':
+                return (_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : '-';
+            case 'number':
+            case 'currency':
+                return (_b = value === null || value === void 0 ? void 0 : value.toString()) !== null && _b !== void 0 ? _b : '-';
+            default: {
+                const v = value;
+                return v === '' ? '-' : v;
+            }
+        }
+    }, [input.type, value]);
+    const renderEditingInput = () => {
+        var _a;
+        if (editState !== 'editing')
+            return null;
+        switch (input.type) {
+            case 'text':
+                return (_jsx(Input, { ref: inputRef, value: draft, onChangeText: v => setDraft(v) }));
+            case 'location':
+                return (_jsx(Input, { ref: inputRef, value: draft, onChangeText: v => setDraft(v), iconLeft: "address" }));
+            case 'email':
+                return (_jsx(EmailInput, { ref: inputRef, value: draft, onChangeText: v => setDraft(v) }));
+            case 'textarea':
+                return (_jsx(TextareaInput, { ref: inputRef, value: draft, onChangeText: v => setDraft(v) }));
+            case 'number':
+                return (_jsx(NumberInput, { ref: inputRef, value: numericInputText, onChangeText: handleNumericChange }));
+            case 'currency':
+                return (_jsx(CurrencyInput, { ref: inputRef, value: numericInputText, onChangeText: handleNumericChange }));
+            case 'select': {
+                const selected = (_a = draft) !== null && _a !== void 0 ? _a : {
+                    label: 'None',
+                    value: 'default',
+                };
+                return (_jsx(SelectField, { ref: inputRef, label: "", options: input.options, onSelected: opt => setDraft(opt.value === 'default' ? null : opt), defaultSelected: selected }));
+            }
+        }
+    };
+    return (_jsx(ActionListItemWrapper, { children: _jsxs(EditableListContainer, { children: [heading && (_jsx(P, { children: _jsx(Strong, { children: heading }) })), editState === 'initial' ? (_jsxs(InitialStateContainer, { children: [_jsx(ValueText, { children: displayValue }), _jsx(TextLink, { onPress: startEditing, children: _jsx(P, { size: "md", children: displayValue === '-' ? 'Add' : 'Change' }) })] })) : (_jsxs(_Fragment, { children: [renderEditingInput(), _jsx(Margin, { top: 2 }), _jsxs(EditButtonsContainer, { children: [_jsx(TextLink, { onPress: saveEditing, children: _jsx(P, { children: "Save" }) }), _jsx(TextLink, { onPress: cancelEditing, children: _jsx(P, { children: "Cancel" }) })] })] }))] }) }));
+});
+EditableListItem.displayName = 'EditableListItem';

package/dist/esm/components/ActionList/ActionListItems/NavigationListItem.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 { useTheme } from '../../../styled.native';
+import { Icon } from '../../Icon';
+import { P } from '../../P';
+import { ActionListItemWrapper, SubHeading, TextContainer } from './styles';
+export const NavigationListItem = (_a) => {
+    var { testID, iconLeft, iconRight, heading, subHeading, onPress, accessibilityRole, accessibilityLabel, accessibilityHint, activeOpacity = 0.75, disabled } = _a, touchableProps = __rest(_a, ["testID", "iconLeft", "iconRight", "heading", "subHeading", "onPress", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "disabled"]);
+    const theme = useTheme();
+    const isPressable = !!onPress && !disabled;
+    const Wrapper = isPressable ? TouchableOpacity : View;
+    return (_jsx(Wrapper, Object.assign({ testID: testID }, (isPressable && Object.assign({ activeOpacity,
+        onPress,
+        disabled, accessible: true, accessibilityRole: accessibilityRole !== null && accessibilityRole !== void 0 ? accessibilityRole : 'button', accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : heading, accessibilityHint }, touchableProps)), { children: _jsxs(ActionListItemWrapper, { children: [iconLeft && (_jsx(Icon, { name: iconLeft, size: 24, color: theme.color.brand.brand })), (heading || subHeading) && (_jsxs(TextContainer, { children: [heading && _jsx(P, { children: heading }), subHeading && _jsx(SubHeading, { size: "sm", children: subHeading })] })), iconRight && _jsx(Icon, { name: iconRight, size: 20 })] }) })));
+};

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import styled, { css, useTheme } from '../../../styled.native';
+import { PROGESS_RING_INNER } from './styles';
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+const Outer = styled(View)(({ outerSize }) => css `
+    width: ${outerSize}px;
+    height: ${outerSize}px;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+  `);
+const RingSvg = styled(Svg) `
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+export const ProgressRing = ({ percentage, children, }) => {
+    const theme = useTheme();
+    const innerSize = PROGESS_RING_INNER;
+    const strokeWidth = 2;
+    const outerSize = innerSize + 2 * strokeWidth;
+    const pct = clamp(percentage, 0, 100);
+    const radius = (outerSize - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const dashOffset = circumference * (1 - pct / 100);
+    return (_jsxs(Outer, { outerSize: outerSize, children: [_jsxs(RingSvg, { width: outerSize, height: outerSize, viewBox: `0 0 ${outerSize} ${outerSize}`, children: [_jsx(Circle, { cx: outerSize / 2, cy: outerSize / 2, r: radius, stroke: theme.color.surface.border, strokeWidth: strokeWidth, fill: "none" }), _jsx(Circle, { cx: outerSize / 2, cy: outerSize / 2, r: radius, stroke: theme.color.brand.brand, strokeWidth: strokeWidth, fill: "none", strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: dashOffset, transform: `rotate(-90 ${outerSize / 2} ${outerSize / 2})` })] }), children] }));
+};

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch } from 'react-native';
+import { HintText } from '../../HintText';
+import { P } from '../../P';
+import { ActionListItemWrapper, TextContainer } from './styles';
+export const ToggleListItem = ({ testID, heading, hintText, checked, onToggle, }) => {
+    return (_jsxs(ActionListItemWrapper, { testID: testID ? `${testID}-toggle` : undefined, children: [_jsxs(TextContainer, { children: [_jsx(P, { children: heading }), hintText && _jsx(HintText, { children: hintText })] }), _jsx(Switch, { value: checked, onValueChange: onToggle, accessibilityRole: "switch", accessibilityLabel: heading, accessibilityState: { checked } })] }));
+};

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

@@ -0,0 +1,137 @@
+import { numToPx } from '@ovotech/element-core';
+import { Image, ImageBackground, View } from 'react-native';
+import styled, { css } from '../../../styled.native';
+import { P } from '../../P';
+export const ActionListItemWrapper = styled(View)(({ theme }) => {
+    return css `
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: ${numToPx(theme.space[300])};
+    padding: ${numToPx(theme.space[400])} 0;
+  `;
+});
+export const TextContainer = styled(View)(() => {
+    return css `
+    flex: 1;
+  `;
+});
+// Editable List Item
+export const EditableListContainer = styled(View)(({ theme }) => {
+    return css `
+    flex: 1;
+    gap: ${numToPx(theme.space[100])};
+  `;
+});
+export const InitialStateContainer = styled(View)(() => {
+    return css `
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  `;
+});
+export const ValueText = styled(P)(({ theme }) => {
+    return css `
+    color: ${theme.color.surface.onSurfaceVariant};
+  `;
+});
+export const EditButtonsContainer = styled(View)(({ theme }) => {
+    return css `
+    gap: ${numToPx(theme.space[300])};
+    flex-direction: row;
+    justify-content: flex-end;
+  `;
+});
+// Navigation List Item
+export const NavigationListContainer = styled(View)(({ theme }) => {
+    return css `
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: ${numToPx(theme.space[100])};
+  `;
+});
+export const SubHeading = styled(P)(({ theme }) => {
+    return css `
+    color: ${theme.color.alert.info};
+  `;
+});
+// Data List Item
+export const LeftTextContainer = styled(View)(({ theme }) => {
+    return css `
+    flex: 1;
+    min-width: 0;
+    flex-shrink: 1;
+    gap: ${numToPx(theme.space[100])};
+  `;
+});
+export const RightTextContainer = styled(View)(({ theme }) => {
+    return css `
+    flex-shrink: 1;
+    gap: ${numToPx(theme.space[100])};
+    align-items: flex-end;
+  `;
+});
+export const StyledImage = styled(Image)(() => {
+    return css `
+    width: 100%;
+    height: 100%;
+  `;
+});
+export const StatusText = styled(P)(({ theme, isError, }) => {
+    return css `
+    color: ${isError ? theme.color.alert.error : theme.color.alert.info};
+  `;
+});
+export const ValueTextContainer = styled(View)(({ theme, scaledUpFont, }) => {
+    return css `
+    min-width: ${scaledUpFont ? 138 : numToPx(theme.space[2400])};
+    align-items: flex-end;
+  `;
+});
+export const DataValueText = styled(P)(({ theme, isError, }) => {
+    return css `
+    color: ${isError ? theme.color.alert.error : theme.color.surface.onSurface};
+  `;
+});
+export const DirectionLabelContainer = styled(View)(({ theme, scaledUpFont }) => {
+    return css `
+      min-width: ${scaledUpFont
+        ? numToPx(theme.space[900])
+        : numToPx(theme.space[600])};
+      align-items: flex-end;
+    `;
+});
+export const OnSurfaceP = styled(P)(({ theme }) => {
+    return css `
+    color: ${theme.color.surface.onSurfaceVariant};
+  `;
+});
+export const DirectionAndValueTextContainer = styled(View)(() => {
+    return css `
+    align-items: flex-end;
+    justify-content: space-between;
+    flex-direction: row;
+  `;
+});
+export const PROGESS_RING_INNER = 42;
+export const GraphicContainer = styled(ImageBackground)(({ theme, isIcon, hasProgress }) => {
+    return css `
+    border-radius: ${numToPx(theme.border.radius['2xl'])};
+    background-color: ${hasProgress
+        ? theme.color.surface.bright
+        : theme.color.surface.surface};
+    border-width: 0;
+    padding: ${isIcon ? numToPx(theme.space[200]) : 0};
+    width: ${hasProgress
+        ? `${PROGESS_RING_INNER}px`
+        : numToPx(theme.space[1100])};
+    height: ${hasProgress
+        ? `${PROGESS_RING_INNER}px`
+        : numToPx(theme.space[1100])};
+    flex-shrink: 0;
+    overflow: hidden;
+    align-items: center;
+    justify-content: center;
+  `;
+});

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { Icon } from '../../Icon';
+import { P } from '../../P';
+import { Strong } from '../../Strong';
+import { GraphicContainer, InfoRowWrapper } from '../styled';
+export const ActionListHeading = ({ iconName, iconColor = 'surface.surface', heading, subheading, }) => (_jsxs(InfoRowWrapper, { children: [iconName && (_jsx(GraphicContainer, { children: _jsx(Icon, { name: iconName, size: 24, color: iconColor }) })), _jsxs(View, { children: [heading && (_jsx(P, { size: "xl", children: _jsx(Strong, { children: heading }) })), subheading && _jsx(P, { children: subheading })] })] }));

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

@@ -1 +1,6 @@
-export { Action, ActionList } from './ActionList';
+export { Action } from './Action';
+export { ActionList } from './ActionList';
+export { DataListItem } from './ActionListItems/DataListItem';
+export { EditableListItem } from './ActionListItems/EditableListItem';
+export { NavigationListItem } from './ActionListItems/NavigationListItem';
+export { ToggleListItem } from './ActionListItems/ToggleListItem';

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

@@ -1,23 +1,22 @@
 import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
+import { Card } from '../Card';
 import { HintText } from '../HintText';
 import { Icon } from '../Icon';
-const StyledList = styled.View(({ theme, smallAndUp }) => css `
+const StyledList = styled(Card)(({ theme, smallAndUp, inverted }) => css `
     flex-direction: column;
+    padding-top: ${numToPx(theme.space[0])};
+    padding-bottom: ${numToPx(theme.space[0])};
     margin-top: ${numToPx(smallAndUp ? theme.space[300] : theme.space[200])};
     margin-bottom: ${numToPx(smallAndUp ? theme.space[300] : theme.space[200])};
+    background-color: ${inverted && theme.color.neutral.black};
   `);
 export const StyledActionList = styledComponentWithBreakpoints(StyledList);
-export const StyledActionWrapper = styled.View(({ theme, hasBorder, inverted, inList, hint, badgeText }) => css `
+export const StyledActionWrapper = styled.View(({ theme }) => css `
     width: 100%;
     align-self: flex-start;
-    border-bottom-width: ${hasBorder ? numToPx(theme.border.width.sm) : 0};
-    border-bottom-style: solid;
-    border-bottom-color: ${inverted
-    ? theme.color.surface.dim
-    : theme.color.brand.fixed.onBrand};
-    padding: ${inList && (hint || badgeText) ? numToPx(theme.space[200]) : 0} 0;
+    padding: ${numToPx(theme.space[400])} 0 ${numToPx(theme.space[400])} 0;
   `);
 export const StyledActionInner = styled.View(({ fullWidth, standalone }) => css `
     flex-direction: row;
@@ -72,3 +71,19 @@ export const StyledHintText = styled(HintText)(({ theme, inverted = false }) =>
         : theme.color.surface.onSurfaceVariant};
   `;
 });
+// Action List Heading
+export const GraphicContainer = styled.View(({ theme }) => css `
+    width: ${numToPx(theme.unit[1100])};
+    height: ${numToPx(theme.unit[1100])};
+    background-color: ${theme.color.surface.bright};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: ${numToPx(theme.border.radius['2xl'])};
+    padding: ${numToPx(theme.space[200])};
+  `);
+export const InfoRowWrapper = styled.View(({ theme }) => css `
+    flex-direction: row;
+    align-items: center;
+    gap: ${numToPx(theme.space[300])};
+  `);

package/dist/esm/components/BottomActionBar/BottomActionBar.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import styled, { useTheme } from '../../styled.native';
+import { Button } from '../Button';
+import { Stack } from '../Stack';
+import { useOverlayContext } from './OverlayProvider';
+const BottomActionContainer = styled.View(({ theme, background }) => ({
+    width: '100%',
+    bottom: 0,
+    position: 'absolute',
+    borderTopWidth: theme.border.width.sm,
+    borderTopColor: theme.color.surface.border,
+    backgroundColor: background === 'surface'
+        ? theme.color.surface.surface
+        : background === 'bright'
+            ? theme.color.surface.bright
+            : 'transparent',
+    paddingTop: theme.space[300],
+    paddingHorizontal: theme.space[400],
+}));
+export const BottomActionBar = ({ surfaceAction, outlineAction, background = 'surface', }) => {
+    const theme = useTheme();
+    const overlay = useOverlayContext();
+    const insets = useSafeAreaInsets();
+    const paddingBottom = insets.bottom + theme.space[100];
+    React.useEffect(() => {
+        overlay.mount('BottomAction', _jsx(BottomActionContainer, { background: background, pointerEvents: "auto", style: { paddingBottom: paddingBottom }, children: _jsxs(Stack, { spaceBetween: 3, children: [surfaceAction && (_jsx(Button, { fullWidth: true, variant: "surface", onPress: surfaceAction.onPress, children: surfaceAction.label })), outlineAction && (_jsx(Button, { fullWidth: true, variant: "outline", onPress: outlineAction.onPress, children: outlineAction.label }))] }) }));
+        return () => overlay.unmount('BottomAction');
+    }, [
+        overlay,
+        background,
+        paddingBottom,
+        surfaceAction === null || surfaceAction === void 0 ? void 0 : surfaceAction.label,
+        surfaceAction === null || surfaceAction === void 0 ? void 0 : surfaceAction.onPress,
+        outlineAction === null || outlineAction === void 0 ? void 0 : outlineAction.label,
+        outlineAction === null || outlineAction === void 0 ? void 0 : outlineAction.onPress,
+    ]);
+    return null;
+};