@ovotech/element-native 5.2.1 → 5.3.0-canary-9e22bfd-413

package/dist/esm/components/Badge/Badge.js

@@ -1,60 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 { numToPx } from '@ovotech/element-core';
-import styled, { css, useTheme } from '../../styled.native';
-var StyledBadge = styled.View(function (_a) {
-    var inverted = _a.inverted, theme = _a.theme, $surface = _a.$surface, $message = _a.$message;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", " ", "\n      ", " ", ";\n    border-radius: 16px;\n    border: ", " solid ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "], ["\n    padding: ", " ", "\n      ", " ", ";\n    border-radius: 16px;\n    border: ", " solid ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "])), numToPx(theme.space[50]), numToPx(theme.space[200]), numToPx(theme.space[100]), numToPx(theme.space[200]), numToPx(theme.border.width.md), theme.color.brand.onBrand, inverted ? $message : $surface);
-});
-var StyledBadgeText = styled.Text(function (_a) {
-    var inverted = _a.inverted, theme = _a.theme, $surface = _a.$surface, $message = _a.$message;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "])), theme.native.font.family.bold, numToPx(theme.font.lineHeight.md.mediaQuery.sm), inverted ? $surface : $message, numToPx(theme.font.size.md.mediaQuery.sm));
-});
-export var Badge = function (_a) {
-    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'neutral' : _b, _c = _a.inverted, inverted = _c === void 0 ? false : _c, customVariant = _a.customVariant, rest = __rest(_a, ["children", "variant", "inverted", "customVariant"]);
-    var theme = useTheme();
-    // check if variant is primitive, otherwise use alert colours
-    var isPrimitive = Object.keys(theme.color).includes(variant);
-    var message = isPrimitive
-        ? // @ts-ignore we're checking the variants above...
-            theme.color[variant]['70']
-        : // @ts-ignore we're checking the variants above...
-            theme.color.alert[variant];
-    var surface = isPrimitive
-        ? // @ts-ignore we're checking the variants above...
-            theme.color[variant]['20']
-        : // @ts-ignore we're checking the variants above...
-            theme.color.alert["".concat(variant, "Tint")];
-    if ((customVariant === null || customVariant === void 0 ? void 0 : customVariant.backgroundColor) !== undefined &&
-        (customVariant === null || customVariant === void 0 ? void 0 : customVariant.color) !== undefined) {
-        message = customVariant.color;
-        surface = customVariant.backgroundColor;
-    }
-    return (_jsx(StyledBadge, __assign({ inverted: inverted, "$surface": surface, "$message": message }, rest, { children: _jsx(StyledBadgeText, { inverted: inverted, "$surface": surface, "$message": message, children: children }) })));
-};
-var templateObject_1, templateObject_2;

package/dist/esm/components/Button/Button.js

@@ -1,39 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 { forwardRef } from 'react';
-import { useBreakpoint } from '../../hooks';
-import { StyledButtonIcon, StyledButtonText, StyledButtonWrapper, StyledInner, } from './Button.styles';
-var ButtonWrapper = function (_a) {
-    var children = _a.children, _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'button' : _b, _c = _a.activeOpacity, activeOpacity = _c === void 0 ? 0.8 : _c, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity"]);
-    return (_jsx(StyledButtonWrapper, __assign({ accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest, { children: children })));
-};
-var Button = function (_a) {
-    var iconLeft = _a.iconLeft, iconRight = _a.iconRight, children = _a.children, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.variant, variant = _c === void 0 ? 'surface' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 'default' : _e, rest = __rest(_a, ["iconLeft", "iconRight", "children", "fullWidth", "variant", "inverted", "size"]);
-    var smallAndUp = useBreakpoint().smallAndUp;
-    var isIconOnly = !children;
-    return (_jsx(ButtonWrapper, __assign({}, rest, { children: _jsxs(StyledInner, { fullWidth: fullWidth, variant: variant, inverted: inverted, size: size, iconLeft: iconLeft, iconRight: iconRight, iconOnly: isIconOnly, children: [iconLeft && (_jsx(StyledButtonIcon, { iconLeft: true, iconOnly: isIconOnly, name: iconLeft, inverted: inverted, variant: variant, size: size === 'default' ? numToPx(16) : numToPx(20) })), children ? (_jsx(StyledButtonText, { smallAndUp: smallAndUp, variant: variant, inverted: inverted, size: size, children: children })) : null, iconRight && (_jsx(StyledButtonIcon, { iconRight: true, iconOnly: isIconOnly, name: iconRight, inverted: inverted, variant: variant, size: size === 'default' ? numToPx(16) : numToPx(20) }))] }) })));
-};
-var ButtonDestructive = forwardRef(function (props, ref) { return (_jsx(Button, __assign({ variant: "destructive" }, props, { ref: ref }))); });
-export { Button, ButtonDestructive };

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

@@ -1,78 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-import { Icon } from '../Icon/Icon';
-export var StyledButtonWrapper = styled.TouchableOpacity(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-self: flex-start;\n  flex-direction: row;\n  align-items: flex-start;\n"], ["\n  align-self: flex-start;\n  flex-direction: row;\n  align-items: flex-start;\n"])));
-export var StyledInner = styled.View(function (_a) {
-    var theme = _a.theme, fullWidth = _a.fullWidth, inverted = _a.inverted, variant = _a.variant, size = _a.size, iconOnly = _a.iconOnly, iconRight = _a.iconRight, iconLeft = _a.iconLeft;
-    var borderRadius = numToPx(theme.border.radius['3xl']);
-    var backgroundColor = getBackgroundColor(theme, variant, inverted);
-    var borderColor = getBorderColor(theme, variant, inverted);
-    var minHeight = size === 'default'
-        ? numToPx(theme.space[1100])
-        : numToPx(theme.border.radius['3xl'] * 2 - theme.border.width.sm * 2);
-    var top, right, bottom, left;
-    if (size === 'default') {
-        top = numToPx(theme.space[100]);
-        bottom = numToPx(theme.space[100]);
-        right = numToPx(theme.space[iconRight ? 300 : 500]);
-        left = numToPx(theme.space[iconLeft ? 300 : 500]);
-    }
-    else {
-        top = numToPx(theme.space[200]);
-        bottom = numToPx(theme.space[200]);
-        right = numToPx(theme.space[iconRight ? 500 : 800]);
-        left = numToPx(theme.space[iconLeft ? 500 : 800]);
-    }
-    var padding = "".concat(top, " ").concat(right, " ").concat(bottom, " ").concat(left);
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding: ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      min-height: ", ";\n      border-style: solid;\n      border-width: ", ";\n      border-color: ", ";\n      justify-content: center;\n      align-items: center;\n      flex-direction: row;\n      flex-grow: ", ";\n      min-width: ", ";\n    "], ["\n      padding: ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      min-height: ", ";\n      border-style: solid;\n      border-width: ", ";\n      border-color: ", ";\n      justify-content: center;\n      align-items: center;\n      flex-direction: row;\n      flex-grow: ", ";\n      min-width: ", ";\n    "])), iconOnly ? '0' : padding, backgroundColor, borderRadius, minHeight, numToPx(theme.border.width.md), borderColor, fullWidth ? '1' : '0', iconOnly ? minHeight : 'auto');
-});
-export var StyledButtonIcon = styled(Icon)(function (_a) {
-    var theme = _a.theme, inverted = _a.inverted, variant = _a.variant, iconLeft = _a.iconLeft, iconRight = _a.iconRight, iconOnly = _a.iconOnly;
-    var color = getIconColor(theme, inverted, variant);
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    margin-left: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "], ["\n    margin-left: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "])), iconRight && !iconOnly ? numToPx(theme.space[100]) : '0', iconLeft && !iconOnly ? numToPx(theme.space[100]) : '0', color);
-});
-export var StyledButtonText = styled.Text(function (_a) {
-    var theme = _a.theme, smallAndUp = _a.smallAndUp, inverted = _a.inverted, variant = _a.variant, size = _a.size;
-    var fontSize = smallAndUp || size === 'large'
-        ? theme.font.size.lg.mediaQuery.sm
-        : theme.font.size.md.mediaQuery.sm;
-    var color = getTextColor(theme, inverted, variant);
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-align: center;\n    flex-shrink: 2;\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-align: center;\n    flex-shrink: 2;\n  "])), color, theme.native.font.family.bold, numToPx(fontSize), numToPx(theme.font.lineHeight.md.mediaQuery.sm));
-});
-// Helper functions
-var getBackgroundColor = function (theme, variant, inverted) {
-    var button = theme.button;
-    if (variant === 'outline' || variant === 'outline-variant') {
-        return 'transparent';
-    }
-    return inverted ? button.surface.color.bgInverted : button[variant].color.bg;
-};
-var getBorderColor = function (theme, variant, inverted) {
-    var button = theme.button;
-    if (variant === 'outline') {
-        return inverted ? button.surface.color.bgVariant : button.surface.color.bg;
-    }
-    if (variant === 'outline-variant') {
-        return button.surface.color.bgVariant;
-    }
-    return inverted ? button.surface.color.bgVariant : button[variant].color.bg;
-};
-var getIconColor = function (theme, inverted, variant) {
-    var button = theme.button;
-    if (variant === 'outline' || variant === 'outline-variant') {
-        return inverted ? button.surface.color.bgInverted : button.surface.color.bg;
-    }
-    return inverted ? button.surface.color.fgInverted : button[variant].color.fg;
-};
-var getTextColor = function (theme, inverted, variant) {
-    var button = theme.button;
-    if (variant === 'outline' || variant === 'outline-variant') {
-        return inverted ? button.surface.color.bgInverted : button.surface.color.bg;
-    }
-    return inverted ? button.surface.color.fgInverted : button[variant].color.fg;
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,36 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 { numToPx } from '@ovotech/element-core';
-import { useBreakpoint } from '../../hooks';
-import styled from '../../styled.native';
-var CardWrapper = styled.View(function (_a) {
-    var theme = _a.theme, displayStyle = _a.displayStyle, _b = _a.smallAndUp, smallAndUp = _b === void 0 ? false : _b;
-    var isSolid = displayStyle === 'solid';
-    return "\n      position: relative;\n      background: ".concat(isSolid ? theme.color.surface.bright : 'transparent', ";\n      padding: ").concat(numToPx(theme.space[smallAndUp ? 900 : 600]), ";\n      border-width: ").concat(numToPx(theme.border.width.md), ";\n      border-style: solid;\n      border-color: ").concat(isSolid ? 'transparent' : theme.color.surface.bright, ";\n      border-radius: ").concat(numToPx(theme.border.radius['2xl']), ";\n    ");
-});
-export var Card = function (_a) {
-    var children = _a.children, _b = _a.displayStyle, displayStyle = _b === void 0 ? 'solid' : _b, rest = __rest(_a, ["children", "displayStyle"]);
-    var smallAndUp = useBreakpoint().smallAndUp;
-    return (_jsx(CardWrapper, __assign({ smallAndUp: smallAndUp, displayStyle: displayStyle }, rest, { children: children })));
-};

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

@@ -1,74 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 { forwardRef } from 'react';
-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';
-var StyledCheckboxInputWrapper = styled.View(function (_a) {
-    var theme = _a.theme;
-    var checkboxSize = theme.space[600];
-    var gap = theme.space[200];
-    return "\n      width: ".concat(numToPx(checkboxSize + gap), ";\n      height: ").concat(numToPx(theme.space[1100]), ";\n    ");
-});
-var StyledCheckboxInput = styled.View(function (_a) {
-    var theme = _a.theme, invalid = _a.invalid, checked = _a.checked;
-    return "\n      width: ".concat(numToPx(theme.space[600]), ";\n      height: ").concat(numToPx(theme.space[600]), ";\n      border: ").concat(numToPx(theme.border.width.md), " solid;\n      margin-top: 10px;\n      border-radius: ").concat(numToPx(theme.border.radius.xs), ";\n      border-color: ").concat(invalid
-        ? theme.input.color.borderError
-        : checked
-            ? theme.input.color.selected
-            : theme.input.color.border, ";\n      background: ").concat(checked ? theme.input.color.selectedTint : 'transparent', ";\n    ");
-});
-var CheckboxCheck = function (props) {
-    return _jsx(Icon, __assign({ name: "check", size: 16 }, props));
-};
-var StyledCheckboxInputCheck = styled(CheckboxCheck)(function (_a) {
-    var theme = _a.theme, checked = _a.checked;
-    return "\n      margin-top: ".concat(numToPx(theme.space[50]), ";\n      margin-left: ").concat(numToPx(theme.space[50]), ";\n      color: ").concat(theme.color.alert.info, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
-});
-var Input = function (_a) {
-    var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
-    return (_jsx(StyledCheckboxInputWrapper, __assign({}, rest, { children: _jsx(StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledCheckboxInputCheck, { checked: checked }) }) })));
-};
-var CheckLabelText = styled(LabelText)(function (_a) {
-    var theme = _a.theme;
-    return "\n    padding-top: ".concat(numToPx(theme.space[300]), ";\n  ");
-});
-var StyledWrapper = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
-var Checkbox = forwardRef(function (_a, ref) {
-    var label = _a.label, hint = _a.hint, error = _a.error, checked = _a.checked, optional = _a.optional, invalid = _a.invalid, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, rest = __rest(_a, ["label", "hint", "error", "checked", "optional", "invalid", "activeOpacity", "testID"]);
-    var hasError = !!error;
-    return (_jsx(FormGroup, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [error ? _jsx(ErrorText, { children: error }) : null, _jsx(TouchableOpacity, __assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: 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 };
-var templateObject_1;

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

@@ -1,42 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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';
-var CheckboxField = function (_a) {
-    var label = _a.label, hint = _a.hint, error = _a.error, children = _a.children, _b = _a.optional, optional = _b === void 0 ? false : _b, rest = __rest(_a, ["label", "hint", "error", "children", "optional"]);
-    var hasError = !!error;
-    var validChildren = getValidChildren(children);
-    return (_jsx(FormGroup, __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, function (child) {
-                        return cloneElement(child, {
-                            invalid: hasError ? true : child.props.invalid,
-                        });
-                    }) })] }) })));
-};
-export { CheckboxField };

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

@@ -1,30 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 { forwardRef } from 'react';
-import { CurrencyInput } from '../CurrencyInput';
-import { Field } from '../Field';
-export var CurrencyField = forwardRef(function (_a, ref) {
-    var rest = __rest(_a, []);
-    return (_jsx(Field, __assign({ affixWidth: 40 }, rest, { ref: ref, children: _jsx(CurrencyInput, {}) })));
-});

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

@@ -1,34 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 { forwardRef, createRef } from 'react';
-import { mergeRefs } from '../../utils';
-import { NumberInput } from '../NumberInput';
-var CurrencyInput = forwardRef(function (_a, ref) {
-    var _b = _a.currency, currency = _b === void 0 ? 'GBP' : _b, invalid = _a.invalid, _c = _a.accessibilityLabel, accessibilityLabel = _c === void 0 ? '' : _c, rest = __rest(_a, ["currency", "invalid", "accessibilityLabel"]);
-    var inputRef = createRef();
-    var updatedAccessibilityLabel = "".concat(accessibilityLabel, " ").concat(currency === 'GBP' ? 'pounds' : currency === 'EUR' ? 'euro' : 'dollar').trim();
-    var iconName = currency === 'GBP' ? 'pound' : currency === 'EUR' ? 'euro' : 'dollar';
-    return (_jsx(NumberInput, __assign({}, rest, { invalid: invalid, accessibilityLabel: updatedAccessibilityLabel, ref: mergeRefs(ref, inputRef), iconLeft: iconName })));
-});
-export { CurrencyInput };

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

@@ -1,43 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 { forwardRef } from 'react';
-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 var DataTable = forwardRef(function (_a, ref) {
-    var items = _a.items, columnHeadings = _a.columnHeadings, caption = _a.caption, rowHeadings = _a.rowHeadings, columnWidths = _a.columnWidths, _b = _a.striped, striped = _b === void 0 ? true : _b, rest = __rest(_a, ["items", "columnHeadings", "caption", "rowHeadings", "columnWidths", "striped"]);
-    var breakpoints = useBreakpoint();
-    var columnLabel = columnHeadings
-        ? " ".concat(columnHeadings.length, " columns,")
-        : '';
-    var accessibilityLabelText = isReactElement(caption)
-        ? getText(caption)
-        : caption;
-    var accessibilityLabel = "data table,".concat(columnLabel, " ").concat(items.length, " rows, ").concat(accessibilityLabelText);
-    return (_jsx(ScrollView, { horizontal: true, alwaysBounceHorizontal: false, contentContainerStyle: { flexGrow: 1 }, children: _jsxs(StyledTableContainer, __assign({}, rest, { ref: ref, children: [caption ? (_jsx(TableCaption, __assign({}, breakpoints, { children: isReactElement(caption) ? (caption) : (_jsx(TableCaptionText, __assign({}, breakpoints, { accessibilityLabel: accessibilityLabel, children: caption }))) }))) : null, columnHeadings ? (_jsx(TableRowHeading, { children: columnHeadings.map(function (columnHeading, index) { return (_createElement(TableHeader, __assign({}, breakpoints, { key: index, cellWidth: columnWidths[index] }), isReactElement(columnHeading) ? (columnHeading) : (_jsx(TableHeaderText, __assign({}, breakpoints, { children: columnHeading }))))); }) })) : null, _jsx(TableBody, { children: items.map(function (rowData, index) { return (_jsx(TableRow, { data: rowData, index: index, rowHeadings: rowHeadings, columnWidths: columnWidths, striped: striped }, index)); }) })] })) }));
-});

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

@@ -1,33 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 var TableRow = function (_a) {
-    var data = _a.data, index = _a.index, striped = _a.striped, rowHeadings = _a.rowHeadings, columnWidths = _a.columnWidths;
-    var breakpoints = useBreakpoint();
-    var cells = data.map(function (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, __assign({}, breakpoints, { children: cellData === null || cellData === void 0 ? void 0 : cellData.content })) }, i));
-        }
-        if (rowHeadings && i === 0) {
-            return (_createElement(RowHeading, __assign({}, breakpoints, { key: i, testID: "rowHeader", cellWidth: columnWidths[i] }), isReactElement(cellData) ? (cellData) : (_jsx(TableHeaderText, __assign({}, breakpoints, { children: cellData })))));
-        }
-        return (_createElement(TableCell, __assign({}, breakpoints, { key: i, testID: "cell", cellWidth: columnWidths[i] }), isReactElement(cellData) ? (cellData) : (_jsx(CellText, __assign({}, breakpoints, { children: cellData })))));
-    });
-    return (_jsx(StyledTableRow, { stripe: striped && index % 2 === 0, children: cells }));
-};

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

@@ -1,61 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-export var StyledTableContainer = styled.View(function (_a) {
-    var theme = _a.theme;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-grow: 1;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "], ["\n    flex-grow: 1;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), numToPx(theme.border.width.sm), theme.color.surface.borderDim);
-});
-export var TableHeader = styled.View(function (_a) {
-    var theme = _a.theme, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    flex: ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    flex: ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n  "])), numToPx(theme.space[smallAndUp ? 300 : 200]), numToPx(theme.space[smallAndUp ? 300 : 200]), numToPx(theme.space[200]), numToPx(theme.space[200]), cellWidth === 'auto' ? 1 : 0, cellWidth);
-});
-export var TableHeaderText = styled.Text(function (_a) {
-    var theme = _a.theme, smallAndUp = _a.smallAndUp;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "])), theme.native.font.family.bold, numToPx(theme.font.lineHeight.md.mediaQuery[smallAndUp ? 'lg' : 'sm']), numToPx(theme.font.size.md.mediaQuery[smallAndUp ? 'lg' : 'sm']), theme.color.surface.onSurface);
-});
-export var TableCaptionText = styled.Text(function (_a) {
-    var theme = _a.theme, smallAndUp = _a.smallAndUp;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "])), theme.native.font.family.bold, numToPx(theme.font.size.xl.mediaQuery[smallAndUp ? 'lg' : 'sm']), numToPx(theme.font.lineHeight.xl.mediaQuery[smallAndUp ? 'lg' : 'sm']), theme.color.brand.brand);
-});
-export var CellText = styled.Text(function (_a) {
-    var theme = _a.theme, smallAndUp = _a.smallAndUp;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "])), theme.native.font.family.book, numToPx(theme.font.lineHeight.md.mediaQuery.lg), numToPx(theme.font.size.md.mediaQuery[smallAndUp ? 'lg' : 'sm']));
-});
-export var TableCaption = styled.View(function (_a) {
-    var theme = _a.theme;
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", " ", ";\n  "], ["\n    padding: ", " ", ";\n  "])), numToPx(theme.space[400]), numToPx(theme.space[200]));
-});
-export var TableRow = styled.View(function (_a) {
-    var theme = _a.theme, stripe = _a.stripe;
-    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    background-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "], ["\n    background-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), stripe
-        ? theme.color.surface.dim
-        : theme.color.surface.surface, stripe ? '0px' : numToPx(theme.border.width.sm), stripe
-        ? 'transparent'
-        : "".concat(theme.color.surface.borderDim));
-});
-export var TableRowHeading = styled.View(function (_a) {
-    var theme = _a.theme;
-    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    background-color: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "], ["\n    background-color: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "])), theme.color.surface.surface, numToPx(theme.border.width.sm), theme.color.surface.border);
-});
-export var TableBody = styled.View(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"], ["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"])));
-export var TableCell = styled.View(function (_a) {
-    var theme = _a.theme, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
-    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "])), numToPx(theme.space[smallAndUp ? 300 : 200]), numToPx(theme.space[smallAndUp ? 300 : 200]), numToPx(theme.space[200]), numToPx(theme.space[200]), cellWidth, cellWidth === 'auto' ? 1 : 0);
-});
-export var RowHeading = styled.View(function (_a) {
-    var theme = _a.theme, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
-    return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "])), numToPx(theme.space[smallAndUp ? 300 : 200]), numToPx(theme.space[smallAndUp ? 300 : 200]), numToPx(theme.space[200]), numToPx(theme.space[200]), cellWidth, cellWidth === 'auto' ? 1 : 0);
-});
-export var StyledSeparatorRow = styled.View(function (_a) {
-    var theme = _a.theme, width = _a.width;
-    var minWidth = width ? "".concat(width - theme.space[200] * 2, "px") : '100%';
-    return "\n      min-width: ".concat(minWidth, ";\n      flex: 1;\n      flex-direction: row;\n      background-color: ").concat(theme.color.surface.bright, ";\n      padding: ").concat(numToPx(theme.space[100]), " ").concat(numToPx(theme.space[200]), ";\n    ");
-});
-export var SeparatorRowText = styled.Text(function (_a) {
-    var theme = _a.theme, smallAndUp = _a.smallAndUp;
-    return "\n  flex: 1;\n  font-family: ".concat(theme.native.font.family.book, ";\n  font-size: ").concat(numToPx(theme.font.size.sm.mediaQuery[smallAndUp ? 'lg' : 'sm']), ";\n  line-height: ").concat(numToPx(theme.font.lineHeight.sm.mediaQuery[smallAndUp ? 'lg' : 'sm']), ";\n  color: ").concat(theme.color.surface.onSurfaceVariant, ";\n");
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

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

@@ -1,73 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { forwardRef, createRef } 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';
-var InlineFields = styled.View(function (_a) {
-    var stretch = _a.stretch, theme = _a.theme;
-    var margin = numToPx(theme.space[100]);
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-left: -", ";\n    margin-right: -", ";\n    flex-direction: row;\n    ", "\n  "], ["\n    margin-left: -", ";\n    margin-right: -", ";\n    flex-direction: row;\n    ", "\n  "])), margin, margin, stretch ? '' : "width: 265px;");
-});
-var SubField = styled(Stack)(function (_a) {
-    var theme = _a.theme;
-    var padding = numToPx(theme.space[100]);
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-right: ", ";\n    padding-left: ", ";\n  "], ["\n    padding-right: ", ";\n    padding-left: ", ";\n  "])), padding, padding);
-});
-var DayField = styled(SubField)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 25%;\n"], ["\n  width: 25%;\n"])));
-var MonthField = styled(SubField)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 25%;\n"], ["\n  width: 25%;\n"])));
-var YearField = styled(SubField)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 50%;\n"], ["\n  width: 50%;\n"])));
-export var DateField = forwardRef(function (_a, ref) {
-    var label = _a.label, hint = _a.hint, error = _a.error, _b = _a.optional, optional = _b === void 0 ? false : _b, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, onChange = _a.onChange, value = _a.value, testID = _a.testID, _d = _a.editable, editable = _d === void 0 ? true : _d, _e = _a.autoFocusNext, autoFocusNext = _e === void 0 ? true : _e;
-    var hasError = !!error;
-    var dayRef = createRef();
-    var monthRef = createRef();
-    var yearRef = createRef();
-    var nextFieldRef = {
-        day: monthRef,
-        month: yearRef,
-    };
-    var handleChange = function (key) { return function (datePartValue) {
-        var _a;
-        onChange &&
-            onChange(__assign(__assign({}, value), (_a = {}, _a[key] = datePartValue, _a)));
-        if (key !== 'year' && autoFocusNext) {
-            var nextField = nextFieldRef[key].current;
-            if (nextField && datePartValue.length === 2) {
-                nextField.focus();
-            }
-        }
-    }; };
-    var accessibilityLabel = function (labelText) {
-        return [labelText, getText(hint), getText(error)].filter(Boolean).join(', ');
-    };
-    var focusRef = function (internalRef) { return function () {
-        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: "".concat(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: "".concat(testID, "-year"), stretch: true, editable: editable, maxLength: 4 })] })] })] }) }));
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;