react-better-html 1.1.263 → 1.1.265

package/dist/index.mjs

@@ -7665,17 +7665,27 @@ var animationDurationOpen = animationDurationClose * 2;
 var FoldableComponent = forwardRef18(function Foldable({
   isOpen: controlledIsOpen,
   defaultOpen = false,
+  icon,
+  iconColor,
+  iconSize,
+  image,
+  imageUrl,
+  imageSize,
+  imageAzProfileImage,
   title,
   titleAs = "h3",
+  titleFontSize,
   titleColor,
   titleRightElement,
   description,
+  descriptionFontSize,
   descriptionColor,
+  textAlign,
   rightElement,
-  icon,
-  image,
+  lightMode,
   headerPaddingBlock,
   headerPaddingInline,
+  arrowPosition = "right",
   renderHeader,
   onOpenChange,
   children,
@@ -7729,6 +7739,7 @@ var FoldableComponent = forwardRef18(function Foldable({
       isOpen
     };
   }, [open, close, toggleOpen, isOpen]);
+  const arrow = /* @__PURE__ */ jsx26(Icon_default, { name: "chevronDown", transform: `rotate(${isOpen ? 180 : 0}deg)`, transition: theme2.styles.transition });
   return /* @__PURE__ */ jsxs23(Div_default.column, { width: "100%", ...props, children: [
     renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ jsxs23(
       Div_default.row,
@@ -7742,35 +7753,33 @@ var FoldableComponent = forwardRef18(function Foldable({
         onClick: toggleOpen,
         userSelect: "none",
         children: [
-          /* @__PURE__ */ jsxs23(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
-            icon && /* @__PURE__ */ jsx26(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
-            image && /* @__PURE__ */ jsx26(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
-            /* @__PURE__ */ jsxs23(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-              title && /* @__PURE__ */ jsxs23(Div_default.row, { alignItems: "center", gap: theme2.styles.space, children: [
-                /* @__PURE__ */ jsx26(
-                  Text_default,
-                  {
-                    as: titleAs,
-                    fontWeight: 700,
-                    lineHeight: "20px",
-                    color: titleColor ?? theme2.colors.textPrimary,
-                    children: title
-                  }
-                ),
-                titleRightElement
-              ] }),
-              description && /* @__PURE__ */ jsx26(Text_default, { color: descriptionColor ?? theme2.colors.textSecondary, children: description })
-            ] })
-          ] }),
-          rightElement,
-          /* @__PURE__ */ jsx26(
-            Icon_default,
+          arrowPosition === "left" && arrow,
+          /* @__PURE__ */ jsx26(Div_default, { flex: 1, children: /* @__PURE__ */ jsx26(
+            PageHeader_default,
             {
-              name: "chevronDown",
-              transform: `rotate(${isOpen ? 180 : 0}deg)`,
-              transition: theme2.styles.transition
+              icon,
+              iconColor,
+              iconSize,
+              image,
+              imageUrl,
+              imageSize,
+              imageAzProfileImage,
+              title,
+              titleAs,
+              titleFontSize,
+              titleColor,
+              titleRightElement,
+              description,
+              descriptionFontSize,
+              descriptionColor,
+              textAlign,
+              rightElement,
+              lightMode,
+              marginBottom: 0
             }
-          )
+          ) }),
+          rightElement,
+          arrowPosition === "right" && arrow
         ]
       }
     ),