@bubo-squared/ui-framework 0.1.93 → 0.1.95

package/dist/index.cjs

@@ -169,22 +169,34 @@ Button.displayName = "Button";
 var import_class_variance_authority2 = require("class-variance-authority");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var buttonGroupVariants = (0, import_class_variance_authority2.cva)(
-  "flex items-center justify-center gap-4 pt-4 w-[320px] min-w-[320px]",
+  "flex items-center justify-center gap-4 pt-4 w-fit",
   {
     variants: {
-      variant: {
+      orientation: {
         vertical: ["flex-col"],
         horizontal: ["flex-row"]
       }
     },
     defaultVariants: {
-      variant: "horizontal"
+      orientation: "horizontal"
     }
   }
 );
 var ButtonGroup = (props) => {
-  const { orientation = "horizontal" } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: buttonGroupVariants({ variant: orientation }), ...props, children: props.children });
+  const {
+    orientation = "horizontal",
+    className,
+    children,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: cn(buttonGroupVariants({ orientation }), className),
+      ...rest,
+      children
+    }
+  );
 };
 
 // src/components/Buttons/IconButton.tsx
@@ -292,7 +304,7 @@ var IconButtonGroup = (props) => {
           "aria-label": item.ariaLabel,
           disabled: item.disabled,
           className: cn(
-            "rounded-none border-1 border-(--border-secondary) text-(--text-primary) ",
+            "rounded-none border-1 border-(--border-secondary) text-primary ",
             index === 0 && "rounded-l-6",
             index === items.length - 1 && "rounded-r-6",
             index > 0 && "-ml-px"
@@ -438,7 +450,7 @@ var import_class_variance_authority6 = require("class-variance-authority");
 var import_icons = require("@bubo-squared/icons");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var avatarVariants = (0, import_class_variance_authority6.cva)(
-  "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",
+  "relative inline-flex items-center justify-center rounded-full border-(--border-secondary) border-1 bg-(--background-primary) text-primary overflow-hidden hover:border-(--focus-secondary) focus-visible:border-(--focus-primary) focus-visible:outline-none",
   {
     variants: {
       size: {
@@ -457,7 +469,7 @@ var avatarVariants = (0, import_class_variance_authority6.cva)(
   }
 );
 var avatarInitialsVariants = (0, import_class_variance_authority6.cva)(
-  "flex items-center justify-center text-(--text-primary) leading-none ",
+  "flex items-center justify-center text-primary leading-none ",
   {
     variants: {
       size: {
@@ -523,7 +535,7 @@ var Avatar = React6.forwardRef(
               className: "w-full h-full object-cover"
             }
           ) : null,
-          !hasImage && variant === "initial" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn(avatarInitialsVariants({ size }), "relative bottom-px"), style: { marginBottom: 0 }, children: initials }),
+          !hasImage && variant === "initial" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn(avatarInitialsVariants({ size }), "relative bottom-px"), children: initials }),
           !hasImage && variant === "icon" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn(avatarIconVariants({ size })), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons.UserIcon, {}) })
         ]
       }
@@ -548,16 +560,16 @@ var badgeVariants = (0, import_class_variance_authority7.cva)(
         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)"
+        primary: "bg-(--background-secondary) text-primary",
+        secondary: "bg-(--background-primary) border-1 border-(--border-primary) text-primary",
+        active: "bg-ac-lilac text-badge-black",
+        informal: "bg-ac-neon-blue text-badge-black",
+        success: "bg-ac-neon-green text-badge-black",
+        warning: "bg-ac-light-orange text-badge-black",
+        error: "bg-s-error-300 text-badge-black",
+        disabled: "bg-(--background-primary-disabled) border-1 border-(--border-primary-disabled) text-primary-disabled",
+        "double-default": "bg-(--background-secondary) text-primary",
+        "double-current": "bg-color-ac-lilac text-badge-black"
       }
     },
     defaultVariants: {
@@ -584,7 +596,6 @@ var Badge = React7.forwardRef(
         ref,
         className: cn(badgeVariants({ size, variant }), className),
         ...rest,
-        style: { marginBottom: 0 },
         children: value ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-normal", children: label }),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-normal", children: ":" }),
@@ -610,12 +621,12 @@ var badgeDigitVariants = (0, import_class_variance_authority8.cva)(
       },
       variant: {
         primary: "bg-(--background-brand)",
-        secondary: "bg-(--background-primary) border-1 border-(--border-secondary) text-(--text-secondary)",
+        secondary: "bg-(--background-primary) border-1 border-(--border-secondary) text-(--color-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)"
+        disabled: "bg-(--background-primary) border-1 border-(--border-primary-disabled) text-primary-disabled"
       }
     },
     defaultVariants: {
@@ -638,7 +649,6 @@ var BadgeDigit = React8.forwardRef(
       {
         ref,
         className: cn(badgeDigitVariants({ size, variant }), className),
-        style: { marginBottom: 0 },
         ...rest,
         children: String(value)
       }
@@ -654,7 +664,7 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 var badgeDotVariants = (0, import_class_variance_authority9.cva)("rounded-12 size-3", {
   variants: {
     status: {
-      disabled: "bg-(--text-primary)",
+      disabled: "bg-(--color-primary)",
       informal: "bg-(--background-informal)",
       "success/online": "bg-(--background-success)",
       warning: "bg-(--background-warning)",
@@ -682,7 +692,7 @@ var BadgeStatus = React10.forwardRef(
       dotClassName,
       ...rest
     } = props;
-    const textClasses = active ? "caption-medium text-(--text-primary)" : "caption-medium text-(--text-primary-disabled)";
+    const textClasses = active ? "caption-medium text-primary" : "caption-medium text-primary-disabled";
     const dotClasses = active ? "bg-(--background-informal)" : "bg-(--background-primary)";
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
@@ -701,7 +711,7 @@ var BadgeStatus = React10.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: textClasses, style: { marginBottom: 0 }, children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: textClasses, children: label })
         ]
       }
     );
@@ -713,60 +723,128 @@ BadgeStatus.displayName = "BadgeStatus";
 var React11 = require("react");
 var import_icons2 = require("@bubo-squared/icons");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var lineClass = "h-px flex-1 bg-(--border-secondary)";
+var lineClassBase = "flex-1 bg-(--border-secondary) h-px";
+var gapBySize = {
+  sm: "gap-2",
+  md: "gap-3",
+  lg: "gap-4",
+  xl: "gap-4"
+};
+var textClassBySize = {
+  sm: "footnote",
+  md: "caption",
+  lg: "paragraph-s",
+  xl: "paragraph-m"
+};
 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__ */ (0, import_jsx_runtime13.jsxs)(
-    "div",
-    {
-      className: cn(
-        "flex w-full items-center",
-        showCenter ? "gap-2" : "gap-0",
-        className
-      ),
-      ...rest,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
-        type === "text-lines" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          "span",
-          {
-            className: "footnote text-(--text-secondary)",
-            style: { marginBottom: 0 },
-            children: textLabel
-          }
-        ),
-        type === "icon-lines" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          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__ */ (0, import_jsx_runtime13.jsx)(import_icons2.TargetIcon, {}),
-            onClick: props.type === "icon-lines" ? props.onIconClick : void 0
-          }
-        ),
-        type === "icon-group-lines" && (props.type === "icon-group-lines" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          IconButtonGroup,
-          {
-            items: props.iconGroupItems,
-            size: props.iconGroupSize
-          }
-        ) : null),
-        type === "button-lines" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          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__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
-      ]
-    }
+  const resolvedType = props.type ?? "default";
+  const resolvedSize = props.size ?? "sm";
+  const showCenter = resolvedType !== "default";
+  const lineClass = lineClassBase;
+  const wrapperClass = cn(
+    "flex w-full items-center",
+    showCenter ? gapBySize[resolvedSize] : "gap-0",
+    props.className
   );
+  if (props.type === void 0 || props.type === "default") {
+    const {
+      type: _type,
+      size: _size,
+      label: _label,
+      className: _className,
+      ...divProps
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: wrapperClass, ...divProps, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }) });
+  }
+  if (props.type === "text") {
+    const {
+      type: _type,
+      size: _size,
+      label,
+      className: _className,
+      ...divProps
+    } = props;
+    const textLabel = label ? label : "OR";
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: wrapperClass, ...divProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "span",
+        {
+          className: cn(
+            textClassBySize[resolvedSize],
+            "text-(--color-secondary)"
+          ),
+          children: textLabel
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
+    ] });
+  }
+  if (props.type === "iconButton") {
+    const {
+      type: _type,
+      size: _size,
+      icon,
+      iconButtonVariant,
+      onIconClick,
+      ariaLabel,
+      className: _className,
+      ...divProps
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: wrapperClass, ...divProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        IconButton,
+        {
+          variant: iconButtonVariant ?? "secondary",
+          size: resolvedSize,
+          "aria-label": ariaLabel ?? "More options",
+          icon: icon ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons2.TargetIcon, {}),
+          onClick: onIconClick
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
+    ] });
+  }
+  if (props.type === "iconButtonGroup") {
+    const {
+      type: _type,
+      size: _size,
+      iconGroupItems,
+      className: _className,
+      ...divProps
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: wrapperClass, ...divProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconButtonGroup, { items: iconGroupItems, size: resolvedSize }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
+    ] });
+  }
+  if (props.type === "button") {
+    const {
+      type: _type,
+      size: _size,
+      buttonLabel,
+      onButtonClick,
+      buttonVariant,
+      className: _className,
+      ...divProps
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: wrapperClass, ...divProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        Button,
+        {
+          variant: buttonVariant ?? "secondary",
+          size: resolvedSize,
+          onClick: onButtonClick,
+          children: buttonLabel
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
+    ] });
+  }
+  return null;
 };
 Divider.displayName = "Divider";
 
@@ -806,8 +884,8 @@ var Progress = React12.forwardRef(
         ...rest,
         children: [
           showLabel && label && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "paragraph-s-bold text-(--text-primary)", style: { marginBottom: 0 }, children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "footnote text-(--text-secondary)", style: { marginBottom: 0 }, children: percentageLabel })
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "paragraph-s-bold text-primary", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "footnote text-(--color-secondary)", children: percentageLabel })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("w-full bg-(--chart-mono) overflow-hidden", barHeightClasses), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "div",
@@ -819,7 +897,7 @@ var Progress = React12.forwardRef(
               style: { width: `${clamped}%` }
             }
           ) }),
-          showHint && hint && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "caption text-(--text-secondary)", style: { marginBottom: 0 }, children: hint })
+          showHint && hint && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "caption text-(--color-secondary)", children: hint })
         ]
       }
     );
@@ -833,7 +911,7 @@ var import_class_variance_authority10 = require("class-variance-authority");
 var import_icons3 = require("@bubo-squared/icons");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var iconStatusVariants = (0, import_class_variance_authority10.cva)(
-  "inline-flex size-5 items-center justify-center rounded-full border-1 border-(--text-primary-inverse) p-1",
+  "inline-flex size-5 items-center justify-center rounded-full border-1 border-(--color-primary-inverse) p-1",
   {
     variants: {
       variant: {
@@ -851,10 +929,10 @@ var iconStatusVariants = (0, import_class_variance_authority10.cva)(
 );
 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)"
+  offline: "bg-(--background-primary) border-1 border-(--color-primary-inverse)",
+  online: "bg-(--background-success) border-1 border-(--color-primary-inverse)",
+  away: "bg-(--background-warning) border-1 border-(--color-primary-inverse)",
+  busy: "bg-(--background-error) border-1 border-(--color-primary-inverse)"
 };
 var StatusAvatar = React13.forwardRef((props, ref) => {
   const { variant = "verified", className, ...rest } = props;
@@ -881,11 +959,11 @@ var StatusAvatar = React13.forwardRef((props, ref) => {
       className: cn(iconStatusVariants({ variant: iconVariant }), className),
       ...rest,
       children: [
-        iconVariant === "verified" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.CheckIcon, { className: "size-3 text-(--text-button-white)" }),
-        iconVariant === "bookmark" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.BookmarkCheckIcon, { className: "size-3 text-(--text-button-white)" }),
-        iconVariant === "favorite" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.StarIcon, { className: "size-3 text-(--text-button-white)" }),
-        iconVariant === "add" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.PlusIcon, { className: "size-3 text-(--text-button-white)" }),
-        iconVariant === "remove" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.CrossIcon, { className: "size-3 text-(--text-button-white)" })
+        iconVariant === "verified" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.CheckIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "bookmark" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.BookmarkCheckIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "favorite" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.StarIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "add" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.PlusIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "remove" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.CrossIcon, { className: "size-3 text-button-white" })
       ]
     }
   );
@@ -911,8 +989,8 @@ var tagVariants = (0, import_class_variance_authority11.cva)(
     }
   }
 );
-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 disabledTag = "pointer-events-none border-(--border-secondary-disabled) bg-(--background-neutral-disabled) text-primary-disabled";
+var iconClasses = "flex items-center justify-center w-5 h-5 [&>*]:w-5 [&>*]:h-5 shrink-0 text-primary";
 var Tag = React14.forwardRef(
   (props, ref) => {
     const {
@@ -936,10 +1014,10 @@ var Tag = React14.forwardRef(
         children: [
           leading && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: iconClasses, children: leading }),
           value ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-row gap-1 items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-(--text-primary) paragraph-l mb-0! cursor-default font-normal", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-(--text-primary) paragraph-l mb-0! cursor-default font-normal", children: ":" }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-(--text-primary) paragraph-l-medium mb-0! cursor-default font-medium", children: value })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-(--text-primary) paragraph-l mb-0! cursor-default", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-primary paragraph-l mb-0! cursor-default font-normal", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-primary paragraph-l mb-0! cursor-default font-normal", children: ":" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-primary paragraph-l-medium mb-0! cursor-default font-medium", children: value })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-primary paragraph-l mb-0! cursor-default", children: label }),
           trailing && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: iconClasses, children: trailing })
         ]
       }
@@ -959,9 +1037,9 @@ function Checkbox({ label, className, ...props }) {
       CheckboxPrimitive.Root,
       {
         className: cn(
-          "group flex h-5 w-5 items-center justify-center rounded-2 border border-(--border-secondary) bg-(--background-neutral) text-(--text-primary)",
-          "data-[state=checked]:bg-(--background-brand) data-[state=checked]:text-(--text-button-white) data-[state=checked]:border-none",
-          "data-[state=indeterminate]:bg-(--background-brand) data-[state=indeterminate]:text-(--text-button-white) data-[state=indeterminate]:border-none",
+          "group flex h-5 w-5 items-center justify-center rounded-2 border border-(--border-secondary) bg-(--background-neutral) text-primary-inverse",
+          "data-[state=checked]:bg-(--background-brand) data-[state=checked]:text-button-white data-[state=checked]:border-none",
+          "data-[state=indeterminate]:bg-(--background-brand) data-[state=indeterminate]: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)",
@@ -977,7 +1055,7 @@ function Checkbox({ label, className, ...props }) {
         ] })
       }
     ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "paragraph-m-medium text-(--text-primary)", style: { marginBottom: 0 }, children: label })
+    label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "paragraph-m-medium text-primary", children: label })
   ] });
 }
 
@@ -986,9 +1064,9 @@ var React16 = __toESM(require("react"), 1);
 var import_class_variance_authority12 = require("class-variance-authority");
 var import_icons6 = require("@bubo-squared/icons");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var dropdownWrapperBase = "flex flex-col gap-2 items-start min-w-[343px]";
+var dropdownWrapperBase = "flex flex-col gap-2 items-start";
 var dropdownTriggerVariants = (0, import_class_variance_authority12.cva)(
-  "group flex w-full items-center justify-between rounded-4 border bg-(--background-primary) px-3 py-2 text-left transition-colors cursor-pointer focus-ring-primary focus:border-(--border-brand) hover:bg-(--background-primary-hover) disabled:bg-(--background-primary) disabled:border-(--border-secondary-disabled) disabled:text-(--text-primary-disabled) disabled:cursor-default",
+  "group flex w-full items-center justify-between rounded-4 border bg-(--background-primary) px-3 py-2 text-left transition-colors cursor-pointer focus-ring-primary focus:border-(--border-brand) hover:bg-(--background-primary-hover) disabled:bg-(--background-primary) disabled:border-(--border-secondary-disabled) disabled:text-primary-disabled disabled:cursor-default",
   {
     variants: {
       size: {
@@ -1014,11 +1092,11 @@ var dropdownTextVariants = (0, import_class_variance_authority12.cva)("truncate"
       "extra-large": "h6-title"
     },
     hasValue: {
-      false: "text-(--text-secondary)",
-      true: "text-(--text-primary)"
+      false: "text-(--color-secondary)",
+      true: "text-primary"
     },
     disabled: {
-      true: "text-(--text-primary-disabled)"
+      true: "text-primary-disabled"
     }
   },
   defaultVariants: {
@@ -1047,7 +1125,7 @@ var Dropdown = (props) => {
     label = "Field Label",
     showLabel = true,
     hint = "This is a hint text to help user.",
-    showHint = true,
+    hideHint = false,
     placeholder = "Placeholder text",
     size = "large",
     status = "default",
@@ -1109,9 +1187,8 @@ var Dropdown = (props) => {
         id: labelId,
         className: cn(
           "paragraph-s",
-          disabled ? "text-(--text-primary-disabled)" : "text-(--text-primary)"
+          disabled ? "text-primary-disabled" : "text-primary"
         ),
-        style: { marginBottom: 0 },
         children: label
       }
     ),
@@ -1124,7 +1201,7 @@ var Dropdown = (props) => {
           "aria-haspopup": "listbox",
           "aria-expanded": isOpen,
           "aria-labelledby": showLabel ? labelId : void 0,
-          "aria-describedby": showHint ? hintId : void 0,
+          "aria-describedby": !hideHint ? hintId : void 0,
           disabled,
           className: cn(
             dropdownTriggerVariants({ size, status }),
@@ -1144,7 +1221,6 @@ var Dropdown = (props) => {
                     disabled: !!disabled
                   })
                 ),
-                style: { marginBottom: 0 },
                 children: hasValue ? selectedOption?.label : placeholder
               }
             ),
@@ -1173,8 +1249,7 @@ var Dropdown = (props) => {
               "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 },
+                className: "flex w-full items-center gap-2 pl-(--space-8) pr-(--space-16) py-(--space-8) text-left paragraph-l text-primary hover:bg-(--background-secondary)",
                 role: "option",
                 "aria-selected": selected,
                 onClick: () => handleSelect(opt.value),
@@ -1186,15 +1261,14 @@ var Dropdown = (props) => {
         );
       }) }) })
     ] }),
-    showHint && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    !hideHint && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "p",
       {
         id: hintId,
         className: cn(
           "caption",
-          disabled ? "text-(--text-primary-disabled)" : "text-(--text-secondary)"
+          disabled ? "text-primary-disabled" : "text-(--color-secondary)"
         ),
-        style: { marginBottom: 0 },
         children: hint
       }
     )
@@ -1205,11 +1279,12 @@ Dropdown.displayName = "Dropdown";
 // src/components/Inputs/Field.tsx
 var React17 = __toESM(require("react"), 1);
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var fieldBase = "flex flex-col gap-2 items-start min-w-[343px]";
+var fieldBase = "flex flex-col gap-2 items-start";
 var Field = (props) => {
   const {
     label,
     hint,
+    hideHint,
     status = "default",
     disabled,
     className,
@@ -1218,25 +1293,23 @@ var Field = (props) => {
   const fieldId = React17.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)";
+  const hintColorClass = disabled ? "text-primary-disabled" : status === "success" ? "text-(--color-success)" : status === "error" ? "text-(--color-error)" : "text-(--color-secondary)";
+  const labelColorClass = disabled ? "text-primary-disabled" : "text-primary";
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn(fieldBase, className), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "label",
       {
         id: labelId,
         className: cn("paragraph-s", labelColorClass),
-        style: { marginBottom: 0 },
         children: label
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "relative w-full", children }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    !hideHint && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "p",
       {
         id: hint ? hintId : void 0,
         className: cn("caption", hint ? hintColorClass : "invisible"),
-        style: { marginBottom: 0 },
         children: hint || "\xA0"
       }
     )
@@ -1253,7 +1326,7 @@ var React18 = __toESM(require("react"), 1);
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var Input = React18.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 base = "text-primary placeholder:text-(--color-secondary) disabled:text-primary-disabled disabled:placeholder: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__ */ (0, import_jsx_runtime20.jsx)(
@@ -1292,7 +1365,7 @@ var inputShellVariants = (0, import_class_variance_authority13.cva)(
         error: "input-error"
       },
       disabled: {
-        true: "bg-(--background-primary-disabled) border-(--border-secondary-disabled) text-(--text-primary-disabled) cursor-default"
+        true: "bg-(--background-primary-disabled) border-(--border-secondary-disabled) text-primary-disabled cursor-default"
       }
     },
     defaultVariants: {
@@ -1328,8 +1401,8 @@ var passwordTextVariants = (0, import_class_variance_authority14.cva)("truncate"
       "extra-large": "h6-title"
     },
     disabled: {
-      true: "text-(--text-primary-disabled)",
-      false: "text-(--text-primary)"
+      true: "text-primary-disabled",
+      false: "text-primary"
     }
   },
   defaultVariants: {
@@ -1363,7 +1436,7 @@ var actionButtonVariants = (0, import_class_variance_authority14.cva)(
         "extra-large": "paragraph-m"
       },
       disabled: {
-        true: "cursor-default text-(--text-primary-disabled) hover:text-(--text-primary-disabled)"
+        true: "cursor-default text-primary-disabled hover:text-primary-disabled"
       }
     },
     defaultVariants: {
@@ -1375,6 +1448,7 @@ var PasswordInput = (props) => {
   const {
     label,
     hint,
+    hideHint,
     placeholder = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
     size = "large",
     status = "default",
@@ -1414,6 +1488,7 @@ var PasswordInput = (props) => {
     {
       label,
       hint,
+      hideHint,
       status,
       disabled,
       children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
@@ -1448,7 +1523,6 @@ var PasswordInput = (props) => {
                 className: cn(
                   passwordTextVariants({ size, disabled: !!disabled })
                 ),
-                style: { marginBottom: 0 },
                 ...inputProps
               }
             ),
@@ -1465,7 +1539,6 @@ var PasswordInput = (props) => {
               "button",
               {
                 type: "button",
-                style: { marginBottom: 0 },
                 className: cn(
                   actionButtonVariants({ size, disabled: !!disabled })
                 ),
@@ -1577,13 +1650,13 @@ function CommandInput({
       "data-slot": "command-input-wrapper",
       className: "flex h-9 items-center gap-2 border-b px-3",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons7.SearchIcon, { className: "size-4 shrink-0 opacity-50 text-(--text-secondary)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons7.SearchIcon, { className: "size-4 shrink-0 opacity-50 text-(--color-secondary)" }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           import_cmdk.Command.Input,
           {
             "data-slot": "command-input",
             className: cn(
-              "placeholder:text-(--text-secondary) text-(--text-primary) flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+              "placeholder:text-(--color-secondary) text-primary flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
               className
             ),
             ...props
@@ -1770,7 +1843,7 @@ var inputTextVariants = (0, import_class_variance_authority16.cva)("", {
       "extra-large": "h6-title"
     },
     disabled: {
-      true: "text-(--text-primary-disabled) border-(--border-secondary-disabled)"
+      true: "text-primary-disabled border-(--border-secondary-disabled)"
     }
   },
   defaultVariants: {
@@ -1790,6 +1863,7 @@ var PhoneInput = React26.forwardRef(
       value,
       label,
       hint,
+      hideHint,
       placeholder,
       size = "large",
       disabled = false,
@@ -1801,6 +1875,7 @@ var PhoneInput = React26.forwardRef(
       {
         label,
         hint,
+        hideHint,
         status,
         disabled,
         className,
@@ -1812,7 +1887,6 @@ var PhoneInput = React26.forwardRef(
               sizeBase({ size }),
               inputTextVariants({ size, disabled })
             ),
-            style: { marginBottom: 0 },
             flagComponent: FlagComponent,
             countrySelectComponent: CountrySelect,
             inputComponent: InputComponent,
@@ -1868,7 +1942,7 @@ var CountrySelect = ({
           {
             type: "button",
             variant: "outline",
-            className: cn(inputBase, "flex gap-1 rounded-4 px-3 focus:z-10 mr-(--space-12) text-(--text-primary-disabled) hover:text-(--text-primary-hover) focus:text-(--text-primary-focus)"),
+            className: cn(inputBase, "flex gap-1 rounded-4 px-3 focus:z-10 mr-(--space-12) text-primary-disabled hover:text-(--color-primary-hover) focus:text-(--color-primary-focus)"),
             disabled,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -1890,44 +1964,51 @@ var CountrySelect = ({
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PopoverContent, { className: "w-[300px] p-0 relative left-4.5 bg-(--background-primary) shadow-card-md rounded-4 border-none outline-1 outline-solid outline-(--border-primary-hover) **:data-[slot='command-input-wrapper']:border-b-(--border-secondary)", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Command, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            CommandInput,
-            {
-              value: searchValue,
-              onValueChange: (value) => {
-                setSearchValue(value);
-                setTimeout(() => {
-                  if (scrollAreaRef.current) {
-                    const viewportElement = scrollAreaRef.current.querySelector(
-                      "[data-radix-scroll-area-viewport]"
-                    );
-                    if (viewportElement) {
-                      viewportElement.scrollTop = 0;
-                    }
-                  }
-                }, 0);
-              },
-              placeholder: "Search country..."
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CommandList, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(ScrollArea, { ref: scrollAreaRef, className: "h-72", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CommandEmpty, { children: "No country found." }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CommandGroup, { className: "[&>div>div]:pl-4 [&>div>div]:pr-2 [&>div>div]:py-2 [&>div>div]:border-b [&>div>div]:border-b-(--border-secondary) [&>div>div]:cursor-pointer [&>div>div]:hover:bg-(--background-primary-hover) [&>div>div]:text-(--text-primary) [&>div>div]:hover:text-(--text-primary) p-0 pr-4", children: countryList.map(
-              ({ value, label }) => value ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                CountrySelectOption,
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          PopoverContent,
+          {
+            align: "start",
+            className: "p-0 bg-(--background-primary) shadow-card-md rounded-4 border-none outline-1 outline-solid outline-(--border-primary-hover) **:data-[slot='command-input-wrapper']:border-b-(--border-secondary)",
+            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Command, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                CommandInput,
                 {
-                  country: value,
-                  countryName: label,
-                  selectedCountry,
-                  onChange,
-                  onSelectComplete: () => setIsOpen(false)
-                },
-                value
-              ) : null
-            ) })
-          ] }) })
-        ] }) })
+                  value: searchValue,
+                  onValueChange: (value) => {
+                    setSearchValue(value);
+                    setTimeout(() => {
+                      if (scrollAreaRef.current) {
+                        const viewportElement = scrollAreaRef.current.querySelector(
+                          "[data-radix-scroll-area-viewport]"
+                        );
+                        if (viewportElement) {
+                          viewportElement.scrollTop = 0;
+                        }
+                      }
+                    }, 0);
+                  },
+                  placeholder: "Search country..."
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CommandList, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(ScrollArea, { ref: scrollAreaRef, className: "h-72", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CommandEmpty, { children: "No country found." }),
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CommandGroup, { className: "[&>div>div]:pl-4 [&>div>div]:pr-2 [&>div>div]:py-2 [&>div>div]:border-b [&>div>div]:border-b-(--border-secondary) [&>div>div]:cursor-pointer [&>div>div]:hover:bg-(--background-primary-hover) [&>div>div]:text-primary [&>div>div]:hover:text-primary p-0 pr-4", children: countryList.map(
+                  ({ value, label }) => value ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    CountrySelectOption,
+                    {
+                      country: value,
+                      countryName: label,
+                      selectedCountry,
+                      onChange,
+                      onSelectComplete: () => setIsOpen(false)
+                    },
+                    value
+                  ) : null
+                ) })
+              ] }) })
+            ] })
+          }
+        )
       ]
     }
   );
@@ -1947,7 +2028,7 @@ var CountrySelectOption = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     CommandItem,
     {
-      className: "gap-2 data-[selected=true]:text-(--text-primary)",
+      className: "gap-2 data-[selected=true]:text-primary",
       onSelect: handleSelect,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FlagComponent, { country, countryName }),
@@ -1976,6 +2057,7 @@ var wrapperBase = "flex flex-col gap-2 items-start";
 var RadioGroup = ({
   label,
   hint,
+  hideHint,
   options,
   orientation = "vertical",
   disabled = false,
@@ -1996,10 +2078,9 @@ var RadioGroup = ({
       "span",
       {
         className: cn(
-          "paragraph-s text-(--text-primary)",
-          disabled && "text-(--text-primary-disabled)"
+          "paragraph-s text-primary",
+          disabled && "text-primary-disabled"
         ),
-        style: { marginBottom: 0 },
         children: label
       }
     ),
@@ -2077,10 +2158,9 @@ var RadioGroup = ({
                     "span",
                     {
                       className: cn(
-                        "paragraph-s text-(--text-primary)",
-                        "group-data-[disabled]:text-(--text-primary-disabled) whitespace-nowrap"
+                        "paragraph-s text-primary",
+                        "group-data-[disabled]:text-primary-disabled whitespace-nowrap"
                       ),
-                      style: { marginBottom: 0 },
                       children: option.label
                     }
                   )
@@ -2092,15 +2172,14 @@ var RadioGroup = ({
         ))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    !hideHint && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "p",
       {
         id: hintId,
         className: cn(
-          "caption text-(--text-secondary)",
-          disabled && "text-(--text-primary-disabled)"
+          "caption text-(--color-secondary)",
+          disabled && "text-primary-disabled"
         ),
-        style: { marginBottom: 0 },
         children: hint ?? "\xA0"
       }
     )
@@ -2154,7 +2233,7 @@ var SearchInput = (props) => {
     inputRef.current?.focus();
   };
   const showTrailingIcon = !!trailingIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex flex-col gap-2 items-start min-w-[343px]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "relative w-full", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex flex-col gap-2 items-start", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "relative w-full", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     InputShell,
     {
       size,
@@ -2175,7 +2254,6 @@ var SearchInput = (props) => {
             className: cn(
               searchTextVariants({ size })
             ),
-            style: { marginBottom: 0 },
             ...inputProps
           }
         ),
@@ -2189,7 +2267,7 @@ SearchInput.displayName = "SearchInput";
 // src/components/Inputs/Slider.tsx
 var React29 = __toESM(require("react"), 1);
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var wrapperBase2 = "flex flex-col gap-2 items-start min-w-[343px]";
+var wrapperBase2 = "flex flex-col gap-2 items-start";
 var Slider = (props) => {
   const {
     display = "flat",
@@ -2445,16 +2523,14 @@ var Slider = (props) => {
             "relative rounded-4 shadow-card-md px-(--space-8) py-(--space-4)",
             disabled ? "bg-(--background-primary-disabled)" : "bg-(--background-neutral)"
           ),
-          style: { marginBottom: 0 },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               "p",
               {
                 className: cn(
                   "paragraph-s",
-                  disabled ? "text-(--text-primary-disabled)" : "text-(--text-primary)"
+                  disabled ? "text-primary-disabled" : "text-primary"
                 ),
-                style: { marginBottom: 0 },
                 children: labelText
               }
             ),
@@ -2507,7 +2583,7 @@ var Slider = (props) => {
       index
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: wrapperBase2, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("w-[354px] flex flex-col gap-1", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: wrapperBase2, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("w-full flex flex-col gap-1", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("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)),
@@ -2545,10 +2621,9 @@ var Slider = (props) => {
       "p",
       {
         className: cn(
-          "paragraph-s text-(--text-primary)",
-          disabled && "text-(--text-primary-disabled)"
+          "paragraph-s text-primary",
+          disabled && "text-primary-disabled"
         ),
-        style: { marginBottom: 0 },
         children: formatNumericLabel()
       }
     )
@@ -2615,8 +2690,8 @@ var TextArea = (props) => {
     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 hintColorClass = disabled ? "text-primary-disabled" : status === "success" ? "text-(--color-success)" : status === "error" ? "text-(--color-error)" : "text-(--color-secondary)";
+  const counterColorClass = disabled ? "text-primary-disabled" : status === "success" ? "text-(--color-success)" : status === "error" ? "text-(--color-error)" : "text-primary";
   const handleResizePointerDown = (event) => {
     if (disabled) return;
     if (event.button !== 0) return;
@@ -2649,9 +2724,8 @@ var TextArea = (props) => {
         id: labelId,
         className: cn(
           "paragraph-s",
-          disabled ? "text-(--text-primary-disabled)" : "text-(--text-primary)"
+          disabled ? "text-primary-disabled" : "text-primary"
         ),
-        style: { marginBottom: 0 },
         children: label
       }
     ),
@@ -2689,10 +2763,9 @@ var TextArea = (props) => {
               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)",
+                disabled ? "text-primary-disabled" : hasValue ? "text-primary" : "text-(--color-secondary)",
                 showCharacterLimit && "pr-16"
               ),
-              style: { marginBottom: 0 },
               ...textareaProps
             }
           ),
@@ -2735,7 +2808,6 @@ var TextArea = (props) => {
       {
         id: hint ? hintId : void 0,
         className: cn("caption", hint ? hintColorClass : "invisible"),
-        style: { marginBottom: 0 },
         children: hint || "\xA0"
       }
     )
@@ -2779,6 +2851,7 @@ var TextInput = (props) => {
   const {
     label,
     hint,
+    hideHint,
     placeholder = "Placeholder text",
     size = "large",
     status = "default",
@@ -2814,6 +2887,7 @@ var TextInput = (props) => {
     {
       label,
       hint,
+      hideHint,
       status,
       disabled,
       children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
@@ -2849,7 +2923,6 @@ var TextInput = (props) => {
                   inputTextVariants2({ size }),
                   "bg-transparent outline-none w-full"
                 ),
-                style: { marginBottom: 0 },
                 ...inputProps
               }
             ),
@@ -2949,10 +3022,9 @@ var Toggle = (props) => {
           "span",
           {
             className: cn(
-              "paragraph-s text-(--text-primary)",
-              disabled && "text-(--text-primary-disabled)"
+              "paragraph-s text-primary",
+              disabled && "text-primary-disabled"
             ),
-            style: { marginBottom: 0 },
             children: label
           }
         )
@@ -2985,7 +3057,7 @@ var WebsiteInput = (props) => {
   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)"
+    disabled ? "text-primary-disabled" : "text-primary group-hover:text-(--color-primary-hover) group-focus-within:text-(--color-primary-focus)"
   );
   const baseAddonClass = cn(
     "flex items-center gap-2 px-2 h-full",
@@ -3051,7 +3123,8 @@ var Popover2 = (props) => {
     onOk?.();
     setOpen(false);
   };
-  const popoverClasses = "bg-(--background-popover) fill-(--background-popover) popover w-80 shadow-card-md border-none [&_span]:scale-240 rounded-4";
+  const popoverClasses = "group bg-(--background-popover) popover w-80 max-w-[calc(100vw-2rem)] shadow-card-md border-none [&_span]:scale-240 rounded-4";
+  const popoverArrowClasses = "relative fill-(--background-popover) transition-[filter,transform] group-data-[side=top]:top-[-2px] group-data-[side=top]:drop-shadow-[0px_2px_1px_var(--color-b-black-12)] group-data-[side=bottom]:drop-shadow-[0px_-1px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=left]:drop-shadow-[0px_2px_1px_var(--color-b-black-12)] group-data-[side=right]:drop-shadow-[0px_2px_1px_var(--color-b-black-12)]";
   const mapPlacementToSideAndAlign = (placement2) => {
     switch (placement2) {
       case "top":
@@ -3082,19 +3155,6 @@ var Popover2 = (props) => {
         return { side: "bottom", align: "center" };
     }
   };
-  const arrowShadowClass = (side2) => {
-    switch (side2) {
-      case "top":
-        return "drop-shadow(0px 2px 1px var(--color-b-black-12))";
-      case "bottom":
-        return "drop-shadow(0px -1px 1px color-mix(in srgb, var(--color-b-black-10) 66%, transparent))";
-      case "left":
-      case "right":
-        return "drop-shadow(0px 2px 1px var(--color-b-black-12))";
-      default:
-        return "";
-    }
-  };
   const { side, align } = mapPlacementToSideAndAlign(placement);
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PopoverTrigger, { asChild: true, children }),
@@ -3104,21 +3164,16 @@ var Popover2 = (props) => {
         side,
         align,
         sideOffset: offset,
-        className: cn(popoverClasses, side === "top" ? "[&_span]:bottom-1! " : "", className),
+        className: cn(popoverClasses, className),
         children: [
-          showArrow && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            PopoverArrow,
-            {
-              style: { filter: arrowShadowClass(side) }
-            }
-          ),
+          showArrow && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PopoverArrow, { className: popoverArrowClasses }),
           /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "grid gap-4", children: [
             /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "caption text-secondary", style: { marginBottom: 0 }, children: strapline }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h4", { className: "subtitle-medium text-primary", style: { marginBottom: 0 }, children: title }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "paragraph-s text-primary", style: { marginBottom: 0 }, children: description })
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "caption text-secondary", children: strapline }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h4", { className: "subtitle-medium text-primary", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "paragraph-s text-primary", children: description })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex justify-start items-center gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex justify-start items-center gap-4 flex-wrap", children: [
               /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { size: "sm", variant: "secondary", onClick: handleCancel, children: cancelText || "Cancel" }),
               /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { size: "sm", variant: "primary", onClick: handleOk, children: okText || "Ok" })
             ] })
@@ -3156,8 +3211,8 @@ var breadcrumbTextVariants = (0, import_class_variance_authority19.cva)(
   {
     variants: {
       variant: {
-        colored: "text-(--text-brand) group-hover:text-(--text-brand-hover) group-focus-visible:text-(--text-brand-focus) group-disabled:text-(--text-brand-disabled)",
-        flat: "text-(--text-primary) group-hover:text-(--text-primary-hover) group-focus-visible:text-(--text-primary-focus) group-disabled:text-(--text-primary-disabled)"
+        colored: "text-(--color-brand) group-hover:text-(--color-brand-hover) group-focus-visible:text-(--color-brand-focus) group-disabled:text-(--color-brand-disabled)",
+        flat: "text-primary group-hover:text-(--color-primary-hover) group-focus-visible:text-(--color-primary-focus) group-disabled:text-primary-disabled"
       }
     },
     defaultVariants: {
@@ -3288,7 +3343,7 @@ var logoTextSizeVariants = (0, import_class_variance_authority21.cva)("", {
   }
 });
 var Logo = ({ className, textColor, variant = "inline" }) => {
-  const textColorClass = textColor === "light" ? "text-(--color-b-white)" : textColor === "dark" ? "text-(--color-b-black)" : "text-(--text-primary)";
+  const textColorClass = textColor === "light" ? "text-(--color-b-white)" : textColor === "dark" ? "text-(--color-b-black)" : "text-primary";
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn(logoWrapperVariants({ variant }), className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(LogoIconSvg2, { className: logoIconSizeVariants({ variant }) }),
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(LogoTextSvg, { className: cn(logoTextSizeVariants({ variant }), textColorClass) })