@northlight/ui 2.32.3 → 2.32.5

package/dist/es/northlight.js

@@ -9,7 +9,7 @@ import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-fo
 export { useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
 import { useToken, useMultiStyleConfig as useMultiStyleConfig$1, chakra as chakra$1 } from '@chakra-ui/system';
 import { palette, WebappComponentsTokensSet, WebappSystemTokensSet, typography, TottComponentsTokensSet, TottSystemTokensSet, coreZIndex, coreSizing, coreSpacing, coreFontWeight, coreBoxShadow, coreFontSize, coreLineHeight, coreBorderRadius } from '@northlight/tokens';
-import { UserSquareDuo, BusinessContactDuo, CheckDuo, ChevronUpDuo, ChevronDownDuo, ColorsDuo, CheckSolid, CalendarDuo, ChevronLeftSolid, ChevronRightSolid, XCloseSolid, CheckCircleSolid, AlertTriangleSolid, AlertCircleSolid, BellSolid, BrightnessSolid, HelpCircleSolid, TrashDuo, SearchDuo, DotsMatrixSolid, DragDuo, EditDuo, ZoomInDuo, Image03Solid, UploadCloudSolid, FileBlankDuo, EditBoxDuo, DownloadDuo, TrashFullDuo, Image03Duo, ChevronUpSolid, ChevronDownSolid, CopyDuo, PlusSolid } from '@northlight/icons';
+import { UserSquareDuo, BusinessContactDuo, CheckDuo, ChevronUpDuo, ChevronDownDuo, ColorsDuo, CheckSolid, CalendarDuo, ChevronLeftSolid, ChevronRightSolid, XCloseSolid, CheckCircleSolid, AlertTriangleSolid, AlertCircleSolid, AlertOctagonSolid, InfoSolid, BrightnessSolid, HelpCircleSolid, TrashDuo, SearchDuo, DotsMatrixSolid, DragDuo, EditDuo, ZoomInDuo, Image03Solid, UploadCloudSolid, FileBlankDuo, EditBoxDuo, DownloadDuo, TrashFullDuo, Image03Duo, ChevronUpSolid, ChevronDownSolid, BellSolid, CopyDuo, PlusSolid } from '@northlight/icons';
 import { joiResolver } from '@hookform/resolvers/joi';
 import { useCheckboxGroup, useCheckboxGroupItem } from '@react-aria/checkbox';
 import { useRadioGroup, useRadio } from '@react-aria/radio';
@@ -4857,6 +4857,11 @@ const Tooltip$1 = {
       bgColor: color["destructive-alt"],
       [$arrowBg.variable]: color["destructive-alt"]
     }),
+    error: ({ theme: { colors: color } }) => ({
+      color: "text.over.error",
+      bgColor: color["destructive-alt"],
+      [$arrowBg.variable]: color["destructive-alt"]
+    }),
     ai: ({ theme: { colors: color } }) => ({
       bgColor: color.bg.ai.default,
       [$arrowBg.variable]: color.bg.ai.default
@@ -7783,12 +7788,12 @@ const DateRangePickerField = forwardRef$1((_a, ref) => {
   );
 });
 
-const toastIconMap = {
+const tooltipIconMap = {
   success: CheckCircleSolid,
   warning: AlertTriangleSolid,
   error: AlertCircleSolid,
-  danger: AlertCircleSolid,
-  info: BellSolid,
+  danger: AlertOctagonSolid,
+  info: InfoSolid,
   ai: BrightnessSolid,
   default: HelpCircleSolid,
   ghost: HelpCircleSolid
@@ -7837,7 +7842,7 @@ const Tooltip = (_a) => {
     "hasIcon"
   ]);
   const iconVariant = variant;
-  const icon = toastIconMap[iconVariant];
+  const icon = tooltipIconMap[iconVariant];
   const TooltipContent = /* @__PURE__ */ React.createElement(HStack, { alignItems: "flex-start" }, hasIcon && /* @__PURE__ */ React.createElement(Icon$1, { as: icon, color: `icon.toast.${iconVariant}` }), /* @__PURE__ */ React.createElement(VStack, { spacing: 0, alignItems: "flex-start" }, /* @__PURE__ */ React.createElement(Label$1, { size: "sm" }, title), /* @__PURE__ */ React.createElement(
     P$1,
     {
@@ -13374,6 +13379,17 @@ const TextField = forwardRef$1((_a, ref) => {
   );
 });
 
+const toastIconMap = {
+  success: CheckCircleSolid,
+  warning: AlertTriangleSolid,
+  error: AlertCircleSolid,
+  danger: AlertCircleSolid,
+  info: BellSolid,
+  ai: BrightnessSolid,
+  default: HelpCircleSolid,
+  ghost: HelpCircleSolid
+};
+
 var __defProp$g = Object.defineProperty;
 var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
 var __hasOwnProp$g = Object.prototype.hasOwnProperty;
@@ -14335,7 +14351,7 @@ const ComboPicker = (_a) => {
   var _a2;
   const { isOpen, onToggle, onClose } = useDisclosure();
   const [inputValueState, setInputValueState] = useState(valueProp == null ? void 0 : valueProp.input);
-  const [selectOptionState, setselectOptionState] = useState((_a2 = valueProp == null ? void 0 : valueProp.option) != null ? _a2 : options[0]);
+  const [selectOptionState, setselectOptionState] = useState(valueProp == null ? void 0 : valueProp.option);
   const [enableSelectInput, setEnableSelectInput] = useState(false);
   const isInputValueControlled = typeof (valueProp == null ? void 0 : valueProp.input) !== "undefined";
   const inputValue = isInputValueControlled ? valueProp.input : inputValueState;
@@ -14343,7 +14359,10 @@ const ComboPicker = (_a) => {
   const selectOption = isOptionControlled ? valueProp.option : selectOptionState;
   const buttonRef = useRef();
   const selectRef = useRef();
-  const getNewValue = (option, input) => is(Number, input) ? { input: Number(input), option } : { option };
+  const getNewValue = (option, input) => {
+    const newValueOption = option != null ? option : options[0];
+    return is(Number, input) ? { input: Number(input), option: newValueOption } : { option: newValueOption };
+  };
   const handleInputChange = (newInputvalue) => {
     const newValue = getNewValue(selectOption, newInputvalue);
     setInputValueState(newValue.input);
@@ -14377,10 +14396,20 @@ const ComboPicker = (_a) => {
     }
   }, [enableSelectInput]);
   useEffect(() => {
-    if (!is(Number, inputValue) && defaultToZeroIfEmpty) {
-      handleInputChange(clamp(min, max, 0));
+    const needsToCorrectOption = !selectOption;
+    const needsToCorrectInput = !is(Number, inputValue) && defaultToZeroIfEmpty;
+    const option = needsToCorrectOption ? options[0] : selectOption;
+    const input = needsToCorrectInput ? clamp(min, max, 0) : inputValue;
+    if (needsToCorrectOption) {
+      setselectOptionState(option);
+    }
+    if (needsToCorrectInput) {
+      setInputValueState(input);
+    }
+    if (needsToCorrectOption || needsToCorrectInput) {
+      onChange == null ? void 0 : onChange(getNewValue(option, input));
     }
-  }, [valueProp == null ? void 0 : valueProp.input, defaultToZeroIfEmpty]);
+  }, [inputValue, defaultToZeroIfEmpty]);
   return /* @__PURE__ */ React.createElement(InputGroup, null, /* @__PURE__ */ React.createElement(
     FormattedNumberInput,
     __spreadValues$1({
@@ -14413,7 +14442,7 @@ const ComboPicker = (_a) => {
         flexShrink: "0",
         height: "100%"
       },
-      selectOption.label
+      (_a2 = selectOption == null ? void 0 : selectOption.label) != null ? _a2 : ""
     )
   ), /* @__PURE__ */ React.createElement(Box, { position: "absolute", width: "100%" }, /* @__PURE__ */ React.createElement(
     Select,