@ovotech/element-native 5.4.0 → 5.4.1

package/dist/esm/components/CTAButton/CTAButton.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+import { Icon } from '../Icon/Icon';
+const StyledCTAWrapper = styled.TouchableOpacity `
+  align-self: flex-start;
+  flex-direction: row;
+  align-items: flex-start;
+`;
+const CTAButtonWrapper = ({ children, accessibilityRole = 'button', activeOpacity = 0.8, ...rest }) => (_jsx(StyledCTAWrapper, { accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity, ...rest, children: children }));
+const StyledInner = styled.View(({ theme: { core, component }, fullWidth, variant, inverted }) => {
+    const currentVariant = component.cta[variant];
+    const borderRadius = core.space[11] / 2 + 'px';
+    const backgroundColor = variant === 'secondary'
+        ? 'transparent'
+        : inverted
+            ? currentVariant.surfaceInverted
+            : currentVariant.surface;
+    const borderColor = inverted
+        ? core.color.brand.white
+        : core.color.brand.forest;
+    return css `
+    padding: ${numToPx(core.space[2])} ${numToPx(core.space[4])};
+    background-color: ${backgroundColor};
+    border-radius: ${borderRadius};
+    min-height: ${numToPx(core.space[11])};
+    border: ${variant === 'secondary'
+        ? `solid ${numToPx(core.borderWidth.small)} ${borderColor}`
+        : 'none'};
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    flex-grow: ${fullWidth ? '1' : '0'};
+  `;
+});
+const StyledRightIcon = styled(Icon)(({ theme: { core, component }, variant, inverted }) => {
+    const currentVariant = component.cta[variant];
+    const color = inverted
+        ? currentVariant.messageInverted
+        : currentVariant.message;
+    return css `
+    margin-left: ${numToPx(core.space[1])};
+    color: ${color};
+  `;
+});
+const StyledLeftIcon = styled(Icon)(({ theme: { core, component }, variant, inverted }) => {
+    const currentVariant = component.cta[variant];
+    const color = inverted
+        ? currentVariant.messageInverted
+        : currentVariant.message;
+    return css `
+    margin-right: ${numToPx(core.space[1])};
+    color: ${color};
+  `;
+});
+const StyledCTAButtonText = styled.Text(({ theme: { core, component }, smallAndUp, variant, inverted }) => {
+    const fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    const currentVariant = component.cta[variant];
+    const color = inverted
+        ? currentVariant.messageInverted
+        : currentVariant.message;
+    return css `
+    color: ${color};
+    font-family: ${core.fontFamily.bodyBold.native};
+    font-size: ${numToPx(fontSize)};
+    line-height: ${numToPx(core.lineHeight.body.small)};
+    text-align: center;
+    flex-shrink: 2;
+  `;
+});
+const CTAButton = ({ iconLeft = 'off', iconRight = 'off', children, fullWidth = false, variant = 'primary', inverted = false, accessibilityRole = 'button', activeOpacity = 0.8, ref, ...rest }) => {
+    const { smallAndUp } = useBreakpoint();
+    return (_jsx(CTAButtonWrapper, { accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity, ref: ref, ...rest, children: _jsxs(StyledInner, { fullWidth: fullWidth, variant: variant, inverted: inverted, children: [iconLeft !== 'off' ? (_jsx(StyledLeftIcon, { name: iconLeft, size: 16, variant: variant, inverted: inverted })) : null, _jsx(StyledCTAButtonText, { smallAndUp: smallAndUp, variant: variant, inverted: inverted, children: children }), iconRight !== 'off' ? (_jsx(StyledRightIcon, { name: iconRight, size: 16, variant: variant, inverted: inverted })) : null] }) }));
+};
+const PrimaryCTAButton = (props) => (_jsx(CTAButton, { variant: "primary", ...props }));
+const SecondaryCTAButton = (props) => (_jsx(CTAButton, { variant: "secondary", ...props }));
+const DestructiveCTAButton = (props) => (_jsx(CTAButton, { variant: "destructive", ...props }));
+export { CTAButton, PrimaryCTAButton, SecondaryCTAButton, DestructiveCTAButton, };

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

@@ -0,0 +1 @@
+export { CTAButton, DestructiveCTAButton, PrimaryCTAButton, SecondaryCTAButton, } from './CTAButton';

package/dist/esm/components/CTALink/CTALink.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CTAButton } from '../CTAButton';
+const CTALink = (props) => _jsx(CTAButton, { ...props });
+const PrimaryCTALink = (props) => (_jsx(CTALink, { variant: "primary", ...props }));
+const SecondaryCTALink = (props) => (_jsx(CTALink, { variant: "secondary", ...props }));
+export { CTALink, PrimaryCTALink, SecondaryCTALink };

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

@@ -0,0 +1 @@
+export { CTALink, PrimaryCTALink, SecondaryCTALink } from './CTALink';

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled from '../../styled.native';
+const CardWrapper = styled.View(({ theme: { core, semantic }, inline = false, inverted = false, smallAndUp = false, }) => `
+      background: ${inverted ? semantic.inverted.surface : semantic.surface.elevated};
+      padding: ${inline
+    ? numToPx(core.space[smallAndUp ? 6 : 4])
+    : numToPx(core.space[smallAndUp ? 9 : 6])};
+      border-radius: ${inline ? numToPx(core.radius.max) : 0};
+    `);
+export const Card = ({ children, inline, inverted, ...rest }) => {
+    const { smallAndUp } = useBreakpoint();
+    return (_jsx(CardWrapper, { inline: inline, inverted: inverted, smallAndUp: smallAndUp, ...rest, children: children }));
+};

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

@@ -0,0 +1 @@
+export { Card } from './Card';

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

@@ -0,0 +1,58 @@
+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: { core } }) => {
+    const checkboxSize = core.space[6];
+    const gap = core.space[2];
+    return `
+      width: ${numToPx(checkboxSize + gap)};
+      height: ${numToPx(core.space[11])};
+    `;
+});
+const StyledCheckboxInput = styled.View(({ theme: { core, semantic }, invalid, checked }) => {
+    return `
+      width: ${numToPx(core.space[6])};
+      height: ${numToPx(core.space[6])};
+      border: ${numToPx(core.borderWidth.small)} solid;
+      margin-top: 10px;
+      border-radius: ${numToPx(core.radius.small)};
+      border-color: ${invalid
+        ? semantic.message.error
+        : checked
+            ? core.color.blue.dark
+            : semantic.border.functional};
+      background: ${checked ? core.color.blue.lightest : 'transparent'};
+    `;
+});
+const CheckboxCheck = (props) => {
+    return _jsx(Icon, { name: "check", size: 16, ...props });
+};
+const StyledCheckboxInputCheck = styled(CheckboxCheck)(({ theme: { core }, checked, }) => {
+    return `
+      margin-top: 3px;
+      margin-left: 3px;
+      color: ${core.color.blue.dark};
+      opacity: ${checked ? 1 : 0};
+    `;
+});
+const Input = ({ checked, invalid, testID, ...rest }) => {
+    return (_jsx(StyledCheckboxInputWrapper, { ...rest, children: _jsx(StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledCheckboxInputCheck, { checked: checked }) }) }));
+};
+const CheckLabelText = styled(LabelText)(({ theme: { core } }) => `
+    padding-top: ${numToPx(core.space[3])};
+  `);
+const StyledWrapper = styled.View `
+  flex-direction: row;
+`;
+const Checkbox = ({ label, hint, error, checked, optional, invalid, activeOpacity = 0.8, testID, ref, ...rest }) => {
+    const hasError = !!error;
+    return (_jsx(FormGroup, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [error ? _jsx(ErrorText, { children: error }) : null, _jsx(TouchableOpacity, { 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,17 @@
+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 = ({ label, hint, error, children, optional = false, ...rest }) => {
+    const hasError = !!error;
+    const validChildren = getValidChildren(children);
+    return (_jsx(FormGroup, { ...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/Checkbox/index.js

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export { CheckboxField } from './CheckboxField';

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CurrencyInput } from '../CurrencyInput';
+import { Field } from '../Field';
+export const CurrencyField = ({ ref, ...rest }) => {
+    return (_jsx(Field, { affixWidth: 40, ...rest, children: _jsx(CurrencyInput, { ref: ref }) }));
+};

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

@@ -0,0 +1 @@
+export { CurrencyField } from './CurrencyField';

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRef } from 'react';
+import { mergeRefs } from '../../utils';
+import { NumberInput } from '../NumberInput';
+const CurrencyInput = ({ currency = 'GBP', invalid, accessibilityLabel = '', ref, ...rest }) => {
+    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, { ...rest, invalid: invalid, accessibilityLabel: updatedAccessibilityLabel, ref: mergeRefs(ref, inputRef), iconLeft: iconName }));
+};
+export { CurrencyInput };

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

@@ -0,0 +1 @@
+export { CurrencyInput } from './CurrencyInput';

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

@@ -0,0 +1,19 @@
+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 = ({ items, columnHeadings, caption, rowHeadings, columnWidths, striped = true, ref, ...rest }) => {
+    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, { ...rest, ref: ref, children: [caption ? (_jsx(TableCaption, { ...breakpoints, children: isReactElement(caption) ? (caption) : (_jsx(TableCaptionText, { ...breakpoints, accessibilityLabel: accessibilityLabel, children: caption })) })) : null, columnHeadings ? (_jsx(TableRowHeading, { children: columnHeadings.map((columnHeading, index) => (_createElement(TableHeader, { ...breakpoints, key: index, cellWidth: columnWidths[index] }, isReactElement(columnHeading) ? (columnHeading) : (_jsx(TableHeaderText, { ...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, TableCell, TableHeaderText, TableRow as StyledTableRow, SeparatorRowText, StyledSeparatorRow, } from './styles';
+export const TableRow = ({ data, index, striped, rowHeadings, columnWidths, }) => {
+    const breakpoints = useBreakpoint();
+    const cells = data.map((cellData, i) => {
+        if (typeof cellData === 'object' &&
+            cellData?.hasOwnProperty('isSeparator') &&
+            cellData?.hasOwnProperty('content')) {
+            return (_jsx(StyledSeparatorRow, { testID: "separatorRow", width: Dimensions.get('window').width, children: _jsx(SeparatorRowText, { ...breakpoints, children: cellData?.content }) }, i));
+        }
+        if (rowHeadings && i === 0) {
+            return (_createElement(RowHeading, { ...breakpoints, key: i, testID: "rowHeader", cellWidth: columnWidths[i] }, isReactElement(cellData) ? (cellData) : (_jsx(TableHeaderText, { ...breakpoints, children: cellData }))));
+        }
+        return (_createElement(TableCell, { ...breakpoints, key: i, testID: "cell", cellWidth: columnWidths[i] }, isReactElement(cellData) ? (cellData) : (_jsx(CellText, { ...breakpoints, children: cellData }))));
+    });
+    return (_jsx(StyledTableRow, { stripe: striped && index % 2 === 0, children: cells }));
+};

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

@@ -0,0 +1,3 @@
+export { DataTable } from './DataTable';
+export * from './styles';
+export * from './types';

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

@@ -0,0 +1,100 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+export const StyledTableContainer = styled.View(({ theme: { core, semantic } }) => css `
+    flex-grow: 1;
+    border-bottom-width: ${numToPx(core.borderWidth.small)};
+    border-bottom-color: ${semantic.border.differentiated};
+  `);
+export const TableHeader = styled.View(({ theme: { core }, cellWidth, smallAndUp }) => css `
+    padding-top: ${numToPx(core.space[smallAndUp ? 3 : 2])};
+    padding-bottom: ${numToPx(core.space[smallAndUp ? 3 : 2])};
+    padding-left: ${numToPx(core.space[1])};
+    padding-right: ${numToPx(core.space[1])};
+    flex: ${cellWidth === 'auto' ? 1 : 0};
+    align-self: stretch;
+    flex-direction: row;
+    width: ${cellWidth};
+  `);
+export const TableHeaderText = styled.Text(({ theme: { semantic, core }, smallAndUp }) => css `
+    font-family: ${core.fontFamily.bodyBold.native};
+    line-height: ${numToPx(core.lineHeight.body[smallAndUp ? 'large' : 'small'])};
+    font-size: ${numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small'])};
+    color: ${semantic.message.base};
+    text-align: left;
+    flex-wrap: wrap;
+  `);
+export const TableCaptionText = styled.Text(({ theme: { core, semantic }, smallAndUp }) => css `
+    font-family: ${core.fontFamily.bodyBold.native};
+    font-size: ${numToPx(core.fontSize.heading4[smallAndUp ? 'large' : 'small'])};
+    line-height: ${numToPx(core.lineHeight.heading4[smallAndUp ? 'large' : 'small'])};
+    color: ${semantic.message.branded};
+    text-align: left;
+    flex-wrap: wrap;
+  `);
+export const CellText = styled.Text(({ theme: { core }, smallAndUp }) => css `
+    font-family: ${core.fontFamily.body.native};
+    line-height: ${numToPx(core.lineHeight.body.large)};
+    font-size: ${numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small'])};
+  `);
+export const TableCaption = styled.View(({ theme: { core } }) => css `
+    padding: ${numToPx(core.space[4])} ${numToPx(core.space[2])};
+  `);
+export const TableRow = styled.View(({ theme: { semantic, core }, stripe }) => css `
+    background-color: ${stripe
+    ? semantic.surface.cutout
+    : semantic.surface.base};
+    flex-direction: row;
+    align-items: stretch;
+    border-bottom-width: ${stripe ? '0px' : numToPx(core.borderWidth.small)};
+    border-bottom-color: ${stripe
+    ? 'transparent'
+    : `${semantic.border.differentiated}`};
+  `);
+export const TableRowHeading = styled.View(({ theme: { semantic, core } }) => css `
+    background-color: ${semantic.surface.base};
+    border-bottom-width: ${numToPx(core.borderWidth.small)};
+    border-bottom-color: ${semantic.border.functional};
+    flex-direction: row;
+    align-items: stretch;
+  `);
+export const TableBody = styled.View `
+  flex-direction: column;
+  flex-wrap: nowrap;
+`;
+export const TableCell = styled.View(({ theme: { core }, cellWidth, smallAndUp }) => {
+    return css `
+      padding-top: ${numToPx(core.space[smallAndUp ? 3 : 2])};
+      padding-bottom: ${numToPx(core.space[smallAndUp ? 3 : 2])};
+      padding-left: ${numToPx(core.space[2])};
+      padding-right: ${numToPx(core.space[2])};
+      width: ${cellWidth};
+      flex: ${cellWidth === 'auto' ? 1 : 0};
+    `;
+});
+export const RowHeading = styled.View(({ theme: { core }, cellWidth, smallAndUp }) => {
+    return css `
+      padding-top: ${numToPx(core.space[smallAndUp ? 3 : 2])};
+      padding-bottom: ${numToPx(core.space[smallAndUp ? 3 : 2])};
+      padding-left: ${numToPx(core.space[2])};
+      padding-right: ${numToPx(core.space[2])};
+      width: ${cellWidth};
+      flex: ${cellWidth === 'auto' ? 1 : 0};
+    `;
+});
+export const StyledSeparatorRow = styled.View(({ theme: { core, semantic }, width }) => {
+    const minWidth = width ? `${width - core.space[2] * 2}px` : '100%';
+    return `
+      min-width: ${minWidth};
+      flex: 1;
+      flex-direction: row;
+      background-color: ${semantic.surface.elevated};
+      padding: ${numToPx(core.space[1])} ${numToPx(core.space[2])};
+    `;
+});
+export const SeparatorRowText = styled.Text(({ theme: { core, semantic }, smallAndUp }) => `
+  flex: 1;
+  font-family: ${core.fontFamily.body.native};
+  font-size: ${numToPx(core.fontSize.small[smallAndUp ? 'large' : 'small'])};
+  line-height: ${numToPx(core.lineHeight.small[smallAndUp ? 'large' : 'small'])};
+  color: ${semantic.message.secondary};
+`);

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,68 @@
+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 { mergeRefs, getText } 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: { core } }) => {
+    const margin = numToPx(core.space[1]);
+    return css `
+      margin-left: -${margin};
+      margin-right: -${margin};
+      flex-direction: row;
+      ${stretch ? '' : `width: 265px;`}
+    `;
+});
+const SubField = styled(Stack)(({ theme: { core } }) => {
+    const padding = numToPx(core.space[1]);
+    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 = ({ autoFocusNext = false, label, hint, error, optional = false, fullWidth = false, onChange, value, testID, editable = 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({
+                ...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 })] }), _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 })] }), _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 })] })] })] }) }));
+};

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

@@ -0,0 +1 @@
+export { DateField } from './DateField';

package/dist/esm/components/DescriptionList/DescriptionList.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, } from 'react';
+import { getValidChildren } from '../../utils';
+import { Dd, Dl, Dt } from './styled';
+const DescriptionList = ({ children, ...rest }) => {
+    const validChildren = getValidChildren(children);
+    return (_jsx(Dl, { ...rest, children: Children.map(validChildren, (child, index) => cloneElement(child, {
+            index,
+        })) }));
+};
+const DescriptionItem = ({ label, children, index, ...rest }) => (_jsxs(_Fragment, { children: [_jsx(Dt, { style: index === 0 ? { marginTop: 0 } : undefined, children: label }), _jsx(Dd, { ...rest, children: children })] }));
+export { DescriptionList, DescriptionItem };

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

@@ -0,0 +1 @@
+export { DescriptionList, DescriptionItem } from './DescriptionList';

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { View } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+export const Dl = styled.View(({ theme: { core }, smallAndUp }) => `
+  flex-direction: column;
+  flex: 1;
+  margin-top: ${smallAndUp ? numToPx(core.space[3]) : numToPx(core.space[2])};
+  margin-bottom: ${smallAndUp ? numToPx(core.space[3]) : numToPx(core.space[2])};
+`);
+const StyledDtText = styled.Text(({ theme: { core, semantic } }) => css `
+    font-family: ${core.fontFamily.bodyBold.native};
+    line-height: ${numToPx(core.lineHeight.body.small)};
+    font-size: ${numToPx(core.fontSize.body.small)};
+    color: ${semantic.message.base};
+    flex: 1;
+  `);
+const DtText = styledComponentWithBreakpoints(StyledDtText);
+const StyledDtItem = styled.View(({ theme: { core }, smallAndUp }) => css `
+    margin-top: ${numToPx(core.space[smallAndUp ? 4 : 3])};
+    flex-direction: row;
+  `);
+const DtItem = styledComponentWithBreakpoints(StyledDtItem);
+export const Dt = ({ children, ...rest }) => (_jsx(DtItem, { ...rest, children: _jsx(DtText, { children: children }) }));
+const StyledDdText = styled.Text(({ theme: { core, semantic } }) => css `
+    font-family: ${core.fontFamily.body.native};
+    line-height: ${numToPx(core.lineHeight.body.small)};
+    color: ${semantic.message.secondary};
+    font-size: ${numToPx(core.fontSize.body.small)};
+    flex: 1;
+  `);
+export const Dd = ({ children, ...rest }) => {
+    return (_jsx(View, { style: { flexDirection: 'row' }, ...rest, children: _jsx(StyledDdText, { children: children }) }));
+};

package/dist/esm/components/Disclosure/Disclosure.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useState } from 'react';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+import { Icon } from '../Icon';
+const DisclosureButton = styled.TouchableOpacity(() => css `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  `);
+const DisclosureButtonIcon = styled(Icon)(({ theme: { core, semantic }, expanded, smallAndUp }) => css `
+    transform: ${expanded ? 'rotate(0deg)' : 'rotate(-90deg)'};
+    margin-right: ${numToPx(core.space[smallAndUp ? 2 : 1])};
+    color: ${semantic.message.link};
+  `);
+const DisclosureButtonText = styled.Text(({ theme: { core, semantic }, smallAndUp }) => css `
+    font-family: ${core.fontFamily.body.native};
+    font-size: ${numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small'])};
+    line-height: ${numToPx(core.lineHeight.body[smallAndUp ? 'large' : 'small'])};
+    text-decoration: underline;
+    text-decoration-color: ${semantic.message.link};
+    color: ${semantic.message.link};
+  `);
+const DisclosurePanel = styled.View(({ theme: { core }, smallAndUp }) => css `
+    margin-top: ${numToPx(core.space[smallAndUp ? 3 : 2])};
+    padding-left: ${numToPx(core.space[smallAndUp ? 2 : 1])};
+  `);
+export const Disclosure = ({ children, title, expanded = false, onToggle, ref, ...rest }) => {
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const breakpoints = useBreakpoint();
+    return (_jsxs(_Fragment, { children: [_jsxs(DisclosureButton, { onPress: () => {
+                    setIsExpanded(!isExpanded);
+                    onToggle && onToggle(!isExpanded);
+                }, ref: ref, accessibilityState: { expanded: isExpanded }, ...rest, children: [_jsx(DisclosureButtonIcon, { name: "caret-arrow-down", ...breakpoints, size: 14, expanded: isExpanded }), _jsx(DisclosureButtonText, { ...breakpoints, children: title })] }), isExpanded && (_jsx(DisclosurePanel, { ...breakpoints, children: children }))] }));
+};

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

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

package/dist/esm/components/Display0/Display0.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber, numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const calculateLetterSpacing = (fontSize, letterSpacing) => {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
+};
+const StyledDisplay0 = styled.Text(({ theme: { core, semantic, component }, smallAndUp, inverted }) => {
+    const fontSize = component.display0.fontSize[smallAndUp ? 'large' : 'small'];
+    return css `
+      font-family: ${component.display0.fontFamily};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(component.display0.lineHeight[smallAndUp ? 'large' : 'small'])};
+      letter-spacing: ${calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed)};
+      color: ${inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded};
+    `;
+});
+export const Display0 = ({ accessibilityRole = 'header', ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledDisplay0, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
+};

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

@@ -0,0 +1 @@
+export { Display0 } from './Display0';

package/dist/esm/components/Display1/Display1.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber, numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const calculateLetterSpacing = (fontSize, letterSpacing) => {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
+};
+const StyledDisplay1 = styled.Text(({ theme: { core, semantic, component }, smallAndUp, inverted }) => {
+    const fontSize = component.display1.fontSize[smallAndUp ? 'large' : 'small'];
+    return css `
+      font-family: ${component.display1.fontFamily};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(component.display1.lineHeight[smallAndUp ? 'large' : 'small'])};
+      letter-spacing: ${calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed)};
+      color: ${inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded};
+    `;
+});
+export const Display1 = ({ accessibilityRole = 'header', ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledDisplay1, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
+};

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

@@ -0,0 +1 @@
+export { Display1 } from './Display1';

package/dist/esm/components/Display2/Display2.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber, numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const calculateLetterSpacing = (fontSize, letterSpacing) => {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
+};
+const StyledDisplay2 = styled.Text(({ theme: { core, semantic, component }, smallAndUp, inverted }) => {
+    const fontSize = component.display2.fontSize[smallAndUp ? 'large' : 'small'];
+    return css `
+      font-family: ${component.display2.fontFamily};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(component.display2.lineHeight[smallAndUp ? 'large' : 'small'])};
+      letter-spacing: ${calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed)};
+      color: ${inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded};
+    `;
+});
+export const Display2 = ({ accessibilityRole = 'header', ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledDisplay2, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
+};

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

@@ -0,0 +1 @@
+export { Display2 } from './Display2';