@dnb/eufemia 10.0.0 → 10.2.0

package/es/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/es/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/es/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/es/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/es/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/es/core/jest/jestSetupScreenshots.css

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

package/es/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;

package/es/elements/Link.d.ts

@@ -3,7 +3,7 @@
  *
  */
 /// <reference types="react" />
-declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../components/Anchor").AnchorProps & import("react").HTMLProps<HTMLAnchorElement> & import("../shared/types").SpacingElementProps & {
+declare const Link: import("react").ForwardRefExoticComponent<import("../components/Anchor").AnchorProps & Omit<import("react").HTMLProps<HTMLAnchorElement>, "ref"> & import("../shared/types").SpacingElementProps & {
     space?: import("../shared/types").SpaceType | import("../shared/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>>;
 export default Link;

package/es/elements/img/style/dnb-img.scss

@@ -3,30 +3,8 @@
  *
  */
 
-@import './img-mixins.scss';
+@use './img-mixins.scss';
 
 .dnb-img {
-  display: inline-flex;
-  flex-direction: column;
-
-  &:not([class*='dnb-space']) {
-    margin: 0;
-  }
-  padding: 0;
-
-  text-align: center; // works on Chrome – hides the alt text
-  align-items: center; // works on FF – hides the alt text
-
-  img,
-  figcaption {
-    font-size: var(--font-size-basis);
-  }
-
-  img {
-    @include imageStyle();
-  }
-
-  figcaption {
-    margin-top: 0.5rem;
-  }
+  @include img-mixins.figureStyle();
 }

package/es/elements/img/style/img-mixins.scss

@@ -31,8 +31,37 @@
   }
 }
 
+@mixin figureStyle() {
+  display: inline-flex;
+  flex-direction: column;
+
+  &:not([class*='dnb-space']) {
+    margin: 0;
+  }
+  padding: 0;
+
+  text-align: center; // works on Chrome – hides the alt text
+  align-items: center; // works on FF – hides the alt text
+
+  img,
+  figcaption {
+    font-size: var(--font-size-basis);
+  }
+
+  img {
+    @include imageStyle();
+  }
+
+  figcaption {
+    margin-top: 0.5rem;
+  }
+}
+
 @mixin imageTag() {
   img {
     @include imageStyle();
   }
+  figure {
+    @include figureStyle();
+  }
 }

package/es/elements/img/style/themes/dnb-img-theme-ui.scss

@@ -1,11 +1,24 @@
-.dnb-img {
+@mixin imgStyle() {
   &[alt]::after {
     color: var(--color-black-80);
     background-color: var(--color-black-8);
   }
+}
 
-  &__img--error {
-    color: var(--color-black-80);
-    background-color: var(--color-black-8);
+$useClasses: true !default;
+@if $useClasses {
+  .dnb-img {
+    @include imgStyle();
+
+    &__img--error {
+      color: var(--color-black-80);
+      background-color: var(--color-black-8);
+    }
+  }
+}
+
+@mixin imgThemeTag() {
+  img {
+    @include imgStyle();
   }
 }

package/es/elements/lib.d.ts

@@ -85,9 +85,9 @@ export declare const getElements: () => {
     Ingress: (props: import("./P").PProps) => JSX.Element;
     Lead: (props: import("./P").PProps) => JSX.Element;
     Li: ({ className, ...p }?: import("./Li").LiAllProps) => JSX.Element;
-    Link: import("react").ForwardRefExoticComponent<Pick<import("../components/Anchor").AnchorProps & import("react").HTMLProps<HTMLAnchorElement> & import("../shared/types").SpacingElementProps & {
+    Link: import("react").ForwardRefExoticComponent<import("../components/Anchor").AnchorProps & Omit<import("react").HTMLProps<HTMLAnchorElement>, "ref"> & import("../shared/types").SpacingElementProps & {
         space?: import("../shared/types").SpaceType | import("../shared/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>>;
     Ol: ({ nested, inside, outside, ...p }?: import("./Ol").OlAllProps) => JSX.Element;
     P: ({ modifier, element, className, medium, bold, size, ...props }: import("./P").PProps) => JSX.Element;
     Paragraph: (props: import("./P").PProps) => JSX.Element;

package/es/elements/typography/style/themes/dnb-typography-theme-ui.scss

@@ -1,7 +1,6 @@
 @use '../typography-mixins.scss' as typography;
 
-// Paragraphs
-.dnb-p {
+@mixin typographyStyle() {
   color: var(--theme-color-black-80, currentColor);
 }
 
@@ -14,3 +13,20 @@
 @include typography.headingClasses() {
   color: var(--theme-color-black-80, currentColor);
 }
+
+$useClasses: true !default;
+@if $useClasses {
+  .dnb-p {
+    @include typographyStyle();
+  }
+}
+
+@mixin typographyThemeTag() {
+  @include typography.headingTags() {
+    @include typographyStyle();
+  }
+
+  p {
+    @include typographyStyle();
+  }
+}

package/es/icons/accounting.d.ts

@@ -0,0 +1,3 @@
+/** This file is auto generated by convertSvgToJsx.ts */
+import icon from './dnb/accounting';
+export default icon;

package/es/icons/accounting.js

@@ -0,0 +1,2 @@
+import icon from './dnb/accounting';
+export default icon;

package/es/icons/accounting_medium.d.ts

@@ -0,0 +1,3 @@
+/** This file is auto generated by convertSvgToJsx.ts */
+import icon from './dnb/accounting_medium';
+export default icon;

package/es/icons/accounting_medium.js

@@ -0,0 +1,2 @@
+import icon from './dnb/accounting_medium';
+export default icon;

package/es/icons/candle_stick.d.ts

@@ -0,0 +1,3 @@
+/** This file is auto generated by convertSvgToJsx.ts */
+import icon from './dnb/candle_stick';
+export default icon;

package/es/icons/candle_stick.js

@@ -0,0 +1,2 @@
+import icon from './dnb/candle_stick';
+export default icon;

package/es/icons/candle_stick_medium.d.ts

@@ -0,0 +1,3 @@
+/** This file is auto generated by convertSvgToJsx.ts */
+import icon from './dnb/candle_stick_medium';
+export default icon;

package/es/icons/candle_stick_medium.js

@@ -0,0 +1,2 @@
+import icon from './dnb/candle_stick_medium';
+export default icon;

package/es/icons/dnb/accounting.d.ts

@@ -0,0 +1,4 @@
+/** This file is auto generated by convertSvgToJsx.ts */
+/// <reference types="react" />
+declare const accounting: (props: any) => JSX.Element;
+export default accounting;

package/es/icons/dnb/accounting.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _path;
+
+import React from 'react';
+
+const accounting = props => React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  fill: "none",
+  viewBox: "0 0 16 16"
+}, props), _path || (_path = React.createElement("path", {
+  stroke: "#000",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 1.5,
+  d: "M4.733 15h6.534M1 7.533l2.47-2.47a.467.467 0 0 1 .66 0L5.337 6.27a.467.467 0 0 0 .66 0l2.47-2.47M9.4 7.572v1.4m3.733-1.4v1.4m-1.866-2.8v2.8M9.867 15H6.133l.467-2.8h2.8l.467 2.8ZM3.8 12.2h8.4c1.546 0 2.8-1.306 2.8-2.917V3.917C15 2.306 13.746 1 12.2 1H3.8C2.254 1 1 2.306 1 3.917v5.366C1 10.894 2.254 12.2 3.8 12.2Z"
+})));
+
+export default accounting;

package/es/icons/dnb/accounting_medium.d.ts

@@ -0,0 +1,4 @@
+/** This file is auto generated by convertSvgToJsx.ts */
+/// <reference types="react" />
+declare const accounting_medium: (props: any) => JSX.Element;
+export default accounting_medium;

package/es/icons/dnb/accounting_medium.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _path;
+
+import React from 'react';
+
+const accounting_medium = props => React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), _path || (_path = React.createElement("path", {
+  stroke: "#000",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 1.5,
+  d: "M6.867 23h10.266M1 11.267l3.882-3.881a.733.733 0 0 1 1.037 0l1.896 1.896a.733.733 0 0 0 1.038 0l3.88-3.882M1 15.667h22M14.2 9.8V12m5.867-2.2V12m-2.934-4.4V12m-2.2 11H9.067l.733-4.4h4.4l.733 4.4Zm-11-4.4h16.134c1.62 0 2.933-1.368 2.933-3.056V4.056C23 2.368 21.687 1 20.067 1H3.933C2.313 1 1 2.368 1 4.056v11.488C1 17.232 2.313 18.6 3.933 18.6Z"
+})));
+
+export default accounting_medium;

package/es/icons/dnb/candle_stick.d.ts

@@ -0,0 +1,4 @@
+/** This file is auto generated by convertSvgToJsx.ts */
+/// <reference types="react" />
+declare const candle_stick: (props: any) => JSX.Element;
+export default candle_stick;

package/es/icons/dnb/candle_stick.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _path;
+
+import React from 'react';
+
+const candle_stick = props => React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  fill: "none",
+  viewBox: "0 0 16 16"
+}, props), _path || (_path = React.createElement("path", {
+  stroke: "#000",
+  strokeLinecap: "round",
+  strokeWidth: 1.5,
+  d: "M4 6.5h1.5A.5.5 0 0 1 6 7v4a.5.5 0 0 1-.5.5H4m0-5H2.5A.5.5 0 0 0 2 7v4a.5.5 0 0 0 .5.5H4m0-5V4m0 7.5V14m8-9.5h1.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5H12m0-7h-1.5a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 .5.5H12m0-7V2m0 9.5V14"
+})));
+
+export default candle_stick;

package/es/icons/dnb/candle_stick_medium.d.ts

@@ -0,0 +1,4 @@
+/** This file is auto generated by convertSvgToJsx.ts */
+/// <reference types="react" />
+declare const candle_stick_medium: (props: any) => JSX.Element;
+export default candle_stick_medium;

package/es/icons/dnb/candle_stick_medium.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _path;
+
+import React from 'react';
+
+const candle_stick_medium = props => React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), _path || (_path = React.createElement("path", {
+  stroke: "#000",
+  strokeLinecap: "round",
+  strokeWidth: 1.5,
+  d: "M4 11.5h1.5a.5.5 0 0 1 .5.5v4.5a.5.5 0 0 1-.5.5H4m0-5.5H2.5a.5.5 0 0 0-.5.5v4.5a.5.5 0 0 0 .5.5H4m0-5.5V9m0 8v2.5m8-15h1.5a.5.5 0 0 1 .5.5v10.5a.5.5 0 0 1-.5.5H12m0-11.5h-1.5a.5.5 0 0 0-.5.5v10.5a.5.5 0 0 0 .5.5H12m0-11.5V2m0 14v2.5m8-7.5h1.5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5H20m0-8h-1.5a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5H20m0-8V8.5M20 19v2.5"
+})));
+
+export default candle_stick_medium;

package/es/icons/dnb/fortune_ball.d.ts

@@ -0,0 +1,4 @@
+/** This file is auto generated by convertSvgToJsx.ts */
+/// <reference types="react" />
+declare const fortune_ball: (props: any) => JSX.Element;
+export default fortune_ball;

package/es/icons/dnb/fortune_ball.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _path;
+
+import React from 'react';
+
+const fortune_ball = props => React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  fill: "none",
+  viewBox: "0 0 16 16"
+}, props), _path || (_path = React.createElement("path", {
+  stroke: "#000",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 1.5,
+  d: "M3.906 12.084A5.149 5.149 0 0 1 2.52 9.473a5.243 5.243 0 0 1 .264-2.963 5.077 5.077 0 0 1 1.824-2.308 4.859 4.859 0 0 1 2.765-.869 4.86 4.86 0 0 1 2.765.866 5.076 5.076 0 0 1 1.826 2.306c.373.939.466 1.97.267 2.963a5.149 5.149 0 0 1-1.383 2.612M1.874 1v1.75M1 1.875h1.75M8.292 6v1.75m-.875-.875h1.75m4.125-5.292v1.75m-.875-.875h1.75m-3.225 9.625H3.807l-.687 1.125a.836.836 0 0 0-.036.798c.06.123.151.227.262.3a.67.67 0 0 0 .366.11h7.325a.67.67 0 0 0 .366-.11.755.755 0 0 0 .263-.3.835.835 0 0 0-.036-.798l-.688-1.124Z"
+})));
+
+export default fortune_ball;

package/es/icons/dnb/fortune_ball_medium.d.ts

@@ -0,0 +1,4 @@
+/** This file is auto generated by convertSvgToJsx.ts */
+/// <reference types="react" />
+declare const fortune_ball_medium: (props: any) => JSX.Element;
+export default fortune_ball_medium;

package/es/icons/dnb/fortune_ball_medium.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _path;
+
+import React from 'react';
+
+const fortune_ball_medium = props => React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), _path || (_path = React.createElement("path", {
+  stroke: "#000",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 1.5,
+  d: "M4.34 18.5a8.09 8.09 0 0 1-2.178-4.103 8.24 8.24 0 0 1 .415-4.656 7.977 7.977 0 0 1 2.867-3.626A7.635 7.635 0 0 1 9.788 4.75c1.548 0 3.06.473 4.346 1.36a7.976 7.976 0 0 1 2.87 3.624 8.238 8.238 0 0 1 .419 4.656 8.09 8.09 0 0 1-2.174 4.105M20.791 7.5v2.75m-1.375-1.375h2.75M3.375 2v2.75M2 3.375h2.75m5.958 4.208v2.75M9.333 8.958h2.75M16.208 2v2.75m-1.375-1.375h2.75M15.396 18.5H4.185l-1.08 1.767a1.314 1.314 0 0 0-.056 1.253c.095.195.237.358.411.472.174.114.373.174.575.175h11.51c.204 0 .403-.06.577-.174.174-.114.316-.277.412-.472a1.314 1.314 0 0 0-.056-1.255L15.396 18.5Z"
+})));
+
+export default fortune_ball_medium;