@dnb/eufemia 10.15.1 → 10.16.0

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.16.0](https://github.com/dnbexperience/eufemia/compare/v10.15.1...v10.16.0) (2024-01-04)
+
+
+### :memo: Documentation
+
+* **Field.PhoneNumber:** document event handlers argument value ([#3063](https://github.com/dnbexperience/eufemia/issues/3063)) ([b6baeb7](https://github.com/dnbexperience/eufemia/commit/b6baeb72a8445046b87562c09c13278d25406c16))
+* remove colon in examples and add info about colon usage in labels for form elements ([#3167](https://github.com/dnbexperience/eufemia/issues/3167)) ([04d1e64](https://github.com/dnbexperience/eufemia/commit/04d1e64718cdec95d36e79fac6e199d489daa6ec))
+
+
+### :bug: Bug Fixes
+
+* **Anchor:** dnb-anchor--no-hover and dnb-anchor--contrast ([#3139](https://github.com/dnbexperience/eufemia/issues/3139)) ([b718350](https://github.com/dnbexperience/eufemia/commit/b718350fe20659e1ecfdb37a3175886f91059e4f))
+* **Anchor:** remove icon when dnb-anchor--no-icon ([#3138](https://github.com/dnbexperience/eufemia/issues/3138)) ([83c1b47](https://github.com/dnbexperience/eufemia/commit/83c1b47860d8f92d6e8454ebb91cf354cd534da4))
+* **DatePicker:** make sure calendar shows correct date on date prop update ([#3112](https://github.com/dnbexperience/eufemia/issues/3112)) ([b571962](https://github.com/dnbexperience/eufemia/commit/b5719625ff0568172f63c09f88000ff5748d3e1d))
+* **Field.Date:** define empty value to trigger required error ([#3017](https://github.com/dnbexperience/eufemia/issues/3017)) ([45b4667](https://github.com/dnbexperience/eufemia/commit/45b46676ca2bf847896da2feb61e29f0dee5353f))
+* **Field.Expiry:** handles value as null ([#3143](https://github.com/dnbexperience/eufemia/issues/3143)) ([2a5fd66](https://github.com/dnbexperience/eufemia/commit/2a5fd66799e10fa3acf8e017e7b26e02c72f1ec9))
+* **Field.Expiry:** should handle values of non existing months ([#3144](https://github.com/dnbexperience/eufemia/issues/3144)) ([13cdc9f](https://github.com/dnbexperience/eufemia/commit/13cdc9f414b4da9600800f3ecf60dd8546c1386b))
+* **Field.PhoneNumber:** make country code only search for country name based on chosen locale ([#3156](https://github.com/dnbexperience/eufemia/issues/3156)) ([26c4f20](https://github.com/dnbexperience/eufemia/commit/26c4f20ad993c691ec9d52a02532e116d4f47c91))
+* **Field.PhoneNumber:** renders an validation error initially when it is required and only country code is provided ([#3081](https://github.com/dnbexperience/eufemia/issues/3081)) ([0d1063a](https://github.com/dnbexperience/eufemia/commit/0d1063aad64a57dce24d397548ec5db27e920abe))
+* **Field.Selection:** add error state and message ([#3077](https://github.com/dnbexperience/eufemia/issues/3077)) ([06de7c9](https://github.com/dnbexperience/eufemia/commit/06de7c958ac93dd259c0e05a20301fc5156b3136))
+* **Field.Selection:** fix Dropdown width ([#3136](https://github.com/dnbexperience/eufemia/issues/3136)) ([2fb7e47](https://github.com/dnbexperience/eufemia/commit/2fb7e471390c12d1549d4dc78c9bd2350979b3f6))
+* **Field.Selection:** make it possible to disable radio variants ([#3086](https://github.com/dnbexperience/eufemia/issues/3086)) ([980cabd](https://github.com/dnbexperience/eufemia/commit/980cabddcf524819ef224bdcae9055466aad4b92))
+* **Field.String:** validated empty value when required ([#3125](https://github.com/dnbexperience/eufemia/issues/3125)) ([541c9b1](https://github.com/dnbexperience/eufemia/commit/541c9b142a0f1520f88898bace7a1beda1a54211))
+* **forms:** update data context with initially given field value ([#3135](https://github.com/dnbexperience/eufemia/issues/3135)) ([93d08e6](https://github.com/dnbexperience/eufemia/commit/93d08e687f0800fae5f814784e82ad5fbf08fff8))
+* **PhoneNumber:** make long labels wrap nicely ([#3066](https://github.com/dnbexperience/eufemia/issues/3066)) ([d12850d](https://github.com/dnbexperience/eufemia/commit/d12850d44d9336e8ce621a09d591f3530b89bf4b))
+* **Radio:** fix correct spacing between label/legend and fieldset ([#3115](https://github.com/dnbexperience/eufemia/issues/3115)) ([9dc7d9e](https://github.com/dnbexperience/eufemia/commit/9dc7d9ee65dcf90e53208a07b0237eaba316a7f9))
+* **Section:** ensure overlay is behind content ([#3141](https://github.com/dnbexperience/eufemia/issues/3141)) ([53346ec](https://github.com/dnbexperience/eufemia/commit/53346eccb9d48efc36994b067019e670ae134e2d))
+* **StepsLayout:** mode defaults to strict ([#3145](https://github.com/dnbexperience/eufemia/issues/3145)) ([eef4744](https://github.com/dnbexperience/eufemia/commit/eef4744704fd422bb75920086222babb7bc82e2e))
+* **StepsLayout:** prevent component adjust to screen size on mobile ([#3146](https://github.com/dnbexperience/eufemia/issues/3146)) ([20d92d2](https://github.com/dnbexperience/eufemia/commit/20d92d29903554c06b3b1111bc0212635d631453))
+* **ToggleButton:** align label position ([#3169](https://github.com/dnbexperience/eufemia/issues/3169)) ([22f587d](https://github.com/dnbexperience/eufemia/commit/22f587dace68d17ca8f899f7468e92b4c6226d3e))
+* **Tooltip:** text alignment for short text ([#3084](https://github.com/dnbexperience/eufemia/issues/3084)) ([7b83a7a](https://github.com/dnbexperience/eufemia/commit/7b83a7a68198fd322b9c89d995d4db8032bd2f70))
+* **Upload:** omit FormEvent onChange type ([#3113](https://github.com/dnbexperience/eufemia/issues/3113)) ([52e42c2](https://github.com/dnbexperience/eufemia/commit/52e42c291295bb12bde7182deb9cb21d4480b8ae))
+
+
+### :sparkles: Features
+
+* **Card:** responsive breakout on small screens ([#3163](https://github.com/dnbexperience/eufemia/issues/3163)) ([da88ac9](https://github.com/dnbexperience/eufemia/commit/da88ac9902c66b7664aee0ce7cd9289b3d9eaa73))
+* **Email:** trim value ([#3170](https://github.com/dnbexperience/eufemia/issues/3170)) ([ea56957](https://github.com/dnbexperience/eufemia/commit/ea569579ffb1549a4687caee7c30a1a785478a0a)), closes [#3165](https://github.com/dnbexperience/eufemia/issues/3165)
+* **Icons:** add browser, digipass, envelope_open, laptop, mobile, money_left, teenager ([#3064](https://github.com/dnbexperience/eufemia/issues/3064)) ([b503e36](https://github.com/dnbexperience/eufemia/commit/b503e36925e6021b4ee085fa691cb81e3bc4dac5))
+* **InputMasked:** enhance inputMode for better support of showing correct soft keyboards ([#3108](https://github.com/dnbexperience/eufemia/issues/3108)) ([e95ef1f](https://github.com/dnbexperience/eufemia/commit/e95ef1f250f34cdecfa7e8d4f15c0a97471020e9)), closes [#3097](https://github.com/dnbexperience/eufemia/issues/3097)
+* **String:** add `capitalize` prop ([#3159](https://github.com/dnbexperience/eufemia/issues/3159)) ([3dce145](https://github.com/dnbexperience/eufemia/commit/3dce145d865693a13cfd9570863036e1bce3d2d2))
+* **useDataValue:** add toOutput, fromExternal and validateRequired ([#3109](https://github.com/dnbexperience/eufemia/issues/3109)) ([cf04125](https://github.com/dnbexperience/eufemia/commit/cf041259c49b18b40d31904ec6d545ea9c42dc5a))
+
 ## [10.15.1](https://github.com/dnbexperience/eufemia/compare/v10.15.0...v10.15.1) (2023-12-14)
 
 

package/assets/icons/dnb/browser.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linejoin="round" stroke-width="1.5" d="M.5 4.5h15M5.75 4v10M2 14.5h12a1 1 0 0 0 1-1v-11a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1Z"/></svg>

package/assets/icons/dnb/browser_medium.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="#000" stroke-linejoin="round" stroke-width="1.5" d="M1 6.25h22M7.75 7v15M2.25 2h19.5s1.5 0 1.5 1.5v17s0 1.5-1.5 1.5H2.25s-1.5 0-1.5-1.5v-17S.75 2 2.25 2Z"/></svg>

package/assets/icons/dnb/coins_1.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M1 2.59v9.508M1 2.59c0 .879 2.137 1.59 4.773 1.59 2.636 0 4.773-.711 4.773-1.59M1 2.59C1 1.712 3.137 1 5.773 1c2.636 0 4.773.712 4.773 1.59M1 2.59v3.144m0 6.364c0 .9 2.137 1.63 4.773 1.63h.67M1 12.097V8.916m9.546-6.325v4.753m0-4.753v3.143M1 8.916c0 .842 1.873 1.536 4.275 1.62h.18M1 8.917V5.734m0 0c0 .9 2.137 1.63 4.773 1.63 2.636 0 4.773-.73 4.773-1.63m0 0v1.61m0 0v.819M5.455 9.75c0-.879 2.136-1.59 4.772-1.59.107 0 .213 0 .319.003M5.455 9.75c0 .9 2.136 1.63 4.772 1.63S15 10.65 15 9.75m-9.545 0v.787M15 9.75v2.984c0 .9-2.137 1.63-4.773 1.63-1.54 0-2.91-.25-3.784-.637M15 9.75c0-.843-1.967-1.533-4.454-1.587m-5.091 2.374v2.197c0 .374.368.718.988.993"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M1 3.24v9.508M1 3.24c0 .878 2.137 1.59 4.773 1.59 2.636 0 4.773-.712 4.773-1.59M1 3.24c0-.878 2.137-1.59 4.773-1.59 2.636 0 4.773.712 4.773 1.59M1 3.24v3.144m0 6.364c0 .9 2.137 1.63 4.773 1.63h.67M1 12.747V9.566m9.546-6.325v4.753m0-4.753v3.143M1 9.566c0 .842 1.873 1.536 4.275 1.62h.18M1 9.567V6.384m0 0c0 .9 2.137 1.63 4.773 1.63 2.636 0 4.773-.73 4.773-1.63m0 0v1.61m0 0v.818M5.455 10.4c0-.879 2.136-1.591 4.772-1.591.107 0 .213.001.319.003M5.455 10.4c0 .9 2.136 1.63 4.772 1.63S15 11.3 15 10.4m-9.545 0v.787M15 10.4v2.984c0 .9-2.137 1.63-4.773 1.63-1.54 0-2.91-.25-3.784-.637M15 10.4c0-.843-1.967-1.533-4.454-1.588m-5.091 2.375v2.197c0 .374.368.718.988.993"/></svg>

package/assets/icons/dnb/coins_1_medium.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M1 3.75v14.939M1 3.75c0 1.38 3.358 2.5 7.5 2.5 4.142 0 7.5-1.12 7.5-2.5m-15 0c0-1.38 3.358-2.5 7.5-2.5 4.142 0 7.5 1.12 7.5 2.5m-15 0v4.939m0 10c0 1.414 3.358 2.561 7.5 2.561h1.054M1 18.689v-5M16 3.75v7.47m0-7.47v4.939m-15 5c0 1.324 2.944 2.414 6.718 2.547H8M1 13.69v-5m0 0c0 1.414 3.358 2.561 7.5 2.561 4.142 0 7.5-1.147 7.5-2.561m0 0v2.53m0 0v1.287M8 15c0-1.38 3.358-2.5 7.5-2.5.168 0 .335.002.5.005M8 15c0 1.414 3.358 2.561 7.5 2.561 4.142 0 7.5-1.147 7.5-2.561M8 15v1.236M23 15v4.689c0 1.414-3.358 2.561-7.5 2.561-2.421 0-4.575-.392-5.946-1M23 15c0-1.325-3.091-2.409-7-2.495m-8 3.731v3.453c0 .587.58 1.129 1.554 1.561"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M1 4.5v14.939M1 4.5C1 5.88 4.358 7 8.5 7 12.642 7 16 5.88 16 4.5m-15 0C1 3.12 4.358 2 8.5 2 12.642 2 16 3.12 16 4.5m-15 0v4.939m0 10C1 20.853 4.358 22 8.5 22h1.054M1 19.439v-5M16 4.5v7.47m0-7.47v4.939m-15 5c0 1.324 2.944 2.414 6.718 2.547H8M1 14.44v-5m0 0C1 10.853 4.358 12 8.5 12c4.142 0 7.5-1.147 7.5-2.561m0 0v2.53m0 0v1.287M8 15.75c0-1.38 3.358-2.5 7.5-2.5.168 0 .335.002.5.005M8 15.75c0 1.414 3.358 2.561 7.5 2.561 4.142 0 7.5-1.147 7.5-2.561m-15 0v1.236m15-1.236v4.689C23 21.853 19.642 23 15.5 23c-2.421 0-4.575-.392-5.946-1M23 15.75c0-1.325-3.091-2.409-7-2.495m-8 3.731v3.453c0 .587.58 1.129 1.554 1.561"/></svg>

package/assets/icons/dnb/digipass_corporate.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" fill="none" viewBox="0 0 16 18"><path stroke="#000" stroke-linecap="round" stroke-width="1.5" d="M2.06 6.505c-.333 5.014.61 10.245 5.961 10.245s6.272-5.23 5.91-10.245m-11.872 0c.064-.962.203-3.173.344-4.389a.863.863 0 0 1 .629-.739c1-.274 2.823-.627 4.99-.627 2.161 0 3.94.352 4.91.626.336.095.575.38.618.727.147 1.179.301 3.312.374 4.317l.006.085m-11.87 0c.792.202 3.191.605 6.023.605s5.078-.403 5.847-.605M5.6 3.95h4.8"/></svg>

package/assets/icons/dnb/digipass_corporate_medium.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="26" fill="none" viewBox="0 0 24 26"><path stroke="#000" stroke-linecap="round" stroke-width="1.5" d="M3.089 9.383c-.498 7.52.917 15.367 8.943 15.367s9.408-7.846 8.863-15.367m-17.806 0c.1-1.523.327-5.13.55-6.87a.887.887 0 0 1 .632-.743C5.695 1.35 8.57.75 12.032.75c3.456 0 6.26.599 7.637 1.018a.883.883 0 0 1 .62.731c.23 1.69.482 5.164.597 6.756l.01.128m-17.807 0c1.19.302 4.788.907 9.035.907 4.248 0 7.617-.605 8.771-.907M9.002 5.75h6"/></svg>

package/assets/icons/dnb/digipass_private.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="16" fill="none" viewBox="0 0 18 16"><path stroke="#000" stroke-linecap="round" stroke-width="1.5" d="M4.75 4.535C2.359 5.227.75 6.52.75 8c0 1.48 1.609 2.773 4 3.465m0-6.93C5.927 4.195 7.293 4 8.75 4c4.418 0 8 1.79 8 4s-3.582 4-8 4c-1.457 0-2.823-.195-4-.535m0-6.93c.5 1.132 1.2 4.102 0 6.93M8.25 8h4.5"/></svg>

package/assets/icons/dnb/digipass_private_medium.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="24" fill="none" viewBox="0 0 26 24"><path stroke="#000" stroke-linecap="round" stroke-width="1.5" d="M6.75 6.803C3.163 7.84.75 9.779.75 12c0 2.22 2.413 4.16 6 5.197m0-10.394c1.765-.51 3.814-.803 6-.803 6.627 0 12 2.686 12 6s-5.373 6-12 6c-2.186 0-4.235-.292-6-.803m0-10.394c.75 1.697 1.8 6.152 0 10.394M12 12h6.75"/></svg>

package/assets/icons/dnb/envelope_open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 6.986v6.797c0 .24-.105.47-.293.64-.187.17-.442.266-.707.266H2c-.265 0-.52-.095-.707-.265A.866.866 0 0 1 1 13.783V6.986m14 0L9.235 11.13c-.352.25-.787.387-1.235.387-.448 0-.883-.136-1.235-.387L1 6.986m14 0-5.538-4.41a2.011 2.011 0 0 0-.665-.426 2.179 2.179 0 0 0-1.594 0 2.011 2.011 0 0 0-.665.426L1 6.986m9.539 3.207L12.5 11.97m-7.039-1.777L3.5 11.97"/></svg>

package/assets/icons/dnb/envelope_open_medium.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M23 9.737v10.547c0 .373-.166.73-.46.994a1.67 1.67 0 0 1-1.111.412H2.57a1.67 1.67 0 0 1-1.11-.412 1.336 1.336 0 0 1-.46-.994V9.737m22 0-9.059 6.43a3.376 3.376 0 0 1-1.941.601 3.385 3.385 0 0 1-1.941-.6L1 9.737m22 0-8.703-6.845a3.165 3.165 0 0 0-1.045-.66A3.462 3.462 0 0 0 12 2c-.43 0-.857.08-1.252.233a3.16 3.16 0 0 0-1.045.66L1 9.737m14.99 4.976 3.081 2.758m-11.06-2.758-3.082 2.758"/></svg>

package/assets/icons/dnb/laptop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.25 9.5V3a1 1 0 0 0-1-1h-10a1 1 0 0 0-1 1v6.5m12 0h-12m12 0 1.414 3.094A1 1 0 0 1 14.75 14h-13a1 1 0 0 1-.914-1.406L2.25 9.5"/></svg>

package/assets/icons/dnb/laptop_medium.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 14.25V4.5A1.5 1.5 0 0 0 19.5 3h-15A1.5 1.5 0 0 0 3 4.5v9.75m18 0H3m18 0 2.12 4.64A1.5 1.5 0 0 1 21.75 21H2.25a1.5 1.5 0 0 1-1.37-2.11L3 14.25M10.5 18h3"/></svg>

package/assets/icons/dnb/mobile.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#000" d="M5.25.75V0v.75Zm0 15v.75-.75Zm5.5 0v.75-.75Zm2-2h.75-.75Zm0-11h.75-.75Zm-2-2.75h-5.5v1.5h5.5V0Zm-5.5 0c-.73 0-1.429.29-1.945.805l1.061 1.061A1.25 1.25 0 0 1 5.25 1.5V0ZM3.305.805A2.75 2.75 0 0 0 2.5 2.75H4c0-.332.132-.65.366-.884L3.306.806ZM2.5 2.75v11H4v-11H2.5Zm0 11c0 .73.29 1.429.805 1.944l1.061-1.06A1.25 1.25 0 0 1 4 13.75H2.5Zm.805 1.944a2.75 2.75 0 0 0 1.945.806V15a1.25 1.25 0 0 1-.884-.366l-1.06 1.06Zm1.945.806h5.5V15h-5.5v1.5Zm5.5 0c.73 0 1.429-.29 1.944-.806l-1.06-1.06a1.25 1.25 0 0 1-.884.366v1.5Zm1.944-.806a2.75 2.75 0 0 0 .806-1.944H12c0 .332-.132.65-.366.884l1.06 1.06Zm.806-1.944v-11H12v11h1.5Zm0-11c0-.73-.29-1.429-.806-1.945l-1.06 1.061c.234.235.366.552.366.884h1.5ZM12.694.805A2.75 2.75 0 0 0 10.75 0v1.5c.332 0 .65.132.884.366l1.06-1.06ZM8 4v1.5A1.5 1.5 0 0 0 9.5 4H8Zm0 0H6.5A1.5 1.5 0 0 0 8 5.5V4Zm0 0V2.5A1.5 1.5 0 0 0 6.5 4H8Zm0 0h1.5A1.5 1.5 0 0 0 8 2.5V4Z"/></svg>

package/assets/icons/dnb/mobile_medium.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M7.875.75V0v.75Zm0 22.5V24v-.75Zm8.25 0V24v-.75Zm3-3h.75-.75Zm0-16.5h.75-.75Zm-3-3.75h-8.25v1.5h8.25V0Zm-8.25 0a3.75 3.75 0 0 0-2.652 1.098L6.284 2.16a2.25 2.25 0 0 1 1.591-.66V0ZM5.223 1.098A3.75 3.75 0 0 0 4.125 3.75h1.5c0-.597.237-1.169.659-1.591l-1.06-1.06ZM4.125 3.75v16.5h1.5V3.75h-1.5Zm0 16.5a3.75 3.75 0 0 0 1.098 2.652l1.061-1.061a2.25 2.25 0 0 1-.659-1.591h-1.5Zm1.098 2.652A3.75 3.75 0 0 0 7.875 24v-1.5a2.25 2.25 0 0 1-1.591-.659l-1.06 1.06ZM7.875 24h8.25v-1.5h-8.25V24Zm8.25 0a3.75 3.75 0 0 0 2.652-1.098l-1.061-1.061a2.25 2.25 0 0 1-1.591.659V24Zm2.652-1.098a3.75 3.75 0 0 0 1.098-2.652h-1.5a2.25 2.25 0 0 1-.659 1.591l1.06 1.06Zm1.098-2.652V3.75h-1.5v16.5h1.5Zm0-16.5a3.75 3.75 0 0 0-1.098-2.652L17.716 2.16c.422.422.659.994.659 1.591h1.5Zm-1.098-2.652A3.75 3.75 0 0 0 16.125 0v1.5a2.25 2.25 0 0 1 1.591.659l1.06-1.06ZM12 4.25v1.5a1.5 1.5 0 0 0 1.5-1.5H12Zm0 0h-1.5a1.5 1.5 0 0 0 1.5 1.5v-1.5Zm0 0v-1.5a1.5 1.5 0 0 0-1.5 1.5H12Zm0 0h1.5a1.5 1.5 0 0 0-1.5-1.5v1.5Z"/></svg>

package/assets/icons/dnb/money_left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-width="1.5" d="M1 8a7 7 0 1 0 7-7M5.79 8.8h4.455c.176 0 .319.14.319.31v1.379a.315.315 0 0 1-.319.31H5.792a.315.315 0 0 1-.318-.31V9.11c0-.172.142-.311.318-.311Zm.637-2h4.455c.175 0 .318.14.318.31v1.38a.315.315 0 0 1-.318.31H6.427a.315.315 0 0 1-.318-.31V7.11c0-.172.143-.311.318-.311Zm-1.909-2h4.455c.175 0 .318.14.318.31v1.38a.315.315 0 0 1-.318.31H4.518a.315.315 0 0 1-.318-.31V5.11c0-.172.142-.311.318-.311Z"/></svg>

package/assets/icons/dnb/money_left_medium.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M1 12c0 6.075 4.925 11 11 11s11-4.925 11-11S18.075 1 12 1M9.333 14h6.534c.257 0 .466.209.466.467v2.066a.467.467 0 0 1-.466.467H9.333a.467.467 0 0 1-.466-.467v-2.066c0-.258.209-.467.466-.467Zm.934-3H16.8c.258 0 .467.209.467.467v2.066A.467.467 0 0 1 16.8 14h-6.533a.467.467 0 0 1-.467-.467v-2.066c0-.258.209-.467.467-.467Zm-2.8-3H14c.258 0 .467.209.467.467v2.066A.467.467 0 0 1 14 11H7.467A.467.467 0 0 1 7 10.533V8.467C7 8.209 7.209 8 7.467 8Z"/></svg>

package/assets/icons/dnb/scan.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#000" d="M3.5 4v1.75a.75.75 0 0 1-1.5 0V4c0-.504.175-.981.464-1.344C2.751 2.298 3.2 2 3.75 2h2a.75.75 0 0 1 0 1.5H3.753c-.005.001-.051.01-.117.094A.665.665 0 0 0 3.5 4Zm6-1.25a.75.75 0 0 1 .75-.75H12c.504 0 .981.175 1.344.464.358.287.656.736.656 1.286v2a.75.75 0 0 1-1.5 0V3.753c-.001-.005-.01-.051-.094-.117A.665.665 0 0 0 12 3.5h-1.75a.75.75 0 0 1-.75-.75ZM4 12.5h1.75a.75.75 0 0 1 0 1.5H4a2.17 2.17 0 0 1-1.344-.464C2.298 13.249 2 12.8 2 12.25v-2a.75.75 0 0 1 1.5 0v1.997c.001.005.01.051.094.117A.664.664 0 0 0 4 12.5Zm8.5-.5v-1.75a.75.75 0 0 1 1.5 0V12c0 .504-.175.981-.464 1.344-.287.358-.736.656-1.286.656h-2a.75.75 0 0 1 0-1.5h1.997c.005-.001.051-.01.117-.094A.665.665 0 0 0 12.5 12ZM6 7.25a.75.75 0 0 0 0 1.5h4a.75.75 0 0 0 0-1.5H6Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8H4m6.875 5.749h2.27a.604.604 0 0 0 .604-.604v-2.27m-2.874-8.624h2.27a.604.604 0 0 1 .604.604v2.27M5.126 2.251h-2.27a.604.604 0 0 0-.604.604v2.27m2.874 8.624h-2.27a.604.604 0 0 1-.604-.604v-2.27"/></svg>

package/assets/icons/dnb/scan_medium.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><g fill="#000" clip-path="url(#scan_medium_svg__a)"><path d="M2.25 4v3.5a.75.75 0 0 1-1.5 0V4c0-.837.291-1.627.764-2.219C1.984 1.194 2.683.75 3.5.75h4a.75.75 0 0 1 0 1.5h-4c-.25 0-.55.14-.814.469A2.08 2.08 0 0 0 2.25 4Zm13.5-2.5a.75.75 0 0 1 .75-.75H20c.837 0 1.627.291 2.218.764.588.47 1.032 1.169 1.032 1.986v4a.75.75 0 0 1-1.5 0v-4c0-.25-.14-.55-.468-.814A2.079 2.079 0 0 0 20 2.25h-3.5a.75.75 0 0 1-.75-.75ZM4 21.75h3.5a.75.75 0 0 1 0 1.5H4a3.578 3.578 0 0 1-2.219-.764C1.194 22.016.75 21.317.75 20.5v-4a.75.75 0 0 1 1.5 0v4c0 .25.14.55.469.814.325.26.785.436 1.281.436ZM21.75 20v-3.5a.75.75 0 0 1 1.5 0V20c0 .837-.291 1.627-.764 2.218-.47.588-1.169 1.032-1.986 1.032h-4a.75.75 0 0 1 0-1.5h4c.25 0 .55-.14.814-.468.26-.326.436-.786.436-1.282ZM6 11.25a.75.75 0 0 0 0 1.5h12a.75.75 0 0 0 0-1.5H6Z"/></g><defs><clipPath id="scan_medium_svg__a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.312 12H5.686M16.5 20.997h3.554a.946.946 0 0 0 .946-.946v-3.553M16.5 3h3.554a.946.946 0 0 1 .946.946V7.5M7.5 3H3.945A.946.946 0 0 0 3 3.946V7.5M7.5 21H3.945A.946.946 0 0 1 3 20.054V16.5"/></svg>

package/assets/icons/dnb/teenager.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 4.638 2.325 6m7.706 4.5c-1.293 1.243-3.031 1.243-4.36 0m-.047-2.329h.225m3.673 0h.225m2.24-4.414c2.284 2.344 2.284 6.142 0 8.486a5.747 5.747 0 0 1-8.274 0C1.43 9.899 1.43 6.1 3.713 3.757a5.747 5.747 0 0 1 8.274 0ZM5.9 8.171c0 .122-.104.162-.161.162-.06 0-.164-.04-.164-.162 0-.131.104-.171.164-.171.057 0 .161.04.161.171Zm3.899 0c0 .122-.104.162-.161.162-.06 0-.164-.04-.164-.162a.162.162 0 1 1 .324 0Z"/></svg>

package/assets/icons/dnb/teenager_medium.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m23 8.458-19.5 2.5m11.856 5.726c-1.763 1.992-4.946 1.992-6.708 0m-.073-3.677h.346m5.652 0h.346m3.445-7.371A9 9 0 1 1 5.636 18.364 9 9 0 0 1 18.364 5.636ZM9 13.006c0 .184-.16.244-.248.244-.092 0-.252-.06-.252-.243 0-.197.16-.257.252-.257.088 0 .248.06.248.257Zm5.998 0c0 .184-.16.244-.248.244-.092 0-.252-.06-.252-.243 0-.197.16-.257.252-.257.088 0 .248.06.248.257Z"/></svg>

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

@@ -45,10 +45,6 @@
       }
     }
   }
-
-  &--no-icon .dnb-icon {
-    display: none;
-  }
 }
 
 // reset methods
@@ -114,8 +110,10 @@
   color: var(--color-white);
 
   &:hover {
-    color: var(--anchor-color--contrast);
-    @include anchorBackground(var(--color-white));
+    @include notNoHover() {
+      color: var(--anchor-color--contrast);
+      @include anchorBackground(var(--color-white));
+    }
   }
 
   &:active {
@@ -166,6 +164,10 @@
     // -1px to center the icons against large chars
     transform: translateY(-0.0625em);
   }
+
+  &--no-icon .dnb-icon {
+    display: none;
+  }
 }
 
 @mixin anchorTag() {

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

@@ -45,9 +45,6 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default svg path {
   stroke-width: 1.2;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--no-icon .dnb-icon {
-  display: none;
-}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
   background-color: transparent;
   transition: none;
@@ -95,14 +92,27 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   display: inline-block;
   transform: translateY(-0.0625em);
 }
+:where(:not(.dnb-anchor--no-style)).dnb-anchor--no-icon .dnb-icon {
+  display: none;
+}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast {
   color: var(--color-white);
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover {
+:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:where(:not(.dnb-anchor--no-hover)) {
   color: var(--anchor-color--contrast);
   --anchor-background-gutter: 0.125em;
   box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
 }
+:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
+  /* stylelint-disable-next-line scss/operator-no-unspaced */
+}
+@supports not (selector(*:where(*))) {
+  :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
+    color: var(--anchor-color--contrast);
+    --anchor-background-gutter: 0.125em;
+    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+  }
+}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:active {
   color: var(--color-white);
   background-color: transparent;
@@ -150,9 +160,6 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   :not(.dnb-anchor--no-style).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default svg path {
     stroke-width: 1.2;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor--no-icon .dnb-icon {
-    display: none;
-  }
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
     background-color: transparent;
     transition: none;
@@ -200,14 +207,27 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
     display: inline-block;
     transform: translateY(-0.0625em);
   }
+  :not(.dnb-anchor--no-style).dnb-anchor--no-icon .dnb-icon {
+    display: none;
+  }
   :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast {
     color: var(--color-white);
   }
-  :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover {
+  :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:where(:not(.dnb-anchor--no-hover)) {
     color: var(--anchor-color--contrast);
     --anchor-background-gutter: 0.125em;
     box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
   }
+  :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
+    /* stylelint-disable-next-line scss/operator-no-unspaced */
+  }
+  @supports not (selector(*:where(*))) {
+    :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
+      color: var(--anchor-color--contrast);
+      --anchor-background-gutter: 0.125em;
+      box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+    }
+  }
   :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:active {
     color: var(--color-white);
     background-color: transparent;

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

@@ -1 +1 @@
-button.dnb-anchor{-webkit-appearance:none;appearance:none;background:none;border:none;cursor:pointer;line-height:calc(var(--line-height-basis) + .125rem)}:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-underline-thickness:0.0938rem;border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em 0;-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:currentcolor;text-decoration-thickness:var(--anchor-underline-thickness);text-underline-offset:.25em;transition:box-shadow .2s ease-in-out,border-radius .2s ease-in-out,background .2s ease-in-out}sub :where(:not(.dnb-anchor--no-style)).dnb-anchor,sup :where(:not(.dnb-anchor--no-style)).dnb-anchor{padding:0 .025em}.dnb-h--basis :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--medium :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--small :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--x-large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--x-small :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--xx-large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-lead :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-p :where(:not(.dnb-anchor--no-style)).dnb-anchor{font-size:inherit}:where(:not(.dnb-anchor--no-style)).dnb-anchor--launch-icon .dnb-icon,:where(:not(.dnb-anchor--no-style)).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default{font-size:1.11em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--launch-icon .dnb-icon svg path,:where(:not(.dnb-anchor--no-style)).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default svg path{stroke-width:1.2}:where(:not(.dnb-anchor--no-style)).dnb-anchor--no-icon .dnb-icon{display:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{-webkit-text-decoration:none;text-decoration:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){-webkit-text-decoration:none;text-decoration:none}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){-webkit-text-decoration:none;text-decoration:none}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:active.dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{-webkit-text-decoration:none;text-decoration:none}[data-visual-test-wrapper] :where(:not(.dnb-anchor--no-style)).dnb-anchor{transition:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon{display:inline-block;transform:translateY(-.0625em)}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast{color:var(--color-white)}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover{--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:active{--anchor-background-gutter:0.125em;background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,calc(var(--anchor-background-gutter)*-1) 0 0 0 transparent,var(--anchor-background-gutter) 0 0 0 transparent;color:var(--color-white)}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-underline-thickness:0.0938rem;border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em 0;-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:currentcolor;text-decoration-thickness:var(--anchor-underline-thickness);text-underline-offset:.25em;transition:box-shadow .2s ease-in-out,border-radius .2s ease-in-out,background .2s ease-in-out}sub :not(.dnb-anchor--no-style).dnb-anchor,sup :not(.dnb-anchor--no-style).dnb-anchor{padding:0 .025em}.dnb-h--basis :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--medium :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--small :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--x-large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--x-small :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--xx-large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-lead :not(.dnb-anchor--no-style).dnb-anchor,.dnb-p :not(.dnb-anchor--no-style).dnb-anchor{font-size:inherit}:not(.dnb-anchor--no-style).dnb-anchor--launch-icon .dnb-icon,:not(.dnb-anchor--no-style).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default{font-size:1.11em}:not(.dnb-anchor--no-style).dnb-anchor--launch-icon .dnb-icon svg path,:not(.dnb-anchor--no-style).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default svg path{stroke-width:1.2}:not(.dnb-anchor--no-style).dnb-anchor--no-icon .dnb-icon{display:none}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{-webkit-text-decoration:none;text-decoration:none}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){-webkit-text-decoration:none;text-decoration:none}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){-webkit-text-decoration:none;text-decoration:none}}:not(.dnb-anchor--no-style).dnb-anchor:active{border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:active.dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:active{-webkit-text-decoration:none;text-decoration:none}[data-visual-test-wrapper] :not(.dnb-anchor--no-style).dnb-anchor{transition:none}:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon{display:inline-block;transform:translateY(-.0625em)}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast{color:var(--color-white)}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover{--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:active{--anchor-background-gutter:0.125em;background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,calc(var(--anchor-background-gutter)*-1) 0 0 0 transparent,var(--anchor-background-gutter) 0 0 0 transparent;color:var(--color-white)}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}}.dnb-anchor--hover{border-radius:.25em}.dnb-anchor--hover,.dnb-section .dnb-anchor--hover.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor--active{border-radius:.25em}.dnb-anchor--active,.dnb-section .dnb-anchor--active.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor--focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-anchor--focus,.dnb-anchor--no-underline,.dnb-section .dnb-anchor--focus.dnb-anchor,.dnb-section .dnb-anchor--no-underline.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus-visible,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--no-animation,a.dnb-button{transition:none}.dnb-anchor.dnb-skeleton,.dnb-skeleton>.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor.dnb-skeleton .dnb-icon,.dnb-skeleton>.dnb-anchor .dnb-icon{filter:grayscale(100%) opacity(.3)}
+button.dnb-anchor{-webkit-appearance:none;appearance:none;background:none;border:none;cursor:pointer;line-height:calc(var(--line-height-basis) + .125rem)}:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-underline-thickness:0.0938rem;border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em 0;-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:currentcolor;text-decoration-thickness:var(--anchor-underline-thickness);text-underline-offset:.25em;transition:box-shadow .2s ease-in-out,border-radius .2s ease-in-out,background .2s ease-in-out}sub :where(:not(.dnb-anchor--no-style)).dnb-anchor,sup :where(:not(.dnb-anchor--no-style)).dnb-anchor{padding:0 .025em}.dnb-h--basis :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--medium :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--small :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--x-large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--x-small :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--xx-large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-lead :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-p :where(:not(.dnb-anchor--no-style)).dnb-anchor{font-size:inherit}:where(:not(.dnb-anchor--no-style)).dnb-anchor--launch-icon .dnb-icon,:where(:not(.dnb-anchor--no-style)).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default{font-size:1.11em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--launch-icon .dnb-icon svg path,:where(:not(.dnb-anchor--no-style)).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default svg path{stroke-width:1.2}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{-webkit-text-decoration:none;text-decoration:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){-webkit-text-decoration:none;text-decoration:none}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){-webkit-text-decoration:none;text-decoration:none}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:active.dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{-webkit-text-decoration:none;text-decoration:none}[data-visual-test-wrapper] :where(:not(.dnb-anchor--no-style)).dnb-anchor{transition:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon{display:inline-block;transform:translateY(-.0625em)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--no-icon .dnb-icon{display:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast{color:var(--color-white)}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover){--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:active{--anchor-background-gutter:0.125em;background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,calc(var(--anchor-background-gutter)*-1) 0 0 0 transparent,var(--anchor-background-gutter) 0 0 0 transparent;color:var(--color-white)}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-underline-thickness:0.0938rem;border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em 0;-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:currentcolor;text-decoration-thickness:var(--anchor-underline-thickness);text-underline-offset:.25em;transition:box-shadow .2s ease-in-out,border-radius .2s ease-in-out,background .2s ease-in-out}sub :not(.dnb-anchor--no-style).dnb-anchor,sup :not(.dnb-anchor--no-style).dnb-anchor{padding:0 .025em}.dnb-h--basis :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--medium :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--small :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--x-large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--x-small :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--xx-large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-lead :not(.dnb-anchor--no-style).dnb-anchor,.dnb-p :not(.dnb-anchor--no-style).dnb-anchor{font-size:inherit}:not(.dnb-anchor--no-style).dnb-anchor--launch-icon .dnb-icon,:not(.dnb-anchor--no-style).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default{font-size:1.11em}:not(.dnb-anchor--no-style).dnb-anchor--launch-icon .dnb-icon svg path,:not(.dnb-anchor--no-style).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default svg path{stroke-width:1.2}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{-webkit-text-decoration:none;text-decoration:none}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){-webkit-text-decoration:none;text-decoration:none}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){-webkit-text-decoration:none;text-decoration:none}}:not(.dnb-anchor--no-style).dnb-anchor:active{border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:active.dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:active{-webkit-text-decoration:none;text-decoration:none}[data-visual-test-wrapper] :not(.dnb-anchor--no-style).dnb-anchor{transition:none}:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon{display:inline-block;transform:translateY(-.0625em)}:not(.dnb-anchor--no-style).dnb-anchor--no-icon .dnb-icon{display:none}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast{color:var(--color-white)}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover){--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:active{--anchor-background-gutter:0.125em;background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,calc(var(--anchor-background-gutter)*-1) 0 0 0 transparent,var(--anchor-background-gutter) 0 0 0 transparent;color:var(--color-white)}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}}.dnb-anchor--hover{border-radius:.25em}.dnb-anchor--hover,.dnb-section .dnb-anchor--hover.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor--active{border-radius:.25em}.dnb-anchor--active,.dnb-section .dnb-anchor--active.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor--focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-anchor--focus,.dnb-anchor--no-underline,.dnb-section .dnb-anchor--focus.dnb-anchor,.dnb-section .dnb-anchor--no-underline.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus-visible,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--no-animation,a.dnb-button{transition:none}.dnb-anchor.dnb-skeleton,.dnb-skeleton>.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor.dnb-skeleton .dnb-icon,.dnb-skeleton>.dnb-anchor .dnb-icon{filter:grayscale(100%) opacity(.3)}

package/cjs/components/card/Card.d.ts

@@ -1,6 +1,6 @@
 import type { Props as FlexContainerProps } from '../flex/Container';
 import type { Props as FlexItemProps } from '../flex/Item';
-export type Props = FlexContainerProps & FlexItemProps & {
+export type Props = Omit<FlexContainerProps & FlexItemProps, 'ref' | 'wrap'> & {
     stack?: boolean;
 };
 declare function Card(props: Props): import("react/jsx-runtime").JSX.Element;

package/cjs/components/card/Card.js

@@ -7,9 +7,15 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Flex = _interopRequireDefault(require("../flex/Flex"));
-const _excluded = ["className", "stack", "direction", "spacing", "alignSelf", "children"];
+var _Section = require("../section/Section");
+const _excluded = ["className", "stack", "direction", "spacing", "innerSpace", "alignSelf", "divider", "children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function Card(props) {
@@ -18,26 +24,59 @@ function Card(props) {
       stack,
       direction,
       spacing,
+      innerSpace,
       alignSelf = 'stretch',
+      divider = 'space',
       children
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
+  const falseWhenSmall = {
+    small: false,
+    medium: true,
+    large: true
+  };
+  const trueWhenSmall = {
+    small: true,
+    medium: false,
+    large: false
+  };
+  const basisSpace = {
+    top: 'medium',
+    right: 'medium',
+    bottom: 'large',
+    left: 'medium'
+  };
+  const smallSpace = _objectSpread(_objectSpread({}, basisSpace), {}, {
+    right: 0,
+    left: 0
+  });
+  const params = (0, _Section.SectionParams)(_objectSpread({
+    className: (0, _classnames.default)('dnb-card', className),
+    backgroundColor: 'white',
+    breakout: trueWhenSmall,
+    roundedCorner: falseWhenSmall,
+    outline: true,
+    innerSpace: innerSpace !== null && innerSpace !== void 0 ? innerSpace : {
+      small: smallSpace,
+      medium: basisSpace,
+      large: basisSpace
+    },
+    children
+  }, rest));
   if (stack || direction || spacing) {
     return _react.default.createElement(_Flex.default.Container, _extends({
-      className: (0, _classnames.default)('dnb-card', className),
       direction: direction !== null && direction !== void 0 ? direction : 'vertical',
-      divider: stack ? 'line' : 'space',
-      element: "section",
+      divider: divider,
       wrap: false,
-      spacing: spacing !== null && spacing !== void 0 ? spacing : stack ? 'medium' : 'small',
-      alignSelf: alignSelf
-    }, rest), children);
+      spacing: spacing,
+      alignSelf: alignSelf,
+      element: "section"
+    }, params));
   }
   return _react.default.createElement(_Flex.default.Item, _extends({
-    className: (0, _classnames.default)('dnb-card', className),
     alignSelf: alignSelf,
     element: "section"
-  }, rest), children);
+  }, params));
 }
 Card._supportsSpacingProps = true;
 var _default = Card;

package/cjs/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["_react","_interopRequireDefault","require","_classnames","_Flex","_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","Card","props","className","stack","direction","spacing","alignSelf","children","rest","createElement","Container","classnames","divider","element","wrap","Item","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport type { Props as FlexContainerProps } from '../flex/Container'\nimport type { Props as FlexItemProps } from '../flex/Item'\n\nexport type Props = FlexContainerProps &\n  FlexItemProps & {\n    stack?: boolean\n  }\n\nfunction Card(props: Props) {\n  const {\n    className,\n    stack,\n    direction,\n    spacing,\n    alignSelf = 'stretch',\n    children,\n    ...rest\n  } = props\n\n  if (stack || direction || spacing) {\n    return (\n      <Flex.Container\n        className={classnames('dnb-card', className)}\n        direction={direction ?? 'vertical'}\n        divider={stack ? 'line' : 'space'}\n        element=\"section\"\n        wrap={false}\n        spacing={spacing ?? (stack ? 'medium' : 'small')}\n        alignSelf={alignSelf}\n        {...rest}\n      >\n        {children}\n      </Flex.Container>\n    )\n  }\n\n  return (\n    <Flex.Item\n      className={classnames('dnb-card', className)}\n      alignSelf={alignSelf}\n      element=\"section\"\n      {...rest}\n    >\n      {children}\n    </Flex.Item>\n  )\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":"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"}
+{"version":3,"file":"Card.js","names":["_react","_interopRequireDefault","require","_classnames","_Flex","_Section","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","Card","props","className","stack","direction","spacing","innerSpace","alignSelf","divider","children","rest","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","params","SectionParams","classnames","backgroundColor","breakout","roundedCorner","outline","createElement","Container","wrap","element","Item","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams } from '../section/Section'\n\nimport type { Props as FlexContainerProps } from '../flex/Container'\nimport type { Props as FlexItemProps } from '../flex/Item'\nimport type { SpaceTypeMedia } from '../../shared/types'\n\nexport type Props = Omit<\n  FlexContainerProps & FlexItemProps,\n  'ref' | 'wrap'\n> & {\n  stack?: boolean\n}\nfunction Card(props: Props) {\n  const {\n    className,\n    stack,\n    direction,\n    spacing,\n    innerSpace,\n    alignSelf = 'stretch',\n    divider = 'space',\n    children,\n    ...rest\n  } = props\n\n  const falseWhenSmall = { small: false, medium: true, large: true }\n  const trueWhenSmall = { small: true, medium: false, large: false }\n  const basisSpace = {\n    top: 'medium',\n    right: 'medium',\n    bottom: 'large',\n    left: 'medium',\n  }\n  const smallSpace = {\n    ...basisSpace,\n    right: 0,\n    left: 0,\n  }\n\n  const params = SectionParams({\n    className: classnames('dnb-card', className),\n    backgroundColor: 'white',\n    breakout: trueWhenSmall,\n    roundedCorner: falseWhenSmall,\n    outline: true,\n    innerSpace:\n      innerSpace ??\n      ({\n        small: smallSpace,\n        medium: basisSpace,\n        large: basisSpace,\n      } as SpaceTypeMedia),\n    children,\n    ...rest,\n  })\n\n  if (stack || direction || spacing) {\n    return (\n      <Flex.Container\n        direction={direction ?? 'vertical'}\n        divider={divider}\n        wrap={false}\n        spacing={spacing}\n        alignSelf={alignSelf}\n        element=\"section\"\n        {...params}\n      />\n    )\n  }\n\n  return <Flex.Item alignSelf={alignSelf} element=\"section\" {...params} />\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":"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"}

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

@@ -1,23 +1,3 @@
-/*
- * Utilities
- */
-.dnb-card {
-  --background-color: var(--color-white);
-  --border-color: var(--color-lavender);
-  --border-width: 0.25rem;
-  --border-radius: 0.75rem;
-  padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium);
-  background-color: var(--background-color);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--border-radius);
-}
-@media screen and (max-width: 40em) {
-  .dnb-card {
-    --border-radius: 0;
-    border-left: none;
-    border-right: none;
-  }
-}
 .dnb-card__heading {
   font-size: var(--font-size-basis);
   font-weight: var(--font-weight-medium);

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

@@ -1 +1 @@
-.dnb-card{--background-color:var(--color-white);--border-color:var(--color-lavender);--border-width:0.25rem;--border-radius:0.75rem;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);padding:var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium)}@media screen and (max-width:40em){.dnb-card{--border-radius:0;border-left:none;border-right:none}}.dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}
+.dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}

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

@@ -1,24 +1,4 @@
-@import '../../../style/core/utilities.scss';
-
 .dnb-card {
-  --background-color: var(--color-white);
-  --border-color: var(--color-lavender);
-  --border-width: 0.25rem;
-  --border-radius: 0.75rem;
-
-  padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-large)
-    var(--spacing-medium);
-
-  background-color: var(--background-color);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--border-radius);
-
-  @include allBelow(small) {
-    --border-radius: 0;
-    border-left: none;
-    border-right: none;
-  }
-
   &__heading {
     font-size: var(--font-size-basis);
     font-weight: var(--font-weight-medium);

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

@@ -0,0 +1,26 @@
+/*
+ * Utilities
+ */
+.dnb-card.dnb-section {
+  --background-color: var(--color-white);
+  --outline-color: var(--border-color, var(--color-lavender));
+  --outline-width: 0.25rem;
+}
+@media screen and (max-width: 40em) {
+  .dnb-card::before {
+    left: -100%;
+    right: -100%;
+  }
+}
+.dnb-card + .dnb-card:not([class*=space__top])::before {
+  top: var(--outline-width);
+}
+@media screen and (max-width: 40em) {
+  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card {
+    margin-top: 0;
+  }
+  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card::before {
+    top: var(--outline-width);
+    z-index: 0;
+  }
+}

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

@@ -0,0 +1 @@
+.dnb-card.dnb-section{--background-color:var(--color-white);--outline-color:var(--border-color,var(--color-lavender));--outline-width:0.25rem}@media screen and (max-width:40em){.dnb-card:before{left:-100%;right:-100%}}.dnb-card+.dnb-card:not([class*=space__top]):before{top:var(--outline-width)}@media screen and (max-width:40em){.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card{margin-top:0}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card:before{top:var(--outline-width);z-index:0}}

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

@@ -0,0 +1,35 @@
+@import '../../../../style/core/utilities.scss';
+
+.dnb-card {
+  &.dnb-section {
+    --background-color: var(--color-white);
+    --outline-color: var(--border-color, var(--color-lavender));
+    --outline-width: 0.25rem;
+  }
+
+  @include allBelow(small) {
+    &::before {
+      left: -100%;
+      right: -100%;
+    }
+  }
+
+  // Show only one border (combined) when stacked
+  & + .dnb-card:not([class*='space__top']) {
+    &::before {
+      top: var(--outline-width);
+    }
+  }
+
+  // Combine the two borers to one
+  .dnb-flex-container.dnb-flex-container--divider-space & + .dnb-card {
+    @include allBelow(small) {
+      margin-top: 0;
+
+      &::before {
+        top: var(--outline-width);
+        z-index: 0;
+      }
+    }
+  }
+}

package/cjs/components/date-picker/DatePicker.d.ts

@@ -26,7 +26,7 @@ type DatePickerSuffix =
 type DatePickerDirection = 'auto' | 'top' | 'bottom';
 type DatePickerAlignPicker = 'auto' | 'left' | 'right';
 export interface DatePickerProps
-  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
+  extends Omit<React.HTMLProps<HTMLElement>, 'ref', 'onBlur'>,
     SpacingProps {
   id?: string;
   title?: string;
@@ -244,6 +244,10 @@ export interface DatePickerProps
    * Will be called once a user presses the reset button.
    */
   on_reset?: (...args: any[]) => any;
+  /**
+   * Will be called once the input lose focus.
+   */
+  onBlur?: (event: React.FocusEventHandler<HTMLInputElement>) => void;
 }
 export default class DatePicker extends React.Component<
   DatePickerProps,