banhaten 0.1.0 → 0.1.1

package/README.md

@@ -53,7 +53,7 @@ The current scaffold includes:
 - A Figma-matched `tag` registry item with simple, dot, flag, avatar, and icon types, default/active/disabled states, native hover/focus-visible styling, xs/md/lg sizes, optional close button, and RTL-safe composition.
 - A Radix Switch-backed `toggle` registry item with sm/md geometry, active/disabled states, optional handle icons, labeled fields, supporting text, and RTL-safe label placement.
 - A Figma-matched `textarea` registry item with label, helper text, error, default and tags modes, placeholder, filled, disabled, and RTL states.
-- A Radix Select-backed, Figma-matched `select` registry item with default and soft triggers, error/filled/disabled states, menu surface, checkbox and check selection, and item media for text, users, flags, companies, payment methods, and status dots.
+- A Radix Select-backed, Figma-matched `select` registry item with default and soft triggers, error/filled/disabled states, menu surface, checkbox and check selection, and item media for text, icons, users, companies, payment methods, and status dots.
 - A Figma-matched `date-picker` registry item with Calendar, Range Calendar, Date Picker, Date Range Picker, presets, time rows, open states, month/year view, and RTL.
 - A Radix Slider-backed `slider` registry item with single, range, multi-thumb, text/tooltip indicators, ticks, vertical layout, pill treatment, tones, and RTL behavior.
 - A read-only `progress` registry item with value meters, label placements, helper text, indicators, spinner, and RTL fill direction.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "banhaten",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Banhaten design system: an Arabic and English-first React design system with shadcn-style component installation.",
   "type": "module",
   "bin": {

package/registry/components/accordion.tsx

@@ -67,11 +67,15 @@ function AccordionItem({
 function AccordionTrigger({
   className,
   children,
+  dir,
   ...props
 }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  const triggerDirection = dir ?? getTextDirection(children)
+
   return (
     <AccordionPrimitive.Header className="flex">
       <AccordionPrimitive.Trigger
+        dir={triggerDirection}
         data-slot="accordion-trigger"
         className={cn(
           "flex flex-1 items-start justify-between gap-[var(--bh-space-3xl-16)] rounded-[var(--bh-radius-md-6)] py-[var(--bh-space-3xl-16)] text-start text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)] outline-none transition-[background-color,color,box-shadow] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--shadow-button-focus)] disabled:pointer-events-none disabled:opacity-[var(--bh-opacity-50)] data-[disabled]:pointer-events-none data-[disabled]:opacity-[var(--bh-opacity-50)] [&[data-state=open]>svg]:rotate-180 [&_svg]:size-[var(--bh-space-3xl-16)]",
@@ -79,7 +83,7 @@ function AccordionTrigger({
         )}
         {...props}
       >
-        <span dir="auto" className="min-w-0">
+        <span dir="auto" className="min-w-0 flex-1 text-start">
           {children}
         </span>
         <ChevronDownIcon
@@ -110,6 +114,38 @@ function AccordionContent({
   )
 }
 
+function getTextDirection(children: React.ReactNode) {
+  const text = getNodeText(children)
+
+  for (const character of text) {
+    if (/[\u0590-\u08ff]/.test(character)) {
+      return "rtl"
+    }
+
+    if (/[A-Za-z]/.test(character)) {
+      return "ltr"
+    }
+  }
+
+  return undefined
+}
+
+function getNodeText(node: React.ReactNode): string {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node)
+  }
+
+  if (Array.isArray(node)) {
+    return node.map(getNodeText).join("")
+  }
+
+  if (React.isValidElement<{ children?: React.ReactNode }>(node)) {
+    return getNodeText(node.props.children)
+  }
+
+  return ""
+}
+
 export {
   Accordion,
   AccordionItem,

package/registry/components/alert.tsx

@@ -1,5 +1,13 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import {
+  CircleAlertIcon,
+  CircleCheckIcon,
+  InfoIcon,
+  StarIcon,
+  TriangleAlertIcon,
+  XIcon,
+} from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -226,49 +234,27 @@ function AlertActions({ actions }: { actions: AlertAction[] }) {
 
 function AlertStatusIcon({ status }: { status: AlertStatus }) {
   if (status === "success") {
-    return (
-      <svg aria-hidden="true" className="size-[var(--bh-alert-icon-size)] fill-current" viewBox="0 0 16.6667 16.6667">
-        <path d="M8.33333 16.6667C12.9357 16.6667 16.6667 12.9357 16.6667 8.33333C16.6667 3.73096 12.9357 0 8.33333 0C3.73096 0 0 3.73096 0 8.33333C0 12.9357 3.73096 16.6667 8.33333 16.6667ZM12.8809 6.21426L7.5 11.5952L3.99407 8.08925L5.17259 6.91075L7.5 9.23817L11.7024 5.03574L12.8809 6.21426Z" />
-      </svg>
-    )
+    return <CircleCheckIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth={2.25} />
   }
 
   if (status === "warning") {
-    return (
-      <svg aria-hidden="true" className="size-[var(--bh-alert-icon-size)] fill-current" viewBox="0 0 17.544 15.4168">
-        <path d="M9.49356 0.416809L17.4321 14.1668C17.6623 14.5654 17.5257 15.0751 17.1271 15.3052C17.0005 15.3783 16.8567 15.4168 16.7105 15.4168H0.833333C0.3731 15.4168 0 15.0438 0 14.5835C0 14.4372 0.0385084 14.2935 0.11165 14.1668L8.05022 0.416809C8.28031 0.0182258 8.78997 -0.118333 9.18856 0.111784C9.31522 0.184926 9.42047 0.290126 9.49356 0.416809ZM7.93856 11.2502V12.9168H9.60522V11.2502H7.93856ZM7.93856 5.41681V9.5835H9.60522V5.41681H7.93856Z" />
-      </svg>
-    )
+    return <TriangleAlertIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth={2.25} />
   }
 
   if (status === "info") {
-    return (
-      <svg aria-hidden="true" className="size-[var(--bh-alert-icon-size)] fill-current" viewBox="0 0 16.6667 16.6667">
-        <path d="M8.33333 16.6667C3.73096 16.6667 0 12.9357 0 8.33333C0 3.73096 3.73096 0 8.33333 0C12.9357 0 16.6667 3.73096 16.6667 8.33333C16.6667 12.9357 12.9357 16.6667 8.33333 16.6667ZM8.33333 6.25C9.02367 6.25 9.58333 5.69036 9.58333 5C9.58333 4.30964 9.02367 3.75 8.33333 3.75C7.643 3.75 7.08333 4.30964 7.08333 5C7.08333 5.69036 7.643 6.25 8.33333 6.25ZM10 10.8333H9.16667V7.08333H6.66667V8.75H7.5V10.8333H6.66667V12.5H10V10.8333Z" />
-      </svg>
-    )
+    return <InfoIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth={2.25} />
   }
 
   if (status === "neutral") {
-    return (
-      <svg aria-hidden="true" className="size-[var(--bh-alert-icon-size)] fill-current" viewBox="0 0 15.851 15.0752">
-        <path d="M7.92545 12.0833L3.02726 15.0752L4.35901 9.49217L0 5.75819L5.72128 5.29952L7.92545 0L10.1297 5.29952L15.851 5.75819L11.492 9.49217L12.8237 15.0752L7.92545 12.0833Z" />
-      </svg>
-    )
+    return <StarIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth={2.25} />
   }
 
-  return (
-    <svg aria-hidden="true" className="size-[var(--bh-alert-icon-size)] fill-current" viewBox="0 0 16.6667 16.6667">
-      <path d="M8.33333 16.6667C3.73096 16.6667 0 12.9357 0 8.33333C0 3.73096 3.73096 0 8.33333 0C12.9357 0 16.6667 3.73096 16.6667 8.33333C16.6667 12.9357 12.9357 16.6667 8.33333 16.6667ZM7.5 10.8333V12.5H9.16667V10.8333H7.5ZM7.5 4.16667V9.16667H9.16667V4.16667H7.5Z" />
-    </svg>
-  )
+  return <CircleAlertIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth={2.25} />
 }
 
 function CloseIcon() {
   return (
-    <svg aria-hidden="true" className="size-[var(--bh-alert-icon-size)] fill-current" viewBox="0 0 16 16">
-      <path d="M8.00004 7.05723L11.2999 3.75739L12.2427 4.7002L8.94284 8.00003L12.2427 11.2998L11.2999 12.2427L8.00004 8.94283L4.70021 12.2427L3.75739 11.2998L7.05723 8.00003L3.75739 4.7002L4.70021 3.75739L8.00004 7.05723Z" />
-    </svg>
+    <XIcon aria-hidden="true" className="size-[var(--bh-alert-icon-size)]" strokeWidth={2.25} />
   )
 }
 

package/registry/components/attribute.tsx

@@ -3,9 +3,9 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-type AttributeLayout = "inline" | "end" | "stacked" | "two-column"
+type AttributeLayout = "inline" | "stacked" | "two-column"
 type AttributeDensity = "compact" | "default" | "comfortable"
-type AttributeAlign = "start" | "end" | "stretch"
+type AttributeAlign = "start" | "stretch"
 type AttributeValueDir = "auto" | "ltr" | "rtl"
 
 type AttributeContextValue = {
@@ -70,13 +70,13 @@ const attributeListVariants = cva("grid min-w-0", {
   variants: {
     layout: {
       inline: "grid-cols-1",
-      end: "grid-cols-1",
       stacked: "grid-cols-1",
       "two-column":
         "grid-cols-1 gap-x-[var(--bh-space-6xl-32)] sm:grid-cols-2",
     },
     bordered: {
-      true: "overflow-hidden rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-subtle)]",
+      true:
+        "overflow-hidden rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-subtle)] [&>[data-slot='attribute-item']]:px-[var(--bh-space-3xl-16)] sm:[&>[data-slot='attribute-item']]:px-[var(--bh-space-4xl-20)]",
       false: "",
     },
   },
@@ -91,8 +91,6 @@ const attributeItemVariants = cva("min-w-0", {
     layout: {
       inline:
         "grid grid-cols-1 items-center gap-x-[var(--bh-space-xs-4)] sm:grid-cols-[var(--bh-attribute-label-width)_minmax(0,1fr)]",
-      end:
-        "grid grid-cols-1 items-center gap-x-[var(--bh-space-xs-4)] sm:grid-cols-[var(--bh-attribute-label-width)_minmax(0,1fr)]",
       stacked:
         "flex flex-col items-start justify-center gap-[var(--bh-space-xs-4)]",
       "two-column":
@@ -100,7 +98,7 @@ const attributeItemVariants = cva("min-w-0", {
     },
     density: {
       compact: "py-[var(--bh-space-md-8)]",
-      default: "py-[var(--bh-space-xl-12)] sm:py-[var(--bh-space-3xl-16)]",
+      default: "py-[var(--bh-space-3xl-16)]",
       comfortable: "py-[var(--bh-space-3xl-16)]",
     },
     divided: {
@@ -154,7 +152,6 @@ const attributeValueVariants = cva(
     variants: {
       align: {
         start: "justify-self-start text-start",
-        end: "justify-self-end justify-end text-end rtl:justify-self-start rtl:justify-start rtl:text-right",
         stretch: "w-full justify-self-stretch text-start",
       },
       truncate: {
@@ -323,8 +320,7 @@ const AttributeItem = React.forwardRef<HTMLDivElement, AttributeItemProps>(
     const selectedLayout = layout || context.layout
     const selectedDensity = density || context.density
     const selectedDivided = divided ?? context.dividers
-    const selectedAlign =
-      valueAlign || (selectedLayout === "end" ? "end" : "start")
+    const selectedAlign = valueAlign || "start"
 
     return (
       <div

package/registry/components/avatar.tsx

@@ -119,14 +119,13 @@ function AvatarGroupCount({
   return (
     <span
       data-slot="avatar-group-count"
-      dir={dir}
       className={cn(
         "-ms-[var(--bh-space-md-8)] flex size-[var(--bh-space-7xl-40)] items-center justify-center rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-neutral-subtle)] text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)] ring-[var(--bh-space-xxs-2)] ring-[var(--bh-bg-default)]",
         className
       )}
       {...props}
     >
-      {children}
+      <span dir={dir}>{children}</span>
     </span>
   )
 }

package/registry/components/button-group.tsx

@@ -18,7 +18,7 @@ const buttonGroupContext = React.createContext<ButtonGroupContextValue>({
 })
 
 const buttonGroupVariants = cva(
-  "inline-flex items-center overflow-hidden rounded-[var(--bh-button-group-radius)] bg-[var(--bh-button-group-bg)] text-[var(--bh-button-group-content)] shadow-[var(--shadow-button-group)] [--shadow-button-group:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-button-group-border),var(--shadow-component-default)]",
+  "inline-flex w-fit items-center overflow-hidden rounded-[var(--bh-button-group-radius)] bg-[var(--bh-button-group-bg)] text-[var(--bh-button-group-content)] shadow-[var(--shadow-button-group)] [--shadow-button-group:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-button-group-border),var(--shadow-component-default)]",
   {
     variants: {
       size: {

package/registry/components/card.tsx

@@ -393,7 +393,7 @@ function CardBody({
       </div>
 
       {showFooter ? (
-        <CardFooter>
+        <CardFooter className={horizontal ? "mt-auto" : undefined}>
           {footer ??
             actions ?? (
               <CardActions

package/registry/components/checkbox.tsx

@@ -3,6 +3,7 @@
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { cva, type VariantProps } from "class-variance-authority"
+import { CheckIcon, MinusIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -58,8 +59,18 @@ const Checkbox = React.forwardRef<
         data-slot="checkbox-indicator"
         className="pointer-events-none absolute top-1/2 left-1/2 flex size-[var(--bh-checkbox-icon-size)] -translate-x-1/2 -translate-y-1/2 items-center justify-center text-[var(--bh-content-on-color)] group-data-[disabled]/checkbox:text-[var(--bh-content-disabled)]"
       >
-        <CheckFillIcon className="size-[var(--bh-checkbox-icon-size)] fill-current group-data-[state=indeterminate]/checkbox:hidden" />
-        <span className="hidden h-[var(--bh-checkbox-indeterminate-height)] w-[var(--bh-checkbox-indeterminate-width)] rounded-full bg-current group-data-[state=indeterminate]/checkbox:block" />
+        <CheckIcon
+          aria-hidden="true"
+          className="size-[var(--bh-checkbox-icon-size)] group-data-[state=indeterminate]/checkbox:hidden"
+          focusable="false"
+          strokeWidth={3}
+        />
+        <MinusIcon
+          aria-hidden="true"
+          className="hidden size-[var(--bh-checkbox-icon-size)] group-data-[state=indeterminate]/checkbox:block"
+          focusable="false"
+          strokeWidth={3}
+        />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )
@@ -216,25 +227,17 @@ function CheckboxCardIndicator({
         className="pointer-events-none absolute top-1/2 left-1/2 size-[var(--bh-checkbox-control-size)] -translate-x-1/2 -translate-y-1/2 rounded-[var(--bh-checkbox-control-radius)] bg-[var(--bh-bg-default)] shadow-[var(--shadow-checkbox-control)] [--bh-checkbox-control-border:var(--bh-border-input)] [--shadow-checkbox-control:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-checkbox-control-border,var(--bh-border-input)),var(--shadow-component-default)] data-[state=checked]:[--bh-checkbox-control-border:transparent] data-[state=checked]:bg-[var(--bh-interactive-checkbox-default)] data-[disabled=true]:bg-[var(--bh-bg-disabled)] data-[disabled=true]:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]"
       />
       {checked ? (
-        <CheckFillIcon className="absolute top-1/2 left-1/2 size-[var(--bh-checkbox-icon-size)] -translate-x-1/2 -translate-y-1/2 fill-current text-[var(--bh-content-on-color)]" />
+        <CheckIcon
+          aria-hidden="true"
+          className="absolute top-1/2 left-1/2 size-[var(--bh-checkbox-icon-size)] -translate-x-1/2 -translate-y-1/2 text-[var(--bh-content-on-color)]"
+          focusable="false"
+          strokeWidth={3}
+        />
       ) : null}
     </span>
   )
 }
 
-function CheckFillIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      aria-hidden="true"
-      className={className}
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      <path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z" />
-    </svg>
-  )
-}
-
 export { Checkbox, CheckboxCard, checkboxCardVariants, checkboxVariants }
 export type {
   CheckboxCardControlPosition,

package/registry/components/expanded/ActivityFeed.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { Button } from "@/components/ui/button";
 import "./activityFeed.css";
 
 const defaultAvatarSrc = new URL("../assets/activity-feed-avatar.png", import.meta.url).href;
@@ -85,26 +86,48 @@ function Indicator({
 }
 
 function ActionButton({ action }: { action: ActivityFeedAction }) {
-  const className = classes("ds-activity-feed-item__button", `ds-activity-feed-item__button--${action.variant ?? "secondary"}`);
+  const variant = action.variant === "primary" ? "default" : "outline";
 
   if (action.href) {
     return (
-      <a aria-label={action.ariaLabel} className={className} href={action.href}>
-        {action.label}
-      </a>
+      <Button
+        aria-label={action.ariaLabel}
+        asChild
+        className="ds-activity-feed-item__button"
+        size="sm"
+        variant={variant}
+      >
+        <a
+          aria-disabled={action.disabled || undefined}
+          href={action.disabled ? undefined : action.href}
+          onClick={(event) => {
+            if (action.disabled) {
+              event.preventDefault();
+              return;
+            }
+
+            action.onClick?.();
+          }}
+          tabIndex={action.disabled ? -1 : undefined}
+        >
+          {action.label}
+        </a>
+      </Button>
     );
   }
 
   return (
-    <button
+    <Button
       aria-label={action.ariaLabel}
-      className={className}
+      className="ds-activity-feed-item__button"
       disabled={action.disabled}
       onClick={action.onClick}
+      size="sm"
       type="button"
+      variant={variant}
     >
       {action.label}
-    </button>
+    </Button>
   );
 }
 
@@ -135,17 +158,11 @@ export function ActivityFeedItem({
   const rtl = dir === "rtl";
   const nodeId = rtl ? (type === "caption" ? "587:18720" : "587:18701") : type === "caption" ? "584:18591" : "584:10411";
 
-  const textParts = rtl
-    ? [
-        hasLink && link && <span className="ds-activity-feed-item__link" key="link">{link}</span>,
-        hasSupportText && supportText && <span className="ds-activity-feed-item__support" key="support">{supportText}</span>,
-        label && <strong key="label">{label}</strong>,
-      ]
-    : [
-        label && <strong key="label">{label}</strong>,
-        hasSupportText && supportText && <span className="ds-activity-feed-item__support" key="support">{supportText}</span>,
-        hasLink && link && <span className="ds-activity-feed-item__link" key="link">{link}</span>,
-      ];
+  const textParts = [
+    label && <strong key="label">{label}</strong>,
+    hasSupportText && supportText && <span className="ds-activity-feed-item__support" key="support">{supportText}</span>,
+    hasLink && link && <span className="ds-activity-feed-item__link" key="link">{link}</span>,
+  ];
 
   return (
     <article
@@ -158,14 +175,13 @@ export function ActivityFeedItem({
       data-node-id={nodeId}
       dir={rtl ? "rtl" : "ltr"}
     >
-      {!rtl && <Indicator avatarAlt={avatarAlt} avatarSrc={avatarSrc} rtl={rtl} showLine={showLine} type={type} />}
+      <Indicator avatarAlt={avatarAlt} avatarSrc={avatarSrc} rtl={rtl} showLine={showLine} type={type} />
 
       <div className="ds-activity-feed-item__content">
         <div className="ds-activity-feed-item__container">
           <div className="ds-activity-feed-item__topline">
-            {rtl && hasStatus && <StatusDot />}
             <div className="ds-activity-feed-item__text">{textParts}</div>
-            {!rtl && hasStatus && <StatusDot />}
+            {hasStatus && <StatusDot />}
           </div>
 
           {type === "slot" ? (
@@ -191,8 +207,6 @@ export function ActivityFeedItem({
 
         {showPaddingBottom && <div className="ds-activity-feed-item__bottom-space" aria-hidden="true" />}
       </div>
-
-      {rtl && <Indicator avatarAlt={avatarAlt} avatarSrc={avatarSrc} rtl={rtl} showLine={showLine} type={type} />}
     </article>
   );
 }

package/registry/components/expanded/Banner.tsx

@@ -1,4 +1,9 @@
 import type { ReactNode } from "react";
+import { MegaphoneIcon as LucideMegaphoneIcon, XIcon } from "lucide-react";
+
+import { Button, type ButtonProps } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
 import "./banner.css";
 
 export type BannerType = "slim" | "single-action-inline" | "single-action" | "input";
@@ -30,19 +35,17 @@ export type BannerProps = {
 };
 
 function MegaphoneIcon() {
-  return (
-    <svg aria-hidden="true" className="ds-banner__icon" viewBox="0 0 24 24">
-      <path d="M3 10.5v3a2.5 2.5 0 0 0 2.5 2.5h.63l1.15 3.44A1.5 1.5 0 0 0 8.7 20.5h1.1a1 1 0 0 0 .95-1.32L9.7 16H11l7.24 3.1A1.25 1.25 0 0 0 20 17.95V6.05a1.25 1.25 0 0 0-1.76-1.14L11 8H5.5A2.5 2.5 0 0 0 3 10.5Zm15 6.69-6-2.58V9.39l6-2.58v10.38ZM5 10.5A.5.5 0 0 1 5.5 10H10v4H5.5a.5.5 0 0 1-.5-.5v-3Z" />
-    </svg>
-  );
+  return <LucideMegaphoneIcon aria-hidden="true" className="ds-banner__icon" strokeWidth={2.1} />;
 }
 
 function CloseIcon() {
-  return (
-    <svg aria-hidden="true" className="ds-banner__close-icon" viewBox="0 0 24 24">
-      <path d="m12 10.59 5.3-5.3 1.41 1.42-5.3 5.29 5.3 5.3-1.41 1.41-5.3-5.3-5.29 5.3-1.42-1.41 5.3-5.3-5.3-5.29 1.42-1.42 5.29 5.3Z" />
-    </svg>
-  );
+  return <XIcon aria-hidden="true" className="ds-banner__close-icon" strokeWidth={2.25} />;
+}
+
+function getBannerActionVariant(color: BannerColor): ButtonProps["variant"] {
+  if (color === "brand-light") return "default";
+  if (color === "grey") return "secondary";
+  return "white";
 }
 
 function cx(...classes: Array<string | false | undefined>) {
@@ -75,10 +78,18 @@ export function Banner({
   const isInlineAction = type === "slim" || type === "single-action-inline";
   const inlineActionLabel = type === "single-action-inline" ? actionLabel : linkLabel;
   const hasInlineAction = isInlineAction && (showInlineAction ?? true) && Boolean(inlineActionLabel);
+  const actionVariant = getBannerActionVariant(color);
   const closeButton = (
-    <button className="ds-banner__close" onClick={onClose} type="button" aria-label={closeLabel}>
+    <Button
+      aria-label={closeLabel ?? "Dismiss banner"}
+      className="ds-banner__close"
+      onClick={onClose}
+      size="icon-xs"
+      type="button"
+      variant="ghost"
+    >
       <CloseIcon />
-    </button>
+    </Button>
   );
 
   return (
@@ -110,18 +121,30 @@ export function Banner({
         </div>
 
         {hasInlineAction && (
-          <button className="ds-banner__link" onClick={onAction} type="button">
+          <Button
+            className="ds-banner__link"
+            onClick={onAction}
+            size="sm"
+            type="button"
+            variant={type === "single-action-inline" ? actionVariant : "link"}
+          >
             {inlineActionLabel}
-          </button>
+          </Button>
         )}
       </div>
 
       {type === "single-action" && (
         <div className="ds-banner__tail">
           {actionLabel && (
-            <button className="ds-banner__action" onClick={onAction} type="button">
+            <Button
+              className="ds-banner__action"
+              onClick={onAction}
+              size="sm"
+              type="button"
+              variant={actionVariant}
+            >
               {actionLabel}
-            </button>
+            </Button>
           )}
           {closeButton}
         </div>
@@ -129,11 +152,23 @@ export function Banner({
 
       {type === "input" && (
         <div className="ds-banner__tail ds-banner__tail--input">
-          <input aria-label={inputAriaLabel} className="ds-banner__input" placeholder={inputPlaceholder} type="text" />
+          <Input
+            aria-label={inputAriaLabel}
+            className="ds-banner__input"
+            hasInformationIcon={false}
+            placeholder={inputPlaceholder}
+            size="md"
+          />
           {actionLabel && (
-            <button className="ds-banner__action" onClick={onAction} type="button">
+            <Button
+              className="ds-banner__action"
+              onClick={onAction}
+              size="sm"
+              type="button"
+              variant={actionVariant}
+            >
               {actionLabel}
-            </button>
+            </Button>
           )}
           {closeButton}
         </div>

package/registry/components/expanded/Breadcrumbs.tsx

@@ -1,4 +1,10 @@
 import type { ReactNode } from "react";
+import {
+  ChevronRightIcon,
+  EllipsisIcon,
+  FolderIcon,
+  HomeIcon,
+} from "lucide-react";
 import "./breadcrumbs.css";
 
 export type BreadcrumbSeparator = "slash" | "chevron";
@@ -106,51 +112,17 @@ function Separator({ separator }: { separator: BreadcrumbSeparator }) {
 }
 
 export function BreadcrumbHomeIcon() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 20 20">
-      <path
-        d="M3.5 8.7 10 3.4l6.5 5.3v7.1a.9.9 0 0 1-.9.9h-3.2v-4.9H7.6v4.9H4.4a.9.9 0 0 1-.9-.9V8.7Z"
-        fill="none"
-        stroke="currentColor"
-        strokeLinejoin="round"
-        strokeWidth="1.7"
-      />
-    </svg>
-  );
+  return <HomeIcon aria-hidden="true" strokeWidth={1.9} />;
 }
 
 export function BreadcrumbFolderIcon() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 20 20">
-      <path
-        d="M2.8 5.7c0-.9.7-1.6 1.6-1.6h3.8l1.5 1.8h5.9c.9 0 1.6.7 1.6 1.6v6.8c0 .9-.7 1.6-1.6 1.6H4.4c-.9 0-1.6-.7-1.6-1.6V5.7Z"
-        fill="none"
-        stroke="currentColor"
-        strokeLinejoin="round"
-        strokeWidth="1.7"
-      />
-    </svg>
-  );
+  return <FolderIcon aria-hidden="true" strokeWidth={1.9} />;
 }
 
 function ChevronIcon() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 16 16">
-      <path d="m6 3.5 4 4.5-4 4.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.6" />
-    </svg>
-  );
+  return <ChevronRightIcon aria-hidden="true" strokeWidth={2} />;
 }
 
 function OverflowIcon() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 20 20">
-      <path
-        d="M5.2 10h.1M10 10h.1M14.8 10h.1"
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeWidth="2.4"
-      />
-    </svg>
-  );
+  return <EllipsisIcon aria-hidden="true" strokeWidth={2.25} />;
 }