@ovotech/element-native 5.6.0 → 5.7.0

package/dist/components/Notification/Notification.styles.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TitleContainer = exports.ContentContainer = exports.VariantIconContainer = exports.VariantIconBackground = exports.StyledIcon = exports.DismissButton = exports.NotificationContentBox = exports.NotificationBox = exports.NotificationShadow = void 0;
+exports.TitleContainer = exports.ContentContainer = exports.VariantIconContainer = exports.VariantIconBackground = exports.StyledIcon = exports.DismissButton = exports.TappableNotification = exports.NotificationContentBox = exports.NotificationBox = exports.NotificationShadow = void 0;
 const element_core_1 = require("@ovotech/element-core");
 const react_native_1 = require("react-native");
 const styled_native_1 = __importStar(require("../../styled.native"));
@@ -43,7 +43,7 @@ exports.NotificationShadow = (0, styled_native_1.default)(react_native_1.View)((
     return (0, styled_native_1.css) `
     shadow-color: ${theme.color.brand.dark};
     shadow-offset: 0 ${(0, element_core_1.numToPx)(theme.space[100])};
-    shadow-opacity: ${theme.opacity.transparent};
+    shadow-opacity: 0.1;
     shadow-radius: ${(0, element_core_1.numToPx)(theme.space[100])};
     elevation: 6;
   `;
@@ -63,6 +63,25 @@ exports.NotificationContentBox = styled_native_1.default.View(({ theme }) => {
     padding-right: ${(0, element_core_1.numToPx)(theme.space[300])};
   `;
 });
+exports.TappableNotification = styled_native_1.default.TouchableOpacity(({ dismissible, hasChildren, theme }) => {
+    return (0, styled_native_1.css) `
+    position: absolute;
+    left: 0;
+    height: ${hasChildren ? (0, element_core_1.numToPx)(theme.space[1200]) : '80%'};
+    width: ${dismissible ? '86%' : '100%'};
+    z-index: 1;
+    border-top-left-radius: ${(0, element_core_1.numToPx)(theme.border.radius.md)};
+    border-top-right-radius: ${dismissible
+        ? 0
+        : (0, element_core_1.numToPx)(theme.border.radius.md)};
+    border-bottom-right-radius: ${dismissible
+        ? (0, element_core_1.numToPx)(theme.border.radius.md)
+        : 0};
+    border-bottom-left-radius: ${hasChildren
+        ? 0
+        : (0, element_core_1.numToPx)(theme.border.radius.md)};
+  `;
+});
 exports.DismissButton = styled_native_1.default.TouchableOpacity(({ theme }) => {
     return (0, styled_native_1.css) `
     display: flex;

package/dist/components/PasswordInput/PasswordInput.styled.d.ts

@@ -1,578 +1 @@
-export declare const StyledPressable: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>>, {
-    color: {
-        neutral: {
-            "20": string;
-            "30": string;
-            "40": string;
-            "50": string;
-            "60": string;
-            "70": string;
-            "80": string;
-            white: string;
-            black: string;
-        };
-        red: {
-            "20": string;
-            "30": string;
-            "40": string;
-            "50": string;
-            "60": string;
-            "70": string;
-            "80": string;
-        };
-        orange: {
-            "20": string;
-            "30": string;
-            "40": string;
-            "50": string;
-            "60": string;
-            "70": string;
-        };
-        yellow: {
-            "70": string;
-            "80": string;
-        };
-        green: {
-            "20": string;
-            "30": string;
-            "40": string;
-            "50": string;
-            "55": string;
-            "56": string;
-            "60": string;
-            "70": string;
-            "80": string;
-            "90": string;
-        };
-        blue: {
-            "20": string;
-            "30": string;
-            "40": string;
-            "50": string;
-            "60": string;
-            "70": string;
-        };
-        alert: {
-            success: string;
-            successTint: string;
-            warning: string;
-            warningTint: string;
-            error: string;
-            errorTint: string;
-            info: string;
-            infoTint: string;
-            neutral: string;
-            neutralTint: string;
-            border: string;
-        };
-        input: {
-            borderDim: string;
-        };
-        brand: {
-            brand: string;
-            dark: string;
-            dim: string;
-            bold: string;
-            bright: string;
-            gradientFrom: string;
-            gradientTo: string;
-            onBrand: string;
-            onBrandVariant: string;
-            aiGradientFrom: string;
-            aiGradientTo: string;
-            accessible: string;
-            fixed: {
-                brand: string;
-                dark: string;
-                dim: string;
-                bold: string;
-                bright: string;
-                onBrand: string;
-                onBrandVariant: string;
-                accessible: string;
-            };
-        };
-        outline: {
-            outer: string;
-            inner: string;
-        };
-        surface: {
-            surface: string;
-            bright: string;
-            dim: string;
-            onSurface: string;
-            onSurfaceVariant: string;
-            border: string;
-            borderDim: string;
-            link: string;
-            electricity: string;
-            gas: string;
-            fadeFrom: string;
-            fadeTo: string;
-            fixed: {
-                onSurface: string;
-                bright: string;
-            };
-        };
-    };
-    transition: {
-        duration: {
-            fast: number;
-            medium: number;
-            slow: number;
-        };
-    };
-    unit: {
-        "0": number;
-        "25": number;
-        "50": number;
-        "100": number;
-        "200": number;
-        "300": number;
-        "350": number;
-        "400": number;
-        "450": number;
-        "500": number;
-        "550": number;
-        "600": number;
-        "700": number;
-        "800": number;
-        "900": number;
-        "1000": number;
-        "1100": number;
-        "1200": number;
-        "1300": number;
-        "1400": number;
-        "1500": number;
-        "1600": number;
-        "1800": number;
-        "2000": number;
-        "2400": number;
-        "3000": number;
-        "3500": number;
-    };
-    border: {
-        radius: {
-            xs: number;
-            sm: number;
-            md: number;
-            lg: number;
-            xl: number;
-            "2xl": number;
-            "3xl": number;
-        };
-        width: {
-            sm: number;
-            md: number;
-            lg: number;
-        };
-    };
-    breakpoint: {
-        xsmall: number;
-        small: number;
-        medium: number;
-        large: number;
-    };
-    native: {
-        font: {
-            family: {
-                black: string;
-                book: string;
-                bold: string;
-            };
-        };
-    };
-    web: {
-        font: {
-            family: string;
-        };
-    };
-    font: {
-        letterSpacing: {
-            d1: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d2: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d3: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d4: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "4xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "3xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "2xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            xl: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            lg: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            md: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            sm: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            xs: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-        };
-        lineHeight: {
-            d1: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d2: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d3: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d4: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "4xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "3xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "2xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            xl: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            lg: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            md: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            sm: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            xs: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-        };
-        paragraphSpace: {
-            d1: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d2: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d3: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d4: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "4xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "3xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "2xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            xl: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            lg: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            md: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            sm: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            xs: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-        };
-        size: {
-            d1: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d2: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d3: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d4: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "4xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "3xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "2xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            xl: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            lg: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            md: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            sm: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            xs: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-        };
-        weight: {
-            book: number;
-            bold: number;
-            black: number;
-        };
-    };
-    mediaQuery: {
-        xsmall: number;
-        small: number;
-        medium: number;
-        large: number;
-    };
-    customMediaQuery: {
-        "xsmall-and-up": number;
-        "small-and-up": number;
-        "medium-and-up": number;
-        "large-and-up": number;
-    };
-    opacity: {
-        solid: number;
-        translucent: number;
-        transparent: number;
-    };
-    space: {
-        "0": number;
-        "25": number;
-        "50": number;
-        "100": number;
-        "150": number;
-        "200": number;
-        "250": number;
-        "300": number;
-        "350": number;
-        "400": number;
-        "450": number;
-        "500": number;
-        "550": number;
-        "600": number;
-        "700": number;
-        "800": number;
-        "900": number;
-        "1000": number;
-        "1100": number;
-        "1200": number;
-        "1300": number;
-        "1400": number;
-        "1500": number;
-        "1600": number;
-        "1800": number;
-        "2000": number;
-        "2400": number;
-        "3000": number;
-        "3500": number;
-        base: number;
-    };
-    button: {
-        color: {
-            focus: {
-                blue: string;
-                white: string;
-            };
-        };
-        surface: {
-            color: {
-                fg: string;
-                bg: string;
-                bgVariant: string;
-                bgHover: string;
-                fgInverted: string;
-                bgInverted: string;
-                bgInvertedHover: string;
-            };
-        };
-        destructive: {
-            color: {
-                fg: string;
-                bg: string;
-                bgHover: string;
-            };
-        };
-    };
-    input: {
-        color: {
-            label: string;
-            border: string;
-            borderError: string;
-            hint: string;
-            selected: string;
-            selectedTint: string;
-        };
-    };
-}, {}, never>;
+export declare const StyledPressable: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>>, import("@ovotech/element-core").ThemeNative, {}, never>;

package/dist/components/Radio/Radio.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { TouchableOpacityProps, View } from 'react-native';
-type Props = Omit<TouchableOpacityProps, 'children'> & {
+type RadioProps = Omit<TouchableOpacityProps, 'children'> & {
     label: ReactNode;
     value: string;
     hint?: ReactNode;
@@ -10,5 +10,5 @@ type Props = Omit<TouchableOpacityProps, 'children'> & {
     activeOpacity?: number;
     ref?: React.Ref<View>;
 };
-declare const Radio: ({ label, hint, checked, invalid, value, activeOpacity, testID, ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Radio: ({ label, hint, checked, invalid, value, activeOpacity, testID, ref, ...rest }: RadioProps) => import("react/jsx-runtime").JSX.Element;
 export { Radio };

package/dist/components/Radio/Radio.js

@@ -10,62 +10,24 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const element_core_1 = require("@ovotech/element-core");
 const react_native_1 = require("react-native");
-const styled_native_1 = __importDefault(require("../../styled.native"));
+const styled_native_1 = require("../../styled.native");
 const HintText_1 = require("../HintText");
 const LabelText_1 = require("../LabelText");
-const StyledRadioInputWrapper = styled_native_1.default.View(({ theme }) => {
-    return `
-      width: ${(0, element_core_1.numToPx)(theme.space[600])};
-      height: ${(0, element_core_1.numToPx)(theme.space[600])};
-      margin-right: 10px;
-    `;
-});
-const StyledRadioInput = styled_native_1.default.View(({ theme, invalid, checked }) => {
-    return `
-      width: ${(0, element_core_1.numToPx)(theme.space[600])};
-      height: ${(0, element_core_1.numToPx)(theme.space[600])};
-      border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid;
-      align-items: center;
-      justify-content: center;
-      border-radius: ${(0, element_core_1.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_native_1.default.View(({ theme, checked }) => {
-    return `
-      width: ${(0, element_core_1.numToPx)(theme.space[300])};
-      height: ${(0, element_core_1.numToPx)(theme.space[300])};
-      border-radius: ${(0, element_core_1.numToPx)(theme.space[300])};
-      background: ${theme.input.color.selected};
-      opacity: ${checked ? 1 : 0};
-    `;
-});
+const Radio_styles_1 = require("./Radio.styles");
 const Input = (_a) => {
     var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
-    return ((0, jsx_runtime_1.jsx)(StyledRadioInputWrapper, Object.assign({}, rest, { children: (0, jsx_runtime_1.jsx)(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(StyledRadioInputDot, { checked: checked }) }) })));
+    return ((0, jsx_runtime_1.jsx)(Radio_styles_1.StyledRadioInputWrapper, Object.assign({}, rest, { children: (0, jsx_runtime_1.jsx)(Radio_styles_1.StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(Radio_styles_1.StyledRadioInputDot, { checked: checked }) }) })));
 };
-const StyledWrapper = styled_native_1.default.View(({ theme }) => `
-    padding-top: ${(0, element_core_1.numToPx)(theme.space[300])};
-    flex-direction: row;
-  `);
 const Radio = (_a) => {
     var { label, hint, checked, invalid, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     value, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
     activeOpacity = 0.8, testID, ref } = _a, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "activeOpacity", "testID", "ref"]);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, { children: [(0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })] }) })));
+    const theme = (0, styled_native_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(Radio_styles_1.StyledWrapper, { children: [(0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { style: { fontFamily: theme.native.font.family.book }, children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })] }) })));
 };
 exports.Radio = Radio;