@ovotech/element-native 5.4.2 → 5.4.3-canary-8992fd2-429

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

@@ -0,0 +1,50 @@
+import { View } from 'react-native';
+import styled from '../../../styled.native';
+import { Card } from '../../Card';
+import { Heading2, Heading4 } from '../../Heading';
+import { P } from '../../P';
+import { SmallCardHeight } from '../shared';
+export const CardWithIconData = styled(Card)(({ isSmall }) => ({
+    minHeight: isSmall ? SmallCardHeight : undefined,
+}));
+export const HeadingContainer = styled(View)(({ theme }) => ({
+    marginBottom: theme.space[350],
+}));
+export const ValuesWrapper = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    gap: theme.space[300],
+}));
+export const ValueContainer = styled(View)(({ isSmall, theme }) => ({
+    width: isSmall ? undefined : '50%',
+    gap: theme.space[100],
+}));
+export const MetricsContainer = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: theme.space[100],
+}));
+export const SubMetricsContainer = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    marginBottom: theme.space[25],
+    gap: theme.space[100],
+}));
+export const IconContainer = styled(View)(({ theme }) => ({
+    borderRadius: theme.border.radius['2xl'],
+    backgroundColor: theme.color.surface.surface,
+    paddingVertical: theme.space[200],
+    paddingHorizontal: theme.space[100],
+    width: theme.space[600],
+    height: theme.space[600],
+    flexShrink: 0,
+    justifyContent: 'center',
+}));
+export const Metric = styled(Heading2)(({ theme }) => ({
+    color: theme.color.surface.onSurface,
+}));
+export const SubMetric = styled(Heading4)(({ theme }) => ({
+    lineHeight: theme.font.lineHeight['3xl'].mediaQuery.sm,
+}));
+export const StyledP = styled(P)(({ theme }) => ({
+    lineHeight: theme.font.lineHeight.md.mediaQuery.sm,
+}));

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '../../../styled.native';
+import { Heading2, Heading4 } from '../../Heading';
+import { Icon } from '../../Icon';
+import { resolveColor } from '../shared';
+import { CardWithIconText, Subtitle, TextContainer, TitleContainer, } from './IconTextCard.styles';
+export const IconTextCard = ({ icon, title, subTitle, size = 'default', }) => {
+    const isSmall = size === 'small';
+    const theme = useTheme();
+    const titleLineHeight = theme.font.lineHeight[isSmall ? 'lg' : '3xl'].mediaQuery.sm;
+    const renderTitle = () => {
+        if (!title)
+            return null;
+        const HeadingComponent = isSmall ? Heading4 : Heading2;
+        if (typeof title === 'string') {
+            return (_jsx(HeadingComponent, { style: { lineHeight: titleLineHeight }, children: title }));
+        }
+        return (_jsx(_Fragment, { children: title.map(segment => (_jsx(HeadingComponent, { style: {
+                    color: resolveColor(segment.color),
+                    lineHeight: titleLineHeight,
+                    marginRight: isSmall ? 3 : 4,
+                }, children: segment.text }, segment.text))) }));
+    };
+    return (_jsxs(CardWithIconText, { isSmall: isSmall, children: [_jsx(Icon, { name: icon, size: 24 }), _jsxs(TextContainer, { isSmall: isSmall, children: [_jsx(TitleContainer, { children: renderTitle() }), !isSmall && subTitle && _jsx(Subtitle, { children: subTitle })] })] }));
+};

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

@@ -0,0 +1,25 @@
+import { View } from 'react-native';
+import styled from '../../../styled.native';
+import { Card } from '../../Card/Card';
+import { P } from '../../P';
+import { SmallCardHeight } from '../shared';
+export const CardWithIconText = styled(Card)(({ isSmall, theme }) => ({
+    minHeight: isSmall ? SmallCardHeight : undefined,
+    gap: theme.space[600],
+}));
+export const TextContainer = styled(View)(({ isSmall }) => ({
+    flex: isSmall ? 1 : undefined,
+    justifyContent: 'flex-end',
+}));
+export const TitleContainer = styled(View)(({ theme }) => ({
+    marginRight: theme.space[50],
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+}));
+export const Subtitle = styled(P)(({ theme }) => ({
+    color: theme.color.surface.onSurface,
+    fontSize: theme.font.size.md.mediaQuery.lg,
+    lineHeight: theme.font.lineHeight.md.mediaQuery.lg,
+    fontWeight: 450,
+    marginTop: '8px',
+}));

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image, View } from 'react-native';
+import { Strong } from '../..';
+import { CardBadge, CardWithLinkText, ImageContent, Subtitle, TextContent, Title, } from './LinkTextCard.styles';
+export const LinkTextCard = ({ image, badge, title, subtitle, size, onPress, }) => {
+    const isSmall = size === 'small';
+    const hasBadge = !!badge;
+    const CardContent = (_jsxs(CardWithLinkText, { isSmall: isSmall, hasBadge: hasBadge, onPress: onPress, children: [_jsxs(TextContent, { isSmall: isSmall, children: [_jsx(View, { children: _jsx(Title, { isSmall: isSmall, children: _jsx(Strong, { children: title }) }) }), !isSmall && (_jsx(View, { children: _jsx(Subtitle, { children: subtitle }) }))] }), _jsx(ImageContent, { children: _jsx(Image, { source: image
+                        ? image
+                        : {
+                            uri: 'https://www.ovobyus.com/transform/eed55bf8-f059-4acb-a043-2d0a6d12537f/homepage-supporting-house-image',
+                        }, resizeMode: "contain", style: { width: '100%', height: '100%' } }) })] }));
+    if (!hasBadge) {
+        return CardContent;
+    }
+    return (_jsxs(View, { style: { position: 'relative' }, children: [_jsx(CardBadge, { variant: "success", children: badge }), CardContent] }));
+};

package/dist/esm/components/Cards/ProgressBarCard/ProgressBar/EPCBar.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { EPCBarMarkerLayer, EPCBarSegment, ProgressBarContainer, ProgressBarWrapper, } from '../ProgressBarCard.styles';
+import { Marker1, Marker2 } from './EPCMarkers';
+const EPC_BANDS = [
+    { letter: 'G', min: 0, max: 20, color: '#E21D38' },
+    { letter: 'F', min: 21, max: 38, color: '#E55B2B' },
+    { letter: 'E', min: 39, max: 54, color: '#EA7E24' },
+    { letter: 'D', min: 55, max: 68, color: '#F0C119' },
+    { letter: 'C', min: 69, max: 80, color: '#85BB41' },
+    { letter: 'B', min: 81, max: 91, color: '#12A652' },
+    { letter: 'A', min: 92, max: 100, color: '#007D55' },
+];
+const MIN_SCORE = EPC_BANDS[0].min;
+const MAX_SCORE = EPC_BANDS[EPC_BANDS.length - 1].max;
+const BAND_WIDTH = 100 / EPC_BANDS.length;
+const scoreToPositionPercent = (rawScore) => {
+    if (Number.isNaN(rawScore) || rawScore < MIN_SCORE || rawScore > MAX_SCORE) {
+        return null;
+    }
+    const bandIndex = EPC_BANDS.findIndex(band => rawScore >= band.min && rawScore <= band.max);
+    const band = EPC_BANDS[bandIndex];
+    let fractionWithinBand;
+    if (band.max === band.min) {
+        fractionWithinBand = 1;
+    }
+    else {
+        const denom = band.max - band.min;
+        fractionWithinBand = (rawScore - band.min) / denom;
+    }
+    return (bandIndex + fractionWithinBand) * BAND_WIDTH;
+};
+const positionMarker = (score, translate) => {
+    const position = scoreToPositionPercent(score);
+    if (position === null)
+        return null;
+    return {
+        position: 'absolute',
+        left: `${position}%`,
+        top: '50%',
+        transform: [{ translateX: -translate }, { translateY: -translate }],
+    };
+};
+export const EPCBar = ({ marker1, marker2 }) => {
+    const marker1Style = positionMarker(marker1.value, 4);
+    const marker2Style = marker2 ? positionMarker(marker2.value, 5) : null;
+    return (_jsxs(ProgressBarWrapper, { children: [_jsx(ProgressBarContainer, { children: EPC_BANDS.map(band => (_jsx(EPCBarSegment, { style: { flex: 1, backgroundColor: band.color } }, band.letter))) }), _jsxs(EPCBarMarkerLayer, { children: [marker1Style && (_jsx(View, { style: marker1Style, children: _jsx(Marker1, {}) })), marker2 && marker2Style && (_jsx(View, { style: marker2Style, children: _jsx(Marker2, {}) }))] })] }));
+};

package/dist/esm/components/Cards/ProgressBarCard/ProgressBar/EPCMarkers.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Circle, ClipPath, Defs, G, Path, Rect } from 'react-native-svg';
+import { useTheme } from '../../../../styled.native';
+export const Marker1 = () => {
+    const theme = useTheme();
+    return (_jsx(Svg, { width: theme.space[200], height: theme.space[200], viewBox: "0 0 8 8", fill: "none", children: _jsx(Circle, { cx: "4", cy: "4", r: "4", fill: theme.color.green[80] }) }));
+};
+export const Marker2 = () => {
+    const theme = useTheme();
+    return (_jsxs(Svg, { width: theme.space[250], height: theme.space[250], viewBox: "0 0 10 10", fill: "none", children: [_jsx(G, { clipPath: "url(#clip0_23708_1077)", children: _jsx(Path, { d: "M8.92 5.78L9.9 5.97C9.96 5.65 10 5.33 10 5H8C8 5.2 7.98 5.4 7.94 5.59L8.92 5.78ZM7.22 8.33L7.78 9.16C8.32 8.8 8.79 8.33 9.16 7.78L8.33 7.22L7.5 6.66C7.28 6.99 7 7.27 6.67 7.49L7.23 8.32L7.22 8.33ZM5 9V10C5.33 10 5.66 9.97 5.97 9.9L5.78 8.92L5.59 7.94C5.4 7.98 5.21 8 5 8V9ZM4.22 8.92L4.03 9.9C4.35 9.96 4.67 10 5 10V8C4.8 8 4.6 7.98 4.41 7.94L4.22 8.92ZM1.67 7.22L0.84 7.78C1.2 8.32 1.67 8.79 2.22 9.16L2.78 8.33L3.34 7.5C3.01 7.28 2.73 7 2.51 6.67L1.68 7.23L1.67 7.22ZM1 5H0C0 5.33 0.03 5.66 0.1 5.97L1.08 5.78L2.06 5.59C2.02 5.4 2 5.21 2 5H1ZM1.08 4.22L0.1 4.03C0.04 4.35 0 4.67 0 5H2C2 4.8 2.02 4.6 2.06 4.41L1.08 4.22ZM2.78 1.67L2.22 0.84C1.68 1.2 1.21 1.67 0.84 2.22L1.67 2.78L2.5 3.34C2.72 3.01 3 2.73 3.33 2.51L2.77 1.68L2.78 1.67ZM5 1V0C4.67 0 4.34 0.03 4.03 0.1L4.22 1.08L4.41 2.06C4.6 2.02 4.79 2 5 2V1ZM5.78 1.08L5.97 0.1C5.65 0.04 5.33 0 5 0V2C5.2 2 5.4 2.02 5.59 2.06L5.78 1.08ZM8.33 2.78L9.16 2.22C8.8 1.68 8.33 1.21 7.78 0.84L7.22 1.67L6.66 2.5C6.99 2.72 7.27 3 7.49 3.33L8.32 2.77L8.33 2.78ZM9 5H10C10 4.67 9.97 4.34 9.9 4.03L8.92 4.22L7.94 4.41C7.98 4.6 8 4.79 8 5H9Z", fill: theme.color.green[80] }) }), _jsx(Defs, { children: _jsx(ClipPath, { id: "clip0_23708_1077", children: _jsx(Rect, { width: "10", height: "10", fill: "white" }) }) })] }));
+};

package/dist/esm/components/Cards/ProgressBarCard/ProgressBar/ValueBar.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { useTheme } from '../../../../styled.native';
+import { ProgressBarContainer, ProgressBarWrapper, ValueBarRemainder, } from '../ProgressBarCard.styles';
+const clampToNonNegative = (n) => Math.max(0, n);
+export const ValueBar = ({ value1, value2 }) => {
+    const theme = useTheme();
+    const hasSecond = !!value2;
+    const value1Flex = clampToNonNegative(value1 !== null && value1 !== void 0 ? value1 : 0);
+    const value2Flex = hasSecond ? clampToNonNegative(value2) : 0;
+    if (hasSecond && value1Flex + value2Flex > 0) {
+        return (_jsx(ProgressBarWrapper, { children: _jsxs(ProgressBarContainer, { children: [_jsx(View, { style: {
+                            flex: value1Flex,
+                            backgroundColor: theme.color.brand.brand,
+                        } }), _jsx(View, { style: {
+                            flex: value2Flex,
+                            backgroundColor: theme.color.surface.onSurface,
+                        } })] }) }));
+    }
+    return (_jsx(ProgressBarWrapper, { children: _jsxs(ProgressBarContainer, { children: [_jsx(View, { style: {
+                        flex: value1Flex,
+                        backgroundColor: theme.color.brand.brand,
+                    } }), _jsx(ValueBarRemainder, { style: { flex: 100 - value1Flex } })] }) }));
+};

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { View } from 'react-native';
+import { Heading2, Heading4, P, Strong } from '../..';
+import { useTheme } from '../../../styled.native';
+import { resolveColor } from '../shared';
+import { EPCBar } from './ProgressBar/EPCBar';
+import { Marker1, Marker2 } from './ProgressBar/EPCMarkers';
+import { ValueBar } from './ProgressBar/ValueBar';
+import { CardWithProgressBar, HeadingContainer, StyledP, ValueBlockWrapper, ValuesContainer, ValueTextContainer, ValueWrapper, } from './ProgressBarCard.styles';
+const ValueText1 = ({ text }) => {
+    if (!text)
+        return null;
+    if (typeof text === 'string') {
+        return _jsx(Heading2, { children: text });
+    }
+    return (_jsx(_Fragment, { children: text.map((segment, index) => (_jsx(Heading2, { style: { color: resolveColor(segment.color) }, children: segment.text }, `${index}-${segment.text}`))) }));
+};
+const ValueText2 = ({ text2, hasEPCBar }) => {
+    if (!text2)
+        return null;
+    const { text, color } = typeof text2 === 'string'
+        ? { text: text2, color: 'default' }
+        : { text: text2.text, color: text2.color };
+    const resolvedColor = resolveColor(color);
+    return (_jsx(ValueTextContainer, { children: _jsxs(Heading4, { style: { color: resolvedColor }, children: ["(", text, hasEPCBar && ' points', ")"] }) }));
+};
+const ValueBlockComponent = ({ value, value2, size, hasEPCBar, markerType, }) => {
+    const showMarker = value.subtext && hasEPCBar;
+    const isSmall = size === 'small';
+    const theme = useTheme();
+    return (_jsxs(ValueWrapper, { isSmall: isSmall, hasValue2: !!value2, children: [_jsxs(ValuesContainer, { children: [_jsx(ValueText1, { text: value.text }), _jsx(ValueText2, { text2: value.text2, hasEPCBar: hasEPCBar })] }), _jsxs(View, { style: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: theme.space[150],
+                }, children: [showMarker && markerType === 'marker1' && _jsx(Marker1, {}), showMarker && markerType === 'marker2' && _jsx(Marker2, {}), value.subtext && _jsx(P, { children: value.subtext })] })] }));
+};
+const ValueBlock = React.memo(ValueBlockComponent);
+export const ProgressBarCard = ({ heading, subheading, progressBar, value, value2, size, }) => {
+    const isSmall = size === 'small';
+    const isEpc = progressBar.variant === 'epc';
+    const isValueBar = progressBar.variant === 'value';
+    return (_jsxs(CardWithProgressBar, { isSmall: isSmall, children: [_jsxs(HeadingContainer, { children: [_jsx(StyledP, { children: _jsx(Strong, { children: heading }) }), _jsx(P, { size: "sm", children: subheading })] }), _jsxs(View, { children: [isEpc && (_jsx(EPCBar, { marker1: { value: progressBar.data }, marker2: progressBar.data2 ? { value: progressBar.data2 } : undefined })), isValueBar && (_jsx(ValueBar, { value1: progressBar.data, value2: progressBar.data2 })), _jsxs(ValueBlockWrapper, { children: [_jsx(ValueBlock, { value: value, value2: value2, hasEPCBar: isEpc, markerType: "marker1", size: size }), value2 && !isSmall && (_jsx(ValueBlock, { value: value2, hasEPCBar: isEpc, markerType: "marker2" }))] })] })] }));
+};

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

@@ -0,0 +1,58 @@
+import { View } from 'react-native';
+import { Card } from '../..';
+import styled from '../../../styled.native';
+import { P } from '../../P';
+import { SmallCardHeight } from '../shared';
+export const CardWithProgressBar = styled(Card)(({ isSmall }) => ({
+    minHeight: isSmall ? SmallCardHeight : undefined,
+    justifyContent: 'space-between',
+}));
+export const HeadingContainer = styled(View)(({ theme }) => ({
+    marginBottom: theme.space[350],
+}));
+export const ValueBlockWrapper = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    gap: theme.space[300],
+}));
+export const ValueWrapper = styled(View)(({ isSmall, hasValue2, theme }) => ({
+    width: isSmall || !hasValue2 ? undefined : '50%',
+    gap: theme.space[100],
+}));
+export const ValuesContainer = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: theme.space[100],
+}));
+export const ValueTextContainer = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    marginBottom: theme.space[25],
+}));
+export const StyledP = styled(P)(({ theme }) => ({
+    lineHeight: theme.font.lineHeight.md.mediaQuery.sm,
+}));
+// EPC/Value Bar styles
+export const ProgressBarWrapper = styled(View)(({ theme }) => ({
+    width: '100%',
+    height: theme.space[800],
+    justifyContent: 'center',
+}));
+export const ProgressBarContainer = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    height: theme.space[100],
+    borderRadius: theme.border.radius.sm,
+    overflow: 'hidden',
+}));
+export const EPCBarMarkerLayer = styled(View)({
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+});
+export const EPCBarSegment = styled(View)({
+    flex: 1,
+});
+export const ValueBarRemainder = styled(View)(({ theme }) => ({
+    backgroundColor: theme.color.surface.dim,
+}));

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

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

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

@@ -0,0 +1,6 @@
+export { AccountCard } from './AccountCard';
+export { BalanceCard } from './BalanceCard';
+export { IconDataCard } from './IconDataCard';
+export { IconTextCard } from './IconTextCard';
+export { LinkTextCard } from './LinkTextCard';
+export { ProgressBarCard } from './ProgressBarCard';

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

@@ -0,0 +1,12 @@
+import { useTheme } from '../../styled.native';
+export const SmallCardHeight = 172;
+export const resolveColor = (colorKey = 'default') => {
+    const theme = useTheme();
+    if (colorKey === 'default' || !colorKey) {
+        return theme.color.brand.brand;
+    }
+    if (colorKey === 'onSurface') {
+        return theme.color.surface.onSurface;
+    }
+    return colorKey;
+};

package/dist/esm/components/Checkbox/Checkbox.js

@@ -0,0 +1,71 @@
+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 { numToPx } from '@ovotech/element-core';
+import { TouchableOpacity, View, } from 'react-native';
+import styled from '../../styled.native';
+import { ErrorText } from '../ErrorText';
+import { FormGroup } from '../FormGroup';
+import { HintText } from '../HintText';
+import { Icon } from '../Icon/Icon';
+import { LabelText } from '../LabelText';
+import { Stack } from '../Stack';
+const StyledCheckboxInputWrapper = styled.View(({ theme }) => {
+    const checkboxSize = theme.space[600];
+    const gap = theme.space[200];
+    return `
+      width: ${numToPx(checkboxSize + gap)};
+      height: ${numToPx(theme.space[1100])};
+    `;
+});
+const StyledCheckboxInput = styled.View(({ theme, invalid, checked }) => {
+    return `
+      width: ${numToPx(theme.space[600])};
+      height: ${numToPx(theme.space[600])};
+      border: ${numToPx(theme.border.width.md)} solid;
+      margin-top: 10px;
+      border-radius: ${numToPx(theme.border.radius.xs)};
+      border-color: ${invalid
+        ? theme.input.color.borderError
+        : checked
+            ? theme.input.color.selected
+            : theme.input.color.border};
+      background: ${checked ? theme.input.color.selectedTint : 'transparent'};
+    `;
+});
+const CheckboxCheck = (props) => {
+    return _jsx(Icon, Object.assign({ name: "check", size: 16 }, props));
+};
+const StyledCheckboxInputCheck = styled(CheckboxCheck)(({ theme, checked, }) => {
+    return `
+      margin-top: ${numToPx(theme.space[50])};
+      margin-left: ${numToPx(theme.space[50])};
+      color: ${theme.color.alert.info};
+      opacity: ${checked ? 1 : 0};
+    `;
+});
+const Input = (_a) => {
+    var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
+    return (_jsx(StyledCheckboxInputWrapper, Object.assign({}, rest, { children: _jsx(StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledCheckboxInputCheck, { checked: checked }) }) })));
+};
+const CheckLabelText = styled(LabelText)(({ theme }) => `
+    padding-top: ${numToPx(theme.space[300])};
+  `);
+const StyledWrapper = styled.View `
+  flex-direction: row;
+`;
+const Checkbox = (_a) => {
+    var { label, hint, error, checked, optional, invalid, activeOpacity = 0.8, testID, ref } = _a, rest = __rest(_a, ["label", "hint", "error", "checked", "optional", "invalid", "activeOpacity", "testID", "ref"]);
+    const hasError = !!error;
+    return (_jsx(FormGroup, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [error ? _jsx(ErrorText, { children: error }) : null, _jsx(TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: _jsxs(StyledWrapper, { children: [_jsx(Input, { checked: checked, invalid: hasError || invalid, testID: testID }), _jsxs(View, { style: { flexShrink: 1 }, children: [_jsxs(CheckLabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null] })] }) }))] }) }));
+};
+export { Checkbox };

package/dist/esm/components/Checkbox/CheckboxField.js

@@ -0,0 +1,29 @@
+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 { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, } from 'react';
+import { View } from 'react-native';
+import { getValidChildren } from '../../utils';
+import { ErrorText } from '../ErrorText';
+import { FormGroup } from '../FormGroup';
+import { HintText } from '../HintText';
+import { LabelText } from '../LabelText';
+import { Stack } from '../Stack';
+const CheckboxField = (_a) => {
+    var { label, hint, error, children, optional = false } = _a, rest = __rest(_a, ["label", "hint", "error", "children", "optional"]);
+    const hasError = !!error;
+    const validChildren = getValidChildren(children);
+    return (_jsx(FormGroup, Object.assign({}, rest, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsx(View, { children: Children.map(validChildren, (child) => cloneElement(child, {
+                        invalid: hasError ? true : child.props.invalid,
+                    })) })] }) })));
+};
+export { CheckboxField };

package/dist/esm/components/CurrencyField/CurrencyField.js

@@ -0,0 +1,18 @@
+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 } from "react/jsx-runtime";
+import { CurrencyInput } from '../CurrencyInput';
+import { Field } from '../Field';
+export const CurrencyField = (_a) => {
+    var { ref } = _a, props = __rest(_a, ["ref"]);
+    return (_jsx(Field, Object.assign({ affixWidth: 40 }, props, { children: _jsx(CurrencyInput, { ref: ref }) })));
+};

package/dist/esm/components/CurrencyInput/CurrencyInput.js

@@ -0,0 +1,23 @@
+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 } from "react/jsx-runtime";
+import { createRef } from 'react';
+import { mergeRefs } from '../../utils';
+import { NumberInput } from '../NumberInput';
+const CurrencyInput = (_a) => {
+    var { currency = 'GBP', invalid, accessibilityLabel = '', ref } = _a, rest = __rest(_a, ["currency", "invalid", "accessibilityLabel", "ref"]);
+    const inputRef = createRef();
+    const updatedAccessibilityLabel = `${accessibilityLabel} ${currency === 'GBP' ? 'pounds' : currency === 'EUR' ? 'euro' : 'dollar'}`.trim();
+    const iconName = currency === 'GBP' ? 'pound' : currency === 'EUR' ? 'euro' : 'dollar';
+    return (_jsx(NumberInput, Object.assign({ accessibilityLabel: updatedAccessibilityLabel, invalid: invalid, iconLeft: iconName, ref: mergeRefs(ref, inputRef) }, rest)));
+};
+export { CurrencyInput };

package/dist/esm/components/DataTable/DataTable.js

@@ -0,0 +1,31 @@
+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 { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isElement as isReactElement } from 'react-is';
+import { ScrollView } from 'react-native';
+import { useBreakpoint } from '../../hooks';
+import { getText } from '../../utils';
+import { TableRow } from './TableRow';
+import { StyledTableContainer, TableBody, TableCaption, TableCaptionText, TableHeader, TableHeaderText, TableRowHeading, } from './styles';
+export const DataTable = (_a) => {
+    var { items, columnHeadings, caption, rowHeadings, columnWidths, striped = true, ref } = _a, rest = __rest(_a, ["items", "columnHeadings", "caption", "rowHeadings", "columnWidths", "striped", "ref"]);
+    const breakpoints = useBreakpoint();
+    const columnLabel = columnHeadings
+        ? ` ${columnHeadings.length} columns,`
+        : '';
+    const accessibilityLabelText = isReactElement(caption)
+        ? getText(caption)
+        : caption;
+    const accessibilityLabel = `data table,${columnLabel} ${items.length} rows, ${accessibilityLabelText}`;
+    return (_jsx(ScrollView, { horizontal: true, alwaysBounceHorizontal: false, contentContainerStyle: { flexGrow: 1 }, children: _jsxs(StyledTableContainer, Object.assign({}, rest, { ref: ref, children: [caption ? (_jsx(TableCaption, Object.assign({}, breakpoints, { children: isReactElement(caption) ? (caption) : (_jsx(TableCaptionText, Object.assign({}, breakpoints, { accessibilityLabel: accessibilityLabel, children: caption }))) }))) : null, columnHeadings ? (_jsx(TableRowHeading, { children: columnHeadings.map((columnHeading, index) => (_createElement(TableHeader, Object.assign({}, breakpoints, { key: index, cellWidth: columnWidths[index] }), isReactElement(columnHeading) ? (columnHeading) : (_jsx(TableHeaderText, Object.assign({}, breakpoints, { children: columnHeading })))))) })) : null, _jsx(TableBody, { children: items.map((rowData, index) => (_jsx(TableRow, { data: rowData, index: index, rowHeadings: rowHeadings, columnWidths: columnWidths, striped: striped }, index))) })] })) }));
+};

package/dist/esm/components/DataTable/TableRow.js

@@ -0,0 +1,21 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isElement as isReactElement } from 'react-is';
+import { Dimensions } from 'react-native';
+import { useBreakpoint } from '../../hooks';
+import { CellText, RowHeading, SeparatorRowText, StyledSeparatorRow, TableRow as StyledTableRow, TableCell, TableHeaderText, } from './styles';
+export const TableRow = ({ data, index, striped, rowHeadings, columnWidths, }) => {
+    const breakpoints = useBreakpoint();
+    const cells = data.map((cellData, i) => {
+        if (typeof cellData === 'object' &&
+            (cellData === null || cellData === void 0 ? void 0 : cellData.hasOwnProperty('isSeparator')) &&
+            (cellData === null || cellData === void 0 ? void 0 : cellData.hasOwnProperty('content'))) {
+            return (_jsx(StyledSeparatorRow, { testID: "separatorRow", width: Dimensions.get('window').width, children: _jsx(SeparatorRowText, Object.assign({}, breakpoints, { children: cellData === null || cellData === void 0 ? void 0 : cellData.content })) }, i));
+        }
+        if (rowHeadings && i === 0) {
+            return (_createElement(RowHeading, Object.assign({}, breakpoints, { key: i, testID: "rowHeader", cellWidth: columnWidths[i] }), isReactElement(cellData) ? (cellData) : (_jsx(TableHeaderText, Object.assign({}, breakpoints, { children: cellData })))));
+        }
+        return (_createElement(TableCell, Object.assign({}, breakpoints, { key: i, testID: "cell", cellWidth: columnWidths[i] }), isReactElement(cellData) ? (cellData) : (_jsx(CellText, Object.assign({}, breakpoints, { children: cellData })))));
+    });
+    return (_jsx(StyledTableRow, { stripe: striped && index % 2 === 0, children: cells }));
+};

package/dist/esm/components/DateField/DateField.js

@@ -0,0 +1,65 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useRef } from 'react';
+import { TouchableWithoutFeedback, View } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { getText, mergeRefs } from '../../utils';
+import { ErrorText } from '../ErrorText';
+import { FormGroup } from '../FormGroup';
+import { HintText } from '../HintText';
+import { LabelText } from '../LabelText';
+import { NumberInput } from '../NumberInput';
+import { Stack } from '../Stack';
+import { SubLabelText } from '../SubLabelText';
+const InlineFields = styled.View(({ stretch, theme }) => {
+    const margin = numToPx(theme.space[100]);
+    return css `
+    margin-left: -${margin};
+    margin-right: -${margin};
+    flex-direction: row;
+    ${stretch ? '' : `width: 265px;`}
+  `;
+});
+const SubField = styled(Stack)(({ theme }) => {
+    const padding = numToPx(theme.space[100]);
+    return css `
+    padding-right: ${padding};
+    padding-left: ${padding};
+  `;
+});
+const DayField = styled(SubField) `
+  width: 25%;
+`;
+const MonthField = styled(SubField) `
+  width: 25%;
+`;
+const YearField = styled(SubField) `
+  width: 50%;
+`;
+export const DateField = ({ label, hint, error, optional = false, fullWidth = false, onChange, value, testID, editable = true, autoFocusNext = true, ref, }) => {
+    const hasError = !!error;
+    const dayRef = useRef(null);
+    const monthRef = useRef(null);
+    const yearRef = useRef(null);
+    const nextFieldRef = {
+        day: monthRef,
+        month: yearRef,
+    };
+    const handleChange = (key) => (datePartValue) => {
+        onChange &&
+            onChange(Object.assign(Object.assign({}, value), { [key]: datePartValue }));
+        if (key !== 'year' && autoFocusNext) {
+            const nextField = nextFieldRef[key].current;
+            if (nextField && datePartValue.length === 2) {
+                nextField.focus();
+            }
+        }
+    };
+    const accessibilityLabel = (labelText) => [labelText, getText(hint), getText(error)].filter(Boolean).join(', ');
+    const focusRef = (internalRef) => () => {
+        if (internalRef.current) {
+            internalRef.current.focus();
+        }
+    };
+    return (_jsx(FormGroup, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsxs(InlineFields, { stretch: fullWidth, children: [_jsxs(DayField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(dayRef), accessible: false, children: _jsx(SubLabelText, { children: "Day" }) }), _jsx(NumberInput, { ref: mergeRefs(dayRef, ref), accessibilityLabel: accessibilityLabel('Day'), invalid: hasError, value: value.day, onChangeText: handleChange('day'), testID: testID, stretch: true, editable: editable, maxLength: 2 })] }), _jsxs(MonthField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(monthRef), accessible: false, children: _jsx(SubLabelText, { children: "Month" }) }), _jsx(NumberInput, { ref: monthRef, accessibilityLabel: accessibilityLabel('Month'), invalid: hasError, value: value.month, onChangeText: handleChange('month'), testID: `${testID}-month`, stretch: true, editable: editable, maxLength: 2 })] }), _jsxs(YearField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(yearRef), accessible: false, children: _jsx(SubLabelText, { children: "Year" }) }), _jsx(NumberInput, { ref: yearRef, accessibilityLabel: accessibilityLabel('Year'), invalid: hasError, value: value.year, onChangeText: handleChange('year'), testID: `${testID}-year`, stretch: true, editable: editable, maxLength: 4 })] })] })] }) }));
+};