@3dsource/source-ui-native 3.2.0 → 3.2.2

package/styles/source-ui-native.css

@@ -1043,6 +1043,14 @@
     0px 0px 1px rgba(0, 0, 0, 0.2), 0px 26px 80px rgba(0, 0, 0, 0.2);
 }
 
+.section_3dsourcecom,
+.cdk-overlay-container {
+  --src-font-weight-regular: 400;
+  --src-font-weight-medium: 500;
+  --src-font-weight-semiBold: 600;
+  --src-font-weight-bold: 700;
+}
+
 .section_3dsourcecom,
 .cdk-overlay-container {
   width: 100%;
@@ -1157,6 +1165,11 @@
 .section_3dsourcecom .src-heading-h4,
 .section_3dsourcecom .src-heading-h5,
 .section_3dsourcecom .src-heading-h6,
+.section_3dsourcecom .src-headings-4xl,
+.section_3dsourcecom .src-headings-3xl,
+.section_3dsourcecom .src-headings-2xl,
+.section_3dsourcecom .src-headings-xl,
+.section_3dsourcecom .src-headings-lg,
 .cdk-overlay-container h1,
 .cdk-overlay-container h2,
 .cdk-overlay-container h3,
@@ -1169,64 +1182,189 @@
 .cdk-overlay-container .src-heading-h3,
 .cdk-overlay-container .src-heading-h4,
 .cdk-overlay-container .src-heading-h5,
-.cdk-overlay-container .src-heading-h6 {
+.cdk-overlay-container .src-heading-h6,
+.cdk-overlay-container .src-headings-4xl,
+.cdk-overlay-container .src-headings-3xl,
+.cdk-overlay-container .src-headings-2xl,
+.cdk-overlay-container .src-headings-xl,
+.cdk-overlay-container .src-headings-lg {
   margin: 0;
   font-style: normal;
   font-family: var(--src-font-family-header);
   font-weight: var(--src-font-weight-semiBold, 600);
   text-wrap: balance;
 }
+.section_3dsourcecom h1,
+.section_3dsourcecom .src-headings-4xl,
+.cdk-overlay-container h1,
+.cdk-overlay-container .src-headings-4xl {
+  font-size: var(--src-font-size-4xl);
+  line-height: var(--src-font-line-4xl);
+  letter-spacing: var(--src-font-spacing-4xl);
+}
+.section_3dsourcecom .src-headings-3xl,
+.cdk-overlay-container .src-headings-3xl {
+  font-size: var(--src-font-size-3xl);
+  line-height: var(--src-font-line-3xl);
+  letter-spacing: var(--src-font-spacing-3xl);
+}
+.section_3dsourcecom h2,
+.section_3dsourcecom .src-headings-2xl,
+.cdk-overlay-container h2,
+.cdk-overlay-container .src-headings-2xl {
+  font-size: var(--src-font-size-2xl);
+  line-height: var(--src-font-line-lg);
+  letter-spacing: var(--src-font-spacing-2xl);
+}
+.section_3dsourcecom h3,
+.section_3dsourcecom .src-headings-xl,
+.cdk-overlay-container h3,
+.cdk-overlay-container .src-headings-xl {
+  font-size: var(--src-font-size-xl);
+  line-height: var(--src-font-line-xl);
+  letter-spacing: var(--src-font-spacing-xl);
+}
+.section_3dsourcecom h4,
+.section_3dsourcecom .src-headings-lg,
+.cdk-overlay-container h4,
+.cdk-overlay-container .src-headings-lg {
+  font-size: var(--src-font-size-lg);
+  line-height: var(--src-font-line-lg);
+  letter-spacing: var(--src-font-spacing-4xl);
+}
+.section_3dsourcecom h5,
+.section_3dsourcecom .src-title-md,
+.cdk-overlay-container h5,
+.cdk-overlay-container .src-title-md {
+  font-size: var(--src-font-size-md);
+  line-height: var(--src-font-line-md);
+  font-weight: var(--src-font-weight-semiBold, 600);
+}
+.section_3dsourcecom h6,
+.section_3dsourcecom .src-title-base,
+.cdk-overlay-container h6,
+.cdk-overlay-container .src-title-base {
+  font-size: var(--src-font-size-base);
+  line-height: var(--src-font-line-base);
+  font-weight: var(--src-font-weight-semiBold, 600);
+}
+.section_3dsourcecom .src-title-sm,
+.cdk-overlay-container .src-title-sm {
+  font-size: var(--src-font-size-sm);
+  line-height: var(--src-font-line-sm);
+  font-weight: var(--src-font-weight-semiBold, 600);
+}
+.section_3dsourcecom .src-title-xs,
+.cdk-overlay-container .src-title-xs {
+  font-size: var(--src-font-size-tech);
+  line-height: var(--src-font-line-xs);
+  font-weight: var(--src-font-weight-semiBold, 600);
+  letter-spacing: var(--src-font-spacing-tech);
+  text-transform: uppercase;
+}
+.section_3dsourcecom .src-body-md,
+.cdk-overlay-container .src-body-md {
+  font-size: var(--src-font-size-base);
+  line-height: var(--src-font-line-base);
+  font-weight: var(--src-font-weight-regular, 400);
+}
+.section_3dsourcecom .src-body-base,
+.cdk-overlay-container .src-body-base {
+  font-size: var(--src-font-size-sm);
+  line-height: var(--src-font-line-sm);
+  font-weight: var(--src-font-weight-regular, 400);
+}
+.section_3dsourcecom .src-body-sm,
+.cdk-overlay-container .src-body-sm {
+  font-size: var(--src-font-size-xs);
+  line-height: var(--src-font-line-xs);
+  font-weight: var(--src-font-weight-regular, 400);
+}
+.section_3dsourcecom .src-body-relaxed-md,
+.cdk-overlay-container .src-body-relaxed-md {
+  font-size: var(--src-font-size-base);
+  line-height: var(--src-font-line-md);
+  font-weight: var(--src-font-weight-regular, 400);
+}
+.section_3dsourcecom .src-body-relaxed-base,
+.cdk-overlay-container .src-body-relaxed-base {
+  font-size: var(--src-font-size-sm);
+  line-height: var(--src-font-line-base);
+  font-weight: var(--src-font-weight-regular, 400);
+}
+.section_3dsourcecom .src-body-relaxed-sm,
+.cdk-overlay-container .src-body-relaxed-sm {
+  font-size: var(--src-font-size-xs);
+  line-height: var(--src-font-line-sm);
+  font-weight: var(--src-font-weight-regular, 400);
+}
+.section_3dsourcecom .src-label-xl,
+.cdk-overlay-container .src-label-xl {
+  font-size: var(--src-font-size-md);
+  line-height: var(--src-font-line-md);
+  font-weight: var(--src-font-weight-medium, 500);
+}
+.section_3dsourcecom .src-label-lg,
+.cdk-overlay-container .src-label-lg {
+  font-size: var(--src-font-size-base);
+  line-height: var(--src-font-line-base);
+  font-weight: var(--src-font-weight-medium, 500);
+}
+.section_3dsourcecom .src-label-md,
+.cdk-overlay-container .src-label-md {
+  font-size: var(--src-font-size-sm);
+  line-height: var(--src-font-line-sm);
+  font-weight: var(--src-font-weight-medium, 500);
+}
+.section_3dsourcecom .src-label-sm,
+.cdk-overlay-container .src-label-sm {
+  font-size: var(--src-font-size-xs);
+  line-height: var(--src-font-line-xs);
+  font-weight: var(--src-font-weight-medium, 500);
+}
+.section_3dsourcecom .src-label-tech,
+.cdk-overlay-container .src-label-tech {
+  font-size: var(--src-font-size-tech);
+  line-height: var(--src-font-line-xs);
+  font-weight: var(--src-font-weight-medium, 500);
+  letter-spacing: var(--src-font-spacing-tech);
+  text-transform: uppercase;
+}
 .section_3dsourcecom .src-heading-massive,
 .cdk-overlay-container .src-heading-massive {
   font-size: var(--src-fs-massive);
   line-height: var(--src-lh-massive);
   letter-spacing: var(--src-ls-massive);
 }
-.section_3dsourcecom [class^=src-heading],
-.cdk-overlay-container [class^=src-heading] {
-  letter-spacing: 0;
-}
-.section_3dsourcecom h1,
 .section_3dsourcecom .src-heading-h1,
-.cdk-overlay-container h1,
 .cdk-overlay-container .src-heading-h1 {
   font-size: var(--src-fs-huge);
   line-height: var(--src-lh-huge);
   letter-spacing: var(--src-ls-large);
 }
-.section_3dsourcecom h2,
 .section_3dsourcecom .src-heading-h2,
-.cdk-overlay-container h2,
 .cdk-overlay-container .src-heading-h2 {
   font-size: var(--src-fs-3xlarge);
   line-height: var(--src-lh-3xlarge);
   letter-spacing: var(--src-ls-medium);
 }
-.section_3dsourcecom h3,
 .section_3dsourcecom .src-heading-h3,
-.cdk-overlay-container h3,
 .cdk-overlay-container .src-heading-h3 {
   font-size: var(--src-fs-2xlarge);
   line-height: var(--src-lh-2xlarge);
   letter-spacing: var(--src-ls-small);
 }
-.section_3dsourcecom h4,
 .section_3dsourcecom .src-heading-h4,
-.cdk-overlay-container h4,
 .cdk-overlay-container .src-heading-h4 {
   font-size: var(--src-fs-xlarge);
   line-height: var(--src-lh-xlarge);
 }
-.section_3dsourcecom h5,
 .section_3dsourcecom .src-heading-h5,
-.cdk-overlay-container h5,
 .cdk-overlay-container .src-heading-h5 {
   font-size: var(--src-fs-large);
   line-height: var(--src-lh-large);
 }
-.section_3dsourcecom h6,
 .section_3dsourcecom .src-heading-h6,
-.cdk-overlay-container h6,
 .cdk-overlay-container .src-heading-h6 {
   font-size: var(--src-font-size-base);
   line-height: var(--src-font-line-base);
@@ -1279,10 +1417,10 @@
   width: 100%;
   margin: 0;
   list-style: none;
-  padding: 8px;
+  padding: var(--src-padding-xs, 8px);
 }
 .src-list .src-list__item {
-  margin-bottom: 4px;
+  margin-bottom: var(--src-gap-sm, 4px);
 }
 .src-list--compact {
   padding: 0;
@@ -1687,7 +1825,7 @@
       --src-ui-secondary-default-hover,
       rgba(148, 163, 184, 0.08)
     );
-    --srcButtonIconCOlor: var(--src-icon-hover, #111827);
+    --srcButtonIconColor: var(--src-icon-hover, #111827);
   }
 }
 .src-button--ghost.src-button--context-info {
@@ -2217,7 +2355,7 @@
       --src-ui-secondary-default-hover,
       rgba(148, 163, 184, 0.08)
     );
-    --srcButtonIconCOlor: var(--src-icon-hover, #111827);
+    --srcButtonIconColor: var(--src-icon-hover, #111827);
   }
 }
 .src-icon-button--ghost:active, .src-icon-button--ghost.src-icon-button--pressed {
@@ -2445,8 +2583,8 @@
 }
 
 .src-form {
-  --srcFormRowGap: 16px;
-  --srcFormItemsGap: 12px;
+  --srcFormRowGap: var(--src-layout-gap-const-lg, 16px);
+  --srcFormItemsGap: var(--src-layout-gap-const-md, 12px);
   --srcFormOffset: 0;
   width: 100%;
   display: flex;
@@ -2886,21 +3024,21 @@
 .src-textarea[class*="--size-xl"] {
   --srcTexareaMinHeight: 56px;
 }
-.src-textarea.src-input--secondary {
+.src-textarea.src-textarea--secondary {
   --srcTexareaBg: var(--src-ui-input-secondary, rgba(148, 163, 184, 0.08));
   --srcTexareaBorder: none;
   --srcTexareaColor: var(--src-text-ui-secondary-main, #111827);
 }
-.src-textarea.src-input--secondary:hover {
+.src-textarea.src-textarea--secondary:hover {
   --srcTexareaBg: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
   --srcTexareaBorder: none;
 }
-.src-textarea.src-input--ghost {
+.src-textarea.src-textarea--ghost {
   --srcTexareaBg: transparent;
   --srcTexareaBorder: none;
   --srcTexareaColor: var(--src-text-ui-secondary-main, #111827);
 }
-.src-textarea.src-input--ghost:hover {
+.src-textarea.src-textarea--ghost:hover {
   --srcTexareaBg: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
   --srcTexareaBorder: none;
 }
@@ -2977,7 +3115,7 @@
   --srcLabelLineHeight: var(--src-font-line-xs, 16px);
   --srcLabelFontWeight: 600;
   --srcLabelColor: var(--src-text-body-lable, #6b7280);
-  --srcLabelMarginBottom: 4px;
+  --srcLabelMarginBottom: var(--src-gap-sm, 4px);
   --srcLabelLetterSpacing: var(--src-font-spacing-tech, 1.2px);
   display: block;
   font-size: var(--srcLabelFontSize);
@@ -2997,7 +3135,7 @@
   --srcCheckboxBorderWidth: 2px;
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--src-gap-sm, 4px);
   cursor: pointer;
 }
 .src-checkbox input[type=checkbox] {
@@ -3005,9 +3143,9 @@
   appearance: none;
   width: var(--srcCheckboxSize);
   height: var(--srcCheckboxSize);
-  padding: 2px;
+  padding: var(--src-space-0-5, 2px);
   border-radius: var(--src-border-rounded-xs, var(--src-space-1));
-  background-color: #fff;
+  background-color: var(--src-surface-container-main, #fff);
   border: var(--srcCheckboxBorderWidth) solid var(--srcCheckboxBorderColor);
   cursor: pointer;
 }
@@ -3015,8 +3153,8 @@
   --srcCheckboxBorderColor: var(--src-border-input-hover, #9ca3af);
 }
 .src-checkbox input[type=checkbox]:checked {
-  background-color: #007bff;
-  --srcCheckboxBorderColor: #007bff;
+  background-color: var(--src-ui-accent-default, #017bff);
+  --srcCheckboxBorderColor: var(--src-ui-accent-default, #017bff);
 }
 .src-checkbox input[type=checkbox]:checked::after {
   content: "";
@@ -3038,6 +3176,15 @@
   outline: none;
   box-shadow: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, 0.16));
 }
+.src-checkbox input[type=checkbox]:disabled, .src-checkbox input[type=checkbox][disabled] {
+  --srcCheckboxBorderColor: var(
+    --src-ui-accent-disabled,
+    rgba(148, 163, 184, 0.24)
+  );
+  background-color: var(--src-ui-input-disabled, rgba(148, 163, 184, 0.16));
+  cursor: default;
+  pointer-events: none;
+}
 .src-checkbox .src-checkbox__label {
   padding-left: var(--src-gap-lg, var(--src-space-3));
   font-size: var(--src-text-fontSize, var(--src-font-size-sm));
@@ -3069,7 +3216,7 @@
 .src-radio {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--src-gap-sm, 4px);
   cursor: pointer;
 }
 .src-radio input[type=radio] {
@@ -3078,7 +3225,7 @@
   width: var(--srcRadioSize);
   height: var(--srcRadioSize);
   border-radius: 50%;
-  background-color: #fff;
+  background-color: var(--src-surface-container-main, #fff);
   border: var(--srcRadioBorderWidth) solid var(--srcRadioBorderColor);
   cursor: pointer;
 }
@@ -3092,11 +3239,17 @@
 .src-radio input[type=radio]:checked:hover {
   --srcRadioBorderColor: var(--src-ui-accent-default-hover, #016fe6);
 }
+.src-radio input[type=radio]:focus-visible {
+  outline: none;
+  box-shadow: var(--srcRadioFocusRing);
+}
 .src-radio input[type=radio][disabled] {
   --srcRadioBorderColor: var(
     --src-ui-accent-disabled,
     rgba(148, 163, 184, 0.24)
   );
+  cursor: default;
+  pointer-events: none;
 }
 .src-radio .src-radio__label {
   padding-left: var(--src-gap-lg, var(--src-space-3));
@@ -3284,7 +3437,7 @@
   padding: var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);
   width: 100%;
   border-top: var(--srcModalFooterBorder);
-  gap: 8px;
+  gap: var(--src-layout-gap-const-sm, 8px);
 }
 @media (max-width: 767px) {
   .src-modal .src-modal__footer {
@@ -3293,10 +3446,10 @@
   .src-modal .src-modal__footer .src-modal__footer-group {
     width: 100%;
   }
-  .src-modal .src-modal__footer .src-modal__footer-group src-button {
+  .src-modal .src-modal__footer .src-modal__footer-group .src-button {
     flex-grow: 1;
   }
-  .src-modal .src-modal__footer .src-modal__footer-group src-button .src-button {
+  .src-modal .src-modal__footer .src-modal__footer-group .src-button .src-button {
     --srcButtonWidth: 100%;
   }
 }
@@ -3305,7 +3458,7 @@
 }
 .src-modal .src-modal__footer-group {
   display: flex;
-  gap: 10px;
+  gap: var(--src-layout-gap-const-md, 12px);
 }
 .src-modal .src-modal__title {
   font-size: var(--srcModalTitleSize);
@@ -3371,11 +3524,11 @@ dialog:-internal-dialog-in-top-layer::backdrop {
   background-color: var(--src-color-border-default);
   border-radius: 10px;
 }
-.src-popover .src-popover__body .src-list src-list-item:last-child {
+.src-popover .src-popover__body .src-list .src-list__item:last-child {
   margin-bottom: 0;
 }
 
-.src-popover-panel--mobile src-popover {
+.src-popover-panel--mobile .src-popover {
   width: 100%;
 }
 .src-popover-panel--mobile .src-popover {
@@ -3385,6 +3538,245 @@ dialog:-internal-dialog-in-top-layer::backdrop {
   --srcPopoverBoxShadow: var(--src-shadow-large-top);
 }
 
+.src-badge {
+  --srcBadgeHeight: auto;
+  --srcBadgePadding: 4px;
+  --srcBadgeBackgroundColor: var(
+    --src-ui-status-light-neutral,
+    rgba(148, 163, 184, 0.24)
+  );
+  --srcBadgeTextColor: var(--src-text-body-lable, #6b7280);
+  display: inline-flex;
+  gap: var(--src-gap-md, 4px);
+  width: auto;
+  min-width: var(--srcBadgeHeight);
+  height: var(--srcBadgeHeight);
+  padding: var(--srcBadgePadding);
+  border-radius: var(--src-border-rounded-full, 9999px);
+  background: var(--srcBadgeBackgroundColor);
+  color: var(--srcBadgeTextColor);
+  font-family: var(--src-font-family-header, Inter);
+  font-size: var(--src-text-fontSize, 12px);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--src-text-lineHeight, 16px);
+}
+.src-badge .src-badge__icon > * {
+  display: block;
+  width: var(--src-icon-size);
+  height: var(--src-icon-size);
+  color: var(--srcBadgeTextColor);
+}
+.src-badge--context-default, .src-badge--context-success, .src-badge--context-warning, .src-badge--context-attention, .src-badge--context-error, .src-badge--context-info {
+  --srcBadgeHeight: auto;
+  --srcBadgeBackgroundColor: var(
+    --src-ui-status-light-neutral,
+    rgba(148, 163, 184, 0.24)
+  );
+  --srcBadgeTextColor: var(--src-text-body-lable, #6b7280);
+  text-align: center;
+}
+.src-badge--context-default {
+  --srcBadgeBackgroundColor:
+    linear-gradient(
+      0deg,
+      var(--src-ui-status-light-neutral, rgba(148, 163, 184, 0.24)) 0%,
+      var(--src-ui-status-light-neutral, rgba(148, 163, 184, 0.24)) 100%
+    ),
+    var(--src-surface-container-main, #fff);
+  --srcBadgeTextColor: var(--src-text-body-lable, #6b7280);
+}
+.src-badge--context-info {
+  --srcBadgeBackgroundColor:
+    linear-gradient(
+      0deg,
+      var(--src-ui-status-light-info, rgba(1, 123, 255, 0.24)) 0%,
+      var(--src-ui-status-light-info, rgba(1, 123, 255, 0.24)) 100%
+    ),
+    var(--src-surface-container-main, #fff);
+  --srcBadgeTextColor: var(--src-text-ui-accent-main, #016fe6);
+}
+.src-badge--context-success {
+  --srcBadgeBackgroundColor:
+    linear-gradient(
+      0deg,
+      var(--src-ui-status-light-success, rgba(22, 163, 74, 0.16)) 0%,
+      var(--src-ui-status-light-success, rgba(22, 163, 74, 0.16)) 100%
+    ),
+    var(--src-surface-container-main, #fff);
+  --srcBadgeTextColor: var(--src-text-ui-success-main, #16a34a);
+}
+.src-badge--context-warning {
+  --srcBadgeBackgroundColor:
+    linear-gradient(
+      0deg,
+      var(--src-ui-status-light-warning, rgba(245, 168, 15, 0.24)) 0%,
+      var(--src-ui-status-light-warning, rgba(245, 168, 15, 0.24)) 100%
+    ),
+    var(--src-surface-container-main, #fff);
+  --srcBadgeTextColor: var(--src-text-ui-warning-main, #d97706);
+}
+.src-badge--context-attention {
+  --srcBadgeBackgroundColor:
+    linear-gradient(
+      0deg,
+      var(--src-ui-status-light-attention, rgba(240, 228, 66, 0.24)) 0%,
+      var(--src-ui-status-light-attention, rgba(240, 228, 66, 0.24)) 100%
+    ),
+    var(--src-surface-container-main, #fff);
+  --srcBadgeTextColor: var(--src-text-ui-attention-main, #9e962c);
+}
+.src-badge--context-error {
+  --srcBadgeBackgroundColor:
+    linear-gradient(
+      0deg,
+      var(--src-ui-status-light-critical, rgba(239, 68, 68, 0.16)) 0%,
+      var(--src-ui-status-light-critical, rgba(239, 68, 68, 0.16)) 100%
+    ),
+    var(--src-surface-container-main, #fff);
+  --srcBadgeTextColor: var(--src-text-ui-distruct-main, #f24122);
+}
+
+.src-banner {
+  --srcBannerPadding: var(--src-layout-padding-const-sm, 8px)
+    var(--src-layout-padding-const-md, 12px);
+  --srcBannerBackgroundColor: var(
+    --src-ui-status-light-neutral,
+    rgba(148, 163, 184, 0.24)
+  );
+  --srcBannerBorderWidth: 1px;
+  --srcBannerBorderColor: var(
+    --src-border-container-light,
+    rgba(148, 163, 184, 0.16)
+  );
+  --srcBannerTextColor: var(--src-text-body-secondary, #4b5563);
+  --srcBannerIconColor: var(--src-icon-default);
+  --srcBannerBorderRadius: var(--src-layout-radius-const-rounded-sm, 6px);
+  display: flex;
+  gap: var(--src-layout-gap-const-sm, 8px);
+  width: 100%;
+  padding: var(--srcBannerPadding);
+  border: var(--srcBannerBorderWidth) solid var(--srcBannerBorderColor);
+  border-radius: var(--srcBannerBorderRadius);
+  background: var(--srcBannerBackgroundColor);
+  color: var(--srcBannerTextColor);
+  font-size: var(--src-font-size-xs, 12px);
+  font-weight: normal;
+  line-height: var(--src-font-line-xs, 16px);
+}
+.src-banner .src-banner__icon-prefix,
+.src-banner .src-banner__icon-postfix {
+  width: var(--src-icon-size);
+  height: var(--src-icon-size);
+  color: var(--srcBannerIconColor);
+  flex-shrink: 0;
+}
+.src-banner .src-banner__icon-prefix > *,
+.src-banner .src-banner__icon-postfix > * {
+  width: 100%;
+  height: 100%;
+}
+.src-banner .src-banner__content {
+  flex-grow: 1;
+}
+.src-banner .src-banner__title {
+  color: var(--srcBannerTextColor);
+  font-family: var(--src-font-family-header, Inter);
+  font-size: var(--src-font-size-tech, 9px);
+  font-style: normal;
+  font-weight: 600;
+  line-height: var(--src-font-line-xs, 16px);
+  letter-spacing: var(--src-font-spacing-tech, 1.2px);
+  text-transform: uppercase;
+  margin-bottom: var(--src-layout-gap-const-xs, 4px);
+}
+.src-banner p {
+  margin: 0;
+}
+.src-banner--context-info {
+  --srcBannerBackgroundColor: var(
+    --src-ui-status-light-info,
+    rgba(1, 123, 255, 0.24)
+  );
+  --srcBannerBorderColor: var(--src-ui-status-basic-info, #017bff);
+  --srcBannerIconColor: var(--src-icon-info);
+  --srcBannerTextColor: var(--src-text-body-accent, #016fe6);
+}
+.src-banner--context-success {
+  --srcBannerBackgroundColor: var(
+    --src-ui-status-light-success,
+    rgba(22, 163, 74, 0.16)
+  );
+  --srcBannerBorderColor: var(--src-ui-status-basic-success, #22c55e);
+  --srcBannerIconColor: var(--src-icon-success);
+  --srcBannerTextColor: var(--src-text-ui-success-main, #16a34a);
+}
+.src-banner--context-critical, .src-banner--context-error {
+  --srcBannerBackgroundColor: var(
+    --src-ui-status-light-critical,
+    rgba(239, 68, 68, 0.16)
+  );
+  --srcBannerBorderColor: var(--src-ui-status-basic-critical, #f24122);
+  --srcBannerIconColor: var(--src-icon-error);
+  --srcBannerTextColor: var(--src-text-body-destruct, #c5280c);
+}
+.src-banner--context-warning {
+  --srcBannerBackgroundColor: var(
+    --src-ui-status-light-warning,
+    rgba(245, 168, 15, 0.24)
+  );
+  --srcBannerBorderColor: var(--src-ui-status-basic-warning, #f59b18);
+  --srcBannerIconColor: var(--src-icon-warning);
+  --srcBannerTextColor: var(--src-text-ui-warning-main, #d97706);
+}
+
+.src-divider {
+  --srcDividerColor: var(--src-color-border-default, #e5e7eb);
+  --srcDividerThickness: 1px;
+  --srcDividerOffsetTop: 8px;
+  --srcDividerOffsetBottom: var(--srcDividerOffsetTop);
+  display: block;
+  width: 100%;
+  height: var(--srcDividerThickness);
+  margin-top: var(--srcDividerOffsetTop);
+  margin-bottom: var(--srcDividerOffsetBottom);
+  padding: 0;
+  background-color: var(--srcDividerColor);
+  border: none;
+}
+
+.src-hint {
+  --srcHintColor: var(--src-color-icon-default, #6b7280);
+  --srcHintFontSize: var(--src-text-fontSize, 12px);
+  --srcHintLineHeight: var(--src-text-lineHeight, 16px);
+  --srcHintPadding: var(--src-gap-md, 8px) 0 0;
+  --srcHintIconSize: var(--src-icon-size, 16px);
+  position: relative;
+  color: var(--srcHintColor);
+  font-size: var(--srcHintFontSize);
+  font-style: normal;
+  display: flex;
+  font-weight: 500;
+  padding: var(--srcHintPadding);
+  margin: 0;
+  line-height: var(--srcHintLineHeight);
+}
+.src-hint .src-hint__icon {
+  width: var(--srcHintIconSize);
+  height: var(--srcHintIconSize);
+  margin-right: var(--src-gap-md, 4px);
+  color: currentColor;
+}
+.src-hint--error, .src-hint--context-error {
+  --srcHintColor: var(--src-text-body-destruct, #c5280c);
+}
+.src-hint--context-info {
+  --srcHintColor: var(--src-text-body-accent, #016fe6);
+}
+.src-hint--context-success {
+  --srcHintColor: var(--src-text-body-success, #16a34a);
+}
+
 html,
 body {
   width: 100%;