@northlight/ui 2.38.1 → 2.38.3

package/dist/es/northlight.d.ts

@@ -996,7 +996,14 @@ interface DatePickerSettings {
 interface DatePickerProps extends Omit<AriaDatePickerProps<DateValue>, 'firstDayOfWeek'>, DatePickerSettings {
 }
 interface DateRangePickerProps extends Omit<AriaDateRangePickerProps<DateValue>, 'firstDayOfWeek' | 'onChange' | 'value' | 'minValue' | 'maxValue'>, DatePickerSettings {
+    /**
+     * Function to be called when the user changes the date, both in
+     * the modal and the input field.
+     */
     onChange?: (date: null | DateRange) => void;
+    /**
+     * Function to be called when the user saves the date change.
+     */
     onSave?: () => void;
     value: DateRange | null;
     minValue?: string | undefined;
@@ -1004,13 +1011,38 @@ interface DateRangePickerProps extends Omit<AriaDateRangePickerProps<DateValue>,
     fiscalStartMonth?: number;
     fiscalStartDay?: number;
     renderInPortal?: boolean;
+    /**
+     * Label for the save button in the date range picker modal
+     */
     buttonLabel?: string;
-    setIsOpen?: (isOpen: boolean) => void;
+    /**
+     * The previously saved date range used for save/cancel functionality.
+     * When provided along with defaultDateRange, enables save and cancel buttons that appear
+     * when the current value differs from the saved value. The component will revert to this
+     * value when the popover is closed without saving or when cancel is clicked.
+     */
     savedDateRange?: DateRange | null;
+    /**
+     * The default date range to set when the input is cleared.
+     * When provided, the clear button will be shown next to the input field when
+     * modal is closed if the current value differs from the default value.
+     * If not provided, the clear button will always be shown when modal is closed.
+     */
     defaultDateRange?: DateRange | null;
+    /**
+     * Custom reset button to be shown next to the input field when modal is closed.
+     * If not provided, the default clear button will be shown.
+     */
     CustomResetButton?: React.ReactNode;
+    /**
+     * Custom label for the clear button in the date range picker modal
+     */
     clearButtonLabel?: string;
+    /**
+     * Function to be called when the user cancels the date change
+     */
     onCancelChanges?: () => void;
+    'data-testid'?: string;
 }
 interface DatePickerFieldProps extends Omit<InputProps, 'onChange'>, InputFieldProps {
     name: string;

package/dist/es/northlight.js

@@ -1,4 +1,4 @@
-import { Accordion as Accordion$1, AccordionButton as AccordionButton$1, AccordionPanel as AccordionPanel$1, AccordionItem as AccordionItem$1, useInterval, useMediaQuery, useToken as useToken$1, extendTheme, Box, useMultiStyleConfig, chakra, Alert as Alert$2, AspectRatio as AspectRatio$1, forwardRef, useStyleConfig, Icon as Icon$2, Heading, Text, FormLabel as FormLabel$1, VisuallyHidden, HStack, Badge as Badge$2, Flex, Spinner as Spinner$2, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, CheckboxGroup, IconButton as IconButton$1, Popover as Popover$2, Portal, useDisclosure, useBoolean, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, SimpleGrid, SlideFade as SlideFade$1, Table as Table$2, Thead, Tr, Tbody, Select as Select$2, PopoverAnchor, InputGroup, InputRightElement, Link as Link$1, Spacer, useOutsideClick, Tooltip as Tooltip$2, VStack, Circle, Center, Fade as Fade$1, ScaleFade as ScaleFade$1, Slide as Slide$1, Collapse as Collapse$1, CloseButton as CloseButton$1, Radio as Radio$2, RadioGroup as RadioGroup$1, Tag as Tag$2, TagLabel, TagRightIcon, useEditableControls, useEditableState, Editable, InputLeftElement, Input as Input$1, EditablePreview, EditableInput, Modal as Modal$2, ModalOverlay, ModalContent, ModalCloseButton, ModalBody as ModalBody$1, ModalHeader, Slider, SliderTrack, SliderFilledTrack, SliderThumb, ModalFooter, Progress as Progress$1, Image as Image$1, ChakraProvider, Menu as Menu$2, NumberInputStepper as NumberInputStepper$1, Divider, NumberIncrementStepper, NumberDecrementStepper, NumberInput as NumberInput$2, NumberInputField as NumberInputField$1, PinInput as PinInput$2, Switch as Switch$2, TabPanel as TabPanel$1, Tabs as Tabs$2, Textarea as Textarea$2, useToast as useToast$1, AlertTitle, AlertDescription, Tab, TabList, useClipboard, Grid, GridItem, theme as theme$1 } from '@chakra-ui/react';
+import { Accordion as Accordion$1, AccordionButton as AccordionButton$1, AccordionPanel as AccordionPanel$1, AccordionItem as AccordionItem$1, useInterval, useMediaQuery, useToken as useToken$1, extendTheme, Box, useMultiStyleConfig, chakra, Alert as Alert$2, AspectRatio as AspectRatio$1, forwardRef, useStyleConfig, Icon as Icon$2, Heading, Text, FormLabel as FormLabel$1, VisuallyHidden, HStack, Badge as Badge$2, Flex, Spinner as Spinner$2, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, CheckboxGroup, IconButton as IconButton$1, Popover as Popover$2, Portal, useDisclosure, useBoolean, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, SimpleGrid, SlideFade as SlideFade$1, Table as Table$2, Thead, Tr, Tbody, Select as Select$2, PopoverAnchor, InputGroup, InputRightElement, Link as Link$1, Spacer, Tooltip as Tooltip$2, VStack, useOutsideClick, Circle, Center, Fade as Fade$1, ScaleFade as ScaleFade$1, Slide as Slide$1, Collapse as Collapse$1, CloseButton as CloseButton$1, Radio as Radio$2, RadioGroup as RadioGroup$1, Tag as Tag$2, TagLabel, TagRightIcon, useEditableControls, useEditableState, Editable, InputLeftElement, Input as Input$1, EditablePreview, EditableInput, Modal as Modal$2, ModalOverlay, ModalContent, ModalCloseButton, ModalBody as ModalBody$1, ModalHeader, Slider, SliderTrack, SliderFilledTrack, SliderThumb, ModalFooter, Progress as Progress$1, Image as Image$1, ChakraProvider, Menu as Menu$2, NumberInputStepper as NumberInputStepper$1, Divider, NumberIncrementStepper, NumberDecrementStepper, NumberInput as NumberInput$2, NumberInputField as NumberInputField$1, PinInput as PinInput$2, Switch as Switch$2, TabPanel as TabPanel$1, Tabs as Tabs$2, Textarea as Textarea$2, useToast as useToast$1, AlertTitle, AlertDescription, Tab, TabList, useClipboard, Grid, GridItem, theme as theme$1 } from '@chakra-ui/react';
 export { AbsoluteCenter, AccordionIcon, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, Box, 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, Mark, MenuButton, MenuCommand, MenuDivider, MenuGroup, MenuIcon, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, NumberDecrementStepper, NumberIncrementStepper, OrderedList, PinInputField, 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, TableCaption, TableContainer, TagCloseButton, TagLabel, TagLeftIcon, TagRightIcon, Tbody, Td, Text, Tfoot, Th, Thead, 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 React, { useState, useEffect, useRef, isValidElement, cloneElement, Children, createContext, useContext, forwardRef as forwardRef$1, useImperativeHandle, memo, useMemo, useCallback } from 'react';
 import { CreatableSelect, chakraComponents, AsyncSelect, Select as Select$3 } from 'chakra-react-select';
@@ -7765,8 +7765,7 @@ const RangeCalendar = (props) => {
     firstDayOfWeek,
     onSave,
     buttonLabel = "Save",
-    clearButtonLabel = "Clear",
-    onCancel
+    clearButtonLabel = "Clear"
   } = props;
   const { locale } = useLocale();
   const ref = useRef(null);
@@ -7797,14 +7796,6 @@ const RangeCalendar = (props) => {
     locale,
     createCalendar: () => new GregorianCalendar()
   });
-  const handleOnReset = () => {
-    if (onCancel) {
-      onCancel();
-    } else {
-      resetDate();
-    }
-    handleClose();
-  };
   const focusDateRange = (dateRange) => {
     if (dateRange && dateRange.start && dateRange.end) {
       calendarOneState.setFocusedDate(dateRange.start);
@@ -7824,6 +7815,10 @@ const RangeCalendar = (props) => {
     onSave == null ? void 0 : onSave();
     handleClose();
   };
+  const handleReset = () => {
+    resetDate();
+    handleClose();
+  };
   return /* @__PURE__ */ React.createElement(Box, { ref, __css: rangeCalendarContainer }, /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(Flex, { gap: 4 }, /* @__PURE__ */ React.createElement(
     QuickSelect,
     {
@@ -7846,14 +7841,23 @@ const RangeCalendar = (props) => {
       range: value,
       firstDayOfWeek
     }
-  ))), /* @__PURE__ */ React.createElement(HStack, { pt: "2", alignSelf: "end" }, isClearable && /* @__PURE__ */ React.createElement(Button, { onClick: handleOnReset, variant: "ghost", size: "sm" }, clearButtonLabel), /* @__PURE__ */ React.createElement(Button, { variant: "brand", onClick: handleSave, size: "sm" }, buttonLabel))))))));
+  ))), /* @__PURE__ */ React.createElement(HStack, { pt: "2", alignSelf: "end" }, isClearable && /* @__PURE__ */ React.createElement(Button, { onClick: handleReset, variant: "ghost", size: "sm" }, clearButtonLabel), /* @__PURE__ */ React.createElement(Button, { variant: "brand", onClick: handleSave, size: "sm" }, buttonLabel))))))));
 };
 
 const isValidDateRange = (value) => is(Object, value) && has("startDate", value) && has("endDate", value) && is(String, value.startDate) && is(String, value.endDate);
 
+const tooltipIconMap = {
+  success: CheckCircleSolid,
+  warning: AlertTriangleSolid,
+  error: AlertCircleSolid,
+  danger: AlertOctagonSolid,
+  info: InfoSolid,
+  ai: BrightnessSolid,
+  default: HelpCircleSolid,
+  ghost: HelpCircleSolid
+};
+
 var __defProp$1p = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$1p = Object.getOwnPropertySymbols;
 var __hasOwnProp$1p = Object.prototype.hasOwnProperty;
 var __propIsEnum$1p = Object.prototype.propertyIsEnumerable;
@@ -7869,6 +7873,73 @@ var __spreadValues$1p = (a, b) => {
     }
   return a;
 };
+var __objRest$1b = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1p.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1p)
+    for (var prop of __getOwnPropSymbols$1p(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1p.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const Tooltip = (_a) => {
+  var _b = _a, {
+    variant = "default",
+    hasArrow = true,
+    title = "",
+    description = "",
+    hasIcon = false
+  } = _b, rest = __objRest$1b(_b, [
+    "variant",
+    "hasArrow",
+    "title",
+    "description",
+    "hasIcon"
+  ]);
+  const iconVariant = variant;
+  const icon = tooltipIconMap[iconVariant];
+  const TooltipContent = /* @__PURE__ */ React.createElement(HStack, { alignItems: "flex-start" }, hasIcon && /* @__PURE__ */ React.createElement(Icon, { as: icon, color: `icon.toast.${iconVariant}` }), /* @__PURE__ */ React.createElement(VStack, { spacing: 0, alignItems: "flex-start" }, /* @__PURE__ */ React.createElement(Label, { size: "sm" }, title), /* @__PURE__ */ React.createElement(
+    P,
+    {
+      variant: "14",
+      sx: {
+        color: !variant || variant === "ai" ? "text.inverted" : "text.default"
+      }
+    },
+    description
+  )));
+  return /* @__PURE__ */ React.createElement(
+    Tooltip$2,
+    __spreadValues$1p({
+      hasArrow,
+      hasIcon,
+      label: title || description ? TooltipContent : void 0,
+      variant
+    }, rest)
+  );
+};
+
+var __defProp$1o = Object.defineProperty;
+var __defProps$e = Object.defineProperties;
+var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1o = Object.getOwnPropertySymbols;
+var __hasOwnProp$1o = Object.prototype.hasOwnProperty;
+var __propIsEnum$1o = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1o = (obj, key, value) => key in obj ? __defProp$1o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1o = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1o.call(b, prop))
+      __defNormalProp$1o(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1o)
+    for (var prop of __getOwnPropSymbols$1o(b)) {
+      if (__propIsEnum$1o.call(b, prop))
+        __defNormalProp$1o(a, prop, b[prop]);
+    }
+  return a;
+};
 var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
 const parseValue = (value) => {
   if (!isValidDateRange(value))
@@ -7904,12 +7975,11 @@ const DateRangePicker = (props) => {
     onSave,
     buttonLabel = "Save",
     clearButtonLabel = "Clear",
-    setIsOpen = () => {
-    },
-    savedDateRange = value,
-    defaultDateRange = value,
+    savedDateRange,
+    defaultDateRange,
     CustomResetButton,
-    onCancelChanges
+    onCancelChanges,
+    "data-testid": dataTestId
   } = props;
   const ref = useRef();
   const { group } = useMultiStyleConfig("DatePicker");
@@ -7937,9 +8007,6 @@ const DateRangePicker = (props) => {
     shouldCloseOnSelect: false,
     hideTimeZone: true
   });
-  useEffect(() => {
-    setIsOpen(state.isOpen);
-  }, [state.isOpen]);
   const {
     groupProps,
     startFieldProps,
@@ -7948,7 +8015,7 @@ const DateRangePicker = (props) => {
     dialogProps,
     calendarProps
   } = useDateRangePicker(
-    {
+    __spreadValues$1o({
       onChange: (date) => {
         onChangeCallback({
           startDate: date == null ? void 0 : date.start.toString(),
@@ -7964,14 +8031,14 @@ const DateRangePicker = (props) => {
       isDisabled,
       isInvalid,
       startName: props.startName,
-      endName: props.endName
-    },
+      endName: props.endName,
+      "aria-label": "Date range picker"
+    }, !isNil(dataTestId) && { "data-testid": dataTestId }),
     state,
     ref
   );
   const togglePopup = () => state.setOpen(!state.isOpen);
   const handleClose = () => {
-    onChangeCallback(savedDateRange);
     state.setOpen(false);
   };
   useOutsideClick({
@@ -7991,12 +8058,14 @@ const DateRangePicker = (props) => {
       icon: /* @__PURE__ */ React.createElement(Icon, { as: XCloseSolid })
     }
   );
-  const isCurrentDateSaved = isDatesEqual(value, savedDateRange);
-  const isCurrentDateDefault = isDatesEqual(value, defaultDateRange);
-  const cancelDateChange = () => {
+  const cancelOrResetDateChange = () => {
     if (onCancelChanges) {
+      if (!isNil(savedDateRange))
+        onChangeCallback(savedDateRange);
       onCancelChanges();
     } else {
+      if (!isNil(defaultDateRange))
+        onChangeCallback(defaultDateRange);
       resetDate();
     }
   };
@@ -8004,41 +8073,49 @@ const DateRangePicker = (props) => {
     onSave == null ? void 0 : onSave();
     handleClose();
   };
-  const shouldShowResetButton = !state.isOpen && isCurrentDateSaved && !isCurrentDateDefault;
-  const shouldShowSaveAndCancelButtons = !state.isOpen && !isCurrentDateSaved;
+  const handleModalClose = () => {
+    if (!isNil(savedDateRange))
+      onChangeCallback(savedDateRange);
+    handleClose();
+  };
+  const isCurrentDateSaved = isNil(savedDateRange) || isDatesEqual(value, savedDateRange);
+  const isDateResettable = isNil(defaultDateRange) || !isDatesEqual(value, defaultDateRange);
+  const canShowSaveAndCancelButtons = !isNil(savedDateRange) && !isNil(defaultDateRange);
+  const shouldShowResetButton = !state.isOpen && isCurrentDateSaved && isDateResettable;
+  const shouldShowSaveAndCancelButtons = canShowSaveAndCancelButtons && !state.isOpen && !isCurrentDateSaved;
   return /* @__PURE__ */ React.createElement(
     Popover,
     {
       isOpen: state.isOpen,
-      onClose: handleClose,
+      onClose: handleModalClose,
       placement: "bottom-start"
     },
-    /* @__PURE__ */ React.createElement(PopoverAnchor, null, /* @__PURE__ */ React.createElement(HStack, null, /* @__PURE__ */ React.createElement(InputGroup, __spreadProps$e(__spreadValues$1p({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(PopoverAnchor, null, /* @__PURE__ */ React.createElement(HStack, null, /* @__PURE__ */ React.createElement(InputGroup, __spreadProps$e(__spreadValues$1o({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React.createElement(
       StyledField,
       {
         isDisabled,
         isInvalid,
         variant
       },
-      /* @__PURE__ */ React.createElement(HStack, { paddingInlineStart: "1a", paddingInlineEnd: 10 }, /* @__PURE__ */ React.createElement(DateField, __spreadProps$e(__spreadValues$1p({}, startFieldProps), { dateFormat })), /* @__PURE__ */ React.createElement(P, null, "-"), /* @__PURE__ */ React.createElement(DateField, __spreadProps$e(__spreadValues$1p({}, endFieldProps), { dateFormat })))
+      /* @__PURE__ */ React.createElement(HStack, { paddingInlineStart: "1a", paddingInlineEnd: 10 }, /* @__PURE__ */ React.createElement(DateField, __spreadProps$e(__spreadValues$1o({}, startFieldProps), { dateFormat })), /* @__PURE__ */ React.createElement(P, null, "-"), /* @__PURE__ */ React.createElement(DateField, __spreadProps$e(__spreadValues$1o({}, endFieldProps), { dateFormat })))
     ), /* @__PURE__ */ React.createElement(InputRightElement, { sx: { height: "100%", paddingRight: "1" } }, /* @__PURE__ */ React.createElement(
       Trigger,
-      __spreadProps$e(__spreadValues$1p({}, buttonProps), {
+      __spreadProps$e(__spreadValues$1o({}, buttonProps), {
         isDisabled,
         handleClick: togglePopup
       })
-    ))), shouldShowResetButton && ResetButton, shouldShowSaveAndCancelButtons && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    ))), shouldShowResetButton && ResetButton, shouldShowSaveAndCancelButtons && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, { label: clearButtonLabel }, /* @__PURE__ */ React.createElement(
       IconButton,
       {
         "aria-label": "cancel-date-change",
         variant: "ghost",
         size: "sm",
         fontSize: "xs",
-        onClick: cancelDateChange,
+        onClick: onCancelChanges,
         isDisabled,
         icon: /* @__PURE__ */ React.createElement(Icon, { as: XCloseSolid })
       }
-    ), /* @__PURE__ */ React.createElement(
+    )), /* @__PURE__ */ React.createElement(Tooltip, { label: buttonLabel }, /* @__PURE__ */ React.createElement(
       IconButton,
       {
         "aria-label": "save-date",
@@ -8046,20 +8123,20 @@ const DateRangePicker = (props) => {
         size: "sm",
         fontSize: "xs",
         onClick: handleSave,
+        isDisabled,
         icon: /* @__PURE__ */ React.createElement(Icon, { as: CheckSolid })
       }
-    )))),
-    /* @__PURE__ */ React.createElement(PortalWrapper, { renderInPortal }, state.isOpen && /* @__PURE__ */ React.createElement(PopoverContent, __spreadProps$e(__spreadValues$1p({}, dialogProps), { ref, w: "max-content" }), /* @__PURE__ */ React.createElement(FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(DatePickerLocaleWrapper, { firstDayOfWeek }, /* @__PURE__ */ React.createElement(
+    ))))),
+    /* @__PURE__ */ React.createElement(PortalWrapper, { renderInPortal }, state.isOpen && /* @__PURE__ */ React.createElement(PopoverContent, __spreadProps$e(__spreadValues$1o({}, dialogProps), { ref, w: "max-content" }), /* @__PURE__ */ React.createElement(FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(DatePickerLocaleWrapper, { firstDayOfWeek }, /* @__PURE__ */ React.createElement(
       RangeCalendar,
-      __spreadProps$e(__spreadValues$1p({}, calendarProps), {
-        resetDate,
+      __spreadProps$e(__spreadValues$1o({}, calendarProps), {
+        resetDate: cancelOrResetDateChange,
         handleClose,
         fiscalStartMonth: fiscalStartMonth || 0,
         fiscalStartDay: fiscalStartDay || 0,
         isClearable,
         firstDayOfWeek,
         onSave,
-        onCancel: onCancelChanges,
         clearButtonLabel,
         buttonLabel
       })
@@ -8067,30 +8144,30 @@ const DateRangePicker = (props) => {
   );
 };
 
-var __defProp$1o = Object.defineProperty;
-var __getOwnPropSymbols$1o = Object.getOwnPropertySymbols;
-var __hasOwnProp$1o = Object.prototype.hasOwnProperty;
-var __propIsEnum$1o = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1o = (obj, key, value) => key in obj ? __defProp$1o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1o = (a, b) => {
+var __defProp$1n = Object.defineProperty;
+var __getOwnPropSymbols$1n = Object.getOwnPropertySymbols;
+var __hasOwnProp$1n = Object.prototype.hasOwnProperty;
+var __propIsEnum$1n = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1n = (obj, key, value) => key in obj ? __defProp$1n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1n = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1o.call(b, prop))
-      __defNormalProp$1o(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1o)
-    for (var prop of __getOwnPropSymbols$1o(b)) {
-      if (__propIsEnum$1o.call(b, prop))
-        __defNormalProp$1o(a, prop, b[prop]);
+    if (__hasOwnProp$1n.call(b, prop))
+      __defNormalProp$1n(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1n)
+    for (var prop of __getOwnPropSymbols$1n(b)) {
+      if (__propIsEnum$1n.call(b, prop))
+        __defNormalProp$1n(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$1b = (source, exclude) => {
+var __objRest$1a = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1o.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1n.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1o)
-    for (var prop of __getOwnPropSymbols$1o(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1o.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1n)
+    for (var prop of __getOwnPropSymbols$1n(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1n.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -8100,39 +8177,39 @@ const InputGroupWrapper = (_a) => {
     inputLeftElement,
     inputRightElement,
     children
-  } = _b, rest = __objRest$1b(_b, [
+  } = _b, rest = __objRest$1a(_b, [
     "inputLeftElement",
     "inputRightElement",
     "children"
   ]);
   const containsInputGroupElement = not(all(isNil, [inputLeftElement, inputRightElement]));
-  return containsInputGroupElement ? /* @__PURE__ */ React.createElement(InputGroup, __spreadValues$1o({}, rest), inputLeftElement, children, inputRightElement) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  return containsInputGroupElement ? /* @__PURE__ */ React.createElement(InputGroup, __spreadValues$1n({}, rest), inputLeftElement, children, inputRightElement) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 };
 
-var __defProp$1n = Object.defineProperty;
-var __getOwnPropSymbols$1n = Object.getOwnPropertySymbols;
-var __hasOwnProp$1n = Object.prototype.hasOwnProperty;
-var __propIsEnum$1n = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1n = (obj, key, value) => key in obj ? __defProp$1n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1n = (a, b) => {
+var __defProp$1m = Object.defineProperty;
+var __getOwnPropSymbols$1m = Object.getOwnPropertySymbols;
+var __hasOwnProp$1m = Object.prototype.hasOwnProperty;
+var __propIsEnum$1m = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1m = (obj, key, value) => key in obj ? __defProp$1m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1m = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1n.call(b, prop))
-      __defNormalProp$1n(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1n)
-    for (var prop of __getOwnPropSymbols$1n(b)) {
-      if (__propIsEnum$1n.call(b, prop))
-        __defNormalProp$1n(a, prop, b[prop]);
+    if (__hasOwnProp$1m.call(b, prop))
+      __defNormalProp$1m(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1m)
+    for (var prop of __getOwnPropSymbols$1m(b)) {
+      if (__propIsEnum$1m.call(b, prop))
+        __defNormalProp$1m(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$1a = (source, exclude) => {
+var __objRest$19 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1n.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1m.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1n)
-    for (var prop of __getOwnPropSymbols$1n(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1n.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1m)
+    for (var prop of __getOwnPropSymbols$1m(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1m.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -8150,7 +8227,7 @@ const DatePickerField = forwardRef$1((_a, ref) => {
     onChange: onChangeCallback = identity,
     inputLeftElement,
     inputRightElement
-  } = _b, rest = __objRest$1a(_b, [
+  } = _b, rest = __objRest$19(_b, [
     "name",
     "minValue",
     "maxValue",
@@ -8194,7 +8271,7 @@ const DatePickerField = forwardRef$1((_a, ref) => {
       },
       /* @__PURE__ */ React.createElement(
         DatePicker,
-        __spreadValues$1n({
+        __spreadValues$1m({
           firstDayOfWeek,
           "aria-label": label,
           isInvalid: !!errors[name],
@@ -8210,30 +8287,30 @@ const DatePickerField = forwardRef$1((_a, ref) => {
   );
 });
 
-var __defProp$1m = Object.defineProperty;
-var __getOwnPropSymbols$1m = Object.getOwnPropertySymbols;
-var __hasOwnProp$1m = Object.prototype.hasOwnProperty;
-var __propIsEnum$1m = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1m = (obj, key, value) => key in obj ? __defProp$1m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1m = (a, b) => {
+var __defProp$1l = Object.defineProperty;
+var __getOwnPropSymbols$1l = Object.getOwnPropertySymbols;
+var __hasOwnProp$1l = Object.prototype.hasOwnProperty;
+var __propIsEnum$1l = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1l = (obj, key, value) => key in obj ? __defProp$1l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1l = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1m.call(b, prop))
-      __defNormalProp$1m(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1m)
-    for (var prop of __getOwnPropSymbols$1m(b)) {
-      if (__propIsEnum$1m.call(b, prop))
-        __defNormalProp$1m(a, prop, b[prop]);
+    if (__hasOwnProp$1l.call(b, prop))
+      __defNormalProp$1l(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1l)
+    for (var prop of __getOwnPropSymbols$1l(b)) {
+      if (__propIsEnum$1l.call(b, prop))
+        __defNormalProp$1l(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$19 = (source, exclude) => {
+var __objRest$18 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1m.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1l.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1m)
-    for (var prop of __getOwnPropSymbols$1m(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1m.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1l)
+    for (var prop of __getOwnPropSymbols$1l(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1l.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -8252,7 +8329,7 @@ const DateRangePickerField = forwardRef$1((_a, ref) => {
     isClearable = true,
     onSave,
     buttonLabel = "Save"
-  } = _b, rest = __objRest$19(_b, [
+  } = _b, rest = __objRest$18(_b, [
     "name",
     "minValue",
     "maxValue",
@@ -8291,7 +8368,7 @@ const DateRangePickerField = forwardRef$1((_a, ref) => {
     },
     ({ value, onChange }, { formState: { errors } }) => /* @__PURE__ */ React.createElement(
       DateRangePicker,
-      __spreadValues$1m({
+      __spreadValues$1l({
         firstDayOfWeek,
         "aria-label": label,
         isInvalid: !!errors[name],
@@ -8309,82 +8386,6 @@ const DateRangePickerField = forwardRef$1((_a, ref) => {
   );
 });
 
-const tooltipIconMap = {
-  success: CheckCircleSolid,
-  warning: AlertTriangleSolid,
-  error: AlertCircleSolid,
-  danger: AlertOctagonSolid,
-  info: InfoSolid,
-  ai: BrightnessSolid,
-  default: HelpCircleSolid,
-  ghost: HelpCircleSolid
-};
-
-var __defProp$1l = Object.defineProperty;
-var __getOwnPropSymbols$1l = Object.getOwnPropertySymbols;
-var __hasOwnProp$1l = Object.prototype.hasOwnProperty;
-var __propIsEnum$1l = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1l = (obj, key, value) => key in obj ? __defProp$1l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1l = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1l.call(b, prop))
-      __defNormalProp$1l(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1l)
-    for (var prop of __getOwnPropSymbols$1l(b)) {
-      if (__propIsEnum$1l.call(b, prop))
-        __defNormalProp$1l(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest$18 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$1l.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1l)
-    for (var prop of __getOwnPropSymbols$1l(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1l.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const Tooltip = (_a) => {
-  var _b = _a, {
-    variant = "default",
-    hasArrow = true,
-    title = "",
-    description = "",
-    hasIcon = false
-  } = _b, rest = __objRest$18(_b, [
-    "variant",
-    "hasArrow",
-    "title",
-    "description",
-    "hasIcon"
-  ]);
-  const iconVariant = variant;
-  const icon = tooltipIconMap[iconVariant];
-  const TooltipContent = /* @__PURE__ */ React.createElement(HStack, { alignItems: "flex-start" }, hasIcon && /* @__PURE__ */ React.createElement(Icon, { as: icon, color: `icon.toast.${iconVariant}` }), /* @__PURE__ */ React.createElement(VStack, { spacing: 0, alignItems: "flex-start" }, /* @__PURE__ */ React.createElement(Label, { size: "sm" }, title), /* @__PURE__ */ React.createElement(
-    P,
-    {
-      variant: "14",
-      sx: {
-        color: !variant || variant === "ai" ? "text.inverted" : "text.default"
-      }
-    },
-    description
-  )));
-  return /* @__PURE__ */ React.createElement(
-    Tooltip$2,
-    __spreadValues$1l({
-      hasArrow,
-      hasIcon,
-      label: title || description ? TooltipContent : void 0,
-      variant
-    }, rest)
-  );
-};
-
 var __defProp$1k = Object.defineProperty;
 var __getOwnPropSymbols$1k = Object.getOwnPropertySymbols;
 var __hasOwnProp$1k = Object.prototype.hasOwnProperty;