@dnb/eufemia 9.22.0 → 9.23.0-beta.1

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

@@ -0,0 +1,429 @@
+/*
+* DNB Drawer
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+.dnb-dialog {
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-weight: var(--font-weight-basis);
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: #333;
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-dialog *,
+  .dnb-dialog ::before,
+  .dnb-dialog ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-dialog ::before,
+  .dnb-dialog ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+ * Dialog component
+ *
+ */
+/*
+ * Modal component
+ *
+ */
+@-webkit-keyframes show-modal {
+  from {
+    opacity: 0.1;
+    -webkit-transform: translate3d(0, -1rem, 0);
+            transform: translate3d(0, -1rem, 0); }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+@keyframes show-modal {
+  from {
+    opacity: 0.1;
+    -webkit-transform: translate3d(0, -1rem, 0);
+            transform: translate3d(0, -1rem, 0); }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+@-webkit-keyframes hide-modal {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(0, 1rem, 0);
+            transform: translate3d(0, 1rem, 0);
+    opacity: 0; } }
+
+@keyframes hide-modal {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(0, 1rem, 0);
+            transform: translate3d(0, 1rem, 0);
+    opacity: 0; } }
+
+@-webkit-keyframes show-drawer {
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+@keyframes show-drawer {
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+@-webkit-keyframes hide-drawer-left {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(-20rem, 0, 0);
+            transform: translate3d(-20rem, 0, 0);
+    opacity: 0; } }
+
+@keyframes hide-drawer-left {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(-20rem, 0, 0);
+            transform: translate3d(-20rem, 0, 0);
+    opacity: 0; } }
+
+@-webkit-keyframes hide-drawer-top {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(0, -20rem, 0);
+            transform: translate3d(0, -20rem, 0);
+    opacity: 0; } }
+
+@keyframes hide-drawer-top {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(0, -20rem, 0);
+            transform: translate3d(0, -20rem, 0);
+    opacity: 0; } }
+
+@-webkit-keyframes hide-drawer-bottom {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(0, 20rem, 0);
+            transform: translate3d(0, 20rem, 0);
+    opacity: 0; } }
+
+@keyframes hide-drawer-bottom {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(0, 20rem, 0);
+            transform: translate3d(0, 20rem, 0);
+    opacity: 0; } }
+
+@-webkit-keyframes hide-drawer-right {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(20rem, 0, 0);
+            transform: translate3d(20rem, 0, 0);
+    opacity: 0; } }
+
+@keyframes hide-drawer-right {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(20rem, 0, 0);
+            transform: translate3d(20rem, 0, 0);
+    opacity: 0; } }
+
+@-webkit-keyframes show-modal-overlay {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); } }
+
+@keyframes show-modal-overlay {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); } }
+
+@-webkit-keyframes hide-modal-overlay {
+  from {
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); }
+  to {
+    opacity: 0; } }
+
+@keyframes hide-modal-overlay {
+  from {
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); }
+  to {
+    opacity: 0; } }
+
+:root {
+  --dialog-min-width: 320px;
+  --dialog-avg-width: 60vw;
+  --dialog-max-width: 60rem;
+  --dialog-spacing: 2rem;
+  --dialog-spacing-minus: -2rem; }
+
+.dnb-dialog {
+  position: relative;
+  width: 60vw;
+  width: var(--dialog-avg-width);
+  min-width: 320px;
+  min-width: var(--dialog-min-width);
+  max-width: 60rem;
+  max-width: var(--dialog-max-width);
+  max-height: 100vh;
+  -webkit-box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
+          box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
+  -webkit-box-shadow: var(--shadow-default);
+          box-shadow: var(--shadow-default);
+  border-radius: 0.5rem;
+  -moz-user-select: text;
+   -ms-user-select: text;
+       user-select: text;
+  -webkit-user-select: text;
+  border: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+  @media screen and (max-width: 40em) {
+    .dnb-dialog--auto-fullscreen {
+      width: 100%;
+      height: 100vh;
+      max-width: 100%;
+      border-radius: 0;
+      -webkit-box-shadow: none;
+              box-shadow: none; } }
+  .dnb-dialog--fullscreen {
+    width: 100%;
+    height: 100vh;
+    max-width: 100%;
+    border-radius: 0;
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+  @supports (-webkit-touch-callout: none) {
+    @media (max-height: 40em) and (orientation: landscape) {
+      .dnb-dialog:not(.dnb-dialog--fullscreen) {
+        max-height: 80vh; } } }
+  .dnb-dialog__inner {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden; }
+    .dnb-dialog__inner::after {
+      content: '';
+      position: absolute;
+      z-index: -4;
+      left: 0;
+      top: 0;
+      width: 100vw;
+      height: 100%; }
+  .dnb-dialog--spacing .dnb-dialog__inner {
+    padding: 0 2rem 0;
+    padding: 0 var(--dialog-spacing) 0; }
+    @media screen and (min-width: 72em) {
+      .dnb-dialog--spacing .dnb-dialog__inner {
+        padding: 0 3.5rem 0;
+        padding: 0 calc(2rem * 1.75) 0;
+        padding: 0 calc(var(--dialog-spacing)*1.75) 0;
+        padding: 0 calc(var(--dialog-spacing) * 1.75) 0; } }
+    @media screen and (max-width: 50em) {
+      .dnb-dialog--spacing .dnb-dialog__inner {
+        padding: 0 1.5rem 0;
+        padding: 0 calc(2rem / 1.333333) 0;
+        padding: 0 calc(var(--dialog-spacing)/1.33333) 0;
+        padding: 0 calc(var(--dialog-spacing) / 1.333333) 0; } }
+    @media screen and (max-width: 40em) {
+      .dnb-dialog--spacing .dnb-dialog__inner {
+        padding: 0 1rem 0;
+        padding: 0 calc(2rem / 2) 0;
+        padding: 0 calc(var(--dialog-spacing)/2) 0;
+        padding: 0 calc(var(--dialog-spacing) / 2) 0; } }
+  .dnb-dialog__align--centered .dnb-dialog__inner {
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center; }
+  html:not([data-visual-test]) .dnb-dialog {
+    -webkit-animation: show-modal 300ms ease-out forwards;
+            animation: show-modal 300ms ease-out forwards;
+    -webkit-animation: show-modal var(--modal-animation-duration) ease-out forwards;
+            animation: show-modal var(--modal-animation-duration) ease-out forwards; }
+  html:not([data-visual-test]) .dnb-dialog--hide {
+    -webkit-animation: hide-modal 220ms ease-in-out forwards;
+            animation: hide-modal 220ms ease-in-out forwards; }
+  .dnb-dialog--no-animation {
+    -webkit-animation-duration: 0ms !important;
+            animation-duration: 0ms !important; }
+  @media screen and (max-width: 40em) {
+    .dnb-dialog--no-animation-on-mobile {
+      -webkit-animation-delay: 0ms !important;
+              animation-delay: 0ms !important;
+      -webkit-animation-duration: 0ms !important;
+              animation-duration: 0ms !important; } }
+  .dnb-dialog__content {
+    position: relative;
+    z-index: 1; }
+  .dnb-dialog--spacing .dnb-dialog__content {
+    padding-bottom: 4rem;
+    padding-bottom: calc(2rem * 2);
+    padding-bottom: calc(var(--dialog-spacing)*2);
+    padding-bottom: calc(var(--dialog-spacing) * 2); }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-dialog--spacing .dnb-dialog__content {
+        padding-bottom: 16rem;
+        padding-bottom: calc(2rem * 8);
+        padding-bottom: calc(var(--dialog-spacing)*8);
+        padding-bottom: calc(var(--dialog-spacing) * 8); } }
+  .dnb-dialog__align--center .dnb-dialog__content {
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    text-align: center; }
+  .dnb-dialog__align--right .dnb-dialog__content {
+    -webkit-box-align: end;
+        -ms-flex-align: end;
+            align-items: flex-end;
+    text-align: right; }
+  .dnb-dialog__title ~ .dnb-dialog__content {
+    padding-top: 1rem;
+    padding-top: calc(2rem / 2);
+    padding-top: calc(var(--dialog-spacing)/2);
+    padding-top: calc(var(--dialog-spacing) / 2); }
+  .dnb-dialog .dnb-dialog__header [class*='dnb-h--'],
+  .dnb-dialog .dnb-dialog__header .dnb-modal__title {
+    padding: 0; }
+    .dnb-dialog .dnb-dialog__header [class*='dnb-h--']:not([class*='__top']),
+    .dnb-dialog .dnb-dialog__header .dnb-modal__title:not([class*='__top']) {
+      margin-top: 0; }
+    .dnb-dialog .dnb-dialog__header [class*='dnb-h--']:not([class*='__bottom']),
+    .dnb-dialog .dnb-dialog__header .dnb-modal__title:not([class*='__bottom']) {
+      margin-bottom: 0; }
+  .dnb-dialog .dnb-dialog__header::after {
+    top: -500%;
+    height: 600%; }
+  .dnb-dialog--spacing .dnb-dialog__header .dnb-tabs {
+    margin-top: 3.5rem; }
+  .dnb-dialog__body {
+    padding-bottom: 4rem;
+    padding-bottom: calc(2rem * 2);
+    padding-bottom: calc(var(--dialog-spacing)*2);
+    padding-bottom: calc(var(--dialog-spacing) * 2);
+    margin-bottom: -4rem;
+    margin-bottom: calc(-2rem * 2);
+    margin-bottom: calc(var(--dialog-spacing-minus)*2);
+    margin-bottom: calc(var(--dialog-spacing-minus) * 2); }
+  .dnb-dialog__navigation.dnb-section {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between; }
+  .dnb-dialog--spacing .dnb-dialog__navigation.dnb-section {
+    margin-top: 3.5rem;
+    margin-top: calc(2rem * 1.75);
+    margin-top: calc(var(--dialog-spacing)*1.75);
+    margin-top: calc(var(--dialog-spacing) * 1.75);
+    margin-bottom: 1rem;
+    margin-bottom: calc(2rem / 2);
+    margin-bottom: calc(var(--dialog-spacing)/2);
+    margin-bottom: calc(var(--dialog-spacing) / 2); }
+    @media screen and (max-width: 50em) {
+      .dnb-dialog--spacing .dnb-dialog__navigation.dnb-section {
+        margin-top: 1rem;
+        margin-top: calc(2rem / 2);
+        margin-top: calc(var(--dialog-spacing)/2);
+        margin-top: calc(var(--dialog-spacing) / 2); } }
+
+[data-visual-test].hide-page-content #___gatsby {
+  opacity: 0; }

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

@@ -0,0 +1 @@
+.dnb-dialog{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-dialog *,.dnb-dialog :after,.dnb-dialog :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-dialog :after,.dnb-dialog :before{text-decoration:inherit;vertical-align:inherit}@-webkit-keyframes show-modal{0%{opacity:.1;-webkit-transform:translate3d(0,-1rem,0);transform:translate3d(0,-1rem,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes show-modal{0%{opacity:.1;-webkit-transform:translate3d(0,-1rem,0);transform:translate3d(0,-1rem,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@-webkit-keyframes hide-modal{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(0,1rem,0);transform:translate3d(0,1rem,0)}}@keyframes hide-modal{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(0,1rem,0);transform:translate3d(0,1rem,0)}}@-webkit-keyframes show-drawer{to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes show-drawer{to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@-webkit-keyframes hide-drawer-left{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-20rem,0,0);transform:translate3d(-20rem,0,0)}}@keyframes hide-drawer-left{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-20rem,0,0);transform:translate3d(-20rem,0,0)}}@-webkit-keyframes hide-drawer-top{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(0,-20rem,0);transform:translate3d(0,-20rem,0)}}@keyframes hide-drawer-top{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(0,-20rem,0);transform:translate3d(0,-20rem,0)}}@-webkit-keyframes hide-drawer-bottom{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(0,20rem,0);transform:translate3d(0,20rem,0)}}@keyframes hide-drawer-bottom{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(0,20rem,0);transform:translate3d(0,20rem,0)}}@-webkit-keyframes hide-drawer-right{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(20rem,0,0);transform:translate3d(20rem,0,0)}}@keyframes hide-drawer-right{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(20rem,0,0);transform:translate3d(20rem,0,0)}}@-webkit-keyframes show-modal-overlay{0%{opacity:0}to{opacity:.32;opacity:var(--modal-overlay-opacity)}}@keyframes show-modal-overlay{0%{opacity:0}to{opacity:.32;opacity:var(--modal-overlay-opacity)}}@-webkit-keyframes hide-modal-overlay{0%{opacity:.32;opacity:var(--modal-overlay-opacity)}to{opacity:0}}@keyframes hide-modal-overlay{0%{opacity:.32;opacity:var(--modal-overlay-opacity)}to{opacity:0}}:root{--dialog-min-width:320px;--dialog-avg-width:60vw;--dialog-max-width:60rem;--dialog-spacing:2rem;--dialog-spacing-minus:-2rem}.dnb-dialog{-webkit-tap-highlight-color:rgba(0,0,0,0);border:none;border-radius:.5rem;-webkit-box-shadow:0 8px 16px rgba(51,51,51,.08);box-shadow:0 8px 16px rgba(51,51,51,.08);-webkit-box-shadow:var(--shadow-default);box-shadow:var(--shadow-default);max-height:100vh;max-width:60rem;max-width:var(--dialog-max-width);min-width:320px;min-width:var(--dialog-min-width);position:relative;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-user-select:text;width:60vw;width:var(--dialog-avg-width)}@media screen and (max-width:40em){.dnb-dialog--auto-fullscreen{border-radius:0;-webkit-box-shadow:none;box-shadow:none;height:100vh;max-width:100%;width:100%}}.dnb-dialog--fullscreen{border-radius:0;-webkit-box-shadow:none;box-shadow:none;height:100vh;max-width:100%;width:100%}@supports (-webkit-touch-callout:none){@media (max-height:40em) and (orientation:landscape){.dnb-dialog:not(.dnb-dialog--fullscreen){max-height:80vh}}}.dnb-dialog__inner{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;overflow-x:hidden;position:relative;width:100%}.dnb-dialog__inner:after{content:"";height:100%;left:0;position:absolute;top:0;width:100vw;z-index:-4}.dnb-dialog--spacing .dnb-dialog__inner{padding:0 2rem;padding:0 var(--dialog-spacing) 0}@media screen and (min-width:72em){.dnb-dialog--spacing .dnb-dialog__inner{padding:0 3.5rem;padding:0 calc(var(--dialog-spacing)*1.75) 0}}@media screen and (max-width:50em){.dnb-dialog--spacing .dnb-dialog__inner{padding:0 1.5rem;padding:0 calc(var(--dialog-spacing)/1.33333) 0}}@media screen and (max-width:40em){.dnb-dialog--spacing .dnb-dialog__inner{padding:0 1rem;padding:0 calc(var(--dialog-spacing)/2) 0}}.dnb-dialog__align--centered .dnb-dialog__inner{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;justify-content:center}html:not([data-visual-test]) .dnb-dialog{-webkit-animation:show-modal .3s ease-out forwards;animation:show-modal .3s ease-out forwards;-webkit-animation:show-modal var(--modal-animation-duration) ease-out forwards;animation:show-modal var(--modal-animation-duration) ease-out forwards}html:not([data-visual-test]) .dnb-dialog--hide{-webkit-animation:hide-modal .22s ease-in-out forwards;animation:hide-modal .22s ease-in-out forwards}.dnb-dialog--no-animation{-webkit-animation-duration:0ms!important;animation-duration:0ms!important}@media screen and (max-width:40em){.dnb-dialog--no-animation-on-mobile{-webkit-animation-delay:0ms!important;animation-delay:0ms!important;-webkit-animation-duration:0ms!important;animation-duration:0ms!important}}.dnb-dialog__content{position:relative;z-index:1}.dnb-dialog--spacing .dnb-dialog__content{padding-bottom:4rem;padding-bottom:calc(var(--dialog-spacing)*2)}@supports (-webkit-touch-callout:none){.dnb-dialog--spacing .dnb-dialog__content{padding-bottom:16rem;padding-bottom:calc(var(--dialog-spacing)*8)}}.dnb-dialog__align--center .dnb-dialog__content{-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center}.dnb-dialog__align--right .dnb-dialog__content{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;text-align:right}.dnb-dialog__title~.dnb-dialog__content{padding-top:1rem;padding-top:calc(var(--dialog-spacing)/2)}.dnb-dialog .dnb-dialog__header .dnb-modal__title,.dnb-dialog .dnb-dialog__header [class*=dnb-h--]{padding:0}.dnb-dialog .dnb-dialog__header .dnb-modal__title:not([class*=__top]),.dnb-dialog .dnb-dialog__header [class*=dnb-h--]:not([class*=__top]){margin-top:0}.dnb-dialog .dnb-dialog__header .dnb-modal__title:not([class*=__bottom]),.dnb-dialog .dnb-dialog__header [class*=dnb-h--]:not([class*=__bottom]){margin-bottom:0}.dnb-dialog .dnb-dialog__header:after{height:600%;top:-500%}.dnb-dialog--spacing .dnb-dialog__header .dnb-tabs{margin-top:3.5rem}.dnb-dialog__body{margin-bottom:-4rem;margin-bottom:calc(var(--dialog-spacing-minus)*2);padding-bottom:4rem;padding-bottom:calc(var(--dialog-spacing)*2)}.dnb-dialog__navigation.dnb-section{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-pack:justify;-ms-flex-pack:justify;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;justify-content:space-between}.dnb-dialog--spacing .dnb-dialog__navigation.dnb-section{margin-bottom:1rem;margin-bottom:calc(var(--dialog-spacing)/2);margin-top:3.5rem;margin-top:calc(var(--dialog-spacing)*1.75)}@media screen and (max-width:50em){.dnb-dialog--spacing .dnb-dialog__navigation.dnb-section{margin-top:1rem;margin-top:calc(var(--dialog-spacing)/2)}}[data-visual-test].hide-page-content #___gatsby{opacity:0}

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

@@ -0,0 +1,15 @@
+/*
+* DNB Drawer
+*
+*/
+
+@import '../../../style/components/imports.scss';
+
+// import dependencies
+// @import '../../modal/style/dnb-modal.scss';
+
+.dnb-dialog {
+  @include componentReset();
+}
+
+@import './_dialog.scss';

package/cjs/components/dialog/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/components/dialog/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./dnb-dialog.min.css");

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

@@ -0,0 +1,17 @@
+/*
+* Drawer theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-dialog {
+  background: #fff;
+  background: var(--color-white); }
+  .dnb-dialog__root::after {
+    background-color: var(--modal-background-color); }

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

@@ -0,0 +1 @@
+.dnb-dialog{background:#fff;background:var(--color-white)}.dnb-dialog__root:after{background-color:var(--modal-background-color)}

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

@@ -0,0 +1,17 @@
+/*
+* Drawer theme
+*
+*/
+
+@import '../../../../style/themes/imports.scss';
+
+.dnb-dialog {
+  background: var(--color-white);
+
+  &__root {
+    // Used by "setBackgroundColor"
+    &::after {
+      background-color: var(--modal-background-color);
+    }
+  }
+}

package/cjs/components/dialog/style/themes/ui.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/components/dialog/style/themes/ui.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./dnb-drawer-theme-ui.min.css");

package/cjs/components/dialog/style.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/components/dialog/style.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./style/dnb-drawer.min.css");

package/cjs/components/dialog/types.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+import { ToCamelCasePartial } from '../../shared/helpers/withCamelCaseProps';
+import { ScrollViewProps } from '../../fragments/ScrollView';
+import { ModalPropTypes } from '../modal/Modal';
+export interface DialogProps extends ToCamelCasePartial<ModalPropTypes> {
+    /**
+     * The dialog title. Displays on the very top of the content.
+     */
+    title?: React.ReactNode;
+}
+export interface DialogContentProps extends ScrollViewProps {
+    /**
+     * The minimum Dialog content width, defined by a CSS width value like `50vw` (50% of the viewport). Be careful on using fixed `minWidth` so you don't break responsiveness. Defaults to `30rem` (average width is set to `60vw`).
+     */
+    minWidth?: string | number;
+    /**
+     * The maximum Dialog content width, defined by a CSS width value like `20rem`. Defaults to `60rem` (average width is set to `60vw`).
+     */
+    maxWidth?: string | number;
+    /**
+     * Give the Dialog content a class name (maps to `dnb-dialog`).
+     */
+    className?: string;
+    /**
+     * If set to `false` then the dialog content will be shown without any spacing. Defaults to `true`.
+     */
+    spacing?: string | boolean;
+    /**
+     * By default the dialog content gets added the core style class `dnb-core-style`. Use `false` to disable this behavior.
+     */
+    preventCoreStyle?: string | boolean;
+    /**
+     * The content which will appear in the navigation, above the header, and side-by-side the close button.
+     */
+    navContent?: React.ReactNode | ((...args: any[]) => any);
+    /**
+     * The content which will appear in the header of the dialog.
+     */
+    headerContent?: React.ReactNode | ((...args: any[]) => any);
+    /**
+     * The content which will appear when triggering the dialog.
+     */
+    modalContent?: React.ReactNode | ((...args: any[]) => any);
+    /**
+     * Define the inner horizontal alignment of the content. Can be set to `left`, `center`, `right` and `centered`. If `centered`, then the content will also be centered vertically. Defaults to `left`.
+     */
+    alignContent?: 'left' | 'right' | 'centered' | 'center';
+    /**
+     * If set to `true` then the dialog content will be shown as fullscreen, without showing the original content behind. Can be set to `false` to omit the auto fullscreen. Defaults to `auto`.
+     */
+    fullscreen?: string | boolean;
+    /**
+     * If set to `true`, no open/close animation will be shown. Defaults to false.
+     */
+    noAnimation?: string | boolean;
+    /**
+     * Same as `noAnimation`, but gets triggered only if the viewport width is less than `40em`. Defaults to false.
+     */
+    noAnimationOnMobile?: string | boolean;
+}

package/cjs/components/dialog/types.js

@@ -0,0 +1 @@
+"use strict";

package/cjs/components/drawer/Drawer.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import DrawerBody from './parts/DrawerBody';
+import DrawerHeader from './parts/DrawerHeader';
+import DrawerNavigation from './parts/DrawerNavigation';
+import { DrawerProps, DrawerContentProps } from './types';
+declare function Drawer({ id, rootId, contentId, focusSelector, labelledBy, directDomReturn, hideCloseButton, closeButtonAttributes, disabled, title, dialogTitle, closeTitle, containerPlacement, spacing, noAnimation, noAnimationOnMobile, animationDuration, fullscreen, onOpen, onClose, onClosePrevent, openModal, closeModal, preventClose, openState, openDelay, trigger, triggerAttributes, overlayClass, contentClass, top, bottom, left, right, space, ...props }: DrawerProps & DrawerContentProps): JSX.Element;
+declare namespace Drawer {
+    var Body: typeof DrawerBody;
+    var Header: typeof DrawerHeader;
+    var Navigation: typeof DrawerNavigation;
+}
+export default Drawer;