@northlight/ui 2.2.1 → 2.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,8 @@
1
1
  import { AccordionProps, AccordionButtonProps, AccordionPanelProps, AccordionItemProps, AvatarProps as AvatarProps$1, AlertProps as AlertProps$1, AspectRatioProps, StackProps, BadgeProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, StackDirection, 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, 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';
2
2
  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, 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, Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber, TabIndicator as StepIndicator, TabPanels as StepPanels, Tab, TabIndicator, TabList, TabPanels, Table, TableCaption, TableContainer, 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';
3
3
  import * as React$1 from 'react';
4
- import React__default, { ChangeEvent, ComponentType, InputHTMLAttributes, ReactNode, ReactElement } from 'react';
5
- import { RegisterOptions, FieldValues, UseFormReturn as UseFormReturn$1, SetValueConfig, ControllerRenderProps, UseFormProps, FieldError, Merge, FieldErrorsImpl } from 'react-hook-form';
4
+ import React__default, { ChangeEvent, ComponentType, InputHTMLAttributes, ReactNode, ReactElement, RefObject } from 'react';
5
+ import { RegisterOptions, FieldValues, UseFormReturn as UseFormReturn$1, SetValueConfig, FieldPath, Control, ControllerRenderProps, UseFormProps, FieldError, Merge, FieldErrorsImpl } from 'react-hook-form';
6
6
  export { useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
7
7
  import { CheckboxGroupState } from '@react-stately/checkbox';
8
8
  import { RadioGroupState } from '@react-stately/radio';
@@ -2143,8 +2143,8 @@ type UseFormReturn<T extends FieldValues> = UseFormReturn$1<T>;
2143
2143
  type Maybe<T> = T | undefined;
2144
2144
  type CustomSubmitHandler<TFieldValues extends FieldValues> = (data: TFieldValues, event: UseFormReturn<TFieldValues>) => any | Promise<any>;
2145
2145
  type SetValueOptionsType = Maybe<SetValueConfig>;
2146
- interface FieldProps {
2147
- name: string;
2146
+ interface FieldProps<FormValues extends FieldValues = FieldValues, FieldName extends FieldPath<FormValues> = FieldPath<FormValues>> {
2147
+ name: FieldName;
2148
2148
  /** Label displayed as text beside or under/over
2149
2149
  * (depending on direction prop) over children. Recommended for accesibility */
2150
2150
  label?: string;
@@ -2161,7 +2161,12 @@ interface FieldProps {
2161
2161
  * for more information view https://react-hook-form.com/api/useform/register/ docs. (Whatever you put into the validate object will be put as the second options arguments on the react hook form register method)
2162
2162
  * */
2163
2163
  validate?: RegisterOptions;
2164
- children: (field: ControllerRenderProps<FieldValues, string>, methods: UseFormReturn<FieldValues>) => JSX.Element | JSX.Element;
2164
+ /**
2165
+ * The value is taken from the formContext by default,
2166
+ * but may be manually specified to ensure field type inference.
2167
+ * */
2168
+ control?: Control<FormValues>;
2169
+ children: (field: ControllerRenderProps<FormValues, FieldName>, methods: UseFormReturn<FormValues>) => JSX.Element;
2165
2170
  }
2166
2171
  interface FormProps<FormValues extends FieldValues> {
2167
2172
  /** This should contain an object with the name of the fields and their default values. */
@@ -2191,6 +2196,7 @@ interface FormProps<FormValues extends FieldValues> {
2191
2196
  * no matter how nesteed they are */
2192
2197
  shouldTrim?: boolean;
2193
2198
  children: ((methods: UseFormReturn<FormValues>) => ReactNode) | ReactNode;
2199
+ innerFormStyle?: any;
2194
2200
  }
2195
2201
  type FieldErrorType<T extends FieldValues> = FieldError | Merge<FieldError, FieldErrorsImpl<T>> | undefined;
2196
2202
 
@@ -2468,7 +2474,6 @@ type SelectFieldProps<T> = Omit<SelectProps<T>, 'onChange'> & InputFieldProps &
2468
2474
  * <Select
2469
2475
  * options={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]}
2470
2476
  * onChange={(value, action) => console.log('Selected:', value)}
2471
- * isClearable={ true }
2472
2477
  * />
2473
2478
  * ?)
2474
2479
  *
@@ -3227,8 +3232,42 @@ declare const Form: <FormValues extends FieldValues>(props: FormProps<FormValues
3227
3232
  * }
3228
3233
  * ?)
3229
3234
  *
3235
+ * @example (Example)
3236
+ * ## Type-safety
3237
+ * There are multiple ways to provide types for
3238
+ * the field callback values. To ensure that each
3239
+ * component within the field receives the correct
3240
+ * value, it's essential to make the field aware
3241
+ * of the form state values. When the Field component
3242
+ * does not receive any types, the "value" callback
3243
+ * argument will have the type of "any".
3244
+ * <br /><br />
3245
+ * ### Passing down the control prop (Recommended)
3246
+ * (?
3247
+ * <Form initialValues={{username: 'Alex'}}>
3248
+ * {
3249
+ * ({ control }) => {
3250
+ * <Box p="2">
3251
+ * <Field name="username" label="Input name" control={ control }>
3252
+ * {({value, onChange}) => ( // "value" has type of "string"
3253
+ * <Input value={value} onChange={onChange} />
3254
+ * )}
3255
+ * </Field>
3256
+ * </Box>
3257
+ * }
3258
+ * }
3259
+ * </Form>
3260
+ * ?)
3261
+ * <br /><br />
3262
+ * ### Specifying generic arguments
3263
+ * You can also specify generic arguments on the Field
3264
+ * component to ensure that "value" has a valid type.
3265
+ * The passed generic type combined with the valid
3266
+ * "name" property ensures that "value" has the expected
3267
+ * type received from the generic type:
3268
+ * `<Field<MyFormBody> name="username">...</Field>`
3230
3269
  */
3231
- declare function Field({ name, label, children, direction, isRequired, noLabelConnection, validate, }: FieldProps): JSX.Element;
3270
+ declare function Field<FormValues extends FieldValues = FieldValues, FieldName extends FieldPath<FormValues> = FieldPath<FormValues>>({ name, label, children, direction, isRequired, noLabelConnection, validate, control: passedControl, }: FieldProps<FormValues, FieldName>): JSX.Element;
3232
3271
 
3233
3272
  declare const useSetValueRefreshed: () => (name: any, value: any, options: SetValueOptionsType) => void;
3234
3273
 
@@ -3469,6 +3508,14 @@ declare const useDebounce: <T>(value: T, delay: number) => T;
3469
3508
 
3470
3509
  declare const useLoadingMessage: (prefix?: string, delay?: number) => string;
3471
3510
 
3511
+ interface Message {
3512
+ content: string;
3513
+ role: string;
3514
+ type?: string;
3515
+ data?: string;
3516
+ }
3517
+ declare const useScrollToBottom: (scrollView: RefObject<HTMLDivElement>, messages: Message[]) => void;
3518
+
3472
3519
  declare const useArrowFocus: (columns: number) => {
3473
3520
  defaultArrows: (e: any) => void;
3474
3521
  focusPrevious: ({ repeat, wrap, }?: {
@@ -3501,4 +3548,4 @@ declare const useSelectCallbacks: <T extends BasicOption>({ onChange, onAdd, onR
3501
3548
  declare const theme: Record<string, any>;
3502
3549
  declare const tottTheme: Record<string, any>;
3503
3550
 
3504
- 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, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Modal, 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, 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, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, 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, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useLoadingMessage, useOverflowGroup, useSelectCallbacks, useSetValueRefreshed, useToast };
3551
+ 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, FormattedNumberInputProps, 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, 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, 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, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, 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, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useLoadingMessage, useOverflowGroup, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };
@@ -1421,7 +1421,8 @@ const Form = forwardRef$1((_a, ref) => {
1421
1421
  formSettings = { mode: "onChange" },
1422
1422
  methods = void 0,
1423
1423
  enableReinitialize = false,
1424
- shouldTrim = true
1424
+ shouldTrim = true,
1425
+ innerFormStyle = {}
1425
1426
  } = _b, rest = __objRest$17(_b, [
1426
1427
  "initialValues",
1427
1428
  "onSubmit",
@@ -1430,7 +1431,8 @@ const Form = forwardRef$1((_a, ref) => {
1430
1431
  "formSettings",
1431
1432
  "methods",
1432
1433
  "enableReinitialize",
1433
- "shouldTrim"
1434
+ "shouldTrim",
1435
+ "innerFormStyle"
1434
1436
  ]);
1435
1437
  const customResolver = (values, _context, _options) => ({
1436
1438
  values,
@@ -1462,7 +1464,7 @@ const Form = forwardRef$1((_a, ref) => {
1462
1464
  newMethods.trigger();
1463
1465
  e.preventDefault();
1464
1466
  };
1465
- return /* @__PURE__ */ React.createElement(FormProvider, __spreadValues$1D(__spreadValues$1D({}, newMethods), rest), /* @__PURE__ */ React.createElement("form", { style: { width: "100%" }, onSubmit: handleSubmit }, typeof children === "function" ? children(newMethods) : children));
1467
+ return /* @__PURE__ */ React.createElement(FormProvider, __spreadValues$1D(__spreadValues$1D({}, newMethods), rest), /* @__PURE__ */ React.createElement("form", { style: __spreadValues$1D({ width: "100%" }, innerFormStyle), onSubmit: handleSubmit }, typeof children === "function" ? children(newMethods) : children));
1466
1468
  });
1467
1469
 
1468
1470
  var __defProp$1C = Object.defineProperty;
@@ -1540,6 +1542,32 @@ const useLoadingMessage = (prefix = "", delay = 300) => {
1540
1542
  return `${prefix}${dots}`;
1541
1543
  };
1542
1544
 
1545
+ const smoothScrollToBottom = (div) => {
1546
+ const totalSteps = 50;
1547
+ let currentStep = 0;
1548
+ const targetScrollTop = div.scrollHeight - div.clientHeight;
1549
+ const originalScrollTop = div.scrollTop;
1550
+ const scrollInterval = setInterval(() => {
1551
+ if (currentStep >= totalSteps) {
1552
+ clearInterval(scrollInterval);
1553
+ } else {
1554
+ currentStep += 1;
1555
+ const scrollProgress = currentStep / totalSteps;
1556
+ const easing = 1 - (1 - scrollProgress) * (1 - scrollProgress);
1557
+ div.scrollTop = originalScrollTop + (targetScrollTop - originalScrollTop) * easing;
1558
+ }
1559
+ }, 20);
1560
+ };
1561
+
1562
+ const useScrollToBottom = (scrollView, messages) => {
1563
+ useEffect(() => {
1564
+ const div = scrollView.current;
1565
+ if (div) {
1566
+ smoothScrollToBottom(div);
1567
+ }
1568
+ }, [messages]);
1569
+ };
1570
+
1543
1571
  const useArrowFocus = (columns) => {
1544
1572
  const {
1545
1573
  focusNext: next,
@@ -1642,13 +1670,12 @@ function Field({
1642
1670
  direction = "column",
1643
1671
  isRequired = false,
1644
1672
  noLabelConnection = false,
1645
- validate
1673
+ validate,
1674
+ control: passedControl
1646
1675
  }) {
1647
1676
  const methods = useFormContext();
1648
- const {
1649
- control,
1650
- formState: { errors }
1651
- } = methods;
1677
+ const { formState: { errors } } = methods;
1678
+ const control = passedControl != null ? passedControl : methods.control;
1652
1679
  const fieldError = getFieldError(name, errors);
1653
1680
  return /* @__PURE__ */ React.createElement(FormControl, { isInvalid: !!fieldError, isRequired }, /* @__PURE__ */ React.createElement(
1654
1681
  Stack,
@@ -12036,5 +12063,5 @@ const StepStack = (_a) => {
12036
12063
  ));
12037
12064
  };
12038
12065
 
12039
- export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert$1 as Alert, AspectRatio, AsyncError, Avatar$1 as Avatar, AvatarGroup, Badge, Blinker$1 as Blinker, Blockquote$1 as Blockquote, Button$1 as Button, Capitalized$1 as Capitalized, Carousel$1 as Carousel, Checkbox$1 as Checkbox, CheckboxField, Clickable, ClipboardInput, Collapse, ColorPicker$1 as ColorPicker, ColorPickerField, CustomTheme, DatePicker$1 as DatePicker, DatePickerField, DateRangePicker, DateRangePickerField, DragAndDrop$1 as DragAndDrop, DragHandle, DragItem, Draggable, DropZone, Droppable, EditableText$1 as EditableText, Fade, FastGrid, FastList, Field, FilePicker$1 as FilePicker, FilePickerField, FlipButton$1 as FlipButton, FlipButtonGroup, FlipButtonGroupField, Form, FormLabel, FormattedNumberInput, H1$1 as H1, H2$1 as H2, H3$1 as H3, H4$1 as H4, H5$1 as H5, H6$1 as H6, Icon$1 as Icon, IconButton, Label$1 as Label, Lead$1 as Lead, MaskedTextInput, MediatoolThemeProvider, Modal$1 as Modal, MultiFileList, MultiFilePicker, MultiFilePickerField, MultiFileUploader, MultiSort, NotificationIconButton, NumberInput, NumberInputField, OrganizationLogo, OverflowGroup, P$1 as P, PaneDivider, PaneItem, PinInput, ProgressBar, Radio$1 as Radio, RadioGroup, RadioGroupField, ScaleFade, SearchBar, SearchBarField, Select, SelectField, Slide, SlideFade, Small$1 as Small, Sortable, SortableContainer, SortableItem, SortableList, Spinner$1 as Spinner, SplitPane, StatusBlock, StatusPin, Step, StepList, StepPanel, StepStack, Steps, Switch, SwitchField, TabPanel, Tabs, Tag$1 as Tag, TagGroup, TextField, Textarea, TextareaField, Tiny$1 as Tiny, Toast, Toolbox$1 as Toolbox, ToolboxContent, ToolboxFooter, ToolboxHeader, addAlpha, advancedParseFloat, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useLoadingMessage, useOverflowGroup, useSelectCallbacks, useSetValueRefreshed, useToast };
12066
+ export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert$1 as Alert, AspectRatio, AsyncError, Avatar$1 as Avatar, AvatarGroup, Badge, Blinker$1 as Blinker, Blockquote$1 as Blockquote, Button$1 as Button, Capitalized$1 as Capitalized, Carousel$1 as Carousel, Checkbox$1 as Checkbox, CheckboxField, Clickable, ClipboardInput, Collapse, ColorPicker$1 as ColorPicker, ColorPickerField, CustomTheme, DatePicker$1 as DatePicker, DatePickerField, DateRangePicker, DateRangePickerField, DragAndDrop$1 as DragAndDrop, DragHandle, DragItem, Draggable, DropZone, Droppable, EditableText$1 as EditableText, Fade, FastGrid, FastList, Field, FilePicker$1 as FilePicker, FilePickerField, FlipButton$1 as FlipButton, FlipButtonGroup, FlipButtonGroupField, Form, FormLabel, FormattedNumberInput, H1$1 as H1, H2$1 as H2, H3$1 as H3, H4$1 as H4, H5$1 as H5, H6$1 as H6, Icon$1 as Icon, IconButton, Label$1 as Label, Lead$1 as Lead, MaskedTextInput, MediatoolThemeProvider, Modal$1 as Modal, MultiFileList, MultiFilePicker, MultiFilePickerField, MultiFileUploader, MultiSort, NotificationIconButton, NumberInput, NumberInputField, OrganizationLogo, OverflowGroup, P$1 as P, PaneDivider, PaneItem, PinInput, ProgressBar, Radio$1 as Radio, RadioGroup, RadioGroupField, ScaleFade, SearchBar, SearchBarField, Select, SelectField, Slide, SlideFade, Small$1 as Small, Sortable, SortableContainer, SortableItem, SortableList, Spinner$1 as Spinner, SplitPane, StatusBlock, StatusPin, Step, StepList, StepPanel, StepStack, Steps, Switch, SwitchField, TabPanel, Tabs, Tag$1 as Tag, TagGroup, TextField, Textarea, TextareaField, Tiny$1 as Tiny, Toast, Toolbox$1 as Toolbox, ToolboxContent, ToolboxFooter, ToolboxHeader, addAlpha, advancedParseFloat, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useLoadingMessage, useOverflowGroup, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };
12040
12067
  //# sourceMappingURL=northlight.mjs.map