@dnb/eufemia 10.6.0 → 10.7.0

package/cjs/components/section/style/themes/dnb-section-theme-sbanken.scss

@@ -0,0 +1,57 @@
+
+
+.dnb-section {
+  &--transparent {
+    &::after {
+      color: transparent;
+    }
+  }
+
+  &--default, &--divider {
+    color: var(--sb-color-text);
+
+    &::after {
+      color: var(--sb-color-violet-light-4);
+    }
+  }
+
+  &--white {
+    color: var(--sb-color-text);
+
+    &::after {
+      color: var(--sb-color-white);
+    }
+  }
+
+  &--error {
+    color: var(--sb-color-text);
+
+    &::after {
+      color: var(--sb-color-magenta-light-2);
+    }
+  }
+
+  &--info {
+    color: var(--sb-color-text);
+
+    &::after {
+      color: var(--sb-color-gray-light-2);
+    }
+  }
+
+  &--warning {
+    color: var(--sb-color-text);
+
+    &::after {
+      color: var(--sb-color-yellow-light-3);
+    }
+  }
+
+  &--success {
+    color: var(--sb-color-text);
+
+    &::after {
+      color: var(--sb-color-green-light-2);
+    }
+  }
+}

package/cjs/components/section/style/themes/dnb-section-theme-ui.css

@@ -19,10 +19,10 @@
 .dnb-section--transparent::after {
   color: transparent;
 }
-.dnb-section--mint-green-12 {
+.dnb-section--mint-green-12, .dnb-section--default {
   color: var(--color-black-80);
 }
-.dnb-section--mint-green-12::after {
+.dnb-section--mint-green-12::after, .dnb-section--default::after {
   color: var(--color-mint-green-12);
 }
 .dnb-section--white {
@@ -43,16 +43,16 @@
 .dnb-section--lavender::after {
   color: var(--color-lavender);
 }
-.dnb-section--sand-yellow {
+.dnb-section--sand-yellow, .dnb-section--warning {
   color: var(--color-black-80);
 }
-.dnb-section--sand-yellow::after {
+.dnb-section--sand-yellow::after, .dnb-section--warning::after {
   color: var(--color-sand-yellow);
 }
-.dnb-section--pistachio {
+.dnb-section--pistachio, .dnb-section--info {
   color: var(--color-black-80);
 }
-.dnb-section--pistachio::after {
+.dnb-section--pistachio::after, .dnb-section--info::after {
   color: var(--color-pistachio);
 }
 .dnb-section--black-3 {
@@ -79,25 +79,31 @@
 .dnb-section--fire-red::after {
   color: var(--color-fire-red);
 }
-.dnb-section--fire-red-8 {
+.dnb-section--fire-red-8, .dnb-section--error {
   color: var(--color-black-80);
 }
-.dnb-section--fire-red-8::after {
+.dnb-section--fire-red-8::after, .dnb-section--error::after {
   color: var(--color-fire-red-8);
 }
-.dnb-section--fire-red .dnb-anchor, .dnb-section--emerald-green .dnb-anchor, .dnb-section--sea-green .dnb-anchor {
+.dnb-section--success {
   color: var(--color-white);
 }
-.dnb-section--fire-red .dnb-anchor:hover, .dnb-section--emerald-green .dnb-anchor:hover, .dnb-section--sea-green .dnb-anchor:hover {
+.dnb-section--success::after {
+  color: var(--color-success-green);
+}
+.dnb-section--fire-red .dnb-anchor, .dnb-section--emerald-green .dnb-anchor, .dnb-section--sea-green .dnb-anchor, .dnb-section--success .dnb-anchor {
+  color: var(--color-white);
+}
+.dnb-section--fire-red .dnb-anchor:hover, .dnb-section--emerald-green .dnb-anchor:hover, .dnb-section--sea-green .dnb-anchor:hover, .dnb-section--success .dnb-anchor:hover {
   color: var(--color-emerald-green);
   box-shadow: inset 100vw 100vw 0 0 var(--color-white), -0.125em 0 0 0 var(--color-white), 0.125em 0 0 0 var(--color-white);
 }
-.dnb-section--fire-red .dnb-anchor:active, .dnb-section--emerald-green .dnb-anchor:active, .dnb-section--sea-green .dnb-anchor:active {
+.dnb-section--fire-red .dnb-anchor:active, .dnb-section--emerald-green .dnb-anchor:active, .dnb-section--sea-green .dnb-anchor:active, .dnb-section--success .dnb-anchor:active {
   color: var(--color-white);
   background-color: transparent;
   box-shadow: inset 100vw 100vw 0 0 transparent, -0.125em 0 0 0 transparent, 0.125em 0 0 0 transparent;
 }
-.dnb-section--fire-red .dnb-anchor.focus-visible, .dnb-section--emerald-green .dnb-anchor.focus-visible, .dnb-section--sea-green .dnb-anchor.focus-visible {
+.dnb-section--fire-red .dnb-anchor.focus-visible, .dnb-section--emerald-green .dnb-anchor.focus-visible, .dnb-section--sea-green .dnb-anchor.focus-visible, .dnb-section--success .dnb-anchor.focus-visible {
   color: var(--color-white);
   background-color: transparent;
   outline: none;
@@ -106,7 +112,7 @@
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-.dnb-section--fire-red .dnb-anchor:focus-visible, .dnb-section--emerald-green .dnb-anchor:focus-visible, .dnb-section--sea-green .dnb-anchor:focus-visible {
+.dnb-section--fire-red .dnb-anchor:focus-visible, .dnb-section--emerald-green .dnb-anchor:focus-visible, .dnb-section--sea-green .dnb-anchor:focus-visible, .dnb-section--success .dnb-anchor:focus-visible {
   color: var(--color-white);
   background-color: transparent;
   outline: none;

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

@@ -1 +1 @@
-.dnb-section--divider{color:var(--color-black-80)}.dnb-section--divider:after{box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor,0 .0625rem 0 0 var(--color-mint-green-50),99vw .0625rem 0 0 var(--color-mint-green-50),0 -.0625rem 0 0 var(--color-mint-green-50),99vw -.0625rem 0 0 var(--color-mint-green-50),198vw .0625rem 0 0 var(--color-mint-green-50),198vw -.0625rem 0 0 var(--color-mint-green-50);color:var(--color-white)}.dnb-section--transparent:after{color:transparent}.dnb-section--mint-green-12{color:var(--color-black-80)}.dnb-section--mint-green-12:after{color:var(--color-mint-green-12)}.dnb-section--white{color:var(--color-black-80)}.dnb-section--white:after{color:var(--color-white)}.dnb-section--mint-green{color:var(--color-black-80)}.dnb-section--mint-green:after{color:var(--color-mint-green)}.dnb-section--lavender{color:var(--color-black-80)}.dnb-section--lavender:after{color:var(--color-lavender)}.dnb-section--sand-yellow{color:var(--color-black-80)}.dnb-section--sand-yellow:after{color:var(--color-sand-yellow)}.dnb-section--pistachio{color:var(--color-black-80)}.dnb-section--pistachio:after{color:var(--color-pistachio)}.dnb-section--black-3{color:var(--color-black-80)}.dnb-section--black-3:after{color:var(--color-black-3)}.dnb-section--emerald-green{color:var(--color-mint-green)}.dnb-section--emerald-green:after{color:var(--color-emerald-green)}.dnb-section--sea-green{color:var(--color-white)}.dnb-section--sea-green:after{color:var(--color-sea-green)}.dnb-section--fire-red{color:var(--color-white)}.dnb-section--fire-red:after{color:var(--color-fire-red)}.dnb-section--fire-red-8{color:var(--color-black-80)}.dnb-section--fire-red-8:after{color:var(--color-fire-red-8)}.dnb-section--emerald-green .dnb-anchor,.dnb-section--fire-red .dnb-anchor,.dnb-section--sea-green .dnb-anchor{color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor:hover,.dnb-section--fire-red .dnb-anchor:hover,.dnb-section--sea-green .dnb-anchor:hover{box-shadow:inset 100vw 100vw 0 0 var(--color-white),-.125em 0 0 0 var(--color-white),.125em 0 0 0 var(--color-white);color:var(--color-emerald-green)}.dnb-section--emerald-green .dnb-anchor:active,.dnb-section--fire-red .dnb-anchor:active,.dnb-section--sea-green .dnb-anchor:active{background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,-.125em 0 0 0 transparent,.125em 0 0 0 transparent;color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor.focus-visible,.dnb-section--fire-red .dnb-anchor.focus-visible,.dnb-section--sea-green .dnb-anchor.focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-section--emerald-green .dnb-anchor:focus-visible,.dnb-section--fire-red .dnb-anchor:focus-visible,.dnb-section--sea-green .dnb-anchor:focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-section--emerald-green .dnb-button--tertiary,.dnb-section--emerald-green .dnb-button--tertiary:hover,.dnb-section--fire-red .dnb-button--tertiary,.dnb-section--fire-red .dnb-button--tertiary:hover,.dnb-section--sea-green .dnb-button--tertiary,.dnb-section--sea-green .dnb-button--tertiary:hover{color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--fire-red .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--sea-green .dnb-button--tertiary:hover .dnb-button__text:after{color:var(--color-white)!important}.dnb-section--emerald-green .dnb-button--tertiary:focus,.dnb-section--fire-red .dnb-button--tertiary:focus,.dnb-section--sea-green .dnb-button--tertiary:focus{color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:focus:before,.dnb-section--fire-red .dnb-button--tertiary:focus:before,.dnb-section--sea-green .dnb-button--tertiary:focus:before{outline:none}html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-button--tertiary:focus:before{--border-color:var(--color-white);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-section--fire-red ::selection,.dnb-section--mint-green ::selection{background-color:var(--color-white)}
+.dnb-section--divider{color:var(--color-black-80)}.dnb-section--divider:after{box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor,0 .0625rem 0 0 var(--color-mint-green-50),99vw .0625rem 0 0 var(--color-mint-green-50),0 -.0625rem 0 0 var(--color-mint-green-50),99vw -.0625rem 0 0 var(--color-mint-green-50),198vw .0625rem 0 0 var(--color-mint-green-50),198vw -.0625rem 0 0 var(--color-mint-green-50);color:var(--color-white)}.dnb-section--transparent:after{color:transparent}.dnb-section--default,.dnb-section--mint-green-12{color:var(--color-black-80)}.dnb-section--default:after,.dnb-section--mint-green-12:after{color:var(--color-mint-green-12)}.dnb-section--white{color:var(--color-black-80)}.dnb-section--white:after{color:var(--color-white)}.dnb-section--mint-green{color:var(--color-black-80)}.dnb-section--mint-green:after{color:var(--color-mint-green)}.dnb-section--lavender{color:var(--color-black-80)}.dnb-section--lavender:after{color:var(--color-lavender)}.dnb-section--sand-yellow,.dnb-section--warning{color:var(--color-black-80)}.dnb-section--sand-yellow:after,.dnb-section--warning:after{color:var(--color-sand-yellow)}.dnb-section--info,.dnb-section--pistachio{color:var(--color-black-80)}.dnb-section--info:after,.dnb-section--pistachio:after{color:var(--color-pistachio)}.dnb-section--black-3{color:var(--color-black-80)}.dnb-section--black-3:after{color:var(--color-black-3)}.dnb-section--emerald-green{color:var(--color-mint-green)}.dnb-section--emerald-green:after{color:var(--color-emerald-green)}.dnb-section--sea-green{color:var(--color-white)}.dnb-section--sea-green:after{color:var(--color-sea-green)}.dnb-section--fire-red{color:var(--color-white)}.dnb-section--fire-red:after{color:var(--color-fire-red)}.dnb-section--error,.dnb-section--fire-red-8{color:var(--color-black-80)}.dnb-section--error:after,.dnb-section--fire-red-8:after{color:var(--color-fire-red-8)}.dnb-section--success{color:var(--color-white)}.dnb-section--success:after{color:var(--color-success-green)}.dnb-section--emerald-green .dnb-anchor,.dnb-section--fire-red .dnb-anchor,.dnb-section--sea-green .dnb-anchor,.dnb-section--success .dnb-anchor{color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor:hover,.dnb-section--fire-red .dnb-anchor:hover,.dnb-section--sea-green .dnb-anchor:hover,.dnb-section--success .dnb-anchor:hover{box-shadow:inset 100vw 100vw 0 0 var(--color-white),-.125em 0 0 0 var(--color-white),.125em 0 0 0 var(--color-white);color:var(--color-emerald-green)}.dnb-section--emerald-green .dnb-anchor:active,.dnb-section--fire-red .dnb-anchor:active,.dnb-section--sea-green .dnb-anchor:active,.dnb-section--success .dnb-anchor:active{background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,-.125em 0 0 0 transparent,.125em 0 0 0 transparent;color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor.focus-visible,.dnb-section--fire-red .dnb-anchor.focus-visible,.dnb-section--sea-green .dnb-anchor.focus-visible,.dnb-section--success .dnb-anchor.focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-section--emerald-green .dnb-anchor:focus-visible,.dnb-section--fire-red .dnb-anchor:focus-visible,.dnb-section--sea-green .dnb-anchor:focus-visible,.dnb-section--success .dnb-anchor:focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-section--emerald-green .dnb-button--tertiary,.dnb-section--emerald-green .dnb-button--tertiary:hover,.dnb-section--fire-red .dnb-button--tertiary,.dnb-section--fire-red .dnb-button--tertiary:hover,.dnb-section--sea-green .dnb-button--tertiary,.dnb-section--sea-green .dnb-button--tertiary:hover{color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--fire-red .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--sea-green .dnb-button--tertiary:hover .dnb-button__text:after{color:var(--color-white)!important}.dnb-section--emerald-green .dnb-button--tertiary:focus,.dnb-section--fire-red .dnb-button--tertiary:focus,.dnb-section--sea-green .dnb-button--tertiary:focus{color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:focus:before,.dnb-section--fire-red .dnb-button--tertiary:focus:before,.dnb-section--sea-green .dnb-button--tertiary:focus:before{outline:none}html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-button--tertiary:focus:before{--border-color:var(--color-white);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-section--fire-red ::selection,.dnb-section--mint-green ::selection{background-color:var(--color-white)}

package/cjs/components/section/style/themes/dnb-section-theme-ui.scss

@@ -28,7 +28,7 @@
     }
   }
 
-  &--mint-green-12 {
+  &--mint-green-12, &--default {
     color: var(--color-black-80);
 
     &::after {
@@ -60,7 +60,7 @@
     }
   }
 
-  &--sand-yellow {
+  &--sand-yellow, &--warning {
     color: var(--color-black-80);
 
     &::after {
@@ -68,7 +68,7 @@
     }
   }
 
-  &--pistachio {
+  &--pistachio, &--info {
     color: var(--color-black-80);
 
     &::after {
@@ -108,7 +108,7 @@
     }
   }
 
-  &--fire-red-8 {
+  &--fire-red-8, &--error {
     color: var(--color-black-80);
 
     &::after {
@@ -116,10 +116,19 @@
     }
   }
 
+  &--success {
+    color: var(--color-white);
+
+    &::after {
+      color: var(--color-success-green);
+    }
+  }
+
   // Contrast styles
   &--fire-red .dnb-anchor,
   &--emerald-green .dnb-anchor,
-  &--sea-green .dnb-anchor {
+  &--sea-green .dnb-anchor,
+  &--success .dnb-anchor {
     @include useAnchorContrastStyle();
   }
 

package/cjs/components/table/style/themes/dnb-table-theme-sbanken.css

@@ -5,6 +5,10 @@
 /*
  * Utilities
  */
+/*
+* Button mixins
+*
+*/
 /*
  * Utilities
  */
@@ -50,19 +54,64 @@ html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortab
   color: var(--sb-color-violet);
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
-  top: -0.1875rem;
-  bottom: -0.0625rem;
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: -0.5rem;
+  bottom: 0;
+  right: -0.5rem;
+  height: inherit;
+  border-radius: inherit;
+  outline: none;
+}
+html[data-whatinput=mouse] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 0;
   left: -0.5rem;
-  right: -0.25rem;
+  bottom: 0;
+  right: -0.5rem;
+  height: inherit;
+  border-radius: inherit;
+  outline: none;
+}
+html[data-whatinput=touch] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+  top: -0.375rem;
+  bottom: -0.25rem;
+  left: -0.6875rem;
+  right: -0.4375rem;
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled] {
   cursor: not-allowed;
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before {
-  top: -0.1875rem;
-  bottom: -0.0625rem;
-  left: -0.5rem;
-  right: -0.25rem;
+  top: -0.375rem;
+  bottom: -0.25rem;
+  left: -0.6875rem;
+  right: -0.4375rem;
+}
+.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible {
+  color: var(--sb-color-blue-dark);
+}
+.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible {
+  color: var(--sb-color-blue-dark);
+}
+.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after {
+  visibility: hidden;
 }
 html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled] {
   cursor: not-allowed;

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

@@ -1 +1 @@
-.dnb-table{text-align:left}.dnb-table thead{border-bottom:var(--border)}.dnb-table thead th,.dnb-table__th{background-color:var(--sb-color-white);padding:.5rem 1.5rem .25rem}.dnb-table .dnb-table__tr--even{background-color:var(--sb-color-gray-light-3)}.dnb-table tbody .dnb-table__th,.dnb-table tbody td,.dnb-table tbody th,.dnb-table__td{padding:1rem 1.5rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button{color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after{bottom:-.0625rem;color:var(--sb-color-violet);left:0;opacity:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after{color:var(--sb-color-violet)}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]){color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]){color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{bottom:-.0625rem;left:-.5rem;right:-.25rem;top:-.1875rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before{bottom:-.0625rem;left:-.5rem;right:-.25rem;top:-.1875rem}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after{color:var(--sb-color-violet)}.dnb-table,.dnb-table__container{--border-width:0.0625rem;--outline-width:0.0625rem;--border:var(--border-width) solid var(--sb-color-gray-light-2);--outline:var(--outline-width) solid var(--sb-color-gray-light-2);background-color:var(--sb-color-white)}
+.dnb-table{text-align:left}.dnb-table thead{border-bottom:var(--border)}.dnb-table thead th,.dnb-table__th{background-color:var(--sb-color-white);padding:.5rem 1.5rem .25rem}.dnb-table .dnb-table__tr--even{background-color:var(--sb-color-gray-light-3)}.dnb-table tbody .dnb-table__th,.dnb-table tbody td,.dnb-table tbody th,.dnb-table__td{padding:1rem 1.5rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button{color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after{bottom:-.0625rem;color:var(--sb-color-violet);left:0;opacity:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after{color:var(--sb-color-violet)}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]){color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]){color:var(--sb-color-violet)}html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--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-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--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-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{bottom:-.25rem;left:-.6875rem;right:-.4375rem;top:-.375rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before{bottom:-.25rem;left:-.6875rem;right:-.4375rem;top:-.375rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible{color:var(--sb-color-blue-dark)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible{color:var(--sb-color-blue-dark)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after{color:var(--sb-color-violet)}.dnb-table,.dnb-table__container{--border-width:0.0625rem;--outline-width:0.0625rem;--border:var(--border-width) solid var(--sb-color-gray-light-2);--outline:var(--outline-width) solid var(--sb-color-gray-light-2);background-color:var(--sb-color-white)}

package/cjs/components/table/style/themes/dnb-table-theme-sbanken.scss

@@ -4,14 +4,15 @@
 */
 
 @import '../../../../style/core/utilities.scss';
+@import '../../../button/style/themes/button-mixins.scss';
 @import '../table-mixins.scss';
 
 @mixin tableFocusRing() {
   &::before {
-    top: -0.1875rem;
-    bottom: -0.0625rem;
-    left: -0.5rem;
-    right: -0.25rem;
+    top: -0.375rem;
+    bottom: -0.25rem;
+    left: -0.6875rem;
+    right: -0.4375rem;
   }
 }
 
@@ -60,10 +61,25 @@
       }
       @include active() {
         color: var(--sb-color-violet);
+        @include buttonFocusRing(
+          'mouse',
+          inset
+        ); // also, make a mouse ring
+        @include buttonFocusRing(
+          'touch',
+          inset
+        ); // also, make a touch ring
         @include tableFocusRing();
       }
       @include focus() {
         @include tableFocusRing();
+        &:focus-visible {
+          color: var(--sb-color-blue-dark);
+        }
+
+        &:not(:active) .dnb-button__text::after {
+          visibility: hidden;
+        }
       }
     }
   }
@@ -92,4 +108,4 @@
   --outline: var(--outline-width) solid var(--sb-color-gray-light-2);
 
   background-color: var(--sb-color-white);
-}
+}

package/cjs/extensions/forms/DataContext/Provider.js

@@ -29,14 +29,14 @@ function Provider(_ref) {
     children
   } = _ref;
   const ajvSchemaValidator = (0, _react.useMemo)(() => schema ? _ajv.default.compile(schema) : undefined, [schema]);
-  const internalData = (0, _react.useRef)(externalData);
+  const [internalData, setInternalData] = (0, _react.useState)(externalData);
   const mountedFieldPathsRef = (0, _react.useRef)([]);
   const errorsRef = (0, _react.useRef)({});
   const [showAllErrors, setShowAllErrors] = (0, _react.useState)(false);
   const pathsWithErrorRef = (0, _react.useRef)([]);
   const hasErrors = (0, _react.useCallback)(() => Boolean(mountedFieldPathsRef.current.find(mountedFieldPath => errorsRef.current[mountedFieldPath] !== undefined || pathsWithErrorRef.current.includes(mountedFieldPath))), []);
   (0, _react.useEffect)(() => {
-    internalData.current = externalData;
+    setInternalData(externalData);
   }, [externalData]);
   const validateBySchema = (0, _react.useCallback)(data => {
     if (!ajvSchemaValidator) {
@@ -57,15 +57,15 @@ function Provider(_ref) {
   }, []);
   const handlePathChange = (0, _react.useCallback)((path, value) => {
     onPathChange === null || onPathChange === void 0 ? void 0 : onPathChange(path, value);
-    const newData = structuredClone(internalData.current);
+    const newData = structuredClone(internalData);
     if (path) {
       _jsonPointer.default.set(newData, path, value);
     }
     onChange === null || onChange === void 0 ? void 0 : onChange(newData);
     validateBySchemaAndUpdateState(newData);
-    internalData.current = newData;
+    setInternalData(newData);
     setShowAllErrors(false);
-  }, [onChange, onPathChange, validateBySchemaAndUpdateState]);
+  }, [internalData, onChange, onPathChange, validateBySchemaAndUpdateState]);
   const handleMountField = (0, _react.useCallback)(path => {
     mountedFieldPathsRef.current = addListPath(mountedFieldPathsRef.current, path);
   }, []);
@@ -74,7 +74,7 @@ function Provider(_ref) {
   }, []);
   const handleSubmit = (0, _react.useCallback)(() => {
     if (!hasErrors()) {
-      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(internalData.current);
+      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(internalData);
       if (scrollTopOnSubmit) {
         var _window;
         window && ((_window = window) === null || _window === void 0 ? void 0 : _window.scrollTo({
@@ -86,8 +86,8 @@ function Provider(_ref) {
       setShowAllErrors(true);
       onSubmitRequest === null || onSubmitRequest === void 0 ? void 0 : onSubmitRequest();
     }
-    return internalData.current;
-  }, [scrollTopOnSubmit, hasErrors, onSubmit, onSubmitRequest]);
+    return internalData;
+  }, [internalData, scrollTopOnSubmit, hasErrors, onSubmit, onSubmitRequest]);
   (0, _react.useEffect)(() => {
     if (externalData) {
       validateBySchemaAndUpdateState(externalData);
@@ -95,7 +95,7 @@ function Provider(_ref) {
   }, []);
   return _react.default.createElement(_Context.default.Provider, {
     value: {
-      data: internalData.current,
+      data: internalData,
       handlePathChange,
       handleSubmit,
       errors: errorsRef.current,

package/cjs/extensions/forms/DataContext/Provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.js","names":["_react","_interopRequireWildcard","require","_jsonPointer","_interopRequireDefault","_ajv","_Context","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","addListPath","paths","path","includes","concat","removeListPath","filter","thisPath","Provider","_ref","data","externalData","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","children","ajvSchemaValidator","useMemo","ajv","compile","undefined","internalData","useRef","mountedFieldPathsRef","errorsRef","showAllErrors","setShowAllErrors","useState","pathsWithErrorRef","hasErrors","useCallback","Boolean","current","find","mountedFieldPath","useEffect","validateBySchema","errors","ajvErrorsToFormErrors","validateBySchemaAndUpdateState","setPathWithError","hasError","handlePathChange","value","newData","structuredClone","pointer","handleMountField","handleUnMountField","handleSubmit","_window","window","scrollTo","top","behavior","createElement","mountedFieldPaths"],"sources":["../../../../../src/extensions/forms/DataContext/Provider.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useRef,\n  useMemo,\n  useCallback,\n  useState,\n} from 'react'\nimport pointer, { JsonObject } from 'json-pointer'\nimport { JSONSchema7 } from 'json-schema'\nimport ajv, { ajvErrorsToFormErrors } from '../utils/ajv'\nimport { FormError } from '../types'\nimport Context from './Context'\n\nexport interface Props<Data extends JsonObject> {\n  data: Partial<Data>\n  /** JSON Schema for validating the data, like during input or after attempting submit */\n  schema?: JSONSchema7\n  /** Change handler for the whole data set */\n  onChange?: (data: Data) => void\n  /** Change handler for each value  */\n  onPathChange?: (path: string, value: any) => void\n  /** Submit called, data was valid (if validation available) */\n  onSubmit?: (data: Data) => void\n  /** Submit was requested, but data was invalid */\n  onSubmitRequest?: () => void\n  scrollTopOnSubmit?: boolean\n  children: React.ReactNode\n}\n\ntype PathList = string[]\n\nfunction addListPath(paths: PathList, path: string): PathList {\n  return paths.includes(path) ? paths : paths.concat(path)\n}\n\nfunction removeListPath(paths: PathList, path: string): PathList {\n  return paths.filter((thisPath) => thisPath !== path)\n}\n\nexport default function Provider<Data extends JsonObject>({\n  data: externalData,\n  schema,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  children,\n}: Props<Data>) {\n  const ajvSchemaValidator = useMemo(\n    () => (schema ? ajv.compile(schema) : undefined),\n    [schema]\n  )\n  const internalData = useRef<Partial<Data>>(externalData)\n  const mountedFieldPathsRef = useRef<string[]>([])\n\n  // Errors from provider validation (the whole data set)\n  const errorsRef = useRef<Record<string, FormError>>({})\n  const [showAllErrors, setShowAllErrors] = useState<boolean>(false)\n  // Errors reported by fields, based on their direct validation rules\n  const pathsWithErrorRef = useRef<string[]>([])\n\n  const hasErrors = useCallback(\n    () =>\n      Boolean(\n        mountedFieldPathsRef.current.find(\n          (mountedFieldPath) =>\n            errorsRef.current[mountedFieldPath] !== undefined ||\n            pathsWithErrorRef.current.includes(mountedFieldPath)\n        )\n      ),\n    []\n  )\n\n  useEffect(() => {\n    // When receivint the initial data, or receiving updated data by props, update the internal data (controlled state)\n    internalData.current = externalData\n  }, [externalData])\n\n  const validateBySchema = useCallback(\n    (data: Partial<Data>): Record<string, Error> | undefined => {\n      if (!ajvSchemaValidator) {\n        // No schema-based validator. Assume data is valid.\n        return\n      }\n\n      if (!ajvSchemaValidator(data)) {\n        // Errors found\n        const errors = ajvErrorsToFormErrors(ajvSchemaValidator.errors)\n        return errors\n      } else {\n        return\n      }\n    },\n    [ajvSchemaValidator]\n  )\n\n  const validateBySchemaAndUpdateState = useCallback(\n    (data: Partial<Data>) => {\n      errorsRef.current = validateBySchema(data) ?? {}\n    },\n    [validateBySchema]\n  )\n\n  const setPathWithError = useCallback(\n    (path: string, hasError: boolean) => {\n      pathsWithErrorRef.current = hasError\n        ? addListPath(pathsWithErrorRef.current, path)\n        : removeListPath(pathsWithErrorRef.current, path)\n    },\n    []\n  )\n\n  const handlePathChange = useCallback(\n    (path, value) => {\n      onPathChange?.(path, value)\n      // Update the data even if it contains errors. Submit/SubmitRequest will be called accordingly\n      const newData = structuredClone(internalData.current) as Data\n      if (path) {\n        pointer.set(newData, path, value)\n      }\n      onChange?.(newData)\n\n      validateBySchemaAndUpdateState(newData)\n\n      internalData.current = newData\n\n      setShowAllErrors(false)\n    },\n    [onChange, onPathChange, validateBySchemaAndUpdateState]\n  )\n\n  // Mounted fields\n  const handleMountField = useCallback((path: string) => {\n    mountedFieldPathsRef.current = addListPath(\n      mountedFieldPathsRef.current,\n      path\n    )\n  }, [])\n\n  const handleUnMountField = useCallback((path: string) => {\n    mountedFieldPathsRef.current = removeListPath(\n      mountedFieldPathsRef.current,\n      path\n    )\n  }, [])\n\n  /**\n   * Request to submit the whole form\n   */\n  const handleSubmit = useCallback(() => {\n    if (!hasErrors()) {\n      onSubmit?.(internalData.current as Data)\n      if (scrollTopOnSubmit) {\n        window && window?.scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    } else {\n      setShowAllErrors(true)\n      onSubmitRequest?.()\n    }\n    return internalData.current\n  }, [scrollTopOnSubmit, hasErrors, onSubmit, onSubmitRequest])\n\n  useEffect(() => {\n    // Mount procedure\n    if (externalData) {\n      // Validate the initial data to know if the user can submit, and to show errors if inputs are requested to with props\n      validateBySchemaAndUpdateState(externalData)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only run for mount and unmount\n  }, [])\n\n  return (\n    <Context.Provider\n      value={{\n        data: internalData.current,\n        handlePathChange,\n        handleSubmit,\n        errors: errorsRef.current,\n        showAllErrors,\n        setShowAllErrors,\n        mountedFieldPaths: mountedFieldPathsRef.current,\n        handleMountField,\n        handleUnMountField,\n        hasErrors,\n        setPathWithError,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Provider.js","names":["_react","_interopRequireWildcard","require","_jsonPointer","_interopRequireDefault","_ajv","_Context","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","addListPath","paths","path","includes","concat","removeListPath","filter","thisPath","Provider","_ref","data","externalData","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","children","ajvSchemaValidator","useMemo","ajv","compile","undefined","internalData","setInternalData","useState","mountedFieldPathsRef","useRef","errorsRef","showAllErrors","setShowAllErrors","pathsWithErrorRef","hasErrors","useCallback","Boolean","current","find","mountedFieldPath","useEffect","validateBySchema","errors","ajvErrorsToFormErrors","validateBySchemaAndUpdateState","setPathWithError","hasError","handlePathChange","value","newData","structuredClone","pointer","handleMountField","handleUnMountField","handleSubmit","_window","window","scrollTo","top","behavior","createElement","mountedFieldPaths"],"sources":["../../../../../src/extensions/forms/DataContext/Provider.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useRef,\n  useMemo,\n  useCallback,\n  useState,\n} from 'react'\nimport pointer, { JsonObject } from 'json-pointer'\nimport { JSONSchema7 } from 'json-schema'\nimport ajv, { ajvErrorsToFormErrors } from '../utils/ajv'\nimport { FormError } from '../types'\nimport Context from './Context'\n\nexport interface Props<Data extends JsonObject> {\n  data: Partial<Data>\n  /** JSON Schema for validating the data, like during input or after attempting submit */\n  schema?: JSONSchema7\n  /** Change handler for the whole data set */\n  onChange?: (data: Data) => void\n  /** Change handler for each value  */\n  onPathChange?: (path: string, value: any) => void\n  /** Submit called, data was valid (if validation available) */\n  onSubmit?: (data: Data) => void\n  /** Submit was requested, but data was invalid */\n  onSubmitRequest?: () => void\n  scrollTopOnSubmit?: boolean\n  children: React.ReactNode\n}\n\ntype PathList = string[]\n\nfunction addListPath(paths: PathList, path: string): PathList {\n  return paths.includes(path) ? paths : paths.concat(path)\n}\n\nfunction removeListPath(paths: PathList, path: string): PathList {\n  return paths.filter((thisPath) => thisPath !== path)\n}\n\nexport default function Provider<Data extends JsonObject>({\n  data: externalData,\n  schema,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  children,\n}: Props<Data>) {\n  const ajvSchemaValidator = useMemo(\n    () => (schema ? ajv.compile(schema) : undefined),\n    [schema]\n  )\n  const [internalData, setInternalData] =\n    useState<Partial<Data>>(externalData)\n  const mountedFieldPathsRef = useRef<string[]>([])\n\n  // Errors from provider validation (the whole data set)\n  const errorsRef = useRef<Record<string, FormError>>({})\n  const [showAllErrors, setShowAllErrors] = useState<boolean>(false)\n  // Errors reported by fields, based on their direct validation rules\n  const pathsWithErrorRef = useRef<string[]>([])\n\n  const hasErrors = useCallback(\n    () =>\n      Boolean(\n        mountedFieldPathsRef.current.find(\n          (mountedFieldPath) =>\n            errorsRef.current[mountedFieldPath] !== undefined ||\n            pathsWithErrorRef.current.includes(mountedFieldPath)\n        )\n      ),\n    []\n  )\n\n  useEffect(() => {\n    // When receivint the initial data, or receiving updated data by props, update the internal data (controlled state)\n    setInternalData(externalData)\n  }, [externalData])\n\n  const validateBySchema = useCallback(\n    (data: Partial<Data>): Record<string, Error> | undefined => {\n      if (!ajvSchemaValidator) {\n        // No schema-based validator. Assume data is valid.\n        return\n      }\n\n      if (!ajvSchemaValidator(data)) {\n        // Errors found\n        const errors = ajvErrorsToFormErrors(ajvSchemaValidator.errors)\n        return errors\n      } else {\n        return\n      }\n    },\n    [ajvSchemaValidator]\n  )\n\n  const validateBySchemaAndUpdateState = useCallback(\n    (data: Partial<Data>) => {\n      errorsRef.current = validateBySchema(data) ?? {}\n    },\n    [validateBySchema]\n  )\n\n  const setPathWithError = useCallback(\n    (path: string, hasError: boolean) => {\n      pathsWithErrorRef.current = hasError\n        ? addListPath(pathsWithErrorRef.current, path)\n        : removeListPath(pathsWithErrorRef.current, path)\n    },\n    []\n  )\n\n  const handlePathChange = useCallback(\n    (path, value) => {\n      onPathChange?.(path, value)\n      // Update the data even if it contains errors. Submit/SubmitRequest will be called accordingly\n      const newData = structuredClone(internalData) as Data\n      if (path) {\n        pointer.set(newData, path, value)\n      }\n      onChange?.(newData)\n\n      validateBySchemaAndUpdateState(newData)\n\n      setInternalData(newData)\n\n      setShowAllErrors(false)\n    },\n    [internalData, onChange, onPathChange, validateBySchemaAndUpdateState]\n  )\n\n  // Mounted fields\n  const handleMountField = useCallback((path: string) => {\n    mountedFieldPathsRef.current = addListPath(\n      mountedFieldPathsRef.current,\n      path\n    )\n  }, [])\n\n  const handleUnMountField = useCallback((path: string) => {\n    mountedFieldPathsRef.current = removeListPath(\n      mountedFieldPathsRef.current,\n      path\n    )\n  }, [])\n\n  /**\n   * Request to submit the whole form\n   */\n  const handleSubmit = useCallback(() => {\n    if (!hasErrors()) {\n      onSubmit?.(internalData as Data)\n      if (scrollTopOnSubmit) {\n        window && window?.scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    } else {\n      setShowAllErrors(true)\n      onSubmitRequest?.()\n    }\n    return internalData\n  }, [\n    internalData,\n    scrollTopOnSubmit,\n    hasErrors,\n    onSubmit,\n    onSubmitRequest,\n  ])\n\n  useEffect(() => {\n    // Mount procedure\n    if (externalData) {\n      // Validate the initial data to know if the user can submit, and to show errors if inputs are requested to with props\n      validateBySchemaAndUpdateState(externalData)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only run for mount and unmount\n  }, [])\n\n  return (\n    <Context.Provider\n      value={{\n        data: internalData,\n        handlePathChange,\n        handleSubmit,\n        errors: errorsRef.current,\n        showAllErrors,\n        setShowAllErrors,\n        mountedFieldPaths: mountedFieldPathsRef.current,\n        handleMountField,\n        handleUnMountField,\n        hasErrors,\n        setPathWithError,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n"],"mappings":"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"}

package/cjs/extensions/forms/Field/Number.js

@@ -82,10 +82,11 @@ function NumberComponent(props) {
     labelSecondary: labelSecondary,
     info: info,
     warning: warning,
-    error: error
+    error: error,
+    contentsWidth: width !== false ? width : undefined
   }, (0, _utils.forwardSpaceProps)(props)), _react.default.createElement(_components.InputMasked, {
     id: id,
-    className: (0, _classnames.default)('dnb-forms-field-number__input', inputClassName, width !== false && width !== 'stretch' && `dnb-forms-field-number__input--width-${width}`),
+    className: (0, _classnames.default)('dnb-forms-field-number__input', inputClassName),
     placeholder: placeholder,
     value: value,
     as_number: true,
@@ -102,7 +103,7 @@ function NumberComponent(props) {
     on_blur: onBlur,
     on_change: onChange,
     disabled: disabled,
-    stretch: width === 'stretch'
+    stretch: width !== undefined
   }));
 }
 NumberComponent._supportsEufemiaSpacingProps = true;

package/cjs/extensions/forms/Field/Number.js.map

@@ -1 +1 @@
-{"version":3,"file":"Number.js","names":["_react","_interopRequireDefault","require","_components","_classnames","_utils","_FieldBlock","_hooks","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","NumberComponent","props","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","rightAligned","preparedProps","schema","type","minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","toInput","external","fromInput","_ref","numberValue","emptyValue","width","id","className","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","onFocus","onBlur","onChange","useField","createElement","classnames","forId","forwardSpaceProps","InputMasked","as_number","number_mask","includeThousandsSeparator","thousandsSeparatorSymbol","right","on_focus","on_blur","on_change","stretch","_supportsEufemiaSpacingProps","_default","exports"],"sources":["../../../../../src/extensions/forms/Field/Number.tsx"],"sourcesContent":["import React from 'react'\nimport { InputMasked } from '../../../components'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = ComponentProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    // Formatting\n    thousandSeparator?: string | true\n    decimalSymbol?: string\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    width?: false | 'medium' | 'large' | 'stretch'\n    rightAligned?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const {\n    thousandSeparator,\n    decimalSymbol = ',',\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    rightAligned,\n  } = props\n\n  const preparedProps: Props = {\n    ...props,\n    schema: props.schema ?? {\n      type: 'number',\n      minimum: props.minimum,\n      maximum: props.maximum,\n      exclusiveMinimum: props.exclusiveMinimum,\n      exclusiveMaximum: props.exclusiveMaximum,\n      multipleOf: props.multipleOf,\n    },\n    toInput: (external: number | undefined) => {\n      if (external === undefined) {\n        return ''\n      }\n      return external\n    },\n    fromInput: ({\n      value,\n      numberValue,\n    }: {\n      value: string\n      numberValue: number\n    }) => {\n      if (value === '') {\n        return emptyValue\n      }\n      return numberValue\n    },\n    width: props.width ?? 'medium',\n  }\n\n  const {\n    id,\n    className,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    disabled,\n    info,\n    warning,\n    error,\n    emptyValue,\n    width,\n    onFocus,\n    onBlur,\n    onChange,\n  } = useField(preparedProps)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-number', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary}\n      info={info}\n      warning={warning}\n      error={error}\n      {...forwardSpaceProps(props)}\n    >\n      <InputMasked\n        id={id}\n        className={classnames(\n          'dnb-forms-field-number__input',\n          width !== false &&\n            width !== 'stretch' &&\n            `dnb-forms-field-number__input--width-${width}`,\n          inputClassName\n        )}\n        placeholder={placeholder}\n        value={value}\n        as_number\n        number_mask={{\n          decimalLimit,\n          decimalSymbol,\n          includeThousandsSeparator: thousandSeparator !== undefined,\n          thousandsSeparatorSymbol:\n            thousandSeparator === true ? ' ' : thousandSeparator,\n          prefix,\n          suffix,\n        }}\n        right={rightAligned}\n        on_focus={onFocus}\n        on_blur={onBlur}\n        on_change={onChange}\n        disabled={disabled}\n        stretch={width === 'stretch'}\n      />\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsEufemiaSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}
+{"version":3,"file":"Number.js","names":["_react","_interopRequireDefault","require","_components","_classnames","_utils","_FieldBlock","_hooks","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","NumberComponent","props","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","rightAligned","preparedProps","schema","type","minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","toInput","external","fromInput","_ref","numberValue","emptyValue","width","id","className","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","onFocus","onBlur","onChange","useField","createElement","classnames","forId","contentsWidth","forwardSpaceProps","InputMasked","as_number","number_mask","includeThousandsSeparator","thousandsSeparatorSymbol","right","on_focus","on_blur","on_change","stretch","_supportsEufemiaSpacingProps","_default","exports"],"sources":["../../../../../src/extensions/forms/Field/Number.tsx"],"sourcesContent":["import React from 'react'\nimport { InputMasked } from '../../../components'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = ComponentProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    // Formatting\n    thousandSeparator?: string | true\n    decimalSymbol?: string\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    width?: false | 'medium' | 'large' | 'stretch'\n    rightAligned?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const {\n    thousandSeparator,\n    decimalSymbol = ',',\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    rightAligned,\n  } = props\n\n  const preparedProps: Props = {\n    ...props,\n    schema: props.schema ?? {\n      type: 'number',\n      minimum: props.minimum,\n      maximum: props.maximum,\n      exclusiveMinimum: props.exclusiveMinimum,\n      exclusiveMaximum: props.exclusiveMaximum,\n      multipleOf: props.multipleOf,\n    },\n    toInput: (external: number | undefined) => {\n      if (external === undefined) {\n        return ''\n      }\n      return external\n    },\n    fromInput: ({\n      value,\n      numberValue,\n    }: {\n      value: string\n      numberValue: number\n    }) => {\n      if (value === '') {\n        return emptyValue\n      }\n      return numberValue\n    },\n    width: props.width ?? 'medium',\n  }\n\n  const {\n    id,\n    className,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    disabled,\n    info,\n    warning,\n    error,\n    emptyValue,\n    width,\n    onFocus,\n    onBlur,\n    onChange,\n  } = useField(preparedProps)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-number', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary}\n      info={info}\n      warning={warning}\n      error={error}\n      contentsWidth={width !== false ? width : undefined}\n      {...forwardSpaceProps(props)}\n    >\n      <InputMasked\n        id={id}\n        className={classnames(\n          'dnb-forms-field-number__input',\n          inputClassName\n        )}\n        placeholder={placeholder}\n        value={value}\n        as_number\n        number_mask={{\n          decimalLimit,\n          decimalSymbol,\n          includeThousandsSeparator: thousandSeparator !== undefined,\n          thousandsSeparatorSymbol:\n            thousandSeparator === true ? ' ' : thousandSeparator,\n          prefix,\n          suffix,\n        }}\n        right={rightAligned}\n        on_focus={onFocus}\n        on_blur={onBlur}\n        on_change={onChange}\n        disabled={disabled}\n        stretch={width !== undefined}\n      />\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsEufemiaSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}

package/cjs/extensions/forms/Field/PhoneNumber.d.ts

@@ -3,7 +3,7 @@ import type { FieldProps } from '../field-types';
 export type Props = ComponentProps & FieldProps<string> & {
     countryCodeFieldClassName?: string;
     numberFieldClassName?: string;
-    width?: false | 'medium' | 'large';
+    width?: 'medium' | 'large';
 };
 declare function PhoneNumber(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace PhoneNumber {

package/cjs/extensions/forms/Field/PhoneNumber.js

@@ -71,7 +71,7 @@ function PhoneNumber(props) {
     onChange === null || onChange === void 0 ? void 0 : onChange([countryCode, value].filter(Boolean).join(' '));
   }, [countryCode, emptyValue, onChange]);
   return _react.default.createElement(_elements.Div, _extends({
-    className: (0, _classnames.default)('dnb-forms-field-phone-number', className, width !== false && `dnb-forms-field-phone-number--width-${width}`)
+    className: (0, _classnames.default)('dnb-forms-field-phone-number', className, width !== undefined && `dnb-forms-field-phone-number--width-${width}`)
   }, (0, _utils.forwardSpaceProps)(preparedProps)), _react.default.createElement(_components.Autocomplete, {
     className: (0, _classnames.default)('dnb-forms-field-phone-number__country-code', countryCodeFieldClassName),
     label_direction: "vertical",