@fanvue/ui 2.4.0 → 2.5.0

package/dist/cjs/components/Icons/ThumbDownFilledIcon.cjs

@@ -0,0 +1,45 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ThumbDownFilledIcon = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        ref,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        "aria-hidden": "true",
+        className: cn.cn("size-6", className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", { fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: "translate(2 2)", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.38989 3.23001V13.39C6.38989 13.79 6.50989 14.18 6.72989 14.51L9.4599 18.57C9.8899 19.22 10.9599 19.68 11.8699 19.34C12.8499 19.01 13.4999 17.91 13.2899 16.93L12.7699 13.66C12.7299 13.36 12.8099 13.09 12.9799 12.88C13.1499 12.69 13.3999 12.57 13.6699 12.57H17.7799C18.5699 12.57 19.2499 12.25 19.6499 11.69C20.0299 11.15 20.0999 10.45 19.8499 9.74001L17.3899 2.25001C17.0799 1.01001 15.7299 5.72205e-06 14.3899 5.72205e-06H10.4899C9.8199 5.72205e-06 8.8799 0.230005 8.4499 0.660006L7.16989 1.65001C6.67989 2.02001 6.38989 2.61 6.38989 3.23001Z" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.21 15.3398H2.18C0.63 15.3398 0 14.7398 0 13.2598V3.1998C0 1.7198 0.63 1.1198 2.18 1.1198H3.21C4.76 1.1198 5.39 1.7198 5.39 3.1998V13.2598C5.39 14.7398 4.76 15.3398 3.21 15.3398Z" })
+        ] }) })
+      }
+    );
+  }
+);
+ThumbDownFilledIcon.displayName = "ThumbDownFilledIcon";
+exports.ThumbDownFilledIcon = ThumbDownFilledIcon;
+//# sourceMappingURL=ThumbDownFilledIcon.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbDownFilledIcon.cjs","sources":["../../../../src/components/Icons/ThumbDownFilledIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const ThumbDownFilledIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"size-6\", className)}\n        {...props}\n      >\n        <g fill=\"currentColor\">\n          <g transform=\"translate(2 2)\">\n            <path d=\"M6.38989 3.23001V13.39C6.38989 13.79 6.50989 14.18 6.72989 14.51L9.4599 18.57C9.8899 19.22 10.9599 19.68 11.8699 19.34C12.8499 19.01 13.4999 17.91 13.2899 16.93L12.7699 13.66C12.7299 13.36 12.8099 13.09 12.9799 12.88C13.1499 12.69 13.3999 12.57 13.6699 12.57H17.7799C18.5699 12.57 19.2499 12.25 19.6499 11.69C20.0299 11.15 20.0999 10.45 19.8499 9.74001L17.3899 2.25001C17.0799 1.01001 15.7299 5.72205e-06 14.3899 5.72205e-06H10.4899C9.8199 5.72205e-06 8.8799 0.230005 8.4499 0.660006L7.16989 1.65001C6.67989 2.02001 6.38989 2.61 6.38989 3.23001Z\" />\n            <path d=\"M3.21 15.3398H2.18C0.63 15.3398 0 14.7398 0 13.2598V3.1998C0 1.7198 0.63 1.1198 2.18 1.1198H3.21C4.76 1.1198 5.39 1.7198 5.39 3.1998V13.2598C5.39 14.7398 4.76 15.3398 3.21 15.3398Z\" />\n          </g>\n        </g>\n      </svg>\n    );\n  },\n);\n\nThumbDownFilledIcon.displayName = \"ThumbDownFilledIcon\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,sBAAsBA,iBAAM;AAAA,EACvC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAWC,GAAAA,GAAG,UAAU,SAAS;AAAA,QAChC,GAAG;AAAA,QAEJ,yCAAC,KAAA,EAAE,MAAK,gBACN,UAAAC,2BAAAA,KAAC,KAAA,EAAE,WAAU,kBACX,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,GAAE,oiBAAA,CAAoiB;AAAA,UAC5iBA,2BAAAA,IAAC,QAAA,EAAK,GAAE,uLAAA,CAAuL;AAAA,QAAA,EAAA,CACjM,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,oBAAoB,cAAc;;"}

package/dist/cjs/components/Icons/ThumbUpFilledIcon.cjs

@@ -0,0 +1,45 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ThumbUpFilledIcon = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        ref,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        "aria-hidden": "true",
+        className: cn.cn("size-6", className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", { fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: "translate(2 2)", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.38989 16.2251V6.06508C6.38989 5.66508 6.50989 5.27508 6.72989 4.94508L9.4599 0.885083C9.8899 0.235083 10.9599 -0.224917 11.8699 0.115083C12.8499 0.445083 13.4999 1.54508 13.2899 2.52508L12.7699 5.79508C12.7299 6.09508 12.8099 6.36508 12.9799 6.57508C13.1499 6.76508 13.3999 6.88508 13.6699 6.88508H17.7799C18.5699 6.88508 19.2499 7.20508 19.6499 7.76507C20.0299 8.30507 20.0999 9.00507 19.8499 9.71507L17.3899 17.2051C17.0799 18.4451 15.7299 19.4551 14.3899 19.4551H10.4899C9.8199 19.4551 8.8799 19.2251 8.4499 18.7951L7.16989 17.8051C6.67989 17.4351 6.38989 16.8451 6.38989 16.2251Z" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.21 4.11523H2.18C0.63 4.11523 0 4.71523 0 6.19523V16.2553C0 17.7353 0.63 18.3353 2.18 18.3353H3.21C4.76 18.3353 5.39 17.7353 5.39 16.2553V6.19523C5.39 4.71523 4.76 4.11523 3.21 4.11523Z" })
+        ] }) })
+      }
+    );
+  }
+);
+ThumbUpFilledIcon.displayName = "ThumbUpFilledIcon";
+exports.ThumbUpFilledIcon = ThumbUpFilledIcon;
+//# sourceMappingURL=ThumbUpFilledIcon.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbUpFilledIcon.cjs","sources":["../../../../src/components/Icons/ThumbUpFilledIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const ThumbUpFilledIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"size-6\", className)}\n        {...props}\n      >\n        <g fill=\"currentColor\">\n          <g transform=\"translate(2 2)\">\n            <path d=\"M6.38989 16.2251V6.06508C6.38989 5.66508 6.50989 5.27508 6.72989 4.94508L9.4599 0.885083C9.8899 0.235083 10.9599 -0.224917 11.8699 0.115083C12.8499 0.445083 13.4999 1.54508 13.2899 2.52508L12.7699 5.79508C12.7299 6.09508 12.8099 6.36508 12.9799 6.57508C13.1499 6.76508 13.3999 6.88508 13.6699 6.88508H17.7799C18.5699 6.88508 19.2499 7.20508 19.6499 7.76507C20.0299 8.30507 20.0999 9.00507 19.8499 9.71507L17.3899 17.2051C17.0799 18.4451 15.7299 19.4551 14.3899 19.4551H10.4899C9.8199 19.4551 8.8799 19.2251 8.4499 18.7951L7.16989 17.8051C6.67989 17.4351 6.38989 16.8451 6.38989 16.2251Z\" />\n            <path d=\"M3.21 4.11523H2.18C0.63 4.11523 0 4.71523 0 6.19523V16.2553C0 17.7353 0.63 18.3353 2.18 18.3353H3.21C4.76 18.3353 5.39 17.7353 5.39 16.2553V6.19523C5.39 4.71523 4.76 4.11523 3.21 4.11523Z\" />\n          </g>\n        </g>\n      </svg>\n    );\n  },\n);\n\nThumbUpFilledIcon.displayName = \"ThumbUpFilledIcon\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,oBAAoBA,iBAAM;AAAA,EACrC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAWC,GAAAA,GAAG,UAAU,SAAS;AAAA,QAChC,GAAG;AAAA,QAEJ,yCAAC,KAAA,EAAE,MAAK,gBACN,UAAAC,2BAAAA,KAAC,KAAA,EAAE,WAAU,kBACX,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,GAAE,6kBAAA,CAA6kB;AAAA,UACrlBA,2BAAAA,IAAC,QAAA,EAAK,GAAE,8LAAA,CAA8L;AAAA,QAAA,EAAA,CACxM,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,kBAAkB,cAAc;;"}

package/dist/cjs/components/Stepper/Stepper.cjs

@@ -0,0 +1,72 @@
+"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 StepperStep = require("./StepperStep.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 CONNECTOR_MARGIN = {
+  sm: "mt-3",
+  md: "mt-4",
+  lg: "mt-5"
+};
+const Stepper = React__namespace.forwardRef(
+  ({ activeStep, steps, size = "md", className, ...props }, ref) => {
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: <fieldset> adds unwanted browser styling for a non-interactive progress indicator
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          role: "group",
+          "aria-label": "Progress",
+          className: cn.cn("flex items-start", className),
+          ...props,
+          children: steps.map((step, index) => {
+            const state = index < activeStep ? "completed" : index === activeStep ? "active" : "upcoming";
+            return /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                StepperStep.StepperStep,
+                {
+                  state,
+                  size,
+                  stepNumber: index + 1,
+                  title: step.title,
+                  description: step.description,
+                  className: "shrink-0"
+                }
+              ),
+              index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn.cn("h-px min-w-6 flex-1 bg-border-primary", CONNECTOR_MARGIN[size]),
+                  "aria-hidden": "true"
+                }
+              )
+            ] }, index);
+          })
+        }
+      )
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+exports.Stepper = Stepper;
+//# sourceMappingURL=Stepper.cjs.map

package/dist/cjs/components/Stepper/Stepper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.cjs","sources":["../../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { StepperStep, type StepperStepSize } from \"./StepperStep\";\n\n/** Configuration for a single step within a {@link Stepper}. */\nexport interface StepItem {\n  /** Primary label for the step. */\n  title: string;\n  /** Secondary description for the step. */\n  description?: string;\n}\n\nexport interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Zero-based index of the currently active step. Steps before this are marked completed. */\n  activeStep: number;\n  /** Configuration for each step. */\n  steps: StepItem[];\n  /** Size preset applied to all step indicators and labels. @default \"md\" */\n  size?: StepperStepSize;\n}\n\nconst CONNECTOR_MARGIN: Record<StepperStepSize, string> = {\n  sm: \"mt-3\",\n  md: \"mt-4\",\n  lg: \"mt-5\",\n};\n\n/**\n * A horizontal progress stepper that displays a sequence of steps with\n * completed, active, and upcoming states.\n *\n * @example\n * ```tsx\n * <Stepper\n *   activeStep={1}\n *   steps={[\n *     { title: \"Account\", description: \"Create account\" },\n *     { title: \"Profile\", description: \"Set up profile\" },\n *     { title: \"Done\", description: \"All set!\" },\n *   ]}\n * />\n * ```\n */\nexport const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  ({ activeStep, steps, size = \"md\", className, ...props }, ref) => {\n    return (\n      // biome-ignore lint/a11y/useSemanticElements: <fieldset> adds unwanted browser styling for a non-interactive progress indicator\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label=\"Progress\"\n        className={cn(\"flex items-start\", className)}\n        {...props}\n      >\n        {steps.map((step, index) => {\n          const state =\n            index < activeStep ? \"completed\" : index === activeStep ? \"active\" : \"upcoming\";\n\n          return (\n            <React.Fragment key={index}>\n              <StepperStep\n                state={state}\n                size={size}\n                stepNumber={index + 1}\n                title={step.title}\n                description={step.description}\n                className=\"shrink-0\"\n              />\n              {index < steps.length - 1 && (\n                <div\n                  className={cn(\"h-px min-w-6 flex-1 bg-border-primary\", CONNECTOR_MARGIN[size])}\n                  aria-hidden=\"true\"\n                />\n              )}\n            </React.Fragment>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nStepper.displayName = \"Stepper\";\n"],"names":["React","jsx","cn","jsxs","StepperStep"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,mBAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAkBO,MAAM,UAAUA,iBAAM;AAAA,EAC3B,CAAC,EAAE,YAAY,OAAO,OAAO,MAAM,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChE;AAAA;AAAA,MAEEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UACL,cAAW;AAAA,UACX,WAAWC,GAAAA,GAAG,oBAAoB,SAAS;AAAA,UAC1C,GAAG;AAAA,UAEH,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,kBAAM,QACJ,QAAQ,aAAa,cAAc,UAAU,aAAa,WAAW;AAEvE,mBACEC,gCAACH,iBAAM,UAAN,EACC,UAAA;AAAA,cAAAC,2BAAAA;AAAAA,gBAACG,YAAAA;AAAAA,gBAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA,YAAY,QAAQ;AAAA,kBACpB,OAAO,KAAK;AAAA,kBACZ,aAAa,KAAK;AAAA,kBAClB,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEX,QAAQ,MAAM,SAAS,KACtBH,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWC,GAAAA,GAAG,yCAAyC,iBAAiB,IAAI,CAAC;AAAA,kBAC7E,eAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,YACd,EAAA,GAbiB,KAerB;AAAA,UAEJ,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA;AAAA,EAGP;AACF;AAEA,QAAQ,cAAc;;"}

package/dist/cjs/components/Stepper/StepperStep.cjs

@@ -0,0 +1,103 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const CheckIcon = require("../Icons/CheckIcon.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 INDICATOR_SIZE = {
+  sm: "size-6",
+  md: "size-8",
+  lg: "size-10"
+};
+const INDICATOR_STATE = {
+  completed: "bg-success-surface",
+  active: "border border-brand-primary-default bg-brand-primary-muted",
+  upcoming: "bg-neutral-alphas-50"
+};
+const NUMBER_TYPOGRAPHY = {
+  sm: "typography-semibold-body-sm",
+  md: "typography-semibold-body-md",
+  lg: "typography-semibold-body-lg"
+};
+const NUMBER_COLOR = {
+  completed: "",
+  active: "text-content-primary",
+  upcoming: "text-content-secondary"
+};
+const CONTAINER_GAP = {
+  sm: "gap-1",
+  md: "gap-2",
+  lg: "gap-2"
+};
+const TITLE_TYPOGRAPHY = {
+  sm: "typography-regular-body-sm",
+  md: "typography-regular-body-md",
+  lg: "typography-regular-body-lg"
+};
+const DESCRIPTION_TYPOGRAPHY = {
+  sm: "typography-regular-body-sm",
+  md: "typography-regular-body-sm",
+  lg: "typography-regular-body-md"
+};
+const LABEL_COLOR = {
+  completed: "text-content-secondary",
+  active: "text-content-primary",
+  upcoming: "text-content-tertiary"
+};
+const CHECK_ICON_SIZE = {
+  sm: "size-3",
+  md: "size-4",
+  lg: "size-5"
+};
+const StepperStep = React__namespace.forwardRef(
+  ({ state = "upcoming", size = "md", stepNumber, title, description, className, ...props }, ref) => {
+    const hasLabels = title != null || description != null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn.cn("flex flex-col items-center", CONTAINER_GAP[size], className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn.cn(
+                "flex shrink-0 items-center justify-center rounded-full",
+                INDICATOR_SIZE[size],
+                INDICATOR_STATE[state]
+              ),
+              "aria-hidden": "true",
+              children: state === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon.CheckIcon, { className: cn.cn(CHECK_ICON_SIZE[size], "text-success-content") }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn.cn(NUMBER_TYPOGRAPHY[size], NUMBER_COLOR[state]), children: stepNumber })
+            }
+          ),
+          hasLabels && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn.cn("flex flex-col items-center gap-1 text-center", LABEL_COLOR[state]), children: [
+            title != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: TITLE_TYPOGRAPHY[size], children: title }),
+            description != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: DESCRIPTION_TYPOGRAPHY[size], children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+StepperStep.displayName = "StepperStep";
+exports.StepperStep = StepperStep;
+//# sourceMappingURL=StepperStep.cjs.map

package/dist/cjs/components/Stepper/StepperStep.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperStep.cjs","sources":["../../../../src/components/Stepper/StepperStep.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\n\n/** Current state of a step in the stepper. */\nexport type StepperStepState = \"completed\" | \"active\" | \"upcoming\";\n\n/** Size preset for the step indicator and labels. */\nexport type StepperStepSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface StepperStepProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current state of the step. @default \"upcoming\" */\n  state?: StepperStepState;\n  /** Size preset for the indicator and labels. @default \"md\" */\n  size?: StepperStepSize;\n  /** Step number displayed in the indicator for active and upcoming states. */\n  stepNumber?: number;\n  /** Primary label shown below the indicator. */\n  title?: string;\n  /** Secondary description shown below the title. */\n  description?: string;\n}\n\nconst INDICATOR_SIZE: Record<StepperStepSize, string> = {\n  sm: \"size-6\",\n  md: \"size-8\",\n  lg: \"size-10\",\n};\n\nconst INDICATOR_STATE: Record<StepperStepState, string> = {\n  completed: \"bg-success-surface\",\n  active: \"border border-brand-primary-default bg-brand-primary-muted\",\n  upcoming: \"bg-neutral-alphas-50\",\n};\n\nconst NUMBER_TYPOGRAPHY: Record<StepperStepSize, string> = {\n  sm: \"typography-semibold-body-sm\",\n  md: \"typography-semibold-body-md\",\n  lg: \"typography-semibold-body-lg\",\n};\n\nconst NUMBER_COLOR: Record<StepperStepState, string> = {\n  completed: \"\",\n  active: \"text-content-primary\",\n  upcoming: \"text-content-secondary\",\n};\n\nconst CONTAINER_GAP: Record<StepperStepSize, string> = {\n  sm: \"gap-1\",\n  md: \"gap-2\",\n  lg: \"gap-2\",\n};\n\nconst TITLE_TYPOGRAPHY: Record<StepperStepSize, string> = {\n  sm: \"typography-regular-body-sm\",\n  md: \"typography-regular-body-md\",\n  lg: \"typography-regular-body-lg\",\n};\n\nconst DESCRIPTION_TYPOGRAPHY: Record<StepperStepSize, string> = {\n  sm: \"typography-regular-body-sm\",\n  md: \"typography-regular-body-sm\",\n  lg: \"typography-regular-body-md\",\n};\n\nconst LABEL_COLOR: Record<StepperStepState, string> = {\n  completed: \"text-content-secondary\",\n  active: \"text-content-primary\",\n  upcoming: \"text-content-tertiary\",\n};\n\nconst CHECK_ICON_SIZE: Record<StepperStepSize, string> = {\n  sm: \"size-3\",\n  md: \"size-4\",\n  lg: \"size-5\",\n};\n\n/**\n * A single step indicator with optional labels, used standalone or within a {@link Stepper}.\n *\n * @example\n * ```tsx\n * <StepperStep state=\"active\" stepNumber={2} title=\"Profile\" description=\"Set up profile\" />\n * ```\n */\nexport const StepperStep = React.forwardRef<HTMLDivElement, StepperStepProps>(\n  (\n    { state = \"upcoming\", size = \"md\", stepNumber, title, description, className, ...props },\n    ref,\n  ) => {\n    const hasLabels = title != null || description != null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex flex-col items-center\", CONTAINER_GAP[size], className)}\n        {...props}\n      >\n        <div\n          className={cn(\n            \"flex shrink-0 items-center justify-center rounded-full\",\n            INDICATOR_SIZE[size],\n            INDICATOR_STATE[state],\n          )}\n          aria-hidden=\"true\"\n        >\n          {state === \"completed\" ? (\n            <CheckIcon className={cn(CHECK_ICON_SIZE[size], \"text-success-content\")} />\n          ) : (\n            <span className={cn(NUMBER_TYPOGRAPHY[size], NUMBER_COLOR[state])}>{stepNumber}</span>\n          )}\n        </div>\n\n        {hasLabels && (\n          <div className={cn(\"flex flex-col items-center gap-1 text-center\", LABEL_COLOR[state])}>\n            {title != null && <span className={TITLE_TYPOGRAPHY[size]}>{title}</span>}\n            {description != null && (\n              <span className={DESCRIPTION_TYPOGRAPHY[size]}>{description}</span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nStepperStep.displayName = \"StepperStep\";\n"],"names":["React","jsxs","cn","jsx","CheckIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAM,iBAAkD;AAAA,EACtD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,kBAAoD;AAAA,EACxD,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,MAAM,oBAAqD;AAAA,EACzD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAiD;AAAA,EACrD,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,MAAM,gBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,mBAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,yBAA0D;AAAA,EAC9D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,cAAgD;AAAA,EACpD,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,MAAM,kBAAmD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAUO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CACE,EAAE,QAAQ,YAAY,OAAO,MAAM,YAAY,OAAO,aAAa,WAAW,GAAG,MAAA,GACjF,QACG;AACH,UAAM,YAAY,SAAS,QAAQ,eAAe;AAElD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,8BAA8B,cAAc,IAAI,GAAG,SAAS;AAAA,QACzE,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA;AAAAA,gBACT;AAAA,gBACA,eAAe,IAAI;AAAA,gBACnB,gBAAgB,KAAK;AAAA,cAAA;AAAA,cAEvB,eAAY;AAAA,cAEX,UAAA,UAAU,cACTC,2BAAAA,IAACC,UAAAA,WAAA,EAAU,WAAWF,GAAAA,GAAG,gBAAgB,IAAI,GAAG,sBAAsB,EAAA,CAAG,IAEzEC,2BAAAA,IAAC,QAAA,EAAK,WAAWD,GAAAA,GAAG,kBAAkB,IAAI,GAAG,aAAa,KAAK,CAAC,GAAI,UAAA,WAAA,CAAW;AAAA,YAAA;AAAA,UAAA;AAAA,UAIlF,6CACE,OAAA,EAAI,WAAWA,GAAAA,GAAG,gDAAgD,YAAY,KAAK,CAAC,GAClF,UAAA;AAAA,YAAA,SAAS,QAAQC,+BAAC,QAAA,EAAK,WAAW,iBAAiB,IAAI,GAAI,UAAA,OAAM;AAAA,YACjE,eAAe,QACdA,2BAAAA,IAAC,QAAA,EAAK,WAAW,uBAAuB,IAAI,GAAI,UAAA,YAAA,CAAY;AAAA,UAAA,EAAA,CAEhE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,YAAY,cAAc;;"}

package/dist/cjs/index.cjs

@@ -130,7 +130,9 @@ const Support2Icon = require("./components/Icons/Support2Icon.cjs");
 const SupportIcon = require("./components/Icons/SupportIcon.cjs");
 const TagIcon = require("./components/Icons/TagIcon.cjs");
 const TaskIcon = require("./components/Icons/TaskIcon.cjs");
+const ThumbDownFilledIcon = require("./components/Icons/ThumbDownFilledIcon.cjs");
 const ThumbDownIcon = require("./components/Icons/ThumbDownIcon.cjs");
+const ThumbUpFilledIcon = require("./components/Icons/ThumbUpFilledIcon.cjs");
 const ThumbUpIcon = require("./components/Icons/ThumbUpIcon.cjs");
 const TickCircleIcon = require("./components/Icons/TickCircleIcon.cjs");
 const TickCircleOffIcon = require("./components/Icons/TickCircleOffIcon.cjs");
@@ -167,6 +169,8 @@ const Select = require("./components/Select/Select.cjs");
 const Skeleton = require("./components/Skeleton/Skeleton.cjs");
 const Slider = require("./components/Slider/Slider.cjs");
 const Snackbar = require("./components/Snackbar/Snackbar.cjs");
+const Stepper = require("./components/Stepper/Stepper.cjs");
+const StepperStep = require("./components/Stepper/StepperStep.cjs");
 const Switch = require("./components/Switch/Switch.cjs");
 const SwitchField = require("./components/SwitchField/SwitchField.cjs");
 const SwitchToggle = require("./components/SwitchToggle/SwitchToggle.cjs");
@@ -346,7 +350,9 @@ exports.Support2Icon = Support2Icon.Support2Icon;
 exports.SupportIcon = SupportIcon.SupportIcon;
 exports.TagIcon = TagIcon.TagIcon;
 exports.TaskIcon = TaskIcon.TaskIcon;
+exports.ThumbDownFilledIcon = ThumbDownFilledIcon.ThumbDownFilledIcon;
 exports.ThumbDownIcon = ThumbDownIcon.ThumbDownIcon;
+exports.ThumbUpFilledIcon = ThumbUpFilledIcon.ThumbUpFilledIcon;
 exports.ThumbUpIcon = ThumbUpIcon.ThumbUpIcon;
 exports.TickCircleIcon = TickCircleIcon.TickCircleIcon;
 exports.TickCircleOffIcon = TickCircleOffIcon.TickCircleOffIcon;
@@ -390,6 +396,8 @@ exports.SelectSeparator = Select.SelectSeparator;
 exports.Skeleton = Skeleton.Skeleton;
 exports.Slider = Slider.Slider;
 exports.Snackbar = Snackbar.Snackbar;
+exports.Stepper = Stepper.Stepper;
+exports.StepperStep = StepperStep.StepperStep;
 exports.Switch = Switch.Switch;
 exports.SwitchField = SwitchField.SwitchField;
 exports.SwitchToggle = SwitchToggle.SwitchToggle;

package/dist/cjs/index.cjs.map

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

package/dist/components/Icons/ThumbDownFilledIcon.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const ThumbDownFilledIcon = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        "aria-hidden": "true",
+        className: cn("size-6", className),
+        ...props,
+        children: /* @__PURE__ */ jsx("g", { fill: "currentColor", children: /* @__PURE__ */ jsxs("g", { transform: "translate(2 2)", children: [
+          /* @__PURE__ */ jsx("path", { d: "M6.38989 3.23001V13.39C6.38989 13.79 6.50989 14.18 6.72989 14.51L9.4599 18.57C9.8899 19.22 10.9599 19.68 11.8699 19.34C12.8499 19.01 13.4999 17.91 13.2899 16.93L12.7699 13.66C12.7299 13.36 12.8099 13.09 12.9799 12.88C13.1499 12.69 13.3999 12.57 13.6699 12.57H17.7799C18.5699 12.57 19.2499 12.25 19.6499 11.69C20.0299 11.15 20.0999 10.45 19.8499 9.74001L17.3899 2.25001C17.0799 1.01001 15.7299 5.72205e-06 14.3899 5.72205e-06H10.4899C9.8199 5.72205e-06 8.8799 0.230005 8.4499 0.660006L7.16989 1.65001C6.67989 2.02001 6.38989 2.61 6.38989 3.23001Z" }),
+          /* @__PURE__ */ jsx("path", { d: "M3.21 15.3398H2.18C0.63 15.3398 0 14.7398 0 13.2598V3.1998C0 1.7198 0.63 1.1198 2.18 1.1198H3.21C4.76 1.1198 5.39 1.7198 5.39 3.1998V13.2598C5.39 14.7398 4.76 15.3398 3.21 15.3398Z" })
+        ] }) })
+      }
+    );
+  }
+);
+ThumbDownFilledIcon.displayName = "ThumbDownFilledIcon";
+export {
+  ThumbDownFilledIcon
+};
+//# sourceMappingURL=ThumbDownFilledIcon.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbDownFilledIcon.mjs","sources":["../../../src/components/Icons/ThumbDownFilledIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const ThumbDownFilledIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"size-6\", className)}\n        {...props}\n      >\n        <g fill=\"currentColor\">\n          <g transform=\"translate(2 2)\">\n            <path d=\"M6.38989 3.23001V13.39C6.38989 13.79 6.50989 14.18 6.72989 14.51L9.4599 18.57C9.8899 19.22 10.9599 19.68 11.8699 19.34C12.8499 19.01 13.4999 17.91 13.2899 16.93L12.7699 13.66C12.7299 13.36 12.8099 13.09 12.9799 12.88C13.1499 12.69 13.3999 12.57 13.6699 12.57H17.7799C18.5699 12.57 19.2499 12.25 19.6499 11.69C20.0299 11.15 20.0999 10.45 19.8499 9.74001L17.3899 2.25001C17.0799 1.01001 15.7299 5.72205e-06 14.3899 5.72205e-06H10.4899C9.8199 5.72205e-06 8.8799 0.230005 8.4499 0.660006L7.16989 1.65001C6.67989 2.02001 6.38989 2.61 6.38989 3.23001Z\" />\n            <path d=\"M3.21 15.3398H2.18C0.63 15.3398 0 14.7398 0 13.2598V3.1998C0 1.7198 0.63 1.1198 2.18 1.1198H3.21C4.76 1.1198 5.39 1.7198 5.39 3.1998V13.2598C5.39 14.7398 4.76 15.3398 3.21 15.3398Z\" />\n          </g>\n        </g>\n      </svg>\n    );\n  },\n);\n\nThumbDownFilledIcon.displayName = \"ThumbDownFilledIcon\";\n"],"names":[],"mappings":";;;;AAIO,MAAM,sBAAsB,MAAM;AAAA,EACvC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAW,GAAG,UAAU,SAAS;AAAA,QAChC,GAAG;AAAA,QAEJ,8BAAC,KAAA,EAAE,MAAK,gBACN,UAAA,qBAAC,KAAA,EAAE,WAAU,kBACX,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,GAAE,oiBAAA,CAAoiB;AAAA,UAC5iB,oBAAC,QAAA,EAAK,GAAE,uLAAA,CAAuL;AAAA,QAAA,EAAA,CACjM,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,oBAAoB,cAAc;"}

package/dist/components/Icons/ThumbUpFilledIcon.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const ThumbUpFilledIcon = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        "aria-hidden": "true",
+        className: cn("size-6", className),
+        ...props,
+        children: /* @__PURE__ */ jsx("g", { fill: "currentColor", children: /* @__PURE__ */ jsxs("g", { transform: "translate(2 2)", children: [
+          /* @__PURE__ */ jsx("path", { d: "M6.38989 16.2251V6.06508C6.38989 5.66508 6.50989 5.27508 6.72989 4.94508L9.4599 0.885083C9.8899 0.235083 10.9599 -0.224917 11.8699 0.115083C12.8499 0.445083 13.4999 1.54508 13.2899 2.52508L12.7699 5.79508C12.7299 6.09508 12.8099 6.36508 12.9799 6.57508C13.1499 6.76508 13.3999 6.88508 13.6699 6.88508H17.7799C18.5699 6.88508 19.2499 7.20508 19.6499 7.76507C20.0299 8.30507 20.0999 9.00507 19.8499 9.71507L17.3899 17.2051C17.0799 18.4451 15.7299 19.4551 14.3899 19.4551H10.4899C9.8199 19.4551 8.8799 19.2251 8.4499 18.7951L7.16989 17.8051C6.67989 17.4351 6.38989 16.8451 6.38989 16.2251Z" }),
+          /* @__PURE__ */ jsx("path", { d: "M3.21 4.11523H2.18C0.63 4.11523 0 4.71523 0 6.19523V16.2553C0 17.7353 0.63 18.3353 2.18 18.3353H3.21C4.76 18.3353 5.39 17.7353 5.39 16.2553V6.19523C5.39 4.71523 4.76 4.11523 3.21 4.11523Z" })
+        ] }) })
+      }
+    );
+  }
+);
+ThumbUpFilledIcon.displayName = "ThumbUpFilledIcon";
+export {
+  ThumbUpFilledIcon
+};
+//# sourceMappingURL=ThumbUpFilledIcon.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbUpFilledIcon.mjs","sources":["../../../src/components/Icons/ThumbUpFilledIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const ThumbUpFilledIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"size-6\", className)}\n        {...props}\n      >\n        <g fill=\"currentColor\">\n          <g transform=\"translate(2 2)\">\n            <path d=\"M6.38989 16.2251V6.06508C6.38989 5.66508 6.50989 5.27508 6.72989 4.94508L9.4599 0.885083C9.8899 0.235083 10.9599 -0.224917 11.8699 0.115083C12.8499 0.445083 13.4999 1.54508 13.2899 2.52508L12.7699 5.79508C12.7299 6.09508 12.8099 6.36508 12.9799 6.57508C13.1499 6.76508 13.3999 6.88508 13.6699 6.88508H17.7799C18.5699 6.88508 19.2499 7.20508 19.6499 7.76507C20.0299 8.30507 20.0999 9.00507 19.8499 9.71507L17.3899 17.2051C17.0799 18.4451 15.7299 19.4551 14.3899 19.4551H10.4899C9.8199 19.4551 8.8799 19.2251 8.4499 18.7951L7.16989 17.8051C6.67989 17.4351 6.38989 16.8451 6.38989 16.2251Z\" />\n            <path d=\"M3.21 4.11523H2.18C0.63 4.11523 0 4.71523 0 6.19523V16.2553C0 17.7353 0.63 18.3353 2.18 18.3353H3.21C4.76 18.3353 5.39 17.7353 5.39 16.2553V6.19523C5.39 4.71523 4.76 4.11523 3.21 4.11523Z\" />\n          </g>\n        </g>\n      </svg>\n    );\n  },\n);\n\nThumbUpFilledIcon.displayName = \"ThumbUpFilledIcon\";\n"],"names":[],"mappings":";;;;AAIO,MAAM,oBAAoB,MAAM;AAAA,EACrC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAW,GAAG,UAAU,SAAS;AAAA,QAChC,GAAG;AAAA,QAEJ,8BAAC,KAAA,EAAE,MAAK,gBACN,UAAA,qBAAC,KAAA,EAAE,WAAU,kBACX,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,GAAE,6kBAAA,CAA6kB;AAAA,UACrlB,oBAAC,QAAA,EAAK,GAAE,8LAAA,CAA8L;AAAA,QAAA,EAAA,CACxM,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,kBAAkB,cAAc;"}

package/dist/components/Stepper/Stepper.mjs

@@ -0,0 +1,55 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { StepperStep } from "./StepperStep.mjs";
+const CONNECTOR_MARGIN = {
+  sm: "mt-3",
+  md: "mt-4",
+  lg: "mt-5"
+};
+const Stepper = React.forwardRef(
+  ({ activeStep, steps, size = "md", className, ...props }, ref) => {
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: <fieldset> adds unwanted browser styling for a non-interactive progress indicator
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          role: "group",
+          "aria-label": "Progress",
+          className: cn("flex items-start", className),
+          ...props,
+          children: steps.map((step, index) => {
+            const state = index < activeStep ? "completed" : index === activeStep ? "active" : "upcoming";
+            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                StepperStep,
+                {
+                  state,
+                  size,
+                  stepNumber: index + 1,
+                  title: step.title,
+                  description: step.description,
+                  className: "shrink-0"
+                }
+              ),
+              index < steps.length - 1 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn("h-px min-w-6 flex-1 bg-border-primary", CONNECTOR_MARGIN[size]),
+                  "aria-hidden": "true"
+                }
+              )
+            ] }, index);
+          })
+        }
+      )
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+export {
+  Stepper
+};
+//# sourceMappingURL=Stepper.mjs.map

package/dist/components/Stepper/Stepper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.mjs","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { StepperStep, type StepperStepSize } from \"./StepperStep\";\n\n/** Configuration for a single step within a {@link Stepper}. */\nexport interface StepItem {\n  /** Primary label for the step. */\n  title: string;\n  /** Secondary description for the step. */\n  description?: string;\n}\n\nexport interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Zero-based index of the currently active step. Steps before this are marked completed. */\n  activeStep: number;\n  /** Configuration for each step. */\n  steps: StepItem[];\n  /** Size preset applied to all step indicators and labels. @default \"md\" */\n  size?: StepperStepSize;\n}\n\nconst CONNECTOR_MARGIN: Record<StepperStepSize, string> = {\n  sm: \"mt-3\",\n  md: \"mt-4\",\n  lg: \"mt-5\",\n};\n\n/**\n * A horizontal progress stepper that displays a sequence of steps with\n * completed, active, and upcoming states.\n *\n * @example\n * ```tsx\n * <Stepper\n *   activeStep={1}\n *   steps={[\n *     { title: \"Account\", description: \"Create account\" },\n *     { title: \"Profile\", description: \"Set up profile\" },\n *     { title: \"Done\", description: \"All set!\" },\n *   ]}\n * />\n * ```\n */\nexport const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  ({ activeStep, steps, size = \"md\", className, ...props }, ref) => {\n    return (\n      // biome-ignore lint/a11y/useSemanticElements: <fieldset> adds unwanted browser styling for a non-interactive progress indicator\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label=\"Progress\"\n        className={cn(\"flex items-start\", className)}\n        {...props}\n      >\n        {steps.map((step, index) => {\n          const state =\n            index < activeStep ? \"completed\" : index === activeStep ? \"active\" : \"upcoming\";\n\n          return (\n            <React.Fragment key={index}>\n              <StepperStep\n                state={state}\n                size={size}\n                stepNumber={index + 1}\n                title={step.title}\n                description={step.description}\n                className=\"shrink-0\"\n              />\n              {index < steps.length - 1 && (\n                <div\n                  className={cn(\"h-px min-w-6 flex-1 bg-border-primary\", CONNECTOR_MARGIN[size])}\n                  aria-hidden=\"true\"\n                />\n              )}\n            </React.Fragment>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nStepper.displayName = \"Stepper\";\n"],"names":[],"mappings":";;;;;AAqBA,MAAM,mBAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAkBO,MAAM,UAAU,MAAM;AAAA,EAC3B,CAAC,EAAE,YAAY,OAAO,OAAO,MAAM,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChE;AAAA;AAAA,MAEE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UACL,cAAW;AAAA,UACX,WAAW,GAAG,oBAAoB,SAAS;AAAA,UAC1C,GAAG;AAAA,UAEH,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,kBAAM,QACJ,QAAQ,aAAa,cAAc,UAAU,aAAa,WAAW;AAEvE,mBACE,qBAAC,MAAM,UAAN,EACC,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA,YAAY,QAAQ;AAAA,kBACpB,OAAO,KAAK;AAAA,kBACZ,aAAa,KAAK;AAAA,kBAClB,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEX,QAAQ,MAAM,SAAS,KACtB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,GAAG,yCAAyC,iBAAiB,IAAI,CAAC;AAAA,kBAC7E,eAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,YACd,EAAA,GAbiB,KAerB;AAAA,UAEJ,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA;AAAA,EAGP;AACF;AAEA,QAAQ,cAAc;"}

package/dist/components/Stepper/StepperStep.mjs

@@ -0,0 +1,86 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { CheckIcon } from "../Icons/CheckIcon.mjs";
+const INDICATOR_SIZE = {
+  sm: "size-6",
+  md: "size-8",
+  lg: "size-10"
+};
+const INDICATOR_STATE = {
+  completed: "bg-success-surface",
+  active: "border border-brand-primary-default bg-brand-primary-muted",
+  upcoming: "bg-neutral-alphas-50"
+};
+const NUMBER_TYPOGRAPHY = {
+  sm: "typography-semibold-body-sm",
+  md: "typography-semibold-body-md",
+  lg: "typography-semibold-body-lg"
+};
+const NUMBER_COLOR = {
+  completed: "",
+  active: "text-content-primary",
+  upcoming: "text-content-secondary"
+};
+const CONTAINER_GAP = {
+  sm: "gap-1",
+  md: "gap-2",
+  lg: "gap-2"
+};
+const TITLE_TYPOGRAPHY = {
+  sm: "typography-regular-body-sm",
+  md: "typography-regular-body-md",
+  lg: "typography-regular-body-lg"
+};
+const DESCRIPTION_TYPOGRAPHY = {
+  sm: "typography-regular-body-sm",
+  md: "typography-regular-body-sm",
+  lg: "typography-regular-body-md"
+};
+const LABEL_COLOR = {
+  completed: "text-content-secondary",
+  active: "text-content-primary",
+  upcoming: "text-content-tertiary"
+};
+const CHECK_ICON_SIZE = {
+  sm: "size-3",
+  md: "size-4",
+  lg: "size-5"
+};
+const StepperStep = React.forwardRef(
+  ({ state = "upcoming", size = "md", stepNumber, title, description, className, ...props }, ref) => {
+    const hasLabels = title != null || description != null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col items-center", CONTAINER_GAP[size], className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex shrink-0 items-center justify-center rounded-full",
+                INDICATOR_SIZE[size],
+                INDICATOR_STATE[state]
+              ),
+              "aria-hidden": "true",
+              children: state === "completed" ? /* @__PURE__ */ jsx(CheckIcon, { className: cn(CHECK_ICON_SIZE[size], "text-success-content") }) : /* @__PURE__ */ jsx("span", { className: cn(NUMBER_TYPOGRAPHY[size], NUMBER_COLOR[state]), children: stepNumber })
+            }
+          ),
+          hasLabels && /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-1 text-center", LABEL_COLOR[state]), children: [
+            title != null && /* @__PURE__ */ jsx("span", { className: TITLE_TYPOGRAPHY[size], children: title }),
+            description != null && /* @__PURE__ */ jsx("span", { className: DESCRIPTION_TYPOGRAPHY[size], children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+StepperStep.displayName = "StepperStep";
+export {
+  StepperStep
+};
+//# sourceMappingURL=StepperStep.mjs.map

package/dist/components/Stepper/StepperStep.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperStep.mjs","sources":["../../../src/components/Stepper/StepperStep.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\n\n/** Current state of a step in the stepper. */\nexport type StepperStepState = \"completed\" | \"active\" | \"upcoming\";\n\n/** Size preset for the step indicator and labels. */\nexport type StepperStepSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface StepperStepProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current state of the step. @default \"upcoming\" */\n  state?: StepperStepState;\n  /** Size preset for the indicator and labels. @default \"md\" */\n  size?: StepperStepSize;\n  /** Step number displayed in the indicator for active and upcoming states. */\n  stepNumber?: number;\n  /** Primary label shown below the indicator. */\n  title?: string;\n  /** Secondary description shown below the title. */\n  description?: string;\n}\n\nconst INDICATOR_SIZE: Record<StepperStepSize, string> = {\n  sm: \"size-6\",\n  md: \"size-8\",\n  lg: \"size-10\",\n};\n\nconst INDICATOR_STATE: Record<StepperStepState, string> = {\n  completed: \"bg-success-surface\",\n  active: \"border border-brand-primary-default bg-brand-primary-muted\",\n  upcoming: \"bg-neutral-alphas-50\",\n};\n\nconst NUMBER_TYPOGRAPHY: Record<StepperStepSize, string> = {\n  sm: \"typography-semibold-body-sm\",\n  md: \"typography-semibold-body-md\",\n  lg: \"typography-semibold-body-lg\",\n};\n\nconst NUMBER_COLOR: Record<StepperStepState, string> = {\n  completed: \"\",\n  active: \"text-content-primary\",\n  upcoming: \"text-content-secondary\",\n};\n\nconst CONTAINER_GAP: Record<StepperStepSize, string> = {\n  sm: \"gap-1\",\n  md: \"gap-2\",\n  lg: \"gap-2\",\n};\n\nconst TITLE_TYPOGRAPHY: Record<StepperStepSize, string> = {\n  sm: \"typography-regular-body-sm\",\n  md: \"typography-regular-body-md\",\n  lg: \"typography-regular-body-lg\",\n};\n\nconst DESCRIPTION_TYPOGRAPHY: Record<StepperStepSize, string> = {\n  sm: \"typography-regular-body-sm\",\n  md: \"typography-regular-body-sm\",\n  lg: \"typography-regular-body-md\",\n};\n\nconst LABEL_COLOR: Record<StepperStepState, string> = {\n  completed: \"text-content-secondary\",\n  active: \"text-content-primary\",\n  upcoming: \"text-content-tertiary\",\n};\n\nconst CHECK_ICON_SIZE: Record<StepperStepSize, string> = {\n  sm: \"size-3\",\n  md: \"size-4\",\n  lg: \"size-5\",\n};\n\n/**\n * A single step indicator with optional labels, used standalone or within a {@link Stepper}.\n *\n * @example\n * ```tsx\n * <StepperStep state=\"active\" stepNumber={2} title=\"Profile\" description=\"Set up profile\" />\n * ```\n */\nexport const StepperStep = React.forwardRef<HTMLDivElement, StepperStepProps>(\n  (\n    { state = \"upcoming\", size = \"md\", stepNumber, title, description, className, ...props },\n    ref,\n  ) => {\n    const hasLabels = title != null || description != null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex flex-col items-center\", CONTAINER_GAP[size], className)}\n        {...props}\n      >\n        <div\n          className={cn(\n            \"flex shrink-0 items-center justify-center rounded-full\",\n            INDICATOR_SIZE[size],\n            INDICATOR_STATE[state],\n          )}\n          aria-hidden=\"true\"\n        >\n          {state === \"completed\" ? (\n            <CheckIcon className={cn(CHECK_ICON_SIZE[size], \"text-success-content\")} />\n          ) : (\n            <span className={cn(NUMBER_TYPOGRAPHY[size], NUMBER_COLOR[state])}>{stepNumber}</span>\n          )}\n        </div>\n\n        {hasLabels && (\n          <div className={cn(\"flex flex-col items-center gap-1 text-center\", LABEL_COLOR[state])}>\n            {title != null && <span className={TITLE_TYPOGRAPHY[size]}>{title}</span>}\n            {description != null && (\n              <span className={DESCRIPTION_TYPOGRAPHY[size]}>{description}</span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nStepperStep.displayName = \"StepperStep\";\n"],"names":[],"mappings":";;;;;AAuBA,MAAM,iBAAkD;AAAA,EACtD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,kBAAoD;AAAA,EACxD,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,MAAM,oBAAqD;AAAA,EACzD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAiD;AAAA,EACrD,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,MAAM,gBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,mBAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,yBAA0D;AAAA,EAC9D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,cAAgD;AAAA,EACpD,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,MAAM,kBAAmD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAUO,MAAM,cAAc,MAAM;AAAA,EAC/B,CACE,EAAE,QAAQ,YAAY,OAAO,MAAM,YAAY,OAAO,aAAa,WAAW,GAAG,MAAA,GACjF,QACG;AACH,UAAM,YAAY,SAAS,QAAQ,eAAe;AAElD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,8BAA8B,cAAc,IAAI,GAAG,SAAS;AAAA,QACzE,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,eAAe,IAAI;AAAA,gBACnB,gBAAgB,KAAK;AAAA,cAAA;AAAA,cAEvB,eAAY;AAAA,cAEX,UAAA,UAAU,cACT,oBAAC,WAAA,EAAU,WAAW,GAAG,gBAAgB,IAAI,GAAG,sBAAsB,EAAA,CAAG,IAEzE,oBAAC,QAAA,EAAK,WAAW,GAAG,kBAAkB,IAAI,GAAG,aAAa,KAAK,CAAC,GAAI,UAAA,WAAA,CAAW;AAAA,YAAA;AAAA,UAAA;AAAA,UAIlF,kCACE,OAAA,EAAI,WAAW,GAAG,gDAAgD,YAAY,KAAK,CAAC,GAClF,UAAA;AAAA,YAAA,SAAS,QAAQ,oBAAC,QAAA,EAAK,WAAW,iBAAiB,IAAI,GAAI,UAAA,OAAM;AAAA,YACjE,eAAe,QACd,oBAAC,QAAA,EAAK,WAAW,uBAAuB,IAAI,GAAI,UAAA,YAAA,CAAY;AAAA,UAAA,EAAA,CAEhE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,YAAY,cAAc;"}

package/dist/index.d.ts

@@ -2145,6 +2145,70 @@ export declare const StarIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttr
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/** Configuration for a single step within a {@link Stepper}. */
+export declare interface StepItem {
+    /** Primary label for the step. */
+    title: string;
+    /** Secondary description for the step. */
+    description?: string;
+}
+
+/**
+ * A horizontal progress stepper that displays a sequence of steps with
+ * completed, active, and upcoming states.
+ *
+ * @example
+ * ```tsx
+ * <Stepper
+ *   activeStep={1}
+ *   steps={[
+ *     { title: "Account", description: "Create account" },
+ *     { title: "Profile", description: "Set up profile" },
+ *     { title: "Done", description: "All set!" },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Stepper: React_2.ForwardRefExoticComponent<StepperProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface StepperProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Zero-based index of the currently active step. Steps before this are marked completed. */
+    activeStep: number;
+    /** Configuration for each step. */
+    steps: StepItem[];
+    /** Size preset applied to all step indicators and labels. @default "md" */
+    size?: StepperStepSize;
+}
+
+/**
+ * A single step indicator with optional labels, used standalone or within a {@link Stepper}.
+ *
+ * @example
+ * ```tsx
+ * <StepperStep state="active" stepNumber={2} title="Profile" description="Set up profile" />
+ * ```
+ */
+export declare const StepperStep: React_2.ForwardRefExoticComponent<StepperStepProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface StepperStepProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Current state of the step. @default "upcoming" */
+    state?: StepperStepState;
+    /** Size preset for the indicator and labels. @default "md" */
+    size?: StepperStepSize;
+    /** Step number displayed in the indicator for active and upcoming states. */
+    stepNumber?: number;
+    /** Primary label shown below the indicator. */
+    title?: string;
+    /** Secondary description shown below the title. */
+    description?: string;
+}
+
+/** Size preset for the step indicator and labels. */
+export declare type StepperStepSize = "sm" | "md" | "lg";
+
+/** Current state of a step in the stepper. */
+export declare type StepperStepState = "completed" | "active" | "upcoming";
+
 export declare const StopIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
@@ -2651,10 +2715,18 @@ export declare interface TextFieldProps extends Omit<React_2.InputHTMLAttributes
 /** Text field height in pixels. */
 export declare type TextFieldSize = "48" | "40" | "32";
 
+export declare const ThumbDownFilledIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & React_2.RefAttributes<SVGSVGElement>>;
+
 export declare const ThumbDownIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+export declare const ThumbUpFilledIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & React_2.RefAttributes<SVGSVGElement>>;
+
 export declare const ThumbUpIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;

package/dist/index.mjs

@@ -128,7 +128,9 @@ import { Support2Icon } from "./components/Icons/Support2Icon.mjs";
 import { SupportIcon } from "./components/Icons/SupportIcon.mjs";
 import { TagIcon } from "./components/Icons/TagIcon.mjs";
 import { TaskIcon } from "./components/Icons/TaskIcon.mjs";
+import { ThumbDownFilledIcon } from "./components/Icons/ThumbDownFilledIcon.mjs";
 import { ThumbDownIcon } from "./components/Icons/ThumbDownIcon.mjs";
+import { ThumbUpFilledIcon } from "./components/Icons/ThumbUpFilledIcon.mjs";
 import { ThumbUpIcon } from "./components/Icons/ThumbUpIcon.mjs";
 import { TickCircleIcon } from "./components/Icons/TickCircleIcon.mjs";
 import { TickCircleOffIcon } from "./components/Icons/TickCircleOffIcon.mjs";
@@ -165,6 +167,8 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSepa
 import { Skeleton } from "./components/Skeleton/Skeleton.mjs";
 import { Slider } from "./components/Slider/Slider.mjs";
 import { Snackbar } from "./components/Snackbar/Snackbar.mjs";
+import { Stepper } from "./components/Stepper/Stepper.mjs";
+import { StepperStep } from "./components/Stepper/StepperStep.mjs";
 import { Switch } from "./components/Switch/Switch.mjs";
 import { SwitchField } from "./components/SwitchField/SwitchField.mjs";
 import { SwitchToggle } from "./components/SwitchToggle/SwitchToggle.mjs";
@@ -360,6 +364,8 @@ export {
   Snackbar,
   SpinnerIcon,
   StarIcon,
+  Stepper,
+  StepperStep,
   StopIcon,
   SuccessIcon,
   SunIcon,
@@ -396,7 +402,9 @@ export {
   TaskIcon,
   TextArea,
   TextField,
+  ThumbDownFilledIcon,
   ThumbDownIcon,
+  ThumbUpFilledIcon,
   ThumbUpIcon,
   TickCircleIcon,
   TickCircleOffIcon,

package/dist/index.mjs.map

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

package/dist/styles/theme.css

@@ -1,6 +1,15 @@
 /* Consumers must provide their own Tailwind import: @import "tailwindcss"; */
 
 @variant dark (&:where(.dark, .dark *));
+@custom-variant infloww (&:is([data-infloww] *));
+
+@theme {
+  --breakpoint-*: initial;
+  --breakpoint-sm: 850px;
+  --breakpoint-md: 1024px;
+  --breakpoint-inflowwmd: 1223px;
+  --breakpoint-lg: 1280px;
+}
 
 @layer base {
   html {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -166,7 +166,7 @@
   "size-limit": [
     {
       "path": "dist/index.mjs",
-      "limit": "55 KB",
+      "limit": "57 KB",
       "ignore": [
         "@radix-ui/*",
         "clsx",