@agilant/toga-blox 1.0.92 → 1.0.94

package/dist/components/BaseInput/BaseInput.types.d.ts

@@ -0,0 +1,139 @@
+export interface OptionType {
+    name: string;
+    uuid: string;
+}
+export type NestedObject = {
+    [key: string]: any;
+};
+export interface Field {
+    uuid: string;
+    label?: string;
+    valueKey?: string;
+    inputType?: string;
+    separatorType?: string;
+    labelTextClasses?: string;
+    valueTextClasses?: string;
+    hasValueLeftIcon?: string;
+    hasValueRightIcon?: string;
+    detailGridClasses?: string;
+    inputGridClasses?: string;
+    specificInputContainerClasses?: string;
+    isBoolean?: boolean;
+    isSearchable?: boolean;
+    truthyValue?: string;
+    falsyValue?: string;
+    isConcatenated?: string;
+    isEditOnly?: boolean;
+    inputHasLeftIcon?: string;
+    inputIconClasses?: string;
+    inputClasses?: string;
+    placeholder?: string;
+    textAreaHeight?: string;
+    hasTypeCheck?: string;
+    options?: [];
+    inputContainerWidth?: string;
+    inputWidth?: string;
+    inputDirtyFieldClasses?: string;
+    inputLabel?: string;
+    characterLimit?: number;
+    isRequired?: boolean;
+    afterInputText?: string;
+    isDoubleValue?: boolean;
+    noEditClasses?: string;
+    hasSetHeight?: boolean;
+    useDefaultValue?: boolean;
+    saveUuid?: boolean;
+    requireUuidField?: boolean;
+    afterInputTextClasses?: string;
+    isPhoneNumber?: boolean;
+    isCurrency?: boolean;
+    useMenuList?: boolean;
+    showRequiredIndicator?: boolean;
+    disabledSelectText?: string;
+    inputAndLabelContainerClasses?: string;
+    valueType?: string;
+}
+export interface BaseInputTypes {
+    field?: Field;
+    dataItem?: string;
+    mobileBreakpoint?: string;
+    onInputChange?: (inputKey: string, value: any) => void;
+    inputFontColor?: string;
+    inputBorderColor?: string;
+    inputBorderHoverColor?: string;
+    inputBorderFocusColor?: string;
+    dropDownInputBorderFocusColor?: string;
+    dropdownIndicatorClasses?: string;
+    checkboxBackgroundColor?: string;
+    checkboxBorderColorOnChecked?: string;
+    menuBackgroundColor?: string;
+    menuBorderColor?: string;
+    options?: any;
+    isRequired?: boolean;
+    menuPlacement?: string;
+    useDefaultValue?: boolean;
+    inputTextSize?: string;
+    uuid?: string | null;
+    hasParentControl?: any;
+    dynamicDefaultValue?: string;
+    isArrayValue?: boolean;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    hasDirtyValidation?: boolean;
+    allowTextWrap?: boolean;
+    labelTextClasses?: string;
+    inputAndLabelContainerClasses?: string;
+    inputLabel?: string;
+    valueKey: string;
+    requireUuidField?: boolean;
+    hasTypeCheck?: string;
+    inputClasses?: string;
+    dropDownInputBorderHoverColor?: string;
+    afterInputTextClasses?: string;
+    afterInputText?: string;
+    isDoubleValue?: string;
+    isSearchable?: boolean;
+    placeholder?: string;
+    valueType?: string;
+    inputContainerClasses?: string;
+    showRequiredIndicator?: boolean;
+    inputHasLeftIcon?: string;
+    inputType?: string;
+    characterLimit?: number;
+    disabledSelectContainerClasses?: string;
+    disabledSelectText?: string;
+    textAreaHeight?: string;
+    colSpan?: string;
+    dropdownIndicatorColor?: string;
+    onSearchChange?: (inputKey: string) => void;
+    isSearchLoading?: boolean;
+    toggleTextPosition?: "left" | "right" | "top" | "bottom" | "none";
+    toggleTextSize?: string;
+    toggleActiveColorBackground?: string;
+    toggleInactiveColorBackground?: string;
+    toggleActiveColorBorder?: string;
+    toggleInactiveColorBorder?: string;
+    toggleActiveTextColor?: string;
+    toggleInactiveTextColor?: string;
+    toggleAdditionalClasses?: string;
+    toggleHasDivider?: boolean;
+    toggleFontFamily?: string;
+    toggleActiveLabel?: string;
+    toggleInactiveLabel?: string;
+    toggleSmallToggle?: boolean;
+    toggleBorderStyle?: boolean;
+    extraSmallTextAreaClasses?: string;
+    smallTextAreaClasses?: string;
+    largeTextAreaClasses?: string;
+    controlClasses?: string;
+    selectInputDirtyFieldClasses?: string;
+    selectInputErrorFieldClasses?: string;
+    menuClasses?: string;
+    textDirtyFieldClasses?: string;
+    textErrorFieldClasses?: string;
+    textAreaDirtyFieldClasses?: string;
+    textAreaErrorFieldClasses?: string;
+    radioBorderColorOnChecked?: string;
+    radioBackgroundColor?: string;
+    containerClasses?: string;
+    radioOptionTextClasses?: string;
+}

package/dist/components/BaseInput/BaseInput.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/BaseInput/BaseMultiSelect.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { OptionType } from "./BaseInput.types";
+interface BaseMultiSelectProps {
+    control: any;
+    defaultValue: OptionType[];
+    valueKey: string;
+    inputContainerClasses: string;
+    isRequired: boolean;
+    options: OptionType[];
+    isSearchable: boolean;
+    placeholder: string;
+    dropdownIndicatorColor: string;
+    useDefaultValue: boolean;
+    input: {
+        inputWidth: string;
+    };
+    inputTextSize: string;
+    controlClasses: string;
+    dropdownIndicatorClasses: string;
+    inputBorderColor: string;
+    dropDownInputBorderFocusColor: string;
+    dropDownInputBorderHoverColor: string;
+    selectInputDirtyFieldClasses: string;
+    selectInputErrorFieldClasses: string;
+    isFieldDirty: boolean;
+    isFieldError: boolean;
+    hasDirtyValidation: boolean;
+    errorMessage: string;
+    inputFontColor: string;
+    menuClasses: string;
+}
+declare const BaseMultiSelect: React.FC<BaseMultiSelectProps>;
+export default BaseMultiSelect;

package/dist/components/BaseInput/BaseMultiSelect.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import Select from "react-select";
+import Option from "./components/Option";
+import DropDownIndicator from "./components/DropDownIndicator";
+import classNames from "classnames";
+import BaseErrorMessage from "./components/BaseErrorMessage";
+import MultiValueRemove from "./components/MultiValueRemove";
+const BaseMultiSelect = (props) => {
+    const { control, defaultValue, valueKey, inputContainerClasses, isRequired, options, isSearchable, placeholder, dropdownIndicatorColor, useDefaultValue, input, inputTextSize, controlClasses, dropdownIndicatorClasses, inputBorderColor, dropDownInputBorderFocusColor, dropDownInputBorderHoverColor, selectInputDirtyFieldClasses, selectInputErrorFieldClasses, isFieldDirty, isFieldError, hasDirtyValidation, errorMessage, inputFontColor, menuClasses, } = props;
+    return (_jsxs("div", { className: `${inputContainerClasses}`, children: [_jsx(Controller, { defaultValue: defaultValue, name: valueKey, rules: {
+                    required: isRequired
+                        ? {
+                            value: true,
+                            message: `Required field.`,
+                        }
+                        : false,
+                }, control: control, render: ({ field, }) => {
+                    const selectedOptions = Array.isArray(field.value)
+                        ? field.value.map((val) => options.find((option) => option.uuid === val.uuid))
+                        : [];
+                    return (_jsx(Select, { isSearchable: isSearchable, id: valueKey, unstyled: true, placeholder: placeholder, ...field, isMulti: true, components: {
+                            DropdownIndicator: (props) => (_jsx(DropDownIndicator, { ...props, className: dropdownIndicatorColor })),
+                            Option: (props) => (_jsx(Option, { ...props, isMulti: true })),
+                            MultiValueRemove: (props) => (_jsx(MultiValueRemove, { ...props })),
+                            ClearIndicator: () => null,
+                        }, hideSelectedOptions: true, closeMenuOnSelect: false, options: Array.isArray(options) ? options : [], getOptionValue: (option) => option.uuid, getOptionLabel: (option) => option.name, value: useDefaultValue
+                            ? selectedOptions || null
+                            : undefined, onChange: (selectedValues) => {
+                            if (selectedValues === null) {
+                                field.onChange(null);
+                            }
+                            else {
+                                field.onChange(selectedValues);
+                                const values = selectedValues
+                                    ? selectedValues.map((option) => option.value)
+                                    : [];
+                            }
+                        }, className: `${input.inputWidth} ${inputTextSize}`, classNames: {
+                            control: ({ isFocused }) => classNames(controlClasses, isFieldDirty &&
+                                !isFocused &&
+                                !isFieldError &&
+                                hasDirtyValidation
+                                ? selectInputDirtyFieldClasses
+                                : isFieldError &&
+                                    isFieldDirty &&
+                                    !isFocused &&
+                                    hasDirtyValidation
+                                    ? selectInputErrorFieldClasses
+                                    : isFieldDirty
+                                        ? selectInputDirtyFieldClasses
+                                        : inputBorderColor, isFocused &&
+                                `border-1 ${dropDownInputBorderFocusColor}`, !isFocused &&
+                                `${dropDownInputBorderHoverColor}`),
+                            dropdownIndicator: ({ isFocused }) => classNames(dropdownIndicatorClasses, isFocused
+                                ? "text-neutral-600"
+                                : "text-neutral-200", "", isFocused
+                                ? "hover:text-neutral-800"
+                                : "hover:text-neutral-400"),
+                            input: () => classNames(inputFontColor, "p-0"),
+                            menu: () => classNames(menuClasses),
+                            placeholder: () => classNames("text-gray-500", "text-nowrap", "truncate"),
+                            valueContainer: () => classNames("py-0.5", "px-2"),
+                            multiValue: () => classNames("rounded-full", "bg-blue-500", "text-white", "text-xs", "px-2", "py-1", "mr-1", "my-0.5", "items-center"),
+                        } }));
+                } }), errorMessage && _jsx(BaseErrorMessage, { errorMessage: errorMessage })] }));
+};
+export default BaseMultiSelect;

package/dist/components/BaseInput/BaseRadio.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+interface BaseRadioInputProps {
+    control: any;
+    valueKey: string;
+    defaultValue: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    radioSize?: string;
+    innerCircleSize?: string;
+    radioBorderColorOnChecked?: string;
+    radioBackgroundColor?: string;
+    radioOptionTextClasses?: string;
+    containerClasses?: string;
+}
+declare const BaseRadioInput: React.FC<BaseRadioInputProps>;
+export default BaseRadioInput;

package/dist/components/BaseInput/BaseRadio.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+const BaseRadioInput = (props) => {
+    const { control, valueKey, defaultValue, options, radioSize = "h-4 w-4", innerCircleSize = "h-1.5 w-1.5", radioBorderColorOnChecked = "checked:border-blue-600", radioBackgroundColor = "checked:bg-blue-600", radioOptionTextClasses = "text-sm text-gray-800", containerClasses = "flex flex-col space-y-2", } = props;
+    return (_jsx(Controller, { name: valueKey, control: control, defaultValue: defaultValue, render: ({ field }) => (_jsx("div", { className: containerClasses, children: options.map((option) => (_jsxs("label", { className: "flex items-center cursor-pointer space-x-2", children: [_jsxs("div", { className: `relative flex items-center justify-center ${radioSize}`, children: [_jsx("input", { type: "radio", className: `peer ${radioSize} cursor-pointer transition-all appearance-none rounded-full border border-gray-400 ${radioBorderColorOnChecked} ${radioBackgroundColor}`, id: `${valueKey}-${option.value}`, value: option.value, checked: field.value === option.value, onChange: () => field.onChange(option.value) }), _jsx("span", { className: "absolute inset-0 flex items-center justify-center peer-checked:opacity-100 peer-checked:scale-100 opacity-0 scale-0 transition-transform duration-150 ease-in-out", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: `${innerCircleSize} text-white`, viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", strokeWidth: "1", children: _jsx("circle", { cx: "10", cy: "10", r: "7" }) }) })] }), _jsx("span", { className: radioOptionTextClasses, children: option.label })] }, option.value))) })) }));
+};
+export default BaseRadioInput;

package/dist/components/BaseInput/BaseSelect.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import { OptionType } from "./BaseInput.types";
+interface BaseSelectProps {
+    inputContainerClasses?: string;
+    inputClasses?: string;
+    control: any;
+    isRequired?: boolean;
+    valueKey: string;
+    uuid?: string;
+    options: OptionType[];
+    errorMessage?: string;
+    isFieldDirty?: boolean;
+    isFieldError?: boolean;
+    dropdownIndicatorClasses?: string;
+    dropdownIndicatorColor?: string;
+    dropDownInputBorderFocusColor?: string;
+    dropDownInputBorderHoverColor?: string;
+    inputBorderColor?: string;
+    inputBorderHoverColor?: string;
+    selectInputDirtyFieldClasses?: string;
+    selectInputErrorFieldClasses?: string;
+    controlClasses?: string;
+    menuBackgroundColor?: string;
+    menuBorderColor?: string;
+    inputFontColor?: string;
+    selectRef?: React.RefObject<any>;
+    handleInputChange?: (inputValue: string) => void;
+    hasParentControl?: any;
+    isDoubleValue?: boolean;
+    defaultValue?: any;
+    isSearchable?: boolean;
+    isSearchLoading?: boolean;
+    validMenuPlacement?: "auto" | "bottom" | "top";
+    hasDirtyValidation?: boolean;
+    requireUuidField?: boolean;
+    placeholder?: string;
+    getValues: (name: string) => any;
+    setValue: (name: string, value: any) => void;
+}
+declare const BaseSelect: React.FC<BaseSelectProps>;
+export default BaseSelect;

package/dist/components/BaseInput/BaseSelect.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Controller } from "react-hook-form";
+import Select from "react-select";
+import Option from "./components/Option";
+import SingleValue from "./components/SingleValue";
+import DropDownIndicator from "./components/DropDownIndicator";
+import classNames from "classnames";
+import BaseErrorMessage from "./components/BaseErrorMessage";
+const BaseSelect = (props) => {
+    const { inputContainerClasses = "text-left relative", inputClasses, control, isRequired, valueKey, uuid, options, errorMessage, isFieldDirty, isFieldError, dropdownIndicatorClasses, dropdownIndicatorColor, dropDownInputBorderFocusColor, dropDownInputBorderHoverColor, inputBorderColor, selectInputDirtyFieldClasses, selectInputErrorFieldClasses, controlClasses = "border-1 border-gray-200", menuBackgroundColor = "bg-white", menuBorderColor = "border-gray-200", inputFontColor = "text-gray-800", selectRef = React.createRef(), handleInputChange = () => { }, hasParentControl, isDoubleValue = false, defaultValue, isSearchable = true, isSearchLoading = false, validMenuPlacement = "auto", hasDirtyValidation = true, requireUuidField = false, placeholder = "Select", getValues, setValue, } = props;
+    return (options && (_jsxs("div", { className: `${inputContainerClasses} `, children: [_jsx(Controller, { defaultValue: defaultValue, name: `${requireUuidField ? uuid : valueKey}`, rules: {
+                    ...(isRequired
+                        ? {
+                            required: {
+                                value: true,
+                                message: `Required field.`,
+                            },
+                        }
+                        : {}),
+                }, control: hasParentControl ? hasParentControl : control, render: ({ field }) => {
+                    return (_jsx(Select, { menuPlacement: validMenuPlacement, id: valueKey, unstyled: true, isClearable: true, closeMenuOnSelect: true, ref: selectRef, maxMenuHeight: 160, placeholder: placeholder, isSearchable: isSearchable, isLoading: isSearchLoading, onInputChange: handleInputChange, components: {
+                            DropdownIndicator: (props) => (_jsx(DropDownIndicator, { ...props, className: dropdownIndicatorColor })),
+                            SingleValue: (props) => (_jsx(SingleValue, { ...props, isDoubleValue: isDoubleValue })),
+                            Option: (props) => (_jsx(Option, { ...props, isMulti: false, selectedOption: getValues(valueKey), isDoubleValue: isDoubleValue })),
+                        }, className: `${inputClasses}`, classNames: {
+                            clearIndicator: ({ isFocused }) => classNames(isFocused
+                                ? "text-neutral-600"
+                                : "text-neutral-200", isFocused
+                                ? "hover:text-neutral-800"
+                                : "hover:text-neutral-400"),
+                            control: ({ isFocused }) => classNames(isDoubleValue ? "h-[50px]" : "", controlClasses, isFieldDirty &&
+                                !isFocused &&
+                                hasDirtyValidation &&
+                                !isFieldError
+                                ? selectInputDirtyFieldClasses
+                                : isFieldError &&
+                                    isFieldDirty &&
+                                    hasDirtyValidation &&
+                                    !isFocused
+                                    ? selectInputErrorFieldClasses
+                                    : isFieldDirty
+                                        ? selectInputDirtyFieldClasses
+                                        : inputBorderColor, isFocused &&
+                                `border-1 ${dropDownInputBorderFocusColor}`, !isFocused &&
+                                `border-transparent ${dropDownInputBorderHoverColor}`),
+                            dropdownIndicator: ({ isFocused }) => classNames(dropdownIndicatorClasses, "text-gray-800", isFocused
+                                ? "text-neutral-600"
+                                : dropdownIndicatorColor, isFocused
+                                ? "hover:text-neutral-800"
+                                : dropdownIndicatorColor),
+                            input: () => classNames(inputFontColor, "p-0"),
+                            menu: () => classNames("rounded border-1 shadow-md", menuBackgroundColor, menuBorderColor, "overflow-x-hidden"),
+                            menuList: () => classNames("overflow-y-scroll", "overflow-x-hidden"),
+                            placeholder: () => classNames("text-gray-800", "text-nowrap", "truncate", "text-sm"),
+                            valueContainer: () => classNames("py-0.5", "px-2"),
+                        }, getOptionValue: (option) => option.uuid, getOptionLabel: (option) => option.name, options: options, value: options.find((option) => field.value &&
+                            option.uuid === field.value.uuid &&
+                            (isDoubleValue ||
+                                option._name ===
+                                    field.value._name)) || null, onChange: (selectedOption) => {
+                            if (selectedOption === null) {
+                                field.onChange(null);
+                            }
+                            else {
+                                if (!selectedOption.uuid ||
+                                    !selectedOption.name) {
+                                    return;
+                                }
+                                const selectedValue = {
+                                    uuid: selectedOption.uuid,
+                                    name: selectedOption.name,
+                                };
+                                setValue(valueKey, selectedValue);
+                                field.onChange(selectedValue);
+                            }
+                            if (selectRef.current) {
+                                selectRef.current.blur();
+                            }
+                        } }));
+                } }), errorMessage && (_jsx(BaseErrorMessage, { errorMessage: errorMessage, containerClasses: "flex items-start justify-start" }))] })));
+};
+export default BaseSelect;

package/dist/components/BaseInput/BaseTextInput.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+interface BaseTextInputProps {
+    inputBorderColor?: string;
+    inputBorderHoverColor?: string;
+    inputBorderFocusColor?: string;
+    uuid: string;
+    defaultValue: any;
+    control: any;
+    onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+    inputContainerClasses?: string;
+    inputHasLeftIcon?: string;
+    isRequired?: boolean;
+    showRequiredIndicator?: boolean;
+    inputClasses?: string;
+    valueType?: string;
+    valueKey: string;
+    requireUuidField?: boolean;
+    hasTypeCheck?: string;
+    placeholder?: string;
+    errorMessage?: string;
+    isFieldDirty?: boolean;
+    isFieldError?: boolean;
+    textInputDirtyFieldClasses?: string;
+    textInputErrorFieldClasses?: string;
+}
+declare const BaseTextInput: React.FC<BaseTextInputProps>;
+export default BaseTextInput;

package/dist/components/BaseInput/BaseTextInput.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+import BaseErrorMessage from "./components/BaseErrorMessage";
+import formatPhoneNumber from "../../utils/formatePhoneNumber";
+const BaseTextInput = (props) => {
+    const { inputBorderColor = "border-gray-200", inputBorderHoverColor = "hover:border-1 hover:border-black", inputBorderFocusColor = "focus:border-primary-600", uuid, defaultValue, control, onBlur, inputContainerClasses = "text-left relative", inputHasLeftIcon, isRequired, inputClasses, valueType, valueKey, requireUuidField, hasTypeCheck, placeholder, errorMessage, isFieldDirty, isFieldError, textInputDirtyFieldClasses, textInputErrorFieldClasses, } = props;
+    return (_jsxs("div", { className: `w-full  ${inputHasLeftIcon ? "relative block" : ""} ${inputContainerClasses}  cursor-pointer`, children: [inputHasLeftIcon && (_jsx("div", { className: `pointer-events-none cursor-none text-xs text-navy-300 absolute top-[12px] left-2`, children: getFontAwesomeIcon(inputHasLeftIcon, "solid") })), _jsx(Controller, { name: `${requireUuidField ? uuid : valueKey}`, control: control, defaultValue: defaultValue, rules: {
+                    ...(isRequired
+                        ? {
+                            required: {
+                                value: true,
+                                message: `Required field.`,
+                            },
+                        }
+                        : {}),
+                    ...(hasTypeCheck === "number"
+                        ? {
+                            pattern: {
+                                value: /^[0-9]*\.?[0-9]*$/,
+                                message: `Only numbers allowed.`,
+                            },
+                        }
+                        : {}),
+                }, render: ({ field }) => (_jsx("input", { ...field, id: valueKey, type: hasTypeCheck === "number" ? "number" : "text", className: `h-38px px-2
+													${inputClasses}
+													${inputBorderHoverColor}
+													${inputBorderFocusColor}
+													 ${isFieldDirty &&
+                        !isFieldError
+                        ? textInputDirtyFieldClasses
+                        : (isFieldError &&
+                            isFieldDirty) ||
+                            (isFieldError &&
+                                !isFieldDirty)
+                            ? textInputErrorFieldClasses
+                            : inputBorderColor} `, placeholder: placeholder, onFocus: (e) => e.target.select(), onBlur: onBlur, onChange: (e) => {
+                        let value = e.target.value;
+                        if (valueType === "phone") {
+                            value = formatPhoneNumber(value);
+                        }
+                        field.onChange(value);
+                    } })) }), errorMessage && (_jsx(BaseErrorMessage, { errorMessage: errorMessage, containerClasses: "text-left" }))] }));
+};
+export default BaseTextInput;

package/dist/components/BaseInput/BaseTextareaInput.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+interface BaseTextareaInputProps {
+    input: any;
+    inputTextSize: string;
+    watch: (name: string) => any;
+    control: any;
+    defaultValue: string;
+    valueKey: string;
+    errorMessage?: string;
+    isFieldDirty: boolean;
+    isFieldError: boolean;
+    placeholder?: string;
+    characterLimit?: number;
+    textAreaHeight?: "small" | "large" | "extraSmall";
+    textAreaInputDirtyFieldClasses?: string;
+    textAreaInputErrorFieldClasses?: string;
+    smallTextAreaClasses?: string;
+    largeTextAreaClasses?: string;
+    extraSmallTextAreaClasses?: string;
+    inputContainerClasses?: string;
+    inputFontColor?: string;
+    inputBorderColor?: string;
+    inputBorderHoverColor?: string;
+    inputBorderFocusColor?: string;
+}
+declare const BaseTextareaInput: React.FC<BaseTextareaInputProps>;
+export default BaseTextareaInput;

package/dist/components/BaseInput/BaseTextareaInput.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import BaseErrorMessage from "./components/BaseErrorMessage";
+import CharacterLimitMessage from "./components/CharacterLimitMessage";
+const BaseTextareaInput = (props) => {
+    const { input, inputTextSize, watch, control, defaultValue, valueKey, errorMessage, isFieldDirty, isFieldError, placeholder, characterLimit, textAreaHeight, textAreaInputDirtyFieldClasses, textAreaInputErrorFieldClasses, smallTextAreaClasses, largeTextAreaClasses, extraSmallTextAreaClasses, inputContainerClasses = "text-left relative", inputFontColor = "text-gray-800", inputBorderColor = "border-gray-200", inputBorderHoverColor = "hover:border-1 hover:border-black", inputBorderFocusColor = "focus:border-primary-600", } = props;
+    return (_jsx("div", { className: `${inputContainerClasses}`, children: _jsx(Controller, { control: control, name: valueKey, defaultValue: defaultValue, render: ({ field }) => {
+                const textAreaValue = watch(valueKey);
+                const characterCount = textAreaValue
+                    ? textAreaValue.length
+                    : 0;
+                return (_jsxs("div", { className: "w-full", children: [_jsx("div", { className: `w-full flex`, children: _jsx("textarea", { ...field, id: valueKey, placeholder: placeholder, value: field.value || "", className: `p-1 border-1  ${inputFontColor}
+																${input.inputClasses}
+																 ${inputBorderHoverColor}
+																${inputBorderFocusColor} ${inputTextSize}
+																${textAreaHeight ===
+                                    "small"
+                                    ? smallTextAreaClasses
+                                    : textAreaHeight ===
+                                        "large"
+                                        ? largeTextAreaClasses
+                                        : extraSmallTextAreaClasses}
+																${isFieldDirty &&
+                                    !isFieldError
+                                    ? textAreaInputDirtyFieldClasses
+                                    : (isFieldError &&
+                                        isFieldDirty) ||
+                                        (isFieldError &&
+                                            !isFieldDirty)
+                                        ? textAreaInputErrorFieldClasses
+                                        : inputBorderColor}`, onFocus: (e) => e.target.select() }) }), _jsxs("div", { className: `flex w-full ${characterLimit && !isFieldError
+                                ? "items-end justify-end"
+                                : "justify-between"}`, children: [errorMessage && (_jsx(BaseErrorMessage, { errorMessage: errorMessage, containerClasses: "flex items-start justify-start" })), characterLimit && (_jsx(CharacterLimitMessage, { isFieldError: isFieldError, isFieldDirty: isFieldDirty, characterLimit: characterLimit, characterCount: characterCount }))] })] }));
+            } }) }));
+};
+export default BaseTextareaInput;

package/dist/components/BaseInput/BaseToggle.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+interface BaseToggleProps {
+    control: any;
+    valueKey: string;
+    inputContainerClasses?: string;
+    defaultValue?: any;
+    toggleTextPosition?: "left" | "right" | "top" | "bottom" | "none";
+    toggleTextSize?: string;
+    toggleActiveColorBackground?: string;
+    toggleInactiveColorBackground?: string;
+    toggleActiveColorBorder?: string;
+    toggleInactiveColorBorder?: string;
+    toggleActiveTextColor?: string;
+    toggleInactiveTextColor?: string;
+    toggleAdditionalClasses?: string;
+    toggleHasDivider?: boolean;
+    toggleFontFamily?: string;
+    toggleActiveLabel?: string;
+    toggleInactiveLabel?: string;
+    toggleSmallToggle?: boolean;
+    toggleBorderStyle?: boolean;
+}
+declare const BaseToggle: React.FC<BaseToggleProps>;
+export default BaseToggle;

package/dist/components/BaseInput/BaseToggle.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import ToggleButton from "../ToggleButton/ToggleButton";
+const BaseToggle = (props) => {
+    const { control, valueKey, inputContainerClasses, defaultValue, toggleTextPosition = "right", toggleTextSize = "sm", toggleActiveColorBackground = "bg-blue-600", toggleInactiveColorBackground = "bg-blue-300", toggleActiveColorBorder = "border-blue-500", toggleInactiveColorBorder = "border-blue-300", toggleActiveTextColor = "text-blue-800", toggleInactiveTextColor = "text-blue-600", toggleAdditionalClasses = `w-1/4`, toggleHasDivider = false, toggleFontFamily = "font-omnes-regular", toggleActiveLabel = "Yes", toggleInactiveLabel = "No", toggleSmallToggle = true, toggleBorderStyle = true, } = props;
+    return (_jsx("div", { className: `${inputContainerClasses}`, children: _jsx(Controller, { control: control, name: valueKey, defaultValue: defaultValue, render: ({ field: { value, onChange } }) => (_jsx(ToggleButton, { initialStatus: Boolean(value), onClick: () => onChange(!value), textPosition: toggleTextPosition, textSize: toggleTextSize, activeColorBackground: toggleActiveColorBackground, inactiveColorBackground: toggleInactiveColorBackground, activeColorBorder: toggleActiveColorBorder, inactiveColorBorder: toggleInactiveColorBorder, activeTextColor: toggleActiveTextColor, inactiveTextColor: toggleInactiveTextColor, additionalClasses: toggleAdditionalClasses, hasDivider: toggleHasDivider, fontFamily: toggleFontFamily, activeLabel: toggleActiveLabel, inactiveLabel: toggleInactiveLabel, id: valueKey, smallToggle: toggleSmallToggle, borderStyle: toggleBorderStyle })) }) }));
+};
+export default BaseToggle;

package/dist/components/BaseInput/DisabledSelect.d.ts

@@ -0,0 +1,7 @@
+interface DisabledSelectProps {
+    disabledSelectText: string;
+    containerClasses?: string;
+    labelTextClasses?: string;
+}
+declare const DisabledSelect: React.FC<DisabledSelectProps>;
+export default DisabledSelect;

package/dist/components/BaseInput/DisabledSelect.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DisabledSelect = ({ disabledSelectText, containerClasses, labelTextClasses = "text-navy-400", }) => {
+    const baseContainerClasses = "flex text-left p-1 pr-2 py-2 hover:cursor-not-allowed h-38px";
+    return (_jsx("div", { className: `${baseContainerClasses}  ${containerClasses}`, children: _jsxs("div", { className: `flex items-center justify-between w-full `, children: [_jsx("div", { className: `${labelTextClasses}`, children: disabledSelectText }), _jsx("svg", { height: "20", width: "20", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "fill-navy-400", children: _jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) })] }) }));
+};
+export default DisabledSelect;

package/dist/components/BaseInput/components/BaseErrorMessage.d.ts

@@ -0,0 +1,8 @@
+interface BaseErrorMessageProps {
+    errorMessage: string;
+    containerClasses?: string;
+    errorMessageStyles?: React.CSSProperties;
+    errorMessageTextClasses?: string;
+}
+declare const BaseErrorMessage: React.FC<BaseErrorMessageProps>;
+export default BaseErrorMessage;

package/dist/components/BaseInput/components/BaseErrorMessage.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const BaseErrorMessage = ({ errorMessage, errorMessageStyles = { width: "500px" }, errorMessageTextClasses = "text-xs text-crimson-700", containerClasses = "absolute top-full mt-.5", }) => {
+    return (_jsx("span", { className: containerClasses, style: errorMessageStyles, children: _jsx("p", { className: errorMessageTextClasses, children: errorMessage }) }));
+};
+export default BaseErrorMessage;

package/dist/components/BaseInput/components/CharacterLimitMessage.d.ts

@@ -0,0 +1,9 @@
+interface BaseCharacterLimitProps {
+    containerClasses?: string;
+    isFieldError: boolean;
+    isFieldDirty: boolean;
+    characterLimit: number | string;
+    characterCount: number;
+}
+declare const CharacterLimitMessage: React.FC<BaseCharacterLimitProps>;
+export default CharacterLimitMessage;

package/dist/components/BaseInput/components/CharacterLimitMessage.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const CharacterLimitMessage = ({ containerClasses = "flex items-end justify-end", isFieldError, isFieldDirty, characterLimit, characterCount, }) => {
+    return (_jsx("span", { className: containerClasses, children: _jsx("p", { className: `text-xs ${isFieldError && isFieldDirty
+                ? "text-crimson-700"
+                : "text-navy-350"}`, children: `${characterCount}/${characterLimit}` }) }));
+};
+export default CharacterLimitMessage;

package/dist/components/BaseInput/components/DropDownIndicator.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface ArrowDownIconProps {
+    className?: string;
+}
+declare const ArrowDownIcon: React.FC<ArrowDownIconProps>;
+export default ArrowDownIcon;