@gnome-ui/react 1.45.0 → 1.45.2

package/dist/components/Avatar/Avatar.d.ts

@@ -1,10 +1,10 @@
 import { HTMLAttributes } from 'react';
-export type AvatarSize = "sm" | "md" | "lg" | "xl";
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
 /**
  * Named color palette for the initials fallback.
  * Mirrors libadwaita's avatar color set.
  */
-export type AvatarColor = "blue" | "green" | "yellow" | "orange" | "red" | "purple" | "brown" | "teal" | "slate";
+export type AvatarColor = 'blue' | 'green' | 'yellow' | 'orange' | 'red' | 'purple' | 'brown' | 'teal' | 'slate';
 export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     /**
      * Full name used to generate initials and — when `color` is omitted —
@@ -31,4 +31,4 @@ export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Avatar.html
  */
-export declare function Avatar({ name, src, alt, size, color, className, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare const Avatar: ({ name, src, alt, size, color, className, ...props }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Avatar/Avatar.js

@@ -21,7 +21,7 @@ function i(e) {
 	let t = e.trim().split(/\s+/).filter(Boolean);
 	return t.length === 0 ? "" : t.length === 1 ? t[0].charAt(0).toUpperCase() : t[0].charAt(0).toUpperCase() + t[t.length - 1].charAt(0).toUpperCase();
 }
-function a({ name: n = "", src: a, alt: o, size: s = "md", color: c, className: l, ...u }) {
+var a = ({ name: n = "", src: a, alt: o, size: s = "md", color: c, className: l, ...u }) => {
 	let d = c ?? (n ? r(n) : "blue"), f = i(n), p = [
 		e.avatar,
 		e[s],
@@ -43,7 +43,7 @@ function a({ name: n = "", src: a, alt: o, size: s = "md", color: c, className:
 			children: f
 		})
 	});
-}
+};
 //#endregion
 export { a as Avatar };
 

package/dist/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport styles from \"./Avatar.module.css\";\n\nexport type AvatarSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/**\n * Named color palette for the initials fallback.\n * Mirrors libadwaita's avatar color set.\n */\nexport type AvatarColor =\n  | \"blue\"\n  | \"green\"\n  | \"yellow\"\n  | \"orange\"\n  | \"red\"\n  | \"purple\"\n  | \"brown\"\n  | \"teal\"\n  | \"slate\";\n\nexport interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Full name used to generate initials and — when `color` is omitted —\n   * to deterministically pick a background color.\n   */\n  name?: string;\n  /** Image URL. When provided the initials fallback is hidden. */\n  src?: string;\n  /** Alt text for the image. Defaults to `name`. */\n  alt?: string;\n  /** Size of the avatar. Defaults to `\"md\"`. */\n  size?: AvatarSize;\n  /**\n   * Override the auto-derived background color for the initials fallback.\n   * When omitted a color is derived from `name` via a stable hash.\n   */\n  color?: AvatarColor;\n}\n\nconst COLOR_LIST: AvatarColor[] = [\n  \"blue\",\n  \"green\",\n  \"yellow\",\n  \"orange\",\n  \"red\",\n  \"purple\",\n  \"brown\",\n  \"teal\",\n  \"slate\",\n];\n\n/** Stable, non-cryptographic hash → index into COLOR_LIST. */\nfunction nameToColor(name: string): AvatarColor {\n  let hash = 0;\n  for (let i = 0; i < name.length; i++) {\n    hash = (hash * 31 + name.charCodeAt(i)) >>> 0;\n  }\n  return COLOR_LIST[hash % COLOR_LIST.length];\n}\n\n/** Extract up to 2 initials from a name string. */\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return \"\";\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();\n  return (\n    parts[0].charAt(0).toUpperCase() +\n    parts[parts.length - 1].charAt(0).toUpperCase()\n  );\n}\n\n/**\n * Circular avatar with image or initials fallback.\n *\n * Follows the Adwaita `AdwAvatar` pattern — deterministic color from name,\n * up to two initials when no image is supplied.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Avatar.html\n */\nexport function Avatar({\n  name = \"\",\n  src,\n  alt,\n  size = \"md\",\n  color,\n  className,\n  ...props\n}: AvatarProps) {\n  const resolvedColor = color ?? (name ? nameToColor(name) : \"blue\");\n  const initials = getInitials(name);\n\n  const classes = [\n    styles.avatar,\n    styles[size],\n    !src ? styles[`color-${resolvedColor}`] : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <span\n      role=\"img\"\n      aria-label={alt ?? name ?? \"Avatar\"}\n      className={classes}\n      {...props}\n    >\n      {src ? (\n        <img src={src} alt={alt ?? name} className={styles.image} />\n      ) : (\n        <span aria-hidden=\"true\" className={styles.initials}>\n          {initials}\n        </span>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;AAuCA,IAAM,IAA4B;CAChC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAGD,SAAS,EAAY,GAA2B;CAC9C,IAAI,IAAO;AACX,MAAK,IAAI,IAAI,GAAG,IAAI,EAAK,QAAQ,IAC/B,KAAQ,IAAO,KAAK,EAAK,WAAW,EAAE,KAAM;AAE9C,QAAO,EAAW,IAAO,EAAW;;AAItC,SAAS,EAAY,GAAsB;CACzC,IAAM,IAAQ,EAAK,MAAM,CAAC,MAAM,MAAM,CAAC,OAAO,QAAQ;AAGtD,QAFI,EAAM,WAAW,IAAU,KAC3B,EAAM,WAAW,IAAU,EAAM,GAAG,OAAO,EAAE,CAAC,aAAa,GAE7D,EAAM,GAAG,OAAO,EAAE,CAAC,aAAa,GAChC,EAAM,EAAM,SAAS,GAAG,OAAO,EAAE,CAAC,aAAa;;AAYnD,SAAgB,EAAO,EACrB,UAAO,IACP,QACA,QACA,UAAO,MACP,UACA,cACA,GAAG,KACW;CACd,IAAM,IAAgB,MAAU,IAAO,EAAY,EAAK,GAAG,SACrD,IAAW,EAAY,EAAK,EAE5B,IAAU;EACd,EAAO;EACP,EAAO;EACN,IAAyC,OAAnC,EAAO,SAAS;EACvB;EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;AAEZ,QACE,kBAAC,QAAD;EACE,MAAK;EACL,cAAY,KAAO,KAAQ;EAC3B,WAAW;EACX,GAAI;YAEH,IACC,kBAAC,OAAD;GAAU;GAAK,KAAK,KAAO;GAAM,WAAW,EAAO;GAAS,CAAA,GAE5D,kBAAC,QAAD;GAAM,eAAY;GAAO,WAAW,EAAO;aACxC;GACI,CAAA;EAEJ,CAAA"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './Avatar.module.css';\n\nexport type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Named color palette for the initials fallback.\n * Mirrors libadwaita's avatar color set.\n */\nexport type AvatarColor =\n  | 'blue'\n  | 'green'\n  | 'yellow'\n  | 'orange'\n  | 'red'\n  | 'purple'\n  | 'brown'\n  | 'teal'\n  | 'slate';\n\nexport interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Full name used to generate initials and — when `color` is omitted —\n   * to deterministically pick a background color.\n   */\n  name?: string;\n  /** Image URL. When provided the initials fallback is hidden. */\n  src?: string;\n  /** Alt text for the image. Defaults to `name`. */\n  alt?: string;\n  /** Size of the avatar. Defaults to `\"md\"`. */\n  size?: AvatarSize;\n  /**\n   * Override the auto-derived background color for the initials fallback.\n   * When omitted a color is derived from `name` via a stable hash.\n   */\n  color?: AvatarColor;\n}\n\nconst COLOR_LIST: AvatarColor[] = [\n  'blue',\n  'green',\n  'yellow',\n  'orange',\n  'red',\n  'purple',\n  'brown',\n  'teal',\n  'slate',\n];\n\n/** Stable, non-cryptographic hash → index into COLOR_LIST. */\nfunction nameToColor(name: string): AvatarColor {\n  let hash = 0;\n  for (let i = 0; i < name.length; i++) {\n    hash = (hash * 31 + name.charCodeAt(i)) >>> 0;\n  }\n\n  return COLOR_LIST[hash % COLOR_LIST.length];\n}\n\n/** Extract up to 2 initials from a name string. */\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n\n  if (parts.length === 0) {\n    return '';\n  }\n\n  if (parts.length === 1) {\n    return parts[0].charAt(0).toUpperCase();\n  }\n\n  return parts[0].charAt(0).toUpperCase() + parts[parts.length - 1].charAt(0).toUpperCase();\n}\n\n/**\n * Circular avatar with image or initials fallback.\n *\n * Follows the Adwaita `AdwAvatar` pattern — deterministic color from name,\n * up to two initials when no image is supplied.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Avatar.html\n */\nexport const Avatar = ({\n  name = '',\n  src,\n  alt,\n  size = 'md',\n  color,\n  className,\n  ...props\n}: AvatarProps) => {\n  const resolvedColor = color ?? (name ? nameToColor(name) : 'blue');\n  const initials = getInitials(name);\n\n  const classes = [\n    styles.avatar,\n    styles[size],\n    !src ? styles[`color-${resolvedColor}`] : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span role=\"img\" aria-label={alt ?? name ?? 'Avatar'} className={classes} {...props}>\n      {src ? (\n        <img src={src} alt={alt ?? name} className={styles.image} />\n      ) : (\n        <span aria-hidden=\"true\" className={styles.initials}>\n          {initials}\n        </span>\n      )}\n    </span>\n  );\n};\n"],"mappings":";;;AAwCA,IAAM,IAA4B;CAChC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAGA,SAAS,EAAY,GAA2B;CAC9C,IAAI,IAAO;CACX,KAAK,IAAI,IAAI,GAAG,IAAI,EAAK,QAAQ,KAC/B,IAAQ,IAAO,KAAK,EAAK,WAAW,CAAC,MAAO;CAG9C,OAAO,EAAW,IAAO,EAAW;AACtC;AAGA,SAAS,EAAY,GAAsB;CACzC,IAAM,IAAQ,EAAK,KAAK,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO;CAUrD,OARI,EAAM,WAAW,IACZ,KAGL,EAAM,WAAW,IACZ,EAAM,GAAG,OAAO,CAAC,EAAE,YAAY,IAGjC,EAAM,GAAG,OAAO,CAAC,EAAE,YAAY,IAAI,EAAM,EAAM,SAAS,GAAG,OAAO,CAAC,EAAE,YAAY;AAC1F;AAUA,IAAa,KAAU,EACrB,UAAO,IACP,QACA,QACA,UAAO,MACP,UACA,cACA,GAAG,QACc;CACjB,IAAM,IAAgB,MAAU,IAAO,EAAY,CAAI,IAAI,SACrD,IAAW,EAAY,CAAI,GAE3B,IAAU;EACd,EAAO;EACP,EAAO;EACN,IAAyC,OAAnC,EAAO,SAAS;EACvB;CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;CAEX,OACE,kBAAC,QAAD;EAAM,MAAK;EAAM,cAAY,KAAO,KAAQ;EAAU,WAAW;EAAS,GAAI;YAC3E,IACC,kBAAC,OAAD;GAAU;GAAK,KAAK,KAAO;GAAM,WAAW,EAAO;EAAQ,CAAA,IAE3D,kBAAC,QAAD;GAAM,eAAY;GAAO,WAAW,EAAO;aACxC;EACG,CAAA;CAEJ,CAAA;AAEV"}

package/dist/components/Avatar/Avatar.module.css.cjs

@@ -1,2 +1,2 @@
-var e={avatar:`_avatar_1f2cd_3`,sm:`_sm_1f2cd_17`,md:`_md_1f2cd_22`,lg:`_lg_1f2cd_27`,xl:`_xl_1f2cd_32`,image:`_image_1f2cd_39`,initials:`_initials_1f2cd_48`,"color-blue":`_color-blue_1f2cd_64`,"color-green":`_color-green_1f2cd_65`,"color-yellow":`_color-yellow_1f2cd_66`,"color-orange":`_color-orange_1f2cd_72`,"color-red":`_color-red_1f2cd_73`,"color-purple":`_color-purple_1f2cd_74`,"color-brown":`_color-brown_1f2cd_75`,"color-teal":`_color-teal_1f2cd_76`,"color-slate":`_color-slate_1f2cd_77`};exports.default=e;
+var e={avatar:`_avatar_ig6e6_3`,sm:`_sm_ig6e6_17`,md:`_md_ig6e6_22`,lg:`_lg_ig6e6_27`,xl:`_xl_ig6e6_32`,image:`_image_ig6e6_39`,initials:`_initials_ig6e6_48`,"color-blue":`_color-blue_ig6e6_72`,"color-green":`_color-green_ig6e6_75`,"color-yellow":`_color-yellow_ig6e6_78`,"color-orange":`_color-orange_ig6e6_86`,"color-red":`_color-red_ig6e6_89`,"color-purple":`_color-purple_ig6e6_92`,"color-brown":`_color-brown_ig6e6_95`,"color-teal":`_color-teal_ig6e6_98`,"color-slate":`_color-slate_ig6e6_101`};exports.default=e;
 //# sourceMappingURL=Avatar.module.css.cjs.map

package/dist/components/Avatar/Avatar.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.module.css.cjs","names":[],"sources":["../../../src/components/Avatar/Avatar.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── */\n\n.avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--gnome-radius-pill);\n  overflow: hidden;\n  flex-shrink: 0;\n  user-select: none;\n  /* Subtle ring so the avatar reads on any background */\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);\n}\n\n/* ─── Sizes ────────────────────────────────────────────────────────────────── */\n\n.sm {\n  width: 24px;\n  height: 24px;\n}\n\n.md {\n  width: 32px;\n  height: 32px;\n}\n\n.lg {\n  width: 48px;\n  height: 48px;\n}\n\n.xl {\n  width: 64px;\n  height: 64px;\n}\n\n/* ─── Image ────────────────────────────────────────────────────────────────── */\n\n.image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n/* ─── Initials ─────────────────────────────────────────────────────────────── */\n\n.initials {\n  font-family: var(--gnome-font-family);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  color: #ffffff;\n  /* Scale initials font relative to the avatar size */\n  font-size: 0.42em;\n}\n\n.sm .initials  { font-size: 0.5em; }\n.md .initials  { font-size: 0.60em; }\n.lg .initials  { font-size: 1.0em; }\n.xl .initials  { font-size: 1.40em; }\n\n/* ─── Color variants (initials fallback) ───────────────────────────────────── */\n\n.color-blue   { background-color: var(--gnome-blue-3,   #3584e4); }\n.color-green  { background-color: var(--gnome-green-4,  #2ec27e); }\n.color-yellow {\n  background-color: var(--gnome-yellow-4, #f5c211);\n  /* yellow needs dark initials for contrast */\n}\n.color-yellow .initials { color: rgba(0, 0, 0, 0.8); }\n\n.color-orange { background-color: var(--gnome-orange-4, #e66100); }\n.color-red    { background-color: var(--gnome-red-3,    #e01b24); }\n.color-purple { background-color: var(--gnome-purple-3, #9141ac); }\n.color-brown  { background-color: var(--gnome-brown-3,  #986a44); }\n.color-teal   { background-color: #2190a4; }\n.color-slate  { background-color: var(--gnome-dark-2,   #5e5c64); }\n\n/* ─── Dark mode ring ───────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .avatar {\n    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Avatar.module.css.cjs","names":[],"sources":["../../../src/components/Avatar/Avatar.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── */\n\n.avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--gnome-radius-pill);\n  overflow: hidden;\n  flex-shrink: 0;\n  user-select: none;\n  /* Subtle ring so the avatar reads on any background */\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);\n}\n\n/* ─── Sizes ────────────────────────────────────────────────────────────────── */\n\n.sm {\n  width: 24px;\n  height: 24px;\n}\n\n.md {\n  width: 32px;\n  height: 32px;\n}\n\n.lg {\n  width: 48px;\n  height: 48px;\n}\n\n.xl {\n  width: 64px;\n  height: 64px;\n}\n\n/* ─── Image ────────────────────────────────────────────────────────────────── */\n\n.image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n/* ─── Initials ─────────────────────────────────────────────────────────────── */\n\n.initials {\n  font-family: var(--gnome-font-family);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  color: #ffffff;\n  /* Scale initials font relative to the avatar size */\n  font-size: 0.42em;\n}\n\n.sm .initials {\n  font-size: 0.5em;\n}\n.md .initials {\n  font-size: 0.6em;\n}\n.lg .initials {\n  font-size: 1em;\n}\n.xl .initials {\n  font-size: 1.4em;\n}\n\n/* ─── Color variants (initials fallback) ───────────────────────────────────── */\n\n.color-blue {\n  background-color: var(--gnome-blue-3, #3584e4);\n}\n.color-green {\n  background-color: var(--gnome-green-4, #2ec27e);\n}\n.color-yellow {\n  background-color: var(--gnome-yellow-4, #f5c211);\n  /* yellow needs dark initials for contrast */\n}\n.color-yellow .initials {\n  color: rgba(0, 0, 0, 0.8);\n}\n\n.color-orange {\n  background-color: var(--gnome-orange-4, #e66100);\n}\n.color-red {\n  background-color: var(--gnome-red-3, #e01b24);\n}\n.color-purple {\n  background-color: var(--gnome-purple-3, #9141ac);\n}\n.color-brown {\n  background-color: var(--gnome-brown-3, #986a44);\n}\n.color-teal {\n  background-color: #2190a4;\n}\n.color-slate {\n  background-color: var(--gnome-dark-2, #5e5c64);\n}\n\n/* ─── Dark mode ring ───────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .avatar {\n    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n}\n"],"mappings":""}

package/dist/components/Avatar/Avatar.module.css.js

@@ -1,20 +1,20 @@
 var e = {
-	avatar: "_avatar_1f2cd_3",
-	sm: "_sm_1f2cd_17",
-	md: "_md_1f2cd_22",
-	lg: "_lg_1f2cd_27",
-	xl: "_xl_1f2cd_32",
-	image: "_image_1f2cd_39",
-	initials: "_initials_1f2cd_48",
-	"color-blue": "_color-blue_1f2cd_64",
-	"color-green": "_color-green_1f2cd_65",
-	"color-yellow": "_color-yellow_1f2cd_66",
-	"color-orange": "_color-orange_1f2cd_72",
-	"color-red": "_color-red_1f2cd_73",
-	"color-purple": "_color-purple_1f2cd_74",
-	"color-brown": "_color-brown_1f2cd_75",
-	"color-teal": "_color-teal_1f2cd_76",
-	"color-slate": "_color-slate_1f2cd_77"
+	avatar: "_avatar_ig6e6_3",
+	sm: "_sm_ig6e6_17",
+	md: "_md_ig6e6_22",
+	lg: "_lg_ig6e6_27",
+	xl: "_xl_ig6e6_32",
+	image: "_image_ig6e6_39",
+	initials: "_initials_ig6e6_48",
+	"color-blue": "_color-blue_ig6e6_72",
+	"color-green": "_color-green_ig6e6_75",
+	"color-yellow": "_color-yellow_ig6e6_78",
+	"color-orange": "_color-orange_ig6e6_86",
+	"color-red": "_color-red_ig6e6_89",
+	"color-purple": "_color-purple_ig6e6_92",
+	"color-brown": "_color-brown_ig6e6_95",
+	"color-teal": "_color-teal_ig6e6_98",
+	"color-slate": "_color-slate_ig6e6_101"
 };
 //#endregion
 export { e as default };

package/dist/components/Avatar/Avatar.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.module.css.js","names":[],"sources":["../../../src/components/Avatar/Avatar.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── */\n\n.avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--gnome-radius-pill);\n  overflow: hidden;\n  flex-shrink: 0;\n  user-select: none;\n  /* Subtle ring so the avatar reads on any background */\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);\n}\n\n/* ─── Sizes ────────────────────────────────────────────────────────────────── */\n\n.sm {\n  width: 24px;\n  height: 24px;\n}\n\n.md {\n  width: 32px;\n  height: 32px;\n}\n\n.lg {\n  width: 48px;\n  height: 48px;\n}\n\n.xl {\n  width: 64px;\n  height: 64px;\n}\n\n/* ─── Image ────────────────────────────────────────────────────────────────── */\n\n.image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n/* ─── Initials ─────────────────────────────────────────────────────────────── */\n\n.initials {\n  font-family: var(--gnome-font-family);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  color: #ffffff;\n  /* Scale initials font relative to the avatar size */\n  font-size: 0.42em;\n}\n\n.sm .initials  { font-size: 0.5em; }\n.md .initials  { font-size: 0.60em; }\n.lg .initials  { font-size: 1.0em; }\n.xl .initials  { font-size: 1.40em; }\n\n/* ─── Color variants (initials fallback) ───────────────────────────────────── */\n\n.color-blue   { background-color: var(--gnome-blue-3,   #3584e4); }\n.color-green  { background-color: var(--gnome-green-4,  #2ec27e); }\n.color-yellow {\n  background-color: var(--gnome-yellow-4, #f5c211);\n  /* yellow needs dark initials for contrast */\n}\n.color-yellow .initials { color: rgba(0, 0, 0, 0.8); }\n\n.color-orange { background-color: var(--gnome-orange-4, #e66100); }\n.color-red    { background-color: var(--gnome-red-3,    #e01b24); }\n.color-purple { background-color: var(--gnome-purple-3, #9141ac); }\n.color-brown  { background-color: var(--gnome-brown-3,  #986a44); }\n.color-teal   { background-color: #2190a4; }\n.color-slate  { background-color: var(--gnome-dark-2,   #5e5c64); }\n\n/* ─── Dark mode ring ───────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .avatar {\n    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Avatar.module.css.js","names":[],"sources":["../../../src/components/Avatar/Avatar.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── */\n\n.avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--gnome-radius-pill);\n  overflow: hidden;\n  flex-shrink: 0;\n  user-select: none;\n  /* Subtle ring so the avatar reads on any background */\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);\n}\n\n/* ─── Sizes ────────────────────────────────────────────────────────────────── */\n\n.sm {\n  width: 24px;\n  height: 24px;\n}\n\n.md {\n  width: 32px;\n  height: 32px;\n}\n\n.lg {\n  width: 48px;\n  height: 48px;\n}\n\n.xl {\n  width: 64px;\n  height: 64px;\n}\n\n/* ─── Image ────────────────────────────────────────────────────────────────── */\n\n.image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n/* ─── Initials ─────────────────────────────────────────────────────────────── */\n\n.initials {\n  font-family: var(--gnome-font-family);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  color: #ffffff;\n  /* Scale initials font relative to the avatar size */\n  font-size: 0.42em;\n}\n\n.sm .initials {\n  font-size: 0.5em;\n}\n.md .initials {\n  font-size: 0.6em;\n}\n.lg .initials {\n  font-size: 1em;\n}\n.xl .initials {\n  font-size: 1.4em;\n}\n\n/* ─── Color variants (initials fallback) ───────────────────────────────────── */\n\n.color-blue {\n  background-color: var(--gnome-blue-3, #3584e4);\n}\n.color-green {\n  background-color: var(--gnome-green-4, #2ec27e);\n}\n.color-yellow {\n  background-color: var(--gnome-yellow-4, #f5c211);\n  /* yellow needs dark initials for contrast */\n}\n.color-yellow .initials {\n  color: rgba(0, 0, 0, 0.8);\n}\n\n.color-orange {\n  background-color: var(--gnome-orange-4, #e66100);\n}\n.color-red {\n  background-color: var(--gnome-red-3, #e01b24);\n}\n.color-purple {\n  background-color: var(--gnome-purple-3, #9141ac);\n}\n.color-brown {\n  background-color: var(--gnome-brown-3, #986a44);\n}\n.color-teal {\n  background-color: #2190a4;\n}\n.color-slate {\n  background-color: var(--gnome-dark-2, #5e5c64);\n}\n\n/* ─── Dark mode ring ───────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .avatar {\n    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n}\n"],"mappings":""}

package/dist/components/Avatar/index.d.ts

@@ -1,2 +1,2 @@
+export type { AvatarColor, AvatarProps, AvatarSize } from './Avatar';
 export { Avatar } from './Avatar';
-export type { AvatarProps, AvatarSize, AvatarColor } from './Avatar';

package/dist/components/Avatar.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Avatar/Avatar.cjs`);exports.Avatar=e.Avatar;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./Avatar/Avatar.cjs");exports.Avatar=e.Avatar;

package/dist/components/AvatarRotator/AvatarRotator.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Avatar/Avatar.cjs`),t=require(`./AvatarRotator.module.css.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);function i(e,t){return t<=0?0:(e%t+t)%t}function a(){let[e,t]=(0,n.useState)(!1);return(0,n.useEffect)(()=>{if(typeof window>`u`||!window.matchMedia)return;let e=window.matchMedia(`(prefers-reduced-motion: reduce)`);t(e.matches);let n=()=>t(e.matches);return e.addEventListener?.(`change`,n),()=>e.removeEventListener?.(`change`,n)},[]),e}function o({name:o=``,avatars:s=[],alt:c,size:l=`md`,color:u,interval:d=3e3,transitionDuration:f=240,pauseOnHover:p=!0,activeIndex:m,defaultActiveIndex:h=0,onIndexChange:g,className:_,style:v,onMouseEnter:y,onMouseLeave:b,onFocus:x,onBlur:S,...C}){let w=(0,n.useMemo)(()=>s.map(e=>e.trim()).filter(Boolean),[s]),T=m!==void 0,[E,D]=(0,n.useState)(h),[O,k]=(0,n.useState)(!1),A=a(),j=i(T?m:E,w.length);if((0,n.useEffect)(()=>{if(w.length<=1||d<=0||O||A)return;let e=window.setInterval(()=>{let e=i(j+1,w.length);T||D(e),g?.(e)},d);return()=>window.clearInterval(e)},[j,d,T,O,g,A,w.length]),w.length===0)return(0,r.jsx)(e.Avatar,{name:o,alt:c,size:l,color:u,className:_,style:v,...C});let M=c??o??`Avatar`,N={...v,"--avatar-rotator-duration":`${Math.max(0,f)}ms`};return(0,r.jsx)(`span`,{role:`img`,"aria-label":M,className:[t.default.rotator,t.default[l],_].filter(Boolean).join(` `),style:N,onMouseEnter:e=>{p&&k(!0),y?.(e)},onMouseLeave:e=>{p&&k(!1),b?.(e)},onFocus:e=>{p&&k(!0),x?.(e)},onBlur:e=>{p&&k(!1),S?.(e)},...C,children:w.map((n,i)=>(0,r.jsx)(e.Avatar,{name:o,src:n,alt:``,size:l,"aria-hidden":`true`,className:[t.default.layer,i===j?t.default.active:null].filter(Boolean).join(` `)},`${n}-${i}`))})}exports.AvatarRotator=o;
+const e=require("../Avatar/Avatar.cjs"),t=require("./AvatarRotator.module.css.cjs");let n=require("react"),r=require("react/jsx-runtime");function i(e,t){return t<=0?0:(e%t+t)%t}function a(){let[e,t]=(0,n.useState)(!1);return(0,n.useEffect)(()=>{if(typeof window>`u`||!window.matchMedia)return;let e=window.matchMedia(`(prefers-reduced-motion: reduce)`);t(e.matches);let n=()=>t(e.matches);return e.addEventListener?.(`change`,n),()=>e.removeEventListener?.(`change`,n)},[]),e}var o=({name:o=``,avatars:s=[],alt:c,size:l=`md`,color:u,interval:d=3e3,transitionDuration:f=240,pauseOnHover:p=!0,activeIndex:m,defaultActiveIndex:h=0,onIndexChange:g,className:_,style:v,onMouseEnter:y,onMouseLeave:b,onFocus:x,onBlur:S,...C})=>{let w=(0,n.useMemo)(()=>s.map(e=>e.trim()).filter(Boolean),[s]),T=m!==void 0,[E,D]=(0,n.useState)(h),[O,k]=(0,n.useState)(!1),A=a(),j=i(T?m:E,w.length);if((0,n.useEffect)(()=>{if(w.length<=1||d<=0||O||A)return;let e=window.setInterval(()=>{let e=i(j+1,w.length);T||D(e),g?.(e)},d);return()=>window.clearInterval(e)},[j,d,T,O,g,A,w.length]),w.length===0)return(0,r.jsx)(e.Avatar,{name:o,alt:c,size:l,color:u,className:_,style:v,...C});let M=c??o??`Avatar`,N={...v,"--avatar-rotator-duration":`${Math.max(0,f)}ms`};return(0,r.jsx)(`span`,{role:`img`,"aria-label":M,className:[t.default.rotator,t.default[l],_].filter(Boolean).join(` `),style:N,onMouseEnter:e=>{p&&k(!0),y?.(e)},onMouseLeave:e=>{p&&k(!1),b?.(e)},onFocus:e=>{p&&k(!0),x?.(e)},onBlur:e=>{p&&k(!1),S?.(e)},...C,children:w.map((n,i)=>(0,r.jsx)(e.Avatar,{name:o,src:n,alt:``,size:l,"aria-hidden":`true`,className:[t.default.layer,i===j?t.default.active:null].filter(Boolean).join(` `)},`${n}-${i}`))})};exports.AvatarRotator=o;
 //# sourceMappingURL=AvatarRotator.cjs.map

package/dist/components/AvatarRotator/AvatarRotator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarRotator.cjs","names":[],"sources":["../../../src/components/AvatarRotator/AvatarRotator.tsx"],"sourcesContent":["import {\n  useEffect,\n  useMemo,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { Avatar, type AvatarColor, type AvatarSize } from \"../Avatar\";\nimport styles from \"./AvatarRotator.module.css\";\n\nexport interface AvatarRotatorProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Full name used for the accessible label and initials fallback. */\n  name?: string;\n  /** Image URLs to rotate through. */\n  avatars?: string[];\n  /** Accessible label. Defaults to `name`. */\n  alt?: string;\n  /** Size of the avatar. Defaults to `\"md\"`. */\n  size?: AvatarSize;\n  /** Fallback initials color when no avatar image is available. */\n  color?: AvatarColor;\n  /** Time between avatar changes in milliseconds. Defaults to `3000`. */\n  interval?: number;\n  /** Crossfade duration in milliseconds. Defaults to `240`. */\n  transitionDuration?: number;\n  /** Pause automatic rotation while hovered or focused. Defaults to `true`. */\n  pauseOnHover?: boolean;\n  /**\n   * Controlled active avatar index.\n   * When omitted the rotator manages index state internally.\n   */\n  activeIndex?: number;\n  /** Initial active avatar index for uncontrolled usage. Defaults to `0`. */\n  defaultActiveIndex?: number;\n  /** Called when the active avatar changes. */\n  onIndexChange?: (index: number) => void;\n}\n\nfunction clampIndex(index: number, length: number) {\n  if (length <= 0) return 0;\n  return ((index % length) + length) % length;\n}\n\nfunction usePrefersReducedMotion() {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    if (typeof window === \"undefined\" || !window.matchMedia) return;\n\n    const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    setPrefersReducedMotion(query.matches);\n\n    const handleChange = () => setPrefersReducedMotion(query.matches);\n    query.addEventListener?.(\"change\", handleChange);\n    return () => query.removeEventListener?.(\"change\", handleChange);\n  }, []);\n\n  return prefersReducedMotion;\n}\n\n/**\n * Single avatar surface that rotates through multiple image sources.\n *\n * Keeps `Avatar` focused on rendering one identity, while this component owns\n * timing, crossfade animation, and pause behavior.\n */\nexport function AvatarRotator({\n  name = \"\",\n  avatars = [],\n  alt,\n  size = \"md\",\n  color,\n  interval = 3000,\n  transitionDuration = 240,\n  pauseOnHover = true,\n  activeIndex,\n  defaultActiveIndex = 0,\n  onIndexChange,\n  className,\n  style,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  ...props\n}: AvatarRotatorProps) {\n  const sources = useMemo(\n    () => avatars.map((src) => src.trim()).filter(Boolean),\n    [avatars],\n  );\n  const isControlled = activeIndex !== undefined;\n  const [internalIndex, setInternalIndex] = useState(defaultActiveIndex);\n  const [isPaused, setIsPaused] = useState(false);\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const currentIndex = clampIndex(\n    isControlled ? activeIndex : internalIndex,\n    sources.length,\n  );\n\n  useEffect(() => {\n    if (sources.length <= 1) return;\n    if (interval <= 0) return;\n    if (isPaused || prefersReducedMotion) return;\n\n    const timer = window.setInterval(() => {\n      const nextIndex = clampIndex(currentIndex + 1, sources.length);\n      if (!isControlled) setInternalIndex(nextIndex);\n      onIndexChange?.(nextIndex);\n    }, interval);\n\n    return () => window.clearInterval(timer);\n  }, [\n    currentIndex,\n    interval,\n    isControlled,\n    isPaused,\n    onIndexChange,\n    prefersReducedMotion,\n    sources.length,\n  ]);\n\n  if (sources.length === 0) {\n    return (\n      <Avatar\n        name={name}\n        alt={alt}\n        size={size}\n        color={color}\n        className={className}\n        style={style}\n        {...props}\n      />\n    );\n  }\n\n  const label = alt ?? name ?? \"Avatar\";\n  const transitionStyle = {\n    ...style,\n    \"--avatar-rotator-duration\": `${Math.max(0, transitionDuration)}ms`,\n  } as CSSProperties;\n\n  return (\n    <span\n      role=\"img\"\n      aria-label={label}\n      className={[styles.rotator, styles[size], className]\n        .filter(Boolean)\n        .join(\" \")}\n      style={transitionStyle}\n      onMouseEnter={(event) => {\n        if (pauseOnHover) setIsPaused(true);\n        onMouseEnter?.(event);\n      }}\n      onMouseLeave={(event) => {\n        if (pauseOnHover) setIsPaused(false);\n        onMouseLeave?.(event);\n      }}\n      onFocus={(event) => {\n        if (pauseOnHover) setIsPaused(true);\n        onFocus?.(event);\n      }}\n      onBlur={(event) => {\n        if (pauseOnHover) setIsPaused(false);\n        onBlur?.(event);\n      }}\n      {...props}\n    >\n      {sources.map((src, index) => (\n        <Avatar\n          key={`${src}-${index}`}\n          name={name}\n          src={src}\n          alt=\"\"\n          size={size}\n          aria-hidden=\"true\"\n          className={[\n            styles.layer,\n            index === currentIndex ? styles.active : null,\n          ]\n            .filter(Boolean)\n            .join(\" \")}\n        />\n      ))}\n    </span>\n  );\n}\n"],"mappings":"0IAsCA,SAAS,EAAW,EAAe,EAAgB,CAEjD,OADI,GAAU,EAAU,GACf,EAAQ,EAAU,GAAU,EAGvC,SAAS,GAA0B,CACjC,GAAM,CAAC,EAAsB,IAAA,EAAA,EAAA,UAAoC,GAAM,CAavE,OAXA,EAAA,EAAA,eAAgB,CACd,GAAI,OAAO,OAAW,KAAe,CAAC,OAAO,WAAY,OAEzD,IAAM,EAAQ,OAAO,WAAW,mCAAmC,CACnE,EAAwB,EAAM,QAAQ,CAEtC,IAAM,MAAqB,EAAwB,EAAM,QAAQ,CAEjE,OADA,EAAM,mBAAmB,SAAU,EAAa,KACnC,EAAM,sBAAsB,SAAU,EAAa,EAC/D,EAAE,CAAC,CAEC,EAST,SAAgB,EAAc,CAC5B,OAAO,GACP,UAAU,EAAE,CACZ,MACA,OAAO,KACP,QACA,WAAW,IACX,qBAAqB,IACrB,eAAe,GACf,cACA,qBAAqB,EACrB,gBACA,YACA,QACA,eACA,eACA,UACA,SACA,GAAG,GACkB,CACrB,IAAM,GAAA,EAAA,EAAA,aACE,EAAQ,IAAK,GAAQ,EAAI,MAAM,CAAC,CAAC,OAAO,QAAQ,CACtD,CAAC,EAAQ,CACV,CACK,EAAe,IAAgB,IAAA,GAC/B,CAAC,EAAe,IAAA,EAAA,EAAA,UAA6B,EAAmB,CAChE,CAAC,EAAU,IAAA,EAAA,EAAA,UAAwB,GAAM,CACzC,EAAuB,GAAyB,CAChD,EAAe,EACnB,EAAe,EAAc,EAC7B,EAAQ,OACT,CAwBD,IAtBA,EAAA,EAAA,eAAgB,CAGd,GAFI,EAAQ,QAAU,GAClB,GAAY,GACZ,GAAY,EAAsB,OAEtC,IAAM,EAAQ,OAAO,gBAAkB,CACrC,IAAM,EAAY,EAAW,EAAe,EAAG,EAAQ,OAAO,CACzD,GAAc,EAAiB,EAAU,CAC9C,IAAgB,EAAU,EACzB,EAAS,CAEZ,UAAa,OAAO,cAAc,EAAM,EACvC,CACD,EACA,EACA,EACA,EACA,EACA,EACA,EAAQ,OACT,CAAC,CAEE,EAAQ,SAAW,EACrB,OACE,EAAA,EAAA,KAAC,EAAA,OAAD,CACQ,OACD,MACC,OACC,QACI,YACJ,QACP,GAAI,EACJ,CAAA,CAIN,IAAM,EAAQ,GAAO,GAAQ,SACvB,EAAkB,CACtB,GAAG,EACH,4BAA6B,GAAG,KAAK,IAAI,EAAG,EAAmB,CAAC,IACjE,CAED,OACE,EAAA,EAAA,KAAC,OAAD,CACE,KAAK,MACL,aAAY,EACZ,UAAW,CAAC,EAAA,QAAO,QAAS,EAAA,QAAO,GAAO,EAAU,CACjD,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,MAAO,EACP,aAAe,GAAU,CACnB,GAAc,EAAY,GAAK,CACnC,IAAe,EAAM,EAEvB,aAAe,GAAU,CACnB,GAAc,EAAY,GAAM,CACpC,IAAe,EAAM,EAEvB,QAAU,GAAU,CACd,GAAc,EAAY,GAAK,CACnC,IAAU,EAAM,EAElB,OAAS,GAAU,CACb,GAAc,EAAY,GAAM,CACpC,IAAS,EAAM,EAEjB,GAAI,WAEH,EAAQ,KAAK,EAAK,KACjB,EAAA,EAAA,KAAC,EAAA,OAAD,CAEQ,OACD,MACL,IAAI,GACE,OACN,cAAY,OACZ,UAAW,CACT,EAAA,QAAO,MACP,IAAU,EAAe,EAAA,QAAO,OAAS,KAC1C,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,CAZK,GAAG,EAAI,GAAG,IAYf,CACF,CACG,CAAA"}
+{"version":3,"file":"AvatarRotator.cjs","names":[],"sources":["../../../src/components/AvatarRotator/AvatarRotator.tsx"],"sourcesContent":["import { type CSSProperties, type HTMLAttributes, useEffect, useMemo, useState } from 'react';\n\nimport { Avatar, type AvatarColor, type AvatarSize } from '../Avatar';\n\nimport styles from './AvatarRotator.module.css';\n\nexport interface AvatarRotatorProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Full name used for the accessible label and initials fallback. */\n  name?: string;\n  /** Image URLs to rotate through. */\n  avatars?: string[];\n  /** Accessible label. Defaults to `name`. */\n  alt?: string;\n  /** Size of the avatar. Defaults to `\"md\"`. */\n  size?: AvatarSize;\n  /** Fallback initials color when no avatar image is available. */\n  color?: AvatarColor;\n  /** Time between avatar changes in milliseconds. Defaults to `3000`. */\n  interval?: number;\n  /** Crossfade duration in milliseconds. Defaults to `240`. */\n  transitionDuration?: number;\n  /** Pause automatic rotation while hovered or focused. Defaults to `true`. */\n  pauseOnHover?: boolean;\n  /**\n   * Controlled active avatar index.\n   * When omitted the rotator manages index state internally.\n   */\n  activeIndex?: number;\n  /** Initial active avatar index for uncontrolled usage. Defaults to `0`. */\n  defaultActiveIndex?: number;\n  /** Called when the active avatar changes. */\n  onIndexChange?: (index: number) => void;\n}\n\nfunction clampIndex(index: number, length: number) {\n  if (length <= 0) {\n    return 0;\n  }\n\n  return ((index % length) + length) % length;\n}\n\nfunction usePrefersReducedMotion() {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    if (typeof window === 'undefined' || !window.matchMedia) {\n      return;\n    }\n\n    const query = window.matchMedia('(prefers-reduced-motion: reduce)');\n\n    setPrefersReducedMotion(query.matches);\n\n    const handleChange = () => setPrefersReducedMotion(query.matches);\n\n    query.addEventListener?.('change', handleChange);\n\n    return () => query.removeEventListener?.('change', handleChange);\n  }, []);\n\n  return prefersReducedMotion;\n}\n\n/**\n * Single avatar surface that rotates through multiple image sources.\n *\n * Keeps `Avatar` focused on rendering one identity, while this component owns\n * timing, crossfade animation, and pause behavior.\n */\nexport const AvatarRotator = ({\n  name = '',\n  avatars = [],\n  alt,\n  size = 'md',\n  color,\n  interval = 3000,\n  transitionDuration = 240,\n  pauseOnHover = true,\n  activeIndex,\n  defaultActiveIndex = 0,\n  onIndexChange,\n  className,\n  style,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  ...props\n}: AvatarRotatorProps) => {\n  const sources = useMemo(() => avatars.map((src) => src.trim()).filter(Boolean), [avatars]);\n  const isControlled = activeIndex !== undefined;\n  const [internalIndex, setInternalIndex] = useState(defaultActiveIndex);\n  const [isPaused, setIsPaused] = useState(false);\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const currentIndex = clampIndex(isControlled ? activeIndex : internalIndex, sources.length);\n\n  useEffect(() => {\n    if (sources.length <= 1) {\n      return;\n    }\n\n    if (interval <= 0) {\n      return;\n    }\n\n    if (isPaused || prefersReducedMotion) {\n      return;\n    }\n\n    const timer = window.setInterval(() => {\n      const nextIndex = clampIndex(currentIndex + 1, sources.length);\n\n      if (!isControlled) {\n        setInternalIndex(nextIndex);\n      }\n\n      onIndexChange?.(nextIndex);\n    }, interval);\n\n    return () => window.clearInterval(timer);\n  }, [\n    currentIndex,\n    interval,\n    isControlled,\n    isPaused,\n    onIndexChange,\n    prefersReducedMotion,\n    sources.length,\n  ]);\n\n  if (sources.length === 0) {\n    return (\n      <Avatar\n        name={name}\n        alt={alt}\n        size={size}\n        color={color}\n        className={className}\n        style={style}\n        {...props}\n      />\n    );\n  }\n\n  const label = alt ?? name ?? 'Avatar';\n  const transitionStyle = {\n    ...style,\n    '--avatar-rotator-duration': `${Math.max(0, transitionDuration)}ms`,\n  } as CSSProperties;\n\n  return (\n    <span\n      role=\"img\"\n      aria-label={label}\n      className={[styles.rotator, styles[size], className].filter(Boolean).join(' ')}\n      style={transitionStyle}\n      onMouseEnter={(event) => {\n        if (pauseOnHover) {\n          setIsPaused(true);\n        }\n\n        onMouseEnter?.(event);\n      }}\n      onMouseLeave={(event) => {\n        if (pauseOnHover) {\n          setIsPaused(false);\n        }\n\n        onMouseLeave?.(event);\n      }}\n      onFocus={(event) => {\n        if (pauseOnHover) {\n          setIsPaused(true);\n        }\n\n        onFocus?.(event);\n      }}\n      onBlur={(event) => {\n        if (pauseOnHover) {\n          setIsPaused(false);\n        }\n\n        onBlur?.(event);\n      }}\n      {...props}\n    >\n      {sources.map((src, index) => (\n        <Avatar\n          key={`${src}-${index}`}\n          name={name}\n          src={src}\n          alt=\"\"\n          size={size}\n          aria-hidden=\"true\"\n          className={[styles.layer, index === currentIndex ? styles.active : null]\n            .filter(Boolean)\n            .join(' ')}\n        />\n      ))}\n    </span>\n  );\n};\n"],"mappings":"0IAkCA,SAAS,EAAW,EAAe,EAAgB,CAKjD,OAJI,GAAU,EACL,GAGA,EAAQ,EAAU,GAAU,CACvC,CAEA,SAAS,GAA0B,CACjC,GAAM,CAAC,EAAsB,IAAA,EAAA,EAAA,UAAoC,EAAK,EAkBtE,OAhBA,EAAA,EAAA,eAAgB,CACd,GAAI,OAAO,OAAW,KAAe,CAAC,OAAO,WAC3C,OAGF,IAAM,EAAQ,OAAO,WAAW,kCAAkC,EAElE,EAAwB,EAAM,OAAO,EAErC,IAAM,MAAqB,EAAwB,EAAM,OAAO,EAIhE,OAFA,EAAM,mBAAmB,SAAU,CAAY,MAElC,EAAM,sBAAsB,SAAU,CAAY,CACjE,EAAG,CAAC,CAAC,EAEE,CACT,CAQA,IAAa,GAAiB,CAC5B,OAAO,GACP,UAAU,CAAC,EACX,MACA,OAAO,KACP,QACA,WAAW,IACX,qBAAqB,IACrB,eAAe,GACf,cACA,qBAAqB,EACrB,gBACA,YACA,QACA,eACA,eACA,UACA,SACA,GAAG,KACqB,CACxB,IAAM,GAAA,EAAA,EAAA,aAAwB,EAAQ,IAAK,GAAQ,EAAI,KAAK,CAAC,EAAE,OAAO,OAAO,EAAG,CAAC,CAAO,CAAC,EACnF,EAAe,IAAgB,IAAA,GAC/B,CAAC,EAAe,IAAA,EAAA,EAAA,UAA6B,CAAkB,EAC/D,CAAC,EAAU,IAAA,EAAA,EAAA,UAAwB,EAAK,EACxC,EAAuB,EAAwB,EAC/C,EAAe,EAAW,EAAe,EAAc,EAAe,EAAQ,MAAM,EAoC1F,IAlCA,EAAA,EAAA,eAAgB,CASd,GARI,EAAQ,QAAU,GAIlB,GAAY,GAIZ,GAAY,EACd,OAGF,IAAM,EAAQ,OAAO,gBAAkB,CACrC,IAAM,EAAY,EAAW,EAAe,EAAG,EAAQ,MAAM,EAExD,GACH,EAAiB,CAAS,EAG5B,IAAgB,CAAS,CAC3B,EAAG,CAAQ,EAEX,UAAa,OAAO,cAAc,CAAK,CACzC,EAAG,CACD,EACA,EACA,EACA,EACA,EACA,EACA,EAAQ,MACV,CAAC,EAEG,EAAQ,SAAW,EACrB,OACE,EAAA,EAAA,KAAC,EAAA,OAAD,CACQ,OACD,MACC,OACC,QACI,YACJ,QACP,GAAI,CACL,CAAA,EAIL,IAAM,EAAQ,GAAO,GAAQ,SACvB,EAAkB,CACtB,GAAG,EACH,4BAA6B,GAAG,KAAK,IAAI,EAAG,CAAkB,EAAE,GAClE,EAEA,OACE,EAAA,EAAA,KAAC,OAAD,CACE,KAAK,MACL,aAAY,EACZ,UAAW,CAAC,EAAA,QAAO,QAAS,EAAA,QAAO,GAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7E,MAAO,EACP,aAAe,GAAU,CACnB,GACF,EAAY,EAAI,EAGlB,IAAe,CAAK,CACtB,EACA,aAAe,GAAU,CACnB,GACF,EAAY,EAAK,EAGnB,IAAe,CAAK,CACtB,EACA,QAAU,GAAU,CACd,GACF,EAAY,EAAI,EAGlB,IAAU,CAAK,CACjB,EACA,OAAS,GAAU,CACb,GACF,EAAY,EAAK,EAGnB,IAAS,CAAK,CAChB,EACA,GAAI,WAEH,EAAQ,KAAK,EAAK,KACjB,EAAA,EAAA,KAAC,EAAA,OAAD,CAEQ,OACD,MACL,IAAI,GACE,OACN,cAAY,OACZ,UAAW,CAAC,EAAA,QAAO,MAAO,IAAU,EAAe,EAAA,QAAO,OAAS,IAAI,EACpE,OAAO,OAAO,EACd,KAAK,GAAG,CACZ,EATM,GAAG,EAAI,GAAG,GAShB,CACF,CACG,CAAA,CAEV"}

package/dist/components/AvatarRotator/AvatarRotator.d.ts

@@ -33,4 +33,4 @@ export interface AvatarRotatorProps extends HTMLAttributes<HTMLSpanElement> {
  * Keeps `Avatar` focused on rendering one identity, while this component owns
  * timing, crossfade animation, and pause behavior.
  */
-export declare function AvatarRotator({ name, avatars, alt, size, color, interval, transitionDuration, pauseOnHover, activeIndex, defaultActiveIndex, onIndexChange, className, style, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }: AvatarRotatorProps): import("react/jsx-runtime").JSX.Element;
+export declare const AvatarRotator: ({ name, avatars, alt, size, color, interval, transitionDuration, pauseOnHover, activeIndex, defaultActiveIndex, onIndexChange, className, style, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }: AvatarRotatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AvatarRotator/AvatarRotator.js

@@ -16,7 +16,7 @@ function s() {
 		return e.addEventListener?.("change", n), () => e.removeEventListener?.("change", n);
 	}, []), e;
 }
-function c({ name: c = "", avatars: l = [], alt: u, size: d = "md", color: f, interval: p = 3e3, transitionDuration: m = 240, pauseOnHover: h = !0, activeIndex: g, defaultActiveIndex: _ = 0, onIndexChange: v, className: y, style: b, onMouseEnter: x, onMouseLeave: S, onFocus: C, onBlur: w, ...T }) {
+var c = ({ name: c = "", avatars: l = [], alt: u, size: d = "md", color: f, interval: p = 3e3, transitionDuration: m = 240, pauseOnHover: h = !0, activeIndex: g, defaultActiveIndex: _ = 0, onIndexChange: v, className: y, style: b, onMouseEnter: x, onMouseLeave: S, onFocus: C, onBlur: w, ...T }) => {
 	let E = r(() => l.map((e) => e.trim()).filter(Boolean), [l]), D = g !== void 0, [O, k] = i(_), [A, j] = i(!1), M = s(), N = o(D ? g : O, E.length);
 	if (n(() => {
 		if (E.length <= 1 || p <= 0 || A || M) return;
@@ -77,7 +77,7 @@ function c({ name: c = "", avatars: l = [], alt: u, size: d = "md", color: f, in
 			className: [t.layer, r === N ? t.active : null].filter(Boolean).join(" ")
 		}, `${n}-${r}`))
 	});
-}
+};
 //#endregion
 export { c as AvatarRotator };
 

package/dist/components/AvatarRotator/AvatarRotator.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarRotator.js","names":[],"sources":["../../../src/components/AvatarRotator/AvatarRotator.tsx"],"sourcesContent":["import {\n  useEffect,\n  useMemo,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { Avatar, type AvatarColor, type AvatarSize } from \"../Avatar\";\nimport styles from \"./AvatarRotator.module.css\";\n\nexport interface AvatarRotatorProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Full name used for the accessible label and initials fallback. */\n  name?: string;\n  /** Image URLs to rotate through. */\n  avatars?: string[];\n  /** Accessible label. Defaults to `name`. */\n  alt?: string;\n  /** Size of the avatar. Defaults to `\"md\"`. */\n  size?: AvatarSize;\n  /** Fallback initials color when no avatar image is available. */\n  color?: AvatarColor;\n  /** Time between avatar changes in milliseconds. Defaults to `3000`. */\n  interval?: number;\n  /** Crossfade duration in milliseconds. Defaults to `240`. */\n  transitionDuration?: number;\n  /** Pause automatic rotation while hovered or focused. Defaults to `true`. */\n  pauseOnHover?: boolean;\n  /**\n   * Controlled active avatar index.\n   * When omitted the rotator manages index state internally.\n   */\n  activeIndex?: number;\n  /** Initial active avatar index for uncontrolled usage. Defaults to `0`. */\n  defaultActiveIndex?: number;\n  /** Called when the active avatar changes. */\n  onIndexChange?: (index: number) => void;\n}\n\nfunction clampIndex(index: number, length: number) {\n  if (length <= 0) return 0;\n  return ((index % length) + length) % length;\n}\n\nfunction usePrefersReducedMotion() {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    if (typeof window === \"undefined\" || !window.matchMedia) return;\n\n    const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    setPrefersReducedMotion(query.matches);\n\n    const handleChange = () => setPrefersReducedMotion(query.matches);\n    query.addEventListener?.(\"change\", handleChange);\n    return () => query.removeEventListener?.(\"change\", handleChange);\n  }, []);\n\n  return prefersReducedMotion;\n}\n\n/**\n * Single avatar surface that rotates through multiple image sources.\n *\n * Keeps `Avatar` focused on rendering one identity, while this component owns\n * timing, crossfade animation, and pause behavior.\n */\nexport function AvatarRotator({\n  name = \"\",\n  avatars = [],\n  alt,\n  size = \"md\",\n  color,\n  interval = 3000,\n  transitionDuration = 240,\n  pauseOnHover = true,\n  activeIndex,\n  defaultActiveIndex = 0,\n  onIndexChange,\n  className,\n  style,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  ...props\n}: AvatarRotatorProps) {\n  const sources = useMemo(\n    () => avatars.map((src) => src.trim()).filter(Boolean),\n    [avatars],\n  );\n  const isControlled = activeIndex !== undefined;\n  const [internalIndex, setInternalIndex] = useState(defaultActiveIndex);\n  const [isPaused, setIsPaused] = useState(false);\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const currentIndex = clampIndex(\n    isControlled ? activeIndex : internalIndex,\n    sources.length,\n  );\n\n  useEffect(() => {\n    if (sources.length <= 1) return;\n    if (interval <= 0) return;\n    if (isPaused || prefersReducedMotion) return;\n\n    const timer = window.setInterval(() => {\n      const nextIndex = clampIndex(currentIndex + 1, sources.length);\n      if (!isControlled) setInternalIndex(nextIndex);\n      onIndexChange?.(nextIndex);\n    }, interval);\n\n    return () => window.clearInterval(timer);\n  }, [\n    currentIndex,\n    interval,\n    isControlled,\n    isPaused,\n    onIndexChange,\n    prefersReducedMotion,\n    sources.length,\n  ]);\n\n  if (sources.length === 0) {\n    return (\n      <Avatar\n        name={name}\n        alt={alt}\n        size={size}\n        color={color}\n        className={className}\n        style={style}\n        {...props}\n      />\n    );\n  }\n\n  const label = alt ?? name ?? \"Avatar\";\n  const transitionStyle = {\n    ...style,\n    \"--avatar-rotator-duration\": `${Math.max(0, transitionDuration)}ms`,\n  } as CSSProperties;\n\n  return (\n    <span\n      role=\"img\"\n      aria-label={label}\n      className={[styles.rotator, styles[size], className]\n        .filter(Boolean)\n        .join(\" \")}\n      style={transitionStyle}\n      onMouseEnter={(event) => {\n        if (pauseOnHover) setIsPaused(true);\n        onMouseEnter?.(event);\n      }}\n      onMouseLeave={(event) => {\n        if (pauseOnHover) setIsPaused(false);\n        onMouseLeave?.(event);\n      }}\n      onFocus={(event) => {\n        if (pauseOnHover) setIsPaused(true);\n        onFocus?.(event);\n      }}\n      onBlur={(event) => {\n        if (pauseOnHover) setIsPaused(false);\n        onBlur?.(event);\n      }}\n      {...props}\n    >\n      {sources.map((src, index) => (\n        <Avatar\n          key={`${src}-${index}`}\n          name={name}\n          src={src}\n          alt=\"\"\n          size={size}\n          aria-hidden=\"true\"\n          className={[\n            styles.layer,\n            index === currentIndex ? styles.active : null,\n          ]\n            .filter(Boolean)\n            .join(\" \")}\n        />\n      ))}\n    </span>\n  );\n}\n"],"mappings":";;;;;AAsCA,SAAS,EAAW,GAAe,GAAgB;AAEjD,QADI,KAAU,IAAU,KACf,IAAQ,IAAU,KAAU;;AAGvC,SAAS,IAA0B;CACjC,IAAM,CAAC,GAAsB,KAA2B,EAAS,GAAM;AAavE,QAXA,QAAgB;AACd,MAAI,OAAO,SAAW,OAAe,CAAC,OAAO,WAAY;EAEzD,IAAM,IAAQ,OAAO,WAAW,mCAAmC;AACnE,IAAwB,EAAM,QAAQ;EAEtC,IAAM,UAAqB,EAAwB,EAAM,QAAQ;AAEjE,SADA,EAAM,mBAAmB,UAAU,EAAa,QACnC,EAAM,sBAAsB,UAAU,EAAa;IAC/D,EAAE,CAAC,EAEC;;AAST,SAAgB,EAAc,EAC5B,UAAO,IACP,aAAU,EAAE,EACZ,QACA,UAAO,MACP,UACA,cAAW,KACX,wBAAqB,KACrB,kBAAe,IACf,gBACA,wBAAqB,GACrB,kBACA,cACA,UACA,iBACA,iBACA,YACA,WACA,GAAG,KACkB;CACrB,IAAM,IAAU,QACR,EAAQ,KAAK,MAAQ,EAAI,MAAM,CAAC,CAAC,OAAO,QAAQ,EACtD,CAAC,EAAQ,CACV,EACK,IAAe,MAAgB,KAAA,GAC/B,CAAC,GAAe,KAAoB,EAAS,EAAmB,EAChE,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,IAAuB,GAAyB,EAChD,IAAe,EACnB,IAAe,IAAc,GAC7B,EAAQ,OACT;AAwBD,KAtBA,QAAgB;AAGd,MAFI,EAAQ,UAAU,KAClB,KAAY,KACZ,KAAY,EAAsB;EAEtC,IAAM,IAAQ,OAAO,kBAAkB;GACrC,IAAM,IAAY,EAAW,IAAe,GAAG,EAAQ,OAAO;AAE9D,GADK,KAAc,EAAiB,EAAU,EAC9C,IAAgB,EAAU;KACzB,EAAS;AAEZ,eAAa,OAAO,cAAc,EAAM;IACvC;EACD;EACA;EACA;EACA;EACA;EACA;EACA,EAAQ;EACT,CAAC,EAEE,EAAQ,WAAW,EACrB,QACE,kBAAC,GAAD;EACQ;EACD;EACC;EACC;EACI;EACJ;EACP,GAAI;EACJ,CAAA;CAIN,IAAM,IAAQ,KAAO,KAAQ,UACvB,IAAkB;EACtB,GAAG;EACH,6BAA6B,GAAG,KAAK,IAAI,GAAG,EAAmB,CAAC;EACjE;AAED,QACE,kBAAC,QAAD;EACE,MAAK;EACL,cAAY;EACZ,WAAW;GAAC,EAAO;GAAS,EAAO;GAAO;GAAU,CACjD,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,OAAO;EACP,eAAe,MAAU;AAEvB,GADI,KAAc,EAAY,GAAK,EACnC,IAAe,EAAM;;EAEvB,eAAe,MAAU;AAEvB,GADI,KAAc,EAAY,GAAM,EACpC,IAAe,EAAM;;EAEvB,UAAU,MAAU;AAElB,GADI,KAAc,EAAY,GAAK,EACnC,IAAU,EAAM;;EAElB,SAAS,MAAU;AAEjB,GADI,KAAc,EAAY,GAAM,EACpC,IAAS,EAAM;;EAEjB,GAAI;YAEH,EAAQ,KAAK,GAAK,MACjB,kBAAC,GAAD;GAEQ;GACD;GACL,KAAI;GACE;GACN,eAAY;GACZ,WAAW,CACT,EAAO,OACP,MAAU,IAAe,EAAO,SAAS,KAC1C,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;GACZ,EAZK,GAAG,EAAI,GAAG,IAYf,CACF;EACG,CAAA"}
+{"version":3,"file":"AvatarRotator.js","names":[],"sources":["../../../src/components/AvatarRotator/AvatarRotator.tsx"],"sourcesContent":["import { type CSSProperties, type HTMLAttributes, useEffect, useMemo, useState } from 'react';\n\nimport { Avatar, type AvatarColor, type AvatarSize } from '../Avatar';\n\nimport styles from './AvatarRotator.module.css';\n\nexport interface AvatarRotatorProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Full name used for the accessible label and initials fallback. */\n  name?: string;\n  /** Image URLs to rotate through. */\n  avatars?: string[];\n  /** Accessible label. Defaults to `name`. */\n  alt?: string;\n  /** Size of the avatar. Defaults to `\"md\"`. */\n  size?: AvatarSize;\n  /** Fallback initials color when no avatar image is available. */\n  color?: AvatarColor;\n  /** Time between avatar changes in milliseconds. Defaults to `3000`. */\n  interval?: number;\n  /** Crossfade duration in milliseconds. Defaults to `240`. */\n  transitionDuration?: number;\n  /** Pause automatic rotation while hovered or focused. Defaults to `true`. */\n  pauseOnHover?: boolean;\n  /**\n   * Controlled active avatar index.\n   * When omitted the rotator manages index state internally.\n   */\n  activeIndex?: number;\n  /** Initial active avatar index for uncontrolled usage. Defaults to `0`. */\n  defaultActiveIndex?: number;\n  /** Called when the active avatar changes. */\n  onIndexChange?: (index: number) => void;\n}\n\nfunction clampIndex(index: number, length: number) {\n  if (length <= 0) {\n    return 0;\n  }\n\n  return ((index % length) + length) % length;\n}\n\nfunction usePrefersReducedMotion() {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    if (typeof window === 'undefined' || !window.matchMedia) {\n      return;\n    }\n\n    const query = window.matchMedia('(prefers-reduced-motion: reduce)');\n\n    setPrefersReducedMotion(query.matches);\n\n    const handleChange = () => setPrefersReducedMotion(query.matches);\n\n    query.addEventListener?.('change', handleChange);\n\n    return () => query.removeEventListener?.('change', handleChange);\n  }, []);\n\n  return prefersReducedMotion;\n}\n\n/**\n * Single avatar surface that rotates through multiple image sources.\n *\n * Keeps `Avatar` focused on rendering one identity, while this component owns\n * timing, crossfade animation, and pause behavior.\n */\nexport const AvatarRotator = ({\n  name = '',\n  avatars = [],\n  alt,\n  size = 'md',\n  color,\n  interval = 3000,\n  transitionDuration = 240,\n  pauseOnHover = true,\n  activeIndex,\n  defaultActiveIndex = 0,\n  onIndexChange,\n  className,\n  style,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  ...props\n}: AvatarRotatorProps) => {\n  const sources = useMemo(() => avatars.map((src) => src.trim()).filter(Boolean), [avatars]);\n  const isControlled = activeIndex !== undefined;\n  const [internalIndex, setInternalIndex] = useState(defaultActiveIndex);\n  const [isPaused, setIsPaused] = useState(false);\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const currentIndex = clampIndex(isControlled ? activeIndex : internalIndex, sources.length);\n\n  useEffect(() => {\n    if (sources.length <= 1) {\n      return;\n    }\n\n    if (interval <= 0) {\n      return;\n    }\n\n    if (isPaused || prefersReducedMotion) {\n      return;\n    }\n\n    const timer = window.setInterval(() => {\n      const nextIndex = clampIndex(currentIndex + 1, sources.length);\n\n      if (!isControlled) {\n        setInternalIndex(nextIndex);\n      }\n\n      onIndexChange?.(nextIndex);\n    }, interval);\n\n    return () => window.clearInterval(timer);\n  }, [\n    currentIndex,\n    interval,\n    isControlled,\n    isPaused,\n    onIndexChange,\n    prefersReducedMotion,\n    sources.length,\n  ]);\n\n  if (sources.length === 0) {\n    return (\n      <Avatar\n        name={name}\n        alt={alt}\n        size={size}\n        color={color}\n        className={className}\n        style={style}\n        {...props}\n      />\n    );\n  }\n\n  const label = alt ?? name ?? 'Avatar';\n  const transitionStyle = {\n    ...style,\n    '--avatar-rotator-duration': `${Math.max(0, transitionDuration)}ms`,\n  } as CSSProperties;\n\n  return (\n    <span\n      role=\"img\"\n      aria-label={label}\n      className={[styles.rotator, styles[size], className].filter(Boolean).join(' ')}\n      style={transitionStyle}\n      onMouseEnter={(event) => {\n        if (pauseOnHover) {\n          setIsPaused(true);\n        }\n\n        onMouseEnter?.(event);\n      }}\n      onMouseLeave={(event) => {\n        if (pauseOnHover) {\n          setIsPaused(false);\n        }\n\n        onMouseLeave?.(event);\n      }}\n      onFocus={(event) => {\n        if (pauseOnHover) {\n          setIsPaused(true);\n        }\n\n        onFocus?.(event);\n      }}\n      onBlur={(event) => {\n        if (pauseOnHover) {\n          setIsPaused(false);\n        }\n\n        onBlur?.(event);\n      }}\n      {...props}\n    >\n      {sources.map((src, index) => (\n        <Avatar\n          key={`${src}-${index}`}\n          name={name}\n          src={src}\n          alt=\"\"\n          size={size}\n          aria-hidden=\"true\"\n          className={[styles.layer, index === currentIndex ? styles.active : null]\n            .filter(Boolean)\n            .join(' ')}\n        />\n      ))}\n    </span>\n  );\n};\n"],"mappings":";;;;;AAkCA,SAAS,EAAW,GAAe,GAAgB;CAKjD,OAJI,KAAU,IACL,KAGA,IAAQ,IAAU,KAAU;AACvC;AAEA,SAAS,IAA0B;CACjC,IAAM,CAAC,GAAsB,KAA2B,EAAS,EAAK;CAkBtE,OAhBA,QAAgB;EACd,IAAI,OAAO,SAAW,OAAe,CAAC,OAAO,YAC3C;EAGF,IAAM,IAAQ,OAAO,WAAW,kCAAkC;EAElE,EAAwB,EAAM,OAAO;EAErC,IAAM,UAAqB,EAAwB,EAAM,OAAO;EAIhE,OAFA,EAAM,mBAAmB,UAAU,CAAY,SAElC,EAAM,sBAAsB,UAAU,CAAY;CACjE,GAAG,CAAC,CAAC,GAEE;AACT;AAQA,IAAa,KAAiB,EAC5B,UAAO,IACP,aAAU,CAAC,GACX,QACA,UAAO,MACP,UACA,cAAW,KACX,wBAAqB,KACrB,kBAAe,IACf,gBACA,wBAAqB,GACrB,kBACA,cACA,UACA,iBACA,iBACA,YACA,WACA,GAAG,QACqB;CACxB,IAAM,IAAU,QAAc,EAAQ,KAAK,MAAQ,EAAI,KAAK,CAAC,EAAE,OAAO,OAAO,GAAG,CAAC,CAAO,CAAC,GACnF,IAAe,MAAgB,KAAA,GAC/B,CAAC,GAAe,KAAoB,EAAS,CAAkB,GAC/D,CAAC,GAAU,KAAe,EAAS,EAAK,GACxC,IAAuB,EAAwB,GAC/C,IAAe,EAAW,IAAe,IAAc,GAAe,EAAQ,MAAM;CAoC1F,IAlCA,QAAgB;EASd,IARI,EAAQ,UAAU,KAIlB,KAAY,KAIZ,KAAY,GACd;EAGF,IAAM,IAAQ,OAAO,kBAAkB;GACrC,IAAM,IAAY,EAAW,IAAe,GAAG,EAAQ,MAAM;GAM7D,AAJK,KACH,EAAiB,CAAS,GAG5B,IAAgB,CAAS;EAC3B,GAAG,CAAQ;EAEX,aAAa,OAAO,cAAc,CAAK;CACzC,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA,EAAQ;CACV,CAAC,GAEG,EAAQ,WAAW,GACrB,OACE,kBAAC,GAAD;EACQ;EACD;EACC;EACC;EACI;EACJ;EACP,GAAI;CACL,CAAA;CAIL,IAAM,IAAQ,KAAO,KAAQ,UACvB,IAAkB;EACtB,GAAG;EACH,6BAA6B,GAAG,KAAK,IAAI,GAAG,CAAkB,EAAE;CAClE;CAEA,OACE,kBAAC,QAAD;EACE,MAAK;EACL,cAAY;EACZ,WAAW;GAAC,EAAO;GAAS,EAAO;GAAO;EAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;EAC7E,OAAO;EACP,eAAe,MAAU;GAKvB,AAJI,KACF,EAAY,EAAI,GAGlB,IAAe,CAAK;EACtB;EACA,eAAe,MAAU;GAKvB,AAJI,KACF,EAAY,EAAK,GAGnB,IAAe,CAAK;EACtB;EACA,UAAU,MAAU;GAKlB,AAJI,KACF,EAAY,EAAI,GAGlB,IAAU,CAAK;EACjB;EACA,SAAS,MAAU;GAKjB,AAJI,KACF,EAAY,EAAK,GAGnB,IAAS,CAAK;EAChB;EACA,GAAI;YAEH,EAAQ,KAAK,GAAK,MACjB,kBAAC,GAAD;GAEQ;GACD;GACL,KAAI;GACE;GACN,eAAY;GACZ,WAAW,CAAC,EAAO,OAAO,MAAU,IAAe,EAAO,SAAS,IAAI,EACpE,OAAO,OAAO,EACd,KAAK,GAAG;EACZ,GATM,GAAG,EAAI,GAAG,GAShB,CACF;CACG,CAAA;AAEV"}

package/dist/components/AvatarRotator/index.d.ts

@@ -1,2 +1,2 @@
-export { AvatarRotator } from './AvatarRotator';
 export type { AvatarRotatorProps } from './AvatarRotator';
+export { AvatarRotator } from './AvatarRotator';

package/dist/components/AvatarRotator.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./AvatarRotator/AvatarRotator.cjs`);exports.AvatarRotator=e.AvatarRotator;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./AvatarRotator/AvatarRotator.cjs");exports.AvatarRotator=e.AvatarRotator;

package/dist/components/Badge/Badge.cjs

@@ -1,2 +1,2 @@
-const e=require(`./Badge.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({variant:n=`accent`,dot:r=!1,children:i,anchor:a,className:o,...s}){let c=(0,t.jsx)(`span`,{className:[e.default.badge,e.default[n],r?e.default.dot:null,a?e.default.anchored:null,o].filter(Boolean).join(` `),...s,children:!r&&i});return a?(0,t.jsxs)(`span`,{className:e.default.wrapper,children:[a,c]}):c}exports.Badge=n;
+const e=require("./Badge.module.css.cjs");let t=require("react/jsx-runtime");var n=({variant:n=`accent`,dot:r=!1,children:i,anchor:a,className:o,...s})=>{let c=(0,t.jsx)(`span`,{className:[e.default.badge,e.default[n],r?e.default.dot:null,a?e.default.anchored:null,o].filter(Boolean).join(` `),...s,children:!r&&i});return a?(0,t.jsxs)(`span`,{className:e.default.wrapper,children:[a,c]}):c};exports.Badge=n;
 //# sourceMappingURL=Badge.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.cjs","names":[],"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Badge.module.css\";\n\nexport type BadgeVariant = \"accent\" | \"success\" | \"warning\" | \"error\" | \"neutral\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Visual style. Defaults to `\"accent\"`.\n   * - `accent`  — blue, for counts and highlights.\n   * - `success` — green, for positive status.\n   * - `warning` — yellow, for cautionary status.\n   * - `error`   — red, for failures or urgent counts.\n   * - `neutral` — gray, for inactive or secondary counts.\n   */\n  variant?: BadgeVariant;\n  /**\n   * When true, renders a small dot with no label — used for unread/online indicators.\n   * The `children` are ignored in dot mode.\n   */\n  dot?: boolean;\n  /** Number or short text to display. Keep to 1–3 characters. */\n  children?: ReactNode;\n  /**\n   * When provided, the badge is absolutely positioned over this child element\n   * at the top-right corner. The wrapper becomes `position: relative`.\n   */\n  anchor?: ReactNode;\n}\n\n/**\n * Counter or status indicator, optionally overlaid on another element.\n *\n * @see https://developer.gnome.org/hig/patterns/feedback/badges.html\n */\nexport function Badge({\n  variant = \"accent\",\n  dot = false,\n  children,\n  anchor,\n  className,\n  ...props\n}: BadgeProps) {\n  const badgeEl = (\n    <span\n      className={[\n        styles.badge,\n        styles[variant],\n        dot ? styles.dot : null,\n        anchor ? styles.anchored : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {!dot && children}\n    </span>\n  );\n\n  if (anchor) {\n    return (\n      <span className={styles.wrapper}>\n        {anchor}\n        {badgeEl}\n      </span>\n    );\n  }\n\n  return badgeEl;\n}\n"],"mappings":"6EAkCA,SAAgB,EAAM,CACpB,UAAU,SACV,MAAM,GACN,WACA,SACA,YACA,GAAG,GACU,CACb,IAAM,GACJ,EAAA,EAAA,KAAC,OAAD,CACE,UAAW,CACT,EAAA,QAAO,MACP,EAAA,QAAO,GACP,EAAM,EAAA,QAAO,IAAM,KACnB,EAAS,EAAA,QAAO,SAAW,KAC3B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAEH,CAAC,GAAO,EACJ,CAAA,CAYT,OATI,GAEA,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAxB,CACG,EACA,EACI,GAIJ"}
+{"version":3,"file":"Badge.cjs","names":[],"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Badge.module.css';\n\nexport type BadgeVariant = 'accent' | 'success' | 'warning' | 'error' | 'neutral';\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Visual style. Defaults to `\"accent\"`.\n   * - `accent`  — blue, for counts and highlights.\n   * - `success` — green, for positive status.\n   * - `warning` — yellow, for cautionary status.\n   * - `error`   — red, for failures or urgent counts.\n   * - `neutral` — gray, for inactive or secondary counts.\n   */\n  variant?: BadgeVariant;\n  /**\n   * When true, renders a small dot with no label — used for unread/online indicators.\n   * The `children` are ignored in dot mode.\n   */\n  dot?: boolean;\n  /** Number or short text to display. Keep to 1–3 characters. */\n  children?: ReactNode;\n  /**\n   * When provided, the badge is absolutely positioned over this child element\n   * at the top-right corner. The wrapper becomes `position: relative`.\n   */\n  anchor?: ReactNode;\n}\n\n/**\n * Counter or status indicator, optionally overlaid on another element.\n *\n * @see https://developer.gnome.org/hig/patterns/feedback/badges.html\n */\nexport const Badge = ({\n  variant = 'accent',\n  dot = false,\n  children,\n  anchor,\n  className,\n  ...props\n}: BadgeProps) => {\n  const badgeEl = (\n    <span\n      className={[\n        styles.badge,\n        styles[variant],\n        dot ? styles.dot : null,\n        anchor ? styles.anchored : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {!dot && children}\n    </span>\n  );\n\n  if (anchor) {\n    return (\n      <span className={styles.wrapper}>\n        {anchor}\n        {badgeEl}\n      </span>\n    );\n  }\n\n  return badgeEl;\n};\n"],"mappings":"6EAmCA,IAAa,GAAS,CACpB,UAAU,SACV,MAAM,GACN,WACA,SACA,YACA,GAAG,KACa,CAChB,IAAM,GACJ,EAAA,EAAA,KAAC,OAAD,CACE,UAAW,CACT,EAAA,QAAO,MACP,EAAA,QAAO,GACP,EAAM,EAAA,QAAO,IAAM,KACnB,EAAS,EAAA,QAAO,SAAW,KAC3B,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,WAEH,CAAC,GAAO,CACL,CAAA,EAYR,OATI,GAEA,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAxB,CACG,EACA,CACG,IAIH,CACT"}

package/dist/components/Badge/Badge.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export type BadgeVariant = "accent" | "success" | "warning" | "error" | "neutral";
+export type BadgeVariant = 'accent' | 'success' | 'warning' | 'error' | 'neutral';
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /**
      * Visual style. Defaults to `"accent"`.
@@ -28,4 +28,4 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  *
  * @see https://developer.gnome.org/hig/patterns/feedback/badges.html
  */
-export declare function Badge({ variant, dot, children, anchor, className, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ variant, dot, children, anchor, className, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Badge/Badge.js

@@ -1,7 +1,7 @@
 import e from "./Badge.module.css.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/Badge/Badge.tsx
-function r({ variant: r = "accent", dot: i = !1, children: a, anchor: o, className: s, ...c }) {
+var r = ({ variant: r = "accent", dot: i = !1, children: a, anchor: o, className: s, ...c }) => {
 	let l = /* @__PURE__ */ t("span", {
 		className: [
 			e.badge,
@@ -17,7 +17,7 @@ function r({ variant: r = "accent", dot: i = !1, children: a, anchor: o, classNa
 		className: e.wrapper,
 		children: [o, l]
 	}) : l;
-}
+};
 //#endregion
 export { r as Badge };
 

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":[],"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Badge.module.css\";\n\nexport type BadgeVariant = \"accent\" | \"success\" | \"warning\" | \"error\" | \"neutral\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Visual style. Defaults to `\"accent\"`.\n   * - `accent`  — blue, for counts and highlights.\n   * - `success` — green, for positive status.\n   * - `warning` — yellow, for cautionary status.\n   * - `error`   — red, for failures or urgent counts.\n   * - `neutral` — gray, for inactive or secondary counts.\n   */\n  variant?: BadgeVariant;\n  /**\n   * When true, renders a small dot with no label — used for unread/online indicators.\n   * The `children` are ignored in dot mode.\n   */\n  dot?: boolean;\n  /** Number or short text to display. Keep to 1–3 characters. */\n  children?: ReactNode;\n  /**\n   * When provided, the badge is absolutely positioned over this child element\n   * at the top-right corner. The wrapper becomes `position: relative`.\n   */\n  anchor?: ReactNode;\n}\n\n/**\n * Counter or status indicator, optionally overlaid on another element.\n *\n * @see https://developer.gnome.org/hig/patterns/feedback/badges.html\n */\nexport function Badge({\n  variant = \"accent\",\n  dot = false,\n  children,\n  anchor,\n  className,\n  ...props\n}: BadgeProps) {\n  const badgeEl = (\n    <span\n      className={[\n        styles.badge,\n        styles[variant],\n        dot ? styles.dot : null,\n        anchor ? styles.anchored : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {!dot && children}\n    </span>\n  );\n\n  if (anchor) {\n    return (\n      <span className={styles.wrapper}>\n        {anchor}\n        {badgeEl}\n      </span>\n    );\n  }\n\n  return badgeEl;\n}\n"],"mappings":";;;AAkCA,SAAgB,EAAM,EACpB,aAAU,UACV,SAAM,IACN,aACA,WACA,cACA,GAAG,KACU;CACb,IAAM,IACJ,kBAAC,QAAD;EACE,WAAW;GACT,EAAO;GACP,EAAO;GACP,IAAM,EAAO,MAAM;GACnB,IAAS,EAAO,WAAW;GAC3B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAEH,CAAC,KAAO;EACJ,CAAA;AAYT,QATI,IAEA,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACG,GACA,EACI;MAIJ"}
+{"version":3,"file":"Badge.js","names":[],"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Badge.module.css';\n\nexport type BadgeVariant = 'accent' | 'success' | 'warning' | 'error' | 'neutral';\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Visual style. Defaults to `\"accent\"`.\n   * - `accent`  — blue, for counts and highlights.\n   * - `success` — green, for positive status.\n   * - `warning` — yellow, for cautionary status.\n   * - `error`   — red, for failures or urgent counts.\n   * - `neutral` — gray, for inactive or secondary counts.\n   */\n  variant?: BadgeVariant;\n  /**\n   * When true, renders a small dot with no label — used for unread/online indicators.\n   * The `children` are ignored in dot mode.\n   */\n  dot?: boolean;\n  /** Number or short text to display. Keep to 1–3 characters. */\n  children?: ReactNode;\n  /**\n   * When provided, the badge is absolutely positioned over this child element\n   * at the top-right corner. The wrapper becomes `position: relative`.\n   */\n  anchor?: ReactNode;\n}\n\n/**\n * Counter or status indicator, optionally overlaid on another element.\n *\n * @see https://developer.gnome.org/hig/patterns/feedback/badges.html\n */\nexport const Badge = ({\n  variant = 'accent',\n  dot = false,\n  children,\n  anchor,\n  className,\n  ...props\n}: BadgeProps) => {\n  const badgeEl = (\n    <span\n      className={[\n        styles.badge,\n        styles[variant],\n        dot ? styles.dot : null,\n        anchor ? styles.anchored : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {!dot && children}\n    </span>\n  );\n\n  if (anchor) {\n    return (\n      <span className={styles.wrapper}>\n        {anchor}\n        {badgeEl}\n      </span>\n    );\n  }\n\n  return badgeEl;\n};\n"],"mappings":";;;AAmCA,IAAa,KAAS,EACpB,aAAU,UACV,SAAM,IACN,aACA,WACA,cACA,GAAG,QACa;CAChB,IAAM,IACJ,kBAAC,QAAD;EACE,WAAW;GACT,EAAO;GACP,EAAO;GACP,IAAM,EAAO,MAAM;GACnB,IAAS,EAAO,WAAW;GAC3B;EACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;EACX,GAAI;YAEH,CAAC,KAAO;CACL,CAAA;CAYR,OATI,IAEA,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACG,GACA,CACG;MAIH;AACT"}

package/dist/components/Badge/Badge.module.css.cjs

@@ -1,2 +1,2 @@
-var e={wrapper:`_wrapper_1slnu_3`,badge:`_badge_1slnu_11`,anchored:`_anchored_1slnu_33`,dot:`_dot_1slnu_42`,accent:`_accent_1slnu_57`,success:`_success_1slnu_62`,warning:`_warning_1slnu_67`,error:`_error_1slnu_72`,neutral:`_neutral_1slnu_77`};exports.default=e;
+var e={wrapper:`_wrapper_dy5mc_3`,badge:`_badge_dy5mc_11`,anchored:`_anchored_dy5mc_33`,dot:`_dot_dy5mc_42`,accent:`_accent_dy5mc_57`,success:`_success_dy5mc_62`,warning:`_warning_dy5mc_67`,error:`_error_dy5mc_72`,neutral:`_neutral_dy5mc_77`};exports.default=e;
 //# sourceMappingURL=Badge.module.css.cjs.map

package/dist/components/Badge/Badge.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.module.css.cjs","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":["/* ─── Wrapper (when used with anchor) ──────────────────────────────────────── */\n\n.wrapper {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n/* ─── Base badge ───────────────────────────────────────────────────────────── */\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n\n  font-family: var(--gnome-font-family);\n  font-size: 0.6875rem;        /* 11px — keeps it compact */\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: 1;\n\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: var(--gnome-radius-pill);\n\n  /* Thin white ring to separate from any background */\n  box-shadow: 0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n}\n\n/* ─── Anchored position (top-right of parent) ──────────────────────────────── */\n\n.anchored {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  z-index: 1;\n}\n\n/* ─── Dot variant ──────────────────────────────────────────────────────────── */\n\n.dot {\n  min-width: 10px;\n  width: 10px;\n  height: 10px;\n  padding: 0;\n  border-radius: var(--gnome-radius-pill);\n}\n\n.dot.anchored {\n  top: -2px;\n  right: -2px;\n}\n\n/* ─── Color variants ───────────────────────────────────────────────────────── */\n\n.accent {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n}\n\n.success {\n  background-color: var(--gnome-success-bg-color, #2ec27e);\n  color: var(--gnome-success-fg-color, #ffffff);\n}\n\n.warning {\n  background-color: var(--gnome-warning-bg-color, #f6d32d);\n  color: var(--gnome-warning-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.error {\n  background-color: var(--gnome-error-bg-color, #e01b24);\n  color: var(--gnome-error-fg-color, #ffffff);\n}\n\n.neutral {\n  background-color: var(--gnome-light-4, #c0bfbc);\n  color: rgba(0, 0, 0, 0.8);\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .badge {\n    box-shadow: 0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .neutral {\n    background-color: var(--gnome-dark-2, #5e5c64);\n    color: rgba(255, 255, 255, 0.87);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Badge.module.css.cjs","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":["/* ─── Wrapper (when used with anchor) ──────────────────────────────────────── */\n\n.wrapper {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n/* ─── Base badge ───────────────────────────────────────────────────────────── */\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n\n  font-family: var(--gnome-font-family);\n  font-size: 0.6875rem; /* 11px — keeps it compact */\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: 1;\n\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: var(--gnome-radius-pill);\n\n  /* Thin white ring to separate from any background */\n  box-shadow: 0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n}\n\n/* ─── Anchored position (top-right of parent) ──────────────────────────────── */\n\n.anchored {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  z-index: 1;\n}\n\n/* ─── Dot variant ──────────────────────────────────────────────────────────── */\n\n.dot {\n  min-width: 10px;\n  width: 10px;\n  height: 10px;\n  padding: 0;\n  border-radius: var(--gnome-radius-pill);\n}\n\n.dot.anchored {\n  top: -2px;\n  right: -2px;\n}\n\n/* ─── Color variants ───────────────────────────────────────────────────────── */\n\n.accent {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n}\n\n.success {\n  background-color: var(--gnome-success-bg-color, #2ec27e);\n  color: var(--gnome-success-fg-color, #ffffff);\n}\n\n.warning {\n  background-color: var(--gnome-warning-bg-color, #f6d32d);\n  color: var(--gnome-warning-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.error {\n  background-color: var(--gnome-error-bg-color, #e01b24);\n  color: var(--gnome-error-fg-color, #ffffff);\n}\n\n.neutral {\n  background-color: var(--gnome-light-4, #c0bfbc);\n  color: rgba(0, 0, 0, 0.8);\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .badge {\n    box-shadow: 0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .neutral {\n    background-color: var(--gnome-dark-2, #5e5c64);\n    color: rgba(255, 255, 255, 0.87);\n  }\n}\n"],"mappings":""}

package/dist/components/Badge/Badge.module.css.js

@@ -1,13 +1,13 @@
 var e = {
-	wrapper: "_wrapper_1slnu_3",
-	badge: "_badge_1slnu_11",
-	anchored: "_anchored_1slnu_33",
-	dot: "_dot_1slnu_42",
-	accent: "_accent_1slnu_57",
-	success: "_success_1slnu_62",
-	warning: "_warning_1slnu_67",
-	error: "_error_1slnu_72",
-	neutral: "_neutral_1slnu_77"
+	wrapper: "_wrapper_dy5mc_3",
+	badge: "_badge_dy5mc_11",
+	anchored: "_anchored_dy5mc_33",
+	dot: "_dot_dy5mc_42",
+	accent: "_accent_dy5mc_57",
+	success: "_success_dy5mc_62",
+	warning: "_warning_dy5mc_67",
+	error: "_error_dy5mc_72",
+	neutral: "_neutral_dy5mc_77"
 };
 //#endregion
 export { e as default };

package/dist/components/Badge/Badge.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.module.css.js","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":["/* ─── Wrapper (when used with anchor) ──────────────────────────────────────── */\n\n.wrapper {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n/* ─── Base badge ───────────────────────────────────────────────────────────── */\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n\n  font-family: var(--gnome-font-family);\n  font-size: 0.6875rem;        /* 11px — keeps it compact */\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: 1;\n\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: var(--gnome-radius-pill);\n\n  /* Thin white ring to separate from any background */\n  box-shadow: 0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n}\n\n/* ─── Anchored position (top-right of parent) ──────────────────────────────── */\n\n.anchored {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  z-index: 1;\n}\n\n/* ─── Dot variant ──────────────────────────────────────────────────────────── */\n\n.dot {\n  min-width: 10px;\n  width: 10px;\n  height: 10px;\n  padding: 0;\n  border-radius: var(--gnome-radius-pill);\n}\n\n.dot.anchored {\n  top: -2px;\n  right: -2px;\n}\n\n/* ─── Color variants ───────────────────────────────────────────────────────── */\n\n.accent {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n}\n\n.success {\n  background-color: var(--gnome-success-bg-color, #2ec27e);\n  color: var(--gnome-success-fg-color, #ffffff);\n}\n\n.warning {\n  background-color: var(--gnome-warning-bg-color, #f6d32d);\n  color: var(--gnome-warning-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.error {\n  background-color: var(--gnome-error-bg-color, #e01b24);\n  color: var(--gnome-error-fg-color, #ffffff);\n}\n\n.neutral {\n  background-color: var(--gnome-light-4, #c0bfbc);\n  color: rgba(0, 0, 0, 0.8);\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .badge {\n    box-shadow: 0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .neutral {\n    background-color: var(--gnome-dark-2, #5e5c64);\n    color: rgba(255, 255, 255, 0.87);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Badge.module.css.js","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":["/* ─── Wrapper (when used with anchor) ──────────────────────────────────────── */\n\n.wrapper {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n/* ─── Base badge ───────────────────────────────────────────────────────────── */\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n\n  font-family: var(--gnome-font-family);\n  font-size: 0.6875rem; /* 11px — keeps it compact */\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: 1;\n\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: var(--gnome-radius-pill);\n\n  /* Thin white ring to separate from any background */\n  box-shadow: 0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n}\n\n/* ─── Anchored position (top-right of parent) ──────────────────────────────── */\n\n.anchored {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  z-index: 1;\n}\n\n/* ─── Dot variant ──────────────────────────────────────────────────────────── */\n\n.dot {\n  min-width: 10px;\n  width: 10px;\n  height: 10px;\n  padding: 0;\n  border-radius: var(--gnome-radius-pill);\n}\n\n.dot.anchored {\n  top: -2px;\n  right: -2px;\n}\n\n/* ─── Color variants ───────────────────────────────────────────────────────── */\n\n.accent {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n}\n\n.success {\n  background-color: var(--gnome-success-bg-color, #2ec27e);\n  color: var(--gnome-success-fg-color, #ffffff);\n}\n\n.warning {\n  background-color: var(--gnome-warning-bg-color, #f6d32d);\n  color: var(--gnome-warning-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.error {\n  background-color: var(--gnome-error-bg-color, #e01b24);\n  color: var(--gnome-error-fg-color, #ffffff);\n}\n\n.neutral {\n  background-color: var(--gnome-light-4, #c0bfbc);\n  color: rgba(0, 0, 0, 0.8);\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .badge {\n    box-shadow: 0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .neutral {\n    background-color: var(--gnome-dark-2, #5e5c64);\n    color: rgba(255, 255, 255, 0.87);\n  }\n}\n"],"mappings":""}

package/dist/components/Badge/index.d.ts

@@ -1,2 +1,2 @@
-export { Badge } from './Badge';
 export type { BadgeProps, BadgeVariant } from './Badge';
+export { Badge } from './Badge';

package/dist/components/Badge.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Badge/Badge.cjs`);exports.Badge=e.Badge;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./Badge/Badge.cjs");exports.Badge=e.Badge;

package/dist/components/Banner/Banner.cjs

@@ -1,2 +1,2 @@
-const e=require(`./Banner.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({variant:n=`info`,children:r,actionLabel:i,onAction:a,dismissible:o=!1,onDismiss:s,className:c,...l}){return(0,t.jsxs)(`div`,{role:`status`,"aria-live":`polite`,className:[e.default.banner,e.default[n],c].filter(Boolean).join(` `),...l,children:[(0,t.jsx)(`span`,{className:e.default.message,children:r}),(i||o)&&(0,t.jsxs)(`span`,{className:e.default.actions,children:[i&&(0,t.jsx)(`button`,{type:`button`,className:[e.default.actionBtn,e.default[`actionBtn-${n}`]].filter(Boolean).join(` `),onClick:a,children:i}),o&&(0,t.jsx)(`button`,{type:`button`,className:e.default.dismissBtn,onClick:s,"aria-label":`Dismiss`,children:(0,t.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,"aria-hidden":`true`,fill:`currentColor`,children:(0,t.jsx)(`path`,{d:`M3.293 3.293a1 1 0 011.414 0L8 6.586l3.293-3.293a1 1 0 111.414 1.414L9.414 8l3.293 3.293a1 1 0 01-1.414 1.414L8 9.414l-3.293 3.293a1 1 0 01-1.414-1.414L6.586 8 3.293 4.707a1 1 0 010-1.414z`})})})]})]})}exports.Banner=n;
+const e=require("./Banner.module.css.cjs");let t=require("react/jsx-runtime");var n=({variant:n=`info`,children:r,actionLabel:i,onAction:a,dismissible:o=!1,onDismiss:s,className:c,...l})=>(0,t.jsxs)(`div`,{role:`status`,"aria-live":`polite`,className:[e.default.banner,e.default[n],c].filter(Boolean).join(` `),...l,children:[(0,t.jsx)(`span`,{className:e.default.message,children:r}),(i||o)&&(0,t.jsxs)(`span`,{className:e.default.actions,children:[i&&(0,t.jsx)(`button`,{type:`button`,className:[e.default.actionBtn,e.default[`actionBtn-${n}`]].filter(Boolean).join(` `),onClick:a,children:i}),o&&(0,t.jsx)(`button`,{type:`button`,className:e.default.dismissBtn,onClick:s,"aria-label":`Dismiss`,children:(0,t.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,"aria-hidden":`true`,fill:`currentColor`,children:(0,t.jsx)(`path`,{d:`M3.293 3.293a1 1 0 011.414 0L8 6.586l3.293-3.293a1 1 0 111.414 1.414L9.414 8l3.293 3.293a1 1 0 01-1.414 1.414L8 9.414l-3.293 3.293a1 1 0 01-1.414-1.414L6.586 8 3.293 4.707a1 1 0 010-1.414z`})})})]})]});exports.Banner=n;
 //# sourceMappingURL=Banner.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","names":[],"sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Banner.module.css\";\n\nexport type BannerVariant = \"info\" | \"warning\" | \"error\" | \"success\";\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Visual emphasis level.\n   * - `info` (default) — neutral, accent-colored. Use for tips and notices.\n   * - `warning` — yellow. Use for recoverable problems.\n   * - `error` — red. Use for failures that need attention.\n   * - `success` — green. Use for confirmations.\n   */\n  variant?: BannerVariant;\n  /** The message text. Keep it short — one or two sentences. */\n  children: ReactNode;\n  /**\n   * Label for the optional action button placed at the trailing end.\n   * When provided, `onAction` should also be supplied.\n   */\n  actionLabel?: string;\n  /** Called when the user clicks the action button. */\n  onAction?: () => void;\n  /**\n   * When true a dismiss (×) button is shown at the trailing edge.\n   * Provide `onDismiss` to handle removal from the DOM.\n   */\n  dismissible?: boolean;\n  /** Called when the user clicks the dismiss button. */\n  onDismiss?: () => void;\n}\n\n/**\n * Persistent message strip displayed at the top of a view.\n *\n * Mirrors the Adwaita `AdwBanner` pattern. Use for important information\n * that persists until the user acts or explicitly dismisses it.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Banner.html\n * @see https://developer.gnome.org/hig/patterns/feedback/banners.html\n */\nexport function Banner({\n  variant = \"info\",\n  children,\n  actionLabel,\n  onAction,\n  dismissible = false,\n  onDismiss,\n  className,\n  ...props\n}: BannerProps) {\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      className={[styles.banner, styles[variant], className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      <span className={styles.message}>{children}</span>\n\n      {(actionLabel || dismissible) && (\n        <span className={styles.actions}>\n          {actionLabel && (\n            <button\n              type=\"button\"\n              className={[styles.actionBtn, styles[`actionBtn-${variant}`]]\n                .filter(Boolean)\n                .join(\" \")}\n              onClick={onAction}\n            >\n              {actionLabel}\n            </button>\n          )}\n          {dismissible && (\n            <button\n              type=\"button\"\n              className={styles.dismissBtn}\n              onClick={onDismiss}\n              aria-label=\"Dismiss\"\n            >\n              {/* × close icon */}\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                aria-hidden=\"true\"\n                fill=\"currentColor\"\n              >\n                <path d=\"M3.293 3.293a1 1 0 011.414 0L8 6.586l3.293-3.293a1 1 0 111.414 1.414L9.414 8l3.293 3.293a1 1 0 01-1.414 1.414L8 9.414l-3.293 3.293a1 1 0 01-1.414-1.414L6.586 8 3.293 4.707a1 1 0 010-1.414z\" />\n              </svg>\n            </button>\n          )}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"8EAyCA,SAAgB,EAAO,CACrB,UAAU,OACV,WACA,cACA,WACA,cAAc,GACd,YACA,YACA,GAAG,GACW,CACd,OACE,EAAA,EAAA,MAAC,MAAD,CACE,KAAK,SACL,YAAU,SACV,UAAW,CAAC,EAAA,QAAO,OAAQ,EAAA,QAAO,GAAU,EAAU,CACnD,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WANN,EAQE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,QAAU,WAAgB,CAAA,EAEhD,GAAe,KACf,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAxB,CACG,IACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,CAAC,EAAA,QAAO,UAAW,EAAA,QAAO,aAAa,KAAW,CAC1D,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,QAAS,WAER,EACM,CAAA,CAEV,IACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,WAClB,QAAS,EACT,aAAW,oBAGX,EAAA,EAAA,KAAC,MAAD,CACE,MAAM,KACN,OAAO,KACP,QAAQ,YACR,cAAY,OACZ,KAAK,yBAEL,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,+LAAiM,CAAA,CACrM,CAAA,CACC,CAAA,CAEN,GAEL"}
+{"version":3,"file":"Banner.cjs","names":[],"sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Banner.module.css';\n\nexport type BannerVariant = 'info' | 'warning' | 'error' | 'success';\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Visual emphasis level.\n   * - `info` (default) — neutral, accent-colored. Use for tips and notices.\n   * - `warning` — yellow. Use for recoverable problems.\n   * - `error` — red. Use for failures that need attention.\n   * - `success` — green. Use for confirmations.\n   */\n  variant?: BannerVariant;\n  /** The message text. Keep it short — one or two sentences. */\n  children: ReactNode;\n  /**\n   * Label for the optional action button placed at the trailing end.\n   * When provided, `onAction` should also be supplied.\n   */\n  actionLabel?: string;\n  /** Called when the user clicks the action button. */\n  onAction?: () => void;\n  /**\n   * When true a dismiss (×) button is shown at the trailing edge.\n   * Provide `onDismiss` to handle removal from the DOM.\n   */\n  dismissible?: boolean;\n  /** Called when the user clicks the dismiss button. */\n  onDismiss?: () => void;\n}\n\n/**\n * Persistent message strip displayed at the top of a view.\n *\n * Mirrors the Adwaita `AdwBanner` pattern. Use for important information\n * that persists until the user acts or explicitly dismisses it.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Banner.html\n * @see https://developer.gnome.org/hig/patterns/feedback/banners.html\n */\nexport const Banner = ({\n  variant = 'info',\n  children,\n  actionLabel,\n  onAction,\n  dismissible = false,\n  onDismiss,\n  className,\n  ...props\n}: BannerProps) => {\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      className={[styles.banner, styles[variant], className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      <span className={styles.message}>{children}</span>\n\n      {(actionLabel || dismissible) && (\n        <span className={styles.actions}>\n          {actionLabel && (\n            <button\n              type=\"button\"\n              className={[styles.actionBtn, styles[`actionBtn-${variant}`]]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={onAction}\n            >\n              {actionLabel}\n            </button>\n          )}\n          {dismissible && (\n            <button\n              type=\"button\"\n              className={styles.dismissBtn}\n              onClick={onDismiss}\n              aria-label=\"Dismiss\"\n            >\n              {/* × close icon */}\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                aria-hidden=\"true\"\n                fill=\"currentColor\"\n              >\n                <path d=\"M3.293 3.293a1 1 0 011.414 0L8 6.586l3.293-3.293a1 1 0 111.414 1.414L9.414 8l3.293 3.293a1 1 0 01-1.414 1.414L8 9.414l-3.293 3.293a1 1 0 01-1.414-1.414L6.586 8 3.293 4.707a1 1 0 010-1.414z\" />\n              </svg>\n            </button>\n          )}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"mappings":"8EA0CA,IAAa,GAAU,CACrB,UAAU,OACV,WACA,cACA,WACA,cAAc,GACd,YACA,YACA,GAAG,MAGD,EAAA,EAAA,MAAC,MAAD,CACE,KAAK,SACL,YAAU,SACV,UAAW,CAAC,EAAA,QAAO,OAAQ,EAAA,QAAO,GAAU,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC/E,GAAI,WAJN,EAME,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,QAAU,UAAe,CAAA,GAE/C,GAAe,KACf,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAxB,CACG,IACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,CAAC,EAAA,QAAO,UAAW,EAAA,QAAO,aAAa,IAAU,EACzD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAAS,WAER,CACK,CAAA,EAET,IACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,WAClB,QAAS,EACT,aAAW,oBAGX,EAAA,EAAA,KAAC,MAAD,CACE,MAAM,KACN,OAAO,KACP,QAAQ,YACR,cAAY,OACZ,KAAK,yBAEL,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,8LAAgM,CAAA,CACrM,CAAA,CACC,CAAA,CAEN,GAEL"}

package/dist/components/Banner/Banner.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export type BannerVariant = "info" | "warning" | "error" | "success";
+export type BannerVariant = 'info' | 'warning' | 'error' | 'success';
 export interface BannerProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Visual emphasis level.
@@ -35,4 +35,4 @@ export interface BannerProps extends HTMLAttributes<HTMLDivElement> {
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Banner.html
  * @see https://developer.gnome.org/hig/patterns/feedback/banners.html
  */
-export declare function Banner({ variant, children, actionLabel, onAction, dismissible, onDismiss, className, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;
+export declare const Banner: ({ variant, children, actionLabel, onAction, dismissible, onDismiss, className, ...props }: BannerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Banner/Banner.js

@@ -1,43 +1,41 @@
 import e from "./Banner.module.css.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/Banner/Banner.tsx
-function r({ variant: r = "info", children: i, actionLabel: a, onAction: o, dismissible: s = !1, onDismiss: c, className: l, ...u }) {
-	return /* @__PURE__ */ n("div", {
-		role: "status",
-		"aria-live": "polite",
-		className: [
-			e.banner,
-			e[r],
-			l
-		].filter(Boolean).join(" "),
-		...u,
-		children: [/* @__PURE__ */ t("span", {
-			className: e.message,
-			children: i
-		}), (a || s) && /* @__PURE__ */ n("span", {
-			className: e.actions,
-			children: [a && /* @__PURE__ */ t("button", {
-				type: "button",
-				className: [e.actionBtn, e[`actionBtn-${r}`]].filter(Boolean).join(" "),
-				onClick: o,
-				children: a
-			}), s && /* @__PURE__ */ t("button", {
-				type: "button",
-				className: e.dismissBtn,
-				onClick: c,
-				"aria-label": "Dismiss",
-				children: /* @__PURE__ */ t("svg", {
-					width: "16",
-					height: "16",
-					viewBox: "0 0 16 16",
-					"aria-hidden": "true",
-					fill: "currentColor",
-					children: /* @__PURE__ */ t("path", { d: "M3.293 3.293a1 1 0 011.414 0L8 6.586l3.293-3.293a1 1 0 111.414 1.414L9.414 8l3.293 3.293a1 1 0 01-1.414 1.414L8 9.414l-3.293 3.293a1 1 0 01-1.414-1.414L6.586 8 3.293 4.707a1 1 0 010-1.414z" })
-				})
-			})]
+var r = ({ variant: r = "info", children: i, actionLabel: a, onAction: o, dismissible: s = !1, onDismiss: c, className: l, ...u }) => /* @__PURE__ */ n("div", {
+	role: "status",
+	"aria-live": "polite",
+	className: [
+		e.banner,
+		e[r],
+		l
+	].filter(Boolean).join(" "),
+	...u,
+	children: [/* @__PURE__ */ t("span", {
+		className: e.message,
+		children: i
+	}), (a || s) && /* @__PURE__ */ n("span", {
+		className: e.actions,
+		children: [a && /* @__PURE__ */ t("button", {
+			type: "button",
+			className: [e.actionBtn, e[`actionBtn-${r}`]].filter(Boolean).join(" "),
+			onClick: o,
+			children: a
+		}), s && /* @__PURE__ */ t("button", {
+			type: "button",
+			className: e.dismissBtn,
+			onClick: c,
+			"aria-label": "Dismiss",
+			children: /* @__PURE__ */ t("svg", {
+				width: "16",
+				height: "16",
+				viewBox: "0 0 16 16",
+				"aria-hidden": "true",
+				fill: "currentColor",
+				children: /* @__PURE__ */ t("path", { d: "M3.293 3.293a1 1 0 011.414 0L8 6.586l3.293-3.293a1 1 0 111.414 1.414L9.414 8l3.293 3.293a1 1 0 01-1.414 1.414L8 9.414l-3.293 3.293a1 1 0 01-1.414-1.414L6.586 8 3.293 4.707a1 1 0 010-1.414z" })
+			})
 		})]
-	});
-}
+	})]
+});
 //#endregion
 export { r as Banner };