@dnb/eufemia 10.0.0-beta.8 → 10.1.0

package/components/global-error/style/dnb-global-error.min.css

@@ -1 +1 @@
-.dnb-global-error{height:100%}.dnb-global-error,.dnb-global-error__inner{align-items:center;display:flex;flex-direction:column;width:100%}.dnb-global-error__inner{max-width:var(--layout-large);padding:var(--spacing-large);position:relative;text-align:center}@media screen and (max-width:40em){.dnb-global-error__inner{padding:0 var(--spacing-x-small)}}.dnb-global-error__inner__content{max-width:37rem}.dnb-global-error__back.dnb-button--tertiary{left:var(--spacing-large);position:absolute;top:var(--spacing-large);z-index:1}@media screen and (max-width:90em){.dnb-global-error__back.dnb-button--tertiary{left:var(--spacing-x-small)}}.dnb-global-error__gfx{shape-rendering:geometricprecision;margin-top:9rem}@media screen and (max-width:90em){.dnb-global-error__gfx{margin-top:calc(4vw + 4vh)}}@media screen and (max-width:40em){.dnb-global-error__gfx{margin-top:0;transform:scale(.8)}}@supports (color:var(--data-width)){.dnb-global-error__gfx{height:calc(var(--data-height, 100%)/16*1em);width:calc(var(--data-width, 100%)/16*1em)}}@media screen and (max-width:40em){.dnb-global-error .dnb-h--xx-large.dnb-space__top--xx-large.dnb-space__top--x-small{font-size:var(--font-size-x-large);margin-top:0}}
+.dnb-global-error{align-items:center;display:flex;flex-direction:column;height:100%;width:100%}.dnb-global-error--center{align-content:center;display:grid;height:80vh;justify-content:center;place-content:center}.dnb-global-error__inner{align-items:center;display:flex;flex-direction:column;max-width:var(--layout-large);padding:var(--spacing-large);position:relative;text-align:center;width:100%}@media screen and (max-width:40em){.dnb-global-error__inner{padding:0 var(--spacing-x-small)}}.dnb-global-error__inner__content{max-width:37rem}.dnb-global-error__links{grid-gap:2rem;display:flex;flex-flow:row wrap;gap:2rem;justify-content:center}.dnb-global-error__links .dnb-anchor{font-size:var(--font-size-medium)}@media screen and (max-width:40em){.dnb-global-error__links{grid-gap:1rem;flex-direction:column;gap:1rem}.dnb-global-error h1{font-size:var(--font-size-large)}}

package/components/global-error/style/dnb-global-error.scss

@@ -13,6 +13,12 @@
   width: 100%;
   height: 100%;
 
+  &--center {
+    display: grid;
+    place-content: center;
+    height: 80vh;
+  }
+
   &__inner {
     position: relative;
 
@@ -37,42 +43,26 @@
     }
   }
 
-  &__back.dnb-button--tertiary {
-    position: absolute;
-    z-index: 1; // make sure to be above the image on small screens
-    top: var(--spacing-large);
-    left: var(--spacing-large);
-
-    @media screen and (max-width: 90em) {
-      left: var(--spacing-x-small);
-    }
-  }
-
-  &__gfx {
-    margin-top: 9rem;
+  &__links {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    gap: 2rem;
 
-    @media screen and (max-width: 90em) {
-      margin-top: 8vw;
-      margin-top: calc(4vw + 4vh);
+    .dnb-anchor {
+      font-size: var(--font-size-medium);
     }
 
-    @media screen and (max-width: 40em) {
-      margin-top: 0;
-      transform: scale(0.8);
+    @include allBelow(small) {
+      flex-direction: column;
+      gap: 1rem;
     }
-
-    @supports (color: var(--data-width)) {
-      width: calc(var(--data-width, 100%) / 16 * 1em);
-      height: calc(var(--data-height, 100%) / 16 * 1em);
-    }
-
-    shape-rendering: geometricprecision;
   }
 
-  .dnb-h--xx-large.dnb-space__top--xx-large.dnb-space__top--x-small {
+  h1 {
     @media screen and (max-width: 40em) {
-      margin-top: 0;
-      font-size: var(--font-size-x-large);
+      // margin-top: 0;
+      font-size: var(--font-size-large);
     }
   }
 }

package/components/global-status/GlobalStatus.d.ts

@@ -24,7 +24,7 @@ export type GlobalStatusChildren =
   | ((...args: any[]) => any)
   | React.ReactNode;
 export interface GlobalStatusProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * The main ID. Defaults to `main`.

package/components/heading/Heading.d.ts

@@ -17,7 +17,7 @@ type HeadingDebugCounter = boolean | ((...args: any[]) => any);
 type HeadingReset = number | boolean;
 type HeadingChildren = React.ReactNode | ((...args: any[]) => any);
 export interface HeadingProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   id?: string;
   group?: string;

package/components/height-animation/HeightAnimation.d.ts

@@ -29,5 +29,5 @@ export declare type HeightAnimationProps = {
      */
     innerRef?: React.RefObject<HTMLElement>;
 } & useHeightAnimationOptions;
-export declare type HeightAnimationAllProps = HeightAnimationProps & SpacingProps & React.HTMLProps<HTMLElement>;
+export declare type HeightAnimationAllProps = HeightAnimationProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
 export default function HeightAnimation({ open, animate, keepInDOM, showOverflow, element, duration, className, innerRef, children, onInit, onOpen, onAnimationEnd, ...rest }: HeightAnimationAllProps): JSX.Element;

package/components/icon/Icon.d.ts

@@ -12,7 +12,7 @@ export type IconAttributes = string | Record<string, unknown>;
 export type IconChildren = React.ReactNode | ((...args: any[]) => any);
 export type IconColor = string;
 export interface IconProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * <em>(required)</em> a React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`).

package/components/icon/Icon.js

@@ -383,7 +383,7 @@ export const prerenderIcon = function () {
     const mod = (listOfIcons.dnbIcons ? listOfIcons.dnbIcons : listOfIcons)[icon];
     return mod && mod.default ? mod.default : mod;
   } catch (e) {
-    new ErrorHandler(`Icon '${icon}' did not exist!`);
+    ErrorHandler(`Icon '${icon}' did not exist!`);
     return null;
   }
 };

package/components/icon-primary/IconPrimary.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { IconProps } from '../Icon';
 export interface IconPrimaryProps
   extends IconProps,
-    Omit<React.HTMLProps<HTMLElement>, 'size'> {}
+    Omit<React.HTMLProps<HTMLElement>, 'size' | 'ref'> {}
 export default class IconPrimary extends React.Component<
   IconPrimaryProps,
   any

package/components/input/Input.d.ts

@@ -30,7 +30,7 @@ export type InputSubmitButtonIcon =
   | ((...args: any[]) => any);
 export type InputChildren = React.ReactNode | ((...args: any[]) => any);
 export interface InputProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * Choose between `text`, `number`, `email`, `password`, `url`, `tel` and `search`.
@@ -175,7 +175,7 @@ export interface InputProps
   /**
    * By providing a React.ref we can get the internally used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
    */
-  inner_ref?: any;
+  inner_ref?: React.Ref;
   readOnly?: boolean;
 
   /**

package/components/input/InputPassword.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { InputProps } from './Input';
 export interface InputPasswordProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     InputProps {
   show_password?: string;
   hide_password?: string;

package/components/input-masked/InputMasked.d.ts

@@ -48,7 +48,7 @@ export type InputMaskedChildren =
   | React.ReactNode
   | ((...args: any[]) => any);
 export interface InputMaskedProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * A mask can be defined both as a <a href="https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#readme">RegExp style of characters</a> or a callback function. Example below.
@@ -119,7 +119,7 @@ export interface InputMaskedProps
   /**
    * By providing a React.ref we can get the internally used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
    */
-  inner_ref?: Record<string, unknown>;
+  inner_ref?: React.Ref;
 
   /**
    * Will be called on value changes made by the user. Returns an object with the value as a string and the native event: `{ value, event }`.

package/components/input-masked/InputMasked.js

@@ -52,7 +52,7 @@ process.env.NODE_ENV !== "production" ? InputMasked.propTypes = _objectSpread({
   pipe: PropTypes.func,
   keep_char_positions: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   placeholder_char: PropTypes.string,
-  inner_ref: PropTypes.object,
+  inner_ref: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   on_change: PropTypes.func,
   on_submit: PropTypes.func,
   on_focus: PropTypes.func,

package/components/input-masked/InputMaskedHooks.js

@@ -149,7 +149,8 @@ export const useInputElement = () => {
     props
   } = React.useContext(InputMaskedContext);
   const {
-    pipe
+    pipe,
+    inner_ref
   } = props;
   const mask = useMask();
   const {
@@ -158,10 +159,14 @@ export const useInputElement = () => {
     placeholderChar,
     keepCharPositions
   } = useMaskParams();
-
-  const _ref = React.useRef();
-
-  const ref = (props === null || props === void 0 ? void 0 : props.inner_ref) || _ref;
+  const isFn = typeof inner_ref === 'function';
+  const refHook = React.useRef();
+  const ref = !isFn && inner_ref || refHook;
+  React.useLayoutEffect(() => {
+    if (isFn) {
+      inner_ref === null || inner_ref === void 0 ? void 0 : inner_ref(ref.current);
+    }
+  }, [ref.current]);
   const inputElementRef = React.useRef(React.createElement("input", {
     ref: ref
   }));
@@ -189,10 +194,10 @@ export const useInputElement = () => {
 
   return InputElement;
 };
-export const useEventMapping = _ref2 => {
+export const useEventMapping = _ref => {
   let {
     setLocalValue
-  } = _ref2;
+  } = _ref;
   const callEvent = useCallEvent({
     setLocalValue
   });
@@ -216,10 +221,10 @@ export const useEventMapping = _ref2 => {
   };
 };
 
-const useCallEvent = _ref3 => {
+const useCallEvent = _ref2 => {
   let {
     setLocalValue
-  } = _ref3;
+  } = _ref2;
   const {
     props
   } = React.useContext(InputMaskedContext);
@@ -228,11 +233,11 @@ const useCallEvent = _ref3 => {
   const decimalSeparators = /[,.'·]/;
   let isUnidentified = false;
 
-  const callEvent = (_ref4, name) => {
+  const callEvent = (_ref3, name) => {
     let {
       event,
       value
-    } = _ref4;
+    } = _ref3;
     value = value || event.target.value;
     const selStart = event.target.selectionStart;
     let keyCode = keycode(event);

package/components/input-masked/text-mask/createTextMaskInputElement.js

@@ -56,9 +56,7 @@ export default function createTextMaskInputElement(config) {
       }
 
       const safeRawValue = getSafeRawValue(rawValue);
-      const {
-        selectionEnd: currentCaretPosition
-      } = inputElement;
+      const currentCaretPosition = inputElement === null || inputElement === void 0 ? void 0 : inputElement.selectionEnd;
       const {
         previousConformedValue,
         previousPlaceholder

package/components/lib.d.ts

@@ -59,9 +59,9 @@ import VisuallyHidden from './visually-hidden/VisuallyHidden';
 export { Accordion, Anchor, Autocomplete, Avatar, Badge, Breadcrumb, Button, Checkbox, DatePicker, Dialog, Drawer, Dropdown, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Heading, HeightAnimation, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, SkipContent, Slider, Space, StepIndicator, Switch, Table, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip, Upload, VisuallyHidden, };
 export declare const getComponents: () => {
     Accordion: typeof Accordion;
-    Anchor: import("react").ForwardRefExoticComponent<Pick<import("./anchor/Anchor").AnchorProps & import("react").HTMLProps<HTMLAnchorElement> & import("./space/types").SpacingElementProps & {
+    Anchor: import("react").ForwardRefExoticComponent<import("./anchor/Anchor").AnchorProps & Omit<import("react").HTMLProps<HTMLAnchorElement>, "ref"> & import("./space/types").SpacingElementProps & {
         space?: import("./space/types").SpaceType | import("./space/types").SpacingElementProps;
-    }, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "space" | "top" | "right" | "bottom" | "left" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "innerRef" | "list" | "tooltip" | "step" | "shape" | "skeleton" | "as" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "width" | "wmode" | "wrap" | "to" | "icon" | "element" | "targetBlankTitle" | "iconPosition" | "omitClass" | "inner_ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+    } & import("react").RefAttributes<HTMLAnchorElement>>;
     Autocomplete: typeof Autocomplete;
     Avatar: {
         (localProps: import("./avatar/Avatar").AvatarProps & import("./space/types").SpacingElementProps & {

package/components/logo/Logo.d.ts

@@ -6,7 +6,7 @@ export type LogoRatio = number | string;
 export type LogoWidth = number | string;
 export type LogoHeight = number | string;
 export interface LogoProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * Define the size of the logo. Sets the height. The width will be calculated by the ratio. Also, `inherit` will use the inherited height. Defaults to `auto`.

package/components/number-format/NumberFormat.js

@@ -16,7 +16,7 @@ import { hasSelectedText, IS_IOS } from '../../shared/helpers';
 import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
 import { skeletonDOMAttributes, createSkeletonClass } from '../skeleton/SkeletonHelper';
 import Tooltip, { injectTooltipSemantic } from '../tooltip/Tooltip';
-import { format, showSelectionNotice } from './NumberUtils';
+import { format, showSelectionNotice, runIOSSelectionFix } from './NumberUtils';
 export default class NumberFormat extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -347,12 +347,4 @@ process.env.NODE_ENV !== "production" ? NumberFormat.propTypes = _objectSpread(_
   className: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 }) : void 0;
-let hasiOSFix = false;
-export function runIOSSelectionFix() {
-  try {
-    const selection = window.getSelection();
-    const range = document.createRange();
-    selection.removeAllRanges();
-    selection.addRange(range);
-  } catch (e) {}
-}
+let hasiOSFix = false;

package/components/number-format/NumberUtils.d.ts

@@ -124,4 +124,16 @@ export const countDecimals: (
 ) => number;
 
 type copy = (content: string, HTMLElement) => void;
+
+/**
+ * Only for internal use as of now. So its not documented.
+ */
 export const useCopyWithNotice: () => { copy: copy };
+
+/**
+ * Only for internal use as of now. So its not documented.
+ *
+ * So iOS v13 can select something on the first try, we run this add range trick.
+ * NB: This hack may be removed in future iOS versions.
+ */
+export const runIOSSelectionFix = () => null;

package/components/pagination/Pagination.d.ts

@@ -35,7 +35,7 @@ type PaginationIndicatorElement =
   | string;
 type PaginationChildren = React.ReactNode | ((...args: any[]) => any);
 export interface PaginationProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.

package/components/radio/Radio.d.ts

@@ -21,7 +21,7 @@ export type RadioSuffix =
 export type RadioAttributes = string | Record<string, unknown>;
 export type RadioChildren = string | ((...args: any[]) => any);
 export interface RadioProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * Use either the `label` property or provide a custom one.

package/components/radio/RadioGroup.d.ts

@@ -21,7 +21,7 @@ export type RadioGroupChildren =
   | ((...args: any[]) => any)
   | React.ReactNode;
 export interface RadioGroupProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * Use either the `label` property or provide a custom one.

package/components/radio/style/dnb-radio.css

@@ -30,6 +30,7 @@
           user-select: none;
   display: flex;
   align-items: center;
+  flex-shrink: 0;
   justify-content: center;
   width: var(--radio-width--medium);
   height: var(--radio-height--medium);

package/components/radio/style/dnb-radio.min.css

@@ -1 +1 @@
-:root{--radio-width--medium:1.5rem;--radio-height--medium:1.5rem}.dnb-radio{--radio-width--large:2rem;--radio-height--large:2rem;--radio-border-width:0.125rem;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-radio,.dnb-radio__inner{display:inline-flex;flex-direction:column}.dnb-radio__inner{align-self:center}.dnb-radio__shell{align-items:center;display:flex;height:var(--radio-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--radio-width--medium)}.dnb-radio__button,.dnb-radio__dot,.dnb-radio__focus{position:absolute;z-index:4}.dnb-radio__button{border:var(--radio-border-width) solid transparent}.dnb-radio__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-radio__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__button,.dnb-radio__focus{border-radius:50%;height:calc(var(--radio-height--medium) - .25rem);width:calc(var(--radio-width--medium) - .25rem)}.dnb-radio--large .dnb-radio__button,.dnb-radio--large .dnb-radio__focus{height:calc(var(--radio-height--large) - .125rem);width:calc(var(--radio-width--large) - .125rem)}.dnb-radio__dot{border-radius:50%;height:calc(var(--radio-height--medium) - .75rem);width:calc(var(--radio-width--medium) - .75rem)}.dnb-radio--large .dnb-radio__dot{height:calc(var(--radio-height--large) - .875rem);width:calc(var(--radio-width--large) - .875rem)}.dnb-radio__input{border:0;height:var(--radio-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;width:var(--radio-width--medium);z-index:5}.dnb-radio--large .dnb-radio__input{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio__input:not([disabled]){cursor:pointer}.dnb-radio__order{align-items:baseline;display:inline-flex}.dnb-radio-group--column .dnb-radio__order{display:flex}.dnb-radio__row{display:inline-flex}.dnb-radio__suffix{order:3}.dnb-radio__suffix .dnb-modal__trigger{margin-bottom:-.25rem;margin-top:-.25rem}.dnb-radio-group__suffix{font-size:var(--font-size-basis)}.dnb-radio--large,.dnb-radio--large .dnb-radio__suffix{line-height:var(--radio-height--large)}.dnb-radio--large .dnb-radio__shell{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner{order:2}.dnb-radio--label-position-left .dnb-radio__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner{order:1}.dnb-radio--label-position-right .dnb-radio__order .dnb-form-label{order:2;padding-left:.5rem}:not(.dnb-radio-group)>.dnb-form-label+.dnb-radio{vertical-align:top}.dnb-radio .dnb-form-status{margin-bottom:0;margin-top:.375rem;order:4}.dnb-radio+.dnb-form-status{margin-bottom:1rem;margin-top:.5rem}.dnb-radio-group{--radio-group-margin-bottom:0.5rem;--radio-group-margin-right:1rem;display:inline-flex;flex-direction:row}.dnb-radio-group .dnb-radio{margin-bottom:var(--radio-group-margin-bottom);margin-right:var(--radio-group-margin-right)}.dnb-radio-group--column .dnb-radio{display:flex;margin-right:0}.dnb-radio-group .dnb-radio:last-of-type{margin-right:0}.dnb-radio-group [role=radiogroup],.dnb-radio-group__shell{display:block}.dnb-radio-group__shell>.dnb-form-status{margin-bottom:0;margin-top:0}.dnb-radio-group--column .dnb-radio-group__shell{flex-direction:column}.dnb-radio-group .dnb-form-row{align-items:flex-start;margin-bottom:calc(0px - var(--radio-group-margin-bottom))}.dnb-radio-group .dnb-form-row:before{font-size:var(--font-size-basis)}.dnb-skeleton .dnb-radio__input[disabled]~.dnb-radio__button{border-color:var(--skeleton-color)}
+:root{--radio-width--medium:1.5rem;--radio-height--medium:1.5rem}.dnb-radio{--radio-width--large:2rem;--radio-height--large:2rem;--radio-border-width:0.125rem;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-radio,.dnb-radio__inner{display:inline-flex;flex-direction:column}.dnb-radio__inner{align-self:center}.dnb-radio__shell{align-items:center;display:flex;flex-shrink:0;height:var(--radio-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--radio-width--medium)}.dnb-radio__button,.dnb-radio__dot,.dnb-radio__focus{position:absolute;z-index:4}.dnb-radio__button{border:var(--radio-border-width) solid transparent}.dnb-radio__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-radio__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__button,.dnb-radio__focus{border-radius:50%;height:calc(var(--radio-height--medium) - .25rem);width:calc(var(--radio-width--medium) - .25rem)}.dnb-radio--large .dnb-radio__button,.dnb-radio--large .dnb-radio__focus{height:calc(var(--radio-height--large) - .125rem);width:calc(var(--radio-width--large) - .125rem)}.dnb-radio__dot{border-radius:50%;height:calc(var(--radio-height--medium) - .75rem);width:calc(var(--radio-width--medium) - .75rem)}.dnb-radio--large .dnb-radio__dot{height:calc(var(--radio-height--large) - .875rem);width:calc(var(--radio-width--large) - .875rem)}.dnb-radio__input{border:0;height:var(--radio-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;width:var(--radio-width--medium);z-index:5}.dnb-radio--large .dnb-radio__input{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio__input:not([disabled]){cursor:pointer}.dnb-radio__order{align-items:baseline;display:inline-flex}.dnb-radio-group--column .dnb-radio__order{display:flex}.dnb-radio__row{display:inline-flex}.dnb-radio__suffix{order:3}.dnb-radio__suffix .dnb-modal__trigger{margin-bottom:-.25rem;margin-top:-.25rem}.dnb-radio-group__suffix{font-size:var(--font-size-basis)}.dnb-radio--large,.dnb-radio--large .dnb-radio__suffix{line-height:var(--radio-height--large)}.dnb-radio--large .dnb-radio__shell{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner{order:2}.dnb-radio--label-position-left .dnb-radio__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner{order:1}.dnb-radio--label-position-right .dnb-radio__order .dnb-form-label{order:2;padding-left:.5rem}:not(.dnb-radio-group)>.dnb-form-label+.dnb-radio{vertical-align:top}.dnb-radio .dnb-form-status{margin-bottom:0;margin-top:.375rem;order:4}.dnb-radio+.dnb-form-status{margin-bottom:1rem;margin-top:.5rem}.dnb-radio-group{--radio-group-margin-bottom:0.5rem;--radio-group-margin-right:1rem;display:inline-flex;flex-direction:row}.dnb-radio-group .dnb-radio{margin-bottom:var(--radio-group-margin-bottom);margin-right:var(--radio-group-margin-right)}.dnb-radio-group--column .dnb-radio{display:flex;margin-right:0}.dnb-radio-group .dnb-radio:last-of-type{margin-right:0}.dnb-radio-group [role=radiogroup],.dnb-radio-group__shell{display:block}.dnb-radio-group__shell>.dnb-form-status{margin-bottom:0;margin-top:0}.dnb-radio-group--column .dnb-radio-group__shell{flex-direction:column}.dnb-radio-group .dnb-form-row{align-items:flex-start;margin-bottom:calc(0px - var(--radio-group-margin-bottom))}.dnb-radio-group .dnb-form-row:before{font-size:var(--font-size-basis)}.dnb-skeleton .dnb-radio__input[disabled]~.dnb-radio__button{border-color:var(--skeleton-color)}

package/components/radio/style/dnb-radio.scss

@@ -33,6 +33,7 @@
 
     display: flex;
     align-items: center;
+    flex-shrink: 0;
     justify-content: center;
 
     width: var(--radio-width--medium);

package/components/section/Section.d.ts

@@ -23,5 +23,5 @@ export declare type SectionProps = {
     className?: string;
     children?: React.ReactNode;
 };
-export declare type SectionAllProps = SectionProps & SpacingProps & React.HTMLProps<HTMLElement>;
+export declare type SectionAllProps = SectionProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
 export default function Section(localProps: SectionAllProps): JSX.Element;

package/components/skeleton/Skeleton.d.ts

@@ -10,7 +10,7 @@ export type SkeletonChildren =
   | ((...args: any[]) => any)
   | React.ReactNode;
 export interface SkeletonProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * Use `true` to enable/show the skeleton for the component used inside. Defaults to `false`.

package/components/space/Space.d.ts

@@ -40,7 +40,7 @@ export declare type SpaceProps = {
      */
     innerRef?: React.RefObject<HTMLElement>;
 } & SpacingProps;
-export declare type SpaceAllProps = SpaceProps & React.HTMLProps<HTMLElement>;
+export declare type SpaceAllProps = SpaceProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
 export default class Space extends React.PureComponent<SpaceAllProps | React.HTMLProps<HTMLElement>> {
     static contextType: React.Context<import("../../shared/Context").ContextProps>;
     static propTypes: {

package/components/step-indicator/StepIndicator.d.ts

@@ -23,7 +23,7 @@ export type StepIndicatorChildren =
   | React.ReactNode
   | ((...args: any[]) => any);
 export interface StepIndicatorProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'>,
     SpacingProps {
   /**
    * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.

package/components/step-indicator/StepIndicatorItem.d.ts

@@ -47,7 +47,7 @@ export default class StepIndicatorItem extends React.Component<
 }
 export interface StepItemButtonProps {
   children?: React.ReactNode;
-  inner_ref?: Record<string, unknown>;
+  inner_ref?: React.RefObject<HTMLElement>;
   className?: string;
   status?: FormStatusText;
   status_state?: StepIndicatorStatusState;

package/components/step-indicator/StepIndicatorSidebar.d.ts

@@ -3,13 +3,15 @@ import type { SpacingProps } from '../../shared/types';
 import type { StepIndicatorProps } from './StepIndicator';
 export interface StepIndicatorSidebarProps
   extends SpacingProps,
-    Pick<
-      StepIndicatorProps,
-      'sidebar_id' | 'mode' | 'current_step' | 'data'
-    >,
-    React.HTMLProps<HTMLElement> {
+    Pick<StepIndicatorProps, 'mode' | 'current_step' | 'data'>,
+    Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'> {
   internalId?: string;
   showInitialData?: boolean;
+
+  /**
+   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   */
+  sidebar_id: string;
 }
 export default class StepIndicatorSidebar extends React.Component<
   StepIndicatorSidebarProps,

package/components/step-indicator/StepIndicatorTriggerButton.d.ts

@@ -6,7 +6,7 @@ export interface StepIndicatorTriggerButtonProps
    */
   sidebar_id?: string;
   className?: string;
-  inner_ref?: Record<string, unknown>;
+  inner_ref?: React.RefObject<HTMLElement>;
 }
 export default class StepIndicatorTriggerButton extends React.Component<
   StepIndicatorTriggerButtonProps,

package/components/switch/Switch.d.ts

@@ -16,7 +16,7 @@ export type SwitchSuffix =
 export type SwitchAttributes = string | Record<string, unknown>;
 export type SwitchChildren = string | ((...args: any[]) => any);
 export interface SwitchProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * Use either the `label` property or provide a custom one.

package/components/tabs/Tabs.d.ts

@@ -28,7 +28,7 @@ export type TabsChildren =
   | React.ReactNode
   | ((...args: any[]) => any);
 export interface TabsProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * <em>(required)</em> defines the data structure to load as a JSON. e.g. `[{title: &#39;...&#39;, content: &#39;Current tab&#39;, key: &#39;...&#39;, hash: &#39;...&#39;}]`

package/components/textarea/Textarea.d.ts

@@ -25,7 +25,7 @@ export type TextareaTextareaElement =
   | React.ReactNode;
 export type TextareaChildren = React.ReactNode | ((...args: any[]) => any);
 export interface TextareaProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * The content value of the Textarea.

package/components/toggle-button/ToggleButton.d.ts

@@ -24,7 +24,7 @@ export type ToggleButtonValue =
 export type ToggleButtonAttributes = string | Record<string, unknown>;
 export type ToggleButtonChildren = string | ((...args: any[]) => any);
 export interface ToggleButtonProps
-  extends React.HTMLProps<HTMLElement>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
    * <em>(required)</em> the text shown in the ToggleButton.

package/core/jest/jestSetupScreenshots.css

@@ -30,6 +30,7 @@ html {
 	*/
   padding: 1rem;
   margin: -1rem;
+  box-shadow: 0 0 0 1px #fff;
 
   background: #fff;
 }

package/elements/Element.d.ts

@@ -20,11 +20,11 @@ export declare type ElementProps = {
     innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>;
     children?: React.ReactNode;
 } & SpacingProps;
-export declare type ElementAllProps = ElementProps & ElementInternalProps & React.HTMLProps<HTMLElement>;
+export declare type ElementAllProps = ElementProps & ElementInternalProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
 export declare const defaultProps: {
     skeletonMethod: string;
 };
-declare const Element: React.ForwardRefExoticComponent<Pick<{
+declare const Element: React.ForwardRefExoticComponent<{
     skeleton?: SkeletonShow;
     skeletonMethod?: SkeletonMethods;
     internalClass?: string;
@@ -32,5 +32,5 @@ declare const Element: React.ForwardRefExoticComponent<Pick<{
     children?: React.ReactNode;
 } & import("../shared/types").SpacingElementProps & {
     space?: import("../shared/types").SpaceType | import("../shared/types").SpacingElementProps;
-} & ElementInternalProps & React.HTMLProps<HTMLElement>, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "space" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "innerRef" | "list" | "step" | keyof import("../shared/types").SpacingElementProps | "shape" | "skeleton" | "skeletonMethod" | "internalClass" | "as" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "width" | "wmode" | "wrap"> & React.RefAttributes<unknown>>;
+} & ElementInternalProps & Omit<React.HTMLProps<HTMLElement>, "ref"> & React.RefAttributes<unknown>>;
 export default Element;