@x15ventures/x15-ui-library 3.11.4

package/dist/esm/components/form/formFields/subComponents/InputVariants.js

@@ -0,0 +1,179 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormField } from '../formFieldWrapper/FormField';
+import { DEFAULT_EMAIL_REGEX, DEFAULT_PASSWORD_REGEX, DEFAULT_PHONE_REGEX, DEFAULT_NUMBER_REGEX, DEFAULT_URL_REGEX } from '../../../../constants';
+import { DragAndDropFileUpload } from './inputs/file/dragAndDrop/DragAndDropFileUpload';
+export const TextInput = props => /*#__PURE__*/React.createElement(FormField, _extends({}, props, {
+  field: {
+    ...props.field,
+    type: 'text'
+  }
+}));
+export const EmailInput = props => {
+  const {
+    field,
+    validation
+  } = props;
+  const emailValidation = {
+    pattern: {
+      value: DEFAULT_EMAIL_REGEX,
+      message: 'Please enter a valid email address.'
+    },
+    ...(validation || {})
+  };
+  return /*#__PURE__*/React.createElement(FormField, _extends({}, props, {
+    field: {
+      type: 'email',
+      autoComplete: 'email',
+      placeholder: 'example@example.com',
+      ...field
+    },
+    validation: emailValidation
+  }));
+};
+export const FileInput = props => /*#__PURE__*/React.createElement(DragAndDropFileUpload, _extends({}, props, {
+  field: {
+    ...props.field,
+    type: 'file'
+  }
+}));
+export const SearchInput = props => /*#__PURE__*/React.createElement(FormField, _extends({}, props, {
+  field: {
+    ...props.field,
+    type: 'search'
+  }
+}));
+export const NumberInput = props => {
+  const {
+    field,
+    validation
+  } = props;
+  const numberValidation = {
+    pattern: {
+      value: DEFAULT_NUMBER_REGEX,
+      message: 'Please enter numbers only. Examples include 42, -3.5, or 1.2e4.'
+    },
+    ...(validation || {})
+  };
+  return /*#__PURE__*/React.createElement(FormField, _extends({}, props, {
+    field: {
+      type: 'number',
+      placeholder: '12345',
+      ...field
+    },
+    validation: numberValidation,
+    customContent: {
+      postField: /*#__PURE__*/React.createElement("small", null, "(Only numbers can be entered in this field.)")
+    }
+  }));
+};
+export const PhoneInput = props => {
+  const {
+    field,
+    validation
+  } = props;
+  const phoneValidation = {
+    pattern: {
+      value: DEFAULT_PHONE_REGEX,
+      message: 'Please enter a valid phone number, such as 0412 345 678, (02) 1234 5678, or +61 412 345 678.'
+    },
+    ...(validation || {})
+  };
+  return /*#__PURE__*/React.createElement(FormField, _extends({}, props, {
+    field: {
+      autoComplete: 'tel',
+      type: 'tel',
+      placeholder: 'e.g. 0412 345 678',
+      ...field
+    },
+    validation: phoneValidation
+  }));
+};
+export const UrlInput = props => {
+  const {
+    field,
+    validation
+  } = props;
+  const urlValidation = {
+    pattern: {
+      value: DEFAULT_URL_REGEX,
+      message: 'Please enter a valid URL, such as https://www.example.com.'
+    },
+    ...(validation || {})
+  };
+  return /*#__PURE__*/React.createElement(FormField, _extends({}, props, {
+    field: {
+      type: 'url',
+      placeholder: 'e.g. https://www.example.com',
+      ...field
+    },
+    validation: urlValidation
+  }));
+};
+export const PasswordInput = props => {
+  const {
+    field,
+    validation,
+    isSignup = false
+  } = props;
+  const passwordValidation = isSignup ? {
+    pattern: {
+      value: DEFAULT_PASSWORD_REGEX,
+      message: 'Your password should be minimum eight and maximum 16 characters, at least one uppercase letter, one lowercase letter, one number and one special character.'
+    },
+    ...(validation || {})
+  } : {
+    ...(validation || {})
+  };
+  return /*#__PURE__*/React.createElement(FormField, _extends({}, props, {
+    field: {
+      ...field,
+      type: 'password',
+      autoComplete: isSignup ? 'new-password' : 'current-password'
+    },
+    validation: passwordValidation
+  }));
+};
+export const PasswordInputSignup = props => /*#__PURE__*/React.createElement(PasswordInput, _extends({
+  isSignup: true
+}, props, {
+  field: {
+    ...props.field,
+    autoComplete: 'new-password'
+  }
+}));
+export const SelectDropdown = props => /*#__PURE__*/React.createElement(FormField, _extends({}, props, {
+  field: {
+    ...props.field,
+    type: 'select'
+  }
+}));
+export { SelectDropdown as Select };
+export const Combobox = props => /*#__PURE__*/React.createElement(FormField, _extends({}, props, {
+  field: {
+    ...props.field,
+    type: 'combobox'
+  },
+  separateLabelAndField: true
+}));
+export const Textarea = props => /*#__PURE__*/React.createElement(FormField, _extends({}, props, {
+  field: {
+    ...props.field,
+    type: 'textarea'
+  }
+}));
+export default {
+  TextInput,
+  EmailInput,
+  FileInput,
+  SearchInput,
+  NumberInput,
+  PhoneInput,
+  UrlInput,
+  PasswordInput,
+  PasswordInputSignup,
+  SelectDropdown,
+  Combobox,
+  Textarea
+};
+//# sourceMappingURL=InputVariants.js.map

package/dist/esm/components/form/formFields/subComponents/InputVariants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputVariants.js","names":["React","FormField","DEFAULT_EMAIL_REGEX","DEFAULT_PASSWORD_REGEX","DEFAULT_PHONE_REGEX","DEFAULT_NUMBER_REGEX","DEFAULT_URL_REGEX","DragAndDropFileUpload","TextInput","props","createElement","_extends","field","type","EmailInput","validation","emailValidation","pattern","value","message","autoComplete","placeholder","FileInput","SearchInput","NumberInput","numberValidation","customContent","postField","PhoneInput","phoneValidation","UrlInput","urlValidation","PasswordInput","isSignup","passwordValidation","PasswordInputSignup","SelectDropdown","Select","Combobox","separateLabelAndField","Textarea"],"sources":["../../../../../../src/components/form/formFields/subComponents/InputVariants.tsx"],"sourcesContent":[" \nimport React from 'react';\nimport { FieldProps, FormFieldProps } from '../formFieldWrapper/formFieldProps';\nimport { FormField } from '../formFieldWrapper/FormField';\nimport {\n  DEFAULT_EMAIL_REGEX,\n  DEFAULT_PASSWORD_REGEX,\n  DEFAULT_PHONE_REGEX,\n  DEFAULT_NUMBER_REGEX,\n  DEFAULT_URL_REGEX\n} from '../../../../constants';\n\nimport {\n  DragAndDropFileUpload\n} from './inputs/file/dragAndDrop/DragAndDropFileUpload';\n\nexport interface FormComponentProps extends Omit<FormFieldProps, 'field'> {\n  field: Omit<FieldProps, 'type'>;\n}\n\nexport interface DropdownSelectProps extends FormComponentProps, React.SelectHTMLAttributes<HTMLSelectElement> {\n}\n\nexport const TextInput: React.FC<FormComponentProps> = (props) => (\n  <FormField { ...{ ...props, field: { ...props.field, type: 'text' } } } />\n);\n\nexport const EmailInput: React.FC<FormComponentProps> = (props) => {\n  const { field, validation } = props;\n\n  const emailValidation = {\n    pattern: {\n      value: DEFAULT_EMAIL_REGEX,\n      message: 'Please enter a valid email address.'\n    },\n    ...validation || {}\n  };\n\n  return (\n    <FormField {\n      ...{\n        ...props,\n        field: {\n          type: 'email',\n          autoComplete: 'email',\n          placeholder: 'example@example.com',\n          ...field\n        },\n        validation: emailValidation\n      }\n    }\n    />\n  );\n};\n\nexport const FileInput: React.FC<FormComponentProps> = (props) => <DragAndDropFileUpload { ...{ ...props, field: { ...props.field, type: 'file' } } } />;\n\nexport const SearchInput: React.FC<FormComponentProps> = (props) => <FormField { ...{ ...props, field: { ...props.field, type: 'search' } } } />;\n\nexport const NumberInput: React.FC<FormComponentProps> = (props) => {\n  const { field, validation } = props;\n\n  const numberValidation = {\n    pattern: {\n      value: DEFAULT_NUMBER_REGEX,\n      message: 'Please enter numbers only. Examples include 42, -3.5, or 1.2e4.'\n    },\n    ...validation || {}\n  };\n\n  return (\n    <FormField {\n      ...{\n        ...props,\n        field: {\n          type: 'number',\n          placeholder: '12345',\n          ...field\n        },\n        validation: numberValidation,\n        customContent: {\n          postField: <small>(Only numbers can be entered in this field.)</small>\n        }\n      }\n    }\n    />\n  );\n};\n\nexport const PhoneInput: React.FC<FormComponentProps> = (props) => {\n  const { field, validation } = props;\n\n  const phoneValidation = {\n    pattern: {\n      value: DEFAULT_PHONE_REGEX,\n      message: 'Please enter a valid phone number, such as 0412 345 678, (02) 1234 5678, or +61 412 345 678.'\n    },\n    ...validation || {}\n  };\n\n  return (\n    <FormField {\n      ...{\n        ...props,\n        field: {\n          autoComplete: 'tel',\n          type: 'tel',\n          placeholder: 'e.g. 0412 345 678',\n          ...field\n        },\n        validation: phoneValidation\n      }\n    }\n    />\n  );\n};\n\nexport const UrlInput: React.FC<FormComponentProps> = (props) => {\n  const { field, validation } = props;\n\n  const urlValidation = {\n    pattern: {\n      value: DEFAULT_URL_REGEX,\n      message: 'Please enter a valid URL, such as https://www.example.com.'\n    },\n    ...validation || {}\n  };\n\n  return (\n    <FormField {\n      ...{\n        ...props,\n        field: {\n          type: 'url',\n          placeholder: 'e.g. https://www.example.com',\n          ...field\n        },\n        validation: urlValidation\n      }\n    }\n    />\n  );\n};\n\nexport interface PasswordInputProps extends FormComponentProps {\n  isSignup?: boolean;\n}\n\nexport const PasswordInput: React.FC<PasswordInputProps> = (props) => {\n  const { field, validation, isSignup = false } = props;\n\n  const passwordValidation = isSignup ? {\n    pattern: {\n      value: DEFAULT_PASSWORD_REGEX,\n      message: 'Your password should be minimum eight and maximum 16 characters, at least one uppercase letter, one lowercase letter, one number and one special character.'\n    },\n    ...validation || {}\n  } : { ...validation || {} };\n\n  return (\n    <FormField { ...{ ...props, field: { ...field, type: 'password', autoComplete: isSignup ? 'new-password' : 'current-password' }, validation: passwordValidation } } />\n  );\n};\n\nexport const PasswordInputSignup: React.FC<PasswordInputProps> = (props) => <PasswordInput isSignup={ true } { ...props } field={ { ...props.field, autoComplete: 'new-password' } } />;\n\nexport const SelectDropdown: React.FC<DropdownSelectProps> = (props) => <FormField { ...{ ...props, field: { ...props.field, type: 'select' } } } />;\n\nexport { SelectDropdown as Select };\n\nexport const Combobox: React.FC<FormComponentProps> = (props) => <FormField { ...{ ...props, field: { ...props.field, type: 'combobox' }, separateLabelAndField: true } } />;\n\nexport const Textarea: React.FC<FormComponentProps> = (props) => <FormField { ...{ ...props, field: { ...props.field, type: 'textarea' } } } />;\n\nexport default {\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};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/autocomplete/Autocomplete.js

@@ -0,0 +1,111 @@
+'use client';
+
+import React, { useState, useRef, useMemo } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useDebouncedCallback } from 'use-debounce';
+import { useOnClickOutside, usePopupKeys } from '../../../../../../hooks';
+import { InputText } from '../text/InputText';
+import './autocomplete.css';
+export const Autocomplete = ({
+  field,
+  label,
+  validation,
+  showSpinner,
+  customCssClasses,
+  customContent,
+  onOptionSelect = () => {},
+  onInputChange = () => {},
+  debounceTime = 500
+}) => {
+  const {
+    setValue
+  } = useFormContext();
+  const wrapperElement = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [filteredOptions, setFilteredOptions] = useState(field.options || []);
+  const [selectedOption, setSelectedOption] = useState(null);
+  const [inputValue, setInputValue] = useState('');
+  useOnClickOutside(wrapperElement, () => setIsOpen(false));
+  usePopupKeys(wrapperElement, () => setIsOpen(false));
+  const filterOptions = useDebouncedCallback(searchTerm => {
+    const matchingOptions = field.options ? field.options.filter(option => {
+      if (typeof option === 'string') {
+        return option.toLowerCase().includes(searchTerm);
+      }
+      if (typeof option.label === 'string') {
+        return option.label.toLowerCase().includes(searchTerm);
+      }
+      // For non-string labels, convert to JSON string and check
+      return JSON.stringify(option.label).toLowerCase().includes(searchTerm);
+    }) : [];
+    setSelectedOption(null);
+    setFilteredOptions(matchingOptions);
+    setIsOpen(true);
+    onInputChange(searchTerm);
+  }, debounceTime);
+  const handleInputChange = event => {
+    const newValue = event.target.value;
+    setInputValue(newValue);
+    filterOptions(newValue.toLowerCase());
+  };
+  const handleOptionSelect = option => {
+    const displayValue = typeof option === 'string' ? option : JSON.stringify(option.label);
+    setInputValue(displayValue);
+    setValue(field.name, displayValue);
+    setSelectedOption(option);
+    setIsOpen(false);
+    onOptionSelect(option);
+  };
+  const optionsContainerId = `${field.id || field.name}Options`;
+  const comboBoxFieldProps = useMemo(() => {
+    return {
+      field: {
+        ...field,
+        type: 'search',
+        'aria-autocomplete': 'both',
+        'aria-expanded': isOpen,
+        'aria-controls': optionsContainerId,
+        'aria-haspopup': 'listbox',
+        role: 'combobox',
+        onFocus: () => setIsOpen(true),
+        onChange: handleInputChange,
+        defaultValue: inputValue
+      },
+      label,
+      validation,
+      showSpinner,
+      customCssClasses,
+      customContent
+    };
+  }, [field, isOpen, optionsContainerId, validation, showSpinner, customCssClasses, customContent, handleInputChange, selectedOption]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: wrapperElement,
+    className: `autocompleteWrapper ${isOpen ? 'open' : 'closed'}`
+  }, /*#__PURE__*/React.createElement(InputText, comboBoxFieldProps), isOpen && filteredOptions && /*#__PURE__*/React.createElement("div", {
+    tabIndex: -1,
+    className: "autocompleteOptions"
+  }, filteredOptions.length === 0 ? /*#__PURE__*/React.createElement("div", {
+    "aria-selected": "false",
+    role: "listbox",
+    id: optionsContainerId
+  }, "No results found") : /*#__PURE__*/React.createElement("ul", {
+    className: "noBullet",
+    role: "listbox",
+    id: optionsContainerId
+  }, filteredOptions.map(option => {
+    const optionId = `${optionsContainerId}_${option}`;
+    return /*#__PURE__*/React.createElement("li", {
+      key: optionId,
+      "aria-selected": option === selectedOption ? 'true' : 'false',
+      role: "option",
+      "data-option": option
+    }, /*#__PURE__*/React.createElement("button", {
+      className: option === selectedOption ? 'selected' : '',
+      type: "button",
+      id: optionId,
+      onClick: () => handleOptionSelect(option)
+    }, typeof option === 'string' ? option : option.label));
+  }))));
+};
+export default Autocomplete;
+//# sourceMappingURL=Autocomplete.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/autocomplete/Autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.js","names":["React","useState","useRef","useMemo","useFormContext","useDebouncedCallback","useOnClickOutside","usePopupKeys","InputText","Autocomplete","field","label","validation","showSpinner","customCssClasses","customContent","onOptionSelect","onInputChange","debounceTime","setValue","wrapperElement","isOpen","setIsOpen","filteredOptions","setFilteredOptions","options","selectedOption","setSelectedOption","inputValue","setInputValue","filterOptions","searchTerm","matchingOptions","filter","option","toLowerCase","includes","JSON","stringify","handleInputChange","event","newValue","target","value","handleOptionSelect","displayValue","name","optionsContainerId","id","comboBoxFieldProps","type","role","onFocus","onChange","defaultValue","createElement","ref","className","tabIndex","length","map","optionId","key","onClick"],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/autocomplete/Autocomplete.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useRef, useMemo } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { ComboboxOption, FieldProps, FormFieldProps } from '../../../formFieldWrapper/formFieldProps';\nimport { useOnClickOutside, usePopupKeys } from '../../../../../../hooks';\n\nimport { InputText, InputTextProps } from '../text/InputText';\n\nimport './autocomplete.scss';\n\n\nexport interface ComboboxFieldProps extends React.InputHTMLAttributes<HTMLInputElement>, Omit<FormFieldProps, 'field'> {\n  field: Omit<FieldProps, 'type' | 'options'> & {\n    options?: ComboboxOption[] | string[];\n  };\n  /* eslint-disable-next-line no-unused-vars */\n  onOptionSelect?: (option: ComboboxOption | string) => void;\n  /* eslint-disable-next-line no-unused-vars */\n  onInputChange?: (inputValue: string) => void;\n  debounceTime?: number;\n}\n\nexport const Autocomplete: React.FC<ComboboxFieldProps> = (\n  {\n    field,\n    label,\n    validation,\n    showSpinner,\n    customCssClasses,\n    customContent,\n    onOptionSelect = () => {},\n    onInputChange = () => {},\n    debounceTime = 500,\n  }\n) => {\n  const { setValue } = useFormContext();\n\n  const wrapperElement = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [filteredOptions, setFilteredOptions] = useState<(string | ComboboxOption)[]>(field.options || []);\n  const [selectedOption, setSelectedOption] = useState<ComboboxOption | string | null>(null);\n  const [inputValue, setInputValue] = useState('');\n\n  useOnClickOutside(wrapperElement, () => setIsOpen(false));\n  usePopupKeys(wrapperElement, () => setIsOpen(false));\n\n  const filterOptions = useDebouncedCallback((searchTerm: string) => {\n    const matchingOptions: (string | ComboboxOption)[] = field.options ? field.options.filter((option) => {\n      if (typeof option === 'string') {\n        return option.toLowerCase().includes(searchTerm);\n      }\n      if (typeof option.label === 'string') {\n        return option.label.toLowerCase().includes(searchTerm);\n      }\n      // For non-string labels, convert to JSON string and check\n      return JSON.stringify(option.label).toLowerCase().includes(searchTerm);\n    }) : [];\n    setSelectedOption(null);\n    setFilteredOptions(matchingOptions);\n    setIsOpen(true);\n    onInputChange(searchTerm);\n  }, debounceTime);\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = event.target.value;\n    setInputValue(newValue);\n    filterOptions(newValue.toLowerCase());\n  };\n\n  const handleOptionSelect = (option: ComboboxOption | string) => {\n    const displayValue = typeof option === 'string' ? option : JSON.stringify(option.label);\n    setInputValue(displayValue);\n    setValue(field.name, displayValue);\n    setSelectedOption(option);\n    setIsOpen(false);\n    onOptionSelect(option);\n  };\n\n  const optionsContainerId = `${ field.id || field.name }Options`;\n\n  const comboBoxFieldProps: InputTextProps = useMemo(() => {\n    return {\n      field: {\n        ...field,\n        type: 'search',\n        'aria-autocomplete': 'both',\n        'aria-expanded': isOpen,\n        'aria-controls': optionsContainerId,\n        'aria-haspopup': 'listbox',\n        role: 'combobox',\n        onFocus: () => setIsOpen(true),\n        onChange: handleInputChange,\n        defaultValue: inputValue,\n      },\n      label,\n      validation,\n      showSpinner,\n      customCssClasses,\n      customContent,\n    };\n  }, [field, isOpen, optionsContainerId, validation, showSpinner, customCssClasses, customContent, handleInputChange, selectedOption]);\n  \n  return (\n    <div ref={ wrapperElement } className={ `autocompleteWrapper ${ isOpen ? 'open' : 'closed' }` }>\n      <InputText { ...comboBoxFieldProps } />\n\n      {\n        isOpen && filteredOptions && (\n          <div tabIndex={ -1 } className=\"autocompleteOptions\">\n            {\n              filteredOptions.length === 0 ?\n                (\n                  <div aria-selected=\"false\" role=\"listbox\" id={ optionsContainerId }>\n                    No results found\n                  </div>\n                )\n                :\n                (\n                  <ul className=\"noBullet\" role=\"listbox\" id={ optionsContainerId }>\n                    {\n                      filteredOptions.map((option) => {\n                        const optionId = `${ optionsContainerId }_${ option }`;\n\n                        return (\n                          <li\n                            key={ optionId }\n                            aria-selected={ option === selectedOption ? 'true' : 'false' }\n                            role=\"option\"\n                            data-option={ option }\n                          >\n                            <button className={ option === selectedOption ? 'selected' : '' } type=\"button\" id={ optionId } onClick={ () => handleOptionSelect(option) }>\n                              { typeof option === 'string' ? option : option.label }\n                            </button>\n                          </li>\n                        );\n                      })\n                    }\n                  </ul>\n                )\n            }\n          </div>\n        )\n      }\n    </div>\n  );\n};\n\nexport default Autocomplete;"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/autocomplete/autocomplete.css

@@ -0,0 +1,51 @@
+/* Popovers */
+/* BUTTONS */
+.autocompleteWrapper.open {
+  z-index: 10000;
+  position: relative;
+}
+.autocompleteWrapper .autocompleteOptions {
+  position: absolute;
+  min-width: 100%;
+  border: var(--autocompleteOptionsHolderBorder);
+  border-radius: var(--autocompleteHolderBorderRadius);
+  background: var(--autocompleteOptionsHolderBg);
+  box-shadow: var(--autocompleteOptionsHolderShadow);
+  box-sizing: border-box;
+}
+.autocompleteWrapper .autocompleteOptions ul {
+  display: flex;
+  flex-direction: column;
+  gap: var(--autocompleteOptionSpacing);
+}
+.autocompleteWrapper .autocompleteOptions ul li {
+  display: flex;
+}
+.autocompleteWrapper .autocompleteOptions ul li button {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  cursor: pointer;
+  font-weight: 500;
+  box-sizing: border-box;
+  column-gap: 10px;
+  row-gap: 10px;
+  display: flex;
+  flex: 1;
+  justify-content: flex-start;
+  min-width: 44px;
+  min-height: 44px;
+  color: var(--autocompleteOptionFg);
+  background: var(--autocompleteOptionBg);
+  border: var(--autocompleteOptionBorder);
+}
+.autocompleteWrapper .autocompleteOptions ul li button:hover {
+  color: var(--autocompleteOptionHoverFg);
+  background: var(--autocompleteOptionHoverBg);
+}
+.autocompleteWrapper .autocompleteOptions ul li button.selected {
+  color: var(--autocompleteOptionSelectedFg);
+  background: var(--autocompleteOptionSelectedBg);
+}

package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/InputCheckbox.js

@@ -0,0 +1,85 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { NoHookFormContext } from '../../../utilities/formUtilities';
+import { HookFormWrapper } from '../../../../hookFormWrapper/HookFormWrapper';
+import { FormFieldLabel } from '../../labels/FormFieldLabel';
+import { ValidationMessages } from '../../../../validation/ValidationMessages';
+import { Spinner } from '../../../../../design/spinner/Spinner';
+import { Icon } from '../../../../../design/icons/basicIcon/Icon';
+import './inputCheckbox.css';
+export const InputCheckbox = ({
+  label,
+  field: {
+    id,
+    name,
+    defaultChecked,
+    onBlur = () => {},
+    onChange = () => {},
+    onTouched = () => {}
+  },
+  validation,
+  showSpinner,
+  customCssClasses,
+  customContent
+}) => {
+  const [isTouched, setIsTouched] = useState(false);
+  const {
+    register,
+    getFieldState
+  } = useFormContext() || NoHookFormContext;
+  ;
+  const fieldState = getFieldState(name);
+  const wrapperCssClass = `formField checkBoxField ${customCssClasses?.wrapper || ''} ${isTouched ? 'touched' : ''}`;
+  const inputCssClass = `${customCssClasses?.input || ''}${fieldState?.invalid ? ' invalidField' : ''}`;
+  const isRequired = validation && typeof validation.required !== 'undefined';
+  const HandleOnBlur = event => {
+    const {
+      target
+    } = event;
+    setIsTouched(true);
+    if (target) {
+      onTouched();
+      onBlur(event);
+    }
+  };
+  const labelProps = {
+    ...label,
+    inputId: id,
+    isRequired,
+    customContent
+  };
+  const inputProps = {
+    type: 'checkbox',
+    id,
+    className: inputCssClass,
+    defaultChecked,
+    'aria-required': isRequired,
+    ...register(name, {
+      onChange,
+      onBlur: HandleOnBlur,
+      ...validation
+    })
+  };
+  return /*#__PURE__*/React.createElement(HookFormWrapper, null, /*#__PURE__*/React.createElement("div", {
+    className: wrapperCssClass
+  }, /*#__PURE__*/React.createElement("label", {
+    id: label.labelId || `${id}_label`,
+    className: `${customCssClasses?.label || ''} ${showSpinner ? 'withSpinner' : ''}`,
+    htmlFor: id
+  }, label.position === 'left' && /*#__PURE__*/React.createElement(FormFieldLabel, labelProps), /*#__PURE__*/React.createElement("div", {
+    className: "inputContainer"
+  }, /*#__PURE__*/React.createElement("input", inputProps), /*#__PURE__*/React.createElement("span", {
+    className: "checkboxIcons"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "checkbox-unchecked"
+  }), /*#__PURE__*/React.createElement(Icon, {
+    icon: "checkbox-checked"
+  }))), (!label?.position || label?.position === 'right') && /*#__PURE__*/React.createElement(FormFieldLabel, labelProps), showSpinner && /*#__PURE__*/React.createElement(Spinner, null), /*#__PURE__*/React.createElement(ValidationMessages, {
+    name: name,
+    validation: validation
+  }))));
+};
+export const CheckboxInput = props => /*#__PURE__*/React.createElement(InputCheckbox, props);
+//# sourceMappingURL=InputCheckbox.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/InputCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputCheckbox.js","names":["React","useState","useFormContext","NoHookFormContext","HookFormWrapper","FormFieldLabel","ValidationMessages","Spinner","Icon","InputCheckbox","label","field","id","name","defaultChecked","onBlur","onChange","onTouched","validation","showSpinner","customCssClasses","customContent","isTouched","setIsTouched","register","getFieldState","fieldState","wrapperCssClass","wrapper","inputCssClass","input","invalid","isRequired","required","HandleOnBlur","event","target","labelProps","inputId","inputProps","type","className","createElement","labelId","htmlFor","position","icon","CheckboxInput","props"],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/checkbox/InputCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { NoHookFormContext } from '../../../utilities/formUtilities';\nimport { HookFormWrapper } from '../../../../hookFormWrapper/HookFormWrapper';\nimport { FormFieldLabel } from '../../labels/FormFieldLabel';\nimport { ValidationMessages } from '../../../../validation/ValidationMessages';\nimport { Spinner } from '../../../../../design/spinner/Spinner';\nimport { Icon } from '../../../../../design/icons/basicIcon/Icon';\n\nimport { InputCheckboxProps } from './inputCheckboxProps';\n\nimport './inputCheckbox.scss';\n\nexport const InputCheckbox: React.FC<InputCheckboxProps> = (\n  {\n    label,\n    field: {\n      id,\n      name,\n      defaultChecked,\n      onBlur = () => {},\n      onChange = () => {},\n      onTouched = () => {}\n    },\n    validation,\n    showSpinner,\n    customCssClasses,\n    customContent\n  }\n) => {\n  const [isTouched, setIsTouched] = useState(false);\n  const { register, getFieldState } = useFormContext() || NoHookFormContext;;\n  const fieldState = getFieldState(name);\n\n  const wrapperCssClass = `formField checkBoxField ${ customCssClasses?.wrapper || '' } ${ isTouched ? 'touched' : '' }`;\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    setIsTouched(true);\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 inputProps = {\n    type: 'checkbox',\n    id,\n    className: inputCssClass,\n    defaultChecked,\n    'aria-required': isRequired,\n    ...register(\n      name,\n      {\n        onChange,\n        onBlur: HandleOnBlur,\n        ...validation\n      }\n    )\n  };\n\n  return (\n    <HookFormWrapper>\n      <div\n        className={ wrapperCssClass }\n      >\n        <label\n          id={ label.labelId || `${ id }_label` }\n          className={ `${ customCssClasses?.label || '' } ${ showSpinner ? 'withSpinner' : '' }` }\n          htmlFor={ id }\n        >\n\n          { label.position === 'left'\n            && <FormFieldLabel { ...labelProps } /> }\n\n          <div className=\"inputContainer\">\n            <input { ...inputProps } />\n            <span className=\"checkboxIcons\">\n              <Icon icon=\"checkbox-unchecked\" />\n              <Icon icon=\"checkbox-checked\" />\n            </span>\n          </div>\n\n          { (!label?.position || label?.position === 'right')\n            && <FormFieldLabel { ...labelProps } /> }\n\n          {\n            showSpinner && <Spinner />\n          }\n\n          <ValidationMessages name={ name } validation={ validation } />\n        </label>\n      </div>\n    </HookFormWrapper>\n  );\n};\n\nexport const CheckboxInput: React.FC<InputCheckboxProps> = (props) => <InputCheckbox { ...props } />;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/inputCheckbox.css

@@ -0,0 +1,42 @@
+/* Popovers */
+.checkBoxField label {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+}
+.checkBoxField label .labelText {
+  cursor: pointer;
+}
+.checkBoxField .inputContainer {
+  position: relative;
+  display: flex;
+  height: 100%;
+}
+.checkBoxField .inputContainer input[type=checkbox] {
+  opacity: 0.01;
+  position: absolute;
+  z-index: 2;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  left: 0;
+  top: 0;
+  margin: 0;
+}
+.checkBoxField .inputContainer input[type=checkbox] ~ .checkboxIcons .icon {
+  font-size: 24px;
+}
+.checkBoxField .inputContainer input[type=checkbox] ~ .checkboxIcons .icon-checkbox-unchecked {
+  display: block;
+}
+.checkBoxField .inputContainer input[type=checkbox] ~ .checkboxIcons .icon-checkbox-checked {
+  display: none;
+}
+.checkBoxField .inputContainer input[type=checkbox][checked] ~ .checkboxIcons .icon-checkbox-unchecked, .checkBoxField .inputContainer input[type=checkbox]:checked ~ .checkboxIcons .icon-checkbox-unchecked {
+  display: none;
+}
+.checkBoxField .inputContainer input[type=checkbox][checked] ~ .checkboxIcons .icon-checkbox-checked, .checkBoxField .inputContainer input[type=checkbox]:checked ~ .checkboxIcons .icon-checkbox-checked {
+  display: block;
+}

package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/inputCheckboxProps.js

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

package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/inputCheckboxProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputCheckboxProps.js","names":[],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/checkbox/inputCheckboxProps.ts"],"sourcesContent":["import { Message, Validate, ValidationRule } from 'react-hook-form';\nimport {\n  CustomContentProps,\n  CustomFieldCssClassesProps,\n  FieldProps,\n  FormFieldProps,\n  LabelProps\n} from '../../../formFieldWrapper/formFieldProps';\n\nexport interface InputCheckboxLabelProps extends Omit<LabelProps, 'hide' | 'position'> {\n  position?: 'left' | 'right';\n}\n\nexport interface InputCheckboxFieldProps extends Omit<FieldProps, 'type' | 'placeholder' | 'value' | 'defaultValue' | 'referenceDate' | 'includeEmptyOption' | 'options'> {\n  value: boolean | string;\n  defaultChecked?: boolean;\n  defaultValue?: boolean | string | number | readonly string[];\n}\n\nexport interface InputCheckboxValidationProps<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 InputCheckboxProps extends Omit<FormFieldProps, 'label' | 'field' | 'layout' | 'validation'> {\n  label: InputCheckboxLabelProps,\n  field: InputCheckboxFieldProps,\n  validation?: InputCheckboxValidationProps;\n  showSpinner?: boolean;\n  customCssClasses?: CustomFieldCssClassesProps;\n  customContent?: CustomContentProps;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/date/DateInput.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormField } from '../../../formFieldWrapper/FormField';
+export const DateInput = props => {
+  const {
+    field
+  } = props;
+  return /*#__PURE__*/React.createElement(FormField, _extends({}, props, {
+    field: {
+      type: 'date',
+      ...field
+    }
+  }));
+};
+export default {
+  DateInput
+};
+//# sourceMappingURL=DateInput.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/date/DateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.js","names":["React","FormField","DateInput","props","field","createElement","_extends","type"],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/date/DateInput.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField } from '../../../formFieldWrapper/FormField';\nimport { FormComponentProps } from '../../../../formFields/subComponents/InputVariants';\n\nexport const DateInput: React.FC<FormComponentProps> = (props) => {\n  const { field } = props;\n  return (\n    <FormField {\n      ...{\n        ...props,\n        field: {\n          type: 'date',\n          ...field\n        }\n      }\n    }\n    />\n  );\n};\n\nexport default { DateInput };"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,qCAAqC;AAG/D,OAAO,MAAMC,SAAuC,GAAIC,KAAK,IAAK;EAChE,MAAM;IAAEC;EAAM,CAAC,GAAGD,KAAK;EACvB,oBACEH,KAAA,CAAAK,aAAA,CAACJ,SAAS,EAAAK,QAAA,KAEHH,KAAK;IACRC,KAAK,EAAE;MACLG,IAAI,EAAE,MAAM;MACZ,GAAGH;IACL;EAAC,EAGJ,CAAC;AAEN,CAAC;AAED,eAAe;EAAEF;AAAU,CAAC","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/date/InputDate.js

@@ -0,0 +1,63 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { InputText } from '../text/InputText';
+import { NativeDateCalendarPopupTrigger } from './NativeDateCalendarPopupTrigger';
+import { dateToShortReadableDate } from '../../../../../../helpers/dateHelpers';
+export const InputDate = props => {
+  const {
+    field,
+    validation,
+    customContent
+  } = props;
+  const minDate = field.min;
+  const maxDate = field.max;
+  const minDateMessage = () => {
+    if (!minDate) {
+      return '';
+    }
+    return typeof validation?.min === 'string' ? validation.min : `Please select a date on or after ${dateToShortReadableDate(minDate)}.`;
+  };
+  const maxDateMessage = () => {
+    if (!maxDate) {
+      return '';
+    }
+    return typeof validation?.max === 'string' ? validation.max : `Please select a date on or before ${dateToShortReadableDate(maxDate)}.`;
+  };
+
+  // Use the min max logic above but allow them to override with custom logic if they prefer
+  const customValidation = {
+    ...validation,
+    ...(minDate && {
+      min: {
+        value: minDate,
+        message: minDateMessage()
+      }
+    }),
+    ...(maxDate && {
+      max: {
+        value: maxDate,
+        message: maxDateMessage()
+      }
+    })
+  };
+  const fieldProps = {
+    ...field,
+    type: 'date'
+  };
+  const adjustedProps = {
+    ...props,
+    field: fieldProps,
+    validation: customValidation
+  };
+  return /*#__PURE__*/React.createElement(InputText, _extends({}, adjustedProps, {
+    customContent: {
+      ...customContent,
+      postField: /*#__PURE__*/React.createElement(NativeDateCalendarPopupTrigger, {
+        dateInputElementId: field.id
+      })
+    }
+  }));
+};
+//# sourceMappingURL=InputDate.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/date/InputDate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputDate.js","names":["_extends","React","InputText","NativeDateCalendarPopupTrigger","dateToShortReadableDate","InputDate","props","field","validation","customContent","minDate","min","maxDate","max","minDateMessage","maxDateMessage","customValidation","value","message","fieldProps","type","adjustedProps","createElement","postField","dateInputElementId","id"],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/date/InputDate.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { InputText, InputTextProps } from '../text/InputText';\nimport { NativeDateCalendarPopupTrigger } from './NativeDateCalendarPopupTrigger';\nimport { dateToShortReadableDate } from '../../../../../../helpers/dateHelpers';\n\nexport const InputDate: React.FC<InputTextProps> = (props) => {\n  const {\n    field,\n    validation,\n    customContent\n  } = props;\n\n  const minDate = field.min;\n  const maxDate = field.max;\n\n  const minDateMessage = () => {\n    if (!minDate) {\n      return '';\n    }\n    return typeof validation?.min === 'string' ? validation.min : `Please select a date on or after ${ dateToShortReadableDate(minDate) }.`;\n  };\n\n  const maxDateMessage = () => {\n    if (!maxDate) {\n      return '';\n    }\n    return typeof validation?.max === 'string' ? validation.max : `Please select a date on or before ${ dateToShortReadableDate(maxDate) }.`;\n  };\n\n  // Use the min max logic above but allow them to override with custom logic if they prefer\n  const customValidation = {\n    ...validation,\n    ...(minDate && {\n      min: {\n        value: minDate,\n        message: minDateMessage(),\n      }\n    }),\n    ...(maxDate && {\n      max: {\n        value: maxDate,\n        message: maxDateMessage(),\n      }\n    })\n  };\n\n  const fieldProps = {\n    ...field,\n    type: 'date',\n  };\n\n  const adjustedProps = {\n    ...props,\n    field: fieldProps,\n    validation: customValidation\n  };\n\n  return (\n    <InputText\n      { ...adjustedProps }\n      customContent={\n        {\n          ...customContent,\n          postField: <NativeDateCalendarPopupTrigger dateInputElementId={ field.id } />\n        }\n      }\n    />\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAwB,mBAAmB;AAC7D,SAASC,8BAA8B,QAAQ,kCAAkC;AACjF,SAASC,uBAAuB,QAAQ,uCAAuC;AAE/E,OAAO,MAAMC,SAAmC,GAAIC,KAAK,IAAK;EAC5D,MAAM;IACJC,KAAK;IACLC,UAAU;IACVC;EACF,CAAC,GAAGH,KAAK;EAET,MAAMI,OAAO,GAAGH,KAAK,CAACI,GAAG;EACzB,MAAMC,OAAO,GAAGL,KAAK,CAACM,GAAG;EAEzB,MAAMC,cAAc,GAAGA,CAAA,KAAM;IAC3B,IAAI,CAACJ,OAAO,EAAE;MACZ,OAAO,EAAE;IACX;IACA,OAAO,OAAOF,UAAU,EAAEG,GAAG,KAAK,QAAQ,GAAGH,UAAU,CAACG,GAAG,GAAG,oCAAqCP,uBAAuB,CAACM,OAAO,CAAC,GAAI;EACzI,CAAC;EAED,MAAMK,cAAc,GAAGA,CAAA,KAAM;IAC3B,IAAI,CAACH,OAAO,EAAE;MACZ,OAAO,EAAE;IACX;IACA,OAAO,OAAOJ,UAAU,EAAEK,GAAG,KAAK,QAAQ,GAAGL,UAAU,CAACK,GAAG,GAAG,qCAAsCT,uBAAuB,CAACQ,OAAO,CAAC,GAAI;EAC1I,CAAC;;EAED;EACA,MAAMI,gBAAgB,GAAG;IACvB,GAAGR,UAAU;IACb,IAAIE,OAAO,IAAI;MACbC,GAAG,EAAE;QACHM,KAAK,EAAEP,OAAO;QACdQ,OAAO,EAAEJ,cAAc,CAAC;MAC1B;IACF,CAAC,CAAC;IACF,IAAIF,OAAO,IAAI;MACbC,GAAG,EAAE;QACHI,KAAK,EAAEL,OAAO;QACdM,OAAO,EAAEH,cAAc,CAAC;MAC1B;IACF,CAAC;EACH,CAAC;EAED,MAAMI,UAAU,GAAG;IACjB,GAAGZ,KAAK;IACRa,IAAI,EAAE;EACR,CAAC;EAED,MAAMC,aAAa,GAAG;IACpB,GAAGf,KAAK;IACRC,KAAK,EAAEY,UAAU;IACjBX,UAAU,EAAEQ;EACd,CAAC;EAED,oBACEf,KAAA,CAAAqB,aAAA,CAACpB,SAAS,EAAAF,QAAA,KACHqB,aAAa;IAClBZ,aAAa,EACX;MACE,GAAGA,aAAa;MAChBc,SAAS,eAAEtB,KAAA,CAAAqB,aAAA,CAACnB,8BAA8B;QAACqB,kBAAkB,EAAGjB,KAAK,CAACkB;MAAI,CAAE;IAC9E;EACD,EACF,CAAC;AAEN,CAAC","ignoreList":[]}