@emeraldemperaur/vector-sigma 1.4.42 → 1.4.43

package/lib/index.cjs

@@ -754,7 +754,7 @@ const guid = /^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9
 /** Returns a regex for validating an RFC 9562/4122 UUID.
  *
  * @param version Optionally specify a version 1-8. If no version is specified, all versions are supported. */
-const uuid$1 = (version) => {
+const uuid = (version) => {
     if (!version)
         return /^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-8][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}|00000000-0000-0000-0000-000000000000|ffffffff-ffff-ffff-ffff-ffffffffffff)$/;
     return new RegExp(`^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-${version}[0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12})$`);
@@ -1437,10 +1437,10 @@ const $ZodUUID = /*@__PURE__*/ $constructor("$ZodUUID", (inst, def) => {
         const v = versionMap[def.version];
         if (v === undefined)
             throw new Error(`Invalid UUID version: "${def.version}"`);
-        def.pattern ?? (def.pattern = uuid$1(v));
+        def.pattern ?? (def.pattern = uuid(v));
     }
     else
-        def.pattern ?? (def.pattern = uuid$1());
+        def.pattern ?? (def.pattern = uuid());
     $ZodStringFormat.init(inst, def);
 });
 const $ZodEmail = /*@__PURE__*/ $constructor("$ZodEmail", (inst, def) => {
@@ -4106,17 +4106,11 @@ const ZodUUID = /*@__PURE__*/ $constructor("ZodUUID", (inst, def) => {
     $ZodUUID.init(inst, def);
     ZodStringFormat.init(inst, def);
 });
-function uuid(params) {
-    return _uuid(ZodUUID, params);
-}
 const ZodURL = /*@__PURE__*/ $constructor("ZodURL", (inst, def) => {
     // ZodStringFormat.init(inst, def);
     $ZodURL.init(inst, def);
     ZodStringFormat.init(inst, def);
 });
-function url(params) {
-    return _url(ZodURL, params);
-}
 const ZodEmoji = /*@__PURE__*/ $constructor("ZodEmoji", (inst, def) => {
     // ZodStringFormat.init(inst, def);
     $ZodEmoji.init(inst, def);
@@ -4571,7 +4565,7 @@ function superRefine(fn) {
     return _superRefine(fn);
 }
 
-const InputOptionSchema$1 = object({
+const InputOptionSchema = object({
     optionid: number(),
     optionvalue: union([string(), number(), boolean()]),
     optionurl: string().optional(),
@@ -4580,7 +4574,7 @@ const InputOptionSchema$1 = object({
     score: number().or(float64()).optional(),
     note: string().optional(),
 });
-const QuerySchema$1 = lazy(() => object({
+const QuerySchema = lazy(() => object({
     queryId: number(),
     inputType: string(),
     inputAlias: string(),
@@ -4596,18 +4590,19 @@ const QuerySchema$1 = lazy(() => object({
     errorText: string().optional(),
     defaultValue: any().optional(),
     queryResponse: any().nullable().optional(),
-    inputOptions: array(InputOptionSchema$1).optional(),
+    inputOptions: array(InputOptionSchema).optional(),
     triggerValue: any().optional(),
-    toggledInput: QuerySchema$1.nullable().optional(),
+    toggledInput: QuerySchema.nullable().optional(),
     minValue: number().optional(),
     maxValue: number().optional(),
     stepValue: number().optional(),
 }));
-const SectionSchema$1 = object({
+const SectionSchema = object({
     sectionId: string(),
     title: string(),
+    subtitle: string().optional(),
     icon: string().optional(),
-    queries: array(QuerySchema$1),
+    queries: array(QuerySchema),
 });
 const XFormSchema = object({
     uuid: string(),
@@ -4615,7 +4610,7 @@ const XFormSchema = object({
     logo: string().optional(),
     brandColor: string().optional(),
     logoPosition: string().optional(),
-    model: array(SectionSchema$1),
+    model: array(SectionSchema),
 });
 
 /**
@@ -56608,14 +56603,15 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
                     ` } }),
                 accordionRoot))));
 };
-const AccordionItem = ({ sectionId, title, children, disabled = false, icon }) => {
+const AccordionItem = ({ sectionId, title, subtitle, children, disabled = false, icon }) => {
     const { design } = React.useContext(AccordionContext);
     return (React.createElement(Item$2, { value: sectionId, disabled: disabled, className: `v-accordion-item-${design}` },
         React.createElement(Header, { style: { margin: 0 } },
             React.createElement(Trigger2, { className: "v-accordion-trigger" },
                 React.createElement(p$5, { align: "center", gap: "3" },
                     icon && (React.createElement("div", { style: { display: 'flex', alignItems: 'center', color: 'var(--accordion-title-color, var(--accent-9))' } }, icon)),
-                    React.createElement(p$d, { size: "3", weight: "bold", style: { color: 'var(--accordion-title-color, var(--gray-12))' } }, title)),
+                    React.createElement(p$d, { size: "3", weight: "bold", style: { color: 'var(--accordion-title-color, var(--gray-12))' } }, title),
+                    React.createElement(p$d, { size: "2", weight: "light", style: { color: 'var(--accordion-title-color, var(--gray-12))' } }, subtitle)),
                 React.createElement(Icon, { name: "chevrondown", height: "20", width: "20", className: "v-accordion-chevron" }))),
         React.createElement(Content2$3, { className: "v-accordion-content", style: { overflow: 'hidden' } },
             React.createElement("div", { style: { padding: '24px 16px 24px 16px' } },
@@ -56884,6 +56880,138 @@ const rangeSliderInputType = ["range", "rangeslider", "rangeinput", "rangeslider
 const toggleInputType = ["toggle", "switch", "toggleinput", "toggle-input", "input-toggle", "inputtoggle"];
 const conditionalInputType = ["conditional", "conditionaltoggle", "conditionalcheckbox", "conditionalselect", "conditional-toggle", "conditional-select", "conditional-checkbox"];
 
+const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline', width = 12, newRow, placeholder = "Select date & time", isHinted, hintText, hintUrl, errorText, readOnly, className, formikContext }) => {
+    const defaultFormikContext = formik.useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`DateTimePicker '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = formik.getIn(values, alias);
+    const fieldTouched = formik.getIn(touched, alias);
+    const fieldError = formik.getIn(errors, alias);
+    const inputId = `${alias}FormInput`;
+    const labelId = `${alias}InputLabel`;
+    const hasError = Boolean(fieldTouched && fieldError);
+    const containerRef = React.useRef(null);
+    const [neuVars, setNeuVars] = React.useState({});
+    React.useEffect(() => {
+        if (inputtype === 'datetimepicker-neumorphic' && containerRef.current) {
+            const parentBg = getNearestParentBackground(containerRef.current.parentElement);
+            setNeuVars({
+                '--neu-bg': parentBg,
+                '--neu-shadow-dark': adjustColor(parentBg, -20),
+                '--neu-shadow-light': adjustColor(parentBg, 20),
+                '--neu-text': 'var(--gray-12)',
+                '--accent': 'var(--accent-9)',
+            });
+        }
+    }, [inputtype]);
+    // --- STYLES ---
+    const getInputStyles = () => {
+        const base = { cursor: 'pointer', transition: 'all 0.2s' };
+        if (inputtype === 'datetimepicker-neumorphic')
+            return Object.assign(Object.assign(Object.assign({}, base), { backgroundColor: 'var(--neu-bg)', border: 'none', boxShadow: hasError ? 'inset 2px 2px 5px var(--red-9), inset -2px -2px 5px var(--neu-shadow-light)'
+                    : 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '12px', height: '40px' }), neuVars);
+        if (inputtype === 'datetimepicker-material')
+            return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--gray-2)', border: 'none', borderBottom: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-8)', borderRadius: '4px 4px 0 0' });
+        return Object.assign(Object.assign({}, base), { backgroundColor: 'transparent', boxShadow: hasError ? '0 0 0 1px var(--red-9)' : '0 0 0 1px var(--gray-7)', borderRadius: '6px' });
+    };
+    return (React.createElement(Column, { span: width, newLine: newRow },
+        React.createElement(p$5, { direction: "column", gap: "2", ref: containerRef, className: className, style: { width: '100%' } },
+            React.createElement("style", null, `
+                    .react-datepicker-popper { z-index: 9999 !important; }
+                    .react-datepicker {
+                        font-family: var(--default-font-family, sans-serif);
+                        border: none !important;
+                        border-radius: 12px !important;
+                        box-shadow: 0 10px 40px -10px rgba(0,0,0,0.2);
+                        background-color: var(--color-panel-solid) !important;
+                        padding: 12px;
+                        display: flex !important; /* Needed for Time column layout */
+                    }
+                    .react-datepicker__header {
+                        background-color: transparent !important;
+                        border-bottom: none !important;
+                    }
+                    .react-datepicker__day-name { color: var(--gray-9); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; }
+                    .react-datepicker__day {
+                        width: 32px; height: 32px; line-height: 32px;
+                        border-radius: 50% !important;
+                        margin: 2px !important;
+                        color: var(--gray-12);
+                    }
+                    .react-datepicker__day:hover { background-color: var(--gray-4) !important; }
+                    .react-datepicker__day--selected {
+                        background-color: var(--accent-9) !important;
+                        color: white !important;
+                        font-weight: bold;
+                    }
+                    .react-datepicker__day--keyboard-selected { background-color: var(--accent-3) !important; color: var(--accent-11) !important; }
+                    .react-datepicker__day--today { color: var(--accent-11); font-weight: 900; }
+                    
+                    /* --- TIME PICKER SPECIFIC STYLES --- */
+                    .react-datepicker__time-container {
+                        border-left: 1px solid var(--gray-5) !important;
+                        width: 110px !important;
+                        background: transparent !important;
+                    }
+                    .react-datepicker__header--time {
+                        background: transparent !important;
+                        padding-top: 10px;
+                        padding-bottom: 10px;
+                    }
+                    .react-datepicker-time__header {
+                        color: var(--gray-11) !important;
+                        font-size: 0.75rem !important;
+                        text-transform: uppercase;
+                    }
+                    .react-datepicker__time-list-item {
+                        height: 32px !important;
+                        display: flex !important;
+                        align-items: center !important;
+                        justify-content: center !important;
+                        font-size: 0.9rem !important;
+                        color: var(--gray-12);
+                    }
+                    .react-datepicker__time-list-item:hover {
+                        background-color: var(--gray-4) !important;
+                    }
+                    .react-datepicker__time-list-item--selected {
+                        background-color: var(--accent-9) !important;
+                        color: white !important;
+                        font-weight: bold;
+                    }
+                    
+                    /* Custom Scrollbar for Time List */
+                    .react-datepicker__time-list::-webkit-scrollbar { width: 4px; }
+                    .react-datepicker__time-list::-webkit-scrollbar-thumb { background: var(--gray-6); border-radius: 4px; }
+                    
+                    /* Neumorphic Popup Overrides */
+                    ${inputtype === 'datetimepicker-neumorphic' ? `
+                        .react-datepicker {
+                            background-color: var(--neu-bg) !important;
+                            box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
+                        }
+                        .react-datepicker__day:hover, .react-datepicker__time-list-item:hover { box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light); background: transparent !important; }
+                        .react-datepicker__day--selected, .react-datepicker__time-list-item--selected { box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light); color: var(--accent) !important; background: var(--neu-bg) !important; }
+                    ` : ''}
+                `),
+            React.createElement(DatePicker$1, { id: `${alias}DatePicker`, selected: (fieldValue && new Date(fieldValue)) || null, onChange: (val) => {
+                    setFieldValue(alias, val);
+                    setFieldTouched(alias, true, false);
+                }, showTimeSelect: true, timeFormat: "HH:mm", timeIntervals: 15, dateFormat: "MMM d, yyyy h:mm aa", disabled: readOnly, placeholderText: placeholder, "aria-labelledby": labelId, customInput: React.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
+                    React.createElement(c, null,
+                        React.createElement(Icon, { name: "clock", height: "16", width: "16", style: { color: 'var(--gray-10)' } }))) }),
+            React.createElement("div", null,
+                inputLabel && React.createElement(p$d, { id: labelId, size: "2", weight: "bold", as: "div", style: { display: 'inline' } }, inputLabel),
+                isHinted && (React.createElement(e, { content: hintText || "No hint", align: "start" },
+                    React.createElement("a", { href: hintUrl || "#", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
+                        React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+                hasError && (React.createElement(p$d, { size: "1", color: "red", style: { display: 'block' } }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field")))))));
+};
+
 const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice', brandColor = "#000000", onPrev, onNext, onFinish }) => {
     const [dualToggled, setDualToggled] = React.useState(false);
     const [neuVars] = React.useState({
@@ -56925,8 +57053,9 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
             case datePickerInputType.includes(normalizedType):
                 return React.createElement(DatePicker, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case dateRangePickerInputType.includes(normalizedType):
+                return React.createElement(DateRangePicker, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case dateTimePickerInputType.includes(normalizedType):
-                return React.createElement(DateRangePicker, Object.assign({}, layoutProps));
+                return React.createElement(DateTimePicker, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case dropdownInputType.includes(normalizedType):
                 return React.createElement(Dropdown, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, inputOptions: inputOptions || [InputOptionsPlaceholder] }));
             case fileInputType.includes(normalizedType):
@@ -56988,23 +57117,23 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
                             React.createElement("div", { className: "neu-indicator" })),
                         React.createElement(Icon, { name: "layers", height: "20", width: "20", color: brandColor, style: { opacity: readOnlyMode ? 0.5 : 1, cursor: 'pointer' }, onClick: () => setDualToggled(!dualToggled) })),
                     dualToggled ?
-                        React.createElement(Accordion, { defaultOpenId: ((_b = (_a = xFormModel.model) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.sectionId) ? String(xFormModel.model[0].sectionId) : '', allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
+                        React.createElement(Accordion, { defaultOpenId: ((_b = (_a = xFormModel.model) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.sectionId) ? String(xFormModel.model[0].sectionId) : '', allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title, subtitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
                             React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries))))))
                         :
                             xFormModel.model.map((formsection) => (React.createElement(React.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
-                                React.createElement(SectionTitle, { withSeparator: false, backgroundColor: brandColor, titleColor: '#FFFFFF', title: formsection.title, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) }),
+                                React.createElement(SectionTitle, { withSeparator: false, backgroundColor: brandColor, titleColor: '#FFFFFF', title: formsection.title, subTitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) }),
                                 React.createElement(Row, null, renderQueries(formsection.queries)))))));
             case 'accordion':
-                return (React.createElement(Accordion, { defaultOpenId: ((_d = (_c = xFormModel.model) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.sectionId) ? String(xFormModel.model[0].sectionId) : '', allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
+                return (React.createElement(Accordion, { defaultOpenId: ((_d = (_c = xFormModel.model) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.sectionId) ? String(xFormModel.model[0].sectionId) : '', allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title, subtitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
                     React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)))))));
             case 'codex':
-                return (React.createElement(Codex, { brandColor: brandColor }, xFormModel.model.map((formsection, index, array) => (React.createElement(CodexItem, { key: formsection.sectionId, stepId: String(formsection.sectionId), title: formsection.title, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
+                return (React.createElement(Codex, { brandColor: brandColor }, xFormModel.model.map((formsection, index, array) => (React.createElement(CodexItem, { key: formsection.sectionId, stepId: String(formsection.sectionId), title: formsection.title, subtitleDescription: formsection.subtitle ? formsection.subtitle : undefined, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
                     React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)),
                     React.createElement(CodexControls, { prevStepId: index > 0 ? String(array[index - 1].sectionId) : undefined, nextStepId: index < array.length - 1 ? String(array[index + 1].sectionId) : undefined, onPrev: onPrev, onNext: onNext, onFinish: onFinish }))))));
             case 'codice':
             default:
                 return (React.createElement(React.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React.createElement(React.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
-                    React.createElement(SectionTitle, { withSeparator: false, backgroundColor: brandColor, titleColor: '#FFFFFF', title: formsection.title, icon: React.createElement(Icon, { name: String(formsection.icon) }) }),
+                    React.createElement(SectionTitle, { withSeparator: false, backgroundColor: brandColor, titleColor: '#FFFFFF', title: formsection.title, subTitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React.createElement(Icon, { name: String(formsection.icon) }) }),
                     React.createElement(Row, null, renderQueries(formsection.queries)))))));
         }
     };
@@ -57248,14 +57377,15 @@ class VectorSigma {
      * VΣ builder method to create a Section object in the xForm model.
      * @param sectionId sectionId string for the xForm model section.
      * @param title title string for the xForm model section.
+     * @param subtitle optional subtitle string for the xForm model section.
      * @param icon xForm icon name for the xForm model section.
      * @example
      * const xForm97 = new VectorSigma()
      * .setBrand("#000000", brandLogoUrlRef, 'right')
-     * .createSection('bio-data', 'Personal Information', 'user')
+     * .createSection('bio-data', 'Personal Information', 'Help us learn more to deliver a bespoke experience', 'user')
      */
-    createSection(sectionId, title, icon) {
-        this.formObject.model.push({ sectionId, title, icon, queries: [] });
+    createSection(sectionId, title, subtitle, icon) {
+        this.formObject.model.push({ sectionId, title, subtitle, icon, queries: [] });
         return this;
     }
     /**
@@ -57389,138 +57519,6 @@ class VectorSigma {
     }
 }
 
-const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline', width = 12, newRow, placeholder = "Select date & time", isHinted, hintText, hintUrl, errorText, readOnly, className, formikContext }) => {
-    const defaultFormikContext = formik.useFormikContext();
-    const activeContext = formikContext || defaultFormikContext;
-    if (!activeContext) {
-        console.error(`DateTimePicker '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
-        return null;
-    }
-    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
-    const fieldValue = formik.getIn(values, alias);
-    const fieldTouched = formik.getIn(touched, alias);
-    const fieldError = formik.getIn(errors, alias);
-    const inputId = `${alias}FormInput`;
-    const labelId = `${alias}InputLabel`;
-    const hasError = Boolean(fieldTouched && fieldError);
-    const containerRef = React.useRef(null);
-    const [neuVars, setNeuVars] = React.useState({});
-    React.useEffect(() => {
-        if (inputtype === 'datetimepicker-neumorphic' && containerRef.current) {
-            const parentBg = getNearestParentBackground(containerRef.current.parentElement);
-            setNeuVars({
-                '--neu-bg': parentBg,
-                '--neu-shadow-dark': adjustColor(parentBg, -20),
-                '--neu-shadow-light': adjustColor(parentBg, 20),
-                '--neu-text': 'var(--gray-12)',
-                '--accent': 'var(--accent-9)',
-            });
-        }
-    }, [inputtype]);
-    // --- STYLES ---
-    const getInputStyles = () => {
-        const base = { cursor: 'pointer', transition: 'all 0.2s' };
-        if (inputtype === 'datetimepicker-neumorphic')
-            return Object.assign(Object.assign(Object.assign({}, base), { backgroundColor: 'var(--neu-bg)', border: 'none', boxShadow: hasError ? 'inset 2px 2px 5px var(--red-9), inset -2px -2px 5px var(--neu-shadow-light)'
-                    : 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '12px', height: '40px' }), neuVars);
-        if (inputtype === 'datetimepicker-material')
-            return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--gray-2)', border: 'none', borderBottom: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-8)', borderRadius: '4px 4px 0 0' });
-        return Object.assign(Object.assign({}, base), { backgroundColor: 'transparent', boxShadow: hasError ? '0 0 0 1px var(--red-9)' : '0 0 0 1px var(--gray-7)', borderRadius: '6px' });
-    };
-    return (React.createElement(Column, { span: width, newLine: newRow },
-        React.createElement(p$5, { direction: "column", gap: "2", ref: containerRef, className: className, style: { width: '100%' } },
-            React.createElement("style", null, `
-                    .react-datepicker-popper { z-index: 9999 !important; }
-                    .react-datepicker {
-                        font-family: var(--default-font-family, sans-serif);
-                        border: none !important;
-                        border-radius: 12px !important;
-                        box-shadow: 0 10px 40px -10px rgba(0,0,0,0.2);
-                        background-color: var(--color-panel-solid) !important;
-                        padding: 12px;
-                        display: flex !important; /* Needed for Time column layout */
-                    }
-                    .react-datepicker__header {
-                        background-color: transparent !important;
-                        border-bottom: none !important;
-                    }
-                    .react-datepicker__day-name { color: var(--gray-9); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; }
-                    .react-datepicker__day {
-                        width: 32px; height: 32px; line-height: 32px;
-                        border-radius: 50% !important;
-                        margin: 2px !important;
-                        color: var(--gray-12);
-                    }
-                    .react-datepicker__day:hover { background-color: var(--gray-4) !important; }
-                    .react-datepicker__day--selected {
-                        background-color: var(--accent-9) !important;
-                        color: white !important;
-                        font-weight: bold;
-                    }
-                    .react-datepicker__day--keyboard-selected { background-color: var(--accent-3) !important; color: var(--accent-11) !important; }
-                    .react-datepicker__day--today { color: var(--accent-11); font-weight: 900; }
-                    
-                    /* --- TIME PICKER SPECIFIC STYLES --- */
-                    .react-datepicker__time-container {
-                        border-left: 1px solid var(--gray-5) !important;
-                        width: 110px !important;
-                        background: transparent !important;
-                    }
-                    .react-datepicker__header--time {
-                        background: transparent !important;
-                        padding-top: 10px;
-                        padding-bottom: 10px;
-                    }
-                    .react-datepicker-time__header {
-                        color: var(--gray-11) !important;
-                        font-size: 0.75rem !important;
-                        text-transform: uppercase;
-                    }
-                    .react-datepicker__time-list-item {
-                        height: 32px !important;
-                        display: flex !important;
-                        align-items: center !important;
-                        justify-content: center !important;
-                        font-size: 0.9rem !important;
-                        color: var(--gray-12);
-                    }
-                    .react-datepicker__time-list-item:hover {
-                        background-color: var(--gray-4) !important;
-                    }
-                    .react-datepicker__time-list-item--selected {
-                        background-color: var(--accent-9) !important;
-                        color: white !important;
-                        font-weight: bold;
-                    }
-                    
-                    /* Custom Scrollbar for Time List */
-                    .react-datepicker__time-list::-webkit-scrollbar { width: 4px; }
-                    .react-datepicker__time-list::-webkit-scrollbar-thumb { background: var(--gray-6); border-radius: 4px; }
-                    
-                    /* Neumorphic Popup Overrides */
-                    ${inputtype === 'datetimepicker-neumorphic' ? `
-                        .react-datepicker {
-                            background-color: var(--neu-bg) !important;
-                            box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
-                        }
-                        .react-datepicker__day:hover, .react-datepicker__time-list-item:hover { box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light); background: transparent !important; }
-                        .react-datepicker__day--selected, .react-datepicker__time-list-item--selected { box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light); color: var(--accent) !important; background: var(--neu-bg) !important; }
-                    ` : ''}
-                `),
-            React.createElement(DatePicker$1, { id: `${alias}DatePicker`, selected: (fieldValue && new Date(fieldValue)) || null, onChange: (val) => {
-                    setFieldValue(alias, val);
-                    setFieldTouched(alias, true, false);
-                }, showTimeSelect: true, timeFormat: "HH:mm", timeIntervals: 15, dateFormat: "MMM d, yyyy h:mm aa", disabled: readOnly, placeholderText: placeholder, "aria-labelledby": labelId, customInput: React.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
-                    React.createElement(c, null,
-                        React.createElement(Icon, { name: "clock", height: "16", width: "16", style: { color: 'var(--gray-10)' } }))) }),
-            React.createElement("div", null,
-                inputLabel && React.createElement(p$d, { id: labelId, size: "2", weight: "bold", as: "div", style: { display: 'inline' } }, inputLabel),
-                isHinted && (React.createElement(e, { content: hintText || "No hint", align: "start" },
-                    React.createElement("a", { href: hintUrl || "#", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
-                        React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React.createElement(p$d, { size: "1", color: "red", style: { display: 'block' } }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field")))))));
-};
-
 const safeParseUuidFormat = (typeString) => {
     try {
         if (!(typeString === null || typeString === void 0 ? void 0 : typeString.startsWith('uuid')))
@@ -57618,77 +57616,6 @@ const Container = (_a) => {
     return (React.createElement(p$2, Object.assign({ size: "3", px: "3" }, props), children));
 };
 
-// JSON defintion (schema) for xForm object
-const InputOptionSchema = object({
-    optionid: number().or(uuid()),
-    text: string(),
-    optionvalue: string(),
-    tag: string().optional(),
-    score: number().or(float64()).optional(),
-    note: string().optional(),
-    optionurl: url().optional(),
-});
-const NestedQuerySchema = object({
-    queryId: number().or(uuid()),
-    inputType: string(),
-    inputAlias: string(),
-    inputLabel: string(),
-    inputPlaceholder: string(),
-    defaultValue: any().optional(),
-    minValue: number().optional(),
-    maxValue: number().optional(),
-    stepValue: number().or(float64()).optional(),
-    newRow: boolean(),
-    inputWidth: number(),
-    inputHeight: number().optional(),
-    isRequired: boolean(),
-    isHinted: boolean(),
-    hintText: string().nullish(),
-    hintUrl: url().nullish(),
-    queryResponse: any().nullable(),
-    inputOptions: array(InputOptionSchema).optional(),
-    toggledInput: any().nullable().optional(),
-    triggerValue: any().nullable().optional(),
-    errorText: string().optional()
-});
-const QuerySchema = object({
-    queryId: number().or(uuid()),
-    inputType: string(),
-    inputAlias: string(),
-    inputLabel: string(),
-    inputPlaceholder: string(),
-    defaultValue: any().optional(),
-    minValue: number().optional(),
-    maxValue: number().optional(),
-    stepValue: number().or(float64()).optional(),
-    newRow: boolean(),
-    inputWidth: number(),
-    inputHeight: number().optional(),
-    isRequired: boolean(),
-    isHinted: boolean(),
-    hintText: string().nullable(),
-    hintUrl: url().nullable(),
-    queryResponse: any().nullable(),
-    inputOptions: array(InputOptionSchema).optional(),
-    toggledInput: NestedQuerySchema.nullable().optional(),
-    triggerValue: any().nullable().optional(),
-    errorText: string().optional()
-});
-const SectionSchema = object({
-    sectionId: number().or(string()),
-    title: string(),
-    icon: string().nullable(),
-    queries: array(QuerySchema)
-});
-const xFormSchema = object({
-    uuid: uuid(),
-    name: string(),
-    logo: url().nullable(),
-    brandcolor: string().nullable(),
-    logoPosition: string().nullable(),
-    model: array(SectionSchema),
-});
-
 const parseUuidFormat = (input) => {
     if (!input.toLowerCase().startsWith('uuid')) {
         return [4, 4, 4, 4];
@@ -57725,13 +57652,16 @@ exports.FlagIcon = FlagIcon;
 exports.Icon = Icon;
 exports.ImageOutput = ImageOutput;
 exports.Input = Input$1;
+exports.InputOptionSchema = InputOptionSchema;
 exports.MultipleSelect = MultipleSelect;
 exports.OptionSelect = OptionSelect;
 exports.PasswordInput = PasswordInput;
 exports.PhoneInput = PhoneInput;
+exports.QuerySchema = QuerySchema;
 exports.RadioGroupInput = RadioGroupInput;
 exports.RangeSlider = RangeSlider;
 exports.Row = Row;
+exports.SectionSchema = SectionSchema;
 exports.SectionTitle = SectionTitle;
 exports.SliderInput = SliderInput;
 exports.StockInput = StockInput;
@@ -57741,8 +57671,8 @@ exports.ThemePanel = N;
 exports.Toggle = Toggle;
 exports.UUIDInput = UUIDInput;
 exports.VectorSigma = VectorSigma;
+exports.XFormSchema = XFormSchema;
 exports.normalizeXForm = normalizeXForm;
 exports.parseUuidFormat = parseUuidFormat;
 exports.primeMatrix = primeMatrix;
 exports.useStepper = useStepper;
-exports.xFormSchema = xFormSchema;