@deriv-web-design/ui 0.1.23 → 0.1.25

package/dist/index.css

@@ -11983,10 +11983,11 @@
   --dch-doc-background: var(--background-surface);
   --dch-doc-radius: var(--radius-2xl);
   --dch-doc-padding-block: var(--spacing-16);
-  --dch-doc-padding-inline: var(--spacing-16);
+  --dch-doc-padding-inline-start: var(--spacing-16);
+  --dch-doc-padding-inline-end: var(--spacing-16);
   --dch-doc-gap: var(--spacing-8);
   --dch-doc-icon-gap: var(--spacing-8);
-  --dch-doc-icon-size: var(--spacing-24);
+  --dch-doc-icon-size: var(--spacing-48);
   --dch-doc-action-indent: var(--spacing-56);
   --dch-focus-ring-color: var(--border-focus);
   --dch-title-tracking: -0.02rem;
@@ -12049,6 +12050,9 @@
   display: flex;
   min-width: 0;
 }
+.dch__doc-item:only-child {
+  grid-column: 1 / -1;
+}
 .dch__doc {
   display: flex;
   flex-direction: column;
@@ -12058,7 +12062,8 @@
   width: 100%;
   min-width: 0;
   box-sizing: border-box;
-  padding: var(--dch-doc-padding-block) var(--dch-doc-padding-inline);
+  padding-block: var(--dch-doc-padding-block);
+  padding-inline: var(--dch-doc-padding-inline-start) var(--dch-doc-padding-inline-end);
   border-radius: var(--dch-doc-radius);
   background-color: var(--dch-doc-background);
   color: var(--dch-text-color);
@@ -12098,12 +12103,15 @@
 .dch__doc-action {
   display: flex;
   flex-shrink: 0;
+  align-items: center;
+  min-height: var(--typography-body-md-line-height);
   padding-inline-start: var(--dch-doc-action-indent);
 }
 @media (min-width: 768px) {
   :root {
     --dch-padding-inline: var(--spacing-24);
-    --dch-doc-padding-inline: var(--spacing-24);
+    --dch-doc-padding-inline-start: var(--spacing-24);
+    --dch-doc-padding-inline-end: 1.75rem;
     --dch-doc-radius: var(--radius-full);
     --dch-doc-action-indent: var(--spacing-0);
   }
@@ -12123,128 +12131,128 @@
 
 /* components/LinkModal/LinkModal.css */
 :root {
-  --lm-scrim-color: var(--overlay-strong);
-  --lm-scrim-blur: 4px;
-  --lm-z-index: 9999;
-  --lm-panel-background: var(--background-surface);
-  --lm-panel-radius: var(--radius-xl);
-  --lm-panel-shadow: var(--elevation-modal);
-  --lm-panel-max-width: var(--content-width-846);
-  --lm-panel-padding-block: var(--spacing-40);
-  --lm-panel-padding-inline: var(--spacing-24);
-  --lm-panel-gap: var(--spacing-24);
-  --lm-panel-margin: var(--spacing-16);
-  --lm-title-color: var(--text-primary);
-  --lm-close-inset: var(--spacing-8);
-  --lm-close-size: var(--spacing-48);
-  --lm-close-glyph-size: var(--spacing-24);
-  --lm-close-icon-color: var(--icon-primary);
-  --lm-close-hover-background: var(--color-opacity-slate-8);
-  --lm-close-active-background: var(--color-opacity-slate-16);
-  --lm-focus-ring-color: var(--border-focus);
-}
-.lm {
+  --lkm-scrim-color: rgb(0 0 0 / 72%);
+  --lkm-scrim-blur: 4px;
+  --lkm-z-index: 9999;
+  --lkm-panel-background: var(--background-surface);
+  --lkm-panel-radius: var(--radius-xl);
+  --lkm-panel-shadow: var(--elevation-modal);
+  --lkm-panel-max-width: var(--content-width-846);
+  --lkm-panel-padding-block: var(--spacing-40);
+  --lkm-panel-padding-inline: var(--spacing-24);
+  --lkm-panel-gap: var(--spacing-24);
+  --lkm-panel-margin: var(--spacing-16);
+  --lkm-title-color: var(--text-primary);
+  --lkm-close-inset: var(--spacing-8);
+  --lkm-close-size: var(--spacing-48);
+  --lkm-close-glyph-size: var(--spacing-24);
+  --lkm-close-icon-color: var(--icon-primary);
+  --lkm-close-hover-background: var(--color-opacity-slate-8);
+  --lkm-close-active-background: var(--color-opacity-slate-16);
+  --lkm-focus-ring-color: var(--border-focus);
+}
+.lkm {
   position: fixed;
   inset: 0;
-  z-index: var(--lm-z-index);
+  z-index: var(--lkm-z-index);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--lm-panel-margin);
+  padding: var(--lkm-panel-margin);
   box-sizing: border-box;
   overflow-y: auto;
 }
-.lm__scrim {
+.lkm__scrim {
   position: fixed;
   inset: 0;
-  background-color: var(--lm-scrim-color);
-  -webkit-backdrop-filter: blur(var(--lm-scrim-blur));
-  backdrop-filter: blur(var(--lm-scrim-blur));
+  background-color: var(--lkm-scrim-color);
+  -webkit-backdrop-filter: blur(var(--lkm-scrim-blur));
+  backdrop-filter: blur(var(--lkm-scrim-blur));
 }
-.lm__panel {
+.lkm__panel {
   position: relative;
   z-index: 1;
   box-sizing: border-box;
   width: 100%;
-  max-width: var(--lm-panel-max-width);
-  max-height: calc(100dvh - (var(--lm-panel-margin) * 2));
+  max-width: var(--lkm-panel-max-width);
+  max-height: calc(100dvh - (var(--lkm-panel-margin) * 2));
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--lm-panel-gap);
-  padding: var(--lm-panel-padding-block) var(--lm-panel-padding-inline);
-  border-radius: var(--lm-panel-radius);
-  background-color: var(--lm-panel-background);
-  box-shadow: var(--lm-panel-shadow);
+  gap: var(--lkm-panel-gap);
+  padding: var(--lkm-panel-padding-block) var(--lkm-panel-padding-inline);
+  border-radius: var(--lkm-panel-radius);
+  background-color: var(--lkm-panel-background);
+  box-shadow: var(--lkm-panel-shadow);
   outline: none;
 }
-.lm__panel:focus-visible {
-  outline: 2px solid var(--lm-focus-ring-color);
+.lkm__panel:focus-visible {
+  outline: 2px solid var(--lkm-focus-ring-color);
   outline-offset: 2px;
 }
-.lm__close {
+.lkm__close {
   position: absolute;
-  top: var(--lm-close-inset);
-  right: var(--lm-close-inset);
+  top: var(--lkm-close-inset);
+  right: var(--lkm-close-inset);
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--lm-close-size);
-  height: var(--lm-close-size);
+  width: var(--lkm-close-size);
+  height: var(--lkm-close-size);
   box-sizing: border-box;
   padding: 0;
   border: none;
   border-radius: var(--radius-full);
   background: none;
-  color: var(--lm-close-icon-color);
+  color: var(--lkm-close-icon-color);
   cursor: pointer;
   outline: none;
   transition: background-color 100ms ease;
 }
-.lm__close:hover {
-  background-color: var(--lm-close-hover-background);
+.lkm__close:hover {
+  background-color: var(--lkm-close-hover-background);
 }
-.lm__close:active {
-  background-color: var(--lm-close-active-background);
+.lkm__close:active {
+  background-color: var(--lkm-close-active-background);
 }
-.lm__close:focus-visible {
-  outline: 2px solid var(--lm-focus-ring-color);
+.lkm__close:focus-visible {
+  outline: 2px solid var(--lkm-focus-ring-color);
   outline-offset: 2px;
 }
-.lm__close svg {
-  width: var(--lm-close-glyph-size);
-  height: var(--lm-close-glyph-size);
+.lkm__close svg {
+  width: var(--lkm-close-glyph-size);
+  height: var(--lkm-close-glyph-size);
 }
-.lm__title {
+.lkm__title {
   margin: 0;
-  padding-inline: var(--lm-close-size);
+  padding-inline: var(--lkm-close-size);
   font-family: var(--typography-h5-font-family);
   font-size: var(--typography-h5-font-size);
   font-weight: var(--typography-h5-font-weight);
   line-height: var(--typography-h5-line-height);
   letter-spacing: var(--typography-h5-letter-spacing);
-  color: var(--lm-title-color);
+  color: var(--lkm-title-color);
   text-align: center;
 }
-.lm__body {
+.lkm__body {
   width: 100%;
   min-height: 0;
   overflow-y: auto;
 }
 @media (min-width: 768px) {
   :root {
-    --lm-panel-padding-inline: var(--spacing-32);
+    --lkm-panel-padding-inline: var(--spacing-32);
   }
 }
 @media (min-width: 992px) {
   :root {
-    --lm-panel-padding-block: var(--spacing-80);
-    --lm-panel-padding-inline: var(--spacing-96);
-    --lm-panel-gap: var(--spacing-40);
+    --lkm-panel-padding-block: var(--spacing-80);
+    --lkm-panel-padding-inline: var(--spacing-96);
+    --lkm-panel-gap: var(--spacing-40);
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .lm__close {
+  .lkm__close {
     transition: none;
   }
 }