@bubo-squared/ui-framework 0.1.0

package/dist/index.js

@@ -0,0 +1,2582 @@
+// src/components/Buttons/Button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+
+// src/lib/utils.tsx
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { jsx } from "react/jsx-runtime";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/Buttons/Button.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded transition-colors disabled:pointer-events-none overflow-hidden cursor-pointer",
+  {
+    variants: {
+      variant: {
+        primary: [
+          "btn-primary",
+          "focus-ring-primary"
+        ],
+        secondary: [
+          "btn-secondary",
+          "focus-ring-secondary"
+        ],
+        outline: [
+          "btn-outline",
+          "focus-ring-outline"
+        ],
+        destructive: [
+          "btn-destructive",
+          "focus-ring-error"
+        ]
+      },
+      size: {
+        sm: ["px-1.5", "py-1", "gap-1"],
+        md: ["px-2", "py-1", "gap-1.5"],
+        lg: ["px-2.5", "py-1", "gap-1.5"],
+        xl: ["px-3", "py-0.5", "gap-2"]
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var buttonIconVariants = 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"]
+    }
+  }
+});
+var buttonTextVariants = cva("flex text-center justify-center font-normal", {
+  variants: {
+    size: {
+      sm: ["text-xl", "leading-7"],
+      md: ["text-2xl", "leading-8"],
+      lg: ["h-10", "text-3xl", "leading-9"],
+      xl: ["h-11", "text-4xl", "leading-10"]
+    }
+  }
+});
+var Button = React.forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      variant,
+      size = "md",
+      asChild = false,
+      children,
+      suffixIcon,
+      prefixIcon,
+      ...rest
+    } = props;
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...rest,
+        children: [
+          prefixIcon && /* @__PURE__ */ jsx2("div", { className: cn(buttonIconVariants({ size })), children: prefixIcon }),
+          /* @__PURE__ */ jsx2("div", { className: cn(buttonTextVariants({ size })), children }),
+          suffixIcon && /* @__PURE__ */ jsx2("div", { className: cn(buttonIconVariants({ size })), children: suffixIcon })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/Buttons/ButtonGroup.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var buttonGroupVariants = cva2(
+  "flex items-center justify-center gap-4 pt-4 w-80 min-w-80",
+  {
+    variants: {
+      variant: {
+        vertical: ["flex-col"],
+        horizontal: ["flex-row"]
+      }
+    },
+    defaultVariants: {
+      variant: "horizontal"
+    }
+  }
+);
+var ButtonGroup = (props) => {
+  const { orientation = "horizontal" } = props;
+  return /* @__PURE__ */ jsx3("div", { className: buttonGroupVariants({ variant: orientation }), ...props, children: props.children });
+};
+
+// src/components/Buttons/IconButton.tsx
+import * as React2 from "react";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var iconButtonVariants = cva3(
+  "inline-flex items-center justify-center whitespace-nowrap rounded transition-colors disabled:pointer-events-none overflow-hidden p-1.5 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        primary: [
+          "btn-primary",
+          "focus-ring-primary"
+        ],
+        secondary: [
+          "btn-secondary",
+          "focus-ring-secondary"
+        ],
+        outline: [
+          "btn-outline",
+          "focus-ring-outline"
+        ],
+        destructive: [
+          "btn-destructive-outline",
+          "focus-ring-error-outline"
+        ]
+      },
+      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"]
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var IconButton = React2.forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      variant,
+      size,
+      asChild = false,
+      icon,
+      ...rest
+    } = props;
+    const Comp = asChild ? Slot2 : "button";
+    return /* @__PURE__ */ jsx4(
+      Comp,
+      {
+        className: cn(iconButtonVariants({ variant, size }), className),
+        ref,
+        ...rest,
+        children: /* @__PURE__ */ jsx4("div", { className: "buttonIcon flex items-center justify-center", children: icon })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+// src/components/Buttons/IconButtonGroup.tsx
+import "react";
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx5 } from "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 IconGroupSizeVariants = cva4("", {
+  variants: {
+    size: {
+      sm: "[&>button]:px-1.5",
+      md: "[&>button]:px-2",
+      lg: "[&>button]:px-2",
+      xl: "[&>button]:px-3"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+var IconButtonGroup = (props) => {
+  const { items, size = "sm", className, ...rest } = props;
+  if (!items || items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: cn(
+        IconGroupLinesClass,
+        IconGroupSizeVariants({ size }),
+        className
+      ),
+      ...rest,
+      children: items.map((item, index) => /* @__PURE__ */ jsx5(
+        IconButton,
+        {
+          variant: "secondary",
+          size,
+          icon: item.icon,
+          "aria-label": item.ariaLabel,
+          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 && "-ml-px"
+          ),
+          onClick: item.onClick
+        },
+        index
+      ))
+    }
+  );
+};
+IconButtonGroup.displayName = "IconButtonGroup";
+
+// src/components/Buttons/LinkButton.tsx
+import * as React4 from "react";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import { cva as cva5 } from "class-variance-authority";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var linkButtonVariants = cva5(
+  "inline-flex items-center justify-center whitespace-nowrap rounded transition-colors disabled:pointer-events-none overflow-hidden gap-2 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        primary: ["btn-link-primary"],
+        secondary: ["btn-link-secondary"],
+        destructive: ["btn-link-destructive"]
+      },
+      size: {
+        sm: ["py-2", "px-1"],
+        md: ["py-2.5", "px-2"],
+        lg: ["py-2.5", "px-2"],
+        xl: ["py-3", "px-3"]
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var linkButtonIconVariants = cva5("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"]
+    }
+  }
+});
+var linkButtonTextVariants = cva5("inline-flex items-center text-center font-medium", {
+  variants: {
+    size: {
+      sm: ["text-sm", "leading-5"],
+      md: ["text-sm", "leading-5"],
+      lg: ["text-base", "leading-6"],
+      xl: ["text-base", "leading-6"]
+    }
+  }
+});
+var LinkButton = React4.forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      variant,
+      size = "sm",
+      asChild = false,
+      children,
+      suffixIcon,
+      prefixIcon,
+      ...rest
+    } = props;
+    const Comp = asChild ? Slot3 : "button";
+    return /* @__PURE__ */ jsxs2(
+      Comp,
+      {
+        className: cn(linkButtonVariants({ variant, size, className })),
+        ref,
+        ...rest,
+        children: [
+          prefixIcon && /* @__PURE__ */ jsx6("div", { className: cn(linkButtonIconVariants({ size })), children: prefixIcon }),
+          /* @__PURE__ */ jsx6("div", { className: cn(linkButtonTextVariants({ size })), children }),
+          suffixIcon && /* @__PURE__ */ jsx6("div", { className: cn(linkButtonIconVariants({ size })), children: suffixIcon })
+        ]
+      }
+    );
+  }
+);
+LinkButton.displayName = "LinkButton";
+
+// src/components/Buttons/MessageButton.tsx
+import * as React5 from "react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var MessageButton = (props) => {
+  const {
+    onClick,
+    idleLabel = "Save",
+    loadingLabel = "Saving\u2026",
+    successLabel = "Saved!",
+    errorLabel = "Error",
+    feedbackDuration = 1500,
+    className = "",
+    ...buttonProps
+  } = props;
+  const [status, setStatus] = React5.useState("idle");
+  const handleClick = async (_event) => {
+    if (status === "loading") return;
+    setStatus("loading");
+    try {
+      await Promise.resolve(onClick?.());
+      setStatus("success");
+    } catch (err) {
+      console.error(err);
+      setStatus("error");
+    } finally {
+      if (feedbackDuration > 0) {
+        window.setTimeout(() => setStatus("idle"), feedbackDuration);
+      }
+    }
+  };
+  const label = status === "loading" ? loadingLabel : status === "success" ? successLabel : status === "error" ? errorLabel : idleLabel;
+  const statusClasses = status === "success" ? "btn-msg-success" : status === "error" ? "btn-destructive" : "btn-outline focus-ring-outline";
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      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}`,
+      children: [
+        props.icon && /* @__PURE__ */ jsx7("div", { className: "w-5 *:w-5 h-5 *:h-5 relative", children: props.icon }),
+        /* @__PURE__ */ jsx7("div", { className: "text-center text-xl font-normal leading-7", children: label })
+      ]
+    }
+  );
+};
+MessageButton.displayName = "MessageButton";
+
+// src/components/Content/Avatar.tsx
+import * as React6 from "react";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import { cva as cva6 } from "class-variance-authority";
+import { UserIcon } from "@bubo-squared/icons";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var avatarVariants = cva6(
+  "relative inline-flex items-center justify-center rounded-full border-(--border-secondary) border-1 bg-(--background-primary) text-(--text-primary) overflow-hidden hover:border-(--focus-secondary) focus-visible:border-(--focus-primary) focus-visible:outline-none",
+  {
+    variants: {
+      size: {
+        "20": "w-5 h-5 hover:border-2 focus-visible:border-2",
+        "24": "w-6 h-6 hover:border-2 focus-visible:border-2",
+        "32": "w-8 h-8 hover:border-2 focus-visible:border-2",
+        "40": "w-10 h-10 hover:border-2 focus-visible:border-2",
+        "48": "w-12 h-12 hover:border-2 focus-visible:border-2",
+        "56": "w-14 h-14 hover:border-4 focus-visible:border-4",
+        "64": "w-16 h-16 hover:border-4 focus-visible:border-4"
+      }
+    },
+    defaultVariants: {
+      size: "32"
+    }
+  }
+);
+var avatarInitialsVariants = cva6(
+  "flex items-center justify-center text-(--text-primary) leading-none ",
+  {
+    variants: {
+      size: {
+        "20": "footnote-xs-medium",
+        "24": "footnote-medium",
+        "32": "paragraph-s font-medium",
+        "40": "paragraph-m font-medium",
+        "48": "paragraph-l font-medium",
+        "56": "subtitle font-medium",
+        "64": "h6-title font-medium"
+      }
+    },
+    defaultVariants: {
+      size: "32"
+    }
+  }
+);
+var avatarIconVariants = cva6(
+  "flex items-center justify-center text-(--icon-primary)",
+  {
+    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"
+      }
+    },
+    defaultVariants: {
+      size: "32"
+    }
+  }
+);
+var Avatar = React6.forwardRef(
+  (props, ref) => {
+    const {
+      asChild = false,
+      variant = "initial",
+      size = "32",
+      initials = "RA",
+      src,
+      alt,
+      className,
+      ...rest
+    } = props;
+    const Comp = asChild ? Slot4 : "button";
+    const hasImage = variant === "image" && typeof src === "string" && src.length > 0;
+    return /* @__PURE__ */ jsxs4(
+      Comp,
+      {
+        ref,
+        className: cn(avatarVariants({ size }), className),
+        ...rest,
+        children: [
+          hasImage ? /* @__PURE__ */ jsx8(
+            "img",
+            {
+              src,
+              alt,
+              className: "w-full h-full object-cover"
+            }
+          ) : null,
+          !hasImage && variant === "initial" && /* @__PURE__ */ jsx8("span", { className: cn(avatarInitialsVariants({ size }), "relative bottom-px"), style: { marginBottom: 0 }, children: initials }),
+          !hasImage && variant === "icon" && /* @__PURE__ */ jsx8("span", { className: cn(avatarIconVariants({ size })), children: /* @__PURE__ */ jsx8(UserIcon, {}) })
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+
+// src/components/Content/Badge.tsx
+import * as React7 from "react";
+import { Slot as Slot5 } from "@radix-ui/react-slot";
+import { cva as cva7 } from "class-variance-authority";
+import { Fragment, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var badgeVariants = cva7(
+  "inline-flex items-center justify-center rounded-[4px] leading-none whitespace-nowrap gap-1 px-1 py-0",
+  {
+    variants: {
+      size: {
+        sm: "px-1 paragraph-s",
+        md: "px-1 paragraph-m",
+        lg: "px-1.5 subtitle",
+        xl: "px-2 h6-title"
+      },
+      variant: {
+        primary: "bg-(--background-secondary) text-(--text-primary)",
+        secondary: "bg-(--background-primary) border-1 border-(--border-primary) text-(--text-primary)",
+        active: "bg-(--color-ac-lilac) text-(--text-neutral-badge-black)",
+        informal: "bg-(--color-ac-neon-blue) text-(--text-neutral-badge-black)",
+        success: "bg-(--color-ac-neon-green) text-(--text-neutral-badge-black)",
+        warning: "bg-(--color-ac-light-orange) text-(--text-neutral-badge-black)",
+        error: "bg-(--color-s-error-300) text-(--text-neutral-badge-black)",
+        disabled: "bg-(--background-primary-disabled) border-1 border-(--border-primary-disabled) text-(--text-primary-disabled)",
+        "double-default": "bg-(--background-secondary) text-(--text-primary)",
+        "double-current": "bg-(--color-ac-lilac) text-(--text-neutral-badge-black)"
+      }
+    },
+    defaultVariants: {
+      size: "sm",
+      variant: "primary"
+    }
+  }
+);
+var Badge = React7.forwardRef(
+  (props, ref) => {
+    const {
+      asChild = false,
+      label,
+      value,
+      size = "sm",
+      variant = "primary",
+      className,
+      ...rest
+    } = props;
+    const Comp = asChild ? Slot5 : "div";
+    return /* @__PURE__ */ jsx9(
+      Comp,
+      {
+        ref,
+        className: cn(badgeVariants({ size, variant }), className),
+        ...rest,
+        style: { marginBottom: 0 },
+        children: value ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsx9("span", { className: "font-normal", children: label }),
+          /* @__PURE__ */ jsx9("span", { className: "font-normal", children: ":" }),
+          /* @__PURE__ */ jsx9("span", { className: "font-medium", children: value })
+        ] }) : /* @__PURE__ */ jsx9("span", { className: "font-normal", children: label })
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+// src/components/Content/BadgeDigit.tsx
+import * as React8 from "react";
+import { cva as cva8 } from "class-variance-authority";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var badgeDigitVariants = cva8(
+  "inline-flex items-center justify-center leading-none whitespace-nowrap text-(--text-primary-inverse)",
+  {
+    variants: {
+      size: {
+        sm: "px-[6px] rounded-[2px] caption-medium",
+        md: "px-2 py-[2px] rounded-[4px] paragraph-s-medium"
+      },
+      variant: {
+        primary: "bg-(--background-brand)",
+        secondary: "bg-(--background-primary) border-1 border-(--border-secondary) text-(--text-secondary)",
+        informal: "bg-(--background-informal)",
+        success: "bg-(--background-success)",
+        warning: "bg-(--background-warning)",
+        error: "bg-(--background-error)",
+        disabled: "bg-(--background-primary) border-1 border-(--border-primary-disabled) text-(--text-primary-disabled)"
+      }
+    },
+    defaultVariants: {
+      size: "sm",
+      variant: "primary"
+    }
+  }
+);
+var BadgeDigit = React8.forwardRef(
+  (props, ref) => {
+    const {
+      value,
+      size = "sm",
+      variant = "primary",
+      className,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsx10(
+      "div",
+      {
+        ref,
+        className: cn(badgeDigitVariants({ size, variant }), className),
+        style: { marginBottom: 0 },
+        ...rest,
+        children: String(value)
+      }
+    );
+  }
+);
+BadgeDigit.displayName = "BadgeDigit";
+
+// src/components/Content/BadgeDot.tsx
+import "react";
+import { cva as cva9 } from "class-variance-authority";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var badgeDotVariants = cva9("rounded-xl w-3 h-3", {
+  variants: {
+    status: {
+      disabled: "bg-(--text-primary)",
+      informal: "bg-(--background-informal)",
+      "success/online": "bg-(--background-success)",
+      warning: "bg-(--background-warning)",
+      error: "bg-(--background-error)"
+    }
+  },
+  defaultVariants: {
+    status: "disabled"
+  }
+});
+var BadgeDot = ({ status, className }) => {
+  return /* @__PURE__ */ jsx11("div", { className: cn(badgeDotVariants({ status }), className) });
+};
+BadgeDot.displayName = "BadgeDot";
+
+// src/components/Content/BadgeStatus.tsx
+import * as React10 from "react";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var BadgeStatus = React10.forwardRef(
+  (props, ref) => {
+    const {
+      label,
+      active = true,
+      className,
+      dotClassName,
+      ...rest
+    } = props;
+    const textClasses = active ? "caption-medium text-(--text-primary)" : "caption-medium text-(--text-primary-disabled)";
+    const dotClasses = active ? "bg-(--background-informal)" : "bg-(--background-primary)";
+    return /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ref,
+        className: cn("inline-flex items-center gap-2", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx12(
+            "span",
+            {
+              className: cn(
+                "shrink-0 w-3 h-3 rounded-full",
+                dotClasses,
+                dotClassName
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx12("span", { className: textClasses, style: { marginBottom: 0 }, children: label })
+        ]
+      }
+    );
+  }
+);
+BadgeStatus.displayName = "BadgeStatus";
+
+// src/components/Content/Divider.tsx
+import "react";
+import { TargetIcon } from "@bubo-squared/icons";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var lineClass = "h-px flex-1 bg-(--border-secondary)";
+var Divider = (props) => {
+  const { type = "line", className, ...rest } = props;
+  const showCenter = type !== "line";
+  const textLabel = type === "text-lines" && "label" in rest && rest.label ? rest.label : "OR";
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cn(
+        "flex w-full items-center",
+        showCenter ? "gap-2" : "gap-0",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx13("div", { className: lineClass }),
+        type === "text-lines" && /* @__PURE__ */ jsx13(
+          "span",
+          {
+            className: "footnote text-(--text-secondary)",
+            style: { marginBottom: 0 },
+            children: textLabel
+          }
+        ),
+        type === "icon-lines" && /* @__PURE__ */ jsx13(
+          IconButton,
+          {
+            variant: props.type === "icon-lines" && props.iconButtonVariant ? props.iconButtonVariant : "secondary",
+            size: "sm",
+            "aria-label": props.type === "icon-lines" && props.ariaLabel ? props.ariaLabel : textLabel || "More options",
+            icon: props.type === "icon-lines" ? props.icon : /* @__PURE__ */ jsx13(TargetIcon, {}),
+            onClick: props.type === "icon-lines" ? props.onIconClick : void 0
+          }
+        ),
+        type === "icon-group-lines" && (props.type === "icon-group-lines" ? /* @__PURE__ */ jsx13(
+          IconButtonGroup,
+          {
+            items: props.iconGroupItems,
+            size: props.iconGroupSize
+          }
+        ) : null),
+        type === "button-lines" && /* @__PURE__ */ jsx13(
+          Button,
+          {
+            variant: props.type === "button-lines" && props.buttonVariant ? props.buttonVariant : "secondary",
+            size: "md",
+            onClick: props.type === "button-lines" ? props.onButtonClick : void 0,
+            children: props.type === "button-lines" ? props.buttonLabel : "Label"
+          }
+        ),
+        showCenter && /* @__PURE__ */ jsx13("div", { className: lineClass })
+      ]
+    }
+  );
+};
+Divider.displayName = "Divider";
+
+// src/components/Content/Progress.tsx
+import * as React12 from "react";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var sizeToBarClasses = {
+  lg: "h-4 rounded-[16px]",
+  md: "h-2 rounded-[8px]",
+  sm: "h-1 rounded-[4px]"
+};
+var Progress = React12.forwardRef(
+  (props, ref) => {
+    const {
+      value,
+      label,
+      hint,
+      showLabel = true,
+      showHint = !!hint,
+      size = "lg",
+      className,
+      ...rest
+    } = props;
+    const clamped = Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;
+    const percentageLabel = `${Math.round(clamped)}%`;
+    const barHeightClasses = sizeToBarClasses[size];
+    return /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col gap-2 items-start w-full", className),
+        role: "progressbar",
+        "aria-valuenow": clamped,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": label,
+        ...rest,
+        children: [
+          showLabel && label && /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-center justify-between", children: [
+            /* @__PURE__ */ jsx14("span", { className: "paragraph-s-bold text-(--text-primary)", style: { marginBottom: 0 }, children: label }),
+            /* @__PURE__ */ jsx14("span", { className: "footnote text-(--text-secondary)", style: { marginBottom: 0 }, children: percentageLabel })
+          ] }),
+          /* @__PURE__ */ jsx14("div", { className: cn("w-full bg-(--chart-mono) overflow-hidden", barHeightClasses), children: /* @__PURE__ */ jsx14(
+            "div",
+            {
+              className: cn(
+                "bg-(--chart-brand) h-full",
+                size === "lg" ? "rounded-4" : size === "md" ? "rounded-2" : "rounded-1"
+              ),
+              style: { width: `${clamped}%` }
+            }
+          ) }),
+          showHint && hint && /* @__PURE__ */ jsx14("p", { className: "caption text-(--text-secondary)", style: { marginBottom: 0 }, children: hint })
+        ]
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+
+// src/components/Content/StatusAvatar.tsx
+import * as React13 from "react";
+import { cva as cva10 } from "class-variance-authority";
+import {
+  BookmarkCheckIcon,
+  CheckIcon,
+  CrossIcon,
+  PlusIcon,
+  StarIcon
+} from "@bubo-squared/icons";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var iconStatusVariants = cva10(
+  "inline-flex h-5 w-5 items-center justify-center rounded-full border-1 border-(--text-primary-inverse) p-1",
+  {
+    variants: {
+      variant: {
+        verified: "bg-(--background-informal)",
+        bookmark: "bg-(--background-brand)",
+        favorite: "bg-(--background-success)",
+        add: "bg-(--background-primary-hover)",
+        remove: "bg-(--background-error)"
+      }
+    },
+    defaultVariants: {
+      variant: "verified"
+    }
+  }
+);
+var presenceDotBase = "inline-flex h-5 w-5 items-center justify-center";
+var presenceDotByVariant = {
+  offline: "bg-(--background-primary) border-1 border-(--text-primary-inverse)",
+  online: "bg-(--background-success) border-1 border-(--text-primary-inverse)",
+  away: "bg-(--background-warning) border-1 border-(--text-primary-inverse)",
+  busy: "bg-(--background-error) border-1 border-(--text-primary-inverse)"
+};
+var StatusAvatar = React13.forwardRef((props, ref) => {
+  const { variant = "verified", className, ...rest } = props;
+  if (variant === "offline" || variant === "online" || variant === "away" || variant === "busy") {
+    const dotClasses = presenceDotByVariant[variant];
+    return /* @__PURE__ */ jsx15(
+      "div",
+      {
+        ref,
+        className: cn(
+          presenceDotBase,
+          className
+        ),
+        ...rest,
+        children: /* @__PURE__ */ jsx15("div", { className: cn(dotClasses, "h-3.5 w-3.5 rounded-full") })
+      }
+    );
+  }
+  const iconVariant = variant;
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      ref,
+      className: cn(iconStatusVariants({ variant: iconVariant }), className),
+      ...rest,
+      children: [
+        iconVariant === "verified" && /* @__PURE__ */ jsx15(CheckIcon, { className: "h-3 w-3 text-(--text-button-white)" }),
+        iconVariant === "bookmark" && /* @__PURE__ */ jsx15(BookmarkCheckIcon, { className: "h-3 w-3 text-(--text-button-white)" }),
+        iconVariant === "favorite" && /* @__PURE__ */ jsx15(StarIcon, { className: "h-3 w-3 text-(--text-button-white)" }),
+        iconVariant === "add" && /* @__PURE__ */ jsx15(PlusIcon, { className: "h-3 w-3 text-(--text-button-white)" }),
+        iconVariant === "remove" && /* @__PURE__ */ jsx15(CrossIcon, { className: "h-3 w-3 text-(--text-button-white)" })
+      ]
+    }
+  );
+});
+StatusAvatar.displayName = "StatusAvatar";
+
+// src/components/Content/Tag.tsx
+import * as React14 from "react";
+import { Slot as Slot6 } from "@radix-ui/react-slot";
+import { cva as cva11 } from "class-variance-authority";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+var tagVariants = cva11(
+  "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 ",
+  {
+    variants: {
+      size: {
+        sm: "py-0.5",
+        md: "py-1.5"
+      }
+    },
+    defaultVariants: {
+      size: "sm"
+    }
+  }
+);
+var disabledTag = "pointer-events-none border-(--border-secondary-disabled) bg-(--background-neutral-disabled) text-(--text-primary-disabled)";
+var iconClasses = "flex items-center justify-center w-5 h-5 [&>*]:w-5 [&>*]:h-5 shrink-0 text-(--text-primary)";
+var Tag = React14.forwardRef(
+  (props, ref) => {
+    const {
+      size = "sm",
+      className,
+      asChild = false,
+      disabled = false,
+      label,
+      value,
+      ...rest
+    } = props;
+    const Comp = asChild ? Slot6 : "div";
+    const leading = props.leadingIcon && React14.isValidElement(props.leadingIcon) ? React14.cloneElement(props.leadingIcon, { disabled, ...props.leadingIcon.props }) : null;
+    const trailing = props.trailingIcon && React14.isValidElement(props.trailingIcon) ? React14.cloneElement(props.trailingIcon, { disabled, ...props.trailingIcon.props }) : null;
+    return /* @__PURE__ */ jsxs10(
+      Comp,
+      {
+        className: cn(tagVariants({ size }), disabled && disabledTag, className),
+        ref,
+        ...rest,
+        children: [
+          leading && /* @__PURE__ */ jsx16("div", { className: iconClasses, children: leading }),
+          value ? /* @__PURE__ */ jsxs10("div", { className: "flex flex-row gap-1 items-center", children: [
+            /* @__PURE__ */ jsx16("span", { className: "text-(--text-primary) paragraph-l mb-0! cursor-default font-normal", children: label }),
+            /* @__PURE__ */ jsx16("span", { className: "text-(--text-primary) paragraph-l mb-0! cursor-default font-normal", children: ":" }),
+            /* @__PURE__ */ jsx16("span", { className: "text-(--text-primary) paragraph-l-medium mb-0! cursor-default font-medium", children: value })
+          ] }) : /* @__PURE__ */ jsx16("span", { className: "text-(--text-primary) paragraph-l mb-0! cursor-default", children: label }),
+          trailing && /* @__PURE__ */ jsx16("div", { className: iconClasses, children: trailing })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/Inputs/Checkbox.tsx
+import "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon as CheckIcon2 } from "@bubo-squared/icons";
+import { MinusIcon } from "@bubo-squared/icons";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+function Checkbox({ label, className, ...props }) {
+  return /* @__PURE__ */ jsxs11("label", { className: "inline-flex items-center gap-(--space-12) cursor-pointer select-none", children: [
+    /* @__PURE__ */ jsx17(
+      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)",
+          "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)",
+          "focus-visible:border-(--border-brand)",
+          "disabled:bg-(--background-primary-disabled) disabled:border-none disabled:text-(--icon-primary-disabled)",
+          "data-[state=checked]:disabled:bg-(--background-primary-disabled) data-[state=checked]:disabled:border-none data-[state=checked]:disabled:text-(--icon-primary-disabled)",
+          "data-[state=indeterminate]:disabled:bg-(--background-primary-disabled) data-[state=indeterminate]:disabled:border-none data-[state=indeterminate]:disabled:text-(--icon-primary-disabled)",
+          "focus-ring-primary hover:cursor-pointer hover:border-(--border-secondary-hover)",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs11(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
+          /* @__PURE__ */ jsx17(CheckIcon2, { className: "h-5 w-5 hidden group-data-[state=checked]:block" }),
+          /* @__PURE__ */ jsx17(MinusIcon, { className: "h-5 w-5 hidden group-data-[state=indeterminate]:block" })
+        ] })
+      }
+    ),
+    label && /* @__PURE__ */ jsx17("span", { className: "paragraph-m-medium text-(--text-primary)", style: { marginBottom: 0 }, children: label })
+  ] });
+}
+
+// src/components/Inputs/Dropdown.tsx
+import * as React16 from "react";
+import { cva as cva12 } from "class-variance-authority";
+import { ChevronDownIcon } from "@bubo-squared/icons";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var dropdownWrapperBase = "flex flex-col gap-2 items-start min-w-[343px]";
+var dropdownTriggerVariants = cva12(
+  "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",
+  {
+    variants: {
+      size: {
+        large: "h-11",
+        "extra-large": "h-14"
+      },
+      status: {
+        default: "border-(--border-secondary)",
+        success: "border-(--border-success)",
+        error: "border-(--border-error)"
+      }
+    },
+    defaultVariants: {
+      size: "large",
+      status: "default"
+    }
+  }
+);
+var dropdownTextVariants = cva12("truncate", {
+  variants: {
+    size: {
+      large: "subtitle",
+      "extra-large": "h6-title"
+    },
+    hasValue: {
+      false: "text-(--text-secondary)",
+      true: "text-(--text-primary)"
+    },
+    disabled: {
+      true: "text-(--text-primary-disabled)"
+    }
+  },
+  defaultVariants: {
+    size: "large",
+    hasValue: false
+  }
+});
+var dropdownIconVariants = cva12("flex items-center justify-center shrink-0", {
+  variants: {
+    size: {
+      large: "w-5 h-5",
+      "extra-large": "w-6 h-6"
+    },
+    disabled: {
+      false: "text-(--icon-primary)",
+      true: "text-(--icon-primary-disabled)"
+    }
+  },
+  defaultVariants: {
+    size: "large",
+    disabled: false
+  }
+});
+var Dropdown = (props) => {
+  const {
+    label = "Field Label",
+    showLabel = true,
+    hint = "This is a hint text to help user.",
+    showHint = true,
+    placeholder = "Placeholder text",
+    size = "large",
+    status = "default",
+    disabled,
+    options,
+    value,
+    defaultValue,
+    onChange,
+    className,
+    showMenu,
+    ...buttonProps
+  } = props;
+  const dropdownRef = React16.useRef(null);
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = React16.useState(
+    defaultValue
+  );
+  const [open, setOpen] = React16.useState(false);
+  const currentValue = isControlled ? value : internalValue;
+  const selectedOption = options.find((opt) => opt.value === currentValue);
+  const hasValue = !!selectedOption;
+  const isOpen = showMenu ?? open;
+  const handleToggle = () => {
+    if (disabled) return;
+    if (showMenu === void 0) {
+      setOpen((prev) => !prev);
+    }
+  };
+  const handleSelect = (optionValue) => {
+    if (!isControlled) {
+      setInternalValue(optionValue);
+    }
+    onChange?.(optionValue);
+    if (showMenu === void 0) {
+      setOpen(false);
+    }
+  };
+  const triggerId = React16.useId();
+  const labelId = `${triggerId}-label`;
+  const hintId = `${triggerId}-hint`;
+  React16.useEffect(() => {
+    if (showMenu !== void 0) return;
+    const handleClickOutside = (event) => {
+      if (!dropdownRef.current) return;
+      if (!dropdownRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showMenu]);
+  return /* @__PURE__ */ jsxs12("div", { ref: dropdownRef, className: dropdownWrapperBase, children: [
+    showLabel && /* @__PURE__ */ jsx18(
+      "label",
+      {
+        htmlFor: triggerId,
+        id: labelId,
+        className: cn(
+          "paragraph-s",
+          disabled ? "text-(--text-primary-disabled)" : "text-(--text-primary)"
+        ),
+        style: { marginBottom: 0 },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs12("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsxs12(
+        "button",
+        {
+          type: "button",
+          id: triggerId,
+          "aria-haspopup": "listbox",
+          "aria-expanded": isOpen,
+          "aria-labelledby": showLabel ? labelId : void 0,
+          "aria-describedby": showHint ? hintId : void 0,
+          disabled,
+          className: cn(
+            dropdownTriggerVariants({ size, status }),
+            className
+          ),
+          onClick: handleToggle,
+          "data-open": isOpen || void 0,
+          ...buttonProps,
+          children: [
+            /* @__PURE__ */ jsx18(
+              "span",
+              {
+                className: cn(
+                  dropdownTextVariants({
+                    size,
+                    hasValue,
+                    disabled: !!disabled
+                  })
+                ),
+                style: { marginBottom: 0 },
+                children: hasValue ? selectedOption?.label : placeholder
+              }
+            ),
+            /* @__PURE__ */ jsx18(
+              "span",
+              {
+                className: cn(
+                  dropdownIconVariants({ size, disabled: !!disabled })
+                ),
+                children: /* @__PURE__ */ jsx18(ChevronDownIcon, {})
+              }
+            )
+          ]
+        }
+      ),
+      isOpen && options.length > 0 && /* @__PURE__ */ jsx18("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__ */ jsx18("ul", { role: "listbox", className: "flex flex-1 flex-col", children: options.map((opt) => {
+        const selected = opt.value === currentValue;
+        return /* @__PURE__ */ jsx18(
+          "li",
+          {
+            className: cn(
+              "bg-(--background-neutral) border-b border-(--border-secondary) last:border-b-0",
+              selected && "bg-(--background-secondary)"
+            ),
+            children: /* @__PURE__ */ jsx18(
+              "button",
+              {
+                type: "button",
+                className: "flex w-full items-center gap-2 pl-(--space-8) pr-(--space-16) py-(--space-8) text-left paragraph-l text-(--text-primary) hover:bg-(--background-secondary)",
+                style: { marginBottom: 0 },
+                role: "option",
+                "aria-selected": selected,
+                onClick: () => handleSelect(opt.value),
+                children: opt.label
+              }
+            )
+          },
+          opt.value
+        );
+      }) }) })
+    ] }),
+    showHint && /* @__PURE__ */ jsx18(
+      "p",
+      {
+        id: hintId,
+        className: cn(
+          "caption",
+          disabled ? "text-(--text-primary-disabled)" : "text-(--text-secondary)"
+        ),
+        style: { marginBottom: 0 },
+        children: hint
+      }
+    )
+  ] });
+};
+Dropdown.displayName = "Dropdown";
+
+// src/components/Inputs/PasswordInput.tsx
+import * as React20 from "react";
+import { cva as cva14 } from "class-variance-authority";
+
+// src/components/ui/input.tsx
+import * as React17 from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Input = React17.forwardRef(
+  ({ className, type, variant = "default", ...props }, ref) => {
+    const base = "text-(--text-primary) placeholder:text-(--text-secondary) disabled:text-(--text-primary-disabled) disabled:placeholder:text-(--text-primary-disabled) selection:bg-primary selection:text-primary-foreground file:text-foreground";
+    const defaultStyles = "dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 shadow-xs transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-0 focus-visible:shadow-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive";
+    const bareStyles = "bg-transparent outline-none w-full";
+    return /* @__PURE__ */ jsx19(
+      "input",
+      {
+        ref,
+        type,
+        "data-slot": "input",
+        className: cn(
+          base,
+          variant === "default" ? defaultStyles : bareStyles,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/components/Inputs/Field.tsx
+import * as React18 from "react";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var fieldBase = "flex flex-col gap-2 items-start min-w-[343px]";
+var Field = (props) => {
+  const {
+    label,
+    hint,
+    status = "default",
+    disabled,
+    className,
+    children
+  } = props;
+  const fieldId = React18.useId();
+  const labelId = label ? `${fieldId}-label` : void 0;
+  const hintId = hint ? `${fieldId}-hint` : void 0;
+  const hintColorClass = disabled ? "text-(--text-primary-disabled)" : status === "success" ? "text-(--text-success)" : status === "error" ? "text-(--text-error)" : "text-(--text-secondary)";
+  const labelColorClass = disabled ? "text-(--text-primary-disabled)" : "text-(--text-primary)";
+  return /* @__PURE__ */ jsxs13("div", { className: cn(fieldBase, className), children: [
+    label && /* @__PURE__ */ jsx20(
+      "label",
+      {
+        id: labelId,
+        className: cn("paragraph-s", labelColorClass),
+        style: { marginBottom: 0 },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx20("div", { className: "relative w-full", children }),
+    /* @__PURE__ */ jsx20(
+      "p",
+      {
+        id: hint ? hintId : void 0,
+        className: cn("caption", hint ? hintColorClass : "invisible"),
+        style: { marginBottom: 0 },
+        children: hint || "\xA0"
+      }
+    )
+  ] });
+};
+Field.displayName = "Field";
+
+// src/components/Inputs/InputShell.tsx
+import * as React19 from "react";
+import { cva as cva13 } from "class-variance-authority";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var inputShellVariants = cva13(
+  "group flex w-full items-center rounded border bg-(--background-primary) text-left cursor-text border-(--border-secondary)",
+  {
+    variants: {
+      size: {
+        large: "gap-2 px-2 py-2 h-11",
+        "extra-large": "gap-2 px-[10px] py-2 h-14"
+      },
+      status: {
+        default: "input-default",
+        success: "input-success",
+        error: "input-error"
+      },
+      disabled: {
+        true: "bg-(--background-primary-disabled) border-(--border-secondary-disabled) text-(--text-primary-disabled) cursor-default"
+      }
+    },
+    defaultVariants: {
+      size: "large",
+      status: "default"
+    }
+  }
+);
+var InputShell = React19.forwardRef(
+  ({ size, status, disabled, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx21(
+      "div",
+      {
+        ref,
+        "aria-disabled": disabled || void 0,
+        className: cn(
+          inputShellVariants({ size, status, disabled }),
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+InputShell.displayName = "InputShell";
+
+// src/components/Inputs/PasswordInput.tsx
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+var passwordTextVariants = cva14("truncate", {
+  variants: {
+    size: {
+      large: "subtitle",
+      "extra-large": "h6-title"
+    },
+    disabled: {
+      true: "text-(--text-primary-disabled)",
+      false: "text-(--text-primary)"
+    }
+  },
+  defaultVariants: {
+    size: "large",
+    disabled: false
+  }
+});
+var iconWrapperVariants = cva14(
+  "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"
+      },
+      disabled: {
+        true: "text-(--icon-primary-disabled)"
+      }
+    },
+    defaultVariants: {
+      size: "large"
+    }
+  }
+);
+var actionButtonVariants = cva14(
+  "flex items-center justify-center shrink-0 cursor-pointer bg-transparent border-0 p-0 text-left paragraph-s text-(--icon-primary) hover:text-(--icon-primary-hover) focus:outline-none ",
+  {
+    variants: {
+      size: {
+        large: "paragraph-s",
+        "extra-large": "paragraph-m"
+      },
+      disabled: {
+        true: "cursor-default text-(--text-primary-disabled) hover:text-(--text-primary-disabled)"
+      }
+    },
+    defaultVariants: {
+      size: "large"
+    }
+  }
+);
+var PasswordInput = (props) => {
+  const {
+    label,
+    hint,
+    placeholder = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+    size = "large",
+    status = "default",
+    variant = "icons",
+    disabled,
+    className,
+    leadingIcon,
+    trailingIcon,
+    actionLabel = "Action",
+    onActionClick,
+    value,
+    defaultValue,
+    onChange,
+    ...inputProps
+  } = props;
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = React20.useState(
+    defaultValue ?? ""
+  );
+  const currentValue = (isControlled ? value : internalValue) ?? "";
+  const inputRef = React20.useRef(null);
+  const handleContainerClick = () => {
+    if (disabled) return;
+    inputRef.current?.focus();
+  };
+  const handleChange = (event) => {
+    if (!isControlled) {
+      setInternalValue(event.target.value);
+    }
+    onChange?.(event);
+  };
+  const showLeadingIcon = variant === "icons" && !!leadingIcon;
+  const showTrailingIcon = variant === "icons" && !!trailingIcon;
+  const showAction = variant === "action" && !!actionLabel;
+  return /* @__PURE__ */ jsx22(
+    Field,
+    {
+      label,
+      hint,
+      status,
+      disabled,
+      children: /* @__PURE__ */ jsxs14(
+        InputShell,
+        {
+          size,
+          status,
+          disabled,
+          className,
+          onClick: handleContainerClick,
+          children: [
+            showLeadingIcon && /* @__PURE__ */ jsx22(
+              "span",
+              {
+                className: cn(
+                  iconWrapperVariants({ size, disabled: !!disabled })
+                ),
+                children: leadingIcon
+              }
+            ),
+            /* @__PURE__ */ jsx22(
+              Input,
+              {
+                ref: inputRef,
+                type: "password",
+                disabled: disabled ?? void 0,
+                placeholder,
+                value: isControlled ? value : currentValue,
+                defaultValue: isControlled ? void 0 : defaultValue,
+                onChange: handleChange,
+                variant: "bare",
+                className: cn(
+                  passwordTextVariants({ size, disabled: !!disabled })
+                ),
+                style: { marginBottom: 0 },
+                ...inputProps
+              }
+            ),
+            showTrailingIcon && /* @__PURE__ */ jsx22(
+              "span",
+              {
+                className: cn(
+                  iconWrapperVariants({ size, disabled: !!disabled })
+                ),
+                children: trailingIcon
+              }
+            ),
+            showAction && /* @__PURE__ */ jsx22(
+              "button",
+              {
+                type: "button",
+                style: { marginBottom: 0 },
+                className: cn(
+                  actionButtonVariants({ size, disabled: !!disabled })
+                ),
+                onClick: disabled ? void 0 : onActionClick,
+                children: actionLabel
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+PasswordInput.displayName = "PasswordInput";
+
+// src/components/Inputs/RadioGroup.tsx
+import * as React21 from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+var wrapperBase = "flex flex-col gap-2 items-start min-w-[343px]";
+var RadioGroup = ({
+  label,
+  hint,
+  options,
+  orientation = "vertical",
+  disabled = false,
+  value,
+  defaultValue,
+  onValueChange,
+  className,
+  ...rootProps
+}) => {
+  const groupId = React21.useId();
+  const hintId = hint ? `${groupId}-hint` : void 0;
+  const handleValueChange = (next) => {
+    onValueChange?.(next);
+  };
+  const isHorizontal = orientation === "horizontal";
+  return /* @__PURE__ */ jsxs15("div", { className: wrapperBase, children: [
+    label && /* @__PURE__ */ jsx23(
+      "span",
+      {
+        className: cn(
+          "paragraph-s text-(--text-primary)",
+          disabled && "text-(--text-primary-disabled)"
+        ),
+        style: { marginBottom: 0 },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx23(
+      RadioGroupPrimitive.Root,
+      {
+        ...rootProps,
+        value,
+        defaultValue,
+        onValueChange: handleValueChange,
+        "aria-describedby": hintId,
+        className: cn(
+          "flex",
+          isHorizontal ? "flex-row gap-6" : "flex-col gap-2",
+          className
+        ),
+        children: options.map((option) => /* @__PURE__ */ jsx23(
+          RadioGroupPrimitive.Item,
+          {
+            value: option.value,
+            disabled: disabled || option.disabled,
+            asChild: true,
+            children: /* @__PURE__ */ jsxs15(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  "group inline-flex items-center gap-2 outline-none",
+                  "data-[disabled]:pointer-events-none",
+                  disabled || option.disabled ? "cursor-default" : "cursor-pointer"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx23(
+                    "span",
+                    {
+                      className: cn(
+                        "flex items-center justify-center shrink-0 h-5 w-5 rounded-full border bg-(--background-primary) transition-all",
+                        // 1: enabled, unchecked, unfocused, unhovered
+                        "group-data-[state=unchecked]:border-(--border-secondary)",
+                        // 2: enabled, checked, unfocused, unhovered
+                        "group-data-[state=checked]:border-(--border-brand)",
+                        // 3: enabled, unchecked, hovered, unfocused
+                        "group-data-[state=unchecked]:group-hover:border-(--border-secondary-hover)",
+                        // 4: enabled, checked, hovered, unfocused
+                        "group-data-[state=checked]:group-hover:border-(--border-brand-hover)",
+                        "group-data-[state=checked]:group-hover:shadow-[0_0_0_var(--focus-ring-spread)_var(--color-b-100)]",
+                        // 5: enabled, unchecked, focused (override 1/3)
+                        "group-data-[state=unchecked]:group-focus-visible:border-(--border-secondary-hover)",
+                        // 6: enabled, checked, focused (override 2/4)
+                        "group-data-[state=checked]:group-focus-visible:border-(--border-brand-focus)",
+                        "group-data-[state=checked]:group-focus-visible:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-primary)]",
+                        // 7: disabled, unchecked (override everything above)
+                        "group-[&[data-disabled][data-state=unchecked]]:border-none",
+                        "group-[&[data-disabled][data-state=unchecked]]:bg-(--background-primary-disabled)",
+                        // 8: disabled, checked (override everything above)
+                        "group-[&[data-disabled][data-state=checked]]:border-(--border-primary-disabled)",
+                        "group-[&[data-disabled][data-state=checked]]:bg-(--background-primary-disabled)"
+                      ),
+                      children: /* @__PURE__ */ jsx23(
+                        "span",
+                        {
+                          className: cn(
+                            "h-4 w-4 rounded-full bg-(--background-brand) scale-0 transition-transform",
+                            "group-data-[state=checked]:scale-100",
+                            "group-data-[state=checked]:group-hover:bg-(--background-brand-hover)",
+                            "group-data-[state=checked]:group-focus-visible:bg-(--background-brand-hover)",
+                            "group-[&[data-disabled][data-state=checked]]:bg-(--background-brand-disabled)",
+                            "group-[&[data-disabled][data-state=unchecked]]:scale-0"
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx23(
+                    "span",
+                    {
+                      className: cn(
+                        "paragraph-s text-(--text-primary)",
+                        "group-data-[disabled]:text-(--text-primary-disabled) whitespace-nowrap"
+                      ),
+                      style: { marginBottom: 0 },
+                      children: option.label
+                    }
+                  )
+                ]
+              }
+            )
+          },
+          option.value
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx23(
+      "p",
+      {
+        id: hintId,
+        className: cn(
+          "caption text-(--text-secondary)",
+          disabled && "text-(--text-primary-disabled)"
+        ),
+        style: { marginBottom: 0 },
+        children: hint ?? "\xA0"
+      }
+    )
+  ] });
+};
+
+// src/components/Inputs/SearchInput.tsx
+import * as React22 from "react";
+import { cva as cva15 } from "class-variance-authority";
+import { SearchIcon } from "@bubo-squared/icons";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+var searchTextVariants = cva15("truncate", {
+  variants: {
+    size: {
+      large: "subtitle",
+      "extra-large": "h6-title"
+    }
+  },
+  defaultVariants: {
+    size: "large"
+  }
+});
+var iconWrapperVariants2 = cva15("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"
+    },
+    disabled: {
+      true: "text-(--icon-primary-disabled)"
+    }
+  },
+  defaultVariants: {
+    size: "large"
+  }
+});
+var SearchInput = (props) => {
+  const {
+    placeholder = "Search...",
+    size = "large",
+    disabled,
+    className,
+    leadingIcon,
+    showLeadingIcon = true,
+    ...inputProps
+  } = props;
+  const inputRef = React22.useRef(null);
+  const handleContainerClick = () => {
+    if (disabled) return;
+    inputRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsx24("div", { className: "flex flex-col gap-2 items-start min-w-[343px]", children: /* @__PURE__ */ jsx24("div", { className: "relative w-full", children: /* @__PURE__ */ jsxs16(
+    InputShell,
+    {
+      size,
+      status: "default",
+      disabled,
+      className,
+      onClick: handleContainerClick,
+      children: [
+        showLeadingIcon && /* @__PURE__ */ jsx24("span", { className: cn(iconWrapperVariants2({ size, disabled: !!disabled })), children: leadingIcon ?? /* @__PURE__ */ jsx24(SearchIcon, {}) }),
+        /* @__PURE__ */ jsx24(
+          Input,
+          {
+            ref: inputRef,
+            type: "search",
+            placeholder,
+            disabled: disabled ?? void 0,
+            variant: "bare",
+            className: cn(
+              searchTextVariants({ size })
+            ),
+            style: { marginBottom: 0 },
+            ...inputProps
+          }
+        )
+      ]
+    }
+  ) }) });
+};
+SearchInput.displayName = "SearchInput";
+
+// src/components/Inputs/Slider.tsx
+import * as React23 from "react";
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+var wrapperBase2 = "flex flex-col gap-2 items-start min-w-[343px]";
+var Slider = (props) => {
+  const {
+    display = "flat",
+    type = "single",
+    tooltipPlacement = "top",
+    tooltipFormatter,
+    showPercentage = true,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    value,
+    defaultValue,
+    onValueChange,
+    className
+  } = props;
+  const isControlled = value !== void 0;
+  const expectedLength = type === "multi" ? 2 : 1;
+  const normalizeArray = React23.useCallback(
+    (arr, fallback) => {
+      if (!arr || arr.length === 0) return fallback;
+      if (arr.length === expectedLength) return arr;
+      if (arr.length > expectedLength) return arr.slice(0, expectedLength);
+      if (arr.length === 1 && expectedLength === 2) {
+        return [arr[0], max];
+      }
+      return fallback;
+    },
+    [expectedLength, max]
+  );
+  const defaultInternal = React23.useMemo(() => {
+    if (defaultValue) return normalizeArray(defaultValue, []);
+    if (type === "multi") return [min, Math.min(min + (max - min) / 4, max)];
+    return [min + (max - min) / 3];
+  }, [defaultValue, min, max, type, normalizeArray]);
+  const [internalValue, setInternalValue] = React23.useState(
+    () => normalizeArray(isControlled ? value : defaultInternal, defaultInternal)
+  );
+  React23.useEffect(() => {
+    if (isControlled) {
+      setInternalValue(
+        (current2) => normalizeArray(value, current2.length ? current2 : defaultInternal)
+      );
+    }
+  }, [isControlled, value, normalizeArray, defaultInternal]);
+  const current = internalValue;
+  const trackRef = React23.useRef(null);
+  const clamp = (val) => {
+    if (val < min) return min;
+    if (val > max) return max;
+    return val;
+  };
+  React23.useEffect(() => {
+    if (!isControlled) {
+      setInternalValue((prev) => {
+        const clamped = prev.map((v) => clamp(v));
+        if (type === "multi" && clamped.length === 2 && step > 0) {
+          return enforceMinGap(clamped, prev);
+        }
+        return clamped;
+      });
+    }
+  }, [isControlled, min, max]);
+  const snap = (val) => {
+    const range = max - min;
+    if (range <= 0 || step <= 0) return clamp(val);
+    const stepsFromMin = Math.round((val - min) / step);
+    return clamp(min + stepsFromMin * step);
+  };
+  const enforceMinGap = (next, prev) => {
+    if (type !== "multi" || next.length !== 2 || step <= 0) return next;
+    let [low, high] = next;
+    const [prevLow, prevHigh] = prev.length === 2 ? prev : next;
+    if (low > high) {
+      [low, high] = [high, low];
+    }
+    const minGap = step;
+    if (high - low < minGap) {
+      const lowChanged = low !== prevLow;
+      const highChanged = high !== prevHigh;
+      if (lowChanged && !highChanged) {
+        low = clamp(high - minGap);
+      } else if (highChanged && !lowChanged) {
+        high = clamp(low + minGap);
+      } else {
+        high = clamp(low + minGap);
+      }
+      if (high - low < minGap) {
+        low = clamp(high - minGap);
+      }
+    }
+    return [low, high];
+  };
+  const updateValue = (next) => {
+    let normalized = normalizeArray(next, current);
+    if (type === "multi" && normalized.length === 2) {
+      normalized = enforceMinGap(normalized, current);
+    }
+    if (!isControlled) {
+      setInternalValue(normalized);
+    }
+    onValueChange?.(normalized);
+  };
+  const getSnappedValueFromClientX = (clientX, track) => {
+    const rect = track.getBoundingClientRect();
+    const offsetX = clientX - rect.left;
+    const ratio = rect.width === 0 ? 0 : offsetX / rect.width;
+    const rawValue = min + ratio * (max - min);
+    return snap(rawValue);
+  };
+  const startDrag = (thumbIndex, clientX) => {
+    if (disabled) return;
+    const track = trackRef.current;
+    if (!track) return;
+    const handlePointerMove = (event) => {
+      if (disabled) return;
+      const snapped = getSnappedValueFromClientX(event.clientX, track);
+      if (type === "multi" && current.length === 2) {
+        const [a, b] = current;
+        if (thumbIndex === 0) {
+          updateValue([snapped, b]);
+        } else {
+          updateValue([a, snapped]);
+        }
+      } else {
+        updateValue([snapped]);
+      }
+    };
+    const handlePointerUp = () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+    };
+    const initialSnapped = getSnappedValueFromClientX(clientX, track);
+    if (type === "multi" && current.length === 2) {
+      const [a, b] = current;
+      if (thumbIndex === 0) {
+        updateValue([initialSnapped, b]);
+      } else {
+        updateValue([a, initialSnapped]);
+      }
+    } else {
+      updateValue([initialSnapped]);
+    }
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+  };
+  const handleTrackPointerDown = (event) => {
+    if (disabled) return;
+    if (event.button !== 0) return;
+    const track = trackRef.current;
+    if (!track) return;
+    const snapped = getSnappedValueFromClientX(event.clientX, track);
+    let thumbIndex = 0;
+    if (type === "multi" && current.length === 2) {
+      const [a, b] = current;
+      const distToA = Math.abs(snapped - a);
+      const distToB = Math.abs(snapped - b);
+      thumbIndex = distToA <= distToB ? 0 : 1;
+    }
+    event.preventDefault();
+    startDrag(thumbIndex, event.clientX);
+  };
+  const handleThumbKeyDown = (index, event) => {
+    if (disabled) return;
+    const key = event.key;
+    let delta = 0;
+    if (key === "ArrowRight" || key === "ArrowUp") {
+      delta = step;
+    } else if (key === "ArrowLeft" || key === "ArrowDown") {
+      delta = -step;
+    } else if (key === "Home") {
+      updateValue(
+        current.map((v, i) => i === index ? min : v)
+      );
+      event.preventDefault();
+      return;
+    } else if (key === "End") {
+      updateValue(
+        current.map((v, i) => i === index ? max : v)
+      );
+      event.preventDefault();
+      return;
+    }
+    if (delta !== 0) {
+      const next = current.map(
+        (v, i) => i === index ? snap(v + delta) : v
+      );
+      updateValue(next);
+      event.preventDefault();
+    }
+  };
+  const [primary, secondary] = type === "multi" && current.length === 2 ? [current[0], current[1]] : [current[0], void 0];
+  const valueToPercent = (val) => {
+    if (val === void 0) return 0;
+    if (max === min) return 0;
+    const clamped = clamp(val);
+    return (clamped - min) / (max - min) * 100;
+  };
+  const primaryPercent = valueToPercent(primary);
+  const secondaryPercent = valueToPercent(secondary);
+  const showNumeric = display === "numeric";
+  const showTooltip = display === "tooltip";
+  const isTooltipAbove = tooltipPlacement === "top";
+  const isDecimalDomain = !Number.isInteger(step) || !Number.isInteger(min) || !Number.isInteger(max);
+  const formatNumber = (num) => {
+    if (!isDecimalDomain) {
+      return `${Math.round(num)}`;
+    }
+    const rounded = Number(num.toFixed(2));
+    if (Number.isInteger(rounded)) {
+      return `${rounded}`;
+    }
+    return rounded.toFixed(2);
+  };
+  const formatDisplayValue = (val) => {
+    const value2 = val ?? min;
+    if (tooltipFormatter) return tooltipFormatter(value2);
+    if (showPercentage) {
+      const percent = valueToPercent(value2);
+      return `${formatNumber(percent)}%`;
+    }
+    return formatNumber(value2);
+  };
+  const formatNumericLabel = () => {
+    if (type === "multi" && secondary !== void 0) {
+      if (!tooltipFormatter && showPercentage && display === "numeric") {
+        const first = formatNumber(valueToPercent(primary));
+        const second = formatNumber(valueToPercent(secondary));
+        return `${first} - ${second}`;
+      }
+      return `${formatDisplayValue(primary)} - ${formatDisplayValue(secondary)}`;
+    }
+    return formatDisplayValue(primary);
+  };
+  const trackHeight = 32;
+  const thumbWidth = 18;
+  const thumbRadius = thumbWidth / 2;
+  const renderTooltipBubble = (key, percent, labelText) => /* @__PURE__ */ jsx25(
+    "div",
+    {
+      className: "absolute -translate-x-1/2 flex flex-col items-center",
+      style: {
+        left: `${percent}%`,
+        bottom: isTooltipAbove ? "100%" : void 0,
+        top: isTooltipAbove ? void 0 : "100%",
+        marginBottom: isTooltipAbove ? 8 : void 0,
+        marginTop: isTooltipAbove ? void 0 : 8
+      },
+      children: /* @__PURE__ */ jsxs17(
+        "div",
+        {
+          className: cn(
+            "relative rounded-(--border-radius-4) shadow-card-md px-(--space-8) py-(--space-4)",
+            disabled ? "bg-(--background-primary-disabled)" : "bg-(--background-neutral)"
+          ),
+          style: { marginBottom: 0 },
+          children: [
+            /* @__PURE__ */ jsx25(
+              "p",
+              {
+                className: cn(
+                  "paragraph-s",
+                  disabled ? "text-(--text-primary-disabled)" : "text-(--text-primary)"
+                ),
+                style: { marginBottom: 0 },
+                children: labelText
+              }
+            ),
+            /* @__PURE__ */ jsx25(
+              "div",
+              {
+                className: cn(
+                  "absolute left-1/2 -translate-x-1/2 w-2 h-2 rotate-45",
+                  disabled ? "bg-(--background-primary-disabled)" : "bg-(--background-neutral)",
+                  isTooltipAbove ? "-bottom-1" : "-top-1"
+                )
+              }
+            )
+          ]
+        }
+      )
+    },
+    key
+  );
+  const renderHandle = (index, percent, ariaValueText) => {
+    const val = index === 0 ? primary : secondary;
+    return /* @__PURE__ */ jsx25(
+      "button",
+      {
+        type: "button",
+        role: "slider",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": val,
+        "aria-valuetext": ariaValueText,
+        "aria-disabled": disabled || void 0,
+        tabIndex: disabled ? -1 : 0,
+        className: cn(
+          "absolute -translate-x-1/2 flex items-center justify-center",
+          "h-8 w-[18px] rounded-(--border-radius-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: {
+          left: `${percent}%`,
+          top: `calc(50% - ${trackHeight / 2}px)`
+        },
+        onPointerDown: (event) => {
+          if (disabled) return;
+          if (event.button !== 0) return;
+          event.preventDefault();
+          startDrag(index, event.clientX);
+        },
+        onKeyDown: (event) => handleThumbKeyDown(index, event)
+      },
+      index
+    );
+  };
+  return /* @__PURE__ */ jsx25("div", { className: wrapperBase2, children: /* @__PURE__ */ jsxs17("div", { className: cn("w-[354px] flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ jsxs17("div", { className: "relative w-full", children: [
+      showTooltip && primary !== void 0 && renderTooltipBubble("primary", primaryPercent, formatDisplayValue(primary)),
+      showTooltip && type === "multi" && secondary !== void 0 && renderTooltipBubble("secondary", secondaryPercent, formatDisplayValue(secondary)),
+      /* @__PURE__ */ jsxs17(
+        "div",
+        {
+          className: cn(
+            "relative w-full flex items-center rounded-(--border-radius-4)",
+            disabled ? "bg-(--background-primary-disabled) cursor-default" : "bg-(--background-secondary) cursor-pointer"
+          ),
+          style: { height: `${trackHeight}px` },
+          ref: trackRef,
+          onPointerDown: handleTrackPointerDown,
+          children: [
+            /* @__PURE__ */ jsx25(
+              "div",
+              {
+                className: cn(
+                  "absolute h-full",
+                  disabled ? "bg-(--background-primary-disabled)" : "bg-(--background-secondary)"
+                ),
+                style: {
+                  width: `calc(100% + ${thumbWidth}px)`,
+                  left: `-${thumbRadius}px`,
+                  borderRadius: "var(--border-radius-4)"
+                }
+              }
+            ),
+            renderHandle(0, primaryPercent, formatDisplayValue(primary)),
+            type === "multi" && secondary !== void 0 && renderHandle(1, secondaryPercent, formatDisplayValue(secondary))
+          ]
+        }
+      )
+    ] }),
+    showNumeric && /* @__PURE__ */ jsx25(
+      "p",
+      {
+        className: cn(
+          "paragraph-s text-(--text-primary)",
+          disabled && "text-(--text-primary-disabled)"
+        ),
+        style: { marginBottom: 0 },
+        children: formatNumericLabel()
+      }
+    )
+  ] }) });
+};
+Slider.displayName = "Slider";
+
+// src/components/Inputs/TextArea.tsx
+import * as React24 from "react";
+import { MaximizeIcon } from "@bubo-squared/icons";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+var wrapperBase3 = "flex flex-col gap-2 items-start min-w-[343px]";
+var TextArea = (props) => {
+  const {
+    label,
+    hint,
+    status = "default",
+    type = "responsive",
+    maxLength,
+    disabled,
+    className,
+    value,
+    defaultValue,
+    onChange,
+    rows = 3,
+    ...textareaProps
+  } = props;
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = React24.useState(
+    defaultValue ?? ""
+  );
+  const currentValue = (isControlled ? value : internalValue) ?? "";
+  const hasValue = currentValue.length > 0;
+  const currentLength = currentValue.length;
+  const effectiveMaxLength = type === "character-limit" ? maxLength ?? 144 : void 0;
+  const showCharacterLimit = type === "character-limit" && typeof effectiveMaxLength === "number";
+  const textareaRef = React24.useRef(null);
+  const containerRef = React24.useRef(null);
+  const [height, setHeight] = React24.useState(void 0);
+  const [width, setWidth] = React24.useState(void 0);
+  const minHeight = 80;
+  const minWidth = 240;
+  const handleContainerClick = () => {
+    if (disabled) return;
+    textareaRef.current?.focus();
+  };
+  const handleChange = (event) => {
+    if (!isControlled) {
+      setInternalValue(event.target.value);
+    }
+    onChange?.(event);
+  };
+  const inputId = React24.useId();
+  const labelId = `${inputId}-label`;
+  const hintId = `${inputId}-hint`;
+  const statusBorderClass = {
+    default: "",
+    success: "border-(--border-success)",
+    error: "border-(--border-error)"
+  };
+  const statusFocusClass = {
+    default: "focus-within:border-(--border-brand) focus-within:hover:border-(--border-brand) focus-within:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-primary)]",
+    success: "focus-within:border-(--border-success) focus-within:hover:border-(--border-success) focus-within:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-success)]",
+    error: "focus-within:border-(--border-error) focus-within:hover:border-(--border-error) focus-within:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-error)]"
+  };
+  const hintColorClass = disabled ? "text-(--text-primary-disabled)" : status === "success" ? "text-(--text-success)" : status === "error" ? "text-(--text-error)" : "text-(--text-secondary)";
+  const counterColorClass = disabled ? "text-(--text-primary-disabled)" : status === "success" ? "text-(--text-success)" : status === "error" ? "text-(--text-error)" : "text-(--text-primary)";
+  const handleResizePointerDown = (event) => {
+    if (disabled) return;
+    if (event.button !== 0) return;
+    const container = containerRef.current;
+    if (!container) return;
+    event.preventDefault();
+    const startX = event.clientX;
+    const startY = event.clientY;
+    const { height: startHeight, width: startWidth } = container.getBoundingClientRect();
+    const handlePointerMove = (e) => {
+      const deltaX = e.clientX - startX;
+      const deltaY = e.clientY - startY;
+      const nextHeight = Math.max(minHeight, startHeight + deltaY);
+      const nextWidth = Math.max(minWidth, startWidth + deltaX);
+      setHeight(nextHeight);
+      setWidth(nextWidth);
+    };
+    const handlePointerUp = () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+    };
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+  };
+  return /* @__PURE__ */ jsxs18("div", { className: wrapperBase3, children: [
+    label && /* @__PURE__ */ jsx26(
+      "label",
+      {
+        htmlFor: inputId,
+        id: labelId,
+        className: cn(
+          "paragraph-s",
+          disabled ? "text-(--text-primary-disabled)" : "text-(--text-primary)"
+        ),
+        style: { marginBottom: 0 },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx26("div", { className: "relative w-full", children: /* @__PURE__ */ jsxs18(
+      "div",
+      {
+        className: cn(
+          "relative flex w-full rounded 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],
+          !disabled && statusFocusClass[status],
+          className
+        ),
+        ref: containerRef,
+        style: {
+          ...type === "responsive" && height !== void 0 ? { height } : {},
+          ...type === "responsive" && width !== void 0 ? { width } : {}
+        },
+        onClick: handleContainerClick,
+        "aria-disabled": disabled || void 0,
+        children: [
+          /* @__PURE__ */ jsx26(
+            "textarea",
+            {
+              id: inputId,
+              ref: textareaRef,
+              "aria-labelledby": label ? labelId : void 0,
+              "aria-describedby": hint ? hintId : void 0,
+              disabled: disabled ?? void 0,
+              value: isControlled ? value : currentValue,
+              defaultValue: isControlled ? void 0 : defaultValue,
+              onChange: handleChange,
+              rows,
+              maxLength: effectiveMaxLength,
+              className: cn(
+                "paragraph-m bg-transparent outline-none w-full h-full resize-none px-2 py-2 pr-8",
+                disabled ? "text-(--text-primary-disabled)" : hasValue ? "text-(--text-primary)" : "text-(--text-secondary)",
+                showCharacterLimit && "pr-16"
+              ),
+              style: { marginBottom: 0 },
+              ...textareaProps
+            }
+          ),
+          showCharacterLimit && /* @__PURE__ */ jsxs18(
+            "span",
+            {
+              className: cn(
+                "absolute bottom-1 right-1 footnote mb-0!",
+                counterColorClass
+              ),
+              children: [
+                currentLength,
+                "/",
+                effectiveMaxLength
+              ]
+            }
+          ),
+          type === "responsive" && /* @__PURE__ */ jsx26(
+            "div",
+            {
+              className: "absolute bottom-1 right-1 h-3 w-3 " + (disabled ? "cursor-auto" : "cursor-nwse-resize"),
+              onPointerDown: disabled ? void 0 : handleResizePointerDown,
+              children: /* @__PURE__ */ jsx26(
+                "span",
+                {
+                  className: cn(
+                    "absolute bottom-0 right-0 flex h-4 w-4 items-center justify-center text-(--icon-primary)",
+                    disabled && "text-(--icon-primary-disabled)"
+                  ),
+                  children: /* @__PURE__ */ jsx26(MaximizeIcon, {})
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx26(
+      "p",
+      {
+        id: hint ? hintId : void 0,
+        className: cn("caption", hint ? hintColorClass : "invisible"),
+        style: { marginBottom: 0 },
+        children: hint || "\xA0"
+      }
+    )
+  ] });
+};
+TextArea.displayName = "TextArea";
+
+// src/components/Inputs/TextInput.tsx
+import * as React25 from "react";
+import { cva as cva16 } from "class-variance-authority";
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+var inputTextVariants = cva16("truncate", {
+  variants: {
+    size: {
+      large: "subtitle",
+      "extra-large": "h6-title"
+    }
+  },
+  defaultVariants: {
+    size: "large"
+  }
+});
+var iconWrapperVariants3 = cva16(
+  "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"
+      },
+      disabled: {
+        true: "text-(--icon-primary-disabled)"
+      }
+    },
+    defaultVariants: {
+      size: "large"
+    }
+  }
+);
+var TextInput = (props) => {
+  const {
+    label,
+    hint,
+    placeholder = "Placeholder text",
+    size = "large",
+    status = "default",
+    disabled = false,
+    className,
+    leadingIcon,
+    trailingIcon,
+    value,
+    defaultValue,
+    onChange,
+    ...inputProps
+  } = props;
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = React25.useState(
+    defaultValue ?? ""
+  );
+  const currentValue = (isControlled ? value : internalValue) ?? "";
+  const inputRef = React25.useRef(null);
+  const handleContainerClick = () => {
+    if (disabled) return;
+    inputRef.current?.focus();
+  };
+  const handleChange = (event) => {
+    if (!isControlled) {
+      setInternalValue(event.target.value);
+    }
+    onChange?.(event);
+  };
+  const showLeadingIcon = !!leadingIcon;
+  const showTrailingIcon = !!trailingIcon;
+  return /* @__PURE__ */ jsx27(
+    Field,
+    {
+      label,
+      hint,
+      status,
+      disabled,
+      children: /* @__PURE__ */ jsxs19(
+        InputShell,
+        {
+          size,
+          status,
+          disabled,
+          className,
+          onClick: handleContainerClick,
+          children: [
+            showLeadingIcon && /* @__PURE__ */ jsx27(
+              "span",
+              {
+                className: cn(
+                  iconWrapperVariants3({ size, disabled })
+                ),
+                children: leadingIcon
+              }
+            ),
+            /* @__PURE__ */ jsx27(
+              Input,
+              {
+                ref: inputRef,
+                type: "text",
+                disabled: disabled ?? void 0,
+                placeholder,
+                value: isControlled ? value : currentValue,
+                defaultValue: isControlled ? void 0 : defaultValue,
+                onChange: handleChange,
+                variant: "bare",
+                className: cn(
+                  inputTextVariants({ size }),
+                  "bg-transparent outline-none w-full"
+                ),
+                style: { marginBottom: 0 },
+                ...inputProps
+              }
+            ),
+            showTrailingIcon && /* @__PURE__ */ jsx27(
+              "span",
+              {
+                className: cn(
+                  iconWrapperVariants3({ size, disabled: !!disabled })
+                ),
+                children: trailingIcon
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+TextInput.displayName = "TextInput";
+
+// src/components/Inputs/Toggle.tsx
+import "react";
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+var Toggle = (props) => {
+  const { label, className, disabled, ...inputProps } = props;
+  return /* @__PURE__ */ jsxs20(
+    "label",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 select-none",
+        disabled ? "cursor-default" : "cursor-pointer"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs20("span", { className: "relative inline-flex items-center", children: [
+          /* @__PURE__ */ jsx28(
+            "input",
+            {
+              type: "checkbox",
+              disabled,
+              className: "peer sr-only",
+              ...inputProps
+            }
+          ),
+          /* @__PURE__ */ jsx28(
+            "span",
+            {
+              className: cn(
+                // Base track
+                "flex items-center w-9 h-5 rounded-3xl border bg-(--background-primary) p-(--space-2) transition-all",
+                // Knob position
+                "justify-start peer-checked:justify-end",
+                // 1: enabled, unchecked, unhovered, unfocused
+                "border-(--border-secondary)",
+                // 3: enabled, unchecked, hovered, unfocused
+                "hover:border-(--border-secondary-hover)",
+                // 2: enabled, checked, unhovered, unfocused
+                "peer-checked:border-(--border-brand)",
+                // 4: enabled, checked, hovered, unfocused
+                "peer-checked:hover:border-(--border-brand-hover)",
+                "peer-checked:hover:shadow-[0_0_0_var(--focus-ring-spread)_var(--color-b-100)]",
+                // 5: enabled, unchecked, unhovered, focused
+                "peer-focus-visible:border-(--border-brand-focus)",
+                // 6: enabled, checked, unhovered, focused
+                "peer-checked:peer-focus-visible:bg-(--background-brand-focus)",
+                "peer-checked:peer-focus-visible:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-primary)]",
+                // 7: disabled, unchecked (override)
+                "peer-disabled:bg-(--background-primary-disabled)",
+                "peer-disabled:border-none",
+                "peer-disabled:shadow-none",
+                // 8: disabled, checked (override)
+                "peer-disabled:peer-checked:border-(--border-primary-disabled)",
+                // Disable hover when disabled
+                "peer-disabled:pointer-events-none",
+                // Knob on (enabled)
+                "peer-checked:[&>.knob]:bg-(--background-brand)",
+                // Hover / focus when on
+                "peer-checked:[&>.knob]:hover:bg-(--background-brand-hover)",
+                "peer-checked:peer-focus-visible:[&>.knob]:bg-(--background-neutral)",
+                // Disabled knob (both off and on use disabled brand token)
+                "peer-disabled:[&>.knob]:bg-(--background-primary-hover)",
+                "peer-disabled:[&>.knob]:peer-checked:bg-(--background-primary-hover)",
+                className
+              ),
+              children: /* @__PURE__ */ jsx28(
+                "span",
+                {
+                  className: cn(
+                    "h-4 w-4 rounded-full transition-colors knob",
+                    "bg-b-100"
+                  )
+                }
+              )
+            }
+          )
+        ] }),
+        label && /* @__PURE__ */ jsx28(
+          "span",
+          {
+            className: cn(
+              "paragraph-s text-(--text-primary)",
+              disabled && "text-(--text-primary-disabled)"
+            ),
+            style: { marginBottom: 0 },
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+Toggle.displayName = "Toggle";
+
+// src/components/Inputs/WebsiteInput.tsx
+import "react";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+var WebsiteInput = (props) => {
+  const {
+    hierarchy = "prefix",
+    protocolLabel = "http://",
+    icon,
+    size = "large",
+    disabled,
+    className,
+    ...rest
+  } = props;
+  const isPrefix = hierarchy === "prefix";
+  const baseClass = cn(
+    "[&>span]:w-[unset] hover:bg-[unset]",
+    !disabled && "[&:not(:focus-within):hover]:shadow-[0_0_0_var(--focus-ring-spread)_var(--background-secondary-hover)]",
+    disabled && "bg-[unset] hover:shadow-none hover:border-(--border-secondary-disabled) border-(--border-secondary-disabled)",
+    size === "extra-large" ? "[&>span]:h-14!" : "[&>span]:h-11!"
+  );
+  const addonTextClass = cn(
+    "flex mb-0!",
+    size === "extra-large" ? "paragraph-m" : "paragraph-s",
+    disabled ? "text-(--text-primary-disabled)" : "text-(--text-primary) group-hover:text-(--text-primary-hover) group-focus-within:text-(--text-primary-focus)"
+  );
+  const baseAddonClass = cn(
+    "flex items-center gap-2 px-2 h-full",
+    // layout + padding
+    "border-(--border-secondary)",
+    // divider color
+    disabled && "border-(--border-secondary-disabled) hover:border-(--border-secondary-disabled)",
+    isPrefix ? "border-r" : "border-l"
+  );
+  const iconWrapperClass = cn(
+    "flex items-center justify-center shrink-0",
+    size === "extra-large" ? "[&>svg]:w-6 [&>svg]:h-6" : "[&>svg]:w-5 [&>svg]:h-5",
+    disabled ? "text-(--icon-primary-disabled)" : "text-(--icon-primary) group-hover:text-(--icon-primary-hover) group-focus-within:text-(--icon-primary-focus)"
+  );
+  const prefixAddon = /* @__PURE__ */ jsxs21("div", { className: baseAddonClass, children: [
+    /* @__PURE__ */ jsx29("div", { className: addonTextClass, children: protocolLabel }),
+    icon != null && /* @__PURE__ */ jsx29("span", { className: iconWrapperClass, children: icon })
+  ] });
+  const suffixAddon = /* @__PURE__ */ jsxs21("div", { className: baseAddonClass, children: [
+    icon != null && /* @__PURE__ */ jsx29("span", { className: iconWrapperClass, children: icon }),
+    /* @__PURE__ */ jsx29("div", { className: addonTextClass, children: protocolLabel })
+  ] });
+  return /* @__PURE__ */ jsx29(
+    TextInput,
+    {
+      ...rest,
+      size,
+      disabled,
+      className: cn(baseClass, className),
+      leadingIcon: isPrefix ? prefixAddon : void 0,
+      trailingIcon: !isPrefix ? suffixAddon : void 0
+    }
+  );
+};
+WebsiteInput.displayName = "WebsiteInput";
+
+// src/components/Logo/LogoIconExtraLarge.tsx
+import { LogoIconLIcon } from "@bubo-squared/icons";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var LogoIconExtraLarge = () => {
+  return /* @__PURE__ */ jsx30("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__ */ jsx30(LogoIconLIcon, { className: "w-96 h-96" }) });
+};
+var LogoIconExtraLarge_default = LogoIconExtraLarge;
+
+// src/components/Logo/LogoIconExtraSmall.tsx
+import { LogoIconMIcon } from "@bubo-squared/icons";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var LogoIconExtraSmall = () => {
+  return /* @__PURE__ */ jsx31("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__ */ jsx31(LogoIconMIcon, { className: "w-6 h-6" }) });
+};
+var LogoIconExtraSmall_default = LogoIconExtraSmall;
+
+// src/components/Logo/LogoIconLarge.tsx
+import { LogoIconMIcon as LogoIconMIcon2 } from "@bubo-squared/icons";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var LogoIconLarge = () => {
+  return /* @__PURE__ */ jsx32("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__ */ jsx32(LogoIconMIcon2, { className: "w-44 h-44" }) });
+};
+var LogoIconLarge_default = LogoIconLarge;
+
+// src/components/Logo/LogoIconMedium.tsx
+import { LogoIconMIcon as LogoIconMIcon3 } from "@bubo-squared/icons";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var LogoIconMedium = () => {
+  return /* @__PURE__ */ jsx33("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__ */ jsx33(LogoIconMIcon3, { className: "w-24 h-24" }) });
+};
+var LogoIconMedium_default = LogoIconMedium;
+
+// src/components/Logo/LogoIconSmall.tsx
+import { LogoIconMIcon as LogoIconMIcon4 } from "@bubo-squared/icons";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var LogoIconSmall = () => {
+  return /* @__PURE__ */ jsx34("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__ */ jsx34(LogoIconMIcon4, { className: "w-10 h-10" }) });
+};
+var LogoIconSmall_default = LogoIconSmall;
+
+// src/components/Logo/LogoInline.tsx
+import { LogoIconMIcon as LogoIconMIcon5, LogoTextMIcon } from "@bubo-squared/icons";
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+var LogoInline = () => {
+  return /* @__PURE__ */ jsxs22("div", { className: "w-44 h-12 inline-flex justify-start items-center gap-4", children: [
+    /* @__PURE__ */ jsx35(LogoIconMIcon5, { className: "w-12 h-12" }),
+    /* @__PURE__ */ jsx35(LogoTextMIcon, { className: "h-8 w-[110px] text-(--text-primary)" })
+  ] });
+};
+var LogoInline_default = LogoInline;
+
+// src/components/Logo/LogoInlineSmall.tsx
+import { LogoIconMIcon as LogoIconMIcon6, LogoTextMIcon as LogoTextMIcon2 } from "@bubo-squared/icons";
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+var LogoInline2 = () => {
+  return /* @__PURE__ */ jsxs23("div", { className: "w-32 h-9 inline-flex justify-start items-center gap-3", children: [
+    /* @__PURE__ */ jsx36(LogoIconMIcon6, { className: "w-9 h-9" }),
+    /* @__PURE__ */ jsx36(LogoTextMIcon2, { className: "h-6 w-[83px] text-(--text-primary)" })
+  ] });
+};
+var LogoInlineSmall_default = LogoInline2;
+
+// src/components/Logo/LogoMultiline.tsx
+import { LogoIconMIcon as LogoIconMIcon7, LogoTextMIcon as LogoTextMIcon3 } from "@bubo-squared/icons";
+import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
+var LogoMultiline = () => {
+  return /* @__PURE__ */ jsxs24("div", { className: "w-36 inline-flex flex-col justify-start items-start gap-2", children: [
+    /* @__PURE__ */ jsx37(LogoIconMIcon7, { className: "w-12 h-12" }),
+    /* @__PURE__ */ jsx37(LogoTextMIcon3, { className: "h-8 w-[111px] text-(--text-primary)" })
+  ] });
+};
+var LogoMultiline_default = LogoMultiline;
+export {
+  Avatar,
+  Badge,
+  BadgeDigit,
+  BadgeDot,
+  BadgeStatus,
+  Button,
+  ButtonGroup,
+  Checkbox,
+  Divider,
+  Dropdown,
+  IconButton,
+  IconButtonGroup,
+  LinkButton,
+  LogoIconExtraLarge_default as LogoIconExtraLarge,
+  LogoIconExtraSmall_default as LogoIconExtraSmall,
+  LogoIconLarge_default as LogoIconLarge,
+  LogoIconMedium_default as LogoIconMedium,
+  LogoIconSmall_default as LogoIconSmall,
+  LogoInline_default as LogoInline,
+  LogoInlineSmall_default as LogoInlineSmall,
+  LogoMultiline_default as LogoMultiline,
+  MessageButton,
+  PasswordInput,
+  Progress,
+  RadioGroup,
+  SearchInput,
+  Slider,
+  StatusAvatar,
+  Tag,
+  TextArea,
+  TextInput,
+  Toggle,
+  WebsiteInput,
+  cn
+};
+//# sourceMappingURL=index.js.map