npm - @fanvue/ui - Versions diffs - 2.21.0 → 3.0.1 - Mend

@fanvue/ui 2.21.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (227) hide show

package/dist/cjs/components/DropdownMenu/DropdownMenu.cjs CHANGED Viewed

@@ -147,7 +147,7 @@ const DropdownMenuLabel = React__namespace.forwardRef(({ className, position = "
   {
     ref,
     className: cn.cn(
-      "typography-regular-body-sm flex items-center px-3 text-content-secondary",
+      "typography-description-12px-regular flex items-center px-3 text-content-secondary",
       position === "top" ? "py-2" : "pb-2 pt-4",
       className
     ),
@@ -162,12 +162,12 @@ const SIZE_NORMALIZED = {
   sm: "32"
 };
 const ITEM_SIZE_CLASSES = {
-  "40": "min-h-10 py-2 typography-regular-body-lg",
-  "32": "min-h-8 py-[7px] typography-regular-body-md"
+  "40": "min-h-10 py-2 typography-body-default-16px-regular",
+  "32": "min-h-8 py-[7px] typography-body-small-14px-regular"
 };
 const ITEM_SELECTED_TYPOGRAPHY = {
-  "40": "typography-semibold-body-lg",
-  "32": "typography-semibold-body-md"
+  "40": "typography-body-default-16px-semibold",
+  "32": "typography-body-small-14px-semibold"
 };
 const DropdownMenuItem = React__namespace.forwardRef(
   ({
@@ -189,8 +189,8 @@ const DropdownMenuItem = React__namespace.forwardRef(
       "data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled",
       destructive && "text-error-content",
       selected && [
-        "bg-buttons-primary text-content-primary-inverted",
-        "data-[highlighted]:bg-buttons-primary",
+        "bg-buttons-primary-default text-content-primary-inverted",
+        "data-[highlighted]:bg-buttons-primary-default",
         ITEM_SELECTED_TYPOGRAPHY[normalizedSize]
       ],
       className
@@ -228,7 +228,7 @@ const DropdownMenuHeader = React__namespace.forwardRef(
     children,
     ...props
   }, ref) => {
-    const titleTypography = size === "32" ? "typography-semibold-body-md" : "typography-semibold-body-lg";
+    const titleTypography = size === "32" ? "typography-body-small-14px-semibold" : "typography-body-default-16px-semibold";
     const toggleOpen = React__namespace.useContext(ToggleOpenContext);
     const handleClose = () => {
       onClose?.();
@@ -290,7 +290,7 @@ function SearchInput({
           {
             type: "search",
             className: cn.cn(
-              "typography-regular-body-lg min-w-0 flex-1 bg-transparent outline-none",
+              "typography-body-default-16px-regular min-w-0 flex-1 bg-transparent outline-none",
               "placeholder:text-content-tertiary"
             ),
             value,
@@ -319,8 +319,8 @@ const DropdownMenuRadioItem = React__namespace.forwardRef(({ className, children
         "group flex w-full cursor-pointer items-start gap-3 rounded-xs px-4 py-2 outline-none",
         "data-[highlighted]:bg-neutral-alphas-50",
         "data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled",
-        "data-[state=checked]:bg-buttons-primary data-[state=checked]:text-content-primary-inverted",
-        "data-[state=checked]:data-[highlighted]:bg-buttons-primary",
+        "data-[state=checked]:bg-buttons-primary-default data-[state=checked]:text-content-primary-inverted",
+        "data-[state=checked]:data-[highlighted]:bg-buttons-primary-default",
         className
       ),
       ...props,
@@ -338,12 +338,12 @@ const DropdownMenuRadioItem = React__namespace.forwardRef(({ className, children
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-lg truncate", children }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-default-16px-semibold truncate", children }),
           helper && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
               className: cn.cn(
-                "typography-regular-body-sm text-content-secondary",
+                "typography-description-12px-regular text-content-secondary",
                 "group-data-[state=checked]:text-content-primary-inverted",
                 "group-data-[disabled]:text-content-disabled"
               ),

package/dist/cjs/components/DropdownMenu/DropdownMenu.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownMenu.cjs","sources":["../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"../../utils/floatingContentCollisionPadding\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { SearchIcon } from \"../Icons/SearchIcon\";\n\n// Movement, in CSS px, above which a touch press-and-release counts as a drag.\nconst TAP_MOVEMENT_THRESHOLD_PX = 10;\n\n// Keys that the menu must keep handling even when focus is inside a child\n// input — arrows move the highlight into the list, Tab leaves the menu, and\n// Enter / Escape close it.\nconst NAVIGATION_KEYS = new Set([\n \"ArrowDown\",\n \"ArrowUp\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Escape\",\n \"Tab\",\n \"Enter\",\n]);\n\ntype ActiveTap = {\n pointerId: number;\n x: number;\n y: number;\n movedPastThreshold: boolean;\n};\n\n// Lets DropdownMenuTrigger toggle the menu directly so it can gate on touch\n// movement — see radix-ui/primitives#1912.\nconst ToggleOpenContext = React.createContext<\n ((updater: (prev: boolean) => boolean) => void) \| null\n>(null);\n\n/** Props for the {@link DropdownMenu} root component. /\nexport interface DropdownMenuProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {}\n\n/* Root component that manages open/close state for a dropdown menu. /\nexport function DropdownMenu({\n open: openProp,\n defaultOpen,\n onOpenChange,\n children,\n ...props\n}: DropdownMenuProps) {\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen ?? false,\n onChange: onOpenChange,\n });\n\n return (\n <ToggleOpenContext.Provider value={setOpen}>\n <DropdownMenuPrimitive.Root open={open} onOpenChange={setOpen} {...props}>\n {children}\n </DropdownMenuPrimitive.Root>\n </ToggleOpenContext.Provider>\n );\n}\n\n/* Props for the {@link DropdownMenuTrigger} component. /\nexport type DropdownMenuTriggerProps = React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.Trigger\n>;\n\n/\n The element that toggles the dropdown menu when clicked.\n \n On touch devices, the menu only opens if the press-and-release stays within\n * a small movement threshold. A drag that incidentally ends over the trigger\n * (common when scrolling a feed on Android Chrome) is ignored. Mouse and\n * keyboard interactions are unchanged.\n /\nexport const DropdownMenuTrigger = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Trigger>,\n DropdownMenuTriggerProps\n>((props, ref) => {\n const toggleOpen = React.useContext(ToggleOpenContext);\n const tapRef = React.useRef<ActiveTap \| null>(null);\n\n // Used outside our DropdownMenu wrapper — fall through to Radix defaults.\n if (toggleOpen === null) {\n return <DropdownMenuPrimitive.Trigger {...props} ref={ref} />;\n }\n\n return (\n <DropdownMenuPrimitive.Trigger\n {...props}\n ref={ref}\n onPointerDown={(event) => {\n props.onPointerDown?.(event);\n if (event.pointerType === \"mouse\" \|\| props.disabled) return;\n // Keep pointerup / pointercancel on this element if the finger drifts off.\n // Optional because jsdom (used in tests) doesn't implement it.\n event.currentTarget.setPointerCapture?.(event.pointerId);\n tapRef.current = {\n pointerId: event.pointerId,\n x: event.clientX,\n y: event.clientY,\n movedPastThreshold: false,\n };\n // preventDefault stops Radix's pointerdown open path via composeEventHandlers.\n event.preventDefault();\n }}\n onPointerMove={(event) => {\n props.onPointerMove?.(event);\n const tap = tapRef.current;\n if (tap === null \|\| event.pointerId !== tap.pointerId \|\| tap.movedPastThreshold) {\n return;\n }\n const dx = event.clientX - tap.x;\n const dy = event.clientY - tap.y;\n if (Math.hypot(dx, dy) > TAP_MOVEMENT_THRESHOLD_PX) {\n tap.movedPastThreshold = true;\n }\n }}\n onPointerUp={(event) => {\n props.onPointerUp?.(event);\n const tap = tapRef.current;\n if (tap === null \|\| event.pointerId !== tap.pointerId) return;\n const wasDrag = tap.movedPastThreshold;\n tapRef.current = null;\n if (!wasDrag && !props.disabled) {\n toggleOpen((prev) => !prev);\n }\n }}\n onPointerCancel={(event) => {\n props.onPointerCancel?.(event);\n const tap = tapRef.current;\n if (tap !== null && event.pointerId === tap.pointerId) {\n tapRef.current = null;\n }\n }}\n />\n );\n});\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\";\n\n/* Props for the {@link DropdownMenuContent} component. /\nexport interface DropdownMenuContentProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {}\n\n/\n The positioned content panel rendered inside a portal.\n \n Override the portal z-index per-instance via `style={{ zIndex: 1500 }}` or\n * globally with the `--fanvue-ui-portal-z-index` CSS custom property.\n \n @example\n * ```tsx\n * <DropdownMenu>\n * <DropdownMenuTrigger asChild>\n * <Button>Open</Button>\n * </DropdownMenuTrigger>\n * <DropdownMenuContent>\n * <DropdownMenuItem>Option 1</DropdownMenuItem>\n * <DropdownMenuItem>Option 2</DropdownMenuItem>\n * </DropdownMenuContent>\n * </DropdownMenu>\n * ```\n /\nexport const DropdownMenuContent = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Content>,\n DropdownMenuContentProps\n>(\n (\n {\n className,\n style,\n sideOffset = 4,\n collisionPadding = FLOATING_CONTENT_COLLISION_PADDING,\n ...props\n },\n ref,\n ) => (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n collisionPadding={collisionPadding}\n className={cn(\n \"w-max min-w-(--radix-dropdown-menu-trigger-width) max-w-(--radix-dropdown-menu-content-available-width) overflow-y-auto rounded-sm border border-neutral-alphas-200 bg-surface-primary p-1 text-content-primary shadow-lg\",\n \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n \"data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2\",\n \"data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n className,\n )}\n style={{\n zIndex: \"var(--fanvue-ui-portal-z-index, 50)\",\n maxHeight: \"var(--radix-dropdown-menu-content-available-height)\",\n ...style,\n }}\n {...props}\n />\n </DropdownMenuPrimitive.Portal>\n ),\n);\nDropdownMenuContent.displayName = \"DropdownMenuContent\";\n\n/* Props for the {@link DropdownMenuGroup} component. /\nexport type DropdownMenuGroupProps = React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.Group\n>;\n\n/* Groups related menu items. Accepts an optional `DropdownMenuLabel`. /\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nDropdownMenuGroup.displayName = \"DropdownMenuGroup\";\n\n/* Vertical placement of a {@link DropdownMenuLabel} within its group. /\nexport type DropdownMenuLabelPosition = \"default\" \| \"top\";\n\n/* Props for the {@link DropdownMenuLabel} component. /\nexport interface DropdownMenuLabelProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {\n /\n Vertical placement within the surrounding group. `\"top\"` is used for the\n * first label directly under a header; `\"default\"` adds extra top padding to\n * separate it from preceding items. @default \"default\"\n /\n position?: DropdownMenuLabelPosition;\n}\n\n/* A non-interactive label that groups related items within a menu. /\nexport const DropdownMenuLabel = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Label>,\n DropdownMenuLabelProps\n>(({ className, position = \"default\", ...props }, ref) => (\n <DropdownMenuPrimitive.Label\n ref={ref}\n className={cn(\n \"typography-regular-body-sm flex items-center px-3 text-content-secondary\",\n position === \"top\" ? \"py-2\" : \"pb-2 pt-4\",\n className,\n )}\n {...props}\n />\n));\nDropdownMenuLabel.displayName = \"DropdownMenuLabel\";\n\n/\n Height preset for a dropdown menu item.\n \n `\"40\"` (default) and `\"32\"` are the v2 numeric tokens that mirror the Figma\n * design system. `\"sm\"` and `\"md\"` are deprecated aliases retained for\n * backwards compatibility — `\"sm\"` maps to `\"32\"`, `\"md\"` maps to `\"40\"`.\n /\nexport type DropdownMenuItemSize =\n \| \"40\"\n \| \"32\"\n /* @deprecated Use `\"32\"` instead. /\n \| \"sm\"\n /* @deprecated Use `\"40\"` instead. /\n \| \"md\";\n\nconst SIZE_NORMALIZED: Record<DropdownMenuItemSize, \"40\" \| \"32\"> = {\n \"40\": \"40\",\n md: \"40\",\n \"32\": \"32\",\n sm: \"32\",\n};\n\nconst ITEM_SIZE_CLASSES: Record<\"40\" \| \"32\", string> = {\n \"40\": \"min-h-10 py-2 typography-regular-body-lg\",\n \"32\": \"min-h-8 py-[7px] typography-regular-body-md\",\n};\n\nconst ITEM_SELECTED_TYPOGRAPHY: Record<\"40\" \| \"32\", string> = {\n \"40\": \"typography-semibold-body-lg\",\n \"32\": \"typography-semibold-body-md\",\n};\n\nexport interface DropdownMenuItemProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {\n /* Height of the menu item row. @default \"40\" /\n size?: DropdownMenuItemSize;\n /* Applies the destructive (error) treatment. Use for irreversible actions. @default false /\n destructive?: boolean;\n /* Icon (or other node) rendered before the label. /\n leadingIcon?: React.ReactNode;\n /* Icon (or other node) rendered after the label. /\n trailingIcon?: React.ReactNode;\n /* Marks the item as the current selection in a single-select menu. @default false /\n selected?: boolean;\n}\n\n/\n An individual item within a {@link DropdownMenuContent}.\n \n @example\n * ```tsx\n * <DropdownMenuItem>Edit profile</DropdownMenuItem>\n * <DropdownMenuItem destructive>Delete</DropdownMenuItem>\n * <DropdownMenuItem leadingIcon={<EditIcon />}>Edit</DropdownMenuItem>\n \n // As a link\n * <DropdownMenuItem asChild>\n * <a href=\"/settings\">Settings</a>\n * </DropdownMenuItem>\n * ```\n /\nexport const DropdownMenuItem = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Item>,\n DropdownMenuItemProps\n>(\n (\n {\n size = \"40\",\n destructive,\n leadingIcon,\n trailingIcon,\n selected,\n className,\n children,\n asChild,\n ...props\n },\n ref,\n ) => {\n const normalizedSize = SIZE_NORMALIZED[size];\n const itemClassName = cn(\n \"flex w-full cursor-pointer items-center gap-2 rounded-xs px-3 outline-none\",\n ITEM_SIZE_CLASSES[normalizedSize],\n \"data-[highlighted]:bg-neutral-alphas-50\",\n \"data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled\",\n destructive && \"text-error-content\",\n selected && [\n \"bg-buttons-primary text-content-primary-inverted\",\n \"data-[highlighted]:bg-buttons-primary\",\n ITEM_SELECTED_TYPOGRAPHY[normalizedSize],\n ],\n className,\n );\n\n if (asChild) {\n return (\n <DropdownMenuPrimitive.Item ref={ref} asChild className={itemClassName} {...props}>\n {children}\n </DropdownMenuPrimitive.Item>\n );\n }\n\n return (\n <DropdownMenuPrimitive.Item ref={ref} className={itemClassName} {...props}>\n {leadingIcon}\n <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n {trailingIcon}\n </DropdownMenuPrimitive.Item>\n );\n },\n);\nDropdownMenuItem.displayName = \"DropdownMenuItem\";\n\n/* Props for the {@link DropdownMenuSeparator} component. /\nexport interface DropdownMenuSeparatorProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> {}\n\n/* Visual separator between groups of items. /\nexport const DropdownMenuSeparator = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,\n DropdownMenuSeparatorProps\n>(({ className, ...props }, ref) => (\n <DropdownMenuPrimitive.Separator\n ref={ref}\n className={cn(\"my-1 h-px bg-neutral-alphas-200\", className)}\n {...props}\n />\n));\nDropdownMenuSeparator.displayName = \"DropdownMenuSeparator\";\n\n/* Header type. `\"default\"` shows a title; `\"search\"` shows a search input. /\nexport type DropdownMenuHeaderType = \"default\" \| \"search\";\n\n/* Header height preset. Matches the menu item sizing scale. /\nexport type DropdownMenuHeaderSize = \"40\" \| \"32\";\n\n/* Search-input configuration for {@link DropdownMenuHeader} when `type=\"search\"`. /\nexport interface DropdownMenuHeaderSearchProps {\n /* Controlled value of the search input. /\n value?: string;\n /* Uncontrolled default value. /\n defaultValue?: string;\n /* Fires when the input value changes. /\n onChange?: (value: string) => void;\n /* Placeholder text shown when the input is empty. @default \"Search…\" /\n placeholder?: string;\n /* Accessible label for the search input. @default \"Search\" /\n \"aria-label\"?: string;\n}\n\nexport interface DropdownMenuHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Visual type. `\"default\"` shows a title; `\"search\"` shows a search input. @default \"default\" /\n type?: DropdownMenuHeaderType;\n /* Height preset for the header row. @default \"40\" /\n size?: DropdownMenuHeaderSize;\n /* Title text shown when `type=\"default\"`. Ignored if `children` is provided. /\n title?: string;\n /* Configuration for the embedded search input when `type=\"search\"`. /\n searchProps?: DropdownMenuHeaderSearchProps;\n /* Whether to render the close icon button on the right. @default true /\n showClose?: boolean;\n /* Fires when the close icon button is activated. /\n onClose?: () => void;\n /* Accessible label for the close button. @default \"Close menu\" /\n closeLabel?: string;\n}\n\n/\n Optional header rendered at the top of a {@link DropdownMenuContent}. Use\n * `type=\"default\"` to title the menu, or `type=\"search\"` to embed a search\n * input for filtering long lists.\n \n Renders an inset separator beneath the row so it slots cleanly above the\n * first group of items.\n \n @example\n * ```tsx\n * <DropdownMenuContent>\n * <DropdownMenuHeader title=\"Sort by\" onClose={() => setOpen(false)} />\n * <DropdownMenuItem>Newest</DropdownMenuItem>\n * <DropdownMenuItem>Oldest</DropdownMenuItem>\n * </DropdownMenuContent>\n * ```\n /\nexport const DropdownMenuHeader = React.forwardRef<HTMLDivElement, DropdownMenuHeaderProps>(\n (\n {\n type = \"default\",\n size = \"40\",\n title,\n searchProps,\n showClose = true,\n onClose,\n closeLabel = \"Close menu\",\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const titleTypography =\n size === \"32\" ? \"typography-semibold-body-md\" : \"typography-semibold-body-lg\";\n const toggleOpen = React.useContext(ToggleOpenContext);\n\n const handleClose = () => {\n onClose?.();\n // Also dismiss the Radix menu when used in uncontrolled mode — otherwise\n // the close button would look broken to consumers that don't wire up\n // `open` / `onOpenChange` themselves.\n toggleOpen?.(() => false);\n };\n\n return (\n <div\n ref={ref}\n className={cn(\n \"flex flex-col px-1 pt-1 mb-1\",\n // Search needs an 8px gap between the input and the divider; the\n // default (title) variant uses 4px because the title baseline sits\n // closer to the divider naturally.\n type === \"search\" ? \"gap-2\" : \"gap-1\",\n className,\n )}\n {...props}\n >\n <div className=\"flex items-center gap-4 pl-2\">\n {type === \"default\" ? (\n <div className={cn(\"min-w-0 flex-1 truncate text-content-primary\", titleTypography)}>\n {children ?? title}\n </div>\n ) : (\n <SearchInput {...searchProps} />\n )}\n {showClose && (\n <IconButton\n variant=\"tertiary\"\n size=\"32\"\n icon={<CloseIcon />}\n onClick={handleClose}\n aria-label={closeLabel}\n />\n )}\n </div>\n <DropdownMenuSeparator className=\"my-0\" />\n </div>\n );\n },\n);\nDropdownMenuHeader.displayName = \"DropdownMenuHeader\";\n\nfunction SearchInput({\n value,\n defaultValue,\n onChange,\n placeholder = \"Search\\u2026\",\n \"aria-label\": ariaLabel = \"Search\",\n}: DropdownMenuHeaderSearchProps = {}) {\n return (\n <label\n className={cn(\n \"flex min-w-0 flex-1 items-center gap-2 rounded-xs border border-border-primary\",\n \"bg-neutral-alphas-50 px-3 py-1 text-content-primary\",\n \"focus-within:shadow-focus-ring focus-within:outline-none\",\n )}\n >\n <SearchIcon className=\"size-4 shrink-0 text-content-tertiary\" aria-hidden=\"true\" />\n <input\n type=\"search\"\n className={cn(\n \"typography-regular-body-lg min-w-0 flex-1 bg-transparent outline-none\",\n \"placeholder:text-content-tertiary\",\n )}\n value={value}\n defaultValue={defaultValue}\n placeholder={placeholder}\n aria-label={ariaLabel}\n onChange={(event) => onChange?.(event.target.value)}\n // Radix DropdownMenu listens for keystrokes on Content for its\n // typeahead (typing letters jumps focus to a matching item). That\n // listener steals focus from the input after the first letter, so we\n // stop character keys from bubbling. Navigation keys (arrows / Tab /\n // Escape / Enter) are still allowed through so the user can leave the\n // input for the list or close the menu. Pointer events are stopped so\n // clicking back into the input doesn't fight the menu's focus\n // management either.\n onKeyDown={(event) => {\n if (!NAVIGATION_KEYS.has(event.key)) event.stopPropagation();\n }}\n onPointerDown={(event) => event.stopPropagation()}\n onMouseDown={(event) => event.stopPropagation()}\n />\n </label>\n );\n}\n\n/* Props for the {@link DropdownMenuRadioGroup} component. /\nexport interface DropdownMenuRadioGroupProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup> {}\n\n/\n Groups {@link DropdownMenuRadioItem} children so they behave as a\n * single-select set. Controlled via `value`/`onValueChange`.\n \n @example\n * ```tsx\n * <DropdownMenuRadioGroup value={sort} onValueChange={setSort}>\n * <DropdownMenuRadioItem value=\"newest\">Newest first</DropdownMenuRadioItem>\n * <DropdownMenuRadioItem value=\"oldest\">Oldest first</DropdownMenuRadioItem>\n * </DropdownMenuRadioGroup>\n * ```\n /\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\n/* Height preset for a {@link DropdownMenuRadioItem}. /\nexport type DropdownMenuRadioItemSize = \"40\";\n\nexport interface DropdownMenuRadioItemProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {\n /* Optional secondary text shown below the title. /\n helper?: string;\n /* Height of the item row. @default \"40\" /\n size?: DropdownMenuRadioItemSize;\n}\n\n/\n A single radio-style choice within a {@link DropdownMenuRadioGroup}. Shows\n * a circular indicator that fills when selected, plus an optional helper line\n * underneath the title.\n */\nexport const DropdownMenuRadioItem = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,\n DropdownMenuRadioItemProps\n>(({ className, children, helper, size: _size = \"40\", ...props }, ref) => {\n return (\n <DropdownMenuPrimitive.RadioItem\n ref={ref}\n className={cn(\n \"group flex w-full cursor-pointer items-start gap-3 rounded-xs px-4 py-2 outline-none\",\n \"data-[highlighted]:bg-neutral-alphas-50\",\n \"data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled\",\n \"data-[state=checked]:bg-buttons-primary data-[state=checked]:text-content-primary-inverted\",\n \"data-[state=checked]:data-[highlighted]:bg-buttons-primary\",\n className,\n )}\n {...props}\n >\n <span\n className={cn(\n \"mt-1 flex size-4 shrink-0 items-center justify-center rounded-full border border-icons-primary\",\n \"group-data-[disabled]:border-content-disabled\",\n \"group-data-[state=checked]:border-icons-primary-inverted\",\n )}\n aria-hidden=\"true\"\n >\n <DropdownMenuPrimitive.ItemIndicator asChild>\n <span className=\"size-2 rounded-full bg-content-primary-inverted\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n <span className=\"typography-semibold-body-lg truncate\">{children}</span>\n {helper && (\n <span\n className={cn(\n \"typography-regular-body-sm text-content-secondary\",\n \"group-data-[state=checked]:text-content-primary-inverted\",\n \"group-data-[disabled]:text-content-disabled\",\n )}\n >\n {helper}\n </span>\n )}\n </span>\n </DropdownMenuPrimitive.RadioItem>\n );\n});\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\";\n"],"names":["React","useControllableState","jsx","DropdownMenuPrimitive","FLOATING_CONTENT_COLLISION_PADDING","cn","jsxs","IconButton","CloseIcon","SearchIcon"],"mappings":"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"}
1	+ {"version":3,"file":"DropdownMenu.cjs","sources":["../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"../../utils/floatingContentCollisionPadding\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { SearchIcon } from \"../Icons/SearchIcon\";\n\n// Movement, in CSS px, above which a touch press-and-release counts as a drag.\nconst TAP_MOVEMENT_THRESHOLD_PX = 10;\n\n// Keys that the menu must keep handling even when focus is inside a child\n// input — arrows move the highlight into the list, Tab leaves the menu, and\n// Enter / Escape close it.\nconst NAVIGATION_KEYS = new Set([\n \"ArrowDown\",\n \"ArrowUp\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Escape\",\n \"Tab\",\n \"Enter\",\n]);\n\ntype ActiveTap = {\n pointerId: number;\n x: number;\n y: number;\n movedPastThreshold: boolean;\n};\n\n// Lets DropdownMenuTrigger toggle the menu directly so it can gate on touch\n// movement — see radix-ui/primitives#1912.\nconst ToggleOpenContext = React.createContext<\n ((updater: (prev: boolean) => boolean) => void) \| null\n>(null);\n\n/** Props for the {@link DropdownMenu} root component. /\nexport interface DropdownMenuProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {}\n\n/* Root component that manages open/close state for a dropdown menu. /\nexport function DropdownMenu({\n open: openProp,\n defaultOpen,\n onOpenChange,\n children,\n ...props\n}: DropdownMenuProps) {\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen ?? false,\n onChange: onOpenChange,\n });\n\n return (\n <ToggleOpenContext.Provider value={setOpen}>\n <DropdownMenuPrimitive.Root open={open} onOpenChange={setOpen} {...props}>\n {children}\n </DropdownMenuPrimitive.Root>\n </ToggleOpenContext.Provider>\n );\n}\n\n/* Props for the {@link DropdownMenuTrigger} component. /\nexport type DropdownMenuTriggerProps = React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.Trigger\n>;\n\n/\n The element that toggles the dropdown menu when clicked.\n \n On touch devices, the menu only opens if the press-and-release stays within\n * a small movement threshold. A drag that incidentally ends over the trigger\n * (common when scrolling a feed on Android Chrome) is ignored. Mouse and\n * keyboard interactions are unchanged.\n /\nexport const DropdownMenuTrigger = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Trigger>,\n DropdownMenuTriggerProps\n>((props, ref) => {\n const toggleOpen = React.useContext(ToggleOpenContext);\n const tapRef = React.useRef<ActiveTap \| null>(null);\n\n // Used outside our DropdownMenu wrapper — fall through to Radix defaults.\n if (toggleOpen === null) {\n return <DropdownMenuPrimitive.Trigger {...props} ref={ref} />;\n }\n\n return (\n <DropdownMenuPrimitive.Trigger\n {...props}\n ref={ref}\n onPointerDown={(event) => {\n props.onPointerDown?.(event);\n if (event.pointerType === \"mouse\" \|\| props.disabled) return;\n // Keep pointerup / pointercancel on this element if the finger drifts off.\n // Optional because jsdom (used in tests) doesn't implement it.\n event.currentTarget.setPointerCapture?.(event.pointerId);\n tapRef.current = {\n pointerId: event.pointerId,\n x: event.clientX,\n y: event.clientY,\n movedPastThreshold: false,\n };\n // preventDefault stops Radix's pointerdown open path via composeEventHandlers.\n event.preventDefault();\n }}\n onPointerMove={(event) => {\n props.onPointerMove?.(event);\n const tap = tapRef.current;\n if (tap === null \|\| event.pointerId !== tap.pointerId \|\| tap.movedPastThreshold) {\n return;\n }\n const dx = event.clientX - tap.x;\n const dy = event.clientY - tap.y;\n if (Math.hypot(dx, dy) > TAP_MOVEMENT_THRESHOLD_PX) {\n tap.movedPastThreshold = true;\n }\n }}\n onPointerUp={(event) => {\n props.onPointerUp?.(event);\n const tap = tapRef.current;\n if (tap === null \|\| event.pointerId !== tap.pointerId) return;\n const wasDrag = tap.movedPastThreshold;\n tapRef.current = null;\n if (!wasDrag && !props.disabled) {\n toggleOpen((prev) => !prev);\n }\n }}\n onPointerCancel={(event) => {\n props.onPointerCancel?.(event);\n const tap = tapRef.current;\n if (tap !== null && event.pointerId === tap.pointerId) {\n tapRef.current = null;\n }\n }}\n />\n );\n});\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\";\n\n/* Props for the {@link DropdownMenuContent} component. /\nexport interface DropdownMenuContentProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {}\n\n/\n The positioned content panel rendered inside a portal.\n \n Override the portal z-index per-instance via `style={{ zIndex: 1500 }}` or\n * globally with the `--fanvue-ui-portal-z-index` CSS custom property.\n \n @example\n * ```tsx\n * <DropdownMenu>\n * <DropdownMenuTrigger asChild>\n * <Button>Open</Button>\n * </DropdownMenuTrigger>\n * <DropdownMenuContent>\n * <DropdownMenuItem>Option 1</DropdownMenuItem>\n * <DropdownMenuItem>Option 2</DropdownMenuItem>\n * </DropdownMenuContent>\n * </DropdownMenu>\n * ```\n /\nexport const DropdownMenuContent = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Content>,\n DropdownMenuContentProps\n>(\n (\n {\n className,\n style,\n sideOffset = 4,\n collisionPadding = FLOATING_CONTENT_COLLISION_PADDING,\n ...props\n },\n ref,\n ) => (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n collisionPadding={collisionPadding}\n className={cn(\n \"w-max min-w-(--radix-dropdown-menu-trigger-width) max-w-(--radix-dropdown-menu-content-available-width) overflow-y-auto rounded-sm border border-neutral-alphas-200 bg-surface-primary p-1 text-content-primary shadow-lg\",\n \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n \"data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2\",\n \"data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n className,\n )}\n style={{\n zIndex: \"var(--fanvue-ui-portal-z-index, 50)\",\n maxHeight: \"var(--radix-dropdown-menu-content-available-height)\",\n ...style,\n }}\n {...props}\n />\n </DropdownMenuPrimitive.Portal>\n ),\n);\nDropdownMenuContent.displayName = \"DropdownMenuContent\";\n\n/* Props for the {@link DropdownMenuGroup} component. /\nexport type DropdownMenuGroupProps = React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.Group\n>;\n\n/* Groups related menu items. Accepts an optional `DropdownMenuLabel`. /\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nDropdownMenuGroup.displayName = \"DropdownMenuGroup\";\n\n/* Vertical placement of a {@link DropdownMenuLabel} within its group. /\nexport type DropdownMenuLabelPosition = \"default\" \| \"top\";\n\n/* Props for the {@link DropdownMenuLabel} component. /\nexport interface DropdownMenuLabelProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {\n /\n Vertical placement within the surrounding group. `\"top\"` is used for the\n * first label directly under a header; `\"default\"` adds extra top padding to\n * separate it from preceding items. @default \"default\"\n /\n position?: DropdownMenuLabelPosition;\n}\n\n/* A non-interactive label that groups related items within a menu. /\nexport const DropdownMenuLabel = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Label>,\n DropdownMenuLabelProps\n>(({ className, position = \"default\", ...props }, ref) => (\n <DropdownMenuPrimitive.Label\n ref={ref}\n className={cn(\n \"typography-description-12px-regular flex items-center px-3 text-content-secondary\",\n position === \"top\" ? \"py-2\" : \"pb-2 pt-4\",\n className,\n )}\n {...props}\n />\n));\nDropdownMenuLabel.displayName = \"DropdownMenuLabel\";\n\n/\n Height preset for a dropdown menu item.\n \n `\"40\"` (default) and `\"32\"` are the v2 numeric tokens that mirror the Figma\n * design system. `\"sm\"` and `\"md\"` are deprecated aliases retained for\n * backwards compatibility — `\"sm\"` maps to `\"32\"`, `\"md\"` maps to `\"40\"`.\n /\nexport type DropdownMenuItemSize =\n \| \"40\"\n \| \"32\"\n /* @deprecated Use `\"32\"` instead. /\n \| \"sm\"\n /* @deprecated Use `\"40\"` instead. /\n \| \"md\";\n\nconst SIZE_NORMALIZED: Record<DropdownMenuItemSize, \"40\" \| \"32\"> = {\n \"40\": \"40\",\n md: \"40\",\n \"32\": \"32\",\n sm: \"32\",\n};\n\nconst ITEM_SIZE_CLASSES: Record<\"40\" \| \"32\", string> = {\n \"40\": \"min-h-10 py-2 typography-body-default-16px-regular\",\n \"32\": \"min-h-8 py-[7px] typography-body-small-14px-regular\",\n};\n\nconst ITEM_SELECTED_TYPOGRAPHY: Record<\"40\" \| \"32\", string> = {\n \"40\": \"typography-body-default-16px-semibold\",\n \"32\": \"typography-body-small-14px-semibold\",\n};\n\nexport interface DropdownMenuItemProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {\n /* Height of the menu item row. @default \"40\" /\n size?: DropdownMenuItemSize;\n /* Applies the destructive (error) treatment. Use for irreversible actions. @default false /\n destructive?: boolean;\n /* Icon (or other node) rendered before the label. /\n leadingIcon?: React.ReactNode;\n /* Icon (or other node) rendered after the label. /\n trailingIcon?: React.ReactNode;\n /* Marks the item as the current selection in a single-select menu. @default false /\n selected?: boolean;\n}\n\n/\n An individual item within a {@link DropdownMenuContent}.\n \n @example\n * ```tsx\n * <DropdownMenuItem>Edit profile</DropdownMenuItem>\n * <DropdownMenuItem destructive>Delete</DropdownMenuItem>\n * <DropdownMenuItem leadingIcon={<EditIcon />}>Edit</DropdownMenuItem>\n \n // As a link\n * <DropdownMenuItem asChild>\n * <a href=\"/settings\">Settings</a>\n * </DropdownMenuItem>\n * ```\n /\nexport const DropdownMenuItem = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Item>,\n DropdownMenuItemProps\n>(\n (\n {\n size = \"40\",\n destructive,\n leadingIcon,\n trailingIcon,\n selected,\n className,\n children,\n asChild,\n ...props\n },\n ref,\n ) => {\n const normalizedSize = SIZE_NORMALIZED[size];\n const itemClassName = cn(\n \"flex w-full cursor-pointer items-center gap-2 rounded-xs px-3 outline-none\",\n ITEM_SIZE_CLASSES[normalizedSize],\n \"data-[highlighted]:bg-neutral-alphas-50\",\n \"data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled\",\n destructive && \"text-error-content\",\n selected && [\n \"bg-buttons-primary-default text-content-primary-inverted\",\n \"data-[highlighted]:bg-buttons-primary-default\",\n ITEM_SELECTED_TYPOGRAPHY[normalizedSize],\n ],\n className,\n );\n\n if (asChild) {\n return (\n <DropdownMenuPrimitive.Item ref={ref} asChild className={itemClassName} {...props}>\n {children}\n </DropdownMenuPrimitive.Item>\n );\n }\n\n return (\n <DropdownMenuPrimitive.Item ref={ref} className={itemClassName} {...props}>\n {leadingIcon}\n <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n {trailingIcon}\n </DropdownMenuPrimitive.Item>\n );\n },\n);\nDropdownMenuItem.displayName = \"DropdownMenuItem\";\n\n/* Props for the {@link DropdownMenuSeparator} component. /\nexport interface DropdownMenuSeparatorProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> {}\n\n/* Visual separator between groups of items. /\nexport const DropdownMenuSeparator = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,\n DropdownMenuSeparatorProps\n>(({ className, ...props }, ref) => (\n <DropdownMenuPrimitive.Separator\n ref={ref}\n className={cn(\"my-1 h-px bg-neutral-alphas-200\", className)}\n {...props}\n />\n));\nDropdownMenuSeparator.displayName = \"DropdownMenuSeparator\";\n\n/* Header type. `\"default\"` shows a title; `\"search\"` shows a search input. /\nexport type DropdownMenuHeaderType = \"default\" \| \"search\";\n\n/* Header height preset. Matches the menu item sizing scale. /\nexport type DropdownMenuHeaderSize = \"40\" \| \"32\";\n\n/* Search-input configuration for {@link DropdownMenuHeader} when `type=\"search\"`. /\nexport interface DropdownMenuHeaderSearchProps {\n /* Controlled value of the search input. /\n value?: string;\n /* Uncontrolled default value. /\n defaultValue?: string;\n /* Fires when the input value changes. /\n onChange?: (value: string) => void;\n /* Placeholder text shown when the input is empty. @default \"Search…\" /\n placeholder?: string;\n /* Accessible label for the search input. @default \"Search\" /\n \"aria-label\"?: string;\n}\n\nexport interface DropdownMenuHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Visual type. `\"default\"` shows a title; `\"search\"` shows a search input. @default \"default\" /\n type?: DropdownMenuHeaderType;\n /* Height preset for the header row. @default \"40\" /\n size?: DropdownMenuHeaderSize;\n /* Title text shown when `type=\"default\"`. Ignored if `children` is provided. /\n title?: string;\n /* Configuration for the embedded search input when `type=\"search\"`. /\n searchProps?: DropdownMenuHeaderSearchProps;\n /* Whether to render the close icon button on the right. @default true /\n showClose?: boolean;\n /* Fires when the close icon button is activated. /\n onClose?: () => void;\n /* Accessible label for the close button. @default \"Close menu\" /\n closeLabel?: string;\n}\n\n/\n Optional header rendered at the top of a {@link DropdownMenuContent}. Use\n * `type=\"default\"` to title the menu, or `type=\"search\"` to embed a search\n * input for filtering long lists.\n \n Renders an inset separator beneath the row so it slots cleanly above the\n * first group of items.\n \n @example\n * ```tsx\n * <DropdownMenuContent>\n * <DropdownMenuHeader title=\"Sort by\" onClose={() => setOpen(false)} />\n * <DropdownMenuItem>Newest</DropdownMenuItem>\n * <DropdownMenuItem>Oldest</DropdownMenuItem>\n * </DropdownMenuContent>\n * ```\n /\nexport const DropdownMenuHeader = React.forwardRef<HTMLDivElement, DropdownMenuHeaderProps>(\n (\n {\n type = \"default\",\n size = \"40\",\n title,\n searchProps,\n showClose = true,\n onClose,\n closeLabel = \"Close menu\",\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const titleTypography =\n size === \"32\"\n ? \"typography-body-small-14px-semibold\"\n : \"typography-body-default-16px-semibold\";\n const toggleOpen = React.useContext(ToggleOpenContext);\n\n const handleClose = () => {\n onClose?.();\n // Also dismiss the Radix menu when used in uncontrolled mode — otherwise\n // the close button would look broken to consumers that don't wire up\n // `open` / `onOpenChange` themselves.\n toggleOpen?.(() => false);\n };\n\n return (\n <div\n ref={ref}\n className={cn(\n \"flex flex-col px-1 pt-1 mb-1\",\n // Search needs an 8px gap between the input and the divider; the\n // default (title) variant uses 4px because the title baseline sits\n // closer to the divider naturally.\n type === \"search\" ? \"gap-2\" : \"gap-1\",\n className,\n )}\n {...props}\n >\n <div className=\"flex items-center gap-4 pl-2\">\n {type === \"default\" ? (\n <div className={cn(\"min-w-0 flex-1 truncate text-content-primary\", titleTypography)}>\n {children ?? title}\n </div>\n ) : (\n <SearchInput {...searchProps} />\n )}\n {showClose && (\n <IconButton\n variant=\"tertiary\"\n size=\"32\"\n icon={<CloseIcon />}\n onClick={handleClose}\n aria-label={closeLabel}\n />\n )}\n </div>\n <DropdownMenuSeparator className=\"my-0\" />\n </div>\n );\n },\n);\nDropdownMenuHeader.displayName = \"DropdownMenuHeader\";\n\nfunction SearchInput({\n value,\n defaultValue,\n onChange,\n placeholder = \"Search\\u2026\",\n \"aria-label\": ariaLabel = \"Search\",\n}: DropdownMenuHeaderSearchProps = {}) {\n return (\n <label\n className={cn(\n \"flex min-w-0 flex-1 items-center gap-2 rounded-xs border border-border-primary\",\n \"bg-neutral-alphas-50 px-3 py-1 text-content-primary\",\n \"focus-within:shadow-focus-ring focus-within:outline-none\",\n )}\n >\n <SearchIcon className=\"size-4 shrink-0 text-content-tertiary\" aria-hidden=\"true\" />\n <input\n type=\"search\"\n className={cn(\n \"typography-body-default-16px-regular min-w-0 flex-1 bg-transparent outline-none\",\n \"placeholder:text-content-tertiary\",\n )}\n value={value}\n defaultValue={defaultValue}\n placeholder={placeholder}\n aria-label={ariaLabel}\n onChange={(event) => onChange?.(event.target.value)}\n // Radix DropdownMenu listens for keystrokes on Content for its\n // typeahead (typing letters jumps focus to a matching item). That\n // listener steals focus from the input after the first letter, so we\n // stop character keys from bubbling. Navigation keys (arrows / Tab /\n // Escape / Enter) are still allowed through so the user can leave the\n // input for the list or close the menu. Pointer events are stopped so\n // clicking back into the input doesn't fight the menu's focus\n // management either.\n onKeyDown={(event) => {\n if (!NAVIGATION_KEYS.has(event.key)) event.stopPropagation();\n }}\n onPointerDown={(event) => event.stopPropagation()}\n onMouseDown={(event) => event.stopPropagation()}\n />\n </label>\n );\n}\n\n/* Props for the {@link DropdownMenuRadioGroup} component. /\nexport interface DropdownMenuRadioGroupProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup> {}\n\n/\n Groups {@link DropdownMenuRadioItem} children so they behave as a\n * single-select set. Controlled via `value`/`onValueChange`.\n \n @example\n * ```tsx\n * <DropdownMenuRadioGroup value={sort} onValueChange={setSort}>\n * <DropdownMenuRadioItem value=\"newest\">Newest first</DropdownMenuRadioItem>\n * <DropdownMenuRadioItem value=\"oldest\">Oldest first</DropdownMenuRadioItem>\n * </DropdownMenuRadioGroup>\n * ```\n /\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\n/* Height preset for a {@link DropdownMenuRadioItem}. /\nexport type DropdownMenuRadioItemSize = \"40\";\n\nexport interface DropdownMenuRadioItemProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {\n /* Optional secondary text shown below the title. /\n helper?: string;\n /* Height of the item row. @default \"40\" /\n size?: DropdownMenuRadioItemSize;\n}\n\n/\n A single radio-style choice within a {@link DropdownMenuRadioGroup}. Shows\n * a circular indicator that fills when selected, plus an optional helper line\n * underneath the title.\n */\nexport const DropdownMenuRadioItem = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,\n DropdownMenuRadioItemProps\n>(({ className, children, helper, size: _size = \"40\", ...props }, ref) => {\n return (\n <DropdownMenuPrimitive.RadioItem\n ref={ref}\n className={cn(\n \"group flex w-full cursor-pointer items-start gap-3 rounded-xs px-4 py-2 outline-none\",\n \"data-[highlighted]:bg-neutral-alphas-50\",\n \"data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled\",\n \"data-[state=checked]:bg-buttons-primary-default data-[state=checked]:text-content-primary-inverted\",\n \"data-[state=checked]:data-[highlighted]:bg-buttons-primary-default\",\n className,\n )}\n {...props}\n >\n <span\n className={cn(\n \"mt-1 flex size-4 shrink-0 items-center justify-center rounded-full border border-icons-primary\",\n \"group-data-[disabled]:border-content-disabled\",\n \"group-data-[state=checked]:border-icons-primary-inverted\",\n )}\n aria-hidden=\"true\"\n >\n <DropdownMenuPrimitive.ItemIndicator asChild>\n <span className=\"size-2 rounded-full bg-content-primary-inverted\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n <span className=\"typography-body-default-16px-semibold truncate\">{children}</span>\n {helper && (\n <span\n className={cn(\n \"typography-description-12px-regular text-content-secondary\",\n \"group-data-[state=checked]:text-content-primary-inverted\",\n \"group-data-[disabled]:text-content-disabled\",\n )}\n >\n {helper}\n </span>\n )}\n </span>\n </DropdownMenuPrimitive.RadioItem>\n );\n});\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\";\n"],"names":["React","useControllableState","jsx","DropdownMenuPrimitive","FLOATING_CONTENT_COLLISION_PADDING","cn","jsxs","IconButton","CloseIcon","SearchIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,4BAA4B;AAKlC,MAAM,sCAAsB,IAAI;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAWD,MAAM,oBAAoBA,iBAAM,cAE9B,IAAI;AAOC,SAAS,aAAa;AAAA,EAC3B,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,CAAC,OAAO,OAAO,OAAO,IAAIC,0BAAAA,qBAAqB;AAAA,IACnD,MAAM;AAAA,IACN,aAAa,eAAe;AAAA,IAC5B,UAAU;AAAA,EAAA,CACX;AAED,wCACG,kBAAkB,UAAlB,EAA2B,OAAO,SACjC,UAAAC,+BAACC,iCAAsB,MAAtB,EAA2B,MAAY,cAAc,SAAU,GAAG,OAChE,UACH,GACF;AAEJ;AAeO,MAAM,sBAAsBH,iBAAM,WAGvC,CAAC,OAAO,QAAQ;AAChB,QAAM,aAAaA,iBAAM,WAAW,iBAAiB;AACrD,QAAM,SAASA,iBAAM,OAAyB,IAAI;AAGlD,MAAI,eAAe,MAAM;AACvB,0CAAQG,iCAAsB,SAAtB,EAA+B,GAAG,OAAO,KAAU;AAAA,EAC7D;AAEA,SACED,2BAAAA;AAAAA,IAACC,iCAAsB;AAAA,IAAtB;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,eAAe,CAAC,UAAU;AACxB,cAAM,gBAAgB,KAAK;AAC3B,YAAI,MAAM,gBAAgB,WAAW,MAAM,SAAU;AAGrD,cAAM,cAAc,oBAAoB,MAAM,SAAS;AACvD,eAAO,UAAU;AAAA,UACf,WAAW,MAAM;AAAA,UACjB,GAAG,MAAM;AAAA,UACT,GAAG,MAAM;AAAA,UACT,oBAAoB;AAAA,QAAA;AAGtB,cAAM,eAAA;AAAA,MACR;AAAA,MACA,eAAe,CAAC,UAAU;AACxB,cAAM,gBAAgB,KAAK;AAC3B,cAAM,MAAM,OAAO;AACnB,YAAI,QAAQ,QAAQ,MAAM,cAAc,IAAI,aAAa,IAAI,oBAAoB;AAC/E;AAAA,QACF;AACA,cAAM,KAAK,MAAM,UAAU,IAAI;AAC/B,cAAM,KAAK,MAAM,UAAU,IAAI;AAC/B,YAAI,KAAK,MAAM,IAAI,EAAE,IAAI,2BAA2B;AAClD,cAAI,qBAAqB;AAAA,QAC3B;AAAA,MACF;AAAA,MACA,aAAa,CAAC,UAAU;AACtB,cAAM,cAAc,KAAK;AACzB,cAAM,MAAM,OAAO;AACnB,YAAI,QAAQ,QAAQ,MAAM,cAAc,IAAI,UAAW;AACvD,cAAM,UAAU,IAAI;AACpB,eAAO,UAAU;AACjB,YAAI,CAAC,WAAW,CAAC,MAAM,UAAU;AAC/B,qBAAW,CAAC,SAAS,CAAC,IAAI;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,iBAAiB,CAAC,UAAU;AAC1B,cAAM,kBAAkB,KAAK;AAC7B,cAAM,MAAM,OAAO;AACnB,YAAI,QAAQ,QAAQ,MAAM,cAAc,IAAI,WAAW;AACrD,iBAAO,UAAU;AAAA,QACnB;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AACD,oBAAoB,cAAc;AAyB3B,MAAM,sBAAsBH,iBAAM;AAAA,EAIvC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,mBAAmBI,gCAAAA;AAAAA,IACnB,GAAG;AAAA,EAAA,GAEL,QAEAF,2BAAAA,IAACC,iCAAsB,QAAtB,EACC,UAAAD,2BAAAA;AAAAA,IAACC,iCAAsB;AAAA,IAAtB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAWE,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,GAAG;AAAA,MAAA;AAAA,MAEJ,GAAG;AAAA,IAAA;AAAA,EAAA,EACN,CACF;AAEJ;AACA,oBAAoB,cAAc;AAQ3B,MAAM,oBAAoBF,iCAAsB;AACvD,kBAAkB,cAAc;AAiBzB,MAAM,oBAAoBH,iBAAM,WAGrC,CAAC,EAAE,WAAW,WAAW,WAAW,GAAG,SAAS,QAChDE,2BAAAA;AAAAA,EAACC,iCAAsB;AAAA,EAAtB;AAAA,IACC;AAAA,IACA,WAAWE,GAAAA;AAAAA,MACT;AAAA,MACA,aAAa,QAAQ,SAAS;AAAA,MAC9B;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AACD,kBAAkB,cAAc;AAiBhC,MAAM,kBAA6D;AAAA,EACjE,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,IAAI;AACN;AAEA,MAAM,oBAAiD;AAAA,EACrD,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,2BAAwD;AAAA,EAC5D,MAAM;AAAA,EACN,MAAM;AACR;AA+BO,MAAM,mBAAmBL,iBAAM;AAAA,EAIpC,CACE;AAAA,IACE,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,iBAAiB,gBAAgB,IAAI;AAC3C,UAAM,gBAAgBK,GAAAA;AAAAA,MACpB;AAAA,MACA,kBAAkB,cAAc;AAAA,MAChC;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,YAAY;AAAA,QACV;AAAA,QACA;AAAA,QACA,yBAAyB,cAAc;AAAA,MAAA;AAAA,MAEzC;AAAA,IAAA;AAGF,QAAI,SAAS;AACX,aACEH,+BAACC,iCAAsB,MAAtB,EAA2B,KAAU,SAAO,MAAC,WAAW,eAAgB,GAAG,OACzE,SAAA,CACH;AAAA,IAEJ;AAEA,WACEG,2BAAAA,KAACH,iCAAsB,MAAtB,EAA2B,KAAU,WAAW,eAAgB,GAAG,OACjE,UAAA;AAAA,MAAA;AAAA,MACDD,2BAAAA,IAAC,QAAA,EAAK,WAAU,2BAA2B,SAAA,CAAS;AAAA,MACnD;AAAA,IAAA,GACH;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAOxB,MAAM,wBAAwBF,iBAAM,WAGzC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BE,2BAAAA;AAAAA,EAACC,iCAAsB;AAAA,EAAtB;AAAA,IACC;AAAA,IACA,WAAWE,GAAAA,GAAG,mCAAmC,SAAS;AAAA,IACzD,GAAG;AAAA,EAAA;AACN,CACD;AACD,sBAAsB,cAAc;AAwD7B,MAAM,qBAAqBL,iBAAM;AAAA,EACtC,CACE;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,kBACJ,SAAS,OACL,wCACA;AACN,UAAM,aAAaA,iBAAM,WAAW,iBAAiB;AAErD,UAAM,cAAc,MAAM;AACxB,gBAAA;AAIA,mBAAa,MAAM,KAAK;AAAA,IAC1B;AAEA,WACEM,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWD,GAAAA;AAAAA,UACT;AAAA;AAAA;AAAA;AAAA,UAIA,SAAS,WAAW,UAAU;AAAA,UAC9B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,gCACZ,UAAA;AAAA,YAAA,SAAS,YACRJ,+BAAC,OAAA,EAAI,WAAWG,GAAAA,GAAG,gDAAgD,eAAe,GAC/E,UAAA,YAAY,OACf,IAEAH,2BAAAA,IAAC,aAAA,EAAa,GAAG,aAAa;AAAA,YAE/B,aACCA,2BAAAA;AAAAA,cAACK,WAAAA;AAAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,qCAAOC,UAAAA,WAAA,EAAU;AAAA,gBACjB,SAAS;AAAA,gBACT,cAAY;AAAA,cAAA;AAAA,YAAA;AAAA,UACd,GAEJ;AAAA,UACAN,2BAAAA,IAAC,uBAAA,EAAsB,WAAU,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG9C;AACF;AACA,mBAAmB,cAAc;AAEjC,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc,YAAY;AAC5B,IAAmC,IAAI;AACrC,SACEI,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAH,2BAAAA,IAACO,WAAAA,YAAA,EAAW,WAAU,yCAAwC,eAAY,QAAO;AAAA,QACjFP,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAWG,GAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAEF;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAY;AAAA,YACZ,UAAU,CAAC,UAAU,WAAW,MAAM,OAAO,KAAK;AAAA,YASlD,WAAW,CAAC,UAAU;AACpB,kBAAI,CAAC,gBAAgB,IAAI,MAAM,GAAG,SAAS,gBAAA;AAAA,YAC7C;AAAA,YACA,eAAe,CAAC,UAAU,MAAM,gBAAA;AAAA,YAChC,aAAa,CAAC,UAAU,MAAM,gBAAA;AAAA,UAAgB;AAAA,QAAA;AAAA,MAChD;AAAA,IAAA;AAAA,EAAA;AAGN;AAkBO,MAAM,yBAAyBF,iCAAsB;AAkBrD,MAAM,wBAAwBH,iBAAM,WAGzC,CAAC,EAAE,WAAW,UAAU,QAAQ,MAAM,QAAQ,MAAM,GAAG,MAAA,GAAS,QAAQ;AACxE,SACEM,2BAAAA;AAAAA,IAACH,iCAAsB;AAAA,IAAtB;AAAA,MACC;AAAA,MACA,WAAWE,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAH,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWG,GAAAA;AAAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,eAAY;AAAA,YAEZ,UAAAH,2BAAAA,IAACC,iCAAsB,eAAtB,EAAoC,SAAO,MAC1C,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,kDAAA,CAAkD,EAAA,CACpE;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFI,2BAAAA,KAAC,QAAA,EAAK,WAAU,sCACd,UAAA;AAAA,UAAAJ,2BAAAA,IAAC,QAAA,EAAK,WAAU,kDAAkD,SAAA,CAAS;AAAA,UAC1E,UACCA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWG,GAAAA;AAAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAGD,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AACD,sBAAsB,cAAc;;;;;;;;;;;"}

package/dist/cjs/components/EmptyState/EmptyState.cjs CHANGED Viewed

@@ -23,11 +23,11 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const titleSizeClass = {
-  xs: "typography-bold-heading-xs",
-  sm: "typography-bold-heading-sm",
-  md: "typography-bold-heading-md",
-  lg: "typography-bold-heading-lg",
-  xl: "typography-bold-heading-xl"
+  xs: "typography-header-heading-xs",
+  sm: "typography-header-heading-sm",
+  md: "typography-header-heading-md",
+  lg: "typography-header-heading-lg",
+  xl: "typography-header-heading-xl"
 };
 const mediaSizeClass = {
   xs: "h-[80px]",
@@ -74,7 +74,7 @@ const EmptyState = React__namespace.forwardRef(
         children: title
       }
     );
-    const renderedDescription = description === void 0 || description === null || description === false || description === "" ? null : isNonEmptyString(description) ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 typography-regular-body-lg text-content-secondary", children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-regular-body-lg text-content-secondary min-w-0 w-full", children: description });
+    const renderedDescription = description === void 0 || description === null || description === false || description === "" ? null : isNonEmptyString(description) ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 typography-body-default-16px-regular text-content-secondary", children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-body-default-16px-regular text-content-secondary min-w-0 w-full", children: description });
     const renderedMedia = media === void 0 || media === null || media === false || media === "" ? null : isNonEmptyString(media) ? /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {

package/dist/cjs/components/EmptyState/EmptyState.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmptyState.cjs","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\nexport type EmptyStateVariant = \"default\" \| \"centered\";\n\nexport type EmptyStateTitleSize = \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\";\n\nconst titleSizeClass: Record<EmptyStateTitleSize, string> = {\n xs: \"typography-~~bold~~-heading-xs\",\n sm: \"typography-~~bold~~-heading-sm\",\n md: \"typography-~~bold~~-heading-md\",\n lg: \"typography-~~bold~~-heading-lg\",\n xl: \"typography-~~bold~~-heading-xl\",\n};\n\nexport type EmptyStateMediaSize = \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\";\n\nconst mediaSizeClass: Record<EmptyStateMediaSize, string> = {\n xs: \"h-[80px]\",\n sm: \"h-[160px]\",\n md: \"h-[200px]\",\n lg: \"h-[280px]\",\n xl: \"h-[360px]\",\n};\n\n/** Slot that can be plain copy (styled by `EmptyState`) or custom markup. /\nexport type EmptyStateSlot = string \| React.ReactNode;\n\nfunction isNonEmptyString(value: unknown): value is string {\n return typeof value === \"string\" && value.length > 0;\n}\n\nfunction hasSlotContent(value: EmptyStateSlot \| undefined): boolean {\n if (value === undefined \|\| value === null \|\| value === false) {\n return false;\n }\n if (typeof value === \"string\") {\n return value.length > 0;\n }\n return true;\n}\n\nexport interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n /\n Matches Figma property `Property 1` (`Default` / `centered`).\n * @default \"default\"\n /\n variant?: EmptyStateVariant;\n /* Main heading. Strings use library heading styles; pass a node for full control. /\n title?: EmptyStateSlot;\n /\n Size of the title heading — mapped internally to bold heading typography tokens.\n * @default \"lg\"\n /\n titleSize?: EmptyStateTitleSize;\n /* Supporting body copy. Strings use library body styles; pass a node for rich text. /\n description?: EmptyStateSlot;\n /\n Top visual / illustration slot.\n * A string is treated as an image URL (`<img src={…}>`); pass a node for custom layout.\n /\n media?: EmptyStateSlot;\n /\n Height of the media container.\n * @default \"lg\"\n /\n mediaSize?: EmptyStateMediaSize;\n /\n Primary call to action.\n * A string renders a brand `Button` with that label; pass a node for links, loading, etc.\n /\n primaryAction?: EmptyStateSlot;\n /\n Secondary action below the primary.\n * A string renders a secondary `Button` with that label; pass a node when you need more control.\n */\n secondaryAction?: EmptyStateSlot;\n}\n\nexport const EmptyState = React.forwardRef<HTMLElement, EmptyStateProps>(\n (\n {\n className,\n variant = \"default\",\n title,\n titleSize = \"lg\",\n description,\n media,\n mediaSize = \"lg\",\n primaryAction,\n secondaryAction,\n ...props\n },\n ref,\n ) => {\n const isCentered = variant === \"centered\";\n const titleId = React.useId();\n const regionLabelledBy = hasSlotContent(title) ? titleId : undefined;\n\n const renderedPrimary =\n primaryAction === undefined \|\|\n primaryAction === null \|\|\n primaryAction === false \|\|\n primaryAction === \"\" ? null : isNonEmptyString(primaryAction) ? (\n <Button variant=\"brand\" fullWidth>\n {primaryAction}\n </Button>\n ) : (\n primaryAction\n );\n\n const renderedSecondary =\n secondaryAction === undefined \|\|\n secondaryAction === null \|\|\n secondaryAction === false \|\|\n secondaryAction === \"\" ? null : isNonEmptyString(secondaryAction) ? (\n <Button variant=\"secondary\" fullWidth>\n {secondaryAction}\n </Button>\n ) : (\n secondaryAction\n );\n\n const renderedTitle =\n title === undefined \|\|\n title === null \|\|\n title === false \|\|\n title === \"\" ? null : isNonEmptyString(title) ? (\n <h2 id={titleId} className={cn(\"m-0 text-content-primary\", titleSizeClass[titleSize])}>\n {title}\n </h2>\n ) : (\n <div\n id={titleId}\n className={cn(\"text-content-primary min-w-0 w-full\", titleSizeClass[titleSize])}\n >\n {title}\n </div>\n );\n\n const renderedDescription =\n description === undefined \|\|\n description === null \|\|\n description === false \|\|\n description === \"\" ? null : isNonEmptyString(description) ? (\n <p className=\"m-0 typography-~~regular-~~body-lg text-content-secondary\">{description}</p>\n ) : (\n <div className=\"typography-~~regular-~~body-lg text-content-secondary min-w-0 w-full\">\n {description}\n </div>\n );\n\n const renderedMedia =\n media === undefined \|\|\n media === null \|\|\n media === false \|\|\n media === \"\" ? null : isNonEmptyString(media) ? (\n <img\n src={media}\n alt=\"\"\n decoding=\"async\"\n className=\"block h-full w-full object-contain object-center\"\n />\n ) : (\n media\n );\n\n const showMedia = renderedMedia !== null;\n const showActions = renderedPrimary !== null \|\| renderedSecondary !== null;\n\n return (\n <section\n ref={ref}\n aria-labelledby={regionLabelledBy}\n data-testid=\"empty-state\"\n className={cn(\n \"flex w-full max-w-[375px] flex-col gap-6\",\n isCentered ? \"items-center text-center\" : \"items-start text-left\",\n className,\n )}\n {...props}\n >\n {showMedia && (\n <div className={cn(\"w-full overflow-hidden rounded-md\", mediaSizeClass[mediaSize])}>\n {renderedMedia}\n </div>\n )}\n\n <div\n className={cn(\"flex w-full flex-col gap-6\", isCentered ? \"items-center\" : \"items-start\")}\n >\n <div\n className={cn(\n \"flex w-full flex-col gap-4\",\n isCentered ? \"items-center\" : \"items-start\",\n )}\n >\n {renderedTitle}\n {renderedDescription}\n </div>\n\n {showActions ? (\n <div className={cn(\"flex flex-col gap-4\", isCentered ? \"items-center\" : \"items-start\")}>\n {renderedPrimary}\n {renderedSecondary}\n </div>\n ) : null}\n </div>\n </section>\n );\n },\n);\n\nEmptyState.displayName = \"EmptyState\";\n"],"names":["React","Button","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,iBAAsD;AAAA,EAC1D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAIA,MAAM,iBAAsD;AAAA,EAC1D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,SAAS,iBAAiB,OAAiC;AACzD,SAAO,OAAO,UAAU,YAAY,MAAM,SAAS;AACrD;AAEA,SAAS,eAAe,OAA4C;AAClE,MAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,OAAO;AAC5D,WAAO;AAAA,EACT;AACA,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,MAAM,SAAS;AAAA,EACxB;AACA,SAAO;AACT;AAuCO,MAAM,aAAaA,iBAAM;AAAA,EAC9B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,aAAa,YAAY;AAC/B,UAAM,UAAUA,iBAAM,MAAA;AACtB,UAAM,mBAAmB,eAAe,KAAK,IAAI,UAAU;AAE3D,UAAM,kBACJ,kBAAkB,UAClB,kBAAkB,QAClB,kBAAkB,SAClB,kBAAkB,KAAK,OAAO,iBAAiB,aAAa,mCACzDC,eAAA,EAAO,SAAQ,SAAQ,WAAS,MAC9B,yBACH,IAEA;AAGJ,UAAM,oBACJ,oBAAoB,UACpB,oBAAoB,QACpB,oBAAoB,SACpB,oBAAoB,KAAK,OAAO,iBAAiB,eAAe,mCAC7DA,eAAA,EAAO,SAAQ,aAAY,WAAS,MAClC,2BACH,IAEA;AAGJ,UAAM,gBACJ,UAAU,UACV,UAAU,QACV,UAAU,SACV,UAAU,KAAK,OAAO,iBAAiB,KAAK,IAC1CC,+BAAC,MAAA,EAAG,IAAI,SAAS,WAAWC,GAAAA,GAAG,4BAA4B,eAAe,SAAS,CAAC,GACjF,UAAA,MAAA,CACH,IAEAD,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QACJ,WAAWC,GAAAA,GAAG,uCAAuC,eAAe,SAAS,CAAC;AAAA,QAE7E,UAAA;AAAA,MAAA;AAAA,IAAA;AAIP,UAAM,sBACJ,gBAAgB,UAChB,gBAAgB,QAChB,gBAAgB,SAChB,gBAAgB,KAAK,OAAO,iBAAiB,WAAW,IACtDD,2BAAAA,IAAC,KAAA,EAAE,WAAU,~~yDAAyD~~,UAAA,YAAA,~~CAAY~~,~~IAElFA~~,+BAAC,OAAA,EAAI,WAAU,~~oEACZ~~,UAAA,YAAA,CACH;AAGJ,UAAM,gBACJ,UAAU,UACV,UAAU,QACV,UAAU,SACV,UAAU,KAAK,OAAO,iBAAiB,KAAK,IAC1CA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,KAAI;AAAA,QACJ,UAAS;AAAA,QACT,WAAU;AAAA,MAAA;AAAA,IAAA,IAGZ;AAGJ,UAAM,YAAY,kBAAkB;AACpC,UAAM,cAAc,oBAAoB,QAAQ,sBAAsB;AAEtE,WACEE,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,mBAAiB;AAAA,QACjB,eAAY;AAAA,QACZ,WAAWD,GAAAA;AAAAA,UACT;AAAA,UACA,aAAa,6BAA6B;AAAA,UAC1C;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aACCD,2BAAAA,IAAC,SAAI,WAAWC,GAAAA,GAAG,qCAAqC,eAAe,SAAS,CAAC,GAC9E,UAAA,cAAA,CACH;AAAA,UAGFC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA,GAAG,8BAA8B,aAAa,iBAAiB,aAAa;AAAA,cAEvF,UAAA;AAAA,gBAAAC,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWD,GAAAA;AAAAA,sBACT;AAAA,sBACA,aAAa,iBAAiB;AAAA,oBAAA;AAAA,oBAG/B,UAAA;AAAA,sBAAA;AAAA,sBACA;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGF,8CACE,OAAA,EAAI,WAAWA,GAAAA,GAAG,uBAAuB,aAAa,iBAAiB,aAAa,GAClF,UAAA;AAAA,kBAAA;AAAA,kBACA;AAAA,gBAAA,EAAA,CACH,IACE;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACN;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,WAAW,cAAc;;"}
1	+ {"version":3,"file":"EmptyState.cjs","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\nexport type EmptyStateVariant = \"default\" \| \"centered\";\n\nexport type EmptyStateTitleSize = \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\";\n\nconst titleSizeClass: Record<EmptyStateTitleSize, string> = {\n xs: \"typography-header-heading-xs\",\n sm: \"typography-header-heading-sm\",\n md: \"typography-header-heading-md\",\n lg: \"typography-header-heading-lg\",\n xl: \"typography-header-heading-xl\",\n};\n\nexport type EmptyStateMediaSize = \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\";\n\nconst mediaSizeClass: Record<EmptyStateMediaSize, string> = {\n xs: \"h-[80px]\",\n sm: \"h-[160px]\",\n md: \"h-[200px]\",\n lg: \"h-[280px]\",\n xl: \"h-[360px]\",\n};\n\n/** Slot that can be plain copy (styled by `EmptyState`) or custom markup. /\nexport type EmptyStateSlot = string \| React.ReactNode;\n\nfunction isNonEmptyString(value: unknown): value is string {\n return typeof value === \"string\" && value.length > 0;\n}\n\nfunction hasSlotContent(value: EmptyStateSlot \| undefined): boolean {\n if (value === undefined \|\| value === null \|\| value === false) {\n return false;\n }\n if (typeof value === \"string\") {\n return value.length > 0;\n }\n return true;\n}\n\nexport interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n /\n Matches Figma property `Property 1` (`Default` / `centered`).\n * @default \"default\"\n /\n variant?: EmptyStateVariant;\n /* Main heading. Strings use library heading styles; pass a node for full control. /\n title?: EmptyStateSlot;\n /\n Size of the title heading — mapped internally to bold heading typography tokens.\n * @default \"lg\"\n /\n titleSize?: EmptyStateTitleSize;\n /* Supporting body copy. Strings use library body styles; pass a node for rich text. /\n description?: EmptyStateSlot;\n /\n Top visual / illustration slot.\n * A string is treated as an image URL (`<img src={…}>`); pass a node for custom layout.\n /\n media?: EmptyStateSlot;\n /\n Height of the media container.\n * @default \"lg\"\n /\n mediaSize?: EmptyStateMediaSize;\n /\n Primary call to action.\n * A string renders a brand `Button` with that label; pass a node for links, loading, etc.\n /\n primaryAction?: EmptyStateSlot;\n /\n Secondary action below the primary.\n * A string renders a secondary `Button` with that label; pass a node when you need more control.\n */\n secondaryAction?: EmptyStateSlot;\n}\n\nexport const EmptyState = React.forwardRef<HTMLElement, EmptyStateProps>(\n (\n {\n className,\n variant = \"default\",\n title,\n titleSize = \"lg\",\n description,\n media,\n mediaSize = \"lg\",\n primaryAction,\n secondaryAction,\n ...props\n },\n ref,\n ) => {\n const isCentered = variant === \"centered\";\n const titleId = React.useId();\n const regionLabelledBy = hasSlotContent(title) ? titleId : undefined;\n\n const renderedPrimary =\n primaryAction === undefined \|\|\n primaryAction === null \|\|\n primaryAction === false \|\|\n primaryAction === \"\" ? null : isNonEmptyString(primaryAction) ? (\n <Button variant=\"brand\" fullWidth>\n {primaryAction}\n </Button>\n ) : (\n primaryAction\n );\n\n const renderedSecondary =\n secondaryAction === undefined \|\|\n secondaryAction === null \|\|\n secondaryAction === false \|\|\n secondaryAction === \"\" ? null : isNonEmptyString(secondaryAction) ? (\n <Button variant=\"secondary\" fullWidth>\n {secondaryAction}\n </Button>\n ) : (\n secondaryAction\n );\n\n const renderedTitle =\n title === undefined \|\|\n title === null \|\|\n title === false \|\|\n title === \"\" ? null : isNonEmptyString(title) ? (\n <h2 id={titleId} className={cn(\"m-0 text-content-primary\", titleSizeClass[titleSize])}>\n {title}\n </h2>\n ) : (\n <div\n id={titleId}\n className={cn(\"text-content-primary min-w-0 w-full\", titleSizeClass[titleSize])}\n >\n {title}\n </div>\n );\n\n const renderedDescription =\n description === undefined \|\|\n description === null \|\|\n description === false \|\|\n description === \"\" ? null : isNonEmptyString(description) ? (\n <p className=\"m-0 typography-body-default-16px-regular text-content-secondary\">\n {description}\n </p>\n ) : (\n <div className=\"typography-body-default-16px-regular text-content-secondary min-w-0 w-full\">\n {description}\n </div>\n );\n\n const renderedMedia =\n media === undefined \|\|\n media === null \|\|\n media === false \|\|\n media === \"\" ? null : isNonEmptyString(media) ? (\n <img\n src={media}\n alt=\"\"\n decoding=\"async\"\n className=\"block h-full w-full object-contain object-center\"\n />\n ) : (\n media\n );\n\n const showMedia = renderedMedia !== null;\n const showActions = renderedPrimary !== null \|\| renderedSecondary !== null;\n\n return (\n <section\n ref={ref}\n aria-labelledby={regionLabelledBy}\n data-testid=\"empty-state\"\n className={cn(\n \"flex w-full max-w-[375px] flex-col gap-6\",\n isCentered ? \"items-center text-center\" : \"items-start text-left\",\n className,\n )}\n {...props}\n >\n {showMedia && (\n <div className={cn(\"w-full overflow-hidden rounded-md\", mediaSizeClass[mediaSize])}>\n {renderedMedia}\n </div>\n )}\n\n <div\n className={cn(\"flex w-full flex-col gap-6\", isCentered ? \"items-center\" : \"items-start\")}\n >\n <div\n className={cn(\n \"flex w-full flex-col gap-4\",\n isCentered ? \"items-center\" : \"items-start\",\n )}\n >\n {renderedTitle}\n {renderedDescription}\n </div>\n\n {showActions ? (\n <div className={cn(\"flex flex-col gap-4\", isCentered ? \"items-center\" : \"items-start\")}>\n {renderedPrimary}\n {renderedSecondary}\n </div>\n ) : null}\n </div>\n </section>\n );\n },\n);\n\nEmptyState.displayName = \"EmptyState\";\n"],"names":["React","Button","jsx","cn","jsxs"],"mappings":"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"}

package/dist/cjs/components/IconButton/IconButton.cjs CHANGED Viewed

@@ -23,16 +23,16 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const iconButtonVariants = {
-  primary: "bg-buttons-primary text-content-primary-inverted hover:bg-buttons-primary-hover not-disabled:active:bg-buttons-primary-hover disabled:opacity-50 focus-visible:shadow-focus-ring",
+  primary: "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",
   secondary: "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",
   tertiary: "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",
-  brand: "bg-content-on-brand text-brand-primary-default hover:bg-brand-primary-default hover:text-content-on-brand not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-on-brand disabled:opacity-50 focus-visible:shadow-focus-ring",
-  contrast: "bg-transparent text-content-on-brand-inverted hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring",
-  messaging: "bg-content-on-brand text-brand-primary-default hover:bg-brand-primary-default hover:text-content-on-brand not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-on-brand disabled:opacity-50 focus-visible:shadow-focus-ring",
+  brand: "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",
+  contrast: "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",
+  messaging: "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",
   navTray: "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",
   tertiaryDestructive: "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",
-  stop: "bg-buttons-primary text-content-primary-inverted hover:bg-buttons-brand hover:text-content-on-brand not-disabled:active:bg-buttons-brand not-disabled:active:text-content-on-brand disabled:opacity-50 focus-visible:shadow-focus-ring",
-  microphone: "bg-buttons-primary text-content-primary-inverted hover:bg-buttons-brand hover:text-content-on-brand not-disabled:active:bg-buttons-brand not-disabled:active:text-content-on-brand disabled:opacity-50 focus-visible:shadow-focus-ring"
+  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",
+  microphone: "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"
 };
 const iconSizeVariants = {
   24: "[&>svg]:size-4",

package/dist/cjs/components/IconButton/IconButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.cjs","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 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-on-~~brand~~ text-brand-primary-default hover:bg-brand-primary-default hover:text-content-on-~~brand~~ not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-on-~~brand~~ disabled:opacity-50 focus-visible:shadow-focus-ring\",\n contrast:\n \"bg-transparent text-content-on-~~brand-inverted~~ 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-on-~~brand~~ text-brand-primary-default hover:bg-brand-primary-default hover:text-content-on-~~brand~~ not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-on-~~brand~~ 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 text-content-primary-inverted hover:bg-buttons-brand hover:text-content-on-~~brand~~ not-disabled:active:bg-buttons-brand not-disabled:active:text-content-on-~~brand~~ disabled:opacity-50 focus-visible:shadow-focus-ring\",\n microphone:\n \"bg-buttons-primary text-content-primary-inverted hover:bg-buttons-brand hover:text-content-on-~~brand~~ not-disabled:active:bg-buttons-brand not-disabled:active:text-content-on-~~brand~~ 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":["React","jsxs","cn","jsx","Count"],"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,aAAaA,iBAAM;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,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ;AAAA,QACA,WAAWC,GAAAA;AAAAA;AAAAA,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,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA,GAAG,6CAA6C,iBAAiB,IAAI,CAAC;AAAA,cACjF,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,iBAAiB,UAChBC,2BAAAA;AAAAA,YAACC,MAAAA;AAAAA,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;;"}
1	+ {"version":3,"file":"IconButton.cjs","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":["React","jsxs","cn","jsx","Count"],"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,aAAaA,iBAAM;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,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ;AAAA,QACA,WAAWC,GAAAA;AAAAA;AAAAA,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,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA,GAAG,6CAA6C,iBAAiB,IAAI,CAAC;AAAA,cACjF,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,iBAAiB,UAChBC,2BAAAA;AAAAA,YAACC,MAAAA;AAAAA,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/cjs/components/InfoBox/InfoBox.cjs CHANGED Viewed

@@ -30,7 +30,7 @@ const InfoBox = PopoverPrimitive__namespace.Root;
 const InfoBoxTrigger = React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { ref, ...useSuppressClickAfterDrag.useSuppressClickAfterDrag(props) }));
 InfoBoxTrigger.displayName = "InfoBoxTrigger";
 const ACTION_CLASSES = {
-  brand: "hover:bg-brand-primary-default/80 hover:text-content-on-brand",
+  brand: "hover:bg-brand-primary-default/80 hover:text-content-always-black",
   tertiary: "text-content-primary-inverted hover:text-content-primary-inverted hover:bg-content-primary-inverted/10"
 };
 const ActionButton = ({
@@ -64,7 +64,7 @@ const InfoBoxContent = React__namespace.forwardRef(
         collisionPadding,
         style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)", ...style },
         className: cn.cn(
-          "typography-regular-body-md max-w-[280px] overflow-hidden rounded-md border border-white/20 bg-surface-primary-inverted p-4 text-content-primary-inverted shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]",
+          "typography-body-small-14px-regular max-w-[280px] overflow-hidden rounded-md border border-white/20 bg-surface-primary-inverted p-4 text-content-primary-inverted shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]",
           className
         ),
         align: "center",
@@ -83,13 +83,13 @@ const InfoBoxContent = React__namespace.forwardRef(
                 "p",
                 {
                   id: headingId,
-                  className: "typography-semibold-body-lg min-w-0 flex-1 text-content-primary-inverted",
+                  className: "typography-body-default-16px-semibold min-w-0 flex-1 text-content-primary-inverted",
                   children: heading
                 }
               ),
               pill && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: pill })
             ] }),
-            children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-regular-body-md text-content-primary-inverted", children }),
+            children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-body-small-14px-regular text-content-primary-inverted", children }),
             hasActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
               primaryAction && /* @__PURE__ */ jsxRuntime.jsx(ActionButton, { action: primaryAction, variant: "brand" }),
               secondaryAction && /* @__PURE__ */ jsxRuntime.jsx(ActionButton, { action: secondaryAction, variant: "tertiary" })

package/dist/cjs/components/InfoBox/InfoBox.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InfoBox.cjs","sources":["../../../../src/components/InfoBox/InfoBox.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"../../utils/floatingContentCollisionPadding\";\nimport { useSuppressClickAfterDrag } from \"../../utils/useSuppressClickAfterDrag\";\nimport { Button } from \"../Button/Button\";\n\n/** Props for the {@link InfoBox} root component. /\nexport interface InfoBoxProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n defaultOpen?: boolean;\n}\n\n/* Root component that manages open/close state for an info box. /\nexport const InfoBox = PopoverPrimitive.Root;\n\n/* Props for the {@link InfoBoxTrigger} component. /\nexport type InfoBoxTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>;\n\n/\n The element that triggers the info box on click.\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 popover on a scroll-drag-end.\n /\nexport const InfoBoxTrigger = React.forwardRef<\n React.ComponentRef<typeof PopoverPrimitive.Trigger>,\n InfoBoxTriggerProps\n>((props, ref) => <PopoverPrimitive.Trigger ref={ref} {...useSuppressClickAfterDrag(props)} />);\nInfoBoxTrigger.displayName = \"InfoBoxTrigger\";\n\n/* Action button with a label and click handler. /\ninterface InfoBoxButtonAction {\n label: string;\n onClick?: () => void;\n}\n\n/* Custom element rendered in place of the default action button. /\ninterface InfoBoxElementAction {\n element: React.ReactNode;\n}\n\n/* Action configuration for {@link InfoBoxContent}. /\nexport type InfoBoxAction = InfoBoxButtonAction \| InfoBoxElementAction;\n\nexport interface InfoBoxContentProps\n extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {\n /* Whether to show the directional arrow pointer. @default true /\n showArrow?: boolean;\n /* Heading text rendered at the top of the info box. /\n heading?: React.ReactNode;\n /* Icon element displayed to the left of the heading. /\n icon?: React.ReactNode;\n /* Pill or badge element displayed to the right of the heading. /\n pill?: React.ReactNode;\n /* Primary action button (brand green). /\n primaryAction?: InfoBoxAction;\n /* Secondary action button (ghost). */\n secondaryAction?: InfoBoxAction;\n}\n\nconst ACTION_CLASSES: Record<\"brand\" \| \"tertiary\", string> = {\n brand: \"hover:bg-brand-primary-default/80 hover:text-content-on-~~brand~~\",\n tertiary:\n \"text-content-primary-inverted hover:text-content-primary-inverted hover:bg-content-primary-inverted/10\",\n};\n\nconst ActionButton = ({\n action,\n variant,\n}: {\n action: InfoBoxAction;\n variant: \"brand\" \| \"tertiary\";\n}) =>\n \"element\" in action ? (\n action.element\n ) : (\n <Button variant={variant} onClick={action.onClick} className={ACTION_CLASSES[variant]}>\n {action.label}\n </Button>\n );\n\nexport const InfoBoxContent = React.forwardRef<\n React.ComponentRef<typeof PopoverPrimitive.Content>,\n InfoBoxContentProps\n>(\n (\n {\n className,\n showArrow = true,\n sideOffset = 8,\n heading,\n icon,\n pill,\n primaryAction,\n secondaryAction,\n children,\n style,\n onOpenAutoFocus,\n collisionPadding = FLOATING_CONTENT_COLLISION_PADDING,\n ...props\n },\n ref,\n ) => {\n const hasHeader = icon !== undefined \|\| heading !== undefined \|\| pill !== undefined;\n const hasActions = primaryAction !== undefined \|\| secondaryAction !== undefined;\n const headingId = React.useId();\n\n return (\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n collisionPadding={collisionPadding}\n style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n className={cn(\n \"typography-~~regular-~~body-md max-w-[280px] overflow-hidden rounded-md border border-white/20 bg-surface-primary-inverted p-4 text-content-primary-inverted shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]\",\n className,\n )}\n align=\"center\"\n aria-labelledby={heading ? headingId : undefined}\n arrowPadding={12}\n onOpenAutoFocus={(e) => {\n // Prevent auto-focus stealing when opening — content is supplementary, not a dialog.\n e.preventDefault();\n onOpenAutoFocus?.(e);\n }}\n {...props}\n >\n <div className=\"flex flex-col gap-3\">\n {hasHeader && (\n <div className=\"flex items-center gap-3\">\n {icon && <div className=\"size-5 shrink-0\">{icon}</div>}\n {heading && (\n <p\n id={headingId}\n className=\"typography-~~semibold-~~body-lg min-w-0 flex-1 text-content-primary-inverted\"\n >\n {heading}\n </p>\n )}\n {pill && <div className=\"shrink-0\">{pill}</div>}\n </div>\n )}\n {children && (\n <div className=\"typography-~~regular-~~body-md text-content-primary-inverted\">\n {children}\n </div>\n )}\n {hasActions && (\n <div className=\"flex items-center gap-1\">\n {primaryAction && <ActionButton action={primaryAction} variant=\"brand\" />}\n {secondaryAction && <ActionButton action={secondaryAction} variant=\"tertiary\" />}\n </div>\n )}\n </div>\n {showArrow && (\n <PopoverPrimitive.Arrow\n className={\n \"-translate-y-px! fill-surface-primary-inverted stroke-2 stroke-surface-primary-inverted\"\n }\n width={12}\n height={6}\n />\n )}\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n );\n },\n);\nInfoBoxContent.displayName = \"InfoBoxContent\";\n"],"names":["PopoverPrimitive","React","jsx","useSuppressClickAfterDrag","Button","FLOATING_CONTENT_COLLISION_PADDING","jsxs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,UAAUA,4BAAiB;AAYjC,MAAM,iBAAiBC,iBAAM,WAGlC,CAAC,OAAO,QAAQC,2BAAAA,IAACF,4BAAiB,SAAjB,EAAyB,KAAW,GAAGG,0BAAAA,0BAA0B,KAAK,GAAG,CAAE;AAC9F,eAAe,cAAc;AAgC7B,MAAM,iBAAuD;AAAA,EAC3D,OAAO;AAAA,EACP,UACE;AACJ;AAEA,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AACF,MAIE,aAAa,SACX,OAAO,yCAENC,OAAAA,QAAA,EAAO,SAAkB,SAAS,OAAO,SAAS,WAAW,eAAe,OAAO,GACjF,iBAAO,OACV;AAGG,MAAM,iBAAiBH,iBAAM;AAAA,EAIlC,CACE;AAAA,IACE;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmBI,gCAAAA;AAAAA,IACnB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,SAAS,UAAa,YAAY,UAAa,SAAS;AAC1E,UAAM,aAAa,kBAAkB,UAAa,oBAAoB;AACtE,UAAM,YAAYJ,iBAAM,MAAA;AAExB,WACEC,2BAAAA,IAACF,4BAAiB,QAAjB,EACC,UAAAM,2BAAAA;AAAAA,MAACN,4BAAiB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,QAC3D,WAAWO,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAM;AAAA,QACN,mBAAiB,UAAU,YAAY;AAAA,QACvC,cAAc;AAAA,QACd,iBAAiB,CAAC,MAAM;AAEtB,YAAE,eAAA;AACF,4BAAkB,CAAC;AAAA,QACrB;AAAA,QACC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,uBACZ,UAAA;AAAA,YAAA,aACCA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA,QAAQJ,2BAAAA,IAAC,OAAA,EAAI,WAAU,mBAAmB,UAAA,MAAK;AAAA,cAC/C,WACCA,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,kBACJ,WAAU;AAAA,kBAET,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGJ,QAAQA,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,KAAA,CAAK;AAAA,YAAA,GAC3C;AAAA,YAED,YACCA,2BAAAA,IAAC,OAAA,EAAI,WAAU,~~4DACZ~~,UACH;AAAA,YAED,cACCI,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA,iBAAiBJ,2BAAAA,IAAC,cAAA,EAAa,QAAQ,eAAe,SAAQ,SAAQ;AAAA,cACtE,mBAAmBA,2BAAAA,IAAC,cAAA,EAAa,QAAQ,iBAAiB,SAAQ,WAAA,CAAW;AAAA,YAAA,EAAA,CAChF;AAAA,UAAA,GAEJ;AAAA,UACC,aACCA,2BAAAA;AAAAA,YAACF,4BAAiB;AAAA,YAAjB;AAAA,cACC,WACE;AAAA,cAEF,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;;;;"}
1	+ {"version":3,"file":"InfoBox.cjs","sources":["../../../../src/components/InfoBox/InfoBox.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"../../utils/floatingContentCollisionPadding\";\nimport { useSuppressClickAfterDrag } from \"../../utils/useSuppressClickAfterDrag\";\nimport { Button } from \"../Button/Button\";\n\n/** Props for the {@link InfoBox} root component. /\nexport interface InfoBoxProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n defaultOpen?: boolean;\n}\n\n/* Root component that manages open/close state for an info box. /\nexport const InfoBox = PopoverPrimitive.Root;\n\n/* Props for the {@link InfoBoxTrigger} component. /\nexport type InfoBoxTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>;\n\n/\n The element that triggers the info box on click.\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 popover on a scroll-drag-end.\n /\nexport const InfoBoxTrigger = React.forwardRef<\n React.ComponentRef<typeof PopoverPrimitive.Trigger>,\n InfoBoxTriggerProps\n>((props, ref) => <PopoverPrimitive.Trigger ref={ref} {...useSuppressClickAfterDrag(props)} />);\nInfoBoxTrigger.displayName = \"InfoBoxTrigger\";\n\n/* Action button with a label and click handler. /\ninterface InfoBoxButtonAction {\n label: string;\n onClick?: () => void;\n}\n\n/* Custom element rendered in place of the default action button. /\ninterface InfoBoxElementAction {\n element: React.ReactNode;\n}\n\n/* Action configuration for {@link InfoBoxContent}. /\nexport type InfoBoxAction = InfoBoxButtonAction \| InfoBoxElementAction;\n\nexport interface InfoBoxContentProps\n extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {\n /* Whether to show the directional arrow pointer. @default true /\n showArrow?: boolean;\n /* Heading text rendered at the top of the info box. /\n heading?: React.ReactNode;\n /* Icon element displayed to the left of the heading. /\n icon?: React.ReactNode;\n /* Pill or badge element displayed to the right of the heading. /\n pill?: React.ReactNode;\n /* Primary action button (brand green). /\n primaryAction?: InfoBoxAction;\n /* Secondary action button (ghost). */\n secondaryAction?: InfoBoxAction;\n}\n\nconst ACTION_CLASSES: Record<\"brand\" \| \"tertiary\", string> = {\n brand: \"hover:bg-brand-primary-default/80 hover:text-content-always-black\",\n tertiary:\n \"text-content-primary-inverted hover:text-content-primary-inverted hover:bg-content-primary-inverted/10\",\n};\n\nconst ActionButton = ({\n action,\n variant,\n}: {\n action: InfoBoxAction;\n variant: \"brand\" \| \"tertiary\";\n}) =>\n \"element\" in action ? (\n action.element\n ) : (\n <Button variant={variant} onClick={action.onClick} className={ACTION_CLASSES[variant]}>\n {action.label}\n </Button>\n );\n\nexport const InfoBoxContent = React.forwardRef<\n React.ComponentRef<typeof PopoverPrimitive.Content>,\n InfoBoxContentProps\n>(\n (\n {\n className,\n showArrow = true,\n sideOffset = 8,\n heading,\n icon,\n pill,\n primaryAction,\n secondaryAction,\n children,\n style,\n onOpenAutoFocus,\n collisionPadding = FLOATING_CONTENT_COLLISION_PADDING,\n ...props\n },\n ref,\n ) => {\n const hasHeader = icon !== undefined \|\| heading !== undefined \|\| pill !== undefined;\n const hasActions = primaryAction !== undefined \|\| secondaryAction !== undefined;\n const headingId = React.useId();\n\n return (\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n collisionPadding={collisionPadding}\n style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n className={cn(\n \"typography-body-small-14px-regular max-w-[280px] overflow-hidden rounded-md border border-white/20 bg-surface-primary-inverted p-4 text-content-primary-inverted shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]\",\n className,\n )}\n align=\"center\"\n aria-labelledby={heading ? headingId : undefined}\n arrowPadding={12}\n onOpenAutoFocus={(e) => {\n // Prevent auto-focus stealing when opening — content is supplementary, not a dialog.\n e.preventDefault();\n onOpenAutoFocus?.(e);\n }}\n {...props}\n >\n <div className=\"flex flex-col gap-3\">\n {hasHeader && (\n <div className=\"flex items-center gap-3\">\n {icon && <div className=\"size-5 shrink-0\">{icon}</div>}\n {heading && (\n <p\n id={headingId}\n className=\"typography-body-default-16px-semibold min-w-0 flex-1 text-content-primary-inverted\"\n >\n {heading}\n </p>\n )}\n {pill && <div className=\"shrink-0\">{pill}</div>}\n </div>\n )}\n {children && (\n <div className=\"typography-body-small-14px-regular text-content-primary-inverted\">\n {children}\n </div>\n )}\n {hasActions && (\n <div className=\"flex items-center gap-1\">\n {primaryAction && <ActionButton action={primaryAction} variant=\"brand\" />}\n {secondaryAction && <ActionButton action={secondaryAction} variant=\"tertiary\" />}\n </div>\n )}\n </div>\n {showArrow && (\n <PopoverPrimitive.Arrow\n className={\n \"-translate-y-px! fill-surface-primary-inverted stroke-2 stroke-surface-primary-inverted\"\n }\n width={12}\n height={6}\n />\n )}\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n );\n },\n);\nInfoBoxContent.displayName = \"InfoBoxContent\";\n"],"names":["PopoverPrimitive","React","jsx","useSuppressClickAfterDrag","Button","FLOATING_CONTENT_COLLISION_PADDING","jsxs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,UAAUA,4BAAiB;AAYjC,MAAM,iBAAiBC,iBAAM,WAGlC,CAAC,OAAO,QAAQC,2BAAAA,IAACF,4BAAiB,SAAjB,EAAyB,KAAW,GAAGG,0BAAAA,0BAA0B,KAAK,GAAG,CAAE;AAC9F,eAAe,cAAc;AAgC7B,MAAM,iBAAuD;AAAA,EAC3D,OAAO;AAAA,EACP,UACE;AACJ;AAEA,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AACF,MAIE,aAAa,SACX,OAAO,yCAENC,OAAAA,QAAA,EAAO,SAAkB,SAAS,OAAO,SAAS,WAAW,eAAe,OAAO,GACjF,iBAAO,OACV;AAGG,MAAM,iBAAiBH,iBAAM;AAAA,EAIlC,CACE;AAAA,IACE;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmBI,gCAAAA;AAAAA,IACnB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,SAAS,UAAa,YAAY,UAAa,SAAS;AAC1E,UAAM,aAAa,kBAAkB,UAAa,oBAAoB;AACtE,UAAM,YAAYJ,iBAAM,MAAA;AAExB,WACEC,2BAAAA,IAACF,4BAAiB,QAAjB,EACC,UAAAM,2BAAAA;AAAAA,MAACN,4BAAiB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,QAC3D,WAAWO,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAM;AAAA,QACN,mBAAiB,UAAU,YAAY;AAAA,QACvC,cAAc;AAAA,QACd,iBAAiB,CAAC,MAAM;AAEtB,YAAE,eAAA;AACF,4BAAkB,CAAC;AAAA,QACrB;AAAA,QACC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,uBACZ,UAAA;AAAA,YAAA,aACCA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA,QAAQJ,2BAAAA,IAAC,OAAA,EAAI,WAAU,mBAAmB,UAAA,MAAK;AAAA,cAC/C,WACCA,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,kBACJ,WAAU;AAAA,kBAET,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGJ,QAAQA,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,KAAA,CAAK;AAAA,YAAA,GAC3C;AAAA,YAED,YACCA,2BAAAA,IAAC,OAAA,EAAI,WAAU,oEACZ,UACH;AAAA,YAED,cACCI,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA,iBAAiBJ,2BAAAA,IAAC,cAAA,EAAa,QAAQ,eAAe,SAAQ,SAAQ;AAAA,cACtE,mBAAmBA,2BAAAA,IAAC,cAAA,EAAa,QAAQ,iBAAiB,SAAQ,WAAA,CAAW;AAAA,YAAA,EAAA,CAChF;AAAA,UAAA,GAEJ;AAAA,UACC,aACCA,2BAAAA;AAAAA,YAACF,4BAAiB;AAAA,YAAjB;AAAA,cACC,WACE;AAAA,cAEF,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;;;;"}

package/dist/cjs/components/InlineEdit/InlineEdit.cjs CHANGED Viewed

@@ -120,7 +120,7 @@ const InlineEdit = React__namespace.forwardRef(
             {
               "aria-hidden": "true",
               className: cn.cn(
-                "typography-semibold-body-sm invisible block whitespace-pre border border-transparent px-3",
+                "typography-description-12px-semibold invisible block whitespace-pre border border-transparent px-3",
                 size === "32" ? "h-8" : "h-10",
                 showLeftIcon && "pl-9"
               ),

package/dist/cjs/components/InlineEdit/InlineEdit.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineEdit.cjs","sources":["../../../../src/components/InlineEdit/InlineEdit.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Chip } from \"../Chip/Chip\";\n\n/** Height of the inline edit field in pixels. /\nexport type InlineEditSize = \"32\" \| \"40\";\n\nexport interface InlineEditProps\n extends Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"value\" \| \"defaultValue\" \| \"size\" \| \"onSubmit\"\n > {\n /* Current value displayed in the chip and used as the starting draft when editing. /\n value: string;\n /* Called with the trimmed draft when the user commits an edit (Enter or blur). /\n onSubmit: (value: string) => void;\n /* Called when the user cancels an edit with Escape. /\n onCancel?: () => void;\n /* Height of the field in pixels. @default \"40\" /\n size?: InlineEditSize;\n /* Whether the field is disabled — prevents entering edit mode. @default false /\n disabled?: boolean;\n /* Accessible label for the edit input. @default \"Edit\" /\n editLabel?: string;\n /* Icon rendered before the value in display mode. Hidden when editing. /\n leftIcon?: React.ReactNode;\n /\n Validator for the trimmed draft on commit. Returning `false` reverts to\n * the previous value without calling `onSubmit`. @default rejects empty drafts\n /\n validate?: (draft: string) => boolean;\n /* Additional class name applied to the root element. /\n className?: string;\n}\n\n/\n A chip-styled inline edit field. Renders as a dashed-border button that\n * swaps to a text input on click, allowing the value to be edited in place.\n \n Enter and blur commit the draft via `onSubmit`. Escape reverts to `value`\n * and calls `onCancel`. Drafts that fail `validate` are reverted.\n \n The forwarded ref points at the underlying `<input>` and is only populated\n * while the field is in edit mode — it resolves to `null` in display mode.\n \n Consumers may pass `onChange`, `onBlur`, and `onKeyDown` to participate in\n * input events. The component's own handlers run after the consumer's, and\n * keyboard handling is skipped if the consumer calls `event.preventDefault()`.\n \n @example\n * ```tsx\n * const [name, setName] = useState(\"New folder\");\n * <InlineEdit value={name} onSubmit={setName} />\n * ```\n */\nexport const InlineEdit = React.forwardRef<HTMLInputElement, InlineEditProps>(\n (\n {\n value,\n onSubmit,\n onCancel,\n size = \"40\",\n disabled = false,\n editLabel = \"Edit\",\n leftIcon,\n validate,\n className,\n placeholder,\n onChange,\n onBlur,\n onKeyDown,\n ...inputProps\n },\n ref,\n ) => {\n const [isEditing, setIsEditing] = React.useState(false);\n const [draft, setDraft] = React.useState(value);\n const inputRef = React.useRef<HTMLInputElement \| null>(null);\n\n const setInputRef = React.useCallback(\n (node: HTMLInputElement \| null) => {\n inputRef.current = node;\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n (ref as React.RefObject<HTMLInputElement \| null>).current = node;\n }\n },\n [ref],\n );\n\n React.useEffect(() => {\n if (!isEditing) {\n setDraft(value);\n }\n }, [value, isEditing]);\n\n React.useEffect(() => {\n if (!isEditing) return;\n const input = inputRef.current;\n if (!input) return;\n input.focus();\n input.select();\n }, [isEditing]);\n\n const enterEditMode = () => {\n if (disabled) return;\n setDraft(value);\n setIsEditing(true);\n };\n\n const commit = () => {\n const trimmed = draft.trim();\n const isValid = validate ? validate(trimmed) : trimmed.length > 0;\n if (!isValid) {\n setDraft(value);\n setIsEditing(false);\n return;\n }\n if (trimmed !== value) {\n onSubmit(trimmed);\n }\n setIsEditing(false);\n };\n\n const cancel = () => {\n setDraft(value);\n setIsEditing(false);\n onCancel?.();\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n setDraft(event.target.value);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n commit();\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n if (event.defaultPrevented) return;\n if (event.key === \"Enter\") {\n event.preventDefault();\n commit();\n } else if (event.key === \"Escape\") {\n event.preventDefault();\n cancel();\n }\n };\n\n const showLeftIcon = Boolean(leftIcon) && !isEditing;\n const sizerText = (isEditing ? draft : value) \|\| placeholder \|\| \" \";\n\n return (\n <span\n data-testid=\"inline-edit\"\n className={cn(\"relative inline-block align-middle\", className)}\n >\n <span\n aria-hidden=\"true\"\n className={cn(\n \"typography-~~semibold~~-~~body~~-sm invisible block whitespace-pre border border-transparent px-3\",\n size === \"32\" ? \"h-8\" : \"h-10\",\n showLeftIcon && \"pl-9\",\n )}\n >\n {sizerText}\n </span>\n {isEditing ? (\n <Chip\n asChild\n dotted\n variant=\"square\"\n size={size}\n className=\"absolute inset-0 block h-auto w-full focus-within:shadow-focus-ring\"\n >\n <span>\n <input\n ref={setInputRef}\n type=\"text\"\n value={draft}\n placeholder={placeholder}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n aria-label={editLabel}\n data-testid=\"inline-edit-input\"\n className=\"block h-full w-full bg-transparent px-3 outline-none\"\n {...inputProps}\n />\n </span>\n </Chip>\n ) : (\n <Chip\n dotted\n variant=\"square\"\n size={size}\n disabled={disabled}\n leftIcon={leftIcon}\n onClick={enterEditMode}\n data-testid=\"inline-edit-trigger\"\n className=\"absolute inset-0 h-auto w-full cursor-text\"\n >\n {value}\n </Chip>\n )}\n </span>\n );\n },\n);\n\nInlineEdit.displayName = \"InlineEdit\";\n"],"names":["React","jsxs","cn","jsx","Chip"],"mappings":"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"}
1	+ {"version":3,"file":"InlineEdit.cjs","sources":["../../../../src/components/InlineEdit/InlineEdit.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Chip } from \"../Chip/Chip\";\n\n/** Height of the inline edit field in pixels. /\nexport type InlineEditSize = \"32\" \| \"40\";\n\nexport interface InlineEditProps\n extends Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"value\" \| \"defaultValue\" \| \"size\" \| \"onSubmit\"\n > {\n /* Current value displayed in the chip and used as the starting draft when editing. /\n value: string;\n /* Called with the trimmed draft when the user commits an edit (Enter or blur). /\n onSubmit: (value: string) => void;\n /* Called when the user cancels an edit with Escape. /\n onCancel?: () => void;\n /* Height of the field in pixels. @default \"40\" /\n size?: InlineEditSize;\n /* Whether the field is disabled — prevents entering edit mode. @default false /\n disabled?: boolean;\n /* Accessible label for the edit input. @default \"Edit\" /\n editLabel?: string;\n /* Icon rendered before the value in display mode. Hidden when editing. /\n leftIcon?: React.ReactNode;\n /\n Validator for the trimmed draft on commit. Returning `false` reverts to\n * the previous value without calling `onSubmit`. @default rejects empty drafts\n /\n validate?: (draft: string) => boolean;\n /* Additional class name applied to the root element. /\n className?: string;\n}\n\n/\n A chip-styled inline edit field. Renders as a dashed-border button that\n * swaps to a text input on click, allowing the value to be edited in place.\n \n Enter and blur commit the draft via `onSubmit`. Escape reverts to `value`\n * and calls `onCancel`. Drafts that fail `validate` are reverted.\n \n The forwarded ref points at the underlying `<input>` and is only populated\n * while the field is in edit mode — it resolves to `null` in display mode.\n \n Consumers may pass `onChange`, `onBlur`, and `onKeyDown` to participate in\n * input events. The component's own handlers run after the consumer's, and\n * keyboard handling is skipped if the consumer calls `event.preventDefault()`.\n \n @example\n * ```tsx\n * const [name, setName] = useState(\"New folder\");\n * <InlineEdit value={name} onSubmit={setName} />\n * ```\n */\nexport const InlineEdit = React.forwardRef<HTMLInputElement, InlineEditProps>(\n (\n {\n value,\n onSubmit,\n onCancel,\n size = \"40\",\n disabled = false,\n editLabel = \"Edit\",\n leftIcon,\n validate,\n className,\n placeholder,\n onChange,\n onBlur,\n onKeyDown,\n ...inputProps\n },\n ref,\n ) => {\n const [isEditing, setIsEditing] = React.useState(false);\n const [draft, setDraft] = React.useState(value);\n const inputRef = React.useRef<HTMLInputElement \| null>(null);\n\n const setInputRef = React.useCallback(\n (node: HTMLInputElement \| null) => {\n inputRef.current = node;\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n (ref as React.RefObject<HTMLInputElement \| null>).current = node;\n }\n },\n [ref],\n );\n\n React.useEffect(() => {\n if (!isEditing) {\n setDraft(value);\n }\n }, [value, isEditing]);\n\n React.useEffect(() => {\n if (!isEditing) return;\n const input = inputRef.current;\n if (!input) return;\n input.focus();\n input.select();\n }, [isEditing]);\n\n const enterEditMode = () => {\n if (disabled) return;\n setDraft(value);\n setIsEditing(true);\n };\n\n const commit = () => {\n const trimmed = draft.trim();\n const isValid = validate ? validate(trimmed) : trimmed.length > 0;\n if (!isValid) {\n setDraft(value);\n setIsEditing(false);\n return;\n }\n if (trimmed !== value) {\n onSubmit(trimmed);\n }\n setIsEditing(false);\n };\n\n const cancel = () => {\n setDraft(value);\n setIsEditing(false);\n onCancel?.();\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n setDraft(event.target.value);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n commit();\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n if (event.defaultPrevented) return;\n if (event.key === \"Enter\") {\n event.preventDefault();\n commit();\n } else if (event.key === \"Escape\") {\n event.preventDefault();\n cancel();\n }\n };\n\n const showLeftIcon = Boolean(leftIcon) && !isEditing;\n const sizerText = (isEditing ? draft : value) \|\| placeholder \|\| \" \";\n\n return (\n <span\n data-testid=\"inline-edit\"\n className={cn(\"relative inline-block align-middle\", className)}\n >\n <span\n aria-hidden=\"true\"\n className={cn(\n \"typography-description-12px-semibold invisible block whitespace-pre border border-transparent px-3\",\n size === \"32\" ? \"h-8\" : \"h-10\",\n showLeftIcon && \"pl-9\",\n )}\n >\n {sizerText}\n </span>\n {isEditing ? (\n <Chip\n asChild\n dotted\n variant=\"square\"\n size={size}\n className=\"absolute inset-0 block h-auto w-full focus-within:shadow-focus-ring\"\n >\n <span>\n <input\n ref={setInputRef}\n type=\"text\"\n value={draft}\n placeholder={placeholder}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n aria-label={editLabel}\n data-testid=\"inline-edit-input\"\n className=\"block h-full w-full bg-transparent px-3 outline-none\"\n {...inputProps}\n />\n </span>\n </Chip>\n ) : (\n <Chip\n dotted\n variant=\"square\"\n size={size}\n disabled={disabled}\n leftIcon={leftIcon}\n onClick={enterEditMode}\n data-testid=\"inline-edit-trigger\"\n className=\"absolute inset-0 h-auto w-full cursor-text\"\n >\n {value}\n </Chip>\n )}\n </span>\n );\n },\n);\n\nInlineEdit.displayName = \"InlineEdit\";\n"],"names":["React","jsxs","cn","jsx","Chip"],"mappings":"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"}

package/dist/cjs/components/Logo/Logo.cjs CHANGED Viewed

@@ -42,14 +42,14 @@ const getLogoColors = (color, variant) => {
     return {
       icon: variant === "icon" ? "var(--primitives-color-gray-white)" : "var(--color-brand-primary-default)",
       iconInner: "var(--primitives-color-gray-black)",
-      textClass: "text-content-on-brand-inverted"
+      textClass: "text-content-always-white"
     };
   }
   if (color === "blackAlways") {
     return {
       icon: variant === "icon" ? "var(--primitives-color-gray-black)" : "var(--color-brand-primary-default)",
       iconInner: variant === "icon" ? "var(--primitives-color-gray-white)" : "var(--primitives-color-gray-black)",
-      textClass: "text-content-on-brand"
+      textClass: "text-content-always-black"
     };
   }
   return {