From 42dcb8b5a7daf9b5d24fbcb480bb7bc042f25445 Mon Sep 17 00:00:00 2001
From: Daniel Polo <od.polo@gmail.com>
Date: Mon, 4 Aug 2025 16:27:58 -0700
Subject: [PATCH 1/3] Update dependencies and refactor styles in
 mini-apps-ui-kit-react

- Upgraded Tailwind CSS to version 4.1.11 and integrated @tailwindcss/vite for improved build performance.
- Refactored various components to use updated height and size classes for consistency.
- Adjusted global styles to utilize @import for Tailwind CSS and organized font-face declarations.
- Enhanced component styles for better responsiveness and accessibility.
- Fixed minor issues in class names and structure across multiple components.
---
 packages/mini-apps-ui-kit-react/package.json  |   7 +-
 .../src/components/BottomBar/BottomBar.tsx    |   2 +-
 .../components/CircularIcon/CircularIcon.tsx  |  10 +-
 .../CircularState/CircularState.tsx           |   2 +-
 .../components/ColorPicker/ColorPicker.tsx    |   2 +-
 .../src/components/Form/Form.tsx              |   2 +-
 .../src/components/Input/Input.tsx            |  12 +-
 .../src/components/ListItem/ListItem.tsx      |   8 +-
 .../src/components/Marble/Marble.tsx          |   2 +-
 .../src/components/OTPField/OTPField.tsx      |   6 +-
 .../components/PhoneField/CountryListItem.tsx |   2 +-
 .../PhoneField/GroupedCountryList.tsx         |   2 +-
 .../components/SearchField/SearchField.tsx    |   2 +-
 .../src/components/Select/Select.tsx          |   6 +-
 .../src/components/Skeleton/Skeleton.tsx      |  10 +-
 .../src/components/Tabs/Tabs.tsx              |   4 +-
 .../src/components/TextArea/TextArea.tsx      |   2 +-
 .../src/components/Toast/Toast.tsx            |   6 +-
 .../src/components/TopBar/TopBar.tsx          |   2 +-
 .../src/lib/constants/dropdownStyles.ts       |   2 +-
 .../stories/Drawer.stories.tsx                |   4 +-
 .../stories/NumberPad.stories.tsx             |   4 +-
 .../mini-apps-ui-kit-react/styles/globals.css | 165 +++---
 .../mini-apps-ui-kit-react/vite.config.ts     |   2 +
 pnpm-lock.yaml                                | 476 +++++++++++++++---
 25 files changed, 552 insertions(+), 190 deletions(-)

diff --git a/packages/mini-apps-ui-kit-react/package.json b/packages/mini-apps-ui-kit-react/package.json
index cd267ef9..4c9afb93 100644
--- a/packages/mini-apps-ui-kit-react/package.json
+++ b/packages/mini-apps-ui-kit-react/package.json
@@ -16,8 +16,8 @@
     "storybook": "storybook dev -p 6006",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "sb:move": "mv ./storybook-static ../../storybook-static",
-    "dev:sb": "concurrently \"tailwindcss -i ./styles/globals.css -o ./dist/globals.css --watch\" \"pnpm storybook\"",
-    "build:tailwind": "tailwindcss -i ./styles/globals.css -o ./dist/globals.css --minify",
+    "dev:sb": "concurrently \"npx @tailwindcss/cli -i ./styles/globals.css -o ./dist/globals.css --watch\" \"pnpm storybook\"",
+    "build:tailwind": "npx @tailwindcss/cli -i ./styles/globals.css -o ./dist/globals.css --minify",
     "build:sb": "pnpm build:tailwind && storybook build",
     "build": "tsc -b ./tsconfig.lib.json && vite build && pnpm build:tailwind",
     "lint": "eslint .",
@@ -48,6 +48,7 @@
     "@storybook/react-vite": "^8.4.7",
     "@storybook/test": "^8.4.7",
     "@storybook/theming": "^8.5.5",
+    "@tailwindcss/vite": "^4.1.11",
     "@types/glob": "^8.1.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
@@ -65,7 +66,7 @@
     "rollup-plugin-visualizer": "^6.0.3",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^8.4.7",
-    "tailwindcss": "^3.4.15",
+    "tailwindcss": "^4.1.11",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
diff --git a/packages/mini-apps-ui-kit-react/src/components/BottomBar/BottomBar.tsx b/packages/mini-apps-ui-kit-react/src/components/BottomBar/BottomBar.tsx
index b266937b..970b5ec6 100644
--- a/packages/mini-apps-ui-kit-react/src/components/BottomBar/BottomBar.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/BottomBar/BottomBar.tsx
@@ -6,7 +6,7 @@ import { forwardRef } from "react";
 const bottomBarVariants = cva("w-full gap-4", {
   variants: {
     direction: {
-      horizontal: "grid grid-cols-1 [&>*]:col-span-1 [&:has(>*:nth-child(2))]:grid-cols-2",
+      horizontal: "grid grid-cols-1 *:col-span-1 [&:has(>*:nth-child(2))]:grid-cols-2",
       vertical: "flex flex-col-reverse",
     },
   },
diff --git a/packages/mini-apps-ui-kit-react/src/components/CircularIcon/CircularIcon.tsx b/packages/mini-apps-ui-kit-react/src/components/CircularIcon/CircularIcon.tsx
index 03c78f02..fc084b0d 100644
--- a/packages/mini-apps-ui-kit-react/src/components/CircularIcon/CircularIcon.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/CircularIcon/CircularIcon.tsx
@@ -16,14 +16,14 @@ const sizeClasses: Record<CircularIconSize, string> = {
   sm: "size-11",
   md: "size-12",
   lg: "size-16",
-  xl: "size-[5.5rem]",
+  xl: "size-22",
 };
 
 const iconClasses: Record<CircularIconSize, string> = {
-  xs: "size-[0.875rem]",
-  sm: "size-[1.5rem]",
-  md: "size-[1.625rem]",
-  lg: "size-[2.125rem]",
+  xs: "size-3.5",
+  sm: "size-6",
+  md: "size-6.5",
+  lg: "size-8.5",
   xl: "size-12",
 };
 
diff --git a/packages/mini-apps-ui-kit-react/src/components/CircularState/CircularState.tsx b/packages/mini-apps-ui-kit-react/src/components/CircularState/CircularState.tsx
index f282e442..74286d46 100644
--- a/packages/mini-apps-ui-kit-react/src/components/CircularState/CircularState.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/CircularState/CircularState.tsx
@@ -34,7 +34,7 @@ function CircularState({ value, size, className, ...props }: CircularStateProps)
         "text-gray-0",
         size !== "xs" && "shadow-[inset_0_0_0_1px_rgba(255,255,255,0.3)]",
         iconClasses[value],
-        "bg-[radial-gradient(111.32%_111.8%_at_22.73%_0%,_rgba(255,255,255,0.2)_0%,_rgba(255,255,255,0)_100%)]",
+        "bg-[radial-gradient(111.32%_111.8%_at_22.73%_0%,rgba(255,255,255,0.2)_0%,rgba(255,255,255,0)_100%)]",
         className,
       )}
       size={size}
diff --git a/packages/mini-apps-ui-kit-react/src/components/ColorPicker/ColorPicker.tsx b/packages/mini-apps-ui-kit-react/src/components/ColorPicker/ColorPicker.tsx
index 72170191..84d6c69f 100644
--- a/packages/mini-apps-ui-kit-react/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/ColorPicker/ColorPicker.tsx
@@ -23,7 +23,7 @@ const ColorPickerItem = forwardRef<HTMLButtonElement, ColorPickerItemProps>(
       <RadioGroup.Item
         ref={ref}
         value={value}
-        className="size-[3.25rem] cursor-default rounded-full outline-none flex items-center justify-center relative disabled:opacity-90 disabled:cursor-not-allowed"
+        className="size-13 cursor-default rounded-full outline-none flex items-center justify-center relative disabled:opacity-90 disabled:cursor-not-allowed"
         style={{
           background: value,
         }}
diff --git a/packages/mini-apps-ui-kit-react/src/components/Form/Form.tsx b/packages/mini-apps-ui-kit-react/src/components/Form/Form.tsx
index 78815b04..c5dce19f 100644
--- a/packages/mini-apps-ui-kit-react/src/components/Form/Form.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/Form/Form.tsx
@@ -27,7 +27,7 @@ const Message = forwardRef<
     <RadixForm.Message
       ref={ref}
       className={cn(
-        "h-[1.625rem] mt-1 flex items-center",
+        "h-6.5 mt-1 flex items-center",
         typographyVariants({
           variant: "body",
           level: 4,
diff --git a/packages/mini-apps-ui-kit-react/src/components/Input/Input.tsx b/packages/mini-apps-ui-kit-react/src/components/Input/Input.tsx
index b63c5db2..070e7ff3 100644
--- a/packages/mini-apps-ui-kit-react/src/components/Input/Input.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/Input/Input.tsx
@@ -11,7 +11,7 @@ const inputContainerVariants = cva(
   [
     "bg-gray-100",
     "text-gray-900",
-    "h-[3.5rem]",
+    "h-14",
     "inline-flex",
     "w-full",
     "shrink",
@@ -100,16 +100,16 @@ const floatingLabelVariants = cva([
   "ease-out",
   // Peer states for floating effect (when input has value or is focused)
   "peer-focus:pointer-events-auto",
-  "peer-focus:top-[1.125rem]",
+  "peer-focus:top-4.5",
   "peer-focus:text-xs",
   "peer-focus:bg-base-100", // Match input background
   // State when placeholder is not shown (i.e., input has value)
-  "peer-[:not(:placeholder-shown)]:pointer-events-auto",
-  "peer-[:not(:placeholder-shown)]:top-[1.125rem]",
-  "peer-[:not(:placeholder-shown)]:text-xs",
+  "peer-not-placeholder-shown:pointer-events-auto",
+  "peer-not-placeholder-shown:top-4.5",
+  "peer-not-placeholder-shown:text-xs",
 ]);
 
-const dividerVariants = cva("border-r h-[1.625rem] w-1", {
+const dividerVariants = cva("border-r h-6.5 w-1", {
   variants: {
     error: {
       true: "border-error-600",
diff --git a/packages/mini-apps-ui-kit-react/src/components/ListItem/ListItem.tsx b/packages/mini-apps-ui-kit-react/src/components/ListItem/ListItem.tsx
index 52d752e6..2651d291 100644
--- a/packages/mini-apps-ui-kit-react/src/components/ListItem/ListItem.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/ListItem/ListItem.tsx
@@ -5,7 +5,7 @@ import { forwardRef } from "react";
 import { Typography } from "../Typography";
 
 const listItemStyles = cva(
-  "h-[4.75rem] bg-gray-50 p-4 rounded-2xl flex items-center text-gray-900 w-full disabled:text-gray-400 disabled:cursor-not-allowed",
+  "h-19 bg-gray-50 p-4 rounded-2xl flex items-center text-gray-900 w-full disabled:text-gray-400 disabled:cursor-not-allowed",
 );
 
 /**
@@ -32,8 +32,8 @@ const ListItem = forwardRef<HTMLButtonElement, ListItemProps>(
   ({ children, label, description, startAdornment, endAdornment, disabled, ...props }, ref) => {
     return (
       <button ref={ref} className={listItemStyles()} {...props} disabled={disabled}>
-        {startAdornment && <div className="mr-3 flex-shrink-0">{startAdornment}</div>}
-        <div className="flex flex-col flex-grow min-w-0 items-start gap-0.5">
+        {startAdornment && <div className="mr-3 shrink-0">{startAdornment}</div>}
+        <div className="flex flex-col grow min-w-0 items-start gap-0.5">
           {label && (
             <Typography variant="subtitle" level={2} className="truncate grow w-full text-left">
               {label}
@@ -51,7 +51,7 @@ const ListItem = forwardRef<HTMLButtonElement, ListItemProps>(
             </Typography>
           )}
         </div>
-        {endAdornment && <div className="ml-4 flex-shrink-0">{endAdornment}</div>}
+        {endAdornment && <div className="ml-4 shrink-0">{endAdornment}</div>}
       </button>
     );
   },
diff --git a/packages/mini-apps-ui-kit-react/src/components/Marble/Marble.tsx b/packages/mini-apps-ui-kit-react/src/components/Marble/Marble.tsx
index 756fe8a9..8975308c 100644
--- a/packages/mini-apps-ui-kit-react/src/components/Marble/Marble.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/Marble/Marble.tsx
@@ -9,7 +9,7 @@ const Marble = forwardRef<HTMLImageElement, ComponentProps<"img">>((props, ref)
       ref={ref}
       alt="Marble"
       className={cn(
-        "rounded-full border-2 border-gray-100 p-[3px] aspect-square w-[7.5rem] object-cover",
+        "rounded-full border-2 border-gray-100 p-[3px] aspect-square w-30 object-cover",
         className,
       )}
       {...rest}
diff --git a/packages/mini-apps-ui-kit-react/src/components/OTPField/OTPField.tsx b/packages/mini-apps-ui-kit-react/src/components/OTPField/OTPField.tsx
index d68fd5c9..467b867c 100644
--- a/packages/mini-apps-ui-kit-react/src/components/OTPField/OTPField.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/OTPField/OTPField.tsx
@@ -16,7 +16,7 @@ import { typographyVariants } from "../Typography/Typography";
 
 export const inputVariants = cva(
   cn(
-    "peer h-[3.5rem] w-full rounded-[0.625rem] border border-gray-100 bg-gray-100 px-4 outline-none transition duration-300",
+    "peer h-14 w-full rounded-[0.625rem] border border-gray-100 bg-gray-100 px-4 outline-none transition duration-300",
     "placeholder:text-gray-500",
     "focus:border-gray-300 focus:bg-gray-0 focus-visible:outline-none",
     "disabled:cursor-not-allowed disabled:opacity-50",
@@ -121,7 +121,7 @@ const OTPField = React.forwardRef<React.ElementRef<typeof OTPInput>, OTPFieldPro
         inputMode={inputModeDictionary[mode]}
         pattern={pattern || patternDictionary[mode]}
         onChange={withHaptics(onChange)}
-        containerClassName="flex items-center gap-2 has-[:disabled]:opacity-50"
+        containerClassName="flex items-center gap-2 has-disabled:opacity-50"
         render={({ slots }) => (
           <>
             {slots.map(({ isActive, char }, idx) => (
@@ -132,7 +132,7 @@ const OTPField = React.forwardRef<React.ElementRef<typeof OTPInput>, OTPFieldPro
                 className={cn(
                   inputVariants({ error }),
                   typographyVariants({ variant: "body", level: 2 }),
-                  "w-12 h-[4.25rem] rounded-lg flex items-center justify-center",
+                  "w-12 h-17 rounded-lg flex items-center justify-center",
                   (isActive || error) && "z-10 bg-gray-0",
                 )}
               >
diff --git a/packages/mini-apps-ui-kit-react/src/components/PhoneField/CountryListItem.tsx b/packages/mini-apps-ui-kit-react/src/components/PhoneField/CountryListItem.tsx
index d961b502..309458c2 100644
--- a/packages/mini-apps-ui-kit-react/src/components/PhoneField/CountryListItem.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/PhoneField/CountryListItem.tsx
@@ -20,7 +20,7 @@ const CountryListItem = ({
     <button
       type="button"
       data-country={countryCode}
-      className="h-[3.75rem] flex items-center w-full gap-2 cursor-pointer"
+      className="h-15 flex items-center w-full gap-2 cursor-pointer"
       onClick={() => onClick?.(countryCode)}
       {...(isSelected && { "data-selected": true })}
     >
diff --git a/packages/mini-apps-ui-kit-react/src/components/PhoneField/GroupedCountryList.tsx b/packages/mini-apps-ui-kit-react/src/components/PhoneField/GroupedCountryList.tsx
index b31b12b7..42b9c13d 100644
--- a/packages/mini-apps-ui-kit-react/src/components/PhoneField/GroupedCountryList.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/PhoneField/GroupedCountryList.tsx
@@ -54,7 +54,7 @@ export function GroupedCountryList({
                 />
               </DrawerClose>
             ))}
-            <div className="h-[1px] bg-gray-200 my-4 group-last:hidden" />
+            <div className="h-px bg-gray-200 my-4 group-last:hidden" />
           </div>
         ))}
     </>
diff --git a/packages/mini-apps-ui-kit-react/src/components/SearchField/SearchField.tsx b/packages/mini-apps-ui-kit-react/src/components/SearchField/SearchField.tsx
index 69706735..17664674 100644
--- a/packages/mini-apps-ui-kit-react/src/components/SearchField/SearchField.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/SearchField/SearchField.tsx
@@ -111,7 +111,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
           setValue(e.target.value);
           props.onChange?.(e);
         }}
-        className="rounded-full h-[3.125rem]"
+        className="rounded-full h-12.5"
       />
     );
   },
diff --git a/packages/mini-apps-ui-kit-react/src/components/Select/Select.tsx b/packages/mini-apps-ui-kit-react/src/components/Select/Select.tsx
index f13c3210..a8bf750b 100644
--- a/packages/mini-apps-ui-kit-react/src/components/Select/Select.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/Select/Select.tsx
@@ -13,12 +13,12 @@ import { typographyVariants } from "../Typography/Typography";
 const selectVariants = cva(
   cn(
     "flex items-center justify-between whitespace-nowrap [&>span:first-of-type]:line-clamp-1",
-    "peer h-[3.5rem] w-full rounded-[0.625rem] border border-gray-100 bg-gray-100 px-4 outline-none transition duration-300",
+    "peer h-14 w-full rounded-[0.625rem] border border-gray-100 bg-gray-100 px-4 outline-none transition duration-300",
     "placeholder:text-gray-500",
     "focus:border-gray-300 focus:bg-gray-0 focus-visible:outline-none",
     "disabled:cursor-not-allowed disabled:opacity-50",
     // Radix Select styles
-    "data-[placeholder]:text-gray-500",
+    "data-placeholder:text-gray-500",
     "data-[state=closed]:bg-gray-100 data-[state=closed]:border-gray-100",
   ),
   {
@@ -176,7 +176,7 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
           <RadixSelect.Content position="popper" className={cn(DROPDOWN_CONTAINER_STYLES)}>
             <RadixSelect.Viewport
               className={cn(
-                "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] p-2",
+                "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) p-2",
                 options.length === 0 && "hidden",
               )}
             >
diff --git a/packages/mini-apps-ui-kit-react/src/components/Skeleton/Skeleton.tsx b/packages/mini-apps-ui-kit-react/src/components/Skeleton/Skeleton.tsx
index 6a9adada..26770e66 100644
--- a/packages/mini-apps-ui-kit-react/src/components/Skeleton/Skeleton.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/Skeleton/Skeleton.tsx
@@ -88,7 +88,7 @@ export const skeletonVariants = cva("", {
     {
       variant: "heading",
       level: 2,
-      className: "h-[2.25rem] py-[0.1875rem]",
+      className: "h-9 py-0.75",
     },
     {
       variant: "heading",
@@ -114,7 +114,7 @@ export const skeletonVariants = cva("", {
     {
       variant: "subtitle",
       level: 3,
-      className: "h-[1.125rem] py-[0.09375rem]",
+      className: "h-4.5 py-[0.09375rem]",
     },
     {
       variant: "subtitle",
@@ -130,7 +130,7 @@ export const skeletonVariants = cva("", {
     {
       variant: "label",
       level: 2,
-      className: "h-[1.125rem] py-[0.09375rem]",
+      className: "h-4.5 py-[0.09375rem]",
     },
     // Body
     {
@@ -162,12 +162,12 @@ export const skeletonVariants = cva("", {
     {
       variant: "number",
       level: 2,
-      className: "h-[3rem] py-[0.25rem]",
+      className: "h-12 py-1",
     },
     {
       variant: "number",
       level: 3,
-      className: "h-[2.25rem] py-[0.1875rem]",
+      className: "h-9 py-0.75",
     },
     {
       variant: "number",
diff --git a/packages/mini-apps-ui-kit-react/src/components/Tabs/Tabs.tsx b/packages/mini-apps-ui-kit-react/src/components/Tabs/Tabs.tsx
index 5188b21a..032a41be 100644
--- a/packages/mini-apps-ui-kit-react/src/components/Tabs/Tabs.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/Tabs/Tabs.tsx
@@ -48,12 +48,12 @@ const TabItem = React.forwardRef<React.ElementRef<typeof ToggleGroup.Item>, TabI
       {...props}
     >
       {/* Only show the outline icon when NOT alt */}
-      <Slot className={cn("h-[1.625rem] shrink-0", altIcon && "group-data-[state=on]:hidden")}>
+      <Slot className={cn("h-6.5 shrink-0", altIcon && "group-data-[state=on]:hidden")}>
         {icon}
       </Slot>
       {/* Only show the solid icon when alt */}
       {altIcon && (
-        <Slot className="h-[1.625rem] shrink-0 hidden group-data-[state=on]:block">
+        <Slot className="h-6.5 shrink-0 hidden group-data-[state=on]:block">
           {altIcon}
         </Slot>
       )}
diff --git a/packages/mini-apps-ui-kit-react/src/components/TextArea/TextArea.tsx b/packages/mini-apps-ui-kit-react/src/components/TextArea/TextArea.tsx
index 334d707a..f83b5aed 100644
--- a/packages/mini-apps-ui-kit-react/src/components/TextArea/TextArea.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/TextArea/TextArea.tsx
@@ -6,7 +6,7 @@ import { typographyVariants } from "../Typography/Typography";
 
 export const textAreaVariants = cva(
   cn(
-    "min-h-[7.5rem] resize-y peer w-full rounded-[0.625rem] border border-gray-100 bg-gray-100 px-4 outline-none transition duration-300",
+    "min-h-30 resize-y peer w-full rounded-[0.625rem] border border-gray-100 bg-gray-100 px-4 outline-none transition duration-300",
     "placeholder:text-gray-500",
     "focus:border-gray-300 focus:bg-gray-0 focus-visible:outline-none",
     "disabled:cursor-not-allowed disabled:opacity-50",
diff --git a/packages/mini-apps-ui-kit-react/src/components/Toast/Toast.tsx b/packages/mini-apps-ui-kit-react/src/components/Toast/Toast.tsx
index ccc56882..cabee9ae 100644
--- a/packages/mini-apps-ui-kit-react/src/components/Toast/Toast.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/Toast/Toast.tsx
@@ -17,7 +17,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-6 z-[100] flex max-h-screen w-full p-0.5 right-0 left-0 flex-col pointer-events-none",
+      "fixed top-6 z-100 flex max-h-screen w-full p-0.5 right-0 left-0 flex-col pointer-events-none",
       className,
     )}
     {...props}
@@ -39,8 +39,8 @@ const Toast = React.forwardRef<
         "transition-all",
         "data-[swipe=cancel]:translate-x-0",
         "data-[swipe=end]:animate-out",
-        "data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)]",
-        "data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]",
+        "data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x)",
+        "data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x)",
         "data-[swipe=move]:transition-none",
         "data-[state=closed]:animate-out",
         "data-[state=closed]:slide-out-to-top-full",
diff --git a/packages/mini-apps-ui-kit-react/src/components/TopBar/TopBar.tsx b/packages/mini-apps-ui-kit-react/src/components/TopBar/TopBar.tsx
index 67ef05b5..7202c30e 100644
--- a/packages/mini-apps-ui-kit-react/src/components/TopBar/TopBar.tsx
+++ b/packages/mini-apps-ui-kit-react/src/components/TopBar/TopBar.tsx
@@ -25,7 +25,7 @@ function TopBar({ title, startAdornment, endAdornment, className }: TopBarProps)
   return (
     <div
       className={cn(
-        "flex items-center px-6 pt-6 pb-2 w-full h-[4.5rem] gap-10",
+        "flex items-center px-6 pt-6 pb-2 w-full h-18 gap-10",
         justifyContent,
         className,
       )}
diff --git a/packages/mini-apps-ui-kit-react/src/lib/constants/dropdownStyles.ts b/packages/mini-apps-ui-kit-react/src/lib/constants/dropdownStyles.ts
index a621f28f..1d5f59b9 100644
--- a/packages/mini-apps-ui-kit-react/src/lib/constants/dropdownStyles.ts
+++ b/packages/mini-apps-ui-kit-react/src/lib/constants/dropdownStyles.ts
@@ -1,2 +1,2 @@
 export const DROPDOWN_CONTAINER_STYLES =
-  "relative z-50 mt-1 max-h-[11.75rem] w-full overflow-hidden rounded-[0.625rem] bg-gray-0 border border-gray-300";
+  "relative z-50 mt-1 max-h-47 w-full overflow-hidden rounded-[0.625rem] bg-gray-0 border border-gray-300";
diff --git a/packages/mini-apps-ui-kit-react/stories/Drawer.stories.tsx b/packages/mini-apps-ui-kit-react/stories/Drawer.stories.tsx
index 9caa8857..546dabd8 100644
--- a/packages/mini-apps-ui-kit-react/stories/Drawer.stories.tsx
+++ b/packages/mini-apps-ui-kit-react/stories/Drawer.stories.tsx
@@ -71,9 +71,9 @@ export const FullPage: StoryObj<typeof Drawer> = {
         <DrawerHeader>
           <DrawerTitle>Drawer with scrollable content</DrawerTitle>
         </DrawerHeader>
-        <div className="max-w-md w-full mx-auto flex flex-col items-center flex-grow">
+        <div className="max-w-md w-full mx-auto flex flex-col items-center grow">
           <div
-            className="no-scrollbar w-full flex flex-col flex-grow flex-basis-0 overflow-auto p-2 my-4"
+            className="no-scrollbar w-full flex flex-col grow flex-basis-0 overflow-auto p-2 my-4"
             style={{
               flexBasis: 0,
             }}
diff --git a/packages/mini-apps-ui-kit-react/stories/NumberPad.stories.tsx b/packages/mini-apps-ui-kit-react/stories/NumberPad.stories.tsx
index 6bb8ffed..af258a0e 100644
--- a/packages/mini-apps-ui-kit-react/stories/NumberPad.stories.tsx
+++ b/packages/mini-apps-ui-kit-react/stories/NumberPad.stories.tsx
@@ -56,7 +56,7 @@ export const Controlled: Story = {
     const [value, setValue] = useState(args.value);
     return (
       <div className="flex flex-col gap-4 items-center w-[400px]">
-        <div className="font-sans font-semibold flex items-center gap-2 h-[4.25rem]">
+        <div className="font-sans font-semibold flex items-center gap-2 h-17">
           <span className="text-xl">$</span>
           <span className="text-[3.5rem]">{value}</span>
         </div>
@@ -82,7 +82,7 @@ export const ClearOnLongDeletePress: Story = {
 
     return (
       <div className="flex flex-col gap-4 items-center w-[400px]">
-        <div className="font-sans font-semibold flex items-center gap-2 h-[4.25rem]">
+        <div className="font-sans font-semibold flex items-center gap-2 h-17">
           <span className="text-xl">$</span>
           <span className="text-[3.5rem]">{value}</span>
         </div>
diff --git a/packages/mini-apps-ui-kit-react/styles/globals.css b/packages/mini-apps-ui-kit-react/styles/globals.css
index d8144e78..59258863 100644
--- a/packages/mini-apps-ui-kit-react/styles/globals.css
+++ b/packages/mini-apps-ui-kit-react/styles/globals.css
@@ -1,97 +1,102 @@
-@font-face {
-  font-family: "TWK Lausanne";
-  src: url("https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-350.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
+@import 'tailwindcss';
+@config "../tailwind.config.ts";
 
-@font-face {
-  font-family: "TWK Lausanne";
-  src: url("https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-350Italic.woff2")
-    format("woff2");
-  font-weight: 400;
-  font-style: italic;
-  font-display: swap;
-}
+@layer base {
+  @font-face {
+    font-family: 'TWK Lausanne';
+    src: url('https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-350.woff2')
+      format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
 
-@font-face {
-  font-family: "TWK Lausanne";
-  src: url("https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-500.woff2") format("woff2");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
+  @font-face {
+    font-family: 'TWK Lausanne';
+    src: url('https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-350Italic.woff2')
+      format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+  }
 
-@font-face {
-  font-family: "TWK Lausanne";
-  src: url("https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-500Italic.woff2")
-    format("woff2");
-  font-weight: 500;
-  font-style: italic;
-  font-display: swap;
-}
+  @font-face {
+    font-family: 'TWK Lausanne';
+    src: url('https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-500.woff2')
+      format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
 
-@font-face {
-  font-family: "TWK Lausanne";
-  src: url("https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-600.woff2") format("woff2");
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
+  @font-face {
+    font-family: 'TWK Lausanne';
+    src: url('https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-500Italic.woff2')
+      format('woff2');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+  }
 
-@font-face {
-  font-family: "TWK Lausanne";
-  src: url("https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-600Italic.woff2")
-    format("woff2");
-  font-weight: 600;
-  font-style: italic;
-  font-display: swap;
-}
+  @font-face {
+    font-family: 'TWK Lausanne';
+    src: url('https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-600.woff2')
+      format('woff2');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'TWK Lausanne';
+    src: url('https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-600Italic.woff2')
+      format('woff2');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+  }
 
-:root {
-  --font-sans: "TWK Lausanne", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif;
+  :root {
+    --font-sans:
+      'TWK Lausanne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      'Helvetica Neue', Arial, sans-serif;
+  }
+  input[type='search']::-webkit-search-cancel-button,
+  input[type='search']::-webkit-search-decoration,
+  input[type='search']::-webkit-search-results-button,
+  input[type='search']::-webkit-search-results-decoration {
+    display: none;
+  }
+  input::-webkit-clear-button {
+    display: none;
+  }
+  input::-webkit-inner-spin-button,
+  input::-webkit-outer-spin-button {
+    display: none;
+  }
+  input::-webkit-calendar-picker-indicator {
+    display: none;
+  }
+  input::-webkit-datetime-edit,
+  input::-webkit-datetime-edit-fields-wrapper,
+  input::-webkit-datetime-edit-text,
+  input::-webkit-datetime-edit-year-field,
+  input::-webkit-datetime-edit-month-field,
+  input::-webkit-datetime-edit-day-field,
+  input::-webkit-datetime-edit-hour-field,
+  input::-webkit-datetime-edit-minute-field,
+  input::-webkit-datetime-edit-second-field,
+  input::-webkit-datetime-edit-ampm-field {
+    display: none;
+  }
 }
 
 /* Hide pseudo-elements for search inputs */
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
 
 /* Hide clear button for all supported input types */
-input::-webkit-clear-button {
-  display: none;
-}
 
 /* Hide spin buttons for number inputs */
-input::-webkit-inner-spin-button,
-input::-webkit-outer-spin-button {
-  display: none;
-}
 
 /* Hide calendar picker for date inputs */
-input::-webkit-calendar-picker-indicator {
-  display: none;
-}
 
 /* Hide pseudo-elements for datetime inputs */
-input::-webkit-datetime-edit,
-input::-webkit-datetime-edit-fields-wrapper,
-input::-webkit-datetime-edit-text,
-input::-webkit-datetime-edit-year-field,
-input::-webkit-datetime-edit-month-field,
-input::-webkit-datetime-edit-day-field,
-input::-webkit-datetime-edit-hour-field,
-input::-webkit-datetime-edit-minute-field,
-input::-webkit-datetime-edit-second-field,
-input::-webkit-datetime-edit-ampm-field {
-  display: none;
-}
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/packages/mini-apps-ui-kit-react/vite.config.ts b/packages/mini-apps-ui-kit-react/vite.config.ts
index ec429785..0cf7f531 100644
--- a/packages/mini-apps-ui-kit-react/vite.config.ts
+++ b/packages/mini-apps-ui-kit-react/vite.config.ts
@@ -1,3 +1,4 @@
+import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 import { resolve } from "path";
 import preserveDirectives from "rollup-preserve-directives";
@@ -15,6 +16,7 @@ export default defineConfig({
       exclude: ["**/*.stories.tsx", "**/*.test.tsx", "**/*.test.ts"],
     }),
     preserveDirectives(),
+    tailwindcss(),
   ],
   resolve: {
     alias: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 15cad9b7..3631b29a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -150,13 +150,16 @@ importers:
         version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.6.2))(typescript@5.6.3)
       '@storybook/react-vite':
         specifier: ^8.4.7
-        version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.44.2)(storybook@8.6.14(prettier@3.6.2))(typescript@5.6.3)(vite@6.3.5(@types/node@20.19.6)(jiti@1.21.7)(yaml@2.8.0))
+        version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.44.2)(storybook@8.6.14(prettier@3.6.2))(typescript@5.6.3)(vite@6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0))
       '@storybook/test':
         specifier: ^8.4.7
         version: 8.6.14(storybook@8.6.14(prettier@3.6.2))
       '@storybook/theming':
         specifier: ^8.5.5
         version: 8.6.14(storybook@8.6.14(prettier@3.6.2))
+      '@tailwindcss/vite':
+        specifier: ^4.1.11
+        version: 4.1.11(vite@6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0))
       '@types/glob':
         specifier: ^8.1.0
         version: 8.1.0
@@ -168,25 +171,25 @@ importers:
         version: 18.3.7(@types/react@18.3.23)
       '@vitejs/plugin-react':
         specifier: ^4.3.3
-        version: 4.6.0(vite@6.3.5(@types/node@20.19.6)(jiti@1.21.7)(yaml@2.8.0))
+        version: 4.6.0(vite@6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0))
       concurrently:
         specifier: ^9.1.0
         version: 9.2.0
       eslint:
         specifier: ^9.13.0
-        version: 9.30.1(jiti@1.21.7)
+        version: 9.30.1(jiti@2.5.1)
       eslint-plugin-react:
         specifier: ^7.37.2
-        version: 7.37.5(eslint@9.30.1(jiti@1.21.7))
+        version: 7.37.5(eslint@9.30.1(jiti@2.5.1))
       eslint-plugin-react-hooks:
         specifier: ^5.0.0
-        version: 5.2.0(eslint@9.30.1(jiti@1.21.7))
+        version: 5.2.0(eslint@9.30.1(jiti@2.5.1))
       eslint-plugin-react-refresh:
         specifier: ^0.4.14
-        version: 0.4.20(eslint@9.30.1(jiti@1.21.7))
+        version: 0.4.20(eslint@9.30.1(jiti@2.5.1))
       eslint-plugin-storybook:
         specifier: ^0.11.1
-        version: 0.11.6(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3)
+        version: 0.11.6(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3)
       glob:
         specifier: ^11.0.0
         version: 11.0.3
@@ -209,23 +212,23 @@ importers:
         specifier: ^8.4.7
         version: 8.6.14(prettier@3.6.2)
       tailwindcss:
-        specifier: ^3.4.15
-        version: 3.4.17
+        specifier: ^4.1.11
+        version: 4.1.11
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.17)
+        version: 1.0.7(tailwindcss@4.1.11)
       typescript:
         specifier: ~5.6.2
         version: 5.6.3
       typescript-eslint:
         specifier: ^8.11.0
-        version: 8.36.0(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3)
+        version: 8.36.0(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3)
       vite:
         specifier: ^6.3.5
-        version: 6.3.5(@types/node@20.19.6)(jiti@1.21.7)(yaml@2.8.0)
+        version: 6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0)
       vite-plugin-dts:
         specifier: ^4.5.4
-        version: 4.5.4(@types/node@20.19.6)(rollup@4.44.2)(typescript@5.6.3)(vite@6.3.5(@types/node@20.19.6)(jiti@1.21.7)(yaml@2.8.0))
+        version: 4.5.4(@types/node@20.19.6)(rollup@4.44.2)(typescript@5.6.3)(vite@6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0))
 
 packages:
 
@@ -659,6 +662,10 @@ packages:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
 
+  '@isaacs/fs-minipass@4.0.1':
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
+
   '@joshwooding/vite-plugin-react-docgen-typescript@0.5.0':
     resolution: {integrity: sha512-qYDdL7fPwLRI+bJNurVcis+tNgJmvWjH4YTBGXTA8xMuxFrnAz6E5o35iyzyKbq5J5Lr8mJGfrR5GXl+WGwhgQ==}
     peerDependencies:
@@ -1459,6 +1466,96 @@ packages:
     peerDependencies:
       acorn: ^8.9.0
 
+  '@tailwindcss/node@4.1.11':
+    resolution: {integrity: sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==}
+
+  '@tailwindcss/oxide-android-arm64@4.1.11':
+    resolution: {integrity: sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.11':
+    resolution: {integrity: sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.11':
+    resolution: {integrity: sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.11':
+    resolution: {integrity: sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11':
+    resolution: {integrity: sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.11':
+    resolution: {integrity: sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.11':
+    resolution: {integrity: sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.11':
+    resolution: {integrity: sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.11':
+    resolution: {integrity: sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.11':
+    resolution: {integrity: sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.11':
+    resolution: {integrity: sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.11':
+    resolution: {integrity: sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.11':
+    resolution: {integrity: sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/vite@4.1.11':
+    resolution: {integrity: sha512-RHYhrR3hku0MJFRV+fN2gNbDNEh3dwKvY8XJvTxCSXeMOsCRSr+uKvDWQcbizrHgjML6ZmTE5OwMrl5wKcujCw==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7
+
   '@testing-library/dom@10.4.0':
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
@@ -2023,6 +2120,10 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
+  chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
+
   chromatic@11.29.0:
     resolution: {integrity: sha512-yisBlntp9hHVj19lIQdpTlcYIXuU9H/DbFuu6tyWHmj6hWT2EtukCCcxYXL78XdQt1vm2GfIrtgtKpj/Rzmo4A==}
     hasBin: true
@@ -2164,6 +2265,10 @@ packages:
     resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
     engines: {node: '>=8'}
 
+  detect-libc@2.0.4:
+    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
+    engines: {node: '>=8'}
+
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
@@ -2210,6 +2315,10 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  enhanced-resolve@5.18.2:
+    resolution: {integrity: sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==}
+    engines: {node: '>=10.13.0'}
+
   enquirer@2.4.1:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
     engines: {node: '>=8.6'}
@@ -2869,6 +2978,10 @@ packages:
     resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
 
+  jiti@2.5.1:
+    resolution: {integrity: sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==}
+    hasBin: true
+
   jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
 
@@ -2940,6 +3053,70 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lightningcss-darwin-arm64@1.30.1:
+    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.1:
+    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.1:
+    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.1:
+    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.1:
+    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -3169,6 +3346,15 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minizlib@3.0.2:
+    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
+    engines: {node: '>= 18'}
+
+  mkdirp@3.0.1:
+    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   mlly@1.7.4:
     resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
 
@@ -3908,6 +4094,17 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  tailwindcss@4.1.11:
+    resolution: {integrity: sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==}
+
+  tapable@2.2.2:
+    resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
+    engines: {node: '>=6'}
+
+  tar@7.4.3:
+    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
+    engines: {node: '>=18'}
+
   term-size@2.2.1:
     resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
     engines: {node: '>=8'}
@@ -4261,6 +4458,10 @@ packages:
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
+  yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
+
   yaml@2.8.0:
     resolution: {integrity: sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==}
     engines: {node: '>= 14.6'}
@@ -4663,9 +4864,9 @@ snapshots:
       eslint: 8.57.1
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/eslint-utils@4.7.0(eslint@9.30.1(jiti@1.21.7))':
+  '@eslint-community/eslint-utils@4.7.0(eslint@9.30.1(jiti@2.5.1))':
     dependencies:
-      eslint: 9.30.1(jiti@1.21.7)
+      eslint: 9.30.1(jiti@2.5.1)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.1': {}
@@ -4782,12 +4983,16 @@ snapshots:
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.5.0(typescript@5.6.3)(vite@6.3.5(@types/node@20.19.6)(jiti@1.21.7)(yaml@2.8.0))':
+  '@isaacs/fs-minipass@4.0.1':
+    dependencies:
+      minipass: 7.1.2
+
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.5.0(typescript@5.6.3)(vite@6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0))':
     dependencies:
       glob: 10.4.5
       magic-string: 0.27.0
       react-docgen-typescript: 2.4.0(typescript@5.6.3)
-      vite: 6.3.5(@types/node@20.19.6)(jiti@1.21.7)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0)
     optionalDependencies:
       typescript: 5.6.3
 
@@ -5501,13 +5706,13 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/builder-vite@8.6.14(storybook@8.6.14(prettier@3.6.2))(vite@6.3.5(@types/node@20.19.6)(jiti@1.21.7)(yaml@2.8.0))':
+  '@storybook/builder-vite@8.6.14(storybook@8.6.14(prettier@3.6.2))(vite@6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0))':
     dependencies:
       '@storybook/csf-plugin': 8.6.14(storybook@8.6.14(prettier@3.6.2))
       browser-assert: 1.2.1
       storybook: 8.6.14(prettier@3.6.2)
       ts-dedent: 2.2.0
-      vite: 6.3.5(@types/node@20.19.6)(jiti@1.21.7)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0)
 
   '@storybook/components@8.6.14(storybook@8.6.14(prettier@3.6.2))':
     dependencies:
@@ -5570,11 +5775,11 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       storybook: 8.6.14(prettier@3.6.2)
 
-  '@storybook/react-vite@8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.44.2)(storybook@8.6.14(prettier@3.6.2))(typescript@5.6.3)(vite@6.3.5(@types/node@20.19.6)(jiti@1.21.7)(yaml@2.8.0))':
+  '@storybook/react-vite@8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.44.2)(storybook@8.6.14(prettier@3.6.2))(typescript@5.6.3)(vite@6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.5.0(typescript@5.6.3)(vite@6.3.5(@types/node@20.19.6)(jiti@1.21.7)(yaml@2.8.0))
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.5.0(typescript@5.6.3)(vite@6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0))
       '@rollup/pluginutils': 5.2.0(rollup@4.44.2)
-      '@storybook/builder-vite': 8.6.14(storybook@8.6.14(prettier@3.6.2))(vite@6.3.5(@types/node@20.19.6)(jiti@1.21.7)(yaml@2.8.0))
+      '@storybook/builder-vite': 8.6.14(storybook@8.6.14(prettier@3.6.2))(vite@6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0))
       '@storybook/react': 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.6.2))(typescript@5.6.3)
       find-up: 5.0.0
       magic-string: 0.30.17
@@ -5584,7 +5789,7 @@ snapshots:
       resolve: 1.22.10
       storybook: 8.6.14(prettier@3.6.2)
       tsconfig-paths: 4.2.0
-      vite: 6.3.5(@types/node@20.19.6)(jiti@1.21.7)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0)
     optionalDependencies:
       '@storybook/test': 8.6.14(storybook@8.6.14(prettier@3.6.2))
     transitivePeerDependencies:
@@ -5626,6 +5831,77 @@ snapshots:
     dependencies:
       acorn: 8.15.0
 
+  '@tailwindcss/node@4.1.11':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      enhanced-resolve: 5.18.2
+      jiti: 2.5.1
+      lightningcss: 1.30.1
+      magic-string: 0.30.17
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.11
+
+  '@tailwindcss/oxide-android-arm64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.11':
+    dependencies:
+      detect-libc: 2.0.4
+      tar: 7.4.3
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.11
+      '@tailwindcss/oxide-darwin-arm64': 4.1.11
+      '@tailwindcss/oxide-darwin-x64': 4.1.11
+      '@tailwindcss/oxide-freebsd-x64': 4.1.11
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.11
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.11
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.11
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.11
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.11
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.11
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.11
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.11
+
+  '@tailwindcss/vite@4.1.11(vite@6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0))':
+    dependencies:
+      '@tailwindcss/node': 4.1.11
+      '@tailwindcss/oxide': 4.1.11
+      tailwindcss: 4.1.11
+      vite: 6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0)
+
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -5763,15 +6039,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@8.36.0(@typescript-eslint/parser@8.36.0(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3))(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3)':
+  '@typescript-eslint/eslint-plugin@8.36.0(@typescript-eslint/parser@8.36.0(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3))(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.36.0(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3)
+      '@typescript-eslint/parser': 8.36.0(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3)
       '@typescript-eslint/scope-manager': 8.36.0
-      '@typescript-eslint/type-utils': 8.36.0(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.36.0(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3)
+      '@typescript-eslint/type-utils': 8.36.0(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.36.0(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3)
       '@typescript-eslint/visitor-keys': 8.36.0
-      eslint: 9.30.1(jiti@1.21.7)
+      eslint: 9.30.1(jiti@2.5.1)
       graphemer: 1.4.0
       ignore: 7.0.5
       natural-compare: 1.4.0
@@ -5792,14 +6068,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.36.0(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3)':
+  '@typescript-eslint/parser@8.36.0(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.36.0
       '@typescript-eslint/types': 8.36.0
       '@typescript-eslint/typescript-estree': 8.36.0(typescript@5.6.3)
       '@typescript-eslint/visitor-keys': 8.36.0
       debug: 4.4.1
-      eslint: 9.30.1(jiti@1.21.7)
+      eslint: 9.30.1(jiti@2.5.1)
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
@@ -5833,12 +6109,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@8.36.0(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3)':
+  '@typescript-eslint/type-utils@8.36.0(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/typescript-estree': 8.36.0(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.36.0(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.36.0(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3)
       debug: 4.4.1
-      eslint: 9.30.1(jiti@1.21.7)
+      eslint: 9.30.1(jiti@2.5.1)
       ts-api-utils: 2.1.0(typescript@5.6.3)
       typescript: 5.6.3
     transitivePeerDependencies:
@@ -5873,13 +6149,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.36.0(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3)':
+  '@typescript-eslint/utils@8.36.0(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.30.1(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.30.1(jiti@2.5.1))
       '@typescript-eslint/scope-manager': 8.36.0
       '@typescript-eslint/types': 8.36.0
       '@typescript-eslint/typescript-estree': 8.36.0(typescript@5.6.3)
-      eslint: 9.30.1(jiti@1.21.7)
+      eslint: 9.30.1(jiti@2.5.1)
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
@@ -5955,7 +6231,7 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
-  '@vitejs/plugin-react@4.6.0(vite@6.3.5(@types/node@20.19.6)(jiti@1.21.7)(yaml@2.8.0))':
+  '@vitejs/plugin-react@4.6.0(vite@6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0))':
     dependencies:
       '@babel/core': 7.28.0
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.0)
@@ -5963,7 +6239,7 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.19
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 6.3.5(@types/node@20.19.6)(jiti@1.21.7)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -6304,6 +6580,8 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  chownr@3.0.0: {}
+
   chromatic@11.29.0: {}
 
   ci-info@3.9.0: {}
@@ -6418,6 +6696,8 @@ snapshots:
 
   detect-indent@6.1.0: {}
 
+  detect-libc@2.0.4: {}
+
   detect-node-es@1.1.0: {}
 
   devlop@1.1.0:
@@ -6458,6 +6738,11 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
+  enhanced-resolve@5.18.2:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.2
+
   enquirer@2.4.1:
     dependencies:
       ansi-colors: 4.1.3
@@ -6714,13 +6999,13 @@ snapshots:
     dependencies:
       eslint: 8.57.1
 
-  eslint-plugin-react-hooks@5.2.0(eslint@9.30.1(jiti@1.21.7)):
+  eslint-plugin-react-hooks@5.2.0(eslint@9.30.1(jiti@2.5.1)):
     dependencies:
-      eslint: 9.30.1(jiti@1.21.7)
+      eslint: 9.30.1(jiti@2.5.1)
 
-  eslint-plugin-react-refresh@0.4.20(eslint@9.30.1(jiti@1.21.7)):
+  eslint-plugin-react-refresh@0.4.20(eslint@9.30.1(jiti@2.5.1)):
     dependencies:
-      eslint: 9.30.1(jiti@1.21.7)
+      eslint: 9.30.1(jiti@2.5.1)
 
   eslint-plugin-react@7.37.5(eslint@8.57.1):
     dependencies:
@@ -6744,7 +7029,7 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-react@7.37.5(eslint@9.30.1(jiti@1.21.7)):
+  eslint-plugin-react@7.37.5(eslint@9.30.1(jiti@2.5.1)):
     dependencies:
       array-includes: 3.1.9
       array.prototype.findlast: 1.2.5
@@ -6752,7 +7037,7 @@ snapshots:
       array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
       es-iterator-helpers: 1.2.1
-      eslint: 9.30.1(jiti@1.21.7)
+      eslint: 9.30.1(jiti@2.5.1)
       estraverse: 5.3.0
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
@@ -6766,11 +7051,11 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-storybook@0.11.6(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3):
+  eslint-plugin-storybook@0.11.6(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3):
     dependencies:
       '@storybook/csf': 0.1.13
-      '@typescript-eslint/utils': 8.36.0(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3)
-      eslint: 9.30.1(jiti@1.21.7)
+      '@typescript-eslint/utils': 8.36.0(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3)
+      eslint: 9.30.1(jiti@2.5.1)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - supports-color
@@ -6833,9 +7118,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint@9.30.1(jiti@1.21.7):
+  eslint@9.30.1(jiti@2.5.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.30.1(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.30.1(jiti@2.5.1))
       '@eslint-community/regexpp': 4.12.1
       '@eslint/config-array': 0.21.0
       '@eslint/config-helpers': 0.3.0
@@ -6871,7 +7156,7 @@ snapshots:
       natural-compare: 1.4.0
       optionator: 0.9.4
     optionalDependencies:
-      jiti: 1.21.7
+      jiti: 2.5.1
     transitivePeerDependencies:
       - supports-color
 
@@ -7366,6 +7651,8 @@ snapshots:
 
   jiti@1.21.7: {}
 
+  jiti@2.5.1: {}
+
   jju@1.4.0: {}
 
   js-tokens@4.0.0: {}
@@ -7431,6 +7718,51 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lightningcss-darwin-arm64@1.30.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    optional: true
+
+  lightningcss@1.30.1:
+    dependencies:
+      detect-libc: 2.0.4
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.30.1
+      lightningcss-darwin-x64: 1.30.1
+      lightningcss-freebsd-x64: 1.30.1
+      lightningcss-linux-arm-gnueabihf: 1.30.1
+      lightningcss-linux-arm64-gnu: 1.30.1
+      lightningcss-linux-arm64-musl: 1.30.1
+      lightningcss-linux-x64-gnu: 1.30.1
+      lightningcss-linux-x64-musl: 1.30.1
+      lightningcss-win32-arm64-msvc: 1.30.1
+      lightningcss-win32-x64-msvc: 1.30.1
+
   lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
@@ -7819,6 +8151,12 @@ snapshots:
 
   minipass@7.1.2: {}
 
+  minizlib@3.0.2:
+    dependencies:
+      minipass: 7.1.2
+
+  mkdirp@3.0.1: {}
+
   mlly@1.7.4:
     dependencies:
       acorn: 8.15.0
@@ -8564,9 +8902,9 @@ snapshots:
 
   tailwind-merge@2.6.0: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.17):
+  tailwindcss-animate@1.0.7(tailwindcss@4.1.11):
     dependencies:
-      tailwindcss: 3.4.17
+      tailwindcss: 4.1.11
 
   tailwindcss@3.4.17:
     dependencies:
@@ -8595,6 +8933,19 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
+  tailwindcss@4.1.11: {}
+
+  tapable@2.2.2: {}
+
+  tar@7.4.3:
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.0.2
+      mkdirp: 3.0.1
+      yallist: 5.0.0
+
   term-size@2.2.1: {}
 
   text-table@0.2.0: {}
@@ -8723,12 +9074,12 @@ snapshots:
       possible-typed-array-names: 1.1.0
       reflect.getprototypeof: 1.0.10
 
-  typescript-eslint@8.36.0(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3):
+  typescript-eslint@8.36.0(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.36.0(@typescript-eslint/parser@8.36.0(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3))(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3)
-      '@typescript-eslint/parser': 8.36.0(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.36.0(eslint@9.30.1(jiti@1.21.7))(typescript@5.6.3)
-      eslint: 9.30.1(jiti@1.21.7)
+      '@typescript-eslint/eslint-plugin': 8.36.0(@typescript-eslint/parser@8.36.0(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3))(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3)
+      '@typescript-eslint/parser': 8.36.0(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.36.0(eslint@9.30.1(jiti@2.5.1))(typescript@5.6.3)
+      eslint: 9.30.1(jiti@2.5.1)
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
@@ -8866,7 +9217,7 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite-plugin-dts@4.5.4(@types/node@20.19.6)(rollup@4.44.2)(typescript@5.6.3)(vite@6.3.5(@types/node@20.19.6)(jiti@1.21.7)(yaml@2.8.0)):
+  vite-plugin-dts@4.5.4(@types/node@20.19.6)(rollup@4.44.2)(typescript@5.6.3)(vite@6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0)):
     dependencies:
       '@microsoft/api-extractor': 7.52.8(@types/node@20.19.6)
       '@rollup/pluginutils': 5.2.0(rollup@4.44.2)
@@ -8879,13 +9230,13 @@ snapshots:
       magic-string: 0.30.17
       typescript: 5.6.3
     optionalDependencies:
-      vite: 6.3.5(@types/node@20.19.6)(jiti@1.21.7)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
       - supports-color
 
-  vite@6.3.5(@types/node@20.19.6)(jiti@1.21.7)(yaml@2.8.0):
+  vite@6.3.5(@types/node@20.19.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0):
     dependencies:
       esbuild: 0.25.6
       fdir: 6.4.6(picomatch@4.0.2)
@@ -8896,7 +9247,8 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.19.6
       fsevents: 2.3.3
-      jiti: 1.21.7
+      jiti: 2.5.1
+      lightningcss: 1.30.1
       yaml: 2.8.0
 
   vscode-uri@3.1.0: {}
@@ -8972,6 +9324,8 @@ snapshots:
 
   yallist@4.0.0: {}
 
+  yallist@5.0.0: {}
+
   yaml@2.8.0: {}
 
   yargs-parser@21.1.1: {}

From c6574288652a3e2cc6a1b0274440a64985f20396 Mon Sep 17 00:00:00 2001
From: Daniel Polo <od.polo@gmail.com>
Date: Tue, 5 Aug 2025 15:04:03 -0700
Subject: [PATCH 2/3] Update Next.js and refactor mini-apps-ui-kit-react

- Added Next.js version 15.4.5 as a dependency in the example project.
- Refactored layout to include global styles from the mini-apps UI kit.
- Updated build scripts in the mini-apps UI kit to streamline the build process.
- Adjusted CSS imports and file paths for better organization and consistency.
- Enhanced asset handling in Vite configuration for improved output structure.
---
 packages/mini-apps-ui-kit-react/package.json  |   7 +-
 packages/mini-apps-ui-kit-react/src/index.ts  |   3 +
 .../mini-apps-ui-kit-react/styles/globals.css | 161 +++++++++---------
 .../mini-apps-ui-kit-react/vite.config.ts     |   8 +-
 4 files changed, 91 insertions(+), 88 deletions(-)

diff --git a/packages/mini-apps-ui-kit-react/package.json b/packages/mini-apps-ui-kit-react/package.json
index 4c9afb93..44717feb 100644
--- a/packages/mini-apps-ui-kit-react/package.json
+++ b/packages/mini-apps-ui-kit-react/package.json
@@ -17,9 +17,8 @@
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "sb:move": "mv ./storybook-static ../../storybook-static",
     "dev:sb": "concurrently \"npx @tailwindcss/cli -i ./styles/globals.css -o ./dist/globals.css --watch\" \"pnpm storybook\"",
-    "build:tailwind": "npx @tailwindcss/cli -i ./styles/globals.css -o ./dist/globals.css --minify",
-    "build:sb": "pnpm build:tailwind && storybook build",
-    "build": "tsc -b ./tsconfig.lib.json && vite build && pnpm build:tailwind",
+    "build:sb": "vite build && storybook build",
+    "build": "tsc -b ./tsconfig.lib.json && vite build",
     "lint": "eslint .",
     "publish:manual": "pnpm build && npm publish --access public",
     "generate:country-codes": "node scripts/generate-country-codes.js",
@@ -268,6 +267,6 @@
       "import": "./dist/tailwind/index.js",
       "require": "./dist/tailwind/index.js"
     },
-    "./styles.css": "./dist/globals.css"
+    "./styles.css": "./dist/styles.css"
   }
 }
\ No newline at end of file
diff --git a/packages/mini-apps-ui-kit-react/src/index.ts b/packages/mini-apps-ui-kit-react/src/index.ts
index 2c297ef4..dd25b744 100644
--- a/packages/mini-apps-ui-kit-react/src/index.ts
+++ b/packages/mini-apps-ui-kit-react/src/index.ts
@@ -1,3 +1,6 @@
+// Import styles
+import "../styles/globals.css";
+
 // Export all components individually to enable tree-shaking
 export { Button } from "./components/Button";
 export { Checkbox } from "./components/Checkbox";
diff --git a/packages/mini-apps-ui-kit-react/styles/globals.css b/packages/mini-apps-ui-kit-react/styles/globals.css
index 59258863..aa28e8c4 100644
--- a/packages/mini-apps-ui-kit-react/styles/globals.css
+++ b/packages/mini-apps-ui-kit-react/styles/globals.css
@@ -1,94 +1,89 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 @config "../tailwind.config.ts";
 
-@layer base {
-  @font-face {
-    font-family: 'TWK Lausanne';
-    src: url('https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-350.woff2')
-      format('woff2');
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
-  }
+@font-face {
+  font-family: "TWK Lausanne";
+  src: url("https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-350.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
 
-  @font-face {
-    font-family: 'TWK Lausanne';
-    src: url('https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-350Italic.woff2')
-      format('woff2');
-    font-weight: 400;
-    font-style: italic;
-    font-display: swap;
-  }
+@font-face {
+  font-family: "TWK Lausanne";
+  src: url("https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-350Italic.woff2")
+    format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
 
-  @font-face {
-    font-family: 'TWK Lausanne';
-    src: url('https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-500.woff2')
-      format('woff2');
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
-  }
+@font-face {
+  font-family: "TWK Lausanne";
+  src: url("https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-500.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
 
-  @font-face {
-    font-family: 'TWK Lausanne';
-    src: url('https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-500Italic.woff2')
-      format('woff2');
-    font-weight: 500;
-    font-style: italic;
-    font-display: swap;
-  }
+@font-face {
+  font-family: "TWK Lausanne";
+  src: url("https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-500Italic.woff2")
+    format("woff2");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
 
-  @font-face {
-    font-family: 'TWK Lausanne';
-    src: url('https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-600.woff2')
-      format('woff2');
-    font-weight: 600;
-    font-style: normal;
-    font-display: swap;
-  }
+@font-face {
+  font-family: "TWK Lausanne";
+  src: url("https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-600.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
 
-  @font-face {
-    font-family: 'TWK Lausanne';
-    src: url('https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-600Italic.woff2')
-      format('woff2');
-    font-weight: 600;
-    font-style: italic;
-    font-display: swap;
-  }
+@font-face {
+  font-family: "TWK Lausanne";
+  src: url("https://mini-apps-ui-kit.world.org/fonts/TWKLausanne-600Italic.woff2")
+    format("woff2");
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
 
-  :root {
-    --font-sans:
-      'TWK Lausanne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-      'Helvetica Neue', Arial, sans-serif;
-  }
-  input[type='search']::-webkit-search-cancel-button,
-  input[type='search']::-webkit-search-decoration,
-  input[type='search']::-webkit-search-results-button,
-  input[type='search']::-webkit-search-results-decoration {
-    display: none;
-  }
-  input::-webkit-clear-button {
-    display: none;
-  }
-  input::-webkit-inner-spin-button,
-  input::-webkit-outer-spin-button {
-    display: none;
-  }
-  input::-webkit-calendar-picker-indicator {
-    display: none;
-  }
-  input::-webkit-datetime-edit,
-  input::-webkit-datetime-edit-fields-wrapper,
-  input::-webkit-datetime-edit-text,
-  input::-webkit-datetime-edit-year-field,
-  input::-webkit-datetime-edit-month-field,
-  input::-webkit-datetime-edit-day-field,
-  input::-webkit-datetime-edit-hour-field,
-  input::-webkit-datetime-edit-minute-field,
-  input::-webkit-datetime-edit-second-field,
-  input::-webkit-datetime-edit-ampm-field {
-    display: none;
-  }
+:root {
+  --font-sans:
+    "TWK Lausanne", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, sans-serif;
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+input::-webkit-clear-button {
+  display: none;
+}
+input::-webkit-inner-spin-button,
+input::-webkit-outer-spin-button {
+  display: none;
+}
+input::-webkit-calendar-picker-indicator {
+  display: none;
+}
+input::-webkit-datetime-edit,
+input::-webkit-datetime-edit-fields-wrapper,
+input::-webkit-datetime-edit-text,
+input::-webkit-datetime-edit-year-field,
+input::-webkit-datetime-edit-month-field,
+input::-webkit-datetime-edit-day-field,
+input::-webkit-datetime-edit-hour-field,
+input::-webkit-datetime-edit-minute-field,
+input::-webkit-datetime-edit-second-field,
+input::-webkit-datetime-edit-ampm-field {
+  display: none;
 }
 
 /* Hide pseudo-elements for search inputs */
diff --git a/packages/mini-apps-ui-kit-react/vite.config.ts b/packages/mini-apps-ui-kit-react/vite.config.ts
index 0cf7f531..1af2cd9c 100644
--- a/packages/mini-apps-ui-kit-react/vite.config.ts
+++ b/packages/mini-apps-ui-kit-react/vite.config.ts
@@ -48,7 +48,13 @@ export default defineConfig({
         preserveModulesRoot: "src",
         entryFileNames: "[name].js",
         chunkFileNames: "chunks/[name]-[hash].js",
-        assetFileNames: "assets/[name]-[hash][extname]",
+        assetFileNames: (assetInfo) => {
+          // Extract CSS to a separate file
+          if (assetInfo.name && assetInfo.name.endsWith(".css")) {
+            return "styles.css";
+          }
+          return "assets/[name]-[hash][extname]";
+        },
       },
     },
   },

From 2088d3f03353e46c44e04ee95629d8e1c9c219bd Mon Sep 17 00:00:00 2001
From: Daniel Polo <od.polo@gmail.com>
Date: Mon, 11 Aug 2025 15:49:42 -0700
Subject: [PATCH 3/3] Enhance CSS build process and add PostCSS configuration

- Introduced new build scripts for generating CSS files compatible with both Tailwind v3 and v4.
- Added PostCSS configuration files to manage CSS processing.
- Implemented a custom PostCSS plugin to remove @layer directives for v3 compatibility.
- Updated README to clarify usage of multiple CSS file versions for different Tailwind projects.
- Enhanced package.json with new build commands for streamlined CSS generation.
---
 packages/mini-apps-ui-kit-react/README.md     | 22 ++++-
 packages/mini-apps-ui-kit-react/package.json  | 12 ++-
 .../postcss-v3.config.js                      |  8 ++
 .../mini-apps-ui-kit-react/postcss.config.js  |  5 +
 .../scripts/build-css.js                      | 92 +++++++++++++++++++
 .../scripts/postcss-remove-layers.js          | 34 +++++++
 6 files changed, 170 insertions(+), 3 deletions(-)
 create mode 100644 packages/mini-apps-ui-kit-react/postcss-v3.config.js
 create mode 100644 packages/mini-apps-ui-kit-react/postcss.config.js
 create mode 100755 packages/mini-apps-ui-kit-react/scripts/build-css.js
 create mode 100644 packages/mini-apps-ui-kit-react/scripts/postcss-remove-layers.js

diff --git a/packages/mini-apps-ui-kit-react/README.md b/packages/mini-apps-ui-kit-react/README.md
index 6902e4c7..9ab1248d 100644
--- a/packages/mini-apps-ui-kit-react/README.md
+++ b/packages/mini-apps-ui-kit-react/README.md
@@ -66,12 +66,32 @@ The library uses the following font **[TWK Lausanne](https://weltkern.com/typefa
 
 ## Importing Styles
 
-To use the UI Kit components with their proper styling, you need to import the styles in your application. Add the following import statement to your application's entry point (e.g., `app/layout.tsx` for Next.js or `main.tsx` for Vite):
+To use the UI Kit components with their proper styling, you need to import the styles in your application. The library provides multiple CSS files for maximum compatibility:
 
+### **Tailwind v3 Projects (Recommended for most users)**
 ```typescript
 import "@worldcoin/mini-apps-ui-kit-react/styles.css";
+// or explicitly
+import "@worldcoin/mini-apps-ui-kit-react/styles-v3.css";
 ```
 
+### **Tailwind v4 Projects**
+```typescript
+import "@worldcoin/mini-apps-ui-kit-react/styles-v4.css";
+```
+
+### **CSS File Differences**
+
+- **`styles.css`** - Backward-compatible version (same as v3, recommended for most users)
+- **`styles-v3.css`** - Explicitly marked v3-compatible version
+- **`styles-v4.css` - Modern v4 version with @layer directives
+
+### **Why Multiple Versions?**
+
+This library supports both Tailwind v3 and v4 to ensure maximum compatibility across different projects. The v3 versions work in any project, while the v4 version provides modern CSS features for projects that can use them.
+
+> **💡 Tip**: If you're unsure which version to use, start with `styles.css` - it's designed to work everywhere.
+
 ## Icons
 
 The library uses a custom set of icons built on top of [Iconoir](https://iconoir.com/). While we provide our own custom set, we highly recommend using Iconoir directly for your miniapps as it offers a comprehensive and well-maintained icon system.
diff --git a/packages/mini-apps-ui-kit-react/package.json b/packages/mini-apps-ui-kit-react/package.json
index 44717feb..db82568c 100644
--- a/packages/mini-apps-ui-kit-react/package.json
+++ b/packages/mini-apps-ui-kit-react/package.json
@@ -19,6 +19,8 @@
     "dev:sb": "concurrently \"npx @tailwindcss/cli -i ./styles/globals.css -o ./dist/globals.css --watch\" \"pnpm storybook\"",
     "build:sb": "vite build && storybook build",
     "build": "tsc -b ./tsconfig.lib.json && vite build",
+    "build:css": "node scripts/build-css.js",
+    "build:all": "pnpm build && pnpm build:css",
     "lint": "eslint .",
     "publish:manual": "pnpm build && npm publish --access public",
     "generate:country-codes": "node scripts/generate-country-codes.js",
@@ -36,6 +38,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
+    "@csstools/postcss-cascade-layers": "^5.0.2",
     "@eslint/js": "^9.13.0",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
@@ -52,6 +55,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.21",
     "concurrently": "^9.1.0",
     "eslint": "^9.13.0",
     "eslint-plugin-react": "^7.37.2",
@@ -60,6 +64,8 @@
     "eslint-plugin-storybook": "^0.11.1",
     "glob": "^11.0.0",
     "globals": "^15.11.0",
+    "postcss": "^8",
+    "postcss-cli": "^11.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup-plugin-visualizer": "^6.0.3",
@@ -98,6 +104,9 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
+    "./styles.css": "./dist/styles.css",
+    "./styles-v3.css": "./dist/styles-v3.css",
+    "./styles-v4.css": "./dist/styles-v4.css",
     "./Button": {
       "types": "./dist/components/Button/index.d.ts",
       "default": "./dist/components/Button/index.js"
@@ -266,7 +275,6 @@
       "types": "./dist/tailwind/index.d.ts",
       "import": "./dist/tailwind/index.js",
       "require": "./dist/tailwind/index.js"
-    },
-    "./styles.css": "./dist/styles.css"
+    }
   }
 }
\ No newline at end of file
diff --git a/packages/mini-apps-ui-kit-react/postcss-v3.config.js b/packages/mini-apps-ui-kit-react/postcss-v3.config.js
new file mode 100644
index 00000000..769fe1da
--- /dev/null
+++ b/packages/mini-apps-ui-kit-react/postcss-v3.config.js
@@ -0,0 +1,8 @@
+import removeLayersPlugin from './scripts/postcss-remove-layers.js';
+
+export default {
+    plugins: {
+        autoprefixer: {},
+        removeLayersPlugin: {},
+    },
+}; 
\ No newline at end of file
diff --git a/packages/mini-apps-ui-kit-react/postcss.config.js b/packages/mini-apps-ui-kit-react/postcss.config.js
new file mode 100644
index 00000000..8aa97d68
--- /dev/null
+++ b/packages/mini-apps-ui-kit-react/postcss.config.js
@@ -0,0 +1,5 @@
+export default {
+    plugins: {
+        autoprefixer: {},
+    },
+}; 
\ No newline at end of file
diff --git a/packages/mini-apps-ui-kit-react/scripts/build-css.js b/packages/mini-apps-ui-kit-react/scripts/build-css.js
new file mode 100755
index 00000000..16e01d2f
--- /dev/null
+++ b/packages/mini-apps-ui-kit-react/scripts/build-css.js
@@ -0,0 +1,92 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import { execSync } from 'child_process';
+
+console.log('🚀 Building CSS files for both Tailwind v3 and v4...');
+
+// First, build the project using Vite (this generates the v4 CSS)
+console.log('\n📦 Building project with Vite (generates v4 CSS)...');
+try {
+    execSync('pnpm build', { stdio: 'inherit' });
+    console.log('✅ Vite build completed successfully');
+} catch (error) {
+    console.error('❌ Failed to build project:', error.message);
+    process.exit(1);
+}
+
+// Check if the v4 CSS was generated
+const v4CSSPath = './dist/styles.css';
+if (!fs.existsSync(v4CSSPath)) {
+    console.error('❌ V4 CSS file not found. Make sure the build completed successfully.');
+    process.exit(1);
+}
+
+// Read the v4 CSS immediately after Vite build (before any processing)
+console.log('\n📦 Reading generated v4 CSS...');
+const v4CSS = fs.readFileSync(v4CSSPath, 'utf8');
+
+// Create v4 CSS file (preserve with @layer directives)
+console.log('\n📦 Creating v4 CSS file...');
+fs.writeFileSync('./dist/styles-v4.css', v4CSS);
+console.log('✅ v4 CSS file created (with @layer directives preserved)');
+
+// Create v3 compatible CSS using PostCSS with @csstools/postcss-cascade-layers
+console.log('\n📦 Creating v3 compatible CSS using PostCSS...');
+try {
+    // Import PostCSS and the cascade layers plugin
+    const postcss = await import('postcss');
+    const cascadeLayers = await import('@csstools/postcss-cascade-layers');
+    const autoprefixer = await import('autoprefixer');
+
+    // Process the CSS to remove @layer directives
+    const result = await postcss.default([
+        cascadeLayers.default({
+            // This will remove all @layer directives and flatten the CSS
+            onRevertLayerKeyword: (layerName) => {
+                console.log(`Removing @layer directive: ${layerName}`);
+            }
+        }),
+        autoprefixer.default
+    ]).process(v4CSS, {
+        from: undefined,
+        to: undefined
+    });
+
+    // Write the processed CSS
+    fs.writeFileSync('./dist/styles-v3.css', result.css);
+    console.log('✅ v3 CSS file created using @csstools/postcss-cascade-layers');
+
+} catch (error) {
+    console.error('❌ Failed to process CSS with PostCSS:', error.message);
+    console.log('🔄 Falling back to regex method...');
+
+    // Fallback to regex method
+    const v3CSS = v4CSS
+        .replace(/@layer\s+(\w+)\s*\{([^}]*)\}/g, '$2')
+        .replace(/@layer\s+[^;]+;/g, '')
+        .replace(/@layer\s+\w+\s*\{/g, '')
+        .replace(/\}\s*@layer/g, '')
+        .replace(/\n\s*\n\s*\n/g, '\n\n')
+        .trim();
+
+    fs.writeFileSync('./dist/styles-v3.css', v3CSS);
+    console.log('✅ v3 CSS file created using fallback method');
+}
+
+// Update the main styles.css to be v3 compatible (for backward compatibility)
+console.log('\n📦 Updating main styles.css to be v3 compatible...');
+const v3CSS = fs.readFileSync('./dist/styles-v3.css', 'utf8');
+fs.writeFileSync('./dist/styles.css', v3CSS);
+console.log('✅ Main styles.css updated for v3 compatibility');
+
+console.log('\n🎉 All CSS files built successfully!');
+console.log('\n📁 Generated files:');
+console.log('  • dist/styles.css (v3 compatible, backward compatible)');
+console.log('  • dist/styles-v3.css (v3 compatible, @layer directives removed)');
+console.log('  • dist/styles-v4.css (v4 compatible, @layer directives preserved)');
+console.log('\n💡 Usage:');
+console.log('  • For Tailwind v3 projects: import "styles.css" or "styles-v3.css"');
+console.log('  • For Tailwind v4 projects: import "styles-v4.css"');
+console.log('\n⚠️  Note: The v3 versions have @layer directives safely removed using @csstools/postcss-cascade-layers'); 
\ No newline at end of file
diff --git a/packages/mini-apps-ui-kit-react/scripts/postcss-remove-layers.js b/packages/mini-apps-ui-kit-react/scripts/postcss-remove-layers.js
new file mode 100644
index 00000000..8c89b45c
--- /dev/null
+++ b/packages/mini-apps-ui-kit-react/scripts/postcss-remove-layers.js
@@ -0,0 +1,34 @@
+/**
+ * PostCSS plugin to remove @layer directives for Tailwind v3 compatibility
+ */
+export default function removeLayersPlugin() {
+    return {
+        postcssPlugin: 'postcss-remove-layers',
+        AtRule: {
+            layer(atRule) {
+                console.log(`Found @layer: ${atRule.name} with ${atRule.nodes?.length || 0} nodes`);
+
+                // Remove the @layer atrule but keep its content
+                if (atRule.nodes && atRule.nodes.length > 0) {
+                    // Move all child nodes to the parent
+                    atRule.parent.insertBefore(atRule, atRule.nodes);
+                }
+                // Remove the @layer atrule itself (including standalone statements)
+                atRule.remove();
+            }
+        },
+        // Also handle any remaining @layer references that might not be caught
+        Once(root) {
+            // Find and remove any remaining @layer statements
+            root.walkAtRules('layer', (atRule) => {
+                console.log(`Walking found @layer: ${atRule.name}`);
+                if (atRule.nodes && atRule.nodes.length > 0) {
+                    atRule.parent.insertBefore(atRule, atRule.nodes);
+                }
+                atRule.remove();
+            });
+        }
+    };
+}
+
+removeLayersPlugin.postcss = true; 
\ No newline at end of file