@delmaredigital/payload-puck 0.2.0 → 0.3.0

package/dist/AccordionClient.mjs

@@ -1,784 +0,0 @@
-"use client";
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { ChevronDown } from 'lucide-react';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-
-// src/fields/shared.ts
-function cn(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-function isLegacyWidthValue(value) {
-  if (!value || typeof value !== "object") return false;
-  const v = value;
-  return typeof v.maxWidth === "number" && typeof v.unit === "string" && typeof v.mode === "string" && !("minWidth" in v) && !("minHeight" in v) && !("maxHeight" in v);
-}
-function hexToRgb(hex) {
-  const clean = hex.replace(/^#/, "");
-  if (clean.length !== 6) return null;
-  const r = parseInt(clean.substring(0, 2), 16);
-  const g = parseInt(clean.substring(2, 4), 16);
-  const b = parseInt(clean.substring(4, 6), 16);
-  if (isNaN(r) || isNaN(g) || isNaN(b)) return null;
-  return { r, g, b };
-}
-function colorValueToCSS(color) {
-  if (!color?.hex) return void 0;
-  const rgb = hexToRgb(color.hex);
-  if (!rgb) return color.hex;
-  const opacity = (color.opacity ?? 100) / 100;
-  if (opacity === 1) {
-    return color.hex;
-  }
-  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
-}
-function paddingValueToCSS(padding) {
-  if (!padding) return void 0;
-  const { top, right, bottom, left, unit } = padding;
-  if (top === right && right === bottom && bottom === left) {
-    return `${top}${unit}`;
-  }
-  if (top === bottom && left === right) {
-    return `${top}${unit} ${right}${unit}`;
-  }
-  if (left === right) {
-    return `${top}${unit} ${right}${unit} ${bottom}${unit}`;
-  }
-  return `${top}${unit} ${right}${unit} ${bottom}${unit} ${left}${unit}`;
-}
-function marginValueToCSS(margin) {
-  if (!margin) return void 0;
-  const { top, right, bottom, left, unit } = margin;
-  if (top === right && right === bottom && bottom === left) {
-    return `${top}${unit}`;
-  }
-  if (top === bottom && left === right) {
-    return `${top}${unit} ${right}${unit}`;
-  }
-  if (left === right) {
-    return `${top}${unit} ${right}${unit} ${bottom}${unit}`;
-  }
-  return `${top}${unit} ${right}${unit} ${bottom}${unit} ${left}${unit}`;
-}
-function widthValueToCSS(width) {
-  if (!width) return void 0;
-  const style = {};
-  if (width.mode === "full") {
-    style.width = "100%";
-    style.maxWidth = "100%";
-  } else {
-    style.maxWidth = `${width.maxWidth}${width.unit}`;
-    style.width = "100%";
-  }
-  switch (width.alignment) {
-    case "left":
-      style.marginLeft = "0";
-      style.marginRight = "auto";
-      break;
-    case "center":
-      style.marginLeft = "auto";
-      style.marginRight = "auto";
-      break;
-    case "right":
-      style.marginLeft = "auto";
-      style.marginRight = "0";
-      break;
-  }
-  return style;
-}
-function dimensionsValueToCSS(dimensions) {
-  if (!dimensions) return void 0;
-  if (isLegacyWidthValue(dimensions)) {
-    return widthValueToCSS(dimensions);
-  }
-  const dim = dimensions;
-  const style = {};
-  if (dim.mode === "full") {
-    style.width = "100%";
-    style.maxWidth = "100%";
-  } else {
-    style.width = "100%";
-    if (dim.maxWidth?.enabled !== false && dim.maxWidth?.value > 0) {
-      style.maxWidth = `${dim.maxWidth.value}${dim.maxWidth.unit}`;
-    }
-    if (dim.minWidth?.enabled && dim.minWidth.value > 0) {
-      style.minWidth = `${dim.minWidth.value}${dim.minWidth.unit}`;
-    }
-  }
-  if (dim.minHeight?.enabled && dim.minHeight.value > 0) {
-    style.minHeight = `${dim.minHeight.value}${dim.minHeight.unit}`;
-  }
-  if (dim.maxHeight?.enabled && dim.maxHeight.value > 0) {
-    style.maxHeight = `${dim.maxHeight.value}${dim.maxHeight.unit}`;
-  }
-  switch (dim.alignment) {
-    case "left":
-      style.marginLeft = "0";
-      style.marginRight = "auto";
-      break;
-    case "center":
-      style.marginLeft = "auto";
-      style.marginRight = "auto";
-      break;
-    case "right":
-      style.marginLeft = "auto";
-      style.marginRight = "0";
-      break;
-  }
-  return style;
-}
-function gradientValueToCSS(gradient) {
-  if (!gradient?.stops || gradient.stops.length === 0) {
-    return "transparent";
-  }
-  const sortedStops = [...gradient.stops].sort((a, b) => a.position - b.position);
-  const stopsCSS = sortedStops.map((stop) => {
-    const color = colorValueToCSS(stop.color) || "transparent";
-    return `${color} ${stop.position}%`;
-  }).join(", ");
-  if (gradient.type === "radial") {
-    const shape = gradient.radialShape || "circle";
-    const position = gradient.radialPosition || "center";
-    return `radial-gradient(${shape} at ${position}, ${stopsCSS})`;
-  }
-  return `linear-gradient(${gradient.angle}deg, ${stopsCSS})`;
-}
-function positionToCSS(position) {
-  const positionMap = {
-    center: "center",
-    top: "top",
-    bottom: "bottom",
-    left: "left",
-    right: "right",
-    "top-left": "top left",
-    "top-right": "top right",
-    "bottom-left": "bottom left",
-    "bottom-right": "bottom right"
-  };
-  return position ? positionMap[position] || "center" : "center";
-}
-function maskDirectionToCSS(direction) {
-  const directionMap = {
-    "to-top": "to top",
-    "to-bottom": "to bottom",
-    "to-left": "to left",
-    "to-right": "to right",
-    "to-top-left": "to top left",
-    "to-top-right": "to top right",
-    "to-bottom-left": "to bottom left",
-    "to-bottom-right": "to bottom right",
-    "from-center": "radial"
-    // Not used for linear, handled separately in maskToCSS
-  };
-  return directionMap[direction] || "to bottom";
-}
-function maskToCSS(mask) {
-  const startAlpha = (mask.startOpacity ?? 100) / 100;
-  const endAlpha = (mask.endOpacity ?? 0) / 100;
-  if (mask.direction === "from-center") {
-    return `radial-gradient(circle at center, rgba(0,0,0,${startAlpha}) ${mask.startPosition}%, rgba(0,0,0,${endAlpha}) ${mask.endPosition}%)`;
-  }
-  const direction = maskDirectionToCSS(mask.direction);
-  return `linear-gradient(${direction}, rgba(0,0,0,${startAlpha}) ${mask.startPosition}%, rgba(0,0,0,${endAlpha}) ${mask.endPosition}%)`;
-}
-function backgroundValueToCSS(bg) {
-  if (!bg || bg.type === "none") {
-    return {};
-  }
-  const style = {};
-  switch (bg.type) {
-    case "solid":
-      if (bg.solid?.hex) {
-        style.backgroundColor = colorValueToCSS(bg.solid);
-      }
-      break;
-    case "gradient":
-      if (bg.gradient && bg.gradient.stops && bg.gradient.stops.length > 0) {
-        style.background = gradientValueToCSS(bg.gradient);
-      }
-      break;
-    case "image":
-      if (bg.image?.media?.url) {
-        const imageUrl = bg.image.media.url;
-        const size = bg.image.size || "cover";
-        const position = positionToCSS(bg.image.position);
-        const repeat = bg.image.repeat || "no-repeat";
-        const attachment = bg.image.attachment || "scroll";
-        if (bg.overlay?.enabled) {
-          const overlayCSS = bg.overlay.type === "solid" ? colorValueToCSS(bg.overlay.solid) : gradientValueToCSS(bg.overlay.gradient);
-          if (bg.overlay.type === "solid" && overlayCSS) {
-            style.backgroundImage = `linear-gradient(${overlayCSS}, ${overlayCSS}), url(${imageUrl})`;
-          } else {
-            style.backgroundImage = `${overlayCSS}, url(${imageUrl})`;
-          }
-          style.backgroundSize = `auto, ${size}`;
-          style.backgroundPosition = `center, ${position}`;
-          style.backgroundRepeat = `no-repeat, ${repeat}`;
-          style.backgroundAttachment = `scroll, ${attachment}`;
-        } else {
-          style.backgroundImage = `url(${imageUrl})`;
-          style.backgroundSize = size;
-          style.backgroundPosition = position;
-          style.backgroundRepeat = repeat;
-          style.backgroundAttachment = attachment;
-        }
-        if (bg.image.mask?.enabled) {
-          const maskCSS = maskToCSS(bg.image.mask);
-          style.maskImage = maskCSS;
-          style.WebkitMaskImage = maskCSS;
-        }
-      }
-      break;
-  }
-  return style;
-}
-function transformOriginToCSS(origin) {
-  const originMap = {
-    center: "center",
-    top: "top",
-    bottom: "bottom",
-    left: "left",
-    right: "right",
-    "top-left": "top left",
-    "top-right": "top right",
-    "bottom-left": "bottom left",
-    "bottom-right": "bottom right"
-  };
-  return originMap[origin] || "center";
-}
-function transformValueToCSS(transform) {
-  if (!transform) return void 0;
-  const style = {};
-  const transforms = [];
-  if (transform.enable3D && transform.perspective) {
-    style.perspective = `${transform.perspective}px`;
-  }
-  if (transform.translateX !== 0 || transform.translateY !== 0) {
-    transforms.push(
-      `translate(${transform.translateX}${transform.translateUnit}, ${transform.translateY}${transform.translateUnit})`
-    );
-  }
-  if (transform.rotate !== 0) {
-    transforms.push(`rotate(${transform.rotate}deg)`);
-  }
-  if (transform.enable3D) {
-    if (transform.rotateX && transform.rotateX !== 0) {
-      transforms.push(`rotateX(${transform.rotateX}deg)`);
-    }
-    if (transform.rotateY && transform.rotateY !== 0) {
-      transforms.push(`rotateY(${transform.rotateY}deg)`);
-    }
-  }
-  if (transform.scaleX !== 1 || transform.scaleY !== 1) {
-    if (transform.scaleX === transform.scaleY) {
-      transforms.push(`scale(${transform.scaleX})`);
-    } else {
-      transforms.push(`scale(${transform.scaleX}, ${transform.scaleY})`);
-    }
-  }
-  if (transform.skewX !== 0 || transform.skewY !== 0) {
-    if (transform.skewX !== 0 && transform.skewY !== 0) {
-      transforms.push(`skew(${transform.skewX}deg, ${transform.skewY}deg)`);
-    } else if (transform.skewX !== 0) {
-      transforms.push(`skewX(${transform.skewX}deg)`);
-    } else {
-      transforms.push(`skewY(${transform.skewY}deg)`);
-    }
-  }
-  if (transforms.length > 0) {
-    style.transform = transforms.join(" ");
-  }
-  if (transform.origin !== "center") {
-    style.transformOrigin = transformOriginToCSS(transform.origin);
-  }
-  if (transform.enable3D) {
-    style.transformStyle = "preserve-3d";
-  }
-  return Object.keys(style).length > 0 ? style : void 0;
-}
-var EASING_CSS_MAP = {
-  linear: "linear",
-  ease: "ease",
-  "ease-in": "ease-in",
-  "ease-out": "ease-out",
-  "ease-in-out": "ease-in-out",
-  spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
-  "spring-gentle": "cubic-bezier(0.34, 1.56, 0.64, 1)",
-  bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
-  "bounce-in": "cubic-bezier(0.6, -0.28, 0.735, 0.045)",
-  "bounce-out": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
-  "back-in": "cubic-bezier(0.6, -0.28, 0.735, 0.045)",
-  "back-out": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
-  "back-in-out": "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
-  elastic: "cubic-bezier(0.68, -0.6, 0.32, 1.6)"
-};
-function animationOriginToCSS(origin) {
-  if (!origin) return "center";
-  const originMap = {
-    center: "center",
-    top: "top",
-    bottom: "bottom",
-    left: "left",
-    right: "right",
-    "top-left": "top left",
-    "top-right": "top right",
-    "bottom-left": "bottom left",
-    "bottom-right": "bottom right"
-  };
-  return originMap[origin] || "center";
-}
-function animationValueToCSS(anim) {
-  if (!anim || anim.mode !== "custom") return void 0;
-  const duration = anim.duration ?? 300;
-  const delay = anim.delay ?? 0;
-  const easing = anim.easing ?? "ease";
-  const easingCSS = EASING_CSS_MAP[easing] || "ease";
-  return {
-    transition: `all ${duration}ms ${easingCSS} ${delay}ms`,
-    transitionProperty: "opacity, transform, filter, background-color, color, border-color, box-shadow"
-  };
-}
-function getEntranceAnimationStyles(anim) {
-  const defaultResult = {
-    initial: {},
-    animate: {},
-    duration: 500,
-    delay: 0,
-    easing: "ease",
-    origin: "center"
-  };
-  if (!anim || anim.mode !== "preset" || anim.entrance === "none") {
-    return defaultResult;
-  }
-  const duration = anim.entranceDuration ?? 500;
-  const delay = anim.entranceDelay ?? 0;
-  const easing = EASING_CSS_MAP[anim.easing ?? "ease"] || "ease";
-  const origin = animationOriginToCSS(anim.origin);
-  const distance = anim.distance ?? 24;
-  const scaleFrom = anim.scaleFrom ?? 0.9;
-  const rotateAngle = anim.rotateAngle ?? 15;
-  const blurAmount = anim.blurAmount ?? 8;
-  const entrance = anim.entrance ?? "none";
-  let initial = {};
-  let animate = {};
-  switch (entrance) {
-    // ==================== FADE (6) ====================
-    case "fade-in":
-      initial = { opacity: 0 };
-      animate = { opacity: 1 };
-      break;
-    case "fade-up":
-      initial = { opacity: 0, transform: `translateY(${distance}px)` };
-      animate = { opacity: 1, transform: "translateY(0)" };
-      break;
-    case "fade-down":
-      initial = { opacity: 0, transform: `translateY(-${distance}px)` };
-      animate = { opacity: 1, transform: "translateY(0)" };
-      break;
-    case "fade-left":
-      initial = { opacity: 0, transform: `translateX(${distance}px)` };
-      animate = { opacity: 1, transform: "translateX(0)" };
-      break;
-    case "fade-right":
-      initial = { opacity: 0, transform: `translateX(-${distance}px)` };
-      animate = { opacity: 1, transform: "translateX(0)" };
-      break;
-    case "fade-scale":
-      initial = { opacity: 0, transform: `scale(${scaleFrom})` };
-      animate = { opacity: 1, transform: "scale(1)" };
-      break;
-    // ==================== SCALE (4) ====================
-    case "scale-in":
-      initial = { opacity: 0, transform: `scale(${scaleFrom})` };
-      animate = { opacity: 1, transform: "scale(1)" };
-      break;
-    case "scale-up":
-      initial = { opacity: 0, transform: `scale(${scaleFrom}) translateY(${distance}px)` };
-      animate = { opacity: 1, transform: "scale(1) translateY(0)" };
-      break;
-    case "scale-down":
-      initial = { opacity: 0, transform: `scale(${scaleFrom}) translateY(-${distance}px)` };
-      animate = { opacity: 1, transform: "scale(1) translateY(0)" };
-      break;
-    case "scale-out":
-      initial = { opacity: 0, transform: `scale(${2 - scaleFrom})` };
-      animate = { opacity: 1, transform: "scale(1)" };
-      break;
-    // ==================== SLIDE (4) ====================
-    case "slide-up":
-      initial = { transform: `translateY(${distance}px)` };
-      animate = { transform: "translateY(0)" };
-      break;
-    case "slide-down":
-      initial = { transform: `translateY(-${distance}px)` };
-      animate = { transform: "translateY(0)" };
-      break;
-    case "slide-left":
-      initial = { transform: `translateX(${distance}px)` };
-      animate = { transform: "translateX(0)" };
-      break;
-    case "slide-right":
-      initial = { transform: `translateX(-${distance}px)` };
-      animate = { transform: "translateX(0)" };
-      break;
-    // ==================== BLUR (3) ====================
-    case "blur-in":
-      initial = { opacity: 0, filter: `blur(${blurAmount}px)` };
-      animate = { opacity: 1, filter: "blur(0)" };
-      break;
-    case "blur-up":
-      initial = { opacity: 0, filter: `blur(${blurAmount}px)`, transform: `translateY(${distance}px)` };
-      animate = { opacity: 1, filter: "blur(0)", transform: "translateY(0)" };
-      break;
-    case "blur-down":
-      initial = { opacity: 0, filter: `blur(${blurAmount}px)`, transform: `translateY(-${distance}px)` };
-      animate = { opacity: 1, filter: "blur(0)", transform: "translateY(0)" };
-      break;
-    // ==================== ROTATE (3) ====================
-    case "rotate-in":
-      initial = { opacity: 0, transform: `rotate(${rotateAngle}deg) scale(${scaleFrom})` };
-      animate = { opacity: 1, transform: "rotate(0) scale(1)" };
-      break;
-    case "rotate-up":
-      initial = { opacity: 0, transform: `rotate(${rotateAngle}deg) translateY(${distance}px)` };
-      animate = { opacity: 1, transform: "rotate(0) translateY(0)" };
-      break;
-    case "rotate-down":
-      initial = { opacity: 0, transform: `rotate(-${rotateAngle}deg) translateY(-${distance}px)` };
-      animate = { opacity: 1, transform: "rotate(0) translateY(0)" };
-      break;
-    // ==================== BOUNCE (3) ====================
-    // These use spring/bounce easing by default for the effect
-    case "bounce-in":
-      initial = { opacity: 0, transform: `scale(${scaleFrom * 0.8})` };
-      animate = { opacity: 1, transform: "scale(1)" };
-      break;
-    case "bounce-up":
-      initial = { opacity: 0, transform: `translateY(${distance * 1.5}px)` };
-      animate = { opacity: 1, transform: "translateY(0)" };
-      break;
-    case "bounce-down":
-      initial = { opacity: 0, transform: `translateY(-${distance * 1.5}px)` };
-      animate = { opacity: 1, transform: "translateY(0)" };
-      break;
-    // ==================== FLIP (2) ====================
-    // Flip uses perspective in transform for proper 3D effect
-    // Starts from -90deg (tilted back) so the flip motion is visible
-    case "flip-x":
-      initial = {
-        transform: "perspective(1000px) rotateX(-90deg)",
-        opacity: 0.2,
-        backfaceVisibility: "hidden"
-      };
-      animate = {
-        transform: "perspective(1000px) rotateX(0deg)",
-        opacity: 1,
-        backfaceVisibility: "hidden"
-      };
-      break;
-    case "flip-y":
-      initial = {
-        transform: "perspective(1000px) rotateY(-90deg)",
-        opacity: 0.2,
-        backfaceVisibility: "hidden"
-      };
-      animate = {
-        transform: "perspective(1000px) rotateY(0deg)",
-        opacity: 1,
-        backfaceVisibility: "hidden"
-      };
-      break;
-    // ==================== ZOOM (2) ====================
-    case "zoom-in":
-      initial = { opacity: 0, transform: `scale(${scaleFrom * 0.5})` };
-      animate = { opacity: 1, transform: "scale(1)" };
-      break;
-    case "zoom-out":
-      initial = { opacity: 0, transform: `scale(${2.5 - scaleFrom})` };
-      animate = { opacity: 1, transform: "scale(1)" };
-      break;
-  }
-  return {
-    initial,
-    animate,
-    duration,
-    delay,
-    easing,
-    origin
-  };
-}
-function useScrollAnimation(options = {}) {
-  const {
-    triggerOnScroll = true,
-    threshold = 0.1,
-    once = true,
-    rootMargin = "0px",
-    delay = 0
-  } = options;
-  const ref = useRef(null);
-  const [isInView, setIsInView] = useState(false);
-  const [hasAnimated, setHasAnimated] = useState(false);
-  const timeoutRef = useRef(null);
-  const hasMountedRef = useRef(false);
-  const reset = useCallback(() => {
-    setIsInView(false);
-    setHasAnimated(false);
-    hasMountedRef.current = false;
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-  }, []);
-  useEffect(() => {
-    if (!triggerOnScroll) {
-      if (hasMountedRef.current) return;
-      hasMountedRef.current = true;
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          if (delay > 0) {
-            timeoutRef.current = setTimeout(() => {
-              setIsInView(true);
-              setHasAnimated(true);
-            }, delay);
-          } else {
-            setIsInView(true);
-            setHasAnimated(true);
-          }
-        });
-      });
-      return;
-    }
-    if (once && hasAnimated) {
-      return;
-    }
-    const element = ref.current;
-    if (!element) return;
-    if (typeof IntersectionObserver === "undefined") {
-      setIsInView(true);
-      setHasAnimated(true);
-      return;
-    }
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const [entry] = entries;
-        const inView = entry.isIntersecting;
-        if (inView) {
-          if (delay > 0) {
-            timeoutRef.current = setTimeout(() => {
-              setIsInView(true);
-              setHasAnimated(true);
-            }, delay);
-          } else {
-            setIsInView(true);
-            setHasAnimated(true);
-          }
-          if (once) {
-            observer.disconnect();
-          }
-        } else if (!once) {
-          if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = null;
-          }
-          setIsInView(false);
-        }
-      },
-      {
-        threshold,
-        rootMargin
-      }
-    );
-    observer.observe(element);
-    return () => {
-      observer.disconnect();
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
-      }
-    };
-  }, [triggerOnScroll, threshold, once, rootMargin, delay, hasAnimated]);
-  return {
-    ref,
-    isInView,
-    hasAnimated,
-    reset
-  };
-}
-function AnimatedWrapper({
-  animation,
-  children,
-  className,
-  style,
-  as: Component = "div"
-}) {
-  const hasAnimation = animation && (animation.mode === "preset" && animation.entrance && animation.entrance !== "none" || animation.mode === "custom");
-  if (!hasAnimation) {
-    if (className || style) {
-      return /* @__PURE__ */ jsx(Component, { className, style, children });
-    }
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  const { ref, isInView } = useScrollAnimation({
-    triggerOnScroll: animation.triggerOnScroll ?? true,
-    threshold: animation.triggerThreshold ?? 0.1,
-    once: animation.triggerOnce ?? true,
-    rootMargin: animation.triggerMargin
-  });
-  if (animation.mode === "preset") {
-    const { initial, animate, duration, delay, easing, origin } = getEntranceAnimationStyles(animation);
-    const animationStyles = isInView ? animate : initial;
-    const transitionProperties = [
-      `opacity ${duration}ms ${easing} ${delay}ms`,
-      `transform ${duration}ms ${easing} ${delay}ms`,
-      `filter ${duration}ms ${easing} ${delay}ms`
-    ].join(", ");
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        ref,
-        className,
-        style: {
-          ...style,
-          ...animationStyles,
-          transition: transitionProperties,
-          transformOrigin: origin
-        },
-        children
-      }
-    );
-  }
-  const customStyles = animationValueToCSS(animation);
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      ref,
-      className,
-      style: {
-        ...style,
-        ...customStyles,
-        // Apply opacity for visibility-based transitions
-        opacity: isInView ? 1 : 0
-      },
-      children
-    }
-  );
-}
-function AccordionItem({
-  item,
-  isOpen,
-  onToggle,
-  textColorCSS
-}) {
-  const textStyle = textColorCSS ? { color: textColorCSS } : {};
-  return /* @__PURE__ */ jsxs("div", { className: "border-b border-border last:border-b-0", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: onToggle,
-        className: "flex w-full items-center justify-between py-4 px-4 text-left font-medium transition-all hover:bg-muted/50 text-foreground",
-        style: textStyle,
-        children: [
-          /* @__PURE__ */ jsx("span", { children: item.title }),
-          /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              className: cn(
-                "h-4 w-4 shrink-0 transition-transform duration-200",
-                isOpen && "rotate-180"
-              )
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "overflow-hidden transition-all duration-200",
-          isOpen ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
-        ),
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "px-4 pb-4 text-muted-foreground",
-            style: textColorCSS ? { color: textColorCSS } : void 0,
-            children: item.content
-          }
-        )
-      }
-    )
-  ] });
-}
-function AccordionClient({
-  items,
-  allowMultiple,
-  textColor,
-  margin,
-  background,
-  dimensions,
-  transform,
-  animation,
-  customPadding
-}) {
-  const [openItems, setOpenItems] = useState(() => {
-    const initialOpen = /* @__PURE__ */ new Set();
-    items?.forEach((item, index) => {
-      if (item.defaultOpen) {
-        initialOpen.add(index);
-      }
-    });
-    return initialOpen;
-  });
-  const handleToggle = (index) => {
-    setOpenItems((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(index)) {
-        newSet.delete(index);
-      } else {
-        if (!allowMultiple) {
-          newSet.clear();
-        }
-        newSet.add(index);
-      }
-      return newSet;
-    });
-  };
-  const textColorCSS = colorValueToCSS(textColor);
-  const dimensionsStyles = dimensionsValueToCSS(dimensions);
-  const accordionClasses = "rounded-lg border border-border overflow-hidden bg-card";
-  const backgroundStyles = backgroundValueToCSS(background);
-  const accordionStyle = backgroundStyles && Object.keys(backgroundStyles).length > 0 ? backgroundStyles : {};
-  const style = {
-    ...dimensionsStyles
-  };
-  const marginCSS = marginValueToCSS(margin);
-  if (marginCSS) {
-    style.margin = marginCSS;
-  }
-  const paddingCSS = paddingValueToCSS(customPadding);
-  if (paddingCSS) {
-    style.padding = paddingCSS;
-  }
-  const transformStyles = transformValueToCSS(transform);
-  if (transformStyles) {
-    Object.assign(style, transformStyles);
-  }
-  if (!items || items.length === 0) {
-    return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: accordionClasses, style: accordionStyle, children: /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted-foreground", children: "No accordion items. Add items in the editor." }) }) }) });
-  }
-  return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: accordionClasses, style: accordionStyle, children: items.map((item, index) => /* @__PURE__ */ jsx(
-    AccordionItem,
-    {
-      item,
-      isOpen: openItems.has(index),
-      onToggle: () => handleToggle(index),
-      textColorCSS
-    },
-    index
-  )) }) }) });
-}
-
-export { AccordionClient };
-//# sourceMappingURL=AccordionClient.mjs.map
-//# sourceMappingURL=AccordionClient.mjs.map