@fanvue/ui 2.1.3 → 2.2.0

package/dist/cjs/components/Banner/Banner.cjs

@@ -0,0 +1,310 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const Badge = require("../Badge/Badge.cjs");
+const IconButton = require("../IconButton/IconButton.cjs");
+const CrossIcon = require("../Icons/CrossIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const APP_STORE_VARIANTS = ["appStore1", "appStore2", "appStore3"];
+function isAppStoreVariant(variant) {
+  return APP_STORE_VARIANTS.includes(variant);
+}
+const GUIDE_BADGE_VARIANT = {
+  appStore1: "dark",
+  appStore2: "default",
+  appStore3: "default"
+};
+const BANNER_SHADOW = "shadow-sm";
+const guideGradient = {
+  appStore1: {
+    backgroundImage: "linear-gradient(125.54deg, var(--color-brand-primary-muted) 0%, var(--color-neutral-alphas-50) 100%)"
+  },
+  appStore2: {
+    backgroundImage: "linear-gradient(125.54deg, var(--color-brand-secondary-muted) 0%, var(--color-brand-secondary-muted) 100%)"
+  },
+  appStore3: {
+    backgroundImage: "linear-gradient(125.54deg, var(--color-brand-secondary-muted) 0%, color-mix(in srgb, var(--color-info-surface) 80%, transparent) 100%)"
+  }
+};
+function BannerDismiss({
+  onDismiss,
+  dismissLabel
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconButton.IconButton,
+    {
+      variant: "contrast",
+      size: "24",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(CrossIcon.CrossIcon, {}),
+      onClick: onDismiss,
+      "aria-label": dismissLabel,
+      className: "hover:bg-white/10 active:bg-white/15"
+    }
+  );
+}
+function resolveLayout(variant, layoutProp) {
+  if (variant === "Subtle") {
+    return "horizontal";
+  }
+  if (isAppStoreVariant(variant)) {
+    return "vertical";
+  }
+  if (variant === "whatsNew") {
+    return layoutProp ?? "horizontal";
+  }
+  return layoutProp ?? "vertical";
+}
+function bannerRootClass(variant, layout, className) {
+  return cn.cn(
+    "flex rounded-md",
+    BANNER_SHADOW,
+    variant === "Default" && "gap-3 bg-surface-primary-inverted p-4 text-content-primary-inverted",
+    variant === "Subtle" && "w-full max-w-[600px] items-start gap-3 border border-border-primary bg-surface-secondary p-4 text-content-primary",
+    variant === "whatsNew" && layout === "horizontal" && "w-full max-w-[446px] items-center gap-4 bg-surface-purple-muted p-4 text-content-primary",
+    variant === "whatsNew" && layout === "vertical" && "w-full max-w-[220px] flex-col items-stretch gap-4 border border-border-primary bg-surface-secondary p-4 text-content-primary",
+    variant === "whatsNew" && layout === "compact" && "w-full max-w-[446px] items-start gap-4 bg-surface-purple-muted p-4 text-content-primary",
+    isAppStoreVariant(variant) && "w-full max-w-[280px] flex-col gap-4 p-6",
+    layout === "vertical" && variant === "Default" && "max-w-[360px]",
+    layout === "horizontal" && variant === "Default" && "w-full max-w-[600px] items-start",
+    className
+  );
+}
+const BannerSection = React__namespace.forwardRef(
+  ({ className, labelledBy, children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      ref,
+      "aria-labelledby": labelledBy,
+      "data-testid": "banner",
+      className,
+      ...rest,
+      children
+    }
+  )
+);
+BannerSection.displayName = "BannerSection";
+function BannerGuideBody({
+  appStoreVariant,
+  eyebrow,
+  title,
+  description,
+  textAction,
+  labelledBy
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    eyebrow !== void 0 && eyebrow !== null && eyebrow !== false && /* @__PURE__ */ jsxRuntime.jsx(
+      Badge.Badge,
+      {
+        variant: GUIDE_BADGE_VARIANT[appStoreVariant],
+        leftDot: false,
+        className: "typography-semibold-badge self-start",
+        children: eyebrow
+      }
+    ),
+    title !== void 0 && title !== null && title !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { id: labelledBy, className: "typography-semibold-body-lg text-content-primary", children: title }),
+    description !== void 0 && description !== null && description !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-content-secondary", children: description }),
+    textAction
+  ] });
+}
+function BannerFeatureBody({
+  layout,
+  media,
+  title,
+  description,
+  textAction,
+  labelledBy
+}) {
+  const titleClass = layout === "vertical" ? "typography-semibold-body-lg text-content-primary" : "typography-semibold-body-lg text-[18px] leading-6 text-content-primary";
+  const mediaWrap = layout === "compact" ? "size-20 shrink-0 overflow-hidden rounded-sm" : "size-[132px] shrink-0 overflow-hidden rounded-sm";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    media !== void 0 && media !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(mediaWrap, layout === "vertical" && "w-full [&>*]:mx-auto"), children: media }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn.cn(
+          "flex min-w-0 flex-col gap-2",
+          layout === "horizontal" || layout === "compact" ? "flex-1 justify-end" : "w-full"
+        ),
+        children: [
+          title !== void 0 && title !== null && title !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { id: labelledBy, className: titleClass, children: title }),
+          description !== void 0 && description !== null && description !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-content-secondary", children: description }),
+          textAction
+        ]
+      }
+    )
+  ] });
+}
+function BannerSubtleBody({
+  media,
+  leadBadge,
+  title,
+  description,
+  secondaryLine,
+  stackedAction,
+  statusRow,
+  primaryAction,
+  labelledBy
+}) {
+  const mediaSizeDefault = "size-12 shrink-0 overflow-hidden rounded-xl";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    media !== void 0 && media !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: mediaSizeDefault, children: media }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-end gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: [
+        leadBadge !== void 0 && leadBadge !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", children: leadBadge }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+          title !== void 0 && title !== null && title !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { id: labelledBy, className: "typography-bold-heading-xs text-content-primary", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+            description !== void 0 && description !== null && description !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-content-primary", children: description }),
+            secondaryLine !== void 0 && secondaryLine !== null && secondaryLine !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-sm text-content-primary", children: secondaryLine })
+          ] })
+        ] }),
+        stackedAction !== void 0 && stackedAction !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-end self-start", children: stackedAction }),
+        statusRow !== void 0 && statusRow !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", children: statusRow })
+      ] }),
+      primaryAction !== void 0 && primaryAction !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 self-center", children: primaryAction })
+    ] })
+  ] });
+}
+function BannerInverseBody({
+  layout,
+  media,
+  eyebrow,
+  title,
+  description,
+  primaryAction,
+  labelledBy,
+  dismissSlot
+}) {
+  const mediaSizeDefault = "size-12 shrink-0 overflow-hidden rounded-xl";
+  const titleClassInverse = "typography-bold-heading-xs text-content-primary-inverted";
+  const textColumn = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+    eyebrow !== void 0 && eyebrow !== null && eyebrow !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-semibold-body-sm text-content-primary-inverted", children: eyebrow }),
+    title !== void 0 && title !== null && title !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { id: labelledBy, className: titleClassInverse, children: title }),
+    description !== void 0 && description !== null && description !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-content-primary-inverted", children: description })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    media !== void 0 && media !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: mediaSizeDefault, children: media }),
+    layout === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-end gap-3", children: [
+      textColumn,
+      primaryAction !== void 0 && primaryAction !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: primaryAction })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
+      textColumn,
+      primaryAction !== void 0 && primaryAction !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { children: primaryAction })
+    ] }),
+    dismissSlot
+  ] });
+}
+const Banner = React__namespace.forwardRef(
+  ({
+    className,
+    variant,
+    layout: layoutProp,
+    media,
+    eyebrow,
+    leadBadge,
+    title,
+    description,
+    secondaryLine,
+    stackedAction,
+    statusRow,
+    primaryAction,
+    textAction,
+    onDismiss,
+    dismissLabel = "Dismiss banner",
+    ...props
+  }, ref) => {
+    const layout = resolveLayout(variant, layoutProp);
+    const showDismiss = onDismiss !== void 0 && variant === "Default";
+    const titleId = React__namespace.useId();
+    const regionLabelledBy = title !== void 0 && title !== null && title !== false ? titleId : void 0;
+    const rootClass = bannerRootClass(variant, layout, className);
+    if (isAppStoreVariant(variant)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        BannerSection,
+        {
+          ref,
+          labelledBy: regionLabelledBy,
+          style: guideGradient[variant],
+          className: rootClass,
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            BannerGuideBody,
+            {
+              appStoreVariant: variant,
+              eyebrow,
+              title,
+              description,
+              textAction,
+              labelledBy: regionLabelledBy
+            }
+          )
+        }
+      );
+    }
+    if (variant === "whatsNew") {
+      return /* @__PURE__ */ jsxRuntime.jsx(BannerSection, { ref, labelledBy: regionLabelledBy, className: rootClass, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+        BannerFeatureBody,
+        {
+          layout,
+          media,
+          title,
+          description,
+          textAction,
+          labelledBy: regionLabelledBy
+        }
+      ) });
+    }
+    if (variant === "Subtle") {
+      return /* @__PURE__ */ jsxRuntime.jsx(BannerSection, { ref, labelledBy: regionLabelledBy, className: rootClass, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+        BannerSubtleBody,
+        {
+          media,
+          leadBadge,
+          title,
+          description,
+          secondaryLine,
+          stackedAction,
+          statusRow,
+          primaryAction,
+          labelledBy: regionLabelledBy
+        }
+      ) });
+    }
+    const dismissSlot = showDismiss && onDismiss !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(BannerDismiss, { onDismiss, dismissLabel }) : null;
+    return /* @__PURE__ */ jsxRuntime.jsx(BannerSection, { ref, labelledBy: regionLabelledBy, className: rootClass, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-start gap-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+      BannerInverseBody,
+      {
+        layout,
+        media,
+        eyebrow,
+        title,
+        description,
+        primaryAction,
+        labelledBy: regionLabelledBy,
+        dismissSlot
+      }
+    ) }) });
+  }
+);
+Banner.displayName = "Banner";
+exports.Banner = Banner;
+//# sourceMappingURL=Banner.cjs.map

package/dist/cjs/components/Banner/Banner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.cjs","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Badge, type BadgeVariant } from \"../Badge/Badge\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\n\n/**\n * Matches the Fanvue Library Banner Figma component property `Type`\n * (`Default`, `Subtle`, `whatsNew`, `appStore1`, `appStore2`, `appStore3`).\n */\nexport type BannerVariant =\n  | \"Default\"\n  | \"Subtle\"\n  | \"whatsNew\"\n  | \"appStore1\"\n  | \"appStore2\"\n  | \"appStore3\";\n\n/** Layout (`Vertical` / `Horizontal` / `HorizontalSmall` in Figma). Ignored for `Subtle` and app store types. */\nexport type BannerLayout = \"vertical\" | \"horizontal\" | \"compact\";\n\ntype AppStoreVariant = \"appStore1\" | \"appStore2\" | \"appStore3\";\n\nconst APP_STORE_VARIANTS: readonly AppStoreVariant[] = [\"appStore1\", \"appStore2\", \"appStore3\"];\n\nfunction isAppStoreVariant(variant: BannerVariant): variant is AppStoreVariant {\n  return (APP_STORE_VARIANTS as readonly string[]).includes(variant);\n}\n\nconst GUIDE_BADGE_VARIANT: Record<AppStoreVariant, BadgeVariant> = {\n  appStore1: \"dark\",\n  appStore2: \"default\",\n  appStore3: \"default\",\n};\n\nconst BANNER_SHADOW = \"shadow-sm\";\n\nconst guideGradient: Record<AppStoreVariant, React.CSSProperties> = {\n  appStore1: {\n    backgroundImage:\n      \"linear-gradient(125.54deg, var(--color-brand-primary-muted) 0%, var(--color-neutral-alphas-50) 100%)\",\n  },\n  appStore2: {\n    backgroundImage:\n      \"linear-gradient(125.54deg, var(--color-brand-secondary-muted) 0%, var(--color-brand-secondary-muted) 100%)\",\n  },\n  appStore3: {\n    backgroundImage:\n      \"linear-gradient(125.54deg, var(--color-brand-secondary-muted) 0%, color-mix(in srgb, var(--color-info-surface) 80%, transparent) 100%)\",\n  },\n};\n\nexport interface BannerProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n  /** Figma `Type` — selects structure, surfaces, and app store gradient. */\n  variant: BannerVariant;\n  /**\n   * Figma `Orientation`. Ignored when `variant` is `Subtle` (horizontal) or an app store type (vertical).\n   * @default `\"vertical\"` for `Default`, `\"horizontal\"` for `whatsNew`\n   */\n  layout?: BannerLayout;\n  /** Leading visual (image, illustration, or composite). */\n  media?: React.ReactNode;\n  /** Small uppercase label (e.g. HOW TO). */\n  eyebrow?: React.ReactNode;\n  /** Top badge row (e.g. NEW pill) — mainly for `Subtle`. */\n  leadBadge?: React.ReactNode;\n  /** Main heading. */\n  title?: React.ReactNode;\n  /** Primary body copy. */\n  description?: React.ReactNode;\n  /** Extra line under description (`Subtle`). */\n  secondaryLine?: React.ReactNode;\n  /** Left-stacked pill action (`Subtle`). */\n  stackedAction?: React.ReactNode;\n  /** Row under stacked action (`Subtle`). */\n  statusRow?: React.ReactNode;\n  /** Primary button (e.g. Learn more). */\n  primaryAction?: React.ReactNode;\n  /** Text-style CTA (`whatsNew` / app store). */\n  textAction?: React.ReactNode;\n  /** When set, shows a dismiss control (`Default` only). */\n  onDismiss?: () => void;\n  /** Accessible label for dismiss. @default \"Dismiss banner\" */\n  dismissLabel?: string;\n}\n\nfunction BannerDismiss({\n  onDismiss,\n  dismissLabel,\n}: {\n  onDismiss: () => void;\n  dismissLabel: string;\n}) {\n  return (\n    <IconButton\n      variant=\"contrast\"\n      size=\"24\"\n      icon={<CrossIcon />}\n      onClick={onDismiss}\n      aria-label={dismissLabel}\n      className=\"hover:bg-white/10 active:bg-white/15\"\n    />\n  );\n}\n\nfunction resolveLayout(variant: BannerVariant, layoutProp: BannerLayout | undefined): BannerLayout {\n  if (variant === \"Subtle\") {\n    return \"horizontal\";\n  }\n  if (isAppStoreVariant(variant)) {\n    return \"vertical\";\n  }\n  if (variant === \"whatsNew\") {\n    return layoutProp ?? \"horizontal\";\n  }\n  return layoutProp ?? \"vertical\";\n}\n\nfunction bannerRootClass(variant: BannerVariant, layout: BannerLayout, className?: string): string {\n  return cn(\n    \"flex rounded-md\",\n    BANNER_SHADOW,\n    variant === \"Default\" && \"gap-3 bg-surface-primary-inverted p-4 text-content-primary-inverted\",\n    variant === \"Subtle\" &&\n      \"w-full max-w-[600px] items-start gap-3 border border-border-primary bg-surface-secondary p-4 text-content-primary\",\n    variant === \"whatsNew\" &&\n      layout === \"horizontal\" &&\n      \"w-full max-w-[446px] items-center gap-4 bg-surface-purple-muted p-4 text-content-primary\",\n    variant === \"whatsNew\" &&\n      layout === \"vertical\" &&\n      \"w-full max-w-[220px] flex-col items-stretch gap-4 border border-border-primary bg-surface-secondary p-4 text-content-primary\",\n    variant === \"whatsNew\" &&\n      layout === \"compact\" &&\n      \"w-full max-w-[446px] items-start gap-4 bg-surface-purple-muted p-4 text-content-primary\",\n    isAppStoreVariant(variant) && \"w-full max-w-[280px] flex-col gap-4 p-6\",\n    layout === \"vertical\" && variant === \"Default\" && \"max-w-[360px]\",\n    layout === \"horizontal\" && variant === \"Default\" && \"w-full max-w-[600px] items-start\",\n    className,\n  );\n}\n\ntype BannerSectionProps = React.ComponentPropsWithoutRef<\"section\"> & {\n  labelledBy?: string;\n};\n\nconst BannerSection = React.forwardRef<HTMLElement, BannerSectionProps>(\n  ({ className, labelledBy, children, ...rest }, ref) => (\n    <section\n      ref={ref}\n      aria-labelledby={labelledBy}\n      data-testid=\"banner\"\n      className={className}\n      {...rest}\n    >\n      {children}\n    </section>\n  ),\n);\nBannerSection.displayName = \"BannerSection\";\n\ntype GuideBodyProps = Pick<BannerProps, \"eyebrow\" | \"title\" | \"description\" | \"textAction\"> & {\n  appStoreVariant: AppStoreVariant;\n  labelledBy?: string;\n};\n\nfunction BannerGuideBody({\n  appStoreVariant,\n  eyebrow,\n  title,\n  description,\n  textAction,\n  labelledBy,\n}: GuideBodyProps) {\n  return (\n    <>\n      {eyebrow !== undefined && eyebrow !== null && eyebrow !== false && (\n        <Badge\n          variant={GUIDE_BADGE_VARIANT[appStoreVariant]}\n          leftDot={false}\n          className=\"typography-semibold-badge self-start\"\n        >\n          {eyebrow}\n        </Badge>\n      )}\n      {title !== undefined && title !== null && title !== false && (\n        <p id={labelledBy} className=\"typography-semibold-body-lg text-content-primary\">\n          {title}\n        </p>\n      )}\n      {description !== undefined && description !== null && description !== false && (\n        <p className=\"typography-regular-body-md text-content-secondary\">{description}</p>\n      )}\n      {textAction}\n    </>\n  );\n}\n\ntype FeatureBodyProps = Pick<BannerProps, \"title\" | \"description\" | \"textAction\" | \"media\"> & {\n  layout: BannerLayout;\n  labelledBy?: string;\n};\n\nfunction BannerFeatureBody({\n  layout,\n  media,\n  title,\n  description,\n  textAction,\n  labelledBy,\n}: FeatureBodyProps) {\n  const titleClass =\n    layout === \"vertical\"\n      ? \"typography-semibold-body-lg text-content-primary\"\n      : \"typography-semibold-body-lg text-[18px] leading-6 text-content-primary\";\n  const mediaWrap =\n    layout === \"compact\"\n      ? \"size-20 shrink-0 overflow-hidden rounded-sm\"\n      : \"size-[132px] shrink-0 overflow-hidden rounded-sm\";\n\n  return (\n    <>\n      {media !== undefined && media !== null && (\n        <div className={cn(mediaWrap, layout === \"vertical\" && \"w-full [&>*]:mx-auto\")}>\n          {media}\n        </div>\n      )}\n      <div\n        className={cn(\n          \"flex min-w-0 flex-col gap-2\",\n          layout === \"horizontal\" || layout === \"compact\" ? \"flex-1 justify-end\" : \"w-full\",\n        )}\n      >\n        {title !== undefined && title !== null && title !== false && (\n          <div id={labelledBy} className={titleClass}>\n            {title}\n          </div>\n        )}\n        {description !== undefined && description !== null && description !== false && (\n          <p className=\"typography-regular-body-md text-content-secondary\">{description}</p>\n        )}\n        {textAction}\n      </div>\n    </>\n  );\n}\n\ntype SubtleBodyProps = Pick<\n  BannerProps,\n  | \"media\"\n  | \"leadBadge\"\n  | \"title\"\n  | \"description\"\n  | \"secondaryLine\"\n  | \"stackedAction\"\n  | \"statusRow\"\n  | \"primaryAction\"\n> & { labelledBy?: string };\n\nfunction BannerSubtleBody({\n  media,\n  leadBadge,\n  title,\n  description,\n  secondaryLine,\n  stackedAction,\n  statusRow,\n  primaryAction,\n  labelledBy,\n}: SubtleBodyProps) {\n  const mediaSizeDefault = \"size-12 shrink-0 overflow-hidden rounded-xl\";\n  return (\n    <>\n      {media !== undefined && media !== null && <div className={mediaSizeDefault}>{media}</div>}\n      <div className=\"flex min-w-0 flex-1 items-end gap-3\">\n        <div className=\"flex min-w-0 flex-1 flex-col gap-4\">\n          {leadBadge !== undefined && leadBadge !== null && (\n            <div className=\"flex flex-wrap items-center gap-2\">{leadBadge}</div>\n          )}\n          <div className=\"flex flex-col gap-1\">\n            {title !== undefined && title !== null && title !== false && (\n              <div id={labelledBy} className=\"typography-bold-heading-xs text-content-primary\">\n                {title}\n              </div>\n            )}\n            <div className=\"flex flex-col gap-2\">\n              {description !== undefined && description !== null && description !== false && (\n                <p className=\"typography-regular-body-md text-content-primary\">{description}</p>\n              )}\n              {secondaryLine !== undefined && secondaryLine !== null && secondaryLine !== false && (\n                <p className=\"typography-regular-body-sm text-content-primary\">{secondaryLine}</p>\n              )}\n            </div>\n          </div>\n          {stackedAction !== undefined && stackedAction !== null && (\n            <div className=\"flex flex-col items-end self-start\">{stackedAction}</div>\n          )}\n          {statusRow !== undefined && statusRow !== null && (\n            <div className=\"flex flex-wrap items-center gap-2\">{statusRow}</div>\n          )}\n        </div>\n        {primaryAction !== undefined && primaryAction !== null && (\n          <div className=\"shrink-0 self-center\">{primaryAction}</div>\n        )}\n      </div>\n    </>\n  );\n}\n\ntype InverseBodyProps = Pick<\n  BannerProps,\n  \"media\" | \"eyebrow\" | \"title\" | \"description\" | \"primaryAction\"\n> & {\n  layout: BannerLayout;\n  labelledBy?: string;\n  dismissSlot: React.ReactNode;\n};\n\nfunction BannerInverseBody({\n  layout,\n  media,\n  eyebrow,\n  title,\n  description,\n  primaryAction,\n  labelledBy,\n  dismissSlot,\n}: InverseBodyProps) {\n  const mediaSizeDefault = \"size-12 shrink-0 overflow-hidden rounded-xl\";\n  const titleClassInverse = \"typography-bold-heading-xs text-content-primary-inverted\";\n  const textColumn = (\n    <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n      {eyebrow !== undefined && eyebrow !== null && eyebrow !== false && (\n        <p className=\"typography-semibold-body-sm text-content-primary-inverted\">{eyebrow}</p>\n      )}\n      {title !== undefined && title !== null && title !== false && (\n        <div id={labelledBy} className={titleClassInverse}>\n          {title}\n        </div>\n      )}\n      {description !== undefined && description !== null && description !== false && (\n        <p className=\"typography-regular-body-md text-content-primary-inverted\">{description}</p>\n      )}\n    </div>\n  );\n\n  return (\n    <>\n      {media !== undefined && media !== null && <div className={mediaSizeDefault}>{media}</div>}\n      {layout === \"horizontal\" ? (\n        <div className=\"flex min-w-0 flex-1 items-end gap-3\">\n          {textColumn}\n          {primaryAction !== undefined && primaryAction !== null && (\n            <div className=\"shrink-0\">{primaryAction}</div>\n          )}\n        </div>\n      ) : (\n        <div className=\"flex min-w-0 flex-1 flex-col gap-3\">\n          {textColumn}\n          {primaryAction !== undefined && primaryAction !== null && <div>{primaryAction}</div>}\n        </div>\n      )}\n      {dismissSlot}\n    </>\n  );\n}\n\nexport const Banner = React.forwardRef<HTMLElement, BannerProps>(\n  (\n    {\n      className,\n      variant,\n      layout: layoutProp,\n      media,\n      eyebrow,\n      leadBadge,\n      title,\n      description,\n      secondaryLine,\n      stackedAction,\n      statusRow,\n      primaryAction,\n      textAction,\n      onDismiss,\n      dismissLabel = \"Dismiss banner\",\n      ...props\n    },\n    ref,\n  ) => {\n    const layout = resolveLayout(variant, layoutProp);\n    const showDismiss = onDismiss !== undefined && variant === \"Default\";\n    const titleId = React.useId();\n    const regionLabelledBy =\n      title !== undefined && title !== null && title !== false ? titleId : undefined;\n\n    const rootClass = bannerRootClass(variant, layout, className);\n\n    if (isAppStoreVariant(variant)) {\n      return (\n        <BannerSection\n          ref={ref}\n          labelledBy={regionLabelledBy}\n          style={guideGradient[variant]}\n          className={rootClass}\n          {...props}\n        >\n          <BannerGuideBody\n            appStoreVariant={variant}\n            eyebrow={eyebrow}\n            title={title}\n            description={description}\n            textAction={textAction}\n            labelledBy={regionLabelledBy}\n          />\n        </BannerSection>\n      );\n    }\n\n    if (variant === \"whatsNew\") {\n      return (\n        <BannerSection ref={ref} labelledBy={regionLabelledBy} className={rootClass} {...props}>\n          <BannerFeatureBody\n            layout={layout}\n            media={media}\n            title={title}\n            description={description}\n            textAction={textAction}\n            labelledBy={regionLabelledBy}\n          />\n        </BannerSection>\n      );\n    }\n\n    if (variant === \"Subtle\") {\n      return (\n        <BannerSection ref={ref} labelledBy={regionLabelledBy} className={rootClass} {...props}>\n          <BannerSubtleBody\n            media={media}\n            leadBadge={leadBadge}\n            title={title}\n            description={description}\n            secondaryLine={secondaryLine}\n            stackedAction={stackedAction}\n            statusRow={statusRow}\n            primaryAction={primaryAction}\n            labelledBy={regionLabelledBy}\n          />\n        </BannerSection>\n      );\n    }\n\n    const dismissSlot =\n      showDismiss && onDismiss !== undefined ? (\n        <BannerDismiss onDismiss={onDismiss} dismissLabel={dismissLabel} />\n      ) : null;\n\n    return (\n      <BannerSection ref={ref} labelledBy={regionLabelledBy} className={rootClass} {...props}>\n        <div className=\"flex w-full items-start gap-3\">\n          <BannerInverseBody\n            layout={layout}\n            media={media}\n            eyebrow={eyebrow}\n            title={title}\n            description={description}\n            primaryAction={primaryAction}\n            labelledBy={regionLabelledBy}\n            dismissSlot={dismissSlot}\n          />\n        </div>\n      </BannerSection>\n    );\n  },\n);\n\nBanner.displayName = \"Banner\";\n"],"names":["jsx","IconButton","CrossIcon","cn","React","jsxs","Fragment","Badge"],"mappings":"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"}

package/dist/cjs/components/Icons/OpenIcon.cjs

@@ -0,0 +1,55 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const OpenIcon = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      "aria-hidden": "true",
+      className: cn.cn("size-5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M17.1111 9.11111C16.8754 9.11111 16.6493 9.20476 16.4826 9.37146C16.3159 9.53816 16.2222 9.76425 16.2222 10V15.3333C16.2222 15.5691 16.1286 15.7952 15.9619 15.9619C15.7952 16.1286 15.5691 16.2222 15.3333 16.2222H4.66667C4.43092 16.2222 4.20483 16.1286 4.03813 15.9619C3.87143 15.7952 3.77778 15.5691 3.77778 15.3333V4.66667C3.77778 4.43092 3.87143 4.20483 4.03813 4.03813C4.20483 3.87143 4.43092 3.77778 4.66667 3.77778H10C10.2357 3.77778 10.4618 3.68413 10.6285 3.51743C10.7952 3.35073 10.8889 3.12464 10.8889 2.88889C10.8889 2.65314 10.7952 2.42705 10.6285 2.26035C10.4618 2.09365 10.2357 2 10 2H4.66667C3.95942 2 3.28115 2.28095 2.78105 2.78105C2.28095 3.28115 2 3.95942 2 4.66667V15.3333C2 16.0406 2.28095 16.7189 2.78105 17.219C3.28115 17.719 3.95942 18 4.66667 18H15.3333C16.0406 18 16.7189 17.719 17.219 17.219C17.719 16.7189 18 16.0406 18 15.3333V10C18 9.76425 17.9064 9.53816 17.7397 9.37146C17.573 9.20476 17.3469 9.11111 17.1111 9.11111Z"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M13.5555 3.77778H14.9599L9.36882 9.36C9.28551 9.44263 9.21938 9.54095 9.17425 9.64926C9.12912 9.75758 9.10589 9.87377 9.10589 9.99111C9.10589 10.1085 9.12912 10.2246 9.17425 10.333C9.21938 10.4413 9.28551 10.5396 9.36882 10.6222C9.45145 10.7055 9.54977 10.7717 9.65808 10.8168C9.7664 10.8619 9.88259 10.8852 9.99993 10.8852C10.1173 10.8852 10.2335 10.8619 10.3418 10.8168C10.4501 10.7717 10.5484 10.7055 10.631 10.6222L16.2222 5.04V6.44444C16.2222 6.68019 16.3158 6.90628 16.4825 7.07298C16.6492 7.23968 16.8753 7.33333 17.111 7.33333C17.3468 7.33333 17.5729 7.23968 17.7396 7.07298C17.9063 6.90628 17.9999 6.68019 17.9999 6.44444V2.88889C17.9999 2.65314 17.9063 2.42705 17.7396 2.26035C17.5729 2.09365 17.3468 2 17.111 2H13.5555C13.3197 2 13.0936 2.09365 12.9269 2.26035C12.7602 2.42705 12.6666 2.65314 12.6666 2.88889C12.6666 3.12464 12.7602 3.35073 12.9269 3.51743C13.0936 3.68413 13.3197 3.77778 13.5555 3.77778Z"
+          }
+        )
+      ]
+    }
+  )
+);
+OpenIcon.displayName = "OpenIcon";
+exports.OpenIcon = OpenIcon;
+//# sourceMappingURL=OpenIcon.cjs.map

package/dist/cjs/components/Icons/OpenIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenIcon.cjs","sources":["../../../../src/components/Icons/OpenIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\n/** Open in new / external link (20 × 20). */\nexport const OpenIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      className={cn(\"size-5\", className)}\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M17.1111 9.11111C16.8754 9.11111 16.6493 9.20476 16.4826 9.37146C16.3159 9.53816 16.2222 9.76425 16.2222 10V15.3333C16.2222 15.5691 16.1286 15.7952 15.9619 15.9619C15.7952 16.1286 15.5691 16.2222 15.3333 16.2222H4.66667C4.43092 16.2222 4.20483 16.1286 4.03813 15.9619C3.87143 15.7952 3.77778 15.5691 3.77778 15.3333V4.66667C3.77778 4.43092 3.87143 4.20483 4.03813 4.03813C4.20483 3.87143 4.43092 3.77778 4.66667 3.77778H10C10.2357 3.77778 10.4618 3.68413 10.6285 3.51743C10.7952 3.35073 10.8889 3.12464 10.8889 2.88889C10.8889 2.65314 10.7952 2.42705 10.6285 2.26035C10.4618 2.09365 10.2357 2 10 2H4.66667C3.95942 2 3.28115 2.28095 2.78105 2.78105C2.28095 3.28115 2 3.95942 2 4.66667V15.3333C2 16.0406 2.28095 16.7189 2.78105 17.219C3.28115 17.719 3.95942 18 4.66667 18H15.3333C16.0406 18 16.7189 17.719 17.219 17.219C17.719 16.7189 18 16.0406 18 15.3333V10C18 9.76425 17.9064 9.53816 17.7397 9.37146C17.573 9.20476 17.3469 9.11111 17.1111 9.11111Z\"\n      />\n      <path\n        fill=\"currentColor\"\n        d=\"M13.5555 3.77778H14.9599L9.36882 9.36C9.28551 9.44263 9.21938 9.54095 9.17425 9.64926C9.12912 9.75758 9.10589 9.87377 9.10589 9.99111C9.10589 10.1085 9.12912 10.2246 9.17425 10.333C9.21938 10.4413 9.28551 10.5396 9.36882 10.6222C9.45145 10.7055 9.54977 10.7717 9.65808 10.8168C9.7664 10.8619 9.88259 10.8852 9.99993 10.8852C10.1173 10.8852 10.2335 10.8619 10.3418 10.8168C10.4501 10.7717 10.5484 10.7055 10.631 10.6222L16.2222 5.04V6.44444C16.2222 6.68019 16.3158 6.90628 16.4825 7.07298C16.6492 7.23968 16.8753 7.33333 17.111 7.33333C17.3468 7.33333 17.5729 7.23968 17.7396 7.07298C17.9063 6.90628 17.9999 6.68019 17.9999 6.44444V2.88889C17.9999 2.65314 17.9063 2.42705 17.7396 2.26035C17.5729 2.09365 17.3468 2 17.111 2H13.5555C13.3197 2 13.0936 2.09365 12.9269 2.26035C12.7602 2.42705 12.6666 2.65314 12.6666 2.88889C12.6666 3.12464 12.7602 3.35073 12.9269 3.51743C13.0936 3.68413 13.3197 3.77778 13.5555 3.77778Z\"\n      />\n    </svg>\n  ),\n);\n\nOpenIcon.displayName = \"OpenIcon\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,WAAWA,iBAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxBC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAWC,GAAAA,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAAS,cAAc;;"}

package/dist/cjs/components/Icons/PeopleIcon.cjs

@@ -0,0 +1,62 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const PeopleIcon = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      "aria-hidden": "true",
+      className: cn.cn("size-5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M7.82051 9.46722C8.47833 9.46722 9.12138 9.27758 9.66833 8.92226C10.2153 8.56695 10.6416 8.06193 10.8933 7.47106C11.1451 6.8802 11.2109 6.23003 11.0826 5.60277C10.9543 4.97551 10.6375 4.39933 10.1723 3.9471C9.70719 3.49488 9.11456 3.1869 8.46938 3.06213C7.8242 2.93736 7.15545 3.0014 6.5477 3.24615C5.93995 3.49089 5.4205 3.90535 5.05504 4.43711C4.68957 4.96888 4.49451 5.59406 4.49451 6.23361C4.49451 7.09122 4.84492 7.9137 5.46867 8.52012C6.09242 9.12654 6.9384 9.46722 7.82051 9.46722ZM7.82051 4.61681C8.14942 4.61681 8.47094 4.71163 8.74442 4.88929C9.0179 5.06694 9.23105 5.31945 9.35692 5.61489C9.48279 5.91032 9.51572 6.23541 9.45155 6.54904C9.38739 6.86266 9.229 7.15075 8.99643 7.37687C8.76385 7.60298 8.46753 7.75697 8.14494 7.81935C7.82235 7.88174 7.48798 7.84972 7.1841 7.72735C6.88023 7.60497 6.62051 7.39774 6.43777 7.13186C6.25504 6.86598 6.15751 6.55339 6.15751 6.23361C6.15751 5.80481 6.33272 5.39357 6.64459 5.09036C6.95646 4.78715 7.37945 4.61681 7.82051 4.61681Z"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M14.4725 11.0841C14.9659 11.0841 15.4482 10.9418 15.8584 10.6753C16.2686 10.4088 16.5883 10.0301 16.7771 9.58693C16.9659 9.14378 17.0153 8.65615 16.9191 8.18571C16.8228 7.71527 16.5853 7.28313 16.2364 6.94396C15.8875 6.60479 15.4431 6.37381 14.9592 6.28024C14.4753 6.18666 13.9737 6.23469 13.5179 6.41824C13.0621 6.6018 12.6725 6.91265 12.3984 7.31147C12.1243 7.71029 11.978 8.17918 11.978 8.65884C11.978 9.30205 12.2408 9.91891 12.7086 10.3737C13.1765 10.8285 13.8109 11.0841 14.4725 11.0841ZM14.4725 7.85044C14.637 7.85044 14.7977 7.89785 14.9345 7.98668C15.0712 8.07551 15.1778 8.20177 15.2407 8.34948C15.3037 8.4972 15.3201 8.65974 15.2881 8.81656C15.256 8.97337 15.1768 9.11741 15.0605 9.23047C14.9442 9.34353 14.796 9.42052 14.6347 9.45171C14.4735 9.48291 14.3063 9.4669 14.1543 9.40571C14.0024 9.34452 13.8725 9.24091 13.7812 9.10797C13.6898 8.97503 13.641 8.81873 13.641 8.65884C13.641 8.44444 13.7286 8.23882 13.8846 8.08722C14.0405 7.93561 14.252 7.85044 14.4725 7.85044Z"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M14.4725 11.8924C13.5511 11.8934 12.6561 12.192 11.9281 12.7413C11.1137 11.9526 10.0772 11.416 8.94953 11.1992C7.82182 10.9824 6.65334 11.0951 5.59144 11.5231C4.52953 11.9511 3.62177 12.6753 2.98262 13.6042C2.34347 14.5331 2.00156 15.6253 2 16.7429C2 16.9573 2.0876 17.1629 2.24354 17.3145C2.39948 17.4661 2.61097 17.5513 2.8315 17.5513C3.05203 17.5513 3.26352 17.4661 3.41946 17.3145C3.5754 17.1629 3.663 16.9573 3.663 16.7429C3.663 15.6709 4.10102 14.6428 4.8807 13.8847C5.66039 13.1267 6.71786 12.7009 7.8205 12.7009C8.92314 12.7009 9.98061 13.1267 10.7603 13.8847C11.54 14.6428 11.978 15.6709 11.978 16.7429C11.978 16.9573 12.0656 17.1629 12.2215 17.3145C12.3775 17.4661 12.589 17.5513 12.8095 17.5513C13.03 17.5513 13.2415 17.4661 13.3975 17.3145C13.5534 17.1629 13.641 16.9573 13.641 16.7429C13.643 15.7958 13.3969 14.8638 12.9259 14.0347C13.2934 13.7524 13.7352 13.5764 14.2007 13.5268C14.6663 13.4772 15.1368 13.556 15.5584 13.7542C15.98 13.9524 16.3358 14.262 16.5849 14.6476C16.834 15.0332 16.9664 15.4791 16.967 15.9345C16.967 16.1489 17.0546 16.3545 17.2105 16.5061C17.3665 16.6577 17.578 16.7429 17.7985 16.7429C18.019 16.7429 18.2305 16.6577 18.3865 16.5061C18.5424 16.3545 18.63 16.1489 18.63 15.9345C18.63 14.8625 18.192 13.8344 17.4123 13.0763C16.6326 12.3183 15.5751 11.8924 14.4725 11.8924Z"
+          }
+        )
+      ]
+    }
+  )
+);
+PeopleIcon.displayName = "PeopleIcon";
+exports.PeopleIcon = PeopleIcon;
+//# sourceMappingURL=PeopleIcon.cjs.map

package/dist/cjs/components/Icons/PeopleIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeopleIcon.cjs","sources":["../../../../src/components/Icons/PeopleIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\n/** Two-person silhouette (20 × 20). */\nexport const PeopleIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      className={cn(\"size-5\", className)}\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M7.82051 9.46722C8.47833 9.46722 9.12138 9.27758 9.66833 8.92226C10.2153 8.56695 10.6416 8.06193 10.8933 7.47106C11.1451 6.8802 11.2109 6.23003 11.0826 5.60277C10.9543 4.97551 10.6375 4.39933 10.1723 3.9471C9.70719 3.49488 9.11456 3.1869 8.46938 3.06213C7.8242 2.93736 7.15545 3.0014 6.5477 3.24615C5.93995 3.49089 5.4205 3.90535 5.05504 4.43711C4.68957 4.96888 4.49451 5.59406 4.49451 6.23361C4.49451 7.09122 4.84492 7.9137 5.46867 8.52012C6.09242 9.12654 6.9384 9.46722 7.82051 9.46722ZM7.82051 4.61681C8.14942 4.61681 8.47094 4.71163 8.74442 4.88929C9.0179 5.06694 9.23105 5.31945 9.35692 5.61489C9.48279 5.91032 9.51572 6.23541 9.45155 6.54904C9.38739 6.86266 9.229 7.15075 8.99643 7.37687C8.76385 7.60298 8.46753 7.75697 8.14494 7.81935C7.82235 7.88174 7.48798 7.84972 7.1841 7.72735C6.88023 7.60497 6.62051 7.39774 6.43777 7.13186C6.25504 6.86598 6.15751 6.55339 6.15751 6.23361C6.15751 5.80481 6.33272 5.39357 6.64459 5.09036C6.95646 4.78715 7.37945 4.61681 7.82051 4.61681Z\"\n      />\n      <path\n        fill=\"currentColor\"\n        d=\"M14.4725 11.0841C14.9659 11.0841 15.4482 10.9418 15.8584 10.6753C16.2686 10.4088 16.5883 10.0301 16.7771 9.58693C16.9659 9.14378 17.0153 8.65615 16.9191 8.18571C16.8228 7.71527 16.5853 7.28313 16.2364 6.94396C15.8875 6.60479 15.4431 6.37381 14.9592 6.28024C14.4753 6.18666 13.9737 6.23469 13.5179 6.41824C13.0621 6.6018 12.6725 6.91265 12.3984 7.31147C12.1243 7.71029 11.978 8.17918 11.978 8.65884C11.978 9.30205 12.2408 9.91891 12.7086 10.3737C13.1765 10.8285 13.8109 11.0841 14.4725 11.0841ZM14.4725 7.85044C14.637 7.85044 14.7977 7.89785 14.9345 7.98668C15.0712 8.07551 15.1778 8.20177 15.2407 8.34948C15.3037 8.4972 15.3201 8.65974 15.2881 8.81656C15.256 8.97337 15.1768 9.11741 15.0605 9.23047C14.9442 9.34353 14.796 9.42052 14.6347 9.45171C14.4735 9.48291 14.3063 9.4669 14.1543 9.40571C14.0024 9.34452 13.8725 9.24091 13.7812 9.10797C13.6898 8.97503 13.641 8.81873 13.641 8.65884C13.641 8.44444 13.7286 8.23882 13.8846 8.08722C14.0405 7.93561 14.252 7.85044 14.4725 7.85044Z\"\n      />\n      <path\n        fill=\"currentColor\"\n        d=\"M14.4725 11.8924C13.5511 11.8934 12.6561 12.192 11.9281 12.7413C11.1137 11.9526 10.0772 11.416 8.94953 11.1992C7.82182 10.9824 6.65334 11.0951 5.59144 11.5231C4.52953 11.9511 3.62177 12.6753 2.98262 13.6042C2.34347 14.5331 2.00156 15.6253 2 16.7429C2 16.9573 2.0876 17.1629 2.24354 17.3145C2.39948 17.4661 2.61097 17.5513 2.8315 17.5513C3.05203 17.5513 3.26352 17.4661 3.41946 17.3145C3.5754 17.1629 3.663 16.9573 3.663 16.7429C3.663 15.6709 4.10102 14.6428 4.8807 13.8847C5.66039 13.1267 6.71786 12.7009 7.8205 12.7009C8.92314 12.7009 9.98061 13.1267 10.7603 13.8847C11.54 14.6428 11.978 15.6709 11.978 16.7429C11.978 16.9573 12.0656 17.1629 12.2215 17.3145C12.3775 17.4661 12.589 17.5513 12.8095 17.5513C13.03 17.5513 13.2415 17.4661 13.3975 17.3145C13.5534 17.1629 13.641 16.9573 13.641 16.7429C13.643 15.7958 13.3969 14.8638 12.9259 14.0347C13.2934 13.7524 13.7352 13.5764 14.2007 13.5268C14.6663 13.4772 15.1368 13.556 15.5584 13.7542C15.98 13.9524 16.3358 14.262 16.5849 14.6476C16.834 15.0332 16.9664 15.4791 16.967 15.9345C16.967 16.1489 17.0546 16.3545 17.2105 16.5061C17.3665 16.6577 17.578 16.7429 17.7985 16.7429C18.019 16.7429 18.2305 16.6577 18.3865 16.5061C18.5424 16.3545 18.63 16.1489 18.63 15.9345C18.63 14.8625 18.192 13.8344 17.4123 13.0763C16.6326 12.3183 15.5751 11.8924 14.4725 11.8924Z\"\n      />\n    </svg>\n  ),\n);\n\nPeopleIcon.displayName = \"PeopleIcon\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,aAAaA,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxBC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAWC,GAAAA,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,WAAW,cAAc;;"}

package/dist/cjs/index.cjs

@@ -11,6 +11,7 @@ const useAudioRecorder = require("./components/AudioUpload/useAudioRecorder.cjs"
 const Autocomplete = require("./components/Autocomplete/Autocomplete.cjs");
 const Avatar = require("./components/Avatar/Avatar.cjs");
 const Badge = require("./components/Badge/Badge.cjs");
+const Banner = require("./components/Banner/Banner.cjs");
 const BottomNavigation = require("./components/BottomNavigation/BottomNavigation.cjs");
 const BottomNavigationAction = require("./components/BottomNavigation/BottomNavigationAction.cjs");
 const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
@@ -100,7 +101,9 @@ const MoonIcon = require("./components/Icons/MoonIcon.cjs");
 const MoreIcon = require("./components/Icons/MoreIcon.cjs");
 const MoreVerticalIcon = require("./components/Icons/MoreVerticalIcon.cjs");
 const NewMessageIcon = require("./components/Icons/NewMessageIcon.cjs");
+const OpenIcon = require("./components/Icons/OpenIcon.cjs");
 const PauseIcon = require("./components/Icons/PauseIcon.cjs");
+const PeopleIcon = require("./components/Icons/PeopleIcon.cjs");
 const PhoneIcon = require("./components/Icons/PhoneIcon.cjs");
 const PhoneOffIcon = require("./components/Icons/PhoneOffIcon.cjs");
 const PinIcon = require("./components/Icons/PinIcon.cjs");
@@ -187,6 +190,7 @@ exports.AvatarFallback = Avatar.AvatarFallback;
 exports.AvatarImage = Avatar.AvatarImage;
 exports.AvatarRoot = Avatar.AvatarRoot;
 exports.Badge = Badge.Badge;
+exports.Banner = Banner.Banner;
 exports.BottomNavigation = BottomNavigation.BottomNavigation;
 exports.BottomNavigationAction = BottomNavigationAction.BottomNavigationAction;
 exports.Breadcrumb = Breadcrumb.Breadcrumb;
@@ -309,7 +313,9 @@ exports.MoonIcon = MoonIcon.MoonIcon;
 exports.MoreIcon = MoreIcon.MoreIcon;
 exports.MoreVerticalIcon = MoreVerticalIcon.MoreVerticalIcon;
 exports.NewMessageIcon = NewMessageIcon.NewMessageIcon;
+exports.OpenIcon = OpenIcon.OpenIcon;
 exports.PauseIcon = PauseIcon.PauseIcon;
+exports.PeopleIcon = PeopleIcon.PeopleIcon;
 exports.PhoneIcon = PhoneIcon.PhoneIcon;
 exports.PhoneOffIcon = PhoneOffIcon.PhoneOffIcon;
 exports.PinIcon = PinIcon.PinIcon;

package/dist/cjs/index.cjs.map

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

package/dist/components/Banner/Banner.mjs

@@ -0,0 +1,293 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { Badge } from "../Badge/Badge.mjs";
+import { IconButton } from "../IconButton/IconButton.mjs";
+import { CrossIcon } from "../Icons/CrossIcon.mjs";
+const APP_STORE_VARIANTS = ["appStore1", "appStore2", "appStore3"];
+function isAppStoreVariant(variant) {
+  return APP_STORE_VARIANTS.includes(variant);
+}
+const GUIDE_BADGE_VARIANT = {
+  appStore1: "dark",
+  appStore2: "default",
+  appStore3: "default"
+};
+const BANNER_SHADOW = "shadow-sm";
+const guideGradient = {
+  appStore1: {
+    backgroundImage: "linear-gradient(125.54deg, var(--color-brand-primary-muted) 0%, var(--color-neutral-alphas-50) 100%)"
+  },
+  appStore2: {
+    backgroundImage: "linear-gradient(125.54deg, var(--color-brand-secondary-muted) 0%, var(--color-brand-secondary-muted) 100%)"
+  },
+  appStore3: {
+    backgroundImage: "linear-gradient(125.54deg, var(--color-brand-secondary-muted) 0%, color-mix(in srgb, var(--color-info-surface) 80%, transparent) 100%)"
+  }
+};
+function BannerDismiss({
+  onDismiss,
+  dismissLabel
+}) {
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      variant: "contrast",
+      size: "24",
+      icon: /* @__PURE__ */ jsx(CrossIcon, {}),
+      onClick: onDismiss,
+      "aria-label": dismissLabel,
+      className: "hover:bg-white/10 active:bg-white/15"
+    }
+  );
+}
+function resolveLayout(variant, layoutProp) {
+  if (variant === "Subtle") {
+    return "horizontal";
+  }
+  if (isAppStoreVariant(variant)) {
+    return "vertical";
+  }
+  if (variant === "whatsNew") {
+    return layoutProp ?? "horizontal";
+  }
+  return layoutProp ?? "vertical";
+}
+function bannerRootClass(variant, layout, className) {
+  return cn(
+    "flex rounded-md",
+    BANNER_SHADOW,
+    variant === "Default" && "gap-3 bg-surface-primary-inverted p-4 text-content-primary-inverted",
+    variant === "Subtle" && "w-full max-w-[600px] items-start gap-3 border border-border-primary bg-surface-secondary p-4 text-content-primary",
+    variant === "whatsNew" && layout === "horizontal" && "w-full max-w-[446px] items-center gap-4 bg-surface-purple-muted p-4 text-content-primary",
+    variant === "whatsNew" && layout === "vertical" && "w-full max-w-[220px] flex-col items-stretch gap-4 border border-border-primary bg-surface-secondary p-4 text-content-primary",
+    variant === "whatsNew" && layout === "compact" && "w-full max-w-[446px] items-start gap-4 bg-surface-purple-muted p-4 text-content-primary",
+    isAppStoreVariant(variant) && "w-full max-w-[280px] flex-col gap-4 p-6",
+    layout === "vertical" && variant === "Default" && "max-w-[360px]",
+    layout === "horizontal" && variant === "Default" && "w-full max-w-[600px] items-start",
+    className
+  );
+}
+const BannerSection = React.forwardRef(
+  ({ className, labelledBy, children, ...rest }, ref) => /* @__PURE__ */ jsx(
+    "section",
+    {
+      ref,
+      "aria-labelledby": labelledBy,
+      "data-testid": "banner",
+      className,
+      ...rest,
+      children
+    }
+  )
+);
+BannerSection.displayName = "BannerSection";
+function BannerGuideBody({
+  appStoreVariant,
+  eyebrow,
+  title,
+  description,
+  textAction,
+  labelledBy
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    eyebrow !== void 0 && eyebrow !== null && eyebrow !== false && /* @__PURE__ */ jsx(
+      Badge,
+      {
+        variant: GUIDE_BADGE_VARIANT[appStoreVariant],
+        leftDot: false,
+        className: "typography-semibold-badge self-start",
+        children: eyebrow
+      }
+    ),
+    title !== void 0 && title !== null && title !== false && /* @__PURE__ */ jsx("p", { id: labelledBy, className: "typography-semibold-body-lg text-content-primary", children: title }),
+    description !== void 0 && description !== null && description !== false && /* @__PURE__ */ jsx("p", { className: "typography-regular-body-md text-content-secondary", children: description }),
+    textAction
+  ] });
+}
+function BannerFeatureBody({
+  layout,
+  media,
+  title,
+  description,
+  textAction,
+  labelledBy
+}) {
+  const titleClass = layout === "vertical" ? "typography-semibold-body-lg text-content-primary" : "typography-semibold-body-lg text-[18px] leading-6 text-content-primary";
+  const mediaWrap = layout === "compact" ? "size-20 shrink-0 overflow-hidden rounded-sm" : "size-[132px] shrink-0 overflow-hidden rounded-sm";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    media !== void 0 && media !== null && /* @__PURE__ */ jsx("div", { className: cn(mediaWrap, layout === "vertical" && "w-full [&>*]:mx-auto"), children: media }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex min-w-0 flex-col gap-2",
+          layout === "horizontal" || layout === "compact" ? "flex-1 justify-end" : "w-full"
+        ),
+        children: [
+          title !== void 0 && title !== null && title !== false && /* @__PURE__ */ jsx("div", { id: labelledBy, className: titleClass, children: title }),
+          description !== void 0 && description !== null && description !== false && /* @__PURE__ */ jsx("p", { className: "typography-regular-body-md text-content-secondary", children: description }),
+          textAction
+        ]
+      }
+    )
+  ] });
+}
+function BannerSubtleBody({
+  media,
+  leadBadge,
+  title,
+  description,
+  secondaryLine,
+  stackedAction,
+  statusRow,
+  primaryAction,
+  labelledBy
+}) {
+  const mediaSizeDefault = "size-12 shrink-0 overflow-hidden rounded-xl";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    media !== void 0 && media !== null && /* @__PURE__ */ jsx("div", { className: mediaSizeDefault, children: media }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-end gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: [
+        leadBadge !== void 0 && leadBadge !== null && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: leadBadge }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          title !== void 0 && title !== null && title !== false && /* @__PURE__ */ jsx("div", { id: labelledBy, className: "typography-bold-heading-xs text-content-primary", children: title }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            description !== void 0 && description !== null && description !== false && /* @__PURE__ */ jsx("p", { className: "typography-regular-body-md text-content-primary", children: description }),
+            secondaryLine !== void 0 && secondaryLine !== null && secondaryLine !== false && /* @__PURE__ */ jsx("p", { className: "typography-regular-body-sm text-content-primary", children: secondaryLine })
+          ] })
+        ] }),
+        stackedAction !== void 0 && stackedAction !== null && /* @__PURE__ */ jsx("div", { className: "flex flex-col items-end self-start", children: stackedAction }),
+        statusRow !== void 0 && statusRow !== null && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: statusRow })
+      ] }),
+      primaryAction !== void 0 && primaryAction !== null && /* @__PURE__ */ jsx("div", { className: "shrink-0 self-center", children: primaryAction })
+    ] })
+  ] });
+}
+function BannerInverseBody({
+  layout,
+  media,
+  eyebrow,
+  title,
+  description,
+  primaryAction,
+  labelledBy,
+  dismissSlot
+}) {
+  const mediaSizeDefault = "size-12 shrink-0 overflow-hidden rounded-xl";
+  const titleClassInverse = "typography-bold-heading-xs text-content-primary-inverted";
+  const textColumn = /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+    eyebrow !== void 0 && eyebrow !== null && eyebrow !== false && /* @__PURE__ */ jsx("p", { className: "typography-semibold-body-sm text-content-primary-inverted", children: eyebrow }),
+    title !== void 0 && title !== null && title !== false && /* @__PURE__ */ jsx("div", { id: labelledBy, className: titleClassInverse, children: title }),
+    description !== void 0 && description !== null && description !== false && /* @__PURE__ */ jsx("p", { className: "typography-regular-body-md text-content-primary-inverted", children: description })
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    media !== void 0 && media !== null && /* @__PURE__ */ jsx("div", { className: mediaSizeDefault, children: media }),
+    layout === "horizontal" ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-end gap-3", children: [
+      textColumn,
+      primaryAction !== void 0 && primaryAction !== null && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: primaryAction })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
+      textColumn,
+      primaryAction !== void 0 && primaryAction !== null && /* @__PURE__ */ jsx("div", { children: primaryAction })
+    ] }),
+    dismissSlot
+  ] });
+}
+const Banner = React.forwardRef(
+  ({
+    className,
+    variant,
+    layout: layoutProp,
+    media,
+    eyebrow,
+    leadBadge,
+    title,
+    description,
+    secondaryLine,
+    stackedAction,
+    statusRow,
+    primaryAction,
+    textAction,
+    onDismiss,
+    dismissLabel = "Dismiss banner",
+    ...props
+  }, ref) => {
+    const layout = resolveLayout(variant, layoutProp);
+    const showDismiss = onDismiss !== void 0 && variant === "Default";
+    const titleId = React.useId();
+    const regionLabelledBy = title !== void 0 && title !== null && title !== false ? titleId : void 0;
+    const rootClass = bannerRootClass(variant, layout, className);
+    if (isAppStoreVariant(variant)) {
+      return /* @__PURE__ */ jsx(
+        BannerSection,
+        {
+          ref,
+          labelledBy: regionLabelledBy,
+          style: guideGradient[variant],
+          className: rootClass,
+          ...props,
+          children: /* @__PURE__ */ jsx(
+            BannerGuideBody,
+            {
+              appStoreVariant: variant,
+              eyebrow,
+              title,
+              description,
+              textAction,
+              labelledBy: regionLabelledBy
+            }
+          )
+        }
+      );
+    }
+    if (variant === "whatsNew") {
+      return /* @__PURE__ */ jsx(BannerSection, { ref, labelledBy: regionLabelledBy, className: rootClass, ...props, children: /* @__PURE__ */ jsx(
+        BannerFeatureBody,
+        {
+          layout,
+          media,
+          title,
+          description,
+          textAction,
+          labelledBy: regionLabelledBy
+        }
+      ) });
+    }
+    if (variant === "Subtle") {
+      return /* @__PURE__ */ jsx(BannerSection, { ref, labelledBy: regionLabelledBy, className: rootClass, ...props, children: /* @__PURE__ */ jsx(
+        BannerSubtleBody,
+        {
+          media,
+          leadBadge,
+          title,
+          description,
+          secondaryLine,
+          stackedAction,
+          statusRow,
+          primaryAction,
+          labelledBy: regionLabelledBy
+        }
+      ) });
+    }
+    const dismissSlot = showDismiss && onDismiss !== void 0 ? /* @__PURE__ */ jsx(BannerDismiss, { onDismiss, dismissLabel }) : null;
+    return /* @__PURE__ */ jsx(BannerSection, { ref, labelledBy: regionLabelledBy, className: rootClass, ...props, children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-start gap-3", children: /* @__PURE__ */ jsx(
+      BannerInverseBody,
+      {
+        layout,
+        media,
+        eyebrow,
+        title,
+        description,
+        primaryAction,
+        labelledBy: regionLabelledBy,
+        dismissSlot
+      }
+    ) }) });
+  }
+);
+Banner.displayName = "Banner";
+export {
+  Banner
+};
+//# sourceMappingURL=Banner.mjs.map

package/dist/components/Banner/Banner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.mjs","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Badge, type BadgeVariant } from \"../Badge/Badge\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\n\n/**\n * Matches the Fanvue Library Banner Figma component property `Type`\n * (`Default`, `Subtle`, `whatsNew`, `appStore1`, `appStore2`, `appStore3`).\n */\nexport type BannerVariant =\n  | \"Default\"\n  | \"Subtle\"\n  | \"whatsNew\"\n  | \"appStore1\"\n  | \"appStore2\"\n  | \"appStore3\";\n\n/** Layout (`Vertical` / `Horizontal` / `HorizontalSmall` in Figma). Ignored for `Subtle` and app store types. */\nexport type BannerLayout = \"vertical\" | \"horizontal\" | \"compact\";\n\ntype AppStoreVariant = \"appStore1\" | \"appStore2\" | \"appStore3\";\n\nconst APP_STORE_VARIANTS: readonly AppStoreVariant[] = [\"appStore1\", \"appStore2\", \"appStore3\"];\n\nfunction isAppStoreVariant(variant: BannerVariant): variant is AppStoreVariant {\n  return (APP_STORE_VARIANTS as readonly string[]).includes(variant);\n}\n\nconst GUIDE_BADGE_VARIANT: Record<AppStoreVariant, BadgeVariant> = {\n  appStore1: \"dark\",\n  appStore2: \"default\",\n  appStore3: \"default\",\n};\n\nconst BANNER_SHADOW = \"shadow-sm\";\n\nconst guideGradient: Record<AppStoreVariant, React.CSSProperties> = {\n  appStore1: {\n    backgroundImage:\n      \"linear-gradient(125.54deg, var(--color-brand-primary-muted) 0%, var(--color-neutral-alphas-50) 100%)\",\n  },\n  appStore2: {\n    backgroundImage:\n      \"linear-gradient(125.54deg, var(--color-brand-secondary-muted) 0%, var(--color-brand-secondary-muted) 100%)\",\n  },\n  appStore3: {\n    backgroundImage:\n      \"linear-gradient(125.54deg, var(--color-brand-secondary-muted) 0%, color-mix(in srgb, var(--color-info-surface) 80%, transparent) 100%)\",\n  },\n};\n\nexport interface BannerProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n  /** Figma `Type` — selects structure, surfaces, and app store gradient. */\n  variant: BannerVariant;\n  /**\n   * Figma `Orientation`. Ignored when `variant` is `Subtle` (horizontal) or an app store type (vertical).\n   * @default `\"vertical\"` for `Default`, `\"horizontal\"` for `whatsNew`\n   */\n  layout?: BannerLayout;\n  /** Leading visual (image, illustration, or composite). */\n  media?: React.ReactNode;\n  /** Small uppercase label (e.g. HOW TO). */\n  eyebrow?: React.ReactNode;\n  /** Top badge row (e.g. NEW pill) — mainly for `Subtle`. */\n  leadBadge?: React.ReactNode;\n  /** Main heading. */\n  title?: React.ReactNode;\n  /** Primary body copy. */\n  description?: React.ReactNode;\n  /** Extra line under description (`Subtle`). */\n  secondaryLine?: React.ReactNode;\n  /** Left-stacked pill action (`Subtle`). */\n  stackedAction?: React.ReactNode;\n  /** Row under stacked action (`Subtle`). */\n  statusRow?: React.ReactNode;\n  /** Primary button (e.g. Learn more). */\n  primaryAction?: React.ReactNode;\n  /** Text-style CTA (`whatsNew` / app store). */\n  textAction?: React.ReactNode;\n  /** When set, shows a dismiss control (`Default` only). */\n  onDismiss?: () => void;\n  /** Accessible label for dismiss. @default \"Dismiss banner\" */\n  dismissLabel?: string;\n}\n\nfunction BannerDismiss({\n  onDismiss,\n  dismissLabel,\n}: {\n  onDismiss: () => void;\n  dismissLabel: string;\n}) {\n  return (\n    <IconButton\n      variant=\"contrast\"\n      size=\"24\"\n      icon={<CrossIcon />}\n      onClick={onDismiss}\n      aria-label={dismissLabel}\n      className=\"hover:bg-white/10 active:bg-white/15\"\n    />\n  );\n}\n\nfunction resolveLayout(variant: BannerVariant, layoutProp: BannerLayout | undefined): BannerLayout {\n  if (variant === \"Subtle\") {\n    return \"horizontal\";\n  }\n  if (isAppStoreVariant(variant)) {\n    return \"vertical\";\n  }\n  if (variant === \"whatsNew\") {\n    return layoutProp ?? \"horizontal\";\n  }\n  return layoutProp ?? \"vertical\";\n}\n\nfunction bannerRootClass(variant: BannerVariant, layout: BannerLayout, className?: string): string {\n  return cn(\n    \"flex rounded-md\",\n    BANNER_SHADOW,\n    variant === \"Default\" && \"gap-3 bg-surface-primary-inverted p-4 text-content-primary-inverted\",\n    variant === \"Subtle\" &&\n      \"w-full max-w-[600px] items-start gap-3 border border-border-primary bg-surface-secondary p-4 text-content-primary\",\n    variant === \"whatsNew\" &&\n      layout === \"horizontal\" &&\n      \"w-full max-w-[446px] items-center gap-4 bg-surface-purple-muted p-4 text-content-primary\",\n    variant === \"whatsNew\" &&\n      layout === \"vertical\" &&\n      \"w-full max-w-[220px] flex-col items-stretch gap-4 border border-border-primary bg-surface-secondary p-4 text-content-primary\",\n    variant === \"whatsNew\" &&\n      layout === \"compact\" &&\n      \"w-full max-w-[446px] items-start gap-4 bg-surface-purple-muted p-4 text-content-primary\",\n    isAppStoreVariant(variant) && \"w-full max-w-[280px] flex-col gap-4 p-6\",\n    layout === \"vertical\" && variant === \"Default\" && \"max-w-[360px]\",\n    layout === \"horizontal\" && variant === \"Default\" && \"w-full max-w-[600px] items-start\",\n    className,\n  );\n}\n\ntype BannerSectionProps = React.ComponentPropsWithoutRef<\"section\"> & {\n  labelledBy?: string;\n};\n\nconst BannerSection = React.forwardRef<HTMLElement, BannerSectionProps>(\n  ({ className, labelledBy, children, ...rest }, ref) => (\n    <section\n      ref={ref}\n      aria-labelledby={labelledBy}\n      data-testid=\"banner\"\n      className={className}\n      {...rest}\n    >\n      {children}\n    </section>\n  ),\n);\nBannerSection.displayName = \"BannerSection\";\n\ntype GuideBodyProps = Pick<BannerProps, \"eyebrow\" | \"title\" | \"description\" | \"textAction\"> & {\n  appStoreVariant: AppStoreVariant;\n  labelledBy?: string;\n};\n\nfunction BannerGuideBody({\n  appStoreVariant,\n  eyebrow,\n  title,\n  description,\n  textAction,\n  labelledBy,\n}: GuideBodyProps) {\n  return (\n    <>\n      {eyebrow !== undefined && eyebrow !== null && eyebrow !== false && (\n        <Badge\n          variant={GUIDE_BADGE_VARIANT[appStoreVariant]}\n          leftDot={false}\n          className=\"typography-semibold-badge self-start\"\n        >\n          {eyebrow}\n        </Badge>\n      )}\n      {title !== undefined && title !== null && title !== false && (\n        <p id={labelledBy} className=\"typography-semibold-body-lg text-content-primary\">\n          {title}\n        </p>\n      )}\n      {description !== undefined && description !== null && description !== false && (\n        <p className=\"typography-regular-body-md text-content-secondary\">{description}</p>\n      )}\n      {textAction}\n    </>\n  );\n}\n\ntype FeatureBodyProps = Pick<BannerProps, \"title\" | \"description\" | \"textAction\" | \"media\"> & {\n  layout: BannerLayout;\n  labelledBy?: string;\n};\n\nfunction BannerFeatureBody({\n  layout,\n  media,\n  title,\n  description,\n  textAction,\n  labelledBy,\n}: FeatureBodyProps) {\n  const titleClass =\n    layout === \"vertical\"\n      ? \"typography-semibold-body-lg text-content-primary\"\n      : \"typography-semibold-body-lg text-[18px] leading-6 text-content-primary\";\n  const mediaWrap =\n    layout === \"compact\"\n      ? \"size-20 shrink-0 overflow-hidden rounded-sm\"\n      : \"size-[132px] shrink-0 overflow-hidden rounded-sm\";\n\n  return (\n    <>\n      {media !== undefined && media !== null && (\n        <div className={cn(mediaWrap, layout === \"vertical\" && \"w-full [&>*]:mx-auto\")}>\n          {media}\n        </div>\n      )}\n      <div\n        className={cn(\n          \"flex min-w-0 flex-col gap-2\",\n          layout === \"horizontal\" || layout === \"compact\" ? \"flex-1 justify-end\" : \"w-full\",\n        )}\n      >\n        {title !== undefined && title !== null && title !== false && (\n          <div id={labelledBy} className={titleClass}>\n            {title}\n          </div>\n        )}\n        {description !== undefined && description !== null && description !== false && (\n          <p className=\"typography-regular-body-md text-content-secondary\">{description}</p>\n        )}\n        {textAction}\n      </div>\n    </>\n  );\n}\n\ntype SubtleBodyProps = Pick<\n  BannerProps,\n  | \"media\"\n  | \"leadBadge\"\n  | \"title\"\n  | \"description\"\n  | \"secondaryLine\"\n  | \"stackedAction\"\n  | \"statusRow\"\n  | \"primaryAction\"\n> & { labelledBy?: string };\n\nfunction BannerSubtleBody({\n  media,\n  leadBadge,\n  title,\n  description,\n  secondaryLine,\n  stackedAction,\n  statusRow,\n  primaryAction,\n  labelledBy,\n}: SubtleBodyProps) {\n  const mediaSizeDefault = \"size-12 shrink-0 overflow-hidden rounded-xl\";\n  return (\n    <>\n      {media !== undefined && media !== null && <div className={mediaSizeDefault}>{media}</div>}\n      <div className=\"flex min-w-0 flex-1 items-end gap-3\">\n        <div className=\"flex min-w-0 flex-1 flex-col gap-4\">\n          {leadBadge !== undefined && leadBadge !== null && (\n            <div className=\"flex flex-wrap items-center gap-2\">{leadBadge}</div>\n          )}\n          <div className=\"flex flex-col gap-1\">\n            {title !== undefined && title !== null && title !== false && (\n              <div id={labelledBy} className=\"typography-bold-heading-xs text-content-primary\">\n                {title}\n              </div>\n            )}\n            <div className=\"flex flex-col gap-2\">\n              {description !== undefined && description !== null && description !== false && (\n                <p className=\"typography-regular-body-md text-content-primary\">{description}</p>\n              )}\n              {secondaryLine !== undefined && secondaryLine !== null && secondaryLine !== false && (\n                <p className=\"typography-regular-body-sm text-content-primary\">{secondaryLine}</p>\n              )}\n            </div>\n          </div>\n          {stackedAction !== undefined && stackedAction !== null && (\n            <div className=\"flex flex-col items-end self-start\">{stackedAction}</div>\n          )}\n          {statusRow !== undefined && statusRow !== null && (\n            <div className=\"flex flex-wrap items-center gap-2\">{statusRow}</div>\n          )}\n        </div>\n        {primaryAction !== undefined && primaryAction !== null && (\n          <div className=\"shrink-0 self-center\">{primaryAction}</div>\n        )}\n      </div>\n    </>\n  );\n}\n\ntype InverseBodyProps = Pick<\n  BannerProps,\n  \"media\" | \"eyebrow\" | \"title\" | \"description\" | \"primaryAction\"\n> & {\n  layout: BannerLayout;\n  labelledBy?: string;\n  dismissSlot: React.ReactNode;\n};\n\nfunction BannerInverseBody({\n  layout,\n  media,\n  eyebrow,\n  title,\n  description,\n  primaryAction,\n  labelledBy,\n  dismissSlot,\n}: InverseBodyProps) {\n  const mediaSizeDefault = \"size-12 shrink-0 overflow-hidden rounded-xl\";\n  const titleClassInverse = \"typography-bold-heading-xs text-content-primary-inverted\";\n  const textColumn = (\n    <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n      {eyebrow !== undefined && eyebrow !== null && eyebrow !== false && (\n        <p className=\"typography-semibold-body-sm text-content-primary-inverted\">{eyebrow}</p>\n      )}\n      {title !== undefined && title !== null && title !== false && (\n        <div id={labelledBy} className={titleClassInverse}>\n          {title}\n        </div>\n      )}\n      {description !== undefined && description !== null && description !== false && (\n        <p className=\"typography-regular-body-md text-content-primary-inverted\">{description}</p>\n      )}\n    </div>\n  );\n\n  return (\n    <>\n      {media !== undefined && media !== null && <div className={mediaSizeDefault}>{media}</div>}\n      {layout === \"horizontal\" ? (\n        <div className=\"flex min-w-0 flex-1 items-end gap-3\">\n          {textColumn}\n          {primaryAction !== undefined && primaryAction !== null && (\n            <div className=\"shrink-0\">{primaryAction}</div>\n          )}\n        </div>\n      ) : (\n        <div className=\"flex min-w-0 flex-1 flex-col gap-3\">\n          {textColumn}\n          {primaryAction !== undefined && primaryAction !== null && <div>{primaryAction}</div>}\n        </div>\n      )}\n      {dismissSlot}\n    </>\n  );\n}\n\nexport const Banner = React.forwardRef<HTMLElement, BannerProps>(\n  (\n    {\n      className,\n      variant,\n      layout: layoutProp,\n      media,\n      eyebrow,\n      leadBadge,\n      title,\n      description,\n      secondaryLine,\n      stackedAction,\n      statusRow,\n      primaryAction,\n      textAction,\n      onDismiss,\n      dismissLabel = \"Dismiss banner\",\n      ...props\n    },\n    ref,\n  ) => {\n    const layout = resolveLayout(variant, layoutProp);\n    const showDismiss = onDismiss !== undefined && variant === \"Default\";\n    const titleId = React.useId();\n    const regionLabelledBy =\n      title !== undefined && title !== null && title !== false ? titleId : undefined;\n\n    const rootClass = bannerRootClass(variant, layout, className);\n\n    if (isAppStoreVariant(variant)) {\n      return (\n        <BannerSection\n          ref={ref}\n          labelledBy={regionLabelledBy}\n          style={guideGradient[variant]}\n          className={rootClass}\n          {...props}\n        >\n          <BannerGuideBody\n            appStoreVariant={variant}\n            eyebrow={eyebrow}\n            title={title}\n            description={description}\n            textAction={textAction}\n            labelledBy={regionLabelledBy}\n          />\n        </BannerSection>\n      );\n    }\n\n    if (variant === \"whatsNew\") {\n      return (\n        <BannerSection ref={ref} labelledBy={regionLabelledBy} className={rootClass} {...props}>\n          <BannerFeatureBody\n            layout={layout}\n            media={media}\n            title={title}\n            description={description}\n            textAction={textAction}\n            labelledBy={regionLabelledBy}\n          />\n        </BannerSection>\n      );\n    }\n\n    if (variant === \"Subtle\") {\n      return (\n        <BannerSection ref={ref} labelledBy={regionLabelledBy} className={rootClass} {...props}>\n          <BannerSubtleBody\n            media={media}\n            leadBadge={leadBadge}\n            title={title}\n            description={description}\n            secondaryLine={secondaryLine}\n            stackedAction={stackedAction}\n            statusRow={statusRow}\n            primaryAction={primaryAction}\n            labelledBy={regionLabelledBy}\n          />\n        </BannerSection>\n      );\n    }\n\n    const dismissSlot =\n      showDismiss && onDismiss !== undefined ? (\n        <BannerDismiss onDismiss={onDismiss} dismissLabel={dismissLabel} />\n      ) : null;\n\n    return (\n      <BannerSection ref={ref} labelledBy={regionLabelledBy} className={rootClass} {...props}>\n        <div className=\"flex w-full items-start gap-3\">\n          <BannerInverseBody\n            layout={layout}\n            media={media}\n            eyebrow={eyebrow}\n            title={title}\n            description={description}\n            primaryAction={primaryAction}\n            labelledBy={regionLabelledBy}\n            dismissSlot={dismissSlot}\n          />\n        </div>\n      </BannerSection>\n    );\n  },\n);\n\nBanner.displayName = \"Banner\";\n"],"names":[],"mappings":"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"}

package/dist/components/Icons/OpenIcon.mjs

@@ -0,0 +1,38 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const OpenIcon = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      "aria-hidden": "true",
+      className: cn("size-5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M17.1111 9.11111C16.8754 9.11111 16.6493 9.20476 16.4826 9.37146C16.3159 9.53816 16.2222 9.76425 16.2222 10V15.3333C16.2222 15.5691 16.1286 15.7952 15.9619 15.9619C15.7952 16.1286 15.5691 16.2222 15.3333 16.2222H4.66667C4.43092 16.2222 4.20483 16.1286 4.03813 15.9619C3.87143 15.7952 3.77778 15.5691 3.77778 15.3333V4.66667C3.77778 4.43092 3.87143 4.20483 4.03813 4.03813C4.20483 3.87143 4.43092 3.77778 4.66667 3.77778H10C10.2357 3.77778 10.4618 3.68413 10.6285 3.51743C10.7952 3.35073 10.8889 3.12464 10.8889 2.88889C10.8889 2.65314 10.7952 2.42705 10.6285 2.26035C10.4618 2.09365 10.2357 2 10 2H4.66667C3.95942 2 3.28115 2.28095 2.78105 2.78105C2.28095 3.28115 2 3.95942 2 4.66667V15.3333C2 16.0406 2.28095 16.7189 2.78105 17.219C3.28115 17.719 3.95942 18 4.66667 18H15.3333C16.0406 18 16.7189 17.719 17.219 17.219C17.719 16.7189 18 16.0406 18 15.3333V10C18 9.76425 17.9064 9.53816 17.7397 9.37146C17.573 9.20476 17.3469 9.11111 17.1111 9.11111Z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M13.5555 3.77778H14.9599L9.36882 9.36C9.28551 9.44263 9.21938 9.54095 9.17425 9.64926C9.12912 9.75758 9.10589 9.87377 9.10589 9.99111C9.10589 10.1085 9.12912 10.2246 9.17425 10.333C9.21938 10.4413 9.28551 10.5396 9.36882 10.6222C9.45145 10.7055 9.54977 10.7717 9.65808 10.8168C9.7664 10.8619 9.88259 10.8852 9.99993 10.8852C10.1173 10.8852 10.2335 10.8619 10.3418 10.8168C10.4501 10.7717 10.5484 10.7055 10.631 10.6222L16.2222 5.04V6.44444C16.2222 6.68019 16.3158 6.90628 16.4825 7.07298C16.6492 7.23968 16.8753 7.33333 17.111 7.33333C17.3468 7.33333 17.5729 7.23968 17.7396 7.07298C17.9063 6.90628 17.9999 6.68019 17.9999 6.44444V2.88889C17.9999 2.65314 17.9063 2.42705 17.7396 2.26035C17.5729 2.09365 17.3468 2 17.111 2H13.5555C13.3197 2 13.0936 2.09365 12.9269 2.26035C12.7602 2.42705 12.6666 2.65314 12.6666 2.88889C12.6666 3.12464 12.7602 3.35073 12.9269 3.51743C13.0936 3.68413 13.3197 3.77778 13.5555 3.77778Z"
+          }
+        )
+      ]
+    }
+  )
+);
+OpenIcon.displayName = "OpenIcon";
+export {
+  OpenIcon
+};
+//# sourceMappingURL=OpenIcon.mjs.map

package/dist/components/Icons/OpenIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenIcon.mjs","sources":["../../../src/components/Icons/OpenIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\n/** Open in new / external link (20 × 20). */\nexport const OpenIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      className={cn(\"size-5\", className)}\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M17.1111 9.11111C16.8754 9.11111 16.6493 9.20476 16.4826 9.37146C16.3159 9.53816 16.2222 9.76425 16.2222 10V15.3333C16.2222 15.5691 16.1286 15.7952 15.9619 15.9619C15.7952 16.1286 15.5691 16.2222 15.3333 16.2222H4.66667C4.43092 16.2222 4.20483 16.1286 4.03813 15.9619C3.87143 15.7952 3.77778 15.5691 3.77778 15.3333V4.66667C3.77778 4.43092 3.87143 4.20483 4.03813 4.03813C4.20483 3.87143 4.43092 3.77778 4.66667 3.77778H10C10.2357 3.77778 10.4618 3.68413 10.6285 3.51743C10.7952 3.35073 10.8889 3.12464 10.8889 2.88889C10.8889 2.65314 10.7952 2.42705 10.6285 2.26035C10.4618 2.09365 10.2357 2 10 2H4.66667C3.95942 2 3.28115 2.28095 2.78105 2.78105C2.28095 3.28115 2 3.95942 2 4.66667V15.3333C2 16.0406 2.28095 16.7189 2.78105 17.219C3.28115 17.719 3.95942 18 4.66667 18H15.3333C16.0406 18 16.7189 17.719 17.219 17.219C17.719 16.7189 18 16.0406 18 15.3333V10C18 9.76425 17.9064 9.53816 17.7397 9.37146C17.573 9.20476 17.3469 9.11111 17.1111 9.11111Z\"\n      />\n      <path\n        fill=\"currentColor\"\n        d=\"M13.5555 3.77778H14.9599L9.36882 9.36C9.28551 9.44263 9.21938 9.54095 9.17425 9.64926C9.12912 9.75758 9.10589 9.87377 9.10589 9.99111C9.10589 10.1085 9.12912 10.2246 9.17425 10.333C9.21938 10.4413 9.28551 10.5396 9.36882 10.6222C9.45145 10.7055 9.54977 10.7717 9.65808 10.8168C9.7664 10.8619 9.88259 10.8852 9.99993 10.8852C10.1173 10.8852 10.2335 10.8619 10.3418 10.8168C10.4501 10.7717 10.5484 10.7055 10.631 10.6222L16.2222 5.04V6.44444C16.2222 6.68019 16.3158 6.90628 16.4825 7.07298C16.6492 7.23968 16.8753 7.33333 17.111 7.33333C17.3468 7.33333 17.5729 7.23968 17.7396 7.07298C17.9063 6.90628 17.9999 6.68019 17.9999 6.44444V2.88889C17.9999 2.65314 17.9063 2.42705 17.7396 2.26035C17.5729 2.09365 17.3468 2 17.111 2H13.5555C13.3197 2 13.0936 2.09365 12.9269 2.26035C12.7602 2.42705 12.6666 2.65314 12.6666 2.88889C12.6666 3.12464 12.7602 3.35073 12.9269 3.51743C13.0936 3.68413 13.3197 3.77778 13.5555 3.77778Z\"\n      />\n    </svg>\n  ),\n);\n\nOpenIcon.displayName = \"OpenIcon\";\n"],"names":[],"mappings":";;;;AAKO,MAAM,WAAW,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAAS,cAAc;"}

package/dist/components/Icons/PeopleIcon.mjs

@@ -0,0 +1,45 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const PeopleIcon = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      "aria-hidden": "true",
+      className: cn("size-5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M7.82051 9.46722C8.47833 9.46722 9.12138 9.27758 9.66833 8.92226C10.2153 8.56695 10.6416 8.06193 10.8933 7.47106C11.1451 6.8802 11.2109 6.23003 11.0826 5.60277C10.9543 4.97551 10.6375 4.39933 10.1723 3.9471C9.70719 3.49488 9.11456 3.1869 8.46938 3.06213C7.8242 2.93736 7.15545 3.0014 6.5477 3.24615C5.93995 3.49089 5.4205 3.90535 5.05504 4.43711C4.68957 4.96888 4.49451 5.59406 4.49451 6.23361C4.49451 7.09122 4.84492 7.9137 5.46867 8.52012C6.09242 9.12654 6.9384 9.46722 7.82051 9.46722ZM7.82051 4.61681C8.14942 4.61681 8.47094 4.71163 8.74442 4.88929C9.0179 5.06694 9.23105 5.31945 9.35692 5.61489C9.48279 5.91032 9.51572 6.23541 9.45155 6.54904C9.38739 6.86266 9.229 7.15075 8.99643 7.37687C8.76385 7.60298 8.46753 7.75697 8.14494 7.81935C7.82235 7.88174 7.48798 7.84972 7.1841 7.72735C6.88023 7.60497 6.62051 7.39774 6.43777 7.13186C6.25504 6.86598 6.15751 6.55339 6.15751 6.23361C6.15751 5.80481 6.33272 5.39357 6.64459 5.09036C6.95646 4.78715 7.37945 4.61681 7.82051 4.61681Z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M14.4725 11.0841C14.9659 11.0841 15.4482 10.9418 15.8584 10.6753C16.2686 10.4088 16.5883 10.0301 16.7771 9.58693C16.9659 9.14378 17.0153 8.65615 16.9191 8.18571C16.8228 7.71527 16.5853 7.28313 16.2364 6.94396C15.8875 6.60479 15.4431 6.37381 14.9592 6.28024C14.4753 6.18666 13.9737 6.23469 13.5179 6.41824C13.0621 6.6018 12.6725 6.91265 12.3984 7.31147C12.1243 7.71029 11.978 8.17918 11.978 8.65884C11.978 9.30205 12.2408 9.91891 12.7086 10.3737C13.1765 10.8285 13.8109 11.0841 14.4725 11.0841ZM14.4725 7.85044C14.637 7.85044 14.7977 7.89785 14.9345 7.98668C15.0712 8.07551 15.1778 8.20177 15.2407 8.34948C15.3037 8.4972 15.3201 8.65974 15.2881 8.81656C15.256 8.97337 15.1768 9.11741 15.0605 9.23047C14.9442 9.34353 14.796 9.42052 14.6347 9.45171C14.4735 9.48291 14.3063 9.4669 14.1543 9.40571C14.0024 9.34452 13.8725 9.24091 13.7812 9.10797C13.6898 8.97503 13.641 8.81873 13.641 8.65884C13.641 8.44444 13.7286 8.23882 13.8846 8.08722C14.0405 7.93561 14.252 7.85044 14.4725 7.85044Z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M14.4725 11.8924C13.5511 11.8934 12.6561 12.192 11.9281 12.7413C11.1137 11.9526 10.0772 11.416 8.94953 11.1992C7.82182 10.9824 6.65334 11.0951 5.59144 11.5231C4.52953 11.9511 3.62177 12.6753 2.98262 13.6042C2.34347 14.5331 2.00156 15.6253 2 16.7429C2 16.9573 2.0876 17.1629 2.24354 17.3145C2.39948 17.4661 2.61097 17.5513 2.8315 17.5513C3.05203 17.5513 3.26352 17.4661 3.41946 17.3145C3.5754 17.1629 3.663 16.9573 3.663 16.7429C3.663 15.6709 4.10102 14.6428 4.8807 13.8847C5.66039 13.1267 6.71786 12.7009 7.8205 12.7009C8.92314 12.7009 9.98061 13.1267 10.7603 13.8847C11.54 14.6428 11.978 15.6709 11.978 16.7429C11.978 16.9573 12.0656 17.1629 12.2215 17.3145C12.3775 17.4661 12.589 17.5513 12.8095 17.5513C13.03 17.5513 13.2415 17.4661 13.3975 17.3145C13.5534 17.1629 13.641 16.9573 13.641 16.7429C13.643 15.7958 13.3969 14.8638 12.9259 14.0347C13.2934 13.7524 13.7352 13.5764 14.2007 13.5268C14.6663 13.4772 15.1368 13.556 15.5584 13.7542C15.98 13.9524 16.3358 14.262 16.5849 14.6476C16.834 15.0332 16.9664 15.4791 16.967 15.9345C16.967 16.1489 17.0546 16.3545 17.2105 16.5061C17.3665 16.6577 17.578 16.7429 17.7985 16.7429C18.019 16.7429 18.2305 16.6577 18.3865 16.5061C18.5424 16.3545 18.63 16.1489 18.63 15.9345C18.63 14.8625 18.192 13.8344 17.4123 13.0763C16.6326 12.3183 15.5751 11.8924 14.4725 11.8924Z"
+          }
+        )
+      ]
+    }
+  )
+);
+PeopleIcon.displayName = "PeopleIcon";
+export {
+  PeopleIcon
+};
+//# sourceMappingURL=PeopleIcon.mjs.map

package/dist/components/Icons/PeopleIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeopleIcon.mjs","sources":["../../../src/components/Icons/PeopleIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\n/** Two-person silhouette (20 × 20). */\nexport const PeopleIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      className={cn(\"size-5\", className)}\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M7.82051 9.46722C8.47833 9.46722 9.12138 9.27758 9.66833 8.92226C10.2153 8.56695 10.6416 8.06193 10.8933 7.47106C11.1451 6.8802 11.2109 6.23003 11.0826 5.60277C10.9543 4.97551 10.6375 4.39933 10.1723 3.9471C9.70719 3.49488 9.11456 3.1869 8.46938 3.06213C7.8242 2.93736 7.15545 3.0014 6.5477 3.24615C5.93995 3.49089 5.4205 3.90535 5.05504 4.43711C4.68957 4.96888 4.49451 5.59406 4.49451 6.23361C4.49451 7.09122 4.84492 7.9137 5.46867 8.52012C6.09242 9.12654 6.9384 9.46722 7.82051 9.46722ZM7.82051 4.61681C8.14942 4.61681 8.47094 4.71163 8.74442 4.88929C9.0179 5.06694 9.23105 5.31945 9.35692 5.61489C9.48279 5.91032 9.51572 6.23541 9.45155 6.54904C9.38739 6.86266 9.229 7.15075 8.99643 7.37687C8.76385 7.60298 8.46753 7.75697 8.14494 7.81935C7.82235 7.88174 7.48798 7.84972 7.1841 7.72735C6.88023 7.60497 6.62051 7.39774 6.43777 7.13186C6.25504 6.86598 6.15751 6.55339 6.15751 6.23361C6.15751 5.80481 6.33272 5.39357 6.64459 5.09036C6.95646 4.78715 7.37945 4.61681 7.82051 4.61681Z\"\n      />\n      <path\n        fill=\"currentColor\"\n        d=\"M14.4725 11.0841C14.9659 11.0841 15.4482 10.9418 15.8584 10.6753C16.2686 10.4088 16.5883 10.0301 16.7771 9.58693C16.9659 9.14378 17.0153 8.65615 16.9191 8.18571C16.8228 7.71527 16.5853 7.28313 16.2364 6.94396C15.8875 6.60479 15.4431 6.37381 14.9592 6.28024C14.4753 6.18666 13.9737 6.23469 13.5179 6.41824C13.0621 6.6018 12.6725 6.91265 12.3984 7.31147C12.1243 7.71029 11.978 8.17918 11.978 8.65884C11.978 9.30205 12.2408 9.91891 12.7086 10.3737C13.1765 10.8285 13.8109 11.0841 14.4725 11.0841ZM14.4725 7.85044C14.637 7.85044 14.7977 7.89785 14.9345 7.98668C15.0712 8.07551 15.1778 8.20177 15.2407 8.34948C15.3037 8.4972 15.3201 8.65974 15.2881 8.81656C15.256 8.97337 15.1768 9.11741 15.0605 9.23047C14.9442 9.34353 14.796 9.42052 14.6347 9.45171C14.4735 9.48291 14.3063 9.4669 14.1543 9.40571C14.0024 9.34452 13.8725 9.24091 13.7812 9.10797C13.6898 8.97503 13.641 8.81873 13.641 8.65884C13.641 8.44444 13.7286 8.23882 13.8846 8.08722C14.0405 7.93561 14.252 7.85044 14.4725 7.85044Z\"\n      />\n      <path\n        fill=\"currentColor\"\n        d=\"M14.4725 11.8924C13.5511 11.8934 12.6561 12.192 11.9281 12.7413C11.1137 11.9526 10.0772 11.416 8.94953 11.1992C7.82182 10.9824 6.65334 11.0951 5.59144 11.5231C4.52953 11.9511 3.62177 12.6753 2.98262 13.6042C2.34347 14.5331 2.00156 15.6253 2 16.7429C2 16.9573 2.0876 17.1629 2.24354 17.3145C2.39948 17.4661 2.61097 17.5513 2.8315 17.5513C3.05203 17.5513 3.26352 17.4661 3.41946 17.3145C3.5754 17.1629 3.663 16.9573 3.663 16.7429C3.663 15.6709 4.10102 14.6428 4.8807 13.8847C5.66039 13.1267 6.71786 12.7009 7.8205 12.7009C8.92314 12.7009 9.98061 13.1267 10.7603 13.8847C11.54 14.6428 11.978 15.6709 11.978 16.7429C11.978 16.9573 12.0656 17.1629 12.2215 17.3145C12.3775 17.4661 12.589 17.5513 12.8095 17.5513C13.03 17.5513 13.2415 17.4661 13.3975 17.3145C13.5534 17.1629 13.641 16.9573 13.641 16.7429C13.643 15.7958 13.3969 14.8638 12.9259 14.0347C13.2934 13.7524 13.7352 13.5764 14.2007 13.5268C14.6663 13.4772 15.1368 13.556 15.5584 13.7542C15.98 13.9524 16.3358 14.262 16.5849 14.6476C16.834 15.0332 16.9664 15.4791 16.967 15.9345C16.967 16.1489 17.0546 16.3545 17.2105 16.5061C17.3665 16.6577 17.578 16.7429 17.7985 16.7429C18.019 16.7429 18.2305 16.6577 18.3865 16.5061C18.5424 16.3545 18.63 16.1489 18.63 15.9345C18.63 14.8625 18.192 13.8344 17.4123 13.0763C16.6326 12.3183 15.5751 11.8924 14.4725 11.8924Z\"\n      />\n    </svg>\n  ),\n);\n\nPeopleIcon.displayName = \"PeopleIcon\";\n"],"names":[],"mappings":";;;;AAKO,MAAM,aAAa,MAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,WAAW,cAAc;"}

package/dist/index.d.ts

@@ -371,6 +371,51 @@ export declare const BankIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttr
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+export declare const Banner: React_2.ForwardRefExoticComponent<BannerProps & React_2.RefAttributes<HTMLElement>>;
+
+/** Layout (`Vertical` / `Horizontal` / `HorizontalSmall` in Figma). Ignored for `Subtle` and app store types. */
+export declare type BannerLayout = "vertical" | "horizontal" | "compact";
+
+export declare interface BannerProps extends Omit<React_2.HTMLAttributes<HTMLElement>, "title"> {
+    /** Figma `Type` — selects structure, surfaces, and app store gradient. */
+    variant: BannerVariant;
+    /**
+     * Figma `Orientation`. Ignored when `variant` is `Subtle` (horizontal) or an app store type (vertical).
+     * @default `"vertical"` for `Default`, `"horizontal"` for `whatsNew`
+     */
+    layout?: BannerLayout;
+    /** Leading visual (image, illustration, or composite). */
+    media?: React_2.ReactNode;
+    /** Small uppercase label (e.g. HOW TO). */
+    eyebrow?: React_2.ReactNode;
+    /** Top badge row (e.g. NEW pill) — mainly for `Subtle`. */
+    leadBadge?: React_2.ReactNode;
+    /** Main heading. */
+    title?: React_2.ReactNode;
+    /** Primary body copy. */
+    description?: React_2.ReactNode;
+    /** Extra line under description (`Subtle`). */
+    secondaryLine?: React_2.ReactNode;
+    /** Left-stacked pill action (`Subtle`). */
+    stackedAction?: React_2.ReactNode;
+    /** Row under stacked action (`Subtle`). */
+    statusRow?: React_2.ReactNode;
+    /** Primary button (e.g. Learn more). */
+    primaryAction?: React_2.ReactNode;
+    /** Text-style CTA (`whatsNew` / app store). */
+    textAction?: React_2.ReactNode;
+    /** When set, shows a dismiss control (`Default` only). */
+    onDismiss?: () => void;
+    /** Accessible label for dismiss. @default "Dismiss banner" */
+    dismissLabel?: string;
+}
+
+/**
+ * Matches the Fanvue Library Banner Figma component property `Type`
+ * (`Default`, `Subtle`, `whatsNew`, `appStore1`, `appStore2`, `appStore3`).
+ */
+export declare type BannerVariant = "Default" | "Subtle" | "whatsNew" | "appStore1" | "appStore2" | "appStore3";
+
 export declare const BellIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
@@ -1591,6 +1636,11 @@ export declare interface OnlineBlinkingIconProps extends React_2.HTMLAttributes<
 
 export declare type OnlineBlinkingIconSize = "sm" | "md";
 
+/** Open in new / external link (20 × 20). */
+export declare const OpenIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & React_2.RefAttributes<SVGSVGElement>>;
+
 /**
  * Page navigation control with previous/next buttons and numbered page
  * indicators. Supports a numbered-buttons layout (`"default"`) and a compact
@@ -1638,6 +1688,11 @@ export declare const PauseIcon: React_2.ForwardRefExoticComponent<React_2.SVGAtt
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/** Two-person silhouette (20 × 20). */
+export declare const PeopleIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & React_2.RefAttributes<SVGSVGElement>>;
+
 export declare const PhoneIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;

package/dist/index.mjs

@@ -9,6 +9,7 @@ import { useAudioRecorder } from "./components/AudioUpload/useAudioRecorder.mjs"
 import { Autocomplete } from "./components/Autocomplete/Autocomplete.mjs";
 import { Avatar, AvatarFallback, AvatarImage, AvatarRoot } from "./components/Avatar/Avatar.mjs";
 import { Badge } from "./components/Badge/Badge.mjs";
+import { Banner } from "./components/Banner/Banner.mjs";
 import { BottomNavigation } from "./components/BottomNavigation/BottomNavigation.mjs";
 import { BottomNavigationAction } from "./components/BottomNavigation/BottomNavigationAction.mjs";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/Breadcrumb/Breadcrumb.mjs";
@@ -98,7 +99,9 @@ import { MoonIcon } from "./components/Icons/MoonIcon.mjs";
 import { MoreIcon } from "./components/Icons/MoreIcon.mjs";
 import { MoreVerticalIcon } from "./components/Icons/MoreVerticalIcon.mjs";
 import { NewMessageIcon } from "./components/Icons/NewMessageIcon.mjs";
+import { OpenIcon } from "./components/Icons/OpenIcon.mjs";
 import { PauseIcon } from "./components/Icons/PauseIcon.mjs";
+import { PeopleIcon } from "./components/Icons/PeopleIcon.mjs";
 import { PhoneIcon } from "./components/Icons/PhoneIcon.mjs";
 import { PhoneOffIcon } from "./components/Icons/PhoneOffIcon.mjs";
 import { PinIcon } from "./components/Icons/PinIcon.mjs";
@@ -194,6 +197,7 @@ export {
   AvatarRoot,
   Badge,
   BankIcon,
+  Banner,
   BellIcon,
   BellOffIcon,
   BoltIcon,
@@ -314,9 +318,11 @@ export {
   MoreVerticalIcon,
   NewMessageIcon,
   OnlineBlinkingIcon,
+  OpenIcon,
   Pagination,
   PasswordField,
   PauseIcon,
+  PeopleIcon,
   PhoneIcon,
   PhoneOffIcon,
   Pill,

package/dist/index.mjs.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",