@dnb/eufemia 10.22.0 → 10.23.0

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

@@ -4,7 +4,4 @@
  */
 .dnb-form-label {
   color: var(--sb-color-text);
-}
-.dnb-checkbox .dnb-form-label[for]:not([disabled]), .dnb-switch .dnb-form-label[for]:not([disabled]), .dnb-radio .dnb-form-label[for]:not([disabled]) {
-  cursor: pointer;
 }

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

@@ -1 +1 @@
-.dnb-form-label{color:var(--sb-color-text)}.dnb-checkbox .dnb-form-label[for]:not([disabled]),.dnb-radio .dnb-form-label[for]:not([disabled]),.dnb-switch .dnb-form-label[for]:not([disabled]){cursor:pointer}
+.dnb-form-label{color:var(--sb-color-text)}

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

@@ -5,12 +5,4 @@
 
 .dnb-form-label {
   color: var(--sb-color-text);
-
-  .dnb-checkbox &,
-  .dnb-switch &,
-  .dnb-radio & {
-    &[for]:not([disabled]) {
-      cursor: pointer;
-    }
-  }
 }

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

@@ -4,10 +4,4 @@
  */
 .dnb-form-label {
   color: var(--color-black-80);
-}
-.dnb-form-label--interactive {
-  cursor: pointer;
-}
-.dnb-form-label--interactive:hover {
-  color: var(--color-sea-green);
 }

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

@@ -1 +1 @@
-.dnb-form-label{color:var(--color-black-80)}.dnb-form-label--interactive{cursor:pointer}.dnb-form-label--interactive:hover{color:var(--color-sea-green)}
+.dnb-form-label{color:var(--color-black-80)}

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

@@ -5,12 +5,4 @@
 
 .dnb-form-label {
   color: var(--color-black-80);
-
-  &--interactive {
-    cursor: pointer;
-
-    &:hover {
-      color: var(--color-sea-green);
-    }
-  }
 }

package/cjs/components/heading/HeadingContext.d.ts

@@ -8,5 +8,5 @@ import { HeadingProps } from './Heading';
 export type HeadingContextProps = {
     heading?: HeadingProps;
 } & SkeletonContextProps;
-declare const HeadingContext: React.Context<HeadingContextProps>;
+declare const HeadingContext: React.Context<any>;
 export default HeadingContext;

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/components/slider/SliderInstance.js

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

package/cjs/components/slider/SliderInstance.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderInstance.js","names":["_react","_interopRequireDefault","require","_classnames","_componentHelper","_AlignmentHelper2","_SpacingHelper","_SkeletonHelper","_Context","_Suffix","_Button","_FormLabel","_FormStatus","_SliderTrack","_SliderThumb2","_useSliderProps","_SliderHelpers","_excluded","_SubtractButton","_AddButton","_AlignmentHelper","_SliderThumb","_SliderTrackBefore","_SliderTrackAfter","_SliderSuffix","obj","__esModule","default","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","_extends","assign","bind","arguments","hasOwnProperty","apply","SliderInstance","context","React","useContext","Context","isReverse","isVertical","showButtons","showStatus","shouldAnimate","allProps","useSliderProps","id","label","labelSrOnly","labelDirection","status","statusProps","statusState","statusNoAnimation","globalStatus","stretch","skeleton","disabled","className","extensions","mainParams","classnames","createSkeletonClass","createSpacingClasses","isTrue","subtractButton","createElement","SubtractButton","addButton","AddButton","skeletonDOMAttributes","text","srOnly","show","text_id","state","no_animation","SliderMainTrack","entries","map","_ref2","_ref","instance","options","Element","SliderThumb","SliderTrackBefore","SliderTrackAfter","SliderSuffix","suffix","emitChange","value","attributes","step","min","max","subtractTitle","numberFormat","onSubtractClickHandler","event","clamp","subtractParams","humanNumber","getFormattedNumber","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","_interopRequireDefault","require","_classnames","_componentHelper","_AlignmentHelper2","_SpacingHelper","_SkeletonHelper","_Context","_Suffix","_Button","_FormLabel","_FormStatus","_SliderTrack","_SliderThumb2","_useSliderProps","_SliderHelpers","_excluded","_SubtractButton","_AddButton","_AlignmentHelper","_SliderThumb","_SliderTrackBefore","_SliderTrackAfter","_SliderSuffix","obj","__esModule","default","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","_extends","assign","bind","arguments","hasOwnProperty","apply","SliderInstance","context","React","useContext","Context","isReverse","isVertical","showButtons","showStatus","shouldAnimate","allProps","useSliderProps","id","label","labelSrOnly","labelDirection","status","statusProps","statusState","statusNoAnimation","globalStatus","stretch","skeleton","disabled","className","extensions","mainParams","classnames","createSkeletonClass","createSpacingClasses","isTrue","subtractButton","createElement","SubtractButton","addButton","AddButton","skeletonDOMAttributes","forId","text","srOnly","show","text_id","state","no_animation","SliderMainTrack","entries","map","_ref2","_ref","instance","options","Element","SliderThumb","SliderTrackBefore","SliderTrackAfter","SliderSuffix","suffix","emitChange","value","attributes","step","min","max","subtractTitle","numberFormat","onSubtractClickHandler","event","clamp","subtractParams","humanNumber","getFormattedNumber","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/cjs/components/slider/SliderThumb.js

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

package/cjs/components/slider/SliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderThumb.js","names":["_react","_interopRequireDefault","require","_componentHelper","_Button","_Tooltip","_useSliderEvents","_useSliderProps","_SliderHelpers","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","SliderThumb","values","useSliderProps","createElement","Fragment","map","value","Thumb","currentIndex","_ref","thumbIndex","isVertical","isReverse","showStatus","attributes","allProps","shouldAnimate","id","label","min","max","step","skeleton","disabled","suffix","numberFormat","tooltip","alwaysShowTooltip","index","current","percent","clamp","style","zIndex","number","aria","getFormattedNumber","showTooltip","setShowTooltip","React","useState","onMouseEnterHandler","onMouseLeaveHandler","elemRef","dispatchEvent","Event","e","warn","onThumbMouseDownHandler","onThumbMouseUpHandler","onHelperChangeHandler","onHelperFocusHandler","useSliderEvents","helperParams","combineLabelledBy","combineDescribedBy","thumbParams","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onBlur","onFocus","event","validateDOMAttributes","useRef","className","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","_interopRequireDefault","require","_componentHelper","_Button","_Tooltip","_useSliderEvents","_useSliderProps","_SliderHelpers","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","SliderThumb","values","useSliderProps","createElement","Fragment","map","value","Thumb","currentIndex","_ref","thumbIndex","isVertical","isReverse","showStatus","attributes","allProps","shouldAnimate","id","label","min","max","step","skeleton","disabled","suffix","numberFormat","tooltip","alwaysShowTooltip","index","current","percent","clamp","style","zIndex","number","aria","getFormattedNumber","showTooltip","setShowTooltip","React","useState","onMouseEnterHandler","onMouseLeaveHandler","elemRef","dispatchEvent","Event","e","warn","onThumbMouseDownHandler","onThumbMouseUpHandler","onHelperChangeHandler","onHelperFocusHandler","useSliderEvents","helperParams","combineLabelledBy","combineDescribedBy","thumbParams","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onBlur","onFocus","event","validateDOMAttributes","useRef","className","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/cjs/components/step-indicator/StepIndicator.js

@@ -1,18 +1,22 @@
 "use strict";
+"use client";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _componentHelper = require("../../shared/component-helper");
 var _StepIndicatorSidebar = _interopRequireDefault(require("./StepIndicatorSidebar"));
 var _StepIndicatorModal = _interopRequireDefault(require("./StepIndicatorModal"));
 var _StepIndicatorContext = require("./StepIndicatorContext");
 var _StepIndicatorProps = require("./StepIndicatorProps");
+var _useId = _interopRequireDefault(require("../../shared/helpers/useId"));
 var _div;
 const _excluded = ["data", "skeleton", "current_step", "hide_numbers", "no_animation"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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; }
@@ -37,10 +41,12 @@ function StepIndicator(_ref) {
     hide_numbers,
     no_animation
   }, restOfProps);
-  const sidebarId = props.sidebar_id || (0, _componentHelper.makeUniqueId)();
-  if (!props.sidebar_id && props.mode) {
-    (0, _componentHelper.warn)('StepIndicator needs an unique "sidebar_id" property, also on the <StepIndicator.Sidebar... />');
-  }
+  const sidebarId = (0, _useId.default)(props.sidebar_id);
+  (0, _react.useEffect)(() => {
+    if (!props.sidebar_id && props.mode) {
+      (0, _componentHelper.warn)('StepIndicator needs an unique "sidebar_id" property, also on the <StepIndicator.Sidebar... />');
+    }
+  }, [props.mode, props.sidebar_id]);
   return _react.default.createElement(_StepIndicatorContext.StepIndicatorProvider, _extends({}, props, {
     sidebar_id: sidebarId
   }), _div || (_div = _react.default.createElement("div", {