@emeraldemperaur/vector-sigma 1.4.17 → 1.4.19

package/README.md

@@ -96,7 +96,7 @@ const App = () => {
 
 <li><strong>🧩Exported UI Components</strong></br>
 <p align="justify">Explicitly exported reusable form UI components with material, outline and neumorphic design variants from package entry point <code>src/index.ts</code> to enable developer-friendly use as lightweight component library.</p>
-<p><em>Container, Row, Column, Theme, AvatarInput, ButtonInput, CheckboxGroupInput, ConditionalTrigger, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File, FileMultiple, FlagIcon, Icon, Image, Input, PasswordInput, PhoneInput, UUIDInput, CreditCardInput, CurrencyInput, StockInput, RadioGroupInput, OptionSelect, MultipleSelect, RangeSlider, SliderInput, Toggle, SectionTitle</em></p>
+<p><em>Container, Row, Column, Theme, AvatarInput, ButtonInput, CheckboxGroupInput, ConditionalTrigger, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File, FileMultiple, FlagIcon, Icon, Image, Input, PasswordInput, PhoneInput, CreditCardInput, CurrencyInput, StockInput, RadioGroupInput, OptionSelect, MultipleSelect, RangeSlider, SliderInput, Toggle, SectionTitle</em></p>
 
 ```javascript
 import { Container, Column, Row, CheckboxGroup, Dropdown, File, RangeSlider } 
@@ -190,6 +190,8 @@ const App = () => {
 
 ```bash
 npm install --save-dev @changesets/cli
+# Changeset project initializer
+npx changeset init
 ```
 </li>
 <li>
@@ -208,6 +210,15 @@ git checkout -b new-changeset-branchname
 ```bash
 # Changeset - patch, minor, major versioning
 npx changeset
+
+# PreRelease mode (alpha)
+npx changeset pre enter alpha
+
+# PreRelease mode (beta)
+npx changeset pre enter beta
+
+# Exit PreRelease mode 
+npx changeset pre exit
 ```
 </li>
 

package/lib/index.cjs

@@ -26538,7 +26538,7 @@ const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline
 };
 
 const Dropdown = (_a) => {
-    var { inputtype = 'dropdown-outline', alias, readOnly, width, inputLabel, placeholder, value, inputOptions, style, newRow, isHinted, hintText, hintUrl, defaultvalue, errorText, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "value", "inputOptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "defaultvalue", "errorText", "className"]);
+    var { inputtype = 'dropdown-outline', alias, readOnly, width, inputLabel, placeholder, inputOptions, style, newRow, isHinted, hintText, hintUrl, errorText, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "inputOptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "className"]);
     const triggerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
@@ -26673,7 +26673,7 @@ const getFileIcon$1 = (type, name) => {
 };
 const File$1 = (_a) => {
     var _b;
-    var { inputtype = 'fileinput-outline', alias, readOnly, width, inputLabel, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, preview = false, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "preview", "className", "style"]);
+    var { inputtype = 'fileinput-outline', alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, preview = false, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "preview", "className", "style"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const selectedFile = field.value;
@@ -34198,7 +34198,7 @@ var Flags = /*#__PURE__*/Object.freeze({
 
 const FlagIcon = ({ country }) => {
     const FlagComponent = Flags[country];
-    // Render the flag or a fallback placeholder if not found
+    // Renders the flag or a fallback placeholder if not found
     if (country === 'EU') {
         return React.createElement(EU, { style: { width: '18px', height: '12px', borderRadius: '2px' } });
     }
@@ -41905,11 +41905,12 @@ const safeParseUuidFormat = (typeString) => {
     }
 };
 const UUIDInput = (_a) => {
-    var { alias, type = "uuid", inputLabel, width, delimiter = "-", format = [8, 4, 4, 4, 12], placeholder = 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX', newRow, isHinted, hintText, hintUrl, errorText, readOnly = false, inputVariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "type", "inputLabel", "width", "delimiter", "format", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputVariant", "size", "className"]);
+    var { alias, type = "uuid-4-4-4-4", inputLabel, width, delimiter = "-", format = [4, 4, 4, 4], placeholder = 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX', newRow, isHinted, hintText, hintUrl, errorText, readOnly = false, inputVariant = 'uuid-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "type", "inputLabel", "width", "delimiter", "format", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputVariant", "size", "className"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
     const [copied, setCopied] = React.useState(false);
+    const [uuidNumber, setUUIDNumber] = React.useState("");
     const errorId = `${alias}-error`;
     const activeFormat = React.useMemo(() => {
         const parsed = safeParseUuidFormat(type);
@@ -41921,28 +41922,22 @@ const UUIDInput = (_a) => {
         if (!value)
             return "";
         const clean = value.replace(/[^0-9a-fA-F]/g, "").toUpperCase().slice(0, maxHexChars);
-        let result = "";
+        const parts = [];
         let currentIdx = 0;
-        for (let i = 0; i < activeFormat.length; i++) {
-            const chunkLen = activeFormat[i];
-            if (currentIdx < clean.length) {
-                const chunk = clean.substring(currentIdx, chunkLen);
-                result += chunk;
-                if (chunk.length === chunkLen && i < activeFormat.length - 1 && (currentIdx + chunkLen) < clean.length) {
-                    result += delimiter;
-                }
-                currentIdx += chunkLen;
-            }
-            else {
+        for (const len of activeFormat) {
+            if (currentIdx >= clean.length)
                 break;
-            }
+            const chunk = clean.slice(currentIdx, currentIdx + len);
+            parts.push(chunk);
+            currentIdx += len;
         }
-        return result;
+        return parts.join(delimiter);
     };
     const handleChange = (e) => {
         const val = e.target.value;
         const formatted = formatUUID(val);
-        setFieldValue(alias, formatted);
+        setUUIDNumber(formatted);
+        setFieldValue(alias, uuidNumber);
     };
     const handleCopy = () => {
         if (field.value) {
@@ -41951,10 +41946,10 @@ const UUIDInput = (_a) => {
             setTimeout(() => setCopied(false), 2000);
         }
     };
-    const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
+    const variantClass = inputVariant !== 'uuid-outline' ? `input-${inputVariant}` : '';
     return (React.createElement(Column, { span: width, newLine: newRow },
         React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
-            React.createElement(u, Object.assign({ size: size, variant: "surface", color: hasError ? 'red' : undefined, className: `${variantClass} ${className || ''}` }, props),
+            React.createElement(u, Object.assign({ size: size, name: `${alias}UUIDFormInput`, variant: "surface", color: hasError ? 'red' : undefined, className: `${variantClass} ${className || ''}` }, props),
                 React.createElement("input", { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, value: field.value || '', onChange: handleChange, onBlur: () => setFieldTouched(alias, true), maxLength: maxTotalLength, readOnly: readOnly, placeholder: placeholder, autoComplete: "off", spellCheck: false, style: {
                         flex: 1,
                         border: 'none',
@@ -47459,7 +47454,7 @@ const StockInput = (_a) => {
 };
 
 const RadioGroupInput = (_a) => {
-    var { inputtype = 'radio-outline', alias, readOnly, width, inputLabel, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, style, inputOptions, direction = 'column', columns, className } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "inputOptions", "direction", "columns", "className"]);
+    var { inputtype = 'radio-outline', alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, style, inputOptions, direction = 'column', columns, className } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "inputOptions", "direction", "columns", "className"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -47541,7 +47536,7 @@ const RadioGroupInput = (_a) => {
 };
 
 const OptionSelect = (_a) => {
-    var { inputtype = 'dropdown-outline', alias, readOnly, width, inputLabel, placeholder, value, inputOptions, style, newRow, isHinted, hintText, hintUrl, defaultvalue, errorText } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "value", "inputOptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "defaultvalue", "errorText"]);
+    var { inputtype = 'dropdown-outline', alias, readOnly, width, inputLabel, placeholder, inputOptions, style, newRow, isHinted, hintText, hintUrl, errorText } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "inputOptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "errorText"]);
     const triggerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
@@ -47754,10 +47749,10 @@ const MultipleSelect = (_a) => {
 };
 
 const SliderInput = (_a) => {
-    var { inputtype = 'slider-outline', alias, readOnly, width, inputLabel, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, minValue = 0, maxValue = 100, stepValue = 1, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "minValue", "maxValue", "stepValue", "className", "style"]);
+    var { inputtype = 'slider-outline', alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, minvalue = 0, maxvalue = 100, stepvalue = 1, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "minvalue", "maxvalue", "stepvalue", "className", "style"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
-    const fieldValue = Array.isArray(field.value) ? field.value : [field.value || minValue];
+    const fieldValue = Array.isArray(field.value) ? field.value : [field.value || minvalue];
     const hasError = Boolean(meta.touched && meta.error);
     const containerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
@@ -47834,7 +47829,7 @@ const SliderInput = (_a) => {
            box-shadow: none;
         }
       ` } }),
-            React.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, min: minValue, max: maxValue, step: stepValue, value: fieldValue, onValueChange: (val) => {
+            React.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, min: minvalue, max: maxvalue, step: stepvalue, value: fieldValue, onValueChange: (val) => {
                     setFieldValue(alias, val[0]);
                 }, onValueCommit: () => {
                     setFieldTouched(alias, true);
@@ -47853,7 +47848,7 @@ const SliderInput = (_a) => {
 };
 
 const RangeSlider = (_a) => {
-    var { inputtype = 'range-outline', alias, readOnly, width, inputLabel, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, minvalue = 0, maxvalue = 100, stepvalue = 1, minStepsBetweenThumbs = 0, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "minvalue", "maxvalue", "stepvalue", "minStepsBetweenThumbs", "className", "style"]);
+    var { inputtype = 'range-outline', alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, minvalue = 0, maxvalue = 100, stepvalue = 1, minStepsBetweenThumbs = 0, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "minvalue", "maxvalue", "stepvalue", "minStepsBetweenThumbs", "className", "style"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     // Range Formik Logic 
@@ -47973,7 +47968,6 @@ const Toggle = (_a) => {
             setFieldTouched(alias, true);
         }
     };
-    // Determine Icon Color: Deep accent if Checked & Active, Grey otherwise
     const iconColor = field.value && !readOnly ? 'var(--accent-9)' : 'var(--gray-8)';
     return (React.createElement(Column, { span: width, newLine: newRow },
         React.createElement("div", { ref: containerRef, style: { width: '100%', display: 'flex', flexDirection: 'column', gap: '4px' } },
@@ -48080,7 +48074,8 @@ const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize =
             subTitle && (React.createElement(p$d, { size: subsize, style: {
                     color: subtitleColor || 'var(--gray-11)',
                     maxWidth: '80%',
-                    margin: align === 'center' ? '0 auto' : undefined
+                    margin: align === 'center' ? '0 auto' : undefined,
+                    letterSpacing: `${letterSpacing}`
                 } }, subTitle)),
             withSeparator && (React.createElement(o$2, { size: "4", style: {
                     width: '100%',

package/lib/index.esm.js

@@ -26518,7 +26518,7 @@ const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline
 };
 
 const Dropdown = (_a) => {
-    var { inputtype = 'dropdown-outline', alias, readOnly, width, inputLabel, placeholder, value, inputOptions, style, newRow, isHinted, hintText, hintUrl, defaultvalue, errorText, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "value", "inputOptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "defaultvalue", "errorText", "className"]);
+    var { inputtype = 'dropdown-outline', alias, readOnly, width, inputLabel, placeholder, inputOptions, style, newRow, isHinted, hintText, hintUrl, errorText, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "inputOptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "className"]);
     const triggerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
     const { setFieldValue, setFieldTouched } = useFormikContext();
@@ -26653,7 +26653,7 @@ const getFileIcon$1 = (type, name) => {
 };
 const File$1 = (_a) => {
     var _b;
-    var { inputtype = 'fileinput-outline', alias, readOnly, width, inputLabel, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, preview = false, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "preview", "className", "style"]);
+    var { inputtype = 'fileinput-outline', alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, preview = false, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "preview", "className", "style"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
     const selectedFile = field.value;
@@ -34178,7 +34178,7 @@ var Flags = /*#__PURE__*/Object.freeze({
 
 const FlagIcon = ({ country }) => {
     const FlagComponent = Flags[country];
-    // Render the flag or a fallback placeholder if not found
+    // Renders the flag or a fallback placeholder if not found
     if (country === 'EU') {
         return React__default.createElement(EU, { style: { width: '18px', height: '12px', borderRadius: '2px' } });
     }
@@ -41885,11 +41885,12 @@ const safeParseUuidFormat = (typeString) => {
     }
 };
 const UUIDInput = (_a) => {
-    var { alias, type = "uuid", inputLabel, width, delimiter = "-", format = [8, 4, 4, 4, 12], placeholder = 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX', newRow, isHinted, hintText, hintUrl, errorText, readOnly = false, inputVariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "type", "inputLabel", "width", "delimiter", "format", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputVariant", "size", "className"]);
+    var { alias, type = "uuid-4-4-4-4", inputLabel, width, delimiter = "-", format = [4, 4, 4, 4], placeholder = 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX', newRow, isHinted, hintText, hintUrl, errorText, readOnly = false, inputVariant = 'uuid-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "type", "inputLabel", "width", "delimiter", "format", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputVariant", "size", "className"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
     const [copied, setCopied] = useState(false);
+    const [uuidNumber, setUUIDNumber] = useState("");
     const errorId = `${alias}-error`;
     const activeFormat = useMemo(() => {
         const parsed = safeParseUuidFormat(type);
@@ -41901,28 +41902,22 @@ const UUIDInput = (_a) => {
         if (!value)
             return "";
         const clean = value.replace(/[^0-9a-fA-F]/g, "").toUpperCase().slice(0, maxHexChars);
-        let result = "";
+        const parts = [];
         let currentIdx = 0;
-        for (let i = 0; i < activeFormat.length; i++) {
-            const chunkLen = activeFormat[i];
-            if (currentIdx < clean.length) {
-                const chunk = clean.substring(currentIdx, chunkLen);
-                result += chunk;
-                if (chunk.length === chunkLen && i < activeFormat.length - 1 && (currentIdx + chunkLen) < clean.length) {
-                    result += delimiter;
-                }
-                currentIdx += chunkLen;
-            }
-            else {
+        for (const len of activeFormat) {
+            if (currentIdx >= clean.length)
                 break;
-            }
+            const chunk = clean.slice(currentIdx, currentIdx + len);
+            parts.push(chunk);
+            currentIdx += len;
         }
-        return result;
+        return parts.join(delimiter);
     };
     const handleChange = (e) => {
         const val = e.target.value;
         const formatted = formatUUID(val);
-        setFieldValue(alias, formatted);
+        setUUIDNumber(formatted);
+        setFieldValue(alias, uuidNumber);
     };
     const handleCopy = () => {
         if (field.value) {
@@ -41931,10 +41926,10 @@ const UUIDInput = (_a) => {
             setTimeout(() => setCopied(false), 2000);
         }
     };
-    const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
+    const variantClass = inputVariant !== 'uuid-outline' ? `input-${inputVariant}` : '';
     return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
-            React__default.createElement(u, Object.assign({ size: size, variant: "surface", color: hasError ? 'red' : undefined, className: `${variantClass} ${className || ''}` }, props),
+            React__default.createElement(u, Object.assign({ size: size, name: `${alias}UUIDFormInput`, variant: "surface", color: hasError ? 'red' : undefined, className: `${variantClass} ${className || ''}` }, props),
                 React__default.createElement("input", { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, value: field.value || '', onChange: handleChange, onBlur: () => setFieldTouched(alias, true), maxLength: maxTotalLength, readOnly: readOnly, placeholder: placeholder, autoComplete: "off", spellCheck: false, style: {
                         flex: 1,
                         border: 'none',
@@ -47439,7 +47434,7 @@ const StockInput = (_a) => {
 };
 
 const RadioGroupInput = (_a) => {
-    var { inputtype = 'radio-outline', alias, readOnly, width, inputLabel, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, style, inputOptions, direction = 'column', columns, className } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "inputOptions", "direction", "columns", "className"]);
+    var { inputtype = 'radio-outline', alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, style, inputOptions, direction = 'column', columns, className } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "inputOptions", "direction", "columns", "className"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -47521,7 +47516,7 @@ const RadioGroupInput = (_a) => {
 };
 
 const OptionSelect = (_a) => {
-    var { inputtype = 'dropdown-outline', alias, readOnly, width, inputLabel, placeholder, value, inputOptions, style, newRow, isHinted, hintText, hintUrl, defaultvalue, errorText } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "value", "inputOptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "defaultvalue", "errorText"]);
+    var { inputtype = 'dropdown-outline', alias, readOnly, width, inputLabel, placeholder, inputOptions, style, newRow, isHinted, hintText, hintUrl, errorText } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "inputOptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "errorText"]);
     const triggerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
     const { setFieldValue, setFieldTouched } = useFormikContext();
@@ -47734,10 +47729,10 @@ const MultipleSelect = (_a) => {
 };
 
 const SliderInput = (_a) => {
-    var { inputtype = 'slider-outline', alias, readOnly, width, inputLabel, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, minValue = 0, maxValue = 100, stepValue = 1, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "minValue", "maxValue", "stepValue", "className", "style"]);
+    var { inputtype = 'slider-outline', alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, minvalue = 0, maxvalue = 100, stepvalue = 1, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "minvalue", "maxvalue", "stepvalue", "className", "style"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
-    const fieldValue = Array.isArray(field.value) ? field.value : [field.value || minValue];
+    const fieldValue = Array.isArray(field.value) ? field.value : [field.value || minvalue];
     const hasError = Boolean(meta.touched && meta.error);
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
@@ -47814,7 +47809,7 @@ const SliderInput = (_a) => {
            box-shadow: none;
         }
       ` } }),
-            React__default.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, min: minValue, max: maxValue, step: stepValue, value: fieldValue, onValueChange: (val) => {
+            React__default.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, min: minvalue, max: maxvalue, step: stepvalue, value: fieldValue, onValueChange: (val) => {
                     setFieldValue(alias, val[0]);
                 }, onValueCommit: () => {
                     setFieldTouched(alias, true);
@@ -47833,7 +47828,7 @@ const SliderInput = (_a) => {
 };
 
 const RangeSlider = (_a) => {
-    var { inputtype = 'range-outline', alias, readOnly, width, inputLabel, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, minvalue = 0, maxvalue = 100, stepvalue = 1, minStepsBetweenThumbs = 0, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "minvalue", "maxvalue", "stepvalue", "minStepsBetweenThumbs", "className", "style"]);
+    var { inputtype = 'range-outline', alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, minvalue = 0, maxvalue = 100, stepvalue = 1, minStepsBetweenThumbs = 0, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "minvalue", "maxvalue", "stepvalue", "minStepsBetweenThumbs", "className", "style"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
     // Range Formik Logic 
@@ -47953,7 +47948,6 @@ const Toggle = (_a) => {
             setFieldTouched(alias, true);
         }
     };
-    // Determine Icon Color: Deep accent if Checked & Active, Grey otherwise
     const iconColor = field.value && !readOnly ? 'var(--accent-9)' : 'var(--gray-8)';
     return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement("div", { ref: containerRef, style: { width: '100%', display: 'flex', flexDirection: 'column', gap: '4px' } },
@@ -48060,7 +48054,8 @@ const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize =
             subTitle && (React__default.createElement(p$d, { size: subsize, style: {
                     color: subtitleColor || 'var(--gray-11)',
                     maxWidth: '80%',
-                    margin: align === 'center' ? '0 auto' : undefined
+                    margin: align === 'center' ? '0 auto' : undefined,
+                    letterSpacing: `${letterSpacing}`
                 } }, subTitle)),
             withSeparator && (React__default.createElement(o$2, { size: "4", style: {
                     width: '100%',

package/lib/types/components/datepicker/datepicker.d.ts

@@ -3,17 +3,81 @@ import "react-datepicker/dist/react-datepicker.css";
 import '../../styles/main.scss';
 export type DatePickerDesign = 'datepicker' | 'datepicker-outline' | 'datepicker-material' | 'datepicker-neumorphic';
 interface DatePickerProps {
+    /**
+   * * The required unique identifier for the DatePicker input field in useFormikContext().
+   * Alias referenced as `name` attribute and Formik state key.
+   * * @example
+   * alias="citizenshipDateCA"
+   */
     alias: string;
+    /**
+   * * The optional input label or description for the DatePicker input field.
+   * * @example
+   * inputLabel="Canadian Citizenship Date"
+   */
     inputLabel?: string;
+    /**
+   * * The design variation of the DatePicker input.
+   * Default: 'datepicker-outline'
+   * Variants: 'datepicker', 'datepicker-outline', 'datepicker-material', 'datepicker-neumorphic',
+   * * @example
+   * inputtype="datepicker-neumorphic"
+   */
     inputtype?: DatePickerDesign;
+    /**
+   * * The required viewport column width for the DatePicker input field.
+   * i.e. 1 - 12
+   * * @example
+   * width={6}
+   */
     width?: number;
+    /**
+   * * Option to render DatePicker input field on new row.
+   * * @example
+   * newRow
+   */
     newRow?: boolean;
+    /**
+   * * Option to set the default placeholder text for the DatePicker input field.
+   * * @example
+   * placeholder="Select Citizenship Date"
+   */
     placeholder?: string;
+    /**
+     * * Option to enable a hint for DatePicker input field.
+     * * @example
+     * isHinted
+     */
     isHinted?: boolean;
+    /**
+   * * Option to specify hint text for DatePicker input field.
+   * * @example
+   * hintText="This is a hint for a VΣ DatePicker"
+   */
     hintText?: string;
+    /**
+   * * Option to specify a hint url reference or resource for DatePicker input field.
+   * * @example
+   * hintUrl="https://www.mekaegwim.ca"
+   */
     hintUrl?: string;
+    /**
+   * * Option to specify the isRequired error text for the DatePicker input field.
+   * * @example
+   * errorText="VΣ Citizenship date is required"
+   */
     errorText?: string;
+    /**
+   * * Option to disable edits for DatePicker input field.
+   * * @example
+   * readOnly
+   */
     readOnly?: boolean;
+    /**
+   * * Option to specify the .scss class selector for the DatePicker input field.
+   * * @example
+   * className="teletraan-1-datepicker"
+   */
     className?: string;
 }
 export declare const DatePicker: ({ alias, inputLabel, inputtype, width, newRow, placeholder, isHinted, hintText, hintUrl, errorText, readOnly, className }: DatePickerProps) => React.JSX.Element;

package/lib/types/components/daterangepicker/daterangepicker.d.ts

@@ -3,17 +3,81 @@ import "react-datepicker/dist/react-datepicker.css";
 import '../../styles/main.scss';
 export type DateRangePickerDesign = 'daterangepicker' | 'daterangepicker-outline' | 'daterangepicker-material' | 'daterangepicker-neumorphic';
 interface DateRangePickerProps {
+    /**
+   * * The required unique identifier for the DateRangePicker input field in useFormikContext().
+   * Alias referenced as `name` attribute and Formik state key.
+   * * @example
+   * alias="hotelReservationDays"
+   */
     alias: string;
+    /**
+   * * The optional input label or description for the DateRangePicker input field.
+   * * @example
+   * inputLabel="VΣ Hotel Reservation Dates"
+   */
     inputLabel?: string;
+    /**
+   * * The design variation of the DateRangePicker input.
+   * Default: 'daterangepicker-outline'
+   * Variants: 'daterangepicker', 'daterangepicker-outline', 'daterangepicker-material', 'daterangepicker-neumorphic',
+   * * @example
+   * inputtype="daterangepicker-neumorphic"
+   */
     inputtype?: DateRangePickerDesign;
+    /**
+   * * The required viewport column width for the DateRangePicker input field.
+   * i.e. 1 - 12
+   * * @example
+   * width={6}
+   */
     width?: number;
+    /**
+   * * Option to render DateRangePicker input field on new row.
+   * * @example
+   * newRow
+   */
     newRow?: boolean;
+    /**
+   * * Option to set the default placeholder text for the DateRangePicker input field.
+   * * @example
+   * placeholder="Select VΣ reservation dates"
+   */
     placeholder?: string;
+    /**
+     * * Option to enable a hint for DateRangePicker input field.
+     * * @example
+     * isHinted
+     */
     isHinted?: boolean;
+    /**
+   * * Option to specify hint text for DateRangePicker input field.
+   * * @example
+   * hintText="This is a hint for a VΣ DateRangePicker"
+   */
     hintText?: string;
+    /**
+   * * Option to specify a hint url reference or resource for DateRangePicker input field.
+   * * @example
+   * hintUrl="https://www.mekaegwim.ca"
+   */
     hintUrl?: string;
+    /**
+   * * Option to specify the isRequired error text for the DateRangePicker input field.
+   * * @example
+   * errorText="VΣ resrvation dates required"
+   */
     errorText?: string;
+    /**
+   * * Option to disable edits for DateRangePicker input field.
+   * * @example
+   * readOnly
+   */
     readOnly?: boolean;
+    /**
+   * * Option to specify the .scss class selector for the DateRangePicker input field.
+   * * @example
+   * className="teletraan-1-daterangepicker"
+   */
     className?: string;
 }
 export declare const DateRangePicker: ({ alias, inputLabel, inputtype, width, newRow, placeholder, isHinted, hintText, hintUrl, errorText, readOnly, className }: DateRangePickerProps) => React.JSX.Element;

package/lib/types/components/datetimepicker/datetimepicker.d.ts

@@ -3,17 +3,81 @@ import "react-datepicker/dist/react-datepicker.css";
 import '../../styles/main.scss';
 export type DateTimePickerDesign = 'datetimepicker' | 'datetimepicker-outline' | 'datetimepicker-material' | 'datetimepicker-neumorphic';
 interface DateTimePickerProps {
+    /**
+   * * The required unique identifier for the DateTimePicker input field in useFormikContext().
+   * Alias referenced as `name` attribute and Formik state key.
+   * * @example
+   * alias="esppEnrollmentWindowStart"
+   */
     alias: string;
+    /**
+   * * The optional input label or description for the DateTimePicker input field.
+   * * @example
+   * inputLabel="ESPP Enrollment Window (Start)"
+   */
     inputLabel?: string;
+    /**
+  * * The design variation of the DateTimePicker input.
+  * Default: 'datetimepicker-outline'
+  * Variants: 'datetimepicker', 'datetimepicker-outline', 'datetimepicker-material', 'datetimepicker-neumorphic',
+  * * @example
+  * inputtype="datetimepicker-neumorphic"
+  */
     inputtype?: DateTimePickerDesign;
+    /**
+   * * The required viewport column width for the DateTimePicker input field.
+   * i.e. 1 - 12
+   * * @example
+   * width={6}
+   */
     width?: number;
+    /**
+   * * Option to render DateTimePicker input field on new row.
+   * * @example
+   * newRow
+   */
     newRow?: boolean;
+    /**
+   * * Option to set the default placeholder text for the DateTimePicker input field.
+   * * @example
+   * placeholder="Select VΣCG ESPP enrollment start date & time"
+   */
     placeholder?: string;
+    /**
+     * * Option to enable a hint for DateTimePicker input field.
+     * * @example
+     * isHinted
+     */
     isHinted?: boolean;
+    /**
+   * * Option to specify hint text for DateTimePicker input field.
+   * * @example
+   * hintText="This is a hint for a VΣ DateTimePicker"
+   */
     hintText?: string;
+    /**
+   * * Option to specify a hint url reference or resource for DateTimePicker input field.
+   * * @example
+   * hintUrl="https://www.mekaegwim.ca"
+   */
     hintUrl?: string;
+    /**
+   * * Option to specify the isRequired error text for the DateTimePicker input field.
+   * * @example
+   * errorText="VΣ resrvation dates required"
+   */
     errorText?: string;
+    /**
+   * * Option to disable edits for DateTimePicker input field.
+   * * @example
+   * readOnly
+   */
     readOnly?: boolean;
+    /**
+   * * Option to specify the .scss class selector for the DateTimePicker input field.
+   * * @example
+   * className="teletraan-1-datetimepicker"
+   */
     className?: string;
 }
 export declare const DateTimePicker: ({ alias, inputLabel, inputtype, width, newRow, placeholder, isHinted, hintText, hintUrl, errorText, readOnly, className }: DateTimePickerProps) => React.JSX.Element;