@fanvue/ui 3.7.2 → 3.9.0

package/dist/cjs/components/ProfileOnlineStatus/ProfileOnlineStatus.cjs

@@ -0,0 +1,44 @@
+"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 OnlineBlinkingIcon = require("../OnlineBlinkingIcon/OnlineBlinkingIcon.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 ProfileOnlineStatus = React__namespace.forwardRef(
+  ({ className, label = "Online", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref,
+      className: cn.cn(
+        "typography-description-12px-regular inline-flex items-center gap-1 text-success-content",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(OnlineBlinkingIcon.OnlineBlinkingIcon, {}),
+        label
+      ]
+    }
+  )
+);
+ProfileOnlineStatus.displayName = "ProfileOnlineStatus";
+exports.ProfileOnlineStatus = ProfileOnlineStatus;
+//# sourceMappingURL=ProfileOnlineStatus.cjs.map

package/dist/cjs/components/ProfileOnlineStatus/ProfileOnlineStatus.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileOnlineStatus.cjs","sources":["../../../../src/components/ProfileOnlineStatus/ProfileOnlineStatus.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { OnlineBlinkingIcon } from \"../OnlineBlinkingIcon/OnlineBlinkingIcon\";\n\nexport interface ProfileOnlineStatusProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Visible status label rendered next to the indicator. @default \"Online\" */\n  label?: string;\n}\n\n/**\n * Inline online-status indicator: a pulsing dot followed by a label. Used by\n * {@link UserDisplayName} when `showOnlineStatus` is set.\n */\nexport const ProfileOnlineStatus = React.forwardRef<HTMLSpanElement, ProfileOnlineStatusProps>(\n  ({ className, label = \"Online\", ...props }, ref) => (\n    <span\n      ref={ref}\n      className={cn(\n        \"typography-description-12px-regular inline-flex items-center gap-1 text-success-content\",\n        className,\n      )}\n      {...props}\n    >\n      <OnlineBlinkingIcon />\n      {label}\n    </span>\n  ),\n);\n\nProfileOnlineStatus.displayName = \"ProfileOnlineStatus\";\n"],"names":["React","jsxs","cn","jsx","OnlineBlinkingIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,sBAAsBA,iBAAM;AAAA,EACvC,CAAC,EAAE,WAAW,QAAQ,UAAU,GAAG,MAAA,GAAS,QAC1CC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,2BAAAA,IAACC,mBAAAA,oBAAA,EAAmB;AAAA,QACnB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,oBAAoB,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/RatingSummary/RatingSummary.cjs

@@ -0,0 +1,103 @@
+"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 StarIcon = require("../Icons/StarIcon.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);
+function defaultFormatCount(count) {
+  return `${count.toLocaleString()} ${count === 1 ? "review" : "reviews"}`;
+}
+function getWeightedAverage(distribution) {
+  let total = 0;
+  let weighted = 0;
+  for (const { rating, count } of distribution) {
+    total += count;
+    weighted += rating * count;
+  }
+  return total === 0 ? 0 : weighted / total;
+}
+const RatingSummary = React__namespace.forwardRef(
+  ({
+    distribution,
+    averageRating,
+    maxRating = 5,
+    formatCount = defaultFormatCount,
+    formatAverageLabel,
+    formatRatingLabel,
+    className,
+    ...props
+  }, ref) => {
+    const countByRating = /* @__PURE__ */ new Map();
+    for (const { rating, count } of distribution) {
+      countByRating.set(rating, (countByRating.get(rating) ?? 0) + count);
+    }
+    const rows = Array.from({ length: maxRating }, (_, index) => {
+      const rating = maxRating - index;
+      return { rating, count: countByRating.get(rating) ?? 0 };
+    });
+    const totalCount = rows.reduce((sum, row) => sum + row.count, 0);
+    const maxCount = rows.reduce((max, row) => Math.max(max, row.count), 0);
+    const average = averageRating ?? getWeightedAverage(rows);
+    const averageLabel = average.toFixed(1);
+    const headerLabel = formatAverageLabel ? formatAverageLabel(averageLabel, maxRating, totalCount) : `Average rating ${averageLabel} out of ${maxRating}, ${formatCount(totalCount)}`;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn.cn("flex flex-col gap-4", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", role: "img", "aria-label": headerLabel, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StarIcon.StarIcon, { size: 24, filled: true, className: "shrink-0 text-brand-primary-default" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-small-14px-semibold text-content-primary", children: averageLabel }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typography-body-small-14px-regular text-content-tertiary", children: [
+            "(",
+            formatCount(totalCount),
+            ")"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col gap-4 p-0", "aria-label": "Rating breakdown", children: rows.map(({ rating, count }) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex items-center gap-4",
+          role: "img",
+          "aria-label": formatRatingLabel ? formatRatingLabel(rating, count) : `${rating} ${rating === 1 ? "star" : "stars"}, ${formatCount(count)}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-4 flex-1 overflow-hidden rounded-full bg-neutral-alphas-50", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute inset-y-0 left-0 rounded-full bg-brand-primary-default transition-[width] duration-300 ease-in-out",
+                style: { width: maxCount === 0 ? "0%" : `${count / maxCount * 100}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-small-14px-semibold text-content-primary", children: rating }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typography-body-small-14px-regular text-content-tertiary", children: [
+                "(",
+                formatCount(count),
+                ")"
+              ] })
+            ] })
+          ]
+        }
+      ) }, rating)) })
+    ] });
+  }
+);
+RatingSummary.displayName = "RatingSummary";
+exports.RatingSummary = RatingSummary;
+//# sourceMappingURL=RatingSummary.cjs.map

package/dist/cjs/components/RatingSummary/RatingSummary.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingSummary.cjs","sources":["../../../../src/components/RatingSummary/RatingSummary.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { StarIcon } from \"../Icons/StarIcon\";\n\n/** A single rating value paired with the number of reviews that gave it. */\nexport interface RatingCount {\n  /** The rating value this entry represents (e.g. `5`). */\n  rating: number;\n  /** Number of reviews that gave this rating. */\n  count: number;\n}\n\nexport interface RatingSummaryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /**\n   * Per-rating review counts. Order is not significant — rows always render from\n   * `maxRating` down to `1`, and any rating without an entry renders as zero.\n   * Entries are expected to use whole-number ratings within `1`–`maxRating`;\n   * any outside that range are ignored, including in the derived total and average.\n   */\n  distribution: RatingCount[];\n  /**\n   * Average rating shown in the header. Defaults to the count-weighted mean of\n   * `distribution`; provide it to display a server-computed average instead.\n   */\n  averageRating?: number;\n  /** Highest possible rating. Sets how many histogram rows render. @default 5 */\n  maxRating?: number;\n  /**\n   * Formats a review count into its label, without surrounding parentheses.\n   * Used for the visible text and as the count portion of the default\n   * accessible labels.\n   * @default ``(count) => `${count.toLocaleString()} review(s)` ``\n   */\n  formatCount?: (count: number) => string;\n  /**\n   * Builds the accessible label for the header. Override to localise the\n   * screen-reader text. `average` is the already-formatted average string.\n   * @default ``(average, max, total) => `Average rating ${average} out of ${max}, ${formatCount(total)}` ``\n   */\n  formatAverageLabel?: (average: string, maxRating: number, total: number) => string;\n  /**\n   * Builds the accessible label for each histogram row. Override to localise the\n   * screen-reader text.\n   * @default ``(rating, count) => `${rating} star(s), ${formatCount(count)}` ``\n   */\n  formatRatingLabel?: (rating: number, count: number) => string;\n}\n\nfunction defaultFormatCount(count: number): string {\n  return `${count.toLocaleString()} ${count === 1 ? \"review\" : \"reviews\"}`;\n}\n\nfunction getWeightedAverage(distribution: RatingCount[]): number {\n  let total = 0;\n  let weighted = 0;\n  for (const { rating, count } of distribution) {\n    total += count;\n    weighted += rating * count;\n  }\n  return total === 0 ? 0 : weighted / total;\n}\n\n/**\n * An aggregated rating overview: a headline average with the total review count,\n * followed by a per-rating histogram. Bar lengths are scaled relative to the\n * most-reviewed rating, so the busiest rating always fills the track.\n *\n * The brand star is decorative; the header and each histogram row expose\n * `role=\"img\"` with an accessible label (override via `formatAverageLabel` /\n * `formatRatingLabel`) so the single-star-plus-number reads clearly.\n *\n * @example\n * ```tsx\n * <RatingSummary\n *   distribution={[\n *     { rating: 5, count: 300 },\n *     { rating: 4, count: 20 },\n *     { rating: 3, count: 20 },\n *     { rating: 2, count: 10 },\n *     { rating: 1, count: 0 },\n *   ]}\n * />\n * ```\n */\nexport const RatingSummary = React.forwardRef<HTMLDivElement, RatingSummaryProps>(\n  (\n    {\n      distribution,\n      averageRating,\n      maxRating = 5,\n      formatCount = defaultFormatCount,\n      formatAverageLabel,\n      formatRatingLabel,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const countByRating = new Map<number, number>();\n    for (const { rating, count } of distribution) {\n      countByRating.set(rating, (countByRating.get(rating) ?? 0) + count);\n    }\n\n    const rows = Array.from({ length: maxRating }, (_, index) => {\n      const rating = maxRating - index;\n      return { rating, count: countByRating.get(rating) ?? 0 };\n    });\n\n    const totalCount = rows.reduce((sum, row) => sum + row.count, 0);\n    const maxCount = rows.reduce((max, row) => Math.max(max, row.count), 0);\n    const average = averageRating ?? getWeightedAverage(rows);\n    const averageLabel = average.toFixed(1);\n\n    const headerLabel = formatAverageLabel\n      ? formatAverageLabel(averageLabel, maxRating, totalCount)\n      : `Average rating ${averageLabel} out of ${maxRating}, ${formatCount(totalCount)}`;\n\n    return (\n      <div ref={ref} className={cn(\"flex flex-col gap-4\", className)} {...props}>\n        <div className=\"flex items-center gap-1\" role=\"img\" aria-label={headerLabel}>\n          <StarIcon size={24} filled className=\"shrink-0 text-brand-primary-default\" />\n          <span className=\"flex items-center gap-1.5\">\n            <span className=\"typography-body-small-14px-semibold text-content-primary\">\n              {averageLabel}\n            </span>\n            <span className=\"typography-body-small-14px-regular text-content-tertiary\">\n              ({formatCount(totalCount)})\n            </span>\n          </span>\n        </div>\n\n        <ul className=\"m-0 flex list-none flex-col gap-4 p-0\" aria-label=\"Rating breakdown\">\n          {rows.map(({ rating, count }) => (\n            <li key={rating}>\n              <div\n                className=\"flex items-center gap-4\"\n                role=\"img\"\n                aria-label={\n                  formatRatingLabel\n                    ? formatRatingLabel(rating, count)\n                    : `${rating} ${rating === 1 ? \"star\" : \"stars\"}, ${formatCount(count)}`\n                }\n              >\n                <div className=\"relative h-4 flex-1 overflow-hidden rounded-full bg-neutral-alphas-50\">\n                  <div\n                    className=\"absolute inset-y-0 left-0 rounded-full bg-brand-primary-default transition-[width] duration-300 ease-in-out\"\n                    style={{ width: maxCount === 0 ? \"0%\" : `${(count / maxCount) * 100}%` }}\n                  />\n                </div>\n                <span className=\"flex shrink-0 items-center gap-1.5\">\n                  <span className=\"typography-body-small-14px-semibold text-content-primary\">\n                    {rating}\n                  </span>\n                  <span className=\"typography-body-small-14px-regular text-content-tertiary\">\n                    ({formatCount(count)})\n                  </span>\n                </span>\n              </div>\n            </li>\n          ))}\n        </ul>\n      </div>\n    );\n  },\n);\n\nRatingSummary.displayName = \"RatingSummary\";\n"],"names":["React","jsxs","cn","jsx","StarIcon"],"mappings":"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"}

package/dist/cjs/components/ReviewCard/ReviewCard.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");
+const StarIcon = require("../Icons/StarIcon.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 ReviewCard = React__namespace.forwardRef(
+  ({ rating, maxRating = 5, author, title, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn.cn("flex flex-col gap-2", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StarIcon.StarIcon, { size: 24, filled: true, className: "shrink-0 text-brand-primary-default" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "typography-body-small-14px-semibold text-content-primary",
+            role: "img",
+            "aria-label": `Rated ${rating} out of ${maxRating}`,
+            children: rating
+          }
+        ),
+        author != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typography-body-small-14px-regular text-content-tertiary", children: [
+          "by ",
+          author
+        ] })
+      ] }),
+      title != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-body-default-16px-semibold text-content-primary", children: title }),
+      children != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-body-small-14px-regular text-content-secondary", children })
+    ] });
+  }
+);
+ReviewCard.displayName = "ReviewCard";
+exports.ReviewCard = ReviewCard;
+//# sourceMappingURL=ReviewCard.cjs.map

package/dist/cjs/components/ReviewCard/ReviewCard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReviewCard.cjs","sources":["../../../../src/components/ReviewCard/ReviewCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { StarIcon } from \"../Icons/StarIcon\";\n\nexport interface ReviewCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Star rating the reviewer gave, shown beside the star icon. */\n  rating: number;\n  /** Highest possible rating, used only in the accessible label (e.g. \"4 out of 5\"). @default 5 */\n  maxRating?: number;\n  /** Reviewer name or handle, rendered after \"by\". Omitted when not provided. */\n  author?: React.ReactNode;\n  /** Short headline for the review. */\n  title?: React.ReactNode;\n  /** Review body text. */\n  children?: React.ReactNode;\n}\n\n/**\n * A single written review: a star rating with an optional author byline, a\n * title, and the review body. Stack several with a {@link Divider} between them\n * to build a review list.\n *\n * @example\n * ```tsx\n * <ReviewCard rating={4} author=\"@jane_doe\" title=\"A great app to start!\">\n *   Easily plan and organize your content. Streamline your scheduling so you can\n *   focus on what you do best.\n * </ReviewCard>\n * ```\n */\nexport const ReviewCard = React.forwardRef<HTMLDivElement, ReviewCardProps>(\n  ({ rating, maxRating = 5, author, title, children, className, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex flex-col gap-2\", className)} {...props}>\n        <div className=\"flex items-center gap-1\">\n          <StarIcon size={24} filled className=\"shrink-0 text-brand-primary-default\" />\n          <span\n            className=\"typography-body-small-14px-semibold text-content-primary\"\n            role=\"img\"\n            aria-label={`Rated ${rating} out of ${maxRating}`}\n          >\n            {rating}\n          </span>\n          {author != null && (\n            <span className=\"typography-body-small-14px-regular text-content-tertiary\">\n              by {author}\n            </span>\n          )}\n        </div>\n        {title != null && (\n          <p className=\"typography-body-default-16px-semibold text-content-primary\">{title}</p>\n        )}\n        {children != null && (\n          <p className=\"typography-body-small-14px-regular text-content-secondary\">{children}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nReviewCard.displayName = \"ReviewCard\";\n"],"names":["React","jsxs","cn","jsx","StarIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA8BO,MAAM,aAAaA,iBAAM;AAAA,EAC9B,CAAC,EAAE,QAAQ,YAAY,GAAG,QAAQ,OAAO,UAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChF,WACEC,gCAAC,SAAI,KAAU,WAAWC,MAAG,uBAAuB,SAAS,GAAI,GAAG,OAClE,UAAA;AAAA,MAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAAE,+BAACC,SAAAA,YAAS,MAAM,IAAI,QAAM,MAAC,WAAU,uCAAsC;AAAA,QAC3ED,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAY,SAAS,MAAM,WAAW,SAAS;AAAA,YAE9C,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,UAAU,QACTF,gCAAC,QAAA,EAAK,WAAU,4DAA2D,UAAA;AAAA,UAAA;AAAA,UACrE;AAAA,QAAA,EAAA,CACN;AAAA,MAAA,GAEJ;AAAA,MACC,SAAS,QACRE,2BAAAA,IAAC,KAAA,EAAE,WAAU,8DAA8D,UAAA,OAAM;AAAA,MAElF,YAAY,QACXA,+BAAC,KAAA,EAAE,WAAU,6DAA6D,SAAA,CAAS;AAAA,IAAA,GAEvF;AAAA,EAEJ;AACF;AAEA,WAAW,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
             }
           ),