@ovotech/element-native 2.2.0 → 3.0.0-canary-edaf96f-93

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

@@ -1,15 +1,13 @@
-import { ComponentProps } from 'react';
-import { Breakpoints } from '../../hooks';
-declare const StyledCard: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
+export declare const Card: 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 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
-        opacity: Record<"transparent" | "translucent" | "solid", string | number>;
-        color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
+        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
+        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
             lightest: string;
             lighter: string;
             light: string;
@@ -25,71 +23,53 @@ declare const StyledCard: import("styled-components").StyledComponent<typeof imp
             web: string;
         }>;
         fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+        fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
             small: string | number;
             large: string | number;
         }>;
-        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+        lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
             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<"outline" | "surface", string>;
-        inverted: Record<"surface" | "border", string> & {
+        focus: Record<"surface" | "outline" | "hover", string>;
+        inverted: Record<"border" | "surface", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
         success: {
             border: string;
             surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
         };
         warning: {
             border: string;
             surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
         };
         error: {
             border: string;
             surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
         };
         info: {
             border: string;
             surface: 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;
-            };
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
         };
+        data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
     };
     component: {
         heading1: {
@@ -220,9 +200,31 @@ declare const StyledCard: import("styled-components").StyledComponent<typeof imp
                 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,33 +1,13 @@
 "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"));
-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    ");
+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 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 React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<TouchableOpacityProps, "children"> & {
+declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<TouchableOpacityProps, "children"> & {
     label: string;
     checked: boolean;
     hint?: ReactNode;
@@ -8,5 +8,5 @@ declare const Checkbox: React.ForwardRefExoticComponent<Omit<TouchableOpacityPro
     optional?: boolean | undefined;
     invalid?: boolean | undefined;
     activeOpacity?: number | undefined;
-} & React.RefAttributes<TouchableOpacity>>;
+} & import("react").RefAttributes<TouchableOpacity>>;
 export { Checkbox };

package/dist/components/Checkbox/Checkbox.js

@@ -14,29 +14,6 @@ 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)
@@ -48,11 +25,15 @@ 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 react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_native_1 = require("react-native");
-var styled_native_1 = __importStar(require("../../styled.native"));
+var styled_native_1 = __importDefault(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var ErrorText_1 = require("../ErrorText");
 var FormGroup_1 = require("../FormGroup");
@@ -67,53 +48,33 @@ 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 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
+    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
         : checked
-            ? checkbox.checkColor
-            : checkbox.borderColor, ";\n      background: ").concat(checked ? checkbox.checkedBackground : checkbox.background, ";\n    ");
+            ? core.color.blue.dark
+            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
 });
 var CheckboxCheck = function (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)));
+    return (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({ name: "check", size: 16 }, props));
 };
 var StyledCheckboxInputCheck = (0, styled_native_1.default)(CheckboxCheck)(function (_a) {
-    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 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 Input = function (_a) {
     var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
-    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 }))));
+    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 }) })) })));
 };
 var CheckLabelText = (0, styled_native_1.default)(LabelText_1.LabelText)(function (_a) {
-    var checkbox = _a.theme.checkbox;
-    return "\n    padding-top: ".concat(checkbox.paddingTop, ";\n  ");
+    var core = _a.theme.core;
+    return "\n    padding-top: ".concat(core.space[3], ";\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 (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))))));
+    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] }))] }) }))] })) })));
 });
 exports.Checkbox = Checkbox;
 var templateObject_1;

package/dist/components/Checkbox/CheckboxField.js

@@ -10,29 +10,6 @@ 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)
@@ -46,7 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxField = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_native_1 = require("react-native");
 var ErrorText_1 = require("../ErrorText");
 var FormGroup_1 = require("../FormGroup");
@@ -56,18 +34,10 @@ 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 (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,
-                });
-            })))));
+    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,
+                        });
+                    }) })] })) })));
 };
 exports.CheckboxField = CheckboxField;

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

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

package/dist/components/DataTable/DataTable.js

@@ -1,8 +1,4 @@
 "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++) {
@@ -14,29 +10,6 @@ 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)
@@ -50,84 +23,24 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTable = void 0;
-var react_1 = __importStar(require("react"));
-var react_native_1 = require("react-native");
+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_native_1 = require("react-native");
 var hooks_1 = require("../../hooks");
-var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
-exports.DataTable = (0, react_1.forwardRef)(function (_a, ref) {
+var TableRow_1 = require("./TableRow");
+var styles_1 = require("./styles");
+exports.DataTable = (0, react_2.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 captionLabel = caption ? caption : '';
-    var accessibilityLabelText = (0, utils_1.getText)(captionLabel);
+    var accessibilityLabelText = (0, react_is_1.isElement)(caption)
+        ? (0, utils_1.getText)(caption)
+        : caption;
     var accessibilityLabel = "data table,".concat(columnLabel, " ").concat(items.length, " rows, ").concat(accessibilityLabelText);
-    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);
+    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)); }) })] })) })));
 });
-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/TableRow.d.ts

@@ -0,0 +1,2 @@
+import { TableRowProps } from './types';
+export declare const TableRow: ({ data, index, striped, rowHeadings, columnWidths, }: TableRowProps) => JSX.Element;

package/dist/components/DataTable/TableRow.js

@@ -0,0 +1,31 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableRow = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_is_1 = require("react-is");
+var hooks_1 = require("../../hooks");
+var styles_1 = require("./styles");
+var TableRow = function (_a) {
+    var data = _a.data, index = _a.index, striped = _a.striped, rowHeadings = _a.rowHeadings, columnWidths = _a.columnWidths;
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    var cells = data.map(function (cellData, i) {
+        if (rowHeadings && i === 0) {
+            return ((0, react_1.createElement)(styles_1.RowHeading, __assign({}, breakpoints, { key: i, testID: "rowHeader", cellWidth: columnWidths[i] }), (0, react_is_1.isElement)(cellData) ? (cellData) : ((0, jsx_runtime_1.jsx)(styles_1.TableHeaderText, __assign({}, breakpoints, { children: cellData })))));
+        }
+        return ((0, react_1.createElement)(styles_1.TableCell, __assign({}, breakpoints, { key: i, testID: "cell", cellWidth: columnWidths[i] }), (0, react_is_1.isElement)(cellData) ? (cellData) : ((0, jsx_runtime_1.jsx)(styles_1.CellText, __assign({}, breakpoints, { children: cellData })))));
+    });
+    return ((0, jsx_runtime_1.jsx)(styles_1.TableRow, __assign({ stripe: striped && index % 2 === 0 }, { children: cells })));
+};
+exports.TableRow = TableRow;

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

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

package/dist/components/DataTable/index.js

@@ -1,5 +1,21 @@
 "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);