@fanvue/ui 3.7.2 → 3.9.0

package/dist/cjs/components/TextField/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CheckOutlineIcon } from \"@/index\";\nimport { cn } from \"../../utils/cn\";\n\n/** Text field height in pixels. */\nexport type TextFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\"> {\n  /** Label text displayed above the input. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the text field in pixels. @default \"48\" */\n  size?: TextFieldSize;\n  /** Whether the text field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text field is validated. @default false */\n  validated?: boolean;\n  /** Icon element displayed at the left side of the input. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed at the right side of the input. */\n  rightIcon?: React.ReactNode;\n  /** Whether the text field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<TextFieldSize, string> = {\n  \"48\": \"py-3 typography-body-default-16px-regular autofill-body-lg\",\n  \"40\": \"py-2 typography-body-default-16px-regular autofill-body-lg\",\n  \"32\": \"py-2 typography-body-small-14px-regular autofill-body-md\",\n};\n\nconst INPUT_PL: Record<TextFieldSize, { default: string; withIcon: string }> = {\n  \"48\": { default: \"pl-4\", withIcon: \"pl-10\" },\n  \"40\": { default: \"pl-4\", withIcon: \"pl-10\" },\n  \"32\": { default: \"pl-3\", withIcon: \"pl-9\" },\n};\n\nconst INPUT_PR: Record<TextFieldSize, { default: string; withIcon: string }> = {\n  \"48\": { default: \"pr-4\", withIcon: \"pr-10\" },\n  \"40\": { default: \"pr-4\", withIcon: \"pr-10\" },\n  \"32\": { default: \"pr-3\", withIcon: \"pr-9\" },\n};\n\nconst ICON_INSET: Record<TextFieldSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative overflow-hidden rounded-sm border bg-neutral-alphas-50 has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-content\" : \"border-transparent\",\n    !disabled && !error && \"hover:border-neutral-alphas-400\",\n    CONTAINER_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getInputClassName(size: TextFieldSize, hasLeftIcon: boolean, hasRightIcon: boolean) {\n  return cn(\n    \"h-full w-full rounded-sm bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed\",\n    INPUT_SIZE_CLASSES[size],\n    hasLeftIcon ? INPUT_PL[size].withIcon : INPUT_PL[size].default,\n    hasRightIcon ? INPUT_PR[size].withIcon : INPUT_PR[size].default,\n  );\n}\n\nfunction TextFieldHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-description-12px-regular px-2 pt-2 pb-0.5\",\n        error ? \"text-error-content\" : \"text-content-secondary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A text input field with optional label, helper/error text, and icon slots.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextField\n *   label=\"Email\"\n *   placeholder=\"you@example.com\"\n *   error={!!emailError}\n *   errorMessage={emailError}\n * />\n * ```\n */\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      leftIcon,\n      rightIcon,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-description-12px-semibold px-1 pt-1 pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          <input\n            ref={ref}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={bottomText ? helperTextId : undefined}\n            aria-invalid={error || undefined}\n            className={cn(\n              getInputClassName(size, !!leftIcon, !!(rightIcon || validated)),\n              \"[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none\",\n            )}\n            {...props}\n          />\n\n          {leftIcon && (\n            <div\n              className={cn(\n                \"pointer-events-none absolute inset-y-0 left-0 flex items-center text-content-secondary\",\n                ICON_INSET[size],\n              )}\n            >\n              <div className=\"flex size-4 shrink-0 items-center justify-center\">{leftIcon}</div>\n            </div>\n          )}\n\n          {(rightIcon || validated) && (\n            <div\n              className={cn(\n                \"absolute inset-y-0 right-0 flex items-center gap-2 text-content-secondary\",\n                ICON_INSET[size],\n              )}\n            >\n              {rightIcon && (\n                <div className=\"flex size-4 shrink-0 items-center justify-center\">{rightIcon}</div>\n              )}\n              {validated && (\n                <div className=\"pointer-events-none flex size-4 shrink-0 items-center justify-center\">\n                  <CheckOutlineIcon className=\"text-success-content\" />\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextFieldHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextFieldHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":["cn","jsx","React","jsxs","CheckOutlineIcon"],"mappings":"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"}
+{"version":3,"file":"TextField.cjs","sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CheckOutlineIcon } from \"@/index\";\nimport { cn } from \"../../utils/cn\";\n\n/** Text field height in pixels. */\nexport type TextFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\"> {\n  /** Label text displayed above the input. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the text field in pixels. @default \"48\" */\n  size?: TextFieldSize;\n  /** Whether the text field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text field is validated. @default false */\n  validated?: boolean;\n  /** Icon element displayed at the left side of the input. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed at the right side of the input. */\n  rightIcon?: React.ReactNode;\n  /** Whether the text field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<TextFieldSize, string> = {\n  \"48\": \"py-3 typography-body-default-16px-regular autofill-body-lg\",\n  \"40\": \"py-2 typography-body-default-16px-regular autofill-body-lg\",\n  \"32\": \"py-2 typography-body-small-14px-regular autofill-body-md\",\n};\n\nconst INPUT_PL: Record<TextFieldSize, { default: string; withIcon: string }> = {\n  \"48\": { default: \"pl-4\", withIcon: \"pl-10\" },\n  \"40\": { default: \"pl-4\", withIcon: \"pl-10\" },\n  \"32\": { default: \"pl-3\", withIcon: \"pl-9\" },\n};\n\nconst INPUT_PR: Record<TextFieldSize, { default: string; withIcon: string }> = {\n  \"48\": { default: \"pr-4\", withIcon: \"pr-10\" },\n  \"40\": { default: \"pr-4\", withIcon: \"pr-10\" },\n  \"32\": { default: \"pr-3\", withIcon: \"pr-9\" },\n};\n\nconst ICON_INSET: Record<TextFieldSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative overflow-hidden rounded-sm border bg-inputs-inputs-primary has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-content\" : \"border-border-primary\",\n    !disabled && !error && \"hover:border-neutral-alphas-400\",\n    CONTAINER_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getInputClassName(size: TextFieldSize, hasLeftIcon: boolean, hasRightIcon: boolean) {\n  return cn(\n    \"h-full w-full rounded-sm bg-transparent text-content-primary no-underline placeholder:text-content-tertiary focus:outline-none disabled:cursor-not-allowed\",\n    INPUT_SIZE_CLASSES[size],\n    hasLeftIcon ? INPUT_PL[size].withIcon : INPUT_PL[size].default,\n    hasRightIcon ? INPUT_PR[size].withIcon : INPUT_PR[size].default,\n  );\n}\n\nfunction TextFieldHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-description-12px-regular px-2 pt-2 pb-0.5\",\n        error ? \"text-error-content\" : \"text-content-secondary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A text input field with optional label, helper/error text, and icon slots.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextField\n *   label=\"Email\"\n *   placeholder=\"you@example.com\"\n *   error={!!emailError}\n *   errorMessage={emailError}\n * />\n * ```\n */\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      leftIcon,\n      rightIcon,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-description-12px-semibold pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          <input\n            ref={ref}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={bottomText ? helperTextId : undefined}\n            aria-invalid={error || undefined}\n            className={cn(\n              getInputClassName(size, !!leftIcon, !!(rightIcon || validated)),\n              \"[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none\",\n            )}\n            {...props}\n          />\n\n          {leftIcon && (\n            <div\n              className={cn(\n                \"pointer-events-none absolute inset-y-0 left-0 flex items-center text-content-secondary\",\n                ICON_INSET[size],\n              )}\n            >\n              <div className=\"flex size-4 shrink-0 items-center justify-center\">{leftIcon}</div>\n            </div>\n          )}\n\n          {(rightIcon || validated) && (\n            <div\n              className={cn(\n                \"absolute inset-y-0 right-0 flex items-center gap-2 text-content-secondary\",\n                ICON_INSET[size],\n              )}\n            >\n              {rightIcon && (\n                <div className=\"flex size-4 shrink-0 items-center justify-center\">{rightIcon}</div>\n              )}\n              {validated && (\n                <div className=\"pointer-events-none flex size-4 shrink-0 items-center justify-center\">\n                  <CheckOutlineIcon className=\"text-success-content\" />\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextFieldHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextFieldHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":["cn","jsx","React","jsxs","CheckOutlineIcon"],"mappings":"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"}

package/dist/cjs/components/Toast/Toast.cjs

@@ -7,7 +7,6 @@ const React = require("react");
 const cn = require("../../utils/cn.cjs");
 const Avatar = require("../Avatar/Avatar.cjs");
 const Button = require("../Button/Button.cjs");
-const IconButton = require("../IconButton/IconButton.cjs");
 const CloseIcon = require("../Icons/CloseIcon.cjs");
 const ErrorIcon = require("../Icons/ErrorIcon.cjs");
 const InfoIcon = require("../Icons/InfoIcon.cjs");
@@ -47,13 +46,13 @@ ToastViewport.displayName = "ToastViewport";
 const VariantIcon = ({ variant }) => {
   switch (variant) {
     case "info":
-      return /* @__PURE__ */ jsxRuntime.jsx(InfoIcon.InfoIcon, { className: "size-5 text-info-content" });
+      return /* @__PURE__ */ jsxRuntime.jsx(InfoIcon.InfoIcon, { size: 16, filled: true, className: "text-alerts-toast-icon-info" });
     case "warning":
-      return /* @__PURE__ */ jsxRuntime.jsx(WarningIcon.WarningIcon, { className: "size-5 text-warning-content" });
+      return /* @__PURE__ */ jsxRuntime.jsx(WarningIcon.WarningIcon, { size: 16, filled: true, className: "text-alerts-toast-icon-warning" });
     case "success":
-      return /* @__PURE__ */ jsxRuntime.jsx(SuccessIcon.SuccessIcon, { className: "size-5 text-success-content" });
+      return /* @__PURE__ */ jsxRuntime.jsx(SuccessIcon.SuccessIcon, { className: "size-4 text-alerts-toast-icon-success" });
     case "error":
-      return /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon.ErrorIcon, { className: "size-5 text-error-content" });
+      return /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon.ErrorIcon, { className: "size-4 text-alerts-toast-icon-error" });
   }
 };
 const Toast = React__namespace.forwardRef(
@@ -78,43 +77,30 @@ const Toast = React__namespace.forwardRef(
         ref,
         "data-testid": "toast",
         className: cn.cn(
-          // Base styles
-          "group pointer-events-auto relative flex w-full flex-col items-start gap-3 overflow-hidden rounded-xs border-none bg-surface-primary-inverted p-4 text-content-primary-inverted shadow-lg transition-all",
-          // Dark mode
-          "dark:border-opacity-100",
-          // Animation
+          "group pointer-events-auto relative flex w-full items-start gap-6 overflow-hidden rounded-md border-none bg-surface-primary-inverted py-3 pr-3 pl-4 text-content-primary-inverted shadow-md transition-all",
           "data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none",
-          // Manual CSS overrides
           className
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-start", children: variant === "messageToast" ? avatarSrc && /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { src: avatarSrc, alt: avatarAlt, fallback: avatarFallback }) : /* @__PURE__ */ jsxRuntime.jsx(VariantIcon, { variant }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-start", children: [
-              title && /* @__PURE__ */ jsxRuntime.jsx(ToastPrimitive__namespace.Title, { className: "typography-body-small-14px-semibold", children: title }),
-              description && /* @__PURE__ */ jsxRuntime.jsx(ToastPrimitive__namespace.Description, { className: "typography-body-small-14px-regular mt-1 opacity-90", children: description }),
-              children,
-              onActionClick && /* @__PURE__ */ jsxRuntime.jsx(
-                Button.Button,
-                {
-                  variant: "secondary",
-                  className: "mt-4 border-content-primary-inverted text-content-primary-inverted",
-                  size: "32",
-                  onClick: onActionClick,
-                  children: actionLabel ?? "Action"
-                }
-              )
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-3 py-1 pr-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center pt-px", children: variant === "messageToast" ? avatarSrc && /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { src: avatarSrc, alt: avatarAlt, fallback: avatarFallback }) : /* @__PURE__ */ jsxRuntime.jsx(VariantIcon, { variant }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-start gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start gap-1", children: [
+                title && /* @__PURE__ */ jsxRuntime.jsx(ToastPrimitive__namespace.Title, { className: "typography-body-small-14px-semibold", children: title }),
+                description && /* @__PURE__ */ jsxRuntime.jsx(ToastPrimitive__namespace.Description, { className: "typography-body-small-14px-regular", children: description }),
+                children
+              ] }),
+              onActionClick && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outline", negative: true, size: "32", onClick: onActionClick, children: actionLabel ?? "Action" })
             ] })
           ] }),
           showClose && /* @__PURE__ */ jsxRuntime.jsx(ToastPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-            IconButton.IconButton,
+            "button",
             {
-              icon: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon.CloseIcon, {}),
+              type: "button",
               "aria-label": closeLabel,
-              className: "absolute top-2 right-2 text-content-primary-inverted",
-              variant: "tertiary",
-              size: "24"
+              className: "flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-xs bg-buttons-secondary-negative-default text-content-primary-inverted transition-colors hover:bg-buttons-secondary-negative-hover focus-visible:shadow-focus-ring focus-visible:outline-none",
+              children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon.CloseIcon, { size: 16, "aria-hidden": "true" })
             }
           ) })
         ]

package/dist/cjs/components/Toast/Toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import * as ToastPrimitive from \"@radix-ui/react-toast\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { Button } from \"../Button/Button\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { ErrorIcon } from \"../Icons/ErrorIcon\";\nimport { InfoIcon } from \"../Icons/InfoIcon\";\nimport { SuccessIcon } from \"../Icons/SuccessIcon\";\nimport { WarningIcon } from \"../Icons/WarningIcon\";\n\n/** Visual/semantic variant of the toast notification. */\nexport type ToastVariant = \"info\" | \"warning\" | \"success\" | \"error\" | \"messageToast\";\n\nexport interface ToastProps\n  extends Omit<Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, \"type\">, \"title\"> {\n  /** Visual/semantic variant of the toast. @default \"info\" */\n  variant?: ToastVariant;\n  /** Title text displayed in bold at the top of the toast. */\n  title?: string;\n  /** Description or body content displayed below the title. */\n  description?: React.ReactNode;\n  /** Label for the optional action button. @default \"Action\" */\n  actionLabel?: string;\n  /** Click handler for the action button. When provided, the action button is rendered. */\n  onActionClick?: () => void;\n  /** Whether to show the close button. @default true */\n  showClose?: boolean;\n  /** Accessible label for the close button. @default \"Close notification\" */\n  closeLabel?: string;\n  /** Avatar image URL (used by the `messageToast` variant). */\n  avatarSrc?: string;\n  /** Alt text for the avatar image. */\n  avatarAlt?: string;\n  /** Fallback content for the avatar (e.g. initials). */\n  avatarFallback?: string;\n}\n\n/** Props for the {@link ToastProvider}. Wraps Radix `Toast.Provider`. */\nexport interface ToastProviderProps extends ToastPrimitive.ToastProviderProps {}\n/** Props for the {@link ToastViewport}. Controls where toasts are rendered on screen. */\nexport interface ToastViewportProps\n  extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport> {}\n\n/** Provides toast context. Wrap your application (or a subtree) with this provider. */\nexport const ToastProvider: React.FC<ToastProviderProps> = ToastPrimitive.Provider;\n\n/** Fixed-position container that renders active toasts. Place once at the root of your app. */\nexport const ToastViewport = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitive.Viewport>,\n  ToastViewportProps\n>(({ className, ...props }, ref) => (\n  <ToastPrimitive.Viewport\n    ref={ref}\n    className={cn(\n      \"pointer-events-none fixed right-0 bottom-0 z-100 flex max-h-screen w-full flex-col-reverse gap-3 p-4 md:max-w-[420px]\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nToastViewport.displayName = \"ToastViewport\";\n\nconst VariantIcon = ({ variant }: { variant: ToastVariant }) => {\n  switch (variant) {\n    case \"info\":\n      return <InfoIcon className=\"size-5 text-info-content\" />;\n    case \"warning\":\n      return <WarningIcon className=\"size-5 text-warning-content\" />;\n    case \"success\":\n      return <SuccessIcon className=\"size-5 text-success-content\" />;\n    case \"error\":\n      return <ErrorIcon className=\"size-5 text-error-content\" />;\n  }\n};\n\n/**\n * A dismissible notification that appears temporarily. Supports `info`,\n * `warning`, `success`, `error`, and `messageToast` variants with optional\n * action button, close control, and avatar.\n *\n * Use inside a {@link ToastProvider} with a {@link ToastViewport}.\n *\n * @example\n * ```tsx\n * <Toast variant=\"success\" title=\"Saved\" description=\"Your changes are live.\" />\n * ```\n */\nexport const Toast = React.forwardRef<React.ComponentRef<typeof ToastPrimitive.Root>, ToastProps>(\n  (\n    {\n      className,\n      variant = \"info\",\n      title,\n      description,\n      actionLabel,\n      onActionClick,\n      showClose = true,\n      closeLabel = \"Close notification\",\n      avatarSrc,\n      avatarAlt,\n      avatarFallback,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <ToastPrimitive.Root\n        ref={ref}\n        data-testid=\"toast\"\n        className={cn(\n          // Base styles\n          \"group pointer-events-auto relative flex w-full flex-col items-start gap-3 overflow-hidden rounded-xs border-none bg-surface-primary-inverted p-4 text-content-primary-inverted shadow-lg transition-all\",\n          // Dark mode\n          \"dark:border-opacity-100\",\n          // Animation\n          \"data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none\",\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex w-full items-center gap-3\">\n          <div className=\"self-start\">\n            {variant === \"messageToast\" ? (\n              avatarSrc && <Avatar src={avatarSrc} alt={avatarAlt} fallback={avatarFallback} />\n            ) : (\n              <VariantIcon variant={variant} />\n            )}\n          </div>\n          <div className=\"flex flex-1 flex-col items-start\">\n            {title && (\n              <ToastPrimitive.Title className=\"typography-body-small-14px-semibold\">\n                {title}\n              </ToastPrimitive.Title>\n            )}\n            {description && (\n              <ToastPrimitive.Description className=\"typography-body-small-14px-regular mt-1 opacity-90\">\n                {description}\n              </ToastPrimitive.Description>\n            )}\n            {children}\n            {onActionClick && (\n              <Button\n                variant=\"secondary\"\n                // These styles are basically inverted from the selected theme\n                className=\"mt-4 border-content-primary-inverted text-content-primary-inverted\"\n                size=\"32\"\n                onClick={onActionClick}\n              >\n                {actionLabel ?? \"Action\"}\n              </Button>\n            )}\n          </div>\n        </div>\n        {showClose && (\n          <ToastPrimitive.Close asChild>\n            <IconButton\n              icon={<CloseIcon />}\n              aria-label={closeLabel}\n              // same as the button above\n              className=\"absolute top-2 right-2 text-content-primary-inverted\"\n              variant=\"tertiary\"\n              size=\"24\"\n            />\n          </ToastPrimitive.Close>\n        )}\n      </ToastPrimitive.Root>\n    );\n  },\n);\n\nToast.displayName = \"Toast\";\n"],"names":["ToastPrimitive","React","jsx","cn","InfoIcon","WarningIcon","SuccessIcon","ErrorIcon","jsxs","Avatar","Button","IconButton","CloseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CO,MAAM,gBAA8CA,0BAAe;AAGnE,MAAM,gBAAgBC,iBAAM,WAGjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACF,0BAAe;AAAA,EAAf;AAAA,IACC;AAAA,IACA,WAAWG,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,cAAc,cAAc;AAE5B,MAAM,cAAc,CAAC,EAAE,cAAyC;AAC9D,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aAAOD,2BAAAA,IAACE,SAAAA,UAAA,EAAS,WAAU,2BAAA,CAA2B;AAAA,IACxD,KAAK;AACH,aAAOF,2BAAAA,IAACG,YAAAA,aAAA,EAAY,WAAU,8BAAA,CAA8B;AAAA,IAC9D,KAAK;AACH,aAAOH,2BAAAA,IAACI,YAAAA,aAAA,EAAY,WAAU,8BAAA,CAA8B;AAAA,IAC9D,KAAK;AACH,aAAOJ,2BAAAA,IAACK,UAAAA,WAAA,EAAU,WAAU,4BAAA,CAA4B;AAAA,EAAA;AAE9D;AAcO,MAAM,QAAQN,iBAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACEO,2BAAAA;AAAAA,MAACR,0BAAe;AAAA,MAAf;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWG,GAAAA;AAAAA;AAAAA,UAET;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAK,2BAAAA,KAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,YAAAN,2BAAAA,IAAC,SAAI,WAAU,cACZ,sBAAY,iBACX,4CAAcO,eAAA,EAAO,KAAK,WAAW,KAAK,WAAW,UAAU,eAAA,CAAgB,IAE/EP,2BAAAA,IAAC,aAAA,EAAY,SAAkB,EAAA,CAEnC;AAAA,YACAM,2BAAAA,KAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,cAAA,wCACER,0BAAe,OAAf,EAAqB,WAAU,uCAC7B,UAAA,OACH;AAAA,cAED,eACCE,2BAAAA,IAACF,0BAAe,aAAf,EAA2B,WAAU,sDACnC,UAAA,aACH;AAAA,cAED;AAAA,cACA,iBACCE,2BAAAA;AAAAA,gBAACQ,OAAAA;AAAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBAER,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,SAAS;AAAA,kBAER,UAAA,eAAe;AAAA,gBAAA;AAAA,cAAA;AAAA,YAClB,EAAA,CAEJ;AAAA,UAAA,GACF;AAAA,UACC,aACCR,2BAAAA,IAACF,0BAAe,OAAf,EAAqB,SAAO,MAC3B,UAAAE,2BAAAA;AAAAA,YAACS,WAAAA;AAAAA,YAAA;AAAA,cACC,qCAAOC,UAAAA,WAAA,EAAU;AAAA,cACjB,cAAY;AAAA,cAEZ,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,MAAK;AAAA,YAAA;AAAA,UAAA,EACP,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;;;;"}
+{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import * as ToastPrimitive from \"@radix-ui/react-toast\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { Button } from \"../Button/Button\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { ErrorIcon } from \"../Icons/ErrorIcon\";\nimport { InfoIcon } from \"../Icons/InfoIcon\";\nimport { SuccessIcon } from \"../Icons/SuccessIcon\";\nimport { WarningIcon } from \"../Icons/WarningIcon\";\n\n/** Visual/semantic variant of the toast notification. */\nexport type ToastVariant = \"info\" | \"warning\" | \"success\" | \"error\" | \"messageToast\";\n\nexport interface ToastProps\n  extends Omit<Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, \"type\">, \"title\"> {\n  /** Visual/semantic variant of the toast. @default \"info\" */\n  variant?: ToastVariant;\n  /** Title text displayed in bold at the top of the toast. */\n  title?: string;\n  /** Description or body content displayed below the title. */\n  description?: React.ReactNode;\n  /** Label for the optional action button. @default \"Action\" */\n  actionLabel?: string;\n  /** Click handler for the action button. When provided, the action button is rendered. */\n  onActionClick?: () => void;\n  /** Whether to show the close button. @default true */\n  showClose?: boolean;\n  /** Accessible label for the close button. @default \"Close notification\" */\n  closeLabel?: string;\n  /** Avatar image URL (used by the `messageToast` variant). */\n  avatarSrc?: string;\n  /** Alt text for the avatar image. */\n  avatarAlt?: string;\n  /** Fallback content for the avatar (e.g. initials). */\n  avatarFallback?: string;\n}\n\n/** Props for the {@link ToastProvider}. Wraps Radix `Toast.Provider`. */\nexport interface ToastProviderProps extends ToastPrimitive.ToastProviderProps {}\n/** Props for the {@link ToastViewport}. Controls where toasts are rendered on screen. */\nexport interface ToastViewportProps\n  extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport> {}\n\n/** Provides toast context. Wrap your application (or a subtree) with this provider. */\nexport const ToastProvider: React.FC<ToastProviderProps> = ToastPrimitive.Provider;\n\n/** Fixed-position container that renders active toasts. Place once at the root of your app. */\nexport const ToastViewport = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitive.Viewport>,\n  ToastViewportProps\n>(({ className, ...props }, ref) => (\n  <ToastPrimitive.Viewport\n    ref={ref}\n    className={cn(\n      \"pointer-events-none fixed right-0 bottom-0 z-100 flex max-h-screen w-full flex-col-reverse gap-3 p-4 md:max-w-[420px]\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nToastViewport.displayName = \"ToastViewport\";\n\nconst VariantIcon = ({ variant }: { variant: ToastVariant }) => {\n  switch (variant) {\n    case \"info\":\n      return <InfoIcon size={16} filled className=\"text-alerts-toast-icon-info\" />;\n    case \"warning\":\n      return <WarningIcon size={16} filled className=\"text-alerts-toast-icon-warning\" />;\n    case \"success\":\n      return <SuccessIcon className=\"size-4 text-alerts-toast-icon-success\" />;\n    case \"error\":\n      return <ErrorIcon className=\"size-4 text-alerts-toast-icon-error\" />;\n  }\n};\n\n/**\n * A dismissible notification that appears temporarily. Supports `info`,\n * `warning`, `success`, `error`, and `messageToast` variants with optional\n * action button, close control, and avatar.\n *\n * Use inside a {@link ToastProvider} with a {@link ToastViewport}.\n *\n * @example\n * ```tsx\n * <Toast variant=\"success\" title=\"Saved\" description=\"Your changes are live.\" />\n * ```\n */\nexport const Toast = React.forwardRef<React.ComponentRef<typeof ToastPrimitive.Root>, ToastProps>(\n  (\n    {\n      className,\n      variant = \"info\",\n      title,\n      description,\n      actionLabel,\n      onActionClick,\n      showClose = true,\n      closeLabel = \"Close notification\",\n      avatarSrc,\n      avatarAlt,\n      avatarFallback,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <ToastPrimitive.Root\n        ref={ref}\n        data-testid=\"toast\"\n        className={cn(\n          \"group pointer-events-auto relative flex w-full items-start gap-6 overflow-hidden rounded-md border-none bg-surface-primary-inverted py-3 pr-3 pl-4 text-content-primary-inverted shadow-md transition-all\",\n          \"data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex min-w-0 flex-1 items-start gap-3 py-1 pr-1\">\n          <div className=\"flex shrink-0 items-center pt-px\">\n            {variant === \"messageToast\" ? (\n              avatarSrc && <Avatar src={avatarSrc} alt={avatarAlt} fallback={avatarFallback} />\n            ) : (\n              <VariantIcon variant={variant} />\n            )}\n          </div>\n          <div className=\"flex min-w-0 flex-1 flex-col items-start gap-4\">\n            <div className=\"flex w-full flex-col items-start gap-1\">\n              {title && (\n                <ToastPrimitive.Title className=\"typography-body-small-14px-semibold\">\n                  {title}\n                </ToastPrimitive.Title>\n              )}\n              {description && (\n                <ToastPrimitive.Description className=\"typography-body-small-14px-regular\">\n                  {description}\n                </ToastPrimitive.Description>\n              )}\n              {children}\n            </div>\n            {onActionClick && (\n              <Button variant=\"outline\" negative size=\"32\" onClick={onActionClick}>\n                {actionLabel ?? \"Action\"}\n              </Button>\n            )}\n          </div>\n        </div>\n        {showClose && (\n          <ToastPrimitive.Close asChild>\n            <button\n              type=\"button\"\n              aria-label={closeLabel}\n              className=\"flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-xs bg-buttons-secondary-negative-default text-content-primary-inverted transition-colors hover:bg-buttons-secondary-negative-hover focus-visible:shadow-focus-ring focus-visible:outline-none\"\n            >\n              <CloseIcon size={16} aria-hidden=\"true\" />\n            </button>\n          </ToastPrimitive.Close>\n        )}\n      </ToastPrimitive.Root>\n    );\n  },\n);\n\nToast.displayName = \"Toast\";\n"],"names":["ToastPrimitive","React","jsx","cn","InfoIcon","WarningIcon","SuccessIcon","ErrorIcon","jsxs","Avatar","Button","CloseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CO,MAAM,gBAA8CA,0BAAe;AAGnE,MAAM,gBAAgBC,iBAAM,WAGjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACF,0BAAe;AAAA,EAAf;AAAA,IACC;AAAA,IACA,WAAWG,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,cAAc,cAAc;AAE5B,MAAM,cAAc,CAAC,EAAE,cAAyC;AAC9D,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,4CAAQC,mBAAA,EAAS,MAAM,IAAI,QAAM,MAAC,WAAU,+BAA8B;AAAA,IAC5E,KAAK;AACH,4CAAQC,yBAAA,EAAY,MAAM,IAAI,QAAM,MAAC,WAAU,kCAAiC;AAAA,IAClF,KAAK;AACH,aAAOH,2BAAAA,IAACI,YAAAA,aAAA,EAAY,WAAU,wCAAA,CAAwC;AAAA,IACxE,KAAK;AACH,aAAOJ,2BAAAA,IAACK,UAAAA,WAAA,EAAU,WAAU,sCAAA,CAAsC;AAAA,EAAA;AAExE;AAcO,MAAM,QAAQN,iBAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACEO,2BAAAA;AAAAA,MAACR,0BAAe;AAAA,MAAf;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWG,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAK,2BAAAA,KAAC,OAAA,EAAI,WAAU,mDACb,UAAA;AAAA,YAAAN,2BAAAA,IAAC,SAAI,WAAU,oCACZ,sBAAY,iBACX,4CAAcO,eAAA,EAAO,KAAK,WAAW,KAAK,WAAW,UAAU,eAAA,CAAgB,IAE/EP,2BAAAA,IAAC,aAAA,EAAY,SAAkB,EAAA,CAEnC;AAAA,YACAM,2BAAAA,KAAC,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,cAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,0CACZ,UAAA;AAAA,gBAAA,wCACER,0BAAe,OAAf,EAAqB,WAAU,uCAC7B,UAAA,OACH;AAAA,gBAED,eACCE,2BAAAA,IAACF,0BAAe,aAAf,EAA2B,WAAU,sCACnC,UAAA,aACH;AAAA,gBAED;AAAA,cAAA,GACH;AAAA,cACC,iBACCE,2BAAAA,IAACQ,OAAAA,QAAA,EAAO,SAAQ,WAAU,UAAQ,MAAC,MAAK,MAAK,SAAS,eACnD,UAAA,eAAe,SAAA,CAClB;AAAA,YAAA,EAAA,CAEJ;AAAA,UAAA,GACF;AAAA,UACC,aACCR,2BAAAA,IAACF,0BAAe,OAAf,EAAqB,SAAO,MAC3B,UAAAE,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,WAAU;AAAA,cAEV,UAAAA,2BAAAA,IAACS,qBAAA,EAAU,MAAM,IAAI,eAAY,OAAA,CAAO;AAAA,YAAA;AAAA,UAAA,EAC1C,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;;;;"}

package/dist/cjs/components/UserDisplayName/UserDisplayName.cjs

@@ -0,0 +1,67 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const VerifiedIcon = require("../Icons/VerifiedIcon.cjs");
+const ProfileOnlineStatus = require("../ProfileOnlineStatus/ProfileOnlineStatus.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const UserDisplayName = React__namespace.forwardRef(
+  ({
+    ambassador,
+    ambassadorLabel = "Ambassador",
+    children,
+    className,
+    component = "span",
+    noWrap = true,
+    onlineLabel = "Online",
+    showOnlineStatus,
+    verified,
+    verifiedLabel = "Verified",
+    ...props
+  }, ref) => {
+    const Component = component;
+    const badge = ambassador ? { label: ambassadorLabel, tint: "text-success-content" } : verified ? { label: verifiedLabel, tint: "text-content-primary" } : null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Component,
+      {
+        ref,
+        className: cn.cn("inline-flex max-w-full items-center", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn.cn("min-w-0", noWrap && "truncate"), children }),
+          badge && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              role: "img",
+              "aria-label": badge.label,
+              className: cn.cn("ml-2 inline-flex shrink-0 items-center", badge.tint),
+              children: /* @__PURE__ */ jsxRuntime.jsx(VerifiedIcon.VerifiedIcon, { size: 16 })
+            }
+          ),
+          showOnlineStatus && /* @__PURE__ */ jsxRuntime.jsx(ProfileOnlineStatus.ProfileOnlineStatus, { label: onlineLabel, className: "shrink-0 ml-2" })
+        ]
+      }
+    );
+  }
+);
+UserDisplayName.displayName = "UserDisplayName";
+exports.UserDisplayName = UserDisplayName;
+//# sourceMappingURL=UserDisplayName.cjs.map

package/dist/cjs/components/UserDisplayName/UserDisplayName.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserDisplayName.cjs","sources":["../../../../src/components/UserDisplayName/UserDisplayName.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { VerifiedIcon } from \"../Icons/VerifiedIcon\";\nimport { ProfileOnlineStatus } from \"../ProfileOnlineStatus/ProfileOnlineStatus\";\n\nexport interface UserDisplayNameProps extends React.HTMLAttributes<HTMLElement> {\n  /** Render an ambassador badge after the name. */\n  ambassador?: boolean;\n  /** Accessible label for the ambassador badge. @default \"Ambassador\" */\n  ambassadorLabel?: string;\n  /** HTML element used for the root wrapper. @default \"span\" */\n  component?: \"span\" | \"h1\" | \"h2\" | \"h3\" | \"p\" | \"div\";\n  /** Truncate the display name on a single line. @default true */\n  noWrap?: boolean;\n  /** Accessible label for the online-status indicator. @default \"Online\" */\n  onlineLabel?: string;\n  /** Render the inline online-status indicator after the name. @default false */\n  showOnlineStatus?: boolean;\n  /** Render a verified badge after the name (ignored when `ambassador` is set). */\n  verified?: boolean;\n  /** Accessible label for the verified badge. @default \"Verified\" */\n  verifiedLabel?: string;\n}\n\n/**\n * Renders a user's display name with optional ambassador/verified badges and an\n * online-status indicator. Only the name shrinks and truncates; trailing badges\n * and the online-status indicator stay visible on the same line.\n *\n * Typography is not baked in: pass a `typography-*` utility via `className` on\n * the root and the name inherits it. Use `typography-body-small-14px-semibold`\n * for the standard display-name scale.\n *\n * When both `ambassador` and `verified` are set, the ambassador badge takes\n * precedence. Its tint uses `text-success-content` (not `text-icons-brand-green`)\n * so the green darkens in light mode and lightens in dark mode, matching\n * {@link ProfileOnlineStatus}; `text-icons-brand-green` is fixed across modes.\n *\n * @example\n * ```tsx\n * <UserDisplayName className=\"typography-body-small-14px-semibold\">Jane Doe</UserDisplayName>\n * ```\n */\nexport const UserDisplayName = React.forwardRef<HTMLElement, UserDisplayNameProps>(\n  (\n    {\n      ambassador,\n      ambassadorLabel = \"Ambassador\",\n      children,\n      className,\n      component = \"span\",\n      noWrap = true,\n      onlineLabel = \"Online\",\n      showOnlineStatus,\n      verified,\n      verifiedLabel = \"Verified\",\n      ...props\n    },\n    ref,\n  ) => {\n    const Component = component as React.ElementType;\n\n    const badge = ambassador\n      ? { label: ambassadorLabel, tint: \"text-success-content\" }\n      : verified\n        ? { label: verifiedLabel, tint: \"text-content-primary\" }\n        : null;\n\n    return (\n      <Component\n        ref={ref}\n        className={cn(\"inline-flex max-w-full items-center\", className)}\n        {...props}\n      >\n        <span className={cn(\"min-w-0\", noWrap && \"truncate\")}>{children}</span>\n        {badge && (\n          <span\n            role=\"img\"\n            aria-label={badge.label}\n            className={cn(\"ml-2 inline-flex shrink-0 items-center\", badge.tint)}\n          >\n            <VerifiedIcon size={16} />\n          </span>\n        )}\n        {showOnlineStatus && <ProfileOnlineStatus label={onlineLabel} className=\"shrink-0 ml-2\" />}\n      </Component>\n    );\n  },\n);\n\nUserDisplayName.displayName = \"UserDisplayName\";\n"],"names":["React","jsxs","cn","jsx","VerifiedIcon","ProfileOnlineStatus"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA2CO,MAAM,kBAAkBA,iBAAM;AAAA,EACnC,CACE;AAAA,IACE;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY;AAElB,UAAM,QAAQ,aACV,EAAE,OAAO,iBAAiB,MAAM,uBAAA,IAChC,WACE,EAAE,OAAO,eAAe,MAAM,2BAC9B;AAEN,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,uCAAuC,SAAS;AAAA,QAC7D,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,+BAAC,UAAK,WAAWD,GAAAA,GAAG,WAAW,UAAU,UAAU,GAAI,UAAS;AAAA,UAC/D,SACCC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY,MAAM;AAAA,cAClB,WAAWD,GAAAA,GAAG,0CAA0C,MAAM,IAAI;AAAA,cAElE,UAAAC,2BAAAA,IAACC,aAAAA,cAAA,EAAa,MAAM,GAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAG3B,oBAAoBD,2BAAAA,IAACE,yCAAA,EAAoB,OAAO,aAAa,WAAU,gBAAA,CAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG9F;AACF;AAEA,gBAAgB,cAAc;;"}

package/dist/cjs/components/UserHandle/UserHandle.cjs

@@ -0,0 +1,46 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const HANDLE_SYMBOL = "@";
+const UserHandle = React__namespace.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        className: cn.cn(
+          "typography-body-small-14px-regular block max-w-full truncate text-content-secondary",
+          className
+        ),
+        ...props,
+        children: [
+          HANDLE_SYMBOL,
+          children
+        ]
+      }
+    );
+  }
+);
+UserHandle.displayName = "UserHandle";
+exports.UserHandle = UserHandle;
+//# sourceMappingURL=UserHandle.cjs.map

package/dist/cjs/components/UserHandle/UserHandle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserHandle.cjs","sources":["../../../../src/components/UserHandle/UserHandle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst HANDLE_SYMBOL = \"@\";\n\nexport interface UserHandleProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\n/**\n * Renders a user handle prefixed with the `@` symbol as muted, truncated\n * secondary text.\n *\n * @example\n * ```tsx\n * <UserHandle>jane_doe</UserHandle>\n * ```\n */\nexport const UserHandle = React.forwardRef<HTMLSpanElement, UserHandleProps>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          \"typography-body-small-14px-regular block max-w-full truncate text-content-secondary\",\n          className,\n        )}\n        {...props}\n      >\n        {HANDLE_SYMBOL}\n        {children}\n      </span>\n    );\n  },\n);\n\nUserHandle.displayName = \"UserHandle\";\n"],"names":["React","jsxs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAM,gBAAgB;AAaf,MAAM,aAAaA,iBAAM;AAAA,EAC9B,CAAC,EAAE,UAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,WAAW,cAAc;;"}

package/dist/cjs/components/UserItem/UserItem.cjs

@@ -0,0 +1,74 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const getInitials = require("../../utils/getInitials.cjs");
+const Avatar = require("../Avatar/Avatar.cjs");
+const BellOffIcon = require("../Icons/BellOffIcon.cjs");
+const UserDisplayName = require("../UserDisplayName/UserDisplayName.cjs");
+const UserHandle = require("../UserHandle/UserHandle.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const AVATAR_SIZES = [16, 24, 32, 40, 48, 64, 88, 148];
+const getNearestAvatarSize = (size) => AVATAR_SIZES.reduce(
+  (prev, curr) => Math.abs(curr - size) < Math.abs(prev - size) ? curr : prev
+);
+const UserItem = React__namespace.forwardRef(
+  ({
+    user,
+    avatarSize,
+    isOnline = false,
+    isMuted = false,
+    showOnlineStatus,
+    showHandle = true,
+    showAvatar = true,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn.cn("relative flex w-full items-center justify-start px-2 py-1", className),
+        ...props,
+        children: [
+          isMuted && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 z-1 flex rounded-xs bg-surface-primary p-1", children: /* @__PURE__ */ jsxRuntime.jsx(BellOffIcon.BellOffIcon, { size: 16 }) }),
+          showAvatar && /* @__PURE__ */ jsxRuntime.jsx(
+            Avatar.Avatar,
+            {
+              size: getNearestAvatarSize(avatarSize || 48),
+              src: user.avatarUri?.url,
+              alt: user.displayName,
+              fallback: getInitials.getInitials(user.displayName),
+              onlineIndicator: Boolean(showOnlineStatus && isOnline)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-hidden pl-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(UserDisplayName.UserDisplayName, { className: "typography-body-small-14px-semibold", children: user.nickname || user.displayName }),
+            showHandle && /* @__PURE__ */ jsxRuntime.jsx(UserHandle.UserHandle, { children: user.handle })
+          ] })
+        ]
+      }
+    );
+  }
+);
+UserItem.displayName = "UserItem";
+exports.UserItem = UserItem;
+//# sourceMappingURL=UserItem.cjs.map

package/dist/cjs/components/UserItem/UserItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserItem.cjs","sources":["../../../../src/components/UserItem/UserItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { getInitials } from \"../../utils/getInitials\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { BellOffIcon } from \"../Icons/BellOffIcon\";\nimport { UserDisplayName } from \"../UserDisplayName/UserDisplayName\";\nimport { UserHandle } from \"../UserHandle/UserHandle\";\n\nconst AVATAR_SIZES = [16, 24, 32, 40, 48, 64, 88, 148] as const;\ntype AvatarSizeToken = (typeof AVATAR_SIZES)[number];\n\n/** Snap an arbitrary pixel size to the nearest supported {@link Avatar} size token. */\nconst getNearestAvatarSize = (size: number): AvatarSizeToken =>\n  AVATAR_SIZES.reduce((prev, curr) =>\n    Math.abs(curr - size) < Math.abs(prev - size) ? curr : prev,\n  );\n\n/** Minimal user shape consumed by {@link UserItem}. */\nexport type UserItemUser = {\n  avatarUri?: { url: string; url2x?: string };\n  displayName: string;\n  handle: string;\n  nickname?: string;\n};\n\nexport interface UserItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The user to display. */\n  user: UserItemUser;\n  /** Desired avatar size in px; snapped to the nearest supported token. @default 48 */\n  avatarSize?: number;\n  /** Show the muted indicator in the bottom-left corner. @default false */\n  isMuted?: boolean;\n  /** Whether the user is online (only shown when `showOnlineStatus` is also set). @default false */\n  isOnline?: boolean;\n  /** Render the avatar. @default true */\n  showAvatar?: boolean;\n  /** Render the handle line under the display name. @default true */\n  showHandle?: boolean;\n  /** Enable the avatar online indicator (combined with `isOnline`). */\n  showOnlineStatus?: boolean;\n}\n\n/**\n * A compact user row showing an avatar, display name (or nickname) and handle,\n * with optional online and muted indicators.\n *\n * @example\n * ```tsx\n * <UserItem user={{ displayName: \"Jane Doe\", handle: \"jane_doe\" }} />\n * ```\n */\nexport const UserItem = React.forwardRef<HTMLDivElement, UserItemProps>(\n  (\n    {\n      user,\n      avatarSize,\n      isOnline = false,\n      isMuted = false,\n      showOnlineStatus,\n      showHandle = true,\n      showAvatar = true,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"relative flex w-full items-center justify-start px-2 py-1\", className)}\n        {...props}\n      >\n        {isMuted && (\n          <div className=\"absolute bottom-0 left-0 z-1 flex rounded-xs bg-surface-primary p-1\">\n            <BellOffIcon size={16} />\n          </div>\n        )}\n        {showAvatar && (\n          <Avatar\n            size={getNearestAvatarSize(avatarSize || 48)}\n            src={user.avatarUri?.url}\n            alt={user.displayName}\n            fallback={getInitials(user.displayName)}\n            onlineIndicator={Boolean(showOnlineStatus && isOnline)}\n          />\n        )}\n        <div className=\"flex-1 overflow-hidden pl-2\">\n          <UserDisplayName className=\"typography-body-small-14px-semibold\">\n            {user.nickname || user.displayName}\n          </UserDisplayName>\n          {showHandle && <UserHandle>{user.handle}</UserHandle>}\n        </div>\n      </div>\n    );\n  },\n);\n\nUserItem.displayName = \"UserItem\";\n"],"names":["React","jsxs","cn","jsx","BellOffIcon","Avatar","getInitials","UserDisplayName","UserHandle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,eAAe,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;AAIrD,MAAM,uBAAuB,CAAC,SAC5B,aAAa;AAAA,EAAO,CAAC,MAAM,SACzB,KAAK,IAAI,OAAO,IAAI,IAAI,KAAK,IAAI,OAAO,IAAI,IAAI,OAAO;AACzD;AAoCK,MAAM,WAAWA,iBAAM;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,aAAa;AAAA,IACb,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,6DAA6D,SAAS;AAAA,QACnF,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,WACCC,2BAAAA,IAAC,SAAI,WAAU,uEACb,yCAACC,YAAAA,aAAA,EAAY,MAAM,IAAI,EAAA,CACzB;AAAA,UAED,cACCD,2BAAAA;AAAAA,YAACE,OAAAA;AAAAA,YAAA;AAAA,cACC,MAAM,qBAAqB,cAAc,EAAE;AAAA,cAC3C,KAAK,KAAK,WAAW;AAAA,cACrB,KAAK,KAAK;AAAA,cACV,UAAUC,YAAAA,YAAY,KAAK,WAAW;AAAA,cACtC,iBAAiB,QAAQ,oBAAoB,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,UAGzDL,2BAAAA,KAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,YAAAE,+BAACI,gBAAAA,mBAAgB,WAAU,uCACxB,UAAA,KAAK,YAAY,KAAK,aACzB;AAAA,YACC,cAAcJ,2BAAAA,IAACK,WAAAA,YAAA,EAAY,UAAA,KAAK,OAAA,CAAO;AAAA,UAAA,EAAA,CAC1C;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,SAAS,cAAc;;"}

package/dist/cjs/index.cjs

@@ -31,6 +31,7 @@ const Divider = require("./components/Divider/Divider.cjs");
 const Drawer = require("./components/Drawer/Drawer.cjs");
 const DropdownMenu = require("./components/DropdownMenu/DropdownMenu.cjs");
 const EmptyState = require("./components/EmptyState/EmptyState.cjs");
+const FanFollowerCount = require("./components/FanFollowerCount/FanFollowerCount.cjs");
 const IconButton = require("./components/IconButton/IconButton.cjs");
 const AddIcon = require("./components/Icons/AddIcon.cjs");
 const AffiliatesIcon = require("./components/Icons/AffiliatesIcon.cjs");
@@ -100,6 +101,7 @@ const ForwardIcon = require("./components/Icons/ForwardIcon.cjs");
 const GalleryIcon = require("./components/Icons/GalleryIcon.cjs");
 const GameIcon = require("./components/Icons/GameIcon.cjs");
 const GenderIcon = require("./components/Icons/GenderIcon.cjs");
+const GifIcon = require("./components/Icons/GifIcon.cjs");
 const GiftIcon = require("./components/Icons/GiftIcon.cjs");
 const GoogleIcon = require("./components/Icons/GoogleIcon.cjs");
 const HealthIcon = require("./components/Icons/HealthIcon.cjs");
@@ -184,6 +186,7 @@ const UserIcon = require("./components/Icons/UserIcon.cjs");
 const UserMenuIcon = require("./components/Icons/UserMenuIcon.cjs");
 const UsersIcon = require("./components/Icons/UsersIcon.cjs");
 const VaultIcon = require("./components/Icons/VaultIcon.cjs");
+const VerifiedIcon = require("./components/Icons/VerifiedIcon.cjs");
 const VideoIcon = require("./components/Icons/VideoIcon.cjs");
 const VipBadgeIcon = require("./components/Icons/VipBadgeIcon.cjs");
 const WalletIcon = require("./components/Icons/WalletIcon.cjs");
@@ -195,6 +198,7 @@ const WifiOnIcon = require("./components/Icons/WifiOnIcon.cjs");
 const WrenchIcon = require("./components/Icons/WrenchIcon.cjs");
 const InfoBox = require("./components/InfoBox/InfoBox.cjs");
 const InlineEdit = require("./components/InlineEdit/InlineEdit.cjs");
+const Link = require("./components/Link/Link.cjs");
 const Loader = require("./components/Loader/Loader.cjs");
 const Logo = require("./components/Logo/Logo.cjs");
 const MobileStepper = require("./components/MobileStepper/MobileStepper.cjs");
@@ -202,9 +206,13 @@ const OnlineBlinkingIcon = require("./components/OnlineBlinkingIcon/OnlineBlinki
 const Pagination = require("./components/Pagination/Pagination.cjs");
 const PasswordField = require("./components/PasswordField/PasswordField.cjs");
 const Pill = require("./components/Pill/Pill.cjs");
+const ProfileOnlineStatus = require("./components/ProfileOnlineStatus/ProfileOnlineStatus.cjs");
+const ProfileStatus = require("./components/ProfileStatus/ProfileStatus.cjs");
 const ProgressBar = require("./components/ProgressBar/ProgressBar.cjs");
 const Radio = require("./components/Radio/Radio.cjs");
 const RadioGroup = require("./components/RadioGroup/RadioGroup.cjs");
+const RatingSummary = require("./components/RatingSummary/RatingSummary.cjs");
+const ReviewCard = require("./components/ReviewCard/ReviewCard.cjs");
 const SearchField = require("./components/SearchField/SearchField.cjs");
 const Select = require("./components/Select/Select.cjs");
 const Skeleton = require("./components/Skeleton/Skeleton.cjs");
@@ -225,7 +233,11 @@ const TextArea = require("./components/TextArea/TextArea.cjs");
 const TextField = require("./components/TextField/TextField.cjs");
 const Toast = require("./components/Toast/Toast.cjs");
 const Tooltip = require("./components/Tooltip/Tooltip.cjs");
+const UserDisplayName = require("./components/UserDisplayName/UserDisplayName.cjs");
+const UserHandle = require("./components/UserHandle/UserHandle.cjs");
+const UserItem = require("./components/UserItem/UserItem.cjs");
 const cn = require("./utils/cn.cjs");
+const getInitials = require("./utils/getInitials.cjs");
 const useSuppressClickAfterDrag = require("./utils/useSuppressClickAfterDrag.cjs");
 Object.defineProperty(exports, "Slot", {
   enumerable: true,
@@ -303,6 +315,7 @@ exports.DropdownMenuRadioItem = DropdownMenu.DropdownMenuRadioItem;
 exports.DropdownMenuSeparator = DropdownMenu.DropdownMenuSeparator;
 exports.DropdownMenuTrigger = DropdownMenu.DropdownMenuTrigger;
 exports.EmptyState = EmptyState.EmptyState;
+exports.FanFollowerCount = FanFollowerCount.FanFollowerCount;
 exports.IconButton = IconButton.IconButton;
 exports.AddIcon = AddIcon.AddIcon;
 exports.AffiliatesIcon = AffiliatesIcon.AffiliatesIcon;
@@ -372,6 +385,7 @@ exports.ForwardIcon = ForwardIcon.ForwardIcon;
 exports.GalleryIcon = GalleryIcon.GalleryIcon;
 exports.GameIcon = GameIcon.GameIcon;
 exports.GenderIcon = GenderIcon.GenderIcon;
+exports.GifIcon = GifIcon.GifIcon;
 exports.GiftIcon = GiftIcon.GiftIcon;
 exports.GoogleIcon = GoogleIcon.GoogleIcon;
 exports.HealthIcon = HealthIcon.HealthIcon;
@@ -456,6 +470,7 @@ exports.UserIcon = UserIcon.UserIcon;
 exports.UserMenuIcon = UserMenuIcon.UserMenuIcon;
 exports.UsersIcon = UsersIcon.UsersIcon;
 exports.VaultIcon = VaultIcon.VaultIcon;
+exports.VerifiedIcon = VerifiedIcon.VerifiedIcon;
 exports.VideoIcon = VideoIcon.VideoIcon;
 exports.VipBadgeIcon = VipBadgeIcon.VipBadgeIcon;
 exports.WalletIcon = WalletIcon.WalletIcon;
@@ -469,6 +484,7 @@ exports.InfoBox = InfoBox.InfoBox;
 exports.InfoBoxContent = InfoBox.InfoBoxContent;
 exports.InfoBoxTrigger = InfoBox.InfoBoxTrigger;
 exports.InlineEdit = InlineEdit.InlineEdit;
+exports.Link = Link.Link;
 exports.Loader = Loader.Loader;
 exports.Logo = Logo.Logo;
 exports.MobileStepper = MobileStepper.MobileStepper;
@@ -476,9 +492,13 @@ exports.OnlineBlinkingIcon = OnlineBlinkingIcon.OnlineBlinkingIcon;
 exports.Pagination = Pagination.Pagination;
 exports.PasswordField = PasswordField.PasswordField;
 exports.Pill = Pill.Pill;
+exports.ProfileOnlineStatus = ProfileOnlineStatus.ProfileOnlineStatus;
+exports.ProfileStatus = ProfileStatus.ProfileStatus;
 exports.ProgressBar = ProgressBar.ProgressBar;
 exports.Radio = Radio.Radio;
 exports.RadioGroup = RadioGroup.RadioGroup;
+exports.RatingSummary = RatingSummary.RatingSummary;
+exports.ReviewCard = ReviewCard.ReviewCard;
 exports.SearchField = SearchField.SearchField;
 exports.Select = Select.Select;
 exports.SelectContent = Select.SelectContent;
@@ -528,6 +548,10 @@ exports.Tooltip = Tooltip.Tooltip;
 exports.TooltipContent = Tooltip.TooltipContent;
 exports.TooltipProvider = Tooltip.TooltipProvider;
 exports.TooltipTrigger = Tooltip.TooltipTrigger;
+exports.UserDisplayName = UserDisplayName.UserDisplayName;
+exports.UserHandle = UserHandle.UserHandle;
+exports.UserItem = UserItem.UserItem;
 exports.cn = cn.cn;
+exports.getInitials = getInitials.getInitials;
 exports.useSuppressClickAfterDrag = useSuppressClickAfterDrag.useSuppressClickAfterDrag;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/utils/getInitials.cjs

@@ -0,0 +1,10 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const cleanSpaces = (str) => str.trim().replace(/\s+/g, " ");
+const getInitials = (str) => {
+  if (!str) return "";
+  return cleanSpaces(str).split(" ").map((word) => word.length ? ([...word][0] ?? "").toUpperCase() : "").slice(0, 2).join("");
+};
+exports.getInitials = getInitials;
+//# sourceMappingURL=getInitials.cjs.map

package/dist/cjs/utils/getInitials.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getInitials.cjs","sources":["../../../src/utils/getInitials.ts"],"sourcesContent":["/** Trim leading/trailing whitespace and collapse internal runs of whitespace to a single space. */\nconst cleanSpaces = (str: string): string => str.trim().replace(/\\s+/g, \" \");\n\n/**\n * Returns the first letters of the first one or two words in a given string, capitalized.\n * @example\n *   getInitials(\"Ciao Bello\"); // \"CB\"\n *   getInitials(\"JavaScript\"); // \"J\"\n *   getInitials(undefined); // \"\"\n */\nexport const getInitials = (str?: string | null): string => {\n  if (!str) return \"\";\n  return cleanSpaces(str)\n    .split(\" \")\n    .map((word) => (word.length ? ([...word][0] ?? \"\").toUpperCase() : \"\"))\n    .slice(0, 2)\n    .join(\"\");\n};\n"],"names":[],"mappings":";;;AACA,MAAM,cAAc,CAAC,QAAwB,IAAI,OAAO,QAAQ,QAAQ,GAAG;AASpE,MAAM,cAAc,CAAC,QAAgC;AAC1D,MAAI,CAAC,IAAK,QAAO;AACjB,SAAO,YAAY,GAAG,EACnB,MAAM,GAAG,EACT,IAAI,CAAC,SAAU,KAAK,UAAU,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,YAAA,IAAgB,EAAG,EACrE,MAAM,GAAG,CAAC,EACV,KAAK,EAAE;AACZ;;"}