banhaten 0.1.0 → 0.1.1

package/registry/components/input.tsx

@@ -1,5 +1,11 @@
 import * as React from "react"
 import { cva } from "class-variance-authority"
+import {
+  ChevronDownIcon,
+  InfoIcon,
+  MinusIcon as LucideMinusIcon,
+  PlusIcon as LucidePlusIcon,
+} from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import {
@@ -85,7 +91,11 @@ const inputSurface = cva(
     "group/input-surface relative flex w-full overflow-hidden rounded-[var(--bh-input-radius)]",
     "transition-[background-color,box-shadow]",
     "[--bh-input-border:var(--bh-border-input)] [--shadow-input:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-input-border,var(--bh-border-input)),var(--shadow-component-default)]",
-    "focus-within:shadow-[var(--shadow-input-focus-ring)]",
+    "[--shadow-input-overlay:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-input-border,var(--bh-border-input)),inset_0px_-1px_0px_0px_rgb(0_0_0_/_0.08)]",
+    "[--shadow-input-focus-overlay:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-focus)]",
+    "[--shadow-input-disabled-overlay:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
+    "after:pointer-events-none after:absolute after:inset-0 after:z-[var(--bh-z-raised)] after:rounded-[inherit] after:[box-shadow:var(--shadow-input-overlay)] after:content-['']",
+    "focus-within:shadow-[var(--shadow-input-focus-ring)] focus-within:after:[box-shadow:var(--shadow-input-focus-overlay)]",
   ],
   {
     variants: {
@@ -103,9 +113,9 @@ const inputSurface = cva(
         filled:
           "shadow-[var(--shadow-input)]",
         error:
-          "[--bh-input-border:var(--bh-border-danger-strong)] shadow-[var(--shadow-input)] focus-within:shadow-[var(--shadow-input)]",
+          "[--bh-input-border:var(--bh-border-danger-strong)] shadow-[var(--shadow-input)] focus-within:shadow-[var(--shadow-input)] focus-within:after:[box-shadow:var(--shadow-input-overlay)]",
         disabled:
-          "bg-[var(--bh-interactive-input-disabled)] shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
+          "[--bh-input-border:var(--bh-border-disabled)] bg-[var(--bh-interactive-input-disabled)] shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)] after:[box-shadow:var(--shadow-input-disabled-overlay)]",
       },
     },
     compoundVariants: [
@@ -211,6 +221,27 @@ const inputSegment = cva(
   }
 )
 
+const inputStepperButton = cva(
+  [
+    "inline-flex h-full w-[var(--bh-input-stepper-width,var(--bh-input-lg-height))] shrink-0 items-center justify-center",
+    "bg-[var(--bh-interactive-secondary-default)] text-[var(--bh-content-subtle)]",
+    "outline-none transition-[background-color,color]",
+    "hover:bg-[var(--bh-interactive-secondary-hover)] focus-visible:bg-[var(--bh-interactive-secondary-hover)]",
+    "disabled:bg-[var(--bh-interactive-secondary-disabled)] disabled:text-[var(--bh-content-disabled)]",
+  ],
+  {
+    variants: {
+      side: {
+        leading: "border-e border-[var(--bh-border-input)]",
+        trailing: "border-s border-[var(--bh-border-input)]",
+      },
+    },
+    defaultVariants: {
+      side: "trailing",
+    },
+  }
+)
+
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (
     {
@@ -352,6 +383,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               kind,
               leadingAddon,
               quantityLabel,
+              size,
               trailingAddon,
             })}
 
@@ -414,6 +446,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               kind,
               leadingAddon,
               quantityLabel,
+              size,
               trailingAddon,
             })}
           </div>
@@ -577,17 +610,12 @@ function InputInfoIcon({
       )}
     >
       {icon || (
-        <svg
+        <InfoIcon
+          aria-hidden="true"
           className="size-[var(--bh-input-info-icon-size)]"
-          fill="none"
           focusable="false"
-          viewBox="0 0 16 16"
-        >
-          <path
-            d="M8 14.6667C4.3181 14.6667 1.33333 11.6819 1.33333 8C1.33333 4.3181 4.3181 1.33333 8 1.33333C11.6819 1.33333 14.6667 4.3181 14.6667 8C14.6667 11.6819 11.6819 14.6667 8 14.6667ZM8 6.33333C8.55227 6.33333 9 5.88562 9 5.33333C9 4.78105 8.55227 4.33333 8 4.33333C7.44773 4.33333 7 4.78105 7 5.33333C7 5.88562 7.44773 6.33333 8 6.33333ZM9.33333 10H8.66667V7H6.66667V8.33333H7.33333V10H6.66667V11.3333H9.33333V10Z"
-            fill="currentColor"
-          />
-        </svg>
+          strokeWidth={2.25}
+        />
       )}
     </span>
   )
@@ -699,12 +727,46 @@ function InputSegment({
   )
 }
 
+function InputStepperButton({
+  children,
+  disabled,
+  label,
+  side,
+  size,
+}: {
+  children: React.ReactNode
+  disabled: boolean
+  label: string
+  side: "leading" | "trailing"
+  size: InputSize
+}) {
+  return (
+    <button
+      aria-label={label}
+      data-side={side}
+      data-slot="input-stepper-button"
+      disabled={disabled}
+      type="button"
+      className={cn(
+        inputStepperButton({ side }),
+        size === "md" && "w-[var(--bh-input-md-height)]"
+      )}
+      onClick={(event) => {
+        event.stopPropagation()
+      }}
+    >
+      {children}
+    </button>
+  )
+}
+
 type InputSegmentRenderContext = {
   buttonLabel?: React.ReactNode
   disabled: boolean
   kind: InputKind
   leadingAddon?: React.ReactNode
   quantityLabel?: React.ReactNode
+  size: InputSize
   trailingAddon?: React.ReactNode
 }
 
@@ -731,13 +793,25 @@ const leadingSegmentRenderers: Partial<Record<InputKind, InputSegmentRenderer>>
       <ChevronIcon />
     </InputSegment>
   ),
-  "quantity-2": ({ disabled, quantityLabel }) => (
-    <InputSegment disabled={disabled} interactive side="leading">
+  quantity: ({ disabled, quantityLabel, size }) => (
+    <InputStepperButton
+      disabled={disabled}
+      label={formatStepperLabel("Decrease", quantityLabel)}
+      side="leading"
+      size={size}
+    >
       <MinusIcon />
-      {hasRenderableContent(quantityLabel) ? (
-        <span className="sr-only">{quantityLabel}</span>
-      ) : null}
-    </InputSegment>
+    </InputStepperButton>
+  ),
+  "quantity-2": ({ disabled, quantityLabel, size }) => (
+    <InputStepperButton
+      disabled={disabled}
+      label={formatStepperLabel("Decrease", quantityLabel)}
+      side="leading"
+      size={size}
+    >
+      <MinusIcon />
+    </InputStepperButton>
   ),
 }
 
@@ -760,17 +834,25 @@ const trailingSegmentRenderers: Partial<Record<InputKind, InputSegmentRenderer>>
       <ChevronIcon />
     </InputSegment>
   ),
-  quantity: ({ disabled }) => (
-    <InputSegment disabled={disabled} interactive side="trailing">
-      <MinusIcon />
+  quantity: ({ disabled, quantityLabel, size }) => (
+    <InputStepperButton
+      disabled={disabled}
+      label={formatStepperLabel("Increase", quantityLabel)}
+      side="trailing"
+      size={size}
+    >
       <PlusIcon />
-    </InputSegment>
+    </InputStepperButton>
   ),
-  "quantity-2": ({ disabled }) => (
-    <InputSegment disabled={disabled} interactive side="trailing">
-      <MinusIcon />
+  "quantity-2": ({ disabled, quantityLabel, size }) => (
+    <InputStepperButton
+      disabled={disabled}
+      label={formatStepperLabel("Increase", quantityLabel)}
+      side="trailing"
+      size={size}
+    >
       <PlusIcon />
-    </InputSegment>
+    </InputStepperButton>
   ),
 }
 
@@ -782,51 +864,42 @@ function renderTrailingSegment(context: InputSegmentRenderContext) {
   return trailingSegmentRenderers[context.kind]?.(context) ?? null
 }
 
+function formatStepperLabel(action: "Decrease" | "Increase", quantityLabel?: React.ReactNode) {
+  return typeof quantityLabel === "string" && quantityLabel.trim()
+    ? `${action} ${quantityLabel}`
+    : action
+}
+
 function ChevronIcon() {
   return (
-    <svg
+    <ChevronDownIcon
       aria-hidden="true"
       className="size-[var(--bh-input-chevron-size)]"
-      fill="none"
       focusable="false"
-      viewBox="0 0 16 16"
-    >
-      <path
-        d="M8 10.6667L4 6.66667L4.93333 5.73333L8 8.8L11.0667 5.73333L12 6.66667L8 10.6667Z"
-        fill="currentColor"
-      />
-    </svg>
+      strokeWidth={2.25}
+    />
   )
 }
 
 function MinusIcon() {
   return (
-    <svg
+    <LucideMinusIcon
       aria-hidden="true"
       className="size-[var(--bh-input-stepper-icon-size)]"
-      fill="none"
       focusable="false"
-      viewBox="0 0 16 16"
-    >
-      <path d="M3.33333 7.33333H12.6667V8.66667H3.33333V7.33333Z" fill="currentColor" />
-    </svg>
+      strokeWidth={2.25}
+    />
   )
 }
 
 function PlusIcon() {
   return (
-    <svg
+    <LucidePlusIcon
       aria-hidden="true"
       className="size-[var(--bh-input-stepper-icon-size)]"
-      fill="none"
       focusable="false"
-      viewBox="0 0 16 16"
-    >
-      <path
-        d="M7.33333 7.33333V3.33333H8.66667V7.33333H12.6667V8.66667H8.66667V12.6667H7.33333V8.66667H3.33333V7.33333H7.33333Z"
-        fill="currentColor"
-      />
-    </svg>
+      strokeWidth={2.25}
+    />
   )
 }
 
@@ -836,10 +909,6 @@ function shouldRenderLeadingIcon(kind: InputKind) {
     "shortcut",
     "tags",
     "inline-tags",
-    "trailing-dropdown",
-    "leading-dropdown",
-    "trailing-button",
-    "leading-button",
   ].includes(kind)
 }
 
@@ -848,6 +917,8 @@ function shouldRenderInfoIcon(kind: InputKind, hasInformationIcon: boolean) {
 
   return ![
     "shortcut",
+    "leading-dropdown",
+    "leading-button",
     "trailing-dropdown",
     "trailing-button",
     "quantity",

package/registry/components/menu.tsx

@@ -108,6 +108,7 @@ type MenuContentProps = React.ComponentProps<typeof DropdownMenuPrimitive.Conten
 
 const MenuRoot = DropdownMenuPrimitive.Root
 const MenuTrigger = DropdownMenuPrimitive.Trigger
+const MenuStaticContext = React.createContext(false)
 
 const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(function MenuContent({
   className,
@@ -133,23 +134,36 @@ const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(function
 
 function Menu({
   children,
+  className,
   defaultOpen = true,
   modal = false,
   onOpenChange,
   open,
+  role = "menu",
+  width,
+  asChild = false,
   ...props
 }: MenuProps) {
-  const rootProps =
-    open === undefined
-      ? { defaultOpen, onOpenChange }
-      : { open, onOpenChange }
+  const Comp = asChild ? Slot : "div"
+  const isOpen = open ?? defaultOpen
+
+  void modal
+  void onOpenChange
+
+  if (!isOpen) return null
 
   return (
-    <MenuRoot modal={modal} {...rootProps}>
-      <MenuContent forceMount {...props}>
+    <MenuStaticContext.Provider value>
+      <Comp
+        data-slot="menu"
+        data-width={width ?? "menu"}
+        role={role}
+        className={cn(menuVariants({ width, className }))}
+        {...props}
+      >
         {children}
-      </MenuContent>
-    </MenuRoot>
+      </Comp>
+    </MenuStaticContext.Provider>
   )
 }
 
@@ -188,9 +202,30 @@ const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuIt
   ...props
 }, ref) {
   const Comp = asChild ? Slot : "div"
+  const isStaticMenu = React.useContext(MenuStaticContext)
   const selectedKind: MenuItemKind = kind ?? "default"
   const isDisabled = disabled
 
+  const item = (
+    <Comp
+      aria-disabled={isDisabled ? true : undefined}
+      data-disabled={isDisabled ? "true" : "false"}
+      data-kind={selectedKind}
+      data-slot="menu-item"
+      ref={ref}
+      role={role}
+      tabIndex={isDisabled ? -1 : (tabIndex ?? 0)}
+      className={cn(menuItemVariants({ kind: selectedKind, className }))}
+      {...props}
+    >
+      <MenuItemContent kind={selectedKind}>
+        <MenuItemChildren kind={selectedKind}>{children}</MenuItemChildren>
+      </MenuItemContent>
+    </Comp>
+  )
+
+  if (isStaticMenu) return item
+
   return (
     <DropdownMenuPrimitive.Item
       asChild
@@ -198,21 +233,7 @@ const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuIt
       onSelect={onSelect}
       textValue={textValue ?? getMenuItemTextValue(children)}
     >
-      <Comp
-        aria-disabled={isDisabled ? true : undefined}
-        data-disabled={isDisabled ? "true" : "false"}
-        data-kind={selectedKind}
-        data-slot="menu-item"
-        ref={ref}
-        role={role}
-        tabIndex={isDisabled ? -1 : (tabIndex ?? 0)}
-        className={cn(menuItemVariants({ kind: selectedKind, className }))}
-        {...props}
-      >
-        <MenuItemContent kind={selectedKind}>
-          <MenuItemChildren kind={selectedKind}>{children}</MenuItemChildren>
-        </MenuItemContent>
-      </Comp>
+      {item}
     </DropdownMenuPrimitive.Item>
   )
 })
@@ -620,42 +641,45 @@ function MenuLabel({
   role = "presentation",
   ...props
 }: MenuLabelProps) {
-  return (
-    <DropdownMenuPrimitive.Label asChild>
-      <div
-        data-slot="menu-label"
-        role={role}
-        className={cn(
-          "flex h-[var(--bh-menu-item-label-height)] w-full items-center gap-0 bg-[var(--bh-menu-item-bg)] px-[var(--bh-menu-label-padding-x)] py-[var(--bh-space-xs-4)] text-[length:var(--bh-text-body-xs-regular-font-size)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)]",
-          className
-        )}
-        {...props}
-      >
-        {children ?? (
-          <>
-            {hasRenderableContent(label) ? (
-              <span
-                data-slot="menu-label-primary"
-                dir="auto"
-                className="min-w-0 flex-1 truncate text-start font-[var(--bh-text-body-xs-medium-font-weight)] text-[var(--bh-content-default)]"
-              >
-                {label}
-              </span>
-            ) : null}
-            {hasRenderableContent(caption) ? (
-              <span
-                data-slot="menu-label-caption"
-                dir="auto"
-                className="shrink-0 whitespace-nowrap text-end font-[var(--bh-text-body-xs-regular-font-weight)] text-[var(--bh-content-subtle)]"
-              >
-                {caption}
-              </span>
-            ) : null}
-          </>
-        )}
-      </div>
-    </DropdownMenuPrimitive.Label>
+  const isStaticMenu = React.useContext(MenuStaticContext)
+  const labelContent = (
+    <div
+      data-slot="menu-label"
+      role={role}
+      className={cn(
+        "flex h-[var(--bh-menu-item-label-height)] w-full items-center gap-0 bg-[var(--bh-menu-item-bg)] px-[var(--bh-menu-label-padding-x)] py-[var(--bh-space-xs-4)] text-[length:var(--bh-text-body-xs-regular-font-size)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)]",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <>
+          {hasRenderableContent(label) ? (
+            <span
+              data-slot="menu-label-primary"
+              dir="auto"
+              className="min-w-0 flex-1 truncate text-start font-[var(--bh-text-body-xs-medium-font-weight)] text-[var(--bh-content-default)]"
+            >
+              {label}
+            </span>
+          ) : null}
+          {hasRenderableContent(caption) ? (
+            <span
+              data-slot="menu-label-caption"
+              dir="auto"
+              className="shrink-0 whitespace-nowrap text-end font-[var(--bh-text-body-xs-regular-font-weight)] text-[var(--bh-content-subtle)]"
+            >
+              {caption}
+            </span>
+          ) : null}
+        </>
+      )}
+    </div>
   )
+
+  if (isStaticMenu) return labelContent
+
+  return <DropdownMenuPrimitive.Label asChild>{labelContent}</DropdownMenuPrimitive.Label>
 }
 
 function hasRenderableContent(content: React.ReactNode) {
@@ -696,21 +720,24 @@ function MenuSeparator({
   role = "separator",
   ...props
 }: React.ComponentProps<"div">) {
-  return (
-    <DropdownMenuPrimitive.Separator asChild>
-      <div
-        data-slot="menu-separator"
-        role={role}
-        className={cn(
-          "flex h-[var(--bh-menu-item-divider-height)] w-full items-center py-[var(--bh-menu-divider-padding-y)]",
-          className
-        )}
-        {...props}
-      >
-        <span className="block w-full border-t border-[var(--bh-border-subtle)]" />
-      </div>
-    </DropdownMenuPrimitive.Separator>
+  const isStaticMenu = React.useContext(MenuStaticContext)
+  const separator = (
+    <div
+      data-slot="menu-separator"
+      role={role}
+      className={cn(
+        "flex h-[var(--bh-menu-item-divider-height)] w-full items-center py-[var(--bh-menu-divider-padding-y)]",
+        className
+      )}
+      {...props}
+    >
+      <span className="block w-full border-t border-[var(--bh-border-subtle)]" />
+    </div>
   )
+
+  if (isStaticMenu) return separator
+
+  return <DropdownMenuPrimitive.Separator asChild>{separator}</DropdownMenuPrimitive.Separator>
 }
 
 export {

package/registry/components/pagination.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -444,29 +445,16 @@ function PaginationPageItem({
 }
 
 function PaginationArrowIcon({ type }: { type: "previous" | "next" }) {
+  const Icon = type === "previous" ? ChevronLeftIcon : ChevronRightIcon
+
   return (
-    <svg
+    <Icon
       aria-hidden="true"
       data-rtl-flip="true"
       data-slot="pagination-icon"
-      fill="none"
       focusable="false"
-      viewBox="0 0 20 20"
-    >
-      {type === "previous" ? (
-        <path
-          d="M2.357 5.30332L6.48183 9.42807L5.30333 10.6066L0 5.30332L5.30333 0L6.48183 1.17851L2.357 5.30332Z"
-          fill="currentColor"
-          transform="translate(6.666 4.697)"
-        />
-      ) : (
-        <path
-          d="M4.12482 5.30332L0 1.17851L1.17852 0L6.48182 5.30332L1.17852 10.6066L0 9.42807L4.12482 5.30332Z"
-          fill="currentColor"
-          transform="translate(6.852 4.697)"
-        />
-      )}
-    </svg>
+      strokeWidth={2.25}
+    />
   )
 }
 

package/registry/components/radio-card.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import { Building2Icon, CreditCardIcon, UserIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -87,8 +88,16 @@ function RadioCard({
   inputProps,
   ...props
 }: RadioCardProps) {
+  const hasControlledChecked =
+    checked !== undefined || inputProps?.checked !== undefined
+  const controlledChecked = checked ?? inputProps?.checked
   const inputChecked =
-    checked ?? inputProps?.checked ?? Boolean(inputProps?.defaultChecked)
+    controlledChecked ?? Boolean(inputProps?.defaultChecked)
+  const inputReadOnly =
+    inputProps?.readOnly ??
+    (hasControlledChecked && inputProps?.onChange === undefined
+      ? true
+      : undefined)
   const isDisabled = disabled ?? inputProps?.disabled ?? state === "disabled"
   const visualState: RadioCardState = isDisabled
     ? "disabled"
@@ -112,9 +121,11 @@ function RadioCard({
       <input
         aria-label={typeof textLabel === "string" ? textLabel : undefined}
         {...inputProps}
-        checked={inputProps?.checked ?? checked}
+        checked={hasControlledChecked ? controlledChecked : undefined}
         className={cn("sr-only", inputProps?.className)}
+        defaultChecked={hasControlledChecked ? undefined : inputProps?.defaultChecked}
         disabled={isDisabled}
+        readOnly={inputReadOnly}
         type="radio"
       />
       <span
@@ -550,17 +561,11 @@ function RadioCardMedia({
 
 function RadioCardUserIcon() {
   return (
-    <svg
+    <UserIcon
       aria-hidden="true"
       className="size-[var(--bh-space-4xl-20)]"
-      fill="none"
-      viewBox="0 0 20 20"
-    >
-      <path
-        d="M3.333 18.333c0-3.681 2.985-6.666 6.667-6.666s6.667 2.985 6.667 6.666H15c0-2.761-2.239-5-5-5s-5 2.239-5 5H3.333ZM10 10.833a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-1.666a3.333 3.333 0 1 0 0-6.667 3.333 3.333 0 0 0 0 6.667Z"
-        fill="currentColor"
-      />
-    </svg>
+      strokeWidth={2}
+    />
   )
 }
 
@@ -568,21 +573,13 @@ function RadioCardPaymentIcon() {
   return (
     <span
       data-slot="radio-card-payment-icon"
-      className="flex h-[var(--bh-radio-card-payment-height)] w-[var(--bh-radio-card-payment-width)] shrink-0 items-center justify-center rounded-[var(--bh-radius-md-6)] bg-[var(--bh-bg-always-white)] shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-border-subtle)]"
+      className="flex h-[var(--bh-radio-card-payment-height)] w-[var(--bh-radio-card-payment-width)] shrink-0 items-center justify-center rounded-[var(--bh-radius-md-6)] bg-[var(--bh-bg-always-white)] text-[var(--bh-radio-card-payment-logo-color)] shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-border-subtle)]"
     >
-      <svg
+      <CreditCardIcon
         aria-hidden="true"
         className="h-[var(--bh-radio-card-payment-logo-height)] w-[var(--bh-radio-card-payment-logo-width)]"
-        fill="none"
-        viewBox="0 0 33 11"
-      >
-        <path
-          clipRule="evenodd"
-          d="M8.05 10.344H5.263L3.174 2.256c-.1-.372-.31-.7-.62-.856C1.78 1.011.852.701 0 .544V.233h4.489c.62 0 1.084.468 1.162 1.011l1.084 5.834L9.52.233h2.71L8.05 10.344Zm5.728 0h-2.632L13.313.233h2.632l-2.167 10.111Zm5.572-7.31c.078-.544.542-.855 1.085-.855.852-.078 1.78.078 2.554.467l.465-2.177A7.09 7.09 0 0 0 21.055 0c-2.554 0-4.413 1.401-4.413 3.344 0 1.479 1.317 2.255 2.246 2.723 1.006.467 1.393.778 1.315 1.244 0 .7-.774 1.011-1.547 1.011-.93 0-1.86-.233-2.71-.622l-.465 2.178c.93.388 1.935.545 2.864.545 2.864.076 4.644-1.323 4.644-3.423 0-2.645-3.639-2.8-3.639-3.966Zm12.85 7.31L30.11.233h-2.245c-.464 0-.929.311-1.084.778l-3.87 9.333h2.71l.541-1.477h3.329l.31 1.477H32.2ZM28.253 2.956l.773 3.811H26.86l1.394-3.811Z"
-          fill="var(--bh-radio-card-payment-logo-color)"
-          fillRule="evenodd"
-        />
-      </svg>
+        strokeWidth={2}
+      />
     </span>
   )
 }
@@ -610,14 +607,11 @@ function RadioCardCompanyIcon({ disabled }: { disabled: boolean }) {
         disabled && "opacity-[var(--bh-opacity-disabled-media)]"
       )}
     >
-      <svg aria-hidden="true" className="size-full" fill="none" viewBox="0 0 40 40">
-        <path
-          clipRule="evenodd"
-          d="M20.5 37.5c9.941 0 18-8.059 18-18s-8.059-18-18-18-18 8.059-18 18 8.059 18 18 18Zm2.778-22.093a3.929 3.929 0 0 0 0-5.556 3.929 3.929 0 0 0-5.556 0 3.929 3.929 0 0 0 0 5.556l2.778 2.778 2.778-2.778Zm1.315 6.871a3.929 3.929 0 0 0 5.556 0 3.929 3.929 0 0 0 0-5.556 3.929 3.929 0 0 0-5.556 0L21.815 19.5l2.778 2.778Zm-1.315 6.871a3.929 3.929 0 0 0 0-5.556L20.5 20.815l-2.778 2.778a3.929 3.929 0 0 0 0 5.556 3.929 3.929 0 0 0 5.556 0Zm-12.427-6.871a3.929 3.929 0 0 1 0-5.556 3.929 3.929 0 0 1 5.556 0L19.185 19.5l-2.778 2.778a3.929 3.929 0 0 1-5.556 0Z"
-          fill="var(--bh-radio-card-company-mark-color)"
-          fillRule="evenodd"
-        />
-      </svg>
+      <Building2Icon
+        aria-hidden="true"
+        className="size-[var(--bh-space-5xl-24)] text-[var(--bh-radio-card-company-mark-color)]"
+        strokeWidth={1.8}
+      />
     </span>
   )
 }