@ovotech/element-native 5.5.0 → 5.6.0

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

@@ -9,10 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { Select } from './Select';
 export const SelectField = (_a) => {
-    var { error, options, onSelected, noOptionMessage, defaultSelected, testID, ref } = _a, rest = __rest(_a, ["error", "options", "onSelected", "noOptionMessage", "defaultSelected", "testID", "ref"]);
-    return (_jsx(Field, Object.assign({ affixWidth: 20, error: error }, rest, { children: _jsx(_Fragment, { children: _jsx(Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), testID: testID, ref: ref }) }) })));
+    var { error, options, onSelected, noOptionMessage, defaultSelected, size = 'medium', testID, ref } = _a, rest = __rest(_a, ["error", "options", "onSelected", "noOptionMessage", "defaultSelected", "size", "testID", "ref"]);
+    return (_jsx(Field, Object.assign({ affixWidth: 20, error: error }, rest, { children: _jsx(Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), size: size, testID: testID, ref: ref }) })));
 };

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

@@ -0,0 +1,82 @@
+import { SafeAreaView } from 'react-native-safe-area-context';
+import styled, { css } from '../../styled.native';
+import { numToPx } from '../../theme';
+import { getShadowCSS } from '../../utils';
+import { P } from '../P';
+export const SelectInput = styled.TouchableOpacity(({ theme, hasError, isSelected, size }) => {
+    const isSmall = size === 'small';
+    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;
+    }
+    return css `
+    flex-direction: row;
+    align-items: center;
+    background-color: ${theme.color.surface.bright};
+    border-color: ${borderColor};
+    border-width: ${numToPx(theme.border.width.md)};
+    border-radius: ${numToPx(theme.border.radius.md)};
+    padding-top: ${numToPx(theme.space[isSmall ? 200 : 400])};
+    padding-bottom: ${numToPx(theme.space[isSmall ? 200 : 400])};
+    padding-left: ${numToPx(theme.space[400])};
+    padding-right: ${numToPx(theme.space[400])};
+    min-height: ${numToPx(theme.space[isSmall ? 1100 : 1600])};
+    ${getShadowCSS({ theme })}
+  `;
+});
+export 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;
+  `);
+export const DropdownContainer = styled(SafeAreaView)(({ theme }) => css `
+    width: 95%;
+    max-height: 70%;
+    border-radius: ${numToPx(theme.border.radius.md)};
+    background-color: ${theme.color.surface.bright};
+  `);
+export 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])};
+  `);
+export 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']};
+  `);
+export 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};
+  `);
+export const StyledP = styled(P)(({ theme }) => css `
+    margin-top: ${numToPx(theme.space[300])};
+    margin-bottom: ${numToPx(theme.space[300])};
+  `);
+export 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])};
+  `);

package/dist/esm/components/SkeletonText/SkeletonText.js

@@ -15,10 +15,10 @@ import { useBreakpoint } from '../../hooks';
 import styled from '../../styled.native';
 import { P } from '../P';
 import { SkeletonAnimation } from '../SkeletonAnimation';
-const StyledSkeletonText = styled.View(({ theme, aboveSmallBreakpoint, short, size, lines = 1 }) => {
+const StyledSkeletonText = styled.View(({ theme, aboveSmallBreakpoint, short, size, isLast }) => {
     return `
     background-color: ${theme.color.surface.dim};
-    margin-bottom: ${lines > 1 ? numToPx(theme.space[200]) : 0};
+    margin-bottom: ${isLast ? 0 : numToPx(theme.space[200])};
     border-radius: ${numToPx(theme.border.radius.sm)};
     height: ${aboveSmallBreakpoint
         ? numToPx(theme.font.size.md.mediaQuery.lg)
@@ -31,9 +31,9 @@ export const SkeletonText = (_a) => {
     var { lines = 1, size } = _a, rest = __rest(_a, ["lines", "size"]);
     const generatedLines = [];
     const { smallAndUp } = useBreakpoint();
-    const hasMultipleLines = lines > 1;
     for (let i = 1; i <= lines; i++) {
-        generatedLines.push(_jsx(StyledSkeletonText, { short: hasMultipleLines && i === lines, aboveSmallBreakpoint: smallAndUp, size: size }, `line-${i}`));
+        const isLast = i === lines;
+        generatedLines.push(_jsx(StyledSkeletonText, { short: lines > 1 && isLast, aboveSmallBreakpoint: smallAndUp, size: size, isLast: isLast }, `line-${i}`));
     }
     return (
     // @ts-ignore styled components stuff

package/dist/esm/components/TextareaInput/TextareaInput.js

@@ -11,15 +11,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
 import { Input } from '../Input/Input';
-const StyledInput = styled(Input)(({ theme, rows }) => css `
-    padding: ${numToPx(theme.space[200])};
-    padding-top: ${numToPx(theme.space[300])};
-    height: ${theme.space[800] * rows}px;
-  `);
+const StyledInput = styled(Input)(({ theme, rows, smallAndUp, }) => {
+    const lineHeight = smallAndUp
+        ? theme.font.lineHeight.md.mediaQuery.lg
+        : theme.font.lineHeight.md.mediaQuery.sm;
+    return css `
+    min-height: ${theme.space[800] * rows}px;
+    line-height: ${rows > 1 ? numToPx(lineHeight) : 'normal'};
+  `;
+});
 const TextareaInput = (_a) => {
     var { rows = 3, ref } = _a, rest = __rest(_a, ["rows", "ref"]);
-    return (_jsx(StyledInput, Object.assign({}, rest, { keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref })));
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledInput, Object.assign({}, rest, breakpoints, { keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref })));
 };
 export { TextareaInput };

package/dist/esm/components/Toggle/Toggle.js

@@ -17,7 +17,7 @@ import { HintText } from '../HintText/HintText';
 import { LabelText } from '../LabelText';
 import { StyledToggleDot, StyledToggleInput, StyledToggleInputWrapper, StyledWrapper, } from './styles';
 const Input = (_a) => {
-    var { checked, labelPosition, testID } = _a, rest = __rest(_a, ["checked", "labelPosition", "testID"]);
+    var { checked, labelPosition, testID, toggleBackgroundColor } = _a, rest = __rest(_a, ["checked", "labelPosition", "testID", "toggleBackgroundColor"]);
     const theme = useTheme();
     const leftVal = useRef(new Animated.Value(checked ? theme.space[600] : theme.space[100])).current;
     useEffect(() => {
@@ -27,12 +27,10 @@ const Input = (_a) => {
             useNativeDriver: true,
         }).start();
     }, [checked]);
-    return (_jsx(StyledToggleInputWrapper, Object.assign({ labelPosition: labelPosition }, rest, { children: _jsx(StyledToggleInput, { checked: checked, testID: testID, children: _jsx(StyledToggleDot, { style: {
-                    transform: [{ translateX: leftVal }],
-                }, checked: checked }) }) })));
+    return (_jsx(StyledToggleInputWrapper, Object.assign({ labelPosition: labelPosition }, rest, { children: _jsx(StyledToggleInput, { checked: checked, testID: testID, toggleBackgroundColor: toggleBackgroundColor, children: _jsx(StyledToggleDot, { style: { transform: [{ translateX: leftVal }] }, checked: checked }) }) })));
 };
 export const Toggle = (_a) => {
-    var { activeOpacity = 0.8, checked = false, label, hint, inline, labelPosition = 'left', testID, ref } = _a, rest = __rest(_a, ["activeOpacity", "checked", "label", "hint", "inline", "labelPosition", "testID", "ref"]);
+    var { activeOpacity = 0.8, checked = false, label, hint, inline, labelPosition = 'left', testID, ref, toggleBackgroundColor } = _a, rest = __rest(_a, ["activeOpacity", "checked", "label", "hint", "inline", "labelPosition", "testID", "ref", "toggleBackgroundColor"]);
     const hasLabel = label !== undefined;
-    return (_jsxs(StyledWrapper, Object.assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? (_jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })) : null, _jsx(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
+    return (_jsxs(StyledWrapper, Object.assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? (_jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })) : null, _jsx(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined, toggleBackgroundColor: toggleBackgroundColor })] })));
 };

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

@@ -19,14 +19,14 @@ export const StyledToggleInputWrapper = styled.View(({ theme, labelPosition }) =
         : ''}
     `;
 });
-export const StyledToggleInput = styled.View(({ theme, checked }) => {
+export const StyledToggleInput = styled.View(({ theme, checked, toggleBackgroundColor }) => {
     return `
       width: ${numToPx(theme.space[1100])};
       height: ${numToPx(theme.space[600])};
       justify-content: center;
       border-radius: ${numToPx(theme.border.radius.lg)};
-      background: ${checked
-        ? theme.color.outline.outer
+      background-color: ${checked
+        ? toggleBackgroundColor || theme.color.outline.outer
         : theme.color.surface.onSurfaceVariant};
     `;
 });

package/dist/esm/components/index.js

@@ -16,10 +16,13 @@ export * from './Divider';
 export * from './Em';
 export * from './EmailField';
 export * from './EmailInput';
+export * from './EmptyState';
+export * from './ErrorWrapper';
 export * from './Field';
 export * from './Grid';
 export * from './Heading';
 export * from './Icon';
+export * from './LargeValueReference';
 export * from './LineThrough';
 export * from './Link';
 export * from './List';

package/dist/esm/hooks/use-font-scaling.js

@@ -0,0 +1,32 @@
+import { useWindowDimensions } from 'react-native';
+import { useBreakpoint } from './use-breakpoint.native';
+/**
+ * A hook to get information about the current font scaling.
+ * It uses `useWindowDimensions` to get the `fontScale` and will update when it changes.
+ * It also uses `useBreakpoint` to only figure out scaling information below the small breakpoint, and otherwise returns defaults
+ *
+ * @returns An object with font scaling information.
+ */
+export function useFontScaling() {
+    const { smallAndUp } = useBreakpoint();
+    const { fontScale } = useWindowDimensions();
+    // For larger than "small" screens, we're not as concerned about font-scaling
+    // so we maintain defaults
+    if (smallAndUp) {
+        return {
+            fontScale: 1,
+            isFontScalingSmall: false,
+            isFontScalingLarge: false,
+            isFontScalingDefault: true,
+        };
+    }
+    const isFontScalingSmall = fontScale < 1;
+    const isFontScalingLarge = fontScale > 1;
+    const isFontScalingDefault = fontScale === 1;
+    return {
+        fontScale,
+        isFontScalingSmall,
+        isFontScalingLarge,
+        isFontScalingDefault,
+    };
+}

package/dist/esm/index.js

@@ -1,3 +1,4 @@
 export * from './components';
+export * from './hooks';
 export * from './theme';
 export * from './utils';

package/dist/esm/test/utils.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { themeNative } from '@ovotech/element-core';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider } from '../styled.native';
+function Wrapper({ children }) {
+    return _jsx(ThemeProvider, { theme: themeNative, children: children });
+}
+const customRender = (ui, options) => render(ui, Object.assign({ wrapper: Wrapper }, options));
+// re-export everything
+export * from '@testing-library/react-native';
+// override render method
+export { customRender as render };

package/dist/esm/utils/utils.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, } from 'react';
 import { useBreakpoint } from '../hooks';
+import { css } from '../styled.native';
+import { numToPx } from '../theme';
 function mergeRefs(...refs) {
     return value => {
         refs.forEach(ref => {
@@ -66,4 +68,13 @@ function filterChildrenByType(children, type) {
 function getValidChildren(children) {
     return Children.toArray(children).filter(Boolean);
 }
-export { callAll, filterChildrenByType, getErrorMessage, getText, getValidChildren, mergeRefs, responsiveStyle, styledComponentWithBreakpoints, };
+function getShadowCSS({ theme, shadowColor, shadowOffsetX, shadowOffsetY, shadowOpacity = 0.1, shadowRadius, elevation = 5, }) {
+    return css `
+    shadow-color: ${shadowColor || theme.color.neutral.black};
+    shadow-offset: ${`${shadowOffsetX > 0 ? numToPx(shadowOffsetX) : 0} ${numToPx(shadowOffsetY || theme.space[100])}`};
+    shadow-opacity: ${shadowOpacity || '0.1'};
+    shadow-radius: ${numToPx(shadowRadius || theme.space[200])};
+    elevation: ${elevation || 5};
+  `;
+}
+export { callAll, filterChildrenByType, getErrorMessage, getShadowCSS, getText, getValidChildren, mergeRefs, responsiveStyle, styledComponentWithBreakpoints, };

package/dist/hooks/use-font-scaling.d.ts

@@ -0,0 +1,26 @@
+export interface FontScalingInfo {
+    /**
+     * The raw font scale factor.
+     */
+    fontScale: number;
+    /**
+     *  Indicates if the font scale is smaller than the default.
+     */
+    isFontScalingSmall: boolean;
+    /**
+     * Indicates if the font scale is larger than the default.
+     */
+    isFontScalingLarge: boolean;
+    /**
+     * Indicates if the font scale is at the default value (1).
+     */
+    isFontScalingDefault: boolean;
+}
+/**
+ * A hook to get information about the current font scaling.
+ * It uses `useWindowDimensions` to get the `fontScale` and will update when it changes.
+ * It also uses `useBreakpoint` to only figure out scaling information below the small breakpoint, and otherwise returns defaults
+ *
+ * @returns An object with font scaling information.
+ */
+export declare function useFontScaling(): FontScalingInfo;

package/dist/hooks/use-font-scaling.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFontScaling = useFontScaling;
+const react_native_1 = require("react-native");
+const use_breakpoint_native_1 = require("./use-breakpoint.native");
+/**
+ * A hook to get information about the current font scaling.
+ * It uses `useWindowDimensions` to get the `fontScale` and will update when it changes.
+ * It also uses `useBreakpoint` to only figure out scaling information below the small breakpoint, and otherwise returns defaults
+ *
+ * @returns An object with font scaling information.
+ */
+function useFontScaling() {
+    const { smallAndUp } = (0, use_breakpoint_native_1.useBreakpoint)();
+    const { fontScale } = (0, react_native_1.useWindowDimensions)();
+    // For larger than "small" screens, we're not as concerned about font-scaling
+    // so we maintain defaults
+    if (smallAndUp) {
+        return {
+            fontScale: 1,
+            isFontScalingSmall: false,
+            isFontScalingLarge: false,
+            isFontScalingDefault: true,
+        };
+    }
+    const isFontScalingSmall = fontScale < 1;
+    const isFontScalingLarge = fontScale > 1;
+    const isFontScalingDefault = fontScale === 1;
+    return {
+        fontScale,
+        isFontScalingSmall,
+        isFontScalingLarge,
+        isFontScalingDefault,
+    };
+}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
+export * from './hooks';
 export * from './theme';
 export * from './utils';

package/dist/index.js

@@ -15,5 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components"), exports);
+__exportStar(require("./hooks"), exports);
 __exportStar(require("./theme"), exports);
 __exportStar(require("./utils"), exports);

package/dist/styled.native.d.ts

@@ -39,6 +39,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -81,6 +82,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -89,6 +91,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -613,6 +616,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -655,6 +659,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -663,6 +668,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1187,6 +1193,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1229,6 +1236,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1237,6 +1245,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1761,6 +1770,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1803,6 +1813,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1811,6 +1822,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -2335,6 +2347,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -2377,6 +2390,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -2385,6 +2399,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -2909,6 +2924,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -2951,6 +2967,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -2959,6 +2976,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

package/dist/test/utils.d.ts

@@ -0,0 +1,4 @@
+import { render } from '@testing-library/react-native';
+declare const customRender: typeof render;
+export * from '@testing-library/react-native';
+export { customRender as render };

package/dist/test/utils.js

@@ -0,0 +1,28 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.render = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_core_1 = require("@ovotech/element-core");
+const react_native_1 = require("@testing-library/react-native");
+const styled_native_1 = require("../styled.native");
+function Wrapper({ children }) {
+    return (0, jsx_runtime_1.jsx)(styled_native_1.ThemeProvider, { theme: element_core_1.themeNative, children: children });
+}
+const customRender = (ui, options) => (0, react_native_1.render)(ui, Object.assign({ wrapper: Wrapper }, options));
+exports.render = customRender;
+// re-export everything
+__exportStar(require("@testing-library/react-native"), exports);

package/dist/utils/utils.d.ts

@@ -1,6 +1,7 @@
 import { ComponentType, ReactElement, ReactNode, Ref, RefCallback, RefObject } from 'react';
 import { View, ViewProps } from 'react-native';
 import { BreakpointNames, Breakpoints } from '../hooks';
+import { ThemeNative } from '../styled.native';
 declare function mergeRefs<T>(...refs: Array<RefObject<T> | Ref<T> | undefined>): RefCallback<T>;
 declare function getText(children: ReactNode): string;
 declare function styledComponentWithBreakpoints<T = ViewProps, C = View>(Component: ComponentType<T>): (props: Omit<T, BreakpointNames> & (C extends ComponentType<any> ? import("react").ComponentProps<C> : object)) => import("react/jsx-runtime").JSX.Element;
@@ -12,4 +13,13 @@ declare function getErrorMessage(id: string, errors: Array<{
 declare function callAll(...fns: Array<Function | undefined>): (...args: any[]) => void;
 declare function filterChildrenByType(children: ReactNode, type: ComponentType): ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
 declare function getValidChildren(children: ReactNode): ReactNode;
-export { callAll, filterChildrenByType, getErrorMessage, getText, getValidChildren, mergeRefs, responsiveStyle, styledComponentWithBreakpoints, };
+declare function getShadowCSS({ theme, shadowColor, shadowOffsetX, shadowOffsetY, shadowOpacity, shadowRadius, elevation, }: {
+    theme: ThemeNative;
+    shadowColor?: string;
+    shadowOffsetX?: number;
+    shadowOffsetY?: number;
+    shadowOpacity?: number;
+    shadowRadius?: number;
+    elevation?: number;
+}): import("styled-components").FlattenSimpleInterpolation;
+export { callAll, filterChildrenByType, getErrorMessage, getShadowCSS, getText, getValidChildren, mergeRefs, responsiveStyle, styledComponentWithBreakpoints, };

package/dist/utils/utils.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.callAll = callAll;
 exports.filterChildrenByType = filterChildrenByType;
 exports.getErrorMessage = getErrorMessage;
+exports.getShadowCSS = getShadowCSS;
 exports.getText = getText;
 exports.getValidChildren = getValidChildren;
 exports.mergeRefs = mergeRefs;
@@ -11,6 +12,8 @@ exports.styledComponentWithBreakpoints = styledComponentWithBreakpoints;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const hooks_1 = require("../hooks");
+const styled_native_1 = require("../styled.native");
+const theme_1 = require("../theme");
 function mergeRefs(...refs) {
     return value => {
         refs.forEach(ref => {
@@ -76,3 +79,12 @@ function filterChildrenByType(children, type) {
 function getValidChildren(children) {
     return react_1.Children.toArray(children).filter(Boolean);
 }
+function getShadowCSS({ theme, shadowColor, shadowOffsetX, shadowOffsetY, shadowOpacity = 0.1, shadowRadius, elevation = 5, }) {
+    return (0, styled_native_1.css) `
+    shadow-color: ${shadowColor || theme.color.neutral.black};
+    shadow-offset: ${`${shadowOffsetX > 0 ? (0, theme_1.numToPx)(shadowOffsetX) : 0} ${(0, theme_1.numToPx)(shadowOffsetY || theme.space[100])}`};
+    shadow-opacity: ${shadowOpacity || '0.1'};
+    shadow-radius: ${(0, theme_1.numToPx)(shadowRadius || theme.space[200])};
+    elevation: ${elevation || 5};
+  `;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,8 @@
   ],
   "repository": {
     "type": "git",
-    "url": "@ovotech/element"
+    "url": "https://github.com/ovotech/element-design-system.git",
+    "directory": "packages/native"
   },
   "dependencies": {
     "@backpackapp-io/react-native-toast": "^0.14.0",
@@ -28,7 +29,6 @@
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.1.0",
     "@testing-library/react-native": "^13.3.3",
-    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.4",
     "@types/lodash.groupby": "^4.6.9",
     "@types/react": "^19.1.0",
@@ -60,10 +60,10 @@
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "react-native-error-boundary": "^3.0.0",
     "@react-native-masked-view/masked-view": "^0.3.2",
     "react": "^19.1.0",
     "react-native": "^0.74.2 | ^0.81.0",
+    "react-native-error-boundary": "^3.0.0",
     "react-native-gesture-handler": "^2.28.0",
     "react-native-reanimated": "^3.19.1",
     "react-native-safe-area-context": "^5.6.1",

package/dist/components/ErrorWrapper/styles.js

@@ -1 +0,0 @@
-"use strict";

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

@@ -1 +0,0 @@
-"use strict";