@qwickapps/react-framework 1.5.13 → 1.7.0

package/dist/index.esm.js

@@ -1272,6 +1272,18 @@ const PaletteAutumn = {
   primaryColor: '#ea580c'
 };
 
+/**
+ * Boutique Palette Configuration
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+const PaletteBoutique = {
+  id: 'boutique',
+  name: 'Boutique',
+  description: 'Sophisticated teal, bronze, and navy - perfect for premium retail and fashion brands',
+  primaryColor: '#3ca6b6'
+};
+
 /**
  * Ocean Palette Configuration
  *
@@ -1325,7 +1337,7 @@ const PaletteCosmic = {
  *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
-const AllPalettes = [PaletteDefault, PaletteOcean, PaletteCosmic, PaletteWinter, PaletteAutumn, PaletteSpring];
+const AllPalettes = [PaletteDefault, PaletteBoutique, PaletteOcean, PaletteCosmic, PaletteWinter, PaletteAutumn, PaletteSpring];
 
 /**
  * Persistence utilities for theme and palette preferences
@@ -18493,6 +18505,20 @@ class ReactNodeTransformer {
  *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
+// Import linkedom for server-side HTML parsing
+let parseHTML = null;
+if (typeof window === 'undefined') {
+  // Server-side: use linkedom
+  try {
+    const {
+      parseHTML: parse
+    } = require('linkedom');
+    parseHTML = html => parse(html).document;
+  } catch (e) {
+    // linkedom not available, will fall back to client-only rendering
+    console.warn('linkedom not available for SSR HTML parsing');
+  }
+}
 /**
  * Registry for component classes that support serialization
  */
@@ -18801,13 +18827,27 @@ let ComponentTransformer$1 = class ComponentTransformer {
   }
   /**
    * Transform HTML string to React nodes using registered patterns
+   * Supports both server-side (linkedom) and client-side (DOMParser) rendering
    * @param html - HTML string to transform
    * @returns Array of React nodes
    */
   static transformHTML(html) {
     if (!html.trim()) return [];
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, 'text/html');
+    let doc;
+    // Server-side: use linkedom if available
+    if (typeof window === 'undefined') {
+      if (parseHTML) {
+        doc = parseHTML(html);
+      } else {
+        // linkedom not available, return empty for client-side rendering
+        console.warn('SSR HTML parsing unavailable - content will render client-side only');
+        return [];
+      }
+    } else {
+      // Client-side: use DOMParser
+      const parser = new DOMParser();
+      doc = parser.parseFromString(html, 'text/html');
+    }
     return Array.from(doc.body.children).map((element, index) => ComponentTransformer.transformElement(element, `element-${index}`));
   }
   /**
@@ -22974,36 +23014,31 @@ function DialogContentText({
   });
 }
 
-const FormField = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    gridProps,
-    styleProps,
-    htmlProps,
-    restProps
-  } = useBaseProps(props);
-  const {
-    label,
-    value,
-    onChange,
-    onChangeRaw,
-    type = 'text',
-    helperText,
-    required = false,
-    readOnly = false,
-    disabled = false,
-    disabledColor,
-    fullWidth = true,
-    multiline = false,
-    rows,
-    placeholder,
-    startAdornment,
-    endAdornment,
-    inputProps
-  } = restProps;
-  // Generate a unique ID for the input field
+/**
+ * FormFieldView - Pure view component that renders the input field
+ */
+function FormFieldView({
+  label,
+  value,
+  onChange,
+  onChangeRaw,
+  type = 'text',
+  helperText,
+  required = false,
+  readOnly = false,
+  disabled = false,
+  disabledColor,
+  fullWidth = true,
+  multiline = false,
+  rows,
+  placeholder,
+  startAdornment,
+  endAdornment,
+  inputProps,
+  ...restProps
+}) {
   const fieldId = React.useId();
   const handleChange = e => {
-    // If onChangeRaw is provided, use it instead
     if (onChangeRaw) {
       onChangeRaw(e);
       return;
@@ -23027,8 +23062,7 @@ const FormField = /*#__PURE__*/React.forwardRef((props, ref) => {
     '& input.Mui-disabled': disabledColor ? {
       color: disabledColor,
       WebkitTextFillColor: disabledColor
-    } : undefined,
-    ...styleProps.sx
+    } : undefined
   };
   const labelStyles = {
     left: -12,
@@ -23039,18 +23073,8 @@ const FormField = /*#__PURE__*/React.forwardRef((props, ref) => {
     color: 'var(--theme-secondary)'
   };
   return jsxs(FormControl, {
-    ref: ref,
     fullWidth: fullWidth,
-    ...htmlProps,
-    ...styleProps,
-    ...(gridProps && {
-      'data-grid-span': gridProps.span,
-      'data-grid-xs': gridProps.xs,
-      'data-grid-sm': gridProps.sm,
-      'data-grid-md': gridProps.md,
-      'data-grid-lg': gridProps.lg,
-      'data-grid-xl': gridProps.xl
-    }),
+    ...restProps,
     children: [jsx(InputLabel, {
       htmlFor: fieldId,
       sx: labelStyles,
@@ -23082,32 +23106,33 @@ const FormField = /*#__PURE__*/React.forwardRef((props, ref) => {
       children: helperText
     })]
   });
-});
-FormField.displayName = 'FormField';
-// Mark as QwickApp component
-Object.assign(FormField, {
-  [QWICKAPP_COMPONENT]: true
+}
+/**
+ * Create FormField component using the factory pattern
+ */
+const FormField = createSerializableView({
+  tagName: 'FormField',
+  version: '1.0.0',
+  role: 'input',
+  View: FormFieldView
 });
 
-const FormSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    gridProps,
-    styleProps,
-    htmlProps,
-    restProps
-  } = useBaseProps(props);
-  const {
-    label,
-    value,
-    onChange,
-    options,
-    helperText,
-    required = false,
-    disabled = false,
-    fullWidth = true,
-    size = 'small',
-    placeholder
-  } = restProps;
+/**
+ * FormSelectView - Pure view component that renders the select field
+ */
+function FormSelectView({
+  label,
+  value,
+  onChange,
+  options,
+  helperText,
+  required = false,
+  disabled = false,
+  fullWidth = true,
+  size = 'small',
+  placeholder,
+  ...restProps
+}) {
   const handleChange = e => {
     onChange(e.target.value);
   };
@@ -23121,8 +23146,7 @@ const FormSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     backgroundColor: 'var(--theme-surface-variant)',
     borderColor: 'var(--theme-surface)',
     color: 'var(--theme-text-primary)',
-    borderRadius: 1,
-    ...styleProps.sx
+    borderRadius: 1
   };
   const labelStyles = {
     left: -12,
@@ -23133,19 +23157,9 @@ const FormSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     color: 'var(--theme-secondary)'
   };
   return jsxs(FormControl, {
-    ref: ref,
     fullWidth: fullWidth,
     size: size,
-    ...htmlProps,
-    ...styleProps,
-    ...(gridProps && {
-      'data-grid-span': gridProps.span,
-      'data-grid-xs': gridProps.xs,
-      'data-grid-sm': gridProps.sm,
-      'data-grid-md': gridProps.md,
-      'data-grid-lg': gridProps.lg,
-      'data-grid-xl': gridProps.xl
-    }),
+    ...restProps,
     children: [label && jsx(InputLabel, {
       sx: labelStyles,
       shrink: true,
@@ -23170,28 +23184,29 @@ const FormSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       children: helperText
     })]
   });
-});
-FormSelect.displayName = 'FormSelect';
-// Mark as QwickApp component
-Object.assign(FormSelect, {
-  [QWICKAPP_COMPONENT]: true
+}
+/**
+ * Create FormSelect component using the factory pattern
+ */
+const FormSelect = createSerializableView({
+  tagName: 'FormSelect',
+  version: '1.0.0',
+  role: 'input',
+  View: FormSelectView
 });
 
-const FormCheckbox = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    gridProps,
-    styleProps,
-    htmlProps,
-    restProps
-  } = useBaseProps(props);
-  const {
-    label,
-    checked,
-    onChange,
-    helperText,
-    required = false,
-    disabled = false
-  } = restProps;
+/**
+ * FormCheckboxView - Pure view component that renders the checkbox
+ */
+function FormCheckboxView({
+  label,
+  checked,
+  onChange,
+  helperText,
+  required = false,
+  disabled = false,
+  ...restProps
+}) {
   const handleChange = e => {
     onChange(e.target.checked);
   };
@@ -23211,25 +23226,14 @@ const FormCheckbox = /*#__PURE__*/React.forwardRef((props, ref) => {
     },
     '& .MuiFormControlLabel-label.Mui-disabled': {
       color: 'var(--theme-text-disabled)'
-    },
-    ...styleProps.sx
+    }
   };
   const helperTextStyles = {
     color: 'var(--theme-secondary)',
-    marginLeft: '32px' // Align with checkbox + label
+    marginLeft: '32px'
   };
   return jsxs(FormControl, {
-    ref: ref,
-    ...htmlProps,
-    ...styleProps,
-    ...(gridProps && {
-      'data-grid-span': gridProps.span,
-      'data-grid-xs': gridProps.xs,
-      'data-grid-sm': gridProps.sm,
-      'data-grid-md': gridProps.md,
-      'data-grid-lg': gridProps.lg,
-      'data-grid-xl': gridProps.xl
-    }),
+    ...restProps,
     children: [jsx(FormControlLabel, {
       control: jsx(Checkbox, {
         checked: checked,
@@ -23245,30 +23249,31 @@ const FormCheckbox = /*#__PURE__*/React.forwardRef((props, ref) => {
       children: helperText
     })]
   });
-});
-FormCheckbox.displayName = 'FormCheckbox';
-// Mark as QwickApp component
-Object.assign(FormCheckbox, {
-  [QWICKAPP_COMPONENT]: true
+}
+/**
+ * Create FormCheckbox component using the factory pattern
+ */
+const FormCheckbox = createSerializableView({
+  tagName: 'FormCheckbox',
+  version: '1.0.0',
+  role: 'input',
+  View: FormCheckboxView
 });
 
-const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    gridProps,
-    styleProps,
-    htmlProps,
-    restProps
-  } = useBaseProps(props);
-  const {
-    provider,
-    siteKey,
-    onVerify,
-    onExpire,
-    onError,
-    theme = 'light',
-    size = 'normal',
-    action = 'submit'
-  } = restProps;
+/**
+ * CaptchaView - Pure view component that renders the CAPTCHA widget
+ */
+function CaptchaView({
+  provider,
+  siteKey,
+  onVerify,
+  onExpire,
+  onError,
+  theme = 'light',
+  size = 'normal',
+  action = 'submit',
+  ...restProps
+}) {
   const containerRef = useRef(null);
   const widgetIdRef = useRef(null);
   const [isLoaded, setIsLoaded] = useState(false);
@@ -23341,7 +23346,7 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
       try {
         switch (provider) {
           case 'recaptcha-v2':
-            if (window.grecaptcha && window.grecaptcha.render) {
+            if (window.grecaptcha?.render) {
               widgetIdRef.current = window.grecaptcha.render(containerRef.current, {
                 sitekey: siteKey,
                 callback: onVerify,
@@ -23358,7 +23363,7 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
             break;
           case 'recaptcha-v3':
             // reCAPTCHA v3 is invisible and executes programmatically
-            if (window.grecaptcha && window.grecaptcha.execute) {
+            if (window.grecaptcha?.execute) {
               window.grecaptcha.execute(siteKey, {
                 action
               }).then(token => {
@@ -23370,7 +23375,7 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
             }
             break;
           case 'hcaptcha':
-            if (window.hcaptcha && window.hcaptcha.render) {
+            if (window.hcaptcha?.render) {
               widgetIdRef.current = window.hcaptcha.render(containerRef.current, {
                 sitekey: siteKey,
                 callback: onVerify,
@@ -23386,7 +23391,7 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
             }
             break;
           case 'turnstile':
-            if (window.turnstile && window.turnstile.render) {
+            if (window.turnstile?.render) {
               widgetIdRef.current = window.turnstile.render(containerRef.current, {
                 sitekey: siteKey,
                 callback: onVerify,
@@ -23437,20 +23442,10 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
     return null;
   }
   return jsxs(Box, {
-    ref: ref,
-    ...htmlProps,
+    ...restProps,
     sx: {
-      my: 2,
-      ...styleProps.sx
+      my: 2
     },
-    ...(gridProps && {
-      'data-grid-span': gridProps.span,
-      'data-grid-xs': gridProps.xs,
-      'data-grid-sm': gridProps.sm,
-      'data-grid-md': gridProps.md,
-      'data-grid-lg': gridProps.lg,
-      'data-grid-xl': gridProps.xl
-    }),
     children: [error && jsx(Alert, {
       severity: "error",
       sx: {
@@ -23461,11 +23456,15 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
       ref: containerRef
     })]
   });
-});
-Captcha.displayName = 'Captcha';
-// Mark as QwickApp component
-Object.assign(Captcha, {
-  [QWICKAPP_COMPONENT]: true
+}
+/**
+ * Create Captcha component using the factory pattern
+ */
+const Captcha = createSerializableView({
+  tagName: 'Captcha',
+  version: '1.0.0',
+  role: 'input',
+  View: CaptchaView
 });
 
 /**
@@ -24593,7 +24592,7 @@ const Scaffold = ({
           className: "appbar-right",
           children: [enhancedAppBar?.actions && jsx("div", {
             className: "appbar-actions",
-            children: enhancedAppBar.actions
+            children: typeof enhancedAppBar.actions === 'function' ? enhancedAppBar.actions() : enhancedAppBar.actions
           }, "appbar-actions"), jsxs("div", {
             className: "appbar-theme-controls",
             children: [showThemeSwitcher && jsx(ThemeSwitcher, {}, "theme-switcher"), showPaletteSwitcher && jsx(PaletteSwitcher, {}, "palette-switcher")]
@@ -31064,6 +31063,240 @@ __decorate([Field(), Editor({
 }), IsOptional(), IsString(), __metadata("design:type", String)], FormBlockModel.prototype, "backgroundImage", void 0);
 FormBlockModel = __decorate([Schema('FormBlock', '1.0.0')], FormBlockModel);
 
+/**
+ * Schema for FormSelect component - Themed dropdown select input
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+let FormSelectModel = class FormSelectModel extends ViewSchema$1 {};
+__decorate([Field(), Editor({
+  field_type: FieldType.TEXT,
+  label: 'Label',
+  description: 'Label text for the select field',
+  placeholder: 'Enter label...'
+}), IsOptional(), IsString(), __metadata("design:type", String)], FormSelectModel.prototype, "label", void 0);
+__decorate([Field(), Editor({
+  field_type: FieldType.TEXT,
+  label: 'Value',
+  description: 'Current selected value',
+  placeholder: ''
+}), IsString(), __metadata("design:type", Object)], FormSelectModel.prototype, "value", void 0);
+__decorate([Field(), Editor({
+  field_type: FieldType.TEXTAREA,
+  label: 'Options',
+  description: 'Select options as JSON array: [{"value": "1", "label": "Option 1"}]',
+  placeholder: '[{"value": "1", "label": "Option 1"}]'
+}), IsString(), __metadata("design:type", String)], FormSelectModel.prototype, "options", void 0);
+__decorate([Field(), Editor({
+  field_type: FieldType.TEXT,
+  label: 'Helper Text',
+  description: 'Helper text displayed below the select',
+  placeholder: 'Enter helper text...'
+}), IsOptional(), IsString(), __metadata("design:type", String)], FormSelectModel.prototype, "helperText", void 0);
+__decorate([Field({
+  defaultValue: false
+}), Editor({
+  field_type: FieldType.BOOLEAN,
+  label: 'Required',
+  description: 'Mark field as required'
+}), IsOptional(), IsBoolean(), __metadata("design:type", Boolean)], FormSelectModel.prototype, "required", void 0);
+__decorate([Field({
+  defaultValue: false
+}), Editor({
+  field_type: FieldType.BOOLEAN,
+  label: 'Disabled',
+  description: 'Disable the select field'
+}), IsOptional(), IsBoolean(), __metadata("design:type", Boolean)], FormSelectModel.prototype, "disabled", void 0);
+__decorate([Field({
+  defaultValue: true
+}), Editor({
+  field_type: FieldType.BOOLEAN,
+  label: 'Full Width',
+  description: 'Make select take full width of container'
+}), IsOptional(), IsBoolean(), __metadata("design:type", Boolean)], FormSelectModel.prototype, "fullWidth", void 0);
+__decorate([Field({
+  defaultValue: 'small'
+}), Editor({
+  field_type: FieldType.SELECT,
+  label: 'Size',
+  description: 'Size variant of the select field'
+}), IsOptional(), IsIn(['small', 'medium']), __metadata("design:type", String)], FormSelectModel.prototype, "size", void 0);
+__decorate([Field(), Editor({
+  field_type: FieldType.TEXT,
+  label: 'Placeholder',
+  description: 'Placeholder text when no value is selected',
+  placeholder: 'Select an option...'
+}), IsOptional(), IsString(), __metadata("design:type", String)], FormSelectModel.prototype, "placeholder", void 0);
+FormSelectModel = __decorate([Schema('FormSelect', '1.0.0')], FormSelectModel);
+
+/**
+ * Schema for FormField component - Themed text/number input field
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+let FormFieldModel = class FormFieldModel extends ViewSchema$1 {};
+__decorate([Field(), Editor({
+  field_type: FieldType.TEXT,
+  label: 'Label',
+  description: 'Label text for the input field',
+  placeholder: 'Enter label...'
+}), IsString(), __metadata("design:type", String)], FormFieldModel.prototype, "label", void 0);
+__decorate([Field(), Editor({
+  field_type: FieldType.TEXT,
+  label: 'Value',
+  description: 'Current input value',
+  placeholder: ''
+}), IsString(), __metadata("design:type", Object)], FormFieldModel.prototype, "value", void 0);
+__decorate([Field({
+  defaultValue: 'text'
+}), Editor({
+  field_type: FieldType.SELECT,
+  label: 'Input Type',
+  description: 'Type of input field'
+}), IsOptional(), IsIn(['text', 'number', 'password', 'email', 'tel']), __metadata("design:type", String)], FormFieldModel.prototype, "type", void 0);
+__decorate([Field(), Editor({
+  field_type: FieldType.TEXT,
+  label: 'Helper Text',
+  description: 'Helper text displayed below the input',
+  placeholder: 'Enter helper text...'
+}), IsOptional(), IsString(), __metadata("design:type", String)], FormFieldModel.prototype, "helperText", void 0);
+__decorate([Field({
+  defaultValue: false
+}), Editor({
+  field_type: FieldType.BOOLEAN,
+  label: 'Required',
+  description: 'Mark field as required'
+}), IsOptional(), IsBoolean(), __metadata("design:type", Boolean)], FormFieldModel.prototype, "required", void 0);
+__decorate([Field({
+  defaultValue: false
+}), Editor({
+  field_type: FieldType.BOOLEAN,
+  label: 'Read Only',
+  description: 'Make field read-only'
+}), IsOptional(), IsBoolean(), __metadata("design:type", Boolean)], FormFieldModel.prototype, "readOnly", void 0);
+__decorate([Field({
+  defaultValue: false
+}), Editor({
+  field_type: FieldType.BOOLEAN,
+  label: 'Disabled',
+  description: 'Disable the input field'
+}), IsOptional(), IsBoolean(), __metadata("design:type", Boolean)], FormFieldModel.prototype, "disabled", void 0);
+__decorate([Field(), Editor({
+  field_type: FieldType.TEXT,
+  label: 'Disabled Color',
+  description: 'Custom color for disabled state (CSS color value)',
+  placeholder: 'var(--theme-text-disabled)'
+}), IsOptional(), IsString(), __metadata("design:type", String)], FormFieldModel.prototype, "disabledColor", void 0);
+__decorate([Field({
+  defaultValue: true
+}), Editor({
+  field_type: FieldType.BOOLEAN,
+  label: 'Full Width',
+  description: 'Make input take full width of container'
+}), IsOptional(), IsBoolean(), __metadata("design:type", Boolean)], FormFieldModel.prototype, "fullWidth", void 0);
+__decorate([Field({
+  defaultValue: false
+}), Editor({
+  field_type: FieldType.BOOLEAN,
+  label: 'Multiline',
+  description: 'Enable multiline textarea mode'
+}), IsOptional(), IsBoolean(), __metadata("design:type", Boolean)], FormFieldModel.prototype, "multiline", void 0);
+__decorate([Field(), Editor({
+  field_type: FieldType.TEXT,
+  label: 'Rows',
+  description: 'Number of rows for multiline textarea',
+  placeholder: '4'
+}), IsOptional(), IsInt(), Min(1), __metadata("design:type", Number)], FormFieldModel.prototype, "rows", void 0);
+__decorate([Field(), Editor({
+  field_type: FieldType.TEXT,
+  label: 'Placeholder',
+  description: 'Placeholder text',
+  placeholder: 'Enter text...'
+}), IsOptional(), IsString(), __metadata("design:type", String)], FormFieldModel.prototype, "placeholder", void 0);
+FormFieldModel = __decorate([Schema('FormField', '1.0.0')], FormFieldModel);
+
+/**
+ * Schema for FormCheckbox component - Themed checkbox input
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+let FormCheckboxModel = class FormCheckboxModel extends ViewSchema$1 {};
+__decorate([Field(), Editor({
+  field_type: FieldType.TEXT,
+  label: 'Label',
+  description: 'Label text for the checkbox',
+  placeholder: 'Enter label...'
+}), IsString(), __metadata("design:type", String)], FormCheckboxModel.prototype, "label", void 0);
+__decorate([Field({
+  defaultValue: false
+}), Editor({
+  field_type: FieldType.BOOLEAN,
+  label: 'Checked',
+  description: 'Checkbox checked state'
+}), IsBoolean(), __metadata("design:type", Boolean)], FormCheckboxModel.prototype, "checked", void 0);
+__decorate([Field(), Editor({
+  field_type: FieldType.TEXT,
+  label: 'Helper Text',
+  description: 'Helper text displayed below the checkbox',
+  placeholder: 'Enter helper text...'
+}), IsOptional(), IsString(), __metadata("design:type", String)], FormCheckboxModel.prototype, "helperText", void 0);
+__decorate([Field({
+  defaultValue: false
+}), Editor({
+  field_type: FieldType.BOOLEAN,
+  label: 'Required',
+  description: 'Mark checkbox as required'
+}), IsOptional(), IsBoolean(), __metadata("design:type", Boolean)], FormCheckboxModel.prototype, "required", void 0);
+__decorate([Field({
+  defaultValue: false
+}), Editor({
+  field_type: FieldType.BOOLEAN,
+  label: 'Disabled',
+  description: 'Disable the checkbox'
+}), IsOptional(), IsBoolean(), __metadata("design:type", Boolean)], FormCheckboxModel.prototype, "disabled", void 0);
+FormCheckboxModel = __decorate([Schema('FormCheckbox', '1.0.0')], FormCheckboxModel);
+
+/**
+ * Schema for Captcha component - Universal CAPTCHA widget
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+let CaptchaModel = class CaptchaModel extends ViewSchema$1 {};
+__decorate([Field(), Editor({
+  field_type: FieldType.SELECT,
+  label: 'CAPTCHA Provider',
+  description: 'Which CAPTCHA service to use'
+}), IsIn(['recaptcha-v2', 'recaptcha-v3', 'hcaptcha', 'turnstile']), __metadata("design:type", String)], CaptchaModel.prototype, "provider", void 0);
+__decorate([Field(), Editor({
+  field_type: FieldType.TEXT,
+  label: 'Site Key',
+  description: 'Public site key from CAPTCHA provider',
+  placeholder: 'Enter site key...'
+}), IsString(), __metadata("design:type", String)], CaptchaModel.prototype, "siteKey", void 0);
+__decorate([Field({
+  defaultValue: 'light'
+}), Editor({
+  field_type: FieldType.SELECT,
+  label: 'Theme',
+  description: 'CAPTCHA widget theme'
+}), IsOptional(), IsIn(['light', 'dark']), __metadata("design:type", String)], CaptchaModel.prototype, "theme", void 0);
+__decorate([Field({
+  defaultValue: 'normal'
+}), Editor({
+  field_type: FieldType.SELECT,
+  label: 'Size',
+  description: 'CAPTCHA widget size'
+}), IsOptional(), IsIn(['normal', 'compact', 'invisible']), __metadata("design:type", String)], CaptchaModel.prototype, "size", void 0);
+__decorate([Field({
+  defaultValue: 'submit'
+}), Editor({
+  field_type: FieldType.TEXT,
+  label: 'Action',
+  description: 'reCAPTCHA v3 action name',
+  placeholder: 'submit'
+}), IsOptional(), IsString(), __metadata("design:type", String)], CaptchaModel.prototype, "action", void 0);
+CaptchaModel = __decorate([Schema('Captcha', '1.0.0')], CaptchaModel);
+
 /**
  * FooterSection Schema - Defines data structure for footer sections
  *
@@ -33239,4 +33472,4 @@ __decorate([Field({
 }), IsOptional(), __metadata("design:type", Boolean)], PageTemplateSchema.prototype, "indexable", void 0);
 PageTemplateSchema = __decorate([Schema('PageTemplate', '1.0.0')], PageTemplateSchema);
 
-export { AVAILABLE_PALETTES, AccessibilityProvider, ActionModel, ActionType, AllPalettes, AppConfig, AppConfigBuilder, Article, ArticleModel, Breadcrumbs, Button, Captcha, CardListGrid, CardListGridModel, ChoiceInputField, ChoiceInputFieldModel, Code, CodeModel, CollapsibleLayout, CollapsibleLayoutView, ComponentTransformer$1 as ComponentTransformer, Container$8 as Container, Content, ContentModel, CoverImageHeader, CoverImageHeaderModel, DataProvider, DataProxy, DataTable, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, DimensionsProvider, ErrorBoundary, FeatureCard, FeatureCardActionModel, FeatureCardModel, FeatureGrid, FeatureGridModel, FeatureItemModel, Footer, FooterItemModel, FooterModel, FooterSectionModel, FormBlock, FormBlockModel, FormCheckbox, FormField, FormMethod, FormPage, FormSelect, GalleryImageModel, GridCell, GridCellModel, GridLayout, GridLayoutModel, HeaderActionModel, HeroBlock, HeroBlockModel, Html, HtmlInputField, HtmlModel, Image, ImageGallery, ImageGalleryModel, ImageModel, Logo, Markdown, MarkdownModel, MetadataItemModel, ModelView, NavigationProvider, OptionSelector, OptionSelectorModel, Page, PageBannerHeader, PageBannerHeaderModel, PageTemplateSchema, PaletteAutumn, PaletteCosmic, PaletteDefault, PaletteOcean, PaletteProvider, PaletteSpring, PaletteSwitcher, PaletteSwitcherModel, PaletteWinter, PrintConfigSchema, PrintModeProvider, ProductCard, ProductCardActionModel, ProductCardModel, ProductLogo, ProductModel, QWICKAPP_COMPONENT, QwickApp, QwickAppsLogo, QwickIcon, ResponsiveMenu, SafeSpan, SafeSpanModel, Scaffold, SchemaFormRenderer, Section, SectionModel, SelectInputField, SelectOptionModel, StatCard, SwitchInputField, T, Text$1 as Text, TextField, TextInputField, TextInputFieldModel, TextModel, ThemeProvider, ThemeSwitcher, ThemeSwitcherModel, ViewSchema, animationConfigs, applyCustomPalette, clearManifestCache, clearPaletteCache, clearUserPalettePreference, clearUserThemePreference, configurePaletteLoader, createAppConfig, createModelViewClass, createPaletteFromCurrentTheme, createSerializableView, defaultCollapsibleLayoutProps, deleteCustomPalette, exportPalette, extractTextFromReactNode, getAvailablePalettes, getCSSVariable, getComputedTheme, getCurrentPalette, getCurrentTheme, getCustomPalettes, getIconComponent, getIconEmoji, getLogger, getPaletteConfig, getPaletteFromManifest, getPaletteName, getRegisteredIcons, getSystemTheme, getThemePerformanceStats, hasIcon, iconMap, importPalette, initializePalette, initializeTheme, isCollapsibleLayoutProps, isPaletteLoaded, loadPalette, loadPaletteManifest, loadUserPalettePreference, loadUserThemePreference, logThemePerformanceStats, loggers, preloadPalettes, registerCustomPalette, registerIcon, resetThemePerformanceStats, resolveDimension, resolveDimensions, resolveSpacing, resolveSpacingProps, saveCustomPalette, savePalettePreference, saveThemePreference, saveUserPalettePreference, saveUserThemePreference, setCSSVariable, setPalette, setTheme, spacingConfigs, t, toCssLength, useAccessibility, useBaseProps, useBreadcrumbs, useCollapsibleState, useData, useDataBinding, useDataContext, useDataProvider, useDimensions, useNavigation, usePageContext, usePalette, usePrintMode$1 as usePrintMode, usePrintMode as usePrintModeHook, useQwickApp, useResolveTemplate, useTemplate, useTheme, withAccessibility, withErrorBoundary };
+export { AVAILABLE_PALETTES, AccessibilityProvider, ActionModel, ActionType, AllPalettes, AppConfig, AppConfigBuilder, Article, ArticleModel, Breadcrumbs, Button, Captcha, CaptchaModel, CardListGrid, CardListGridModel, ChoiceInputField, ChoiceInputFieldModel, Code, CodeModel, CollapsibleLayout, CollapsibleLayoutView, ComponentTransformer$1 as ComponentTransformer, Container$8 as Container, Content, ContentModel, CoverImageHeader, CoverImageHeaderModel, DataProvider, DataProxy, DataTable, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, DimensionsProvider, ErrorBoundary, FeatureCard, FeatureCardActionModel, FeatureCardModel, FeatureGrid, FeatureGridModel, FeatureItemModel, Footer, FooterItemModel, FooterModel, FooterSectionModel, FormBlock, FormBlockModel, FormCheckbox, FormCheckboxModel, FormField, FormFieldModel, FormMethod, FormPage, FormSelect, FormSelectModel, GalleryImageModel, GridCell, GridCellModel, GridLayout, GridLayoutModel, HeaderActionModel, HeroBlock, HeroBlockModel, Html, HtmlInputField, HtmlModel, Image, ImageGallery, ImageGalleryModel, ImageModel, Logo, Markdown, MarkdownModel, MetadataItemModel, ModelView, NavigationProvider, OptionSelector, OptionSelectorModel, Page, PageBannerHeader, PageBannerHeaderModel, PageTemplateSchema, PaletteAutumn, PaletteBoutique, PaletteCosmic, PaletteDefault, PaletteOcean, PaletteProvider, PaletteSpring, PaletteSwitcher, PaletteSwitcherModel, PaletteWinter, PrintConfigSchema, PrintModeProvider, ProductCard, ProductCardActionModel, ProductCardModel, ProductLogo, ProductModel, QWICKAPP_COMPONENT, QwickApp, QwickAppsLogo, QwickIcon, ResponsiveMenu, SafeSpan, SafeSpanModel, Scaffold, SchemaFormRenderer, Section, SectionModel, SelectInputField, SelectOptionModel, StatCard, SwitchInputField, T, Text$1 as Text, TextField, TextInputField, TextInputFieldModel, TextModel, ThemeProvider, ThemeSwitcher, ThemeSwitcherModel, ViewSchema, animationConfigs, applyCustomPalette, clearManifestCache, clearPaletteCache, clearUserPalettePreference, clearUserThemePreference, configurePaletteLoader, createAppConfig, createModelViewClass, createPaletteFromCurrentTheme, createSerializableView, defaultCollapsibleLayoutProps, deleteCustomPalette, exportPalette, extractTextFromReactNode, getAvailablePalettes, getCSSVariable, getComputedTheme, getCurrentPalette, getCurrentTheme, getCustomPalettes, getIconComponent, getIconEmoji, getLogger, getPaletteConfig, getPaletteFromManifest, getPaletteName, getRegisteredIcons, getSystemTheme, getThemePerformanceStats, hasIcon, iconMap, importPalette, initializePalette, initializeTheme, isCollapsibleLayoutProps, isPaletteLoaded, loadPalette, loadPaletteManifest, loadUserPalettePreference, loadUserThemePreference, logThemePerformanceStats, loggers, preloadPalettes, registerCustomPalette, registerIcon, resetThemePerformanceStats, resolveDimension, resolveDimensions, resolveSpacing, resolveSpacingProps, saveCustomPalette, savePalettePreference, saveThemePreference, saveUserPalettePreference, saveUserThemePreference, setCSSVariable, setPalette, setTheme, spacingConfigs, t, toCssLength, useAccessibility, useBaseProps, useBreadcrumbs, useCollapsibleState, useData, useDataBinding, useDataContext, useDataProvider, useDimensions, useNavigation, usePageContext, usePalette, usePrintMode$1 as usePrintMode, usePrintMode as usePrintModeHook, useQwickApp, useResolveTemplate, useTemplate, useTheme, withAccessibility, withErrorBoundary };