jfs-components 0.0.73 → 0.0.74

package/lib/module/components/LottieIntroBlock/LottieIntroBlock.js

@@ -0,0 +1,144 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import Button from '../Button/Button';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_MEDIA_SIZE = 117;
+/**
+ * LottieIntroBlock displays a centered onboarding/intro block composed of a
+ * media slot (typically a Lottie animation or illustration) above a title,
+ * an optional supportive paragraph, and an optional action button.
+ *
+ * All visual values are resolved from Figma design tokens via
+ * `getVariableByName`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LottieIntroBlock
+ *   title="Let's get to know how your financial health is doing"
+ *   supportText="From assets to taxes, stay on top of everything in one simple view."
+ *   buttonLabel="Get started"
+ *   onButtonPress={() => navigate('NextScreen')}
+ *   media={<MyLottiePlayer source={animationSource} />}
+ * />
+ * ```
+ */
+function LottieIntroBlock({
+  title = "Let's get to know how your financial health is doing",
+  showSupportText = true,
+  supportText = 'From assets to taxes, stay on top of everything in one simple view.',
+  showButton = true,
+  buttonLabel = 'Button',
+  onButtonPress,
+  media,
+  buttonSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+
+  // Container
+  const gap = Number(getVariableByName('lottieIntroBlock/gap', modes)) || 36;
+  const paddingHorizontal = Number(getVariableByName('lottieIntroBlock/padding/horizontal', modes)) || 0;
+  const paddingVertical = Number(getVariableByName('lottieIntroBlock/padding/vertical', modes)) || 16;
+
+  // Text wrap
+  const textWrapGap = Number(getVariableByName('lottieIntroBlock/textWrap/gap', modes)) || 16;
+
+  // Title
+  const titleColor = getVariableByName('lottieIntroBlock/title/foreground', modes) || '#0d0d0f';
+  const titleFontSize = Number(getVariableByName('lottieIntroBlock/title/fontSize', modes)) || 23;
+  const titleFontFamily = getVariableByName('lottieIntroBlock/title/fontFamily', modes) || 'System';
+  const titleLineHeight = Number(getVariableByName('lottieIntroBlock/title/lineHeight', modes)) || 23;
+  const titleFontWeight = getVariableByName('lottieIntroBlock/title/fontWeight', modes) || 900;
+
+  // Support text
+  const supportColor = getVariableByName('lottieIntroBlock/supportText/foreground', modes) || '#0d0d0f';
+  const supportFontSize = Number(getVariableByName('lottieIntroBlock/supportText/fontSize', modes)) || 14;
+  const supportFontFamily = getVariableByName('lottieIntroBlock/supportText/fontFamily', modes) || 'System';
+  const supportLineHeight = Number(getVariableByName('lottieIntroBlock/supportText/lineHeight', modes)) || 18;
+  const supportFontWeight = getVariableByName('lottieIntroBlock/supportText/fontWeight', modes) || 400;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingHorizontal,
+    paddingVertical,
+    gap
+  };
+  const textWrapStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: textWrapGap,
+    width: '100%'
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    fontFamily: titleFontFamily,
+    lineHeight: titleLineHeight,
+    fontWeight: String(titleFontWeight),
+    textAlign: 'center'
+  };
+  const supportTextStyle = {
+    color: supportColor,
+    fontSize: supportFontSize,
+    fontFamily: supportFontFamily,
+    lineHeight: supportLineHeight,
+    fontWeight: String(supportFontWeight),
+    textAlign: 'center'
+  };
+  const mediaContent = useMemo(() => {
+    if (media === undefined || media === null) {
+      return /*#__PURE__*/_jsx(View, {
+        style: {
+          width: DEFAULT_MEDIA_SIZE,
+          height: DEFAULT_MEDIA_SIZE
+        },
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants"
+      });
+    }
+    return cloneChildrenWithModes(media, modes);
+  }, [media, modes]);
+  const buttonContent = useMemo(() => {
+    if (buttonSlot !== undefined && buttonSlot !== null) {
+      return cloneChildrenWithModes(buttonSlot, modes);
+    }
+    if (!showButton) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(Button, {
+      label: buttonLabel,
+      onPress: onButtonPress,
+      modes: modes
+    });
+  }, [buttonSlot, showButton, buttonLabel, onButtonPress, modes]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    testID: testID,
+    children: [mediaContent, /*#__PURE__*/_jsxs(View, {
+      style: textWrapStyle,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: titleStyle,
+        children: title
+      }), showSupportText && supportText ? /*#__PURE__*/_jsx(Text, {
+        style: supportTextStyle,
+        children: supportText
+      }) : null, buttonContent]
+    })]
+  });
+}
+export default LottieIntroBlock;

package/lib/module/components/PageHero/PageHero.js

@@ -0,0 +1,147 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import Button from '../Button/Button';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * PageHero displays a centered hero block typically used at the top of a page
+ * or feature screen. It contains an eyebrow line, a large headline, an optional
+ * supporting line (e.g. price/timeline), and an optional action button.
+ *
+ * All visual values are resolved from Figma design tokens via
+ * `getVariableByName`. The button slot cascades the active `modes` to its
+ * children through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PageHero
+ *   eyebrow="Upgrade to JioFinance+"
+ *   headline="Resume earning cashback, extra points, and 1% gold"
+ *   supportingText="₹999/year · ₹0 until 2027"
+ *   buttonLabel="Renew for free"
+ *   onButtonPress={() => navigate('Upgrade')}
+ * />
+ * ```
+ */
+function PageHero({
+  eyebrow = 'Upgrade to JioFinance+',
+  headline = 'Resume earning cashback, extra points, and 1% gold',
+  supportingText = '₹999/year · ₹0 until 2027',
+  showSupportingText = true,
+  buttonLabel = 'Renew for free',
+  onButtonPress,
+  showButton = true,
+  buttonSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const gap = Number(getVariableByName('PageHero/gap', modes)) || 16;
+  const paddingHorizontal = Number(getVariableByName('PageHero/padding/horizontal', modes)) || 0;
+  const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes)) || 8;
+  const eyebrowColor = getVariableByName('PageHero/eyebrow/color', modes) || '#ffffff';
+  const eyebrowFontFamily = getVariableByName('PageHero/eyebrow/fontFamily', modes) || 'System';
+  const eyebrowFontSize = Number(getVariableByName('PageHero/eyebrow/fontSize', modes)) || 18;
+  const eyebrowFontWeight = getVariableByName('PageHero/eyebrow/fontWeight', modes) || 700;
+  const eyebrowLineHeight = Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)) || 20;
+  const headlineColor = getVariableByName('PageHero/headline/color', modes) || '#ffffff';
+  const headlineFontFamily = getVariableByName('PageHero/headline/fontFamily', modes) || 'System';
+  const headlineFontSize = Number(getVariableByName('PageHero/headline/fontSize', modes)) || 29;
+  const headlineFontWeight = getVariableByName('PageHero/headline/fontWeight', modes) || 900;
+  const headlineLineHeight = Number(getVariableByName('PageHero/headline/lineHeight', modes)) || 29;
+
+  // Only `lineHeight` is tokenized for the supporting text in the Figma source.
+  // Color, font size and weight are inline literals in the design (12px medium
+  // white) — we mirror that here so the visual stays faithful when no token
+  // exists.
+  const supportingTextLineHeight = Number(getVariableByName('PageHero/supportingText/lineHeight', modes)) || 16;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingHorizontal,
+    gap,
+    width: '100%'
+  };
+  const textWrapStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: textWrapGap,
+    width: '100%'
+  };
+  const eyebrowStyle = {
+    color: eyebrowColor,
+    fontFamily: eyebrowFontFamily,
+    fontSize: eyebrowFontSize,
+    fontWeight: String(eyebrowFontWeight),
+    lineHeight: eyebrowLineHeight,
+    textAlign: 'center'
+  };
+  const headlineStyle = {
+    color: headlineColor,
+    fontFamily: headlineFontFamily,
+    fontSize: headlineFontSize,
+    fontWeight: String(headlineFontWeight),
+    lineHeight: headlineLineHeight,
+    textAlign: 'center',
+    width: '100%'
+  };
+  const supportingTextStyle = {
+    color: '#ffffff',
+    fontFamily: 'System',
+    fontSize: 12,
+    fontWeight: '500',
+    lineHeight: supportingTextLineHeight,
+    textAlign: 'center'
+  };
+  const buttonWrapStyle = {
+    width: '100%'
+  };
+  const buttonContent = useMemo(() => {
+    if (buttonSlot !== undefined && buttonSlot !== null) {
+      return cloneChildrenWithModes(buttonSlot, modes);
+    }
+    if (!showButton) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(Button, {
+      label: buttonLabel,
+      onPress: onButtonPress,
+      modes: modes,
+      style: buttonWrapStyle
+    });
+    // buttonWrapStyle is a literal object created above; it is intentionally
+    // omitted from deps because its identity changes on every render but its
+    // shape never does.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [buttonSlot, showButton, buttonLabel, onButtonPress, modes]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: textWrapStyle,
+      children: [eyebrow ? /*#__PURE__*/_jsx(Text, {
+        style: eyebrowStyle,
+        children: eyebrow
+      }) : null, headline ? /*#__PURE__*/_jsx(Text, {
+        style: headlineStyle,
+        children: headline
+      }) : null]
+    }), showSupportingText && supportingText ? /*#__PURE__*/_jsx(Text, {
+      style: supportingTextStyle,
+      children: supportingText
+    }) : null, buttonContent]
+  });
+}
+export default PageHero;

package/lib/module/components/PoweredByLabel/PoweredByLabel.js

@@ -0,0 +1,130 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Text, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import MediaSource from '../../utils/MediaSource';
+
+// Default bundled FINVU brand logo, matching the Figma reference so the
+// component renders correctly out of the box without any image prop.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_LOGO = require('./finvu.png');
+const DEFAULT_LABEL = 'Powered by RBI-regulated account aggregator';
+const DEFAULT_IMAGE_WIDTH = 33;
+const DEFAULT_IMAGE_HEIGHT = 12;
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') return Number.isFinite(value) ? value : fallback;
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') return value;
+  return fallback;
+};
+
+/**
+ * `PoweredByLabel` renders the small "Powered by RBI-regulated account
+ * aggregator" badge with a trailing brand logo, used to attribute the
+ * underlying account-aggregator partner in flows such as bank-account
+ * linking and consent screens.
+ *
+ * The component is composed of:
+ *
+ * 1. A token-styled pill container (`poweredByLabel/background`,
+ *    `poweredByLabel/padding/*`).
+ * 2. The disclosure copy rendered through the `poweredByLabel/*` typography
+ *    tokens.
+ * 3. A configurable brand logo slot. Defaults to the bundled FINVU mark, but
+ *    callers can pass any image via `imageSource` or fully replace the slot
+ *    via `imageSlot`.
+ *
+ * @component
+ * @param {PoweredByLabelProps} props
+ */
+function PoweredByLabel({
+  label = DEFAULT_LABEL,
+  imageSource,
+  imageWidth = DEFAULT_IMAGE_WIDTH,
+  imageHeight = DEFAULT_IMAGE_HEIGHT,
+  imageSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  textStyle,
+  imageStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const background = getVariableByName('poweredByLabel/background', modes) ?? '#f5f5f5';
+  const foreground = getVariableByName('poweredByLabel/foreground', modes) ?? '#191b1e';
+  const fontFamily = getVariableByName('poweredByLabel/fontFamily', modes) ?? 'JioType Var';
+  const fontSize = toNumber(getVariableByName('poweredByLabel/fontSize', modes), 10);
+  const lineHeight = toNumber(getVariableByName('poweredByLabel/lineHeight', modes), 12);
+  const fontWeight = toFontWeight(getVariableByName('poweredByLabel/fontWeight', modes), '400');
+  const gap = toNumber(getVariableByName('poweredByLabel/gap', modes), 10);
+  const paddingHorizontal = toNumber(getVariableByName('poweredByLabel/padding/horizontal', modes), 16);
+  const paddingVertical = toNumber(getVariableByName('poweredByLabel/padding/vertical', modes), 6);
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: background,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    // Hug content horizontally so the pill does not stretch to fill the
+    // parent (matches Badge, BrandChip, etc.). Override via `style` if
+    // you want it full-width (e.g. inside a card footer).
+    alignSelf: 'flex-start'
+  };
+  const labelTextStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    textAlign: 'center',
+    flexShrink: 1
+  };
+  const renderImage = () => {
+    if (imageSlot !== undefined && imageSlot !== null) {
+      const processed = cloneChildrenWithModes(imageSlot, modes);
+      if (processed.length === 0) return null;
+      return processed.length === 1 ? processed[0] : processed;
+    }
+    const resolvedSource = imageSource ?? DEFAULT_LOGO;
+    return /*#__PURE__*/_jsx(MediaSource, {
+      source: resolvedSource,
+      width: imageWidth,
+      height: imageHeight,
+      resizeMode: "contain",
+      style: imageStyle,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    });
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityRole: "text",
+    accessibilityLabel: accessibilityLabel ?? label,
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [labelTextStyle, textStyle],
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      numberOfLines: 1,
+      children: label
+    }), renderImage()]
+  });
+}
+export default PoweredByLabel;

package/lib/module/components/Text/Text.js

@@ -10,7 +10,8 @@ const TEXT_ALIGN_MAP = {
   Center: 'center'
 };
 function Text({
-  text = 'Korem ipsum ',
+  text,
+  children,
   textAlign = 'Left',
   modes = EMPTY_MODES,
   style,
@@ -31,10 +32,16 @@ function Text({
     letterSpacing: letterSpacing,
     textAlign: TEXT_ALIGN_MAP[textAlign]
   };
+
+  // Prefer JSX children when present, otherwise fall back to the `text` prop.
+  // Keep the storybook placeholder as a last resort so the Default story
+  // still renders something visible when no content is supplied via either
+  // route.
+  const content = children !== undefined && children !== null && children !== false ? children : text !== undefined ? text : 'Korem ipsum ';
   return /*#__PURE__*/_jsx(RNText, {
     style: [textStyle, style],
     numberOfLines: numberOfLines,
-    children: text
+    children: content
   });
 }
 export default Text;

package/lib/module/components/Tooltip/Tooltip.js

@@ -165,7 +165,9 @@ export function TooltipTrigger({
 }
 export function TooltipContent({
   children,
-  sideOffset = 4
+  sideOffset = 4,
+  gap = 4,
+  alignItems = 'flex-start'
 }) {
   const {
     isVisible,
@@ -390,6 +392,35 @@ export function TooltipContent({
     paddingHorizontal: paddingH,
     paddingVertical: paddingV
   };
+
+  // Vertical slot wrapper: stack arbitrary children top-to-bottom with a gap.
+  // Raw <Text> children still get auto-styled with the tooltip label tokens
+  // so the simple <TooltipContent><Text>label</Text></TooltipContent> usage
+  // keeps working without any changes.
+  const slotStyle = {
+    flexDirection: 'column',
+    alignItems,
+    gap
+  };
+  const renderSlotChildren = () => {
+    if (typeof children === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        style: textStyle,
+        children: children
+      });
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: slotStyle,
+      children: React.Children.map(children, child => {
+        if (/*#__PURE__*/React.isValidElement(child) && (child.type === Text || child.type.displayName === 'Text')) {
+          return /*#__PURE__*/React.cloneElement(child, {
+            style: [textStyle, child.props.style]
+          });
+        }
+        return child;
+      })
+    });
+  };
   if (!hasMeasured) {
     return /*#__PURE__*/_jsx(Modal, {
       transparent: true,
@@ -401,19 +432,7 @@ export function TooltipContent({
         children: /*#__PURE__*/_jsx(View, {
           style: measureStyle,
           onLayout: e => setContentSize(e.nativeEvent.layout),
-          children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
-            style: textStyle,
-            children: children
-          }) : /*#__PURE__*/_jsx(View, {
-            children: React.Children.map(children, child => {
-              if (/*#__PURE__*/React.isValidElement(child) && (child.type === Text || child.type.displayName === 'Text')) {
-                return /*#__PURE__*/React.cloneElement(child, {
-                  style: [textStyle, child.props.style]
-                });
-              }
-              return child;
-            })
-          })
+          children: renderSlotChildren()
         })
       })
     });
@@ -444,19 +463,7 @@ export function TooltipContent({
             shadowRadius: 3.84,
             elevation: 5
           }],
-          children: [typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
-            style: textStyle,
-            children: children
-          }) : /*#__PURE__*/_jsx(View, {
-            children: React.Children.map(children, child => {
-              if (/*#__PURE__*/React.isValidElement(child) && (child.type === Text || child.type.displayName === 'Text')) {
-                return /*#__PURE__*/React.cloneElement(child, {
-                  style: [textStyle, child.props.style]
-                });
-              }
-              return child;
-            })
-          }), /*#__PURE__*/_jsx(View, {
+          children: [renderSlotChildren(), /*#__PURE__*/_jsx(View, {
             style: {
               position: 'absolute',
               left: arrowX,

package/lib/module/components/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+export { default as AccountCard } from './AccountCard/AccountCard';
 export { default as ActionFooter } from './ActionFooter/ActionFooter';
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar } from './Avatar/Avatar';
@@ -22,6 +23,8 @@ export { default as CardInsight } from './CardInsight/CardInsight';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
+export { default as Dropdown, DropdownItem } from './Dropdown/Dropdown';
+export { default as DropdownInput } from './DropdownInput/DropdownInput';
 export { default as CardCTA } from './CardCTA/CardCTA';
 export { default as DebitCard } from './DebitCard/DebitCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
@@ -44,6 +47,7 @@ export { default as LazyList } from './LazyList/LazyList';
 export { default as LinearMeter } from './LinearMeter/LinearMeter';
 export { default as LinearProgress } from './LinearProgress/LinearProgress';
 export { default as ListGroup } from './ListGroup/ListGroup';
+export { default as LottieIntroBlock } from './LottieIntroBlock/LottieIntroBlock';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard } from './MediaCard/MediaCard';
 export { default as MerchantProfile } from './MerchantProfile/MerchantProfile';
@@ -62,7 +66,7 @@ export { StepLabel } from './Stepper/StepLabel';
 export { default as TextInput } from './TextInput/TextInput';
 export { default as StatusHero } from './StatusHero/StatusHero';
 export { default as ThreadHero } from './ThreadHero/ThreadHero';
-export { Tooltip } from './Tooltip/Tooltip';
+export { Tooltip, TooltipTrigger, TooltipContent } from './Tooltip/Tooltip';
 export { default as TransactionDetails } from './TransactionDetails/TransactionDetails';
 export { default as TransactionStatus } from './TransactionStatus/TransactionStatus';
 export { default as TransactionBubble } from './TransactionBubble/TransactionBubble';
@@ -99,8 +103,10 @@ export { default as Toast } from './Toast/Toast';
 export { default as ToastProvider } from './Toast/ToastProvider';
 export { useToast, addToast, closeToast, closeAll } from './Toast/useToast';
 export { default as AmountInput } from './AmountInput/AmountInput';
+export { default as PageHero } from './PageHero/PageHero';
 export { default as Popup } from './Popup/Popup';
 export { default as PortfolioHero } from './PortfolioHero/PortfolioHero';
+export { default as PoweredByLabel } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel } from './ProductLabel/ProductLabel';
 export { default as ProductOverview } from './ProductOverview/ProductOverview';
 export { default as ProgressBadge } from './ProgressBadge/ProgressBadge';