unifyedx-storybook-new 0.1.39 → 0.1.41

package/dist/unifyedx-storybook-new.css

@@ -65,6 +65,7 @@
     --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);
@@ -100,10 +101,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 +378,10 @@
     pointer-events: none;
   }
 
+  .collapse {
+    visibility: collapse;
+  }
+
   .visible {
     visibility: visible;
   }
@@ -490,6 +500,10 @@
     }
   }
 
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+
   .mx-5 {
     margin-inline: calc(var(--spacing) * 5);
   }
@@ -506,6 +520,10 @@
     margin-top: calc(var(--spacing) * 4);
   }
 
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
+
   .mt-10 {
     margin-top: calc(var(--spacing) * 10);
   }
@@ -522,10 +540,26 @@
     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);
   }
@@ -590,10 +624,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 +656,10 @@
     min-height: 100%;
   }
 
+  .min-h-screen {
+    min-height: 100vh;
+  }
+
   .\!w-\[70px\] {
     width: 70px !important;
   }
@@ -646,10 +696,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 +724,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 +784,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 +808,10 @@
     flex-direction: column;
   }
 
+  .flex-row {
+    flex-direction: row;
+  }
+
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -750,6 +840,10 @@
     gap: calc(var(--spacing) * 1);
   }
 
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
+
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -762,6 +856,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 +888,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 +932,10 @@
     overflow: hidden;
   }
 
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -830,6 +948,14 @@
     border-radius: var(--radius-2xl);
   }
 
+  .rounded-\[12px\] {
+    border-radius: 12px;
+  }
+
+  .rounded-\[14px\] {
+    border-radius: 14px;
+  }
+
   .rounded-full {
     border-radius: 3.40282e38px;
   }
@@ -850,6 +976,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 +1011,28 @@
     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-gray-200 {
     border-color: var(--color-gray-200);
   }
@@ -887,6 +1045,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 +1067,14 @@
     border-color: var(--color-white);
   }
 
+  .bg-\[\#F5F5F6\] {
+    background-color: #f5f5f6;
+  }
+
+  .bg-\[\#ffffff\] {
+    background-color: #fff;
+  }
+
   .bg-black\/30 {
     background-color: #0000004d;
   }
@@ -941,6 +1121,10 @@
     background-color: var(--color-white);
   }
 
+  .object-cover {
+    object-fit: cover;
+  }
+
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -981,6 +1165,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 +1193,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 +1253,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 +1272,32 @@
     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;
+  }
+
+  .text-\[24px\] {
+    font-size: 24px;
+  }
+
   .leading-5 {
     --tw-leading: calc(var(--spacing) * 5);
     line-height: calc(var(--spacing) * 5);
@@ -1075,11 +1308,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 +1343,34 @@
     font-weight: var(--font-weight-semibold);
   }
 
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+
+  .text-\[\#1C274C\] {
+    color: #1c274c;
+  }
+
+  .text-\[\#6b7280\] {
+    color: #6b7280;
+  }
+
+  .text-\[\#101112\] {
+    color: #101112;
+  }
+
+  .text-\[\#252525\] {
+    color: #252525;
+  }
+
+  .text-\[\#767676\] {
+    color: #767676;
+  }
+
+  .text-black {
+    color: var(--color-black);
+  }
+
   .text-blue-500 {
     color: var(--color-blue-500);
   }
@@ -1163,16 +1439,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 +1594,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 +1614,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 +1628,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);
     }
@@ -1356,6 +1656,10 @@
       color: var(--color-red-500);
     }
 
+    .hover\:text-red-700:hover {
+      color: var(--color-red-700);
+    }
+
     .hover\:underline:hover {
       text-decoration-line: underline;
     }
@@ -1426,6 +1730,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 +3702,9 @@ body {
 }
 
 .switch-container {
+  align-items: center;
   width: 100%;
-  font-family: sans-serif;
+  display: flex;
 }
 
 .switch-group {
@@ -3419,11 +3728,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"] {
@@ -4189,7 +4498,6 @@ body {
   z-index: 0;
   box-sizing: border-box;
   width: 100%;
-  padding: 1.25rem;
   position: relative;
 }
 
@@ -4787,10 +5095,6 @@ body {
   position: relative;
 }
 
-.ck-powered-by {
-  display: none;
-}
-
 #ui-toast-backdrop {
   opacity: 0;
   pointer-events: none;
@@ -7904,7 +8208,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 +8232,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 */
@@ -8234,7 +8539,6 @@ body.toast-backdrop #ui-toast-backdrop {
 .page-layout {
   position: relative;
   width: 100%;
-  padding: 1.25rem; /* py-5 */
   z-index: 0;
   box-sizing: border-box;
 }
@@ -8840,7 +9144,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 +9944,47 @@ body.toast-backdrop #ui-toast-backdrop {
     transform: rotate(360deg);
   }
 }
+/* FullConfigPage Styles */
+.full-config-page {
+  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;