@fanvue/ui 2.21.0 → 3.0.0

package/dist/cjs/components/Accordion/AccordionContent.cjs

@@ -39,7 +39,7 @@ const AccordionContent = React__namespace.forwardRef(({ className, children, noP
       {
         className: cn.cn(
           "overflow-wrap-anywhere min-w-0",
-          "typography-regular-body-md text-content-secondary",
+          "typography-body-small-14px-regular text-content-secondary",
           !noPadding && "px-3 pt-2 pb-3"
         ),
         children

package/dist/cjs/components/Accordion/AccordionContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.cjs","sources":["../../../../src/components/Accordion/AccordionContent.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link AccordionContent} panel component. */\nexport type AccordionContentProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Content\n> & {\n  /** Remove the default inner padding (`px-3 pb-3`). Useful when you need custom content layout. */\n  noPadding?: boolean;\n};\n\n/** Renders the collapsible content panel for an {@link AccordionItem}. Animates open and closed. */\nexport const AccordionContent = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Content>,\n  AccordionContentProps\n>(({ className, children, noPadding, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"overflow-hidden\",\n      \"motion-safe:data-[state=closed]:animate-accordion-collapse\",\n      \"motion-safe:data-[state=open]:animate-accordion-expand\",\n      className,\n    )}\n    {...props}\n  >\n    <div\n      className={cn(\n        \"overflow-wrap-anywhere min-w-0\",\n        \"typography-regular-body-md text-content-secondary\",\n        !noPadding && \"px-3 pt-2 pb-3\",\n      )}\n    >\n      {children}\n    </div>\n  </AccordionPrimitive.Content>\n));\n\nAccordionContent.displayName = \"AccordionContent\";\n"],"names":["React","jsx","AccordionPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,mBAAmBA,iBAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,WAAW,GAAG,SAAS,QAC/CC,2BAAAA;AAAAA,EAACC,8BAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAAF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWE,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,UACA,CAAC,aAAa;AAAA,QAAA;AAAA,QAGf;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF,CACD;AAED,iBAAiB,cAAc;;"}
+{"version":3,"file":"AccordionContent.cjs","sources":["../../../../src/components/Accordion/AccordionContent.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link AccordionContent} panel component. */\nexport type AccordionContentProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Content\n> & {\n  /** Remove the default inner padding (`px-3 pb-3`). Useful when you need custom content layout. */\n  noPadding?: boolean;\n};\n\n/** Renders the collapsible content panel for an {@link AccordionItem}. Animates open and closed. */\nexport const AccordionContent = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Content>,\n  AccordionContentProps\n>(({ className, children, noPadding, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"overflow-hidden\",\n      \"motion-safe:data-[state=closed]:animate-accordion-collapse\",\n      \"motion-safe:data-[state=open]:animate-accordion-expand\",\n      className,\n    )}\n    {...props}\n  >\n    <div\n      className={cn(\n        \"overflow-wrap-anywhere min-w-0\",\n        \"typography-body-small-14px-regular text-content-secondary\",\n        !noPadding && \"px-3 pt-2 pb-3\",\n      )}\n    >\n      {children}\n    </div>\n  </AccordionPrimitive.Content>\n));\n\nAccordionContent.displayName = \"AccordionContent\";\n"],"names":["React","jsx","AccordionPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,mBAAmBA,iBAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,WAAW,GAAG,SAAS,QAC/CC,2BAAAA;AAAAA,EAACC,8BAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAAF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWE,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,UACA,CAAC,aAAa;AAAA,QAAA;AAAA,QAGf;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF,CACD;AAED,iBAAiB,cAAc;;"}

package/dist/cjs/components/Accordion/AccordionTrigger.cjs

@@ -34,11 +34,11 @@ const AccordionTrigger = React__namespace.forwardRef(({ className, children, ico
       className: cn.cn(
         "flex flex-1 items-center justify-between gap-3",
         "rounded-sm px-3 py-3",
-        "typography-semibold-body-md text-content-primary",
+        "typography-body-small-14px-semibold text-content-primary",
         "cursor-pointer",
         "motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out",
         "hover:bg-neutral-alphas-100",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary",
         "data-disabled:pointer-events-none data-disabled:opacity-50",
         className
       ),

package/dist/cjs/components/Accordion/AccordionTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionTrigger.cjs","sources":["../../../../src/components/Accordion/AccordionTrigger.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Props for the {@link AccordionTrigger} button component. */\nexport type AccordionTriggerProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Trigger\n> & {\n  /** Custom icon element. Defaults to `ChevronDownIcon`. Pass `null` to suppress the icon entirely. */\n  icon?: React.ReactNode | null;\n};\n\n/** An interactive button that toggles the visibility of its associated {@link AccordionContent} panel. */\nexport const AccordionTrigger = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(({ className, children, icon, ...props }, ref) => {\n  const showIcon = icon !== null;\n  const iconElement =\n    icon === undefined ? (\n      <ChevronDownIcon className=\"size-4 shrink-0 text-content-secondary\" />\n    ) : (\n      icon\n    );\n\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          \"flex flex-1 items-center justify-between gap-3\",\n          \"rounded-sm px-3 py-3\",\n          \"typography-semibold-body-md text-content-primary\",\n          \"cursor-pointer\",\n          \"motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out\",\n          \"hover:bg-neutral-alphas-100\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary\",\n          \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"min-w-0 flex-1 truncate text-left\">{children}</span>\n        {showIcon && (\n          <span className=\"shrink-0 motion-safe:transition-transform motion-safe:duration-200 [[data-state=open]>&]:rotate-180\">\n            {iconElement}\n          </span>\n        )}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n});\n\nAccordionTrigger.displayName = \"AccordionTrigger\";\n"],"names":["React","ChevronDownIcon","jsx","AccordionPrimitive","jsxs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,mBAAmBA,iBAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,MAAM,GAAG,MAAA,GAAS,QAAQ;AAClD,QAAM,WAAW,SAAS;AAC1B,QAAM,cACJ,SAAS,wCACNC,gBAAAA,iBAAA,EAAgB,WAAU,0CAAyC,IAEpE;AAGJ,SACEC,2BAAAA,IAACC,8BAAmB,QAAnB,EAA0B,WAAU,QACnC,UAAAC,2BAAAA;AAAAA,IAACD,8BAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,WAAWE,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAH,2BAAAA,IAAC,QAAA,EAAK,WAAU,qCAAqC,SAAA,CAAS;AAAA,QAC7D,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,uGACb,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,CAAC;AAED,iBAAiB,cAAc;;"}
+{"version":3,"file":"AccordionTrigger.cjs","sources":["../../../../src/components/Accordion/AccordionTrigger.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Props for the {@link AccordionTrigger} button component. */\nexport type AccordionTriggerProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Trigger\n> & {\n  /** Custom icon element. Defaults to `ChevronDownIcon`. Pass `null` to suppress the icon entirely. */\n  icon?: React.ReactNode | null;\n};\n\n/** An interactive button that toggles the visibility of its associated {@link AccordionContent} panel. */\nexport const AccordionTrigger = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(({ className, children, icon, ...props }, ref) => {\n  const showIcon = icon !== null;\n  const iconElement =\n    icon === undefined ? (\n      <ChevronDownIcon className=\"size-4 shrink-0 text-content-secondary\" />\n    ) : (\n      icon\n    );\n\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          \"flex flex-1 items-center justify-between gap-3\",\n          \"rounded-sm px-3 py-3\",\n          \"typography-body-small-14px-semibold text-content-primary\",\n          \"cursor-pointer\",\n          \"motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out\",\n          \"hover:bg-neutral-alphas-100\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary\",\n          \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"min-w-0 flex-1 truncate text-left\">{children}</span>\n        {showIcon && (\n          <span className=\"shrink-0 motion-safe:transition-transform motion-safe:duration-200 [[data-state=open]>&]:rotate-180\">\n            {iconElement}\n          </span>\n        )}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n});\n\nAccordionTrigger.displayName = \"AccordionTrigger\";\n"],"names":["React","ChevronDownIcon","jsx","AccordionPrimitive","jsxs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,mBAAmBA,iBAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,MAAM,GAAG,MAAA,GAAS,QAAQ;AAClD,QAAM,WAAW,SAAS;AAC1B,QAAM,cACJ,SAAS,wCACNC,gBAAAA,iBAAA,EAAgB,WAAU,0CAAyC,IAEpE;AAGJ,SACEC,2BAAAA,IAACC,8BAAmB,QAAnB,EAA0B,WAAU,QACnC,UAAAC,2BAAAA;AAAAA,IAACD,8BAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,WAAWE,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAH,2BAAAA,IAAC,QAAA,EAAK,WAAU,qCAAqC,SAAA,CAAS;AAAA,QAC7D,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,uGACb,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,CAAC;AAED,iBAAiB,cAAc;;"}

package/dist/cjs/components/Alert/Alert.cjs

@@ -75,8 +75,8 @@ const Alert = React__namespace.forwardRef(
         children: [
           resolvedIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-start h-full", "aria-hidden": "true", children: resolvedIcon }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [
-            title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-semibold-body-md text-content-primary", children: title }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-regular-body-md text-content-primary", children })
+            title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-body-small-14px-semibold text-content-primary", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-body-small-14px-regular text-content-primary", children })
           ] }),
           closable && /* @__PURE__ */ jsxRuntime.jsx(
             Button.Button,

package/dist/cjs/components/Alert/Alert.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { CheckCircleIcon } from \"../Icons/CheckCircleIcon\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\nimport { ErrorCircleIcon } from \"../Icons/ErrorCircleIcon\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { WarningTriangleIcon } from \"../Icons/WarningTriangleIcon\";\n\n/** Visual style variant of the alert. */\nexport type AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nconst DEFAULT_ICONS: Record<AlertVariant, React.ReactNode> = {\n  info: <InfoCircleIcon />,\n  success: <CheckCircleIcon />,\n  warning: <WarningTriangleIcon />,\n  error: <ErrorCircleIcon />,\n};\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant of the alert. @default \"info\" */\n  variant?: AlertVariant;\n  /** Optional title text displayed in bold above the description. */\n  title?: string;\n  /** Custom icon override. Pass `null` to hide the icon entirely. Each variant shows a default icon when left `undefined`. */\n  icon?: React.ReactNode | null;\n  /** Whether to show the close button. @default false */\n  closable?: boolean;\n  /** Callback fired when the close button is clicked. */\n  onClose?: () => void;\n  /** Accessible label for the close button. @default \"Close alert\" */\n  closeLabel?: string;\n}\n\nconst CLOSE_BUTTON_CLASSES: Record<AlertVariant, string> = {\n  info: \"hover:bg-info-content/10 active:bg-info-content/20 text-info-content motion-safe:transition-colors motion-safe:duration-150\",\n  success:\n    \"hover:bg-success-content/10 active:bg-success-content/20 text-success-content motion-safe:transition-colors motion-safe:duration-150\",\n  warning:\n    \"hover:bg-warning-content/10 active:bg-warning-content/20 text-warning-content motion-safe:transition-colors motion-safe:duration-150\",\n  error:\n    \"hover:bg-error-content/10 active:bg-error-content/20 text-error-content motion-safe:transition-colors motion-safe:duration-150\",\n};\n\n/**\n * Displays a contextual feedback message to the user.\n *\n * Supports `info`, `success`, `warning`, and `error` variants with a default\n * icon per variant, optional title, description, and dismiss button.\n *\n * Each variant renders a default icon automatically. Pass a custom `icon` to\n * override, or `icon={null}` to hide the icon entirely.\n *\n * @example\n * ```tsx\n * <Alert variant=\"success\" title=\"Saved\" closable onClose={handleClose}>\n *   Your changes have been saved.\n * </Alert>\n * ```\n */\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    {\n      className,\n      variant = \"info\",\n      title,\n      icon,\n      closable = false,\n      onClose,\n      closeLabel = \"Close alert\",\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedIcon = icon === null ? null : (icon ?? DEFAULT_ICONS[variant]);\n\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-testid=\"alert\"\n        className={cn(\n          \"grid gap-x-3 rounded-xs p-4 text-sm leading-[18px]\",\n          resolvedIcon && closable && \"grid-cols-[auto_1fr_auto]\",\n          resolvedIcon && !closable && \"grid-cols-[auto_1fr]\",\n          !resolvedIcon && closable && \"grid-cols-[1fr_auto]\",\n          !resolvedIcon && !closable && \"grid-cols-[1fr]\",\n          title && children ? \"items-start\" : \"items-center\",\n          variant === \"info\" && \"bg-info-surface text-info-content\",\n          variant === \"success\" && \"bg-success-surface text-success-content\",\n          variant === \"warning\" && \"bg-warning-surface text-warning-content\",\n          variant === \"error\" && \"bg-error-surface text-error-content\",\n          className,\n        )}\n        {...props}\n      >\n        {resolvedIcon && (\n          <span className=\"flex shrink-0 items-start h-full\" aria-hidden=\"true\">\n            {resolvedIcon}\n          </span>\n        )}\n\n        <div className=\"flex min-w-0 flex-col gap-2\">\n          {title && <div className=\"typography-semibold-body-md text-content-primary\">{title}</div>}\n          <div className=\"typography-regular-body-md text-content-primary\">{children}</div>\n        </div>\n\n        {closable && (\n          <Button\n            variant=\"tertiary\"\n            size=\"24\"\n            onClick={onClose}\n            className={cn(\"self-start px-0\", CLOSE_BUTTON_CLASSES[variant])}\n            aria-label={closeLabel}\n          >\n            <CrossIcon />\n          </Button>\n        )}\n      </div>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\n"],"names":["InfoCircleIcon","CheckCircleIcon","WarningTriangleIcon","ErrorCircleIcon","React","jsxs","cn","jsx","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,gBAAuD;AAAA,EAC3D,qCAAOA,eAAAA,gBAAA,EAAe;AAAA,EACtB,wCAAUC,gBAAAA,iBAAA,EAAgB;AAAA,EAC1B,wCAAUC,oBAAAA,qBAAA,EAAoB;AAAA,EAC9B,sCAAQC,gBAAAA,iBAAA,CAAA,CAAgB;AAC1B;AAiBA,MAAM,uBAAqD;AAAA,EACzD,MAAM;AAAA,EACN,SACE;AAAA,EACF,SACE;AAAA,EACF,OACE;AACJ;AAkBO,MAAM,QAAQC,iBAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,SAAS,OAAO,OAAQ,QAAQ,cAAc,OAAO;AAE1E,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,gBAAgB,YAAY;AAAA,UAC5B,gBAAgB,CAAC,YAAY;AAAA,UAC7B,CAAC,gBAAgB,YAAY;AAAA,UAC7B,CAAC,gBAAgB,CAAC,YAAY;AAAA,UAC9B,SAAS,WAAW,gBAAgB;AAAA,UACpC,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,+CACE,QAAA,EAAK,WAAU,oCAAmC,eAAY,QAC5D,UAAA,cACH;AAAA,UAGFD,2BAAAA,KAAC,OAAA,EAAI,WAAU,+BACZ,UAAA;AAAA,YAAA,SAASE,2BAAAA,IAAC,OAAA,EAAI,WAAU,oDAAoD,UAAA,OAAM;AAAA,YACnFA,2BAAAA,IAAC,OAAA,EAAI,WAAU,mDAAmD,SAAA,CAAS;AAAA,UAAA,GAC7E;AAAA,UAEC,YACCA,2BAAAA;AAAAA,YAACC,OAAAA;AAAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAWF,GAAAA,GAAG,mBAAmB,qBAAqB,OAAO,CAAC;AAAA,cAC9D,cAAY;AAAA,cAEZ,yCAACG,UAAAA,WAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;;"}
+{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { CheckCircleIcon } from \"../Icons/CheckCircleIcon\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\nimport { ErrorCircleIcon } from \"../Icons/ErrorCircleIcon\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { WarningTriangleIcon } from \"../Icons/WarningTriangleIcon\";\n\n/** Visual style variant of the alert. */\nexport type AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nconst DEFAULT_ICONS: Record<AlertVariant, React.ReactNode> = {\n  info: <InfoCircleIcon />,\n  success: <CheckCircleIcon />,\n  warning: <WarningTriangleIcon />,\n  error: <ErrorCircleIcon />,\n};\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant of the alert. @default \"info\" */\n  variant?: AlertVariant;\n  /** Optional title text displayed in bold above the description. */\n  title?: string;\n  /** Custom icon override. Pass `null` to hide the icon entirely. Each variant shows a default icon when left `undefined`. */\n  icon?: React.ReactNode | null;\n  /** Whether to show the close button. @default false */\n  closable?: boolean;\n  /** Callback fired when the close button is clicked. */\n  onClose?: () => void;\n  /** Accessible label for the close button. @default \"Close alert\" */\n  closeLabel?: string;\n}\n\nconst CLOSE_BUTTON_CLASSES: Record<AlertVariant, string> = {\n  info: \"hover:bg-info-content/10 active:bg-info-content/20 text-info-content motion-safe:transition-colors motion-safe:duration-150\",\n  success:\n    \"hover:bg-success-content/10 active:bg-success-content/20 text-success-content motion-safe:transition-colors motion-safe:duration-150\",\n  warning:\n    \"hover:bg-warning-content/10 active:bg-warning-content/20 text-warning-content motion-safe:transition-colors motion-safe:duration-150\",\n  error:\n    \"hover:bg-error-content/10 active:bg-error-content/20 text-error-content motion-safe:transition-colors motion-safe:duration-150\",\n};\n\n/**\n * Displays a contextual feedback message to the user.\n *\n * Supports `info`, `success`, `warning`, and `error` variants with a default\n * icon per variant, optional title, description, and dismiss button.\n *\n * Each variant renders a default icon automatically. Pass a custom `icon` to\n * override, or `icon={null}` to hide the icon entirely.\n *\n * @example\n * ```tsx\n * <Alert variant=\"success\" title=\"Saved\" closable onClose={handleClose}>\n *   Your changes have been saved.\n * </Alert>\n * ```\n */\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    {\n      className,\n      variant = \"info\",\n      title,\n      icon,\n      closable = false,\n      onClose,\n      closeLabel = \"Close alert\",\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedIcon = icon === null ? null : (icon ?? DEFAULT_ICONS[variant]);\n\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-testid=\"alert\"\n        className={cn(\n          \"grid gap-x-3 rounded-xs p-4 text-sm leading-[18px]\",\n          resolvedIcon && closable && \"grid-cols-[auto_1fr_auto]\",\n          resolvedIcon && !closable && \"grid-cols-[auto_1fr]\",\n          !resolvedIcon && closable && \"grid-cols-[1fr_auto]\",\n          !resolvedIcon && !closable && \"grid-cols-[1fr]\",\n          title && children ? \"items-start\" : \"items-center\",\n          variant === \"info\" && \"bg-info-surface text-info-content\",\n          variant === \"success\" && \"bg-success-surface text-success-content\",\n          variant === \"warning\" && \"bg-warning-surface text-warning-content\",\n          variant === \"error\" && \"bg-error-surface text-error-content\",\n          className,\n        )}\n        {...props}\n      >\n        {resolvedIcon && (\n          <span className=\"flex shrink-0 items-start h-full\" aria-hidden=\"true\">\n            {resolvedIcon}\n          </span>\n        )}\n\n        <div className=\"flex min-w-0 flex-col gap-2\">\n          {title && (\n            <div className=\"typography-body-small-14px-semibold text-content-primary\">{title}</div>\n          )}\n          <div className=\"typography-body-small-14px-regular text-content-primary\">{children}</div>\n        </div>\n\n        {closable && (\n          <Button\n            variant=\"tertiary\"\n            size=\"24\"\n            onClick={onClose}\n            className={cn(\"self-start px-0\", CLOSE_BUTTON_CLASSES[variant])}\n            aria-label={closeLabel}\n          >\n            <CrossIcon />\n          </Button>\n        )}\n      </div>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\n"],"names":["InfoCircleIcon","CheckCircleIcon","WarningTriangleIcon","ErrorCircleIcon","React","jsxs","cn","jsx","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,gBAAuD;AAAA,EAC3D,qCAAOA,eAAAA,gBAAA,EAAe;AAAA,EACtB,wCAAUC,gBAAAA,iBAAA,EAAgB;AAAA,EAC1B,wCAAUC,oBAAAA,qBAAA,EAAoB;AAAA,EAC9B,sCAAQC,gBAAAA,iBAAA,CAAA,CAAgB;AAC1B;AAiBA,MAAM,uBAAqD;AAAA,EACzD,MAAM;AAAA,EACN,SACE;AAAA,EACF,SACE;AAAA,EACF,OACE;AACJ;AAkBO,MAAM,QAAQC,iBAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,SAAS,OAAO,OAAQ,QAAQ,cAAc,OAAO;AAE1E,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,gBAAgB,YAAY;AAAA,UAC5B,gBAAgB,CAAC,YAAY;AAAA,UAC7B,CAAC,gBAAgB,YAAY;AAAA,UAC7B,CAAC,gBAAgB,CAAC,YAAY;AAAA,UAC9B,SAAS,WAAW,gBAAgB;AAAA,UACpC,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,+CACE,QAAA,EAAK,WAAU,oCAAmC,eAAY,QAC5D,UAAA,cACH;AAAA,UAGFD,2BAAAA,KAAC,OAAA,EAAI,WAAU,+BACZ,UAAA;AAAA,YAAA,SACCE,2BAAAA,IAAC,OAAA,EAAI,WAAU,4DAA4D,UAAA,OAAM;AAAA,YAEnFA,2BAAAA,IAAC,OAAA,EAAI,WAAU,2DAA2D,SAAA,CAAS;AAAA,UAAA,GACrF;AAAA,UAEC,YACCA,2BAAAA;AAAAA,YAACC,OAAAA;AAAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAWF,GAAAA,GAAG,mBAAmB,qBAAqB,OAAO,CAAC;AAAA,cAC9D,cAAY;AAAA,cAEZ,yCAACG,UAAAA,WAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;;"}

package/dist/cjs/components/AudioUpload/AudioUpload.cjs

@@ -170,7 +170,7 @@ const AudioUpload = React__namespace.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: "flex size-[72px] items-center justify-center rounded-full bg-buttons-primary",
+                    className: "flex size-[72px] items-center justify-center rounded-full bg-buttons-primary-default",
                     "aria-hidden": "true",
                     children: /* @__PURE__ */ jsxRuntime.jsx(MicrophoneIcon.MicrophoneIcon, { className: "size-5 text-content-primary-inverted" })
                   }
@@ -180,7 +180,7 @@ const AudioUpload = React__namespace.forwardRef(
                   {
                     role: "timer",
                     "aria-label": "Recording time",
-                    className: "typography-regular-body-lg text-content-primary",
+                    className: "typography-body-default-16px-regular text-content-primary",
                     children: [
                       formattedElapsed,
                       " / ",
@@ -203,7 +203,7 @@ const AudioUpload = React__namespace.forwardRef(
                   ref: stopButtonRef,
                   type: "button",
                   onClick: handleStopClick,
-                  className: "mt-1 flex size-11 items-center justify-center rounded-full bg-error-content text-content-on-brand-inverted transition-colors hover:bg-error-content/80 focus:shadow-focus-ring focus-visible:outline-none",
+                  className: "mt-1 flex size-11 items-center justify-center rounded-full bg-error-content text-content-always-white transition-colors hover:bg-error-content/80 focus:shadow-focus-ring focus-visible:outline-none",
                   "aria-label": stopButtonAriaLabel,
                   children: /* @__PURE__ */ jsxRuntime.jsx(StopIcon.StopIcon, { className: "size-5" })
                 }
@@ -255,12 +255,12 @@ const AudioUpload = React__namespace.forwardRef(
                 className: "flex cursor-pointer flex-col items-center gap-2 rounded-xs px-2 py-1 peer-focus-visible:shadow-focus-ring",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(UploadCloudIcon.UploadCloudIcon, { className: "size-5 text-content-primary" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-lg text-center text-content-primary", children: uploadTitle }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-default-16px-semibold text-center text-content-primary", children: uploadTitle }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
                       id: descriptionId,
-                      className: "typography-regular-body-md text-center text-content-primary",
+                      className: "typography-body-small-14px-regular text-center text-content-primary",
                       children: uploadDescription
                     }
                   )
@@ -268,7 +268,7 @@ const AudioUpload = React__namespace.forwardRef(
               }
             ),
             allowRecording && isRecordingSupported && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-center text-content-primary", children: separatorText }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-body-small-14px-regular text-center text-content-primary", children: separatorText }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 Button.Button,
                 {

package/dist/cjs/components/AudioUpload/AudioUpload.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AudioUpload.cjs","sources":["../../../../src/components/AudioUpload/AudioUpload.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { MicrophoneIcon } from \"../Icons/MicrophoneIcon\";\nimport { StopIcon } from \"../Icons/StopIcon\";\nimport { UploadCloudIcon } from \"../Icons/UploadCloudIcon\";\nimport { AudioWaveform } from \"./AudioWaveform\";\nimport { type AudioValidationError, formatAudioTime, validateAudioFile } from \"./audioUtils\";\nimport {\n  DEFAULT_ACCEPTED_TYPES,\n  DEFAULT_MAX_FILE_SIZE,\n  DEFAULT_MAX_RECORDING_DURATION,\n  DEFAULT_MIN_RECORDING_DURATION,\n} from \"./constants\";\nimport { useAudioRecorder } from \"./useAudioRecorder\";\n\n/** A file that was rejected during drop or browse, along with the reasons. */\nexport interface AudioFileRejection {\n  /** The rejected file. */\n  file: File;\n  /** One or more validation errors explaining why the file was rejected. */\n  errors: AudioValidationError[];\n}\n\nexport interface AudioUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onDrop\"> {\n  /** Maximum file size in bytes. @default 10_485_760 (10MB) */\n  maxFileSize?: number;\n  /** Accepted audio MIME types. @default DEFAULT_ACCEPTED_TYPES */\n  accept?: readonly string[];\n  /** Maximum number of files per drop. @default 1 */\n  maxFiles?: number;\n  /** Whether to show the record audio button. @default true */\n  allowRecording?: boolean;\n  /** Maximum recording duration in seconds. @default 30 */\n  maxRecordingDuration?: number;\n  /** Minimum recording duration in seconds. @default 5 */\n  minRecordingDuration?: number;\n\n  /** Called when valid files are accepted via drop or browse */\n  onFilesAccepted?: (files: File[]) => void;\n  /** Called when files are rejected (wrong type, too large, etc.) */\n  onFilesRejected?: (rejections: AudioFileRejection[]) => void;\n  /** Called when a recording completes and meets minimum duration */\n  onRecordingComplete?: (blob: Blob, durationMs: number) => void;\n  /** Called when recording is stopped but does not meet minimum duration */\n  onRecordingTooShort?: (durationMs: number, minDurationMs: number) => void;\n  /** Called when microphone permission is denied or unavailable */\n  onPermissionError?: (error: Error) => void;\n  /** Called when an unexpected recording error occurs */\n  onRecordingError?: (error: Error) => void;\n\n  /** Upload area title text. @default \"Click to upload, or drag & drop\" */\n  uploadTitle?: string;\n  /** Upload area description text. @default \"Audio files only, up to 10MB each\" */\n  uploadDescription?: string;\n  /** Separator text between upload and record. @default \"or\" */\n  separatorText?: string;\n  /** Record button label. @default \"Record audio\" */\n  recordButtonLabel?: string;\n  /** Stop recording button aria-label. @default \"Stop recording\" */\n  stopButtonAriaLabel?: string;\n\n  /** Whether the component is disabled. @default false */\n  disabled?: boolean;\n}\n\nfunction partitionFiles(\n  files: File[],\n  maxFileSize: number,\n  accept: readonly string[],\n  maxFiles: number,\n): { accepted: File[]; rejected: AudioFileRejection[] } {\n  const accepted: File[] = [];\n  const rejected: AudioFileRejection[] = [];\n\n  for (const file of files) {\n    const errors = validateAudioFile(file, { maxFileSize, acceptedTypes: accept });\n    if (errors.length > 0) {\n      rejected.push({ file, errors });\n    } else {\n      accepted.push(file);\n    }\n  }\n\n  if (maxFiles > 0 && accepted.length > maxFiles) {\n    const excess = accepted.splice(maxFiles);\n    for (const file of excess) {\n      rejected.push({\n        file,\n        errors: [{ code: \"too-many-files\", message: `Too many files. Maximum is ${maxFiles}` }],\n      });\n    }\n  }\n\n  return { accepted, rejected };\n}\n\n/**\n * Audio file upload with drag-and-drop and optional in-browser recording.\n * Supports file validation, multiple files, and real-time waveform visualization during recording.\n *\n * @example\n * ```tsx\n * <AudioUpload\n *   onFilesAccepted={(files) => console.log(files)}\n *   onRecordingComplete={(blob, duration) => console.log(blob, duration)}\n * />\n * ```\n */\nexport const AudioUpload = React.forwardRef<HTMLDivElement, AudioUploadProps>(\n  (\n    {\n      className,\n      maxFileSize = DEFAULT_MAX_FILE_SIZE,\n      accept = DEFAULT_ACCEPTED_TYPES,\n      maxFiles = 1,\n      allowRecording = true,\n      maxRecordingDuration = DEFAULT_MAX_RECORDING_DURATION,\n      minRecordingDuration = DEFAULT_MIN_RECORDING_DURATION,\n      onFilesAccepted,\n      onFilesRejected,\n      onRecordingComplete,\n      onRecordingTooShort,\n      onPermissionError,\n      onRecordingError,\n      uploadTitle = \"Click to upload, or drag & drop\",\n      uploadDescription = \"Audio files only, up to 10MB each\",\n      separatorText = \"or\",\n      recordButtonLabel = \"Record audio\",\n      stopButtonAriaLabel = \"Stop recording\",\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputId = React.useId();\n    const descriptionId = React.useId();\n    const [isDragActive, setIsDragActive] = React.useState(false);\n    const stopButtonRef = React.useRef<HTMLButtonElement>(null);\n\n    const {\n      isRecording,\n      elapsedMs,\n      startRecording,\n      stopRecording,\n      analyserNode,\n      isSupported: isRecordingSupported,\n    } = useAudioRecorder({\n      maxDuration: maxRecordingDuration,\n      minDuration: minRecordingDuration,\n      onComplete: onRecordingComplete,\n      onTooShort: onRecordingTooShort,\n      onPermissionError,\n      onError: onRecordingError,\n    });\n\n    const acceptString = accept.join(\",\");\n\n    // Move focus to stop button when recording starts\n    React.useEffect(() => {\n      if (isRecording) {\n        stopButtonRef.current?.focus();\n      }\n    }, [isRecording]);\n\n    const validateAndAcceptFiles = React.useCallback(\n      (files: FileList | File[]) => {\n        const { accepted, rejected } = partitionFiles(\n          Array.from(files),\n          maxFileSize,\n          accept,\n          maxFiles,\n        );\n        if (accepted.length > 0) onFilesAccepted?.(accepted);\n        if (rejected.length > 0) onFilesRejected?.(rejected);\n      },\n      [maxFileSize, accept, maxFiles, onFilesAccepted, onFilesRejected],\n    );\n\n    const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragActive(false);\n\n      if (disabled) return;\n\n      const { files } = e.dataTransfer;\n      if (files.length > 0) {\n        validateAndAcceptFiles(files);\n      }\n    };\n\n    const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      if (!disabled) {\n        setIsDragActive(true);\n      }\n    };\n\n    const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragActive(false);\n    };\n\n    const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const { files } = e.target;\n      if (files && files.length > 0) {\n        validateAndAcceptFiles(files);\n      }\n      // Reset input so same file can be selected again\n      e.target.value = \"\";\n    };\n\n    const handleRecordClick = (e: React.MouseEvent) => {\n      e.stopPropagation();\n      startRecording();\n    };\n\n    const handleStopClick = () => {\n      stopRecording();\n    };\n\n    if (isRecording) {\n      const formattedElapsed = formatAudioTime(elapsedMs);\n\n      return (\n        // biome-ignore lint/a11y/useSemanticElements: <fieldset> would break the public HTMLDivElement ref/props API\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label=\"Audio recording in progress\"\n          data-testid=\"audio-upload\"\n          data-state=\"recording\"\n          className={cn(\n            \"flex flex-col items-center justify-center gap-2 rounded-md bg-surface-secondary px-4 py-3\",\n            className,\n          )}\n          {...props}\n        >\n          <div className=\"flex flex-1 flex-col items-center gap-2\">\n            <div\n              className=\"flex size-[72px] items-center justify-center rounded-full bg-buttons-primary\"\n              aria-hidden=\"true\"\n            >\n              <MicrophoneIcon className=\"size-5 text-content-primary-inverted\" />\n            </div>\n\n            <p\n              role=\"timer\"\n              aria-label=\"Recording time\"\n              className=\"typography-regular-body-lg text-content-primary\"\n            >\n              {formattedElapsed} / {formatAudioTime(maxRecordingDuration * 1000)}\n            </p>\n          </div>\n\n          <div className=\"flex w-full items-center gap-2.5\" aria-hidden=\"true\">\n            <AudioWaveform\n              analyserNode={analyserNode}\n              isRecording={isRecording}\n              className=\"flex-1\"\n            />\n          </div>\n\n          <button\n            ref={stopButtonRef}\n            type=\"button\"\n            onClick={handleStopClick}\n            className=\"mt-1 flex size-11 items-center justify-center rounded-full bg-error-content text-content-on-brand-inverted transition-colors hover:bg-error-content/80 focus:shadow-focus-ring focus-visible:outline-none\"\n            aria-label={stopButtonAriaLabel}\n          >\n            <StopIcon className=\"size-5\" />\n          </button>\n        </div>\n      );\n    }\n\n    return (\n      // biome-ignore lint/a11y/useSemanticElements: <fieldset> would break the public HTMLDivElement ref/props API\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label=\"Audio upload\"\n        data-testid=\"audio-upload\"\n        data-state=\"idle\"\n        aria-disabled={disabled || undefined}\n        onDrop={handleDrop}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        className={cn(\n          \"flex flex-col items-center justify-center gap-2 rounded-md bg-surface-secondary px-4 py-3 transition-colors\",\n          isDragActive && \"bg-brand-primary-muted ring-2 ring-brand-primary-default\",\n          disabled && \"pointer-events-none opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <input\n          id={inputId}\n          type=\"file\"\n          accept={acceptString}\n          multiple={maxFiles > 1}\n          onChange={handleFileInputChange}\n          className=\"peer sr-only\"\n          disabled={disabled}\n          aria-describedby={descriptionId}\n        />\n\n        <label\n          htmlFor={inputId}\n          className=\"flex cursor-pointer flex-col items-center gap-2 rounded-xs px-2 py-1 peer-focus-visible:shadow-focus-ring\"\n        >\n          <UploadCloudIcon className=\"size-5 text-content-primary\" />\n\n          <span className=\"typography-semibold-body-lg text-center text-content-primary\">\n            {uploadTitle}\n          </span>\n\n          <span\n            id={descriptionId}\n            className=\"typography-regular-body-md text-center text-content-primary\"\n          >\n            {uploadDescription}\n          </span>\n        </label>\n\n        {allowRecording && isRecordingSupported && (\n          <>\n            <p className=\"typography-regular-body-md text-center text-content-primary\">\n              {separatorText}\n            </p>\n\n            <Button\n              variant=\"brand\"\n              size=\"40\"\n              leftIcon={<MicrophoneIcon className=\"size-5\" />}\n              onClick={handleRecordClick}\n              disabled={disabled}\n              type=\"button\"\n            >\n              {recordButtonLabel}\n            </Button>\n          </>\n        )}\n      </div>\n    );\n  },\n);\n\nAudioUpload.displayName = \"AudioUpload\";\n"],"names":["validateAudioFile","React","DEFAULT_MAX_FILE_SIZE","DEFAULT_ACCEPTED_TYPES","DEFAULT_MAX_RECORDING_DURATION","DEFAULT_MIN_RECORDING_DURATION","useAudioRecorder","formatAudioTime","jsxs","cn","jsx","MicrophoneIcon","AudioWaveform","StopIcon","UploadCloudIcon","Fragment","Button"],"mappings":"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"}
+{"version":3,"file":"AudioUpload.cjs","sources":["../../../../src/components/AudioUpload/AudioUpload.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { MicrophoneIcon } from \"../Icons/MicrophoneIcon\";\nimport { StopIcon } from \"../Icons/StopIcon\";\nimport { UploadCloudIcon } from \"../Icons/UploadCloudIcon\";\nimport { AudioWaveform } from \"./AudioWaveform\";\nimport { type AudioValidationError, formatAudioTime, validateAudioFile } from \"./audioUtils\";\nimport {\n  DEFAULT_ACCEPTED_TYPES,\n  DEFAULT_MAX_FILE_SIZE,\n  DEFAULT_MAX_RECORDING_DURATION,\n  DEFAULT_MIN_RECORDING_DURATION,\n} from \"./constants\";\nimport { useAudioRecorder } from \"./useAudioRecorder\";\n\n/** A file that was rejected during drop or browse, along with the reasons. */\nexport interface AudioFileRejection {\n  /** The rejected file. */\n  file: File;\n  /** One or more validation errors explaining why the file was rejected. */\n  errors: AudioValidationError[];\n}\n\nexport interface AudioUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onDrop\"> {\n  /** Maximum file size in bytes. @default 10_485_760 (10MB) */\n  maxFileSize?: number;\n  /** Accepted audio MIME types. @default DEFAULT_ACCEPTED_TYPES */\n  accept?: readonly string[];\n  /** Maximum number of files per drop. @default 1 */\n  maxFiles?: number;\n  /** Whether to show the record audio button. @default true */\n  allowRecording?: boolean;\n  /** Maximum recording duration in seconds. @default 30 */\n  maxRecordingDuration?: number;\n  /** Minimum recording duration in seconds. @default 5 */\n  minRecordingDuration?: number;\n\n  /** Called when valid files are accepted via drop or browse */\n  onFilesAccepted?: (files: File[]) => void;\n  /** Called when files are rejected (wrong type, too large, etc.) */\n  onFilesRejected?: (rejections: AudioFileRejection[]) => void;\n  /** Called when a recording completes and meets minimum duration */\n  onRecordingComplete?: (blob: Blob, durationMs: number) => void;\n  /** Called when recording is stopped but does not meet minimum duration */\n  onRecordingTooShort?: (durationMs: number, minDurationMs: number) => void;\n  /** Called when microphone permission is denied or unavailable */\n  onPermissionError?: (error: Error) => void;\n  /** Called when an unexpected recording error occurs */\n  onRecordingError?: (error: Error) => void;\n\n  /** Upload area title text. @default \"Click to upload, or drag & drop\" */\n  uploadTitle?: string;\n  /** Upload area description text. @default \"Audio files only, up to 10MB each\" */\n  uploadDescription?: string;\n  /** Separator text between upload and record. @default \"or\" */\n  separatorText?: string;\n  /** Record button label. @default \"Record audio\" */\n  recordButtonLabel?: string;\n  /** Stop recording button aria-label. @default \"Stop recording\" */\n  stopButtonAriaLabel?: string;\n\n  /** Whether the component is disabled. @default false */\n  disabled?: boolean;\n}\n\nfunction partitionFiles(\n  files: File[],\n  maxFileSize: number,\n  accept: readonly string[],\n  maxFiles: number,\n): { accepted: File[]; rejected: AudioFileRejection[] } {\n  const accepted: File[] = [];\n  const rejected: AudioFileRejection[] = [];\n\n  for (const file of files) {\n    const errors = validateAudioFile(file, { maxFileSize, acceptedTypes: accept });\n    if (errors.length > 0) {\n      rejected.push({ file, errors });\n    } else {\n      accepted.push(file);\n    }\n  }\n\n  if (maxFiles > 0 && accepted.length > maxFiles) {\n    const excess = accepted.splice(maxFiles);\n    for (const file of excess) {\n      rejected.push({\n        file,\n        errors: [{ code: \"too-many-files\", message: `Too many files. Maximum is ${maxFiles}` }],\n      });\n    }\n  }\n\n  return { accepted, rejected };\n}\n\n/**\n * Audio file upload with drag-and-drop and optional in-browser recording.\n * Supports file validation, multiple files, and real-time waveform visualization during recording.\n *\n * @example\n * ```tsx\n * <AudioUpload\n *   onFilesAccepted={(files) => console.log(files)}\n *   onRecordingComplete={(blob, duration) => console.log(blob, duration)}\n * />\n * ```\n */\nexport const AudioUpload = React.forwardRef<HTMLDivElement, AudioUploadProps>(\n  (\n    {\n      className,\n      maxFileSize = DEFAULT_MAX_FILE_SIZE,\n      accept = DEFAULT_ACCEPTED_TYPES,\n      maxFiles = 1,\n      allowRecording = true,\n      maxRecordingDuration = DEFAULT_MAX_RECORDING_DURATION,\n      minRecordingDuration = DEFAULT_MIN_RECORDING_DURATION,\n      onFilesAccepted,\n      onFilesRejected,\n      onRecordingComplete,\n      onRecordingTooShort,\n      onPermissionError,\n      onRecordingError,\n      uploadTitle = \"Click to upload, or drag & drop\",\n      uploadDescription = \"Audio files only, up to 10MB each\",\n      separatorText = \"or\",\n      recordButtonLabel = \"Record audio\",\n      stopButtonAriaLabel = \"Stop recording\",\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputId = React.useId();\n    const descriptionId = React.useId();\n    const [isDragActive, setIsDragActive] = React.useState(false);\n    const stopButtonRef = React.useRef<HTMLButtonElement>(null);\n\n    const {\n      isRecording,\n      elapsedMs,\n      startRecording,\n      stopRecording,\n      analyserNode,\n      isSupported: isRecordingSupported,\n    } = useAudioRecorder({\n      maxDuration: maxRecordingDuration,\n      minDuration: minRecordingDuration,\n      onComplete: onRecordingComplete,\n      onTooShort: onRecordingTooShort,\n      onPermissionError,\n      onError: onRecordingError,\n    });\n\n    const acceptString = accept.join(\",\");\n\n    // Move focus to stop button when recording starts\n    React.useEffect(() => {\n      if (isRecording) {\n        stopButtonRef.current?.focus();\n      }\n    }, [isRecording]);\n\n    const validateAndAcceptFiles = React.useCallback(\n      (files: FileList | File[]) => {\n        const { accepted, rejected } = partitionFiles(\n          Array.from(files),\n          maxFileSize,\n          accept,\n          maxFiles,\n        );\n        if (accepted.length > 0) onFilesAccepted?.(accepted);\n        if (rejected.length > 0) onFilesRejected?.(rejected);\n      },\n      [maxFileSize, accept, maxFiles, onFilesAccepted, onFilesRejected],\n    );\n\n    const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragActive(false);\n\n      if (disabled) return;\n\n      const { files } = e.dataTransfer;\n      if (files.length > 0) {\n        validateAndAcceptFiles(files);\n      }\n    };\n\n    const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      if (!disabled) {\n        setIsDragActive(true);\n      }\n    };\n\n    const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragActive(false);\n    };\n\n    const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const { files } = e.target;\n      if (files && files.length > 0) {\n        validateAndAcceptFiles(files);\n      }\n      // Reset input so same file can be selected again\n      e.target.value = \"\";\n    };\n\n    const handleRecordClick = (e: React.MouseEvent) => {\n      e.stopPropagation();\n      startRecording();\n    };\n\n    const handleStopClick = () => {\n      stopRecording();\n    };\n\n    if (isRecording) {\n      const formattedElapsed = formatAudioTime(elapsedMs);\n\n      return (\n        // biome-ignore lint/a11y/useSemanticElements: <fieldset> would break the public HTMLDivElement ref/props API\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label=\"Audio recording in progress\"\n          data-testid=\"audio-upload\"\n          data-state=\"recording\"\n          className={cn(\n            \"flex flex-col items-center justify-center gap-2 rounded-md bg-surface-secondary px-4 py-3\",\n            className,\n          )}\n          {...props}\n        >\n          <div className=\"flex flex-1 flex-col items-center gap-2\">\n            <div\n              className=\"flex size-[72px] items-center justify-center rounded-full bg-buttons-primary-default\"\n              aria-hidden=\"true\"\n            >\n              <MicrophoneIcon className=\"size-5 text-content-primary-inverted\" />\n            </div>\n\n            <p\n              role=\"timer\"\n              aria-label=\"Recording time\"\n              className=\"typography-body-default-16px-regular text-content-primary\"\n            >\n              {formattedElapsed} / {formatAudioTime(maxRecordingDuration * 1000)}\n            </p>\n          </div>\n\n          <div className=\"flex w-full items-center gap-2.5\" aria-hidden=\"true\">\n            <AudioWaveform\n              analyserNode={analyserNode}\n              isRecording={isRecording}\n              className=\"flex-1\"\n            />\n          </div>\n\n          <button\n            ref={stopButtonRef}\n            type=\"button\"\n            onClick={handleStopClick}\n            className=\"mt-1 flex size-11 items-center justify-center rounded-full bg-error-content text-content-always-white transition-colors hover:bg-error-content/80 focus:shadow-focus-ring focus-visible:outline-none\"\n            aria-label={stopButtonAriaLabel}\n          >\n            <StopIcon className=\"size-5\" />\n          </button>\n        </div>\n      );\n    }\n\n    return (\n      // biome-ignore lint/a11y/useSemanticElements: <fieldset> would break the public HTMLDivElement ref/props API\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label=\"Audio upload\"\n        data-testid=\"audio-upload\"\n        data-state=\"idle\"\n        aria-disabled={disabled || undefined}\n        onDrop={handleDrop}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        className={cn(\n          \"flex flex-col items-center justify-center gap-2 rounded-md bg-surface-secondary px-4 py-3 transition-colors\",\n          isDragActive && \"bg-brand-primary-muted ring-2 ring-brand-primary-default\",\n          disabled && \"pointer-events-none opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <input\n          id={inputId}\n          type=\"file\"\n          accept={acceptString}\n          multiple={maxFiles > 1}\n          onChange={handleFileInputChange}\n          className=\"peer sr-only\"\n          disabled={disabled}\n          aria-describedby={descriptionId}\n        />\n\n        <label\n          htmlFor={inputId}\n          className=\"flex cursor-pointer flex-col items-center gap-2 rounded-xs px-2 py-1 peer-focus-visible:shadow-focus-ring\"\n        >\n          <UploadCloudIcon className=\"size-5 text-content-primary\" />\n\n          <span className=\"typography-body-default-16px-semibold text-center text-content-primary\">\n            {uploadTitle}\n          </span>\n\n          <span\n            id={descriptionId}\n            className=\"typography-body-small-14px-regular text-center text-content-primary\"\n          >\n            {uploadDescription}\n          </span>\n        </label>\n\n        {allowRecording && isRecordingSupported && (\n          <>\n            <p className=\"typography-body-small-14px-regular text-center text-content-primary\">\n              {separatorText}\n            </p>\n\n            <Button\n              variant=\"brand\"\n              size=\"40\"\n              leftIcon={<MicrophoneIcon className=\"size-5\" />}\n              onClick={handleRecordClick}\n              disabled={disabled}\n              type=\"button\"\n            >\n              {recordButtonLabel}\n            </Button>\n          </>\n        )}\n      </div>\n    );\n  },\n);\n\nAudioUpload.displayName = \"AudioUpload\";\n"],"names":["validateAudioFile","React","DEFAULT_MAX_FILE_SIZE","DEFAULT_ACCEPTED_TYPES","DEFAULT_MAX_RECORDING_DURATION","DEFAULT_MIN_RECORDING_DURATION","useAudioRecorder","formatAudioTime","jsxs","cn","jsx","MicrophoneIcon","AudioWaveform","StopIcon","UploadCloudIcon","Fragment","Button"],"mappings":"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"}

package/dist/cjs/components/Autocomplete/Autocomplete.cjs

@@ -36,9 +36,9 @@ const CONTAINER_HEIGHT = {
   "32": "min-h-8"
 };
 const INPUT_SIZE_CLASSES = {
-  "48": "typography-regular-body-lg",
-  "40": "typography-regular-body-lg",
-  "32": "typography-regular-body-md"
+  "48": "typography-body-default-16px-regular",
+  "40": "typography-body-default-16px-regular",
+  "32": "typography-body-small-14px-regular"
 };
 const PADDING_CLASSES = {
   "48": "px-4 py-1.5 gap-3",
@@ -93,7 +93,7 @@ const Autocomplete = React__namespace.forwardRef((props, ref) => {
           "label",
           {
             htmlFor: ac.inputId,
-            className: "typography-semibold-body-sm px-1 pt-1 pb-2 text-content-primary",
+            className: "typography-description-12px-semibold px-1 pt-1 pb-2 text-content-primary",
             children: label
           }
         ),
@@ -185,7 +185,7 @@ const Autocomplete = React__namespace.forwardRef((props, ref) => {
             onCloseAutoFocus: (e) => e.preventDefault(),
             style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)" },
             className: cn.cn(
-              "w-max min-w-(--radix-popper-anchor-width) max-w-(--radix-popover-content-available-width) overflow-hidden rounded-sm border border-neutral-alphas-200 bg-bg-primary text-content-primary shadow-[0_4px_16px_rgba(0,0,0,0.10)]",
+              "w-max min-w-(--radix-popper-anchor-width) max-w-(--radix-popover-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)]",
               "data-[state=closed]:animate-out data-[state=open]:animate-in",
               "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
               "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -229,7 +229,7 @@ const Autocomplete = React__namespace.forwardRef((props, ref) => {
           {
             id: ac.helperTextId,
             className: cn.cn(
-              "typography-regular-body-sm px-2 pt-1 pb-0.5",
+              "typography-description-12px-regular px-2 pt-1 pb-0.5",
               error ? "text-error-content" : "text-content-secondary"
             ),
             children: bottomText

package/dist/cjs/components/Autocomplete/Autocomplete.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.cjs","sources":["../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import * as Popover from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"@/utils/floatingContentCollisionPadding\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\nimport { AutocompleteDropdownContent } from \"./AutocompleteDropdownContent\";\nimport { AutocompleteTag } from \"./AutocompleteTag\";\nimport { useAutocomplete } from \"./useAutocomplete\";\n\nexport type AutocompleteSize = \"48\" | \"40\" | \"32\";\n\nexport interface AutocompleteOption {\n  /** Unique value identifying the option. Returned via `onChange`. */\n  value: string;\n  /** Visible label. Falls back to `value` when omitted. */\n  label?: string;\n  /** When `true`, the option renders but cannot be selected. @default false */\n  disabled?: boolean;\n  /**\n   * ID of the group this option belongs to. Must match an entry in the\n   * component's `groups` prop. Options without a `groupId` render in an\n   * implicit \"ungrouped\" bucket above the first declared group.\n   */\n  groupId?: string;\n  /**\n   * Pinned options bypass the search filter and stay visible at the top of\n   * the list regardless of the current query. Useful for \"+ Create new\"\n   * affordances. Pinned options ignore `groupId` and render before any\n   * grouped or ungrouped content. @default false\n   */\n  pinned?: boolean;\n}\n\n/**\n * Describes a single group rendered above its matching options.\n * Indentation of nested rows (e.g. price under product) is not built in —\n * consumers control it via `renderOption` styling.\n */\nexport interface AutocompleteGroup {\n  /** Stable identifier referenced by `option.groupId`. */\n  id: string;\n  /**\n   * Group heading text. Used as the group's accessible name and matched\n   * against the search query: when the query matches a group's `label`,\n   * every option under that group is kept regardless of whether it\n   * individually matches the per-option filter. This supports the common\n   * \"heading is the searchable label, items are sub-rows\" shape (e.g.\n   * heading = product name, items = prices).\n   */\n  label: string;\n}\n\ninterface AutocompleteBaseProps {\n  label?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  helperText?: string;\n  /** @default \"48\" */\n  size?: AutocompleteSize;\n  /** @default false */\n  error?: boolean;\n  errorMessage?: string;\n  placeholder?: string;\n  leftIcon?: React.ReactNode;\n  /** @default false */\n  fullWidth?: boolean;\n  /** @default false */\n  disabled?: boolean;\n  /** @default false */\n  clearable?: boolean;\n  clearAriaLabel?: string;\n  id?: string;\n  className?: string;\n  options: AutocompleteOption[];\n  inputValue?: string;\n  onInputChange?: (value: string) => void;\n  filterFn?: (option: AutocompleteOption, query: string) => boolean;\n  /** @default false */\n  creatable?: boolean;\n  creatableLabel?: (inputValue: string) => string;\n  onCreate?: (inputValue: string) => void;\n  /** @default false */\n  loading?: boolean;\n  loadingText?: string;\n  emptyText?: string;\n  renderOption?: (\n    option: AutocompleteOption,\n    state: { selected: boolean; active: boolean },\n  ) => React.ReactNode;\n  renderTag?: (option: AutocompleteOption, onRemove: () => void) => React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Ordered list of groups. When provided, options whose `groupId` matches\n   * an entry render under the corresponding heading. Groups with no visible\n   * (post-filter) options collapse silently. Pinned options render above\n   * everything; ungrouped options render between pinned and the first group.\n   * Only one level of grouping is supported.\n   */\n  groups?: AutocompleteGroup[];\n  /**\n   * Custom renderer for group headings. The returned node is wrapped by the\n   * component in an element carrying the `id` referenced by the surrounding\n   * `role=\"group\"` wrapper's `aria-labelledby`, so consumers only need to\n   * return visual content.\n   */\n  renderGroupHeading?: (group: AutocompleteGroup) => React.ReactNode;\n}\n\ninterface AutocompleteSingleProps extends AutocompleteBaseProps {\n  multiple?: false;\n  value?: string | null;\n  defaultValue?: string | null;\n  onChange?: (value: string | null) => void;\n}\n\ninterface AutocompleteMultiProps extends AutocompleteBaseProps {\n  multiple: true;\n  value?: string[];\n  defaultValue?: string[];\n  onChange?: (values: string[]) => void;\n}\n\nexport type AutocompleteProps = AutocompleteSingleProps | AutocompleteMultiProps;\n\nconst CONTAINER_HEIGHT: Record<AutocompleteSize, string> = {\n  \"48\": \"min-h-12\",\n  \"40\": \"min-h-10\",\n  \"32\": \"min-h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<AutocompleteSize, string> = {\n  \"48\": \"typography-regular-body-lg\",\n  \"40\": \"typography-regular-body-lg\",\n  \"32\": \"typography-regular-body-md\",\n};\n\nconst PADDING_CLASSES: Record<AutocompleteSize, string> = {\n  \"48\": \"px-4 py-1.5 gap-3\",\n  \"40\": \"px-4 py-1 gap-3\",\n  \"32\": \"px-3 py-1 gap-2\",\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        \"Autocomplete: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A combobox input with single- or multi-select, optional async loading, and\n * native support for grouped + pinned options.\n *\n * - Pass `groups` plus an `options` array whose entries reference each group\n *   via `groupId` to render hierarchical lists with proper `role=\"group\"` +\n *   `aria-labelledby` semantics. Options without a `groupId` render above\n *   the first group; options marked `pinned` render above everything and\n *   bypass the search filter.\n * - Indentation of nested rows (e.g. price under product) is controlled by\n *   the consumer via `renderOption` styling — there is no built-in indent.\n *\n * @example\n * ```tsx\n * <Autocomplete\n *   aria-label=\"Choose a product\"\n *   options={[\n *     { value: \"__new__\", label: \"+ Create new product\", pinned: true },\n *     { value: \"product:abc\", label: \"Demo Product\", groupId: \"recent\" },\n *   ]}\n *   groups={[{ id: \"recent\", label: \"Recent products\" }]}\n *   onChange={handleSelect}\n * />\n * ```\n */\n// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Conditional JSX branches in the render template\nexport const Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>((props, ref) => {\n  const {\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    helperText,\n    size = \"48\",\n    error = false,\n    errorMessage,\n    placeholder,\n    leftIcon,\n    fullWidth = false,\n    disabled = false,\n    clearable = false,\n    clearAriaLabel = \"Clear\",\n    className,\n    loading = false,\n    loadingText,\n    emptyText = \"No results\",\n    renderOption,\n    renderTag,\n    renderGroupHeading,\n  } = props;\n\n  const ac = useAutocomplete(props);\n\n  React.useImperativeHandle(ref, () => ac.inputRef.current as HTMLInputElement);\n\n  warnMissingAccessibleName(label, ariaLabel, ariaLabelledby);\n\n  const bottomText = error && errorMessage ? errorMessage : helperText;\n\n  return (\n    <Popover.Root open={ac.isOpen && !disabled} onOpenChange={ac.handleOpenChange}>\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-autocomplete-root=\"\"\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={ac.inputId}\n            className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        <Popover.Anchor asChild>\n          {/* biome-ignore lint/a11y/noStaticElementInteractions: Container delegates click to the inner input */}\n          {/* biome-ignore lint/a11y/useKeyWithClickEvents: Keyboard interaction is handled by the inner combobox input */}\n          <div\n            className={cn(\n              \"flex flex-wrap items-center overflow-hidden rounded-sm border bg-neutral-alphas-100 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              ac.isOpen && !error && !disabled && \"border-neutral-alphas-400\",\n              CONTAINER_HEIGHT[size],\n              PADDING_CLASSES[size],\n              disabled && \"opacity-50\",\n            )}\n            onClick={ac.handleContainerClick}\n          >\n            {leftIcon && (\n              <div className=\"flex size-5 shrink-0 items-center justify-center text-content-secondary\">\n                {leftIcon}\n              </div>\n            )}\n\n            <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-1.5\">\n              {ac.isMulti &&\n                ac.selectedMultiOptions.map((opt) => (\n                  <AutocompleteTag\n                    key={opt.value}\n                    option={opt}\n                    disabled={disabled}\n                    onRemove={() => ac.toggleMulti(opt.value)}\n                    renderTag={renderTag}\n                  />\n                ))}\n\n              <input\n                ref={ac.inputRef}\n                id={ac.inputId}\n                role=\"combobox\"\n                type=\"text\"\n                disabled={disabled}\n                aria-expanded={ac.isOpen}\n                aria-controls={ac.isOpen ? ac.listboxId : undefined}\n                aria-activedescendant={ac.activeDescendantId}\n                aria-autocomplete=\"list\"\n                aria-describedby={bottomText ? ac.helperTextId : undefined}\n                aria-invalid={error || undefined}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledby}\n                autoComplete=\"off\"\n                placeholder={\n                  ac.isMulti && ac.selectedMultiValues.length > 0 ? undefined : placeholder\n                }\n                value={ac.displayInputValue}\n                onChange={ac.handleInputChange}\n                onKeyDown={ac.handleKeyDown}\n                onFocus={ac.handleFocus}\n                onBlur={ac.handleBlur}\n                className={cn(\n                  \"min-w-[40px] flex-1 truncate bg-transparent text-content-primary no-underline placeholder:text-content-secondary placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n                  INPUT_SIZE_CLASSES[size],\n                )}\n              />\n            </div>\n\n            <div className=\"flex shrink-0 items-center gap-1\">\n              {loading && <SpinnerIcon className=\"size-4 animate-spin text-content-secondary\" />}\n              {clearable && ac.hasClearableValue && !disabled && (\n                <button\n                  type=\"button\"\n                  tabIndex={-1}\n                  aria-label={clearAriaLabel}\n                  className=\"flex size-5 shrink-0 cursor-pointer items-center justify-center text-content-secondary hover:text-content-primary active:scale-95\"\n                  onClick={ac.handleClear}\n                >\n                  <CloseIcon className=\"size-4\" />\n                </button>\n              )}\n              <div className=\"flex size-5 shrink-0 items-center justify-center text-content-secondary\">\n                <ChevronDownIcon\n                  className={cn(\"size-5 transition-transform\", ac.isOpen && \"rotate-180\")}\n                />\n              </div>\n            </div>\n          </div>\n        </Popover.Anchor>\n\n        <Popover.Portal>\n          <Popover.Content\n            sideOffset={4}\n            collisionPadding={FLOATING_CONTENT_COLLISION_PADDING}\n            onOpenAutoFocus={(e) => e.preventDefault()}\n            onCloseAutoFocus={(e) => e.preventDefault()}\n            style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\" }}\n            className={cn(\n              \"w-max min-w-(--radix-popper-anchor-width) max-w-(--radix-popover-content-available-width) overflow-hidden rounded-sm border border-neutral-alphas-200 bg-bg-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            )}\n          >\n            <div\n              ref={ac.listRef}\n              id={ac.listboxId}\n              role=\"listbox\"\n              aria-label={label ?? ariaLabel ?? \"Options\"}\n              aria-multiselectable={ac.isMulti || undefined}\n              className=\"max-h-60 overflow-y-auto p-1\"\n            >\n              <AutocompleteDropdownContent\n                loading={loading}\n                loadingText={loadingText}\n                emptyText={emptyText}\n                visibleOptions={ac.visibleOptions}\n                visibleSections={ac.visibleSections}\n                createOption={ac.createOption}\n                listboxId={ac.listboxId}\n                activeIndex={ac.activeIndex}\n                isMulti={ac.isMulti}\n                selectedMultiValues={ac.selectedMultiValues}\n                selectedValue={ac.selectedValue}\n                onSelect={ac.handleSelect}\n                onMouseEnter={ac.setActiveIndex}\n                renderOption={renderOption}\n                renderGroupHeading={renderGroupHeading}\n              />\n            </div>\n          </Popover.Content>\n        </Popover.Portal>\n\n        {bottomText && (\n          <p\n            id={ac.helperTextId}\n            className={cn(\n              \"typography-regular-body-sm 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    </Popover.Root>\n  );\n});\n\nAutocomplete.displayName = \"Autocomplete\";\n"],"names":["React","useAutocomplete","jsx","Popover","jsxs","cn","AutocompleteTag","SpinnerIcon","CloseIcon","ChevronDownIcon","FLOATING_CONTENT_COLLISION_PADDING","AutocompleteDropdownContent"],"mappings":"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"}
+{"version":3,"file":"Autocomplete.cjs","sources":["../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import * as Popover from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"@/utils/floatingContentCollisionPadding\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\nimport { AutocompleteDropdownContent } from \"./AutocompleteDropdownContent\";\nimport { AutocompleteTag } from \"./AutocompleteTag\";\nimport { useAutocomplete } from \"./useAutocomplete\";\n\nexport type AutocompleteSize = \"48\" | \"40\" | \"32\";\n\nexport interface AutocompleteOption {\n  /** Unique value identifying the option. Returned via `onChange`. */\n  value: string;\n  /** Visible label. Falls back to `value` when omitted. */\n  label?: string;\n  /** When `true`, the option renders but cannot be selected. @default false */\n  disabled?: boolean;\n  /**\n   * ID of the group this option belongs to. Must match an entry in the\n   * component's `groups` prop. Options without a `groupId` render in an\n   * implicit \"ungrouped\" bucket above the first declared group.\n   */\n  groupId?: string;\n  /**\n   * Pinned options bypass the search filter and stay visible at the top of\n   * the list regardless of the current query. Useful for \"+ Create new\"\n   * affordances. Pinned options ignore `groupId` and render before any\n   * grouped or ungrouped content. @default false\n   */\n  pinned?: boolean;\n}\n\n/**\n * Describes a single group rendered above its matching options.\n * Indentation of nested rows (e.g. price under product) is not built in —\n * consumers control it via `renderOption` styling.\n */\nexport interface AutocompleteGroup {\n  /** Stable identifier referenced by `option.groupId`. */\n  id: string;\n  /**\n   * Group heading text. Used as the group's accessible name and matched\n   * against the search query: when the query matches a group's `label`,\n   * every option under that group is kept regardless of whether it\n   * individually matches the per-option filter. This supports the common\n   * \"heading is the searchable label, items are sub-rows\" shape (e.g.\n   * heading = product name, items = prices).\n   */\n  label: string;\n}\n\ninterface AutocompleteBaseProps {\n  label?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  helperText?: string;\n  /** @default \"48\" */\n  size?: AutocompleteSize;\n  /** @default false */\n  error?: boolean;\n  errorMessage?: string;\n  placeholder?: string;\n  leftIcon?: React.ReactNode;\n  /** @default false */\n  fullWidth?: boolean;\n  /** @default false */\n  disabled?: boolean;\n  /** @default false */\n  clearable?: boolean;\n  clearAriaLabel?: string;\n  id?: string;\n  className?: string;\n  options: AutocompleteOption[];\n  inputValue?: string;\n  onInputChange?: (value: string) => void;\n  filterFn?: (option: AutocompleteOption, query: string) => boolean;\n  /** @default false */\n  creatable?: boolean;\n  creatableLabel?: (inputValue: string) => string;\n  onCreate?: (inputValue: string) => void;\n  /** @default false */\n  loading?: boolean;\n  loadingText?: string;\n  emptyText?: string;\n  renderOption?: (\n    option: AutocompleteOption,\n    state: { selected: boolean; active: boolean },\n  ) => React.ReactNode;\n  renderTag?: (option: AutocompleteOption, onRemove: () => void) => React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Ordered list of groups. When provided, options whose `groupId` matches\n   * an entry render under the corresponding heading. Groups with no visible\n   * (post-filter) options collapse silently. Pinned options render above\n   * everything; ungrouped options render between pinned and the first group.\n   * Only one level of grouping is supported.\n   */\n  groups?: AutocompleteGroup[];\n  /**\n   * Custom renderer for group headings. The returned node is wrapped by the\n   * component in an element carrying the `id` referenced by the surrounding\n   * `role=\"group\"` wrapper's `aria-labelledby`, so consumers only need to\n   * return visual content.\n   */\n  renderGroupHeading?: (group: AutocompleteGroup) => React.ReactNode;\n}\n\ninterface AutocompleteSingleProps extends AutocompleteBaseProps {\n  multiple?: false;\n  value?: string | null;\n  defaultValue?: string | null;\n  onChange?: (value: string | null) => void;\n}\n\ninterface AutocompleteMultiProps extends AutocompleteBaseProps {\n  multiple: true;\n  value?: string[];\n  defaultValue?: string[];\n  onChange?: (values: string[]) => void;\n}\n\nexport type AutocompleteProps = AutocompleteSingleProps | AutocompleteMultiProps;\n\nconst CONTAINER_HEIGHT: Record<AutocompleteSize, string> = {\n  \"48\": \"min-h-12\",\n  \"40\": \"min-h-10\",\n  \"32\": \"min-h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<AutocompleteSize, string> = {\n  \"48\": \"typography-body-default-16px-regular\",\n  \"40\": \"typography-body-default-16px-regular\",\n  \"32\": \"typography-body-small-14px-regular\",\n};\n\nconst PADDING_CLASSES: Record<AutocompleteSize, string> = {\n  \"48\": \"px-4 py-1.5 gap-3\",\n  \"40\": \"px-4 py-1 gap-3\",\n  \"32\": \"px-3 py-1 gap-2\",\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        \"Autocomplete: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A combobox input with single- or multi-select, optional async loading, and\n * native support for grouped + pinned options.\n *\n * - Pass `groups` plus an `options` array whose entries reference each group\n *   via `groupId` to render hierarchical lists with proper `role=\"group\"` +\n *   `aria-labelledby` semantics. Options without a `groupId` render above\n *   the first group; options marked `pinned` render above everything and\n *   bypass the search filter.\n * - Indentation of nested rows (e.g. price under product) is controlled by\n *   the consumer via `renderOption` styling — there is no built-in indent.\n *\n * @example\n * ```tsx\n * <Autocomplete\n *   aria-label=\"Choose a product\"\n *   options={[\n *     { value: \"__new__\", label: \"+ Create new product\", pinned: true },\n *     { value: \"product:abc\", label: \"Demo Product\", groupId: \"recent\" },\n *   ]}\n *   groups={[{ id: \"recent\", label: \"Recent products\" }]}\n *   onChange={handleSelect}\n * />\n * ```\n */\n// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Conditional JSX branches in the render template\nexport const Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>((props, ref) => {\n  const {\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    helperText,\n    size = \"48\",\n    error = false,\n    errorMessage,\n    placeholder,\n    leftIcon,\n    fullWidth = false,\n    disabled = false,\n    clearable = false,\n    clearAriaLabel = \"Clear\",\n    className,\n    loading = false,\n    loadingText,\n    emptyText = \"No results\",\n    renderOption,\n    renderTag,\n    renderGroupHeading,\n  } = props;\n\n  const ac = useAutocomplete(props);\n\n  React.useImperativeHandle(ref, () => ac.inputRef.current as HTMLInputElement);\n\n  warnMissingAccessibleName(label, ariaLabel, ariaLabelledby);\n\n  const bottomText = error && errorMessage ? errorMessage : helperText;\n\n  return (\n    <Popover.Root open={ac.isOpen && !disabled} onOpenChange={ac.handleOpenChange}>\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-autocomplete-root=\"\"\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={ac.inputId}\n            className=\"typography-description-12px-semibold px-1 pt-1 pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        <Popover.Anchor asChild>\n          {/* biome-ignore lint/a11y/noStaticElementInteractions: Container delegates click to the inner input */}\n          {/* biome-ignore lint/a11y/useKeyWithClickEvents: Keyboard interaction is handled by the inner combobox input */}\n          <div\n            className={cn(\n              \"flex flex-wrap items-center overflow-hidden rounded-sm border bg-neutral-alphas-100 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              ac.isOpen && !error && !disabled && \"border-neutral-alphas-400\",\n              CONTAINER_HEIGHT[size],\n              PADDING_CLASSES[size],\n              disabled && \"opacity-50\",\n            )}\n            onClick={ac.handleContainerClick}\n          >\n            {leftIcon && (\n              <div className=\"flex size-5 shrink-0 items-center justify-center text-content-secondary\">\n                {leftIcon}\n              </div>\n            )}\n\n            <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-1.5\">\n              {ac.isMulti &&\n                ac.selectedMultiOptions.map((opt) => (\n                  <AutocompleteTag\n                    key={opt.value}\n                    option={opt}\n                    disabled={disabled}\n                    onRemove={() => ac.toggleMulti(opt.value)}\n                    renderTag={renderTag}\n                  />\n                ))}\n\n              <input\n                ref={ac.inputRef}\n                id={ac.inputId}\n                role=\"combobox\"\n                type=\"text\"\n                disabled={disabled}\n                aria-expanded={ac.isOpen}\n                aria-controls={ac.isOpen ? ac.listboxId : undefined}\n                aria-activedescendant={ac.activeDescendantId}\n                aria-autocomplete=\"list\"\n                aria-describedby={bottomText ? ac.helperTextId : undefined}\n                aria-invalid={error || undefined}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledby}\n                autoComplete=\"off\"\n                placeholder={\n                  ac.isMulti && ac.selectedMultiValues.length > 0 ? undefined : placeholder\n                }\n                value={ac.displayInputValue}\n                onChange={ac.handleInputChange}\n                onKeyDown={ac.handleKeyDown}\n                onFocus={ac.handleFocus}\n                onBlur={ac.handleBlur}\n                className={cn(\n                  \"min-w-[40px] flex-1 truncate bg-transparent text-content-primary no-underline placeholder:text-content-secondary placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n                  INPUT_SIZE_CLASSES[size],\n                )}\n              />\n            </div>\n\n            <div className=\"flex shrink-0 items-center gap-1\">\n              {loading && <SpinnerIcon className=\"size-4 animate-spin text-content-secondary\" />}\n              {clearable && ac.hasClearableValue && !disabled && (\n                <button\n                  type=\"button\"\n                  tabIndex={-1}\n                  aria-label={clearAriaLabel}\n                  className=\"flex size-5 shrink-0 cursor-pointer items-center justify-center text-content-secondary hover:text-content-primary active:scale-95\"\n                  onClick={ac.handleClear}\n                >\n                  <CloseIcon className=\"size-4\" />\n                </button>\n              )}\n              <div className=\"flex size-5 shrink-0 items-center justify-center text-content-secondary\">\n                <ChevronDownIcon\n                  className={cn(\"size-5 transition-transform\", ac.isOpen && \"rotate-180\")}\n                />\n              </div>\n            </div>\n          </div>\n        </Popover.Anchor>\n\n        <Popover.Portal>\n          <Popover.Content\n            sideOffset={4}\n            collisionPadding={FLOATING_CONTENT_COLLISION_PADDING}\n            onOpenAutoFocus={(e) => e.preventDefault()}\n            onCloseAutoFocus={(e) => e.preventDefault()}\n            style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\" }}\n            className={cn(\n              \"w-max min-w-(--radix-popper-anchor-width) max-w-(--radix-popover-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            )}\n          >\n            <div\n              ref={ac.listRef}\n              id={ac.listboxId}\n              role=\"listbox\"\n              aria-label={label ?? ariaLabel ?? \"Options\"}\n              aria-multiselectable={ac.isMulti || undefined}\n              className=\"max-h-60 overflow-y-auto p-1\"\n            >\n              <AutocompleteDropdownContent\n                loading={loading}\n                loadingText={loadingText}\n                emptyText={emptyText}\n                visibleOptions={ac.visibleOptions}\n                visibleSections={ac.visibleSections}\n                createOption={ac.createOption}\n                listboxId={ac.listboxId}\n                activeIndex={ac.activeIndex}\n                isMulti={ac.isMulti}\n                selectedMultiValues={ac.selectedMultiValues}\n                selectedValue={ac.selectedValue}\n                onSelect={ac.handleSelect}\n                onMouseEnter={ac.setActiveIndex}\n                renderOption={renderOption}\n                renderGroupHeading={renderGroupHeading}\n              />\n            </div>\n          </Popover.Content>\n        </Popover.Portal>\n\n        {bottomText && (\n          <p\n            id={ac.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    </Popover.Root>\n  );\n});\n\nAutocomplete.displayName = \"Autocomplete\";\n"],"names":["React","useAutocomplete","jsx","Popover","jsxs","cn","AutocompleteTag","SpinnerIcon","CloseIcon","ChevronDownIcon","FLOATING_CONTENT_COLLISION_PADDING","AutocompleteDropdownContent"],"mappings":"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"}

package/dist/cjs/components/Autocomplete/AutocompleteDropdownContent.cjs

@@ -6,7 +6,7 @@ const cn = require("../../utils/cn.cjs");
 const SpinnerIcon = require("../Icons/SpinnerIcon.cjs");
 const AutocompleteOptionItem = require("./AutocompleteOptionItem.cjs");
 function DefaultGroupHeading({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-sm block px-3 pt-2 pb-1 text-content-secondary uppercase tracking-wide", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-description-12px-semibold block px-3 pt-2 pb-1 text-content-secondary uppercase tracking-wide", children });
 }
 function AutocompleteDropdownContent({
   loading,
@@ -30,7 +30,7 @@ function AutocompleteDropdownContent({
       // biome-ignore lint/a11y/useSemanticElements: <output> is not appropriate here; using role="status" for live region announcements
       /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "status", className: "flex items-center justify-center py-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon.SpinnerIcon, { className: "size-5 animate-spin text-content-secondary" }),
-        loadingText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-md ml-2 text-content-secondary", children: loadingText })
+        loadingText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-small-14px-regular ml-2 text-content-secondary", children: loadingText })
       ] })
     );
   }
@@ -39,7 +39,7 @@ function AutocompleteDropdownContent({
   const hasGroups = groups.length > 0;
   const nonPinnedVisibleCount = ungrouped.length + groups.reduce((n, g) => n + g.options.length, 0) + (createOption ? 1 : 0);
   if (visibleOptions.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-regular-body-md block px-3 py-4 text-center text-content-secondary", children: emptyText });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-body-small-14px-regular block px-3 py-4 text-center text-content-secondary", children: emptyText });
   }
   let cursor = 0;
   const renderOptionRow = (option) => {
@@ -88,7 +88,7 @@ function AutocompleteDropdownContent({
       );
     }),
     createOption && renderOptionRow(createOption),
-    emptyAfterPinned && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-regular-body-md block px-3 py-4 text-center text-content-secondary", children: emptyText })
+    emptyAfterPinned && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-body-small-14px-regular block px-3 py-4 text-center text-content-secondary", children: emptyText })
   ] });
 }
 exports.AutocompleteDropdownContent = AutocompleteDropdownContent;

package/dist/cjs/components/Autocomplete/AutocompleteDropdownContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteDropdownContent.cjs","sources":["../../../../src/components/Autocomplete/AutocompleteDropdownContent.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\nimport type { AutocompleteGroup, AutocompleteOption } from \"./Autocomplete\";\nimport { AutocompleteOptionItem } from \"./AutocompleteOptionItem\";\nimport type { AutocompleteVisibleSections } from \"./constants\";\n\ninterface AutocompleteDropdownContentProps {\n  loading: boolean;\n  loadingText?: string;\n  emptyText?: string;\n  visibleOptions: AutocompleteOption[];\n  visibleSections: AutocompleteVisibleSections;\n  /**\n   * Synthetic \"Create new …\" row, when `creatable` is on and the search\n   * doesn't already match an existing option. Rendered as a trailing row,\n   * always shown regardless of filter, and indexed last in\n   * `visibleOptions` so keyboard navigation works.\n   */\n  createOption?: AutocompleteOption | null;\n  listboxId: string;\n  activeIndex: number;\n  isMulti: boolean;\n  selectedMultiValues: string[];\n  selectedValue: string | null;\n  onSelect: (option: AutocompleteOption) => void;\n  onMouseEnter: (index: number) => void;\n  renderOption?: (\n    option: AutocompleteOption,\n    state: { selected: boolean; active: boolean },\n  ) => React.ReactNode;\n  renderGroupHeading?: (group: AutocompleteGroup) => React.ReactNode;\n}\n\nfunction DefaultGroupHeading({ children }: { children: React.ReactNode }) {\n  return (\n    <span className=\"typography-semibold-body-sm block px-3 pt-2 pb-1 text-content-secondary uppercase tracking-wide\">\n      {children}\n    </span>\n  );\n}\n\nexport function AutocompleteDropdownContent({\n  loading,\n  loadingText,\n  emptyText,\n  visibleOptions,\n  visibleSections,\n  createOption,\n  listboxId,\n  activeIndex,\n  isMulti,\n  selectedMultiValues,\n  selectedValue,\n  onSelect,\n  onMouseEnter,\n  renderOption,\n  renderGroupHeading,\n}: AutocompleteDropdownContentProps) {\n  if (loading) {\n    return (\n      // biome-ignore lint/a11y/useSemanticElements: <output> is not appropriate here; using role=\"status\" for live region announcements\n      <div role=\"status\" className=\"flex items-center justify-center py-4\">\n        <SpinnerIcon className=\"size-5 animate-spin text-content-secondary\" />\n        {loadingText && (\n          <span className=\"typography-regular-body-md ml-2 text-content-secondary\">\n            {loadingText}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  const { pinned, ungrouped, groups } = visibleSections;\n  const hasTopBlock = pinned.length > 0 || ungrouped.length > 0;\n  const hasGroups = groups.length > 0;\n  const nonPinnedVisibleCount =\n    ungrouped.length + groups.reduce((n, g) => n + g.options.length, 0) + (createOption ? 1 : 0);\n\n  if (visibleOptions.length === 0) {\n    return (\n      <div className=\"typography-regular-body-md block px-3 py-4 text-center text-content-secondary\">\n        {emptyText}\n      </div>\n    );\n  }\n\n  let cursor = 0;\n  const renderOptionRow = (option: AutocompleteOption) => {\n    const index = cursor++;\n    const isSelected = isMulti\n      ? selectedMultiValues.includes(option.value)\n      : option.value === selectedValue;\n    return (\n      <AutocompleteOptionItem\n        key={option.value}\n        option={option}\n        optionId={`${listboxId}-option-${index}`}\n        index={index}\n        isSelected={isSelected}\n        isActive={index === activeIndex}\n        onSelect={() => onSelect(option)}\n        onMouseEnter={() => onMouseEnter(index)}\n        renderOption={renderOption}\n      />\n    );\n  };\n\n  const showDivider = hasTopBlock && hasGroups;\n  const emptyAfterPinned = nonPinnedVisibleCount === 0 && pinned.length > 0;\n\n  return (\n    <>\n      {pinned.map(renderOptionRow)}\n      {ungrouped.map(renderOptionRow)}\n      {groups.map((section, sectionIndex) => {\n        const headingId = `${listboxId}-group-${section.group.id}`;\n        const headingNode = renderGroupHeading\n          ? renderGroupHeading(section.group)\n          : section.group.label;\n        return (\n          // biome-ignore lint/a11y/useSemanticElements: <fieldset> carries form semantics and default styling we don't want inside a listbox; role=\"group\" is the correct ARIA pattern here\n          <div\n            key={section.group.id}\n            role=\"group\"\n            aria-labelledby={headingId}\n            className={cn(\n              showDivider && sectionIndex === 0 && \"mt-1 border-neutral-alphas-200 border-t pt-1\",\n            )}\n          >\n            <div role=\"presentation\" id={headingId}>\n              {renderGroupHeading ? (\n                headingNode\n              ) : (\n                <DefaultGroupHeading>{headingNode}</DefaultGroupHeading>\n              )}\n            </div>\n            {section.options.map(renderOptionRow)}\n          </div>\n        );\n      })}\n      {createOption && renderOptionRow(createOption)}\n      {emptyAfterPinned && (\n        <div className=\"typography-regular-body-md block px-3 py-4 text-center text-content-secondary\">\n          {emptyText}\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":["jsx","jsxs","SpinnerIcon","AutocompleteOptionItem","Fragment","cn"],"mappings":";;;;;;;AAkCA,SAAS,oBAAoB,EAAE,YAA2C;AACxE,SACEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,mGACb,SAAA,CACH;AAEJ;AAEO,SAAS,4BAA4B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqC;AACnC,MAAI,SAAS;AACX;AAAA;AAAA,MAEEC,2BAAAA,KAAC,OAAA,EAAI,MAAK,UAAS,WAAU,yCAC3B,UAAA;AAAA,QAAAD,2BAAAA,IAACE,YAAAA,aAAA,EAAY,WAAU,6CAAA,CAA6C;AAAA,QACnE,eACCF,2BAAAA,IAAC,QAAA,EAAK,WAAU,0DACb,UAAA,YAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA;AAAA,EAEJ;AAEA,QAAM,EAAE,QAAQ,WAAW,OAAA,IAAW;AACtC,QAAM,cAAc,OAAO,SAAS,KAAK,UAAU,SAAS;AAC5D,QAAM,YAAY,OAAO,SAAS;AAClC,QAAM,wBACJ,UAAU,SAAS,OAAO,OAAO,CAAC,GAAG,MAAM,IAAI,EAAE,QAAQ,QAAQ,CAAC,KAAK,eAAe,IAAI;AAE5F,MAAI,eAAe,WAAW,GAAG;AAC/B,WACEA,2BAAAA,IAAC,OAAA,EAAI,WAAU,iFACZ,UAAA,WACH;AAAA,EAEJ;AAEA,MAAI,SAAS;AACb,QAAM,kBAAkB,CAAC,WAA+B;AACtD,UAAM,QAAQ;AACd,UAAM,aAAa,UACf,oBAAoB,SAAS,OAAO,KAAK,IACzC,OAAO,UAAU;AACrB,WACEA,2BAAAA;AAAAA,MAACG,uBAAAA;AAAAA,MAAA;AAAA,QAEC;AAAA,QACA,UAAU,GAAG,SAAS,WAAW,KAAK;AAAA,QACtC;AAAA,QACA;AAAA,QACA,UAAU,UAAU;AAAA,QACpB,UAAU,MAAM,SAAS,MAAM;AAAA,QAC/B,cAAc,MAAM,aAAa,KAAK;AAAA,QACtC;AAAA,MAAA;AAAA,MARK,OAAO;AAAA,IAAA;AAAA,EAWlB;AAEA,QAAM,cAAc,eAAe;AACnC,QAAM,mBAAmB,0BAA0B,KAAK,OAAO,SAAS;AAExE,SACEF,2BAAAA,KAAAG,qBAAA,EACG,UAAA;AAAA,IAAA,OAAO,IAAI,eAAe;AAAA,IAC1B,UAAU,IAAI,eAAe;AAAA,IAC7B,OAAO,IAAI,CAAC,SAAS,iBAAiB;AACrC,YAAM,YAAY,GAAG,SAAS,UAAU,QAAQ,MAAM,EAAE;AACxD,YAAM,cAAc,qBAChB,mBAAmB,QAAQ,KAAK,IAChC,QAAQ,MAAM;AAClB;AAAA;AAAA,QAEEH,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,mBAAiB;AAAA,YACjB,WAAWI,GAAAA;AAAAA,cACT,eAAe,iBAAiB,KAAK;AAAA,YAAA;AAAA,YAGvC,UAAA;AAAA,cAAAL,2BAAAA,IAAC,OAAA,EAAI,MAAK,gBAAe,IAAI,WAC1B,+BACC,cAEAA,2BAAAA,IAAC,qBAAA,EAAqB,UAAA,YAAA,CAAY,GAEtC;AAAA,cACC,QAAQ,QAAQ,IAAI,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,UAd/B,QAAQ,MAAM;AAAA,QAAA;AAAA;AAAA,IAiBzB,CAAC;AAAA,IACA,gBAAgB,gBAAgB,YAAY;AAAA,IAC5C,oBACCA,2BAAAA,IAAC,OAAA,EAAI,WAAU,iFACZ,UAAA,UAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;;"}
+{"version":3,"file":"AutocompleteDropdownContent.cjs","sources":["../../../../src/components/Autocomplete/AutocompleteDropdownContent.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\nimport type { AutocompleteGroup, AutocompleteOption } from \"./Autocomplete\";\nimport { AutocompleteOptionItem } from \"./AutocompleteOptionItem\";\nimport type { AutocompleteVisibleSections } from \"./constants\";\n\ninterface AutocompleteDropdownContentProps {\n  loading: boolean;\n  loadingText?: string;\n  emptyText?: string;\n  visibleOptions: AutocompleteOption[];\n  visibleSections: AutocompleteVisibleSections;\n  /**\n   * Synthetic \"Create new …\" row, when `creatable` is on and the search\n   * doesn't already match an existing option. Rendered as a trailing row,\n   * always shown regardless of filter, and indexed last in\n   * `visibleOptions` so keyboard navigation works.\n   */\n  createOption?: AutocompleteOption | null;\n  listboxId: string;\n  activeIndex: number;\n  isMulti: boolean;\n  selectedMultiValues: string[];\n  selectedValue: string | null;\n  onSelect: (option: AutocompleteOption) => void;\n  onMouseEnter: (index: number) => void;\n  renderOption?: (\n    option: AutocompleteOption,\n    state: { selected: boolean; active: boolean },\n  ) => React.ReactNode;\n  renderGroupHeading?: (group: AutocompleteGroup) => React.ReactNode;\n}\n\nfunction DefaultGroupHeading({ children }: { children: React.ReactNode }) {\n  return (\n    <span className=\"typography-description-12px-semibold block px-3 pt-2 pb-1 text-content-secondary uppercase tracking-wide\">\n      {children}\n    </span>\n  );\n}\n\nexport function AutocompleteDropdownContent({\n  loading,\n  loadingText,\n  emptyText,\n  visibleOptions,\n  visibleSections,\n  createOption,\n  listboxId,\n  activeIndex,\n  isMulti,\n  selectedMultiValues,\n  selectedValue,\n  onSelect,\n  onMouseEnter,\n  renderOption,\n  renderGroupHeading,\n}: AutocompleteDropdownContentProps) {\n  if (loading) {\n    return (\n      // biome-ignore lint/a11y/useSemanticElements: <output> is not appropriate here; using role=\"status\" for live region announcements\n      <div role=\"status\" className=\"flex items-center justify-center py-4\">\n        <SpinnerIcon className=\"size-5 animate-spin text-content-secondary\" />\n        {loadingText && (\n          <span className=\"typography-body-small-14px-regular ml-2 text-content-secondary\">\n            {loadingText}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  const { pinned, ungrouped, groups } = visibleSections;\n  const hasTopBlock = pinned.length > 0 || ungrouped.length > 0;\n  const hasGroups = groups.length > 0;\n  const nonPinnedVisibleCount =\n    ungrouped.length + groups.reduce((n, g) => n + g.options.length, 0) + (createOption ? 1 : 0);\n\n  if (visibleOptions.length === 0) {\n    return (\n      <div className=\"typography-body-small-14px-regular block px-3 py-4 text-center text-content-secondary\">\n        {emptyText}\n      </div>\n    );\n  }\n\n  let cursor = 0;\n  const renderOptionRow = (option: AutocompleteOption) => {\n    const index = cursor++;\n    const isSelected = isMulti\n      ? selectedMultiValues.includes(option.value)\n      : option.value === selectedValue;\n    return (\n      <AutocompleteOptionItem\n        key={option.value}\n        option={option}\n        optionId={`${listboxId}-option-${index}`}\n        index={index}\n        isSelected={isSelected}\n        isActive={index === activeIndex}\n        onSelect={() => onSelect(option)}\n        onMouseEnter={() => onMouseEnter(index)}\n        renderOption={renderOption}\n      />\n    );\n  };\n\n  const showDivider = hasTopBlock && hasGroups;\n  const emptyAfterPinned = nonPinnedVisibleCount === 0 && pinned.length > 0;\n\n  return (\n    <>\n      {pinned.map(renderOptionRow)}\n      {ungrouped.map(renderOptionRow)}\n      {groups.map((section, sectionIndex) => {\n        const headingId = `${listboxId}-group-${section.group.id}`;\n        const headingNode = renderGroupHeading\n          ? renderGroupHeading(section.group)\n          : section.group.label;\n        return (\n          // biome-ignore lint/a11y/useSemanticElements: <fieldset> carries form semantics and default styling we don't want inside a listbox; role=\"group\" is the correct ARIA pattern here\n          <div\n            key={section.group.id}\n            role=\"group\"\n            aria-labelledby={headingId}\n            className={cn(\n              showDivider && sectionIndex === 0 && \"mt-1 border-neutral-alphas-200 border-t pt-1\",\n            )}\n          >\n            <div role=\"presentation\" id={headingId}>\n              {renderGroupHeading ? (\n                headingNode\n              ) : (\n                <DefaultGroupHeading>{headingNode}</DefaultGroupHeading>\n              )}\n            </div>\n            {section.options.map(renderOptionRow)}\n          </div>\n        );\n      })}\n      {createOption && renderOptionRow(createOption)}\n      {emptyAfterPinned && (\n        <div className=\"typography-body-small-14px-regular block px-3 py-4 text-center text-content-secondary\">\n          {emptyText}\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":["jsx","jsxs","SpinnerIcon","AutocompleteOptionItem","Fragment","cn"],"mappings":";;;;;;;AAkCA,SAAS,oBAAoB,EAAE,YAA2C;AACxE,SACEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4GACb,SAAA,CACH;AAEJ;AAEO,SAAS,4BAA4B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqC;AACnC,MAAI,SAAS;AACX;AAAA;AAAA,MAEEC,2BAAAA,KAAC,OAAA,EAAI,MAAK,UAAS,WAAU,yCAC3B,UAAA;AAAA,QAAAD,2BAAAA,IAACE,YAAAA,aAAA,EAAY,WAAU,6CAAA,CAA6C;AAAA,QACnE,eACCF,2BAAAA,IAAC,QAAA,EAAK,WAAU,kEACb,UAAA,YAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA;AAAA,EAEJ;AAEA,QAAM,EAAE,QAAQ,WAAW,OAAA,IAAW;AACtC,QAAM,cAAc,OAAO,SAAS,KAAK,UAAU,SAAS;AAC5D,QAAM,YAAY,OAAO,SAAS;AAClC,QAAM,wBACJ,UAAU,SAAS,OAAO,OAAO,CAAC,GAAG,MAAM,IAAI,EAAE,QAAQ,QAAQ,CAAC,KAAK,eAAe,IAAI;AAE5F,MAAI,eAAe,WAAW,GAAG;AAC/B,WACEA,2BAAAA,IAAC,OAAA,EAAI,WAAU,yFACZ,UAAA,WACH;AAAA,EAEJ;AAEA,MAAI,SAAS;AACb,QAAM,kBAAkB,CAAC,WAA+B;AACtD,UAAM,QAAQ;AACd,UAAM,aAAa,UACf,oBAAoB,SAAS,OAAO,KAAK,IACzC,OAAO,UAAU;AACrB,WACEA,2BAAAA;AAAAA,MAACG,uBAAAA;AAAAA,MAAA;AAAA,QAEC;AAAA,QACA,UAAU,GAAG,SAAS,WAAW,KAAK;AAAA,QACtC;AAAA,QACA;AAAA,QACA,UAAU,UAAU;AAAA,QACpB,UAAU,MAAM,SAAS,MAAM;AAAA,QAC/B,cAAc,MAAM,aAAa,KAAK;AAAA,QACtC;AAAA,MAAA;AAAA,MARK,OAAO;AAAA,IAAA;AAAA,EAWlB;AAEA,QAAM,cAAc,eAAe;AACnC,QAAM,mBAAmB,0BAA0B,KAAK,OAAO,SAAS;AAExE,SACEF,2BAAAA,KAAAG,qBAAA,EACG,UAAA;AAAA,IAAA,OAAO,IAAI,eAAe;AAAA,IAC1B,UAAU,IAAI,eAAe;AAAA,IAC7B,OAAO,IAAI,CAAC,SAAS,iBAAiB;AACrC,YAAM,YAAY,GAAG,SAAS,UAAU,QAAQ,MAAM,EAAE;AACxD,YAAM,cAAc,qBAChB,mBAAmB,QAAQ,KAAK,IAChC,QAAQ,MAAM;AAClB;AAAA;AAAA,QAEEH,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,mBAAiB;AAAA,YACjB,WAAWI,GAAAA;AAAAA,cACT,eAAe,iBAAiB,KAAK;AAAA,YAAA;AAAA,YAGvC,UAAA;AAAA,cAAAL,2BAAAA,IAAC,OAAA,EAAI,MAAK,gBAAe,IAAI,WAC1B,+BACC,cAEAA,2BAAAA,IAAC,qBAAA,EAAqB,UAAA,YAAA,CAAY,GAEtC;AAAA,cACC,QAAQ,QAAQ,IAAI,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,UAd/B,QAAQ,MAAM;AAAA,QAAA;AAAA;AAAA,IAiBzB,CAAC;AAAA,IACA,gBAAgB,gBAAgB,YAAY;AAAA,IAC5C,oBACCA,2BAAAA,IAAC,OAAA,EAAI,WAAU,yFACZ,UAAA,UAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;;"}

package/dist/cjs/components/Autocomplete/AutocompleteOptionItem.cjs

@@ -26,7 +26,7 @@ function AutocompleteOptionItem({
       "aria-disabled": option.disabled || void 0,
       "data-option-index": index,
       className: cn.cn(
-        "typography-regular-body-lg 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",
+        "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",
         isActive && "bg-neutral-alphas-100",
         option.disabled && "pointer-events-none opacity-50",
         isCreate && "italic"

package/dist/cjs/components/Autocomplete/AutocompleteOptionItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteOptionItem.cjs","sources":["../../../../src/components/Autocomplete/AutocompleteOptionItem.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport type { AutocompleteOption } from \"./Autocomplete\";\nimport { CREATE_PREFIX, getLabel } from \"./constants\";\n\nexport function AutocompleteOptionItem({\n  option,\n  optionId,\n  index,\n  isSelected,\n  isActive,\n  onSelect,\n  onMouseEnter,\n  renderOption,\n}: {\n  option: AutocompleteOption;\n  optionId: string;\n  index: number;\n  isSelected: boolean;\n  isActive: boolean;\n  onSelect: () => void;\n  onMouseEnter: () => void;\n  renderOption?: (\n    option: AutocompleteOption,\n    state: { selected: boolean; active: boolean },\n  ) => React.ReactNode;\n}) {\n  const isCreate = option.value.startsWith(CREATE_PREFIX);\n\n  return (\n    <div\n      id={optionId}\n      role=\"option\"\n      tabIndex={-1}\n      aria-selected={isSelected}\n      aria-disabled={option.disabled || undefined}\n      data-option-index={index}\n      className={cn(\n        \"typography-regular-body-lg 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        isActive && \"bg-neutral-alphas-100\",\n        option.disabled && \"pointer-events-none opacity-50\",\n        isCreate && \"italic\",\n      )}\n      onMouseEnter={onMouseEnter}\n      onMouseDown={(e) => e.preventDefault()}\n      onClick={() => {\n        if (!option.disabled) onSelect();\n      }}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          if (!option.disabled) onSelect();\n        }\n      }}\n    >\n      {renderOption ? (\n        renderOption(option, { selected: isSelected, active: isActive })\n      ) : (\n        <>\n          <span className=\"min-w-0 flex-1 truncate\">{getLabel(option)}</span>\n          {isSelected && (\n            <span className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n              <CheckIcon className=\"size-4 text-content-primary\" />\n            </span>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["CREATE_PREFIX","jsx","cn","jsxs","Fragment","getLabel","CheckIcon"],"mappings":";;;;;;;AAMO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAYG;AACD,QAAM,WAAW,OAAO,MAAM,WAAWA,UAAAA,aAAa;AAEtD,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,UAAU;AAAA,MACV,iBAAe;AAAA,MACf,iBAAe,OAAO,YAAY;AAAA,MAClC,qBAAmB;AAAA,MACnB,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA,YAAY;AAAA,QACZ,OAAO,YAAY;AAAA,QACnB,YAAY;AAAA,MAAA;AAAA,MAEd;AAAA,MACA,aAAa,CAAC,MAAM,EAAE,eAAA;AAAA,MACtB,SAAS,MAAM;AACb,YAAI,CAAC,OAAO,SAAU,UAAA;AAAA,MACxB;AAAA,MACA,WAAW,CAAC,MAAM;AAChB,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,YAAE,eAAA;AACF,cAAI,CAAC,OAAO,SAAU,UAAA;AAAA,QACxB;AAAA,MACF;AAAA,MAEC,UAAA,eACC,aAAa,QAAQ,EAAE,UAAU,YAAY,QAAQ,SAAA,CAAU,IAE/DC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,QAAAH,+BAAC,QAAA,EAAK,WAAU,2BAA2B,UAAAI,UAAAA,SAAS,MAAM,GAAE;AAAA,QAC3D,6CACE,QAAA,EAAK,WAAU,4DACd,UAAAJ,2BAAAA,IAACK,UAAAA,WAAA,EAAU,WAAU,8BAAA,CAA8B,EAAA,CACrD;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;;"}
+{"version":3,"file":"AutocompleteOptionItem.cjs","sources":["../../../../src/components/Autocomplete/AutocompleteOptionItem.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport type { AutocompleteOption } from \"./Autocomplete\";\nimport { CREATE_PREFIX, getLabel } from \"./constants\";\n\nexport function AutocompleteOptionItem({\n  option,\n  optionId,\n  index,\n  isSelected,\n  isActive,\n  onSelect,\n  onMouseEnter,\n  renderOption,\n}: {\n  option: AutocompleteOption;\n  optionId: string;\n  index: number;\n  isSelected: boolean;\n  isActive: boolean;\n  onSelect: () => void;\n  onMouseEnter: () => void;\n  renderOption?: (\n    option: AutocompleteOption,\n    state: { selected: boolean; active: boolean },\n  ) => React.ReactNode;\n}) {\n  const isCreate = option.value.startsWith(CREATE_PREFIX);\n\n  return (\n    <div\n      id={optionId}\n      role=\"option\"\n      tabIndex={-1}\n      aria-selected={isSelected}\n      aria-disabled={option.disabled || undefined}\n      data-option-index={index}\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        isActive && \"bg-neutral-alphas-100\",\n        option.disabled && \"pointer-events-none opacity-50\",\n        isCreate && \"italic\",\n      )}\n      onMouseEnter={onMouseEnter}\n      onMouseDown={(e) => e.preventDefault()}\n      onClick={() => {\n        if (!option.disabled) onSelect();\n      }}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          if (!option.disabled) onSelect();\n        }\n      }}\n    >\n      {renderOption ? (\n        renderOption(option, { selected: isSelected, active: isActive })\n      ) : (\n        <>\n          <span className=\"min-w-0 flex-1 truncate\">{getLabel(option)}</span>\n          {isSelected && (\n            <span className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n              <CheckIcon className=\"size-4 text-content-primary\" />\n            </span>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["CREATE_PREFIX","jsx","cn","jsxs","Fragment","getLabel","CheckIcon"],"mappings":";;;;;;;AAMO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAYG;AACD,QAAM,WAAW,OAAO,MAAM,WAAWA,UAAAA,aAAa;AAEtD,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,UAAU;AAAA,MACV,iBAAe;AAAA,MACf,iBAAe,OAAO,YAAY;AAAA,MAClC,qBAAmB;AAAA,MACnB,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA,YAAY;AAAA,QACZ,OAAO,YAAY;AAAA,QACnB,YAAY;AAAA,MAAA;AAAA,MAEd;AAAA,MACA,aAAa,CAAC,MAAM,EAAE,eAAA;AAAA,MACtB,SAAS,MAAM;AACb,YAAI,CAAC,OAAO,SAAU,UAAA;AAAA,MACxB;AAAA,MACA,WAAW,CAAC,MAAM;AAChB,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,YAAE,eAAA;AACF,cAAI,CAAC,OAAO,SAAU,UAAA;AAAA,QACxB;AAAA,MACF;AAAA,MAEC,UAAA,eACC,aAAa,QAAQ,EAAE,UAAU,YAAY,QAAQ,SAAA,CAAU,IAE/DC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,QAAAH,+BAAC,QAAA,EAAK,WAAU,2BAA2B,UAAAI,UAAAA,SAAS,MAAM,GAAE;AAAA,QAC3D,6CACE,QAAA,EAAK,WAAU,4DACd,UAAAJ,2BAAAA,IAACK,UAAAA,WAAA,EAAU,WAAU,8BAAA,CAA8B,EAAA,CACrD;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

package/dist/cjs/components/Autocomplete/AutocompleteTag.cjs

@@ -13,7 +13,7 @@ function AutocompleteTag({
   if (renderTag) {
     return /* @__PURE__ */ jsxRuntime.jsx("span", { children: renderTag(option, onRemove) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typography-regular-body-sm inline-flex max-w-full items-center gap-1 rounded-xs bg-neutral-alphas-200 px-2 py-0.5 text-content-primary", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typography-description-12px-regular inline-flex max-w-full items-center gap-1 rounded-xs bg-neutral-alphas-200 px-2 py-0.5 text-content-primary", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: constants.getLabel(option) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",

package/dist/cjs/components/Autocomplete/AutocompleteTag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteTag.cjs","sources":["../../../../src/components/Autocomplete/AutocompleteTag.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport type { AutocompleteOption } from \"./Autocomplete\";\nimport { getLabel } from \"./constants\";\n\nexport function AutocompleteTag({\n  option,\n  disabled,\n  onRemove,\n  renderTag,\n}: {\n  option: AutocompleteOption;\n  disabled: boolean;\n  onRemove: () => void;\n  renderTag?: (option: AutocompleteOption, onRemove: () => void) => React.ReactNode;\n}) {\n  if (renderTag) {\n    return <span>{renderTag(option, onRemove)}</span>;\n  }\n\n  return (\n    <span className=\"typography-regular-body-sm inline-flex max-w-full items-center gap-1 rounded-xs bg-neutral-alphas-200 px-2 py-0.5 text-content-primary\">\n      <span className=\"truncate\">{getLabel(option)}</span>\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-label={`Remove ${getLabel(option)}`}\n        className=\"flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-xs text-content-secondary hover:text-content-primary active:scale-95\"\n        onClick={(e) => {\n          e.stopPropagation();\n          onRemove();\n        }}\n        disabled={disabled}\n      >\n        <CloseIcon className=\"size-3\" />\n      </button>\n    </span>\n  );\n}\n"],"names":["jsx","jsxs","getLabel","CloseIcon"],"mappings":";;;;;;AAKO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,MAAI,WAAW;AACb,WAAOA,2BAAAA,IAAC,QAAA,EAAM,UAAA,UAAU,QAAQ,QAAQ,GAAE;AAAA,EAC5C;AAEA,SACEC,2BAAAA,KAAC,QAAA,EAAK,WAAU,0IACd,UAAA;AAAA,IAAAD,+BAAC,QAAA,EAAK,WAAU,YAAY,UAAAE,UAAAA,SAAS,MAAM,GAAE;AAAA,IAC7CF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,cAAY,UAAUE,mBAAS,MAAM,CAAC;AAAA,QACtC,WAAU;AAAA,QACV,SAAS,CAAC,MAAM;AACd,YAAE,gBAAA;AACF,mBAAA;AAAA,QACF;AAAA,QACA;AAAA,QAEA,UAAAF,2BAAAA,IAACG,UAAAA,WAAA,EAAU,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAChC,GACF;AAEJ;;"}
+{"version":3,"file":"AutocompleteTag.cjs","sources":["../../../../src/components/Autocomplete/AutocompleteTag.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport type { AutocompleteOption } from \"./Autocomplete\";\nimport { getLabel } from \"./constants\";\n\nexport function AutocompleteTag({\n  option,\n  disabled,\n  onRemove,\n  renderTag,\n}: {\n  option: AutocompleteOption;\n  disabled: boolean;\n  onRemove: () => void;\n  renderTag?: (option: AutocompleteOption, onRemove: () => void) => React.ReactNode;\n}) {\n  if (renderTag) {\n    return <span>{renderTag(option, onRemove)}</span>;\n  }\n\n  return (\n    <span className=\"typography-description-12px-regular inline-flex max-w-full items-center gap-1 rounded-xs bg-neutral-alphas-200 px-2 py-0.5 text-content-primary\">\n      <span className=\"truncate\">{getLabel(option)}</span>\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-label={`Remove ${getLabel(option)}`}\n        className=\"flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-xs text-content-secondary hover:text-content-primary active:scale-95\"\n        onClick={(e) => {\n          e.stopPropagation();\n          onRemove();\n        }}\n        disabled={disabled}\n      >\n        <CloseIcon className=\"size-3\" />\n      </button>\n    </span>\n  );\n}\n"],"names":["jsx","jsxs","getLabel","CloseIcon"],"mappings":";;;;;;AAKO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,MAAI,WAAW;AACb,WAAOA,2BAAAA,IAAC,QAAA,EAAM,UAAA,UAAU,QAAQ,QAAQ,GAAE;AAAA,EAC5C;AAEA,SACEC,2BAAAA,KAAC,QAAA,EAAK,WAAU,mJACd,UAAA;AAAA,IAAAD,+BAAC,QAAA,EAAK,WAAU,YAAY,UAAAE,UAAAA,SAAS,MAAM,GAAE;AAAA,IAC7CF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,cAAY,UAAUE,mBAAS,MAAM,CAAC;AAAA,QACtC,WAAU;AAAA,QACV,SAAS,CAAC,MAAM;AACd,YAAE,gBAAA;AACF,mBAAA;AAAA,QACF;AAAA,QACA;AAAA,QAEA,UAAAF,2BAAAA,IAACG,UAAAA,WAAA,EAAU,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAChC,GACF;AAEJ;;"}

package/dist/cjs/components/Badge/Badge.cjs

@@ -25,20 +25,20 @@ const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const badgeVariants = {
   variant: {
     default: "bg-neutral-alphas-50 text-content-secondary",
-    dark: "bg-neutral-alphas-150 text-content-on-brand-inverted",
+    dark: "bg-neutral-alphas-150 text-content-always-white",
     success: "bg-neutral-alphas-50 text-content-secondary",
     warning: "bg-neutral-alphas-50 text-content-secondary",
     error: "bg-neutral-alphas-50 text-content-secondary",
     special: "bg-neutral-alphas-50 text-content-secondary",
     info: "bg-neutral-alphas-50 text-content-secondary",
-    online: "bg-bg-primary text-brand-primary-default",
-    brand: "bg-brand-primary-default text-content-on-brand",
-    pink: "bg-brand-secondary-default text-content-on-brand",
-    brandLight: "bg-brand-primary-muted text-content-on-brand",
-    pinkLight: "bg-brand-secondary-muted text-content-on-brand"
+    online: "bg-background-primary text-brand-primary-default",
+    brand: "bg-brand-primary-default text-content-always-black",
+    pink: "bg-brand-secondary-default text-content-always-black",
+    brandLight: "bg-brand-primary-muted text-content-always-black",
+    pinkLight: "bg-brand-secondary-muted text-content-always-black"
   },
   dotColor: {
-    default: "bg-content-on-brand",
+    default: "bg-content-always-black",
     dark: "bg-content-primary-inverted",
     success: "bg-success-content",
     warning: "bg-warning-content",
@@ -46,10 +46,10 @@ const badgeVariants = {
     special: "bg-special-default",
     info: "bg-info-content",
     online: "bg-brand-primary-default",
-    brand: "bg-content-on-brand",
-    pink: "bg-content-on-brand",
-    brandLight: "bg-content-on-brand",
-    pinkLight: "bg-content-on-brand"
+    brand: "bg-content-always-black",
+    pink: "bg-content-always-black",
+    brandLight: "bg-content-always-black",
+    pinkLight: "bg-content-always-black"
   }
 };
 const Badge = React__namespace.forwardRef(
@@ -72,7 +72,7 @@ const Badge = React__namespace.forwardRef(
         "data-testid": "badge",
         className: cn.cn(
           // Base styles
-          "typography-semibold-body-sm inline-flex h-5 min-w-0 items-center gap-2 rounded-full px-2",
+          "typography-description-12px-semibold inline-flex h-5 min-w-0 items-center gap-2 rounded-full px-2",
           // Variant styles
           badgeVariants.variant[variant],
           // Interactive