@northlight/ui 2.12.2 → 2.12.4

package/dist/es/northlight.d.ts

@@ -1,9 +1,10 @@
-import { AccordionProps, AccordionButtonProps, AccordionPanelProps, AccordionItemProps, StackDirection, AvatarProps as AvatarProps$1, AlertProps as AlertProps$1, AspectRatioProps, StackProps, BadgeProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, IconButtonProps as IconButtonProps$1, InputProps, FlexProps, BoxProps, TagProps as TagProps$1, IconProps as IconProps$1, SystemStyleObject, HeadingProps as HeadingProps$1, TextProps, FormLabelProps as FormLabelProps$1, Heading, Text, ModalProps as ModalProps$1, NumberInputProps as NumberInputProps$1, PinInputProps as PinInputProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SpinnerProps as SpinnerProps$1, SwitchProps as SwitchProps$1, TableProps as TableProps$1, TabsProps as TabsProps$1, TabPanelProps as TabPanelProps$1, TextareaProps as TextareaProps$1, UseToastOptions as UseToastOptions$1, FadeProps as FadeProps$1, ScaleFadeProps as ScaleFadeProps$1, SlideProps as SlideProps$1, SlideFadeProps as SlideFadeProps$1, CollapseProps as CollapseProps$1, TabListProps, TabProps, LinkProps, GridProps, GridItemProps, EditableProps as EditableProps$1 } from '@chakra-ui/react';
+import { AccordionProps, AccordionButtonProps, AccordionPanelProps, AccordionItemProps, StackDirection, AvatarProps as AvatarProps$1, AlertProps as AlertProps$1, AspectRatioProps, StackProps, BadgeProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, IconButtonProps as IconButtonProps$1, PopoverProps, InputProps, FlexProps, BoxProps, TagProps as TagProps$1, IconProps as IconProps$1, SystemStyleObject, HeadingProps as HeadingProps$1, TextProps, FormLabelProps as FormLabelProps$1, Heading, Text, ModalProps as ModalProps$1, NumberInputProps as NumberInputProps$1, PinInputProps as PinInputProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SpinnerProps as SpinnerProps$1, SwitchProps as SwitchProps$1, TableProps as TableProps$1, TabsProps as TabsProps$1, TabPanelProps as TabPanelProps$1, TextareaProps as TextareaProps$1, UseToastOptions as UseToastOptions$1, FadeProps as FadeProps$1, ScaleFadeProps as ScaleFadeProps$1, SlideProps as SlideProps$1, SlideFadeProps as SlideFadeProps$1, CollapseProps as CollapseProps$1, TabListProps, TabProps, LinkProps, GridProps, GridItemProps, EditableProps as EditableProps$1 } from '@chakra-ui/react';
 export { AbsoluteCenter, AccordionButtonProps, AccordionIcon, AccordionIconProps, AccordionItemProps, AccordionPanelProps, AccordionProps, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, AspectRatioProps, BadgeProps, Box, BoxProps, BreadcrumbItem as Breadcrumb, BreadcrumbLink, BreadcrumbSeparator, Breadcrumb as Breadcrumbs, ButtonGroup, Card, CardBody, CardFooter, CardHeader, Center, Modal as ChakraModal, CheckboxGroup, Circle, CircularProgress, CircularProgressLabel, CloseButton, Code, Container, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, Editable, EditableInput, EditablePreview, Flex, FormControl, FormErrorMessage, FormHelperText, Grid, GridItem, HStack, Heading, Hide, Highlight, Image, Input, InputAddon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, LinkBox, LinkOverlay, List, ListIcon, ListItem, Menu, MenuButton, MenuCommand, MenuDivider, MenuGroup, MenuIcon, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, NumberDecrementStepper, NumberIncrementStepper, OrderedList, PinInputField, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, RangeSlider, RangeSliderFilledTrack, RangeSliderMark, RangeSliderThumb, RangeSliderTrack, Show, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slider, SliderFilledTrack, SliderMark, SliderThumb, SliderTrack, Spacer, Stack, StackDivider, StackProps, Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber, TabIndicator as StepIndicator, TabPanels as StepPanels, Tab, TabIndicator, TabList, TabPanels, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableContainer, TableContainerProps, TableFooterProps, TableHeadProps, TableRowProps, TagCloseButton, TagLabel, TagLeftIcon, TagRightIcon, Tbody, Td, Text, Tfoot, Th, Thead, Tooltip, Tr, UnorderedList, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, useBoolean, useBreakpoint, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useEditable, useEditableControls, useEditableState, useInterval, useMediaQuery, useMergeRefs, useNumberInput, useOutsideClick, usePrefersReducedMotion, useRadio, useRadioGroup, useTab, useTabs, useTheme, useToken } from '@chakra-ui/react';
 import { Props, GroupBase, MultiValue, SingleValue, ActionMeta, MenuListProps, SelectInstance, ChakraStylesConfig } from 'chakra-react-select';
 export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect } from 'chakra-react-select';
 import * as React$1 from 'react';
-import React__default, { ComponentType, Ref, ComponentProps, ChangeEvent, InputHTMLAttributes, ReactNode, ReactElement, RefObject, MutableRefObject, EffectCallback, DependencyList } from 'react';
+import React__default, { ComponentType, Ref, RefObject, ComponentProps, ChangeEvent, InputHTMLAttributes, ReactNode, ReactElement, MutableRefObject, EffectCallback, DependencyList } from 'react';
+import * as react_hook_form from 'react-hook-form';
 import { RegisterOptions, FieldValues, UseFormReturn as UseFormReturn$1, SetValueConfig, FieldPath, Control, ControllerRenderProps, UseFormProps, FieldError, Merge, FieldErrorsImpl } from 'react-hook-form';
 export { useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
@@ -22,7 +23,11 @@ export * from '@dnd-kit/utilities';
 export { useInterval as dndUseInterval } from '@dnd-kit/utilities';
 export * from '@dnd-kit/modifiers';
 import { VariableSizeListProps, VariableSizeList, VariableSizeGridProps, VariableSizeGrid } from 'react-window';
+import * as _chakra_ui_layout_dist_stack_stack_utils from '@chakra-ui/layout/dist/stack/stack.utils';
+import * as _chakra_ui_radio_dist_radio_group from '@chakra-ui/radio/dist/radio-group';
 import * as react_select from 'react-select';
+import * as _chakra_ui_switch_dist_switch from '@chakra-ui/switch/dist/switch';
+import * as _chakra_ui_textarea_dist_textarea from '@chakra-ui/textarea/dist/textarea';
 import { Props as Props$1 } from 'react-input-mask';
 import { NumericFormatProps } from 'react-number-format';
 import * as _chakra_ui_toast_dist_toast_types_24f022fd from '@chakra-ui/toast/dist/toast.types-24f022fd';
@@ -137,6 +142,15 @@ interface SelectProps<T, K extends boolean> extends Omit<Props<T, K, GroupBase<T
     customOption?: ((option: T) => JSX.Element) | null;
     isMulti?: K;
     ref?: Ref<SelectInstance<T, K, GroupBase<T>>>;
+    /** Points to the container that the select refers to when deciding where to fit menu.
+     * E.g if you render the select in a modal you may want to sent
+     *  containerRef equal to a ref pointing to that modal,
+     *  because in that case the select dropdown change placement to try and stay within the modal */
+    containerRef?: UseAdaptiveMenuPlacementProps['containerRef'];
+    /** The min height that will be reserveed for the select dropdown, used to determine wheter to put
+     * dropdown on top of or bottom of select
+    */
+    dropdownMinHeightPx?: number;
 }
 type SelectFieldProps<T, K extends boolean = false> = SelectProps<T, K> & Omit<InputFieldProps, 'isMulti'> & {
     direction?: StackDirection;
@@ -145,6 +159,10 @@ type SelectFieldProps<T, K extends boolean = false> = SelectProps<T, K> & Omit<I
     validate?: RegisterOptions;
     isRequired?: boolean;
 };
+interface UseAdaptiveMenuPlacementProps {
+    dropdownHeightPx: number;
+    containerRef?: RefObject<HTMLDivElement>;
+}
 
 /**
  * Select component that provides a customizable and accessible select input.
@@ -271,7 +289,13 @@ render(<CustomSelect />);
 */
 declare const Select: <T extends Option, K extends boolean = false>(props: SelectProps<T, K> & React__default.RefAttributes<SelectInstance<T, K, GroupBase<T>>>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
-declare function SelectField<T extends Option, K extends boolean = false>({ name, label, options, direction, isMulti, isRequired, validate, isClearable, onChange: onChangeCallback, inputLeftElement, inputRightElement, ...rest }: SelectFieldProps<T, K>): JSX.Element;
+declare const SelectField: <T extends Option, K extends boolean = false>(props: SelectProps<T, K> & Omit<InputFieldProps, "isMulti"> & {
+    direction?: _chakra_ui_layout_dist_stack_stack_utils.StackDirection | undefined;
+    name: string;
+    label: string;
+    validate?: react_hook_form.RegisterOptions | undefined;
+    isRequired?: boolean | undefined;
+} & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 declare const getMatchingValue: <T extends Option, K extends boolean>(value: (K extends true ? string[] | T[] : string | T) | undefined, options: react_select.OptionsOrGroups<T, react_select.GroupBase<T>> | undefined) => T | T[] | undefined;
 
@@ -450,8 +474,9 @@ interface BlinkerProps {
 declare const Blinker: ({ color, size, isBlinking, ...rest }: BlinkerProps) => JSX.Element;
 
 type ButtonVariants = 'default' | 'danger' | 'success' | 'brand' | 'brandSubdued' | 'link' | 'ghost';
-type ButtonProps<As extends React.ElementType> = Omit<ButtonProps$1, 'as'> & GenericAsProps<As> & {
+type ButtonProps<As extends React.ElementType> = Omit<ButtonProps$1, 'as' | 'size'> & Omit<GenericAsProps<As>, 'size'> & {
     variant?: ButtonVariants;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
 };
 type GenericAsProps<As extends React.ElementType> = ({
     as?: As;
@@ -501,10 +526,9 @@ type GenericAsProps<As extends React.ElementType> = ({
  * render(<ExampleButton/>)
  * ?)
  */
-declare const Button: <As extends React__default.ElementType<any> = _chakra_ui_system_dist_system_types.ComponentWithAs<"button", _chakra_ui_button_dist_button.ButtonProps>>(props: Omit<_chakra_ui_button_dist_button.ButtonProps, "as"> & {
-    as?: As | undefined;
-} & React__default.ComponentProps<As> & {
+declare const Button: <As extends React__default.ElementType<any> = _chakra_ui_system_dist_system_types.ComponentWithAs<"button", _chakra_ui_button_dist_button.ButtonProps>>(props: Omit<_chakra_ui_button_dist_button.ButtonProps, "as" | "size"> & Omit<GenericAsProps<As>, "size"> & {
     variant?: ButtonVariants | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | undefined;
 } & React__default.RefAttributes<unknown>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type CheckboxVariants = 'default' | 'rounded';
@@ -572,7 +596,7 @@ declare const Checkbox: ({ value, onChange, name, size, variant, ...rest }: Chec
  * ?)
  *
  */
-declare const CheckboxField: ({ name, label, variant, isRequired, validate, onChange: onChangeCallback, direction, labelPlacement, labelSize, ...rest }: CheckboxFieldProps) => JSX.Element;
+declare const CheckboxField: (props: CheckboxFieldProps & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type ColorPickerSize = 'sm' | 'md' | 'lg';
 interface ColorPickerProps extends Omit<IconButtonProps$1, 'onChange' | 'value' | 'aria-label' | 'variant'> {
@@ -584,6 +608,7 @@ interface ColorPickerProps extends Omit<IconButtonProps$1, 'onChange' | 'value'
     value?: string | null;
     size?: ColorPickerSize;
     name?: string;
+    popoverProps?: PopoverProps;
 }
 type ColorButtonProps = {
     color: string;
@@ -628,7 +653,7 @@ type ColorPickerFieldProps = ColorPickerProps & {
  *
  *
  */
-declare const ColorPicker: ({ onChange, colors, expandedColors, value, name, size, ...rest }: ColorPickerProps) => JSX.Element;
+declare const ColorPicker: ({ onChange, colors, expandedColors, value, name, size, popoverProps, ...rest }: ColorPickerProps) => JSX.Element;
 
 /**
  * The <ColorPicker /> component wrapped in a <Field />
@@ -828,7 +853,7 @@ declare const FlipButtonGroup: (props: FlipButtonGroupProps) => JSX.Element;
  * ?)
  *
  */
-declare const FlipButtonGroupField: ({ name, label, children, direction, isRequired, iconPlacement, onChange: onChangeCallback, validate, ...rest }: FlipButtonGroupFieldProps) => JSX.Element;
+declare const FlipButtonGroupField: (props: FlipButtonGroupFieldProps & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface DateRange {
     startDate: string;
@@ -995,7 +1020,7 @@ declare const DateRangePicker: (props: DateRangePickerProps) => JSX.Element;
  * yyyy-mm-dd on the onSubmit callback on <Form>
  *
  */
-declare const DatePickerField: ({ name, minValue, maxValue, isRequired, direction, label, validate, firstDayOfWeek, onChange: onChangeCallback, inputLeftElement, inputRightElement, ...rest }: DatePickerFieldProps) => JSX.Element;
+declare const DatePickerField: (props: DatePickerFieldProps & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * The <DateRangePicker /> component wrapped in a <Field />
@@ -1004,7 +1029,7 @@ declare const DatePickerField: ({ name, minValue, maxValue, isRequired, directio
  * @see {@link https://northlight.dev/reference/date-range-picker-field}
  *
  */
-declare const DateRangePickerField: ({ name, minValue, maxValue, isRequired, direction, label, validate, firstDayOfWeek, onChange: onChangeCallback, isClearable, ...rest }: DateRangePickerFieldProps) => JSX.Element;
+declare const DateRangePickerField: (props: DateRangePickerFieldProps & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface ToolboxProps extends Omit<FlexProps, 'direction'> {
     isResizable?: boolean;
@@ -1225,7 +1250,7 @@ interface SearchBarFieldProps<T extends SearchBarOptionType, K extends boolean =
 
 declare const SearchBar: <T extends SearchBarOptionType, K extends boolean = false>(props: SearchBarProps<T, K> & React__default.RefAttributes<SelectInstance<T, K, GroupBase<T>>>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
-declare const SearchBarField: <T extends SearchBarOptionType, K extends boolean = false>({ name, label, direction, isMulti, isRequired, validate, isClearable, onChange: onChangeCallback, inputLeftElement, inputRightElement, ...rest }: SearchBarFieldProps<T, K>) => JSX.Element;
+declare const SearchBarField: <T extends SearchBarOptionType, K extends boolean = false>(props: SearchBarFieldProps<T, K> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * Context used for all drag and drop components
@@ -1426,7 +1451,7 @@ declare const SortableItem: ({ itemLabel, dblClickThreshold, children, disableDr
  * ?)
  *
  */
-declare const DragItem: (props: DragItemProps & React__default.RefAttributes<unknown>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const DragItem: (props: DragItemProps & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * Util component to display drag handle icon
@@ -1790,7 +1815,7 @@ interface LabelProps extends FormLabelProps$1 {
  * under the props tab to right should be passed down via **sx**_)
  *
  */
-declare const Label: ({ children, size, sx, ...rest }: LabelProps) => JSX.Element;
+declare const Label: (props: LabelProps & React__default.RefAttributes<HTMLLabelElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type HeadingType = typeof Heading;
 type BodyType = typeof P;
@@ -1807,7 +1832,7 @@ interface FormLabelProps extends LabelProps {
  * @see {@link https://northlight.dev/reference/form-label}
  *
  */
-declare const FormLabel: ({ children: label, ...rest }: FormLabelProps) => JSX.Element;
+declare const FormLabel: (props: FormLabelProps & React__default.RefAttributes<HTMLLabelElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface FastListProps extends Omit<VariableSizeListProps, 'itemSize' | 'children' | 'height' | 'width' | 'direction'> {
     itemSize: number | ((index: number) => number);
@@ -2493,7 +2518,18 @@ declare const NumberInput: ({ variant, size, onChange, onInputChange, enableStep
  * @see {@link https://northlight.dev/reference/number-input-field}
  *
  */
-declare const NumberInputField: ({ name, label, direction, isRequired, validate, onChange: onChangeCallback, onlyAcceptPercentage, inputLeftElement, inputRightElement, ...rest }: NumberInputFieldProps) => JSX.Element;
+declare const NumberInputField: (props: Omit<NumberInputProps, "onChange"> & InputFieldProps & {
+    name: string;
+    label: string;
+    validate?: react_hook_form.RegisterOptions | undefined;
+    size?: NumberInputSizeProps | undefined;
+    isRequired?: boolean | undefined;
+    unit?: string | undefined;
+    direction?: _chakra_ui_layout_dist_stack_stack_utils.StackDirection | undefined;
+    onChange?: ((e: string | number) => void) | undefined;
+    inputLeftElement?: React__default.ReactNode;
+    inputRightElement?: React__default.ReactNode;
+} & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 declare const advancedParseFloat: (value: number | string) => string | number;
 
@@ -2638,7 +2674,14 @@ declare const RadioGroup: ({ direction, children, name, ...rest }: RadioGroupPro
  * @see {@link https://northlight.dev/reference/radio-group-field}
  *
  */
-declare const RadioGroupField: ({ name, label, children, direction, isRequired, validate, onChange: onChangeCallback, ...rest }: RadioFieldGroupProps) => JSX.Element;
+declare const RadioGroupField: (props: _chakra_ui_radio_dist_radio_group.RadioGroupProps & {
+    direction?: _chakra_ui_layout_dist_stack_stack_utils.StackDirection | undefined;
+    name: string;
+    label: string;
+    validate?: react_hook_form.RegisterOptions | undefined;
+    isRequired?: boolean | undefined;
+    value?: string | undefined;
+} & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type SpinnerProps = SpinnerProps$1;
 
@@ -2660,7 +2703,8 @@ type SwitchFieldProps = SwitchProps$1 & {
     validate?: RegisterOptions;
     isRequired?: boolean;
     direction?: StackDirection;
-    labelPosition?: 'left' | 'right';
+    labelPlacement?: 'left' | 'right';
+    labelSize?: '2xs' | 'xs' | 'md' | 'lg';
 };
 
 /**
@@ -2694,18 +2738,30 @@ declare const Switch: ({ value, onChange, name, size, ...rest }: SwitchProps) =>
  * @see {@link https://northlight.dev/reference/switch-field}
 * @example (Example)
  * ## Basic
+ * Tip:
+ * * For `labelPlacement` you can use `"left" | "right"`
+ * * For `labelSize` you can use `"2xs" | "xs" | "md" | "lg"` or leave it blank
  * (?
  * <Form initialValues={{name: ''}}>
  *  <SwitchField
  *   name="terms"
  *   label="I agree to the Terms & Conditions"
- *   labelPosition="left"
+ *   labelPlacement="right"
+ *   labelSize="md"
  *  />
  * </Form>
  * ?)
  *
  */
-declare const SwitchField: ({ name, label, isRequired, validate, onChange: onChangeCallback, direction, labelPosition, ...rest }: SwitchFieldProps) => JSX.Element;
+declare const SwitchField: (props: _chakra_ui_switch_dist_switch.SwitchProps & {
+    name: string;
+    label: string;
+    validate?: react_hook_form.RegisterOptions | undefined;
+    isRequired?: boolean | undefined;
+    direction?: _chakra_ui_layout_dist_stack_stack_utils.StackDirection | undefined;
+    labelPlacement?: "right" | "left" | undefined;
+    labelSize?: "md" | "lg" | "2xs" | "xs" | undefined;
+} & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface TableProps extends Omit<TableProps$1, 'variant'> {
     variant?: TableProps$1['variant'] | 'rounded';
@@ -2817,7 +2873,7 @@ interface TagGroupProps extends StackProps {
  * ?)
  *
 */
-declare const Tag: (props: TagProps & React__default.RefAttributes<unknown>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Tag: (props: TagProps & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * Used when rending multiple tags in limited container for responsive layout
@@ -2869,7 +2925,14 @@ type TextareaFieldProps = TextareaProps$1 & {
  */
 declare const Textarea: ({ size, onChange, name, value, ...rest }: TextareaProps) => JSX.Element;
 
-declare const TextareaField: ({ name, label, isRequired, validate, direction, onChange: onChangeCallback, ...rest }: TextareaFieldProps) => JSX.Element;
+declare const TextareaField: (props: _chakra_ui_textarea_dist_textarea.TextareaProps & {
+    name: string;
+    label: string;
+    validate?: react_hook_form.RegisterOptions | undefined;
+    isRequired?: boolean | undefined;
+    size?: TextSizeProps | undefined;
+    direction?: _chakra_ui_layout_dist_stack_stack_utils.StackDirection | undefined;
+} & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface TextInputFormatter {
     format: (value: string) => string;
@@ -2903,6 +2966,8 @@ interface FormattedNumberInputProps extends Omit<NumericFormatProps, 'onChange'
     isPercentage?: boolean;
     /** Will round up and restrict number of decimals */
     numberOfDecimals?: number;
+    inputLeftElement?: React.ReactNode;
+    inputRightElement?: React.ReactNode;
 }
 interface FormattedNumberInputFieldProps extends FormattedNumberInputProps {
     name: string;
@@ -2953,7 +3018,7 @@ interface FormattedNumberInputFieldProps extends FormattedNumberInputProps {
   ?)
 
  */
-declare const FormattedNumberInput: ({ preset, isPercentage, onChange, value, numberOfDecimals, max, min, ...rest }: FormattedNumberInputProps) => JSX.Element;
+declare const FormattedNumberInput: ({ preset, isPercentage, onChange, value, numberOfDecimals, max, min, inputLeftElement, inputRightElement, ...rest }: FormattedNumberInputProps) => JSX.Element;
 
 /**
  * The formatted number input component wrapped in a <Field />
@@ -2972,7 +3037,7 @@ declare const FormattedNumberInput: ({ preset, isPercentage, onChange, value, nu
  * ?)
  *
  */
-declare const FormattedNumberInputField: ({ name, label, isRequired, validate, onChange: onChangeCallback, direction, ...rest }: FormattedNumberInputFieldProps) => JSX.Element;
+declare const FormattedNumberInputField: (props: FormattedNumberInputFieldProps & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 declare const MaskedTextInput: ({ mask, maskPlaceholder, alwaysShowMask, name, value, placeholder, onChange, onBlur, ...rest }: MaskedTextInputProps) => JSX.Element;
 
@@ -2986,7 +3051,7 @@ declare const MaskedTextInput: ({ mask, maskPlaceholder, alwaysShowMask, name, v
  *
  *
  */
-declare const TextField: ({ name, label, as: As, isRequired, validate, direction, onChange: onChangeCallback, inputLeftElement, inputRightElement, ...rest }: TextFieldProps) => JSX.Element;
+declare const TextField: (props: TextFieldProps & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface ToastProps extends AlertProps {
     title?: string;
@@ -3341,97 +3406,7 @@ You can move up the form state using a ref as well
  */
 declare const Form: <FormValues extends FieldValues>(props: FormProps<FormValues> & React__default.RefAttributes<UseFormReturn$1<FormValues>>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
-/**
- * Wraps children under form context
- * @see TextField
- * @see Form
- * @see {@link https://northlight.dev/reference/field}
- *
- * @example (Example)
- * ## Input example
- * (?
- * <Form initialValues={{name: ''}}>
- * <Box p="2">
- * <Field name="name" label="Input name">
- * {({value, onChange}) => (
- * <Input value={value} onChange={onChange} />
- * )}
- * </Field>
- * </Box>
- *
- * </Form>
- * ?)
- * <br />
- * As you can see the field component acts as a middleman to connect
- * any component to the form context, via a controlled value and onChange prop.
- *  Most of the common use cases for field,
- *  such as text input have been abstracted into their own components, for example _TextField_
- *
- * @example (Example)
- * ## Example with validation and form submition
- * (?
- * () => {
- * const toast = useToast()
- * const handleSubmit =(v) => {
- *  toast({title: 'Sent Message', description: `"${v.message}"`})
- * }
- * return (
- * <Form initialValues={{message: ''}} onSubmit={handleSubmit}>
- * <Stack p="2">
- * <Field
- * name="message"
- * label="Write email"
- * isRequired={true}
- * validate={{maxLength: {message: 'Message must be under 30 characters', value: 30}}}
- * >
- * {({value, onChange}) => (
- * <Textarea value={value} onChange={onChange} />
- * )}
- * </Field>
- * <Button type="submit" variant="brand">Send Message</Button>
- * </Stack>
- *
- * </Form>
- * )
- * }
- * ?)
- *
- * @example (Example)
- * ## Type-safety
- * There are multiple ways to provide types for
- * the field callback values. To ensure that each
- * component within the field receives the correct
- * value, it's essential to make the field aware
- * of the form state values. When the Field component
- * does not receive any types, the "value" callback
- * argument will have the type of "any".
- * <br /><br />
- * ### Passing down the control prop (Recommended)
- * (?
- * <Form initialValues={{username: 'Alex'}}>
- * {
- * ({ control }) => {
- * <Box p="2">
- * <Field name="username" label="Input name" control={ control }>
- * {({value, onChange}) => ( // "value" has type of "string"
- * <Input value={value} onChange={onChange} />
- * )}
- * </Field>
- * </Box>
- * }
- * }
- * </Form>
- * ?)
- * <br /><br />
- * ### Specifying generic arguments
- * You can also specify generic arguments on the Field
- * component to ensure that "value" has a valid type.
- * The passed generic type combined with the valid
- * "name" property ensures that "value" has the expected
- * type received from the generic type:
- * `<Field<MyFormBody> name="username">...</Field>`
- */
-declare function Field<FormValues extends FieldValues = FieldValues, FieldName extends FieldPath<FormValues> = FieldPath<FormValues>>({ name, label, children, direction, isRequired, noLabelConnection, validate, control: passedControl, ...rest }: FieldProps<FormValues, FieldName>): JSX.Element;
+declare const Field: <FormValues extends FieldValues = FieldValues, FieldName extends FieldPath<FormValues> = FieldPath<FormValues>>(props: FieldProps<FormValues, FieldName> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 declare const useSetValueRefreshed: () => (name: any, value: any, options: SetValueOptionsType) => void;
 
@@ -3525,7 +3500,7 @@ interface ClipboardInputProps extends InputProps {
  * ?)
  *
  */
-declare const ClipboardInput: ({ size, value, "aria-label": ariaLabel, ...rest }: ClipboardInputProps) => JSX.Element;
+declare const ClipboardInput: (props: ClipboardInputProps & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface ClickableProps extends UseClickableProps {
     href?: string;
@@ -3766,4 +3741,4 @@ declare const useDidUpdateEffect: (effect: EffectCallback, dependencies: Depende
 declare const theme: Record<string, any>;
 declare const tottTheme: Record<string, any>;
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, BlockVariant, BlockVariantColorTuple, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldProps, CheckboxProps, CheckboxVariants, ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ConfirmDeleteModalProps, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, Fade, FadeProps, FastGrid, FastGridProps, FastList, FastListProps, Field, FieldErrorType, FieldProps, FileEditorModalProps, FileFormat, FileIconButtonProps, FileItemProps, FilePicker, FilePickerField, FilePickerFieldProps, FilePickerProps, FileWithSizeAndType, FileWithSrcNameType, FileWithType, FlipButton, FlipButtonGroup, FlipButtonGroupField, FlipButtonGroupFieldProps, FlipButtonGroupProps, FlipButtonProps, Form, FormBody, FormLabel, FormLabelProps, FormProps, FormattedNumberInput, FormattedNumberInputField, FormattedNumberInputFieldProps, FormattedNumberInputPreset, FormattedNumberInputProps, GenericAsProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Message, Modal, ModalBase, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, PresetOptions, ProgressBar, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusBlock, StatusBlockProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Table, TableProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TagsInput, TagsInputProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, BlockVariant, BlockVariantColorTuple, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldProps, CheckboxProps, CheckboxVariants, ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ConfirmDeleteModalProps, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, Fade, FadeProps, FastGrid, FastGridProps, FastList, FastListProps, Field, FieldErrorType, FieldProps, FileEditorModalProps, FileFormat, FileIconButtonProps, FileItemProps, FilePicker, FilePickerField, FilePickerFieldProps, FilePickerProps, FileWithSizeAndType, FileWithSrcNameType, FileWithType, FlipButton, FlipButtonGroup, FlipButtonGroupField, FlipButtonGroupFieldProps, FlipButtonGroupProps, FlipButtonProps, Form, FormBody, FormLabel, FormLabelProps, FormProps, FormattedNumberInput, FormattedNumberInputField, FormattedNumberInputFieldProps, FormattedNumberInputPreset, FormattedNumberInputProps, GenericAsProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Message, Modal, ModalBase, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, PresetOptions, ProgressBar, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusBlock, StatusBlockProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Table, TableProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TagsInput, TagsInputProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, TransitionDirection, UseAdaptiveMenuPlacementProps, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };