@northlight/ui 2.36.6 → 2.36.7

package/dist/umd/northlight.cjs

@@ -649,18 +649,18 @@
     baseStyle: {
       link: {
         padding: [0.5, 1],
-        color: "primary",
-        fontWeight: "600",
-        fontSize: "semibold",
+        color: "text.default",
+        fontWeight: "semibold",
+        fontSize: "md",
         _hover: {
-          bg: "blue.50",
+          bg: "brand-alt",
           borderRadius: "base",
           textDecor: "none"
         }
       },
       separator: {
-        color: "gray.300",
-        fontSize: "semibold"
+        color: "subdued",
+        fontSize: "sm"
       }
     }
   };
@@ -2336,7 +2336,7 @@
           fontSize: "xs",
           fontWeight: "semibold",
           padding: sizing["0a"],
-          bgColor: color.red["500"],
+          bgColor: color.destructive,
           color: color.text.inverted,
           borderRadius: borderRadius.avatar.square,
           border: "none"
@@ -3322,21 +3322,21 @@
     }
   };
   const getInvalidColorStyles = (isInvalid, isImage = true, currentTheme = "webappTheme") => ({
-    borderColor: isInvalid ? "red.500" : "gray.300",
-    bgColor: isInvalid && "red.50",
+    borderColor: isInvalid ? "border.error" : "border.default",
+    bgColor: isInvalid && "bg.error.default",
     animation: isInvalid && `500ms ${shakeAnimation} ease`,
     _hover: isImage && {
-      bgColor: isInvalid ? "red.50" : getBgColor(currentTheme),
-      borderColor: isInvalid ? "red.500" : "blue.500"
+      bgColor: isInvalid ? "bg.error.default" : getBgColor(currentTheme),
+      borderColor: isInvalid ? "border.error" : "border.brand.default"
     }
   });
   const getAiColorStyles = (isInvalid, isImage = true) => ({
-    borderColor: isInvalid ? "red.500" : "gray.300",
-    bgColor: isInvalid && "red.50",
+    borderColor: isInvalid ? "border.error" : "border.default",
+    bgColor: isInvalid && "bg.error.default",
     animation: isInvalid && `500ms ${shakeAnimation} ease`,
     _hover: isImage && {
-      bgColor: isInvalid ? "red.50" : "bg.filled",
-      borderColor: isInvalid ? "red.500" : "border.ai"
+      bgColor: isInvalid ? "bg.error.default" : "bg.filled",
+      borderColor: isInvalid ? "border.error" : "border.ai"
     }
   });
   const FilePicker$1 = {
@@ -3571,6 +3571,17 @@
     }
   };
 
+  const Progress = {
+    baseStyle: ({ theme: { colors: color } }) => ({
+      track: {
+        bg: color["subdued-alt"]
+      },
+      filledTrack: {
+        bg: color.brand
+      }
+    })
+  };
+
   var components = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Alert: Alert$1,
@@ -3612,6 +3623,7 @@
     PaneDivider: PaneDivider$1,
     PinInput: PinInput$1,
     Popover: Popover$1,
+    Progress: Progress,
     Radio: Radio$1,
     Select: Select$1,
     Small: Small$1,
@@ -4915,7 +4927,7 @@
       { ml: spacing },
       (_child, idx) => idx > 0
     );
-    return /* @__PURE__ */ React.createElement(react.HStack, __spreadValues$1Y({ bgColor: "background.default" }, rest), /* @__PURE__ */ React.createElement(react.HStack, { spacing: 0 }, /* @__PURE__ */ React.createElement(OverflowGroup, { max, onChange: setNbrRemainingAvatars }, childrenWithMargin)), nbrRemainingAvatars > 0 && /* @__PURE__ */ React.createElement(Small, { sx: { color: "blue.500" } }, "+", nbrRemainingAvatars));
+    return /* @__PURE__ */ React.createElement(react.HStack, __spreadValues$1Y({ bgColor: "background.default" }, rest), /* @__PURE__ */ React.createElement(react.HStack, { spacing: 0 }, /* @__PURE__ */ React.createElement(OverflowGroup, { max, onChange: setNbrRemainingAvatars }, childrenWithMargin)), nbrRemainingAvatars > 0 && /* @__PURE__ */ React.createElement(Small, { sx: { color: "brand" } }, "+", nbrRemainingAvatars));
   };
 
   var __defProp$1X = Object.defineProperty;
@@ -6585,7 +6597,7 @@
         fontWeight: "medium",
         variant: isSelected ? "brand" : "ghost",
         ring: isToday && !isSelected ? "1px" : "0px",
-        ringColor: "blue.500"
+        ringColor: "brand"
       }),
       formattedDate
     ));
@@ -6902,11 +6914,11 @@
         type: "button",
         ref,
         borderRadius: "xs",
-        bgColor: isHighlighted ? "brand-alt" : isSelected ? "blue.500" : "transparent",
+        bgColor: isHighlighted ? "brand-alt" : isSelected ? "brand" : "transparent",
         color: isSelected ? "text.inverted" : "text.default",
         fontSize: "sm",
         ring: isToday && !isSelected ? "1px" : "0px",
-        ringColor: "blue.500",
+        ringColor: "brand",
         mx: "-1px",
         ml: isToday ? "-2px " : void 0,
         my: "0a",
@@ -6921,7 +6933,7 @@
           ringOffset: "1px"
         },
         _hover: {
-          bgColor: isSelected ? "blue.400" : "bg.filled",
+          bgColor: isSelected ? " background.button.brand-hover" : "bg.filled",
           _disabled: {
             bgColor: "transparent"
           }
@@ -11529,7 +11541,7 @@
           {
             as: onlyImageAccepted ? NorthlightIcons.Image03Solid : NorthlightIcons.UploadCloudSolid,
             boxSize: "32px",
-            color: isInvalid ? "red.500" : editable ? "blue.500" : "gray.300",
+            color: isInvalid ? "destructive" : editable ? "brand" : "text.subdued",
             display: isImage && !hasLoaded ? "inline-block" : "none",
             "aria-label": "file-icon-upload"
           }
@@ -11561,7 +11573,7 @@
           {
             sx: {
               textDecoration: "underline",
-              color: isInvalid ? "red.500" : "blue.500"
+              color: isInvalid ? "destructive" : "brand"
             },
             display: isLoading || hasLoaded ? "none" : "default"
           },
@@ -11611,7 +11623,7 @@
               "aria-label": "delete-file",
               onClick: confirmDelete ? deleteModal.onOpen : clearImage,
               icon: NorthlightIcons.TrashFullDuo,
-              color: "red.500"
+              color: "destructive"
             }
           )
         )
@@ -11850,12 +11862,12 @@
           {
             as: onlyImageAccepted ? NorthlightIcons.Image03Solid : NorthlightIcons.UploadCloudSolid,
             boxSize: "32px",
-            color: isInvalid ? "red.500 " : active ? "blue.500 " : "gray.300",
+            color: isInvalid ? "destructive" : active ? "brand" : "text.subdued",
             "aria-label": "image-icon-upload",
             mb: onlyImageAccepted ? "0a" : 0
           }
         ),
-        /* @__PURE__ */ React.createElement(react.HStack, { spacing: 1, display: isInvalid ? "none" : "flex" }, /* @__PURE__ */ React.createElement(P, { variant: "14", textAlign: "center", alignSelf: "center" }, "Drag & drop ", onlyImageAccepted ? "images" : "files", " here or"), /* @__PURE__ */ React.createElement(Lead, { sx: { textDecoration: "underline", color: "blue.500" } }, "choose ", onlyImageAccepted ? "image" : "file")),
+        /* @__PURE__ */ React.createElement(react.HStack, { spacing: 1, display: isInvalid ? "none" : "flex" }, /* @__PURE__ */ React.createElement(P, { variant: "14", textAlign: "center", alignSelf: "center" }, "Drag & drop ", onlyImageAccepted ? "images" : "files", " here or"), /* @__PURE__ */ React.createElement(Lead, { sx: { textDecoration: "underline", color: "brand" } }, "choose ", onlyImageAccepted ? "image" : "file")),
         /* @__PURE__ */ React.createElement(P, { variant: "14", textAlign: "center", alignSelf: "center", display: isInvalid ? "initial" : "none" }, errorMessage),
         /* @__PURE__ */ React.createElement(P, { variant: "14", sx: { color: "gray.400" } }, "Max file size is ", readableFileSize(maxFileSize))
       ), /* @__PURE__ */ React.createElement(
@@ -12437,7 +12449,7 @@
   const NumberInputStepper = ({
     includePercentage = false,
     enableStepperArrows = false
-  }) => /* @__PURE__ */ React.createElement(react.NumberInputStepper, null, /* @__PURE__ */ React.createElement(react.HStack, { alignItems: "center", h: "full" }, includePercentage && /* @__PURE__ */ React.createElement(react.Center, { bgColor: "gray.50", borderRadius: "md", boxSize: "6" }, /* @__PURE__ */ React.createElement(P, null, "%")), enableStepperArrows && /* @__PURE__ */ React.createElement(react.HStack, { alignItems: "center", h: "full" }, /* @__PURE__ */ React.createElement(react.Divider, { orientation: "vertical", h: "50%" }), /* @__PURE__ */ React.createElement(react.NumberIncrementStepper, { border: "none" }, /* @__PURE__ */ React.createElement(
+  }) => /* @__PURE__ */ React.createElement(react.NumberInputStepper, null, /* @__PURE__ */ React.createElement(react.HStack, { alignItems: "center", h: "full" }, includePercentage && /* @__PURE__ */ React.createElement(react.Center, { bgColor: "bg.layer", borderRadius: "md", boxSize: "6" }, /* @__PURE__ */ React.createElement(P, null, "%")), enableStepperArrows && /* @__PURE__ */ React.createElement(react.HStack, { alignItems: "center", h: "full" }, /* @__PURE__ */ React.createElement(react.Divider, { orientation: "vertical", h: "50%" }), /* @__PURE__ */ React.createElement(react.NumberIncrementStepper, { border: "none" }, /* @__PURE__ */ React.createElement(
     Icon,
     {
       as: NorthlightIcons.ChevronUpSolid,
@@ -14302,7 +14314,7 @@
         react.Box,
         {
           borderRadius: "full",
-          bgColor: "blue.500",
+          bgColor: "brand",
           boxSize: "6",
           minW: "6",
           minH: "6",