unifyedx-storybook-new 0.1.39 → 0.1.40

package/dist/unifyedx-storybook-new.css

@@ -65,12 +65,14 @@
     --color-red-100: oklch(93.6% .032 17.717);
     --color-red-500: oklch(63.7% .237 25.331);
     --color-red-600: oklch(57.7% .245 27.325);
+    --color-red-700: oklch(50.5% .213 27.518);
     --color-red-900: oklch(39.6% .141 25.723);
     --color-green-500: oklch(72.3% .219 149.579);
     --color-teal-100: oklch(95.3% .051 180.801);
     --color-teal-700: oklch(51.1% .096 186.391);
     --color-blue-50: oklch(97% .014 254.604);
     --color-blue-100: oklch(93.2% .032 255.585);
+    --color-blue-200: oklch(88.2% .059 254.128);
     --color-blue-300: oklch(80.9% .105 251.813);
     --color-blue-400: oklch(70.7% .165 254.624);
     --color-blue-500: oklch(62.3% .214 259.815);
@@ -78,6 +80,8 @@
     --color-blue-700: oklch(48.8% .243 264.376);
     --color-blue-800: oklch(42.4% .199 265.638);
     --color-blue-900: oklch(37.9% .146 265.522);
+    --color-indigo-600: oklch(51.1% .262 276.966);
+    --color-indigo-800: oklch(39.8% .195 277.366);
     --color-purple-500: oklch(62.7% .265 303.9);
     --color-gray-50: oklch(98.5% .002 247.839);
     --color-gray-100: oklch(96.7% .003 264.542);
@@ -100,10 +104,15 @@
     --text-base--line-height: calc(1.5 / 1);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --font-weight-light: 300;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --leading-tight: 1.25;
+    --leading-normal: 1.5;
     --radius-sm: .25rem;
     --radius-md: .375rem;
     --radius-lg: .5rem;
@@ -372,6 +381,10 @@
     pointer-events: none;
   }
 
+  .collapse {
+    visibility: collapse;
+  }
+
   .visible {
     visibility: visible;
   }
@@ -490,6 +503,10 @@
     }
   }
 
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+
   .mx-5 {
     margin-inline: calc(var(--spacing) * 5);
   }
@@ -506,6 +523,10 @@
     margin-top: calc(var(--spacing) * 4);
   }
 
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
+
   .mt-10 {
     margin-top: calc(var(--spacing) * 10);
   }
@@ -522,14 +543,34 @@
     margin-bottom: calc(var(--spacing) * 0) !important;
   }
 
+  .mb-0 {
+    margin-bottom: calc(var(--spacing) * 0);
+  }
+
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+
   .mb-5 {
     margin-bottom: calc(var(--spacing) * 5);
   }
 
+  .mb-8 {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
+
   .-ml-4 {
     margin-left: calc(var(--spacing) * -4);
   }
 
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
+
   .block {
     display: block;
   }
@@ -590,10 +631,22 @@
     height: calc(var(--spacing) * 12);
   }
 
+  .h-\[72px\] {
+    height: 72px;
+  }
+
+  .h-\[220px\] {
+    height: 220px;
+  }
+
   .h-\[calc\(100vh-330px\)\] {
     height: calc(100vh - 330px);
   }
 
+  .h-\[calc\(100vh-350px\)\] {
+    height: calc(100vh - 350px);
+  }
+
   .h-full {
     height: 100%;
   }
@@ -610,6 +663,10 @@
     min-height: 100%;
   }
 
+  .min-h-screen {
+    min-height: 100vh;
+  }
+
   .\!w-\[70px\] {
     width: 70px !important;
   }
@@ -646,10 +703,26 @@
     width: calc(var(--spacing) * 12);
   }
 
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
+
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
 
+  .w-\[72px\] {
+    width: 72px;
+  }
+
+  .w-\[120px\] {
+    width: 120px;
+  }
+
+  .w-\[340px\] {
+    width: 340px;
+  }
+
   .w-auto {
     width: auto;
   }
@@ -658,6 +731,14 @@
     width: 100%;
   }
 
+  .max-w-\[800px\] {
+    max-width: 800px;
+  }
+
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
+
   .min-w-\[120px\] {
     min-width: 120px;
   }
@@ -710,10 +791,22 @@
     cursor: default;
   }
 
+  .cursor-move {
+    cursor: move;
+  }
+
   .cursor-not-allowed {
     cursor: not-allowed;
   }
 
+  .cursor-pointer {
+    cursor: pointer;
+  }
+
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -722,6 +815,10 @@
     flex-direction: column;
   }
 
+  .flex-row {
+    flex-direction: row;
+  }
+
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -750,6 +847,10 @@
     gap: calc(var(--spacing) * 1);
   }
 
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
+
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -762,6 +863,14 @@
     gap: calc(var(--spacing) * 4);
   }
 
+  .gap-5 {
+    gap: calc(var(--spacing) * 5);
+  }
+
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
+
   :where(.space-y-1 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
@@ -786,12 +895,24 @@
     margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  :where(.-space-x-2 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   :where(.space-x-1 > :not(:last-child)) {
     --tw-space-x-reverse: 0;
     margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
     margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  :where(.space-x-8 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   :where(.divide-y > :not(:last-child)) {
     --tw-divide-y-reverse: 0;
     border-bottom-style: var(--tw-border-style);
@@ -818,6 +939,10 @@
     overflow: hidden;
   }
 
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -830,6 +955,14 @@
     border-radius: var(--radius-2xl);
   }
 
+  .rounded-\[12px\] {
+    border-radius: 12px;
+  }
+
+  .rounded-\[14px\] {
+    border-radius: 14px;
+  }
+
   .rounded-full {
     border-radius: 3.40282e38px;
   }
@@ -850,6 +983,21 @@
     border-radius: var(--radius-xl);
   }
 
+  .rounded-t-2xl {
+    border-top-left-radius: var(--radius-2xl);
+    border-top-right-radius: var(--radius-2xl);
+  }
+
+  .rounded-t-md {
+    border-top-left-radius: var(--radius-md);
+    border-top-right-radius: var(--radius-md);
+  }
+
+  .rounded-b-2xl {
+    border-bottom-right-radius: var(--radius-2xl);
+    border-bottom-left-radius: var(--radius-2xl);
+  }
+
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -870,11 +1018,32 @@
     border-bottom-width: 1px;
   }
 
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
+
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
   }
 
+  .border-\[\#e6e9ee\] {
+    border-color: #e6e9ee;
+  }
+
+  .border-\[\#eef2f6\] {
+    border-color: #eef2f6;
+  }
+
+  .border-black {
+    border-color: var(--color-black);
+  }
+
+  .border-blue-200 {
+    border-color: var(--color-blue-200);
+  }
+
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
@@ -887,6 +1056,20 @@
     border-color: var(--color-gray-400);
   }
 
+  .border-gray-400\/50 {
+    border-color: #99a1af80;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-gray-400\/50 {
+      border-color: color-mix(in oklab, var(--color-gray-400) 50%, transparent);
+    }
+  }
+
+  .border-red-500 {
+    border-color: var(--color-red-500);
+  }
+
   .border-transparent {
     border-color: #0000;
   }
@@ -895,6 +1078,18 @@
     border-color: var(--color-white);
   }
 
+  .bg-\[\#F5F5F6\] {
+    background-color: #f5f5f6;
+  }
+
+  .bg-\[\#ffffff\] {
+    background-color: #fff;
+  }
+
+  .bg-black {
+    background-color: var(--color-black);
+  }
+
   .bg-black\/30 {
     background-color: #0000004d;
   }
@@ -905,6 +1100,10 @@
     }
   }
 
+  .bg-blue-50 {
+    background-color: var(--color-blue-50);
+  }
+
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
@@ -941,6 +1140,10 @@
     background-color: var(--color-white);
   }
 
+  .object-cover {
+    object-fit: cover;
+  }
+
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -981,6 +1184,18 @@
     padding-inline: calc(var(--spacing) * 5);
   }
 
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+
+  .px-7 {
+    padding-inline: calc(var(--spacing) * 7);
+  }
+
+  .px-\[10px\] {
+    padding-inline: 10px;
+  }
+
   .px-\[12px\] {
     padding-inline: 12px;
   }
@@ -997,14 +1212,26 @@
     padding-block: calc(var(--spacing) * 2);
   }
 
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
 
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
+
   .py-\[2px\] {
     padding-block: 2px;
   }
 
+  .py-\[6px\] {
+    padding-block: 6px;
+  }
+
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
@@ -1045,6 +1272,10 @@
     vertical-align: middle;
   }
 
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -1060,11 +1291,28 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
 
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
 
+  .text-\[11px\] {
+    font-size: 11px;
+  }
+
+  .text-\[13px\] {
+    font-size: 13px;
+  }
+
+  .text-\[18px\] {
+    font-size: 18px;
+  }
+
   .leading-5 {
     --tw-leading: calc(var(--spacing) * 5);
     line-height: calc(var(--spacing) * 5);
@@ -1075,11 +1323,26 @@
     line-height: calc(var(--spacing) * 6);
   }
 
+  .leading-normal {
+    --tw-leading: var(--leading-normal);
+    line-height: var(--leading-normal);
+  }
+
+  .leading-tight {
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+  }
+
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
 
+  .font-light {
+    --tw-font-weight: var(--font-weight-light);
+    font-weight: var(--font-weight-light);
+  }
+
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -1095,6 +1358,30 @@
     font-weight: var(--font-weight-semibold);
   }
 
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+
+  .text-\[\#1C274C\] {
+    color: #1c274c;
+  }
+
+  .text-\[\#6b7280\] {
+    color: #6b7280;
+  }
+
+  .text-\[\#252525\] {
+    color: #252525;
+  }
+
+  .text-\[\#767676\] {
+    color: #767676;
+  }
+
+  .text-black {
+    color: var(--color-black);
+  }
+
   .text-blue-500 {
     color: var(--color-blue-500);
   }
@@ -1139,6 +1426,10 @@
     color: var(--color-green-500);
   }
 
+  .text-indigo-600 {
+    color: var(--color-indigo-600);
+  }
+
   .text-purple-500 {
     color: var(--color-purple-500);
   }
@@ -1163,16 +1454,20 @@
     color: var(--color-white);
   }
 
-  .italic {
-    font-style: italic;
+  .opacity-0 {
+    opacity: 0;
+  }
+
+  .opacity-50 {
+    opacity: .5;
   }
 
-  .underline {
-    text-decoration-line: underline;
+  .opacity-70 {
+    opacity: .7;
   }
 
-  .opacity-0 {
-    opacity: 0;
+  .opacity-90 {
+    opacity: .9;
   }
 
   .opacity-100 {
@@ -1314,6 +1609,10 @@
       cursor: pointer;
     }
 
+    .hover\:border-gray-300:hover {
+      border-color: var(--color-gray-300);
+    }
+
     .hover\:bg-blue-50:hover {
       background-color: var(--color-blue-50);
     }
@@ -1330,6 +1629,10 @@
       background-color: var(--color-gray-100);
     }
 
+    .hover\:bg-gray-800:hover {
+      background-color: var(--color-gray-800);
+    }
+
     .hover\:bg-white\/\[0\.6\]:hover {
       background-color: #fff9;
     }
@@ -1340,10 +1643,22 @@
       }
     }
 
+    .hover\:text-\[\#1f6ed4\]:hover {
+      color: #1f6ed4;
+    }
+
     .hover\:text-blue-800:hover {
       color: var(--color-blue-800);
     }
 
+    .hover\:text-gray-600:hover {
+      color: var(--color-gray-600);
+    }
+
+    .hover\:text-gray-700:hover {
+      color: var(--color-gray-700);
+    }
+
     .hover\:text-gray-800:hover {
       color: var(--color-gray-800);
     }
@@ -1352,10 +1667,18 @@
       color: var(--color-gray-900);
     }
 
+    .hover\:text-indigo-800:hover {
+      color: var(--color-indigo-800);
+    }
+
     .hover\:text-red-500:hover {
       color: var(--color-red-500);
     }
 
+    .hover\:text-red-700:hover {
+      color: var(--color-red-700);
+    }
+
     .hover\:underline:hover {
       text-decoration-line: underline;
     }
@@ -1426,6 +1749,10 @@
     .md\:min-w-96 {
       min-width: calc(var(--spacing) * 96);
     }
+
+    .md\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
   }
 
   @media (min-width: 64rem) {
@@ -3394,8 +3721,9 @@ body {
 }
 
 .switch-container {
+  align-items: center;
   width: 100%;
-  font-family: sans-serif;
+  display: flex;
 }
 
 .switch-group {
@@ -3419,11 +3747,11 @@ body {
 
 .switch-element:focus-visible {
   outline-offset: 2px;
-  outline: 2px solid #3b82f6;
+  outline: 2px solid #72bd4d;
 }
 
 .switch-element[data-headlessui-state~="checked"] {
-  background-color: #2563eb;
+  background-color: #72bd4d;
 }
 
 .switch-element[data-headlessui-state~="disabled"] {
@@ -4787,10 +5115,6 @@ body {
   position: relative;
 }
 
-.ck-powered-by {
-  display: none;
-}
-
 #ui-toast-backdrop {
   opacity: 0;
   pointer-events: none;
@@ -7904,7 +8228,8 @@ body.toast-backdrop #ui-toast-backdrop {
 /* ... (all other classes like .textarea-field, .textarea-error-message are the same) ... */
 .switch-container {
   width: 100%;
-  font-family: sans-serif;
+  display: flex;
+  align-items: center;
 }
 
 .switch-group {
@@ -7927,12 +8252,12 @@ body.toast-backdrop #ui-toast-backdrop {
 }
 
 .switch-element:focus-visible {
-  outline: 2px solid #3b82f6; /* blue-500 */
+  outline: 2px solid #72bd4d; /* blue-500 */
   outline-offset: 2px;
 }
 
 .switch-element[data-headlessui-state~="checked"] {
-  background-color: #2563eb; /* blue-600 */
+  background-color: #72bd4d; /* blue-600 */
 }
 
 /* Disabled state */
@@ -8840,7 +9165,7 @@ body.toast-backdrop #ui-toast-backdrop {
   position: relative;
   contain: content;
 }
-.ck-powered-by{display:none}:root {
+:root {
   --toastify-color-light: #fff;
   --toastify-color-dark: #121212;
   --toastify-color-info: #3498db;
@@ -9640,6 +9965,48 @@ body.toast-backdrop #ui-toast-backdrop {
     transform: rotate(360deg);
   }
 }
+/* FullConfigPage Styles */
+.full-config-page {
+  margin: 28px auto;
+  padding: 18px;
+  background: #f5f6f8;
+  min-height: 100vh;
+}
+
+.full-config-page .icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.full-config-page .pill {
+  display: inline-block;
+}
+
+/* Tab content styling */
+.full-config-page .tab-content {
+  height: calc(100vh - 200px);
+  overflow-y: auto;
+}
+
+/* Custom scrollbar for better UX */
+.full-config-page ::-webkit-scrollbar {
+  width: 8px;
+}
+
+.full-config-page ::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.full-config-page ::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.full-config-page ::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
 /* Backdrop below the toast container, above the app content */
 #ui-toast-backdrop {
   position: fixed;