@dnb/eufemia 10.27.0 → 10.29.0

package/es/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/es/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/es/components/aria-live/useAriaLive.d.ts

@@ -22,7 +22,7 @@ export default function useAriaLive(props: AriaLiveAllProps): {
     style?: React.CSSProperties;
     tabIndex?: number;
     title?: string;
-    translate?: "no" | "yes";
+    translate?: "yes" | "no";
     radioGroup?: string;
     role?: React.AriaRole;
     about?: string;

package/es/components/autocomplete/Autocomplete.d.ts

@@ -40,10 +40,7 @@ type AutocompleteInputElement =
   | ((...args: any[]) => any)
   | React.ReactNode;
 type AutocompleteSearchInWordIndex = string | number;
-export interface AutocompleteProps
-  extends SpacingProps,
-    DrawerListProps,
-    Omit<React.HTMLProps<HTMLElement>, 'ref'> {
+export interface AutocompleteProps {
   /**
    * If set to `async`, it prevents showing the "no options" message during typing / filtering. Defaults to `sync`.
    */
@@ -206,6 +203,10 @@ export interface AutocompleteProps
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
   skeleton?: SkeletonShow;
+  /**
+   * Text describing the content of the Autocomplete more than the label. You can also send in a React component, so it gets wrapped inside the Autocomplete component.
+   */
+  suffix?: DrawerListSuffix;
   /**
    * Define a custom class for the internal drawer-list. This makes it possible more easily customize the drawer-list style with styled-components and the `css` style method. Defaults to `null`.
    */
@@ -216,8 +217,21 @@ export interface AutocompleteProps
   on_select?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;
 }
+export type AutocompleteAllProps = AutocompleteProps &
+  DrawerListProps &
+  SpacingProps &
+  Omit<
+    React.HTMLProps<HTMLElement>,
+    | 'ref'
+    | 'size'
+    | 'label'
+    | 'title'
+    | 'placeholder'
+    | 'data'
+    | 'children'
+  >;
 export default class Autocomplete extends React.Component<
-  AutocompleteProps,
+  AutocompleteAllProps,
   any
 > {
   static defaultProps: object;

package/es/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/es/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/es/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/es/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/es/components/checkbox/CheckIcon.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["size"];
+import React from 'react';
+function CheckIcon(_ref) {
+  let {
+      size
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  let vB = 16;
+  if (size === 'large') {
+    vB = 24;
+  }
+  return React.createElement("svg", _extends({
+    width: vB,
+    height: vB,
+    viewBox: `0 0 ${vB} ${vB}`,
+    fill: "none",
+    className: "dnb-checkbox__gfx",
+    "aria-hidden": true
+  }, props), React.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"
+  }));
+}
+export default CheckIcon;
+//# sourceMappingURL=CheckIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckIcon.js","names":["React","CheckIcon","_ref","size","props","_objectWithoutProperties","_excluded","vB","createElement","_extends","width","height","viewBox","fill","className","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin"],"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,OAAOA,KAAK,MAAM,OAAO;AAOzB,SAASC,SAASA,CAAAC,IAAA,EAAqC;EAAA,IAApC;MAAEC;IAA+B,CAAC,GAAAD,IAAA;IAAvBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EACjC,IAAIC,EAAE,GAAG,EAAE;EACX,IAAIJ,IAAI,KAAK,OAAO,EAAE;IACpBI,EAAE,GAAG,EAAE;EACT;EACA,OACEP,KAAA,CAAAQ,aAAA,QAAAC,QAAA;IACEC,KAAK,EAAEH,EAAG;IACVI,MAAM,EAAEJ,EAAG;IACXK,OAAO,EAAG,OAAML,EAAG,IAAGA,EAAG,EAAE;IAC3BM,IAAI,EAAC,MAAM;IACXC,SAAS,EAAC,mBAAmB;IAC7B;EAAW,GACPV,KAAK,GAETJ,KAAA,CAAAQ,aAAA;IACEO,CAAC,EAAEZ,IAAI,KAAK,OAAO,GAAG,uBAAuB,GAAG,iBAAkB;IAClEa,MAAM,EAAC,cAAc;IACrBC,WAAW,EAAC,KAAK;IACjBC,aAAa,EAAC,OAAO;IACrBC,cAAc,EAAC;EAAO,CACvB,CACE,CAAC;AAEV;AAEA,eAAelB,SAAS"}

package/es/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;