@axdspub/axiom-ui-forms 0.1.2 → 0.1.3

package/library/index.js

@@ -1,5 +1,5 @@
-import * as React__default from 'react';
-import React__default__default, { forwardRef, createElement, useRef, useCallback, useEffect, useState, useMemo, createContext, useContext, Fragment, Children, isValidElement, cloneElement, useLayoutEffect, useReducer, Component } from 'react';
+import * as React from 'react';
+import React__default, { forwardRef, createElement, useRef, useCallback, useEffect, useState, useMemo, createContext, useContext, Fragment, Children, isValidElement, cloneElement, useLayoutEffect, useReducer, Component } from 'react';
 import * as ReactDOM__default from 'react-dom';
 import ReactDOM__default__default, { flushSync } from 'react-dom';
 import { jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
@@ -127,14 +127,14 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 var FieldLabelText = function (field) {
-    return (React__default__default.createElement("strong", null,
+    return (React__default.createElement("strong", null,
         field.label,
         " ",
-        field.required === true ? React__default__default.createElement("span", { className: 'text-red-500' }, "*") : ''));
+        field.required === true ? React__default.createElement("span", { className: 'text-red-500' }, "*") : ''));
 };
 var FieldLabel = function (field) {
-    return React__default__default.createElement("p", { className: 'pb-2' },
-        React__default__default.createElement(FieldLabelText, __assign$1({}, field)));
+    return React__default.createElement("p", { className: 'pb-2' },
+        React__default.createElement(FieldLabelText, __assign$1({}, field)));
 };
 
 var global$2 = (typeof global !== "undefined" ? global :
@@ -2886,9 +2886,9 @@ function Button(_a) {
         size: size,
         type: type
     });
-    return (React__default__default.createElement(React__default__default.Fragment, null, href !== undefined
-        ? React__default__default.createElement("a", { href: href, target: target, className: cn, "aria-disabled": disabled }, children !== undefined ? children : label)
-        : React__default__default.createElement("button", { className: cn, disabled: disabled, onClick: _onClick }, children !== undefined ? children : label)));
+    return (React__default.createElement(React__default.Fragment, null, href !== undefined
+        ? React__default.createElement("a", { href: href, target: target, className: cn, "aria-disabled": disabled }, children !== undefined ? children : label)
+        : React__default.createElement("button", { className: cn, disabled: disabled, onClick: _onClick }, children !== undefined ? children : label)));
 }
 
 /** @class */ ((function (_super) {
@@ -2917,8 +2917,8 @@ function Button(_a) {
     ErrorBoundary.prototype.render = function () {
         if (this.state.hasError) {
             return this.props.FallbackComponent !== undefined && this.state.error !== undefined
-                ? React__default__default.createElement(this.props.FallbackComponent, { error: this.state.error })
-                : React__default__default.createElement("h1", null, "There was an error");
+                ? React__default.createElement(this.props.FallbackComponent, { error: this.state.error })
+                : React__default.createElement("h1", null, "There was an error");
         }
         return this.props.children;
     };
@@ -2948,7 +2948,7 @@ function Checkbox(_a) {
         }
     };
     var CheckboxInput = function () {
-        return (React__default__default.createElement("input", { "data-testid": testId, type: "checkbox", className: makeClassName({
+        return (React__default.createElement("input", { "data-testid": testId, type: "checkbox", className: makeClassName({
                 defaultClassName: defaultClassName,
                 className: className,
                 error: error,
@@ -2956,30 +2956,30 @@ function Checkbox(_a) {
             }), onChange: onInputChange, checked: !!v, disabled: disabled }));
     };
     var CheckboxContent = function () {
-        return (React__default__default.createElement(React__default__default.Fragment, null,
+        return (React__default.createElement(React__default.Fragment, null,
             before !== undefined ? before : '',
-            align !== 'right' ? React__default__default.createElement(CheckboxInput, null) : '',
+            align !== 'right' ? React__default.createElement(CheckboxInput, null) : '',
             label !== undefined ? label : '',
-            align === 'right' ? React__default__default.createElement(CheckboxInput, null) : '',
+            align === 'right' ? React__default.createElement(CheckboxInput, null) : '',
             after !== undefined ? after : ''));
     };
-    return (React__default__default.createElement(React__default__default.Fragment, null, label !== undefined || after !== undefined || before !== undefined
-        ? React__default__default.createElement("label", { className: makeClassName({
+    return (React__default.createElement(React__default.Fragment, null, label !== undefined || after !== undefined || before !== undefined
+        ? React__default.createElement("label", { className: makeClassName({
                 defaultClassName: defaultWrapperClassName,
                 className: wrapperClassName
             }) },
-            React__default__default.createElement(CheckboxContent, null))
-        : React__default__default.createElement(CheckboxContent, null)));
+            React__default.createElement(CheckboxContent, null))
+        : React__default.createElement(CheckboxContent, null)));
 }
 
 function Label(_a) {
     var label = _a.label, children = _a.children, _b = _a.defaultClassName, defaultClassName = _b === void 0 ? 'block mb-2' : _b, className = _a.className;
-    return (React__default__default.createElement(React__default__default.Fragment, null, label !== undefined ? React__default__default.createElement("span", { className: makeClassName({ defaultClassName: defaultClassName, className: className }) }, children !== undefined ? children : label) : ''));
+    return (React__default.createElement(React__default.Fragment, null, label !== undefined ? React__default.createElement("span", { className: makeClassName({ defaultClassName: defaultClassName, className: className }) }, children !== undefined ? children : label) : ''));
 }
 
 function Description(_a) {
     var description = _a.description, _b = _a.defaultClassName, defaultClassName = _b === void 0 ? 'block text-xs mb-2 mt-2' : _b, className = _a.className;
-    return (React__default__default.createElement(React__default__default.Fragment, null, description !== undefined ? React__default__default.createElement("span", { className: makeClassName({ defaultClassName: defaultClassName, className: className }) }, description) : ''));
+    return (React__default.createElement(React__default.Fragment, null, description !== undefined ? React__default.createElement("span", { className: makeClassName({ defaultClassName: defaultClassName, className: className }) }, description) : ''));
 }
 
 function _extends() {
@@ -3298,9 +3298,9 @@ function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
     });
     const CollectionProvider = (props)=>{
         const { scope: scope , children: children  } = props;
-        const ref = React__default__default.useRef(null);
-        const itemMap = React__default__default.useRef(new Map()).current;
-        return /*#__PURE__*/ React__default__default.createElement(CollectionProviderImpl, {
+        const ref = React__default.useRef(null);
+        const itemMap = React__default.useRef(new Map()).current;
+        return /*#__PURE__*/ React__default.createElement(CollectionProviderImpl, {
             scope: scope,
             itemMap: itemMap,
             collectionRef: ref
@@ -3309,11 +3309,11 @@ function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
     /* -----------------------------------------------------------------------------------------------
    * CollectionSlot
    * ---------------------------------------------------------------------------------------------*/ const COLLECTION_SLOT_NAME = name + 'CollectionSlot';
-    const CollectionSlot = /*#__PURE__*/ React__default__default.forwardRef((props, forwardedRef)=>{
+    const CollectionSlot = /*#__PURE__*/ React__default.forwardRef((props, forwardedRef)=>{
         const { scope: scope , children: children  } = props;
         const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
         const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, context.collectionRef);
-        return /*#__PURE__*/ React__default__default.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360, {
+        return /*#__PURE__*/ React__default.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360, {
             ref: composedRefs
         }, children);
     });
@@ -3321,12 +3321,12 @@ function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
    * CollectionItem
    * ---------------------------------------------------------------------------------------------*/ const ITEM_SLOT_NAME = name + 'CollectionItemSlot';
     const ITEM_DATA_ATTR = 'data-radix-collection-item';
-    const CollectionItemSlot = /*#__PURE__*/ React__default__default.forwardRef((props, forwardedRef)=>{
+    const CollectionItemSlot = /*#__PURE__*/ React__default.forwardRef((props, forwardedRef)=>{
         const { scope: scope , children: children , ...itemData } = props;
-        const ref = React__default__default.useRef(null);
+        const ref = React__default.useRef(null);
         const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
         const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-        React__default__default.useEffect(()=>{
+        React__default.useEffect(()=>{
             context.itemMap.set(ref, {
                 ref: ref,
                 ...itemData
@@ -3334,7 +3334,7 @@ function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
             return ()=>void context.itemMap.delete(ref)
             ;
         });
-        return /*#__PURE__*/ React__default__default.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360, {
+        return /*#__PURE__*/ React__default.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360, {
             [ITEM_DATA_ATTR]: '',
             ref: composedRefs
         }, children);
@@ -3343,7 +3343,7 @@ function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
    * useCollection
    * ---------------------------------------------------------------------------------------------*/ function useCollection(scope) {
         const context = useCollectionContext(name + 'CollectionConsumer', scope);
-        const getItems = React__default__default.useCallback(()=>{
+        const getItems = React__default.useCallback(()=>{
             const collectionNode = context.collectionRef.current;
             if (!collectionNode) return [];
             const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
@@ -3376,11 +3376,11 @@ function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
  * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
  */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? useLayoutEffect : ()=>{};
 
-const $1746a345f3d73bb7$var$useReactId = React__default['useId'.toString()] || (()=>undefined
+const $1746a345f3d73bb7$var$useReactId = React['useId'.toString()] || (()=>undefined
 );
 let $1746a345f3d73bb7$var$count = 0;
 function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
-    const [id, setId] = React__default.useState($1746a345f3d73bb7$var$useReactId()); // React versions older than 18 will have client-side ids only.
+    const [id, setId] = React.useState($1746a345f3d73bb7$var$useReactId()); // React versions older than 18 will have client-side ids only.
     $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
         setId((reactId)=>reactId !== null && reactId !== void 0 ? reactId : String($1746a345f3d73bb7$var$count++)
         );
@@ -4139,21 +4139,21 @@ function RadixRadioGroup(_a) {
     useEffect(function () {
         setVal(value);
     }, [value]);
-    return (React__default__default.createElement("div", null,
+    return (React__default.createElement("div", null,
         before !== undefined ? before : '',
         typeof label === 'string'
-            ? React__default__default.createElement(Label, { label: label })
+            ? React__default.createElement(Label, { label: label })
             : label !== undefined ? label : '',
         typeof description === 'string'
-            ? React__default__default.createElement(Description, { description: description })
+            ? React__default.createElement(Description, { description: description })
             : description !== undefined ? description : '',
-        React__default__default.createElement("div", { className: "flex gap-2" },
-            React__default__default.createElement($f99a8c78507165f7$export$be92b6f5f03c0fe9, { className: "".concat(makeClassName({ defaultClassName: defaultClassName, className: className })), "aria-label": 'Select from options', onValueChange: onSelectChange, defaultValue: value, value: val }, options.map(function (option) {
+        React__default.createElement("div", { className: "flex gap-2" },
+            React__default.createElement($f99a8c78507165f7$export$be92b6f5f03c0fe9, { className: "".concat(makeClassName({ defaultClassName: defaultClassName, className: className })), "aria-label": 'Select from options', onValueChange: onSelectChange, defaultValue: value, value: val }, options.map(function (option) {
                 var optionId = "".concat(option.value, ".").concat(instanceId);
-                return (React__default__default.createElement("div", { className: "flex items-center", key: option.value },
-                    React__default__default.createElement($f99a8c78507165f7$export$6d08773d2e66f8f2, { className: defaultSelectorStyle, id: optionId, value: option.value },
-                        React__default__default.createElement($f99a8c78507165f7$export$adb584737d712b70, { className: defaultSelectedStyle })),
-                    React__default__default.createElement("label", { className: defaultLabelStyle, htmlFor: optionId }, option.label)));
+                return (React__default.createElement("div", { className: "flex items-center", key: option.value },
+                    React__default.createElement($f99a8c78507165f7$export$6d08773d2e66f8f2, { className: defaultSelectorStyle, id: optionId, value: option.value },
+                        React__default.createElement($f99a8c78507165f7$export$adb584737d712b70, { className: defaultSelectedStyle })),
+                    React__default.createElement("label", { className: defaultLabelStyle, htmlFor: optionId }, option.label)));
             }))),
         after !== undefined ? after : ''));
 }
@@ -4178,19 +4178,19 @@ function Input(_a) {
             onChange(newV);
         }
     };
-    return (React__default__default.createElement(React__default__default.Fragment, null,
-        React__default__default.createElement("label", { className: makeClassName({
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("label", { className: makeClassName({
                 defaultClassName: defaultWrapperClassName,
                 className: wrapperClassName
             }) },
             typeof label === 'string'
-                ? React__default__default.createElement(Label, { label: label })
+                ? React__default.createElement(Label, { label: label })
                 : label !== undefined ? label : '',
             typeof description === 'string'
-                ? React__default__default.createElement(Description, { description: description })
+                ? React__default.createElement(Description, { description: description })
                 : description !== undefined ? description : '',
             before !== undefined ? before : '',
-            React__default__default.createElement("input", __assign({ autoFocus: autofocus, className: makeClassName({ defaultClassName: defaultClassName, size: size, className: className, error: error, errorClassName: 'border-2 border-rose-600' }), placeholder: placeholder, onChange: onInputChange, "data-testid": testId, disabled: disabled, onKeyUp: function (e) {
+            React__default.createElement("input", __assign({ autoFocus: autofocus, className: makeClassName({ defaultClassName: defaultClassName, size: size, className: className, error: error, errorClassName: 'border-2 border-rose-600' }), placeholder: placeholder, onChange: onInputChange, "data-testid": testId, disabled: disabled, onKeyUp: function (e) {
                     if (typeof onSubmit === 'function' && e.key === 'Enter') {
                         onSubmit(v);
                     }
@@ -6142,7 +6142,7 @@ function roundByDPR(element, value) {
 }
 
 function useLatestRef(value) {
-  const ref = React__default.useRef(value);
+  const ref = React.useRef(value);
   index(() => {
     ref.current = value;
   });
@@ -6170,7 +6170,7 @@ function useFloating(options) {
     whileElementsMounted,
     open
   } = options;
-  const [data, setData] = React__default.useState({
+  const [data, setData] = React.useState({
     x: 0,
     y: 0,
     strategy,
@@ -6178,19 +6178,19 @@ function useFloating(options) {
     middlewareData: {},
     isPositioned: false
   });
-  const [latestMiddleware, setLatestMiddleware] = React__default.useState(middleware);
+  const [latestMiddleware, setLatestMiddleware] = React.useState(middleware);
   if (!deepEqual$1(latestMiddleware, middleware)) {
     setLatestMiddleware(middleware);
   }
-  const [_reference, _setReference] = React__default.useState(null);
-  const [_floating, _setFloating] = React__default.useState(null);
-  const setReference = React__default.useCallback(node => {
+  const [_reference, _setReference] = React.useState(null);
+  const [_floating, _setFloating] = React.useState(null);
+  const setReference = React.useCallback(node => {
     if (node != referenceRef.current) {
       referenceRef.current = node;
       _setReference(node);
     }
   }, [_setReference]);
-  const setFloating = React__default.useCallback(node => {
+  const setFloating = React.useCallback(node => {
     if (node !== floatingRef.current) {
       floatingRef.current = node;
       _setFloating(node);
@@ -6198,12 +6198,12 @@ function useFloating(options) {
   }, [_setFloating]);
   const referenceEl = externalReference || _reference;
   const floatingEl = externalFloating || _floating;
-  const referenceRef = React__default.useRef(null);
-  const floatingRef = React__default.useRef(null);
-  const dataRef = React__default.useRef(data);
+  const referenceRef = React.useRef(null);
+  const floatingRef = React.useRef(null);
+  const dataRef = React.useRef(data);
   const whileElementsMountedRef = useLatestRef(whileElementsMounted);
   const platformRef = useLatestRef(platform);
-  const update = React__default.useCallback(() => {
+  const update = React.useCallback(() => {
     if (!referenceRef.current || !floatingRef.current) {
       return;
     }
@@ -6237,7 +6237,7 @@ function useFloating(options) {
       }));
     }
   }, [open]);
-  const isMountedRef = React__default.useRef(false);
+  const isMountedRef = React.useRef(false);
   index(() => {
     isMountedRef.current = true;
     return () => {
@@ -6255,17 +6255,17 @@ function useFloating(options) {
       }
     }
   }, [referenceEl, floatingEl, update, whileElementsMountedRef]);
-  const refs = React__default.useMemo(() => ({
+  const refs = React.useMemo(() => ({
     reference: referenceRef,
     floating: floatingRef,
     setReference,
     setFloating
   }), [setReference, setFloating]);
-  const elements = React__default.useMemo(() => ({
+  const elements = React.useMemo(() => ({
     reference: referenceEl,
     floating: floatingEl
   }), [referenceEl, floatingEl]);
-  const floatingStyles = React__default.useMemo(() => {
+  const floatingStyles = React.useMemo(() => {
     const initialStyles = {
       position: strategy,
       left: 0,
@@ -6291,7 +6291,7 @@ function useFloating(options) {
       top: y
     };
   }, [strategy, transform, elements.floating, data.x, data.y]);
-  return React__default.useMemo(() => ({
+  return React.useMemo(() => ({
     ...data,
     update,
     refs,
@@ -6993,7 +6993,7 @@ function $a093c7e1ec25a057$var$getHullPresorted(points) {
 }
 
 function Option(option) {
-    return (React__default__default.createElement("option", { value: option.value }, option.label));
+    return (React__default.createElement("option", { value: option.value }, option.label));
 }
 function Select(_a) {
     var children = _a.children, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select one' : _b, _c = _a.includePrompt, includePrompt = _c === void 0 ? true : _c, onChange = _a.onChange, value = _a.value; _a.id; var _d = _a.testId, testId = _d === void 0 ? 'select' : _d, _e = _a.options, options = _e === void 0 ? [] : _e, label = _a.label, description = _a.description, before = _a.before, after = _a.after, _f = _a.size, size = _f === void 0 ? 'med' : _f, _g = _a.defaultClassName, defaultClassName = _g === void 0 ? 'block w-full pr-10 border-slate-200 border focus:outline-blue-400 w-full disabled:opacity-50 disabled:bg-slate-50' : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.className, className = _j === void 0 ? '' : _j, error = _a.error;
@@ -7022,18 +7022,18 @@ function Select(_a) {
             }
         }
     };
-    return (React__default__default.createElement("label", { className: "block" },
+    return (React__default.createElement("label", { className: "block" },
         before !== undefined ? before : '',
         typeof label === 'string'
-            ? React__default__default.createElement(Label, { label: label })
+            ? React__default.createElement(Label, { label: label })
             : label !== undefined ? label : '',
         typeof description === 'string'
-            ? React__default__default.createElement(Description, { description: description })
+            ? React__default.createElement(Description, { description: description })
             : description !== undefined ? description : '',
-        React__default__default.createElement("div", { className: "flex gap-2" },
-            React__default__default.createElement("select", { "data-testid": testId, disabled: disabled, onChange: onSelectChange, className: makeClassName({ size: size, defaultClassName: defaultClassName, className: className, error: error, errorClassName: 'border-2 border-rose-600  focus:border-rose-600 focus:ring-offset-0' }), value: v !== undefined && v !== null ? v : '' }, children !== undefined
+        React__default.createElement("div", { className: "flex gap-2" },
+            React__default.createElement("select", { "data-testid": testId, disabled: disabled, onChange: onSelectChange, className: makeClassName({ size: size, defaultClassName: defaultClassName, className: className, error: error, errorClassName: 'border-2 border-rose-600  focus:border-rose-600 focus:ring-offset-0' }), value: v !== undefined && v !== null ? v : '' }, children !== undefined
                 ? children
-                : optionsToUse.map(function (option) { return (React__default__default.createElement(Option, __assign({}, option, { key: option.value }))); })),
+                : optionsToUse.map(function (option) { return (React__default.createElement(Option, __assign({}, option, { key: option.value }))); })),
             after !== undefined ? after : '')));
 }
 
@@ -7636,19 +7636,19 @@ function TextArea(_a) {
             onChange(newV);
         }
     };
-    return (React__default__default.createElement("label", { className: makeClassName({
+    return (React__default.createElement("label", { className: makeClassName({
             defaultClassName: defaultWrapperClassName,
             className: wrapperClassName
         }) },
         typeof label === 'string'
-            ? React__default__default.createElement(Label, { label: label })
+            ? React__default.createElement(Label, { label: label })
             : label !== undefined ? label : '',
         typeof description === 'string'
-            ? React__default__default.createElement(Description, { description: description })
+            ? React__default.createElement(Description, { description: description })
             : description !== undefined ? description : '',
         before !== undefined ? before : '',
-        error !== undefined ? React__default__default.createElement("p", { className: "text-rose-800 text-xs" }, error) : '',
-        React__default__default.createElement("textarea", { autoFocus: autofocus !== null && autofocus !== void 0 ? autofocus : false, "data-testid": testId, className: makeClassName({
+        error !== undefined ? React__default.createElement("p", { className: "text-rose-800 text-xs" }, error) : '',
+        React__default.createElement("textarea", { autoFocus: autofocus !== null && autofocus !== void 0 ? autofocus : false, "data-testid": testId, className: makeClassName({
                 size: size,
                 defaultClassName: defaultClassName,
                 className: className,
@@ -8407,7 +8407,7 @@ var SideCar$1 = function (_a) {
     if (!Target) {
         throw new Error('Sidecar medium not found');
     }
-    return React__default.createElement(Target, __assign({}, rest));
+    return React.createElement(Target, __assign({}, rest));
 };
 SideCar$1.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -8423,9 +8423,9 @@ var nothing = function () {
 /**
  * Removes scrollbar from the page and contain the scroll within the Lock
  */
-var RemoveScroll = React__default.forwardRef(function (props, parentRef) {
-    var ref = React__default.useRef(null);
-    var _a = React__default.useState({
+var RemoveScroll = React.forwardRef(function (props, parentRef) {
+    var ref = React.useRef(null);
+    var _a = React.useState({
         onScrollCapture: nothing,
         onWheelCapture: nothing,
         onTouchMoveCapture: nothing,
@@ -8434,9 +8434,9 @@ var RemoveScroll = React__default.forwardRef(function (props, parentRef) {
     var SideCar = sideCar;
     var containerRef = useMergeRefs([ref, parentRef]);
     var containerProps = __assign(__assign({}, rest), callbacks);
-    return (React__default.createElement(React__default.Fragment, null,
-        enabled && (React__default.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),
-        forwardProps ? (React__default.cloneElement(React__default.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef }))) : (React__default.createElement(Container, __assign({}, containerProps, { className: className, ref: containerRef }), children))));
+    return (React.createElement(React.Fragment, null,
+        enabled && (React.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),
+        forwardProps ? (React.cloneElement(React.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef }))) : (React.createElement(Container, __assign({}, containerProps, { className: className, ref: containerRef }), children))));
 });
 RemoveScroll.defaultProps = {
     enabled: true,
@@ -8514,7 +8514,7 @@ var stylesheetSingleton = function () {
 var styleHookSingleton = function () {
     var sheet = stylesheetSingleton();
     return function (styles, isDynamic) {
-        React__default.useEffect(function () {
+        React.useEffect(function () {
             sheet.add(styles);
             return function () {
                 sheet.remove();
@@ -8595,8 +8595,8 @@ var RemoveScrollBar = function (props) {
      however it will be used only by the "first" invocation
      due to singleton nature of <Style
      */
-    var gap = React__default.useMemo(function () { return getGapWidth(gapMode); }, [gapMode]);
-    return React__default.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
+    var gap = React.useMemo(function () { return getGapWidth(gapMode); }, [gapMode]);
+    return React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
 };
 
 var passiveSupported = false;
@@ -8728,16 +8728,16 @@ var generateStyle = function (id) { return "\n  .block-interactivity-".concat(id
 var idCounter = 0;
 var lockStack = [];
 function RemoveScrollSideCar(props) {
-    var shouldPreventQueue = React__default.useRef([]);
-    var touchStartRef = React__default.useRef([0, 0]);
-    var activeAxis = React__default.useRef();
-    var id = React__default.useState(idCounter++)[0];
-    var Style = React__default.useState(function () { return styleSingleton(); })[0];
-    var lastProps = React__default.useRef(props);
-    React__default.useEffect(function () {
+    var shouldPreventQueue = React.useRef([]);
+    var touchStartRef = React.useRef([0, 0]);
+    var activeAxis = React.useRef();
+    var id = React.useState(idCounter++)[0];
+    var Style = React.useState(function () { return styleSingleton(); })[0];
+    var lastProps = React.useRef(props);
+    React.useEffect(function () {
         lastProps.current = props;
     }, [props]);
-    React__default.useEffect(function () {
+    React.useEffect(function () {
         if (props.inert) {
             document.body.classList.add("block-interactivity-".concat(id));
             var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef)).filter(Boolean);
@@ -8749,7 +8749,7 @@ function RemoveScrollSideCar(props) {
         }
         return;
     }, [props.inert, props.lockRef.current, props.shards]);
-    var shouldCancelEvent = React__default.useCallback(function (event, parent) {
+    var shouldCancelEvent = React.useCallback(function (event, parent) {
         if ('touches' in event && event.touches.length === 2) {
             return !lastProps.current.allowPinchZoom;
         }
@@ -8788,7 +8788,7 @@ function RemoveScrollSideCar(props) {
         var cancelingAxis = activeAxis.current || currentAxis;
         return handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY);
     }, []);
-    var shouldPrevent = React__default.useCallback(function (_event) {
+    var shouldPrevent = React.useCallback(function (_event) {
         var event = _event;
         if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) {
             // not the last active
@@ -8817,24 +8817,24 @@ function RemoveScrollSideCar(props) {
             }
         }
     }, []);
-    var shouldCancel = React__default.useCallback(function (name, delta, target, should) {
+    var shouldCancel = React.useCallback(function (name, delta, target, should) {
         var event = { name: name, delta: delta, target: target, should: should };
         shouldPreventQueue.current.push(event);
         setTimeout(function () {
             shouldPreventQueue.current = shouldPreventQueue.current.filter(function (e) { return e !== event; });
         }, 1);
     }, []);
-    var scrollTouchStart = React__default.useCallback(function (event) {
+    var scrollTouchStart = React.useCallback(function (event) {
         touchStartRef.current = getTouchXY(event);
         activeAxis.current = undefined;
     }, []);
-    var scrollWheel = React__default.useCallback(function (event) {
+    var scrollWheel = React.useCallback(function (event) {
         shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
     }, []);
-    var scrollTouchMove = React__default.useCallback(function (event) {
+    var scrollTouchMove = React.useCallback(function (event) {
         shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
     }, []);
-    React__default.useEffect(function () {
+    React.useEffect(function () {
         lockStack.push(Style);
         props.setCallbacks({
             onScrollCapture: scrollWheel,
@@ -8852,14 +8852,14 @@ function RemoveScrollSideCar(props) {
         };
     }, []);
     var removeScrollBar = props.removeScrollBar, inert = props.inert;
-    return (React__default.createElement(React__default.Fragment, null,
-        inert ? React__default.createElement(Style, { styles: generateStyle(id) }) : null,
-        removeScrollBar ? React__default.createElement(RemoveScrollBar, { gapMode: "margin" }) : null));
+    return (React.createElement(React.Fragment, null,
+        inert ? React.createElement(Style, { styles: generateStyle(id) }) : null,
+        removeScrollBar ? React.createElement(RemoveScrollBar, { gapMode: "margin" }) : null));
 }
 
 var SideCar = exportSidecar(effectCar, RemoveScrollSideCar);
 
-var ReactRemoveScroll = React__default.forwardRef(function (props, ref) { return (React__default.createElement(RemoveScroll, __assign({}, props, { ref: ref, sideCar: SideCar }))); });
+var ReactRemoveScroll = React.forwardRef(function (props, ref) { return (React.createElement(RemoveScroll, __assign({}, props, { ref: ref, sideCar: SideCar }))); });
 ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var $67UHm$RemoveScroll = ReactRemoveScroll;
 
@@ -9371,19 +9371,19 @@ function $69cb30bb0017df05$var$makeContentId(baseId, value) {
 function createContextScope$2(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext3(rootComponentName, defaultContext) {
-    const BaseContext = React__default.createContext(defaultContext);
+    const BaseContext = React.createContext(defaultContext);
     const index = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props) => {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index] || BaseContext;
-      const value = React__default.useMemo(() => context, Object.values(context));
+      const value = React.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext2(consumerName, scope) {
       const Context = scope?.[scopeName]?.[index] || BaseContext;
-      const context = React__default.useContext(Context);
+      const context = React.useContext(Context);
       if (context) return context;
       if (defaultContext !== void 0) return defaultContext;
       throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
@@ -9392,11 +9392,11 @@ function createContextScope$2(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React__default.createContext(defaultContext);
+      return React.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React__default.useMemo(
+      return React.useMemo(
         () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
         [scope, contexts]
       );
@@ -9419,7 +9419,7 @@ function composeContextScopes$2(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React__default.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -9430,18 +9430,18 @@ function composeContextScopes$2(...scopes) {
 function createContextScope$1(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext3(rootComponentName, defaultContext) {
-    const BaseContext = React__default.createContext(defaultContext);
+    const BaseContext = React.createContext(defaultContext);
     const index = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     function Provider(props) {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName][index] || BaseContext;
-      const value = React__default.useMemo(() => context, Object.values(context));
+      const value = React.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx(Context.Provider, { value, children });
     }
     function useContext2(consumerName, scope) {
       const Context = scope?.[scopeName][index] || BaseContext;
-      const context = React__default.useContext(Context);
+      const context = React.useContext(Context);
       if (context) return context;
       if (defaultContext !== void 0) return defaultContext;
       throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
@@ -9451,11 +9451,11 @@ function createContextScope$1(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React__default.createContext(defaultContext);
+      return React.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React__default.useMemo(
+      return React.useMemo(
         () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
         [scope, contexts]
       );
@@ -9478,7 +9478,7 @@ function composeContextScopes$1(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React__default.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -9497,47 +9497,47 @@ function composeRefs$1(...refs) {
   return (node) => refs.forEach((ref) => setRef$1(ref, node));
 }
 function useComposedRefs$1(...refs) {
-  return React__default.useCallback(composeRefs$1(...refs), refs);
+  return React.useCallback(composeRefs$1(...refs), refs);
 }
 
 // packages/react/slot/src/Slot.tsx
-var Slot$1 = React__default.forwardRef((props, forwardedRef) => {
+var Slot$1 = React.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  const childrenArray = React__default.Children.toArray(children);
+  const childrenArray = React.Children.toArray(children);
   const slottable = childrenArray.find(isSlottable$1);
   if (slottable) {
     const newElement = slottable.props.children;
     const newChildren = childrenArray.map((child) => {
       if (child === slottable) {
-        if (React__default.Children.count(newElement) > 1) return React__default.Children.only(null);
-        return React__default.isValidElement(newElement) ? newElement.props.children : null;
+        if (React.Children.count(newElement) > 1) return React.Children.only(null);
+        return React.isValidElement(newElement) ? newElement.props.children : null;
       } else {
         return child;
       }
     });
-    return /* @__PURE__ */ jsx(SlotClone$1, { ...slotProps, ref: forwardedRef, children: React__default.isValidElement(newElement) ? React__default.cloneElement(newElement, void 0, newChildren) : null });
+    return /* @__PURE__ */ jsx(SlotClone$1, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
   }
   return /* @__PURE__ */ jsx(SlotClone$1, { ...slotProps, ref: forwardedRef, children });
 });
 Slot$1.displayName = "Slot";
-var SlotClone$1 = React__default.forwardRef((props, forwardedRef) => {
+var SlotClone$1 = React.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  if (React__default.isValidElement(children)) {
+  if (React.isValidElement(children)) {
     const childrenRef = getElementRef$2(children);
-    return React__default.cloneElement(children, {
+    return React.cloneElement(children, {
       ...mergeProps$1(slotProps, children.props),
       // @ts-ignore
       ref: forwardedRef ? composeRefs$1(forwardedRef, childrenRef) : childrenRef
     });
   }
-  return React__default.Children.count(children) > 1 ? React__default.Children.only(null) : null;
+  return React.Children.count(children) > 1 ? React.Children.only(null) : null;
 });
 SlotClone$1.displayName = "SlotClone";
 var Slottable$1 = ({ children }) => {
   return /* @__PURE__ */ jsx(Fragment$1, { children });
 };
 function isSlottable$1(child) {
-  return React__default.isValidElement(child) && child.type === Slottable$1;
+  return React.isValidElement(child) && child.type === Slottable$1;
 }
 function mergeProps$1(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -9585,13 +9585,13 @@ function createCollection(name) {
   );
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = React__default__default.useRef(null);
-    const itemMap = React__default__default.useRef(/* @__PURE__ */ new Map()).current;
+    const ref = React__default.useRef(null);
+    const itemMap = React__default.useRef(/* @__PURE__ */ new Map()).current;
     return /* @__PURE__ */ jsx(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
-  const CollectionSlot = React__default__default.forwardRef(
+  const CollectionSlot = React__default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
@@ -9602,13 +9602,13 @@ function createCollection(name) {
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
-  const CollectionItemSlot = React__default__default.forwardRef(
+  const CollectionItemSlot = React__default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children, ...itemData } = props;
-      const ref = React__default__default.useRef(null);
+      const ref = React__default.useRef(null);
       const composedRefs = useComposedRefs$1(forwardedRef, ref);
       const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-      React__default__default.useEffect(() => {
+      React__default.useEffect(() => {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
@@ -9618,7 +9618,7 @@ function createCollection(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React__default__default.useCallback(() => {
+    const getItems = React__default.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode) return [];
       const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
@@ -9649,11 +9649,11 @@ function composeEventHandlers$1(originalEventHandler, ourEventHandler, { checkFo
 
 // packages/react/use-callback-ref/src/useCallbackRef.tsx
 function useCallbackRef$1(callback) {
-  const callbackRef = React__default.useRef(callback);
-  React__default.useEffect(() => {
+  const callbackRef = React.useRef(callback);
+  React.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React__default.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+  return React.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 
 // packages/react/use-controllable-state/src/useControllableState.tsx
@@ -9667,7 +9667,7 @@ function useControllableState$1({
   const isControlled = prop !== void 0;
   const value = isControlled ? prop : uncontrolledProp;
   const handleChange = useCallbackRef$1(onChange);
-  const setValue = React__default.useCallback(
+  const setValue = React.useCallback(
     (nextValue) => {
       if (isControlled) {
         const setter = nextValue;
@@ -9685,11 +9685,11 @@ function useUncontrolledState$1({
   defaultProp,
   onChange
 }) {
-  const uncontrolledState = React__default.useState(defaultProp);
+  const uncontrolledState = React.useState(defaultProp);
   const [value] = uncontrolledState;
-  const prevValueRef = React__default.useRef(value);
+  const prevValueRef = React.useRef(value);
   const handleChange = useCallbackRef$1(onChange);
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     if (prevValueRef.current !== value) {
       handleChange(value);
       prevValueRef.current = value;
@@ -9718,7 +9718,7 @@ var NODES$1 = [
   "ul"
 ];
 var Primitive$1 = NODES$1.reduce((primitive, node) => {
-  const Node = React__default.forwardRef((props, forwardedRef) => {
+  const Node = React.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot$1 : node;
     if (typeof window !== "undefined") {
@@ -9744,19 +9744,19 @@ function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForD
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext3(rootComponentName, defaultContext) {
-    const BaseContext = React__default.createContext(defaultContext);
+    const BaseContext = React.createContext(defaultContext);
     const index = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props) => {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index] || BaseContext;
-      const value = React__default.useMemo(() => context, Object.values(context));
+      const value = React.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext2(consumerName, scope) {
       const Context = scope?.[scopeName]?.[index] || BaseContext;
-      const context = React__default.useContext(Context);
+      const context = React.useContext(Context);
       if (context) return context;
       if (defaultContext !== void 0) return defaultContext;
       throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
@@ -9765,11 +9765,11 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React__default.createContext(defaultContext);
+      return React.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React__default.useMemo(
+      return React.useMemo(
         () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
         [scope, contexts]
       );
@@ -9792,7 +9792,7 @@ function composeContextScopes(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React__default.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -9801,11 +9801,11 @@ function composeContextScopes(...scopes) {
 
 // packages/react/use-callback-ref/src/useCallbackRef.tsx
 function useCallbackRef(callback) {
-  const callbackRef = React__default.useRef(callback);
-  React__default.useEffect(() => {
+  const callbackRef = React.useRef(callback);
+  React.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React__default.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+  return React.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 
 // packages/react/use-controllable-state/src/useControllableState.tsx
@@ -9819,7 +9819,7 @@ function useControllableState({
   const isControlled = prop !== void 0;
   const value = isControlled ? prop : uncontrolledProp;
   const handleChange = useCallbackRef(onChange);
-  const setValue = React__default.useCallback(
+  const setValue = React.useCallback(
     (nextValue) => {
       if (isControlled) {
         const setter = nextValue;
@@ -9837,11 +9837,11 @@ function useUncontrolledState({
   defaultProp,
   onChange
 }) {
-  const uncontrolledState = React__default.useState(defaultProp);
+  const uncontrolledState = React.useState(defaultProp);
   const [value] = uncontrolledState;
-  const prevValueRef = React__default.useRef(value);
+  const prevValueRef = React.useRef(value);
   const handleChange = useCallbackRef(onChange);
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     if (prevValueRef.current !== value) {
       handleChange(value);
       prevValueRef.current = value;
@@ -9851,7 +9851,7 @@ function useUncontrolledState({
 }
 
 // packages/react/use-layout-effect/src/useLayoutEffect.tsx
-var useLayoutEffect2$1 = Boolean(globalThis?.document) ? React__default.useLayoutEffect : () => {
+var useLayoutEffect2$1 = Boolean(globalThis?.document) ? React.useLayoutEffect : () => {
 };
 
 // packages/react/compose-refs/src/composeRefs.tsx
@@ -9866,47 +9866,47 @@ function composeRefs(...refs) {
   return (node) => refs.forEach((ref) => setRef(ref, node));
 }
 function useComposedRefs(...refs) {
-  return React__default.useCallback(composeRefs(...refs), refs);
+  return React.useCallback(composeRefs(...refs), refs);
 }
 
 // packages/react/slot/src/Slot.tsx
-var Slot = React__default.forwardRef((props, forwardedRef) => {
+var Slot = React.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  const childrenArray = React__default.Children.toArray(children);
+  const childrenArray = React.Children.toArray(children);
   const slottable = childrenArray.find(isSlottable);
   if (slottable) {
     const newElement = slottable.props.children;
     const newChildren = childrenArray.map((child) => {
       if (child === slottable) {
-        if (React__default.Children.count(newElement) > 1) return React__default.Children.only(null);
-        return React__default.isValidElement(newElement) ? newElement.props.children : null;
+        if (React.Children.count(newElement) > 1) return React.Children.only(null);
+        return React.isValidElement(newElement) ? newElement.props.children : null;
       } else {
         return child;
       }
     });
-    return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React__default.isValidElement(newElement) ? React__default.cloneElement(newElement, void 0, newChildren) : null });
+    return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
   }
   return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
 });
 Slot.displayName = "Slot";
-var SlotClone = React__default.forwardRef((props, forwardedRef) => {
+var SlotClone = React.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  if (React__default.isValidElement(children)) {
+  if (React.isValidElement(children)) {
     const childrenRef = getElementRef$1(children);
-    return React__default.cloneElement(children, {
+    return React.cloneElement(children, {
       ...mergeProps(slotProps, children.props),
       // @ts-ignore
       ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
     });
   }
-  return React__default.Children.count(children) > 1 ? React__default.Children.only(null) : null;
+  return React.Children.count(children) > 1 ? React.Children.only(null) : null;
 });
 SlotClone.displayName = "SlotClone";
 var Slottable = ({ children }) => {
   return /* @__PURE__ */ jsx(Fragment$1, { children });
 };
 function isSlottable(child) {
-  return React__default.isValidElement(child) && child.type === Slottable;
+  return React.isValidElement(child) && child.type === Slottable;
 }
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -9965,7 +9965,7 @@ var NODES = [
   "ul"
 ];
 var Primitive = NODES.reduce((primitive, node) => {
-  const Node = React__default.forwardRef((props, forwardedRef) => {
+  const Node = React.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot : node;
     if (typeof window !== "undefined") {
@@ -9978,7 +9978,7 @@ var Primitive = NODES.reduce((primitive, node) => {
 }, {});
 
 function useStateMachine(initialState, machine) {
-  return React__default.useReducer((state, event) => {
+  return React.useReducer((state, event) => {
     const nextState = machine[state][event];
     return nextState ?? state;
   }, initialState);
@@ -9988,17 +9988,17 @@ function useStateMachine(initialState, machine) {
 var Presence = (props) => {
   const { present, children } = props;
   const presence = usePresence(present);
-  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React__default.Children.only(children);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React.Children.only(children);
   const ref = useComposedRefs(presence.ref, getElementRef(child));
   const forceMount = typeof children === "function";
-  return forceMount || presence.isPresent ? React__default.cloneElement(child, { ref }) : null;
+  return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;
 };
 Presence.displayName = "Presence";
 function usePresence(present) {
-  const [node, setNode] = React__default.useState();
-  const stylesRef = React__default.useRef({});
-  const prevPresentRef = React__default.useRef(present);
-  const prevAnimationNameRef = React__default.useRef("none");
+  const [node, setNode] = React.useState();
+  const stylesRef = React.useRef({});
+  const prevPresentRef = React.useRef(present);
+  const prevAnimationNameRef = React.useRef("none");
   const initialState = present ? "mounted" : "unmounted";
   const [state, send] = useStateMachine(initialState, {
     mounted: {
@@ -10013,7 +10013,7 @@ function usePresence(present) {
       MOUNT: "mounted"
     }
   });
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     const currentAnimationName = getAnimationName(stylesRef.current);
     prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
   }, [state]);
@@ -10079,7 +10079,7 @@ function usePresence(present) {
   }, [node, send]);
   return {
     isPresent: ["mounted", "unmountSuspended"].includes(state),
-    ref: React__default.useCallback((node2) => {
+    ref: React.useCallback((node2) => {
       if (node2) stylesRef.current = getComputedStyle(node2);
       setNode(node2);
     }, [])
@@ -10103,10 +10103,10 @@ function getElementRef(element) {
 }
 
 // packages/react/id/src/id.tsx
-var useReactId$1 = React__default["useId".toString()] || (() => void 0);
+var useReactId$1 = React["useId".toString()] || (() => void 0);
 var count$1 = 0;
 function useId$1(deterministicId) {
-  const [id, setId] = React__default.useState(useReactId$1());
+  const [id, setId] = React.useState(useReactId$1());
   useLayoutEffect2$1(() => {
     setId((reactId) => reactId ?? String(count$1++));
   }, [deterministicId]);
@@ -10116,7 +10116,7 @@ function useId$1(deterministicId) {
 var COLLAPSIBLE_NAME = "Collapsible";
 var [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);
 var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
-var Collapsible = React__default.forwardRef(
+var Collapsible = React.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopeCollapsible,
@@ -10138,7 +10138,7 @@ var Collapsible = React__default.forwardRef(
         disabled,
         contentId: useId$1(),
         open,
-        onOpenToggle: React__default.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
+        onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
         children: /* @__PURE__ */ jsx(
           Primitive.div,
           {
@@ -10154,7 +10154,7 @@ var Collapsible = React__default.forwardRef(
 );
 Collapsible.displayName = COLLAPSIBLE_NAME;
 var TRIGGER_NAME$1 = "CollapsibleTrigger";
-var CollapsibleTrigger = React__default.forwardRef(
+var CollapsibleTrigger = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeCollapsible, ...triggerProps } = props;
     const context = useCollapsibleContext(TRIGGER_NAME$1, __scopeCollapsible);
@@ -10176,7 +10176,7 @@ var CollapsibleTrigger = React__default.forwardRef(
 );
 CollapsibleTrigger.displayName = TRIGGER_NAME$1;
 var CONTENT_NAME$1 = "CollapsibleContent";
-var CollapsibleContent = React__default.forwardRef(
+var CollapsibleContent = React.forwardRef(
   (props, forwardedRef) => {
     const { forceMount, ...contentProps } = props;
     const context = useCollapsibleContext(CONTENT_NAME$1, props.__scopeCollapsible);
@@ -10184,20 +10184,20 @@ var CollapsibleContent = React__default.forwardRef(
   }
 );
 CollapsibleContent.displayName = CONTENT_NAME$1;
-var CollapsibleContentImpl = React__default.forwardRef((props, forwardedRef) => {
+var CollapsibleContentImpl = React.forwardRef((props, forwardedRef) => {
   const { __scopeCollapsible, present, children, ...contentProps } = props;
   const context = useCollapsibleContext(CONTENT_NAME$1, __scopeCollapsible);
-  const [isPresent, setIsPresent] = React__default.useState(present);
-  const ref = React__default.useRef(null);
+  const [isPresent, setIsPresent] = React.useState(present);
+  const ref = React.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
-  const heightRef = React__default.useRef(0);
+  const heightRef = React.useRef(0);
   const height = heightRef.current;
-  const widthRef = React__default.useRef(0);
+  const widthRef = React.useRef(0);
   const width = widthRef.current;
   const isOpen = context.open || isPresent;
-  const isMountAnimationPreventedRef = React__default.useRef(isOpen);
-  const originalStylesRef = React__default.useRef();
-  React__default.useEffect(() => {
+  const isMountAnimationPreventedRef = React.useRef(isOpen);
+  const originalStylesRef = React.useRef();
+  React.useEffect(() => {
     const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
     return () => cancelAnimationFrame(rAF);
   }, []);
@@ -10246,14 +10246,14 @@ var Trigger = CollapsibleTrigger;
 var Content = CollapsibleContent;
 
 // packages/react/use-layout-effect/src/useLayoutEffect.tsx
-var useLayoutEffect2 = Boolean(globalThis?.document) ? React__default.useLayoutEffect : () => {
+var useLayoutEffect2 = Boolean(globalThis?.document) ? React.useLayoutEffect : () => {
 };
 
 // packages/react/id/src/id.tsx
-var useReactId = React__default["useId".toString()] || (() => void 0);
+var useReactId = React["useId".toString()] || (() => void 0);
 var count = 0;
 function useId(deterministicId) {
-  const [id, setId] = React__default.useState(useReactId());
+  const [id, setId] = React.useState(useReactId());
   useLayoutEffect2(() => {
     setId((reactId) => reactId ?? String(count++));
   }, [deterministicId]);
@@ -10261,9 +10261,9 @@ function useId(deterministicId) {
 }
 
 // packages/react/direction/src/Direction.tsx
-var DirectionContext = React__default.createContext(void 0);
+var DirectionContext = React.createContext(void 0);
 function useDirection(localDir) {
-  const globalDir = React__default.useContext(DirectionContext);
+  const globalDir = React.useContext(DirectionContext);
   return localDir || globalDir || "ltr";
 }
 
@@ -10275,7 +10275,7 @@ var [createAccordionContext, createAccordionScope] = createContextScope$2(ACCORD
   createCollapsibleScope
 ]);
 var useCollapsibleScope = createCollapsibleScope();
-var Accordion$1 = React__default__default.forwardRef(
+var Accordion$1 = React__default.forwardRef(
   (props, forwardedRef) => {
     const { type, ...accordionProps } = props;
     const singleProps = accordionProps;
@@ -10289,7 +10289,7 @@ var [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccor
   ACCORDION_NAME,
   { collapsible: false }
 );
-var AccordionImplSingle = React__default__default.forwardRef(
+var AccordionImplSingle = React__default.forwardRef(
   (props, forwardedRef) => {
     const {
       value: valueProp,
@@ -10310,13 +10310,13 @@ var AccordionImplSingle = React__default__default.forwardRef(
         scope: props.__scopeAccordion,
         value: value ? [value] : [],
         onItemOpen: setValue,
-        onItemClose: React__default__default.useCallback(() => collapsible && setValue(""), [collapsible, setValue]),
+        onItemClose: React__default.useCallback(() => collapsible && setValue(""), [collapsible, setValue]),
         children: /* @__PURE__ */ jsx(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible, children: /* @__PURE__ */ jsx(AccordionImpl, { ...accordionSingleProps, ref: forwardedRef }) })
       }
     );
   }
 );
-var AccordionImplMultiple = React__default__default.forwardRef((props, forwardedRef) => {
+var AccordionImplMultiple = React__default.forwardRef((props, forwardedRef) => {
   const {
     value: valueProp,
     defaultValue,
@@ -10329,11 +10329,11 @@ var AccordionImplMultiple = React__default__default.forwardRef((props, forwarded
     defaultProp: defaultValue,
     onChange: onValueChange
   });
-  const handleItemOpen = React__default__default.useCallback(
+  const handleItemOpen = React__default.useCallback(
     (itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
     [setValue]
   );
-  const handleItemClose = React__default__default.useCallback(
+  const handleItemClose = React__default.useCallback(
     (itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
     [setValue]
   );
@@ -10349,10 +10349,10 @@ var AccordionImplMultiple = React__default__default.forwardRef((props, forwarded
   );
 });
 var [AccordionImplProvider, useAccordionContext] = createAccordionContext(ACCORDION_NAME);
-var AccordionImpl = React__default__default.forwardRef(
+var AccordionImpl = React__default.forwardRef(
   (props, forwardedRef) => {
     const { __scopeAccordion, disabled, dir, orientation = "vertical", ...accordionProps } = props;
-    const accordionRef = React__default__default.useRef(null);
+    const accordionRef = React__default.useRef(null);
     const composedRefs = useComposedRefs$1(accordionRef, forwardedRef);
     const getItems = useCollection(__scopeAccordion);
     const direction = useDirection(dir);
@@ -10441,7 +10441,7 @@ var AccordionImpl = React__default__default.forwardRef(
 );
 var ITEM_NAME = "AccordionItem";
 var [AccordionItemProvider, useAccordionItemContext] = createAccordionContext(ITEM_NAME);
-var AccordionItem = React__default__default.forwardRef(
+var AccordionItem = React__default.forwardRef(
   (props, forwardedRef) => {
     const { __scopeAccordion, value, ...accordionItemProps } = props;
     const accordionContext = useAccordionContext(ITEM_NAME, __scopeAccordion);
@@ -10482,7 +10482,7 @@ var AccordionItem = React__default__default.forwardRef(
 );
 AccordionItem.displayName = ITEM_NAME;
 var HEADER_NAME = "AccordionHeader";
-var AccordionHeader = React__default__default.forwardRef(
+var AccordionHeader = React__default.forwardRef(
   (props, forwardedRef) => {
     const { __scopeAccordion, ...headerProps } = props;
     const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
@@ -10501,7 +10501,7 @@ var AccordionHeader = React__default__default.forwardRef(
 );
 AccordionHeader.displayName = HEADER_NAME;
 var TRIGGER_NAME = "AccordionTrigger";
-var AccordionTrigger = React__default__default.forwardRef(
+var AccordionTrigger = React__default.forwardRef(
   (props, forwardedRef) => {
     const { __scopeAccordion, ...triggerProps } = props;
     const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
@@ -10523,7 +10523,7 @@ var AccordionTrigger = React__default__default.forwardRef(
 );
 AccordionTrigger.displayName = TRIGGER_NAME;
 var CONTENT_NAME = "AccordionContent";
-var AccordionContent = React__default__default.forwardRef(
+var AccordionContent = React__default.forwardRef(
   (props, forwardedRef) => {
     const { __scopeAccordion, ...contentProps } = props;
     const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
@@ -10552,7 +10552,7 @@ function getState(open) {
   return open ? "open" : "closed";
 }
 
-React__default__default.createContext(null);
+React__default.createContext(null);
 
 function bind(fn, thisArg) {
   return function wrap() {
@@ -15788,7 +15788,7 @@ axios.default = axios;
 var BooleanInput = function (_a) {
     var field = _a.field, onChange = _a.onChange, value = _a.value;
     var initialValue = value !== undefined ? value : false;
-    return React__default__default.createElement(Checkbox, { id: field.id, testId: field.id, label: React__default__default.createElement(FieldLabelText, __assign$1({}, field)), value: Boolean(initialValue), onChange: function (e) {
+    return React__default.createElement(Checkbox, { id: field.id, testId: field.id, label: React__default.createElement(FieldLabelText, __assign$1({}, field)), value: Boolean(initialValue), onChange: function (e) {
             onChange(e);
         } });
 };
@@ -15799,8 +15799,8 @@ var LongStringInput = function (_a) {
     var getValue = function () {
         return initialValue !== undefined && initialValue !== null ? String(initialValue) : '';
     };
-    return React__default__default.createElement("div", null,
-        React__default__default.createElement(TextArea, { id: field.id, testId: field.id, label: React__default__default.createElement(FieldLabel, __assign$1({}, field)), value: getValue(), onChange: function (e) {
+    return React__default.createElement("div", null,
+        React__default.createElement(TextArea, { id: field.id, testId: field.id, label: React__default.createElement(FieldLabel, __assign$1({}, field)), value: getValue(), onChange: function (e) {
                 onChange(e);
             } }));
 };
@@ -15808,8 +15808,8 @@ var LongStringInput = function (_a) {
 var StringInput = function (_a) {
     var field = _a.field, onChange = _a.onChange, value = _a.value;
     var initialValue = value !== undefined ? value : '';
-    return React__default__default.createElement("div", null,
-        React__default__default.createElement(Input, { id: field.id, testId: field.id, value: initialValue !== undefined && initialValue !== null ? String(initialValue) : '', label: React__default__default.createElement(FieldLabel, __assign$1({}, field)), onChange: function (e) {
+    return React__default.createElement("div", null,
+        React__default.createElement(Input, { id: field.id, testId: field.id, value: initialValue !== undefined && initialValue !== null ? String(initialValue) : '', label: React__default.createElement(FieldLabel, __assign$1({}, field)), onChange: function (e) {
                 onChange(e);
             } }));
 };
@@ -15820,18 +15820,18 @@ var ObjectInput = function (_a) {
     if (field.type === 'object' && field.fields !== undefined) {
         var cl = "".concat(field.layout === 'horizontal' ? "flex flex-row gap-4  ".concat(field.label !== undefined ? 'px-0' : '') : 'flex flex-col gap-4');
         var fc_1 = field.layout === 'horizontal' ? 'flex-1' : '';
-        return (React__default__default.createElement("div", null,
+        return (React__default.createElement("div", null,
             field.label !== undefined
-                ? React__default__default.createElement(FieldLabel, __assign$1({}, field))
+                ? React__default.createElement(FieldLabel, __assign$1({}, field))
                 : null,
-            React__default__default.createElement("div", { className: "p-4 bg-slate-100 ".concat(cl) }, field.fields.map(function (childField) {
+            React__default.createElement("div", { className: "p-4 bg-slate-100 ".concat(cl) }, field.fields.map(function (childField) {
                 var _a;
                 var id = ((_a = field.path) !== null && _a !== void 0 ? _a : [field.id]).concat(childField.id).join('.');
                 if (childField.type === 'object') {
                     childField.path = field.path !== undefined ? field.path.concat(id) : [id];
                     childField.level = field.level !== undefined ? field.level + 1 : 1;
                 }
-                return (React__default__default.createElement(FieldCreator, { formValueState: formValueState, onChange: field.skip_path === true
+                return (React__default.createElement(FieldCreator, { formValueState: formValueState, onChange: field.skip_path === true
                         ? undefined
                         : function (e) {
                             initialValue[childField.id] = e;
@@ -15842,7 +15842,7 @@ var ObjectInput = function (_a) {
                     }), value: initialValue[childField.id], field: __assign$1(__assign$1({}, childField), { id: id }), form: form, key: id }));
             }))));
     }
-    return React__default__default.createElement("p", null,
+    return React__default.createElement("p", null,
         "Field config for ",
         field.id,
         " is missing 'fields'");
@@ -15852,11 +15852,11 @@ var RadioInput = function (_a) {
     var field = _a.field, onChange = _a.onChange, value = _a.value;
     var initialValue = value !== undefined ? value : '';
     if (field.type === 'radio' && field.options !== undefined) {
-        return React__default__default.createElement(RadixRadioGroup, { id: field.id, label: React__default__default.createElement(FieldLabel, __assign$1({}, field)), testId: field.id, options: field.options, value: initialValue !== undefined && initialValue !== null ? String(initialValue) : '', onChange: function (e) {
+        return React__default.createElement(RadixRadioGroup, { id: field.id, label: React__default.createElement(FieldLabel, __assign$1({}, field)), testId: field.id, options: field.options, value: initialValue !== undefined && initialValue !== null ? String(initialValue) : '', onChange: function (e) {
                 onChange(e === null || e === void 0 ? void 0 : e.value);
             } });
     }
-    return React__default__default.createElement("p", null,
+    return React__default.createElement("p", null,
         "Field config for ",
         field.id,
         " is missing 'options'");
@@ -15866,11 +15866,11 @@ var SingleSelectInput = function (_a) {
     var field = _a.field, onChange = _a.onChange, value = _a.value;
     var initialValue = value !== undefined ? value : '';
     if (field.type === 'select' && field.options !== undefined) {
-        return React__default__default.createElement(Select, { id: field.id, label: React__default__default.createElement(FieldLabel, __assign$1({}, field)), testId: field.id, options: field.options, value: initialValue !== undefined && initialValue !== null ? String(initialValue) : '', onChange: function (e) {
+        return React__default.createElement(Select, { id: field.id, label: React__default.createElement(FieldLabel, __assign$1({}, field)), testId: field.id, options: field.options, value: initialValue !== undefined && initialValue !== null ? String(initialValue) : '', onChange: function (e) {
                 onChange(e === null || e === void 0 ? void 0 : e.value);
             } });
     }
-    return React__default__default.createElement("p", null,
+    return React__default.createElement("p", null,
         "Field config for ",
         field.id,
         " is missing 'options'");
@@ -15887,11 +15887,11 @@ var JSONStringInput = function (_a) {
                 : String(initialValue)
             : '';
     };
-    return React__default__default.createElement("div", null,
-        React__default__default.createElement(TextArea, { error: error, className: [
+    return React__default.createElement("div", null,
+        React__default.createElement(TextArea, { error: error, className: [
                 'min-h-[500px] bg-slate-50 rounded-lg shadow-inner'
                 // 'p-0 bg-[repeating-linear-gradient(to_bottom,var(--tw-gradient-stops))] from-[#efefef] from-[length:0_25px] to-[#FFF] to-[length:25px_50px]'
-            ].join(' '), id: field.id, testId: field.id, label: React__default__default.createElement(FieldLabel, __assign$1({}, field)), value: getValue(), onChange: function (e) {
+            ].join(' '), id: field.id, testId: field.id, label: React__default.createElement(FieldLabel, __assign$1({}, field)), value: getValue(), onChange: function (e) {
                 try {
                     JSON.parse(e !== null && e !== void 0 ? e : '');
                     onChange(JSON.parse(e !== null && e !== void 0 ? e : ''));
@@ -15906,8 +15906,8 @@ var JSONStringInput = function (_a) {
 var NumberInput = function (_a) {
     var field = _a.field, onChange = _a.onChange, value = _a.value;
     var initialValue = value !== undefined ? value : '';
-    return React__default__default.createElement("div", null,
-        React__default__default.createElement(Input, { id: field.id, testId: field.id, value: initialValue !== undefined && initialValue !== null ? String(initialValue) : '', label: React__default__default.createElement(FieldLabel, __assign$1({}, field)), onChange: function (e) {
+    return React__default.createElement("div", null,
+        React__default.createElement(Input, { id: field.id, testId: field.id, value: initialValue !== undefined && initialValue !== null ? String(initialValue) : '', label: React__default.createElement(FieldLabel, __assign$1({}, field)), onChange: function (e) {
                 if (e !== undefined && !isNaN(+e)) {
                     onChange(+e);
                 }
@@ -16009,6 +16009,28 @@ var Cross1Icon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   }));
 });
 
+var _excluded$20 = ["color"];
+var ExclamationTriangleIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$20);
+
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M8.4449 0.608765C8.0183 -0.107015 6.9817 -0.107015 6.55509 0.608766L0.161178 11.3368C-0.275824 12.07 0.252503 13 1.10608 13H13.8939C14.7475 13 15.2758 12.07 14.8388 11.3368L8.4449 0.608765ZM7.4141 1.12073C7.45288 1.05566 7.54712 1.05566 7.5859 1.12073L13.9798 11.8488C14.0196 11.9154 13.9715 12 13.8939 12H1.10608C1.02849 12 0.980454 11.9154 1.02018 11.8488L7.4141 1.12073ZM6.8269 4.48611C6.81221 4.10423 7.11783 3.78663 7.5 3.78663C7.88217 3.78663 8.18778 4.10423 8.1731 4.48612L8.01921 8.48701C8.00848 8.766 7.7792 8.98664 7.5 8.98664C7.2208 8.98664 6.99151 8.766 6.98078 8.48701L6.8269 4.48611ZM8.24989 10.476C8.24989 10.8902 7.9141 11.226 7.49989 11.226C7.08567 11.226 6.74989 10.8902 6.74989 10.476C6.74989 10.0618 7.08567 9.72599 7.49989 9.72599C7.9141 9.72599 8.24989 10.0618 8.24989 10.476Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
 var _excluded$3x = ["color"];
 var PlusIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var _ref$color = _ref.color,
@@ -16057,24 +16079,24 @@ var toolButtonClass = 'border-white hover:border-single hover:border-1 hover:bor
 var DeleteMultiple = function (_a) {
     var doDelete = _a.doDelete;
     var _b = useState(false), confirm = _b[0], setConfirm = _b[1];
-    return (React__default__default.createElement(React__default__default.Fragment, null, confirm
-        ? React__default__default.createElement("p", { className: 'flex flex-row gap-2 text-sm' },
-            React__default__default.createElement("span", { className: 'text-slate-600' }, "Deleting: "),
+    return (React__default.createElement(React__default.Fragment, null, confirm
+        ? React__default.createElement("p", { className: 'flex flex-row gap-2 text-sm' },
+            React__default.createElement("span", { className: 'text-slate-600' }, "Deleting: "),
             " Are you sure?",
-            React__default__default.createElement(Button, { size: 'xs', type: 'submit', onClick: function () {
+            React__default.createElement(Button, { size: 'xs', type: 'submit', onClick: function () {
                     doDelete();
                     setConfirm(false);
                 } },
                 "Yes ",
-                React__default__default.createElement(CheckIcon, { className: 'inline ml-2' })),
-            React__default__default.createElement(Button, { size: 'xs', type: 'alert', onClick: function () {
+                React__default.createElement(CheckIcon, { className: 'inline ml-2' })),
+            React__default.createElement(Button, { size: 'xs', type: 'alert', onClick: function () {
                     setConfirm(false);
                 } },
                 "Cancel ",
-                React__default__default.createElement(Cross1Icon, { className: 'inline ml-2' })))
-        : React__default__default.createElement(Button, { size: 'xs', className: toolButtonClass, onClick: function () { setConfirm(true); } },
+                React__default.createElement(Cross1Icon, { className: 'inline ml-2' })))
+        : React__default.createElement(Button, { size: 'xs', className: toolButtonClass, onClick: function () { setConfirm(true); } },
             "Delete ",
-            React__default__default.createElement(TrashIcon, { className: 'inline ml-2 fill-white' }))));
+            React__default.createElement(TrashIcon, { className: 'inline ml-2 fill-white' }))));
 };
 var OneOfMultiple = function (_a) {
     var InputComponent = _a.InputComponent, field = _a.field, form = _a.form, value = _a.value, index = _a.index, onChange = _a.onChange, values = _a.values, formValueState = _a.formValueState;
@@ -16083,29 +16105,29 @@ var OneOfMultiple = function (_a) {
         newValues.splice(index + 1, 0, v);
         onChange(newValues);
     };
-    return (React__default__default.createElement("div", { className: 'flex flex-col gap-2' },
-        React__default__default.createElement(InputComponent, { formValueState: formValueState, form: form, field: __assign$1(__assign$1({}, field), { required: false, label: index > 0 ? null : field.label, id: "".concat(field.id, "-").concat(index) }), value: value, onChange: function (v) {
+    return (React__default.createElement("div", { className: 'flex flex-col gap-2' },
+        React__default.createElement(InputComponent, { formValueState: formValueState, form: form, field: __assign$1(__assign$1({}, field), { required: false, label: index > 0 ? null : field.label, id: "".concat(field.id, "-").concat(index) }), value: value, onChange: function (v) {
                 var newValues = __spreadArray$1([], values, true);
                 newValues[index] = String(v);
                 onChange(newValues);
             } }),
-        React__default__default.createElement("div", { className: 'flex flex-row justify-between w-full p-2' },
-            index > 0 && (React__default__default.createElement(DeleteMultiple, { doDelete: function () {
+        React__default.createElement("div", { className: 'flex flex-row justify-between w-full p-2' },
+            index > 0 && (React__default.createElement(DeleteMultiple, { doDelete: function () {
                     var newValues = __spreadArray$1([], values, true);
                     newValues.splice(index, 1);
                     onChange(newValues);
                 } })),
-            React__default__default.createElement("div", { className: 'ml-auto flex gap-2' },
-                React__default__default.createElement(Button, { size: 'xs', className: toolButtonClass, onClick: function () {
+            React__default.createElement("div", { className: 'ml-auto flex gap-2' },
+                React__default.createElement(Button, { size: 'xs', className: toolButtonClass, onClick: function () {
                         addValue(null);
                     } },
                     "Add ",
-                    React__default__default.createElement(PlusIcon, { className: 'inline ml-2' })),
-                React__default__default.createElement(Button, { size: 'xs', className: toolButtonClass, onClick: function () {
+                    React__default.createElement(PlusIcon, { className: 'inline ml-2' })),
+                React__default.createElement(Button, { size: 'xs', className: toolButtonClass, onClick: function () {
                         addValue(structuredClone(value));
                     } },
                     "Duplicate ",
-                    React__default__default.createElement(CopyIcon, { className: 'inline ml-2' }))))));
+                    React__default.createElement(CopyIcon, { className: 'inline ml-2' }))))));
 };
 var MultipleFieldCreator = function (_a) {
     var form = _a.form, field = _a.field, onChange = _a.onChange, value = _a.value, formValueState = _a.formValueState;
@@ -16125,8 +16147,8 @@ var MultipleFieldCreator = function (_a) {
         : [null]
     ) as IValueType[] */
     var InputComponent = inputMap[field.type];
-    return React__default__default.createElement("div", null, initialValues === null || initialValues === void 0 ? void 0 : initialValues.map(function (value, index) {
-        return React__default__default.createElement(OneOfMultiple, { formValueState: formValueState, key: "".concat(field.id, "-").concat(index), InputComponent: InputComponent, form: form, field: field, value: value, index: index, onChange: onChange !== null && onChange !== void 0 ? onChange : defaultOnChange, values: initialValues });
+    return React__default.createElement("div", null, initialValues === null || initialValues === void 0 ? void 0 : initialValues.map(function (value, index) {
+        return React__default.createElement(OneOfMultiple, { formValueState: formValueState, key: "".concat(field.id, "-").concat(index), InputComponent: InputComponent, form: form, field: field, value: value, index: index, onChange: onChange !== null && onChange !== void 0 ? onChange : defaultOnChange, values: initialValues });
     }));
 };
 var FieldCreator = function (_a) {
@@ -16146,13 +16168,13 @@ var FieldCreator = function (_a) {
     };
     var initialValue = value !== undefined ? value : getFieldValue(field, formValues);
     return InputComponent !== undefined
-        ? React__default__default.createElement("div", { className: index$1.makeClassName({
+        ? React__default.createElement("div", { className: index$1.makeClassName({
                 className: className,
                 defaultClassName: defaultClassName
             }) }, field.multiple === true
-            ? React__default__default.createElement(MultipleFieldCreator, { field: field, form: form, onChange: onChange, value: initialValue, formValueState: formValueState })
-            : React__default__default.createElement(InputComponent, { field: field, form: form, onChange: onChange !== null && onChange !== void 0 ? onChange : defaultOnChange, value: Array.isArray(initialValue) ? initialValue[0] : initialValue, formValueState: formValueState }))
-        : React__default__default.createElement("p", null,
+            ? React__default.createElement(MultipleFieldCreator, { field: field, form: form, onChange: onChange, value: initialValue, formValueState: formValueState })
+            : React__default.createElement(InputComponent, { field: field, form: form, onChange: onChange !== null && onChange !== void 0 ? onChange : defaultOnChange, value: Array.isArray(initialValue) ? initialValue[0] : initialValue, formValueState: formValueState }))
+        : React__default.createElement("p", null,
             "No component definition for ",
             field.type,
             " (",
@@ -16160,5 +16182,35 @@ var FieldCreator = function (_a) {
             ")");
 };
 
-export { BooleanInput, FieldCreator, JSONStringInput, LongStringInput as LongTextInput, NumberInput, SingleSelectInput as SelectInput, StringInput as TextInput, addFieldPath, checkCondition, cleanUnusedDependenciesFromFormValues, copyAndAddPathToFields, getChildFields, getFieldValue, getFields, getPathFromField, getUniqueFormFields };
+var FormCreator = function (_a) {
+    var form = _a.form, formValueState = _a.formValueState, note = _a.note, error = _a.error, onChange = _a.onChange;
+    var _b = useState(null), activeForm = _b[0], setActiveForm = _b[1];
+    useEffect(function () {
+        var newForm = copyAndAddPathToFields(form);
+        setActiveForm(newForm);
+    }, [form]);
+    if (activeForm === null) {
+        return React__default.createElement("p", null, "Processing");
+    }
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", null,
+            React__default.createElement("h2", { className: 'text-2xl pb-4 font-bold' }, form.label),
+            note !== undefined
+                ? React__default.createElement("p", { className: 'pb-4' }, note)
+                : null,
+            error !== undefined
+                ? React__default.createElement("p", { className: 'pb-4 text-rose-800' },
+                    React__default.createElement(ExclamationTriangleIcon, { className: 'inline mr-2' }),
+                    " ",
+                    error)
+                : null,
+            activeForm.description !== undefined
+                ? React__default.createElement("p", { className: 'pb-4' }, form.description)
+                : null,
+            React__default.createElement("div", { className: 'flex flex-col gap-2' }, activeForm.fields.map(function (field) {
+                return (React__default.createElement(FieldCreator, { onChange: onChange, form: form, field: field, key: field.id, formValueState: formValueState }));
+            })))));
+};
+
+export { BooleanInput, FieldCreator, FormCreator, JSONStringInput, LongStringInput as LongTextInput, NumberInput, SingleSelectInput as SelectInput, StringInput as TextInput, addFieldPath, checkCondition, cleanUnusedDependenciesFromFormValues, copyAndAddPathToFields, getChildFields, getFieldValue, getFields, getPathFromField, getUniqueFormFields };
 //# sourceMappingURL=index.js.map