@ovotech/element-native 2.2.0-canary-668a0ee-91 → 2.2.0

package/dist/components/Card/Card.d.ts

@@ -1,13 +1,15 @@
-export declare const Card: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
+import { ComponentProps } from 'react';
+import { Breakpoints } from '../../hooks';
+declare const StyledCard: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
-        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
+        opacity: Record<"transparent" | "translucent" | "solid", string | number>;
+        color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
             lightest: string;
             lighter: string;
             light: string;
@@ -23,53 +25,71 @@ export declare const Card: import("styled-components").StyledComponent<typeof im
             web: string;
         }>;
         fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
             small: string | number;
             large: string | number;
         }>;
-        lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
             small: string | number;
             large: string | number;
         }>;
-        letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
         message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
-        focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"border" | "surface", string> & {
+        focus: Record<"outline" | "surface", string>;
+        inverted: Record<"surface" | "border", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
         success: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         warning: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         error: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         info: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
+        };
+        electricity: {
+            border: string;
+            surface: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
+        };
+        gas: {
+            border: string;
+            surface: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
-        data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
     };
     component: {
         heading1: {
@@ -200,31 +220,9 @@ export declare const Card: import("styled-components").StyledComponent<typeof im
                 backgroundFocused: string;
             };
         };
-        badge: {
-            variants: {
-                red: {
-                    foreground: string;
-                    background: string;
-                };
-                orange: {
-                    foreground: string;
-                    background: string;
-                };
-                yellow: {
-                    foreground: string;
-                    background: string;
-                };
-                green: {
-                    foreground: string;
-                    background: string;
-                };
-                blue: {
-                    foreground: string;
-                    background: string;
-                };
-            };
-        };
     };
-}, {
+}, Breakpoints & {
     inline?: boolean | undefined;
 }, never>;
+declare const Card: (props: ComponentProps<typeof StyledCard>) => JSX.Element;
+export { Card };

package/dist/components/Card/Card.js

@@ -1,13 +1,33 @@
 "use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = void 0;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../../hooks");
 var styled_native_1 = __importDefault(require("../../styled.native"));
-exports.Card = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.inline, inline = _c === void 0 ? false : _c;
-    return "\n      background: ".concat(semantic.surface.elevated, ";\n      border: ").concat(inline
-        ? "".concat(core.borderWidth.small, " solid ").concat(semantic.border.differentiated)
-        : 'none', ";\n      padding: ").concat(core.space[4], ";\n      border-radius: ").concat(core.radius.small, ";\n    ");
+var StyledCard = styled_native_1.default.View(function (_a) {
+    var _b = _a.theme, card = _b.card, radii = _b.radii, smallAndUp = _a.smallAndUp, _c = _a.inline, inline = _c === void 0 ? false : _c;
+    var padding = smallAndUp
+        ? "".concat(card.padding[2], " ").concat(card.padding[1])
+        : "".concat(card.padding[1], " ").concat(card.padding[0]);
+    var borderRadius = smallAndUp ? radii.medium : radii.small;
+    return "\n      background: ".concat(card.background, ";\n      border: ").concat(inline ? "".concat(card.borderWidth, " solid ").concat(card.borderColor) : 'none', ";\n      padding: ").concat(padding, ";\n      border-radius: ").concat(borderRadius, ";\n    ");
 });
+var Card = function (props) {
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    return react_1.default.createElement(StyledCard, __assign({}, breakpoints, props));
+};
+exports.Card = Card;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
-declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<TouchableOpacityProps, "children"> & {
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<TouchableOpacityProps, "children"> & {
     label: string;
     checked: boolean;
     hint?: ReactNode;
@@ -8,5 +8,5 @@ declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Touchable
     optional?: boolean | undefined;
     invalid?: boolean | undefined;
     activeOpacity?: number | undefined;
-} & import("react").RefAttributes<TouchableOpacity>>;
+} & React.RefAttributes<TouchableOpacity>>;
 export { Checkbox };

package/dist/components/Checkbox/Checkbox.js

@@ -14,6 +14,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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)
@@ -25,15 +48,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var react_native_1 = require("react-native");
-var styled_native_1 = __importDefault(require("../../styled.native"));
+var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var ErrorText_1 = require("../ErrorText");
 var FormGroup_1 = require("../FormGroup");
@@ -48,33 +67,53 @@ var StyledCheckboxInputWrapper = styled_native_1.default.View(function (_a) {
     return "\n      width: ".concat(checkboxSize + gap, "px;\n      height: ").concat(checkbox.touchSize, ";\n    ");
 });
 var StyledCheckboxInput = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;
-    return "\n      width: ".concat(core.space[6], ";\n      height: ").concat(core.space[6], ";\n      border: ").concat(core.borderWidth.small, " solid;\n      margin-top: 10px;\n      border-radius: ").concat(core.radius.small, ";\n      border-color: ").concat(invalid
-        ? semantic.error.border
+    var checkbox = _a.theme.checkbox, invalid = _a.invalid, checked = _a.checked;
+    var touchSize = (0, utils_1.pxToNumber)(checkbox.touchSize);
+    var checkboxSize = (0, utils_1.pxToNumber)(checkbox.size);
+    var checkboxDistance = (touchSize - checkboxSize) / 2;
+    return "\n      width: ".concat(checkbox.size, ";\n      height: ").concat(checkbox.size, ";\n      border: ").concat(checkbox.borderWidth, " solid;\n      margin-top: ").concat(checkboxDistance, "px;\n      border-radius: ").concat(checkbox.borderRadius, ";\n      border-color: ").concat(invalid
+        ? checkbox.errorColor
         : checked
-            ? core.color.blue.dark
-            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
+            ? checkbox.checkColor
+            : checkbox.borderColor, ";\n      background: ").concat(checked ? checkbox.checkedBackground : checkbox.background, ";\n    ");
 });
 var CheckboxCheck = function (props) {
-    return (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({ name: "check", size: 16 }, props));
+    var checkbox = (0, react_1.useContext)(styled_native_1.ThemeContext).checkbox;
+    return (react_1.default.createElement(Icon_1.Icon, __assign({ name: "check", size: (0, utils_1.pxToNumber)(checkbox.checkSize), color: checkbox.checkColor }, props)));
 };
 var StyledCheckboxInputCheck = (0, styled_native_1.default)(CheckboxCheck)(function (_a) {
-    var core = _a.theme.core, checked = _a.checked;
-    return "\n      margin-top: 3px;\n      margin-left: 3px;\n      color: ".concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+    var checkbox = _a.theme.checkbox, checked = _a.checked;
+    var checkboxSize = (0, utils_1.pxToNumber)(checkbox.size);
+    var checkSize = (0, utils_1.pxToNumber)(checkbox.checkSize);
+    var borderWidth = (0, utils_1.pxToNumber)(checkbox.borderWidth);
+    var checkDistance = (checkboxSize - checkSize) / 2 - borderWidth;
+    return "\n      margin-top: ".concat(checkDistance, "px;\n      margin-left: ").concat(checkDistance, "px;\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 ((0, jsx_runtime_1.jsx)(StyledCheckboxInputWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(StyledCheckboxInput, __assign({ invalid: invalid, checked: checked, testID: testID }, { children: (0, jsx_runtime_1.jsx)(StyledCheckboxInputCheck, { checked: checked }) })) })));
+    return (react_1.default.createElement(StyledCheckboxInputWrapper, __assign({}, rest),
+        react_1.default.createElement(StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID },
+            react_1.default.createElement(StyledCheckboxInputCheck, { checked: checked }))));
 };
 var CheckLabelText = (0, styled_native_1.default)(LabelText_1.LabelText)(function (_a) {
-    var core = _a.theme.core;
-    return "\n    padding-top: ".concat(core.space[3], ";\n  ");
+    var checkbox = _a.theme.checkbox;
+    return "\n    padding-top: ".concat(checkbox.paddingTop, ";\n  ");
 });
 var StyledWrapper = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
 var Checkbox = (0, react_1.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 ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, __assign({ error: hasError }, { children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, __assign({ spaceBetween: 1 }, { children: [error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null, (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, { children: [(0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: hasError || invalid, testID: testID }), (0, jsx_runtime_1.jsxs)(react_native_1.View, __assign({ style: { flexShrink: 1 } }, { children: [(0, jsx_runtime_1.jsxs)(CheckLabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] }))] }) }))] })) })));
+    return (react_1.default.createElement(FormGroup_1.FormGroup, { error: hasError },
+        react_1.default.createElement(Stack_1.Stack, { spaceBetween: 1 },
+            error ? react_1.default.createElement(ErrorText_1.ErrorText, null, error) : null,
+            react_1.default.createElement(react_native_1.TouchableOpacity, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest),
+                react_1.default.createElement(StyledWrapper, null,
+                    react_1.default.createElement(Input, { checked: checked, invalid: hasError || invalid, testID: testID }),
+                    react_1.default.createElement(react_native_1.View, { style: { flexShrink: 1 } },
+                        react_1.default.createElement(CheckLabelText, null,
+                            label,
+                            optional ? ' (optional)' : null),
+                        hint ? react_1.default.createElement(HintText_1.HintText, null, hint) : null))))));
 });
 exports.Checkbox = Checkbox;
 var templateObject_1;

package/dist/components/Checkbox/CheckboxField.js

@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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)
@@ -23,8 +46,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxField = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var react_native_1 = require("react-native");
 var ErrorText_1 = require("../ErrorText");
 var FormGroup_1 = require("../FormGroup");
@@ -34,10 +56,18 @@ var Stack_1 = require("../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;
-    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, __assign({}, rest, { error: hasError }, { children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, __assign({ spaceBetween: 1 }, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(LabelText_1.LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null, error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { children: react_1.Children.map(children, function (child) {
-                        return (0, react_1.cloneElement)(child, {
-                            invalid: hasError ? true : child.props.invalid,
-                        });
-                    }) })] })) })));
+    return (react_1.default.createElement(FormGroup_1.FormGroup, __assign({}, rest, { error: hasError }),
+        react_1.default.createElement(Stack_1.Stack, { spaceBetween: 1 },
+            react_1.default.createElement(react_native_1.View, null,
+                react_1.default.createElement(LabelText_1.LabelText, null,
+                    label,
+                    optional ? ' (optional)' : null),
+                hint ? react_1.default.createElement(HintText_1.HintText, null, hint) : null,
+                error ? react_1.default.createElement(ErrorText_1.ErrorText, null, error) : null),
+            react_1.default.createElement(react_native_1.View, null, react_1.Children.map(children, function (child) {
+                return (0, react_1.cloneElement)(child, {
+                    invalid: hasError ? true : child.props.invalid,
+                });
+            })))));
 };
 exports.CheckboxField = CheckboxField;

package/dist/components/DataTable/DataTable.d.ts

@@ -1,4 +1,13 @@
-/// <reference types="react" />
+import React, { ReactNode, Ref } from 'react';
 import { View } from 'react-native';
-import { TableProps } from './types';
-export declare const DataTable: import("react").ForwardRefExoticComponent<Pick<TableProps, "caption" | "rowHeadings" | "striped" | "columnWidths" | "items" | "columnHeadings"> & import("react").RefAttributes<View>>;
+declare type TableProps = {
+    items: ReactNode[][];
+    columnHeadings?: ReactNode[];
+    caption?: ReactNode;
+    rowHeadings?: boolean;
+    columnWidths: string[];
+    striped?: boolean;
+    ref: Ref<View>;
+};
+export declare const DataTable: React.ForwardRefExoticComponent<Pick<TableProps, "caption" | "items" | "columnHeadings" | "rowHeadings" | "columnWidths" | "striped"> & React.RefAttributes<View>>;
+export {};

package/dist/components/DataTable/DataTable.js

@@ -1,4 +1,8 @@
 "use strict";
+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++) {
@@ -10,6 +14,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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)
@@ -23,24 +50,84 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTable = void 0;
-var react_1 = require("react");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_2 = require("react");
-var react_is_1 = require("react-is");
+var react_1 = __importStar(require("react"));
 var react_native_1 = require("react-native");
+var react_is_1 = require("react-is");
 var hooks_1 = require("../../hooks");
+var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
-var TableRow_1 = require("./TableRow");
-var styles_1 = require("./styles");
-exports.DataTable = (0, react_2.forwardRef)(function (_a, ref) {
+exports.DataTable = (0, react_1.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 = (0, hooks_1.useBreakpoint)();
     var columnLabel = columnHeadings
         ? " ".concat(columnHeadings.length, " columns,")
         : '';
-    var accessibilityLabelText = (0, react_is_1.isElement)(caption)
-        ? (0, utils_1.getText)(caption)
-        : caption;
+    var captionLabel = caption ? caption : '';
+    var accessibilityLabelText = (0, utils_1.getText)(captionLabel);
     var accessibilityLabel = "data table,".concat(columnLabel, " ").concat(items.length, " rows, ").concat(accessibilityLabelText);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, __assign({ horizontal: true, alwaysBounceHorizontal: false, contentContainerStyle: { flexGrow: 1 } }, { children: (0, jsx_runtime_1.jsxs)(styles_1.StyledTableContainer, __assign({}, rest, { ref: ref }, { children: [caption ? ((0, jsx_runtime_1.jsx)(styles_1.TableCaption, __assign({}, breakpoints, { children: (0, react_is_1.isElement)(caption) ? (caption) : ((0, jsx_runtime_1.jsx)(styles_1.TableCaptionText, __assign({}, breakpoints, { accessibilityLabel: accessibilityLabel }, { children: caption }))) }))) : null, columnHeadings ? ((0, jsx_runtime_1.jsx)(styles_1.TableRowHeading, { children: columnHeadings.map(function (columnHeading, index) { return ((0, react_1.createElement)(styles_1.TableHeader, __assign({}, breakpoints, { key: index, cellWidth: columnWidths[index] }), (0, react_is_1.isElement)(columnHeading) ? (columnHeading) : ((0, jsx_runtime_1.jsx)(styles_1.TableHeaderText, __assign({}, breakpoints, { children: columnHeading }))))); }) })) : null, (0, jsx_runtime_1.jsx)(styles_1.TableBody, { children: items.map(function (rowData, index) { return ((0, jsx_runtime_1.jsx)(TableRow_1.TableRow, { data: rowData, index: index, rowHeadings: rowHeadings, columnWidths: columnWidths, striped: striped }, index)); }) })] })) })));
+    return (react_1.default.createElement(react_native_1.ScrollView, { horizontal: true, alwaysBounceHorizontal: false, contentContainerStyle: { flexGrow: 1 } },
+        react_1.default.createElement(StyledTableContainer, __assign({}, rest, { ref: ref }),
+            caption ? (react_1.default.createElement(TableCaption, __assign({}, breakpoints),
+                react_1.default.createElement(TableCaptionText, __assign({}, breakpoints, { accessibilityLabel: accessibilityLabel }), caption))) : null,
+            columnHeadings ? (react_1.default.createElement(TableRowHeading, null, columnHeadings.map(function (columnHeading, index) { return (react_1.default.createElement(TableHeader, __assign({}, breakpoints, { key: index, cellWidth: columnWidths[index] }),
+                react_1.default.createElement(TableHeaderText, __assign({}, breakpoints), columnHeading))); }))) : null,
+            react_1.default.createElement(TableBody, null, items.map(function (rowData, p) { return (react_1.default.createElement(TableRow, { key: p, stripe: striped && p % 2 === 0 }, rowData.map(function (cellData, i) {
+                return rowHeadings && i < 1 ? (react_1.default.createElement(RowHeading, __assign({}, breakpoints, { key: i, testID: "rowHeader", cellWidth: columnWidths[i] }), (0, react_is_1.isElement)(cellData) ? (cellData) : (react_1.default.createElement(TableHeaderText, __assign({}, breakpoints), cellData)))) : (react_1.default.createElement(TableCell, __assign({}, breakpoints, { key: i, testID: "cell", cellWidth: columnWidths[i] }), (0, react_is_1.isElement)(cellData) ? (cellData) : (react_1.default.createElement(CellText, __assign({}, breakpoints), cellData))));
+            }))); })))));
+});
+var StyledTableContainer = styled_native_1.default.View(function (_a) {
+    var dataTable = _a.theme.dataTable;
+    return (0, styled_native_1.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  "])), dataTable.borderWidth, dataTable.borderColor);
+});
+var TableHeader = styled_native_1.default.View(function (_a) {
+    var _b = _a.theme.dataTable.responsivePadding, vertical = _b.vertical, horizontal = _b.horizontal, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding: ", " ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n    flex: ", ";\n  "], ["\n    padding: ", " ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n    flex: ", ";\n  "])), vertical[smallAndUp ? 1 : 0], horizontal[smallAndUp ? 1 : 0], cellWidth, cellWidth === 'auto' ? 1 : 0);
+});
+var TableHeaderText = styled_native_1.default.Text(function (_a) {
+    var _b = _a.theme, tableHeader = _b.dataTable.tableHeader, responsiveFontSizes = _b.responsiveFontSizes, responsiveLineHeights = _b.responsiveLineHeights, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    text-align: left;\n    color: ", ";\n    flex-wrap: wrap;\n\n    line-height: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    text-align: left;\n    color: ", ";\n    flex-wrap: wrap;\n\n    line-height: ", ";\n    font-size: ", ";\n  "])), tableHeader.fontFamily, tableHeader.color, smallAndUp
+        ? responsiveLineHeights.body[1]
+        : responsiveLineHeights.body[0], smallAndUp
+        ? responsiveFontSizes.body[1]
+        : responsiveFontSizes.body[0]);
+});
+var TableCaptionText = styled_native_1.default.Text(function (_a) {
+    var _b = _a.theme, tableCaption = _b.dataTable.tableCaption, responsiveFontSizes = _b.responsiveFontSizes, responsiveLineHeights = _b.responsiveLineHeights, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-family: ", ";\n    text-align: left;\n    color: ", ";\n    flex-wrap: wrap;\n    line-height: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    text-align: left;\n    color: ", ";\n    flex-wrap: wrap;\n    line-height: ", ";\n    font-size: ", ";\n  "])), tableCaption.fontFamily, tableCaption.color, smallAndUp
+        ? responsiveLineHeights.level4[1]
+        : responsiveLineHeights.level4[0], smallAndUp
+        ? responsiveFontSizes.level4[1]
+        : responsiveFontSizes.level4[0]);
+});
+var CellText = styled_native_1.default.Text(function (_a) {
+    var _b = _a.theme, text = _b.text, responsiveFontSizes = _b.responsiveFontSizes, responsiveLineHeights = _b.responsiveLineHeights, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.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  "])), text.fontFamily, smallAndUp
+        ? responsiveLineHeights.body[1]
+        : responsiveLineHeights.body[0], smallAndUp
+        ? responsiveFontSizes.body[1]
+        : responsiveFontSizes.body[0]);
+});
+var TableCaption = styled_native_1.default.View(function (_a) {
+    var _b = _a.theme.dataTable.responsivePadding, vertical = _b.vertical, horizontal = _b.horizontal, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", " ", ";\n  "], ["\n    padding: ", " ", ";\n  "])), vertical[smallAndUp ? 1 : 0], horizontal[smallAndUp ? 1 : 0]);
+});
+var TableRow = styled_native_1.default.View(function (_a) {
+    var dataTable = _a.theme.dataTable, stripe = _a.stripe;
+    return (0, styled_native_1.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
+        ? dataTable.tableRow.stripeColor
+        : dataTable.tableRow.backgroundColor, stripe ? '0px' : "".concat(dataTable.borderWidth), stripe ? 'transparent' : "".concat(dataTable.borderColor));
+});
+var TableRowHeading = styled_native_1.default.View(function (_a) {
+    var dataTable = _a.theme.dataTable;
+    return (0, styled_native_1.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  "])), dataTable.tableHeader.backgroundColor, dataTable.tableHeader.borderWidth, dataTable.tableHeader.borderColor);
+});
+var TableBody = styled_native_1.default.View(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"], ["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"])));
+var TableCell = styled_native_1.default.View(function (_a) {
+    var _b = _a.theme.dataTable.responsivePadding, vertical = _b.vertical, horizontal = _b.horizontal, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "])), vertical[smallAndUp ? 1 : 0], horizontal[smallAndUp ? 1 : 0], cellWidth, cellWidth === 'auto' ? 1 : 0);
+});
+var RowHeading = styled_native_1.default.View(function (_a) {
+    var _b = _a.theme.dataTable.responsivePadding, vertical = _b.vertical, horizontal = _b.horizontal, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "])), vertical[smallAndUp ? 1 : 0], horizontal[smallAndUp ? 1 : 0], cellWidth, cellWidth === 'auto' ? 1 : 0);
 });
+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/components/DataTable/index.d.ts

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

package/dist/components/DataTable/index.js

@@ -1,21 +1,5 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTable = void 0;
 var DataTable_1 = require("./DataTable");
 Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return DataTable_1.DataTable; } });
-__exportStar(require("./styles"), exports);
-__exportStar(require("./types"), exports);

package/dist/components/DateField/DateField.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { TextInput } from 'react-native';
 import { FullWidthOptions } from '../../hooks';
 export declare type DateFormat = {
@@ -17,5 +17,5 @@ declare type Props = {
     testID?: string;
     editable?: boolean;
 };
-export declare const DateField: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<TextInput>>;
+export declare const DateField: React.ForwardRefExoticComponent<Props & React.RefAttributes<TextInput>>;
 export {};