api-ref: custom API reference (#4770)

* initialized next.js project

* finished markdown sections

* added operation schema component

* change page metadata

* eslint fixes

* fixes related to deployment

* added response schema

* resolve max stack issue

* support for different property types

* added support for property types

* added loading for components

* added more loading

* type fixes

* added oneOf type

* removed console

* fix replace with push

* refactored everything

* use static content for description

* fixes and improvements

* added code examples section

* fix path name

* optimizations

* fixed tag navigation

* add support for admin and store references

* general enhancements

* optimizations and fixes

* fixes and enhancements

* added search bar

* loading enhancements

* added loading

* added code blocks

* added margin top

* add empty response text

* fixed oneOf parameters

* added path and query parameters

* general fixes

* added base path env variable

* small fix for arrays

* enhancements

* design enhancements

* general enhancements

* fix isRequired

* added enum values

* enhancements

* general fixes

* general fixes

* changed oas generation script

* additions to the introduction section

* added copy button for code + other enhancements

* fix response code block

* fix metadata

* formatted store introduction

* move sidebar logic to Tags component

* added test env variables

* fix code block bug

* added loading animation

* added expand param + loading

* enhance operation loading

* made responsive + improvements

* added loading provider

* fixed loading

* adjustments for small devices

* added sidebar label for endpoints

* added feedback component

* fixed analytics

* general fixes

* listen to scroll for other headings

* added sample env file

* update api ref files + support new fields

* fix for external docs link

* added new sections

* fix last item in sidebar not showing

* move docs content to www/docs

* change redirect url

* revert change

* resolve build errors

* configure rewrites

* changed to environment variable url

* revert changing environment variable name

* add environment variable for API path

* fix links

* fix tailwind settings

* remove vercel file

* reconfigured api route

* move api page under api

* fix page metadata

* fix external link in navigation bar

* update api spec

* updated api specs

* fixed google lint error

* add max-height on request samples

* add padding before loading

* fix for one of name

* fix undefined types

* general fixes

* remove response schema example

* redesigned navigation bar

* redesigned sidebar

* fixed up paddings

* added feedback component + report issue

* fixed up typography, padding, and general styling

* redesigned code blocks

* optimization

* added error timeout

* fixes

* added indexing with algolia + fixes

* fix errors with algolia script

* redesign operation sections

* fix heading scroll

* design fixes

* fix padding

* fix padding + scroll issues

* fix scroll issues

* improve scroll performance

* fixes for safari

* optimization and fixes

* fixes to docs + details animation

* padding fixes for code block

* added tab animation

* fixed incorrect link

* added selection styling

* fix lint errors

* redesigned details component

* added detailed feedback form

* api reference fixes

* fix tabs

* upgrade + fixes

* updated documentation links

* optimizations to sidebar items

* fix spacing in sidebar item

* optimizations and fixes

* fix endpoint path styling

* remove margin

* final fixes

* change margin on small devices

* generated OAS

* fixes for mobile

* added feedback modal

* optimize dark mode button

* fixed color mode useeffect

* minimize dom size

* use new style system

* radius and spacing design system

* design fixes

* fix eslint errors

* added meta files

* change cron schedule

* fix docusaurus configurations

* added operating system to feedback data

* change content directory name

* fixes to contribution guidelines

* revert renaming content

* added api-reference to documentation workflow

* fixes for search

* added dark mode + fixes

* oas fixes

* handle bugs

* added code examples for clients

* changed tooltip text

* change authentication to card

* change page title based on selected section

* redesigned mobile navbar

* fix icon colors

* fix key colors

* fix medusa-js installation command

* change external regex in algolia

* change changeset

* fix padding on mobile

* fix hydration error

* update depedencies

www/docs/src/components/Badge/index.tsx

@@ -10,23 +10,23 @@ const Badge: React.FC<BadgeProps> = ({ className, variant, children }) => {
   return (
     <span
       className={clsx(
-        "tw-text-label-x-small-plus tw-py-px tw-px-0.4 tw-rounded tw-border tw-border-solid tw-text-center",
+        "text-compact-x-small-plus py-px px-0.4 rounded-sm border border-solid 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",
+          "bg-medusa-tag-purple-bg dark:bg-medusa-tag-purple-bg-dark text-medusa-tag-purple-text dark:text-medusa-tag-purple-text-dark border-medusa-tag-purple-border dark: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",
+          "bg-medusa-tag-purple-bg-dark text-medusa-tag-purple-text-dark 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",
+          "bg-medusa-tag-orange-bg dark:bg-medusa-tag-orange-bg-dark text-medusa-tag-orange-text dark:text-medusa-tag-orange-text-dark border-medusa-tag-orange-border dark: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",
+          "bg-medusa-tag-orange-bg-dark text-medusa-tag-orange-text-dark 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",
+          "bg-medusa-tag-green-bg dark:bg-medusa-tag-green-bg-dark text-medusa-tag-green-text dark:text-medusa-tag-green-text-dark border-medusa-tag-green-border dark: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",
+          "bg-medusa-tag-green-bg-dark text-medusa-tag-green-text-dark 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",
+          "bg-medusa-tag-blue-bg dark:bg-medusa-tag-blue-bg-dark text-medusa-tag-blue-text dark:text-medusa-tag-blue-text-dark border-medusa-tag-blue-border dark: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",
+          "bg-medusa-tag-blue-bg-dark text-medusa-tag-blue-text-dark border-medusa-tag-blue-border-dark",
         "badge",
         className
       )}

www/docs/src/components/Bordered/index.tsx

@@ -9,7 +9,7 @@ const Bordered: React.FC<BorderedProps> = ({ wrapperClassName, children }) => {
   return (
     <span
       className={clsx(
-        "tw-inline-flex tw-justify-center tw-items-center tw-rounded tw-p-[3px] tw-border tw-border-solid tw-border-medusa-border-strong dark:tw-border-medusa-border-strong-dark tw-mr-1 tw-w-fit tw-bg-docs-bg dark:tw-bg-docs-bg-dark",
+        "inline-flex justify-center items-center rounded p-[3px] border border-solid border-medusa-border-strong dark:border-medusa-border-strong-dark mr-1 w-fit bg-docs-bg dark:bg-docs-bg-dark",
         "no-zoom-img",
         wrapperClassName
       )}

www/docs/src/components/BorderedIcon/index.tsx

@@ -28,7 +28,7 @@ const BorderedIcon: React.FC<BorderedIconProp> = ({
     <Bordered wrapperClassName={wrapperClassName}>
       <span
         className={clsx(
-          "tw-inline-flex tw-justify-center tw-items-center tw-rounded-sm tw-p-[2px] tw-bg-medusa-bg-component dark:tw-bg-medusa-bg-component-dark",
+          "inline-flex justify-center items-center rounded-xs p-0.125 bg-medusa-bg-component dark:bg-medusa-bg-component-dark",
           iconWrapperClassName
         )}
       >

www/docs/src/components/Button/index.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import clsx from "clsx"
 
-type ButtonProps = {
+export type ButtonProps = {
   btnTypeClassName?: string
   className?: string
   onClick?: React.MouseEventHandler<HTMLButtonElement>
@@ -18,7 +18,7 @@ const Button: React.FC<ButtonProps> = ({
   return (
     <button
       className={clsx(
-        !btnTypeClassName?.length && "btn-primary",
+        !btnTypeClassName?.length && "btn-secondary",
         btnTypeClassName,
         className
       )}

www/docs/src/components/CopyButton/index.tsx

@@ -35,7 +35,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({
       tooltipClassName={tooltipClassName}
     >
       <span
-        className={clsx("tw-cursor-pointer", buttonClassName)}
+        className={clsx("cursor-pointer", buttonClassName)}
         onClick={handleCopy}
       >
         {children}

www/docs/src/components/DocSidebarItemIcon/index.tsx

@@ -25,7 +25,7 @@ const DocSidebarItemIcon: React.FC<DocSidebarItemIconProps> = ({
           iconClassName={clsx("sidebar-item-icon")}
           iconColorClassName={clsx(
             is_disabled &&
-              "tw-stroke-medusa-icon-disabled dark:tw-stroke-medusa-icon-disabled-dark"
+              "stroke-medusa-fg-disabled dark:stroke-medusa-fg-disabled-dark"
           )}
         />
       )}
@@ -34,7 +34,7 @@ const DocSidebarItemIcon: React.FC<DocSidebarItemIconProps> = ({
           className={clsx("sidebar-item-icon")}
           iconColorClassName={
             is_disabled &&
-            "tw-stroke-medusa-icon-disabled dark:tw-stroke-medusa-icon-disabled-dark"
+            "stroke-medusa-fg-disabled dark:stroke-medusa-fg-disabled-dark"
           }
         />
       )}

www/docs/src/components/Feedback/Solutions/index.tsx

@@ -59,14 +59,14 @@ const Solutions: React.FC<SolutionsProps> = ({ feedback, message }) => {
   return (
     <>
       {possibleSolutions.length > 0 && (
-        <div className="tw-text-label-large-plus tw-font-normal">
-          <span className="tw-inline-block tw-my-1 tw-mx-0">
+        <div className="text-compact-large-plus font-normal">
+          <span className="inline-block my-1 mx-0">
             If you faced a problem, here are some possible solutions from
             GitHub:
           </span>
           <ul>
             {possibleSolutions.map((solution) => (
-              <li key={solution.url} className="tw-mb-0.5 last:tw-mb-0">
+              <li key={solution.url} className="mb-0.5 last:mb-0">
                 <a href={solution.html_url} target="_blank" rel="noreferrer">
                   {solution.title}
                 </a>

www/docs/src/components/Feedback/index.tsx

@@ -7,6 +7,10 @@ import uuid from "react-uuid"
 import Solutions from "./Solutions/index"
 import Button from "../Button"
 import { useUser } from "@site/src/providers/User"
+import Details from "../../theme/Details"
+import TextArea from "../TextArea"
+import Label from "../Label"
+import InputText from "../Input/Text"
 
 type FeedbackProps = {
   event?: string
@@ -19,6 +23,7 @@ type FeedbackProps = {
   submitMessage?: string
   showPossibleSolutions?: boolean
   className?: string
+  showLongForm?: boolean
 } & React.HTMLAttributes<HTMLDivElement>
 
 const Feedback: React.FC<FeedbackProps> = ({
@@ -32,6 +37,7 @@ const Feedback: React.FC<FeedbackProps> = ({
   submitMessage = "Thank you for helping improve our documentation!",
   showPossibleSolutions = true,
   className = "",
+  showLongForm = true,
 }) => {
   const [showForm, setShowForm] = useState(false)
   const [submittedFeedback, setSubmittedFeedback] = useState(false)
@@ -51,6 +57,10 @@ const Feedback: React.FC<FeedbackProps> = ({
   const isBrowser = useIsBrowser()
   const location = useLocation()
   const { track } = useUser()
+  const [steps, setSteps] = useState("")
+  const [medusaVersion, setMedusaVersion] = useState("")
+  const [errorFix, setErrorFix] = useState("")
+  const [contactInfo, setContactInfo] = useState("")
 
   function handleFeedback(e) {
     const feedback = e.target.classList.contains("positive")
@@ -75,6 +85,13 @@ const Feedback: React.FC<FeedbackProps> = ({
               ? "yes"
               : "no",
           message: message?.length ? message : null,
+          os: isBrowser ? window.navigator.userAgent : "",
+          additional_data: {
+            steps,
+            medusaVersion,
+            errorFix,
+            contactInfo,
+          },
         },
         function () {
           if (showForm) {
@@ -101,7 +118,7 @@ const Feedback: React.FC<FeedbackProps> = ({
   }, [id])
 
   return (
-    <div className={`tw-py-2 ${className}`}>
+    <div className={`py-2 ${className}`}>
       <SwitchTransition mode="out-in">
         <CSSTransition
           key={
@@ -124,41 +141,94 @@ const Feedback: React.FC<FeedbackProps> = ({
           <>
             {!showForm && !submittedFeedback && (
               <div
-                className="tw-flex tw-flex-row tw-items-center"
+                className="flex flex-row items-center"
                 ref={inlineFeedbackRef}
               >
-                <span className="tw-mr-1.5 tw-text-body-regular">
-                  {question}
-                </span>
+                <Label className="mr-1.5">{question}</Label>
                 <Button
                   onClick={handleFeedback}
-                  className="tw-w-fit tw-mr-0.5 last:tw-mr-0 positive"
+                  className="w-fit mr-0.5 last:mr-0 positive"
                 >
                   {positiveBtn}
                 </Button>
                 <Button
                   onClick={handleFeedback}
-                  className="tw-w-fit tw-mr-0.5 last:tw-mr-0"
+                  className="w-fit mr-0.5 last:mr-0"
                 >
                   {negativeBtn}
                 </Button>
               </div>
             )}
             {showForm && !submittedFeedback && (
-              <div className="tw-flex tw-flex-col" ref={inlineQuestionRef}>
-                <span className="tw-mb-1">
+              <div className="flex flex-col" ref={inlineQuestionRef}>
+                <Label className="mb-1">
                   {positiveFeedback ? positiveQuestion : negativeQuestion}
-                </span>
-                <textarea
+                </Label>
+                <TextArea
                   rows={4}
                   value={message}
                   onChange={(e) => setMessage(e.target.value)}
-                  className="tw-rounded-sm tw-bg-transparent tw-border tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark tw-p-1 tw-font-base"
-                ></textarea>
+                />
+                {showLongForm && !positiveFeedback && (
+                  <Details summary="More Details" className="mt-1">
+                    <div className="flex flex-col gap-0.5">
+                      <div className="flex flex-col gap-0.5">
+                        <Label>
+                          Can you provide the exact steps you took before
+                          receiving the error? For example, the commands you
+                          ran.
+                        </Label>
+                        <TextArea
+                          rows={4}
+                          value={steps}
+                          onChange={(e) => setSteps(e.target.value)}
+                          placeholder="1. I ran npm dev..."
+                        />
+                      </div>
+                      <div className="flex flex-col gap-0.5">
+                        <Label>
+                          If applicable, what version of Medusa are you using?
+                          If a plugin is related to the error, please provide a
+                          version of that as well.
+                        </Label>
+                        <TextArea
+                          rows={4}
+                          value={medusaVersion}
+                          onChange={(e) => setMedusaVersion(e.target.value)}
+                          placeholder="@medusajs/medusa: vX"
+                        />
+                      </div>
+                      <div className="flex flex-col gap-0.5">
+                        <Label>
+                          Were you able to fix the error? If so, what steps did
+                          you follow?
+                        </Label>
+                        <TextArea
+                          rows={4}
+                          value={errorFix}
+                          onChange={(e) => setErrorFix(e.target.value)}
+                          placeholder="@medusajs/medusa: vX"
+                        />
+                      </div>
+                      <div className="flex flex-col gap-0.5">
+                        <Label>
+                          Can you provide your email or discord username? This
+                          would allow us to contact you for further info or
+                          assist you with your issue.
+                        </Label>
+                        <InputText
+                          value={contactInfo}
+                          onChange={(e) => setContactInfo(e.target.value)}
+                          placeholder="user@example.com"
+                        />
+                      </div>
+                    </div>
+                  </Details>
+                )}
                 <Button
                   onClick={submitFeedback}
                   disabled={loading}
-                  className="tw-mt-1 tw-w-fit"
+                  className="mt-1 w-fit"
                 >
                   {submitBtn}
                 </Button>
@@ -167,7 +237,7 @@ const Feedback: React.FC<FeedbackProps> = ({
             {submittedFeedback && (
               <div>
                 <div
-                  className="tw-flex tw-flex-col tw-text-label-large-plus"
+                  className="flex flex-col text-compact-large-plus"
                   ref={inlineMessageRef}
                 >
                   <span>{submitMessage}</span>

www/docs/src/components/Footer/SocialLinks/index.tsx

@@ -12,27 +12,23 @@ type SocialLinksProps = {
 const SocialLinks: React.FC<SocialLinksProps> = ({ links = [] }) => {
   const socialIcons = {
     twitter: (
-      <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" />
+      <IconTwitter iconColorClassName="fill-medusa-fg-muted dark:fill-medusa-fg-muted-dark group-hover:fill-medusa-fg-subtle dark:group-hover:fill-medusa-fg-subtle-dark" />
     ),
     github: (
-      <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" />
+      <IconGitHub iconColorClassName="fill-medusa-fg-muted dark:fill-medusa-fg-muted-dark group-hover:fill-medusa-fg-subtle dark:group-hover:fill-medusa-fg-subtle-dark" />
     ),
     discord: (
-      <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" />
+      <IconDiscord iconColorClassName="fill-medusa-fg-muted dark:fill-medusa-fg-muted-dark group-hover:fill-medusa-fg-subtle dark:group-hover:fill-medusa-fg-subtle-dark" />
     ),
     linkedin: (
-      <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" />
+      <IconLinkedIn iconColorClassName="fill-medusa-fg-muted dark:fill-medusa-fg-muted-dark group-hover:fill-medusa-fg-subtle dark:group-hover:fill-medusa-fg-subtle-dark" />
     ),
   }
 
   return (
-    <div className="tw-flex tw-items-center">
+    <div className="flex items-center">
       {links.map((link) => (
-        <a
-          className="tw-group tw-ml-1 first:tw-ml-0"
-          href={link.href}
-          key={link.type}
-        >
+        <a className="group ml-1 first:ml-0" href={link.href} key={link.type}>
           {socialIcons[link.type]}
         </a>
       ))}

www/docs/src/components/Input/Text/index.tsx

@@ -0,0 +1,32 @@
+import clsx from "clsx"
+import React from "react"
+type InputTextProps = {
+  className?: string
+} & React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+>
+
+const InputText: React.FC<InputTextProps> = (props) => {
+  return (
+    <input
+      {...props}
+      className={clsx(
+        "bg-medusa-bg-field dark:bg-medusa-bg-field-dark shadow-button-secondary dark:shadow-button-secondary-dark",
+        "rounded border-medusa-border-loud-muted dark:border-medusa-border-loud-muted-dark border border-solid",
+        "px-0.75 py-[9px]",
+        "hover:bg-medusa-bg-field-hover dark:hover:bg-medusa-bg-field-hover-dark",
+        "focus:border-medusa-border-interactive dark:focus:border-medusa-border-interactive-dark",
+        "active:border-medusa-border-interactive dark:active:border-medusa-border-interactive-dark",
+        "disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
+        "disabled:border-medusa-border-base dark:disabled:border-medusa-border-base-dark",
+        "placeholder:text-medusa-fg-muted dark:placeholder:text-medusa-fg-muted-dark",
+        "disabled:placeholder:text-medusa-fg-disabled dark:disabled:placeholder:text-medusa-fg-disabled-dark",
+        "text-compact-medium font-base",
+        props.className
+      )}
+    />
+  )
+}
+
+export default InputText

www/docs/src/components/Label/index.tsx

@@ -0,0 +1,21 @@
+import clsx from "clsx"
+import React from "react"
+
+type LabelProps = {
+  className?: string
+} & React.HTMLAttributes<HTMLSpanElement>
+
+const Label: React.FC<LabelProps> = ({ children, className }) => {
+  return (
+    <span
+      className={clsx(
+        "text-medusa-fg-base dark:text-medusa-fg-base-dark text-compact-medium-plus",
+        className
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+export default Label

www/docs/src/components/LargeCard/index.tsx

@@ -33,23 +33,23 @@ const LargeCard: React.FC<LargeCardProps> = ({
   return (
     <article
       className={clsx(
-        "tw-group tw-bg-docs-bg-surface dark:tw-bg-docs-bg-surface-dark",
-        "tw-rounded",
-        "tw-p-1 !tw-pb-1.5 tw-shadow-card-rest dark:tw-shadow-card-rest-dark",
-        "tw-flex tw-flex-col tw-justify-between tw-relative",
-        "[&: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%]",
+        "group bg-docs-bg-surface dark:bg-docs-bg-surface-dark",
+        "rounded",
+        "p-1 !pb-1.5 shadow-card-rest dark:shadow-card-rest-dark",
+        "flex flex-col justify-between relative",
+        "[&:nth-child(3n+1):before]:bg-[2%_52%] [&:nth-child(3n+2):before]:bg-[19%_16%] [&:nth-child(3n+3):before]: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",
+          "hover:bg-medusa-bg-subtle-hover dark:hover:bg-medusa-bg-base-hover-dark hover:shadow-card-hover dark:hover: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",
+          "group-hover:bg-medusa-bg-subtle-hover dark:group-hover:bg-medusa-bg-base-hover-dark group-hover:shadow-card-hover dark:group-hover:shadow-card-hover-dark",
+        "transition-all duration-200 ease-ease",
         "large-card",
         className
       )}
     >
-      <div className={clsx("tw-z-[3]")}>
+      <div className={clsx("z-[3]")}>
         {isSoon && (
-          <Badge variant={"purple"} className="tw-absolute tw-top-1 tw-right-1">
+          <Badge variant={"purple"} className="absolute top-1 right-1">
             Guide coming soon
           </Badge>
         )}
@@ -57,18 +57,18 @@ const LargeCard: React.FC<LargeCardProps> = ({
           <BorderedIcon
             IconComponent={Icon}
             icon={image}
-            iconClassName="tw-w-[20px] tw-h-[20px]"
-            wrapperClassName="tw-mb-1"
-            iconWrapperClassName="tw-p-[6px]"
+            iconClassName="w-[20px] h-[20px]"
+            wrapperClassName="mb-1"
+            iconWrapperClassName="p-[6px]"
           />
         )}
-        <div className="tw-mb-[4px]">
+        <div className="mb-0.25">
           <span
             className={clsx(
               isSoon &&
-                "group-hover:tw-text-medusa-text-disabled dark:group-hover:tw-text-medusa-text-disabled-dark",
-              "tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark tw-text-label-regular-plus",
-              "tw-transition-all tw-duration-200 tw-ease-ease"
+                "group-hover:text-medusa-fg-disabled dark:group-hover:text-medusa-fg-disabled-dark",
+              "text-medusa-fg-base dark:text-medusa-fg-base-dark text-compact-medium-plus",
+              "transition-all duration-200 ease-ease"
             )}
           >
             {title}
@@ -77,8 +77,8 @@ const LargeCard: React.FC<LargeCardProps> = ({
         <div
           className={clsx(
             isSoon &&
-              "group-hover:tw-text-medusa-text-disabled dark:group-hover:tw-text-medusa-text-disabled-dark",
-            "tw-transition-all tw-duration-200 tw-ease-ease tw-text-body-regular"
+              "group-hover:text-medusa-fg-disabled dark:group-hover:text-medusa-fg-disabled-dark",
+            "transition-all duration-200 ease-ease text-medium"
           )}
         >
           {children}
@@ -88,8 +88,8 @@ const LargeCard: React.FC<LargeCardProps> = ({
         <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"
+            "absolute top-0 left-0 w-full h-full z-[4] rounded",
+            isSoon && "group-hover:pointer-events-none"
           )}
         ></Link>
       )}

www/docs/src/components/LargeCardList/index.tsx

@@ -16,9 +16,9 @@ const LargeCardList: React.FC<LargeCardListProps> = ({
       className={clsx(
         "cards-grid",
         `grid-${colSize}`,
-        "tw-gap-1",
-        "[&+*:not(.large-card)]:tw-mt-2",
-        "[&+.large-card]:tw-mt-1",
+        "gap-1",
+        "[&+*:not(.large-card)]:mt-2",
+        "[&+.large-card]:mt-1",
         className
       )}
     >

www/docs/src/components/LearningPath/Finish/index.tsx

@@ -31,7 +31,7 @@ const LearningPathFinish: React.FC<LearningPathFinishProps> = ({
         <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">
+        <span className="text-compact-small text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark">
           {step.descriptionJSX}
         </span>
       )}

www/docs/src/components/LearningPath/Icon/index.tsx

@@ -14,17 +14,14 @@ const LearningPathIcon: React.FC<LearningPathIconProps> = ({
   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",
+        "rounded-full shadow-card-rest dark:shadow-card-rest-dark w-3 h-3 bg-docs-button-neutral dark:bg-docs-button-neutral-dark",
+        "flex justify-center items-center 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
-        )}
+        className={clsx("rounded-full w-2.5 h-2.5 no-zoom-img", imgClassName)}
       />
     </div>
   )

www/docs/src/components/LearningPath/Steps/Actions/index.tsx

@@ -22,15 +22,15 @@ const LearningPathStepActions: React.FC<LearningPathStepActionsType> = ({
   }
 
   return (
-    <div className="tw-flex tw-gap-0.5 tw-p-1 tw-justify-end tw-items-center">
+    <div className="flex gap-0.5 p-1 justify-end items-center">
       <Button onClick={onClose}>Close</Button>
       {hasNextStep() && (
-        <Button onClick={nextStep} btnTypeClassName="btn-inverted">
+        <Button onClick={nextStep} btnTypeClassName="btn-primary">
           Next
         </Button>
       )}
       {!hasNextStep() && (
-        <Button onClick={handleFinish} btnTypeClassName="btn-inverted">
+        <Button onClick={handleFinish} btnTypeClassName="btn-primary">
           Finish
         </Button>
       )}

www/docs/src/components/LearningPath/Steps/index.tsx

@@ -24,38 +24,38 @@ const LearningPathSteps: React.FC<LearningPathStepsProps> = ({ ...rest }) => {
       {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"
+            "border-0 border-b border-solid border-medusa-border-base dark:border-medusa-border-base-dark",
+            "relative 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">
+          <div className={clsx("flex items-center gap-1")}>
+            <div className="w-2 flex-none flex items-center 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"
+                  className="shadow-active dark:shadow-active-dark rounded-full"
+                  iconColorClassName="stroke-medusa-fg-interactive dark:stroke-medusa-fg-interactive-dark"
                 />
               )}
               {index < currentStep && (
-                <IconCheckCircleSolid iconColorClassName="tw-fill-medusa-icon-interactive dark:tw-fill-medusa-icon-interactive-dark" />
+                <IconCheckCircleSolid iconColorClassName="fill-medusa-fg-interactive dark:fill-medusa-fg-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"
+                "text-compact-medium-plus text-medusa-fg-base dark:text-medusa-fg-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("flex items-center gap-1")}>
+              <div className="w-2 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"
+                  "text-medium text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark mt-1"
                 )}
               >
                 {step.descriptionJSX ?? step.description}
@@ -65,9 +65,7 @@ const LearningPathSteps: React.FC<LearningPathStepsProps> = ({ ...rest }) => {
           {index < currentStep && (
             <Link
               href={step.path}
-              className={clsx(
-                "tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full"
-              )}
+              className={clsx("absolute top-0 left-0 w-full h-full")}
               onClick={(e) => {
                 e.preventDefault()
                 goToStep(index)

www/docs/src/components/LearningPath/index.tsx

@@ -3,7 +3,6 @@ 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"
@@ -34,20 +33,20 @@ const LearningPath: React.FC<LearningPathProps> = ({
   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",
+        "rounded shadow-card-rest dark:shadow-card-rest-dark bg-docs-bg-surface dark:bg-docs-bg-surface-dark mt-1.5 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"
+          "flex items-center gap-1 p-1 border-0 border-b border-solid border-medusa-border-base dark:border-medusa-border-base-dark"
         )}
       >
         <LearningPathIcon />
-        <div className={clsx("tw-flex-auto")}>
+        <div className={clsx("flex-auto")}>
           <span
             className={clsx(
-              "tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark tw-text-label-large-plus tw-block"
+              "text-medusa-fg-base dark:text-medusa-fg-base-dark text-compact-large-plus block"
             )}
           >
             {path.label}
@@ -55,34 +54,32 @@ const LearningPath: React.FC<LearningPathProps> = ({
           {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"
+                "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark text-compact-medium mt-0.25 inline-block"
               )}
             >
               {path.description}
             </span>
           )}
         </div>
-        <Button onClick={handleClick} className={clsx("tw-flex-initial")}>
+        <Button onClick={handleClick} className={clsx("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",
+            "flex items-center p-1 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"
+              "border-0 border-b border-solid border-medusa-border-base dark: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 className={clsx("w-3 flex items-center justify-center")}>
+            <IconCircleMiniSolid iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
           </div>
           <span
             className={clsx(
-              "tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark tw-text-label-regular-plus"
+              "text-medusa-fg-base dark:text-medusa-fg-base-dark text-compact-medium-plus"
             )}
           >
             {step.title}

www/docs/src/components/MDXComponents/InlineCode.tsx

@@ -8,17 +8,17 @@ const MDXInlineCode: React.FC<Props> = (props) => {
     <CopyButton
       text={props.children as string}
       buttonClassName={clsx(
-        "tw-bg-transparent tw-border-0 tw-p-0 tw-inline tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark",
-        "active:[&>code]:tw-bg-medusa-bg-subtle-pressed dark:active:[&>code]:tw-bg-medusa-bg-subtle-pressed-dark",
-        "focus:[&>code]:tw-bg-medusa-bg-subtle-pressed dark:focus:[&>code]:tw-bg-medusa-bg-subtle-pressed-dark",
-        "hover:[&>code]:tw-bg-medusa-bg-subtle-hover dark:hover:[&>code]:tw-bg-medusa-bg-base-hover-dark"
+        "bg-transparent border-0 p-0 inline text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
+        "active:[&>code]:bg-medusa-bg-subtle-pressed dark:active:[&>code]:bg-medusa-bg-subtle-pressed-dark",
+        "focus:[&>code]:bg-medusa-bg-subtle-pressed dark:focus:[&>code]:bg-medusa-bg-subtle-pressed-dark",
+        "hover:[&>code]:bg-medusa-bg-subtle-hover dark:hover:[&>code]:bg-medusa-bg-base-hover-dark"
       )}
     >
       <code
         {...props}
         className={clsx(
-          "tw-border tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark",
-          "tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark tw-leading-6"
+          "border border-solid border-medusa-border-base dark:border-medusa-border-base-dark",
+          "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark leading-6"
         )}
       />
     </CopyButton>

www/docs/src/components/Modal/index.tsx

@@ -0,0 +1,73 @@
+import clsx from "clsx"
+import React from "react"
+import Button, { ButtonProps } from "../Button"
+import IconXMark from "../../theme/Icon/XMark"
+
+export type ModalProps = {
+  className?: string
+  title?: string
+  actions?: ButtonProps[]
+} & React.DetailedHTMLProps<
+  React.DialogHTMLAttributes<HTMLDialogElement>,
+  HTMLDialogElement
+>
+
+const Modal: React.FC<ModalProps> = ({
+  className,
+  title,
+  actions,
+  children,
+  ...props
+}) => {
+  return (
+    <dialog
+      {...props}
+      className={clsx(
+        "absolute top-0 left-0 flex w-screen h-screen justify-center items-center",
+        "",
+        className
+      )}
+    >
+      <div
+        className={clsx(
+          "bg-medusa-bg-base dark:bg-medusa-bg-base-dark rounded",
+          "border-medusa-border-base dark:border-medusa-border-base-dark border border-solid",
+          "shadow-modal dark:shadow-modal-dark",
+          "w-[90%] md:w-[75%] lg:w-1/2"
+        )}
+      >
+        <div
+          className={clsx(
+            "py-1.5 px-2 border-0 border-solid border-b border-medusa-border-base dark:border-medusa-border-base-dark",
+            "flex justify-between items-center"
+          )}
+        >
+          <span
+            className={clsx(
+              "text-h1 text-medusa-fg-base dark:text-medusa-fg-base-dark"
+            )}
+          >
+            {title}
+          </span>
+          <IconXMark />
+        </div>
+        <div>{children}</div>
+        {actions && actions?.length > 0 && (
+          <div
+            className={clsx(
+              "pl-0 pr-2 px-1.5",
+              "border-0 border-solid border-t border-medusa-border-base dark:border-medusa-border-base-dark",
+              "flex justify-end gap-0.5"
+            )}
+          >
+            {actions.map((action, index) => (
+              <Button {...action} key={index} />
+            ))}
+          </div>
+        )}
+      </div>
+    </dialog>
+  )
+}
+
+export default Modal

www/docs/src/components/Navbar/Actions/index.tsx

@@ -14,7 +14,7 @@ const NavbarActions: React.FC<NavbarActionsProps> = ({
   className = "",
 }) => {
   return (
-    <div className={clsx("lg:tw-block tw-hidden", className)}>
+    <div className={clsx("lg:block hidden", className)}>
       {items.map((item, index) => {
         // eslint-disable-next-line no-case-declarations
         const ItemIcon = item.icon ? Icon[item.icon] : null
@@ -25,7 +25,7 @@ const NavbarActions: React.FC<NavbarActionsProps> = ({
                 text={item.title}
                 html={item.html}
                 key={index}
-                tooltipClassName="!tw-text-label-x-small-plus"
+                tooltipClassName="!text-compact-x-small-plus"
               >
                 <a
                   href={item.href}
@@ -46,7 +46,7 @@ const NavbarActions: React.FC<NavbarActionsProps> = ({
                 text={item.title}
                 html={item.html}
                 key={index}
-                tooltipClassName="!tw-text-label-x-small-plus"
+                tooltipClassName="!text-compact-x-small-plus"
               >
                 <button
                   className={clsx(

www/docs/src/components/Notification/Container/index.tsx

@@ -35,7 +35,7 @@ const NotificationContainer = () => {
               onClose={() => handleClose(notification)}
               className={clsx(
                 notification.className,
-                "!tw-relative !tw-top-0 !tw-bottom-0 !tw-right-0"
+                "!relative !top-0 !bottom-0 !right-0"
               )}
             />
           </CSSTransition>
@@ -48,11 +48,11 @@ const NotificationContainer = () => {
     <>
       {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"
+        "flex fixed flex-col gap-0.5 md:right-1 right-0 md:top-1 top-0 z-[400] md:w-auto 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"
+        "flex flex-col gap-0.5 fixed md:right-1 right-0 md:bottom-1 bottom-0 z-[400] md:w-auto w-full"
       )}
     </>
   )

www/docs/src/components/Notification/Item/Layout/Default/index.tsx

@@ -24,33 +24,32 @@ const NotificationItemLayoutDefault: React.FC<
 }) => {
   return (
     <>
-      <div className={clsx("tw-flex tw-gap-1 tw-p-1")}>
+      <div className={clsx("flex gap-1 p-1")}>
         {type !== "none" && (
           <div
             className={clsx(
-              type !== "custom" &&
-                "tw-w-2 tw-flex tw-justify-center tw-items-center"
+              type !== "custom" && "w-2 flex justify-center items-center"
             )}
           >
             {type === "info" && (
-              <IconInformationCircleSolid iconColorClassName="tw-fill-medusa-support-info dark:tw-fill-medusa-support-info-dark" />
+              <IconInformationCircleSolid iconColorClassName="fill-medusa-fg-interactive-dark" />
             )}
             {type === "error" && (
-              <IconXCircleSolid iconColorClassName="tw-fill-medusa-tag-red-icon dark:tw-fill-medusa-tag-red-icon-dark" />
+              <IconXCircleSolid iconColorClassName="fill-medusa-tag-red-icon dark:fill-medusa-tag-red-icon-dark" />
             )}
             {type === "warning" && (
-              <IconExclamationCircleSolid iconColorClassName="tw-fill-medusa-tag-orange-icon dark:tw-fill-medusa-tag-orange-icon-dark" />
+              <IconExclamationCircleSolid iconColorClassName="fill-medusa-tag-orange-icon dark:fill-medusa-tag-orange-icon-dark" />
             )}
             {type === "success" && (
-              <IconCheckCircleSolid iconColorClassName="tw-fill-medusa-tag-green-icon dark:tw-fill-medusa-tag-green-icon-dark" />
+              <IconCheckCircleSolid iconColorClassName="fill-medusa-tag-green-icon dark: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"
+            "text-compact-medium-plus",
+            "text-medusa-fg-base dark:text-medusa-fg-base-dark"
           )}
         >
           {title}
@@ -59,16 +58,16 @@ const NotificationItemLayoutDefault: React.FC<
       {(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"
+            "flex pt-0 pr-1 pb-1.5 pl-1 gap-1",
+            "border-0 border-b border-solid border-medusa-border-base dark: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")}>
+          <div className="w-2 flex-none"></div>
+          <div className={clsx("flex flex-col", children && "gap-1")}>
             {text && (
               <span
                 className={clsx(
-                  "tw-text-body-regular tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark"
+                  "text-medium text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark"
                 )}
               >
                 {text}
@@ -79,7 +78,7 @@ const NotificationItemLayoutDefault: React.FC<
         </div>
       )}
       {isClosable && (
-        <div className={clsx("tw-p-1 tw-flex tw-justify-end tw-items-center")}>
+        <div className={clsx("p-1 flex justify-end items-center")}>
           <Button onClick={handleClose}>Close</Button>
         </div>
       )}

www/docs/src/components/Notification/Item/index.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { Children, ReactElement, useEffect, useRef } from "react"
+import React, { Children, ReactElement } from "react"
 import NotificationItemLayoutDefault from "./Layout/Default"
 
 export type NotificationItemProps = {
@@ -35,13 +35,13 @@ const Notification = ({
   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",
+        "md:max-w-[320px] md:w-[320px] w-full bg-medusa-bg-base dark:bg-medusa-bg-base-dark rounded",
+        "shadow-flyout dark:shadow-flyout-dark",
+        "fixed md:right-1 left-0 block z-[400]",
+        placement === "bottom" && "md:bottom-1 bottom-0",
+        placement === "top" && "md:top-1 top-0",
+        "opacity-100 transition-opacity duration-200 ease-ease",
+        !show && "!opacity-0",
         className
       )}
     >

www/docs/src/components/Rating/index.tsx

@@ -40,7 +40,7 @@ const Rating: React.FC<RatingProps> = ({
   }
 
   return (
-    <div className={clsx("tw-flex tw-gap-0.5", className)}>
+    <div className={clsx("flex gap-0.5", className)}>
       {starArr.map((i) => {
         const isSelected =
           (rating !== 0 && rating - 1 >= i) ||
@@ -68,7 +68,7 @@ const Rating: React.FC<RatingProps> = ({
           >
             {!isSelected && <IconStar />}
             {isSelected && (
-              <IconStarSolid iconColorClassName="tw-fill-medusa-tag-orange-icon dark:tw-fill-medusa-tag-orange-icon-dark" />
+              <IconStarSolid iconColorClassName="fill-medusa-tag-orange-icon dark:fill-medusa-tag-orange-icon-dark" />
             )}
           </button>
         )

www/docs/src/components/TextArea/index.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import clsx from "clsx"
+
+type TextAreaProps = {
+  className?: string
+} & React.DetailedHTMLProps<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  HTMLTextAreaElement
+>
+
+const TextArea: React.FC<TextAreaProps> = (props) => {
+  return (
+    <textarea
+      {...props}
+      className={clsx(
+        "bg-medusa-bg-field dark:bg-medusa-bg-field-dark shadow-button-secondary dark:shadow-button-secondary-dark",
+        "rounded border-medusa-border-loud-muted dark:border-medusa-border-loud-muted-dark border border-solid",
+        "px-0.75 pt-0.4 pb-[9px]",
+        "hover:bg-medusa-bg-field-hover dark:hover:bg-medusa-bg-field-hover-dark",
+        "focus:border-medusa-border-interactive dark:focus:border-medusa-border-interactive-dark",
+        "active:border-medusa-border-interactive dark:active:border-medusa-border-interactive-dark",
+        "disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
+        "disabled:border-medusa-border-base dark:disabled:border-medusa-border-base-dark",
+        "placeholder:text-medusa-fg-muted dark:placeholder:text-medusa-fg-muted-dark",
+        "disabled:placeholder:text-medusa-fg-disabled dark:disabled:placeholder:text-medusa-fg-disabled-dark",
+        "text-medium font-base",
+        props.className
+      )}
+    />
+  )
+}
+
+export default TextArea

www/docs/src/components/Troubleshooting/index.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import Details from "@theme/Details"
+import Details from "../../theme/Details"
+import clsx from "clsx"
 
 type TroubleshootingSection = {
   title: string
@@ -14,7 +15,11 @@ const Troubleshooting: React.FC<TroubleshootingProps> = ({ sections }) => {
   return (
     <>
       {sections.map(({ title, content }, index) => (
-        <Details summary={title} key={index}>
+        <Details
+          summary={title}
+          key={index}
+          className={clsx(index !== 0 && "border-t-0")}
+        >
           {content}
         </Details>
       ))}

www/docs/src/components/UiIcon/index.tsx

@@ -19,7 +19,7 @@ const UiIcon: React.FC<UiIconProps> = ({
         light: lightIcon,
         dark: darkIcon || lightIcon,
       }}
-      className="tw-align-sub tw-w-[20px] tw-h-[20px]"
+      className="align-sub w-[20px] h-[20px]"
     />
   )
 }