@dnb/eufemia 10.76.1 → 10.77.0

package/components/date-picker/style/themes/dnb-date-picker-theme-ui--isolated.css

@@ -0,0 +1,129 @@
+/*
+* DatePicker theme
+*
+*/
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input {
+  color: var(--color-black-55);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input ~ .dnb-date-picker--separator {
+  color: var(--color-black-55);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input--highlight:not([disabled]) {
+  color: var(--color-black);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input--highlight:not([disabled]) ~ .dnb-date-picker--separator {
+  color: var(--color-black);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__container {
+  box-shadow: var(--shadow-default);
+  border-radius: 0.25rem;
+  background-color: var(--color-white);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__addon::after, .eufemia-scope--10_77_0 .dnb-date-picker__calendar::after {
+  background-color: var(--color-black-8);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__header {
+  --gap: 0.25rem;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  gap: var(--gap);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__header::after {
+  background-color: var(--color-black-8);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__header--only-month-label {
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__header__row {
+  min-width: 60%;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: space-between;
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__header__row--year {
+  min-width: calc(40% - var(--gap));
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__header__nav .dnb-button {
+  box-shadow: none;
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__header__title {
+  text-transform: capitalize;
+  text-align: center;
+  font-size: var(--font-size-basis);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-black-80);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__labels__day {
+  text-transform: capitalize;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-black-80);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__day, .eufemia-scope--10_77_0 .dnb-date-picker__labels__day {
+  text-align: center;
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__day--today .dnb-button {
+  font-weight: var(--font-weight-medium);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__day--preview .dnb-button, .eufemia-scope--10_77_0 .dnb-date-picker__day--inactive .dnb-button, .eufemia-scope--10_77_0 .dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date) .dnb-button:not(:hover) {
+  background-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__day--preview:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date), .eufemia-scope--10_77_0 .dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date) {
+  background-color: var(--color-mint-green-50);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive)::after, .eufemia-scope--10_77_0 .dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive)::after {
+  background-color: var(--color-mint-green-50);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive) .dnb-button, .eufemia-scope--10_77_0 .dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive) .dnb-button {
+  color: var(--color-mint-green-25);
+  background-color: var(--color-emerald-green);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--preview) .dnb-button:hover, .eufemia-scope--10_77_0 .dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--preview) .dnb-button:hover {
+  box-shadow: none;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-date-picker__day--start-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-date-picker__day--end-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]) {
+  color: var(--color-mint-green-25);
+  background-color: var(--color-emerald-green);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__day--disabled .dnb-button {
+  -webkit-text-decoration: line-through;
+  text-decoration: line-through;
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__day--inactive .dnb-button {
+  color: var(--color-black-55);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__day--inactive .dnb-button[disabled], .eufemia-scope--10_77_0 .dnb-date-picker__day--disabled .dnb-button[disabled] {
+  box-shadow: none;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-date-picker__day--inactive .dnb-button[disabled] {
+  cursor: default;
+}
+.eufemia-scope--10_77_0 .dnb-date-picker--opened .dnb-input .dnb-input__shell, .eufemia-scope--10_77_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover ~ .dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
+  --border-color: var(--color-sea-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-date-picker--opened .dnb-input .dnb-input__submit-button__button.dnb-button--secondary, .eufemia-scope--10_77_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover ~ .dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button.dnb-button--secondary {
+  color: var(--color-white);
+  background-color: var(--color-sea-green);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker--opened .dnb-input .dnb-input__submit-button__button.dnb-button--secondary::after, .eufemia-scope--10_77_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover ~ .dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button.dnb-button--secondary::after {
+  background-color: inherit;
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__triangle::before {
+  border: none;
+  background-color: var(--color-white);
+  box-shadow: var(--shadow-default);
+}
+.eufemia-scope--10_77_0 .dnb-date-picker__status--error:not(.dnb-date-picker--opened) .dnb-form-label:hover ~ .dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
+  --border-color: var(--color-fire-red);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}

package/components/date-picker/style/themes/dnb-date-picker-theme-ui--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input,.eufemia-scope--10_77_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input~.dnb-date-picker--separator{color:var(--color-black-55)}.eufemia-scope--10_77_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input--highlight:not([disabled]),.eufemia-scope--10_77_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input--highlight:not([disabled])~.dnb-date-picker--separator{color:var(--color-black)}.eufemia-scope--10_77_0 .dnb-date-picker__container{background-color:var(--color-white);border-radius:.25rem;box-shadow:var(--shadow-default)}.eufemia-scope--10_77_0 .dnb-date-picker__addon:after,.eufemia-scope--10_77_0 .dnb-date-picker__calendar:after{background-color:var(--color-black-8)}.eufemia-scope--10_77_0 .dnb-date-picker__header{--gap:0.25rem;display:flex;flex-flow:row wrap;gap:var(--gap);justify-content:space-between}.eufemia-scope--10_77_0 .dnb-date-picker__header:after{background-color:var(--color-black-8)}.eufemia-scope--10_77_0 .dnb-date-picker__header--only-month-label{justify-content:center;margin-bottom:1rem}.eufemia-scope--10_77_0 .dnb-date-picker__header__row{align-items:center;display:flex;flex:1 1 auto;justify-content:space-between;min-width:60%}.eufemia-scope--10_77_0 .dnb-date-picker__header__row--year{min-width:calc(40% - var(--gap))}.eufemia-scope--10_77_0 .dnb-date-picker__header__nav .dnb-button{box-shadow:none}.eufemia-scope--10_77_0 .dnb-date-picker__header__title{font-size:var(--font-size-basis);text-align:center}.eufemia-scope--10_77_0 .dnb-date-picker__header__title,.eufemia-scope--10_77_0 .dnb-date-picker__labels__day{color:var(--color-black-80);font-weight:var(--font-weight-medium);text-transform:capitalize}.eufemia-scope--10_77_0 .dnb-date-picker__day,.eufemia-scope--10_77_0 .dnb-date-picker__labels__day{text-align:center}.eufemia-scope--10_77_0 .dnb-date-picker__day--today .dnb-button{font-weight:var(--font-weight-medium)}.eufemia-scope--10_77_0 .dnb-date-picker__day--inactive .dnb-button,.eufemia-scope--10_77_0 .dnb-date-picker__day--preview .dnb-button,.eufemia-scope--10_77_0 .dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date) .dnb-button:not(:hover){background-color:transparent}.eufemia-scope--10_77_0 .dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive):after,.eufemia-scope--10_77_0 .dnb-date-picker__day--preview:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date),.eufemia-scope--10_77_0 .dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive):after,.eufemia-scope--10_77_0 .dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date){background-color:var(--color-mint-green-50)}.eufemia-scope--10_77_0 .dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive) .dnb-button,.eufemia-scope--10_77_0 .dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive) .dnb-button{background-color:var(--color-emerald-green);color:var(--color-mint-green-25)}.eufemia-scope--10_77_0 .dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--preview) .dnb-button:hover,.eufemia-scope--10_77_0 .dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--preview) .dnb-button:hover{box-shadow:none}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-date-picker__day--end-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-date-picker__day--start-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]){background-color:var(--color-emerald-green);color:var(--color-mint-green-25)}.eufemia-scope--10_77_0 .dnb-date-picker__day--disabled .dnb-button{-webkit-text-decoration:line-through;text-decoration:line-through}.eufemia-scope--10_77_0 .dnb-date-picker__day--inactive .dnb-button{color:var(--color-black-55)}.eufemia-scope--10_77_0 .dnb-date-picker__day--disabled .dnb-button[disabled],.eufemia-scope--10_77_0 .dnb-date-picker__day--inactive .dnb-button[disabled]{box-shadow:none}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-date-picker__day--inactive .dnb-button[disabled]{cursor:default}.eufemia-scope--10_77_0 .dnb-date-picker--opened .dnb-input .dnb-input__shell,.eufemia-scope--10_77_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover~.dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-sea-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.eufemia-scope--10_77_0 .dnb-date-picker--opened .dnb-input .dnb-input__submit-button__button.dnb-button--secondary,.eufemia-scope--10_77_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover~.dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button.dnb-button--secondary{background-color:var(--color-sea-green);color:var(--color-white)}.eufemia-scope--10_77_0 .dnb-date-picker--opened .dnb-input .dnb-input__submit-button__button.dnb-button--secondary:after,.eufemia-scope--10_77_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover~.dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button.dnb-button--secondary:after{background-color:inherit}.eufemia-scope--10_77_0 .dnb-date-picker__triangle:before{background-color:var(--color-white);border:none;box-shadow:var(--shadow-default)}.eufemia-scope--10_77_0 .dnb-date-picker__status--error:not(.dnb-date-picker--opened) .dnb-form-label:hover~.dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-fire-red);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}

package/components/dialog/style/dnb-dialog--isolated.css

@@ -0,0 +1,308 @@
+/*
+ * Dialog component
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Modal component
+ *
+ */
+@keyframes show-modal {
+  from {
+    opacity: 0.1;
+    transform: translate3d(0, -1rem, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+@keyframes hide-modal {
+  from {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate3d(0, 1rem, 0);
+    opacity: 0;
+  }
+}
+@keyframes show-drawer {
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+@keyframes hide-drawer-left {
+  from {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate3d(-20rem, 0, 0);
+    opacity: 0;
+  }
+}
+@keyframes hide-drawer-top {
+  from {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate3d(0, -20rem, 0);
+    opacity: 0;
+  }
+}
+@keyframes hide-drawer-bottom {
+  from {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate3d(0, 20rem, 0);
+    opacity: 0;
+  }
+}
+@keyframes hide-drawer-right {
+  from {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate3d(20rem, 0, 0);
+    opacity: 0;
+  }
+}
+@keyframes show-modal-overlay {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes hide-modal-overlay {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.eufemia-scope--10_77_0 .dnb-dialog {
+  --dialog-min-width: 320px;
+  --dialog-avg-width: 60vw;
+  --dialog-max-width: 49rem;
+  --dialog-confirm-max-width: 40rem;
+  --dialog-spacing: 2rem;
+  --dialog-spacing-minus: -2rem;
+  --dialog-radius: 0.5rem;
+  position: relative;
+  border-radius: var(--dialog-radius);
+  box-shadow: var(--shadow-default);
+  -webkit-user-select: text;
+          user-select: text;
+  border: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  background: var(--dialog-background);
+  max-height: 100vh;
+  overflow: hidden;
+}
+.eufemia-scope--10_77_0 .dnb-dialog > .dnb-scroll-view {
+  height: 100%;
+  max-height: 90vh;
+}
+.eufemia-scope--10_77_0 .dnb-dialog__inner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+.eufemia-scope--10_77_0 .dnb-dialog--information {
+  width: var(--dialog-avg-width);
+  min-width: var(--dialog-min-width);
+  max-width: var(--dialog-max-width);
+}
+.eufemia-scope--10_77_0 .dnb-dialog--confirmation {
+  max-width: var(--dialog-confirm-max-width);
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+@media screen and (max-width: 40em) {
+  .eufemia-scope--10_77_0 .dnb-dialog--auto-fullscreen {
+    width: 100%;
+    height: 100vh;
+    max-width: 100%;
+    max-height: 100vh;
+    border-radius: 0;
+    box-shadow: none;
+    margin: auto 0;
+  }
+}
+.eufemia-scope--10_77_0 .dnb-dialog--fullscreen {
+  width: 100%;
+  height: 100vh;
+  max-width: 100%;
+  max-height: 100vh;
+  border-radius: 0;
+  box-shadow: none;
+  margin: auto 0;
+}
+.eufemia-scope--10_77_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content {
+  padding-bottom: calc(var(--dialog-spacing) * 2);
+}
+.eufemia-scope--10_77_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner {
+  padding-left: calc(var(--dialog-spacing) * 1.75);
+  padding-right: calc(var(--dialog-spacing) * 1.75);
+}
+@media screen and (max-width: 72em) {
+  .eufemia-scope--10_77_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner {
+    padding-left: calc(var(--dialog-spacing));
+    padding-right: calc(var(--dialog-spacing));
+  }
+}
+@media screen and (max-width: 40em) {
+  .eufemia-scope--10_77_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner {
+    padding-left: calc(var(--dialog-spacing) / 2);
+    padding-right: calc(var(--dialog-spacing) / 2);
+  }
+}
+.eufemia-scope--10_77_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section {
+  margin-top: calc(var(--dialog-spacing));
+  margin-bottom: calc(var(--dialog-spacing) / 2);
+}
+@media screen and (max-width: 60em) {
+  .eufemia-scope--10_77_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section {
+    margin-top: calc(var(--dialog-spacing) / 2);
+  }
+}
+.eufemia-scope--10_77_0 .dnb-dialog--spacing.dnb-dialog--confirmation .dnb-dialog__inner {
+  padding: calc(var(--dialog-spacing));
+}
+.eufemia-scope--10_77_0 .dnb-dialog__align--centered .dnb-dialog__inner {
+  align-items: center;
+  justify-content: center;
+}
+.eufemia-scope--10_77_0 .dnb-dialog__align--centered .dnb-dialog__title, .eufemia-scope--10_77_0 .dnb-dialog__align--centered.dnb-dialog--confirmation .dnb-dialog__content {
+  text-align: center;
+}
+.eufemia-scope--10_77_0 .dnb-dialog__content {
+  position: relative;
+  z-index: 1;
+}
+.eufemia-scope--10_77_0 .dnb-dialog__actions {
+  padding-top: 1.5rem;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  gap: 1rem;
+  width: 100%;
+}
+.eufemia-scope--10_77_0 .dnb-dialog--information .dnb-dialog__actions {
+  justify-content: left;
+}
+.eufemia-scope--10_77_0 .dnb-dialog__align--center .dnb-dialog__content {
+  align-items: center;
+  text-align: center;
+}
+.eufemia-scope--10_77_0 .dnb-dialog__align--right .dnb-dialog__content {
+  align-items: flex-end;
+  text-align: right;
+}
+.eufemia-scope--10_77_0 .dnb-dialog__title ~ .dnb-dialog__content {
+  padding-top: calc(var(--dialog-spacing) / 2);
+}
+@media screen and (max-width: 60em) {
+  .eufemia-scope--10_77_0 .dnb-dialog__title {
+    font-size: var(--font-size-large) !important;
+    line-height: var(--line-height-medium) !important;
+  }
+}
+@media screen and (max-width: 40em) {
+  .eufemia-scope--10_77_0 .dnb-dialog__title {
+    font-size: var(--font-size-medium) !important;
+    line-height: var(--line-height-lead) !important;
+  }
+}
+.eufemia-scope--10_77_0 .dnb-dialog--information .dnb-dialog__title {
+  margin-bottom: var(--spacing-small) !important;
+}
+.eufemia-scope--10_77_0 .dnb-dialog--confirmation .dnb-dialog__title {
+  margin-bottom: var(--spacing-x-small) !important;
+}
+.eufemia-scope--10_77_0 .dnb-dialog__navigation.dnb-section {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+html:not([data-visual-test]) .eufemia-scope--10_77_0 .dnb-dialog {
+  animation: show-modal var(--modal-animation-duration) ease-out;
+}
+html:not([data-visual-test]) .eufemia-scope--10_77_0 .dnb-dialog--hide {
+  animation: hide-modal 220ms ease-in-out forwards;
+}
+.eufemia-scope--10_77_0 .dnb-dialog--no-animation {
+  animation-duration: 0ms !important;
+}
+@media screen and (max-width: 40em) {
+  .eufemia-scope--10_77_0 .dnb-dialog--no-animation-on-mobile {
+    animation-delay: 0ms !important;
+    animation-duration: 0ms !important;
+  }
+}
+.eufemia-scope--10_77_0 .dnb-dialog__body {
+  padding-bottom: calc(var(--dialog-spacing) * 2);
+  margin-bottom: calc(var(--dialog-spacing-minus) * 2);
+}
+.eufemia-scope--10_77_0 .dnb-dialog__header::after {
+  top: -500%;
+  height: 600%;
+}
+.eufemia-scope--10_77_0 .dnb-dialog__header [class*=dnb-h--], .eufemia-scope--10_77_0 .dnb-dialog__header .dnb-modal__title {
+  padding: 0;
+}
+.eufemia-scope--10_77_0 .dnb-dialog__header [class*=dnb-h--]:not([class*=__top]), .eufemia-scope--10_77_0 .dnb-dialog__header .dnb-modal__title:not([class*=__top]) {
+  margin-top: 0;
+}
+.eufemia-scope--10_77_0 .dnb-dialog__header [class*=dnb-h--]:not([class*=__bottom]), .eufemia-scope--10_77_0 .dnb-dialog__header .dnb-modal__title:not([class*=__bottom]) {
+  margin-bottom: 0;
+}
+.eufemia-scope--10_77_0 .dnb-dialog--spacing .dnb-dialog__header .dnb-tabs {
+  margin-top: 3.5rem;
+}
+.eufemia-scope--10_77_0 .dnb-dialog__icon {
+  display: flex;
+}
+.eufemia-scope--10_77_0 .dnb-dialog__icon__primary.dnb-icon--border {
+  --icon-border-positioning--default: var(--dialog-icon-positioning);
+  color: var(--dialog-icon-color);
+}
+.eufemia-scope--10_77_0 .dnb-dialog__icon__primary.dnb-icon--border svg {
+  z-index: 1;
+  position: relative;
+}
+.eufemia-scope--10_77_0 .dnb-dialog__icon__primary.dnb-icon--border::after {
+  border: none;
+  background-color: var(--dialog-icon-background);
+}
+.eufemia-scope--10_77_0 .dnb-dialog__icon__primary.dnb-dialog__icon--warning {
+  --dialog-icon-color: var(--dialog-icon-color--warning);
+  --dialog-icon-background: var(--dialog-icon-background--warning);
+}
+.eufemia-scope--10_77_0 .dnb-dialog__icon__primary.dnb-dialog__icon--info {
+  --dialog-icon-color: var(--dialog-icon-color--info);
+  --dialog-icon-background: var(--dialog-icon-background--info);
+}
+.eufemia-scope--10_77_0 .dnb-dialog__icon ~ .dnb-dialog__header {
+  margin-top: 1.5rem;
+}
+@supports (-webkit-touch-callout: none) {
+  @media (max-height: 40em) {
+    .eufemia-scope--10_77_0 .dnb-dialog .dnb-scroll-view {
+      max-height: 82vh;
+    }
+  }
+}

package/components/dialog/style/dnb-dialog--isolated.min.css

@@ -0,0 +1 @@
+@keyframes show-modal{0%{opacity:.1;transform:translate3d(0,-1rem,0)}to{opacity:1;transform:translateZ(0)}}@keyframes hide-modal{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,1rem,0)}}@keyframes show-drawer{to{opacity:1;transform:translateZ(0)}}@keyframes hide-drawer-left{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-20rem,0,0)}}@keyframes hide-drawer-top{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-20rem,0)}}@keyframes hide-drawer-bottom{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,20rem,0)}}@keyframes hide-drawer-right{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(20rem,0,0)}}@keyframes show-modal-overlay{0%{opacity:0}to{opacity:1}}@keyframes hide-modal-overlay{0%{opacity:1}to{opacity:0}}.eufemia-scope--10_77_0 .dnb-dialog{--dialog-min-width:320px;--dialog-avg-width:60vw;--dialog-max-width:49rem;--dialog-confirm-max-width:40rem;--dialog-spacing:2rem;--dialog-spacing-minus:-2rem;--dialog-radius:0.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0);background:var(--dialog-background);border:none;border-radius:var(--dialog-radius);box-shadow:var(--shadow-default);max-height:100vh;overflow:hidden;position:relative;-webkit-user-select:text;user-select:text}.eufemia-scope--10_77_0 .dnb-dialog>.dnb-scroll-view{height:100%;max-height:90vh}.eufemia-scope--10_77_0 .dnb-dialog__inner{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.eufemia-scope--10_77_0 .dnb-dialog--information{max-width:var(--dialog-max-width);min-width:var(--dialog-min-width);width:var(--dialog-avg-width)}.eufemia-scope--10_77_0 .dnb-dialog--confirmation{margin-left:1rem;margin-right:1rem;max-width:var(--dialog-confirm-max-width)}@media screen and (max-width:40em){.eufemia-scope--10_77_0 .dnb-dialog--auto-fullscreen{border-radius:0;box-shadow:none;height:100vh;margin:auto 0;max-height:100vh;max-width:100%;width:100%}}.eufemia-scope--10_77_0 .dnb-dialog--fullscreen{border-radius:0;box-shadow:none;height:100vh;margin:auto 0;max-height:100vh;max-width:100%;width:100%}.eufemia-scope--10_77_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content{padding-bottom:calc(var(--dialog-spacing)*2)}.eufemia-scope--10_77_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner{padding-left:calc(var(--dialog-spacing)*1.75);padding-right:calc(var(--dialog-spacing)*1.75)}@media screen and (max-width:72em){.eufemia-scope--10_77_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner{padding-left:calc(var(--dialog-spacing));padding-right:calc(var(--dialog-spacing))}}@media screen and (max-width:40em){.eufemia-scope--10_77_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner{padding-left:calc(var(--dialog-spacing)/2);padding-right:calc(var(--dialog-spacing)/2)}}.eufemia-scope--10_77_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section{margin-bottom:calc(var(--dialog-spacing)/2);margin-top:calc(var(--dialog-spacing))}@media screen and (max-width:60em){.eufemia-scope--10_77_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section{margin-top:calc(var(--dialog-spacing)/2)}}.eufemia-scope--10_77_0 .dnb-dialog--spacing.dnb-dialog--confirmation .dnb-dialog__inner{padding:calc(var(--dialog-spacing))}.eufemia-scope--10_77_0 .dnb-dialog__align--centered .dnb-dialog__inner{align-items:center;justify-content:center}.eufemia-scope--10_77_0 .dnb-dialog__align--centered .dnb-dialog__title,.eufemia-scope--10_77_0 .dnb-dialog__align--centered.dnb-dialog--confirmation .dnb-dialog__content{text-align:center}.eufemia-scope--10_77_0 .dnb-dialog__content{position:relative;z-index:1}.eufemia-scope--10_77_0 .dnb-dialog__actions{display:flex;flex-flow:row wrap;gap:1rem;justify-content:center;padding-top:1.5rem;width:100%}.eufemia-scope--10_77_0 .dnb-dialog--information .dnb-dialog__actions{justify-content:left}.eufemia-scope--10_77_0 .dnb-dialog__align--center .dnb-dialog__content{align-items:center;text-align:center}.eufemia-scope--10_77_0 .dnb-dialog__align--right .dnb-dialog__content{align-items:flex-end;text-align:right}.eufemia-scope--10_77_0 .dnb-dialog__title~.dnb-dialog__content{padding-top:calc(var(--dialog-spacing)/2)}@media screen and (max-width:60em){.eufemia-scope--10_77_0 .dnb-dialog__title{font-size:var(--font-size-large)!important;line-height:var(--line-height-medium)!important}}@media screen and (max-width:40em){.eufemia-scope--10_77_0 .dnb-dialog__title{font-size:var(--font-size-medium)!important;line-height:var(--line-height-lead)!important}}.eufemia-scope--10_77_0 .dnb-dialog--information .dnb-dialog__title{margin-bottom:var(--spacing-small)!important}.eufemia-scope--10_77_0 .dnb-dialog--confirmation .dnb-dialog__title{margin-bottom:var(--spacing-x-small)!important}.eufemia-scope--10_77_0 .dnb-dialog__navigation.dnb-section{display:flex;flex-direction:row;justify-content:space-between}html:not([data-visual-test]) .eufemia-scope--10_77_0 .dnb-dialog{animation:show-modal var(--modal-animation-duration) ease-out}html:not([data-visual-test]) .eufemia-scope--10_77_0 .dnb-dialog--hide{animation:hide-modal .22s ease-in-out forwards}.eufemia-scope--10_77_0 .dnb-dialog--no-animation{animation-duration:0ms!important}@media screen and (max-width:40em){.eufemia-scope--10_77_0 .dnb-dialog--no-animation-on-mobile{animation-delay:0ms!important;animation-duration:0ms!important}}.eufemia-scope--10_77_0 .dnb-dialog__body{margin-bottom:calc(var(--dialog-spacing-minus)*2);padding-bottom:calc(var(--dialog-spacing)*2)}.eufemia-scope--10_77_0 .dnb-dialog__header:after{height:600%;top:-500%}.eufemia-scope--10_77_0 .dnb-dialog__header .dnb-modal__title,.eufemia-scope--10_77_0 .dnb-dialog__header [class*=dnb-h--]{padding:0}.eufemia-scope--10_77_0 .dnb-dialog__header .dnb-modal__title:not([class*=__top]),.eufemia-scope--10_77_0 .dnb-dialog__header [class*=dnb-h--]:not([class*=__top]){margin-top:0}.eufemia-scope--10_77_0 .dnb-dialog__header .dnb-modal__title:not([class*=__bottom]),.eufemia-scope--10_77_0 .dnb-dialog__header [class*=dnb-h--]:not([class*=__bottom]){margin-bottom:0}.eufemia-scope--10_77_0 .dnb-dialog--spacing .dnb-dialog__header .dnb-tabs{margin-top:3.5rem}.eufemia-scope--10_77_0 .dnb-dialog__icon{display:flex}.eufemia-scope--10_77_0 .dnb-dialog__icon__primary.dnb-icon--border{--icon-border-positioning--default:var(--dialog-icon-positioning);color:var(--dialog-icon-color)}.eufemia-scope--10_77_0 .dnb-dialog__icon__primary.dnb-icon--border svg{position:relative;z-index:1}.eufemia-scope--10_77_0 .dnb-dialog__icon__primary.dnb-icon--border:after{background-color:var(--dialog-icon-background);border:none}.eufemia-scope--10_77_0 .dnb-dialog__icon__primary.dnb-dialog__icon--warning{--dialog-icon-color:var(--dialog-icon-color--warning);--dialog-icon-background:var(--dialog-icon-background--warning)}.eufemia-scope--10_77_0 .dnb-dialog__icon__primary.dnb-dialog__icon--info{--dialog-icon-color:var(--dialog-icon-color--info);--dialog-icon-background:var(--dialog-icon-background--info)}.eufemia-scope--10_77_0 .dnb-dialog__icon~.dnb-dialog__header{margin-top:1.5rem}@supports (-webkit-touch-callout:none){@media (max-height:40em){.eufemia-scope--10_77_0 .dnb-dialog .dnb-scroll-view{max-height:82vh}}}

package/components/dialog/style/themes/dnb-dialog-theme-sbanken--isolated.css

@@ -0,0 +1,26 @@
+/*
+* Drawer theme
+*
+*/
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_0 .dnb-dialog {
+  --dialog-background: var(--sb-color-white);
+  --dialog-icon-positioning: -0.5rem;
+  --dialog-radius: 0.25rem;
+  --dialog-icon-color--info: var(--sb-color-violet);
+  --dialog-icon-color--warning: var(--sb-color-red);
+  --dialog-icon-background--info: var(--sb-color-green-light-2);
+  --dialog-icon-background--warning: var(--sb-color-magenta-light-2);
+}
+.eufemia-scope--10_77_0 .dnb-dialog__icon {
+  margin-top: calc(var(--dialog-icon-positioning) * -1);
+  margin-bottom: calc(var(--dialog-icon-positioning) * -1);
+}
+@media screen and (max-width: 60em) and (min-width: 40.00625em) {
+  .eufemia-scope--10_77_0 .dnb-dialog__title {
+    font-size: var(--sb-font-size-medium--plus) !important;
+    line-height: var(--line-height-medium) !important;
+  }
+}

package/components/dialog/style/themes/dnb-dialog-theme-sbanken--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_0 .dnb-dialog{--dialog-background:var(--sb-color-white);--dialog-icon-positioning:-0.5rem;--dialog-radius:0.25rem;--dialog-icon-color--info:var(--sb-color-violet);--dialog-icon-color--warning:var(--sb-color-red);--dialog-icon-background--info:var(--sb-color-green-light-2);--dialog-icon-background--warning:var(--sb-color-magenta-light-2)}.eufemia-scope--10_77_0 .dnb-dialog__icon{margin-bottom:calc(var(--dialog-icon-positioning)*-1);margin-top:calc(var(--dialog-icon-positioning)*-1)}@media screen and (max-width:60em) and (min-width:40.00625em){.eufemia-scope--10_77_0 .dnb-dialog__title{font-size:var(--sb-font-size-medium--plus)!important;line-height:var(--line-height-medium)!important}}

package/components/dialog/style/themes/dnb-dialog-theme-ui--isolated.css

@@ -0,0 +1,15 @@
+/*
+* Drawer theme
+*
+*/
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_0 .dnb-dialog {
+  --dialog-background: var(--color-white);
+  --dialog-icon-positioning: -50%;
+  --dialog-icon-color--info: var(--color-emerald-green);
+  --dialog-icon-color--warning: var(--color-fire-red);
+  --dialog-icon-background--info: var(--color-pistachio);
+  --dialog-icon-background--warning: var(--color-fire-red-8);
+}

package/components/dialog/style/themes/dnb-dialog-theme-ui--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_0 .dnb-dialog{--dialog-background:var(--color-white);--dialog-icon-positioning:-50%;--dialog-icon-color--info:var(--color-emerald-green);--dialog-icon-color--warning:var(--color-fire-red);--dialog-icon-background--info:var(--color-pistachio);--dialog-icon-background--warning:var(--color-fire-red-8)}