@ovotech/element-native 5.4.3 → 5.6.0

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

@@ -1,47 +1,39 @@
-import { View } from 'react-native';
-import styled from '../../../styled.native';
-import { Badge } from '../../Badge';
-import { Card } from '../../Card';
-import { Heading3 } from '../../Heading';
-import { P } from '../../P';
-export const CardWithLinkText = styled(Card)(({ theme, isSmall, hasBadge }) => ({
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Heading = exports.CardImage = exports.ImageContent = exports.TextContent = exports.CardWithLinkText = void 0;
+const react_native_1 = require("react-native");
+const styled_native_1 = __importDefault(require("../../../styled.native"));
+const Card_1 = require("../../Card");
+const Heading_1 = require("../../Heading");
+exports.CardWithLinkText = (0, styled_native_1.default)(Card_1.Card)(({ theme, isSmall, hasBadge }) => ({
     paddingTop: hasBadge ? theme.space[800] : theme.space[400],
     display: 'flex',
     flexDirection: isSmall ? 'column-reverse' : 'row',
 }));
-export const CardBadge = styled(Badge)(({ theme }) => ({
-    position: 'absolute',
-    top: 4,
-    left: theme.space[500],
-    borderWidth: 0,
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    borderBottomLeftRadius: theme.border.radius.md,
-    borderBottomRightRadius: theme.border.radius.md,
-    paddingBottom: theme.space[50],
-    paddingTop: 0,
-    zIndex: 1,
-}));
-export const TextContent = styled(View)(({ isSmall }) => ({
+exports.TextContent = (0, styled_native_1.default)(react_native_1.View)(({ isSmall, theme }) => ({
     flex: isSmall ? undefined : 1,
-    paddingRight: isSmall ? 0 : 5,
+    paddingRight: isSmall ? 0 : theme.space[100],
+    alignSelf: isSmall ? undefined : 'flex-end',
 }));
-export const ImageContent = styled(View)({
-    width: 80,
-    height: 80,
+exports.ImageContent = (0, styled_native_1.default)(react_native_1.View)(({ theme, isSmall, hasBadge }) => ({
+    width: isSmall ? theme.space[1600] : theme.space[2000],
+    height: isSmall ? theme.space[1600] : theme.space[2000],
     justifyContent: 'center',
     alignItems: 'center',
+    alignSelf: isSmall ? undefined : 'center',
+    marginTop: hasBadge && !isSmall ? -theme.space[400] : 0,
+}));
+exports.CardImage = (0, styled_native_1.default)(react_native_1.Image)({
+    width: '100%',
+    height: '100%',
 });
-export const Title = styled(Heading3)(({ theme, isSmall }) => ({
+exports.Heading = (0, styled_native_1.default)(Heading_1.Heading3)(({ theme, isSmall }) => ({
     color: theme.color.surface.onSurface,
     fontSize: isSmall
         ? theme.font.size.lg.mediaQuery.lg
         : theme.font.size['2xl'].mediaQuery.sm,
-    fontWeight: 700,
-    marginBottom: isSmall ? 0 : '8px',
-}));
-export const Subtitle = styled(P)(({ theme }) => ({
-    color: theme.color.surface.onSurface,
-    fontSize: theme.font.size.md.mediaQuery.lg,
-    fontWeight: 450,
+    marginBottom: isSmall ? 0 : theme.space[200],
 }));

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

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

package/dist/components/Cards/ProgressBarCard/ProgressBar/EPCBar.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View } from 'react-native';
-import { EPCBarMarkerLayer, EPCBarSegment, ProgressBarContainer, ProgressBarWrapper, } from '../ProgressBarCard.styles';
-import { Marker1, Marker2 } from './EPCMarkers';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EPCBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const ProgressBarCard_styles_1 = require("../ProgressBarCard.styles");
+const EPCMarkers_1 = require("./EPCMarkers");
 const EPC_BANDS = [
     { letter: 'G', min: 0, max: 20, color: '#E21D38' },
     { letter: 'F', min: 21, max: 38, color: '#E55B2B' },
@@ -41,8 +44,9 @@ const positionMarker = (score, translate) => {
         transform: [{ translateX: -translate }, { translateY: -translate }],
     };
 };
-export const EPCBar = ({ marker1, marker2 }) => {
+const EPCBar = ({ marker1, marker2 }) => {
     const marker1Style = positionMarker(marker1.value, 4);
     const marker2Style = marker2 ? positionMarker(marker2.value, 5) : null;
-    return (_jsxs(ProgressBarWrapper, { children: [_jsx(ProgressBarContainer, { children: EPC_BANDS.map(band => (_jsx(EPCBarSegment, { style: { flex: 1, backgroundColor: band.color } }, band.letter))) }), _jsxs(EPCBarMarkerLayer, { children: [marker1Style && (_jsx(View, { style: marker1Style, children: _jsx(Marker1, {}) })), marker2 && marker2Style && (_jsx(View, { style: marker2Style, children: _jsx(Marker2, {}) }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(ProgressBarCard_styles_1.ProgressBarWrapper, { children: [(0, jsx_runtime_1.jsx)(ProgressBarCard_styles_1.ProgressBarContainer, { children: EPC_BANDS.map(band => ((0, jsx_runtime_1.jsx)(ProgressBarCard_styles_1.EPCBarSegment, { style: { flex: 1, backgroundColor: band.color } }, band.letter))) }), (0, jsx_runtime_1.jsxs)(ProgressBarCard_styles_1.EPCBarMarkerLayer, { children: [marker1Style && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: marker1Style, children: (0, jsx_runtime_1.jsx)(EPCMarkers_1.Marker1, {}) })), marker2 && marker2Style && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: marker2Style, children: (0, jsx_runtime_1.jsx)(EPCMarkers_1.Marker2, {}) }))] })] }));
 };
+exports.EPCBar = EPCBar;

package/dist/components/Cards/ProgressBarCard/ProgressBar/EPCMarkers.js

@@ -1,11 +1,49 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Svg, { Circle, ClipPath, Defs, G, Path, Rect } from 'react-native-svg';
-import { useTheme } from '../../../../styled.native';
-export const Marker1 = () => {
-    const theme = useTheme();
-    return (_jsx(Svg, { width: theme.space[200], height: theme.space[200], viewBox: "0 0 8 8", fill: "none", children: _jsx(Circle, { cx: "4", cy: "4", r: "4", fill: theme.color.green[80] }) }));
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Marker2 = exports.Marker1 = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const styled_native_1 = require("../../../../styled.native");
+const Marker1 = () => {
+    const theme = (0, styled_native_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, { width: theme.space[200], height: theme.space[200], viewBox: "0 0 8 8", fill: "none", children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Circle, { cx: "4", cy: "4", r: "4", fill: theme.color.green[80] }) }));
 };
-export const Marker2 = () => {
-    const theme = useTheme();
-    return (_jsxs(Svg, { width: theme.space[250], height: theme.space[250], viewBox: "0 0 10 10", fill: "none", children: [_jsx(G, { clipPath: "url(#clip0_23708_1077)", children: _jsx(Path, { d: "M8.92 5.78L9.9 5.97C9.96 5.65 10 5.33 10 5H8C8 5.2 7.98 5.4 7.94 5.59L8.92 5.78ZM7.22 8.33L7.78 9.16C8.32 8.8 8.79 8.33 9.16 7.78L8.33 7.22L7.5 6.66C7.28 6.99 7 7.27 6.67 7.49L7.23 8.32L7.22 8.33ZM5 9V10C5.33 10 5.66 9.97 5.97 9.9L5.78 8.92L5.59 7.94C5.4 7.98 5.21 8 5 8V9ZM4.22 8.92L4.03 9.9C4.35 9.96 4.67 10 5 10V8C4.8 8 4.6 7.98 4.41 7.94L4.22 8.92ZM1.67 7.22L0.84 7.78C1.2 8.32 1.67 8.79 2.22 9.16L2.78 8.33L3.34 7.5C3.01 7.28 2.73 7 2.51 6.67L1.68 7.23L1.67 7.22ZM1 5H0C0 5.33 0.03 5.66 0.1 5.97L1.08 5.78L2.06 5.59C2.02 5.4 2 5.21 2 5H1ZM1.08 4.22L0.1 4.03C0.04 4.35 0 4.67 0 5H2C2 4.8 2.02 4.6 2.06 4.41L1.08 4.22ZM2.78 1.67L2.22 0.84C1.68 1.2 1.21 1.67 0.84 2.22L1.67 2.78L2.5 3.34C2.72 3.01 3 2.73 3.33 2.51L2.77 1.68L2.78 1.67ZM5 1V0C4.67 0 4.34 0.03 4.03 0.1L4.22 1.08L4.41 2.06C4.6 2.02 4.79 2 5 2V1ZM5.78 1.08L5.97 0.1C5.65 0.04 5.33 0 5 0V2C5.2 2 5.4 2.02 5.59 2.06L5.78 1.08ZM8.33 2.78L9.16 2.22C8.8 1.68 8.33 1.21 7.78 0.84L7.22 1.67L6.66 2.5C6.99 2.72 7.27 3 7.49 3.33L8.32 2.77L8.33 2.78ZM9 5H10C10 4.67 9.97 4.34 9.9 4.03L8.92 4.22L7.94 4.41C7.98 4.6 8 4.79 8 5H9Z", fill: theme.color.green[80] }) }), _jsx(Defs, { children: _jsx(ClipPath, { id: "clip0_23708_1077", children: _jsx(Rect, { width: "10", height: "10", fill: "white" }) }) })] }));
+exports.Marker1 = Marker1;
+const Marker2 = () => {
+    const theme = (0, styled_native_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: theme.space[250], height: theme.space[250], viewBox: "0 0 10 10", fill: "none", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.G, { clipPath: "url(#clip0_23708_1077)", children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M8.92 5.78L9.9 5.97C9.96 5.65 10 5.33 10 5H8C8 5.2 7.98 5.4 7.94 5.59L8.92 5.78ZM7.22 8.33L7.78 9.16C8.32 8.8 8.79 8.33 9.16 7.78L8.33 7.22L7.5 6.66C7.28 6.99 7 7.27 6.67 7.49L7.23 8.32L7.22 8.33ZM5 9V10C5.33 10 5.66 9.97 5.97 9.9L5.78 8.92L5.59 7.94C5.4 7.98 5.21 8 5 8V9ZM4.22 8.92L4.03 9.9C4.35 9.96 4.67 10 5 10V8C4.8 8 4.6 7.98 4.41 7.94L4.22 8.92ZM1.67 7.22L0.84 7.78C1.2 8.32 1.67 8.79 2.22 9.16L2.78 8.33L3.34 7.5C3.01 7.28 2.73 7 2.51 6.67L1.68 7.23L1.67 7.22ZM1 5H0C0 5.33 0.03 5.66 0.1 5.97L1.08 5.78L2.06 5.59C2.02 5.4 2 5.21 2 5H1ZM1.08 4.22L0.1 4.03C0.04 4.35 0 4.67 0 5H2C2 4.8 2.02 4.6 2.06 4.41L1.08 4.22ZM2.78 1.67L2.22 0.84C1.68 1.2 1.21 1.67 0.84 2.22L1.67 2.78L2.5 3.34C2.72 3.01 3 2.73 3.33 2.51L2.77 1.68L2.78 1.67ZM5 1V0C4.67 0 4.34 0.03 4.03 0.1L4.22 1.08L4.41 2.06C4.6 2.02 4.79 2 5 2V1ZM5.78 1.08L5.97 0.1C5.65 0.04 5.33 0 5 0V2C5.2 2 5.4 2.02 5.59 2.06L5.78 1.08ZM8.33 2.78L9.16 2.22C8.8 1.68 8.33 1.21 7.78 0.84L7.22 1.67L6.66 2.5C6.99 2.72 7.27 3 7.49 3.33L8.32 2.77L8.33 2.78ZM9 5H10C10 4.67 9.97 4.34 9.9 4.03L8.92 4.22L7.94 4.41C7.98 4.6 8 4.79 8 5H9Z", fill: theme.color.green[80] }) }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Defs, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.ClipPath, { id: "clip0_23708_1077", children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Rect, { width: "10", height: "10", fill: "white" }) }) })] }));
 };
+exports.Marker2 = Marker2;

package/dist/components/Cards/ProgressBarCard/ProgressBar/ValueBar.js

@@ -1,24 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View } from 'react-native';
-import { useTheme } from '../../../../styled.native';
-import { ProgressBarContainer, ProgressBarWrapper, ValueBarRemainder, } from '../ProgressBarCard.styles';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValueBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const styled_native_1 = require("../../../../styled.native");
+const ProgressBarCard_styles_1 = require("../ProgressBarCard.styles");
 const clampToNonNegative = (n) => Math.max(0, n);
-export const ValueBar = ({ value1, value2 }) => {
-    const theme = useTheme();
+const ValueBar = ({ value1, value2 }) => {
+    const theme = (0, styled_native_1.useTheme)();
     const hasSecond = !!value2;
-    const value1Flex = clampToNonNegative(value1 ?? 0);
+    const value1Flex = clampToNonNegative(value1 !== null && value1 !== void 0 ? value1 : 0);
     const value2Flex = hasSecond ? clampToNonNegative(value2) : 0;
     if (hasSecond && value1Flex + value2Flex > 0) {
-        return (_jsx(ProgressBarWrapper, { children: _jsxs(ProgressBarContainer, { children: [_jsx(View, { style: {
+        return ((0, jsx_runtime_1.jsx)(ProgressBarCard_styles_1.ProgressBarWrapper, { children: (0, jsx_runtime_1.jsxs)(ProgressBarCard_styles_1.ProgressBarContainer, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                             flex: value1Flex,
                             backgroundColor: theme.color.brand.brand,
-                        } }), _jsx(View, { style: {
+                        } }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                             flex: value2Flex,
                             backgroundColor: theme.color.surface.onSurface,
                         } })] }) }));
     }
-    return (_jsx(ProgressBarWrapper, { children: _jsxs(ProgressBarContainer, { children: [_jsx(View, { style: {
+    return ((0, jsx_runtime_1.jsx)(ProgressBarCard_styles_1.ProgressBarWrapper, { children: (0, jsx_runtime_1.jsxs)(ProgressBarCard_styles_1.ProgressBarContainer, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                         flex: value1Flex,
                         backgroundColor: theme.color.brand.brand,
-                    } }), _jsx(ValueBarRemainder, { style: { flex: 100 - value1Flex } })] }) }));
+                    } }), (0, jsx_runtime_1.jsx)(ProgressBarCard_styles_1.ValueBarRemainder, { style: { flex: 100 - value1Flex } })] }) }));
 };
+exports.ValueBar = ValueBar;

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

@@ -12,7 +12,7 @@ type Value = {
 };
 type Props = {
     heading: string;
-    subheading?: string;
+    subHeading?: string;
     progressBar: ProgressBar;
     value: Value;
     value2?: Value;

package/dist/components/Cards/ProgressBarCard/ProgressBarCard.js

@@ -1,20 +1,26 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { View } from 'react-native';
-import { Heading2, Heading4, P, Strong } from '../..';
-import { useTheme } from '../../../styled.native';
-import { resolveColor } from '../shared';
-import { EPCBar } from './ProgressBar/EPCBar';
-import { Marker1, Marker2 } from './ProgressBar/EPCMarkers';
-import { ValueBar } from './ProgressBar/ValueBar';
-import { CardWithProgressBar, HeadingContainer, StyledP, ValueBlockWrapper, ValuesContainer, ValueTextContainer, ValueWrapper, } from './ProgressBarCard.styles';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressBarCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const __1 = require("../..");
+const shared_styles_1 = require("../shared.styles");
+const utils_1 = require("../utils");
+const EPCBar_1 = require("./ProgressBar/EPCBar");
+const EPCMarkers_1 = require("./ProgressBar/EPCMarkers");
+const ValueBar_1 = require("./ProgressBar/ValueBar");
+const ProgressBarCard_styles_1 = require("./ProgressBarCard.styles");
 const ValueText1 = ({ text }) => {
     if (!text)
         return null;
     if (typeof text === 'string') {
-        return _jsx(Heading2, { children: text });
+        return (0, jsx_runtime_1.jsx)(__1.Heading2, { children: text });
     }
-    return (_jsx(_Fragment, { children: text.map((segment, index) => (_jsx(Heading2, { style: { color: resolveColor(segment.color) }, children: segment.text }, `${index}-${segment.text}`))) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: text.map((segment, index) => ((0, jsx_runtime_1.jsx)(__1.Heading2, { style: { color: (0, utils_1.resolveColor)(segment.color) }, children: segment.text }, `${index}-${segment.text}`))) }));
 };
 const ValueText2 = ({ text2, hasEPCBar }) => {
     if (!text2)
@@ -22,23 +28,17 @@ const ValueText2 = ({ text2, hasEPCBar }) => {
     const { text, color } = typeof text2 === 'string'
         ? { text: text2, color: 'default' }
         : { text: text2.text, color: text2.color };
-    const resolvedColor = resolveColor(color);
-    return (_jsx(ValueTextContainer, { children: _jsxs(Heading4, { style: { color: resolvedColor }, children: ["(", text, hasEPCBar && ' points', ")"] }) }));
+    const resolvedColor = (0, utils_1.resolveColor)(color);
+    return ((0, jsx_runtime_1.jsx)(ProgressBarCard_styles_1.ValueTextContainer, { children: (0, jsx_runtime_1.jsxs)(__1.Heading4, { style: { color: resolvedColor }, children: ["(", text, hasEPCBar && ' points', ")"] }) }));
 };
 const ValueBlockComponent = ({ value, value2, size, hasEPCBar, markerType, }) => {
     const showMarker = value.subtext && hasEPCBar;
-    const isSmall = size === 'small';
-    const theme = useTheme();
-    return (_jsxs(ValueWrapper, { isSmall: isSmall, hasValue2: !!value2, children: [_jsxs(ValuesContainer, { children: [_jsx(ValueText1, { text: value.text }), _jsx(ValueText2, { text2: value.text2, hasEPCBar: hasEPCBar })] }), _jsxs(View, { style: {
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: theme.space[150],
-                }, children: [showMarker && markerType === 'marker1' && _jsx(Marker1, {}), showMarker && markerType === 'marker2' && _jsx(Marker2, {}), value.subtext && _jsx(P, { children: value.subtext })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(ProgressBarCard_styles_1.ValueWrapper, { isSmall: (0, utils_1.checkIsSmall)(size), hasValue2: !!value2, children: [(0, jsx_runtime_1.jsxs)(shared_styles_1.WrappedContainer, { children: [(0, jsx_runtime_1.jsx)(ValueText1, { text: value.text }), (0, jsx_runtime_1.jsx)(ValueText2, { text2: value.text2, hasEPCBar: hasEPCBar })] }), (0, jsx_runtime_1.jsxs)(ProgressBarCard_styles_1.MarkerContainer, { children: [showMarker && markerType === 'marker1' && (0, jsx_runtime_1.jsx)(EPCMarkers_1.Marker1, {}), showMarker && markerType === 'marker2' && (0, jsx_runtime_1.jsx)(EPCMarkers_1.Marker2, {}), value.subtext && (0, jsx_runtime_1.jsx)(__1.P, { children: value.subtext })] })] }));
 };
-const ValueBlock = React.memo(ValueBlockComponent);
-export const ProgressBarCard = ({ heading, subheading, progressBar, value, value2, size, }) => {
-    const isSmall = size === 'small';
+const ValueBlock = react_1.default.memo(ValueBlockComponent);
+const ProgressBarCard = ({ heading, subHeading, progressBar, value, value2, size, }) => {
     const isEpc = progressBar.variant === 'epc';
     const isValueBar = progressBar.variant === 'value';
-    return (_jsxs(CardWithProgressBar, { isSmall: isSmall, children: [_jsxs(HeadingContainer, { children: [_jsx(StyledP, { children: _jsx(Strong, { children: heading }) }), _jsx(P, { size: "sm", children: subheading })] }), _jsxs(View, { children: [isEpc && (_jsx(EPCBar, { marker1: { value: progressBar.data }, marker2: progressBar.data2 ? { value: progressBar.data2 } : undefined })), isValueBar && (_jsx(ValueBar, { value1: progressBar.data, value2: progressBar.data2 })), _jsxs(ValueBlockWrapper, { children: [_jsx(ValueBlock, { value: value, value2: value2, hasEPCBar: isEpc, markerType: "marker1", size: size }), value2 && !isSmall && (_jsx(ValueBlock, { value: value2, hasEPCBar: isEpc, markerType: "marker2" }))] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(ProgressBarCard_styles_1.CardWithProgressBar, { isSmall: (0, utils_1.checkIsSmall)(size), children: [(0, jsx_runtime_1.jsxs)(shared_styles_1.HeadingContainer, { children: [(0, jsx_runtime_1.jsx)(__1.P, { children: (0, jsx_runtime_1.jsx)(__1.Strong, { children: heading }) }), (0, jsx_runtime_1.jsx)(__1.P, { size: "sm", children: subHeading })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [isEpc && ((0, jsx_runtime_1.jsx)(EPCBar_1.EPCBar, { marker1: { value: progressBar.data }, marker2: progressBar.data2 ? { value: progressBar.data2 } : undefined })), isValueBar && ((0, jsx_runtime_1.jsx)(ValueBar_1.ValueBar, { value1: progressBar.data, value2: progressBar.data2 })), (0, jsx_runtime_1.jsxs)(shared_styles_1.ContainerWithGap, { children: [(0, jsx_runtime_1.jsx)(ValueBlock, { value: value, value2: value2, hasEPCBar: isEpc, markerType: "marker1", size: size }), value2 && !(0, utils_1.checkIsSmall)(size) && ((0, jsx_runtime_1.jsx)(ValueBlock, { value: value2, hasEPCBar: isEpc, markerType: "marker2" }))] })] })] }));
 };
+exports.ProgressBarCard = ProgressBarCard;