microboard-ui-temp 0.9.1 → 0.9.3

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

@@ -448,41 +448,6 @@ input:-webkit-autofill:active {
   --focus-outline-color: #e3d9ff;
 }
 
-.secondary_XNHIwg {
-  --background-color: #fff;
-  --background-hover-color: #f7f7f8;
-  --background-active-color: #f7f7f8;
-  --background-disabled-color: #fff;
-  --content-color: #14151a;
-  --content-hover-color: #14151a;
-  --content-active-color: #924fe8;
-  --content-disabled-color: #b1b3bb;
-  --focus-outline-color: #e3d9ff;
-}
-
-.tertiary_XNHIwg {
-  --background-color: #f5f6f7;
-  --background-hover-color: #ececee;
-  --background-active-color: #ececee;
-  --content-color: var(--text-base-primary);
-  --content-hover-color: var(--text-base-primary);
-  --content-active-color: var(--text-base-primary);
-  --content-disabled-color: var(--text-base-quaternary);
-  --focus-outline-color: #e3d9ff;
-}
-
-.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);
-  --content-disabled-color: var(--text-base-quaternary);
-  --focus-outline-color: #e3d9ff;
-}
-
 .radiusXl_XNHIwg {
   --radius: 12px;
 }
@@ -600,16 +565,38 @@ input:-webkit-autofill:active {
   padding: 0 4px;
 }
 
+.secondary_XNHIwg {
+  background-color: var(--background-button-secondary);
+  color: var(--text-base-primary);
+}
+
+@media (hover: hover) {
+  .secondary_XNHIwg:hover:not(:disabled) {
+    background-color: var(--background-button-secondary-hover);
+    color: var(--text-base-primary);
+  }
+}
+
+.secondary_XNHIwg:active:not(:disabled) {
+  color: #924fe8;
+  outline: 2px solid #c8b2ff80;
+}
+
+.secondary_XNHIwg:disabled {
+  background-color: var(--background-button-secondary);
+  color: var(--text-disabled);
+}
+
 .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 +604,46 @@ 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);
+}
+
+.black_XNHIwg {
+  background-color: var(--background-button-primary);
+  color: var(--color-button-primary);
+}
+
+@media (hover: hover) {
+  .black_XNHIwg:hover:not(:disabled) {
+    background-color: var(--background-button-primary-hover);
+    color: var(--color-button-primary);
+  }
+}
+
+.black_XNHIwg:disabled {
+  background-color: var(--border-action-normal);
+  color: var(--text-base-quaternary);
 }
 
 .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 +652,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 +678,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 +693,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;
@@ -2140,7 +2035,7 @@ body {
 }
 
 .shareButton_jFMnzg {
-  color: #fff;
+  color: var(--color-button-primary);
   border-radius: 10px;
   width: auto;
   height: 32px;
@@ -7701,6 +7596,7 @@ td.currentTariff_0VfwRg {
   display: flex;
   cursor: pointer;
   border: 1px solid var(--border-action-normal);
+  color: var(--text-base-primary);
   background: none;
   border-radius: 10px;
   flex: 1 0;
@@ -7759,7 +7655,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 +7669,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 +7696,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 +7728,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 +7742,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 +7757,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 +7779,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 +7803,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 +7817,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 +7837,7 @@ td.currentTariff_0VfwRg {
 }
 
 .placeholder_IZQRBA {
-  background-color: #c8cacf;
+  background-color: var(--border-action-normal);
   width: 100%;
   height: 2px;
 }
@@ -9250,10 +9146,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 +9168,7 @@ input.rename_i3VZwA {
 }
 
 .exportDropdown_i3VZwA > div:hover {
-  background-color: #0a0f290a;
+  background-color: var(--background-hover-subtle);
 }
 
 .exportDropdownItemTitle_i3VZwA {
@@ -9290,7 +9186,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-yrsgyj7d.js}

@@ -340871,9 +340871,6 @@ var import_react30 = __toESM(require_react(), 1);
 // src/shared/ui-lib/UiButton/UiButton.module.css
 var UiButton_module_default = {
   default: "default_XNHIwg",
-  secondary: "secondary_XNHIwg",
-  tertiary: "tertiary_XNHIwg",
-  black: "black_XNHIwg",
   radiusXl: "radiusXl_XNHIwg",
   radiusMd: "radiusMd_XNHIwg",
   radiusSm: "radiusSm_XNHIwg",
@@ -340890,9 +340887,12 @@ var UiButton_module_default = {
   active: "active_XNHIwg",
   disableBg: "disableBg_XNHIwg",
   hotkey: "hotkey_XNHIwg",
+  secondary: "secondary_XNHIwg",
   primary: "primary_XNHIwg",
   loading: "loading_XNHIwg",
+  black: "black_XNHIwg",
   quaternary: "quaternary_XNHIwg",
+  tertiary: "tertiary_XNHIwg",
   ghost: "ghost_XNHIwg",
   ghostFilled: "ghostFilled_XNHIwg",
   loader: "loader_XNHIwg"
@@ -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: {
@@ -447068,44 +447070,44 @@ var sprite_default = `<svg width="0" height="0" class="hidden">
   <symbol id="FrameCustom" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd"
       d="M19 5C19 4.44772 19.4477 4 20 4H22C22.5523 4 23 4.44772 23 5V7C23 7.55228 22.5523 8 22 8V16C22.5523 16 23 16.4477 23 17V19C23 19.5523 22.5523 20 22 20H20C19.4477 20 19 19.5523 19 19H5C5 19.5523 4.55228 20 4 20H2C1.44772 20 1 19.5523 1 19V17C1 16.4477 1.44772 16 2 16V8C1.44772 8 1 7.55228 1 7V5C1 4.44772 1.44772 4 2 4H4C4.55228 4 5 4.44772 5 5H19ZM4 8C4.55228 8 5 7.55228 5 7H19C19 7.55228 19.4477 8 20 8V16C19.4477 16 19 16.4477 19 17H5C5 16.4477 4.55228 16 4 16V8Z"
-      fill="#14151A" />
+      fill="currentColor" />
   </symbol>
   <symbol id="FrameA4" width="24" height="24" viewBox="0 0 24 24" fill="none"
     xmlns="http://www.w3.org/2000/svg">
     <path
       d="M15 2.003V2H4.00198C3.44998 2 2.99998 2.455 2.99998 2.992V21.008C3.00024 21.2712 3.10498 21.5235 3.29117 21.7095C3.47737 21.8955 3.72979 22 3.99298 22H20.007C20.1383 21.9991 20.2682 21.9723 20.3891 21.9212C20.5101 21.8701 20.6198 21.7957 20.712 21.7022C20.8042 21.6087 20.8771 21.4979 20.9265 21.3762C20.9759 21.2545 21.0009 21.1243 21 20.993V8L15 2.003ZM18.17 8H15V4.83L18.17 8ZM13 4V9C13 9.26522 13.1053 9.51957 13.2929 9.70711C13.4804 9.89464 13.7348 10 14 10H19V20H4.99998V4H13Z"
-      fill="#14151A" />
+      fill="currentColor" />
   </symbol>
 
   <symbol id="FrameLetter" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M15 2.003V2H4.00198C3.44998 2 2.99998 2.455 2.99998 2.992V21.008C3.00024 21.2712 3.10498 21.5235 3.29117 21.7095C3.47737 21.8955 3.72979 22 3.99298 22H20.007C20.1383 21.9991 20.2682 21.9723 20.3891 21.9212C20.5101 21.8701 20.6198 21.7957 20.712 21.7022C20.8042 21.6087 20.8771 21.4979 20.9265 21.3762C20.9759 21.2545 21.0009 21.1243 21 20.993V8L15 2.003ZM18.17 8H15V4.83L18.17 8ZM13 4V9C13 9.26522 13.1053 9.51957 13.2929 9.70711C13.4804 9.89464 13.7348 10 14 10H19V20H4.99998V4H13Z"
-      fill="#14151A" />
+      fill="currentColor" />
   </symbol>
   <symbol id="FrameFrame16x9" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M21 6H3V18H21V6ZM1 4V20H23V4H1Z" fill="#14151A" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M21 6H3V18H21V6ZM1 4V20H23V4H1Z" fill="currentColor" />
   </symbol>
   <symbol id="FrameFrame4x3" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd"
       d="M5 6V18H19V6H5ZM4 4C3.44772 4 3 4.44772 3 5V19C3 19.5523 3.44772 20 4 20H20C20.5523 20 21 19.5523 21 19V5C21 4.44772 20.5523 4 20 4H4Z"
-      fill="#14151A" />
+      fill="currentColor" />
   </symbol>
   <symbol id="FrameFrame1x1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd"
       d="M6 6V18H18V6H6ZM5 4C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H5Z"
-      fill="#14151A" />
+      fill="currentColor" />
   </symbol>
 
   <symbol id="FrameFrame9x18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd"
       d="M8 3L8 21H16V3H8ZM6 22C6 22.5523 6.44772 23 7 23H17C17.5523 23 18 22.5523 18 22V2C18 1.44772 17.5523 1 17 1H7C6.44772 1 6 1.44772 6 2L6 22Z"
-      fill="#14151A" />
+      fill="currentColor" />
   </symbol>
 
   <symbol id="FrameFrame3x2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd"
       d="M5.74592 6.24191V17.7576H18.2516V6.24191H5.74592ZM4.71678 4.25C4.18284 4.25 3.75 4.68197 3.75 5.21483V18.7852C3.75 19.318 4.18284 19.75 4.71678 19.75H19.2832C19.8172 19.75 20.25 19.318 20.25 18.7852V5.21483C20.25 4.68197 19.8172 4.25 19.2832 4.25H4.71678Z"
-      fill="black" />
+      fill="currentColor" />
   </symbol>
 
 

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-p8sb1ebp.css"><script src="/env.js"></script>
+<script type="module" crossorigin src="/chunk-yrsgyj7d.js"></script></head>
 
   <body
     style="