@x15ventures/x15-ui-library 3.14.0 → 3.15.1

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

@@ -1 +1 @@
-{"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":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,IAAIC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAChD,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,eAAe,QAAQ,0CAA0C;AAE1E,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,wCAAwC;AAIzF;AACA;AACA;AACA;AACA;AACA,SAASC,iBAAiBA,CAACC,KAAa,EAAU;EAChD,IAAI,OAAOC,IAAI,KAAK,WAAW,IAAI,WAAW,IAAIA,IAAI,EAAE;IACtD,MAAMC,SAAS,GAAG,IAAID,IAAI,CAACE,SAAS,CAACC,SAAS,EAAE;MAC9CC,WAAW,EAAE;IACf,CAAC,CAAC;IACF,OAAOC,KAAK,CAACC,IAAI,CAACL,SAAS,CAACM,OAAO,CAACR,KAAK,CAAC,CAAC,CAACS,MAAM;EACpD;EACA,OAAOH,KAAK,CAACC,IAAI,CAACP,KAAK,CAAC,CAACS,MAAM;AACjC;AAEA,SAASC,kBAAkBA,CAACV,KAAa,EAAEW,UAAkB,EAAU;EACrE,IAAIZ,iBAAiB,CAACC,KAAK,CAAC,IAAIW,UAAU,EAAE;IAC1C,OAAOX,KAAK;EACd;EAEA,IAAI,OAAOC,IAAI,KAAK,WAAW,IAAI,WAAW,IAAIA,IAAI,EAAE;IACtD,MAAMC,SAAS,GAAG,IAAID,IAAI,CAACE,SAAS,CAACC,SAAS,EAAE;MAC9CC,WAAW,EAAE;IACf,CAAC,CAAC;IAEF,OAAOC,KAAK,CAACC,IAAI,CAACL,SAAS,CAACM,OAAO,CAACR,KAAK,CAAC,CAAC,CACxCY,KAAK,CAAC,CAAC,EAAED,UAAU,CAAC,CACpBE,GAAG,CAAEL,OAAO,IAAKA,OAAO,CAACA,OAAO,CAAC,CACjCM,IAAI,CAAC,EAAE,CAAC;EACb;EAEA,OAAOR,KAAK,CAACC,IAAI,CAACP,KAAK,CAAC,CAACY,KAAK,CAAC,CAAC,EAAED,UAAU,CAAC,CAACG,IAAI,CAAC,EAAE,CAAC;AACxD;AAEA,OAAO,MAAMC,QAAiC,GAAGA,CAC/C;EACEC,KAAK,EAAE;IACLC,EAAE;IACFC,IAAI;IACJC,WAAW;IACXC,YAAY;IACZC,SAAS;IACTC,gBAAgB;IAChBC,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,CAAC;IACpB,GAAGC;EACL,CAAC;EACDC,UAAU;EACVC,WAAW;EACXC,gBAAgB;EAChBC;AACF,CAAC,KACE;EACH,MAAM;IAAEC,QAAQ;IAAEC,aAAa;IAAEC,SAAS,EAAE;MAAEC;IAAO;EAAE,CAAC,GAAGzC,cAAc,CAAC,CAAC,IAAIE,iBAAiB;EAChG,MAAMwC,UAAU,GAAGH,aAAa,CAACf,IAAI,CAAC;EACtC,MAAMmB,aAAa,GAAGC,OAAO,CAACzC,YAAY,CAACsC,MAAM,EAAEjB,IAAI,CAAC,CAAC;EACzD;EACA;EACA,MAAMqB,SAAS,GAAGD,OAAO,CAACF,UAAU,EAAEI,OAAO,IAAIH,aAAa,CAAC;EAC/D,MAAM,CAACI,KAAK,EAAEC,QAAQ,CAAC,GAAGjD,QAAQ,CAAS,MACzCM,iBAAiB,CAACqB,YAAY,EAAEuB,QAAQ,CAAC,CAAC,IAAI,EAAE,CAClD,CAAC;EACD,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGpD,QAAQ,CAAC,KAAK,CAAC;EAC/D,MAAMqD,YAAY,GAAG,OAAOzB,SAAS,KAAK,QAAQ;EAClD,MAAM0B,SAAS,GAAGD,YAAY,GAAGL,KAAK,IAAIpB,SAAS,GAAG,KAAK;EAC3D;EACA;EACA,MAAM2B,eAAe,GAAGZ,UAAU,EAAEa,KAAK,EAAEC,IAAI,KAAK,UAAU;EAC9D,MAAMC,gBAAgB,GACpB,CAACP,gBAAgB,IAAI,CAACE,YAAY,IAAIE,eAAe,GACjD5C,SAAS,GACT,GAAIqC,KAAK,IAAMpB,SAAS,EAAG;EACjC,MAAM+B,QAAQ,GAAG,GAAItB,gBAAgB,EAAEuB,KAAK,IAAI,EAAE,GAAKd,SAAS,GAAG,eAAe,GAAG,EAAE,EAAG;EAE1F,MAAMe,oBAAoB,GAAG9D,OAAO,CAAC,MAAM;IACzC,IAAI,CAACoC,UAAU,IAAI,OAAOA,UAAU,CAACP,SAAS,KAAK,WAAW,EAAE;MAC9D,OAAOO,UAAU;IACnB;IAEA,MAAM2B,aAAa,GAAG3B,UAAU,CAACP,SAAS;IAC1C,MAAMmC,cAAc,GAClB,OAAOD,aAAa,KAAK,QAAQ,GAC7BA,aAAa,GACb,OAAOA,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,OAAO,IAAIA,aAAa,GAC5EE,MAAM,CAACF,aAAa,CAACvD,KAAK,CAAC,GAC3BI,SAAS;IAEjB,IAAI,OAAOoD,cAAc,KAAK,QAAQ,IAAIC,MAAM,CAACC,KAAK,CAACF,cAAc,CAAC,EAAE;MACtE,OAAO5B,UAAU;IACnB;IAEA,MAAM+B,gBAAgB,GAAG,qBAAsBH,cAAc,EAAG;IAEhE,MAAMI,0BAA0B,GAAI5D,KAAa,IAC/CD,iBAAiB,CAACC,KAAK,IAAI,EAAE,CAAC,IAAIwD,cAAc,IAAIG,gBAAgB;;IAEtE;IACA,MAAM;MAAEtC,SAAS,EAAEwC,UAAU;MAAEC,QAAQ;MAAE,GAAGC;IAAe,CAAC,GAAGnC,UAAU;IAEzE,IAAI,OAAOkC,QAAQ,KAAK,UAAU,EAAE;MAClC,OAAO;QACL,GAAGC,cAAc;QACjBD,QAAQ,EAAE,MAAAA,CAAO9D,KAAa,EAAEgE,UAAoB,KAAK;UACvD,MAAMC,gBAAgB,GAAG,MAAMH,QAAQ,CAAC9D,KAAK,EAAEgE,UAAU,CAAC;UAC1D,IAAIC,gBAAgB,KAAK,IAAI,EAAE;YAC7B,OAAOA,gBAAgB;UACzB;UACA,OAAOL,0BAA0B,CAAC5D,KAAK,CAAC;QAC1C;MACF,CAAC;IACH;IAEA,IAAI8D,QAAQ,IAAI,OAAOA,QAAQ,KAAK,QAAQ,EAAE;MAC5C,OAAO;QACL,GAAGC,cAAc;QACjBD,QAAQ,EAAE;UACR,GAAGA,QAAQ;UACXI,iBAAiB,EAAEN;QACrB;MACF,CAAC;IACH;IAEA,OAAO;MACL,GAAGG,cAAc;MACjBD,QAAQ,EAAEF;IACZ,CAAC;EACH,CAAC,EAAE,CAAChC,UAAU,CAAC,CAAC;EAEhB,MAAMuC,UAAU,GAAGnC,QAAQ,CAACd,IAAI,EAAEoC,oBAAoB,CAAC;;EAEvD;AACF;AACA;AACA;AACA;AACA;EACE,MAAMc,iBAAiB,GAAIC,KAA2C,IAAK;IACzE,IAAI/C,gBAAgB,KAAK,IAAI,IAAI,CAACwB,YAAY,EAAE;IAEhD,MAAMwB,WAAW,GAAGD,KAAK,CAACC,WAAyB;IACnD,MAAMC,QAAQ,GAAGD,WAAW,CAACE,IAAI,IAAI,EAAE;IAEvC,IAAI,CAACD,QAAQ,EAAE;IAEf,MAAME,MAAM,GAAGJ,KAAK,CAACK,aAAa;IAClC,MAAMC,KAAK,GAAGF,MAAM,CAACG,cAAc,IAAIH,MAAM,CAACzE,KAAK,CAACS,MAAM;IAC1D,MAAMoE,GAAG,GAAGJ,MAAM,CAACK,YAAY,IAAIL,MAAM,CAACzE,KAAK,CAACS,MAAM;IAEtD,MAAMsE,SAAS,GACbN,MAAM,CAACzE,KAAK,CAACY,KAAK,CAAC,CAAC,EAAE+D,KAAK,CAAC,GAC5BJ,QAAQ,GACRE,MAAM,CAACzE,KAAK,CAACY,KAAK,CAACiE,GAAG,CAAC;IAEzB,IAAI9E,iBAAiB,CAACgF,SAAS,CAAC,GAAG1D,SAAS,EAAE;MAC5CgD,KAAK,CAACW,cAAc,CAAC,CAAC;IACxB;EACF,CAAC;EAED,MAAMC,YAAY,GAAIZ,KAA6C,IAAK;IACtE,MAAMa,QAAQ,GAAGb,KAAK,CAACI,MAAM,CAACzE,KAAK,IAAI,EAAE;IACzC,MAAMmF,QAAQ,GACZ7D,gBAAgB,KAAK,IAAI,IAAIwB,YAAY,GACrCpC,kBAAkB,CAACwE,QAAQ,EAAE7D,SAAS,CAAC,GACvC6D,QAAQ;IAEd,IAAIC,QAAQ,KAAKD,QAAQ,EAAE;MACzBb,KAAK,CAACI,MAAM,CAACzE,KAAK,GAAGmF,QAAQ;IAC/B;IAEAtC,mBAAmB,CAAC,IAAI,CAAC;IACzBH,QAAQ,CAAC3C,iBAAiB,CAACoF,QAAQ,CAAC,CAAC;IACrC,MAAMC,gBAAgB,GAAG5D,QAEZ;IACb4D,gBAAgB,GAAGf,KAAK,CAAC;EAC3B,CAAC;EAED,MAAMgB,YAAY,GAAIhB,KAA4C,IAAK;IACrE,MAAM;MAAEI;IAAO,CAAC,GAAGJ,KAAK;IACxB,IAAII,MAAM,EAAE;MACV/C,SAAS,CAAC,CAAC;MACXH,MAAM,CAAC8C,KAAK,CAAC;IACf;EACF,CAAC;EAED,MAAMiB,cAAc,GAAIjB,KAA+C,IAAK;IAC1E3C,SAAS,CAAC,CAAC;IACX,MAAM6D,iBAAiB,GAAG9D,SAEb;IACb8D,iBAAiB,GAAGlB,KAAK,CAAC;EAC5B,CAAC;EAED,MAAMmB,kBAAkB,GAAG,GAAIvE,EAAE,iBAAkB;EACnD,MAAMwE,QAAQ,GAAG,GAAIvE,IAAI,SAAU;EACnC,MAAMwE,mBAAmB,GACvB,OAAO/D,kBAAkB,CAAC,kBAAkB,CAAC,KAAK,QAAQ,GACtDA,kBAAkB,CAAC,kBAAkB,CAAC,GACtCvB,SAAS;EACf,MAAMuF,kBAAkB,GAAGpD,SAAS,IAAIS,eAAe;EACvD,MAAM4C,iBAAiB,GAAGD,kBAAkB,GACxC,CAACD,mBAAmB,EAAED,QAAQ,CAAC,CAACI,MAAM,CAACvD,OAAO,CAAC,CAACxB,IAAI,CAAC,GAAG,CAAC,GACzDqC,gBAAgB,KAAK/C,SAAS,GAC5B,CAACsF,mBAAmB,EAAEF,kBAAkB,CAAC,CAACK,MAAM,CAACvD,OAAO,CAAC,CAACxB,IAAI,CAAC,GAAG,CAAC,GACnE4E,mBAAmB;EAEzB,MAAMI,aAAa,GAAG;IACpB7E,EAAE;IACF8E,SAAS,EAAE3C,QAAQ;IACnBjC,WAAW;IACXC,YAAY;IACZ,IAAIS,WAAW,GAAG;MAAEmE,QAAQ,EAAE;IAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1C,IAAIpE,UAAU,IAAI,OAAOA,UAAU,CAACqE,QAAQ,KAAK,WAAW,GAAG;MAAEA,QAAQ,EAAE;IAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACvF,GAAG9B,UAAU;IACb+B,aAAa,EAAE9B,iBAAiB;IAChC5C,QAAQ,EAAG6C,KAA6C,IAAK;MAC3DY,YAAY,CAACZ,KAAK,CAAC;MACnBF,UAAU,EAAE3C,QAAQ,GAAG6C,KAAK,CAAC;IAC/B,CAAC;IACD9C,MAAM,EAAG8C,KAA4C,IAAK;MACxDgB,YAAY,CAAChB,KAAK,CAAC;MACnBF,UAAU,EAAE5C,MAAM,GAAG8C,KAAK,CAAC;IAC7B,CAAC;IACD5C,SAAS,EAAE6D,cAAc;IACzB,GAAG3D,kBAAkB;IACrB,kBAAkB,EAAEiE;EACtB,CAAC;EAED,oBACErG,KAAA,CAAA4G,aAAA,CAACxG,eAAe,QACZoC,aAAa,EAAEqE,QAAQ,iBAAI7G,KAAA,CAAA4G,aAAA;IAAMJ,SAAS,EAAC;EAAU,GAAGhE,aAAa,EAAEqE,QAAgB,CAAC,eAE1F7G,KAAA,CAAA4G,aAAA;IAAKJ,SAAS,EAAC;EAAwB,gBACrCxG,KAAA,CAAA4G,aAAA,aAAeL,aAAiB,CAAC,eAEjCvG,KAAA,CAAA4G,aAAA;IAAKJ,SAAS,EAAC;EAAgB,GAC3BxD,SAAS,IAAIS,eAAe,gBAC1BzD,KAAA,CAAA4G,aAAA,CAACrG,kBAAkB;IAACoB,IAAI,EAAGA,IAAM;IAACU,UAAU,EAAG;MAAEqE,QAAQ,EAAErE,UAAU,EAAEqE;IAAS;EAAG,CAAE,CAAC,gBAEtF1G,KAAA,CAAA4G,aAAA;IACElF,EAAE,EAAGuE,kBAAoB;IACzBO,SAAS,EAAG,0BACVhD,SAAS,GACL,gCAAgC,GAChC,EAAE,EACJ;IACJsD,IAAI,EAAGtD,SAAS,GAAG,QAAQ,GAAG3C,SAAW;IACzC,aAAY2C,SAAS,GAAG,QAAQ,GAAG3C,SAAW;IAC9C,eAAc2C,SAAS,GAAG,MAAM,GAAG3C;EAAW,GAE5C+C,gBACC,CAGN,CACF,CAAC,EAEJpB,aAAa,EAAEuE,SAAS,iBAAI/G,KAAA,CAAA4G,aAAA;IAAMJ,SAAS,EAAC;EAAW,GAAGhE,aAAa,EAAEuE,SAAiB,CAC7E,CAAC;AAEtB,CAAC","ignoreList":[]}
+{"version":3,"file":"Textarea.js","names":["React","useMemo","useState","useFormContext","HookFormWrapper","extractError","clampToGraphemeMax","getCharacterCount","Textarea","props","createElement","formContext","TextareaField","field","id","name","placeholder","defaultValue","maxLength","enforceMaxLength","onBlur","onChange","onKeyDown","onTouched","htmlNativeDomProps","validation","showSpinner","customCssClasses","customContent","register","getFieldState","formState","errors","fieldState","isInvalid","Boolean","invalid","isRequiredError","error","type","count","setCount","toString","hasStartedTyping","setHasStartedTyping","hasMaxLength","isAtLimit","showsCharacterCount","cssClass","input","normalizedValidation","maxLengthRule","maxLengthValue","Number","value","undefined","isNaN","maxLengthMessage","graphemeMaxLengthValidator","_maxLength","validate","restValidation","formValues","validationResult","graphemeMaxLength","fieldRegistration","HandleBeforeInput","event","nativeEvent","inserted","data","target","currentTarget","start","selectionStart","length","end","selectionEnd","nextValue","slice","preventDefault","HandleChange","rawValue","newValue","HandleAutoFill","animationName","HandleOnBlur","HandleKeyEvent","textareaProps","className","disabled","required","onBeforeInput","onAnimationStart","containerCssClass","Fragment","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 {\n  FormFieldProps,\n  TextareaFieldProps,\n} from '../../formFieldWrapper/formFieldProps';\nimport { extractError } from '../../../validation/ValidationMessages';\nimport { clampToGraphemeMax, getCharacterCount } from '../../../../../helpers/stringHelpers';\n\nimport './textarea.scss';\n\nexport interface TextareaProps extends Omit<FormFieldProps, 'field'> {\n  field: Omit<TextareaFieldProps, 'type'>;\n}\n\nexport const Textarea: React.FC<TextareaProps> = (props) => (\n  <HookFormWrapper formContext={ props.formContext }>\n    <TextareaField { ...props } />\n  </HookFormWrapper>\n);\n\nconst TextareaField: 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();\n  const fieldState = getFieldState(name);\n  // getFieldState alone does not subscribe to errors, so the direct lookup keeps this in sync.\n  const isInvalid = Boolean(fieldState?.invalid || extractError(errors, name));\n  const isRequiredError = fieldState?.error?.type === 'required';\n\n  const [count, setCount] = useState<number>(() => getCharacterCount(defaultValue?.toString() || ''));\n  const [hasStartedTyping, setHasStartedTyping] = useState(false);\n\n  const hasMaxLength = typeof maxLength === 'number';\n  const isAtLimit = hasMaxLength ? count >= maxLength : false;\n  const showsCharacterCount = hasStartedTyping && hasMaxLength && !isRequiredError;\n\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\n          if (validationResult !== true) {\n            return validationResult;\n          }\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 fieldRegistration = register(name, normalizedValidation);\n\n  /**\n   * Native maxLength counts UTF-16 units, so emojis and composed characters are treated as\n   * several characters. The limit is enforced here against grapheme clusters instead.\n   */\n  const HandleBeforeInput = (event: React.FormEvent<HTMLTextAreaElement>) => {\n    if (enforceMaxLength !== true || !hasMaxLength) {\n      return;\n    }\n\n    const nativeEvent = event.nativeEvent as InputEvent;\n    const inserted = nativeEvent.data ?? '';\n\n    if (!inserted) {\n      return;\n    }\n\n    const target = event.currentTarget;\n    const start = target.selectionStart ?? target.value.length;\n    const end = target.selectionEnd ?? target.value.length;\n    const nextValue = target.value.slice(0, start) + inserted + 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 = 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\n    (onChange as React.ChangeEventHandler<HTMLTextAreaElement>)(event);\n    fieldRegistration?.onChange?.(event);\n  };\n\n  const HandleAutoFill = (event: React.AnimationEvent<HTMLTextAreaElement>) => {\n    // Browsers trigger onAnimationStart when autofill happens.\n    // We need to notify react-hook-form of the new value.\n    if (event.animationName === 'onAutoFill') {\n      const { value } = event.currentTarget;\n      setHasStartedTyping(true);\n      setCount(getCharacterCount(value || ''));\n      HandleChange({ target: event.currentTarget } as unknown as React.ChangeEvent<HTMLTextAreaElement>);\n    }\n  };\n\n  const HandleOnBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n    const { target } = event;\n\n    if (target) {\n      onTouched();\n      (onBlur as React.FocusEventHandler<HTMLTextAreaElement>)(event);\n    }\n\n    fieldRegistration?.onBlur?.(event);\n  };\n\n  const HandleKeyEvent = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    onTouched();\n    (onKeyDown as React.KeyboardEventHandler<HTMLTextAreaElement>)(event);\n  };\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    ...htmlNativeDomProps,\n    ...fieldRegistration,\n    onBeforeInput: HandleBeforeInput,\n    onChange: HandleChange,\n    onBlur: HandleOnBlur,\n    onKeyDown: HandleKeyEvent,\n    onAnimationStart: HandleAutoFill,\n  };\n\n  const containerCssClass = `textareaFieldContainer${ showsCharacterCount ? ' withCharacterCount' : '' }`;\n\n  return (\n    <>\n      { customContent?.preField && <span className=\"preField\">{ customContent?.preField }</span> }\n\n      <span className={ containerCssClass }>\n        <textarea { ...textareaProps } />\n\n        {\n          showsCharacterCount && (\n            <span\n              className={ `textareaCharacterCount ${ isAtLimit ? 'textareaCharacterCountExceeded' : '' }` }\n              role={ isAtLimit ? 'status' : undefined }\n              aria-live={ isAtLimit ? 'polite' : undefined }\n              aria-atomic={ isAtLimit ? 'true' : undefined }\n            >\n              { `${ count }/${ maxLength }` }\n            </span>\n          )\n        }\n      </span>\n\n      { customContent?.postField && <span className=\"postField\">{ customContent?.postField }</span> }\n    </>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/textarea/textarea.css

@@ -0,0 +1,20 @@
+.textareaFieldContainer {
+  position: relative;
+  width: 100%;
+}
+.textareaFieldContainer.withCharacterCount textarea {
+  padding-bottom: 26px;
+}
+
+.textareaCharacterCount {
+  line-height: 15px;
+  font-size: 13px;
+  color: var(--inputLabelColor);
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  pointer-events: none;
+}
+.textareaCharacterCount.textareaCharacterCountExceeded {
+  color: var(--inputErrorColor);
+}

package/dist/esm/components/form/hookFormWrapper/HookFormWrapper.js

@@ -6,21 +6,38 @@ import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 export const HookFormWrapper = ({
   formCssClass = 'x15StandardForm',
   children,
-  formProps
+  formProps,
+  formContext,
+  onSubmit
 }) => {
-  const existingHookFormContext = useFormContext();
+  const inheritedHookFormContext = useFormContext();
   const hookFormMethods = useForm({
     mode: 'all',
     criteriaMode: 'all',
     shouldFocusError: true
   });
-  if (existingHookFormContext) {
-    return children;
+
+  // A manually supplied context re-publishes the form state across a boundary the
+  // React context could not cross (e.g. a Next.js server/client component split).
+  if (formContext) {
+    return /*#__PURE__*/React.createElement(FormProvider, formContext, children);
+  }
+  if (inheritedHookFormContext) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   }
+  const {
+    onSubmit: nativeOnSubmit,
+    ...remainingFormProps
+  } = formProps || {};
+
+  // `onSubmit` receives the validated values, so consumers never need to call useForm themselves.
+  const handleFormSubmit = onSubmit ? hookFormMethods.handleSubmit(onSubmit) : nativeOnSubmit;
   return /*#__PURE__*/React.createElement(FormProvider, hookFormMethods, /*#__PURE__*/React.createElement("form", _extends({
     className: formCssClass,
     autoComplete: "off"
-  }, formProps), children));
+  }, remainingFormProps, {
+    onSubmit: handleFormSubmit
+  }), children));
 };
 export default HookFormWrapper;
 //# sourceMappingURL=HookFormWrapper.js.map

package/dist/esm/components/form/hookFormWrapper/HookFormWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"HookFormWrapper.js","names":["_extends","React","FormProvider","useForm","useFormContext","HookFormWrapper","formCssClass","children","formProps","existingHookFormContext","hookFormMethods","mode","criteriaMode","shouldFocusError","createElement","className","autoComplete"],"sources":["../../../../../src/components/form/hookFormWrapper/HookFormWrapper.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactNode, ReactElement, FormHTMLAttributes } from 'react';\nimport { FormProvider, useForm, useFormContext } from 'react-hook-form';\n\ninterface FormWrapperProps {\n  formCssClass?: string;\n  formProps?: FormHTMLAttributes<HTMLFormElement>;\n  children: ReactNode | ReactElement;\n}\n\nexport const HookFormWrapper: React.FC<FormWrapperProps> = (\n  {\n    formCssClass = 'x15StandardForm',\n    children,\n    formProps\n  }\n) => {\n  const existingHookFormContext = useFormContext();\n\n  const hookFormMethods = useForm({\n    mode: 'all',\n    criteriaMode: 'all',\n    shouldFocusError: true\n  });\n\n  if (existingHookFormContext) {\n    return children;\n  }\n\n  return (\n    <FormProvider { ...hookFormMethods }>\n      <form className={ formCssClass } autoComplete=\"off\" { ...formProps }>\n        {\n          children\n        }\n      </form>\n    </FormProvider>\n  );\n};\n\nexport default HookFormWrapper;\n"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,MAAuD,OAAO;AAC1E,SAASC,YAAY,EAAEC,OAAO,EAAEC,cAAc,QAAQ,iBAAiB;AAQvE,OAAO,MAAMC,eAA2C,GAAGA,CACzD;EACEC,YAAY,GAAG,iBAAiB;EAChCC,QAAQ;EACRC;AACF,CAAC,KACE;EACH,MAAMC,uBAAuB,GAAGL,cAAc,CAAC,CAAC;EAEhD,MAAMM,eAAe,GAAGP,OAAO,CAAC;IAC9BQ,IAAI,EAAE,KAAK;IACXC,YAAY,EAAE,KAAK;IACnBC,gBAAgB,EAAE;EACpB,CAAC,CAAC;EAEF,IAAIJ,uBAAuB,EAAE;IAC3B,OAAOF,QAAQ;EACjB;EAEA,oBACEN,KAAA,CAAAa,aAAA,CAACZ,YAAY,EAAMQ,eAAe,eAChCT,KAAA,CAAAa,aAAA,SAAAd,QAAA;IAAMe,SAAS,EAAGT,YAAc;IAACU,YAAY,EAAC;EAAK,GAAMR,SAAS,GAE9DD,QAEE,CACM,CAAC;AAEnB,CAAC;AAED,eAAeF,eAAe","ignoreList":[]}
+{"version":3,"file":"HookFormWrapper.js","names":["_extends","React","FormProvider","useForm","useFormContext","HookFormWrapper","formCssClass","children","formProps","formContext","onSubmit","inheritedHookFormContext","hookFormMethods","mode","criteriaMode","shouldFocusError","createElement","Fragment","nativeOnSubmit","remainingFormProps","handleFormSubmit","handleSubmit","className","autoComplete"],"sources":["../../../../../src/components/form/hookFormWrapper/HookFormWrapper.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactNode, ReactElement, FormHTMLAttributes } from 'react';\nimport { FieldValues, FormProvider, useForm, useFormContext, UseFormReturn } from 'react-hook-form';\n\ninterface FormWrapperProps {\n  formCssClass?: string;\n  formProps?: FormHTMLAttributes<HTMLFormElement>;\n  children: ReactNode | ReactElement;\n  formContext?: UseFormReturn<FieldValues, any, FieldValues>\n  /* eslint-disable-next-line no-unused-vars */\n  onSubmit?: (values: FieldValues) => void | Promise<void>;\n}\n\nexport const HookFormWrapper: React.FC<FormWrapperProps> = (\n  {\n    formCssClass = 'x15StandardForm',\n    children,\n    formProps,\n    formContext,\n    onSubmit,\n  }\n) => {\n  const inheritedHookFormContext = useFormContext();\n\n  const hookFormMethods = useForm({\n    mode: 'all',\n    criteriaMode: 'all',\n    shouldFocusError: true\n  });\n\n  // A manually supplied context re-publishes the form state across a boundary the\n  // React context could not cross (e.g. a Next.js server/client component split).\n  if (formContext) {\n    return (\n      <FormProvider { ...formContext }>\n        { children }\n      </FormProvider>\n    );\n  }\n\n  if (inheritedHookFormContext) {\n    return <>{ children }</>;\n  }\n\n  const { onSubmit: nativeOnSubmit, ...remainingFormProps } = formProps || {};\n\n  // `onSubmit` receives the validated values, so consumers never need to call useForm themselves.\n  const handleFormSubmit = onSubmit\n    ? hookFormMethods.handleSubmit(onSubmit)\n    : nativeOnSubmit;\n\n  return (\n    <FormProvider { ...hookFormMethods }>\n      <form\n        className={ formCssClass }\n        autoComplete=\"off\"\n        { ...remainingFormProps }\n        onSubmit={ handleFormSubmit }\n      >\n        {\n          children\n        }\n      </form>\n    </FormProvider>\n  );\n};\n\nexport default HookFormWrapper;\n"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,MAAuD,OAAO;AAC1E,SAAsBC,YAAY,EAAEC,OAAO,EAAEC,cAAc,QAAuB,iBAAiB;AAWnG,OAAO,MAAMC,eAA2C,GAAGA,CACzD;EACEC,YAAY,GAAG,iBAAiB;EAChCC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC;AACF,CAAC,KACE;EACH,MAAMC,wBAAwB,GAAGP,cAAc,CAAC,CAAC;EAEjD,MAAMQ,eAAe,GAAGT,OAAO,CAAC;IAC9BU,IAAI,EAAE,KAAK;IACXC,YAAY,EAAE,KAAK;IACnBC,gBAAgB,EAAE;EACpB,CAAC,CAAC;;EAEF;EACA;EACA,IAAIN,WAAW,EAAE;IACf,oBACER,KAAA,CAAAe,aAAA,CAACd,YAAY,EAAMO,WAAW,EAC1BF,QACU,CAAC;EAEnB;EAEA,IAAII,wBAAwB,EAAE;IAC5B,oBAAOV,KAAA,CAAAe,aAAA,CAAAf,KAAA,CAAAgB,QAAA,QAAIV,QAAY,CAAC;EAC1B;EAEA,MAAM;IAAEG,QAAQ,EAAEQ,cAAc;IAAE,GAAGC;EAAmB,CAAC,GAAGX,SAAS,IAAI,CAAC,CAAC;;EAE3E;EACA,MAAMY,gBAAgB,GAAGV,QAAQ,GAC7BE,eAAe,CAACS,YAAY,CAACX,QAAQ,CAAC,GACtCQ,cAAc;EAElB,oBACEjB,KAAA,CAAAe,aAAA,CAACd,YAAY,EAAMU,eAAe,eAChCX,KAAA,CAAAe,aAAA,SAAAhB,QAAA;IACEsB,SAAS,EAAGhB,YAAc;IAC1BiB,YAAY,EAAC;EAAK,GACbJ,kBAAkB;IACvBT,QAAQ,EAAGU;EAAkB,IAG3Bb,QAEE,CACM,CAAC;AAEnB,CAAC;AAED,eAAeF,eAAe","ignoreList":[]}

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

@@ -1,19 +1,27 @@
-/* eslint-disable no-unused-vars */
-
 'use client';
 
 import React from 'react';
-import { ErrorMessage } from '@hookform/error-message';
 import { useFormContext } from 'react-hook-form';
-import { NoHookFormContext } from '../formFields/utilities/formUtilities';
 // Type for generic error messages
 export const GenericErrorMessages = {
-  required: () => 'This field is required. Please enter a value.',
-  minLength: value => `Please provide a minimum of ${value} characters.`,
-  maxLength: value => `Please provide a maximum of ${value} characters.`,
-  min: value => `The value must be a minimum of ${value}.`,
-  max: value => `The value must be a maximum of ${value}.`,
-  unknown: () => 'An unknown error has occurred.'
+  required: 'This field is required. Please enter a value.',
+  minLength: 'Please provide a minimum of {value} characters.',
+  maxLength: 'Please provide a maximum of {value} characters.',
+  min: 'The value must be a minimum of {value}.',
+  max: 'The value must be a maximum of {value}.',
+  unknown: 'An unknown error has occurred.'
+};
+const isGenericErrorType = errorType => typeof errorType === 'string' && errorType !== 'unknown' && Object.prototype.hasOwnProperty.call(GenericErrorMessages, errorType);
+const getValidationValue = validator => typeof validator === 'object' ? validator.value : validator;
+const getGenericErrorMessage = (errorType, validation) => {
+  if (!isGenericErrorType(errorType)) {
+    return undefined;
+  }
+  if (errorType === 'required') {
+    return GenericErrorMessages.required;
+  }
+  const value = getValidationValue(validation?.[errorType]);
+  return value === undefined ? undefined : GenericErrorMessages[errorType].replace('{value}', String(value));
 };
 
 // Helper function to extract nested errors
@@ -33,49 +41,39 @@ export const ValidationMessages = ({
   name,
   validation
 }) => {
+  const formContext = useFormContext();
+  if (!formContext) {
+    return null;
+  }
   const {
     formState: {
       errors
     }
-  } = useFormContext() || NoHookFormContext;
+  } = formContext;
   const fieldError = extractError(errors, name);
   if (!fieldError) {
     return null;
   }
 
-  // Check all the validators have a message
-  if (validation) {
-    Object.entries(validation).forEach(([validatorKey, validator]) => {
-      if (GenericErrorMessages[validatorKey]) {
-        if (typeof validator === 'boolean') {
-          if (fieldError.type && fieldError.types && typeof fieldError.types[fieldError.type] === 'string') {
-            fieldError.message = fieldError.types[fieldError.type];
-          } else {
-            fieldError.message = GenericErrorMessages[validatorKey]();
-          }
-        } else if (typeof validator === 'object' && 'value' in validator) {
-          // @ts-ignore The hook form types don't seem to cater for versions with value properties properly
-          fieldError.message = GenericErrorMessages[validatorKey](validator.value || undefined);
-        }
-      }
-    });
-  }
+  // Derive a fallback message rather than mutating the error object held in formState.
+  const resolveMessage = () => {
+    if (fieldError.message) {
+      return fieldError.message;
+    }
+    if (fieldError.type && fieldError.types && typeof fieldError.types[fieldError.type] === 'string') {
+      return fieldError.types[fieldError.type];
+    }
+    return getGenericErrorMessage(fieldError.type, validation);
+  };
+  const message = resolveMessage() || GenericErrorMessages.unknown;
   return /*#__PURE__*/React.createElement("span", {
     className: "validation",
     id: `${name}_errors`
   }, /*#__PURE__*/React.createElement("span", {
     className: "message"
-  }, !fieldError?.message && /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     className: "error"
-  }, GenericErrorMessages.unknown()), /*#__PURE__*/React.createElement(ErrorMessage, {
-    errors: errors,
-    name: name,
-    render: ({
-      message
-    }) => /*#__PURE__*/React.createElement("span", {
-      className: "error"
-    }, message)
-  })));
+  }, message)));
 };
 export default ValidationMessages;
 //# sourceMappingURL=ValidationMessages.js.map

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\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":[]}
+{"version":3,"file":"ValidationMessages.js","names":["React","useFormContext","GenericErrorMessages","required","minLength","maxLength","min","max","unknown","isGenericErrorType","errorType","Object","prototype","hasOwnProperty","call","getValidationValue","validator","value","getGenericErrorMessage","validation","undefined","replace","String","extractError","errors","fieldName","pathComponents","split","reduce","accumulator","pathComponent","ValidationMessages","name","formContext","formState","fieldError","resolveMessage","message","type","types","createElement","className","id"],"sources":["../../../../../src/components/form/validation/ValidationMessages.tsx"],"sourcesContent":[" \n\n'use client';\n\nimport React from 'react';\nimport {\n  FieldError,\n  FieldErrors,\n  FieldErrorsImpl,\n  Merge,\n  ValidationRule,\n  useFormContext\n} from 'react-hook-form';\nimport {\n  ValidationProps\n} from '../formFields/formFieldWrapper/formFieldProps';\nimport { InputCheckboxValidationProps } from '../formFields/subComponents/inputs/checkbox/inputCheckboxProps';\n\n// Type for generic error messages\nexport const GenericErrorMessages = {\n  required: 'This field is required. Please enter a value.',\n  minLength: 'Please provide a minimum of {value} characters.',\n  maxLength: 'Please provide a maximum of {value} characters.',\n  min: 'The value must be a minimum of {value}.',\n  max: 'The value must be a maximum of {value}.',\n  unknown: 'An unknown error has occurred.'\n};\n\ntype ValidationRules = ValidationProps | InputCheckboxValidationProps;\ntype GenericErrorType = Exclude<keyof typeof GenericErrorMessages, 'unknown'>;\ntype ValidationErrorType = NonNullable<ReturnType<typeof extractError>>['type'];\n\nconst isGenericErrorType = (errorType: ValidationErrorType): errorType is GenericErrorType =>\n  typeof errorType === 'string'\n  && errorType !== 'unknown'\n  && Object.prototype.hasOwnProperty.call(GenericErrorMessages, errorType);\n\nconst getValidationValue = <TValue extends string | number>(\n  validator: ValidationRule<TValue> | undefined\n): TValue | undefined => typeof validator === 'object' ? validator.value : validator;\n\nconst getGenericErrorMessage = (\n  errorType: ValidationErrorType,\n  validation?: ValidationRules\n): string | undefined => {\n  if (!isGenericErrorType(errorType)) {\n    return undefined;\n  }\n\n  if (errorType === 'required') {\n    return GenericErrorMessages.required;\n  }\n\n  const value = getValidationValue(validation?.[errorType]);\n\n  return value === undefined\n    ? undefined\n    : GenericErrorMessages[errorType].replace('{value}', String(value));\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 formContext = useFormContext();\n\n  if (!formContext) {\n    return null;\n  }\n\n  const { formState: { errors } } = formContext;\n\n  const fieldError = extractError(errors, name);\n\n  if (!fieldError) {\n    return null;\n  }\n\n  // Derive a fallback message rather than mutating the error object held in formState.\n  const resolveMessage = (): string | undefined => {\n    if (fieldError.message) {\n      return fieldError.message as string;\n    }\n\n    if (\n      fieldError.type\n      && fieldError.types\n      && typeof fieldError.types[fieldError.type] === 'string'\n    ) {\n      return fieldError.types[fieldError.type] as string;\n    }\n\n    return getGenericErrorMessage(fieldError.type, validation);\n  };\n\n  const message = resolveMessage() || GenericErrorMessages.unknown;\n\n  return (\n    <span className=\"validation\" id={ `${ name }_errors` }>\n      <span className=\"message\">\n        <span className=\"error\">{ message }</span>\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/exampleUIs/exampleComponents/DemoContactForm.js

@@ -68,8 +68,7 @@ export const DemoContactForm = ({
   }), /*#__PURE__*/React.createElement(Textarea, {
     field: {
       id: 'yourMessage',
-      name: 'yourMessage',
-      type: 'textarea'
+      name: 'yourMessage'
     },
     label: {
       text: 'Your message'

package/dist/esm/exampleUIs/exampleComponents/DemoContactForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DemoContactForm.js","names":["React","useEffect","useFormContext","TextInput","EmailInput","PhoneInput","SimpleButton","Textarea","InputCheckbox","Tooltip","DemoContactForm","onConsentClick","consentIsGiven","hasConsent","setHasConsent","useState","formContext","handleConsentClick","event","isChecked","target","checked","setValue","createElement","className","field","id","name","label","text","validation","required","type","defaultChecked","value","onChange","icon","buttonType","buttonStyle","color","rightIcon"],"sources":["../../../../src/exampleUIs/exampleComponents/DemoContactForm.tsx"],"sourcesContent":["import React, { FC, useEffect } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport {\n  TextInput,\n  EmailInput,\n  PhoneInput\n} from '../../components/form/formFields/subComponents/InputVariants';\nimport { SimpleButton } from '../../components/form/buttons/SimpleButton';\nimport { Textarea } from '../../components/form/formFields/subComponents/textarea/Textarea';\nimport { InputCheckbox } from '../../components/form/formFields/subComponents/inputs/checkbox/InputCheckbox';\nimport { Tooltip } from '../../components/design/tooltip/Tooltip';\nimport { GenericFunction } from '../../interfaces/generic.interface';\n\nexport const DemoContactForm: FC<{\n  onConsentClick: GenericFunction;\n  consentIsGiven: boolean;\n}> = (\n  {\n    onConsentClick = () => {},\n    consentIsGiven = false\n  }\n) => {\n  const [hasConsent, setHasConsent] = React.useState<boolean>(consentIsGiven);\n\n  const formContext = useFormContext();\n\n  const handleConsentClick = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const isChecked = event.target.checked;\n    formContext.setValue('consentCheckbox1', isChecked);\n    setHasConsent(isChecked);\n    onConsentClick(isChecked);\n  };\n\n  useEffect(() => {\n    formContext.setValue('consentCheckbox1', consentIsGiven);\n    setHasConsent(consentIsGiven);\n  });\n\n  return (\n    <div>\n      <h2 className=\"spaceAfter\">Can't find what you're looking for?</h2>\n      <h3 className=\"spaceAfter\">Send us a message</h3>\n\n      <p className=\"spaceAfter\">To provide you with the best service possible we'll need some details about you.</p>\n\n      <TextInput\n        field={ {\n          id: 'firstName',\n          name: 'firstName'\n        } }\n        label={ {\n          text: 'First Name'\n        } }\n        validation={ {\n          required: 'This is required'\n        } }\n      />\n\n      <TextInput\n        field={ {\n          id: 'lastName',\n          name: 'lastName'\n        } }\n        label={ {\n          text: 'Last Name'\n        } }\n        validation={ {\n          required: 'This is required'\n        } }\n      />\n\n      <EmailInput\n        field={ {\n          id: 'yourEmail',\n          name: 'yourEmail'\n        } }\n        label={ {\n          text: 'Your email address'\n        } }\n      />\n\n      <PhoneInput\n        field={ {\n          id: 'yourPhone',\n          name: 'yourPhone'\n        } }\n        label={ {\n          text: 'A number we can reach you on'\n        } }\n      />\n\n      <Textarea\n        field={ {\n          id: 'yourMessage',\n          name: 'yourMessage',\n          type: 'textarea'\n        } }\n        label={ {\n          text: 'Your message'\n        } }\n      />\n\n      <InputCheckbox\n        field={ {\n          defaultChecked: hasConsent,\n          id: 'consentCheckbox1',\n          name: 'consentCheckbox1',\n          value: 'consentIsGiven',\n          onChange: (event: React.ChangeEvent<HTMLInputElement>) => handleConsentClick(event)\n        } }\n        label={ {\n          text: <span>By leaving this checked you are <strong>consenting</strong> to one of our support staff contacting you in the event that they need more information. <Tooltip icon=\"info\">More about why we might contact you.</Tooltip></span>\n        } }\n      />\n\n      <div className=\"spaceBefore flexRow\">\n        <SimpleButton\n          label=\"Send Message\"\n          id=\"demoSubmitButton1\"\n          buttonType=\"submit\"\n          buttonStyle={\n            {\n              color: 'primary'\n            }\n          }\n          rightIcon={ {\n            icon: 'telegram'\n          } }\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default DemoContactForm;"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DemoContactForm.js","names":["React","useEffect","useFormContext","TextInput","EmailInput","PhoneInput","SimpleButton","Textarea","InputCheckbox","Tooltip","DemoContactForm","onConsentClick","consentIsGiven","hasConsent","setHasConsent","useState","formContext","handleConsentClick","event","isChecked","target","checked","setValue","createElement","className","field","id","name","label","text","validation","required","defaultChecked","value","onChange","icon","buttonType","buttonStyle","color","rightIcon"],"sources":["../../../../src/exampleUIs/exampleComponents/DemoContactForm.tsx"],"sourcesContent":["import React, { FC, useEffect } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport {\n  TextInput,\n  EmailInput,\n  PhoneInput\n} from '../../components/form/formFields/subComponents/InputVariants';\nimport { SimpleButton } from '../../components/form/buttons/SimpleButton';\nimport { Textarea } from '../../components/form/formFields/subComponents/textarea/Textarea';\nimport { InputCheckbox } from '../../components/form/formFields/subComponents/inputs/checkbox/InputCheckbox';\nimport { Tooltip } from '../../components/design/tooltip/Tooltip';\nimport { GenericFunction } from '../../interfaces/generic.interface';\n\nexport const DemoContactForm: FC<{\n  onConsentClick: GenericFunction;\n  consentIsGiven: boolean;\n}> = (\n  {\n    onConsentClick = () => {},\n    consentIsGiven = false\n  }\n) => {\n  const [hasConsent, setHasConsent] = React.useState<boolean>(consentIsGiven);\n\n  const formContext = useFormContext();\n\n  const handleConsentClick = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const isChecked = event.target.checked;\n    formContext.setValue('consentCheckbox1', isChecked);\n    setHasConsent(isChecked);\n    onConsentClick(isChecked);\n  };\n\n  useEffect(() => {\n    formContext.setValue('consentCheckbox1', consentIsGiven);\n    setHasConsent(consentIsGiven);\n  });\n\n  return (\n    <div>\n      <h2 className=\"spaceAfter\">Can't find what you're looking for?</h2>\n      <h3 className=\"spaceAfter\">Send us a message</h3>\n\n      <p className=\"spaceAfter\">To provide you with the best service possible we'll need some details about you.</p>\n\n      <TextInput\n        field={ {\n          id: 'firstName',\n          name: 'firstName'\n        } }\n        label={ {\n          text: 'First Name'\n        } }\n        validation={ {\n          required: 'This is required'\n        } }\n      />\n\n      <TextInput\n        field={ {\n          id: 'lastName',\n          name: 'lastName'\n        } }\n        label={ {\n          text: 'Last Name'\n        } }\n        validation={ {\n          required: 'This is required'\n        } }\n      />\n\n      <EmailInput\n        field={ {\n          id: 'yourEmail',\n          name: 'yourEmail'\n        } }\n        label={ {\n          text: 'Your email address'\n        } }\n      />\n\n      <PhoneInput\n        field={ {\n          id: 'yourPhone',\n          name: 'yourPhone'\n        } }\n        label={ {\n          text: 'A number we can reach you on'\n        } }\n      />\n\n      <Textarea\n        field={ {\n          id: 'yourMessage',\n          name: 'yourMessage',\n        } }\n        label={ {\n          text: 'Your message'\n        } }\n      />\n\n      <InputCheckbox\n        field={ {\n          defaultChecked: hasConsent,\n          id: 'consentCheckbox1',\n          name: 'consentCheckbox1',\n          value: 'consentIsGiven',\n          onChange: (event: React.ChangeEvent<HTMLInputElement>) => handleConsentClick(event)\n        } }\n        label={ {\n          text: <span>By leaving this checked you are <strong>consenting</strong> to one of our support staff contacting you in the event that they need more information. <Tooltip icon=\"info\">More about why we might contact you.</Tooltip></span>\n        } }\n      />\n\n      <div className=\"spaceBefore flexRow\">\n        <SimpleButton\n          label=\"Send Message\"\n          id=\"demoSubmitButton1\"\n          buttonType=\"submit\"\n          buttonStyle={\n            {\n              color: 'primary'\n            }\n          }\n          rightIcon={ {\n            icon: 'telegram'\n          } }\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default DemoContactForm;"],"mappings":"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","ignoreList":[]}

package/dist/esm/helpers/index.js

@@ -4,6 +4,6 @@ export { transformPlacesData, extractNamePieces } from './dataHelpers';
 export { dateToShortIsoString, isValidDate, dateToShortReadableDate, dateToShortReadableMonth, timeStampToShortReadableDate, dateToReadableTime, dateToShortReadableDateTime, getLastDateOfMonth, daysSince } from './dateHelpers';
 export { USER_CURRENCY, intlCurrencyFormatter, intlNumberFormatter, formatNumberForLocale, formatAsCurrencyForLocale, getNumberAbbreviation, formatRoundedNumberWithAbbreviation, formatNumberWithAbbreviation, formatNumberForChartAxis, formatAsSimpleCurrencyForChartAxis, formatAsInternationalCurrencyForChartAxis, formatAsCurrencyWithAbbreviation, formatFileSize } from './formatters';
 export { getRandomNumberBelow, getRandomBetweenInclusive, getRandomBetweenExclusive, hashCode, roundToDecimal, formatNumberToMinDigits, formatDigitalTime } from './numberHelpers';
-export { richTextParser, capitalize, capitalizeFirstLetter, lowerCaseFirstLetter, useAnInsteadOfA, splitCamelCase, pluralize, pluralizeIfNeeded, getInitialsOrAcronym } from './stringHelpers';
+export { richTextParser, capitalize, capitalizeFirstLetter, lowerCaseFirstLetter, getCharacterCount, clampToGraphemeMax, useAnInsteadOfA, splitCamelCase, pluralize, pluralizeIfNeeded, getInitialsOrAcronym } from './stringHelpers';
 export { objectsAreTheSame, isAnObject, createCompareValueOverride, deepMergeObjects, overrideMergeObjects, makeInheritanceObject, updateNestedProperty, filterObject, getArrayOfObjectKeys, getArrayOfReadableObjectKeys, getBranchFromPath, deepRemoveProps } from './objectHelpers';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["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"],"sources":["../../../src/helpers/index.ts"],"sourcesContent":["export {\n  getMinAge,\n  getMaxAge,\n  getMinAndMaxAges,\n  validateBirthdate,\n  isDateEntryComplete,\n  getAgeInWeeks,\n  getAgeInYears\n} from './ageHelpers';\n\nexport {\n  binaryFindInArray,\n  addAndSortArray,\n  moveItemInArrayMutate,\n  moveItemInArrayCopy,\n  getRandomItemFromArray,\n  getItemIndexWithinArray,\n  getRoundedMedian,\n  getMostOccurringBoolean,\n  cssClassesArrayToString\n} from './arrayHelpers';\n\nexport {\n  transformPlacesData,\n  extractNamePieces\n} from './dataHelpers';\nexport type { NamePieces } from './dataHelpers';\n\nexport {\n  dateToShortIsoString,\n  isValidDate,\n  dateToShortReadableDate,\n  dateToShortReadableMonth,\n  timeStampToShortReadableDate,\n  dateToReadableTime,\n  dateToShortReadableDateTime,\n  getLastDateOfMonth,\n  daysSince\n} from './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 './formatters';\n\nexport {\n  getRandomNumberBelow,\n  getRandomBetweenInclusive,\n  getRandomBetweenExclusive,\n  hashCode,\n  roundToDecimal,\n  formatNumberToMinDigits,\n  formatDigitalTime\n} from './numberHelpers';\n\nexport {\n  richTextParser,\n  capitalize,\n  capitalizeFirstLetter,\n  lowerCaseFirstLetter,\n  useAnInsteadOfA,\n  splitCamelCase,\n  pluralize,\n  pluralizeIfNeeded,\n  getInitialsOrAcronym\n} from './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 './objectHelpers';\n"],"mappings":"AAAA,SACEA,SAAS,EACTC,SAAS,EACTC,gBAAgB,EAChBC,iBAAiB,EACjBC,mBAAmB,EACnBC,aAAa,EACbC,aAAa,QACR,cAAc;AAErB,SACEC,iBAAiB,EACjBC,eAAe,EACfC,qBAAqB,EACrBC,mBAAmB,EACnBC,sBAAsB,EACtBC,uBAAuB,EACvBC,gBAAgB,EAChBC,uBAAuB,EACvBC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,mBAAmB,EACnBC,iBAAiB,QACZ,eAAe;AAGtB,SACEC,oBAAoB,EACpBC,WAAW,EACXC,uBAAuB,EACvBC,wBAAwB,EACxBC,4BAA4B,EAC5BC,kBAAkB,EAClBC,2BAA2B,EAC3BC,kBAAkB,EAClBC,SAAS,QACJ,eAAe;AAEtB,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,cAAc;AAErB,SACEC,oBAAoB,EACpBC,yBAAyB,EACzBC,yBAAyB,EACzBC,QAAQ,EACRC,cAAc,EACdC,uBAAuB,EACvBC,iBAAiB,QACZ,iBAAiB;AAExB,SACEC,cAAc,EACdC,UAAU,EACVC,qBAAqB,EACrBC,oBAAoB,EACpBC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,iBAAiB,EACjBC,oBAAoB,QACf,iBAAiB;AAExB,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,iBAAiB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["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","getCharacterCount","clampToGraphemeMax","useAnInsteadOfA","splitCamelCase","pluralize","pluralizeIfNeeded","getInitialsOrAcronym","objectsAreTheSame","isAnObject","createCompareValueOverride","deepMergeObjects","overrideMergeObjects","makeInheritanceObject","updateNestedProperty","filterObject","getArrayOfObjectKeys","getArrayOfReadableObjectKeys","getBranchFromPath","deepRemoveProps"],"sources":["../../../src/helpers/index.ts"],"sourcesContent":["export {\n  getMinAge,\n  getMaxAge,\n  getMinAndMaxAges,\n  validateBirthdate,\n  isDateEntryComplete,\n  getAgeInWeeks,\n  getAgeInYears\n} from './ageHelpers';\n\nexport {\n  binaryFindInArray,\n  addAndSortArray,\n  moveItemInArrayMutate,\n  moveItemInArrayCopy,\n  getRandomItemFromArray,\n  getItemIndexWithinArray,\n  getRoundedMedian,\n  getMostOccurringBoolean,\n  cssClassesArrayToString\n} from './arrayHelpers';\n\nexport {\n  transformPlacesData,\n  extractNamePieces\n} from './dataHelpers';\nexport type { NamePieces } from './dataHelpers';\n\nexport {\n  dateToShortIsoString,\n  isValidDate,\n  dateToShortReadableDate,\n  dateToShortReadableMonth,\n  timeStampToShortReadableDate,\n  dateToReadableTime,\n  dateToShortReadableDateTime,\n  getLastDateOfMonth,\n  daysSince\n} from './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 './formatters';\n\nexport {\n  getRandomNumberBelow,\n  getRandomBetweenInclusive,\n  getRandomBetweenExclusive,\n  hashCode,\n  roundToDecimal,\n  formatNumberToMinDigits,\n  formatDigitalTime\n} from './numberHelpers';\n\nexport {\n  richTextParser,\n  capitalize,\n  capitalizeFirstLetter,\n  lowerCaseFirstLetter,\n  getCharacterCount,\n  clampToGraphemeMax,\n  useAnInsteadOfA,\n  splitCamelCase,\n  pluralize,\n  pluralizeIfNeeded,\n  getInitialsOrAcronym\n} from './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 './objectHelpers';\n"],"mappings":"AAAA,SACEA,SAAS,EACTC,SAAS,EACTC,gBAAgB,EAChBC,iBAAiB,EACjBC,mBAAmB,EACnBC,aAAa,EACbC,aAAa,QACR,cAAc;AAErB,SACEC,iBAAiB,EACjBC,eAAe,EACfC,qBAAqB,EACrBC,mBAAmB,EACnBC,sBAAsB,EACtBC,uBAAuB,EACvBC,gBAAgB,EAChBC,uBAAuB,EACvBC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,mBAAmB,EACnBC,iBAAiB,QACZ,eAAe;AAGtB,SACEC,oBAAoB,EACpBC,WAAW,EACXC,uBAAuB,EACvBC,wBAAwB,EACxBC,4BAA4B,EAC5BC,kBAAkB,EAClBC,2BAA2B,EAC3BC,kBAAkB,EAClBC,SAAS,QACJ,eAAe;AAEtB,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,cAAc;AAErB,SACEC,oBAAoB,EACpBC,yBAAyB,EACzBC,yBAAyB,EACzBC,QAAQ,EACRC,cAAc,EACdC,uBAAuB,EACvBC,iBAAiB,QACZ,iBAAiB;AAExB,SACEC,cAAc,EACdC,UAAU,EACVC,qBAAqB,EACrBC,oBAAoB,EACpBC,iBAAiB,EACjBC,kBAAkB,EAClBC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,iBAAiB,EACjBC,oBAAoB,QACf,iBAAiB;AAExB,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,iBAAiB","ignoreList":[]}

package/dist/esm/helpers/stringHelpers.js

@@ -32,6 +32,50 @@ export const capitalizeFirstLetter = pString => `${pString.substring(0, 1).toUpp
  */
 export const lowerCaseFirstLetter = pString => `${pString.substring(0, 1).toLowerCase()}${pString.substring(1)}`;
 
+/**
+ * Splits a string into grapheme clusters so text metrics and clamping can share
+ * the same segmentation logic without forcing callers to pass pre-segmented data.
+ *
+ * @param {string} pString - The string to segment.
+ * @returns {string[]} The grapheme units in order, falling back to code points when Intl.Segmenter is unavailable.
+ */
+const getGraphemeSegments = pString => {
+  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+    const segmenter = new Intl.Segmenter(undefined, {
+      granularity: 'grapheme'
+    });
+    return Array.from(segmenter.segment(pString), ({
+      segment
+    }) => segment);
+  }
+  return Array.from(pString);
+};
+
+/**
+ * Counts user-perceived characters (grapheme clusters) so emojis and composed
+ * characters such as accented letters count as one.
+ *
+ * @param {string} pString - A string of text.
+ * @returns {number} The number of grapheme clusters, falling back to code points where Intl.Segmenter is unavailable.
+ */
+export const getCharacterCount = pString => getGraphemeSegments(pString).length;
+
+/**
+ * Truncates a string to a maximum number of grapheme clusters without splitting
+ * an emoji or composed character in half.
+ *
+ * @param {string} pString - A string of text.
+ * @param {number} maxAllowed - The maximum number of user-perceived characters to keep.
+ * @returns {string} The truncated string, or the unchanged pString if it is already within the limit.
+ */
+export const clampToGraphemeMax = (pString, maxAllowed) => {
+  const graphemeSegments = getGraphemeSegments(pString);
+  if (graphemeSegments.length <= maxAllowed) {
+    return pString;
+  }
+  return graphemeSegments.slice(0, maxAllowed).join('');
+};
+
 /**
  * Determines if "an" should be used instead of "a" before the given word.
  *

package/dist/esm/helpers/stringHelpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"stringHelpers.js","names":["parse","richTextParser","richText","supportEscapedCharacters","adjustedText","split","join","capitalize","pString","substring","toUpperCase","toLowerCase","capitalizeFirstLetter","lowerCaseFirstLetter","useAnInsteadOfA","word","lettersRequiringAn","firstLetter","includes","splitCamelCase","replace","pluralize","endsWith","slice","pluralizeIfNeeded","count","getInitialsOrAcronym","map","piece"],"sources":["../../../src/helpers/stringHelpers.ts"],"sourcesContent":["import React from 'react';\nimport parse from 'html-react-parser';\n\nexport const richTextParser = (richText: string, supportEscapedCharacters: boolean): string | React.JSX.Element | React.JSX.Element[] => {\n  // Adjusts text to replace line breaks with <br/> tags\n  const adjustedText = richText.split('\\r\\n').join('<br/>');\n  if (supportEscapedCharacters) {\n    return parse(adjustedText);\n  }\n  return parse(richText);\n};\n\n/**\n * Takes a string and returns it with the first character capitalized and the remaining characters as lowercase.\n *\n * @param {string} pString - A string of text.\n * @returns {string} The capitalized string or the unchanged pString if anything other than a string is sent to it.\n */\nexport const capitalize = (pString: string): string => `${ pString.substring(0, 1).toUpperCase() }${ pString.substring(1).toLowerCase() }`;\n\n/**\n * Capitalizes the first letter of the given string.\n *\n * @param {string} pString - A string of text.\n * @returns {string} The string with the first letter capitalized, or the unchanged pString if it's not a string.\n */\nexport const capitalizeFirstLetter = (pString: string): string => `${ pString.substring(0, 1).toUpperCase() }${ pString.substring(1) }`;\n\n/**\n * Converts the first letter of the given string to lowercase.\n *\n * @param {string} pString - A string of text.\n * @returns {string} The string with the first letter converted to lowercase, or the unchanged pString if it's not a string.\n */\nexport const lowerCaseFirstLetter = (pString: string): string => `${ pString.substring(0, 1).toLowerCase() }${ pString.substring(1) }`;\n\n/**\n * Determines if \"an\" should be used instead of \"a\" before the given word.\n *\n * @param {string} word - The word to check.\n * @returns {boolean} True if \"an\" should be used, false otherwise.\n */\nexport const useAnInsteadOfA = (word: string): boolean => {\n  const lettersRequiringAn = ['a', 'e', 'i', 'o', 'u', 'h'];\n  const firstLetter = word.substring(0, 1).toLowerCase();\n  return lettersRequiringAn.includes(firstLetter);\n};\n\nexport const splitCamelCase = (pString: string): string => pString\n// Single regex to handle all cases: lowercase followed by uppercase/number, or number followed by letter\n  .replace(/([a-z])([A-Z0-9])|([0-9])([a-zA-Z])/g, '$1$3 $2$4')\n// Insert a space between capital letters and lowercase letters where missing\n  .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2')\n// Convert the entire string to lowercase for consistency\n  .toLowerCase();\n\nexport const pluralize = (pString: string): string => {\n  if (pString.endsWith('y')) {\n    // If the word ends with 'y', replace 'y' with 'ies'\n    return `${ pString.slice(0, -1) }ies`;\n  } if (pString.endsWith('s') || pString.endsWith('x') || pString.endsWith('z') || pString.endsWith('ch') || pString.endsWith('sh')) {\n    // If the word ends with s, x, z, ch, or sh, add 'es'\n    return `${ pString }es`;\n  }\n  // For other cases, just add 's'\n  return `${ pString }s`;\n};\n\nexport const pluralizeIfNeeded = (pString: string, count: number): string => {\n  if (count && count > 1) {\n    return pluralize(pString);\n  }\n  return pString;\n};\n\nexport const getInitialsOrAcronym = (pString: string): string => {\n  return pString.split(' ').map((piece) => capitalize(piece.substring(0, 1))).join('');\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"stringHelpers.js","names":["parse","richTextParser","richText","supportEscapedCharacters","adjustedText","split","join","capitalize","pString","substring","toUpperCase","toLowerCase","capitalizeFirstLetter","lowerCaseFirstLetter","getGraphemeSegments","Intl","segmenter","Segmenter","undefined","granularity","Array","from","segment","getCharacterCount","length","clampToGraphemeMax","maxAllowed","graphemeSegments","slice","useAnInsteadOfA","word","lettersRequiringAn","firstLetter","includes","splitCamelCase","replace","pluralize","endsWith","pluralizeIfNeeded","count","getInitialsOrAcronym","map","piece"],"sources":["../../../src/helpers/stringHelpers.ts"],"sourcesContent":["import React from 'react';\nimport parse from 'html-react-parser';\n\nexport const richTextParser = (richText: string, supportEscapedCharacters: boolean): string | React.JSX.Element | React.JSX.Element[] => {\n  // Adjusts text to replace line breaks with <br/> tags\n  const adjustedText = richText.split('\\r\\n').join('<br/>');\n  if (supportEscapedCharacters) {\n    return parse(adjustedText);\n  }\n  return parse(richText);\n};\n\n/**\n * Takes a string and returns it with the first character capitalized and the remaining characters as lowercase.\n *\n * @param {string} pString - A string of text.\n * @returns {string} The capitalized string or the unchanged pString if anything other than a string is sent to it.\n */\nexport const capitalize = (pString: string): string => `${ pString.substring(0, 1).toUpperCase() }${ pString.substring(1).toLowerCase() }`;\n\n/**\n * Capitalizes the first letter of the given string.\n *\n * @param {string} pString - A string of text.\n * @returns {string} The string with the first letter capitalized, or the unchanged pString if it's not a string.\n */\nexport const capitalizeFirstLetter = (pString: string): string => `${ pString.substring(0, 1).toUpperCase() }${ pString.substring(1) }`;\n\n/**\n * Converts the first letter of the given string to lowercase.\n *\n * @param {string} pString - A string of text.\n * @returns {string} The string with the first letter converted to lowercase, or the unchanged pString if it's not a string.\n */\nexport const lowerCaseFirstLetter = (pString: string): string => `${ pString.substring(0, 1).toLowerCase() }${ pString.substring(1) }`;\n\n/**\n * Splits a string into grapheme clusters so text metrics and clamping can share\n * the same segmentation logic without forcing callers to pass pre-segmented data.\n *\n * @param {string} pString - The string to segment.\n * @returns {string[]} The grapheme units in order, falling back to code points when Intl.Segmenter is unavailable.\n */\nconst getGraphemeSegments = (pString: string): string[] => {\n  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n    const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });\n\n    return Array.from(segmenter.segment(pString), ({ segment }) => segment);\n  }\n\n  return Array.from(pString);\n};\n\n/**\n * Counts user-perceived characters (grapheme clusters) so emojis and composed\n * characters such as accented letters count as one.\n *\n * @param {string} pString - A string of text.\n * @returns {number} The number of grapheme clusters, falling back to code points where Intl.Segmenter is unavailable.\n */\nexport const getCharacterCount = (pString: string): number => getGraphemeSegments(pString).length;\n\n/**\n * Truncates a string to a maximum number of grapheme clusters without splitting\n * an emoji or composed character in half.\n *\n * @param {string} pString - A string of text.\n * @param {number} maxAllowed - The maximum number of user-perceived characters to keep.\n * @returns {string} The truncated string, or the unchanged pString if it is already within the limit.\n */\nexport const clampToGraphemeMax = (pString: string, maxAllowed: number): string => {\n  const graphemeSegments = getGraphemeSegments(pString);\n\n  if (graphemeSegments.length <= maxAllowed) {\n    return pString;\n  }\n\n  return graphemeSegments.slice(0, maxAllowed).join('');\n};\n\n/**\n * Determines if \"an\" should be used instead of \"a\" before the given word.\n *\n * @param {string} word - The word to check.\n * @returns {boolean} True if \"an\" should be used, false otherwise.\n */\nexport const useAnInsteadOfA = (word: string): boolean => {\n  const lettersRequiringAn = ['a', 'e', 'i', 'o', 'u', 'h'];\n  const firstLetter = word.substring(0, 1).toLowerCase();\n  return lettersRequiringAn.includes(firstLetter);\n};\n\nexport const splitCamelCase = (pString: string): string => pString\n// Single regex to handle all cases: lowercase followed by uppercase/number, or number followed by letter\n  .replace(/([a-z])([A-Z0-9])|([0-9])([a-zA-Z])/g, '$1$3 $2$4')\n// Insert a space between capital letters and lowercase letters where missing\n  .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2')\n// Convert the entire string to lowercase for consistency\n  .toLowerCase();\n\nexport const pluralize = (pString: string): string => {\n  if (pString.endsWith('y')) {\n    // If the word ends with 'y', replace 'y' with 'ies'\n    return `${ pString.slice(0, -1) }ies`;\n  } if (pString.endsWith('s') || pString.endsWith('x') || pString.endsWith('z') || pString.endsWith('ch') || pString.endsWith('sh')) {\n    // If the word ends with s, x, z, ch, or sh, add 'es'\n    return `${ pString }es`;\n  }\n  // For other cases, just add 's'\n  return `${ pString }s`;\n};\n\nexport const pluralizeIfNeeded = (pString: string, count: number): string => {\n  if (count && count > 1) {\n    return pluralize(pString);\n  }\n  return pString;\n};\n\nexport const getInitialsOrAcronym = (pString: string): string => {\n  return pString.split(' ').map((piece) => capitalize(piece.substring(0, 1))).join('');\n};\n"],"mappings":"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","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';