@ovotech/element-native 5.4.1 → 5.4.2-canary-317a648-425

package/dist/esm/src/components/DataTable/DataTable.js

@@ -1,19 +0,0 @@
-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();
-    const columnLabel = columnHeadings
-        ? ` ${columnHeadings.length} columns,`
-        : '';
-    const accessibilityLabelText = isReactElement(caption)
-        ? getText(caption)
-        : caption;
-    const accessibilityLabel = `data table,${columnLabel} ${items.length} rows, ${accessibilityLabelText}`;
-    return (_jsx(ScrollView, { horizontal: true, alwaysBounceHorizontal: false, contentContainerStyle: { flexGrow: 1 }, children: _jsxs(StyledTableContainer, { ...rest, ref: ref, children: [caption ? (_jsx(TableCaption, { ...breakpoints, children: isReactElement(caption) ? (caption) : (_jsx(TableCaptionText, { ...breakpoints, accessibilityLabel: accessibilityLabel, children: caption })) })) : null, columnHeadings ? (_jsx(TableRowHeading, { children: columnHeadings.map((columnHeading, index) => (_createElement(TableHeader, { ...breakpoints, key: index, cellWidth: columnWidths[index] }, isReactElement(columnHeading) ? (columnHeading) : (_jsx(TableHeaderText, { ...breakpoints, children: columnHeading }))))) })) : null, _jsx(TableBody, { children: items.map((rowData, index) => (_jsx(TableRow, { data: rowData, index: index, rowHeadings: rowHeadings, columnWidths: columnWidths, striped: striped }, index))) })] }) }));
-};

package/dist/esm/src/components/DataTable/TableRow.js

@@ -1,21 +0,0 @@
-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();
-    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));
-        }
-        if (rowHeadings && i === 0) {
-            return (_createElement(RowHeading, { ...breakpoints, key: i, testID: "rowHeader", cellWidth: columnWidths[i] }, isReactElement(cellData) ? (cellData) : (_jsx(TableHeaderText, { ...breakpoints, children: cellData }))));
-        }
-        return (_createElement(TableCell, { ...breakpoints, key: i, testID: "cell", cellWidth: columnWidths[i] }, isReactElement(cellData) ? (cellData) : (_jsx(CellText, { ...breakpoints, children: cellData }))));
-    });
-    return (_jsx(StyledTableRow, { stripe: striped && index % 2 === 0, children: cells }));
-};

package/dist/esm/src/components/DataTable/index.js

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

package/dist/esm/src/components/DataTable/styles.js

@@ -1,100 +0,0 @@
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-export const StyledTableContainer = styled.View(({ theme }) => css `
-    flex-grow: 1;
-    border-bottom-width: ${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])};
-    flex: ${cellWidth === 'auto' ? 1 : 0};
-    align-self: stretch;
-    flex-direction: row;
-    width: ${cellWidth};
-  `);
-export const TableHeaderText = styled.Text(({ theme, smallAndUp }) => 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'])};
-    color: ${theme.color.surface.onSurface};
-    text-align: left;
-    flex-wrap: wrap;
-  `);
-export const TableCaptionText = styled.Text(({ theme, smallAndUp }) => 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'])};
-    color: ${theme.color.brand.brand};
-    text-align: left;
-    flex-wrap: wrap;
-  `);
-export const CellText = styled.Text(({ theme, smallAndUp }) => 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'])};
-  `);
-export const TableCaption = styled.View(({ theme }) => css `
-    padding: ${numToPx(theme.space[400])} ${numToPx(theme.space[200])};
-  `);
-export const TableRow = styled.View(({ theme, stripe }) => 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-color: ${stripe
-    ? 'transparent'
-    : `${theme.color.surface.borderDim}`};
-  `);
-export const TableRowHeading = styled.View(({ theme }) => css `
-    background-color: ${theme.color.surface.surface};
-    border-bottom-width: ${numToPx(theme.border.width.sm)};
-    border-bottom-color: ${theme.color.surface.border};
-    flex-direction: row;
-    align-items: stretch;
-  `);
-export const TableBody = styled.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])};
-      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])};
-      width: ${cellWidth};
-      flex: ${cellWidth === 'auto' ? 1 : 0};
-    `;
-});
-export const StyledSeparatorRow = styled.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])};
-    `;
-});
-export const SeparatorRowText = styled.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'])};
-  color: ${theme.color.surface.onSurfaceVariant};
-`);

package/dist/esm/src/components/DataTable/types.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/src/components/DateField/DateField.js

@@ -1,68 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { useRef } from 'react';
-import { TouchableWithoutFeedback, View } from 'react-native';
-import styled, { css } from '../../styled.native';
-import { getText, mergeRefs } from '../../utils';
-import { ErrorText } from '../ErrorText';
-import { FormGroup } from '../FormGroup';
-import { HintText } from '../HintText';
-import { LabelText } from '../LabelText';
-import { NumberInput } from '../NumberInput';
-import { Stack } from '../Stack';
-import { SubLabelText } from '../SubLabelText';
-const InlineFields = styled.View(({ stretch, theme }) => {
-    const margin = numToPx(theme.space[100]);
-    return css `
-    margin-left: -${margin};
-    margin-right: -${margin};
-    flex-direction: row;
-    ${stretch ? '' : `width: 265px;`}
-  `;
-});
-const SubField = styled(Stack)(({ theme }) => {
-    const padding = numToPx(theme.space[100]);
-    return css `
-    padding-right: ${padding};
-    padding-left: ${padding};
-  `;
-});
-const DayField = styled(SubField) `
-  width: 25%;
-`;
-const MonthField = styled(SubField) `
-  width: 25%;
-`;
-const YearField = styled(SubField) `
-  width: 50%;
-`;
-export const DateField = ({ label, hint, error, optional = false, fullWidth = false, onChange, value, testID, editable = true, autoFocusNext = true, ref, }) => {
-    const hasError = !!error;
-    const dayRef = useRef(null);
-    const monthRef = useRef(null);
-    const yearRef = useRef(null);
-    const nextFieldRef = {
-        day: monthRef,
-        month: yearRef,
-    };
-    const handleChange = (key) => (datePartValue) => {
-        onChange &&
-            onChange({
-                ...value,
-                [key]: datePartValue,
-            });
-        if (key !== 'year' && autoFocusNext) {
-            const nextField = nextFieldRef[key].current;
-            if (nextField && datePartValue.length === 2) {
-                nextField.focus();
-            }
-        }
-    };
-    const accessibilityLabel = (labelText) => [labelText, getText(hint), getText(error)].filter(Boolean).join(', ');
-    const focusRef = (internalRef) => () => {
-        if (internalRef.current) {
-            internalRef.current.focus();
-        }
-    };
-    return (_jsx(FormGroup, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsxs(InlineFields, { stretch: fullWidth, children: [_jsxs(DayField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(dayRef), accessible: false, children: _jsx(SubLabelText, { children: "Day" }) }), _jsx(NumberInput, { ref: mergeRefs(dayRef, ref), accessibilityLabel: accessibilityLabel('Day'), invalid: hasError, value: value.day, onChangeText: handleChange('day'), testID: testID, stretch: true, editable: editable, maxLength: 2 })] }), _jsxs(MonthField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(monthRef), accessible: false, children: _jsx(SubLabelText, { children: "Month" }) }), _jsx(NumberInput, { ref: monthRef, accessibilityLabel: accessibilityLabel('Month'), invalid: hasError, value: value.month, onChangeText: handleChange('month'), testID: `${testID}-month`, stretch: true, editable: editable, maxLength: 2 })] }), _jsxs(YearField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(yearRef), accessible: false, children: _jsx(SubLabelText, { children: "Year" }) }), _jsx(NumberInput, { ref: yearRef, accessibilityLabel: accessibilityLabel('Year'), invalid: hasError, value: value.year, onChangeText: handleChange('year'), testID: `${testID}-year`, stretch: true, editable: editable, maxLength: 4 })] })] })] }) }));
-};

package/dist/esm/src/components/DateField/index.js

@@ -1 +0,0 @@
-export { DateField } from './DateField';

package/dist/esm/src/components/Disclosure/Disclosure.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { useState } from 'react';
-import { useBreakpoint } from '../../hooks';
-import styled, { css } from '../../styled.native';
-import { Icon } from '../Icon';
-const DisclosureButton = styled.TouchableOpacity(() => css `
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  `);
-const DisclosureButtonIcon = styled(Icon)(({ theme, expanded, smallAndUp }) => css `
-    transform: ${expanded ? 'rotate(0deg)' : 'rotate(-90deg)'};
-    margin-right: ${numToPx(theme.space[smallAndUp ? 200 : 100])};
-    color: ${theme.color.surface.link};
-  `);
-const DisclosureButtonText = styled.Text(({ theme, smallAndUp }) => css `
-    font-family: ${theme.native.font.family.book};
-    font-size: ${numToPx(theme.font.size.md.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
-    line-height: ${numToPx(theme.font.lineHeight.md.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
-    text-decoration: underline;
-    text-decoration-color: ${theme.color.surface.link};
-    color: ${theme.color.surface.link};
-    padding-left: ${numToPx(theme.space[200])};
-  `);
-const DisclosurePanel = styled.View(({ theme }) => css `
-    margin-top: ${numToPx(theme.space[300])};
-    padding-left: ${numToPx(theme.space[600])};
-  `);
-export const Disclosure = ({ children, title, expanded = false, onToggle, ref, ...rest }) => {
-    const [isExpanded, setIsExpanded] = useState(expanded);
-    const breakpoints = useBreakpoint();
-    return (_jsxs(_Fragment, { children: [_jsxs(DisclosureButton, { onPress: () => {
-                    setIsExpanded(!isExpanded);
-                    onToggle && onToggle(!isExpanded);
-                }, ref: ref, accessibilityState: { expanded: isExpanded }, ...rest, children: [_jsx(DisclosureButtonIcon, { name: "caret-arrow-down", ...breakpoints, size: 14, expanded: isExpanded }), _jsx(DisclosureButtonText, { ...breakpoints, children: title })] }), isExpanded && (_jsx(DisclosurePanel, { ...breakpoints, children: children }))] }));
-};

package/dist/esm/src/components/Disclosure/index.js

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

package/dist/esm/src/components/Divider/Divider.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled, { css } from '../../styled.native';
-const StyledDivider = styled.View(({ theme, type = 'default', width = '100%' }) => {
-    return css `
-      height: 1px;
-      background: ${type === 'default'
-        ? theme.color.surface.border
-        : theme.color.surface.borderDim};
-      width: ${width};
-    `;
-});
-export const Divider = ({ type, width }) => {
-    return _jsx(StyledDivider, { type: type, width: width });
-};

package/dist/esm/src/components/Divider/index.js

@@ -1 +0,0 @@
-export { Divider } from './Divider';

package/dist/esm/src/components/Em/Em.js

@@ -1,6 +0,0 @@
-import styled from '../../styled.native';
-export const Em = styled.Text `
-  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-  font-family: System;
-  font-style: italic;
-`;

package/dist/esm/src/components/Em/index.js

@@ -1 +0,0 @@
-export { Em } from './Em';

package/dist/esm/src/components/EmailField/EmailField.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { EmailInput } from '../EmailInput';
-import { Field } from '../Field';
-export const EmailField = ({ ref, ...rest }) => {
-    return (_jsx(Field, { ...rest, children: _jsx(EmailInput, { ref: ref }) }));
-};

package/dist/esm/src/components/EmailField/index.js

@@ -1 +0,0 @@
-export { EmailField } from './EmailField';

package/dist/esm/src/components/EmailInput/EmailInput.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Input } from '../Input/Input';
-const EmailInput = ({ ref, ...rest }) => (_jsx(Input, { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ref: ref, ...rest }));
-export { EmailInput };

package/dist/esm/src/components/EmailInput/index.js

@@ -1 +0,0 @@
-export { EmailInput } from './EmailInput';

package/dist/esm/src/components/ErrorText/ErrorText.js

@@ -1,20 +0,0 @@
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
-const StyledErrorText = styled.Text(({ theme, smallAndUp }) => {
-    const fontSize = smallAndUp
-        ? theme.font.size.md.mediaQuery.lg
-        : theme.font.size.md.mediaQuery.sm;
-    return css `
-    margin-top: ${numToPx(theme.space[100])};
-    margin-bottom: ${numToPx(theme.space[100])};
-    font-family: ${theme.native.font.family.bold};
-    font-size: ${numToPx(fontSize)};
-    line-height: ${numToPx(smallAndUp
-        ? theme.font.lineHeight.md.mediaQuery.lg
-        : theme.font.lineHeight.md.mediaQuery.sm)};
-    color: ${theme.color.alert.error};
-  `;
-});
-const ErrorText = styledComponentWithBreakpoints(StyledErrorText);
-export { ErrorText };

package/dist/esm/src/components/ErrorText/index.js

@@ -1 +0,0 @@
-export { ErrorText } from './ErrorText';

package/dist/esm/src/components/Field/Field.js

@@ -1,37 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Children, cloneElement, createRef, isValidElement, } from 'react';
-import { TouchableWithoutFeedback, View } from 'react-native';
-import { getText, mergeRefs } from '../../utils';
-import { ErrorText } from '../ErrorText';
-import { FormGroup } from '../FormGroup';
-import { HintText } from '../HintText';
-import { LabelText } from '../LabelText';
-import { Stack } from '../Stack';
-import { Stretch } from '../Stretch';
-export const Field = ({ children, label, optional = false, hint, error, fullWidth, characters = 25, affixWidth = 0, ref, ...rest }) => {
-    const hasError = !!error;
-    const inputRef = createRef();
-    const labelText = optional ? `${label} (optional)` : label;
-    const accessibilityLabel = [labelText, getText(hint), getText(error)]
-        .filter(Boolean)
-        .join(', ');
-    return (_jsx(FormGroup, { error: hasError || undefined, testID: "nb-field-form-group", children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(TouchableWithoutFeedback, { onPress: () => {
-                        if (inputRef.current) {
-                            // @ts-ignore. Toggle picker if this is a select menu.
-                            if (inputRef.current.togglePicker) {
-                                // @ts-ignore
-                                inputRef.current.togglePicker();
-                            }
-                            else {
-                                inputRef.current.focus();
-                            }
-                        }
-                    }, children: _jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }) }), _jsx(Stretch, { defaultWidth: `${Math.ceil(characters * 0.8 * 16) + affixWidth}px`, fullWidth: fullWidth, children: Children.map(children, child => isValidElement(child)
-                        ? cloneElement(child, {
-                            invalid: hasError || undefined,
-                            ref: mergeRefs(inputRef, ref),
-                            accessibilityLabel,
-                            ...rest,
-                        })
-                        : child) })] }) }));
-};

package/dist/esm/src/components/Field/index.js

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

package/dist/esm/src/components/FormGroup/FormGroup.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { View } from 'react-native';
-import styled from '../../styled.native';
-const FormGroupWrapper = styled.View `
-  flex-direction: row;
-`;
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const FormGroup = ({ children, error, ...rest }) => (_jsx(FormGroupWrapper, { ...rest, children: _jsx(View, { style: { flex: 1 }, children: children }) }));
-export { FormGroup };

package/dist/esm/src/components/FormGroup/index.js

@@ -1 +0,0 @@
-export { FormGroup } from './FormGroup';

package/dist/esm/src/components/Grid/Col.js

@@ -1,30 +0,0 @@
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
-const StyledCol = styled.View(({ theme, span, xsmallAndUp, small, smallAndUp, medium, mediumAndUp }) => {
-    const COLS = 12;
-    const gutter = mediumAndUp ? theme.space[600] : theme.space[400];
-    const percentage = span ? (span / COLS) * 100 : 100;
-    const smallPercentage = small ? (small / COLS) * 100 : percentage;
-    const mediumPercentage = medium ? (medium / COLS) * 100 : smallPercentage;
-    let maxWidth;
-    if (mediumAndUp) {
-        maxWidth = mediumPercentage;
-    }
-    else if (smallAndUp || xsmallAndUp) {
-        maxWidth = span ? 50 : 100;
-    }
-    else {
-        maxWidth = 100;
-    }
-    return css `
-      flex: 0 0 auto;
-      padding-left: ${numToPx(gutter / 2)};
-      padding-right: ${numToPx(gutter / 2)};
-      margin-bottom: ${numToPx(theme.space[smallAndUp ? 800 : 600])};
-      max-width: ${maxWidth}%;
-      width: 100%;
-    `;
-});
-const Col = styledComponentWithBreakpoints(StyledCol);
-export { Col };

package/dist/esm/src/components/Grid/Row.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { numToPx } from '../..';
-import styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
-const StyledRow = styled.View(({ theme, isNested, smallAndUp, mediumAndUp }) => {
-    const rowGap = mediumAndUp || smallAndUp ? theme.space[800] : theme.space[600];
-    const colGap = mediumAndUp ? theme.space[600] : theme.space[400];
-    return css `
-      margin: 0 auto;
-      max-width: ${theme.breakpoint.large + rowGap}px;
-      width: 100%;
-
-      ${isNested
-        ? `
-      margin-left: -${numToPx(colGap / 2)};
-      margin-right: -${numToPx(colGap / 2)};
-      width: auto;
-      max-width: 200%; /* max width none not supported in RN */
-    `
-        : null}
-    `;
-});
-const WidthRow = styledComponentWithBreakpoints(StyledRow);
-const RowInner = styled.View `
-  display: flex;
-  flex: 0 1 auto;
-  flex-direction: row;
-  flex-wrap: wrap;
-`;
-const Row = ({ children, ...rest }) => (_jsx(WidthRow, { ...rest, children: _jsx(RowInner, { children: children }) }));
-export { Row };

package/dist/esm/src/components/Grid/index.js

@@ -1,2 +0,0 @@
-export { Col } from './Col';
-export { Row } from './Row';

package/dist/esm/src/components/HintText/HintText.js

@@ -1,20 +0,0 @@
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
-const StyledHintText = styled.Text(({ theme, smallAndUp }) => {
-    const fontSize = smallAndUp
-        ? theme.font.size.md.mediaQuery.lg
-        : theme.font.size.md.mediaQuery.sm;
-    return css `
-    margin-top: ${numToPx(theme.space[100])};
-    margin-bottom: ${numToPx(theme.space[100])};
-    font-family: ${theme.native.font.family.book};
-    font-size: ${numToPx(fontSize)};
-    line-height: ${numToPx(smallAndUp
-        ? theme.font.lineHeight.md.mediaQuery.lg
-        : theme.font.lineHeight.md.mediaQuery.sm)};
-    color: ${theme.color.surface.onSurfaceVariant};
-  `;
-});
-const HintText = styledComponentWithBreakpoints(StyledHintText);
-export { HintText };

package/dist/esm/src/components/HintText/index.js

@@ -1 +0,0 @@
-export { HintText } from './HintText';

package/dist/esm/src/components/Icon/Icon.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { useIcons } from '../../providers';
-import { ThemeContext } from '../../styled.native';
-export const Icon = ({ name, size = '16', color, testID, ...rest }) => {
-    const icons = useIcons();
-    const theme = useContext(ThemeContext);
-    // @ts-ignore to support additional icons.
-    const Svg = name && icons[name];
-    return Svg ? (_jsx(Svg, { testID: testID ? testID : `element-icon${name ? `-${name}` : ''}`, color: color ?? theme.color.surface.onSurface, width: size, height: size, ...rest })) : null;
-};

package/dist/esm/src/components/Icon/index.js

@@ -1 +0,0 @@
-export { Icon } from './Icon';

package/dist/esm/src/components/Input/Input.js

@@ -1,80 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { useState } from 'react';
-import { useBreakpoint } from '../../hooks';
-import styled, { css } from '../../styled.native';
-import { Icon } from '../Icon/Icon';
-const StyledIcon = styled(Icon)(({ theme, side, focused }) => {
-    const focusCompensation = focused ? theme.space[50] : 0;
-    return css `
-    position: absolute;
-    z-index: 1;
-    top: ${numToPx(theme.space[350] + focusCompensation)};
-    ${side === 'left'
-        ? `left: ${numToPx(theme.space[200] + focusCompensation)}`
-        : ''};
-    ${side === 'right'
-        ? `right: ${numToPx(theme.space[200] + focusCompensation)}`
-        : ''};
-  `;
-});
-const Input = ({ onFocus, onBlur, style, iconLeft, iconRight, rightSlot, ref, ...rest }) => {
-    const [focused, setFocused] = useState(false);
-    const breakpoints = useBreakpoint();
-    return (_jsxs(InputWrapper, { focused: focused, children: [iconLeft ? (_jsx(StyledIcon, { name: iconLeft, size: 16, focused: focused, pointerEvents: "none", side: "left" })) : null, _jsx(StyledInput, { ...rest, ...breakpoints, iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, ref: ref, onFocus: (event) => {
-                    setFocused(true);
-                    if (onFocus) {
-                        onFocus(event);
-                    }
-                }, onBlur: (event) => {
-                    setFocused(false);
-                    if (onBlur) {
-                        onBlur(event);
-                    }
-                } }), iconRight && !rightSlot ? (_jsx(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
-};
-const InputWrapper = styled.View(({ theme, focused }) => css `
-    align-self: stretch;
-    border-radius: ${numToPx(theme.border.radius.md)};
-    border-width: 0;
-    border-style: solid;
-    border-color: ${theme.input.color.border};
-    flex-direction: row;
-
-    ${focused
-    ? `
-      border-width: ${numToPx(theme.border.width.md)};
-      border-color: ${theme.color.outline.outer};
-      padding: 2px;
-      margin: -4px;`
-    : null}
-  `);
-const StyledInput = styled.TextInput(({ theme, invalid, smallAndUp, iconLeft, iconRight, hasRightSlot }) => {
-    const fontSize = smallAndUp
-        ? theme.font.size.md.mediaQuery.lg
-        : theme.font.size.md.mediaQuery.sm;
-    const errorStyles = invalid
-        ? `
-        border-color: ${theme.color.alert.error};
-      `
-        : '';
-    return css `
-    font-family: ${theme.native.font.family.book};
-    color: ${theme.color.surface.onSurface};
-    font-size: ${numToPx(fontSize)};
-    height: ${numToPx(theme.space[1100])};
-    line-height: 18px; /* Corrects for responsive line height in fixed height input */
-    border: ${numToPx(theme.border.width.md)} solid ${theme.input.color.border};
-    border-radius: ${numToPx(theme.border.radius.sm)};
-    padding: ${numToPx(theme.space[200])};
-    flex: 1;
-
-    ${iconLeft ? `padding-left: ${numToPx(theme.space[800])};` : ''}
-    ${iconRight || hasRightSlot
-        ? `padding-right: ${numToPx(theme.space[800])};`
-        : ''}
-
-          ${errorStyles}
-  `;
-});
-export { Input };

package/dist/esm/src/components/LabelText/LabelText.js

@@ -1,19 +0,0 @@
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
-const StyledLabelText = styled.Text(({ theme, smallAndUp }) => {
-    const fontSize = smallAndUp
-        ? theme.font.size.md.mediaQuery.lg
-        : theme.font.size.md.mediaQuery.sm;
-    const lineHeight = smallAndUp
-        ? theme.font.lineHeight.md.mediaQuery.lg
-        : theme.font.lineHeight.md.mediaQuery.sm;
-    return css `
-    font-family: ${theme.native.font.family.bold};
-    line-height: ${numToPx(lineHeight)};
-    color: ${theme.color.surface.onSurface};
-    font-size: ${numToPx(fontSize)};
-  `;
-});
-const LabelText = styledComponentWithBreakpoints(StyledLabelText);
-export { LabelText };

package/dist/esm/src/components/LabelText/index.js

@@ -1 +0,0 @@
-export { LabelText } from './LabelText';

package/dist/esm/src/components/LineThrough/LineThrough.js

@@ -1,4 +0,0 @@
-import styled from '../../styled.native';
-export const LineThrough = styled.Text `
-  text-decoration: line-through;
-`;

package/dist/esm/src/components/LineThrough/index.js

@@ -1 +0,0 @@
-export { LineThrough } from './LineThrough';