docs: documentation changes for release (#4300)

* docs: added manage reservations user guide (#4290) * docs: added manage reservations user guide * removed feature flag details * docs: added how-to for custom reservations (#4292) * docs: added how-to for custom reservations * eslint fixes * docs: added product module documentation (#4287) * docs: added product module documentation * added details about optional environment variables * small fixes * Remove reference link * added example usages * added link to sample project * address PR feedback * docs: moved product module guide + added product module tabs (#4307) * added product module tab * adjust design of badge * docs: added onboarding features (#4168) * added marketplace page * added subscription roadmap * added rating for onboarding * added learning path components * small fixes * fix build error * fix eslint errors * change roadmaps to recipes * small change in text * optimize learning path and notifications * fix tracking usage * fix eslint errors * added enter/exit animation * allow starting a path using a query parameter * fix gap between notifications * address vercel comments * fixed links issue * changed create-medusa-app docs steps * move troubleshooting section * improved tracking across docs * fix build errors * remove console * added a note about `boilerplate` option * added troubleshooting section for eagain * added invite option in cli reference * added track event for finished onboarding * update boilerplate option name * redesigned learning path component * docs: added how to create widget docs (#4318) * docs: added how to create widget docs * remove development guide * added types * docs: added details about createCustomAdminHooks (#4288) * docs: added details about createCustomAdminHooks * small improvement * added missing import * small changes * docs: added onboarding guide (#4320) * docs: added how to create widget docs * remove development guide * docs: added onboarding guide * added types * added recipes link * small adjustments * fixed eslint errors * styling fixes * change to singular product module * updated the what's new section * shorten down medusa react card * updated tailwind configurations * fix build error * fix newspaper icon * style fixes * change modal shadow * fix color of line numbers * fix code fade color * docs: updated admin documentations * eslint fixes * text changes * added a note about beta version * remove empty object argument * remove demo repo url * fix selection color for code headers * general fixes * fix eslint error * changed code theme * added preparation step * changes regarding beta version * Update docs/content/modules/products/serverless-module.md Co-authored-by: Riqwan Thamir <rmthamir@gmail.com> * Update docs/content/modules/products/serverless-module.md Co-authored-by: Riqwan Thamir <rmthamir@gmail.com> --------- Co-authored-by: Riqwan Thamir <rmthamir@gmail.com> Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>
2023-06-20 12:25:22 +02:00
parent 8db03619b5
commit 76c4bf4acb
177 changed files with 8828 additions and 1196 deletions
@@ -13,12 +13,21 @@ const Badge: React.FC<BadgeProps> = ({ className, variant, children }) => {
        "tw-text-label-x-small-plus tw-py-px tw-px-0.4 tw-rounded tw-border tw-border-solid tw-text-center",
        variant === "purple" &&
          "tw-bg-medusa-tag-purple-bg dark:tw-bg-medusa-tag-purple-bg-dark tw-text-medusa-tag-purple-text dark:tw-text-medusa-tag-purple-text-dark tw-border-medusa-tag-purple-border dark:tw-border-medusa-tag-purple-border-dark",
+        variant === "purple-dark" &&
+          "tw-bg-medusa-tag-purple-bg-dark tw-text-medusa-tag-purple-text-dark tw-border-medusa-tag-purple-border-dark",
        variant === "orange" &&
          "tw-bg-medusa-tag-orange-bg dark:tw-bg-medusa-tag-orange-bg-dark tw-text-medusa-tag-orange-text dark:tw-text-medusa-tag-orange-text-dark tw-border-medusa-tag-orange-border dark:tw-border-medusa-tag-orange-border-dark",
+        variant === "orange-dark" &&
+          "tw-bg-medusa-tag-orange-bg-dark tw-text-medusa-tag-orange-text-dark tw-border-medusa-tag-orange-border-dark",
        variant === "green" &&
          "tw-bg-medusa-tag-green-bg dark:tw-bg-medusa-tag-green-bg-dark tw-text-medusa-tag-green-text dark:tw-text-medusa-tag-green-text-dark tw-border-medusa-tag-green-border dark:tw-border-medusa-tag-green-border-dark",
+        variant === "green-dark" &&
+          "tw-bg-medusa-tag-green-bg-dark tw-text-medusa-tag-green-text-dark tw-border-medusa-tag-green-border-dark",
        variant === "blue" &&
          "tw-bg-medusa-tag-blue-bg dark:tw-bg-medusa-tag-blue-bg-dark tw-text-medusa-tag-blue-text dark:tw-text-medusa-tag-blue-text-dark tw-border-medusa-tag-blue-border dark:tw-border-medusa-tag-blue-border-dark",
+        variant === "blue-dark" &&
+          "tw-bg-medusa-tag-blue-bg-dark tw-text-medusa-tag-blue-text-dark tw-border-medusa-tag-blue-border-dark",
+        "badge",
        className
      )}
    >
@@ -2,6 +2,7 @@ import React from "react"
 import clsx from "clsx"

 type ButtonProps = {
+  btnTypeClassName?: string
  className?: string
  onClick?: React.MouseEventHandler<HTMLButtonElement>
  disabled?: boolean
@@ -9,13 +10,18 @@ type ButtonProps = {

 const Button: React.FC<ButtonProps> = ({
  className = "",
+  btnTypeClassName,
  onClick,
  children,
  ...props
 }) => {
  return (
    <button
-      className={clsx("btn-primary", className)}
+      className={clsx(
+        !btnTypeClassName?.length && "btn-primary",
+        btnTypeClassName,
+        className
+      )}
      onClick={onClick}
      {...props}
    >
@@ -1,12 +1,12 @@
 import React, { useRef, useState, useEffect } from "react"
 import { CSSTransition, SwitchTransition } from "react-transition-group"
-// import "./index.css"

 import useIsBrowser from "@docusaurus/useIsBrowser"
 import { useLocation } from "@docusaurus/router"
 import uuid from "react-uuid"
 import Solutions from "./Solutions/index"
 import Button from "../Button"
+import { useUser } from "@site/src/providers/User"

 type FeedbackProps = {
  event?: string
@@ -50,6 +50,7 @@ const Feedback: React.FC<FeedbackProps> = ({

  const isBrowser = useIsBrowser()
  const location = useLocation()
+  const { track } = useUser()

  function handleFeedback(e) {
    const feedback = e.target.classList.contains("positive")
@@ -60,35 +61,28 @@ const Feedback: React.FC<FeedbackProps> = ({

  function submitFeedback(e, feedback = null) {
    if (isBrowser) {
-      if (window.analytics) {
-        if (showForm) {
-          setLoading(true)
-        }
-        window.analytics.track(
-          event,
-          {
-            url: location.pathname,
-            label: document.title,
-            feedback:
-              (feedback !== null && feedback) ||
-              (feedback === null && positiveFeedback)
-                ? "yes"
-                : "no",
-            message: message?.length ? message : null,
-            uuid: id,
-          },
-          function () {
-            if (showForm) {
-              setLoading(false)
-              resetForm()
-            }
-          }
-        )
-      } else {
-        if (showForm) {
-          resetForm()
-        }
+      if (showForm) {
+        setLoading(true)
      }
+      track(
+        event,
+        {
+          url: location.pathname,
+          label: document.title,
+          feedback:
+            (feedback !== null && feedback) ||
+            (feedback === null && positiveFeedback)
+              ? "yes"
+              : "no",
+          message: message?.length ? message : null,
+        },
+        function () {
+          if (showForm) {
+            setLoading(false)
+            resetForm()
+          }
+        }
+      )
    }
  }

@@ -110,7 +104,13 @@ const Feedback: React.FC<FeedbackProps> = ({
    <div className={`tw-py-2 ${className}`}>
      <SwitchTransition mode="out-in">
        <CSSTransition
-          key={showForm}
+          key={
+            showForm
+              ? "show_form"
+              : !submittedFeedback
+              ? "feedback"
+              : "submitted_feedback"
+          }
          nodeRef={nodeRef}
          timeout={300}
          addEndListener={(done) => {
@@ -12,16 +12,16 @@ type SocialLinksProps = {
 const SocialLinks: React.FC<SocialLinksProps> = ({ links = [] }) => {
  const socialIcons = {
    twitter: (
-      <IconTwitter iconColorClassName="tw-fill-medusa-icon-placeholder dark:tw-fill-medusa-icon-placeholder-dark group-hover:tw-fill-medusa-icon-secondary dark:group-hover:tw-fill-medusa-icon-secondary-dark" />
+      <IconTwitter iconColorClassName="tw-fill-medusa-icon-muted dark:tw-fill-medusa-icon-muted-dark group-hover:tw-fill-medusa-icon-subtle dark:group-hover:tw-fill-medusa-icon-subtle-dark" />
    ),
    github: (
-      <IconGitHub iconColorClassName="tw-fill-medusa-icon-placeholder dark:tw-fill-medusa-icon-placeholder-dark group-hover:tw-fill-medusa-icon-secondary dark:group-hover:tw-fill-medusa-icon-secondary-dark" />
+      <IconGitHub iconColorClassName="tw-fill-medusa-icon-muted dark:tw-fill-medusa-icon-muted-dark group-hover:tw-fill-medusa-icon-subtle dark:group-hover:tw-fill-medusa-icon-subtle-dark" />
    ),
    discord: (
-      <IconDiscord iconColorClassName="tw-fill-medusa-icon-placeholder dark:tw-fill-medusa-icon-placeholder-dark group-hover:tw-fill-medusa-icon-secondary dark:group-hover:tw-fill-medusa-icon-secondary-dark" />
+      <IconDiscord iconColorClassName="tw-fill-medusa-icon-muted dark:tw-fill-medusa-icon-muted-dark group-hover:tw-fill-medusa-icon-subtle dark:group-hover:tw-fill-medusa-icon-subtle-dark" />
    ),
    linkedin: (
-      <IconLinkedIn iconColorClassName="tw-fill-medusa-icon-placeholder dark:tw-fill-medusa-icon-placeholder-dark group-hover:tw-fill-medusa-icon-secondary dark:group-hover:tw-fill-medusa-icon-secondary-dark" />
+      <IconLinkedIn iconColorClassName="tw-fill-medusa-icon-muted dark:tw-fill-medusa-icon-muted-dark group-hover:tw-fill-medusa-icon-subtle dark:group-hover:tw-fill-medusa-icon-subtle-dark" />
    ),
  }

@@ -12,8 +12,8 @@ type LargeCardProps = {
    dark?: string
  }
  title: string
-  action: {
-    href: string
+  action?: {
+    href?: string
  }
  isSoon?: boolean
  className?: string
@@ -23,7 +23,9 @@ const LargeCard: React.FC<LargeCardProps> = ({
  Icon,
  image,
  title,
-  action: { href },
+  action: { href } = {
+    href: "",
+  },
  isSoon = false,
  className = "",
  children,
@@ -38,6 +40,9 @@ const LargeCard: React.FC<LargeCardProps> = ({
        "[&:nth-child(3n+1):before]:tw-bg-[2%_52%] [&:nth-child(3n+2):before]:tw-bg-[19%_16%] [&:nth-child(3n+3):before]:tw-bg-[17%_50%]",
        !isSoon &&
          "hover:tw-bg-medusa-bg-subtle-hover dark:hover:tw-bg-medusa-bg-base-hover-dark hover:tw-shadow-card-hover dark:hover:tw-shadow-card-hover-dark",
+        !isSoon &&
+          "group-hover:tw-bg-medusa-bg-subtle-hover dark:group-hover:tw-bg-medusa-bg-base-hover-dark group-hover:tw-shadow-card-hover dark:group-hover:tw-shadow-card-hover-dark",
+        "tw-transition-all tw-duration-200 tw-ease-ease",
        "large-card",
        className
      )}
@@ -79,13 +84,15 @@ const LargeCard: React.FC<LargeCardProps> = ({
          {children}
        </div>
      </div>
-      <Link
-        href={href}
-        className={clsx(
-          "tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-z-[4] tw-rounded",
-          isSoon && "group-hover:tw-pointer-events-none"
-        )}
-      ></Link>
+      {href && (
+        <Link
+          href={href}
+          className={clsx(
+            "tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-z-[4] tw-rounded",
+            isSoon && "group-hover:tw-pointer-events-none"
+          )}
+        ></Link>
+      )}
    </article>
  )
 }
@@ -0,0 +1,42 @@
+import { LearningPathStepType } from "@site/src/providers/LearningPath"
+import React from "react"
+import Rating from "../../Rating"
+
+export type LearningPathFinishType =
+  | {
+      type: "rating"
+      step: Omit<LearningPathStepType, "descriptionJSX"> & {
+        eventName?: string
+      }
+    }
+  | {
+      type: "custom"
+      step: LearningPathStepType & {
+        descriptionJSX: JSX.Element
+      }
+    }
+
+type LearningPathFinishProps = LearningPathFinishType & {
+  onRating?: () => void
+}
+
+const LearningPathFinish: React.FC<LearningPathFinishProps> = ({
+  type,
+  step,
+  onRating,
+}) => {
+  return (
+    <>
+      {type === "rating" && (
+        <Rating event={step.eventName} onRating={onRating} />
+      )}
+      {type === "custom" && (
+        <span className="tw-text-label-small tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark">
+          {step.descriptionJSX}
+        </span>
+      )}
+    </>
+  )
+}
+
+export default LearningPathFinish
@@ -0,0 +1,33 @@
+import useBaseUrl from "@docusaurus/useBaseUrl"
+import clsx from "clsx"
+import React from "react"
+
+type LearningPathIconProps = {
+  className?: string
+  imgClassName?: string
+} & React.AllHTMLAttributes<HTMLDivElement>
+
+const LearningPathIcon: React.FC<LearningPathIconProps> = ({
+  className = "",
+  imgClassName = "",
+}) => {
+  return (
+    <div
+      className={clsx(
+        "tw-rounded-full tw-shadow-card-rest dark:tw-shadow-card-rest-dark tw-w-3 tw-h-3 tw-bg-button-neutral dark:tw-bg-button-neutral-dark",
+        "tw-flex tw-justify-center tw-items-center tw-flex-none",
+        className
+      )}
+    >
+      <img
+        src={useBaseUrl("/img/learning-path-img.png")}
+        className={clsx(
+          "tw-rounded-full tw-w-[40px] tw-h-[40px] no-zoom-img",
+          imgClassName
+        )}
+      />
+    </div>
+  )
+}
+
+export default LearningPathIcon
@@ -0,0 +1,41 @@
+import Button from "@site/src/components/Button"
+import { useLearningPath } from "@site/src/providers/LearningPath"
+import React from "react"
+
+type LearningPathStepActionsType = {
+  onFinish?: () => void
+  onClose?: () => void
+} & React.AllHTMLAttributes<HTMLDivElement>
+
+const LearningPathStepActions: React.FC<LearningPathStepActionsType> = ({
+  onFinish,
+  onClose,
+}) => {
+  const { hasNextStep, nextStep, endPath } = useLearningPath()
+
+  const handleFinish = () => {
+    if (onFinish) {
+      onFinish()
+    } else {
+      endPath()
+    }
+  }
+
+  return (
+    <div className="tw-flex tw-gap-0.5 tw-p-1 tw-justify-end tw-items-center">
+      <Button onClick={onClose}>Close</Button>
+      {hasNextStep() && (
+        <Button onClick={nextStep} btnTypeClassName="btn-inverted">
+          Next
+        </Button>
+      )}
+      {!hasNextStep() && (
+        <Button onClick={handleFinish} btnTypeClassName="btn-inverted">
+          Finish
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export default LearningPathStepActions
@@ -0,0 +1,84 @@
+import { useLearningPath } from "@site/src/providers/LearningPath"
+import React from "react"
+import LearningPathStepActions from "./Actions"
+import clsx from "clsx"
+import IconCircleDottedLine from "@site/src/theme/Icon/CircleDottedLine"
+import IconCheckCircleSolid from "@site/src/theme/Icon/CheckCircleSolid"
+import IconCircleMiniSolid from "@site/src/theme/Icon/CircleMiniSolid"
+import Link from "@docusaurus/Link"
+
+type LearningPathStepsProps = {
+  onFinish?: () => void
+  onClose?: () => void
+}
+
+const LearningPathSteps: React.FC<LearningPathStepsProps> = ({ ...rest }) => {
+  const { path, currentStep, goToStep } = useLearningPath()
+
+  if (!path) {
+    return <></>
+  }
+
+  return (
+    <div>
+      {path.steps.map((step, index) => (
+        <div
+          className={clsx(
+            "tw-border-0 tw-border-b tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark",
+            "tw-relative tw-p-1"
+          )}
+          key={index}
+        >
+          <div className={clsx("tw-flex tw-items-center tw-gap-1")}>
+            <div className="tw-w-2 tw-flex-none tw-flex tw-items-center tw-justify-center">
+              {index === currentStep && (
+                <IconCircleDottedLine
+                  className="tw-shadow-active dark:tw-shadow-active-dark tw-rounded-full"
+                  iconColorClassName="tw-stroke-medusa-icon-interactive dark:tw-stroke-medusa-icon-interactive-dark"
+                />
+              )}
+              {index < currentStep && (
+                <IconCheckCircleSolid iconColorClassName="tw-fill-medusa-icon-interactive dark:tw-fill-medusa-icon-interactive-dark" />
+              )}
+              {index > currentStep && <IconCircleMiniSolid />}
+            </div>
+            <span
+              className={clsx(
+                "tw-text-label-regular-plus tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark"
+              )}
+            >
+              {step.title}
+            </span>
+          </div>
+          {index === currentStep && (
+            <div className={clsx("tw-flex tw-items-center tw-gap-1")}>
+              <div className="tw-w-2 tw-flex-none"></div>
+              <div
+                className={clsx(
+                  "tw-text-body-regular tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark tw-mt-1"
+                )}
+              >
+                {step.descriptionJSX ?? step.description}
+              </div>
+            </div>
+          )}
+          {index < currentStep && (
+            <Link
+              href={step.path}
+              className={clsx(
+                "tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full"
+              )}
+              onClick={(e) => {
+                e.preventDefault()
+                goToStep(index)
+              }}
+            />
+          )}
+        </div>
+      ))}
+      <LearningPathStepActions {...rest} />
+    </div>
+  )
+}
+
+export default LearningPathSteps
@@ -0,0 +1,96 @@
+import { useLearningPath } from "@site/src/providers/LearningPath"
+import { useNotifications } from "@site/src/providers/NotificationProvider"
+import { getLearningPath } from "@site/src/utils/learning-paths"
+import clsx from "clsx"
+import React from "react"
+import useBaseUrl from "@docusaurus/useBaseUrl"
+import Button from "../Button"
+import IconCircleMiniSolid from "@site/src/theme/Icon/CircleMiniSolid"
+import LearningPathIcon from "./Icon"
+
+type LearningPathProps = {
+  pathName: string
+  className?: string
+} & React.AllHTMLAttributes<HTMLDivElement>
+
+const LearningPath: React.FC<LearningPathProps> = ({
+  pathName,
+  className = "",
+}) => {
+  const path = getLearningPath(pathName)
+  if (!path) {
+    throw new Error("Learning path does not exist.")
+  }
+  const { startPath, path: currentPath } = useLearningPath()
+  const notificationContext = useNotifications()
+
+  const handleClick = () => {
+    if (notificationContext && currentPath?.notificationId) {
+      notificationContext.removeNotification(currentPath.notificationId)
+    }
+    startPath(path)
+  }
+
+  return (
+    <div
+      className={clsx(
+        "tw-rounded tw-shadow-card-rest dark:tw-shadow-card-rest-dark tw-bg-docs-bg-surface dark:tw-bg-docs-bg-surface-dark tw-mt-1.5 tw-mb-4",
+        className
+      )}
+    >
+      <div
+        className={clsx(
+          "tw-flex tw-items-center tw-gap-1 tw-p-1 tw-border-0 tw-border-b tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark"
+        )}
+      >
+        <LearningPathIcon />
+        <div className={clsx("tw-flex-auto")}>
+          <span
+            className={clsx(
+              "tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark tw-text-label-large-plus tw-block"
+            )}
+          >
+            {path.label}
+          </span>
+          {path.description && (
+            <span
+              className={clsx(
+                "tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark tw-text-label-regular tw-mt-[4px] tw-inline-block"
+              )}
+            >
+              {path.description}
+            </span>
+          )}
+        </div>
+        <Button onClick={handleClick} className={clsx("tw-flex-initial")}>
+          Start Path
+        </Button>
+      </div>
+      {path.steps.map((step, index) => (
+        <div
+          className={clsx(
+            "tw-flex tw-items-center tw-p-1 tw-gap-1",
+            index !== path.steps.length - 1 &&
+              "tw-border-0 tw-border-b tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark"
+          )}
+          key={index}
+        >
+          <div
+            className={clsx("tw-w-3 tw-flex tw-items-center tw-justify-center")}
+          >
+            <IconCircleMiniSolid iconColorClassName="tw-stroke-medusa-icon-muted dark:tw-stroke-medusa-icon-muted-dark" />
+          </div>
+          <span
+            className={clsx(
+              "tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark tw-text-label-regular-plus"
+            )}
+          >
+            {step.title}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default LearningPath
@@ -0,0 +1,61 @@
+import {
+  NotificationItemType,
+  useNotifications,
+} from "@site/src/providers/NotificationProvider"
+import React from "react"
+import NotificationItem from "../Item"
+import { CSSTransition, TransitionGroup } from "react-transition-group"
+import clsx from "clsx"
+
+const NotificationContainer = () => {
+  const { notifications, removeNotification } = useNotifications()
+
+  const handleClose = (notification: NotificationItemType) => {
+    notification.onClose?.()
+    removeNotification(notification.id)
+  }
+
+  const renderFilteredNotifications = (
+    condition: (notificaiton: NotificationItemType) => boolean,
+    className?: string
+  ) => {
+    return (
+      <TransitionGroup className={className}>
+        {notifications.filter(condition).map((notification) => (
+          <CSSTransition
+            key={notification.id}
+            timeout={200}
+            classNames={{
+              enter: "animate__animated animate__slideInRight animate__fastest",
+              exit: "animate__animated animate__slideOutRight animate__fastest",
+            }}
+          >
+            <NotificationItem
+              {...notification}
+              onClose={() => handleClose(notification)}
+              className={clsx(
+                notification.className,
+                "!tw-relative !tw-top-0 !tw-bottom-0 !tw-right-0"
+              )}
+            />
+          </CSSTransition>
+        ))}
+      </TransitionGroup>
+    )
+  }
+
+  return (
+    <>
+      {renderFilteredNotifications(
+        (notification) => notification.placement === "top",
+        "tw-flex tw-fixed tw-flex-col tw-gap-0.5 md:tw-right-1 tw-right-0 md:tw-top-1 tw-top-0 tw-z-[400] md:tw-w-auto tw-w-full"
+      )}
+      {renderFilteredNotifications(
+        (notification) => notification.placement !== "top",
+        "tw-flex tw-flex-col tw-gap-0.5 tw-fixed md:tw-right-1 tw-right-0 md:tw-bottom-1 tw-bottom-0 tw-z-[400] md:tw-w-auto tw-w-full"
+      )}
+    </>
+  )
+}
+
+export default NotificationContainer
@@ -0,0 +1,90 @@
+import React from "react"
+import { NotificationItemProps } from "../.."
+import clsx from "clsx"
+import IconInformationCircleSolid from "@site/src/theme/Icon/InformationCircleSolid"
+import IconXCircleSolid from "@site/src/theme/Icon/XCircleSolid"
+import IconExclamationCircleSolid from "@site/src/theme/Icon/ExclamationCircleSolid"
+import IconCheckCircleSolid from "@site/src/theme/Icon/CheckCircleSolid"
+import Button from "@site/src/components/Button"
+
+type NotificationItemLayoutDefaultProps = NotificationItemProps & {
+  handleClose: () => void
+}
+
+const NotificationItemLayoutDefault: React.FC<
+  NotificationItemLayoutDefaultProps
+> = ({
+  type = "info",
+  title = "",
+  text = "",
+  children,
+  isClosable = true,
+  handleClose,
+  CustomIcon,
+}) => {
+  return (
+    <>
+      <div className={clsx("tw-flex tw-gap-1 tw-p-1")}>
+        {type !== "none" && (
+          <div
+            className={clsx(
+              type !== "custom" &&
+                "tw-w-2 tw-flex tw-justify-center tw-items-center"
+            )}
+          >
+            {type === "info" && (
+              <IconInformationCircleSolid iconColorClassName="tw-fill-medusa-support-info dark:tw-fill-medusa-support-info-dark" />
+            )}
+            {type === "error" && (
+              <IconXCircleSolid iconColorClassName="tw-fill-medusa-tag-red-icon dark:tw-fill-medusa-tag-red-icon-dark" />
+            )}
+            {type === "warning" && (
+              <IconExclamationCircleSolid iconColorClassName="tw-fill-medusa-tag-orange-icon dark:tw-fill-medusa-tag-orange-icon-dark" />
+            )}
+            {type === "success" && (
+              <IconCheckCircleSolid iconColorClassName="tw-fill-medusa-tag-green-icon dark:tw-fill-medusa-tag-green-icon-dark" />
+            )}
+            {type === "custom" && CustomIcon}
+          </div>
+        )}
+        <span
+          className={clsx(
+            "tw-text-label-regular-plus",
+            "tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark"
+          )}
+        >
+          {title}
+        </span>
+      </div>
+      {(text || children) && (
+        <div
+          className={clsx(
+            "tw-flex tw-pt-0 tw-pr-1 tw-pb-1.5 tw-pl-1 tw-gap-1",
+            "tw-border-0 tw-border-b tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark"
+          )}
+        >
+          <div className="tw-w-2 tw-flex-none"></div>
+          <div className={clsx("tw-flex tw-flex-col", children && "tw-gap-1")}>
+            {text && (
+              <span
+                className={clsx(
+                  "tw-text-body-regular tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark"
+                )}
+              >
+                {text}
+              </span>
+            )}
+            {children}
+          </div>
+        </div>
+      )}
+      {isClosable && (
+        <div className={clsx("tw-p-1 tw-flex tw-justify-end tw-items-center")}>
+          <Button onClick={handleClose}>Close</Button>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default NotificationItemLayoutDefault
@@ -0,0 +1,63 @@
+import clsx from "clsx"
+import React, { Children, ReactElement, useEffect, useRef } from "react"
+import NotificationItemLayoutDefault from "./Layout/Default"
+
+export type NotificationItemProps = {
+  layout?: "default" | "empty"
+  type?: "info" | "error" | "warning" | "success" | "custom" | "none"
+  CustomIcon?: React.ReactNode
+  title?: string
+  text?: string
+  className?: string
+  children?: ReactElement
+  isClosable?: boolean
+  placement?: "top" | "bottom"
+  show?: boolean
+  setShow?: (value: boolean) => void
+  onClose?: () => void
+} & React.HTMLAttributes<HTMLDivElement>
+
+const Notification = ({
+  className = "",
+  placement = "bottom",
+  show = true,
+  layout = "default",
+  setShow,
+  onClose,
+  children,
+  ...rest
+}: NotificationItemProps) => {
+  const handleClose = () => {
+    setShow?.(false)
+    onClose?.()
+  }
+
+  return (
+    <div
+      className={clsx(
+        "md:tw-max-w-[320px] md:tw-w-[320px] tw-w-full tw-bg-medusa-bg-base dark:tw-bg-medusa-bg-base-dark tw-rounded",
+        "tw-shadow-flyout dark:tw-shadow-flyout-dark",
+        "tw-fixed md:tw-right-1 tw-left-0 tw-block tw-z-[400]",
+        placement === "bottom" && "md:tw-bottom-1 tw-bottom-0",
+        placement === "top" && "md:tw-top-1 tw-top-0",
+        "tw-opacity-100 tw-transition-opacity tw-duration-200 tw-ease-ease",
+        !show && "!tw-opacity-0",
+        className
+      )}
+    >
+      {layout === "default" && (
+        <NotificationItemLayoutDefault {...rest} handleClose={handleClose}>
+          {children}
+        </NotificationItemLayoutDefault>
+      )}
+      {layout === "empty" &&
+        Children.map(children, (child) =>
+          React.cloneElement(child, {
+            onClose: handleClose,
+          })
+        )}
+    </div>
+  )
+}
+
+export default Notification
@@ -0,0 +1,80 @@
+import { useUser } from "@site/src/providers/User"
+import IconStar from "@site/src/theme/Icon/Star"
+import IconStarSolid from "@site/src/theme/Icon/StarSolid"
+import clsx from "clsx"
+import React, { useRef, useState } from "react"
+
+type RatingProps = {
+  event?: string
+  className?: string
+  onRating?: () => void
+} & React.HTMLAttributes<HTMLDivElement>
+
+const Rating: React.FC<RatingProps> = ({
+  event = "rating",
+  className = "",
+  onRating,
+}) => {
+  const [rating, setRating] = useState(0)
+  const [hoverRating, setHoverRating] = useState(0)
+  const starElms = useRef<HTMLElement[]>([])
+  const starArr = Array.from(Array(5).keys())
+  const { track } = useUser()
+
+  const handleRating = (selectedRating: number) => {
+    if (rating) {
+      return
+    }
+    setHoverRating(0)
+    setRating(selectedRating)
+    for (let i = 0; i < selectedRating; i++) {
+      starElms.current[i].classList.add("animate__animated", "animate__tada")
+    }
+    track(
+      event,
+      {
+        rating: selectedRating,
+      },
+      () => onRating?.()
+    )
+  }
+
+  return (
+    <div className={clsx("tw-flex tw-gap-0.5", className)}>
+      {starArr.map((i) => {
+        const isSelected =
+          (rating !== 0 && rating - 1 >= i) ||
+          (hoverRating !== 0 && hoverRating - 1 >= i)
+        return (
+          <button
+            className="transparent-button"
+            ref={(element) => {
+              if (starElms.current.length - 1 < i) {
+                starElms.current.push(element)
+              }
+            }}
+            key={i}
+            onMouseOver={() => {
+              if (!rating) {
+                setHoverRating(i + 1)
+              }
+            }}
+            onMouseLeave={() => {
+              if (!rating) {
+                setHoverRating(0)
+              }
+            }}
+            onClick={() => handleRating(i + 1)}
+          >
+            {!isSelected && <IconStar />}
+            {isSelected && (
+              <IconStarSolid iconColorClassName="tw-fill-medusa-tag-orange-icon dark:tw-fill-medusa-tag-orange-icon-dark" />
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export default Rating
@@ -1,14 +0,0 @@
-import { createContext } from "react"
-
-type SidebarContextType = {
-  hasSidebar: boolean
-  hiddenSidebar: boolean
-  setHiddenSidebar: (value: boolean) => void
-  hiddenSidebarContainer: boolean
-  setHiddenSidebarContainer: (value: boolean) => void
-  floatingSidebar: boolean
-  setFloatingSidebar: (value: boolean) => void
-  onCollapse: () => void
-}
-
-export const SidebarContext = createContext<SidebarContextType | null>(null)
@@ -79,7 +79,7 @@ video {
 }

 [class*=codeLineNumber] {
-  @apply tw-text-medusa-text-placeholder !tw-pl-0;
+  @apply tw-text-medusa-code-text-muted !tw-pl-0;
 }

 .prism-code {
@@ -279,6 +279,6 @@ h1, h2, h3, h4, h5, h6 {
  @apply tw-bg-medusa-bg-highlight dark:tw-bg-medusa-bg-highlight-dark;
 }

-.prism-code *::selection {
+.prism-code *::selection, .code-header::selection {
  @apply tw-bg-medusa-code-text-highlight;
 }
@@ -88,7 +88,7 @@
  --rt-color-white: var(--ifm-color-content) !important;

  /* Footer */
-  --ifm-footer-color: theme(colors.medusa.text.placeholder.DEFAULT);
+  --ifm-footer-color: theme(colors.medusa.text.muted.DEFAULT);
  --ifm-footer-background-color: transparent;
  --ifm-footer-padding-horizontal: 0;
  --ifm-footer-link-color: var(--ifm-color-content);
@@ -99,12 +99,12 @@
  --docsearch-searchbox-shadow: none !important;
  --docsearch-modal-height: 472px !important;
  --docsearch-modal-background: theme(colors.medusa.bg.base.DEFAULT) !important;
-  --docsearch-modal-shadow: theme(boxShadow.overlay) !important;
+  --docsearch-modal-shadow: theme(boxShadow.modal) !important;
  --docsearch-container-background: theme(colors.medusa.bg.overlay.DEFAULT) !important;
  --docsearch-key-gradient: theme(colors.medusa.bg.component.DEFAULT) !important;
  --docsearch-muted-color: theme(colors.medusa.text.subtle.DEFAULT) !important;
  --docsearch-spacing: 12px theme(spacing[1.5]) !important;
-  --docsearch-highlight-color: theme(colors.medusa.text.placeholder.DEFAULT) !important;
+  --docsearch-highlight-color: theme(colors.medusa.text.muted.DEFAULT) !important;
  --docsearch-text-color: var(--ifm-color-primary) !important;
  --docsearch-hit-background: var(--docsearch-modal-background) !important;
  --docsearch-hit-height: auto !important;
@@ -154,17 +154,17 @@ html[data-theme="dark"] {
  --rt-color-dark: theme(colors.medusa.bg.base.dark) !important;

  /* Footer */
-  --ifm-footer-color: theme(colors.medusa.text.placeholder.dark);
+  --ifm-footer-color: theme(colors.medusa.text.muted.dark);

  /* Search */
  --docsearch-searchbox-background: theme(colors.medusa.bg.field.dark) !important;
  --docsearch-searchbox-focus-background: theme(colors.medusa.bg.field.hover.dark) !important;
  --docsearch-modal-background: theme(colors.medusa.bg.base.dark) !important;
-  --docsearch-modal-shadow: theme(boxShadow.overlay-dark) !important;
+  --docsearch-modal-shadow: theme(boxShadow.modal-dark) !important;
  --docsearch-container-background: theme(colors.medusa.bg.overlay.dark) !important;
  --docsearch-key-gradient: theme(colors.medusa.bg.component.dark) !important;
  --docsearch-muted-color: theme(colors.medusa.text.subtle.dark) !important;
-  --docsearch-highlight-color: theme(colors.medusa.text.placeholder.dark) !important;
+  --docsearch-highlight-color: theme(colors.medusa.text.muted.dark) !important;

  /* Tables */
  --ifm-table-border-color: theme(colors.medusa.border.base.dark);
@@ -188,4 +188,12 @@ html[data-theme="dark"] {
  :root {
    --docusaurus-announcement-bar-height: 30px;
  }
+}
+
+.alert {
+  --ifm-code-background: theme(colors.medusa.bg.subtle.DEFAULT) !important;
+}
+
+html[data-theme="dark"] .alert {
+  --ifm-code-background: theme(colors.medusa.bg.base.dark) !important;
 }
@@ -22,7 +22,7 @@

 .DocSearch-Input {
  @apply !tw-text-body-regular !tw-pl-1;
-  @apply placeholder:tw-text-medusa-text-placeholder dark:placeholder:tw-text-medusa-text-placeholder-dark;
+  @apply placeholder:tw-text-medusa-text-muted dark:placeholder:tw-text-medusa-text-muted-dark;
 }

 .DocSearch-Dropdown {
@@ -31,7 +31,7 @@
 }

 .DocSearch-Hit-source {
-  @apply !tw-m-0 !tw-text-label-small-plus tw-uppercase tw-text-medusa-text-placeholder dark:tw-text-medusa-text-placeholder-dark;
+  @apply !tw-m-0 !tw-text-label-small-plus tw-uppercase tw-text-medusa-text-muted dark:tw-text-medusa-text-muted-dark;
  @apply tw-border-0 tw-border-b tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark;
  @apply !tw-py-[10px] !tw-px-1.5;
 }
@@ -178,7 +178,7 @@ html[data-theme="dark"] .DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path {
 }

 .DocSearch-Button-Placeholder {
-  @apply tw-text-medusa-text-placeholder dark:tw-text-medusa-text-placeholder-dark;
+  @apply tw-text-medusa-text-muted dark:tw-text-medusa-text-muted-dark;
  @apply !tw-pl-0.5 !tw-text-label-small lg:!tw-block !tw-hidden;
 }

@@ -45,7 +45,7 @@


 .redocusaurus h5 + svg {
-  @apply tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark;
+  @apply tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark;
 }

 .redocusaurus h2 + div + div > div + div {
@@ -86,14 +86,14 @@
 }

 .redocusaurus .react-tabs__tab:not(.react-tabs__tab--selected) {
-  @apply !tw-bg-medusa-button-secondary dark:!tw-bg-medusa-button-secondary-dark;
+  @apply !tw-bg-medusa-button-neutral dark:!tw-bg-medusa-button-neutral-dark;
  @apply !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark;
  @apply !tw-text-medusa-text-base dark:!tw-text-medusa-text-base-dark;
 }

 .redocusaurus ul > li.react-tabs__tab--selected[aria-selected="true"]:not(.tab-error):not(.tab-success) {
-  @apply !tw-bg-medusa-button-primary dark:!tw-bg-medusa-button-primary-dark;
-  @apply !tw-border-medusa-button-primary dark:!tw-border-medusa-button-primary-dark;
+  @apply !tw-bg-medusa-button-brand dark:!tw-bg-medusa-button-brand-dark;
+  @apply !tw-border-medusa-button-brand dark:!tw-border-medusa-button-brand-dark;
  @apply !tw-text-medusa-text-on-color dark:!tw-text-medusa-text-on-color-dark;
 }

@@ -112,13 +112,13 @@
 }

 .redocusaurus .tab-error:not(.react-tabs__tab--selected) {
-  @apply !tw-bg-medusa-button-secondary dark:!tw-bg-medusa-button-secondary-dark;
+  @apply !tw-bg-medusa-button-neutral dark:!tw-bg-medusa-button-neutral-dark;
  @apply !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark;
  @apply !tw-text-medusa-support-error dark:!tw-text-medusa-support-error-dark;
 }

 .redocusaurus .tab-success:not(.react-tabs__tab--selected) {
-  @apply !tw-bg-medusa-button-secondary dark:!tw-bg-medusa-button-secondary-dark;
+  @apply !tw-bg-medusa-button-neutral dark:!tw-bg-medusa-button-neutral-dark;
  @apply !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark;
  @apply !tw-text-medusa-support-success dark:!tw-text-medusa-support-success-dark;
 }
@@ -139,12 +139,12 @@
 .redocusaurus [download] {
  @apply !tw-inline-flex tw-flex-row tw-justify-center tw-items-center;
  @apply !tw-py-[6px] !tw-px-[12px] !tw-rounded !tw-cursor-pointer;
-  @apply !tw-bg-medusa-button-secondary dark:!tw-bg-medusa-button-secondary-dark;
-  @apply hover:!tw-bg-medusa-button-secondary-hover dark:hover:!tw-bg-medusa-button-secondary-hover-dark hover:tw-no-underline;
+  @apply !tw-bg-medusa-button-neutral dark:!tw-bg-medusa-button-neutral-dark;
+  @apply hover:!tw-bg-medusa-button-neutral-hover dark:hover:!tw-bg-medusa-button-neutral-hover-dark hover:tw-no-underline;
  @apply !tw-border !tw-border-solid !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark;
  @apply !tw-text-label-small-plus !tw-text-medusa-text-base dark:!tw-text-medusa-text-base-dark;
  @apply hover:!tw-text-medusa-text-base dark:hover:!tw-text-medusa-text-base-dark;
-  @apply focus:!tw-shadow-button-focused dark:focus:!tw-shadow-button-focused-dark;
+  @apply focus:!tw-shadow-focus dark:focus:!tw-shadow-focus-dark;
 }

 .redocusaurus [role=menuitem] {
@@ -1,6 +1,6 @@
 .react-tooltip {
  @apply !tw-border !tw-border-solid !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark;
-  @apply !tw-rounded !tw-text-label-x-small-plus !tw-shadow-overlay dark:!tw-shadow-overlay-dark;
+  @apply !tw-rounded !tw-text-label-x-small-plus !tw-shadow-tooltip dark:!tw-shadow-tooltip-dark;
  @apply !tw-py-0.4 !tw-px-1 lg:tw-block tw-hidden;
 }

@@ -49,7 +49,7 @@
  }

  .sidebar-group-divider {
-    @apply tw-pb-[6px] tw-uppercase tw-text-medusa-text-placeholder dark:tw-text-medusa-text-placeholder-dark tw-text-label-x-small-plus;
+    @apply tw-pb-[6px] tw-uppercase tw-text-medusa-text-muted dark:tw-text-medusa-text-muted-dark tw-text-label-x-small-plus;
    @apply first:tw-pt-[6px] [&:not(:first-child)]:!tw-pt-1;
  }
  
@@ -98,7 +98,7 @@
  }

  .code-header {
-    @apply tw-py-[12px] tw-px-1 tw-bg-medusa-code-tabs-bg;
+    @apply tw-py-[12px] tw-px-1 tw-bg-medusa-code-tabs-bg tw-text-medusa-code-text-subtle;
    @apply tw-flex tw-justify-between tw-items-center;
    @apply tw-rounded-tl tw-rounded-tr tw-rounded-br-none tw-rounded-bl-none tw-border-b-0;
    @apply tw-border tw-border-solid tw-border-medusa-code-block-border tw-border-b-0;
@@ -117,21 +117,37 @@
    @apply tw-py-[6px] tw-px-[12px] tw-rounded tw-cursor-pointer;
    @apply tw-bg-button-neutral dark:tw-bg-button-neutral-dark;
    @apply hover:!tw-bg-no-image hover:tw-bg-medusa-button-neutral-hover dark:hover:tw-bg-medusa-button-neutral-hover-dark hover:tw-no-underline;
-    @apply active:!tw-bg-no-image active:tw-bg-medusa-button-neutral-pressed dark:active:tw-bg-medusa-button-neutral-pressed;
-    @apply focus:tw-shadow-neutral-button-focused dark:focus:tw-shadow-neutral-button-focused-dark;
+    @apply active:!tw-bg-no-image active:tw-bg-medusa-button-neutral-pressed dark:active:tw-bg-medusa-button-neutral-pressed-dark;
+    @apply focus:tw-shadow-focus dark:focus:tw-shadow-focus-dark;
    @apply disabled:!tw-bg-no-image disabled:tw-bg-medusa-button-disabled dark:disabled:tw-bg-medusa-button-disabled-dark;
    @apply tw-border tw-border-solid tw-border-medusa-border-neutral-buttons dark:tw-border-medusa-border-neutral-buttons-dark;
    @apply tw-text-label-small-plus tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark;
    @apply hover:tw-text-medusa-text-base dark:hover:tw-text-medusa-text-base-dark;
  }

+  .btn-inverted {
+    @apply tw-inline-flex tw-flex-row tw-justify-center tw-items-center;
+    @apply tw-py-[6px] tw-px-[12px] tw-rounded tw-cursor-pointer;
+    @apply tw-bg-button-inverted dark:tw-bg-button-inverted-dark;
+    @apply hover:!tw-bg-no-image hover:tw-bg-medusa-button-inverted-hover dark:hover:tw-bg-medusa-button-inverted-hover-dark hover:tw-no-underline;
+    @apply active:!tw-bg-no-image active:tw-bg-medusa-button-inverted-pressed dark:active:tw-bg-medusa-button-inverted-pressed-dark;
+    @apply focus:tw-shadow-focus dark:focus:tw-shadow-focus-dark;
+    @apply disabled:!tw-bg-no-image disabled:tw-bg-medusa-button-disabled dark:disabled:tw-bg-medusa-button-disabled-dark;
+    @apply tw-text-label-small-plus tw-text-medusa-text-on-color dark:tw-text-medusa-text-on-inverted-dark;
+    @apply tw-border-transparent tw-border;
+  }
+
  .navbar-action-icon-item {
    @apply tw-bg-button-neutral dark:tw-bg-button-neutral-dark hover:!tw-bg-no-image active:!tw-bg-no-image hover:tw-bg-medusa-button-neutral-hover dark:hover:tw-bg-medusa-button-neutral-hover-dark;
    @apply active:tw-bg-medusa-button-neutral-pressed dark:active:tw-bg-medusa-button-neutral-pressed-dark;
-    @apply focus:tw-shadow-neutral-button-focused dark:focus:tw-shadow-neutral-button-focused-dark;
+    @apply focus:tw-shadow-focus dark:focus:tw-shadow-focus-dark;
    @apply tw-border tw-border-solid tw-border-medusa-border-neutral-buttons dark:tw-border-medusa-border-neutral-buttons-dark tw-rounded;
    @apply tw-w-2 tw-h-2 tw-flex tw-justify-center tw-items-center tw-cursor-pointer;
  }
+
+  .transparent-button {
+    @apply tw-bg-transparent tw-border-0 tw-text-inherit tw-cursor-pointer tw-p-0;
+  }
 }

@layer utilities {
@@ -0,0 +1,94 @@
+import React, { useEffect } from "react"
+import { useLearningPath } from "../providers/LearningPath"
+import { useNotifications } from "../providers/NotificationProvider"
+import LearningPathSteps from "../components/LearningPath/Steps"
+import LearningPathFinish from "../components/LearningPath/Finish"
+import LearningPathIcon from "../components/LearningPath/Icon"
+
+const useCurrentLearningPath = () => {
+  const { path, currentStep, updatePath, endPath } = useLearningPath()
+  const step = path?.steps[currentStep]
+  const {
+    addNotification,
+    generateId,
+    removeNotification,
+    updateNotification,
+  } = useNotifications()
+
+  // used when a notification closed (finished or not)
+  const handleClose = (notificationId: string, shouldEndPath = true) => {
+    if (shouldEndPath) {
+      setTimeout(() => {
+        endPath()
+      }, 500)
+    }
+    removeNotification(notificationId)
+  }
+
+  // used when the learning path is completely finished
+  // shows the finish step, if the path has any
+  const handleFinish = (notificationId: string) => {
+    if (path.finish) {
+      updateNotification(notificationId, {
+        title: path.finish.step.title,
+        text: path.finish.step.description,
+        type: "custom",
+        layout: "default",
+        CustomIcon: (
+          <LearningPathIcon
+            className="!tw-w-2 !tw-h-2"
+            imgClassName="!tw-w-1.5 !tw-h-1.5"
+          />
+        ),
+        children: (
+          <LearningPathFinish
+            {...path.finish}
+            onRating={() =>
+              setTimeout(() => {
+                handleClose(notificationId, false)
+              }, 1500)
+            }
+          />
+        ),
+      })
+      endPath()
+    } else {
+      handleClose(notificationId)
+    }
+  }
+
+  const LearningStep = (notificationId: string) => {
+    return <LearningPathSteps onFinish={() => handleFinish(notificationId)} />
+  }
+
+  // create a notification when a path is initialized
+  useEffect(() => {
+    if (path && !path.notificationId) {
+      const id = generateId()
+
+      addNotification({
+        title: path.label,
+        text: step?.description,
+        onClose: () => handleClose(id),
+        layout: "empty",
+        id,
+        children: LearningStep(id),
+      })
+      updatePath({
+        notificationId: id,
+      })
+    }
+  }, [path])
+
+  // update an existing notification when the step changes
+  useEffect(() => {
+    if (path && path.notificationId && step) {
+      updateNotification(path.notificationId, {
+        text: step?.description,
+        children: LearningStep(path.notificationId),
+      })
+    }
+  }, [step])
+}
+
+export default useCurrentLearningPath
@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from "react"
+import { useQueryStringValue } from "@docusaurus/theme-common/internal"
+import { useNotifications } from "../providers/NotificationProvider"
+import Rating from "../components/Rating"
+import { useUser } from "../providers/User"
+
+const useOnboarding = () => {
+  const isOnboarding = useQueryStringValue("ref") === "onboarding"
+  const [showNotification, setShowNotification] = useState(isOnboarding)
+  const { addNotification, removeNotification, generateId } = useNotifications()
+  const { track } = useUser()
+
+  useEffect(() => {
+    if (isOnboarding) {
+      track("finished_onboarding")
+      const id = generateId()
+      addNotification({
+        title: "Thank you for installing Medusa!",
+        text: "Please rate your onboarding experience",
+        type: "success",
+        show: showNotification,
+        setShow: setShowNotification,
+        id,
+        children: (
+          <Rating
+            event="rating_onboarding"
+            onRating={() => {
+              setTimeout(() => removeNotification(id), 1500)
+            }}
+          />
+        ),
+      })
+    }
+  }, [])
+}
+
+export default useOnboarding
@@ -0,0 +1,256 @@
+import useIsBrowser from "@docusaurus/useIsBrowser"
+import { getLearningPath } from "@site/src/utils/learning-paths"
+import React, { createContext, useContext, useEffect, useState } from "react"
+import { useHistory } from "@docusaurus/router"
+import { LearningPathFinishType } from "@site/src/components/LearningPath/Finish"
+import { useUser } from "../User"
+
+export type LearningPathType = {
+  name: string
+  label: string
+  description?: string
+  steps: LearningPathStepType[]
+  finish?: LearningPathFinishType
+  notificationId?: string
+}
+
+export type LearningPathStepType = {
+  title?: string
+  description?: string
+  descriptionJSX?: JSX.Element
+  path?: string
+}
+
+export type LearningPathContextType = {
+  path?: LearningPathType
+  setPath: (value: LearningPathType) => void
+  currentStep: number
+  setCurrentStep: (value: number) => void
+  startPath: (path: LearningPathType) => void
+  updatePath: (data: Pick<LearningPathType, "notificationId">) => void
+  endPath: () => void
+  nextStep: () => void
+  hasNextStep: () => boolean
+  previousStep: () => void
+  hasPreviousStep: () => boolean
+  goToStep: (stepIndex: number) => void
+  isCurrentPath: () => boolean
+  goToCurrentPath: () => void
+}
+
+type LearningPathProviderProps = {
+  children?: React.ReactNode
+}
+
+const LearningPathContext = createContext<LearningPathContextType | null>(null)
+
+const LearningPathProvider: React.FC<LearningPathProviderProps> = ({
+  children,
+}) => {
+  const [path, setPath] = useState<LearningPathType | null>(null)
+  const [currentStep, setCurrentStep] = useState(-1)
+  const isBrowser = useIsBrowser()
+  const history = useHistory()
+  const { track } = useUser()
+
+  const startPath = (path: LearningPathType) => {
+    setPath(path)
+    setCurrentStep(-1)
+    if (isBrowser) {
+      localStorage.setItem(
+        "learning-path",
+        JSON.stringify({
+          pathName: path.name,
+          currentStep: -1,
+        })
+      )
+    }
+
+    track(`learning_path_${path.name}`, {
+      url: history.location.pathname,
+      state: `start`,
+    })
+  }
+
+  useEffect(() => {
+    if (path && currentStep === -1) {
+      nextStep()
+    }
+  }, [path])
+
+  const endPath = () => {
+    const didFinish = currentStep === path.steps.length - 1
+    const reachedIndex = currentStep === -1 ? 0 : currentStep
+    track(`learning_path_${path.name}`, {
+      url: history.location.pathname,
+      state: !didFinish ? `closed` : `end`,
+      reachedStep:
+        path.steps[reachedIndex]?.title ||
+        path.steps[reachedIndex]?.description ||
+        path.steps[reachedIndex]?.descriptionJSX ||
+        reachedIndex,
+    })
+    setPath(null)
+    setCurrentStep(-1)
+    if (isBrowser) {
+      localStorage.removeItem("learning-path")
+    }
+  }
+
+  const hasNextStep = () => currentStep !== path?.steps.length - 1
+
+  const nextStep = () => {
+    if (!path || !hasNextStep()) {
+      return
+    }
+    const nextStepIndex = currentStep + 1
+    setCurrentStep(nextStepIndex)
+    const newPath = path.steps[nextStepIndex].path
+    if (isBrowser) {
+      localStorage.setItem(
+        "learning-path",
+        JSON.stringify({
+          pathName: path.name,
+          currentStep: nextStepIndex,
+        })
+      )
+    }
+    if (history.location.pathname !== newPath) {
+      history.push(newPath)
+    }
+  }
+
+  const hasPreviousStep = () => currentStep > 0
+
+  const previousStep = () => {
+    if (!path || !hasPreviousStep()) {
+      return
+    }
+
+    const previousStepIndex = currentStep - 1
+    setCurrentStep(previousStepIndex)
+    const newPath = path.steps[previousStepIndex].path
+    if (isBrowser) {
+      localStorage.setItem(
+        "learning-path",
+        JSON.stringify({
+          pathName: path.name,
+          currentStep: previousStepIndex,
+        })
+      )
+    }
+    if (history.location.pathname !== newPath) {
+      history.push(newPath)
+    }
+  }
+
+  const goToStep = (stepIndex: number) => {
+    if (!path || stepIndex >= path.steps.length) {
+      return
+    }
+
+    setCurrentStep(stepIndex)
+    const newPath = path.steps[stepIndex].path
+    if (isBrowser) {
+      localStorage.setItem(
+        "learning-path",
+        JSON.stringify({
+          pathName: path.name,
+          currentStep: stepIndex,
+        })
+      )
+    }
+    if (history.location.pathname !== newPath) {
+      history.push(newPath)
+    }
+  }
+
+  const isCurrentPath = () => {
+    if (!path || currentStep === -1) {
+      return false
+    }
+
+    return history.location.pathname === path.steps[currentStep].path
+  }
+
+  const goToCurrentPath = () => {
+    if (!path || currentStep === -1) {
+      return
+    }
+
+    history.push(path.steps[currentStep].path)
+  }
+
+  const updatePath = (data: Pick<LearningPathType, "notificationId">) => {
+    setPath({
+      ...path,
+      ...data,
+    })
+  }
+
+  const initPath = () => {
+    if (isBrowser) {
+      // give query parameters higher precedence over local storage
+      const queryPathName = new URLSearchParams(history.location.search).get(
+        "path"
+      )
+      const queryPath = getLearningPath(queryPathName)
+      if (queryPath) {
+        startPath(queryPath)
+      } else {
+        const storedPath = localStorage.getItem("learning-path")
+        if (storedPath) {
+          const storedPathParsed = JSON.parse(storedPath)
+          const currentPath = getLearningPath(storedPathParsed?.pathName)
+          if (currentPath) {
+            setPath(currentPath)
+            setCurrentStep(storedPathParsed?.currentStep || 0)
+          }
+        }
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (isBrowser && !path) {
+      initPath()
+    }
+  }, [isBrowser])
+
+  return (
+    <LearningPathContext.Provider
+      value={{
+        path,
+        setPath,
+        currentStep,
+        setCurrentStep,
+        startPath,
+        updatePath,
+        endPath,
+        nextStep,
+        hasNextStep,
+        previousStep,
+        hasPreviousStep,
+        goToStep,
+        isCurrentPath,
+        goToCurrentPath,
+      }}
+    >
+      {children}
+    </LearningPathContext.Provider>
+  )
+}
+
+export default LearningPathProvider
+
+export const useLearningPath = () => {
+  const context = useContext(LearningPathContext)
+
+  if (!context) {
+    throw new Error(
+      "useLearningPath must be used within a LearningPathProvider"
+    )
+  }
+
+  return context
+}
@@ -0,0 +1,134 @@
+import React, { createContext, useContext, useReducer } from "react"
+import { NotificationItemProps } from "@site/src/components/Notification/Item"
+import { v4 as uuid4 } from "uuid"
+import NotificationContainer from "@site/src/components/Notification/Container"
+
+export type NotificationItemType = {
+  id?: string
+} & NotificationItemProps
+
+type NotificationContextType = {
+  notifications: NotificationItemType[]
+  addNotification: (value: NotificationItemType) => void
+  generateId: () => string
+  removeNotification: (id: string) => void
+  updateNotification: (
+    id: string,
+    updatedData: Partial<Omit<NotificationItemType, "id">>
+  ) => void
+}
+
+type NotificationProviderProps = {
+  children?: React.ReactNode
+}
+
+enum NotificationReducerActionTypes {
+  ADD = "add",
+  REMOVE = "remove",
+  UPDATE = "update",
+}
+
+type NotificationReducerAction =
+  | {
+      type: NotificationReducerActionTypes.ADD
+      notification: NotificationItemType
+    }
+  | {
+      type: NotificationReducerActionTypes.REMOVE
+      id: string
+    }
+  | {
+      type: NotificationReducerActionTypes.UPDATE
+      id: string
+      updatedData: Partial<Omit<NotificationItemType, "id">>
+    }
+
+const notificationReducer = (
+  state: NotificationItemType[],
+  action: NotificationReducerAction
+) => {
+  switch (action.type) {
+    case NotificationReducerActionTypes.ADD:
+      return [...state, action.notification]
+    case NotificationReducerActionTypes.REMOVE:
+      return state.filter((notification) => notification.id !== action.id)
+    case NotificationReducerActionTypes.UPDATE:
+      return state.map((notification) => {
+        if (notification.id === action.id) {
+          return {
+            ...notification,
+            ...action.updatedData,
+          }
+        }
+
+        return notification
+      })
+    default:
+      return state
+  }
+}
+
+const NotificationContext = createContext<NotificationContextType | null>(null)
+
+const NotificationProvider: React.FC<NotificationProviderProps> = ({
+  children,
+}) => {
+  const [notifications, dispatch] = useReducer(notificationReducer, [])
+
+  const generateId = () => uuid4()
+
+  const addNotification = (notification: NotificationItemType) => {
+    if (!notification.id) {
+      notification.id = generateId()
+    }
+    dispatch({
+      type: NotificationReducerActionTypes.ADD,
+      notification,
+    })
+  }
+
+  const updateNotification = (
+    id: string,
+    updatedData: Partial<Omit<NotificationItemType, "id">>
+  ) => {
+    dispatch({
+      type: NotificationReducerActionTypes.UPDATE,
+      id,
+      updatedData,
+    })
+  }
+
+  const removeNotification = (id: string) => {
+    dispatch({
+      type: NotificationReducerActionTypes.REMOVE,
+      id,
+    })
+  }
+
+  return (
+    <NotificationContext.Provider
+      value={{
+        notifications,
+        addNotification,
+        generateId,
+        removeNotification,
+        updateNotification,
+      }}
+    >
+      {children}
+      <NotificationContainer />
+    </NotificationContext.Provider>
+  )
+}
+
+export default NotificationProvider
+
+export const useNotifications = () => {
+  const context = useContext(NotificationContext)
+
+  if (!context) {
+    console.warn("useNotifications must be used within a NotificationProvider")
+  }
+
+  return context
+}
@@ -0,0 +1,90 @@
+import useIsBrowser from "@docusaurus/useIsBrowser"
+import React, { createContext, useContext, useEffect, useState } from "react"
+import uuid from "react-uuid"
+
+type UserContextType = {
+  id: string
+  track: (
+    event: string,
+    options?: Record<string, any>,
+    callback?: () => void
+  ) => void
+}
+
+const UserContext = createContext<UserContextType | null>(null)
+
+type UserProviderProps = {
+  children?: React.ReactNode
+}
+
+const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
+  const [id, setId] = useState<string>("")
+  const isBrowser = useIsBrowser()
+
+  const initId = () => {
+    if (!id.length) {
+      if (isBrowser) {
+        const storedId = localStorage.getItem("ajs_anonymous_id")
+        if (storedId) {
+          setId(storedId)
+        } else {
+          const generatedId = uuid()
+          localStorage.setItem("ajs_anonymous_id", generatedId)
+          setId(generatedId)
+        }
+      }
+    }
+  }
+
+  const track = (
+    event: string,
+    options?: Record<string, any>,
+    callback?: () => void
+  ) => {
+    if (isBrowser) {
+      if (window.analytics) {
+        window.analytics.track(
+          event,
+          {
+            ...options,
+            uuid: id,
+            anonymousId: id,
+          },
+          callback
+        )
+      } else if (callback) {
+        console.warn(
+          "Segment is either not installed or not configured. Simulating success..."
+        )
+        callback()
+      }
+    }
+  }
+
+  useEffect(() => {
+    initId()
+  }, [isBrowser])
+
+  return (
+    <UserContext.Provider
+      value={{
+        id,
+        track,
+      }}
+    >
+      {children}
+    </UserContext.Provider>
+  )
+}
+
+export default UserProvider
+
+export const useUser = () => {
+  const context = useContext(UserContext)
+
+  if (!context) {
+    throw new Error("useUser must be used within a UserProvider")
+  }
+
+  return context
+}
@@ -2,68 +2,34 @@ import React, { type ReactNode } from "react"
 import clsx from "clsx"
 import Translate from "@docusaurus/Translate"
 import type { Props } from "@theme/Admonition"
+import IconInformationCircleSolid from "../Icon/InformationCircleSolid"
+import IconLightBulbSolid from "../Icon/LightBulbSolid"
+import IconExclamationCircleSolid from "../Icon/ExclamationCircleSolid"

 function NoteIcon() {
  return (
-    <svg
-      width={20}
-      height={20}
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
+    <IconInformationCircleSolid
      className="tw-inline-block tw-mr-[2px]"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM11 6C11 6.26522 10.8946 6.51957 10.7071 6.70711C10.5196 6.89464 10.2652 7 10 7C9.73478 7 9.48043 6.89464 9.29289 6.70711C9.10536 6.51957 9 6.26522 9 6C9 5.73478 9.10536 5.48043 9.29289 5.29289C9.48043 5.10536 9.73478 5 10 5C10.2652 5 10.5196 5.10536 10.7071 5.29289C10.8946 5.48043 11 5.73478 11 6ZM9 9C8.80109 9 8.61032 9.07902 8.46967 9.21967C8.32902 9.36032 8.25 9.55109 8.25 9.75C8.25 9.94891 8.32902 10.1397 8.46967 10.2803C8.61032 10.421 8.80109 10.5 9 10.5H9.253C9.29041 10.5 9.32734 10.5084 9.36106 10.5246C9.39479 10.5408 9.42445 10.5643 9.44787 10.5935C9.47128 10.6227 9.48785 10.6567 9.49636 10.6932C9.50486 10.7296 9.50508 10.7675 9.497 10.804L9.038 12.87C8.98108 13.1259 8.98237 13.3913 9.04179 13.6466C9.10121 13.902 9.21723 14.1407 9.38129 14.3452C9.54535 14.5496 9.75325 14.7146 9.98963 14.828C10.226 14.9413 10.4848 15.0001 10.747 15H11C11.1989 15 11.3897 14.921 11.5303 14.7803C11.671 14.6397 11.75 14.4489 11.75 14.25C11.75 14.0511 11.671 13.8603 11.5303 13.7197C11.3897 13.579 11.1989 13.5 11 13.5H10.747C10.7096 13.5 10.6727 13.4916 10.6389 13.4754C10.6052 13.4592 10.5755 13.4357 10.5521 13.4065C10.5287 13.3773 10.5121 13.3433 10.5036 13.3068C10.4951 13.2704 10.4949 13.2325 10.503 13.196L10.962 11.13C11.0189 10.8741 11.0176 10.6087 10.9582 10.3534C10.8988 10.098 10.7828 9.8593 10.6187 9.65483C10.4547 9.45036 10.2468 9.28536 10.0104 9.17201C9.77398 9.05867 9.51515 8.99989 9.253 9H9Z"
-        className="tw-fill-medusa-support-info dark:tw-fill-medusa-support-info-dark"
-      />
-    </svg>
+      iconColorClassName="tw-fill-medusa-support-info dark:tw-fill-medusa-support-info-dark"
+    />
  )
 }

 function TipIcon() {
  return (
-    <svg
-      width={20}
-      height={20}
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
+    <IconLightBulbSolid
      className="tw-inline-block tw-mr-[2px]"
-    >
-      <path
-        d="M10.0002 1.81238C8.6789 1.81208 7.39444 2.24761 6.34586 3.05146C5.29727 3.85532 4.54312 4.9826 4.20028 6.2586C3.85744 7.5346 3.94507 8.88806 4.44958 10.1092C4.95409 11.3303 5.84731 12.351 6.99079 13.0129C7.49005 13.3026 7.80226 13.7465 7.81609 14.1941C7.81991 14.314 7.86311 14.4293 7.93901 14.5221C8.01492 14.615 8.1193 14.6803 8.23602 14.7079C8.4922 14.7683 8.75274 14.8156 9.01766 14.8498C9.25273 14.8797 9.45432 14.6912 9.45432 14.4539V11.0617C9.22435 11.0364 8.99647 10.9948 8.77239 10.9373C8.70296 10.9194 8.63773 10.888 8.58042 10.8449C8.52311 10.8019 8.47485 10.7479 8.43839 10.6862C8.40193 10.6244 8.37798 10.5561 8.36792 10.4851C8.35786 10.4142 8.36189 10.3419 8.37976 10.2724C8.39763 10.203 8.429 10.1378 8.47209 10.0805C8.51517 10.0232 8.56912 9.9749 8.63085 9.93844C8.69259 9.90198 8.7609 9.87804 8.83189 9.86798C8.90288 9.85792 8.97515 9.86194 9.04458 9.87981C9.67139 10.0414 10.3289 10.0414 10.9557 9.87981C11.0259 9.8596 11.0993 9.85366 11.1718 9.86235C11.2443 9.87103 11.3143 9.89416 11.3776 9.93037C11.441 9.96658 11.4965 10.0151 11.5408 10.0731C11.585 10.1312 11.6172 10.1975 11.6354 10.2682C11.6536 10.3388 11.6575 10.4124 11.6468 10.4846C11.636 10.5568 11.6109 10.6261 11.5729 10.6885C11.5349 10.7508 11.4848 10.8048 11.4255 10.8474C11.3663 10.8901 11.2991 10.9204 11.2279 10.9365C11.0039 10.9944 10.776 11.0362 10.546 11.0617V14.4532C10.546 14.6912 10.7476 14.8797 10.9827 14.8498C11.2476 14.8156 11.5081 14.7683 11.7643 14.7079C11.881 14.6803 11.9854 14.615 12.0613 14.5221C12.1372 14.4293 12.1804 14.314 12.1842 14.1941C12.1988 13.7465 12.5103 13.3026 13.0095 13.0129C14.153 12.351 15.0462 11.3303 15.5507 10.1092C16.0552 8.88806 16.1429 7.5346 15.8 6.2586C15.4572 4.9826 14.703 3.85532 13.6545 3.05146C12.6059 2.24761 11.3214 1.81208 10.0002 1.81238Z"
-        className="tw-fill-medusa-support-warning dark:tw-fill-medusa-support-warning-dark"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.82589 15.7493C7.83925 15.6788 7.86637 15.6117 7.90568 15.5517C7.94499 15.4918 7.99573 15.4401 8.05501 15.3998C8.11428 15.3594 8.18092 15.3312 8.25112 15.3166C8.32132 15.302 8.39371 15.3014 8.46415 15.3148C9.47884 15.5073 10.5207 15.5073 11.5354 15.3148C11.6067 15.2991 11.6804 15.2978 11.7522 15.3111C11.824 15.3244 11.8923 15.352 11.9533 15.3922C12.0142 15.4324 12.0665 15.4844 12.107 15.5452C12.1474 15.6059 12.1753 15.6742 12.189 15.7459C12.2026 15.8176 12.2017 15.8914 12.1863 15.9627C12.171 16.0341 12.1414 16.1017 12.0995 16.1614C12.0576 16.2212 12.0041 16.2719 11.9422 16.3106C11.8803 16.3493 11.8112 16.3752 11.7392 16.3868C10.5898 16.6049 9.40971 16.6049 8.26037 16.3868C8.11825 16.3598 7.99266 16.2775 7.91119 16.1579C7.82973 16.0384 7.79904 15.8914 7.82589 15.7493ZM8.36517 17.5279C8.37262 17.4566 8.39404 17.3875 8.42821 17.3245C8.46238 17.2615 8.50863 17.2058 8.56432 17.1606C8.62001 17.1155 8.68404 17.0818 8.75277 17.0614C8.82149 17.041 8.89357 17.0343 8.96486 17.0418C9.65293 17.1137 10.3466 17.1137 11.0347 17.0418C11.1787 17.0267 11.3227 17.0695 11.4352 17.1607C11.5477 17.2518 11.6193 17.384 11.6344 17.5279C11.6494 17.6719 11.6067 17.816 11.5155 17.9285C11.4243 18.0409 11.2922 18.1126 11.1482 18.1276C10.3847 18.2076 9.61487 18.2076 8.85133 18.1276C8.78003 18.1202 8.7109 18.0988 8.64787 18.0646C8.58485 18.0304 8.52918 17.9842 8.48404 17.9285C8.43889 17.8728 8.40516 17.8088 8.38476 17.74C8.36437 17.6713 8.35771 17.5992 8.36517 17.5279Z"
-        className="tw-fill-medusa-support-warning dark:tw-fill-medusa-support-warning-dark"
-      />
-    </svg>
+      iconColorClassName="tw-fill-medusa-support-warning dark:tw-fill-medusa-support-warning-dark"
+    />
  )
 }

 function DangerIcon() {
  return (
-    <svg
-      width={20}
-      height={20}
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
+    <IconExclamationCircleSolid
      className="tw-inline-block tw-mr-[2px]"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM10 5C10.1989 5 10.3897 5.07902 10.5303 5.21967C10.671 5.36032 10.75 5.55109 10.75 5.75V10.25C10.75 10.4489 10.671 10.6397 10.5303 10.7803C10.3897 10.921 10.1989 11 10 11C9.80109 11 9.61032 10.921 9.46967 10.7803C9.32902 10.6397 9.25 10.4489 9.25 10.25V5.75C9.25 5.55109 9.32902 5.36032 9.46967 5.21967C9.61032 5.07902 9.80109 5 10 5ZM10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13C9.73478 13 9.48043 13.1054 9.29289 13.2929C9.10536 13.4804 9 13.7348 9 14C9 14.2652 9.10536 14.5196 9.29289 14.7071C9.48043 14.8946 9.73478 15 10 15Z"
-        className="tw-fill-medusa-support-error dark:tw-fill-medusa-support-error-dark"
-      />
-    </svg>
+      iconColorClassName="tw-fill-medusa-support-error dark:tw-fill-medusa-support-error-dark"
+    />
  )
 }

@@ -26,7 +26,7 @@ export default function AnnouncementBarCloseButton(
        width={20}
        height={20}
        strokeWidth={1.5}
-        iconColorClassName="tw-stroke-medusa-icon-placeholder dark:tw-stroke-medusa-icon-placeholder-dark"
+        iconColorClassName="tw-stroke-medusa-icon-muted dark:tw-stroke-medusa-icon-muted-dark"
      />
    </button>
  )
@@ -0,0 +1,17 @@
+import React from "react"
+import ApiDoc from "@theme-original/ApiDoc"
+import type { ApiDocProps } from "@theme-original/ApiDoc"
+import type { WrapperProps } from "@docusaurus/types"
+import UserProvider from "@site/src/providers/User"
+
+type Props = WrapperProps<typeof ApiDocProps>
+
+export default function ApiDocWrapper(props: Props): JSX.Element {
+  return (
+    <>
+      <UserProvider>
+        <ApiDoc {...props} />
+      </UserProvider>
+    </>
+  )
+}
@@ -0,0 +1,69 @@
+import React from "react"
+import clsx from "clsx"
+import { ThemeClassNames } from "@docusaurus/theme-common"
+import { useDoc } from "@docusaurus/theme-common/internal"
+import Heading from "@theme/Heading"
+import MDXContent from "@theme/MDXContent"
+import type { Props } from "@theme/DocItem/Content"
+import { DocContextValue } from "@medusajs/docs"
+import Badge from "@site/src/components/Badge"
+
+/**
+ Title can be declared inside md content or declared through
+ front matter and added manually. To make both cases consistent,
+ the added title is added under the same div.markdown block
+ See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
+
+ We render a "synthetic title" if:
+ - user doesn't ask to hide it with front matter
+ - the markdown content does not already contain a top-level h1 heading
+*/
+function useSyntheticTitle(): string | null {
+  const { metadata, frontMatter, contentTitle } = useDoc()
+  const shouldRender =
+    !frontMatter.hide_title && typeof contentTitle === "undefined"
+  if (!shouldRender) {
+    return null
+  }
+  return metadata.title
+}
+
+export default function DocItemContent({ children }: Props): JSX.Element {
+  const {
+    frontMatter: { badge },
+  } = useDoc() as DocContextValue
+  const syntheticTitle = useSyntheticTitle()
+
+  return (
+    <div className={clsx(ThemeClassNames.docs.docMarkdown, "markdown")}>
+      {syntheticTitle && (
+        <header
+          className={clsx(
+            badge && "md:tw-flex md:tw-items-center md:tw-gap-0.5 tw-mb-2"
+          )}
+        >
+          <Heading as="h1" className="!tw-mb-0">
+            {syntheticTitle}
+            {badge && (
+              <Badge
+                variant={badge.variant}
+                className="md:tw-hidden tw-ml-1 tw-align-middle"
+              >
+                {badge.text}
+              </Badge>
+            )}
+          </Heading>
+          {badge && (
+            <Badge
+              variant={badge.variant}
+              className={clsx("md:tw-block tw-hidden")}
+            >
+              {badge.text}
+            </Badge>
+          )}
+        </header>
+      )}
+      <MDXContent>{children}</MDXContent>
+    </div>
+  )
+}
@@ -7,10 +7,15 @@ import DocPageLayoutMain from "@theme/DocPage/Layout/Main"
 import type { Props } from "@theme/DocPage/Layout"
 import clsx from "clsx"
 import { useSidebar } from "@site/src/providers/Sidebar"
+import useOnboarding from "@site/src/hooks/use-onboarding"
+import useCurrentLearningPath from "@site/src/hooks/use-current-learning-path"

 export default function DocPageLayout({ children }: Props): JSX.Element {
  const sidebar = useDocsSidebar()
  const sidebarContext = useSidebar()
+  useOnboarding()
+  useCurrentLearningPath()
+
  return (
    <Layout wrapperClassName={clsx("tw-flex tw-flex-[1_0_auto]")}>
      <BackToTopButton />
@@ -15,7 +15,10 @@ import DocPageLayout from "@theme/DocPage/Layout"
 import NotFound from "@theme/NotFound"
 import SearchMetadata from "@theme/SearchMetadata"
 import type { Props } from "@theme/DocPage"
+import LearningPathProvider from "@site/src/providers/LearningPath"
 import SidebarProvider from "@site/src/providers/Sidebar"
+import NotificationProvider from "@site/src/providers/NotificationProvider"
+import UserProvider from "@site/src/providers/User"

 function DocPageMetadata(props: Props): JSX.Element {
  const { versionMetadata } = props
@@ -58,11 +61,17 @@ export default function DocPage(props: Props): JSX.Element {
        )}
      >
        <DocsVersionProvider version={versionMetadata}>
-          <DocsSidebarProvider name={sidebarName} items={sidebarItems}>
-            <SidebarProvider sidebarName={sidebarName}>
-              <DocPageLayout>{docElement}</DocPageLayout>
-            </SidebarProvider>
-          </DocsSidebarProvider>
+          <UserProvider>
+            <DocsSidebarProvider name={sidebarName} items={sidebarItems}>
+              <LearningPathProvider>
+                <SidebarProvider sidebarName={sidebarName}>
+                  <NotificationProvider>
+                    <DocPageLayout>{docElement}</DocPageLayout>
+                  </NotificationProvider>
+                </SidebarProvider>
+              </LearningPathProvider>
+            </DocsSidebarProvider>
+          </UserProvider>
        </DocsVersionProvider>
      </HtmlClassNameProvider>
    </>
@@ -20,7 +20,7 @@ const IconAcademicCapSolid: React.FC<IconProps> = ({
        d="M9.67899 1.93018C9.77863 1.88025 9.88855 1.85425 10 1.85425C10.1115 1.85425 10.2214 1.88025 10.321 1.93018C13.1299 3.33766 15.7595 5.07749 18.1534 7.11227C18.2506 7.19485 18.324 7.30188 18.3661 7.42232C18.4081 7.54275 18.4172 7.67222 18.3925 7.79736C18.3677 7.9225 18.31 8.03876 18.2254 8.13415C18.1407 8.22954 18.0321 8.30059 17.9107 8.33996C15.249 9.20318 12.7213 10.4349 10.4013 11.9991C10.2828 12.0792 10.143 12.122 10 12.122C9.85698 12.122 9.71723 12.0792 9.59873 11.9991C8.95249 11.5637 8.28958 11.1535 7.6115 10.7695V9.64504C7.6115 9.41192 7.72233 9.20269 7.90003 9.07944C8.91637 8.37493 9.97048 7.72651 11.0576 7.13711C11.222 7.04516 11.3435 6.89222 11.3959 6.71137C11.4484 6.53052 11.4275 6.3363 11.3379 6.1707C11.2482 6.00511 11.097 5.88145 10.9169 5.82648C10.7368 5.77151 10.5423 5.78963 10.3755 5.87694C9.24192 6.49154 8.14284 7.1677 7.08316 7.90239C6.80297 8.09811 6.57432 8.35876 6.41677 8.66206C6.25921 8.96536 6.17742 9.3023 6.1784 9.64409V10.0071C4.85835 9.35105 3.49158 8.79348 2.08928 8.33901C1.96795 8.29963 1.85934 8.22858 1.77465 8.13319C1.68996 8.03781 1.63227 7.92154 1.60753 7.7964C1.5828 7.67127 1.59192 7.5418 1.63394 7.42136C1.67597 7.30093 1.74939 7.19389 1.84661 7.11132C4.24046 5.07653 6.8701 3.3367 9.67899 1.92922V1.93018ZM6.1784 11.6179C5.41374 11.2138 4.6311 10.8446 3.83289 10.5116C3.67079 11.4982 3.5465 12.4906 3.46028 13.4867C3.4476 13.6312 3.47907 13.7762 3.55055 13.9024C3.62203 14.0287 3.73014 14.1302 3.8606 14.1937C4.36505 14.4383 4.85994 14.7001 5.34529 14.9771C5.14465 15.2867 4.91058 15.579 4.63925 15.8504C4.56885 15.916 4.51238 15.9951 4.47322 16.083C4.43405 16.1709 4.41299 16.2658 4.4113 16.362C4.4096 16.4582 4.4273 16.5537 4.46334 16.643C4.49937 16.7322 4.55302 16.8132 4.62106 16.8813C4.6891 16.9493 4.77015 17.003 4.85937 17.039C4.9486 17.075 5.04417 17.0927 5.14038 17.091C5.23659 17.0893 5.33147 17.0683 5.41937 17.0291C5.50727 16.99 5.58637 16.9335 5.65197 16.8631C6.00547 16.5106 6.3112 16.1274 6.56916 15.7233C7.60815 16.398 8.59644 17.1478 9.52612 17.9666C9.65701 18.082 9.82551 18.1457 10 18.1457C10.1745 18.1457 10.343 18.082 10.4739 17.9666C12.1842 16.4598 14.0899 15.1904 16.1394 14.1928C16.2699 14.1295 16.3781 14.0281 16.4497 13.9021C16.5214 13.776 16.5531 13.6312 16.5407 13.4867C16.4544 12.4906 16.3301 11.4982 16.1681 10.5116C14.4282 11.2377 12.7644 12.1341 11.2009 13.1877C10.8461 13.4267 10.4279 13.5544 10 13.5544C9.57211 13.5544 9.15395 13.4267 8.79906 13.1877C8.40735 12.9249 8.0099 12.6708 7.60481 12.4262C7.55492 13.5968 7.19773 14.7346 6.56916 15.7233C6.16831 15.4634 5.76019 15.2139 5.34529 14.9771C5.89043 14.1295 6.17969 13.1426 6.1784 12.1348V11.6189V11.6179Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -18,7 +18,7 @@ const IconAdjustments: React.FC<IconProps> = ({
        d="M8.75 5H16.875M8.75 5C8.75 5.33152 8.6183 5.64946 8.38388 5.88388C8.14946 6.1183 7.83152 6.25 7.5 6.25C7.16848 6.25 6.85054 6.1183 6.61612 5.88388C6.3817 5.64946 6.25 5.33152 6.25 5M8.75 5C8.75 4.66848 8.6183 4.35054 8.38388 4.11612C8.14946 3.8817 7.83152 3.75 7.5 3.75C7.16848 3.75 6.85054 3.8817 6.61612 4.11612C6.3817 4.35054 6.25 4.66848 6.25 5M3.125 5H6.25M8.75 15H16.875M8.75 15C8.75 15.3315 8.6183 15.6495 8.38388 15.8839C8.14946 16.1183 7.83152 16.25 7.5 16.25C7.16848 16.25 6.85054 16.1183 6.61612 15.8839C6.3817 15.6495 6.25 15.3315 6.25 15M8.75 15C8.75 14.6685 8.6183 14.3505 8.38388 14.1161C8.14946 13.8817 7.83152 13.75 7.5 13.75C7.16848 13.75 6.85054 13.8817 6.61612 14.1161C6.3817 14.3505 6.25 14.6685 6.25 15M3.125 15H6.25M13.75 10H16.875M13.75 10C13.75 10.3315 13.6183 10.6495 13.3839 10.8839C13.1495 11.1183 12.8315 11.25 12.5 11.25C12.1685 11.25 11.8505 11.1183 11.6161 10.8839C11.3817 10.6495 11.25 10.3315 11.25 10M13.75 10C13.75 9.66848 13.6183 9.35054 13.3839 9.11612C13.1495 8.8817 12.8315 8.75 12.5 8.75C12.1685 8.75 11.8505 8.8817 11.6161 9.11612C11.3817 9.35054 11.25 9.66848 11.25 10M3.125 10H11.25"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.25"
        strokeLinecap="round"
@@ -17,7 +17,7 @@ const IconAlert: React.FC<IconProps> = ({ iconColorClassName, ...props }) => {
        d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM10 5C10.1989 5 10.3897 5.07902 10.5303 5.21967C10.671 5.36032 10.75 5.55109 10.75 5.75V10.25C10.75 10.4489 10.671 10.6397 10.5303 10.7803C10.3897 10.921 10.1989 11 10 11C9.80109 11 9.61032 10.921 9.46967 10.7803C9.32902 10.6397 9.25 10.4489 9.25 10.25V5.75C9.25 5.55109 9.32902 5.36032 9.46967 5.21967C9.61032 5.07902 9.80109 5 10 5ZM10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13C9.73478 13 9.48043 13.1054 9.29289 13.2929C9.10536 13.4804 9 13.7348 9 14C9 14.2652 9.10536 14.5196 9.29289 14.7071C9.48043 14.8946 9.73478 15 10 15Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -18,7 +18,7 @@ const IconArrowDownTray: React.FC<IconProps> = ({
        d="M2.5 13.75V15.625C2.5 16.1223 2.69754 16.5992 3.04917 16.9508C3.40081 17.3025 3.87772 17.5 4.375 17.5H15.625C16.1223 17.5 16.5992 17.3025 16.9508 16.9508C17.3025 16.5992 17.5 16.1223 17.5 15.625V13.75M13.75 10L10 13.75M10 13.75L6.25 10M10 13.75V2.5"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -18,7 +18,7 @@ const IconBackArow: React.FC<IconProps> = ({
        d="M7.66703 12.3331L3.00098 7.66703M3.00098 7.66703L7.66703 3.00098M3.00098 7.66703H12.3331C13.5706 7.66703 14.7574 8.15863 15.6325 9.03368C16.5075 9.90874 16.9991 11.0956 16.9991 12.3331C16.9991 13.5706 16.5075 14.7574 15.6325 15.6325C14.7574 16.5075 13.5706 16.9991 12.3331 16.9991H10.0001"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -18,7 +18,7 @@ const IconBarsThree: React.FC<IconProps> = ({
        d="M3.125 5.00006H16.875M3.125 10H16.875M3.125 15.0001H16.875"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -15,7 +15,7 @@ const IconBell: React.FC<IconProps> = ({ iconColorClassName, ...props }) => {
        d="M4.87497 2.91669C4.97929 2.79237 5.03116 2.63234 5.01961 2.47046C5.00806 2.30858 4.93399 2.15754 4.81307 2.04929C4.69216 1.94104 4.53388 1.88407 4.37171 1.89043C4.20954 1.89678 4.05621 1.96597 3.94414 2.08336C2.92036 3.22523 2.24183 4.63431 1.98747 6.14669C1.96394 6.3084 2.00469 6.4729 2.10098 6.60494C2.19726 6.73697 2.34144 6.82604 2.5026 6.85307C2.66377 6.88009 2.82911 6.84292 2.9632 6.74951C3.09729 6.65611 3.18946 6.5139 3.21997 6.35335C3.43508 5.0742 4.00901 3.88242 4.87497 2.91669ZM16.0558 2.08336C16.0012 2.02163 15.935 1.97131 15.8609 1.93527C15.7868 1.89924 15.7064 1.87821 15.6241 1.87339C15.5419 1.86856 15.4595 1.88005 15.3817 1.90718C15.3039 1.93431 15.2323 1.97655 15.1709 2.03147C15.1095 2.0864 15.0595 2.15291 15.0239 2.22721C14.9883 2.3015 14.9678 2.38209 14.9634 2.46436C14.9591 2.54663 14.971 2.62894 14.9986 2.70657C15.0262 2.7842 15.0689 2.85561 15.1241 2.91669C15.9904 3.88234 16.5646 5.07412 16.78 6.35335C16.8074 6.51691 16.8986 6.66287 17.0337 6.75914C17.1005 6.80681 17.1761 6.84084 17.2561 6.85929C17.3361 6.87775 17.419 6.88026 17.5 6.86669C17.581 6.85312 17.6585 6.82373 17.7281 6.7802C17.7977 6.73668 17.8581 6.67986 17.9058 6.613C17.9534 6.54614 17.9875 6.47055 18.0059 6.39054C18.0244 6.31053 18.0269 6.22767 18.0133 6.14669C17.7584 4.63414 17.0801 3.22506 16.0558 2.08336Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
      <path
@@ -24,7 +24,7 @@ const IconBell: React.FC<IconProps> = ({ iconColorClassName, ...props }) => {
        d="M9.99985 1.875C8.50801 1.875 7.07727 2.46763 6.02237 3.52252C4.96748 4.57742 4.37485 6.00816 4.37485 7.5V8.125C4.37741 9.82433 3.74802 11.4639 2.60902 12.725C2.54061 12.8009 2.49186 12.8924 2.46701 12.9915C2.44216 13.0906 2.44198 13.1942 2.46649 13.2934C2.491 13.3926 2.53944 13.4842 2.60758 13.5603C2.67572 13.6365 2.76148 13.6947 2.85735 13.73C4.14402 14.205 5.49068 14.555 6.88318 14.7658C6.85183 15.1943 6.90915 15.6246 7.05157 16.0299C7.19399 16.4352 7.41845 16.8068 7.71093 17.1214C8.0034 17.4361 8.35762 17.6871 8.75144 17.8587C9.14527 18.0303 9.57025 18.1189 9.99985 18.1189C10.4294 18.1189 10.8544 18.0303 11.2483 17.8587C11.6421 17.6871 11.9963 17.4361 12.2888 17.1214C12.5812 16.8068 12.8057 16.4352 12.9481 16.0299C13.0905 15.6246 13.1479 15.1943 13.1165 14.7658C14.4899 14.5576 15.8385 14.2103 17.1415 13.7292C17.2372 13.6938 17.3229 13.6356 17.3909 13.5595C17.4589 13.4835 17.5073 13.3919 17.5318 13.2929C17.5563 13.1938 17.5561 13.0903 17.5314 12.9913C17.5067 12.8923 17.4581 12.8009 17.3898 12.725C16.2511 11.4638 15.6221 9.82422 15.6248 8.125V7.5C15.6248 6.00816 15.0322 4.57742 13.9773 3.52252C12.9224 2.46763 11.4917 1.875 9.99985 1.875ZM8.12485 15C8.12485 14.9717 8.12485 14.9442 8.12652 14.9167C9.37288 15.029 10.6268 15.029 11.8732 14.9167L11.8748 15C11.8748 15.4973 11.6773 15.9742 11.3257 16.3258C10.974 16.6775 10.4971 16.875 9.99985 16.875C9.50257 16.875 9.02566 16.6775 8.67402 16.3258C8.32239 15.9742 8.12485 15.4973 8.12485 15Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -18,7 +18,7 @@ const IconBellAlertSolid: React.FC<IconProps> = ({
        d="M4.875 2.91669C4.97932 2.79237 5.03119 2.63234 5.01964 2.47046C5.00809 2.30858 4.93402 2.15754 4.81311 2.04929C4.69219 1.94104 4.53391 1.88407 4.37174 1.89043C4.20957 1.89678 4.05624 1.96597 3.94417 2.08336C2.92039 3.22523 2.24186 4.63431 1.9875 6.14669C1.96397 6.3084 2.00472 6.4729 2.10101 6.60494C2.19729 6.73697 2.34147 6.82604 2.50263 6.85307C2.6638 6.88009 2.82914 6.84292 2.96323 6.74951C3.09732 6.65611 3.18949 6.5139 3.22 6.35335C3.43511 5.0742 4.00904 3.88242 4.875 2.91669ZM16.0558 2.08336C16.0013 2.02163 15.935 1.97131 15.861 1.93527C15.7869 1.89924 15.7064 1.87821 15.6242 1.87339C15.5419 1.86856 15.4595 1.88005 15.3818 1.90718C15.304 1.93431 15.2323 1.97655 15.1709 2.03147C15.1095 2.0864 15.0596 2.15291 15.024 2.22721C14.9884 2.3015 14.9678 2.38209 14.9634 2.46436C14.9591 2.54663 14.9711 2.62894 14.9987 2.70657C15.0262 2.7842 15.0689 2.85561 15.1242 2.91669C15.9904 3.88234 16.5646 5.07412 16.78 6.35335C16.8074 6.51691 16.8987 6.66287 17.0337 6.75914C17.1005 6.80681 17.1761 6.84084 17.2561 6.85929C17.3362 6.87775 17.419 6.88026 17.5 6.86669C17.581 6.85312 17.6585 6.82373 17.7281 6.7802C17.7977 6.73668 17.8581 6.67986 17.9058 6.613C17.9535 6.54614 17.9875 6.47055 18.0059 6.39054C18.0244 6.31053 18.0269 6.22767 18.0133 6.14669C17.7585 4.63414 17.0802 3.22506 16.0558 2.08336Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
      <path
@@ -27,7 +27,7 @@ const IconBellAlertSolid: React.FC<IconProps> = ({
        d="M10 1.875C8.50816 1.875 7.07742 2.46763 6.02253 3.52252C4.96763 4.57742 4.375 6.00816 4.375 7.5V8.125C4.37757 9.82433 3.74817 11.4639 2.60917 12.725C2.54077 12.8009 2.49201 12.8924 2.46716 12.9915C2.44232 13.0906 2.44214 13.1942 2.46664 13.2934C2.49115 13.3926 2.53959 13.4842 2.60773 13.5603C2.67587 13.6365 2.76163 13.6947 2.8575 13.73C4.14417 14.205 5.49084 14.555 6.88334 14.7658C6.85198 15.1943 6.90931 15.6246 7.05173 16.0299C7.19415 16.4352 7.4186 16.8068 7.71108 17.1214C8.00356 17.4361 8.35777 17.6871 8.7516 17.8587C9.14542 18.0303 9.57041 18.1189 10 18.1189C10.4296 18.1189 10.8546 18.0303 11.2484 17.8587C11.6422 17.6871 11.9964 17.4361 12.2889 17.1214C12.5814 16.8068 12.8059 16.4352 12.9483 16.0299C13.0907 15.6246 13.148 15.1943 13.1167 14.7658C14.49 14.5576 15.8386 14.2103 17.1417 13.7292C17.2374 13.6938 17.323 13.6356 17.391 13.5595C17.4591 13.4835 17.5074 13.3919 17.5319 13.2929C17.5564 13.1938 17.5563 13.0903 17.5316 12.9913C17.5068 12.8923 17.4582 12.8009 17.39 12.725C16.2513 11.4638 15.6222 9.82422 15.625 8.125V7.5C15.625 6.00816 15.0324 4.57742 13.9775 3.52252C12.9226 2.46763 11.4918 1.875 10 1.875ZM8.125 15C8.125 14.9717 8.125 14.9442 8.12667 14.9167C9.37303 15.029 10.627 15.029 11.8733 14.9167L11.875 15C11.875 15.4973 11.6775 15.9742 11.3258 16.3258C10.9742 16.6775 10.4973 16.875 10 16.875C9.50272 16.875 9.02581 16.6775 8.67418 16.3258C8.32255 15.9742 8.125 15.4973 8.125 15Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -15,7 +15,7 @@ const IconBolt: React.FC<IconProps> = ({ iconColorClassName, ...props }) => {
        d="M3.125 11.25L11.875 1.875L10 8.75H16.875L8.125 18.125L10 11.25H3.125Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -20,7 +20,7 @@ const IconBoltSolid: React.FC<IconProps> = ({
        d="M12.0339 1.57679C12.1478 1.64276 12.2372 1.74652 12.2878 1.87153C12.3384 1.99653 12.3473 2.13558 12.3131 2.26648L10.7638 8.17823H16.4167C16.5304 8.17824 16.6416 8.21282 16.7366 8.27772C16.8317 8.34262 16.9065 8.43501 16.9517 8.54354C16.997 8.65206 17.0108 8.772 16.9915 8.88859C16.9722 9.00518 16.9205 9.11336 16.8429 9.19982L8.67622 18.3067C8.58727 18.4061 8.46885 18.4715 8.33992 18.4926C8.21099 18.5137 8.07899 18.4892 7.96502 18.423C7.85106 18.3568 7.76172 18.2527 7.7113 18.1274C7.66087 18.0022 7.65227 17.8629 7.68688 17.7319L9.23622 11.821H3.5833C3.46962 11.821 3.35842 11.7864 3.26336 11.7215C3.16831 11.6566 3.09355 11.5642 3.04827 11.4557C3.00299 11.3471 2.98916 11.2272 3.0085 11.1106C3.02783 10.994 3.07947 10.8858 3.15708 10.7994L11.3238 1.69255C11.4127 1.5935 11.531 1.52829 11.6597 1.50731C11.7884 1.48633 11.9201 1.51079 12.0339 1.57679Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -18,7 +18,7 @@ const IconBookOpen: React.FC<IconProps> = ({
        d="M10 5.03501C8.62634 3.80281 6.84533 3.12246 5 3.12501C4.12333 3.12501 3.28167 3.27501 2.5 3.55167V15.4267C3.30302 15.1434 4.14847 14.9991 5 15C6.92083 15 8.67333 15.7225 10 16.91M10 5.03501C11.3736 3.80274 13.1547 3.12238 15 3.12501C15.8767 3.12501 16.7183 3.27501 17.5 3.55167V15.4267C16.697 15.1434 15.8515 14.9991 15 15C13.1547 14.9975 11.3737 15.6778 10 16.91M10 5.03501V16.91"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -15,7 +15,7 @@ const IconBug: React.FC<IconProps> = ({ iconColorClassName, ...props }) => {
        d="M10.0003 10.6153C10.9415 10.6153 11.8679 10.6809 12.7739 10.8097C13.6241 10.9294 14.3037 11.6016 14.3037 12.46C14.3037 15.5164 12.3771 17.994 9.99951 17.994C7.62194 17.994 5.69611 15.5164 5.69611 12.46C5.69611 11.6024 6.37659 10.9294 7.22595 10.8097C8.14506 10.6801 9.07213 10.6152 10.0003 10.6153ZM10.0003 10.6153C12.364 10.6153 14.63 11.0318 16.7288 11.7959C16.6299 13.4859 16.3124 15.1559 15.7844 16.7642M10.0003 10.6153C7.6367 10.6153 5.37063 11.0318 3.271 11.7959C3.37348 13.5209 3.69732 15.1868 4.21628 16.7642M10.0003 10.6153C10.2498 10.6154 10.4966 10.5648 10.726 10.4668C10.9554 10.3687 11.1624 10.2251 11.3347 10.0447C11.507 9.86427 11.6409 9.6508 11.7283 9.41717C11.8157 9.18354 11.8549 8.93461 11.8433 8.68542M10.0003 10.6153C9.75087 10.6154 9.50401 10.5648 9.27465 10.4668C9.04529 10.3687 8.83821 10.2251 8.66593 10.0447C8.49365 9.86427 8.35975 9.6508 8.27233 9.41717C8.1849 9.18354 8.14577 8.93461 8.1573 8.68542M11.8433 8.68542C11.8214 8.2114 11.6176 7.76406 11.2744 7.43639C10.9312 7.10873 10.4749 6.92594 10.0003 6.92602M11.8433 8.68542C13.2994 8.55055 14.7365 8.25301 16.1262 7.79834C16.0812 6.87437 15.9729 5.9668 15.8049 5.08136M8.1573 8.68542C8.17924 8.2114 8.383 7.76406 8.72624 7.43639C9.06948 7.10873 9.52579 6.92594 10.0003 6.92602M8.1573 8.68542C6.67583 8.54769 5.24274 8.24598 3.87523 7.79834C3.91931 6.88633 4.02669 5.97849 4.19661 5.08136M10.0003 6.92602C10.8161 6.92602 11.6163 6.86044 12.3959 6.73254C12.7263 6.67843 13.0026 6.43903 13.0477 6.10781C13.1317 5.4739 13.0174 4.82953 12.7206 4.26315M10.0003 6.92602C9.18457 6.92602 8.38522 6.86044 7.60472 6.73254C7.27514 6.67843 6.99803 6.43903 6.95294 6.10781C6.86626 5.47296 6.98096 4.82691 7.28088 4.26069M7.28088 4.26069C6.93167 4.02814 6.61347 3.75291 6.33396 3.44002C6.39135 2.92352 6.55532 2.43816 6.80455 2.00774M7.28088 4.26069C7.54188 3.76545 7.93313 3.35169 8.41244 3.06249C8.89176 2.77329 9.44093 2.62045 10.0007 2.62045C10.5605 2.62045 11.1097 2.77329 11.589 3.06249C12.0683 3.35169 12.4596 3.76627 12.7206 4.26151C13.0707 4.02949 13.3888 3.7532 13.6675 3.44248C13.6119 2.93613 13.4513 2.44694 13.1961 2.0061"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -20,7 +20,7 @@ const IconBugAntSolid: React.FC<IconProps> = ({
        d="M6.7881 1.72723C6.93928 1.83478 7.0416 1.99794 7.07259 2.18088C7.10357 2.36381 7.06069 2.55156 6.95335 2.7029C6.77659 2.95179 6.63109 3.22146 6.52014 3.50585C6.69286 3.66457 6.87679 3.81302 7.071 3.94747C7.42032 3.50522 7.86536 3.14792 8.37266 2.90243C8.87996 2.65695 9.43631 2.52967 9.99988 2.53018C11.1875 2.53018 12.2453 3.08477 12.9288 3.94747C13.123 3.81302 13.3069 3.66551 13.4796 3.50585C13.3687 3.22146 13.2232 2.95179 13.0464 2.7029C12.9446 2.55142 12.9059 2.36617 12.9387 2.1866C12.9714 2.00703 13.073 1.84735 13.2217 1.74157C13.3705 1.63579 13.5547 1.59227 13.735 1.62028C13.9154 1.6483 14.0777 1.74564 14.1873 1.89155C14.5319 2.37612 14.7942 2.92325 14.9548 3.51239C14.986 3.62715 14.9875 3.74798 14.9591 3.86347C14.9306 3.97896 14.8733 4.08531 14.7924 4.17248C14.4311 4.56203 14.0238 4.90627 13.5795 5.19764C13.6825 5.54399 13.7348 5.90346 13.7345 6.26481C13.7345 6.75032 13.4535 7.16393 13.0595 7.37307C12.7135 7.55658 12.3516 7.70846 11.9783 7.82682C12.0997 8.02102 12.194 8.2339 12.2547 8.46078C13.5739 8.29832 14.8493 7.99395 16.0649 7.56447C16.0796 6.84172 16.0515 6.11874 15.9809 5.39931C15.972 5.30778 15.9811 5.21539 16.0079 5.1274C16.0346 5.03942 16.0785 4.95756 16.1368 4.88651C16.1952 4.81546 16.2671 4.75661 16.3482 4.71331C16.4293 4.67002 16.5182 4.64313 16.6097 4.63418C16.7012 4.62523 16.7936 4.63439 16.8816 4.66115C16.9696 4.68791 17.0515 4.73173 17.1225 4.79012C17.1936 4.84851 17.2524 4.92033 17.2957 5.00146C17.339 5.0826 17.3659 5.17147 17.3749 5.263C17.467 6.20239 17.492 7.14717 17.4495 8.09012C17.4434 8.22648 17.3975 8.35808 17.3176 8.46872C17.2376 8.57937 17.1271 8.66423 16.9995 8.71287C15.4519 9.30451 13.8351 9.69638 12.1884 9.87901C12.1592 9.95761 12.1259 10.0346 12.0885 10.1096C13.7673 10.2866 15.4159 10.6811 16.993 11.2832C17.1311 11.3363 17.2489 11.4317 17.3294 11.5558C17.4099 11.68 17.449 11.8264 17.4411 11.9741C17.3575 13.5925 17.0731 15.1942 16.5943 16.7423C16.5671 16.8302 16.5228 16.9118 16.4641 16.9826C16.4053 17.0533 16.3332 17.1118 16.2518 17.1547C16.1705 17.1975 16.0814 17.224 15.9899 17.2324C15.8983 17.2409 15.8059 17.2312 15.7181 17.204C15.6302 17.1768 15.5486 17.1325 15.4779 17.0738C15.4071 17.015 15.3486 16.9429 15.3058 16.8615C15.2629 16.7802 15.2365 16.6911 15.228 16.5996C15.2195 16.508 15.2292 16.4156 15.2564 16.3278C15.6439 15.0767 15.9006 13.7668 16.0089 12.4158C15.5468 12.2533 15.0753 12.1095 14.5972 11.9853C14.6439 12.2505 14.6682 12.5222 14.6682 12.8004C14.6682 14.4941 14.1855 15.8927 13.3368 16.8805C12.9258 17.3628 12.4139 17.7491 11.8374 18.0121C11.2608 18.275 10.6336 18.4083 9.99988 18.4024C9.36622 18.4082 8.739 18.2749 8.16244 18.012C7.58589 17.749 7.07404 17.3628 6.66299 16.8805C5.81336 15.8918 5.33159 14.4931 5.33159 12.8004C5.33159 12.5222 5.35586 12.2496 5.40255 11.9853C4.92358 12.1095 4.45302 12.2533 3.99086 12.4148C4.09916 13.7668 4.35498 15.0757 4.74338 16.3278C4.79836 16.5052 4.7806 16.6972 4.69401 16.8615C4.60743 17.0259 4.45911 17.1491 4.28169 17.204C4.10427 17.259 3.91228 17.2412 3.74795 17.1547C3.58362 17.0681 3.46042 16.9198 3.40545 16.7423C2.92634 15.1942 2.64157 13.5925 2.55769 11.9741C2.54996 11.8262 2.58936 11.6796 2.67023 11.5554C2.75109 11.4313 2.86925 11.336 3.00771 11.2832C4.58447 10.6812 6.23281 10.2867 7.91129 10.1096C7.87384 10.0346 7.84049 9.95763 7.81139 9.87901C6.16462 9.69638 4.54787 9.30451 3.00024 8.71287C2.8727 8.66423 2.76215 8.57937 2.68219 8.46872C2.60224 8.35808 2.55637 8.22648 2.55022 8.09012C2.50813 7.14716 2.53309 6.20241 2.62491 5.263C2.63386 5.17147 2.66075 5.0826 2.70405 5.00146C2.74734 4.92033 2.8062 4.84851 2.87725 4.79012C2.9483 4.73173 3.03015 4.68791 3.11814 4.66115C3.20612 4.63439 3.29852 4.62523 3.39005 4.63418C3.48157 4.64313 3.57044 4.67002 3.65158 4.71331C3.73271 4.75661 3.80453 4.81546 3.86292 4.88651C3.92131 4.95756 3.96514 5.03942 3.99189 5.1274C4.01865 5.21539 4.02782 5.30778 4.01887 5.39931C3.94839 6.11907 3.92033 6.84235 3.93484 7.5654C5.15046 7.99395 6.42584 8.29832 7.74416 8.46078C7.80579 8.2339 7.89915 8.02102 8.02146 7.82682C7.64813 7.70845 7.28627 7.55658 6.94028 7.37307C6.73772 7.26707 6.56785 7.1079 6.44892 6.91264C6.32999 6.71739 6.2665 6.49343 6.26525 6.26481C6.26501 5.90346 6.31722 5.54399 6.42024 5.19764C5.97564 4.90631 5.56807 4.56207 5.20648 4.17248C5.12573 4.08522 5.06853 3.97883 5.04027 3.86334C5.01202 3.74786 5.01363 3.62708 5.04496 3.51239C5.20336 2.93114 5.46317 2.38243 5.81242 1.89155C5.86576 1.81664 5.93332 1.75296 6.01127 1.70415C6.08921 1.65535 6.17601 1.62238 6.26669 1.60712C6.35738 1.59186 6.45018 1.59461 6.53981 1.61522C6.62943 1.63583 6.71318 1.67389 6.7881 1.72723Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -20,7 +20,7 @@ const IconBuildingSolid: React.FC<IconProps> = ({
        d="M13.8927 4.15414V7.27547H16.2399C16.6442 7.27547 17.0319 7.43606 17.3177 7.72192C17.6036 8.00777 17.7642 8.39547 17.7642 8.79973V15.7922H17.7885C18.2027 15.7922 18.5385 16.128 18.5385 16.5422C18.5385 16.9564 18.2027 17.2922 17.7885 17.2922H17.0218L17.0142 17.2923L17.0065 17.2922H2.30347C1.88925 17.2922 1.55347 16.9564 1.55347 16.5422C1.55347 16.128 1.88925 15.7922 2.30347 15.7922H2.32739V4.15414C2.32739 3.74988 2.48798 3.36218 2.77384 3.07633C3.05969 2.79047 3.44739 2.62988 3.85165 2.62988H12.3684C12.7727 2.62988 13.1604 2.79047 13.4462 3.07633C13.7321 3.36218 13.8927 3.74988 13.8927 4.15414ZM10.2392 15.8862C9.88026 15.8862 9.58924 15.5952 9.58924 15.2362V13.859H6.63086V15.2362C6.63086 15.5952 6.33984 15.8862 5.98085 15.8862C5.62187 15.8862 5.33085 15.5952 5.33085 15.2362V13.209C5.33085 12.85 5.62187 12.559 5.98085 12.559H10.2392C10.5982 12.559 10.8892 12.85 10.8892 13.209V15.2362C10.8892 15.5952 10.5982 15.8862 10.2392 15.8862ZM5.98065 9.21094C5.56644 9.21094 5.23065 9.54672 5.23065 9.96094C5.23065 10.3752 5.56644 10.7109 5.98065 10.7109H10.2391C10.6533 10.7109 10.9891 10.3752 10.9891 9.96094C10.9891 9.54672 10.6533 9.21094 10.2391 9.21094H5.98065ZM15.4614 15.884C15.0472 15.884 14.7114 15.5482 14.7114 15.134V9.96098C14.7114 9.54677 15.0472 9.21098 15.4614 9.21098C15.8756 9.21098 16.2114 9.54677 16.2114 9.96098V15.134C16.2114 15.5482 15.8756 15.884 15.4614 15.884ZM5.98065 5.9021C5.56644 5.9021 5.23065 6.23789 5.23065 6.6521C5.23065 7.06631 5.56644 7.4021 5.98065 7.4021H10.2391C10.6533 7.4021 10.9891 7.06631 10.9891 6.6521C10.9891 6.23789 10.6533 5.9021 10.2391 5.9021H5.98065Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -18,7 +18,7 @@ const IconBuildingStorefront: React.FC<IconProps> = ({
        d="M11.25 17.5V11.25C11.25 11.0842 11.3159 10.9253 11.4331 10.8081C11.5503 10.6908 11.7093 10.625 11.875 10.625H14.375C14.5408 10.625 14.6997 10.6908 14.817 10.8081C14.9342 10.9253 15 11.0842 15 11.25V17.5M11.25 17.5H1.96668M11.25 17.5H15M15 17.5H18.0333M16.875 17.5V7.79083C17.2072 7.59909 17.4908 7.33349 17.7038 7.01459C17.9169 6.6957 18.0538 6.33205 18.1038 5.95179C18.1538 5.57154 18.1157 5.18487 17.9924 4.82171C17.869 4.45855 17.6638 4.12864 17.3925 3.8575L16.4008 2.86667C16.1667 2.63218 15.8489 2.50029 15.5175 2.5H4.48168C4.15027 2.50029 3.83254 2.63218 3.59835 2.86667L2.60751 3.85667C2.33688 4.12811 2.13219 4.45809 2.00924 4.82114C1.88628 5.1842 1.84834 5.57064 1.89834 5.95068C1.94834 6.33072 2.08495 6.6942 2.29763 7.01309C2.5103 7.33199 2.79337 7.59779 3.12501 7.79M3.12501 17.4992V7.79167C3.62503 8.07999 4.20939 8.18647 4.77897 8.09306C5.34855 7.99965 5.86828 7.71209 6.25001 7.27917C6.48443 7.54537 6.77293 7.75852 7.09626 7.90437C7.41959 8.05023 7.77031 8.12545 8.12501 8.125C8.87168 8.125 9.54168 7.7975 10 7.27833C10.2344 7.54469 10.5228 7.75799 10.8462 7.90399C11.1695 8.05 11.5202 8.12534 11.875 8.125C12.6217 8.125 13.2917 7.7975 13.75 7.27833C14.1319 7.71112 14.6516 7.99852 15.2212 8.09178C15.7908 8.18504 16.3751 8.07842 16.875 7.79M5.62501 14.9992H8.75001C8.91577 14.9992 9.07474 14.9333 9.19195 14.8161C9.30916 14.6989 9.37501 14.5399 9.37501 14.3742V11.25C9.37501 11.0842 9.30916 10.9253 9.19195 10.8081C9.07474 10.6908 8.91577 10.625 8.75001 10.625H5.62501C5.45925 10.625 5.30028 10.6908 5.18307 10.8081C5.06586 10.9253 5.00001 11.0842 5.00001 11.25V14.375C5.00001 14.7208 5.28001 14.9992 5.62501 14.9992Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -18,7 +18,7 @@ const IconBuildingTax: React.FC<IconProps> = ({
        d="M17.5 7.5H2.5V5.83333L10 2.5L17.5 5.83333V7.5Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinejoin="round"
@@ -27,7 +27,7 @@ const IconBuildingTax: React.FC<IconProps> = ({
        d="M8.33333 16.6666H2.5L3.22917 14.1666H8.33333"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -37,7 +37,7 @@ const IconBuildingTax: React.FC<IconProps> = ({
        d="M4.16667 7.5V14.1667M7.50001 14.1667V7.5"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
      />
@@ -45,7 +45,7 @@ const IconBuildingTax: React.FC<IconProps> = ({
        d="M17.1354 11.1979L12.0312 16.302"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -55,7 +55,7 @@ const IconBuildingTax: React.FC<IconProps> = ({
        d="M12.2917 12.0834C12.6368 12.0834 12.9167 11.8036 12.9167 11.4584C12.9167 11.1132 12.6368 10.8334 12.2917 10.8334C11.9465 10.8334 11.6667 11.1132 11.6667 11.4584C11.6667 11.8036 11.9465 12.0834 12.2917 12.0834Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -65,7 +65,7 @@ const IconBuildingTax: React.FC<IconProps> = ({
        d="M16.875 16.6666C17.2202 16.6666 17.5 16.3868 17.5 16.0416C17.5 15.6964 17.2202 15.4166 16.875 15.4166C16.5298 15.4166 16.25 15.6964 16.25 16.0416C16.25 16.3868 16.5298 16.6666 16.875 16.6666Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -18,7 +18,7 @@ const IconCalendar: React.FC<IconProps> = ({
        d="M5.625 2.5V4.375M14.375 2.5V4.375M2.5 15.625V6.25C2.5 5.75272 2.69754 5.27581 3.04917 4.92417C3.40081 4.57254 3.87772 4.375 4.375 4.375H15.625C16.1223 4.375 16.5992 4.57254 16.9508 4.92417C17.3025 5.27581 17.5 5.75272 17.5 6.25V15.625M2.5 15.625C2.5 16.1223 2.69754 16.5992 3.04917 16.9508C3.40081 17.3025 3.87772 17.5 4.375 17.5H15.625C16.1223 17.5 16.5992 17.3025 16.9508 16.9508C17.3025 16.5992 17.5 16.1223 17.5 15.625M2.5 15.625V9.375C2.5 8.87772 2.69754 8.40081 3.04917 8.04917C3.40081 7.69754 3.87772 7.5 4.375 7.5H15.625C16.1223 7.5 16.5992 7.69754 16.9508 8.04917C17.3025 8.40081 17.5 8.87772 17.5 9.375V15.625"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -20,7 +20,7 @@ const IconCashSolid: React.FC<IconProps> = ({
        d="M1 4C1 3.73478 1.10536 3.48043 1.29289 3.29289C1.48043 3.10536 1.73478 3 2 3H18C18.2652 3 18.5196 3.10536 18.7071 3.29289C18.8946 3.48043 19 3.73478 19 4V12C19 12.2652 18.8946 12.5196 18.7071 12.7071C18.5196 12.8946 18.2652 13 18 13H2C1.73478 13 1.48043 12.8946 1.29289 12.7071C1.10536 12.5196 1 12.2652 1 12V4ZM13 8C13 8.79565 12.6839 9.55871 12.1213 10.1213C11.5587 10.6839 10.7956 11 10 11C9.20435 11 8.44129 10.6839 7.87868 10.1213C7.31607 9.55871 7 8.79565 7 8C7 7.20435 7.31607 6.44129 7.87868 5.87868C8.44129 5.31607 9.20435 5 10 5C10.7956 5 11.5587 5.31607 12.1213 5.87868C12.6839 6.44129 13 7.20435 13 8ZM4 9C4.26522 9 4.51957 8.89464 4.70711 8.70711C4.89464 8.51957 5 8.26522 5 8C5 7.73478 4.89464 7.48043 4.70711 7.29289C4.51957 7.10536 4.26522 7 4 7C3.73478 7 3.48043 7.10536 3.29289 7.29289C3.10536 7.48043 3 7.73478 3 8C3 8.26522 3.10536 8.51957 3.29289 8.70711C3.48043 8.89464 3.73478 9 4 9ZM17 8C17 8.26522 16.8946 8.51957 16.7071 8.70711C16.5196 8.89464 16.2652 9 16 9C15.7348 9 15.4804 8.89464 15.2929 8.70711C15.1054 8.51957 15 8.26522 15 8C15 7.73478 15.1054 7.48043 15.2929 7.29289C15.4804 7.10536 15.7348 7 16 7C16.2652 7 16.5196 7.10536 16.7071 7.29289C16.8946 7.48043 17 7.73478 17 8ZM1.75 14.5C1.55109 14.5 1.36032 14.579 1.21967 14.7197C1.07902 14.8603 1 15.0511 1 15.25C1 15.4489 1.07902 15.6397 1.21967 15.7803C1.36032 15.921 1.55109 16 1.75 16C6.167 16 10.443 16.603 14.499 17.73C15.61 18.039 16.75 17.218 16.75 16.034V15.25C16.75 15.0511 16.671 14.8603 16.5303 14.7197C16.3897 14.579 16.1989 14.5 16 14.5C15.8011 14.5 15.6103 14.579 15.4697 14.7197C15.329 14.8603 15.25 15.0511 15.25 15.25V16.034C15.2484 16.0755 15.2373 16.1161 15.2176 16.1526C15.1979 16.1891 15.1701 16.2207 15.1363 16.2448C15.1025 16.269 15.0637 16.285 15.0227 16.2918C14.9817 16.2986 14.9398 16.2959 14.9 16.284C10.6177 15.0963 6.19392 14.4961 1.75 14.5Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -18,7 +18,7 @@ const IconChannels: React.FC<IconProps> = ({
        d="M14.7189 5.875C15.6509 5.875 16.4064 5.11948 16.4064 4.1875C16.4064 3.25552 15.6509 2.5 14.7189 2.5C13.7869 2.5 13.0314 3.25552 13.0314 4.1875C13.0314 5.11948 13.7869 5.875 14.7189 5.875Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -28,7 +28,7 @@ const IconChannels: React.FC<IconProps> = ({
        d="M14.7189 11.6875C15.6509 11.6875 16.4064 10.932 16.4064 10C16.4064 9.06802 15.6509 8.3125 14.7189 8.3125C13.7869 8.3125 13.0314 9.06802 13.0314 10C13.0314 10.932 13.7869 11.6875 14.7189 11.6875Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -38,7 +38,7 @@ const IconChannels: React.FC<IconProps> = ({
        d="M4.5936 11.6875C5.52558 11.6875 6.2811 10.932 6.2811 10C6.2811 9.06802 5.52558 8.3125 4.5936 8.3125C3.66162 8.3125 2.9061 9.06802 2.9061 10C2.9061 10.932 3.66162 11.6875 4.5936 11.6875Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -48,7 +48,7 @@ const IconChannels: React.FC<IconProps> = ({
        d="M14.7189 17.5C15.6509 17.5 16.4064 16.7445 16.4064 15.8125C16.4064 14.8805 15.6509 14.125 14.7189 14.125C13.7869 14.125 13.0314 14.8805 13.0314 15.8125C13.0314 16.7445 13.7869 17.5 14.7189 17.5Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -58,7 +58,7 @@ const IconChannels: React.FC<IconProps> = ({
        d="M13.0308 4.1875H11.1558C10.327 4.1875 9.65576 4.85875 9.65576 5.6875V14.3125C9.65576 15.1413 10.327 15.8125 11.1558 15.8125H13.0308"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -68,7 +68,7 @@ const IconChannels: React.FC<IconProps> = ({
        d="M13.0301 10H6.28012"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -20,7 +20,7 @@ const IconChannelsSolid: React.FC<IconProps> = ({
        d="M12.3989 3.43751C12.7152 2.45828 13.6343 1.75 14.7188 1.75C16.065 1.75 17.1563 2.84131 17.1563 4.1875C17.1563 5.53369 16.065 6.625 14.7188 6.625C13.6343 6.625 12.7152 5.91673 12.3989 4.93751L11.1557 4.93752C10.7411 4.93752 10.4057 5.27298 10.4057 5.68752V9.24999L12.3989 9.25C12.7152 8.27076 13.6343 7.56248 14.7188 7.56248C16.065 7.56248 17.1563 8.65379 17.1563 9.99998C17.1563 11.3462 16.065 12.4375 14.7188 12.4375C13.6343 12.4375 12.7152 11.7292 12.3989 10.75L10.4057 10.75V14.3125C10.4057 14.727 10.7411 15.0625 11.1557 15.0625L12.3989 15.0625C12.7152 14.0832 13.6343 13.375 14.7188 13.375C16.065 13.375 17.1563 14.4663 17.1563 15.8125C17.1563 17.1587 16.065 18.25 14.7188 18.25C13.6343 18.25 12.7152 17.5417 12.3989 16.5625L11.1557 16.5625C9.91274 16.5625 8.90568 15.5555 8.90568 14.3125V10.75L6.91344 10.75C6.59711 11.7292 5.67802 12.4375 4.59351 12.4375C3.24731 12.4375 2.15601 11.3462 2.15601 9.99998C2.15601 8.65379 3.24731 7.56248 4.59351 7.56248C5.67802 7.56248 6.59711 8.27076 6.91344 9.24998L8.90568 9.24999V5.68752C8.90568 4.44456 9.91272 3.43752 11.1557 3.43752L12.3989 3.43751Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -20,7 +20,7 @@ const IconCheckCircleSolid: React.FC<IconProps> = ({
        d="M10 18C12.1217 18 14.1566 17.1571 15.6569 15.6569C17.1571 14.1566 18 12.1217 18 10C18 7.87827 17.1571 5.84344 15.6569 4.34315C14.1566 2.84285 12.1217 2 10 2C7.87827 2 5.84344 2.84285 4.34315 4.34315C2.84285 5.84344 2 7.87827 2 10C2 12.1217 2.84285 14.1566 4.34315 15.6569C5.84344 17.1571 7.87827 18 10 18ZM13.857 8.191C13.9149 8.11129 13.9566 8.02095 13.9796 7.92514C14.0026 7.82933 14.0065 7.72994 13.991 7.63262C13.9756 7.5353 13.9412 7.44198 13.8897 7.35797C13.8382 7.27396 13.7707 7.20091 13.691 7.143C13.6113 7.08509 13.5209 7.04344 13.4251 7.02044C13.3293 6.99744 13.2299 6.99354 13.1326 7.00895C13.0353 7.02437 12.942 7.0588 12.858 7.11028C12.774 7.16176 12.7009 7.22929 12.643 7.309L9.16 12.099L7.28 10.219C7.21078 10.1474 7.128 10.0903 7.03647 10.051C6.94495 10.0118 6.84653 9.99114 6.74694 9.99032C6.64736 9.9895 6.54861 10.0085 6.45646 10.0463C6.3643 10.084 6.28059 10.1398 6.2102 10.2102C6.13982 10.2807 6.08417 10.3644 6.0465 10.4566C6.00883 10.5488 5.9899 10.6476 5.99081 10.7472C5.99173 10.8467 6.01246 10.9451 6.05181 11.0366C6.09116 11.1281 6.14834 11.2108 6.22 11.28L8.72 13.78C8.79663 13.8567 8.88896 13.9158 8.99065 13.9534C9.09233 13.9909 9.20094 14.006 9.30901 13.9975C9.41708 13.9891 9.52203 13.9573 9.61663 13.9044C9.71123 13.8515 9.79324 13.7787 9.857 13.691L13.857 8.191Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -20,7 +20,7 @@ const IconChevronDoubleLeftMiniSolid: React.FC<IconProps> = ({
        d="M15.79 14.77C15.6521 14.9131 15.4629 14.9957 15.2641 14.9994C15.0654 15.0032 14.8733 14.9278 14.73 14.79L10.23 10.54C10.1574 10.47 10.0997 10.3862 10.0602 10.2934C10.0208 10.2006 10.0005 10.1008 10.0005 10C10.0005 9.89919 10.0208 9.79941 10.0602 9.70663C10.0997 9.61385 10.1574 9.52997 10.23 9.46001L14.73 5.21001C14.8002 5.13826 14.8841 5.08133 14.9767 5.0426C15.0693 5.00386 15.1687 4.98411 15.2691 4.9845C15.3695 4.9849 15.4687 5.00544 15.561 5.04491C15.6533 5.08437 15.7367 5.14196 15.8064 5.21427C15.876 5.28657 15.9304 5.37211 15.9663 5.46582C16.0023 5.55953 16.0191 5.65951 16.0157 5.75982C16.0123 5.86014 15.9888 5.95875 15.9466 6.04983C15.9044 6.1409 15.8444 6.22257 15.77 6.29001L11.832 10L15.77 13.71C15.9131 13.848 15.9957 14.0371 15.9994 14.2359C16.0032 14.4346 15.9278 14.6267 15.79 14.77ZM9.79001 14.77C9.65205 14.9131 9.46291 14.9957 9.26415 14.9994C9.06539 15.0032 8.87327 14.9278 8.73001 14.79L4.23001 10.54C4.15742 10.47 4.09968 10.3862 4.06025 10.2934C4.02081 10.2006 4.00049 10.1008 4.00049 10C4.00049 9.89919 4.02081 9.79941 4.06025 9.70663C4.09968 9.61385 4.15742 9.52997 4.23001 9.46001L8.73001 5.21001C8.8002 5.13826 8.88408 5.08133 8.97668 5.0426C9.06928 5.00386 9.16871 4.98411 9.26908 4.9845C9.36945 4.9849 9.46873 5.00544 9.56102 5.04491C9.6533 5.08437 9.73673 5.14196 9.80635 5.21427C9.87598 5.28657 9.93038 5.37211 9.96634 5.46582C10.0023 5.55953 10.0191 5.65951 10.0157 5.75982C10.0123 5.86014 9.98881 5.95875 9.9466 6.04983C9.9044 6.1409 9.84435 6.22257 9.77001 6.29001L5.83201 10L9.77001 13.71C9.91314 13.848 9.99565 14.0371 9.9994 14.2359C10.0032 14.4346 9.92784 14.6267 9.79001 14.77Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -0,0 +1,81 @@
+import React from "react"
+import { IconProps } from ".."
+
+const IconCircleDottedLine: React.FC<IconProps> = ({
+  iconColorClassName,
+  ...props
+}) => {
+  return (
+    <svg
+      width={props.width || 20}
+      height={props.height || 20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M12.5 2.93589C10.884 2.3547 9.116 2.3547 7.5 2.93589"
+        className={
+          iconColorClassName ||
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
+        }
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.63049 8.63198C2.94295 6.94471 3.82573 5.41606 5.13094 4.30209"
+        className={
+          iconColorClassName ||
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
+        }
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.13094 15.6979C3.82575 14.5839 2.94298 13.0552 2.63049 11.368"
+        className={
+          iconColorClassName ||
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
+        }
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.5 17.0641C9.116 17.6453 10.884 17.6453 12.5 17.0641"
+        className={
+          iconColorClassName ||
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
+        }
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17.3695 8.63198C17.057 6.94471 16.1742 5.41606 14.869 4.30209"
+        className={
+          iconColorClassName ||
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
+        }
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.869 15.6979C16.1742 14.5839 17.057 13.0552 17.3695 11.368"
+        className={
+          iconColorClassName ||
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
+        }
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default IconCircleDottedLine
@@ -0,0 +1,31 @@
+import React from "react"
+import { IconProps } from ".."
+
+const IconCircleMiniSolid: React.FC<IconProps> = ({
+  iconColorClassName,
+  ...props
+}) => {
+  return (
+    <svg
+      width={props.width || 20}
+      height={props.height || 20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <circle
+        cx="10"
+        cy="10"
+        r="5.25"
+        strokeWidth="1.5"
+        className={
+          iconColorClassName ||
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
+        }
+      />
+    </svg>
+  )
+}
+
+export default IconCircleMiniSolid
@@ -18,7 +18,7 @@ const IconCircleStack: React.FC<IconProps> = ({
        d="M16.875 5.3125C16.875 7.21083 13.7967 8.75 10 8.75C6.20333 8.75 3.125 7.21083 3.125 5.3125M16.875 5.3125C16.875 3.41417 13.7967 1.875 10 1.875C6.20333 1.875 3.125 3.41417 3.125 5.3125M16.875 5.3125V14.6875C16.875 16.5858 13.7967 18.125 10 18.125C6.20333 18.125 3.125 16.5858 3.125 14.6875V5.3125M16.875 5.3125V8.4375M3.125 5.3125V8.4375M16.875 8.4375V11.5625C16.875 13.4608 13.7967 15 10 15C6.20333 15 3.125 13.4608 3.125 11.5625V8.4375M16.875 8.4375C16.875 10.3358 13.7967 11.875 10 11.875C6.20333 11.875 3.125 10.3358 3.125 8.4375"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.25"
        strokeLinecap="round"
@@ -18,28 +18,28 @@ const IconCircleStackSolid: React.FC<IconProps> = ({
        d="M17.5 5.3125C17.5 7.55583 14.1417 9.375 10 9.375C5.85833 9.375 2.5 7.55583 2.5 5.3125C2.5 3.06917 5.85833 1.25 10 1.25C14.1417 1.25 17.5 3.06917 17.5 5.3125Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
      <path
        d="M10 10.625C12.2375 10.625 14.325 10.1367 15.8983 9.28419C16.4774 8.97677 17.0097 8.58843 17.4792 8.13086C17.4925 8.23169 17.5 8.33419 17.5 8.43753C17.5 10.6809 14.1417 12.5 10 12.5C5.85833 12.5 2.5 10.6809 2.5 8.43753C2.5 8.33419 2.5075 8.23169 2.52083 8.13086C2.99035 8.58841 3.52264 8.97675 4.10167 9.28419C5.67417 10.1367 7.7625 10.625 10 10.625Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
      <path
        d="M10 13.75C12.2375 13.75 14.325 13.2617 15.8983 12.4092C16.4774 12.1018 17.0097 11.7134 17.4792 11.2559C17.4925 11.3567 17.5 11.4592 17.5 11.5625C17.5 13.8059 14.1417 15.625 10 15.625C5.85833 15.625 2.5 13.8059 2.5 11.5625C2.5 11.4592 2.5075 11.3567 2.52083 11.2559C2.99034 11.7134 3.52263 12.1018 4.10167 12.4092C5.67417 13.2617 7.7625 13.75 10 13.75Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
      <path
        d="M10 16.875C12.2375 16.875 14.325 16.3867 15.8983 15.5342C16.4774 15.2268 17.0097 14.8384 17.4792 14.3809C17.4925 14.4817 17.5 14.5842 17.5 14.6875C17.5 16.9309 14.1417 18.75 10 18.75C5.85833 18.75 2.5 16.9309 2.5 14.6875C2.5 14.5842 2.5075 14.4817 2.52083 14.3809C2.99034 14.8384 3.52263 15.2268 4.10167 15.5342C5.67417 16.3867 7.7625 16.875 10 16.875Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -20,7 +20,7 @@ const IconClockSolidMini: React.FC<IconProps> = ({
        d="M4 10C4 6.68629 6.68629 4 10 4C13.3137 4 16 6.68629 16 10C16 13.3137 13.3137 16 10 16C6.68629 16 4 13.3137 4 10ZM10 5.75C10.4142 5.75 10.75 6.08579 10.75 6.5V9.63051L13.1914 10.2748C13.5919 10.3805 13.8309 10.7909 13.7252 11.1914C13.6195 11.5919 13.2091 11.8309 12.8086 11.7252L9.80862 10.9334C9.47938 10.8465 9.25 10.5488 9.25 10.2083V6.5C9.25 6.08579 9.58579 5.75 10 5.75Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -15,7 +15,7 @@ const IconClose: React.FC<IconProps> = ({ iconColorClassName, ...props }) => {
        d="M6 14L14 6M6 6L14 14"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth={props.strokeWidth}
        strokeLinecap="round"
@@ -18,7 +18,7 @@ const IconCloudArrowUp: React.FC<IconProps> = ({
        d="M10.0002 13.7499V8.12494M10.0002 8.12494L12.5002 10.6249M10.0002 8.12494L7.50017 10.6249M5.62517 16.2499C4.73303 16.2509 3.86977 15.9338 3.19042 15.3555C2.51107 14.7772 2.06013 13.9757 1.9186 13.0949C1.77706 12.214 1.95419 11.3116 2.41819 10.5496C2.88218 9.78761 3.60264 9.21601 4.45017 8.93744C4.23242 7.82174 4.45747 6.6651 5.07766 5.71245C5.69785 4.75979 6.66448 4.08593 7.77285 3.83356C8.88122 3.58119 10.0443 3.77013 11.0158 4.36036C11.9873 4.9506 12.6909 5.89579 12.9777 6.99577C13.421 6.85158 13.8958 6.83423 14.3485 6.94568C14.8012 7.05713 15.2137 7.29294 15.5394 7.62647C15.8652 7.96 16.0911 8.37796 16.1918 8.83315C16.2926 9.28835 16.264 9.76263 16.1093 10.2024C16.7915 10.463 17.361 10.9542 17.719 11.5907C18.0769 12.2273 18.2008 12.969 18.069 13.6873C17.9373 14.4056 17.5583 15.0552 16.9977 15.5232C16.4372 15.9913 15.7305 16.2484 15.0002 16.2499H5.62517Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -18,7 +18,7 @@ const IconCogSixTooth: React.FC<IconProps> = ({
        d="M7.99509 3.28333C8.07009 2.83167 8.46176 2.5 8.92009 2.5H11.0809C11.5393 2.5 11.9309 2.83167 12.0059 3.28333L12.1834 4.35083C12.2359 4.6625 12.4443 4.9225 12.7209 5.07583C12.7826 5.10917 12.8434 5.145 12.9043 5.18167C13.1743 5.345 13.5043 5.39583 13.8001 5.285L14.8143 4.905C15.0221 4.82684 15.2509 4.82498 15.46 4.89976C15.6691 4.97454 15.8448 5.1211 15.9559 5.31333L17.0359 7.18583C17.1468 7.37809 17.1859 7.60344 17.1462 7.8218C17.1065 8.04017 16.9907 8.23737 16.8193 8.37833L15.9834 9.0675C15.7393 9.2675 15.6184 9.57833 15.6243 9.89417C15.6256 9.96499 15.6256 10.0358 15.6243 10.1067C15.6184 10.4217 15.7393 10.7317 15.9826 10.9317L16.8201 11.6217C17.1734 11.9133 17.2651 12.4167 17.0368 12.8133L15.9551 14.6858C15.8441 14.878 15.6686 15.0246 15.4597 15.0996C15.2508 15.1745 15.0221 15.1729 14.8143 15.095L13.8001 14.715C13.5043 14.6042 13.1751 14.655 12.9034 14.8183C12.843 14.8551 12.7819 14.8906 12.7201 14.925C12.4443 15.0775 12.2359 15.3375 12.1834 15.6492L12.0059 16.7158C11.9309 17.1683 11.5393 17.5 11.0809 17.5H8.91926C8.46092 17.5 8.06926 17.1683 7.99426 16.7167L7.81676 15.6492C7.76509 15.3375 7.55676 15.0775 7.28009 14.9242C7.2183 14.8901 7.15717 14.8548 7.09676 14.8183C6.82592 14.655 6.49676 14.6042 6.20009 14.715L5.18592 15.095C4.9782 15.1729 4.74956 15.1747 4.54067 15.0999C4.33178 15.0251 4.15618 14.8787 4.04509 14.6867L2.96426 12.8142C2.85338 12.6219 2.8143 12.3966 2.85397 12.1782C2.89364 11.9598 3.0095 11.7626 3.18092 11.6217L4.01759 10.9325C4.26092 10.7325 4.38176 10.4217 4.37592 10.1058C4.37462 10.035 4.37462 9.96416 4.37592 9.89333C4.38176 9.57833 4.26092 9.26833 4.01759 9.06833L3.18092 8.37833C3.00971 8.23741 2.89399 8.04036 2.85432 7.82219C2.81465 7.60401 2.8536 7.37884 2.96426 7.18667L4.04509 5.31417C4.15608 5.12178 4.33177 4.97505 4.54085 4.90011C4.74993 4.82518 4.97883 4.82691 5.18676 4.905L6.20009 5.285C6.49676 5.39583 6.82592 5.345 7.09676 5.18167C7.15676 5.145 7.21842 5.10917 7.28009 5.075C7.55676 4.9225 7.76509 4.6625 7.81676 4.35083L7.99509 3.28333V3.28333Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -28,7 +28,7 @@ const IconCogSixTooth: React.FC<IconProps> = ({
        d="M12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 10 12.5C9.33696 12.5 8.70107 12.2366 8.23223 11.7678C7.76339 11.2989 7.5 10.663 7.5 10C7.5 9.33696 7.76339 8.70107 8.23223 8.23223C8.70107 7.76339 9.33696 7.5 10 7.5C10.663 7.5 11.2989 7.76339 11.7678 8.23223C12.2366 8.70107 12.5 9.33696 12.5 10V10Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -20,7 +20,7 @@ const IconCogSixToothSolid: React.FC<IconProps> = ({
        d="M9.23166 1.875C8.46749 1.875 7.81582 2.4275 7.68999 3.18083L7.54166 4.07417C7.52499 4.17417 7.44582 4.29083 7.29416 4.36417C7.00862 4.50143 6.73393 4.66022 6.47249 4.83917C6.33416 4.935 6.19416 4.94417 6.09749 4.90833L5.24999 4.59C4.90353 4.4602 4.52224 4.45755 4.174 4.58253C3.82577 4.70751 3.53318 4.95201 3.34832 5.2725L2.57999 6.60333C2.39507 6.92363 2.32975 7.29915 2.39567 7.66307C2.46159 8.027 2.65447 8.35575 2.93999 8.59083L3.63999 9.1675C3.71916 9.2325 3.78166 9.35833 3.76832 9.52583C3.74458 9.84178 3.74458 10.1591 3.76832 10.475C3.78082 10.6417 3.71916 10.7683 3.64082 10.8333L2.93999 11.41C2.65447 11.6451 2.46159 11.9738 2.39567 12.3378C2.32975 12.7017 2.39507 13.0772 2.57999 13.3975L3.34832 14.7283C3.53331 15.0487 3.82596 15.293 4.17418 15.4178C4.5224 15.5426 4.90362 15.5399 5.24999 15.41L6.09916 15.0917C6.19499 15.0558 6.33499 15.0658 6.47416 15.16C6.73416 15.3383 7.00832 15.4975 7.29499 15.635C7.44666 15.7083 7.52582 15.825 7.54249 15.9267L7.69082 16.8192C7.81666 17.5725 8.46832 18.125 9.23249 18.125H10.7692C11.5325 18.125 12.185 17.5725 12.3108 16.8192L12.4592 15.9258C12.4758 15.8258 12.5542 15.7092 12.7067 15.635C12.9933 15.4975 13.2675 15.3383 13.5275 15.16C13.6667 15.065 13.8067 15.0558 13.9025 15.0917L14.7525 15.41C15.0987 15.5394 15.4797 15.5418 15.8275 15.4168C16.1754 15.2919 16.4677 15.0476 16.6525 14.7275L17.4217 13.3967C17.6066 13.0764 17.6719 12.7009 17.606 12.3369C17.5401 11.973 17.3472 11.6443 17.0617 11.4092L16.3617 10.8325C16.2825 10.7675 16.22 10.6417 16.2333 10.4742C16.257 10.1582 16.257 9.84095 16.2333 9.525C16.22 9.35833 16.2825 9.23167 16.3608 9.16667L17.0608 8.59C17.6508 8.105 17.8033 7.265 17.4217 6.6025L16.6533 5.27167C16.4683 4.95132 16.1757 4.707 15.8275 4.58218C15.4792 4.45735 15.098 4.46013 14.7517 4.59L13.9017 4.90833C13.8067 4.94417 13.6667 4.93417 13.5275 4.83917C13.2663 4.66025 12.9919 4.50145 12.7067 4.36417C12.5542 4.29167 12.4758 4.175 12.4592 4.07417L12.31 3.18083C12.2492 2.81589 12.0609 2.48435 11.7786 2.24522C11.4963 2.0061 11.1383 1.87491 10.7683 1.875H9.23249H9.23166ZM9.99999 13.125C10.8288 13.125 11.6236 12.7958 12.2097 12.2097C12.7958 11.6237 13.125 10.8288 13.125 10C13.125 9.1712 12.7958 8.37634 12.2097 7.79029C11.6236 7.20424 10.8288 6.875 9.99999 6.875C9.17119 6.875 8.37633 7.20424 7.79028 7.79029C7.20423 8.37634 6.87499 9.1712 6.87499 10C6.87499 10.8288 7.20423 11.6237 7.79028 12.2097C8.37633 12.7958 9.17119 13.125 9.99999 13.125Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -18,7 +18,7 @@ const IconCommandLine: React.FC<IconProps> = ({
        d="M5.625 6.25L8.125 8.125L5.625 10M9.375 10H11.875M4.375 16.875H15.625C16.1223 16.875 16.5992 16.6775 16.9508 16.3258C17.3025 15.9742 17.5 15.4973 17.5 15V5C17.5 4.50272 17.3025 4.02581 16.9508 3.67417C16.5992 3.32254 16.1223 3.125 15.625 3.125H4.375C3.87772 3.125 3.40081 3.32254 3.04917 3.67417C2.69754 4.02581 2.5 4.50272 2.5 5V15C2.5 15.4973 2.69754 15.9742 3.04917 16.3258C3.40081 16.6775 3.87772 16.875 4.375 16.875Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -20,7 +20,7 @@ const IconCommandLineSolid: React.FC<IconProps> = ({
        d="M3.63622 3.40051C3.07362 3.40051 2.53407 3.624 2.13626 4.02182C1.73844 4.41963 1.51495 4.95918 1.51495 5.52178V14.4782C1.51495 15.0408 1.73844 15.5804 2.13626 15.9782C2.53407 16.376 3.07362 16.5995 3.63622 16.5995H16.3638C16.6424 16.5995 16.9182 16.5446 17.1756 16.438C17.4329 16.3314 17.6668 16.1752 17.8638 15.9782C18.0607 15.7812 18.217 15.5474 18.3236 15.29C18.4302 15.0326 18.4851 14.7568 18.4851 14.4782V5.52178C18.4851 5.24321 18.4302 4.96737 18.3236 4.71C18.217 4.45264 18.0607 4.21879 17.8638 4.02182C17.6668 3.82484 17.4329 3.66859 17.1756 3.56198C16.9182 3.45538 16.6424 3.40051 16.3638 3.40051H3.63622ZM4.52526 11.6518C4.46299 11.5828 4.41492 11.5022 4.38382 11.4146C4.35272 11.327 4.33919 11.2341 4.34401 11.1413C4.34882 11.0485 4.37189 10.9576 4.41189 10.8737C4.45189 10.7898 4.50803 10.7146 4.57712 10.6524L6.34955 9.05722L4.57712 7.46108C4.50591 7.39956 4.4477 7.32445 4.40589 7.24014C4.36409 7.15583 4.33954 7.06402 4.33367 6.9701C4.32781 6.87618 4.34075 6.78204 4.37174 6.69318C4.40273 6.60433 4.45114 6.52255 4.51414 6.45265C4.57714 6.38275 4.65346 6.32612 4.73863 6.2861C4.82379 6.24607 4.91609 6.22345 5.01011 6.21955C5.10414 6.21566 5.19799 6.23057 5.28618 6.26341C5.37436 6.29625 5.4551 6.34637 5.52367 6.41082L7.88063 8.53209C7.95416 8.59839 8.01294 8.67939 8.05318 8.76985C8.09342 8.86031 8.11421 8.95821 8.11421 9.05722C8.11421 9.15622 8.09342 9.25412 8.05318 9.34458C8.01294 9.43504 7.95416 9.51605 7.88063 9.58235L5.52367 11.7036C5.45468 11.7659 5.37409 11.814 5.2865 11.8451C5.19892 11.8762 5.10606 11.8897 5.01325 11.8849C4.92043 11.8801 4.82947 11.857 4.74558 11.817C4.66168 11.777 4.58744 11.7208 4.52526 11.6518ZM9.76431 10.2357C9.57678 10.2357 9.39693 10.3102 9.26433 10.4428C9.13172 10.5754 9.05722 10.7553 9.05722 10.9428C9.05722 11.1303 9.13172 11.3102 9.26433 11.4428C9.39693 11.5754 9.57678 11.6499 9.76431 11.6499H12.1213C12.3088 11.6499 12.4887 11.5754 12.6213 11.4428C12.7539 11.3102 12.8284 11.1303 12.8284 10.9428C12.8284 10.7553 12.7539 10.5754 12.6213 10.4428C12.4887 10.3102 12.3088 10.2357 12.1213 10.2357H9.76431Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -18,7 +18,7 @@ const IconComponentSolid: React.FC<IconProps> = ({
        d="M5.125 7.37509L7.75 10.0001L5.125 12.6251L2.5 10.0001L5.125 7.37509Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -28,7 +28,7 @@ const IconComponentSolid: React.FC<IconProps> = ({
        d="M9.99969 2.5L12.6247 5.125L9.99969 7.75L7.37469 5.125L9.99969 2.5Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -38,7 +38,7 @@ const IconComponentSolid: React.FC<IconProps> = ({
        d="M14.8752 7.37509L17.5002 10.0001L14.8752 12.6251L12.2502 10.0001L14.8752 7.37509Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -48,7 +48,7 @@ const IconComponentSolid: React.FC<IconProps> = ({
        d="M9.99969 12.25L12.6247 14.875L9.99969 17.5L7.37469 14.875L9.99969 12.25Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -18,7 +18,7 @@ const IconComputerDesktop: React.FC<IconProps> = ({
        d="M7.5 14.375V15.2142C7.50004 15.5426 7.43537 15.8678 7.30968 16.1712C7.184 16.4746 6.99976 16.7503 6.7675 16.9825L6.25 17.5H13.75L13.2325 16.9825C13.0002 16.7503 12.816 16.4746 12.6903 16.1712C12.5646 15.8678 12.5 15.5426 12.5 15.2142V14.375M17.5 4.375V12.5C17.5 12.9973 17.3025 13.4742 16.9508 13.8258C16.5992 14.1775 16.1223 14.375 15.625 14.375H4.375C3.87772 14.375 3.40081 14.1775 3.04917 13.8258C2.69754 13.4742 2.5 12.9973 2.5 12.5V4.375M17.5 4.375C17.5 3.87772 17.3025 3.40081 16.9508 3.04917C16.5992 2.69754 16.1223 2.5 15.625 2.5H4.375C3.87772 2.5 3.40081 2.69754 3.04917 3.04917C2.69754 3.40081 2.5 3.87772 2.5 4.375M17.5 4.375V10C17.5 10.4973 17.3025 10.9742 16.9508 11.3258C16.5992 11.6775 16.1223 11.875 15.625 11.875H4.375C3.87772 11.875 3.40081 11.6775 3.04917 11.3258C2.69754 10.9742 2.5 10.4973 2.5 10V4.375"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -20,7 +20,7 @@ const IconComputerDesktopSolid: React.FC<IconProps> = ({
        d="M1.875 4.375C1.875 3.71196 2.13839 3.07607 2.60723 2.60723C3.07607 2.13839 3.71196 1.875 4.375 1.875H15.625C16.288 1.875 16.9239 2.13839 17.3928 2.60723C17.8616 3.07607 18.125 3.71196 18.125 4.375V12.5C18.125 13.163 17.8616 13.7989 17.3928 14.2678C16.9239 14.7366 16.288 15 15.625 15H13.125V15.2142C13.125 15.7117 13.3225 16.1892 13.6742 16.54L14.1917 17.0583C14.279 17.1457 14.3384 17.2571 14.3625 17.3782C14.3865 17.4994 14.3742 17.625 14.3269 17.7391C14.2796 17.8532 14.1996 17.9508 14.0969 18.0195C13.9943 18.0882 13.8735 18.1249 13.75 18.125H6.25C6.12647 18.1249 6.00574 18.0882 5.90306 18.0195C5.80038 17.9508 5.72035 17.8532 5.67309 17.7391C5.62583 17.625 5.61346 17.4994 5.63753 17.3782C5.6616 17.2571 5.72104 17.1457 5.80833 17.0583L6.32583 16.54C6.67726 16.1886 6.87478 15.712 6.875 15.215V15H4.375C3.71196 15 3.07607 14.7366 2.60723 14.2678C2.13839 13.7989 1.875 13.163 1.875 12.5V4.375ZM3.125 4.375V10.625C3.125 10.9565 3.2567 11.2745 3.49112 11.5089C3.72554 11.7433 4.04348 11.875 4.375 11.875H15.625C15.9565 11.875 16.2745 11.7433 16.5089 11.5089C16.7433 11.2745 16.875 10.9565 16.875 10.625V4.375C16.875 4.04348 16.7433 3.72554 16.5089 3.49112C16.2745 3.2567 15.9565 3.125 15.625 3.125H4.375C4.04348 3.125 3.72554 3.2567 3.49112 3.49112C3.2567 3.72554 3.125 4.04348 3.125 4.375Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -15,14 +15,14 @@ const IconCopy: React.FC<IconProps> = ({ iconColorClassName, ...props }) => {
        d="M2 4.25C2 3.65326 2.23705 3.08097 2.65901 2.65901C3.08097 2.23705 3.65326 2 4.25 2H10.75C11.3467 2 11.919 2.23705 12.341 2.65901C12.7629 3.08097 13 3.65326 13 4.25V5.5H9.25C8.25544 5.5 7.30161 5.89509 6.59835 6.59835C5.89509 7.30161 5.5 8.25544 5.5 9.25V13H4.25C3.65326 13 3.08097 12.7629 2.65901 12.341C2.23705 11.919 2 11.3467 2 10.75V4.25Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
      <path
        d="M9.25 7C8.65326 7 8.08097 7.23705 7.65901 7.65901C7.23705 8.08097 7 8.65326 7 9.25V15.75C7 16.3467 7.23705 16.919 7.65901 17.341C8.08097 17.7629 8.65326 18 9.25 18H15.75C16.3467 18 16.919 17.7629 17.341 17.341C17.7629 16.919 18 16.3467 18 15.75V9.25C18 8.65326 17.7629 8.08097 17.341 7.65901C16.919 7.23705 16.3467 7 15.75 7H9.25Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -18,7 +18,7 @@ const IconCreditCardSolid: React.FC<IconProps> = ({
        d="M3.97603 3.37305C3.33696 3.37305 2.72406 3.62692 2.27217 4.07881C1.82028 4.5307 1.56641 5.1436 1.56641 5.78267V6.38508H18.4338V5.78267C18.4338 5.1436 18.1799 4.5307 17.728 4.07881C17.2761 3.62692 16.6632 3.37305 16.0241 3.37305H3.97603Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
      <path
@@ -27,7 +27,7 @@ const IconCreditCardSolid: React.FC<IconProps> = ({
        d="M18.4338 8.19336H1.56641V14.2174C1.56641 14.8565 1.82028 15.4694 2.27217 15.9213C2.72406 16.3732 3.33696 16.627 3.97603 16.627H16.0241C16.6632 16.627 17.2761 16.3732 17.728 15.9213C18.1799 15.4694 18.4338 14.8565 18.4338 14.2174V8.19336ZM3.97603 11.2054C3.97603 11.0456 4.0395 10.8924 4.15247 10.7794C4.26544 10.6665 4.41867 10.603 4.57844 10.603H9.39768C9.55745 10.603 9.71068 10.6665 9.82365 10.7794C9.93662 10.8924 10.0001 11.0456 10.0001 11.2054C10.0001 11.3652 9.93662 11.5184 9.82365 11.6314C9.71068 11.7443 9.55745 11.8078 9.39768 11.8078H4.57844C4.41867 11.8078 4.26544 11.7443 4.15247 11.6314C4.0395 11.5184 3.97603 11.3652 3.97603 11.2054ZM4.57844 13.0126C4.41867 13.0126 4.26544 13.0761 4.15247 13.189C4.0395 13.302 3.97603 13.4552 3.97603 13.615C3.97603 13.7748 4.0395 13.928 4.15247 14.041C4.26544 14.154 4.41867 14.2174 4.57844 14.2174H6.98806C7.14783 14.2174 7.30105 14.154 7.41402 14.041C7.527 13.928 7.59047 13.7748 7.59047 13.615C7.59047 13.4552 7.527 13.302 7.41402 13.189C7.30105 13.0761 7.14783 13.0126 6.98806 13.0126H4.57844Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -20,7 +20,7 @@ const IconCubeSolid: React.FC<IconProps> = ({
        d="M10.346 1.63371C10.24 1.5753 10.121 1.54468 9.99999 1.54468C9.879 1.54468 9.75997 1.5753 9.654 1.63371L2.85366 5.38512L9.99999 9.3277L17.1463 5.38512L10.346 1.63371ZM17.6462 6.7471L10.7168 10.5702V18.4554L17.2754 14.8368C17.3877 14.7749 17.4814 14.6839 17.5466 14.5735C17.6118 14.463 17.6462 14.3371 17.6462 14.2088V6.7471ZM9.28316 18.4554V10.5702L2.35379 6.7471V14.2088C2.35377 14.3371 2.38816 14.463 2.45339 14.5735C2.51862 14.6839 2.61229 14.7749 2.72463 14.8368L9.28316 18.4554Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -18,7 +18,7 @@ const IconCurrencyDollar: React.FC<IconProps> = ({
        d="M10 5V15M7.5 12.6517L8.2325 13.2008C9.20833 13.9333 10.7908 13.9333 11.7675 13.2008C12.7442 12.4683 12.7442 11.2817 11.7675 10.5492C11.28 10.1825 10.64 10 10 10C9.39583 10 8.79167 9.81667 8.33083 9.45083C7.40917 8.71833 7.40917 7.53167 8.33083 6.79917C9.2525 6.06667 10.7475 6.06667 11.6692 6.79917L12.015 7.07417M17.5 10C17.5 10.9849 17.306 11.9602 16.9291 12.8701C16.5522 13.7801 15.9997 14.6069 15.3033 15.3033C14.6069 15.9997 13.7801 16.5522 12.8701 16.9291C11.9602 17.306 10.9849 17.5 10 17.5C9.01509 17.5 8.03982 17.306 7.12987 16.9291C6.21993 16.5522 5.39314 15.9997 4.6967 15.3033C4.00026 14.6069 3.44781 13.7801 3.0709 12.8701C2.69399 11.9602 2.5 10.9849 2.5 10C2.5 8.01088 3.29018 6.10322 4.6967 4.6967C6.10322 3.29018 8.01088 2.5 10 2.5C11.9891 2.5 13.8968 3.29018 15.3033 4.6967C16.7098 6.10322 17.5 8.01088 17.5 10Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -18,7 +18,7 @@ const IconCurrencyDollarSolid: React.FC<IconProps> = ({
        d="M10.75 10.818V13.432C11.1539 13.3639 11.5406 13.2171 11.888 13C12.37 12.685 12.5 12.352 12.5 12.125C12.5 11.898 12.37 11.565 11.888 11.25C11.5406 11.0329 11.1539 10.8862 10.75 10.818ZM8.33 8.62003C8.383 8.67503 8.445 8.73003 8.514 8.78403C8.722 8.94403 8.974 9.06803 9.25 9.14703V6.60303C9.1302 6.6374 9.01319 6.68085 8.9 6.73303C8.76 6.79803 8.63 6.87603 8.514 6.96603C8.137 7.25803 8 7.59303 8 7.87503C8 8.05903 8.058 8.26503 8.202 8.46703C8.239 8.51803 8.282 8.57003 8.33 8.62003Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
      <path
@@ -27,7 +27,7 @@ const IconCurrencyDollarSolid: React.FC<IconProps> = ({
        d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM10 4C10.1989 4 10.3897 4.07902 10.5303 4.21967C10.671 4.36032 10.75 4.55109 10.75 4.75V5.066C11.3504 5.16708 11.9175 5.41168 12.403 5.779C12.829 6.109 13.147 6.519 13.328 6.979C13.3951 7.16273 13.3877 7.36539 13.3075 7.54377C13.2272 7.72215 13.0805 7.86213 12.8985 7.93386C12.7166 8.0056 12.5138 8.00342 12.3334 7.92779C12.1531 7.85216 12.0094 7.70906 11.933 7.529C11.8376 7.30438 11.6831 7.10982 11.486 6.966C11.2658 6.79964 11.016 6.67647 10.75 6.603V9.3C11.448 9.393 12.133 9.62 12.709 9.996C13.496 10.51 13.999 11.266 13.999 12.126C13.999 12.986 13.495 13.742 12.709 14.256C12.133 14.633 11.448 14.859 10.749 14.952V15.251C10.749 15.4499 10.67 15.6407 10.5293 15.7813C10.3887 15.922 10.1979 16.001 9.999 16.001C9.80009 16.001 9.60932 15.922 9.46867 15.7813C9.32802 15.6407 9.249 15.4499 9.249 15.251V14.951C8.552 14.859 7.867 14.633 7.291 14.256C6.809 13.941 6.434 13.539 6.213 13.068C6.12866 12.8878 6.11937 12.6814 6.18716 12.4944C6.25496 12.3073 6.39429 12.1548 6.5745 12.0705C6.75471 11.9862 6.96105 11.9769 7.14812 12.0447C7.33519 12.1125 7.48766 12.2518 7.572 12.432C7.652 12.605 7.817 12.808 8.112 13.001C8.425 13.206 8.818 13.354 9.25 13.433V10.685C8.64964 10.5838 8.08258 10.3393 7.597 9.972C6.9 9.433 6.5 8.681 6.5 7.875C6.5 7.07 6.9 6.317 7.597 5.779C8.08254 5.41168 8.64962 5.16708 9.25 5.066V4.75C9.25 4.55109 9.32902 4.36032 9.46967 4.21967C9.61032 4.07902 9.80109 4 10 4Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -18,7 +18,7 @@ const IconDarkMode: React.FC<IconProps> = ({
        d="M18.1267 12.5017C17.136 12.9147 16.0732 13.1265 15 13.1251C10.5125 13.1251 6.875 9.48758 6.875 5.00008C6.875 3.89175 7.09667 2.83591 7.49833 1.87341C6.01789 2.49101 4.75331 3.53287 3.86386 4.86779C2.9744 6.20271 2.49986 7.77098 2.5 9.37508C2.5 13.8626 6.1375 17.5001 10.625 17.5001C12.2291 17.5002 13.7974 17.0257 15.1323 16.1362C16.4672 15.2468 17.5091 13.9822 18.1267 12.5017Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -15,7 +15,7 @@ const IconDiscord: React.FC<IconProps> = ({ iconColorClassName, ...props }) => {
        d="M12.9953 12.4964C12.1086 12.4964 11.3775 11.6826 11.3775 10.6825C11.3775 9.68252 12.0938 8.86871 12.9953 8.86871C13.8968 8.86871 14.6268 9.6904 14.613 10.6825C14.5992 11.6747 13.9037 12.4964 12.9953 12.4964ZM7.01487 12.4964C6.12815 12.4964 5.3971 11.6826 5.3971 10.6825C5.3971 9.68252 6.11337 8.86871 7.01487 8.86871C7.91636 8.86871 8.64642 9.6904 8.63263 10.6825C8.61884 11.6747 7.91538 12.4964 7.01487 12.4964ZM16.2357 4.2765C15.069 3.741 13.8376 3.35915 12.5726 3.14052C12.5611 3.13824 12.5492 3.13968 12.5385 3.14464C12.5279 3.1496 12.5191 3.15782 12.5135 3.16811C12.3458 3.47256 12.1935 3.78528 12.0573 4.10507C10.6937 3.89797 9.3066 3.89797 7.94296 4.10507C7.80595 3.78447 7.65136 3.47168 7.4799 3.16811C7.47394 3.15812 7.46512 3.15016 7.45458 3.14524C7.44404 3.14032 7.43227 3.13868 7.42078 3.14052C6.15564 3.35869 4.92426 3.74056 3.75767 4.2765C3.74785 4.28081 3.73959 4.28803 3.73402 4.29719C1.40097 7.78297 0.761549 11.183 1.07387 14.5437C1.07476 14.552 1.07732 14.56 1.08138 14.5673C1.08545 14.5746 1.09093 14.5809 1.09752 14.5861C2.45592 15.5924 3.97543 16.3607 5.59119 16.858C5.60256 16.8614 5.61469 16.8613 5.62596 16.8576C5.63724 16.8539 5.64711 16.8468 5.65425 16.8373C6.00123 16.3649 6.30868 15.8647 6.57348 15.3417C6.57701 15.3346 6.57899 15.3267 6.57929 15.3187C6.5796 15.3107 6.57822 15.3028 6.57525 15.2953C6.57228 15.2879 6.56778 15.2812 6.56204 15.2756C6.55631 15.27 6.54946 15.2657 6.54195 15.2629C6.05702 15.0774 5.58757 14.8537 5.13798 14.5939C5.1293 14.5892 5.12196 14.5824 5.11666 14.5741C5.11135 14.5657 5.10826 14.5562 5.10766 14.5463C5.10707 14.5365 5.109 14.5266 5.11328 14.5177C5.11755 14.5088 5.12401 14.5011 5.13207 14.4954C5.2306 14.4245 5.32124 14.3516 5.4109 14.2767C5.41886 14.27 5.42854 14.2658 5.43883 14.2644C5.44911 14.263 5.45958 14.2645 5.46903 14.2688C8.41391 15.6137 11.6031 15.6137 14.5135 14.2688C14.523 14.2642 14.5336 14.2624 14.5441 14.2636C14.5546 14.2648 14.5645 14.269 14.5726 14.2757C14.6623 14.3496 14.7569 14.4245 14.8524 14.4944C14.8605 14.5001 14.8671 14.5077 14.8714 14.5165C14.8758 14.5254 14.8778 14.5352 14.8773 14.5451C14.8768 14.5549 14.8738 14.5645 14.8686 14.5729C14.8634 14.5812 14.8561 14.5882 14.8475 14.593C14.4006 14.8535 13.9327 15.0759 13.4485 15.258C13.4409 15.2608 13.4341 15.2653 13.4283 15.271C13.4226 15.2767 13.4182 15.2835 13.4153 15.291C13.4124 15.2986 13.4111 15.3066 13.4116 15.3147C13.4121 15.3228 13.4142 15.3306 13.4179 15.3378C13.6867 15.8581 13.9933 16.358 14.3352 16.8334C14.3421 16.8432 14.3519 16.8505 14.3632 16.8544C14.3745 16.8583 14.3868 16.8585 14.3983 16.8551C16.0168 16.3593 17.5388 15.591 18.8988 14.5831C18.9055 14.5783 18.911 14.5721 18.9151 14.565C18.9192 14.5578 18.9217 14.5499 18.9225 14.5417C19.2978 10.6599 18.2939 7.2874 16.2623 4.29522C16.2563 4.28616 16.2462 4.27953 16.2357 4.2765Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -18,7 +18,7 @@ const IconDocumentText: React.FC<IconProps> = ({
        d="M16.25 11.8462V9.69231C16.25 8.95786 15.9537 8.2535 15.4262 7.73417C14.8988 7.21483 14.1834 6.92308 13.4375 6.92308H12.1875C11.9389 6.92308 11.7004 6.82582 11.5246 6.65271C11.3488 6.4796 11.25 6.24482 11.25 6V4.76923C11.25 4.03479 10.9537 3.33042 10.4262 2.81109C9.89879 2.29176 9.18342 2 8.4375 2H6.875M6.875 12.4615H13.125M6.875 14.9231H10M8.75 2H4.6875C4.17 2 3.75 2.41354 3.75 2.92308V17.0769C3.75 17.5865 4.17 18 4.6875 18H15.3125C15.83 18 16.25 17.5865 16.25 17.0769V9.38462C16.25 7.42609 15.4598 5.54779 14.0533 4.1629C12.6468 2.77802 10.7391 2 8.75 2V2Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -0,0 +1,30 @@
+import React from "react"
+import { IconProps } from ".."
+
+const IconExclamationCircleSolid: React.FC<IconProps> = ({
+  iconColorClassName,
+  ...props
+}) => {
+  return (
+    <svg
+      width={props.width || 20}
+      height={props.height || 20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM10 5C10.1989 5 10.3897 5.07902 10.5303 5.21967C10.671 5.36032 10.75 5.55109 10.75 5.75V10.25C10.75 10.4489 10.671 10.6397 10.5303 10.7803C10.3897 10.921 10.1989 11 10 11C9.80109 11 9.61032 10.921 9.46967 10.7803C9.32902 10.6397 9.25 10.4489 9.25 10.25V5.75C9.25 5.55109 9.32902 5.36032 9.46967 5.21967C9.61032 5.07902 9.80109 5 10 5ZM10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13C9.73478 13 9.48043 13.1054 9.29289 13.2929C9.10536 13.4804 9 13.7348 9 14C9 14.2652 9.10536 14.5196 9.29289 14.7071C9.48043 14.8946 9.73478 15 10 15Z"
+        className={
+          iconColorClassName ||
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle"
+        }
+      />
+    </svg>
+  )
+}
+
+export default IconExclamationCircleSolid
@@ -1,5 +1,4 @@
 import React from "react"
-import styles from "./styles.module.css"
 import { IconProps } from ".."

 const IconExternalLink: React.FC<IconProps> = ({
@@ -12,13 +11,13 @@ const IconExternalLink: React.FC<IconProps> = ({
      height={props.height || 20}
      viewBox="0 0 16 16"
      fill="none"
-      className={styles.iconExternalLink}
+      {...props}
    >
      <path
        d="M12.0099 3.99023L3.94995 12.0502"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -28,7 +27,7 @@ const IconExternalLink: React.FC<IconProps> = ({
        d="M6.35156 3.94971L12.0098 3.9896L12.0505 9.64865"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -1,3 +0,0 @@
-.iconExternalLink {
-  margin-left: 0.3rem;
-}
@@ -18,7 +18,7 @@ const IconFlyingBox: React.FC<IconProps> = ({
        d="M2.6232 5.9021H1.80406"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -28,7 +28,7 @@ const IconFlyingBox: React.FC<IconProps> = ({
        d="M3.44234 3.44348H1.80406"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -38,7 +38,7 @@ const IconFlyingBox: React.FC<IconProps> = ({
        d="M14.0978 16.5565H2.62378"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -48,7 +48,7 @@ const IconFlyingBox: React.FC<IconProps> = ({
        d="M14.3227 3.44348L13.5146 6.13742C13.4105 6.4841 13.0908 6.72178 12.7294 6.72178H10.1789C9.62979 6.72178 9.23639 6.19233 9.39375 5.66698L10.0609 3.44348"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -58,7 +58,7 @@ const IconFlyingBox: React.FC<IconProps> = ({
        d="M6.72057 10.8195H8.46533"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -68,7 +68,7 @@ const IconFlyingBox: React.FC<IconProps> = ({
        d="M14.4564 13.2784H5.77873C4.46086 13.2784 3.51589 12.008 3.89453 10.7459L5.66481 4.84495C5.91478 4.01309 6.68026 3.44348 7.54901 3.44348H16.2275C17.5453 3.44348 18.4903 4.71382 18.1117 5.97596L16.3414 11.8769C16.0914 12.7088 15.3251 13.2784 14.4564 13.2784Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -15,7 +15,7 @@ const IconFolder: React.FC<IconProps> = ({ iconColorClassName, ...props }) => {
        d="M2.49213 10.5776V10.0001C2.49213 9.54054 2.67467 9.09985 2.99959 8.77493C3.32451 8.45 3.76521 8.26746 4.22472 8.26746H15.7753C16.2348 8.26746 16.6755 8.45 17.0005 8.77493C17.3254 9.09985 17.5079 9.54054 17.5079 10.0001V10.5776M10.8163 5.61852L9.18378 3.98603C9.07653 3.87865 8.94918 3.79346 8.80899 3.73533C8.6688 3.67719 8.51853 3.64725 8.36677 3.64722H4.22472C3.76521 3.64722 3.32451 3.82976 2.99959 4.15468C2.67467 4.47961 2.49213 4.9203 2.49213 5.37981V14.6203C2.49213 15.0798 2.67467 15.5205 2.99959 15.8454C3.32451 16.1703 3.76521 16.3529 4.22472 16.3529H15.7753C16.2348 16.3529 16.6755 16.1703 17.0005 15.8454C17.3254 15.5205 17.5079 15.0798 17.5079 14.6203V7.68993C17.5079 7.23042 17.3254 6.78973 17.0005 6.4648C16.6755 6.13988 16.2348 5.95734 15.7753 5.95734H11.6333C11.327 5.95707 11.0327 5.8352 10.8163 5.61852Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -18,7 +18,7 @@ const IconFolderOpen: React.FC<IconProps> = ({
        d="M3.49539 8.24656C3.58369 8.23316 3.67435 8.22607 3.7666 8.22607H16.2326C16.3249 8.22607 16.4155 8.23316 16.5038 8.24656M3.49539 8.24656C3.03399 8.31802 2.61938 8.5685 2.34146 8.94367C2.06355 9.31884 1.94476 9.78846 2.01085 10.2507L2.6865 14.981C2.74685 15.4037 2.95762 15.7904 3.28014 16.0702C3.60266 16.35 4.01528 16.5041 4.44225 16.5042H15.5578C15.9847 16.5041 16.3973 16.35 16.7199 16.0702C17.0424 15.7904 17.2532 15.4037 17.3135 14.981L17.9892 10.2507C18.0552 9.78846 17.9364 9.31884 17.6585 8.94367C17.3806 8.5685 16.9652 8.31802 16.5038 8.24656M3.49539 8.24656L3.49618 5.2696C3.49618 4.79928 3.68296 4.34821 4.01546 4.01556C4.34795 3.68292 4.79894 3.49594 5.26927 3.49573H8.32743C8.64097 3.496 8.94156 3.62078 9.16312 3.84262L10.8361 5.51401C11.0577 5.73585 11.3582 5.86062 11.6718 5.8609H14.7299C15.2004 5.8609 15.6516 6.04779 15.9843 6.38045C16.3169 6.71312 16.5038 7.16431 16.5038 7.63477V8.24656"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -17,7 +17,7 @@ const IconGatsby: React.FC<IconProps> = ({ iconColorClassName, ...props }) => {
        d="M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10ZM2.92847 10.1286C2.92847 11.8643 3.63561 13.6643 4.98561 15.0143C6.33561 16.3643 8.13561 17.0072 9.93561 17.0714L2.92847 10.1286ZM3.12132 8.45716L11.5428 16.8786C14.6928 16.1714 17.0713 13.3429 17.0713 10H12.5713V11.2857H15.657C15.207 13.2143 13.7928 14.8214 11.9285 15.4643L4.53561 8.07145C5.37132 5.82145 7.49275 4.2143 9.9999 4.2143C11.9285 4.2143 13.6642 5.17859 14.757 6.65716L15.7213 5.82145C14.4356 4.08573 12.3785 2.92859 9.9999 2.92859C6.65704 2.92859 3.82847 5.30716 3.12132 8.45716Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -20,14 +20,14 @@ const IconGiftSolid: React.FC<IconProps> = ({
        d="M14 6.00001C14.197 5.73737 14.3403 5.4385 14.4218 5.12046C14.5033 4.80243 14.5213 4.47146 14.4749 4.14646C14.4284 3.82145 14.3185 3.50877 14.1512 3.22628C13.9839 2.94378 13.7626 2.69699 13.5 2.50001C13.2374 2.30303 12.9385 2.15971 12.6205 2.07823C12.3024 1.99675 11.9715 1.97871 11.6464 2.02514C11.3214 2.07157 11.0088 2.18155 10.7263 2.34882C10.4438 2.51609 10.197 2.73737 10 3.00001C9.60218 2.46958 9.00993 2.1189 8.35355 2.02514C7.69718 1.93137 7.03043 2.10219 6.5 2.50001C5.96957 2.89784 5.61889 3.49008 5.52513 4.14646C5.43136 4.80283 5.60218 5.46958 6 6.00001H3.25C2.56 6.00001 2 6.56001 2 7.25001V7.75001C2 8.44001 2.56 9.00001 3.25 9.00001H9.25V6.00001H10.75V9.00001H16.75C17.44 9.00001 18 8.44001 18 7.75001V7.25001C18 6.56001 17.44 6.00001 16.75 6.00001H14ZM13 4.50001C13 4.76523 12.8946 5.01958 12.7071 5.20712C12.5196 5.39465 12.2652 5.50001 12 5.50001H11V4.50001C11 4.23479 11.1054 3.98044 11.2929 3.7929C11.4804 3.60537 11.7348 3.50001 12 3.50001C12.2652 3.50001 12.5196 3.60537 12.7071 3.7929C12.8946 3.98044 13 4.23479 13 4.50001ZM7 4.50001C7 4.76523 7.10536 5.01958 7.29289 5.20712C7.48043 5.39465 7.73478 5.50001 8 5.50001H9V4.50001C9 4.23479 8.89464 3.98044 8.70711 3.7929C8.51957 3.60537 8.26522 3.50001 8 3.50001C7.73478 3.50001 7.48043 3.60537 7.29289 3.7929C7.10536 3.98044 7 4.23479 7 4.50001Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
      <path
        d="M9.25 10.5H3V15.25C3 15.9793 3.28973 16.6788 3.80546 17.1945C4.32118 17.7103 5.02065 18 5.75 18H9.25V10.5ZM10.75 18V10.5H17V15.25C17 15.9793 16.7103 16.6788 16.1945 17.1945C15.6788 17.7103 14.9793 18 14.25 18H10.75Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -17,7 +17,7 @@ const IconGitHub: React.FC<IconProps> = ({ iconColorClassName, ...props }) => {
        d="M10 1.22205C5.0275 1.22205 1 5.24955 1 10.222C1 14.2045 3.57625 17.5683 7.15375 18.7608C7.60375 18.8395 7.7725 18.5695 7.7725 18.3333C7.7725 18.1195 7.76125 17.4108 7.76125 16.657C5.5 17.0733 4.915 16.1058 4.735 15.5995C4.63375 15.3408 4.195 14.542 3.8125 14.3283C3.4975 14.1595 3.0475 13.7433 3.80125 13.732C4.51 13.7208 5.01625 14.3845 5.185 14.6545C5.995 16.0158 7.28875 15.6333 7.80625 15.397C7.885 14.812 8.12125 14.4183 8.38 14.1933C6.3775 13.9683 4.285 13.192 4.285 9.74955C4.285 8.7708 4.63375 7.9608 5.2075 7.3308C5.1175 7.1058 4.8025 6.1833 5.2975 4.9458C5.2975 4.9458 6.05125 4.70955 7.7725 5.8683C8.4925 5.6658 9.2575 5.56455 10.0225 5.56455C10.7875 5.56455 11.5525 5.6658 12.2725 5.8683C13.9938 4.6983 14.7475 4.9458 14.7475 4.9458C15.2425 6.1833 14.9275 7.1058 14.8375 7.3308C15.4113 7.9608 15.76 8.75955 15.76 9.74955C15.76 13.2033 13.6562 13.9683 11.6538 14.1933C11.98 14.4745 12.2613 15.0145 12.2613 15.8583C12.2613 17.062 12.25 18.0295 12.25 18.3333C12.25 18.5695 12.4188 18.8508 12.8688 18.7608C16.4238 17.5683 19 14.1933 19 10.222C19 5.24955 14.9725 1.22205 10 1.22205Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -18,7 +18,7 @@ const IconGlobeEurope: React.FC<IconProps> = ({
        d="M17.4108 11.1609L16.465 10.2151C16.3226 10.0725 16.2042 9.90784 16.1142 9.72756L15.2142 7.92756C15.1897 7.87871 15.1539 7.83638 15.1099 7.80405C15.0658 7.77172 15.0147 7.75032 14.9607 7.74161C14.9068 7.7329 14.8515 7.73714 14.7995 7.75396C14.7475 7.77079 14.7003 7.79973 14.6617 7.8384C14.5747 7.92525 14.4661 7.98727 14.3472 8.01804C14.2282 8.04881 14.1031 8.04721 13.985 8.0134L12.9242 7.7109C12.7544 7.66318 12.5733 7.67749 12.4131 7.75126C12.253 7.82503 12.1244 7.95343 12.0503 8.11344C11.9763 8.27345 11.9617 8.4546 12.0091 8.62441C12.0566 8.79422 12.1629 8.94158 12.3092 9.04006L12.7983 9.36506C13.29 9.69423 13.36 10.3901 12.9417 10.8084L12.775 10.9751C12.5983 11.1517 12.5 11.3901 12.5 11.6384V11.9801C12.5 12.3209 12.4083 12.6542 12.2333 12.9451L11.1375 14.7709C10.9813 15.0314 10.7602 15.2471 10.4959 15.3968C10.2316 15.5465 9.93295 15.6251 9.62917 15.6251C9.396 15.6251 9.17238 15.5324 9.0075 15.3676C8.84263 15.2027 8.75 14.9791 8.75 14.7459V13.7692C8.75 13.0026 8.28334 12.3134 7.57167 12.0284L7.02583 11.8109C6.6287 11.6519 6.29787 11.3619 6.08823 10.989C5.8786 10.6162 5.80277 10.1828 5.87333 9.7609L5.87917 9.7259C5.91791 9.49407 5.99989 9.27159 6.12083 9.07006L6.19584 8.94506C6.39485 8.61365 6.69144 8.35186 7.04498 8.19552C7.39853 8.03919 7.79176 7.99595 8.17084 8.07173L9.1525 8.2684C9.38351 8.31447 9.6234 8.2719 9.82445 8.14914C10.0255 8.02638 10.173 7.83244 10.2375 7.6059L10.4108 6.99756C10.4709 6.7874 10.4556 6.56286 10.3677 6.36277C10.2797 6.16267 10.1246 5.99959 9.92917 5.90173L9.375 5.62506L9.29917 5.7009C9.12506 5.87501 8.91836 6.01312 8.69087 6.10734C8.46338 6.20157 8.21956 6.25006 7.97333 6.25006H7.82333C7.61583 6.25006 7.4175 6.3334 7.27167 6.4784C7.13802 6.61326 6.95955 6.69443 6.77006 6.70653C6.58058 6.71864 6.39323 6.66084 6.2435 6.54407C6.09378 6.42731 5.99207 6.2597 5.95763 6.07297C5.9232 5.88625 5.95844 5.69338 6.05667 5.5309L7.2325 3.57006C7.3497 3.37515 7.43046 3.16055 7.47084 2.93673M17.4108 11.1609C17.6127 9.87518 17.4765 8.55906 17.0156 7.34192C16.5548 6.12478 15.7851 5.04851 14.7824 4.2189C13.7796 3.3893 12.5782 2.83493 11.2962 2.61027C10.0143 2.38561 8.69597 2.4984 7.47084 2.93756C6.22444 3.38434 5.11853 4.15312 4.2655 5.16578C3.41247 6.17843 2.84273 7.39886 2.61417 8.70304C2.38562 10.0072 2.50639 11.3487 2.96423 12.591C3.42206 13.8334 4.20063 14.9325 5.22082 15.7765C6.24101 16.6205 7.46645 17.1793 8.77261 17.3963C10.0788 17.6133 11.4191 17.4806 12.6574 17.0117C13.8956 16.5429 14.9877 15.7546 15.8226 14.7269C16.6575 13.6993 17.2055 12.4689 17.4108 11.1609Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1"
        strokeLinecap="round"
@@ -20,7 +20,7 @@ const IconGlobeEuropeSolid: React.FC<IconProps> = ({
        d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM16.497 10.204C16.4594 11.3915 16.097 12.5461 15.4492 13.5421C14.8014 14.5381 13.893 15.3375 12.8227 15.8534C11.7524 16.3693 10.5612 16.582 9.37848 16.4684C8.19579 16.3547 7.06687 15.9191 6.11442 15.2088C5.16197 14.4985 4.42242 13.5407 3.97616 12.4395C3.5299 11.3384 3.394 10.136 3.58322 8.96301C3.77244 7.79003 4.27955 6.69135 5.04943 5.78638C5.81931 4.88141 6.82251 4.20477 7.95 3.83L6.927 5.62C6.77282 5.89063 6.70968 6.20365 6.7469 6.51288C6.78412 6.82212 6.91973 7.11121 7.13372 7.33753C7.34771 7.56385 7.62877 7.71541 7.93544 7.76987C8.24211 7.82433 8.55817 7.7788 8.837 7.64L9.012 7.553C9.08153 7.51815 9.15823 7.50001 9.236 7.5H9.382C9.46726 7.5 9.55111 7.52181 9.62557 7.56335C9.70003 7.60489 9.76264 7.66478 9.80743 7.73733C9.85222 7.80988 9.87772 7.89268 9.88149 7.97786C9.88527 8.06304 9.8672 8.14777 9.829 8.224L9.801 8.279C9.76782 8.3453 9.71687 8.40108 9.65383 8.44011C9.59079 8.47913 9.51814 8.49987 9.444 8.5H8.942C8.57005 8.50003 8.20385 8.59186 7.8759 8.76735C7.54795 8.94284 7.26838 9.19656 7.062 9.506L7.018 9.572C6.83893 9.8407 6.72427 10.1471 6.68294 10.4674C6.64161 10.7876 6.67472 11.1131 6.7797 11.4184C6.88468 11.7238 7.0587 12.0008 7.28822 12.228C7.51773 12.4551 7.79656 12.6262 8.103 12.728C8.21804 12.7662 8.3182 12.8396 8.38941 12.9377C8.46062 13.0358 8.49929 13.1538 8.5 13.275V14.325C8.49988 14.5686 8.57547 14.8062 8.71631 15.005C8.85715 15.2037 9.05629 15.3538 9.28615 15.4344C9.51602 15.515 9.76526 15.5222 9.99939 15.4549C10.2335 15.3877 10.441 15.2493 10.593 15.059L12.204 13.045C12.396 12.805 12.5 12.509 12.5 12.203C12.5 11.887 12.628 11.579 12.853 11.353C13.0753 11.1308 13.2139 10.8386 13.2454 10.5258C13.277 10.2131 13.1994 9.89912 13.026 9.637L12.562 8.941C12.515 8.86865 12.4949 8.78213 12.5051 8.69648C12.5153 8.61083 12.5552 8.53146 12.6178 8.47215C12.6804 8.41285 12.7619 8.37736 12.8479 8.37185C12.934 8.36634 13.0193 8.39116 13.089 8.442L13.432 8.699C13.748 8.936 14.17 8.974 14.523 8.797C14.6331 8.74189 14.7578 8.72286 14.8793 8.74261C15.0008 8.76235 15.113 8.81987 15.2 8.907L16.497 10.204Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -0,0 +1,30 @@
+import React from "react"
+import { IconProps } from ".."
+
+const IconInformationCircleSolid: React.FC<IconProps> = ({
+  iconColorClassName,
+  ...props
+}) => {
+  return (
+    <svg
+      width={props.width || 20}
+      height={props.height || 20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM11 6C11 6.26522 10.8946 6.51957 10.7071 6.70711C10.5196 6.89464 10.2652 7 10 7C9.73478 7 9.48043 6.89464 9.29289 6.70711C9.10536 6.51957 9 6.26522 9 6C9 5.73478 9.10536 5.48043 9.29289 5.29289C9.48043 5.10536 9.73478 5 10 5C10.2652 5 10.5196 5.10536 10.7071 5.29289C10.8946 5.48043 11 5.73478 11 6ZM9 9C8.80109 9 8.61032 9.07902 8.46967 9.21967C8.32902 9.36032 8.25 9.55109 8.25 9.75C8.25 9.94891 8.32902 10.1397 8.46967 10.2803C8.61032 10.421 8.80109 10.5 9 10.5H9.253C9.29041 10.5 9.32734 10.5084 9.36106 10.5246C9.39479 10.5408 9.42445 10.5643 9.44787 10.5935C9.47128 10.6227 9.48785 10.6567 9.49636 10.6932C9.50486 10.7296 9.50508 10.7675 9.497 10.804L9.038 12.87C8.98108 13.1259 8.98237 13.3913 9.04179 13.6466C9.10121 13.902 9.21723 14.1407 9.38129 14.3452C9.54535 14.5496 9.75325 14.7146 9.98963 14.828C10.226 14.9413 10.4848 15.0001 10.747 15H11C11.1989 15 11.3897 14.921 11.5303 14.7803C11.671 14.6397 11.75 14.4489 11.75 14.25C11.75 14.0511 11.671 13.8603 11.5303 13.7197C11.3897 13.579 11.1989 13.5 11 13.5H10.747C10.7096 13.5 10.6727 13.4916 10.6389 13.4754C10.6052 13.4592 10.5755 13.4357 10.5521 13.4065C10.5287 13.3773 10.5121 13.3433 10.5036 13.3068C10.4951 13.2704 10.4949 13.2325 10.503 13.196L10.962 11.13C11.0189 10.8741 11.0176 10.6087 10.9582 10.3534C10.8988 10.098 10.7828 9.8593 10.6187 9.65483C10.4547 9.45036 10.2468 9.28536 10.0104 9.17201C9.77398 9.05867 9.51515 8.99989 9.253 9H9Z"
+        className={
+          iconColorClassName ||
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
+        }
+      />
+    </svg>
+  )
+}
+
+export default IconInformationCircleSolid
@@ -20,7 +20,7 @@ const IconJavaScript: React.FC<IconProps> = ({
        d="M5 1H15C17.2091 1 19 2.79086 19 5V15C19 17.2091 17.2091 19 15 19H5C2.79086 19 1 17.2091 1 15V5C1 2.79086 2.79086 1 5 1ZM13.6251 14.9851C12.7811 14.9851 12.3039 14.5459 11.9372 13.9485L10.5467 14.7544C11.049 15.7445 12.0756 16.5 13.6647 16.5C15.2899 16.5 16.5 15.658 16.5 14.1212C16.5 12.6956 15.6792 12.0616 14.2254 11.4396L13.7976 11.2568C13.0635 10.9396 12.7456 10.7323 12.7456 10.2202C12.7456 9.80588 13.0632 9.4887 13.5644 9.4887C14.0557 9.4887 14.3722 9.69544 14.6656 10.2202L15.998 9.36674C15.4344 8.37773 14.6523 8 13.5644 8C12.0363 8 11.0585 8.97459 11.0585 10.2548C11.0585 11.6446 11.8788 12.302 13.1135 12.8268L13.5413 13.0099C14.3216 13.3505 14.787 13.5578 14.787 14.1431C14.787 14.6316 14.3341 14.9851 13.6251 14.9851ZM6.99399 14.9744C6.40612 14.9744 6.1616 14.5722 5.89281 14.0964L4.5 14.9376C4.90348 15.7895 5.69685 16.4968 7.06682 16.4968C8.58305 16.4968 9.6218 15.6924 9.6218 13.9248V8.09746H7.91078V13.9018C7.91078 14.755 7.55614 14.9744 6.99399 14.9744Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -15,7 +15,7 @@ const IconKey: React.FC<IconProps> = ({ iconColorClassName, ...props }) => {
        d="M12.9094 4.76103C13.5267 4.76103 14.1187 5.00625 14.5552 5.44275C14.9917 5.87925 15.237 6.47127 15.237 7.08857M17.5645 7.08857C17.5646 7.76752 17.4162 8.43828 17.1297 9.05381C16.8431 9.66934 16.4254 10.2147 15.9058 10.6518C15.3862 11.0888 14.7773 11.4069 14.1218 11.5837C13.4662 11.7605 12.78 11.7918 12.1111 11.6754C11.6743 11.6001 11.2119 11.6955 10.8984 12.009L8.83623 14.0712H7.09058V15.8168H5.34493V17.5625H2.4355V15.3762C2.4355 14.913 2.61938 14.4684 2.94678 14.1418L7.98901 9.09956C8.30245 8.78612 8.39788 8.32372 8.32262 7.88692C8.21261 7.25163 8.23576 6.60041 8.39061 5.97454C8.54546 5.34866 8.82864 4.76178 9.2222 4.25109C9.61576 3.74039 10.1111 3.31702 10.6769 3.0078C11.2426 2.69858 11.8664 2.51026 12.5088 2.45477C13.1512 2.39928 13.798 2.47784 14.4084 2.68545C15.0188 2.89307 15.5795 3.22523 16.0548 3.66087C16.5301 4.0965 16.9097 4.62613 17.1696 5.21618C17.4295 5.80622 17.564 6.44382 17.5645 7.08857V7.08857Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -20,7 +20,7 @@ const IconKeySolid: React.FC<IconProps> = ({
        d="M13.125 1.25C12.3047 1.24991 11.4943 1.42923 10.7507 1.77539C10.007 2.12154 9.34804 2.62616 8.81998 3.25387C8.29191 3.88157 7.90753 4.61718 7.69376 5.40912C7.47999 6.20106 7.44202 7.03017 7.5825 7.83833C7.63833 8.16333 7.55583 8.43583 7.39833 8.59333L1.98167 14.0092C1.5131 14.478 1.24992 15.1138 1.25 15.7767V18.125C1.25 18.47 1.53 18.75 1.875 18.75H5C5.16576 18.75 5.32473 18.6842 5.44194 18.5669C5.55915 18.4497 5.625 18.2908 5.625 18.125V16.875H6.875C7.04076 16.875 7.19973 16.8092 7.31694 16.6919C7.43415 16.5747 7.5 16.4158 7.5 16.25V15H8.75C8.9157 14.9999 9.07457 14.9339 9.19167 14.8167L11.4067 12.6017C11.565 12.4442 11.8375 12.3617 12.1617 12.4183C12.9291 12.5505 13.7156 12.522 14.4714 12.3344C15.2272 12.1469 15.9358 11.8044 16.5524 11.3288C17.169 10.8531 17.6801 10.2546 18.0534 9.57118C18.4266 8.88774 18.6539 8.13424 18.7209 7.35839C18.7878 6.58254 18.6929 5.80125 18.4422 5.06398C18.1914 4.32672 17.7904 3.64954 17.2643 3.07534C16.7383 2.50113 16.0988 2.0424 15.3863 1.72819C14.6737 1.41399 13.9037 1.25115 13.125 1.25ZM13.125 3.75C12.9592 3.75 12.8003 3.81585 12.6831 3.93306C12.5658 4.05027 12.5 4.20924 12.5 4.375C12.5 4.54076 12.5658 4.69973 12.6831 4.81694C12.8003 4.93415 12.9592 5 13.125 5C13.6223 5 14.0992 5.19754 14.4508 5.54917C14.8025 5.90081 15 6.37772 15 6.875C15 7.04076 15.0658 7.19973 15.1831 7.31694C15.3003 7.43415 15.4592 7.5 15.625 7.5C15.7908 7.5 15.9497 7.43415 16.0669 7.31694C16.1842 7.19973 16.25 7.04076 16.25 6.875C16.25 6.0462 15.9208 5.25134 15.3347 4.66529C14.7487 4.07924 13.9538 3.75 13.125 3.75Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -18,7 +18,7 @@ const IconLightBulb: React.FC<IconProps> = ({
        d="M10.0005 14.5882V10.5728M10.0005 10.5728C10.3874 10.5731 10.7729 10.5245 11.1477 10.4282M10.0005 10.5728C9.61347 10.5731 9.228 10.5245 8.85318 10.4282M11.7214 16.1478C10.5843 16.3637 9.41666 16.3637 8.27954 16.1478M11.1477 17.9704C10.385 18.0503 9.61595 18.0503 8.85318 17.9704M11.7214 14.5882V14.4414C11.7214 13.6895 12.2247 13.0471 12.8748 12.67C13.967 12.0375 14.8201 11.0624 15.302 9.89591C15.7838 8.72937 15.8675 7.43648 15.54 6.21757C15.2126 4.99865 14.4923 3.92176 13.4907 3.15375C12.4891 2.38574 11.2622 1.96948 10.0001 1.96948C8.73794 1.96948 7.51104 2.38574 6.50947 3.15375C5.50789 3.92176 4.78757 4.99865 4.46011 6.21757C4.13265 7.43648 4.21633 8.72937 4.69818 9.89591C5.18003 11.0624 6.03316 12.0375 7.12537 12.67C7.7755 13.0471 8.27954 13.6895 8.27954 14.4414V14.5882"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -18,7 +18,7 @@ const IconLightBulbSolid: React.FC<IconProps> = ({
        d="M10 1.81238C8.67878 1.81208 7.39432 2.24761 6.34574 3.05146C5.29715 3.85532 4.543 4.9826 4.20016 6.2586C3.85732 7.5346 3.94495 8.88806 4.44946 10.1092C4.95397 11.3303 5.84718 12.351 6.99067 13.0129C7.48993 13.3026 7.80214 13.7465 7.81597 14.1941C7.81979 14.314 7.86299 14.4293 7.93889 14.5221C8.01479 14.615 8.11917 14.6803 8.2359 14.7079C8.49208 14.7683 8.75262 14.8156 9.01753 14.8498C9.25261 14.8797 9.4542 14.6912 9.4542 14.4539V11.0617C9.22423 11.0364 8.99635 10.9948 8.77227 10.9373C8.70284 10.9194 8.63761 10.888 8.5803 10.8449C8.52299 10.8019 8.47472 10.7479 8.43826 10.6862C8.4018 10.6244 8.37786 10.5561 8.3678 10.4851C8.35774 10.4142 8.36176 10.3419 8.37964 10.2724C8.39751 10.203 8.42888 10.1378 8.47196 10.0805C8.51505 10.0232 8.569 9.9749 8.63073 9.93844C8.69247 9.90198 8.76078 9.87804 8.83177 9.86798C8.90275 9.85792 8.97503 9.86194 9.04446 9.87981C9.67127 10.0414 10.3288 10.0414 10.9556 9.87981C11.0257 9.8596 11.0992 9.85366 11.1717 9.86235C11.2442 9.87103 11.3141 9.89416 11.3775 9.93037C11.4409 9.96658 11.4964 10.0151 11.5406 10.0731C11.5849 10.1312 11.6171 10.1975 11.6353 10.2682C11.6535 10.3388 11.6574 10.4124 11.6466 10.4846C11.6359 10.5568 11.6108 10.6261 11.5728 10.6885C11.5348 10.7508 11.4847 10.8048 11.4254 10.8474C11.3662 10.8901 11.299 10.9204 11.2278 10.9365C11.0037 10.9944 10.7759 11.0362 10.5459 11.0617V14.4532C10.5459 14.6912 10.7475 14.8797 10.9825 14.8498C11.2474 14.8156 11.508 14.7683 11.7642 14.7079C11.8809 14.6803 11.9853 14.615 12.0612 14.5221C12.1371 14.4293 12.1803 14.314 12.1841 14.1941C12.1987 13.7465 12.5101 13.3026 13.0094 13.0129C14.1529 12.351 15.0461 11.3303 15.5506 10.1092C16.0551 8.88806 16.1427 7.5346 15.7999 6.2586C15.4571 4.9826 14.7029 3.85532 13.6543 3.05146C12.6058 2.24761 11.3213 1.81208 10 1.81238Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
      <path
@@ -27,7 +27,7 @@ const IconLightBulbSolid: React.FC<IconProps> = ({
        d="M7.82613 15.7493C7.8395 15.6788 7.86661 15.6117 7.90592 15.5517C7.94524 15.4918 7.99598 15.4401 8.05525 15.3998C8.11452 15.3594 8.18116 15.3312 8.25137 15.3166C8.32157 15.302 8.39396 15.3014 8.4644 15.3148C9.47909 15.5073 10.5209 15.5073 11.5356 15.3148C11.6069 15.2991 11.6806 15.2978 11.7524 15.3111C11.8242 15.3244 11.8926 15.352 11.9535 15.3922C12.0145 15.4324 12.0667 15.4844 12.1072 15.5452C12.1477 15.6059 12.1756 15.6742 12.1892 15.7459C12.2028 15.8176 12.2019 15.8914 12.1866 15.9627C12.1712 16.0341 12.1417 16.1017 12.0998 16.1614C12.0578 16.2212 12.0043 16.2719 11.9424 16.3106C11.8805 16.3493 11.8115 16.3752 11.7394 16.3868C10.5901 16.6049 9.40996 16.6049 8.26062 16.3868C8.1185 16.3598 7.99291 16.2775 7.91144 16.1579C7.82997 16.0384 7.79929 15.8914 7.82613 15.7493ZM8.36542 17.5279C8.37287 17.4566 8.39429 17.3875 8.42846 17.3245C8.46263 17.2615 8.50888 17.2058 8.56456 17.1606C8.62025 17.1155 8.68429 17.0818 8.75301 17.0614C8.82174 17.041 8.89381 17.0343 8.96511 17.0418C9.65317 17.1137 10.3469 17.1137 11.0349 17.0418C11.1789 17.0267 11.323 17.0695 11.4354 17.1607C11.5479 17.2518 11.6195 17.384 11.6346 17.5279C11.6497 17.6719 11.6069 17.816 11.5157 17.9285C11.4246 18.0409 11.2924 18.1126 11.1484 18.1276C10.3849 18.2076 9.61511 18.2076 8.85157 18.1276C8.78027 18.1202 8.71114 18.0988 8.64812 18.0646C8.5851 18.0304 8.52943 17.9842 8.48428 17.9285C8.43914 17.8728 8.4054 17.8088 8.38501 17.74C8.36461 17.6713 8.35796 17.5992 8.36542 17.5279Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -18,7 +18,7 @@ const IconLightMode: React.FC<IconProps> = ({
        d="M10 2.5V4.375M15.3033 4.69667L13.9775 6.0225M17.5 10H15.625M15.3033 15.3033L13.9775 13.9775M10 15.625V17.5M6.0225 13.9775L4.69667 15.3033M4.375 10H2.5M6.0225 6.0225L4.69667 4.69667M13.125 10C13.125 10.8288 12.7958 11.6237 12.2097 12.2097C11.6237 12.7958 10.8288 13.125 10 13.125C9.1712 13.125 8.37634 12.7958 7.79029 12.2097C7.20424 11.6237 6.875 10.8288 6.875 10C6.875 9.1712 7.20424 8.37634 7.79029 7.79029C8.37634 7.20424 9.1712 6.875 10 6.875C10.8288 6.875 11.6237 7.20424 12.2097 7.79029C12.7958 8.37634 13.125 9.1712 13.125 10Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -18,7 +18,7 @@ const IconLinkedIn: React.FC<IconProps> = ({
        d="M15.25 1H4.75C2.67925 1 1 2.67925 1 4.75V15.25C1 17.3208 2.67925 19 4.75 19H15.25C17.3215 19 19 17.3208 19 15.25V4.75C19 2.67925 17.3215 1 15.25 1ZM7 15.25H4.75V7H7V15.25ZM5.875 6.049C5.1505 6.049 4.5625 5.4565 4.5625 4.726C4.5625 3.9955 5.1505 3.403 5.875 3.403C6.5995 3.403 7.1875 3.9955 7.1875 4.726C7.1875 5.4565 6.60025 6.049 5.875 6.049ZM16 15.25H13.75V11.047C13.75 8.521 10.75 8.71225 10.75 11.047V15.25H8.5V7H10.75V8.32375C11.797 6.38425 16 6.241 16 10.1808V15.25Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -0,0 +1,28 @@
+import React from "react"
+import { IconProps } from ".."
+
+const IconMap: React.FC<IconProps> = ({ iconColorClassName, ...props }) => {
+  return (
+    <svg
+      width={props.width || 20}
+      height={props.height || 20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.5 5.62501V12.5M12.5 7.50001V14.375M12.9192 17.29L16.9817 15.2592C17.2992 15.1008 17.5 14.7758 17.5 14.4208V4.01668C17.5 3.32001 16.7667 2.86668 16.1433 3.17834L12.9192 4.79001C12.655 4.92251 12.3442 4.92251 12.0808 4.79001L7.91917 2.71001C7.78901 2.64495 7.64551 2.61108 7.5 2.61108C7.35449 2.61108 7.21098 2.64495 7.08083 2.71001L3.01833 4.74084C2.7 4.90001 2.5 5.22501 2.5 5.57918V15.9833C2.5 16.68 3.23333 17.1333 3.85667 16.8217L7.08083 15.21C7.345 15.0775 7.65583 15.0775 7.91917 15.21L12.0808 17.2908C12.345 17.4225 12.6558 17.4225 12.9192 17.2908V17.29Z"
+        className={
+          iconColorClassName ||
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle-dark"
+        }
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default IconMap
@@ -0,0 +1,31 @@
+import React from "react"
+import { IconProps } from ".."
+
+const IconNewspaper: React.FC<IconProps> = ({
+  iconColorClassName,
+  ...props
+}) => {
+  return (
+    <svg
+      width={props.width || 20}
+      height={props.height || 20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M10 6.25H11.25M10 8.75H11.25M5 11.25H11.25M5 13.75H11.25M13.75 6.25H16.5625C17.08 6.25 17.5 6.67 17.5 7.1875V15C17.5 15.4973 17.3025 15.9742 16.9508 16.3258C16.5992 16.6775 16.1223 16.875 15.625 16.875M13.75 6.25V15C13.75 15.4973 13.9475 15.9742 14.2992 16.3258C14.6508 16.6775 15.1277 16.875 15.625 16.875M13.75 6.25V4.0625C13.75 3.545 13.33 3.125 12.8125 3.125H3.4375C2.92 3.125 2.5 3.545 2.5 4.0625V15C2.5 15.4973 2.69754 15.9742 3.04917 16.3258C3.40081 16.6775 3.87772 16.875 4.375 16.875H15.625M5 6.25H7.5V8.75H5V6.25Z"
+        className={
+          iconColorClassName ||
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle-dark"
+        }
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default IconNewspaper
@@ -15,14 +15,14 @@ const IconNextjs: React.FC<IconProps> = ({ iconColorClassName, ...props }) => {
        d="M9.41129 1.01314C9.37262 1.01666 9.24959 1.02896 9.13885 1.03775C6.585 1.268 4.19285 2.64599 2.67777 4.76395C1.8341 5.94157 1.2945 7.27737 1.09062 8.69227C1.01855 9.18617 1.00977 9.33206 1.00977 10.0017C1.00977 10.6714 1.01855 10.8173 1.09062 11.3112C1.57924 14.6876 3.98194 17.5244 7.2406 18.5755C7.82414 18.7636 8.43931 18.8919 9.13885 18.9692C9.41129 18.9991 10.5889 18.9991 10.8613 18.9692C12.0688 18.8356 13.0918 18.5368 14.1007 18.0218C14.2553 17.9427 14.2852 17.9216 14.2641 17.9041C14.2501 17.8935 13.591 17.0094 12.8 15.9408L11.3623 13.9986L9.56069 11.3323C8.56938 9.86638 7.75383 8.66767 7.7468 8.66767C7.73977 8.66591 7.73274 9.85056 7.72923 11.2971C7.72395 13.8299 7.7222 13.9318 7.69056 13.9916C7.64486 14.0777 7.60971 14.1128 7.53589 14.1515C7.47964 14.1796 7.43043 14.1849 7.16502 14.1849H6.86095L6.7801 14.1339C6.72737 14.1005 6.6887 14.0566 6.66234 14.0056L6.62543 13.9265L6.62894 10.4025L6.63422 6.87663L6.6887 6.80808C6.71683 6.77117 6.77659 6.72372 6.81877 6.70087C6.89083 6.66571 6.91895 6.6622 7.22303 6.6622C7.58158 6.6622 7.64134 6.67626 7.7345 6.7782C7.76086 6.80632 8.73635 8.27571 9.90343 10.0457C11.0705 11.8156 12.6664 14.2324 13.4503 15.4188L14.874 17.5754L14.9461 17.5279C15.5841 17.1131 16.2591 16.5226 16.7934 15.9074C17.9306 14.6015 18.6635 13.009 18.9096 11.3112C18.9816 10.8173 18.9904 10.6714 18.9904 10.0017C18.9904 9.33206 18.9816 9.18617 18.9096 8.69227C18.421 5.31585 16.0183 2.47901 12.7596 1.42794C12.1848 1.24163 11.5732 1.11333 10.8877 1.03599C10.719 1.01841 9.55717 0.999079 9.41129 1.01314ZM13.0918 6.45128C13.1762 6.49346 13.2447 6.57432 13.2693 6.65868C13.2834 6.70438 13.2869 7.68163 13.2834 9.88395L13.2781 13.0442L12.7209 12.19L12.162 11.3358V9.03853C12.162 7.55332 12.169 6.71844 12.1796 6.67802C12.2077 6.57959 12.2692 6.50225 12.3536 6.45655C12.4256 6.41964 12.452 6.41613 12.728 6.41613C12.9881 6.41613 13.0338 6.41964 13.0918 6.45128Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
      <path
        d="M14.7861 17.6141C14.7246 17.6527 14.7053 17.6791 14.7598 17.6492C14.7984 17.6264 14.8617 17.5789 14.8512 17.5771C14.8459 17.5771 14.816 17.5947 14.7861 17.6141ZM14.6648 17.6932C14.6332 17.7178 14.6332 17.7195 14.6719 17.7002C14.693 17.6896 14.7105 17.6773 14.7105 17.6738C14.7105 17.6598 14.7018 17.6633 14.6648 17.6932ZM14.577 17.7459C14.5453 17.7705 14.5453 17.7722 14.584 17.7529C14.6051 17.7424 14.6227 17.7301 14.6227 17.7265C14.6227 17.7125 14.6139 17.716 14.577 17.7459ZM14.4891 17.7986C14.4574 17.8232 14.4574 17.825 14.4961 17.8056C14.5172 17.7951 14.5348 17.7828 14.5348 17.7793C14.5348 17.7652 14.526 17.7687 14.4891 17.7986ZM14.3555 17.8689C14.2887 17.9041 14.2922 17.9181 14.359 17.8847C14.3889 17.8689 14.4117 17.8531 14.4117 17.8496C14.4117 17.8373 14.41 17.839 14.3555 17.8689Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -18,14 +18,14 @@ const IconPencilSquareSolid: React.FC<IconProps> = ({
        d="M5.43278 13.9172L6.69478 10.7622C6.89592 10.2596 7.197 9.80302 7.57978 9.42018L14.4998 2.50218C14.8976 2.10436 15.4372 1.88086 15.9998 1.88086C16.5624 1.88086 17.102 2.10436 17.4998 2.50218C17.8976 2.9 18.1211 3.43957 18.1211 4.00218C18.1211 4.56479 17.8976 5.10435 17.4998 5.50218L10.5798 12.4202C10.1968 12.8032 9.73978 13.1052 9.23678 13.3062L6.08278 14.5682C5.99191 14.6046 5.89237 14.6135 5.7965 14.5938C5.70062 14.5741 5.61263 14.5267 5.54342 14.4575C5.47421 14.3883 5.42684 14.3003 5.40717 14.2045C5.3875 14.1086 5.39641 14.009 5.43278 13.9182V13.9172Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
      <path
        d="M3.5 5.75C3.5 5.06 4.06 4.5 4.75 4.5H10C10.1989 4.5 10.3897 4.42098 10.5303 4.28033C10.671 4.13968 10.75 3.94891 10.75 3.75C10.75 3.55109 10.671 3.36032 10.5303 3.21967C10.3897 3.07902 10.1989 3 10 3H4.75C4.02065 3 3.32118 3.28973 2.80546 3.80546C2.28973 4.32118 2 5.02065 2 5.75V15.25C2 15.9793 2.28973 16.6788 2.80546 17.1945C3.32118 17.7103 4.02065 18 4.75 18H14.25C14.9793 18 15.6788 17.7103 16.1945 17.1945C16.7103 16.6788 17 15.9793 17 15.25V10C17 9.80109 16.921 9.61032 16.7803 9.46967C16.6397 9.32902 16.4489 9.25 16.25 9.25C16.0511 9.25 15.8603 9.32902 15.7197 9.46967C15.579 9.61032 15.5 9.80109 15.5 10V15.25C15.5 15.94 14.94 16.5 14.25 16.5H4.75C4.06 16.5 3.5 15.94 3.5 15.25V5.75Z"
        className={
          iconColorClassName ||
-          "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark"
+          "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark"
        }
      />
    </svg>
@@ -15,7 +15,7 @@ const IconPuzzle: React.FC<IconProps> = ({ iconColorClassName, ...props }) => {
        d="M11.875 5.0725C11.875 4.77667 12.03 4.50917 12.2092 4.27333C12.3933 4.03167 12.5 3.745 12.5 3.4375C12.5 2.57417 11.6608 1.875 10.625 1.875C9.58917 1.875 8.75 2.575 8.75 3.4375C8.75 3.745 8.85667 4.03167 9.04083 4.27333C9.22 4.50917 9.375 4.77667 9.375 5.0725C9.37536 5.14396 9.36136 5.21476 9.33382 5.2807C9.30629 5.34664 9.26578 5.40637 9.21471 5.45635C9.16365 5.50633 9.10305 5.54554 9.03654 5.57165C8.97002 5.59776 8.89893 5.61023 8.8275 5.60833C7.66805 5.57493 6.51059 5.49152 5.35833 5.35833C5.51333 6.7025 5.6025 8.06667 5.62083 9.4475C5.62161 9.51992 5.60798 9.59177 5.58075 9.65888C5.55352 9.72599 5.51323 9.78702 5.46221 9.83842C5.41119 9.88983 5.35047 9.93058 5.28357 9.95832C5.21667 9.98606 5.14492 10.0002 5.0725 10C4.77667 10 4.50917 9.845 4.27333 9.66583C4.03448 9.47926 3.74058 9.377 3.4375 9.375C2.57417 9.375 1.875 10.2142 1.875 11.25C1.875 12.2858 2.575 13.125 3.4375 13.125C3.745 13.125 4.03167 13.0183 4.27333 12.8342C4.50917 12.655 4.77667 12.5 5.0725 12.5C5.33083 12.5 5.535 12.7167 5.51583 12.975C5.41218 14.3879 5.23359 15.7943 4.98083 17.1883C6.24583 17.3467 7.52917 17.4458 8.8275 17.4833C8.89893 17.4852 8.97002 17.4728 9.03654 17.4467C9.10305 17.4205 9.16365 17.3813 9.21471 17.3314C9.26578 17.2814 9.30629 17.2216 9.33382 17.1557C9.36136 17.0898 9.37536 17.019 9.375 16.9475C9.375 16.6517 9.22 16.3842 9.04083 16.1483C8.85426 15.9095 8.752 15.6156 8.75 15.3125C8.75 14.45 9.59 13.75 10.625 13.75C11.6608 13.75 12.5 14.45 12.5 15.3125C12.5 15.62 12.3933 15.9067 12.2092 16.1483C12.03 16.3842 11.8758 16.6517 11.8758 16.9475C11.8758 17.225 12.1067 17.4467 12.3842 17.4308C13.9004 17.3417 15.4103 17.1664 16.9067 16.9058C17.1331 15.6044 17.2949 14.2925 17.3917 12.975C17.396 12.9141 17.3878 12.853 17.3674 12.7954C17.347 12.7379 17.315 12.6851 17.2733 12.6405C17.2316 12.5959 17.1811 12.5604 17.1251 12.5363C17.069 12.5121 17.0086 12.4997 16.9475 12.5C16.6517 12.5 16.3842 12.655 16.1483 12.8342C15.9067 13.0183 15.62 13.125 15.3125 13.125C14.45 13.125 13.75 12.2858 13.75 11.25C13.75 10.2142 14.45 9.375 15.3125 9.375C15.6208 9.375 15.9067 9.48167 16.1483 9.66583C16.3842 9.845 16.6517 10 16.9483 10C17.0208 10.0002 17.0925 9.98606 17.1594 9.95832C17.2263 9.93058 17.287 9.88983 17.338 9.83842C17.3891 9.78702 17.4294 9.72599 17.4566 9.65888C17.4838 9.59177 17.4974 9.51992 17.4967 9.4475C17.4766 7.95405 17.3737 6.46287 17.1883 4.98083C15.6167 5.26583 14.0133 5.45917 12.3833 5.555C12.3177 5.55864 12.2521 5.54882 12.1904 5.52614C12.1288 5.50346 12.0724 5.46841 12.0248 5.42314C11.9771 5.37787 11.9393 5.32333 11.9135 5.26289C11.8878 5.20244 11.8747 5.1382 11.875 5.0725Z"
        className={
          iconColorClassName ||
-          "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary"
+          "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle"
        }
        strokeWidth="1.5"
        strokeLinecap="round"
--- a/Show More
+++ b/Show More