@emeraldemperaur/vector-sigma 1.4.42 → 1.4.43

package/lib/index.esm.js

@@ -733,7 +733,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})$`);
@@ -1416,10 +1416,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) => {
@@ -4085,17 +4085,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);
@@ -4550,7 +4544,7 @@ function superRefine(fn) {
     return _superRefine(fn);
 }
 
-const InputOptionSchema$1 = object({
+const InputOptionSchema = object({
     optionid: number(),
     optionvalue: union([string(), number(), boolean()]),
     optionurl: string().optional(),
@@ -4559,7 +4553,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(),
@@ -4575,18 +4569,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(),
@@ -4594,7 +4589,7 @@ const XFormSchema = object({
     logo: string().optional(),
     brandColor: string().optional(),
     logoPosition: string().optional(),
-    model: array(SectionSchema$1),
+    model: array(SectionSchema),
 });
 
 /**
@@ -56587,14 +56582,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 } = useContext(AccordionContext);
     return (React__default.createElement(Item$2, { value: sectionId, disabled: disabled, className: `v-accordion-item-${design}` },
         React__default.createElement(Header, { style: { margin: 0 } },
             React__default.createElement(Trigger2, { className: "v-accordion-trigger" },
                 React__default.createElement(p$5, { align: "center", gap: "3" },
                     icon && (React__default.createElement("div", { style: { display: 'flex', alignItems: 'center', color: 'var(--accordion-title-color, var(--accent-9))' } }, icon)),
-                    React__default.createElement(p$d, { size: "3", weight: "bold", style: { color: 'var(--accordion-title-color, var(--gray-12))' } }, title)),
+                    React__default.createElement(p$d, { size: "3", weight: "bold", style: { color: 'var(--accordion-title-color, var(--gray-12))' } }, title),
+                    React__default.createElement(p$d, { size: "2", weight: "light", style: { color: 'var(--accordion-title-color, var(--gray-12))' } }, subtitle)),
                 React__default.createElement(Icon, { name: "chevrondown", height: "20", width: "20", className: "v-accordion-chevron" }))),
         React__default.createElement(Content2$3, { className: "v-accordion-content", style: { overflow: 'hidden' } },
             React__default.createElement("div", { style: { padding: '24px 16px 24px 16px' } },
@@ -56863,6 +56859,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 = 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 = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
+    const inputId = `${alias}FormInput`;
+    const labelId = `${alias}InputLabel`;
+    const hasError = Boolean(fieldTouched && fieldError);
+    const containerRef = useRef(null);
+    const [neuVars, setNeuVars] = useState({});
+    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__default.createElement(Column, { span: width, newLine: newRow },
+        React__default.createElement(p$5, { direction: "column", gap: "2", ref: containerRef, className: className, style: { width: '100%' } },
+            React__default.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__default.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__default.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
+                    React__default.createElement(c, null,
+                        React__default.createElement(Icon, { name: "clock", height: "16", width: "16", style: { color: 'var(--gray-10)' } }))) }),
+            React__default.createElement("div", null,
+                inputLabel && React__default.createElement(p$d, { id: labelId, size: "2", weight: "bold", as: "div", style: { display: 'inline' } }, inputLabel),
+                isHinted && (React__default.createElement(e, { content: hintText || "No hint", align: "start" },
+                    React__default.createElement("a", { href: hintUrl || "#", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
+                        React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+                hasError && (React__default.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] = useState(false);
     const [neuVars] = useState({
@@ -56904,8 +57032,9 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
             case datePickerInputType.includes(normalizedType):
                 return React__default.createElement(DatePicker, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case dateRangePickerInputType.includes(normalizedType):
+                return React__default.createElement(DateRangePicker, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case dateTimePickerInputType.includes(normalizedType):
-                return React__default.createElement(DateRangePicker, Object.assign({}, layoutProps));
+                return React__default.createElement(DateTimePicker, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case dropdownInputType.includes(normalizedType):
                 return React__default.createElement(Dropdown, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, inputOptions: inputOptions || [InputOptionsPlaceholder] }));
             case fileInputType.includes(normalizedType):
@@ -56967,23 +57096,23 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
                             React__default.createElement("div", { className: "neu-indicator" })),
                         React__default.createElement(Icon, { name: "layers", height: "20", width: "20", color: brandColor, style: { opacity: readOnlyMode ? 0.5 : 1, cursor: 'pointer' }, onClick: () => setDualToggled(!dualToggled) })),
                     dualToggled ?
-                        React__default.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__default.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title, icon: React__default.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
+                        React__default.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__default.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title, subtitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React__default.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
                             React__default.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries))))))
                         :
                             xFormModel.model.map((formsection) => (React__default.createElement(React__default.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
-                                React__default.createElement(SectionTitle, { withSeparator: false, backgroundColor: brandColor, titleColor: '#FFFFFF', title: formsection.title, icon: React__default.createElement(Icon, { name: formsection.icon || "fontfamily" }) }),
+                                React__default.createElement(SectionTitle, { withSeparator: false, backgroundColor: brandColor, titleColor: '#FFFFFF', title: formsection.title, subTitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React__default.createElement(Icon, { name: formsection.icon || "fontfamily" }) }),
                                 React__default.createElement(Row, null, renderQueries(formsection.queries)))))));
             case 'accordion':
-                return (React__default.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__default.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title, icon: React__default.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
+                return (React__default.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__default.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title, subtitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React__default.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
                     React__default.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)))))));
             case 'codex':
-                return (React__default.createElement(Codex, { brandColor: brandColor }, xFormModel.model.map((formsection, index, array) => (React__default.createElement(CodexItem, { key: formsection.sectionId, stepId: String(formsection.sectionId), title: formsection.title, icon: React__default.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
+                return (React__default.createElement(Codex, { brandColor: brandColor }, xFormModel.model.map((formsection, index, array) => (React__default.createElement(CodexItem, { key: formsection.sectionId, stepId: String(formsection.sectionId), title: formsection.title, subtitleDescription: formsection.subtitle ? formsection.subtitle : undefined, icon: React__default.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
                     React__default.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)),
                     React__default.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__default.createElement(React__default.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React__default.createElement(React__default.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
-                    React__default.createElement(SectionTitle, { withSeparator: false, backgroundColor: brandColor, titleColor: '#FFFFFF', title: formsection.title, icon: React__default.createElement(Icon, { name: String(formsection.icon) }) }),
+                    React__default.createElement(SectionTitle, { withSeparator: false, backgroundColor: brandColor, titleColor: '#FFFFFF', title: formsection.title, subTitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React__default.createElement(Icon, { name: String(formsection.icon) }) }),
                     React__default.createElement(Row, null, renderQueries(formsection.queries)))))));
         }
     };
@@ -57227,14 +57356,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;
     }
     /**
@@ -57368,138 +57498,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 = 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 = getIn(values, alias);
-    const fieldTouched = getIn(touched, alias);
-    const fieldError = getIn(errors, alias);
-    const inputId = `${alias}FormInput`;
-    const labelId = `${alias}InputLabel`;
-    const hasError = Boolean(fieldTouched && fieldError);
-    const containerRef = useRef(null);
-    const [neuVars, setNeuVars] = useState({});
-    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__default.createElement(Column, { span: width, newLine: newRow },
-        React__default.createElement(p$5, { direction: "column", gap: "2", ref: containerRef, className: className, style: { width: '100%' } },
-            React__default.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__default.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__default.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
-                    React__default.createElement(c, null,
-                        React__default.createElement(Icon, { name: "clock", height: "16", width: "16", style: { color: 'var(--gray-10)' } }))) }),
-            React__default.createElement("div", null,
-                inputLabel && React__default.createElement(p$d, { id: labelId, size: "2", weight: "bold", as: "div", style: { display: 'inline' } }, inputLabel),
-                isHinted && (React__default.createElement(e, { content: hintText || "No hint", align: "start" },
-                    React__default.createElement("a", { href: hintUrl || "#", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
-                        React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React__default.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')))
@@ -57597,77 +57595,6 @@ const Container = (_a) => {
     return (React__default.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];
@@ -57680,4 +57607,4 @@ const parseUuidFormat = (input) => {
     return numbers;
 };
 
-export { Accordion, AccordionItem, AvatarInput, ButtonInput, CURRENCIES, CheckboxGroupInput, Codex, CodexControls, CodexItem, Column, ConditionalTrigger, Container, CreditCardInput, CurrencyInput, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File$1 as File, FileMultiple, FlagIcon, Icon, ImageOutput, Input$1 as Input, MultipleSelect, OptionSelect, PasswordInput, PhoneInput, RadioGroupInput, RangeSlider, Row, SectionTitle, SliderInput, StockInput, Teletraan1, R as Theme, N as ThemePanel, Toggle, UUIDInput, VectorSigma, normalizeXForm, parseUuidFormat, primeMatrix, useStepper, xFormSchema };
+export { Accordion, AccordionItem, AvatarInput, ButtonInput, CURRENCIES, CheckboxGroupInput, Codex, CodexControls, CodexItem, Column, ConditionalTrigger, Container, CreditCardInput, CurrencyInput, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File$1 as File, FileMultiple, FlagIcon, Icon, ImageOutput, Input$1 as Input, InputOptionSchema, MultipleSelect, OptionSelect, PasswordInput, PhoneInput, QuerySchema, RadioGroupInput, RangeSlider, Row, SectionSchema, SectionTitle, SliderInput, StockInput, Teletraan1, R as Theme, N as ThemePanel, Toggle, UUIDInput, VectorSigma, XFormSchema, normalizeXForm, parseUuidFormat, primeMatrix, useStepper };

package/lib/types/index.d.ts

@@ -35,7 +35,7 @@ export * from './layouts/row/row';
 export * from './layouts/accordion/accordion';
 export * from './layouts/codex/codex';
 export * from './layouts/codex/codexcontrols';
-export * from './utils/architect';
+export * from './utils/voltron';
 export * from './utils/uuidparser';
 export * from './utils/currencyconfig';
 export * from './utils/minerva';

package/lib/types/layouts/accordion/accordion.d.ts

@@ -81,6 +81,12 @@ export interface AccordionItemProps {
      * title="What is the VΣ Protocol?"
      */
     title: ReactNode | string;
+    /**
+     * * The subheader or trigger text for this accordion section.
+     * * @example
+     * subtitle="Get in touch to learn more"
+     */
+    subtitle?: ReactNode | string;
     /**
      * * The content revealed when the section is opened.
      */
@@ -99,4 +105,4 @@ export interface AccordionItemProps {
     icon?: ReactNode;
 }
 export declare const Accordion: ({ design, defaultOpenId, allowMultiple, brandcolor, titleColor, width, newRow, className, style, children }: AccordionProps) => React.JSX.Element;
-export declare const AccordionItem: ({ sectionId, title, children, disabled, icon }: AccordionItemProps) => React.JSX.Element;
+export declare const AccordionItem: ({ sectionId, title, subtitle, children, disabled, icon }: AccordionItemProps) => React.JSX.Element;

package/lib/types/utils/voltron.d.ts

@@ -35,6 +35,7 @@ export declare const QuerySchema: z.ZodType<XFormQuery>;
 export declare const SectionSchema: z.ZodObject<{
     sectionId: z.ZodString;
     title: z.ZodString;
+    subtitle: z.ZodOptional<z.ZodString>;
     icon: z.ZodOptional<z.ZodString>;
     queries: z.ZodArray<z.ZodType<XFormQuery, unknown, z.core.$ZodTypeInternals<XFormQuery, unknown>>>;
 }, z.core.$strip>;
@@ -47,6 +48,7 @@ export declare const XFormSchema: z.ZodObject<{
     model: z.ZodArray<z.ZodObject<{
         sectionId: z.ZodString;
         title: z.ZodString;
+        subtitle: z.ZodOptional<z.ZodString>;
         icon: z.ZodOptional<z.ZodString>;
         queries: z.ZodArray<z.ZodType<XFormQuery, unknown, z.core.$ZodTypeInternals<XFormQuery, unknown>>>;
     }, z.core.$strip>>;

package/lib/types/vectorSigma.d.ts

@@ -105,13 +105,14 @@ export declare class VectorSigma<T extends Record<string, any> = Record<string,
      * 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: string, title: string, icon?: string): this;
+    createSection(sectionId: string, title: string, subtitle?: string, icon?: string): this;
     /**
      * VΣ builder method to add a Query object to the xForm model section by sectionId.
      * @param sectionId sectionId string for the target xForm model section.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emeraldemperaur/vector-sigma",
-  "version": "1.4.42",
+  "version": "1.4.43",
   "description": "Dynamic Form Orchestrator: NPM Package",
   "repository": {
     "type": "git",