@ovotech/element-native 5.5.0 → 5.6.0

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 };

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

@@ -0,0 +1,60 @@
+import styled, { css } from '../../styled.native';
+import { numToPx } from '../../theme';
+import { getShadowCSS } from '../../utils';
+import { Icon } from '../Icon';
+export const ICON_SIZE = 20;
+export const StyledInputWrapper = styled.View(({ theme, focused, hasError, isSelected }) => {
+    let borderColor = 'transparent';
+    /* prioritise error and selected states for border, even when focused */
+    if (hasError) {
+        borderColor = theme.color.alert.error;
+    }
+    else if (isSelected) {
+        borderColor = theme.color.surface.onSurface;
+    }
+    else if (focused) {
+        borderColor = theme.color.outline.outer;
+    }
+    return css `
+    align-self: stretch;
+    background-color: ${theme.color.surface.bright};
+    border-radius: ${numToPx(theme.border.radius.md)};
+    border-width: ${numToPx(theme.border.width.md)};
+    border-style: solid;
+    border-color: ${borderColor};
+    flex-direction: row;
+    ${getShadowCSS({ theme })}
+  `;
+});
+export const StyledInput = styled.TextInput(({ theme, smallAndUp, iconLeft, iconRight, hasRightSlot }) => {
+    const fontSize = smallAndUp
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return css `
+    position: relative;
+    flex: 1;
+    padding: ${numToPx(theme.space[400])};
+    border-radius: ${numToPx(theme.border.radius.lg)};
+    color: ${theme.color.surface.onSurface};
+    font-family: ${theme.native.font.family.book};
+    font-size: ${numToPx(fontSize)};
+
+    /* NOTE: height being queried with design, subject to change */
+    min-height: ${numToPx(theme.space[1600])};
+
+    ${iconLeft ? `padding-left: ${numToPx(theme.space[800])};` : ''}
+    ${iconRight || hasRightSlot
+        ? `padding-right: ${numToPx(theme.space[800])};`
+        : ''}
+  `;
+});
+export const StyledIcon = styled(Icon)(({ theme, side }) => {
+    return css `
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    margin-top: -${ICON_SIZE / 2}px;
+    ${side === 'left' ? `left: ${numToPx(theme.space[200])}` : ''};
+    ${side === 'right' ? `right: ${numToPx(theme.space[200])}` : ''};
+  `;
+});

package/dist/esm/components/LargeValueReference/LargeValueReference.js

@@ -0,0 +1,45 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { useTheme } from '../../styled.native';
+import { Icon } from '../Icon';
+import { LabelText } from '../LabelText';
+import { Stack } from '../Stack';
+import { LargeValue, LargeValueContainer, StyledLargeValueReferenceWrapper, } from './styles';
+export const LargeValueReference = (_a) => {
+    var { value, autoSpacing = false, autoSpacingInterval = 5, label, onCopy, theme = 'bright' } = _a, rest = __rest(_a, ["value", "autoSpacing", "autoSpacingInterval", "label", "onCopy", "theme"]);
+    if (value === undefined || value === null || String(value).length === 0)
+        return null;
+    const elementTheme = useTheme();
+    // Normalizes JS's default scientific notation
+    const valueAsString = useMemo(() => typeof value === 'number'
+        ? value.toLocaleString('fullwide', {
+            useGrouping: false,
+        })
+        : value.toString(), [value]);
+    const splitValue = useMemo(() => {
+        if (autoSpacing && valueAsString.length > autoSpacingInterval) {
+            const matches = valueAsString.match(new RegExp(`.{1,${autoSpacingInterval}}`, 'g'));
+            return matches || [];
+        }
+        return [];
+    }, [autoSpacing, valueAsString, autoSpacingInterval]);
+    const handlePress = useCallback(() => {
+        // Call onCopy callback
+        if (typeof onCopy === 'function') {
+            onCopy(valueAsString);
+        }
+    }, [valueAsString, onCopy]);
+    return (_jsxs(Stack, { spaceBetween: 2, children: [label ? _jsx(LabelText, { children: label }) : null, _jsx(StyledLargeValueReferenceWrapper, Object.assign({ backgroundTheme: theme }, rest, { children: _jsxs(LargeValueContainer, { children: [autoSpacing && splitValue.length > 0 ? (splitValue.map((val, index) => (_jsx(LargeValue, { children: val }, index)))) : (_jsx(LargeValue, { children: valueAsString })), onCopy ? (_jsx(TouchableOpacity, { activeOpacity: 0.8, onPress: handlePress, hitSlop: 10, testID: "large-value-reference-copy-button", children: _jsx(Icon, { name: "copy", size: 20, color: elementTheme.color.surface.onSurface, testID: "large-value-reference-copy-icon" }) })) : null] }) }))] }));
+};

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

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

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

@@ -0,0 +1,23 @@
+import { numToPx } from '@ovotech/element-core';
+import styled from '../../styled.native';
+import { P } from '../P';
+export const StyledLargeValueReferenceWrapper = styled.View(({ theme, backgroundTheme }) => `
+  align-items: center;
+  max-width: ${'100%'};
+  gap: ${numToPx(theme.space[200])};
+  padding: ${numToPx(theme.space[400])};
+  background-color: ${theme.color.surface[backgroundTheme]};
+  border-radius: ${numToPx(theme.border.radius.lg)};
+  border: ${numToPx(theme.border.width.sm)} solid ${theme.color.surface.borderDim};
+`);
+export const LargeValueContainer = styled.View(({ theme }) => `
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: ${numToPx(theme.space[200])};
+`);
+export const LargeValue = styled(P)(() => `
+  font-family: monospace;
+  letter-spacing: 2px;
+`);

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

@@ -1,14 +1,16 @@
 import { numToPx } from '@ovotech/element-core';
 import { Pressable } from 'react-native';
 import styled, { css } from '../../styled.native';
-export const StyledPressable = styled(Pressable)(({ theme, focused, }) => {
+import { ICON_SIZE } from '../Input/styled';
+export const StyledPressable = styled(Pressable)(({ theme }) => {
     return css `
     display: flex;
     align-items: center;
     position: absolute;
     width: ${numToPx(theme.space[400])};
     z-index: 1;
-    top: ${focused ? '16px' : '14px'};
-    right: ${numToPx(theme.space[300])};
+    top: 50%;
+    margin-top: -${numToPx(ICON_SIZE / 2)};
+    right: ${numToPx(theme.space[400])};
   `;
 });

package/dist/esm/components/PasswordInput/PasswordVisibilityToggle.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Icon } from '../Icon';
+import { ICON_SIZE } from '../Input/styled';
 import { StyledPressable } from './PasswordInput.styled';
 export const useTogglePasswordVisibility = () => {
     const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -12,11 +13,4 @@ export const useTogglePasswordVisibility = () => {
         handlePasswordVisibility,
     };
 };
-export const PasswordVisibilityToggle = ({ iconName, visibilityToggleLabel, handlePasswordVisibility, }) => {
-    const [focused, setFocused] = useState(false);
-    return (_jsx(StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessible: true, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: () => {
-            setFocused(true);
-        }, onBlur: () => {
-            setFocused(false);
-        }, children: _jsx(Icon, { name: iconName, size: 16, pointerEvents: "none" }) }));
-};
+export const PasswordVisibilityToggle = ({ iconName, visibilityToggleLabel, handlePasswordVisibility, }) => (_jsx(StyledPressable, { testID: "password-input-visibility-toggle", accessible: true, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: ICON_SIZE, children: _jsx(Icon, { name: iconName, size: ICON_SIZE, pointerEvents: "none" }) }));

package/dist/esm/components/RadioCard/RadioCard.js

@@ -10,61 +10,14 @@ 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, } from 'react-native';
-import { css } from 'styled-components';
-import styled from '../../styled.native';
 import { LabelText } from '../LabelText';
-const StyledRadioInputWrapper = styled.View(({ theme }) => {
-    return `
-      width: ${numToPx(theme.space[600])};
-      height: ${numToPx(theme.space[600])};
-      margin-top: ${numToPx(theme.space[200])};
-    `;
-});
-const StyledRadioInput = styled.View(({ theme, invalid, checked }) => {
-    return `
-      width: ${numToPx(theme.space[600])};
-      height: ${numToPx(theme.space[600])};
-      border: ${numToPx(theme.border.width.md)} solid;
-      align-items: center;
-      justify-content: center;
-      border-radius: ${numToPx(theme.space[600])};
-      border-color: ${invalid
-        ? theme.input.color.borderError
-        : checked
-            ? theme.input.color.selected
-            : theme.input.color.border};
-      background: ${checked ? theme.input.color.selectedTint : 'transparent'};
-    `;
-});
-const StyledRadioInputDot = styled.View(({ theme, checked }) => {
-    return `
-      width: ${numToPx(theme.space[300])};
-      height: ${numToPx(theme.space[300])};
-      border-radius: ${numToPx(theme.space[300])};
-      background: ${theme.input.color.selected};
-      opacity: ${checked ? 1 : 0};
-    `;
-});
+import { StyledRadioInput, StyledRadioInputDot, StyledRadioInputWrapper, StyledWrapper, TextContainer, } from './RadioCard.styles';
+export const RadioCard = (_a) => {
+    var { label, checked, invalid, activeOpacity = 0.8, testID, alignment = 'center', ref } = _a, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID", "alignment", "ref"]);
+    return (_jsx(TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: _jsxs(StyledWrapper, { checked: checked, invalid: invalid, alignment: alignment, children: [_jsx(TextContainer, { children: typeof label === 'string' ? _jsx(LabelText, { children: label }) : label }), _jsx(Input, { checked: checked, invalid: invalid, testID: testID })] }) })));
+};
 const Input = (_a) => {
     var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
     return (_jsx(StyledRadioInputWrapper, Object.assign({}, rest, { children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) })));
 };
-const StyledWrapper = styled.View(({ theme, checked, invalid }) => css `
-    align-items: center;
-    background: ${theme.color.surface.bright};
-    padding: ${numToPx(theme.space[200])};
-    min-width: 82px;
-    border-radius: ${numToPx(theme.border.radius.lg)};
-    border: ${numToPx(theme.border.width.md)} solid;
-    border-color: ${invalid
-    ? theme.input.color.borderError
-    : checked
-        ? theme.input.color.selected
-        : 'transparent'};
-  `);
-export const RadioCard = (_a) => {
-    var { label, checked, invalid, activeOpacity = 0.8, testID, ref } = _a, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID", "ref"]);
-    return (_jsx(TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: _jsxs(StyledWrapper, { checked: checked, invalid: invalid, children: [typeof label === 'string' ? _jsx(LabelText, { children: label }) : label, _jsx(Input, { checked: checked, invalid: invalid, testID: testID })] }) })));
-};

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

@@ -0,0 +1,61 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+export const StyledRadioInputWrapper = styled.View(({ theme }) => {
+    return `
+      width: ${numToPx(theme.space[600])};
+      height: ${numToPx(theme.space[600])};
+      margin-top: ${numToPx(theme.space[200])};
+    `;
+});
+export const StyledRadioInput = styled.View(({ theme, invalid, checked }) => {
+    return `
+      width: ${numToPx(theme.space[600])};
+      height: ${numToPx(theme.space[600])};
+      border: ${numToPx(theme.border.width.md)} solid;
+      align-items: center;
+      justify-content: center;
+      border-radius: ${numToPx(theme.space[600])};
+      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 StyledRadioInputDot = styled.View(({ theme, checked }) => {
+    return `
+      width: ${numToPx(theme.space[300])};
+      height: ${numToPx(theme.space[300])};
+      border-radius: ${numToPx(theme.space[300])};
+      background: ${theme.input.color.selected};
+      opacity: ${checked ? 1 : 0};
+    `;
+});
+export const StyledWrapper = styled.View(({ theme, checked, invalid, alignment }) => css `
+    align-items: center;
+    text-align: center;
+    justify-content: ${alignment === 'center' ? 'center' : 'flex-end'};
+    flex-direction: ${alignment === 'left'
+    ? 'row-reverse'
+    : alignment === 'right'
+        ? 'row'
+        : 'column'};
+    background: ${theme.color.surface.bright};
+    padding: ${alignment === 'center'
+    ? numToPx(theme.space[200])
+    : numToPx(theme.space[400])};
+    border-radius: ${numToPx(theme.border.radius.lg)};
+    border: ${numToPx(theme.border.width.md)} solid;
+    border-color: ${invalid
+    ? theme.input.color.borderError
+    : checked
+        ? theme.input.color.selected
+        : 'transparent'};
+    gap: ${alignment === 'center' ? 0 : numToPx(theme.space[400])};
+  `);
+export const TextContainer = styled.View(({ alignment }) => css `
+    flex-direction: column;
+    flex-grow: 1;
+    text-align: ${alignment === 'center' ? 'center' : 'left'};
+  `);

package/dist/esm/components/SelectField/Select.js

@@ -1,94 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
 import groupBy from 'lodash.groupby';
 import { Fragment, useState } from 'react';
 import { Dimensions, Modal, ScrollView, View, } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon';
 import { P } from '../P';
 import { Strong } from '../Strong';
-const SelectInput = styled.TouchableOpacity(({ theme, hasError }) => {
-    return css `
-      flex-direction: row;
-      align-items: center;
-      background-color: transparent;
-      border-color: ${hasError
-        ? theme.input.color.borderError
-        : theme.input.color.border};
-      border-width: ${numToPx(theme.border.width.md)};
-      border-radius: ${numToPx(theme.border.radius.sm)};
-      padding: ${numToPx(theme.space[200])};
-      padding-right: ${numToPx(theme.space[350])};
-      height: ${numToPx(theme.space[1100])};
-    `;
-});
-const DropdownWrapper = styled.TouchableOpacity(({ theme }) => css `
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-
-    /* 80 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */
-    background-color: ${theme.color.brand.dark}80;
-  `);
-const DropdownContainer = styled(SafeAreaView)(({ theme }) => css `
-    width: 95%;
-    max-height: 70%;
-    border-radius: ${numToPx(theme.border.radius.sm)};
-    background-color: ${theme.color.surface.bright};
-  `);
-const SelectOption = styled.TouchableOpacity(({ theme, isLastOption }) => css `
-    flex-direction: row;
-    align-items: center;
-    border-bottom-color: ${theme.color.input.borderDim};
-    border-bottom-width: ${isLastOption ? 0 : 1}px;
-    padding: 0 ${numToPx(theme.space[400])};
-  `);
-const Radio = styled.View(({ theme, isChecked }) => css `
-    background-color: ${isChecked
-    ? theme.input.color.selectedTint
-    : 'transparent'};
-    width: ${numToPx(theme.space[600])};
-    height: ${numToPx(theme.space[600])};
-    margin-left: auto;
-    border-radius: ${numToPx(theme.space[600])};
-    border-width: ${numToPx(theme.border.width.md)};
-    border-color: ${theme.input.color[isChecked ? 'selected' : 'border']};
-  `);
-const RadioDot = styled.View(({ theme, isChecked }) => css `
-    background-color: ${theme.input.color.selected};
-    position: absolute;
-    top: ${numToPx(theme.space[100])};
-    width: ${numToPx(theme.space[300])};
-    height: ${numToPx(theme.space[300])};
-    border-radius: ${numToPx(theme.space[300])};
-    align-self: center;
-    opacity: ${isChecked ? 1 : 0};
-  `);
-const StyledP = styled(P)(({ theme }) => css `
-    margin-top: ${numToPx(theme.space[300])};
-    margin-bottom: ${numToPx(theme.space[300])};
-  `);
-const StyledCategory = styled(P)(({ theme }) => css `
-    font-size: ${numToPx(theme.font.size.xs.mediaQuery.lg)};
-    color: ${theme.color.surface.onSurface};
-    background-color: ${theme.color.surface.surface};
-    padding: ${numToPx(theme.space[100])} ${numToPx(theme.space[400])};
-  `);
-export const Select = ({ options = [], defaultSelected = { label: '', value: 'default' }, noOptionMessage = 'No option selected', onSelected = () => null, hasError = false, testID = 'select', ref, }) => {
+import { DropdownContainer, DropdownWrapper, Radio, RadioDot, SelectInput, SelectOption, StyledCategory, StyledP, } from './styled';
+export const Select = ({ options = [], defaultSelected = { label: '', value: 'default' }, noOptionMessage = 'No option selected', onSelected = () => null, hasError = false, selected, size = 'medium', testID = 'select', ref, }) => {
     const [isOpen, setOpen] = useState(false);
-    const [selected, setSelected] = useState(defaultSelected);
+    const [selectedVal, setSelectedVal] = useState(defaultSelected);
+    const isSmall = size === 'small';
+    const iconName = `chevron-down${isSmall ? '-small' : ''}`;
     const height = Dimensions.get('window').height;
     const dropdownContainerMaxHeight = height * 0.7;
     const handleOptionPress = (val) => {
         onSelected(val);
         setOpen(false);
-        setSelected(val);
+        setSelectedVal(val);
     };
     const optionsByCategories = groupBy(options, 'category');
     const requiredOption = {
         label: `-- ${noOptionMessage} --`,
         value: 'default',
     };
-    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: () => setOpen(!isOpen), ref: ref, children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: () => setOpen(false), children: _jsx(DropdownWrapper, { onPress: () => setOpen(false), children: _jsx(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: `${testID}-OptionsScrollView`, children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: () => handleOptionPress(requiredOption), children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selected.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(category => (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map((option, i) => (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: () => handleOptionPress(option), children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selected.value === option.value, children: _jsx(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)))] }, category)))] }) }) }) })] }));
+    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, isSelected: selected, size: size, onPress: () => setOpen(!isOpen), ref: ref, children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selectedVal.value === 'default' ? '' : selectedVal.label }), _jsx(Icon, { name: iconName, size: isSmall ? 16 : 20, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: () => setOpen(false), children: _jsx(DropdownWrapper, { onPress: () => setOpen(false), children: _jsx(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: `${testID}-OptionsScrollView`, children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: () => handleOptionPress(requiredOption), children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selectedVal.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selectedVal.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(category => (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map((option, i) => (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: () => handleOptionPress(option), children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selectedVal.value === option.value, children: _jsx(RadioDot, { isChecked: selectedVal.value === option.value }) })] }, option.label)))] }, category)))] }) }) }) })] }));
 };