@dnb/eufemia 10.22.0 → 10.24.0

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

@@ -9,18 +9,24 @@
   cursor: auto;
   border: none;
   margin: 0;
-  padding: 0 var(--textarea-padding-width);
+  padding: 0;
 
   outline: none;
 
   font-size: var(--font-size-basis);
   line-height: var(--line-height-basis);
+  color: var(--textarea-color, var(--color-black));
+  background-color: var(--textarea-background-color, var(--color-white));
 }
 
 .dnb-textarea {
-  --textarea-padding-width: 0.5rem;
+  --textarea-border-radius: 0.25rem;
   --textarea-rows: 2; // using variable so it can be dynamically changed by react component
   --textarea-background-color: var(--color-white);
+  --textarea-placeholder-color: grey;
+  --textarea-size--small: 0.25rem;
+  --textarea-size--medium: 0.5rem;
+  --textarea-size--large: 0.75rem;
 
   display: inline-flex;
 
@@ -30,8 +36,6 @@
   &__inner {
     display: inline-flex;
     flex-direction: column;
-
-    margin: 0 var(--textarea-padding-width);
   }
 
   &__shell {
@@ -40,40 +44,77 @@
 
     // because of inheritance, we set the font-size and line-height here as well
     font-size: var(--font-size-basis);
+
+    &::after {
+      --size: 0.5rem;
+      --bg-size: cover;
+      --bg-pos: 0;
+
+      pointer-events: none;
+
+      position: absolute;
+      z-index: 2;
+
+      bottom: 0;
+      right: 0;
+
+      width: var(--size);
+      height: var(--size);
+
+      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path stroke="%23000" stroke-linecap="round" stroke-width=".5" d="m1 7 6-6M3.5 7 7 3.5M6 7l1-1"/></svg>');
+      background-size: var(--bg-size);
+      background-position: var(--bg-pos) var(--bg-pos);
+      background-color: var(--textarea-background-color);
+    }
+  }
+
+  &__resize--medium &__shell::after {
+    content: '';
+  }
+  &__resize--large &__shell::after {
+    content: '';
+
+    --size: 1rem;
+    --bg-size: 60%;
+    --bg-pos: 0.25rem;
+  }
+
+  &__autoresize &__shell::after {
+    content: none;
   }
 
   &__state {
     position: absolute;
     z-index: 1;
-    top: -0.5rem;
-    left: -0.5rem;
-    bottom: -0.5rem;
-    right: -0.5rem;
+    top: calc(var(--textarea-size-vertical) * -1);
+    left: calc(var(--textarea-size-horizontal) * -1);
+    bottom: calc(var(--textarea-size-vertical) * -1);
+
+    // use vertical to align the grabber to be centered on the corner
+    right: calc(var(--textarea-size-vertical) * -1);
+
+    background-color: var(--textarea-background-color);
 
-    background-color: var(--color-white);
     @include fakeBorder(
       var(--textarea-border-color),
       var(--textarea-border-width),
-      inset
+      var(--textarea-border-inset, inset)
     );
 
-    border-radius: 0.25rem;
+    border-radius: var(--textarea-border-radius);
   }
 
   &__row {
     display: inline-flex;
 
-    margin: var(--textarea-padding-width) 0;
+    margin: var(--textarea-size-vertical) var(--textarea-size-vertical)
+      var(--textarea-size-vertical) var(--textarea-size-horizontal);
   }
 
   &__suffix.dnb-suffix {
     padding-left: 1rem;
   }
 
-  .dnb-text-counter {
-    margin-left: -0.5rem;
-  }
-
   &__textarea {
     position: relative;
     z-index: 2;
@@ -86,7 +127,7 @@
     @include scrollY(auto);
 
     @include IS_FF() {
-      overflow-x: clip;
+      overflow-x: clip !important;
     }
   }
 
@@ -118,6 +159,9 @@
     -webkit-line-clamp: var(--textarea-rows, 2);
 
     @include textareaStyleCommon();
+
+    color: var(--textarea-placeholder-color);
+    background-color: transparent;
   }
 
   &__textarea,
@@ -130,6 +174,20 @@
     text-align: right;
   }
 
+  &,
+  &__size--small {
+    --textarea-size-vertical: var(--textarea-size--small);
+    --textarea-size-horizontal: 1rem;
+  }
+  &__size--medium {
+    --textarea-size-vertical: var(--textarea-size--medium);
+    --textarea-size-horizontal: 1rem;
+  }
+  &__size--large {
+    --textarea-size-vertical: var(--textarea-size--large);
+    --textarea-size-horizontal: 1rem;
+  }
+
   &__autoresize &__textarea {
     resize: none;
   }
@@ -143,19 +201,13 @@
     }
   }
 
-  // hide placeholder on focus
-  &--has-content &__textarea ~ &__placeholder,
-  &--focus &__textarea:not([disabled], [readonly]) ~ &__placeholder {
-    display: none;
-  }
-
   &__inner > .dnb-form-status {
     order: 2;
-    margin: 0.5rem 0 0 calc(1px - 1px - var(--textarea-padding-width));
+    margin-top: 0.5rem;
   }
 
   &:not(#{&}--vertical) .dnb-form-label {
-    margin-top: 0.5rem;
+    margin-top: var(--textarea-size-vertical);
   }
 
   &--vertical {
@@ -200,6 +252,11 @@
     width: 100%;
   }
 
+  &--keep-placeholder#{&}--focus &__placeholder {
+    --textarea-placeholder-color: var(--textarea-placeholder-color--focus);
+    display: block;
+  }
+
   .dnb-form-row--horizontal &--stretch {
     width: 100%;
   }
@@ -223,12 +280,7 @@
   }
 
   &.dnb-skeleton &__inner {
-    margin: 0;
-    border-radius: 0.25rem;
-  }
-
-  &.dnb-skeleton &__inner &__shell {
-    margin: var(--textarea-padding-width);
+    border-radius: var(--textarea-border-radius);
   }
 
   &.dnb-skeleton &__state,

package/components/textarea/style/themes/dnb-textarea-theme-sbanken.css

@@ -8,24 +8,21 @@
 .dnb-textarea {
   --textarea-border-color: var(--sb-color-gray-dark-2);
   --textarea-border-width: 0.0625rem;
-  --textarea-background-color: transparent;
-}
-.dnb-textarea__state {
-  transition: border-radius 0.25s ease-out;
-  --border-color: var(--textarea-border-color);
-  --border-width: var(--textarea-border-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-textarea__textarea {
+  --textarea-background-color: var(--color-white);
   --textarea-color: var(--textarea-color--default);
   --textarea-color--default: var(--color-black);
   --textarea-color--active: var(--color-black);
-  color: var(--textarea-color);
-  background-color: var(--textarea-background-color);
+  --textarea-placeholder-color: var(--sb-color-gray-dark-3);
+  --textarea-placeholder-color--focus: var(--sb-color-gray-dark-3);
 }
-.dnb-textarea__placeholder {
-  color: var(--sb-color-gray-dark-3);
+.dnb-textarea__textarea {
+  background-color: transparent;
+}
+.dnb-textarea__state {
+  transition: border-radius 0.25s ease-out;
+}
+.dnb-textarea__resize--medium .dnb-textarea__shell::after {
+  opacity: 0.1;
 }
 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
   --textarea-border-color: var(--sb-color-violet);
@@ -36,7 +33,7 @@
 }
 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state {
   --textarea-border-color: var(--sb-color-violet);
-  border-radius: 1.5rem;
+  --textarea-border-radius: 1.5rem;
   outline: none;
 }
 html[data-whatinput=keyboard] .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state {
@@ -45,13 +42,10 @@ html[data-whatinput=keyboard] .dnb-textarea__textarea:not([disabled]):not(.dnb-t
   box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-.dnb-textarea--disabled .dnb-textarea__textarea, .dnb-textarea__textarea[disabled] {
-  color: var(--sb-color-gray-dark-2);
-  background-color: var(--sb-color-gray-light);
-}
-.dnb-textarea--disabled .dnb-textarea__textarea ~ .dnb-textarea__state, .dnb-textarea__textarea[disabled] ~ .dnb-textarea__state {
+.dnb-textarea--disabled {
+  --textarea-color: var(--sb-color-gray-dark-2);
+  --textarea-background-color: var(--sb-color-gray-light);
   --textarea-border-color: var(--sb-color-gray-dark-2);
-  background-color: var(--sb-color-gray-light);
 }
 .dnb-textarea__status--error .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled) {
   --textarea-color--default: var(--sb-color-red);

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

@@ -1 +1 @@
-.dnb-textarea{--textarea-border-color:var(--sb-color-gray-dark-2);--textarea-border-width:0.0625rem;--textarea-background-color:transparent}.dnb-textarea__state{--border-color:var(--textarea-border-color);--border-width:var(--textarea-border-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);transition:border-radius .25s ease-out}.dnb-textarea__textarea{--textarea-color:var(--textarea-color--default);--textarea-color--default:var(--color-black);--textarea-color--active:var(--color-black);background-color:var(--textarea-background-color);color:var(--textarea-color)}.dnb-textarea__placeholder{color:var(--sb-color-gray-dark-3)}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--textarea-border-color:var(--sb-color-violet);--textarea-border-width:0.125rem}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus{--textarea-color:var(--textarea-color--active)}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state{--textarea-border-color:var(--sb-color-violet);border-radius:1.5rem;outline:none}html[data-whatinput=keyboard] .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{background-color:var(--sb-color-gray-light);color:var(--sb-color-gray-dark-2)}.dnb-textarea--disabled .dnb-textarea__textarea~.dnb-textarea__state,.dnb-textarea__textarea[disabled]~.dnb-textarea__state{--textarea-border-color:var(--sb-color-gray-dark-2);background-color:var(--sb-color-gray-light)}.dnb-textarea__status--error .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled){--textarea-color--default:var(--sb-color-red);--textarea-color--active:var(--color-black)}.dnb-textarea__status--error .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled)~.dnb-textarea__state{--textarea-border-color:var(--sb-color-red)}
+.dnb-textarea{--textarea-border-color:var(--sb-color-gray-dark-2);--textarea-border-width:0.0625rem;--textarea-background-color:var(--color-white);--textarea-color:var(--textarea-color--default);--textarea-color--default:var(--color-black);--textarea-color--active:var(--color-black);--textarea-placeholder-color:var(--sb-color-gray-dark-3);--textarea-placeholder-color--focus:var(--sb-color-gray-dark-3)}.dnb-textarea__textarea{background-color:transparent}.dnb-textarea__state{transition:border-radius .25s ease-out}.dnb-textarea__resize--medium .dnb-textarea__shell:after{opacity:.1}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--textarea-border-color:var(--sb-color-violet);--textarea-border-width:0.125rem}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus{--textarea-color:var(--textarea-color--active)}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state{--textarea-border-color:var(--sb-color-violet);--textarea-border-radius:1.5rem;outline:none}html[data-whatinput=keyboard] .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-textarea--disabled{--textarea-color:var(--sb-color-gray-dark-2);--textarea-background-color:var(--sb-color-gray-light);--textarea-border-color:var(--sb-color-gray-dark-2)}.dnb-textarea__status--error .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled){--textarea-color--default:var(--sb-color-red);--textarea-color--active:var(--color-black)}.dnb-textarea__status--error .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled)~.dnb-textarea__state{--textarea-border-color:var(--sb-color-red)}

package/components/textarea/style/themes/dnb-textarea-theme-sbanken.scss

@@ -8,28 +8,23 @@
 .dnb-textarea {
   --textarea-border-color: var(--sb-color-gray-dark-2);
   --textarea-border-width: 0.0625rem;
-  --textarea-background-color: transparent;
-
-  &__state {
-    transition: border-radius 0.25s ease-out;
-    @include fakeBorder(
-      var(--textarea-border-color),
-      var(--textarea-border-width),
-      inset
-    );
-  }
+  --textarea-background-color: var(--color-white);
+  --textarea-color: var(--textarea-color--default);
+  --textarea-color--default: var(--color-black);
+  --textarea-color--active: var(--color-black);
+  --textarea-placeholder-color: var(--sb-color-gray-dark-3);
+  --textarea-placeholder-color--focus: var(--sb-color-gray-dark-3);
 
   &__textarea {
-    --textarea-color: var(--textarea-color--default);
-    --textarea-color--default: var(--color-black);
-    --textarea-color--active: var(--color-black);
+    background-color: transparent;
+  }
 
-    color: var(--textarea-color);
-    background-color: var(--textarea-background-color);
+  &__state {
+    transition: border-radius 0.25s ease-out;
   }
 
-  &__placeholder {
-    color: var(--sb-color-gray-dark-3);
+  &__resize--medium &__shell::after {
+    opacity: 0.1;
   }
 
   // hover
@@ -44,21 +39,15 @@
 
     ~ .dnb-textarea__state {
       --textarea-border-color: var(--sb-color-violet);
-      border-radius: 1.5rem;
+      --textarea-border-radius: 1.5rem;
       @include focusRing(null, null, inset);
     }
   }
 
-  // disabled
-  &--disabled &__textarea,
-  &__textarea[disabled] {
-    color: var(--sb-color-gray-dark-2);
-    background-color: var(--sb-color-gray-light);
-
-    ~ .dnb-textarea__state {
-      --textarea-border-color: var(--sb-color-gray-dark-2);
-      background-color: var(--sb-color-gray-light);
-    }
+  &--disabled {
+    --textarea-color: var(--sb-color-gray-dark-2);
+    --textarea-background-color: var(--sb-color-gray-light);
+    --textarea-border-color: var(--sb-color-gray-dark-2);
   }
 
   // with status_state = "error"

package/components/textarea/style/themes/dnb-textarea-theme-ui.css

@@ -11,35 +11,24 @@
   --textarea-border-color--disabled: var(--color-black-55);
   --textarea-border-width: 0.0625rem;
   --textarea-border-width--hover: 0.125rem;
-}
-.dnb-textarea__textarea {
-  color: var(--color-black);
-  background-color: var(--textarea-background-color);
+  --textarea-color: var(--color-black);
+  --textarea-background-color: var(--color-white);
+  --textarea-placeholder-color: var(--color-black-55);
+  --textarea-placeholder-color--focus: var(--color-black-20);
 }
 .dnb-textarea__textarea ::selection {
   background-color: var(--color-mint-green);
-  color: var(--color-black);
   text-shadow: none;
 }
-.dnb-textarea__placeholder {
-  color: var(--color-black-55);
-}
 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state, .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
-  --border-color: var(--textarea-border-color--hover);
-  --border-width: var(--textarea-border-width--hover);
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-textarea--disabled .dnb-textarea__textarea, .dnb-textarea__textarea[disabled] {
-  color: var(--color-black-55);
-  background-color: var(--color-black-3);
-}
-.dnb-textarea--disabled .dnb-textarea__state, .dnb-textarea__textarea[disabled] ~ .dnb-textarea__state {
-  --border-color: var(--textarea-border-color--disabled);
-  --border-width: var(--textarea-border-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-  background-color: var(--color-black-3);
+  --textarea-border-color: var(--textarea-border-color--hover);
+  --textarea-border-width: var(--textarea-border-width--hover);
+  --textarea-border-inset: ;
+}
+.dnb-textarea--disabled {
+  --textarea-color: var(--color-black-55);
+  --textarea-background-color: var(--color-black-3);
+  --textarea-border-color: var(--textarea-border-color--disabled);
 }
 .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled), .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover {
   color: var(--color-fire-red);

package/components/textarea/style/themes/dnb-textarea-theme-ui.min.css

@@ -1 +1 @@
-.dnb-textarea{--textarea-border-color:var(--color-sea-green);--textarea-border-color--hover:var(--color-emerald-green);--textarea-border-color--disabled:var(--color-black-55);--textarea-border-width:0.0625rem;--textarea-border-width--hover:0.125rem}.dnb-textarea__textarea{background-color:var(--textarea-background-color);color:var(--color-black)}.dnb-textarea__textarea ::selection{background-color:var(--color-mint-green);color:var(--color-black);text-shadow:none}.dnb-textarea__placeholder{color:var(--color-black-55)}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state,.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--border-color:var(--textarea-border-color--hover);--border-width:var(--textarea-border-width--hover);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{background-color:var(--color-black-3);color:var(--color-black-55)}.dnb-textarea--disabled .dnb-textarea__state,.dnb-textarea__textarea[disabled]~.dnb-textarea__state{--border-color:var(--textarea-border-color--disabled);--border-width:var(--textarea-border-width);background-color:var(--color-black-3);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled),.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover{color:var(--color-fire-red)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled)~.dnb-textarea__state{--border-color:var(--color-fire-red);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--border-color:var(--color-fire-red);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}
+.dnb-textarea{--textarea-border-color:var(--color-sea-green);--textarea-border-color--hover:var(--color-emerald-green);--textarea-border-color--disabled:var(--color-black-55);--textarea-border-width:0.0625rem;--textarea-border-width--hover:0.125rem;--textarea-color:var(--color-black);--textarea-background-color:var(--color-white);--textarea-placeholder-color:var(--color-black-55);--textarea-placeholder-color--focus:var(--color-black-20)}.dnb-textarea__textarea ::selection{background-color:var(--color-mint-green);text-shadow:none}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state,.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--textarea-border-color:var(--textarea-border-color--hover);--textarea-border-width:var(--textarea-border-width--hover);--textarea-border-inset: }.dnb-textarea--disabled{--textarea-color:var(--color-black-55);--textarea-background-color:var(--color-black-3);--textarea-border-color:var(--textarea-border-color--disabled)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled),.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover{color:var(--color-fire-red)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled)~.dnb-textarea__state{--border-color:var(--color-fire-red);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--border-color:var(--color-fire-red);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}

package/components/textarea/style/themes/dnb-textarea-theme-ui.scss

@@ -11,28 +11,23 @@
   --textarea-border-color--disabled: var(--color-black-55);
   --textarea-border-width: 0.0625rem;
   --textarea-border-width--hover: 0.125rem;
+  --textarea-color: var(--color-black);
+  --textarea-background-color: var(--color-white);
+  --textarea-placeholder-color: var(--color-black-55);
+  --textarea-placeholder-color--focus: var(--color-black-20);
 
   &__textarea {
-    color: var(--color-black);
-    background-color: var(--textarea-background-color);
-
     ::selection {
       background-color: var(--color-mint-green);
-      color: var(--color-black);
       text-shadow: none;
     }
   }
 
-  &__placeholder {
-    color: var(--color-black-55);
-  }
-
   &__textarea:not([disabled]):not(#{&}--disabled):focus ~ &__state,
   &__textarea:not([disabled]):not(#{&}--disabled):hover ~ &__state {
-    @include fakeBorder(
-      var(--textarea-border-color--hover),
-      var(--textarea-border-width--hover)
-    );
+    --textarea-border-color: var(--textarea-border-color--hover);
+    --textarea-border-width: var(--textarea-border-width--hover);
+    --textarea-border-inset: ;
   }
 
   // We may enable this in future – right now it's unclear
@@ -41,21 +36,10 @@
   //   color: var(--color-black);
   // }
 
-  // disabled
-  &--disabled &__textarea,
-  &__textarea[disabled] {
-    color: var(--color-black-55);
-    background-color: var(--color-black-3);
-  }
-
-  &--disabled &__state,
-  &__textarea[disabled] ~ &__state {
-    @include fakeBorder(
-      var(--textarea-border-color--disabled),
-      var(--textarea-border-width),
-      inset
-    );
-    background-color: var(--color-black-3);
+  &--disabled {
+    --textarea-color: var(--color-black-55);
+    --textarea-background-color: var(--color-black-3);
+    --textarea-border-color: var(--textarea-border-color--disabled);
   }
 
   // with status_state = "error"

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

@@ -22,8 +22,7 @@
   box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
 }
 .dnb-toggle-button--checked .dnb-toggle-button__button[disabled], .dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled], .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] {
-  background-color: var(--color-mint-green);
-  color: var(--color-white);
+  background-color: var(--color-mint-green-25);
 }
 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active) {
   background-color: var(--color-emerald-green);

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

@@ -1 +1 @@
-.dnb-toggle-button .dnb-checkbox__gfx path{stroke-width:.125rem}.dnb-toggle-button .dnb-radio__input:not([disabled])~.dnb-radio__button{box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled],.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled],.dnb-toggle-button--checked .dnb-toggle-button__button[disabled]{background-color:var(--color-mint-green);color:var(--color-white)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active),.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active),.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active){background-color:var(--color-emerald-green);color:var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button .dnb-icon,.dnb-toggle-button--checked .dnb-toggle-button__button:focus .dnb-icon,.dnb-toggle-button--checked .dnb-toggle-button__button:hover .dnb-icon{color:inherit}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__button{background-color:transparent;border-color:var(--color-mint-green);box-shadow:0 0 0 .0318rem var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__dot,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__dot,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__dot{background-color:var(--color-mint-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button{--border-color:var(--color-emerald-green);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot{background-color:var(--color-emerald-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__button{background-color:var(--color-mint-green);border-color:var(--color-emerald-green);box-shadow:0 0 0 .0318rem var(--color-emerald-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__gfx,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__gfx,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__gfx{color:var(--color-emerald-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__button{background-color:var(--color-emerald-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__gfx,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__gfx,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__gfx{color:var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-radio__button{box-shadow:none}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,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green);outline:none}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,html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{--border-color:var(--color-emerald-green);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button,.dnb-toggle-button__button:not([disabled]):active .dnb-radio__button{background-color:transparent;border-color:var(--color-sea-green);box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot,.dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot{background-color:var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button,.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button{background-color:transparent;border-color:var(--color-sea-green);box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx,.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx{color:var(--color-sea-green)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active){--border-color:var(--color-fire-red);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-fire-red)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__button{--border-color:var(--color-fire-red);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__focus{box-shadow:none}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__dot{background-color:transparent}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input~.dnb-checkbox__button{--border-color:var(--color-fire-red);--border-width:0.09375rem;border:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not(:hover)~.dnb-checkbox__button .dnb-checkbox__focus{box-shadow:none}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active){--border-color:var(--color-fire-red);--border-width:0.0625rem;background-color:var(--color-fire-red);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled])~.dnb-radio__button{--border-color:var(--color-white);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not([disabled]):not(:hover):not(:active)~.dnb-checkbox__button .dnb-checkbox__focus,.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]):not(:hover)~.dnb-radio__dot{background-color:var(--color-white)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover)~.dnb-checkbox__gfx{color:var(--color-fire-red)}.dnb-toggle-button>.dnb-form-status{transform:translateY(.1875rem)}
+.dnb-toggle-button .dnb-checkbox__gfx path{stroke-width:.125rem}.dnb-toggle-button .dnb-radio__input:not([disabled])~.dnb-radio__button{box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled],.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled],.dnb-toggle-button--checked .dnb-toggle-button__button[disabled]{background-color:var(--color-mint-green-25)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active),.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active),.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active){background-color:var(--color-emerald-green);color:var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button .dnb-icon,.dnb-toggle-button--checked .dnb-toggle-button__button:focus .dnb-icon,.dnb-toggle-button--checked .dnb-toggle-button__button:hover .dnb-icon{color:inherit}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__button{background-color:transparent;border-color:var(--color-mint-green);box-shadow:0 0 0 .0318rem var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__dot,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__dot,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__dot{background-color:var(--color-mint-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button{--border-color:var(--color-emerald-green);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot{background-color:var(--color-emerald-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__button{background-color:var(--color-mint-green);border-color:var(--color-emerald-green);box-shadow:0 0 0 .0318rem var(--color-emerald-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__gfx,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__gfx,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__gfx{color:var(--color-emerald-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__button{background-color:var(--color-emerald-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__gfx,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__gfx,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__gfx{color:var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-radio__button{box-shadow:none}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,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green);outline:none}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,html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{--border-color:var(--color-emerald-green);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button,.dnb-toggle-button__button:not([disabled]):active .dnb-radio__button{background-color:transparent;border-color:var(--color-sea-green);box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot,.dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot{background-color:var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button,.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button{background-color:transparent;border-color:var(--color-sea-green);box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx,.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx{color:var(--color-sea-green)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active){--border-color:var(--color-fire-red);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-fire-red)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__button{--border-color:var(--color-fire-red);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__focus{box-shadow:none}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__dot{background-color:transparent}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input~.dnb-checkbox__button{--border-color:var(--color-fire-red);--border-width:0.09375rem;border:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not(:hover)~.dnb-checkbox__button .dnb-checkbox__focus{box-shadow:none}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active){--border-color:var(--color-fire-red);--border-width:0.0625rem;background-color:var(--color-fire-red);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled])~.dnb-radio__button{--border-color:var(--color-white);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not([disabled]):not(:hover):not(:active)~.dnb-checkbox__button .dnb-checkbox__focus,.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]):not(:hover)~.dnb-radio__dot{background-color:var(--color-white)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover)~.dnb-checkbox__gfx{color:var(--color-fire-red)}.dnb-toggle-button>.dnb-form-status{transform:translateY(.1875rem)}

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

@@ -26,8 +26,7 @@
   &--checked &__button:focus,
   &--checked &__button:hover {
     &[disabled] {
-      background-color: var(--color-mint-green);
-      color: var(--color-white);
+      background-color: var(--color-mint-green-25);
     }
 
     &:not([disabled]):not(:active) {

package/components/tooltip/Tooltip.js

@@ -17,7 +17,7 @@ import { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps';
 function Tooltip(localProps) {
   const context = React.useContext(Context);
   const inherited = getPropsFromTooltipProp(localProps);
-  const props = convertSnakeCaseProps(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultProps), localProps), inherited), context.getTranslation(localProps).Tooltip), context.Tooltip));
+  const props = convertSnakeCaseProps(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultProps), localProps), inherited), context.getTranslation(localProps)['Tooltip']), context.Tooltip));
   const {
       targetElement,
       targetSelector,

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,CAAC,SAAS,CAAC,GAC7CC,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/elements/Element.d.ts

@@ -6,12 +6,11 @@ import React from 'react';
 import { SkeletonMethods } from '../components/skeleton/SkeletonHelper';
 import type { SkeletonShow } from '../components/skeleton/Skeleton';
 import type { DynamicElement, SpacingProps } from '../shared/types';
-export type ElementIsType = DynamicElement | React.ReactNode;
 export type ElementInternalProps = {
     /**
      * Defines the Element Type, like "div"
      */
-    as: ElementIsType;
+    as: DynamicElement<unknown>;
 };
 export type ElementProps = {
     skeleton?: SkeletonShow;
@@ -20,7 +19,7 @@ export type ElementProps = {
     innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>;
     children?: React.ReactNode;
 } & SpacingProps;
-export type ElementAllProps = ElementProps & ElementInternalProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
+export type ElementAllProps = ElementProps & ElementInternalProps & Omit<React.HTMLProps<HTMLElement>, 'ref' | 'as'>;
 export declare const defaultProps: {
     skeletonMethod: string;
 };
@@ -33,5 +32,5 @@ declare const Element: React.ForwardRefExoticComponent<{
 } & import("../shared/types").SpacingElementProps & {
     space?: import("../shared/types").SpaceTypeAll;
     innerSpace?: import("../shared/types").SpaceTypeAll | import("../shared/types").SpaceTypeMedia;
-} & ElementInternalProps & Omit<React.HTMLProps<HTMLElement>, "ref"> & React.RefAttributes<unknown>>;
+} & ElementInternalProps & Omit<React.HTMLProps<HTMLElement>, "ref" | "as"> & React.RefAttributes<unknown>>;
 export default Element;

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 ElementInternalProps = {\n  /**\n   * Defines the Element Type, like \"div\"\n   */\n  as: DynamicElement<unknown>\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' | 'as'>\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\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;AA0B9C,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,EAAE;EACd,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"}