@fanvue/ui 3.8.0 → 3.10.0

package/dist/components/Dialog/Dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.mjs","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useSuppressClickAfterDrag } from \"../../utils/useSuppressClickAfterDrag\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { ArrowLeftIcon } from \"../Icons/ArrowLeftIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Props for the {@link Dialog} root component. */\nexport interface DialogProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {\n  /** Controlled open state. When provided, you must also supply `onOpenChange`. */\n  open?: boolean;\n  /** Called when the open state changes. Required when `open` is controlled. */\n  onOpenChange?: (open: boolean) => void;\n  /** The open state of the dialog when it is initially rendered (uncontrolled). */\n  defaultOpen?: boolean;\n}\n\n/** Root component that manages open/close state for a dialog. */\nexport const Dialog = DialogPrimitive.Root;\n\n/** Props for the {@link DialogTrigger} component. */\nexport type DialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\n/**\n * The element that opens the dialog when clicked.\n *\n * On touch / pen, a press-and-release that crosses a small movement threshold\n * is treated as a drag and the resulting synthetic click is suppressed —\n * defends against Android Chrome opening the dialog on a scroll-drag-end.\n */\nexport const DialogTrigger = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Trigger>,\n  DialogTriggerProps\n>((props, ref) => <DialogPrimitive.Trigger ref={ref} {...useSuppressClickAfterDrag(props)} />);\nDialogTrigger.displayName = \"DialogTrigger\";\n\n/** Convenience alias for Radix `Dialog.Close`. Closes the dialog when clicked. */\nexport const DialogClose = DialogPrimitive.Close;\n\n/** Props for the {@link DialogClose} component. */\nexport type DialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\n\nexport interface DialogOverlayProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {}\n\n/**\n * Semi-transparent backdrop rendered behind the dialog content.\n * Rendered by {@link DialogContent}; portaled to `document.body` when {@link DialogContent} `portal` is true.\n */\nexport const DialogOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  DialogOverlayProps\n>(({ className, style, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 fixed inset-0 bg-background-overlay-default data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      className,\n    )}\n    style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n    {...props}\n  />\n));\nDialogOverlay.displayName = \"DialogOverlay\";\n\nexport interface DialogContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /**\n   * Width preset for the dialog.\n   * - `\"sm\"` — 400px max-width (confirmations, simple forms)\n   * - `\"md\"` — 440px max-width (default, standard dialogs)\n   * - `\"lg\"` — 600px max-width (complex content, tables)\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** When true, renders overlay automatically. @default true */\n  overlay?: boolean;\n  /**\n   * When true, teleports overlay and panel to `document.body`.\n   * When false, renders inline in the React tree (useful inside theme providers or scoped containers).\n   * @default true\n   */\n  portal?: boolean;\n  /** Show the v2 mobile sheet pull handle. @default true */\n  showMobileHandle?: boolean;\n}\n\nconst SIZE_CLASSES: Record<NonNullable<DialogContentProps[\"size\"]>, string> = {\n  sm: \"sm:max-w-[400px]\",\n  md: \"sm:max-w-[440px]\",\n  lg: \"sm:max-w-[600px]\",\n};\n\n/**\n * The dialog panel. Includes the overlay by default and portals to `document.body` by default.\n *\n * Set `portal={false}` to keep overlay and content in the DOM subtree of the parent `Dialog`.\n * `fixed` positioning still applies; ancestors with `transform` or `overflow` may affect layout.\n *\n * On mobile viewports (<640px), the dialog slides up from the bottom as a sheet\n * with top-only border radius. On larger viewports it renders centered with\n * full border radius.\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button>Open</Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Title</DialogTitle>\n *     </DialogHeader>\n *     <DialogBody>Content here</DialogBody>\n *     <DialogFooter>\n *       <DialogClose asChild>\n *         <Button variant=\"secondary\">Cancel</Button>\n *       </DialogClose>\n *       <Button>Accept</Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nexport const DialogContent = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(\n  (\n    {\n      className,\n      children,\n      size = \"md\",\n      overlay = true,\n      portal = true,\n      showMobileHandle = true,\n      style,\n      onOpenAutoFocus,\n      ...props\n    },\n    ref,\n  ) => {\n    const content = (\n      <>\n        {overlay && <DialogOverlay />}\n        <DialogPrimitive.Content\n          ref={ref}\n          style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n          onOpenAutoFocus={(e) => {\n            if (onOpenAutoFocus) {\n              onOpenAutoFocus(e);\n              return;\n            }\n            e.preventDefault();\n            (e.currentTarget as HTMLElement).focus();\n          }}\n          className={cn(\n            \"fixed flex flex-col overflow-hidden border border-modal-stroke bg-modal-background shadow-blur-menu backdrop-blur-[4px] focus:outline-none\",\n            \"inset-x-0 bottom-0 max-h-[85vh] w-full rounded-t-xl p-4 pt-3\",\n            \"data-[state=open]:fade-in-0 data-[state=open]:animate-in\",\n            \"data-[state=closed]:fade-out-0 data-[state=closed]:animate-out\",\n            \"data-[state=open]:slide-in-from-bottom-full\",\n            \"data-[state=closed]:slide-out-to-bottom-full\",\n            \"sm:inset-auto sm:top-1/2 sm:left-1/2 sm:max-h-[85vh] sm:w-full sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:p-6\",\n            \"sm:data-[state=open]:slide-in-from-bottom-0 sm:data-[state=open]:zoom-in-95\",\n            \"sm:data-[state=closed]:slide-out-to-bottom-0 sm:data-[state=closed]:zoom-out-95\",\n            \"duration-200\",\n            SIZE_CLASSES[size],\n            className,\n          )}\n          {...props}\n        >\n          {showMobileHandle && (\n            <div\n              aria-hidden=\"true\"\n              className=\"mb-3 h-1 w-8 shrink-0 self-center rounded-full bg-icons-tertiary sm:hidden\"\n            />\n          )}\n          {children}\n        </DialogPrimitive.Content>\n      </>\n    );\n\n    return portal ? <DialogPrimitive.Portal>{content}</DialogPrimitive.Portal> : content;\n  },\n);\nDialogContent.displayName = \"DialogContent\";\n\nexport interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Show the close (X) button in the header. @default true */\n  showClose?: boolean;\n  /** Show a back arrow button on the left side. Defaults to `true` when `onBack` is provided. */\n  showBack?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Accessible label for the back button. @default \"Go back\" */\n  backLabel?: string;\n  /** Accessible label for the close button. @default \"Close\" */\n  closeLabel?: string;\n}\n\n/**\n * Header bar for the dialog. Renders the title with an optional back arrow\n * and close button.\n *\n * @example\n * ```tsx\n * <DialogHeader>\n *   <DialogTitle>Settings</DialogTitle>\n * </DialogHeader>\n *\n * <DialogHeader showBack onBack={() => setStep(0)}>\n *   <DialogTitle>Step 2</DialogTitle>\n * </DialogHeader>\n * ```\n */\nexport const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(\n  (\n    {\n      className,\n      children,\n      showClose = true,\n      showBack,\n      onBack,\n      backLabel = \"Go back\",\n      closeLabel = \"Close\",\n      ...props\n    },\n    ref,\n  ) => {\n    const shouldShowBack = showBack ?? !!onBack;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex shrink-0 items-center justify-end gap-4\", className)}\n        {...props}\n      >\n        {shouldShowBack && (\n          <IconButton\n            variant=\"secondary\"\n            size=\"32\"\n            icon={<ArrowLeftIcon size={16} />}\n            onClick={onBack}\n            disabled={!onBack}\n            aria-label={backLabel}\n          />\n        )}\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {showClose && (\n          <DialogPrimitive.Close asChild>\n            <IconButton\n              variant=\"secondary\"\n              size=\"32\"\n              icon={<CloseIcon size={16} />}\n              aria-label={closeLabel}\n            />\n          </DialogPrimitive.Close>\n        )}\n      </div>\n    );\n  },\n);\nDialogHeader.displayName = \"DialogHeader\";\n\n/** Props for the {@link DialogTitle} component. */\nexport type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\n\n/**\n * Accessible title for the dialog. Must be rendered inside {@link DialogHeader}\n * or directly within {@link DialogContent}.\n */\nexport const DialogTitle = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  DialogTitleProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"typography-header-heading-xs text-content-primary\", className)}\n    {...props}\n  />\n));\nDialogTitle.displayName = \"DialogTitle\";\n\n/** Props for the {@link DialogDescription} component. */\nexport type DialogDescriptionProps = React.ComponentPropsWithoutRef<\n  typeof DialogPrimitive.Description\n>;\n\n/** Accessible description for the dialog. Rendered as secondary text. */\nexport const DialogDescription = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  DialogDescriptionProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"typography-body-default-16px-regular text-content-secondary\", className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = \"DialogDescription\";\n\nexport interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Scrollable content area (slot) between the header and footer.\n * Grows to fill available space and scrolls when content overflows.\n */\nexport const DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex-1 overflow-y-auto py-4 sm:py-6\", className)} {...props} />\n  ),\n);\nDialogBody.displayName = \"DialogBody\";\n\nexport interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Footer bar for the dialog. Typically contains action buttons.\n * Children are laid out in a horizontal row with equal flex-basis.\n */\nexport const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"flex shrink-0 items-center gap-2\", \"[&>*]:min-w-0 [&>*]:flex-1\", className)}\n      {...props}\n    />\n  ),\n);\nDialogFooter.displayName = \"DialogFooter\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dialog.mjs","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useSuppressClickAfterDrag } from \"../../utils/useSuppressClickAfterDrag\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { ArrowLeftIcon } from \"../Icons/ArrowLeftIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Props for the {@link Dialog} root component. */\nexport interface DialogProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {\n  /** Controlled open state. When provided, you must also supply `onOpenChange`. */\n  open?: boolean;\n  /** Called when the open state changes. Required when `open` is controlled. */\n  onOpenChange?: (open: boolean) => void;\n  /** The open state of the dialog when it is initially rendered (uncontrolled). */\n  defaultOpen?: boolean;\n}\n\n/** Root component that manages open/close state for a dialog. */\nexport const Dialog = DialogPrimitive.Root;\n\n/** Props for the {@link DialogTrigger} component. */\nexport type DialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\n/**\n * The element that opens the dialog when clicked.\n *\n * On touch / pen, a press-and-release that crosses a small movement threshold\n * is treated as a drag and the resulting synthetic click is suppressed —\n * defends against Android Chrome opening the dialog on a scroll-drag-end.\n */\nexport const DialogTrigger = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Trigger>,\n  DialogTriggerProps\n>((props, ref) => <DialogPrimitive.Trigger ref={ref} {...useSuppressClickAfterDrag(props)} />);\nDialogTrigger.displayName = \"DialogTrigger\";\n\n/** Convenience alias for Radix `Dialog.Close`. Closes the dialog when clicked. */\nexport const DialogClose = DialogPrimitive.Close;\n\n/** Props for the {@link DialogClose} component. */\nexport type DialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\n\nexport interface DialogOverlayProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {}\n\n/**\n * Semi-transparent backdrop rendered behind the dialog content.\n * Rendered by {@link DialogContent}; portaled to `document.body` when {@link DialogContent} `portal` is true.\n */\nexport const DialogOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  DialogOverlayProps\n>(({ className, style, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 fixed inset-0 bg-background-overlay-default data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      className,\n    )}\n    style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n    {...props}\n  />\n));\nDialogOverlay.displayName = \"DialogOverlay\";\n\nexport interface DialogContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /**\n   * Width preset for the dialog.\n   * - `\"sm\"` — 400px max-width (confirmations, simple forms)\n   * - `\"md\"` — 440px max-width (default, standard dialogs)\n   * - `\"lg\"` — 600px max-width (complex content, tables)\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** When true, renders overlay automatically. @default true */\n  overlay?: boolean;\n  /**\n   * When true, teleports overlay and panel to `document.body`.\n   * When false, renders inline in the React tree (useful inside theme providers or scoped containers).\n   * @default true\n   */\n  portal?: boolean;\n  /** Show the v2 mobile sheet pull handle. Only rendered when `mobilePresentation` is `\"sheet\"`. @default true */\n  showMobileHandle?: boolean;\n  /**\n   * How the dialog presents below the `sm` breakpoint.\n   * - `\"sheet\"` — bottom sheet pinned to the viewport bottom edge (default)\n   * - `\"card\"` — centered floating card per the v2-modal confirmation spec:\n   *   16px side margins, 24px padding, 32px radius on all corners, no pull handle\n   *\n   * @default \"sheet\"\n   */\n  mobilePresentation?: \"sheet\" | \"card\";\n}\n\nconst SIZE_CLASSES: Record<NonNullable<DialogContentProps[\"size\"]>, string> = {\n  sm: \"sm:max-w-[400px]\",\n  md: \"sm:max-w-[440px]\",\n  lg: \"sm:max-w-[600px]\",\n};\n\n/**\n * The dialog panel. Includes the overlay by default and portals to `document.body` by default.\n *\n * Set `portal={false}` to keep overlay and content in the DOM subtree of the parent `Dialog`.\n * `fixed` positioning still applies; ancestors with `transform` or `overflow` may affect layout.\n *\n * On mobile viewports (<640px), the dialog slides up from the bottom as a sheet\n * with top-only border radius by default; pass `mobilePresentation=\"card\"` to\n * render a centered floating card instead (used for small confirmation dialogs).\n * On larger viewports it renders centered with full border radius.\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button>Open</Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Title</DialogTitle>\n *     </DialogHeader>\n *     <DialogBody>Content here</DialogBody>\n *     <DialogFooter>\n *       <DialogClose asChild>\n *         <Button variant=\"secondary\">Cancel</Button>\n *       </DialogClose>\n *       <Button>Accept</Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nexport const DialogContent = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(\n  (\n    {\n      className,\n      children,\n      size = \"md\",\n      overlay = true,\n      portal = true,\n      showMobileHandle = true,\n      mobilePresentation = \"sheet\",\n      style,\n      onOpenAutoFocus,\n      ...props\n    },\n    ref,\n  ) => {\n    const content = (\n      <>\n        {overlay && <DialogOverlay />}\n        <DialogPrimitive.Content\n          ref={ref}\n          style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n          onOpenAutoFocus={(e) => {\n            if (onOpenAutoFocus) {\n              onOpenAutoFocus(e);\n              return;\n            }\n            e.preventDefault();\n            (e.currentTarget as HTMLElement).focus();\n          }}\n          className={cn(\n            \"fixed flex flex-col overflow-hidden border border-modal-stroke bg-modal-background shadow-blur-menu backdrop-blur-[4px] focus:outline-none\",\n            \"data-[state=open]:fade-in-0 data-[state=open]:animate-in\",\n            \"data-[state=closed]:fade-out-0 data-[state=closed]:animate-out\",\n            mobilePresentation === \"card\"\n              ? // Floating confirmation card (v2-modal): 16px side margins, vertically centered, 32px radius\n                cn(\n                  \"inset-x-4 top-1/2 max-h-[85vh] -translate-y-1/2 rounded-xl p-6\",\n                  \"data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95\",\n                  \"sm:inset-x-auto\",\n                )\n              : // Bottom sheet pinned to the viewport bottom edge\n                cn(\n                  \"inset-x-0 bottom-0 max-h-[85vh] w-full rounded-t-xl p-4 pt-3\",\n                  \"data-[state=open]:slide-in-from-bottom-full\",\n                  \"data-[state=closed]:slide-out-to-bottom-full\",\n                  \"sm:data-[state=open]:slide-in-from-bottom-0 sm:data-[state=open]:zoom-in-95\",\n                  \"sm:data-[state=closed]:slide-out-to-bottom-0 sm:data-[state=closed]:zoom-out-95\",\n                ),\n            \"sm:inset-auto sm:top-1/2 sm:left-1/2 sm:max-h-[85vh] sm:w-full sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-lg sm:p-6\",\n            \"duration-200\",\n            SIZE_CLASSES[size],\n            className,\n          )}\n          {...props}\n        >\n          {showMobileHandle && mobilePresentation === \"sheet\" && (\n            <div\n              aria-hidden=\"true\"\n              className=\"mb-3 h-1 w-8 shrink-0 self-center rounded-full bg-icons-tertiary sm:hidden\"\n            />\n          )}\n          {children}\n        </DialogPrimitive.Content>\n      </>\n    );\n\n    return portal ? <DialogPrimitive.Portal>{content}</DialogPrimitive.Portal> : content;\n  },\n);\nDialogContent.displayName = \"DialogContent\";\n\nexport interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Show the close (X) button in the header. @default true */\n  showClose?: boolean;\n  /** Show a back arrow button on the left side. Defaults to `true` when `onBack` is provided. */\n  showBack?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Accessible label for the back button. @default \"Go back\" */\n  backLabel?: string;\n  /** Accessible label for the close button. @default \"Close\" */\n  closeLabel?: string;\n}\n\n/**\n * Header bar for the dialog. Renders the title with an optional back arrow\n * and close button.\n *\n * @example\n * ```tsx\n * <DialogHeader>\n *   <DialogTitle>Settings</DialogTitle>\n * </DialogHeader>\n *\n * <DialogHeader showBack onBack={() => setStep(0)}>\n *   <DialogTitle>Step 2</DialogTitle>\n * </DialogHeader>\n * ```\n */\nexport const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(\n  (\n    {\n      className,\n      children,\n      showClose = true,\n      showBack,\n      onBack,\n      backLabel = \"Go back\",\n      closeLabel = \"Close\",\n      ...props\n    },\n    ref,\n  ) => {\n    const shouldShowBack = showBack ?? !!onBack;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex shrink-0 items-center justify-end gap-4\", className)}\n        {...props}\n      >\n        {shouldShowBack && (\n          <IconButton\n            variant=\"secondary\"\n            size=\"32\"\n            icon={<ArrowLeftIcon size={16} />}\n            onClick={onBack}\n            disabled={!onBack}\n            aria-label={backLabel}\n          />\n        )}\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {showClose && (\n          <DialogPrimitive.Close asChild>\n            <IconButton\n              variant=\"secondary\"\n              size=\"32\"\n              icon={<CloseIcon size={16} />}\n              aria-label={closeLabel}\n            />\n          </DialogPrimitive.Close>\n        )}\n      </div>\n    );\n  },\n);\nDialogHeader.displayName = \"DialogHeader\";\n\n/** Props for the {@link DialogTitle} component. */\nexport type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\n\n/**\n * Accessible title for the dialog. Must be rendered inside {@link DialogHeader}\n * or directly within {@link DialogContent}.\n */\nexport const DialogTitle = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  DialogTitleProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"typography-header-heading-xs text-content-primary\", className)}\n    {...props}\n  />\n));\nDialogTitle.displayName = \"DialogTitle\";\n\n/** Props for the {@link DialogDescription} component. */\nexport type DialogDescriptionProps = React.ComponentPropsWithoutRef<\n  typeof DialogPrimitive.Description\n>;\n\n/** Accessible description for the dialog. Rendered as secondary text. */\nexport const DialogDescription = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  DialogDescriptionProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"typography-body-default-16px-regular text-content-secondary\", className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = \"DialogDescription\";\n\nexport interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Scrollable content area (slot) between the header and footer.\n * Grows to fill available space and scrolls when content overflows.\n */\nexport const DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex-1 overflow-y-auto py-4\", className)} {...props} />\n  ),\n);\nDialogBody.displayName = \"DialogBody\";\n\nexport interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Footer bar for the dialog. Typically contains action buttons.\n * Children are laid out in a horizontal row with equal flex-basis.\n */\nexport const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"flex shrink-0 items-center gap-2\", \"[&>*]:min-w-0 [&>*]:flex-1\", className)}\n      {...props}\n    />\n  ),\n);\nDialogFooter.displayName = \"DialogFooter\";\n"],"names":[],"mappings":"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"}

package/dist/components/FanFollowerCount/FanFollowerCount.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { DiamondIcon } from "../Icons/DiamondIcon.mjs";
+import { HeartIcon } from "../Icons/HeartIcon.mjs";
+const compactFormatter = new Intl.NumberFormat("en", {
+  notation: "compact",
+  maximumFractionDigits: 1
+});
+function formatCount(value) {
+  return typeof value === "number" ? compactFormatter.format(value).toLowerCase() : value;
+}
+const FanFollowerCount = React.forwardRef(
+  ({
+    className,
+    fans = 0,
+    subs = 0,
+    showFans = true,
+    showSubs = true,
+    fansLabel = "Fans",
+    subsLabel = "Subs",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("inline-flex items-center gap-3", className), ...props, children: [
+      showFans && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(HeartIcon, { size: 16, filled: true, className: "text-icons-tertiary" }),
+        /* @__PURE__ */ jsxs("span", { className: "typography-body-small-14px-semibold inline-flex items-center gap-1 text-content-primary", children: [
+          /* @__PURE__ */ jsx("span", { children: formatCount(fans) }),
+          /* @__PURE__ */ jsx("span", { children: fansLabel })
+        ] })
+      ] }),
+      showSubs && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(DiamondIcon, { size: 16, filled: true, className: "text-icons-tertiary" }),
+        /* @__PURE__ */ jsxs("span", { className: "typography-body-small-14px-semibold inline-flex items-center gap-1 text-content-primary", children: [
+          /* @__PURE__ */ jsx("span", { children: formatCount(subs) }),
+          /* @__PURE__ */ jsx("span", { children: subsLabel })
+        ] })
+      ] })
+    ] });
+  }
+);
+FanFollowerCount.displayName = "FanFollowerCount";
+export {
+  FanFollowerCount
+};
+//# sourceMappingURL=FanFollowerCount.mjs.map

package/dist/components/FanFollowerCount/FanFollowerCount.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FanFollowerCount.mjs","sources":["../../../src/components/FanFollowerCount/FanFollowerCount.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { DiamondIcon } from \"../Icons/DiamondIcon\";\nimport { HeartIcon } from \"../Icons/HeartIcon\";\n\nconst compactFormatter = new Intl.NumberFormat(\"en\", {\n  notation: \"compact\",\n  maximumFractionDigits: 1,\n});\n\nfunction formatCount(value: number | string): string {\n  return typeof value === \"number\" ? compactFormatter.format(value).toLowerCase() : value;\n}\n\nexport interface FanFollowerCountProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Fan count. Numbers are compacted (e.g. `1200` → `\"1.2k\"`); strings render verbatim. @default 0 */\n  fans?: number | string;\n  /** Subscriber count. Numbers are compacted (e.g. `3000` → `\"3k\"`); strings render verbatim. @default 0 */\n  subs?: number | string;\n  /** Show the fan count group. @default true */\n  showFans?: boolean;\n  /** Show the subscriber count group. @default true */\n  showSubs?: boolean;\n  /** Label rendered after the fan count. @default \"Fans\" */\n  fansLabel?: string;\n  /** Label rendered after the subscriber count. @default \"Subs\" */\n  subsLabel?: string;\n}\n\n/**\n * Displays a creator's formatted fan and subscriber counts, each paired with an\n * icon. Numeric values are compacted (`1200` → `\"1.2k\"`); pass a pre-formatted\n * string to bypass formatting. Either group can be hidden independently.\n *\n * @example\n * ```tsx\n * <FanFollowerCount fans={1200} subs={3000} />\n * ```\n */\nexport const FanFollowerCount = React.forwardRef<HTMLDivElement, FanFollowerCountProps>(\n  (\n    {\n      className,\n      fans = 0,\n      subs = 0,\n      showFans = true,\n      showSubs = true,\n      fansLabel = \"Fans\",\n      subsLabel = \"Subs\",\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div ref={ref} className={cn(\"inline-flex items-center gap-3\", className)} {...props}>\n        {showFans && (\n          <span className=\"inline-flex items-center gap-2\">\n            <HeartIcon size={16} filled className=\"text-icons-tertiary\" />\n            <span className=\"typography-body-small-14px-semibold inline-flex items-center gap-1 text-content-primary\">\n              <span>{formatCount(fans)}</span>\n              <span>{fansLabel}</span>\n            </span>\n          </span>\n        )}\n        {showSubs && (\n          <span className=\"inline-flex items-center gap-2\">\n            <DiamondIcon size={16} filled className=\"text-icons-tertiary\" />\n            <span className=\"typography-body-small-14px-semibold inline-flex items-center gap-1 text-content-primary\">\n              <span>{formatCount(subs)}</span>\n              <span>{subsLabel}</span>\n            </span>\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nFanFollowerCount.displayName = \"FanFollowerCount\";\n"],"names":[],"mappings":";;;;;;AAKA,MAAM,mBAAmB,IAAI,KAAK,aAAa,MAAM;AAAA,EACnD,UAAU;AAAA,EACV,uBAAuB;AACzB,CAAC;AAED,SAAS,YAAY,OAAgC;AACnD,SAAO,OAAO,UAAU,WAAW,iBAAiB,OAAO,KAAK,EAAE,gBAAgB;AACpF;AA2BO,MAAM,mBAAmB,MAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACE,qBAAC,SAAI,KAAU,WAAW,GAAG,kCAAkC,SAAS,GAAI,GAAG,OAC5E,UAAA;AAAA,MAAA,YACC,qBAAC,QAAA,EAAK,WAAU,kCACd,UAAA;AAAA,QAAA,oBAAC,aAAU,MAAM,IAAI,QAAM,MAAC,WAAU,uBAAsB;AAAA,QAC5D,qBAAC,QAAA,EAAK,WAAU,2FACd,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAM,UAAA,YAAY,IAAI,EAAA,CAAE;AAAA,UACzB,oBAAC,UAAM,UAAA,UAAA,CAAU;AAAA,QAAA,EAAA,CACnB;AAAA,MAAA,GACF;AAAA,MAED,YACC,qBAAC,QAAA,EAAK,WAAU,kCACd,UAAA;AAAA,QAAA,oBAAC,eAAY,MAAM,IAAI,QAAM,MAAC,WAAU,uBAAsB;AAAA,QAC9D,qBAAC,QAAA,EAAK,WAAU,2FACd,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAM,UAAA,YAAY,IAAI,EAAA,CAAE;AAAA,UACzB,oBAAC,UAAM,UAAA,UAAA,CAAU;AAAA,QAAA,EAAA,CACnB;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;"}

package/dist/components/IconButton/IconButton.mjs

@@ -17,7 +17,7 @@ const iconButtonVariants = {
 };
 const iconSizeVariants = {
   24: "[&>svg]:size-4",
-  32: "[&>svg]:size-5",
+  32: "[&>svg]:size-4",
   40: "[&>svg]:size-6",
   52: "[&>svg]:size-7",
   72: "[&>svg]:size-8"

package/dist/components/IconButton/IconButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.mjs","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Count, type CountSize } from \"../Count/Count\";\n\nconst iconButtonVariants = {\n  primary:\n    \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-primary-hover not-disabled:active:bg-buttons-primary-hover disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  secondary:\n    \"bg-neutral-alphas-50 text-icons-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiary:\n    \"bg-transparent text-content-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  brand:\n    \"bg-content-always-black text-brand-primary-default hover:bg-brand-primary-default hover:text-content-always-black not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  contrast:\n    \"bg-transparent text-content-always-white hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  messaging:\n    \"bg-content-always-black text-brand-primary-default hover:bg-brand-primary-default hover:text-content-always-black not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  navTray:\n    \"bg-transparent text-content-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiaryDestructive:\n    \"bg-transparent text-error-content hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  stop: \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-brand-default hover:text-content-always-black not-disabled:active:bg-buttons-brand-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  microphone:\n    \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-brand-default hover:text-content-always-black not-disabled:active:bg-buttons-brand-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n};\n\nconst iconSizeVariants = {\n  24: \"[&>svg]:size-4\",\n  32: \"[&>svg]:size-5\",\n  40: \"[&>svg]:size-6\",\n  52: \"[&>svg]:size-7\",\n  72: \"[&>svg]:size-8\",\n} as const;\n\nconst sizeVariants = {\n  24: \"size-6 p-1\",\n  32: \"size-8 p-1.5\",\n  40: \"size-10 p-[10px]\",\n  52: \"size-[52px] p-2\",\n  72: \"size-[72px] p-4\",\n} as const;\n\nconst countSizeMap: Record<string, CountSize> = {\n  24: \"16\",\n  32: \"24\",\n  40: \"32\",\n  52: \"32\",\n  72: \"32\",\n};\n\n/** Visual style variant of the icon button. */\nexport type IconButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"brand\"\n  | \"contrast\"\n  | \"messaging\"\n  | \"navTray\"\n  | \"tertiaryDestructive\"\n  | \"stop\"\n  | \"microphone\";\n\n/** Icon button size in pixels. */\nexport type IconButtonSize = \"24\" | \"32\" | \"40\" | \"52\" | \"72\";\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the icon button. @default \"primary\" */\n  variant?: IconButtonVariant;\n  /** Size of the button in pixels. @default \"40\" */\n  size?: IconButtonSize;\n  /** Icon element to render inside the button. */\n  icon: React.ReactNode;\n  /** When provided, displays a {@link Count} badge at the top-right corner (tertiary & navTray variants only). */\n  counterValue?: number;\n}\n\n/**\n * A circular button containing only an icon. Use when an action can be\n * represented by an icon alone (e.g. close, send, mic). Pair with an\n * `aria-label` for accessibility.\n *\n * @example\n * ```tsx\n * <IconButton icon={<CloseIcon />} aria-label=\"Close\" variant=\"tertiary\" />\n * ```\n */\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    { className, variant = \"primary\", size = \"40\", icon, counterValue, disabled = false, ...props },\n    ref,\n  ) => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (!props[\"aria-label\"] && !props[\"aria-labelledby\"] && !props.title) {\n        console.warn(\n          \"IconButton: No accessible name provided. Add an `aria-label`, `aria-labelledby`, or `title` prop so screen readers can announce this button.\",\n        );\n      }\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-testid=\"icon-button\"\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"relative inline-flex shrink-0 items-center justify-center focus-visible:outline-none\",\n          \"cursor-pointer rounded-full transition-all duration-150 ease-in-out disabled:cursor-default\",\n          // Size variants\n          sizeVariants[size],\n          // Variant styles\n          iconButtonVariants[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeVariants[size])}\n          aria-hidden=\"true\"\n        >\n          {icon}\n        </span>\n\n        {counterValue !== undefined && (\n          <Count\n            value={counterValue}\n            variant=\"alert\"\n            size={countSizeMap[size]}\n            className=\"absolute -top-0.5 -right-0.5\"\n          />\n        )}\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n"],"names":[],"mappings":";;;;;AAIA,MAAM,qBAAqB;AAAA,EACzB,SACE;AAAA,EACF,WACE;AAAA,EACF,UACE;AAAA,EACF,OACE;AAAA,EACF,UACE;AAAA,EACF,WACE;AAAA,EACF,SACE;AAAA,EACF,qBACE;AAAA,EACF,MAAM;AAAA,EACN,YACE;AACJ;AAEA,MAAM,mBAAmB;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuCO,MAAM,aAAa,MAAM;AAAA,EAC9B,CACE,EAAE,WAAW,UAAU,WAAW,OAAO,MAAM,MAAM,cAAc,WAAW,OAAO,GAAG,MAAA,GACxF,QACG;AACH,QAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAI,CAAC,MAAM,YAAY,KAAK,CAAC,MAAM,iBAAiB,KAAK,CAAC,MAAM,OAAO;AACrE,gBAAQ;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ;AAAA,QACA,WAAW;AAAA;AAAA,UAET;AAAA,UACA;AAAA;AAAA,UAEA,aAAa,IAAI;AAAA;AAAA,UAEjB,mBAAmB,OAAO;AAAA;AAAA,UAE1B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,6CAA6C,iBAAiB,IAAI,CAAC;AAAA,cACjF,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,iBAAiB,UAChB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,SAAQ;AAAA,cACR,MAAM,aAAa,IAAI;AAAA,cACvB,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,WAAW,cAAc;"}
+{"version":3,"file":"IconButton.mjs","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Count, type CountSize } from \"../Count/Count\";\n\nconst iconButtonVariants = {\n  primary:\n    \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-primary-hover not-disabled:active:bg-buttons-primary-hover disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  secondary:\n    \"bg-neutral-alphas-50 text-icons-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiary:\n    \"bg-transparent text-content-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  brand:\n    \"bg-content-always-black text-brand-primary-default hover:bg-brand-primary-default hover:text-content-always-black not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  contrast:\n    \"bg-transparent text-content-always-white hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  messaging:\n    \"bg-content-always-black text-brand-primary-default hover:bg-brand-primary-default hover:text-content-always-black not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  navTray:\n    \"bg-transparent text-content-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiaryDestructive:\n    \"bg-transparent text-error-content hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  stop: \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-brand-default hover:text-content-always-black not-disabled:active:bg-buttons-brand-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  microphone:\n    \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-brand-default hover:text-content-always-black not-disabled:active:bg-buttons-brand-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n};\n\nconst iconSizeVariants = {\n  24: \"[&>svg]:size-4\",\n  32: \"[&>svg]:size-4\",\n  40: \"[&>svg]:size-6\",\n  52: \"[&>svg]:size-7\",\n  72: \"[&>svg]:size-8\",\n} as const;\n\nconst sizeVariants = {\n  24: \"size-6 p-1\",\n  32: \"size-8 p-1.5\",\n  40: \"size-10 p-[10px]\",\n  52: \"size-[52px] p-2\",\n  72: \"size-[72px] p-4\",\n} as const;\n\nconst countSizeMap: Record<string, CountSize> = {\n  24: \"16\",\n  32: \"24\",\n  40: \"32\",\n  52: \"32\",\n  72: \"32\",\n};\n\n/** Visual style variant of the icon button. */\nexport type IconButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"brand\"\n  | \"contrast\"\n  | \"messaging\"\n  | \"navTray\"\n  | \"tertiaryDestructive\"\n  | \"stop\"\n  | \"microphone\";\n\n/** Icon button size in pixels. */\nexport type IconButtonSize = \"24\" | \"32\" | \"40\" | \"52\" | \"72\";\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the icon button. @default \"primary\" */\n  variant?: IconButtonVariant;\n  /** Size of the button in pixels. @default \"40\" */\n  size?: IconButtonSize;\n  /** Icon element to render inside the button. */\n  icon: React.ReactNode;\n  /** When provided, displays a {@link Count} badge at the top-right corner (tertiary & navTray variants only). */\n  counterValue?: number;\n}\n\n/**\n * A circular button containing only an icon. Use when an action can be\n * represented by an icon alone (e.g. close, send, mic). Pair with an\n * `aria-label` for accessibility.\n *\n * @example\n * ```tsx\n * <IconButton icon={<CloseIcon />} aria-label=\"Close\" variant=\"tertiary\" />\n * ```\n */\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    { className, variant = \"primary\", size = \"40\", icon, counterValue, disabled = false, ...props },\n    ref,\n  ) => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (!props[\"aria-label\"] && !props[\"aria-labelledby\"] && !props.title) {\n        console.warn(\n          \"IconButton: No accessible name provided. Add an `aria-label`, `aria-labelledby`, or `title` prop so screen readers can announce this button.\",\n        );\n      }\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-testid=\"icon-button\"\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"relative inline-flex shrink-0 items-center justify-center focus-visible:outline-none\",\n          \"cursor-pointer rounded-full transition-all duration-150 ease-in-out disabled:cursor-default\",\n          // Size variants\n          sizeVariants[size],\n          // Variant styles\n          iconButtonVariants[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeVariants[size])}\n          aria-hidden=\"true\"\n        >\n          {icon}\n        </span>\n\n        {counterValue !== undefined && (\n          <Count\n            value={counterValue}\n            variant=\"alert\"\n            size={countSizeMap[size]}\n            className=\"absolute -top-0.5 -right-0.5\"\n          />\n        )}\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n"],"names":[],"mappings":";;;;;AAIA,MAAM,qBAAqB;AAAA,EACzB,SACE;AAAA,EACF,WACE;AAAA,EACF,UACE;AAAA,EACF,OACE;AAAA,EACF,UACE;AAAA,EACF,WACE;AAAA,EACF,SACE;AAAA,EACF,qBACE;AAAA,EACF,MAAM;AAAA,EACN,YACE;AACJ;AAEA,MAAM,mBAAmB;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuCO,MAAM,aAAa,MAAM;AAAA,EAC9B,CACE,EAAE,WAAW,UAAU,WAAW,OAAO,MAAM,MAAM,cAAc,WAAW,OAAO,GAAG,MAAA,GACxF,QACG;AACH,QAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAI,CAAC,MAAM,YAAY,KAAK,CAAC,MAAM,iBAAiB,KAAK,CAAC,MAAM,OAAO;AACrE,gBAAQ;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ;AAAA,QACA,WAAW;AAAA;AAAA,UAET;AAAA,UACA;AAAA;AAAA,UAEA,aAAa,IAAI;AAAA;AAAA,UAEjB,mBAAmB,OAAO;AAAA;AAAA,UAE1B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,6CAA6C,iBAAiB,IAAI,CAAC;AAAA,cACjF,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,iBAAiB,UAChB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,SAAQ;AAAA,cACR,MAAM,aAAa,IAAI;AAAA,cACvB,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,WAAW,cAAc;"}

package/dist/components/Icons/CogIcon.mjs

@@ -0,0 +1,57 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { BaseIcon } from "./BaseIcon.mjs";
+const VARIANTS = {
+  16: {
+    outlined: [
+      {
+        d: "M7.168 9.748c-.66 0-1.32-.253-1.826-.753a2.587 2.587 0 0 1 0-3.653 2.587 2.587 0 0 1 3.653 0 2.587 2.587 0 0 1 0 3.653 2.57 2.57 0 0 1-1.827.753m0-4.166a1.58 1.58 0 0 0-1.12.46 1.594 1.594 0 0 0 0 2.24c.62.613 1.62.613 2.24 0a1.581 1.581 0 0 0-1.12-2.7"
+      },
+      {
+        d: "M9.188 14.335c-.413 0-.82-.16-1.126-.467l-.494-.493a.594.594 0 0 0-.826-.007l-.507.48a1.59 1.59 0 0 1-1.6.36l-.487-.16a1.58 1.58 0 0 1-1.086-1.507v-.7a.58.58 0 0 0-.58-.586l-.7-.014a1.58 1.58 0 0 1-1.387-.88l-.227-.46a1.58 1.58 0 0 1 .3-1.833l.494-.493a.594.594 0 0 0 .006-.827l-.486-.506a1.58 1.58 0 0 1-.36-1.607l.16-.487c.22-.653.82-1.086 1.506-1.086h.7a.58.58 0 0 0 .587-.58l.013-.7a1.58 1.58 0 0 1 .88-1.387l.46-.227a1.58 1.58 0 0 1 1.834.3l.493.494a.594.594 0 0 0 .827.006l.506-.486a1.6 1.6 0 0 1 1.607-.36l.487.16a1.59 1.59 0 0 1 1.086 1.506v.7c0 .327.254.587.58.594l.7.013a1.57 1.57 0 0 1 1.387.88l.227.46a1.58 1.58 0 0 1-.3 1.833l-.494.494a.594.594 0 0 0-.006.826l.486.507c.407.427.547 1.04.36 1.6l-.16.486a1.58 1.58 0 0 1-1.506 1.087h-.7a.58.58 0 0 0-.587.58l-.013.7a1.57 1.57 0 0 1-.88 1.387l-.46.226a1.6 1.6 0 0 1-.714.167zm-2.033-2.127c.407 0 .82.153 1.127.46l.493.494a.59.59 0 0 0 .68.113l.46-.227c.193-.1.32-.293.327-.513l.013-.7c.02-.86.733-1.554 1.587-1.554h.7c.253 0 .48-.16.56-.406l.16-.487a.59.59 0 0 0-.134-.593l-.486-.507c-.594-.62-.58-1.62.026-2.226l.494-.494a.59.59 0 0 0 .113-.68l-.227-.46a.6.6 0 0 0-.513-.326l-.7-.014a1.6 1.6 0 0 1-1.553-1.593v-.7c0-.253-.16-.48-.407-.56l-.487-.16a.59.59 0 0 0-.593.133l-.507.48c-.62.594-1.62.58-2.226-.026l-.494-.494a.59.59 0 0 0-.68-.113l-.46.227a.6.6 0 0 0-.326.513l-.014.7a1.597 1.597 0 0 1-1.586 1.553h-.7c-.254 0-.48.16-.56.407l-.16.487a.59.59 0 0 0 .133.593l.487.507c.593.62.58 1.62-.027 2.226l-.493.494a.59.59 0 0 0-.114.68l.227.46c.1.193.293.32.513.326l.7.014c.86.02 1.554.733 1.554 1.586v.7c0 .253.16.48.406.56l.487.16c.207.067.44.02.593-.133l.507-.48c.307-.293.7-.44 1.1-.44z"
+      }
+    ],
+    filled: [
+      {
+        d: "M12.52 7.433a1.095 1.095 0 0 1 .013-1.526l.494-.494c.333-.333.413-.84.206-1.26l-.226-.46a1.09 1.09 0 0 0-.954-.6l-.7-.013a1.093 1.093 0 0 1-1.066-1.093v-.7c0-.467-.3-.887-.747-1.034l-.487-.16a1.1 1.1 0 0 0-1.1.247l-.506.487c-.427.413-1.107.4-1.527-.014L5.427.32a1.1 1.1 0 0 0-1.26-.207l-.46.227c-.36.18-.594.547-.607.953l-.013.7A1.093 1.093 0 0 1 1.993 3.06h-.7c-.466 0-.886.3-1.033.747l-.16.486c-.127.38-.033.807.247 1.1l.48.507c.413.427.4 1.107-.014 1.527L.32 7.92c-.333.333-.413.84-.207 1.26l.227.46c.18.36.547.593.953.6l.7.013a1.09 1.09 0 0 1 1.067 1.094v.7c0 .466.3.886.747 1.033l.486.16c.387.127.807.033 1.1-.247l.507-.486a1.095 1.095 0 0 1 1.527.02l.493.493c.333.333.84.413 1.26.207L9.64 13c.36-.18.593-.547.6-.953l.013-.7a1.09 1.09 0 0 1 1.094-1.067h.7c.466 0 .886-.3 1.033-.747l.16-.486a1.09 1.09 0 0 0-.247-1.1l-.486-.507zm-4.367.707a2.084 2.084 0 1 1-2.946-2.949A2.084 2.084 0 0 1 8.153 8.14"
+      }
+    ]
+  },
+  24: {
+    outlined: [
+      {
+        d: "M10.752 14.622c-.99 0-1.98-.38-2.74-1.13a3.88 3.88 0 0 1 0-5.48 3.88 3.88 0 0 1 5.48 0 3.88 3.88 0 0 1 0 5.48c-.76.76-1.75 1.13-2.74 1.13m0-6.25c-.61 0-1.22.23-1.68.69a2.39 2.39 0 0 0 0 3.36c.93.92 2.43.92 3.36 0a2.372 2.372 0 0 0-1.68-4.05"
+      },
+      {
+        d: "M13.782 21.502c-.62 0-1.23-.24-1.69-.7l-.74-.74a.89.89 0 0 0-1.24-.01l-.76.72c-.64.61-1.56.82-2.4.54l-.73-.24a2.375 2.375 0 0 1-1.63-2.26v-1.05c0-.49-.38-.88-.87-.88l-1.05-.02c-.89-.02-1.68-.52-2.08-1.32l-.34-.69c-.46-.92-.28-2.03.45-2.75l.74-.74a.89.89 0 0 0 .01-1.24l-.73-.76c-.62-.64-.82-1.56-.54-2.41l.24-.73c.33-.98 1.23-1.63 2.26-1.63h1.05c.49 0 .88-.38.88-.87l.02-1.05c.02-.89.53-1.69 1.32-2.08l.69-.34c.92-.46 2.03-.28 2.75.45l.74.74c.34.34.89.34 1.24.01l.76-.73c.64-.61 1.56-.82 2.41-.54l.73.24c.98.33 1.63 1.24 1.63 2.26v1.05c0 .49.38.88.87.89l1.05.02c.89.02 1.69.52 2.08 1.32l.34.69c.46.92.28 2.03-.45 2.75l-.74.74a.89.89 0 0 0-.01 1.24l.73.76c.61.64.82 1.56.54 2.4l-.24.73c-.33.98-1.23 1.63-2.26 1.63h-1.05c-.49 0-.88.38-.88.87l-.02 1.05c-.02.89-.52 1.69-1.32 2.08l-.69.34c-.34.17-.71.25-1.07.25zm-3.05-3.19c.61 0 1.23.23 1.69.69l.74.74c.27.27.68.34 1.02.17l.69-.34c.29-.15.48-.44.49-.77l.02-1.05c.03-1.29 1.1-2.33 2.38-2.33h1.05c.38 0 .72-.24.84-.61l.24-.73c.1-.31.03-.65-.2-.89l-.73-.76c-.89-.93-.87-2.43.04-3.34l.74-.74c.27-.27.34-.68.17-1.02l-.34-.69a.9.9 0 0 0-.77-.49l-1.05-.02a2.4 2.4 0 0 1-2.33-2.39v-1.05a.88.88 0 0 0-.61-.84l-.73-.24a.89.89 0 0 0-.89.2l-.76.72c-.93.89-2.43.87-3.34-.04l-.74-.74a.88.88 0 0 0-1.02-.17l-.69.34c-.29.15-.48.44-.49.77l-.02 1.05a2.395 2.395 0 0 1-2.38 2.33h-1.05a.88.88 0 0 0-.84.61l-.24.73c-.1.31-.03.66.2.89l.73.76c.89.93.87 2.43-.04 3.34l-.74.74c-.27.27-.34.68-.17 1.02l.34.69c.15.29.44.48.77.49l1.05.02c1.29.03 2.33 1.1 2.33 2.38v1.05c0 .38.24.72.61.84l.73.24c.31.1.66.03.89-.2l.76-.72c.46-.44 1.05-.66 1.65-.66z"
+      }
+    ],
+    filled: [
+      {
+        d: "M18.78 11.15c-.62-.64-.6-1.66.02-2.29l.74-.74c.5-.5.62-1.26.31-1.89l-.34-.69a1.63 1.63 0 0 0-1.43-.9l-1.05-.02a1.64 1.64 0 0 1-1.6-1.64V1.93c0-.7-.45-1.33-1.12-1.55l-.73-.24a1.64 1.64 0 0 0-1.65.37l-.76.73c-.64.62-1.66.6-2.29-.02L8.14.48c-.5-.5-1.26-.62-1.89-.31l-.69.34c-.54.27-.89.82-.91 1.43l-.02 1.05c-.02.89-.75 1.6-1.64 1.6H1.94c-.7 0-1.33.45-1.55 1.12l-.24.73c-.19.57-.05 1.21.37 1.65l.72.76c.62.64.6 1.66-.02 2.29l-.74.74c-.5.5-.62 1.26-.31 1.89l.34.69c.27.54.82.89 1.43.9l1.05.02c.89.02 1.6.74 1.6 1.64v1.05c0 .7.45 1.33 1.12 1.55l.73.24c.58.19 1.21.05 1.65-.37l.76-.73c.64-.61 1.66-.6 2.29.03l.74.74c.5.5 1.26.62 1.89.31l.69-.34c.54-.27.89-.82.9-1.43l.02-1.05c.02-.89.74-1.6 1.64-1.6h1.05c.7 0 1.33-.45 1.55-1.12l.24-.73c.19-.58.05-1.21-.37-1.65l-.73-.76zm-6.55 1.06a3.126 3.126 0 0 1-4.42-4.42 3.126 3.126 0 0 1 4.42 4.42"
+      }
+    ]
+  },
+  32: {
+    outlined: [
+      {
+        d: "M14.336 19.496a5.2 5.2 0 0 1-3.653-1.506 5.174 5.174 0 0 1 0-7.307 5.174 5.174 0 0 1 7.307 0 5.174 5.174 0 0 1 0 7.307 5.14 5.14 0 0 1-3.654 1.506m0-8.333c-.813 0-1.626.307-2.24.92a3.187 3.187 0 0 0 0 4.48 3.187 3.187 0 0 0 4.48 0 3.158 3.158 0 0 0-2.24-5.4"
+      },
+      {
+        d: "M18.377 28.67a3.18 3.18 0 0 1-2.254-.934l-.987-.986a1.187 1.187 0 0 0-1.653-.014l-1.013.96a3.18 3.18 0 0 1-3.2.72l-.974-.32a3.17 3.17 0 0 1-2.173-3.013v-1.4c0-.653-.507-1.173-1.16-1.173l-1.4-.027a3.16 3.16 0 0 1-2.773-1.76l-.454-.92a3.16 3.16 0 0 1 .6-3.667l.987-.986a1.19 1.19 0 0 0 .013-1.654l-.973-1.013a3.17 3.17 0 0 1-.72-3.213l.32-.974a3.17 3.17 0 0 1 3.013-2.173h1.4c.654 0 1.174-.507 1.174-1.16l.026-1.4A3.17 3.17 0 0 1 7.936.79l.92-.454a3.16 3.16 0 0 1 3.667.6l.987.987a1.187 1.187 0 0 0 1.653.013l1.014-.973a3.19 3.19 0 0 1 3.213-.72l.973.32a3.18 3.18 0 0 1 2.174 3.013v1.4c0 .654.506 1.174 1.16 1.187l1.4.027a3.14 3.14 0 0 1 2.773 1.76l.453.92a3.16 3.16 0 0 1-.6 3.666l-.986.987a1.187 1.187 0 0 0-.014 1.653l.974 1.014a3.18 3.18 0 0 1 .72 3.2l-.32.973a3.17 3.17 0 0 1-3.014 2.173h-1.4c-.653 0-1.173.507-1.173 1.16l-.027 1.4a3.14 3.14 0 0 1-1.76 2.774l-.92.453a3.2 3.2 0 0 1-1.427.333zm-4.067-4.254c.813 0 1.64.307 2.253.92l.987.987c.36.36.906.453 1.36.227l.92-.454c.387-.2.64-.586.653-1.026l.027-1.4a3.194 3.194 0 0 1 3.173-3.107h1.4c.507 0 .96-.32 1.12-.813l.32-.974a1.18 1.18 0 0 0-.267-1.186l-.973-1.014c-1.187-1.24-1.16-3.24.053-4.453l.987-.987c.36-.36.453-.906.227-1.36l-.454-.92c-.2-.386-.586-.64-1.026-.653l-1.4-.027a3.197 3.197 0 0 1-3.107-3.186v-1.4c0-.507-.32-.96-.813-1.12l-.974-.32a1.18 1.18 0 0 0-1.186.266l-1.014.96c-1.24 1.187-3.24 1.16-4.453-.053l-.987-.987a1.18 1.18 0 0 0-1.36-.226l-.92.453c-.386.2-.64.587-.653 1.027l-.027 1.4a3.194 3.194 0 0 1-3.173 3.106h-1.4c-.507 0-.96.32-1.12.814l-.32.973c-.133.413-.04.88.267 1.187l.973 1.013c1.187 1.24 1.16 3.24-.053 4.453l-.987.987a1.18 1.18 0 0 0-.227 1.36l.454.92c.2.387.586.64 1.026.653l1.4.027a3.194 3.194 0 0 1 3.107 3.173v1.4c0 .507.32.96.813 1.12l.974.32c.413.134.88.04 1.186-.266l1.014-.96a3.16 3.16 0 0 1 2.2-.88z"
+      }
+    ],
+    filled: [
+      {
+        d: "M25.04 14.867c-.827-.854-.8-2.214.027-3.054l.986-.986c.667-.667.827-1.68.414-2.52l-.454-.92a2.17 2.17 0 0 0-1.906-1.2l-1.4-.027a2.186 2.186 0 0 1-2.134-2.187v-1.4c0-.933-.6-1.773-1.493-2.066l-.973-.32a2.19 2.19 0 0 0-2.2.493l-1.014.973c-.853.827-2.213.8-3.053-.026L10.853.64a2.19 2.19 0 0 0-2.52-.413l-.92.453A2.21 2.21 0 0 0 6.2 2.587l-.027 1.4A2.186 2.186 0 0 1 3.987 6.12h-1.4c-.934 0-1.774.6-2.067 1.493l-.32.974a2.2 2.2 0 0 0 .493 2.2l.96 1.013c.827.853.8 2.213-.026 3.053l-.987.987a2.19 2.19 0 0 0-.413 2.52l.453.92a2.17 2.17 0 0 0 1.907 1.2l1.4.027a2.177 2.177 0 0 1 2.133 2.186v1.4c0 .934.6 1.774 1.493 2.067l.974.32a2.19 2.19 0 0 0 2.2-.493l1.013-.974a2.19 2.19 0 0 1 3.053.04l.987.987a2.19 2.19 0 0 0 2.52.413l.92-.453a2.17 2.17 0 0 0 1.2-1.907l.027-1.4a2.177 2.177 0 0 1 2.186-2.133h1.4c.934 0 1.774-.6 2.067-1.493l.32-.974a2.19 2.19 0 0 0-.493-2.2l-.974-1.013zm-8.733 1.413a4.168 4.168 0 0 1-5.894-5.893 4.17 4.17 0 0 1 5.894 0 4.17 4.17 0 0 1 0 5.893"
+      }
+    ]
+  }
+};
+const CogIcon = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(BaseIcon, { ref, variants: VARIANTS, ...props }));
+CogIcon.displayName = "CogIcon";
+export {
+  CogIcon
+};
+//# sourceMappingURL=CogIcon.mjs.map

package/dist/components/Icons/CogIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CogIcon.mjs","sources":["../../../src/components/Icons/CogIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseIcon } from \"./BaseIcon\";\nimport type { BaseIconProps, IconVariants } from \"./types\";\n\nconst VARIANTS: IconVariants = {\n  16: {\n    outlined: [\n      {\n        d: \"M7.168 9.748c-.66 0-1.32-.253-1.826-.753a2.587 2.587 0 0 1 0-3.653 2.587 2.587 0 0 1 3.653 0 2.587 2.587 0 0 1 0 3.653 2.57 2.57 0 0 1-1.827.753m0-4.166a1.58 1.58 0 0 0-1.12.46 1.594 1.594 0 0 0 0 2.24c.62.613 1.62.613 2.24 0a1.581 1.581 0 0 0-1.12-2.7\",\n      },\n      {\n        d: \"M9.188 14.335c-.413 0-.82-.16-1.126-.467l-.494-.493a.594.594 0 0 0-.826-.007l-.507.48a1.59 1.59 0 0 1-1.6.36l-.487-.16a1.58 1.58 0 0 1-1.086-1.507v-.7a.58.58 0 0 0-.58-.586l-.7-.014a1.58 1.58 0 0 1-1.387-.88l-.227-.46a1.58 1.58 0 0 1 .3-1.833l.494-.493a.594.594 0 0 0 .006-.827l-.486-.506a1.58 1.58 0 0 1-.36-1.607l.16-.487c.22-.653.82-1.086 1.506-1.086h.7a.58.58 0 0 0 .587-.58l.013-.7a1.58 1.58 0 0 1 .88-1.387l.46-.227a1.58 1.58 0 0 1 1.834.3l.493.494a.594.594 0 0 0 .827.006l.506-.486a1.6 1.6 0 0 1 1.607-.36l.487.16a1.59 1.59 0 0 1 1.086 1.506v.7c0 .327.254.587.58.594l.7.013a1.57 1.57 0 0 1 1.387.88l.227.46a1.58 1.58 0 0 1-.3 1.833l-.494.494a.594.594 0 0 0-.006.826l.486.507c.407.427.547 1.04.36 1.6l-.16.486a1.58 1.58 0 0 1-1.506 1.087h-.7a.58.58 0 0 0-.587.58l-.013.7a1.57 1.57 0 0 1-.88 1.387l-.46.226a1.6 1.6 0 0 1-.714.167zm-2.033-2.127c.407 0 .82.153 1.127.46l.493.494a.59.59 0 0 0 .68.113l.46-.227c.193-.1.32-.293.327-.513l.013-.7c.02-.86.733-1.554 1.587-1.554h.7c.253 0 .48-.16.56-.406l.16-.487a.59.59 0 0 0-.134-.593l-.486-.507c-.594-.62-.58-1.62.026-2.226l.494-.494a.59.59 0 0 0 .113-.68l-.227-.46a.6.6 0 0 0-.513-.326l-.7-.014a1.6 1.6 0 0 1-1.553-1.593v-.7c0-.253-.16-.48-.407-.56l-.487-.16a.59.59 0 0 0-.593.133l-.507.48c-.62.594-1.62.58-2.226-.026l-.494-.494a.59.59 0 0 0-.68-.113l-.46.227a.6.6 0 0 0-.326.513l-.014.7a1.597 1.597 0 0 1-1.586 1.553h-.7c-.254 0-.48.16-.56.407l-.16.487a.59.59 0 0 0 .133.593l.487.507c.593.62.58 1.62-.027 2.226l-.493.494a.59.59 0 0 0-.114.68l.227.46c.1.193.293.32.513.326l.7.014c.86.02 1.554.733 1.554 1.586v.7c0 .253.16.48.406.56l.487.16c.207.067.44.02.593-.133l.507-.48c.307-.293.7-.44 1.1-.44z\",\n      },\n    ],\n    filled: [\n      {\n        d: \"M12.52 7.433a1.095 1.095 0 0 1 .013-1.526l.494-.494c.333-.333.413-.84.206-1.26l-.226-.46a1.09 1.09 0 0 0-.954-.6l-.7-.013a1.093 1.093 0 0 1-1.066-1.093v-.7c0-.467-.3-.887-.747-1.034l-.487-.16a1.1 1.1 0 0 0-1.1.247l-.506.487c-.427.413-1.107.4-1.527-.014L5.427.32a1.1 1.1 0 0 0-1.26-.207l-.46.227c-.36.18-.594.547-.607.953l-.013.7A1.093 1.093 0 0 1 1.993 3.06h-.7c-.466 0-.886.3-1.033.747l-.16.486c-.127.38-.033.807.247 1.1l.48.507c.413.427.4 1.107-.014 1.527L.32 7.92c-.333.333-.413.84-.207 1.26l.227.46c.18.36.547.593.953.6l.7.013a1.09 1.09 0 0 1 1.067 1.094v.7c0 .466.3.886.747 1.033l.486.16c.387.127.807.033 1.1-.247l.507-.486a1.095 1.095 0 0 1 1.527.02l.493.493c.333.333.84.413 1.26.207L9.64 13c.36-.18.593-.547.6-.953l.013-.7a1.09 1.09 0 0 1 1.094-1.067h.7c.466 0 .886-.3 1.033-.747l.16-.486a1.09 1.09 0 0 0-.247-1.1l-.486-.507zm-4.367.707a2.084 2.084 0 1 1-2.946-2.949A2.084 2.084 0 0 1 8.153 8.14\",\n      },\n    ],\n  },\n  24: {\n    outlined: [\n      {\n        d: \"M10.752 14.622c-.99 0-1.98-.38-2.74-1.13a3.88 3.88 0 0 1 0-5.48 3.88 3.88 0 0 1 5.48 0 3.88 3.88 0 0 1 0 5.48c-.76.76-1.75 1.13-2.74 1.13m0-6.25c-.61 0-1.22.23-1.68.69a2.39 2.39 0 0 0 0 3.36c.93.92 2.43.92 3.36 0a2.372 2.372 0 0 0-1.68-4.05\",\n      },\n      {\n        d: \"M13.782 21.502c-.62 0-1.23-.24-1.69-.7l-.74-.74a.89.89 0 0 0-1.24-.01l-.76.72c-.64.61-1.56.82-2.4.54l-.73-.24a2.375 2.375 0 0 1-1.63-2.26v-1.05c0-.49-.38-.88-.87-.88l-1.05-.02c-.89-.02-1.68-.52-2.08-1.32l-.34-.69c-.46-.92-.28-2.03.45-2.75l.74-.74a.89.89 0 0 0 .01-1.24l-.73-.76c-.62-.64-.82-1.56-.54-2.41l.24-.73c.33-.98 1.23-1.63 2.26-1.63h1.05c.49 0 .88-.38.88-.87l.02-1.05c.02-.89.53-1.69 1.32-2.08l.69-.34c.92-.46 2.03-.28 2.75.45l.74.74c.34.34.89.34 1.24.01l.76-.73c.64-.61 1.56-.82 2.41-.54l.73.24c.98.33 1.63 1.24 1.63 2.26v1.05c0 .49.38.88.87.89l1.05.02c.89.02 1.69.52 2.08 1.32l.34.69c.46.92.28 2.03-.45 2.75l-.74.74a.89.89 0 0 0-.01 1.24l.73.76c.61.64.82 1.56.54 2.4l-.24.73c-.33.98-1.23 1.63-2.26 1.63h-1.05c-.49 0-.88.38-.88.87l-.02 1.05c-.02.89-.52 1.69-1.32 2.08l-.69.34c-.34.17-.71.25-1.07.25zm-3.05-3.19c.61 0 1.23.23 1.69.69l.74.74c.27.27.68.34 1.02.17l.69-.34c.29-.15.48-.44.49-.77l.02-1.05c.03-1.29 1.1-2.33 2.38-2.33h1.05c.38 0 .72-.24.84-.61l.24-.73c.1-.31.03-.65-.2-.89l-.73-.76c-.89-.93-.87-2.43.04-3.34l.74-.74c.27-.27.34-.68.17-1.02l-.34-.69a.9.9 0 0 0-.77-.49l-1.05-.02a2.4 2.4 0 0 1-2.33-2.39v-1.05a.88.88 0 0 0-.61-.84l-.73-.24a.89.89 0 0 0-.89.2l-.76.72c-.93.89-2.43.87-3.34-.04l-.74-.74a.88.88 0 0 0-1.02-.17l-.69.34c-.29.15-.48.44-.49.77l-.02 1.05a2.395 2.395 0 0 1-2.38 2.33h-1.05a.88.88 0 0 0-.84.61l-.24.73c-.1.31-.03.66.2.89l.73.76c.89.93.87 2.43-.04 3.34l-.74.74c-.27.27-.34.68-.17 1.02l.34.69c.15.29.44.48.77.49l1.05.02c1.29.03 2.33 1.1 2.33 2.38v1.05c0 .38.24.72.61.84l.73.24c.31.1.66.03.89-.2l.76-.72c.46-.44 1.05-.66 1.65-.66z\",\n      },\n    ],\n    filled: [\n      {\n        d: \"M18.78 11.15c-.62-.64-.6-1.66.02-2.29l.74-.74c.5-.5.62-1.26.31-1.89l-.34-.69a1.63 1.63 0 0 0-1.43-.9l-1.05-.02a1.64 1.64 0 0 1-1.6-1.64V1.93c0-.7-.45-1.33-1.12-1.55l-.73-.24a1.64 1.64 0 0 0-1.65.37l-.76.73c-.64.62-1.66.6-2.29-.02L8.14.48c-.5-.5-1.26-.62-1.89-.31l-.69.34c-.54.27-.89.82-.91 1.43l-.02 1.05c-.02.89-.75 1.6-1.64 1.6H1.94c-.7 0-1.33.45-1.55 1.12l-.24.73c-.19.57-.05 1.21.37 1.65l.72.76c.62.64.6 1.66-.02 2.29l-.74.74c-.5.5-.62 1.26-.31 1.89l.34.69c.27.54.82.89 1.43.9l1.05.02c.89.02 1.6.74 1.6 1.64v1.05c0 .7.45 1.33 1.12 1.55l.73.24c.58.19 1.21.05 1.65-.37l.76-.73c.64-.61 1.66-.6 2.29.03l.74.74c.5.5 1.26.62 1.89.31l.69-.34c.54-.27.89-.82.9-1.43l.02-1.05c.02-.89.74-1.6 1.64-1.6h1.05c.7 0 1.33-.45 1.55-1.12l.24-.73c.19-.58.05-1.21-.37-1.65l-.73-.76zm-6.55 1.06a3.126 3.126 0 0 1-4.42-4.42 3.126 3.126 0 0 1 4.42 4.42\",\n      },\n    ],\n  },\n  32: {\n    outlined: [\n      {\n        d: \"M14.336 19.496a5.2 5.2 0 0 1-3.653-1.506 5.174 5.174 0 0 1 0-7.307 5.174 5.174 0 0 1 7.307 0 5.174 5.174 0 0 1 0 7.307 5.14 5.14 0 0 1-3.654 1.506m0-8.333c-.813 0-1.626.307-2.24.92a3.187 3.187 0 0 0 0 4.48 3.187 3.187 0 0 0 4.48 0 3.158 3.158 0 0 0-2.24-5.4\",\n      },\n      {\n        d: \"M18.377 28.67a3.18 3.18 0 0 1-2.254-.934l-.987-.986a1.187 1.187 0 0 0-1.653-.014l-1.013.96a3.18 3.18 0 0 1-3.2.72l-.974-.32a3.17 3.17 0 0 1-2.173-3.013v-1.4c0-.653-.507-1.173-1.16-1.173l-1.4-.027a3.16 3.16 0 0 1-2.773-1.76l-.454-.92a3.16 3.16 0 0 1 .6-3.667l.987-.986a1.19 1.19 0 0 0 .013-1.654l-.973-1.013a3.17 3.17 0 0 1-.72-3.213l.32-.974a3.17 3.17 0 0 1 3.013-2.173h1.4c.654 0 1.174-.507 1.174-1.16l.026-1.4A3.17 3.17 0 0 1 7.936.79l.92-.454a3.16 3.16 0 0 1 3.667.6l.987.987a1.187 1.187 0 0 0 1.653.013l1.014-.973a3.19 3.19 0 0 1 3.213-.72l.973.32a3.18 3.18 0 0 1 2.174 3.013v1.4c0 .654.506 1.174 1.16 1.187l1.4.027a3.14 3.14 0 0 1 2.773 1.76l.453.92a3.16 3.16 0 0 1-.6 3.666l-.986.987a1.187 1.187 0 0 0-.014 1.653l.974 1.014a3.18 3.18 0 0 1 .72 3.2l-.32.973a3.17 3.17 0 0 1-3.014 2.173h-1.4c-.653 0-1.173.507-1.173 1.16l-.027 1.4a3.14 3.14 0 0 1-1.76 2.774l-.92.453a3.2 3.2 0 0 1-1.427.333zm-4.067-4.254c.813 0 1.64.307 2.253.92l.987.987c.36.36.906.453 1.36.227l.92-.454c.387-.2.64-.586.653-1.026l.027-1.4a3.194 3.194 0 0 1 3.173-3.107h1.4c.507 0 .96-.32 1.12-.813l.32-.974a1.18 1.18 0 0 0-.267-1.186l-.973-1.014c-1.187-1.24-1.16-3.24.053-4.453l.987-.987c.36-.36.453-.906.227-1.36l-.454-.92c-.2-.386-.586-.64-1.026-.653l-1.4-.027a3.197 3.197 0 0 1-3.107-3.186v-1.4c0-.507-.32-.96-.813-1.12l-.974-.32a1.18 1.18 0 0 0-1.186.266l-1.014.96c-1.24 1.187-3.24 1.16-4.453-.053l-.987-.987a1.18 1.18 0 0 0-1.36-.226l-.92.453c-.386.2-.64.587-.653 1.027l-.027 1.4a3.194 3.194 0 0 1-3.173 3.106h-1.4c-.507 0-.96.32-1.12.814l-.32.973c-.133.413-.04.88.267 1.187l.973 1.013c1.187 1.24 1.16 3.24-.053 4.453l-.987.987a1.18 1.18 0 0 0-.227 1.36l.454.92c.2.387.586.64 1.026.653l1.4.027a3.194 3.194 0 0 1 3.107 3.173v1.4c0 .507.32.96.813 1.12l.974.32c.413.134.88.04 1.186-.266l1.014-.96a3.16 3.16 0 0 1 2.2-.88z\",\n      },\n    ],\n    filled: [\n      {\n        d: \"M25.04 14.867c-.827-.854-.8-2.214.027-3.054l.986-.986c.667-.667.827-1.68.414-2.52l-.454-.92a2.17 2.17 0 0 0-1.906-1.2l-1.4-.027a2.186 2.186 0 0 1-2.134-2.187v-1.4c0-.933-.6-1.773-1.493-2.066l-.973-.32a2.19 2.19 0 0 0-2.2.493l-1.014.973c-.853.827-2.213.8-3.053-.026L10.853.64a2.19 2.19 0 0 0-2.52-.413l-.92.453A2.21 2.21 0 0 0 6.2 2.587l-.027 1.4A2.186 2.186 0 0 1 3.987 6.12h-1.4c-.934 0-1.774.6-2.067 1.493l-.32.974a2.2 2.2 0 0 0 .493 2.2l.96 1.013c.827.853.8 2.213-.026 3.053l-.987.987a2.19 2.19 0 0 0-.413 2.52l.453.92a2.17 2.17 0 0 0 1.907 1.2l1.4.027a2.177 2.177 0 0 1 2.133 2.186v1.4c0 .934.6 1.774 1.493 2.067l.974.32a2.19 2.19 0 0 0 2.2-.493l1.013-.974a2.19 2.19 0 0 1 3.053.04l.987.987a2.19 2.19 0 0 0 2.52.413l.92-.453a2.17 2.17 0 0 0 1.2-1.907l.027-1.4a2.177 2.177 0 0 1 2.186-2.133h1.4c.934 0 1.774-.6 2.067-1.493l.32-.974a2.19 2.19 0 0 0-.493-2.2l-.974-1.013zm-8.733 1.413a4.168 4.168 0 0 1-5.894-5.893 4.17 4.17 0 0 1 5.894 0 4.17 4.17 0 0 1 0 5.893\",\n      },\n    ],\n  },\n};\n\n/** Props for {@link CogIcon}. See {@link BaseIconProps} for the shared shape. */\nexport type CogIconProps = BaseIconProps;\n\n/**\n * Cog icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.\n *\n * @example\n * ```tsx\n * <CogIcon size={24} filled />\n * ```\n */\nexport const CogIcon = React.forwardRef<SVGSVGElement, CogIconProps>((props, ref) => (\n  <BaseIcon ref={ref} variants={VARIANTS} {...props} />\n));\n\nCogIcon.displayName = \"CogIcon\";\n"],"names":[],"mappings":";;;;AAIA,MAAM,WAAyB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAEJ;AAaO,MAAM,UAAU,MAAM,WAAwC,CAAC,OAAO,QAC3E,oBAAC,UAAA,EAAS,KAAU,UAAU,UAAW,GAAG,OAAO,CACpD;AAED,QAAQ,cAAc;"}

package/dist/components/Link/Link.mjs

@@ -0,0 +1,68 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const SIZE_CLASSES = {
+  "16": "typography-body-default-16px-semibold",
+  "14": "typography-body-small-14px-semibold"
+};
+const VARIANT_CLASSES = {
+  primary: "text-buttons-link-primary-default hover:text-buttons-link-primary-hover",
+  brand: "text-buttons-link-brand-default hover:text-buttons-link-brand-hover"
+};
+const ICON_WRAPPER = "flex shrink-0 items-center justify-center [&>svg]:size-4";
+const Link = React.forwardRef(
+  ({
+    className,
+    variant = "primary",
+    size = "16",
+    disabled = false,
+    leftIcon,
+    rightIcon,
+    asChild = false,
+    children,
+    href,
+    onClick,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    const textClasses = cn(
+      SIZE_CLASSES[size],
+      "underline decoration-from-font decoration-solid [text-underline-position:from-font]"
+    );
+    const disabledProps = disabled ? { "aria-disabled": true, tabIndex: -1 } : {};
+    const slotChild = disabled && React.isValidElement(children) && children.type === "a" ? React.cloneElement(children, { href: void 0 }) : children;
+    const handleClick = disabled ? (event) => event.preventDefault() : onClick;
+    const leftIconNode = leftIcon && /* @__PURE__ */ jsx("span", { className: ICON_WRAPPER, "aria-hidden": "true", children: leftIcon });
+    const rightIconNode = rightIcon && /* @__PURE__ */ jsx("span", { className: ICON_WRAPPER, "aria-hidden": "true", children: rightIcon });
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        ref,
+        href: disabled ? void 0 : href,
+        onClick: handleClick,
+        className: cn(
+          "inline-flex items-center gap-2 rounded-2xs transition-colors",
+          "focus-visible:shadow-focus-ring focus-visible:outline-none",
+          disabled ? "pointer-events-none cursor-not-allowed text-content-disabled" : VARIANT_CLASSES[variant],
+          asChild && textClasses,
+          className
+        ),
+        ...asChild ? {} : { "data-testid": "link" },
+        ...disabledProps,
+        ...props,
+        children: [
+          leftIconNode,
+          asChild ? /* @__PURE__ */ jsx(Slottable, { children: slotChild }) : /* @__PURE__ */ jsx("span", { className: textClasses, children }),
+          rightIconNode
+        ]
+      }
+    );
+  }
+);
+Link.displayName = "Link";
+export {
+  Link
+};
+//# sourceMappingURL=Link.mjs.map

package/dist/components/Link/Link.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.mjs","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual style variant of the link. */\nexport type LinkVariant = \"primary\" | \"brand\";\n\n/** Text size of the link in pixels. */\nexport type LinkSize = \"16\" | \"14\";\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** Visual style variant of the link. @default \"primary\" */\n  variant?: LinkVariant;\n  /** Text size of the link in pixels. @default \"16\" */\n  size?: LinkSize;\n  /** When `true`, greys the link out and blocks interaction. @default false */\n  disabled?: boolean;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** Merge props onto a child element instead of rendering an `<a>`. @default false */\n  asChild?: boolean;\n}\n\nconst SIZE_CLASSES: Record<LinkSize, string> = {\n  \"16\": \"typography-body-default-16px-semibold\",\n  \"14\": \"typography-body-small-14px-semibold\",\n};\n\nconst VARIANT_CLASSES: Record<LinkVariant, string> = {\n  primary: \"text-buttons-link-primary-default hover:text-buttons-link-primary-hover\",\n  brand: \"text-buttons-link-brand-default hover:text-buttons-link-brand-hover\",\n};\n\nconst ICON_WRAPPER = \"flex shrink-0 items-center justify-center [&>svg]:size-4\";\n\n/**\n * An inline text link for navigating to a related page or section without\n * using a button. Use `primary` for standard navigation and `brand` for the\n * Fanvue green accent on calls to action within content.\n *\n * Renders an underlined `<a>` by default. Pass `asChild` to compose with a\n * router link (e.g. Next.js `Link`). When rendering without a visible label,\n * provide an `aria-label`.\n *\n * @example\n * ```tsx\n * <Link href=\"/pricing\" variant=\"brand\">See our plans</Link>\n * ```\n */\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    {\n      className,\n      variant = \"primary\",\n      size = \"16\",\n      disabled = false,\n      leftIcon,\n      rightIcon,\n      asChild = false,\n      children,\n      href,\n      onClick,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"a\";\n\n    const textClasses = cn(\n      SIZE_CLASSES[size],\n      \"underline decoration-from-font decoration-solid [text-underline-position:from-font]\",\n    );\n\n    const disabledProps = disabled ? { \"aria-disabled\": true, tabIndex: -1 } : {};\n\n    // Radix Slot lets the child's own props win when merging, so a disabled\n    // `asChild` link would keep the child's navigable href. Strip it from the\n    // child (anchors only) and block default navigation to honor `disabled`.\n    const slotChild =\n      disabled && React.isValidElement<{ href?: string }>(children) && children.type === \"a\"\n        ? React.cloneElement(children, { href: undefined })\n        : children;\n\n    const handleClick = disabled\n      ? (event: React.MouseEvent<HTMLAnchorElement>) => event.preventDefault()\n      : onClick;\n\n    const leftIconNode = leftIcon && (\n      <span className={ICON_WRAPPER} aria-hidden=\"true\">\n        {leftIcon}\n      </span>\n    );\n    const rightIconNode = rightIcon && (\n      <span className={ICON_WRAPPER} aria-hidden=\"true\">\n        {rightIcon}\n      </span>\n    );\n\n    return (\n      <Comp\n        ref={ref}\n        href={disabled ? undefined : href}\n        onClick={handleClick}\n        className={cn(\n          \"inline-flex items-center gap-2 rounded-2xs transition-colors\",\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          disabled\n            ? \"pointer-events-none cursor-not-allowed text-content-disabled\"\n            : VARIANT_CLASSES[variant],\n          asChild && textClasses,\n          className,\n        )}\n        {...(asChild ? {} : { \"data-testid\": \"link\" })}\n        {...disabledProps}\n        {...props}\n      >\n        {leftIconNode}\n        {asChild ? (\n          <Slottable>{slotChild}</Slottable>\n        ) : (\n          <span className={textClasses}>{children}</span>\n        )}\n        {rightIconNode}\n      </Comp>\n    );\n  },\n);\n\nLink.displayName = \"Link\";\n"],"names":[],"mappings":";;;;;AAyBA,MAAM,eAAyC;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,kBAA+C;AAAA,EACnD,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,eAAe;AAgBd,MAAM,OAAO,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAO,UAAU,OAAO;AAE9B,UAAM,cAAc;AAAA,MAClB,aAAa,IAAI;AAAA,MACjB;AAAA,IAAA;AAGF,UAAM,gBAAgB,WAAW,EAAE,iBAAiB,MAAM,UAAU,GAAA,IAAO,CAAA;AAK3E,UAAM,YACJ,YAAY,MAAM,eAAkC,QAAQ,KAAK,SAAS,SAAS,MAC/E,MAAM,aAAa,UAAU,EAAE,MAAM,OAAA,CAAW,IAChD;AAEN,UAAM,cAAc,WAChB,CAAC,UAA+C,MAAM,mBACtD;AAEJ,UAAM,eAAe,YACnB,oBAAC,QAAA,EAAK,WAAW,cAAc,eAAY,QACxC,UAAA,SAAA,CACH;AAEF,UAAM,gBAAgB,aACpB,oBAAC,QAAA,EAAK,WAAW,cAAc,eAAY,QACxC,UAAA,UAAA,CACH;AAGF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,WAAW,SAAY;AAAA,QAC7B,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,WACI,iEACA,gBAAgB,OAAO;AAAA,UAC3B,WAAW;AAAA,UACX;AAAA,QAAA;AAAA,QAED,GAAI,UAAU,CAAA,IAAK,EAAE,eAAe,OAAA;AAAA,QACpC,GAAG;AAAA,QACH,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,8BACE,WAAA,EAAW,UAAA,UAAA,CAAU,IAEtB,oBAAC,QAAA,EAAK,WAAW,aAAc,SAAA,CAAS;AAAA,UAEzC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,KAAK,cAAc;"}

package/dist/components/Pill/Pill.mjs

@@ -11,6 +11,8 @@ const pillVariants = {
     gold: "bg-warning-surface text-warning-content",
     pinkLight: "bg-brand-secondary-muted text-content-primary",
     base: "bg-surface-primary-inverted text-content-primary-inverted",
+    contrast: "bg-buttons-primary-default text-content-primary-inverted",
+    negative: "bg-buttons-secondary-negative-default text-content-primary-inverted",
     brand: "bg-brand-primary-default text-content-always-black",
     brandLight: "bg-brand-primary-muted text-content-primary",
     beta: "bg-brand-secondary-default text-content-always-black",
@@ -37,7 +39,7 @@ const Pill = React.forwardRef(
         "data-testid": "pill",
         className: cn(
           // Base styles
-          "inline-flex min-w-0 items-center justify-center gap-2 rounded-full px-3 py-1",
+          "inline-flex min-w-0 items-center justify-center gap-2 rounded-full px-2 py-1",
           // Typography
           "typography-description-12px-semibold",
           // Variant styles

package/dist/components/Pill/Pill.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.mjs","sources":["../../../src/components/Pill/Pill.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst pillVariants = {\n  variant: {\n    green: \"bg-success-surface text-success-content\",\n    grey: \"bg-neutral-alphas-50 text-content-secondary\",\n    blue: \"bg-info-surface text-info-content\",\n    gold: \"bg-warning-surface text-warning-content\",\n    pinkLight: \"bg-brand-secondary-muted text-content-primary\",\n    base: \"bg-surface-primary-inverted text-content-primary-inverted\",\n    brand: \"bg-brand-primary-default text-content-always-black\",\n    brandLight: \"bg-brand-primary-muted text-content-primary\",\n    beta: \"bg-brand-secondary-default text-content-always-black\",\n    error: \"bg-error-content text-error-surface\",\n    red: \"bg-error-surface text-error-content\",\n  },\n} as const;\n\n/** Colour variant of the pill. */\nexport type PillVariant =\n  | \"green\"\n  | \"grey\"\n  | \"blue\"\n  | \"gold\"\n  | \"pinkLight\"\n  | \"base\"\n  | \"brand\"\n  | \"brandLight\"\n  | \"beta\"\n  | \"error\"\n  | \"red\";\n\nexport interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Colour variant of the pill. @default \"green\" */\n  variant?: PillVariant;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** Merge props onto a child element instead of rendering a `<span>`. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A small rounded label for categorisation, status, or tagging.\n *\n * @example\n * ```tsx\n * <Pill variant=\"brand\">New</Pill>\n * ```\n */\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(\n  (\n    {\n      className,\n      variant = \"green\",\n      leftIcon,\n      rightIcon,\n      asChild = false,\n      onClick,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"pill\"\n        className={cn(\n          // Base styles\n          \"inline-flex min-w-0 items-center justify-center gap-2 rounded-full px-3 py-1\",\n          // Typography\n          \"typography-description-12px-semibold\",\n          // Variant styles\n          pillVariants.variant[variant],\n          // Interactive\n          onClick && \"cursor-pointer\",\n          // Manual CSS overrides\n          className,\n        )}\n        onClick={onClick}\n        {...props}\n      >\n        {leftIcon && (\n          <span className=\"flex [&>svg]:size-3\" aria-hidden=\"true\">\n            {leftIcon}\n          </span>\n        )}\n        {asChild ? (\n          <Slottable>{children}</Slottable>\n        ) : (\n          <span className=\"min-w-0 truncate\">{children}</span>\n        )}\n        {rightIcon && (\n          <span className=\"flex [&>svg]:size-3\" aria-hidden=\"true\">\n            {rightIcon}\n          </span>\n        )}\n      </Comp>\n    );\n  },\n);\n\nPill.displayName = \"Pill\";\n"],"names":[],"mappings":";;;;;AAIA,MAAM,eAAe;AAAA,EACnB,SAAS;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAET;AAmCO,MAAM,OAAO,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA;AAAA,UAET;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA,aAAa,QAAQ,OAAO;AAAA;AAAA,UAE5B,WAAW;AAAA;AAAA,UAEX;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,gCACE,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAA,UACH;AAAA,UAED,8BACE,WAAA,EAAW,SAAA,CAAS,IAErB,oBAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,UAE9C,aACC,oBAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAA,UAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,KAAK,cAAc;"}
+{"version":3,"file":"Pill.mjs","sources":["../../../src/components/Pill/Pill.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst pillVariants = {\n  variant: {\n    green: \"bg-success-surface text-success-content\",\n    grey: \"bg-neutral-alphas-50 text-content-secondary\",\n    blue: \"bg-info-surface text-info-content\",\n    gold: \"bg-warning-surface text-warning-content\",\n    pinkLight: \"bg-brand-secondary-muted text-content-primary\",\n    base: \"bg-surface-primary-inverted text-content-primary-inverted\",\n    contrast: \"bg-buttons-primary-default text-content-primary-inverted\",\n    negative: \"bg-buttons-secondary-negative-default text-content-primary-inverted\",\n    brand: \"bg-brand-primary-default text-content-always-black\",\n    brandLight: \"bg-brand-primary-muted text-content-primary\",\n    beta: \"bg-brand-secondary-default text-content-always-black\",\n    error: \"bg-error-content text-error-surface\",\n    red: \"bg-error-surface text-error-content\",\n  },\n} as const;\n\n/** Colour variant of the pill. */\nexport type PillVariant =\n  | \"green\"\n  | \"grey\"\n  | \"blue\"\n  | \"gold\"\n  | \"pinkLight\"\n  | \"base\"\n  | \"contrast\"\n  | \"negative\"\n  | \"brand\"\n  | \"brandLight\"\n  | \"beta\"\n  | \"error\"\n  | \"red\";\n\nexport interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Colour variant of the pill. @default \"green\" */\n  variant?: PillVariant;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** Merge props onto a child element instead of rendering a `<span>`. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A small rounded label for categorisation, status, or tagging.\n *\n * @example\n * ```tsx\n * <Pill variant=\"brand\">New</Pill>\n * ```\n */\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(\n  (\n    {\n      className,\n      variant = \"green\",\n      leftIcon,\n      rightIcon,\n      asChild = false,\n      onClick,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"pill\"\n        className={cn(\n          // Base styles\n          \"inline-flex min-w-0 items-center justify-center gap-2 rounded-full px-2 py-1\",\n          // Typography\n          \"typography-description-12px-semibold\",\n          // Variant styles\n          pillVariants.variant[variant],\n          // Interactive\n          onClick && \"cursor-pointer\",\n          // Manual CSS overrides\n          className,\n        )}\n        onClick={onClick}\n        {...props}\n      >\n        {leftIcon && (\n          <span className=\"flex [&>svg]:size-3\" aria-hidden=\"true\">\n            {leftIcon}\n          </span>\n        )}\n        {asChild ? (\n          <Slottable>{children}</Slottable>\n        ) : (\n          <span className=\"min-w-0 truncate\">{children}</span>\n        )}\n        {rightIcon && (\n          <span className=\"flex [&>svg]:size-3\" aria-hidden=\"true\">\n            {rightIcon}\n          </span>\n        )}\n      </Comp>\n    );\n  },\n);\n\nPill.displayName = \"Pill\";\n"],"names":[],"mappings":";;;;;AAIA,MAAM,eAAe;AAAA,EACnB,SAAS;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAET;AAqCO,MAAM,OAAO,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA;AAAA,UAET;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA,aAAa,QAAQ,OAAO;AAAA;AAAA,UAE5B,WAAW;AAAA;AAAA,UAEX;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,gCACE,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAA,UACH;AAAA,UAED,8BACE,WAAA,EAAW,SAAA,CAAS,IAErB,oBAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,UAE9C,aACC,oBAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAA,UAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,KAAK,cAAc;"}

package/dist/components/ProfileStatus/ProfileStatus.mjs

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const sizeClasses = {
+  sm: "size-2",
+  md: "size-3"
+};
+const ProfileStatus = React.forwardRef(
+  ({ className, active = true, size = "sm", ...props }, ref) => {
+    const hasAccessibleLabel = props["aria-label"] != null || props["aria-labelledby"] != null;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        role: hasAccessibleLabel ? "img" : void 0,
+        "aria-hidden": hasAccessibleLabel ? void 0 : true,
+        className: cn(
+          "relative inline-block rounded-full border border-border-background",
+          sizeClasses[size],
+          active ? "bg-messages-status-active" : "bg-messages-status-inactive",
+          className
+        ),
+        ...props,
+        children: active && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 animate-ping rounded-full bg-messages-status-active opacity-75" })
+      }
+    );
+  }
+);
+ProfileStatus.displayName = "ProfileStatus";
+export {
+  ProfileStatus
+};
+//# sourceMappingURL=ProfileStatus.mjs.map

package/dist/components/ProfileStatus/ProfileStatus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileStatus.mjs","sources":["../../../src/components/ProfileStatus/ProfileStatus.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Size preset of the {@link ProfileStatus} indicator. */\nexport type ProfileStatusSize = \"sm\" | \"md\";\n\nexport interface ProfileStatusProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Whether the profile is currently active. Active renders a pulsing green dot; inactive renders a static grey dot. @default true */\n  active?: boolean;\n  /** Size preset of the indicator. @default \"sm\" */\n  size?: ProfileStatusSize;\n}\n\nconst sizeClasses: Record<ProfileStatusSize, string> = {\n  sm: \"size-2\",\n  md: \"size-3\",\n};\n\n/**\n * Presence indicator showing whether a creator or fan is currently active.\n * The active state pulses to signal real-time presence; the inactive state is a\n * static, muted dot for lists, tables, and content views where presence is less\n * relevant.\n *\n * Decorative by default (`aria-hidden`) — pair it with a visible or visually\n * hidden label at the usage site. Pass `aria-label` to expose it as a\n * standalone image to assistive technology.\n *\n * Supersedes the V1 `OnlineBlinkingIcon`: `<ProfileStatus />` is a drop-in\n * replacement for `<OnlineBlinkingIcon />`, adding the distinct inactive state.\n *\n * @example\n * ```tsx\n * <ProfileStatus active />\n * <ProfileStatus active={false} size=\"md\" />\n * <ProfileStatus active aria-label=\"Online\" />\n * ```\n */\nexport const ProfileStatus = React.forwardRef<HTMLSpanElement, ProfileStatusProps>(\n  ({ className, active = true, size = \"sm\", ...props }, ref) => {\n    const hasAccessibleLabel = props[\"aria-label\"] != null || props[\"aria-labelledby\"] != null;\n\n    return (\n      <span\n        ref={ref}\n        role={hasAccessibleLabel ? \"img\" : undefined}\n        aria-hidden={hasAccessibleLabel ? undefined : true}\n        className={cn(\n          \"relative inline-block rounded-full border border-border-background\",\n          sizeClasses[size],\n          active ? \"bg-messages-status-active\" : \"bg-messages-status-inactive\",\n          className,\n        )}\n        {...props}\n      >\n        {active && (\n          <span className=\"absolute inset-0 animate-ping rounded-full bg-messages-status-active opacity-75\" />\n        )}\n      </span>\n    );\n  },\n);\n\nProfileStatus.displayName = \"ProfileStatus\";\n"],"names":[],"mappings":";;;;AAaA,MAAM,cAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AACN;AAsBO,MAAM,gBAAgB,MAAM;AAAA,EACjC,CAAC,EAAE,WAAW,SAAS,MAAM,OAAO,MAAM,GAAG,MAAA,GAAS,QAAQ;AAC5D,UAAM,qBAAqB,MAAM,YAAY,KAAK,QAAQ,MAAM,iBAAiB,KAAK;AAEtF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,qBAAqB,QAAQ;AAAA,QACnC,eAAa,qBAAqB,SAAY;AAAA,QAC9C,WAAW;AAAA,UACT;AAAA,UACA,YAAY,IAAI;AAAA,UAChB,SAAS,8BAA8B;AAAA,UACvC;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,UACC,oBAAC,QAAA,EAAK,WAAU,kFAAA,CAAkF;AAAA,MAAA;AAAA,IAAA;AAAA,EAI1G;AACF;AAEA,cAAc,cAAc;"}

package/dist/components/Radio/Radio.mjs

@@ -1,14 +1,16 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import * as React from "react";
 import { cn } from "../../utils/cn.mjs";
-const Radio = React.forwardRef(({ className, size = "default", label, helperText, id, ...props }, ref) => {
-  const generatedId = React.useId();
-  const inputId = id || generatedId;
-  const helperTextId = `${inputId}-helper`;
-  return /* @__PURE__ */ jsxs("div", { className: cn("group inline-flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx(
+const Radio = React.forwardRef(
+  ({ className, size = "default", label, helperText, layout = "leading", avatar, id, ...props }, ref) => {
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+    const helperTextId = `${inputId}-helper`;
+    const hasContent = Boolean(label || helperText || avatar);
+    const centerWithAvatar = Boolean(avatar && helperText);
+    const button = /* @__PURE__ */ jsx(
       RadioGroupPrimitive.Item,
       {
         ref,
@@ -17,38 +19,67 @@ const Radio = React.forwardRef(({ className, size = "default", label, helperText
         "aria-describedby": helperText ? helperTextId : void 0,
         className: cn(
           "relative h-4 w-4 shrink-0 cursor-pointer appearance-none rounded-full border border-content-primary bg-transparent transition-colors hover:bg-brand-primary-muted focus-visible:shadow-focus-ring focus-visible:outline-none not-disabled:active:bg-brand-primary-muted disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:bg-transparent data-[state=checked]:border-content-primary data-[state=checked]:bg-transparent",
-          helperText && "mt-1 self-start"
+          hasContent && !centerWithAvatar && (avatar ? "mt-2" : size === "small" ? "mt-px" : "mt-1")
         ),
         ...props,
         children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-content-primary group-has-disabled:bg-neutral-alphas-600" }) })
       }
-    ),
-    (label || helperText) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-      label && /* @__PURE__ */ jsx(
-        "label",
-        {
-          htmlFor: inputId,
-          className: cn(
-            "cursor-pointer select-none text-content-primary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary",
-            size === "small" ? "typography-body-small-14px-semibold" : "typography-body-default-16px-semibold"
-          ),
-          children: label
-        }
-      ),
-      helperText && /* @__PURE__ */ jsx(
-        "span",
-        {
-          id: helperTextId,
-          className: cn(
-            "text-content-secondary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary",
-            size === "small" ? "typography-body-small-14px-semibold" : "typography-description-12px-regular"
-          ),
-          children: helperText
-        }
-      )
-    ] })
-  ] });
-});
+    );
+    const content = hasContent && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex min-w-0 flex-1 gap-3",
+          centerWithAvatar ? "items-center" : "items-start"
+        ),
+        children: [
+          avatar && /* @__PURE__ */ jsx("span", { className: "shrink-0 group-has-disabled:opacity-60", "aria-hidden": "true", children: avatar }),
+          (label || helperText) && /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-0.5", avatar && !centerWithAvatar && "pt-1"), children: [
+            label && /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: inputId,
+                className: cn(
+                  "cursor-pointer select-none text-content-primary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary",
+                  size === "small" ? "typography-body-small-14px-semibold" : "typography-body-default-16px-semibold"
+                ),
+                children: label
+              }
+            ),
+            helperText && /* @__PURE__ */ jsx(
+              "span",
+              {
+                id: helperTextId,
+                className: cn(
+                  "text-content-secondary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary",
+                  size === "small" ? "typography-body-small-14px-semibold" : "typography-description-12px-regular"
+                ),
+                children: helperText
+              }
+            )
+          ] })
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "group gap-3",
+          // Full width only for trailing (button to far end); leading keeps intrinsic width for inline groups.
+          layout === "trailing" ? "flex w-full" : "inline-flex",
+          centerWithAvatar ? "items-center" : "items-start",
+          className
+        ),
+        children: [
+          layout === "leading" && button,
+          content,
+          layout === "trailing" && button
+        ]
+      }
+    );
+  }
+);
 Radio.displayName = "Radio";
 export {
   Radio