elseware-ui 3.0.14 → 3.0.15

package/dist/index.mjs

@@ -15,7 +15,7 @@ import { FaCircleChevronDown } from 'react-icons/fa6/index.js';
 import ReactWorldFlags from 'react-world-flags';
 import emojiFlags from 'emoji-flags';
 import { ComposableMap, Geographies, Geography, Marker } from 'react-simple-maps';
-import { BiCheckCircle, BiXCircle, BiChevronDown, BiChevronUp, BiSolidLike, BiLike, BiSolidDislike, BiDislike, BiDotsVerticalRounded, BiReply, BiEdit, BiTrash, BiFlag } from 'react-icons/bi/index.js';
+import { BiChevronDown, BiChevronUp, BiSolidLike, BiLike, BiSolidDislike, BiDislike, BiDotsVerticalRounded, BiReply, BiEdit, BiTrash, BiFlag } from 'react-icons/bi/index.js';
 import CodeMirror from '@uiw/react-codemirror';
 import { markdown } from '@codemirror/lang-markdown';
 import { oneDark } from '@codemirror/theme-one-dark';
@@ -6336,7 +6336,19 @@ function useButton(props) {
     onMouseMove: _onMouseMove,
     ...rootRest
   } = props;
-  const { shape: resolvedShape, size: resolvedSize, variant: resolvedVariant, appearance: resolvedAppearance } = useResolvedButtonConfig({ compact, mode, variant, appearance, shape, size });
+  const {
+    shape: resolvedShape,
+    size: resolvedSize,
+    variant: resolvedVariant,
+    appearance: resolvedAppearance
+  } = useResolvedButtonConfig({
+    compact,
+    mode,
+    variant,
+    appearance,
+    shape,
+    size
+  });
   const tokens = buttonSizeTokens[resolvedSize];
   const variantClassName = resolveButtonVariantStyles({
     appearance: resolvedAppearance,
@@ -6368,106 +6380,112 @@ function useButton(props) {
   };
 }
 var WEB_ROOT = "relative overflow-hidden group inline-flex items-center justify-center gap-2 transition-all duration-300";
-var Button = forwardRef(function Button2(props, ref) {
-  const {
-    type: type2 = "button",
-    glow = true,
-    className,
-    contentClassName,
-    labelClassName,
-    accessibilityLabel,
-    accessibilityRole,
-    testID,
-    onClick,
-    onMouseMove
-  } = props;
-  const model = useButton(props);
-  const localRef = useRef(null);
-  const setRef = (node2) => {
-    localRef.current = node2;
-    if (typeof ref === "function") ref(node2);
-    else if (ref) ref.current = node2;
-  };
-  const handleMouseMove = (e) => {
-    const btn = localRef.current;
-    if (btn && glow) {
-      const rect = btn.getBoundingClientRect();
-      btn.style.setProperty("--glow-x", `${e.clientX - rect.left}px`);
-      btn.style.setProperty("--glow-y", `${e.clientY - rect.top}px`);
-    }
-    onMouseMove?.(e);
-  };
-  const handleClick = (e) => {
-    onClick?.(e);
-    if (!e.defaultPrevented) model.onPress?.();
-  };
-  const iconGroup = /* @__PURE__ */ jsxs(Fragment, { children: [
-    model.loading && /* @__PURE__ */ jsx(AiOutlineLoading, { className: "animate-spin z-10" }),
-    model.icon && /* @__PURE__ */ jsx(
+var Button = forwardRef(
+  function Button2(props, ref) {
+    const {
+      type: type2 = "button",
+      glow = true,
+      className,
+      contentClassName,
+      labelClassName,
+      accessibilityLabel,
+      accessibilityRole,
+      testID,
+      onClick,
+      onMouseMove
+    } = props;
+    const model = useButton(props);
+    const localRef = useRef(null);
+    const setRef = (node2) => {
+      localRef.current = node2;
+      if (typeof ref === "function") ref(node2);
+      else if (ref) ref.current = node2;
+    };
+    const handleMouseMove = (e) => {
+      const btn = localRef.current;
+      if (btn && glow) {
+        const rect = btn.getBoundingClientRect();
+        btn.style.setProperty("--glow-x", `${e.clientX - rect.left}px`);
+        btn.style.setProperty("--glow-y", `${e.clientY - rect.top}px`);
+      }
+      onMouseMove?.(e);
+    };
+    const handleClick = (e) => {
+      onClick?.(e);
+      if (!e.defaultPrevented) model.onPress?.();
+    };
+    const iconGroup = /* @__PURE__ */ jsxs(Fragment, { children: [
+      model.loading && /* @__PURE__ */ jsx(AiOutlineLoading, { className: "animate-spin z-10" }),
+      model.icon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "z-10 inline-flex shrink-0 items-center justify-center leading-none",
+            contentClassName
+          ),
+          style: {
+            height: model.iconSize,
+            width: model.iconSize,
+            lineHeight: 0
+          },
+          children: model.icon
+        }
+      )
+    ] });
+    const labelNode = model.label != null && model.label !== "" ? /* @__PURE__ */ jsx(
       "span",
       {
         className: cn(
-          "z-10 inline-flex shrink-0 items-center justify-center leading-none",
-          contentClassName
+          "z-10 inline-flex items-center justify-center leading-none",
+          labelClassName
         ),
-        style: { height: model.iconSize, width: model.iconSize, lineHeight: 0 },
-        children: model.icon
+        style: { minHeight: model.iconSize },
+        children: model.label
       }
-    )
-  ] });
-  const labelNode = model.label != null && model.label !== "" ? /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "z-10 inline-flex items-center justify-center leading-none",
-        labelClassName
-      ),
-      style: { minHeight: model.iconSize },
-      children: model.label
-    }
-  ) : null;
-  const trailing = model.iconPosition === "trailing";
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      ...model.rootRest,
-      ref: setRef,
-      type: type2,
-      disabled: model.isBusy,
-      onClick: handleClick,
-      onMouseMove: handleMouseMove,
-      "aria-disabled": model.isBusy,
-      "aria-label": accessibilityLabel,
-      "aria-pressed": model.selected,
-      "data-testid": testID,
-      role: accessibilityRole,
-      className: cn(
-        WEB_ROOT,
-        model.variantClassName,
-        model.shapeClassName,
-        model.tokens.padding,
-        model.tokens.text,
-        model.block && "w-full",
-        model.isTextMode && buttonTextModeClassName,
-        model.isBusy ? "brightness-75 grayscale cursor-not-allowed" : "hover:cursor-pointer",
-        className
-      ),
-      children: [
-        glow && /* @__PURE__ */ jsx(
-          "span",
-          {
-            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(255,255,255,0.18), transparent 50%)"
-            }
-          }
+    ) : null;
+    const trailing = model.iconPosition === "trailing";
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ...model.rootRest,
+        ref: setRef,
+        type: type2,
+        disabled: model.isBusy,
+        onClick: handleClick,
+        onMouseMove: handleMouseMove,
+        "aria-disabled": model.isBusy,
+        "aria-label": accessibilityLabel,
+        "aria-pressed": model.selected,
+        "data-testid": testID,
+        role: accessibilityRole,
+        className: cn(
+          WEB_ROOT,
+          model.variantClassName,
+          model.shapeClassName,
+          model.tokens.padding,
+          model.tokens.text,
+          model.block && "w-full",
+          model.isTextMode && buttonTextModeClassName,
+          model.isBusy ? "brightness-75 grayscale cursor-not-allowed" : "hover:cursor-pointer",
+          className
         ),
-        trailing ? labelNode : iconGroup,
-        trailing ? iconGroup : labelNode
-      ]
-    }
-  );
-});
+        children: [
+          glow && /* @__PURE__ */ jsx(
+            "span",
+            {
+              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(255,255,255,0.18), transparent 50%)"
+              }
+            }
+          ),
+          trailing ? labelNode : iconGroup,
+          trailing ? iconGroup : labelNode
+        ]
+      }
+    );
+  }
+);
 var Button_web_default = Button;
 
 // src/data/styles/shared.styles.tsx
@@ -33186,6 +33204,10 @@ var TopNav = ({
     }
   );
 };
+var RECOMMENDATION_OPTIONS = [
+  { label: "Yes", value: "yes" },
+  { label: "No", value: "no" }
+];
 function ReviewForm({
   initialValues,
   placeholder = "Write your review...",
@@ -33193,163 +33215,85 @@ function ReviewForm({
   cancelLabel = "Cancel",
   loading = false,
   disabled = false,
-  autoFocus = false,
   config,
   onSubmit,
   onCancel
 }) {
-  const [content3, setContent] = useState(initialValues?.content ?? "");
-  const [rating, setRating] = useState(initialValues?.rating ?? 0);
-  const [isRecommended, setIsRecommended] = useState(
-    initialValues?.isRecommended ?? true
-  );
-  const [error, setError] = useState("");
-  const contentLength = content3.trim().length;
-  const ratingItems = useMemo(() => {
-    return Array.from(
-      {
-        length: config.maxRating
-      },
-      (_2, index3) => index3 + 1
-    );
-  }, [config.maxRating]);
-  useEffect(() => {
-    setContent(initialValues?.content ?? "");
-    setRating(initialValues?.rating ?? 0);
-    setIsRecommended(initialValues?.isRecommended ?? true);
-    setError("");
-  }, [
-    initialValues?.content,
-    initialValues?.rating,
-    initialValues?.isRecommended
-  ]);
-  function validate() {
-    const trimmedContent = content3.trim();
-    if (trimmedContent.length < config.minContentLength) {
-      return `Review must be at least ${config.minContentLength} characters.`;
-    }
-    if (trimmedContent.length > config.maxContentLength) {
-      return `Review cannot be more than ${config.maxContentLength} characters.`;
-    }
-    if (rating < config.minRating) {
-      return "Please select a rating.";
-    }
-    return "";
-  }
-  async function handleSubmit() {
-    const nextError = validate();
-    if (nextError) {
-      setError(nextError);
-      return;
-    }
-    const values = {
-      content: content3.trim(),
-      rating,
-      isRecommended: config.allowRecommendation ? isRecommended : void 0
+  const formInitialValues = {
+    content: initialValues?.content ?? "",
+    rating: initialValues?.rating ?? 0,
+    isRecommended: initialValues?.isRecommended ?? true ? "yes" : "no"
+  };
+  async function handleSubmit(values) {
+    const normalized = {
+      content: values.content.trim(),
+      rating: Number(values.rating),
+      isRecommended: config.allowRecommendation ? values.isRecommended === "yes" : void 0
     };
-    await onSubmit(values);
+    await onSubmit(normalized);
   }
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        value: content3,
-        disabled: disabled || loading,
-        autoFocus,
-        placeholder,
-        maxLength: config.maxContentLength,
-        onChange: (event) => {
-          setContent(event.target.value);
-          setError("");
-        },
-        className: "min-h-[120px] w-full resize-none rounded-xl border border-gray-300 bg-white px-4 py-3 text-sm text-gray-900 outline-none transition-colors placeholder:text-gray-400 focus:border-blue-500 disabled:cursor-not-allowed disabled:opacity-60 dark:border-neutral-700 dark:bg-neutral-900 dark:text-gray-100 dark:placeholder:text-gray-500"
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 text-xs text-gray-500 dark:text-gray-400", children: [
-      /* @__PURE__ */ jsxs("span", { children: [
-        contentLength,
-        "/",
-        config.maxContentLength
-      ] }),
-      error && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: error })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Rating" }),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: ratingItems.map((item) => {
-        const active = item <= rating;
-        return /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            disabled: disabled || loading,
-            onClick: () => {
-              setRating(item);
-              setError("");
-            },
-            className: `
-                  text-2xl leading-none transition-transform disabled:cursor-not-allowed disabled:opacity-60
-                  ${active ? "text-yellow-400" : "text-gray-300 dark:text-neutral-700"}
-                  hover:scale-110
-                `,
-            "aria-label": `Rate ${item} out of ${config.maxRating}`,
-            children: "\u2605"
-          },
-          item
-        );
-      }) })
-    ] }),
-    config.allowRecommendation && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Do you recommend this?" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
-        /* @__PURE__ */ jsxs("label", { className: "inline-flex cursor-pointer items-center gap-2 text-sm text-gray-700 dark:text-gray-300", children: [
+  return /* @__PURE__ */ jsx(
+    Form,
+    {
+      enableReinitialize: true,
+      initialValues: formInitialValues,
+      onSubmit: handleSubmit,
+      children: (formik) => {
+        const content3 = String(formik.values.content ?? "").trim();
+        const rating = Number(formik.values.rating ?? 0);
+        const isValid = content3.length >= config.minContentLength && rating >= config.minRating;
+        const busy = loading || formik.isSubmitting;
+        return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
           /* @__PURE__ */ jsx(
-            "input",
+            TextArea,
             {
-              type: "radio",
-              checked: isRecommended,
-              disabled: disabled || loading,
-              onChange: () => setIsRecommended(true)
+              name: "content",
+              label: placeholder,
+              placeholder,
+              rows: 4,
+              limit: config.maxContentLength,
+              disabled: disabled || busy
             }
           ),
-          "Yes"
-        ] }),
-        /* @__PURE__ */ jsxs("label", { className: "inline-flex cursor-pointer items-center gap-2 text-sm text-gray-700 dark:text-gray-300", children: [
-          /* @__PURE__ */ jsx(
-            "input",
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Rating" }),
+            /* @__PURE__ */ jsx(StarRatingInput_default, { name: "rating", starAmount: config.maxRating })
+          ] }),
+          config.allowRecommendation && /* @__PURE__ */ jsx(
+            Radio_default,
             {
-              type: "radio",
-              checked: !isRecommended,
-              disabled: disabled || loading,
-              onChange: () => setIsRecommended(false)
+              name: "isRecommended",
+              placeholder: "Do you recommend this?",
+              options: RECOMMENDATION_OPTIONS
             }
           ),
-          "No"
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-      onCancel && /* @__PURE__ */ jsx(
-        Button_web_default,
-        {
-          text: cancelLabel,
-          variant: "secondary",
-          appearance: "ghost",
-          disabled: loading,
-          onClick: onCancel
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button_web_default,
-        {
-          text: submitLabel,
-          variant: "primary",
-          loading,
-          disabled: disabled || !content3.trim() || rating < config.minRating,
-          onClick: handleSubmit
-        }
-      )
-    ] })
-  ] });
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+            onCancel && /* @__PURE__ */ jsx(
+              Button_web_default,
+              {
+                type: "button",
+                text: cancelLabel,
+                variant: "secondary",
+                appearance: "ghost",
+                disabled: busy,
+                onClick: onCancel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button_web_default,
+              {
+                type: "submit",
+                text: submitLabel,
+                variant: "primary",
+                loading: busy,
+                disabled: disabled || !isValid
+              }
+            )
+          ] })
+        ] });
+      }
+    }
+  );
 }
 var ReviewForm_default = ReviewForm;
 function ReviewComposer({
@@ -33363,12 +33307,12 @@ function ReviewComposer({
   onSubmit
 }) {
   if (!currentUser) {
-    return /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Please login to post your review." }),
+    return /* @__PURE__ */ jsx(Card_default, { styles: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx(Typography.Caption, { children: "Please login to post your review." }),
       onLoginClick && /* @__PURE__ */ jsx(Button_web_default, { text: "Login", variant: "primary", onClick: onLoginClick })
     ] }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+  return /* @__PURE__ */ jsx(Card_default, { styles: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
     /* @__PURE__ */ jsx(Avatar, { src: currentUser.avatar, size: "md" }),
     /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
       ReviewForm_default,
@@ -33598,48 +33542,23 @@ function ReviewHeader({ review, config }) {
 }
 var ReviewHeader_default = ReviewHeader;
 function ReviewContent({ review }) {
-  return /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words text-sm leading-6 text-gray-700 dark:text-gray-300", children: review.content });
+  return /* @__PURE__ */ jsx(Typography.Paragraph, { className: "whitespace-pre-wrap break-words", children: review.content });
 }
 var ReviewContent_default = ReviewContent;
 function ReviewRating({ rating, maxRating }) {
-  const items = Array.from(
-    {
-      length: maxRating
-    },
-    (_2, index3) => index3 + 1
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "inline-flex items-center gap-0.5",
-      "aria-label": `${rating} out of ${maxRating}`,
-      children: items.map((item) => /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: item <= rating ? "text-sm text-yellow-400" : "text-sm text-gray-300 dark:text-neutral-700",
-          children: "\u2605"
-        },
-        item
-      ))
-    }
-  );
+  return /* @__PURE__ */ jsx(StarRating, { rating, max: maxRating, size: "sm" });
 }
 var ReviewRating_default = ReviewRating;
 function ReviewRecommendation({ isRecommended }) {
   if (typeof isRecommended !== "boolean") {
     return null;
   }
-  return /* @__PURE__ */ jsxs(
-    "span",
+  return /* @__PURE__ */ jsx(
+    Chip,
     {
-      className: `
-        inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium
-        ${isRecommended ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500"}
-      `,
-      children: [
-        isRecommended ? /* @__PURE__ */ jsx(BiCheckCircle, { size: 16 }) : /* @__PURE__ */ jsx(BiXCircle, { size: 16 }),
-        isRecommended ? "Recommended" : "Not Recommended"
-      ]
+      label: isRecommended ? "Recommended" : "Not Recommended",
+      variant: isRecommended ? "success" : "danger",
+      appearance: "lite"
     }
   );
 }
@@ -33777,56 +33696,32 @@ function MyReviewPanel({
   ] });
 }
 var MyReviewPanel_default = MyReviewPanel;
-function ReviewMenuItem({
-  icon,
-  name: name2,
-  badge,
-  to,
-  navigate,
-  className,
-  onClick,
-  style: style2
-}) {
-  return /* @__PURE__ */ jsx(
-    MenuItem,
-    {
-      icon,
-      name: name2,
-      badge,
-      to,
-      navigate,
-      onClick,
-      style: style2,
-      className
-    }
-  );
-}
+var MENU_ITEM_CLASS = "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800";
 function ReviewMenu({
   open,
   setOpen,
   canEdit,
   canDelete,
   canReport,
-  canReply,
   onEdit,
   onDelete,
-  onReport,
-  onReply
+  onReport
 }) {
   const ref = useRef(null);
   useClickOutside(ref, () => setOpen(false));
+  const withClose = (action) => () => {
+    setOpen(false);
+    action?.();
+  };
   const items = [];
   if (canEdit) {
     items.push({
       type: "item",
       icon: /* @__PURE__ */ jsx(BiEdit, {}),
       name: "Edit Review",
-      component: ReviewMenuItem,
-      onClick: () => {
-        setOpen(false);
-        onEdit?.();
-      },
-      className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800"
+      component: MenuItem,
+      onClick: withClose(onEdit),
+      className: MENU_ITEM_CLASS
     });
   }
   if (canDelete) {
@@ -33834,12 +33729,9 @@ function ReviewMenu({
       type: "item",
       icon: /* @__PURE__ */ jsx(BiTrash, {}),
       name: "Delete Review",
-      component: ReviewMenuItem,
-      onClick: () => {
-        setOpen(false);
-        onDelete?.();
-      },
-      className: "flex w-full items-center gap-2 px-4 py-3 text-sm text-red-500 hover:bg-gray-100 dark:hover:bg-neutral-800"
+      component: MenuItem,
+      onClick: withClose(onDelete),
+      className: `${MENU_ITEM_CLASS} text-red-500`
     });
   }
   if (canReport) {
@@ -33847,25 +33739,9 @@ function ReviewMenu({
       type: "item",
       icon: /* @__PURE__ */ jsx(BiFlag, {}),
       name: "Report Review",
-      component: ReviewMenuItem,
-      onClick: () => {
-        setOpen(false);
-        onReport?.();
-      },
-      className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800"
-    });
-  }
-  if (canReply) {
-    items.push({
-      type: "item",
-      icon: /* @__PURE__ */ jsx(BiReply, {}),
-      name: "Reply as Owner",
-      component: ReviewMenuItem,
-      onClick: () => {
-        setOpen(false);
-        onReply?.();
-      },
-      className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800"
+      component: MenuItem,
+      onClick: withClose(onReport),
+      className: MENU_ITEM_CLASS
     });
   }
   if (!items.length) {
@@ -33886,20 +33762,20 @@ function ReviewMenu({
   ] });
 }
 var ReviewMenu_default = ReviewMenu;
-function ReviewActions({ canReply, onReply }) {
+function ReviewActions({ canReply, config, onReply }) {
   if (!canReply) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsxs(
-    "button",
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    Button_web_default,
     {
       type: "button",
-      onClick: onReply,
-      className: "inline-flex items-center gap-1 font-medium transition-colors hover:text-gray-900 dark:hover:text-gray-100",
-      children: [
-        /* @__PURE__ */ jsx(BiReply, { size: 18 }),
-        "Reply as Owner"
-      ]
+      text: `Reply as ${config.ownerReplyLabel}`,
+      variant: "secondary",
+      appearance: "ghost",
+      size: "sm",
+      icon: /* @__PURE__ */ jsx(BiReply, {}),
+      onClick: onReply
     }
   ) });
 }
@@ -33927,33 +33803,10 @@ function ReviewReplyHeader({ reply, config }) {
 }
 var ReviewReplyHeader_default = ReviewReplyHeader;
 function ReviewReplyContent({ reply }) {
-  return /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words text-sm leading-6 text-gray-700 dark:text-gray-300", children: reply.content });
+  return /* @__PURE__ */ jsx(Typography.Paragraph, { className: "whitespace-pre-wrap break-words", children: reply.content });
 }
 var ReviewReplyContent_default = ReviewReplyContent;
-function ReviewReplyMenuItem({
-  icon,
-  name: name2,
-  badge,
-  to,
-  navigate,
-  className,
-  onClick,
-  style: style2
-}) {
-  return /* @__PURE__ */ jsx(
-    MenuItem,
-    {
-      icon,
-      name: name2,
-      badge,
-      to,
-      navigate,
-      onClick,
-      style: style2,
-      className
-    }
-  );
-}
+var MENU_ITEM_CLASS2 = "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800";
 function ReviewReplyMenu({
   open,
   setOpen,
@@ -33966,18 +33819,19 @@ function ReviewReplyMenu({
 }) {
   const ref = useRef(null);
   useClickOutside(ref, () => setOpen(false));
+  const withClose = (action) => () => {
+    setOpen(false);
+    action?.();
+  };
   const items = [];
   if (canEdit) {
     items.push({
       type: "item",
       icon: /* @__PURE__ */ jsx(BiEdit, {}),
       name: "Edit Reply",
-      component: ReviewReplyMenuItem,
-      onClick: () => {
-        setOpen(false);
-        onEdit?.();
-      },
-      className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800"
+      component: MenuItem,
+      onClick: withClose(onEdit),
+      className: MENU_ITEM_CLASS2
     });
   }
   if (canDelete) {
@@ -33985,12 +33839,9 @@ function ReviewReplyMenu({
       type: "item",
       icon: /* @__PURE__ */ jsx(BiTrash, {}),
       name: "Delete Reply",
-      component: ReviewReplyMenuItem,
-      onClick: () => {
-        setOpen(false);
-        onDelete?.();
-      },
-      className: "flex w-full items-center gap-2 px-4 py-3 text-sm text-red-500 hover:bg-gray-100 dark:hover:bg-neutral-800"
+      component: MenuItem,
+      onClick: withClose(onDelete),
+      className: `${MENU_ITEM_CLASS2} text-red-500`
     });
   }
   if (canReport) {
@@ -33998,12 +33849,9 @@ function ReviewReplyMenu({
       type: "item",
       icon: /* @__PURE__ */ jsx(BiFlag, {}),
       name: "Report Reply",
-      component: ReviewReplyMenuItem,
-      onClick: () => {
-        setOpen(false);
-        onReport?.();
-      },
-      className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800"
+      component: MenuItem,
+      onClick: withClose(onReport),
+      className: MENU_ITEM_CLASS2
     });
   }
   if (!items.length) {
@@ -34135,11 +33983,9 @@ function ReviewItem({
           canEdit,
           canDelete,
           canReport,
-          canReply,
           onEdit: () => onEditReview?.(review),
           onDelete: () => onDeleteReview?.(review),
-          onReport: () => onReportReview?.(review),
-          onReply: () => onReplyToReview?.(review)
+          onReport: () => onReportReview?.(review)
         }
       )
     ] }),
@@ -34158,6 +34004,7 @@ function ReviewItem({
       ActionsComponent,
       {
         review,
+        config,
         canReply,
         onReply: () => onReplyToReview?.(review)
       }
@@ -34181,9 +34028,9 @@ function ReviewEmptyState({
   title = "No reviews yet",
   text: text10 = "There are no reviews to show."
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-dashed border-gray-300 bg-white p-8 text-center dark:border-neutral-800 dark:bg-neutral-900", children: [
-    /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: title }),
-    text10 && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: text10 })
+  return /* @__PURE__ */ jsxs(Info, { className: "flex flex-col items-center gap-1 text-center", children: [
+    /* @__PURE__ */ jsx(Typography.Label, { bold: true, children: title }),
+    text10 && /* @__PURE__ */ jsx(Typography.Caption, { children: text10 })
   ] });
 }
 var ReviewEmptyState_default = ReviewEmptyState;
@@ -35536,11 +35383,11 @@ function addChildren(props, children3) {
     }
   }
 }
-function productionCreate(_2, jsx256, jsxs129) {
+function productionCreate(_2, jsx256, jsxs127) {
   return create3;
   function create3(_3, type2, props, key) {
     const isStaticChildren = Array.isArray(props.children);
-    const fn = isStaticChildren ? jsxs129 : jsx256;
+    const fn = isStaticChildren ? jsxs127 : jsx256;
     return key ? fn(type2, props, key) : fn(type2, props);
   }
 }