@fanvue/ui 3.8.0 → 3.9.0

package/dist/cjs/components/Link/Link.cjs

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

package/dist/cjs/components/Link/Link.cjs.map

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

package/dist/cjs/components/Pill/Pill.cjs

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

package/dist/cjs/components/Pill/Pill.cjs.map

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

package/dist/cjs/components/ProfileStatus/ProfileStatus.cjs

@@ -0,0 +1,51 @@
+"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 sizeClasses = {
+  sm: "size-2",
+  md: "size-3"
+};
+const ProfileStatus = React__namespace.forwardRef(
+  ({ className, active = true, size = "sm", ...props }, ref) => {
+    const hasAccessibleLabel = props["aria-label"] != null || props["aria-labelledby"] != null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        role: hasAccessibleLabel ? "img" : void 0,
+        "aria-hidden": hasAccessibleLabel ? void 0 : true,
+        className: cn.cn(
+          "relative inline-block rounded-full border border-border-background",
+          sizeClasses[size],
+          active ? "bg-messages-status-active" : "bg-messages-status-inactive",
+          className
+        ),
+        ...props,
+        children: active && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 animate-ping rounded-full bg-messages-status-active opacity-75" })
+      }
+    );
+  }
+);
+ProfileStatus.displayName = "ProfileStatus";
+exports.ProfileStatus = ProfileStatus;
+//# sourceMappingURL=ProfileStatus.cjs.map

package/dist/cjs/components/ProfileStatus/ProfileStatus.cjs.map

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

package/dist/cjs/components/Radio/Radio.cjs

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

package/dist/cjs/components/Radio/Radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.cjs","sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface RadioProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, \"asChild\"> {\n  /** Size variant controlling label and helper text typography. @default \"default\" */\n  size?: \"default\" | \"small\";\n  /** Label text displayed next to the radio button. */\n  label?: string;\n  /** Descriptive text displayed below the label. */\n  helperText?: string;\n}\n\n/**\n * A single radio option within a {@link RadioGroup}. Includes an optional label\n * and helper text.\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <Radio value=\"a\" label=\"Option A\" />\n *   <Radio value=\"b\" label=\"Option B\" />\n * </RadioGroup>\n * ```\n */\nexport const Radio = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n  RadioProps\n>(({ className, size = \"default\", label, helperText, id, ...props }, ref) => {\n  const generatedId = React.useId();\n  const inputId = id || generatedId;\n  const helperTextId = `${inputId}-helper`;\n\n  return (\n    <div className={cn(\"group inline-flex items-center gap-2\", className)}>\n      <RadioGroupPrimitive.Item\n        ref={ref}\n        id={inputId}\n        data-testid=\"radio\"\n        aria-describedby={helperText ? helperTextId : undefined}\n        className={cn(\n          \"relative h-4 w-4 shrink-0 cursor-pointer appearance-none rounded-full border border-content-primary bg-transparent transition-colors hover:bg-brand-primary-muted focus-visible:shadow-focus-ring focus-visible:outline-none not-disabled:active:bg-brand-primary-muted disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:bg-transparent data-[state=checked]:border-content-primary data-[state=checked]:bg-transparent\",\n          helperText && \"mt-1 self-start\",\n        )}\n        {...props}\n      >\n        <RadioGroupPrimitive.Indicator className=\"absolute inset-0 flex items-center justify-center\">\n          <span className=\"size-2 rounded-full bg-content-primary group-has-disabled:bg-neutral-alphas-600\" />\n        </RadioGroupPrimitive.Indicator>\n      </RadioGroupPrimitive.Item>\n      {(label || helperText) && (\n        <div className=\"flex flex-col gap-0.5\">\n          {label && (\n            <label\n              htmlFor={inputId}\n              className={cn(\n                \"cursor-pointer select-none text-content-primary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n                size === \"small\"\n                  ? \"typography-body-small-14px-semibold\"\n                  : \"typography-body-default-16px-semibold\",\n              )}\n            >\n              {label}\n            </label>\n          )}\n          {helperText && (\n            <span\n              id={helperTextId}\n              className={cn(\n                \"text-content-secondary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n                size === \"small\"\n                  ? \"typography-body-small-14px-semibold\"\n                  : \"typography-description-12px-regular\",\n              )}\n            >\n              {helperText}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n});\n\nRadio.displayName = \"Radio\";\n"],"names":["React","cn","jsx","RadioGroupPrimitive","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BO,MAAM,QAAQA,iBAAM,WAGzB,CAAC,EAAE,WAAW,OAAO,WAAW,OAAO,YAAY,IAAI,GAAG,MAAA,GAAS,QAAQ;AAC3E,QAAM,cAAcA,iBAAM,MAAA;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,eAAe,GAAG,OAAO;AAE/B,yCACG,OAAA,EAAI,WAAWC,GAAAA,GAAG,wCAAwC,SAAS,GAClE,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACC,+BAAoB;AAAA,MAApB;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,eAAY;AAAA,QACZ,oBAAkB,aAAa,eAAe;AAAA,QAC9C,WAAWF,GAAAA;AAAAA,UACT;AAAA,UACA,cAAc;AAAA,QAAA;AAAA,QAEf,GAAG;AAAA,QAEJ,UAAAC,2BAAAA,IAACC,+BAAoB,WAApB,EAA8B,WAAU,qDACvC,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,kFAAA,CAAkF,EAAA,CACpG;AAAA,MAAA;AAAA,IAAA;AAAA,KAEA,SAAS,eACTE,2BAAAA,KAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,MAAA,SACCF,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,WAAWD,GAAAA;AAAAA,YACT;AAAA,YACA,SAAS,UACL,wCACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,cACCC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAWD,GAAAA;AAAAA,YACT;AAAA,YACA,SAAS,UACL,wCACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CAEJ;AAAA,EAAA,GAEJ;AAEJ,CAAC;AAED,MAAM,cAAc;;"}
+{"version":3,"file":"Radio.cjs","sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Placement of the radio button relative to its label. */\nexport type RadioLayout = \"leading\" | \"trailing\";\n\nexport interface RadioProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, \"asChild\"> {\n  /** Size variant controlling label and helper text typography. @default \"default\" */\n  size?: \"default\" | \"small\";\n  /** Label text displayed next to the radio button. */\n  label?: string;\n  /** Descriptive text displayed below the label. */\n  helperText?: string;\n  /**\n   * Placement of the radio button. `\"leading\"` renders it before the label;\n   * `\"trailing\"` pushes it to the far end of the row (for list rows). @default \"leading\"\n   */\n  layout?: RadioLayout;\n  /**\n   * Optional avatar shown alongside the label, for options that represent a\n   * person or account. Pass an {@link Avatar} sized to `32`.\n   */\n  avatar?: React.ReactNode;\n}\n\n/**\n * A single radio option within a {@link RadioGroup}. Supports leading or\n * trailing button placement, an optional avatar, a label, and helper text.\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <Radio value=\"a\" label=\"Option A\" />\n *   <Radio value=\"b\" label=\"Option B\" layout=\"trailing\" />\n * </RadioGroup>\n * ```\n */\nexport const Radio = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n  RadioProps\n>(\n  (\n    { className, size = \"default\", label, helperText, layout = \"leading\", avatar, id, ...props },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const hasContent = Boolean(label || helperText || avatar);\n    // Avatar + helper text reads better centered as a group; otherwise align to the first line.\n    const centerWithAvatar = Boolean(avatar && helperText);\n\n    const button = (\n      <RadioGroupPrimitive.Item\n        ref={ref}\n        id={inputId}\n        data-testid=\"radio\"\n        aria-describedby={helperText ? helperTextId : undefined}\n        className={cn(\n          \"relative h-4 w-4 shrink-0 cursor-pointer appearance-none rounded-full border border-content-primary bg-transparent transition-colors hover:bg-brand-primary-muted focus-visible:shadow-focus-ring focus-visible:outline-none not-disabled:active:bg-brand-primary-muted disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:bg-transparent data-[state=checked]:border-content-primary data-[state=checked]:bg-transparent\",\n          hasContent &&\n            !centerWithAvatar &&\n            (avatar ? \"mt-2\" : size === \"small\" ? \"mt-px\" : \"mt-1\"),\n        )}\n        {...props}\n      >\n        <RadioGroupPrimitive.Indicator className=\"absolute inset-0 flex items-center justify-center\">\n          <span className=\"size-2 rounded-full bg-content-primary group-has-disabled:bg-neutral-alphas-600\" />\n        </RadioGroupPrimitive.Indicator>\n      </RadioGroupPrimitive.Item>\n    );\n\n    const content = hasContent && (\n      <div\n        className={cn(\n          \"flex min-w-0 flex-1 gap-3\",\n          centerWithAvatar ? \"items-center\" : \"items-start\",\n        )}\n      >\n        {avatar && (\n          <span className=\"shrink-0 group-has-disabled:opacity-60\" aria-hidden=\"true\">\n            {avatar}\n          </span>\n        )}\n        {(label || helperText) && (\n          <div className={cn(\"flex flex-col gap-0.5\", avatar && !centerWithAvatar && \"pt-1\")}>\n            {label && (\n              <label\n                htmlFor={inputId}\n                className={cn(\n                  \"cursor-pointer select-none text-content-primary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n                  size === \"small\"\n                    ? \"typography-body-small-14px-semibold\"\n                    : \"typography-body-default-16px-semibold\",\n                )}\n              >\n                {label}\n              </label>\n            )}\n            {helperText && (\n              <span\n                id={helperTextId}\n                className={cn(\n                  \"text-content-secondary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n                  size === \"small\"\n                    ? \"typography-body-small-14px-semibold\"\n                    : \"typography-description-12px-regular\",\n                )}\n              >\n                {helperText}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n\n    return (\n      <div\n        className={cn(\n          \"group gap-3\",\n          // Full width only for trailing (button to far end); leading keeps intrinsic width for inline groups.\n          layout === \"trailing\" ? \"flex w-full\" : \"inline-flex\",\n          centerWithAvatar ? \"items-center\" : \"items-start\",\n          className,\n        )}\n      >\n        {layout === \"leading\" && button}\n        {content}\n        {layout === \"trailing\" && button}\n      </div>\n    );\n  },\n);\n\nRadio.displayName = \"Radio\";\n"],"names":["React","jsx","RadioGroupPrimitive","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuCO,MAAM,QAAQA,iBAAM;AAAA,EAIzB,CACE,EAAE,WAAW,OAAO,WAAW,OAAO,YAAY,SAAS,WAAW,QAAQ,IAAI,GAAG,MAAA,GACrF,QACG;AACH,UAAM,cAAcA,iBAAM,MAAA;AAC1B,UAAM,UAAU,MAAM;AACtB,UAAM,eAAe,GAAG,OAAO;AAC/B,UAAM,aAAa,QAAQ,SAAS,cAAc,MAAM;AAExD,UAAM,mBAAmB,QAAQ,UAAU,UAAU;AAErD,UAAM,SACJC,2BAAAA;AAAAA,MAACC,+BAAoB;AAAA,MAApB;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,eAAY;AAAA,QACZ,oBAAkB,aAAa,eAAe;AAAA,QAC9C,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,cACE,CAAC,qBACA,SAAS,SAAS,SAAS,UAAU,UAAU;AAAA,QAAA;AAAA,QAEnD,GAAG;AAAA,QAEJ,UAAAF,2BAAAA,IAACC,+BAAoB,WAApB,EAA8B,WAAU,qDACvC,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,kFAAA,CAAkF,EAAA,CACpG;AAAA,MAAA;AAAA,IAAA;AAIJ,UAAM,UAAU,cACdG,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,GAAAA;AAAAA,UACT;AAAA,UACA,mBAAmB,iBAAiB;AAAA,QAAA;AAAA,QAGrC,UAAA;AAAA,UAAA,yCACE,QAAA,EAAK,WAAU,0CAAyC,eAAY,QAClE,UAAA,QACH;AAAA,WAEA,SAAS,eACTC,gCAAC,OAAA,EAAI,WAAWD,MAAG,yBAAyB,UAAU,CAAC,oBAAoB,MAAM,GAC9E,UAAA;AAAA,YAAA,SACCF,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS;AAAA,gBACT,WAAWE,GAAAA;AAAAA,kBACT;AAAA,kBACA,SAAS,UACL,wCACA;AAAA,gBAAA;AAAA,gBAGL,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGJ,cACCF,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI;AAAA,gBACJ,WAAWE,GAAAA;AAAAA,kBACT;AAAA,kBACA,SAAS,UACL,wCACA;AAAA,gBAAA;AAAA,gBAGL,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,EAAA,CAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAKN,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,GAAAA;AAAAA,UACT;AAAA;AAAA,UAEA,WAAW,aAAa,gBAAgB;AAAA,UACxC,mBAAmB,iBAAiB;AAAA,UACpC;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,UAAA,WAAW,aAAa;AAAA,UACxB;AAAA,UACA,WAAW,cAAc;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGhC;AACF;AAEA,MAAM,cAAc;;"}

package/dist/cjs/components/Select/Select.cjs

@@ -83,7 +83,7 @@ const Select = React__namespace.forwardRef(
             "label",
             {
               htmlFor: triggerId,
-              className: "typography-description-12px-semibold px-1 pt-1 pb-2 text-content-primary",
+              className: "typography-description-12px-semibold pb-2 text-content-primary",
               children: label
             }
           ),
@@ -98,12 +98,12 @@ const Select = React__namespace.forwardRef(
                 "aria-describedby": bottomText ? helperTextId : void 0,
                 "aria-invalid": error || void 0,
                 className: cn.cn(
-                  "flex w-full cursor-pointer items-center justify-between rounded-sm border bg-neutral-alphas-50 outline-none motion-safe:transition-colors focus-visible:shadow-focus-ring",
+                  "flex w-full cursor-pointer items-center justify-between rounded-sm border bg-inputs-inputs-primary outline-none motion-safe:transition-colors focus-visible:shadow-focus-ring",
                   TRIGGER_HEIGHT[size],
                   TRIGGER_PADDING_X[size],
                   TRIGGER_GAP[size],
                   TRIGGER_TYPOGRAPHY[size],
-                  error ? "border-error-content" : "border-transparent",
+                  error ? "border-error-content" : "border-border-primary",
                   !disabled && !error && "hover:border-neutral-alphas-400 data-[state=open]:border-neutral-alphas-400",
                   disabled && "cursor-not-allowed opacity-50"
                 ),
@@ -117,7 +117,7 @@ const Select = React__namespace.forwardRef(
                         children: leftIcon
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-left text-content-primary [&>[data-placeholder]]:text-content-secondary [&>[data-placeholder]]:opacity-40", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { placeholder }) })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-left text-content-primary [&>[data-placeholder]]:text-content-tertiary", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { placeholder }) })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon.ChevronDownIcon, {}) })
                 ]

package/dist/cjs/components/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"@/utils/floatingContentCollisionPadding\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Select field height in pixels. */\nexport type SelectSize = \"48\" | \"40\" | \"32\";\n\ntype SelectContextValue = {\n  size: SelectSize;\n  error: boolean;\n  disabled?: boolean;\n};\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  size: \"48\",\n  error: false,\n});\n\nconst TRIGGER_HEIGHT: Record<SelectSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst TRIGGER_PADDING_X: Record<SelectSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst TRIGGER_GAP: Record<SelectSize, string> = {\n  \"48\": \"gap-3\",\n  \"40\": \"gap-3\",\n  \"32\": \"gap-2\",\n};\n\nconst TRIGGER_TYPOGRAPHY: Record<SelectSize, string> = {\n  \"48\": \"typography-body-default-16px-regular\",\n  \"40\": \"typography-body-default-16px-regular\",\n  \"32\": \"typography-body-small-14px-regular\",\n};\n\nexport interface SelectProps extends Omit<SelectPrimitive.SelectProps, \"dir\"> {\n  /** Label text displayed above the trigger. Also used as the accessible name. */\n  label?: string;\n  /** Accessible name applied directly to the trigger button when no visible `label` is provided. */\n  \"aria-label\"?: string;\n  /** ID of an external element that labels the trigger button. */\n  \"aria-labelledby\"?: string;\n  /** Helper text displayed below the trigger. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the select field in pixels. @default \"48\" */\n  size?: SelectSize;\n  /** Whether the field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the trigger. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Icon element displayed at the left side of the trigger. */\n  leftIcon?: React.ReactNode;\n  /** Whether the field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Wraps the `className` of the outermost container div. */\n  className?: string;\n  /** HTML `id` applied to the trigger button. Auto-generated if omitted. */\n  id?: string;\n}\n\n/**\n * A select field with optional label, helper/error text, and an icon slot,\n * built on Radix UI Select for full accessibility and keyboard navigation.\n *\n * Pair with {@link SelectContent} and {@link SelectItem} to provide options.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" placeholder=\"Select a country\">\n *   <SelectContent>\n *     <SelectItem value=\"us\">United States</SelectItem>\n *     <SelectItem value=\"uk\">United Kingdom</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nexport const Select = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Trigger>,\n  SelectProps\n>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      placeholder,\n      leftIcon,\n      fullWidth = false,\n      className,\n      id,\n      disabled,\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const triggerId = id ?? generatedId;\n    const helperTextId = `${triggerId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    return (\n      <SelectContext.Provider value={{ size, error, disabled }}>\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={triggerId}\n              className=\"typography-description-12px-semibold px-1 pt-1 pb-2 text-content-primary\"\n            >\n              {label}\n            </label>\n          )}\n\n          <SelectPrimitive.Root disabled={disabled} {...props}>\n            <SelectPrimitive.Trigger\n              ref={ref}\n              id={triggerId}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledby}\n              aria-describedby={bottomText ? helperTextId : undefined}\n              aria-invalid={error || undefined}\n              className={cn(\n                \"flex w-full cursor-pointer items-center justify-between rounded-sm border bg-neutral-alphas-50 outline-none motion-safe:transition-colors focus-visible:shadow-focus-ring\",\n                TRIGGER_HEIGHT[size],\n                TRIGGER_PADDING_X[size],\n                TRIGGER_GAP[size],\n                TRIGGER_TYPOGRAPHY[size],\n                error ? \"border-error-content\" : \"border-transparent\",\n                !disabled &&\n                  !error &&\n                  \"hover:border-neutral-alphas-400 data-[state=open]:border-neutral-alphas-400\",\n                disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              <div className=\"flex min-w-0 items-center gap-2\">\n                {leftIcon && (\n                  <span\n                    className=\"flex size-5 shrink-0 items-center justify-center text-content-secondary\"\n                    data-testid=\"left-icon\"\n                  >\n                    {leftIcon}\n                  </span>\n                )}\n                <span className=\"min-w-0 flex-1 truncate text-left text-content-primary [&>[data-placeholder]]:text-content-secondary [&>[data-placeholder]]:opacity-40\">\n                  <SelectPrimitive.Value placeholder={placeholder} />\n                </span>\n              </div>\n\n              <SelectPrimitive.Icon asChild>\n                <ChevronDownIcon />\n              </SelectPrimitive.Icon>\n            </SelectPrimitive.Trigger>\n\n            {children}\n          </SelectPrimitive.Root>\n\n          {bottomText && (\n            <p\n              id={helperTextId}\n              className={cn(\n                \"typography-description-12px-regular px-2 pt-1 pb-0.5\",\n                error ? \"text-error-content\" : \"text-content-secondary\",\n              )}\n            >\n              {bottomText}\n            </p>\n          )}\n        </div>\n      </SelectContext.Provider>\n    );\n  },\n);\n\nSelect.displayName = \"Select\";\n\nexport interface SelectContentProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {}\n\n/**\n * The dropdown panel rendered inside a portal. Place {@link SelectItem} elements\n * (and optionally {@link SelectGroup} / {@link SelectLabel}) as children.\n */\nexport const SelectContent = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Content>,\n  SelectContentProps\n>(\n  (\n    {\n      className,\n      children,\n      position = \"popper\",\n      sideOffset = 4,\n      collisionPadding = FLOATING_CONTENT_COLLISION_PADDING,\n      style,\n      ...props\n    },\n    ref,\n  ) => (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        ref={ref}\n        position={position}\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n        className={cn(\n          \"relative w-max min-w-(--radix-select-trigger-width) max-w-(--radix-select-content-available-width) overflow-hidden rounded-sm border border-neutral-alphas-200 bg-background-primary text-content-primary shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n          \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n          \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n          \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n          \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          className,\n        )}\n        {...props}\n      >\n        <SelectPrimitive.Viewport className=\"max-h-[var(--radix-select-content-available-height)] overflow-y-auto p-1\">\n          {children}\n        </SelectPrimitive.Viewport>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  ),\n);\n\nSelectContent.displayName = \"SelectContent\";\n\nexport interface SelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {}\n\n/**\n * An individual option inside {@link SelectContent}.\n */\nexport const SelectItem = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Item>,\n  SelectItemProps\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"typography-body-default-16px-regular relative flex w-full cursor-pointer select-none items-center gap-2 rounded-xs py-2 pr-2 pl-3 text-content-primary outline-none\",\n      \"focus:bg-neutral-alphas-100 data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    <SelectPrimitive.ItemIndicator className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n      <CheckIcon className=\"size-4 text-content-primary\" />\n    </SelectPrimitive.ItemIndicator>\n  </SelectPrimitive.Item>\n));\n\nSelectItem.displayName = \"SelectItem\";\n\n/** Props for {@link SelectGroup}. */\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\n\n/**\n * Groups related {@link SelectItem} elements under a {@link SelectLabel}.\n */\nexport const SelectGroup = SelectPrimitive.Group;\nSelectGroup.displayName = \"SelectGroup\";\n\nexport interface SelectLabelProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {}\n\n/**\n * A non-interactive label shown above a {@link SelectGroup}.\n */\nexport const SelectLabel = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Label>,\n  SelectLabelProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"typography-description-12px-semibold px-3 py-1.5 text-content-secondary\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nSelectLabel.displayName = \"SelectLabel\";\n\nexport interface SelectSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {}\n\n/** A horizontal rule that visually separates groups in {@link SelectContent}. */\nexport const SelectSeparator = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Separator>,\n  SelectSeparatorProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-neutral-alphas-200\", className)}\n    {...props}\n  />\n));\n\nSelectSeparator.displayName = \"SelectSeparator\";\n"],"names":["React","jsx","jsxs","cn","SelectPrimitive","ChevronDownIcon","FLOATING_CONTENT_COLLISION_PADDING","CheckIcon"],"mappings":"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"}
+{"version":3,"file":"Select.cjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"@/utils/floatingContentCollisionPadding\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Select field height in pixels. */\nexport type SelectSize = \"48\" | \"40\" | \"32\";\n\ntype SelectContextValue = {\n  size: SelectSize;\n  error: boolean;\n  disabled?: boolean;\n};\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  size: \"48\",\n  error: false,\n});\n\nconst TRIGGER_HEIGHT: Record<SelectSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst TRIGGER_PADDING_X: Record<SelectSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst TRIGGER_GAP: Record<SelectSize, string> = {\n  \"48\": \"gap-3\",\n  \"40\": \"gap-3\",\n  \"32\": \"gap-2\",\n};\n\nconst TRIGGER_TYPOGRAPHY: Record<SelectSize, string> = {\n  \"48\": \"typography-body-default-16px-regular\",\n  \"40\": \"typography-body-default-16px-regular\",\n  \"32\": \"typography-body-small-14px-regular\",\n};\n\nexport interface SelectProps extends Omit<SelectPrimitive.SelectProps, \"dir\"> {\n  /** Label text displayed above the trigger. Also used as the accessible name. */\n  label?: string;\n  /** Accessible name applied directly to the trigger button when no visible `label` is provided. */\n  \"aria-label\"?: string;\n  /** ID of an external element that labels the trigger button. */\n  \"aria-labelledby\"?: string;\n  /** Helper text displayed below the trigger. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the select field in pixels. @default \"48\" */\n  size?: SelectSize;\n  /** Whether the field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the trigger. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Icon element displayed at the left side of the trigger. */\n  leftIcon?: React.ReactNode;\n  /** Whether the field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Wraps the `className` of the outermost container div. */\n  className?: string;\n  /** HTML `id` applied to the trigger button. Auto-generated if omitted. */\n  id?: string;\n}\n\n/**\n * A select field with optional label, helper/error text, and an icon slot,\n * built on Radix UI Select for full accessibility and keyboard navigation.\n *\n * Pair with {@link SelectContent} and {@link SelectItem} to provide options.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" placeholder=\"Select a country\">\n *   <SelectContent>\n *     <SelectItem value=\"us\">United States</SelectItem>\n *     <SelectItem value=\"uk\">United Kingdom</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nexport const Select = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Trigger>,\n  SelectProps\n>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      placeholder,\n      leftIcon,\n      fullWidth = false,\n      className,\n      id,\n      disabled,\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const triggerId = id ?? generatedId;\n    const helperTextId = `${triggerId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    return (\n      <SelectContext.Provider value={{ size, error, disabled }}>\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={triggerId}\n              className=\"typography-description-12px-semibold pb-2 text-content-primary\"\n            >\n              {label}\n            </label>\n          )}\n\n          <SelectPrimitive.Root disabled={disabled} {...props}>\n            <SelectPrimitive.Trigger\n              ref={ref}\n              id={triggerId}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledby}\n              aria-describedby={bottomText ? helperTextId : undefined}\n              aria-invalid={error || undefined}\n              className={cn(\n                \"flex w-full cursor-pointer items-center justify-between rounded-sm border bg-inputs-inputs-primary outline-none motion-safe:transition-colors focus-visible:shadow-focus-ring\",\n                TRIGGER_HEIGHT[size],\n                TRIGGER_PADDING_X[size],\n                TRIGGER_GAP[size],\n                TRIGGER_TYPOGRAPHY[size],\n                error ? \"border-error-content\" : \"border-border-primary\",\n                !disabled &&\n                  !error &&\n                  \"hover:border-neutral-alphas-400 data-[state=open]:border-neutral-alphas-400\",\n                disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              <div className=\"flex min-w-0 items-center gap-2\">\n                {leftIcon && (\n                  <span\n                    className=\"flex size-5 shrink-0 items-center justify-center text-content-secondary\"\n                    data-testid=\"left-icon\"\n                  >\n                    {leftIcon}\n                  </span>\n                )}\n                <span className=\"min-w-0 flex-1 truncate text-left text-content-primary [&>[data-placeholder]]:text-content-tertiary\">\n                  <SelectPrimitive.Value placeholder={placeholder} />\n                </span>\n              </div>\n\n              <SelectPrimitive.Icon asChild>\n                <ChevronDownIcon />\n              </SelectPrimitive.Icon>\n            </SelectPrimitive.Trigger>\n\n            {children}\n          </SelectPrimitive.Root>\n\n          {bottomText && (\n            <p\n              id={helperTextId}\n              className={cn(\n                \"typography-description-12px-regular px-2 pt-1 pb-0.5\",\n                error ? \"text-error-content\" : \"text-content-secondary\",\n              )}\n            >\n              {bottomText}\n            </p>\n          )}\n        </div>\n      </SelectContext.Provider>\n    );\n  },\n);\n\nSelect.displayName = \"Select\";\n\nexport interface SelectContentProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {}\n\n/**\n * The dropdown panel rendered inside a portal. Place {@link SelectItem} elements\n * (and optionally {@link SelectGroup} / {@link SelectLabel}) as children.\n */\nexport const SelectContent = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Content>,\n  SelectContentProps\n>(\n  (\n    {\n      className,\n      children,\n      position = \"popper\",\n      sideOffset = 4,\n      collisionPadding = FLOATING_CONTENT_COLLISION_PADDING,\n      style,\n      ...props\n    },\n    ref,\n  ) => (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        ref={ref}\n        position={position}\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n        className={cn(\n          \"relative w-max min-w-(--radix-select-trigger-width) max-w-(--radix-select-content-available-width) overflow-hidden rounded-sm border border-neutral-alphas-200 bg-background-primary text-content-primary shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n          \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n          \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n          \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n          \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          className,\n        )}\n        {...props}\n      >\n        <SelectPrimitive.Viewport className=\"max-h-[var(--radix-select-content-available-height)] overflow-y-auto p-1\">\n          {children}\n        </SelectPrimitive.Viewport>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  ),\n);\n\nSelectContent.displayName = \"SelectContent\";\n\nexport interface SelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {}\n\n/**\n * An individual option inside {@link SelectContent}.\n */\nexport const SelectItem = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Item>,\n  SelectItemProps\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"typography-body-default-16px-regular relative flex w-full cursor-pointer select-none items-center gap-2 rounded-xs py-2 pr-2 pl-3 text-content-primary outline-none\",\n      \"focus:bg-neutral-alphas-100 data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    <SelectPrimitive.ItemIndicator className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n      <CheckIcon className=\"size-4 text-content-primary\" />\n    </SelectPrimitive.ItemIndicator>\n  </SelectPrimitive.Item>\n));\n\nSelectItem.displayName = \"SelectItem\";\n\n/** Props for {@link SelectGroup}. */\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\n\n/**\n * Groups related {@link SelectItem} elements under a {@link SelectLabel}.\n */\nexport const SelectGroup = SelectPrimitive.Group;\nSelectGroup.displayName = \"SelectGroup\";\n\nexport interface SelectLabelProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {}\n\n/**\n * A non-interactive label shown above a {@link SelectGroup}.\n */\nexport const SelectLabel = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Label>,\n  SelectLabelProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"typography-description-12px-semibold px-3 py-1.5 text-content-secondary\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nSelectLabel.displayName = \"SelectLabel\";\n\nexport interface SelectSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {}\n\n/** A horizontal rule that visually separates groups in {@link SelectContent}. */\nexport const SelectSeparator = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Separator>,\n  SelectSeparatorProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-neutral-alphas-200\", className)}\n    {...props}\n  />\n));\n\nSelectSeparator.displayName = \"SelectSeparator\";\n"],"names":["React","jsx","jsxs","cn","SelectPrimitive","ChevronDownIcon","FLOATING_CONTENT_COLLISION_PADDING","CheckIcon"],"mappings":"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"}

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

@@ -50,8 +50,8 @@ const ICON_INSET = {
 };
 function getContainerClassName(size, error, disabled) {
   return cn.cn(
-    "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",
-    error ? "border-error-content" : "border-transparent",
+    "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",
+    error ? "border-error-content" : "border-border-primary",
     !disabled && !error && "hover:border-neutral-alphas-400",
     CONTAINER_HEIGHT[size],
     disabled && "opacity-50"
@@ -59,7 +59,7 @@ function getContainerClassName(size, error, disabled) {
 }
 function getInputClassName(size, hasLeftIcon, hasRightIcon) {
   return cn.cn(
-    "h-full w-full rounded-sm bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed",
+    "h-full w-full rounded-sm bg-transparent text-content-primary no-underline placeholder:text-content-tertiary focus:outline-none disabled:cursor-not-allowed",
     INPUT_SIZE_CLASSES[size],
     hasLeftIcon ? INPUT_PL[size].withIcon : INPUT_PL[size].default,
     hasRightIcon ? INPUT_PR[size].withIcon : INPUT_PR[size].default
@@ -123,7 +123,7 @@ const TextField = React__namespace.forwardRef(
             "label",
             {
               htmlFor: inputId,
-              className: "typography-description-12px-semibold px-1 pt-1 pb-2 text-content-primary",
+              className: "typography-description-12px-semibold pb-2 text-content-primary",
               children: label
             }
           ),

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/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");
@@ -197,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");
@@ -205,6 +207,7 @@ 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");
@@ -312,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;
@@ -480,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;
@@ -488,6 +493,7 @@ 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;