@ovotech/element-native 5.5.0 → 5.7.0

package/dist/esm/components/Cards/ServicesImageCard/ServicesImageCard.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { P } from '../../P';
+import { ContainerWithCardBadge, ResponsiveHeading } from '../components';
+import { SMALL_CARD_HEIGHT } from '../shared.styles';
+import { CardImage, CardWithServicesImage, HeadingContainer, ImageContent, TextContent, } from './ServicesImageCard.styles';
+export const ServicesImageCard = ({ badgeText, image, heading, subHeading, onPress, }) => {
+    const hasBadge = !!badgeText;
+    const [cardHeight, setCardHeight] = useState(0);
+    const onLayout = useCallback((e) => {
+        const { height: layoutHeight } = e.nativeEvent.layout;
+        setCardHeight(layoutHeight);
+    }, []);
+    const pushImage = useMemo(() => cardHeight > SMALL_CARD_HEIGHT, [cardHeight]);
+    const content = (_jsxs(CardWithServicesImage, { isSmall: true, onPress: onPress, onLayout: onLayout, children: [_jsxs(TextContent, { hasBadge: hasBadge, pushImage: pushImage, children: [_jsx(HeadingContainer, { subHeading: !!subHeading, children: _jsx(ResponsiveHeading, { heading: heading }) }), !!subHeading && (_jsx(View, { children: _jsx(P, { children: subHeading }) }))] }), _jsx(ImageContent, { pushImage: pushImage, children: _jsx(CardImage, { pushImage: pushImage, source: typeof image === 'string' ? { uri: image } : image, resizeMode: "cover" }) })] }));
+    if (!hasBadge)
+        return content;
+    return (_jsx(ContainerWithCardBadge, { badgeText: badgeText, children: content }));
+};

package/dist/esm/components/Cards/ServicesImageCard/ServicesImageCard.styles.js

@@ -0,0 +1,32 @@
+import { Image, View } from 'react-native';
+import styled from '../../../styled.native';
+import { CardWithMinHeight, SMALL_CARD_HEIGHT } from '../shared.styles';
+const IMAGE_OUTSIDE = SMALL_CARD_HEIGHT * 0.45;
+export const CardWithServicesImage = styled(CardWithMinHeight)({
+    paddingTop: 0,
+    flexDirection: 'row',
+    borderColor: 'transparent',
+});
+export const TextContent = styled(View)(({ hasBadge, theme, pushImage }) => ({
+    paddingTop: hasBadge ? theme.space[800] : theme.space[400],
+    paddingRight: pushImage ? IMAGE_OUTSIDE : SMALL_CARD_HEIGHT - IMAGE_OUTSIDE,
+    flex: 1,
+    alignSelf: 'flex-end',
+}));
+export const HeadingContainer = styled(View)(({ theme, subHeading }) => ({
+    marginBottom: subHeading ? theme.space[200] : 0,
+}));
+export const ImageContent = styled(View)(({ theme, pushImage }) => ({
+    position: 'absolute',
+    top: pushImage ? theme.space[50] : theme.space[250],
+    bottom: 0,
+    width: SMALL_CARD_HEIGHT,
+    right: -(pushImage ? IMAGE_OUTSIDE * 1.45 : IMAGE_OUTSIDE),
+    transform: 'rotate(-15deg)',
+    overflow: 'hidden',
+}));
+export const CardImage = styled(Image)(({ pushImage }) => ({
+    width: '100%',
+    height: '100%',
+    transform: `rotate(15deg) scale(${pushImage ? 1.35 : 1.2})`,
+}));

package/dist/esm/components/Cards/ServicesImageCard/index.js

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

package/dist/esm/components/Cards/components.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '../../styled.native';
+import { Heading2, Heading4 } from '../Heading';
+import { BadgeContainer, StyledBadge } from './shared.styles';
+import { checkIsSmall, resolveColor } from './utils';
+export const ResponsiveHeading = ({ heading, size = 'default', }) => {
+    const theme = useTheme();
+    const HeadingComponent = checkIsSmall(size) ? Heading4 : Heading2;
+    if (typeof heading === 'string') {
+        return _jsx(HeadingComponent, { children: heading });
+    }
+    return (_jsx(_Fragment, { children: heading.map((segment, index) => (_jsx(HeadingComponent, { style: {
+                color: resolveColor(segment.color),
+                marginRight: theme.space[150],
+            }, children: segment.text }, `${segment.text}-${index}`))) }));
+};
+export const ContainerWithCardBadge = ({ badgeText, variant = 'success', children }) => {
+    return (_jsxs(BadgeContainer, { children: [_jsx(StyledBadge, { variant: variant, children: badgeText }), children] }));
+};

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

@@ -1,6 +1,11 @@
 export { AccountCard } from './AccountCard';
 export { BalanceCard, BalanceCardErrorFallback } from './BalanceCard';
+export { DisruptiveCard } from './DisruptiveCard';
+export { HeroImageCard } from './HeroImageCard';
 export { IconDataCard } from './IconDataCard';
 export { IconTextCard } from './IconTextCard';
+export { IllustrationTextCard } from './IllustrationTextCard';
 export { LinkTextCard } from './LinkTextCard';
 export { ProgressBarCard } from './ProgressBarCard';
+export { QuickLinkCard } from './QuickLinkCard';
+export { ServicesImageCard } from './ServicesImageCard';

package/dist/esm/components/Cards/shared.styles.js

@@ -3,7 +3,10 @@ import styled from '../../styled.native';
 import { Badge } from '../Badge';
 import { Card } from '../Card';
 export const SMALL_CARD_HEIGHT = 172;
-export const CardBadge = styled(Badge)(({ theme }) => ({
+export const BadgeContainer = styled(View)({
+    position: 'relative',
+});
+export const StyledBadge = styled(Badge)(({ theme }) => ({
     position: 'absolute',
     top: theme.space[100],
     left: theme.space[500],
@@ -16,6 +19,11 @@ export const CardBadge = styled(Badge)(({ theme }) => ({
     paddingTop: 0,
     zIndex: 1,
 }));
+export const TitleContainer = styled(View)(({ theme }) => ({
+    marginRight: theme.space[50],
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+}));
 export const CardWithMinHeight = styled(Card)(({ isSmall }) => ({
     minHeight: isSmall ? SMALL_CARD_HEIGHT : undefined,
 }));
@@ -31,3 +39,11 @@ export const WrappedContainer = styled(View)(({ theme }) => ({
     flexWrap: 'wrap',
     gap: theme.space[100],
 }));
+// Styles for stories
+export const StyleWrapper = styled.View({
+    padding: 10,
+    gap: 15,
+});
+export const SmallCardContainer = styled.View({
+    maxWidth: 180,
+});

package/dist/esm/components/Cards/utils.js

@@ -1,3 +1,4 @@
+import { Alert } from 'react-native';
 import { useTheme } from '../../styled.native';
 export const checkIsSmall = (size) => size === 'small';
 export const resolveColor = (colorKey = 'default') => {
@@ -8,5 +9,15 @@ export const resolveColor = (colorKey = 'default') => {
     if (colorKey === 'onSurface') {
         return theme.color.surface.onSurface;
     }
+    if (colorKey === 'brandBold') {
+        return theme.color.brand.bold;
+    }
+    if (colorKey === 'onBrand') {
+        return theme.color.brand.onBrand;
+    }
     return colorKey;
 };
+// Used for stories
+export const handlePress = () => {
+    Alert.alert('Card pressed');
+};

package/dist/esm/components/Checkbox/Checkbox.js

@@ -10,59 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { TouchableOpacity, View, } from 'react-native';
-import styled from '../../styled.native';
+import { TouchableOpacity, View } from 'react-native';
 import { ErrorText } from '../ErrorText';
 import { FormGroup } from '../FormGroup';
 import { HintText } from '../HintText';
-import { Icon } from '../Icon/Icon';
-import { LabelText } from '../LabelText';
 import { Stack } from '../Stack';
-const StyledCheckboxInputWrapper = styled.View(({ theme }) => {
-    const checkboxSize = theme.space[600];
-    const gap = theme.space[200];
-    return `
-      width: ${numToPx(checkboxSize + gap)};
-      height: ${numToPx(theme.space[1100])};
-    `;
-});
-const StyledCheckboxInput = styled.View(({ theme, invalid, checked }) => {
-    return `
-      width: ${numToPx(theme.space[600])};
-      height: ${numToPx(theme.space[600])};
-      border: ${numToPx(theme.border.width.md)} solid;
-      margin-top: 10px;
-      border-radius: ${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 _jsx(Icon, Object.assign({ name: "check", size: 16 }, props));
-};
-const StyledCheckboxInputCheck = styled(CheckboxCheck)(({ theme, checked, }) => {
-    return `
-      margin-top: ${numToPx(theme.space[50])};
-      margin-left: ${numToPx(theme.space[50])};
-      color: ${theme.color.alert.info};
-      opacity: ${checked ? 1 : 0};
-    `;
-});
+import { CheckLabelText, StyledCheckboxInput, StyledCheckboxInputCheck, StyledCheckboxInputWrapper, StyledWrapper, } from './styled';
 const Input = (_a) => {
     var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
     return (_jsx(StyledCheckboxInputWrapper, Object.assign({}, rest, { children: _jsx(StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledCheckboxInputCheck, { checked: checked }) }) })));
 };
-const CheckLabelText = styled(LabelText)(({ theme }) => `
-    padding-top: ${numToPx(theme.space[300])};
-  `);
-const StyledWrapper = styled.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;

package/dist/esm/components/Checkbox/styled.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled from '../../styled.native';
+import { Icon } from '../Icon';
+import { LabelText } from '../LabelText';
+const CheckboxCheck = (props) => {
+    return _jsx(Icon, Object.assign({ name: "check", size: 16 }, props));
+};
+export const StyledCheckboxInputWrapper = styled.View(({ theme }) => {
+    const checkboxSize = theme.space[600];
+    const gap = theme.space[200];
+    return `
+      width: ${numToPx(checkboxSize + gap)};
+      height: ${numToPx(theme.space[1100])};
+    `;
+});
+export const StyledCheckboxInput = styled.View(({ theme, invalid, checked }) => {
+    return `
+      width: ${numToPx(theme.space[600])};
+      height: ${numToPx(theme.space[600])};
+      border: ${numToPx(theme.border.width.md)} solid;
+      margin-top: 10px;
+      border-radius: ${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'};
+    `;
+});
+export const StyledCheckboxInputCheck = styled(CheckboxCheck)(({ theme, checked }) => {
+    return `
+      margin-top: ${numToPx(theme.space[50])};
+      margin-left: ${numToPx(theme.space[50])};
+      color: ${theme.color.alert.info};
+      opacity: ${checked ? 1 : 0};
+    `;
+});
+export const CheckLabelText = styled(LabelText)(({ theme }) => `
+    padding-top: ${numToPx(theme.space[300])};
+    font-family: ${theme.native.font.family.book};
+  `);
+export const StyledWrapper = styled.View `
+  flex-direction: row;
+`;

package/dist/esm/components/Checkbox/types.js

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

package/dist/esm/components/CurrencyInput/CurrencyInput.js

@@ -9,15 +9,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createRef } from 'react';
+import { useBreakpoint } from '../../hooks';
 import { mergeRefs } from '../../utils';
-import { NumberInput } from '../NumberInput';
+import { CurrencyInputWrapper, StyledCurrencyInput, StyledCurrencySymbol, StyledCurrencySymbolWrapper, } from './styled';
+const currecySymbolMap = {
+    GBP: '£',
+    EUR: '€',
+    AUD: '$',
+    USD: '$',
+};
 const CurrencyInput = (_a) => {
     var { currency = 'GBP', invalid, accessibilityLabel = '', ref } = _a, rest = __rest(_a, ["currency", "invalid", "accessibilityLabel", "ref"]);
     const inputRef = createRef();
-    const updatedAccessibilityLabel = `${accessibilityLabel} ${currency === 'GBP' ? 'pounds' : currency === 'EUR' ? 'euro' : 'dollar'}`.trim();
-    const iconName = currency === 'GBP' ? 'pound' : currency === 'EUR' ? 'euro' : 'dollar';
-    return (_jsx(NumberInput, Object.assign({ accessibilityLabel: updatedAccessibilityLabel, invalid: invalid, iconLeft: iconName, ref: mergeRefs(ref, inputRef) }, rest)));
+    const breakpoints = useBreakpoint();
+    const updatedAccessibilityLabel = `${accessibilityLabel} ${currency === 'GBP' ? 'pounds' : currency === 'EUR' ? 'euros' : 'dollars'}`.trim();
+    return (_jsxs(CurrencyInputWrapper, { children: [_jsx(StyledCurrencyInput, Object.assign({ accessibilityLabel: updatedAccessibilityLabel, invalid: invalid, ref: mergeRefs(ref, inputRef) }, breakpoints, rest)), _jsx(StyledCurrencySymbolWrapper, { testID: `element-currency-input-${currency}`, accessible: false, children: _jsx(StyledCurrencySymbol, Object.assign({}, breakpoints, { children: currecySymbolMap[currency] })) })] }));
 };
 export { CurrencyInput };

package/dist/esm/components/CurrencyInput/styled.js

@@ -0,0 +1,33 @@
+import { View } from 'react-native';
+import styled from '../../styled.native';
+import { numToPx } from '../../theme';
+import { NumberInput } from '../NumberInput';
+import { P } from '../P';
+export const CurrencyInputWrapper = styled(View) `
+  position: relative;
+`;
+export const StyledCurrencyInput = styled(NumberInput)(({ theme, smallAndUp }) => `
+  padding-left: ${numToPx(theme.space[800])};
+  padding-bottom: ${numToPx(theme.space[100])};
+  font-family: ${theme.native.font.family.black};
+  font-size: ${numToPx(theme.font.size['4xl'].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+  line-height: ${numToPx(theme.font.size['4xl'].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+  letter-spacing: ${numToPx(theme.font.letterSpacing['4xl'].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+`);
+export const StyledCurrencySymbolWrapper = styled(View)(({ theme }) => {
+    return `
+  position: absolute;
+  width: ${numToPx(theme.space[700])};
+  height: ${numToPx(theme.space[700])};
+  top: 50%;
+  margin-top: -${numToPx(theme.space[350])};
+  left: ${numToPx(theme.space[400])};
+`;
+});
+export const StyledCurrencySymbol = styled(P)(({ theme, smallAndUp, }) => {
+    return `
+  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'])};
+`;
+});

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

@@ -5,7 +5,9 @@ const StyledDivider = styled.View(({ theme, type = 'default', width = '100%' })
       height: 1px;
       background: ${type === 'default'
         ? theme.color.surface.border
-        : theme.color.surface.borderDim};
+        : type === 'brand'
+            ? theme.color.green[70]
+            : theme.color.surface.borderDim};
       width: ${width};
     `;
 });

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

@@ -10,9 +10,25 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
 import { Input } from '../Input/Input';
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 const EmailInput = (_a) => {
-    var { ref } = _a, rest = __rest(_a, ["ref"]);
-    return (_jsx(Input, Object.assign({ keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ref: ref }, rest)));
+    var { onChangeText, onSubmitEditing, value, invalid, onValidityChange } = _a, rest = __rest(_a, ["onChangeText", "onSubmitEditing", "value", "invalid", "onValidityChange"]);
+    const textValue = typeof value === 'string' ? value : '';
+    const isValid = useMemo(() => textValue.length > 0 && EMAIL_REGEX.test(textValue), [textValue]);
+    const [hasUserInput, setHasUserInput] = useState(false);
+    useEffect(() => {
+        onValidityChange === null || onValidityChange === void 0 ? void 0 : onValidityChange(isValid);
+    }, [isValid, onValidityChange]);
+    return (_jsx(Input, Object.assign({ keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, value: value, invalid: invalid !== null && invalid !== void 0 ? invalid : (hasUserInput && !isValid), onChangeText: text => {
+            if (!hasUserInput)
+                setHasUserInput(true);
+            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
+        }, onSubmitEditing: e => {
+            if (!isValid)
+                return;
+            onSubmitEditing === null || onSubmitEditing === void 0 ? void 0 : onSubmitEditing(e);
+        } }, rest)));
 };
 export { EmailInput };

package/dist/esm/components/EmptyState/EmptyState.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePictograms } from '../../providers';
+import { useTheme } from '../../styled.native';
+import { Heading4 } from '../Heading';
+import { Pictogram } from '../Pictogram';
+import { RemoteImage } from '../RemoteImage';
+import { StyledCard, TextContainer } from './styles';
+export const EmptyState = ({ backgroundStyle = 'filled', children, illustration, heading, pictogramName, }) => {
+    const pictograms = usePictograms();
+    const theme = useTheme();
+    const isFilledBackground = backgroundStyle === 'filled';
+    return (_jsxs(StyledCard, { testID: "empty-state-card", background: isFilledBackground ? theme.color.surface.bright : 'transparent', children: [(illustration === null || illustration === void 0 ? void 0 : illustration.uri) ? (_jsx(RemoteImage, Object.assign({ testID: "empty-state-illustration", resizeMode: "contain" }, illustration))) : null, pictogramName && pictograms[pictogramName] ? (_jsx(Pictogram, { testID: "empty-state-pictogram", size: 64, name: pictogramName })) : null, _jsxs(TextContainer, { children: [_jsx(Heading4, { style: { color: theme.color.surface.onSurface }, children: heading }), children] })] }));
+};

package/dist/esm/components/EmptyState/EmptyState.test.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'react-native';
+import { render } from '../../test/utils';
+import { EmptyState } from './EmptyState';
+jest.mock('../../providers', () => (Object.assign(Object.assign({}, jest.requireActual('../../providers')), { usePictograms: () => ({
+        'test-pictogram': 'test-pictogram-data',
+    }) })));
+const mockIllustration = {
+    uri: 'https://example.com/image.png',
+    width: 100,
+    height: 100,
+};
+const setup = (props) => {
+    return render(_jsx(EmptyState, Object.assign({}, props)));
+};
+describe('EmptyState', () => {
+    it('should render the heading and children', () => {
+        const { getByText } = setup({
+            heading: 'Default Heading',
+            children: _jsx(Text, { children: "Default Children" }),
+            pictogramName: 'test-pictogram',
+        });
+        expect(getByText('Default Heading')).toBeDefined();
+        expect(getByText('Default Children')).toBeDefined();
+    });
+    it('should have a filled background by default', () => {
+        const { getByTestId } = setup({
+            heading: 'Default Heading',
+            pictogramName: 'test-pictogram',
+        });
+        const card = getByTestId('empty-state-card');
+        expect(card.props.style.backgroundColor).not.toBe('transparent');
+    });
+    it("should have a transparent background when backgroundStyle is 'transparent'", () => {
+        const { getByTestId } = setup({
+            backgroundStyle: 'transparent',
+            heading: 'Default Heading',
+            pictogramName: 'test-pictogram',
+        });
+        const card = getByTestId('empty-state-card');
+        expect(card.props.style.backgroundColor).toBe('transparent');
+    });
+    it('should render an illustration if provided', () => {
+        const { getByTestId } = setup({
+            heading: 'Default Heading',
+            illustration: mockIllustration,
+        });
+        const image = getByTestId('empty-state-illustration');
+        expect(image).toBeDefined();
+        expect(image.props.source.uri).toBe(mockIllustration.uri);
+    });
+    it('should not render an illustration if uri is not provided', () => {
+        const { queryByTestId } = setup({
+            heading: 'Default Heading',
+            // @ts-expect-error - we are intentionally providing an illustration without a valid uri to test rendering logic
+            illustration: { height: 100, width: 100 },
+        });
+        expect(queryByTestId('empty-state-illustration')).toBeNull();
+    });
+    it('should render a pictogram if a valid pictogramName is provided', () => {
+        const { getByTestId } = setup({
+            heading: 'Default Heading',
+            pictogramName: 'test-pictogram',
+        });
+        expect(getByTestId('empty-state-pictogram')).toBeDefined();
+    });
+    it('should not render a pictogram if pictogramName is invalid', () => {
+        const { queryByTestId } = setup({
+            heading: 'Default Heading',
+            pictogramName: 'invalid-pictogram',
+        });
+        expect(queryByTestId('empty-state-pictogram')).toBeNull();
+    });
+    it('should render custom children', () => {
+        const { getByText } = render(_jsx(EmptyState, { heading: "Custom Heading", pictogramName: "test-pictogram", children: _jsx(Text, { children: "My Custom Child" }) }));
+        expect(getByText('My Custom Child')).toBeDefined();
+    });
+    it('should only render illustration when both illustration and pictogramName are provided', () => {
+        // According to the EmptyStateProps, only one of them should be present.
+        // However, if a user passes both, the component's internal logic will prioritize illustration.
+        // @ts-expect-error - we are intentionally passing both props to test runtime behavior
+        const { getByTestId, queryByTestId } = setup({
+            heading: 'Default Heading',
+            illustration: mockIllustration,
+            pictogramName: 'test-pictogram',
+        });
+        expect(getByTestId('empty-state-illustration')).toBeDefined();
+        expect(queryByTestId('empty-state-pictogram')).toBeNull();
+    });
+});

package/dist/esm/components/EmptyState/index.js

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

package/dist/esm/components/EmptyState/styles.js

@@ -0,0 +1,17 @@
+import styled from '../../styled.native';
+import { Card } from '../Card';
+export const StyledCard = styled(Card)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.space[100],
+}));
+export const TextContainer = styled.View(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    gap: theme.space[50],
+    paddingLeft: theme.space[400],
+    paddingRight: theme.space[400],
+    alignItems: 'center',
+}));

package/dist/esm/components/EmptyState/types.js

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

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

@@ -20,7 +20,7 @@ import { LabelText } from '../LabelText';
 import { Stack } from '../Stack';
 import { Stretch } from '../Stretch';
 export const Field = (_a) => {
-    var { children, label, optional = false, hint, error, fullWidth, characters = 25, affixWidth = 0, ref } = _a, rest = __rest(_a, ["children", "label", "optional", "hint", "error", "fullWidth", "characters", "affixWidth", "ref"]);
+    var { children, label, optional = false, hint, error, fullWidth, characters = 25, affixWidth = 0, ref, selected } = _a, rest = __rest(_a, ["children", "label", "optional", "hint", "error", "fullWidth", "characters", "affixWidth", "ref", "selected"]);
     const hasError = !!error;
     const inputRef = createRef();
     const labelText = optional ? `${label} (optional)` : label;
@@ -39,6 +39,7 @@ export const Field = (_a) => {
                             }
                         }
                     }, 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, Object.assign({ invalid: hasError || undefined, ref: mergeRefs(inputRef, ref), accessibilityLabel }, rest))
+                        ? cloneElement(child, Object.assign({ invalid: hasError || undefined, ref: mergeRefs(inputRef, ref), accessibilityLabel,
+                            selected }, rest))
                         : child) })] }) }));
 };

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

@@ -10,30 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 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)}`
-        : ''};
-  `;
-});
+import { useTheme } from '../../styled.native';
+import { ICON_SIZE, StyledIcon, StyledInput, StyledInputWrapper, } from './styled';
 const Input = (_a) => {
-    var { onFocus, onBlur, style, iconLeft, iconRight, rightSlot, ref } = _a, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight", "rightSlot", "ref"]);
+    var { onFocus, onBlur, style, iconLeft, iconRight, invalid, rightSlot, ref, selected } = _a, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight", "invalid", "rightSlot", "ref", "selected"]);
     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, Object.assign({}, rest, breakpoints, { iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, ref: ref, onFocus: (event) => {
+    const theme = useTheme();
+    return (_jsxs(StyledInputWrapper, { focused: focused, hasError: invalid, isSelected: selected, children: [iconLeft ? (_jsx(StyledIcon, { name: iconLeft, size: ICON_SIZE, pointerEvents: "none", side: "left" })) : null, _jsx(StyledInput, Object.assign({}, rest, breakpoints, { hasRightSlot: !!rightSlot, iconLeft: !!iconLeft, iconRight: !!iconRight, invalid: invalid, placeholderTextColor: theme.color.surface.onSurfaceVariant, ref: ref, style: style, onFocus: (event) => {
                     setFocused(true);
                     if (onFocus) {
                         onFocus(event);
@@ -43,50 +29,6 @@ const Input = (_a) => {
                     if (onBlur) {
                         onBlur(event);
                     }
-                } })), iconRight && !rightSlot ? (_jsx(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
+                } })), iconRight && !rightSlot ? (_jsx(StyledIcon, { name: iconRight, size: ICON_SIZE, 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 };