elseware-ui 3.0.14 → 3.1.0

package/dist/index.js

@@ -6,7 +6,7 @@ var tailwindMerge = require('tailwind-merge');
 var index_js = require('react-icons/ai/index.js');
 var formik = require('formik');
 var index_js$2 = require('react-icons/fa/index.js');
-var classNames69 = require('classnames');
+var classNames67 = require('classnames');
 var reactBeautifulDnd = require('react-beautiful-dnd');
 var cloudinaryReact = require('cloudinary-react');
 var index_js$1 = require('react-icons/md/index.js');
@@ -27,7 +27,7 @@ require('@mdxeditor/editor/style.css');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React26__default = /*#__PURE__*/_interopDefault(React26);
-var classNames69__default = /*#__PURE__*/_interopDefault(classNames69);
+var classNames67__default = /*#__PURE__*/_interopDefault(classNames67);
 var ReactWorldFlags__default = /*#__PURE__*/_interopDefault(ReactWorldFlags);
 var emojiFlags__default = /*#__PURE__*/_interopDefault(emojiFlags);
 var CodeMirror__default = /*#__PURE__*/_interopDefault(CodeMirror);
@@ -4728,7 +4728,7 @@ var init_python = __esm({
 });
 
 // node_modules/refractor/lang/jsx.js
-function jsx217(Prism2) {
+function jsx226(Prism2) {
   Prism2.register(javascript);
   Prism2.register(markup);
   (function(Prism3) {
@@ -4861,14 +4861,14 @@ var init_jsx = __esm({
   "node_modules/refractor/lang/jsx.js"() {
     init_javascript();
     init_markup();
-    jsx217.displayName = "jsx";
-    jsx217.aliases = [];
+    jsx226.displayName = "jsx";
+    jsx226.aliases = [];
   }
 });
 
 // node_modules/refractor/lang/tsx.js
 function tsx(Prism2) {
-  Prism2.register(jsx217);
+  Prism2.register(jsx226);
   Prism2.register(typescript);
   (function(Prism3) {
     var typescript2 = Prism3.util.clone(Prism3.languages.typescript);
@@ -6346,7 +6346,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,
@@ -6378,106 +6390,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 = React26.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 = React26.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    model.loading && /* @__PURE__ */ jsxRuntime.jsx(index_js.AiOutlineLoading, { className: "animate-spin z-10" }),
-    model.icon && /* @__PURE__ */ jsxRuntime.jsx(
+var Button = React26.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 = React26.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      model.loading && /* @__PURE__ */ jsxRuntime.jsx(index_js.AiOutlineLoading, { className: "animate-spin z-10" }),
+      model.icon && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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
@@ -6530,7 +6548,7 @@ var Backdrop = ({ children: children3, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         "bg-black/75 top-0 bottom-0 left-0 right-0 z-50 fixed inset-0 flex items-center justify-center overflow-hidden": true,
         [`${styles}`]: styles
       }),
@@ -7120,7 +7138,7 @@ function renderTransitionChild(children3, className) {
   }
   const element7 = child;
   return React26__default.default.cloneElement(element7, {
-    className: classNames69__default.default(element7.props.className, className)
+    className: classNames67__default.default(element7.props.className, className)
   });
 }
 function TransitionBase({
@@ -7140,7 +7158,7 @@ function TransitionBase({
   if (!mounted && unmountOnExit) {
     return null;
   }
-  const transitionClassName = classNames69__default.default(
+  const transitionClassName = classNames67__default.default(
     visibility ? enterClassName : leaveClassName,
     active ? visibleClassName : hiddenClassName
   );
@@ -7644,7 +7662,7 @@ function InputFile(inputFileProps) {
             className: cn(
               inputControlClassName,
               "block truncate pointer-events-none",
-              classNames69__default.default({
+              classNames67__default.default({
                 "text-gray-500 dark:text-gray-300": !fileName
               }),
               inputClassName
@@ -7725,7 +7743,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(formik.FieldArray, { name: name2, children: ({ push: push2, remove: remove2, move }) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames69__default.default(
+        className: classNames67__default.default(
           "flex w-full flex-col space-y-2 bg-eui-primary-300/10",
           shapes[resolvedShape]
         ),
@@ -7754,7 +7772,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                           ref: provided2.innerRef,
                           ...draggableProps,
                           style: draggableStyle,
-                          className: classNames69__default.default(
+                          className: classNames67__default.default(
                             "flex items-center space-x-2 bg-eui-primary-300/10 p-2",
                             shapes[resolvedShape]
                           ),
@@ -7765,7 +7783,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                               {
                                 name: `${name2}[${index3}]`,
                                 placeholder: `Item ${index3 + 1}`,
-                                className: classNames69__default.default(
+                                className: classNames67__default.default(
                                   "peer h-[50px] w-full border bg-eui-primary-300/10 px-3 pb-2 pt-5 text-md placeholder-transparent placeholder-shown:p-3 focus:outline-none eui-text-md",
                                   shapes[resolvedShape],
                                   hasItemError ? "border-eui-danger-500" : "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -7861,7 +7879,7 @@ var InputListGroup = ({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "flex flex-col gap-2 bg-eui-primary-300/10 p-3",
               shapes[resolvedShape]
             ),
@@ -7873,7 +7891,7 @@ var InputListGroup = ({
                   {
                     name: `${name2}[${groupIndex}].name`,
                     placeholder: `Group ${groupIndex + 1}`,
-                    className: classNames69__default.default(
+                    className: classNames67__default.default(
                       "h-[40px] w-full border bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none",
                       shapes[resolvedShape],
                       "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -7904,7 +7922,7 @@ var InputListGroup = ({
                     {
                       ref: provided.innerRef,
                       ...provided.droppableProps,
-                      className: classNames69__default.default(
+                      className: classNames67__default.default(
                         "space-y-2 bg-eui-primary-300/10 p-2",
                         shapes[resolvedShape]
                       ),
@@ -7924,7 +7942,7 @@ var InputListGroup = ({
                                   ref: provided2.innerRef,
                                   ...draggableProps,
                                   style: draggableStyle,
-                                  className: classNames69__default.default(
+                                  className: classNames67__default.default(
                                     "flex items-center gap-2 bg-eui-primary-300/10 p-2",
                                     shapes[resolvedShape]
                                   ),
@@ -7935,7 +7953,7 @@ var InputListGroup = ({
                                       {
                                         name: `${itemsFieldName}[${itemIndex}]`,
                                         placeholder: `Item ${itemIndex + 1}`,
-                                        className: classNames69__default.default(
+                                        className: classNames67__default.default(
                                           "h-[40px] w-full border bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none",
                                           shapes[resolvedShape],
                                           "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -8688,7 +8706,7 @@ var ImageInput = React26.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
-              className: classNames69__default.default({
+              className: classNames67__default.default({
                 "border-2 border-dashed border-gray-700 bg-gray-900 h-[200px] w-[300px] flex flex-col gap-2 items-center justify-center group": true,
                 "hover:cursor-pointer hover:border-solid hover:border-gray-600 hover:bg-gray-900/80": true,
                 "transition-all ease-in-out duration-150": true
@@ -8876,7 +8894,7 @@ function MultiImageInput({
             onDragOver: handleDragOver,
             onDrop: () => handleDrop(index3),
             onDragEnd: () => setDraggedIndex(null),
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "relative h-[200px] w-[300px] overflow-hidden bg-gray-900",
               "transition-all duration-150",
               draggedIndex === index3 && "opacity-60",
@@ -9006,7 +9024,7 @@ function Radio({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames69__default.default({
+            className: classNames67__default.default({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -9019,7 +9037,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames69__default.default({
+                  className: classNames67__default.default({
                     "appearance-none w-4 h-4 border-2 border-eui-primary-400 rounded-full cursor-pointer transition-all duration-300": true,
                     // base radio button styles
                     "checked:bg-eui-secondary-700 checked:border-eui-primary-400": field2.value === option.value
@@ -9031,7 +9049,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames69__default.default({
+                  className: classNames67__default.default({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -9074,7 +9092,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -9087,7 +9105,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index3),
             onMouseEnter: () => setHover(index3),
             onMouseLeave: () => setHover(null),
-            className: classNames69__default.default({
+            className: classNames67__default.default({
               "text-yellow-600": index3 <= (hover ?? rating - 1),
               "text-gray-400": index3 > (hover ?? rating - 1)
             }),
@@ -9492,7 +9510,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-eui-dark-100",
               "peer-checked:after:translate-x-full peer-checked:after:border-white",
               "after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white",
@@ -9879,7 +9897,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -9956,7 +9974,7 @@ var Breadcrumb = ({
         index3 < resolvedData.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: classNames69__default.default({
+            className: classNames67__default.default({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -9970,7 +9988,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -10014,7 +10032,7 @@ var Drawer = ({
     isMobile && showBackdrop && /* @__PURE__ */ jsxRuntime.jsx(TransitionFade_default, { visibility, leaveDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames69__default.default(
+        className: classNames67__default.default(
           "fixed inset-0 bg-black/50 z-40",
           backdropStyles
         ),
@@ -10025,7 +10043,7 @@ var Drawer = ({
       "div",
       {
         style: drawerStyle,
-        className: classNames69__default.default(
+        className: classNames67__default.default(
           "fixed shadow-lg z-50",
           {
             "h-full w-[300px] top-0": isHorizontal && !hasOffset,
@@ -10054,7 +10072,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         "text-xl p-3 cursor-pointer": true,
         "transition-all ease-in-out": true,
         "text-eui-dark-500 dark:text-eui-secondary-600": !styles,
@@ -10067,8 +10085,16 @@ function DrawerToggler({
   );
 }
 var DrawerToggler_default = DrawerToggler;
-function FooterNav({ data = [], styles }) {
-  const isMobile = useIsMobile_default();
+var columnsClassName = (count) => {
+  const map3 = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-2 sm:grid-cols-3",
+    4: "grid-cols-2 sm:grid-cols-2 lg:grid-cols-4"
+  };
+  return map3[Math.min(Math.max(count, 1), 4)] ?? map3[4];
+};
+function FooterNav({ data = [], navigate, styles }) {
   const renderFooterNavItem = (item, index3) => {
     const { icon, name: name2, badge, to, onClick, component, ...rest } = item;
     const Component = component;
@@ -10080,49 +10106,147 @@ function FooterNav({ data = [], styles }) {
         badge,
         to,
         onClick,
+        navigate,
         ...rest
       },
       index3
     );
   };
   const renderFooterNavGroup = (item, index3) => {
-    const { icon, name: name2, badge, to, items, component, ...rest } = item;
+    const { icon, name: name2, badge, to, items: items2, component, ...rest } = item;
     const Component = component;
-    const groupItems = items && Array.isArray(items) ? items.map(
+    const groupItems = items2 && Array.isArray(items2) ? items2.map(
       (i, idx) => "items" in i ? renderFooterNavGroup(i, idx) : renderFooterNavItem(i, idx)
     ) : null;
     return /* @__PURE__ */ jsxRuntime.jsx(Component, { icon, name: name2, badge, ...rest, children: groupItems }, index3);
   };
-  const splitData = [...data];
-  let childrenContent;
-  if (splitData.length > 0) {
-    const items = splitData.map(
-      (item, index3) => "items" in item ? renderFooterNavGroup(item, index3) : renderFooterNavItem(item, index3)
-    );
-    childrenContent = /* @__PURE__ */ jsxRuntime.jsx(
+  if (data.length === 0) return null;
+  const items = data.map(
+    (item, index3) => "items" in item ? renderFooterNavGroup(item, index3) : renderFooterNavItem(item, index3)
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classNames67__default.default(
+        "grid w-full gap-8",
+        columnsClassName(data.length),
+        {
+          [`${styles}`]: styles
+        }
+      ),
+      children: items
+    }
+  );
+}
+var FooterNav_default = FooterNav;
+
+// src/components/data-display/typography/shared/typography.styles.ts
+var typographyStyles = ({
+  variant = "default",
+  decoration = "noUnderline",
+  bold,
+  italic,
+  className
+}) => cn(
+  textVariants[variant],
+  decorations[decoration],
+  bold && "font-bold",
+  italic && "italic",
+  className
+);
+var Overline = ({
+  children: children3,
+  variant,
+  decoration,
+  bold = true,
+  italic,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      className: cn(
+        "text-xs uppercase tracking-[0.2em]",
+        typographyStyles({
+          variant,
+          decoration,
+          bold,
+          italic,
+          className
+        })
+      ),
+      children: children3 || "Overline"
+    }
+  );
+};
+var FooterNavGroup = ({
+  icon,
+  name: name2,
+  badge,
+  title,
+  children: children3,
+  styles,
+  className,
+  titleClassName
+}) => {
+  const heading3 = title ?? (name2 ? /* @__PURE__ */ jsxRuntime.jsx(Overline, { children: name2 }) : null);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col", styles, className), children: [
+    heading3 && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames69__default.default({
-          "grid w-full": true,
-          "grid-cols-1": isMobile,
-          "grid-cols-3": !isMobile,
-          [`${styles}`]: styles
-        }),
-        children: items
+        className: cn(
+          "mb-3 flex items-center gap-2 text-eui-dark-700 dark:text-eui-light-600",
+          titleClassName
+        ),
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base", children: icon }),
+          heading3,
+          badge && /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge })
+        ]
       }
-    );
-  }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: children3 })
+  ] });
+};
+var FooterNavGroup_default = FooterNavGroup;
+var Link = ({
+  children: children3,
+  href,
+  target = "self",
+  variant = "info",
+  decoration = "underline",
+  bold,
+  italic,
+  styles,
+  onClick
+}) => {
+  const handleClick = (event) => {
+    if (onClick) {
+      event.preventDefault();
+      onClick();
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    "a",
     {
-      className: classNames69__default.default({
+      href: href || "#",
+      target: targets[target],
+      onClick: handleClick,
+      className: classNames67__default.default({
+        [`${textVariants[variant]}`]: variant,
+        [`${decorations[decoration]}`]: decoration,
+        "font-bold": bold,
+        italic,
+        "hover:cursor-pointer hover:brightness-125": true,
+        "transition-all ease-in-out": true,
         [`${styles}`]: styles
       }),
-      children: childrenContent
+      children: children3 ? children3 : "Link"
     }
   );
-}
-var FooterNav_default = FooterNav;
+};
 var FooterNavItemContext = ({
   icon,
   name: name2,
@@ -10138,76 +10262,60 @@ var FooterNavItemContext = ({
     badge && /* @__PURE__ */ jsxRuntime.jsx("div", { children: badge })
   ] });
 };
-var FooterNavGroup = ({
-  icon,
-  name: name2,
-  description,
-  badge,
-  to,
-  styles,
-  children: children3
-}) => {
-  const handleNavigation = () => {
-    if (to) {
-      window.location.href = to;
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: classNames69__default.default({
-          "": true,
-          "py-2 font-semibold eui-text-lg": !styles,
-          [`${styles}`]: styles
-        }),
-        onClick: () => {
-          if (!children3) {
-            handleNavigation();
-          }
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          FooterNavItemContext,
-          {
-            icon,
-            name: name2,
-            description,
-            badge
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: children3 })
-  ] });
-};
-var FooterNavGroup_default = FooterNavGroup;
 var FooterNavItem = ({
   icon,
   name: name2,
   description,
   badge,
   to,
+  external,
   onClick,
-  styles
+  navigate,
+  styles,
+  className
 }) => {
-  const handleNavigation = () => {
-    if (to) {
-      window.location.href = to;
-    } else if (onClick) {
+  const handleClick = () => {
+    if (onClick) {
       onClick();
+      return;
+    }
+    if (!to) return;
+    if (external) {
+      window.open(to, "_blank", "noopener,noreferrer");
+      return;
+    }
+    if (navigate) {
+      navigate(to);
+      return;
     }
+    window.location.href = to;
   };
+  const isSimpleLink = !icon && !description && !badge;
+  if (isSimpleLink) {
+    const useJsNav = Boolean(onClick) || Boolean(navigate) && Boolean(to);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Link,
+      {
+        href: to || "#",
+        target: external ? "blank" : "self",
+        variant: "default",
+        decoration: "noUnderline",
+        onClick: useJsNav ? handleClick : void 0,
+        styles: cn("block py-1 text-sm", styles, className),
+        children: name2
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      onClick: handleNavigation,
-      className: classNames69__default.default({
-        "flex flex-row items-center gap-3 cursor-pointer p-1 w-full": true,
-        "transition-all duration-200 ease-in-out": true,
-        "text-sm eui-text-sm": !styles,
-        "hover:eui-text-lg": !styles,
-        [`${styles}`]: styles
-      }),
+      onClick: handleClick,
+      className: cn(
+        "flex w-full cursor-pointer flex-row items-center gap-3 py-1 text-sm",
+        "eui-text-md eui-theme-transition hover:brightness-125",
+        styles,
+        className
+      ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
         FooterNavItemContext,
         {
@@ -10230,7 +10338,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -10283,7 +10391,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -10327,7 +10435,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames69__default.default({
+        className: classNames67__default.default({
           "flex flex-row gap-2 items-center justify-between cursor-pointer p-3 w-full": true,
           "transition-all duration-300 ease-in-out": true,
           "eui-text-md bg-gradient-to-t from-eui-dark-500/10 dark:from-green-700/10": !styles,
@@ -10355,7 +10463,7 @@ var HeaderNavGroup = ({
           children3 && /* @__PURE__ */ jsxRuntime.jsx(
             index_js$3.BsChevronDown,
             {
-              className: classNames69__default.default({
+              className: classNames67__default.default({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -10368,7 +10476,7 @@ var HeaderNavGroup = ({
     !collapsed && children3 && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames69__default.default({
+        className: classNames67__default.default({
           "absolute min-w-80 left-0 top-full mt-1 border border-eui-dark-300/10 dark:border-eui-dark-300/50 shadow-lg eui-shadow-lg z-50 w-full eui-bg-md": true,
           "transition-all duration-300 ease-in-out": true
         }),
@@ -10398,7 +10506,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         "flex flex-row items-center gap-3 cursor-pointer p-3 w-full": true,
         "transition-all duration-200 ease-in-out": true,
         "eui-text-md border-b border-eui-dark-500/20 dark:border-eui-secondary-900/20 bg-gradient-to-r from-eui-dark-500/10 dark:from-eui-secondary-900/10": !styles,
@@ -10427,7 +10535,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -10444,42 +10552,6 @@ var HeaderNavItemTitle = ({
     }
   );
 };
-var Link = ({
-  children: children3,
-  href,
-  target = "self",
-  variant = "info",
-  decoration = "underline",
-  bold,
-  italic,
-  styles,
-  onClick
-}) => {
-  const handleClick = (event) => {
-    if (onClick) {
-      event.preventDefault();
-      onClick();
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "a",
-    {
-      href: href || "#",
-      target: targets[target],
-      onClick: handleClick,
-      className: classNames69__default.default({
-        [`${textVariants[variant]}`]: variant,
-        [`${decorations[decoration]}`]: decoration,
-        "font-bold": bold,
-        italic,
-        "hover:cursor-pointer hover:brightness-125": true,
-        "transition-all ease-in-out": true,
-        [`${styles}`]: styles
-      }),
-      children: children3 ? children3 : "Link"
-    }
-  );
-};
 var MIContext = ({ icon, name: name2, badge }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base text-gray-500 dark:text-gray-400", children: icon }),
@@ -13659,7 +13731,7 @@ function Accordion({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames69__default.default(
+        className: classNames67__default.default(
           "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs",
           {
             "hover:cursor-pointer": toggleOnSummaryClick
@@ -13680,7 +13752,7 @@ function Accordion({
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 index_js$4.FaCircleChevronDown,
                 {
-                  className: classNames69__default.default("text-xl transition-transform duration-300", {
+                  className: classNames67__default.default("text-xl transition-transform duration-300", {
                     "rotate-180": collapse
                   })
                 }
@@ -13694,7 +13766,7 @@ function Accordion({
     /* @__PURE__ */ jsxRuntime.jsx(TransitionAccordion_default, { visibility: collapse, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames69__default.default(
+        className: classNames67__default.default(
           "border-t border-t-eui-dark-400/40 eui-text-sm",
           {
             "p-5": enableChildrenPadding
@@ -13751,7 +13823,7 @@ function CardHeader({ icon, title, description, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "flex items-start gap-4 p-6 border-b border-white/10",
         className
       ),
@@ -13767,14 +13839,14 @@ function CardHeader({ icon, title, description, className }) {
 }
 var CardHeader_default = CardHeader;
 function CardContent({ children: children3, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames69__default.default("p-6 text-gray-300 text-sm", className), children: children3 });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames67__default.default("p-6 text-gray-300 text-sm", className), children: children3 });
 }
 var CardContent_default = CardContent;
 function CardFooter({ children: children3, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "flex items-center gap-3 p-5 border-t border-white/10 text-sm text-gray-400",
         className
       ),
@@ -13816,7 +13888,7 @@ function GradientAnimation({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default("absolute inset-0"),
+      className: classNames67__default.default("absolute inset-0"),
       style: {
         background: `linear-gradient(${cfg.angle}deg, ${cfg.colors?.join(",")})`,
         backgroundSize: cfg.backgroundSize,
@@ -13962,7 +14034,7 @@ function MotionSurface({
 }) {
   const AnimationComponent = animationVariant === "custom" ? CustomAnimation : animationRegistry[animationVariant];
   const OverlayComponent = overlay === "custom" ? CustomOverlay : overlayRegistry[overlay];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames69__default.default("relative overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames67__default.default("relative overflow-hidden", className), children: [
     AnimationComponent && /* @__PURE__ */ jsxRuntime.jsx(AnimationComponent, { config: animationConfig, animated }),
     OverlayComponent && /* @__PURE__ */ jsxRuntime.jsx(OverlayComponent, { config: overlayConfig }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children: children3 })
@@ -17518,21 +17590,6 @@ var typographyLevels = {
     3: "text-xs leading-[20px]"
   }
 };
-
-// src/components/data-display/typography/shared/typography.styles.ts
-var typographyStyles = ({
-  variant = "default",
-  decoration = "noUnderline",
-  bold,
-  italic,
-  className
-}) => cn(
-  textVariants[variant],
-  decorations[decoration],
-  bold && "font-bold",
-  italic && "italic",
-  className
-);
 var Chapter = ({
   level = 1,
   children: children3,
@@ -17747,33 +17804,6 @@ var Lead = ({
     }
   );
 };
-var Overline = ({
-  children: children3,
-  variant,
-  decoration,
-  bold = true,
-  italic,
-  className,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...rest,
-      className: cn(
-        "text-xs uppercase tracking-[0.2em]",
-        typographyStyles({
-          variant,
-          decoration,
-          bold,
-          italic,
-          className
-        })
-      ),
-      children: children3 || "Overline"
-    }
-  );
-};
 var Display = ({
   level = 1,
   children: children3,
@@ -19059,7 +19089,7 @@ var ThemeSwitch = () => {
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "w-6 h-6 bg-white dark:bg-gray-600 rounded-full shadow-md transition-transform duration-300",
               theme === "dark" ? "translate-x-8" : "translate-x-0"
             )
@@ -30828,7 +30858,7 @@ function Modal({
     "div",
     {
       ref: modalRef,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit",
         shapes[resolvedShape],
         styles
@@ -30840,7 +30870,7 @@ function Modal({
             "button",
             {
               type: "button",
-              className: classNames69__default.default(
+              className: classNames67__default.default(
                 "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast",
                 "hover:cursor-pointer hover:bg-eui-dark-500"
               ),
@@ -31232,7 +31262,7 @@ var ContentArea = React26.forwardRef(
       "div",
       {
         ref,
-        className: classNames69__default.default({
+        className: classNames67__default.default({
           "min-h-screen h-full w-full transition-all duration-[200ms]": true,
           "py-3 px-5": !enablePadding,
           "py-3 px-5 lg:px-[150px]": enablePadding,
@@ -31249,7 +31279,7 @@ function FlexCol({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -31262,7 +31292,7 @@ function FlexRow({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -31281,7 +31311,7 @@ function Grid({ children: children3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -31298,7 +31328,7 @@ var Layout = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         // "flex h-full w-screen bg-gray-100 overflow-auto": true,
         "flex bg-eui-light-600": true,
         "flex-col": flexDirection === "vertical",
@@ -31320,7 +31350,7 @@ var Header = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         static: position4 === "static",
         fixed: position4 === "fixed",
         sticky: position4 === "sticky",
@@ -31355,7 +31385,7 @@ var Content = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         "w-full min-h-screen transition-all duration-200 eui-bg-sm": true,
         "md:pl-[300px]": !overlayedSidebar && sidebarVisible && !isMobile,
         // Shift when sidebar is open (desktop)
@@ -31371,7 +31401,7 @@ var Footer = ({ children: children3, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         "bottom-0 w-full h-fit": true,
         "border-t border-eui-dark-500/40 dark:border-eui-secondary-800 eui-bg-md": !styles,
         [`${styles}`]: styles
@@ -31559,7 +31589,7 @@ function ShowMore({ text: text10, limit }) {
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: classNames69__default.default({
+          className: classNames67__default.default({
             "text-blue-300  px-1 pb-1 mt-1": true,
             "bg-slate-900/70": !showMore,
             "bg-gradient-to-t from-slate-900/50 to-transparent": showMore
@@ -32475,7 +32505,7 @@ function DocumentationPanel({
   return /* @__PURE__ */ jsxRuntime.jsx(MarkdownProvider_default, { markdown: value, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-documentation-panel",
         "min-h-0 overflow-hidden bg-white text-gray-900",
         "dark:bg-gray-950 dark:text-gray-100",
@@ -32489,7 +32519,7 @@ function DocumentationPanel({
         /* @__PURE__ */ jsxRuntime.jsx(
           "main",
           {
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "eui-documentation-panel-viewer",
               "documentation-panel-scrollbar min-w-0 overflow-y-auto scroll-smooth",
               viewerClassName
@@ -32497,7 +32527,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: classNames69__default.default(
+                className: classNames67__default.default(
                   "mx-auto px-5 py-8 sm:px-6 lg:px-8",
                   contentMaxWidthClassName,
                   contentClassName
@@ -32510,7 +32540,7 @@ function DocumentationPanel({
         toc ? /* @__PURE__ */ jsxRuntime.jsx(
           "aside",
           {
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "eui-documentation-panel-toc",
               "hidden min-w-0 border-l border-gray-200 bg-white lg:block",
               "dark:border-gray-800 dark:bg-gray-950",
@@ -32519,7 +32549,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: classNames69__default.default(
+                className: classNames67__default.default(
                   "documentation-panel-scrollbar h-full overflow-y-auto px-5 py-8"
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownTOC_default, {}) })
@@ -32795,7 +32825,7 @@ function BoxNavItem({ icon, name: name2, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "w-full min-w-[80px] flex flex-col items-center justify-center py-3 text-center",
         "hover:text-secondary-700 hover:bg-gray-300/10 hover:cursor-pointer",
         selected ? "text-eui-secondary-700 bg-gray-300/10" : "text-gray-400",
@@ -32839,6 +32869,323 @@ function BoxNav({ data = [], currentPath, onNavigate, navigate }) {
   }) });
 }
 var BoxNav_default = BoxNav;
+function FooterBrand({
+  brand,
+  brandSrc,
+  brandAlt,
+  className
+}) {
+  if (brand) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-flex", className), children: brand });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Brand, { src: brandSrc, alt: brandAlt, className });
+}
+function FooterDescription({
+  children: children3,
+  className
+}) {
+  if (!children3) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(Paragraph, { level: 2, className: cn("max-w-sm text-sm", className), children: children3 });
+}
+function FooterSocial({ item, className }) {
+  const { name: name2, href, icon, external = true, onClick } = item;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href,
+      onClick,
+      target: external ? "_blank" : void 0,
+      rel: external ? "noopener noreferrer" : void 0,
+      "aria-label": name2,
+      title: name2,
+      className: cn(
+        "flex h-9 w-9 items-center justify-center rounded-full text-base",
+        "eui-text-md border border-eui-dark-500/30 dark:border-eui-light-600/30",
+        "eui-theme-transition hover:brightness-125",
+        "hover:bg-eui-dark-500/5 dark:hover:bg-eui-light-600/10",
+        "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current",
+        className
+      ),
+      children: icon
+    }
+  );
+}
+function FooterSocials({
+  items,
+  social,
+  className,
+  itemClassName
+}) {
+  if (!items || items.length === 0) return null;
+  const Social = social ?? FooterSocial;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap items-center gap-3", className), children: items.map((item, index3) => /* @__PURE__ */ jsxRuntime.jsx(
+    Social,
+    {
+      item,
+      className: itemClassName
+    },
+    item.key ?? item.name ?? item.href ?? index3
+  )) });
+}
+function FooterLink({ item, navigate, className }) {
+  const { label, to, icon, description, badge, external, onClick } = item;
+  const useJsNav = Boolean(onClick) || Boolean(navigate) && Boolean(to);
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+      return;
+    }
+    if (to && navigate) navigate(to);
+  };
+  const link3 = /* @__PURE__ */ jsxRuntime.jsx(
+    Link,
+    {
+      href: to || "#",
+      target: external ? "blank" : "self",
+      variant: "default",
+      decoration: "noUnderline",
+      onClick: useJsNav ? handleClick : void 0,
+      styles: cn(
+        "text-sm",
+        !icon && !description && "block py-1",
+        item.className,
+        className
+      ),
+      children: label
+    }
+  );
+  if (!icon && !description && !badge) return link3;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 py-1 text-sm", children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "eui-text-sm mt-0.5 shrink-0 text-base", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
+      link3,
+      description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "eui-text-sm text-xs", children: description })
+    ] }),
+    badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto", children: badge })
+  ] });
+}
+function FooterColumn({
+  column,
+  navigate,
+  link: link3,
+  className,
+  titleClassName,
+  linkClassName
+}) {
+  const Link2 = link3 ?? FooterLink;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FooterNavGroup,
+    {
+      title: column.title,
+      className,
+      titleClassName,
+      children: column.items.map((item, index3) => /* @__PURE__ */ jsxRuntime.jsx(
+        Link2,
+        {
+          item,
+          navigate,
+          className: linkClassName
+        },
+        item.key ?? index3
+      ))
+    }
+  );
+}
+var gridColsClassName = (count) => {
+  const map3 = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-2 sm:grid-cols-3",
+    4: "grid-cols-2 sm:grid-cols-4"
+  };
+  return map3[Math.min(Math.max(count, 1), 4)] ?? map3[4];
+};
+function FooterColumns({
+  columns,
+  navigate,
+  column,
+  link: link3,
+  className,
+  columnClassName,
+  titleClassName,
+  linkClassName
+}) {
+  if (!columns || columns.length === 0) return null;
+  const Column = column ?? FooterColumn;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("grid gap-8", gridColsClassName(columns.length), className),
+      children: columns.map((col, index3) => {
+        const ColumnComponent = col.component ?? Column;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ColumnComponent,
+          {
+            column: col,
+            navigate,
+            link: link3,
+            className: cn(columnClassName, col.className),
+            titleClassName,
+            linkClassName
+          },
+          col.key ?? index3
+        );
+      })
+    }
+  );
+}
+function FooterBottom({
+  copyright,
+  legalLinks = [],
+  bottomNote,
+  navigate,
+  classNames: classNames71
+}) {
+  const hasLegal = legalLinks.length > 0;
+  if (!copyright && !hasLegal && !bottomNote) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "mt-14 flex flex-col gap-4 pt-8",
+        "border-t border-eui-dark-500/15 dark:border-eui-light-600/15",
+        "md:flex-row md:items-center md:justify-between",
+        classNames71?.bottom
+      ),
+      children: [
+        copyright && /* @__PURE__ */ jsxRuntime.jsx(
+          Caption,
+          {
+            className: cn("max-w-3xl leading-relaxed", classNames71?.copyright),
+            children: copyright
+          }
+        ),
+        (hasLegal || bottomNote) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-5 gap-y-2 md:justify-end", children: [
+          legalLinks.map((item, index3) => {
+            const useJsNav = Boolean(item.onClick) || Boolean(navigate) && Boolean(item.to);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Link,
+              {
+                href: item.to || "#",
+                target: item.external ? "blank" : "self",
+                variant: "default",
+                decoration: "noUnderline",
+                onClick: useJsNav ? () => item.onClick ? item.onClick() : item.to && navigate?.(item.to) : void 0,
+                styles: cn("whitespace-nowrap text-xs", classNames71?.legalLink),
+                children: item.label
+              },
+              item.key ?? index3
+            );
+          }),
+          bottomNote && /* @__PURE__ */ jsxRuntime.jsx(Caption, { children: bottomNote })
+        ] })
+      ]
+    }
+  );
+}
+function SiteFooter({
+  brand,
+  brandSrc,
+  brandAlt,
+  description,
+  columns = [],
+  socials = [],
+  copyright,
+  legalLinks = [],
+  bottomNote,
+  navigate,
+  components,
+  classNames: classNames71,
+  className,
+  styles,
+  maxWidth = "max-w-7xl",
+  showBrand = true,
+  showColumns = true,
+  showSocials = true,
+  showBottom = true,
+  children: children3
+}) {
+  const Root = components?.root ?? Footer;
+  const Container = components?.container;
+  const BrandSlot = components?.brand ?? FooterBrand;
+  const DescriptionSlot = components?.description ?? FooterDescription;
+  const SocialsSlot = components?.socials ?? FooterSocials;
+  const ColumnsSlot = components?.columns ?? FooterColumns;
+  const BottomSlot = components?.bottom ?? FooterBottom;
+  const hasBrandBlock = showBrand && (Boolean(brand) || Boolean(brandSrc) || Boolean(description) || showSocials && socials.length > 0);
+  const hasColumns = showColumns && columns.length > 0;
+  const brandBlock = hasBrandBlock ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-6", classNames71?.brandBlock), children: [
+    showBrand && (Boolean(brand) || Boolean(brandSrc)) && /* @__PURE__ */ jsxRuntime.jsx(BrandSlot, { brand, brandSrc, brandAlt }),
+    description && /* @__PURE__ */ jsxRuntime.jsx(DescriptionSlot, { className: classNames71?.description, children: description }),
+    showSocials && socials.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      SocialsSlot,
+      {
+        items: socials,
+        social: components?.social,
+        className: classNames71?.socials,
+        itemClassName: classNames71?.social
+      }
+    )
+  ] }) : null;
+  const columnsBlock = hasColumns ? /* @__PURE__ */ jsxRuntime.jsx(
+    ColumnsSlot,
+    {
+      columns,
+      navigate,
+      column: components?.column,
+      link: components?.link,
+      className: cn(classNames71?.columns, brandBlock && "lg:col-span-3"),
+      columnClassName: classNames71?.column,
+      titleClassName: classNames71?.columnTitle,
+      linkClassName: classNames71?.link
+    }
+  ) : null;
+  const topSection = children3 ?? (brandBlock || columnsBlock ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "grid gap-12",
+        brandBlock && columnsBlock && "lg:grid-cols-4",
+        classNames71?.top
+      ),
+      children: [
+        brandBlock,
+        columnsBlock
+      ]
+    }
+  ) : null);
+  const content3 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    topSection,
+    showBottom && /* @__PURE__ */ jsxRuntime.jsx(
+      BottomSlot,
+      {
+        copyright,
+        legalLinks,
+        bottomNote,
+        navigate,
+        classNames: classNames71
+      }
+    )
+  ] });
+  const containerClassName = cn(
+    "mx-auto px-6 py-16 md:px-10 lg:px-16",
+    maxWidth,
+    classNames71?.container
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Root, { styles: cn(styles, classNames71?.root, className), children: Container ? /* @__PURE__ */ jsxRuntime.jsx(Container, { className: containerClassName, children: content3 }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClassName, children: content3 }) });
+}
+
+// src/compositions/navigation/site-footer/index.tsx
+var SiteFooter2 = Object.assign(SiteFooter, {
+  Brand: FooterBrand,
+  Description: FooterDescription,
+  Socials: FooterSocials,
+  Social: FooterSocial,
+  Columns: FooterColumns,
+  Column: FooterColumn,
+  Link: FooterLink,
+  Bottom: FooterBottom
+});
 function Sidebar({
   items = [],
   navigate,
@@ -33139,7 +33486,7 @@ var TopNav = ({
   currentPath,
   navigate,
   components,
-  classNames: classNames73,
+  classNames: classNames71,
   className
 }) => {
   const pathname = currentPath ?? (typeof window !== "undefined" ? window.location.pathname : "");
@@ -33191,11 +33538,15 @@ var TopNav = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     TNThemeProvider,
     {
-      value: { components: components || {}, classNames: classNames73 || {} },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center", classNames73?.root, className), children: items.map(renderNode) })
+      value: { components: components || {}, classNames: classNames71 || {} },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center", classNames71?.root, className), children: items.map(renderNode) })
     }
   );
 };
+var RECOMMENDATION_OPTIONS = [
+  { label: "Yes", value: "yes" },
+  { label: "No", value: "no" }
+];
 function ReviewForm({
   initialValues,
   placeholder = "Write your review...",
@@ -33203,163 +33554,85 @@ function ReviewForm({
   cancelLabel = "Cancel",
   loading = false,
   disabled = false,
-  autoFocus = false,
   config,
   onSubmit,
   onCancel
 }) {
-  const [content3, setContent] = React26.useState(initialValues?.content ?? "");
-  const [rating, setRating] = React26.useState(initialValues?.rating ?? 0);
-  const [isRecommended, setIsRecommended] = React26.useState(
-    initialValues?.isRecommended ?? true
-  );
-  const [error, setError] = React26.useState("");
-  const contentLength = content3.trim().length;
-  const ratingItems = React26.useMemo(() => {
-    return Array.from(
-      {
-        length: config.maxRating
-      },
-      (_2, index3) => index3 + 1
-    );
-  }, [config.maxRating]);
-  React26.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 text-xs text-gray-500 dark:text-gray-400", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        contentLength,
-        "/",
-        config.maxContentLength
-      ] }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: error })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Rating" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: ratingItems.map((item) => {
-        const active = item <= rating;
-        return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Do you recommend this?" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex cursor-pointer items-center gap-2 text-sm text-gray-700 dark:text-gray-300", children: [
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("label", { className: "inline-flex cursor-pointer items-center gap-2 text-sm text-gray-700 dark:text-gray-300", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Rating" }),
+            /* @__PURE__ */ jsxRuntime.jsx(StarRatingInput_default, { name: "rating", starAmount: config.maxRating })
+          ] }),
+          config.allowRecommendation && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
-      onCancel && /* @__PURE__ */ jsxRuntime.jsx(
-        Button_web_default,
-        {
-          text: cancelLabel,
-          variant: "secondary",
-          appearance: "ghost",
-          disabled: loading,
-          onClick: onCancel
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button_web_default,
-        {
-          text: submitLabel,
-          variant: "primary",
-          loading,
-          disabled: disabled || !content3.trim() || rating < config.minRating,
-          onClick: handleSubmit
-        }
-      )
-    ] })
-  ] });
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+            onCancel && /* @__PURE__ */ jsxRuntime.jsx(
+              Button_web_default,
+              {
+                type: "button",
+                text: cancelLabel,
+                variant: "secondary",
+                appearance: "ghost",
+                disabled: busy,
+                onClick: onCancel
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button_web_default,
+              {
+                type: "submit",
+                text: submitLabel,
+                variant: "primary",
+                loading: busy,
+                disabled: disabled || !isValid
+              }
+            )
+          ] })
+        ] });
+      }
+    }
+  );
 }
 var ReviewForm_default = ReviewForm;
 function ReviewComposer({
@@ -33373,12 +33646,12 @@ function ReviewComposer({
   onSubmit
 }) {
   if (!currentUser) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Please login to post your review." }),
+    return /* @__PURE__ */ jsxRuntime.jsx(Card_default, { styles: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography.Caption, { children: "Please login to post your review." }),
       onLoginClick && /* @__PURE__ */ jsxRuntime.jsx(Button_web_default, { text: "Login", variant: "primary", onClick: onLoginClick })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Card_default, { styles: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: currentUser.avatar, size: "md" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
       ReviewForm_default,
@@ -33608,48 +33881,23 @@ function ReviewHeader({ review, config }) {
 }
 var ReviewHeader_default = ReviewHeader;
 function ReviewContent({ review }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap break-words text-sm leading-6 text-gray-700 dark:text-gray-300", children: review.content });
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "inline-flex items-center gap-0.5",
-      "aria-label": `${rating} out of ${maxRating}`,
-      children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: item <= rating ? "text-sm text-yellow-400" : "text-sm text-gray-300 dark:text-neutral-700",
-          children: "\u2605"
-        },
-        item
-      ))
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(StarRating, { rating, max: maxRating, size: "sm" });
 }
 var ReviewRating_default = ReviewRating;
 function ReviewRecommendation({ isRecommended }) {
   if (typeof isRecommended !== "boolean") {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(index_js$5.BiCheckCircle, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(index_js$5.BiXCircle, { size: 16 }),
-        isRecommended ? "Recommended" : "Not Recommended"
-      ]
+      label: isRecommended ? "Recommended" : "Not Recommended",
+      variant: isRecommended ? "success" : "danger",
+      appearance: "lite"
     }
   );
 }
@@ -33787,56 +34035,32 @@ function MyReviewPanel({
   ] });
 }
 var MyReviewPanel_default = MyReviewPanel;
-function ReviewMenuItem({
-  icon,
-  name: name2,
-  badge,
-  to,
-  navigate,
-  className,
-  onClick,
-  style: style2
-}) {
-  return /* @__PURE__ */ jsxRuntime.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 = React26.useRef(null);
   useClickOutside(ref, () => setOpen(false));
+  const withClose = (action) => () => {
+    setOpen(false);
+    action?.();
+  };
   const items = [];
   if (canEdit) {
     items.push({
       type: "item",
       icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$5.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) {
@@ -33844,12 +34068,9 @@ function ReviewMenu({
       type: "item",
       icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$5.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) {
@@ -33857,25 +34078,9 @@ function ReviewMenu({
       type: "item",
       icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$5.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__ */ jsxRuntime.jsx(index_js$5.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) {
@@ -33896,20 +34101,20 @@ function ReviewMenu({
   ] });
 }
 var ReviewMenu_default = ReviewMenu;
-function ReviewActions({ canReply, onReply }) {
+function ReviewActions({ canReply, config, onReply }) {
   if (!canReply) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(index_js$5.BiReply, { size: 18 }),
-        "Reply as Owner"
-      ]
+      text: `Reply as ${config.ownerReplyLabel}`,
+      variant: "secondary",
+      appearance: "ghost",
+      size: "sm",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$5.BiReply, {}),
+      onClick: onReply
     }
   ) });
 }
@@ -33937,33 +34142,10 @@ function ReviewReplyHeader({ reply, config }) {
 }
 var ReviewReplyHeader_default = ReviewReplyHeader;
 function ReviewReplyContent({ reply }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap break-words text-sm leading-6 text-gray-700 dark:text-gray-300", children: reply.content });
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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,
@@ -33976,18 +34158,19 @@ function ReviewReplyMenu({
 }) {
   const ref = React26.useRef(null);
   useClickOutside(ref, () => setOpen(false));
+  const withClose = (action) => () => {
+    setOpen(false);
+    action?.();
+  };
   const items = [];
   if (canEdit) {
     items.push({
       type: "item",
       icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$5.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) {
@@ -33995,12 +34178,9 @@ function ReviewReplyMenu({
       type: "item",
       icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$5.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) {
@@ -34008,12 +34188,9 @@ function ReviewReplyMenu({
       type: "item",
       icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$5.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) {
@@ -34145,11 +34322,9 @@ function ReviewItem({
           canEdit,
           canDelete,
           canReport,
-          canReply,
           onEdit: () => onEditReview?.(review),
           onDelete: () => onDeleteReview?.(review),
-          onReport: () => onReportReview?.(review),
-          onReply: () => onReplyToReview?.(review)
+          onReport: () => onReportReview?.(review)
         }
       )
     ] }),
@@ -34168,6 +34343,7 @@ function ReviewItem({
       ActionsComponent,
       {
         review,
+        config,
         canReply,
         onReply: () => onReplyToReview?.(review)
       }
@@ -34191,9 +34367,9 @@ function ReviewEmptyState({
   title = "No reviews yet",
   text: text10 = "There are no reviews to show."
 }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: title }),
-    text10 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: text10 })
+  return /* @__PURE__ */ jsxRuntime.jsxs(Info, { className: "flex flex-col items-center gap-1 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Typography.Label, { bold: true, children: title }),
+    text10 && /* @__PURE__ */ jsxRuntime.jsx(Typography.Caption, { children: text10 })
   ] });
 }
 var ReviewEmptyState_default = ReviewEmptyState;
@@ -35546,11 +35722,11 @@ function addChildren(props, children3) {
     }
   }
 }
-function productionCreate(_2, jsx256, jsxs129) {
+function productionCreate(_2, jsx265, jsxs130) {
   return create3;
   function create3(_3, type2, props, key) {
     const isStaticChildren = Array.isArray(props.children);
-    const fn = isStaticChildren ? jsxs129 : jsx256;
+    const fn = isStaticChildren ? jsxs130 : jsx265;
     return key ? fn(type2, props, key) : fn(type2, props);
   }
 }
@@ -55581,7 +55757,7 @@ function MarkdownHeading({
       id: id2,
       level: typographyLevel,
       bold: true,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-heading group relative scroll-mt-24 font-bold leading-tight text-gray-900 dark:text-gray-100",
         HEADING_STYLES[level],
         className
@@ -55744,18 +55920,18 @@ function powerSetPermutations(arr) {
   }
 }
 var classNameCombinations = {};
-function getClassNameCombinations(classNames73) {
-  if (classNames73.length === 0 || classNames73.length === 1) return classNames73;
-  var key = classNames73.join(".");
+function getClassNameCombinations(classNames71) {
+  if (classNames71.length === 0 || classNames71.length === 1) return classNames71;
+  var key = classNames71.join(".");
   if (!classNameCombinations[key]) {
-    classNameCombinations[key] = powerSetPermutations(classNames73);
+    classNameCombinations[key] = powerSetPermutations(classNames71);
   }
   return classNameCombinations[key];
 }
-function createStyleObject(classNames73) {
+function createStyleObject(classNames71) {
   var elementStyle = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
   var stylesheet = arguments.length > 2 ? arguments[2] : void 0;
-  var nonTokenClassNames = classNames73.filter(function(className) {
+  var nonTokenClassNames = classNames71.filter(function(className) {
     return className !== "token";
   });
   var classNamesCombinations = getClassNameCombinations(nonTokenClassNames);
@@ -55763,8 +55939,8 @@ function createStyleObject(classNames73) {
     return _objectSpread(_objectSpread({}, styleObject), stylesheet[className]);
   }, elementStyle);
 }
-function createClassNameString(classNames73) {
-  return classNames73.join(" ");
+function createClassNameString(classNames71) {
+  return classNames71.join(" ");
 }
 function createChildren2(stylesheet, useInlineStyles) {
   var childrenCount = 0;
@@ -55937,8 +56113,8 @@ function flattenCodeTree(tree) {
       }));
     } else if (node2.children) {
       var _node$properties;
-      var classNames73 = className.concat(((_node$properties = node2.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.className) || []);
-      flattenCodeTree(node2.children, classNames73).forEach(function(i2) {
+      var classNames71 = className.concat(((_node$properties = node2.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.className) || []);
+      flattenCodeTree(node2.children, classNames71).forEach(function(i2) {
         return newTree.push(i2);
       });
     }
@@ -56469,7 +56645,7 @@ var json_default = json;
 
 // node_modules/react-syntax-highlighter/dist/esm/languages/prism/jsx.js
 init_jsx();
-var jsx_default = jsx217;
+var jsx_default = jsx226;
 
 // node_modules/react-syntax-highlighter/dist/esm/languages/prism/markup.js
 init_markup();
@@ -56602,7 +56778,7 @@ function MarkdownCodeBlock({
     "div",
     {
       ...props,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-code my-6 overflow-hidden rounded-md border border-slate-700 bg-[#0d1117] text-slate-300",
         className
       ),
@@ -56673,7 +56849,7 @@ function MarkdownInlineCode({
     Code,
     {
       ...props,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-inline-code whitespace-break-spaces rounded-md border border-gray-300/70 bg-gray-200/60 px-1.5 py-0.5 font-mono text-[0.875em] font-medium text-gray-900 dark:border-gray-600/70 dark:bg-gray-700/50 dark:text-gray-200",
         className
       ),
@@ -56714,7 +56890,7 @@ function MarkdownLink({
       href: safeHref,
       target: resolvedTarget,
       rel,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-link font-medium text-blue-600 underline underline-offset-4 transition-colors hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300",
         className
       ),
@@ -56749,7 +56925,7 @@ function MarkdownImage({
       title,
       loading: "lazy",
       decoding: "async",
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-image my-6 h-auto max-w-full rounded-md border border-gray-200 dark:border-gray-700",
         className
       )
@@ -56766,7 +56942,7 @@ function MarkdownTable({
     TableElement,
     {
       ...props,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-table w-full border-collapse text-[0.925rem]",
         className
       ),
@@ -56783,7 +56959,7 @@ function MarkdownTableCell({
     TableCell,
     {
       ...props,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-table-cell border-b border-r border-gray-200 p-3 text-left align-top last:border-r-0 dark:border-gray-700",
         className
       ),
@@ -56800,7 +56976,7 @@ function MarkdownTableHeaderCell({
     TableHeaderCell,
     {
       ...props,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-table-header-cell border-b border-r border-gray-200 p-3 text-left align-top font-bold text-gray-900 last:border-r-0 dark:border-gray-700 dark:text-gray-100",
         className
       ),
@@ -56816,7 +56992,7 @@ function MarkdownTableHead({
     TableHead,
     {
       ...props,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-table-head bg-gray-50 dark:bg-gray-900",
         className
       )
@@ -56831,7 +57007,7 @@ function MarkdownTableBody({
     TableBody,
     {
       ...props,
-      className: classNames69__default.default("eui-markdown-table-body", className)
+      className: classNames67__default.default("eui-markdown-table-body", className)
     }
   );
 }
@@ -56843,7 +57019,7 @@ function MarkdownTableRow({
     TableRow,
     {
       ...props,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-table-row even:bg-gray-50/70 dark:even:bg-gray-900/60",
         className
       )
@@ -56861,7 +57037,7 @@ function MarkdownBlockquote({
     {
       ...props,
       as: "blockquote",
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-blockquote my-6 border-l-4 border-gray-300 bg-transparent px-4 py-0 text-gray-600 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 dark:border-gray-700 dark:text-gray-400",
         className
       ),
@@ -56880,7 +57056,7 @@ function MarkdownParagraph({
     {
       ...props,
       level: 1,
-      className: classNames69__default.default("eui-markdown-paragraph my-4", className),
+      className: classNames67__default.default("eui-markdown-paragraph my-4", className),
       children: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children3 })
     }
   );
@@ -56891,7 +57067,7 @@ function MarkdownStrong({ className, ...props }) {
     "strong",
     {
       ...props,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-strong font-semibold text-gray-950 dark:text-gray-100",
         className
       )
@@ -56904,7 +57080,7 @@ function MarkdownEmphasis({ className, ...props }) {
     "em",
     {
       ...props,
-      className: classNames69__default.default("eui-markdown-emphasis italic", className)
+      className: classNames67__default.default("eui-markdown-emphasis italic", className)
     }
   );
 }
@@ -56917,7 +57093,7 @@ function MarkdownStrikethrough({
     "del",
     {
       ...props,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-strikethrough text-gray-500 dark:text-gray-400",
         className
       )
@@ -56978,7 +57154,7 @@ function MarkdownTaskCheckbox({
     "input",
     {
       ...props,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-task-checkbox mr-2 translate-y-px accent-blue-600",
         className
       )
@@ -56994,7 +57170,7 @@ function MarkdownThematicBreak({
     "hr",
     {
       ...props,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-thematic-break my-8 border-0 border-t border-gray-200 dark:border-gray-800",
         className
       )
@@ -57011,7 +57187,7 @@ function MarkdownDetails({ className, ...props }) {
     "details",
     {
       ...props,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-details my-4 rounded-md border border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-800 dark:bg-gray-900",
         className
       )
@@ -57023,7 +57199,7 @@ function MarkdownSummary({ className, ...props }) {
     "summary",
     {
       ...props,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-summary cursor-pointer font-semibold text-gray-950 dark:text-gray-100",
         className
       )
@@ -57035,7 +57211,7 @@ function MarkdownFigure({ className, ...props }) {
     "figure",
     {
       ...props,
-      className: classNames69__default.default("eui-markdown-figure my-6", className)
+      className: classNames67__default.default("eui-markdown-figure my-6", className)
     }
   );
 }
@@ -57047,7 +57223,7 @@ function MarkdownFigcaption({
   return /* @__PURE__ */ jsxRuntime.jsx("figcaption", { ...props, className: "eui-markdown-figcaption mt-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(
     Caption,
     {
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "text-gray-500 opacity-100 dark:text-gray-400",
         className
       ),
@@ -57446,14 +57622,14 @@ function MarkdownRenderer({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown markdown-body break-words bg-transparent text-[0.95rem] leading-7 text-gray-800 dark:text-gray-300",
         className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: classNames69__default.default(
+          className: classNames67__default.default(
             "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
             contentClassName
           ),
@@ -57531,11 +57707,11 @@ function MarkdownTOCItem({
       onClick: () => onSelect?.(heading3),
       "aria-current": active ? "location" : void 0,
       title: label,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-toc-item",
         "block w-full text-left text-sm transition-all ease-in-out duration-150",
         "hover:text-primary",
-        active ? classNames69__default.default("text-primary font-semibold underline", activeClassName) : classNames69__default.default("text-gray-500 dark:text-gray-400", inactiveClassName),
+        active ? classNames67__default.default("text-primary font-semibold underline", activeClassName) : classNames67__default.default("text-gray-500 dark:text-gray-400", inactiveClassName),
         className
       ),
       style: {
@@ -57601,7 +57777,7 @@ function MarkdownTOC({
     return emptyState ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames69__default.default(
+        className: classNames67__default.default(
           "eui-markdown-toc",
           "text-sm text-gray-500 dark:text-gray-400",
           className
@@ -57621,7 +57797,7 @@ function MarkdownTOC({
       {
         type: "button",
         onClick: () => setCollapsed((value) => !value),
-        className: classNames69__default.default(
+        className: classNames67__default.default(
           "eui-markdown-toc-title",
           "flex w-full items-center justify-between gap-2 text-left",
           "text-sm font-semibold uppercase tracking-wide",
@@ -57634,7 +57810,7 @@ function MarkdownTOC({
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              className: classNames69__default.default(
+              className: classNames67__default.default(
                 "text-xs opacity-60 transition-transform duration-150",
                 !collapsed && "rotate-90"
               ),
@@ -57647,7 +57823,7 @@ function MarkdownTOC({
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       "h2",
       {
-        className: classNames69__default.default(
+        className: classNames67__default.default(
           "eui-markdown-toc-title",
           "text-sm font-semibold uppercase tracking-wide",
           "text-gray-900 dark:text-gray-100",
@@ -57659,7 +57835,7 @@ function MarkdownTOC({
     !collapsed ? /* @__PURE__ */ jsxRuntime.jsx(
       "nav",
       {
-        className: classNames69__default.default(
+        className: classNames67__default.default(
           "eui-markdown-toc-list",
           "space-y-1",
           listClassName
@@ -57683,7 +57859,7 @@ function MarkdownTOC({
       }
     ) : null
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: classNames69__default.default("eui-markdown-toc", "space-y-4", className), children: content3 });
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: classNames67__default.default("eui-markdown-toc", "space-y-4", className), children: content3 });
 }
 var MarkdownTOC_default = MarkdownTOC;
 var DEFAULT_MARKDOWN_TOOLBAR_ACTIONS = [
@@ -57782,7 +57958,7 @@ function MarkdownToolbar({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-toolbar",
         "flex flex-wrap items-center gap-1 border-b border-gray-200 bg-gray-50 p-2",
         "dark:border-gray-700 dark:bg-gray-900",
@@ -57796,7 +57972,7 @@ function MarkdownToolbar({
             disabled: disabled || actionsDisabled,
             title: action.shortcut ? `${action.title || action.label} (${action.shortcut})` : action.title || action.label,
             onClick: () => onAction?.(action.id),
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "eui-markdown-toolbar-button",
               "inline-flex items-center justify-center rounded border border-transparent",
               "text-gray-700 transition-colors hover:border-gray-300 hover:bg-white",
@@ -57816,7 +57992,7 @@ function MarkdownToolbar({
             disabled,
             onClick: onViewModeToggle,
             title: isPreviewMode ? "Switch to Markdown syntax" : "Switch to preview",
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "eui-markdown-view-toggle",
               "inline-flex items-center justify-center rounded border font-medium transition-colors",
               "border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -58073,7 +58249,7 @@ function MarkdownSourceEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-editor",
         "overflow-hidden rounded border border-gray-300 bg-white",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -58089,7 +58265,7 @@ function MarkdownSourceEditor({
             actionsDisabled: readOnly,
             viewMode: currentViewMode,
             showViewModeToggle,
-            className: classNames69__default.default(toolbarClassName, toolbarProps?.className),
+            className: classNames67__default.default(toolbarClassName, toolbarProps?.className),
             onViewModeToggle: toggleViewMode,
             onAction: handleToolbarAction
           }
@@ -58097,7 +58273,7 @@ function MarkdownSourceEditor({
         currentViewMode === "preview" ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "eui-markdown-editor-preview",
               "min-h-[260px] p-4",
               previewClassName
@@ -58120,7 +58296,7 @@ function MarkdownSourceEditor({
             onChange: (event) => updateValue(event.target.value),
             onBlur,
             onKeyDown: handleKeyDown,
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "eui-markdown-source-textarea",
               "block w-full resize-y border-0 bg-transparent p-4 font-mono text-sm leading-7",
               "text-gray-900 outline-none placeholder:text-gray-400",
@@ -58150,7 +58326,7 @@ function MarkdownPreviewPane({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-preview-pane",
         "rounded border border-gray-300 bg-white p-4",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -58200,7 +58376,7 @@ function MarkdownSplitEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-split-editor",
         "grid gap-4",
         isHorizontal ? "grid-cols-1 lg:grid-cols-2" : "grid-cols-1",
@@ -58210,7 +58386,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "eui-markdown-split-source",
               "min-w-0 space-y-2",
               sourceWrapperClassName
@@ -58234,7 +58410,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "eui-markdown-split-preview",
               "min-w-0 space-y-2",
               previewWrapperClassName
@@ -58324,7 +58500,7 @@ function MarkdownField({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-field",
         "relative space-y-2",
         wrapperClassName
@@ -58334,7 +58510,7 @@ function MarkdownField({
           "label",
           {
             htmlFor: editorProps.id || field.name,
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "block text-sm font-medium text-gray-700 dark:text-gray-200",
               labelClassName
             ),
@@ -58359,7 +58535,7 @@ function MarkdownField({
         helperText && !hasError ? /* @__PURE__ */ jsxRuntime.jsx(
           "p",
           {
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "text-sm text-gray-500 dark:text-gray-400",
               helperTextClassName
             ),
@@ -58414,7 +58590,7 @@ function CodeMirrorMarkdownEditor({
     {
       id: id2,
       "data-name": name2,
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-adapter",
         "eui-markdown-codemirror-adapter",
         "overflow-hidden rounded border border-gray-300 bg-white",
@@ -58448,7 +58624,7 @@ function CodeMirrorMarkdownEditor({
             closeBrackets: true,
             bracketMatching: true
           },
-          className: classNames69__default.default("eui-markdown-codemirror", editorClassName),
+          className: classNames67__default.default("eui-markdown-codemirror", editorClassName),
           onChange: updateValue,
           onBlur
         }
@@ -58549,7 +58725,7 @@ function createDefaultPlugins({
     ...showToolbar ? [
       editor.toolbarPlugin({
         toolbarContents: toolbarContents ?? DefaultToolbar,
-        toolbarClassName: classNames69__default.default(
+        toolbarClassName: classNames67__default.default(
           "eui-markdown-mdx-toolbar",
           toolbarClassName
         ),
@@ -58669,7 +58845,7 @@ var MDXMarkdownEditor = React26.forwardRef(
         "aria-invalid": invalid || void 0,
         "data-theme": dark ? "dark" : void 0,
         onBlurCapture: handleBlur,
-        className: classNames69__default.default(
+        className: classNames67__default.default(
           "eui-markdown-adapter",
           "eui-markdown-mdx-adapter",
           dark && ["dark", "dark-theme"],
@@ -58687,12 +58863,12 @@ var MDXMarkdownEditor = React26.forwardRef(
             markdown: currentValue ?? "",
             readOnly: disabled || readOnly,
             plugins: plugins ?? defaultPlugins,
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "eui-markdown-mdx-editor",
               dark && ["dark", "dark-theme"],
               editorClassName
             ),
-            contentEditableClassName: classNames69__default.default(
+            contentEditableClassName: classNames67__default.default(
               "eui-markdown-mdx-content",
               contentEditableClassName
             ),
@@ -58729,7 +58905,7 @@ function MDXMarkdownField({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-mdx-field",
         "relative space-y-2",
         wrapperClassName
@@ -58739,7 +58915,7 @@ function MDXMarkdownField({
           "label",
           {
             htmlFor: editorId,
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "block text-sm font-medium text-gray-700 dark:text-gray-200",
               labelClassName
             ),
@@ -58773,7 +58949,7 @@ function MDXMarkdownField({
           "p",
           {
             id: helperId,
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "text-sm text-gray-500 dark:text-gray-400",
               helperTextClassName
             ),
@@ -58833,10 +59009,10 @@ function MarkdownLayout({
   };
   const hasLeftToc = hasToc && tocPosition === "left";
   const hasRightToc = hasToc && tocPosition === "right";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames69__default.default("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames67__default.default("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-layout-container",
         "mx-auto w-full px-4 sm:px-6 lg:px-8",
         containerClassName
@@ -58848,7 +59024,7 @@ function MarkdownLayout({
         header ? /* @__PURE__ */ jsxRuntime.jsx(
           "header",
           {
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "eui-markdown-layout-header",
               "mb-8",
               headerClassName
@@ -58859,7 +59035,7 @@ function MarkdownLayout({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "eui-markdown-layout-grid",
               "grid grid-cols-1 gap-8",
               hasSidebar && hasToc && "xl:grid-cols-[16rem_minmax(0,1fr)_18rem]",
@@ -58872,7 +59048,7 @@ function MarkdownLayout({
               hasSidebar ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames69__default.default(
+                  className: classNames67__default.default(
                     "eui-markdown-layout-sidebar",
                     "min-w-0",
                     stickySidebar && "lg:sticky lg:self-start",
@@ -58885,7 +59061,7 @@ function MarkdownLayout({
               hasLeftToc ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames69__default.default(
+                  className: classNames67__default.default(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -58898,7 +59074,7 @@ function MarkdownLayout({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "main",
                 {
-                  className: classNames69__default.default(
+                  className: classNames67__default.default(
                     "eui-markdown-layout-content",
                     "min-w-0",
                     contentClassName
@@ -58909,7 +59085,7 @@ function MarkdownLayout({
               hasRightToc ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames69__default.default(
+                  className: classNames67__default.default(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -58922,7 +59098,7 @@ function MarkdownLayout({
               hasAside ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames69__default.default(
+                  className: classNames67__default.default(
                     "eui-markdown-layout-aside",
                     "min-w-0",
                     stickyAside && "2xl:sticky 2xl:self-start",
@@ -58938,7 +59114,7 @@ function MarkdownLayout({
         footer2 ? /* @__PURE__ */ jsxRuntime.jsx(
           "footer",
           {
-            className: classNames69__default.default(
+            className: classNames67__default.default(
               "eui-markdown-layout-footer",
               "mt-10",
               footerClassName
@@ -58975,7 +59151,7 @@ function MarkdownDocsLayoutContent({
   const resolvedHeader = header ?? (title || description || headerActions ? /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default(
+      className: classNames67__default.default(
         "eui-markdown-docs-header",
         "flex flex-col gap-4 border-b border-gray-200 pb-6",
         "dark:border-gray-700",
@@ -58986,7 +59162,7 @@ function MarkdownDocsLayoutContent({
           title ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
             {
-              className: classNames69__default.default(
+              className: classNames67__default.default(
                 "eui-markdown-docs-title",
                 "text-3xl font-bold tracking-tight text-gray-950",
                 "dark:text-gray-50",
@@ -58998,7 +59174,7 @@ function MarkdownDocsLayoutContent({
           description ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: classNames69__default.default(
+              className: classNames67__default.default(
                 "eui-markdown-docs-description",
                 "max-w-3xl text-base leading-7 text-gray-600",
                 "dark:text-gray-400",
@@ -59086,7 +59262,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         [`${styles}`]: styles
       }),
       children: children3
@@ -59135,7 +59311,7 @@ function SidemenuLayout({ data, children: children3 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames69__default.default({
+      className: classNames67__default.default({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -59318,11 +59494,19 @@ exports.Flex = Flex;
 exports.FlexCol = FlexCol_default;
 exports.FlexRow = FlexRow_default;
 exports.Footer = Footer;
+exports.FooterBottom = FooterBottom;
+exports.FooterBrand = FooterBrand;
+exports.FooterColumn = FooterColumn;
+exports.FooterColumns = FooterColumns;
+exports.FooterDescription = FooterDescription;
+exports.FooterLink = FooterLink;
 exports.FooterNav = FooterNav_default;
 exports.FooterNavGroup = FooterNavGroup_default;
 exports.FooterNavItem = FooterNavItem;
 exports.FooterNavItemContext = FooterNavItemContext;
 exports.FooterNavItemTitle = FooterNavItemTitle;
+exports.FooterSocial = FooterSocial;
+exports.FooterSocials = FooterSocials;
 exports.Form = Form;
 exports.FormResponse = FormResponse;
 exports.GaugePlot = GaugePlot;
@@ -59435,6 +59619,7 @@ exports.ShowMore = ShowMore_default;
 exports.Sidebar = Sidebar_default;
 exports.SidebarLayout = SidebarLayout_default;
 exports.SidemenuLayout = SidemenuLayout_default;
+exports.SiteFooter = SiteFooter2;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider_default;
 exports.Spinner = Spinner;