@dnb/eufemia 10.27.0 → 10.28.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.28.0](https://github.com/dnbexperience/eufemia/compare/v10.27.0...v10.28.0) (2024-04-29)
+
+
+### :memo: Documentation
+
+* **contribution guide:** update title and move sandbox starter ([#3489](https://github.com/dnbexperience/eufemia/issues/3489)) ([efdf710](https://github.com/dnbexperience/eufemia/commit/efdf7100a6f2e94cd82fdc47df4450af7476435b))
+
+
+### :bug: Bug Fixes
+
+* **Anchor:** icon position when line-height increased by another element ([#3470](https://github.com/dnbexperience/eufemia/issues/3470)) ([bf24102](https://github.com/dnbexperience/eufemia/commit/bf2410298e2dfa482ea0e12bc54bcf88843c72ac))
+* **forms:** iterate EditContainer error switch ([#3503](https://github.com/dnbexperience/eufemia/issues/3503)) ([366a662](https://github.com/dnbexperience/eufemia/commit/366a66292f8af08b694b3c31871b6c527f0eaa35))
+
+
+### :sparkles: Features
+
+* **Checkbox:** refactor to TypeScript ([#3443](https://github.com/dnbexperience/eufemia/issues/3443)) ([3487cd6](https://github.com/dnbexperience/eufemia/commit/3487cd60b46207a99d11609a7a2a23daacfd9f0d))
+* **forms:** add `getValue` method to useData and getData ([#3502](https://github.com/dnbexperience/eufemia/issues/3502)) ([d5887c3](https://github.com/dnbexperience/eufemia/commit/d5887c33c1180892a2a9342b36f5424875e60b6b))
+* **PaymentCard:** add sbanken cards ([#3473](https://github.com/dnbexperience/eufemia/issues/3473)) ([1a8c769](https://github.com/dnbexperience/eufemia/commit/1a8c7694ab6bdefe949e3e6e54f35c6cc0e746e7))
+
 ## [10.27.0](https://github.com/dnbexperience/eufemia/compare/v10.26.0...v10.27.0) (2024-04-26)
 
 

package/cjs/components/anchor/style/anchor-mixins.scss

@@ -2,7 +2,7 @@
  * Anchor mixins
  *
  */
-
+@use 'sass:math';
 @import '../../../style/core/utilities.scss';
 
 @mixin anchorDefaultStyle() {
@@ -115,10 +115,13 @@
 }
 
 @mixin anchorStyle() {
+  $icon-scale: 2;
+  $icon-scale-filler: 0.5 - math.div(0.5, $icon-scale);
+
   --anchor-icon-gutter: 0.25em;
   // word-joiner character (zero-width non-breaking space) connects icon with word
   --anchor-icon-seperator: '\2060';
-  --anchor-icon-fallback-position: translateY(-0.125em);
+  --anchor-icon-position: translateY(-0.175em);
   @include anchorDefaultStyle();
 
   // have focus before :active, because of border-radius
@@ -148,25 +151,16 @@
   // other stuff, not related to the Anchor directly
   .dnb-icon {
     display: inline;
-    vertical-align: baseline;
+    vertical-align: middle;
     white-space: nowrap; // force icon to line break with word
-    font-size: inherit;
 
     svg {
-      vertical-align: middle;
-      transform: var(--anchor-icon-fallback-position);
-    }
-  }
-
-  @supports (height: 1lh) {
-    .dnb-icon {
-      vertical-align: top;
-      line-height: 1lh;
-
-      svg {
-        vertical-align: top;
-        transform: translateY(calc(0.5lh - 0.5em));
-      }
+      vertical-align: baseline;
+      transform: scale($icon-scale) var(--anchor-icon-position);
+      font-size: #{math.div(1, $icon-scale)}em;
+      width: #{$icon-scale}em;
+      height: 1em;
+      pointer-events: none;
     }
   }
 
@@ -179,7 +173,7 @@
       content: var(--anchor-icon-seperator);
     }
     svg {
-      margin-right: var(--anchor-icon-gutter);
+      margin-right: calc(var(--anchor-icon-gutter) * #{$icon-scale});
     }
   }
 
@@ -188,7 +182,7 @@
       content: var(--anchor-icon-seperator);
     }
     svg {
-      margin-left: var(--anchor-icon-gutter);
+      margin-left: calc(var(--anchor-icon-gutter) * #{$icon-scale});
     }
   }
 

package/cjs/components/anchor/style/dnb-anchor.css

@@ -23,7 +23,7 @@ button.dnb-anchor {
   --anchor-underline-thickness: 0.0938rem;
   --anchor-icon-gutter: 0.25em;
   --anchor-icon-seperator: "⁠";
-  --anchor-icon-fallback-position: translateY(-0.125em);
+  --anchor-icon-position: translateY(-0.175em);
   display: inline;
   padding: 0.05575em 0;
   font-size: var(--font-size-basis);
@@ -86,23 +86,16 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon {
   display: inline;
-  vertical-align: baseline;
+  vertical-align: middle;
   white-space: nowrap;
-  font-size: inherit;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon svg {
-  vertical-align: middle;
-  transform: var(--anchor-icon-fallback-position);
-}
-@supports (height: 1lh) {
-  :where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon {
-    vertical-align: top;
-    line-height: 1lh;
-  }
-  :where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon svg {
-    vertical-align: top;
-    transform: translateY(calc(0.5lh - 0.5em));
-  }
+  vertical-align: baseline;
+  transform: scale(2) var(--anchor-icon-position);
+  font-size: 0.5em;
+  width: 2em;
+  height: 1em;
+  pointer-events: none;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--no-icon .dnb-icon {
   display: none;
@@ -111,13 +104,13 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   content: var(--anchor-icon-seperator);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child svg {
-  margin-right: var(--anchor-icon-gutter);
+  margin-right: calc(var(--anchor-icon-gutter) * 2);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child::before {
   content: var(--anchor-icon-seperator);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child svg {
-  margin-left: var(--anchor-icon-gutter);
+  margin-left: calc(var(--anchor-icon-gutter) * 2);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon--default {
   font-size: 0.8888888889em;
@@ -161,7 +154,7 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
     --anchor-underline-thickness: 0.0938rem;
     --anchor-icon-gutter: 0.25em;
     --anchor-icon-seperator: "⁠";
-    --anchor-icon-fallback-position: translateY(-0.125em);
+    --anchor-icon-position: translateY(-0.175em);
     display: inline;
     padding: 0.05575em 0;
     font-size: var(--font-size-basis);
@@ -224,23 +217,16 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   }
   :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon {
     display: inline;
-    vertical-align: baseline;
+    vertical-align: middle;
     white-space: nowrap;
-    font-size: inherit;
   }
   :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon svg {
-    vertical-align: middle;
-    transform: var(--anchor-icon-fallback-position);
-  }
-  @supports (height: 1lh) {
-    :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon {
-      vertical-align: top;
-      line-height: 1lh;
-    }
-    :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon svg {
-      vertical-align: top;
-      transform: translateY(calc(0.5lh - 0.5em));
-    }
+    vertical-align: baseline;
+    transform: scale(2) var(--anchor-icon-position);
+    font-size: 0.5em;
+    width: 2em;
+    height: 1em;
+    pointer-events: none;
   }
   :not(.dnb-anchor--no-style).dnb-anchor--no-icon .dnb-icon {
     display: none;
@@ -249,13 +235,13 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
     content: var(--anchor-icon-seperator);
   }
   :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child svg {
-    margin-right: var(--anchor-icon-gutter);
+    margin-right: calc(var(--anchor-icon-gutter) * 2);
   }
   :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child::before {
     content: var(--anchor-icon-seperator);
   }
   :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child svg {
-    margin-left: var(--anchor-icon-gutter);
+    margin-left: calc(var(--anchor-icon-gutter) * 2);
   }
   :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon--default {
     font-size: 0.8888888889em;

package/cjs/components/anchor/style/dnb-anchor.min.css

@@ -1 +1 @@
-@charset "UTF-8";button.dnb-anchor{-webkit-appearance:none;appearance:none;background:none;border:none;cursor:pointer;line-height:calc(var(--line-height-basis) + .125rem)}:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-underline-thickness:0.0938rem;--anchor-icon-gutter:0.25em;--anchor-icon-seperator:"⁠";--anchor-icon-fallback-position:translateY(-0.125em);border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em 0;-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:currentcolor;text-decoration-thickness:var(--anchor-underline-thickness);text-underline-offset:.25em;transition:box-shadow .2s ease-in-out,border-radius .2s ease-in-out,background .2s ease-in-out}sub :where(:not(.dnb-anchor--no-style)).dnb-anchor,sup :where(:not(.dnb-anchor--no-style)).dnb-anchor{padding:0 .025em}.dnb-h--basis :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--medium :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--small :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--x-large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--x-small :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--xx-large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-lead :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-p :where(:not(.dnb-anchor--no-style)).dnb-anchor{font-size:inherit}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{-webkit-text-decoration:none;text-decoration:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){-webkit-text-decoration:none;text-decoration:none}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){-webkit-text-decoration:none;text-decoration:none}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:active.dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{-webkit-text-decoration:none;text-decoration:none}[data-visual-test-wrapper] :where(:not(.dnb-anchor--no-style)).dnb-anchor{transition:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon{display:inline;font-size:inherit;vertical-align:baseline;white-space:nowrap}:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon svg{transform:var(--anchor-icon-fallback-position);vertical-align:middle}@supports (height:1lh){:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon{line-height:1lh;vertical-align:top}:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon svg{transform:translateY(calc(.5lh - .5em));vertical-align:top}}:where(:not(.dnb-anchor--no-style)).dnb-anchor--no-icon .dnb-icon{display:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child:after{content:var(--anchor-icon-seperator)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child svg{margin-right:var(--anchor-icon-gutter)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child:before{content:var(--anchor-icon-seperator)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child svg{margin-left:var(--anchor-icon-gutter)}:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon--default{font-size:.8888888889em}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast{color:var(--color-white)}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast: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(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast: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)}}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast: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)}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast: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}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-underline-thickness:0.0938rem;--anchor-icon-gutter:0.25em;--anchor-icon-seperator:"⁠";--anchor-icon-fallback-position:translateY(-0.125em);border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em 0;-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:currentcolor;text-decoration-thickness:var(--anchor-underline-thickness);text-underline-offset:.25em;transition:box-shadow .2s ease-in-out,border-radius .2s ease-in-out,background .2s ease-in-out}sub :not(.dnb-anchor--no-style).dnb-anchor,sup :not(.dnb-anchor--no-style).dnb-anchor{padding:0 .025em}.dnb-h--basis :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--medium :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--small :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--x-large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--x-small :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--xx-large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-lead :not(.dnb-anchor--no-style).dnb-anchor,.dnb-p :not(.dnb-anchor--no-style).dnb-anchor{font-size:inherit}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{-webkit-text-decoration:none;text-decoration:none}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){-webkit-text-decoration:none;text-decoration:none}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){-webkit-text-decoration:none;text-decoration:none}}:not(.dnb-anchor--no-style).dnb-anchor:active{border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:active.dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:active{-webkit-text-decoration:none;text-decoration:none}[data-visual-test-wrapper] :not(.dnb-anchor--no-style).dnb-anchor{transition:none}:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon{display:inline;font-size:inherit;vertical-align:baseline;white-space:nowrap}:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon svg{transform:var(--anchor-icon-fallback-position);vertical-align:middle}@supports (height:1lh){:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon{line-height:1lh;vertical-align:top}:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon svg{transform:translateY(calc(.5lh - .5em));vertical-align:top}}:not(.dnb-anchor--no-style).dnb-anchor--no-icon .dnb-icon{display:none}:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child:after{content:var(--anchor-icon-seperator)}:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child svg{margin-right:var(--anchor-icon-gutter)}:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child:before{content:var(--anchor-icon-seperator)}:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child svg{margin-left:var(--anchor-icon-gutter)}:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon--default{font-size:.8888888889em}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast{color:var(--color-white)}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast: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(*))){:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast: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)}}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast: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)}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast: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-anchor--hover{border-radius:.25em}.dnb-anchor--hover,.dnb-section .dnb-anchor--hover.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor--active{border-radius:.25em}.dnb-anchor--active,.dnb-section .dnb-anchor--active.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor--focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-anchor--focus,.dnb-anchor--no-underline,.dnb-section .dnb-anchor--focus.dnb-anchor,.dnb-section .dnb-anchor--no-underline.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus-visible,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--no-animation,a.dnb-button{transition:none}.dnb-anchor.dnb-skeleton,.dnb-skeleton>.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor.dnb-skeleton .dnb-icon,.dnb-skeleton>.dnb-anchor .dnb-icon{filter:grayscale(100%) opacity(.3)}
+@charset "UTF-8";button.dnb-anchor{-webkit-appearance:none;appearance:none;background:none;border:none;cursor:pointer;line-height:calc(var(--line-height-basis) + .125rem)}:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-underline-thickness:0.0938rem;--anchor-icon-gutter:0.25em;--anchor-icon-seperator:"⁠";--anchor-icon-position:translateY(-0.175em);border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em 0;-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:currentcolor;text-decoration-thickness:var(--anchor-underline-thickness);text-underline-offset:.25em;transition:box-shadow .2s ease-in-out,border-radius .2s ease-in-out,background .2s ease-in-out}sub :where(:not(.dnb-anchor--no-style)).dnb-anchor,sup :where(:not(.dnb-anchor--no-style)).dnb-anchor{padding:0 .025em}.dnb-h--basis :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--medium :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--small :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--x-large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--x-small :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--xx-large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-lead :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-p :where(:not(.dnb-anchor--no-style)).dnb-anchor{font-size:inherit}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{-webkit-text-decoration:none;text-decoration:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){-webkit-text-decoration:none;text-decoration:none}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){-webkit-text-decoration:none;text-decoration:none}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:active.dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{-webkit-text-decoration:none;text-decoration:none}[data-visual-test-wrapper] :where(:not(.dnb-anchor--no-style)).dnb-anchor{transition:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon{display:inline;vertical-align:middle;white-space:nowrap}:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon svg{font-size:.5em;height:1em;pointer-events:none;transform:scale(2) var(--anchor-icon-position);vertical-align:baseline;width:2em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--no-icon .dnb-icon{display:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child:after{content:var(--anchor-icon-seperator)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child svg{margin-right:calc(var(--anchor-icon-gutter)*2)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child:before{content:var(--anchor-icon-seperator)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child svg{margin-left:calc(var(--anchor-icon-gutter)*2)}:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon--default{font-size:.8888888889em}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast{color:var(--color-white)}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast: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(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast: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)}}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast: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)}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast: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}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-underline-thickness:0.0938rem;--anchor-icon-gutter:0.25em;--anchor-icon-seperator:"⁠";--anchor-icon-position:translateY(-0.175em);border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em 0;-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:currentcolor;text-decoration-thickness:var(--anchor-underline-thickness);text-underline-offset:.25em;transition:box-shadow .2s ease-in-out,border-radius .2s ease-in-out,background .2s ease-in-out}sub :not(.dnb-anchor--no-style).dnb-anchor,sup :not(.dnb-anchor--no-style).dnb-anchor{padding:0 .025em}.dnb-h--basis :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--medium :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--small :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--x-large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--x-small :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--xx-large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-lead :not(.dnb-anchor--no-style).dnb-anchor,.dnb-p :not(.dnb-anchor--no-style).dnb-anchor{font-size:inherit}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{-webkit-text-decoration:none;text-decoration:none}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){-webkit-text-decoration:none;text-decoration:none}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){-webkit-text-decoration:none;text-decoration:none}}:not(.dnb-anchor--no-style).dnb-anchor:active{border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:active.dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:active{-webkit-text-decoration:none;text-decoration:none}[data-visual-test-wrapper] :not(.dnb-anchor--no-style).dnb-anchor{transition:none}:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon{display:inline;vertical-align:middle;white-space:nowrap}:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon svg{font-size:.5em;height:1em;pointer-events:none;transform:scale(2) var(--anchor-icon-position);vertical-align:baseline;width:2em}:not(.dnb-anchor--no-style).dnb-anchor--no-icon .dnb-icon{display:none}:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child:after{content:var(--anchor-icon-seperator)}:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child svg{margin-right:calc(var(--anchor-icon-gutter)*2)}:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child:before{content:var(--anchor-icon-seperator)}:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child svg{margin-left:calc(var(--anchor-icon-gutter)*2)}:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon--default{font-size:.8888888889em}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast{color:var(--color-white)}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast: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(*))){:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast: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)}}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast: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)}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast: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-anchor--hover{border-radius:.25em}.dnb-anchor--hover,.dnb-section .dnb-anchor--hover.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor--active{border-radius:.25em}.dnb-anchor--active,.dnb-section .dnb-anchor--active.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor--focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-anchor--focus,.dnb-anchor--no-underline,.dnb-section .dnb-anchor--focus.dnb-anchor,.dnb-section .dnb-anchor--no-underline.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus-visible,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--no-animation,a.dnb-button{transition:none}.dnb-anchor.dnb-skeleton,.dnb-skeleton>.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor.dnb-skeleton .dnb-icon,.dnb-skeleton>.dnb-anchor .dnb-icon{filter:grayscale(100%) opacity(.3)}

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

@@ -16,7 +16,7 @@
   --anchor-color--contrast: var(--sb-color-text);
   --anchor-background-gutter-left: 0.25rem;
   --anchor-background-gutter-right: 0.25rem;
-  --anchor-icon-fallback-position: translateY(-0.0625em);
+  --anchor-icon-position: translateY(-0.125em);
   font-weight: var(--font-weight-medium);
   color: var(--sb-color-gray-dark-3);
   padding: 0.15625em 0;
@@ -108,7 +108,7 @@
     --anchor-color--contrast: var(--sb-color-text);
     --anchor-background-gutter-left: 0.25rem;
     --anchor-background-gutter-right: 0.25rem;
-    --anchor-icon-fallback-position: translateY(-0.0625em);
+    --anchor-icon-position: translateY(-0.125em);
     font-weight: var(--font-weight-medium);
     color: var(--sb-color-gray-dark-3);
     padding: 0.15625em 0;

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

@@ -1 +1 @@
-@charset "UTF-8";:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-underline-thickness:0.125rem;--anchor-background:transparent;--anchor-color--contrast:var(--sb-color-text);--anchor-background-gutter-left:0.25rem;--anchor-background-gutter-right:0.25rem;--anchor-icon-fallback-position:translateY(-0.0625em);border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--font-weight-medium);padding:.15625em 0}:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon--default{font-size:1em}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{--anchor-background:var(--sb-color-green);border-radius:.5em;color:var(--sb-color-text);transition:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor{--anchor-icon-gutter:0.125em;--anchor-icon-seperator:" "}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left,:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right{text-decoration-color:var(--sb-color-green-dark)}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right){--anchor-background-gutter-right:0rem}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right):after{content:var(--anchor-icon-seperator)}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left){--anchor-background-gutter-left:0rem}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left):before{content:var(--anchor-icon-seperator)}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor{--anchor-icon-gutter:0.125em;--anchor-icon-seperator:" "}:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left,:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right{text-decoration-color:var(--sb-color-green-dark)}:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right){--anchor-background-gutter-right:0rem}:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right):after{content:var(--anchor-icon-seperator)}:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left){--anchor-background-gutter-left:0rem}:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left):before{content:var(--anchor-icon-seperator)}}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-underline-thickness:0.125rem;--anchor-background:transparent;--anchor-color--contrast:var(--sb-color-text);--anchor-background-gutter-left:0.25rem;--anchor-background-gutter-right:0.25rem;--anchor-icon-fallback-position:translateY(-0.0625em);border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--font-weight-medium);padding:.15625em 0}:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon--default{font-size:1em}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}}:not(.dnb-anchor--no-style).dnb-anchor:active{--anchor-background:var(--sb-color-green);border-radius:.5em;color:var(--sb-color-text);transition:none}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor{--anchor-icon-gutter:0.125em;--anchor-icon-seperator:" "}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left,:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right{text-decoration-color:var(--sb-color-green-dark)}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right){--anchor-background-gutter-right:0rem}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right):after{content:var(--anchor-icon-seperator)}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left){--anchor-background-gutter-left:0rem}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left):before{content:var(--anchor-icon-seperator)}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor{--anchor-icon-gutter:0.125em;--anchor-icon-seperator:" "}:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left,:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right{text-decoration-color:var(--sb-color-green-dark)}:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right){--anchor-background-gutter-right:0rem}:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right):after{content:var(--anchor-icon-seperator)}:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left){--anchor-background-gutter-left:0rem}:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left):before{content:var(--anchor-icon-seperator)}}}.dnb-anchor--hover{--anchor-background:var(--sb-color-green-dark)}.dnb-anchor--active,.dnb-anchor--hover{border-radius:.5em;color:var(--sb-color-text);transition:none}.dnb-anchor--active{--anchor-background:var(--sb-color-green)}.dnb-anchor--focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-blue-dark);outline:none;transition:none}.dnb-anchor--focus,.dnb-section .dnb-anchor--focus.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus-visible,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--inline{text-decoration-color:currentcolor}
+@charset "UTF-8";:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-underline-thickness:0.125rem;--anchor-background:transparent;--anchor-color--contrast:var(--sb-color-text);--anchor-background-gutter-left:0.25rem;--anchor-background-gutter-right:0.25rem;--anchor-icon-position:translateY(-0.125em);border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--font-weight-medium);padding:.15625em 0}:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon--default{font-size:1em}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{--anchor-background:var(--sb-color-green);border-radius:.5em;color:var(--sb-color-text);transition:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor{--anchor-icon-gutter:0.125em;--anchor-icon-seperator:" "}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left,:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right{text-decoration-color:var(--sb-color-green-dark)}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right){--anchor-background-gutter-right:0rem}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right):after{content:var(--anchor-icon-seperator)}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left){--anchor-background-gutter-left:0rem}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left):before{content:var(--anchor-icon-seperator)}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor{--anchor-icon-gutter:0.125em;--anchor-icon-seperator:" "}:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left,:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right{text-decoration-color:var(--sb-color-green-dark)}:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right){--anchor-background-gutter-right:0rem}:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right):after{content:var(--anchor-icon-seperator)}:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left){--anchor-background-gutter-left:0rem}:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left):before{content:var(--anchor-icon-seperator)}}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-underline-thickness:0.125rem;--anchor-background:transparent;--anchor-color--contrast:var(--sb-color-text);--anchor-background-gutter-left:0.25rem;--anchor-background-gutter-right:0.25rem;--anchor-icon-position:translateY(-0.125em);border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--font-weight-medium);padding:.15625em 0}:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon--default{font-size:1em}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}}:not(.dnb-anchor--no-style).dnb-anchor:active{--anchor-background:var(--sb-color-green);border-radius:.5em;color:var(--sb-color-text);transition:none}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor{--anchor-icon-gutter:0.125em;--anchor-icon-seperator:" "}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left,:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right{text-decoration-color:var(--sb-color-green-dark)}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right){--anchor-background-gutter-right:0rem}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right):after{content:var(--anchor-icon-seperator)}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left){--anchor-background-gutter-left:0rem}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left):before{content:var(--anchor-icon-seperator)}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor{--anchor-icon-gutter:0.125em;--anchor-icon-seperator:" "}:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left,:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right{text-decoration-color:var(--sb-color-green-dark)}:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right){--anchor-background-gutter-right:0rem}:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right):after{content:var(--anchor-icon-seperator)}:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left){--anchor-background-gutter-left:0rem}:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left):before{content:var(--anchor-icon-seperator)}}}.dnb-anchor--hover{--anchor-background:var(--sb-color-green-dark)}.dnb-anchor--active,.dnb-anchor--hover{border-radius:.5em;color:var(--sb-color-text);transition:none}.dnb-anchor--active{--anchor-background:var(--sb-color-green)}.dnb-anchor--focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-blue-dark);outline:none;transition:none}.dnb-anchor--focus,.dnb-section .dnb-anchor--focus.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus-visible,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--inline{text-decoration-color:currentcolor}

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

@@ -34,7 +34,7 @@
     --anchor-color--contrast: var(--sb-color-text);
     --anchor-background-gutter-left: 0.25rem;
     --anchor-background-gutter-right: 0.25rem;
-    --anchor-icon-fallback-position: translateY(-0.0625em);
+    --anchor-icon-position: translateY(-0.125em);
 
     font-weight: var(--font-weight-medium);
     color: var(--sb-color-gray-dark-3);

package/cjs/components/breadcrumb/style/dnb-breadcrumb.css

@@ -41,8 +41,8 @@
   margin-right: 0.5rem;
 }
 .dnb-breadcrumb__item .dnb-anchor {
-  line-height: 1rem;
-  padding: 0.25rem 0;
+  line-height: 1.5rem;
+  padding: 0;
   position: relative;
 }
 .dnb-breadcrumb__item .dnb-anchor::after {

package/cjs/components/breadcrumb/style/dnb-breadcrumb.min.css

@@ -1 +1 @@
-.dnb-breadcrumb{display:flex;flex-direction:column;margin:0;padding:0}.dnb-breadcrumb__bar.dnb-section{display:flex}.dnb-breadcrumb__list.dnb-section{align-items:center;-moz-column-gap:.5rem;column-gap:.5rem;display:flex;flex-flow:row wrap;list-style:none;margin:0;padding:0;row-gap:1rem}.dnb-breadcrumb__item{align-items:center;display:flex;padding:.5rem 0}.dnb-breadcrumb__item__span{align-items:center;display:flex;line-height:var(--line-height-basis)}.dnb-breadcrumb__item__span__icon{margin-right:.5rem}.dnb-breadcrumb__item .dnb-anchor{line-height:1rem;padding:.25rem 0;position:relative}.dnb-breadcrumb__item .dnb-anchor:after{border:.5rem solid transparent;content:"";inset:0;position:absolute;transform:scale(1.25,2)}.dnb-breadcrumb__item:first-child .dnb-anchor{border-left:none}.dnb-breadcrumb__item:first-child .dnb-anchor .dnb-icon svg{margin-right:.5rem}.dnb-breadcrumb__multiple{display:flex;flex-direction:column;transition:height .4s var(--easing-default)}.dnb-breadcrumb__multiple .dnb-breadcrumb__item{transform:translateX(-1rem);transition:transform .4s var(--easing-default) calc(var(--delay)*50ms)}.dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item{transform:translateX(0)}html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item{transition:none}@media screen and (max-width:60em){.dnb-breadcrumb--variant-responsive .dnb-breadcrumb__bar .dnb-breadcrumb__multiple{display:none}}@media screen and (min-width:60em){.dnb-breadcrumb--variant-responsive .dnb-breadcrumb__toggle{display:none}}.dnb-breadcrumb__collapse{display:flex;flex-direction:column}.dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section{align-items:flex-start;flex-direction:column;margin:.5rem 0 .5rem 1.5rem;padding:0;row-gap:0}
+.dnb-breadcrumb{display:flex;flex-direction:column;margin:0;padding:0}.dnb-breadcrumb__bar.dnb-section{display:flex}.dnb-breadcrumb__list.dnb-section{align-items:center;-moz-column-gap:.5rem;column-gap:.5rem;display:flex;flex-flow:row wrap;list-style:none;margin:0;padding:0;row-gap:1rem}.dnb-breadcrumb__item{align-items:center;display:flex;padding:.5rem 0}.dnb-breadcrumb__item__span{align-items:center;display:flex;line-height:var(--line-height-basis)}.dnb-breadcrumb__item__span__icon{margin-right:.5rem}.dnb-breadcrumb__item .dnb-anchor{line-height:1.5rem;padding:0;position:relative}.dnb-breadcrumb__item .dnb-anchor:after{border:.5rem solid transparent;content:"";inset:0;position:absolute;transform:scale(1.25,2)}.dnb-breadcrumb__item:first-child .dnb-anchor{border-left:none}.dnb-breadcrumb__item:first-child .dnb-anchor .dnb-icon svg{margin-right:.5rem}.dnb-breadcrumb__multiple{display:flex;flex-direction:column;transition:height .4s var(--easing-default)}.dnb-breadcrumb__multiple .dnb-breadcrumb__item{transform:translateX(-1rem);transition:transform .4s var(--easing-default) calc(var(--delay)*50ms)}.dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item{transform:translateX(0)}html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item{transition:none}@media screen and (max-width:60em){.dnb-breadcrumb--variant-responsive .dnb-breadcrumb__bar .dnb-breadcrumb__multiple{display:none}}@media screen and (min-width:60em){.dnb-breadcrumb--variant-responsive .dnb-breadcrumb__toggle{display:none}}.dnb-breadcrumb__collapse{display:flex;flex-direction:column}.dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section{align-items:flex-start;flex-direction:column;margin:.5rem 0 .5rem 1.5rem;padding:0;row-gap:0}

package/cjs/components/breadcrumb/style/dnb-breadcrumb.scss

@@ -46,8 +46,8 @@
     }
 
     .dnb-anchor {
-      line-height: 1rem;
-      padding: 0.25rem 0;
+      line-height: 1.5rem;
+      padding: 0;
 
       // To make the click area bigger
       position: relative;

package/cjs/components/checkbox/CheckIcon.d.ts

@@ -0,0 +1,5 @@
+export type CheckIconProps = {
+    size: string;
+};
+declare function CheckIcon({ size, ...props }: CheckIconProps): import("react/jsx-runtime").JSX.Element;
+export default CheckIcon;

package/cjs/components/checkbox/CheckIcon.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+const _excluded = ["size"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function CheckIcon(_ref) {
+  let {
+      size
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  let vB = 16;
+  if (size === 'large') {
+    vB = 24;
+  }
+  return _react.default.createElement("svg", _extends({
+    width: vB,
+    height: vB,
+    viewBox: `0 0 ${vB} ${vB}`,
+    fill: "none",
+    className: "dnb-checkbox__gfx",
+    "aria-hidden": true
+  }, props), _react.default.createElement("path", {
+    d: size === 'large' ? 'M1.5 15L7.5 21L22.5 3' : 'M1 10L5 14L15 2',
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+}
+var _default = CheckIcon;
+exports.default = _default;
+//# sourceMappingURL=CheckIcon.js.map

package/cjs/components/checkbox/CheckIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckIcon.js","names":["_react","_interopRequireDefault","require","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","CheckIcon","_ref","size","props","vB","createElement","width","height","viewBox","fill","className","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","_default","exports"],"sources":["../../../../src/components/checkbox/CheckIcon.tsx"],"sourcesContent":["import React from 'react'\n\nexport type CheckIconProps = {\n  size: string\n}\n\n// The new checkbox has too low contrast, as it is too thin on web\nfunction CheckIcon({ size, ...props }: CheckIconProps) {\n  let vB = 16\n  if (size === 'large') {\n    vB = 24\n  }\n  return (\n    <svg\n      width={vB}\n      height={vB}\n      viewBox={`0 0 ${vB} ${vB}`}\n      fill=\"none\"\n      className=\"dnb-checkbox__gfx\"\n      aria-hidden\n      {...props}\n    >\n      <path\n        d={size === 'large' ? 'M1.5 15L7.5 21L22.5 3' : 'M1 10L5 14L15 2'}\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport default CheckIcon\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAyB,MAAAC,SAAA;AAAA,SAAAF,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AAAA,SAAAQ,yBAAAN,MAAA,EAAAO,QAAA,QAAAP,MAAA,yBAAAJ,MAAA,GAAAY,6BAAA,CAAAR,MAAA,EAAAO,QAAA,OAAAN,GAAA,EAAAJ,CAAA,MAAAJ,MAAA,CAAAgB,qBAAA,QAAAC,gBAAA,GAAAjB,MAAA,CAAAgB,qBAAA,CAAAT,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAAa,gBAAA,CAAAX,MAAA,EAAAF,CAAA,MAAAI,GAAA,GAAAS,gBAAA,CAAAb,CAAA,OAAAU,QAAA,CAAAI,OAAA,CAAAV,GAAA,uBAAAR,MAAA,CAAAS,SAAA,CAAAU,oBAAA,CAAAR,IAAA,CAAAJ,MAAA,EAAAC,GAAA,aAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,cAAAL,MAAA;AAAA,SAAAY,8BAAAR,MAAA,EAAAO,QAAA,QAAAP,MAAA,yBAAAJ,MAAA,WAAAiB,UAAA,GAAApB,MAAA,CAAAqB,IAAA,CAAAd,MAAA,OAAAC,GAAA,EAAAJ,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAgB,UAAA,CAAAd,MAAA,EAAAF,CAAA,MAAAI,GAAA,GAAAY,UAAA,CAAAhB,CAAA,OAAAU,QAAA,CAAAI,OAAA,CAAAV,GAAA,kBAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,YAAAL,MAAA;AAOzB,SAASmB,SAASA,CAAAC,IAAA,EAAqC;EAAA,IAApC;MAAEC;IAA+B,CAAC,GAAAD,IAAA;IAAvBE,KAAK,GAAAZ,wBAAA,CAAAU,IAAA,EAAA5B,SAAA;EACjC,IAAI+B,EAAE,GAAG,EAAE;EACX,IAAIF,IAAI,KAAK,OAAO,EAAE;IACpBE,EAAE,GAAG,EAAE;EACT;EACA,OACElC,MAAA,CAAAM,OAAA,CAAA6B,aAAA,QAAA5B,QAAA;IACE6B,KAAK,EAAEF,EAAG;IACVG,MAAM,EAAEH,EAAG;IACXI,OAAO,EAAG,OAAMJ,EAAG,IAAGA,EAAG,EAAE;IAC3BK,IAAI,EAAC,MAAM;IACXC,SAAS,EAAC,mBAAmB;IAC7B;EAAW,GACPP,KAAK,GAETjC,MAAA,CAAAM,OAAA,CAAA6B,aAAA;IACEM,CAAC,EAAET,IAAI,KAAK,OAAO,GAAG,uBAAuB,GAAG,iBAAkB;IAClEU,MAAM,EAAC,cAAc;IACrBC,WAAW,EAAC,KAAK;IACjBC,aAAa,EAAC,OAAO;IACrBC,cAAc,EAAC;EAAO,CACvB,CACE,CAAC;AAEV;AAAC,IAAAC,QAAA,GAEchB,SAAS;AAAAiB,OAAA,CAAAzC,OAAA,GAAAwC,QAAA"}

package/cjs/components/checkbox/Checkbox.d.ts

@@ -1,97 +1,95 @@
-import * as React from 'react';
-import type {
-  FormStatusProps,
-  FormStatusState,
-  FormStatusText
-} from '../FormStatus';
-import type { FormLabelText } from '../FormLabel';
-import type { SkeletonShow } from '../Skeleton';
+/**
+ * Web Checkbox Component
+ */
+import React from 'react';
 import type { SpacingProps } from '../space/types';
+import type { FormStatusProps, FormStatusState, FormStatusText } from '../FormStatus';
+import type { SkeletonShow } from '../Skeleton';
 import type { GlobalStatusConfigObject } from '../GlobalStatus';
 export type CheckboxLabelPosition = 'left' | 'right';
 export type CheckboxSize = 'default' | 'medium' | 'large';
-export type CheckboxSuffix =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
 export type CheckboxAttributes = string | Record<string, unknown>;
-export type CheckboxChildren = string | ((...args: any[]) => any);
-export interface CheckboxProps
-  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
-    SpacingProps {
-  /**
-   * Use either the `label` property or provide a custom one.
-   */
-  label?: FormLabelText;
-  /**
-   * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.
-   */
-  label_position?: CheckboxLabelPosition;
-  /**
-   * Use `true` to make the label only readable by screen readers.
-   */
-  label_sr_only?: boolean;
-  /**
-   * The `title` of the input - describing it a bit further for accessibility reasons.
-   */
-  title?: string;
-  element?: React.ReactNode;
-  /**
-   * Determine whether the checkbox is checked or not. The default is `false`.
-   */
-  checked?: boolean;
-  disabled?: boolean;
-  id?: string;
-  /**
-   * The size of the checkbox. For now there is "medium" (default) and "large".
-   */
-  size?: CheckboxSize;
-  /**
-   * 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.
-   */
-  status?: FormStatusText;
-  /**
-   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
-   */
-  status_state?: FormStatusState;
-  /**
-   * Use an object to define additional FormStatus properties. See [FormStatus](/uilib/components/form-status/properties/)
-   */
-  status_props?: FormStatusProps;
-  status_no_animation?: boolean;
-  /**
-   * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status)
-   */
-  globalStatus?: GlobalStatusConfigObject;
-  /**
-   * Text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component.
-   */
-  suffix?: CheckboxSuffix;
-  value?: string;
-  attributes?: CheckboxAttributes;
-  readOnly?: boolean;
-  /**
-   * If set to `true`, an overlaying skeleton with animation will be shown.
-   */
-  skeleton?: SkeletonShow;
-  class?: string;
-  className?: string;
-  children?: CheckboxChildren;
-  on_change?: (...args: any[]) => any;
-  on_state_update?: (...args: any[]) => any;
-  /**
-   * By providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.
-   */
-  innerRef?: React.Ref;
-}
-export default class Checkbox extends React.Component<CheckboxProps, any> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
-export interface CheckIconProps {
-  /**
-   * The size of the checkbox. For now there is "medium" (default) and "large".
-   */
-  size?: string;
-}
-export declare const CheckIcon: React.FC<CheckIconProps>;
+export type OnChangeParams = {
+    checked: boolean;
+    event: React.ChangeEvent<HTMLInputElement>;
+};
+export type CheckboxProps = {
+    /**
+     * Use either the `label` property or provide a custom one.
+     */
+    label?: React.ReactNode;
+    /**
+     * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.
+     */
+    labelPosition?: CheckboxLabelPosition;
+    /**
+     * Use `true` to make the label only readable by screen readers.
+     */
+    labelSrOnly?: boolean;
+    /**
+     * The `title` of the input - describing it a bit further for accessibility reasons.
+     */
+    title?: string;
+    /**
+     * Determine whether the checkbox is checked or not. The default is `false`.
+     */
+    checked?: boolean | undefined | null;
+    /**
+     * The size of the checkbox. For now there is "medium" (default) and "large".
+     */
+    size?: CheckboxSize;
+    /**
+     * 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.
+     */
+    status?: FormStatusText;
+    /**
+     * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
+     */
+    statusState?: FormStatusState;
+    /**
+     * Use an object to define additional FormStatus properties. See [FormStatus](/uilib/components/form-status/properties/)
+     */
+    statusProps?: FormStatusProps;
+    statusNoAnimation?: boolean;
+    /**
+     * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status)
+     */
+    globalStatus?: GlobalStatusConfigObject;
+    /**
+     * Text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component.
+     */
+    suffix?: React.ReactNode;
+    value?: string;
+    element?: React.ElementType;
+    attributes?: CheckboxAttributes;
+    /**
+     * If set to `true`, an overlaying skeleton with animation will be shown.
+     */
+    skeleton?: SkeletonShow;
+    /**
+     * Will be called on state changes made by the user. Returns an boolean `{ checked, event }`.
+     */
+    onChange?: (args: OnChangeParams) => void;
+    /**
+     * By providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.
+     */
+    innerRef?: React.MutableRefObject<HTMLInputElement> | ((elem: HTMLInputElement) => void);
+} & SpacingProps & Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'label' | 'size' | 'onChange'> & DeprecatedCheckboxProps;
+type DeprecatedCheckboxProps = {
+    /** @deprecated use the `label` prop instead */
+    children?: React.ReactNode;
+    /**  @deprecated use `onComplete` */
+    on_change?: (args: OnChangeParams) => void;
+    /**  @deprecated use `labelPosition` */
+    label_position?: CheckboxLabelPosition;
+    /**  @deprecated use `labelSrOnly` */
+    label_sr_only?: boolean;
+    /**  @deprecated use `statusState` */
+    status_state?: FormStatusState;
+    /**  @deprecated use `statusProps` */
+    status_props?: FormStatusProps;
+    /**  @deprecated use `statusNoAnimation` */
+    status_no_animation?: boolean;
+};
+declare function Checkbox(localProps: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export default Checkbox;