Merged in feat/LOY-316-Level-Progress-Card (pull request #2739)

Feat/LOY-316 Level Progress Card

* feat(LOY-315): Add MembershipOverviewCard

* refactor(LOY-315): abstract sasbooststatus

* feat(LOY-316): build out LevelProgressCard skeleton & variant styling

* feat(LOY-316): Add HighesMembershipCard

* feat(LOY-316): ProgressBarCard base

* refactor(LOY-315): highest level card misc fixes

* feat(LOY-316): Add progress component to design system

* fix(LOY-316): type check

* refactor(LOY-316): calculate currentEarnings correctly

* fix(LOY-316): sas icon showing when not boosted

* fix(LOY-316): css module

* refactor(LOY-316): Restructure components

* feat(LOY-316): Add marker pin 📍

* fix(LOY-316): strict equality checks

* fix(LOY-316): code review fixes

* chore(LOY-316): conditionally hide old section under flag

* feat(LOY-316): Add level progress card to my points page

* chore(LOY-316): marker label container height


Approved-by: Matilda Landström

packages/design-system/lib/components/Progress/index.tsx

@@ -0,0 +1,30 @@
+import { ProgressBar } from 'react-aria-components'
+import { cx } from 'class-variance-authority'
+import styles from './progress.module.css'
+import { ProgressProps } from './types'
+
+export function Progress({
+  value,
+  minValue = 0,
+  maxValue = 100,
+  'aria-label': ariaLabel,
+  className,
+}: ProgressProps) {
+  return (
+    <ProgressBar
+      value={value}
+      minValue={minValue}
+      maxValue={maxValue}
+      aria-label={ariaLabel}
+      className={cx(styles.progress, className)}
+    >
+      {({ percentage }) => (
+        <>
+          <div className={styles.track}>
+            <div className={styles.fill} style={{ width: `${percentage}%` }} />
+          </div>
+        </>
+      )}
+    </ProgressBar>
+  )
+}