@norges-domstoler/dds-components 13.3.0 → 13.5.0

package/dist/components/Drawer/Drawer.d.ts

@@ -1,50 +1,50 @@
-import { ReactNode, RefObject } from 'react';
-import { Property } from 'csstype';
-import { BaseComponentPropsWithChildren } from '../../types';
-export type DrawerSize = 'small' | 'large';
-export type DrawerPlacement = 'left' | 'right';
-export type WidthProps = {
-    minWidth?: Property.MinWidth<string>;
-    maxWidth?: Property.MaxWidth<string>;
-    width?: Property.Width<string>;
-};
-export type DrawerProps = BaseComponentPropsWithChildren<HTMLDivElement, {
-    /**Størrelsen på `<Drawer />`. */
-    size?: DrawerSize;
-    /** Plasseringen til `<Drawer />`. */
-    placement?: DrawerPlacement;
-    /**Header for `<Drawer />`. Har default styling hvis verdien er en string. */
-    header?: string | ReactNode;
-    /**Spesifiserer om `<Drawer />` skal legges vises. **OBS!** nødvendig kun hvis `<DrawerGroup />` ikke er i bruk. */
-    isOpen?: boolean;
-    /**Funksjon kjørt ved lukking. **OBS!** nødvendig kun hvis `<DrawerGroup />` ikke er i bruk. */
-    onClose?: () => void;
-    /**Spesifiserer hvilken DOM node `<Drawer />` skal ha som forelder via React portal. Brukes med f.eks `document.getElementById("id")` (skaper ikke ny DOM node). */
-    parentElement?: HTMLElement;
-    /**Custom props for breddehåndtering ved behov. */
-    widthProps?: WidthProps;
-    /**Ref til elementet som åpner `<Drawer />`.  **OBS!** nødvendig kun hvis `<DrawerGroup />` ikke er i bruk. */
-    triggerRef?: RefObject<HTMLElement>;
-}>;
-export declare const Drawer: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
-    /**Størrelsen på `<Drawer />`. */
-    size?: DrawerSize | undefined;
-    /** Plasseringen til `<Drawer />`. */
-    placement?: DrawerPlacement | undefined;
-    /**Header for `<Drawer />`. Har default styling hvis verdien er en string. */
-    header?: string | ReactNode;
-    /**Spesifiserer om `<Drawer />` skal legges vises. **OBS!** nødvendig kun hvis `<DrawerGroup />` ikke er i bruk. */
-    isOpen?: boolean | undefined;
-    /**Funksjon kjørt ved lukking. **OBS!** nødvendig kun hvis `<DrawerGroup />` ikke er i bruk. */
-    onClose?: (() => void) | undefined;
-    /**Spesifiserer hvilken DOM node `<Drawer />` skal ha som forelder via React portal. Brukes med f.eks `document.getElementById("id")` (skaper ikke ny DOM node). */
-    parentElement?: HTMLElement | undefined;
-    /**Custom props for breddehåndtering ved behov. */
-    widthProps?: WidthProps | undefined;
-    /**Ref til elementet som åpner `<Drawer />`.  **OBS!** nødvendig kun hvis `<DrawerGroup />` ikke er i bruk. */
-    triggerRef?: RefObject<HTMLElement> | undefined;
-} & {
-    children?: ReactNode;
-} & {
-    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
+import { ReactNode, RefObject } from 'react';
+import { Property } from 'csstype';
+import { BaseComponentPropsWithChildren } from '../../types';
+export type DrawerSize = 'small' | 'medium' | 'large';
+export type DrawerPlacement = 'left' | 'right';
+export type WidthProps = {
+    minWidth?: Property.MinWidth<string>;
+    maxWidth?: Property.MaxWidth<string>;
+    width?: Property.Width<string>;
+};
+export type DrawerProps = BaseComponentPropsWithChildren<HTMLDivElement, {
+    /**Størrelsen på `<Drawer />`. */
+    size?: DrawerSize;
+    /** Plasseringen til `<Drawer />`. */
+    placement?: DrawerPlacement;
+    /**Header for `<Drawer />`. Har default styling hvis verdien er en string. */
+    header?: string | ReactNode;
+    /**Spesifiserer om `<Drawer />` skal legges vises. **OBS!** nødvendig kun hvis `<DrawerGroup />` ikke er i bruk. */
+    isOpen?: boolean;
+    /**Funksjon kjørt ved lukking. **OBS!** nødvendig kun hvis `<DrawerGroup />` ikke er i bruk. */
+    onClose?: () => void;
+    /**Spesifiserer hvilken DOM node `<Drawer />` skal ha som forelder via React portal. Brukes med f.eks `document.getElementById("id")` (skaper ikke ny DOM node). */
+    parentElement?: HTMLElement;
+    /**Custom props for breddehåndtering ved behov. */
+    widthProps?: WidthProps;
+    /**Ref til elementet som åpner `<Drawer />`.  **OBS!** nødvendig kun hvis `<DrawerGroup />` ikke er i bruk. */
+    triggerRef?: RefObject<HTMLElement>;
+}>;
+export declare const Drawer: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+    /**Størrelsen på `<Drawer />`. */
+    size?: DrawerSize | undefined;
+    /** Plasseringen til `<Drawer />`. */
+    placement?: DrawerPlacement | undefined;
+    /**Header for `<Drawer />`. Har default styling hvis verdien er en string. */
+    header?: string | ReactNode;
+    /**Spesifiserer om `<Drawer />` skal legges vises. **OBS!** nødvendig kun hvis `<DrawerGroup />` ikke er i bruk. */
+    isOpen?: boolean | undefined;
+    /**Funksjon kjørt ved lukking. **OBS!** nødvendig kun hvis `<DrawerGroup />` ikke er i bruk. */
+    onClose?: (() => void) | undefined;
+    /**Spesifiserer hvilken DOM node `<Drawer />` skal ha som forelder via React portal. Brukes med f.eks `document.getElementById("id")` (skaper ikke ny DOM node). */
+    parentElement?: HTMLElement | undefined;
+    /**Custom props for breddehåndtering ved behov. */
+    widthProps?: WidthProps | undefined;
+    /**Ref til elementet som åpner `<Drawer />`.  **OBS!** nødvendig kun hvis `<DrawerGroup />` ikke er i bruk. */
+    triggerRef?: RefObject<HTMLElement> | undefined;
+} & {
+    children?: ReactNode;
+} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Drawer/Drawer.js

@@ -5,14 +5,12 @@ import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
 import { Button } from '../Button/Button.js';
 import { Typography } from '../Typography/Typography/Typography.js';
-import '../../helpers/Backdrop/Backdrop.js';
-import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
-import '../../helpers/HiddenInput/HiddenInput.js';
-import '../../helpers/Input/Input.styles.js';
-import '../../helpers/Input/Input.tokens.js';
-import '../InputMessage/InputMessage.js';
-import { Paper } from '../../helpers/Paper/Paper.js';
-import '../../helpers/RequiredMarker/RequiredMarker.js';
+import '../Typography/Label/Label.js';
+import '../Typography/Paragraph/Paragraph.js';
+import '../Typography/Heading/Heading.js';
+import '../Typography/Link/Link.js';
+import '../Typography/Legend/Legend.js';
+import '../Typography/Caption/Caption.js';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
 import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
@@ -21,14 +19,21 @@ import { useFocusTrap } from '../../hooks/useFocusTrap.js';
 import { useMountTransition } from '../../hooks/useMountTransition.js';
 import '../../hooks/useScreenSize.js';
 import '../../utils/color.js';
-import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import '../Typography/Link/Link.js';
 import { drawerTokens } from './Drawer.tokens.js';
 import { focusVisible } from '../../helpers/styling/focusVisible.js';
 import '../../helpers/styling/hover.js';
 import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
 import '../../helpers/styling/selection.js';
+import '../../helpers/Backdrop/Backdrop.js';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
+import '../../helpers/HiddenInput/HiddenInput.js';
+import '../../helpers/Input/Input.styles.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
+import { Paper } from '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import '../../icons/utils/StyledSvg.js';
 import { CloseIcon } from '../../icons/tsx/close.js';
 import '../ScrollableContainer/Scrollbar.js';
@@ -38,7 +43,7 @@ import '../ScrollableContainer/ScrollableContainer.tokens.js';
 var container = drawerTokens.container,
   contentContainer = drawerTokens.contentContainer;
 var getMaxWidth = function getMaxWidth(size) {
-  if (size === 'large') return '800px';else return '400px';
+  if (size === 'large') return '800px';else if (size === 'medium') return '600px';else return '400px';
 };
 var Container = styled(Paper).withConfig({
   displayName: "Drawer__Container",
@@ -115,16 +120,14 @@ var Drawer = /*#__PURE__*/forwardRef(function (props, ref) {
     id: headerId
   };
   return isOpen || hasTransitionedIn ? /*#__PURE__*/createPortal(jsxs(Container, Object.assign({}, containerProps, {
-    elevation: 4
-  }, {
+    elevation: 4,
     children: [jsx(ScrollableContainer, {
       children: jsxs(ContentContainer, {
         children: [hasHeader && jsx(HeaderContainer, Object.assign({}, headerContainerProps, {
-          children: typeof header === 'string' ? jsx(Typography, Object.assign({
-            typographyType: "headingSans03"
-          }, {
+          children: typeof header === 'string' ? jsx(Typography, {
+            typographyType: "headingSans03",
             children: header
-          })) : header
+          }) : header
         })), children]
       })
     }), jsx(StyledButton, {
@@ -138,5 +141,6 @@ var Drawer = /*#__PURE__*/forwardRef(function (props, ref) {
     })]
   })), parentElement) : null;
 });
+Drawer.displayName = 'Drawer';
 
 export { Drawer };

package/dist/components/Drawer/Drawer.stories.d.ts

@@ -1,23 +1,24 @@
-import { DrawerProps } from '.';
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
-        size?: import("./Drawer").DrawerSize | undefined;
-        placement?: import("./Drawer").DrawerPlacement | undefined;
-        header?: import("react").ReactNode;
-        isOpen?: boolean | undefined;
-        onClose?: (() => void) | undefined;
-        parentElement?: HTMLElement | undefined;
-        widthProps?: import("./Drawer").WidthProps | undefined;
-        triggerRef?: import("react").RefObject<HTMLElement> | undefined;
-    } & {
-        children?: import("react").ReactNode;
-    } & {
-        htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
-    } & import("react").RefAttributes<HTMLDivElement>>;
-};
-export default _default;
-export declare const OverviewPlacement: (args: DrawerProps) => JSX.Element;
-export declare const OverviewSizes: (args: DrawerProps) => JSX.Element;
-export declare const Default: (args: DrawerProps) => JSX.Element;
-export declare const LongContent: (args: DrawerProps) => JSX.Element;
+/// <reference types="react" />
+import { DrawerProps } from '.';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+        size?: import("./Drawer").DrawerSize | undefined;
+        placement?: import("./Drawer").DrawerPlacement | undefined;
+        header?: import("react").ReactNode;
+        isOpen?: boolean | undefined;
+        onClose?: (() => void) | undefined;
+        parentElement?: HTMLElement | undefined;
+        widthProps?: import("./Drawer").WidthProps | undefined;
+        triggerRef?: import("react").RefObject<HTMLElement> | undefined;
+    } & {
+        children?: import("react").ReactNode;
+    } & {
+        htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const OverviewPlacement: (args: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OverviewSizes: (args: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Default: (args: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LongContent: (args: DrawerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Drawer/Drawer.tokens.d.ts

@@ -1,9 +1,9 @@
-export declare const drawerTokens: {
-    container: {
-        padding: string;
-    };
-    contentContainer: {
-        gap: string;
-        padding: string;
-    };
-};
+export declare const drawerTokens: {
+    container: {
+        padding: string;
+    };
+    contentContainer: {
+        gap: string;
+        padding: string;
+    };
+};

package/dist/components/Drawer/DrawerGroup.d.ts

@@ -1,12 +1,15 @@
-import { ReactNode } from 'react';
-export type DrawerGroupProps = {
-    /**Barna til komponenten. */
-    children: ReactNode;
-    /**`id` til `<Drawer />`. */
-    drawerId?: string;
-    /**Ekstra logikk som kjøres når `<Drawer />` åpnes. */
-    onOpen?: () => void;
-    /**Ekstra logikk som kjøres når `<Drawer />` lukkes. */
-    onClose?: () => void;
-};
-export declare const DrawerGroup: ({ children, drawerId, onOpen, onClose, }: DrawerGroupProps) => JSX.Element;
+import { ReactNode } from 'react';
+export type DrawerGroupProps = {
+    /**Barna til komponenten. */
+    children: ReactNode;
+    /**`id` til `<Drawer />`. */
+    drawerId?: string;
+    /**Ekstra logikk som kjøres når `<Drawer />` åpnes. */
+    onOpen?: () => void;
+    /**Ekstra logikk som kjøres når `<Drawer />` lukkes. */
+    onClose?: () => void;
+};
+export declare const DrawerGroup: {
+    ({ children, drawerId, onOpen, onClose, }: DrawerGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Drawer/DrawerGroup.js

@@ -46,5 +46,6 @@ var DrawerGroup = function DrawerGroup(_ref) {
     children: [" ", Children$1, " "]
   });
 };
+DrawerGroup.displayName = 'DrawerGroup';
 
 export { DrawerGroup };

package/dist/components/Drawer/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Drawer';
-export * from './DrawerGroup';
+export * from './Drawer';
+export * from './DrawerGroup';

package/dist/components/EmptyContent/EmptyContent.d.ts

@@ -1,6 +1,9 @@
-import { HTMLAttributes } from 'react';
-export type EmptyContentProps = {
-    title?: string;
-    message: string;
-} & HTMLAttributes<HTMLDivElement>;
-export declare function EmptyContent({ title, message, ...rest }: EmptyContentProps): JSX.Element;
+import { HTMLAttributes } from 'react';
+export type EmptyContentProps = {
+    title?: string;
+    message: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare function EmptyContent({ title, message, ...rest }: EmptyContentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace EmptyContent {
+    var displayName: string;
+}

package/dist/components/EmptyContent/EmptyContent.js

@@ -3,19 +3,12 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 import styled from 'styled-components';
 import { Typography } from '../Typography/Typography/Typography.js';
-import 'react';
-import '../../helpers/Backdrop/Backdrop.js';
-import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
-import '../../helpers/HiddenInput/HiddenInput.js';
-import '../../helpers/Input/Input.styles.js';
-import '../../helpers/Input/Input.tokens.js';
-import '../InputMessage/InputMessage.js';
-import '../../helpers/Paper/Paper.js';
-import '../../helpers/RequiredMarker/RequiredMarker.js';
-import '../../hooks/useFloatPosition.js';
-import '../../utils/color.js';
-import '../../hooks/useScreenSize.js';
+import '../Typography/Label/Label.js';
+import '../Typography/Paragraph/Paragraph.js';
+import '../Typography/Heading/Heading.js';
 import '../Typography/Link/Link.js';
+import '../Typography/Legend/Legend.js';
+import '../Typography/Caption/Caption.js';
 
 var colors = ddsBaseTokens.colors,
   spacing = ddsBaseTokens.spacing;
@@ -33,17 +26,16 @@ function EmptyContent(_a) {
     rest = __rest(_a, ["title", "message"]);
   return jsx(StyledEmptyContent, Object.assign({}, rest, {
     children: jsxs(StyledEmptyContentText, {
-      children: [title && jsx(Typography, Object.assign({
-        typographyType: "headingSans02"
-      }, {
+      children: [title && jsx(Typography, {
+        typographyType: "headingSans02",
         children: title
-      })), jsx(Typography, Object.assign({
-        typographyType: "bodySans02"
-      }, {
+      }), jsx(Typography, {
+        typographyType: "bodySans02",
         children: message
-      }))]
+      })]
     })
   }));
 }
+EmptyContent.displayName = 'EmptyContent';
 
 export { EmptyContent };

package/dist/components/EmptyContent/EmptyContent.stories.d.ts

@@ -1,16 +1,16 @@
-import { EmptyContent, EmptyContentProps } from './EmptyContent';
-declare const _default: {
-    title: string;
-    component: typeof EmptyContent;
-    argTypes: {
-        title: {
-            name: string;
-            type: {
-                name: string;
-                required: boolean;
-            };
-        };
-    };
-};
-export default _default;
-export declare const Overview: (args: EmptyContentProps) => JSX.Element;
+import { EmptyContent, EmptyContentProps } from './EmptyContent';
+declare const _default: {
+    title: string;
+    component: typeof EmptyContent;
+    argTypes: {
+        title: {
+            name: string;
+            type: {
+                name: string;
+                required: boolean;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Overview: (args: EmptyContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmptyContent/index.d.ts

@@ -1 +1 @@
-export * from './EmptyContent';
+export * from './EmptyContent';

package/dist/components/FileUploader/ErrorList.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-type ErrorListProps = {
-    errors: {
-        id: string | undefined;
-        message: string;
-    }[];
-};
-export declare const MessageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ErrorList: (props: ErrorListProps) => JSX.Element | null;
-export {};
+type ErrorListProps = {
+    errors: {
+        id: string | undefined;
+        message: string;
+    }[];
+};
+export declare const MessageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ErrorList: (props: ErrorListProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/FileUploader/File.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
-import { FileUploaderFile } from './fileUploaderReducer';
-type FileProps = {
-    parentId: string;
-    index: number;
-    isValid: boolean;
-    file: FileUploaderFile;
-    removeFile: () => void;
-};
-export declare const File: (props: FileProps) => JSX.Element;
-export {};
+import { FileUploaderFile } from './fileUploaderReducer';
+type FileProps = {
+    parentId: string;
+    index: number;
+    isValid: boolean;
+    file: FileUploaderFile;
+    removeFile: () => void;
+};
+export declare const File: (props: FileProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/FileUploader/FileUploader.d.ts

@@ -1,20 +1,22 @@
-/// <reference types="react" />
-import { FileList } from './types';
-import { FileUploaderHookProps } from './useFileUploader';
-import { Property } from 'csstype';
-type FileUploaderProps = {
-    /**Id til filopplasteren. */
-    id?: string;
-    /**Ledetekst for filopplaster. */
-    label?: string;
-    /**Hjelpetekst. */
-    tip?: string;
-    /**Om det er påkrevd med minst en fil. */
-    required?: boolean;
-    /**Callback for når fil-listen endres. */
-    onChange: (newFiles: FileList) => void;
-    /**Bredde for filopplasteren. */
-    width?: Property.Width<string>;
-} & Partial<FileUploaderHookProps>;
-export declare const FileUploader: (props: FileUploaderProps) => JSX.Element;
-export {};
+import { FileList } from './types';
+import { FileUploaderHookProps } from './useFileUploader';
+import { Property } from 'csstype';
+type FileUploaderProps = {
+    /**Id til filopplasteren. */
+    id?: string;
+    /**Ledetekst for filopplaster. */
+    label?: string;
+    /**Hjelpetekst. */
+    tip?: string;
+    /**Om det er påkrevd med minst en fil. */
+    required?: boolean;
+    /**Callback for når fil-listen endres. */
+    onChange: (newFiles: FileList) => void;
+    /**Bredde for filopplasteren. */
+    width?: Property.Width<string>;
+} & Partial<FileUploaderHookProps>;
+export declare const FileUploader: {
+    (props: FileUploaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/FileUploader/FileUploader.js

@@ -11,7 +11,11 @@ import { Button } from '../Button/Button.js';
 import { InputMessage } from '../InputMessage/InputMessage.js';
 import '../Typography/Typography/Typography.js';
 import { Label } from '../Typography/Label/Label.js';
+import '../Typography/Paragraph/Paragraph.js';
+import '../Typography/Heading/Heading.js';
 import '../Typography/Link/Link.js';
+import '../Typography/Legend/Legend.js';
+import '../Typography/Caption/Caption.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 import { ErrorList } from './ErrorList.js';
 import { File } from './File.js';
@@ -107,27 +111,23 @@ var FileUploader = function FileUploader(props) {
       message: e
     };
   });
-  return jsxs(Wrapper, Object.assign({
-    width: width
-  }, {
-    children: [hasLabel && jsx(Label, Object.assign({
+  return jsxs(Wrapper, {
+    width: width,
+    children: [hasLabel && jsx(Label, {
       showRequiredStyling: showRequiredMarker,
-      htmlFor: uniqueId
-    }, {
+      htmlFor: uniqueId,
       children: label
-    })), hasTip && jsx(InputMessage, {
+    }), hasTip && jsx(InputMessage, {
       id: tipId,
       message: tip,
       messageType: "tip"
     }), jsxs(Root, Object.assign({}, getRootProps(), {
       isDragActive: isDragActive,
-      hasRootErrors: hasRootErrors
-    }, {
-      children: [jsx(FileUploaderInput, Object.assign({}, getInputProps())), "Dra og slipp filer her eller", ' ', jsx(VisuallyHidden, Object.assign({
-        as: "span"
-      }, {
+      hasRootErrors: hasRootErrors,
+      children: [jsx(FileUploaderInput, Object.assign({}, getInputProps())), "Dra og slipp filer her eller", ' ', jsx(VisuallyHidden, {
+        as: "span",
         children: "velg fil med p\xE5f\xF8lgende knapp"
-      })), jsx(Button, Object.assign({}, getButtonProps(), {
+      }), jsx(Button, Object.assign({}, getButtonProps(), {
         id: uniqueId,
         size: "medium",
         type: "button",
@@ -147,7 +147,8 @@ var FileUploader = function FileUploader(props) {
     }), jsx(FileListElement, {
       children: fileListElements
     })]
-  }));
+  });
 };
+FileUploader.displayName = 'FileUploader';
 
 export { FileUploader };

package/dist/components/FileUploader/FileUploader.stories.d.ts

@@ -1,25 +1,28 @@
-declare const _default: {
-    title: string;
-    component: (props: {
-        id?: string | undefined;
-        label?: string | undefined;
-        tip?: string | undefined;
-        required?: boolean | undefined;
-        onChange: (newFiles: import("./types").FileList) => void;
-        width?: import("csstype").Property.Width<string> | undefined;
-    } & Partial<import("./useFileUploader").FileUploaderHookProps>) => JSX.Element;
-    argTypes: {
-        color: {
-            control: {
-                type: string;
-            };
-        };
-        size: {
-            control: {
-                type: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare const Overview: () => JSX.Element;
+declare const _default: {
+    title: string;
+    component: {
+        (props: {
+            id?: string | undefined;
+            label?: string | undefined;
+            tip?: string | undefined;
+            required?: boolean | undefined;
+            onChange: (newFiles: import("./types").FileList) => void;
+            width?: import("csstype").Property.Width<string> | undefined;
+        } & Partial<import("./useFileUploader").FileUploaderHookProps>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    argTypes: {
+        color: {
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Overview: () => import("react/jsx-runtime").JSX.Element;