keystone-design-bootstrap 1.0.63 → 1.0.64

package/dist/design_system/sections/index.d.ts

@@ -1,9 +1,10 @@
-import { S as Service, F as FormDefinition, P as Package, C as CompanyInformation } from '../../package-ByCAZw9u.js';
+import { S as Service, P as Package, C as CompanyInformation } from '../../package-DeHKpQp7.js';
 import * as React from 'react';
 import React__default, { ComponentProps, ReactNode, FC } from 'react';
 export { Theme } from '../../themes/index.js';
 import { B as BlogPost, a as BlogPostAuthor, d as BlogPostTag } from '../../blog-post-vWzW8yFb.js';
 import { BadgeGroup } from '../elements/index.js';
+import { F as FormDefinition } from '../../form-C94A_PX_.js';
 import { W as WebsitePhotos } from '../../website-photos-Cl1YqAno.js';
 import '../../photos-CmBdWiuZ.js';
 import 'react-aria-components';

package/dist/design_system/sections/index.js

@@ -5988,10 +5988,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 });
@@ -6036,11 +6070,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 : "";
@@ -6051,35 +6081,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(