microboard-ui-temp 0.9.1 → 0.9.2

package/dist/{chunk-t7qyvg3g.css → chunk-ra6rxe11.css}

@@ -449,21 +449,21 @@ input:-webkit-autofill:active {
 }
 
 .secondary_XNHIwg {
-  --background-color: #fff;
-  --background-hover-color: #f7f7f8;
-  --background-active-color: #f7f7f8;
-  --background-disabled-color: #fff;
-  --content-color: #14151a;
-  --content-hover-color: #14151a;
+  --background-color: var(--background-button-secondary);
+  --background-hover-color: var(--background-button-secondary-hover);
+  --background-active-color: var(--background-button-secondary-hover);
+  --background-disabled-color: var(--background-button-secondary);
+  --content-color: var(--text-base-primary);
+  --content-hover-color: var(--text-base-primary);
   --content-active-color: #924fe8;
-  --content-disabled-color: #b1b3bb;
+  --content-disabled-color: var(--text-disabled);
   --focus-outline-color: #e3d9ff;
 }
 
 .tertiary_XNHIwg {
-  --background-color: #f5f6f7;
-  --background-hover-color: #ececee;
-  --background-active-color: #ececee;
+  --background-color: var(--background-button-tertiary);
+  --background-hover-color: var(--background-button-tertiary-hover);
+  --background-active-color: var(--background-button-tertiary-hover);
   --content-color: var(--text-base-primary);
   --content-hover-color: var(--text-base-primary);
   --content-active-color: var(--text-base-primary);
@@ -472,13 +472,13 @@ input:-webkit-autofill:active {
 }
 
 .black_XNHIwg {
-  --background-color: #14151a;
-  --background-hover-color: #1f2228;
-  --background-active-color: #ececee;
-  --background-disabled-color: #e9eaec;
-  --content-color: #fff;
-  --content-hover-color: var(--text-base-primary);
-  --content-active-color: var(--text-base-primary);
+  --background-color: var(--background-button-primary);
+  --background-hover-color: var(--background-button-primary-hover);
+  --background-active-color: var(--background-button-primary-hover);
+  --background-disabled-color: var(--border-action-normal);
+  --content-color: var(--color-button-primary);
+  --content-hover-color: var(--color-button-primary);
+  --content-active-color: var(--color-button-primary);
   --content-disabled-color: var(--text-base-quaternary);
   --focus-outline-color: #e3d9ff;
 }
@@ -601,15 +601,15 @@ input:-webkit-autofill:active {
 }
 
 .primary_XNHIwg {
-  color: #fff;
-  background-color: #14151a;
-  border: 1px solid #14151a;
+  border: 1px solid var(--background-button-primary);
+  background-color: var(--background-button-primary);
+  color: var(--color-button-primary);
   box-shadow: 0 1px 2px #14151a0d;
 }
 
 .primary_XNHIwg:hover:not(:disabled) {
-  color: #fff;
-  background-color: #1f2228;
+  background-color: var(--background-button-primary-hover);
+  color: var(--color-button-primary);
 }
 
 .primary_XNHIwg:active:not(:disabled) {
@@ -617,29 +617,29 @@ input:-webkit-autofill:active {
 }
 
 .primary_XNHIwg:disabled, .primary_XNHIwg:disabled:hover {
-  color: #0a0f2940;
-  background-color: #e9eaec;
-  border-color: #e9eaec;
+  border-color: var(--border-action-normal);
+  background-color: var(--border-action-normal);
+  color: var(--text-base-quaternary);
 }
 
 .primary_XNHIwg.loading_XNHIwg {
-  color: #fff;
-  background-color: #14151a;
-  border-color: #14151a;
+  border-color: var(--background-button-primary);
+  background-color: var(--background-button-primary);
+  color: var(--color-button-primary);
 }
 
 .quaternary_XNHIwg, .quaternary_XNHIwg:disabled {
-  color: #14151a;
-  background-color: #0a0f290a;
+  color: var(--text-base-primary);
+  background-color: var(--background-hover-subtle);
 }
 
 .quaternary_XNHIwg:disabled {
-  color: #0a0f2940;
+  color: var(--text-disabled);
 }
 
 .quaternary_XNHIwg:hover:not(:disabled) {
-  color: #14151a;
-  background-color: #0a0f2914;
+  color: var(--text-base-primary);
+  background-color: var(--background-hover-subtle-strong);
 }
 
 .quaternary_XNHIwg:active:not(:disabled), .tertiary_XNHIwg:active:not(:disabled) {
@@ -648,24 +648,24 @@ input:-webkit-autofill:active {
 }
 
 .tertiary_XNHIwg {
-  color: #14151a;
-  background-color: #fff;
-  border: 1px solid #dee0e3;
+  color: var(--text-base-primary);
+  background-color: var(--background-button-tertiary);
+  border: 1px solid var(--border-action-normal);
 }
 
 .tertiary_XNHIwg:hover:not(:disabled) {
-  background-color: #f7f7f8;
+  background-color: var(--background-button-tertiary-hover);
 }
 
 .ghost_XNHIwg {
-  color: #0f132499;
+  color: var(--text-base-secondary);
   background-color: #0000;
   font-weight: 600;
 }
 
 .ghost_XNHIwg:hover {
-  color: #0a0f2999;
-  background-color: #0a0f290a;
+  color: var(--text-base-secondary);
+  background-color: var(--background-hover-subtle);
 }
 
 .ghost_XNHIwg:active {
@@ -674,12 +674,12 @@ input:-webkit-autofill:active {
 }
 
 .ghost_XNHIwg:disabled {
-  color: #0a0f2940;
+  color: var(--text-disabled);
 }
 
 .ghostFilled_XNHIwg {
-  color: #0a0f2999;
-  background-color: #0a0f290a;
+  color: var(--text-base-secondary);
+  background-color: var(--background-hover-subtle);
   font-weight: 600;
 }
 
@@ -689,118 +689,9 @@ input:-webkit-autofill:active {
 }
 
 .ghostFilled_XNHIwg:disabled {
-  color: #0a0f2940;
-}
-
-.button_XNHIwg.secondary_XNHIwg {
-  background-color: var(--background-button-secondary);
-  color: var(--text-base-primary);
-}
-
-@media (hover: hover) {
-  .button_XNHIwg.secondary_XNHIwg:hover:not(:disabled) {
-    background-color: var(--background-button-secondary-hover);
-    color: var(--text-base-primary);
-  }
-}
-
-.button_XNHIwg.secondary_XNHIwg:active:not([disabled]), .button_XNHIwg.secondary_XNHIwg.active_XNHIwg:not([disabled]) {
-  background-color: var(--background-button-secondary-hover);
-  color: var(--border-action-focus);
-}
-
-.button_XNHIwg.secondary_XNHIwg:disabled {
-  background-color: var(--background-button-secondary);
   color: var(--text-disabled);
 }
 
-.button_XNHIwg.tertiary_XNHIwg {
-  background-color: var(--background-button-tertiary);
-  color: var(--text-base-primary);
-  border: 1px solid var(--border-action-normal);
-}
-
-@media (hover: hover) {
-  .button_XNHIwg.tertiary_XNHIwg:hover:not(:disabled) {
-    background-color: var(--background-button-tertiary-hover);
-  }
-}
-
-.button_XNHIwg.tertiary_XNHIwg:disabled {
-  background-color: var(--background-button-tertiary);
-  color: var(--text-disabled);
-}
-
-.button_XNHIwg.ghost_XNHIwg {
-  color: var(--text-base-secondary);
-  background-color: #0000;
-}
-
-@media (hover: hover) {
-  .button_XNHIwg.ghost_XNHIwg:hover {
-    color: var(--text-base-secondary);
-    background-color: var(--background-hover-subtle);
-  }
-}
-
-.button_XNHIwg.ghost_XNHIwg:disabled {
-  color: var(--text-base-quaternary);
-}
-
-.button_XNHIwg.ghostFilled_XNHIwg {
-  color: var(--text-base-secondary);
-  background-color: var(--background-hover-subtle);
-}
-
-.button_XNHIwg.ghostFilled_XNHIwg:disabled {
-  color: var(--text-base-quaternary);
-}
-
-.button_XNHIwg.quaternary_XNHIwg, .button_XNHIwg.quaternary_XNHIwg:disabled {
-  color: var(--text-base-primary);
-  background-color: var(--background-hover-subtle);
-}
-
-.button_XNHIwg.quaternary_XNHIwg:disabled {
-  color: var(--text-base-quaternary);
-}
-
-@media (hover: hover) {
-  .button_XNHIwg.quaternary_XNHIwg:hover:not(:disabled) {
-    color: var(--text-base-primary);
-    background-color: var(--background-hover-subtle-strong);
-  }
-}
-
-.button_XNHIwg.primary_XNHIwg {
-  border: 1px solid var(--background-button-primary);
-  background-color: var(--background-button-primary);
-  color: var(--color-button-primary);
-}
-
-.button_XNHIwg.primary_XNHIwg:hover:not(:disabled) {
-  background-color: var(--background-button-primary-hover);
-  color: var(--color-button-primary);
-}
-
-.button_XNHIwg.primary_XNHIwg:disabled {
-  border-color: var(--border-action-normal);
-  background-color: var(--border-action-normal);
-  color: var(--text-base-quaternary);
-}
-
-.button_XNHIwg.black_XNHIwg {
-  background-color: var(--background-button-primary);
-  color: var(--color-button-primary);
-}
-
-@media (hover: hover) {
-  .button_XNHIwg.black_XNHIwg:hover {
-    background-color: var(--background-button-primary-hover);
-    color: var(--color-button-primary);
-  }
-}
-
 .loader_XNHIwg {
   display: flex;
   animation: rotate 2s linear infinite;
@@ -7759,7 +7650,7 @@ td.currentTariff_0VfwRg {
 
 .header_iZlcpA {
   display: flex;
-  color: #14151a;
+  color: var(--text-base-primary);
   cursor: pointer;
   border-radius: 10px;
   align-items:  center;
@@ -7773,24 +7664,24 @@ td.currentTariff_0VfwRg {
 }
 
 .header_iZlcpA.over_iZlcpA {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
 }
 
 @media screen and (hover: hover) {
   .header_iZlcpA:hover {
-    background-color: #0a0f290a;
+    background-color: var(--background-hover-subtle);
   }
 }
 
 .icon_iZlcpA {
-  color: #696b75;
+  color: var(--icon-base-secondary);
   display: flex;
   align-items:  center;
   gap: 4px;
 }
 
 .noContent_iZlcpA {
-  color: #0a0f2940;
+  color: var(--text-disabled);
   font-size: 14px;
   font-weight: 500;
 }
@@ -7800,8 +7691,8 @@ td.currentTariff_0VfwRg {
 }
 
 .content_iZlcpA {
+  border-left: 1px solid var(--border-action-normal);
   display: flex;
-  border-left: 1px solid #dee0e3;
   flex-direction: column;
   gap: 2px;
   padding-left: 6px;
@@ -7832,7 +7723,7 @@ td.currentTariff_0VfwRg {
 .contextMenuBtn_iZlcpA {
   position: absolute;
   cursor: pointer;
-  color: #696b76;
+  color: var(--icon-base-secondary);
   z-index: 5;
   display: none;
   border-radius: 4px;
@@ -7846,11 +7737,11 @@ td.currentTariff_0VfwRg {
 
 @media screen and (hover: hover) {
   .header_iZlcpA:hover, .contextMenuBtn_iZlcpA:hover ~ .header_iZlcpA {
-    background-color: #0a0f290a;
+    background-color: var(--background-hover-subtle);
   }
 
   .contextMenuBtn_iZlcpA:hover {
-    background-color: #0a0f2914;
+    background-color: var(--background-hover-subtle-strong);
   }
 
   .wrapper_iZlcpA:hover .contextMenuBtn_iZlcpA, .contextMenuBtn_iZlcpA:hover {
@@ -7861,14 +7752,14 @@ td.currentTariff_0VfwRg {
 /* src/entities/Folder/FolderItem.module.css */
 .wrapper_IZQRBA {
   position: relative;
-  background-color: #fff;
+  background-color: var(--background-surface-default);
 }
 
 .item_IZQRBA {
   display: flex;
   position: relative;
   overflow: visible;
-  color: #0f132499;
+  color: var(--text-base-secondary);
   cursor: pointer;
   position: relative;
   border-radius: 10px;
@@ -7883,13 +7774,13 @@ td.currentTariff_0VfwRg {
 }
 
 .icon_IZQRBA {
-  color: #696b76;
+  color: var(--icon-base-secondary);
   display: grid;
   place-items:  center;
 }
 
 .active_IZQRBA, .dragging_IZQRBA {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
 }
 
 .active_IZQRBA:before {
@@ -7907,7 +7798,7 @@ td.currentTariff_0VfwRg {
 .contextMenuBtn_IZQRBA {
   position: absolute;
   cursor: pointer;
-  color: #696b76;
+  color: var(--icon-base-secondary);
   z-index: 5;
   display: none;
   border-radius: 4px;
@@ -7921,11 +7812,11 @@ td.currentTariff_0VfwRg {
 
 @media screen and (hover: hover) {
   .item_IZQRBA:hover:not(.disableHover_IZQRBA), .contextMenuBtn_IZQRBA:hover ~ .item_IZQRBA:not(.disableHover_IZQRBA) {
-    background-color: #0a0f290a;
+    background-color: var(--background-hover-subtle);
   }
 
   .contextMenuBtn_IZQRBA:hover {
-    background-color: #0a0f2914;
+    background-color: var(--background-hover-subtle-strong);
   }
 
   .wrapper_IZQRBA:hover .contextMenuBtn_IZQRBA, .contextMenuBtn_IZQRBA:hover {
@@ -7941,7 +7832,7 @@ td.currentTariff_0VfwRg {
 }
 
 .placeholder_IZQRBA {
-  background-color: #c8cacf;
+  background-color: var(--border-action-normal);
   width: 100%;
   height: 2px;
 }
@@ -9250,10 +9141,10 @@ input.rename_i3VZwA {
 .exportDropdown_i3VZwA {
   position: absolute;
   top: calc(100% + var(--absolute-position-panel-padding));
+  background-color: var(--background-surface-default);
+  border: 1px solid var(--border-action-normal);
   display: flex;
   z-index: 100;
-  background-color: #fff;
-  border: 1px solid #cccccc80;
   border-radius: 8px;
   flex-direction: column;
   gap: 5px;
@@ -9272,7 +9163,7 @@ input.rename_i3VZwA {
 }
 
 .exportDropdown_i3VZwA > div:hover {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
 }
 
 .exportDropdownItemTitle_i3VZwA {
@@ -9290,7 +9181,7 @@ input.rename_i3VZwA {
 }
 
 .exportDropdown_i3VZwA p {
-  color: #14151a;
+  color: var(--text-base-primary);
   margin: 0;
   font-size: 14px;
   line-height: 20px;

package/dist/{chunk-b5xd0djw.js → chunk-sdy0vgy6.js}

@@ -437242,7 +437242,7 @@ function ExportDropdown({
   openShareSnapshot
 }) {
   const { t: t11 } = useTranslation();
-  const [position5, setPosition] = import_react320.useState({ top: 0, left: 0 });
+  const [position5, setPosition] = import_react320.useState(null);
   import_react320.useEffect(() => {
     if (buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect();
@@ -437252,6 +437252,8 @@ function ExportDropdown({
       });
     }
   }, [buttonRef]);
+  if (!position5)
+    return null;
   return import_react_dom14.createPortal(/* @__PURE__ */ import_react320.default.createElement("div", {
     className: TitlePanel_module_default.exportDropdown,
     style: {

package/dist/example.html

@@ -31,8 +31,8 @@
       rel="stylesheet"
     />
     
-  <link rel="stylesheet" crossorigin href="/chunk-t7qyvg3g.css"><script src="/env.js"></script>
-<script type="module" crossorigin src="/chunk-b5xd0djw.js"></script></head>
+  <link rel="stylesheet" crossorigin href="/chunk-ra6rxe11.css"><script src="/env.js"></script>
+<script type="module" crossorigin src="/chunk-sdy0vgy6.js"></script></head>
 
   <body
     style="