elseware-ui 2.30.1 → 2.31.1

package/dist/index.js

@@ -1,14 +1,14 @@
 'use strict';
 
 var tailwindMerge = require('tailwind-merge');
+var React4 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var bs = require('react-icons/bs');
 var fa = require('react-icons/fa');
-var jsxRuntime = require('react/jsx-runtime');
 var reactChartjs2 = require('react-chartjs-2');
 var chart_js = require('chart.js');
-var React4 = require('react');
 var react = require('@headlessui/react');
-var classNames17 = require('classnames');
+var classNames16 = require('classnames');
 var fa6 = require('react-icons/fa6');
 var ReactWorldFlags = require('react-world-flags');
 var emojiFlags = require('emoji-flags');
@@ -24,6 +24,7 @@ var reactBeautifulDnd = require('react-beautiful-dnd');
 var md = require('react-icons/md');
 require('@mdxeditor/editor/style.css');
 var editor = require('@mdxeditor/editor');
+var bi = require('react-icons/bi');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -46,7 +47,7 @@ function _interopNamespace(e) {
 }
 
 var React4__default = /*#__PURE__*/_interopDefault(React4);
-var classNames17__default = /*#__PURE__*/_interopDefault(classNames17);
+var classNames16__default = /*#__PURE__*/_interopDefault(classNames16);
 var ReactWorldFlags__default = /*#__PURE__*/_interopDefault(ReactWorldFlags);
 var emojiFlags__default = /*#__PURE__*/_interopDefault(emojiFlags);
 var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
@@ -188,27 +189,80 @@ var isMatch = (itemPath, currentPath) => {
   if (item !== "/" && current.startsWith(item + "/")) return true;
   return false;
 };
-var variants = {
-  default: "bg-gray-200 text-gray-800 hover:bg-gray-300 text-gray-100",
-  primary: "bg-gradient-to-r from-eui-primary-600 to-eui-primary-500 text-gray-100",
-  secondary: "bg-gradient-to-r from-eui-secondary-700 to-eui-secondary-600 text-gray-100",
-  success: "bg-gradient-to-r from-eui-success-700 to-eui-success-600 text-gray-100",
-  danger: "bg-gradient-to-r from-eui-danger-700 to-eui-danger-600 text-gray-100",
-  warning: "bg-gradient-to-r from-eui-warning-700 to-eui-warning-600 text-gray-100",
-  info: "bg-gradient-to-r from-eui-info-700 to-eui-info-600 text-gray-100",
-  light: "bg-gradient-to-r from-eui-light-600 to-eui-light-500 text-gray-900",
-  dark: "bg-gradient-to-r from-eui-dark-600 to-eui-dark-500 text-gray-100"
+
+// src/utils/styles.ts
+function resolveAppearanceStyles({
+  appearance = "solid",
+  variant = "default",
+  solid,
+  lite,
+  ghost
+}) {
+  switch (appearance) {
+    case "ghost":
+      return ghost[variant];
+    case "lite":
+      return lite[variant];
+    default:
+      return solid[variant];
+  }
+}
+var EUIContext = React4.createContext(null);
+var EUIProvider = ({
+  config,
+  children
+}) => {
+  const [state, setState] = React4.useState(config);
+  return /* @__PURE__ */ jsxRuntime.jsx(EUIContext.Provider, { value: { config: state, setConfig: setState }, children });
+};
+var useEUIConfig = () => {
+  const ctx = React4.useContext(EUIContext);
+  if (!ctx) {
+    throw new Error("useEUIConfig must be used inside EUIProvider");
+  }
+  return ctx;
+};
+
+// src/components/eui/resolveGlobalConfigs.tsx
+function resolveWithGlobal(config, props, defaults) {
+  return {
+    ...defaults,
+    ...config?.global ?? {},
+    ...props
+  };
+}
+var variantsSolid = {
+  default: "bg-gray-300 text-gray-900 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600",
+  primary: "bg-gradient-to-r from-eui-primary-500 to-eui-primary-600 text-white hover:brightness-110",
+  secondary: "bg-gradient-to-r from-eui-secondary-600 to-eui-secondary-500 text-white hover:brightness-110",
+  success: "bg-gradient-to-r from-eui-success-600 to-eui-success-500 text-white hover:brightness-110",
+  danger: "bg-gradient-to-r from-eui-danger-600 to-eui-danger-500 text-white hover:brightness-110",
+  warning: "bg-gradient-to-r from-eui-warning-500 to-eui-warning-400 text-black hover:brightness-105",
+  info: "bg-gradient-to-r from-eui-info-600 to-eui-info-500 text-white hover:brightness-110",
+  light: "bg-gradient-to-r from-eui-light-400 to-eui-light-300 text-gray-900 hover:brightness-105 dark:from-gray-200 dark:to-gray-100 dark:text-gray-900",
+  dark: "bg-gradient-to-r from-eui-dark-400 to-eui-dark-500 text-white hover:brightness-110 dark:from-eui-dark-300 dark:to-eui-dark-400"
 };
 var variantsLite = {
-  default: "bg-gray-600/20 border border-gray-800 text-gray-600",
-  primary: "bg-eui-primary-600/20 border border-eui-primary-800 text-eui-primary-600",
-  secondary: "bg-eui-secondary-600/20 border border-eui-secondary-800 text-eui-secondary-600",
-  success: "bg-eui-success-600/20 border border-eui-success-800 text-eui-success-600",
-  danger: "bg-red-600/20 border border-red-800 text-red-600",
-  warning: "bg-yellow-600/20 border border-yellow-800 text-yellow-600",
-  info: "bg-eui-info-600/20 border border-eui-info-800 text-eui-info-600",
-  light: "bg-eui-light-600/20 border border-eui-light-800 text-eui-light-600",
-  dark: "bg-eui-dark-600/20 border border-eui-dark-800 text-eui-dark-600"
+  default: "bg-gray-500/10 border border-gray-300 text-gray-700 dark:bg-gray-400/10 dark:border-gray-700 dark:text-gray-200",
+  primary: "bg-eui-primary-500/10 border border-eui-primary-500/30 text-eui-primary-400 dark:text-eui-primary-300",
+  secondary: "bg-eui-secondary-500/10 border border-eui-secondary-500/30 text-eui-secondary-500 dark:text-eui-secondary-400",
+  success: "bg-eui-success-500/10 border border-eui-success-500/30 text-eui-success-500 dark:text-eui-success-400",
+  danger: "bg-eui-danger-500/10 border border-eui-danger-500/30 text-eui-danger-500 dark:text-eui-danger-400",
+  warning: "bg-eui-warning-500/10 border border-eui-warning-500/30 text-eui-warning-600 dark:text-eui-warning-400",
+  info: "bg-eui-info-500/10 border border-eui-info-500/30 text-eui-info-500 dark:text-eui-info-400",
+  light: "bg-white/40 border border-white/30 text-gray-800 dark:bg-white/10 dark:border-white/10 dark:text-gray-100",
+  dark: "bg-eui-dark-500/10 border border-eui-dark-500/30 text-eui-dark-500 dark:text-eui-dark-300"
+};
+var variantsGhost = {
+  default: "bg-transparent border border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800",
+  primary: "bg-transparent border border-eui-primary-500 text-eui-primary-500 hover:bg-eui-primary-500/10 dark:text-eui-primary-300 dark:border-eui-primary-400",
+  secondary: "bg-transparent border border-eui-secondary-500 text-eui-secondary-500 hover:bg-eui-secondary-500/10 dark:text-eui-secondary-400 dark:border-eui-secondary-400",
+  success: "bg-transparent border border-eui-success-500 text-eui-success-500 hover:bg-eui-success-500/10 dark:text-eui-success-400 dark:border-eui-success-400",
+  danger: "bg-transparent border border-eui-danger-500 text-eui-danger-500 hover:bg-eui-danger-500/10 dark:text-eui-danger-400 dark:border-eui-danger-400",
+  warning: "bg-transparent border border-eui-warning-500 text-eui-warning-600 hover:bg-eui-warning-500/10 dark:text-eui-warning-400 dark:border-eui-warning-400",
+  info: "bg-transparent border border-eui-info-500 text-eui-info-500 hover:bg-eui-info-500/10 dark:text-eui-info-400 dark:border-eui-info-400",
+  light: "bg-transparent border border-gray-300 text-gray-700 hover:bg-white/10 dark:border-gray-500 dark:text-gray-100 dark:hover:bg-white/5",
+  dark: "bg-transparent border border-eui-dark-500 text-eui-dark-500 hover:bg-eui-dark-500/10 dark:text-eui-dark-300 dark:border-eui-dark-300"
 };
 var textVariants = {
   default: "eui-text-md",
@@ -221,28 +275,6 @@ var textVariants = {
   light: "text-gray-300",
   dark: "text-gray-900"
 };
-var variantsGhost = {
-  default: "bg-transparent border border-gray-300 text-gray-800 hover:bg-gray-100",
-  primary: "bg-transparent border border-eui-primary-500 text-eui-primary-500",
-  secondary: "bg-transparent border border-eui-secondary-500 text-eui-secondary-500",
-  success: "bg-transparent border border-eui-success-500 text-eui-success-500",
-  danger: "bg-transparent border border-eui-danger-500 text-eui-danger-500",
-  warning: "bg-transparent border border-eui-warning-500 text-eui-warning-500",
-  info: "bg-transparent border border-eui-info-500 text-eui-info-500",
-  light: "bg-transparent border border-eui-light-500 text-eui-light-500",
-  dark: "bg-transparent border border-eui-dark-500 text-eui-dark-500"
-};
-var borderVariants = {
-  default: "border-gray-300",
-  primary: "border-eui-primary-500",
-  secondary: "border-eui-secondary-500",
-  success: "border-eui-success-500",
-  danger: "border-eui-danger-500",
-  warning: "border-eui-warning-500",
-  info: "border-eui-info-500",
-  light: "border-eui-light-500",
-  dark: "border-eui-dark-500"
-};
 var decorations = {
   underline: "underline",
   overline: "overline",
@@ -366,18 +398,38 @@ var bulletTypes = {
   number: null,
   none: null
 };
+var checkboxVariants = {
+  default: "checked:bg-gray-600 checked:border-gray-600 dark:checked:bg-gray-500 dark:checked:border-gray-500",
+  primary: "checked:bg-eui-primary-600 checked:border-eui-primary-600 dark:checked:bg-eui-primary-500 dark:checked:border-eui-primary-500",
+  secondary: "checked:bg-eui-secondary-600 checked:border-eui-secondary-600 dark:checked:bg-eui-secondary-500 dark:checked:border-eui-secondary-500",
+  success: "checked:bg-eui-success-600 checked:border-eui-success-600 dark:checked:bg-eui-success-500 dark:checked:border-eui-success-500",
+  danger: "checked:bg-eui-danger-600 checked:border-eui-danger-600 dark:checked:bg-eui-danger-500 dark:checked:border-eui-danger-500",
+  warning: "checked:bg-eui-warning-500 checked:border-eui-warning-500 dark:checked:bg-eui-warning-400 dark:checked:border-eui-warning-400",
+  info: "checked:bg-eui-info-600 checked:border-eui-info-600 dark:checked:bg-eui-info-500 dark:checked:border-eui-info-500",
+  light: "checked:bg-eui-light-400 checked:border-eui-light-400 dark:checked:bg-gray-200 dark:checked:border-gray-200",
+  dark: "checked:bg-eui-dark-500 checked:border-eui-dark-500 dark:checked:bg-eui-dark-300 dark:checked:border-eui-dark-300"
+};
 var Avatar = ({
   alt,
   icon,
   children = "B",
   variant = "success",
-  shape = "circle",
+  appearance = "solid",
+  shape,
   size = "md",
   src,
-  borderVariant = false,
   className,
   ...rest
 }) => {
+  const eui = useEUIConfig();
+  const resolvedShape = shape ?? eui?.config?.global?.shape ?? "circle";
+  const variantStyles = resolveAppearanceStyles({
+    appearance,
+    variant,
+    solid: variantsSolid,
+    lite: variantsLite,
+    ghost: variantsGhost
+  });
   const content = src ? /* @__PURE__ */ jsxRuntime.jsx(
     "img",
     {
@@ -391,10 +443,10 @@ var Avatar = ({
     {
       ...rest,
       className: cn(
-        "inline-flex items-center justify-center text-center overflow-hidden",
-        shapes[shape],
+        "inline-flex items-center justify-center text-center overflow-hidden transition-all duration-300 select-none",
+        variantStyles,
+        shapes[resolvedShape],
         avatarSizes[size],
-        borderVariant ? ["border-2", borderVariants[variant]] : variants[variant],
         className
       ),
       children: content
@@ -407,6 +459,7 @@ var Badge = ({
   dot,
   count,
   variant = "success",
+  appearance = "solid",
   shape = "circle",
   size = "md",
   showZero = true,
@@ -423,14 +476,21 @@ var Badge = ({
     if (position.includes("right")) offsetStyles.right = x;
   }
   const isVisible = dot || count !== void 0 && (count > 0 || showZero);
+  const variantStyles = resolveAppearanceStyles({
+    appearance,
+    variant,
+    solid: variantsSolid,
+    lite: variantsLite,
+    ghost: variantsGhost
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, className: "relative w-fit h-fit", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: cn(
-          "absolute inline-flex items-center justify-center text-center rounded-full border border-white z-10",
+          "absolute inline-flex items-center justify-center text-center z-10 border border-white dark:border-neutral-900 transition-all duration-300",
           badgePositions[position],
-          variants[variant],
+          variantStyles,
           shapes[shape],
           badgeSizes[size],
           !isVisible && "hidden",
@@ -554,21 +614,30 @@ var PieChart_default = PieChart;
 var Chip = ({
   label,
   variant = "success",
-  shape = "circle",
-  ghost,
+  appearance = "ghost",
+  shape,
   size = "md",
   className,
   ...rest
 }) => {
+  const eui = useEUIConfig();
+  const resolvedShape = shape ?? eui?.config?.global?.shape ?? "circle";
+  const variantStyles = resolveAppearanceStyles({
+    appearance,
+    variant,
+    solid: variantsSolid,
+    lite: variantsLite,
+    ghost: variantsGhost
+  });
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-fit h-fit", children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ...rest,
       className: cn(
-        "inline-flex items-center justify-center text-center text-xs font-semibold rounded-full py-1 px-1",
-        shapes[shape],
+        "inline-flex items-center justify-center text-center text-xs font-semibold transition-all duration-300",
+        shapes[resolvedShape],
         chipSizes[size],
-        !ghost ? variantsGhost[variant] : variants[variant],
+        variantStyles,
         className
       ),
       children: label
@@ -687,30 +756,6 @@ function DataViewFooter({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mt-6 pt-4 border-t border-gray-700/60", children });
 }
 var DataViewFooter_default = DataViewFooter;
-var EUIContext = React4.createContext(null);
-var EUIProvider = ({
-  config,
-  children
-}) => {
-  const [state, setState] = React4.useState(config);
-  return /* @__PURE__ */ jsxRuntime.jsx(EUIContext.Provider, { value: { config: state, setConfig: setState }, children });
-};
-var useEUIConfig = () => {
-  const ctx = React4.useContext(EUIContext);
-  if (!ctx) {
-    throw new Error("useEUIConfig must be used inside EUIProvider");
-  }
-  return ctx;
-};
-
-// src/components/eui/resolveGlobalConfigs.tsx
-function resolveWithGlobal(config, props, defaults) {
-  return {
-    ...defaults,
-    ...config?.global ?? {},
-    ...props
-  };
-}
 function DataViewSearch({
   placeholder = "Search...",
   shape
@@ -767,7 +812,7 @@ function Accordion({
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames17__default.default({
+        className: classNames16__default.default({
           "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs": true,
           "hover:cursor-pointer": toggleOnSummaryClick
         }),
@@ -785,7 +830,7 @@ function Accordion({
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 fa6.FaCircleChevronDown,
                 {
-                  className: classNames17__default.default(
+                  className: classNames16__default.default(
                     "text-xl transition-transform duration-300",
                     { "rotate-180": collapse }
                   )
@@ -811,7 +856,7 @@ function Accordion({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames17__default.default({
+            className: classNames16__default.default({
               "border-t border-t-eui-dark-400/40 eui-text-sm": true,
               "p-5": enableChildrenPadding
             }),
@@ -891,7 +936,7 @@ function CardHeader({ icon, title, description, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames17__default.default(
+      className: classNames16__default.default(
         "flex items-start gap-4 p-6 border-b border-white/10",
         className
       ),
@@ -907,14 +952,14 @@ function CardHeader({ icon, title, description, className }) {
 }
 var CardHeader_default = CardHeader;
 function CardContent({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames17__default.default("p-6 text-gray-300 text-sm", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames16__default.default("p-6 text-gray-300 text-sm", className), children });
 }
 var CardContent_default = CardContent;
 function CardFooter({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default(
+      className: classNames16__default.default(
         "flex items-center gap-3 p-5 border-t border-white/10 text-sm text-gray-400",
         className
       ),
@@ -956,7 +1001,7 @@ function GradientAnimation({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default("absolute inset-0"),
+      className: classNames16__default.default("absolute inset-0"),
       style: {
         background: `linear-gradient(${cfg.angle}deg, ${cfg.colors?.join(",")})`,
         backgroundSize: cfg.backgroundSize,
@@ -1102,7 +1147,7 @@ function MotionSurface({
 }) {
   const AnimationComponent = animationVariant === "custom" ? CustomAnimation : animationRegistry[animationVariant];
   const OverlayComponent = overlay === "custom" ? CustomOverlay : overlayRegistry[overlay];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames17__default.default("relative overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames16__default.default("relative overflow-hidden", className), children: [
     AnimationComponent && /* @__PURE__ */ jsxRuntime.jsx(AnimationComponent, { config: animationConfig, animated }),
     OverlayComponent && /* @__PURE__ */ jsxRuntime.jsx(OverlayComponent, { config: overlayConfig }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children })
@@ -1626,19 +1671,27 @@ function Info({
   children,
   variant = "default",
   appearance = "lite",
-  shape = "roundedSquare",
+  shape,
   className,
   ...rest
 }) {
-  const variantStyles = appearance === "solid" ? infoVariantsSolid[variant] : appearance === "ghost" ? infoVariantsGhost[variant] : infoVariantsLite[variant];
+  const eui = useEUIConfig();
+  const resolvedShape = shape ?? eui?.config?.global?.shape ?? "roundedSquare";
+  const variantStyles = resolveAppearanceStyles({
+    appearance,
+    variant,
+    solid: infoVariantsSolid,
+    lite: infoVariantsLite,
+    ghost: infoVariantsGhost
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ...rest,
       className: cn(
-        "w-full p-5 text-sm transition-colors",
+        "w-full p-5 text-sm transition-all duration-300",
         variantStyles,
-        shapes[shape],
+        shapes[resolvedShape],
         className
       ),
       children
@@ -1984,7 +2037,7 @@ var ListItem = ({
   align = "start",
   className
 }) => {
-  const bullet = renderBullet?.(index) ?? (bulletType === "number" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-400", children: [
+  const bullet = renderBullet?.(index) ?? (bulletType === "number" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium opacity-70", children: [
     index + 1,
     "."
   ] }) : bulletTypes[bulletType]);
@@ -1993,7 +2046,7 @@ var ListItem = ({
     {
       className: cn(
         "flex gap-3",
-        align === "center" && "items-center",
+        align === "center" ? "items-center" : "items-baseline",
         className
       ),
       children: [
@@ -2001,18 +2054,23 @@ var ListItem = ({
           "div",
           {
             className: cn(
-              "relative  text-gray-400",
-              bulletType === "diamond" && "top-[10px]",
-              bulletType === "dot" && "top-[10px]"
+              "shrink-0 text-gray-400 dark:text-gray-500",
+              "w-[14px] flex justify-center",
+              bulletType !== "number" && "mt-[0.35em]"
             ),
             children: bullet
           }
         ),
-        TypographyComponent ? React4__default.default.cloneElement(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React4__default.default.cloneElement(
           TypographyComponent,
-          {},
+          {
+            className: cn(
+              "leading-relaxed",
+              TypographyComponent?.props?.className
+            )
+          },
           content
-        ) : content
+        ) : content })
       ]
     }
   );
@@ -2032,10 +2090,16 @@ var gridCols = {
 };
 function normalizeItem(item, defaultBulletType) {
   if (typeof item === "string") {
-    return { content: item, bulletType: defaultBulletType };
+    return {
+      content: item,
+      bulletType: defaultBulletType
+    };
   }
   if (React4__default.default.isValidElement(item)) {
-    return { content: item, bulletType: defaultBulletType };
+    return {
+      content: item,
+      bulletType: defaultBulletType
+    };
   }
   return {
     bulletType: defaultBulletType,
@@ -2056,8 +2120,8 @@ function List({
 }) {
   const isGrid = !!columns;
   const isOrdered = bulletType === "number";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, className: cn("py-3", className), children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-paragraph font-semibold mb-2", children: title }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, className: cn("py-2", className), children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold mb-3", children: title }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -2078,7 +2142,8 @@ function List({
               bulletType: normalized.bulletType,
               renderBullet: normalized.renderBullet,
               TypographyComponent: normalized.TypographyComponent,
-              className: normalized.className
+              className: normalized.className,
+              align
             },
             i
           );
@@ -2088,230 +2153,404 @@ function List({
   ] });
 }
 var List_default = List;
-var applyDiscount = (discount, price) => {
-  return (price - price / 100 * discount).toFixed(2);
+var calculateDiscountedPrice = (price, discount) => {
+  if (!discount) return price;
+  return price - price * discount / 100;
 };
+var formatPrice = (value, decimals) => value.toFixed(decimals);
 function PriceTag({
-  discount,
   price,
+  discount,
   code = "USD",
+  variant = "success",
+  appearance = "solid",
+  shape,
+  size = "md",
+  decimals = 2,
+  showCurrencyCode = true,
+  currencyAsSubscript = true,
+  showFreeLabel = true,
   className,
   ...rest
 }) {
-  if (price === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+  const eui = useEUIConfig();
+  const resolvedShape = shape ?? eui?.config?.global?.shape ?? "roundedSquare";
+  const variantStyles = resolveAppearanceStyles({
+    appearance,
+    variant,
+    solid: variantsSolid,
+    lite: variantsLite,
+    ghost: variantsGhost
+  });
+  const discountedPrice = calculateDiscountedPrice(price, discount);
+  const currency = getCurrencySymbol(code);
+  if (price <= 0 && showFreeLabel) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: cn("inline-flex items-center", className), children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        ...rest,
-        className: cn("inline-flex gap-3 text-md w-fit", className),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-green-700 px-2 py-1 font-bold rounded-md text-gray-200", children: "FREE" })
+        className: cn(
+          "font-semibold",
+          "px-3 py-1",
+          "inline-flex items-center justify-center",
+          variantStyles,
+          shapes[resolvedShape],
+          badgeSizes[size]
+        ),
+        children: "FREE"
       }
-    );
+    ) });
   }
-  if (price > 0) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, className: cn("inline-flex items-center gap-3", className), children: [
+    !!discount && discount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        ...rest,
-        className: cn("inline-flex gap-3 text-md w-fit", className),
+        className: cn(
+          "inline-flex items-center justify-center",
+          "font-semibold leading-none",
+          "px-3 py-1",
+          variantStyles,
+          shapes[resolvedShape],
+          badgeSizes[size]
+        ),
         children: [
-          discount && discount !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-green-700 px-2 py-1 font-bold rounded-md text-gray-200", children: [
-            "-",
-            discount,
-            "%"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex gap-1 items-center", children: [
-            discount ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex gap-[3px] font-semibold", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eui-text-sm line-through", children: [
-                getCurrencySymbol(code),
-                price
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eui-text-md", children: [
-                getCurrencySymbol(code),
-                applyDiscount(discount, price)
-              ] })
-            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-50 font-semibold", children: [
-              getCurrencySymbol(code),
-              price
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-yellow-500 font-thin", children: code })
-          ] })
+          "-",
+          discount,
+          "%"
         ]
       }
-    );
-  }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-baseline gap-3", children: [
+      !!discount && discount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: cn(
+            "font-semibold leading-none",
+            "opacity-50 line-through",
+            "text-lg"
+          ),
+          children: [
+            currency,
+            formatPrice(price, decimals)
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("font-semibold leading-none", "text-lg"), children: [
+        currency,
+        formatPrice(discountedPrice, decimals)
+      ] }),
+      showCurrencyCode && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: cn(
+            "uppercase tracking-wide opacity-60",
+            currencyAsSubscript ? "text-[10px] relative top-[0.35em]" : "text-xs"
+          ),
+          children: code
+        }
+      )
+    ] })
+  ] });
 }
-var sizes = {
-  xs: "h-1 text-[10px]",
-  sm: "h-2 text-xs",
-  md: "h-3 text-sm",
-  lg: "h-4 text-sm",
-  xl: "h-5 text-base"
+var progressSizes = {
+  xs: {
+    track: "h-1",
+    text: "text-[10px]"
+  },
+  sm: {
+    track: "h-2",
+    text: "text-xs"
+  },
+  md: {
+    track: "h-3",
+    text: "text-sm"
+  },
+  lg: {
+    track: "h-4",
+    text: "text-sm"
+  },
+  xl: {
+    track: "h-5",
+    text: "text-base"
+  }
 };
-var ProgressBar = ({
+function ProgressBar({
   value,
+  min = 0,
+  max = 100,
   variant = "success",
-  size = "sm",
+  appearance = "solid",
+  size = "md",
+  shape,
+  striped = false,
+  animated = true,
   showLabel = true,
-  label,
+  label = "Progress",
   labelPlacement = "top",
+  showPercentage = true,
+  startContent,
+  endContent,
+  trackClassName,
+  barClassName,
   className,
   ...rest
-}) => {
-  const clampedValue = Math.min(100, Math.max(0, value));
+}) {
+  const eui = useEUIConfig();
+  const resolvedShape = shape ?? eui?.config?.global?.shape ?? "roundedSquare";
+  const clampedValue = Math.min(max, Math.max(min, value));
+  const percentage = (clampedValue - min) / (max - min) * 100;
+  const variantStyles = resolveAppearanceStyles({
+    appearance,
+    variant,
+    solid: variantsSolid,
+    lite: variantsLite,
+    ghost: variantsGhost
+  });
+  const sizeStyles = progressSizes[size];
+  const hasTopLabel = showLabel && labelPlacement === "top";
+  const hasBottomLabel = showLabel && labelPlacement === "bottom";
+  const labelNode = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between gap-3",
+        sizeStyles.text,
+        "text-gray-600 dark:text-gray-300"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          startContent,
+          showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: label })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          endContent,
+          showPercentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "tabular-nums opacity-80", children: [
+            Math.round(percentage),
+            "%"
+          ] })
+        ] })
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, className: cn("w-full", className), children: [
-    showLabel && labelPlacement === "top" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1 text-gray-400", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: label ?? "Progress" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        clampedValue,
-        "%"
-      ] })
-    ] }),
+    hasTopLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: labelNode }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: cn(
-          "relative w-full bg-gray-700 rounded overflow-hidden",
-          sizes[size]
+          "relative overflow-hidden",
+          "bg-gray-200 dark:bg-neutral-800",
+          "border border-gray-300 dark:border-neutral-700",
+          "shadow-inner",
+          sizeStyles.track,
+          shapes[resolvedShape],
+          trackClassName
         ),
+        role: "progressbar",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": clampedValue,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn(
-                "h-full transition-all duration-300 ease-out",
-                variants[variant]
+                "relative h-full",
+                animated && "transition-all duration-500 ease-out",
+                "before:absolute before:inset-0",
+                "before:bg-white/10 dark:before:bg-white/5",
+                "border-r border-white/10 dark:border-white/5",
+                striped && [
+                  "bg-[length:40px_40px]",
+                  "bg-[linear-gradient(135deg,rgba(255,255,255,0.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.15)_50%,rgba(255,255,255,0.15)_75%,transparent_75%,transparent)]",
+                  animated && "animate-eui-progress-stripes"
+                ],
+                variantStyles,
+                barClassName
               ),
-              style: { width: `${clampedValue}%` }
+              style: {
+                width: `${percentage}%`
+              }
             }
           ),
-          showLabel && labelPlacement === "overlay" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex items-center justify-center font-semibold text-white pointer-events-none", children: [
-            label ?? "Progress",
-            " ",
-            clampedValue,
-            "%"
-          ] })
+          labelPlacement === "overlay" && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0",
+                "flex items-center justify-center",
+                "font-medium",
+                "text-white",
+                sizeStyles.text,
+                "pointer-events-none"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-2", children: [
+                showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+                showPercentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  Math.round(percentage),
+                  "%"
+                ] })
+              ] })
+            }
+          )
         ]
       }
-    )
+    ),
+    hasBottomLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: labelNode })
   ] });
+}
+var sizes = {
+  xs: "text-[10px]",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+  xl: "text-lg"
 };
 function StarRating({
   rating,
-  reviewAmount,
-  isNumericRatingEnabled = false,
-  isReviewAmountEnabled = false,
+  max = 5,
+  size = "md",
+  showValue = false,
+  valuePosition = "start",
+  iconClassName,
   className,
   ...rest
 }) {
-  const fullStars = Math.floor(rating);
-  const halfStars = Math.ceil(rating - fullStars);
-  const emptyStars = 5 - fullStars - halfStars;
-  const starIcon = /* @__PURE__ */ jsxRuntime.jsx(bs.BsStarFill, {});
-  const halfStarIcon = /* @__PURE__ */ jsxRuntime.jsx(bs.BsStarHalf, {});
-  const emptyStarIcon = /* @__PURE__ */ jsxRuntime.jsx(bs.BsStar, {});
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, className: "inline-flex gap-2 items-center", children: [
-    isNumericRatingEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-yellow-700 font-semibold text-[14px]", children: rating.toFixed(1) }),
+  const normalizedRating = Math.max(0, Math.min(max, rating));
+  const fullStars = Math.floor(normalizedRating);
+  const hasHalfStar = normalizedRating % 1 >= 0.5;
+  const emptyStars = max - fullStars - (hasHalfStar ? 1 : 0);
+  const ratingValue = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-yellow-600 dark:text-yellow-400", children: normalizedRating.toFixed(1) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, className: cn("inline-flex items-center gap-2", className), children: [
+    showValue && valuePosition === "start" && ratingValue,
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: cn(
-          "flex flex-row gap-[2px] text-[13px] text-yellow-600",
-          className
+          "inline-flex items-center gap-[2px]",
+          "text-yellow-500 dark:text-yellow-400",
+          sizes[size],
+          iconClassName
         ),
         children: [
-          [...Array(fullStars)].map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: starIcon }, index)),
-          [...Array(halfStars)].map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: halfStarIcon }, index + fullStars)),
-          [...Array(emptyStars)].map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: emptyStarIcon }, index + fullStars + halfStars))
+          [...Array(fullStars)].map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(bs.BsStarFill, {}, index)),
+          hasHalfStar && /* @__PURE__ */ jsxRuntime.jsx(bs.BsStarHalf, {}),
+          [...Array(emptyStars)].map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(bs.BsStar, { className: "opacity-40" }, index + fullStars))
         ]
       }
     ),
-    isReviewAmountEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-400 font-semibold text-[14px]", children: [
-      "(",
-      reviewAmount,
-      ")"
-    ] })
+    showValue && valuePosition === "end" && ratingValue
   ] });
 }
 var StarRating_default = StarRating;
-var NumericRating = ({ averageRating, totalReviews }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center w-fit mb-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[60px] font-bold text-gray-400", children: averageRating.toFixed(1) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(StarRating_default, { rating: Math.round(averageRating) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-500 text-sm", children: [
-      totalReviews,
-      " reviews"
-    ] })
-  ] });
+var sizes2 = {
+  xs: {
+    value: "text-2xl",
+    review: "text-xs"
+  },
+  sm: {
+    value: "text-3xl",
+    review: "text-xs"
+  },
+  md: {
+    value: "text-5xl",
+    review: "text-sm"
+  },
+  lg: {
+    value: "text-6xl",
+    review: "text-base"
+  },
+  xl: {
+    value: "text-7xl",
+    review: "text-lg"
+  }
 };
-var ProgressBarRating = ({ star, percentage }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-600 w-6", children: star }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative bg-gray-400 bg-opacity-50 h-[10px] w-full rounded-md overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+function NumericRating({
+  rating,
+  totalReviews,
+  size = "md",
+  showStars = true,
+  showReviewCount = true,
+  reviewLabel = "reviews",
+  className,
+  ...rest
+}) {
+  const sizeStyles = sizes2[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rest,
+      className: cn(
+        "flex flex-col items-center justify-center",
+        "min-w-[120px]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "font-bold leading-none",
+              "text-gray-900 dark:text-gray-100",
+              sizeStyles.value
+            ),
+            children: rating.toFixed(1)
+          }
+        ),
+        showStars && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(StarRating_default, { rating, size }) }),
+        showReviewCount && totalReviews !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-1 text-gray-500 dark:text-gray-400",
+              sizeStyles.review
+            ),
+            children: [
+              totalReviews,
+              " ",
+              reviewLabel
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var NumericRating_default = NumericRating;
+function ProgressBarRating({
+  star,
+  percentage,
+  variant = "warning",
+  appearance = "solid",
+  shape = "roundedSquare",
+  size = "sm",
+  animated = true,
+  striped = false,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, className: cn("flex items-center gap-3 w-full", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 text-sm font-medium text-gray-700 dark:text-gray-300", children: star }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ProgressBar,
       {
-        className: "absolute bg-yellow-400 h-full",
-        style: { width: `${percentage}%` }
+        value: percentage,
+        variant,
+        appearance,
+        shape,
+        size,
+        animated,
+        striped,
+        showLabel: false,
+        showPercentage: false
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 w-[60px] text-right", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[52px] text-right text-xs tabular-nums text-gray-500 dark:text-gray-400", children: [
       percentage.toFixed(1),
       "%"
     ] })
   ] });
-};
-var ProgressBarsRating = ({
-  ratingDistribution
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 w-full max-w-md", children: ratingDistribution.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-    ProgressBarRating,
-    {
-      star: item.star,
-      percentage: item.percentage
-    },
-    item.star
-  )) });
-};
-function StarRatingDistribution({
-  numericRating = true,
-  progressBarsRating = true,
-  ratingDistribution = [
-    { star: 5, count: 0 },
-    { star: 4, count: 0 },
-    { star: 3, count: 0 },
-    { star: 2, count: 0 },
-    { star: 1, count: 0 }
-  ]
-}) {
-  const totalReviews = ratingDistribution.reduce(
-    (acc, item) => acc + item.count,
-    0
-  );
-  const averageRating = totalReviews > 0 ? ratingDistribution.reduce(
-    (acc, item) => acc + item.star * item.count,
-    0
-  ) / totalReviews : 0;
-  const ratingDistributionWithPercentage = ratingDistribution.map((item) => ({
-    star: item.star,
-    percentage: totalReviews > 0 ? item.count / totalReviews * 100 : 0
-  }));
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-center gap-10 p-5 bg-gray-800 bg-opacity-50 border border-gray-800 rounded-md shadow-sm", children: [
-    numericRating && /* @__PURE__ */ jsxRuntime.jsx(
-      NumericRating,
-      {
-        averageRating,
-        totalReviews
-      }
-    ),
-    progressBarsRating && /* @__PURE__ */ jsxRuntime.jsx(
-      ProgressBarsRating,
-      {
-        ratingDistribution: ratingDistributionWithPercentage
-      }
-    )
-  ] });
 }
-var StarRatingDistribution_default = StarRatingDistribution;
+var ProgressBarRating_default = ProgressBarRating;
 function Table({
   title,
   columns,
@@ -2619,7 +2858,7 @@ var Form = ({
         /* @__PURE__ */ jsxRuntime.jsx(UnsavedChangesGuard_default, { formik: formik$1, enabled: warnOnUnsavedChanges }),
         /* @__PURE__ */ jsxRuntime.jsx(DirtyObserver_default, { formik: formik$1, onDirtyChange }),
         /* @__PURE__ */ jsxRuntime.jsx(FormObserver_default, { formik: formik$1, onChange }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames17__default.default(styles), children })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames16__default.default(styles), children })
       ] })
     }
   );
@@ -2628,7 +2867,7 @@ var Backdrop = ({ children, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         "bg-black/75 top-0 bottom-0 left-0 right-0 z-50 fixed inset-0 flex items-center justify-center overflow-hidden": true,
         [`${styles}`]: styles
       }),
@@ -2722,7 +2961,7 @@ var Transition4 = {
   TransitionDropdown: TransitionDropdown_default,
   TransitionFadeIn: TransitionFadeIn_default
 };
-var sizes2 = {
+var sizes3 = {
   xs: "px-2 py-1 text-xs",
   sm: "px-3 py-2 text-sm",
   md: "px-4 py-2 text-base",
@@ -2739,11 +2978,11 @@ function FormResponse({
   return /* @__PURE__ */ jsxRuntime.jsx(Transition4.TransitionDropdown, { visibility: text ? true : false, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         "font-poppins font-light text-sm": true,
         [`${variantsLite[variant]}`]: variant,
         [`${shapes[shape]}`]: shape,
-        [`${sizes2[size]}`]: size,
+        [`${sizes3[size]}`]: size,
         [`${styles}`]: styles
       }),
       children: text
@@ -2856,7 +3095,7 @@ var ThemeSwitch = () => {
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames17__default.default(
+            className: classNames16__default.default(
               "w-6 h-6 bg-white dark:bg-gray-600 rounded-full shadow-md transition-transform duration-300",
               theme === "dark" ? "translate-x-8" : "translate-x-0"
             )
@@ -2893,7 +3132,7 @@ var ShapeSwitch = () => {
     {
       value: currentShape,
       onChange: handleChange,
-      className: "\n          px-3 py-2 rounded-md border border-gray-300\n          bg-white dark:bg-gray-800\n          text-sm shadow-sm\n          focus:outline-none\n        ",
+      className: "\r\n          px-3 py-2 rounded-md border border-gray-300\r\n          bg-white dark:bg-gray-800\r\n          text-sm shadow-sm\r\n          focus:outline-none\r\n        ",
       children: Object.keys(Shape).map((shape) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: shape, children: shape }, shape))
     }
   ) });
@@ -14318,31 +14557,39 @@ function WorldMap({
     /* @__PURE__ */ jsxRuntime.jsx(Tooltip4, { show: showTooltip, children: tooltipContent })
   ] });
 }
-var sizes3 = {
+var sizes4 = {
   xs: "px-2 py-1 text-xs",
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-base",
   lg: "px-5 py-3 text-lg",
   xl: "px-6 py-4 text-xl"
 };
-var Button = ({
+function Button({
   type = "button",
   icon,
   text,
   children,
-  loading,
-  disabled,
-  ghost,
-  block,
+  loading = false,
+  disabled = false,
+  block = false,
   variant = "success",
+  appearance = "solid",
   shape,
   size = "md",
-  styles,
-  onClick
-}) => {
+  className,
+  onMouseMove,
+  ...rest
+}) {
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
   const btnRef = React4.useRef(null);
+  const variantStyles = resolveAppearanceStyles({
+    appearance,
+    variant,
+    solid: variantsSolid,
+    lite: variantsLite,
+    ghost: variantsGhost
+  });
   const handleMouseMove = (e) => {
     const btn = btnRef.current;
     if (!btn) return;
@@ -14351,38 +14598,36 @@ var Button = ({
     const y = e.clientY - rect.top;
     btn.style.setProperty("--glow-x", `${x}px`);
     btn.style.setProperty("--glow-y", `${y}px`);
+    onMouseMove?.(e);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
+      ...rest,
       ref: btnRef,
       type,
-      onClick,
-      onMouseMove: handleMouseMove,
       disabled: disabled || loading,
-      className: classNames17__default.default({
-        "relative z-0 overflow-hidden group": true,
-        "flex flex-row items-center justify-center gap-2": true,
-        [`${variants[variant]}`]: !ghost,
-        [`${variantsGhost[variant]}`]: ghost,
-        [`${shapes[resolvedShape]}`]: true,
-        [`${sizes3[size]}`]: true,
-        "w-full": block,
-        "brightness-75 grayscale text-gray-900 cursor-not-allowed": loading || disabled,
-        "hover:cursor-pointer": !loading && !disabled,
-        "transition-all ease-in-out": true,
-        [`${styles}`]: styles
-      }),
+      onMouseMove: handleMouseMove,
+      className: cn(
+        "relative overflow-hidden group inline-flex items-center justify-center gap-2 transition-all duration-300",
+        variantStyles,
+        shapes[resolvedShape],
+        sizes4[size],
+        block && "w-full",
+        (loading || disabled) && "brightness-75 grayscale cursor-not-allowed",
+        !loading && !disabled && "hover:cursor-pointer",
+        className
+      ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "\n          pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100\n          transition-opacity duration-300 z-0\n        ",
+            className: "pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300",
             style: {
               background: `
             radial-gradient(
               200px circle at var(--glow-x) var(--glow-y),
-              rgba(200,200,200,0.2),
+              rgba(255,255,255,0.18),
               transparent 50%
             )
           `
@@ -14390,13 +14635,14 @@ var Button = ({
           }
         ),
         loading && /* @__PURE__ */ jsxRuntime.jsx(ai.AiOutlineLoading, { className: "animate-spin z-10" }),
-        icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-10", children: icon }),
-        text && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-10", children: text }),
-        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-10", children })
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "z-10", children: icon }),
+        text && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "z-10", children: text }),
+        children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "z-10", children })
       ]
     }
   );
-};
+}
+var Button_default = Button;
 function InputResponse({
   name,
   visibility,
@@ -14406,7 +14652,7 @@ function InputResponse({
   return /* @__PURE__ */ jsxRuntime.jsx(Transition4.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         "font-medium text-sm py-1 px-2": true,
         [`${textVariants[variant]}`]: variant,
         "transition-all ease-in-out": true,
@@ -14421,7 +14667,7 @@ function InputLabel({ text, children, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "label",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         "px-0 eui-text-sm text-[13.5px] pointer-events-none select-none": true,
         "transition-all ease-in-out": true,
         [`${styles}`]: styles
@@ -14473,7 +14719,7 @@ var Input = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames17__default.default({
+        className: classNames16__default.default({
           "border peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3  focus:outline-none h-[50px]": true,
           "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
           "border-eui-danger-500": meta.touched && meta.error,
@@ -14518,7 +14764,7 @@ var InputFile = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames17__default.default(
+        className: classNames16__default.default(
           "border rounded-sm bg-eui-primary-300/10 px-3 pt-3 text-md text-eui-dark-100 cursor-pointer h-[50px] flex items-center",
           {
             "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
@@ -14544,7 +14790,7 @@ var InputFile = ({
       InputLabel_default,
       {
         text: placeholder,
-        styles: classNames17__default.default({
+        styles: classNames16__default.default({
           "absolute left-2 eui-text-sm peer-placeholder-shown:text-base peer-placeholder-shown:top-3 pointer-events-none": true,
           "top-[0.7px]": showFloatingLabel,
           "top-[13px] text-base": !showFloatingLabel
@@ -14570,7 +14816,7 @@ var InputList = ({ name, placeholder, shape }) => {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(formik.FieldArray, { name, children: ({ push, remove, move }) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames17__default.default({
+        className: classNames16__default.default({
           "flex flex-col space-y-2 w-full bg-eui-primary-300/10": true,
           [`${shapes[resolvedShape]}`]: true
         }),
@@ -14601,7 +14847,7 @@ var InputList = ({ name, placeholder, shape }) => {
                             {
                               name: `${name}[${index}]`,
                               placeholder: `Item ${index + 1}`,
-                              className: classNames17__default.default(
+                              className: classNames16__default.default(
                                 "border peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3  focus:outline-none h-[50px]",
                                 [`${shapes[resolvedShape]}`],
                                 errors[name]?.[index] ? "border-eui-danger-500" : "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -14669,7 +14915,7 @@ var InputListGroup = ({
       values[name]?.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: classNames17__default.default({
+          className: classNames16__default.default({
             "flex flex-col gap-2 bg-eui-primary-300/10 p-3": true,
             [`${shapes[resolvedShape]}`]: true
           }),
@@ -14681,7 +14927,7 @@ var InputListGroup = ({
                 {
                   name: `${name}[${groupIndex}].name`,
                   placeholder: `Group ${groupIndex + 1}`,
-                  className: classNames17__default.default(
+                  className: classNames16__default.default(
                     "border w-full bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none h-[40px]",
                     [`${shapes[resolvedShape]}`],
                     "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -14723,7 +14969,7 @@ var InputListGroup = ({
                   {
                     ref: provided.innerRef,
                     ...provided.droppableProps,
-                    className: classNames17__default.default({
+                    className: classNames16__default.default({
                       "space-y-2 bg-eui-primary-300/10 p-2": true,
                       [`${shapes[resolvedShape]}`]: true
                     }),
@@ -14738,7 +14984,7 @@ var InputListGroup = ({
                             {
                               ref: provided2.innerRef,
                               ...provided2.draggableProps,
-                              className: classNames17__default.default({
+                              className: classNames16__default.default({
                                 "flex items-center gap-2 bg-eui-primary-300/10 p-2": true,
                                 [`${shapes[resolvedShape]}`]: true
                               }),
@@ -14749,7 +14995,7 @@ var InputListGroup = ({
                                   {
                                     name: `${name}[${groupIndex}].items[${itemIndex}]`,
                                     placeholder: `Item ${itemIndex + 1}`,
-                                    className: classNames17__default.default(
+                                    className: classNames16__default.default(
                                       "border w-full bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none h-[40px]",
                                       [`${shapes[resolvedShape]}`],
                                       "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -14822,43 +15068,76 @@ var InputListGroup = ({
 function isMultiCheckbox(props) {
   return Array.isArray(props.options);
 }
-var Checkbox = (props) => {
-  const { placeholder } = props;
+function Checkbox({
+  placeholder,
+  variant = "primary",
+  shape = "roundedSquare",
+  className,
+  ...props
+}) {
   const isMulti = isMultiCheckbox(props);
-  const [field, meta, helpers] = isMulti ? formik.useField(props) : formik.useField(props);
-  const checkboxClass = classNames17__default.default(
+  const [multiField, multiMeta, multiHelpers] = formik.useField(
+    props
+  );
+  const [singleField, singleMeta, singleHelpers] = formik.useField(
+    props
+  );
+  const field = isMulti ? multiField : singleField;
+  const meta = isMulti ? multiMeta : singleMeta;
+  const checkboxClass = cn(
+    // Base
     "appearance-none cursor-pointer transition-all duration-300",
     "w-5 h-5 min-w-[1.25rem] min-h-[1.25rem]",
-    "flex-shrink-0",
-    "border-2 border-eui-primary-400 rounded-md",
-    "checked:bg-eui-secondary-700 checked:border-eui-primary-400",
-    "relative checked:before:content-['\u2713'] checked:before:absolute checked:before:inset-0",
+    "flex-shrink-0 relative",
+    // Unchecked state
+    "bg-white border-2 border-gray-300",
+    "hover:border-gray-400",
+    // Dark mode
+    "dark:bg-neutral-900",
+    "dark:border-neutral-600",
+    "dark:hover:border-neutral-500",
+    // Focus state
+    "focus:outline-none focus:ring-2",
+    "focus:ring-eui-primary-500/30",
+    // Checked variant styles
+    checkboxVariants[variant],
+    // Check icon
+    "checked:before:content-['\u2713']",
+    "checked:before:absolute checked:before:inset-0",
     "checked:before:flex checked:before:items-center checked:before:justify-center",
-    "checked:before:text-white checked:before:font-bold checked:before:text-sm"
+    "checked:before:text-white checked:before:font-bold checked:before:text-sm",
+    // Disabled state
+    "disabled:opacity-50 disabled:cursor-not-allowed",
+    // Shape
+    shapes[shape],
+    className
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     !isMulti && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-3 items-start", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
-          id: field.name,
+          id: singleField.name,
           type: "checkbox",
-          checked: Boolean(field.value),
-          onChange: (e) => helpers.setValue(e.target.checked),
+          checked: Boolean(singleField.value),
+          onChange: (e) => singleHelpers.setValue(e.target.checked),
           className: checkboxClass
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "label",
         {
-          htmlFor: field.name,
-          className: "text-sm leading-relaxed cursor-pointer select-none",
+          htmlFor: singleField.name,
+          className: cn(
+            "text-sm leading-relaxed cursor-pointer select-none",
+            "text-gray-800 dark:text-gray-200"
+          ),
           children: placeholder
         }
       )
     ] }),
     isMulti && props.options.map((option) => {
-      const values = field.value ?? [];
+      const values = multiField.value ?? [];
       const checked = values.includes(option.value);
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -14872,7 +15151,7 @@ var Checkbox = (props) => {
                 type: "checkbox",
                 checked,
                 onChange: () => {
-                  helpers.setValue(
+                  multiHelpers.setValue(
                     checked ? values.filter((v) => v !== option.value) : [...values, option.value]
                   );
                 },
@@ -14883,7 +15162,10 @@ var Checkbox = (props) => {
               "label",
               {
                 htmlFor: option.value,
-                className: "text-sm leading-relaxed cursor-pointer select-none",
+                className: cn(
+                  "text-sm leading-relaxed cursor-pointer select-none",
+                  "text-gray-800 dark:text-gray-200"
+                ),
                 children: option.label
               }
             )
@@ -14901,7 +15183,7 @@ var Checkbox = (props) => {
       }
     )
   ] });
-};
+}
 var Checkbox_default = Checkbox;
 var DateSelector = ({
   placeholder,
@@ -14927,7 +15209,7 @@ var DateSelector = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames17__default.default({
+        className: classNames16__default.default({
           "border border-eui-primary-400 peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
           "border-eui-danger-500": meta.touched && meta.error,
           "transition-all ease-in-out": true,
@@ -15036,7 +15318,7 @@ var ImageInput = React4.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
-              className: classNames17__default.default({
+              className: classNames16__default.default({
                 "border-2 border-dashed border-gray-700 bg-gray-900 h-[200px] w-[300px] flex flex-col gap-2 items-center justify-center group": true,
                 "hover:cursor-pointer hover:border-solid hover:border-gray-600 hover:bg-gray-900/80": true,
                 "transition-all ease-in-out duration-150": true
@@ -15153,7 +15435,7 @@ function Radio({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames17__default.default({
+            className: classNames16__default.default({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -15166,7 +15448,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames17__default.default({
+                  className: classNames16__default.default({
                     "appearance-none w-4 h-4 border-2 border-eui-primary-400 rounded-full cursor-pointer transition-all duration-300": true,
                     // base radio button styles
                     "checked:bg-eui-secondary-700 checked:border-eui-primary-400": field2.value === option.value
@@ -15178,7 +15460,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames17__default.default({
+                  className: classNames16__default.default({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -15221,7 +15503,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -15234,7 +15516,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index),
             onMouseEnter: () => setHover(index),
             onMouseLeave: () => setHover(null),
-            className: classNames17__default.default({
+            className: classNames16__default.default({
               "text-yellow-600": index <= (hover ?? rating - 1),
               "text-gray-400": index > (hover ?? rating - 1)
             }),
@@ -15278,7 +15560,7 @@ function Select({
       {
         as: "select",
         ...props,
-        className: classNames17__default.default({
+        className: classNames16__default.default({
           "border peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
           "border-eui-primary-400": !(meta.touched && meta.error),
           "border-red-500": meta.touched && meta.error,
@@ -15330,7 +15612,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames17__default.default(
+            className: classNames16__default.default(
               "w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-eui-dark-100",
               "peer-checked:after:translate-x-full peer-checked:after:border-white",
               "after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white",
@@ -15387,7 +15669,7 @@ function Tags({
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: classNames17__default.default(
+          className: classNames16__default.default(
             "border rounded-sm flex flex-wrap items-center gap-2 px-2 pt-2 pb-6 min-h-[3rem]",
             {
               "bg-eui-primary-300/10 eui-text-md": true,
@@ -15435,7 +15717,7 @@ function Tags({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames17__default.default(
+          styles: classNames16__default.default(
             "absolute left-2 transition-all pointer-events-none text-eui-dark-200",
             input.length > 0 || field.value.length > 0 ? "top-[2px] text-[13.5px]" : "top-3 text-base"
           )
@@ -15460,7 +15742,7 @@ function Tags({
 var Tags_default = Tags;
 function TextArea({
   placeholder,
-  limit,
+  limit = 1e3,
   styles,
   shape,
   ...props
@@ -15476,7 +15758,7 @@ function TextArea({
           as: "textarea",
           ...field,
           ...props,
-          className: classNames17__default.default({
+          className: classNames16__default.default({
             "border peer w-full bg-eui-primary-300/10 eui-text-md outline-none px-3 py-5 resize-none focus:resize-none focus:outline-none": true,
             "transition-all ease-in-out": true,
             "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
@@ -15490,7 +15772,7 @@ function TextArea({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames17__default.default(
+          styles: classNames16__default.default(
             "absolute left-2 transition-all pointer-events-none text-eui-dark-200",
             field.value ? "top-[2px] text-[13.5px]" : "top-3 text-base"
           )
@@ -15521,7 +15803,7 @@ function ContentArea({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         "min-h-screen h-full w-full py-3 px-5": true,
         "py-3 px-5": !enablePadding,
         "py-3 px-5 lg:px-[150px]": enablePadding,
@@ -15537,7 +15819,7 @@ function FlexCol({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -15550,7 +15832,7 @@ function FlexRow({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -15569,7 +15851,7 @@ function Grid({ children, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -15586,7 +15868,7 @@ var Layout = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         // "flex h-full w-screen bg-gray-100 overflow-auto": true,
         "flex bg-eui-light-600": true,
         "flex-col": flexDirection === "vertical",
@@ -15605,7 +15887,7 @@ var Header = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         static: position === "static",
         fixed: position === "fixed",
         sticky: position === "sticky",
@@ -15645,7 +15927,7 @@ var Content = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         "w-full min-h-screen transition-all duration-200 eui-bg-sm": true,
         "md:pl-[300px]": !overlayedSidebar && sidebarVisible && !isMobile,
         // Shift when sidebar is open (desktop)
@@ -15661,7 +15943,7 @@ var Footer = ({ children, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         "bottom-0 w-full h-fit": true,
         "border-t border-eui-dark-500/40 dark:border-eui-secondary-800 eui-bg-md": !styles,
         [`${styles}`]: styles
@@ -15749,7 +16031,7 @@ function MarkdownEditor({
   const [field, meta, helpers] = formik.useField(props);
   const { theme } = useTheme_default();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames17__default.default(theme === "dark" ? "dark" : "", styles), children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames16__default.default(theme === "dark" ? "dark" : "", styles), children: /* @__PURE__ */ jsxRuntime.jsx(
       editor.MDXEditor,
       {
         markdown: field.value,
@@ -15844,7 +16126,7 @@ function MarkdownTOC({ title = "Table of Contents" }) {
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
       "h2",
       {
-        className: "\n            text-sm\n            font-semibold\n            uppercase\n            tracking-wide\n            text-gray-900\n            dark:text-gray-100\n          ",
+        className: "\r\n            text-sm\r\n            font-semibold\r\n            uppercase\r\n            tracking-wide\r\n            text-gray-900\r\n            dark:text-gray-100\r\n          ",
         children: title
       }
     ) }),
@@ -15852,7 +16134,7 @@ function MarkdownTOC({ title = "Table of Contents" }) {
       "button",
       {
         onClick: () => scrollToHeading(heading.id),
-        className: classNames17__default.default(
+        className: classNames16__default.default(
           "block w-full text-left text-sm transition-all ease-in-out duration-150",
           "hover:text-primary",
           activeHeading === heading.id ? "text-primary font-semibold underline" : "text-gray-500 dark:text-gray-400"
@@ -16008,7 +16290,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -16085,7 +16367,7 @@ var Breadcrumb = ({
         index < resolvedData.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: classNames17__default.default({
+            className: classNames16__default.default({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -16099,7 +16381,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -16129,7 +16411,7 @@ var Drawer = ({
       {
         show: visibility,
         enter: "transform transition duration-200 ease-out",
-        enterFrom: classNames17__default.default({
+        enterFrom: classNames16__default.default({
           "-translate-x-full": side === "left",
           "translate-x-full": side === "right",
           "-translate-y-full": side === "top",
@@ -16138,7 +16420,7 @@ var Drawer = ({
         enterTo: "translate-x-0 translate-y-0",
         leave: "transform transition duration-200 ease-in",
         leaveFrom: "translate-x-0 translate-y-0",
-        leaveTo: classNames17__default.default({
+        leaveTo: classNames16__default.default({
           "-translate-x-full": side === "left",
           "translate-x-full": side === "right",
           "-translate-y-full": side === "top",
@@ -16147,7 +16429,7 @@ var Drawer = ({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames17__default.default(
+            className: classNames16__default.default(
               "fixed shadow-lg z-50",
               {
                 "h-full w-[300px]": isHorizontal,
@@ -16179,7 +16461,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         "text-xl p-3 cursor-pointer": true,
         "transition-all ease-in-out": true,
         "text-eui-dark-500 dark:text-eui-secondary-600": !styles,
@@ -16227,7 +16509,7 @@ function FooterNav({ data = [], styles }) {
     childrenContent = /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames17__default.default({
+        className: classNames16__default.default({
           "grid w-full": true,
           "grid-cols-1": isMobile,
           "grid-cols-3": !isMobile,
@@ -16240,7 +16522,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -16281,7 +16563,7 @@ var FooterNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames17__default.default({
+        className: classNames16__default.default({
           "": true,
           "py-2 font-semibold eui-text-lg": !styles,
           [`${styles}`]: styles
@@ -16326,7 +16608,7 @@ var FooterNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         "flex flex-row items-center gap-3 cursor-pointer p-1 w-full": true,
         "transition-all duration-200 ease-in-out": true,
         "text-sm eui-text-sm": !styles,
@@ -16355,7 +16637,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -16408,7 +16690,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -16470,7 +16752,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames17__default.default({
+        className: classNames16__default.default({
           "flex flex-row gap-2 items-center justify-between cursor-pointer p-3 w-full": true,
           "transition-all duration-300 ease-in-out": true,
           "eui-text-md bg-gradient-to-t from-eui-dark-500/10 dark:from-green-700/10": !styles,
@@ -16498,7 +16780,7 @@ var HeaderNavGroup = ({
           children && /* @__PURE__ */ jsxRuntime.jsx(
             bs.BsChevronDown,
             {
-              className: classNames17__default.default({
+              className: classNames16__default.default({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -16511,7 +16793,7 @@ var HeaderNavGroup = ({
     !collapsed && children && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames17__default.default({
+        className: classNames16__default.default({
           "absolute min-w-80 left-0 top-full mt-1 border border-eui-dark-300/10 dark:border-eui-dark-300/50 shadow-lg eui-shadow-lg z-50 w-full eui-bg-md": true,
           "transition-all duration-300 ease-in-out": true
         }),
@@ -16541,7 +16823,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         "flex flex-row items-center gap-3 cursor-pointer p-3 w-full": true,
         "transition-all duration-200 ease-in-out": true,
         "eui-text-md border-b border-eui-dark-500/20 dark:border-eui-secondary-900/20 bg-gradient-to-r from-eui-dark-500/10 dark:from-eui-secondary-900/10": !styles,
@@ -16570,7 +16852,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -16610,7 +16892,7 @@ var Link = ({
       href: href || "#",
       target: targets[target],
       onClick: handleClick,
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         [`${textVariants[variant]}`]: variant,
         [`${decorations[decoration]}`]: decoration,
         "font-bold": bold,
@@ -17075,7 +17357,7 @@ function Modal({
         "div",
         {
           ref: modalRef,
-          className: classNames17__default.default({
+          className: classNames16__default.default({
             "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit": true,
             [`${shapes[resolvedShape]}`]: true,
             [`${styles}`]: styles
@@ -17086,7 +17368,7 @@ function Modal({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: classNames17__default.default({
+                  className: classNames16__default.default({
                     "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast": true,
                     "hover:cursor-pointer hover:bg-eui-dark-500": true
                   }),
@@ -17173,7 +17455,7 @@ var GlowWrapper = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "\n          pointer-events-none absolute inset-0 opacity-0 \n          group-hover:opacity-100 transition-opacity duration-300\n        ",
+            className: "\r\n          pointer-events-none absolute inset-0 opacity-0 \r\n          group-hover:opacity-100 transition-opacity duration-300\r\n        ",
             style: { background: "var(--glow-bg)" }
           }
         ),
@@ -17192,7 +17474,7 @@ function ShowMore({ text, limit }) {
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: classNames17__default.default({
+          className: classNames16__default.default({
             "text-blue-300  px-1 pb-1 mt-1": true,
             "bg-slate-900/70": !showMore,
             "bg-gradient-to-t from-slate-900/50 to-transparent": showMore
@@ -17204,6 +17486,436 @@ function ShowMore({ text, limit }) {
   ] });
 }
 var ShowMore_default = ShowMore;
+function CommentComposer({
+  placeholder = "Add a comment...",
+  submitLabel = "Comment",
+  onSubmit
+}) {
+  const [value, setValue] = React4.useState("");
+  const [focused, setFocused] = React4.useState(false);
+  async function handleSubmit() {
+    if (!value.trim()) return;
+    await onSubmit?.(value);
+    setValue("");
+    setFocused(false);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { size: "md" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          value,
+          placeholder,
+          onFocus: () => setFocused(true),
+          onChange: (e) => setValue(e.target.value),
+          className: "w-full min-h-[48px] bg-transparent border-b border-gray-300 dark:border-neutral-700 outline-none resize-none pb-2 text-sm"
+        }
+      ),
+      (focused || value.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button_default,
+          {
+            variant: "secondary",
+            appearance: "ghost",
+            text: "Cancel",
+            onClick: () => {
+              setValue("");
+              setFocused(false);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button_default,
+          {
+            variant: "primary",
+            text: submitLabel,
+            onClick: handleSubmit
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+var CommentComposer_default = CommentComposer;
+
+// src/compositions/comment-thread/utils/formatCommentDate.ts
+function formatCommentDate(date) {
+  const now = /* @__PURE__ */ new Date();
+  const target = new Date(date);
+  const seconds = Math.floor((now.getTime() - target.getTime()) / 1e3);
+  const intervals = [
+    { label: "year", seconds: 31536e3 },
+    { label: "month", seconds: 2592e3 },
+    { label: "day", seconds: 86400 },
+    { label: "hour", seconds: 3600 },
+    { label: "minute", seconds: 60 }
+  ];
+  for (const interval of intervals) {
+    const count = Math.floor(seconds / interval.seconds);
+    if (count >= 1) {
+      return `${count} ${interval.label}${count > 1 ? "s" : ""} ago`;
+    }
+  }
+  return "Just now";
+}
+function CommentHeader({
+  avatar,
+  username,
+  createdAt,
+  edited
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: avatar, size: "sm" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm flex-wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: [
+        "@",
+        username
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: formatCommentDate(createdAt) }),
+      edited && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400", children: "edited" })
+    ] })
+  ] });
+}
+var CommentHeader_default = CommentHeader;
+function CommentContent({ content }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-relaxed whitespace-pre-wrap text-gray-700 dark:text-gray-300", children: content });
+}
+var CommentContent_default = CommentContent;
+function CommentActions({
+  likes = 0,
+  dislikes = 0,
+  onLike,
+  onDislike,
+  onReply
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-5 text-sm text-gray-500 dark:text-gray-400", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: onLike,
+        className: "inline-flex items-center gap-1 hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(bi.BiLike, { size: 18 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: likes })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: onDislike,
+        className: "inline-flex items-center gap-1 hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(bi.BiDislike, { size: 18 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: dislikes })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: onReply,
+        className: "font-medium hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
+        children: "Reply"
+      }
+    )
+  ] });
+}
+var CommentActions_default = CommentActions;
+function CommentMenu({
+  canEdit,
+  canDelete,
+  canReport,
+  onEdit,
+  onDelete,
+  onReport
+}) {
+  const [open, setOpen] = React4.useState(false);
+  const ref = React4.useRef(null);
+  React4.useEffect(() => {
+    function handleOutsideClick(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => document.removeEventListener("mousedown", handleOutsideClick);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => setOpen((prev) => !prev),
+        className: "text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
+        children: /* @__PURE__ */ jsxRuntime.jsx(bi.BiDotsVerticalRounded, { size: 18 })
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "\r\n            absolute\r\n            right-0\r\n            top-full\r\n            mt-2\r\n            min-w-[160px]\r\n            overflow-hidden\r\n            rounded-xl\r\n            border\r\n            border-gray-200\r\n            dark:border-neutral-800\r\n            bg-white\r\n            dark:bg-neutral-900\r\n            shadow-xl\r\n            z-50\r\n          ",
+        children: [
+          canEdit && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => {
+                setOpen(false);
+                onEdit?.();
+              },
+              className: "w-full flex items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(bi.BiEdit, {}),
+                "Edit"
+              ]
+            }
+          ),
+          canDelete && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => {
+                setOpen(false);
+                onDelete?.();
+              },
+              className: "w-full flex items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(bi.BiTrash, {}),
+                "Delete"
+              ]
+            }
+          ),
+          canReport && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => {
+                setOpen(false);
+                onReport?.();
+              },
+              className: "w-full flex items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(bi.BiFlag, {}),
+                "Report"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var CommentMenu_default = CommentMenu;
+function CommentRepliesToggle({
+  repliesCount,
+  collapsed,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick: onToggle,
+      className: "inline-flex items-center gap-1 text-sm font-medium text-blue-500 hover:text-blue-400 transition-colors w-fit",
+      children: [
+        collapsed ? /* @__PURE__ */ jsxRuntime.jsx(bi.BiChevronDown, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(bi.BiChevronUp, { size: 18 }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: collapsed ? `View ${repliesCount} repl${repliesCount > 1 ? "ies" : "y"}` : "Hide replies" })
+      ]
+    }
+  );
+}
+var CommentRepliesToggle_default = CommentRepliesToggle;
+function ReplyComposer({ username, onSubmit }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+    CommentComposer_default,
+    {
+      placeholder: `Reply to @${username}`,
+      submitLabel: "Reply",
+      onSubmit
+    }
+  ) });
+}
+var ReplyComposer_default = ReplyComposer;
+
+// src/compositions/comment-thread/constants/comment.constants.ts
+var MAX_COMMENT_DEPTH = 5;
+var COMMENT_INDENTATION = 0;
+function CommentItem({
+  comment,
+  depth = 0,
+  onLike,
+  onDislike,
+  onReply,
+  onEdit,
+  onDelete,
+  onReport
+}) {
+  const [collapsed, setCollapsed] = React4.useState(false);
+  const [isReplying, setIsReplying] = React4.useState(false);
+  const resolvedDepth = Math.min(depth, MAX_COMMENT_DEPTH);
+  async function handleReply(content) {
+    console.log(content);
+    setIsReplying(false);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex flex-col gap-4",
+      style: {
+        paddingLeft: `${resolvedDepth * COMMENT_INDENTATION}px`
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-3 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CommentHeader_default,
+              {
+                avatar: comment.author.avatar,
+                username: comment.author.username,
+                createdAt: comment.createdAt,
+                edited: comment.edited
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CommentMenu_default,
+              {
+                canEdit: comment.permissions?.canEdit,
+                canDelete: comment.permissions?.canDelete,
+                canReport: comment.permissions?.canReport,
+                onEdit: () => onEdit?.(comment),
+                onDelete: () => onDelete?.(comment),
+                onReport: () => onReport?.(comment)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(CommentContent_default, { content: comment.content }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CommentActions_default,
+            {
+              likes: comment.likes,
+              dislikes: comment.dislikes,
+              onLike: () => onLike?.(comment),
+              onDislike: () => onDislike?.(comment),
+              onReply: () => {
+                setIsReplying((prev) => !prev);
+                onReply?.(comment);
+              }
+            }
+          ),
+          isReplying && /* @__PURE__ */ jsxRuntime.jsx(
+            ReplyComposer_default,
+            {
+              username: comment.author.username,
+              onSubmit: handleReply
+            }
+          ),
+          !!comment.replies?.length && /* @__PURE__ */ jsxRuntime.jsx(
+            CommentRepliesToggle_default,
+            {
+              collapsed,
+              repliesCount: comment.replies.length,
+              onToggle: () => setCollapsed((prev) => !prev)
+            }
+          )
+        ] }) }),
+        !collapsed && !!comment.replies?.length && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "border-l border-gray-200 dark:border-neutral-800",
+              "pl-4 ml-5"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              CommentList_default,
+              {
+                comments: comment.replies,
+                depth: depth + 1,
+                onLike,
+                onDislike,
+                onReply,
+                onEdit,
+                onDelete,
+                onReport
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var CommentItem_default = CommentItem;
+function CommentList({
+  comments,
+  depth = 0,
+  onLike,
+  onDislike,
+  onReply,
+  onEdit,
+  onDelete,
+  onReport
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-8", children: comments.map((comment) => /* @__PURE__ */ jsxRuntime.jsx(
+    CommentItem_default,
+    {
+      comment,
+      depth,
+      onLike,
+      onDislike,
+      onReply,
+      onEdit,
+      onDelete,
+      onReport
+    },
+    comment.id
+  )) });
+}
+var CommentList_default = CommentList;
+var CommentThreadContext = React4.createContext(null);
+function useCommentThread(initialComments) {
+  const [comments, setComments] = React4.useState(initialComments);
+  return {
+    comments,
+    setComments
+  };
+}
+function CommentThread({
+  comments: initialComments = [],
+  onCommentCreate,
+  onLike,
+  onDislike,
+  onReply,
+  onEdit,
+  onDelete,
+  onReport
+}) {
+  const { comments, setComments } = useCommentThread(initialComments);
+  async function handleCreateComment(content) {
+    await onCommentCreate?.(content);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CommentThreadContext.Provider,
+    {
+      value: {
+        comments,
+        setComments
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8 w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CommentComposer_default, { onSubmit: handleCreateComment }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CommentList_default,
+          {
+            comments,
+            onLike,
+            onDislike,
+            onReply,
+            onEdit,
+            onDelete,
+            onReport
+          }
+        )
+      ] })
+    }
+  );
+}
+var CommentThread_default = CommentThread;
 function DataViewTable({
   title,
   columns,
@@ -17347,6 +18059,80 @@ function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
   ] }) });
 }
 var Slider_default = Slider;
+function StarRatingDistribution({
+  numericRating = true,
+  progressBarsRating = true,
+  ratingDistribution = [
+    { star: 5, count: 0 },
+    { star: 4, count: 0 },
+    { star: 3, count: 0 },
+    { star: 2, count: 0 },
+    { star: 1, count: 0 }
+  ],
+  variant = "warning",
+  appearance = "solid",
+  shape = "roundedSquare",
+  size = "sm",
+  animated = true,
+  striped = false,
+  showReviewCount = true,
+  className,
+  ...rest
+}) {
+  const totalReviews = ratingDistribution.reduce(
+    (acc, item) => acc + item.count,
+    0
+  );
+  const averageRating = totalReviews > 0 ? ratingDistribution.reduce(
+    (acc, item) => acc + item.star * item.count,
+    0
+  ) / totalReviews : 0;
+  const ratingDistributionWithPercentage = ratingDistribution.map((item) => ({
+    star: item.star,
+    percentage: totalReviews > 0 ? item.count / totalReviews * 100 : 0
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rest,
+      className: cn(
+        "flex flex-col md:flex-row items-center gap-8",
+        "p-6",
+        "bg-white dark:bg-neutral-900",
+        "border border-gray-200 dark:border-neutral-800",
+        "rounded-2xl shadow-sm",
+        className
+      ),
+      children: [
+        numericRating && /* @__PURE__ */ jsxRuntime.jsx(
+          NumericRating_default,
+          {
+            rating: averageRating,
+            totalReviews,
+            size: "md",
+            showStars: true,
+            showReviewCount
+          }
+        ),
+        progressBarsRating && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 w-full min-w-[260px]", children: ratingDistributionWithPercentage.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          ProgressBarRating_default,
+          {
+            star: item.star,
+            percentage: item.percentage,
+            variant,
+            appearance,
+            shape,
+            size,
+            animated,
+            striped
+          },
+          item.star
+        )) })
+      ]
+    }
+  );
+}
+var StarRatingDistribution_default = StarRatingDistribution;
 function WorldMapCountryTable({
   title = "Country Breakdown",
   data
@@ -17443,7 +18229,7 @@ function BoxNavItem({ icon, name, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames17__default.default(
+      className: classNames16__default.default(
         "w-full min-w-[80px] flex flex-col items-center justify-center py-3 text-center",
         "hover:text-secondary-700 hover:bg-gray-300/10 hover:cursor-pointer",
         selected ? "text-eui-secondary-700 bg-gray-300/10" : "text-gray-400",
@@ -17833,7 +18619,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         [`${styles}`]: styles
       }),
       children
@@ -17882,7 +18668,7 @@ function SidemenuLayout({ data, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames16__default.default({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -17954,7 +18740,7 @@ exports.BoxNavItem = BoxNavItem_default;
 exports.Brand = Brand_default;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbItem = BreadcrumbItem_default;
-exports.Button = Button;
+exports.Button = Button_default;
 exports.Caption = Caption;
 exports.Card = Card_default;
 exports.CardContent = CardContent_default;
@@ -17967,6 +18753,7 @@ exports.CloudinaryImage = CloudinaryImage_default;
 exports.CloudinaryProvider = CloudinaryProvider;
 exports.CloudinaryVideo = CloudinaryVideo_default;
 exports.Code = Code;
+exports.CommentThread = CommentThread_default;
 exports.Content = Content;
 exports.ContentArea = ContentArea_default;
 exports.DataView = DataView;
@@ -18032,11 +18819,13 @@ exports.MenuItemTitle = MenuItemTitle;
 exports.Modal = Modal_default;
 exports.MotionSurface = MotionSurface_default;
 exports.MultiImageInput = MultiImageInput_default;
+exports.NumericRating = NumericRating_default;
 exports.Overline = Overline;
 exports.Paragraph = Paragraph;
 exports.PieChart = PieChart_default;
 exports.PriceTag = PriceTag;
 exports.ProgressBar = ProgressBar;
+exports.ProgressBarRating = ProgressBarRating_default;
 exports.Quote = Quote;
 exports.Radio = Radio_default;
 exports.RouteTab = RouteTab_default;
@@ -18090,6 +18879,7 @@ exports.isMatch = isMatch;
 exports.isRenderFn = isRenderFn;
 exports.normalize = normalize;
 exports.registerLayout = registerLayout;
+exports.resolveAppearanceStyles = resolveAppearanceStyles;
 exports.resolveWithGlobal = resolveWithGlobal;
 exports.sendToast = sendToast;
 exports.useClickOutside = useClickOutside;