@dnb/eufemia 10.13.0 → 10.15.0

package/components/toggle-button/style/dnb-toggle-button.css

@@ -71,16 +71,9 @@
   width: calc(var(--radio-width--medium) - 1rem);
   height: calc(var(--radio-height--medium) - 1rem);
 }
-.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active).dnb-button--secondary, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active).dnb-button--secondary:hover {
-  background-color: var(--color-emerald-green);
-  color: var(--color-mint-green);
-}
 :not(.dnb-toggle-button-group) > .dnb-form-label + .dnb-toggle-button {
   vertical-align: top;
 }
-.dnb-toggle-button-group__suffix {
-  font-size: var(--font-size-basis);
-}
 .dnb-toggle-button .dnb-form-status {
   order: 2;
   margin-top: 0.5rem;
@@ -132,6 +125,9 @@
 .dnb-toggle-button-group .dnb-alignment-helper {
   line-height: 2.5rem;
 }
+.dnb-toggle-button-group__suffix {
+  font-size: var(--font-size-basis);
+}
 @media screen and (min-width: 40em) {
   .dnb-form-label + .dnb-toggle-button {
     transform: translateY(-0.5rem);

package/components/toggle-button/style/dnb-toggle-button.min.css

@@ -1 +1 @@
-.dnb-toggle-button{align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-toggle-button__inner{display:inline-flex;flex-direction:column}.dnb-toggle-button__shell{left:0;position:relative;-webkit-user-select:none;user-select:none}.dnb-toggle-button--vertical{align-items:flex-start;flex-direction:column}.dnb-toggle-button__component{align-items:center;display:inline-flex;padding-right:.5rem}.dnb-toggle-button__button.dnb-button--has-text{padding-left:1.5rem;padding-right:1.5rem}.dnb-toggle-button__button .dnb-checkbox{margin-left:-.5rem}.dnb-toggle-button__button .dnb-checkbox__input{pointer-events:none}.dnb-toggle-button__button .dnb-checkbox__button{display:unset}.dnb-toggle-button__button .dnb-checkbox__button,.dnb-toggle-button__button .dnb-checkbox__focus{border-width:.0625rem;height:calc(var(--checkbox-height--medium) - .5rem);width:calc(var(--checkbox-width--medium) - .5rem)}.dnb-toggle-button__button .dnb-checkbox__dot{height:calc(var(--checkbox-height--medium) - 1rem);width:calc(var(--checkbox-width--medium) - 1rem)}.dnb-toggle-button__button .dnb-checkbox__gfx{height:calc(var(--checkbox-height--medium) - .75rem);width:calc(var(--checkbox-width--medium) - .75rem)}.dnb-toggle-button__button .dnb-radio{margin-left:-.5rem}.dnb-toggle-button__button .dnb-radio__input{pointer-events:none}.dnb-toggle-button__button .dnb-radio__button,.dnb-toggle-button__button .dnb-radio__focus{border-width:.0625rem;height:calc(var(--radio-height--medium) - .5rem);width:calc(var(--radio-width--medium) - .5rem)}.dnb-toggle-button__button .dnb-radio__dot{height:calc(var(--radio-height--medium) - 1rem);width:calc(var(--radio-width--medium) - 1rem)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active).dnb-button--secondary,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active).dnb-button--secondary:hover{background-color:var(--color-emerald-green);color:var(--color-mint-green)}:not(.dnb-toggle-button-group)>.dnb-form-label+.dnb-toggle-button{vertical-align:top}.dnb-toggle-button-group__suffix{font-size:var(--font-size-basis)}.dnb-toggle-button .dnb-form-status{margin-top:.5rem;order:2}.dnb-toggle-button .dnb-form-label{margin-right:1rem}.dnb-toggle-button-group{--toggle-button-group-margin-right:1rem;--toggle-button-group-margin-bottom:1rem;display:inline-flex}.dnb-toggle-button-group fieldset{border:none;margin:0;padding:0}.dnb-toggle-button-group .dnb-toggle-button{margin-bottom:var(--toggle-button-group-margin-bottom);margin-right:var(--toggle-button-group-margin-right)}.dnb-toggle-button-group--column .dnb-toggle-button{display:flex;margin-right:0}.dnb-toggle-button-group .dnb-toggle-button:last-of-type{margin-right:0}.dnb-toggle-button-group__shell{display:flex;flex-direction:column}.dnb-toggle-button-group__shell__children{order:1}.dnb-toggle-button-group__shell>.dnb-form-status{order:2;transform:translateY(-.5rem)}.dnb-toggle-button-group .dnb-flex-container{margin-bottom:calc(0px - var(--toggle-button-group-margin-bottom))}.dnb-toggle-button-group .dnb-flex-container--vertical-label{align-items:flex-start}.dnb-toggle-button-group .dnb-flex-container:before{font-size:var(--font-size-basis)}.dnb-toggle-button-group .dnb-alignment-helper{line-height:2.5rem}@media screen and (min-width:40em){.dnb-form-label+.dnb-toggle-button{transform:translateY(-.5rem)}}
+.dnb-toggle-button{align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-toggle-button__inner{display:inline-flex;flex-direction:column}.dnb-toggle-button__shell{left:0;position:relative;-webkit-user-select:none;user-select:none}.dnb-toggle-button--vertical{align-items:flex-start;flex-direction:column}.dnb-toggle-button__component{align-items:center;display:inline-flex;padding-right:.5rem}.dnb-toggle-button__button.dnb-button--has-text{padding-left:1.5rem;padding-right:1.5rem}.dnb-toggle-button__button .dnb-checkbox{margin-left:-.5rem}.dnb-toggle-button__button .dnb-checkbox__input{pointer-events:none}.dnb-toggle-button__button .dnb-checkbox__button{display:unset}.dnb-toggle-button__button .dnb-checkbox__button,.dnb-toggle-button__button .dnb-checkbox__focus{border-width:.0625rem;height:calc(var(--checkbox-height--medium) - .5rem);width:calc(var(--checkbox-width--medium) - .5rem)}.dnb-toggle-button__button .dnb-checkbox__dot{height:calc(var(--checkbox-height--medium) - 1rem);width:calc(var(--checkbox-width--medium) - 1rem)}.dnb-toggle-button__button .dnb-checkbox__gfx{height:calc(var(--checkbox-height--medium) - .75rem);width:calc(var(--checkbox-width--medium) - .75rem)}.dnb-toggle-button__button .dnb-radio{margin-left:-.5rem}.dnb-toggle-button__button .dnb-radio__input{pointer-events:none}.dnb-toggle-button__button .dnb-radio__button,.dnb-toggle-button__button .dnb-radio__focus{border-width:.0625rem;height:calc(var(--radio-height--medium) - .5rem);width:calc(var(--radio-width--medium) - .5rem)}.dnb-toggle-button__button .dnb-radio__dot{height:calc(var(--radio-height--medium) - 1rem);width:calc(var(--radio-width--medium) - 1rem)}:not(.dnb-toggle-button-group)>.dnb-form-label+.dnb-toggle-button{vertical-align:top}.dnb-toggle-button .dnb-form-status{margin-top:.5rem;order:2}.dnb-toggle-button .dnb-form-label{margin-right:1rem}.dnb-toggle-button-group{--toggle-button-group-margin-right:1rem;--toggle-button-group-margin-bottom:1rem;display:inline-flex}.dnb-toggle-button-group fieldset{border:none;margin:0;padding:0}.dnb-toggle-button-group .dnb-toggle-button{margin-bottom:var(--toggle-button-group-margin-bottom);margin-right:var(--toggle-button-group-margin-right)}.dnb-toggle-button-group--column .dnb-toggle-button{display:flex;margin-right:0}.dnb-toggle-button-group .dnb-toggle-button:last-of-type{margin-right:0}.dnb-toggle-button-group__shell{display:flex;flex-direction:column}.dnb-toggle-button-group__shell__children{order:1}.dnb-toggle-button-group__shell>.dnb-form-status{order:2;transform:translateY(-.5rem)}.dnb-toggle-button-group .dnb-flex-container{margin-bottom:calc(0px - var(--toggle-button-group-margin-bottom))}.dnb-toggle-button-group .dnb-flex-container--vertical-label{align-items:flex-start}.dnb-toggle-button-group .dnb-flex-container:before{font-size:var(--font-size-basis)}.dnb-toggle-button-group .dnb-alignment-helper{line-height:2.5rem}.dnb-toggle-button-group__suffix{font-size:var(--font-size-basis)}@media screen and (min-width:40em){.dnb-form-label+.dnb-toggle-button{transform:translateY(-.5rem)}}

package/components/toggle-button/style/dnb-toggle-button.scss

@@ -97,26 +97,12 @@
     }
   }
 
-  // default "active" style
-  &--checked &__button:not([disabled], :active) {
-    &.dnb-button--secondary,
-    &.dnb-button--secondary:hover {
-      background-color: var(--color-emerald-green);
-      color: var(--color-mint-green);
-    }
-  }
-
   // in case we don't define a wrapping group
   // and have a custom label component before the toggle-button (and not inside)
   :not(#{&}-group) > .dnb-form-label + & {
     vertical-align: top;
   }
 
-  // &__suffix,
-  &-group__suffix {
-    font-size: var(--font-size-basis);
-  }
-
   // status
   .dnb-form-status {
     order: 2;
@@ -187,6 +173,10 @@
     .dnb-alignment-helper {
       line-height: 2.5rem;
     }
+
+    &__suffix {
+      font-size: var(--font-size-basis);
+    }
   }
 
   // default spacing for a single toggle button

package/components/toggle-button/style/themes/dnb-toggle-button-theme-sbanken.css

@@ -0,0 +1,92 @@
+/*
+* ToggleButton theme for Sbanken
+*
+*/
+/*
+ * Utilities
+ */
+.dnb-toggle-button {
+  /* stylelint-disable no-descending-specificity */
+  /* stylelint-enable no-descending-specificity */
+}
+.dnb-toggle-button__button {
+  background-color: var(--sb-color-white);
+  color: var(--sb-color-violet);
+  --border-color: var(--sb-color-violet);
+  --border-width: 0.09375rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover:not([disabled]) {
+  background-color: var(--sb-color-violet-light-3);
+  color: var(--sb-color-violet);
+}
+.dnb-toggle-button__button:active[disabled], html:not([data-whatintent=touch]) .dnb-toggle-button__button:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-toggle-button__button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-toggle-button__button:active:not([disabled]) {
+  --border-color: var(--sb-color-violet-light-3);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  background-color: var(--sb-color-violet);
+  color: var(--sb-color-violet-light-3);
+}
+.dnb-toggle-button__button[disabled] {
+  --border-color: var(--sb-color-gray-light);
+  --border-width: 0.09375rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  background-color: var(--sb-color-gray-light);
+  color: var(--sb-color-gray-dark);
+}
+html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__button {
+  background-color: transparent;
+  border-color: var(--focus-ring-color);
+  box-shadow: 0 0 0 0.0625rem var(--focus-ring-color);
+}
+html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__dot {
+  background-color: var(--focus-ring-color);
+}
+html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__button {
+  background-color: transparent;
+  border-color: var(--focus-ring-color);
+  box-shadow: 0 0 0 0.0625rem var(--focus-ring-color);
+}
+html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__gfx {
+  color: var(--focus-ring-color);
+}
+.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active) {
+  background-color: var(--sb-color-violet);
+  color: var(--sb-color-white);
+  box-shadow: none;
+}
+html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) {
+  background-color: var(--sb-color-violet);
+  color: var(--sb-color-white);
+  --border-color: var(--sb-color-violet);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled], html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]) {
+  --border-color: var(--sb-color-violet-light-3);
+  --border-width: 0.125rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  background-color: var(--sb-color-violet);
+  color: var(--sb-color-violet-light-3);
+}
+html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus {
+  color: var(--sb-color-blue-dark-2);
+  background-color: var(--sb-color-blue-light-2);
+}

package/components/toggle-button/style/themes/dnb-toggle-button-theme-sbanken.min.css

@@ -0,0 +1 @@
+.dnb-toggle-button__button{--border-color:var(--sb-color-violet);--border-width:0.09375rem;background-color:var(--sb-color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-violet)}html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover:not([disabled]){background-color:var(--sb-color-violet-light-3);color:var(--sb-color-violet)}.dnb-toggle-button__button:active[disabled],html:not([data-whatintent=touch]) .dnb-toggle-button__button:active[disabled]{cursor:not-allowed}.dnb-toggle-button__button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-toggle-button__button:active:not([disabled]){--border-color:var(--sb-color-violet-light-3);--border-width:0.125rem;background-color:var(--sb-color-violet);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-violet-light-3)}.dnb-toggle-button__button[disabled]{--border-color:var(--sb-color-gray-light);--border-width:0.09375rem;background-color:var(--sb-color-gray-light);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-gray-dark)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__button{background-color:transparent;border-color:var(--focus-ring-color);box-shadow:0 0 0 .0625rem var(--focus-ring-color)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__dot{background-color:var(--focus-ring-color)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__button{background-color:transparent;border-color:var(--focus-ring-color);box-shadow:0 0 0 .0625rem var(--focus-ring-color)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__gfx{color:var(--focus-ring-color)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active){background-color:var(--sb-color-violet);box-shadow:none;color:var(--sb-color-white)}html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]){--border-color:var(--sb-color-violet);--border-width:0.125rem;background-color:var(--sb-color-violet);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-white)}.dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled],html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled]{cursor:not-allowed}.dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]){--border-color:var(--sb-color-violet-light-3);--border-width:0.125rem;background-color:var(--sb-color-violet);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-violet-light-3)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{background-color:var(--sb-color-blue-light-2);color:var(--sb-color-blue-dark-2)}

package/components/toggle-button/style/themes/dnb-toggle-button-theme-sbanken.scss

@@ -0,0 +1,83 @@
+/*
+* ToggleButton theme for Sbanken
+*
+*/
+
+@import '../../../../style/core/utilities.scss';
+
+.dnb-toggle-button {
+  &__button {
+    background-color: var(--sb-color-white);
+    color: var(--sb-color-violet);
+    @include fakeBorder(var(--sb-color-violet), 0.09375rem);
+
+    @include hover() {
+      background-color: var(--sb-color-violet-light-3);
+      color: var(--sb-color-violet);
+    }
+
+    @include active() {
+      @include fakeBorder(var(--sb-color-violet-light-3), 0.125rem);
+      background-color: var(--sb-color-violet);
+      color: var(--sb-color-violet-light-3);
+    }
+
+    &[disabled] {
+      @include fakeBorder(var(--sb-color-gray-light), 0.09375rem, inset);
+      background-color: var(--sb-color-gray-light);
+      color: var(--sb-color-gray-dark);
+    }
+
+    html[data-whatinput='keyboard']
+      &:not([disabled]):not(:active):not(:hover):focus {
+      .dnb-radio {
+        &__button {
+          background-color: transparent;
+          border-color: var(--focus-ring-color);
+          box-shadow: 0 0 0 0.0625rem var(--focus-ring-color);
+        }
+        &__dot {
+          background-color: var(--focus-ring-color);
+        }
+      }
+      .dnb-checkbox {
+        &__button {
+          background-color: transparent;
+          border-color: var(--focus-ring-color);
+          box-shadow: 0 0 0 0.0625rem var(--focus-ring-color);
+        }
+        &__gfx {
+          color: var(--focus-ring-color);
+        }
+      }
+    }
+  }
+
+  /* stylelint-disable no-descending-specificity */
+  &--checked &__button {
+    &:not([disabled]):not(:active) {
+      background-color: var(--sb-color-violet);
+      color: var(--sb-color-white);
+      box-shadow: none;
+    }
+
+    @include hover() {
+      background-color: var(--sb-color-violet);
+      color: var(--sb-color-white);
+      @include fakeBorder(var(--sb-color-violet), 0.125rem);
+    }
+
+    @include active() {
+      @include fakeBorder(var(--sb-color-violet-light-3), 0.125rem, inset);
+      background-color: var(--sb-color-violet);
+      color: var(--sb-color-violet-light-3);
+    }
+
+    html[data-whatinput='keyboard']
+      &:not([disabled]):not(:active):not(:hover):focus {
+      color: var(--sb-color-blue-dark-2);
+      background-color: var(--sb-color-blue-light-2);
+    }
+  }
+  /* stylelint-enable no-descending-specificity */
+}

package/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.css

@@ -68,8 +68,6 @@ html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__bu
 html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus {
   color: var(--color-emerald-green);
   background-color: var(--color-mint-green);
-}
-html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus {
   outline: none;
 }
 html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus {

package/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss

@@ -100,9 +100,6 @@
       &:not([disabled]):not(:active):not(:hover):focus {
       color: var(--color-emerald-green);
       background-color: var(--color-mint-green);
-    }
-    html[data-whatinput='keyboard']
-      &:not([disabled]):not(:active):not(:hover):focus {
       @include focusRing(null, var(--color-emerald-green), inset);
     }
   }

package/components/tooltip/Tooltip.js

@@ -1,3 +1,5 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

package/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["React","classnames","Context","makeUniqueId","validateDOMAttributes","createSpacingClasses","TooltipWithEvents","defaultProps","getPropsFromTooltipProp","getRefElement","getTargetElement","injectTooltipSemantic","convertSnakeCaseProps","Tooltip","localProps","context","useContext","inherited","props","_objectSpread","getTranslation","targetElement","targetSelector","className","id","tooltip","size","fixedPosition","skipPortal","noAnimation","showDelay","hideDelay","active","position","arrow","align","params","_objectWithoutProperties","_excluded","target","element","setElement","useState","internalId","useEffect","classes","attributes","createElement","_extends","children"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["/**\n * Web Tooltip Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  makeUniqueId,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport TooltipWithEvents from './TooltipWithEvents'\nimport {\n  defaultProps,\n  getPropsFromTooltipProp,\n  getRefElement,\n  getTargetElement,\n  injectTooltipSemantic,\n} from './TooltipHelpers'\nimport { TooltipAllProps } from './types'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nfunction Tooltip(localProps: TooltipAllProps) {\n  const context = React.useContext(Context)\n\n  const inherited = getPropsFromTooltipProp(localProps)\n\n  // use only the props from context, who are available here anyway\n  const props = convertSnakeCaseProps({\n    ...defaultProps,\n    ...localProps,\n    ...inherited,\n    ...context.getTranslation(localProps).Tooltip,\n    ...context.Tooltip,\n  })\n\n  const {\n    targetElement,\n    targetSelector,\n    className,\n    id, // eslint-disable-line\n    tooltip, // eslint-disable-line\n    size,\n    fixedPosition, // eslint-disable-line\n    skipPortal, // eslint-disable-line\n    noAnimation, // eslint-disable-line\n    showDelay, // eslint-disable-line\n    hideDelay, // eslint-disable-line\n    active, // eslint-disable-line\n    position, // eslint-disable-line\n    arrow, // eslint-disable-line\n    align, // eslint-disable-line\n    ...params\n  } = props\n\n  const target = targetElement || targetSelector\n\n  const [element, setElement] = React.useState<\n    HTMLElement | React.ReactElement\n  >()\n  const [internalId] = React.useState(() => props.id || makeUniqueId()) // cause we need an id anyway\n  props.internalId = internalId\n\n  React.useEffect(() => {\n    const element = getTargetElement(getRefElement(target))\n    setElement(element)\n  }, [target])\n\n  const classes = classnames(\n    'dnb-tooltip',\n    size === 'large' && 'dnb-tooltip--large',\n    createSpacingClasses(props),\n    className\n  )\n\n  const attributes = {\n    className: classes,\n    ...params,\n  }\n\n  // also used for code markup simulation\n  validateDOMAttributes(localProps, attributes)\n\n  if (target && !element) {\n    return null\n  }\n\n  return (\n    <TooltipWithEvents target={element} attributes={attributes} {...props}>\n      {props.children}\n    </TooltipWithEvents>\n  )\n}\n\nexport { injectTooltipSemantic }\nexport default Tooltip\n"],"mappings":";;;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,SACEC,YAAY,EACZC,qBAAqB,QAChB,+BAA+B;AACtC,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,SACEC,YAAY,EACZC,uBAAuB,EACvBC,aAAa,EACbC,gBAAgB,EAChBC,qBAAqB,QAChB,kBAAkB;AAEzB,SAASC,qBAAqB,QAAQ,yCAAyC;AAE/E,SAASC,OAAOA,CAACC,UAA2B,EAAE;EAC5C,MAAMC,OAAO,GAAGf,KAAK,CAACgB,UAAU,CAACd,OAAO,CAAC;EAEzC,MAAMe,SAAS,GAAGT,uBAAuB,CAACM,UAAU,CAAC;EAGrD,MAAMI,KAAK,GAAGN,qBAAqB,CAAAO,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,KAC9BZ,YAAY,GACZO,UAAU,GACVG,SAAS,GACTF,OAAO,CAACK,cAAc,CAACN,UAAU,CAAC,CAACD,OAAO,GAC1CE,OAAO,CAACF,OAAO,CACnB,CAAC;EAEF,MAAM;MACJQ,aAAa;MACbC,cAAc;MACdC,SAAS;MACTC,EAAE;MACFC,OAAO;MACPC,IAAI;MACJC,aAAa;MACbC,UAAU;MACVC,WAAW;MACXC,SAAS;MACTC,SAAS;MACTC,MAAM;MACNC,QAAQ;MACRC,KAAK;MACLC;IAEF,CAAC,GAAGjB,KAAK;IADJkB,MAAM,GAAAC,wBAAA,CACPnB,KAAK,EAAAoB,SAAA;EAET,MAAMC,MAAM,GAAGlB,aAAa,IAAIC,cAAc;EAE9C,MAAM,CAACkB,OAAO,EAAEC,UAAU,CAAC,GAAGzC,KAAK,CAAC0C,QAAQ,CAE1C,CAAC;EACH,MAAM,CAACC,UAAU,CAAC,GAAG3C,KAAK,CAAC0C,QAAQ,CAAC,MAAMxB,KAAK,CAACM,EAAE,IAAIrB,YAAY,CAAC,CAAC,CAAC;EACrEe,KAAK,CAACyB,UAAU,GAAGA,UAAU;EAE7B3C,KAAK,CAAC4C,SAAS,CAAC,MAAM;IACpB,MAAMJ,OAAO,GAAG9B,gBAAgB,CAACD,aAAa,CAAC8B,MAAM,CAAC,CAAC;IACvDE,UAAU,CAACD,OAAO,CAAC;EACrB,CAAC,EAAE,CAACD,MAAM,CAAC,CAAC;EAEZ,MAAMM,OAAO,GAAG5C,UAAU,CACxB,aAAa,EAEbI,oBAAoB,CAACa,KAAK,CAAC,EAC3BK,SAAS,EAFTG,IAAI,KAAK,OAAO,IAAI,oBAGtB,CAAC;EAED,MAAMoB,UAAU,GAAA3B,aAAA;IACdI,SAAS,EAAEsB;EAAO,GACfT,MAAM,CACV;EAGDhC,qBAAqB,CAACU,UAAU,EAAEgC,UAAU,CAAC;EAE7C,IAAIP,MAAM,IAAI,CAACC,OAAO,EAAE;IACtB,OAAO,IAAI;EACb;EAEA,OACExC,KAAA,CAAA+C,aAAA,CAACzC,iBAAiB,EAAA0C,QAAA;IAACT,MAAM,EAAEC,OAAQ;IAACM,UAAU,EAAEA;EAAW,GAAK5B,KAAK,GAClEA,KAAK,CAAC+B,QACU,CAAC;AAExB;AAEA,SAAStC,qBAAqB;AAC9B,eAAeE,OAAO"}
+{"version":3,"file":"Tooltip.js","names":["React","classnames","Context","makeUniqueId","validateDOMAttributes","createSpacingClasses","TooltipWithEvents","defaultProps","getPropsFromTooltipProp","getRefElement","getTargetElement","injectTooltipSemantic","convertSnakeCaseProps","Tooltip","localProps","context","useContext","inherited","props","_objectSpread","getTranslation","targetElement","targetSelector","className","id","tooltip","size","fixedPosition","skipPortal","noAnimation","showDelay","hideDelay","active","position","arrow","align","params","_objectWithoutProperties","_excluded","target","element","setElement","useState","internalId","useEffect","classes","attributes","createElement","_extends","children"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["/**\n * Web Tooltip Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  makeUniqueId,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport TooltipWithEvents from './TooltipWithEvents'\nimport {\n  defaultProps,\n  getPropsFromTooltipProp,\n  getRefElement,\n  getTargetElement,\n  injectTooltipSemantic,\n} from './TooltipHelpers'\nimport { TooltipAllProps } from './types'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nfunction Tooltip(localProps: TooltipAllProps) {\n  const context = React.useContext(Context)\n\n  const inherited = getPropsFromTooltipProp(localProps)\n\n  // use only the props from context, who are available here anyway\n  const props = convertSnakeCaseProps({\n    ...defaultProps,\n    ...localProps,\n    ...inherited,\n    ...context.getTranslation(localProps).Tooltip,\n    ...context.Tooltip,\n  })\n\n  const {\n    targetElement,\n    targetSelector,\n    className,\n    id, // eslint-disable-line\n    tooltip, // eslint-disable-line\n    size,\n    fixedPosition, // eslint-disable-line\n    skipPortal, // eslint-disable-line\n    noAnimation, // eslint-disable-line\n    showDelay, // eslint-disable-line\n    hideDelay, // eslint-disable-line\n    active, // eslint-disable-line\n    position, // eslint-disable-line\n    arrow, // eslint-disable-line\n    align, // eslint-disable-line\n    ...params\n  } = props\n\n  const target = targetElement || targetSelector\n\n  const [element, setElement] = React.useState<\n    HTMLElement | React.ReactElement\n  >()\n  const [internalId] = React.useState(() => props.id || makeUniqueId()) // cause we need an id anyway\n  props.internalId = internalId\n\n  React.useEffect(() => {\n    const element = getTargetElement(getRefElement(target))\n    setElement(element)\n  }, [target])\n\n  const classes = classnames(\n    'dnb-tooltip',\n    size === 'large' && 'dnb-tooltip--large',\n    createSpacingClasses(props),\n    className\n  )\n\n  const attributes = {\n    className: classes,\n    ...params,\n  }\n\n  // also used for code markup simulation\n  validateDOMAttributes(localProps, attributes)\n\n  if (target && !element) {\n    return null\n  }\n\n  return (\n    <TooltipWithEvents target={element} attributes={attributes} {...props}>\n      {props.children}\n    </TooltipWithEvents>\n  )\n}\n\nexport { injectTooltipSemantic }\nexport default Tooltip\n"],"mappings":";;;;;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,SACEC,YAAY,EACZC,qBAAqB,QAChB,+BAA+B;AACtC,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,SACEC,YAAY,EACZC,uBAAuB,EACvBC,aAAa,EACbC,gBAAgB,EAChBC,qBAAqB,QAChB,kBAAkB;AAEzB,SAASC,qBAAqB,QAAQ,yCAAyC;AAE/E,SAASC,OAAOA,CAACC,UAA2B,EAAE;EAC5C,MAAMC,OAAO,GAAGf,KAAK,CAACgB,UAAU,CAACd,OAAO,CAAC;EAEzC,MAAMe,SAAS,GAAGT,uBAAuB,CAACM,UAAU,CAAC;EAGrD,MAAMI,KAAK,GAAGN,qBAAqB,CAAAO,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,KAC9BZ,YAAY,GACZO,UAAU,GACVG,SAAS,GACTF,OAAO,CAACK,cAAc,CAACN,UAAU,CAAC,CAACD,OAAO,GAC1CE,OAAO,CAACF,OAAO,CACnB,CAAC;EAEF,MAAM;MACJQ,aAAa;MACbC,cAAc;MACdC,SAAS;MACTC,EAAE;MACFC,OAAO;MACPC,IAAI;MACJC,aAAa;MACbC,UAAU;MACVC,WAAW;MACXC,SAAS;MACTC,SAAS;MACTC,MAAM;MACNC,QAAQ;MACRC,KAAK;MACLC;IAEF,CAAC,GAAGjB,KAAK;IADJkB,MAAM,GAAAC,wBAAA,CACPnB,KAAK,EAAAoB,SAAA;EAET,MAAMC,MAAM,GAAGlB,aAAa,IAAIC,cAAc;EAE9C,MAAM,CAACkB,OAAO,EAAEC,UAAU,CAAC,GAAGzC,KAAK,CAAC0C,QAAQ,CAE1C,CAAC;EACH,MAAM,CAACC,UAAU,CAAC,GAAG3C,KAAK,CAAC0C,QAAQ,CAAC,MAAMxB,KAAK,CAACM,EAAE,IAAIrB,YAAY,CAAC,CAAC,CAAC;EACrEe,KAAK,CAACyB,UAAU,GAAGA,UAAU;EAE7B3C,KAAK,CAAC4C,SAAS,CAAC,MAAM;IACpB,MAAMJ,OAAO,GAAG9B,gBAAgB,CAACD,aAAa,CAAC8B,MAAM,CAAC,CAAC;IACvDE,UAAU,CAACD,OAAO,CAAC;EACrB,CAAC,EAAE,CAACD,MAAM,CAAC,CAAC;EAEZ,MAAMM,OAAO,GAAG5C,UAAU,CACxB,aAAa,EAEbI,oBAAoB,CAACa,KAAK,CAAC,EAC3BK,SAAS,EAFTG,IAAI,KAAK,OAAO,IAAI,oBAGtB,CAAC;EAED,MAAMoB,UAAU,GAAA3B,aAAA;IACdI,SAAS,EAAEsB;EAAO,GACfT,MAAM,CACV;EAGDhC,qBAAqB,CAACU,UAAU,EAAEgC,UAAU,CAAC;EAE7C,IAAIP,MAAM,IAAI,CAACC,OAAO,EAAE;IACtB,OAAO,IAAI;EACb;EAEA,OACExC,KAAA,CAAA+C,aAAA,CAACzC,iBAAiB,EAAA0C,QAAA;IAACT,MAAM,EAAEC,OAAQ;IAACM,UAAU,EAAEA;EAAW,GAAK5B,KAAK,GAClEA,KAAK,CAAC+B,QACU,CAAC;AAExB;AAEA,SAAStC,qBAAqB;AAC9B,eAAeE,OAAO"}

package/components/tooltip/TooltipPortal.js

@@ -1,3 +1,5 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import ReactDOM from 'react-dom';

package/components/tooltip/TooltipPortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipPortal.js","names":["React","ReactDOM","makeUniqueId","warn","TooltipContainer","useTheme","getThemeClasses","tooltipPortal","globalThis","TooltipPortal","props","_tooltipPortal$id3","active","targetElement","hideDelay","keepInDOM","noAnimation","children","isMounted","setIsMounted","useState","isActive","setIsActive","id","isInDOM","useRef","theme","makePortal","count","node","createRootElement","clearTimers","_tooltipPortal$id","_tooltipPortal$id2","clearTimeout","delayTimeout","hiddenTimeout","removeFromDOM","hide","ref","useEffect","current","delayRender","delayHidden","IS_TEST","delay","parseFloat","String","setTimeout","root","createPortal","createElement","_extends","className","arguments","length","undefined","element","document","querySelector","elem","classList","add","call","split","body","appendChild","e"],"sources":["../../../../src/components/tooltip/TooltipPortal.tsx"],"sourcesContent":["/**\n * Web Tooltip Component\n *\n */\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { makeUniqueId, warn } from '../../shared/component-helper'\nimport TooltipContainer from './TooltipContainer'\nimport { TooltipProps } from './types'\nimport { useTheme } from '../../shared'\nimport { ThemeProps, getThemeClasses } from '../../shared/Theme'\n\ntype TooltipType = {\n  node: HTMLElement\n  count?: number\n  delayTimeout?: NodeJS.Timeout\n  hiddenTimeout?: NodeJS.Timeout\n}\n\nlet tooltipPortal: Record<string, TooltipType>\nif (typeof globalThis !== 'undefined') {\n  globalThis.tooltipPortal = globalThis.tooltipPortal || {}\n  tooltipPortal = globalThis.tooltipPortal\n} else {\n  tooltipPortal = {}\n}\n\ntype TooltipPortalProps = {\n  targetElement: HTMLElement\n  active: boolean\n  keepInDOM?: boolean\n  children?: React.ReactNode\n}\n\nfunction TooltipPortal(\n  props: TooltipProps & TooltipPortalProps\n): JSX.Element {\n  const {\n    active,\n    targetElement,\n    hideDelay,\n    keepInDOM,\n    noAnimation,\n    children,\n  } = props\n\n  const [isMounted, setIsMounted] = React.useState(false)\n  const [isActive, setIsActive] = React.useState(active)\n  const [id] = React.useState(() => makeUniqueId())\n  const isInDOM = React.useRef(false)\n\n  const theme = useTheme()\n\n  const makePortal = () => {\n    if (!tooltipPortal[id]) {\n      tooltipPortal[id] = {\n        count: 0,\n        node: createRootElement(theme),\n      }\n    }\n  }\n\n  const clearTimers = () => {\n    clearTimeout(tooltipPortal[id]?.delayTimeout)\n    clearTimeout(tooltipPortal[id]?.hiddenTimeout)\n  }\n\n  const removeFromDOM = (hide?: boolean) => {\n    if (isActive && hide) {\n      return // stop here\n    }\n\n    const ref = tooltipPortal[id]\n    if (ref?.node) {\n      ref.count--\n      if (ref.count <= 0) {\n        /**\n         * Remove the referenced data\n         */\n        delete tooltipPortal[id]\n      }\n    }\n  }\n\n  React.useEffect(() => {\n    setIsMounted(true)\n\n    clearTimers()\n\n    if (active) {\n      makePortal()\n      setIsActive(true)\n\n      isInDOM.current = true\n\n      if (!isMounted) {\n        tooltipPortal[id].count++\n      }\n    } else if (!active && isMounted) {\n      const delayRender = () => {\n        setIsActive(false)\n      }\n\n      const delayHidden = () => {\n        isInDOM.current = false\n        removeFromDOM(true)\n      }\n\n      if (noAnimation || globalThis.IS_TEST) {\n        delayRender()\n        delayHidden()\n      } else if (tooltipPortal[id]) {\n        const delay = parseFloat(String(hideDelay))\n        tooltipPortal[id].delayTimeout = setTimeout(delayRender, delay)\n        tooltipPortal[id].hiddenTimeout = setTimeout(\n          delayHidden,\n          delay + 300\n        )\n      }\n    }\n\n    return clearTimers\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children, active, id, hideDelay, noAnimation])\n\n  React.useEffect(() => {\n    /**\n     * Because of \"aria-describedby\" on the target element,\n     * the Tooltip should exist in the DOM\n     */\n    if (keepInDOM) {\n      makePortal()\n    }\n\n    return removeFromDOM\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const root = tooltipPortal[id]?.node\n\n  if (root) {\n    return ReactDOM.createPortal(\n      isInDOM.current || keepInDOM ? (\n        <TooltipContainer\n          {...props}\n          targetElement={targetElement}\n          active={isActive}\n        >\n          {children}\n        </TooltipContainer>\n      ) : null,\n      root\n    )\n  }\n\n  return null\n}\n\nexport default TooltipPortal\n\nconst createRootElement = (theme: ThemeProps, className = null) => {\n  if (!className) {\n    className = 'dnb-tooltip__portal'\n  }\n  try {\n    const element: HTMLElement = document.querySelector(`.${className}`)\n\n    if (element) {\n      return element\n    }\n\n    const elem = document.createElement('div')\n    elem.classList.add(className)\n    elem.classList.add('dnb-core-style')\n\n    if (theme) {\n      elem.classList.add.call(\n        elem.classList,\n        ...getThemeClasses(theme).split(' ')\n      )\n    }\n\n    document.body.appendChild(elem)\n\n    return elem\n  } catch (e) {\n    warn(e)\n  }\n}\n"],"mappings":";AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,WAAW;AAChC,SAASC,YAAY,EAAEC,IAAI,QAAQ,+BAA+B;AAClE,OAAOC,gBAAgB,MAAM,oBAAoB;AAEjD,SAASC,QAAQ,QAAQ,cAAc;AACvC,SAAqBC,eAAe,QAAQ,oBAAoB;AAShE,IAAIC,aAA0C;AAC9C,IAAI,OAAOC,UAAU,KAAK,WAAW,EAAE;EACrCA,UAAU,CAACD,aAAa,GAAGC,UAAU,CAACD,aAAa,IAAI,CAAC,CAAC;EACzDA,aAAa,GAAGC,UAAU,CAACD,aAAa;AAC1C,CAAC,MAAM;EACLA,aAAa,GAAG,CAAC,CAAC;AACpB;AASA,SAASE,aAAaA,CACpBC,KAAwC,EAC3B;EAAA,IAAAC,kBAAA;EACb,MAAM;IACJC,MAAM;IACNC,aAAa;IACbC,SAAS;IACTC,SAAS;IACTC,WAAW;IACXC;EACF,CAAC,GAAGP,KAAK;EAET,MAAM,CAACQ,SAAS,EAAEC,YAAY,CAAC,GAAGnB,KAAK,CAACoB,QAAQ,CAAC,KAAK,CAAC;EACvD,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGtB,KAAK,CAACoB,QAAQ,CAACR,MAAM,CAAC;EACtD,MAAM,CAACW,EAAE,CAAC,GAAGvB,KAAK,CAACoB,QAAQ,CAAC,MAAMlB,YAAY,CAAC,CAAC,CAAC;EACjD,MAAMsB,OAAO,GAAGxB,KAAK,CAACyB,MAAM,CAAC,KAAK,CAAC;EAEnC,MAAMC,KAAK,GAAGrB,QAAQ,CAAC,CAAC;EAExB,MAAMsB,UAAU,GAAGA,CAAA,KAAM;IACvB,IAAI,CAACpB,aAAa,CAACgB,EAAE,CAAC,EAAE;MACtBhB,aAAa,CAACgB,EAAE,CAAC,GAAG;QAClBK,KAAK,EAAE,CAAC;QACRC,IAAI,EAAEC,iBAAiB,CAACJ,KAAK;MAC/B,CAAC;IACH;EACF,CAAC;EAED,MAAMK,WAAW,GAAGA,CAAA,KAAM;IAAA,IAAAC,iBAAA,EAAAC,kBAAA;IACxBC,YAAY,EAAAF,iBAAA,GAACzB,aAAa,CAACgB,EAAE,CAAC,cAAAS,iBAAA,uBAAjBA,iBAAA,CAAmBG,YAAY,CAAC;IAC7CD,YAAY,EAAAD,kBAAA,GAAC1B,aAAa,CAACgB,EAAE,CAAC,cAAAU,kBAAA,uBAAjBA,kBAAA,CAAmBG,aAAa,CAAC;EAChD,CAAC;EAED,MAAMC,aAAa,GAAIC,IAAc,IAAK;IACxC,IAAIjB,QAAQ,IAAIiB,IAAI,EAAE;MACpB;IACF;IAEA,MAAMC,GAAG,GAAGhC,aAAa,CAACgB,EAAE,CAAC;IAC7B,IAAIgB,GAAG,aAAHA,GAAG,eAAHA,GAAG,CAAEV,IAAI,EAAE;MACbU,GAAG,CAACX,KAAK,EAAE;MACX,IAAIW,GAAG,CAACX,KAAK,IAAI,CAAC,EAAE;QAIlB,OAAOrB,aAAa,CAACgB,EAAE,CAAC;MAC1B;IACF;EACF,CAAC;EAEDvB,KAAK,CAACwC,SAAS,CAAC,MAAM;IACpBrB,YAAY,CAAC,IAAI,CAAC;IAElBY,WAAW,CAAC,CAAC;IAEb,IAAInB,MAAM,EAAE;MACVe,UAAU,CAAC,CAAC;MACZL,WAAW,CAAC,IAAI,CAAC;MAEjBE,OAAO,CAACiB,OAAO,GAAG,IAAI;MAEtB,IAAI,CAACvB,SAAS,EAAE;QACdX,aAAa,CAACgB,EAAE,CAAC,CAACK,KAAK,EAAE;MAC3B;IACF,CAAC,MAAM,IAAI,CAAChB,MAAM,IAAIM,SAAS,EAAE;MAC/B,MAAMwB,WAAW,GAAGA,CAAA,KAAM;QACxBpB,WAAW,CAAC,KAAK,CAAC;MACpB,CAAC;MAED,MAAMqB,WAAW,GAAGA,CAAA,KAAM;QACxBnB,OAAO,CAACiB,OAAO,GAAG,KAAK;QACvBJ,aAAa,CAAC,IAAI,CAAC;MACrB,CAAC;MAED,IAAIrB,WAAW,IAAIR,UAAU,CAACoC,OAAO,EAAE;QACrCF,WAAW,CAAC,CAAC;QACbC,WAAW,CAAC,CAAC;MACf,CAAC,MAAM,IAAIpC,aAAa,CAACgB,EAAE,CAAC,EAAE;QAC5B,MAAMsB,KAAK,GAAGC,UAAU,CAACC,MAAM,CAACjC,SAAS,CAAC,CAAC;QAC3CP,aAAa,CAACgB,EAAE,CAAC,CAACY,YAAY,GAAGa,UAAU,CAACN,WAAW,EAAEG,KAAK,CAAC;QAC/DtC,aAAa,CAACgB,EAAE,CAAC,CAACa,aAAa,GAAGY,UAAU,CAC1CL,WAAW,EACXE,KAAK,GAAG,GACV,CAAC;MACH;IACF;IAEA,OAAOd,WAAW;EAGpB,CAAC,EAAE,CAACd,QAAQ,EAAEL,MAAM,EAAEW,EAAE,EAAET,SAAS,EAAEE,WAAW,CAAC,CAAC;EAElDhB,KAAK,CAACwC,SAAS,CAAC,MAAM;IAKpB,IAAIzB,SAAS,EAAE;MACbY,UAAU,CAAC,CAAC;IACd;IAEA,OAAOU,aAAa;EAEtB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMY,IAAI,IAAAtC,kBAAA,GAAGJ,aAAa,CAACgB,EAAE,CAAC,cAAAZ,kBAAA,uBAAjBA,kBAAA,CAAmBkB,IAAI;EAEpC,IAAIoB,IAAI,EAAE;IACR,OAAOhD,QAAQ,CAACiD,YAAY,CAC1B1B,OAAO,CAACiB,OAAO,IAAI1B,SAAS,GAC1Bf,KAAA,CAAAmD,aAAA,CAAC/C,gBAAgB,EAAAgD,QAAA,KACX1C,KAAK;MACTG,aAAa,EAAEA,aAAc;MAC7BD,MAAM,EAAES;IAAS,IAEhBJ,QACe,CAAC,GACjB,IAAI,EACRgC,IACF,CAAC;EACH;EAEA,OAAO,IAAI;AACb;AAEA,eAAexC,aAAa;AAE5B,MAAMqB,iBAAiB,GAAG,SAAAA,CAACJ,KAAiB,EAAuB;EAAA,IAArB2B,SAAS,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;EAC5D,IAAI,CAACD,SAAS,EAAE;IACdA,SAAS,GAAG,qBAAqB;EACnC;EACA,IAAI;IACF,MAAMI,OAAoB,GAAGC,QAAQ,CAACC,aAAa,CAAE,IAAGN,SAAU,EAAC,CAAC;IAEpE,IAAII,OAAO,EAAE;MACX,OAAOA,OAAO;IAChB;IAEA,MAAMG,IAAI,GAAGF,QAAQ,CAACP,aAAa,CAAC,KAAK,CAAC;IAC1CS,IAAI,CAACC,SAAS,CAACC,GAAG,CAACT,SAAS,CAAC;IAC7BO,IAAI,CAACC,SAAS,CAACC,GAAG,CAAC,gBAAgB,CAAC;IAEpC,IAAIpC,KAAK,EAAE;MACTkC,IAAI,CAACC,SAAS,CAACC,GAAG,CAACC,IAAI,CACrBH,IAAI,CAACC,SAAS,EACd,GAAGvD,eAAe,CAACoB,KAAK,CAAC,CAACsC,KAAK,CAAC,GAAG,CACrC,CAAC;IACH;IAEAN,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACN,IAAI,CAAC;IAE/B,OAAOA,IAAI;EACb,CAAC,CAAC,OAAOO,CAAC,EAAE;IACVhE,IAAI,CAACgE,CAAC,CAAC;EACT;AACF,CAAC"}
+{"version":3,"file":"TooltipPortal.js","names":["React","ReactDOM","makeUniqueId","warn","TooltipContainer","useTheme","getThemeClasses","tooltipPortal","globalThis","TooltipPortal","props","_tooltipPortal$id3","active","targetElement","hideDelay","keepInDOM","noAnimation","children","isMounted","setIsMounted","useState","isActive","setIsActive","id","isInDOM","useRef","theme","makePortal","count","node","createRootElement","clearTimers","_tooltipPortal$id","_tooltipPortal$id2","clearTimeout","delayTimeout","hiddenTimeout","removeFromDOM","hide","ref","useEffect","current","delayRender","delayHidden","IS_TEST","delay","parseFloat","String","setTimeout","root","createPortal","createElement","_extends","className","arguments","length","undefined","element","document","querySelector","elem","classList","add","call","split","body","appendChild","e"],"sources":["../../../../src/components/tooltip/TooltipPortal.tsx"],"sourcesContent":["/**\n * Web Tooltip Component\n *\n */\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { makeUniqueId, warn } from '../../shared/component-helper'\nimport TooltipContainer from './TooltipContainer'\nimport { TooltipProps } from './types'\nimport { useTheme } from '../../shared'\nimport { ThemeProps, getThemeClasses } from '../../shared/Theme'\n\ntype TooltipType = {\n  node: HTMLElement\n  count?: number\n  delayTimeout?: NodeJS.Timeout\n  hiddenTimeout?: NodeJS.Timeout\n}\n\nlet tooltipPortal: Record<string, TooltipType>\nif (typeof globalThis !== 'undefined') {\n  globalThis.tooltipPortal = globalThis.tooltipPortal || {}\n  tooltipPortal = globalThis.tooltipPortal\n} else {\n  tooltipPortal = {}\n}\n\ntype TooltipPortalProps = {\n  targetElement: HTMLElement\n  active: boolean\n  keepInDOM?: boolean\n  children?: React.ReactNode\n}\n\nfunction TooltipPortal(\n  props: TooltipProps & TooltipPortalProps\n): JSX.Element {\n  const {\n    active,\n    targetElement,\n    hideDelay,\n    keepInDOM,\n    noAnimation,\n    children,\n  } = props\n\n  const [isMounted, setIsMounted] = React.useState(false)\n  const [isActive, setIsActive] = React.useState(active)\n  const [id] = React.useState(() => makeUniqueId())\n  const isInDOM = React.useRef(false)\n\n  const theme = useTheme()\n\n  const makePortal = () => {\n    if (!tooltipPortal[id]) {\n      tooltipPortal[id] = {\n        count: 0,\n        node: createRootElement(theme),\n      }\n    }\n  }\n\n  const clearTimers = () => {\n    clearTimeout(tooltipPortal[id]?.delayTimeout)\n    clearTimeout(tooltipPortal[id]?.hiddenTimeout)\n  }\n\n  const removeFromDOM = (hide?: boolean) => {\n    if (isActive && hide) {\n      return // stop here\n    }\n\n    const ref = tooltipPortal[id]\n    if (ref?.node) {\n      ref.count--\n      if (ref.count <= 0) {\n        /**\n         * Remove the referenced data\n         */\n        delete tooltipPortal[id]\n      }\n    }\n  }\n\n  React.useEffect(() => {\n    setIsMounted(true)\n\n    clearTimers()\n\n    if (active) {\n      makePortal()\n      setIsActive(true)\n\n      isInDOM.current = true\n\n      if (!isMounted) {\n        tooltipPortal[id].count++\n      }\n    } else if (!active && isMounted) {\n      const delayRender = () => {\n        setIsActive(false)\n      }\n\n      const delayHidden = () => {\n        isInDOM.current = false\n        removeFromDOM(true)\n      }\n\n      if (noAnimation || globalThis.IS_TEST) {\n        delayRender()\n        delayHidden()\n      } else if (tooltipPortal[id]) {\n        const delay = parseFloat(String(hideDelay))\n        tooltipPortal[id].delayTimeout = setTimeout(delayRender, delay)\n        tooltipPortal[id].hiddenTimeout = setTimeout(\n          delayHidden,\n          delay + 300\n        )\n      }\n    }\n\n    return clearTimers\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children, active, id, hideDelay, noAnimation])\n\n  React.useEffect(() => {\n    /**\n     * Because of \"aria-describedby\" on the target element,\n     * the Tooltip should exist in the DOM\n     */\n    if (keepInDOM) {\n      makePortal()\n    }\n\n    return removeFromDOM\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const root = tooltipPortal[id]?.node\n\n  if (root) {\n    return ReactDOM.createPortal(\n      isInDOM.current || keepInDOM ? (\n        <TooltipContainer\n          {...props}\n          targetElement={targetElement}\n          active={isActive}\n        >\n          {children}\n        </TooltipContainer>\n      ) : null,\n      root\n    )\n  }\n\n  return null\n}\n\nexport default TooltipPortal\n\nconst createRootElement = (theme: ThemeProps, className = null) => {\n  if (!className) {\n    className = 'dnb-tooltip__portal'\n  }\n  try {\n    const element: HTMLElement = document.querySelector(`.${className}`)\n\n    if (element) {\n      return element\n    }\n\n    const elem = document.createElement('div')\n    elem.classList.add(className)\n    elem.classList.add('dnb-core-style')\n\n    if (theme) {\n      elem.classList.add.call(\n        elem.classList,\n        ...getThemeClasses(theme).split(' ')\n      )\n    }\n\n    document.body.appendChild(elem)\n\n    return elem\n  } catch (e) {\n    warn(e)\n  }\n}\n"],"mappings":"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"}

package/components/upload/Upload.d.ts

@@ -5,6 +5,7 @@ export { defaultProps };
 declare const Upload: {
     (localProps: UploadAllProps): import("react/jsx-runtime").JSX.Element;
     useUpload: typeof useUpload;
+    _formElement: boolean;
     _supportsSpacingProps: boolean;
 };
 export default Upload;

package/components/upload/Upload.js

@@ -1,3 +1,5 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
@@ -114,6 +116,7 @@ const Upload = localProps => {
   }
 };
 Upload.useUpload = useUpload;
+Upload._formElement = true;
 Upload._supportsSpacingProps = true;
 export default Upload;
 //# sourceMappingURL=Upload.js.map

package/components/upload/Upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"Upload.js","names":["React","classnames","createSpacingClasses","Provider","Context","extendPropsWithContext","makeUniqueId","UploadFileInput","useUpload","UploadDropzone","UploadContext","defaultProps","verifyFiles","UploadFileList","UploadInfo","Upload","localProps","context","useContext","_context$getTranslati","getTranslation","buttonTextSingular","textSingular","translations","_objectWithoutProperties","_excluded","filesAmountLimit","buttonText","text","extendedProps","skeleton","id","className","acceptedFileTypes","fileMaxSize","onChange","onFileDelete","title","fileTypeDescription","fileSizeDescription","fileAmountDescription","fileSizeContent","loadingText","errorLargeFile","errorUnsupportedFile","errorAmountLimit","deleteButton","fileListAriaLabel","props","_excluded2","spacingClasses","files","setFiles","setInternalFiles","getExistingFile","filesRef","useRef","useEffect","current","createElement","value","_objectSpread","onInputUpload","_extends","_UploadInfo","_UploadFileInput","_UploadFileList","newFiles","mergedFiles","map","fileItem","file","existingFile","exists","Boolean","verifiedFiles","filter","_ref","validFiles","slice","_supportsSpacingProps"],"sources":["../../../../src/components/upload/Upload.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Shared\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Provider from '../../shared/Provider'\nimport Context from '../../shared/Context'\nimport {\n  extendPropsWithContext,\n  makeUniqueId,\n} from '../../shared/component-helper'\n\n// Internal\nimport UploadFileInput from './UploadFileInput'\nimport useUpload from './useUpload'\nimport UploadDropzone from './UploadDropzone'\nimport { UploadContext, defaultProps } from './UploadContext'\nimport { verifyFiles } from './UploadVerify'\n\nimport type { UploadFile, UploadAllProps } from './types'\nimport UploadFileList from './UploadFileList'\nimport UploadInfo from './UploadInfo'\n\nexport { defaultProps }\n\nconst Upload = (localProps: UploadAllProps) => {\n  const context = React.useContext(Context)\n\n  const { buttonTextSingular, textSingular, ...translations } =\n    context.getTranslation(localProps).Upload\n\n  if (localProps?.filesAmountLimit === 1) {\n    translations.buttonText = buttonTextSingular\n    translations.text = textSingular\n  }\n\n  const extendedProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    { skeleton: context?.skeleton },\n    translations,\n    context.Upload\n  )\n\n  const {\n    id,\n    skeleton,\n    className,\n    acceptedFileTypes,\n    filesAmountLimit,\n    fileMaxSize,\n    onChange,\n    onFileDelete, // eslint-disable-line\n    title, // eslint-disable-line\n    text, // eslint-disable-line\n    fileTypeDescription, // eslint-disable-line\n    fileSizeDescription, // eslint-disable-line\n    fileAmountDescription, // eslint-disable-line\n    fileSizeContent, // eslint-disable-line\n    buttonText, // eslint-disable-line\n    loadingText, // eslint-disable-line\n    errorLargeFile,\n    errorUnsupportedFile,\n    errorAmountLimit, // eslint-disable-line\n    deleteButton, // eslint-disable-line\n    fileListAriaLabel, // eslint-disable-line\n    ...props\n  } = extendedProps\n\n  const spacingClasses = createSpacingClasses(props)\n\n  const { files, setFiles, setInternalFiles, getExistingFile } =\n    useUpload(id)\n\n  const filesRef = React.useRef<UploadFile[]>(files)\n  React.useEffect(() => {\n    filesRef.current = files\n  }) // keep our ref updated on every re-render\n\n  return (\n    <UploadContext.Provider\n      value={{\n        ...extendedProps,\n        id,\n        onInputUpload,\n      }}\n    >\n      <Provider skeleton={skeleton}>\n        <UploadDropzone\n          className={classnames('dnb-upload', spacingClasses, className)}\n          {...props}\n        >\n          <UploadInfo />\n\n          <UploadFileInput />\n\n          <UploadFileList />\n        </UploadDropzone>\n      </Provider>\n    </UploadContext.Provider>\n  )\n\n  function onInputUpload(newFiles: UploadFile[]) {\n    const files = filesRef.current\n    const mergedFiles = [\n      ...files,\n      ...newFiles.map((fileItem) => {\n        const { file } = fileItem\n\n        const existingFile = getExistingFile(file, files)\n\n        fileItem.exists = Boolean(existingFile)\n        fileItem.id = fileItem.exists ? existingFile.id : makeUniqueId()\n\n        return fileItem\n      }),\n    ]\n\n    const verifiedFiles = verifyFiles(\n      mergedFiles.filter(({ exists }) => !exists),\n      {\n        fileMaxSize,\n        acceptedFileTypes,\n        errorUnsupportedFile,\n        errorLargeFile,\n      }\n    )\n\n    const validFiles = [...verifiedFiles].slice(0, filesAmountLimit)\n\n    setFiles(validFiles)\n    setInternalFiles(mergedFiles)\n\n    if (typeof onChange === 'function') {\n      onChange({ files: validFiles })\n    }\n\n    return validFiles\n  }\n}\n\nUpload.useUpload = useUpload\n\nUpload._supportsSpacingProps = true\n\nexport default Upload\n"],"mappings":"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"}
+{"version":3,"file":"Upload.js","names":["React","classnames","createSpacingClasses","Provider","Context","extendPropsWithContext","makeUniqueId","UploadFileInput","useUpload","UploadDropzone","UploadContext","defaultProps","verifyFiles","UploadFileList","UploadInfo","Upload","localProps","context","useContext","_context$getTranslati","getTranslation","buttonTextSingular","textSingular","translations","_objectWithoutProperties","_excluded","filesAmountLimit","buttonText","text","extendedProps","skeleton","id","className","acceptedFileTypes","fileMaxSize","onChange","onFileDelete","title","fileTypeDescription","fileSizeDescription","fileAmountDescription","fileSizeContent","loadingText","errorLargeFile","errorUnsupportedFile","errorAmountLimit","deleteButton","fileListAriaLabel","props","_excluded2","spacingClasses","files","setFiles","setInternalFiles","getExistingFile","filesRef","useRef","useEffect","current","createElement","value","_objectSpread","onInputUpload","_extends","_UploadInfo","_UploadFileInput","_UploadFileList","newFiles","mergedFiles","map","fileItem","file","existingFile","exists","Boolean","verifiedFiles","filter","_ref","validFiles","slice","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/upload/Upload.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Shared\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Provider from '../../shared/Provider'\nimport Context from '../../shared/Context'\nimport {\n  extendPropsWithContext,\n  makeUniqueId,\n} from '../../shared/component-helper'\n\n// Internal\nimport UploadFileInput from './UploadFileInput'\nimport useUpload from './useUpload'\nimport UploadDropzone from './UploadDropzone'\nimport { UploadContext, defaultProps } from './UploadContext'\nimport { verifyFiles } from './UploadVerify'\n\nimport type { UploadFile, UploadAllProps } from './types'\nimport UploadFileList from './UploadFileList'\nimport UploadInfo from './UploadInfo'\n\nexport { defaultProps }\n\nconst Upload = (localProps: UploadAllProps) => {\n  const context = React.useContext(Context)\n\n  const { buttonTextSingular, textSingular, ...translations } =\n    context.getTranslation(localProps).Upload\n\n  if (localProps?.filesAmountLimit === 1) {\n    translations.buttonText = buttonTextSingular\n    translations.text = textSingular\n  }\n\n  const extendedProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    { skeleton: context?.skeleton },\n    translations,\n    context.Upload\n  )\n\n  const {\n    id,\n    skeleton,\n    className,\n    acceptedFileTypes,\n    filesAmountLimit,\n    fileMaxSize,\n    onChange,\n    onFileDelete, // eslint-disable-line\n    title, // eslint-disable-line\n    text, // eslint-disable-line\n    fileTypeDescription, // eslint-disable-line\n    fileSizeDescription, // eslint-disable-line\n    fileAmountDescription, // eslint-disable-line\n    fileSizeContent, // eslint-disable-line\n    buttonText, // eslint-disable-line\n    loadingText, // eslint-disable-line\n    errorLargeFile,\n    errorUnsupportedFile,\n    errorAmountLimit, // eslint-disable-line\n    deleteButton, // eslint-disable-line\n    fileListAriaLabel, // eslint-disable-line\n    ...props\n  } = extendedProps\n\n  const spacingClasses = createSpacingClasses(props)\n\n  const { files, setFiles, setInternalFiles, getExistingFile } =\n    useUpload(id)\n\n  const filesRef = React.useRef<UploadFile[]>(files)\n  React.useEffect(() => {\n    filesRef.current = files\n  }) // keep our ref updated on every re-render\n\n  return (\n    <UploadContext.Provider\n      value={{\n        ...extendedProps,\n        id,\n        onInputUpload,\n      }}\n    >\n      <Provider skeleton={skeleton}>\n        <UploadDropzone\n          className={classnames('dnb-upload', spacingClasses, className)}\n          {...props}\n        >\n          <UploadInfo />\n\n          <UploadFileInput />\n\n          <UploadFileList />\n        </UploadDropzone>\n      </Provider>\n    </UploadContext.Provider>\n  )\n\n  function onInputUpload(newFiles: UploadFile[]) {\n    const files = filesRef.current\n    const mergedFiles = [\n      ...files,\n      ...newFiles.map((fileItem) => {\n        const { file } = fileItem\n\n        const existingFile = getExistingFile(file, files)\n\n        fileItem.exists = Boolean(existingFile)\n        fileItem.id = fileItem.exists ? existingFile.id : makeUniqueId()\n\n        return fileItem\n      }),\n    ]\n\n    const verifiedFiles = verifyFiles(\n      mergedFiles.filter(({ exists }) => !exists),\n      {\n        fileMaxSize,\n        acceptedFileTypes,\n        errorUnsupportedFile,\n        errorLargeFile,\n      }\n    )\n\n    const validFiles = [...verifiedFiles].slice(0, filesAmountLimit)\n\n    setFiles(validFiles)\n    setInternalFiles(mergedFiles)\n\n    if (typeof onChange === 'function') {\n      onChange({ files: validFiles })\n    }\n\n    return validFiles\n  }\n}\n\nUpload.useUpload = useUpload\n\nUpload._formElement = true\nUpload._supportsSpacingProps = true\n\nexport default Upload\n"],"mappings":"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"}

package/components/upload/useUpload.js

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEventEmitter } from '../../shared/component-helper';
 function useUpload(id) {
   const {

package/components/upload/useUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUpload.js","names":["useEventEmitter","useUpload","id","data","update","setFiles","files","setInternalFiles","internalFiles","getExistingFile","file","fileItems","arguments","length","undefined","find","_ref","f","name","size","lastModified"],"sources":["../../../../src/components/upload/useUpload.ts"],"sourcesContent":["import { useEventEmitter } from '../../shared/component-helper'\nimport type { UploadFile } from './types'\n\nexport type useUploadReturn = {\n  files: UploadFile[]\n  setFiles: (files: UploadFile[]) => void\n  internalFiles: UploadFile[]\n  setInternalFiles: (files: UploadFile[]) => void\n  getExistingFile: (file: File, fileItems?: UploadFile[]) => UploadFile\n}\n\n/**\n * Use together with Upload with the same id to manage the files from outside the component.\n */\nfunction useUpload(id: string): useUploadReturn {\n  const { data, update } = useEventEmitter(id)\n\n  const setFiles = (files: UploadFile[]) => {\n    update({ files })\n  }\n\n  const setInternalFiles = (internalFiles: UploadFile[]) => {\n    update({ internalFiles })\n  }\n\n  const files = data?.files || []\n  const internalFiles = data?.internalFiles || []\n\n  const getExistingFile = (\n    file: File,\n    fileItems: UploadFile[] = files\n  ) => {\n    return fileItems.find(({ file: f }) => {\n      return (\n        f.name === file.name &&\n        f.size === file.size &&\n        f.lastModified === file.lastModified\n      )\n    })\n  }\n\n  return {\n    files,\n    setFiles,\n    internalFiles,\n    setInternalFiles,\n    getExistingFile,\n  }\n}\n\nexport default useUpload\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,+BAA+B;AAc/D,SAASC,SAASA,CAACC,EAAU,EAAmB;EAC9C,MAAM;IAAEC,IAAI;IAAEC;EAAO,CAAC,GAAGJ,eAAe,CAACE,EAAE,CAAC;EAE5C,MAAMG,QAAQ,GAAIC,KAAmB,IAAK;IACxCF,MAAM,CAAC;MAAEE;IAAM,CAAC,CAAC;EACnB,CAAC;EAED,MAAMC,gBAAgB,GAAIC,aAA2B,IAAK;IACxDJ,MAAM,CAAC;MAAEI;IAAc,CAAC,CAAC;EAC3B,CAAC;EAED,MAAMF,KAAK,GAAG,CAAAH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,KAAK,KAAI,EAAE;EAC/B,MAAME,aAAa,GAAG,CAAAL,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,aAAa,KAAI,EAAE;EAE/C,MAAMC,eAAe,GAAG,SAAAA,CACtBC,IAAU,EAEP;IAAA,IADHC,SAAuB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGN,KAAK;IAE/B,OAAOK,SAAS,CAACI,IAAI,CAACC,IAAA,IAAiB;MAAA,IAAhB;QAAEN,IAAI,EAAEO;MAAE,CAAC,GAAAD,IAAA;MAChC,OACEC,CAAC,CAACC,IAAI,KAAKR,IAAI,CAACQ,IAAI,IACpBD,CAAC,CAACE,IAAI,KAAKT,IAAI,CAACS,IAAI,IACpBF,CAAC,CAACG,YAAY,KAAKV,IAAI,CAACU,YAAY;IAExC,CAAC,CAAC;EACJ,CAAC;EAED,OAAO;IACLd,KAAK;IACLD,QAAQ;IACRG,aAAa;IACbD,gBAAgB;IAChBE;EACF,CAAC;AACH;AAEA,eAAeR,SAAS"}
+{"version":3,"file":"useUpload.js","names":["useEventEmitter","useUpload","id","data","update","setFiles","files","setInternalFiles","internalFiles","getExistingFile","file","fileItems","arguments","length","undefined","find","_ref","f","name","size","lastModified"],"sources":["../../../../src/components/upload/useUpload.ts"],"sourcesContent":["import { useEventEmitter } from '../../shared/component-helper'\nimport type { UploadFile } from './types'\n\nexport type useUploadReturn = {\n  files: UploadFile[]\n  setFiles: (files: UploadFile[]) => void\n  internalFiles: UploadFile[]\n  setInternalFiles: (files: UploadFile[]) => void\n  getExistingFile: (file: File, fileItems?: UploadFile[]) => UploadFile\n}\n\n/**\n * Use together with Upload with the same id to manage the files from outside the component.\n */\nfunction useUpload(id: string): useUploadReturn {\n  const { data, update } = useEventEmitter(id)\n\n  const setFiles = (files: UploadFile[]) => {\n    update({ files })\n  }\n\n  const setInternalFiles = (internalFiles: UploadFile[]) => {\n    update({ internalFiles })\n  }\n\n  const files = data?.files || []\n  const internalFiles = data?.internalFiles || []\n\n  const getExistingFile = (\n    file: File,\n    fileItems: UploadFile[] = files\n  ) => {\n    return fileItems.find(({ file: f }) => {\n      return (\n        f.name === file.name &&\n        f.size === file.size &&\n        f.lastModified === file.lastModified\n      )\n    })\n  }\n\n  return {\n    files,\n    setFiles,\n    internalFiles,\n    setInternalFiles,\n    getExistingFile,\n  }\n}\n\nexport default useUpload\n"],"mappings":";;AAAA,SAASA,eAAe,QAAQ,+BAA+B;AAc/D,SAASC,SAASA,CAACC,EAAU,EAAmB;EAC9C,MAAM;IAAEC,IAAI;IAAEC;EAAO,CAAC,GAAGJ,eAAe,CAACE,EAAE,CAAC;EAE5C,MAAMG,QAAQ,GAAIC,KAAmB,IAAK;IACxCF,MAAM,CAAC;MAAEE;IAAM,CAAC,CAAC;EACnB,CAAC;EAED,MAAMC,gBAAgB,GAAIC,aAA2B,IAAK;IACxDJ,MAAM,CAAC;MAAEI;IAAc,CAAC,CAAC;EAC3B,CAAC;EAED,MAAMF,KAAK,GAAG,CAAAH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,KAAK,KAAI,EAAE;EAC/B,MAAME,aAAa,GAAG,CAAAL,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,aAAa,KAAI,EAAE;EAE/C,MAAMC,eAAe,GAAG,SAAAA,CACtBC,IAAU,EAEP;IAAA,IADHC,SAAuB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGN,KAAK;IAE/B,OAAOK,SAAS,CAACI,IAAI,CAACC,IAAA,IAAiB;MAAA,IAAhB;QAAEN,IAAI,EAAEO;MAAE,CAAC,GAAAD,IAAA;MAChC,OACEC,CAAC,CAACC,IAAI,KAAKR,IAAI,CAACQ,IAAI,IACpBD,CAAC,CAACE,IAAI,KAAKT,IAAI,CAACS,IAAI,IACpBF,CAAC,CAACG,YAAY,KAAKV,IAAI,CAACU,YAAY;IAExC,CAAC,CAAC;EACJ,CAAC;EAED,OAAO;IACLd,KAAK;IACLD,QAAQ;IACRG,aAAa;IACbD,gBAAgB;IAChBE;EACF,CAAC;AACH;AAEA,eAAeR,SAAS"}

package/components/visually-hidden/VisuallyHidden.js

@@ -1,3 +1,5 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["element", "children", "className", "focusable"];

package/components/visually-hidden/VisuallyHidden.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.js","names":["React","classnames","Context","extendPropsWithContext","defaultProps","focusable","element","VisuallyHidden","localProps","context","useContext","_extendPropsWithConte","children","className","props","_objectWithoutProperties","_excluded","visuallyHiddenClassNames","Element","createElement","_extends","_supportsSpacingProps"],"sources":["../../../../src/components/visually-hidden/VisuallyHidden.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Shared\nimport Context from '../../shared/Context'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport type { DynamicElement } from '../../shared/types'\n\nexport interface VisuallyHiddenProps {\n  /**\n   * Hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user)\n   * Default: false\n   */\n  focusable?: boolean\n\n  /**\n   * Root element of the component\n   * Default: span\n   */\n  element?: DynamicElement\n}\n\nexport type VisuallyHiddenAllProps = VisuallyHiddenProps &\n  React.HTMLProps<HTMLSpanElement>\n\nexport const defaultProps = {\n  focusable: false,\n  element: 'span',\n}\n\nconst VisuallyHidden = (localProps: VisuallyHiddenAllProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const { element, children, className, focusable, ...props } =\n    extendPropsWithContext(\n      localProps,\n      defaultProps,\n      context?.VisuallyHidden\n    )\n\n  const visuallyHiddenClassNames = classnames(\n    'dnb-visually-hidden',\n    focusable ? 'dnb-visually-hidden--focusable' : 'dnb-sr-only',\n    className\n  )\n  const Element = element || 'span'\n\n  return (\n    <Element\n      className={visuallyHiddenClassNames}\n      {...(props as Record<string, unknown>)}\n    >\n      {children}\n    </Element>\n  )\n}\n\nVisuallyHidden._supportsSpacingProps = true\n\nexport default VisuallyHidden\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,SAASC,sBAAsB,QAAQ,+BAA+B;AAoBtE,OAAO,MAAMC,YAAY,GAAG;EAC1BC,SAAS,EAAE,KAAK;EAChBC,OAAO,EAAE;AACX,CAAC;AAED,MAAMC,cAAc,GAAIC,UAAkC,IAAK;EAE7D,MAAMC,OAAO,GAAGT,KAAK,CAACU,UAAU,CAACR,OAAO,CAAC;EAGzC,MAAAS,qBAAA,GACER,sBAAsB,CACpBK,UAAU,EACVJ,YAAY,EACZK,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,cACX,CAAC;IALG;MAAED,OAAO;MAAEM,QAAQ;MAAEC,SAAS;MAAER;IAAoB,CAAC,GAAAM,qBAAA;IAAPG,KAAK,GAAAC,wBAAA,CAAAJ,qBAAA,EAAAK,SAAA;EAOzD,MAAMC,wBAAwB,GAAGhB,UAAU,CACzC,qBAAqB,EACrBI,SAAS,GAAG,gCAAgC,GAAG,aAAa,EAC5DQ,SACF,CAAC;EACD,MAAMK,OAAO,GAAGZ,OAAO,IAAI,MAAM;EAEjC,OACEN,KAAA,CAAAmB,aAAA,CAACD,OAAO,EAAAE,QAAA;IACNP,SAAS,EAAEI;EAAyB,GAC/BH,KAAK,GAETF,QACM,CAAC;AAEd,CAAC;AAEDL,cAAc,CAACc,qBAAqB,GAAG,IAAI;AAE3C,eAAed,cAAc"}
+{"version":3,"file":"VisuallyHidden.js","names":["React","classnames","Context","extendPropsWithContext","defaultProps","focusable","element","VisuallyHidden","localProps","context","useContext","_extendPropsWithConte","children","className","props","_objectWithoutProperties","_excluded","visuallyHiddenClassNames","Element","createElement","_extends","_supportsSpacingProps"],"sources":["../../../../src/components/visually-hidden/VisuallyHidden.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Shared\nimport Context from '../../shared/Context'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport type { DynamicElement } from '../../shared/types'\n\nexport interface VisuallyHiddenProps {\n  /**\n   * Hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user)\n   * Default: false\n   */\n  focusable?: boolean\n\n  /**\n   * Root element of the component\n   * Default: span\n   */\n  element?: DynamicElement\n}\n\nexport type VisuallyHiddenAllProps = VisuallyHiddenProps &\n  React.HTMLProps<HTMLSpanElement>\n\nexport const defaultProps = {\n  focusable: false,\n  element: 'span',\n}\n\nconst VisuallyHidden = (localProps: VisuallyHiddenAllProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const { element, children, className, focusable, ...props } =\n    extendPropsWithContext(\n      localProps,\n      defaultProps,\n      context?.VisuallyHidden\n    )\n\n  const visuallyHiddenClassNames = classnames(\n    'dnb-visually-hidden',\n    focusable ? 'dnb-visually-hidden--focusable' : 'dnb-sr-only',\n    className\n  )\n  const Element = element || 'span'\n\n  return (\n    <Element\n      className={visuallyHiddenClassNames}\n      {...(props as Record<string, unknown>)}\n    >\n      {children}\n    </Element>\n  )\n}\n\nVisuallyHidden._supportsSpacingProps = true\n\nexport default VisuallyHidden\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,SAASC,sBAAsB,QAAQ,+BAA+B;AAoBtE,OAAO,MAAMC,YAAY,GAAG;EAC1BC,SAAS,EAAE,KAAK;EAChBC,OAAO,EAAE;AACX,CAAC;AAED,MAAMC,cAAc,GAAIC,UAAkC,IAAK;EAE7D,MAAMC,OAAO,GAAGT,KAAK,CAACU,UAAU,CAACR,OAAO,CAAC;EAGzC,MAAAS,qBAAA,GACER,sBAAsB,CACpBK,UAAU,EACVJ,YAAY,EACZK,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,cACX,CAAC;IALG;MAAED,OAAO;MAAEM,QAAQ;MAAEC,SAAS;MAAER;IAAoB,CAAC,GAAAM,qBAAA;IAAPG,KAAK,GAAAC,wBAAA,CAAAJ,qBAAA,EAAAK,SAAA;EAOzD,MAAMC,wBAAwB,GAAGhB,UAAU,CACzC,qBAAqB,EACrBI,SAAS,GAAG,gCAAgC,GAAG,aAAa,EAC5DQ,SACF,CAAC;EACD,MAAMK,OAAO,GAAGZ,OAAO,IAAI,MAAM;EAEjC,OACEN,KAAA,CAAAmB,aAAA,CAACD,OAAO,EAAAE,QAAA;IACNP,SAAS,EAAEI;EAAyB,GAC/BH,KAAK,GAETF,QACM,CAAC;AAEd,CAAC;AAEDL,cAAc,CAACc,qBAAqB,GAAG,IAAI;AAE3C,eAAed,cAAc"}

package/elements/Element.js

@@ -1,3 +1,5 @@
+"use client";
+
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["className", "internalClass", "as", "innerRef", "skeleton", "skeletonMethod"];

package/elements/Element.js.map

@@ -1 +1 @@
-{"version":3,"file":"Element.js","names":["React","classnames","Context","validateDOMAttributes","extendPropsWithContext","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","defaultProps","skeletonMethod","Element","forwardRef","props","ref","createElement","ElementInstance","_extends","innerRef","localProps","context","useContext","skeleton","className","internalClass","as","rest","_objectWithoutProperties","_excluded","Tag","attributes","tagClass","internalClassName","RegExp","test","String"],"sources":["../../../src/elements/Element.tsx"],"sourcesContent":["/**\n * This is mainly a Wrapper, to build more easily HTML Elements\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../shared/Context'\nimport {\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../shared/component-helper'\nimport { createSpacingClasses } from '../components/space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n  SkeletonMethods,\n} from '../components/skeleton/SkeletonHelper'\nimport type { SkeletonShow } from '../components/skeleton/Skeleton'\n\nimport type { DynamicElement, SpacingProps } from '../shared/types'\n\nexport type ElementIsType = DynamicElement | React.ReactNode\n\nexport type ElementInternalProps = {\n  /**\n   * Defines the Element Type, like \"div\"\n   */\n  as: ElementIsType\n}\n\nexport type ElementProps = {\n  skeleton?: SkeletonShow\n  skeletonMethod?: SkeletonMethods\n  internalClass?: string\n  innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>\n  children?: React.ReactNode\n} & SpacingProps\n\nexport type ElementAllProps = ElementProps &\n  ElementInternalProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype Attributes = Record<string, unknown>\n\nexport const defaultProps = {\n  skeletonMethod: 'font',\n}\n\nconst Element = React.forwardRef((props: ElementAllProps, ref) => {\n  return <ElementInstance innerRef={ref} {...props} />\n})\n\nfunction ElementInstance(localProps: ElementAllProps) {\n  const context = React.useContext(Context)\n  const props = extendPropsWithContext(localProps, defaultProps, {\n    skeleton: context?.skeleton,\n  })\n\n  const {\n    className,\n    internalClass,\n    as,\n    innerRef,\n    skeleton,\n    skeletonMethod,\n    ...rest\n  } = props\n\n  const Tag = as as DynamicElement\n  const attributes = rest as Attributes\n\n  const tagClass =\n    internalClass || (typeof Tag === 'string' ? `dnb-${Tag}` : '')\n  const internalClassName = classnames(\n    !new RegExp(`${tagClass}(\\\\s|$)`).test(String(className)) && tagClass,\n    className,\n    createSkeletonClass(skeletonMethod, skeleton, context),\n    createSpacingClasses(\n      attributes,\n      typeof Tag === 'string' ? `dnb-${Tag}` : null\n    )\n  )\n\n  validateDOMAttributes(null, attributes)\n\n  skeletonDOMAttributes(attributes, skeleton, context)\n\n  if (typeof Tag !== 'function' && innerRef) {\n    attributes.ref = innerRef\n  }\n\n  return <Tag className={internalClassName} {...attributes} />\n}\n\nexport default Element\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,mBAAmB;AACvC,SACEC,qBAAqB,EACrBC,sBAAsB,QACjB,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SACEC,mBAAmB,EACnBC,qBAAqB,QAEhB,uCAAuC;AA4B9C,OAAO,MAAMC,YAAY,GAAG;EAC1BC,cAAc,EAAE;AAClB,CAAC;AAED,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAAC,CAACC,KAAsB,EAAEC,GAAG,KAAK;EAChE,OAAOb,KAAA,CAAAc,aAAA,CAACC,eAAe,EAAAC,QAAA;IAACC,QAAQ,EAAEJ;EAAI,GAAKD,KAAK,CAAG,CAAC;AACtD,CAAC,CAAC;AAEF,SAASG,eAAeA,CAACG,UAA2B,EAAE;EACpD,MAAMC,OAAO,GAAGnB,KAAK,CAACoB,UAAU,CAAClB,OAAO,CAAC;EACzC,MAAMU,KAAK,GAAGR,sBAAsB,CAACc,UAAU,EAAEV,YAAY,EAAE;IAC7Da,QAAQ,EAAEF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEE;EACrB,CAAC,CAAC;EAEF,MAAM;MACJC,SAAS;MACTC,aAAa;MACbC,EAAE;MACFP,QAAQ;MACRI,QAAQ;MACRZ;IAEF,CAAC,GAAGG,KAAK;IADJa,IAAI,GAAAC,wBAAA,CACLd,KAAK,EAAAe,SAAA;EAET,MAAMC,GAAG,GAAGJ,EAAoB;EAChC,MAAMK,UAAU,GAAGJ,IAAkB;EAErC,MAAMK,QAAQ,GACZP,aAAa,KAAK,OAAOK,GAAG,KAAK,QAAQ,GAAI,OAAMA,GAAI,EAAC,GAAG,EAAE,CAAC;EAChE,MAAMG,iBAAiB,GAAG9B,UAAU,CAElCqB,SAAS,EACThB,mBAAmB,CAACG,cAAc,EAAEY,QAAQ,EAAEF,OAAO,CAAC,EACtDd,oBAAoB,CAClBwB,UAAU,EACV,OAAOD,GAAG,KAAK,QAAQ,GAAI,OAAMA,GAAI,EAAC,GAAG,IAC3C,CAAC,EAND,CAAC,IAAII,MAAM,CAAE,GAAEF,QAAS,SAAQ,CAAC,CAACG,IAAI,CAACC,MAAM,CAACZ,SAAS,CAAC,CAAC,IAAIQ,QAO/D,CAAC;EAED3B,qBAAqB,CAAC,IAAI,EAAE0B,UAAU,CAAC;EAEvCtB,qBAAqB,CAACsB,UAAU,EAAER,QAAQ,EAAEF,OAAO,CAAC;EAEpD,IAAI,OAAOS,GAAG,KAAK,UAAU,IAAIX,QAAQ,EAAE;IACzCY,UAAU,CAAChB,GAAG,GAAGI,QAAQ;EAC3B;EAEA,OAAOjB,KAAA,CAAAc,aAAA,CAACc,GAAG,EAAAZ,QAAA;IAACM,SAAS,EAAES;EAAkB,GAAKF,UAAU,CAAG,CAAC;AAC9D;AAEA,eAAenB,OAAO"}
+{"version":3,"file":"Element.js","names":["React","classnames","Context","validateDOMAttributes","extendPropsWithContext","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","defaultProps","skeletonMethod","Element","forwardRef","props","ref","createElement","ElementInstance","_extends","innerRef","localProps","context","useContext","skeleton","className","internalClass","as","rest","_objectWithoutProperties","_excluded","Tag","attributes","tagClass","internalClassName","RegExp","test","String"],"sources":["../../../src/elements/Element.tsx"],"sourcesContent":["/**\n * This is mainly a Wrapper, to build more easily HTML Elements\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../shared/Context'\nimport {\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../shared/component-helper'\nimport { createSpacingClasses } from '../components/space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n  SkeletonMethods,\n} from '../components/skeleton/SkeletonHelper'\nimport type { SkeletonShow } from '../components/skeleton/Skeleton'\n\nimport type { DynamicElement, SpacingProps } from '../shared/types'\n\nexport type ElementIsType = DynamicElement | React.ReactNode\n\nexport type ElementInternalProps = {\n  /**\n   * Defines the Element Type, like \"div\"\n   */\n  as: ElementIsType\n}\n\nexport type ElementProps = {\n  skeleton?: SkeletonShow\n  skeletonMethod?: SkeletonMethods\n  internalClass?: string\n  innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>\n  children?: React.ReactNode\n} & SpacingProps\n\nexport type ElementAllProps = ElementProps &\n  ElementInternalProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype Attributes = Record<string, unknown>\n\nexport const defaultProps = {\n  skeletonMethod: 'font',\n}\n\nconst Element = React.forwardRef((props: ElementAllProps, ref) => {\n  return <ElementInstance innerRef={ref} {...props} />\n})\n\nfunction ElementInstance(localProps: ElementAllProps) {\n  const context = React.useContext(Context)\n  const props = extendPropsWithContext(localProps, defaultProps, {\n    skeleton: context?.skeleton,\n  })\n\n  const {\n    className,\n    internalClass,\n    as,\n    innerRef,\n    skeleton,\n    skeletonMethod,\n    ...rest\n  } = props\n\n  const Tag = as as DynamicElement\n  const attributes = rest as Attributes\n\n  const tagClass =\n    internalClass || (typeof Tag === 'string' ? `dnb-${Tag}` : '')\n  const internalClassName = classnames(\n    !new RegExp(`${tagClass}(\\\\s|$)`).test(String(className)) && tagClass,\n    className,\n    createSkeletonClass(skeletonMethod, skeleton, context),\n    createSpacingClasses(\n      attributes,\n      typeof Tag === 'string' ? `dnb-${Tag}` : null\n    )\n  )\n\n  validateDOMAttributes(null, attributes)\n\n  skeletonDOMAttributes(attributes, skeleton, context)\n\n  if (typeof Tag !== 'function' && innerRef) {\n    attributes.ref = innerRef\n  }\n\n  return <Tag className={internalClassName} {...attributes} />\n}\n\nexport default Element\n"],"mappings":";;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,mBAAmB;AACvC,SACEC,qBAAqB,EACrBC,sBAAsB,QACjB,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SACEC,mBAAmB,EACnBC,qBAAqB,QAEhB,uCAAuC;AA4B9C,OAAO,MAAMC,YAAY,GAAG;EAC1BC,cAAc,EAAE;AAClB,CAAC;AAED,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAAC,CAACC,KAAsB,EAAEC,GAAG,KAAK;EAChE,OAAOb,KAAA,CAAAc,aAAA,CAACC,eAAe,EAAAC,QAAA;IAACC,QAAQ,EAAEJ;EAAI,GAAKD,KAAK,CAAG,CAAC;AACtD,CAAC,CAAC;AAEF,SAASG,eAAeA,CAACG,UAA2B,EAAE;EACpD,MAAMC,OAAO,GAAGnB,KAAK,CAACoB,UAAU,CAAClB,OAAO,CAAC;EACzC,MAAMU,KAAK,GAAGR,sBAAsB,CAACc,UAAU,EAAEV,YAAY,EAAE;IAC7Da,QAAQ,EAAEF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEE;EACrB,CAAC,CAAC;EAEF,MAAM;MACJC,SAAS;MACTC,aAAa;MACbC,EAAE;MACFP,QAAQ;MACRI,QAAQ;MACRZ;IAEF,CAAC,GAAGG,KAAK;IADJa,IAAI,GAAAC,wBAAA,CACLd,KAAK,EAAAe,SAAA;EAET,MAAMC,GAAG,GAAGJ,EAAoB;EAChC,MAAMK,UAAU,GAAGJ,IAAkB;EAErC,MAAMK,QAAQ,GACZP,aAAa,KAAK,OAAOK,GAAG,KAAK,QAAQ,GAAI,OAAMA,GAAI,EAAC,GAAG,EAAE,CAAC;EAChE,MAAMG,iBAAiB,GAAG9B,UAAU,CAElCqB,SAAS,EACThB,mBAAmB,CAACG,cAAc,EAAEY,QAAQ,EAAEF,OAAO,CAAC,EACtDd,oBAAoB,CAClBwB,UAAU,EACV,OAAOD,GAAG,KAAK,QAAQ,GAAI,OAAMA,GAAI,EAAC,GAAG,IAC3C,CAAC,EAND,CAAC,IAAII,MAAM,CAAE,GAAEF,QAAS,SAAQ,CAAC,CAACG,IAAI,CAACC,MAAM,CAACZ,SAAS,CAAC,CAAC,IAAIQ,QAO/D,CAAC;EAED3B,qBAAqB,CAAC,IAAI,EAAE0B,UAAU,CAAC;EAEvCtB,qBAAqB,CAACsB,UAAU,EAAER,QAAQ,EAAEF,OAAO,CAAC;EAEpD,IAAI,OAAOS,GAAG,KAAK,UAAU,IAAIX,QAAQ,EAAE;IACzCY,UAAU,CAAChB,GAAG,GAAGI,QAAQ;EAC3B;EAEA,OAAOjB,KAAA,CAAAc,aAAA,CAACc,GAAG,EAAAZ,QAAA;IAACM,SAAS,EAAES;EAAkB,GAAKF,UAAU,CAAG,CAAC;AAC9D;AAEA,eAAenB,OAAO"}

package/elements/hr/style/dnb-hr.scss

@@ -11,40 +11,26 @@
 
   &--fullscreen::after {
     left: -100vw;
-    width: 200vw;
+    box-shadow: 100vw 0 0 0 currentcolor;
+    border-radius: 0;
   }
 
-  &--light::after {
-    border-radius: 0.25px;
+  --thickness: calc(var(--hr-thickness, 1px) + var(--modifier, 0px));
 
-    /* 
-    * 60% and 65% for best result on low res screens, like on Chromebook (Acer)
-    * Else the line will disappear!
-    */
-    background-image: linear-gradient(
-      to bottom,
-      currentcolor 60%,
-      transparent 65%
-    );
-    background-size: 100% 1px;
-    background-color: transparent;
-  }
-
-  &--medium::after {
-    height: 2px;
-    border-radius: 0.75px;
+  &--light {
+    --hr-thickness: 0.4px;
 
-    /* Revert the hairline halv */
-    background-image: linear-gradient(
-      to bottom,
-      currentcolor 51%,
-      transparent 51%
-    );
-    background-size: 100% 3px;
-    background-color: transparent;
+    // Modify the thickness, because the screenshot does not pick up the line when its under 1px.
+    // This may change in a later Playwright/Firefox version.
+    html[data-visual-test] & {
+      --modifier: 0.7px;
+    }
+  }
+  &--medium {
+    --hr-thickness: 1.5px;
   }
-}
 
-.dnb-spacing .dnb-hr {
-  @include ui-spacing.defaultSpacing();
+  .dnb-spacing & {
+    @include ui-spacing.defaultSpacing();
+  }
 }

package/elements/hr/style/hr-mixins.scss

@@ -3,9 +3,10 @@
 @mixin hrStyle() {
   position: relative;
   padding: 0;
+  width: 100%; // when nested in a flex container, we need this.
   height: 0;
 
-  display: flex;
+  display: flow-root; // avoid margin collapsing on Safari
 
   &:not([class*='dnb-space']) {
     margin: 0;
@@ -16,17 +17,14 @@
   &::after {
     content: '';
     position: absolute;
+    inset: 0;
     z-index: 1;
-    left: 0;
-    right: 0;
-    top: 0;
 
-    width: 100%;
-    height: 1px;
+    height: var(--thickness);
 
     color: inherit;
     background-color: currentcolor;
-    border-radius: 0.5px;
+    border-radius: calc(var(--thickness) / 2);
   }
 }