@x15ventures/x15-ui-library 3.13.5 → 3.15.0

package/dist/esm/components/form/formFields/subComponents/textarea/Textarea.js

@@ -1,19 +1,49 @@
 'use client';
 
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { HookFormWrapper } from '../../../hookFormWrapper/HookFormWrapper';
 import { NoHookFormContext } from '../../utilities/formUtilities';
+import { extractError, ValidationMessages } from '../../../validation/ValidationMessages';
+/**
+* Counts user-perceived characters (grapheme clusters).
+* Treats emojis and composed characters (e.g. accented letters) as a single character.
+* Falls back to basic code-point counting if Intl.Segmenter is not available.
+*/
+function getCharacterCount(value) {
+  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+    const segmenter = new Intl.Segmenter(undefined, {
+      granularity: 'grapheme'
+    });
+    return Array.from(segmenter.segment(value)).length;
+  }
+  return Array.from(value).length;
+}
+function clampToGraphemeMax(value, maxAllowed) {
+  if (getCharacterCount(value) <= maxAllowed) {
+    return value;
+  }
+  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+    const segmenter = new Intl.Segmenter(undefined, {
+      granularity: 'grapheme'
+    });
+    return Array.from(segmenter.segment(value)).slice(0, maxAllowed).map(segment => segment.segment).join('');
+  }
+  return Array.from(value).slice(0, maxAllowed).join('');
+}
 export const Textarea = ({
   field: {
     id,
     name,
     placeholder,
     defaultValue,
+    maxLength,
+    enforceMaxLength,
     onBlur = () => {},
     onChange = () => {},
     onKeyDown = () => {},
-    onTouched = () => {}
+    onTouched = () => {},
+    ...htmlNativeDomProps
   },
   validation,
   showSpinner,
@@ -22,17 +52,101 @@ export const Textarea = ({
 }) => {
   const {
     register,
-    getFieldState
+    getFieldState,
+    formState: {
+      errors
+    }
   } = useFormContext() || NoHookFormContext;
   const fieldState = getFieldState(name);
-  const HandleAutoFill = event => {
+  const hasFieldError = Boolean(extractError(errors, name));
+  // Combine fieldState.invalid with a direct errors lookup so this component re-renders
+  // whenever formState.errors changes (getFieldState alone does not subscribe to errors).
+  const isInvalid = Boolean(fieldState?.invalid ?? hasFieldError);
+  const [count, setCount] = useState(() => getCharacterCount(defaultValue?.toString() || ''));
+  const [hasStartedTyping, setHasStartedTyping] = useState(false);
+  const hasMaxLength = typeof maxLength === 'number';
+  const isAtLimit = hasMaxLength ? count >= maxLength : false;
+  // Only hide counter for 'required' error. All other errors (maxLength, pattern, etc)
+  // should show counter instead of error message.
+  const isRequiredError = fieldState?.error?.type === 'required';
+  const characterCounter = !hasStartedTyping || !hasMaxLength || isRequiredError ? undefined : `${count}/${maxLength}`;
+  const cssClass = `${customCssClasses?.input || ''}${isInvalid ? ' invalidField' : ''}`;
+  const normalizedValidation = useMemo(() => {
+    if (!validation || typeof validation.maxLength === 'undefined') {
+      return validation;
+    }
+    const maxLengthRule = validation.maxLength;
+    const maxLengthValue = typeof maxLengthRule === 'number' ? maxLengthRule : typeof maxLengthRule === 'object' && maxLengthRule && 'value' in maxLengthRule ? Number(maxLengthRule.value) : undefined;
+    if (typeof maxLengthValue !== 'number' || Number.isNaN(maxLengthValue)) {
+      return validation;
+    }
+    const maxLengthMessage = `Maximum length is ${maxLengthValue}`;
+    const graphemeMaxLengthValidator = value => getCharacterCount(value || '') <= maxLengthValue || maxLengthMessage;
+
+    // eslint-disable-next-line no-unused-vars
     const {
-      target
-    } = event;
-    if (target) {
-      onChange(event);
+      maxLength: _maxLength,
+      validate,
+      ...restValidation
+    } = validation;
+    if (typeof validate === 'function') {
+      return {
+        ...restValidation,
+        validate: async (value, formValues) => {
+          const validationResult = await validate(value, formValues);
+          if (validationResult !== true) {
+            return validationResult;
+          }
+          return graphemeMaxLengthValidator(value);
+        }
+      };
+    }
+    if (validate && typeof validate === 'object') {
+      return {
+        ...restValidation,
+        validate: {
+          ...validate,
+          graphemeMaxLength: graphemeMaxLengthValidator
+        }
+      };
+    }
+    return {
+      ...restValidation,
+      validate: graphemeMaxLengthValidator
+    };
+  }, [validation]);
+  const registered = register(name, normalizedValidation);
+
+  /**
+   * Prevents input that would exceed the maxLength when counting grapheme clusters.
+   * Native <textarea maxLength> counts UTF-16 units, so emojis and composed characters
+   * can be treated as multiple characters. We avoid using native maxLength and enforce
+   * the limit here instead.
+   */
+  const HandleBeforeInput = event => {
+    if (enforceMaxLength !== true || !hasMaxLength) return;
+    const nativeEvent = event.nativeEvent;
+    const inserted = nativeEvent.data ?? '';
+    if (!inserted) return;
+    const target = event.currentTarget;
+    const start = target.selectionStart ?? target.value.length;
+    const end = target.selectionEnd ?? target.value.length;
+    const nextValue = target.value.slice(0, start) + inserted + target.value.slice(end);
+    if (getCharacterCount(nextValue) > maxLength) {
+      event.preventDefault();
     }
   };
+  const HandleChange = event => {
+    const rawValue = event.target.value || '';
+    const newValue = enforceMaxLength === true && hasMaxLength ? clampToGraphemeMax(rawValue, maxLength) : rawValue;
+    if (newValue !== rawValue) {
+      event.target.value = newValue;
+    }
+    setHasStartedTyping(true);
+    setCount(getCharacterCount(newValue));
+    const onTextareaChange = onChange;
+    onTextareaChange?.(event);
+  };
   const HandleOnBlur = event => {
     const {
       target
@@ -44,9 +158,14 @@ export const Textarea = ({
   };
   const HandleKeyEvent = event => {
     onTouched();
-    onKeyDown(event);
+    const onTextareaKeyDown = onKeyDown;
+    onTextareaKeyDown?.(event);
   };
-  const cssClass = `${customCssClasses?.input || ''}${fieldState && fieldState?.invalid ? ' invalidField' : ''}`;
+  const characterCounterId = `${id}_characterCount`;
+  const errorsId = `${name}_errors`;
+  const existingDescribedBy = typeof htmlNativeDomProps['aria-describedby'] === 'string' ? htmlNativeDomProps['aria-describedby'] : undefined;
+  const showsRequiredError = isInvalid && isRequiredError;
+  const mergedDescribedBy = showsRequiredError ? [existingDescribedBy, errorsId].filter(Boolean).join(' ') : characterCounter !== undefined ? [existingDescribedBy, characterCounterId].filter(Boolean).join(' ') : existingDescribedBy;
   const textareaProps = {
     id,
     className: cssClass,
@@ -58,16 +177,38 @@ export const Textarea = ({
     ...(validation && typeof validation.required !== 'undefined' ? {
       required: true
     } : {}),
-    ...register(name, {
-      onChange: HandleAutoFill,
-      onBlur: HandleOnBlur,
-      ...validation
-    }),
-    onKeyDown: HandleKeyEvent
+    ...registered,
+    onBeforeInput: HandleBeforeInput,
+    onChange: event => {
+      HandleChange(event);
+      registered?.onChange?.(event);
+    },
+    onBlur: event => {
+      HandleOnBlur(event);
+      registered?.onBlur?.(event);
+    },
+    onKeyDown: HandleKeyEvent,
+    ...htmlNativeDomProps,
+    'aria-describedby': mergedDescribedBy
   };
   return /*#__PURE__*/React.createElement(HookFormWrapper, null, customContent?.preField && /*#__PURE__*/React.createElement("span", {
     className: "preField"
-  }, customContent?.preField), /*#__PURE__*/React.createElement("textarea", textareaProps), customContent?.postField && /*#__PURE__*/React.createElement("span", {
+  }, customContent?.preField), /*#__PURE__*/React.createElement("div", {
+    className: "textareaFieldContainer"
+  }, /*#__PURE__*/React.createElement("textarea", textareaProps), /*#__PURE__*/React.createElement("div", {
+    className: "textareaFooter"
+  }, isInvalid && isRequiredError ? /*#__PURE__*/React.createElement(ValidationMessages, {
+    name: name,
+    validation: {
+      required: validation?.required
+    }
+  }) : /*#__PURE__*/React.createElement("div", {
+    id: characterCounterId,
+    className: `textareaCharacterCount ${isAtLimit ? 'textareaCharacterCountExceeded' : ''}`,
+    role: isAtLimit ? 'status' : undefined,
+    "aria-live": isAtLimit ? 'polite' : undefined,
+    "aria-atomic": isAtLimit ? 'true' : undefined
+  }, characterCounter))), customContent?.postField && /*#__PURE__*/React.createElement("span", {
     className: "postField"
   }, customContent?.postField));
 };

package/dist/esm/components/form/formFields/subComponents/textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["React","useFormContext","HookFormWrapper","NoHookFormContext","Textarea","field","id","name","placeholder","defaultValue","onBlur","onChange","onKeyDown","onTouched","validation","showSpinner","customCssClasses","customContent","register","getFieldState","fieldState","HandleAutoFill","event","target","HandleOnBlur","HandleKeyEvent","cssClass","input","invalid","textareaProps","className","disabled","required","createElement","preField","postField"],"sources":["../../../../../../../src/components/form/formFields/subComponents/textarea/Textarea.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { HookFormWrapper } from '../../../hookFormWrapper/HookFormWrapper';\nimport { FormFieldProps } from '../../formFieldWrapper/formFieldProps';\nimport { NoHookFormContext } from '../../utilities/formUtilities';\n\ninterface TextareaProps extends FormFieldProps, React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nexport const Textarea: React.FC<TextareaProps> = (\n  {\n    field: {\n      id,\n      name,\n      placeholder,\n      defaultValue,\n      onBlur = () => {},\n      onChange = () => {},\n      onKeyDown = () => {},\n      onTouched = () => {}\n    },\n    validation,\n    showSpinner,\n    customCssClasses,\n    customContent\n  }\n) => {\n  const { register, getFieldState } = useFormContext() || NoHookFormContext;\n  const fieldState = getFieldState(name);\n\n  const HandleAutoFill = (event: React.FocusEvent<HTMLInputElement>) => {\n    const { target } = event;\n    if (target) {\n      onChange(event);\n    }\n  };\n\n  const HandleOnBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    const { target } = event;\n    if (target) {\n      onTouched();\n      onBlur(event);\n    }\n  };\n\n  const HandleKeyEvent = (\n    event: React.KeyboardEvent<HTMLInputElement> &\n      React.KeyboardEvent<HTMLSelectElement> &\n      React.KeyboardEvent<HTMLTextAreaElement>\n  ) => {\n    onTouched();\n    onKeyDown(event);\n  };\n\n  const cssClass = `${ customCssClasses?.input || '' }${ fieldState && fieldState?.invalid ? ' invalidField' : '' }`;\n\n  const textareaProps = {\n    id,\n    className: cssClass,\n    placeholder,\n    defaultValue,\n    ...(showSpinner ? { disabled: true } : {}),\n    ...(validation && typeof validation.required !== 'undefined' ? { required: true } : {}),\n    ...register(\n      name,\n      {\n        onChange: HandleAutoFill,\n        onBlur: HandleOnBlur,\n        ...validation\n      }\n    ),\n    onKeyDown: HandleKeyEvent\n  };\n\n  return (\n    <HookFormWrapper>\n      { customContent?.preField && <span className=\"preField\">{ customContent?.preField }</span> }\n\n      <textarea { ...textareaProps } />\n\n      { customContent?.postField && <span className=\"postField\">{ customContent?.postField }</span> }\n    </HookFormWrapper>\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,eAAe,QAAQ,0CAA0C;AAE1E,SAASC,iBAAiB,QAAQ,+BAA+B;AAIjE,OAAO,MAAMC,QAAiC,GAAGA,CAC/C;EACEC,KAAK,EAAE;IACLC,EAAE;IACFC,IAAI;IACJC,WAAW;IACXC,YAAY;IACZC,MAAM,GAAGA,CAAA,KAAM,CAAC,CAAC;IACjBC,QAAQ,GAAGA,CAAA,KAAM,CAAC,CAAC;IACnBC,SAAS,GAAGA,CAAA,KAAM,CAAC,CAAC;IACpBC,SAAS,GAAGA,CAAA,KAAM,CAAC;EACrB,CAAC;EACDC,UAAU;EACVC,WAAW;EACXC,gBAAgB;EAChBC;AACF,CAAC,KACE;EACH,MAAM;IAAEC,QAAQ;IAAEC;EAAc,CAAC,GAAGlB,cAAc,CAAC,CAAC,IAAIE,iBAAiB;EACzE,MAAMiB,UAAU,GAAGD,aAAa,CAACZ,IAAI,CAAC;EAEtC,MAAMc,cAAc,GAAIC,KAAyC,IAAK;IACpE,MAAM;MAAEC;IAAO,CAAC,GAAGD,KAAK;IACxB,IAAIC,MAAM,EAAE;MACVZ,QAAQ,CAACW,KAAK,CAAC;IACjB;EACF,CAAC;EAED,MAAME,YAAY,GAAIF,KAAyC,IAAK;IAClE,MAAM;MAAEC;IAAO,CAAC,GAAGD,KAAK;IACxB,IAAIC,MAAM,EAAE;MACVV,SAAS,CAAC,CAAC;MACXH,MAAM,CAACY,KAAK,CAAC;IACf;EACF,CAAC;EAED,MAAMG,cAAc,GAClBH,KAE0C,IACvC;IACHT,SAAS,CAAC,CAAC;IACXD,SAAS,CAACU,KAAK,CAAC;EAClB,CAAC;EAED,MAAMI,QAAQ,GAAG,GAAIV,gBAAgB,EAAEW,KAAK,IAAI,EAAE,GAAKP,UAAU,IAAIA,UAAU,EAAEQ,OAAO,GAAG,eAAe,GAAG,EAAE,EAAG;EAElH,MAAMC,aAAa,GAAG;IACpBvB,EAAE;IACFwB,SAAS,EAAEJ,QAAQ;IACnBlB,WAAW;IACXC,YAAY;IACZ,IAAIM,WAAW,GAAG;MAAEgB,QAAQ,EAAE;IAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1C,IAAIjB,UAAU,IAAI,OAAOA,UAAU,CAACkB,QAAQ,KAAK,WAAW,GAAG;MAAEA,QAAQ,EAAE;IAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACvF,GAAGd,QAAQ,CACTX,IAAI,EACJ;MACEI,QAAQ,EAAEU,cAAc;MACxBX,MAAM,EAAEc,YAAY;MACpB,GAAGV;IACL,CACF,CAAC;IACDF,SAAS,EAAEa;EACb,CAAC;EAED,oBACEzB,KAAA,CAAAiC,aAAA,CAAC/B,eAAe,QACZe,aAAa,EAAEiB,QAAQ,iBAAIlC,KAAA,CAAAiC,aAAA;IAAMH,SAAS,EAAC;EAAU,GAAGb,aAAa,EAAEiB,QAAgB,CAAC,eAE1FlC,KAAA,CAAAiC,aAAA,aAAeJ,aAAiB,CAAC,EAE/BZ,aAAa,EAAEkB,SAAS,iBAAInC,KAAA,CAAAiC,aAAA;IAAMH,SAAS,EAAC;EAAW,GAAGb,aAAa,EAAEkB,SAAiB,CAC7E,CAAC;AAEtB,CAAC","ignoreList":[]}
+{"version":3,"file":"Textarea.js","names":["React","useMemo","useState","useFormContext","HookFormWrapper","NoHookFormContext","extractError","ValidationMessages","getCharacterCount","value","Intl","segmenter","Segmenter","undefined","granularity","Array","from","segment","length","clampToGraphemeMax","maxAllowed","slice","map","join","Textarea","field","id","name","placeholder","defaultValue","maxLength","enforceMaxLength","onBlur","onChange","onKeyDown","onTouched","htmlNativeDomProps","validation","showSpinner","customCssClasses","customContent","register","getFieldState","formState","errors","fieldState","hasFieldError","Boolean","isInvalid","invalid","count","setCount","toString","hasStartedTyping","setHasStartedTyping","hasMaxLength","isAtLimit","isRequiredError","error","type","characterCounter","cssClass","input","normalizedValidation","maxLengthRule","maxLengthValue","Number","isNaN","maxLengthMessage","graphemeMaxLengthValidator","_maxLength","validate","restValidation","formValues","validationResult","graphemeMaxLength","registered","HandleBeforeInput","event","nativeEvent","inserted","data","target","currentTarget","start","selectionStart","end","selectionEnd","nextValue","preventDefault","HandleChange","rawValue","newValue","onTextareaChange","HandleOnBlur","HandleKeyEvent","onTextareaKeyDown","characterCounterId","errorsId","existingDescribedBy","showsRequiredError","mergedDescribedBy","filter","textareaProps","className","disabled","required","onBeforeInput","createElement","preField","role","postField"],"sources":["../../../../../../../src/components/form/formFields/subComponents/textarea/Textarea.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo, useState } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { HookFormWrapper } from '../../../hookFormWrapper/HookFormWrapper';\nimport { FormFieldProps } from '../../formFieldWrapper/formFieldProps';\nimport { NoHookFormContext } from '../../utilities/formUtilities';\nimport { extractError, ValidationMessages } from '../../../validation/ValidationMessages';\n\ninterface TextareaProps extends FormFieldProps, React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\n/**\n* Counts user-perceived characters (grapheme clusters).\n* Treats emojis and composed characters (e.g. accented letters) as a single character.\n* Falls back to basic code-point counting if Intl.Segmenter is not available.\n*/\nfunction getCharacterCount(value: string): number {\n  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n    const segmenter = new Intl.Segmenter(undefined, {\n      granularity: 'grapheme',\n    });\n    return Array.from(segmenter.segment(value)).length;\n  }\n  return Array.from(value).length;\n}\n\nfunction clampToGraphemeMax(value: string, maxAllowed: number): string {\n  if (getCharacterCount(value) <= maxAllowed) {\n    return value;\n  }\n\n  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n    const segmenter = new Intl.Segmenter(undefined, {\n      granularity: 'grapheme',\n    });\n\n    return Array.from(segmenter.segment(value))\n      .slice(0, maxAllowed)\n      .map((segment) => segment.segment)\n      .join('');\n  }\n\n  return Array.from(value).slice(0, maxAllowed).join('');\n}\n\nexport const Textarea: React.FC<TextareaProps> = (\n  {\n    field: {\n      id,\n      name,\n      placeholder,\n      defaultValue,\n      maxLength,\n      enforceMaxLength,\n      onBlur = () => {},\n      onChange = () => {},\n      onKeyDown = () => {},\n      onTouched = () => {},\n      ...htmlNativeDomProps\n    },\n    validation,\n    showSpinner,\n    customCssClasses,\n    customContent\n  }\n) => {\n  const { register, getFieldState, formState: { errors } } = useFormContext() || NoHookFormContext;\n  const fieldState = getFieldState(name);\n  const hasFieldError = Boolean(extractError(errors, name));\n  // Combine fieldState.invalid with a direct errors lookup so this component re-renders\n  // whenever formState.errors changes (getFieldState alone does not subscribe to errors).\n  const isInvalid = Boolean(fieldState?.invalid ?? hasFieldError);\n  const [count, setCount] = useState<number>(() =>\n    getCharacterCount(defaultValue?.toString() || '')\n  );\n  const [hasStartedTyping, setHasStartedTyping] = useState(false);\n  const hasMaxLength = typeof maxLength === 'number';\n  const isAtLimit = hasMaxLength ? count >= maxLength : false;\n  // Only hide counter for 'required' error. All other errors (maxLength, pattern, etc)\n  // should show counter instead of error message.\n  const isRequiredError = fieldState?.error?.type === 'required';\n  const characterCounter =\n    !hasStartedTyping || !hasMaxLength || isRequiredError\n      ? undefined\n      : `${ count }/${ maxLength }`;\n  const cssClass = `${ customCssClasses?.input || '' }${ isInvalid ? ' invalidField' : '' }`;\n\n  const normalizedValidation = useMemo(() => {\n    if (!validation || typeof validation.maxLength === 'undefined') {\n      return validation;\n    }\n\n    const maxLengthRule = validation.maxLength;\n    const maxLengthValue =\n      typeof maxLengthRule === 'number'\n        ? maxLengthRule\n        : typeof maxLengthRule === 'object' && maxLengthRule && 'value' in maxLengthRule\n          ? Number(maxLengthRule.value)\n          : undefined;\n\n    if (typeof maxLengthValue !== 'number' || Number.isNaN(maxLengthValue)) {\n      return validation;\n    }\n\n    const maxLengthMessage = `Maximum length is ${ maxLengthValue }`;\n\n    const graphemeMaxLengthValidator = (value: string) =>\n      getCharacterCount(value || '') <= maxLengthValue || maxLengthMessage;\n\n    // eslint-disable-next-line no-unused-vars\n    const { maxLength: _maxLength, validate, ...restValidation } = validation;\n\n    if (typeof validate === 'function') {\n      return {\n        ...restValidation,\n        validate: async (value: string, formValues?: unknown) => {\n          const validationResult = await validate(value, formValues);\n          if (validationResult !== true) {\n            return validationResult;\n          }\n          return graphemeMaxLengthValidator(value);\n        },\n      };\n    }\n\n    if (validate && typeof validate === 'object') {\n      return {\n        ...restValidation,\n        validate: {\n          ...validate,\n          graphemeMaxLength: graphemeMaxLengthValidator,\n        },\n      };\n    }\n\n    return {\n      ...restValidation,\n      validate: graphemeMaxLengthValidator,\n    };\n  }, [validation]);\n\n  const registered = register(name, normalizedValidation);\n\n  /**\n   * Prevents input that would exceed the maxLength when counting grapheme clusters.\n   * Native <textarea maxLength> counts UTF-16 units, so emojis and composed characters\n   * can be treated as multiple characters. We avoid using native maxLength and enforce\n   * the limit here instead.\n   */\n  const HandleBeforeInput = (event: React.FormEvent<HTMLTextAreaElement>) => {\n    if (enforceMaxLength !== true || !hasMaxLength) return;\n\n    const nativeEvent = event.nativeEvent as InputEvent;\n    const inserted = nativeEvent.data ?? '';\n\n    if (!inserted) return;\n\n    const target = event.currentTarget;\n    const start = target.selectionStart ?? target.value.length;\n    const end = target.selectionEnd ?? target.value.length;\n\n    const nextValue =\n      target.value.slice(0, start) +\n      inserted +\n      target.value.slice(end);\n\n    if (getCharacterCount(nextValue) > maxLength) {\n      event.preventDefault();\n    }\n  };\n\n  const HandleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    const rawValue = event.target.value || '';\n    const newValue =\n      enforceMaxLength === true && hasMaxLength\n        ? clampToGraphemeMax(rawValue, maxLength)\n        : rawValue;\n\n    if (newValue !== rawValue) {\n      event.target.value = newValue;\n    }\n\n    setHasStartedTyping(true);\n    setCount(getCharacterCount(newValue));\n    const onTextareaChange = onChange as\n      | React.ChangeEventHandler<HTMLTextAreaElement>\n      | undefined;\n    onTextareaChange?.(event);\n  };\n\n  const HandleOnBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n    const { target } = event;\n    if (target) {\n      onTouched();\n      onBlur(event);\n    }\n  };\n\n  const HandleKeyEvent = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    onTouched();\n    const onTextareaKeyDown = onKeyDown as\n      | React.KeyboardEventHandler<HTMLTextAreaElement>\n      | undefined;\n    onTextareaKeyDown?.(event);\n  };\n\n  const characterCounterId = `${ id }_characterCount`;\n  const errorsId = `${ name }_errors`;\n  const existingDescribedBy =\n    typeof htmlNativeDomProps['aria-describedby'] === 'string'\n      ? htmlNativeDomProps['aria-describedby']\n      : undefined;\n  const showsRequiredError = isInvalid && isRequiredError;\n  const mergedDescribedBy = showsRequiredError\n    ? [existingDescribedBy, errorsId].filter(Boolean).join(' ')\n    : characterCounter !== undefined\n      ? [existingDescribedBy, characterCounterId].filter(Boolean).join(' ')\n      : existingDescribedBy;\n  \n  const textareaProps = {\n    id,\n    className: cssClass,\n    placeholder,\n    defaultValue,\n    ...(showSpinner ? { disabled: true } : {}),\n    ...(validation && typeof validation.required !== 'undefined' ? { required: true } : {}),\n    ...registered,\n    onBeforeInput: HandleBeforeInput,\n    onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      HandleChange(event);\n      registered?.onChange?.(event);\n    },\n    onBlur: (event: React.FocusEvent<HTMLTextAreaElement>) => {\n      HandleOnBlur(event);\n      registered?.onBlur?.(event);\n    },\n    onKeyDown: HandleKeyEvent,\n    ...htmlNativeDomProps,\n    'aria-describedby': mergedDescribedBy,\n  };\n\n  return (\n    <HookFormWrapper>\n      { customContent?.preField && <span className=\"preField\">{ customContent?.preField }</span> }\n\n      <div className=\"textareaFieldContainer\">\n        <textarea { ...textareaProps } />  \n\n        <div className=\"textareaFooter\">\n          { isInvalid && isRequiredError\n            ? <ValidationMessages name={ name } validation={ { required: validation?.required } } />\n            : (\n              <div\n                id={ characterCounterId }\n                className={ `textareaCharacterCount ${\n                  isAtLimit\n                    ? 'textareaCharacterCountExceeded'\n                    : ''\n                }` }\n                role={ isAtLimit ? 'status' : undefined }\n                aria-live={ isAtLimit ? 'polite' : undefined }\n                aria-atomic={ isAtLimit ? 'true' : undefined }\n              >\n                { characterCounter }\n              </div>\n            )\n          }\n        </div>\n      </div>\n\n      { customContent?.postField && <span className=\"postField\">{ customContent?.postField }</span> }\n    </HookFormWrapper>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/form/validation/ValidationMessages.js

@@ -17,7 +17,7 @@ export const GenericErrorMessages = {
 };
 
 // Helper function to extract nested errors
-const extractError = (errors, fieldName) => {
+export const extractError = (errors, fieldName) => {
   if (!errors) {
     return undefined;
   }

package/dist/esm/components/form/validation/ValidationMessages.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationMessages.js","names":["React","ErrorMessage","useFormContext","NoHookFormContext","GenericErrorMessages","required","minLength","value","maxLength","min","max","unknown","extractError","errors","fieldName","undefined","pathComponents","split","reduce","accumulator","pathComponent","ValidationMessages","name","validation","formState","fieldError","Object","entries","forEach","validatorKey","validator","type","types","message","createElement","className","id","render"],"sources":["../../../../../src/components/form/validation/ValidationMessages.tsx"],"sourcesContent":["/* eslint-disable no-unused-vars */\n\n'use client';\n\nimport React from 'react';\nimport { ErrorMessage } from '@hookform/error-message';\nimport {\n  FieldError,\n  FieldErrors,\n  FieldErrorsImpl,\n  Merge, useFormContext\n} from 'react-hook-form';\nimport {\n  ValidationProps\n} from '../formFields/formFieldWrapper/formFieldProps';\nimport { NoHookFormContext } from '../formFields/utilities/formUtilities';\nimport { InputCheckboxValidationProps } from '../formFields/subComponents/inputs/checkbox/inputCheckboxProps';\n\n// Type for generic error messages\nexport const GenericErrorMessages: Record<string, (value?: never) => string> = {\n  required: () => 'This field is required. Please enter a value.',\n  minLength: (value) => `Please provide a minimum of ${ value } characters.`,\n  maxLength: (value) => `Please provide a maximum of ${ value } characters.`,\n  min: (value) => `The value must be a minimum of ${ value }.`,\n  max: (value) => `The value must be a maximum of ${ value }.`,\n  unknown: () => 'An unknown error has occurred.'\n};\n\n// Helper function to extract nested errors\nconst extractError = (\n  errors: FieldErrors,\n  fieldName: string\n): FieldError | Merge<FieldError, FieldErrorsImpl<never>> | undefined => {\n  if (!errors) {\n    return undefined;\n  }\n\n  const pathComponents = fieldName.split('.');\n\n  return pathComponents.reduce<FieldError | Merge<FieldError, FieldErrorsImpl<never>> | undefined>(\n    (accumulator, pathComponent) => {\n      if (!accumulator) {\n        return undefined;\n      }\n\n      return (accumulator as never)[pathComponent];\n    },\n    errors as never\n  );\n};\n\ninterface ValidationMessagesProps {\n  name: string;\n  validation?: ValidationProps | InputCheckboxValidationProps\n}\n\nexport const ValidationMessages: React.FC<ValidationMessagesProps> = (\n  {\n    name,\n    validation\n  }\n) => {\n  const { formState: { errors } } = useFormContext() || NoHookFormContext;\n\n  const fieldError = extractError(errors, name);\n\n  if (!fieldError) {\n    return null;\n  }\n\n  // Check all the validators have a message\n  if (validation) {\n    Object.entries(validation).forEach(([validatorKey, validator]) => {\n      if (GenericErrorMessages[validatorKey]) {\n        if (typeof validator === 'boolean') {\n          if (\n            fieldError.type &&\n            fieldError.types &&\n            typeof fieldError.types[fieldError.type] === 'string'\n          ) {\n            fieldError.message = fieldError.types[fieldError.type] as string;\n          } else {\n            fieldError.message = GenericErrorMessages[validatorKey]();\n          }\n        } else if (typeof validator === 'object' && 'value' in validator) {\n          // @ts-ignore The hook form types don't seem to cater for versions with value properties properly\n          fieldError.message = GenericErrorMessages[validatorKey](validator.value || undefined);\n        }\n      }\n    });\n  }\n\n  return (\n    <span className=\"validation\" id={ `${ name }_errors` }>\n      <span className=\"message\">\n        { !fieldError?.message && (\n          <span className=\"error\">{ GenericErrorMessages.unknown() }</span>\n        ) }\n\n        <ErrorMessage\n          errors={ errors }\n          name={ name }\n          render={ ({ message }) => <span className=\"error\">{ message }</span> }\n        />\n      </span>\n    </span>\n  );\n};\n\nexport default ValidationMessages;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ValidationMessages.js","names":["React","ErrorMessage","useFormContext","NoHookFormContext","GenericErrorMessages","required","minLength","value","maxLength","min","max","unknown","extractError","errors","fieldName","undefined","pathComponents","split","reduce","accumulator","pathComponent","ValidationMessages","name","validation","formState","fieldError","Object","entries","forEach","validatorKey","validator","type","types","message","createElement","className","id","render"],"sources":["../../../../../src/components/form/validation/ValidationMessages.tsx"],"sourcesContent":["/* eslint-disable no-unused-vars */\n\n'use client';\n\nimport React from 'react';\nimport { ErrorMessage } from '@hookform/error-message';\nimport {\n  FieldError,\n  FieldErrors,\n  FieldErrorsImpl,\n  Merge, useFormContext\n} from 'react-hook-form';\nimport {\n  ValidationProps\n} from '../formFields/formFieldWrapper/formFieldProps';\nimport { NoHookFormContext } from '../formFields/utilities/formUtilities';\nimport { InputCheckboxValidationProps } from '../formFields/subComponents/inputs/checkbox/inputCheckboxProps';\n\n// Type for generic error messages\nexport const GenericErrorMessages: Record<string, (value?: never) => string> = {\n  required: () => 'This field is required. Please enter a value.',\n  minLength: (value) => `Please provide a minimum of ${ value } characters.`,\n  maxLength: (value) => `Please provide a maximum of ${ value } characters.`,\n  min: (value) => `The value must be a minimum of ${ value }.`,\n  max: (value) => `The value must be a maximum of ${ value }.`,\n  unknown: () => 'An unknown error has occurred.'\n};\n\n// Helper function to extract nested errors\nexport const extractError = (\n  errors: FieldErrors,\n  fieldName: string\n): FieldError | Merge<FieldError, FieldErrorsImpl<never>> | undefined => {\n  if (!errors) {\n    return undefined;\n  }\n\n  const pathComponents = fieldName.split('.');\n\n  return pathComponents.reduce<FieldError | Merge<FieldError, FieldErrorsImpl<never>> | undefined>(\n    (accumulator, pathComponent) => {\n      if (!accumulator) {\n        return undefined;\n      }\n\n      return (accumulator as never)[pathComponent];\n    },\n    errors as never\n  );\n};\n\ninterface ValidationMessagesProps {\n  name: string;\n  validation?: ValidationProps | InputCheckboxValidationProps\n}\n\nexport const ValidationMessages: React.FC<ValidationMessagesProps> = (\n  {\n    name,\n    validation\n  }\n) => {\n  const { formState: { errors } } = useFormContext() || NoHookFormContext;\n\n  const fieldError = extractError(errors, name);\n\n  if (!fieldError) {\n    return null;\n  }\n\n  // Check all the validators have a message\n  if (validation) {\n    Object.entries(validation).forEach(([validatorKey, validator]) => {\n      if (GenericErrorMessages[validatorKey]) {\n        if (typeof validator === 'boolean') {\n          if (\n            fieldError.type &&\n            fieldError.types &&\n            typeof fieldError.types[fieldError.type] === 'string'\n          ) {\n            fieldError.message = fieldError.types[fieldError.type] as string;\n          } else {\n            fieldError.message = GenericErrorMessages[validatorKey]();\n          }\n        } else if (typeof validator === 'object' && 'value' in validator) {\n          // @ts-ignore The hook form types don't seem to cater for versions with value properties properly\n          fieldError.message = GenericErrorMessages[validatorKey](validator.value || undefined);\n        }\n      }\n    });\n  }\n\n  return (\n    <span className=\"validation\" id={ `${ name }_errors` }>\n      <span className=\"message\">\n        { !fieldError?.message && (\n          <span className=\"error\">{ GenericErrorMessages.unknown() }</span>\n        ) }\n\n        <ErrorMessage\n          errors={ errors }\n          name={ name }\n          render={ ({ message }) => <span className=\"error\">{ message }</span> }\n        />\n      </span>\n    </span>\n  );\n};\n\nexport default ValidationMessages;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/index.js

@@ -14,6 +14,7 @@ export { KitLogo } from './design/logos/ventures/kit-logo';
 export { DoshiiLogo } from './design/logos/ventures/doshii-logo';
 export { TruyuLogo } from './design/logos/ventures/truyu-logo';
 export { SidePanel } from './design/sidePanel/SidePanel';
+export { Skeleton } from './design/skeleton/Skeleton';
 export { Spinner } from './design/spinner/Spinner';
 export { StatusIconButton } from './design/statusIndicators/statusIconButton/StatusIconButton';
 export { StatusLight } from './design/statusIndicators/statusLight/StatusLight';

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Accordion","Chip","Pill","Badge","Dialog","HeaderBar","Icon","NotificationIcon","VentureLogo","CreditSavvyLogo","HomeInLogo","KitLogo","DoshiiLogo","TruyuLogo","SidePanel","Spinner","StatusIconButton","StatusLight","StatusLightsBar","Tabs","Tooltip","EllipsisTooltip","RevealMore","CopyText","Paginator","PageBanner","Banner","Alert","SimpleButton","Button","FormField","InputCheckbox","CheckboxInput","StyledRadioGroup","StyledRadioInput","StyledRadioLabel","HookFormWrapper","TextInput","EmailInput","FileInput","SearchInput","NumberInput","PhoneInput","UrlInput","PasswordInput","PasswordInputSignup","SelectDropdown","Combobox","Textarea","InputDate","DateInput","Card","ReportFooter","MainHeader","ThemeLoader","DevToolbar","ThemeSwitch","LoremIpsum","GlobalDashboard","Menu","PopupMenu","SearchPanelMenu","Link","TemplateForm","TemplateLoading","TemplateDashboard","TemplatePage","Select","Checkbox"],"sources":["../../../src/components/index.ts"],"sourcesContent":["'use client';\n\n// UI components\nexport { Accordion } from './design/accordion/Accordion';\nexport { Chip, Pill, Badge } from './design/chip/Chip';\nexport { Dialog } from './design/dialog/Dialog';\nexport { HeaderBar } from './design/headerBar/HeaderBar';\nexport { Icon } from './design/icons/basicIcon/Icon';\nexport { NotificationIcon } from './design/icons/notificationIcon/NotificationIcon';\nexport { VentureLogo } from './design/logos/VentureLogo';\n\nexport { CreditSavvyLogo } from './design/logos/ventures/credit-savvy-logo';\nexport { HomeInLogo } from './design/logos/ventures/home-in-logo';\nexport { KitLogo } from './design/logos/ventures/kit-logo';\nexport { DoshiiLogo } from './design/logos/ventures/doshii-logo';\nexport { TruyuLogo } from './design/logos/ventures/truyu-logo';\n\nexport { SidePanel } from './design/sidePanel/SidePanel';\nexport { Spinner } from './design/spinner/Spinner';\nexport { StatusIconButton } from './design/statusIndicators/statusIconButton/StatusIconButton';\nexport { StatusLight } from './design/statusIndicators/statusLight/StatusLight';\nexport { StatusLightsBar } from './design/statusIndicators/statusLightsBar/StatusLightsBar';\nexport { Tabs } from './design/tabs/Tabs';\nexport { Tooltip } from './design/tooltip/Tooltip';\nexport { EllipsisTooltip } from './design/tooltip/ellipsisTooltip/EllipsisTooltip';\nexport { RevealMore } from './design/revealMore/RevealMore';\nexport { CopyText } from './design/copyText/CopyText';\nexport { Paginator } from './design/paginators/Paginator';\nexport { PageBanner, Banner, Alert } from './design/banners/pageBanner/PageBanner';\nexport type { PageBannerProps } from './design/banners/pageBanner/PageBanner';\n\n// Form components\nexport { SimpleButton, Button } from './form/buttons/SimpleButton';\nexport { FormField } from './form/formFields/formFieldWrapper/FormField';\nexport { InputCheckbox, CheckboxInput } from './form/formFields/subComponents/inputs/checkbox/InputCheckbox';\nexport { StyledRadioGroup } from './form/formFields/subComponents/inputs/radio/styled/StyledRadioGroup';\nexport { StyledRadioInput } from './form/formFields/subComponents/inputs/radio/styled/StyledRadioInput';\nexport { StyledRadioLabel } from './form/formFields/subComponents/inputs/radio/styled/StyledRadioLabel';\nexport { HookFormWrapper } from './form/hookFormWrapper/HookFormWrapper';\n\nexport {\n  TextInput,\n  EmailInput,\n  FileInput,\n  SearchInput,\n  NumberInput,\n  PhoneInput,\n  UrlInput,\n  PasswordInput,\n  PasswordInputSignup,\n  SelectDropdown,\n  Combobox,\n  Textarea\n} from './form/formFields/subComponents/InputVariants';\nexport type {\n  FormComponentProps,\n  DropdownSelectProps,\n  PasswordInputProps\n} from './form/formFields/subComponents/InputVariants';\n\nexport {\n  InputDate\n} from './form/formFields/subComponents/inputs/date/InputDate';\nexport { DateInput } from './form/formFields/subComponents/inputs/date/DateInput';\nexport type { StyledRadioGroupProps } from './form/formFields/subComponents/inputs/radio/radioInputsProps';\n\n// Layout\nexport { Card } from './design/card/Card';\nexport { ReportFooter } from './layout/footers/reports/ReportFooter';\nexport { MainHeader } from './layout/mainHeader/MainHeader';\n\nexport { ThemeLoader } from './design/themeLoader/ThemeLoader';\nexport type { ThemeStructure } from './design/themeLoader/ThemeLoader';\n\n// Testing\nexport { DevToolbar } from './testing/devToolbar/DevToolbar';\nexport { ThemeSwitch } from './testing/themeSwitch/ThemeSwitch';\nexport { LoremIpsum } from './testing/loremIpsum/LoremIpsum';\n\nexport { GlobalDashboard } from './layout/dashboard/layouts/globalDashboard/GlobalDashboard';\nexport { Menu } from './navigation/menu/Menu';\nexport { PopupMenu } from './navigation/popupMenu/PopupMenu';\nexport { SearchPanelMenu } from './navigation/searchPanelMenu/SearchPanelMenu';\nexport { Link } from './navigation/link/Link';\n\nexport type { MenuItemPropTypes, MenuButtonPropTypes, MenuItemIconStates } from './navigation/menu/Menu.interfaces';\n\n// Templates\nexport { TemplateForm } from './templates/templateForm/TemplateForm';\nexport type { TemplateFormProps } from './templates/templateForm/TemplateForm';\nexport { TemplateLoading } from './templates/templateLoading/TemplateLoading';\nexport type { TemplateLoadingProps } from './templates/templateLoading/TemplateLoading';\nexport { TemplateDashboard } from './templates/templateDashboard/TemplateDashboard';\nexport type { TemplateDashboardProps } from './templates/templateDashboard/TemplateDashboard';\nexport { TemplatePage } from './templates/templatePage/TemplatePage';\nexport type { TemplatePageProps } from './templates/templatePage/TemplatePage';\n\n// Aliases to match common libraries\nexport { SelectDropdown as Select } from './form/formFields/subComponents/InputVariants';\nexport { InputCheckbox as Checkbox } from './form/formFields/subComponents/inputs/checkbox/InputCheckbox';"],"mappings":"AAAA,YAAY;;AAEZ;AACA,SAASA,SAAS,QAAQ,8BAA8B;AACxD,SAASC,IAAI,EAAEC,IAAI,EAAEC,KAAK,QAAQ,oBAAoB;AACtD,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,SAAS,QAAQ,8BAA8B;AACxD,SAASC,IAAI,QAAQ,+BAA+B;AACpD,SAASC,gBAAgB,QAAQ,kDAAkD;AACnF,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,eAAe,QAAQ,2CAA2C;AAC3E,SAASC,UAAU,QAAQ,sCAAsC;AACjE,SAASC,OAAO,QAAQ,kCAAkC;AAC1D,SAASC,UAAU,QAAQ,qCAAqC;AAChE,SAASC,SAAS,QAAQ,oCAAoC;AAE9D,SAASC,SAAS,QAAQ,8BAA8B;AACxD,SAASC,OAAO,QAAQ,0BAA0B;AAClD,SAASC,gBAAgB,QAAQ,6DAA6D;AAC9F,SAASC,WAAW,QAAQ,mDAAmD;AAC/E,SAASC,eAAe,QAAQ,2DAA2D;AAC3F,SAASC,IAAI,QAAQ,oBAAoB;AACzC,SAASC,OAAO,QAAQ,0BAA0B;AAClD,SAASC,eAAe,QAAQ,kDAAkD;AAClF,SAASC,UAAU,QAAQ,gCAAgC;AAC3D,SAASC,QAAQ,QAAQ,4BAA4B;AACrD,SAASC,SAAS,QAAQ,+BAA+B;AACzD,SAASC,UAAU,EAAEC,MAAM,EAAEC,KAAK,QAAQ,wCAAwC;AAGlF;AACA,SAASC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAClE,SAASC,SAAS,QAAQ,8CAA8C;AACxE,SAASC,aAAa,EAAEC,aAAa,QAAQ,+DAA+D;AAC5G,SAASC,gBAAgB,QAAQ,sEAAsE;AACvG,SAASC,gBAAgB,QAAQ,sEAAsE;AACvG,SAASC,gBAAgB,QAAQ,sEAAsE;AACvG,SAASC,eAAe,QAAQ,wCAAwC;AAExE,SACEC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,WAAW,EACXC,WAAW,EACXC,UAAU,EACVC,QAAQ,EACRC,aAAa,EACbC,mBAAmB,EACnBC,cAAc,EACdC,QAAQ,EACRC,QAAQ,QACH,+CAA+C;AAOtD,SACEC,SAAS,QACJ,uDAAuD;AAC9D,SAASC,SAAS,QAAQ,uDAAuD;AAGjF;AACA,SAASC,IAAI,QAAQ,oBAAoB;AACzC,SAASC,YAAY,QAAQ,uCAAuC;AACpE,SAASC,UAAU,QAAQ,gCAAgC;AAE3D,SAASC,WAAW,QAAQ,kCAAkC;AAG9D;AACA,SAASC,UAAU,QAAQ,iCAAiC;AAC5D,SAASC,WAAW,QAAQ,mCAAmC;AAC/D,SAASC,UAAU,QAAQ,iCAAiC;AAE5D,SAASC,eAAe,QAAQ,4DAA4D;AAC5F,SAASC,IAAI,QAAQ,wBAAwB;AAC7C,SAASC,SAAS,QAAQ,kCAAkC;AAC5D,SAASC,eAAe,QAAQ,8CAA8C;AAC9E,SAASC,IAAI,QAAQ,wBAAwB;AAI7C;AACA,SAASC,YAAY,QAAQ,uCAAuC;AAEpE,SAASC,eAAe,QAAQ,6CAA6C;AAE7E,SAASC,iBAAiB,QAAQ,iDAAiD;AAEnF,SAASC,YAAY,QAAQ,uCAAuC;AAGpE;AACA,SAASpB,cAAc,IAAIqB,MAAM,QAAQ,+CAA+C;AACxF,SAASpC,aAAa,IAAIqC,QAAQ,QAAQ,+DAA+D","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Accordion","Chip","Pill","Badge","Dialog","HeaderBar","Icon","NotificationIcon","VentureLogo","CreditSavvyLogo","HomeInLogo","KitLogo","DoshiiLogo","TruyuLogo","SidePanel","Skeleton","Spinner","StatusIconButton","StatusLight","StatusLightsBar","Tabs","Tooltip","EllipsisTooltip","RevealMore","CopyText","Paginator","PageBanner","Banner","Alert","SimpleButton","Button","FormField","InputCheckbox","CheckboxInput","StyledRadioGroup","StyledRadioInput","StyledRadioLabel","HookFormWrapper","TextInput","EmailInput","FileInput","SearchInput","NumberInput","PhoneInput","UrlInput","PasswordInput","PasswordInputSignup","SelectDropdown","Combobox","Textarea","InputDate","DateInput","Card","ReportFooter","MainHeader","ThemeLoader","DevToolbar","ThemeSwitch","LoremIpsum","GlobalDashboard","Menu","PopupMenu","SearchPanelMenu","Link","TemplateForm","TemplateLoading","TemplateDashboard","TemplatePage","Select","Checkbox"],"sources":["../../../src/components/index.ts"],"sourcesContent":["'use client';\n\n// UI components\nexport { Accordion } from './design/accordion/Accordion';\nexport { Chip, Pill, Badge } from './design/chip/Chip';\nexport { Dialog } from './design/dialog/Dialog';\nexport { HeaderBar } from './design/headerBar/HeaderBar';\nexport { Icon } from './design/icons/basicIcon/Icon';\nexport { NotificationIcon } from './design/icons/notificationIcon/NotificationIcon';\nexport { VentureLogo } from './design/logos/VentureLogo';\n\nexport { CreditSavvyLogo } from './design/logos/ventures/credit-savvy-logo';\nexport { HomeInLogo } from './design/logos/ventures/home-in-logo';\nexport { KitLogo } from './design/logos/ventures/kit-logo';\nexport { DoshiiLogo } from './design/logos/ventures/doshii-logo';\nexport { TruyuLogo } from './design/logos/ventures/truyu-logo';\n\nexport { SidePanel } from './design/sidePanel/SidePanel';\nexport { Skeleton } from './design/skeleton/Skeleton';\nexport type { SkeletonProps } from './design/skeleton/Skeleton';\nexport { Spinner } from './design/spinner/Spinner';\nexport { StatusIconButton } from './design/statusIndicators/statusIconButton/StatusIconButton';\nexport { StatusLight } from './design/statusIndicators/statusLight/StatusLight';\nexport { StatusLightsBar } from './design/statusIndicators/statusLightsBar/StatusLightsBar';\nexport { Tabs } from './design/tabs/Tabs';\nexport { Tooltip } from './design/tooltip/Tooltip';\nexport { EllipsisTooltip } from './design/tooltip/ellipsisTooltip/EllipsisTooltip';\nexport { RevealMore } from './design/revealMore/RevealMore';\nexport { CopyText } from './design/copyText/CopyText';\nexport { Paginator } from './design/paginators/Paginator';\nexport { PageBanner, Banner, Alert } from './design/banners/pageBanner/PageBanner';\nexport type { PageBannerProps } from './design/banners/pageBanner/PageBanner';\n\n// Form components\nexport { SimpleButton, Button } from './form/buttons/SimpleButton';\nexport { FormField } from './form/formFields/formFieldWrapper/FormField';\nexport { InputCheckbox, CheckboxInput } from './form/formFields/subComponents/inputs/checkbox/InputCheckbox';\nexport { StyledRadioGroup } from './form/formFields/subComponents/inputs/radio/styled/StyledRadioGroup';\nexport { StyledRadioInput } from './form/formFields/subComponents/inputs/radio/styled/StyledRadioInput';\nexport { StyledRadioLabel } from './form/formFields/subComponents/inputs/radio/styled/StyledRadioLabel';\nexport { HookFormWrapper } from './form/hookFormWrapper/HookFormWrapper';\n\nexport {\n  TextInput,\n  EmailInput,\n  FileInput,\n  SearchInput,\n  NumberInput,\n  PhoneInput,\n  UrlInput,\n  PasswordInput,\n  PasswordInputSignup,\n  SelectDropdown,\n  Combobox,\n  Textarea\n} from './form/formFields/subComponents/InputVariants';\nexport type {\n  FormComponentProps,\n  DropdownSelectProps,\n  PasswordInputProps\n} from './form/formFields/subComponents/InputVariants';\n\nexport {\n  InputDate\n} from './form/formFields/subComponents/inputs/date/InputDate';\nexport { DateInput } from './form/formFields/subComponents/inputs/date/DateInput';\nexport type { StyledRadioGroupProps } from './form/formFields/subComponents/inputs/radio/radioInputsProps';\n\n// Layout\nexport { Card } from './design/card/Card';\nexport { ReportFooter } from './layout/footers/reports/ReportFooter';\nexport { MainHeader } from './layout/mainHeader/MainHeader';\n\nexport { ThemeLoader } from './design/themeLoader/ThemeLoader';\nexport type { ThemeStructure } from './design/themeLoader/ThemeLoader';\n\n// Testing\nexport { DevToolbar } from './testing/devToolbar/DevToolbar';\nexport { ThemeSwitch } from './testing/themeSwitch/ThemeSwitch';\nexport { LoremIpsum } from './testing/loremIpsum/LoremIpsum';\n\nexport { GlobalDashboard } from './layout/dashboard/layouts/globalDashboard/GlobalDashboard';\nexport { Menu } from './navigation/menu/Menu';\nexport { PopupMenu } from './navigation/popupMenu/PopupMenu';\nexport { SearchPanelMenu } from './navigation/searchPanelMenu/SearchPanelMenu';\nexport { Link } from './navigation/link/Link';\n\nexport type { MenuItemPropTypes, MenuButtonPropTypes, MenuItemIconStates } from './navigation/menu/Menu.interfaces';\n\n// Templates\nexport { TemplateForm } from './templates/templateForm/TemplateForm';\nexport type { TemplateFormProps } from './templates/templateForm/TemplateForm';\nexport { TemplateLoading } from './templates/templateLoading/TemplateLoading';\nexport type { TemplateLoadingProps } from './templates/templateLoading/TemplateLoading';\nexport { TemplateDashboard } from './templates/templateDashboard/TemplateDashboard';\nexport type { TemplateDashboardProps } from './templates/templateDashboard/TemplateDashboard';\nexport { TemplatePage } from './templates/templatePage/TemplatePage';\nexport type { TemplatePageProps } from './templates/templatePage/TemplatePage';\n\n// Aliases to match common libraries\nexport { SelectDropdown as Select } from './form/formFields/subComponents/InputVariants';\nexport { InputCheckbox as Checkbox } from './form/formFields/subComponents/inputs/checkbox/InputCheckbox';"],"mappings":"AAAA,YAAY;;AAEZ;AACA,SAASA,SAAS,QAAQ,8BAA8B;AACxD,SAASC,IAAI,EAAEC,IAAI,EAAEC,KAAK,QAAQ,oBAAoB;AACtD,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,SAAS,QAAQ,8BAA8B;AACxD,SAASC,IAAI,QAAQ,+BAA+B;AACpD,SAASC,gBAAgB,QAAQ,kDAAkD;AACnF,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,eAAe,QAAQ,2CAA2C;AAC3E,SAASC,UAAU,QAAQ,sCAAsC;AACjE,SAASC,OAAO,QAAQ,kCAAkC;AAC1D,SAASC,UAAU,QAAQ,qCAAqC;AAChE,SAASC,SAAS,QAAQ,oCAAoC;AAE9D,SAASC,SAAS,QAAQ,8BAA8B;AACxD,SAASC,QAAQ,QAAQ,4BAA4B;AAErD,SAASC,OAAO,QAAQ,0BAA0B;AAClD,SAASC,gBAAgB,QAAQ,6DAA6D;AAC9F,SAASC,WAAW,QAAQ,mDAAmD;AAC/E,SAASC,eAAe,QAAQ,2DAA2D;AAC3F,SAASC,IAAI,QAAQ,oBAAoB;AACzC,SAASC,OAAO,QAAQ,0BAA0B;AAClD,SAASC,eAAe,QAAQ,kDAAkD;AAClF,SAASC,UAAU,QAAQ,gCAAgC;AAC3D,SAASC,QAAQ,QAAQ,4BAA4B;AACrD,SAASC,SAAS,QAAQ,+BAA+B;AACzD,SAASC,UAAU,EAAEC,MAAM,EAAEC,KAAK,QAAQ,wCAAwC;AAGlF;AACA,SAASC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAClE,SAASC,SAAS,QAAQ,8CAA8C;AACxE,SAASC,aAAa,EAAEC,aAAa,QAAQ,+DAA+D;AAC5G,SAASC,gBAAgB,QAAQ,sEAAsE;AACvG,SAASC,gBAAgB,QAAQ,sEAAsE;AACvG,SAASC,gBAAgB,QAAQ,sEAAsE;AACvG,SAASC,eAAe,QAAQ,wCAAwC;AAExE,SACEC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,WAAW,EACXC,WAAW,EACXC,UAAU,EACVC,QAAQ,EACRC,aAAa,EACbC,mBAAmB,EACnBC,cAAc,EACdC,QAAQ,EACRC,QAAQ,QACH,+CAA+C;AAOtD,SACEC,SAAS,QACJ,uDAAuD;AAC9D,SAASC,SAAS,QAAQ,uDAAuD;AAGjF;AACA,SAASC,IAAI,QAAQ,oBAAoB;AACzC,SAASC,YAAY,QAAQ,uCAAuC;AACpE,SAASC,UAAU,QAAQ,gCAAgC;AAE3D,SAASC,WAAW,QAAQ,kCAAkC;AAG9D;AACA,SAASC,UAAU,QAAQ,iCAAiC;AAC5D,SAASC,WAAW,QAAQ,mCAAmC;AAC/D,SAASC,UAAU,QAAQ,iCAAiC;AAE5D,SAASC,eAAe,QAAQ,4DAA4D;AAC5F,SAASC,IAAI,QAAQ,wBAAwB;AAC7C,SAASC,SAAS,QAAQ,kCAAkC;AAC5D,SAASC,eAAe,QAAQ,8CAA8C;AAC9E,SAASC,IAAI,QAAQ,wBAAwB;AAI7C;AACA,SAASC,YAAY,QAAQ,uCAAuC;AAEpE,SAASC,eAAe,QAAQ,6CAA6C;AAE7E,SAASC,iBAAiB,QAAQ,iDAAiD;AAEnF,SAASC,YAAY,QAAQ,uCAAuC;AAGpE;AACA,SAASpB,cAAc,IAAIqB,MAAM,QAAQ,+CAA+C;AACxF,SAASpC,aAAa,IAAIqC,QAAQ,QAAQ,+DAA+D","ignoreList":[]}

package/dist/esm/index.js

@@ -2,7 +2,7 @@ import './styles/index.css';
 import './icons/style.css';
 
 // Components
-export { Accordion, Chip, Pill, Badge, Dialog, HeaderBar, Icon, NotificationIcon, VentureLogo, CreditSavvyLogo, HomeInLogo, KitLogo, DoshiiLogo, TruyuLogo, SidePanel, Spinner, StatusIconButton, StatusLight, StatusLightsBar, Tabs, Tooltip, EllipsisTooltip, RevealMore, CopyText, Paginator, PageBanner, Banner, Alert, SimpleButton, Button, FormField, InputCheckbox, CheckboxInput, StyledRadioGroup, StyledRadioInput, StyledRadioLabel, HookFormWrapper, TextInput, EmailInput, FileInput, SearchInput, NumberInput, PhoneInput, UrlInput, PasswordInput, PasswordInputSignup, SelectDropdown, Select, Combobox, Textarea, InputDate, DateInput, Card, ReportFooter, MainHeader, ThemeLoader, DevToolbar, ThemeSwitch, LoremIpsum, GlobalDashboard, Menu, PopupMenu, SearchPanelMenu, Link, TemplateForm, TemplateLoading, TemplateDashboard, TemplatePage } from './components';
+export { Accordion, Chip, Pill, Badge, Dialog, HeaderBar, Icon, NotificationIcon, VentureLogo, CreditSavvyLogo, HomeInLogo, KitLogo, DoshiiLogo, TruyuLogo, SidePanel, Skeleton, Spinner, StatusIconButton, StatusLight, StatusLightsBar, Tabs, Tooltip, EllipsisTooltip, RevealMore, CopyText, Paginator, PageBanner, Banner, Alert, SimpleButton, Button, FormField, InputCheckbox, CheckboxInput, StyledRadioGroup, StyledRadioInput, StyledRadioLabel, HookFormWrapper, TextInput, EmailInput, FileInput, SearchInput, NumberInput, PhoneInput, UrlInput, PasswordInput, PasswordInputSignup, SelectDropdown, Select, Combobox, Textarea, InputDate, DateInput, Card, ReportFooter, MainHeader, ThemeLoader, DevToolbar, ThemeSwitch, LoremIpsum, GlobalDashboard, Menu, PopupMenu, SearchPanelMenu, Link, TemplateForm, TemplateLoading, TemplateDashboard, TemplatePage } from './components';
 // Hooks
 export { useOnClickOutside, usePopupKeys, useOnEdgeProximityDetect, useFirstCapital, useTabbableInputGroup, useDialogOverlay, useEllipsisBookends, useFocusTrap, useInertAttribute } from './hooks';
 

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Accordion","Chip","Pill","Badge","Dialog","HeaderBar","Icon","NotificationIcon","VentureLogo","CreditSavvyLogo","HomeInLogo","KitLogo","DoshiiLogo","TruyuLogo","SidePanel","Spinner","StatusIconButton","StatusLight","StatusLightsBar","Tabs","Tooltip","EllipsisTooltip","RevealMore","CopyText","Paginator","PageBanner","Banner","Alert","SimpleButton","Button","FormField","InputCheckbox","CheckboxInput","StyledRadioGroup","StyledRadioInput","StyledRadioLabel","HookFormWrapper","TextInput","EmailInput","FileInput","SearchInput","NumberInput","PhoneInput","UrlInput","PasswordInput","PasswordInputSignup","SelectDropdown","Select","Combobox","Textarea","InputDate","DateInput","Card","ReportFooter","MainHeader","ThemeLoader","DevToolbar","ThemeSwitch","LoremIpsum","GlobalDashboard","Menu","PopupMenu","SearchPanelMenu","Link","TemplateForm","TemplateLoading","TemplateDashboard","TemplatePage","useOnClickOutside","usePopupKeys","useOnEdgeProximityDetect","useFirstCapital","useTabbableInputGroup","useDialogOverlay","useEllipsisBookends","useFocusTrap","useInertAttribute","getMinAge","getMaxAge","getMinAndMaxAges","validateBirthdate","isDateEntryComplete","getAgeInWeeks","getAgeInYears","binaryFindInArray","addAndSortArray","moveItemInArrayMutate","moveItemInArrayCopy","getRandomItemFromArray","getItemIndexWithinArray","getRoundedMedian","getMostOccurringBoolean","cssClassesArrayToString","transformPlacesData","extractNamePieces","dateToShortIsoString","isValidDate","dateToShortReadableDate","dateToShortReadableMonth","timeStampToShortReadableDate","dateToReadableTime","dateToShortReadableDateTime","getLastDateOfMonth","daysSince","USER_CURRENCY","intlCurrencyFormatter","intlNumberFormatter","formatNumberForLocale","formatAsCurrencyForLocale","getNumberAbbreviation","formatRoundedNumberWithAbbreviation","formatNumberWithAbbreviation","formatNumberForChartAxis","formatAsSimpleCurrencyForChartAxis","formatAsInternationalCurrencyForChartAxis","formatAsCurrencyWithAbbreviation","formatFileSize","getRandomNumberBelow","getRandomBetweenInclusive","getRandomBetweenExclusive","hashCode","roundToDecimal","formatNumberToMinDigits","formatDigitalTime","richTextParser","capitalize","capitalizeFirstLetter","lowerCaseFirstLetter","useAnInsteadOfA","splitCamelCase","pluralize","pluralizeIfNeeded","getInitialsOrAcronym","objectsAreTheSame","isAnObject","createCompareValueOverride","deepMergeObjects","overrideMergeObjects","makeInheritanceObject","updateNestedProperty","filterObject","getArrayOfObjectKeys","getArrayOfReadableObjectKeys","getBranchFromPath","deepRemoveProps","UserMock","MenuMock","xGraphTopMenuMock","xGraphMainMenuMock","DashboardMenuMock","UserMenuMock","CBA_ORG_STRUCTURE","CBA_LOGO","VENTURES","DEFAULT_PASSWORD_REGEX","DEFAULT_EMAIL_REGEX","DEFAULT_PHONE_REGEX","DEFAULT_NUMBER_REGEX","DEFAULT_URL_REGEX","DATA_CLASSIFICATIONS","BLACKLISTED_FILE_TYPES","DEFAULT_UPLOAD_FILE_TYPES","DEFAULT_UPLOAD_FILE_EXTENSIONS","LIBRARY_CDN_BASE_URL","LIBRARY_CDN_BASE_URL_PROD","LIBRARY_CDN_BUCKET_NAME","LIBRARY_CDN_BUCKET_FOLDER","LIBRARY_CDN_DEV_BASE_URL","LIBRARY_CDN_PROD_BASE_URL","LIBRARY_VERSION","UserContextProvider","AppContextProvider"],"sources":["../../src/index.ts"],"sourcesContent":["import './styles/index.scss';\nimport './icons/style.scss';\n\n// Components\nexport {\n  Accordion,\n  Chip,\n  Pill,\n  Badge,\n  Dialog,\n  HeaderBar,\n  Icon,\n  NotificationIcon,\n  VentureLogo,\n  CreditSavvyLogo,\n  HomeInLogo,\n  KitLogo,\n  DoshiiLogo,\n  TruyuLogo,\n  SidePanel,\n  Spinner,\n  StatusIconButton,\n  StatusLight,\n  StatusLightsBar,\n  Tabs,\n  Tooltip,\n  EllipsisTooltip,\n  RevealMore,\n  CopyText,\n  Paginator,\n  PageBanner,\n  Banner,\n  Alert,\n  SimpleButton,\n  Button,\n  FormField,\n  InputCheckbox,\n  CheckboxInput,\n  StyledRadioGroup,\n  StyledRadioInput,\n  StyledRadioLabel,\n  HookFormWrapper,\n  TextInput,\n  EmailInput,\n  FileInput,\n  SearchInput,\n  NumberInput,\n  PhoneInput,\n  UrlInput,\n  PasswordInput,\n  PasswordInputSignup,\n  SelectDropdown,\n  Select,\n  Combobox,\n  Textarea,\n  InputDate,\n  DateInput,\n  Card,\n  ReportFooter,\n  MainHeader,\n  ThemeLoader,\n  DevToolbar,\n  ThemeSwitch,\n  LoremIpsum,\n  GlobalDashboard,\n  Menu,\n  PopupMenu,\n  SearchPanelMenu,\n  Link,\n  TemplateForm,\n  TemplateLoading,\n  TemplateDashboard,\n  TemplatePage\n} from './components';\n\nexport type {\n  PageBannerProps,\n  FormComponentProps,\n  DropdownSelectProps,\n  PasswordInputProps,\n  StyledRadioGroupProps,\n  ThemeStructure,\n  MenuItemPropTypes,\n  MenuButtonPropTypes,\n  MenuItemIconStates,\n  TemplateFormProps,\n  TemplateLoadingProps,\n  TemplateDashboardProps,\n  TemplatePageProps\n} from './components';\n\n// Hooks\nexport {\n  useOnClickOutside,\n  usePopupKeys,\n  useOnEdgeProximityDetect,\n  useFirstCapital,\n  useTabbableInputGroup,\n  useDialogOverlay,\n  useEllipsisBookends,\n  useFocusTrap,\n  useInertAttribute\n} from './hooks';\n\n// Interfaces (types only - safe to keep export *)\nexport * from './interfaces';\n\n// Helpers\nexport {\n  getMinAge,\n  getMaxAge,\n  getMinAndMaxAges,\n  validateBirthdate,\n  isDateEntryComplete,\n  getAgeInWeeks,\n  getAgeInYears\n} from './helpers/ageHelpers';\n\nexport {\n  binaryFindInArray,\n  addAndSortArray,\n  moveItemInArrayMutate,\n  moveItemInArrayCopy,\n  getRandomItemFromArray,\n  getItemIndexWithinArray,\n  getRoundedMedian,\n  getMostOccurringBoolean,\n  cssClassesArrayToString\n} from './helpers/arrayHelpers';\n\nexport {\n  transformPlacesData,\n  extractNamePieces\n} from './helpers/dataHelpers';\nexport type { NamePieces } from './helpers/dataHelpers';\n\nexport {\n  dateToShortIsoString,\n  isValidDate,\n  dateToShortReadableDate,\n  dateToShortReadableMonth,\n  timeStampToShortReadableDate,\n  dateToReadableTime,\n  dateToShortReadableDateTime,\n  getLastDateOfMonth,\n  daysSince\n} from './helpers/dateHelpers';\n\nexport {\n  USER_CURRENCY,\n  intlCurrencyFormatter,\n  intlNumberFormatter,\n  formatNumberForLocale,\n  formatAsCurrencyForLocale,\n  getNumberAbbreviation,\n  formatRoundedNumberWithAbbreviation,\n  formatNumberWithAbbreviation,\n  formatNumberForChartAxis,\n  formatAsSimpleCurrencyForChartAxis,\n  formatAsInternationalCurrencyForChartAxis,\n  formatAsCurrencyWithAbbreviation,\n  formatFileSize\n} from './helpers/formatters';\n\nexport {\n  getRandomNumberBelow,\n  getRandomBetweenInclusive,\n  getRandomBetweenExclusive,\n  hashCode,\n  roundToDecimal,\n  formatNumberToMinDigits,\n  formatDigitalTime\n} from './helpers/numberHelpers';\n\nexport {\n  richTextParser,\n  capitalize,\n  capitalizeFirstLetter,\n  lowerCaseFirstLetter,\n  useAnInsteadOfA,\n  splitCamelCase,\n  pluralize,\n  pluralizeIfNeeded,\n  getInitialsOrAcronym\n} from './helpers/stringHelpers';\n\nexport {\n  objectsAreTheSame,\n  isAnObject,\n  createCompareValueOverride,\n  deepMergeObjects,\n  overrideMergeObjects,\n  makeInheritanceObject,\n  updateNestedProperty,\n  filterObject,\n  getArrayOfObjectKeys,\n  getArrayOfReadableObjectKeys,\n  getBranchFromPath,\n  deepRemoveProps\n} from './helpers/objectHelpers';\n\n// Mocks\nexport {\n  UserMock,\n  MenuMock,\n  xGraphTopMenuMock,\n  xGraphMainMenuMock,\n  DashboardMenuMock,\n  UserMenuMock\n} from './mocks';\n\n// Constants\nexport {\n  CBA_ORG_STRUCTURE,\n  CBA_LOGO,\n  VENTURES,\n  DEFAULT_PASSWORD_REGEX,\n  DEFAULT_EMAIL_REGEX,\n  DEFAULT_PHONE_REGEX,\n  DEFAULT_NUMBER_REGEX,\n  DEFAULT_URL_REGEX,\n  DATA_CLASSIFICATIONS,\n  BLACKLISTED_FILE_TYPES,\n  DEFAULT_UPLOAD_FILE_TYPES,\n  DEFAULT_UPLOAD_FILE_EXTENSIONS,\n  LIBRARY_CDN_BASE_URL,\n  LIBRARY_CDN_BASE_URL_PROD,\n  LIBRARY_CDN_BUCKET_NAME,\n  LIBRARY_CDN_BUCKET_FOLDER,\n  LIBRARY_CDN_DEV_BASE_URL,\n  LIBRARY_CDN_PROD_BASE_URL,\n  LIBRARY_VERSION\n} from './constants';\n\nexport type {\n  USER,\n  GlobalUserRole,\n  ScopedUserRole,\n  UserAuthType,\n  VentureSite,\n  VentureSites,\n  VentureDefinition,\n  VentureDefinitions\n} from './constants';\n\n// Context Providers\nexport { UserContextProvider, AppContextProvider } from './contextProviders';\n"],"mappings":"AAAA,OAAO,qBAAqB;AAC5B,OAAO,oBAAoB;;AAE3B;AACA,SACEA,SAAS,EACTC,IAAI,EACJC,IAAI,EACJC,KAAK,EACLC,MAAM,EACNC,SAAS,EACTC,IAAI,EACJC,gBAAgB,EAChBC,WAAW,EACXC,eAAe,EACfC,UAAU,EACVC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,OAAO,EACPC,gBAAgB,EAChBC,WAAW,EACXC,eAAe,EACfC,IAAI,EACJC,OAAO,EACPC,eAAe,EACfC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,aAAa,EACbC,gBAAgB,EAChBC,gBAAgB,EAChBC,gBAAgB,EAChBC,eAAe,EACfC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,WAAW,EACXC,WAAW,EACXC,UAAU,EACVC,QAAQ,EACRC,aAAa,EACbC,mBAAmB,EACnBC,cAAc,EACdC,MAAM,EACNC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACTC,IAAI,EACJC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,UAAU,EACVC,WAAW,EACXC,UAAU,EACVC,eAAe,EACfC,IAAI,EACJC,SAAS,EACTC,eAAe,EACfC,IAAI,EACJC,YAAY,EACZC,eAAe,EACfC,iBAAiB,EACjBC,YAAY,QACP,cAAc;AAkBrB;AACA,SACEC,iBAAiB,EACjBC,YAAY,EACZC,wBAAwB,EACxBC,eAAe,EACfC,qBAAqB,EACrBC,gBAAgB,EAChBC,mBAAmB,EACnBC,YAAY,EACZC,iBAAiB,QACZ,SAAS;;AAEhB;AACA,cAAc,cAAc;;AAE5B;AACA,SACEC,SAAS,EACTC,SAAS,EACTC,gBAAgB,EAChBC,iBAAiB,EACjBC,mBAAmB,EACnBC,aAAa,EACbC,aAAa,QACR,sBAAsB;AAE7B,SACEC,iBAAiB,EACjBC,eAAe,EACfC,qBAAqB,EACrBC,mBAAmB,EACnBC,sBAAsB,EACtBC,uBAAuB,EACvBC,gBAAgB,EAChBC,uBAAuB,EACvBC,uBAAuB,QAClB,wBAAwB;AAE/B,SACEC,mBAAmB,EACnBC,iBAAiB,QACZ,uBAAuB;AAG9B,SACEC,oBAAoB,EACpBC,WAAW,EACXC,uBAAuB,EACvBC,wBAAwB,EACxBC,4BAA4B,EAC5BC,kBAAkB,EAClBC,2BAA2B,EAC3BC,kBAAkB,EAClBC,SAAS,QACJ,uBAAuB;AAE9B,SACEC,aAAa,EACbC,qBAAqB,EACrBC,mBAAmB,EACnBC,qBAAqB,EACrBC,yBAAyB,EACzBC,qBAAqB,EACrBC,mCAAmC,EACnCC,4BAA4B,EAC5BC,wBAAwB,EACxBC,kCAAkC,EAClCC,yCAAyC,EACzCC,gCAAgC,EAChCC,cAAc,QACT,sBAAsB;AAE7B,SACEC,oBAAoB,EACpBC,yBAAyB,EACzBC,yBAAyB,EACzBC,QAAQ,EACRC,cAAc,EACdC,uBAAuB,EACvBC,iBAAiB,QACZ,yBAAyB;AAEhC,SACEC,cAAc,EACdC,UAAU,EACVC,qBAAqB,EACrBC,oBAAoB,EACpBC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,iBAAiB,EACjBC,oBAAoB,QACf,yBAAyB;AAEhC,SACEC,iBAAiB,EACjBC,UAAU,EACVC,0BAA0B,EAC1BC,gBAAgB,EAChBC,oBAAoB,EACpBC,qBAAqB,EACrBC,oBAAoB,EACpBC,YAAY,EACZC,oBAAoB,EACpBC,4BAA4B,EAC5BC,iBAAiB,EACjBC,eAAe,QACV,yBAAyB;;AAEhC;AACA,SACEC,QAAQ,EACRC,QAAQ,EACRC,iBAAiB,EACjBC,kBAAkB,EAClBC,iBAAiB,EACjBC,YAAY,QACP,SAAS;;AAEhB;AACA,SACEC,iBAAiB,EACjBC,QAAQ,EACRC,QAAQ,EACRC,sBAAsB,EACtBC,mBAAmB,EACnBC,mBAAmB,EACnBC,oBAAoB,EACpBC,iBAAiB,EACjBC,oBAAoB,EACpBC,sBAAsB,EACtBC,yBAAyB,EACzBC,8BAA8B,EAC9BC,oBAAoB,EACpBC,yBAAyB,EACzBC,uBAAuB,EACvBC,yBAAyB,EACzBC,wBAAwB,EACxBC,yBAAyB,EACzBC,eAAe,QACV,aAAa;AAapB;AACA,SAASC,mBAAmB,EAAEC,kBAAkB,QAAQ,oBAAoB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Accordion","Chip","Pill","Badge","Dialog","HeaderBar","Icon","NotificationIcon","VentureLogo","CreditSavvyLogo","HomeInLogo","KitLogo","DoshiiLogo","TruyuLogo","SidePanel","Skeleton","Spinner","StatusIconButton","StatusLight","StatusLightsBar","Tabs","Tooltip","EllipsisTooltip","RevealMore","CopyText","Paginator","PageBanner","Banner","Alert","SimpleButton","Button","FormField","InputCheckbox","CheckboxInput","StyledRadioGroup","StyledRadioInput","StyledRadioLabel","HookFormWrapper","TextInput","EmailInput","FileInput","SearchInput","NumberInput","PhoneInput","UrlInput","PasswordInput","PasswordInputSignup","SelectDropdown","Select","Combobox","Textarea","InputDate","DateInput","Card","ReportFooter","MainHeader","ThemeLoader","DevToolbar","ThemeSwitch","LoremIpsum","GlobalDashboard","Menu","PopupMenu","SearchPanelMenu","Link","TemplateForm","TemplateLoading","TemplateDashboard","TemplatePage","useOnClickOutside","usePopupKeys","useOnEdgeProximityDetect","useFirstCapital","useTabbableInputGroup","useDialogOverlay","useEllipsisBookends","useFocusTrap","useInertAttribute","getMinAge","getMaxAge","getMinAndMaxAges","validateBirthdate","isDateEntryComplete","getAgeInWeeks","getAgeInYears","binaryFindInArray","addAndSortArray","moveItemInArrayMutate","moveItemInArrayCopy","getRandomItemFromArray","getItemIndexWithinArray","getRoundedMedian","getMostOccurringBoolean","cssClassesArrayToString","transformPlacesData","extractNamePieces","dateToShortIsoString","isValidDate","dateToShortReadableDate","dateToShortReadableMonth","timeStampToShortReadableDate","dateToReadableTime","dateToShortReadableDateTime","getLastDateOfMonth","daysSince","USER_CURRENCY","intlCurrencyFormatter","intlNumberFormatter","formatNumberForLocale","formatAsCurrencyForLocale","getNumberAbbreviation","formatRoundedNumberWithAbbreviation","formatNumberWithAbbreviation","formatNumberForChartAxis","formatAsSimpleCurrencyForChartAxis","formatAsInternationalCurrencyForChartAxis","formatAsCurrencyWithAbbreviation","formatFileSize","getRandomNumberBelow","getRandomBetweenInclusive","getRandomBetweenExclusive","hashCode","roundToDecimal","formatNumberToMinDigits","formatDigitalTime","richTextParser","capitalize","capitalizeFirstLetter","lowerCaseFirstLetter","useAnInsteadOfA","splitCamelCase","pluralize","pluralizeIfNeeded","getInitialsOrAcronym","objectsAreTheSame","isAnObject","createCompareValueOverride","deepMergeObjects","overrideMergeObjects","makeInheritanceObject","updateNestedProperty","filterObject","getArrayOfObjectKeys","getArrayOfReadableObjectKeys","getBranchFromPath","deepRemoveProps","UserMock","MenuMock","xGraphTopMenuMock","xGraphMainMenuMock","DashboardMenuMock","UserMenuMock","CBA_ORG_STRUCTURE","CBA_LOGO","VENTURES","DEFAULT_PASSWORD_REGEX","DEFAULT_EMAIL_REGEX","DEFAULT_PHONE_REGEX","DEFAULT_NUMBER_REGEX","DEFAULT_URL_REGEX","DATA_CLASSIFICATIONS","BLACKLISTED_FILE_TYPES","DEFAULT_UPLOAD_FILE_TYPES","DEFAULT_UPLOAD_FILE_EXTENSIONS","LIBRARY_CDN_BASE_URL","LIBRARY_CDN_BASE_URL_PROD","LIBRARY_CDN_BUCKET_NAME","LIBRARY_CDN_BUCKET_FOLDER","LIBRARY_CDN_DEV_BASE_URL","LIBRARY_CDN_PROD_BASE_URL","LIBRARY_VERSION","UserContextProvider","AppContextProvider"],"sources":["../../src/index.ts"],"sourcesContent":["import './styles/index.scss';\nimport './icons/style.scss';\n\n// Components\nexport {\n  Accordion,\n  Chip,\n  Pill,\n  Badge,\n  Dialog,\n  HeaderBar,\n  Icon,\n  NotificationIcon,\n  VentureLogo,\n  CreditSavvyLogo,\n  HomeInLogo,\n  KitLogo,\n  DoshiiLogo,\n  TruyuLogo,\n  SidePanel,\n  Skeleton,\n  Spinner,\n  StatusIconButton,\n  StatusLight,\n  StatusLightsBar,\n  Tabs,\n  Tooltip,\n  EllipsisTooltip,\n  RevealMore,\n  CopyText,\n  Paginator,\n  PageBanner,\n  Banner,\n  Alert,\n  SimpleButton,\n  Button,\n  FormField,\n  InputCheckbox,\n  CheckboxInput,\n  StyledRadioGroup,\n  StyledRadioInput,\n  StyledRadioLabel,\n  HookFormWrapper,\n  TextInput,\n  EmailInput,\n  FileInput,\n  SearchInput,\n  NumberInput,\n  PhoneInput,\n  UrlInput,\n  PasswordInput,\n  PasswordInputSignup,\n  SelectDropdown,\n  Select,\n  Combobox,\n  Textarea,\n  InputDate,\n  DateInput,\n  Card,\n  ReportFooter,\n  MainHeader,\n  ThemeLoader,\n  DevToolbar,\n  ThemeSwitch,\n  LoremIpsum,\n  GlobalDashboard,\n  Menu,\n  PopupMenu,\n  SearchPanelMenu,\n  Link,\n  TemplateForm,\n  TemplateLoading,\n  TemplateDashboard,\n  TemplatePage\n} from './components';\n\nexport type {\n  PageBannerProps,\n  FormComponentProps,\n  DropdownSelectProps,\n  PasswordInputProps,\n  StyledRadioGroupProps,\n  SkeletonProps,\n  ThemeStructure,\n  MenuItemPropTypes,\n  MenuButtonPropTypes,\n  MenuItemIconStates,\n  TemplateFormProps,\n  TemplateLoadingProps,\n  TemplateDashboardProps,\n  TemplatePageProps\n} from './components';\n\n// Hooks\nexport {\n  useOnClickOutside,\n  usePopupKeys,\n  useOnEdgeProximityDetect,\n  useFirstCapital,\n  useTabbableInputGroup,\n  useDialogOverlay,\n  useEllipsisBookends,\n  useFocusTrap,\n  useInertAttribute\n} from './hooks';\n\n// Interfaces (types only - safe to keep export *)\nexport * from './interfaces';\n\n// Helpers\nexport {\n  getMinAge,\n  getMaxAge,\n  getMinAndMaxAges,\n  validateBirthdate,\n  isDateEntryComplete,\n  getAgeInWeeks,\n  getAgeInYears\n} from './helpers/ageHelpers';\n\nexport {\n  binaryFindInArray,\n  addAndSortArray,\n  moveItemInArrayMutate,\n  moveItemInArrayCopy,\n  getRandomItemFromArray,\n  getItemIndexWithinArray,\n  getRoundedMedian,\n  getMostOccurringBoolean,\n  cssClassesArrayToString\n} from './helpers/arrayHelpers';\n\nexport {\n  transformPlacesData,\n  extractNamePieces\n} from './helpers/dataHelpers';\nexport type { NamePieces } from './helpers/dataHelpers';\n\nexport {\n  dateToShortIsoString,\n  isValidDate,\n  dateToShortReadableDate,\n  dateToShortReadableMonth,\n  timeStampToShortReadableDate,\n  dateToReadableTime,\n  dateToShortReadableDateTime,\n  getLastDateOfMonth,\n  daysSince\n} from './helpers/dateHelpers';\n\nexport {\n  USER_CURRENCY,\n  intlCurrencyFormatter,\n  intlNumberFormatter,\n  formatNumberForLocale,\n  formatAsCurrencyForLocale,\n  getNumberAbbreviation,\n  formatRoundedNumberWithAbbreviation,\n  formatNumberWithAbbreviation,\n  formatNumberForChartAxis,\n  formatAsSimpleCurrencyForChartAxis,\n  formatAsInternationalCurrencyForChartAxis,\n  formatAsCurrencyWithAbbreviation,\n  formatFileSize\n} from './helpers/formatters';\n\nexport {\n  getRandomNumberBelow,\n  getRandomBetweenInclusive,\n  getRandomBetweenExclusive,\n  hashCode,\n  roundToDecimal,\n  formatNumberToMinDigits,\n  formatDigitalTime\n} from './helpers/numberHelpers';\n\nexport {\n  richTextParser,\n  capitalize,\n  capitalizeFirstLetter,\n  lowerCaseFirstLetter,\n  useAnInsteadOfA,\n  splitCamelCase,\n  pluralize,\n  pluralizeIfNeeded,\n  getInitialsOrAcronym\n} from './helpers/stringHelpers';\n\nexport {\n  objectsAreTheSame,\n  isAnObject,\n  createCompareValueOverride,\n  deepMergeObjects,\n  overrideMergeObjects,\n  makeInheritanceObject,\n  updateNestedProperty,\n  filterObject,\n  getArrayOfObjectKeys,\n  getArrayOfReadableObjectKeys,\n  getBranchFromPath,\n  deepRemoveProps\n} from './helpers/objectHelpers';\n\n// Mocks\nexport {\n  UserMock,\n  MenuMock,\n  xGraphTopMenuMock,\n  xGraphMainMenuMock,\n  DashboardMenuMock,\n  UserMenuMock\n} from './mocks';\n\n// Constants\nexport {\n  CBA_ORG_STRUCTURE,\n  CBA_LOGO,\n  VENTURES,\n  DEFAULT_PASSWORD_REGEX,\n  DEFAULT_EMAIL_REGEX,\n  DEFAULT_PHONE_REGEX,\n  DEFAULT_NUMBER_REGEX,\n  DEFAULT_URL_REGEX,\n  DATA_CLASSIFICATIONS,\n  BLACKLISTED_FILE_TYPES,\n  DEFAULT_UPLOAD_FILE_TYPES,\n  DEFAULT_UPLOAD_FILE_EXTENSIONS,\n  LIBRARY_CDN_BASE_URL,\n  LIBRARY_CDN_BASE_URL_PROD,\n  LIBRARY_CDN_BUCKET_NAME,\n  LIBRARY_CDN_BUCKET_FOLDER,\n  LIBRARY_CDN_DEV_BASE_URL,\n  LIBRARY_CDN_PROD_BASE_URL,\n  LIBRARY_VERSION\n} from './constants';\n\nexport type {\n  USER,\n  GlobalUserRole,\n  ScopedUserRole,\n  UserAuthType,\n  VentureSite,\n  VentureSites,\n  VentureDefinition,\n  VentureDefinitions\n} from './constants';\n\n// Context Providers\nexport { UserContextProvider, AppContextProvider } from './contextProviders';\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/package.json

@@ -137,7 +137,7 @@
   "files": [
     "dist"
   ],
-  "version": "3.13.4",
+  "version": "3.14.0",
   "packageManager": "pnpm@10.11.0",
   "repository": {
     "type": "git",

package/dist/esm/styles/index.css

@@ -254,6 +254,17 @@
   --notificationIconFg: #fff;
   --notificationIconBorder: 4px solid #c00;
   --notificationIconBoxShadow: none;
+  --skeletonBg: #eef2f4;
+  --skeletonOpaqueBg: #d3dee4;
+  --skeletonHighlight: #f6f8fa;
+  --skeletonBorderRadius: 3px;
+  --skeletonRoundedBorderRadius: 8px;
+  --skeletonLineHeight: 1em;
+  --skeletonLineGap: 8px;
+  --skeletonBlockHeight: 120px;
+  --skeletonCircleSize: 40px;
+  --skeletonLastLineWidth: 60%;
+  --skeletonAnimationDuration: 1.6s;
 }
 
 :root {
@@ -597,6 +608,9 @@
   --sidePanelCloseButtonShadow: 0 0 5px 0 #110d0b;
   --sidePanelCloseIconColor: #dbd7d5;
   --sidePanelFg: #dbd7d5;
+  --skeletonBg: #1a1410;
+  --skeletonHighlight: #3d2f26;
+  --skeletonOpaqueBg: #2c211b;
   --statusAlertColor: #000;
   --statusDefCon3Bg: radial-gradient(circle at 60% 40%, #003, #000, #333); /* gradient stops inverted */
   --statusDefCon3Color: #003;
@@ -1914,6 +1928,31 @@ form select:placeholder-shown {
   font-weight: 200;
   font-family: var(--bodyFont);
 }
+form .textareaFieldContainer {
+  display: flex;
+  flex-direction: column;
+  row-gap: 5px;
+  align-items: stretch;
+  justify-content: flex-start;
+  width: 100%;
+}
+form .textareaFooter {
+  min-height: 1.5em;
+}
+form .textarea_Field.stacked label .textareaFooter .validation {
+  position: static;
+  height: auto;
+}
+form .textarea_Field.withValidation label {
+  padding-bottom: 0;
+}
+form .textareaCharacterCount {
+  line-height: 1.5;
+  color: var(--inputLabelColor);
+}
+form .textareaCharacterCountExceeded {
+  color: var(--inputErrorColor);
+}
 form input[type=number] {
   padding-right: 0;
 }

package/dist/esm/styles/shared/_allPartials.css

@@ -1262,6 +1262,31 @@ form select:placeholder-shown {
   font-weight: 200;
   font-family: var(--bodyFont);
 }
+form .textareaFieldContainer {
+  display: flex;
+  flex-direction: column;
+  row-gap: 5px;
+  align-items: stretch;
+  justify-content: flex-start;
+  width: 100%;
+}
+form .textareaFooter {
+  min-height: 1.5em;
+}
+form .textarea_Field.stacked label .textareaFooter .validation {
+  position: static;
+  height: auto;
+}
+form .textarea_Field.withValidation label {
+  padding-bottom: 0;
+}
+form .textareaCharacterCount {
+  line-height: 1.5;
+  color: var(--inputLabelColor);
+}
+form .textareaCharacterCountExceeded {
+  color: var(--inputErrorColor);
+}
 form input[type=number] {
   padding-right: 0;
 }

package/dist/esm/styles/shared/forms/_forms.css

@@ -261,6 +261,31 @@ form select:placeholder-shown {
   font-weight: 200;
   font-family: var(--bodyFont);
 }
+form .textareaFieldContainer {
+  display: flex;
+  flex-direction: column;
+  row-gap: 5px;
+  align-items: stretch;
+  justify-content: flex-start;
+  width: 100%;
+}
+form .textareaFooter {
+  min-height: 1.5em;
+}
+form .textarea_Field.stacked label .textareaFooter .validation {
+  position: static;
+  height: auto;
+}
+form .textarea_Field.withValidation label {
+  padding-bottom: 0;
+}
+form .textareaCharacterCount {
+  line-height: 1.5;
+  color: var(--inputLabelColor);
+}
+form .textareaCharacterCountExceeded {
+  color: var(--inputErrorColor);
+}
 form input[type=number] {
   padding-right: 0;
 }

package/dist/esm/styles/variables/cssVars/_darkModeVariables.css

@@ -233,6 +233,9 @@
   --sidePanelCloseButtonShadow: 0 0 5px 0 #110d0b;
   --sidePanelCloseIconColor: #dbd7d5;
   --sidePanelFg: #dbd7d5;
+  --skeletonBg: #1a1410;
+  --skeletonHighlight: #3d2f26;
+  --skeletonOpaqueBg: #2c211b;
   --statusAlertColor: #000;
   --statusDefCon3Bg: radial-gradient(circle at 60% 40%, #003, #000, #333); /* gradient stops inverted */
   --statusDefCon3Color: #003;

package/dist/esm/styles/variables/cssVars/_designVariables.css

@@ -216,4 +216,15 @@
   --notificationIconFg: #fff;
   --notificationIconBorder: 4px solid #c00;
   --notificationIconBoxShadow: none;
+  --skeletonBg: #eef2f4;
+  --skeletonOpaqueBg: #d3dee4;
+  --skeletonHighlight: #f6f8fa;
+  --skeletonBorderRadius: 3px;
+  --skeletonRoundedBorderRadius: 8px;
+  --skeletonLineHeight: 1em;
+  --skeletonLineGap: 8px;
+  --skeletonBlockHeight: 120px;
+  --skeletonCircleSize: 40px;
+  --skeletonLastLineWidth: 60%;
+  --skeletonAnimationDuration: 1.6s;
 }