@northlight/ui 2.20.0 → 2.20.1

package/dist/es/northlight.d.ts

@@ -1597,7 +1597,7 @@ declare const DropZone: ({ sx, name, children, ...rest }: DropZoneProps) => JSX.
 
 SortableContainer is a wrapper for a <Sortable /> with a sortable item
  * */
-declare function MultiSort<itemKeys extends string | number | symbol>({ items: sortableItems, onChange, children, collisionDetection, sensors, }: MultiSortProps<itemKeys>): JSX.Element;
+declare function MultiSort<itemKeys extends string | number | symbol>({ items, onChange, children, collisionDetection, sensors, }: MultiSortProps<itemKeys>): JSX.Element;
 
 /**
  * Util component to render sortable items under sortable context
@@ -1681,7 +1681,7 @@ interface HeadingProps extends HeadingProps$1 {
  * <H1>Heading 1</H1>
  * ?)
  */
-declare const H1: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
+declare const H1: (props: HeadingProps & React__default.RefAttributes<HTMLHeadingElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * @see {@link https://northlight.dev/reference/h2}
@@ -1691,7 +1691,7 @@ declare const H1: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
  * ?)
  *
  */
-declare const H2: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
+declare const H2: (props: HeadingProps & React__default.RefAttributes<HTMLHeadingElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * @see {@link https://northlight.dev/reference/h3}
@@ -1700,7 +1700,7 @@ declare const H2: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
  * <H3>Heading 3</H3>
  * ?)
  */
-declare const H3: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
+declare const H3: (props: HeadingProps & React__default.RefAttributes<HTMLHeadingElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * @see {@link https://northlight.dev/reference/h4}
@@ -1709,7 +1709,7 @@ declare const H3: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
  * <H4>Heading 4</H4>
  * ?)
  */
-declare const H4: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
+declare const H4: (props: HeadingProps & React__default.RefAttributes<HTMLHeadingElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * @see {@link https://northlight.dev/reference/h5}
@@ -1718,7 +1718,7 @@ declare const H4: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
  * <H5>Heading 5</H5>
  * ?)
  */
-declare const H5: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
+declare const H5: (props: HeadingProps & React__default.RefAttributes<HTMLHeadingElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * @see {@link https://northlight.dev/reference/h6}
@@ -1727,7 +1727,7 @@ declare const H5: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
  * <H6>Heading 6</H6>
  * ?)
  */
-declare const H6: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
+declare const H6: (props: HeadingProps & React__default.RefAttributes<HTMLHeadingElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface PProps extends TextProps {
     variant?: '14' | '16';

package/dist/es/northlight.js

@@ -1027,7 +1027,7 @@ var __objRest$1A = (source, exclude) => {
     }
   return target;
 };
-const H1$1 = (_a) => {
+const H1$1 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
@@ -1040,11 +1040,12 @@ const H1$1 = (_a) => {
     Heading,
     __spreadValues$23({
       as: "h1",
-      sx: styles
+      sx: styles,
+      ref
     }, rest),
     children
   );
-};
+});
 
 var __defProp$22 = Object.defineProperty;
 var __getOwnPropSymbols$22 = Object.getOwnPropertySymbols;
@@ -1074,7 +1075,7 @@ var __objRest$1z = (source, exclude) => {
     }
   return target;
 };
-const H2$1 = (_a) => {
+const H2$1 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
@@ -1087,11 +1088,12 @@ const H2$1 = (_a) => {
     Heading,
     __spreadValues$22({
       as: "h2",
-      sx: styles
+      sx: styles,
+      ref
     }, rest),
     children
   );
-};
+});
 
 var __defProp$21 = Object.defineProperty;
 var __getOwnPropSymbols$21 = Object.getOwnPropertySymbols;
@@ -1121,7 +1123,7 @@ var __objRest$1y = (source, exclude) => {
     }
   return target;
 };
-const H3$1 = (_a) => {
+const H3$1 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
@@ -1134,11 +1136,12 @@ const H3$1 = (_a) => {
     Heading,
     __spreadValues$21({
       as: "h3",
-      sx: styles
+      sx: styles,
+      ref
     }, rest),
     children
   );
-};
+});
 
 var __defProp$20 = Object.defineProperty;
 var __getOwnPropSymbols$20 = Object.getOwnPropertySymbols;
@@ -1168,7 +1171,7 @@ var __objRest$1x = (source, exclude) => {
     }
   return target;
 };
-const H4$1 = (_a) => {
+const H4$1 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
@@ -1181,11 +1184,12 @@ const H4$1 = (_a) => {
     Heading,
     __spreadValues$20({
       as: "h4",
-      sx: styles
+      sx: styles,
+      ref
     }, rest),
     children
   );
-};
+});
 
 var __defProp$1$ = Object.defineProperty;
 var __getOwnPropSymbols$1$ = Object.getOwnPropertySymbols;
@@ -1215,7 +1219,7 @@ var __objRest$1w = (source, exclude) => {
     }
   return target;
 };
-const H5$1 = (_a) => {
+const H5$1 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
@@ -1228,11 +1232,12 @@ const H5$1 = (_a) => {
     Heading,
     __spreadValues$1$({
       as: "h5",
-      sx: styles
+      sx: styles,
+      ref
     }, rest),
     children
   );
-};
+});
 
 var __defProp$1_ = Object.defineProperty;
 var __getOwnPropSymbols$1_ = Object.getOwnPropertySymbols;
@@ -1262,7 +1267,7 @@ var __objRest$1v = (source, exclude) => {
     }
   return target;
 };
-const H6$1 = (_a) => {
+const H6$1 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
@@ -1275,11 +1280,12 @@ const H6$1 = (_a) => {
     Heading,
     __spreadValues$1_({
       as: "h6",
-      sx: styles
+      sx: styles,
+      ref
     }, rest),
     children
   );
-};
+});
 
 var __defProp$1Z = Object.defineProperty;
 var __getOwnPropSymbols$1Z = Object.getOwnPropertySymbols;
@@ -3062,6 +3068,7 @@ const Button = {
   variants: {
     default: ({ theme: { colors: color } }) => ({
       bgColor: color.background.button.default,
+      color: color.text.button.default,
       _hover: {
         bgColor: color.background.button["default-hover"]
       },
@@ -3084,6 +3091,7 @@ const Button = {
     }),
     success: ({ theme: { colors: color } }) => ({
       bgColor: color.background.button.success,
+      color: color.text.button.success,
       _hover: {
         bg: color.background.button["success-hover"],
         _disabled: {
@@ -3136,6 +3144,15 @@ const Button = {
         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,
@@ -8736,15 +8753,12 @@ var __objRest$K = (source, exclude) => {
 };
 function getComponents() {
   return {
+    Menu: (props) => /* @__PURE__ */ React.createElement(Box, { "data-testid": "select-menu-wrapper-test-id" }, /* @__PURE__ */ React.createElement(chakraComponents.Menu, __spreadValues$W({}, props), props.children)),
     DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React.createElement(chakraComponents.DropdownIndicator, __spreadValues$W({}, props), /* @__PURE__ */ React.createElement(Icon$1, { as: props.selectProps.icon })) : /* @__PURE__ */ React.createElement(chakraComponents.DropdownIndicator, __spreadValues$W({}, props)),
     Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React.createElement(chakraComponents.Option, __spreadValues$W({}, props), props.selectProps.customOption(props.data)) : /* @__PURE__ */ React.createElement(chakraComponents.Option, __spreadValues$W({}, props)),
     MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React.createElement(chakraComponents.MultiValueContainer, __spreadValues$W({}, props), props.selectProps.customTag(props.data)) : /* @__PURE__ */ React.createElement(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(chakraComponents.Control, __spreadValues$W({}, props), /* @__PURE__ */ React.createElement(HStack, { w: "full", pl: "2" }, props.selectProps.leftComponent, /* @__PURE__ */ React.createElement(HStack, { w: "full", justify: "space-between" }, children))) : /* @__PURE__ */ React.createElement(chakraComponents.Control, __spreadValues$W({}, props), children);
     }
   };
@@ -9490,25 +9504,18 @@ var __spreadValues$J = (a, b) => {
 };
 var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 function MultiSort({
-  items: sortableItems,
+  items,
   onChange = () => {
   },
   children,
   collisionDetection,
   sensors
 }) {
-  const [items, setItems] = useState(sortableItems);
   const [activeItem, setActiveItem] = useState(null);
   const moveBetweenContainers = (activeContainerName, activeIndex, overContainerName, overIndex, item) => __spreadProps$7(__spreadValues$J({}, items), {
     [activeContainerName]: remove(activeIndex, 1, items[activeContainerName]),
     [overContainerName]: insert(overIndex, item, items[overContainerName])
   });
-  useEffect(() => {
-    onChange(items);
-  }, [items]);
-  useEffect(() => {
-    setItems(sortableItems);
-  }, [sortableItems]);
   const customSensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
@@ -9535,46 +9542,40 @@ function MultiSort({
   const handleDragOver = (e) => {
     const { activeContainerName, overContainerName, id, overId } = getContainers(e);
     if (!(!activeContainerName || !overContainerName || activeContainerName === overContainerName)) {
-      setItems((prev) => {
-        const activeIndex = indexOf(id, prev[activeContainerName]);
-        const overIndex = indexOf(overId, prev[overContainerName]);
-        return moveBetweenContainers(
-          activeContainerName,
-          activeIndex,
-          overContainerName,
-          overIndex,
-          id
-        );
-      });
+      const activeIndex = indexOf(id, items[activeContainerName]);
+      const overIndex = 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 = indexOf(id, prev[activeContainerName]);
-      const overIndex = indexOf(overId, prev[overContainerName]);
-      let newItems;
-      if (activeContainerName === overContainerName) {
-        newItems = __spreadProps$7(__spreadValues$J({}, prev), {
-          [overContainerName]: arrayMove(
-            prev[overContainerName],
-            activeIndex,
-            overIndex
-          )
-        });
-      } else {
-        newItems = moveBetweenContainers(
-          activeContainerName,
+    if (!activeContainerName || !overContainerName)
+      return;
+    const activeIndex = indexOf(id, items[activeContainerName]);
+    const overIndex = indexOf(overId, items[overContainerName]);
+    if (activeContainerName === overContainerName) {
+      onChange(__spreadProps$7(__spreadValues$J({}, items), {
+        [overContainerName]: 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,