@navikt/ds-react 8.0.0 → 8.1.0

package/src/typography/Label.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import type { AkselColor } from "../types";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
@@ -55,22 +55,20 @@ export const Label: OverridableComponent<LabelProps, HTMLLabelElement> =
       },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
-
       return (
         <Component
           {...rest}
           ref={ref}
-          className={cn(
+          className={cl(
             className,
-            "navds-label",
+            "aksel-label",
             typoClassNames({
               spacing,
               visuallyHidden,
               textColor,
             }),
             {
-              "navds-label--small": size === "small",
+              "aksel-label--small": size === "small",
             },
           )}
         />

package/src/typography/util.ts

@@ -1,15 +1,14 @@
-import cl from "clsx";
+import { cl } from "../utils/helpers";
 import { TypoProps } from "./types";
 
 export const typoClassNames = (props: TypoProps & { uppercase?: boolean }) => {
-  /* Renaming to aksel-* prefix is done in components themselves */
   return cl({
-    "navds-typo--spacing": props.spacing,
-    "navds-typo--truncate": props.truncate,
-    "navds-typo--semibold": props.weight === "semibold",
-    [`navds-typo--align-${props.align}`]: props.align,
-    [`navds-typo--color-${props.textColor}`]: props.textColor,
-    "navds-typo--visually-hidden": props.visuallyHidden,
-    "navds-typo--uppercase": props.uppercase,
+    "aksel-typo--spacing": props.spacing,
+    "aksel-typo--truncate": props.truncate,
+    "aksel-typo--semibold": props.weight === "semibold",
+    [`aksel-typo--align-${props.align}`]: props.align,
+    [`aksel-typo--color-${props.textColor}`]: props.textColor,
+    "aksel-typo--visually-hidden": props.visuallyHidden,
+    "aksel-typo--uppercase": props.uppercase,
   });
 };

package/src/{util → utils/components}/composition-warning/CompositionWarning.tsx

@@ -12,8 +12,8 @@
  * This is guidance only: warnings are logged to the console in development, never enforced at runtime.
  */
 import React, { useEffect, useRef } from "react";
-import { Slot } from "../../slot/Slot";
-import { createStrictContext } from "../create-strict-context";
+import { createStrictContext } from "../../helpers";
+import { Slot } from "../slot/Slot";
 
 type CompositionName = string;
 

package/src/{util → utils/components}/focus-boundary/FocusBoundary.tsx

@@ -5,12 +5,15 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Slot } from "../../slot/Slot";
-import { useClientLayoutEffect, useMergeRefs } from "../../util/hooks";
-import { hideNonTargetElements } from "../hideNonTargetElements";
-import { useValueAsRef } from "../hooks/useValueAsRef";
-import { ownerDocument } from "../owner";
-import { resolveRef } from "../resolveRef";
+import { useClientLayoutEffect } from "../../../utils-external";
+import {
+  hideNonTargetElements,
+  ownerDocument,
+  resolveRef,
+} from "../../helpers";
+import { useMergeRefs } from "../../hooks";
+import { useValueAsRef } from "../../hooks/useValueAsRef";
+import { Slot } from "../slot/Slot";
 
 /* -------------------------------------------------------------------------- */
 /*                                 FocusBoundary                                 */

package/src/{util → utils/components}/focus-guards/FocusGuards.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useMergeRefs } from "../hooks";
+import { useMergeRefs } from "../../hooks";
 
 const visuallyHidden: React.CSSProperties = {
   clip: "rect(0 0 0 0)",

package/src/{util → utils/components}/link-anchor/LinkAnchor.tsx

@@ -1,18 +1,20 @@
 import React, {
   AnchorHTMLAttributes,
+  type ComponentProps,
   HTMLAttributes,
-  SVGProps,
   forwardRef,
   useRef,
 } from "react";
 import { ArrowRightIcon } from "@navikt/aksel-icons";
-import { Slot } from "../../slot/Slot";
-import { useRenameCSS } from "../../theme/Theme";
-import { composeEventHandlers } from "../composeEventHandlers";
-import { createStrictContext } from "../create-strict-context";
-import { useMergeRefs } from "../hooks/useMergeRefs";
-import { ownerWindow } from "../owner";
-import { AsChildProps } from "../types";
+import {
+  cl,
+  composeEventHandlers,
+  createStrictContext,
+  ownerWindow,
+} from "../../helpers";
+import { useMergeRefs } from "../../hooks";
+import type { AsChildProps } from "../../types";
+import { Slot } from "../slot/Slot";
 
 type LinkAnchorOverlayContextProps = {
   anchorRef: React.RefObject<HTMLAnchorElement | null>;
@@ -38,7 +40,6 @@ const LinkAnchorOverlay = forwardRef<HTMLDivElement, LinkAnchorOverlayProps>(
     }: LinkAnchorOverlayProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
     const anchorRef = useRef<HTMLAnchorElement>(null);
 
     const Component = asChild ? Slot : "div";
@@ -48,7 +49,7 @@ const LinkAnchorOverlay = forwardRef<HTMLDivElement, LinkAnchorOverlayProps>(
         <Component
           ref={forwardedRef}
           {...restProps}
-          className={cn("navds-link-anchor__overlay", className)}
+          className={cl("aksel-link-anchor__overlay", className)}
           onClick={composeEventHandlers(onClick, (e) => {
             if (
               e.target === anchorRef.current ||
@@ -110,8 +111,6 @@ const LinkAnchor = forwardRef<HTMLAnchorElement, LinkAnchorProps>(
     { children, asChild, className, ...restProps }: LinkAnchorProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
-
     const context = useLinkAnchorContext(false);
     const mergedRefs = useMergeRefs(forwardedRef, context?.anchorRef);
 
@@ -121,7 +120,7 @@ const LinkAnchor = forwardRef<HTMLAnchorElement, LinkAnchorProps>(
       <Component
         ref={mergedRefs}
         {...restProps}
-        className={cn("navds-link-anchor", className)}
+        className={cl("aksel-link-anchor", className)}
       >
         {children}
       </Component>
@@ -130,17 +129,15 @@ const LinkAnchor = forwardRef<HTMLAnchorElement, LinkAnchorProps>(
 );
 
 /* ---------------------------- LinkAnchor Arrow ---------------------------- */
-type LinkAnchorArrowProps = Omit<SVGProps<SVGSVGElement>, "ref">;
+type LinkAnchorArrowProps = Omit<ComponentProps<typeof ArrowRightIcon>, "ref">;
 
 const LinkAnchorArrow = forwardRef<SVGSVGElement, LinkAnchorArrowProps>(
   ({ className, ...restProps }: LinkAnchorArrowProps, forwardedRef) => {
-    const { cn } = useRenameCSS();
-
     return (
       <ArrowRightIcon
         ref={forwardedRef}
         aria-hidden
-        className={cn("navds-link-anchor__arrow", className)}
+        className={cl("aksel-link-anchor__arrow", className)}
         {...restProps}
       />
     );

package/src/{slot → utils/components/slot}/Slot.tsx

@@ -1,11 +1,20 @@
 import React from "react";
-import { useMergeRefs } from "../util/hooks";
+import { useMergeRefs } from "../../hooks";
 import { mergeProps } from "./merge-props";
 
 interface SlotProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
 }
 
+/**
+ * Workaround for RSC related issue.
+ * https://github.com/radix-ui/primitives/issues/3776#issuecomment-3649236326
+ */
+function unwrapLazy(element: React.ReactNode) {
+  const arr = React.Children.toArray(element);
+  return arr.length === 1 ? arr[0] : element;
+}
+
 function getChildRef(children: React.ReactNode): React.Ref<HTMLElement> | null {
   if (!React.isValidElement(children)) {
     return null;
@@ -18,17 +27,19 @@ function getChildRef(children: React.ReactNode): React.Ref<HTMLElement> | null {
 const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
   const { children, ...slotProps } = props;
 
-  const childRef = getChildRef(children);
+  const resolvedChildren = unwrapLazy(children);
+
+  const childRef = getChildRef(resolvedChildren);
   const mergedRef = useMergeRefs(forwardedRef, childRef);
 
-  if (React.isValidElement(children)) {
-    return React.cloneElement<any>(children, {
-      ...mergeProps(slotProps, children.props as any),
+  if (React.isValidElement(resolvedChildren)) {
+    return React.cloneElement<any>(resolvedChildren, {
+      ...mergeProps(slotProps, resolvedChildren.props as any),
       ref: mergedRef,
     });
   }
 
-  if (React.Children.count(children) > 1) {
+  if (React.Children.count(resolvedChildren) > 1) {
     const error = new Error(
       "Aksel: Components using 'asChild' expects to recieve a single React element child.",
     );

package/src/{slot → utils/components/slot}/tests/Slot.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import { describe, expect, test, vi } from "vitest";
-import { Button } from "../../button";
+import { Button } from "../../../../button";
 import { Slot } from "../Slot";
 
 describe("Slot", () => {

package/src/{util → utils/components/textarea-autosize}/TextareaAutoSize.tsx

@@ -1,10 +1,9 @@
 /* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx */
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-import { useClientLayoutEffect } from "../util/hooks";
-import debounce from "./debounce";
-import { useMergeRefs } from "./hooks/useMergeRefs";
-import { ownerWindow } from "./owner";
+import { debounce, useClientLayoutEffect } from "../../../utils-external";
+import { ownerWindow } from "../../helpers";
+import { useMergeRefs } from "../../hooks";
 
 type State = {
   outerHeightStyle: number;

package/src/{util → utils/components}/virtualfocus/Context.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from "react";
-import { createStrictContext } from "../create-strict-context";
-import { createDescendantContext } from "../hooks/descendants/useDescendant";
+import { createStrictContext } from "../../helpers";
+import { createDescendantContext } from "../../hooks/descendants/useDescendant";
 import { SlottedDivElementRef } from "./SlottedDivElement";
 
 export const [

package/src/{util → utils/components}/virtualfocus/SlottedDivElement.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../../slot/Slot";
+import { Slot } from "../slot/Slot";
 
 interface SlottedDivProps extends React.HTMLAttributes<HTMLDivElement> {
   asChild?: boolean;

package/src/{util → utils/components}/virtualfocus/VirtualFocus.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useId } from "../../util/hooks";
+import { useId } from "../../../utils-external";
 import {
   VirtualFocusDescendantsProvider,
   VirtualFocusInternalContextProvider,

package/src/{util → utils/components}/virtualfocus/parts/VirtualFocusAnchor.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../../../slot/Slot";
-import { composeEventHandlers } from "../../composeEventHandlers";
-import { useMergeRefs } from "../../hooks";
+import { composeEventHandlers } from "../../../helpers";
+import { useMergeRefs } from "../../../hooks";
+import { Slot } from "../../slot/Slot";
 import {
   useVirtualFocusDescendant,
   useVirtualFocusInternalContext,

package/src/{util → utils/components}/virtualfocus/parts/VirtualFocusItem.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../../../slot/Slot";
-import { composeEventHandlers } from "../../composeEventHandlers";
-import { useMergeRefs } from "../../hooks";
+import { composeEventHandlers } from "../../../helpers";
+import { useMergeRefs } from "../../../hooks";
+import { Slot } from "../../slot/Slot";
 import {
   useVirtualFocusDescendant,
   useVirtualFocusInternalContext,

package/src/utils/helpers/className.ts

@@ -0,0 +1,60 @@
+/** biome-ignore-all lint/suspicious/noAssignInExpressions: Because why not? */
+type ClassValue =
+  | ClassArray
+  | ClassDictionary
+  | string
+  | number
+  | bigint
+  | null
+  | boolean
+  | undefined;
+type ClassDictionary = Record<string, any>;
+type ClassArray = ClassValue[];
+
+function toVal(mix: Exclude<ClassValue, null | undefined | false>) {
+  let result = "";
+
+  if (typeof mix === "string" || typeof mix === "number") {
+    result += mix;
+  } else if (typeof mix === "object") {
+    if (Array.isArray(mix)) {
+      for (let i = 0; i < mix.length; i++) {
+        if (mix[i]) {
+          const parsedValue = toVal(mix[i]);
+          if (parsedValue) {
+            result && (result += " ");
+            result += parsedValue;
+          }
+        }
+      }
+    } else {
+      for (const key in mix) {
+        if (mix[key]) {
+          result && (result += " ");
+          result += key;
+        }
+      }
+    }
+  }
+
+  return result;
+}
+
+function cl(...inputs: ClassValue[]) {
+  let parsedValue = "";
+  let currentValue: ClassValue;
+  let result = "";
+
+  for (let i = 0; i < inputs.length; i++) {
+    if ((currentValue = inputs[i])) {
+      if ((parsedValue = toVal(currentValue))) {
+        result && (result += " ");
+        result += parsedValue;
+      }
+    }
+  }
+
+  return result;
+}
+
+export { cl };

package/src/{util/copy.ts → utils/helpers/clipboardCopy.ts}

@@ -1,4 +1,4 @@
-export default async function copy(text: string): Promise<void> {
+async function clipboardCopy(text: string): Promise<void> {
   try {
     await navigator.clipboard.writeText(text);
   } catch (err) {
@@ -12,3 +12,5 @@ export default async function copy(text: string): Promise<void> {
     window.prompt(message, text);
   }
 }
+
+export { clipboardCopy };

package/src/{util → utils/helpers}/composeEventHandlers.ts

@@ -4,7 +4,7 @@
  * Utility to consistently call original eventhandler, often from props and internal eventhandler
  * @internal
  */
-export function composeEventHandlers<T extends React.SyntheticEvent | Event>(
+function composeEventHandlers<T extends React.SyntheticEvent | Event>(
   originalEventHandler?: (event: T) => void,
   ourEventHandler?: (event: T) => void,
   { checkForDefaultPrevented = true } = {},
@@ -17,3 +17,5 @@ export function composeEventHandlers<T extends React.SyntheticEvent | Event>(
     }
   };
 }
+
+export { composeEventHandlers };

package/src/utils/helpers/consoleWarning.ts

@@ -0,0 +1,13 @@
+const sentMessages = new Set<string>();
+
+function consoleWarning(...content: unknown[]) {
+  if (process.env.NODE_ENV !== "production") {
+    const key = content.join();
+    if (!sentMessages.has(key)) {
+      console.warn("[Aksel]", ...content);
+      sentMessages.add(key);
+    }
+  }
+}
+
+export { consoleWarning };

package/src/{util/__tests__ → utils/helpers}/hideNonTargetElements.test.ts

@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, test } from "vitest";
-import { hideNonTargetElements } from "../hideNonTargetElements";
+import { hideNonTargetElements } from "./hideNonTargetElements";
 
 describe("hideNonTargetElements util", () => {
   beforeEach(() => {

package/src/utils/helpers/index.ts

@@ -0,0 +1,9 @@
+export * from "./className";
+export * from "./composeEventHandlers";
+export * from "./clipboardCopy";
+export * from "./create-strict-context";
+export * from "./detectBrowser";
+export * from "./hideNonTargetElements";
+export * from "./owner";
+export * from "./requireReactElement";
+export * from "./resolveRef";

package/src/{util → utils/helpers}/requireReactElement.ts

@@ -1,8 +1,6 @@
 import React from "react";
 
-export const requireReactElement = <T extends React.ReactNode>(
-  children: T,
-): T => {
+const requireReactElement = <T extends React.ReactNode>(children: T): T => {
   const isReactElement = React.isValidElement(children);
 
   if (!isReactElement) {
@@ -23,3 +21,5 @@ export const requireReactElement = <T extends React.ReactNode>(
 
   return children;
 };
+
+export { requireReactElement };

package/src/{util → utils}/hooks/descendants/useDescendant.tsx

@@ -2,8 +2,8 @@
  * https://github.com/chakra-ui/chakra-ui/tree/5ec0be610b5a69afba01a9c22365155c1b519136/packages/components/descendant
  */
 import React, { useRef, useState } from "react";
-import { createStrictContext } from "../../create-strict-context";
-import { useClientLayoutEffect } from "../useClientLayoutEffect";
+import { useClientLayoutEffect } from "../../../utils-external";
+import { createStrictContext } from "../../helpers";
 import { useMergeRefs } from "../useMergeRefs";
 import { DescendantOptions, DescendantsManager } from "./descendant";
 import { cast } from "./utils";
@@ -11,7 +11,7 @@ import { cast } from "./utils";
 /**
  * Provides strongly typed versions of the context provider and hooks above.
  */
-export function createDescendantContext<
+function createDescendantContext<
   T extends HTMLElement = HTMLElement,
   K extends Record<string, any> = object,
 >() {
@@ -97,3 +97,5 @@ export function createDescendantContext<
     useDescendant,
   ] as const;
 }
+
+export { createDescendantContext };

package/src/{util → utils}/hooks/descendants/utils.ts

@@ -5,7 +5,7 @@
  * - https://github.com/floating-ui/floating-ui/blob/8e449abb0bfda143c6a6eb01d3e6943c095b744f/packages/react/src/components/FloatingList.tsx#L8
  * - https://github.com/chakra-ui/chakra-ui/tree/5ec0be610b5a69afba01a9c22365155c1b519136/packages/components/descendant
  */
-export function sortNodes(nodes: Node[]) {
+function sortNodes(nodes: Node[]) {
   return nodes.sort((a, b) => {
     const compare = a.compareDocumentPosition(b);
 
@@ -36,21 +36,23 @@ export function sortNodes(nodes: Node[]) {
   });
 }
 
-export const isElement = (el: any): el is HTMLElement =>
+const isElement = (el: any): el is HTMLElement =>
   typeof el === "object" &&
   "nodeType" in el &&
   el.nodeType === Node.ELEMENT_NODE;
 
-export function getNextIndex(current: number, max: number, loop: boolean) {
+function getNextIndex(current: number, max: number, loop: boolean) {
   let next = current + 1;
   if (loop && next >= max) next = 0;
   return next;
 }
 
-export function getPrevIndex(current: number, max: number, loop: boolean) {
+function getPrevIndex(current: number, max: number, loop: boolean) {
   let next = current - 1;
   if (loop && next < 0) next = max;
   return next;
 }
 
-export const cast = <T>(value: any) => value as T;
+const cast = <T>(value: any) => value as T;
+
+export { sortNodes, isElement, getNextIndex, getPrevIndex, cast };

package/src/utils/hooks/index.ts

@@ -0,0 +1,14 @@
+export * from "./useControllableState";
+export * from "./useMergeRefs";
+export * from "./useMedia";
+export * from "./usePrevious";
+export * from "./useAnimationsFinished";
+export * from "./useEventCallback";
+export * from "./useOpenChangeAnimationComplete";
+export * from "./useRefWithInit";
+export * from "./useScrollLock";
+export * from "./useTimeout";
+export * from "./useTransitionStatus";
+export * from "./useValueAsRef";
+export * from "./descendants/useDescendant";
+export { DescendantsManager } from "./descendants/descendant";

package/src/{util → utils}/hooks/useAnimationsFinished.ts

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useEffect } from "react";
 import ReactDOM from "react-dom";
-import { resolveRef } from "../resolveRef";
+import { resolveRef } from "../helpers";
 import { useEventCallback } from "./useEventCallback";
 
 /**

package/src/{util/__tests__ → utils/hooks}/useMedia.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import React from "react";
 import { describe, expect, test } from "vitest";
-import { useMedia } from "../hooks";
+import { useMedia } from "./useMedia";
 
 function TestComponent({ fallback }: { fallback?: boolean }) {
   const media = useMedia("screen and (min-width: 1024px)", fallback);

package/src/{util/__tests__ → utils/hooks}/useMergeRefs.test.ts

@@ -1,7 +1,7 @@
 import { renderHook } from "@testing-library/react";
 import { useRef } from "react";
 import { describe, expect, test, vi } from "vitest";
-import { useMergeRefs } from "../hooks/useMergeRefs";
+import { useMergeRefs } from "./useMergeRefs";
 
 describe("useMergeRefs", () => {
   test("returns null when all refs are null or undefined", () => {
@@ -76,7 +76,7 @@ describe("useMergeRefs", () => {
 
   test("runs previous cleanup before assigning new instance", () => {
     const callOrder: string[] = [];
-    const cleanup = vi.fn(() => callOrder.push("cleanup"));
+    const cleanup = vi.fn<() => void>(() => callOrder.push("cleanup"));
     const fnRef = vi.fn(() => {
       callOrder.push("ref");
       return cleanup;

package/src/{util → utils}/hooks/useMergeRefs.ts

@@ -2,13 +2,15 @@
 import React from "react";
 import { useRefWithInit } from "./useRefWithInit";
 
+type RefCallback<T> = (instance: T | null) => void;
+
 type Empty = null | undefined;
 type InputRef<I> = React.Ref<I> | Empty;
-type Result<I> = React.RefCallback<I> | null;
+type Result<I> = RefCallback<I> | null;
 type Cleanup = () => void;
 
 type ForkRef<I> = {
-  callback: React.RefCallback<I> | null;
+  callback: RefCallback<I> | null;
   cleanup: Cleanup | null;
   refs: InputRef<I>[];
 };
@@ -96,7 +98,7 @@ function update<I>(forkRef: ForkRef<I>, refs: InputRef<I>[]) {
     return;
   }
 
-  forkRef.callback = (instance: I) => {
+  forkRef.callback = (instance) => {
     if (forkRef.cleanup) {
       forkRef.cleanup();
       forkRef.cleanup = null;

package/src/{util → utils}/hooks/useScrollLock.ts

@@ -1,6 +1,5 @@
-import { isIOS, isWebKit } from "../detectBrowser";
-import { ownerDocument, ownerWindow } from "../owner";
-import { useClientLayoutEffect } from "./useClientLayoutEffect";
+import { useClientLayoutEffect } from "../../utils-external";
+import { isIOS, isWebKit, ownerDocument, ownerWindow } from "../helpers";
 import { Timeout } from "./useTimeout";
 
 let originalHtmlStyles: Partial<CSSStyleDeclaration> = {};

package/src/{util → utils}/hooks/useTransitionStatus.ts

@@ -2,7 +2,7 @@
 
 import { useMemo, useState } from "react";
 import ReactDOM from "react-dom";
-import { useClientLayoutEffect } from "./useClientLayoutEffect";
+import { useClientLayoutEffect } from "../../utils-external";
 
 type TransitionStatus = "entering" | "exiting" | "idle" | undefined;
 

package/src/{util → utils}/hooks/useValueAsRef.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useClientLayoutEffect } from "./useClientLayoutEffect";
+import { useClientLayoutEffect } from "../../utils-external";
 import { useRefWithInit } from "./useRefWithInit";
 
 function useValueAsRef<T>(value: T) {

package/src/utils/types/index.ts

@@ -0,0 +1 @@
+export type { AsChildProps } from "./AsChildProps";

package/src/{util → utils-external/helpers}/debounce.ts

@@ -1,9 +1,9 @@
 "use client";
 
-import { Timeout } from "./hooks/useTimeout";
+import { Timeout } from "../../utils/hooks/useTimeout";
 
 // https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/debounce.js
-export default function debounce<T extends unknown[]>(
+function debounce<T extends unknown[]>(
   func: (...args: T) => void,
   wait = 166,
   leading = false,
@@ -23,3 +23,5 @@ export default function debounce<T extends unknown[]>(
 
   return debounced;
 }
+
+export { debounce };