@bubo-squared/ui-framework 0.1.3 → 0.1.5

package/dist/index.cjs

@@ -83,7 +83,7 @@ function cn(...inputs) {
 // src/components/Buttons/Button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center whitespace-nowrap rounded transition-colors disabled:pointer-events-none overflow-hidden cursor-pointer",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-4 transition-colors disabled:pointer-events-none overflow-hidden cursor-pointer",
   {
     variants: {
       variant: {
@@ -120,10 +120,10 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
 var buttonIconVariants = (0, import_class_variance_authority.cva)("relative", {
   variants: {
     size: {
-      sm: ["w-5", "h-5", "*:w-5", "*:h-5"],
-      md: ["w-6", "h-6", "*:w-6", "*:h-6"],
-      lg: ["w-6", "h-6", "*:w-6", "*:h-6"],
-      xl: ["w-8", "h-8", "*:w-8", "*:h-8"]
+      sm: ["size-5", "*:size-5"],
+      md: ["size-6", "*:size-6"],
+      lg: ["size-6", "*:size-6"],
+      xl: ["size-8", "*:size-8"]
     }
   }
 });
@@ -195,7 +195,7 @@ var import_react_slot2 = require("@radix-ui/react-slot");
 var import_class_variance_authority3 = require("class-variance-authority");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var iconButtonVariants = (0, import_class_variance_authority3.cva)(
-  "inline-flex items-center justify-center whitespace-nowrap rounded transition-colors disabled:pointer-events-none overflow-hidden p-1.5 cursor-pointer",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-4 transition-colors disabled:pointer-events-none overflow-hidden p-1.5 cursor-pointer",
   {
     variants: {
       variant: {
@@ -217,10 +217,10 @@ var iconButtonVariants = (0, import_class_variance_authority3.cva)(
         ]
       },
       size: {
-        sm: ["[&>.buttonIcon>svg]:w-5", "[&>.buttonIcon>svg]:h-5"],
-        md: ["[&>.buttonIcon>svg]:w-6", "[&>.buttonIcon>svg]:h-6"],
-        lg: ["[&>.buttonIcon>svg]:w-8", "[&>.buttonIcon>svg]:h-8"],
-        xl: ["[&>.buttonIcon>svg]:w-9", "[&>.buttonIcon>svg]:h-9"]
+        sm: ["[&>.buttonIcon>svg]:size-5"],
+        md: ["[&>.buttonIcon>svg]:size-6"],
+        lg: ["[&>.buttonIcon>svg]:size-8"],
+        xl: ["[&>.buttonIcon>svg]:size-9"]
       }
     },
     defaultVariants: {
@@ -257,7 +257,7 @@ IconButton.displayName = "IconButton";
 var React3 = require("react");
 var import_class_variance_authority4 = require("class-variance-authority");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var IconGroupLinesClass = "inline-flex items-center justify-center gap-0 [&>button]:outline-none! [&>button]:rounded-none [&>button:focus]:shadow-none [&>button:focus]:bg-(--border-secondary) [&>button:first-child]:rounded-l [&>button:last-child]:rounded-r";
+var IconGroupLinesClass = "inline-flex items-center justify-center gap-0 [&>button]:outline-none! [&>button]:rounded-none [&>button:focus]:shadow-none [&>button:focus]:bg-(--border-secondary) [&>button:first-child]:rounded-l-4 [&>button:last-child]:rounded-r-4";
 var IconGroupSizeVariants = (0, import_class_variance_authority4.cva)("", {
   variants: {
     size: {
@@ -295,8 +295,8 @@ var IconButtonGroup = (props) => {
           disabled: item.disabled,
           className: cn(
             "rounded-none border-1 border-(--border-secondary) text-(--text-primary) ",
-            index === 0 && "rounded-l-[6px]",
-            index === items.length - 1 && "rounded-r-[6px]",
+            index === 0 && "rounded-l-6",
+            index === items.length - 1 && "rounded-r-6",
             index > 0 && "-ml-px"
           ),
           onClick: item.onClick
@@ -314,7 +314,7 @@ var import_react_slot3 = require("@radix-ui/react-slot");
 var import_class_variance_authority5 = require("class-variance-authority");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var linkButtonVariants = (0, import_class_variance_authority5.cva)(
-  "inline-flex items-center justify-center whitespace-nowrap rounded transition-colors disabled:pointer-events-none overflow-hidden gap-2 cursor-pointer",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-4 transition-colors disabled:pointer-events-none overflow-hidden gap-2 cursor-pointer",
   {
     variants: {
       variant: {
@@ -338,10 +338,10 @@ var linkButtonVariants = (0, import_class_variance_authority5.cva)(
 var linkButtonIconVariants = (0, import_class_variance_authority5.cva)("relative", {
   variants: {
     size: {
-      sm: ["w-5", "h-5", "*:w-5", "*:h-5"],
-      md: ["w-5", "h-5", "*:w-5", "*:h-5"],
-      lg: ["w-6", "h-6", "*:w-6", "*:h-6"],
-      xl: ["w-6", "h-6", "*:w-6", "*:h-6"]
+      sm: ["size-5", "*:size-5"],
+      md: ["size-5", "*:size-5"],
+      lg: ["size-6", "*:size-6"],
+      xl: ["size-6", "*:size-6"]
     }
   }
 });
@@ -423,9 +423,9 @@ var MessageButton = (props) => {
       type: "button",
       ...buttonProps,
       onClick: handleClick,
-      className: `inline-flex items-center justify-center rounded px-1.5 py-1 gap-1 text-sm transition-colors cursor-pointer ${statusClasses} ${className}`,
+      className: `inline-flex items-center justify-center rounded-4 px-1.5 py-1 gap-1 text-sm transition-colors cursor-pointer ${statusClasses} ${className}`,
       children: [
-        props.icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-5 *:w-5 h-5 *:h-5 relative", children: props.icon }),
+        props.icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "size-5 *:size-5 relative", children: props.icon }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-center text-xl font-normal leading-7", children: label })
       ]
     }
@@ -482,13 +482,13 @@ var avatarIconVariants = (0, import_class_variance_authority6.cva)(
   {
     variants: {
       size: {
-        "20": "w-3 h-3 [&>svg]:w-3 [&>svg]:h-3",
-        "24": "w-3.5 h-3.5 [&>svg]:w-3.5 [&>svg]:h-3.5",
-        "32": "w-4 h-4 [&>svg]:w-4 [&>svg]:h-4",
-        "40": "w-5 h-5 [&>svg]:w-5 [&>svg]:h-5",
-        "48": "w-6 h-6 [&>svg]:w-6 [&>svg]:h-6",
-        "56": "w-7 h-7 [&>svg]:w-7 [&>svg]:h-7",
-        "64": "w-8 h-8 [&>svg]:w-8 [&>svg]:h-8"
+        "20": "size-3 [&>svg]:size-3",
+        "24": "size-3.5 [&>svg]:size-3.5",
+        "32": "size-4 [&>svg]:size-4",
+        "40": "size-5 [&>svg]:size-5",
+        "48": "size-6 [&>svg]:size-6",
+        "56": "size-7 [&>svg]:size-7",
+        "64": "size-8 [&>svg]:size-8"
       }
     },
     defaultVariants: {
@@ -540,7 +540,7 @@ var import_react_slot5 = require("@radix-ui/react-slot");
 var import_class_variance_authority7 = require("class-variance-authority");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority7.cva)(
-  "inline-flex items-center justify-center rounded-[4px] leading-none whitespace-nowrap gap-1 px-1 py-0",
+  "inline-flex items-center justify-center rounded-4 leading-none whitespace-nowrap gap-1 px-1 py-0",
   {
     variants: {
       size: {
@@ -607,8 +607,8 @@ var badgeDigitVariants = (0, import_class_variance_authority8.cva)(
   {
     variants: {
       size: {
-        sm: "px-[6px] rounded-[2px] caption-medium",
-        md: "px-2 py-[2px] rounded-[4px] paragraph-s-medium"
+        sm: "px-[6px] rounded-2 caption-medium",
+        md: "px-2 py-[2px] rounded-4 paragraph-s-medium"
       },
       variant: {
         primary: "bg-(--background-brand)",
@@ -653,7 +653,7 @@ BadgeDigit.displayName = "BadgeDigit";
 var React9 = require("react");
 var import_class_variance_authority9 = require("class-variance-authority");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var badgeDotVariants = (0, import_class_variance_authority9.cva)("rounded-xl w-3 h-3", {
+var badgeDotVariants = (0, import_class_variance_authority9.cva)("rounded-12 size-3", {
   variants: {
     status: {
       disabled: "bg-(--text-primary)",
@@ -697,7 +697,7 @@ var BadgeStatus = React10.forwardRef(
             "span",
             {
               className: cn(
-                "shrink-0 w-3 h-3 rounded-full",
+                "shrink-0 size-3 rounded-full",
                 dotClasses,
                 dotClassName
               )
@@ -776,9 +776,9 @@ Divider.displayName = "Divider";
 var React12 = __toESM(require("react"), 1);
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var sizeToBarClasses = {
-  lg: "h-4 rounded-[16px]",
-  md: "h-2 rounded-[8px]",
-  sm: "h-1 rounded-[4px]"
+  lg: "h-4 rounded-16",
+  md: "h-2 rounded-8",
+  sm: "h-1 rounded-4"
 };
 var Progress = React12.forwardRef(
   (props, ref) => {
@@ -816,7 +816,7 @@ var Progress = React12.forwardRef(
             {
               className: cn(
                 "bg-(--chart-brand) h-full",
-                size === "lg" ? "rounded-4" : size === "md" ? "rounded-2" : "rounded-1"
+                size === "lg" ? "rounded-4" : size === "md" ? "rounded-2" : "rounded-[1px]"
               ),
               style: { width: `${clamped}%` }
             }
@@ -835,7 +835,7 @@ var import_class_variance_authority10 = require("class-variance-authority");
 var import_icons3 = require("@bubo-squared/icons");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var iconStatusVariants = (0, import_class_variance_authority10.cva)(
-  "inline-flex h-5 w-5 items-center justify-center rounded-full border-1 border-(--text-primary-inverse) p-1",
+  "inline-flex size-5 items-center justify-center rounded-full border-1 border-(--text-primary-inverse) p-1",
   {
     variants: {
       variant: {
@@ -871,7 +871,7 @@ var StatusAvatar = React13.forwardRef((props, ref) => {
           className
         ),
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn(dotClasses, "h-3.5 w-3.5 rounded-full") })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn(dotClasses, "size-3.5 rounded-full") })
       }
     );
   }
@@ -883,11 +883,11 @@ var StatusAvatar = React13.forwardRef((props, ref) => {
       className: cn(iconStatusVariants({ variant: iconVariant }), className),
       ...rest,
       children: [
-        iconVariant === "verified" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.CheckIcon, { className: "h-3 w-3 text-(--text-button-white)" }),
-        iconVariant === "bookmark" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.BookmarkCheckIcon, { className: "h-3 w-3 text-(--text-button-white)" }),
-        iconVariant === "favorite" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.StarIcon, { className: "h-3 w-3 text-(--text-button-white)" }),
-        iconVariant === "add" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.PlusIcon, { className: "h-3 w-3 text-(--text-button-white)" }),
-        iconVariant === "remove" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.CrossIcon, { className: "h-3 w-3 text-(--text-button-white)" })
+        iconVariant === "verified" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.CheckIcon, { className: "size-3 text-(--text-button-white)" }),
+        iconVariant === "bookmark" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.BookmarkCheckIcon, { className: "size-3 text-(--text-button-white)" }),
+        iconVariant === "favorite" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.StarIcon, { className: "size-3 text-(--text-button-white)" }),
+        iconVariant === "add" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.PlusIcon, { className: "size-3 text-(--text-button-white)" }),
+        iconVariant === "remove" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.CrossIcon, { className: "size-3 text-(--text-button-white)" })
       ]
     }
   );
@@ -900,7 +900,7 @@ var import_react_slot6 = require("@radix-ui/react-slot");
 var import_class_variance_authority11 = require("class-variance-authority");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var tagVariants = (0, import_class_variance_authority11.cva)(
-  "inline-flex flex-row items-center justify-center rounded-[6px] gap-2 px-3 overflow-hidden border-1 border-(--border-secondary) bg-(--background-neutral) hover:border-(--border-secondary-hover) focus:border-(--border-brand) focus-ring-primary ",
+  "inline-flex flex-row items-center justify-center rounded-6 gap-2 px-3 overflow-hidden border-1 border-(--border-secondary) bg-(--background-neutral) hover:border-(--border-secondary-hover) focus:border-(--border-brand) focus-ring-primary ",
   {
     variants: {
       size: {
@@ -961,7 +961,7 @@ function Checkbox({ label, className, ...props }) {
       CheckboxPrimitive.Root,
       {
         className: cn(
-          "group flex h-5 w-5 items-center justify-center rounded-xs border border-(--border-secondary) bg-(--background-neutral) text-(--text-primary)",
+          "group flex h-5 w-5 items-center justify-center rounded-2 border border-(--border-secondary) bg-(--background-neutral) text-(--text-primary)",
           "data-[state=checked]:bg-(--background-brand) data-[state=checked]:text-(--text-button-white) data-[state=checked]:border-none",
           "data-[state=indeterminate]:bg-(--background-brand) data-[state=indeterminate]:text-(--text-button-white) data-[state=indeterminate]:border-none",
           "data-[state=checked]:hover:bg-(--background-brand-hover) data-[state=indeterminate]:hover:bg-(--background-brand-hover)",
@@ -990,7 +990,7 @@ var import_icons6 = require("@bubo-squared/icons");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var dropdownWrapperBase = "flex flex-col gap-2 items-start min-w-[343px]";
 var dropdownTriggerVariants = (0, import_class_variance_authority12.cva)(
-  "group flex w-full items-center justify-between rounded border bg-(--background-primary) px-3 py-2 text-left transition-colors cursor-pointer focus-ring-primary focus:border-(--border-brand) hover:bg-(--background-primary-hover) disabled:bg-(--background-primary) disabled:border-(--border-secondary-disabled) disabled:text-(--text-primary-disabled) disabled:cursor-default",
+  "group flex w-full items-center justify-between rounded-4 border bg-(--background-primary) px-3 py-2 text-left transition-colors cursor-pointer focus-ring-primary focus:border-(--border-brand) hover:bg-(--background-primary-hover) disabled:bg-(--background-primary) disabled:border-(--border-secondary-disabled) disabled:text-(--text-primary-disabled) disabled:cursor-default",
   {
     variants: {
       size: {
@@ -1162,7 +1162,7 @@ var Dropdown = (props) => {
           ]
         }
       ),
-      isOpen && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "absolute z-10 mt-1 w-full min-w-343 rounded-(--border-radius-4) border border-(--border-primary-hover) bg-(--background-neutral) shadow-card-md flex overflow-y-scroll dropdown-scrollbar max-h-[316px]", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { role: "listbox", className: "flex flex-1 flex-col", children: options.map((opt) => {
+      isOpen && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "absolute z-10 mt-1 w-full min-w-343 rounded-4 border border-(--border-primary-hover) bg-(--background-neutral) shadow-card-md flex overflow-y-scroll dropdown-scrollbar max-h-[316px]", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { role: "listbox", className: "flex flex-1 flex-col", children: options.map((opt) => {
         const selected = opt.value === currentValue;
         return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "li",
@@ -1281,7 +1281,7 @@ var React19 = __toESM(require("react"), 1);
 var import_class_variance_authority13 = require("class-variance-authority");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var inputShellVariants = (0, import_class_variance_authority13.cva)(
-  "group flex w-full items-center rounded border bg-(--background-primary) text-left cursor-text border-(--border-secondary)",
+  "group flex w-full items-center rounded-4 border bg-(--background-primary) text-left cursor-text border-(--border-secondary)",
   {
     variants: {
       size: {
@@ -1344,8 +1344,8 @@ var iconWrapperVariants = (0, import_class_variance_authority14.cva)(
   {
     variants: {
       size: {
-        large: "w-5 h-5 [&>svg]:w-5 [&>svg]:h-5",
-        "extra-large": "w-6 h-6 [&>svg]:w-6 [&>svg]:h-6"
+        large: "size-5 [&>svg]:size-5",
+        "extra-large": "size-6 [&>svg]:size-6"
       },
       disabled: {
         true: "text-(--icon-primary-disabled)"
@@ -1641,8 +1641,8 @@ var searchTextVariants = (0, import_class_variance_authority15.cva)("truncate",
 var iconWrapperVariants2 = (0, import_class_variance_authority15.cva)("flex items-center justify-center shrink-0 text-(--icon-primary)", {
   variants: {
     size: {
-      large: "w-5 h-5 [&>svg]:w-5 [&>svg]:h-5",
-      "extra-large": "w-6 h-6 [&>svg]:w-6 [&>svg]:h-6"
+      large: "size-5 [&>svg]:size-5",
+      "extra-large": "size-6 [&>svg]:size-6"
     },
     disabled: {
       true: "text-(--icon-primary-disabled)"
@@ -1954,7 +1954,7 @@ var Slider = (props) => {
         "div",
         {
           className: cn(
-            "relative rounded-(--border-radius-4) shadow-card-md px-(--space-8) py-(--space-4)",
+            "relative rounded-4 shadow-card-md px-(--space-8) py-(--space-4)",
             disabled ? "bg-(--background-primary-disabled)" : "bg-(--background-neutral)"
           ),
           style: { marginBottom: 0 },
@@ -2001,7 +2001,7 @@ var Slider = (props) => {
         tabIndex: disabled ? -1 : 0,
         className: cn(
           "absolute -translate-x-1/2 flex items-center justify-center",
-          "h-8 w-[18px] rounded-(--border-radius-4)",
+          "h-8 w-[18px] rounded-4",
           disabled ? "bg-(--icon-primary-disabled) cursor-default" : "bg-(--icon-primary-hover) outline-none focus-visible:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-primary)] cursor-pointer"
         ),
         style: {
@@ -2027,7 +2027,7 @@ var Slider = (props) => {
         "div",
         {
           className: cn(
-            "relative w-full flex items-center rounded-(--border-radius-4)",
+            "relative w-full flex items-center rounded-4",
             disabled ? "bg-(--background-primary-disabled) cursor-default" : "bg-(--background-secondary) cursor-pointer"
           ),
           style: { height: `${trackHeight}px` },
@@ -2038,13 +2038,12 @@ var Slider = (props) => {
               "div",
               {
                 className: cn(
-                  "absolute h-full",
+                  "absolute h-full rounded-4",
                   disabled ? "bg-(--background-primary-disabled)" : "bg-(--background-secondary)"
                 ),
                 style: {
                   width: `calc(100% + ${thumbWidth}px)`,
-                  left: `-${thumbRadius}px`,
-                  borderRadius: "var(--border-radius-4)"
+                  left: `-${thumbRadius}px`
                 }
               }
             ),
@@ -2171,7 +2170,7 @@ var TextArea = (props) => {
       "div",
       {
         className: cn(
-          "relative flex w-full rounded border bg-(--background-primary) cursor-text transition-colors",
+          "relative flex w-full rounded-4 border bg-(--background-primary) cursor-text transition-colors",
           "border-(--border-secondary) hover:border-(--border-secondary-hover) hover:bg-(--background-primary-hover)",
           disabled && "bg-(--background-primary-disabled) border-(--border-secondary-disabled) cursor-default",
           statusBorderClass[status],
@@ -2275,8 +2274,8 @@ var iconWrapperVariants3 = (0, import_class_variance_authority16.cva)(
   {
     variants: {
       size: {
-        large: "w-5 h-5 [&>svg]:w-5 [&>svg]:h-5",
-        "extra-large": "w-6 h-6 [&>svg]:w-6 [&>svg]:h-6"
+        large: "size-5 [&>svg]:size-5",
+        "extra-large": "size-6 [&>svg]:size-6"
       },
       disabled: {
         true: "text-(--icon-primary-disabled)"
@@ -2410,7 +2409,7 @@ var Toggle = (props) => {
             {
               className: cn(
                 // Base track
-                "flex items-center w-9 h-5 rounded-3xl border bg-(--background-primary) p-(--space-2) transition-all",
+                "flex items-center w-9 h-5 rounded-24 border bg-(--background-primary) p-(--space-2) transition-all",
                 // Knob position
                 "justify-start peer-checked:justify-end",
                 // 1: enabled, unchecked, unhovered, unfocused
@@ -2538,7 +2537,7 @@ WebsiteInput.displayName = "WebsiteInput";
 var import_icons9 = require("@bubo-squared/icons");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var LogoIconExtraLarge = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-lg h-[512px] relative bg-linear-to-t from-gray-800 to-gray-950 rounded-[80px] overflow-hidden flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons9.LogoIconLIcon, { className: "w-96 h-96" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-lg h-[512px] relative bg-linear-to-t from-gray-800 to-gray-950 rounded-80 overflow-hidden flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons9.LogoIconLIcon, { className: "size-96" }) });
 };
 var LogoIconExtraLarge_default = LogoIconExtraLarge;
 
@@ -2546,7 +2545,7 @@ var LogoIconExtraLarge_default = LogoIconExtraLarge;
 var import_icons10 = require("@bubo-squared/icons");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var LogoIconExtraSmall = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-8 h-8 relative bg-linear-to-t from-gray-800 to-gray-950 rounded-[5px] overflow-hidden flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons10.LogoIconMIcon, { className: "w-6 h-6" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "size-8 relative bg-linear-to-t from-gray-800 to-gray-950 rounded-[5px] overflow-hidden flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons10.LogoIconMIcon, { className: "size-6" }) });
 };
 var LogoIconExtraSmall_default = LogoIconExtraSmall;
 
@@ -2554,7 +2553,7 @@ var LogoIconExtraSmall_default = LogoIconExtraSmall;
 var import_icons11 = require("@bubo-squared/icons");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var LogoIconLarge = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-64 h-64 relative bg-linear-to-t from-gray-800 to-gray-950 rounded-[40px] overflow-hidden flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons11.LogoIconMIcon, { className: "w-44 h-44" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "size-64 relative bg-linear-to-t from-gray-800 to-gray-950 rounded-40 overflow-hidden flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons11.LogoIconMIcon, { className: "size-44" }) });
 };
 var LogoIconLarge_default = LogoIconLarge;
 
@@ -2562,7 +2561,7 @@ var LogoIconLarge_default = LogoIconLarge;
 var import_icons12 = require("@bubo-squared/icons");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var LogoIconMedium = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-32 h-32 relative bg-linear-to-t from-gray-800 to-gray-950 rounded-[20px] overflow-hidden flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons12.LogoIconMIcon, { className: "w-24 h-24" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "size-32 relative bg-linear-to-t from-gray-800 to-gray-950 rounded-20 overflow-hidden flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons12.LogoIconMIcon, { className: "size-24" }) });
 };
 var LogoIconMedium_default = LogoIconMedium;
 
@@ -2570,7 +2569,7 @@ var LogoIconMedium_default = LogoIconMedium;
 var import_icons13 = require("@bubo-squared/icons");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var LogoIconSmall = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-14 h-14 relative bg-linear-to-t from-gray-800 to-gray-950 rounded-lg overflow-hidden flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons13.LogoIconMIcon, { className: "w-10 h-10" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "size-14 relative bg-linear-to-t from-gray-800 to-gray-950 rounded-8 overflow-hidden flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons13.LogoIconMIcon, { className: "size-10" }) });
 };
 var LogoIconSmall_default = LogoIconSmall;
 
@@ -2579,7 +2578,7 @@ var import_icons14 = require("@bubo-squared/icons");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var LogoInline = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "w-44 h-12 inline-flex justify-start items-center gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons14.LogoIconMIcon, { className: "w-12 h-12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons14.LogoIconMIcon, { className: "size-12" }),
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons14.LogoTextMIcon, { className: "h-8 w-[110px] text-(--text-primary)" })
   ] });
 };
@@ -2590,7 +2589,7 @@ var import_icons15 = require("@bubo-squared/icons");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var LogoInline2 = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "w-32 h-9 inline-flex justify-start items-center gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons15.LogoIconMIcon, { className: "w-9 h-9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons15.LogoIconMIcon, { className: "size-9" }),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons15.LogoTextMIcon, { className: "h-6 w-[83px] text-(--text-primary)" })
   ] });
 };
@@ -2601,7 +2600,7 @@ var import_icons16 = require("@bubo-squared/icons");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var LogoMultiline = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "w-36 inline-flex flex-col justify-start items-start gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons16.LogoIconMIcon, { className: "w-12 h-12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons16.LogoIconMIcon, { className: "size-12" }),
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons16.LogoTextMIcon, { className: "h-8 w-[111px] text-(--text-primary)" })
   ] });
 };