@webbycrown/advanced-fields 1.0.2 → 1.0.3

package/dist/_chunks/index-DXVpJkpj.mjs

@@ -0,0 +1,282 @@
+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 AdvancedCheckbox = ({
+  attribute = {},
+  description = { id: "", defaultMessage: "" },
+  disabled,
+  error,
+  intlLabel = { id: "", defaultMessage: "" },
+  labelAction,
+  name,
+  onChange,
+  required,
+  value
+}) => {
+  const { formatMessage } = useIntl();
+  const {
+    checkboxType = "multiple",
+    layout = "vertical",
+    minChoices = 0,
+    maxChoices = 0,
+    defaultSelected = "",
+    checkboxOptions = "",
+    customErrorMessage = "",
+    fieldNote = ""
+  } = attribute.options || attribute;
+  const fieldNoteFromAttribute = attribute.options?.fieldNote || "";
+  const getInitialValues = () => {
+    if (checkboxType === "single") {
+      if (value && Array.isArray(value) && value.length > 0) {
+        return value;
+      } else if (value && typeof value === "string" && value.trim()) {
+        return [value.trim()];
+      } else if (defaultSelected && typeof defaultSelected === "string" && defaultSelected.trim()) {
+        return [defaultSelected.trim()];
+      } else if (defaultSelected && Array.isArray(defaultSelected) && defaultSelected.length > 0) {
+        return defaultSelected;
+      }
+      return [];
+    } else {
+      if (value && Array.isArray(value)) {
+        return value;
+      } else if (value && typeof value === "string") {
+        return value.split(",").map((v) => v.trim()).filter((v) => v);
+      } else if (defaultSelected) {
+        return defaultSelected.split(",").map((v) => v.trim()).filter((v) => v);
+      }
+      return [];
+    }
+  };
+  const [fieldValue, setFieldValue] = useState(getInitialValues);
+  const [validationError, setValidationError] = useState(null);
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const options = checkboxOptions.split("\n").filter((opt) => opt.trim()).map((opt) => {
+    const [value2, label] = opt.split("|");
+    return { value: value2?.trim() || "", label: label?.trim() || value2?.trim() || "" };
+  });
+  useEffect(() => {
+    const initialValues = getInitialValues();
+    setFieldValue(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);
+    }
+  }, []);
+  useEffect(() => {
+    if (value && Array.isArray(value) && value.length > 0) {
+      setFieldValue(value);
+      const validationResult = validateSelection(value);
+      setValidationError(validationResult);
+    }
+  }, [value]);
+  const validateSelection = (val) => {
+    const values = Array.isArray(val) ? val : [];
+    if (required && values.length === 0) {
+      return customErrorMessage || "This field is required";
+    }
+    if (values.length === 0) {
+      return null;
+    }
+    if (checkboxType === "multiple") {
+      if (minChoices > 0 && values.length < minChoices) {
+        return customErrorMessage || `Please select at least ${minChoices} option${minChoices > 1 ? "s" : ""}`;
+      }
+      if (maxChoices > 0 && values.length > maxChoices) {
+        return customErrorMessage || `Please select at most ${maxChoices} option${maxChoices > 1 ? "s" : ""}`;
+      }
+    }
+    return null;
+  };
+  const handleCheckboxChange = (optionValue, isChecked) => {
+    let newValue;
+    if (checkboxType === "single") {
+      if (isChecked) {
+        newValue = [optionValue];
+      } else {
+        newValue = [];
+      }
+    } else {
+      if (isChecked) {
+        newValue = [...fieldValue, optionValue];
+      } else {
+        newValue = fieldValue.filter((val) => val !== optionValue);
+      }
+    }
+    setFieldValue(newValue);
+    setHasInteracted(true);
+    const error2 = validateSelection(newValue);
+    setValidationError(error2);
+    if (onChange) {
+      onChange({
+        target: {
+          value: newValue,
+          name,
+          id: name
+        }
+      });
+    }
+  };
+  const displayError = error || hasInteracted && validationError;
+  const renderCheckboxes = () => {
+    const checkboxStyle = {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      marginBottom: "8px"
+    };
+    const checkboxInputStyle = {
+      width: "16px",
+      height: "16px",
+      accentColor: "#4945ff",
+      margin: "0",
+      padding: "0",
+      opacity: "1",
+      visibility: "visible",
+      display: "block",
+      position: "relative",
+      zIndex: "1"
+    };
+    const checkboxLabelStyle = {
+      fontSize: "14px",
+      fontFamily: "inherit",
+      cursor: "pointer",
+      userSelect: "none"
+    };
+    if (checkboxType === "single") {
+      if (!options || options.length === 0) {
+        return /* @__PURE__ */ jsx("div", { style: { padding: "8px", color: "#666", fontStyle: "italic" }, children: formatMessage({
+          id: "advanced-fields.checkbox.options.checkboxOptions.description",
+          defaultMessage: "Define available options for multiple checkboxes (one per line: value|label)"
+        }) });
+      }
+      if (layout === "horizontal") {
+        return /* @__PURE__ */ jsx(Flex, { wrap: "wrap", gap: 2, children: options.map((option) => /* @__PURE__ */ jsxs("div", { style: checkboxStyle, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              id: `${name}-${option.value}`,
+              checked: fieldValue.includes(option.value),
+              onChange: (e) => handleCheckboxChange(option.value, e.target.checked),
+              disabled,
+              style: checkboxInputStyle
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: `${name}-${option.value}`,
+              style: checkboxLabelStyle,
+              children: option.label
+            }
+          )
+        ] }, option.value)) });
+      }
+      return /* @__PURE__ */ jsx("div", { children: options.map((option) => /* @__PURE__ */ jsxs("div", { style: checkboxStyle, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            id: `${name}-${option.value}`,
+            checked: fieldValue.includes(option.value),
+            onChange: (e) => handleCheckboxChange(option.value, e.target.checked),
+            disabled,
+            style: checkboxInputStyle
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: `${name}-${option.value}`,
+            style: checkboxLabelStyle,
+            children: option.label
+          }
+        )
+      ] }, option.value)) });
+    }
+    if (!options || options.length === 0) {
+      return /* @__PURE__ */ jsx("div", { style: { padding: "8px", color: "#666", fontStyle: "italic" }, children: formatMessage({
+        id: "advanced-fields.checkbox.options.checkboxOptions.description",
+        defaultMessage: "Define available options for multiple checkboxes (one per line: value|label)"
+      }) });
+    }
+    if (layout === "horizontal") {
+      return /* @__PURE__ */ jsx(Flex, { wrap: "wrap", gap: 2, children: options.map((option) => /* @__PURE__ */ jsxs("div", { style: checkboxStyle, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            id: `${name}-${option.value}`,
+            checked: fieldValue.includes(option.value),
+            onChange: (e) => handleCheckboxChange(option.value, e.target.checked),
+            disabled,
+            style: checkboxInputStyle
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: `${name}-${option.value}`,
+            style: checkboxLabelStyle,
+            children: option.label
+          }
+        )
+      ] }, option.value)) });
+    }
+    return /* @__PURE__ */ jsx("div", { children: options.map((option) => /* @__PURE__ */ jsxs("div", { style: checkboxStyle, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          id: `${name}-${option.value}`,
+          checked: fieldValue.includes(option.value),
+          onChange: (e) => handleCheckboxChange(option.value, e.target.checked),
+          disabled,
+          style: checkboxInputStyle
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: `${name}-${option.value}`,
+          style: checkboxLabelStyle,
+          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: "*" })
+    ] }),
+    renderCheckboxes(),
+    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 {
+  AdvancedCheckbox as default
+};

package/dist/_chunks/index-TmoGbq0j.js

@@ -0,0 +1,282 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactIntl = require("react-intl");
+const designSystem = require("@strapi/design-system");
+const react = require("react");
+const AdvancedCheckbox = ({
+  attribute = {},
+  description = { id: "", defaultMessage: "" },
+  disabled,
+  error,
+  intlLabel = { id: "", defaultMessage: "" },
+  labelAction,
+  name,
+  onChange,
+  required,
+  value
+}) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const {
+    checkboxType = "multiple",
+    layout = "vertical",
+    minChoices = 0,
+    maxChoices = 0,
+    defaultSelected = "",
+    checkboxOptions = "",
+    customErrorMessage = "",
+    fieldNote = ""
+  } = attribute.options || attribute;
+  const fieldNoteFromAttribute = attribute.options?.fieldNote || "";
+  const getInitialValues = () => {
+    if (checkboxType === "single") {
+      if (value && Array.isArray(value) && value.length > 0) {
+        return value;
+      } else if (value && typeof value === "string" && value.trim()) {
+        return [value.trim()];
+      } else if (defaultSelected && typeof defaultSelected === "string" && defaultSelected.trim()) {
+        return [defaultSelected.trim()];
+      } else if (defaultSelected && Array.isArray(defaultSelected) && defaultSelected.length > 0) {
+        return defaultSelected;
+      }
+      return [];
+    } else {
+      if (value && Array.isArray(value)) {
+        return value;
+      } else if (value && typeof value === "string") {
+        return value.split(",").map((v) => v.trim()).filter((v) => v);
+      } else if (defaultSelected) {
+        return defaultSelected.split(",").map((v) => v.trim()).filter((v) => v);
+      }
+      return [];
+    }
+  };
+  const [fieldValue, setFieldValue] = react.useState(getInitialValues);
+  const [validationError, setValidationError] = react.useState(null);
+  const [hasInteracted, setHasInteracted] = react.useState(false);
+  const [isInitialized, setIsInitialized] = react.useState(false);
+  const options = checkboxOptions.split("\n").filter((opt) => opt.trim()).map((opt) => {
+    const [value2, label] = opt.split("|");
+    return { value: value2?.trim() || "", label: label?.trim() || value2?.trim() || "" };
+  });
+  react.useEffect(() => {
+    const initialValues = getInitialValues();
+    setFieldValue(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);
+    }
+  }, []);
+  react.useEffect(() => {
+    if (value && Array.isArray(value) && value.length > 0) {
+      setFieldValue(value);
+      const validationResult = validateSelection(value);
+      setValidationError(validationResult);
+    }
+  }, [value]);
+  const validateSelection = (val) => {
+    const values = Array.isArray(val) ? val : [];
+    if (required && values.length === 0) {
+      return customErrorMessage || "This field is required";
+    }
+    if (values.length === 0) {
+      return null;
+    }
+    if (checkboxType === "multiple") {
+      if (minChoices > 0 && values.length < minChoices) {
+        return customErrorMessage || `Please select at least ${minChoices} option${minChoices > 1 ? "s" : ""}`;
+      }
+      if (maxChoices > 0 && values.length > maxChoices) {
+        return customErrorMessage || `Please select at most ${maxChoices} option${maxChoices > 1 ? "s" : ""}`;
+      }
+    }
+    return null;
+  };
+  const handleCheckboxChange = (optionValue, isChecked) => {
+    let newValue;
+    if (checkboxType === "single") {
+      if (isChecked) {
+        newValue = [optionValue];
+      } else {
+        newValue = [];
+      }
+    } else {
+      if (isChecked) {
+        newValue = [...fieldValue, optionValue];
+      } else {
+        newValue = fieldValue.filter((val) => val !== optionValue);
+      }
+    }
+    setFieldValue(newValue);
+    setHasInteracted(true);
+    const error2 = validateSelection(newValue);
+    setValidationError(error2);
+    if (onChange) {
+      onChange({
+        target: {
+          value: newValue,
+          name,
+          id: name
+        }
+      });
+    }
+  };
+  const displayError = error || hasInteracted && validationError;
+  const renderCheckboxes = () => {
+    const checkboxStyle = {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      marginBottom: "8px"
+    };
+    const checkboxInputStyle = {
+      width: "16px",
+      height: "16px",
+      accentColor: "#4945ff",
+      margin: "0",
+      padding: "0",
+      opacity: "1",
+      visibility: "visible",
+      display: "block",
+      position: "relative",
+      zIndex: "1"
+    };
+    const checkboxLabelStyle = {
+      fontSize: "14px",
+      fontFamily: "inherit",
+      cursor: "pointer",
+      userSelect: "none"
+    };
+    if (checkboxType === "single") {
+      if (!options || options.length === 0) {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px", color: "#666", fontStyle: "italic" }, children: formatMessage({
+          id: "advanced-fields.checkbox.options.checkboxOptions.description",
+          defaultMessage: "Define available options for multiple checkboxes (one per line: value|label)"
+        }) });
+      }
+      if (layout === "horizontal") {
+        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { wrap: "wrap", gap: 2, children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: checkboxStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              id: `${name}-${option.value}`,
+              checked: fieldValue.includes(option.value),
+              onChange: (e) => handleCheckboxChange(option.value, e.target.checked),
+              disabled,
+              style: checkboxInputStyle
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              htmlFor: `${name}-${option.value}`,
+              style: checkboxLabelStyle,
+              children: option.label
+            }
+          )
+        ] }, option.value)) });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: checkboxStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            id: `${name}-${option.value}`,
+            checked: fieldValue.includes(option.value),
+            onChange: (e) => handleCheckboxChange(option.value, e.target.checked),
+            disabled,
+            style: checkboxInputStyle
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: `${name}-${option.value}`,
+            style: checkboxLabelStyle,
+            children: option.label
+          }
+        )
+      ] }, option.value)) });
+    }
+    if (!options || options.length === 0) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px", color: "#666", fontStyle: "italic" }, children: formatMessage({
+        id: "advanced-fields.checkbox.options.checkboxOptions.description",
+        defaultMessage: "Define available options for multiple checkboxes (one per line: value|label)"
+      }) });
+    }
+    if (layout === "horizontal") {
+      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { wrap: "wrap", gap: 2, children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: checkboxStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            id: `${name}-${option.value}`,
+            checked: fieldValue.includes(option.value),
+            onChange: (e) => handleCheckboxChange(option.value, e.target.checked),
+            disabled,
+            style: checkboxInputStyle
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: `${name}-${option.value}`,
+            style: checkboxLabelStyle,
+            children: option.label
+          }
+        )
+      ] }, option.value)) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: checkboxStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          id: `${name}-${option.value}`,
+          checked: fieldValue.includes(option.value),
+          onChange: (e) => handleCheckboxChange(option.value, e.target.checked),
+          disabled,
+          style: checkboxInputStyle
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: `${name}-${option.value}`,
+          style: checkboxLabelStyle,
+          children: option.label
+        }
+      )
+    ] }, option.value)) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name, error: displayError, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { children: [
+      intlLabel.id ? formatMessage(intlLabel) : intlLabel.defaultMessage || name,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#d02b20", marginLeft: "4px" }, children: "*" })
+    ] }),
+    renderCheckboxes(),
+    displayError && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, { children: displayError }),
+    description && (description.id || description.defaultMessage) && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { children: description.id ? formatMessage(description) : description.defaultMessage }),
+    (fieldNote || fieldNoteFromAttribute) && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+      fontStyle: "italic",
+      color: "#666",
+      fontSize: "12px",
+      display: "block",
+      marginTop: "4px"
+    }, children: fieldNote || fieldNoteFromAttribute })
+  ] }) });
+};
+exports.default = AdvancedCheckbox;

package/dist/_chunks/index-lJs3vGYF.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactIntl = require("react-intl");
+const designSystem = require("@strapi/design-system");
+require("@strapi/icons");
+const react = require("react");
+const AdvancedInput = ({
+  attribute = {},
+  description = { id: "", defaultMessage: "" },
+  disabled,
+  error,
+  intlLabel = { id: "", defaultMessage: "" },
+  labelAction,
+  name,
+  onChange,
+  required,
+  value
+}) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const [inputValue, setInputValue] = react.useState(value || "");
+  const [validationError, setValidationError] = react.useState(null);
+  const [hasInteracted, setHasInteracted] = react.useState(false);
+  const {
+    minLength = 0,
+    maxLength = 0,
+    min = 0,
+    max = 0,
+    step = 1,
+    rows = 4,
+    options = {}
+  } = attribute;
+  const {
+    placeholder = "",
+    defaultValue = "",
+    customErrorMessage = "",
+    regex = "",
+    fieldNote = ""
+  } = options;
+  const fieldNoteFromAttribute = attribute.options?.fieldNote || "";
+  react.useEffect(() => {
+    const initialValue = value === void 0 ? defaultValue : value;
+    setInputValue(initialValue);
+    if (error) {
+      setValidationError(error);
+    }
+    if (onChange) {
+      onChange({ target: { value: initialValue } });
+    }
+  }, [value, defaultValue, onChange, error]);
+  const validateInput = (val) => {
+    if (required && (!val || val.toString().trim().length === 0)) {
+      return customErrorMessage || "This field is required";
+    }
+    if (!val || val.toString().trim().length === 0) {
+      return null;
+    }
+    const stringValue = val.toString().trim();
+    if (minLength > 0 && stringValue.length < minLength) {
+      return customErrorMessage || `Minimum length is ${minLength} characters`;
+    }
+    if (maxLength > 0 && stringValue.length > maxLength) {
+      return customErrorMessage || `Maximum length is ${maxLength} characters`;
+    }
+    if (regex && stringValue) {
+      try {
+        const regexPattern = new RegExp(regex);
+        if (!regexPattern.test(stringValue)) {
+          return customErrorMessage || "Invalid format";
+        }
+      } catch (e) {
+      }
+    }
+    return null;
+  };
+  const handleChange = (e) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    setHasInteracted(true);
+    const error2 = validateInput(newValue);
+    setValidationError(error2);
+    if (onChange) {
+      onChange(e);
+    }
+  };
+  const displayError = error || hasInteracted && validationError;
+  const renderInput = () => {
+    const commonProps = {
+      name,
+      value: inputValue,
+      onChange: handleChange,
+      disabled,
+      placeholder: placeholder || (intlLabel.id ? formatMessage(intlLabel) : intlLabel.defaultMessage || "")
+    };
+    const inputStyle = {
+      width: "100%",
+      padding: "8px 12px",
+      border: `1px solid ${displayError ? "#d02b20" : "#dcdce4"}`,
+      borderRadius: "4px",
+      fontSize: "14px",
+      fontFamily: "inherit",
+      backgroundColor: disabled ? "#f6f6f9" : "#ffffff"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ...commonProps,
+        type: "text",
+        style: inputStyle
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name, error: displayError, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { children: [
+      intlLabel.id ? formatMessage(intlLabel) : intlLabel.defaultMessage || name,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#d02b20", marginLeft: "4px" }, children: "*" })
+    ] }),
+    renderInput(),
+    displayError && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, { children: displayError }),
+    description && (description.id || description.defaultMessage) && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { children: description.id ? formatMessage(description) : description.defaultMessage }),
+    (fieldNote || fieldNoteFromAttribute) && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+      fontStyle: "italic",
+      color: "#666",
+      fontSize: "12px",
+      display: "block",
+      marginTop: "4px"
+    }, children: fieldNote || fieldNoteFromAttribute })
+  ] }) });
+};
+exports.default = AdvancedInput;