@dnb/eufemia 10.10.0 → 10.11.0

package/CHANGELOG.md

@@ -3,6 +3,53 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.11.0](https://github.com/dnbexperience/eufemia/compare/v10.10.0...v10.11.0) (2023-11-03)
+
+
+### :sparkles: Features
+
+* **breakpoints:** media query mixin offset options ([#2773](https://github.com/dnbexperience/eufemia/issues/2773)) ([d0c4c6d](https://github.com/dnbexperience/eufemia/commit/d0c4c6da965610b399eb9aa7d7a397b75670709e))
+* **Dropdown:** add Drawerlist theme for Sbanken ([#2649](https://github.com/dnbexperience/eufemia/issues/2649)) ([3a69d7c](https://github.com/dnbexperience/eufemia/commit/3a69d7c6112158bbf9ff25ae39f34520aabde852))
+* **FormLabel:** rewrite to TypeScript ([#2818](https://github.com/dnbexperience/eufemia/issues/2818)) ([2b3e419](https://github.com/dnbexperience/eufemia/commit/2b3e41997339be1e6a00be0c9220a9bc7e949492))
+* **forms:** add autocomplete (autofill) support ([#2811](https://github.com/dnbexperience/eufemia/issues/2811)) ([342556c](https://github.com/dnbexperience/eufemia/commit/342556c88e376e1ff75bbcf61e352ed9f37ef2d1))
+* **forms:** add Norwegian translation to country list ([#2814](https://github.com/dnbexperience/eufemia/issues/2814)) ([6073ab7](https://github.com/dnbexperience/eufemia/commit/6073ab793e521642587b7268c395c5f14849e049))
+* **forms:** reset `sessionStorageId` on submit ([#2812](https://github.com/dnbexperience/eufemia/issues/2812)) ([cbbd9e5](https://github.com/dnbexperience/eufemia/commit/cbbd9e5d2510a534b472d860947e6a0a1bee72a3))
+* **PaymentCard:** add styling for other card statuses ([#2777](https://github.com/dnbexperience/eufemia/issues/2777)) ([#2822](https://github.com/dnbexperience/eufemia/issues/2822)) ([195b083](https://github.com/dnbexperience/eufemia/commit/195b0835a89f3118befb9548f453bacd27c914cb))
+* **SASS:** add allBetween media query breakpoint mixin ([#2779](https://github.com/dnbexperience/eufemia/issues/2779)) ([1c8e8ef](https://github.com/dnbexperience/eufemia/commit/1c8e8ef526177ed84d045e30a000de0b3ee14110))
+* **Section:** add responsive props: breakout, outline, cornerRadius, backgroundColor, textColor and innerSpace ([#2791](https://github.com/dnbexperience/eufemia/issues/2791)) ([ed3ca99](https://github.com/dnbexperience/eufemia/commit/ed3ca9971c6e2b4533a391bc466590a6147bd160))
+* **skip-link:** sbanken styling ([#2785](https://github.com/dnbexperience/eufemia/issues/2785)) ([f6d9ea3](https://github.com/dnbexperience/eufemia/commit/f6d9ea34944d0ef0d373d8114020e8cf90665f52))
+* **Space:** add innerSpace prop with media query breakpoints support ([#2790](https://github.com/dnbexperience/eufemia/issues/2790)) ([3dffb90](https://github.com/dnbexperience/eufemia/commit/3dffb902132ea9bae3919c24b04783b15f474da9))
+* **Upload:** singular texts when uploading single file ([#2783](https://github.com/dnbexperience/eufemia/issues/2783)) ([cbf1cb9](https://github.com/dnbexperience/eufemia/commit/cbf1cb98e5f13bbae18e99fae11b92c0565471c9))
+
+
+### :bug: Bug Fixes
+
+* **Anchor:** position icon left with target blank sbanken ([#2797](https://github.com/dnbexperience/eufemia/issues/2797)) ([d2d1779](https://github.com/dnbexperience/eufemia/commit/d2d177974489f85e5dc5af888a1b255d6c39e4f1))
+* BreadcrumbItem when using to and element props ([#2813](https://github.com/dnbexperience/eufemia/issues/2813)) ([e7eff2d](https://github.com/dnbexperience/eufemia/commit/e7eff2d6767a746d699258175c19f0915e63c013))
+* **Breadcrumb:** Pass rest props to item when not interactive ([#2798](https://github.com/dnbexperience/eufemia/issues/2798)) ([72de227](https://github.com/dnbexperience/eufemia/commit/72de227ab05be94ef514f1f2fe78a34847203417)), closes [/github.com/dnbexperience/eufemia/pull/2676/files#r1368576095](https://github.com/dnbexperience//github.com/dnbexperience/eufemia/pull/2676/files/issues/r1368576095)
+* **FieldBlock:** add asFieldset property to force use fieldset/legend ([#2780](https://github.com/dnbexperience/eufemia/issues/2780)) ([bd1faed](https://github.com/dnbexperience/eufemia/commit/bd1faedb30e4e29987d8fa35e41b6d6fb3fe73dc))
+* **FieldBlock:** fix alignment issue when element is fieldset ([#2786](https://github.com/dnbexperience/eufemia/issues/2786)) ([544424b](https://github.com/dnbexperience/eufemia/commit/544424bddb7d245aeb6179f186e68a0e648ad621))
+* **forms:** enhance accessibility by using toggle buttons ([#2781](https://github.com/dnbexperience/eufemia/issues/2781)) ([aee0113](https://github.com/dnbexperience/eufemia/commit/aee0113382a216861e6c65ca08a15a834150b765))
+* **forms:** fix Form.Element type ([#2796](https://github.com/dnbexperience/eufemia/issues/2796)) ([0b5dfa7](https://github.com/dnbexperience/eufemia/commit/0b5dfa7807b11752bc197e2a8e512801b4bce398))
+* **forms:** Selection accessibility enhancement by using toggle buttons ([#2795](https://github.com/dnbexperience/eufemia/issues/2795)) ([6bc6062](https://github.com/dnbexperience/eufemia/commit/6bc6062cd107c4490e81bc5e121a47dbc65c115e))
+* **forms:** Support undefined in toggle and button fields ([#2775](https://github.com/dnbexperience/eufemia/issues/2775)) ([a22fad5](https://github.com/dnbexperience/eufemia/commit/a22fad521d60a41dac298f6e9fa1e4acf457e20e))
+* **GlobalStatus:** remove paragraph tag around title to allow children paragraphs ([#2800](https://github.com/dnbexperience/eufemia/issues/2800)) ([c0657bb](https://github.com/dnbexperience/eufemia/commit/c0657bb440cfaa9f65f657ae38391a493b91b892))
+* **NumberFormat:** show em dash instead of NaN ([#2784](https://github.com/dnbexperience/eufemia/issues/2784)) ([ca65f4a](https://github.com/dnbexperience/eufemia/commit/ca65f4a272a13ec21dd80c9c67a951bcae9c71b7))
+* **NumberMask:** as_number should default to locally given decimalSymbol ([#2810](https://github.com/dnbexperience/eufemia/issues/2810)) ([833f422](https://github.com/dnbexperience/eufemia/commit/833f422ef782a84e41932c09b6be082f8819b7c9))
+* **PhoneNumber:** fix spacing prop support ([#2815](https://github.com/dnbexperience/eufemia/issues/2815)) ([c57e7d1](https://github.com/dnbexperience/eufemia/commit/c57e7d1c324b1429700705ae9674e31602a3140f)), closes [#2807](https://github.com/dnbexperience/eufemia/issues/2807)
+* **TypeScript:** fix Grid and Flex export ([#2819](https://github.com/dnbexperience/eufemia/issues/2819)) ([5316fc0](https://github.com/dnbexperience/eufemia/commit/5316fc0d94af0f7384f2bd5793e001a0860cf5fb))
+* **TypeScript:** make dynamic element prop compatible with e.g. Styled Component elements ([#2778](https://github.com/dnbexperience/eufemia/issues/2778)) ([8a6b766](https://github.com/dnbexperience/eufemia/commit/8a6b7661c7e8e5c1c1eb6fc039f117839d9eb210))
+* **useMedia:** enhance SSR support by setting state during component mount ([#2774](https://github.com/dnbexperience/eufemia/issues/2774)) ([d72aa2b](https://github.com/dnbexperience/eufemia/commit/d72aa2b19bbbdaf4fbdde25269474d8c58037829))
+
+
+### :memo: Documentation
+
+* display anchors with icons using Anchor's icon prop ([#2801](https://github.com/dnbexperience/eufemia/issues/2801)) ([57e75ac](https://github.com/dnbexperience/eufemia/commit/57e75ac0833b3a19e011eee471efb5f8ea91709f))
+* **FieldBlock:** removes excessive properties header ([e5d9cbe](https://github.com/dnbexperience/eufemia/commit/e5d9cbe95c8be4589708e1ea93fac0bb943cff65))
+* **FieldBlock:** removes excessive properties header ([#2788](https://github.com/dnbexperience/eufemia/issues/2788)) ([bb739ea](https://github.com/dnbexperience/eufemia/commit/bb739eafd128bf77fbd7bc55085e18df42a8f49d))
+* **FormSet:** spelling in deprecation docs ([#2827](https://github.com/dnbexperience/eufemia/issues/2827)) ([1bcbf60](https://github.com/dnbexperience/eufemia/commit/1bcbf60f5c71cef2489046280b20e12a98f6c63a))
+* **PaymentCard:** sets card_number as required ([#2841](https://github.com/dnbexperience/eufemia/issues/2841)) ([b58978e](https://github.com/dnbexperience/eufemia/commit/b58978ed0a17335c98fec5e6fe09f8d5bd29a469))
+
 ## [10.10.0](https://github.com/dnbexperience/eufemia/compare/v10.9.0...v10.10.0) (2023-10-19)
 
 

package/cjs/components/accordion/Accordion.d.ts

@@ -124,9 +124,8 @@ export type AccordionProps = Omit<React.HTMLProps<HTMLElement>, 'ref'> & Spacing
 declare function Accordion({ variant, icon_size, ...restOfProps }: AccordionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Accordion {
     var defaultProps: Omit<React.HTMLProps<HTMLElement>, "ref"> & import("../space/types").SpacingElementProps & {
-        space?: import("../space/types").SpaceType | import("../space/types").SpacingElementProps; /**
-         * If set to `true` the accordion will be expanded as its initial state.
-         */
+        space?: import("../space/types").SpaceTypeAll;
+        innerSpace?: import("../space/types").SpaceTypeAll | import("../space/types").SpaceTypeMedia;
     } & {
         /**
          * A title as a string or React element. It will be used as the button text.

package/cjs/components/anchor/Anchor.d.ts

@@ -25,7 +25,8 @@ export type AnchorProps = {
 export type AnchorAllProps = AnchorProps & Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'> & SpacingProps;
 export declare function AnchorInstance(localProps: AnchorAllProps): import("react/jsx-runtime").JSX.Element;
 declare const Anchor: React.ForwardRefExoticComponent<AnchorProps & Omit<React.HTMLProps<HTMLAnchorElement>, "ref"> & import("../space/types").SpacingElementProps & {
-    space?: import("../space/types").SpaceType | import("../space/types").SpacingElementProps;
+    space?: import("../space/types").SpaceTypeAll;
+    innerSpace?: import("../space/types").SpaceTypeAll | import("../space/types").SpaceTypeMedia;
 } & React.RefAttributes<HTMLAnchorElement>>;
 export default Anchor;
 export declare function scrollToHashHandler(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>): {

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

@@ -83,14 +83,6 @@
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon {
   margin-right: 0;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left {
-  margin-left: 1.125em;
-}
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon {
-  font-size: 1em;
-  margin-right: 0.125em;
-  margin-left: -1.125em;
-}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right {
   margin-right: 1.125em;
 }
@@ -99,6 +91,14 @@
   margin-left: 0.125em;
   margin-right: -1.125em;
 }
+:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left {
+  margin-left: 1.125em;
+}
+:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-of-type {
+  font-size: 1em;
+  margin-right: 0.125em;
+  margin-left: -1.125em;
+}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left)::before {
   -webkit-text-decoration-color: var(--sb-color-green-dark);
           text-decoration-color: var(--sb-color-green-dark);
@@ -187,14 +187,6 @@
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon {
     margin-right: 0;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-left {
-    margin-left: 1.125em;
-  }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon {
-    font-size: 1em;
-    margin-right: 0.125em;
-    margin-left: -1.125em;
-  }
   :not(.dnb-anchor--no-style).dnb-anchor--icon-right {
     margin-right: 1.125em;
   }
@@ -203,6 +195,14 @@
     margin-left: 0.125em;
     margin-right: -1.125em;
   }
+  :not(.dnb-anchor--no-style).dnb-anchor--icon-left {
+    margin-left: 1.125em;
+  }
+  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-of-type {
+    font-size: 1em;
+    margin-right: 0.125em;
+    margin-left: -1.125em;
+  }
   :not(.dnb-anchor--no-style).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left)::before {
     -webkit-text-decoration-color: var(--sb-color-green-dark);
             text-decoration-color: var(--sb-color-green-dark);

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);border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--sb-font-weight-bold);padding:.15625em 0;-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--inline,:where(:not(.dnb-anchor--no-style)).dnb-anchor--no-underline,:where(:not(.dnb-anchor--no-style)).dnb-anchor--was-node{--anchor-background-gutter:0.25em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background),var(--anchor-background-gutter) 0 0 0 var(--anchor-background)}: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)).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)).dnb-anchor.focus-visible.dnb-anchor--icon-left{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-left{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-right{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-right{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left{margin-left:1.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon{font-size:1em;margin-left:-1.125em;margin-right:.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right{margin-right:1.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon{font-size:1em;margin-left:.125em;margin-right:-1.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left):before{content:" ";-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-right):after{content:" ";-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}@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);border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--sb-font-weight-bold);padding:.15625em 0;-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}:not(.dnb-anchor--no-style).dnb-anchor--inline,:not(.dnb-anchor--no-style).dnb-anchor--no-underline,:not(.dnb-anchor--no-style).dnb-anchor--was-node{--anchor-background-gutter:0.25em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background),var(--anchor-background-gutter) 0 0 0 var(--anchor-background)}: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).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).dnb-anchor.focus-visible.dnb-anchor--icon-left{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-left{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-right{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-right{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor--icon-left{margin-left:1.125em}:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon{font-size:1em;margin-left:-1.125em;margin-right:.125em}:not(.dnb-anchor--no-style).dnb-anchor--icon-right{margin-right:1.125em}:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon{font-size:1em;margin-left:.125em;margin-right:-1.125em}:not(.dnb-anchor--no-style).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left):before,:not(.dnb-anchor--no-style).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-right):after{content:" ";-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}}.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{text-decoration:none}.dnb-anchor--focus.dnb-anchor--icon-left,.dnb-anchor--focus.dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor--focus.dnb-anchor--icon-right,.dnb-anchor--focus.dnb-anchor--icon-right .dnb-icon{margin-right:0}.dnb-anchor--no-radius,.dnb-anchor--no-radius.focus-visible,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:hover{border-radius:0}.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{-webkit-text-decoration-color:currentcolor;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);border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--sb-font-weight-bold);padding:.15625em 0;-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--inline,:where(:not(.dnb-anchor--no-style)).dnb-anchor--no-underline,:where(:not(.dnb-anchor--no-style)).dnb-anchor--was-node{--anchor-background-gutter:0.25em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background),var(--anchor-background-gutter) 0 0 0 var(--anchor-background)}: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)).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)).dnb-anchor.focus-visible.dnb-anchor--icon-left{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-left{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-right{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-right{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor.focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right{margin-right:1.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon{font-size:1em;margin-left:.125em;margin-right:-1.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left{margin-left:1.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-of-type{font-size:1em;margin-left:-1.125em;margin-right:.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left):before{content:" ";-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-right):after{content:" ";-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}@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);border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--sb-font-weight-bold);padding:.15625em 0;-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}:not(.dnb-anchor--no-style).dnb-anchor--inline,:not(.dnb-anchor--no-style).dnb-anchor--no-underline,:not(.dnb-anchor--no-style).dnb-anchor--was-node{--anchor-background-gutter:0.25em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background),var(--anchor-background-gutter) 0 0 0 var(--anchor-background)}: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).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).dnb-anchor.focus-visible.dnb-anchor--icon-left{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-left{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-right{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-right{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor.focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor--icon-right{margin-right:1.125em}:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon{font-size:1em;margin-left:.125em;margin-right:-1.125em}:not(.dnb-anchor--no-style).dnb-anchor--icon-left{margin-left:1.125em}:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-of-type{font-size:1em;margin-left:-1.125em;margin-right:.125em}:not(.dnb-anchor--no-style).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left):before,:not(.dnb-anchor--no-style).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-right):after{content:" ";-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}}.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{text-decoration:none}.dnb-anchor--focus.dnb-anchor--icon-left,.dnb-anchor--focus.dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor--focus.dnb-anchor--icon-right,.dnb-anchor--focus.dnb-anchor--icon-right .dnb-icon{margin-right:0}.dnb-anchor--no-radius,.dnb-anchor--no-radius.focus-visible,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:hover{border-radius:0}.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{-webkit-text-decoration-color:currentcolor;text-decoration-color:currentcolor}

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

@@ -84,23 +84,23 @@
       @include anchorFocus();
     }
 
-    &--icon-left {
-      margin-left: 1em + $anchor-icon-gutter;
+    &--icon-right {
+      margin-right: 1em + $anchor-icon-gutter;
 
       .dnb-icon {
         font-size: 1em;
-        margin-right: $anchor-icon-gutter;
-        margin-left: -1em - $anchor-icon-gutter;
+        margin-left: $anchor-icon-gutter;
+        margin-right: -1em - $anchor-icon-gutter;
       }
     }
 
-    &--icon-right {
-      margin-right: 1em + $anchor-icon-gutter;
+    &--icon-left {
+      margin-left: 1em + $anchor-icon-gutter;
 
-      .dnb-icon {
+      .dnb-icon:first-of-type {
         font-size: 1em;
-        margin-left: $anchor-icon-gutter;
-        margin-right: -1em - $anchor-icon-gutter;
+        margin-right: $anchor-icon-gutter;
+        margin-left: -1em - $anchor-icon-gutter;
       }
     }
 

package/cjs/components/avatar/Avatar.d.ts

@@ -63,7 +63,8 @@ declare const Avatar: {
     (localProps: AvatarProps & SpacingProps): import("react/jsx-runtime").JSX.Element;
     Group: {
         (localProps: import("./AvatarGroup").AvatarGroupProps & import("../space/types").SpacingElementProps & {
-            space?: import("../space/types").SpaceType | import("../space/types").SpacingElementProps;
+            space?: import("../space/types").SpaceTypeAll;
+            innerSpace?: import("../space/types").SpaceTypeAll | import("../space/types").SpaceTypeMedia;
         }): import("react/jsx-runtime").JSX.Element;
         _supportsSpacingProps: boolean;
     };

package/cjs/components/breadcrumb/BreadcrumbItem.js

@@ -68,7 +68,7 @@ const BreadcrumbItem = localProps => {
     currentIcon = icon || determineSbankenIcon(variant, isSmallScreen);
   }
   const currentText = text || variant === 'home' && homeText || '';
-  const isInteractive = (href || onClick) && variant !== 'current';
+  const isInteractive = (href || onClick || props.to) && variant !== 'current';
   const style = {
     '--delay': String(itemNr)
   };
@@ -84,9 +84,9 @@ const BreadcrumbItem = localProps => {
     on_click: onClick,
     text: currentText,
     skeleton: skeleton
-  }, props)) : _react.default.createElement("span", {
+  }, props)) : _react.default.createElement("span", _extends({
     className: "dnb-breadcrumb__item__span"
-  }, _react.default.createElement(_IconPrimary.default, {
+  }, (0, _componentHelper.filterProps)(props, key => !key.includes('-'))), _react.default.createElement(_IconPrimary.default, {
     icon: currentIcon,
     className: "dnb-breadcrumb__item__span__icon"
   }), _react.default.createElement(_P.default, {

package/cjs/components/breadcrumb/BreadcrumbItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.js","names":["_react","_interopRequireDefault","require","_Button","_IconPrimary","_P","_home","_shared","_Context","_componentHelper","_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","defaultProps","text","href","icon","onClick","variant","skeleton","determineSbankenIcon","isSmallScreen","homeIcon","BreadcrumbItem","localProps","context","React","useContext","Context","translation","Breadcrumb","homeText","_extendPropsWithConte","extendPropsWithContext","itemNr","props","theme","useTheme","useMediaQuery","matchOnSSR","when","max","currentIcon","name","currentText","isInteractive","style","String","createElement","className","undefined","icon_position","on_click","space","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import React from 'react'\n\n// Components\nimport Button, { ButtonProps } from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\n\n// Elements\nimport P from '../../elements/P'\n\n// Icons\nimport homeIcon from '../../icons/home'\n\n// Shared\nimport { useTheme, useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport { extendPropsWithContext } from '../../shared/component-helper'\n\nexport type BreadcrumbItemProps = {\n  /**\n   * Text displaying the title of the item's corresponding page\n   * Default: If variant='home', default is \"Home\". Otherwise it is required.\n   */\n  text?: React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: HomeIcon / chevron_left\n   */\n  icon?: IconIcon\n\n  /**\n   * Href should be the link to the item's corresponding page.\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Set a custom click event. In this case, you should not define the prop href.\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.\n   * Default: null\n   */\n  variant?: 'home' | 'previous' | 'current'\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /** Internal */\n  itemNr?: number\n} & Omit<ButtonProps, 'variant'>\n\nconst defaultProps = {\n  text: null,\n  href: null,\n  icon: null,\n  onClick: null,\n  variant: null,\n  skeleton: null,\n}\n\nconst determineSbankenIcon: IconIcon = (\n  variant: string,\n  isSmallScreen: boolean\n) => {\n  switch (variant) {\n    case 'home':\n      return homeIcon\n    case 'single':\n    case 'collapse':\n      return 'chevron_left'\n    default:\n      return isSmallScreen ? 'chevron_left' : 'chevron_right'\n  }\n}\n\nconst BreadcrumbItem = (localProps: BreadcrumbItemProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const {\n    translation: {\n      Breadcrumb: { homeText },\n    },\n  } = context\n\n  // Extract additional props from global context\n  const {\n    text,\n    href,\n    icon,\n    onClick,\n    variant,\n    skeleton,\n    itemNr,\n    ...props\n  } = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.BreadcrumbItem\n  )\n\n  const theme = useTheme()\n  const isSmallScreen = useMediaQuery({\n    matchOnSSR: true,\n    when: { max: 'medium' },\n  })\n\n  let currentIcon =\n    icon || (variant === 'home' && homeIcon) || 'chevron_left'\n  if (theme?.name === 'sbanken') {\n    currentIcon = icon || determineSbankenIcon(variant, isSmallScreen)\n  }\n  const currentText = text || (variant === 'home' && homeText) || ''\n  const isInteractive = (href || onClick) && variant !== 'current'\n  const style = { '--delay': String(itemNr) } as React.CSSProperties\n\n  return (\n    <li\n      className=\"dnb-breadcrumb__item\"\n      aria-current={variant === 'current' ? 'page' : undefined}\n      style={style}\n    >\n      {isInteractive ? (\n        <Button\n          variant=\"tertiary\"\n          href={href}\n          icon={currentIcon}\n          icon_position=\"left\"\n          on_click={onClick}\n          text={currentText}\n          skeleton={skeleton}\n          {...props}\n        />\n      ) : (\n        <span className=\"dnb-breadcrumb__item__span\">\n          <IconPrimary\n            icon={currentIcon}\n            className=\"dnb-breadcrumb__item__span__icon\"\n          />\n          <P space=\"0\">{currentText}</P>\n        </span>\n      )}\n    </li>\n  )\n}\n\nBreadcrumbItem._supportsSpacingProps = true\n\nexport default BreadcrumbItem\n"],"mappings":"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"}
+{"version":3,"file":"BreadcrumbItem.js","names":["_react","_interopRequireDefault","require","_Button","_IconPrimary","_P","_home","_shared","_Context","_componentHelper","_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","defaultProps","text","href","icon","onClick","variant","skeleton","determineSbankenIcon","isSmallScreen","homeIcon","BreadcrumbItem","localProps","context","React","useContext","Context","translation","Breadcrumb","homeText","_extendPropsWithConte","extendPropsWithContext","itemNr","props","theme","useTheme","useMediaQuery","matchOnSSR","when","max","currentIcon","name","currentText","isInteractive","to","style","String","createElement","className","undefined","icon_position","on_click","filterProps","includes","space","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import React from 'react'\n\n// Components\nimport Button, { ButtonProps } from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\n\n// Elements\nimport P from '../../elements/P'\n\n// Icons\nimport homeIcon from '../../icons/home'\n\n// Shared\nimport { useTheme, useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  extendPropsWithContext,\n  filterProps,\n} from '../../shared/component-helper'\n\nexport type BreadcrumbItemProps = {\n  /**\n   * Text displaying the title of the item's corresponding page\n   * Default: If variant='home', default is \"Home\". Otherwise it is required.\n   */\n  text?: React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: HomeIcon / chevron_left\n   */\n  icon?: IconIcon\n\n  /**\n   * Href should be the link to the item's corresponding page.\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Set a custom click event. In this case, you should not define the prop href.\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.\n   * Default: null\n   */\n  variant?: 'home' | 'previous' | 'current'\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /** Internal */\n  itemNr?: number\n} & Omit<ButtonProps, 'variant'>\n\nconst defaultProps = {\n  text: null,\n  href: null,\n  icon: null,\n  onClick: null,\n  variant: null,\n  skeleton: null,\n}\n\nconst determineSbankenIcon: IconIcon = (\n  variant: string,\n  isSmallScreen: boolean\n) => {\n  switch (variant) {\n    case 'home':\n      return homeIcon\n    case 'single':\n    case 'collapse':\n      return 'chevron_left'\n    default:\n      return isSmallScreen ? 'chevron_left' : 'chevron_right'\n  }\n}\n\nconst BreadcrumbItem = (localProps: BreadcrumbItemProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const {\n    translation: {\n      Breadcrumb: { homeText },\n    },\n  } = context\n\n  // Extract additional props from global context\n  const {\n    text,\n    href,\n    icon,\n    onClick,\n    variant,\n    skeleton,\n    itemNr,\n    ...props\n  } = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.BreadcrumbItem\n  )\n\n  const theme = useTheme()\n  const isSmallScreen = useMediaQuery({\n    matchOnSSR: true,\n    when: { max: 'medium' },\n  })\n\n  let currentIcon =\n    icon || (variant === 'home' && homeIcon) || 'chevron_left'\n  if (theme?.name === 'sbanken') {\n    currentIcon = icon || determineSbankenIcon(variant, isSmallScreen)\n  }\n  const currentText = text || (variant === 'home' && homeText) || ''\n  const isInteractive =\n    (href || onClick || props.to) && variant !== 'current'\n  const style = { '--delay': String(itemNr) } as React.CSSProperties\n\n  return (\n    <li\n      className=\"dnb-breadcrumb__item\"\n      aria-current={variant === 'current' ? 'page' : undefined}\n      style={style}\n    >\n      {isInteractive ? (\n        <Button\n          variant=\"tertiary\"\n          href={href}\n          icon={currentIcon}\n          icon_position=\"left\"\n          on_click={onClick}\n          text={currentText}\n          skeleton={skeleton}\n          {...props}\n        />\n      ) : (\n        <span\n          className=\"dnb-breadcrumb__item__span\"\n          // TODO: Consider deprecating passing down props to span in v11\n          {...filterProps(props, (key) => !key.includes('-'))}\n        >\n          <IconPrimary\n            icon={currentIcon}\n            className=\"dnb-breadcrumb__item__span__icon\"\n          />\n          <P space=\"0\">{currentText}</P>\n        </span>\n      )}\n    </li>\n  )\n}\n\nBreadcrumbItem._supportsSpacingProps = true\n\nexport default BreadcrumbItem\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,YAAA,GAAAH,sBAAA,CAAAC,OAAA;AAIA,IAAAG,EAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAGA,IAAAI,KAAA,GAAAL,sBAAA,CAAAC,OAAA;AAGA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAP,sBAAA,CAAAC,OAAA;AAEA,IAAAO,gBAAA,GAAAP,OAAA;AAGsC,MAAAQ,SAAA;AAAA,SAAAT,uBAAAU,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;AA2CtC,MAAMmB,YAAY,GAAG;EACnBC,IAAI,EAAE,IAAI;EACVC,IAAI,EAAE,IAAI;EACVC,IAAI,EAAE,IAAI;EACVC,OAAO,EAAE,IAAI;EACbC,OAAO,EAAE,IAAI;EACbC,QAAQ,EAAE;AACZ,CAAC;AAED,MAAMC,oBAA8B,GAAGA,CACrCF,OAAe,EACfG,aAAsB,KACnB;EACH,QAAQH,OAAO;IACb,KAAK,MAAM;MACT,OAAOI,aAAQ;IACjB,KAAK,QAAQ;IACb,KAAK,UAAU;MACb,OAAO,cAAc;IACvB;MACE,OAAOD,aAAa,GAAG,cAAc,GAAG,eAAe;EAC3D;AACF,CAAC;AAED,MAAME,cAAc,GAAIC,UAA+B,IAAK;EAE1D,MAAMC,OAAO,GAAGC,cAAK,CAACC,UAAU,CAACC,gBAAO,CAAC;EACzC,MAAM;IACJC,WAAW,EAAE;MACXC,UAAU,EAAE;QAAEC;MAAS;IACzB;EACF,CAAC,GAAGN,OAAO;EAGX,MAAAO,qBAAA,GASI,IAAAC,uCAAsB,EACxBT,UAAU,EACVX,YAAY,EACZY,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,cACX,CAAC;IAbK;MACJT,IAAI;MACJC,IAAI;MACJC,IAAI;MACJC,OAAO;MACPC,OAAO;MACPC,QAAQ;MACRe;IAEF,CAAC,GAAAF,qBAAA;IADIG,KAAK,GAAA/B,wBAAA,CAAA4B,qBAAA,EAAA9C,SAAA;EAOV,MAAMkD,KAAK,GAAG,IAAAC,gBAAQ,EAAC,CAAC;EACxB,MAAMhB,aAAa,GAAG,IAAAiB,qBAAa,EAAC;IAClCC,UAAU,EAAE,IAAI;IAChBC,IAAI,EAAE;MAAEC,GAAG,EAAE;IAAS;EACxB,CAAC,CAAC;EAEF,IAAIC,WAAW,GACb1B,IAAI,IAAKE,OAAO,KAAK,MAAM,IAAII,aAAS,IAAI,cAAc;EAC5D,IAAI,CAAAc,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEO,IAAI,MAAK,SAAS,EAAE;IAC7BD,WAAW,GAAG1B,IAAI,IAAII,oBAAoB,CAACF,OAAO,EAAEG,aAAa,CAAC;EACpE;EACA,MAAMuB,WAAW,GAAG9B,IAAI,IAAKI,OAAO,KAAK,MAAM,IAAIa,QAAS,IAAI,EAAE;EAClE,MAAMc,aAAa,GACjB,CAAC9B,IAAI,IAAIE,OAAO,IAAIkB,KAAK,CAACW,EAAE,KAAK5B,OAAO,KAAK,SAAS;EACxD,MAAM6B,KAAK,GAAG;IAAE,SAAS,EAAEC,MAAM,CAACd,MAAM;EAAE,CAAwB;EAElE,OACE1D,MAAA,CAAAa,OAAA,CAAA4D,aAAA;IACEC,SAAS,EAAC,sBAAsB;IAChC,gBAAchC,OAAO,KAAK,SAAS,GAAG,MAAM,GAAGiC,SAAU;IACzDJ,KAAK,EAAEA;EAAM,GAEZF,aAAa,GACZrE,MAAA,CAAAa,OAAA,CAAA4D,aAAA,CAACtE,OAAA,CAAAU,OAAM,EAAAC,QAAA;IACL4B,OAAO,EAAC,UAAU;IAClBH,IAAI,EAAEA,IAAK;IACXC,IAAI,EAAE0B,WAAY;IAClBU,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEpC,OAAQ;IAClBH,IAAI,EAAE8B,WAAY;IAClBzB,QAAQ,EAAEA;EAAS,GACfgB,KAAK,CACV,CAAC,GAEF3D,MAAA,CAAAa,OAAA,CAAA4D,aAAA,SAAA3D,QAAA;IACE4D,SAAS,EAAC;EAA4B,GAElC,IAAAI,4BAAW,EAACnB,KAAK,EAAGpC,GAAG,IAAK,CAACA,GAAG,CAACwD,QAAQ,CAAC,GAAG,CAAC,CAAC,GAEnD/E,MAAA,CAAAa,OAAA,CAAA4D,aAAA,CAACrE,YAAA,CAAAS,OAAW;IACV2B,IAAI,EAAE0B,WAAY;IAClBQ,SAAS,EAAC;EAAkC,CAC7C,CAAC,EACF1E,MAAA,CAAAa,OAAA,CAAA4D,aAAA,CAACpE,EAAA,CAAAQ,OAAC;IAACmE,KAAK,EAAC;EAAG,GAAEZ,WAAe,CACzB,CAEN,CAAC;AAET,CAAC;AAEDrB,cAAc,CAACkC,qBAAqB,GAAG,IAAI;AAAA,IAAAC,QAAA,GAE5BnC,cAAc;AAAAoC,OAAA,CAAAtE,OAAA,GAAAqE,QAAA"}

package/cjs/components/button/Button.d.ts

@@ -159,5 +159,6 @@ export type ButtonProps = {
 > &
   SpacingProps;
 export default class Button extends React.Component<ButtonProps, any> {
+  static defaultProps: object;
   render(): JSX.Element;
 }

package/cjs/components/date-picker/style/dnb-date-picker.css

@@ -412,7 +412,6 @@ html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus {
   margin: 0;
   padding: 0;
   border: none;
-  line-height: var(--font-size-basis--em);
 }
 
 @keyframes date-picker-slide-down {

package/cjs/components/date-picker/style/dnb-date-picker.min.css

@@ -1 +1 @@
-.dnb-date-picker{--date-picker-input-height:2rem;--date-picker-day-width:2rem;--date-picker-day-horizontal-spacing:4px;align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-date-picker__inner{display:inline-flex;flex-direction:column;line-height:var(--date-picker-input-height)}.dnb-date-picker__row{display:inline-flex}.dnb-date-picker__shell{display:inline-flex;flex-direction:column;position:relative;top:0}.dnb-date-picker__input__wrapper{display:inline-flex;height:inherit;white-space:nowrap}.dnb-date-picker__container{display:block;left:-1rem;position:absolute;top:var(--date-picker-input-height);z-index:3}.dnb-date-picker--small .dnb-date-picker__container{top:1.5rem}.dnb-date-picker--medium .dnb-date-picker__container{top:2.5rem}.dnb-date-picker--large .dnb-date-picker__container{top:3rem}.dnb-date-picker--show-input .dnb-date-picker__container{left:0}.dnb-date-picker--right .dnb-date-picker__container{left:auto;right:-1rem}.dnb-date-picker--show-input.dnb-date-picker--right .dnb-date-picker__container{left:auto;right:0}.dnb-date-picker--opened .dnb-date-picker__container{z-index:100}.dnb-date-picker--opened .dnb-date-picker__container:not(.dnb-date-picker--opened .dnb-date-picker__container--no-animation){animation:date-picker-slide-down .2s ease-out 1 forwards}.dnb-date-picker--opened .dnb-date-picker__container--no-animation,html[data-visual-test] .dnb-date-picker--opened .dnb-date-picker__container{animation:date-picker-slide-down 1ms ease-out 1 forwards}.dnb-date-picker--hidden .dnb-date-picker__container{display:none}.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container:not(.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation){animation:date-picker-slide-up .15s ease-out 1 forwards}.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation,html[data-visual-test] .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container{animation:date-picker-slide-up 1ms ease-out 1 forwards}.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{background:transparent;border:none;display:inline-block;font-family:var(--font-family-monospace);margin:0;outline:none;overflow:visible;padding:0 .125rem;text-align:center;transform:translateY(0);white-space:nowrap;width:auto}@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{margin:0 -4px}}@supports (-ms-ime-align:auto){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{margin:0 -5px}}@supports (-webkit-touch-callout:none){.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin:0}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin:0 -4px}.dnb-core-style .dnb-date-picker__input:first-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type:not(:root),.dnb-date-picker__input:first-of-type:not(:root){margin-left:.8rem}.dnb-core-style .dnb-date-picker__input:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type:not(:root),.dnb-date-picker__input:last-of-type:not(:root){margin-right:2.2rem}}.dnb-core-style .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-core-style .dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small.dnb-date-picker__input--small,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small.dnb-date-picker__input--small,.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-date-picker__input--small.dnb-date-picker__input--small{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--small:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small:last-of-type:not(:root),.dnb-date-picker__input--small:last-of-type:not(:root){margin-right:2.2rem}.dnb-core-style .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-core-style .dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium.dnb-date-picker__input--medium,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium.dnb-date-picker__input--medium,.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-date-picker__input--medium.dnb-date-picker__input--medium{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--medium:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium:last-of-type:not(:root),.dnb-date-picker__input--medium:last-of-type:not(:root){margin-right:3.2rem}.dnb-core-style .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-core-style .dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large.dnb-date-picker__input--large,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large.dnb-date-picker__input--large,.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-date-picker__input--large.dnb-date-picker__input--large{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--large:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large:last-of-type:not(:root),.dnb-date-picker__input--large:last-of-type:not(:root){margin-right:4rem}.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type,.dnb-date-picker__input:first-of-type{margin-left:.8rem}.dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type,.dnb-date-picker__input:last-of-type{margin-right:2.2rem}.dnb-date-picker .dnb-input__shell{display:none}.dnb-date-picker--show-input .dnb-input__shell{display:flex}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__status--error .dnb-input__shell{box-shadow:none}.dnb-input__submit-button button:focus~.dnb-date-picker__input__wrapper{display:block}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-element,.dnb-input__submit-element>.dnb-date-picker .dnb-input__submit-element{margin-left:0}.dnb-date-picker__views{display:flex;user-select:none;-webkit-user-select:none}@media screen and (max-width:60em){.dnb-date-picker__views{flex-direction:column}}.dnb-date-picker__calendar{padding:1rem;position:relative}.dnb-date-picker__calendar:after{bottom:0;content:"";height:1px;position:absolute;width:calc(100% - 2rem)}.dnb-date-picker:not(.dnb-date-picker--show-footer) .dnb-date-picker__calendar:after{content:none}.dnb-date-picker__header{height:2.5rem;line-height:var(--line-height-basis)}.dnb-date-picker__addon,.dnb-date-picker__header{display:flex;justify-content:space-between;padding-bottom:1rem;position:relative}.dnb-date-picker__addon:after,.dnb-date-picker__header:after{bottom:0;content:"";height:1px;position:absolute;width:100%}.dnb-date-picker__addon{grid-gap:1rem;display:flex;flex-flow:row wrap;gap:1rem;justify-content:flex-start;padding:1rem}.dnb-date-picker__addon:after{left:1rem;width:calc(100% - 2rem)}.dnb-date-picker__footer{display:flex;justify-content:space-between;padding:1rem;position:relative}.dnb-date-picker__labels__day{padding-bottom:.5rem;padding-top:1.5rem}.dnb-date-picker__days,.dnb-date-picker__labels{display:flex;flex-wrap:wrap;list-style:none;margin:0;max-width:18rem;min-width:18rem;padding:0}.dnb-date-picker table{margin:0;position:relative;z-index:1}.dnb-date-picker table.dnb-no-focus:focus{outline:none}html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-date-picker__day,.dnb-date-picker__labels__day{display:flex;flex-basis:14.2857142857%;justify-content:center}.dnb-date-picker__day{margin:var(--date-picker-day-horizontal-spacing) 0;position:relative}.dnb-date-picker__day,.dnb-date-picker__day .dnb-button{height:var(--date-picker-day-width);width:var(--date-picker-day-width)}.dnb-date-picker__day .dnb-button{box-shadow:none;position:absolute;top:0;white-space:nowrap}.dnb-date-picker__day .dnb-button__bounding{border-radius:0;transform:scale(1.28)}.dnb-date-picker__day .dnb-button__text{transform:translateY(0)}.dnb-date-picker__day--selectable:hover{z-index:2}.dnb-date-picker__day--end-date .dnb-button,.dnb-date-picker__day--start-date .dnb-button{z-index:1}.dnb-date-picker__day--end-date,.dnb-date-picker__day--start-date{position:relative}.dnb-date-picker__day--end-date:after,.dnb-date-picker__day--start-date:after{content:"";height:100%;position:absolute;top:0;width:calc(var(--date-picker-day-width)/2)}.dnb-date-picker__day--start-date:after{left:auto;right:0}.dnb-date-picker__day--end-date:after{left:0;right:auto}.dnb-date-picker__day--start-date.dnb-date-picker__day--end-date:after{content:none}.dnb-date-picker__triangle{margin:0 1.5rem;overflow:hidden;pointer-events:none;right:auto;top:calc(2px - var(--date-picker-input-height)/2)}.dnb-date-picker__triangle,.dnb-date-picker__triangle:before{height:calc(var(--date-picker-input-height)/2);left:0;position:absolute;width:calc(var(--date-picker-input-height)/2)}.dnb-date-picker__triangle:before{background-color:var(--color-white);border:1px solid var(--color-black-border);content:"";top:0;transform:translateY(60%) rotate(45deg)}.dnb-date-picker--right .dnb-date-picker__triangle{left:auto;right:0}.dnb-date-picker .rtl{direction:rtl}.dnb-date-picker .rtl .dnb-date-picker__next:before,.dnb-date-picker .rtl .dnb-date-picker__prev:before{transform:scaleX(-1)}.dnb-date-picker__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-date-picker--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-date-picker>.dnb-form-label{line-height:var(--line-height-basis)}@media screen and (max-width:40em){.dnb-date-picker{flex-wrap:wrap}.dnb-date-picker>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-date-picker--stretch{display:flex;flex-grow:1}.dnb-date-picker--stretch .dnb-date-picker__inner,.dnb-date-picker--stretch .dnb-date-picker__shell,.dnb-form-row--horizontal .dnb-date-picker--stretch{width:100%}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]{align-items:flex-start}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-button .dnb-button{border-radius:50%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-date-picker{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker>.dnb-form-label{margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker__helper{display:none}}.dnb-date-picker .dnb-input__submit-button .dnb-button.dnb-skeleton{visibility:hidden}.dnb-core-style .dnb-date-picker__fieldset,.dnb-date-picker__fieldset{border:none;line-height:var(--font-size-basis--em);margin:0;padding:0}@keyframes date-picker-slide-down{0%{opacity:0}to{opacity:1}}@keyframes date-picker-slide-up{0%{opacity:1}to{opacity:0}}
+.dnb-date-picker{--date-picker-input-height:2rem;--date-picker-day-width:2rem;--date-picker-day-horizontal-spacing:4px;align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-date-picker__inner{display:inline-flex;flex-direction:column;line-height:var(--date-picker-input-height)}.dnb-date-picker__row{display:inline-flex}.dnb-date-picker__shell{display:inline-flex;flex-direction:column;position:relative;top:0}.dnb-date-picker__input__wrapper{display:inline-flex;height:inherit;white-space:nowrap}.dnb-date-picker__container{display:block;left:-1rem;position:absolute;top:var(--date-picker-input-height);z-index:3}.dnb-date-picker--small .dnb-date-picker__container{top:1.5rem}.dnb-date-picker--medium .dnb-date-picker__container{top:2.5rem}.dnb-date-picker--large .dnb-date-picker__container{top:3rem}.dnb-date-picker--show-input .dnb-date-picker__container{left:0}.dnb-date-picker--right .dnb-date-picker__container{left:auto;right:-1rem}.dnb-date-picker--show-input.dnb-date-picker--right .dnb-date-picker__container{left:auto;right:0}.dnb-date-picker--opened .dnb-date-picker__container{z-index:100}.dnb-date-picker--opened .dnb-date-picker__container:not(.dnb-date-picker--opened .dnb-date-picker__container--no-animation){animation:date-picker-slide-down .2s ease-out 1 forwards}.dnb-date-picker--opened .dnb-date-picker__container--no-animation,html[data-visual-test] .dnb-date-picker--opened .dnb-date-picker__container{animation:date-picker-slide-down 1ms ease-out 1 forwards}.dnb-date-picker--hidden .dnb-date-picker__container{display:none}.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container:not(.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation){animation:date-picker-slide-up .15s ease-out 1 forwards}.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation,html[data-visual-test] .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container{animation:date-picker-slide-up 1ms ease-out 1 forwards}.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{background:transparent;border:none;display:inline-block;font-family:var(--font-family-monospace);margin:0;outline:none;overflow:visible;padding:0 .125rem;text-align:center;transform:translateY(0);white-space:nowrap;width:auto}@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{margin:0 -4px}}@supports (-ms-ime-align:auto){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{margin:0 -5px}}@supports (-webkit-touch-callout:none){.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin:0}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin:0 -4px}.dnb-core-style .dnb-date-picker__input:first-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type:not(:root),.dnb-date-picker__input:first-of-type:not(:root){margin-left:.8rem}.dnb-core-style .dnb-date-picker__input:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type:not(:root),.dnb-date-picker__input:last-of-type:not(:root){margin-right:2.2rem}}.dnb-core-style .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-core-style .dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small.dnb-date-picker__input--small,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small.dnb-date-picker__input--small,.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-date-picker__input--small.dnb-date-picker__input--small{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--small:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small:last-of-type:not(:root),.dnb-date-picker__input--small:last-of-type:not(:root){margin-right:2.2rem}.dnb-core-style .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-core-style .dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium.dnb-date-picker__input--medium,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium.dnb-date-picker__input--medium,.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-date-picker__input--medium.dnb-date-picker__input--medium{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--medium:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium:last-of-type:not(:root),.dnb-date-picker__input--medium:last-of-type:not(:root){margin-right:3.2rem}.dnb-core-style .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-core-style .dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large.dnb-date-picker__input--large,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large.dnb-date-picker__input--large,.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-date-picker__input--large.dnb-date-picker__input--large{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--large:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large:last-of-type:not(:root),.dnb-date-picker__input--large:last-of-type:not(:root){margin-right:4rem}.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type,.dnb-date-picker__input:first-of-type{margin-left:.8rem}.dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type,.dnb-date-picker__input:last-of-type{margin-right:2.2rem}.dnb-date-picker .dnb-input__shell{display:none}.dnb-date-picker--show-input .dnb-input__shell{display:flex}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__status--error .dnb-input__shell{box-shadow:none}.dnb-input__submit-button button:focus~.dnb-date-picker__input__wrapper{display:block}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-element,.dnb-input__submit-element>.dnb-date-picker .dnb-input__submit-element{margin-left:0}.dnb-date-picker__views{display:flex;user-select:none;-webkit-user-select:none}@media screen and (max-width:60em){.dnb-date-picker__views{flex-direction:column}}.dnb-date-picker__calendar{padding:1rem;position:relative}.dnb-date-picker__calendar:after{bottom:0;content:"";height:1px;position:absolute;width:calc(100% - 2rem)}.dnb-date-picker:not(.dnb-date-picker--show-footer) .dnb-date-picker__calendar:after{content:none}.dnb-date-picker__header{height:2.5rem;line-height:var(--line-height-basis)}.dnb-date-picker__addon,.dnb-date-picker__header{display:flex;justify-content:space-between;padding-bottom:1rem;position:relative}.dnb-date-picker__addon:after,.dnb-date-picker__header:after{bottom:0;content:"";height:1px;position:absolute;width:100%}.dnb-date-picker__addon{grid-gap:1rem;display:flex;flex-flow:row wrap;gap:1rem;justify-content:flex-start;padding:1rem}.dnb-date-picker__addon:after{left:1rem;width:calc(100% - 2rem)}.dnb-date-picker__footer{display:flex;justify-content:space-between;padding:1rem;position:relative}.dnb-date-picker__labels__day{padding-bottom:.5rem;padding-top:1.5rem}.dnb-date-picker__days,.dnb-date-picker__labels{display:flex;flex-wrap:wrap;list-style:none;margin:0;max-width:18rem;min-width:18rem;padding:0}.dnb-date-picker table{margin:0;position:relative;z-index:1}.dnb-date-picker table.dnb-no-focus:focus{outline:none}html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-date-picker__day,.dnb-date-picker__labels__day{display:flex;flex-basis:14.2857142857%;justify-content:center}.dnb-date-picker__day{margin:var(--date-picker-day-horizontal-spacing) 0;position:relative}.dnb-date-picker__day,.dnb-date-picker__day .dnb-button{height:var(--date-picker-day-width);width:var(--date-picker-day-width)}.dnb-date-picker__day .dnb-button{box-shadow:none;position:absolute;top:0;white-space:nowrap}.dnb-date-picker__day .dnb-button__bounding{border-radius:0;transform:scale(1.28)}.dnb-date-picker__day .dnb-button__text{transform:translateY(0)}.dnb-date-picker__day--selectable:hover{z-index:2}.dnb-date-picker__day--end-date .dnb-button,.dnb-date-picker__day--start-date .dnb-button{z-index:1}.dnb-date-picker__day--end-date,.dnb-date-picker__day--start-date{position:relative}.dnb-date-picker__day--end-date:after,.dnb-date-picker__day--start-date:after{content:"";height:100%;position:absolute;top:0;width:calc(var(--date-picker-day-width)/2)}.dnb-date-picker__day--start-date:after{left:auto;right:0}.dnb-date-picker__day--end-date:after{left:0;right:auto}.dnb-date-picker__day--start-date.dnb-date-picker__day--end-date:after{content:none}.dnb-date-picker__triangle{margin:0 1.5rem;overflow:hidden;pointer-events:none;right:auto;top:calc(2px - var(--date-picker-input-height)/2)}.dnb-date-picker__triangle,.dnb-date-picker__triangle:before{height:calc(var(--date-picker-input-height)/2);left:0;position:absolute;width:calc(var(--date-picker-input-height)/2)}.dnb-date-picker__triangle:before{background-color:var(--color-white);border:1px solid var(--color-black-border);content:"";top:0;transform:translateY(60%) rotate(45deg)}.dnb-date-picker--right .dnb-date-picker__triangle{left:auto;right:0}.dnb-date-picker .rtl{direction:rtl}.dnb-date-picker .rtl .dnb-date-picker__next:before,.dnb-date-picker .rtl .dnb-date-picker__prev:before{transform:scaleX(-1)}.dnb-date-picker__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-date-picker--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-date-picker>.dnb-form-label{line-height:var(--line-height-basis)}@media screen and (max-width:40em){.dnb-date-picker{flex-wrap:wrap}.dnb-date-picker>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-date-picker--stretch{display:flex;flex-grow:1}.dnb-date-picker--stretch .dnb-date-picker__inner,.dnb-date-picker--stretch .dnb-date-picker__shell,.dnb-form-row--horizontal .dnb-date-picker--stretch{width:100%}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]{align-items:flex-start}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-button .dnb-button{border-radius:50%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-date-picker{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker>.dnb-form-label{margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker__helper{display:none}}.dnb-date-picker .dnb-input__submit-button .dnb-button.dnb-skeleton{visibility:hidden}.dnb-core-style .dnb-date-picker__fieldset,.dnb-date-picker__fieldset{border:none;margin:0;padding:0}@keyframes date-picker-slide-down{0%{opacity:0}to{opacity:1}}@keyframes date-picker-slide-up{0%{opacity:1}to{opacity:0}}

package/cjs/components/dialog/parts/DialogBody.js

@@ -20,7 +20,7 @@ function DialogBody(_ref) {
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return _react.default.createElement(_ModalInner.default, _extends({}, props, {
-    style_type: styleType,
+    backgroundColor: styleType,
     className: (0, _classnames.default)('dnb-dialog__body', className)
   }));
 }

package/cjs/components/dialog/parts/DialogBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogBody.js","names":["_react","_interopRequireDefault","require","_classnames","_ModalInner","_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","DialogBody","_ref","className","styleType","ref","props","createElement","style_type","classnames"],"sources":["../../../../../src/components/dialog/parts/DialogBody.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ModalInner, { ModalInnerProps } from '../../modal/parts/ModalInner'\nimport type { SectionStyleTypes } from '../../Section'\n\ninterface DialogBodyProps extends ModalInnerProps {\n  /**\n   * Give the inner content wrapper a class name (maps to `dnb-dialog__body`).\n   */\n  className?: string\n\n  /**\n   * Color/Style of the dialog body\n   */\n  styleType?: SectionStyleTypes\n}\n\nexport default function DialogBody({\n  className,\n  styleType,\n  ref, //eslint-disable-line\n  ...props\n}: DialogBodyProps & React.HTMLProps<HTMLElement>) {\n  return (\n    <ModalInner\n      {...props}\n      style_type={styleType}\n      className={classnames('dnb-dialog__body', className)}\n    />\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAH,sBAAA,CAAAC,OAAA;AAA0E,MAAAG,SAAA;AAAA,SAAAJ,uBAAAK,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;AAe3D,SAASmB,UAAUA,CAAAC,IAAA,EAKiB;EAAA,IALhB;MACjCC,SAAS;MACTC,SAAS;MACTC;IAE8C,CAAC,GAAAH,IAAA;IAD5CI,KAAK,GAAAd,wBAAA,CAAAU,IAAA,EAAA5B,SAAA;EAER,OACEL,MAAA,CAAAQ,OAAA,CAAA8B,aAAA,CAAClC,WAAA,CAAAI,OAAU,EAAAC,QAAA,KACL4B,KAAK;IACTE,UAAU,EAAEJ,SAAU;IACtBD,SAAS,EAAE,IAAAM,mBAAU,EAAC,kBAAkB,EAAEN,SAAS;EAAE,EACtD,CAAC;AAEN"}
+{"version":3,"file":"DialogBody.js","names":["_react","_interopRequireDefault","require","_classnames","_ModalInner","_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","DialogBody","_ref","className","styleType","ref","props","createElement","backgroundColor","classnames"],"sources":["../../../../../src/components/dialog/parts/DialogBody.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ModalInner, { ModalInnerProps } from '../../modal/parts/ModalInner'\nimport type { SectionStyleTypes } from '../../Section'\n\ninterface DialogBodyProps extends ModalInnerProps {\n  /**\n   * Give the inner content wrapper a class name (maps to `dnb-dialog__body`).\n   */\n  className?: string\n\n  /**\n   * Color/Style of the dialog body\n   */\n  styleType?: SectionStyleTypes\n}\n\nexport default function DialogBody({\n  className,\n  styleType,\n  ref, //eslint-disable-line\n  ...props\n}: DialogBodyProps & React.HTMLProps<HTMLElement>) {\n  return (\n    <ModalInner\n      {...props}\n      backgroundColor={styleType}\n      className={classnames('dnb-dialog__body', className)}\n    />\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAH,sBAAA,CAAAC,OAAA;AAA0E,MAAAG,SAAA;AAAA,SAAAJ,uBAAAK,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;AAe3D,SAASmB,UAAUA,CAAAC,IAAA,EAKiB;EAAA,IALhB;MACjCC,SAAS;MACTC,SAAS;MACTC;IAE8C,CAAC,GAAAH,IAAA;IAD5CI,KAAK,GAAAd,wBAAA,CAAAU,IAAA,EAAA5B,SAAA;EAER,OACEL,MAAA,CAAAQ,OAAA,CAAA8B,aAAA,CAAClC,WAAA,CAAAI,OAAU,EAAAC,QAAA,KACL4B,KAAK;IACTE,eAAe,EAAEJ,SAAU;IAC3BD,SAAS,EAAE,IAAAM,mBAAU,EAAC,kBAAkB,EAAEN,SAAS;EAAE,EACtD,CAAC;AAEN"}

package/cjs/components/drawer/parts/DrawerBody.js

@@ -20,7 +20,7 @@ function DrawerBody(_ref) {
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return _react.default.createElement(_ModalInner.default, _extends({}, props, {
-    style_type: styleType,
+    backgroundColor: styleType,
     className: (0, _classnames.default)('dnb-drawer__body', className)
   }));
 }

package/cjs/components/drawer/parts/DrawerBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerBody.js","names":["_react","_interopRequireDefault","require","_classnames","_ModalInner","_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","DrawerBody","_ref","className","styleType","ref","props","createElement","style_type","classnames"],"sources":["../../../../../src/components/drawer/parts/DrawerBody.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ModalInner, { ModalInnerProps } from '../../modal/parts/ModalInner'\nimport type { SectionStyleTypes } from '../../Section'\n\ninterface DrawerBodyProps extends ModalInnerProps {\n  /**\n   * Give the inner content wrapper a class name (maps to `dnb-drawer__body`).\n   */\n  className?: string\n\n  /**\n   * Color/Style of the drawer body\n   */\n  styleType?: SectionStyleTypes\n}\n\nexport default function DrawerBody({\n  className,\n  styleType,\n  ref, //eslint-disable-line\n  ...props\n}: DrawerBodyProps & React.HTMLProps<HTMLElement>) {\n  return (\n    <ModalInner\n      {...props}\n      style_type={styleType}\n      className={classnames('dnb-drawer__body', className)}\n    />\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAH,sBAAA,CAAAC,OAAA;AAA0E,MAAAG,SAAA;AAAA,SAAAJ,uBAAAK,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;AAe3D,SAASmB,UAAUA,CAAAC,IAAA,EAKiB;EAAA,IALhB;MACjCC,SAAS;MACTC,SAAS;MACTC;IAE8C,CAAC,GAAAH,IAAA;IAD5CI,KAAK,GAAAd,wBAAA,CAAAU,IAAA,EAAA5B,SAAA;EAER,OACEL,MAAA,CAAAQ,OAAA,CAAA8B,aAAA,CAAClC,WAAA,CAAAI,OAAU,EAAAC,QAAA,KACL4B,KAAK;IACTE,UAAU,EAAEJ,SAAU;IACtBD,SAAS,EAAE,IAAAM,mBAAU,EAAC,kBAAkB,EAAEN,SAAS;EAAE,EACtD,CAAC;AAEN"}
+{"version":3,"file":"DrawerBody.js","names":["_react","_interopRequireDefault","require","_classnames","_ModalInner","_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","DrawerBody","_ref","className","styleType","ref","props","createElement","backgroundColor","classnames"],"sources":["../../../../../src/components/drawer/parts/DrawerBody.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ModalInner, { ModalInnerProps } from '../../modal/parts/ModalInner'\nimport type { SectionStyleTypes } from '../../Section'\n\ninterface DrawerBodyProps extends ModalInnerProps {\n  /**\n   * Give the inner content wrapper a class name (maps to `dnb-drawer__body`).\n   */\n  className?: string\n\n  /**\n   * Color/Style of the drawer body\n   */\n  styleType?: SectionStyleTypes\n}\n\nexport default function DrawerBody({\n  className,\n  styleType,\n  ref, //eslint-disable-line\n  ...props\n}: DrawerBodyProps & React.HTMLProps<HTMLElement>) {\n  return (\n    <ModalInner\n      {...props}\n      backgroundColor={styleType}\n      className={classnames('dnb-drawer__body', className)}\n    />\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAH,sBAAA,CAAAC,OAAA;AAA0E,MAAAG,SAAA;AAAA,SAAAJ,uBAAAK,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;AAe3D,SAASmB,UAAUA,CAAAC,IAAA,EAKiB;EAAA,IALhB;MACjCC,SAAS;MACTC,SAAS;MACTC;IAE8C,CAAC,GAAAH,IAAA;IAD5CI,KAAK,GAAAd,wBAAA,CAAAU,IAAA,EAAA5B,SAAA;EAER,OACEL,MAAA,CAAAQ,OAAA,CAAA8B,aAAA,CAAClC,WAAA,CAAAI,OAAU,EAAAC,QAAA,KACL4B,KAAK;IACTE,eAAe,EAAEJ,SAAU;IAC3BD,SAAS,EAAE,IAAAM,mBAAU,EAAC,kBAAkB,EAAEN,SAAS;EAAE,EACtD,CAAC;AAEN"}

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

@@ -13,8 +13,14 @@
   --dropdown-height--large: 3rem;
   --dropdown-padding-horizontal: 1rem;
   --dropdown-focus-border-width: 0.125rem;
+  --dropdown-error-border-width: 0.125rem;
   --dropdown-text-padding: 0.5rem;
+  --dropdown-button-padding: 0 1rem;
   --dropdown-border-radius: 0.25rem;
+  --dropdown-foreground-color-primary: var(--color-black-55);
+  --dropdown-foreground-color-error: var(--color-fire-red);
+  --dropdown-background-color-disabled: var(--color-black-3);
+  --dropdown-background-color-error-active: var(--color-fire-red-8);
   display: inline-flex;
   align-items: center;
   font-size: var(--font-size-small);
@@ -60,7 +66,7 @@
   width: 100%;
 }
 .dnb-dropdown__trigger.dnb-button {
-  padding: 0 1rem;
+  padding: var(--dropdown-button-padding);
   border-radius: var(--dropdown-border-radius);
 }
 .dnb-dropdown--is-popup .dnb-dropdown__trigger.dnb-button {
@@ -86,6 +92,38 @@
   white-space: nowrap;
   text-overflow: inherit;
 }
+.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger {
+  --border-color: var(--dropdown-foreground-color-error);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) {
+  color: var(--dropdown-foreground-color-error);
+  --border-color: var(--dropdown-foreground-color-error);
+  --border-width: var(--dropdown-error-border-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) .dnb-dropdown__icon .dnb-icon {
+  color: var(--dropdown-foreground-color-error);
+}
+.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active[disabled], html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active:not([disabled]) {
+  color: var(--dropdown-foreground-color-error);
+  background-color: var(--dropdown-background-color-error-active);
+}
+.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger, .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__icon {
+  color: var(--dropdown-foreground-color-error);
+}
+.dnb-dropdown > .dnb-form-status {
+  transform: translateY(-0.4375rem);
+}
 .dnb-dropdown--icon-position-left .dnb-dropdown__text {
   order: 2;
   padding-right: 0;

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

@@ -1 +1 @@
-.dnb-dropdown{--dropdown-width:16rem;--dropdown-height:2rem;--dropdown-height--small:1.5rem;--dropdown-height--medium:2.5rem;--dropdown-height--large:3rem;--dropdown-padding-horizontal:1rem;--dropdown-focus-border-width:0.125rem;--dropdown-text-padding:0.5rem;--dropdown-border-radius:0.25rem;align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--dropdown-height)}.dnb-dropdown__inner{color:inherit;display:inline-flex;flex-direction:column;margin:0;padding:0;width:auto}.dnb-dropdown__shell{color:inherit;height:var(--dropdown-height);margin:0;padding:0;position:relative;width:var(--dropdown-width)}.dnb-dropdown__row{display:inline-flex}.dnb-dropdown--large .dnb-drawer-list__triangle{margin-left:calc(var(--dropdown-padding-horizontal) - .25rem)}.dnb-dropdown--icon-position-left.dnb-dropdown--large .dnb-drawer-list__triangle{margin-left:calc(var(--dropdown-padding-horizontal) + .25rem)}.dnb-dropdown__icon{display:inline-flex;justify-content:center;order:2;pointer-events:none;position:relative}.dnb-dropdown__trigger{position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:1}.dnb-dropdown__trigger.dnb-button{border-radius:var(--dropdown-border-radius);padding:0 1rem}.dnb-dropdown--is-popup .dnb-dropdown__trigger.dnb-button{border-radius:50%;padding:0}.dnb-dropdown__text{color:inherit;display:inline-block;font-size:var(--font-size-basis);line-height:inherit;order:1;overflow:hidden;position:relative;text-align:left;text-overflow:ellipsis;width:100%;z-index:4}.dnb-dropdown__text__inner{display:inherit;overflow:hidden;text-overflow:inherit;white-space:nowrap}.dnb-dropdown--icon-position-left .dnb-dropdown__text{order:2;padding-left:var(--dropdown-text-padding);padding-right:0}.dnb-dropdown--icon-position-left .dnb-dropdown__icon{order:1}.dnb-dropdown--icon-position-right .dnb-dropdown__text{padding-right:var(--dropdown-text-padding)}.dnb-dropdown--independent-width .dnb-dropdown__shell{width:auto}@media screen and (max-width:40em){.dnb-dropdown--action-menu .dnb-dropdown__trigger.dnb-button{border-radius:50%;padding-left:.5rem;padding-right:.5rem}}@media screen and (min-width:40em){.dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text{padding:0 .5rem}}@media screen and (max-width:40em){.dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text{padding:0;width:0}}.dnb-dropdown--icon-position-left .dnb-button--tertiary~.dnb-drawer-list__root--portal{left:-.5rem}.dnb-dropdown--icon-position-right .dnb-button--tertiary~.dnb-drawer-list__root--portal{left:.5rem}.dnb-dropdown .dnb-button--tertiary.dnb-button--active{box-shadow:none}.dnb-dropdown .dnb-button--tertiary .dnb-button__text{margin:0 .5rem}.dnb-dropdown .dnb-button--tertiary .dnb-button__text:after{bottom:0}.dnb-dropdown--icon-position-left .dnb-button--tertiary .dnb-dropdown__text,.dnb-dropdown--icon-position-right .dnb-button--tertiary .dnb-dropdown__text{padding:0}.dnb-dropdown .dnb-button--tertiary:focus:before{left:0!important;right:0!important}.dnb-dropdown--default.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--is-popup .dnb-dropdown__trigger{height:var(--dropdown-height);padding:0;width:var(--dropdown-height)}.dnb-dropdown--is-popup .dnb-dropdown__icon{width:100%}.dnb-dropdown--is-popup.dnb-dropdown--scroll .dnb-dropdown__options{min-height:1rem}.dnb-dropdown--is-popup .dnb-drawer-list__root{width:var(--dropdown-width)}.dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__trigger{width:var(--dropdown-height--small)}.dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__trigger{width:var(--dropdown-height--medium)}.dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__trigger{width:var(--dropdown-height--large)}.dnb-dropdown--small .dnb-dropdown__shell,.dnb-dropdown--small .dnb-dropdown__trigger{height:var(--dropdown-height--small)}.dnb-dropdown--small,.dnb-dropdown--small .dnb-dropdown__trigger.dnb-button{line-height:var(--dropdown-height--small)}.dnb-dropdown--medium .dnb-dropdown__shell,.dnb-dropdown--medium .dnb-dropdown__trigger{height:var(--dropdown-height--medium)}.dnb-dropdown--medium,.dnb-dropdown--medium .dnb-dropdown__trigger.dnb-button{line-height:var(--dropdown-height--medium)}.dnb-dropdown--large .dnb-dropdown__shell,.dnb-dropdown--large .dnb-dropdown__trigger{height:var(--dropdown-height--large)}.dnb-dropdown--large,.dnb-dropdown--large .dnb-dropdown__trigger.dnb-button{line-height:var(--dropdown-height--large)}.dnb-dropdown--large .dnb-dropdown__trigger.dnb-button .dnb-dropdown__text,.dnb-dropdown>.dnb-form-label{line-height:var(--line-height-basis)}.dnb-dropdown>.dnb-form-label{margin-right:1rem}@media screen and (max-width:40em){.dnb-dropdown{flex-wrap:wrap}.dnb-dropdown>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-dropdown--stretch{display:flex;flex-grow:1}.dnb-dropdown--stretch .dnb-dropdown__inner{flex-grow:1}.dnb-dropdown--stretch .dnb-dropdown__inner,.dnb-dropdown--stretch .dnb-dropdown__row,.dnb-dropdown--stretch .dnb-dropdown__shell{width:100%}.dnb-dropdown--stretch .dnb-form-label+.dnb-dropdown__inner{width:auto}.dnb-dropdown--vertical.dnb-dropdown--stretch .dnb-dropdown__inner,.dnb-form-row--horizontal .dnb-dropdown--stretch{width:100%}label+.dnb-dropdown[class*=__form-status]{vertical-align:top}label+.dnb-dropdown[class*=__form-status] .dnb-dropdown__shell{top:-.375rem}.dnb-dropdown__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-dropdown--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-dropdown:not(.dnb-dropdown--vertical)[class*=__status]{align-items:flex-start}.dnb-dropdown:not(.dnb-dropdown--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-responsive-component .dnb-dropdown{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-dropdown>.dnb-form-label{margin-bottom:.5rem}.dnb-responsive-component .dnb-dropdown__helper{display:none}}
+.dnb-dropdown{--dropdown-width:16rem;--dropdown-height:2rem;--dropdown-height--small:1.5rem;--dropdown-height--medium:2.5rem;--dropdown-height--large:3rem;--dropdown-padding-horizontal:1rem;--dropdown-focus-border-width:0.125rem;--dropdown-error-border-width:0.125rem;--dropdown-text-padding:0.5rem;--dropdown-button-padding:0 1rem;--dropdown-border-radius:0.25rem;--dropdown-foreground-color-primary:var(--color-black-55);--dropdown-foreground-color-error:var(--color-fire-red);--dropdown-background-color-disabled:var(--color-black-3);--dropdown-background-color-error-active:var(--color-fire-red-8);align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--dropdown-height)}.dnb-dropdown__inner{color:inherit;display:inline-flex;flex-direction:column;margin:0;padding:0;width:auto}.dnb-dropdown__shell{color:inherit;height:var(--dropdown-height);margin:0;padding:0;position:relative;width:var(--dropdown-width)}.dnb-dropdown__row{display:inline-flex}.dnb-dropdown--large .dnb-drawer-list__triangle{margin-left:calc(var(--dropdown-padding-horizontal) - .25rem)}.dnb-dropdown--icon-position-left.dnb-dropdown--large .dnb-drawer-list__triangle{margin-left:calc(var(--dropdown-padding-horizontal) + .25rem)}.dnb-dropdown__icon{display:inline-flex;justify-content:center;order:2;pointer-events:none;position:relative}.dnb-dropdown__trigger{position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:1}.dnb-dropdown__trigger.dnb-button{border-radius:var(--dropdown-border-radius);padding:var(--dropdown-button-padding)}.dnb-dropdown--is-popup .dnb-dropdown__trigger.dnb-button{border-radius:50%;padding:0}.dnb-dropdown__text{color:inherit;display:inline-block;font-size:var(--font-size-basis);line-height:inherit;order:1;overflow:hidden;position:relative;text-align:left;text-overflow:ellipsis;width:100%;z-index:4}.dnb-dropdown__text__inner{display:inherit;overflow:hidden;text-overflow:inherit;white-space:nowrap}.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger{--border-color:var(--dropdown-foreground-color-error);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]){--border-color:var(--dropdown-foreground-color-error);--border-width:var(--dropdown-error-border-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--dropdown-foreground-color-error)}html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) .dnb-dropdown__icon .dnb-icon{color:var(--dropdown-foreground-color-error)}.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active[disabled],html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active[disabled]{cursor:not-allowed}.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active:not([disabled]){background-color:var(--dropdown-background-color-error-active);color:var(--dropdown-foreground-color-error)}.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__icon,.dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger{color:var(--dropdown-foreground-color-error)}.dnb-dropdown>.dnb-form-status{transform:translateY(-.4375rem)}.dnb-dropdown--icon-position-left .dnb-dropdown__text{order:2;padding-left:var(--dropdown-text-padding);padding-right:0}.dnb-dropdown--icon-position-left .dnb-dropdown__icon{order:1}.dnb-dropdown--icon-position-right .dnb-dropdown__text{padding-right:var(--dropdown-text-padding)}.dnb-dropdown--independent-width .dnb-dropdown__shell{width:auto}@media screen and (max-width:40em){.dnb-dropdown--action-menu .dnb-dropdown__trigger.dnb-button{border-radius:50%;padding-left:.5rem;padding-right:.5rem}}@media screen and (min-width:40em){.dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text{padding:0 .5rem}}@media screen and (max-width:40em){.dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text{padding:0;width:0}}.dnb-dropdown--icon-position-left .dnb-button--tertiary~.dnb-drawer-list__root--portal{left:-.5rem}.dnb-dropdown--icon-position-right .dnb-button--tertiary~.dnb-drawer-list__root--portal{left:.5rem}.dnb-dropdown .dnb-button--tertiary.dnb-button--active{box-shadow:none}.dnb-dropdown .dnb-button--tertiary .dnb-button__text{margin:0 .5rem}.dnb-dropdown .dnb-button--tertiary .dnb-button__text:after{bottom:0}.dnb-dropdown--icon-position-left .dnb-button--tertiary .dnb-dropdown__text,.dnb-dropdown--icon-position-right .dnb-button--tertiary .dnb-dropdown__text{padding:0}.dnb-dropdown .dnb-button--tertiary:focus:before{left:0!important;right:0!important}.dnb-dropdown--default.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--is-popup .dnb-dropdown__trigger{height:var(--dropdown-height);padding:0;width:var(--dropdown-height)}.dnb-dropdown--is-popup .dnb-dropdown__icon{width:100%}.dnb-dropdown--is-popup.dnb-dropdown--scroll .dnb-dropdown__options{min-height:1rem}.dnb-dropdown--is-popup .dnb-drawer-list__root{width:var(--dropdown-width)}.dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__trigger{width:var(--dropdown-height--small)}.dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__trigger{width:var(--dropdown-height--medium)}.dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__shell,.dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__trigger{width:var(--dropdown-height--large)}.dnb-dropdown--small .dnb-dropdown__shell,.dnb-dropdown--small .dnb-dropdown__trigger{height:var(--dropdown-height--small)}.dnb-dropdown--small,.dnb-dropdown--small .dnb-dropdown__trigger.dnb-button{line-height:var(--dropdown-height--small)}.dnb-dropdown--medium .dnb-dropdown__shell,.dnb-dropdown--medium .dnb-dropdown__trigger{height:var(--dropdown-height--medium)}.dnb-dropdown--medium,.dnb-dropdown--medium .dnb-dropdown__trigger.dnb-button{line-height:var(--dropdown-height--medium)}.dnb-dropdown--large .dnb-dropdown__shell,.dnb-dropdown--large .dnb-dropdown__trigger{height:var(--dropdown-height--large)}.dnb-dropdown--large,.dnb-dropdown--large .dnb-dropdown__trigger.dnb-button{line-height:var(--dropdown-height--large)}.dnb-dropdown--large .dnb-dropdown__trigger.dnb-button .dnb-dropdown__text,.dnb-dropdown>.dnb-form-label{line-height:var(--line-height-basis)}.dnb-dropdown>.dnb-form-label{margin-right:1rem}@media screen and (max-width:40em){.dnb-dropdown{flex-wrap:wrap}.dnb-dropdown>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-dropdown--stretch{display:flex;flex-grow:1}.dnb-dropdown--stretch .dnb-dropdown__inner{flex-grow:1}.dnb-dropdown--stretch .dnb-dropdown__inner,.dnb-dropdown--stretch .dnb-dropdown__row,.dnb-dropdown--stretch .dnb-dropdown__shell{width:100%}.dnb-dropdown--stretch .dnb-form-label+.dnb-dropdown__inner{width:auto}.dnb-dropdown--vertical.dnb-dropdown--stretch .dnb-dropdown__inner,.dnb-form-row--horizontal .dnb-dropdown--stretch{width:100%}label+.dnb-dropdown[class*=__form-status]{vertical-align:top}label+.dnb-dropdown[class*=__form-status] .dnb-dropdown__shell{top:-.375rem}.dnb-dropdown__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-dropdown--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-dropdown:not(.dnb-dropdown--vertical)[class*=__status]{align-items:flex-start}.dnb-dropdown:not(.dnb-dropdown--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-responsive-component .dnb-dropdown{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-dropdown>.dnb-form-label{margin-bottom:.5rem}.dnb-responsive-component .dnb-dropdown__helper{display:none}}

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

@@ -13,8 +13,14 @@
   --dropdown-height--large: 3rem;
   --dropdown-padding-horizontal: 1rem;
   --dropdown-focus-border-width: 0.125rem;
+  --dropdown-error-border-width: 0.125rem;
   --dropdown-text-padding: 0.5rem;
+  --dropdown-button-padding: 0 1rem;
   --dropdown-border-radius: 0.25rem;
+  --dropdown-foreground-color-primary: var(--color-black-55);
+  --dropdown-foreground-color-error: var(--color-fire-red);
+  --dropdown-background-color-disabled: var(--color-black-3);
+  --dropdown-background-color-error-active: var(--color-fire-red-8);
 
   display: inline-flex;
   align-items: center;
@@ -86,7 +92,7 @@
     width: 100%;
 
     &.dnb-button {
-      padding: 0 1rem;
+      padding: var(--dropdown-button-padding);
       border-radius: var(--dropdown-border-radius);
     }
   }
@@ -120,6 +126,37 @@
     }
   }
 
+  &__status--error:not(#{&}--opened) &__trigger {
+    @include fakeBorder(var(--dropdown-foreground-color-error));
+
+    @include hover() {
+      color: var(--dropdown-foreground-color-error);
+
+      @include fakeBorder(
+        var(--dropdown-foreground-color-error),
+        var(--dropdown-error-border-width)
+      );
+
+      & .dnb-dropdown__icon .dnb-icon {
+        color: var(--dropdown-foreground-color-error);
+      }
+    }
+
+    @include active() {
+      color: var(--dropdown-foreground-color-error);
+      background-color: var(--dropdown-background-color-error-active);
+    }
+  }
+  &__status--error:not(#{&}--opened) &__trigger,
+  &__status--error:not(#{&}--opened) &__icon {
+    color: var(--dropdown-foreground-color-error);
+  }
+
+  // adjust the form-status to the inner border for 2px
+  > .dnb-form-status {
+    transform: translateY(-0.4375rem);
+  }
+
   &--icon-position-left &__text {
     order: 2;
     padding-right: 0;