dune-react 0.0.4 → 0.0.5

package/README.md

@@ -1,49 +1,50 @@
 # dune-react
 
-前端业务组件库项目
+A frontend UI component library built with React, Vite, and Storybook.
 
-框架：react + vite + storybook
 
-[story 文档 ](https://storybook.js.org/docs/react/addons/addons-api#addonssetconfigconfig)
+## Getting Started
 
-### 开发
+### Development
 
-```
- yarn storybook
+```bash
+yarn storybook
 ```
 
-### 打包
+### Build
 
-```
- yarn build
+```bash
+yarn build
 ```
 
-### 发布 npm
+### Publish to npm
 
-```
-  npm publish
+```bash
+npm publish
 ```
 
-### 使用组件库
+## Usage
 
+```bash
+npm install dune-react
 ```
-  npm install dune-react
 
-  // 在入口文件如_app.js中引入style
-  import 'dune-react/dist/style.css'
+```js
+// Import styles in your entry file (e.g. _app.js)
+import 'dune-react/dist/style.css'
 
-  // 在目标页面中
-  import {xxx} from dune-react
+// Import components where needed
+import { xxx } from 'dune-react'
 ```
 
-### 发布到 github 静态页
+## Deploy Storybook to GitHub Pages
 
-使用[@storybook/storybook-deployer 文档](https://github.com/storybook-eol/storybook-deployer)发布到 github
+Uses [@storybook/storybook-deployer](https://github.com/storybook-eol/storybook-deployer).
 
-```
-    yarn build-storybook
+```bash
+yarn build-storybook
 
-    // 在storybook-static 文件夹中添加.nojekyll文件
+# Add a .nojekyll file inside the storybook-static folder
 
-    yarn deploy-storybook -- --existing-output-dir=storybook-static
+yarn deploy-storybook -- --existing-output-dir=storybook-static
 ```

package/dist/components/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./shadcn/index.ts";
 export * from "./ui-block/index.ts";
+export * from "./puck-base/index.ts";
+export * from "./puck-block/index.ts";

package/dist/components/puck-base/action-field.d.ts

@@ -0,0 +1,8 @@
+import { Action } from "./core/types";
+interface ActionFieldProps {
+    name: string;
+    value: Action | undefined;
+    onChange: (value: Action) => void;
+}
+export declare function ActionField({ name, value, onChange }: ActionFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/puck-base/action-field.js

@@ -0,0 +1,169 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Input } from "../shadcn/input.js";
+import { Label } from "../shadcn/label.js";
+import { Tabs, TabsList, TabsTrigger } from "../shadcn/tabs.js";
+const ACTION_TYPE_OPTIONS = [
+  { label: "Page Link", value: "page" },
+  { label: "External Link", value: "external" },
+  { label: "Email", value: "email" },
+  { label: "Phone", value: "phone" },
+  { label: "Page Section", value: "section" },
+  { label: "Download", value: "download" },
+  { label: "None", value: "none" }
+];
+function ActionField({ name, value, onChange }) {
+  const current = value ?? { type: "none" };
+  const update = (patch) => {
+    onChange({ ...current, ...patch });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { children: "Action Type" }),
+      /* @__PURE__ */ jsx(
+        Tabs,
+        {
+          value: current.type,
+          onValueChange: (val) => update({ type: val }),
+          children: /* @__PURE__ */ jsx(TabsList, { className: "h-auto w-full flex-wrap justify-start gap-1 p-1 group-data-[orientation=horizontal]/tabs:h-auto", children: ACTION_TYPE_OPTIONS.map((opt) => /* @__PURE__ */ jsx(
+            TabsTrigger,
+            {
+              value: opt.value,
+              className: "h-7 flex-none text-xs",
+              children: opt.label
+            },
+            opt.value
+          )) })
+        }
+      )
+    ] }),
+    current.type === "page" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { children: "Page URL" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          name: `${name}.pageUrl`,
+          className: "h-8 text-sm",
+          value: current.pageUrl ?? "",
+          onChange: (e) => update({ pageUrl: e.target.value }),
+          placeholder: "/about"
+        }
+      )
+    ] }),
+    current.type === "external" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { children: "External URL" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            name: `${name}.externalUrl`,
+            className: "h-8 text-sm",
+            value: current.externalUrl ?? "",
+            onChange: (e) => update({ externalUrl: e.target.value }),
+            placeholder: "https://example.com"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("fieldset", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { children: "Open in new tab" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-sm", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                name: `${name}.openInNewTab`,
+                value: "true",
+                checked: current.openInNewTab === "true",
+                onChange: () => update({ openInNewTab: "true" })
+              }
+            ),
+            "Yes"
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-sm", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                name: `${name}.openInNewTab`,
+                value: "false",
+                checked: current.openInNewTab !== "true",
+                onChange: () => update({ openInNewTab: "false" })
+              }
+            ),
+            "No"
+          ] })
+        ] })
+      ] })
+    ] }),
+    current.type === "email" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { children: "Email" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            name: `${name}.email`,
+            className: "h-8 text-sm",
+            value: current.email ?? "",
+            onChange: (e) => update({ email: e.target.value }),
+            placeholder: "hello@example.com"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { children: "Subject" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            name: `${name}.subject`,
+            className: "h-8 text-sm",
+            value: current.subject ?? "",
+            onChange: (e) => update({ subject: e.target.value }),
+            placeholder: "Optional email subject"
+          }
+        )
+      ] })
+    ] }),
+    current.type === "phone" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { children: "Phone" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          name: `${name}.phone`,
+          className: "h-8 text-sm",
+          value: current.phone ?? "",
+          onChange: (e) => update({ phone: e.target.value }),
+          placeholder: "+1 234 567 890"
+        }
+      )
+    ] }),
+    current.type === "section" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { children: "Section ID" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          name: `${name}.sectionId`,
+          className: "h-8 text-sm",
+          value: current.sectionId ?? "",
+          onChange: (e) => update({ sectionId: e.target.value }),
+          placeholder: "#section-id"
+        }
+      )
+    ] }),
+    current.type === "download" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { children: "Download URL" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          name: `${name}.downloadUrl`,
+          className: "h-8 text-sm",
+          value: current.downloadUrl ?? "",
+          onChange: (e) => update({ downloadUrl: e.target.value }),
+          placeholder: "https://example.com/file.pdf"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ActionField
+};

package/dist/components/puck-base/article-card.d.ts

@@ -0,0 +1,10 @@
+import { CompoundButtonProps } from "./button";
+import { CompoundImageProps } from "./image";
+export interface CompoundArticleCardProps {
+    image?: CompoundImageProps;
+    heading?: string;
+    description?: string;
+    button?: CompoundButtonProps;
+    className?: string;
+}
+export declare const CompoundArticleCard: ({ image, heading, description, button, className, }: CompoundArticleCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-base/article-card.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/css-utils.js";
+import { CompoundButton } from "./button.js";
+import { CompoundImage } from "./image.js";
+const CompoundArticleCard = ({
+  image,
+  heading,
+  description,
+  button,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "bg-muted rounded-md aspect-video mb-2 overflow-hidden", children: (image == null ? void 0 : image.src) ? /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt }) : null }),
+    !!heading || !!description || !!button ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      heading ? /* @__PURE__ */ jsx("h3", { className: "text-xl tracking-tight", children: heading }) : null,
+      description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-xs text-base", children: description }) : null,
+      (button == null ? void 0 : button.label) ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        CompoundButton,
+        {
+          label: button.label,
+          url: button.url,
+          variant: button.variant,
+          size: button.size,
+          icon: button.icon
+        }
+      ) }) : null
+    ] }) : null
+  ] });
+};
+export {
+  CompoundArticleCard
+};

package/dist/components/puck-base/badge.d.ts

@@ -0,0 +1,10 @@
+import { Badge, badgeVariants } from "@/components/shadcn/badge";
+import type { VariantProps } from "class-variance-authority";
+type BadgeProps = React.ComponentProps<typeof Badge> & VariantProps<typeof badgeVariants>;
+export interface CompoundBadgeProps {
+    label: string;
+    url?: string;
+    variant?: BadgeProps["variant"];
+}
+export declare const CompoundBadge: (props: CompoundBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/puck-base/badge.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { badgeVariants, Badge } from "../shadcn/badge.js";
+import { cn } from "../../utils/css-utils.js";
+import { MoveRightIcon } from "lucide-react";
+const CompoundBadge = (props) => {
+  if (props.url) {
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: props.url,
+        className: cn(badgeVariants({ variant: props.variant }), "gap-4"),
+        children: [
+          props.label,
+          /* @__PURE__ */ jsx(MoveRightIcon, { className: "w-4 h-4" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Badge, { variant: props.variant, className: "gap-4", children: props.label });
+};
+export {
+  CompoundBadge
+};

package/dist/components/puck-base/button.d.ts

@@ -0,0 +1,13 @@
+import { type ButtonProps } from "@/components/shadcn/button";
+import { Action, IconName } from "./core/types";
+export interface CompoundButtonProps {
+    label: string;
+    url?: string;
+    action?: Action;
+    variant?: ButtonProps["variant"];
+    size?: ButtonProps["size"];
+    icon?: IconName;
+    type?: "button" | "submit" | "reset";
+    className?: string;
+}
+export declare const CompoundButton: (props: CompoundButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-base/button.js

@@ -0,0 +1,113 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Button, buttonVariants } from "../shadcn/button.js";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "../shadcn/dialog.js";
+import { AutoField } from "./fields/auto-field.js";
+import { button } from "./core/fields.js";
+import { cn } from "../../utils/css-utils.js";
+import { resolveActionUrl } from "./core/types.js";
+import { withEditable } from "./core/with-editable.js";
+import DynamicIcon from "../../node_modules/.pnpm/lucide-react@0.540.0_react@19.2.4/node_modules/lucide-react/dist/esm/DynamicIcon.js";
+const BUTTON_FIELDS = button.objectFields;
+function ButtonEditDialog({
+  open,
+  onOpenChange,
+  buttonData,
+  onSave
+}) {
+  const [draft, setDraft] = useState({ ...buttonData });
+  const handleFieldChange = useCallback((fieldName, value) => {
+    setDraft((prev) => ({ ...prev, [fieldName]: value }));
+  }, []);
+  const handleSave = useCallback(() => {
+    onSave(draft);
+    onOpenChange(false);
+  }, [draft, onSave, onOpenChange]);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "flex max-h-[80vh] max-w-lg flex-col gap-0 p-0", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { className: "px-6 py-4", children: /* @__PURE__ */ jsx(DialogTitle, { children: "编辑按钮" }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-6 pb-4", children: Object.entries(BUTTON_FIELDS).map(([fieldName, field]) => /* @__PURE__ */ jsx(
+      AutoField,
+      {
+        field,
+        name: fieldName,
+        value: draft[fieldName],
+        onChange: (val) => handleFieldChange(fieldName, val)
+      },
+      fieldName
+    )) }),
+    /* @__PURE__ */ jsxs(DialogFooter, { className: "border-t px-6 py-4", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: "取消" }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleSave, children: "确定" })
+    ] })
+  ] }) });
+}
+function CompoundButtonBase(props) {
+  var _a, _b, _c;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    props.size !== "icon" && props.label,
+    props.icon && props.icon !== "none" ? /* @__PURE__ */ jsx(DynamicIcon, { name: props.icon, className: "h-4 w-4" }) : null
+  ] });
+  const href = props.action ? resolveActionUrl(props.action) : props.url;
+  const isNewTab = ((_a = props.action) == null ? void 0 : _a.type) === "external" && ((_b = props.action) == null ? void 0 : _b.openInNewTab) === "true";
+  const isDownload = ((_c = props.action) == null ? void 0 : _c.type) === "download";
+  return href ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      target: isNewTab ? "_blank" : void 0,
+      rel: isNewTab ? "noopener noreferrer" : void 0,
+      download: isDownload || void 0,
+      className: cn(
+        buttonVariants({ variant: props.variant, size: props.size }),
+        "gap-4",
+        props.className
+      ),
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: props.variant,
+      size: props.size,
+      className: cn("gap-4", props.className),
+      type: props.type ?? "button",
+      children: content
+    }
+  );
+}
+const EditableButton = withEditable(CompoundButtonBase, {
+  type: "button",
+  fields: button.objectFields
+});
+const CompoundButton = (props) => {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [dialogData, setDialogData] = useState(
+    null
+  );
+  const [onSaveCallback, setOnSaveCallback] = useState(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      EditableButton,
+      {
+        ...props,
+        onEdit: (currentProps, onSave) => {
+          setDialogData(currentProps);
+          setOnSaveCallback(() => onSave);
+          setDialogOpen(true);
+        }
+      }
+    ),
+    dialogOpen && dialogData && onSaveCallback && /* @__PURE__ */ jsx(
+      ButtonEditDialog,
+      {
+        open: dialogOpen,
+        onOpenChange: setDialogOpen,
+        buttonData: dialogData,
+        onSave: onSaveCallback
+      }
+    )
+  ] });
+};
+export {
+  CompoundButton
+};

package/dist/components/puck-base/card.d.ts

@@ -0,0 +1,13 @@
+import { IconName } from "./core/types";
+import { CompoundButtonProps } from "./button";
+import { CompoundImageProps } from "./image";
+export interface CompoundCardProps {
+    image?: CompoundImageProps;
+    icon?: IconName;
+    heading?: string;
+    description?: string;
+    button?: CompoundButtonProps;
+    cardStyle?: "default" | "light";
+    className?: string;
+}
+export declare const CompoundCard: ({ image, icon, heading, description, button, cardStyle, className, }: CompoundCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-base/card.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/css-utils.js";
+import { CompoundButton } from "./button.js";
+import { CompoundImage } from "./image.js";
+import DynamicIcon from "../../node_modules/.pnpm/lucide-react@0.540.0_react@19.2.4/node_modules/lucide-react/dist/esm/DynamicIcon.js";
+const CompoundCard = ({
+  image,
+  icon,
+  heading,
+  description,
+  button,
+  cardStyle,
+  className
+}) => {
+  const hasIcon = icon && icon !== "none";
+  const hasImage = image == null ? void 0 : image.src;
+  const isLight = cardStyle === "light";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col rounded-md",
+        isLight ? "bg-white text-gray-900" : "bg-muted",
+        {
+          "p-0": hasImage,
+          "p-6": !hasImage,
+          "justify-between": hasIcon && !hasImage,
+          "justify-end": !hasIcon && !hasImage
+        },
+        className
+      ),
+      children: [
+        hasImage ? /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-t-md", children: /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "h-full" }) }) : null,
+        hasIcon && !hasImage ? /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: icon,
+            className: cn("h-4 w-4", isLight && "text-gray-900")
+          }
+        ) : null,
+        !!heading || !!description || !!button ? /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", hasImage ? "p-4" : ""), children: [
+          heading ? /* @__PURE__ */ jsx("h3", { className: "text-xl tracking-tight", children: heading }) : null,
+          description ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "max-w-xs text-base",
+                isLight ? "text-gray-600" : "text-muted-foreground"
+              ),
+              children: description
+            }
+          ) : null,
+          (button == null ? void 0 : button.label) ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            CompoundButton,
+            {
+              label: button.label,
+              url: button.url,
+              action: button.action,
+              variant: button.variant,
+              size: button.size,
+              icon: button.icon
+            }
+          ) }) : null
+        ] }) : null
+      ]
+    }
+  );
+};
+export {
+  CompoundCard
+};

package/dist/components/puck-base/container.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+type PaddingLevel = "none" | "small" | "medium" | "large";
+export type SectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+export type OverlayStyle = "none" | "gradient-top" | "gradient-bottom" | "noise";
+export interface CompoundContainerProps {
+    children: ReactNode;
+    padding?: {
+        top?: PaddingLevel;
+        bottom?: PaddingLevel;
+    };
+    sectionStyle?: SectionStyle;
+    backgroundColor?: string;
+    backgroundImage?: string;
+    overlay?: OverlayStyle;
+    className?: string;
+}
+export declare const CompoundContainer: ({ children, padding, sectionStyle, backgroundColor, backgroundImage, overlay, className, }: CompoundContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/puck-base/container.js

@@ -0,0 +1,90 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/css-utils.js";
+import { ErrorBoundary } from "./error-boundary.js";
+const SECTION_STYLE_VARS = {
+  dark: {
+    "--background": "oklch(0.145 0 0)",
+    "--foreground": "oklch(0.985 0 0)",
+    "--card": "oklch(0.205 0 0)",
+    "--card-foreground": "oklch(0.985 0 0)",
+    "--muted": "oklch(0.269 0 0)",
+    "--muted-foreground": "oklch(0.708 0 0)",
+    "--border": "oklch(0.275 0 0)",
+    "--accent": "oklch(0.371 0 0)",
+    "--accent-foreground": "oklch(0.985 0 0)"
+  },
+  muted: {
+    "--background": "oklch(0.97 0 0)",
+    "--foreground": "oklch(0.205 0 0)",
+    "--card": "oklch(0.985 0 0)",
+    "--card-foreground": "oklch(0.205 0 0)",
+    "--muted": "oklch(0.94 0 0)",
+    "--muted-foreground": "oklch(0.556 0 0)",
+    "--border": "oklch(0.90 0 0)"
+  },
+  inverted: {
+    "--background": "oklch(0.205 0 0)",
+    "--foreground": "oklch(0.985 0 0)",
+    "--card": "oklch(0.269 0 0)",
+    "--card-foreground": "oklch(0.985 0 0)",
+    "--primary": "oklch(0.922 0 0)",
+    "--primary-foreground": "oklch(0.205 0 0)",
+    "--muted": "oklch(0.269 0 0)",
+    "--muted-foreground": "oklch(0.708 0 0)",
+    "--border": "oklch(0.275 0 0)",
+    "--accent": "oklch(0.371 0 0)",
+    "--accent-foreground": "oklch(0.985 0 0)"
+  }
+};
+const OVERLAY_STYLES = {
+  "gradient-top": "before:absolute before:inset-0 before:bg-gradient-to-b before:from-black/40 before:to-transparent before:pointer-events-none",
+  "gradient-bottom": "before:absolute before:inset-0 before:bg-gradient-to-t before:from-black/40 before:to-transparent before:pointer-events-none",
+  noise: "before:absolute before:inset-0 before:opacity-5 before:pointer-events-none before:bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii43NSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgdHlwZT0iZnJhY3RhbE5vaXNlIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbHRlcj0idXJsKCNhKSIvPjwvc3ZnPg==')]"
+};
+const CompoundContainer = ({
+  children,
+  padding,
+  sectionStyle = "default",
+  backgroundColor,
+  backgroundImage,
+  overlay = "none",
+  className
+}) => {
+  const { top = "large", bottom = "large" } = padding ?? {};
+  const sectionVars = {
+    ...sectionStyle !== "default" && sectionStyle !== "custom" ? SECTION_STYLE_VARS[sectionStyle] : {},
+    ...backgroundColor ? { backgroundColor } : {},
+    ...backgroundImage ? {
+      backgroundImage: `url(${backgroundImage})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center"
+    } : {}
+  };
+  const hasOverlay = overlay !== "none" && OVERLAY_STYLES[overlay];
+  const hasSectionOverride = sectionStyle !== "default" || backgroundColor || backgroundImage;
+  return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "w-full",
+        {
+          "pt-20 lg:pt-40": top === "large",
+          "pb-20 lg:pb-40": bottom === "large",
+          "pt-15 lg:pt-30": top === "medium",
+          "pb-15 lg:pb-30": bottom === "medium",
+          "pt-10 lg:pt-20": top === "small",
+          "pb-10 lg:pb-20": bottom === "small"
+        },
+        hasSectionOverride && "bg-background text-foreground",
+        hasOverlay && "relative",
+        hasOverlay && OVERLAY_STYLES[overlay],
+        className
+      ),
+      style: Object.keys(sectionVars).length > 0 ? sectionVars : void 0,
+      children: /* @__PURE__ */ jsx("div", { className: cn("container mx-auto", hasOverlay && "relative z-10"), children })
+    }
+  ) });
+};
+export {
+  CompoundContainer
+};