@dnb/eufemia 10.22.0 → 10.23.0

package/components/height-animation/style/dnb-height-animation.css

@@ -11,8 +11,8 @@
   will-change: height;
   transition: var(--height-animation);
 }
-html[data-visual-test] .dnb-height-animation {
-  transition: none;
+html[data-visual-test] .dnb-height-animation, html[data-visual-test] .dnb-height-animation * {
+  transition: none !important;
 }
 .dnb-height-animation--animating {
   overflow-y: hidden;

package/components/height-animation/style/dnb-height-animation.min.css

@@ -1 +1 @@
-.dnb-height-animation{--height-animation:height var(--duration,400ms) var(--easing-default) var(--delay,0ms);transition:var(--height-animation);will-change:height}html[data-visual-test] .dnb-height-animation{transition:none}.dnb-height-animation--animating{overflow-y:hidden}@supports (overflow-y:clip){.dnb-height-animation--animating{overflow-y:clip}}.dnb-height-animation--hidden{display:none}.dnb-height-animation--show-overflow{overflow:visible}
+.dnb-height-animation{--height-animation:height var(--duration,400ms) var(--easing-default) var(--delay,0ms);transition:var(--height-animation);will-change:height}html[data-visual-test] .dnb-height-animation,html[data-visual-test] .dnb-height-animation *{transition:none!important}.dnb-height-animation--animating{overflow-y:hidden}@supports (overflow-y:clip){.dnb-height-animation--animating{overflow-y:clip}}.dnb-height-animation--hidden{display:none}.dnb-height-animation--show-overflow{overflow:visible}

package/components/height-animation/style/dnb-height-animation.scss

@@ -12,8 +12,9 @@
   will-change: height;
   transition: var(--height-animation);
 
-  html[data-visual-test] & {
-    transition: none;
+  html[data-visual-test] &,
+  html[data-visual-test] & * {
+    transition: none !important;
   }
 
   &--animating {

package/components/number-format/NumberUtils.d.ts

@@ -23,7 +23,7 @@ export interface formatReturnValue {
   aria: string;
 
   /** Language code, like en-US */
-  locale: string;
+  locale: Locale;
 
   /** The given type */
   type: formatTypes | string;

package/components/radio/style/dnb-radio.css

@@ -39,6 +39,8 @@
   --radio-color-background-on--error-hover: lavenderblush;
   --radio-color-dot-on--error-hover: lavenderblush;
   --radio-focus-ring-width--error: var(--focus-ring-width);
+  --radio-bounding--medium: 1.75, 1.5;
+  --radio-bounding--large: 1.25, 1.12;
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
@@ -117,10 +119,12 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   margin: 0;
   padding: 0;
   border: 0;
+  transform: scale(var(--radio-bounding--medium));
 }
 .dnb-radio--large .dnb-radio__input {
   width: var(--radio-width--large);
   height: var(--radio-height--large);
+  transform: scale(var(--radio-bounding--large));
 }
 .dnb-radio__input:not([disabled]) {
   cursor: pointer;

package/components/radio/style/dnb-radio.min.css

@@ -1 +1 @@
-:root{--radio-width--medium:1.5rem;--radio-height--medium:1.5rem}.dnb-radio{--radio-width--large:2rem;--radio-height--large:2rem;--radio-border-width:0.125rem;--radio-color-dot-on:#000;--radio-color-background-on:#fff;--radio-color-border-on:#000;--radio-color-background-off:#fff;--radio-color-border-off:#000;--radio-color-dot-on--disabled:#d3d3d3;--radio-color-background--disabled:#fff;--radio-color-border-on--disabled:#d3d3d3;--radio-color-border-off--disabled:#d3d3d3;--radio-color-dot-on--active:#d3d3d3;--radio-color-border-on--active:#d3d3d3;--radio-color-background-off--active:#d3d3d3;--radio-color-border-off--active:transparent;--radio-color-dot-on--hover:#d3d3d3;--radio-color-background-on--hover:#d3d3d3;--radio-color-background-off--hover:#d3d3d3;--radio-color-background-on--focus:var(--color-white);--radio-color-background-off--focus:#d3d3d3;--radio-color-dot-on--error:red;--radio-color-border-on--error:red;--radio-color-border--error-hover:red;--radio-color-background-off--error-hover:#fff0f5;--radio-color-background-on--error-hover:#fff0f5;--radio-color-dot-on--error-hover:#fff0f5;--radio-focus-ring-width--error:var(--focus-ring-width);font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-radio,.dnb-radio__inner{display:inline-flex;flex-direction:column}.dnb-radio__inner{align-self:center}.dnb-radio__shell{align-items:center;display:flex;flex-shrink:0;height:var(--radio-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--radio-width--medium)}.dnb-radio__button,.dnb-radio__dot,.dnb-radio__focus{position:absolute;z-index:4}.dnb-radio__button{border:var(--radio-border-width) solid transparent}.dnb-radio__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-radio__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__button,.dnb-radio__focus{border-radius:50%;height:calc(var(--radio-height--medium) - .25rem);width:calc(var(--radio-width--medium) - .25rem)}.dnb-radio--large .dnb-radio__button,.dnb-radio--large .dnb-radio__focus{height:calc(var(--radio-height--large) - .125rem);width:calc(var(--radio-width--large) - .125rem)}.dnb-radio__dot{background-color:var(--radio-color-dot-on);border-radius:50%;height:calc(var(--radio-height--medium) - .75rem);transition:opacity .2s ease-out,transform .2s ease-out;width:calc(var(--radio-width--medium) - .75rem)}.dnb-radio--large .dnb-radio__dot{height:calc(var(--radio-height--large) - .875rem);width:calc(var(--radio-width--large) - .875rem)}.dnb-radio__input{border:0;height:var(--radio-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;width:var(--radio-width--medium);z-index:5}.dnb-radio--large .dnb-radio__input{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio__input:not([disabled]){cursor:pointer}.dnb-radio__order{align-items:baseline;display:inline-flex}.dnb-radio-group--column .dnb-radio__order{display:flex}.dnb-radio__row{display:inline-flex}.dnb-radio__suffix{order:3}.dnb-radio__suffix .dnb-modal__trigger{margin-bottom:-.25rem;margin-top:-.25rem}.dnb-radio-group__suffix{font-size:var(--font-size-basis)}.dnb-radio--large,.dnb-radio--large .dnb-radio__suffix{line-height:var(--radio-height--large)}.dnb-radio--large .dnb-radio__shell{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner{order:2}.dnb-radio--label-position-left .dnb-radio__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner{order:1}.dnb-radio--label-position-right .dnb-radio__order .dnb-form-label{order:2;padding-left:.5rem}:not(.dnb-radio-group)>.dnb-form-label+.dnb-radio{vertical-align:top}.dnb-radio .dnb-form-status{margin-bottom:0;margin-top:.375rem;order:4}.dnb-radio+.dnb-form-status{margin-bottom:1rem;margin-top:.5rem}.dnb-radio>.dnb-form-status{transform:translateY(.25rem)}.dnb-radio-group{--radio-group-margin-bottom:0.5rem;--radio-group-margin-right:1rem;display:inline-flex;flex-direction:row}.dnb-radio-group fieldset{border:none;margin:0;padding:0}.dnb-radio-group .dnb-radio{margin-bottom:var(--radio-group-margin-bottom);margin-right:var(--radio-group-margin-right)}.dnb-radio-group--column .dnb-radio{display:flex;margin-right:0}.dnb-radio-group .dnb-radio:last-of-type{margin-right:0}.dnb-radio-group [role=radiogroup],.dnb-radio-group__shell{display:block}.dnb-radio-group__shell>.dnb-form-status{margin-bottom:0;margin-top:0}.dnb-radio-group--column .dnb-radio-group__shell{flex-direction:column}.dnb-radio-group .dnb-flex-container{margin-bottom:calc(0px - var(--radio-group-margin-bottom))}.dnb-radio-group .dnb-flex-container:before{font-size:var(--font-size-basis)}.dnb-radio__input:checked~.dnb-radio__button,.dnb-radio__input[data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background-on);border-color:var(--radio-color-border-on)}.dnb-radio__input:checked~.dnb-radio__dot,.dnb-radio__input[data-checked=true]~.dnb-radio__dot{opacity:1;transform:scale(1)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__dot{opacity:0;transform:scale(.8)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__button{background-color:var(--radio-color-background-off);border-color:var(--radio-color-border-off)}.dnb-radio__input[disabled]:checked~.dnb-radio__button,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-on--disabled)}.dnb-radio__input[disabled]:checked~.dnb-radio__dot,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--disabled)}.dnb-radio__input[disabled]:not(:checked):not([data-checked=true])~.dnb-radio__button:not(.dnb-skeleton){background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-off--disabled)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton{border-color:var(--skeleton-color)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton:before{border-radius:0}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__button,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__button{border-color:var(--radio-color-border-on--active)}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__dot,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__dot{background-color:var(--radio-color-dot-on--active)}.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active~.dnb-radio__button{background-color:var(--radio-color-background-off--active);border-color:var(--radio-color-border-off--active)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__dot,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__button,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--hover)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus~.dnb-radio__button{border:none}.dnb-radio__input:not([disabled]):active~.dnb-radio__focus,.dnb-radio__input:not([disabled]):focus~.dnb-radio__focus{display:block}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__button,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__button{background-color:var(--radio-color-background-on--focus)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__dot{background-color:var(--radio-color-dot-on--focus,var(--focus-ring-color))}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus~.dnb-radio__button{background-color:var(--radio-color-background-off--focus)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__button{border:none}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__focus{--border-color:var(--radio-color-border-on--error);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):hover~.dnb-radio__focus{--border-color:var(--radio-color-border--error-hover);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__button,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--error-hover)}
+:root{--radio-width--medium:1.5rem;--radio-height--medium:1.5rem}.dnb-radio{--radio-width--large:2rem;--radio-height--large:2rem;--radio-border-width:0.125rem;--radio-color-dot-on:#000;--radio-color-background-on:#fff;--radio-color-border-on:#000;--radio-color-background-off:#fff;--radio-color-border-off:#000;--radio-color-dot-on--disabled:#d3d3d3;--radio-color-background--disabled:#fff;--radio-color-border-on--disabled:#d3d3d3;--radio-color-border-off--disabled:#d3d3d3;--radio-color-dot-on--active:#d3d3d3;--radio-color-border-on--active:#d3d3d3;--radio-color-background-off--active:#d3d3d3;--radio-color-border-off--active:transparent;--radio-color-dot-on--hover:#d3d3d3;--radio-color-background-on--hover:#d3d3d3;--radio-color-background-off--hover:#d3d3d3;--radio-color-background-on--focus:var(--color-white);--radio-color-background-off--focus:#d3d3d3;--radio-color-dot-on--error:red;--radio-color-border-on--error:red;--radio-color-border--error-hover:red;--radio-color-background-off--error-hover:#fff0f5;--radio-color-background-on--error-hover:#fff0f5;--radio-color-dot-on--error-hover:#fff0f5;--radio-focus-ring-width--error:var(--focus-ring-width);--radio-bounding--medium:1.75,1.5;--radio-bounding--large:1.25,1.12;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-radio,.dnb-radio__inner{display:inline-flex;flex-direction:column}.dnb-radio__inner{align-self:center}.dnb-radio__shell{align-items:center;display:flex;flex-shrink:0;height:var(--radio-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--radio-width--medium)}.dnb-radio__button,.dnb-radio__dot,.dnb-radio__focus{position:absolute;z-index:4}.dnb-radio__button{border:var(--radio-border-width) solid transparent}.dnb-radio__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-radio__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__button,.dnb-radio__focus{border-radius:50%;height:calc(var(--radio-height--medium) - .25rem);width:calc(var(--radio-width--medium) - .25rem)}.dnb-radio--large .dnb-radio__button,.dnb-radio--large .dnb-radio__focus{height:calc(var(--radio-height--large) - .125rem);width:calc(var(--radio-width--large) - .125rem)}.dnb-radio__dot{background-color:var(--radio-color-dot-on);border-radius:50%;height:calc(var(--radio-height--medium) - .75rem);transition:opacity .2s ease-out,transform .2s ease-out;width:calc(var(--radio-width--medium) - .75rem)}.dnb-radio--large .dnb-radio__dot{height:calc(var(--radio-height--large) - .875rem);width:calc(var(--radio-width--large) - .875rem)}.dnb-radio__input{border:0;height:var(--radio-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;transform:scale(var(--radio-bounding--medium));width:var(--radio-width--medium);z-index:5}.dnb-radio--large .dnb-radio__input{height:var(--radio-height--large);transform:scale(var(--radio-bounding--large));width:var(--radio-width--large)}.dnb-radio__input:not([disabled]){cursor:pointer}.dnb-radio__order{align-items:baseline;display:inline-flex}.dnb-radio-group--column .dnb-radio__order{display:flex}.dnb-radio__row{display:inline-flex}.dnb-radio__suffix{order:3}.dnb-radio__suffix .dnb-modal__trigger{margin-bottom:-.25rem;margin-top:-.25rem}.dnb-radio-group__suffix{font-size:var(--font-size-basis)}.dnb-radio--large,.dnb-radio--large .dnb-radio__suffix{line-height:var(--radio-height--large)}.dnb-radio--large .dnb-radio__shell{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner{order:2}.dnb-radio--label-position-left .dnb-radio__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner{order:1}.dnb-radio--label-position-right .dnb-radio__order .dnb-form-label{order:2;padding-left:.5rem}:not(.dnb-radio-group)>.dnb-form-label+.dnb-radio{vertical-align:top}.dnb-radio .dnb-form-status{margin-bottom:0;margin-top:.375rem;order:4}.dnb-radio+.dnb-form-status{margin-bottom:1rem;margin-top:.5rem}.dnb-radio>.dnb-form-status{transform:translateY(.25rem)}.dnb-radio-group{--radio-group-margin-bottom:0.5rem;--radio-group-margin-right:1rem;display:inline-flex;flex-direction:row}.dnb-radio-group fieldset{border:none;margin:0;padding:0}.dnb-radio-group .dnb-radio{margin-bottom:var(--radio-group-margin-bottom);margin-right:var(--radio-group-margin-right)}.dnb-radio-group--column .dnb-radio{display:flex;margin-right:0}.dnb-radio-group .dnb-radio:last-of-type{margin-right:0}.dnb-radio-group [role=radiogroup],.dnb-radio-group__shell{display:block}.dnb-radio-group__shell>.dnb-form-status{margin-bottom:0;margin-top:0}.dnb-radio-group--column .dnb-radio-group__shell{flex-direction:column}.dnb-radio-group .dnb-flex-container{margin-bottom:calc(0px - var(--radio-group-margin-bottom))}.dnb-radio-group .dnb-flex-container:before{font-size:var(--font-size-basis)}.dnb-radio__input:checked~.dnb-radio__button,.dnb-radio__input[data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background-on);border-color:var(--radio-color-border-on)}.dnb-radio__input:checked~.dnb-radio__dot,.dnb-radio__input[data-checked=true]~.dnb-radio__dot{opacity:1;transform:scale(1)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__dot{opacity:0;transform:scale(.8)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__button{background-color:var(--radio-color-background-off);border-color:var(--radio-color-border-off)}.dnb-radio__input[disabled]:checked~.dnb-radio__button,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-on--disabled)}.dnb-radio__input[disabled]:checked~.dnb-radio__dot,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--disabled)}.dnb-radio__input[disabled]:not(:checked):not([data-checked=true])~.dnb-radio__button:not(.dnb-skeleton){background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-off--disabled)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton{border-color:var(--skeleton-color)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton:before{border-radius:0}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__button,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__button{border-color:var(--radio-color-border-on--active)}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__dot,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__dot{background-color:var(--radio-color-dot-on--active)}.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active~.dnb-radio__button{background-color:var(--radio-color-background-off--active);border-color:var(--radio-color-border-off--active)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__dot,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__button,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--hover)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus~.dnb-radio__button{border:none}.dnb-radio__input:not([disabled]):active~.dnb-radio__focus,.dnb-radio__input:not([disabled]):focus~.dnb-radio__focus{display:block}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__button,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__button{background-color:var(--radio-color-background-on--focus)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__dot{background-color:var(--radio-color-dot-on--focus,var(--focus-ring-color))}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus~.dnb-radio__button{background-color:var(--radio-color-background-off--focus)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__button{border:none}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__focus{--border-color:var(--radio-color-border-on--error);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):hover~.dnb-radio__focus{--border-color:var(--radio-color-border--error-hover);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__button,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--error-hover)}

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

@@ -45,6 +45,9 @@
   --radio-color-background-on--error-hover: lavenderblush;
   --radio-color-dot-on--error-hover: lavenderblush;
   --radio-focus-ring-width--error: var(--focus-ring-width);
+  // Bounding box
+  --radio-bounding--medium: 1.75, 1.5;
+  --radio-bounding--large: 1.25, 1.12;
 
   display: inline-flex;
   flex-direction: column;
@@ -130,11 +133,17 @@
     padding: 0;
 
     border: 0;
+
+    // Larger bounding box
+    transform: scale(var(--radio-bounding--medium));
   }
 
   &--large &__input {
     width: var(--radio-width--large);
     height: var(--radio-height--large);
+
+    // Larger bounding box
+    transform: scale(var(--radio-bounding--large));
   }
 
   &__input:not([disabled]) {

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

@@ -92,8 +92,7 @@
 }
 .dnb-section--fire-red .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)), .dnb-section--emerald-green .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)), .dnb-section--sea-green .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)), .dnb-section--success .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
   color: var(--anchor-color--contrast);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+  box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
 }
 .dnb-section--fire-red .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--emerald-green .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--sea-green .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--success .dnb-anchor:hover:not(.dnb-anchor--no-hover) {
   /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -101,15 +100,13 @@
 @supports not (selector(*:where(*))) {
   .dnb-section--fire-red .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--emerald-green .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--sea-green .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--success .dnb-anchor:hover:not(.dnb-anchor--no-hover) {
     color: var(--anchor-color--contrast);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 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--success .dnb-anchor:active {
   color: var(--color-white);
   background-color: transparent;
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter) * -1) 0 0 0 transparent, var(--anchor-background-gutter) 0 0 0 transparent;
+  box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 transparent, var(--anchor-background-gutter-right, 0.125rem) 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--success .dnb-anchor:focus-visible {
   color: var(--color-white);

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

@@ -1,3 +1,3 @@
 .dnb-section{--background-color:var(--color-white);--outline-color--value:var(--color-black-8)}.dnb-section--divider{--text-color:var(--color-black-80);--background-color:var(--color-white);--sc:var(--color-mint-green-50);z-index:0}.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 0.0625rem 0 0 var(--sc),99vw 0.0625rem 0 0 var(--sc),0 -0.0625rem 0 0 var(--sc),99vw -0.0625rem 0 0 var(--sc),198vw 0.0625rem 0 0 var(--sc),198vw -0.0625rem 0 0 var(--sc)}.dnb-section--transparent{--background-color:transparent}.dnb-section--default,.dnb-section--mint-green-12{--text-color:var(--text-color--value,var(--color-black-80));--background-color:var(
     --background-color--value,var(--color-mint-green-12)
-  )}.dnb-section--white{--text-color:var(--color-black-80);--background-color:var(--color-white)}.dnb-section--mint-green{--text-color:var(--color-black-80);--background-color:var(--color-mint-green)}.dnb-section--lavender{--text-color:var(--color-black-80);--background-color:var(--color-lavender)}.dnb-section--sand-yellow,.dnb-section--warning{--text-color:var(--color-black-80);--background-color:var(--color-sand-yellow)}.dnb-section--info,.dnb-section--pistachio{--text-color:var(--color-black-80);--background-color:var(--color-pistachio)}.dnb-section--black-3{--text-color:var(--color-black-80);--background-color:var(--color-black-3)}.dnb-section--emerald-green{--text-color:var(--color-mint-green);--background-color:var(--color-emerald-green)}.dnb-section--sea-green{--text-color:var(--color-white);--background-color:var(--color-sea-green)}.dnb-section--fire-red{--text-color:var(--color-white);--background-color:var(--color-fire-red)}.dnb-section--error,.dnb-section--fire-red-8{--text-color:var(--color-black-80);--background-color:var(--color-fire-red-8)}.dnb-section--success{--text-color:var(--color-white);--background-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:where(:not(.dnb-anchor--no-hover)),.dnb-section--fire-red .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)),.dnb-section--sea-green .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)),.dnb-section--success .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}@supports not (selector(*:where(*))){.dnb-section--emerald-green .dnb-anchor:hover:not(.dnb-anchor--no-hover),.dnb-section--fire-red .dnb-anchor:hover:not(.dnb-anchor--no-hover),.dnb-section--sea-green .dnb-anchor:hover:not(.dnb-anchor--no-hover),.dnb-section--success .dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}}.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{--anchor-background-gutter:0.125em;background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,calc(var(--anchor-background-gutter)*-1) 0 0 0 transparent,var(--anchor-background-gutter) 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-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{--text-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{--text-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{--text-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--white{--text-color:var(--color-black-80);--background-color:var(--color-white)}.dnb-section--mint-green{--text-color:var(--color-black-80);--background-color:var(--color-mint-green)}.dnb-section--lavender{--text-color:var(--color-black-80);--background-color:var(--color-lavender)}.dnb-section--sand-yellow,.dnb-section--warning{--text-color:var(--color-black-80);--background-color:var(--color-sand-yellow)}.dnb-section--info,.dnb-section--pistachio{--text-color:var(--color-black-80);--background-color:var(--color-pistachio)}.dnb-section--black-3{--text-color:var(--color-black-80);--background-color:var(--color-black-3)}.dnb-section--emerald-green{--text-color:var(--color-mint-green);--background-color:var(--color-emerald-green)}.dnb-section--sea-green{--text-color:var(--color-white);--background-color:var(--color-sea-green)}.dnb-section--fire-red{--text-color:var(--color-white);--background-color:var(--color-fire-red)}.dnb-section--error,.dnb-section--fire-red-8{--text-color:var(--color-black-80);--background-color:var(--color-fire-red-8)}.dnb-section--success{--text-color:var(--color-white);--background-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:where(:not(.dnb-anchor--no-hover)),.dnb-section--fire-red .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)),.dnb-section--sea-green .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)),.dnb-section--success .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}@supports not (selector(*:where(*))){.dnb-section--emerald-green .dnb-anchor:hover:not(.dnb-anchor--no-hover),.dnb-section--fire-red .dnb-anchor:hover:not(.dnb-anchor--no-hover),.dnb-section--sea-green .dnb-anchor:hover:not(.dnb-anchor--no-hover),.dnb-section--success .dnb-anchor:hover:not(.dnb-anchor--no-hover){box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}}.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,calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 transparent,var(--anchor-background-gutter-right,.125rem) 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-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{--text-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{--text-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{--text-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/components/skeleton/SkeletonHelper.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import type { SkeletonShow } from './Skeleton';
-export interface AutoSizeProps {
+export type AutoSizeProps = {
   __element?: React.ReactNode;
   children?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
-}
+};
 export class AutoSize extends React.Component<AutoSizeProps, any> {
   render(): JSX.Element;
 }
-export interface SkeletonContextProps {
+export type SkeletonContextProps = ContextProps & {
   translation?: {
     Skeleton?: {
       /**
@@ -18,14 +18,14 @@ export interface SkeletonContextProps {
       aria_busy: string;
     };
   };
-}
+};
 export type SkeletonMethods = 'shape' | 'font' | 'code';
 export declare const createSkeletonClass: (
   method: SkeletonMethods,
   skeleton: SkeletonShow,
   context?: SkeletonContextProps
 ) => string;
-export interface skeletonDOMAttributesContext {
+export type skeletonDOMAttributesContext = {
   translation?: {
     Skeleton: {
       /**
@@ -34,7 +34,7 @@ export interface skeletonDOMAttributesContext {
       aria_busy: string;
     };
   };
-}
+};
 export declare const skeletonDOMAttributes: (
   params: React.HTMLProps<HTMLElement>,
   skeleton: SkeletonShow,

package/components/skeleton/style/dnb-skeleton.css

@@ -68,6 +68,7 @@
   --font-family-monospace: "DNBMonoSkeleton" !important;
   font-family: var(--font-family-monospace) !important;
   font-style: unset !important;
+  box-shadow: none !important;
 }
 .dnb-skeleton--font-only, .dnb-skeleton--font, .dnb-skeleton--font .dnb-skeleton--show-font, .dnb-skeleton--font .dnb-p {
   pointer-events: none;

package/components/skeleton/style/dnb-skeleton.min.css

@@ -1 +1 @@
-.dnb-skeleton{--skeleton-delay:5s}.dnb-skeleton img,.dnb-skeleton video{filter:brightness(0) contrast(0) opacity(.5)}.dnb-skeleton--block{display:block}.dnb-skeleton--overflow{overflow:hidden}.dnb-skeleton--grey{filter:grayscale(100%)}.dnb-skeleton--shape{background:transparent;box-shadow:none!important;color:transparent;overflow-x:hidden;pointer-events:none;position:relative}.dnb-skeleton--shape.dnb-skeleton:after,.dnb-skeleton--shape.dnb-skeleton:before{background:none!important;border-radius:inherit;bottom:0!important;box-shadow:none!important;content:""!important;height:auto!important;left:0!important;margin:0!important;padding:0!important;position:absolute!important;right:0!important;top:0!important;width:100%!important;z-index:100!important}.dnb-skeleton--shape.dnb-skeleton:before{background-color:var(--skeleton-color)!important}.dnb-skeleton--shape.dnb-skeleton:after{animation:skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay);background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-repeat:repeat!important;background-size:100%!important;-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}.dnb-skeleton--code code,.dnb-skeleton--code code *,.dnb-skeleton--code pre,.dnb-skeleton--code pre *,.dnb-skeleton--font code,.dnb-skeleton--font code *,.dnb-skeleton--font pre,.dnb-skeleton--font pre *{--font-family-monospace:"DNBMonoSkeleton"!important;font-family:var(--font-family-monospace)!important;font-style:unset!important}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font,.dnb-skeleton--font-only{--font-family-default:"DNBSkeleton"!important;font-family:var(--font-family-default)!important;font-style:unset!important;pointer-events:none}.dnb-skeleton--font .dnb-p::marker,.dnb-skeleton--font .dnb-skeleton--show-font::marker,.dnb-skeleton--font-only::marker,.dnb-skeleton--font::marker{color:var(--skeleton-color)}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font{-webkit-text-fill-color:transparent!important;--border-color:var(--skeleton-color);animation:skeletonFontAnimation 5s linear infinite var(--skeleton-delay);-webkit-background-clip:text!important;background-clip:text!important;background-color:var(--skeleton-color)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-position-x:30rem;background-position-y:50%!important;background-repeat:no-repeat!important;background-size:30rem 100%!important}html[data-visual-test] .dnb-skeleton--font,html[data-visual-test] .dnb-skeleton--font .dnb-p,html[data-visual-test] .dnb-skeleton--font .dnb-skeleton--show-font{animation:none!important}.dnb-skeleton__figure{border-radius:.25rem;position:relative}.dnb-skeleton__figure--circle{border-radius:50%;height:4rem;width:4rem}.dnb-skeleton__figure--product{align-items:center;display:flex}.dnb-skeleton__figure--product .dnb-skeleton__figure--circle+div{margin-left:1rem;width:50%}.dnb-skeleton--no-animation * .dnb-skeleton:after,.dnb-skeleton--no-animation .dnb-skeleton,.dnb-skeleton--no-animation .dnb-skeleton:after{animation:none!important}@keyframes skeletonLinearAnimation{0%{-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}50%{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{-webkit-clip-path:polygon(0 0,0 0,0 100%,0 100%);clip-path:polygon(0 0,0 0,0 100%,0 100%)}}@keyframes skeletonFontAnimation{0%{background-position-x:30rem}to{background-position-x:-30rem}}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:500;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:600;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBMonoSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.ttf) format("truetype")}
+.dnb-skeleton{--skeleton-delay:5s}.dnb-skeleton img,.dnb-skeleton video{filter:brightness(0) contrast(0) opacity(.5)}.dnb-skeleton--block{display:block}.dnb-skeleton--overflow{overflow:hidden}.dnb-skeleton--grey{filter:grayscale(100%)}.dnb-skeleton--shape{background:transparent;box-shadow:none!important;color:transparent;overflow-x:hidden;pointer-events:none;position:relative}.dnb-skeleton--shape.dnb-skeleton:after,.dnb-skeleton--shape.dnb-skeleton:before{background:none!important;border-radius:inherit;bottom:0!important;box-shadow:none!important;content:""!important;height:auto!important;left:0!important;margin:0!important;padding:0!important;position:absolute!important;right:0!important;top:0!important;width:100%!important;z-index:100!important}.dnb-skeleton--shape.dnb-skeleton:before{background-color:var(--skeleton-color)!important}.dnb-skeleton--shape.dnb-skeleton:after{animation:skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay);background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-repeat:repeat!important;background-size:100%!important;-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}.dnb-skeleton--code code,.dnb-skeleton--code code *,.dnb-skeleton--code pre,.dnb-skeleton--code pre *,.dnb-skeleton--font code,.dnb-skeleton--font code *,.dnb-skeleton--font pre,.dnb-skeleton--font pre *{--font-family-monospace:"DNBMonoSkeleton"!important;box-shadow:none!important;font-family:var(--font-family-monospace)!important;font-style:unset!important}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font,.dnb-skeleton--font-only{--font-family-default:"DNBSkeleton"!important;font-family:var(--font-family-default)!important;font-style:unset!important;pointer-events:none}.dnb-skeleton--font .dnb-p::marker,.dnb-skeleton--font .dnb-skeleton--show-font::marker,.dnb-skeleton--font-only::marker,.dnb-skeleton--font::marker{color:var(--skeleton-color)}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font{-webkit-text-fill-color:transparent!important;--border-color:var(--skeleton-color);animation:skeletonFontAnimation 5s linear infinite var(--skeleton-delay);-webkit-background-clip:text!important;background-clip:text!important;background-color:var(--skeleton-color)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-position-x:30rem;background-position-y:50%!important;background-repeat:no-repeat!important;background-size:30rem 100%!important}html[data-visual-test] .dnb-skeleton--font,html[data-visual-test] .dnb-skeleton--font .dnb-p,html[data-visual-test] .dnb-skeleton--font .dnb-skeleton--show-font{animation:none!important}.dnb-skeleton__figure{border-radius:.25rem;position:relative}.dnb-skeleton__figure--circle{border-radius:50%;height:4rem;width:4rem}.dnb-skeleton__figure--product{align-items:center;display:flex}.dnb-skeleton__figure--product .dnb-skeleton__figure--circle+div{margin-left:1rem;width:50%}.dnb-skeleton--no-animation * .dnb-skeleton:after,.dnb-skeleton--no-animation .dnb-skeleton,.dnb-skeleton--no-animation .dnb-skeleton:after{animation:none!important}@keyframes skeletonLinearAnimation{0%{-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}50%{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{-webkit-clip-path:polygon(0 0,0 0,0 100%,0 100%);clip-path:polygon(0 0,0 0,0 100%,0 100%)}}@keyframes skeletonFontAnimation{0%{background-position-x:30rem}to{background-position-x:-30rem}}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:500;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:600;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBMonoSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.ttf) format("truetype")}

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

@@ -87,6 +87,7 @@
       --font-family-monospace: 'DNBMonoSkeleton' !important;
       font-family: var(--font-family-monospace) !important;
       font-style: unset !important;
+      box-shadow: none !important;
     }
   }
 

package/components/slider/SliderInstance.js

@@ -52,6 +52,7 @@ export function SliderInstance() {
   const addButton = showButtons ? _AddButton || (_AddButton = React.createElement(AddButton, null)) : null;
   skeletonDOMAttributes(mainParams, skeleton, context);
   return React.createElement("span", mainParams, label && React.createElement(FormLabel, {
+    forId: `${id}-thumb-0`,
     id: id + '-label',
     text: label,
     disabled: disabled,

package/components/slider/SliderInstance.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderInstance.js","names":["React","classnames","isTrue","AlignmentHelper","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","Context","Suffix","Button","FormLabel","FormStatus","SliderMainTrack","SliderTrackBefore","SliderTrackAfter","SliderThumb","useSliderProps","clamp","getFormattedNumber","SliderInstance","context","useContext","isReverse","isVertical","showButtons","showStatus","shouldAnimate","allProps","id","label","labelSrOnly","labelDirection","status","statusProps","statusState","statusNoAnimation","globalStatus","stretch","skeleton","disabled","className","extensions","mainParams","subtractButton","_SubtractButton","createElement","SubtractButton","addButton","_AddButton","AddButton","text","srOnly","_AlignmentHelper","_extends","show","text_id","state","no_animation","Object","entries","map","_ref2","key","_ref","instance","options","_objectWithoutProperties","_excluded","Element","_SliderThumb","_SliderTrackBefore","_SliderTrackAfter","_SliderSuffix","SliderSuffix","suffix","emitChange","value","attributes","step","min","max","subtractTitle","numberFormat","onSubtractClickHandler","event","subtractParams","humanNumber","variant","icon","size","replace","aria","String","on_click","addTitle","onAddClickHandler","addParams"],"sources":["../../../../src/components/slider/SliderInstance.tsx"],"sourcesContent":["/**\n * Web Slider Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport { isTrue } from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\n\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport Button from '../button/Button'\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\n\nimport {\n  SliderMainTrack,\n  SliderTrackBefore,\n  SliderTrackAfter,\n} from './SliderTrack'\nimport { SliderThumb } from './SliderThumb'\nimport { useSliderProps } from './hooks/useSliderProps'\nimport { clamp, getFormattedNumber } from './SliderHelpers'\n\nexport function SliderInstance() {\n  const context = React.useContext(Context)\n\n  const {\n    isReverse,\n    isVertical,\n    showButtons,\n    showStatus,\n    shouldAnimate,\n    allProps,\n  } = useSliderProps()\n\n  const {\n    id,\n    label,\n    labelSrOnly,\n    labelDirection,\n    status,\n    statusProps,\n    statusState,\n    statusNoAnimation,\n    globalStatus,\n    stretch,\n    skeleton,\n    disabled,\n    className,\n    extensions,\n  } = allProps\n\n  const mainParams = {\n    className: classnames(\n      'dnb-slider',\n      isVertical && 'dnb-slider--vertical',\n      disabled && 'dnb-slider__state--disabled',\n      shouldAnimate && 'dnb-slider__state--animate',\n      !showButtons && 'dnb-slider--no-buttons',\n      isTrue(stretch) && 'dnb-slider--stretch',\n      label && labelDirection && `dnb-slider__label--${labelDirection}`,\n      showStatus && 'dnb-slider__form-status',\n      status && `dnb-slider__status--${statusState}`,\n      'dnb-form-component',\n      createSkeletonClass(null, skeleton),\n      createSpacingClasses(allProps),\n      className\n    ),\n  }\n\n  const subtractButton = showButtons ? <SubtractButton /> : null\n  const addButton = showButtons ? <AddButton /> : null\n\n  skeletonDOMAttributes(mainParams, skeleton, context)\n\n  return (\n    <span {...mainParams}>\n      {label && (\n        // do not use \"for_id\" as the ID element is not a fo\n        <FormLabel\n          id={id + '-label'}\n          text={label}\n          disabled={disabled}\n          skeleton={skeleton}\n          labelDirection={labelDirection}\n          srOnly={labelSrOnly}\n        />\n      )}\n\n      <span className=\"dnb-slider__wrapper\">\n        <AlignmentHelper />\n\n        <FormStatus\n          show={showStatus}\n          id={id + '-form-status'}\n          globalStatus={globalStatus}\n          text_id={id + '-status'} // used for \"aria-describedby\"\n          text={status}\n          state={statusState}\n          no_animation={statusNoAnimation}\n          skeleton={skeleton}\n          {...statusProps}\n        />\n\n        <span className=\"dnb-slider__inner\">\n          {showButtons && (isReverse ? addButton : subtractButton)}\n\n          <SliderMainTrack>\n            {extensions &&\n              Object.entries(extensions).map(\n                ([key, { instance, ...options }]) => {\n                  const Element = instance as React.ElementType\n                  return <Element key={key} {...options} />\n                }\n              )}\n            <SliderThumb />\n            <SliderTrackBefore />\n            <SliderTrackAfter />\n          </SliderMainTrack>\n\n          {showButtons && (isReverse ? subtractButton : addButton)}\n\n          <SliderSuffix />\n        </span>\n      </span>\n    </span>\n  )\n}\n\nfunction SliderSuffix() {\n  const { allProps } = useSliderProps()\n  const { id, suffix } = allProps\n\n  return suffix ? (\n    <Suffix\n      className=\"dnb-slider__suffix\"\n      id={id + '-suffix'} // used for \"aria-describedby\"\n      context={allProps}\n    >\n      {suffix}\n    </Suffix>\n  ) : null\n}\n\nfunction SubtractButton() {\n  const { emitChange, value, attributes, allProps } = useSliderProps()\n  const {\n    step,\n    min,\n    max,\n    disabled,\n    skeleton,\n    subtractTitle,\n    numberFormat,\n  } = allProps\n\n  const onSubtractClickHandler = (event: MouseEvent | TouchEvent) => {\n    emitChange(event, clamp((value as number) - (step || 1), min, max))\n  }\n\n  const subtractParams = {}\n\n  if (typeof attributes['aria-hidden'] !== 'undefined') {\n    subtractParams['aria-hidden'] = attributes['aria-hidden']\n  }\n\n  const humanNumber = getFormattedNumber(value as number, numberFormat)\n\n  return (\n    <Button\n      className=\"dnb-slider__button dnb-slider__button--subtract\"\n      variant=\"secondary\"\n      icon=\"subtract\"\n      size=\"small\"\n      aria-label={subtractTitle?.replace(\n        '%s',\n        humanNumber.aria || String(value)\n      )}\n      on_click={onSubtractClickHandler}\n      disabled={disabled}\n      skeleton={skeleton}\n      {...subtractParams}\n    />\n  )\n}\n\nfunction AddButton() {\n  const { emitChange, value, attributes, allProps } = useSliderProps()\n  const { step, min, max, disabled, skeleton, addTitle, numberFormat } =\n    allProps\n\n  const onAddClickHandler = (event: MouseEvent | TouchEvent) => {\n    emitChange(event, clamp((value as number) + (step || 1), min, max))\n  }\n\n  const addParams = {}\n\n  if (typeof attributes['aria-hidden'] !== 'undefined') {\n    addParams['aria-hidden'] = attributes['aria-hidden']\n  }\n\n  const humanNumber = getFormattedNumber(value as number, numberFormat)\n\n  return (\n    <Button\n      className=\"dnb-slider__button dnb-slider__button--add\"\n      variant=\"secondary\"\n      icon=\"add\"\n      size=\"small\"\n      aria-label={addTitle?.replace(\n        '%s',\n        humanNumber.aria || String(value)\n      )}\n      on_click={onAddClickHandler}\n      disabled={disabled}\n      skeleton={skeleton}\n      {...addParams}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"SliderInstance.js","names":["React","classnames","isTrue","AlignmentHelper","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","Context","Suffix","Button","FormLabel","FormStatus","SliderMainTrack","SliderTrackBefore","SliderTrackAfter","SliderThumb","useSliderProps","clamp","getFormattedNumber","SliderInstance","context","useContext","isReverse","isVertical","showButtons","showStatus","shouldAnimate","allProps","id","label","labelSrOnly","labelDirection","status","statusProps","statusState","statusNoAnimation","globalStatus","stretch","skeleton","disabled","className","extensions","mainParams","subtractButton","_SubtractButton","createElement","SubtractButton","addButton","_AddButton","AddButton","forId","text","srOnly","_AlignmentHelper","_extends","show","text_id","state","no_animation","Object","entries","map","_ref2","key","_ref","instance","options","_objectWithoutProperties","_excluded","Element","_SliderThumb","_SliderTrackBefore","_SliderTrackAfter","_SliderSuffix","SliderSuffix","suffix","emitChange","value","attributes","step","min","max","subtractTitle","numberFormat","onSubtractClickHandler","event","subtractParams","humanNumber","variant","icon","size","replace","aria","String","on_click","addTitle","onAddClickHandler","addParams"],"sources":["../../../../src/components/slider/SliderInstance.tsx"],"sourcesContent":["/**\n * Web Slider Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport { isTrue } from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\n\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport Button from '../button/Button'\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\n\nimport {\n  SliderMainTrack,\n  SliderTrackBefore,\n  SliderTrackAfter,\n} from './SliderTrack'\nimport { SliderThumb } from './SliderThumb'\nimport { useSliderProps } from './hooks/useSliderProps'\nimport { clamp, getFormattedNumber } from './SliderHelpers'\n\nexport function SliderInstance() {\n  const context = React.useContext(Context)\n\n  const {\n    isReverse,\n    isVertical,\n    showButtons,\n    showStatus,\n    shouldAnimate,\n    allProps,\n  } = useSliderProps()\n\n  const {\n    id,\n    label,\n    labelSrOnly,\n    labelDirection,\n    status,\n    statusProps,\n    statusState,\n    statusNoAnimation,\n    globalStatus,\n    stretch,\n    skeleton,\n    disabled,\n    className,\n    extensions,\n  } = allProps\n\n  const mainParams = {\n    className: classnames(\n      'dnb-slider',\n      isVertical && 'dnb-slider--vertical',\n      disabled && 'dnb-slider__state--disabled',\n      shouldAnimate && 'dnb-slider__state--animate',\n      !showButtons && 'dnb-slider--no-buttons',\n      isTrue(stretch) && 'dnb-slider--stretch',\n      label && labelDirection && `dnb-slider__label--${labelDirection}`,\n      showStatus && 'dnb-slider__form-status',\n      status && `dnb-slider__status--${statusState}`,\n      'dnb-form-component',\n      createSkeletonClass(null, skeleton),\n      createSpacingClasses(allProps),\n      className\n    ),\n  }\n\n  const subtractButton = showButtons ? <SubtractButton /> : null\n  const addButton = showButtons ? <AddButton /> : null\n\n  skeletonDOMAttributes(mainParams, skeleton, context)\n\n  return (\n    <span {...mainParams}>\n      {label && (\n        <FormLabel\n          forId={`${id}-thumb-0`}\n          id={id + '-label'}\n          text={label}\n          disabled={disabled}\n          skeleton={skeleton}\n          labelDirection={labelDirection}\n          srOnly={labelSrOnly}\n        />\n      )}\n\n      <span className=\"dnb-slider__wrapper\">\n        <AlignmentHelper />\n\n        <FormStatus\n          show={showStatus}\n          id={id + '-form-status'}\n          globalStatus={globalStatus}\n          text_id={id + '-status'} // used for \"aria-describedby\"\n          text={status}\n          state={statusState}\n          no_animation={statusNoAnimation}\n          skeleton={skeleton}\n          {...statusProps}\n        />\n\n        <span className=\"dnb-slider__inner\">\n          {showButtons && (isReverse ? addButton : subtractButton)}\n\n          <SliderMainTrack>\n            {extensions &&\n              Object.entries(extensions).map(\n                ([key, { instance, ...options }]) => {\n                  const Element = instance as React.ElementType\n                  return <Element key={key} {...options} />\n                }\n              )}\n            <SliderThumb />\n            <SliderTrackBefore />\n            <SliderTrackAfter />\n          </SliderMainTrack>\n\n          {showButtons && (isReverse ? subtractButton : addButton)}\n\n          <SliderSuffix />\n        </span>\n      </span>\n    </span>\n  )\n}\n\nfunction SliderSuffix() {\n  const { allProps } = useSliderProps()\n  const { id, suffix } = allProps\n\n  return suffix ? (\n    <Suffix\n      className=\"dnb-slider__suffix\"\n      id={id + '-suffix'} // used for \"aria-describedby\"\n      context={allProps}\n    >\n      {suffix}\n    </Suffix>\n  ) : null\n}\n\nfunction SubtractButton() {\n  const { emitChange, value, attributes, allProps } = useSliderProps()\n  const {\n    step,\n    min,\n    max,\n    disabled,\n    skeleton,\n    subtractTitle,\n    numberFormat,\n  } = allProps\n\n  const onSubtractClickHandler = (event: MouseEvent | TouchEvent) => {\n    emitChange(event, clamp((value as number) - (step || 1), min, max))\n  }\n\n  const subtractParams = {}\n\n  if (typeof attributes['aria-hidden'] !== 'undefined') {\n    subtractParams['aria-hidden'] = attributes['aria-hidden']\n  }\n\n  const humanNumber = getFormattedNumber(value as number, numberFormat)\n\n  return (\n    <Button\n      className=\"dnb-slider__button dnb-slider__button--subtract\"\n      variant=\"secondary\"\n      icon=\"subtract\"\n      size=\"small\"\n      aria-label={subtractTitle?.replace(\n        '%s',\n        humanNumber.aria || String(value)\n      )}\n      on_click={onSubtractClickHandler}\n      disabled={disabled}\n      skeleton={skeleton}\n      {...subtractParams}\n    />\n  )\n}\n\nfunction AddButton() {\n  const { emitChange, value, attributes, allProps } = useSliderProps()\n  const { step, min, max, disabled, skeleton, addTitle, numberFormat } =\n    allProps\n\n  const onAddClickHandler = (event: MouseEvent | TouchEvent) => {\n    emitChange(event, clamp((value as number) + (step || 1), min, max))\n  }\n\n  const addParams = {}\n\n  if (typeof attributes['aria-hidden'] !== 'undefined') {\n    addParams['aria-hidden'] = attributes['aria-hidden']\n  }\n\n  const humanNumber = getFormattedNumber(value as number, numberFormat)\n\n  return (\n    <Button\n      className=\"dnb-slider__button dnb-slider__button--add\"\n      variant=\"secondary\"\n      icon=\"add\"\n      size=\"small\"\n      aria-label={addTitle?.replace(\n        '%s',\n        humanNumber.aria || String(value)\n      )}\n      on_click={onAddClickHandler}\n      disabled={disabled}\n      skeleton={skeleton}\n      {...addParams}\n    />\n  )\n}\n"],"mappings":"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"}

package/components/slider/SliderThumb.js

@@ -102,10 +102,11 @@ function Thumb(_ref) {
   }
   validateDOMAttributes(allProps, thumbParams);
   const elemRef = React.useRef();
-  return React.createElement(React.Fragment, null, React.createElement("span", {
+  return React.createElement("span", {
     className: "dnb-slider__thumb",
     style: style
   }, React.createElement("input", _extends({
+    id: `${id}-thumb-${currentIndex}`,
     type: "range",
     className: "dnb-slider__button-helper",
     min: min,
@@ -124,6 +125,7 @@ function Thumb(_ref) {
     "aria-orientation": isVertical ? 'vertical' : 'horizontal',
     "data-index": currentIndex
   }, helperParams)), React.createElement(Button, _extends({
+    id: `${id}-button-${currentIndex}`,
     element: "span",
     type: "",
     variant: "secondary",
@@ -136,6 +138,6 @@ function Thumb(_ref) {
     active: Boolean(showTooltip || alwaysShowTooltip),
     showDelay: 1,
     hideDelay: 300
-  }, number || value, shouldAnimate)));
+  }, number || value, shouldAnimate));
 }
 //# sourceMappingURL=SliderThumb.js.map

package/components/slider/SliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderThumb.js","names":["React","combineDescribedBy","combineLabelledBy","validateDOMAttributes","warn","Button","Tooltip","useSliderEvents","useSliderProps","clamp","getFormattedNumber","SliderThumb","values","createElement","Fragment","map","value","i","Thumb","key","currentIndex","_ref","thumbIndex","isVertical","isReverse","showStatus","attributes","allProps","shouldAnimate","id","label","min","max","step","skeleton","disabled","suffix","numberFormat","tooltip","alwaysShowTooltip","index","current","percent","style","zIndex","number","aria","showTooltip","setShowTooltip","useState","onMouseEnterHandler","onMouseLeaveHandler","elemRef","dispatchEvent","Event","e","onThumbMouseDownHandler","onThumbMouseUpHandler","onHelperChangeHandler","onHelperFocusHandler","helperParams","thumbParams","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onBlur","onFocus","event","useRef","className","_extends","type","onChange","onMouseDown","onMouseUp","undefined","element","variant","innerRef","targetElement","active","Boolean","showDelay","hideDelay"],"sources":["../../../../src/components/slider/SliderThumb.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  combineDescribedBy,\n  combineLabelledBy,\n  validateDOMAttributes,\n  warn,\n} from '../../shared/component-helper'\nimport Button from '../button/Button'\nimport Tooltip from '../tooltip/Tooltip'\nimport { useSliderEvents } from './hooks/useSliderEvents'\nimport { useSliderProps } from './hooks/useSliderProps'\nimport { clamp, getFormattedNumber } from './SliderHelpers'\n\nexport function SliderThumb() {\n  const { values } = useSliderProps()\n\n  return (\n    <>\n      {values.map((value, i) => {\n        return <Thumb key={i} value={value} currentIndex={i} />\n      })}\n    </>\n  )\n}\n\ntype ThumbProps = {\n  value: number\n  currentIndex: number\n}\n\nfunction Thumb({ value, currentIndex }: ThumbProps) {\n  const {\n    thumbIndex,\n    isVertical,\n    isReverse,\n    showStatus,\n    attributes,\n    allProps,\n    shouldAnimate,\n  } = useSliderProps()\n\n  const {\n    id,\n    label,\n    min,\n    max,\n    step,\n    skeleton,\n    disabled,\n    suffix,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n  } = allProps\n\n  const index = thumbIndex.current\n  let percent = clamp(((value - min) * 100) / (max - min))\n\n  if (isReverse) {\n    percent = 100 - percent\n  }\n\n  const style = {\n    zIndex: index === currentIndex ? 4 : 3,\n    [`${isVertical ? 'top' : 'left'}`]: `${percent}%`,\n  } as React.CSSProperties\n\n  const { number, aria } = getFormattedNumber(value, numberFormat)\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n  const onMouseEnterHandler = () => {\n    setShowTooltip(true)\n  }\n  const onMouseLeaveHandler = () => {\n    setShowTooltip(false)\n    try {\n      elemRef.current.dispatchEvent(new Event('mouseleave'))\n    } catch (e) {\n      warn(e)\n    }\n  }\n\n  const {\n    onThumbMouseDownHandler,\n    onThumbMouseUpHandler,\n    onHelperChangeHandler,\n    onHelperFocusHandler,\n  } = useSliderEvents()\n\n  const helperParams: Record<string, unknown> = {}\n\n  if (label) {\n    helperParams['aria-labelledby'] = combineLabelledBy(\n      helperParams,\n      label ? id + '-label' : null\n    )\n  }\n\n  if (showStatus || suffix) {\n    helperParams['aria-describedby'] = combineDescribedBy(\n      helperParams,\n      showStatus ? id + '-status' : null,\n      suffix ? id + '-suffix' : null\n    )\n  }\n\n  const thumbParams = attributes as Record<string, unknown>\n\n  if (tooltip) {\n    thumbParams.onMouseEnter = onMouseEnterHandler\n    thumbParams.onMouseLeave = onMouseLeaveHandler\n    thumbParams.onTouchStart = onMouseEnterHandler\n    thumbParams.onTouchEnd = onMouseLeaveHandler\n    helperParams.onBlur = onMouseLeaveHandler\n    helperParams.onFocus = (event) => {\n      onHelperFocusHandler(event)\n      onMouseEnterHandler()\n      try {\n        elemRef.current.dispatchEvent(new Event('mouseenter'))\n      } catch (e) {\n        warn(e)\n      }\n    }\n  }\n  validateDOMAttributes(allProps, thumbParams) // because we send along rest attributes\n\n  const elemRef = React.useRef<HTMLElement>()\n\n  return (\n    <>\n      <span className=\"dnb-slider__thumb\" style={style}>\n        <input\n          type=\"range\"\n          className=\"dnb-slider__button-helper\"\n          min={min}\n          max={max}\n          step={step}\n          value={value}\n          disabled={disabled}\n          onChange={onHelperChangeHandler}\n          onFocus={onHelperFocusHandler}\n          onMouseDown={onThumbMouseDownHandler}\n          onMouseUp={onThumbMouseUpHandler}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-valuenow={value}\n          aria-valuetext={aria ? aria : undefined}\n          aria-orientation={isVertical ? 'vertical' : 'horizontal'}\n          data-index={currentIndex}\n          {...helperParams}\n        />\n\n        <Button\n          element=\"span\"\n          type=\"\" // avoid getting type=\"button\"\n          variant=\"secondary\"\n          disabled={disabled}\n          skeleton={skeleton}\n          innerRef={elemRef}\n          {...thumbParams}\n        />\n\n        {tooltip && (\n          <Tooltip\n            key={`group-${currentIndex}`}\n            targetElement={elemRef}\n            active={Boolean(showTooltip || alwaysShowTooltip)}\n            showDelay={1}\n            hideDelay={300}\n          >\n            {number || value}\n            {\n              shouldAnimate /* Use \"shouldAnimate\" only in order to update the position after the thumb animation */\n            }\n          </Tooltip>\n        )}\n      </span>\n    </>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"SliderThumb.js","names":["React","combineDescribedBy","combineLabelledBy","validateDOMAttributes","warn","Button","Tooltip","useSliderEvents","useSliderProps","clamp","getFormattedNumber","SliderThumb","values","createElement","Fragment","map","value","i","Thumb","key","currentIndex","_ref","thumbIndex","isVertical","isReverse","showStatus","attributes","allProps","shouldAnimate","id","label","min","max","step","skeleton","disabled","suffix","numberFormat","tooltip","alwaysShowTooltip","index","current","percent","style","zIndex","number","aria","showTooltip","setShowTooltip","useState","onMouseEnterHandler","onMouseLeaveHandler","elemRef","dispatchEvent","Event","e","onThumbMouseDownHandler","onThumbMouseUpHandler","onHelperChangeHandler","onHelperFocusHandler","helperParams","thumbParams","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onBlur","onFocus","event","useRef","className","_extends","type","onChange","onMouseDown","onMouseUp","undefined","element","variant","innerRef","targetElement","active","Boolean","showDelay","hideDelay"],"sources":["../../../../src/components/slider/SliderThumb.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  combineDescribedBy,\n  combineLabelledBy,\n  validateDOMAttributes,\n  warn,\n} from '../../shared/component-helper'\nimport Button from '../button/Button'\nimport Tooltip from '../tooltip/Tooltip'\nimport { useSliderEvents } from './hooks/useSliderEvents'\nimport { useSliderProps } from './hooks/useSliderProps'\nimport { clamp, getFormattedNumber } from './SliderHelpers'\n\nexport function SliderThumb() {\n  const { values } = useSliderProps()\n\n  return (\n    <>\n      {values.map((value, i) => {\n        return <Thumb key={i} value={value} currentIndex={i} />\n      })}\n    </>\n  )\n}\n\ntype ThumbProps = {\n  value: number\n  currentIndex: number\n}\n\nfunction Thumb({ value, currentIndex }: ThumbProps) {\n  const {\n    thumbIndex,\n    isVertical,\n    isReverse,\n    showStatus,\n    attributes,\n    allProps,\n    shouldAnimate,\n  } = useSliderProps()\n\n  const {\n    id,\n    label,\n    min,\n    max,\n    step,\n    skeleton,\n    disabled,\n    suffix,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n  } = allProps\n\n  const index = thumbIndex.current\n  let percent = clamp(((value - min) * 100) / (max - min))\n\n  if (isReverse) {\n    percent = 100 - percent\n  }\n\n  const style = {\n    zIndex: index === currentIndex ? 4 : 3,\n    [`${isVertical ? 'top' : 'left'}`]: `${percent}%`,\n  } as React.CSSProperties\n\n  const { number, aria } = getFormattedNumber(value, numberFormat)\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n  const onMouseEnterHandler = () => {\n    setShowTooltip(true)\n  }\n  const onMouseLeaveHandler = () => {\n    setShowTooltip(false)\n    try {\n      elemRef.current.dispatchEvent(new Event('mouseleave'))\n    } catch (e) {\n      warn(e)\n    }\n  }\n\n  const {\n    onThumbMouseDownHandler,\n    onThumbMouseUpHandler,\n    onHelperChangeHandler,\n    onHelperFocusHandler,\n  } = useSliderEvents()\n\n  const helperParams: Record<string, unknown> = {}\n\n  if (label) {\n    helperParams['aria-labelledby'] = combineLabelledBy(\n      helperParams,\n      label ? id + '-label' : null\n    )\n  }\n\n  if (showStatus || suffix) {\n    helperParams['aria-describedby'] = combineDescribedBy(\n      helperParams,\n      showStatus ? id + '-status' : null,\n      suffix ? id + '-suffix' : null\n    )\n  }\n\n  const thumbParams = attributes as Record<string, unknown>\n\n  if (tooltip) {\n    thumbParams.onMouseEnter = onMouseEnterHandler\n    thumbParams.onMouseLeave = onMouseLeaveHandler\n    thumbParams.onTouchStart = onMouseEnterHandler\n    thumbParams.onTouchEnd = onMouseLeaveHandler\n    helperParams.onBlur = onMouseLeaveHandler\n    helperParams.onFocus = (event) => {\n      onHelperFocusHandler(event)\n      onMouseEnterHandler()\n      try {\n        elemRef.current.dispatchEvent(new Event('mouseenter'))\n      } catch (e) {\n        warn(e)\n      }\n    }\n  }\n  validateDOMAttributes(allProps, thumbParams) // because we send along rest attributes\n\n  const elemRef = React.useRef<HTMLElement>()\n\n  return (\n    <span className=\"dnb-slider__thumb\" style={style}>\n      <input\n        id={`${id}-thumb-${currentIndex}`}\n        type=\"range\"\n        className=\"dnb-slider__button-helper\"\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        disabled={disabled}\n        onChange={onHelperChangeHandler}\n        onFocus={onHelperFocusHandler}\n        onMouseDown={onThumbMouseDownHandler}\n        onMouseUp={onThumbMouseUpHandler}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-valuetext={aria ? aria : undefined}\n        aria-orientation={isVertical ? 'vertical' : 'horizontal'}\n        data-index={currentIndex}\n        {...helperParams}\n      />\n\n      <Button\n        id={`${id}-button-${currentIndex}`}\n        element=\"span\"\n        type=\"\" // avoid getting type=\"button\"\n        variant=\"secondary\"\n        disabled={disabled}\n        skeleton={skeleton}\n        innerRef={elemRef}\n        {...thumbParams}\n      />\n\n      {tooltip && (\n        <Tooltip\n          key={`group-${currentIndex}`}\n          targetElement={elemRef}\n          active={Boolean(showTooltip || alwaysShowTooltip)}\n          showDelay={1}\n          hideDelay={300}\n        >\n          {number || value}\n          {\n            shouldAnimate /* Use \"shouldAnimate\" only in order to update the position after the thumb animation */\n          }\n        </Tooltip>\n      )}\n    </span>\n  )\n}\n"],"mappings":"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"}

package/components/step-indicator/StepIndicator.js

@@ -1,3 +1,5 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
@@ -5,12 +7,13 @@ var _div;
 const _excluded = ["data", "skeleton", "current_step", "hide_numbers", "no_animation"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React from 'react';
-import { makeUniqueId, warn } from '../../shared/component-helper';
+import React, { useEffect } from 'react';
+import { warn } from '../../shared/component-helper';
 import StepIndicatorSidebar from './StepIndicatorSidebar';
 import StepIndicatorModal from './StepIndicatorModal';
 import { StepIndicatorProvider } from './StepIndicatorContext';
 import { stepIndicatorDefaultProps } from './StepIndicatorProps';
+import useId from '../../shared/helpers/useId';
 function StepIndicator(_ref) {
   let {
       data = stepIndicatorDefaultProps.data,
@@ -27,10 +30,12 @@ function StepIndicator(_ref) {
     hide_numbers,
     no_animation
   }, restOfProps);
-  const sidebarId = props.sidebar_id || makeUniqueId();
-  if (!props.sidebar_id && props.mode) {
-    warn('StepIndicator needs an unique "sidebar_id" property, also on the <StepIndicator.Sidebar... />');
-  }
+  const sidebarId = useId(props.sidebar_id);
+  useEffect(() => {
+    if (!props.sidebar_id && props.mode) {
+      warn('StepIndicator needs an unique "sidebar_id" property, also on the <StepIndicator.Sidebar... />');
+    }
+  }, [props.mode, props.sidebar_id]);
   return React.createElement(StepIndicatorProvider, _extends({}, props, {
     sidebar_id: sidebarId
   }), _div || (_div = React.createElement("div", {

package/components/step-indicator/StepIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepIndicator.js","names":["React","makeUniqueId","warn","StepIndicatorSidebar","StepIndicatorModal","StepIndicatorProvider","stepIndicatorDefaultProps","StepIndicator","_ref","data","skeleton","current_step","hide_numbers","no_animation","restOfProps","_objectWithoutProperties","_excluded","props","_objectSpread","sidebarId","sidebar_id","mode","createElement","_extends","_div","className","Sidebar","_supportsSpacingProps"],"sources":["../../../../src/components/step-indicator/StepIndicator.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport React from 'react'\n\nimport { makeUniqueId, warn } from '../../shared/component-helper'\nimport StepIndicatorSidebar from './StepIndicatorSidebar'\n\nimport StepIndicatorModal from './StepIndicatorModal'\nimport {\n  StepIndicatorContextValues,\n  StepIndicatorProvider,\n} from './StepIndicatorContext'\n\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\nimport type {\n  StepIndicatorItemProps,\n  StepItemWrapper,\n} from './StepIndicatorItem'\nimport { stepIndicatorDefaultProps } from './StepIndicatorProps'\n\nexport type StepIndicatorMode = 'static' | 'strict' | 'loose'\nexport type StepIndicatorDataItem = Pick<\n  StepIndicatorItemProps,\n  | 'title'\n  | 'is_current'\n  | 'inactive'\n  | 'disabled'\n  | 'status'\n  | 'status_state'\n  | 'on_click'\n  | 'on_render'\n>\nexport type StepIndicatorData = string | string[] | StepIndicatorDataItem[]\n\nexport type StepIndicatorMouseEvent = {\n  event: React.MouseEvent<HTMLButtonElement>\n  item: StepIndicatorItemProps\n  currentStep: number\n  current_step: number\n}\n\nexport type StepIndicatorRenderCallback = {\n  StepItem: typeof StepItemWrapper\n  element: React.ReactNode\n  attributes: React.HTMLProps<HTMLElement>\n  props: StepIndicatorItemProps\n  context: StepIndicatorContextValues\n}\n\nexport type StepIndicatorProps = Omit<\n  React.HTMLProps<HTMLAnchorElement>,\n  'ref' | 'data'\n> &\n  SpacingProps & {\n    /**\n     * <em>(required with `<StepIndicator.Sidebar />`)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.\n     */\n    sidebar_id?: string\n    /**\n     * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.\n     */\n    mode: StepIndicatorMode\n    /**\n     * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.\n     */\n    data: StepIndicatorData\n    /**\n     *  The title shown inside the `<StepIndicatorModal />` supplemental screen reader text for the `<StepIndicatorTriggerButton />`\n     *  Defaults to `Steps Overview`\n     */\n    overview_title?: string\n    /**\n     *  The label for `<StepIndicatorTriggerButton />` and supplemental screen reader text for `<StepIndicatorItem />`\n     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps\n     * `%step` is used to place the current step into the text\n     * `%count` is used to place the step total into the text\n     *  Defaults to `Step %step of %count`\n     */\n    step_title?: string\n    /**\n     *  A descriptive label used in `<StepIndicatorModal />`\n     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps\n     * `%step` is used to place the current step into the text\n     * `%count` is used to place the step total into the text\n     *  Defaults to `You are on step %step of %count`\n     */\n    step_title_extended?: string\n    /**\n     * Defines the active number marked step starting by 0. Defaults to `0`.\n     */\n    current_step?: number\n    /**\n     * Define whether to show automatically counted numbers or not. Defaults to `false`.\n     */\n    hide_numbers?: boolean\n    /**\n     * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step, currentStep }`.\n     */\n    on_click?: ({\n      event,\n      item,\n      current_step,\n      currentStep,\n    }: StepIndicatorMouseEvent) => void\n    /**\n     * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.\n     */\n    on_item_render?: ({\n      StepItem,\n      element,\n      attributes,\n      props,\n      context,\n    }: StepIndicatorRenderCallback) => React.ReactNode\n    /**\n     * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step, currentStep }`.\n     */\n    on_change?: ({\n      event,\n      item,\n      current_step,\n      currentStep,\n    }: StepIndicatorMouseEvent) => void\n\n    /**\n     * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to `false`.\n     */\n    no_animation?: boolean\n    skeleton?: SkeletonShow\n    className?: string\n    children?: React.ReactNode\n  }\n\nfunction StepIndicator({\n  data = stepIndicatorDefaultProps.data,\n  skeleton = stepIndicatorDefaultProps.skeleton,\n  current_step = stepIndicatorDefaultProps.current_step,\n  hide_numbers = stepIndicatorDefaultProps.hide_numbers,\n  no_animation = stepIndicatorDefaultProps.no_animation,\n  ...restOfProps\n}: StepIndicatorProps) {\n  const props = {\n    data,\n    skeleton,\n    current_step,\n    hide_numbers,\n    no_animation,\n    ...restOfProps,\n  }\n\n  const sidebarId = props.sidebar_id || makeUniqueId()\n\n  if (!props.sidebar_id && props.mode) {\n    warn(\n      'StepIndicator needs an unique \"sidebar_id\" property, also on the <StepIndicator.Sidebar... />'\n    )\n  }\n\n  return (\n    <StepIndicatorProvider {...props} sidebar_id={sidebarId}>\n      <div className=\"dnb-step-indicator-wrapper\">\n        <StepIndicatorModal />\n      </div>\n    </StepIndicatorProvider>\n  )\n}\n\nStepIndicator.Sidebar = StepIndicatorSidebar\n\nStepIndicator._supportsSpacingProps = true\n\nexport default StepIndicator\n"],"mappings":";;;;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,EAAEC,IAAI,QAAQ,+BAA+B;AAClE,OAAOC,oBAAoB,MAAM,wBAAwB;AAEzD,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,SAEEC,qBAAqB,QAChB,wBAAwB;AAQ/B,SAASC,yBAAyB,QAAQ,sBAAsB;AAmHhE,SAASC,aAAaA,CAAAC,IAAA,EAOC;EAAA,IAPA;MACrBC,IAAI,GAAGH,yBAAyB,CAACG,IAAI;MACrCC,QAAQ,GAAGJ,yBAAyB,CAACI,QAAQ;MAC7CC,YAAY,GAAGL,yBAAyB,CAACK,YAAY;MACrDC,YAAY,GAAGN,yBAAyB,CAACM,YAAY;MACrDC,YAAY,GAAGP,yBAAyB,CAACO;IAEvB,CAAC,GAAAL,IAAA;IADhBM,WAAW,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAEd,MAAMC,KAAK,GAAAC,aAAA;IACTT,IAAI;IACJC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC;EAAY,GACTC,WAAW,CACf;EAED,MAAMK,SAAS,GAAGF,KAAK,CAACG,UAAU,IAAInB,YAAY,CAAC,CAAC;EAEpD,IAAI,CAACgB,KAAK,CAACG,UAAU,IAAIH,KAAK,CAACI,IAAI,EAAE;IACnCnB,IAAI,CACF,+FACF,CAAC;EACH;EAEA,OACEF,KAAA,CAAAsB,aAAA,CAACjB,qBAAqB,EAAAkB,QAAA,KAAKN,KAAK;IAAEG,UAAU,EAAED;EAAU,IAAAK,IAAA,KAAAA,IAAA,GACtDxB,KAAA,CAAAsB,aAAA;IAAKG,SAAS,EAAC;EAA4B,GACzCzB,KAAA,CAAAsB,aAAA,CAAClB,kBAAkB,MAAE,CAClB,CAAC,CACe,CAAC;AAE5B;AAEAG,aAAa,CAACmB,OAAO,GAAGvB,oBAAoB;AAE5CI,aAAa,CAACoB,qBAAqB,GAAG,IAAI;AAE1C,eAAepB,aAAa"}
+{"version":3,"file":"StepIndicator.js","names":["React","useEffect","warn","StepIndicatorSidebar","StepIndicatorModal","StepIndicatorProvider","stepIndicatorDefaultProps","useId","StepIndicator","_ref","data","skeleton","current_step","hide_numbers","no_animation","restOfProps","_objectWithoutProperties","_excluded","props","_objectSpread","sidebarId","sidebar_id","mode","createElement","_extends","_div","className","Sidebar","_supportsSpacingProps"],"sources":["../../../../src/components/step-indicator/StepIndicator.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport React, { useEffect } from 'react'\n\nimport { warn } from '../../shared/component-helper'\nimport StepIndicatorSidebar from './StepIndicatorSidebar'\n\nimport StepIndicatorModal from './StepIndicatorModal'\nimport {\n  StepIndicatorContextValues,\n  StepIndicatorProvider,\n} from './StepIndicatorContext'\n\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\nimport type {\n  StepIndicatorItemProps,\n  StepItemWrapper,\n} from './StepIndicatorItem'\nimport { stepIndicatorDefaultProps } from './StepIndicatorProps'\nimport useId from '../../shared/helpers/useId'\n\nexport type StepIndicatorMode = 'static' | 'strict' | 'loose'\nexport type StepIndicatorDataItem = Pick<\n  StepIndicatorItemProps,\n  | 'title'\n  | 'is_current'\n  | 'inactive'\n  | 'disabled'\n  | 'status'\n  | 'status_state'\n  | 'on_click'\n  | 'on_render'\n>\nexport type StepIndicatorData = string | string[] | StepIndicatorDataItem[]\n\nexport type StepIndicatorMouseEvent = {\n  event: React.MouseEvent<HTMLButtonElement>\n  item: StepIndicatorItemProps\n  currentStep: number\n  current_step: number\n}\n\nexport type StepIndicatorRenderCallback = {\n  StepItem: typeof StepItemWrapper\n  element: React.ReactNode\n  attributes: React.HTMLProps<HTMLElement>\n  props: StepIndicatorItemProps\n  context: StepIndicatorContextValues\n}\n\nexport type StepIndicatorProps = Omit<\n  React.HTMLProps<HTMLAnchorElement>,\n  'ref' | 'data'\n> &\n  SpacingProps & {\n    /**\n     * <em>(required with `<StepIndicator.Sidebar />`)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.\n     */\n    sidebar_id?: string\n    /**\n     * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.\n     */\n    mode: StepIndicatorMode\n    /**\n     * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.\n     */\n    data: StepIndicatorData\n    /**\n     *  The title shown inside the `<StepIndicatorModal />` supplemental screen reader text for the `<StepIndicatorTriggerButton />`\n     *  Defaults to `Steps Overview`\n     */\n    overview_title?: string\n    /**\n     *  The label for `<StepIndicatorTriggerButton />` and supplemental screen reader text for `<StepIndicatorItem />`\n     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps\n     * `%step` is used to place the current step into the text\n     * `%count` is used to place the step total into the text\n     *  Defaults to `Step %step of %count`\n     */\n    step_title?: string\n    /**\n     *  A descriptive label used in `<StepIndicatorModal />`\n     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps\n     * `%step` is used to place the current step into the text\n     * `%count` is used to place the step total into the text\n     *  Defaults to `You are on step %step of %count`\n     */\n    step_title_extended?: string\n    /**\n     * Defines the active number marked step starting by 0. Defaults to `0`.\n     */\n    current_step?: number\n    /**\n     * Define whether to show automatically counted numbers or not. Defaults to `false`.\n     */\n    hide_numbers?: boolean\n    /**\n     * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step, currentStep }`.\n     */\n    on_click?: ({\n      event,\n      item,\n      current_step,\n      currentStep,\n    }: StepIndicatorMouseEvent) => void\n    /**\n     * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.\n     */\n    on_item_render?: ({\n      StepItem,\n      element,\n      attributes,\n      props,\n      context,\n    }: StepIndicatorRenderCallback) => React.ReactNode\n    /**\n     * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step, currentStep }`.\n     */\n    on_change?: ({\n      event,\n      item,\n      current_step,\n      currentStep,\n    }: StepIndicatorMouseEvent) => void\n\n    /**\n     * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to `false`.\n     */\n    no_animation?: boolean\n    skeleton?: SkeletonShow\n    className?: string\n    children?: React.ReactNode\n  }\n\nfunction StepIndicator({\n  data = stepIndicatorDefaultProps.data,\n  skeleton = stepIndicatorDefaultProps.skeleton,\n  current_step = stepIndicatorDefaultProps.current_step,\n  hide_numbers = stepIndicatorDefaultProps.hide_numbers,\n  no_animation = stepIndicatorDefaultProps.no_animation,\n  ...restOfProps\n}: StepIndicatorProps) {\n  const props = {\n    data,\n    skeleton,\n    current_step,\n    hide_numbers,\n    no_animation,\n    ...restOfProps,\n  }\n\n  const sidebarId = useId(props.sidebar_id)\n\n  useEffect(() => {\n    if (!props.sidebar_id && props.mode) {\n      warn(\n        'StepIndicator needs an unique \"sidebar_id\" property, also on the <StepIndicator.Sidebar... />'\n      )\n    }\n  }, [props.mode, props.sidebar_id])\n\n  return (\n    <StepIndicatorProvider {...props} sidebar_id={sidebarId}>\n      <div className=\"dnb-step-indicator-wrapper\">\n        <StepIndicatorModal />\n      </div>\n    </StepIndicatorProvider>\n  )\n}\n\nStepIndicator.Sidebar = StepIndicatorSidebar\n\nStepIndicator._supportsSpacingProps = true\n\nexport default StepIndicator\n"],"mappings":";;;;;;;;;AAKA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AAExC,SAASC,IAAI,QAAQ,+BAA+B;AACpD,OAAOC,oBAAoB,MAAM,wBAAwB;AAEzD,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,SAEEC,qBAAqB,QAChB,wBAAwB;AAQ/B,SAASC,yBAAyB,QAAQ,sBAAsB;AAChE,OAAOC,KAAK,MAAM,4BAA4B;AAmH9C,SAASC,aAAaA,CAAAC,IAAA,EAOC;EAAA,IAPA;MACrBC,IAAI,GAAGJ,yBAAyB,CAACI,IAAI;MACrCC,QAAQ,GAAGL,yBAAyB,CAACK,QAAQ;MAC7CC,YAAY,GAAGN,yBAAyB,CAACM,YAAY;MACrDC,YAAY,GAAGP,yBAAyB,CAACO,YAAY;MACrDC,YAAY,GAAGR,yBAAyB,CAACQ;IAEvB,CAAC,GAAAL,IAAA;IADhBM,WAAW,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAEd,MAAMC,KAAK,GAAAC,aAAA;IACTT,IAAI;IACJC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC;EAAY,GACTC,WAAW,CACf;EAED,MAAMK,SAAS,GAAGb,KAAK,CAACW,KAAK,CAACG,UAAU,CAAC;EAEzCpB,SAAS,CAAC,MAAM;IACd,IAAI,CAACiB,KAAK,CAACG,UAAU,IAAIH,KAAK,CAACI,IAAI,EAAE;MACnCpB,IAAI,CACF,+FACF,CAAC;IACH;EACF,CAAC,EAAE,CAACgB,KAAK,CAACI,IAAI,EAAEJ,KAAK,CAACG,UAAU,CAAC,CAAC;EAElC,OACErB,KAAA,CAAAuB,aAAA,CAAClB,qBAAqB,EAAAmB,QAAA,KAAKN,KAAK;IAAEG,UAAU,EAAED;EAAU,IAAAK,IAAA,KAAAA,IAAA,GACtDzB,KAAA,CAAAuB,aAAA;IAAKG,SAAS,EAAC;EAA4B,GACzC1B,KAAA,CAAAuB,aAAA,CAACnB,kBAAkB,MAAE,CAClB,CAAC,CACe,CAAC;AAE5B;AAEAI,aAAa,CAACmB,OAAO,GAAGxB,oBAAoB;AAE5CK,aAAa,CAACoB,qBAAqB,GAAG,IAAI;AAE1C,eAAepB,aAAa"}

package/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.css

@@ -55,7 +55,7 @@ html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__i
 .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon {
   align-self: flex-start;
   margin-top: 1rem;
-  margin-right: 0.75rem;
+  margin-right: 0.25rem;
 }
 .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number, .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
   font-weight: var(--font-weight-basis);

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

@@ -1 +1 @@
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button{--border-color:var(--color-sea-green);--border-width:0.125rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);font-weight:var(--font-weight-medium)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--visited .dnb-button{background-color:var(--color-pistachio)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button{cursor:text;pointer-events:auto;-webkit-user-select:initial;user-select:auto}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-20);--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-black-80)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-80);--border-width:0.125rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button:not([disabled]):not(:active):not(:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green)}.dnb-step-indicator-wrapper .dnb-step-indicator__label,.dnb-step-indicator-wrapper .dnb-step-indicator__label.dnb-p{font-size:var(--font-size-small);margin-bottom:.5rem}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status.dnb-button--secondary{background-color:var(--color-sand-yellow)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--error.dnb-button--secondary{background-color:var(--color-fire-red-8)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary{background-color:var(--color-pistachio)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon{align-self:flex-start;margin-right:.75rem;margin-top:1rem}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number,.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{font-weight:var(--font-weight-basis)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{color:var(--color-black-80);font-size:var(--font-size-x-small);line-height:var(--font-size-basis);margin-top:.5rem}
+.dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button{--border-color:var(--color-sea-green);--border-width:0.125rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);font-weight:var(--font-weight-medium)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--visited .dnb-button{background-color:var(--color-pistachio)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button{cursor:text;pointer-events:auto;-webkit-user-select:initial;user-select:auto}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-20);--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-black-80)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-80);--border-width:0.125rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button:not([disabled]):not(:active):not(:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green)}.dnb-step-indicator-wrapper .dnb-step-indicator__label,.dnb-step-indicator-wrapper .dnb-step-indicator__label.dnb-p{font-size:var(--font-size-small);margin-bottom:.5rem}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status.dnb-button--secondary{background-color:var(--color-sand-yellow)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--error.dnb-button--secondary{background-color:var(--color-fire-red-8)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary{background-color:var(--color-pistachio)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon{align-self:flex-start;margin-right:.25rem;margin-top:1rem}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number,.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{font-weight:var(--font-weight-basis)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{color:var(--color-black-80);font-size:var(--font-size-x-small);line-height:var(--font-size-basis);margin-top:.5rem}

package/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss

@@ -74,7 +74,7 @@
     .dnb-button__icon {
       align-self: flex-start;
       margin-top: 1rem;
-      margin-right: 0.75rem;
+      margin-right: 0.25rem;
     }
 
     .dnb-step-indicator__item-content {

package/components/table/TableScrollView.d.ts

@@ -8,4 +8,8 @@ export type TableScrollViewProps = {
     children: React.ReactElement<HTMLTableElement>;
 };
 export type TableScrollViewAllProps = TableScrollViewProps & Omit<React.TableHTMLAttributes<HTMLDivElement>, 'children'> & SpacingProps & ScrollViewAllProps;
-export default function TableScrollView(props: TableScrollViewAllProps): import("react/jsx-runtime").JSX.Element;
+declare function TableScrollView(props: TableScrollViewAllProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TableScrollView {
+    var _supportsSpacingProps: boolean;
+}
+export default TableScrollView;

package/components/table/TableScrollView.js

@@ -15,4 +15,5 @@ export default function TableScrollView(props) {
     interactive: "auto"
   }, rest), children);
 }
+TableScrollView._supportsSpacingProps = true;
 //# sourceMappingURL=TableScrollView.js.map