@ovotech/element-native 5.4.2 → 5.4.3-canary-8992fd2-429

package/dist/components/Cards/ProgressBarCard/ProgressBarCard.styles.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValueBarRemainder = exports.EPCBarSegment = exports.EPCBarMarkerLayer = exports.ProgressBarContainer = exports.ProgressBarWrapper = exports.StyledP = exports.ValueTextContainer = exports.ValuesContainer = exports.ValueWrapper = exports.ValueBlockWrapper = exports.HeadingContainer = exports.CardWithProgressBar = void 0;
+const react_native_1 = require("react-native");
+const __1 = require("../..");
+const styled_native_1 = __importDefault(require("../../../styled.native"));
+const P_1 = require("../../P");
+const shared_1 = require("../shared");
+exports.CardWithProgressBar = (0, styled_native_1.default)(__1.Card)(({ isSmall }) => ({
+    minHeight: isSmall ? shared_1.SmallCardHeight : undefined,
+    justifyContent: 'space-between',
+}));
+exports.HeadingContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
+    marginBottom: theme.space[350],
+}));
+exports.ValueBlockWrapper = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
+    flexDirection: 'row',
+    gap: theme.space[300],
+}));
+exports.ValueWrapper = (0, styled_native_1.default)(react_native_1.View)(({ isSmall, hasValue2, theme }) => ({
+    width: isSmall || !hasValue2 ? undefined : '50%',
+    gap: theme.space[100],
+}));
+exports.ValuesContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: theme.space[100],
+}));
+exports.ValueTextContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    marginBottom: theme.space[25],
+}));
+exports.StyledP = (0, styled_native_1.default)(P_1.P)(({ theme }) => ({
+    lineHeight: theme.font.lineHeight.md.mediaQuery.sm,
+}));
+// EPC/Value Bar styles
+exports.ProgressBarWrapper = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
+    width: '100%',
+    height: theme.space[800],
+    justifyContent: 'center',
+}));
+exports.ProgressBarContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
+    flexDirection: 'row',
+    height: theme.space[100],
+    borderRadius: theme.border.radius.sm,
+    overflow: 'hidden',
+}));
+exports.EPCBarMarkerLayer = (0, styled_native_1.default)(react_native_1.View)({
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+});
+exports.EPCBarSegment = (0, styled_native_1.default)(react_native_1.View)({
+    flex: 1,
+});
+exports.ValueBarRemainder = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
+    backgroundColor: theme.color.surface.dim,
+}));

package/dist/components/Cards/ProgressBarCard/index.d.ts

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

package/dist/components/Cards/ProgressBarCard/index.js

@@ -0,0 +1,17 @@
+"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 });
+__exportStar(require("./ProgressBarCard"), exports);

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

@@ -0,0 +1,6 @@
+export { AccountCard } from './AccountCard';
+export { BalanceCard } from './BalanceCard';
+export { IconDataCard } from './IconDataCard';
+export { IconTextCard } from './IconTextCard';
+export { LinkTextCard } from './LinkTextCard';
+export { ProgressBarCard } from './ProgressBarCard';

package/dist/components/Cards/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressBarCard = exports.LinkTextCard = exports.IconTextCard = exports.IconDataCard = exports.BalanceCard = exports.AccountCard = void 0;
+var AccountCard_1 = require("./AccountCard");
+Object.defineProperty(exports, "AccountCard", { enumerable: true, get: function () { return AccountCard_1.AccountCard; } });
+var BalanceCard_1 = require("./BalanceCard");
+Object.defineProperty(exports, "BalanceCard", { enumerable: true, get: function () { return BalanceCard_1.BalanceCard; } });
+var IconDataCard_1 = require("./IconDataCard");
+Object.defineProperty(exports, "IconDataCard", { enumerable: true, get: function () { return IconDataCard_1.IconDataCard; } });
+var IconTextCard_1 = require("./IconTextCard");
+Object.defineProperty(exports, "IconTextCard", { enumerable: true, get: function () { return IconTextCard_1.IconTextCard; } });
+var LinkTextCard_1 = require("./LinkTextCard");
+Object.defineProperty(exports, "LinkTextCard", { enumerable: true, get: function () { return LinkTextCard_1.LinkTextCard; } });
+var ProgressBarCard_1 = require("./ProgressBarCard");
+Object.defineProperty(exports, "ProgressBarCard", { enumerable: true, get: function () { return ProgressBarCard_1.ProgressBarCard; } });

package/dist/components/Cards/shared.d.ts

@@ -0,0 +1,3 @@
+import { ColorKey } from './types';
+export declare const SmallCardHeight = 172;
+export declare const resolveColor: (colorKey?: ColorKey) => string;

package/dist/components/Cards/shared.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveColor = exports.SmallCardHeight = void 0;
+const styled_native_1 = require("../../styled.native");
+exports.SmallCardHeight = 172;
+const resolveColor = (colorKey = 'default') => {
+    const theme = (0, styled_native_1.useTheme)();
+    if (colorKey === 'default' || !colorKey) {
+        return theme.color.brand.brand;
+    }
+    if (colorKey === 'onSurface') {
+        return theme.color.surface.onSurface;
+    }
+    return colorKey;
+};
+exports.resolveColor = resolveColor;

package/dist/components/Cards/types.d.ts

@@ -0,0 +1,5 @@
+export type TitleSegment = {
+    color?: 'default' | 'onSurface' | string;
+    text: string;
+};
+export type ColorKey = TitleSegment['color'] | undefined;

package/dist/components/Cards/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,77 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_core_1 = require("@ovotech/element-core");
+const react_native_1 = require("react-native");
+const styled_native_1 = __importDefault(require("../../styled.native"));
+const ErrorText_1 = require("../ErrorText");
+const FormGroup_1 = require("../FormGroup");
+const HintText_1 = require("../HintText");
+const Icon_1 = require("../Icon/Icon");
+const LabelText_1 = require("../LabelText");
+const Stack_1 = require("../Stack");
+const StyledCheckboxInputWrapper = styled_native_1.default.View(({ theme }) => {
+    const checkboxSize = theme.space[600];
+    const gap = theme.space[200];
+    return `
+      width: ${(0, element_core_1.numToPx)(checkboxSize + gap)};
+      height: ${(0, element_core_1.numToPx)(theme.space[1100])};
+    `;
+});
+const StyledCheckboxInput = styled_native_1.default.View(({ theme, invalid, checked }) => {
+    return `
+      width: ${(0, element_core_1.numToPx)(theme.space[600])};
+      height: ${(0, element_core_1.numToPx)(theme.space[600])};
+      border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid;
+      margin-top: 10px;
+      border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.xs)};
+      border-color: ${invalid
+        ? theme.input.color.borderError
+        : checked
+            ? theme.input.color.selected
+            : theme.input.color.border};
+      background: ${checked ? theme.input.color.selectedTint : 'transparent'};
+    `;
+});
+const CheckboxCheck = (props) => {
+    return (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ name: "check", size: 16 }, props));
+};
+const StyledCheckboxInputCheck = (0, styled_native_1.default)(CheckboxCheck)(({ theme, checked, }) => {
+    return `
+      margin-top: ${(0, element_core_1.numToPx)(theme.space[50])};
+      margin-left: ${(0, element_core_1.numToPx)(theme.space[50])};
+      color: ${theme.color.alert.info};
+      opacity: ${checked ? 1 : 0};
+    `;
+});
+const Input = (_a) => {
+    var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
+    return ((0, jsx_runtime_1.jsx)(StyledCheckboxInputWrapper, Object.assign({}, rest, { children: (0, jsx_runtime_1.jsx)(StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(StyledCheckboxInputCheck, { checked: checked }) }) })));
+};
+const CheckLabelText = (0, styled_native_1.default)(LabelText_1.LabelText)(({ theme }) => `
+    padding-top: ${(0, element_core_1.numToPx)(theme.space[300])};
+  `);
+const StyledWrapper = styled_native_1.default.View `
+  flex-direction: row;
+`;
+const Checkbox = (_a) => {
+    var { label, hint, error, checked, optional, invalid, activeOpacity = 0.8, testID, ref } = _a, rest = __rest(_a, ["label", "hint", "error", "checked", "optional", "invalid", "activeOpacity", "testID", "ref"]);
+    const hasError = !!error;
+    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, { error: hasError, children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { spaceBetween: 1, children: [error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null, (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { 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, { 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;

package/dist/components/Checkbox/CheckboxField.js

@@ -0,0 +1,32 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const utils_1 = require("../../utils");
+const ErrorText_1 = require("../ErrorText");
+const FormGroup_1 = require("../FormGroup");
+const HintText_1 = require("../HintText");
+const LabelText_1 = require("../LabelText");
+const Stack_1 = require("../Stack");
+const CheckboxField = (_a) => {
+    var { label, hint, error, children, optional = false } = _a, rest = __rest(_a, ["label", "hint", "error", "children", "optional"]);
+    const hasError = !!error;
+    const validChildren = (0, utils_1.getValidChildren)(children);
+    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, Object.assign({}, rest, { error: hasError, children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { 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(validChildren, (child) => (0, react_1.cloneElement)(child, {
+                        invalid: hasError ? true : child.props.invalid,
+                    })) })] }) })));
+};
+exports.CheckboxField = CheckboxField;

package/dist/components/Checkbox/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxField = exports.Checkbox = void 0;
+var Checkbox_1 = require("./Checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
+var CheckboxField_1 = require("./CheckboxField");
+Object.defineProperty(exports, "CheckboxField", { enumerable: true, get: function () { return CheckboxField_1.CheckboxField; } });

package/dist/components/CurrencyField/CurrencyField.js

@@ -0,0 +1,22 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrencyField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CurrencyInput_1 = require("../CurrencyInput");
+const Field_1 = require("../Field");
+const CurrencyField = (_a) => {
+    var { ref } = _a, props = __rest(_a, ["ref"]);
+    return ((0, jsx_runtime_1.jsx)(Field_1.Field, Object.assign({ affixWidth: 40 }, props, { children: (0, jsx_runtime_1.jsx)(CurrencyInput_1.CurrencyInput, { ref: ref }) })));
+};
+exports.CurrencyField = CurrencyField;

package/dist/components/CurrencyField/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrencyField = void 0;
+var CurrencyField_1 = require("./CurrencyField");
+Object.defineProperty(exports, "CurrencyField", { enumerable: true, get: function () { return CurrencyField_1.CurrencyField; } });

package/dist/components/CurrencyInput/CurrencyInput.js

@@ -0,0 +1,26 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrencyInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const NumberInput_1 = require("../NumberInput");
+const CurrencyInput = (_a) => {
+    var { currency = 'GBP', invalid, accessibilityLabel = '', ref } = _a, rest = __rest(_a, ["currency", "invalid", "accessibilityLabel", "ref"]);
+    const inputRef = (0, react_1.createRef)();
+    const updatedAccessibilityLabel = `${accessibilityLabel} ${currency === 'GBP' ? 'pounds' : currency === 'EUR' ? 'euro' : 'dollar'}`.trim();
+    const iconName = currency === 'GBP' ? 'pound' : currency === 'EUR' ? 'euro' : 'dollar';
+    return ((0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, Object.assign({ accessibilityLabel: updatedAccessibilityLabel, invalid: invalid, iconLeft: iconName, ref: (0, utils_1.mergeRefs)(ref, inputRef) }, rest)));
+};
+exports.CurrencyInput = CurrencyInput;

package/dist/components/CurrencyInput/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrencyInput = void 0;
+var CurrencyInput_1 = require("./CurrencyInput");
+Object.defineProperty(exports, "CurrencyInput", { enumerable: true, get: function () { return CurrencyInput_1.CurrencyInput; } });

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,35 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTable = void 0;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_is_1 = require("react-is");
+const react_native_1 = require("react-native");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("../../utils");
+const TableRow_1 = require("./TableRow");
+const styles_1 = require("./styles");
+const DataTable = (_a) => {
+    var { items, columnHeadings, caption, rowHeadings, columnWidths, striped = true, ref } = _a, rest = __rest(_a, ["items", "columnHeadings", "caption", "rowHeadings", "columnWidths", "striped", "ref"]);
+    const breakpoints = (0, hooks_1.useBreakpoint)();
+    const columnLabel = columnHeadings
+        ? ` ${columnHeadings.length} columns,`
+        : '';
+    const accessibilityLabelText = (0, react_is_1.isElement)(caption)
+        ? (0, utils_1.getText)(caption)
+        : caption;
+    const accessibilityLabel = `data table,${columnLabel} ${items.length} rows, ${accessibilityLabelText}`;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: true, alwaysBounceHorizontal: false, contentContainerStyle: { flexGrow: 1 }, children: (0, jsx_runtime_1.jsxs)(styles_1.StyledTableContainer, Object.assign({}, rest, { ref: ref, children: [caption ? ((0, jsx_runtime_1.jsx)(styles_1.TableCaption, Object.assign({}, breakpoints, { children: (0, react_is_1.isElement)(caption) ? (caption) : ((0, jsx_runtime_1.jsx)(styles_1.TableCaptionText, Object.assign({}, breakpoints, { accessibilityLabel: accessibilityLabel, children: caption }))) }))) : null, columnHeadings ? ((0, jsx_runtime_1.jsx)(styles_1.TableRowHeading, { children: columnHeadings.map((columnHeading, index) => ((0, react_1.createElement)(styles_1.TableHeader, Object.assign({}, breakpoints, { key: index, cellWidth: columnWidths[index] }), (0, react_is_1.isElement)(columnHeading) ? (columnHeading) : ((0, jsx_runtime_1.jsx)(styles_1.TableHeaderText, Object.assign({}, breakpoints, { children: columnHeading })))))) })) : null, (0, jsx_runtime_1.jsx)(styles_1.TableBody, { children: items.map((rowData, index) => ((0, jsx_runtime_1.jsx)(TableRow_1.TableRow, { data: rowData, index: index, rowHeadings: rowHeadings, columnWidths: columnWidths, striped: striped }, index))) })] })) }));
+};
+exports.DataTable = DataTable;

package/dist/components/DataTable/TableRow.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableRow = void 0;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_is_1 = require("react-is");
+const react_native_1 = require("react-native");
+const hooks_1 = require("../../hooks");
+const styles_1 = require("./styles");
+const TableRow = ({ data, index, striped, rowHeadings, columnWidths, }) => {
+    const breakpoints = (0, hooks_1.useBreakpoint)();
+    const cells = data.map((cellData, i) => {
+        if (typeof cellData === 'object' &&
+            (cellData === null || cellData === void 0 ? void 0 : cellData.hasOwnProperty('isSeparator')) &&
+            (cellData === null || cellData === void 0 ? void 0 : cellData.hasOwnProperty('content'))) {
+            return ((0, jsx_runtime_1.jsx)(styles_1.StyledSeparatorRow, { testID: "separatorRow", width: react_native_1.Dimensions.get('window').width, children: (0, jsx_runtime_1.jsx)(styles_1.SeparatorRowText, Object.assign({}, breakpoints, { children: cellData === null || cellData === void 0 ? void 0 : cellData.content })) }, i));
+        }
+        if (rowHeadings && i === 0) {
+            return ((0, react_1.createElement)(styles_1.RowHeading, Object.assign({}, breakpoints, { key: i, testID: "rowHeader", cellWidth: columnWidths[i] }), (0, react_is_1.isElement)(cellData) ? (cellData) : ((0, jsx_runtime_1.jsx)(styles_1.TableHeaderText, Object.assign({}, breakpoints, { children: cellData })))));
+        }
+        return ((0, react_1.createElement)(styles_1.TableCell, Object.assign({}, breakpoints, { key: i, testID: "cell", cellWidth: columnWidths[i] }), (0, react_is_1.isElement)(cellData) ? (cellData) : ((0, jsx_runtime_1.jsx)(styles_1.CellText, Object.assign({}, breakpoints, { children: cellData })))));
+    });
+    return ((0, jsx_runtime_1.jsx)(styles_1.TableRow, { stripe: striped && index % 2 === 0, children: cells }));
+};
+exports.TableRow = TableRow;

package/dist/components/DataTable/index.js

@@ -0,0 +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);