keystone-design-bootstrap 1.0.62 → 1.0.64

package/dist/form-C94A_PX_.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Form definition from API (GET /public/forms/:form_type).
+ * fields is an ordered array; each item is a single field or an array of fields (inline row). Max depth 2.
+ */
+interface FormFieldOption {
+    value: string;
+    label: string;
+}
+interface FormFieldDefinition {
+    name: string;
+    type: string;
+    label: string;
+    required?: boolean;
+    placeholder?: string;
+    /** For hidden fields, optional value to submit. */
+    value?: string;
+    /** For checkbox_group fields: the selectable options. */
+    options?: FormFieldOption[];
+}
+/** One item in the fields array: either a single field or a row of fields (inline). */
+type FormFieldItem = FormFieldDefinition | FormFieldDefinition[];
+interface FormDefinition {
+    id: number;
+    name: string;
+    form_type: string;
+    /** Ordered array; each element is a field or an array of fields (inline row). */
+    fields: FormFieldItem[];
+    settings?: Record<string, unknown>;
+    /** Business name for consent copy (e.g. "{{company_name}}" in checkbox labels). */
+    company_name?: string;
+    created_at?: string;
+    updated_at?: string;
+}
+type FormType = 'lead' | 'job_application' | 'marketing_list_signup';
+
+export type { FormDefinition as F, FormFieldDefinition as a, FormFieldItem as b, FormFieldOption as c, FormType as d };

package/dist/index.d.ts

@@ -1,11 +1,12 @@
 export { AboutHome, BlogCardFullWidthHorizontal, BlogCardFullWidthHorizontalAlt, BlogCardFullWidthHorizontalCompact, BlogCardFullWidthHorizontalMinimal, BlogCardFullWidthVertical, BlogCardFullWidthVerticalAlt, BlogCardFullWidthVerticalCompact, BlogCardFullWidthVerticalMinimal, BlogCardHorizontal, BlogCardHorizontalBadge, BlogCardHorizontalCompact, BlogCardHorizontalMinimal, BlogCardVertical, BlogCardVerticalBadge, BlogCardVerticalCompact, BlogCardVerticalMinimal, BlogGallery, BlogHome, BlogPostSection, BlogSection, ContactHome, ContactSection, EmailSignupSection, EmailSignupSectionProps, FAQGrid, FAQHero, FAQHome, FeatureTabHorizontal, FeatureTabVertical, FeatureTextCentered, FeatureTextFeaturedIconBox, FeatureTextFeaturedIconCard, FeatureTextFeaturedIconLeft, FeatureTextFeaturedIconTopCentered, FeatureTextFeaturedIconTopCenteredBrand, FeatureTextFeaturedIconTopLeft, FeatureTextFeaturedIconTopLeftBrand, FeatureTextIconCard, FeatureTextIconLeft, FeatureTextIconTopCentered, FeatureTextIconTopLeft, FeatureTextIntegrationIconBox, FeatureTextIntegrationIconLeft, FeatureTextIntegrationIconTopCentered, FeatureTextIntegrationIconTopLeft, FeatureTextLeft, FeatureTextLeftBrand, FooterHome, GenericHeaderComponent, GenericTextHero, HeaderNavigation, HeroHome, HomeHeroComponent, JobApplicationForm, JobDetailHero, JobDetailSection, JobGallery, LocationDetailHero, LocationDetailsSection, LocationGrid, PackageForMenu, PolicyDocumentSection, ServiceDetailContent, ServiceDetailHero, ServiceMenuSection, ServiceMenuSectionProps, ServicesGrid, ServicesHome, SocialMediaGrid, SocialMediaHero, StatisticsSection, TeamGrid, TestimonialsGrid, TestimonialsHero, TestimonialsHome, ValuesSection, getBlogPostData } from './design_system/sections/index.js';
 export { Avatar, AvatarLabelGroup, Badge, BadgeGroup, BadgeWithDot, Breadcrumb, Button, ButtonGroup, Carousel, CarouselContext, CarouselSectionWrapper, ComboBox, FeaturedIcon, Form, FormContainer, GoogleMap, HintText, Input, InputBase, InputGroup, Label, MarkdownRenderer, Modal, ModalProps, NativeSelect, Pagination, PaginationPageDefault, PaginationPageMinimalCenter, PhotoWithFallback, PrivacyCheckbox, RatingBadge, RatingStars, RoundButton, Select, SelectItem, SocialIcon, StarIcon, Textarea, Tooltip, VerifiedTick, VideoModal, VideoPlayButton, Wreath, getSocialIcon, getStarProgress, useCarousel } from './design_system/elements/index.js';
-import { C as CompanyInformation } from './package-CB1tENyG.js';
+import { C as CompanyInformation } from './package-DeHKpQp7.js';
 export { ThemeProvider, useTheme } from './contexts/index.js';
 import React__default from 'react';
 export { Theme } from './themes/index.js';
 import './blog-post-vWzW8yFb.js';
 import './photos-CmBdWiuZ.js';
+import './form-C94A_PX_.js';
 import './website-photos-Cl1YqAno.js';
 import 'react-aria-components';
 import 'embla-carousel-react';

package/dist/index.js

@@ -6014,10 +6014,44 @@ function allFieldsFlat(fields) {
   }
   return out;
 }
+function CheckboxGroup({ field }) {
+  var _a;
+  const [selected, setSelected] = useState8([]);
+  const options = (_a = field.options) != null ? _a : [];
+  const toggle = (value) => {
+    setSelected(
+      (prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]
+    );
+  };
+  return /* @__PURE__ */ React18.createElement("fieldset", null, /* @__PURE__ */ React18.createElement("legend", { className: "mb-2 font-body text-sm font-medium text-fg-primary" }, field.label, field.required && /* @__PURE__ */ React18.createElement("span", { className: "ml-1 text-error-500" }, "*")), /* @__PURE__ */ React18.createElement(
+    "input",
+    {
+      type: "hidden",
+      name: field.name,
+      value: selected.join(",")
+    }
+  ), /* @__PURE__ */ React18.createElement("div", { className: "grid grid-cols-2 gap-x-8 gap-y-3" }, options.map((opt) => {
+    const id3 = `cbg-${field.name}-${opt.value}`;
+    const checked = selected.includes(opt.value);
+    return /* @__PURE__ */ React18.createElement("div", { key: opt.value, className: "flex items-center gap-3" }, /* @__PURE__ */ React18.createElement(
+      "input",
+      {
+        type: "checkbox",
+        id: id3,
+        checked,
+        onChange: () => toggle(opt.value),
+        className: "h-4 w-4 shrink-0 rounded border-secondary focus:ring-focus-ring"
+      }
+    ), /* @__PURE__ */ React18.createElement("label", { htmlFor: id3, className: "font-body text-sm text-tertiary cursor-pointer" }, opt.label));
+  })));
+}
 function renderField(field, index, showCountryCode, selectedCountryPhone, onCountryChange, phoneValues, setPhoneValues, companyName, privacyPolicyUrl, termsOfServiceUrl) {
   var _a, _b, _c, _d, _e, _f;
   const name = (_a = field.name) != null ? _a : `field-${index}`;
   const type = ((_b = field.type) != null ? _b : "text").toString().toLowerCase();
+  if (type === "checkbox_group") {
+    return /* @__PURE__ */ React18.createElement(CheckboxGroup, { key: name, field });
+  }
   if (field.type === "hidden") {
     const val = (_c = field.value) != null ? _c : "";
     return /* @__PURE__ */ React18.createElement("input", { key: name, type: "hidden", name, value: val });
@@ -6062,11 +6096,7 @@ function renderField(field, index, showCountryCode, selectedCountryPhone, onCoun
       )
     ));
   }
-  if (field.type === "tel" && showCountryCode) {
-    const countryOptions = countries_default.map((c) => ({
-      label: c.phoneCode.startsWith("+") ? c.phoneCode : `+${c.phoneCode}`,
-      value: c.code
-    }));
+  if (field.type === "tel") {
     const country = countries_default.find((c) => c.code === selectedCountryPhone);
     const nationalMask = getNationalMask(country);
     const value = (_e = phoneValues[name]) != null ? _e : "";
@@ -6077,35 +6107,52 @@ function renderField(field, index, showCountryCode, selectedCountryPhone, onCoun
       const formatted = nationalMask ? formatDigitsToMask(digits, nationalMask) : digits;
       setPhoneValues((prev) => __spreadProps(__spreadValues({}, prev), { [name]: formatted }));
     };
-    return /* @__PURE__ */ React18.createElement(
-      InputGroup2,
-      {
-        key: name,
-        label: field.label,
-        isRequired: Boolean(field.required),
-        size: "md",
-        leadingAddon: /* @__PURE__ */ React18.createElement(
-          NativeSelect2,
+    if (showCountryCode) {
+      const countryOptions = countries_default.map((c) => ({
+        label: c.phoneCode.startsWith("+") ? c.phoneCode : `+${c.phoneCode}`,
+        value: c.code
+      }));
+      return /* @__PURE__ */ React18.createElement(
+        InputGroup2,
+        {
+          key: name,
+          label: field.label,
+          isRequired: Boolean(field.required),
+          size: "md",
+          leadingAddon: /* @__PURE__ */ React18.createElement(
+            NativeSelect2,
+            {
+              "aria-label": "Country code",
+              value: selectedCountryPhone,
+              onChange: (e) => onCountryChange(e.currentTarget.value),
+              options: countryOptions
+            }
+          )
+        },
+        /* @__PURE__ */ React18.createElement(
+          InputBase3,
           {
-            "aria-label": "Country code",
-            value: selectedCountryPhone,
-            onChange: (e) => onCountryChange(e.currentTarget.value),
-            options: countryOptions
+            type: "tel",
+            name,
+            value,
+            onChange: handlePhoneChange,
+            placeholder,
+            size: "md"
           }
         )
-      },
-      /* @__PURE__ */ React18.createElement(
-        InputBase3,
-        {
-          type: "tel",
-          name,
-          value,
-          onChange: handlePhoneChange,
-          placeholder,
-          size: "md"
-        }
-      )
-    );
+      );
+    }
+    return /* @__PURE__ */ React18.createElement(InputGroup2, { key: name, label: field.label, isRequired: Boolean(field.required), size: "md" }, /* @__PURE__ */ React18.createElement(
+      InputBase3,
+      {
+        type: "tel",
+        name,
+        value,
+        onChange: handlePhoneChange,
+        placeholder,
+        size: "md"
+      }
+    ));
   }
   if (field.type === "textarea") {
     return /* @__PURE__ */ React18.createElement(