@ovotech/element-native 4.5.0 → 5.0.0-canary-bcb1788-338

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

@@ -1,15 +1,36 @@
+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';
-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 }));
+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,5 +1,32 @@
+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';
@@ -8,51 +35,40 @@ 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])};
-    `;
+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    ");
 });
-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
+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
-            ? core.color.blue.dark
-            : semantic.border.functional};
-      background: ${checked ? core.color.blue.lightest : 'transparent'};
-    `;
+            ? theme.input.color.selected
+            : theme.input.color.border, ";\n      background: ").concat(checked ? theme.input.color.selectedTint : 'transparent', ";\n    ");
 });
-const CheckboxCheck = (props) => {
-    return _jsx(Icon, { name: "check", size: 16, ...props });
+var CheckboxCheck = function (props) {
+    return _jsx(Icon, __assign({ 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};
-    `;
+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    ");
 });
-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] })] }) })] }) }));
+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,5 +1,27 @@
+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 { Children, cloneElement } from 'react';
 import { View } from 'react-native';
 import { getValidChildren } from '../../utils';
 import { ErrorText } from '../ErrorText';
@@ -7,11 +29,14 @@ 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,
-                    })) })] }) }));
+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,6 +1,30 @@
+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 const CurrencyField = ({ ref, ...rest }) => {
-    return (_jsx(Field, { affixWidth: 40, ...rest, children: _jsx(CurrencyInput, { ref: ref }) }));
-};
+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,11 +1,34 @@
+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 { createRef } from 'react';
+import { forwardRef, 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 }));
-};
+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,19 +1,43 @@
+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 const DataTable = ({ items, columnHeadings, caption, rowHeadings, columnWidths, striped = true, ref, ...rest }) => {
-    const breakpoints = useBreakpoint();
-    const columnLabel = columnHeadings
-        ? ` ${columnHeadings.length} columns,`
+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,")
         : '';
-    const accessibilityLabelText = isReactElement(caption)
+    var 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))) })] }) }));
-};
+    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,21 +1,33 @@
+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 const TableRow = ({ data, index, striped, rowHeadings, columnWidths, }) => {
-    const breakpoints = useBreakpoint();
-    const cells = data.map((cellData, i) => {
+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?.hasOwnProperty('isSeparator') &&
-            cellData?.hasOwnProperty('content')) {
-            return (_jsx(StyledSeparatorRow, { testID: "separatorRow", width: Dimensions.get('window').width, children: _jsx(SeparatorRowText, { ...breakpoints, children: cellData?.content }) }, i));
+            (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, { ...breakpoints, key: i, testID: "rowHeader", cellWidth: columnWidths[i] }, isReactElement(cellData) ? (cellData) : (_jsx(TableHeaderText, { ...breakpoints, children: cellData }))));
+            return (_createElement(RowHeading, __assign({}, breakpoints, { key: i, testID: "rowHeader", cellWidth: columnWidths[i] }), isReactElement(cellData) ? (cellData) : (_jsx(TableHeaderText, __assign({}, breakpoints, { children: cellData })))));
         }
-        return (_createElement(TableCell, { ...breakpoints, key: i, testID: "cell", cellWidth: columnWidths[i] }, isReactElement(cellData) ? (cellData) : (_jsx(CellText, { ...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,100 +1,61 @@
+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 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 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 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 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 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 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 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};
-`);
+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;