@dnb/eufemia 9.17.2 → 9.21.0

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

@@ -64,12 +64,12 @@ export type ToggleButtonChildren = string | ((...args: any[]) => any);
  */
 export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   /**
-   * The text show in the ToggleButton.
+   * <em>(required)</em> the text shown in the ToggleButton.
    */
   text?: string;
 
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: ToggleButtonLabel;
   label_direction?: ToggleButtonLabelDirection;
@@ -81,7 +81,7 @@ export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   title?: string;
 
   /**
-   * Determine whether the ToggleButton is checked or not. Default will be `false`.
+   * Determine whether the ToggleButton is checked or not. The default will be `false`.
    */
   checked?: ToggleButtonChecked;
   variant?: ToggleButtonVariant;
@@ -100,7 +100,7 @@ export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   status?: ToggleButtonStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -121,7 +121,7 @@ export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   suffix?: ToggleButtonSuffix;
 
   /**
-   * Defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "ToggleButtonGroup".
+   * <em>(required)</em> defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "ToggleButtonGroup".
    */
   value?: ToggleButtonValue;
 
@@ -131,7 +131,7 @@ export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   icon?: ToggleButtonIcon;
 
   /**
-   * Position of icon inside the toggle button. Set to `left` or `right`. Defaults to `right` if not set.
+   * Position of the icon inside the toggle button. Set to `left` or `right`. Defaults to `right` if not set.
    */
   icon_position?: ToggleButtonIconPosition;
 
@@ -173,7 +173,7 @@ export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   custom_method?: (...args: any[]) => any;
 
   /**
-   * Will be called on state changes made by the user. Returns an boolean and string `{ checked, value, event }`.
+   * Will be called on state changes made by the user. Returns a boolean and string `{ checked, value, event }`.
    */
   on_change?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;

package/cjs/components/toggle-button/ToggleButtonGroup.d.ts

@@ -65,7 +65,7 @@ export type ToggleButtonGroupChildren =
 export interface ToggleButtonGroupProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: ToggleButtonGroupLabel;
   label_direction?: ToggleButtonGroupLabelDirection;
@@ -94,7 +94,7 @@ export interface ToggleButtonGroupProps
   status?: ToggleButtonGroupStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -117,7 +117,7 @@ export interface ToggleButtonGroupProps
   layout_direction?: ToggleButtonGroupLayoutDirection;
 
   /**
-   * Defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "ToggleButtonGroup".
+   * <em>(required)</em> defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "ToggleButtonGroup".
    */
   value?: ToggleButtonGroupValue;
 
@@ -158,7 +158,7 @@ export interface ToggleButtonGroupProps
   custom_method?: (...args: any[]) => any;
 
   /**
-   * Will be called on state changes made by the user. Returns an boolean and string `{ checked, value, event }`.
+   * Will be called on state changes made by the user. Returns a boolean and string `{ checked, value, event }`.
    */
   on_change?: (...args: any[]) => any;
 }

package/cjs/components/tooltip/Tooltip.d.ts

@@ -57,7 +57,7 @@ export interface TooltipProps extends React.HTMLProps<HTMLElement> {
   id?: string;
 
   /**
-   * If the tooltip should animate from one target to the next, define an unique ID.
+   * If the tooltip should animate from one target to the next, define a unique ID.
    */
   group?: string;
 
@@ -72,7 +72,7 @@ export interface TooltipProps extends React.HTMLProps<HTMLElement> {
   active?: TooltipActive;
 
   /**
-   * Defines the offset position in corporation to the target element the arrow appears. Can be `top`, `right`, `left` and `bottom`. Defaults to `top`.
+   * Defines the offset position to the target element the arrow appears. Can be `top`, `right`, `left` and `bottom`. Defaults to `top`.
    */
   position?: TooltipPosition;
 
@@ -82,13 +82,13 @@ export interface TooltipProps extends React.HTMLProps<HTMLElement> {
   arrow?: TooltipArrow;
 
   /**
-   * Defines the offset alignment in corporation to the target element the arrow appears. Can be `center`, `right` and `left`.Defaults to `center`.
+   * Defines the offset alignment to the target element the arrow appears. Can be `center`, `right` and `left`.Defaults to `center`.
    */
   align?: TooltipAlign;
   animate_position?: TooltipAnimatePosition;
 
   /**
-   * If set to `true`, the Tooltip will be fixed in it&#39;s scroll position by using CSS `position: fixed;`. Defaults to `false`.
+   * If set to `true`, the Tooltip will be fixed in its scroll position by using CSS `position: fixed;`. Defaults to `false`.
    */
   fixed_position?: TooltipFixedPosition;
 
@@ -98,7 +98,7 @@ export interface TooltipProps extends React.HTMLProps<HTMLElement> {
   no_animation?: TooltipNoAnimation;
 
   /**
-   * Define the delay until the tooltip should show up after initial hover / active state.
+   * Define the delay until the tooltip should show up after the initial hover / active state.
    */
   show_delay?: TooltipShowDelay;
 

package/cjs/components/tooltip/TooltipContainer.d.ts

@@ -28,7 +28,7 @@ export interface TooltipContainerProps
   active?: TooltipContainerActive;
 
   /**
-   * Defines the offset position in corporation to the target element the arrow appears. Can be `top`, `right`, `left` and `bottom`. Defaults to `top`.
+   * Defines the offset position to the target element the arrow appears. Can be `top`, `right`, `left` and `bottom`. Defaults to `top`.
    */
   position?: string;
 
@@ -38,13 +38,13 @@ export interface TooltipContainerProps
   arrow?: string;
 
   /**
-   * Defines the offset alignment in corporation to the target element the arrow appears. Can be `center`, `right` and `left`.Defaults to `center`.
+   * Defines the offset alignment to the target element the arrow appears. Can be `center`, `right` and `left`.Defaults to `center`.
    */
   align?: string;
   animate_position?: TooltipContainerAnimatePosition;
 
   /**
-   * If set to `true`, the Tooltip will be fixed in it's scroll position by using CSS `position: fixed;`. Defaults to `false`.
+   * If set to `true`, the Tooltip will be fixed in its scroll position by using CSS `position: fixed;`. Defaults to `false`.
    */
   fixed_position?: TooltipContainerFixedPosition;
 

package/cjs/components/tooltip/TooltipPortal.d.ts

@@ -15,7 +15,7 @@ export interface TooltipPortalProps extends React.HTMLProps<HTMLElement> {
   active?: boolean;
 
   /**
-   * If the tooltip should animate from one target to the next, define an unique ID.
+   * If the tooltip should animate from one target to the next, define a unique ID.
    */
   group?: string;
 

package/cjs/components/tooltip/TooltipWithEvents.d.ts

@@ -18,7 +18,7 @@ export interface TooltipWithEventsProps
   internal_id?: string;
 
   /**
-   * Define the delay until the tooltip should show up after initial hover / active state.
+   * Define the delay until the tooltip should show up after the initial hover / active state.
    */
   show_delay?: TooltipWithEventsShowDelay;
   target?: TooltipWithEventsTarget;

package/cjs/elements/Div.d.ts

@@ -13,10 +13,10 @@ export type DivTop = string | number | boolean;
 export type DivRight = string | number | boolean;
 export type DivBottom = string | number | boolean;
 export type DivLeft = string | number | boolean;
-
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
+
 export interface DivProps extends React.HTMLProps<HTMLElement> {
   space?: DivSpace;
   top?: DivTop;

package/cjs/elements/Img.d.ts

@@ -14,11 +14,11 @@ export type ImgRight = string | number | boolean;
 export type ImgBottom = string | number | boolean;
 export type ImgLeft = string | number | boolean;
 export type ImgSkeleton = string | boolean;
-export type ImgClassName = string | Object | any[];
-
+export type ImgClassName = string | any | any[];
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
+
 export interface ImgProps extends React.HTMLProps<HTMLElement> {
   space?: ImgSpace;
   top?: ImgTop;

package/cjs/elements/P.d.ts

@@ -25,7 +25,8 @@ export type PSize =
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
 
-export interface PProps extends React.HTMLProps<HTMLElement> {
+export interface PProps
+  extends Omit<React.HTMLProps<HTMLElement>, 'size'> {
   space?: PSpace;
   top?: PTop;
   right?: PRight;

package/cjs/extensions/payment-card/PaymentCard.d.ts

@@ -54,7 +54,7 @@ export type PaymentCardChildren =
  */
 export interface PaymentCardProps extends React.HTMLProps<HTMLElement> {
   /**
-   * If product code matches one of the codes in the list the card will get that design, if no match is found Default design will be used.
+   * <em>(required)</em> if product code matches one of the codes in the list the card will get that design, if no match is found Default design will be used.
    */
   product_code: string;
 

package/cjs/extensions/payment-card/style/_payment-card.scss

@@ -4,7 +4,6 @@
  */
 
 :root {
-  --dnb-payment-shadow-figma: 0 8px 16px rgba(51, 51, 51, 0.08);
   --dnb-payment-bg-default: linear-gradient(
     184.55deg,
     var(--color-sea-green) 6.31%,

package/cjs/extensions/payment-card/style/dnb-payment-card.css

@@ -73,7 +73,6 @@
  *
  */
 :root {
-  --dnb-payment-shadow-figma: 0 8px 16px rgba(51, 51, 51, 0.08);
   --dnb-payment-bg-default: linear-gradient(
     184.55deg,
     var(--color-sea-green) 6.31%,

package/cjs/extensions/payment-card/style/dnb-payment-card.min.css

@@ -1 +1 @@
-.dnb-payment-card{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-payment-card *,.dnb-payment-card :after,.dnb-payment-card :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-payment-card :after,.dnb-payment-card :before{text-decoration:inherit;vertical-align:inherit}:root{--dnb-payment-shadow-figma:0 8px 16px rgba(51,51,51,.08);--dnb-payment-bg-default:linear-gradient(184.55deg,var(--color-sea-green) 6.31%,var(--color-sea-green) 82.66%);--dnb-payment-bg-pluss:linear-gradient(187.2deg,#14555a 6.31%,rgba(0,52,62,.4) 82.66%),#14555a;--dnb-payment-bg-white:linear-gradient(184.55deg,var(--color-black-background) 4.63%,var(--color-white) 92.04%);--dnb-payment-bg-silver:linear-gradient(184.55deg,var(--color-black-20) 4.63%,var(--color-black-8) 82.87%);--dnb-payment-bg-gold:linear-gradient(184.55deg,#bfa970 4.63%,#d3bd83 84.57%);--dnb-payment-bg-saga:linear-gradient(184.55deg,#241e23 6.31%,#251d23 85.2%);--dnb-payment-bg-business-no-visa:linear-gradient(184.55deg,#50c9de 6.31%,var(--color-sky-blue) 82.66%);--dnb-payment-bg-business-with-visa:linear-gradient(184.55deg,#2cc48e 6.31%,var(--color-summer-green) 82.66%)}.dnb-payment-card{margin:0}.dnb-payment-card__card{background:#007272;background:var(--color-sea-green);border-color:currentcolor;border-color:hsla(0,0%,100%,.1) transparent rgba(0,0,0,.2);border-radius:3.48mm;border-style:solid;border-width:1px;-webkit-box-shadow:0 8px 16px rgba(51,51,51,.08);box-shadow:0 8px 16px rgba(51,51,51,.08);-webkit-box-shadow:var(--shadow-default);box-shadow:var(--shadow-default);color:#fff;color:var(--color-white);height:53.98mm;padding:6mm;position:relative;-webkit-transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;width:85.6mm}.dnb-payment-card__card--design-default{background:linear-gradient(184.55deg,#007272 6.31%,#007272 82.66%);background:var(--dnb-payment-bg-default);color:#fff;color:var(--color-white)}.dnb-payment-card__card--design-pluss{background:linear-gradient(.52turn,#14555a 6.31%,rgba(0,52,62,.4) 82.66%),#14555a;background:var(--dnb-payment-bg-pluss);color:#fff;color:var(--color-white)}.dnb-payment-card__card--design-white{background:linear-gradient(184.55deg,#fafafa 4.63%,#fff 92.04%);background:var(--dnb-payment-bg-white);color:#333;color:var(--color-black-80)}.dnb-payment-card__card--design-silver{background:linear-gradient(184.55deg,#ccc 4.63%,#ebebeb 82.87%);background:var(--dnb-payment-bg-silver);color:#333;color:var(--color-black-80)}.dnb-payment-card__card--design-gold{background:linear-gradient(184.55deg,#bfa970 4.63%,#d3bd83 84.57%);background:var(--dnb-payment-bg-gold);color:#fff;color:var(--color-white)}.dnb-payment-card__card--design-saga{background:linear-gradient(184.55deg,#241e23 6.31%,#251d23 85.2%);background:var(--dnb-payment-bg-saga);color:#fff;color:var(--color-white)}.dnb-payment-card__card--design-private{background:#333;background:var(--color-black-80);color:#fff;color:var(--color-white)}.dnb-payment-card__card--design-black{background:#000;background:var(--color-black);color:#fff;color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background:linear-gradient(184.55deg,#50c9de 6.31%,#4bbed2 82.66%);background:var(--dnb-payment-bg-business-no-visa);color:#fff;color:var(--color-white)}.dnb-payment-card__card--design-business-with-visa{background:linear-gradient(184.55deg,#2cc48e 6.31%,#28b482 82.66%);background:var(--dnb-payment-bg-business-with-visa);color:#fff;color:var(--color-white)}.dnb-payment-card__card:after{background-image:radial-gradient(farthest-corner at 80%,at 30%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 60%,rgba(6,6,6,0) 99%);background-image:radial-gradient(farthest-corner at 80%,at 30%,#f7f6e61f 0,#06060600 60%,#06060600 99%);background-image:radial-gradient(farthest-corner at 80% 30%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 60%,rgba(6,6,6,0) 99%);background-image:radial-gradient(farthest-corner at 80% 30%,#f7f6e61f 0,#06060600 60%,#06060600 99%);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.dnb-payment-card__card__content{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;position:relative;width:100%}.dnb-payment-card__card__wrapper{bottom:0;left:0;position:absolute}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__holder{opacity:.5;text-align:left;text-transform:uppercase}.dnb-payment-card__card__holder.dnb-p{font-size:.625rem}.dnb-payment-card__card__numbers{font-size:1.25rem;font-size:var(--font-size-medium)}.dnb-payment-card__card__credit-type{bottom:0;height:51px;position:absolute;right:0}.dnb-payment-card__card__bank-logo{left:0;position:absolute;top:0}.dnb-payment-card__card__product-type{height:45px;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay{background:linear-gradient(184.55deg,hsla(0,0%,80%,.5) 4.63%,hsla(0,0%,91%,.5) 84.83%);border-radius:inherit;bottom:0;left:0;position:absolute;right:0;top:0}.dnb-payment-card__blocking__center,.dnb-payment-card__blocking__overlay{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center}.dnb-payment-card__blocking__center{-webkit-box-orient:vertical;-webkit-box-direction:normal;background:#333;background:var(--color-black-80);border-radius:4px;color:#fbf6ec;color:var(--color-sand-yellow);-ms-flex-direction:column;flex-direction:column;height:77px;width:77px}.dnb-payment-card__blocking svg{shape-rendering:geometricPrecision}.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder{opacity:1}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:3.48mm 3.48mm 0 0;-webkit-box-shadow:0 8px 16px rgba(51,51,51,.08);box-shadow:0 8px 16px rgba(51,51,51,.08);-webkit-box-shadow:var(--shadow-default);box-shadow:var(--shadow-default);height:32.8mm;padding:0}.dnb-payment-card--compact .dnb-payment-card__card__top{left:6mm;position:absolute;right:6mm;top:4mm}.dnb-payment-card--compact .dnb-payment-card__card__bottom{background-color:#fff;background-color:var(--color-white);bottom:0;height:14mm;left:0;position:absolute;right:0}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{color:#333;color:var(--color-black-80);padding:1.5mm 6mm}.dnb-payment-card--compact .dnb-payment-card__card__numbers{font-size:1.125rem;font-size:var(--font-size-basis)}.dnb-payment-card--compact .dnb-payment-card__card__credit-type{bottom:auto;top:0}.dnb-payment-card--compact .dnb-payment-card__blocking__center{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:100%;justify-content:center;width:100%}
+.dnb-payment-card{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-payment-card *,.dnb-payment-card :after,.dnb-payment-card :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-payment-card :after,.dnb-payment-card :before{text-decoration:inherit;vertical-align:inherit}:root{--dnb-payment-bg-default:linear-gradient(184.55deg,var(--color-sea-green) 6.31%,var(--color-sea-green) 82.66%);--dnb-payment-bg-pluss:linear-gradient(187.2deg,#14555a 6.31%,rgba(0,52,62,.4) 82.66%),#14555a;--dnb-payment-bg-white:linear-gradient(184.55deg,var(--color-black-background) 4.63%,var(--color-white) 92.04%);--dnb-payment-bg-silver:linear-gradient(184.55deg,var(--color-black-20) 4.63%,var(--color-black-8) 82.87%);--dnb-payment-bg-gold:linear-gradient(184.55deg,#bfa970 4.63%,#d3bd83 84.57%);--dnb-payment-bg-saga:linear-gradient(184.55deg,#241e23 6.31%,#251d23 85.2%);--dnb-payment-bg-business-no-visa:linear-gradient(184.55deg,#50c9de 6.31%,var(--color-sky-blue) 82.66%);--dnb-payment-bg-business-with-visa:linear-gradient(184.55deg,#2cc48e 6.31%,var(--color-summer-green) 82.66%)}.dnb-payment-card{margin:0}.dnb-payment-card__card{background:#007272;background:var(--color-sea-green);border-color:currentcolor;border-color:hsla(0,0%,100%,.1) transparent rgba(0,0,0,.2);border-radius:3.48mm;border-style:solid;border-width:1px;-webkit-box-shadow:0 8px 16px rgba(51,51,51,.08);box-shadow:0 8px 16px rgba(51,51,51,.08);-webkit-box-shadow:var(--shadow-default);box-shadow:var(--shadow-default);color:#fff;color:var(--color-white);height:53.98mm;padding:6mm;position:relative;-webkit-transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;width:85.6mm}.dnb-payment-card__card--design-default{background:linear-gradient(184.55deg,#007272 6.31%,#007272 82.66%);background:var(--dnb-payment-bg-default);color:#fff;color:var(--color-white)}.dnb-payment-card__card--design-pluss{background:linear-gradient(.52turn,#14555a 6.31%,rgba(0,52,62,.4) 82.66%),#14555a;background:var(--dnb-payment-bg-pluss);color:#fff;color:var(--color-white)}.dnb-payment-card__card--design-white{background:linear-gradient(184.55deg,#fafafa 4.63%,#fff 92.04%);background:var(--dnb-payment-bg-white);color:#333;color:var(--color-black-80)}.dnb-payment-card__card--design-silver{background:linear-gradient(184.55deg,#ccc 4.63%,#ebebeb 82.87%);background:var(--dnb-payment-bg-silver);color:#333;color:var(--color-black-80)}.dnb-payment-card__card--design-gold{background:linear-gradient(184.55deg,#bfa970 4.63%,#d3bd83 84.57%);background:var(--dnb-payment-bg-gold);color:#fff;color:var(--color-white)}.dnb-payment-card__card--design-saga{background:linear-gradient(184.55deg,#241e23 6.31%,#251d23 85.2%);background:var(--dnb-payment-bg-saga);color:#fff;color:var(--color-white)}.dnb-payment-card__card--design-private{background:#333;background:var(--color-black-80);color:#fff;color:var(--color-white)}.dnb-payment-card__card--design-black{background:#000;background:var(--color-black);color:#fff;color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background:linear-gradient(184.55deg,#50c9de 6.31%,#4bbed2 82.66%);background:var(--dnb-payment-bg-business-no-visa);color:#fff;color:var(--color-white)}.dnb-payment-card__card--design-business-with-visa{background:linear-gradient(184.55deg,#2cc48e 6.31%,#28b482 82.66%);background:var(--dnb-payment-bg-business-with-visa);color:#fff;color:var(--color-white)}.dnb-payment-card__card:after{background-image:radial-gradient(farthest-corner at 80%,at 30%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 60%,rgba(6,6,6,0) 99%);background-image:radial-gradient(farthest-corner at 80%,at 30%,#f7f6e61f 0,#06060600 60%,#06060600 99%);background-image:radial-gradient(farthest-corner at 80% 30%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 60%,rgba(6,6,6,0) 99%);background-image:radial-gradient(farthest-corner at 80% 30%,#f7f6e61f 0,#06060600 60%,#06060600 99%);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.dnb-payment-card__card__content{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;position:relative;width:100%}.dnb-payment-card__card__wrapper{bottom:0;left:0;position:absolute}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__holder{opacity:.5;text-align:left;text-transform:uppercase}.dnb-payment-card__card__holder.dnb-p{font-size:.625rem}.dnb-payment-card__card__numbers{font-size:1.25rem;font-size:var(--font-size-medium)}.dnb-payment-card__card__credit-type{bottom:0;height:51px;position:absolute;right:0}.dnb-payment-card__card__bank-logo{left:0;position:absolute;top:0}.dnb-payment-card__card__product-type{height:45px;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay{background:linear-gradient(184.55deg,hsla(0,0%,80%,.5) 4.63%,hsla(0,0%,91%,.5) 84.83%);border-radius:inherit;bottom:0;left:0;position:absolute;right:0;top:0}.dnb-payment-card__blocking__center,.dnb-payment-card__blocking__overlay{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center}.dnb-payment-card__blocking__center{-webkit-box-orient:vertical;-webkit-box-direction:normal;background:#333;background:var(--color-black-80);border-radius:4px;color:#fbf6ec;color:var(--color-sand-yellow);-ms-flex-direction:column;flex-direction:column;height:77px;width:77px}.dnb-payment-card__blocking svg{shape-rendering:geometricPrecision}.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder{opacity:1}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:3.48mm 3.48mm 0 0;-webkit-box-shadow:0 8px 16px rgba(51,51,51,.08);box-shadow:0 8px 16px rgba(51,51,51,.08);-webkit-box-shadow:var(--shadow-default);box-shadow:var(--shadow-default);height:32.8mm;padding:0}.dnb-payment-card--compact .dnb-payment-card__card__top{left:6mm;position:absolute;right:6mm;top:4mm}.dnb-payment-card--compact .dnb-payment-card__card__bottom{background-color:#fff;background-color:var(--color-white);bottom:0;height:14mm;left:0;position:absolute;right:0}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{color:#333;color:var(--color-black-80);padding:1.5mm 6mm}.dnb-payment-card--compact .dnb-payment-card__card__numbers{font-size:1.125rem;font-size:var(--font-size-basis)}.dnb-payment-card--compact .dnb-payment-card__card__credit-type{bottom:auto;top:0}.dnb-payment-card--compact .dnb-payment-card__blocking__center{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:100%;justify-content:center;width:100%}

package/cjs/fragments/drawer-list/DrawerListProvider.js

@@ -868,6 +868,7 @@ var DrawerListProvider = function (_React$PureComponent) {
       clearTimeout(this._hideTimeout);
       clearTimeout(this._scrollTimeout);
       clearTimeout(this._ddTimeout);
+      this.setActiveState(false);
       this.removeObservers();
     }
   }, {

package/cjs/fragments/scroll-view/ScrollView.js

@@ -41,8 +41,6 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _componentHelper = require("../../shared/component-helper");
@@ -98,6 +96,9 @@ var ScrollView = function (_React$PureComponent) {
     _classCallCheck(this, ScrollView);
 
     _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "ref", void 0);
+
     _this.ref = props.innerRef || _react.default.createRef();
     return _this;
   }
@@ -107,9 +108,11 @@ var ScrollView = function (_React$PureComponent) {
     value: function render() {
       var props = (0, _componentHelper.extendPropsWithContext)(this.props, ScrollView.defaultProps, this.context.FormRow, this.context.ScrollView);
 
-      var className = props.className,
+      var _props$className = props.className,
+          className = _props$className === void 0 ? null : _props$className,
           _className = props.class,
-          innerRef = props.innerRef,
+          _props$innerRef = props.innerRef,
+          innerRef = _props$innerRef === void 0 ? null : _props$innerRef,
           attributes = _objectWithoutProperties(props, _excluded);
 
       var contentToRender = ScrollView.getContent(props);
@@ -124,11 +127,6 @@ var ScrollView = function (_React$PureComponent) {
       }), contentToRender);
     }
   }], [{
-    key: "enableWebComponent",
-    value: function enableWebComponent() {
-      (0, _componentHelper.registerElement)(ScrollView.tagName, ScrollView, ScrollView.defaultProps);
-    }
-  }, {
     key: "getContent",
     value: function getContent(props) {
       if (props.text) return props.text;
@@ -150,13 +148,6 @@ _defineProperty(ScrollView, "defaultProps", {
   class: null
 });
 
-process.env.NODE_ENV !== "production" ? ScrollView.propTypes = _objectSpread(_objectSpread({}, _SpacingHelper.spacingPropTypes), {}, {
-  className: _propTypes.default.string,
-  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
-  innerRef: _propTypes.default.object,
-  class: _propTypes.default.string
-}) : void 0;
-
 var _default = _react.default.forwardRef(function ScrollViewRef(props, ref) {
   return _react.default.createElement(ScrollView, _extends({
     innerRef: ref

package/cjs/index.d.ts

@@ -12,6 +12,7 @@
 // import all the available components and extensions
 import Accordion from './components/accordion/Accordion'
 import Autocomplete from './components/autocomplete/Autocomplete'
+import Avatar from './components/avatar/Avatar'
 import Breadcrumb from './components/breadcrumb/Breadcrumb'
 import Button from './components/button/Button'
 import Checkbox from './components/checkbox/Checkbox'
@@ -27,6 +28,7 @@ import Heading from './components/heading/Heading'
 import HelpButton from './components/help-button/HelpButton'
 import Icon from './components/icon/Icon'
 import IconPrimary from './components/icon-primary/IconPrimary'
+import InfoCard from './components/info-card/InfoCard'
 import Input from './components/input/Input'
 import InputMasked from './components/input-masked/InputMasked'
 import Logo from './components/logo/Logo'
@@ -42,7 +44,9 @@ import Space from './components/space/Space'
 import StepIndicator from './components/step-indicator/StepIndicator'
 import Switch from './components/switch/Switch'
 import Tabs from './components/tabs/Tabs'
+import Tag from './components/tag/Tag'
 import Textarea from './components/textarea/Textarea'
+import Timeline from './components/timeline/Timeline'
 import ToggleButton from './components/toggle-button/ToggleButton'
 import Tooltip from './components/tooltip/Tooltip'
 import Anchor from './elements/Anchor'
@@ -79,6 +83,7 @@ import Ul from './elements/Ul'
 export {
   Accordion,
   Autocomplete,
+  Avatar,
   Breadcrumb,
   Button,
   Checkbox,
@@ -94,6 +99,7 @@ export {
   HelpButton,
   Icon,
   IconPrimary,
+  InfoCard,
   Input,
   InputMasked,
   Logo,
@@ -109,7 +115,9 @@ export {
   StepIndicator,
   Switch,
   Tabs,
+  Tag,
   Textarea,
+  Timeline,
   ToggleButton,
   Tooltip,
   Anchor,

package/cjs/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "Autocomplete", {
     return _Autocomplete.default;
   }
 });
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function get() {
+    return _Avatar.default;
+  }
+});
 Object.defineProperty(exports, "Blockquote", {
   enumerable: true,
   get: function get() {
@@ -201,6 +207,12 @@ Object.defineProperty(exports, "Img", {
     return _Img.default;
   }
 });
+Object.defineProperty(exports, "InfoCard", {
+  enumerable: true,
+  get: function get() {
+    return _InfoCard.default;
+  }
+});
 Object.defineProperty(exports, "Ingress", {
   enumerable: true,
   get: function get() {
@@ -345,6 +357,12 @@ Object.defineProperty(exports, "Tabs", {
     return _Tabs.default;
   }
 });
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function get() {
+    return _Tag.default;
+  }
+});
 Object.defineProperty(exports, "Td", {
   enumerable: true,
   get: function get() {
@@ -363,6 +381,12 @@ Object.defineProperty(exports, "Th", {
     return _Th.default;
   }
 });
+Object.defineProperty(exports, "Timeline", {
+  enumerable: true,
+  get: function get() {
+    return _Timeline.default;
+  }
+});
 Object.defineProperty(exports, "ToggleButton", {
   enumerable: true,
   get: function get() {
@@ -393,6 +417,8 @@ var _Accordion = _interopRequireDefault(require("./components/accordion/Accordio
 
 var _Autocomplete = _interopRequireDefault(require("./components/autocomplete/Autocomplete"));
 
+var _Avatar = _interopRequireDefault(require("./components/avatar/Avatar"));
+
 var _Breadcrumb = _interopRequireDefault(require("./components/breadcrumb/Breadcrumb"));
 
 var _Button = _interopRequireDefault(require("./components/button/Button"));
@@ -423,6 +449,8 @@ var _Icon = _interopRequireDefault(require("./components/icon/Icon"));
 
 var _IconPrimary = _interopRequireDefault(require("./components/icon-primary/IconPrimary"));
 
+var _InfoCard = _interopRequireDefault(require("./components/info-card/InfoCard"));
+
 var _Input = _interopRequireDefault(require("./components/input/Input"));
 
 var _InputMasked = _interopRequireDefault(require("./components/input-masked/InputMasked"));
@@ -453,8 +481,12 @@ var _Switch = _interopRequireDefault(require("./components/switch/Switch"));
 
 var _Tabs = _interopRequireDefault(require("./components/tabs/Tabs"));
 
+var _Tag = _interopRequireDefault(require("./components/tag/Tag"));
+
 var _Textarea = _interopRequireDefault(require("./components/textarea/Textarea"));
 
+var _Timeline = _interopRequireDefault(require("./components/timeline/Timeline"));
+
 var _ToggleButton = _interopRequireDefault(require("./components/toggle-button/ToggleButton"));
 
 var _Tooltip = _interopRequireDefault(require("./components/tooltip/Tooltip"));

package/cjs/shared/AnimateHeight.js

@@ -92,6 +92,16 @@ var AnimateHeight = function () {
         this.onCloseEnd = null;
       }
     }
+  }, {
+    key: "_emitTransitionEnd",
+    value: function _emitTransitionEnd() {
+      try {
+        var event = new CustomEvent('transitionend');
+        this.elem.dispatchEvent(event);
+      } catch (e) {
+        (0, _componentHelper.warn)(e);
+      }
+    }
   }, {
     key: "setElement",
     value: function setElement(elem) {
@@ -188,30 +198,26 @@ var AnimateHeight = function () {
   }, {
     key: "start",
     value: function start(fromHeight, toHeight) {
-      var _this$opts,
+      var _window,
+          _window$location,
+          _window$location$href,
+          _this$opts,
           _this4 = this;
 
       var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
           _ref$animate = _ref.animate,
           animate = _ref$animate === void 0 ? true : _ref$animate;
 
-      try {
-        if (window.location.href.includes('data-visual-test')) {
-          animate = false;
-        }
-      } catch (e) {}
+      if ((_window = window) !== null && _window !== void 0 && (_window$location = _window.location) !== null && _window$location !== void 0 && (_window$location$href = _window$location.href) !== null && _window$location$href !== void 0 && _window$location$href.includes('data-visual-test')) {
+        animate = false;
+      }
 
-      if (animate === false || ((_this$opts = this.opts) === null || _this$opts === void 0 ? void 0 : _this$opts.animate) === false) {
+      if (fromHeight === toHeight || animate === false || ((_this$opts = this.opts) === null || _this$opts === void 0 ? void 0 : _this$opts.animate) === false) {
         this.elem.style.height = "".concat(toHeight, "px");
 
         this._callOnStart();
 
-        try {
-          var event = new CustomEvent('transitionend');
-          this.elem.dispatchEvent(event);
-        } catch (e) {
-          (0, _componentHelper.warn)(e);
-        }
+        this._emitTransitionEnd();
 
         return;
       }

package/cjs/shared/Context.js

@@ -79,11 +79,18 @@ var prepareContext = function prepareContext() {
 
       return context.translation;
     },
-    locales: locales
-  }, props), {}, {
-    translation: translation,
+    locales: locales,
+    Avatar: {},
+    AvatarGroup: {},
     Breadcrumb: {},
-    BreadcrumbItem: {}
+    BreadcrumbItem: {},
+    InfoCard: {},
+    Tag: {},
+    TagGroup: {},
+    Timeline: {},
+    TimelineItem: {}
+  }, props), {}, {
+    translation: translation
   });
 
   return context;

package/cjs/shared/helpers.js

@@ -52,6 +52,8 @@ require("core-js/modules/es.string.replace.js");
 
 require("core-js/modules/es.object.to-string.js");
 
+require("core-js/modules/es.array.join.js");
+
 require("core-js/modules/es.array.concat.js");
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
@@ -499,13 +501,23 @@ function _copyToClipboard() {
 
 var warn = function warn() {
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof console !== 'undefined' && typeof console.log === 'function') {
-    var _console;
+    var isBrowser = typeof window !== 'undefined';
 
-    for (var _len = arguments.length, e = new Array(_len), _key = 0; _key < _len; _key++) {
-      e[_key] = arguments[_key];
+    for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
+      params[_key] = arguments[_key];
     }
 
-    (_console = console).log.apply(_console, ['Eufemia:'].concat(e));
+    if (isBrowser) {
+      var _console;
+
+      var styles = ["padding: 0.125rem 0.5rem ".concat(IS_SAFARI ? '' : '0'), 'font-weight: bold', 'color: #00343E', 'background: #A5E1D2'].join(';');
+
+      (_console = console).log.apply(_console, ['%cEufemia', styles].concat(params));
+    } else {
+      var _console2;
+
+      (_console2 = console).log.apply(_console2, ['Eufemia:'].concat(params));
+    }
   }
 };
 

package/cjs/shared/hooks/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "usePropsWithContext", {
+  enumerable: true,
+  get: function get() {
+    return _usePropsWithContext.usePropsWithContext;
+  }
+});
+
+var _usePropsWithContext = require("./usePropsWithContext");