@northlight/ui 2.20.0 → 2.21.0

package/dist/umd/northlight.cjs

@@ -990,7 +990,7 @@
       }
     return target;
   };
-  const H1$1 = (_a) => {
+  const H1$1 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
@@ -1003,11 +1003,12 @@
       react.Heading,
       __spreadValues$23({
         as: "h1",
-        sx: styles
+        sx: styles,
+        ref
       }, rest),
       children
     );
-  };
+  });
 
   var __defProp$22 = Object.defineProperty;
   var __getOwnPropSymbols$22 = Object.getOwnPropertySymbols;
@@ -1037,7 +1038,7 @@
       }
     return target;
   };
-  const H2$1 = (_a) => {
+  const H2$1 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
@@ -1050,11 +1051,12 @@
       react.Heading,
       __spreadValues$22({
         as: "h2",
-        sx: styles
+        sx: styles,
+        ref
       }, rest),
       children
     );
-  };
+  });
 
   var __defProp$21 = Object.defineProperty;
   var __getOwnPropSymbols$21 = Object.getOwnPropertySymbols;
@@ -1084,7 +1086,7 @@
       }
     return target;
   };
-  const H3$1 = (_a) => {
+  const H3$1 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
@@ -1097,11 +1099,12 @@
       react.Heading,
       __spreadValues$21({
         as: "h3",
-        sx: styles
+        sx: styles,
+        ref
       }, rest),
       children
     );
-  };
+  });
 
   var __defProp$20 = Object.defineProperty;
   var __getOwnPropSymbols$20 = Object.getOwnPropertySymbols;
@@ -1131,7 +1134,7 @@
       }
     return target;
   };
-  const H4$1 = (_a) => {
+  const H4$1 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
@@ -1144,11 +1147,12 @@
       react.Heading,
       __spreadValues$20({
         as: "h4",
-        sx: styles
+        sx: styles,
+        ref
       }, rest),
       children
     );
-  };
+  });
 
   var __defProp$1$ = Object.defineProperty;
   var __getOwnPropSymbols$1$ = Object.getOwnPropertySymbols;
@@ -1178,7 +1182,7 @@
       }
     return target;
   };
-  const H5$1 = (_a) => {
+  const H5$1 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
@@ -1191,11 +1195,12 @@
       react.Heading,
       __spreadValues$1$({
         as: "h5",
-        sx: styles
+        sx: styles,
+        ref
       }, rest),
       children
     );
-  };
+  });
 
   var __defProp$1_ = Object.defineProperty;
   var __getOwnPropSymbols$1_ = Object.getOwnPropertySymbols;
@@ -1225,7 +1230,7 @@
       }
     return target;
   };
-  const H6$1 = (_a) => {
+  const H6$1 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
@@ -1238,11 +1243,12 @@
       react.Heading,
       __spreadValues$1_({
         as: "h6",
-        sx: styles
+        sx: styles,
+        ref
       }, rest),
       children
     );
-  };
+  });
 
   var __defProp$1Z = Object.defineProperty;
   var __getOwnPropSymbols$1Z = Object.getOwnPropertySymbols;
@@ -1747,7 +1753,7 @@
       }
     return a;
   };
-  const Badge = React.forwardRef((props, ref) => /* @__PURE__ */ React.createElement(react.Badge, __spreadValues$1Q({ ref }, props)));
+  const Badge$1 = React.forwardRef((props, ref) => /* @__PURE__ */ React.createElement(react.Badge, __spreadValues$1Q({ ref }, props)));
 
   var __defProp$1P = Object.defineProperty;
   var __getOwnPropSymbols$1P = Object.getOwnPropertySymbols;
@@ -3025,6 +3031,7 @@
     variants: {
       default: ({ theme: { colors: color } }) => ({
         bgColor: color.background.button.default,
+        color: color.text.button.default,
         _hover: {
           bgColor: color.background.button["default-hover"]
         },
@@ -3047,6 +3054,7 @@
       }),
       success: ({ theme: { colors: color } }) => ({
         bgColor: color.background.button.success,
+        color: color.text.button.success,
         _hover: {
           bg: color.background.button["success-hover"],
           _disabled: {
@@ -3099,6 +3107,15 @@
           bgColor: color.background.button["link-active"]
         }
       }),
+      outline: ({ theme: { colors: color } }) => ({
+        color: color.text.default,
+        _hover: {
+          bg: color.background.button["ghost-hover"]
+        },
+        _active: {
+          bg: color.background.button["ghost-active"]
+        }
+      }),
       ghost: ({ theme: { colors: color } }) => ({
         color: color.text.default,
         bgColor: color.background.button.ghost,
@@ -3855,16 +3872,16 @@
       }
     },
     variants: {
-      solid: ({ bgColor, colorScheme }) => ({
+      solid: ({ theme: { colors }, colorScheme }) => ({
         container: {
-          bgColor: bgColor != null ? bgColor : colorScheme,
-          color: getContrastColor(bgColor != null ? bgColor : react.useToken("colors", colorScheme))
+          bgColor: colors[colorScheme] && colors[colorScheme][500] ? colors[colorScheme][500] : colorScheme,
+          color: colorScheme === "yellow" ? "mono.black" : "mono.white"
         }
       }),
-      subtle: () => ({
+      subtle: ({ theme: { colors }, colorScheme }) => ({
         container: {
-          bgColor: react.useToken("colors", "background.tag.subtle"),
-          color: "text.default"
+          bgColor: colors[colorScheme] && colors[colorScheme][100] ? colors[colorScheme][100] : colorScheme,
+          color: "mono.black"
         }
       }),
       ai: {
@@ -5610,10 +5627,39 @@
     }
   };
 
+  const Badge = {
+    baseStyle: ({ colorScheme, theme: { colors } }) => {
+      const bgColor = colorScheme === "mediatoolBlue" ? colors[colorScheme][100] : colors[colorScheme] && colors[colorScheme][100];
+      const textColor = colorScheme === "mediatoolBlue" ? colors[colorScheme][800] : colors[colorScheme] && colors[colorScheme][800];
+      return {
+        bgColor,
+        color: textColor
+      };
+    },
+    variants: {
+      solid: ({ colorScheme, theme: { colors } }) => {
+        const bgColor = colorScheme === "mediatoolBlue" ? colors[colorScheme][500] : colors[colorScheme] && colors[colorScheme][500];
+        const textColor = colorScheme === "yellow" ? "mono.black" : "mono.white";
+        return {
+          bgColor,
+          color: textColor
+        };
+      },
+      outline: ({ colorScheme, theme: { colors } }) => {
+        const textColor = colorScheme === "mediatoolBlue" ? colors[colorScheme][500] : colors[colorScheme] && colors[colorScheme][700];
+        return {
+          bgColor: "mono.transparent",
+          color: textColor
+        };
+      }
+    }
+  };
+
   var components = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Alert: Alert,
     Avatar: Avatar,
+    Badge: Badge,
     Blinker: Blinker,
     Blockquote: Blockquote,
     Breadcrumb: Breadcrumb,
@@ -8699,15 +8745,12 @@
   };
   function getComponents() {
     return {
+      Menu: (props) => /* @__PURE__ */ React.createElement(react.Box, { "data-testid": "select-menu-wrapper-test-id" }, /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Menu, __spreadValues$W({}, props), props.children)),
       DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$W({}, props), /* @__PURE__ */ React.createElement(Icon$1, { as: props.selectProps.icon })) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$W({}, props)),
       Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$W({}, props), props.selectProps.customOption(props.data)) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$W({}, props)),
       MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$W({}, props), props.selectProps.customTag(props.data)) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$W({}, props)),
       Control: (_a) => {
-        var _b = _a, {
-          children
-        } = _b, props = __objRest$K(_b, [
-          "children"
-        ]);
+        var _b = _a, { children } = _b, props = __objRest$K(_b, ["children"]);
         return props.selectProps.leftComponent ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Control, __spreadValues$W({}, props), /* @__PURE__ */ React.createElement(react.HStack, { w: "full", pl: "2" }, props.selectProps.leftComponent, /* @__PURE__ */ React.createElement(react.HStack, { w: "full", justify: "space-between" }, children))) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Control, __spreadValues$W({}, props), children);
       }
     };
@@ -9453,25 +9496,18 @@
   };
   var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
   function MultiSort({
-    items: sortableItems,
+    items,
     onChange = () => {
     },
     children,
     collisionDetection,
     sensors
   }) {
-    const [items, setItems] = React.useState(sortableItems);
     const [activeItem, setActiveItem] = React.useState(null);
     const moveBetweenContainers = (activeContainerName, activeIndex, overContainerName, overIndex, item) => __spreadProps$7(__spreadValues$J({}, items), {
       [activeContainerName]: ramda.remove(activeIndex, 1, items[activeContainerName]),
       [overContainerName]: ramda.insert(overIndex, item, items[overContainerName])
     });
-    React.useEffect(() => {
-      onChange(items);
-    }, [items]);
-    React.useEffect(() => {
-      setItems(sortableItems);
-    }, [sortableItems]);
     const customSensors = core.useSensors(
       core.useSensor(core.PointerSensor),
       core.useSensor(core.KeyboardSensor, {
@@ -9498,46 +9534,40 @@
     const handleDragOver = (e) => {
       const { activeContainerName, overContainerName, id, overId } = getContainers(e);
       if (!(!activeContainerName || !overContainerName || activeContainerName === overContainerName)) {
-        setItems((prev) => {
-          const activeIndex = ramda.indexOf(id, prev[activeContainerName]);
-          const overIndex = ramda.indexOf(overId, prev[overContainerName]);
-          return moveBetweenContainers(
-            activeContainerName,
-            activeIndex,
-            overContainerName,
-            overIndex,
-            id
-          );
-        });
+        const activeIndex = ramda.indexOf(id, items[activeContainerName]);
+        const overIndex = ramda.indexOf(overId, items[overContainerName]);
+        onChange(moveBetweenContainers(
+          activeContainerName,
+          activeIndex,
+          overContainerName,
+          overIndex,
+          id
+        ));
       }
     };
     const handleDragEnd = (e) => {
       const { activeContainerName, overContainerName, id, overId, active } = getContainers(e);
-      setItems((prev) => {
-        if (!activeContainerName || !overContainerName)
-          return prev;
-        const activeIndex = ramda.indexOf(id, prev[activeContainerName]);
-        const overIndex = ramda.indexOf(overId, prev[overContainerName]);
-        let newItems;
-        if (activeContainerName === overContainerName) {
-          newItems = __spreadProps$7(__spreadValues$J({}, prev), {
-            [overContainerName]: sortable.arrayMove(
-              prev[overContainerName],
-              activeIndex,
-              overIndex
-            )
-          });
-        } else {
-          newItems = moveBetweenContainers(
-            activeContainerName,
+      if (!activeContainerName || !overContainerName)
+        return;
+      const activeIndex = ramda.indexOf(id, items[activeContainerName]);
+      const overIndex = ramda.indexOf(overId, items[overContainerName]);
+      if (activeContainerName === overContainerName) {
+        onChange(__spreadProps$7(__spreadValues$J({}, items), {
+          [overContainerName]: sortable.arrayMove(
+            items[overContainerName],
             activeIndex,
-            overContainerName,
-            overIndex,
-            active == null ? void 0 : active.id
-          );
-        }
-        return newItems;
-      });
+            overIndex
+          )
+        }));
+      } else {
+        onChange(moveBetweenContainers(
+          activeContainerName,
+          activeIndex,
+          overContainerName,
+          overIndex,
+          active == null ? void 0 : active.id
+        ));
+      }
     };
     return /* @__PURE__ */ React.createElement(
       DragAndDrop,
@@ -14076,7 +14106,7 @@
   exports.AsyncError = AsyncError;
   exports.Avatar = Avatar$1;
   exports.AvatarGroup = AvatarGroup;
-  exports.Badge = Badge;
+  exports.Badge = Badge$1;
   exports.Blinker = Blinker$1;
   exports.Blockquote = Blockquote$1;
   exports.Button = Button$1;