@customafk/lunas-ui 0.0.3-d → 0.0.3-f

package/dist/Atoms/Button/index.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
     variant?: "default" | "secondary" | "outline" | "destructive" | "destructive-secondary" | "destructive-outline" | "sort-outline" | "normal" | null | undefined;
-    size?: "small" | "default" | "base" | "large" | null | undefined;
+    size?: "base" | "small" | "default" | "large" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/Atoms/Command/index.js

@@ -418,7 +418,7 @@ var CommandGroup = React2.forwardRef(({ className, ...props }, reference) => /*
       "[&_[cmdk-group-heading]]:py-1.5",
       "[&_[cmdk-group-heading]]:text-xs",
       "[&_[cmdk-group-heading]]:font-medium",
-      "[&_[cmdk-group-heading]]:text-ui-text-800",
+      "[&_[cmdk-group-heading]]:text-ui-text-600",
       className
     ),
     ...props

package/dist/Atoms/Drawer/index.d.ts

@@ -0,0 +1,46 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+import { Drawer } from 'vaul';
+
+declare const DrawerRoot: {
+    ({ shouldScaleBackground, ...props }: ComponentProps<typeof Drawer.Root>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerTrigger: {
+    ({ className, ...props }: ComponentPropsWithoutRef<typeof Drawer.Trigger>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerPortal: {
+    ({ ...props }: ComponentPropsWithoutRef<typeof Drawer.Portal>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerClose: {
+    ({ className, ...props }: ComponentPropsWithoutRef<typeof Drawer.Close>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerOverlay: {
+    ({ className, ...props }: ComponentPropsWithoutRef<typeof Drawer.Overlay>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerContent: {
+    ({ className, children, ...props }: ComponentPropsWithoutRef<typeof Drawer.Content>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerHeader: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerFooter: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerTitle: {
+    ({ className, ...props }: ComponentPropsWithoutRef<typeof Drawer.Title>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerDescription: {
+    ({ className, ...props }: ComponentPropsWithoutRef<typeof Drawer.Description>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger };

package/dist/Atoms/Drawer/index.js

@@ -0,0 +1,319 @@
+"use client";
+
+// packages/tailwindTheme.ts
+var themes = {
+  spacing: {
+    30: "7.5rem",
+    // 120px
+    33: "8.25rem"
+    // 132px
+  },
+  colors: {
+    ui: {
+      white: "#ffffff",
+      "white-primary": "#ffffff",
+      "black-primary": "#111315",
+      "bg-white": "#FAFAFA",
+      primary: {
+        default: "#6C70F0",
+        50: "#EEF2FF",
+        100: "#E0E7FF",
+        200: "#C8D2FD",
+        300: "#A6B6FB",
+        400: "#828EF7",
+        500: "#6C70F0",
+        600: "#5048E3",
+        700: "#443AC8",
+        800: "#3731A2",
+        900: "#312F80",
+        950: "#1F1C4A"
+      },
+      secondary: {
+        default: "#C170FF",
+        50: "#F9F1FF",
+        100: "#F3E2FF",
+        200: "#ECD4FF",
+        300: "#E0B8FF",
+        400: "#D49BFF",
+        500: "#C170FF",
+        600: "#AE65E6",
+        700: "#9A5ACC",
+        800: "#874EB3",
+        900: "#613880",
+        950: "#3A224C"
+      },
+      tertiary: {
+        default: "#5B8CFF",
+        50: "#EFF4FF",
+        100: "#DEE8FF",
+        200: "#CEDDFF",
+        300: "#BDD1FF",
+        400: "#7CA3FF",
+        500: "#5B8CFF",
+        600: "#527EE6",
+        700: "#4062B3",
+        800: "#2E4680",
+        900: "#243866",
+        950: "#1B2A4C"
+      },
+      destructive: {
+        default: "#EF4444",
+        50: "#FEF2F2",
+        100: "#FEE2E2",
+        200: "#FECACA",
+        300: "#FCA5A5",
+        400: "#F87171",
+        500: "#EF4444",
+        600: "#DC2626",
+        700: "#B91C1C",
+        800: "#991B1B",
+        900: "#7F1D1D",
+        950: "#450A0A"
+      },
+      success: {
+        default: "#22c55e",
+        50: "#f0fdf4",
+        100: "#dcfce7",
+        200: "#bbf7d0",
+        300: "#86efac",
+        400: "#4ade80",
+        500: "#22c55e",
+        600: "#16a34a",
+        700: "#15803d",
+        800: "#166534",
+        900: "#14532d",
+        950: "#052e16"
+      },
+      warn: {
+        default: "#f59e0b",
+        50: "#fffbeb",
+        100: "#fef3c7",
+        200: "#fde68a",
+        300: "#fcd34d",
+        400: "#fbbf24",
+        500: "#f59e0b",
+        600: "#d97706",
+        700: "#b45309",
+        800: "#92400e",
+        900: "#78350f",
+        950: "#451a03"
+      },
+      text: {
+        black: "#09090b",
+        white: "#fafafa",
+        50: "#fafafa",
+        100: "#f4f4f5",
+        200: "#e4e4e7",
+        300: "#d4d4d8",
+        400: "#a1a1aa",
+        500: "#71717a",
+        600: "#52525b",
+        700: "#3f3f46",
+        800: "#27272a",
+        900: "#18181b",
+        950: "#09090b"
+      },
+      surface: {
+        default: "#ffffff",
+        50: "#ffffff",
+        100: "#f5f5f5",
+        200: "#e5e5e5",
+        300: "#d4d4d4",
+        400: "#a3a3a3",
+        500: "#737373",
+        600: "#525252",
+        700: "#404040",
+        800: "#262626",
+        900: "#171717",
+        950: "#0a0a0a"
+      },
+      border: {
+        default: "#64748B",
+        50: "#f9fafb",
+        100: "#f3f4f6",
+        200: "#e5e7eb",
+        300: "#d1d5db",
+        400: "#9ca3af",
+        500: "#64748B",
+        600: "#475569",
+        700: "#334155",
+        800: "#1E293B",
+        900: "#0F172A",
+        950: "#020817"
+      },
+      // TEXT COLOR
+      "text-primary": "#111315",
+      "text-secondary": "#30353C",
+      "text-third": "#30353CCC",
+      "text-placeholder": "#11131566",
+      "text-white-placeholder": "#FDFDFD99",
+      "text-black": {
+        primary: "#19191B",
+        secondary: "#222325",
+        third: "#292A2E",
+        fourth: "#5F606A",
+        placeholder: "#B2B3BD"
+      },
+      "text-white": {
+        primary: "#FCFCFC",
+        secondary: "#F9F9F9",
+        third: "#D9D9D9"
+      },
+      // COLOR SPECIAL
+      "positive-flat": "#4ADE80",
+      "destruction-flat": "#EF4444",
+      "neutral-flat": "#BFDBFE",
+      rating: "#FDE047",
+      input: {
+        border: {
+          active: "#71717A",
+          disabled: "#D4D4D8"
+        },
+        bg: {
+          default: "#FDFDFD",
+          error: "#FEF2F2"
+        }
+      }
+    }
+  },
+  backgroundImage: {
+    "ui-bg-color": "linear-gradient(110deg, #9CD5F5 3.09%, #B1B8E6 33.47%, rgba(185, 155, 215, 0.90) 62.82%, #A293DF 84.45%, #878AEA 106.08%)",
+    "ui-bg-page": "radial-gradient(70.47% 70.47% at 50% 50%, #FDFDFD 0%, #F3F1FF 50%, #F1FCFF 100%)",
+    "ui-btn-primary": "linear-gradient(180deg, #828EF7 0%, #6C70F0 100%)",
+    "ui-btn-secondary": "linear-gradient(180deg, #4277EF 0%, #669BF4 100%)",
+    "ui-btn-accept": "linear-gradient(282deg, #30C36D 6.81%, #6BCD8A 93.19%)",
+    "ui-btn-destructive": "linear-gradient(282deg, #FF384A 7.07%, #FF5463 92.93%)",
+    "ui-status-bg-positive": "linear-gradient(0deg, #C4FFD8 0%, #68FF9D 100%)",
+    "ui-status-bg-negative": "linear-gradient(0deg, #FECACA 0%, #FF8F8F 100%)",
+    "ui-status-bg-neutral": "linear-gradient(0deg, #E1EBFF 0%, #C7E8FF 100%)",
+    "ui-status-order": "linear-gradient(282deg, #30C36D 6.81%, #6BCD8A 93.19%)",
+    "ui-status-out-of-stock": "linear-gradient(282deg, #FF384A 7.07%, #FF5463 92.93%)",
+    "ui-status-in-stock": "linear-gradient(282deg, #30A8FF 6.81%, #73BAED 93.19%)",
+    "ui-line": "linear-gradient(90deg, #D3D4FF 0%, #7587EA 50%, #AEC0FF 100%)"
+  },
+  boxShadow: {
+    "ui-sd-primary": "0 4px 20px 0 rgba(104, 109, 224, 0.5)",
+    "ui-sd-base": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+    "ui-sd-destructive": "0 10px 10px 0 rgba(255, 56, 74, 0.15)",
+    "ui-sd-accept": "0 10px 10px 0 rgba(46, 213, 115, 0.15)",
+    "ui-xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+    "ui-soft": "0px 5px 12px 0px rgba(0, 67, 101, 0.08)",
+    "ui-muli": "0px 5px 50px 0px rgba(0, 67, 101, 0.08), 0px 2px 6px 0px rgba(130, 169, 188, 0.08)",
+    "ui-category-effect": "0px 4px 50px 0px rgba(0, 67, 101, 0.08)",
+    "ui-flat": "0px 0.25rem 0.625rem 0px rgba(99, 102, 241, 0.07)",
+    "ui-overlay": "0px 4px 4px 1px rgba(99, 102, 241, 0.04)",
+    "ui-sticky-nav": "0px 3px 12px -1px rgba(151, 71, 255, 0.07)",
+    "ui-dialog": "0px 8px 12px 0px rgba(99, 102, 241, 0.15)"
+  },
+  fontSize: {
+    "ui-h1": ["1.5rem", "2rem"],
+    "ui-h2": ["1.25rem", "1.75rem"],
+    "ui-h3": ["1.125rem", "1.75rem"],
+    "ui-p": ["1rem", "1.5rem"],
+    "ui-note": ["0.875rem", "1.25rem"],
+    "ui-small-note": ["0.75rem", "1rem"]
+  },
+  keyframes: {
+    "accordion-down": {
+      from: { height: "0" },
+      to: { height: "var(--radix-accordion-content-height)" }
+    },
+    "accordion-up": {
+      from: { height: "var(--radix-accordion-content-height)" },
+      to: { height: "0" }
+    }
+  },
+  animation: {
+    "accordion-down": "accordion-down 0.2s ease-out",
+    "accordion-up": "accordion-up 0.2s ease-out"
+  }
+};
+var tailwindTheme_default = themes;
+
+// packages/libs/utils.ts
+import clsx from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var customTailwindMerge = () => {
+  return extendTailwindMerge({
+    ...tailwindTheme_default,
+    prefix: ""
+  });
+};
+var cn = (...inputs) => {
+  const customTwMerge = customTailwindMerge();
+  return customTwMerge(clsx(inputs));
+};
+
+// packages/Atoms/Drawer/index.tsx
+import { Drawer } from "vaul";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DrawerRoot = ({
+  shouldScaleBackground = true,
+  ...props
+}) => /* @__PURE__ */ jsx(Drawer.Root, { shouldScaleBackground, ...props });
+DrawerRoot.displayName = "Drawer";
+var DrawerTrigger = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(Drawer.Trigger, { className: cn(className), ...props });
+DrawerTrigger.displayName = "DrawerTrigger";
+var DrawerPortal = ({ ...props }) => /* @__PURE__ */ jsx(Drawer.Portal, { ...props });
+DrawerPortal.displayName = "DrawerPortal";
+var DrawerClose = ({ className, ...props }) => /* @__PURE__ */ jsx(Drawer.Close, { className: cn("absolute right-4 top-4", className), ...props });
+DrawerClose.displayName = "DrawerClose";
+var DrawerOverlay = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(Drawer.Overlay, { className: cn("fixed inset-0 z-50 bg-black/80", className), ...props });
+DrawerOverlay.displayName = "DrawerOverlay";
+var DrawerContent = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+  /* @__PURE__ */ jsx(DrawerOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    Drawer.Content,
+    {
+      className: cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-ui-surface-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-2 w-24 rounded-full bg-ui-border-300" }),
+        children
+      ]
+    }
+  )
+] });
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("grid gap-1.5 p-4 text-center sm:text-left", className), ...props });
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props });
+DrawerFooter.displayName = "DrawerFooter";
+var DrawerTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Drawer.Title,
+  {
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+);
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(Drawer.Description, { className: cn("text-muted-foreground text-sm", className), ...props });
+DrawerDescription.displayName = "DrawerDescription";
+export {
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerRoot,
+  DrawerTitle,
+  DrawerTrigger
+};

package/dist/Ecommerce/Categories/index.js

@@ -443,7 +443,7 @@ var DateSelect = ({ onSortChange }) => {
   return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-y-1", children: [
     /* @__PURE__ */ jsx3("p", { className: "text-ui-small-note font-medium text-ui-text-600", children: "S\u1EAFp x\u1EBFp theo" }),
     /* @__PURE__ */ jsxs2(Select, { onValueChange: onSortChange, defaultValue: "date-desc", children: [
-      /* @__PURE__ */ jsx3(SelectTrigger, { className: "h-fit min-w-28 rounded border border-ui-border-400 px-2 py-1 text-ui-small-note font-semibold text-ui-text-500", children: /* @__PURE__ */ jsx3(SelectValue, { placeholder: "Gi\xE1 th\u1EA5p nh\u1EA5t" }) }),
+      /* @__PURE__ */ jsx3(SelectTrigger, { className: "h-fit rounded border border-ui-border-400 px-1 py-1 text-ui-small-note font-semibold text-ui-text-500 md:px-2", children: /* @__PURE__ */ jsx3(SelectValue, { placeholder: "Gi\xE1 th\u1EA5p nh\u1EA5t" }) }),
       /* @__PURE__ */ jsxs2(SelectContent, { className: "[&_div]:pl-2 [&_svg]:hidden", children: [
         /* @__PURE__ */ jsx3(SelectItem, { value: "price-asc", children: "Gi\xE1 th\u1EA5p nh\u1EA5t" }),
         /* @__PURE__ */ jsx3(SelectItem, { value: "price-desc", children: "Gi\xE1 cao nh\u1EA5t" }),
@@ -584,13 +584,13 @@ var AcceptBtn = ({ onFilterConfirm }) => {
       {
         variant: "outline",
         icon: /* @__PURE__ */ jsx6(Lucide2TunnelIcon_default, { size: 16, color: "#828EF7" }),
-        className: "h-fit border-2 pl-4 pr-6 text-ui-note font-bold",
+        className: "h-[30px] border-2 pl-4 pr-4 text-ui-note font-bold lg:pr-6",
         onClick: () => onFilterConfirm?.({
           brand: brandSelected,
           price,
           sort
         }),
-        children: /* @__PURE__ */ jsx6("span", { children: "L\u1ECDc k\u1EBFt qu\u1EA3" })
+        children: /* @__PURE__ */ jsx6("span", { className: "hidden lg:inline", children: "L\u1ECDc k\u1EBFt qu\u1EA3" })
       }
     )
   ] });
@@ -600,7 +600,7 @@ var AcceptBtn_default = AcceptBtn;
 // packages/Ecommerce/Categories/components/BrandTag.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
 var BrandTag = ({ name }) => {
-  return /* @__PURE__ */ jsx7("div", { className: "size-fit select-none rounded border border-purple-400 bg-purple-50 px-3 py-1 text-ui-small-note font-semibold text-purple-500", children: name });
+  return /* @__PURE__ */ jsx7("div", { className: "size-fit max-w-[86px] select-none rounded border border-purple-400 bg-purple-50 px-1 py-1 text-xs font-semibold text-purple-500 md:max-w-max md:px-3 md:text-ui-small-note", children: name });
 };
 var BrandTag_default = BrandTag;
 
@@ -651,7 +651,7 @@ var FilterBtn = ({ title, onClick }) => {
       className: "flex h-fit items-center gap-x-1 rounded border border-dashed border-ui-border-400 px-3 py-1 shadow-ui-overlay",
       children: [
         /* @__PURE__ */ jsx10(Lucide2PlusIcon_default, { size: 16, color: "#A1A1AA" }),
-        /* @__PURE__ */ jsx10("p", { className: "text-ui-small-note font-medium text-ui-text-400", children: title })
+        /* @__PURE__ */ jsx10("p", { className: "hidden text-ui-small-note font-medium text-ui-text-400 md:flex", children: title })
       ]
     }
   );
@@ -830,7 +830,7 @@ var CommandGroup = React2.forwardRef(({ className, ...props }, reference) => /*
       "[&_[cmdk-group-heading]]:py-1.5",
       "[&_[cmdk-group-heading]]:text-xs",
       "[&_[cmdk-group-heading]]:font-medium",
-      "[&_[cmdk-group-heading]]:text-ui-text-800",
+      "[&_[cmdk-group-heading]]:text-ui-text-600",
       className
     ),
     ...props
@@ -929,7 +929,7 @@ import { useCallback as useCallback3, useMemo as useMemo2, useState as useState4
 // packages/Ecommerce/Categories/components/PriceTag.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
 var PriceTag = ({ name }) => {
-  return /* @__PURE__ */ jsx14("div", { className: "size-fit select-none text-nowrap rounded border border-ui-tertiary-400 bg-ui-tertiary-50 px-3 py-1 text-ui-small-note font-semibold text-ui-tertiary-500", children: name });
+  return /* @__PURE__ */ jsx14("div", { className: "size-fit select-none text-wrap rounded border border-ui-tertiary-400 bg-ui-tertiary-50 px-3 py-1 text-ui-small-note font-semibold text-ui-tertiary-500", children: name });
 };
 var PriceTag_default = PriceTag;
 
@@ -1405,16 +1405,16 @@ var CategoriesPage = ({
               /* @__PURE__ */ jsx22(BrandProvider_default, { children: /* @__PURE__ */ jsx22(PriceProvider_default, { children: /* @__PURE__ */ jsxs12("div", { className: "grid grid-cols-3 gap-x-6 p-0", children: [
                 /* @__PURE__ */ jsxs12("div", { className: "flex grow flex-col gap-y-1", children: [
                   /* @__PURE__ */ jsx22("p", { className: "text-ui-small-note font-medium text-ui-text-800", children: "Th\u01B0\u01A1ng hi\u1EC7u" }),
-                  /* @__PURE__ */ jsxs12("div", { className: "flex h-full w-full flex-wrap gap-2 border-r border-ui-border-400", children: [
+                  /* @__PURE__ */ jsxs12("div", { className: "flex h-full w-full flex-wrap gap-2 border-r border-ui-border-400 pr-2", children: [
                     /* @__PURE__ */ jsx22(BrandDisplay_default, {}),
                     /* @__PURE__ */ jsx22(BrandModal_default, { data: brandData })
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs12("div", { className: "flex grow flex-col gap-y-1", children: [
                   /* @__PURE__ */ jsx22("p", { className: "text-ui-small-note font-medium text-ui-text-800", children: "Kho\u1EA3ng gi\xE1" }),
-                  /* @__PURE__ */ jsx22("div", { className: "flex size-full flex-wrap items-start gap-2 border-r border-ui-border-400", children: /* @__PURE__ */ jsx22(PricePopover_default, {}) })
+                  /* @__PURE__ */ jsx22("div", { className: "flex size-full flex-wrap items-start gap-2 border-r border-ui-border-400 pr-2", children: /* @__PURE__ */ jsx22(PricePopover_default, {}) })
                 ] }),
-                /* @__PURE__ */ jsx22("div", { className: "flex h-fit items-end justify-between gap-x-4", children: /* @__PURE__ */ jsx22(AcceptBtn_default, { onFilterConfirm }) })
+                /* @__PURE__ */ jsx22("div", { className: "flex h-fit flex-wrap items-end justify-between gap-x-4 gap-y-2", children: /* @__PURE__ */ jsx22(AcceptBtn_default, { onFilterConfirm }) })
               ] }) }) })
             ]
           }

package/dist/Molecules/Search/index.js

@@ -419,7 +419,7 @@ var CommandGroup = React2.forwardRef(({ className, ...props }, reference) => /*
       "[&_[cmdk-group-heading]]:py-1.5",
       "[&_[cmdk-group-heading]]:text-xs",
       "[&_[cmdk-group-heading]]:font-medium",
-      "[&_[cmdk-group-heading]]:text-ui-text-800",
+      "[&_[cmdk-group-heading]]:text-ui-text-600",
       className
     ),
     ...props
@@ -921,10 +921,11 @@ var Search2 = ({ search = "", isLoading = false, items = [], onSearch }) => {
         py: "1",
         width: "fit",
         gapX: "2",
-        className: "mr-8 rounded-lg border border-neutral-200 bg-ui-surface-50 hover:cursor-pointer hover:bg-ui-surface-100",
+        className: "mr-2 grow justify-between rounded-lg border border-neutral-200 bg-ui-surface-50 hover:cursor-pointer hover:bg-ui-surface-100 sm:mr-8 md:grow-0 md:justify-start",
         onClick: handleOpen,
         children: [
-          /* @__PURE__ */ jsx4("p", { className: "pt-0.5 text-ui-small-note font-medium text-ui-text-500", children: "T\xECm ki\u1EBFm s\u1EA3n ph\u1EA9m, th\u01B0\u01A1ng hi\u1EC7u,..." }),
+          /* @__PURE__ */ jsx4("p", { className: "hidden pt-0.5 text-ui-small-note font-medium text-ui-text-500 md:inline", children: "T\xECm ki\u1EBFm s\u1EA3n ph\u1EA9m, th\u01B0\u01A1ng hi\u1EC7u,..." }),
+          /* @__PURE__ */ jsx4("p", { className: "inline pt-0.5 text-ui-small-note font-medium text-ui-text-500 md:hidden", children: "T\xECm ki\u1EBFm" }),
           /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-1 rounded-md bg-ui-surface-200 px-2 py-0.5 text-ui-small-note", children: [
             isMac ? /* @__PURE__ */ jsx4("kbd", { className: "mt-0.5 h-4", children: "\u2318" }) : /* @__PURE__ */ jsx4("kbd", { className: "mt-0.5 h-3 font-semibold", children: "^" }),
             /* @__PURE__ */ jsx4("span", { className: "text-ui-small-note font-medium", children: "K" })