@flamingo-stack/openframe-frontend-core 0.0.439-snapshot.20260717095442 → 0.0.439

package/src/components/features/waitlist-form.tsx

@@ -222,7 +222,7 @@ export function WaitlistForm({
           onKeyDown={handleKeyDown}
         />
         {showPhoneWarning && (
-          <p className="text-h6 absolute bottom-0 left-0 translate-y-full text-ods-warning truncate" title={invalidPhoneHint}>
+          <p className="text-h6 absolute bottom-0 left-0 translate-y-full text-[var(--ods-attention-yellow-warning)] truncate" title={invalidPhoneHint}>
             {invalidPhoneHint}
           </p>
         )}
@@ -245,7 +245,7 @@ export function WaitlistForm({
               {consentText}{' View our '}
               <a
                 href={termsOfServiceUrl || '#'}
-                className="text-ods-accent underline"
+                className="text-[var(--color-accent-primary)] underline"
                 target="_blank"
                 rel="noopener noreferrer"
                 onClick={(e) => e.stopPropagation()}
@@ -255,7 +255,7 @@ export function WaitlistForm({
               {' and '}
               <a
                 href={privacyPolicyUrl || '#'}
-                className="text-ods-accent underline"
+                className="text-[var(--color-accent-primary)] underline"
                 target="_blank"
                 rel="noopener noreferrer"
                 onClick={(e) => e.stopPropagation()}

package/src/components/filter-chip.tsx

@@ -30,7 +30,7 @@ export function FilterChip({
   const baseClasses = cn(
     "inline-flex items-center justify-center rounded-full font-medium transition-all duration-200 shrink-0 group cursor-pointer",
     "hover:shadow-md hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2",
-    "font-body leading-none",
+    "font-['DM_Sans'] leading-none",
     // Size variants - enhanced mobile sizing for better visibility and touch targets
     size === 'sm' 
       ? "text-sm pl-3 pr-3 py-1 md:text-sm md:pl-3 md:pr-3 md:py-1"
@@ -43,14 +43,14 @@ export function FilterChip({
 
   const variantClasses = {
     // Legacy variants (for backward compatibility)
-    selected: "bg-ods-bg-surface text-ods-text-primary border border-ods-accent hover:bg-ods-border hover:border-ods-accent-hover focus:ring-ods-accent focus:ring-offset-ods-bg",
-    unselected: "bg-ods-bg-surface text-ods-text-secondary border border-ods-border hover:bg-ods-border hover:border-ods-border-hover hover:text-ods-text-primary focus:ring-ods-border focus:ring-offset-ods-bg",
-    info: "bg-ods-border text-ods-text-secondary border border-ods-border-hover cursor-default hover:scale-100 hover:shadow-none focus:ring-ods-border-hover focus:ring-offset-ods-bg",
-
+    selected: "bg-[#2A2A2A] text-[#E8E8E8] border border-[#FFC008] hover:bg-ods-border hover:border-[#FFD951] focus:ring-[#FFC008] focus:ring-offset-[#161616]",
+    unselected: "bg-[#2A2A2A] text-[#CCCCCC] border border-[#4A4A4A] hover:bg-ods-border hover:border-[#5A5A5A] hover:text-ods-text-primary focus:ring-[#4A4A4A] focus:ring-offset-[#161616]",
+    info: "bg-ods-border text-[#CCCCCC] border border-[#5A5A5A] cursor-default hover:scale-100 hover:shadow-none focus:ring-[#5A5A5A] focus:ring-offset-[#161616]",
+    
     // New subtle selected variants - same backgrounds/text, only border colors different
-    category: "bg-ods-bg-surface text-ods-text-primary border border-ods-accent/40 hover:bg-ods-border hover:border-ods-accent/60 hover:text-ods-text-primary focus:ring-ods-accent/40 focus:ring-offset-ods-bg",
-    subcategory: "bg-ods-bg-surface text-ods-text-primary border border-ods-accent/60 hover:bg-ods-border hover:border-ods-accent/80 hover:text-ods-text-primary focus:ring-ods-accent/60 focus:ring-offset-ods-bg",
-    tag: "bg-ods-bg-surface text-ods-text-primary border border-ods-accent/20 hover:bg-ods-border hover:border-ods-accent/30 hover:text-ods-text-primary focus:ring-ods-accent/20 focus:ring-offset-ods-bg",
+    category: "bg-[#2A2A2A] text-[#E8E8E8] border border-[#FFC008]/40 hover:bg-ods-border hover:border-[#FFC008]/60 hover:text-ods-text-primary focus:ring-[#FFC008]/40 focus:ring-offset-[#161616]",
+    subcategory: "bg-[#2A2A2A] text-[#E8E8E8] border border-[#FFC008]/60 hover:bg-ods-border hover:border-[#FFC008]/80 hover:text-ods-text-primary focus:ring-[#FFC008]/60 focus:ring-offset-[#161616]",
+    tag: "bg-[#2A2A2A] text-ods-text-primary border border-[#FFC008]/20 hover:bg-ods-border hover:border-[#FFC008]/30 hover:text-ods-text-primary focus:ring-[#FFC008]/20 focus:ring-offset-[#161616]",
   }
 
   return (
@@ -67,7 +67,7 @@ export function FilterChip({
       aria-disabled={disabled}
     >
       <span className={cn(
-        "truncate font-body font-medium leading-none text-center",
+        "truncate font-['DM_Sans'] font-medium leading-none text-center",
         size === 'sm' ? "max-w-[100px] md:max-w-[120px]" : "max-w-[120px] md:max-w-[140px]"
       )} title={label}>
         {label}
@@ -86,12 +86,12 @@ export function FilterChip({
             "transition-all duration-200 shrink-0",
             "group-hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-1",
             variant === 'category'
-              ? "hover:bg-ods-bg-hover text-ods-text-primary focus:ring-ods-border-focus focus:ring-offset-ods-bg-surface"
+              ? "hover:bg-[#4A4A4A] text-[#E8E8E8] focus:ring-[#E8E8E8] focus:ring-offset-[#2A2A2A]"
               : variant === 'subcategory'
-              ? "hover:bg-ods-bg-hover text-ods-text-primary focus:ring-ods-border-focus focus:ring-offset-ods-bg-surface"
+              ? "hover:bg-[#4A4A4A] text-[#E8E8E8] focus:ring-[#E8E8E8] focus:ring-offset-[#2A2A2A]"
               : variant === 'tag'
-              ? "hover:bg-ods-bg-hover text-ods-text-primary focus:ring-ods-border-focus focus:ring-offset-ods-bg-surface"
-              : "hover:bg-ods-bg-hover text-ods-text-primary focus:ring-ods-border-focus focus:ring-offset-ods-bg-surface",
+              ? "hover:bg-[#4A4A4A] text-[#E8E8E8] focus:ring-[#E8E8E8] focus:ring-offset-[#2A2A2A]"
+              : "hover:bg-[#4A4A4A] text-[#E8E8E8] focus:ring-[#E8E8E8] focus:ring-offset-[#2A2A2A]",
             disabled && "opacity-50 cursor-not-allowed hover:scale-100"
           )}
           aria-label={`Remove ${label} filter`}

package/src/components/footer.tsx

@@ -27,7 +27,7 @@ interface FooterConfig {
   belowDescriptionContent?: React.ReactNode  // Custom content below description
   moveDescriptionToRight?: boolean  // Move description and belowDescriptionContent to right column
   keepBelowDescriptionLeft?: boolean  // Keep belowDescriptionContent on left even when moveDescriptionToRight is true
-  backgroundColor?: string  // ODS background color (e.g., 'bg-ods-card', 'bg-ods-bg')
+  backgroundColor?: string  // ODS background color (e.g., 'bg-ods-bg-card', 'bg-ods-system-greys-black')
   social?: {
     github?: string
     twitter?: string
@@ -71,7 +71,7 @@ export function Footer({ config, renderLink }: FooterProps) {
  */
 function UniversalFooter({ config, renderLink }: { config: FooterConfig; renderLink?: (link: FooterLink) => React.ReactNode }) {
   const defaultRenderLink = (link: FooterLink) => (
-    <a href={link.href} className="font-body font-medium text-md md:text-md leading-[1.33] text-ods-text-primary hover:text-ods-accent transition-colors">
+    <a href={link.href} className="font-body font-medium text-md md:text-md leading-[1.33] text-ods-text-primary hover:text-ods-accent-primary transition-colors">
       {link.label}
     </a>
   )
@@ -79,7 +79,7 @@ function UniversalFooter({ config, renderLink }: { config: FooterConfig; renderL
   const linkRenderer = renderLink || defaultRenderLink
   
   return (
-    <footer className={`w-full flex flex-col justify-center items-center ${config.backgroundColor || 'bg-ods-card'} px-6 py-10 relative gap-6 md:gap-6 min-h-[auto] md:min-h-[248px] z-[44] border-t border-ods-border`}>
+    <footer className={`w-full flex flex-col justify-center items-center ${config.backgroundColor || 'bg-ods-bg-card'} px-6 py-10 relative gap-6 md:gap-6 min-h-[auto] md:min-h-[248px] z-[44] border-t border-ods-border`}>
       <div className="w-full grid grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8 items-start">
         
         {/* Column 1: Logo and optionally description */}

package/src/components/form.tsx

@@ -112,7 +112,7 @@ const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttribu
   ({ className, ...props }, ref) => {
     const { formDescriptionId } = useFormField()
 
-    return <p ref={ref} id={formDescriptionId} className={cn("text-h6 text-muted-foreground", className)} {...props} />
+    return <p ref={ref} id={formDescriptionId} className={cn("text-sm text-muted-foreground", className)} {...props} />
   },
 )
 FormDescription.displayName = "FormDescription"
@@ -127,7 +127,7 @@ const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<
     }
 
     return (
-      <p ref={ref} id={formMessageId} className={cn("text-h6 text-destructive", className)} {...props}>
+      <p ref={ref} id={formMessageId} className={cn("text-sm font-medium text-destructive", className)} {...props}>
         {body}
       </p>
     )

package/src/components/hero-image-uploader.tsx

@@ -158,9 +158,9 @@ export function HeroImageUploader({ imageUrl, onChange, uploadEndpoint, height =
           ) : (
             <>
               <ImageIcon className="h-12 w-12 text-ods-text-secondary" />
-              <span className="text-ods-text-primary text-h6 mt-2">Upload cover image</span>
-              <span className="text-ods-text-secondary text-h6 mt-1">Click to upload or drag and drop</span>
-              <span className="text-ods-text-secondary text-h6">PNG, JPEG, WebP, GIF up to 5MB</span>
+              <span className="text-ods-text-primary font-['DM_Sans'] text-[16px] font-medium mt-2">Upload cover image</span>
+              <span className="text-ods-text-secondary font-['DM_Sans'] text-[14px] mt-1">Click to upload or drag and drop</span>
+              <span className="text-ods-text-secondary font-['DM_Sans'] text-[12px]">PNG, JPEG, WebP, GIF up to 5MB</span>
             </>
           )}
         </div>

package/src/components/image-cropper.tsx

@@ -213,7 +213,7 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
       <div className="flex flex-col gap-4">
         {/* Zoom */}
         <div className="flex items-center gap-3">
-          <span className="min-w-[60px] text-h6">Zoom</span>
+          <span className="min-w-[60px] text-sm">Zoom</span>
           <Slider
             min={1}
             max={3}
@@ -226,7 +226,7 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
         </div>
         {/* Rotate */}
         <div className="flex items-center gap-3">
-          <span className="min-w-[60px] text-h6">Rotate</span>
+          <span className="min-w-[60px] text-sm">Rotate</span>
           <Slider
             min={0}
             max={360}

package/src/components/input.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+
+import { cn } from "../utils/cn"
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  /** When true, renders red error border & ring */
+  invalid?: boolean;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, invalid = false, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        // Layout & spacing identical to VendorSelector
+        "flex w-full min-h-[60px] rounded-lg border p-2",
+        // Typography
+        "text-h4",
+        // File input adjustments
+        "ring-offset-background file:border-0 file:bg-transparent file:text-h4",
+        // Focus & disabled states
+        "placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ods-accent/20 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:bg-ods-bg",
+        // Animations & touch UX
+        "transition-colors duration-200 touch-manipulation",
+        // Theme palette
+        "bg-ods-card border-ods-border text-ods-text-primary placeholder:text-ods-text-secondary hover:border-ods-accent/30 focus:border-ods-accent",
+        // Ensure proper cursor/stacking
+        "cursor-text relative z-10",
+        invalid && "border-red-500 focus-visible:ring-red-500",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Input.displayName = "Input"
+
+export { Input }

package/src/components/label.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../utils/cn"
+
+const labelVariants = cva("h4 text-ods-text-primary font-['DM_Sans'] text-[14px] mb-2 font-semibold uppercase tracking-[-0.02em] leading-[1.3] line-clamp-2 text-sm md:text")
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

package/src/components/layout/page-container.tsx

@@ -248,14 +248,14 @@ function renderAdvancedPageContainer({
 
             {/* Title */}
             {title && (
-              <h1 className="text-h2 text-ods-text-primary">
+              <h1 className="text-h2 tracking-[-0.64px] text-ods-text-primary">
                 {title}
               </h1>
             )}
 
             {/* Subtitle */}
             {subtitle && (
-              <div className="text-h6 text-ods-text-secondary">
+              <div className="text-ods-text-secondary font-['DM_Sans'] font-medium text-[16px]">
                 {subtitle}
               </div>
             )}
@@ -286,12 +286,12 @@ function renderAdvancedPageContainer({
             )}
 
             {title && (
-              <h1 className="text-h2 text-ods-text-primary">
+              <h1 className="text-h2 tracking-[-0.48px] text-ods-text-primary">
                 {title}
               </h1>
             )}
             {subtitle && (
-              <div className="text-h6 text-ods-text-secondary">
+              <div className="text-ods-text-secondary font-['DM_Sans'] font-medium text-[16px]">
                 {subtitle}
               </div>
             )}
@@ -322,7 +322,7 @@ function renderAdvancedPageContainer({
             )}
 
             {title && (
-              <h1 className="text-h2 text-ods-text-primary">
+              <h1 className="text-[32px] font-['Azeret_Mono:SemiBold',_sans-serif] font-semibold text-ods-text-primary tracking-[-0.64px]">
                 {title}
               </h1>
             )}
@@ -350,7 +350,7 @@ function renderAdvancedPageContainer({
               </h1>
             )}
             {subtitle && (
-              <div className="text-h6 text-ods-text-secondary">
+              <div className="text-ods-text-secondary font-['DM_Sans'] font-medium text-[16px]">
                 {subtitle}
               </div>
             )}

package/src/components/layout/page-heading.tsx

@@ -22,7 +22,7 @@ export const PAGE_HEADING_CLASS = 'text-h1 text-ods-text-primary'
 export const SECTION_HEADING_CLASS = 'text-h2 text-ods-text-primary'
 
 const DESCRIPTION_CLASS =
-  "mt-6 max-w-[640px] font-body text-[16px] md:text-[18px] leading-[24px] md:leading-[28px] text-ods-text-secondary"
+  "mt-6 max-w-[640px] font-['DM_Sans'] text-[16px] md:text-[18px] leading-[24px] md:leading-[28px] text-ods-text-secondary"
 
 export interface PageHeadingProps {
   /** Heading content — plain text or nodes (e.g. an accent <span>). */

package/src/components/loading/card-skeleton.tsx

@@ -177,10 +177,10 @@ function BlogCardContent({ showActions, showMetadata }: { showActions: boolean;
               </div>
               
               {/* Date and reading time section - matches BlogMeta right side */}
-              <div className="flex items-center gap-3 text-ods-text-muted shrink-0">
+              <div className="flex items-center gap-3 text-[#767676] shrink-0">
                 <TextSkeleton.Caption className="w-12" />
                 {/* Separator dot */}
-                <div className="w-1 h-1 bg-ods-skeleton rounded-full"></div>
+                <div className="w-1 h-1 bg-[#767676] rounded-full"></div>
                 <TextSkeleton.Caption className="w-16" />
               </div>
             </div>

package/src/components/loading/category-card-skeleton.tsx

@@ -10,7 +10,7 @@ export function CategoryCardSkeleton({ className }: CategoryCardSkeletonProps) {
   return (
     <article
       className={cn(
-        'bg-ods-card border border-ods-border rounded-[12px] p-8 flex flex-col min-w-0 box-border',
+        'bg-[#1A1A1A] border border-[#424242] rounded-[12px] p-8 flex flex-col min-w-0 box-border',
         className,
       )}
       role="status"

package/src/components/loading/margin-report-skeleton.tsx

@@ -15,8 +15,8 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
       <div className="max-w-[1920px] px-6 md:px-20 py-6 md:py-10 mx-auto space-y-10">
         {/* Header */}
         <div className="space-y-3">
-          <div className="h-10 w-72 bg-ods-skeleton rounded" />
-          <div className="h-4 w-80 bg-ods-skeleton rounded" />
+          <div className="h-10 w-72 bg-[#2A2A2A] rounded" />
+          <div className="h-4 w-80 bg-[#2A2A2A] rounded" />
         </div>
 
         {/* Summary cards */}
@@ -30,10 +30,10 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           {/* MSP profile skeleton */}
           <div className="bg-ods-card border border-ods-border rounded-lg p-6 flex items-center gap-4 animate-pulse">
-            <div className="w-14 h-14 rounded-lg bg-ods-skeleton" />
+            <div className="w-14 h-14 rounded-lg bg-[#2A2A2A]" />
             <div className="flex-1 space-y-2">
-              <div className="h-4 bg-ods-skeleton rounded w-3/4" />
-              <div className="h-3 bg-ods-skeleton rounded w-1/2" />
+              <div className="h-4 bg-[#2A2A2A] rounded w-3/4" />
+              <div className="h-3 bg-[#2A2A2A] rounded w-1/2" />
             </div>
           </div>
 
@@ -41,15 +41,15 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
           <div className="bg-ods-card border border-ods-border rounded-lg p-6 flex flex-col gap-4 animate-pulse">
             <div className="flex items-center justify-between gap-4">
               <div className="flex items-center gap-2">
-                <div className="w-10 h-10 rounded-lg bg-ods-skeleton" />
+                <div className="w-10 h-10 rounded-lg bg-[#2A2A2A]" />
                 <div className="space-y-1">
-                  <div className="h-4 w-32 bg-ods-skeleton rounded" />
-                  <div className="h-3 w-20 bg-ods-skeleton rounded" />
+                  <div className="h-4 w-32 bg-[#2A2A2A] rounded" />
+                  <div className="h-3 w-20 bg-[#2A2A2A] rounded" />
                 </div>
               </div>
-              <div className="h-6 w-36 bg-ods-skeleton rounded" />
+              <div className="h-6 w-36 bg-[#2A2A2A] rounded" />
             </div>
-            <div className="h-4 w-40 bg-ods-skeleton rounded mt-4" />
+            <div className="h-4 w-40 bg-[#2A2A2A] rounded mt-4" />
           </div>
         </div>
 
@@ -59,10 +59,10 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
             <div key={idx} className="bg-ods-card border border-ods-border rounded-lg overflow-hidden flex flex-col animate-pulse">
               {/* list header */}
               <div className="flex items-center justify-between px-6 py-4">
-                <div className="h-6 w-40 bg-ods-skeleton rounded" />
+                <div className="h-6 w-40 bg-[#2A2A2A] rounded" />
                 <div className="flex items-center gap-2">
-                  <div className="h-5 w-20 bg-ods-skeleton rounded" />
-                  <div className="h-4 w-10 bg-ods-skeleton rounded" />
+                  <div className="h-5 w-20 bg-[#2A2A2A] rounded" />
+                  <div className="h-4 w-10 bg-[#2A2A2A] rounded" />
                 </div>
               </div>
 
@@ -72,16 +72,16 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
                   <div key={j} className="bg-ods-bg border border-ods-border rounded-lg px-4 py-3 flex items-center justify-between">
                     {/* left section: icon + text */}
                     <div className="flex items-center gap-3 min-w-0">
-                      <div className="w-12 h-12 bg-ods-skeleton rounded-lg flex-shrink-0" />
+                      <div className="w-12 h-12 bg-[#2A2A2A] rounded-lg flex-shrink-0" />
                       <div className="flex flex-col min-w-0">
-                        <div className="h-4 w-32 bg-ods-skeleton rounded" />
-                        <div className="hidden md:block h-3 w-24 bg-ods-skeleton rounded mt-1" />
+                        <div className="h-4 w-32 bg-[#2A2A2A] rounded" />
+                        <div className="hidden md:block h-3 w-24 bg-[#2A2A2A] rounded mt-1" />
                       </div>
                     </div>
                     {/* right addon: cost text */}
                     <div className="flex items-center gap-1 flex-shrink-0">
-                      <div className="h-4 w-16 bg-ods-skeleton rounded" />
-                      <div className="h-3 w-8 bg-ods-skeleton rounded" />
+                      <div className="h-4 w-16 bg-[#2A2A2A] rounded" />
+                      <div className="h-3 w-8 bg-[#2A2A2A] rounded" />
                     </div>
                   </div>
                 ))}
@@ -91,7 +91,7 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
         </div>
 
         {/* Strategic Recommendations header placeholder */}
-        <div className="h-6 w-60 bg-ods-skeleton rounded" />
+        <div className="h-6 w-60 bg-[#2A2A2A] rounded" />
 
         {/* Recommendations grid */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -105,11 +105,11 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
           {/* Section header */}
           <div className="flex items-start gap-6">
             <div className="flex-1 space-y-2 min-w-0">
-              <div className="h-8 w-72 bg-ods-skeleton rounded" />
-              <div className="h-4 w-3/4 bg-ods-skeleton rounded" />
+              <div className="h-8 w-72 bg-[#2A2A2A] rounded" />
+              <div className="h-4 w-3/4 bg-[#2A2A2A] rounded" />
             </div>
             {/* Logo placeholder */}
-            <div className="w-12 h-12 bg-ods-skeleton rounded-md shrink-0" />
+            <div className="w-12 h-12 bg-[#2A2A2A] rounded-md shrink-0" />
           </div>
 
           {/* Value cards grid */}

package/src/components/loading/openmsp-heartbeat.tsx

@@ -35,7 +35,7 @@ export function OpenmspHeartbeatLoader({ className = '', progress = 0, label, ba
         <div className="flex flex-col items-center justify-center w-128">
           {/* Progress text */} 
           <h2 className="mt-2 text-ods-accent text-center font-bold">
-            {progress != undefined && progress > 0 ? Math.floor(progress) : 0}% <span  className="text-h6 text-ods-text-secondary">/100%</span>
+            {progress != undefined && progress > 0 ? Math.floor(progress) : 0}% <span  className="text-sm text-ods-text-secondary">/100%</span>
           </h2>
 
           {/* Progress text */}