simple-module-pagebuilder 0.0.1__py3-none-any.whl

pagebuilder/components/widgets/column-widget.tsx

@@ -0,0 +1,63 @@
+import type { ComponentConfig, Slot } from '@puckeditor/core';
+import { cn } from '../../utils/widgetUtils';
+
+export type ColumnWidgetProps = {
+  width: '1/4' | '1/3' | '1/2' | '2/3' | '3/4' | 'full';
+  gap: 'none' | 'sm' | 'md' | 'lg';
+  column: Slot;
+};
+
+const WIDTH_CLASS: Record<ColumnWidgetProps['width'], string> = {
+  '1/4': 'w-full md:w-1/4',
+  '1/3': 'w-full md:w-1/3',
+  '1/2': 'w-full md:w-1/2',
+  '2/3': 'w-full md:w-2/3',
+  '3/4': 'w-full md:w-3/4',
+  full: 'w-full',
+};
+
+const GAP_CLASS: Record<ColumnWidgetProps['gap'], string> = {
+  none: 'gap-0',
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-8',
+};
+
+export const ColumnWidget: ComponentConfig<ColumnWidgetProps> = {
+  label: 'Column',
+  fields: {
+    width: {
+      type: 'select',
+      label: 'Width',
+      options: [
+        { label: 'Quarter', value: '1/4' },
+        { label: 'Third', value: '1/3' },
+        { label: 'Half', value: '1/2' },
+        { label: 'Two thirds', value: '2/3' },
+        { label: 'Three quarters', value: '3/4' },
+        { label: 'Full', value: 'full' },
+      ],
+    },
+    gap: {
+      type: 'select',
+      label: 'Gap',
+      options: [
+        { label: 'None', value: 'none' },
+        { label: 'Small', value: 'sm' },
+        { label: 'Medium', value: 'md' },
+        { label: 'Large', value: 'lg' },
+      ],
+    },
+    column: { type: 'slot' },
+  },
+  defaultProps: {
+    width: '1/2',
+    gap: 'md',
+    column: [],
+  },
+  render: ({ width, gap, column: Column }) => (
+    <div className={cn('flex flex-col', WIDTH_CLASS[width], GAP_CLASS[gap])}>
+      <Column />
+    </div>
+  ),
+};

pagebuilder/components/widgets/contact-cards-widget.tsx

@@ -0,0 +1,172 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { User } from 'lucide-react';
+import type { CSSProperties } from 'react';
+import { createImageField, mediaLibraryAdapter } from '../../fields';
+import { AccentText } from './_internal/accent-text';
+import { renderRichText } from './_internal/rich-text';
+
+export type ContactCardItem = {
+  name: string;
+  role: string;
+  email: string;
+  phone: string;
+  imageUrl: string;
+};
+
+export type ContactCardsWidgetProps = {
+  eyebrow: string;
+  title: string;
+  variant: 'contact' | 'team';
+  items: ContactCardItem[];
+};
+
+const DISPLAY_STYLE: CSSProperties = {
+  fontWeight: 'var(--pb-display-weight)' as CSSProperties['fontWeight'],
+  letterSpacing: 'var(--pb-display-tracking)',
+  fontFamily: 'var(--pb-display-font)',
+  color: 'var(--pb-heading-color)',
+};
+
+export const ContactCardsWidget: ComponentConfig<ContactCardsWidgetProps> = {
+  label: 'Contact Cards',
+  fields: {
+    eyebrow: { type: 'text', label: 'Eyebrow' },
+    title: { type: 'text', label: 'Title' },
+    variant: {
+      type: 'select',
+      label: 'Style',
+      options: [
+        { label: 'Contact (round avatar)', value: 'contact' },
+        { label: 'Team (image-top card)', value: 'team' },
+      ],
+    },
+    items: {
+      type: 'array',
+      label: 'Contacts',
+      arrayFields: {
+        name: { type: 'text', label: 'Name' },
+        role: { type: 'text', label: 'Role' },
+        email: { type: 'text', label: 'Email' },
+        phone: { type: 'text', label: 'Phone' },
+        imageUrl: createImageField(mediaLibraryAdapter, 'Image'),
+      },
+      defaultItemProps: {
+        name: 'Jane Doe',
+        role: 'Director',
+        email: 'jane@example.com',
+        phone: '',
+        imageUrl: '',
+      },
+      min: 1,
+      max: 12,
+    },
+  },
+  defaultProps: {
+    eyebrow: '',
+    title: 'Get in touch',
+    variant: 'contact',
+    items: [
+      {
+        name: 'Jane Doe',
+        role: 'Director',
+        email: 'jane@example.com',
+        phone: '',
+        imageUrl: '',
+      },
+    ],
+  },
+  render: ({ eyebrow, title, variant = 'contact', items }) => {
+    const team = variant === 'team';
+    return (
+      <div className="container mx-auto py-12 px-4 sm:px-6 lg:px-8">
+        {(eyebrow || title) && (
+          <div className="mb-8 text-center">
+            {eyebrow && (
+              <p className="mb-2 text-sm font-medium text-[#686873]">{renderRichText(eyebrow)}</p>
+            )}
+            {/* AccentText, not bare renderRichText: this is a display heading
+						    on `--pb-display-weight`, where a plain <strong>'s relative
+						    `bolder` can compute to no visible change. */}
+            {title && (
+              <h2 className="text-3xl sm:text-4xl" style={DISPLAY_STYLE}>
+                <AccentText text={title} />
+              </h2>
+            )}
+          </div>
+        )}
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {items?.map((item, idx) =>
+            team ? (
+              // Image-top team card: rectangular media (dark placeholder with a
+              // person glyph when no photo), left-aligned name + affiliation.
+              // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; card content repeats, so a content key collides
+              <div key={idx}>
+                {item.imageUrl ? (
+                  <img
+                    src={item.imageUrl}
+                    alt={item.name}
+                    loading="lazy"
+                    className="aspect-[4/3] w-full rounded-xl object-cover"
+                  />
+                ) : (
+                  <div className="flex aspect-[4/3] w-full items-center justify-center rounded-xl bg-[#1a353e]">
+                    <User className="size-10 text-white/35" aria-hidden="true" />
+                  </div>
+                )}
+                {item.name && (
+                  <h3
+                    className="mt-4 text-base font-semibold"
+                    style={{ color: 'var(--pb-heading-color)' }}
+                  >
+                    {renderRichText(item.name)}
+                  </h3>
+                )}
+                {item.role && (
+                  <p className="mt-1 text-sm text-[#686873]">{renderRichText(item.role)}</p>
+                )}
+              </div>
+            ) : (
+              <div
+                // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; card content repeats, so a content key collides
+                key={idx}
+                className="rounded-lg border bg-white dark:bg-gray-900 p-6 text-center shadow-sm"
+              >
+                {item.imageUrl ? (
+                  <img
+                    src={item.imageUrl}
+                    alt={item.name}
+                    className="size-24 rounded-full mx-auto object-cover"
+                  />
+                ) : (
+                  <div className="size-24 rounded-full mx-auto bg-gradient-to-br from-gray-200 to-gray-300" />
+                )}
+                <h3 className="mt-4 text-lg font-semibold">{renderRichText(item.name || '')}</h3>
+                {item.role && (
+                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                    {renderRichText(item.role)}
+                  </p>
+                )}
+                {item.email && (
+                  <a
+                    href={`mailto:${item.email}`}
+                    className="block mt-2 text-primary-700 hover:underline text-sm break-all"
+                  >
+                    {item.email}
+                  </a>
+                )}
+                {item.phone && (
+                  <a
+                    href={`tel:${item.phone}`}
+                    className="block text-sm text-gray-600 dark:text-gray-300"
+                  >
+                    {item.phone}
+                  </a>
+                )}
+              </div>
+            ),
+          )}
+        </div>
+      </div>
+    );
+  },
+};

pagebuilder/components/widgets/contact-form-render.tsx

@@ -0,0 +1,293 @@
+/** Contact form types and render — split from contact-form-widget.tsx,
+ *  which keeps the field definitions, so both stay under the 300-line cap. */
+
+import { type FormEvent, useId, useState } from 'react';
+import { parseList } from '../../utils/widgetUtils';
+import { AccentText } from './_internal/accent-text';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+
+export type ContactFormWidgetProps = {
+  variant: 'boxed' | 'underline';
+  /**
+   * Optional CSS color for the form panel. When set, the panel renders on that
+   * color with inverse (white) labels, underline fields and an outline pill
+   * submit; blank keeps the default grey panel.
+   */
+  surfaceColor: string;
+  title: string;
+  subtitle: string;
+  nameLabel: string;
+  namePlaceholder: string;
+  orgLabel: string;
+  orgPlaceholder: string;
+  enquiryLabel: string;
+  enquiryOptions: string;
+  emailLabel: string;
+  emailPlaceholder: string;
+  messageLabel: string;
+  messagePlaceholder: string;
+  termsLabel: string;
+  submitLabel: string;
+  successTitle: string;
+  successBody: string;
+};
+
+const HEADING_STYLE = { color: 'var(--pb-heading-color)' };
+const BODY_STYLE = { color: 'var(--pb-body-color)' };
+// Text on a colored (surfaceColor) panel — the shared inverse-on-color token.
+const INVERSE_STYLE = { color: 'var(--pb-surface-contrast, #ffffff)' };
+const INPUT_CLASS =
+  'w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500';
+const INPUT_STYLE = {
+  borderColor: 'var(--border)',
+  color: 'var(--pb-body-color)',
+};
+// Boxed field, inverse (on a colored panel): translucent white fill + rule.
+const INPUT_INVERSE_CLASS =
+  'w-full rounded-md border border-white/60 bg-white/10 px-3 py-2 placeholder:text-white/70 focus:outline-none focus:ring-2 focus:ring-white/50';
+// Underline variant (GCA): borderless field with only a bottom rule, on a soft
+// grey panel, label-as-placeholder.
+const UNDERLINE_INPUT_CLASS =
+  'w-full bg-transparent border-0 border-b border-[#686873]/50 px-0 py-4 text-xl text-[var(--pb-heading-color)] placeholder:text-[#686873] focus:outline-none focus:border-[var(--pb-heading-color)]';
+// Underline field, inverse (on a colored panel): white rule + placeholder.
+const UNDERLINE_INPUT_INVERSE_CLASS =
+  'w-full bg-transparent border-0 border-b border-white/60 px-0 py-4 text-xl placeholder:text-white/70 focus:outline-none focus:border-white';
+
+export function ContactFormRender({
+  variant,
+  surfaceColor,
+  title,
+  subtitle,
+  nameLabel,
+  namePlaceholder,
+  orgLabel,
+  orgPlaceholder,
+  enquiryLabel,
+  enquiryOptions,
+  emailLabel,
+  emailPlaceholder,
+  messageLabel,
+  messagePlaceholder,
+  termsLabel,
+  submitLabel,
+  successTitle,
+  successBody,
+}: ContactFormWidgetProps) {
+  const nameId = useId();
+  const orgId = useId();
+  const enquiryId = useId();
+  const emailId = useId();
+  const messageId = useId();
+  const termsId = useId();
+  const [submitted, setSubmitted] = useState(false);
+  const options = parseList(enquiryOptions);
+  const underline = variant === 'underline';
+  // A colored panel flips fields/labels to inverse (white) styling.
+  const inverse = Boolean(surfaceColor);
+  const inputClass = inverse
+    ? underline
+      ? UNDERLINE_INPUT_INVERSE_CLASS
+      : INPUT_INVERSE_CLASS
+    : underline
+      ? UNDERLINE_INPUT_CLASS
+      : INPUT_CLASS;
+  const inputStyle = inverse ? INVERSE_STYLE : underline ? undefined : INPUT_STYLE;
+  const labelClass = underline ? 'sr-only' : 'block text-sm font-medium mb-1';
+  const labelStyle = inverse ? INVERSE_STYLE : HEADING_STYLE;
+  const panelBodyStyle = inverse ? INVERSE_STYLE : BODY_STYLE;
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setSubmitted(true);
+  }
+
+  return (
+    <section
+      className={
+        underline
+          ? 'container mx-auto px-4 py-[var(--pb-section-py,3rem)] sm:px-6 lg:px-8'
+          : 'container mx-auto py-[var(--pb-section-py,3rem)] px-4 max-w-2xl'
+      }
+    >
+      {(title || subtitle) && (
+        <div className="text-center mb-8">
+          {/* AccentText, not bare renderRichText: `font-light` (300) here makes
+					    a plain <strong>'s relative `bolder` compute to 400 — no visible
+					    change. */}
+          {title && (
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-light" style={HEADING_STYLE}>
+              <AccentText text={title} />
+            </h2>
+          )}
+          {subtitle && (
+            <RichTextBlock text={subtitle} className="mt-3 text-lg" style={BODY_STYLE} />
+          )}
+        </div>
+      )}
+      <div
+        className={
+          inverse
+            ? 'mx-auto max-w-3xl rounded-[12px] px-6 py-10 sm:px-12 sm:py-12'
+            : underline
+              ? 'mx-auto max-w-3xl rounded-[12px] bg-[var(--pb-surface-muted,#f3f3f4)] px-6 py-10 sm:px-12 sm:py-12'
+              : ''
+        }
+        style={inverse ? { backgroundColor: surfaceColor } : undefined}
+      >
+        {submitted ? (
+          <div
+            className="rounded-md border px-6 py-8 text-center"
+            style={inverse ? { borderColor: 'rgba(255,255,255,0.6)' } : INPUT_STYLE}
+          >
+            {successTitle && (
+              <h3 className="text-xl font-medium" style={labelStyle}>
+                {renderRichText(successTitle)}
+              </h3>
+            )}
+            {successBody && (
+              <RichTextBlock text={successBody} className="mt-2" style={panelBodyStyle} />
+            )}
+          </div>
+        ) : (
+          <form className="space-y-4" onSubmit={handleSubmit}>
+            <div>
+              <label htmlFor={nameId} className={labelClass} style={labelStyle}>
+                {renderRichText(nameLabel)}
+              </label>
+              <input
+                id={nameId}
+                type="text"
+                required
+                placeholder={namePlaceholder}
+                className={inputClass}
+                style={inputStyle}
+              />
+            </div>
+            <div>
+              <label htmlFor={emailId} className={labelClass} style={labelStyle}>
+                {renderRichText(emailLabel)}
+              </label>
+              <input
+                id={emailId}
+                type="email"
+                required
+                placeholder={emailPlaceholder}
+                className={inputClass}
+                style={inputStyle}
+              />
+            </div>
+            {orgLabel && (
+              <div>
+                <label htmlFor={orgId} className={labelClass} style={labelStyle}>
+                  {renderRichText(orgLabel)}
+                </label>
+                <input
+                  id={orgId}
+                  type="text"
+                  placeholder={orgPlaceholder}
+                  className={inputClass}
+                  style={inputStyle}
+                />
+              </div>
+            )}
+            <div>
+              <label htmlFor={enquiryId} className={labelClass} style={labelStyle}>
+                {renderRichText(enquiryLabel)}
+              </label>
+              <select
+                id={enquiryId}
+                required
+                className={inputClass}
+                style={inputStyle}
+                defaultValue=""
+              >
+                <option value="" disabled>
+                  {underline ? enquiryLabel || 'Select…' : 'Select…'}
+                </option>
+                {options.map((option) => (
+                  <option key={option} value={option}>
+                    {option}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label htmlFor={messageId} className={labelClass} style={labelStyle}>
+                {renderRichText(messageLabel)}
+              </label>
+              <textarea
+                id={messageId}
+                required
+                placeholder={messagePlaceholder}
+                rows={5}
+                className={inputClass}
+                style={inputStyle}
+              />
+            </div>
+            <div className="flex items-start gap-2">
+              <input
+                id={termsId}
+                type="checkbox"
+                required
+                className="mt-1"
+                style={{
+                  accentColor: inverse ? 'var(--pb-surface-contrast, #ffffff)' : 'var(--primary)',
+                }}
+              />
+              <label htmlFor={termsId} className="text-sm" style={panelBodyStyle}>
+                {/* `*word*` segments render in the accent colour (e.g. the
+								    orange "Terms of Use" link in the Figma); on a colored
+								    panel they invert to the surface-contrast color, underlined.
+								    The rest is ordinary inline markdown, so the terms can also
+								    carry a real `[link](/page/terms)`. */}
+                {renderRichText(termsLabel, {
+                  renderEm: (content, key) => (
+                    <span
+                      key={key}
+                      className={inverse ? 'font-semibold underline' : 'font-semibold'}
+                      style={{
+                        color: inverse
+                          ? 'var(--pb-surface-contrast, #ffffff)'
+                          : 'var(--pb-accent, #fa6e25)',
+                      }}
+                    >
+                      {content}
+                    </span>
+                  ),
+                })}
+              </label>
+            </div>
+            <button
+              type="submit"
+              className={
+                inverse
+                  ? 'inline-flex items-center justify-center rounded-full border px-6 py-3 font-semibold transition-colors hover:bg-white/10'
+                  : underline
+                    ? 'inline-flex items-center justify-center rounded-full bg-[var(--primary,#1a353e)] px-6 py-3 font-semibold text-[var(--primary-foreground,#fff)] transition-opacity hover:opacity-90'
+                    : 'inline-flex items-center justify-center px-5 py-2.5 rounded-md bg-primary-700 hover:bg-primary-800 text-white font-medium'
+              }
+              style={
+                inverse
+                  ? {
+                      borderColor: 'var(--pb-surface-contrast, #ffffff)',
+                      color: 'var(--pb-surface-contrast, #ffffff)',
+                      backgroundColor: 'transparent',
+                    }
+                  : undefined
+              }
+            >
+              {renderRichText(submitLabel, { allowLinks: false })}
+              {/* Trailing arrow, off by default (`--pb-button-arrow-display`). */}
+              <span
+                aria-hidden="true"
+                className="ml-2 [display:var(--pb-button-arrow-display,none)]"
+              >
+                →
+              </span>
+            </button>
+          </form>
+        )}
+      </div>
+    </section>
+  );
+}

pagebuilder/components/widgets/contact-form-widget.tsx

@@ -0,0 +1,69 @@
+/** Contact form widget: field definitions and config assembly.
+ *  Types and render live in contact-form-render.tsx. */
+
+import type { ComponentConfig } from '@puckeditor/core';
+
+import { ContactFormRender, type ContactFormWidgetProps } from './contact-form-render';
+
+export type { ContactFormWidgetProps } from './contact-form-render';
+
+export const ContactFormWidget: ComponentConfig<ContactFormWidgetProps> = {
+  label: 'Contact form',
+  fields: {
+    variant: {
+      type: 'select',
+      label: 'Style',
+      options: [
+        { label: 'Boxed inputs', value: 'boxed' },
+        { label: 'Underline inputs (panel)', value: 'underline' },
+      ],
+    },
+    surfaceColor: {
+      type: 'text',
+      label: 'Panel color (CSS, inverse text — optional)',
+    },
+    title: { type: 'text', label: 'Title' },
+    subtitle: { type: 'textarea', label: 'Subtitle' },
+    nameLabel: { type: 'text', label: 'Name field label' },
+    namePlaceholder: { type: 'text', label: 'Name placeholder' },
+    orgLabel: {
+      type: 'text',
+      label: 'Organisation field label (blank to hide)',
+    },
+    orgPlaceholder: { type: 'text', label: 'Organisation placeholder' },
+    enquiryLabel: { type: 'text', label: 'Enquiry type label' },
+    enquiryOptions: {
+      type: 'textarea',
+      label: 'Enquiry options (one per line)',
+    },
+    emailLabel: { type: 'text', label: 'Email field label' },
+    emailPlaceholder: { type: 'text', label: 'Email placeholder' },
+    messageLabel: { type: 'text', label: 'Message field label' },
+    messagePlaceholder: { type: 'text', label: 'Message placeholder' },
+    termsLabel: { type: 'text', label: 'Terms agreement label' },
+    submitLabel: { type: 'text', label: 'Submit button' },
+    successTitle: { type: 'text', label: 'Success title' },
+    successBody: { type: 'textarea', label: 'Success body' },
+  },
+  defaultProps: {
+    variant: 'boxed',
+    surfaceColor: '',
+    title: 'Contact us',
+    subtitle: "We'd love to hear from you.",
+    nameLabel: 'Name',
+    namePlaceholder: 'Your name',
+    orgLabel: 'Organisation name',
+    orgPlaceholder: 'Your organisation',
+    enquiryLabel: 'Enquiry type',
+    enquiryOptions: 'General\nCollaborations\nData contributions\nPress & media\nScience',
+    emailLabel: 'Email',
+    emailPlaceholder: 'you@example.com',
+    messageLabel: 'Message',
+    messagePlaceholder: 'How can we help?',
+    termsLabel: 'I have read and agree to the Terms and Conditions',
+    submitLabel: 'Send message',
+    successTitle: 'Your message has been sent',
+    successBody: 'Thank you for contacting us, a team member will be in touch with you shortly',
+  },
+  render: (props) => <ContactFormRender {...props} />,
+};

pagebuilder/components/widgets/container-widget.tsx

@@ -0,0 +1,93 @@
+import type { ComponentConfig, Slot } from '@puckeditor/core';
+import { cn } from '../../utils/widgetUtils';
+
+export type ContainerWidgetProps = {
+  backgroundColor: string;
+  padding: 'none' | 'sm' | 'md' | 'lg';
+  maxWidth: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+  rounded: 'none' | 'md' | 'lg' | 'xl';
+  container: Slot;
+};
+
+const PADDING_CLASS: Record<ContainerWidgetProps['padding'], string> = {
+  none: 'p-0',
+  sm: 'p-4',
+  md: 'p-8',
+  lg: 'p-12',
+};
+
+const MAX_WIDTH_CLASS: Record<ContainerWidgetProps['maxWidth'], string> = {
+  sm: 'max-w-screen-sm',
+  md: 'max-w-screen-md',
+  lg: 'max-w-screen-lg',
+  xl: 'max-w-screen-xl',
+  '2xl': 'max-w-screen-2xl',
+  full: 'max-w-full',
+};
+
+const ROUNDED_CLASS: Record<ContainerWidgetProps['rounded'], string> = {
+  none: 'rounded-none',
+  md: 'rounded-md',
+  lg: 'rounded-lg',
+  xl: 'rounded-xl',
+};
+
+export const ContainerWidget: ComponentConfig<ContainerWidgetProps> = {
+  label: 'Container',
+  fields: {
+    backgroundColor: { type: 'text', label: 'Background color (CSS)' },
+    padding: {
+      type: 'select',
+      label: 'Padding',
+      options: [
+        { label: 'None', value: 'none' },
+        { label: 'Small', value: 'sm' },
+        { label: 'Medium', value: 'md' },
+        { label: 'Large', value: 'lg' },
+      ],
+    },
+    maxWidth: {
+      type: 'select',
+      label: 'Max width',
+      options: [
+        { label: 'Small', value: 'sm' },
+        { label: 'Medium', value: 'md' },
+        { label: 'Large', value: 'lg' },
+        { label: 'Extra Large', value: 'xl' },
+        { label: '2XL', value: '2xl' },
+        { label: 'Full', value: 'full' },
+      ],
+    },
+    rounded: {
+      type: 'select',
+      label: 'Rounded',
+      options: [
+        { label: 'None', value: 'none' },
+        { label: 'Medium', value: 'md' },
+        { label: 'Large', value: 'lg' },
+        { label: 'Extra Large', value: 'xl' },
+      ],
+    },
+    container: { type: 'slot' },
+  },
+  defaultProps: {
+    backgroundColor: '',
+    padding: 'md',
+    maxWidth: 'xl',
+    rounded: 'none',
+    container: [],
+  },
+  render: ({ backgroundColor, padding, maxWidth, rounded, container: Container }) => (
+    <div
+      className={cn(
+        'mx-auto',
+        PADDING_CLASS[padding],
+        MAX_WIDTH_CLASS[maxWidth],
+        ROUNDED_CLASS[rounded],
+      )}
+      style={backgroundColor ? { backgroundColor } : undefined}
+    >
+      <Container />
+    </div>
+  ),
+};