@dnb/eufemia 10.32.0 → 10.34.0

package/es/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);--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}.dnb-radio-group fieldset{border:none;margin:0;padding:0}.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{-moz-column-gap:var(--radio-group-margin-right);column-gap:var(--radio-group-margin-right);display:flex;flex-wrap:wrap;row-gap:var(--radio-group-margin-bottom)}.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__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-dot--medium:0.75rem;--radio-dot--large:1.125rem;--radio-width--large:2rem;--radio-height--large:2rem;--radio-border-width:0.09375rem;--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-border-width--disabled:0.125rem;--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-border-width--hover:0.125rem;--radio-border-width-on--hover:0.125rem;--radio-color-dot-on--hover:#d3d3d3;--radio-color-background-on--hover:#d3d3d3;--radio-color-background-off--hover:#d3d3d3;--radio-border-width--focus:0.125rem;--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:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio__dot{background-color:var(--radio-color-dot-on);border-radius:50%;height:var(--radio-dot--medium);transition:opacity .2s ease-out,transform .2s ease-out;width:var(--radio-dot--medium)}.dnb-radio--large .dnb-radio__dot{height:var(--radio-dot--large);width:var(--radio-dot--large)}.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}.dnb-radio-group fieldset{border:none;margin:0;padding:0}.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{-moz-column-gap:var(--radio-group-margin-right);column-gap:var(--radio-group-margin-right);display:flex;flex-wrap:wrap;row-gap:var(--radio-group-margin-bottom)}.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__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]~.dnb-radio__button{border-width:var(--radio-border-width--disabled)}.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);border-width:var(--radio-border-width-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);border-width:var(--radio-border-width--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/es/components/radio/style/dnb-radio.scss

@@ -11,16 +11,19 @@
 }
 
 .dnb-radio {
+  --radio-dot--medium: 0.75rem;
+  --radio-dot--large: 1.125rem;
   --radio-width--large: 2rem;
   --radio-height--large: 2rem;
-  --radio-border-width: 0.125rem;
   // Normal state
+  --radio-border-width: 0.09375rem;
   --radio-color-dot-on: black;
   --radio-color-background-on: white;
   --radio-color-border-on: black;
   --radio-color-background-off: white;
   --radio-color-border-off: black;
   // Disabled state
+  --radio-border-width--disabled: 0.125rem;
   --radio-color-dot-on--disabled: lightgrey;
   --radio-color-background--disabled: white;
   --radio-color-border-on--disabled: lightgrey;
@@ -31,10 +34,13 @@
   --radio-color-background-off--active: lightgrey;
   --radio-color-border-off--active: transparent;
   // Hover state
+  --radio-border-width--hover: 0.125rem;
+  --radio-border-width-on--hover: 0.125rem;
   --radio-color-dot-on--hover: lightgrey;
   --radio-color-background-on--hover: lightgrey;
   --radio-color-background-off--hover: lightgrey;
   // Focus state
+  --radio-border-width--focus: 0.125rem;
   --radio-color-background-on--focus: var(--color-white);
   --radio-color-background-off--focus: lightgrey;
   // Error state
@@ -98,14 +104,14 @@
     border-radius: 50%;
 
     .dnb-radio--large & {
-      width: calc(var(--radio-width--large) - 0.125rem);
-      height: calc(var(--radio-height--large) - 0.125rem);
+      width: var(--radio-width--large);
+      height: var(--radio-height--large);
     }
   }
 
   &__dot {
-    width: calc(var(--radio-width--medium) - 0.75rem);
-    height: calc(var(--radio-height--medium) - 0.75rem);
+    width: var(--radio-dot--medium);
+    height: var(--radio-dot--medium);
     border-radius: 50%;
     background-color: var(--radio-color-dot-on);
     transition:
@@ -113,8 +119,8 @@
       transform 200ms ease-out;
 
     .dnb-radio--large & {
-      width: calc(var(--radio-width--large) - 0.875rem);
-      height: calc(var(--radio-height--large) - 0.875rem);
+      width: var(--radio-dot--large);
+      height: var(--radio-dot--large);
     }
   }
 
@@ -321,6 +327,11 @@
 
   /** Disabled state **/
 
+  // General
+  &__input[disabled] ~ &__button {
+    border-width: var(--radio-border-width--disabled);
+  }
+
   // On
   &__input[disabled]:checked ~ &__button,
   &__input[disabled][data-checked='true'] ~ &__button {
@@ -380,6 +391,7 @@
   &__input:not([disabled]):not(:focus)[data-checked='true']:hover
     ~ &__button {
     background-color: var(--radio-color-background-on--hover);
+    border-width: var(--radio-border-width-on--hover);
   }
 
   // Off
@@ -388,6 +400,7 @@
     ):hover
     ~ &__button {
     background-color: var(--radio-color-background-off--hover);
+    border-width: var(--radio-border-width--hover);
   }
 
   /** Focus state **/
@@ -395,6 +408,7 @@
   // General
   &__input:not([disabled]):focus ~ &__button {
     html[data-whatinput='keyboard'] & {
+      border-width: var(--radio-border-width--focus);
       border: none;
     }
   }

package/es/components/radio/style/themes/dnb-radio-theme-sbanken.css

@@ -3,11 +3,15 @@
 *
 */
 .dnb-radio {
+  --radio-dot--medium: 0.875rem;
+  --radio-dot--large: 1.5rem;
+  --radio-border-width: 0.0625rem;
   --radio-color-dot-on: var(--sb-color-violet);
   --radio-color-background-on: var(--sb-color-white);
   --radio-color-border-on: var(--sb-color-violet);
   --radio-color-background-off: var(--sb-color-white);
   --radio-color-border-off: var(--sb-color-violet);
+  --radio-border-width--disabled: 0.0625rem;
   --radio-color-dot-on--disabled: var(--sb-color-gray-dark);
   --radio-color-background--disabled: var(--sb-color-gray-light);
   --radio-color-border-on--disabled: var(--sb-color-gray-dark);
@@ -17,8 +21,10 @@
   --radio-color-background-off--active: var(--sb-color-white);
   --radio-color-border-off--active: var(--sb-color-gray);
   --radio-color-dot-on--hover: var(--sb-color-violet);
+  --radio-border-width-on--hover: 0.0625rem;
   --radio-color-background-on--hover: var(--sb-color-violet-light-3);
   --radio-color-background-off--hover: var(--sb-color-violet-light-3);
+  --radio-border-width--focus: 0.1875rem;
   --radio-color-background-on--focus: var(--sb-color-blue-light-3);
   --radio-color-background-off--focus: var(--sb-color-blue-light-3);
   --radio-color-dot-on--error: var(--sb-color-magenta);

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

@@ -1,4 +1,4 @@
-.dnb-radio{--radio-color-dot-on:var(--sb-color-violet);--radio-color-background-on:var(--sb-color-white);--radio-color-border-on:var(--sb-color-violet);--radio-color-background-off:var(--sb-color-white);--radio-color-border-off:var(--sb-color-violet);--radio-color-dot-on--disabled:var(--sb-color-gray-dark);--radio-color-background--disabled:var(--sb-color-gray-light);--radio-color-border-on--disabled:var(--sb-color-gray-dark);--radio-color-border-off--disabled:var(--sb-color-gray-dark);--radio-color-dot-on--active:var(--sb-color-violet-light);--radio-color-border-on--active:var(--sb-color-gray-dark-2-neutral);--radio-color-background-off--active:var(--sb-color-white);--radio-color-border-off--active:var(--sb-color-gray);--radio-color-dot-on--hover:var(--sb-color-violet);--radio-color-background-on--hover:var(--sb-color-violet-light-3);--radio-color-background-off--hover:var(--sb-color-violet-light-3);--radio-color-background-on--focus:var(--sb-color-blue-light-3);--radio-color-background-off--focus:var(--sb-color-blue-light-3);--radio-color-dot-on--error:var(--sb-color-magenta);--radio-color-border-on--error:var(--sb-color-magenta);--radio-color-border--error-hover:var(--sb-color-red);--radio-color-background-off--error-hover:var(
+.dnb-radio{--radio-dot--medium:0.875rem;--radio-dot--large:1.5rem;--radio-border-width:0.0625rem;--radio-color-dot-on:var(--sb-color-violet);--radio-color-background-on:var(--sb-color-white);--radio-color-border-on:var(--sb-color-violet);--radio-color-background-off:var(--sb-color-white);--radio-color-border-off:var(--sb-color-violet);--radio-border-width--disabled:0.0625rem;--radio-color-dot-on--disabled:var(--sb-color-gray-dark);--radio-color-background--disabled:var(--sb-color-gray-light);--radio-color-border-on--disabled:var(--sb-color-gray-dark);--radio-color-border-off--disabled:var(--sb-color-gray-dark);--radio-color-dot-on--active:var(--sb-color-violet-light);--radio-color-border-on--active:var(--sb-color-gray-dark-2-neutral);--radio-color-background-off--active:var(--sb-color-white);--radio-color-border-off--active:var(--sb-color-gray);--radio-color-dot-on--hover:var(--sb-color-violet);--radio-border-width-on--hover:0.0625rem;--radio-color-background-on--hover:var(--sb-color-violet-light-3);--radio-color-background-off--hover:var(--sb-color-violet-light-3);--radio-border-width--focus:0.1875rem;--radio-color-background-on--focus:var(--sb-color-blue-light-3);--radio-color-background-off--focus:var(--sb-color-blue-light-3);--radio-color-dot-on--error:var(--sb-color-magenta);--radio-color-border-on--error:var(--sb-color-magenta);--radio-color-border--error-hover:var(--sb-color-red);--radio-color-background-off--error-hover:var(
     --sb-color-magenta-light-2
   );--radio-color-background-on--error-hover:var(
     --sb-color-magenta-light-2

package/es/components/radio/style/themes/dnb-radio-theme-sbanken.scss

@@ -4,13 +4,17 @@
 */
 
 .dnb-radio {
+  --radio-dot--medium: 0.875rem;
+  --radio-dot--large: 1.5rem;
   // Normal state
+  --radio-border-width: 0.0625rem;
   --radio-color-dot-on: var(--sb-color-violet);
   --radio-color-background-on: var(--sb-color-white);
   --radio-color-border-on: var(--sb-color-violet);
   --radio-color-background-off: var(--sb-color-white);
   --radio-color-border-off: var(--sb-color-violet);
   // Disabled state
+  --radio-border-width--disabled: 0.0625rem;
   --radio-color-dot-on--disabled: var(--sb-color-gray-dark);
   --radio-color-background--disabled: var(--sb-color-gray-light);
   --radio-color-border-on--disabled: var(--sb-color-gray-dark);
@@ -22,9 +26,11 @@
   --radio-color-border-off--active: var(--sb-color-gray);
   // Hover state
   --radio-color-dot-on--hover: var(--sb-color-violet);
+  --radio-border-width-on--hover: 0.0625rem;
   --radio-color-background-on--hover: var(--sb-color-violet-light-3);
   --radio-color-background-off--hover: var(--sb-color-violet-light-3);
   // Focus state
+  --radio-border-width--focus: 0.1875rem;
   --radio-color-background-on--focus: var(--sb-color-blue-light-3);
   --radio-color-background-off--focus: var(--sb-color-blue-light-3);
   // Error state

package/es/components/section/style/themes/dnb-section-theme-sbanken.css

@@ -22,7 +22,7 @@
 }
 .dnb-section--info {
   --text-color: var(--sb-color-text);
-  --background-color: var(--sb-color-gray-light-2);
+  --background-color: var(--sb-color-violet-light-4);
 }
 .dnb-section--warning {
   --text-color: var(--sb-color-text);

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

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

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

@@ -27,7 +27,7 @@
 
   &--info {
     --text-color: var(--sb-color-text);
-    --background-color: var(--sb-color-gray-light-2);
+    --background-color: var(--sb-color-violet-light-4);
   }
 
   &--warning {

package/es/components/slider/SliderDocs.d.ts

@@ -0,0 +1,3 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const SliderProperties: PropertiesTableProps;
+export declare const SliderEvents: PropertiesTableProps;

package/es/components/slider/SliderDocs.js

@@ -0,0 +1,150 @@
+export const SliderProperties = {
+  value: {
+    doc: 'The `value` of the slider as a number or an array. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multiple thumbs).',
+    type: ['number', 'Array<number>'],
+    status: 'required'
+  },
+  min: {
+    doc: 'The minimum value. Can be a negative number as well. Defaults to `0`.',
+    type: 'number',
+    status: 'optional'
+  },
+  max: {
+    doc: 'The maximum value. Defaults to `100`.',
+    type: 'number',
+    status: 'optional'
+  },
+  step: {
+    doc: 'The steps the slider takes on changing the value. Defaults to `null`.',
+    type: 'number',
+    status: 'optional'
+  },
+  vertical: {
+    doc: 'Show the slider vertically. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  reverse: {
+    doc: 'Show the slider reversed. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  stretch: {
+    doc: 'If set to `true`, then the slider will be 100% in `width`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  hideButtons: {
+    doc: 'Removes the helper buttons. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  multiThumbBehavior: {
+    doc: 'Use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`.',
+    type: 'string',
+    status: 'optional'
+  },
+  thumbTitle: {
+    doc: 'Give the slider thumb button a title for accessibility reasons. Defaults to `null`.',
+    type: 'string',
+    status: 'optional'
+  },
+  subtractTitle: {
+    doc: 'Give the subtract button a title for accessibility reasons. Defaults to `−`.',
+    type: 'string',
+    status: 'optional'
+  },
+  addTitle: {
+    doc: 'Give the add button a title for accessibility reasons. Defaults to `+`.',
+    type: 'string',
+    status: 'optional'
+  },
+  numberFormat: {
+    doc: 'Will extend the return object with a `number` property (from `onChange` event). You can use all the options from the [NumberFormat](/uilib/components/number-format/properties) component. It also will use that formatted number in the increase/decrease buttons. If it has to represent a currency, then use e.g. `numberFormat={{ currency: true, decimals: 0 }}`',
+    type: 'object',
+    status: 'optional'
+  },
+  tooltip: {
+    doc: 'Use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  alwaysShowTooltip: {
+    doc: 'Use `true` to always show the tooltip, in addition to the `tooltip` property.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  label: {
+    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',
+    type: 'string',
+    status: 'optional'
+  },
+  labelDirection: {
+    doc: 'Use `labelDirection="vertical"` to change the label layout direction. Defaults to `horizontal`.',
+    type: 'string',
+    status: 'optional'
+  },
+  labelSrOnly: {
+    doc: 'Use `true` to make the label only readable by screen readers.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  status: {
+    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',
+    type: 'string',
+    status: 'optional'
+  },
+  statusState: {
+    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',
+    type: 'string',
+    status: 'optional'
+  },
+  statusProps: {
+    doc: 'Use an object to define additional FormStatus properties.',
+    type: 'object',
+    status: 'optional'
+  },
+  globalStatusId: {
+    doc: 'The `status_id` used for the target [GlobalStatus](/uilib/components/global-status).',
+    type: 'string',
+    status: 'optional'
+  },
+  suffix: {
+    doc: 'Text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component.',
+    type: 'string',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  extensions: {
+    doc: 'Makes it possible to display overlays with other functionality such as a marker on the slider marking a given value.',
+    type: 'object',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+export const SliderEvents = {
+  onChange: {
+    doc: 'will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `numberFormat` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`.',
+    type: 'function',
+    status: 'optional'
+  },
+  onDragStart: {
+    doc: 'will be called once the user stops dragging. Returns `{ event }`.',
+    type: 'function',
+    status: 'optional'
+  },
+  onDragEnd: {
+    doc: 'will be called once the user starts dragging. Returns `{ event }`.',
+    type: 'function',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=SliderDocs.js.map

package/es/components/slider/SliderDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderDocs.js","names":["SliderProperties","value","doc","type","status","min","max","step","vertical","reverse","stretch","hideButtons","multiThumbBehavior","thumbTitle","subtractTitle","addTitle","numberFormat","tooltip","alwaysShowTooltip","label","labelDirection","labelSrOnly","statusState","statusProps","globalStatusId","suffix","skeleton","extensions","SliderEvents","onChange","onDragStart","onDragEnd"],"sources":["../../../../src/components/slider/SliderDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const SliderProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The `value` of the slider as a number or an array. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multiple thumbs).',\n    type: ['number', 'Array<number>'],\n    status: 'required',\n  },\n  min: {\n    doc: 'The minimum value. Can be a negative number as well. Defaults to `0`.',\n    type: 'number',\n    status: 'optional',\n  },\n  max: {\n    doc: 'The maximum value. Defaults to `100`.',\n    type: 'number',\n    status: 'optional',\n  },\n  step: {\n    doc: 'The steps the slider takes on changing the value. Defaults to `null`.',\n    type: 'number',\n    status: 'optional',\n  },\n  vertical: {\n    doc: 'Show the slider vertically. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  reverse: {\n    doc: 'Show the slider reversed. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'If set to `true`, then the slider will be 100% in `width`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  hideButtons: {\n    doc: 'Removes the helper buttons. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  multiThumbBehavior: {\n    doc: 'Use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`.',\n    type: 'string',\n    status: 'optional',\n  },\n  thumbTitle: {\n    doc: 'Give the slider thumb button a title for accessibility reasons. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  subtractTitle: {\n    doc: 'Give the subtract button a title for accessibility reasons. Defaults to `−`.',\n    type: 'string',\n    status: 'optional',\n  },\n  addTitle: {\n    doc: 'Give the add button a title for accessibility reasons. Defaults to `+`.',\n    type: 'string',\n    status: 'optional',\n  },\n  numberFormat: {\n    doc: 'Will extend the return object with a `number` property (from `onChange` event). You can use all the options from the [NumberFormat](/uilib/components/number-format/properties) component. It also will use that formatted number in the increase/decrease buttons. If it has to represent a currency, then use e.g. `numberFormat={{ currency: true, decimals: 0 }}`',\n    type: 'object',\n    status: 'optional',\n  },\n  tooltip: {\n    doc: 'Use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  alwaysShowTooltip: {\n    doc: 'Use `true` to always show the tooltip, in addition to the `tooltip` property.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',\n    type: 'string',\n    status: 'optional',\n  },\n  labelDirection: {\n    doc: 'Use `labelDirection=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.',\n    type: 'string',\n    status: 'optional',\n  },\n  labelSrOnly: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  status: {\n    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: 'string',\n    status: 'optional',\n  },\n  statusState: {\n    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n    type: 'string',\n    status: 'optional',\n  },\n  statusProps: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatusId: {\n    doc: 'The `status_id` used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'string',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component.',\n    type: 'string',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  extensions: {\n    doc: 'Makes it possible to display overlays with other functionality such as a marker on the slider marking a given value.',\n    type: 'object',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const SliderEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `numberFormat` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  onDragStart: {\n    doc: 'will be called once the user stops dragging. Returns `{ event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  onDragEnd: {\n    doc: 'will be called once the user starts dragging. Returns `{ event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}

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

@@ -1,5 +1,3 @@
-"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";
@@ -7,8 +5,7 @@ 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, { useEffect } from 'react';
-import { warn } from '../../shared/component-helper';
+import React from 'react';
 import StepIndicatorSidebar from './StepIndicatorSidebar';
 import StepIndicatorModal from './StepIndicatorModal';
 import { StepIndicatorProvider } from './StepIndicatorContext';
@@ -31,11 +28,6 @@ function StepIndicator(_ref) {
     no_animation
   }, restOfProps);
   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/es/components/step-indicator/StepIndicator.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"StepIndicator.js","names":["React","StepIndicatorSidebar","StepIndicatorModal","StepIndicatorProvider","stepIndicatorDefaultProps","useId","StepIndicator","_ref","data","skeleton","current_step","hide_numbers","no_animation","restOfProps","_objectWithoutProperties","_excluded","props","_objectSpread","sidebarId","sidebar_id","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 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  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,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;EAEzC,OACEnB,KAAA,CAAAoB,aAAA,CAACjB,qBAAqB,EAAAkB,QAAA,KAAKL,KAAK;IAAEG,UAAU,EAAED;EAAU,IAAAI,IAAA,KAAAA,IAAA,GACtDtB,KAAA,CAAAoB,aAAA;IAAKG,SAAS,EAAC;EAA4B,GACzCvB,KAAA,CAAAoB,aAAA,CAAClB,kBAAkB,MAAE,CAClB,CAAC,CACe,CAAC;AAE5B;AAEAI,aAAa,CAACkB,OAAO,GAAGvB,oBAAoB;AAE5CK,aAAa,CAACmB,qBAAqB,GAAG,IAAI;AAE1C,eAAenB,aAAa"}

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

@@ -52,7 +52,7 @@
 }
 .dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary {
   color: var(--sb-color-text);
-  background-color: var(--sb-color-gray-light-2);
+  background-color: var(--sb-color-violet-light-4);
 }
 .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon {
   align-self: flex-start;

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

@@ -1 +1 @@
-.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button{--border-color:var(--sb-color-gray-light)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button{--border-color:var(--sb-color-purple-alternative);background-color:var(--sb-color-purple-alternative);color:var(--sb-color-white)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--visited .dnb-button{--border-color:var(--sb-color-purple-alternative);background-color:var(--sb-color-green-light-2);color:var(--sb-color-purple-alternative)}.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)}.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(--sb-color-yellow-light-3);color:var(--sb-color-text)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--error.dnb-button--secondary{background-color:var(--sb-color-magenta-light-2);color:var(--sb-color-text)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary{background-color:var(--sb-color-gray-light-2);color:var(--sb-color-text)}.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}
+.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button{--border-color:var(--sb-color-gray-light)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button{--border-color:var(--sb-color-purple-alternative);background-color:var(--sb-color-purple-alternative);color:var(--sb-color-white)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--visited .dnb-button{--border-color:var(--sb-color-purple-alternative);background-color:var(--sb-color-green-light-2);color:var(--sb-color-purple-alternative)}.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)}.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(--sb-color-yellow-light-3);color:var(--sb-color-text)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--error.dnb-button--secondary{background-color:var(--sb-color-magenta-light-2);color:var(--sb-color-text)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary{background-color:var(--sb-color-violet-light-4);color:var(--sb-color-text)}.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/es/components/step-indicator/style/themes/dnb-step-indicator-theme-sbanken.scss

@@ -70,7 +70,7 @@
 
     &--info.dnb-button--secondary {
       color: var(--sb-color-text);
-      background-color: var(--sb-color-gray-light-2);
+      background-color: var(--sb-color-violet-light-4);
     }
 
     .dnb-button__icon {

package/es/components/table/TableContainer.d.ts

@@ -17,6 +17,7 @@ declare namespace TableContainer {
     var Body: typeof TableContainerBody;
     var Head: typeof TableContainerHead;
     var Foot: typeof TableContainerFoot;
+    var _supportsSpacingProps: boolean;
 }
 export default TableContainer;
 export type TableContainerBodyProps = {

package/es/components/table/TableContainer.js

@@ -69,4 +69,5 @@ export function TableContainerFoot(props) {
 TableContainer.Body = TableContainerBody;
 TableContainer.Head = TableContainerHead;
 TableContainer.Foot = TableContainerFoot;
+TableContainer._supportsSpacingProps = true;
 //# sourceMappingURL=TableContainer.js.map

package/es/components/table/TableContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableContainer.js","names":["React","classnames","TableScrollView","createSpacingClasses","validateDOMAttributes","TableContainer","props","_content$","_content$2","children","className","rest","_objectWithoutProperties","_excluded","spacingClasses","ScrollView","isArray","Array","content","type","Head","unshift","_TableContainer$Head","createElement","key","Foot","push","_TableContainer$Foot","_extends","TableContainerBody","_excluded2","TableContainerHead","_excluded3","TableContainerFoot","_excluded4","Body"],"sources":["../../../../src/components/table/TableContainer.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport TableScrollView, { TableScrollViewProps } from './TableScrollView'\nimport { createSpacingClasses } from '../space/SpacingUtils'\n\nimport type { TableProps } from './Table'\nimport type { SpacingProps } from '../space/types'\nimport { validateDOMAttributes } from '../../shared/component-helper'\n\nexport type TableContainerProps = {\n  /**\n   * The content of the component.\n   */\n  children:\n    | [\n        React.ReactElement<TableContainerHeadProps>,\n        React.ReactElement<TableContainerBodyProps>,\n        React.ReactElement<TableContainerFootProps>,\n      ]\n    | React.ReactElement<TableContainerBodyProps>\n}\n\nexport type TableContainerAllProps = TableContainerProps &\n  React.TableHTMLAttributes<HTMLTableRowElement> &\n  SpacingProps\n\ntype InternalTableContainerTableScrollView = Omit<\n  TableScrollViewProps,\n  'children'\n> & {\n  children: React.ReactNode\n}\n\nexport default function TableContainer(props: TableContainerAllProps) {\n  const { children, className, ...rest } = props\n  const spacingClasses = createSpacingClasses(props)\n\n  validateDOMAttributes(props, rest)\n\n  const ScrollView =\n    TableScrollView as React.FunctionComponent<InternalTableContainerTableScrollView>\n\n  const isArray = Array.isArray(children)\n  const content = isArray ? children : [children]\n\n  if (content[0]?.type !== TableContainer.Head) {\n    content.unshift(<TableContainer.Head key=\"head\" />)\n  }\n  if (content[2]?.type !== TableContainer.Foot) {\n    content.push(<TableContainer.Foot key=\"foot\" />)\n  }\n\n  return (\n    <section\n      className={classnames(\n        'dnb-table__container',\n        className,\n        spacingClasses\n      )}\n      {...rest}\n    >\n      <ScrollView>{content}</ScrollView>\n    </section>\n  )\n}\n\nexport type TableContainerBodyProps = {\n  /**\n   * The content of the component.\n   */\n  children:\n    | React.ReactElement<TableProps>\n    | Array<React.ReactElement<TableProps>>\n}\n\nexport function TableContainerBody(\n  props: TableContainerBodyProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames('dnb-table__container__body', className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport type TableContainerHeadProps = {\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nexport function TableContainerHead(\n  props: TableContainerHeadProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames(\n        'dnb-table__container__head',\n        !children && 'dnb-table__container__head--empty',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport type TableContainerFootProps = {\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nexport function TableContainerFoot(\n  props: TableContainerFootProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames(\n        'dnb-table__container__foot',\n        !children && 'dnb-table__container__foot--empty',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nTableContainer.Body = TableContainerBody\nTableContainer.Head = TableContainerHead\nTableContainer.Foot = TableContainerFoot\n"],"mappings":"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"}
+{"version":3,"file":"TableContainer.js","names":["React","classnames","TableScrollView","createSpacingClasses","validateDOMAttributes","TableContainer","props","_content$","_content$2","children","className","rest","_objectWithoutProperties","_excluded","spacingClasses","ScrollView","isArray","Array","content","type","Head","unshift","_TableContainer$Head","createElement","key","Foot","push","_TableContainer$Foot","_extends","TableContainerBody","_excluded2","TableContainerHead","_excluded3","TableContainerFoot","_excluded4","Body","_supportsSpacingProps"],"sources":["../../../../src/components/table/TableContainer.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport TableScrollView, { TableScrollViewProps } from './TableScrollView'\nimport { createSpacingClasses } from '../space/SpacingUtils'\n\nimport type { TableProps } from './Table'\nimport type { SpacingProps } from '../space/types'\nimport { validateDOMAttributes } from '../../shared/component-helper'\n\nexport type TableContainerProps = {\n  /**\n   * The content of the component.\n   */\n  children:\n    | [\n        React.ReactElement<TableContainerHeadProps>,\n        React.ReactElement<TableContainerBodyProps>,\n        React.ReactElement<TableContainerFootProps>,\n      ]\n    | React.ReactElement<TableContainerBodyProps>\n}\n\nexport type TableContainerAllProps = TableContainerProps &\n  React.TableHTMLAttributes<HTMLTableRowElement> &\n  SpacingProps\n\ntype InternalTableContainerTableScrollView = Omit<\n  TableScrollViewProps,\n  'children'\n> & {\n  children: React.ReactNode\n}\n\nexport default function TableContainer(props: TableContainerAllProps) {\n  const { children, className, ...rest } = props\n  const spacingClasses = createSpacingClasses(props)\n\n  validateDOMAttributes(props, rest)\n\n  const ScrollView =\n    TableScrollView as React.FunctionComponent<InternalTableContainerTableScrollView>\n\n  const isArray = Array.isArray(children)\n  const content = isArray ? children : [children]\n\n  if (content[0]?.type !== TableContainer.Head) {\n    content.unshift(<TableContainer.Head key=\"head\" />)\n  }\n  if (content[2]?.type !== TableContainer.Foot) {\n    content.push(<TableContainer.Foot key=\"foot\" />)\n  }\n\n  return (\n    <section\n      className={classnames(\n        'dnb-table__container',\n        className,\n        spacingClasses\n      )}\n      {...rest}\n    >\n      <ScrollView>{content}</ScrollView>\n    </section>\n  )\n}\n\nexport type TableContainerBodyProps = {\n  /**\n   * The content of the component.\n   */\n  children:\n    | React.ReactElement<TableProps>\n    | Array<React.ReactElement<TableProps>>\n}\n\nexport function TableContainerBody(\n  props: TableContainerBodyProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames('dnb-table__container__body', className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport type TableContainerHeadProps = {\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nexport function TableContainerHead(\n  props: TableContainerHeadProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames(\n        'dnb-table__container__head',\n        !children && 'dnb-table__container__head--empty',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport type TableContainerFootProps = {\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nexport function TableContainerFoot(\n  props: TableContainerFootProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames(\n        'dnb-table__container__foot',\n        !children && 'dnb-table__container__foot--empty',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\nTableContainer.Body = TableContainerBody\nTableContainer.Head = TableContainerHead\nTableContainer.Foot = TableContainerFoot\nTableContainer._supportsSpacingProps = true\n"],"mappings":"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"}

package/es/components/table/style/dnb-table.css

@@ -563,6 +563,9 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 .dnb-modal__content .dnb-table__container .dnb-table__scroll-view {
   overflow: visible;
 }
+.dnb-card .dnb-table__container {
+  width: 100%;
+}
 
 /*
 * Table component