elseware-ui 2.30.1 → 2.31.0

package/dist/index.mjs

@@ -1,12 +1,12 @@
 import { twMerge } from 'tailwind-merge';
-import { BsStarFill, BsStar, BsChevronDown, BsStarHalf, BsFillDiamondFill } from 'react-icons/bs';
-import { FaSun, FaMoon, FaGripVertical, FaTrash, FaPlus, FaTimes, FaBars, FaCircle, FaEyeSlash, FaEye } from 'react-icons/fa';
+import React4, { createContext, forwardRef, useState, useImperativeHandle, useEffect, useMemo, useContext, Fragment as Fragment$1, useRef, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { BsStarFill, BsStarHalf, BsStar, BsChevronDown, BsFillDiamondFill } from 'react-icons/bs';
+import { FaSun, FaMoon, FaGripVertical, FaTrash, FaPlus, FaTimes, FaBars, FaCircle, FaEyeSlash, FaEye } from 'react-icons/fa';
 import { Bar, Line, Pie } from 'react-chartjs-2';
 import { Chart, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, LineElement, PointElement, ArcElement } from 'chart.js';
-import React4, { createContext, forwardRef, useState, useImperativeHandle, useEffect, useMemo, useContext, Fragment as Fragment$1, useRef, useCallback } from 'react';
 import { Transition } from '@headlessui/react';
-import classNames17 from 'classnames';
+import classNames16 from 'classnames';
 import { FaCircleChevronDown } from 'react-icons/fa6';
 import ReactWorldFlags from 'react-world-flags';
 import emojiFlags from 'emoji-flags';
@@ -160,27 +160,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 = createContext(null);
+var EUIProvider = ({
+  config,
+  children
+}) => {
+  const [state, setState] = useState(config);
+  return /* @__PURE__ */ jsx(EUIContext.Provider, { value: { config: state, setConfig: setState }, children });
+};
+var useEUIConfig = () => {
+  const ctx = 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",
@@ -193,28 +246,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",
@@ -338,18 +369,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__ */ jsx(
     "img",
     {
@@ -363,10 +414,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
@@ -379,6 +430,7 @@ var Badge = ({
   dot,
   count,
   variant = "success",
+  appearance = "solid",
   shape = "circle",
   size = "md",
   showZero = true,
@@ -395,14 +447,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__ */ jsxs("div", { ...rest, className: "relative w-fit h-fit", children: [
     /* @__PURE__ */ 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",
@@ -526,21 +585,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__ */ jsx("div", { className: "w-fit h-fit", children: /* @__PURE__ */ 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
@@ -659,30 +727,6 @@ function DataViewFooter({ children }) {
   return /* @__PURE__ */ 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 = createContext(null);
-var EUIProvider = ({
-  config,
-  children
-}) => {
-  const [state, setState] = useState(config);
-  return /* @__PURE__ */ jsx(EUIContext.Provider, { value: { config: state, setConfig: setState }, children });
-};
-var useEUIConfig = () => {
-  const ctx = 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
@@ -739,7 +783,7 @@ function Accordion({
     /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames17({
+        className: classNames16({
           "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs": true,
           "hover:cursor-pointer": toggleOnSummaryClick
         }),
@@ -757,7 +801,7 @@ function Accordion({
               children: /* @__PURE__ */ jsx(
                 FaCircleChevronDown,
                 {
-                  className: classNames17(
+                  className: classNames16(
                     "text-xl transition-transform duration-300",
                     { "rotate-180": collapse }
                   )
@@ -783,7 +827,7 @@ function Accordion({
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames17({
+            className: classNames16({
               "border-t border-t-eui-dark-400/40 eui-text-sm": true,
               "p-5": enableChildrenPadding
             }),
@@ -863,7 +907,7 @@ function CardHeader({ icon, title, description, className }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames17(
+      className: classNames16(
         "flex items-start gap-4 p-6 border-b border-white/10",
         className
       ),
@@ -879,14 +923,14 @@ function CardHeader({ icon, title, description, className }) {
 }
 var CardHeader_default = CardHeader;
 function CardContent({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames17("p-6 text-gray-300 text-sm", className), children });
+  return /* @__PURE__ */ jsx("div", { className: classNames16("p-6 text-gray-300 text-sm", className), children });
 }
 var CardContent_default = CardContent;
 function CardFooter({ children, className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17(
+      className: classNames16(
         "flex items-center gap-3 p-5 border-t border-white/10 text-sm text-gray-400",
         className
       ),
@@ -928,7 +972,7 @@ function GradientAnimation({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17("absolute inset-0"),
+      className: classNames16("absolute inset-0"),
       style: {
         background: `linear-gradient(${cfg.angle}deg, ${cfg.colors?.join(",")})`,
         backgroundSize: cfg.backgroundSize,
@@ -1074,7 +1118,7 @@ function MotionSurface({
 }) {
   const AnimationComponent = animationVariant === "custom" ? CustomAnimation : animationRegistry[animationVariant];
   const OverlayComponent = overlay === "custom" ? CustomOverlay : overlayRegistry[overlay];
-  return /* @__PURE__ */ jsxs("div", { className: classNames17("relative overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: classNames16("relative overflow-hidden", className), children: [
     AnimationComponent && /* @__PURE__ */ jsx(AnimationComponent, { config: animationConfig, animated }),
     OverlayComponent && /* @__PURE__ */ jsx(OverlayComponent, { config: overlayConfig }),
     /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -1598,19 +1642,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__ */ 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
@@ -1956,7 +2008,7 @@ var ListItem = ({
   align = "start",
   className
 }) => {
-  const bullet = renderBullet?.(index) ?? (bulletType === "number" ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-400", children: [
+  const bullet = renderBullet?.(index) ?? (bulletType === "number" ? /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium opacity-70", children: [
     index + 1,
     "."
   ] }) : bulletTypes[bulletType]);
@@ -1965,7 +2017,7 @@ var ListItem = ({
     {
       className: cn(
         "flex gap-3",
-        align === "center" && "items-center",
+        align === "center" ? "items-center" : "items-baseline",
         className
       ),
       children: [
@@ -1973,18 +2025,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.cloneElement(
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React4.cloneElement(
           TypographyComponent,
-          {},
+          {
+            className: cn(
+              "leading-relaxed",
+              TypographyComponent?.props?.className
+            )
+          },
           content
-        ) : content
+        ) : content })
       ]
     }
   );
@@ -2004,10 +2061,16 @@ var gridCols = {
 };
 function normalizeItem(item, defaultBulletType) {
   if (typeof item === "string") {
-    return { content: item, bulletType: defaultBulletType };
+    return {
+      content: item,
+      bulletType: defaultBulletType
+    };
   }
   if (React4.isValidElement(item)) {
-    return { content: item, bulletType: defaultBulletType };
+    return {
+      content: item,
+      bulletType: defaultBulletType
+    };
   }
   return {
     bulletType: defaultBulletType,
@@ -2028,8 +2091,8 @@ function List({
 }) {
   const isGrid = !!columns;
   const isOrdered = bulletType === "number";
-  return /* @__PURE__ */ jsxs("div", { ...rest, className: cn("py-3", className), children: [
-    title && /* @__PURE__ */ jsx("div", { className: "text-paragraph font-semibold mb-2", children: title }),
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cn("py-2", className), children: [
+    title && /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold mb-3", children: title }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -2050,7 +2113,8 @@ function List({
               bulletType: normalized.bulletType,
               renderBullet: normalized.renderBullet,
               TypographyComponent: normalized.TypographyComponent,
-              className: normalized.className
+              className: normalized.className,
+              align
             },
             i
           );
@@ -2060,230 +2124,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__ */ 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__ */ jsx("div", { ...rest, className: cn("inline-flex items-center", className), children: /* @__PURE__ */ jsx(
       "div",
       {
-        ...rest,
-        className: cn("inline-flex gap-3 text-md w-fit", className),
-        children: /* @__PURE__ */ 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__ */ jsxs(
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cn("inline-flex items-center gap-3", className), children: [
+    !!discount && discount > 0 && /* @__PURE__ */ 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__ */ jsxs("div", { className: "bg-green-700 px-2 py-1 font-bold rounded-md text-gray-200", children: [
-            "-",
-            discount,
-            "%"
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "inline-flex gap-1 items-center", children: [
-            discount ? /* @__PURE__ */ jsxs("div", { className: "inline-flex gap-[3px] font-semibold", children: [
-              /* @__PURE__ */ jsxs("div", { className: "eui-text-sm line-through", children: [
-                getCurrencySymbol(code),
-                price
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "eui-text-md", children: [
-                getCurrencySymbol(code),
-                applyDiscount(discount, price)
-              ] })
-            ] }) : /* @__PURE__ */ jsxs("div", { className: "text-gray-50 font-semibold", children: [
-              getCurrencySymbol(code),
-              price
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "text-yellow-500 font-thin", children: code })
-          ] })
+          "-",
+          discount,
+          "%"
         ]
       }
-    );
-  }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "inline-flex items-baseline gap-3", children: [
+      !!discount && discount > 0 && /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "font-semibold leading-none",
+            "opacity-50 line-through",
+            "text-lg"
+          ),
+          children: [
+            currency,
+            formatPrice(price, decimals)
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: cn("font-semibold leading-none", "text-lg"), children: [
+        currency,
+        formatPrice(discountedPrice, decimals)
+      ] }),
+      showCurrencyCode && /* @__PURE__ */ 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__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between gap-3",
+        sizeStyles.text,
+        "text-gray-600 dark:text-gray-300"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          startContent,
+          showLabel && /* @__PURE__ */ jsx("span", { className: "font-medium", children: label })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          endContent,
+          showPercentage && /* @__PURE__ */ jsxs("span", { className: "tabular-nums opacity-80", children: [
+            Math.round(percentage),
+            "%"
+          ] })
+        ] })
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxs("div", { ...rest, className: cn("w-full", className), children: [
-    showLabel && labelPlacement === "top" && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1 text-gray-400", children: [
-      /* @__PURE__ */ jsx("span", { children: label ?? "Progress" }),
-      /* @__PURE__ */ jsxs("span", { children: [
-        clampedValue,
-        "%"
-      ] })
-    ] }),
+    hasTopLabel && /* @__PURE__ */ jsx("div", { className: "mb-2", children: labelNode }),
     /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0",
+                "flex items-center justify-center",
+                "font-medium",
+                "text-white",
+                sizeStyles.text,
+                "pointer-events-none"
+              ),
+              children: /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2", children: [
+                showLabel && /* @__PURE__ */ jsx("span", { children: label }),
+                showPercentage && /* @__PURE__ */ jsxs("span", { children: [
+                  Math.round(percentage),
+                  "%"
+                ] })
+              ] })
+            }
+          )
         ]
       }
-    )
+    ),
+    hasBottomLabel && /* @__PURE__ */ 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__ */ jsx(BsStarFill, {});
-  const halfStarIcon = /* @__PURE__ */ jsx(BsStarHalf, {});
-  const emptyStarIcon = /* @__PURE__ */ jsx(BsStar, {});
-  return /* @__PURE__ */ jsxs("div", { ...rest, className: "inline-flex gap-2 items-center", children: [
-    isNumericRatingEnabled && /* @__PURE__ */ 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__ */ jsx("span", { className: "font-semibold text-yellow-600 dark:text-yellow-400", children: normalizedRating.toFixed(1) });
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cn("inline-flex items-center gap-2", className), children: [
+    showValue && valuePosition === "start" && ratingValue,
     /* @__PURE__ */ 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__ */ jsx("span", { children: starIcon }, index)),
-          [...Array(halfStars)].map((_, index) => /* @__PURE__ */ jsx("span", { children: halfStarIcon }, index + fullStars)),
-          [...Array(emptyStars)].map((_, index) => /* @__PURE__ */ jsx("span", { children: emptyStarIcon }, index + fullStars + halfStars))
+          [...Array(fullStars)].map((_, index) => /* @__PURE__ */ jsx(BsStarFill, {}, index)),
+          hasHalfStar && /* @__PURE__ */ jsx(BsStarHalf, {}),
+          [...Array(emptyStars)].map((_, index) => /* @__PURE__ */ jsx(BsStar, { className: "opacity-40" }, index + fullStars))
         ]
       }
     ),
-    isReviewAmountEnabled && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col items-center justify-center w-fit mb-4", children: [
-    /* @__PURE__ */ jsx("div", { className: "text-[60px] font-bold text-gray-400", children: averageRating.toFixed(1) }),
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(StarRating_default, { rating: Math.round(averageRating) }) }),
-    /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600 w-6", children: star }),
-    /* @__PURE__ */ jsx("div", { className: "relative bg-gray-400 bg-opacity-50 h-[10px] w-full rounded-md overflow-hidden", children: /* @__PURE__ */ jsx(
-      "div",
+function NumericRating({
+  rating,
+  totalReviews,
+  size = "md",
+  showStars = true,
+  showReviewCount = true,
+  reviewLabel = "reviews",
+  className,
+  ...rest
+}) {
+  const sizeStyles = sizes2[size];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: cn(
+        "flex flex-col items-center justify-center",
+        "min-w-[120px]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "font-bold leading-none",
+              "text-gray-900 dark:text-gray-100",
+              sizeStyles.value
+            ),
+            children: rating.toFixed(1)
+          }
+        ),
+        showStars && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(StarRating_default, { rating, size }) }),
+        showReviewCount && totalReviews !== void 0 && /* @__PURE__ */ 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__ */ jsxs("div", { ...rest, className: cn("flex items-center gap-3 w-full", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "w-5 text-sm font-medium text-gray-700 dark:text-gray-300", children: star }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "text-xs text-gray-500 w-[60px] text-right", children: [
+    /* @__PURE__ */ 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__ */ jsx("div", { className: "flex flex-col gap-2 w-full max-w-md", children: ratingDistribution.map((item) => /* @__PURE__ */ 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__ */ 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__ */ jsx(
-      NumericRating,
-      {
-        averageRating,
-        totalReviews
-      }
-    ),
-    progressBarsRating && /* @__PURE__ */ jsx(
-      ProgressBarsRating,
-      {
-        ratingDistribution: ratingDistributionWithPercentage
-      }
-    )
-  ] });
 }
-var StarRatingDistribution_default = StarRatingDistribution;
+var ProgressBarRating_default = ProgressBarRating;
 function Table({
   title,
   columns,
@@ -2591,7 +2829,7 @@ var Form = ({
         /* @__PURE__ */ jsx(UnsavedChangesGuard_default, { formik, enabled: warnOnUnsavedChanges }),
         /* @__PURE__ */ jsx(DirtyObserver_default, { formik, onDirtyChange }),
         /* @__PURE__ */ jsx(FormObserver_default, { formik, onChange }),
-        /* @__PURE__ */ jsx("div", { className: classNames17(styles), children })
+        /* @__PURE__ */ jsx("div", { className: classNames16(styles), children })
       ] })
     }
   );
@@ -2600,7 +2838,7 @@ var Backdrop = ({ children, styles }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         "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
       }),
@@ -2694,7 +2932,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",
@@ -2711,11 +2949,11 @@ function FormResponse({
   return /* @__PURE__ */ jsx(Transition4.TransitionDropdown, { visibility: text ? true : false, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         "font-poppins font-light text-sm": true,
         [`${variantsLite[variant]}`]: variant,
         [`${shapes[shape]}`]: shape,
-        [`${sizes2[size]}`]: size,
+        [`${sizes3[size]}`]: size,
         [`${styles}`]: styles
       }),
       children: text
@@ -2828,7 +3066,7 @@ var ThemeSwitch = () => {
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames17(
+            className: classNames16(
               "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"
             )
@@ -14290,31 +14528,39 @@ function WorldMap({
     /* @__PURE__ */ 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 = useRef(null);
+  const variantStyles = resolveAppearanceStyles({
+    appearance,
+    variant,
+    solid: variantsSolid,
+    lite: variantsLite,
+    ghost: variantsGhost
+  });
   const handleMouseMove = (e) => {
     const btn = btnRef.current;
     if (!btn) return;
@@ -14323,38 +14569,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__ */ jsxs(
     "button",
     {
+      ...rest,
       ref: btnRef,
       type,
-      onClick,
-      onMouseMove: handleMouseMove,
       disabled: disabled || loading,
-      className: classNames17({
-        "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__ */ 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%
             )
           `
@@ -14362,13 +14606,14 @@ var Button = ({
           }
         ),
         loading && /* @__PURE__ */ jsx(AiOutlineLoading, { className: "animate-spin z-10" }),
-        icon && /* @__PURE__ */ jsx("div", { className: "z-10", children: icon }),
-        text && /* @__PURE__ */ jsx("div", { className: "z-10", children: text }),
-        children && /* @__PURE__ */ jsx("div", { className: "z-10", children })
+        icon && /* @__PURE__ */ jsx("span", { className: "z-10", children: icon }),
+        text && /* @__PURE__ */ jsx("span", { className: "z-10", children: text }),
+        children && /* @__PURE__ */ jsx("span", { className: "z-10", children })
       ]
     }
   );
-};
+}
+var Button_default = Button;
 function InputResponse({
   name,
   visibility,
@@ -14378,7 +14623,7 @@ function InputResponse({
   return /* @__PURE__ */ jsx(Transition4.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         "font-medium text-sm py-1 px-2": true,
         [`${textVariants[variant]}`]: variant,
         "transition-all ease-in-out": true,
@@ -14393,7 +14638,7 @@ function InputLabel({ text, children, styles }) {
   return /* @__PURE__ */ jsx(
     "label",
     {
-      className: classNames17({
+      className: classNames16({
         "px-0 eui-text-sm text-[13.5px] pointer-events-none select-none": true,
         "transition-all ease-in-out": true,
         [`${styles}`]: styles
@@ -14445,7 +14690,7 @@ var Input = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames17({
+        className: classNames16({
           "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,
@@ -14490,7 +14735,7 @@ var InputFile = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames17(
+        className: classNames16(
           "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),
@@ -14516,7 +14761,7 @@ var InputFile = ({
       InputLabel_default,
       {
         text: placeholder,
-        styles: classNames17({
+        styles: classNames16({
           "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
@@ -14542,7 +14787,7 @@ var InputList = ({ name, placeholder, shape }) => {
     /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(FieldArray, { name, children: ({ push, remove, move }) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames17({
+        className: classNames16({
           "flex flex-col space-y-2 w-full bg-eui-primary-300/10": true,
           [`${shapes[resolvedShape]}`]: true
         }),
@@ -14573,7 +14818,7 @@ var InputList = ({ name, placeholder, shape }) => {
                             {
                               name: `${name}[${index}]`,
                               placeholder: `Item ${index + 1}`,
-                              className: classNames17(
+                              className: classNames16(
                                 "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"
@@ -14641,7 +14886,7 @@ var InputListGroup = ({
       values[name]?.map((group, groupIndex) => /* @__PURE__ */ jsxs(
         "div",
         {
-          className: classNames17({
+          className: classNames16({
             "flex flex-col gap-2 bg-eui-primary-300/10 p-3": true,
             [`${shapes[resolvedShape]}`]: true
           }),
@@ -14653,7 +14898,7 @@ var InputListGroup = ({
                 {
                   name: `${name}[${groupIndex}].name`,
                   placeholder: `Group ${groupIndex + 1}`,
-                  className: classNames17(
+                  className: classNames16(
                     "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"
@@ -14695,7 +14940,7 @@ var InputListGroup = ({
                   {
                     ref: provided.innerRef,
                     ...provided.droppableProps,
-                    className: classNames17({
+                    className: classNames16({
                       "space-y-2 bg-eui-primary-300/10 p-2": true,
                       [`${shapes[resolvedShape]}`]: true
                     }),
@@ -14710,7 +14955,7 @@ var InputListGroup = ({
                             {
                               ref: provided2.innerRef,
                               ...provided2.draggableProps,
-                              className: classNames17({
+                              className: classNames16({
                                 "flex items-center gap-2 bg-eui-primary-300/10 p-2": true,
                                 [`${shapes[resolvedShape]}`]: true
                               }),
@@ -14721,7 +14966,7 @@ var InputListGroup = ({
                                   {
                                     name: `${name}[${groupIndex}].items[${itemIndex}]`,
                                     placeholder: `Item ${itemIndex + 1}`,
-                                    className: classNames17(
+                                    className: classNames16(
                                       "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"
@@ -14794,43 +15039,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 ? useField(props) : useField(props);
-  const checkboxClass = classNames17(
+  const [multiField, multiMeta, multiHelpers] = useField(
+    props
+  );
+  const [singleField, singleMeta, singleHelpers] = 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__ */ jsxs("div", { children: [
     !isMulti && /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-3 items-start", children: [
       /* @__PURE__ */ 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__ */ 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__ */ jsxs(
         "div",
@@ -14844,7 +15122,7 @@ var Checkbox = (props) => {
                 type: "checkbox",
                 checked,
                 onChange: () => {
-                  helpers.setValue(
+                  multiHelpers.setValue(
                     checked ? values.filter((v) => v !== option.value) : [...values, option.value]
                   );
                 },
@@ -14855,7 +15133,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
               }
             )
@@ -14873,7 +15154,7 @@ var Checkbox = (props) => {
       }
     )
   ] });
-};
+}
 var Checkbox_default = Checkbox;
 var DateSelector = ({
   placeholder,
@@ -14899,7 +15180,7 @@ var DateSelector = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames17({
+        className: classNames16({
           "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,
@@ -15008,7 +15289,7 @@ var ImageInput = forwardRef(
           /* @__PURE__ */ jsxs(
             "label",
             {
-              className: classNames17({
+              className: classNames16({
                 "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
@@ -15125,7 +15406,7 @@ function Radio({
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames17({
+            className: classNames16({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -15138,7 +15419,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames17({
+                  className: classNames16({
                     "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
@@ -15150,7 +15431,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames17({
+                  className: classNames16({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -15193,7 +15474,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -15206,7 +15487,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index),
             onMouseEnter: () => setHover(index),
             onMouseLeave: () => setHover(null),
-            className: classNames17({
+            className: classNames16({
               "text-yellow-600": index <= (hover ?? rating - 1),
               "text-gray-400": index > (hover ?? rating - 1)
             }),
@@ -15250,7 +15531,7 @@ function Select({
       {
         as: "select",
         ...props,
-        className: classNames17({
+        className: classNames16({
           "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,
@@ -15302,7 +15583,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames17(
+            className: classNames16(
               "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",
@@ -15359,7 +15640,7 @@ function Tags({
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: classNames17(
+          className: classNames16(
             "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,
@@ -15407,7 +15688,7 @@ function Tags({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames17(
+          styles: classNames16(
             "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"
           )
@@ -15448,7 +15729,7 @@ function TextArea({
           as: "textarea",
           ...field,
           ...props,
-          className: classNames17({
+          className: classNames16({
             "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),
@@ -15462,7 +15743,7 @@ function TextArea({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames17(
+          styles: classNames16(
             "absolute left-2 transition-all pointer-events-none text-eui-dark-200",
             field.value ? "top-[2px] text-[13.5px]" : "top-3 text-base"
           )
@@ -15493,7 +15774,7 @@ function ContentArea({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         "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,
@@ -15509,7 +15790,7 @@ function FlexCol({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -15522,7 +15803,7 @@ function FlexRow({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -15541,7 +15822,7 @@ function Grid({ children, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -15558,7 +15839,7 @@ var Layout = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         // "flex h-full w-screen bg-gray-100 overflow-auto": true,
         "flex bg-eui-light-600": true,
         "flex-col": flexDirection === "vertical",
@@ -15577,7 +15858,7 @@ var Header = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         static: position === "static",
         fixed: position === "fixed",
         sticky: position === "sticky",
@@ -15617,7 +15898,7 @@ var Content = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         "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)
@@ -15633,7 +15914,7 @@ var Footer = ({ children, styles }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         "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
@@ -15721,7 +16002,7 @@ function MarkdownEditor({
   const [field, meta, helpers] = useField(props);
   const { theme } = useTheme_default();
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx("div", { className: classNames17(theme === "dark" ? "dark" : "", styles), children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: classNames16(theme === "dark" ? "dark" : "", styles), children: /* @__PURE__ */ jsx(
       MDXEditor,
       {
         markdown: field.value,
@@ -15824,7 +16105,7 @@ function MarkdownTOC({ title = "Table of Contents" }) {
       "button",
       {
         onClick: () => scrollToHeading(heading.id),
-        className: classNames17(
+        className: classNames16(
           "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"
@@ -15980,7 +16261,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames17({
+      className: classNames16({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -16057,7 +16338,7 @@ var Breadcrumb = ({
         index < resolvedData.length - 1 && /* @__PURE__ */ jsx(
           "span",
           {
-            className: classNames17({
+            className: classNames16({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -16071,7 +16352,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -16101,7 +16382,7 @@ var Drawer = ({
       {
         show: visibility,
         enter: "transform transition duration-200 ease-out",
-        enterFrom: classNames17({
+        enterFrom: classNames16({
           "-translate-x-full": side === "left",
           "translate-x-full": side === "right",
           "-translate-y-full": side === "top",
@@ -16110,7 +16391,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({
+        leaveTo: classNames16({
           "-translate-x-full": side === "left",
           "translate-x-full": side === "right",
           "-translate-y-full": side === "top",
@@ -16119,7 +16400,7 @@ var Drawer = ({
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames17(
+            className: classNames16(
               "fixed shadow-lg z-50",
               {
                 "h-full w-[300px]": isHorizontal,
@@ -16151,7 +16432,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         "text-xl p-3 cursor-pointer": true,
         "transition-all ease-in-out": true,
         "text-eui-dark-500 dark:text-eui-secondary-600": !styles,
@@ -16199,7 +16480,7 @@ function FooterNav({ data = [], styles }) {
     childrenContent = /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames17({
+        className: classNames16({
           "grid w-full": true,
           "grid-cols-1": isMobile,
           "grid-cols-3": !isMobile,
@@ -16212,7 +16493,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -16253,7 +16534,7 @@ var FooterNavGroup = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames17({
+        className: classNames16({
           "": true,
           "py-2 font-semibold eui-text-lg": !styles,
           [`${styles}`]: styles
@@ -16298,7 +16579,7 @@ var FooterNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames17({
+      className: classNames16({
         "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,
@@ -16327,7 +16608,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -16380,7 +16661,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -16442,7 +16723,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames17({
+        className: classNames16({
           "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,
@@ -16470,7 +16751,7 @@ var HeaderNavGroup = ({
           children && /* @__PURE__ */ jsx(
             BsChevronDown,
             {
-              className: classNames17({
+              className: classNames16({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -16483,7 +16764,7 @@ var HeaderNavGroup = ({
     !collapsed && children && /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames17({
+        className: classNames16({
           "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
         }),
@@ -16513,7 +16794,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames17({
+      className: classNames16({
         "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,
@@ -16542,7 +16823,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -16582,7 +16863,7 @@ var Link = ({
       href: href || "#",
       target: targets[target],
       onClick: handleClick,
-      className: classNames17({
+      className: classNames16({
         [`${textVariants[variant]}`]: variant,
         [`${decorations[decoration]}`]: decoration,
         "font-bold": bold,
@@ -17047,7 +17328,7 @@ function Modal({
         "div",
         {
           ref: modalRef,
-          className: classNames17({
+          className: classNames16({
             "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit": true,
             [`${shapes[resolvedShape]}`]: true,
             [`${styles}`]: styles
@@ -17058,7 +17339,7 @@ function Modal({
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: classNames17({
+                  className: classNames16({
                     "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast": true,
                     "hover:cursor-pointer hover:bg-eui-dark-500": true
                   }),
@@ -17164,7 +17445,7 @@ function ShowMore({ text, limit }) {
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: classNames17({
+          className: classNames16({
             "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
@@ -17319,6 +17600,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__ */ 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__ */ jsx(
+          NumericRating_default,
+          {
+            rating: averageRating,
+            totalReviews,
+            size: "md",
+            showStars: true,
+            showReviewCount
+          }
+        ),
+        progressBarsRating && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full min-w-[260px]", children: ratingDistributionWithPercentage.map((item) => /* @__PURE__ */ 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
@@ -17415,7 +17770,7 @@ function BoxNavItem({ icon, name, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames17(
+      className: classNames16(
         "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",
@@ -17805,7 +18160,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         [`${styles}`]: styles
       }),
       children
@@ -17854,7 +18209,7 @@ function SidemenuLayout({ data, children }) {
   return /* @__PURE__ */ jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames17({
+      className: classNames16({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -17913,6 +18268,6 @@ function ScrollToTop({
 }
 var ScrollToTop_default = ScrollToTop;
 
-export { Accordion_default as Accordion, AsyncComponentWrapper_default as AsyncComponentWrapper, Avatar, Backdrop_default as Backdrop, Badge, BarChart_default as BarChart, Block_default as Block, BlockGroup_default as BlockGroup, BoxNav_default as BoxNav, BoxNavItem_default as BoxNavItem, Brand_default as Brand, Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, Button, Caption, Card_default as Card, CardContent_default as CardContent, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Chapter, Checkbox_default as Checkbox, Chip, CloudinaryImage_default as CloudinaryImage, CloudinaryProvider, CloudinaryVideo_default as CloudinaryVideo, Code, Content, ContentArea_default as ContentArea, DataView, DataViewTable_default as DataViewTable, DateSelector_default as DateSelector, DefaultLayout_default as DefaultLayout, Display, DocumentationPanel_default as DocumentationPanel, Drawer, DrawerToggler_default as DrawerToggler, EUIDevLayout_default as EUIDevLayout, EUIProvider, Flag, Flex, FlexCol_default as FlexCol, FlexRow_default as FlexRow, Footer, FooterNav_default as FooterNav, FooterNavGroup_default as FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse_default as FormResponse, GenericLayout_default as GenericLayout, GlowWrapper_default as GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid_default as Grid, Header, HeaderNav_default as HeaderNav, HeaderNavGroup_default as HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout_default as HomeLayout, Image2 as Image, ImageInput_default as ImageInput, Info_default as Info, Input, InputFile, InputLabel_default as InputLabel, InputList, InputListGroup, InputResponse_default as InputResponse, Label, Layout, Lead, LineChart_default as LineChart, Link, List_default as List, ListItem_default as ListItem, MarkdownEditor_default as MarkdownEditor, MarkdownProvider_default as MarkdownProvider, MarkdownTOC_default as MarkdownTOC, MarkdownViewer_default as MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal_default as Modal, MotionSurface_default as MotionSurface, MultiImageInput_default as MultiImageInput, Overline, Paragraph, PieChart_default as PieChart, PriceTag, ProgressBar, Quote, Radio_default as Radio, RouteTab_default as RouteTab, RouteTabs_default as RouteTabs, ScrollToTop_default as ScrollToTop, Section, Select_default as Select, ShapeSwitch, ShowMore_default as ShowMore, Sidebar_default as Sidebar, SidebarLayout_default as SidebarLayout, SidemenuLayout_default as SidemenuLayout, Skeleton, Slider_default as Slider, StarRating_default as StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, Switch_default as Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table_default as Table, Tag_default as Tag, Tags_default as Tags, TextArea_default as TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Tooltip4 as Tooltip, TopNav, Transition4 as Transition, TransitionDropdown_default as TransitionDropdown, TransitionFadeIn_default as TransitionFadeIn, Typography, UnderConstructionBanner, ValueBadge_default as ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideo_default as YoutubeVideoPlayer, cn, createForceLayout, createGridLayout, createTreeLayout, enumValues, getCurrencySymbol, getLayout, isMatch, isRenderFn, normalize, registerLayout, resolveWithGlobal, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme_default as useCurrentTheme, useDrawer_default as useDrawer, useEUIConfig, useIsMobile_default as useIsMobile, useModal_default as useModal, useTheme_default as useTheme };
+export { Accordion_default as Accordion, AsyncComponentWrapper_default as AsyncComponentWrapper, Avatar, Backdrop_default as Backdrop, Badge, BarChart_default as BarChart, Block_default as Block, BlockGroup_default as BlockGroup, BoxNav_default as BoxNav, BoxNavItem_default as BoxNavItem, Brand_default as Brand, Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, Button_default as Button, Caption, Card_default as Card, CardContent_default as CardContent, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Chapter, Checkbox_default as Checkbox, Chip, CloudinaryImage_default as CloudinaryImage, CloudinaryProvider, CloudinaryVideo_default as CloudinaryVideo, Code, Content, ContentArea_default as ContentArea, DataView, DataViewTable_default as DataViewTable, DateSelector_default as DateSelector, DefaultLayout_default as DefaultLayout, Display, DocumentationPanel_default as DocumentationPanel, Drawer, DrawerToggler_default as DrawerToggler, EUIDevLayout_default as EUIDevLayout, EUIProvider, Flag, Flex, FlexCol_default as FlexCol, FlexRow_default as FlexRow, Footer, FooterNav_default as FooterNav, FooterNavGroup_default as FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse_default as FormResponse, GenericLayout_default as GenericLayout, GlowWrapper_default as GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid_default as Grid, Header, HeaderNav_default as HeaderNav, HeaderNavGroup_default as HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout_default as HomeLayout, Image2 as Image, ImageInput_default as ImageInput, Info_default as Info, Input, InputFile, InputLabel_default as InputLabel, InputList, InputListGroup, InputResponse_default as InputResponse, Label, Layout, Lead, LineChart_default as LineChart, Link, List_default as List, ListItem_default as ListItem, MarkdownEditor_default as MarkdownEditor, MarkdownProvider_default as MarkdownProvider, MarkdownTOC_default as MarkdownTOC, MarkdownViewer_default as MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal_default as Modal, MotionSurface_default as MotionSurface, MultiImageInput_default as MultiImageInput, NumericRating_default as NumericRating, Overline, Paragraph, PieChart_default as PieChart, PriceTag, ProgressBar, ProgressBarRating_default as ProgressBarRating, Quote, Radio_default as Radio, RouteTab_default as RouteTab, RouteTabs_default as RouteTabs, ScrollToTop_default as ScrollToTop, Section, Select_default as Select, ShapeSwitch, ShowMore_default as ShowMore, Sidebar_default as Sidebar, SidebarLayout_default as SidebarLayout, SidemenuLayout_default as SidemenuLayout, Skeleton, Slider_default as Slider, StarRating_default as StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, Switch_default as Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table_default as Table, Tag_default as Tag, Tags_default as Tags, TextArea_default as TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Tooltip4 as Tooltip, TopNav, Transition4 as Transition, TransitionDropdown_default as TransitionDropdown, TransitionFadeIn_default as TransitionFadeIn, Typography, UnderConstructionBanner, ValueBadge_default as ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideo_default as YoutubeVideoPlayer, cn, createForceLayout, createGridLayout, createTreeLayout, enumValues, getCurrencySymbol, getLayout, isMatch, isRenderFn, normalize, registerLayout, resolveAppearanceStyles, resolveWithGlobal, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme_default as useCurrentTheme, useDrawer_default as useDrawer, useEUIConfig, useIsMobile_default as useIsMobile, useModal_default as useModal, useTheme_default as useTheme };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map