@fanvue/ui 3.7.2 → 3.9.0

package/dist/cjs/components/FanFollowerCount/FanFollowerCount.cjs

@@ -0,0 +1,64 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const DiamondIcon = require("../Icons/DiamondIcon.cjs");
+const HeartIcon = require("../Icons/HeartIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const compactFormatter = new Intl.NumberFormat("en", {
+  notation: "compact",
+  maximumFractionDigits: 1
+});
+function formatCount(value) {
+  return typeof value === "number" ? compactFormatter.format(value).toLowerCase() : value;
+}
+const FanFollowerCount = React__namespace.forwardRef(
+  ({
+    className,
+    fans = 0,
+    subs = 0,
+    showFans = true,
+    showSubs = true,
+    fansLabel = "Fans",
+    subsLabel = "Subs",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn.cn("inline-flex items-center gap-3", className), ...props, children: [
+      showFans && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(HeartIcon.HeartIcon, { size: 16, filled: true, className: "text-icons-tertiary" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typography-body-small-14px-semibold inline-flex items-center gap-1 text-content-primary", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCount(fans) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: fansLabel })
+        ] })
+      ] }),
+      showSubs && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DiamondIcon.DiamondIcon, { size: 16, filled: true, className: "text-icons-tertiary" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typography-body-small-14px-semibold inline-flex items-center gap-1 text-content-primary", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCount(subs) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: subsLabel })
+        ] })
+      ] })
+    ] });
+  }
+);
+FanFollowerCount.displayName = "FanFollowerCount";
+exports.FanFollowerCount = FanFollowerCount;
+//# sourceMappingURL=FanFollowerCount.cjs.map

package/dist/cjs/components/FanFollowerCount/FanFollowerCount.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FanFollowerCount.cjs","sources":["../../../../src/components/FanFollowerCount/FanFollowerCount.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { DiamondIcon } from \"../Icons/DiamondIcon\";\nimport { HeartIcon } from \"../Icons/HeartIcon\";\n\nconst compactFormatter = new Intl.NumberFormat(\"en\", {\n  notation: \"compact\",\n  maximumFractionDigits: 1,\n});\n\nfunction formatCount(value: number | string): string {\n  return typeof value === \"number\" ? compactFormatter.format(value).toLowerCase() : value;\n}\n\nexport interface FanFollowerCountProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Fan count. Numbers are compacted (e.g. `1200` → `\"1.2k\"`); strings render verbatim. @default 0 */\n  fans?: number | string;\n  /** Subscriber count. Numbers are compacted (e.g. `3000` → `\"3k\"`); strings render verbatim. @default 0 */\n  subs?: number | string;\n  /** Show the fan count group. @default true */\n  showFans?: boolean;\n  /** Show the subscriber count group. @default true */\n  showSubs?: boolean;\n  /** Label rendered after the fan count. @default \"Fans\" */\n  fansLabel?: string;\n  /** Label rendered after the subscriber count. @default \"Subs\" */\n  subsLabel?: string;\n}\n\n/**\n * Displays a creator's formatted fan and subscriber counts, each paired with an\n * icon. Numeric values are compacted (`1200` → `\"1.2k\"`); pass a pre-formatted\n * string to bypass formatting. Either group can be hidden independently.\n *\n * @example\n * ```tsx\n * <FanFollowerCount fans={1200} subs={3000} />\n * ```\n */\nexport const FanFollowerCount = React.forwardRef<HTMLDivElement, FanFollowerCountProps>(\n  (\n    {\n      className,\n      fans = 0,\n      subs = 0,\n      showFans = true,\n      showSubs = true,\n      fansLabel = \"Fans\",\n      subsLabel = \"Subs\",\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div ref={ref} className={cn(\"inline-flex items-center gap-3\", className)} {...props}>\n        {showFans && (\n          <span className=\"inline-flex items-center gap-2\">\n            <HeartIcon size={16} filled className=\"text-icons-tertiary\" />\n            <span className=\"typography-body-small-14px-semibold inline-flex items-center gap-1 text-content-primary\">\n              <span>{formatCount(fans)}</span>\n              <span>{fansLabel}</span>\n            </span>\n          </span>\n        )}\n        {showSubs && (\n          <span className=\"inline-flex items-center gap-2\">\n            <DiamondIcon size={16} filled className=\"text-icons-tertiary\" />\n            <span className=\"typography-body-small-14px-semibold inline-flex items-center gap-1 text-content-primary\">\n              <span>{formatCount(subs)}</span>\n              <span>{subsLabel}</span>\n            </span>\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nFanFollowerCount.displayName = \"FanFollowerCount\";\n"],"names":["React","jsxs","cn","jsx","HeartIcon","DiamondIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,mBAAmB,IAAI,KAAK,aAAa,MAAM;AAAA,EACnD,UAAU;AAAA,EACV,uBAAuB;AACzB,CAAC;AAED,SAAS,YAAY,OAAgC;AACnD,SAAO,OAAO,UAAU,WAAW,iBAAiB,OAAO,KAAK,EAAE,gBAAgB;AACpF;AA2BO,MAAM,mBAAmBA,iBAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACEC,gCAAC,SAAI,KAAU,WAAWC,MAAG,kCAAkC,SAAS,GAAI,GAAG,OAC5E,UAAA;AAAA,MAAA,YACCD,2BAAAA,KAAC,QAAA,EAAK,WAAU,kCACd,UAAA;AAAA,QAAAE,+BAACC,UAAAA,aAAU,MAAM,IAAI,QAAM,MAAC,WAAU,uBAAsB;AAAA,QAC5DH,2BAAAA,KAAC,QAAA,EAAK,WAAU,2FACd,UAAA;AAAA,UAAAE,2BAAAA,IAAC,QAAA,EAAM,UAAA,YAAY,IAAI,EAAA,CAAE;AAAA,UACzBA,2BAAAA,IAAC,UAAM,UAAA,UAAA,CAAU;AAAA,QAAA,EAAA,CACnB;AAAA,MAAA,GACF;AAAA,MAED,YACCF,2BAAAA,KAAC,QAAA,EAAK,WAAU,kCACd,UAAA;AAAA,QAAAE,+BAACE,YAAAA,eAAY,MAAM,IAAI,QAAM,MAAC,WAAU,uBAAsB;AAAA,QAC9DJ,2BAAAA,KAAC,QAAA,EAAK,WAAU,2FACd,UAAA;AAAA,UAAAE,2BAAAA,IAAC,QAAA,EAAM,UAAA,YAAY,IAAI,EAAA,CAAE;AAAA,UACzBA,2BAAAA,IAAC,UAAM,UAAA,UAAA,CAAU;AAAA,QAAA,EAAA,CACnB;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;;"}

package/dist/cjs/components/IconButton/IconButton.cjs

@@ -36,7 +36,7 @@ const iconButtonVariants = {
 };
 const iconSizeVariants = {
   24: "[&>svg]:size-4",
-  32: "[&>svg]:size-5",
+  32: "[&>svg]:size-4",
   40: "[&>svg]:size-6",
   52: "[&>svg]:size-7",
   72: "[&>svg]:size-8"

package/dist/cjs/components/IconButton/IconButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Count, type CountSize } from \"../Count/Count\";\n\nconst iconButtonVariants = {\n  primary:\n    \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-primary-hover not-disabled:active:bg-buttons-primary-hover disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  secondary:\n    \"bg-neutral-alphas-50 text-icons-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiary:\n    \"bg-transparent text-content-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  brand:\n    \"bg-content-always-black text-brand-primary-default hover:bg-brand-primary-default hover:text-content-always-black not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  contrast:\n    \"bg-transparent text-content-always-white hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  messaging:\n    \"bg-content-always-black text-brand-primary-default hover:bg-brand-primary-default hover:text-content-always-black not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  navTray:\n    \"bg-transparent text-content-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiaryDestructive:\n    \"bg-transparent text-error-content hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  stop: \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-brand-default hover:text-content-always-black not-disabled:active:bg-buttons-brand-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  microphone:\n    \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-brand-default hover:text-content-always-black not-disabled:active:bg-buttons-brand-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n};\n\nconst iconSizeVariants = {\n  24: \"[&>svg]:size-4\",\n  32: \"[&>svg]:size-5\",\n  40: \"[&>svg]:size-6\",\n  52: \"[&>svg]:size-7\",\n  72: \"[&>svg]:size-8\",\n} as const;\n\nconst sizeVariants = {\n  24: \"size-6 p-1\",\n  32: \"size-8 p-1.5\",\n  40: \"size-10 p-[10px]\",\n  52: \"size-[52px] p-2\",\n  72: \"size-[72px] p-4\",\n} as const;\n\nconst countSizeMap: Record<string, CountSize> = {\n  24: \"16\",\n  32: \"24\",\n  40: \"32\",\n  52: \"32\",\n  72: \"32\",\n};\n\n/** Visual style variant of the icon button. */\nexport type IconButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"brand\"\n  | \"contrast\"\n  | \"messaging\"\n  | \"navTray\"\n  | \"tertiaryDestructive\"\n  | \"stop\"\n  | \"microphone\";\n\n/** Icon button size in pixels. */\nexport type IconButtonSize = \"24\" | \"32\" | \"40\" | \"52\" | \"72\";\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the icon button. @default \"primary\" */\n  variant?: IconButtonVariant;\n  /** Size of the button in pixels. @default \"40\" */\n  size?: IconButtonSize;\n  /** Icon element to render inside the button. */\n  icon: React.ReactNode;\n  /** When provided, displays a {@link Count} badge at the top-right corner (tertiary & navTray variants only). */\n  counterValue?: number;\n}\n\n/**\n * A circular button containing only an icon. Use when an action can be\n * represented by an icon alone (e.g. close, send, mic). Pair with an\n * `aria-label` for accessibility.\n *\n * @example\n * ```tsx\n * <IconButton icon={<CloseIcon />} aria-label=\"Close\" variant=\"tertiary\" />\n * ```\n */\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    { className, variant = \"primary\", size = \"40\", icon, counterValue, disabled = false, ...props },\n    ref,\n  ) => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (!props[\"aria-label\"] && !props[\"aria-labelledby\"] && !props.title) {\n        console.warn(\n          \"IconButton: No accessible name provided. Add an `aria-label`, `aria-labelledby`, or `title` prop so screen readers can announce this button.\",\n        );\n      }\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-testid=\"icon-button\"\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"relative inline-flex shrink-0 items-center justify-center focus-visible:outline-none\",\n          \"cursor-pointer rounded-full transition-all duration-150 ease-in-out disabled:cursor-default\",\n          // Size variants\n          sizeVariants[size],\n          // Variant styles\n          iconButtonVariants[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeVariants[size])}\n          aria-hidden=\"true\"\n        >\n          {icon}\n        </span>\n\n        {counterValue !== undefined && (\n          <Count\n            value={counterValue}\n            variant=\"alert\"\n            size={countSizeMap[size]}\n            className=\"absolute -top-0.5 -right-0.5\"\n          />\n        )}\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n"],"names":["React","jsxs","cn","jsx","Count"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,qBAAqB;AAAA,EACzB,SACE;AAAA,EACF,WACE;AAAA,EACF,UACE;AAAA,EACF,OACE;AAAA,EACF,UACE;AAAA,EACF,WACE;AAAA,EACF,SACE;AAAA,EACF,qBACE;AAAA,EACF,MAAM;AAAA,EACN,YACE;AACJ;AAEA,MAAM,mBAAmB;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuCO,MAAM,aAAaA,iBAAM;AAAA,EAC9B,CACE,EAAE,WAAW,UAAU,WAAW,OAAO,MAAM,MAAM,cAAc,WAAW,OAAO,GAAG,MAAA,GACxF,QACG;AACH,QAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAI,CAAC,MAAM,YAAY,KAAK,CAAC,MAAM,iBAAiB,KAAK,CAAC,MAAM,OAAO;AACrE,gBAAQ;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAAA,IACF;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ;AAAA,QACA,WAAWC,GAAAA;AAAAA;AAAAA,UAET;AAAA,UACA;AAAA;AAAA,UAEA,aAAa,IAAI;AAAA;AAAA,UAEjB,mBAAmB,OAAO;AAAA;AAAA,UAE1B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA,GAAG,6CAA6C,iBAAiB,IAAI,CAAC;AAAA,cACjF,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,iBAAiB,UAChBC,2BAAAA;AAAAA,YAACC,MAAAA;AAAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,SAAQ;AAAA,cACR,MAAM,aAAa,IAAI;AAAA,cACvB,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,WAAW,cAAc;;"}
+{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Count, type CountSize } from \"../Count/Count\";\n\nconst iconButtonVariants = {\n  primary:\n    \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-primary-hover not-disabled:active:bg-buttons-primary-hover disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  secondary:\n    \"bg-neutral-alphas-50 text-icons-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiary:\n    \"bg-transparent text-content-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  brand:\n    \"bg-content-always-black text-brand-primary-default hover:bg-brand-primary-default hover:text-content-always-black not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  contrast:\n    \"bg-transparent text-content-always-white hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  messaging:\n    \"bg-content-always-black text-brand-primary-default hover:bg-brand-primary-default hover:text-content-always-black not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  navTray:\n    \"bg-transparent text-content-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiaryDestructive:\n    \"bg-transparent text-error-content hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  stop: \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-brand-default hover:text-content-always-black not-disabled:active:bg-buttons-brand-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  microphone:\n    \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-brand-default hover:text-content-always-black not-disabled:active:bg-buttons-brand-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n};\n\nconst iconSizeVariants = {\n  24: \"[&>svg]:size-4\",\n  32: \"[&>svg]:size-4\",\n  40: \"[&>svg]:size-6\",\n  52: \"[&>svg]:size-7\",\n  72: \"[&>svg]:size-8\",\n} as const;\n\nconst sizeVariants = {\n  24: \"size-6 p-1\",\n  32: \"size-8 p-1.5\",\n  40: \"size-10 p-[10px]\",\n  52: \"size-[52px] p-2\",\n  72: \"size-[72px] p-4\",\n} as const;\n\nconst countSizeMap: Record<string, CountSize> = {\n  24: \"16\",\n  32: \"24\",\n  40: \"32\",\n  52: \"32\",\n  72: \"32\",\n};\n\n/** Visual style variant of the icon button. */\nexport type IconButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"brand\"\n  | \"contrast\"\n  | \"messaging\"\n  | \"navTray\"\n  | \"tertiaryDestructive\"\n  | \"stop\"\n  | \"microphone\";\n\n/** Icon button size in pixels. */\nexport type IconButtonSize = \"24\" | \"32\" | \"40\" | \"52\" | \"72\";\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the icon button. @default \"primary\" */\n  variant?: IconButtonVariant;\n  /** Size of the button in pixels. @default \"40\" */\n  size?: IconButtonSize;\n  /** Icon element to render inside the button. */\n  icon: React.ReactNode;\n  /** When provided, displays a {@link Count} badge at the top-right corner (tertiary & navTray variants only). */\n  counterValue?: number;\n}\n\n/**\n * A circular button containing only an icon. Use when an action can be\n * represented by an icon alone (e.g. close, send, mic). Pair with an\n * `aria-label` for accessibility.\n *\n * @example\n * ```tsx\n * <IconButton icon={<CloseIcon />} aria-label=\"Close\" variant=\"tertiary\" />\n * ```\n */\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    { className, variant = \"primary\", size = \"40\", icon, counterValue, disabled = false, ...props },\n    ref,\n  ) => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (!props[\"aria-label\"] && !props[\"aria-labelledby\"] && !props.title) {\n        console.warn(\n          \"IconButton: No accessible name provided. Add an `aria-label`, `aria-labelledby`, or `title` prop so screen readers can announce this button.\",\n        );\n      }\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-testid=\"icon-button\"\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"relative inline-flex shrink-0 items-center justify-center focus-visible:outline-none\",\n          \"cursor-pointer rounded-full transition-all duration-150 ease-in-out disabled:cursor-default\",\n          // Size variants\n          sizeVariants[size],\n          // Variant styles\n          iconButtonVariants[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeVariants[size])}\n          aria-hidden=\"true\"\n        >\n          {icon}\n        </span>\n\n        {counterValue !== undefined && (\n          <Count\n            value={counterValue}\n            variant=\"alert\"\n            size={countSizeMap[size]}\n            className=\"absolute -top-0.5 -right-0.5\"\n          />\n        )}\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n"],"names":["React","jsxs","cn","jsx","Count"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,qBAAqB;AAAA,EACzB,SACE;AAAA,EACF,WACE;AAAA,EACF,UACE;AAAA,EACF,OACE;AAAA,EACF,UACE;AAAA,EACF,WACE;AAAA,EACF,SACE;AAAA,EACF,qBACE;AAAA,EACF,MAAM;AAAA,EACN,YACE;AACJ;AAEA,MAAM,mBAAmB;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuCO,MAAM,aAAaA,iBAAM;AAAA,EAC9B,CACE,EAAE,WAAW,UAAU,WAAW,OAAO,MAAM,MAAM,cAAc,WAAW,OAAO,GAAG,MAAA,GACxF,QACG;AACH,QAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAI,CAAC,MAAM,YAAY,KAAK,CAAC,MAAM,iBAAiB,KAAK,CAAC,MAAM,OAAO;AACrE,gBAAQ;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAAA,IACF;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ;AAAA,QACA,WAAWC,GAAAA;AAAAA;AAAAA,UAET;AAAA,UACA;AAAA;AAAA,UAEA,aAAa,IAAI;AAAA;AAAA,UAEjB,mBAAmB,OAAO;AAAA;AAAA,UAE1B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA,GAAG,6CAA6C,iBAAiB,IAAI,CAAC;AAAA,cACjF,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,iBAAiB,UAChBC,2BAAAA;AAAAA,YAACC,MAAAA;AAAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,SAAQ;AAAA,cACR,MAAM,aAAa,IAAI;AAAA,cACvB,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,WAAW,cAAc;;"}

package/dist/cjs/components/Icons/GifIcon.cjs

@@ -0,0 +1,101 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const BaseIcon = require("./BaseIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const VARIANTS = {
+  16: {
+    outlined: [
+      {
+        d: "M6.284 14.783q-.497 0-.983-.176a2.87 2.87 0 0 1-1.62-1.481L.755 6.84a2.886 2.886 0 0 1 1.386-3.82l3.278-1.533a2.88 2.88 0 0 1 3.82 1.386l.118.25a.56.56 0 0 1-.264.732.56.56 0 0 1-.734-.264l-.117-.249a1.775 1.775 0 0 0-2.354-.858L2.61 4.018a1.773 1.773 0 0 0-.858 2.354l2.926 6.284a1.77 1.77 0 0 0 2.354.858l2.933-1.37a.55.55 0 0 1 .734.263.56.56 0 0 1-.264.733L7.5 14.512a3 3 0 0 1-1.217.271"
+      },
+      {
+        d: "M12.767 13.192H7.883a2.75 2.75 0 0 1-2.75-2.75V5.558a2.75 2.75 0 0 1 2.75-2.75h4.884a2.75 2.75 0 0 1 2.75 2.75v4.884a2.75 2.75 0 0 1-2.75 2.75M7.883 3.908c-.91 0-1.65.74-1.65 1.65v4.884c0 .91.74 1.65 1.65 1.65h4.884c.909 0 1.65-.74 1.65-1.65V5.558c0-.91-.741-1.65-1.65-1.65z"
+      },
+      {
+        d: "M10.31 10.581c-.3 0-.55-.25-.55-.55V6.167c0-.301.25-.55.55-.55s.55.249.55.55v3.864c0 .3-.242.55-.55.55"
+      },
+      {
+        d: "M12.312 8.645H8.447c-.3 0-.55-.25-.55-.55s.25-.55.55-.55h3.865c.3 0 .55.25.55.55s-.25.55-.55.55"
+      }
+    ],
+    filled: [
+      {
+        d: "M8.176 13.808h1.246l-1.664.777a3 3 0 0 1-1.225.264 2.91 2.91 0 0 1-2.64-1.672L.945 6.834a2.91 2.91 0 0 1 1.4-3.865L5.66 1.422a2.92 2.92 0 0 1 2.222-.095c.492.176.917.484 1.24.872h-.939a3.34 3.34 0 0 0-3.337 3.337v4.935c0 .888.345 1.724.976 2.354a3.3 3.3 0 0 0 2.354.983"
+      },
+      {
+        d: "M13.111 3.314H8.176c-1.232 0-2.222.99-2.222 2.222v4.936c0 1.232.99 2.222 2.222 2.222h4.935c1.232 0 2.222-.99 2.222-2.222V5.536c0-1.232-.99-2.222-2.222-2.222m-.52 5.244h-1.46v1.4a.557.557 0 1 1-1.115 0v-1.4H8.683a.557.557 0 1 1 0-1.115h1.335v-1.4a.557.557 0 1 1 1.114 0v1.4h1.46a.557.557 0 1 1 0 1.115"
+      }
+    ]
+  },
+  24: {
+    outlined: [
+      {
+        d: "M9.66 21.25c-.45 0-.9-.08-1.34-.24a3.92 3.92 0 0 1-2.21-2.02l-3.99-8.57a3.935 3.935 0 0 1 1.89-5.21l4.47-2.09c1.96-.91 4.29-.07 5.21 1.89l.16.34c.17.38.01.82-.36 1-.38.17-.82.01-1-.36l-.16-.34a2.42 2.42 0 0 0-3.21-1.17L4.65 6.57c-1.21.56-1.73 2-1.17 3.21l3.99 8.57c.27.58.76 1.03 1.36 1.25.61.22 1.26.19 1.85-.08l4-1.87c.38-.18.82-.01 1 .36.17.38.01.82-.36 1l-4 1.87c-.54.24-1.1.37-1.66.37"
+      },
+      {
+        d: "M18.5 19.08h-6.66c-2.07 0-3.75-1.68-3.75-3.75V8.67c0-2.07 1.68-3.75 3.75-3.75h6.66c2.07 0 3.75 1.68 3.75 3.75v6.66c0 2.07-1.68 3.75-3.75 3.75M11.84 6.42c-1.24 0-2.25 1.01-2.25 2.25v6.66c0 1.24 1.01 2.25 2.25 2.25h6.66c1.24 0 2.25-1.01 2.25-2.25V8.67c0-1.24-1.01-2.25-2.25-2.25z"
+      },
+      {
+        d: "M15.15 15.52c-.41 0-.75-.34-.75-.75V9.5c0-.41.34-.75.75-.75s.75.34.75.75v5.27c0 .41-.33.75-.75.75"
+      },
+      {
+        d: "M17.88 12.88h-5.27c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h5.27c.41 0 .75.34.75.75s-.34.75-.75.75"
+      }
+    ],
+    filled: [
+      {
+        d: "M12.24 19.92h1.7l-2.27 1.06c-.54.24-1.11.36-1.67.36-1.5 0-2.92-.84-3.6-2.28l-4.02-8.65a3.966 3.966 0 0 1 1.91-5.27l4.52-2.11c.96-.44 2.03-.49 3.03-.13.67.24 1.25.66 1.69 1.19h-1.28c-2.51 0-4.55 2.04-4.55 4.55v6.73c0 1.21.47 2.35 1.33 3.21.85.86 2 1.34 3.21 1.34"
+      },
+      {
+        d: "M18.97 5.61h-6.73c-1.68 0-3.03 1.35-3.03 3.03v6.73c0 1.68 1.35 3.03 3.03 3.03h6.73c1.68 0 3.03-1.35 3.03-3.03V8.64c0-1.68-1.35-3.03-3.03-3.03m-.71 7.15h-1.99v1.91a.76.76 0 1 1-1.52 0v-1.91h-1.82a.76.76 0 1 1 0-1.52h1.82V9.33a.76.76 0 1 1 1.52 0v1.91h1.99c.42 0 .76.34.76.76s-.33.76-.76.76"
+      }
+    ]
+  },
+  32: {
+    outlined: [
+      {
+        d: "M12.88 28.333c-.6 0-1.2-.107-1.787-.32a5.23 5.23 0 0 1-2.946-2.693l-5.32-11.427a5.247 5.247 0 0 1 2.52-6.947l5.96-2.786a5.235 5.235 0 0 1 6.946 2.52l.214.453a1.016 1.016 0 0 1-.48 1.333 1.016 1.016 0 0 1-1.333-.48l-.214-.453a3.227 3.227 0 0 0-4.28-1.56L6.2 8.76a3.223 3.223 0 0 0-1.56 4.28l5.32 11.426a3.23 3.23 0 0 0 1.813 1.667 3.23 3.23 0 0 0 2.467-.107l5.333-2.493a1.004 1.004 0 0 1 1.334.48 1.016 1.016 0 0 1-.48 1.333l-5.333 2.494c-.72.32-1.467.493-2.214.493"
+      },
+      {
+        d: "M24.667 25.44h-8.88c-2.76 0-5-2.24-5-5v-8.88c0-2.76 2.24-5 5-5h8.88c2.76 0 5 2.24 5 5v8.88c0 2.76-2.24 5-5 5m-8.88-16.88c-1.654 0-3 1.347-3 3v8.88c0 1.653 1.346 3 3 3h8.88c1.653 0 3-1.347 3-3v-8.88c0-1.653-1.347-3-3-3z"
+      },
+      {
+        d: "M20.2 20.693c-.546 0-1-.453-1-1v-7.026c0-.547.454-1 1-1 .547 0 1 .453 1 1v7.026c0 .547-.44 1-1 1"
+      },
+      {
+        d: "M23.84 17.173h-7.026c-.547 0-1-.453-1-1s.453-1 1-1h7.026c.547 0 1 .454 1 1 0 .547-.453 1-1 1"
+      }
+    ],
+    filled: [
+      {
+        d: "M16.32 26.56h2.266l-3.026 1.413c-.72.32-1.48.48-2.227.48-2 0-3.893-1.12-4.8-3.04L3.173 13.88c-1.24-2.64-.093-5.787 2.547-7.027l6.026-2.813a5.3 5.3 0 0 1 4.04-.173 5.23 5.23 0 0 1 2.254 1.586h-1.707a6.07 6.07 0 0 0-6.067 6.067v8.973c0 1.614.627 3.134 1.774 4.28a6 6 0 0 0 4.28 1.787"
+      },
+      {
+        d: "M25.293 7.48H16.32c-2.24 0-4.04 1.8-4.04 4.04v8.974c0 2.24 1.8 4.04 4.04 4.04h8.973c2.24 0 4.04-1.8 4.04-4.04V11.52c0-2.24-1.8-4.04-4.04-4.04m-.947 9.534h-2.653v2.546c0 .547-.453 1.014-1.013 1.014s-1.014-.454-1.014-1.014v-2.546H17.24a1.013 1.013 0 1 1 0-2.027h2.426v-2.546c0-.547.44-1.014 1.014-1.014.546 0 1.013.454 1.013 1.014v2.546h2.653c.56 0 1.014.454 1.014 1.013 0 .56-.44 1.014-1.014 1.014"
+      }
+    ]
+  }
+};
+const GifIcon = React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(BaseIcon.BaseIcon, { ref, variants: VARIANTS, ...props }));
+GifIcon.displayName = "GifIcon";
+exports.GifIcon = GifIcon;
+//# sourceMappingURL=GifIcon.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GifIcon.cjs","sources":["../../../../src/components/Icons/GifIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseIcon } from \"./BaseIcon\";\nimport type { BaseIconProps, IconVariants } from \"./types\";\n\nconst VARIANTS: IconVariants = {\n  16: {\n    outlined: [\n      {\n        d: \"M6.284 14.783q-.497 0-.983-.176a2.87 2.87 0 0 1-1.62-1.481L.755 6.84a2.886 2.886 0 0 1 1.386-3.82l3.278-1.533a2.88 2.88 0 0 1 3.82 1.386l.118.25a.56.56 0 0 1-.264.732.56.56 0 0 1-.734-.264l-.117-.249a1.775 1.775 0 0 0-2.354-.858L2.61 4.018a1.773 1.773 0 0 0-.858 2.354l2.926 6.284a1.77 1.77 0 0 0 2.354.858l2.933-1.37a.55.55 0 0 1 .734.263.56.56 0 0 1-.264.733L7.5 14.512a3 3 0 0 1-1.217.271\",\n      },\n      {\n        d: \"M12.767 13.192H7.883a2.75 2.75 0 0 1-2.75-2.75V5.558a2.75 2.75 0 0 1 2.75-2.75h4.884a2.75 2.75 0 0 1 2.75 2.75v4.884a2.75 2.75 0 0 1-2.75 2.75M7.883 3.908c-.91 0-1.65.74-1.65 1.65v4.884c0 .91.74 1.65 1.65 1.65h4.884c.909 0 1.65-.74 1.65-1.65V5.558c0-.91-.741-1.65-1.65-1.65z\",\n      },\n      {\n        d: \"M10.31 10.581c-.3 0-.55-.25-.55-.55V6.167c0-.301.25-.55.55-.55s.55.249.55.55v3.864c0 .3-.242.55-.55.55\",\n      },\n      {\n        d: \"M12.312 8.645H8.447c-.3 0-.55-.25-.55-.55s.25-.55.55-.55h3.865c.3 0 .55.25.55.55s-.25.55-.55.55\",\n      },\n    ],\n    filled: [\n      {\n        d: \"M8.176 13.808h1.246l-1.664.777a3 3 0 0 1-1.225.264 2.91 2.91 0 0 1-2.64-1.672L.945 6.834a2.91 2.91 0 0 1 1.4-3.865L5.66 1.422a2.92 2.92 0 0 1 2.222-.095c.492.176.917.484 1.24.872h-.939a3.34 3.34 0 0 0-3.337 3.337v4.935c0 .888.345 1.724.976 2.354a3.3 3.3 0 0 0 2.354.983\",\n      },\n      {\n        d: \"M13.111 3.314H8.176c-1.232 0-2.222.99-2.222 2.222v4.936c0 1.232.99 2.222 2.222 2.222h4.935c1.232 0 2.222-.99 2.222-2.222V5.536c0-1.232-.99-2.222-2.222-2.222m-.52 5.244h-1.46v1.4a.557.557 0 1 1-1.115 0v-1.4H8.683a.557.557 0 1 1 0-1.115h1.335v-1.4a.557.557 0 1 1 1.114 0v1.4h1.46a.557.557 0 1 1 0 1.115\",\n      },\n    ],\n  },\n  24: {\n    outlined: [\n      {\n        d: \"M9.66 21.25c-.45 0-.9-.08-1.34-.24a3.92 3.92 0 0 1-2.21-2.02l-3.99-8.57a3.935 3.935 0 0 1 1.89-5.21l4.47-2.09c1.96-.91 4.29-.07 5.21 1.89l.16.34c.17.38.01.82-.36 1-.38.17-.82.01-1-.36l-.16-.34a2.42 2.42 0 0 0-3.21-1.17L4.65 6.57c-1.21.56-1.73 2-1.17 3.21l3.99 8.57c.27.58.76 1.03 1.36 1.25.61.22 1.26.19 1.85-.08l4-1.87c.38-.18.82-.01 1 .36.17.38.01.82-.36 1l-4 1.87c-.54.24-1.1.37-1.66.37\",\n      },\n      {\n        d: \"M18.5 19.08h-6.66c-2.07 0-3.75-1.68-3.75-3.75V8.67c0-2.07 1.68-3.75 3.75-3.75h6.66c2.07 0 3.75 1.68 3.75 3.75v6.66c0 2.07-1.68 3.75-3.75 3.75M11.84 6.42c-1.24 0-2.25 1.01-2.25 2.25v6.66c0 1.24 1.01 2.25 2.25 2.25h6.66c1.24 0 2.25-1.01 2.25-2.25V8.67c0-1.24-1.01-2.25-2.25-2.25z\",\n      },\n      {\n        d: \"M15.15 15.52c-.41 0-.75-.34-.75-.75V9.5c0-.41.34-.75.75-.75s.75.34.75.75v5.27c0 .41-.33.75-.75.75\",\n      },\n      {\n        d: \"M17.88 12.88h-5.27c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h5.27c.41 0 .75.34.75.75s-.34.75-.75.75\",\n      },\n    ],\n    filled: [\n      {\n        d: \"M12.24 19.92h1.7l-2.27 1.06c-.54.24-1.11.36-1.67.36-1.5 0-2.92-.84-3.6-2.28l-4.02-8.65a3.966 3.966 0 0 1 1.91-5.27l4.52-2.11c.96-.44 2.03-.49 3.03-.13.67.24 1.25.66 1.69 1.19h-1.28c-2.51 0-4.55 2.04-4.55 4.55v6.73c0 1.21.47 2.35 1.33 3.21.85.86 2 1.34 3.21 1.34\",\n      },\n      {\n        d: \"M18.97 5.61h-6.73c-1.68 0-3.03 1.35-3.03 3.03v6.73c0 1.68 1.35 3.03 3.03 3.03h6.73c1.68 0 3.03-1.35 3.03-3.03V8.64c0-1.68-1.35-3.03-3.03-3.03m-.71 7.15h-1.99v1.91a.76.76 0 1 1-1.52 0v-1.91h-1.82a.76.76 0 1 1 0-1.52h1.82V9.33a.76.76 0 1 1 1.52 0v1.91h1.99c.42 0 .76.34.76.76s-.33.76-.76.76\",\n      },\n    ],\n  },\n  32: {\n    outlined: [\n      {\n        d: \"M12.88 28.333c-.6 0-1.2-.107-1.787-.32a5.23 5.23 0 0 1-2.946-2.693l-5.32-11.427a5.247 5.247 0 0 1 2.52-6.947l5.96-2.786a5.235 5.235 0 0 1 6.946 2.52l.214.453a1.016 1.016 0 0 1-.48 1.333 1.016 1.016 0 0 1-1.333-.48l-.214-.453a3.227 3.227 0 0 0-4.28-1.56L6.2 8.76a3.223 3.223 0 0 0-1.56 4.28l5.32 11.426a3.23 3.23 0 0 0 1.813 1.667 3.23 3.23 0 0 0 2.467-.107l5.333-2.493a1.004 1.004 0 0 1 1.334.48 1.016 1.016 0 0 1-.48 1.333l-5.333 2.494c-.72.32-1.467.493-2.214.493\",\n      },\n      {\n        d: \"M24.667 25.44h-8.88c-2.76 0-5-2.24-5-5v-8.88c0-2.76 2.24-5 5-5h8.88c2.76 0 5 2.24 5 5v8.88c0 2.76-2.24 5-5 5m-8.88-16.88c-1.654 0-3 1.347-3 3v8.88c0 1.653 1.346 3 3 3h8.88c1.653 0 3-1.347 3-3v-8.88c0-1.653-1.347-3-3-3z\",\n      },\n      {\n        d: \"M20.2 20.693c-.546 0-1-.453-1-1v-7.026c0-.547.454-1 1-1 .547 0 1 .453 1 1v7.026c0 .547-.44 1-1 1\",\n      },\n      {\n        d: \"M23.84 17.173h-7.026c-.547 0-1-.453-1-1s.453-1 1-1h7.026c.547 0 1 .454 1 1 0 .547-.453 1-1 1\",\n      },\n    ],\n    filled: [\n      {\n        d: \"M16.32 26.56h2.266l-3.026 1.413c-.72.32-1.48.48-2.227.48-2 0-3.893-1.12-4.8-3.04L3.173 13.88c-1.24-2.64-.093-5.787 2.547-7.027l6.026-2.813a5.3 5.3 0 0 1 4.04-.173 5.23 5.23 0 0 1 2.254 1.586h-1.707a6.07 6.07 0 0 0-6.067 6.067v8.973c0 1.614.627 3.134 1.774 4.28a6 6 0 0 0 4.28 1.787\",\n      },\n      {\n        d: \"M25.293 7.48H16.32c-2.24 0-4.04 1.8-4.04 4.04v8.974c0 2.24 1.8 4.04 4.04 4.04h8.973c2.24 0 4.04-1.8 4.04-4.04V11.52c0-2.24-1.8-4.04-4.04-4.04m-.947 9.534h-2.653v2.546c0 .547-.453 1.014-1.013 1.014s-1.014-.454-1.014-1.014v-2.546H17.24a1.013 1.013 0 1 1 0-2.027h2.426v-2.546c0-.547.44-1.014 1.014-1.014.546 0 1.013.454 1.013 1.014v2.546h2.653c.56 0 1.014.454 1.014 1.013 0 .56-.44 1.014-1.014 1.014\",\n      },\n    ],\n  },\n};\n\n/** Props for {@link GifIcon}. See {@link BaseIconProps} for the shared shape. */\nexport type GifIconProps = BaseIconProps;\n\n/**\n * Gif icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.\n *\n * @example\n * ```tsx\n * <GifIcon size={24} filled />\n * ```\n */\nexport const GifIcon = React.forwardRef<SVGSVGElement, GifIconProps>((props, ref) => (\n  <BaseIcon ref={ref} variants={VARIANTS} {...props} />\n));\n\nGifIcon.displayName = \"GifIcon\";\n"],"names":["React","jsx","BaseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,WAAyB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAEJ;AAaO,MAAM,UAAUA,iBAAM,WAAwC,CAAC,OAAO,QAC3EC,2BAAAA,IAACC,SAAAA,UAAA,EAAS,KAAU,UAAU,UAAW,GAAG,OAAO,CACpD;AAED,QAAQ,cAAc;;"}

package/dist/cjs/components/Icons/VerifiedIcon.cjs

@@ -0,0 +1,82 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const BaseIcon = require("./BaseIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const VARIANTS = {
+  16: {
+    outlined: [
+      {
+        d: "M14.1051 9.4044C14.8084 8.6002 14.8084 7.3998 14.1051 6.5956L13.9891 6.4629C13.8087 6.2567 13.7209 5.9856 13.746 5.7128L13.7618 5.5419C13.8599 4.4763 13.1535 3.5029 12.11 3.2658L11.947 3.2288C11.6787 3.1679 11.4474 2.9991 11.3075 2.7622L11.221 2.6158C10.6753 1.6919 9.5283 1.3171 8.5423 1.7404L8.3946 1.8039C8.1427 1.9121 7.8573 1.9121 7.6054 1.8039L7.4553 1.7394C6.4703 1.3165 5.3245 1.69 4.7781 2.6122L4.6934 2.7552C4.553 2.9923 4.3209 3.1609 4.052 3.2212L3.8955 3.2563C2.8495 3.491 2.1401 4.4656 2.2382 5.5331L2.2542 5.7074C2.2792 5.9794 2.1918 6.2499 2.0123 6.4558L1.8902 6.5959C1.1893 7.4003 1.1903 8.5988 1.8927 9.4019L2.011 9.5372C2.1913 9.7433 2.2792 10.0143 2.2541 10.287L2.2377 10.4652C2.1398 11.5306 2.8462 12.5037 3.8896 12.7407L4.0538 12.7781C4.3216 12.8389 4.5526 13.0072 4.6926 13.2435L4.7757 13.3837C5.3231 14.3077 6.472 14.6807 7.4577 14.2545L7.6045 14.191C7.8569 14.0819 8.1432 14.0815 8.3959 14.19L8.5447 14.2539C9.5297 14.6769 10.6755 14.3033 11.2219 13.3811L11.3074 13.2368C11.4473 13.0005 11.6784 12.8322 11.9462 12.7714L12.11 12.7342C13.1535 12.4971 13.8599 11.5237 13.7618 10.4581L13.746 10.2871C13.7209 10.0144 13.8087 9.7433 13.9891 9.5371L14.1051 9.4044Z",
+        sw: 1
+      },
+      {
+        d: "M6.9627 10.91C6.8325 11.0406 6.6209 11.0406 6.4906 10.91L4.4284 8.8424C4.2985 8.7121 4.2987 8.5013 4.4287 8.3713L4.9438 7.8562C5.0742 7.7259 5.2856 7.7261 5.4157 7.8567L6.7267 9.1733L10.3909 5.4965C10.5211 5.366 10.7325 5.3658 10.8628 5.4961L11.3779 6.0113C11.508 6.1413 11.5081 6.3521 11.3783 6.4824L6.9627 10.91Z"
+      }
+    ],
+    filled: [
+      {
+        d: "M14.1051 9.4044C14.8084 8.6002 14.8084 7.3998 14.1051 6.5956L13.9891 6.4629C13.8087 6.2567 13.7209 5.9856 13.746 5.7128L13.7618 5.5419C13.8599 4.4763 13.1535 3.5029 12.11 3.2658L11.947 3.2288C11.6787 3.1679 11.4474 2.9991 11.3075 2.7622L11.221 2.6158C10.6753 1.6919 9.5283 1.3171 8.5423 1.7404L8.3946 1.8039C8.1427 1.9121 7.8573 1.9121 7.6054 1.8039L7.4553 1.7394C6.4703 1.3165 5.3245 1.69 4.7781 2.6122L4.6934 2.7552C4.553 2.9923 4.3209 3.1609 4.052 3.2212L3.8955 3.2563C2.8495 3.491 2.1401 4.4656 2.2382 5.5331L2.2542 5.7074C2.2792 5.9794 2.1918 6.2499 2.0123 6.4558L1.8902 6.5959C1.1893 7.4003 1.1903 8.5988 1.8927 9.4019L2.011 9.5372C2.1913 9.7433 2.2792 10.0143 2.2541 10.287L2.2377 10.4652C2.1398 11.5306 2.8462 12.5037 3.8896 12.7407L4.0538 12.7781C4.3216 12.8389 4.5526 13.0072 4.6926 13.2435L4.7757 13.3837C5.3231 14.3077 6.472 14.6807 7.4577 14.2545L7.6045 14.191C7.8569 14.0819 8.1432 14.0815 8.3959 14.19L8.5447 14.2539C9.5297 14.6769 10.6755 14.3033 11.2219 13.3811L11.3074 13.2368C11.4473 13.0005 11.6784 12.8322 11.9462 12.7714L12.11 12.7342C13.1535 12.4971 13.8599 11.5237 13.7618 10.4581L13.746 10.2871C13.7209 10.0144 13.8087 9.7433 13.9891 9.5371L14.1051 9.4044ZM6.9627 10.91C6.8325 11.0406 6.6209 11.0406 6.4906 10.91L4.4284 8.8424C4.2985 8.7121 4.2987 8.5013 4.4287 8.3713L4.9438 7.8562C5.0742 7.7259 5.2856 7.7261 5.4157 7.8567L6.7267 9.1733L10.3909 5.4965C10.5211 5.366 10.7325 5.3658 10.8628 5.4961L11.3779 6.0113C11.508 6.1413 11.5081 6.3521 11.3783 6.4824L6.9627 10.91Z",
+        eo: true
+      }
+    ]
+  },
+  24: {
+    outlined: [
+      {
+        d: "M21.158 14.107a3.2 3.2 0 0 0 0-4.214l-.174-.199a1.5 1.5 0 0 1-.365-1.125l.024-.256a3.2 3.2 0 0 0-2.478-3.414l-.244-.056a1.5 1.5 0 0 1-.96-.7l-.13-.22a3.2 3.2 0 0 0-4.017-1.312l-.222.095a1.5 1.5 0 0 1-1.184 0l-.225-.097a3.2 3.2 0 0 0-4.016 1.31l-.127.214a1.5 1.5 0 0 1-.962.699l-.235.052A3.2 3.2 0 0 0 3.357 8.3l.024.261a1.5 1.5 0 0 1-.363 1.123l-.183.21a3.2 3.2 0 0 0 .004 4.209l.178.203c.27.309.402.716.364 1.125l-.024.267a3.2 3.2 0 0 0 2.477 3.413l.247.056a1.5 1.5 0 0 1 .958.698l.125.21a3.2 3.2 0 0 0 4.023 1.307l.22-.096a1.5 1.5 0 0 1 1.187-.001l.223.096a3.2 3.2 0 0 0 4.016-1.31l.128-.216a1.5 1.5 0 0 1 .958-.698l.246-.056a3.2 3.2 0 0 0 2.478-3.414l-.024-.256a1.5 1.5 0 0 1 .365-1.125z",
+        sw: 1.5
+      },
+      {
+        d: "M10.444 16.365a.5.5 0 0 1-.708 0l-3.093-3.101a.5.5 0 0 1 0-.707l.773-.773a.5.5 0 0 1 .708.001l1.966 1.975 5.496-5.515a.5.5 0 0 1 .708 0l.773.772a.5.5 0 0 1 0 .707z"
+      }
+    ],
+    filled: [
+      {
+        d: "M21.158 14.107a3.2 3.2 0 0 0 0-4.214l-.174-.199a1.5 1.5 0 0 1-.365-1.125l.024-.256a3.2 3.2 0 0 0-2.478-3.414l-.244-.056a1.5 1.5 0 0 1-.96-.7l-.13-.22a3.2 3.2 0 0 0-4.017-1.312l-.222.095a1.5 1.5 0 0 1-1.184 0l-.225-.097a3.2 3.2 0 0 0-4.016 1.31l-.127.214a1.5 1.5 0 0 1-.962.699l-.235.052A3.2 3.2 0 0 0 3.357 8.3l.024.261a1.5 1.5 0 0 1-.363 1.123l-.183.21a3.2 3.2 0 0 0 .004 4.209l.178.203c.27.309.402.716.364 1.125l-.024.267a3.2 3.2 0 0 0 2.477 3.413l.247.056a1.5 1.5 0 0 1 .958.698l.125.21a3.2 3.2 0 0 0 4.023 1.307l.22-.096a1.5 1.5 0 0 1 1.187-.001l.223.096a3.2 3.2 0 0 0 4.016-1.31l.128-.216a1.5 1.5 0 0 1 .958-.698l.246-.056a3.2 3.2 0 0 0 2.478-3.414l-.024-.256a1.5 1.5 0 0 1 .365-1.125zm-10.714 2.258a.5.5 0 0 1-.708 0l-3.093-3.101a.5.5 0 0 1 0-.707l.773-.773a.5.5 0 0 1 .708.001l1.966 1.975 5.496-5.515a.5.5 0 0 1 .708 0l.773.772a.5.5 0 0 1 0 .707z",
+        eo: true
+      }
+    ]
+  },
+  32: {
+    outlined: [
+      {
+        d: "M28.2103 18.8088C29.6168 17.2004 29.6168 14.7996 28.2103 13.1912L27.9781 12.9258C27.6175 12.5134 27.4417 11.9712 27.492 11.4257L27.5236 11.0838C27.7199 8.9526 26.3071 7.0057 24.22 6.5317L23.894 6.4576C23.3575 6.3357 22.8948 5.9982 22.6149 5.5244L22.442 5.2316C21.3507 3.3838 19.0567 2.6341 17.0847 3.4809L16.7892 3.6078C16.2853 3.8242 15.7147 3.8242 15.2108 3.6078L14.9105 3.4788C12.9407 2.6329 10.649 3.3801 9.5562 5.2245L9.3869 5.5104C9.1059 5.9845 8.6418 6.3217 8.1041 6.4424L7.791 6.5126C5.6989 6.9821 4.2802 8.9311 4.4764 11.0662L4.5084 11.4147C4.5584 11.9588 4.3836 12.4997 4.0246 12.9117L3.7804 13.1919C2.3785 14.8005 2.3807 17.1976 3.7854 18.8037L4.0221 19.0744C4.3826 19.4867 4.5583 20.0287 4.5082 20.574L4.4754 20.9304C4.2796 23.0612 5.6925 25.0075 7.7791 25.4815L8.1076 25.5561C8.6432 25.6777 9.1053 26.0144 9.3853 26.4869L9.5515 26.7675C10.6463 28.6153 12.944 29.3613 14.9155 28.5089L15.2091 28.382C15.7139 28.1637 16.2864 28.1629 16.7919 28.38L17.0895 28.5079C19.0593 29.3537 21.3511 28.6065 22.4437 26.7621L22.6148 26.4736C22.8947 26.0011 23.3568 25.6644 23.8924 25.5428L24.22 25.4684C26.3071 24.9943 27.7199 23.0473 27.5236 20.9161L27.492 20.5743C27.4417 20.0288 27.6175 19.4865 27.9781 19.0741L28.2103 18.8088Z",
+        sw: 2
+      },
+      {
+        d: "M13.9253 21.82C13.6649 22.0812 13.2418 22.0812 12.9813 21.82L8.8568 17.6848C8.5971 17.4243 8.5973 17.0027 8.8575 16.7425L9.8876 15.7124C10.1483 15.4517 10.5712 15.4521 10.8314 15.7135L13.4533 18.3467L20.7819 10.993C21.0421 10.7319 21.4649 10.7315 21.7256 10.9922L22.7559 12.0226C23.016 12.2827 23.0163 12.7043 22.7565 12.9647L13.9253 21.82Z"
+      }
+    ],
+    filled: [
+      {
+        d: "M28.2103 18.8088C29.6168 17.2004 29.6168 14.7996 28.2103 13.1912L27.9781 12.9258C27.6175 12.5134 27.4417 11.9712 27.492 11.4257L27.5236 11.0838C27.7199 8.9526 26.3071 7.0057 24.22 6.5317L23.894 6.4576C23.3575 6.3357 22.8948 5.9982 22.6149 5.5244L22.442 5.2316C21.3507 3.3838 19.0567 2.6341 17.0847 3.4809L16.7892 3.6078C16.2853 3.8242 15.7147 3.8242 15.2108 3.6078L14.9105 3.4788C12.9407 2.6329 10.649 3.3801 9.5562 5.2245L9.3869 5.5104C9.1059 5.9845 8.6418 6.3217 8.1041 6.4424L7.791 6.5126C5.6989 6.9821 4.2802 8.9311 4.4764 11.0662L4.5084 11.4147C4.5584 11.9588 4.3836 12.4997 4.0246 12.9117L3.7804 13.1919C2.3785 14.8005 2.3807 17.1976 3.7854 18.8037L4.0221 19.0744C4.3826 19.4867 4.5583 20.0287 4.5082 20.574L4.4754 20.9304C4.2796 23.0612 5.6925 25.0075 7.7791 25.4815L8.1076 25.5561C8.6432 25.6777 9.1053 26.0144 9.3853 26.4869L9.5515 26.7675C10.6463 28.6153 12.944 29.3613 14.9155 28.5089L15.2091 28.382C15.7139 28.1637 16.2864 28.1629 16.7919 28.38L17.0895 28.5079C19.0593 29.3537 21.3511 28.6065 22.4437 26.7621L22.6148 26.4736C22.8947 26.0011 23.3568 25.6644 23.8924 25.5428L24.22 25.4684C26.3071 24.9943 27.7199 23.0473 27.5236 20.9161L27.492 20.5743C27.4417 20.0288 27.6175 19.4865 27.9781 19.0741L28.2103 18.8088ZM13.9253 21.82C13.6649 22.0812 13.2418 22.0812 12.9813 21.82L8.8568 17.6848C8.5971 17.4243 8.5973 17.0027 8.8575 16.7425L9.8876 15.7124C10.1483 15.4517 10.5712 15.4521 10.8314 15.7135L13.4533 18.3467L20.7819 10.993C21.0421 10.7319 21.4649 10.7315 21.7256 10.9922L22.7559 12.0226C23.016 12.2827 23.0163 12.7043 22.7565 12.9647L13.9253 21.82Z",
+        eo: true
+      }
+    ]
+  }
+};
+const VerifiedIcon = React__namespace.forwardRef(
+  ({ filled = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(BaseIcon.BaseIcon, { ref, variants: VARIANTS, filled, ...props })
+);
+VerifiedIcon.displayName = "VerifiedIcon";
+exports.VerifiedIcon = VerifiedIcon;
+//# sourceMappingURL=VerifiedIcon.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerifiedIcon.cjs","sources":["../../../../src/components/Icons/VerifiedIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseIcon } from \"./BaseIcon\";\nimport type { BaseIconProps, IconVariants } from \"./types\";\n\nconst VARIANTS: IconVariants = {\n  16: {\n    outlined: [\n      {\n        d: \"M14.1051 9.4044C14.8084 8.6002 14.8084 7.3998 14.1051 6.5956L13.9891 6.4629C13.8087 6.2567 13.7209 5.9856 13.746 5.7128L13.7618 5.5419C13.8599 4.4763 13.1535 3.5029 12.11 3.2658L11.947 3.2288C11.6787 3.1679 11.4474 2.9991 11.3075 2.7622L11.221 2.6158C10.6753 1.6919 9.5283 1.3171 8.5423 1.7404L8.3946 1.8039C8.1427 1.9121 7.8573 1.9121 7.6054 1.8039L7.4553 1.7394C6.4703 1.3165 5.3245 1.69 4.7781 2.6122L4.6934 2.7552C4.553 2.9923 4.3209 3.1609 4.052 3.2212L3.8955 3.2563C2.8495 3.491 2.1401 4.4656 2.2382 5.5331L2.2542 5.7074C2.2792 5.9794 2.1918 6.2499 2.0123 6.4558L1.8902 6.5959C1.1893 7.4003 1.1903 8.5988 1.8927 9.4019L2.011 9.5372C2.1913 9.7433 2.2792 10.0143 2.2541 10.287L2.2377 10.4652C2.1398 11.5306 2.8462 12.5037 3.8896 12.7407L4.0538 12.7781C4.3216 12.8389 4.5526 13.0072 4.6926 13.2435L4.7757 13.3837C5.3231 14.3077 6.472 14.6807 7.4577 14.2545L7.6045 14.191C7.8569 14.0819 8.1432 14.0815 8.3959 14.19L8.5447 14.2539C9.5297 14.6769 10.6755 14.3033 11.2219 13.3811L11.3074 13.2368C11.4473 13.0005 11.6784 12.8322 11.9462 12.7714L12.11 12.7342C13.1535 12.4971 13.8599 11.5237 13.7618 10.4581L13.746 10.2871C13.7209 10.0144 13.8087 9.7433 13.9891 9.5371L14.1051 9.4044Z\",\n        sw: 1,\n      },\n      {\n        d: \"M6.9627 10.91C6.8325 11.0406 6.6209 11.0406 6.4906 10.91L4.4284 8.8424C4.2985 8.7121 4.2987 8.5013 4.4287 8.3713L4.9438 7.8562C5.0742 7.7259 5.2856 7.7261 5.4157 7.8567L6.7267 9.1733L10.3909 5.4965C10.5211 5.366 10.7325 5.3658 10.8628 5.4961L11.3779 6.0113C11.508 6.1413 11.5081 6.3521 11.3783 6.4824L6.9627 10.91Z\",\n      },\n    ],\n    filled: [\n      {\n        d: \"M14.1051 9.4044C14.8084 8.6002 14.8084 7.3998 14.1051 6.5956L13.9891 6.4629C13.8087 6.2567 13.7209 5.9856 13.746 5.7128L13.7618 5.5419C13.8599 4.4763 13.1535 3.5029 12.11 3.2658L11.947 3.2288C11.6787 3.1679 11.4474 2.9991 11.3075 2.7622L11.221 2.6158C10.6753 1.6919 9.5283 1.3171 8.5423 1.7404L8.3946 1.8039C8.1427 1.9121 7.8573 1.9121 7.6054 1.8039L7.4553 1.7394C6.4703 1.3165 5.3245 1.69 4.7781 2.6122L4.6934 2.7552C4.553 2.9923 4.3209 3.1609 4.052 3.2212L3.8955 3.2563C2.8495 3.491 2.1401 4.4656 2.2382 5.5331L2.2542 5.7074C2.2792 5.9794 2.1918 6.2499 2.0123 6.4558L1.8902 6.5959C1.1893 7.4003 1.1903 8.5988 1.8927 9.4019L2.011 9.5372C2.1913 9.7433 2.2792 10.0143 2.2541 10.287L2.2377 10.4652C2.1398 11.5306 2.8462 12.5037 3.8896 12.7407L4.0538 12.7781C4.3216 12.8389 4.5526 13.0072 4.6926 13.2435L4.7757 13.3837C5.3231 14.3077 6.472 14.6807 7.4577 14.2545L7.6045 14.191C7.8569 14.0819 8.1432 14.0815 8.3959 14.19L8.5447 14.2539C9.5297 14.6769 10.6755 14.3033 11.2219 13.3811L11.3074 13.2368C11.4473 13.0005 11.6784 12.8322 11.9462 12.7714L12.11 12.7342C13.1535 12.4971 13.8599 11.5237 13.7618 10.4581L13.746 10.2871C13.7209 10.0144 13.8087 9.7433 13.9891 9.5371L14.1051 9.4044ZM6.9627 10.91C6.8325 11.0406 6.6209 11.0406 6.4906 10.91L4.4284 8.8424C4.2985 8.7121 4.2987 8.5013 4.4287 8.3713L4.9438 7.8562C5.0742 7.7259 5.2856 7.7261 5.4157 7.8567L6.7267 9.1733L10.3909 5.4965C10.5211 5.366 10.7325 5.3658 10.8628 5.4961L11.3779 6.0113C11.508 6.1413 11.5081 6.3521 11.3783 6.4824L6.9627 10.91Z\",\n        eo: true,\n      },\n    ],\n  },\n  24: {\n    outlined: [\n      {\n        d: \"M21.158 14.107a3.2 3.2 0 0 0 0-4.214l-.174-.199a1.5 1.5 0 0 1-.365-1.125l.024-.256a3.2 3.2 0 0 0-2.478-3.414l-.244-.056a1.5 1.5 0 0 1-.96-.7l-.13-.22a3.2 3.2 0 0 0-4.017-1.312l-.222.095a1.5 1.5 0 0 1-1.184 0l-.225-.097a3.2 3.2 0 0 0-4.016 1.31l-.127.214a1.5 1.5 0 0 1-.962.699l-.235.052A3.2 3.2 0 0 0 3.357 8.3l.024.261a1.5 1.5 0 0 1-.363 1.123l-.183.21a3.2 3.2 0 0 0 .004 4.209l.178.203c.27.309.402.716.364 1.125l-.024.267a3.2 3.2 0 0 0 2.477 3.413l.247.056a1.5 1.5 0 0 1 .958.698l.125.21a3.2 3.2 0 0 0 4.023 1.307l.22-.096a1.5 1.5 0 0 1 1.187-.001l.223.096a3.2 3.2 0 0 0 4.016-1.31l.128-.216a1.5 1.5 0 0 1 .958-.698l.246-.056a3.2 3.2 0 0 0 2.478-3.414l-.024-.256a1.5 1.5 0 0 1 .365-1.125z\",\n        sw: 1.5,\n      },\n      {\n        d: \"M10.444 16.365a.5.5 0 0 1-.708 0l-3.093-3.101a.5.5 0 0 1 0-.707l.773-.773a.5.5 0 0 1 .708.001l1.966 1.975 5.496-5.515a.5.5 0 0 1 .708 0l.773.772a.5.5 0 0 1 0 .707z\",\n      },\n    ],\n    filled: [\n      {\n        d: \"M21.158 14.107a3.2 3.2 0 0 0 0-4.214l-.174-.199a1.5 1.5 0 0 1-.365-1.125l.024-.256a3.2 3.2 0 0 0-2.478-3.414l-.244-.056a1.5 1.5 0 0 1-.96-.7l-.13-.22a3.2 3.2 0 0 0-4.017-1.312l-.222.095a1.5 1.5 0 0 1-1.184 0l-.225-.097a3.2 3.2 0 0 0-4.016 1.31l-.127.214a1.5 1.5 0 0 1-.962.699l-.235.052A3.2 3.2 0 0 0 3.357 8.3l.024.261a1.5 1.5 0 0 1-.363 1.123l-.183.21a3.2 3.2 0 0 0 .004 4.209l.178.203c.27.309.402.716.364 1.125l-.024.267a3.2 3.2 0 0 0 2.477 3.413l.247.056a1.5 1.5 0 0 1 .958.698l.125.21a3.2 3.2 0 0 0 4.023 1.307l.22-.096a1.5 1.5 0 0 1 1.187-.001l.223.096a3.2 3.2 0 0 0 4.016-1.31l.128-.216a1.5 1.5 0 0 1 .958-.698l.246-.056a3.2 3.2 0 0 0 2.478-3.414l-.024-.256a1.5 1.5 0 0 1 .365-1.125zm-10.714 2.258a.5.5 0 0 1-.708 0l-3.093-3.101a.5.5 0 0 1 0-.707l.773-.773a.5.5 0 0 1 .708.001l1.966 1.975 5.496-5.515a.5.5 0 0 1 .708 0l.773.772a.5.5 0 0 1 0 .707z\",\n        eo: true,\n      },\n    ],\n  },\n  32: {\n    outlined: [\n      {\n        d: \"M28.2103 18.8088C29.6168 17.2004 29.6168 14.7996 28.2103 13.1912L27.9781 12.9258C27.6175 12.5134 27.4417 11.9712 27.492 11.4257L27.5236 11.0838C27.7199 8.9526 26.3071 7.0057 24.22 6.5317L23.894 6.4576C23.3575 6.3357 22.8948 5.9982 22.6149 5.5244L22.442 5.2316C21.3507 3.3838 19.0567 2.6341 17.0847 3.4809L16.7892 3.6078C16.2853 3.8242 15.7147 3.8242 15.2108 3.6078L14.9105 3.4788C12.9407 2.6329 10.649 3.3801 9.5562 5.2245L9.3869 5.5104C9.1059 5.9845 8.6418 6.3217 8.1041 6.4424L7.791 6.5126C5.6989 6.9821 4.2802 8.9311 4.4764 11.0662L4.5084 11.4147C4.5584 11.9588 4.3836 12.4997 4.0246 12.9117L3.7804 13.1919C2.3785 14.8005 2.3807 17.1976 3.7854 18.8037L4.0221 19.0744C4.3826 19.4867 4.5583 20.0287 4.5082 20.574L4.4754 20.9304C4.2796 23.0612 5.6925 25.0075 7.7791 25.4815L8.1076 25.5561C8.6432 25.6777 9.1053 26.0144 9.3853 26.4869L9.5515 26.7675C10.6463 28.6153 12.944 29.3613 14.9155 28.5089L15.2091 28.382C15.7139 28.1637 16.2864 28.1629 16.7919 28.38L17.0895 28.5079C19.0593 29.3537 21.3511 28.6065 22.4437 26.7621L22.6148 26.4736C22.8947 26.0011 23.3568 25.6644 23.8924 25.5428L24.22 25.4684C26.3071 24.9943 27.7199 23.0473 27.5236 20.9161L27.492 20.5743C27.4417 20.0288 27.6175 19.4865 27.9781 19.0741L28.2103 18.8088Z\",\n        sw: 2,\n      },\n      {\n        d: \"M13.9253 21.82C13.6649 22.0812 13.2418 22.0812 12.9813 21.82L8.8568 17.6848C8.5971 17.4243 8.5973 17.0027 8.8575 16.7425L9.8876 15.7124C10.1483 15.4517 10.5712 15.4521 10.8314 15.7135L13.4533 18.3467L20.7819 10.993C21.0421 10.7319 21.4649 10.7315 21.7256 10.9922L22.7559 12.0226C23.016 12.2827 23.0163 12.7043 22.7565 12.9647L13.9253 21.82Z\",\n      },\n    ],\n    filled: [\n      {\n        d: \"M28.2103 18.8088C29.6168 17.2004 29.6168 14.7996 28.2103 13.1912L27.9781 12.9258C27.6175 12.5134 27.4417 11.9712 27.492 11.4257L27.5236 11.0838C27.7199 8.9526 26.3071 7.0057 24.22 6.5317L23.894 6.4576C23.3575 6.3357 22.8948 5.9982 22.6149 5.5244L22.442 5.2316C21.3507 3.3838 19.0567 2.6341 17.0847 3.4809L16.7892 3.6078C16.2853 3.8242 15.7147 3.8242 15.2108 3.6078L14.9105 3.4788C12.9407 2.6329 10.649 3.3801 9.5562 5.2245L9.3869 5.5104C9.1059 5.9845 8.6418 6.3217 8.1041 6.4424L7.791 6.5126C5.6989 6.9821 4.2802 8.9311 4.4764 11.0662L4.5084 11.4147C4.5584 11.9588 4.3836 12.4997 4.0246 12.9117L3.7804 13.1919C2.3785 14.8005 2.3807 17.1976 3.7854 18.8037L4.0221 19.0744C4.3826 19.4867 4.5583 20.0287 4.5082 20.574L4.4754 20.9304C4.2796 23.0612 5.6925 25.0075 7.7791 25.4815L8.1076 25.5561C8.6432 25.6777 9.1053 26.0144 9.3853 26.4869L9.5515 26.7675C10.6463 28.6153 12.944 29.3613 14.9155 28.5089L15.2091 28.382C15.7139 28.1637 16.2864 28.1629 16.7919 28.38L17.0895 28.5079C19.0593 29.3537 21.3511 28.6065 22.4437 26.7621L22.6148 26.4736C22.8947 26.0011 23.3568 25.6644 23.8924 25.5428L24.22 25.4684C26.3071 24.9943 27.7199 23.0473 27.5236 20.9161L27.492 20.5743C27.4417 20.0288 27.6175 19.4865 27.9781 19.0741L28.2103 18.8088ZM13.9253 21.82C13.6649 22.0812 13.2418 22.0812 12.9813 21.82L8.8568 17.6848C8.5971 17.4243 8.5973 17.0027 8.8575 16.7425L9.8876 15.7124C10.1483 15.4517 10.5712 15.4521 10.8314 15.7135L13.4533 18.3467L20.7819 10.993C21.0421 10.7319 21.4649 10.7315 21.7256 10.9922L22.7559 12.0226C23.016 12.2827 23.0163 12.7043 22.7565 12.9647L13.9253 21.82Z\",\n        eo: true,\n      },\n    ],\n  },\n};\n\n/** Props for {@link VerifiedIcon}. See {@link BaseIconProps} for the shared shape. */\nexport type VerifiedIconProps = BaseIconProps;\n\n/**\n * Verified badge icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.\n * Defaults to the filled variant.\n *\n * @example\n * ```tsx\n * <VerifiedIcon size={24} />\n * ```\n */\nexport const VerifiedIcon = React.forwardRef<SVGSVGElement, VerifiedIconProps>(\n  ({ filled = true, ...props }, ref) => (\n    <BaseIcon ref={ref} variants={VARIANTS} filled={filled} {...props} />\n  ),\n);\n\nVerifiedIcon.displayName = \"VerifiedIcon\";\n"],"names":["React","jsx","BaseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,WAAyB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,QACH,IAAI;AAAA,MAAA;AAAA,MAEN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,QACH,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,QACH,IAAI;AAAA,MAAA;AAAA,MAEN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,QACH,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,QACH,IAAI;AAAA,MAAA;AAAA,MAEN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,QACH,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ;AAcO,MAAM,eAAeA,iBAAM;AAAA,EAChC,CAAC,EAAE,SAAS,MAAM,GAAG,MAAA,GAAS,QAC5BC,2BAAAA,IAACC,SAAAA,YAAS,KAAU,UAAU,UAAU,QAAiB,GAAG,MAAA,CAAO;AAEvE;AAEA,aAAa,cAAc;;"}

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

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

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

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

package/dist/cjs/components/Pagination/Pagination.cjs

@@ -68,7 +68,7 @@ const Pagination = React__namespace.forwardRef(
         className: cn.cn(
           "inline-flex items-center pb-4",
           variant === "default" && "gap-3",
-          variant === "dots" && "gap-4",
+          variant === "dots" && "gap-3",
           className
         ),
         ...props,
@@ -88,7 +88,7 @@ const Pagination = React__namespace.forwardRef(
             (page) => typeof page === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
-                className: "flex size-4 items-center justify-center text-content-secondary text-xs",
+                className: "typography-description-12px-regular flex min-w-6 items-center justify-center p-1 text-content-primary",
                 "aria-hidden": "true",
                 children: "…"
               },
@@ -101,8 +101,8 @@ const Pagination = React__namespace.forwardRef(
                 "aria-current": page === currentPage ? "page" : void 0,
                 onClick: () => onPageChange?.(page),
                 className: cn.cn(
-                  "flex size-4 cursor-pointer items-center justify-center rounded-full text-xs focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150",
-                  page === currentPage ? "bg-buttons-primary-default text-content-primary-inverted" : "bg-neutral-alphas-50 text-content-primary hover:bg-neutral-alphas-100 active:bg-neutral-alphas-100"
+                  "typography-description-12px-regular flex min-w-6 cursor-pointer items-center justify-center rounded-2xs p-1 focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150",
+                  page === currentPage ? "bg-surface-primary-inverted text-content-primary-inverted" : "text-content-primary hover:bg-buttons-secondary-default active:bg-buttons-secondary-hover"
                 ),
                 children: page
               },
@@ -116,13 +116,13 @@ const Pagination = React__namespace.forwardRef(
               "aria-label": getPageLabel(page),
               "aria-current": page === currentPage ? "page" : void 0,
               onClick: () => onPageChange?.(page),
-              className: "flex size-6 cursor-pointer items-center justify-center rounded-full focus-visible:shadow-focus-ring focus-visible:outline-none",
+              className: "group flex size-6 cursor-pointer items-center justify-center rounded-2xs focus-visible:shadow-focus-ring focus-visible:outline-none",
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
                   className: cn.cn(
-                    "block rounded-full motion-safe:transition-all motion-safe:duration-150",
-                    page === currentPage ? "size-2 bg-neutral-alphas-400" : "size-1.5 bg-neutral-alphas-200 hover:bg-neutral-alphas-300 active:bg-neutral-alphas-300"
+                    "block size-2 rounded-2xs motion-safe:transition-colors motion-safe:duration-150",
+                    page === currentPage ? "bg-surface-primary-inverted" : "bg-buttons-secondary-default group-hover:bg-buttons-secondary-hover group-active:bg-buttons-secondary-hover"
                   )
                 }
               )

package/dist/cjs/components/Pagination/Pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.cjs","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { ChevronLeftIcon } from \"../Icons/ChevronLeftIcon\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\n/** Pagination display style — numbered buttons or minimal dots. */\nexport type PaginationVariant = \"default\" | \"dots\";\n\nexport interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, \"onChange\"> {\n  /** Display style — numbered page buttons or minimal dots. @default \"default\" */\n  variant?: PaginationVariant;\n  /** Total number of pages. */\n  totalPages: number;\n  /** Current active page (1-indexed). */\n  currentPage: number;\n  /** Callback fired when the active page changes. Receives the new 1-indexed page number. */\n  onPageChange?: (page: number) => void;\n  /** Accessible label for the `<nav>` landmark. @default \"Pagination\" */\n  ariaLabel?: string;\n  /** Accessible label for the previous-page button. @default \"Previous page\" */\n  previousLabel?: string;\n  /** Accessible label for the next-page button. @default \"Next page\" */\n  nextLabel?: string;\n  /** Function that returns an accessible label for each page button. @default (page) => \\`Page ${page}\\` */\n  getPageLabel?: (page: number) => string;\n}\n\ntype PageItem = number | \"ellipsis-start\" | \"ellipsis-end\";\n\nfunction getVisiblePages(currentPage: number, totalPages: number): PageItem[] {\n  if (totalPages <= 7) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const pages: PageItem[] = [1];\n\n  if (currentPage <= 4) {\n    pages.push(2, 3, 4, 5, \"ellipsis-end\");\n  } else if (currentPage >= totalPages - 3) {\n    pages.push(\"ellipsis-start\", totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1);\n  } else {\n    pages.push(\"ellipsis-start\", currentPage - 1, currentPage, currentPage + 1, \"ellipsis-end\");\n  }\n\n  pages.push(totalPages);\n  return pages;\n}\n\n/**\n * Page navigation control with previous/next buttons and numbered page\n * indicators. Supports a numbered-buttons layout (`\"default\"`) and a compact\n * dots layout (`\"dots\"`).\n *\n * @example\n * ```tsx\n * <Pagination totalPages={10} currentPage={page} onPageChange={setPage} />\n * ```\n */\nexport const Pagination = React.forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      variant = \"default\",\n      totalPages,\n      currentPage,\n      onPageChange,\n      ariaLabel = \"Pagination\",\n      previousLabel = \"Previous page\",\n      nextLabel = \"Next page\",\n      getPageLabel = (page: number) => `Page ${page}`,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const isFirstPage = currentPage <= 1;\n    const isLastPage = currentPage >= totalPages;\n\n    const handlePrevious = () => {\n      if (!isFirstPage) onPageChange?.(currentPage - 1);\n    };\n\n    const handleNext = () => {\n      if (!isLastPage) onPageChange?.(currentPage + 1);\n    };\n\n    return (\n      <nav\n        ref={ref}\n        aria-label={ariaLabel}\n        className={cn(\n          \"inline-flex items-center pb-4\",\n          variant === \"default\" && \"gap-3\",\n          variant === \"dots\" && \"gap-4\",\n          className,\n        )}\n        {...props}\n      >\n        <IconButton\n          variant=\"tertiary\"\n          size=\"32\"\n          icon={<ChevronLeftIcon />}\n          aria-label={previousLabel}\n          disabled={isFirstPage}\n          onClick={handlePrevious}\n        />\n\n        {variant === \"default\" && (\n          <div className=\"flex items-center gap-3\">\n            {getVisiblePages(currentPage, totalPages).map((page) =>\n              typeof page === \"string\" ? (\n                <span\n                  key={page}\n                  className=\"flex size-4 items-center justify-center text-content-secondary text-xs\"\n                  aria-hidden=\"true\"\n                >\n                  &hellip;\n                </span>\n              ) : (\n                <button\n                  key={page}\n                  type=\"button\"\n                  aria-label={getPageLabel(page)}\n                  aria-current={page === currentPage ? \"page\" : undefined}\n                  onClick={() => onPageChange?.(page)}\n                  className={cn(\n                    \"flex size-4 cursor-pointer items-center justify-center rounded-full text-xs focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150\",\n                    page === currentPage\n                      ? \"bg-buttons-primary-default text-content-primary-inverted\"\n                      : \"bg-neutral-alphas-50 text-content-primary hover:bg-neutral-alphas-100 active:bg-neutral-alphas-100\",\n                  )}\n                >\n                  {page}\n                </button>\n              ),\n            )}\n          </div>\n        )}\n\n        {variant === \"dots\" && (\n          <div className=\"flex items-center\">\n            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (\n              <button\n                key={page}\n                type=\"button\"\n                aria-label={getPageLabel(page)}\n                aria-current={page === currentPage ? \"page\" : undefined}\n                onClick={() => onPageChange?.(page)}\n                className=\"flex size-6 cursor-pointer items-center justify-center rounded-full focus-visible:shadow-focus-ring focus-visible:outline-none\"\n              >\n                <span\n                  className={cn(\n                    \"block rounded-full motion-safe:transition-all motion-safe:duration-150\",\n                    page === currentPage\n                      ? \"size-2 bg-neutral-alphas-400\"\n                      : \"size-1.5 bg-neutral-alphas-200 hover:bg-neutral-alphas-300 active:bg-neutral-alphas-300\",\n                  )}\n                />\n              </button>\n            ))}\n          </div>\n        )}\n\n        <IconButton\n          variant=\"tertiary\"\n          size=\"32\"\n          icon={<ChevronRightIcon />}\n          aria-label={nextLabel}\n          disabled={isLastPage}\n          onClick={handleNext}\n        />\n      </nav>\n    );\n  },\n);\n\nPagination.displayName = \"Pagination\";\n"],"names":["React","jsxs","cn","jsx","IconButton","ChevronLeftIcon","ChevronRightIcon"],"mappings":"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"}
+{"version":3,"file":"Pagination.cjs","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { ChevronLeftIcon } from \"../Icons/ChevronLeftIcon\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\n/** Pagination display style — numbered buttons or minimal dots. */\nexport type PaginationVariant = \"default\" | \"dots\";\n\nexport interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, \"onChange\"> {\n  /** Display style — numbered page buttons or minimal dots. @default \"default\" */\n  variant?: PaginationVariant;\n  /** Total number of pages. */\n  totalPages: number;\n  /** Current active page (1-indexed). */\n  currentPage: number;\n  /** Callback fired when the active page changes. Receives the new 1-indexed page number. */\n  onPageChange?: (page: number) => void;\n  /** Accessible label for the `<nav>` landmark. @default \"Pagination\" */\n  ariaLabel?: string;\n  /** Accessible label for the previous-page button. @default \"Previous page\" */\n  previousLabel?: string;\n  /** Accessible label for the next-page button. @default \"Next page\" */\n  nextLabel?: string;\n  /** Function that returns an accessible label for each page button. @default (page) => \\`Page ${page}\\` */\n  getPageLabel?: (page: number) => string;\n}\n\ntype PageItem = number | \"ellipsis-start\" | \"ellipsis-end\";\n\nfunction getVisiblePages(currentPage: number, totalPages: number): PageItem[] {\n  if (totalPages <= 7) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const pages: PageItem[] = [1];\n\n  if (currentPage <= 4) {\n    pages.push(2, 3, 4, 5, \"ellipsis-end\");\n  } else if (currentPage >= totalPages - 3) {\n    pages.push(\"ellipsis-start\", totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1);\n  } else {\n    pages.push(\"ellipsis-start\", currentPage - 1, currentPage, currentPage + 1, \"ellipsis-end\");\n  }\n\n  pages.push(totalPages);\n  return pages;\n}\n\n/**\n * Page navigation control with previous/next buttons and numbered page\n * indicators. Supports a numbered-buttons layout (`\"default\"`) and a compact\n * dots layout (`\"dots\"`).\n *\n * @example\n * ```tsx\n * <Pagination totalPages={10} currentPage={page} onPageChange={setPage} />\n * ```\n */\nexport const Pagination = React.forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      variant = \"default\",\n      totalPages,\n      currentPage,\n      onPageChange,\n      ariaLabel = \"Pagination\",\n      previousLabel = \"Previous page\",\n      nextLabel = \"Next page\",\n      getPageLabel = (page: number) => `Page ${page}`,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const isFirstPage = currentPage <= 1;\n    const isLastPage = currentPage >= totalPages;\n\n    const handlePrevious = () => {\n      if (!isFirstPage) onPageChange?.(currentPage - 1);\n    };\n\n    const handleNext = () => {\n      if (!isLastPage) onPageChange?.(currentPage + 1);\n    };\n\n    return (\n      <nav\n        ref={ref}\n        aria-label={ariaLabel}\n        className={cn(\n          \"inline-flex items-center pb-4\",\n          variant === \"default\" && \"gap-3\",\n          variant === \"dots\" && \"gap-3\",\n          className,\n        )}\n        {...props}\n      >\n        <IconButton\n          variant=\"tertiary\"\n          size=\"32\"\n          icon={<ChevronLeftIcon />}\n          aria-label={previousLabel}\n          disabled={isFirstPage}\n          onClick={handlePrevious}\n        />\n\n        {variant === \"default\" && (\n          <div className=\"flex items-center gap-3\">\n            {getVisiblePages(currentPage, totalPages).map((page) =>\n              typeof page === \"string\" ? (\n                <span\n                  key={page}\n                  className=\"typography-description-12px-regular flex min-w-6 items-center justify-center p-1 text-content-primary\"\n                  aria-hidden=\"true\"\n                >\n                  &hellip;\n                </span>\n              ) : (\n                <button\n                  key={page}\n                  type=\"button\"\n                  aria-label={getPageLabel(page)}\n                  aria-current={page === currentPage ? \"page\" : undefined}\n                  onClick={() => onPageChange?.(page)}\n                  className={cn(\n                    \"typography-description-12px-regular flex min-w-6 cursor-pointer items-center justify-center rounded-2xs p-1 focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150\",\n                    page === currentPage\n                      ? \"bg-surface-primary-inverted text-content-primary-inverted\"\n                      : \"text-content-primary hover:bg-buttons-secondary-default active:bg-buttons-secondary-hover\",\n                  )}\n                >\n                  {page}\n                </button>\n              ),\n            )}\n          </div>\n        )}\n\n        {variant === \"dots\" && (\n          <div className=\"flex items-center\">\n            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (\n              <button\n                key={page}\n                type=\"button\"\n                aria-label={getPageLabel(page)}\n                aria-current={page === currentPage ? \"page\" : undefined}\n                onClick={() => onPageChange?.(page)}\n                className=\"group flex size-6 cursor-pointer items-center justify-center rounded-2xs focus-visible:shadow-focus-ring focus-visible:outline-none\"\n              >\n                <span\n                  className={cn(\n                    \"block size-2 rounded-2xs motion-safe:transition-colors motion-safe:duration-150\",\n                    page === currentPage\n                      ? \"bg-surface-primary-inverted\"\n                      : \"bg-buttons-secondary-default group-hover:bg-buttons-secondary-hover group-active:bg-buttons-secondary-hover\",\n                  )}\n                />\n              </button>\n            ))}\n          </div>\n        )}\n\n        <IconButton\n          variant=\"tertiary\"\n          size=\"32\"\n          icon={<ChevronRightIcon />}\n          aria-label={nextLabel}\n          disabled={isLastPage}\n          onClick={handleNext}\n        />\n      </nav>\n    );\n  },\n);\n\nPagination.displayName = \"Pagination\";\n"],"names":["React","jsxs","cn","jsx","IconButton","ChevronLeftIcon","ChevronRightIcon"],"mappings":"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"}

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

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

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

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