@qwickapps/react-framework 1.5.13 → 1.6.0

package/dist/hooks/useBaseProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBaseProps.d.ts","sourceRoot":"","sources":["../../src/hooks/useBaseProps.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useBaseProps.d.ts","sourceRoot":"","sources":["../../src/hooks/useBaseProps.ts"],"names":[],"mappings":"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"}

package/dist/index.esm.js

@@ -22974,36 +22974,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 +23022,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 +23033,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 +23066,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 +23106,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 +23117,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 +23144,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 +23186,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 +23209,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 +23306,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 +23323,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 +23335,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 +23351,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 +23402,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 +23416,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
 });
 
 /**
@@ -31064,6 +31023,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 +33432,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, 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 };