@navikt/ds-react 7.40.0 → 8.0.1

package/src/toggle-group/ToggleGroup.types.ts

@@ -1,4 +1,6 @@
 import { HTMLAttributes } from "react";
+import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
+import type { AkselColor } from "../types";
 
 export interface ToggleGroupProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
@@ -28,10 +30,17 @@ export interface ToggleGroupProps
    */
   label?: React.ReactNode;
   /**
-   * Changes design and interaction-visuals.
-   * @default "action"
+   * @deprecated Use `data-color` prop instead.
    */
   variant?: "action" | "neutral";
+  /**
+   * Overrides inherited color.
+   *
+   * We recommend only using `accent` and `neutral`. We have disallowed status-colors.
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
   /**
    * Stretch each button to fill avaliable space in container.
    * @default false

package/src/toggle-group/parts/ToggleItem.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography/BodyShort";
+import { cl } from "../../util/className";
 import { useToggleGroupContext } from "../ToggleGroup.context";
 import { useToggleItem } from "./useToggleItem";
 
@@ -62,7 +62,6 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
     },
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
     const itemCtx = useToggleItem(
       { value, onClick, onFocus, disabled: false, onKeyDown },
       forwardedRef,
@@ -73,7 +72,7 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
       <button
         {...rest}
         ref={itemCtx.ref}
-        className={cn("navds-toggle-group__button", className)}
+        className={cl("aksel-toggle-group__button", className)}
         type="button"
         role="radio"
         aria-checked={itemCtx.isSelected}
@@ -85,7 +84,7 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
       >
         <BodyShort
           as="span"
-          className={cn("navds-toggle-group__button-inner")}
+          className="aksel-toggle-group__button-inner"
           size={ctx?.size}
         >
           {children ?? (

package/src/tooltip/Tooltip.tsx

@@ -15,8 +15,8 @@ import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
 import { Portal } from "../portal";
 import { Slot } from "../slot/Slot";
-import { useRenameCSS } from "../theme/Theme";
 import { Detail } from "../typography";
+import { cl } from "../util/className";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
@@ -123,8 +123,6 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
       value: open,
@@ -225,9 +223,9 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                 },
                 role: "tooltip",
                 id: ariaId,
-                className: cn(
-                  "navds-tooltip",
-                  "navds-detail navds-detail--small",
+                className: cl(
+                  "aksel-tooltip",
+                  "aksel-detail aksel-detail--small",
                   className,
                 ),
               })}
@@ -236,13 +234,9 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
             >
               {content}
               {keys && (
-                <span className={cn("navds-tooltip__keys")} aria-hidden>
+                <span className="aksel-tooltip__keys" aria-hidden>
                   {keys.map((key) => (
-                    <Detail
-                      as="kbd"
-                      key={key}
-                      className={cn("navds-tooltip__key")}
-                    >
+                    <Detail as="kbd" key={key} className="aksel-tooltip__key">
                       {key}
                     </Detail>
                   ))}
@@ -253,7 +247,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                   ref={(node) => {
                     arrowRef.current = node;
                   }}
-                  className={cn("navds-tooltip__arrow")}
+                  className="aksel-tooltip__arrow"
                   style={{
                     left: arrowX != null ? `${arrowX}px` : "",
                     top: arrowY != null ? `${arrowY}px` : "",

package/src/types/theme.d.ts

@@ -9,7 +9,7 @@ export type AkselColor = AkselColorRole | keyof CustomAkselColor;
 declare global {
   namespace React {
     interface HTMLAttributes {
-      "data-color"?: AkselColor | (string & {});
+      "data-color"?: AkselColor;
     }
   }
 }

package/src/typography/BodyLong.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import type { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -16,6 +17,14 @@ export interface BodyLongProps
    * Text.
    */
   children: React.ReactNode;
+  /**
+   * Overrides inherited color.
+   * @default "neutral"
+   *
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
 }
 
 /**
@@ -53,16 +62,14 @@ export const BodyLong: OverridableComponent<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cn(
+        className={cl(
           className,
-          "navds-body-long",
-          `navds-body-long--${size}`,
+          "aksel-body-long",
+          `aksel-body-long--${size}`,
           typoClassNames({
             spacing,
             truncate,

package/src/typography/BodyShort.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import type { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -16,6 +17,14 @@ export interface BodyShortProps
    * Paragraph text.
    */
   children: React.ReactNode;
+  /**
+   * Overrides inherited color.
+   * @default "neutral"
+   *
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
 }
 
 /**
@@ -51,16 +60,14 @@ export const BodyShort: OverridableComponent<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cn(
+        className={cl(
           className,
-          "navds-body-short",
-          `navds-body-short--${size}`,
+          "aksel-body-short",
+          `aksel-body-short--${size}`,
           typoClassNames({
             spacing,
             truncate,

package/src/typography/Detail.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import type { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -19,6 +20,14 @@ export interface DetailProps
    * ALL CAPS.
    */
   uppercase?: boolean;
+  /**
+   * Overrides inherited color.
+   * @default "neutral"
+   *
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
 }
 
 /**
@@ -53,15 +62,13 @@ export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
       },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
-
       return (
         <Component
           {...rest}
           ref={ref}
-          className={cn(
+          className={cl(
             className,
-            "navds-detail",
+            "aksel-detail",
             typoClassNames({
               spacing,
               truncate,
@@ -72,7 +79,7 @@ export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
               uppercase,
             }),
             {
-              "navds-detail--small": size === "small",
+              "aksel-detail--small": size === "small",
             },
           )}
         />

package/src/typography/ErrorMessage.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -52,22 +52,20 @@ export const ErrorMessage: OverridableComponent<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cn(
-          "navds-error-message",
-          "navds-label",
+        className={cl(
+          "aksel-error-message",
+          "aksel-label",
           className,
           typoClassNames({
             spacing,
           }),
           {
-            "navds-label--small": size === "small",
-            "navds-error-message--show-icon": showIcon,
+            "aksel-label--small": size === "small",
+            "aksel-error-message--show-icon": showIcon,
           },
         )}
       >

package/src/typography/Heading.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import type { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -20,6 +21,14 @@ export interface HeadingProps
    * Heading text.
    */
   children: React.ReactNode;
+  /**
+   * Overrides inherited color.
+   * @default "neutral"
+   *
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
 }
 
 /**
@@ -52,17 +61,16 @@ export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =
       },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
       const HeadingTag = as ?? (`h${level}` as React.ElementType);
 
       return (
         <HeadingTag
           {...rest}
           ref={ref}
-          className={cn(
+          className={cl(
             className,
-            "navds-heading",
-            `navds-heading--${size}`,
+            "aksel-heading",
+            `aksel-heading--${size}`,
             typoClassNames({
               spacing,
               align,

package/src/typography/Ingress.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 
 export interface IngressProps
@@ -32,14 +32,12 @@ export interface IngressProps
  */
 export const Ingress: OverridableComponent<IngressProps, HTMLParagraphElement> =
   forwardRef(({ className, spacing, as: Component = "p", ...rest }, ref) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cn(className, "navds-ingress", {
-          "navds-typo--spacing": !!spacing,
+        className={cl(className, "aksel-ingress", {
+          "aksel-typo--spacing": !!spacing,
         })}
       />
     );

package/src/typography/Label.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import type { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -16,6 +17,14 @@ export interface LabelProps
    * Label text.
    */
   children: React.ReactNode;
+  /**
+   * Overrides inherited color.
+   * @default "neutral"
+   *
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
 }
 
 /**
@@ -46,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/types.ts

@@ -22,5 +22,5 @@ export type TypoProps = {
   /**
    * Adjusts color.
    */
-  textColor?: "default" | "subtle";
+  textColor?: "default" | "subtle" | "contrast";
 };

package/src/typography/util.ts

@@ -1,15 +1,14 @@
-import cl from "clsx";
+import { cl } from "../util/className";
 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/TextareaAutoSize.tsx

@@ -219,9 +219,6 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
     };
 
     const mainStyle: React.CSSProperties = {
-      "--__ac-textarea-height": state.outerHeightStyle
-        ? state.outerHeightStyle + "px"
-        : "auto",
       "--__axc-textarea-height": state.outerHeightStyle
         ? state.outerHeightStyle + "px"
         : "auto",

package/src/util/className.ts

@@ -0,0 +1,58 @@
+/** 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;
+}
+
+export 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;
+}

package/src/util/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/link-anchor/LinkAnchor.tsx

@@ -7,7 +7,7 @@ import React, {
 } from "react";
 import { ArrowRightIcon } from "@navikt/aksel-icons";
 import { Slot } from "../../slot/Slot";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../className";
 import { composeEventHandlers } from "../composeEventHandlers";
 import { createStrictContext } from "../create-strict-context";
 import { useMergeRefs } from "../hooks/useMergeRefs";
@@ -38,7 +38,6 @@ const LinkAnchorOverlay = forwardRef<HTMLDivElement, LinkAnchorOverlayProps>(
     }: LinkAnchorOverlayProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
     const anchorRef = useRef<HTMLAnchorElement>(null);
 
     const Component = asChild ? Slot : "div";
@@ -48,7 +47,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 +109,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 +118,7 @@ const LinkAnchor = forwardRef<HTMLAnchorElement, LinkAnchorProps>(
       <Component
         ref={mergedRefs}
         {...restProps}
-        className={cn("navds-link-anchor", className)}
+        className={cl("aksel-link-anchor", className)}
       >
         {children}
       </Component>
@@ -134,13 +131,11 @@ type LinkAnchorArrowProps = Omit<SVGProps<SVGSVGElement>, "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/cjs/form/file-upload/parts/item/ItemName.js

@@ -1,32 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const link_1 = require("../../../../link");
-const download_file_1 = require("./utils/download-file");
-const file_type_checker_1 = require("./utils/file-type-checker");
-const ItemName = ({ file, href, onClick }) => {
-    if (onClick && href) {
-        return (react_1.default.createElement(link_1.Link, { href: href, onClick: onClick }, file.name));
-    }
-    if (onClick) {
-        return (react_1.default.createElement(link_1.Link, { href: "#", onClick: (event) => {
-                event.preventDefault();
-                onClick(event);
-            } }, file.name));
-    }
-    if (href) {
-        return react_1.default.createElement(link_1.Link, { href: href }, file.name);
-    }
-    if ((0, file_type_checker_1.isNativeFile)(file)) {
-        return (react_1.default.createElement(link_1.Link, { href: "#", download: file.name, onClick: (event) => {
-                event.preventDefault();
-                (0, download_file_1.downloadFile)(file);
-            } }, file.name));
-    }
-    return react_1.default.createElement("span", null, file.name);
-};
-exports.default = ItemName;
-//# sourceMappingURL=ItemName.js.map

package/cjs/form/file-upload/parts/item/ItemName.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemName.js","sourceRoot":"","sources":["../../../../../src/form/file-upload/parts/item/ItemName.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,2CAAwC;AAExC,yDAAqD;AACrD,iEAAyD;AAQzD,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAS,EAAE,EAAE;IAClD,IAAI,OAAO,IAAI,IAAI,EAAE,CAAC;QACpB,OAAO,CACL,8BAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAC/B,IAAI,CAAC,IAAI,CACL,CACR,CAAC;IACJ,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,8BAAC,WAAI,IACH,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO,CAAC,KAAK,CAAC,CAAC;YACjB,CAAC,IAEA,IAAI,CAAC,IAAI,CACL,CACR,CAAC;IACJ,CAAC;IAED,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,8BAAC,WAAI,IAAC,IAAI,EAAE,IAAI,IAAG,IAAI,CAAC,IAAI,CAAQ,CAAC;IAC9C,CAAC;IAED,IAAI,IAAA,gCAAY,EAAC,IAAI,CAAC,EAAE,CAAC;QACvB,OAAO,CACL,8BAAC,WAAI,IACH,IAAI,EAAC,GAAG,EACR,QAAQ,EAAE,IAAI,CAAC,IAAI,EACnB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAA,4BAAY,EAAC,IAAI,CAAC,CAAC;YACrB,CAAC,IAEA,IAAI,CAAC,IAAI,CACL,CACR,CAAC;IACJ,CAAC;IAED,OAAO,4CAAO,IAAI,CAAC,IAAI,CAAQ,CAAC;AAClC,CAAC,CAAC;AAEF,kBAAe,QAAQ,CAAC"}

package/cjs/guide-panel/Illustration.darkside.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare const DarksideGudiepanelIllustration: () => React.JSX.Element;