@ovotech/element-native 5.5.0 → 5.6.0

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,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from '../../../styled.native';
+import { P } from '../../P';
+import { Toggle } from '../../Toggle';
+import { ActionListItemWrapper } from './styles';
+export const ToggleListItem = ({ testID, heading, hintText, checked, onToggle, }) => {
+    const theme = useTheme();
+    return (_jsx(ActionListItemWrapper, { testID: testID ? `${testID}-toggle` : undefined, children: _jsx(Toggle, { checked: checked, onPress: onToggle, accessibilityLabel: typeof heading === 'string' ? heading : undefined, label: _jsx(P, { children: heading }), hint: hintText, toggleBackgroundColor: theme.color.brand.brand }) }));
+};

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

@@ -0,0 +1,135 @@
+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;
+  `;
+});
+// 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 TextContainer = styled(View)(() => {
+    return css `
+    flex: 1;
+  `;
+});
+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;
+    gap: ${numToPx(theme.space[100])};
+  `;
+});
+export const RightTextContainer = styled(View)(({ theme }) => {
+    return css `
+    flex: 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 }) => {
+    return css `
+    min-width: ${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 }) => {
+    return css `
+    min-width: ${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)(({ theme }) => {
+    return css `
+    align-items: flex-end;
+    justify-content: space-between;
+    width: 100%;
+    flex-direction: row;
+    margin-left: ${numToPx(theme.space[300])};
+  `;
+});
+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/Button/Button.js

@@ -18,7 +18,7 @@ const Button = (_a) => {
     const { smallAndUp } = useBreakpoint();
     const isIconOnly = !children;
     const iconSizes = {
-        small: 14,
+        small: 16,
         default: 16,
         large: 20,
     };

package/dist/esm/components/Card/Card.js

@@ -11,17 +11,26 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { Animated } from 'react-native';
+import { Animated, Pressable, View, } from 'react-native';
 import { useBreakpoint } from '../../hooks';
 import { useTheme } from '../../styled.native';
 import { AnimatedStyledCard, BackgroundImage, TappableWrapper, } from './Card.styles';
 export const getCardFlags = (props) => {
-    const { background, onPress, displayStyle } = props;
-    const hasBgImage = !!background && typeof background !== 'string';
-    const tappable = Boolean(onPress);
+    const { background, onPress, onSelect, displayStyle } = props;
+    const hasBackground = !!background;
+    const hasBgImage = hasBackground && typeof background !== 'string';
+    const selectable = Boolean(onSelect) && !onPress;
+    const pressable = Boolean(onPress) && !onSelect;
     const isDefault = displayStyle === 'default';
     const isOutline = displayStyle === 'outline';
-    return { hasBgImage, tappable, isDefault, isOutline };
+    return {
+        hasBackground,
+        hasBgImage,
+        pressable,
+        selectable,
+        isDefault,
+        isOutline,
+    };
 };
 function useAnimatedBorder(baseColor, selectedColor, isSelected, duration) {
     const borderAnim = useRef(new Animated.Value(0)).current;
@@ -31,45 +40,58 @@ function useAnimatedBorder(baseColor, selectedColor, isSelected, duration) {
             duration,
             useNativeDriver: false,
         }).start();
-    }, [isSelected, duration]);
+    }, [isSelected, duration, borderAnim]);
     return borderAnim.interpolate({
         inputRange: [0, 1],
         outputRange: [baseColor, selectedColor],
     });
 }
 export const Card = (_a) => {
-    var { children, displayStyle = 'default', background, onPress } = _a, rest = __rest(_a, ["children", "displayStyle", "background", "onPress"]);
+    var { children, displayStyle = 'default', background, onPress, onSelect } = _a, rest = __rest(_a, ["children", "displayStyle", "background", "onPress", "onSelect"]);
     const theme = useTheme();
     const [isFocused, setFocused] = useState(false);
     const [isSelected, setSelected] = useState(false);
     const { largeAndUp } = useBreakpoint();
-    const { hasBgImage, tappable, isDefault, isOutline } = getCardFlags({
+    const { hasBackground, hasBgImage, pressable, selectable, isDefault, isOutline, } = getCardFlags({
         background,
         onPress,
         displayStyle,
+        onSelect,
     });
     let baseBorderColor = theme.color.surface.bright;
-    if (isOutline) {
-        baseBorderColor = theme.color.surface.bright;
-    }
-    else if (isDefault) {
-        if (hasBgImage)
+    if (isDefault) {
+        if (hasBgImage) {
             baseBorderColor = 'transparent';
-        else if (typeof background === 'string')
+        }
+        else if (typeof background === 'string') {
             baseBorderColor = background;
-        else
-            baseBorderColor = theme.color.surface.bright;
+        }
     }
     const selectedBorderColor = theme.color.surface.onSurface;
-    const animatedBorderColor = useAnimatedBorder(baseBorderColor, selectedBorderColor, isSelected, theme.transition.duration.fast);
+    const shouldHideBorder = hasBackground && !isOutline && !pressable && !selectable;
+    const animatedBorderColor = useAnimatedBorder(baseBorderColor, selectedBorderColor, selectable && isSelected, theme.transition.duration.fast);
     const handlePress = () => {
-        setSelected(prev => !prev);
         onPress === null || onPress === void 0 ? void 0 : onPress();
     };
-    const CardContent = (_jsxs(AnimatedStyledCard, Object.assign({ displayStyle: displayStyle, background: background, largeAndUp: largeAndUp }, rest, { style: [rest === null || rest === void 0 ? void 0 : rest.style, { borderColor: animatedBorderColor }], children: [hasBgImage && (_jsx(BackgroundImage, { source: background, resizeMode: "cover", largeAndUp: largeAndUp })), children] })));
-    if (!tappable)
-        return CardContent;
-    return (_jsx(TappableWrapper, { onPress: handlePress, onFocus: () => setFocused(true), onBlur: () => setFocused(false), accessibilityRole: "button", focused: isFocused, largeAndUp: largeAndUp, style: ({ pressed }) => ({
+    const handleSelect = () => {
+        setSelected(prev => !prev);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+    };
+    const CardContent = (_jsxs(AnimatedStyledCard, Object.assign({ displayStyle: displayStyle, background: background, largeAndUp: largeAndUp, onPress: onPress, onSelect: onSelect }, rest, { style: [
+            {
+                borderWidth: shouldHideBorder ? 0 : theme.border.width.md,
+                borderColor: animatedBorderColor,
+            },
+            rest === null || rest === void 0 ? void 0 : rest.style,
+        ], children: [hasBgImage && (_jsx(BackgroundImage, { source: background, resizeMode: "cover", largeAndUp: largeAndUp })), children] })));
+    const isInteractive = pressable || selectable;
+    return (_jsx(TappableWrapper, Object.assign({ as: isInteractive ? Pressable : View, largeAndUp: largeAndUp, tappable: isInteractive, focused: isInteractive ? isFocused : false }, (isInteractive && {
+        onPress: pressable ? handlePress : handleSelect,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        accessibilityRole: 'button',
+        style: ({ pressed }) => ({
             opacity: pressed ? 0.9 : 1,
-        }), children: CardContent }));
+        }),
+    }), { children: CardContent })));
 };

package/dist/esm/components/Card/Card.styles.js

@@ -1,21 +1,22 @@
-import { Animated, ImageBackground, Pressable, View } from 'react-native';
+import { Animated, ImageBackground, View } from 'react-native';
 import styled from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 import { getCardFlags } from './Card';
-const StyledCardBase = styled(View)(({ theme, displayStyle, background, onPress, largeAndUp, size, }) => {
-    const { hasBgImage, tappable, isDefault } = getCardFlags({
+const StyledCardBase = styled(View)(({ theme, displayStyle, background, onPress, onSelect, largeAndUp, size, }) => {
+    const { hasBgImage, pressable, selectable, isDefault } = getCardFlags({
         background,
         onPress,
+        onSelect,
         displayStyle,
     });
     const backgroundColor = hasBgImage
         ? 'transparent'
         : typeof background === 'string'
             ? background
-            : isDefault || tappable
+            : isDefault || pressable || selectable
                 ? theme.color.surface.bright
                 : 'transparent';
-    return Object.assign(Object.assign({}, (size || {})), { padding: theme.space[400], position: 'relative', borderWidth: theme.border.width.md, borderStyle: 'solid', borderRadius: theme.border.radius[largeAndUp ? '2xl' : 'lg'], overflow: 'hidden', backgroundColor });
+    return Object.assign(Object.assign({}, (size || {})), { padding: theme.space[400], position: 'relative', borderStyle: 'solid', borderRadius: theme.border.radius[largeAndUp ? '2xl' : 'lg'], overflow: 'hidden', backgroundColor });
 });
 const CardBase = styledComponentWithBreakpoints(StyledCardBase);
 export const AnimatedStyledCard = Animated.createAnimatedComponent(CardBase);
@@ -28,15 +29,10 @@ export const BackgroundImage = styled(ImageBackground)(({ theme, largeAndUp }) =
     borderRadius: theme.border.radius[largeAndUp ? '2xl' : 'lg'],
     overflow: 'hidden',
 }));
-export const TappableWrapper = styled(Pressable)(({ theme, focused, largeAndUp }) => ({
-    backgroundColor: 'transparent',
-    borderColor: focused ? theme.color.outline.outer : 'transparent',
-    borderWidth: theme.border.width.md,
-    borderRadius: largeAndUp ? 26 : theme.border.radius.xl,
-    padding: theme.space[50],
+export const TappableWrapper = styled(View)(({ theme, focused, tappable, largeAndUp }) => (Object.assign(Object.assign({}, (tappable && {
     shadowColor: '#000',
     shadowOffset: { width: 0, height: theme.space[100] },
     shadowOpacity: 0.1,
     shadowRadius: theme.space[250],
     elevation: theme.space[150],
-}));
+})), { backgroundColor: 'transparent', borderColor: focused ? theme.color.outline.outer : 'transparent', borderWidth: theme.border.width.md, borderRadius: largeAndUp ? 26 : theme.border.radius.xl, padding: theme.space[50] })));

package/dist/esm/components/Cards/BalanceCard/BalanceCard.styles.js

@@ -70,10 +70,10 @@ export const CreditContainer = styled(View)(({ theme }) => ({
     paddingBottom: theme.space[200],
 }));
 export const StyledDisplay4 = styled(Display4)(({ theme }) => ({
-    lineHeight: theme.font.lineHeight.d3.mediaQuery.sm,
+    lineHeight: `${theme.font.lineHeight.d3.mediaQuery.sm}px`,
 }));
 export const StyledHeading1 = styled(Heading1)(({ theme }) => ({
-    lineHeight: theme.font.lineHeight.d4.mediaQuery.sm,
+    lineHeight: `${theme.font.lineHeight.d4.mediaQuery.sm}px`,
 }));
 export const ErrorContainer = styled(View)(({ theme }) => ({
     flexDirection: 'column',

package/dist/esm/components/Cards/DisruptiveCard/DisruptiveCard.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Heading2, Heading3, Icon, P, Stack } from '../..';
+import { useTheme } from '../../../styled.native';
+import { checkIsSmall } from '../utils';
+import { CardDisruptive } from './DisruptiveCard.styles';
+const CARD_ICONS = {
+    success: 'check-circle',
+    info: 'info',
+    warning: 'info',
+};
+const getVariantStyles = (variant, theme) => {
+    switch (variant) {
+        case 'success':
+            return {
+                iconTextColor: theme.color.alert.success,
+                background: theme.color.brand.bright,
+            };
+        case 'info':
+            return {
+                iconTextColor: theme.color.alert.info,
+                background: theme.color.alert.infoTint,
+            };
+        case 'warning':
+        default:
+            return {
+                iconTextColor: theme.color.alert.warning,
+                background: theme.color.alert.warningTint,
+            };
+    }
+};
+const DisruptiveHeading = ({ heading, size = 'default', color, }) => {
+    const HeadingComponent = checkIsSmall(size) ? Heading3 : Heading2;
+    const headingStyle = useMemo(() => ({ color }), [color]);
+    return _jsx(HeadingComponent, { style: headingStyle, children: heading });
+};
+export const DisruptiveCard = ({ variant = 'success', icon, heading, subHeading, size = 'default', }) => {
+    const theme = useTheme();
+    const { iconTextColor, background } = getVariantStyles(variant, theme);
+    return (_jsx(CardDisruptive, { background: background, isSmall: true, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsx(Icon, { name: icon !== null && icon !== void 0 ? icon : CARD_ICONS[variant], size: 32, color: iconTextColor }), _jsx(DisruptiveHeading, { color: iconTextColor, heading: heading, size: size }), subHeading && !checkIsSmall(size) && (_jsx(P, { style: { color: iconTextColor }, children: subHeading }))] }) }));
+};

package/dist/esm/components/Cards/DisruptiveCard/DisruptiveCard.styles.js

@@ -0,0 +1,5 @@
+import styled from '../../../styled.native';
+import { CardWithMinHeight } from '../shared.styles';
+export const CardDisruptive = styled(CardWithMinHeight)({
+    justifyContent: 'flex-end',
+});

package/dist/esm/components/Cards/DisruptiveCard/index.js

@@ -0,0 +1 @@
+export * from './DisruptiveCard';