@bubo-squared/ui-framework 0.1.92 → 0.1.94

package/dist/index.cjs

@@ -143,8 +143,8 @@ var Button = React.forwardRef(
       size = "md",
       asChild = false,
       children,
-      suffixIcon,
-      prefixIcon,
+      trailingIcon,
+      leadingIcon,
       ...rest
     } = props;
     const Comp = asChild ? import_react_slot.Slot : "button";
@@ -155,9 +155,9 @@ var Button = React.forwardRef(
         ref,
         ...rest,
         children: [
-          prefixIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn(buttonIconVariants({ size })), children: prefixIcon }),
+          leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn(buttonIconVariants({ size })), children: leadingIcon }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn(buttonTextVariants({ size })), children }),
-          suffixIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn(buttonIconVariants({ size })), children: suffixIcon })
+          trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn(buttonIconVariants({ size })), children: trailingIcon })
         ]
       }
     );
@@ -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
@@ -361,8 +373,8 @@ var LinkButton = React4.forwardRef(
       size = "sm",
       asChild = false,
       children,
-      suffixIcon,
-      prefixIcon,
+      trailingIcon,
+      leadingIcon,
       ...rest
     } = props;
     const Comp = asChild ? import_react_slot3.Slot : "button";
@@ -373,9 +385,9 @@ var LinkButton = React4.forwardRef(
         ref,
         ...rest,
         children: [
-          prefixIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn(linkButtonIconVariants({ size })), children: prefixIcon }),
+          leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn(linkButtonIconVariants({ size })), children: leadingIcon }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn(linkButtonTextVariants({ size })), children }),
-          suffixIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn(linkButtonIconVariants({ size })), children: suffixIcon })
+          trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn(linkButtonIconVariants({ size })), children: trailingIcon })
         ]
       }
     );
@@ -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, {}) })
         ]
       }
@@ -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: ":" }),
@@ -638,7 +649,6 @@ var BadgeDigit = React8.forwardRef(
       {
         ref,
         className: cn(badgeDigitVariants({ size, variant }), className),
-        style: { marginBottom: 0 },
         ...rest,
         children: String(value)
       }
@@ -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-(--text-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-(--text-primary)", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "footnote text-(--text-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-(--text-secondary)", children: hint })
         ]
       }
     );
@@ -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-(--text-primary)", children: label })
   ] });
 }
 
@@ -986,7 +1064,7 @@ 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",
   {
@@ -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",
@@ -1111,7 +1189,6 @@ var Dropdown = (props) => {
           "paragraph-s",
           disabled ? "text-(--text-primary-disabled)" : "text-(--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
               }
             ),
@@ -1174,7 +1250,6 @@ var Dropdown = (props) => {
               {
                 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),
@@ -1186,7 +1261,7 @@ var Dropdown = (props) => {
         );
       }) }) })
     ] }),
-    showHint && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    !hideHint && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "p",
       {
         id: hintId,
@@ -1194,7 +1269,6 @@ var Dropdown = (props) => {
           "caption",
           disabled ? "text-(--text-primary-disabled)" : "text-(--text-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,
@@ -1226,17 +1301,15 @@ var Field = (props) => {
       {
         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"
       }
     )
@@ -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 })
                 ),
@@ -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,
@@ -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-(--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,
+                    {
+                      country: value,
+                      countryName: label,
+                      selectedCountry,
+                      onChange,
+                      onSelectComplete: () => setIsOpen(false)
+                    },
+                    value
+                  ) : null
+                ) })
+              ] }) })
+            ] })
+          }
+        )
       ]
     }
   );
@@ -1976,6 +2057,7 @@ var wrapperBase = "flex flex-col gap-2 items-start";
 var RadioGroup = ({
   label,
   hint,
+  hideHint,
   options,
   orientation = "vertical",
   disabled = false,
@@ -1999,7 +2081,6 @@ var RadioGroup = ({
           "paragraph-s text-(--text-primary)",
           disabled && "text-(--text-primary-disabled)"
         ),
-        style: { marginBottom: 0 },
         children: label
       }
     ),
@@ -2080,7 +2161,6 @@ var RadioGroup = ({
                         "paragraph-s text-(--text-primary)",
                         "group-data-[disabled]:text-(--text-primary-disabled) whitespace-nowrap"
                       ),
-                      style: { marginBottom: 0 },
                       children: option.label
                     }
                   )
@@ -2092,7 +2172,7 @@ var RadioGroup = ({
         ))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    !hideHint && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "p",
       {
         id: hintId,
@@ -2100,7 +2180,6 @@ var RadioGroup = ({
           "caption text-(--text-secondary)",
           disabled && "text-(--text-primary-disabled)"
         ),
-        style: { marginBottom: 0 },
         children: hint ?? "\xA0"
       }
     )
@@ -2145,6 +2224,7 @@ var SearchInput = (props) => {
     className,
     leadingIcon,
     showLeadingIcon = true,
+    trailingIcon,
     ...inputProps
   } = props;
   const inputRef = React28.useRef(null);
@@ -2152,7 +2232,8 @@ var SearchInput = (props) => {
     if (disabled) return;
     inputRef.current?.focus();
   };
-  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)(
+  const showTrailingIcon = !!trailingIcon;
+  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,
@@ -2173,10 +2254,10 @@ var SearchInput = (props) => {
             className: cn(
               searchTextVariants({ size })
             ),
-            style: { marginBottom: 0 },
             ...inputProps
           }
-        )
+        ),
+        showTrailingIcon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: cn("cursor-pointer", iconWrapperVariants2({ size, disabled: !!disabled })), children: trailingIcon })
       ]
     }
   ) }) });
@@ -2186,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",
@@ -2442,7 +2523,6 @@ 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",
@@ -2451,7 +2531,6 @@ var Slider = (props) => {
                   "paragraph-s",
                   disabled ? "text-(--text-primary-disabled)" : "text-(--text-primary)"
                 ),
-                style: { marginBottom: 0 },
                 children: labelText
               }
             ),
@@ -2504,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,7 +2624,6 @@ var Slider = (props) => {
           "paragraph-s text-(--text-primary)",
           disabled && "text-(--text-primary-disabled)"
         ),
-        style: { marginBottom: 0 },
         children: formatNumericLabel()
       }
     )
@@ -2648,7 +2726,6 @@ var TextArea = (props) => {
           "paragraph-s",
           disabled ? "text-(--text-primary-disabled)" : "text-(--text-primary)"
         ),
-        style: { marginBottom: 0 },
         children: label
       }
     ),
@@ -2689,7 +2766,6 @@ var TextArea = (props) => {
                 disabled ? "text-(--text-primary-disabled)" : hasValue ? "text-(--text-primary)" : "text-(--text-secondary)",
                 showCharacterLimit && "pr-16"
               ),
-              style: { marginBottom: 0 },
               ...textareaProps
             }
           ),
@@ -2732,7 +2808,6 @@ var TextArea = (props) => {
       {
         id: hint ? hintId : void 0,
         className: cn("caption", hint ? hintColorClass : "invisible"),
-        style: { marginBottom: 0 },
         children: hint || "\xA0"
       }
     )
@@ -2776,6 +2851,7 @@ var TextInput = (props) => {
   const {
     label,
     hint,
+    hideHint,
     placeholder = "Placeholder text",
     size = "large",
     status = "default",
@@ -2811,6 +2887,7 @@ var TextInput = (props) => {
     {
       label,
       hint,
+      hideHint,
       status,
       disabled,
       children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
@@ -2846,7 +2923,6 @@ var TextInput = (props) => {
                   inputTextVariants2({ size }),
                   "bg-transparent outline-none w-full"
                 ),
-                style: { marginBottom: 0 },
                 ...inputProps
               }
             ),
@@ -2949,7 +3025,6 @@ var Toggle = (props) => {
               "paragraph-s text-(--text-primary)",
               disabled && "text-(--text-primary-disabled)"
             ),
-            style: { marginBottom: 0 },
             children: label
           }
         )
@@ -2964,7 +3039,7 @@ var React33 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var WebsiteInput = (props) => {
   const {
-    hierarchy = "prefix",
+    hierarchy = "leading",
     protocolLabel = "http://",
     icon,
     size = "large",
@@ -2972,7 +3047,7 @@ var WebsiteInput = (props) => {
     className,
     ...rest
   } = props;
-  const isPrefix = hierarchy === "prefix";
+  const isLeading = hierarchy === "leading";
   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)]",
@@ -2990,18 +3065,18 @@ var WebsiteInput = (props) => {
     "border-(--border-secondary)",
     // divider color
     disabled && "border-(--border-secondary-disabled) hover:border-(--border-secondary-disabled)",
-    isPrefix ? "border-r" : "border-l"
+    isLeading ? "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__ */ (0, import_jsx_runtime35.jsxs)("div", { className: baseAddonClass, children: [
+  const leadingAddon = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: baseAddonClass, children: [
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: addonTextClass, children: protocolLabel }),
     icon != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: iconWrapperClass, children: icon })
   ] });
-  const suffixAddon = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: baseAddonClass, children: [
+  const trailingAddon = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: baseAddonClass, children: [
     icon != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: iconWrapperClass, children: icon }),
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: addonTextClass, children: protocolLabel })
   ] });
@@ -3012,8 +3087,8 @@ var WebsiteInput = (props) => {
       size,
       disabled,
       className: cn(baseClass, className),
-      leadingIcon: isPrefix ? prefixAddon : void 0,
-      trailingIcon: !isPrefix ? suffixAddon : void 0
+      leadingIcon: isLeading ? leadingAddon : void 0,
+      trailingIcon: !isLeading ? trailingAddon : void 0
     }
   );
 };
@@ -3048,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":
@@ -3079,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 }),
@@ -3101,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" })
             ] })