@dialpad/dialtone 9.64.1 → 9.65.1

package/dist/css/dialtone-default-theme.css

@@ -397,106 +397,190 @@ template {
   align-items: center;
   justify-content: normal;
 }
+.d-stack--gap-100 {
+  --stack-gap: var(--dt-space-100);
+}
+.d-stack--gap-200 {
+  --stack-gap: var(--dt-space-200);
+}
+.d-stack--gap-300 {
+  --stack-gap: var(--dt-space-300);
+}
+.d-stack--gap-400 {
+  --stack-gap: var(--dt-space-400);
+}
+.d-stack--gap-450 {
+  --stack-gap: var(--dt-space-450);
+}
+.d-stack--gap-500 {
+  --stack-gap: var(--dt-space-500);
+}
+.d-stack--gap-600 {
+  --stack-gap: var(--dt-space-600);
+}
 @media screen and (max-width: 1264px) {
-  .d-stack--xl--column {
+  .d-stack--xl-column {
     --stack-direction: column;
     justify-content: flex-start;
   }
-  .d-stack--xl--column-reverse {
+  .d-stack--xl-column-reverse {
     --stack-direction: column-reverse;
     justify-content: flex-start;
   }
-  .d-stack--xl--row {
+  .d-stack--xl-row {
     --stack-direction: row;
     align-items: center;
     justify-content: normal;
   }
-  .d-stack--xl--row-reverse {
+  .d-stack--xl-row-reverse {
     --stack-direction: row-reverse;
     align-items: center;
     justify-content: normal;
   }
+  .d-stack--xl-gap-100 {
+    --stack-gap: var(--dt-space-100);
+  }
+  .d-stack--xl-gap-200 {
+    --stack-gap: var(--dt-space-200);
+  }
+  .d-stack--xl-gap-300 {
+    --stack-gap: var(--dt-space-300);
+  }
+  .d-stack--xl-gap-400 {
+    --stack-gap: var(--dt-space-400);
+  }
+  .d-stack--xl-gap-450 {
+    --stack-gap: var(--dt-space-450);
+  }
+  .d-stack--xl-gap-500 {
+    --stack-gap: var(--dt-space-500);
+  }
+  .d-stack--xl-gap-600 {
+    --stack-gap: var(--dt-space-600);
+  }
 }
 @media screen and (max-width: 980px) {
-  .d-stack--lg--column {
+  .d-stack--lg-column {
     --stack-direction: column;
     justify-content: flex-start;
   }
-  .d-stack--lg--column-reverse {
+  .d-stack--lg-column-reverse {
     --stack-direction: column-reverse;
     justify-content: flex-start;
   }
-  .d-stack--lg--row {
+  .d-stack--lg-row {
     --stack-direction: row;
     align-items: center;
     justify-content: normal;
   }
-  .d-stack--lg--row-reverse {
+  .d-stack--lg-row-reverse {
     --stack-direction: row-reverse;
     align-items: center;
     justify-content: normal;
   }
+  .d-stack--lg-gap-100 {
+    --stack-gap: var(--dt-space-100);
+  }
+  .d-stack--lg-gap-200 {
+    --stack-gap: var(--dt-space-200);
+  }
+  .d-stack--lg-gap-300 {
+    --stack-gap: var(--dt-space-300);
+  }
+  .d-stack--lg-gap-400 {
+    --stack-gap: var(--dt-space-400);
+  }
+  .d-stack--lg-gap-450 {
+    --stack-gap: var(--dt-space-450);
+  }
+  .d-stack--lg-gap-500 {
+    --stack-gap: var(--dt-space-500);
+  }
+  .d-stack--lg-gap-600 {
+    --stack-gap: var(--dt-space-600);
+  }
 }
 @media screen and (max-width: 640px) {
-  .d-stack--md--column {
+  .d-stack--md-column {
     --stack-direction: column;
     justify-content: flex-start;
   }
-  .d-stack--md--column-reverse {
+  .d-stack--md-column-reverse {
     --stack-direction: column-reverse;
     justify-content: flex-start;
   }
-  .d-stack--md--row {
+  .d-stack--md-row {
     --stack-direction: row;
     align-items: center;
     justify-content: normal;
   }
-  .d-stack--md--row-reverse {
+  .d-stack--md-row-reverse {
     --stack-direction: row-reverse;
     align-items: center;
     justify-content: normal;
   }
+  .d-stack--md-gap-100 {
+    --stack-gap: var(--dt-space-100);
+  }
+  .d-stack--md-gap-200 {
+    --stack-gap: var(--dt-space-200);
+  }
+  .d-stack--md-gap-300 {
+    --stack-gap: var(--dt-space-300);
+  }
+  .d-stack--md-gap-400 {
+    --stack-gap: var(--dt-space-400);
+  }
+  .d-stack--md-gap-450 {
+    --stack-gap: var(--dt-space-450);
+  }
+  .d-stack--md-gap-500 {
+    --stack-gap: var(--dt-space-500);
+  }
+  .d-stack--md-gap-600 {
+    --stack-gap: var(--dt-space-600);
+  }
 }
 @media screen and (max-width: 480px) {
-  .d-stack--sm--column {
+  .d-stack--sm-column {
     --stack-direction: column;
     justify-content: flex-start;
   }
-  .d-stack--sm--column-reverse {
+  .d-stack--sm-column-reverse {
     --stack-direction: column-reverse;
     justify-content: flex-start;
   }
-  .d-stack--sm--row {
+  .d-stack--sm-row {
     --stack-direction: row;
     align-items: center;
     justify-content: normal;
   }
-  .d-stack--sm--row-reverse {
+  .d-stack--sm-row-reverse {
     --stack-direction: row-reverse;
     align-items: center;
     justify-content: normal;
   }
-}
-.d-stack--gap-100 {
-  --stack-gap: var(--dt-space-100);
-}
-.d-stack--gap-200 {
-  --stack-gap: var(--dt-space-200);
-}
-.d-stack--gap-300 {
-  --stack-gap: var(--dt-space-300);
-}
-.d-stack--gap-400 {
-  --stack-gap: var(--dt-space-400);
-}
-.d-stack--gap-450 {
-  --stack-gap: var(--dt-space-450);
-}
-.d-stack--gap-500 {
-  --stack-gap: var(--dt-space-500);
-}
-.d-stack--gap-600 {
-  --stack-gap: var(--dt-space-600);
+  .d-stack--sm-gap-100 {
+    --stack-gap: var(--dt-space-100);
+  }
+  .d-stack--sm-gap-200 {
+    --stack-gap: var(--dt-space-200);
+  }
+  .d-stack--sm-gap-300 {
+    --stack-gap: var(--dt-space-300);
+  }
+  .d-stack--sm-gap-400 {
+    --stack-gap: var(--dt-space-400);
+  }
+  .d-stack--sm-gap-450 {
+    --stack-gap: var(--dt-space-450);
+  }
+  .d-stack--sm-gap-500 {
+    --stack-gap: var(--dt-space-500);
+  }
+  .d-stack--sm-gap-600 {
+    --stack-gap: var(--dt-space-600);
+  }
 }
 .dt-item-layout {
   display: flex;
@@ -1783,20 +1867,22 @@ template {
   background-color: var(--dt-color-neutral-transparent);
 }
 .d-emoji {
+  position: relative;
   display: inline-block;
   vertical-align: middle;
 }
+.d-emoji .d-icon {
+  position: absolute;
+  top: 50%;
+  display: block;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
 .d-emoji-text-wrapper .d-emoji {
-  position: relative;
   height: 1em;
-  vertical-align: middle;
 }
 .d-emoji-text-wrapper .d-emoji .d-icon {
-  position: absolute;
   top: calc(50% - 1px);
-  display: block;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
 }
 .d-emoji-picker {
   flex-direction: column;
@@ -7711,11 +7797,11 @@ body {
 
 :root {
   color-scheme: light;
-  --dt-font-size-100: 12px; /* small */
-  --dt-font-size-200: 15px; /* medium / base */
-  --dt-font-size-300: 19px; /* large */
-  --dt-font-size-400: 27px; /* extra large / xl */
-  --dt-font-size-500: 38px; /* extra large / xxl */
+  --dt-font-size-100: 1.2rem; /* small */
+  --dt-font-size-200: 1.5rem; /* medium / base */
+  --dt-font-size-300: 1.9rem; /* large */
+  --dt-font-size-400: 2.7rem; /* extra large / xl */
+  --dt-font-size-500: 3.8rem; /* extra large / xxl */
   --dt-font-family-body: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --dt-font-family-expressive: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --dt-font-family-mono: SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace;
@@ -20515,157 +20601,157 @@ body {
   --dt-typography-body-md-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Base default medium text style for main content. */
   --dt-typography-body-md-font-weight: 400; /* Base default medium text style for main content. */
   --dt-typography-body-md-line-height: 1.6; /* Base default medium text style for main content. */
-  --dt-typography-body-md-font-size: 15px; /* Base default medium text style for main content. */
+  --dt-typography-body-md-font-size: 1.5rem; /* Base default medium text style for main content. */
   --dt-typography-body-md-text-case: none; /* Base default medium text style for main content. */
   --dt-typography-body-md-compact-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* A tighter-spaced version of medium body style. */
   --dt-typography-body-md-compact-font-weight: 400; /* A tighter-spaced version of medium body style. */
   --dt-typography-body-md-compact-line-height: 1.4; /* A tighter-spaced version of medium body style. */
-  --dt-typography-body-md-compact-font-size: 15px; /* A tighter-spaced version of medium body style. */
+  --dt-typography-body-md-compact-font-size: 1.5rem; /* A tighter-spaced version of medium body style. */
   --dt-typography-body-md-compact-text-case: none; /* A tighter-spaced version of medium body style. */
   --dt-typography-body-sm-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Reduced small text style for less prominent or adjacent content. */
   --dt-typography-body-sm-font-weight: 400; /* Reduced small text style for less prominent or adjacent content. */
   --dt-typography-body-sm-line-height: 1.4; /* Reduced small text style for less prominent or adjacent content. */
-  --dt-typography-body-sm-font-size: 12px; /* Reduced small text style for less prominent or adjacent content. */
+  --dt-typography-body-sm-font-size: 1.2rem; /* Reduced small text style for less prominent or adjacent content. */
   --dt-typography-body-sm-text-case: none; /* Reduced small text style for less prominent or adjacent content. */
   --dt-typography-body-sm-compact-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* A tighter-spaced version of small body style. */
   --dt-typography-body-sm-compact-font-weight: 400; /* A tighter-spaced version of small body style. */
   --dt-typography-body-sm-compact-line-height: 1.2; /* A tighter-spaced version of small body style. */
-  --dt-typography-body-sm-compact-font-size: 12px; /* A tighter-spaced version of small body style. */
+  --dt-typography-body-sm-compact-font-size: 1.2rem; /* A tighter-spaced version of small body style. */
   --dt-typography-body-sm-compact-text-case: none; /* A tighter-spaced version of small body style. */
   --dt-typography-headline-eyebrow-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline. */
   --dt-typography-headline-eyebrow-font-weight: 400; /* Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline. */
   --dt-typography-headline-eyebrow-line-height: 1.4; /* Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline. */
-  --dt-typography-headline-eyebrow-font-size: 12px; /* Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline. */
+  --dt-typography-headline-eyebrow-font-size: 1.2rem; /* Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline. */
   --dt-typography-headline-eyebrow-text-case: uppercase; /* Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline. */
   --dt-typography-headline-sm-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Smaller text size for secondary information or subheadings. */
   --dt-typography-headline-sm-font-weight: 700; /* Smaller text size for secondary information or subheadings. */
   --dt-typography-headline-sm-line-height: 1.4; /* Smaller text size for secondary information or subheadings. */
-  --dt-typography-headline-sm-font-size: 12px; /* Smaller text size for secondary information or subheadings. */
+  --dt-typography-headline-sm-font-size: 1.2rem; /* Smaller text size for secondary information or subheadings. */
   --dt-typography-headline-sm-text-case: none; /* Smaller text size for secondary information or subheadings. */
   --dt-typography-headline-sm-compact-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* A tighter-spaced version of small headline style. */
   --dt-typography-headline-sm-compact-font-weight: 700; /* A tighter-spaced version of small headline style. */
   --dt-typography-headline-sm-compact-line-height: 1.2; /* A tighter-spaced version of small headline style. */
-  --dt-typography-headline-sm-compact-font-size: 12px; /* A tighter-spaced version of small headline style. */
+  --dt-typography-headline-sm-compact-font-size: 1.2rem; /* A tighter-spaced version of small headline style. */
   --dt-typography-headline-sm-compact-text-case: none; /* A tighter-spaced version of small headline style. */
   --dt-typography-headline-sm-soft-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* A softer font weight version of small headline style. */
   --dt-typography-headline-sm-soft-font-weight: 500; /* A softer font weight version of small headline style. */
   --dt-typography-headline-sm-soft-line-height: 1.4; /* A softer font weight version of small headline style. */
-  --dt-typography-headline-sm-soft-font-size: 12px; /* A softer font weight version of small headline style. */
+  --dt-typography-headline-sm-soft-font-size: 1.2rem; /* A softer font weight version of small headline style. */
   --dt-typography-headline-sm-soft-text-case: none; /* A softer font weight version of small headline style. */
   --dt-typography-headline-sm-soft-compact-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* A softer font weight, tighter-spaced version of small headline style. */
   --dt-typography-headline-sm-soft-compact-font-weight: 500; /* A softer font weight, tighter-spaced version of small headline style. */
   --dt-typography-headline-sm-soft-compact-line-height: 1.2; /* A softer font weight, tighter-spaced version of small headline style. */
-  --dt-typography-headline-sm-soft-compact-font-size: 12px; /* A softer font weight, tighter-spaced version of small headline style. */
+  --dt-typography-headline-sm-soft-compact-font-size: 1.2rem; /* A softer font weight, tighter-spaced version of small headline style. */
   --dt-typography-headline-sm-soft-compact-text-case: none; /* A softer font weight, tighter-spaced version of small headline style. */
   --dt-typography-headline-md-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Medium-sized base text style for headlines. */
   --dt-typography-headline-md-font-weight: 700; /* Medium-sized base text style for headlines. */
   --dt-typography-headline-md-line-height: 1.6; /* Medium-sized base text style for headlines. */
-  --dt-typography-headline-md-font-size: 15px; /* Medium-sized base text style for headlines. */
+  --dt-typography-headline-md-font-size: 1.5rem; /* Medium-sized base text style for headlines. */
   --dt-typography-headline-md-text-case: none; /* Medium-sized base text style for headlines. */
   --dt-typography-headline-md-compact-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* A tighter-spaced version of medium headline style. */
   --dt-typography-headline-md-compact-font-weight: 700; /* A tighter-spaced version of medium headline style. */
   --dt-typography-headline-md-compact-line-height: 1.4; /* A tighter-spaced version of medium headline style. */
-  --dt-typography-headline-md-compact-font-size: 15px; /* A tighter-spaced version of medium headline style. */
+  --dt-typography-headline-md-compact-font-size: 1.5rem; /* A tighter-spaced version of medium headline style. */
   --dt-typography-headline-md-compact-text-case: none; /* A tighter-spaced version of medium headline style. */
   --dt-typography-headline-lg-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Large text style for headlines to attract attention. */
   --dt-typography-headline-lg-font-weight: 700; /* Large text style for headlines to attract attention. */
   --dt-typography-headline-lg-line-height: 1.6; /* Large text style for headlines to attract attention. */
-  --dt-typography-headline-lg-font-size: 19px; /* Large text style for headlines to attract attention. */
+  --dt-typography-headline-lg-font-size: 1.9rem; /* Large text style for headlines to attract attention. */
   --dt-typography-headline-lg-text-case: none; /* Large text style for headlines to attract attention. */
   --dt-typography-headline-lg-soft-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* A softer font weight version of large headline style. */
   --dt-typography-headline-lg-soft-font-weight: 500; /* A softer font weight version of large headline style. */
   --dt-typography-headline-lg-soft-line-height: 1.6; /* A softer font weight version of large headline style. */
-  --dt-typography-headline-lg-soft-font-size: 19px; /* A softer font weight version of large headline style. */
+  --dt-typography-headline-lg-soft-font-size: 1.9rem; /* A softer font weight version of large headline style. */
   --dt-typography-headline-lg-soft-text-case: none; /* A softer font weight version of large headline style. */
   --dt-typography-headline-lg-compact-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* A tighter-spaced version of large body style. */
   --dt-typography-headline-lg-compact-font-weight: 700; /* A tighter-spaced version of large body style. */
   --dt-typography-headline-lg-compact-line-height: 1.2; /* A tighter-spaced version of large body style. */
-  --dt-typography-headline-lg-compact-font-size: 19px; /* A tighter-spaced version of large body style. */
+  --dt-typography-headline-lg-compact-font-size: 1.9rem; /* A tighter-spaced version of large body style. */
   --dt-typography-headline-lg-compact-text-case: none; /* A tighter-spaced version of large body style. */
   --dt-typography-headline-lg-soft-compact-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* A softer font weight, tighter spaced version of large headline style. */
   --dt-typography-headline-lg-soft-compact-font-weight: 500; /* A softer font weight, tighter spaced version of large headline style. */
   --dt-typography-headline-lg-soft-compact-line-height: 1.2; /* A softer font weight, tighter spaced version of large headline style. */
-  --dt-typography-headline-lg-soft-compact-font-size: 19px; /* A softer font weight, tighter spaced version of large headline style. */
+  --dt-typography-headline-lg-soft-compact-font-size: 1.9rem; /* A softer font weight, tighter spaced version of large headline style. */
   --dt-typography-headline-lg-soft-compact-text-case: none; /* A softer font weight, tighter spaced version of large headline style. */
   --dt-typography-headline-xl-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Extra large text style for high importance headlines. */
   --dt-typography-headline-xl-font-weight: 500; /* Extra large text style for high importance headlines. */
   --dt-typography-headline-xl-line-height: 1.2; /* Extra large text style for high importance headlines. */
-  --dt-typography-headline-xl-font-size: 27px; /* Extra large text style for high importance headlines. */
+  --dt-typography-headline-xl-font-size: 2.7rem; /* Extra large text style for high importance headlines. */
   --dt-typography-headline-xl-text-case: none; /* Extra large text style for high importance headlines. */
   --dt-typography-headline-xl-compact-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* A tighter-spaced version of extra large headline style. */
   --dt-typography-headline-xl-compact-font-weight: 500; /* A tighter-spaced version of extra large headline style. */
   --dt-typography-headline-xl-compact-line-height: 1; /* A tighter-spaced version of extra large headline style. */
-  --dt-typography-headline-xl-compact-font-size: 27px; /* A tighter-spaced version of extra large headline style. */
+  --dt-typography-headline-xl-compact-font-size: 2.7rem; /* A tighter-spaced version of extra large headline style. */
   --dt-typography-headline-xl-compact-text-case: none; /* A tighter-spaced version of extra large headline style. */
   --dt-typography-headline-xxl-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Largest text style for extra extra large content. */
   --dt-typography-headline-xxl-font-weight: 500; /* Largest text style for extra extra large content. */
   --dt-typography-headline-xxl-line-height: 1.2; /* Largest text style for extra extra large content. */
-  --dt-typography-headline-xxl-font-size: 38px; /* Largest text style for extra extra large content. */
+  --dt-typography-headline-xxl-font-size: 3.8rem; /* Largest text style for extra extra large content. */
   --dt-typography-headline-xxl-text-case: none; /* Largest text style for extra extra large content. */
   --dt-typography-headline-xxl-compact-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* A tighter-spaced version of extra extra large headline style. */
   --dt-typography-headline-xxl-compact-font-weight: 500; /* A tighter-spaced version of extra extra large headline style. */
   --dt-typography-headline-xxl-compact-line-height: 1; /* A tighter-spaced version of extra extra large headline style. */
-  --dt-typography-headline-xxl-compact-font-size: 38px; /* A tighter-spaced version of extra extra large headline style. */
+  --dt-typography-headline-xxl-compact-font-size: 3.8rem; /* A tighter-spaced version of extra extra large headline style. */
   --dt-typography-headline-xxl-compact-text-case: none; /* A tighter-spaced version of extra extra large headline style. */
   --dt-typography-label-md-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Base default medium-sized text style for labels, providing clear identification and categorization. */
   --dt-typography-label-md-font-weight: 600; /* Base default medium-sized text style for labels, providing clear identification and categorization. */
   --dt-typography-label-md-line-height: 1.6; /* Base default medium-sized text style for labels, providing clear identification and categorization. */
-  --dt-typography-label-md-font-size: 15px; /* Base default medium-sized text style for labels, providing clear identification and categorization. */
+  --dt-typography-label-md-font-size: 1.5rem; /* Base default medium-sized text style for labels, providing clear identification and categorization. */
   --dt-typography-label-md-text-case: none; /* Base default medium-sized text style for labels, providing clear identification and categorization. */
   --dt-typography-label-md-compact-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* A tighter-spaced version of medium label style. */
   --dt-typography-label-md-compact-font-weight: 600; /* A tighter-spaced version of medium label style. */
   --dt-typography-label-md-compact-line-height: 1.4; /* A tighter-spaced version of medium label style. */
-  --dt-typography-label-md-compact-font-size: 15px; /* A tighter-spaced version of medium label style. */
+  --dt-typography-label-md-compact-font-size: 1.5rem; /* A tighter-spaced version of medium label style. */
   --dt-typography-label-md-compact-text-case: none; /* A tighter-spaced version of medium label style. */
   --dt-typography-label-md-plain-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* A non-bold version of medium label style. */
   --dt-typography-label-md-plain-font-weight: 400; /* A non-bold version of medium label style. */
   --dt-typography-label-md-plain-line-height: 1.6; /* A non-bold version of medium label style. */
-  --dt-typography-label-md-plain-font-size: 15px; /* A non-bold version of medium label style. */
+  --dt-typography-label-md-plain-font-size: 1.5rem; /* A non-bold version of medium label style. */
   --dt-typography-label-md-plain-text-case: none; /* A non-bold version of medium label style. */
   --dt-typography-label-md-plain-compact-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* A non-bolded, tighter-spaced version of medium label style. */
   --dt-typography-label-md-plain-compact-font-weight: 400; /* A non-bolded, tighter-spaced version of medium label style. */
   --dt-typography-label-md-plain-compact-line-height: 1.4; /* A non-bolded, tighter-spaced version of medium label style. */
-  --dt-typography-label-md-plain-compact-font-size: 15px; /* A non-bolded, tighter-spaced version of medium label style. */
+  --dt-typography-label-md-plain-compact-font-size: 1.5rem; /* A non-bolded, tighter-spaced version of medium label style. */
   --dt-typography-label-md-plain-compact-text-case: none; /* A non-bolded, tighter-spaced version of medium label style. */
   --dt-typography-label-sm-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy. */
   --dt-typography-label-sm-font-weight: 600; /* Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy. */
   --dt-typography-label-sm-line-height: 1.4; /* Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy. */
-  --dt-typography-label-sm-font-size: 12px; /* Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy. */
+  --dt-typography-label-sm-font-size: 1.2rem; /* Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy. */
   --dt-typography-label-sm-text-case: none; /* Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy. */
   --dt-typography-label-sm-compact-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* A tighter-spaced version of small label style. */
   --dt-typography-label-sm-compact-font-weight: 600; /* A tighter-spaced version of small label style. */
   --dt-typography-label-sm-compact-line-height: 1.2; /* A tighter-spaced version of small label style. */
-  --dt-typography-label-sm-compact-font-size: 12px; /* A tighter-spaced version of small label style. */
+  --dt-typography-label-sm-compact-font-size: 1.2rem; /* A tighter-spaced version of small label style. */
   --dt-typography-label-sm-compact-text-case: none; /* A tighter-spaced version of small label style. */
   --dt-typography-label-sm-plain-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* A non-bold version of small label style. */
   --dt-typography-label-sm-plain-font-weight: 400; /* A non-bold version of small label style. */
   --dt-typography-label-sm-plain-line-height: 1.4; /* A non-bold version of small label style. */
-  --dt-typography-label-sm-plain-font-size: 12px; /* A non-bold version of small label style. */
+  --dt-typography-label-sm-plain-font-size: 1.2rem; /* A non-bold version of small label style. */
   --dt-typography-label-sm-plain-text-case: none; /* A non-bold version of small label style. */
   --dt-typography-label-sm-plain-compact-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* A non-bolded, tighter-spaced version of small label style. */
   --dt-typography-label-sm-plain-compact-font-weight: 400; /* A non-bolded, tighter-spaced version of small label style. */
   --dt-typography-label-sm-plain-compact-line-height: 1.2; /* A non-bolded, tighter-spaced version of small label style. */
-  --dt-typography-label-sm-plain-compact-font-size: 12px; /* A non-bolded, tighter-spaced version of small label style. */
+  --dt-typography-label-sm-plain-compact-font-size: 1.2rem; /* A non-bolded, tighter-spaced version of small label style. */
   --dt-typography-label-sm-plain-compact-text-case: none; /* A non-bolded, tighter-spaced version of small label style. */
   --dt-typography-helper-md-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Base default medium-sized text style for supplementary contextual information. */
   --dt-typography-helper-md-font-weight: 400; /* Base default medium-sized text style for supplementary contextual information. */
   --dt-typography-helper-md-line-height: 1.4; /* Base default medium-sized text style for supplementary contextual information. */
-  --dt-typography-helper-md-font-size: 15px; /* Base default medium-sized text style for supplementary contextual information. */
+  --dt-typography-helper-md-font-size: 1.5rem; /* Base default medium-sized text style for supplementary contextual information. */
   --dt-typography-helper-md-text-case: none; /* Base default medium-sized text style for supplementary contextual information. */
   --dt-typography-helper-sm-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Smaller text size for subtle guidance or additional context, minimizing visual disruption. */
   --dt-typography-helper-sm-font-weight: 400; /* Smaller text size for subtle guidance or additional context, minimizing visual disruption. */
   --dt-typography-helper-sm-line-height: 1.2; /* Smaller text size for subtle guidance or additional context, minimizing visual disruption. */
-  --dt-typography-helper-sm-font-size: 12px; /* Smaller text size for subtle guidance or additional context, minimizing visual disruption. */
+  --dt-typography-helper-sm-font-size: 1.2rem; /* Smaller text size for subtle guidance or additional context, minimizing visual disruption. */
   --dt-typography-helper-sm-text-case: none; /* Smaller text size for subtle guidance or additional context, minimizing visual disruption. */
   --dt-typography-code-md-font-family: SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; /* Base default medium-sized text style for monospace code snippets of technical content. */
   --dt-typography-code-md-font-weight: 400; /* Base default medium-sized text style for monospace code snippets of technical content. */
   --dt-typography-code-md-line-height: 1.2; /* Base default medium-sized text style for monospace code snippets of technical content. */
-  --dt-typography-code-md-font-size: 15px; /* Base default medium-sized text style for monospace code snippets of technical content. */
+  --dt-typography-code-md-font-size: 1.5rem; /* Base default medium-sized text style for monospace code snippets of technical content. */
   --dt-typography-code-md-text-case: none; /* Base default medium-sized text style for monospace code snippets of technical content. */
   --dt-typography-code-sm-font-family: SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; /* Smaller text size for monospace code, suitable for inline references or less prominent code examples. */
   --dt-typography-code-sm-font-weight: 400; /* Smaller text size for monospace code, suitable for inline references or less prominent code examples. */
   --dt-typography-code-sm-line-height: 1.2; /* Smaller text size for monospace code, suitable for inline references or less prominent code examples. */
-  --dt-typography-code-sm-font-size: 12px; /* Smaller text size for monospace code, suitable for inline references or less prominent code examples. */
+  --dt-typography-code-sm-font-size: 1.2rem; /* Smaller text size for monospace code, suitable for inline references or less prominent code examples. */
   --dt-typography-code-sm-text-case: none;
   --dt-typography-code-sm: var(--dt-typography-code-sm-font-weight) var(--dt-typography-code-sm-font-size)/var(--dt-typography-code-sm-line-height) var(--dt-typography-code-sm-font-family);
   --dt-typography-code-md: var(--dt-typography-code-md-font-weight) var(--dt-typography-code-md-font-size)/var(--dt-typography-code-md-line-height) var(--dt-typography-code-md-font-family);
@@ -20706,11 +20792,11 @@ body {
   --dt-inputs-size-radius-lg: 1.2rem;
   --dt-inputs-size-radius-xl: 1.6rem;
   --dt-inputs-line-height-default: 1.2;
-  --dt-inputs-font-size-xs: 12px;
-  --dt-inputs-font-size-sm: 12px;
-  --dt-inputs-font-size-md: 15px;
-  --dt-inputs-font-size-lg: 19px;
-  --dt-inputs-font-size-xl: 27px;
+  --dt-inputs-font-size-xs: 1.2rem;
+  --dt-inputs-font-size-sm: 1.2rem;
+  --dt-inputs-font-size-md: 1.5rem;
+  --dt-inputs-font-size-lg: 1.9rem;
+  --dt-inputs-font-size-xl: 2.7rem;
   --dt-inputs-color-foreground-default-h: 0;
   --dt-inputs-color-foreground-default-s: 0%;
   --dt-inputs-color-foreground-default-l: 22.745098039215687%;
@@ -21566,14 +21652,14 @@ body {
   --dt-checkbox-color-background-checked-hsl: var(--dt-checkbox-color-background-checked-h) var(--dt-checkbox-color-background-checked-s) var(--dt-checkbox-color-background-checked-l);
   --dt-checkbox-color-background-checked-hsla: hsla(var(--dt-checkbox-color-background-checked-h) var(--dt-checkbox-color-background-checked-s) var(--dt-checkbox-color-background-checked-l) / var(--alpha, 100%));
   --dt-checkbox-color-background-checked: #7C52FF;
-  --dt-icon-size-100: 12px;
-  --dt-icon-size-200: 14px;
-  --dt-icon-size-300: 18px;
-  --dt-icon-size-400: 20px;
-  --dt-icon-size-500: 24px;
-  --dt-icon-size-600: 32px;
-  --dt-icon-size-700: 38px;
-  --dt-icon-size-800: 48px;
+  --dt-icon-size-100: 1.2rem;
+  --dt-icon-size-200: 1.4rem;
+  --dt-icon-size-300: 1.8rem;
+  --dt-icon-size-400: 2rem;
+  --dt-icon-size-500: 2.4rem;
+  --dt-icon-size-600: 3.2rem;
+  --dt-icon-size-700: 3.8rem;
+  --dt-icon-size-800: 4.8rem;
   --dt-icon-size-border-100: 0.1rem;
   --dt-icon-size-border-200: 0.125rem;
   --dt-icon-size-border-300: 0.15rem;