@gosalesdeal/blog 0.2.0 → 0.3.0

package/dist/components/landing/BlogLayoutComponents.js

@@ -0,0 +1,198 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+const BlogTwoColumnComponent = ({ props }) => {
+  const ratios = {
+    "50-50": { left: "50%", right: "50%" },
+    "60-40": { left: "60%", right: "40%" },
+    "40-60": { left: "40%", right: "60%" },
+    "70-30": { left: "70%", right: "30%" },
+    "30-70": { left: "30%", right: "70%" },
+    "66-33": { left: "66.66%", right: "33.33%" },
+    "33-66": { left: "33.33%", right: "66.66%" }
+  };
+  const ratio = ratios[props.columnRatio] || ratios["50-50"];
+  const containerStyle = {
+    backgroundColor: props.backgroundColor || "transparent",
+    marginTop: props.marginTop || "2rem",
+    marginBottom: props.marginBottom || "2rem"
+  };
+  const innerContainerStyle = {
+    maxWidth: props.containerMaxWidth || "1200px",
+    margin: "0 auto",
+    padding: props.containerPadding || "2rem"
+  };
+  const rowStyle = {
+    display: "flex",
+    gap: props.gap || "2rem",
+    alignItems: props.verticalAlign || "center"
+  };
+  const leftColStyle = {
+    flex: `0 0 ${ratio.left}`,
+    backgroundColor: props.leftBgColor || "transparent",
+    padding: props.leftPadding || "0"
+  };
+  const rightColStyle = {
+    flex: `0 0 ${ratio.right}`,
+    backgroundColor: props.rightBgColor || "transparent",
+    padding: props.rightPadding || "0"
+  };
+  const responsiveCSS = `
+    @media (max-width: 768px) {
+      .blog-two-column-row${props.stackOnMobile ? "-stack-mobile" : ""} {
+        ${props.stackOnMobile ? "flex-direction: column;" : ""}
+        ${props.stackOnMobile && props.reverseOnMobile ? "flex-direction: column-reverse;" : ""}
+      }
+      .blog-two-column-row${props.stackOnMobile ? "-stack-mobile" : ""} > div {
+        ${props.stackOnMobile ? "flex: 0 0 100% !important;" : ""}
+      }
+    }
+    @media (min-width: 769px) and (max-width: 1024px) {
+      .blog-two-column-row${props.stackOnTablet ? "-stack-tablet" : ""} {
+        ${props.stackOnTablet ? "flex-direction: column;" : ""}
+      }
+      .blog-two-column-row${props.stackOnTablet ? "-stack-tablet" : ""} > div {
+        ${props.stackOnTablet ? "flex: 0 0 100% !important;" : ""}
+      }
+    }
+  `;
+  return /* @__PURE__ */ jsxs("div", { className: `blog-two-column ${props.className || ""}`, style: containerStyle, children: [
+    props.customCSS && /* @__PURE__ */ jsx("style", { children: props.customCSS }),
+    /* @__PURE__ */ jsx("style", { children: responsiveCSS }),
+    /* @__PURE__ */ jsx("div", { style: innerContainerStyle, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `blog-two-column-row${props.stackOnMobile ? "-stack-mobile" : ""}${props.stackOnTablet ? "-stack-tablet" : ""}`,
+        style: rowStyle,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: props.leftClassName || "", style: leftColStyle, children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: props.leftContent || "Left column content" } }) }),
+          /* @__PURE__ */ jsx("div", { className: props.rightClassName || "", style: rightColStyle, children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: props.rightContent || "Right column content" } }) })
+        ]
+      }
+    ) })
+  ] });
+};
+const BlogThreeColumnComponent = ({ props }) => {
+  const ratios = {
+    "33-33-33": { col1: "33.33%", col2: "33.33%", col3: "33.33%" },
+    "50-25-25": { col1: "50%", col2: "25%", col3: "25%" },
+    "25-50-25": { col1: "25%", col2: "50%", col3: "25%" },
+    "25-25-50": { col1: "25%", col2: "25%", col3: "50%" },
+    "40-30-30": { col1: "40%", col2: "30%", col3: "30%" },
+    "30-40-30": { col1: "30%", col2: "40%", col3: "30%" },
+    "30-30-40": { col1: "30%", col2: "30%", col3: "40%" }
+  };
+  const ratio = ratios[props.columnRatio] || ratios["33-33-33"];
+  const containerStyle = {
+    backgroundColor: props.backgroundColor || "transparent",
+    marginTop: props.marginTop || "2rem",
+    marginBottom: props.marginBottom || "2rem"
+  };
+  const innerContainerStyle = {
+    maxWidth: props.containerMaxWidth || "1200px",
+    margin: "0 auto",
+    padding: props.containerPadding || "2rem"
+  };
+  const rowStyle = {
+    display: "flex",
+    gap: props.gap || "1.5rem",
+    alignItems: props.verticalAlign || "flex-start"
+  };
+  const responsiveCSS = `
+    @media (max-width: 768px) {
+      .blog-three-column-row${props.stackOnMobile ? "-stack-mobile" : ""} {
+        ${props.stackOnMobile ? "flex-direction: column;" : ""}
+      }
+      .blog-three-column-row${props.stackOnMobile ? "-stack-mobile" : ""} > div {
+        ${props.stackOnMobile ? "flex: 0 0 100% !important;" : ""}
+      }
+    }
+    @media (min-width: 769px) and (max-width: 1024px) {
+      .blog-three-column-row${props.stackOnTablet ? "-stack-tablet" : ""} {
+        ${props.stackOnTablet ? "flex-direction: column;" : ""}
+      }
+      .blog-three-column-row${props.stackOnTablet ? "-stack-tablet" : ""} > div {
+        ${props.stackOnTablet ? "flex: 0 0 100% !important;" : ""}
+      }
+    }
+  `;
+  return /* @__PURE__ */ jsxs("div", { className: `blog-three-column ${props.className || ""}`, style: containerStyle, children: [
+    props.customCSS && /* @__PURE__ */ jsx("style", { children: props.customCSS }),
+    /* @__PURE__ */ jsx("style", { children: responsiveCSS }),
+    /* @__PURE__ */ jsx("div", { style: innerContainerStyle, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `blog-three-column-row${props.stackOnMobile ? "-stack-mobile" : ""}${props.stackOnTablet ? "-stack-tablet" : ""}`,
+        style: rowStyle,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: props.column1ClassName || "",
+              style: {
+                flex: `0 0 ${ratio.col1}`,
+                backgroundColor: props.column1BgColor || "transparent",
+                padding: props.column1Padding || "0"
+              },
+              children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: props.column1Content || "Column 1" } })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: props.column2ClassName || "",
+              style: {
+                flex: `0 0 ${ratio.col2}`,
+                backgroundColor: props.column2BgColor || "transparent",
+                padding: props.column2Padding || "0"
+              },
+              children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: props.column2Content || "Column 2" } })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: props.column3ClassName || "",
+              style: {
+                flex: `0 0 ${ratio.col3}`,
+                backgroundColor: props.column3BgColor || "transparent",
+                padding: props.column3Padding || "0"
+              },
+              children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: props.column3Content || "Column 3" } })
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+};
+const BlogContainerComponent = ({ props }) => {
+  const wrapperStyle = {
+    display: "flex",
+    justifyContent: props.contentAlign || "center",
+    marginTop: props.marginTop || "2rem",
+    marginBottom: props.marginBottom || "2rem"
+  };
+  const containerStyle = {
+    width: props.width || "100%",
+    maxWidth: props.maxWidth || "800px",
+    backgroundColor: props.backgroundColor || "transparent",
+    backgroundImage: props.backgroundImage ? `url(${props.backgroundImage})` : "none",
+    backgroundSize: props.backgroundSize || "cover",
+    backgroundPosition: props.backgroundPosition || "center",
+    backgroundRepeat: "no-repeat",
+    padding: props.paddingTop || props.paddingBottom || props.paddingLeft || props.paddingRight ? `${props.paddingTop || props.padding || "2rem"} ${props.paddingRight || props.padding || "2rem"} ${props.paddingBottom || props.padding || "2rem"} ${props.paddingLeft || props.padding || "2rem"}` : props.padding || "2rem",
+    border: props.border ? `${props.borderWidth || "1px"} ${props.borderStyle || "solid"} ${props.borderColor || "#e5e7eb"}` : "none",
+    borderRadius: props.borderRadius || "8px",
+    textAlign: props.textAlign || "left"
+  };
+  return /* @__PURE__ */ jsx("div", { style: wrapperStyle, children: /* @__PURE__ */ jsxs("div", { className: `blog-container ${props.shadow || ""} ${props.className || ""}`, style: containerStyle, children: [
+    props.customCSS && /* @__PURE__ */ jsx("style", { children: props.customCSS }),
+    /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: props.content || "Container content" } })
+  ] }) });
+};
+export {
+  BlogContainerComponent,
+  BlogThreeColumnComponent,
+  BlogTwoColumnComponent
+};
+//# sourceMappingURL=BlogLayoutComponents.js.map

package/dist/components/landing/BlogLayoutComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogLayoutComponents.js","sources":["../../../src/components/landing/BlogLayoutComponents.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\n/**\n * Blog Layout Components\n * Flexible layout components for arranging blog content in columns\n */\n\n// Blog Two Column Layout Component\nexport const BlogTwoColumnComponent: React.FC<{ props: Record<string, any> }> = ({ props }) => {\n  const ratios: Record<string, { left: string; right: string }> = {\n    '50-50': { left: '50%', right: '50%' },\n    '60-40': { left: '60%', right: '40%' },\n    '40-60': { left: '40%', right: '60%' },\n    '70-30': { left: '70%', right: '30%' },\n    '30-70': { left: '30%', right: '70%' },\n    '66-33': { left: '66.66%', right: '33.33%' },\n    '33-66': { left: '33.33%', right: '66.66%' },\n  };\n\n  const ratio = ratios[props.columnRatio] || ratios['50-50'];\n\n  const containerStyle: any = {\n    backgroundColor: props.backgroundColor || 'transparent',\n    marginTop: props.marginTop || '2rem',\n    marginBottom: props.marginBottom || '2rem',\n  };\n\n  const innerContainerStyle: any = {\n    maxWidth: props.containerMaxWidth || '1200px',\n    margin: '0 auto',\n    padding: props.containerPadding || '2rem',\n  };\n\n  const rowStyle: any = {\n    display: 'flex',\n    gap: props.gap || '2rem',\n    alignItems: props.verticalAlign || 'center',\n  };\n\n  const leftColStyle: any = {\n    flex: `0 0 ${ratio.left}`,\n    backgroundColor: props.leftBgColor || 'transparent',\n    padding: props.leftPadding || '0',\n  };\n\n  const rightColStyle: any = {\n    flex: `0 0 ${ratio.right}`,\n    backgroundColor: props.rightBgColor || 'transparent',\n    padding: props.rightPadding || '0',\n  };\n\n  const responsiveCSS = `\n    @media (max-width: 768px) {\n      .blog-two-column-row${props.stackOnMobile ? '-stack-mobile' : ''} {\n        ${props.stackOnMobile ? 'flex-direction: column;' : ''}\n        ${props.stackOnMobile && props.reverseOnMobile ? 'flex-direction: column-reverse;' : ''}\n      }\n      .blog-two-column-row${props.stackOnMobile ? '-stack-mobile' : ''} > div {\n        ${props.stackOnMobile ? 'flex: 0 0 100% !important;' : ''}\n      }\n    }\n    @media (min-width: 769px) and (max-width: 1024px) {\n      .blog-two-column-row${props.stackOnTablet ? '-stack-tablet' : ''} {\n        ${props.stackOnTablet ? 'flex-direction: column;' : ''}\n      }\n      .blog-two-column-row${props.stackOnTablet ? '-stack-tablet' : ''} > div {\n        ${props.stackOnTablet ? 'flex: 0 0 100% !important;' : ''}\n      }\n    }\n  `;\n\n  return (\n    <div className={`blog-two-column ${props.className || ''}`} style={containerStyle}>\n      {props.customCSS && <style>{props.customCSS}</style>}\n      <style>{responsiveCSS}</style>\n      <div style={innerContainerStyle}>\n        <div \n          className={`blog-two-column-row${props.stackOnMobile ? '-stack-mobile' : ''}${props.stackOnTablet ? '-stack-tablet' : ''}`}\n          style={rowStyle}\n        >\n          <div className={props.leftClassName || ''} style={leftColStyle}>\n            <div dangerouslySetInnerHTML={{ __html: props.leftContent || 'Left column content' }} />\n          </div>\n          <div className={props.rightClassName || ''} style={rightColStyle}>\n            <div dangerouslySetInnerHTML={{ __html: props.rightContent || 'Right column content' }} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n// Blog Three Column Layout Component\nexport const BlogThreeColumnComponent: React.FC<{ props: Record<string, any> }> = ({ props }) => {\n  const ratios: Record<string, { col1: string; col2: string; col3: string }> = {\n    '33-33-33': { col1: '33.33%', col2: '33.33%', col3: '33.33%' },\n    '50-25-25': { col1: '50%', col2: '25%', col3: '25%' },\n    '25-50-25': { col1: '25%', col2: '50%', col3: '25%' },\n    '25-25-50': { col1: '25%', col2: '25%', col3: '50%' },\n    '40-30-30': { col1: '40%', col2: '30%', col3: '30%' },\n    '30-40-30': { col1: '30%', col2: '40%', col3: '30%' },\n    '30-30-40': { col1: '30%', col2: '30%', col3: '40%' },\n  };\n\n  const ratio = ratios[props.columnRatio] || ratios['33-33-33'];\n\n  const containerStyle: any = {\n    backgroundColor: props.backgroundColor || 'transparent',\n    marginTop: props.marginTop || '2rem',\n    marginBottom: props.marginBottom || '2rem',\n  };\n\n  const innerContainerStyle: any = {\n    maxWidth: props.containerMaxWidth || '1200px',\n    margin: '0 auto',\n    padding: props.containerPadding || '2rem',\n  };\n\n  const rowStyle: any = {\n    display: 'flex',\n    gap: props.gap || '1.5rem',\n    alignItems: props.verticalAlign || 'flex-start',\n  };\n\n  const responsiveCSS = `\n    @media (max-width: 768px) {\n      .blog-three-column-row${props.stackOnMobile ? '-stack-mobile' : ''} {\n        ${props.stackOnMobile ? 'flex-direction: column;' : ''}\n      }\n      .blog-three-column-row${props.stackOnMobile ? '-stack-mobile' : ''} > div {\n        ${props.stackOnMobile ? 'flex: 0 0 100% !important;' : ''}\n      }\n    }\n    @media (min-width: 769px) and (max-width: 1024px) {\n      .blog-three-column-row${props.stackOnTablet ? '-stack-tablet' : ''} {\n        ${props.stackOnTablet ? 'flex-direction: column;' : ''}\n      }\n      .blog-three-column-row${props.stackOnTablet ? '-stack-tablet' : ''} > div {\n        ${props.stackOnTablet ? 'flex: 0 0 100% !important;' : ''}\n      }\n    }\n  `;\n\n  return (\n    <div className={`blog-three-column ${props.className || ''}`} style={containerStyle}>\n      {props.customCSS && <style>{props.customCSS}</style>}\n      <style>{responsiveCSS}</style>\n      <div style={innerContainerStyle}>\n        <div \n          className={`blog-three-column-row${props.stackOnMobile ? '-stack-mobile' : ''}${props.stackOnTablet ? '-stack-tablet' : ''}`}\n          style={rowStyle}\n        >\n          <div \n            className={props.column1ClassName || ''} \n            style={{\n              flex: `0 0 ${ratio.col1}`,\n              backgroundColor: props.column1BgColor || 'transparent',\n              padding: props.column1Padding || '0',\n            }}\n          >\n            <div dangerouslySetInnerHTML={{ __html: props.column1Content || 'Column 1' }} />\n          </div>\n          <div \n            className={props.column2ClassName || ''} \n            style={{\n              flex: `0 0 ${ratio.col2}`,\n              backgroundColor: props.column2BgColor || 'transparent',\n              padding: props.column2Padding || '0',\n            }}\n          >\n            <div dangerouslySetInnerHTML={{ __html: props.column2Content || 'Column 2' }} />\n          </div>\n          <div \n            className={props.column3ClassName || ''} \n            style={{\n              flex: `0 0 ${ratio.col3}`,\n              backgroundColor: props.column3BgColor || 'transparent',\n              padding: props.column3Padding || '0',\n            }}\n          >\n            <div dangerouslySetInnerHTML={{ __html: props.column3Content || 'Column 3' }} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n// Blog Container/Section Component\nexport const BlogContainerComponent: React.FC<{ props: Record<string, any> }> = ({ props }) => {\n  const wrapperStyle: any = {\n    display: 'flex',\n    justifyContent: props.contentAlign || 'center',\n    marginTop: props.marginTop || '2rem',\n    marginBottom: props.marginBottom || '2rem',\n  };\n\n  const containerStyle: any = {\n    width: props.width || '100%',\n    maxWidth: props.maxWidth || '800px',\n    backgroundColor: props.backgroundColor || 'transparent',\n    backgroundImage: props.backgroundImage ? `url(${props.backgroundImage})` : 'none',\n    backgroundSize: props.backgroundSize || 'cover',\n    backgroundPosition: props.backgroundPosition || 'center',\n    backgroundRepeat: 'no-repeat',\n    padding: props.paddingTop || props.paddingBottom || props.paddingLeft || props.paddingRight \n      ? `${props.paddingTop || props.padding || '2rem'} ${props.paddingRight || props.padding || '2rem'} ${props.paddingBottom || props.padding || '2rem'} ${props.paddingLeft || props.padding || '2rem'}`\n      : (props.padding || '2rem'),\n    border: props.border ? `${props.borderWidth || '1px'} ${props.borderStyle || 'solid'} ${props.borderColor || '#e5e7eb'}` : 'none',\n    borderRadius: props.borderRadius || '8px',\n    textAlign: props.textAlign || 'left',\n  };\n\n  return (\n    <div style={wrapperStyle}>\n      <div className={`blog-container ${props.shadow || ''} ${props.className || ''}`} style={containerStyle}>\n        {props.customCSS && <style>{props.customCSS}</style>}\n        <div dangerouslySetInnerHTML={{ __html: props.content || 'Container content' }} />\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/landing/FlexibleLayoutComponent.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+interface ColumnElement {
+    id: string;
+    type: string;
+    [key: string]: any;
+}
+interface Column {
+    id: string;
+    elements: ColumnElement[];
+    width?: string;
+    backgroundColor?: string;
+    padding?: string;
+    alignment?: 'top' | 'center' | 'bottom';
+}
+interface FlexibleLayoutProps {
+    props: {
+        columnCount?: number;
+        columns?: Column[];
+        columnRatio?: string;
+        containerMaxWidth?: string;
+        containerPadding?: string;
+        containerMarginTop?: string;
+        containerMarginBottom?: string;
+        containerBackgroundColor?: string;
+        containerBorderRadius?: string;
+        columnGap?: string;
+        rowGap?: string;
+        stackOnMobile?: boolean;
+        stackOnTablet?: boolean;
+        reverseOnMobile?: boolean;
+        mobileBreakpoint?: string;
+        tabletBreakpoint?: string;
+        customCSS?: string;
+        className?: string;
+        containerClass?: string;
+        columnsWrapperClass?: string;
+    };
+}
+export declare const FlexibleLayoutComponent: React.FC<FlexibleLayoutProps>;
+export {};

package/dist/components/landing/FlexibleLayoutComponent.js

@@ -0,0 +1,352 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+const FlexibleLayoutComponent = ({ props }) => {
+  const {
+    columnCount = 2,
+    columns = [],
+    columnRatio = "50-50",
+    containerMaxWidth = "1200px",
+    containerPadding = "0rem",
+    containerMarginTop = "0rem",
+    containerMarginBottom = "0rem",
+    containerBackgroundColor = "transparent",
+    containerBorderRadius = "0px",
+    columnGap = "2rem",
+    rowGap = "1rem",
+    stackOnMobile = true,
+    stackOnTablet = false,
+    reverseOnMobile = false,
+    mobileBreakpoint = "768px",
+    tabletBreakpoint = "1024px",
+    customCSS = "",
+    className = "",
+    containerClass = "",
+    columnsWrapperClass = ""
+  } = props;
+  let ratios = columnRatio.split("-").map((r) => `${r}%`);
+  if (ratios.length !== columnCount) {
+    const equalRatio = `${Math.floor(100 / columnCount)}%`;
+    ratios = Array(columnCount).fill(equalRatio);
+  }
+  const renderElement = (element) => {
+    const commonStyle = {
+      marginTop: element.marginTop || "0",
+      marginBottom: element.marginBottom || "0"
+    };
+    switch (element.type) {
+      case "heading": {
+        const level = element.headingLevel || "h2";
+        const headingProps = {
+          key: element.id,
+          className: element.customClass,
+          style: {
+            ...commonStyle,
+            color: element.headingColor,
+            fontSize: element.headingSize,
+            fontWeight: element.headingWeight,
+            textAlign: element.headingAlign
+          }
+        };
+        switch (level) {
+          case "h1":
+            return /* @__PURE__ */ jsx("h1", { ...headingProps, children: element.headingText });
+          case "h2":
+            return /* @__PURE__ */ jsx("h2", { ...headingProps, children: element.headingText });
+          case "h3":
+            return /* @__PURE__ */ jsx("h3", { ...headingProps, children: element.headingText });
+          case "h4":
+            return /* @__PURE__ */ jsx("h4", { ...headingProps, children: element.headingText });
+          case "h5":
+            return /* @__PURE__ */ jsx("h5", { ...headingProps, children: element.headingText });
+          case "h6":
+            return /* @__PURE__ */ jsx("h6", { ...headingProps, children: element.headingText });
+          default:
+            return /* @__PURE__ */ jsx("h2", { ...headingProps, children: element.headingText });
+        }
+      }
+      case "paragraph":
+        return /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: element.customClass,
+            style: {
+              ...commonStyle,
+              color: element.paragraphColor,
+              fontSize: element.paragraphSize,
+              textAlign: element.paragraphAlign,
+              lineHeight: element.paragraphLineHeight
+            },
+            children: element.paragraphText
+          },
+          element.id
+        );
+      case "image":
+        return /* @__PURE__ */ jsxs("div", { className: element.customClass, style: commonStyle, children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: element.imageUrl || "https://via.placeholder.com/400x300",
+              alt: element.imageAlt || "Image",
+              style: {
+                width: element.imageWidth || "100%",
+                height: element.imageHeight || "auto",
+                objectFit: element.imageObjectFit,
+                borderRadius: element.imageBorderRadius,
+                display: "block"
+              }
+            }
+          ),
+          element.imageCaption && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.875rem", color: "#6b7280", marginTop: "0.5rem", textAlign: "center" }, children: element.imageCaption })
+        ] }, element.id);
+      case "video": {
+        const getVideoEmbedUrl = (url, type) => {
+          if (type === "youtube") {
+            const videoId = url.includes("v=") ? url.split("v=")[1]?.split("&")[0] : url.split("/").pop();
+            return `https://www.youtube.com/embed/${videoId}`;
+          } else if (type === "vimeo") {
+            const videoId = url.split("/").pop();
+            return `https://player.vimeo.com/video/${videoId}`;
+          }
+          return url;
+        };
+        return /* @__PURE__ */ jsx("div", { className: element.customClass, style: commonStyle, children: element.videoType === "direct" ? /* @__PURE__ */ jsx(
+          "video",
+          {
+            src: element.videoUrl,
+            controls: element.videoControls,
+            autoPlay: element.videoAutoplay,
+            style: {
+              width: element.videoWidth || "100%",
+              height: element.videoHeight || "auto",
+              borderRadius: "8px"
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            src: getVideoEmbedUrl(element.videoUrl || "", element.videoType || "youtube"),
+            style: {
+              width: element.videoWidth || "100%",
+              height: element.videoHeight || "400px",
+              border: "none",
+              borderRadius: "8px"
+            },
+            allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+            allowFullScreen: true
+          }
+        ) }, element.id);
+      }
+      case "button":
+        return /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: element.buttonUrl || "#",
+            target: element.buttonTarget,
+            className: element.customClass,
+            style: {
+              ...commonStyle,
+              display: element.buttonFullWidth ? "block" : "inline-block",
+              padding: element.buttonSize === "small" ? "0.5rem 1rem" : element.buttonSize === "large" ? "1rem 2rem" : "0.75rem 1.5rem",
+              backgroundColor: element.buttonBgColor || "#3b82f6",
+              color: element.buttonTextColor || "#ffffff",
+              textDecoration: "none",
+              borderRadius: "6px",
+              fontWeight: "500",
+              textAlign: "center",
+              border: element.buttonStyle === "outline" ? "2px solid currentColor" : "none",
+              background: element.buttonStyle === "outline" || element.buttonStyle === "text" ? "transparent" : element.buttonBgColor
+            },
+            children: element.buttonText
+          },
+          element.id
+        );
+      case "list": {
+        const listProps = {
+          key: element.id,
+          className: element.customClass,
+          style: {
+            ...commonStyle,
+            listStyle: element.listStyle === "default" ? void 0 : "none",
+            paddingLeft: element.listStyle === "default" ? "1.5rem" : "0"
+          }
+        };
+        const items = (element.listItems || []).map((item, idx) => /* @__PURE__ */ jsx("li", { style: { marginBottom: "0.5rem" }, children: item }, idx));
+        return element.listType === "ordered" ? /* @__PURE__ */ jsx("ol", { ...listProps, children: items }) : /* @__PURE__ */ jsx("ul", { ...listProps, children: items });
+      }
+      case "quote":
+        return /* @__PURE__ */ jsxs(
+          "blockquote",
+          {
+            className: element.customClass,
+            style: {
+              ...commonStyle,
+              borderLeft: `4px solid ${element.quoteBorderColor || "#3b82f6"}`,
+              paddingLeft: "1.5rem",
+              fontStyle: "italic",
+              color: "#374151"
+            },
+            children: [
+              /* @__PURE__ */ jsx("p", { style: { marginBottom: "0.5rem" }, children: element.quoteText }),
+              element.quoteAuthor && /* @__PURE__ */ jsxs("footer", { style: { fontSize: "0.875rem", color: "#6b7280" }, children: [
+                "— ",
+                element.quoteAuthor
+              ] })
+            ]
+          },
+          element.id
+        );
+      case "divider":
+        return /* @__PURE__ */ jsx(
+          "hr",
+          {
+            className: element.customClass,
+            style: {
+              ...commonStyle,
+              border: "none",
+              borderTop: `${element.dividerHeight || "1px"} ${element.dividerStyle || "solid"} ${element.dividerColor || "#e5e7eb"}`,
+              width: element.dividerWidth || "100%"
+            }
+          },
+          element.id
+        );
+      case "spacer":
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: element.customClass,
+            style: {
+              height: element.spacerHeight || "2rem"
+            }
+          },
+          element.id
+        );
+      case "code":
+        return /* @__PURE__ */ jsx(
+          "pre",
+          {
+            className: element.customClass,
+            style: {
+              ...commonStyle,
+              backgroundColor: element.codeTheme === "light" ? "#f3f4f6" : "#1e293b",
+              color: element.codeTheme === "light" ? "#1f2937" : "#e2e8f0",
+              padding: "1rem",
+              borderRadius: "6px",
+              overflow: "auto",
+              fontSize: "0.875rem",
+              fontFamily: "monospace"
+            },
+            children: /* @__PURE__ */ jsx("code", { children: element.codeContent })
+          },
+          element.id
+        );
+      case "badge":
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: element.customClass,
+            style: {
+              ...commonStyle,
+              display: "inline-block",
+              padding: "0.25rem 0.75rem",
+              backgroundColor: element.badgeBgColor || "#3b82f6",
+              color: element.badgeColor || "#ffffff",
+              borderRadius: "9999px",
+              fontSize: "0.875rem",
+              fontWeight: "500"
+            },
+            children: element.badgeText
+          },
+          element.id
+        );
+      case "alert": {
+        const alertColors = {
+          info: { bg: "#dbeafe", border: "#3b82f6", text: "#1e40af" },
+          success: { bg: "#d1fae5", border: "#10b981", text: "#065f46" },
+          warning: { bg: "#fef3c7", border: "#f59e0b", text: "#92400e" },
+          error: { bg: "#fee2e2", border: "#ef4444", text: "#991b1b" }
+        };
+        const alertStyle = alertColors[element.alertType || "info"];
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: element.customClass,
+            style: {
+              ...commonStyle,
+              backgroundColor: alertStyle.bg,
+              borderLeft: `4px solid ${alertStyle.border}`,
+              color: alertStyle.text,
+              padding: "1rem",
+              borderRadius: "6px"
+            },
+            children: element.alertText
+          },
+          element.id
+        );
+      }
+      default:
+        return null;
+    }
+  };
+  const responsiveCSS = `
+    @media (max-width: ${mobileBreakpoint}) {
+      .flexible-layout-container-${columnCount} {
+        ${stackOnMobile ? "flex-direction: column !important;" : ""}
+        ${reverseOnMobile ? "flex-direction: column-reverse !important;" : ""}
+      }
+      .flexible-layout-column-${columnCount} {
+        ${stackOnMobile ? "width: 100% !important; flex: none !important;" : ""}
+      }
+    }
+    @media (max-width: ${tabletBreakpoint}) and (min-width: ${mobileBreakpoint}) {
+      .flexible-layout-container-${columnCount} {
+        ${stackOnTablet ? "flex-direction: column !important;" : ""}
+      }
+      .flexible-layout-column-${columnCount} {
+        ${stackOnTablet ? "width: 100% !important; flex: none !important;" : ""}
+      }
+    }
+  `;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flexible-layout w-full mx-auto overflow-hidden ${containerClass} ${className || ""}`,
+      children: [
+        customCSS && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: customCSS } }),
+        /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: responsiveCSS } }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `flexible-layout-container-${columnCount} flex w-full ${columnsWrapperClass}`,
+            style: {
+              gap: columnGap,
+              alignItems: "stretch"
+            },
+            children: columns.slice(0, columnCount).map((column, index) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `flexible-layout-column-${columnCount}`,
+                style: {
+                  flex: `0 0 ${ratios[index] || "auto"}`,
+                  minWidth: 0,
+                  maxWidth: ratios[index] || "auto",
+                  backgroundColor: column.backgroundColor,
+                  padding: column.padding,
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: column.alignment === "center" ? "center" : column.alignment === "bottom" ? "flex-end" : "flex-start",
+                  boxSizing: "border-box",
+                  overflow: "hidden"
+                },
+                children: /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: rowGap }, children: column.elements.map(renderElement) })
+              },
+              column.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  FlexibleLayoutComponent
+};
+//# sourceMappingURL=FlexibleLayoutComponent.js.map