@ovotech/element-native 5.4.3 → 5.5.0

package/dist/components/Cards/IconDataCard/IconDataCard.styles.js

@@ -1,35 +1,26 @@
-import { View } from 'react-native';
-import styled from '../../../styled.native';
-import { Card } from '../../Card';
-import { Heading2, Heading4 } from '../../Heading';
-import { P } from '../../P';
-import { SmallCardHeight } from '../shared';
-export const CardWithIconData = styled(Card)(({ isSmall }) => ({
-    minHeight: isSmall ? SmallCardHeight : undefined,
-}));
-export const HeadingContainer = styled(View)(({ theme }) => ({
-    marginBottom: theme.space[350],
-}));
-export const ValuesWrapper = styled(View)(({ theme }) => ({
-    flexDirection: 'row',
-    gap: theme.space[300],
-}));
-export const ValueContainer = styled(View)(({ isSmall, theme }) => ({
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconContainer = exports.SubMetricsContainer = exports.Metric = exports.ValueContainer = void 0;
+const react_native_1 = require("react-native");
+const styled_native_1 = __importDefault(require("../../../styled.native"));
+const Heading_1 = require("../../Heading");
+exports.ValueContainer = (0, styled_native_1.default)(react_native_1.View)(({ isSmall, theme }) => ({
     width: isSmall ? undefined : '50%',
     gap: theme.space[100],
 }));
-export const MetricsContainer = styled(View)(({ theme }) => ({
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: theme.space[100],
+exports.Metric = (0, styled_native_1.default)(Heading_1.Heading2)(({ theme }) => ({
+    color: theme.color.surface.onSurface,
 }));
-export const SubMetricsContainer = styled(View)(({ theme }) => ({
+exports.SubMetricsContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
     flexDirection: 'row',
     alignItems: 'flex-end',
     marginBottom: theme.space[25],
     gap: theme.space[100],
 }));
-export const IconContainer = styled(View)(({ theme }) => ({
+exports.IconContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
     borderRadius: theme.border.radius['2xl'],
     backgroundColor: theme.color.surface.surface,
     paddingVertical: theme.space[200],
@@ -39,12 +30,3 @@ export const IconContainer = styled(View)(({ theme }) => ({
     flexShrink: 0,
     justifyContent: 'center',
 }));
-export const Metric = styled(Heading2)(({ theme }) => ({
-    color: theme.color.surface.onSurface,
-}));
-export const SubMetric = styled(Heading4)(({ theme }) => ({
-    lineHeight: theme.font.lineHeight['3xl'].mediaQuery.sm,
-}));
-export const StyledP = styled(P)(({ theme }) => ({
-    lineHeight: theme.font.lineHeight.md.mediaQuery.sm,
-}));

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

@@ -1 +1,17 @@
-export * from './IconDataCard';
+"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 });
+__exportStar(require("./IconDataCard"), exports);

package/dist/components/Cards/IconTextCard/IconTextCard.d.ts

@@ -3,8 +3,8 @@ import { IconNameExtended } from '../../../providers';
 import { TitleSegment } from '../types';
 type Props = {
     icon: IconNameExtended;
-    title?: string | TitleSegment[];
-    subTitle?: string;
+    heading: string | TitleSegment[];
+    subHeading?: string;
     size?: 'default' | 'small';
 };
 export declare const IconTextCard: React.FC<Props>;

package/dist/components/Cards/IconTextCard/IconTextCard.js

@@ -1,25 +1,27 @@
-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 { Icon } from '../../Icon';
-import { resolveColor } from '../shared';
-import { CardWithIconText, Subtitle, TextContainer, TitleContainer, } from './IconTextCard.styles';
-export const IconTextCard = ({ icon, title, subTitle, size = 'default', }) => {
-    const isSmall = size === 'small';
-    const theme = useTheme();
-    const titleLineHeight = theme.font.lineHeight[isSmall ? 'lg' : '3xl'].mediaQuery.sm;
-    const renderTitle = () => {
-        if (!title)
-            return null;
-        const HeadingComponent = isSmall ? Heading4 : Heading2;
-        if (typeof title === 'string') {
-            return (_jsx(HeadingComponent, { style: { lineHeight: titleLineHeight }, children: title }));
-        }
-        return (_jsx(_Fragment, { children: title.map(segment => (_jsx(HeadingComponent, { style: {
-                    color: resolveColor(segment.color),
-                    lineHeight: titleLineHeight,
-                    marginRight: isSmall ? 3 : 4,
-                }, children: segment.text }, segment.text))) }));
-    };
-    return (_jsxs(CardWithIconText, { isSmall: isSmall, children: [_jsx(Icon, { name: icon, size: 24 }), _jsxs(TextContainer, { isSmall: isSmall, children: [_jsx(TitleContainer, { children: renderTitle() }), !isSmall && subTitle && _jsx(Subtitle, { children: subTitle })] })] }));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconTextCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_native_1 = require("../../../styled.native");
+const Heading_1 = require("../../Heading");
+const Icon_1 = require("../../Icon");
+const P_1 = require("../../P");
+const utils_1 = require("../utils");
+const IconTextCard_styles_1 = require("./IconTextCard.styles");
+const ResponsiveHeading = ({ heading, size = 'default' }) => {
+    const theme = (0, styled_native_1.useTheme)();
+    const HeadingComponent = (0, utils_1.checkIsSmall)(size) ? Heading_1.Heading4 : Heading_1.Heading2;
+    const lineHeight = theme.font.lineHeight[(0, utils_1.checkIsSmall)(size) ? 'lg' : '3xl'].mediaQuery.sm;
+    if (typeof heading === 'string') {
+        return ((0, jsx_runtime_1.jsx)(HeadingComponent, { style: { lineHeight }, children: heading }));
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: heading.map(segment => ((0, jsx_runtime_1.jsx)(HeadingComponent, { style: {
+                color: (0, utils_1.resolveColor)(segment.color),
+                lineHeight,
+                marginRight: theme.space[100],
+            }, children: segment.text }, segment.text))) }));
 };
+const IconTextCard = ({ icon, heading, subHeading, size = 'default', }) => {
+    return ((0, jsx_runtime_1.jsxs)(IconTextCard_styles_1.CardWithIconText, { isSmall: (0, utils_1.checkIsSmall)(size), children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: 24 }), (0, jsx_runtime_1.jsxs)(IconTextCard_styles_1.TextContainer, { isSmall: (0, utils_1.checkIsSmall)(size), children: [(0, jsx_runtime_1.jsx)(IconTextCard_styles_1.TitleContainer, { children: (0, jsx_runtime_1.jsx)(ResponsiveHeading, { heading: heading, size: size }) }), !(0, utils_1.checkIsSmall)(size) && subHeading && ((0, jsx_runtime_1.jsx)(IconTextCard_styles_1.SubHeading, { children: (0, jsx_runtime_1.jsx)(P_1.P, { children: subHeading }) }))] })] }));
+};
+exports.IconTextCard = IconTextCard;

package/dist/components/Cards/IconTextCard/IconTextCard.styles.d.ts

@@ -1728,11 +1728,7 @@ export declare const TitleContainer: import("styled-components").StyledComponent
         };
     };
 }, {}, never>;
-export declare const Subtitle: import("styled-components").StyledComponent<(props: import("react-native").TextProps & {
-    inverted?: boolean;
-    ref?: React.Ref<import("react-native").Text>;
-    size?: "xl" | "lg" | "sm" | "md";
-}) => import("react/jsx-runtime").JSX.Element, {
+export declare const SubHeading: import("styled-components").StyledComponent<typeof View, {
     color: {
         neutral: {
             "20": string;

package/dist/components/Cards/IconTextCard/IconTextCard.styles.js

@@ -1,25 +1,24 @@
-import { View } from 'react-native';
-import styled from '../../../styled.native';
-import { Card } from '../../Card/Card';
-import { P } from '../../P';
-import { SmallCardHeight } from '../shared';
-export const CardWithIconText = styled(Card)(({ isSmall, theme }) => ({
-    minHeight: isSmall ? SmallCardHeight : undefined,
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubHeading = exports.TitleContainer = exports.TextContainer = exports.CardWithIconText = void 0;
+const react_native_1 = require("react-native");
+const styled_native_1 = __importDefault(require("../../../styled.native"));
+const shared_styles_1 = require("../shared.styles");
+exports.CardWithIconText = (0, styled_native_1.default)(shared_styles_1.CardWithMinHeight)(({ theme }) => ({
     gap: theme.space[600],
 }));
-export const TextContainer = styled(View)(({ isSmall }) => ({
+exports.TextContainer = (0, styled_native_1.default)(react_native_1.View)(({ isSmall }) => ({
     flex: isSmall ? 1 : undefined,
     justifyContent: 'flex-end',
 }));
-export const TitleContainer = styled(View)(({ theme }) => ({
+exports.TitleContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
     marginRight: theme.space[50],
     flexDirection: 'row',
     flexWrap: 'wrap',
 }));
-export const Subtitle = styled(P)(({ theme }) => ({
-    color: theme.color.surface.onSurface,
-    fontSize: theme.font.size.md.mediaQuery.lg,
-    lineHeight: theme.font.lineHeight.md.mediaQuery.lg,
-    fontWeight: 450,
-    marginTop: '8px',
+exports.SubHeading = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
+    marginTop: theme.space[200],
 }));

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

@@ -1 +1,17 @@
-export * from './IconTextCard';
+"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 });
+__exportStar(require("./IconTextCard"), exports);

package/dist/components/Cards/LinkTextCard/LinkTextCard.d.ts

@@ -3,8 +3,8 @@ import { ImageSourcePropType } from 'react-native';
 type Props = {
     image?: ImageSourcePropType;
     badge?: string;
-    title: string;
-    subtitle?: string;
+    heading: string;
+    subHeading?: string;
     size?: 'default' | 'small';
     onPress?: () => void;
 };

package/dist/components/Cards/LinkTextCard/LinkTextCard.js

@@ -1,17 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Image, View } from 'react-native';
-import { Strong } from '../..';
-import { CardBadge, CardWithLinkText, ImageContent, Subtitle, TextContent, Title, } from './LinkTextCard.styles';
-export const LinkTextCard = ({ image, badge, title, subtitle, size, onPress, }) => {
-    const isSmall = size === 'small';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkTextCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const __1 = require("../..");
+const shared_styles_1 = require("../shared.styles");
+const utils_1 = require("../utils");
+const LinkTextCard_styles_1 = require("./LinkTextCard.styles");
+const LinkTextCard = ({ image, badge, heading, subHeading, size, onPress, }) => {
     const hasBadge = !!badge;
-    const CardContent = (_jsxs(CardWithLinkText, { isSmall: isSmall, hasBadge: hasBadge, onPress: onPress, children: [_jsxs(TextContent, { isSmall: isSmall, children: [_jsx(View, { children: _jsx(Title, { isSmall: isSmall, children: _jsx(Strong, { children: title }) }) }), !isSmall && (_jsx(View, { children: _jsx(Subtitle, { children: subtitle }) }))] }), _jsx(ImageContent, { children: _jsx(Image, { source: image
+    const CardContent = ((0, jsx_runtime_1.jsxs)(LinkTextCard_styles_1.CardWithLinkText, { isSmall: (0, utils_1.checkIsSmall)(size), hasBadge: hasBadge, onPress: onPress, children: [(0, jsx_runtime_1.jsxs)(LinkTextCard_styles_1.TextContent, { isSmall: (0, utils_1.checkIsSmall)(size), children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsx)(LinkTextCard_styles_1.Heading, { isSmall: (0, utils_1.checkIsSmall)(size), children: (0, jsx_runtime_1.jsx)(__1.Strong, { children: heading }) }) }), !(0, utils_1.checkIsSmall)(size) && ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsx)(__1.P, { children: subHeading }) }))] }), (0, jsx_runtime_1.jsx)(LinkTextCard_styles_1.ImageContent, { children: (0, jsx_runtime_1.jsx)(LinkTextCard_styles_1.CardImage, { source: image
                         ? image
                         : {
                             uri: 'https://www.ovobyus.com/transform/eed55bf8-f059-4acb-a043-2d0a6d12537f/homepage-supporting-house-image',
-                        }, resizeMode: "contain", style: { width: '100%', height: '100%' } }) })] }));
+                        }, resizeMode: "contain" }) })] }));
     if (!hasBadge) {
         return CardContent;
     }
-    return (_jsxs(View, { style: { position: 'relative' }, children: [_jsx(CardBadge, { variant: "success", children: badge }), CardContent] }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(shared_styles_1.CardBadge, { variant: "success", children: badge }), CardContent] }));
 };
+exports.LinkTextCard = LinkTextCard;