@x15ventures/x15-ui-library 3.11.4

package/dist/esm/components/form/formFields/subComponents/inputs/file/fileAttachmentList/fileAttachmentsList.css

@@ -0,0 +1,50 @@
+.fileAttachmentsList {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: 1;
+}
+.fileAttachmentsList .fileUploadList {
+  max-height: 150px;
+  overflow: auto;
+  padding: 10px;
+  border: 1px solid #d3dee4;
+  border-radius: 5px;
+}
+.fileAttachmentsList .fileUploadList.noFiles {
+  display: none;
+}
+.fileAttachmentsList .fileUploadList ul li {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  min-height: 44px;
+}
+.fileAttachmentsList .fileUploadList ul li span {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fileAttachmentsList .fileUploadList ul li span.fileNameDisplay {
+  padding-left: 15px;
+}
+.fileAttachmentsList .fileUploadList ul li span.editFileNameContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+.fileAttachmentsList .fileUploadList ul li button.iconOnly .iconSvg .svgIconColor_1 {
+  stroke: #000;
+  fill: #aaa;
+}
+.fileAttachmentsList .fileUploadList ul li button.iconOnly .iconSvg .svgIconColor_2 {
+  stroke: #000;
+  fill: #fff;
+}
+.fileAttachmentsList .fileUploadList ul li button.iconOnly .iconSvg.saveIcon .svgIconColor_1 {
+  fill: none;
+  stroke-width: 3px;
+}

package/dist/esm/components/form/formFields/subComponents/inputs/file/fileInputProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=fileInputProps.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/file/fileInputProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileInputProps.js","names":[],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/file/fileInputProps.ts"],"sourcesContent":["/* eslint-disable no-unused-vars */\nimport React, { FormEvent } from 'react';\nimport { FieldProps, FormFieldProps } from '../../../formFieldWrapper/formFieldProps';\nimport { ButtonStyles } from '../../../../buttons/button.interface';\n\nexport interface ValidFilesProps {\n  extensions?: string[];\n  fileTypes?: string[];\n  maxFileCount?: number;\n  maxFileSize?: number;\n}\n\nexport interface FileAttachmentListSettingsProps {\n  design?: {\n    animation?: 'reveal' | 'slide' | 'none';\n    editing?: {\n      delete?: {\n        icon?: React.ReactElement;\n        label?: string;\n        disable?: boolean;\n        buttonStyle?: ButtonStyles;\n      };\n      edit?: {\n        icon?: React.ReactElement;\n        label?: string;\n        disable?: boolean;\n        buttonStyle?: ButtonStyles;\n      };\n    },\n    heading?: {\n      isVisible?: boolean;\n      prefix?: string;\n      includeFileCount?: boolean;\n    }\n  };\n  isEditable?: boolean;\n}\n\nexport interface DragAndDropFileUploadProps extends Omit<FormFieldProps, 'field'> {\n  field: Omit<FieldProps, 'type' | 'onInput'> & {\n    type?: 'file';\n  };\n  labelStyle?: 'simple' | 'button' | 'dragArea';\n  labelUploadIcon?: React.ReactElement | null;\n  labelAsButtonStyles?: ButtonStyles;\n  fileDisplayStyle?: 'list' | 'names' | 'none';\n  fileListSettings?: FileAttachmentListSettingsProps;\n  labelStyleButtonProps?: ButtonStyles;\n  customFileUploadLabel?: string | React.ReactElement;\n  fileList?: File[];\n  validFiles?: ValidFilesProps;\n  onFilesChange?: (files: File[] | null) => void;\n  restrictionsTxt?: string | React.ReactElement;\n  multiple?: boolean;\n}\n\nexport interface FileInputProps extends DragAndDropFileUploadProps, React.InputHTMLAttributes<HTMLInputElement> {\n  field: Omit<FieldProps, 'type' | 'onInput'> & {\n    type: 'file';\n    multiple?: boolean;\n    accept: string;\n    onInput?: (event: FormEvent<HTMLInputElement>) => void;\n  };\n}\n"],"mappings":"","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/file/inputFile.css

@@ -0,0 +1,9 @@
+.file_Field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.file_Field .inputContainer input {
+  border: none;
+  padding: 0;
+}

package/dist/esm/components/form/formFields/subComponents/inputs/radio/radioInputsProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=radioInputsProps.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/radio/radioInputsProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radioInputsProps.js","names":[],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/radio/radioInputsProps.ts"],"sourcesContent":["/* eslint-disable no-unused-vars */\n\nimport React, { ReactElement, ReactNode } from 'react';\nimport { Message, Validate, ValidationRule } from 'react-hook-form';\n\nimport {\n  CustomContentProps, CustomFieldCssClassesProps, FieldProps, LabelProps, ValidationProps\n} from '../../../formFieldWrapper/formFieldProps';\nimport { GenericFunction } from '../../../../../../interfaces';\n\nexport interface RadioInputLabelProps extends Omit<LabelProps, 'hide' | 'position' | 'text'> {\n  position?: 'left' | 'right';\n  cssClasses: {\n    checked: string;\n    unchecked: string;\n  };\n  text: {\n    checked: string | ReactNode | ReactElement;\n    unchecked: string | ReactNode | ReactElement;\n  };\n  isChecked?: boolean;\n}\n\nexport interface RadioInputFieldProps extends Omit<FieldProps, 'onChange' | 'type' | 'placeholder' | 'defaultValue' | 'referenceDate' | 'includeEmptyOption' | 'options'> {\n  isOnlyOption?: boolean;\n  defaultChecked?: boolean;\n  value?: string | number | readonly string[];\n  groupName: string; // Comes from the group\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nexport interface RadioInputValidationProps<TFieldValue = unknown, TFormValues = unknown> {\n  required?: Message | ValidationRule<boolean>;\n  validate?: Validate<TFieldValue, TFormValues> | Record<string, Validate<TFieldValue, TFormValues>>;\n  [key: string]:\n    | Message\n    | ValidationRule<RegExp>\n    | ValidationRule<number | string | boolean>\n    | Validate<TFieldValue, TFormValues>\n    | Record<string, Validate<TFieldValue, TFormValues>>\n    | undefined;\n}\n\nexport interface RadioInputProps {\n  label: RadioInputLabelProps,\n  field: RadioInputFieldProps,\n  validation?: RadioInputValidationProps;\n  showSpinner?: boolean;\n  customCssClasses?: CustomFieldCssClassesProps;\n  customContent?: CustomContentProps;\n}\n\nexport interface StyledRadioGroupProps {\n  group: {\n    id: string;\n    name: string;\n    label: LabelProps;\n    layout?: 'stacked' | undefined,\n    showSpinner?: boolean;\n    validation?: ValidationProps;\n    customCssClasses?: CustomFieldCssClassesProps;\n    customContent?: CustomContentProps;\n    value?: string | number | boolean;\n    onChange?: GenericFunction\n  };\n  radioInputs: RadioInputProps[]\n}\n"],"mappings":"","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/radio/styled/StyledRadioGroup.js

@@ -0,0 +1,83 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTabbableInputGroup } from '../../../../../../../hooks';
+import { FormFieldLabel } from '../../../labels/FormFieldLabel';
+import { StyledRadioInput } from './StyledRadioInput';
+import { ValidationMessages } from '../../../../../validation/ValidationMessages';
+import { Spinner } from '../../../../../../design/spinner/Spinner';
+import './styledRadioGroup.css';
+export const StyledRadioGroup = ({
+  group: {
+    id,
+    name: groupName,
+    value: defaultGroupValue,
+    label,
+    layout,
+    validation,
+    showSpinner,
+    customCssClasses,
+    customContent,
+    onChange = () => {}
+  },
+  radioInputs
+}) => {
+  const [isTouched, setIsTouched] = useState(false);
+  const {
+    getValues,
+    setValue
+  } = useFormContext();
+  const [groupValue, setGroupValue] = useState(typeof defaultGroupValue !== 'undefined' ? defaultGroupValue : getValues(groupName));
+  const radioInputsGroup = useRef(null);
+  useTabbableInputGroup({
+    groupWrappingElementRef: radioInputsGroup
+  });
+  const HandleOnChange = event => {
+    const {
+      target
+    } = event;
+    const newValue = target.value;
+    setValue(groupName, newValue);
+    setGroupValue(newValue);
+    setIsTouched(true);
+    onChange(newValue);
+  };
+  const wrapperCssClass = `formField styledRadiosGroup ${layout || ''} ${isTouched ? 'touched' : ''} ${customCssClasses?.wrapper || ''} ${label?.position || ''}`;
+  const labelProps = {
+    ...label,
+    isRequired: validation && typeof validation.required !== 'undefined',
+    customContent
+  };
+  return /*#__PURE__*/React.createElement("fieldset", {
+    id: id,
+    onBlur: () => setIsTouched(true),
+    className: wrapperCssClass
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, "Screen reader users are advised that this radio group supports custom keyboard navigation between radio options via tabbing."), /*#__PURE__*/React.createElement("legend", {
+    className: label.hide ? 'sr-only' : ''
+  }, /*#__PURE__*/React.createElement(FormFieldLabel, labelProps)), /*#__PURE__*/React.createElement("div", {
+    ref: radioInputsGroup,
+    className: `radioInputs radioInputs_${radioInputs.length}`
+  }, radioInputs.map(radioInput => /*#__PURE__*/React.createElement(StyledRadioInput, _extends({
+    key: radioInput.field.id
+  }, radioInput, {
+    label: {
+      ...radioInput.label,
+      isChecked: groupValue === radioInput.field.value
+    },
+    field: {
+      ...radioInput.field,
+      defaultChecked: groupValue === radioInput.field.value,
+      groupName,
+      onChange: HandleOnChange
+    }
+  })))), showSpinner && /*#__PURE__*/React.createElement(Spinner, null), /*#__PURE__*/React.createElement(ValidationMessages, {
+    name: groupName,
+    validation: validation
+  }));
+};
+export default StyledRadioGroup;
+//# sourceMappingURL=StyledRadioGroup.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/radio/styled/StyledRadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledRadioGroup.js","names":["_extends","React","useRef","useState","useFormContext","useTabbableInputGroup","FormFieldLabel","StyledRadioInput","ValidationMessages","Spinner","StyledRadioGroup","group","id","name","groupName","value","defaultGroupValue","label","layout","validation","showSpinner","customCssClasses","customContent","onChange","radioInputs","isTouched","setIsTouched","getValues","setValue","groupValue","setGroupValue","radioInputsGroup","groupWrappingElementRef","HandleOnChange","event","target","newValue","wrapperCssClass","wrapper","position","labelProps","isRequired","required","createElement","onBlur","className","hide","ref","length","map","radioInput","key","field","isChecked","defaultChecked"],"sources":["../../../../../../../../../src/components/form/formFields/subComponents/inputs/radio/styled/StyledRadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useState } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { StyledRadioGroupProps } from '../radioInputsProps';\nimport { useTabbableInputGroup } from '../../../../../../../hooks';\nimport { FormFieldLabel } from '../../../labels/FormFieldLabel';\nimport { StyledRadioInput } from './StyledRadioInput';\nimport { ValidationMessages } from '../../../../../validation/ValidationMessages';\nimport { Spinner } from '../../../../../../design/spinner/Spinner';\n\nimport './styledRadioGroup.scss';\n\nexport const StyledRadioGroup: React.FC<StyledRadioGroupProps> = (\n  {\n    group: {\n      id,\n      name: groupName,\n      value: defaultGroupValue,\n      label,\n      layout,\n      validation,\n      showSpinner,\n      customCssClasses,\n      customContent,\n      onChange = () => {}\n    },\n    radioInputs\n  }\n) => {\n  const [isTouched, setIsTouched] = useState(false);\n  const { getValues, setValue } = useFormContext();\n  const [groupValue, setGroupValue] = useState(typeof defaultGroupValue !== 'undefined' ? defaultGroupValue : getValues(groupName));\n  const radioInputsGroup = useRef(null);\n\n  useTabbableInputGroup({ groupWrappingElementRef: radioInputsGroup });\n\n  const HandleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { target } = event;\n    const newValue = target.value;\n    setValue(groupName, newValue);\n    setGroupValue(newValue);\n    setIsTouched(true);\n    onChange(newValue);\n  };\n\n  const wrapperCssClass = `formField styledRadiosGroup ${ layout || '' } ${ isTouched ? 'touched' : '' } ${ customCssClasses?.wrapper || '' } ${ label?.position || '' }`;\n\n  const labelProps = {\n    ...label,\n    isRequired: validation && typeof validation.required !== 'undefined',\n    customContent\n  };\n\n  return (\n    <fieldset id={ id } onBlur={ () => setIsTouched(true) } className={ wrapperCssClass }>\n      <span className=\"sr-only\">\n        Screen reader users are advised that this radio group supports\n        custom keyboard navigation between radio options via tabbing.\n      </span>\n\n      <legend className={ label.hide ? 'sr-only' : '' }><FormFieldLabel { ...labelProps } /></legend>\n\n      <div ref={ radioInputsGroup } className={ `radioInputs radioInputs_${ radioInputs.length }` }>\n        {\n          radioInputs.map((radioInput) => (\n            <StyledRadioInput\n              key={ radioInput.field.id }\n              {\n                ...{\n                  ...radioInput,\n                  label: {\n                    ...radioInput.label,\n                    isChecked: groupValue === radioInput.field.value\n                  },\n                  field: {\n                    ...radioInput.field,\n                    defaultChecked: groupValue === radioInput.field.value,\n                    groupName,\n                    onChange: HandleOnChange\n                  }\n                }\n              }\n            />\n          ))\n        }\n      </div>\n\n      {\n        showSpinner && <Spinner />\n      }\n\n      <ValidationMessages name={ groupName } validation={ validation } />\n    </fieldset>\n  );\n};\n\nexport default StyledRadioGroup;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/radio/styled/StyledRadioInput.js

@@ -0,0 +1,70 @@
+'use client';
+
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { StyledRadioLabel } from './StyledRadioLabel';
+export const StyledRadioInput = ({
+  label,
+  field: {
+    isOnlyOption,
+    value,
+    id,
+    groupName,
+    defaultChecked,
+    onBlur = () => {},
+    onChange = () => {},
+    onTouched = () => {}
+  },
+  validation,
+  customCssClasses,
+  customContent
+}) => {
+  const {
+    getFieldState,
+    register
+  } = useFormContext();
+  const fieldState = getFieldState(groupName);
+  const inputCssClass = `${customCssClasses?.input || ''}${fieldState?.invalid ? ' invalidField' : ''}`;
+  const isRequired = validation && typeof validation.required !== 'undefined';
+  const HandleOnBlur = event => {
+    const {
+      target
+    } = event;
+    if (target) {
+      onTouched();
+      onBlur(event);
+    }
+  };
+  const labelProps = {
+    ...label,
+    inputId: id,
+    isRequired,
+    customContent
+  };
+  const fieldRegistration = register(groupName, {
+    onChange,
+    onBlur: HandleOnBlur,
+    ...validation
+  });
+  const inputProps = {
+    type: 'radio',
+    id,
+    value,
+    className: inputCssClass,
+    defaultChecked: defaultChecked || isOnlyOption,
+    disabled: isOnlyOption,
+    'aria-required': isRequired,
+    ...fieldRegistration
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: `styledRadioInput ${customCssClasses?.label || ''}`
+  }, /*#__PURE__*/React.createElement("label", {
+    id: label.labelId || `${id}_label`,
+    className: defaultChecked ? label.cssClasses.checked : label.cssClasses.unchecked,
+    htmlFor: id
+  }, label.position === 'left' && /*#__PURE__*/React.createElement(StyledRadioLabel, labelProps), /*#__PURE__*/React.createElement("span", {
+    className: "inputContainer"
+  }, /*#__PURE__*/React.createElement("input", inputProps)), (!label?.position || label?.position === 'right') && /*#__PURE__*/React.createElement(StyledRadioLabel, labelProps)));
+};
+export default StyledRadioInput;
+//# sourceMappingURL=StyledRadioInput.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/radio/styled/StyledRadioInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledRadioInput.js","names":["React","useFormContext","StyledRadioLabel","StyledRadioInput","label","field","isOnlyOption","value","id","groupName","defaultChecked","onBlur","onChange","onTouched","validation","customCssClasses","customContent","getFieldState","register","fieldState","inputCssClass","input","invalid","isRequired","required","HandleOnBlur","event","target","labelProps","inputId","fieldRegistration","inputProps","type","className","disabled","createElement","labelId","cssClasses","checked","unchecked","htmlFor","position"],"sources":["../../../../../../../../../src/components/form/formFields/subComponents/inputs/radio/styled/StyledRadioInput.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { RadioInputProps } from '../radioInputsProps';\nimport { StyledRadioLabel } from './StyledRadioLabel';\n\nexport const StyledRadioInput: React.FC<RadioInputProps> = (\n  {\n    label,\n    field: {\n      isOnlyOption,\n      value,\n      id,\n      groupName,\n      defaultChecked,\n      onBlur = () => {},\n      onChange = () => {},\n      onTouched = () => {}\n    },\n    validation,\n    customCssClasses,\n    customContent\n  }\n) => {\n  const {\n    getFieldState, register\n  } = useFormContext();\n\n  const fieldState = getFieldState(groupName);\n\n  const inputCssClass = `${ customCssClasses?.input || '' }${ fieldState?.invalid ? ' invalidField' : '' }`;\n\n  const isRequired = validation && typeof validation.required !== 'undefined';\n\n  const HandleOnBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    const { target } = event;\n    if (target) {\n      onTouched();\n      onBlur(event);\n    }\n  };\n\n  const labelProps = {\n    ...label,\n    inputId: id,\n    isRequired,\n    customContent\n  };\n\n  const fieldRegistration = register(\n    groupName,\n    {\n      onChange,\n      onBlur: HandleOnBlur,\n      ...validation\n    }\n  );\n\n  const inputProps = {\n    type: 'radio',\n    id,\n    value,\n    className: inputCssClass,\n    defaultChecked: defaultChecked || isOnlyOption,\n    disabled: isOnlyOption,\n    'aria-required': isRequired,\n    ...fieldRegistration\n  };\n\n  return (\n    <div className={ `styledRadioInput ${ customCssClasses?.label || '' }` }>\n      <label\n        id={ label.labelId || `${ id }_label` }\n        className={ defaultChecked ? label.cssClasses.checked : label.cssClasses.unchecked }\n        htmlFor={ id }\n      >\n        { label.position === 'left'\n          && <StyledRadioLabel { ...labelProps } /> }\n\n        <span className=\"inputContainer\">\n          <input { ...inputProps } />\n        </span>\n\n        { (!label?.position || label?.position === 'right')\n          && <StyledRadioLabel { ...labelProps } /> }\n      </label>\n    </div>\n  );\n};\n\nexport default StyledRadioInput;\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,iBAAiB;AAEhD,SAASC,gBAAgB,QAAQ,oBAAoB;AAErD,OAAO,MAAMC,gBAA2C,GAAGA,CACzD;EACEC,KAAK;EACLC,KAAK,EAAE;IACLC,YAAY;IACZC,KAAK;IACLC,EAAE;IACFC,SAAS;IACTC,cAAc;IACdC,MAAM,GAAGA,CAAA,KAAM,CAAC,CAAC;IACjBC,QAAQ,GAAGA,CAAA,KAAM,CAAC,CAAC;IACnBC,SAAS,GAAGA,CAAA,KAAM,CAAC;EACrB,CAAC;EACDC,UAAU;EACVC,gBAAgB;EAChBC;AACF,CAAC,KACE;EACH,MAAM;IACJC,aAAa;IAAEC;EACjB,CAAC,GAAGjB,cAAc,CAAC,CAAC;EAEpB,MAAMkB,UAAU,GAAGF,aAAa,CAACR,SAAS,CAAC;EAE3C,MAAMW,aAAa,GAAG,GAAIL,gBAAgB,EAAEM,KAAK,IAAI,EAAE,GAAKF,UAAU,EAAEG,OAAO,GAAG,eAAe,GAAG,EAAE,EAAG;EAEzG,MAAMC,UAAU,GAAGT,UAAU,IAAI,OAAOA,UAAU,CAACU,QAAQ,KAAK,WAAW;EAE3E,MAAMC,YAAY,GAAIC,KAAyC,IAAK;IAClE,MAAM;MAAEC;IAAO,CAAC,GAAGD,KAAK;IACxB,IAAIC,MAAM,EAAE;MACVd,SAAS,CAAC,CAAC;MACXF,MAAM,CAACe,KAAK,CAAC;IACf;EACF,CAAC;EAED,MAAME,UAAU,GAAG;IACjB,GAAGxB,KAAK;IACRyB,OAAO,EAAErB,EAAE;IACXe,UAAU;IACVP;EACF,CAAC;EAED,MAAMc,iBAAiB,GAAGZ,QAAQ,CAChCT,SAAS,EACT;IACEG,QAAQ;IACRD,MAAM,EAAEc,YAAY;IACpB,GAAGX;EACL,CACF,CAAC;EAED,MAAMiB,UAAU,GAAG;IACjBC,IAAI,EAAE,OAAO;IACbxB,EAAE;IACFD,KAAK;IACL0B,SAAS,EAAEb,aAAa;IACxBV,cAAc,EAAEA,cAAc,IAAIJ,YAAY;IAC9C4B,QAAQ,EAAE5B,YAAY;IACtB,eAAe,EAAEiB,UAAU;IAC3B,GAAGO;EACL,CAAC;EAED,oBACE9B,KAAA,CAAAmC,aAAA;IAAKF,SAAS,EAAG,oBAAqBlB,gBAAgB,EAAEX,KAAK,IAAI,EAAE;EAAK,gBACtEJ,KAAA,CAAAmC,aAAA;IACE3B,EAAE,EAAGJ,KAAK,CAACgC,OAAO,IAAI,GAAI5B,EAAE,QAAW;IACvCyB,SAAS,EAAGvB,cAAc,GAAGN,KAAK,CAACiC,UAAU,CAACC,OAAO,GAAGlC,KAAK,CAACiC,UAAU,CAACE,SAAW;IACpFC,OAAO,EAAGhC;EAAI,GAEZJ,KAAK,CAACqC,QAAQ,KAAK,MAAM,iBACtBzC,KAAA,CAAAmC,aAAA,CAACjC,gBAAgB,EAAM0B,UAAc,CAAC,eAE3C5B,KAAA,CAAAmC,aAAA;IAAMF,SAAS,EAAC;EAAgB,gBAC9BjC,KAAA,CAAAmC,aAAA,UAAYJ,UAAc,CACtB,CAAC,EAEL,CAAC,CAAC3B,KAAK,EAAEqC,QAAQ,IAAIrC,KAAK,EAAEqC,QAAQ,KAAK,OAAO,kBAC7CzC,KAAA,CAAAmC,aAAA,CAACjC,gBAAgB,EAAM0B,UAAc,CACrC,CACJ,CAAC;AAEV,CAAC;AAED,eAAezB,gBAAgB","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/radio/styled/StyledRadioLabel.js

@@ -0,0 +1,27 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Tooltip } from '../../../../../../design/tooltip/Tooltip';
+export const StyledRadioLabel = ({
+  text,
+  inputId,
+  srInstruction,
+  labelTooltip,
+  customContent,
+  isChecked
+}) => /*#__PURE__*/React.createElement("span", {
+  className: "labelText"
+}, customContent?.preLabel && /*#__PURE__*/React.createElement("span", {
+  className: "preLabel"
+}, customContent?.preLabel), srInstruction && /*#__PURE__*/React.createElement("span", {
+  className: "sr-only"
+}, srInstruction), isChecked ? text.checked : text.unchecked, labelTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+  triggerId: `${inputId}_tooltip`
+}, labelTooltip.icon ? {
+  icon: labelTooltip.icon
+} : {}), labelTooltip.text), customContent?.postLabel && /*#__PURE__*/React.createElement("span", {
+  className: "postLabel"
+}, customContent?.postLabel));
+export default StyledRadioLabel;
+//# sourceMappingURL=StyledRadioLabel.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/radio/styled/StyledRadioLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledRadioLabel.js","names":["_extends","React","Tooltip","StyledRadioLabel","text","inputId","srInstruction","labelTooltip","customContent","isChecked","createElement","className","preLabel","checked","unchecked","triggerId","icon","postLabel"],"sources":["../../../../../../../../../src/components/form/formFields/subComponents/inputs/radio/styled/StyledRadioLabel.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Tooltip } from '../../../../../../design/tooltip/Tooltip';\nimport { RadioInputLabelProps } from '../radioInputsProps';\n\nexport const StyledRadioLabel: React.FC<RadioInputLabelProps> = (\n  {\n    text,\n    inputId,\n    srInstruction,\n    labelTooltip,\n    customContent,\n    isChecked\n  }\n) => (\n  <span className=\"labelText\">\n    {\n      customContent?.preLabel\n      && <span className=\"preLabel\">{ customContent?.preLabel }</span>\n    }\n    { srInstruction\n      && (\n        <span className=\"sr-only\">\n          { srInstruction }\n        </span>\n      ) }\n    {\n      isChecked\n        ? text.checked\n        : text.unchecked\n    }\n    {\n      labelTooltip\n      && (\n        <Tooltip\n          triggerId={ `${ inputId }_tooltip` }\n          { ...(labelTooltip.icon ? { icon: labelTooltip.icon } : {}) }\n        >\n          { labelTooltip.text }\n        </Tooltip>\n      )\n    }\n    {\n      customContent?.postLabel\n      && <span className=\"postLabel\">{ customContent?.postLabel }</span>\n    }\n  </span>\n);\n\nexport default StyledRadioLabel;\n"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,QAAQ,0CAA0C;AAGlE,OAAO,MAAMC,gBAAgD,GAAGA,CAC9D;EACEC,IAAI;EACJC,OAAO;EACPC,aAAa;EACbC,YAAY;EACZC,aAAa;EACbC;AACF,CAAC,kBAEDR,KAAA,CAAAS,aAAA;EAAMC,SAAS,EAAC;AAAW,GAEvBH,aAAa,EAAEI,QAAQ,iBACpBX,KAAA,CAAAS,aAAA;EAAMC,SAAS,EAAC;AAAU,GAAGH,aAAa,EAAEI,QAAgB,CAAC,EAEhEN,aAAa,iBAEXL,KAAA,CAAAS,aAAA;EAAMC,SAAS,EAAC;AAAS,GACrBL,aACE,CACP,EAEDG,SAAS,GACLL,IAAI,CAACS,OAAO,GACZT,IAAI,CAACU,SAAS,EAGlBP,YAAY,iBAEVN,KAAA,CAAAS,aAAA,CAACR,OAAO,EAAAF,QAAA;EACNe,SAAS,EAAG,GAAIV,OAAO;AAAa,GAC9BE,YAAY,CAACS,IAAI,GAAG;EAAEA,IAAI,EAAET,YAAY,CAACS;AAAK,CAAC,GAAG,CAAC,CAAC,GAExDT,YAAY,CAACH,IACR,CACV,EAGDI,aAAa,EAAES,SAAS,iBACrBhB,KAAA,CAAAS,aAAA;EAAMC,SAAS,EAAC;AAAW,GAAGH,aAAa,EAAES,SAAiB,CAE/D,CACP;AAED,eAAed,gBAAgB","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/radio/styled/styledRadioGroup.css

@@ -0,0 +1,26 @@
+/* Popovers */
+.styledRadiosGroup legend {
+  display: block;
+  margin: 0 0 10px;
+}
+.styledRadiosGroup .radioInputs {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+}
+.styledRadiosGroup .radioInputs .labelText {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+}
+.styledRadiosGroup .styledRadioInput .inputContainer {
+  position: absolute;
+  opacity: 0.01;
+  width: 1px;
+  display: block;
+  flex: none;
+}

package/dist/esm/components/form/formFields/subComponents/inputs/search/InputSearch.js

@@ -0,0 +1,26 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { InputText } from '../text/InputText';
+import { Icon } from '../../../../../design/icons/basicIcon/Icon';
+import './inputSearch.css';
+
+// PRIVATE COMPONENT
+// Do not use this directly. It must be created via a FormField component
+
+export const InputSearch = ({
+  customContent,
+  ...rest
+}) => /*#__PURE__*/React.createElement(InputText, _extends({}, rest, {
+  type: "search",
+  customContent: {
+    ...customContent,
+    preField: /*#__PURE__*/React.createElement("span", {
+      className: "searchIcon"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: "search"
+    }))
+  }
+}));
+//# sourceMappingURL=InputSearch.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/search/InputSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputSearch.js","names":["_extends","React","InputText","Icon","InputSearch","customContent","rest","createElement","type","preField","className","icon"],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/search/InputSearch.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { InputText, InputTextProps } from '../text/InputText';\nimport { Icon } from '../../../../../design/icons/basicIcon/Icon';\n\nimport './inputSearch.scss';\n\n// PRIVATE COMPONENT\n// Do not use this directly. It must be created via a FormField component\n\nexport const InputSearch: React.FC<InputTextProps> = (\n  {\n    customContent,\n    ...rest\n  }\n) => (\n  <InputText\n    { ...rest }\n    type=\"search\"\n    customContent={\n      {\n        ...customContent,\n        preField: <span className=\"searchIcon\"><Icon icon=\"search\" /></span>\n      }\n    }\n  />\n);\n"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAwB,mBAAmB;AAC7D,SAASC,IAAI,QAAQ,4CAA4C;AAEjE,OAAO,oBAAoB;;AAE3B;AACA;;AAEA,OAAO,MAAMC,WAAqC,GAAGA,CACnD;EACEC,aAAa;EACb,GAAGC;AACL,CAAC,kBAEDL,KAAA,CAAAM,aAAA,CAACL,SAAS,EAAAF,QAAA,KACHM,IAAI;EACTE,IAAI,EAAC,QAAQ;EACbH,aAAa,EACX;IACE,GAAGA,aAAa;IAChBI,QAAQ,eAAER,KAAA,CAAAM,aAAA;MAAMG,SAAS,EAAC;IAAY,gBAACT,KAAA,CAAAM,aAAA,CAACJ,IAAI;MAACQ,IAAI,EAAC;IAAQ,CAAE,CAAO;EACrE;AACD,EACF,CACF","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/search/inputSearch.css

@@ -0,0 +1,26 @@
+.search_Field .inputContainer {
+  column-gap: 0;
+}
+.search_Field .inputContainer .preField {
+  position: relative;
+}
+.search_Field .inputContainer .preField .searchIcon {
+  position: absolute;
+  z-index: 2;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  line-height: 30px;
+  margin: -15px 0;
+  right: -35px;
+}
+.search_Field .inputContainer input {
+  padding-left: 40px;
+}
+.search_Field .inputContainer input + * {
+  margin-right: 10px;
+}
+.search_Field.insetLabel.formField label .inputContainer .labelText {
+  left: 40px;
+  margin-left: 0;
+}

package/dist/esm/components/form/formFields/subComponents/inputs/text/InputText.js

@@ -0,0 +1,100 @@
+'use client';
+
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { NoHookFormContext } from '../../../utilities/formUtilities';
+import { isValidationRuleWithValue } from '../../../../../../helpers/validationHelpers';
+export const InputText = ({
+  field: {
+    type = 'text',
+    id,
+    name,
+    placeholder,
+    defaultValue,
+    disabled,
+    onBlur = () => {},
+    onChange = () => {},
+    onKeyDown = () => {},
+    onTouched = () => {},
+    ...htmlNativeDomProps
+  },
+  validation,
+  showSpinner,
+  customCssClasses,
+  customContent
+}) => {
+  const {
+    register,
+    getFieldState,
+    setValue
+  } = useFormContext() || NoHookFormContext;
+  const fieldState = getFieldState(name);
+  const HandleAutoFill = event => {
+    const {
+      target
+    } = event;
+    if (target) {
+      const newValue = target.value;
+      if (type !== 'number' && type !== 'date') {
+        setValue(name, newValue);
+      }
+      onChange(event);
+    }
+  };
+  const HandleOnBlur = event => {
+    const {
+      target
+    } = event;
+    if (target) {
+      const newValue = target.value;
+      if (type === 'text') {
+        setValue(name, newValue.trim());
+      }
+      onTouched();
+      onBlur(event);
+    }
+  };
+  const HandleKeyEvent = event => {
+    onKeyDown(event);
+  };
+  const cssClass = `${customCssClasses?.input || ''}${fieldState && fieldState?.invalid ? ' invalidField' : ''}`;
+  const addLengthValidatorProps = validatorKey => {
+    if (validation && typeof validation[validatorKey] !== 'undefined' && isValidationRuleWithValue(validation[validatorKey])) {
+      return {
+        [validatorKey]: validation[validatorKey]?.value
+      };
+    }
+    return {};
+  };
+  const inputProps = {
+    type,
+    id,
+    className: cssClass,
+    placeholder,
+    defaultValue,
+    disabled,
+    ...(showSpinner ? {
+      disabled: true
+    } : {}),
+    ...(validation && typeof validation.required !== 'undefined' ? {
+      required: true
+    } : {}),
+    ...addLengthValidatorProps('maxLength'),
+    ...addLengthValidatorProps('minLength'),
+    ...addLengthValidatorProps('max'),
+    ...addLengthValidatorProps('min'),
+    ...register(name, {
+      onChange: HandleAutoFill,
+      onBlur: HandleOnBlur,
+      ...validation
+    }),
+    onKeyDown: HandleKeyEvent,
+    ...htmlNativeDomProps
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, customContent?.preField && /*#__PURE__*/React.createElement("span", {
+    className: `preField preField_${type}Input`
+  }, customContent?.preField), /*#__PURE__*/React.createElement("input", inputProps), customContent?.postField && /*#__PURE__*/React.createElement("span", {
+    className: `postField postField_${type}Input`
+  }, customContent?.postField));
+};
+//# sourceMappingURL=InputText.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/text/InputText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputText.js","names":["React","useFormContext","NoHookFormContext","isValidationRuleWithValue","InputText","field","type","id","name","placeholder","defaultValue","disabled","onBlur","onChange","onKeyDown","onTouched","htmlNativeDomProps","validation","showSpinner","customCssClasses","customContent","register","getFieldState","setValue","fieldState","HandleAutoFill","event","target","newValue","value","HandleOnBlur","trim","HandleKeyEvent","cssClass","input","invalid","addLengthValidatorProps","validatorKey","inputProps","className","required","createElement","Fragment","preField","postField"],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/text/InputText.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { FormFieldProps, ValidationKey } from '../../../formFieldWrapper/formFieldProps';\nimport { NoHookFormContext } from '../../../utilities/formUtilities';\nimport { isValidationRuleWithValue } from '../../../../../../helpers/validationHelpers';\n\nexport interface InputTextProps extends FormFieldProps, React.InputHTMLAttributes<HTMLInputElement> { }\n\nexport const InputText: React.FC<InputTextProps> = (\n  {\n    field: {\n      type = 'text',\n      id,\n      name,\n      placeholder,\n      defaultValue,\n      disabled,\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, setValue } = useFormContext() || NoHookFormContext;\n  const fieldState = getFieldState(name);\n\n  const HandleAutoFill = (event: React.FocusEvent<HTMLInputElement>) => {\n    const { target } = event;\n    if (target) {\n      const newValue = target.value;\n      if (type !== 'number' && type !== 'date') {\n        setValue(name, newValue);\n      }\n      onChange(event);\n    }\n  };\n\n  const HandleOnBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    const { target } = event;\n    if (target) {\n      const newValue = target.value;\n      if (type === 'text') {\n        setValue(name, newValue.trim());\n      }\n      onTouched();\n      onBlur(event);\n    }\n  };\n\n  const HandleKeyEvent = (\n    event: React.KeyboardEvent<HTMLInputElement> &\n      React.KeyboardEvent<HTMLSelectElement> &\n      React.KeyboardEvent<HTMLTextAreaElement>\n  ) => {\n    onKeyDown(event);\n  };\n\n  const cssClass = `${ customCssClasses?.input || '' }${ fieldState && fieldState?.invalid ? ' invalidField' : '' }`;\n\n  const addLengthValidatorProps = (validatorKey: ValidationKey) => {\n    if (\n      validation\n      && typeof validation[validatorKey] !== 'undefined'\n      && isValidationRuleWithValue(validation[validatorKey])\n    ) {\n      return {\n        [validatorKey]: validation[validatorKey]?.value\n      };\n    }\n    return {};\n  };\n\n  const inputProps = {\n    type,\n    id,\n    className: cssClass,\n    placeholder,\n    defaultValue,\n    disabled,\n    ...(showSpinner ? { disabled: true } : {}),\n    ...(validation && typeof validation.required !== 'undefined' ? { required: true } : {}),\n    ...(addLengthValidatorProps('maxLength')),\n    ...(addLengthValidatorProps('minLength')),\n    ...(addLengthValidatorProps('max')),\n    ...(addLengthValidatorProps('min')),\n    ...register(\n      name,\n      {\n        onChange: HandleAutoFill,\n        onBlur: HandleOnBlur,\n        ...validation\n      }\n    ),\n    onKeyDown: HandleKeyEvent,\n    ...htmlNativeDomProps\n  };\n\n  return (\n    <>\n      {\n        customContent?.preField\n        && <span className={ `preField preField_${ type }Input` }>{ customContent?.preField }</span>\n      }\n\n      <input { ...inputProps } />\n\n      {\n        customContent?.postField\n        && <span className={ `postField postField_${ type }Input` }>{ customContent?.postField }</span>\n      }\n    </>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/labels/FormFieldLabel.js

@@ -0,0 +1,31 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Tooltip } from '../../../../design/tooltip/Tooltip';
+export const FormFieldLabel = ({
+  text,
+  inputId,
+  srInstruction,
+  labelTooltip,
+  hide,
+  isRequired,
+  customContent
+}) => {
+  const labelCssClass = `${hide ? 'sr-only' : 'labelText'} ${isRequired ? 'mandatory' : ''}`;
+  return /*#__PURE__*/React.createElement("span", {
+    className: labelCssClass
+  }, customContent?.preLabel && /*#__PURE__*/React.createElement("span", {
+    className: "preLabel"
+  }, customContent?.preLabel), srInstruction && /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, srInstruction), text, labelTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+    triggerId: `${inputId}_tooltip`
+  }, labelTooltip.icon ? {
+    icon: labelTooltip.icon
+  } : {}), labelTooltip.text), customContent?.postLabel && /*#__PURE__*/React.createElement("span", {
+    className: "postLabel"
+  }, customContent?.postLabel));
+};
+export default FormFieldLabel;
+//# sourceMappingURL=FormFieldLabel.js.map

package/dist/esm/components/form/formFields/subComponents/labels/FormFieldLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldLabel.js","names":["_extends","React","Tooltip","FormFieldLabel","text","inputId","srInstruction","labelTooltip","hide","isRequired","customContent","labelCssClass","createElement","className","preLabel","triggerId","icon","postLabel"],"sources":["../../../../../../../src/components/form/formFields/subComponents/labels/FormFieldLabel.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Tooltip } from '../../../../design/tooltip/Tooltip';\nimport { LabelProps } from '../../formFieldWrapper/formFieldProps';\n\nexport const FormFieldLabel: React.FC<LabelProps> = (\n  {\n    text,\n    inputId,\n    srInstruction,\n    labelTooltip,\n    hide,\n    isRequired,\n    customContent\n  }\n) => {\n  const labelCssClass = `${ hide ? 'sr-only' : 'labelText' } ${ isRequired ? 'mandatory' : '' }`;\n\n  return (\n    <span className={ labelCssClass }>\n      {\n        customContent?.preLabel\n        && <span className=\"preLabel\">{ customContent?.preLabel }</span>\n      }\n      { srInstruction\n        && (\n          <span className=\"sr-only\">\n            { srInstruction }\n          </span>\n        ) }\n      { text }\n      {\n        labelTooltip\n        && (\n          <Tooltip\n            triggerId={ `${ inputId }_tooltip` }\n            { ...(labelTooltip.icon ? { icon: labelTooltip.icon } : {}) }\n          >\n            { labelTooltip.text }\n          </Tooltip>\n        )\n      }\n      {\n        customContent?.postLabel\n        && <span className=\"postLabel\">{ customContent?.postLabel }</span>\n      }\n    </span>\n  );\n};\n\nexport default FormFieldLabel;\n"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,QAAQ,oCAAoC;AAG5D,OAAO,MAAMC,cAAoC,GAAGA,CAClD;EACEC,IAAI;EACJC,OAAO;EACPC,aAAa;EACbC,YAAY;EACZC,IAAI;EACJC,UAAU;EACVC;AACF,CAAC,KACE;EACH,MAAMC,aAAa,GAAG,GAAIH,IAAI,GAAG,SAAS,GAAG,WAAW,IAAMC,UAAU,GAAG,WAAW,GAAG,EAAE,EAAG;EAE9F,oBACER,KAAA,CAAAW,aAAA;IAAMC,SAAS,EAAGF;EAAe,GAE7BD,aAAa,EAAEI,QAAQ,iBACpBb,KAAA,CAAAW,aAAA;IAAMC,SAAS,EAAC;EAAU,GAAGH,aAAa,EAAEI,QAAgB,CAAC,EAEhER,aAAa,iBAEXL,KAAA,CAAAW,aAAA;IAAMC,SAAS,EAAC;EAAS,GACrBP,aACE,CACP,EACDF,IAAI,EAEJG,YAAY,iBAEVN,KAAA,CAAAW,aAAA,CAACV,OAAO,EAAAF,QAAA;IACNe,SAAS,EAAG,GAAIV,OAAO;EAAa,GAC9BE,YAAY,CAACS,IAAI,GAAG;IAAEA,IAAI,EAAET,YAAY,CAACS;EAAK,CAAC,GAAG,CAAC,CAAC,GAExDT,YAAY,CAACH,IACR,CACV,EAGDM,aAAa,EAAEO,SAAS,iBACrBhB,KAAA,CAAAW,aAAA;IAAMC,SAAS,EAAC;EAAW,GAAGH,aAAa,EAAEO,SAAiB,CAE/D,CAAC;AAEX,CAAC;AAED,eAAed,cAAc","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/select/Select.js

@@ -0,0 +1,95 @@
+'use client';
+
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { HookFormWrapper } from '../../../hookFormWrapper/HookFormWrapper';
+import { isAnObject } from '../../../../../helpers/objectHelpers';
+import { NoHookFormContext } from '../../utilities/formUtilities';
+export const Select = ({
+  field: {
+    id,
+    name,
+    placeholder,
+    defaultValue,
+    onBlur = () => {},
+    onChange = () => {},
+    onKeyDown = () => {},
+    onTouched = () => {},
+    includeEmptyOption = true,
+    emptyOptionLabel = 'Please select',
+    options
+  },
+  validation,
+  showSpinner,
+  customCssClasses,
+  customContent
+}) => {
+  const {
+    register,
+    getFieldState
+  } = useFormContext() || NoHookFormContext;
+  const fieldState = getFieldState(name);
+  const HandleAutoFill = event => {
+    const {
+      target
+    } = event;
+    if (target) {
+      onChange(event);
+    }
+  };
+  const HandleOnBlur = event => {
+    const {
+      target
+    } = event;
+    if (target) {
+      onTouched();
+      onBlur(event);
+    }
+  };
+  const HandleKeyEvent = event => {
+    onTouched();
+    onKeyDown(event);
+  };
+  const cssClass = `${customCssClasses?.input || ''}${fieldState && fieldState?.invalid ? ' invalidField' : ''}`;
+  const selectProps = {
+    id,
+    className: cssClass,
+    placeholder,
+    defaultValue,
+    ...(showSpinner ? {
+      disabled: true
+    } : {}),
+    ...(validation && typeof validation.required !== 'undefined' ? {
+      required: true
+    } : {}),
+    ...register(name, {
+      onChange: HandleAutoFill,
+      onBlur: HandleOnBlur,
+      ...validation
+    }),
+    onKeyDown: HandleKeyEvent
+  };
+  const renderOption = option => {
+    if (isAnObject(option)) {
+      const typedOption = option;
+      return /*#__PURE__*/React.createElement("option", {
+        key: `${id}_${typedOption.value}`,
+        "data-option": JSON.stringify(typedOption),
+        value: typedOption.value
+      }, typedOption.label);
+    }
+    return /*#__PURE__*/React.createElement("option", {
+      key: `${id}_${option}`,
+      "data-option": JSON.stringify(option),
+      value: option
+    }, option);
+  };
+  return /*#__PURE__*/React.createElement(HookFormWrapper, null, customContent?.preField && /*#__PURE__*/React.createElement("span", {
+    className: "preField"
+  }, customContent?.preField), /*#__PURE__*/React.createElement("select", selectProps, includeEmptyOption && /*#__PURE__*/React.createElement("option", {
+    value: ""
+  }, emptyOptionLabel), options?.map(renderOption)), customContent?.postField && /*#__PURE__*/React.createElement("span", {
+    className: "postField"
+  }, customContent?.postField));
+};
+//# sourceMappingURL=Select.js.map