myshell-react-lib 0.1.15 → 0.1.17

package/dist/styles/design2-light.scss

@@ -0,0 +1,364 @@
+@import './new-tokens.scss';
+
+@layer base {
+  :root {
+    // Colors  Background  Normal
+    --Colors-Background-Normal-Primary-Default: var(--Neutral-99);
+    --Colors-Background-Normal-Primary-Hover: var(--Neutral-98);
+    --Colors-Background-Normal-Primary-Active: var(--Neutral-90);
+
+    // Colors  Background  Normal Secondary
+    --Colors-Background-Normal-Secondary-Default: var(--Neutral-98);
+    --Colors-Background-Normal-Secondary-Alt: var(--Neutral-100);
+    --Colors-Background-Normal-Secondary-Hover: var(--Neutral-95);
+    --Colors-Background-Normal-Secondary-Active: var(--Neutral-90);
+
+    // Colors  Background  Normal Tertiary
+    --Colors-Background-Normal-Tertiary-Default: var(--Neutral-100);
+    --Colors-Background-Normal-Tertiary-Hover: var(--Neutral-98);
+    --Colors-Background-Normal-Tertiary-Active: var(--Neutral-95);
+
+    // Colors  Background  Neutral Primary
+    --Colors-Background-Neutral-Primary-Default: var(--Neutral-98);
+    --Colors-Background-Neutral-Primary-Hover: var(--Neutral-95);
+    --Colors-Background-Neutral-Primary-Active: var(--Neutral-90);
+
+    // Colors  Background  Neutral Secondary
+    --Colors-Background-Neutral-Secondary-Default: var(--Neutral-99);
+    --Colors-Background-Neutral-Secondary-Hover: var(--Neutral-98);
+    --Colors-Background-Neutral-Secondary-Active: var(--Neutral-95);
+
+    // Colors  Background  Neutral Tertiary
+    --Colors-Background-Neutral-Tertiary-Default: var(--Neutral-98);
+    --Colors-Background-Neutral-Tertiary-Hover: var(--Neutral-95);
+    --Colors-Background-Neutral-Tertiary-Active: var(--Neutral-90);
+
+    // Colors  Background  Neutral  On Surface
+    --Colors-Background-Neutral-On-Surface-Default: var(--Opacity-On-Surface-10);
+    --Colors-Background-Neutral-On-Surface-Hover: var(--Opacity-On-Surface-20);
+    --Colors-Background-Neutral-On-Surface-Active: var(--Opacity-On-Surface-30);
+    --Colors-Background-Neutral-On-Surface-Disabled: var(--Opacity-On-Surface-10);
+    --Colors-Background-Neutral-On-Surface-Alt: var(--Opacity-On-Surface-40);
+
+    // Colors  Background  Utilities
+    --Colors-Background-Utilities-Bolder: var(--Neutral-5);
+    --Colors-Background-Utilities-None: var(--Basic-None);
+    --Colors-Background-Utilities-Overlay: var(--Opacity-Black-70);
+    --Colors-Background-Utilities-Static-White: var(--Neutral-99);
+    --Colors-Background-Utilities-Static-Black: var(--Neutral-5);
+
+    // Colors  Background  Brand
+    --Colors-Background-Brand-Default: var(--Pure-Mauve-95);
+    --Colors-Background-Brand-Alt: var(--Pure-Mauve-95);
+    --Colors-Background-Brand-Subtle: var(--Pure-Mauve-98);
+    --Colors-Background-Brand-Hover: var(--Pure-Mauve-90);
+    --Colors-Background-Brand-Active: var(--Pure-Mauve-80);
+    --Colors-Background-Brand-Bolder: var(--Pure-Mauve-30);
+
+    // Colors  Background  Critical
+    --Colors-Background-Critical-Default: var(--Terracotta-95);
+    --Colors-Background-Critical-Alt: var(--Terracotta-95);
+    --Colors-Background-Critical-Subtle: var(--Terracotta-98);
+    --Colors-Background-Critical-Hover: var(--Terracotta-90);
+    --Colors-Background-Critical-Active: var(--Terracotta-80);
+    --Colors-Background-Critical-Bolder: var(--Terracotta-30);
+
+    // Colors  Background  Warning
+    --Colors-Background-Warning-Default: var(--Khaki-95);
+    --Colors-Background-Warning-Alt: var(--Khaki-95);
+    --Colors-Background-Warning-Subtle: var(--Khaki-98);
+    --Colors-Background-Warning-Hover: var(--Khaki-90);
+    --Colors-Background-Warning-Active: var(--Khaki-80);
+    --Colors-Background-Warning-Bolder: var(--Khaki-30);
+
+    // Colors  Background  Success
+    --Colors-Background-Success-Default: var(--Teal-98);
+    --Colors-Background-Success-Alt: var(--Teal-98);
+    --Colors-Background-Success-Subtle: var(--Teal-99);
+    --Colors-Background-Success-Hover: var(--Teal-90);
+    --Colors-Background-Success-Active: var(--Teal-80);
+    --Colors-Background-Success-Bolder: var(--Teal-30);
+
+    // Colors  Background  Info
+    --Colors-Background-Info-Default: var(--Lake-Blue-95);
+    --Colors-Background-Info-Alt: var(--Lake-Blue-95);
+    --Colors-Background-Info-Subtle: var(--Lake-Blue-98);
+    --Colors-Background-Info-Hover: var(--Lake-Blue-90);
+    --Colors-Background-Info-Active: var(--Lake-Blue-80);
+    --Colors-Background-Info-Bolder: var(--Lake-Blue-30);
+
+    // Colors  Text
+    --Colors-Text-Default: var(--Neutral-5);
+    --Colors-Text-Subtle: var(--Neutral-30);
+    --Colors-Text-Subtler: var(--Neutral-40);
+    --Colors-Text-Subtlest: var(--Neutral-50);
+    --Colors-Text-Disabled: var(--Neutral-80);
+    --Colors-Text-Bolder: var(--Neutral-100); //对应旧版inverse
+
+    // Colors  Text  Static
+    --Colors-Text-Static-White: var(--Neutral-100);
+    --Colors-Text-Static-Black: var(--Neutral-5);
+
+    // Colors  Text  Brand
+    --Colors-Text-Brand-Subtle: var(--Pure-Mauve-70);
+    --Colors-Text-Brand-Default: var(--Pure-Mauve-50);  
+    --Colors-Text-Brand-Bolder: var(--Pure-Mauve-30);
+
+    // Colors  Text  Critical
+    --Colors-Text-Critical-Subtle: var(--Terracotta-70);
+    --Colors-Text-Critical-Default: var(--Terracotta-50);
+    --Colors-Text-Critical-Bolder: var(--Terracotta-30);
+
+    // Colors  Text  Warning
+    --Colors-Text-Warning-Subtle: var(--Khaki-80);
+    --Colors-Text-Warning-Default: var(--Khaki-60);
+    --Colors-Text-Warning-Bolder: var(--Khaki-30);
+
+    // Colors  Text  Success  
+    --Colors-Text-Success-Subtle: var(--Teal-70);
+    --Colors-Text-Success-Default: var(--Teal-50);
+    --Colors-Text-Success-Bolder: var(--Teal-30);
+
+    
+    // Colort Foreground
+    --Colors-Foreground-Default: var(--Neutral-5);
+    --Colors-Foreground-Subtle: var(--Neutral-30);
+    --Colors-Foreground-Subtler: var(--Neutral-40);
+    --Colors-Foreground-Subtlest: var(--Neutral-50);
+    --Colors-Foreground-Disabled: var(--Neutral-80);
+    --Colors-Foreground-Bolder: var(--Neutral-100);
+
+    // Colors  Foreground  Static
+    --Colors-Foreground-Static-White: var(--Neutral-100);
+    --Colors-Foreground-Static-Black: var(--Neutral-5);
+
+    // Colors  Foreground  Brand
+    --Colors-Foreground-Brand-Subtle: var(--Pure-Mauve-70);
+    --Colors-Foreground-Brand-Default: var(--Pure-Mauve-50);
+    --Colors-Foreground-Brand-Bolder: var(--Pure-Mauve-30);
+
+    // Colors  Foreground  Critical
+    --Colors-Foreground-Critical-Subtle: var(--Terracotta-70);
+    --Colors-Foreground-Critical-Default: var(--Terracotta-50);
+    --Colors-Foreground-Critical-Bolder: var(--Terracotta-30);
+
+    // Colors  Foreground  Warning
+    --Colors-Foreground-Warning-Subtle: var(--Khaki-80);
+    --Colors-Foreground-Warning-Default: var(--Khaki-60);
+    --Colors-Foreground-Warning-Bolder: var(--Khaki-30);
+
+    // Colors  Foreground  Success
+    --Colors-Foreground-Success-Subtle: var(--Teal-70);
+    --Colors-Foreground-Success-Default: var(--Teal-50);
+    --Colors-Foreground-Success-Bolder: var(--Teal-30);
+    
+
+    // Colors  Border
+    --Colors-Border-Default: var(--Neutral-95);
+    --Colors-Border-Alt: var(--Neutral-95);
+    --Colors-Border-Hover: var(--Neutral-90);
+    --Colors-Border-Active: var(--Neutral-80);
+    --Colors-Border-Bolder: var(--Neutral-5);
+    --Colors-Border-Brand: var(--Pure-Mauve-50);
+    --Colors-Border-Brand_alt: var(--Pure-Mauve-80);
+    --Colors-Border-Critical: var(--Terracotta-50);
+    --Colors-Border-Success: var(--Teal-50);
+    --Colors-Border-Warning: var(--Khaki-50);
+    --Colors-Border-Opaque: var(--Opacity-White-1);
+    --Colors-Border-Static: var(--Neutral-95);
+
+    // Colors  Alpha
+    --Colors-Alpha-White-1: var(--Opacity-White-1);
+    --Colors-Alpha-White-3: var(--Opacity-White-3);
+    --Colors-Alpha-White-5: var(--Opacity-White-5);
+    --Colors-Alpha-White-8: var(--Opacity-White-8);
+    --Colors-Alpha-White-12: var(--Opacity-White-12);
+    --Colors-Alpha-White-16: var(--Opacity-White-16);
+    --Colors-Alpha-White-20: var(--Opacity-White-20);
+    --Colors-Alpha-White-30: var(--Opacity-White-30);
+    --Colors-Alpha-White-40: var(--Opacity-White-40);
+    --Colors-Alpha-White-50: var(--Opacity-White-50);
+    --Colors-Alpha-White-60: var(--Opacity-White-60);
+    --Colors-Alpha-White-70: var(--Opacity-White-70);
+    --Colors-Alpha-White-80: var(--Opacity-White-80);
+    --Colors-Alpha-White-90: var(--Opacity-White-90);
+    --Colors-Alpha-White-95: var(--Opacity-White-95);
+    --Colors-Alpha-White-100: var(--Opacity-White-100);
+    --Colors-Alpha-Black-1: var(--Opacity-Black-1);
+    --Colors-Alpha-Black-3: var(--Opacity-Black-3);
+    --Colors-Alpha-Black-5: var(--Opacity-Black-5);
+    --Colors-Alpha-Black-8: var(--Opacity-Black-8);
+    --Colors-Alpha-Black-12: var(--Opacity-Black-12);
+    --Colors-Alpha-Black-16: var(--Opacity-Black-16);
+    --Colors-Alpha-Black-20: var(--Opacity-Black-20);
+    --Colors-Alpha-Black-30: var(--Opacity-Black-30);
+    --Colors-Alpha-Black-40: var(--Opacity-Black-40);
+    --Colors-Alpha-Black-50: var(--Opacity-Black-50);
+    --Colors-Alpha-Black-60: var(--Opacity-Black-60);
+    --Colors-Alpha-Black-70: var(--Opacity-Black-70);
+    --Colors-Alpha-Black-80: var(--Opacity-Black-80);
+    --Colors-Alpha-Black-90: var(--Opacity-Black-90);
+    --Colors-Alpha-Black-95: var(--Opacity-Black-95);
+    --Colors-Alpha-Black-100: var(--Opacity-Black-100);
+
+    // Colors beta
+    --Colors-Beta-White-1: var(--Opacity-White-1);
+    --Colors-Beta-White-3: var(--Opacity-White-3);
+    --Colors-Beta-White-5: var(--Opacity-White-5);
+    --Colors-Beta-White-8: var(--Opacity-White-8);
+    --Colors-Beta-White-12: var(--Opacity-White-12);
+    --Colors-Beta-White-16: var(--Opacity-White-16);
+    --Colors-Beta-White-20: var(--Opacity-White-20);
+    --Colors-Beta-White-30: var(--Opacity-White-30);
+    --Colors-Beta-White-40: var(--Opacity-White-40);
+    --Colors-Beta-White-50: var(--Opacity-White-50);
+    --Colors-Beta-White-60: var(--Opacity-White-60);
+    --Colors-Beta-White-70: var(--Opacity-White-70);
+    --Colors-Beta-White-80: var(--Opacity-White-80);
+    --Colors-Beta-White-90: var(--Opacity-White-90);
+    --Colors-Beta-White-95: var(--Opacity-White-95);
+    --Colors-Beta-White-100: var(--Opacity-White-100);
+    --Colors-Beta-Black-1: var(--Opacity-Black-1);
+    --Colors-Beta-Black-3: var(--Opacity-Black-3);
+    --Colors-Beta-Black-5: var(--Opacity-Black-5);
+    --Colors-Beta-Black-8: var(--Opacity-Black-8);
+    --Colors-Beta-Black-12: var(--Opacity-Black-12);
+    --Colors-Beta-Black-16: var(--Opacity-Black-16);
+    --Colors-Beta-Black-20: var(--Opacity-Black-20);
+    --Colors-Beta-Black-30: var(--Opacity-Black-30);
+    --Colors-Beta-Black-40: var(--Opacity-Black-40);
+    --Colors-Beta-Black-50: var(--Opacity-Black-50);
+    --Colors-Beta-Black-60: var(--Opacity-Black-60);
+    --Colors-Beta-Black-70: var(--Opacity-Black-70);
+    --Colors-Beta-Black-80: var(--Opacity-Black-80);
+    --Colors-Beta-Black-90: var(--Opacity-Black-90);
+    --Colors-Beta-Black-95: var(--Opacity-Black-95);
+    --Colors-Beta-Black-100: var(--Opacity-Black-100);
+
+    // Colors  Utility Gray
+    --Colors-Utility-Gray-5: var(--Neutral-Variant-98);
+    --Colors-Utility-Gray-10: var(--Neutral-Variant-95);
+    --Colors-Utility-Gray-20: var(--Neutral-Variant-90);
+    --Colors-Utility-Gray-30: var(--Neutral-Variant-80);
+    --Colors-Utility-Gray-40: var(--Neutral-Variant-70);
+    --Colors-Utility-Gray-50: var(--Neutral-Variant-60);
+    --Colors-Utility-Gray-60: var(--Neutral-Variant-50);
+    --Colors-Utility-Gray-70: var(--Neutral-Variant-40);
+    --Colors-Utility-Gray-80: var(--Neutral-Variant-30);
+
+    // Colors  Utility Olive
+    --Colors-Utility-Olive-5: var(--Olive-98);
+    --Colors-Utility-Olive-10: var(--Olive-95);
+    --Colors-Utility-Olive-20: var(--Olive-90);
+    --Colors-Utility-Olive-30: var(--Olive-80);
+    --Colors-Utility-Olive-40: var(--Olive-70);
+    --Colors-Utility-Olive-50: var(--Olive-60);
+    --Colors-Utility-Olive-60: var(--Olive-50);
+    --Colors-Utility-Olive-70: var(--Olive-40);
+    --Colors-Utility-Olive-80: var(--Olive-30);
+
+    // Colors  Utility Teal
+    --Colors-Utility-Teal-5: var(--Teal-98);
+    --Colors-Utility-Teal-10: var(--Teal-95);
+    --Colors-Utility-Teal-20: var(--Teal-90);
+    --Colors-Utility-Teal-30: var(--Teal-80);
+    --Colors-Utility-Teal-40: var(--Teal-70);
+    --Colors-Utility-Teal-50: var(--Teal-60);
+    --Colors-Utility-Teal-60: var(--Teal-50);
+    --Colors-Utility-Teal-70: var(--Teal-40);
+    --Colors-Utility-Teal-80: var(--Teal-30);
+
+    // Colors  Utility Terracotta
+    --Colors-Utility-Lake-Blue-5: var(--Lake-Blue-98);
+    --Colors-Utility-Lake-Blue-10: var(--Lake-Blue-95);
+    --Colors-Utility-Lake-Blue-20: var(--Lake-Blue-90);
+    --Colors-Utility-Lake-Blue-30: var(--Lake-Blue-80);
+    --Colors-Utility-Lake-Blue-40: var(--Lake-Blue-70);
+    --Colors-Utility-Lake-Blue-50: var(--Lake-Blue-60);
+    --Colors-Utility-Lake-Blue-60: var(--Lake-Blue-50);
+    --Colors-Utility-Lake-Blue-70: var(--Lake-Blue-40);
+    --Colors-Utility-Lake-Blue-80: var(--Lake-Blue-30);
+
+    // Colors  Utility Cobalt
+    --Colors-Utility-Cobalt-5: var(--Cobalt-98);
+    --Colors-Utility-Cobalt-10: var(--Cobalt-95);
+    --Colors-Utility-Cobalt-20: var(--Cobalt-90);
+    --Colors-Utility-Cobalt-30: var(--Cobalt-80);
+    --Colors-Utility-Cobalt-40: var(--Cobalt-70);
+    --Colors-Utility-Cobalt-50: var(--Cobalt-60);
+    --Colors-Utility-Cobalt-60: var(--Cobalt-50);
+    --Colors-Utility-Cobalt-70: var(--Cobalt-40);
+    --Colors-Utility-Cobalt-80: var(--Cobalt-30);
+
+    // Colors  Utility Berry Pink
+    --Colors-Utility-Berry-Pink-5: var(--Berry-Pink-98);
+    --Colors-Utility-Berry-Pink-10: var(--Berry-Pink-95);
+    --Colors-Utility-Berry-Pink-20: var(--Berry-Pink-90);
+    --Colors-Utility-Berry-Pink-30: var(--Berry-Pink-80);
+    --Colors-Utility-Berry-Pink-40: var(--Berry-Pink-70);
+    --Colors-Utility-Berry-Pink-50: var(--Berry-Pink-60);
+    --Colors-Utility-Berry-Pink-60: var(--Berry-Pink-50);
+    --Colors-Utility-Berry-Pink-70: var(--Berry-Pink-40);
+    --Colors-Utility-Berry-Pink-80: var(--Berry-Pink-30);
+
+    // Colors  Utility Terracotta
+    --Colors-Utility-Terracotta-5: var(--Terracotta-98);
+    --Colors-Utility-Terracotta-10: var(--Terracotta-95);
+    --Colors-Utility-Terracotta-20: var(--Terracotta-90);
+    --Colors-Utility-Terracotta-30: var(--Terracotta-80);
+    --Colors-Utility-Terracotta-40: var(--Terracotta-70);
+    --Colors-Utility-Terracotta-50: var(--Terracotta-60);
+    --Colors-Utility-Terracotta-60: var(--Terracotta-50);
+    --Colors-Utility-Terracotta-70: var(--Terracotta-40);
+    --Colors-Utility-Terracotta-80: var(--Terracotta-30);
+
+    // Colors  Utility Ember
+    --Colors-Utility-Ember-5: var(--Ember-98);
+    --Colors-Utility-Ember-10: var(--Ember-95);
+    --Colors-Utility-Ember-20: var(--Ember-90);
+    --Colors-Utility-Ember-30: var(--Ember-80);
+    --Colors-Utility-Ember-40: var(--Ember-70);
+    --Colors-Utility-Ember-50: var(--Ember-60);
+    --Colors-Utility-Ember-60: var(--Ember-50);
+    --Colors-Utility-Ember-70: var(--Ember-40);
+    --Colors-Utility-Ember-80: var(--Ember-30);
+
+    // Colors  Utility Khaki
+    --Colors-Utility-Khaki-5: var(--Khaki-98);
+    --Colors-Utility-Khaki-10: var(--Khaki-95);
+    --Colors-Utility-Khaki-20: var(--Khaki-90);
+    --Colors-Utility-Khaki-30: var(--Khaki-80);
+    --Colors-Utility-Khaki-40: var(--Khaki-70);
+    --Colors-Utility-Khaki-50: var(--Khaki-60);
+    --Colors-Utility-Khaki-60: var(--Khaki-50);
+    --Colors-Utility-Khaki-70: var(--Khaki-40);
+    --Colors-Utility-Khaki-80: var(--Khaki-30);
+
+    // Colors  Utility Purple
+    --Colors-Utility-Purple-5: var(--Pure-Mauve-99);
+    --Colors-Utility-Purple-10: var(--Pure-Mauve-98);
+    --Colors-Utility-Purple-20: var(--Pure-Mauve-95);
+    --Colors-Utility-Purple-30: var(--Pure-Mauve-90);
+    --Colors-Utility-Purple-40: var(--Pure-Mauve-80);
+    --Colors-Utility-Purple-50: var(--Pure-Mauve-70);
+    --Colors-Utility-Purple-60: var(--Pure-Mauve-60);
+    --Colors-Utility-Purple-70: var(--Pure-Mauve-50);
+    --Colors-Utility-Purple-80: var(--Pure-Mauve-40);
+
+    // Colors  Utility Plum Purple
+    --Colors-Utility-Plum-Purple-5: var(--Plum-Purple-98);
+    --Colors-Utility-Plum-Purple-10: var(--Plum-Purple-95);
+    --Colors-Utility-Plum-Purple-20: var(--Plum-Purple-90);
+    --Colors-Utility-Plum-Purple-30: var(--Plum-Purple-80);
+    --Colors-Utility-Plum-Purple-40: var(--Plum-Purple-70);
+    --Colors-Utility-Plum-Purple-50: var(--Plum-Purple-60);
+    --Colors-Utility-Plum-Purple-60: var(--Plum-Purple-50);
+    --Colors-Utility-Plum-Purple-70: var(--Plum-Purple-40);
+    --Colors-Utility-Plum-Purple-80: var(--Plum-Purple-30);
+
+    --Colors-FaceTime-White: var(--Opacity-White-20);
+    --Colors-FaceTime-Black: var(--Opacity-Black-20);
+
+  }
+}
+

package/dist/styles/font.css

@@ -0,0 +1,19 @@
+* {
+  /* @apply font-mona-sans; */
+  /* 指定字体的字重为 400, 这会同时作用于 Mona Sans 及可能的 fallback 字体 */
+  font-weight: 400;
+}
+
+/* h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply font-ppt;
+} */
+
+.monaco-editor * {
+  @apply font-roboto-mono;
+  font-weight: 500;
+}

package/dist/styles/global.scss

@@ -0,0 +1,247 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import './new-tokens.scss';
+@import './design2-light.scss';
+@import './design2-dark.scss';
+@import './components-light.scss';
+@import './components-dark.scss';
+
+@layer components {
+  .button-hover-underline::after {
+    @apply absolute inset-x-0 bottom-0 border-b border-current pointer-events-none;
+  }
+}
+body {
+  overflow: hidden;
+  background-color: var(--Colors-Background-Normal-Primary-Default, #f5f7fa);
+  color: var(--Colors-Text-Default);
+  font-family: system-ui, 'system-ui', 'Segoe UI', Helvetica, Arial, sans-serif !important;
+}
+.driver-popover * {
+  font-family: system-ui, 'system-ui', 'Segoe UI', Helvetica, Arial, sans-serif !important;
+}
+body.driver-active .driver-none {
+  pointer-events: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+body.driver-active .driver-none * {
+  pointer-events: none;
+  user-select: none;
+  overflow: hidden;
+}
+@media (min-width: 768px) {
+  /* 在宽度大于 768px 且小于等于 1024px 的屏幕上应用以下样式 */
+  * {
+    // overflow-y: overlay;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+      border-radius: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--Colors-Border-Hover);
+      border-radius: 6px;
+    }
+  }
+}
+
+// .cropper-container {
+//   visibility: hidden !important;
+// }
+.bot-avatar-upload,
+.user-avatar-upload {
+  .cropper-container {
+    visibility: hidden !important;
+  }
+  .cropper-hidden {
+    display: block !important;
+  }
+}
+.chakra-checkbox__control {
+  border-radius: 50%;
+}
+.square-checkbox .chakra-checkbox__control {
+  border-radius: 2px;
+}
+
+.chakra-checkbox__control[data-checked] {
+  background: #3e5cfa;
+  border-color: #3e5cfa;
+}
+.chakra-checkbox__control[data-focus-visible] {
+  box-shadow: none;
+}
+
+.chakra-table tr td {
+  height: 56px;
+  padding: 0 20px;
+}
+
+.chakra-table tr:nth-of-type(odd) td {
+  background-color: #fafbfb;
+}
+.py-safe {
+  background-color: #fafbfb;
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+.arrow {
+  --popper-arrow-default-shadow: 1px 1px 1px 0 var(--Component-Colors-Shadows-Modal-Bolder) !important;
+}
+.dark .arrow {
+  --popper-arrow-default-shadow: 1px 1px 1px 0 var(--Colors-Border-Opaque) !important;
+}
+.arrow-left {
+  --popper-arrow-default-shadow: -1px 1px 1px 0 var(--Component-Colors-Shadows-Modal-Bolder) !important;
+}
+.dark .arrow-left {
+  --popper-arrow-default-shadow: -1px 1px 1px 0 var(--Colors-Border-Opaque) !important;
+}
+li,
+a,
+button {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.tap-higtlight {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.chat-mask > div {
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 20px);
+  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 20px);
+}
+.driver-popover {
+  background-color: var(--Colors-Utility-Lake-Blue-50) !important;
+  color: var(--Colors-Text-Static-White) !important;
+}
+
+.driver-popover .driver-popover-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--Colors-Beta-White-100);
+}
+.driver-popover .driver-popover-description {
+  font-size: 14px;
+  color: var(--Colors-Beta-White-80);
+}
+.driver-popover .driver-popover-progress-text {
+  font-size: 14px;
+  color: var(--Colors-Beta-White-60);
+  opacity: 0.6;
+  font-weight: 500;
+}
+.driver-popover-footer .driver-popover-navigation-btns {
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.driver-popover-footer .driver-popover-skip-btn,
+.driver-popover-footer .driver-popover-skip-btn:hover,
+.driver-popover-footer .driver-popover-skip-btn:focus {
+  border: none;
+  background: transparent !important;
+  font-size: 14px;
+  color: var(--Colors-Beta-White-80);
+  opacity: 0.6;
+  font-weight: 500;
+  border-radius: 6px;
+  padding: 4px 12px;
+  text-shadow: none;
+}
+.driver-popover-footer .driver-popover-prev-btn,
+.driver-popover-footer .driver-popover-prev-btn:hover,
+.driver-popover-footer .driver-popover-prev-btn:focus,
+.driver-popover-footer .driver-popover-next-btn,
+.driver-popover-footer .driver-popover-next-btn:hover,
+.driver-popover-footer .driver-popover-next-btn:focus {
+  background: var(--Colors-Foreground-Static-White) !important;
+  color: var(--Colors-Text-Static-Black) !important;
+  font-size: 14px;
+  padding: 4px 16px;
+  border-radius: 6px;
+  height: 28px;
+  text-shadow: none;
+}
+
+.driver-popover .driver-popover-arrow-side-left {
+  border-left-color: var(--Colors-Utility-Lake-Blue-50);
+}
+
+.driver-popover .driver-popover-arrow-side-right {
+  border-right-color: var(--Colors-Utility-Lake-Blue-50);
+}
+
+.driver-popover .driver-popover-arrow-side-top {
+  border-top-color: var(--Colors-Utility-Lake-Blue-50);
+}
+
+.driver-popover .driver-popover-arrow-side-bottom {
+  border-bottom-color: var(--Colors-Utility-Lake-Blue-50);
+}
+.workshop-topbar-guide .driver-popover-arrow-side-bottom.driver-popover-arrow-align-end {
+  left: 15px;
+  right: auto;
+}
+.explore-bot-item .chakra-popover__arrow-positioner {
+  display: none;
+}
+.chakra-switch__thumb {
+  background-color: var(--Colors-Background-Normal-Primary-Default) !important;
+}
+
+.chakra-switch__track {
+  background-color: var(--Colors-Border-Default) !important;
+}
+.chakra-switch__track[data-checked] {
+  background-color: var(--Colors-Background-Brand-Default) !important;
+}
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.md-viewer code {
+  background-color: white !important;
+  font-size: 14px !important;
+  color: var(--Neutral-30);
+}
+.page-view .md-viewer pre {
+  padding: 12px;
+  background-color: #f6f8fa !important;
+  color: var(--Colors-Text-Default);
+  code {
+    background-color: #f6f8fa !important;
+    color: var(--Colors-Text-Default);
+  }
+}
+.sbdocs-wrapper {
+  overflow-y: auto;
+  height: 100vh;
+}
+.sbdocs-content {
+  max-width: 70vw !important;
+}
+.disable-touch-action img {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+  // touch-action: none;
+}