@ovotech/element-native 5.4.3 → 5.6.0

package/dist/components/CurrencyInput/styled.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledCurrencySymbol = exports.StyledCurrencySymbolWrapper = exports.StyledCurrencyInput = exports.CurrencyInputWrapper = void 0;
+const react_native_1 = require("react-native");
+const styled_native_1 = __importDefault(require("../../styled.native"));
+const theme_1 = require("../../theme");
+const NumberInput_1 = require("../NumberInput");
+const P_1 = require("../P");
+exports.CurrencyInputWrapper = (0, styled_native_1.default)(react_native_1.View) `
+  position: relative;
+`;
+exports.StyledCurrencyInput = (0, styled_native_1.default)(NumberInput_1.NumberInput)(({ theme, smallAndUp }) => `
+  padding-left: ${(0, theme_1.numToPx)(theme.space[800])};
+  padding-bottom: ${(0, theme_1.numToPx)(theme.space[100])};
+  font-family: ${theme.native.font.family.black};
+  font-size: ${(0, theme_1.numToPx)(theme.font.size['4xl'].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+  line-height: ${(0, theme_1.numToPx)(theme.font.size['4xl'].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+  letter-spacing: ${(0, theme_1.numToPx)(theme.font.letterSpacing['4xl'].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+`);
+exports.StyledCurrencySymbolWrapper = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => {
+    return `
+  position: absolute;
+  width: ${(0, theme_1.numToPx)(theme.space[700])};
+  height: ${(0, theme_1.numToPx)(theme.space[700])};
+  top: 50%;
+  margin-top: -${(0, theme_1.numToPx)(theme.space[350])};
+  left: ${(0, theme_1.numToPx)(theme.space[400])};
+`;
+});
+exports.StyledCurrencySymbol = (0, styled_native_1.default)(P_1.P)(({ theme, smallAndUp, }) => {
+    return `
+  font-family: ${theme.native.font.family.bold};
+  font-size: ${(0, theme_1.numToPx)(theme.font.size.xl.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+  line-height: ${(0, theme_1.numToPx)(theme.font.lineHeight.xl.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+`;
+});

package/dist/components/DataTable/DataTable.js

@@ -1,19 +1,35 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isElement as isReactElement } from 'react-is';
-import { ScrollView } from 'react-native';
-import { useBreakpoint } from '../../hooks';
-import { getText } from '../../utils';
-import { TableRow } from './TableRow';
-import { StyledTableContainer, TableBody, TableCaption, TableCaptionText, TableHeader, TableHeaderText, TableRowHeading, } from './styles';
-export const DataTable = ({ items, columnHeadings, caption, rowHeadings, columnWidths, striped = true, ref, ...rest }) => {
-    const breakpoints = useBreakpoint();
+"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 = isReactElement(caption)
-        ? getText(caption)
+    const accessibilityLabelText = (0, react_is_1.isElement)(caption)
+        ? (0, utils_1.getText)(caption)
         : caption;
     const accessibilityLabel = `data table,${columnLabel} ${items.length} rows, ${accessibilityLabelText}`;
-    return (_jsx(ScrollView, { horizontal: true, alwaysBounceHorizontal: false, contentContainerStyle: { flexGrow: 1 }, children: _jsxs(StyledTableContainer, { ...rest, ref: ref, children: [caption ? (_jsx(TableCaption, { ...breakpoints, children: isReactElement(caption) ? (caption) : (_jsx(TableCaptionText, { ...breakpoints, accessibilityLabel: accessibilityLabel, children: caption })) })) : null, columnHeadings ? (_jsx(TableRowHeading, { children: columnHeadings.map((columnHeading, index) => (_createElement(TableHeader, { ...breakpoints, key: index, cellWidth: columnWidths[index] }, isReactElement(columnHeading) ? (columnHeading) : (_jsx(TableHeaderText, { ...breakpoints, children: columnHeading }))))) })) : null, _jsx(TableBody, { children: items.map((rowData, index) => (_jsx(TableRow, { data: rowData, index: index, rowHeadings: rowHeadings, columnWidths: columnWidths, striped: striped }, index))) })] }) }));
+    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

@@ -1,21 +1,25 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { isElement as isReactElement } from 'react-is';
-import { Dimensions } from 'react-native';
-import { useBreakpoint } from '../../hooks';
-import { CellText, RowHeading, SeparatorRowText, StyledSeparatorRow, TableRow as StyledTableRow, TableCell, TableHeaderText, } from './styles';
-export const TableRow = ({ data, index, striped, rowHeadings, columnWidths, }) => {
-    const breakpoints = useBreakpoint();
+"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?.hasOwnProperty('isSeparator') &&
-            cellData?.hasOwnProperty('content')) {
-            return (_jsx(StyledSeparatorRow, { testID: "separatorRow", width: Dimensions.get('window').width, children: _jsx(SeparatorRowText, { ...breakpoints, children: cellData?.content }) }, i));
+            (cellData === null || cellData === void 0 ? void 0 : cellData.hasOwnProperty('isSeparator')) &&
+            (cellData === null || cellData === void 0 ? void 0 : cellData.hasOwnProperty('content'))) {
+            return ((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 (_createElement(RowHeading, { ...breakpoints, key: i, testID: "rowHeader", cellWidth: columnWidths[i] }, isReactElement(cellData) ? (cellData) : (_jsx(TableHeaderText, { ...breakpoints, children: cellData }))));
+            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 (_createElement(TableCell, { ...breakpoints, key: i, testID: "cell", cellWidth: columnWidths[i] }, isReactElement(cellData) ? (cellData) : (_jsx(CellText, { ...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 (_jsx(StyledTableRow, { stripe: striped && index % 2 === 0, children: cells }));
+    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

@@ -1,3 +1,21 @@
-export { DataTable } from './DataTable';
-export * from './styles';
-export * from './types';
+"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/DataTable/styles.d.ts

@@ -38,6 +38,7 @@ export declare const StyledTableContainer: import("styled-components").StyledCom
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -80,6 +81,7 @@ export declare const StyledTableContainer: import("styled-components").StyledCom
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -88,6 +90,7 @@ export declare const StyledTableContainer: import("styled-components").StyledCom
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -613,6 +616,7 @@ export declare const TableHeader: import("styled-components").StyledComponent<ty
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -655,6 +659,7 @@ export declare const TableHeader: import("styled-components").StyledComponent<ty
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -663,6 +668,7 @@ export declare const TableHeader: import("styled-components").StyledComponent<ty
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1190,6 +1196,7 @@ export declare const TableHeaderText: import("styled-components").StyledComponen
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1232,6 +1239,7 @@ export declare const TableHeaderText: import("styled-components").StyledComponen
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1240,6 +1248,7 @@ export declare const TableHeaderText: import("styled-components").StyledComponen
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1765,6 +1774,7 @@ export declare const TableCaptionText: import("styled-components").StyledCompone
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1807,6 +1817,7 @@ export declare const TableCaptionText: import("styled-components").StyledCompone
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1815,6 +1826,7 @@ export declare const TableCaptionText: import("styled-components").StyledCompone
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -2340,6 +2352,7 @@ export declare const CellText: import("styled-components").StyledComponent<typeo
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -2382,6 +2395,7 @@ export declare const CellText: import("styled-components").StyledComponent<typeo
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -2390,6 +2404,7 @@ export declare const CellText: import("styled-components").StyledComponent<typeo
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -2915,6 +2930,7 @@ export declare const TableCaption: import("styled-components").StyledComponent<t
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -2957,6 +2973,7 @@ export declare const TableCaption: import("styled-components").StyledComponent<t
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -2965,6 +2982,7 @@ export declare const TableCaption: import("styled-components").StyledComponent<t
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -3490,6 +3508,7 @@ export declare const TableRow: import("styled-components").StyledComponent<typeo
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -3532,6 +3551,7 @@ export declare const TableRow: import("styled-components").StyledComponent<typeo
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -3540,6 +3560,7 @@ export declare const TableRow: import("styled-components").StyledComponent<typeo
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -4067,6 +4088,7 @@ export declare const TableRowHeading: import("styled-components").StyledComponen
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -4109,6 +4131,7 @@ export declare const TableRowHeading: import("styled-components").StyledComponen
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -4117,6 +4140,7 @@ export declare const TableRowHeading: import("styled-components").StyledComponen
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -4642,6 +4666,7 @@ export declare const TableBody: import("styled-components").StyledComponent<type
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -4684,6 +4709,7 @@ export declare const TableBody: import("styled-components").StyledComponent<type
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -4692,6 +4718,7 @@ export declare const TableBody: import("styled-components").StyledComponent<type
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -5217,6 +5244,7 @@ export declare const TableCell: import("styled-components").StyledComponent<type
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -5259,6 +5287,7 @@ export declare const TableCell: import("styled-components").StyledComponent<type
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -5267,6 +5296,7 @@ export declare const TableCell: import("styled-components").StyledComponent<type
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -5794,6 +5824,7 @@ export declare const RowHeading: import("styled-components").StyledComponent<typ
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -5836,6 +5867,7 @@ export declare const RowHeading: import("styled-components").StyledComponent<typ
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -5844,6 +5876,7 @@ export declare const RowHeading: import("styled-components").StyledComponent<typ
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -6371,6 +6404,7 @@ export declare const StyledSeparatorRow: import("styled-components").StyledCompo
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -6413,6 +6447,7 @@ export declare const StyledSeparatorRow: import("styled-components").StyledCompo
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -6421,6 +6456,7 @@ export declare const StyledSeparatorRow: import("styled-components").StyledCompo
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -6948,6 +6984,7 @@ export declare const SeparatorRowText: import("styled-components").StyledCompone
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -6990,6 +7027,7 @@ export declare const SeparatorRowText: import("styled-components").StyledCompone
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -6998,6 +7036,7 @@ export declare const SeparatorRowText: import("styled-components").StyledCompone
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

package/dist/components/DataTable/styles.js

@@ -1,100 +1,136 @@
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-export const StyledTableContainer = styled.View(({ theme }) => css `
+"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 __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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SeparatorRowText = exports.StyledSeparatorRow = exports.RowHeading = exports.TableCell = exports.TableBody = exports.TableRowHeading = exports.TableRow = exports.TableCaption = exports.CellText = exports.TableCaptionText = exports.TableHeaderText = exports.TableHeader = exports.StyledTableContainer = void 0;
+const element_core_1 = require("@ovotech/element-core");
+const styled_native_1 = __importStar(require("../../styled.native"));
+exports.StyledTableContainer = styled_native_1.default.View(({ theme }) => (0, styled_native_1.css) `
     flex-grow: 1;
-    border-bottom-width: ${numToPx(theme.border.width.sm)};
+    border-bottom-width: ${(0, element_core_1.numToPx)(theme.border.width.sm)};
     border-bottom-color: ${theme.color.surface.borderDim};
   `);
-export const TableHeader = styled.View(({ theme, cellWidth, smallAndUp }) => css `
-    padding-top: ${numToPx(theme.space[smallAndUp ? 300 : 200])};
-    padding-bottom: ${numToPx(theme.space[smallAndUp ? 300 : 200])};
-    padding-left: ${numToPx(theme.space[200])};
-    padding-right: ${numToPx(theme.space[200])};
+exports.TableHeader = styled_native_1.default.View(({ theme, cellWidth, smallAndUp }) => (0, styled_native_1.css) `
+    padding-top: ${(0, element_core_1.numToPx)(theme.space[smallAndUp ? 300 : 200])};
+    padding-bottom: ${(0, element_core_1.numToPx)(theme.space[smallAndUp ? 300 : 200])};
+    padding-left: ${(0, element_core_1.numToPx)(theme.space[200])};
+    padding-right: ${(0, element_core_1.numToPx)(theme.space[200])};
     flex: ${cellWidth === 'auto' ? 1 : 0};
     align-self: stretch;
     flex-direction: row;
     width: ${cellWidth};
   `);
-export const TableHeaderText = styled.Text(({ theme, smallAndUp }) => css `
+exports.TableHeaderText = styled_native_1.default.Text(({ theme, smallAndUp }) => (0, styled_native_1.css) `
     font-family: ${theme.native.font.family.bold};
-    line-height: ${numToPx(theme.font.lineHeight.md.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
-    font-size: ${numToPx(theme.font.size.md.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+    line-height: ${(0, element_core_1.numToPx)(theme.font.lineHeight.md.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+    font-size: ${(0, element_core_1.numToPx)(theme.font.size.md.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
     color: ${theme.color.surface.onSurface};
     text-align: left;
     flex-wrap: wrap;
   `);
-export const TableCaptionText = styled.Text(({ theme, smallAndUp }) => css `
+exports.TableCaptionText = styled_native_1.default.Text(({ theme, smallAndUp }) => (0, styled_native_1.css) `
     font-family: ${theme.native.font.family.bold};
-    font-size: ${numToPx(theme.font.size.xl.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
-    line-height: ${numToPx(theme.font.lineHeight.xl.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+    font-size: ${(0, element_core_1.numToPx)(theme.font.size.xl.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+    line-height: ${(0, element_core_1.numToPx)(theme.font.lineHeight.xl.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
     color: ${theme.color.brand.brand};
     text-align: left;
     flex-wrap: wrap;
   `);
-export const CellText = styled.Text(({ theme, smallAndUp }) => css `
+exports.CellText = styled_native_1.default.Text(({ theme, smallAndUp }) => (0, styled_native_1.css) `
     font-family: ${theme.native.font.family.book};
-    line-height: ${numToPx(theme.font.lineHeight.md.mediaQuery.lg)};
-    font-size: ${numToPx(theme.font.size.md.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+    line-height: ${(0, element_core_1.numToPx)(theme.font.lineHeight.md.mediaQuery.lg)};
+    font-size: ${(0, element_core_1.numToPx)(theme.font.size.md.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
   `);
-export const TableCaption = styled.View(({ theme }) => css `
-    padding: ${numToPx(theme.space[400])} ${numToPx(theme.space[200])};
+exports.TableCaption = styled_native_1.default.View(({ theme }) => (0, styled_native_1.css) `
+    padding: ${(0, element_core_1.numToPx)(theme.space[400])} ${(0, element_core_1.numToPx)(theme.space[200])};
   `);
-export const TableRow = styled.View(({ theme, stripe }) => css `
+exports.TableRow = styled_native_1.default.View(({ theme, stripe }) => (0, styled_native_1.css) `
     background-color: ${stripe
     ? theme.color.surface.dim
     : theme.color.surface.surface};
     flex-direction: row;
     align-items: stretch;
-    border-bottom-width: ${stripe ? '0px' : numToPx(theme.border.width.sm)};
+    border-bottom-width: ${stripe ? '0px' : (0, element_core_1.numToPx)(theme.border.width.sm)};
     border-bottom-color: ${stripe
     ? 'transparent'
     : `${theme.color.surface.borderDim}`};
   `);
-export const TableRowHeading = styled.View(({ theme }) => css `
+exports.TableRowHeading = styled_native_1.default.View(({ theme }) => (0, styled_native_1.css) `
     background-color: ${theme.color.surface.surface};
-    border-bottom-width: ${numToPx(theme.border.width.sm)};
+    border-bottom-width: ${(0, element_core_1.numToPx)(theme.border.width.sm)};
     border-bottom-color: ${theme.color.surface.border};
     flex-direction: row;
     align-items: stretch;
   `);
-export const TableBody = styled.View `
+exports.TableBody = styled_native_1.default.View `
   flex-direction: column;
   flex-wrap: nowrap;
 `;
-export const TableCell = styled.View(({ theme, cellWidth, smallAndUp }) => {
-    return css `
-      padding-top: ${numToPx(theme.space[smallAndUp ? 300 : 200])};
-      padding-bottom: ${numToPx(theme.space[smallAndUp ? 300 : 200])};
-      padding-left: ${numToPx(theme.space[200])};
-      padding-right: ${numToPx(theme.space[200])};
+exports.TableCell = styled_native_1.default.View(({ theme, cellWidth, smallAndUp }) => {
+    return (0, styled_native_1.css) `
+      padding-top: ${(0, element_core_1.numToPx)(theme.space[smallAndUp ? 300 : 200])};
+      padding-bottom: ${(0, element_core_1.numToPx)(theme.space[smallAndUp ? 300 : 200])};
+      padding-left: ${(0, element_core_1.numToPx)(theme.space[200])};
+      padding-right: ${(0, element_core_1.numToPx)(theme.space[200])};
       width: ${cellWidth};
       flex: ${cellWidth === 'auto' ? 1 : 0};
     `;
 });
-export const RowHeading = styled.View(({ theme, cellWidth, smallAndUp }) => {
-    return css `
-      padding-top: ${numToPx(theme.space[smallAndUp ? 300 : 200])};
-      padding-bottom: ${numToPx(theme.space[smallAndUp ? 300 : 200])};
-      padding-left: ${numToPx(theme.space[200])};
-      padding-right: ${numToPx(theme.space[200])};
+exports.RowHeading = styled_native_1.default.View(({ theme, cellWidth, smallAndUp }) => {
+    return (0, styled_native_1.css) `
+      padding-top: ${(0, element_core_1.numToPx)(theme.space[smallAndUp ? 300 : 200])};
+      padding-bottom: ${(0, element_core_1.numToPx)(theme.space[smallAndUp ? 300 : 200])};
+      padding-left: ${(0, element_core_1.numToPx)(theme.space[200])};
+      padding-right: ${(0, element_core_1.numToPx)(theme.space[200])};
       width: ${cellWidth};
       flex: ${cellWidth === 'auto' ? 1 : 0};
     `;
 });
-export const StyledSeparatorRow = styled.View(({ theme, width }) => {
+exports.StyledSeparatorRow = styled_native_1.default.View(({ theme, width }) => {
     const minWidth = width ? `${width - theme.space[200] * 2}px` : '100%';
     return `
       min-width: ${minWidth};
       flex: 1;
       flex-direction: row;
       background-color: ${theme.color.surface.bright};
-      padding: ${numToPx(theme.space[100])} ${numToPx(theme.space[200])};
+      padding: ${(0, element_core_1.numToPx)(theme.space[100])} ${(0, element_core_1.numToPx)(theme.space[200])};
     `;
 });
-export const SeparatorRowText = styled.Text(({ theme, smallAndUp }) => `
+exports.SeparatorRowText = styled_native_1.default.Text(({ theme, smallAndUp }) => `
   flex: 1;
   font-family: ${theme.native.font.family.book};
-  font-size: ${numToPx(theme.font.size.sm.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
-  line-height: ${numToPx(theme.font.lineHeight.sm.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+  font-size: ${(0, element_core_1.numToPx)(theme.font.size.sm.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+  line-height: ${(0, element_core_1.numToPx)(theme.font.lineHeight.sm.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
   color: ${theme.color.surface.onSurfaceVariant};
 `);

package/dist/components/DataTable/types.js

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