@webbycrown/advanced-fields 1.0.1 → 1.0.3

package/README.md

@@ -6,6 +6,8 @@
 
 Professional custom fields for Strapi CMS that provide advanced functionality with comprehensive validation, dynamic options, and user-friendly interfaces.
 
+📦 **NPM Package**: [@webbycrown/advanced-fields](https://www.npmjs.com/package/@webbycrown/advanced-fields)
+
 ## ✨ Features
 
 ### 🔤 Advanced Input
@@ -14,6 +16,7 @@ Professional custom fields for Strapi CMS that provide advanced functionality wi
 - **Custom Error Messages**: User-friendly validation feedback
 - **Default Values**: Pre-filled content for new entries
 - **Placeholder Support**: Helpful hints for content creators
+- **Field Notes**: Display helpful notes below the field
 - **Private Fields**: Hide sensitive data from API responses
 
 ### ☑️ Advanced Checkbox
@@ -22,6 +25,7 @@ Professional custom fields for Strapi CMS that provide advanced functionality wi
 - **Min/Max Validation**: Control minimum and maximum selections
 - **Layout Options**: Vertical, horizontal, or grid layouts
 - **Default Selections**: Pre-select options for new entries
+- **Field Notes**: Display helpful notes below the field
 
 ### 🔘 Advanced Radio
 - **Single & Multiple Selection**: Choose between single or multiple radio selections
@@ -29,6 +33,7 @@ Professional custom fields for Strapi CMS that provide advanced functionality wi
 - **Selection Limits**: Control minimum and maximum choices
 - **Layout Flexibility**: Multiple visual layouts
 - **Custom Validation**: Tailored error messages
+- **Field Notes**: Display helpful notes below the field
 
 ## 🛠️ Installation
 
@@ -57,7 +62,7 @@ yarn add @webbycrown/advanced-fields
 ### Advanced Input Configuration
 
 ```javascript
-// Example: Text validation with custom error message
+// Example: Text validation with custom error message and field note
 {
   "required": true,
   "maxLength": 255,
@@ -66,7 +71,8 @@ yarn add @webbycrown/advanced-fields
   "options": {
     "customErrorMessage": "Please enter valid text",
     "placeholder": "Enter your text here",
-    "defaultValue": "Default text"
+    "defaultValue": "Default text",
+    "fieldNote": "This field accepts alphanumeric characters and spaces only"
   }
 }
 ```
@@ -74,7 +80,7 @@ yarn add @webbycrown/advanced-fields
 ### Advanced Checkbox Configuration
 
 ```javascript
-// Example: Multiple checkbox with validation
+// Example: Multiple checkbox with validation and field note
 {
   "required": true,
   "options": {
@@ -83,7 +89,8 @@ yarn add @webbycrown/advanced-fields
     "minChoices": 1,
     "maxChoices": 2,
     "layout": "vertical",
-    "defaultSelected": "1\n2"
+    "defaultSelected": "1\n2",
+    "fieldNote": "Please select at least 1 and at most 2 options"
   }
 }
 ```
@@ -91,14 +98,15 @@ yarn add @webbycrown/advanced-fields
 ### Advanced Radio Configuration
 
 ```javascript
-// Example: Single radio with dynamic options
+// Example: Single radio with dynamic options and field note
 {
   "required": true,
   "options": {
     "selectionType": "single",
     "radioOptions": "small|Small\nmedium|Medium\nlarge|Large",
     "layout": "horizontal",
-    "defaultSelected": "medium"
+    "defaultSelected": "medium",
+    "fieldNote": "Choose the size that best fits your needs"
   }
 }
 ```
@@ -117,6 +125,7 @@ yarn add @webbycrown/advanced-fields
 | `options.defaultValue` | string | Pre-filled value | `""` |
 | `options.placeholder` | string | Placeholder text | `""` |
 | `options.customErrorMessage` | string | Custom error message | `""` |
+| `options.fieldNote` | string | Helpful note displayed below field | `""` |
 | `private` | boolean | Hide from API | `false` |
 
 ### Advanced Checkbox Options
@@ -131,6 +140,7 @@ yarn add @webbycrown/advanced-fields
 | `options.maxChoices` | number | Maximum selections | `0` |
 | `options.layout` | string | `vertical`, `horizontal`, or `grid` | `vertical` |
 | `options.customErrorMessage` | string | Custom error message | `""` |
+| `options.fieldNote` | string | Helpful note displayed below field | `""` |
 | `private` | boolean | Hide from API | `false` |
 
 ### Advanced Radio Options
@@ -145,6 +155,7 @@ yarn add @webbycrown/advanced-fields
 | `options.maxChoices` | number | Maximum selections | `0` |
 | `options.layout` | string | `vertical`, `horizontal`, or `grid` | `vertical` |
 | `options.customErrorMessage` | string | Custom error message | `""` |
+| `options.fieldNote` | string | Helpful note displayed below field | `""` |
 | `private` | boolean | Hide from API | `false` |
 
 ## 🔧 API Usage
@@ -259,8 +270,10 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 - 🔘 Advanced Radio (single/multiple)
 - 🎨 Multiple layout options
 - ✅ Comprehensive validation system
+- 📝 Field notes support for all field types
 - 📱 Responsive design
 - 🌐 Internationalization support
+- 🚀 Published to NPM: [@webbycrown/advanced-fields](https://www.npmjs.com/package/@webbycrown/advanced-fields)
 
 ---
 

package/dist/_chunks/en-BPwepUqK.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const en = {
+  "advanced-fields.plugin.name": "Advanced Fields",
+  "advanced-fields.input.label": "Advanced Input",
+  "advanced-fields.input.description": "Professional-grade text input with comprehensive validation and advanced configuration options",
+  "advanced-fields.checkbox.label": "Advanced Checkbox",
+  "advanced-fields.checkbox.description": "Unified checkbox field supporting both single and multiple selections with advanced configuration",
+  "advanced-fields.selectinput.label": "Select Input",
+  "advanced-fields.selectinput.description": "Select an option",
+  "advanced-fields.input.settings.base.label": "Basic settings",
+  "advanced-fields.input.options.required.label": "Required field",
+  "advanced-fields.input.options.required.description": "You won't be able to create an entry if this field is empty",
+  "advanced-fields.input.options.unique.label": "Unique field",
+  "advanced-fields.input.options.unique.description": "You won't be able to create an entry if there is an existing entry with identical content",
+  "advanced-fields.input.options.maxLength.label": "Maximum length",
+  "advanced-fields.input.options.maxLength.description": "Set the maximum number of characters allowed",
+  "advanced-fields.input.options.minLength.label": "Minimum length",
+  "advanced-fields.input.options.minLength.description": "Set the minimum number of characters allowed",
+  "advanced-fields.input.options.defaultValue.label": "Default value",
+  "advanced-fields.input.options.defaultValue.description": "Set the default value for this field",
+  "advanced-fields.input.settings.advanced.label": "Advanced settings",
+  "advanced-fields.input.options.regex.label": "RegExp pattern",
+  "advanced-fields.input.options.regex.description": "The text of the regular expression",
+  "advanced-fields.input.options.placeholder.label": "Placeholder",
+  "advanced-fields.input.options.placeholder.description": "Display text when the field is empty",
+  "advanced-fields.input.options.private.label": "Private field",
+  "advanced-fields.input.options.private.description": "This field will not be included in API responses",
+  "advanced-fields.input.options.customErrorMessage.label": "Custom error message",
+  "advanced-fields.input.options.customErrorMessage.description": "Display a custom error message when validation fails",
+  "advanced-fields.checkbox.settings.base.label": "Basic settings",
+  "advanced-fields.checkbox.options.required.label": "Required field",
+  "advanced-fields.checkbox.options.required.description": "You won't be able to create an entry if this field is empty",
+  "advanced-fields.checkbox.options.checkboxType.label": "Checkbox Type",
+  "advanced-fields.checkbox.options.checkboxType.description": "Choose between single checkbox or multiple checkboxes",
+  "advanced-fields.checkbox.options.checkboxType.single": "Single Checkbox",
+  "advanced-fields.checkbox.options.checkboxType.multiple": "Multiple Checkboxes",
+  "advanced-fields.checkbox.options.defaultValue.label": "Default State",
+  "advanced-fields.checkbox.options.defaultValue.description": "Pre-checked state for single checkbox",
+  "advanced-fields.checkbox.options.defaultValue.options.true": "Checked (True)",
+  "advanced-fields.checkbox.options.defaultValue.options.false": "Unchecked (False)",
+  "advanced-fields.checkbox.settings.advanced.label": "Advanced settings",
+  "advanced-fields.checkbox.options.customErrorMessage.label": "Custom error message",
+  "advanced-fields.checkbox.options.customErrorMessage.description": "Display a custom error message when validation fails",
+  "advanced-fields.checkbox.options.customErrorMessage.placeholder": "Enter custom error message",
+  "advanced-fields.checkbox.options.private.label": "Private field",
+  "advanced-fields.checkbox.options.private.description": "This field will not be included in API responses",
+  "advanced-fields.checkbox.options.labelOn.label": "Checked Label",
+  "advanced-fields.checkbox.options.labelOn.description": "Custom label displayed when single checkbox is checked",
+  "advanced-fields.checkbox.options.labelOff.label": "Unchecked Label",
+  "advanced-fields.checkbox.options.labelOff.description": "Custom label displayed when single checkbox is unchecked",
+  "advanced-fields.checkbox.options.checkboxOptions.label": "Checkbox Options",
+  "advanced-fields.checkbox.options.checkboxOptions.description": "Define available options for multiple checkboxes (one per line: value|label)",
+  "advanced-fields.checkbox.options.checkboxOptions.placeholder": "option1|Option 1\noption2|Option 2\noption3|Option 3",
+  "advanced-fields.checkbox.options.defaultSelected.label": "Default Selected",
+  "advanced-fields.checkbox.options.defaultSelected.description": "Pre-selected options for multiple checkboxes (one per line)",
+  "advanced-fields.checkbox.options.defaultSelected.placeholder": "option1\noption2",
+  "advanced-fields.checkbox.options.minChoices.label": "Minimum Choices",
+  "advanced-fields.checkbox.options.minChoices.description": "Minimum number of options that must be selected (0 for no minimum)",
+  "advanced-fields.checkbox.options.maxChoices.label": "Maximum Choices",
+  "advanced-fields.checkbox.options.maxChoices.description": "Maximum number of options that can be selected (0 for no maximum)",
+  "advanced-fields.checkbox.options.layout.label": "Layout Style",
+  "advanced-fields.checkbox.options.layout.description": "Visual layout of multiple checkbox options",
+  "advanced-fields.checkbox.options.layout.vertical": "Vertical Stack",
+  "advanced-fields.checkbox.options.layout.horizontal": "Horizontal Row",
+  "advanced-fields.checkbox.options.layout.grid": "Grid Layout",
+  "advanced-fields.radio.label": "Multiple Type Choice",
+  "advanced-fields.radio.description": "Select one or more options (radio style)",
+  "advanced-fields.radio.settings.base.label": "Basic settings",
+  "advanced-fields.radio.options.required.label": "Multiple Type Choice",
+  "advanced-fields.radio.options.required.description": "You won't be able to create an entry if this field is empty",
+  "advanced-fields.radio.options.radioOptions.label": "Multiple Type Choice",
+  "advanced-fields.radio.options.radioOptions.description": 'Enter one option per line in format: value|label (e.g., "1|Option 1")',
+  "advanced-fields.radio.options.radioOptions.placeholder": "1|Option 1\n2|Option 2\n3|Option 3",
+  "advanced-fields.radio.options.selectionType.label": "Selection Type",
+  "advanced-fields.radio.options.selectionType.description": "Allow selecting only one or multiple type choices",
+  "advanced-fields.radio.options.customErrorMessage.label": "Custom error message",
+  "advanced-fields.radio.options.customErrorMessage.description": "Display a custom error message when validation fails",
+  "advanced-fields.radio.options.customErrorMessage.placeholder": "Enter custom error message",
+  "advanced-fields.radio.no-options": "No options defined. Please configure this field in the content type settings.",
+  "advanced-fields.radio.options.type.single": "Single selection",
+  "advanced-fields.radio.options.type.multiple": "Multiple selection"
+};
+exports.default = en;

package/dist/_chunks/en-CJmJkBE0.mjs

@@ -0,0 +1,84 @@
+const en = {
+  "advanced-fields.plugin.name": "Advanced Fields",
+  "advanced-fields.input.label": "Advanced Input",
+  "advanced-fields.input.description": "Professional-grade text input with comprehensive validation and advanced configuration options",
+  "advanced-fields.checkbox.label": "Advanced Checkbox",
+  "advanced-fields.checkbox.description": "Unified checkbox field supporting both single and multiple selections with advanced configuration",
+  "advanced-fields.selectinput.label": "Select Input",
+  "advanced-fields.selectinput.description": "Select an option",
+  "advanced-fields.input.settings.base.label": "Basic settings",
+  "advanced-fields.input.options.required.label": "Required field",
+  "advanced-fields.input.options.required.description": "You won't be able to create an entry if this field is empty",
+  "advanced-fields.input.options.unique.label": "Unique field",
+  "advanced-fields.input.options.unique.description": "You won't be able to create an entry if there is an existing entry with identical content",
+  "advanced-fields.input.options.maxLength.label": "Maximum length",
+  "advanced-fields.input.options.maxLength.description": "Set the maximum number of characters allowed",
+  "advanced-fields.input.options.minLength.label": "Minimum length",
+  "advanced-fields.input.options.minLength.description": "Set the minimum number of characters allowed",
+  "advanced-fields.input.options.defaultValue.label": "Default value",
+  "advanced-fields.input.options.defaultValue.description": "Set the default value for this field",
+  "advanced-fields.input.settings.advanced.label": "Advanced settings",
+  "advanced-fields.input.options.regex.label": "RegExp pattern",
+  "advanced-fields.input.options.regex.description": "The text of the regular expression",
+  "advanced-fields.input.options.placeholder.label": "Placeholder",
+  "advanced-fields.input.options.placeholder.description": "Display text when the field is empty",
+  "advanced-fields.input.options.private.label": "Private field",
+  "advanced-fields.input.options.private.description": "This field will not be included in API responses",
+  "advanced-fields.input.options.customErrorMessage.label": "Custom error message",
+  "advanced-fields.input.options.customErrorMessage.description": "Display a custom error message when validation fails",
+  "advanced-fields.checkbox.settings.base.label": "Basic settings",
+  "advanced-fields.checkbox.options.required.label": "Required field",
+  "advanced-fields.checkbox.options.required.description": "You won't be able to create an entry if this field is empty",
+  "advanced-fields.checkbox.options.checkboxType.label": "Checkbox Type",
+  "advanced-fields.checkbox.options.checkboxType.description": "Choose between single checkbox or multiple checkboxes",
+  "advanced-fields.checkbox.options.checkboxType.single": "Single Checkbox",
+  "advanced-fields.checkbox.options.checkboxType.multiple": "Multiple Checkboxes",
+  "advanced-fields.checkbox.options.defaultValue.label": "Default State",
+  "advanced-fields.checkbox.options.defaultValue.description": "Pre-checked state for single checkbox",
+  "advanced-fields.checkbox.options.defaultValue.options.true": "Checked (True)",
+  "advanced-fields.checkbox.options.defaultValue.options.false": "Unchecked (False)",
+  "advanced-fields.checkbox.settings.advanced.label": "Advanced settings",
+  "advanced-fields.checkbox.options.customErrorMessage.label": "Custom error message",
+  "advanced-fields.checkbox.options.customErrorMessage.description": "Display a custom error message when validation fails",
+  "advanced-fields.checkbox.options.customErrorMessage.placeholder": "Enter custom error message",
+  "advanced-fields.checkbox.options.private.label": "Private field",
+  "advanced-fields.checkbox.options.private.description": "This field will not be included in API responses",
+  "advanced-fields.checkbox.options.labelOn.label": "Checked Label",
+  "advanced-fields.checkbox.options.labelOn.description": "Custom label displayed when single checkbox is checked",
+  "advanced-fields.checkbox.options.labelOff.label": "Unchecked Label",
+  "advanced-fields.checkbox.options.labelOff.description": "Custom label displayed when single checkbox is unchecked",
+  "advanced-fields.checkbox.options.checkboxOptions.label": "Checkbox Options",
+  "advanced-fields.checkbox.options.checkboxOptions.description": "Define available options for multiple checkboxes (one per line: value|label)",
+  "advanced-fields.checkbox.options.checkboxOptions.placeholder": "option1|Option 1\noption2|Option 2\noption3|Option 3",
+  "advanced-fields.checkbox.options.defaultSelected.label": "Default Selected",
+  "advanced-fields.checkbox.options.defaultSelected.description": "Pre-selected options for multiple checkboxes (one per line)",
+  "advanced-fields.checkbox.options.defaultSelected.placeholder": "option1\noption2",
+  "advanced-fields.checkbox.options.minChoices.label": "Minimum Choices",
+  "advanced-fields.checkbox.options.minChoices.description": "Minimum number of options that must be selected (0 for no minimum)",
+  "advanced-fields.checkbox.options.maxChoices.label": "Maximum Choices",
+  "advanced-fields.checkbox.options.maxChoices.description": "Maximum number of options that can be selected (0 for no maximum)",
+  "advanced-fields.checkbox.options.layout.label": "Layout Style",
+  "advanced-fields.checkbox.options.layout.description": "Visual layout of multiple checkbox options",
+  "advanced-fields.checkbox.options.layout.vertical": "Vertical Stack",
+  "advanced-fields.checkbox.options.layout.horizontal": "Horizontal Row",
+  "advanced-fields.checkbox.options.layout.grid": "Grid Layout",
+  "advanced-fields.radio.label": "Multiple Type Choice",
+  "advanced-fields.radio.description": "Select one or more options (radio style)",
+  "advanced-fields.radio.settings.base.label": "Basic settings",
+  "advanced-fields.radio.options.required.label": "Multiple Type Choice",
+  "advanced-fields.radio.options.required.description": "You won't be able to create an entry if this field is empty",
+  "advanced-fields.radio.options.radioOptions.label": "Multiple Type Choice",
+  "advanced-fields.radio.options.radioOptions.description": 'Enter one option per line in format: value|label (e.g., "1|Option 1")',
+  "advanced-fields.radio.options.radioOptions.placeholder": "1|Option 1\n2|Option 2\n3|Option 3",
+  "advanced-fields.radio.options.selectionType.label": "Selection Type",
+  "advanced-fields.radio.options.selectionType.description": "Allow selecting only one or multiple type choices",
+  "advanced-fields.radio.options.customErrorMessage.label": "Custom error message",
+  "advanced-fields.radio.options.customErrorMessage.description": "Display a custom error message when validation fails",
+  "advanced-fields.radio.options.customErrorMessage.placeholder": "Enter custom error message",
+  "advanced-fields.radio.no-options": "No options defined. Please configure this field in the content type settings.",
+  "advanced-fields.radio.options.type.single": "Single selection",
+  "advanced-fields.radio.options.type.multiple": "Multiple selection"
+};
+export {
+  en as default
+};

package/dist/_chunks/index-C-A6rX1K.mjs

@@ -0,0 +1,268 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import { Box, Field, Flex } from "@strapi/design-system";
+import { useState, useEffect } from "react";
+const AdvancedRadio = ({
+  attribute = {},
+  description = { id: "", defaultMessage: "" },
+  disabled,
+  error,
+  intlLabel = { id: "", defaultMessage: "" },
+  labelAction,
+  name,
+  onChange,
+  required,
+  value
+}) => {
+  const { formatMessage } = useIntl();
+  const [selectedValues, setSelectedValues] = useState([]);
+  const [validationError, setValidationError] = useState(null);
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const {
+    selectionType = "single",
+    layout = "vertical",
+    minChoices = 0,
+    maxChoices = 0,
+    defaultSelected = "",
+    radioOptions = "",
+    customErrorMessage = "",
+    fieldNote = ""
+  } = attribute.options || attribute;
+  const fieldNoteFromAttribute = attribute.options?.fieldNote || "";
+  const options = radioOptions.split("\n").filter((opt) => opt.trim()).map((opt) => {
+    const [value2, label] = opt.split("|");
+    return { value: value2?.trim() || "", label: label?.trim() || value2?.trim() || "" };
+  });
+  useEffect(() => {
+    let initialValues = [];
+    if (value && Array.isArray(value)) {
+      initialValues = value;
+    } else if (value && typeof value === "string") {
+      initialValues = value.split(",").map((v) => v.trim()).filter((v) => v);
+    } else if (defaultSelected) {
+      initialValues = defaultSelected.split(",").map((v) => v.trim()).filter((v) => v);
+    }
+    setSelectedValues(initialValues);
+    const validationResult = validateSelection(initialValues);
+    setValidationError(validationResult);
+    if (onChange && initialValues.length > 0 && (!value || Array.isArray(value) && value.length === 0) && !isInitialized) {
+      setTimeout(() => {
+        onChange({
+          target: {
+            value: initialValues,
+            name,
+            id: name
+          }
+        });
+        setIsInitialized(true);
+      }, 0);
+    } else if (!isInitialized) {
+      setIsInitialized(true);
+    }
+  }, [value, defaultSelected, onChange, error]);
+  const validateSelection = (values) => {
+    const valArray = Array.isArray(values) ? values : [];
+    if (required && valArray.length === 0) {
+      return customErrorMessage || "This field is required";
+    }
+    if (valArray.length === 0) {
+      return null;
+    }
+    if (selectionType === "multiple") {
+      if (minChoices > 0 && valArray.length < minChoices) {
+        return customErrorMessage || `Please select at least ${minChoices} option${minChoices > 1 ? "s" : ""}`;
+      }
+      if (maxChoices > 0 && valArray.length > maxChoices) {
+        return customErrorMessage || `Please select at most ${maxChoices} option${maxChoices > 1 ? "s" : ""}`;
+      }
+    }
+    return null;
+  };
+  const handleRadioChange = (optionValue, isChecked) => {
+    let newValues;
+    if (selectionType === "single") {
+      newValues = isChecked ? [optionValue] : [];
+    } else {
+      if (isChecked) {
+        newValues = [...selectedValues, optionValue];
+      } else {
+        newValues = selectedValues.filter((val) => val !== optionValue);
+      }
+    }
+    setSelectedValues(newValues);
+    setHasInteracted(true);
+    const error2 = validateSelection(newValues);
+    setValidationError(error2);
+    if (onChange) {
+      const event = {
+        target: {
+          name,
+          id: name,
+          value: newValues
+        }
+      };
+      onChange(event);
+    }
+  };
+  const displayError = error || hasInteracted && validationError;
+  const renderRadios = () => {
+    const radioStyle = {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      padding: "4px 0"
+    };
+    const radioInputStyle = {
+      width: "16px",
+      height: "16px",
+      accentColor: "#4945ff",
+      margin: "0",
+      padding: "0",
+      opacity: "1",
+      visibility: "visible",
+      display: "block",
+      position: "relative",
+      zIndex: "1",
+      cursor: "pointer",
+      border: "2px solid #dcdce4",
+      borderRadius: "50%",
+      backgroundColor: "white",
+      transition: "all 0.2s ease"
+    };
+    const customRadioStyle = {
+      width: "16px",
+      height: "16px",
+      borderRadius: "50%",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      backgroundColor: "#ffffff",
+      cursor: "pointer",
+      transition: "all 0.2s ease",
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    };
+    const customRadioCheckedStyle = {
+      ...customRadioStyle,
+      backgroundColor: "#ffffff",
+      borderColor: "#4945ff"
+    };
+    const customRadioDotStyle = {
+      width: "10px",
+      height: "10px",
+      borderRadius: "50%",
+      backgroundColor: "#4945ff"
+    };
+    const radioLabelStyle = {
+      fontSize: "14px",
+      fontFamily: "inherit",
+      cursor: "pointer",
+      userSelect: "none",
+      color: "#32324d",
+      fontWeight: "400",
+      lineHeight: "1.5",
+      marginLeft: "4px"
+    };
+    if (!options || options.length === 0) {
+      return /* @__PURE__ */ jsx("div", { style: { padding: "8px", color: "#666", fontStyle: "italic" }, children: formatMessage({
+        id: "advanced-fields.radio.no-options",
+        defaultMessage: "No options defined. Please configure this field in the content type settings."
+      }) });
+    }
+    if (layout === "horizontal") {
+      return /* @__PURE__ */ jsx(Flex, { wrap: "wrap", gap: 2, children: options.map((option) => /* @__PURE__ */ jsxs("div", { style: radioStyle, children: [
+        selectionType === "multiple" ? (
+          // Custom radio button appearance for multiple selection
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: selectedValues.includes(option.value) ? customRadioCheckedStyle : customRadioStyle,
+              onClick: () => handleRadioChange(option.value, !selectedValues.includes(option.value)),
+              children: selectedValues.includes(option.value) && /* @__PURE__ */ jsx("div", { style: customRadioDotStyle })
+            }
+          )
+        ) : (
+          // Regular radio button for single selection
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              id: `${name}-${option.value}`,
+              name,
+              checked: selectedValues.includes(option.value),
+              onChange: (e) => handleRadioChange(option.value, e.target.checked),
+              disabled,
+              style: radioInputStyle
+            }
+          )
+        ),
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: selectionType === "single" ? `${name}-${option.value}` : void 0,
+            style: radioLabelStyle,
+            onClick: selectionType === "multiple" ? () => handleRadioChange(option.value, !selectedValues.includes(option.value)) : void 0,
+            children: option.label
+          }
+        )
+      ] }, option.value)) });
+    }
+    return /* @__PURE__ */ jsx("div", { children: options.map((option) => /* @__PURE__ */ jsxs("div", { style: radioStyle, children: [
+      selectionType === "multiple" ? (
+        // Custom radio button appearance for multiple selection
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: selectedValues.includes(option.value) ? customRadioCheckedStyle : customRadioStyle,
+            onClick: () => handleRadioChange(option.value, !selectedValues.includes(option.value)),
+            children: selectedValues.includes(option.value) && /* @__PURE__ */ jsx("div", { style: customRadioDotStyle })
+          }
+        )
+      ) : (
+        // Regular radio button for single selection
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            id: `${name}-${option.value}`,
+            name,
+            checked: selectedValues.includes(option.value),
+            onChange: (e) => handleRadioChange(option.value, e.target.checked),
+            disabled,
+            style: radioInputStyle
+          }
+        )
+      ),
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: selectionType === "single" ? `${name}-${option.value}` : void 0,
+          style: radioLabelStyle,
+          onClick: selectionType === "multiple" ? () => handleRadioChange(option.value, !selectedValues.includes(option.value)) : void 0,
+          children: option.label
+        }
+      )
+    ] }, option.value)) });
+  };
+  return /* @__PURE__ */ jsx(Box, { col: 6, children: /* @__PURE__ */ jsxs(Field.Root, { name, error: displayError, children: [
+    /* @__PURE__ */ jsxs(Field.Label, { children: [
+      intlLabel.id ? formatMessage(intlLabel) : intlLabel.defaultMessage || name,
+      required && /* @__PURE__ */ jsx("span", { style: { color: "#d02b20", marginLeft: "4px" }, children: "*" })
+    ] }),
+    renderRadios(),
+    displayError && /* @__PURE__ */ jsx(Field.Error, { children: displayError }),
+    description && (description.id || description.defaultMessage) && /* @__PURE__ */ jsx(Field.Hint, { children: description.id ? formatMessage(description) : description.defaultMessage }),
+    (fieldNote || fieldNoteFromAttribute) && /* @__PURE__ */ jsx("span", { style: {
+      fontStyle: "italic",
+      color: "#666",
+      fontSize: "12px",
+      display: "block",
+      marginTop: "4px"
+    }, children: fieldNote || fieldNoteFromAttribute })
+  ] }) });
+};
+export {
+  AdvancedRadio as default
+};