@oliasoft-open-source/react-ui-library 4.0.0-beta-22 → 4.0.0-beta-24

package/dist/global.css

@@ -8527,121 +8527,122 @@ button:active .remirror-menu-pane-shortcut,
   min-height: 0;
   flex-shrink: 0;
 }
-._inputInTable_kett7_1 {
+._inputInTable_19p7c_1 {
   background-color: transparent;
   border-radius: inherit !important;
   height: var(--size);
   min-height: 100%;
 }
-._inputInTable_kett7_1:not(:hover) {
+._inputInTable_19p7c_1:not(:hover) {
   border-color: transparent;
 }
-._inputInTable_kett7_1:not(:focus) {
+._inputInTable_19p7c_1:not(:focus) {
   box-shadow: none;
 }
-._inputHover_kett7_13 {
+._inputHover_19p7c_13 {
   position: relative;
   border-color: var(--color-border-hover);
   z-index: 2;
 }
-._inputFocus_kett7_18 {
+._inputFocus_19p7c_18 {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputError_kett7_25,
-._inputWarning_kett7_26 {
+._inputError_19p7c_25,
+._inputWarning_19p7c_26 {
   position: relative;
 }
-._inputError_kett7_25 {
+._inputError_19p7c_25 {
   z-index: 2;
   border-color: var(--color-border-error);
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error);
 }
-._inputError_kett7_25:hover {
+._inputError_19p7c_25:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._inputError_kett7_25:focus {
+._inputError_19p7c_25:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputWarning_kett7_26 {
+._inputWarning_19p7c_26 {
   z-index: 1;
   border-color: var(--color-border-warning);
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning);
 }
-._inputWarning_kett7_26:hover {
+._inputWarning_19p7c_26:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._inputWarning_kett7_26:focus {
+._inputWarning_19p7c_26:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputDisabled_kett7_61 {
+._inputDisabled_19p7c_61 {
   pointer-events: none;
   background-color: var(--color-background-disabled);
   color: var(--color-text-muted);
   box-shadow: none;
 }
-._hideScrollbars_kett7_67 {
+._hideScrollbars_19p7c_67 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbars_kett7_67::-webkit-scrollbar {
+._hideScrollbars_19p7c_67::-webkit-scrollbar {
   display: none;
 }
 :root {
+  --size-sidebar: var(--size-xl);
   --color-background-sidebar: var(--color-neutral-1000);
 }
-._sidebar_kett7_80 {
+._sidebar_19p7c_81 {
   background-color: var(--color-background-sidebar);
   color: white;
   position: relative;
   padding: var(--padding-y) 0;
 }
 @media print {
-  ._sidebar_kett7_80 {
+  ._sidebar_19p7c_81 {
     display: none;
   }
 }
-._inner_kett7_91 {
+._inner_19p7c_92 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._inner_kett7_91::-webkit-scrollbar {
+._inner_19p7c_92::-webkit-scrollbar {
   display: none;
 }
-._title_kett7_101,
-._subtitle_kett7_102,
-._label_kett7_103 {
+._title_19p7c_102,
+._subtitle_19p7c_103,
+._label_19p7c_104 {
   transition: opacity 0.2s, max-height 0.2s, margin 0.2s, color 0.2s;
   max-height: 50px;
 }
-._collapsed_kett7_107 ._title_kett7_101,
-._collapsed_kett7_107 ._subtitle_kett7_102,
-._collapsed_kett7_107 ._label_kett7_103 {
+._collapsed_19p7c_108 ._title_19p7c_102,
+._collapsed_19p7c_108 ._subtitle_19p7c_103,
+._collapsed_19p7c_108 ._label_19p7c_104 {
   opacity: 0;
   max-height: 0;
   margin-bottom: 0;
   margin-top: 0;
 }
-._title_kett7_101 {
+._title_19p7c_102 {
   overflow: hidden;
   max-width: 100%;
   text-overflow: ellipsis;
@@ -8650,7 +8651,7 @@ button:active .remirror-menu-pane-shortcut,
   font-size: var(--font-size-lg);
   padding: 0 var(--padding-x);
 }
-._subtitle_kett7_102 {
+._subtitle_19p7c_103 {
   margin-bottom: var(--padding-y);
   white-space: nowrap;
   font-size: var(--font-size-sm);
@@ -8658,11 +8659,11 @@ button:active .remirror-menu-pane-shortcut,
   opacity: 0.6;
   padding: 0 var(--padding-x);
 }
-._list_kett7_132 {
+._list_19p7c_133 {
   margin-bottom: var(--padding-y);
   margin-top: 0;
 }
-._item_kett7_136 {
+._item_19p7c_137 {
   min-height: var(--size-lg);
   transition: padding 0.2s;
   font-size: var(--font-size-lg);
@@ -8672,30 +8673,30 @@ button:active .remirror-menu-pane-shortcut,
   padding: 0 var(--padding-x);
   align-items: center;
 }
-._collapsed_kett7_107 ._item_kett7_136 {
+._collapsed_19p7c_108 ._item_19p7c_137 {
   padding: 0 9px;
 }
-._item_kett7_136:focus {
+._item_19p7c_137:focus {
   outline: none;
 }
-._item_kett7_136::-moz-focus-inner {
+._item_19p7c_137::-moz-focus-inner {
   border: 0;
 }
-._item_kett7_136:hover,
-._item_kett7_136:focus {
+._item_19p7c_137:hover,
+._item_19p7c_137:focus {
   color: var(--color-primary-400);
 }
-._item_kett7_136:active {
+._item_19p7c_137:active {
   color: var(--color-primary-300);
 }
-._item_kett7_136._active_kett7_162 {
+._item_19p7c_137._active_19p7c_163 {
   color: white;
   background: black;
 }
-._item_kett7_136._experimental_kett7_166 {
+._item_19p7c_137._experimental_19p7c_167 {
   background: #40130b;
 }
-._icon_kett7_169 {
+._icon_19p7c_170 {
   margin-right: var(--spacing-3);
   line-height: 0;
   flex-shrink: 0;
@@ -8703,23 +8704,23 @@ button:active .remirror-menu-pane-shortcut,
   opacity: 0.4;
   display: block;
 }
-._item_kett7_136:hover ._icon_kett7_169,
-._item_kett7_136:focus ._icon_kett7_169 {
+._item_19p7c_137:hover ._icon_19p7c_170,
+._item_19p7c_137:focus ._icon_19p7c_170 {
   opacity: 0.6;
 }
-._item_kett7_136:active ._icon_kett7_169 {
+._item_19p7c_137:active ._icon_19p7c_170 {
   opacity: 0.8;
 }
-._item_kett7_136._active_kett7_162 ._icon_kett7_169 {
+._item_19p7c_137._active_19p7c_163 ._icon_19p7c_170 {
   opacity: 1;
 }
-._icon_kett7_169 > * {
+._icon_19p7c_170 > * {
   opacity: 1;
 }
-._icon_kett7_169 > span {
+._icon_19p7c_170 > span {
   display: block;
 }
-._label_kett7_103 {
+._label_19p7c_104 {
   white-space: nowrap;
   overflow: hidden;
 }
@@ -10565,12 +10566,13 @@ tbody ._staticCell_hyzeo_116 ._staticCellContent_hyzeo_119 {
   margin: 0;
 }
 :root {
+  --size-topbar: var(--size-xl);
   --color-link-border-hover: var(--color-neutral-100);
 }
 [data-theme='dark'] {
   --color-link-border-hover: var(--color-neutral-600);
 }
-._topbar_hthqn_7 {
+._topbar_uzfj5_8 {
   top: 0;
   left: 0;
   z-index: var(--zindex-topbar);
@@ -10579,15 +10581,15 @@ tbody ._staticCell_hyzeo_116 ._staticCellContent_hyzeo_119 {
   background: var(--color-background-raised);
   display: flex;
 }
-._topbar_hthqn_7._fixed_hthqn_16 {
+._topbar_uzfj5_8._fixed_uzfj5_17 {
   position: fixed;
 }
 @media print {
-  ._topbar_hthqn_7 {
+  ._topbar_uzfj5_8 {
     display: none !important;
   }
 }
-._appSwitcher_hthqn_24 {
+._appSwitcher_uzfj5_25 {
   color: white;
   display: flex;
   align-items: center;
@@ -10596,22 +10598,22 @@ tbody ._staticCell_hyzeo_116 ._staticCellContent_hyzeo_119 {
   background-color: var(--color-neutral-700);
   aspect-ratio: 1;
 }
-._appSwitcher_hthqn_24:hover {
+._appSwitcher_uzfj5_25:hover {
   background-color: var(--color-neutral-750);
 }
-._appSwitcher_hthqn_24:active {
+._appSwitcher_uzfj5_25:active {
   background-color: var(--color-neutral-800);
 }
-[data-theme='dark'] ._appSwitcher_hthqn_24 {
+[data-theme='dark'] ._appSwitcher_uzfj5_25 {
   background-color: var(--color-neutral-900);
 }
-[data-theme='dark'] ._appSwitcher_hthqn_24:hover {
+[data-theme='dark'] ._appSwitcher_uzfj5_25:hover {
   background-color: var(--color-neutral-950);
 }
-[data-theme='dark'] ._appSwitcher_hthqn_24:active {
+[data-theme='dark'] ._appSwitcher_uzfj5_25:active {
   background-color: var(--color-neutral-1000);
 }
-._title_hthqn_48 {
+._title_uzfj5_49 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10619,55 +10621,55 @@ tbody ._staticCell_hyzeo_116 ._staticCellContent_hyzeo_119 {
   padding: 0;
   position: relative;
 }
-._title_hthqn_48 img,
-._title_hthqn_48 svg {
+._title_uzfj5_49 img,
+._title_uzfj5_49 svg {
   max-height: var(--size-lg);
   max-width: 300px;
   height: auto;
   width: auto;
   color: var(--color-text);
 }
-._title_hthqn_48 ._logo_hthqn_64 {
+._title_uzfj5_49 ._logo_uzfj5_65 {
   display: flex;
 }
-._title_hthqn_48 ._label_hthqn_67 {
+._title_uzfj5_49 ._label_uzfj5_68 {
   color: var(--color-text);
   white-space: nowrap;
   font-weight: bold;
 }
-._brand_hthqn_72 {
+._brand_uzfj5_73 {
   padding: 0;
   position: relative;
   flex-shrink: 0;
 }
-._version_hthqn_77 {
+._version_uzfj5_78 {
   line-height: 1;
   position: absolute;
   right: 0;
   bottom: 100%;
   font-size: var(--font-size-xs);
 }
-._left_hthqn_84,
-._right_hthqn_85 {
+._left_uzfj5_85,
+._right_uzfj5_86 {
   display: flex;
   min-width: 0;
 }
-._left_hthqn_84 {
+._left_uzfj5_85 {
   gap: var(--spacing-4);
   padding-left: var(--spacing-4);
 }
-._right_hthqn_85 {
+._right_uzfj5_86 {
   margin-left: auto;
   flex-shrink: 0;
   padding-right: var(--spacing-2);
   gap: var(--spacing-2);
 }
-._item_hthqn_99,
-._link_hthqn_100 {
+._item_uzfj5_100,
+._link_uzfj5_101 {
   align-items: center;
   display: flex;
 }
-._item_hthqn_99 {
+._item_uzfj5_100 {
   position: relative;
   transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
   user-select: none;
@@ -10675,18 +10677,18 @@ tbody ._staticCell_hyzeo_116 ._staticCellContent_hyzeo_119 {
   min-width: 0;
   max-width: 50vw;
 }
-._item_hthqn_99._button_hthqn_112,
-._item_hthqn_99._menu_hthqn_113 {
+._item_uzfj5_100._button_uzfj5_113,
+._item_uzfj5_100._menu_uzfj5_114 {
   flex-shrink: 0;
 }
-._label_hthqn_67 {
+._label_uzfj5_68 {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   display: block;
   max-width: 100%;
 }
-._link_hthqn_100 {
+._link_uzfj5_101 {
   text-decoration: none;
   color: var(--color-text-primary);
   cursor: pointer;
@@ -10694,24 +10696,24 @@ tbody ._staticCell_hyzeo_116 ._staticCellContent_hyzeo_119 {
   font-weight: bold;
   height: 100%;
 }
-._link_hthqn_100 svg {
+._link_uzfj5_101 svg {
   margin-right: var(--spacing-1);
   flex-shrink: 0;
 }
-._link_hthqn_100:hover {
+._link_uzfj5_101:hover {
   color: var(--color-text-primary-hover);
 }
-._link_hthqn_100:active {
+._link_uzfj5_101:active {
   color: var(--color-text-primary-active);
 }
-._link_hthqn_100._active_hthqn_141 {
+._link_uzfj5_101._active_uzfj5_142 {
   color: var(--color-text);
 }
-._link_hthqn_100:hover,
-._link_hthqn_100._active_hthqn_141 {
+._link_uzfj5_101:hover,
+._link_uzfj5_101._active_uzfj5_142 {
   background-color: transparent;
 }
-._link_hthqn_100:after {
+._link_uzfj5_101:after {
   content: '';
   position: absolute;
   left: 0;
@@ -10719,17 +10721,17 @@ tbody ._staticCell_hyzeo_116 ._staticCellContent_hyzeo_119 {
   bottom: 0;
   border-bottom: 2px solid transparent;
 }
-._link_hthqn_100:hover:after {
+._link_uzfj5_101:hover:after {
   border-color: var(--color-link-border-hover);
 }
-._link_hthqn_100._active_hthqn_141:after {
+._link_uzfj5_101._active_uzfj5_142:after {
   border-color: var(--color-background-primary);
 }
-._link_hthqn_100[disabled] {
+._link_uzfj5_101[disabled] {
   pointer-events: none;
   color: var(--color-text-faint);
 }
-._alert_hthqn_166 {
+._alert_uzfj5_167 {
   background-color: var(--color-background-primary);
   color: white;
   text-align: center;

package/dist/index.js

@@ -57019,24 +57019,24 @@ var reactFastCompare = function isEqual3(a2, b2) {
     throw error2;
   }
 };
-const inputInTable$3 = "_inputInTable_kett7_1";
-const inputHover$3 = "_inputHover_kett7_13";
-const inputFocus$3 = "_inputFocus_kett7_18";
-const inputError$3 = "_inputError_kett7_25";
-const inputWarning$3 = "_inputWarning_kett7_26";
-const inputDisabled$3 = "_inputDisabled_kett7_61";
-const hideScrollbars$3 = "_hideScrollbars_kett7_67";
-const sidebar = "_sidebar_kett7_80";
-const inner = "_inner_kett7_91";
-const title$2 = "_title_kett7_101";
-const subtitle = "_subtitle_kett7_102";
-const label$2 = "_label_kett7_103";
-const collapsed = "_collapsed_kett7_107";
-const list = "_list_kett7_132";
-const item$2 = "_item_kett7_136";
-const active$2 = "_active_kett7_162";
-const experimental = "_experimental_kett7_166";
-const icon$1 = "_icon_kett7_169";
+const inputInTable$3 = "_inputInTable_19p7c_1";
+const inputHover$3 = "_inputHover_19p7c_13";
+const inputFocus$3 = "_inputFocus_19p7c_18";
+const inputError$3 = "_inputError_19p7c_25";
+const inputWarning$3 = "_inputWarning_19p7c_26";
+const inputDisabled$3 = "_inputDisabled_19p7c_61";
+const hideScrollbars$3 = "_hideScrollbars_19p7c_67";
+const sidebar = "_sidebar_19p7c_81";
+const inner = "_inner_19p7c_92";
+const title$2 = "_title_19p7c_102";
+const subtitle = "_subtitle_19p7c_103";
+const label$2 = "_label_19p7c_104";
+const collapsed = "_collapsed_19p7c_108";
+const list = "_list_19p7c_133";
+const item$2 = "_item_19p7c_137";
+const active$2 = "_active_19p7c_163";
+const experimental = "_experimental_19p7c_167";
+const icon$1 = "_icon_19p7c_170";
 const styles$c = {
   inputInTable: inputInTable$3,
   inputHover: inputHover$3,
@@ -57156,7 +57156,7 @@ const SideBar = memo(
       open: isOpen2,
       top: top2,
       background: "var(--color-background-sidebar)",
-      closedWidth: "var(--size-xl)",
+      closedWidth: "var(--size-sidebar)",
       enableButton: visible,
       buttonPosition: "bottom",
       buttonAnimate: true,
@@ -62448,22 +62448,22 @@ Toggle.propTypes = {
   helpText: propTypes$1.exports.string,
   onClickHelp: propTypes$1.exports.func
 };
-const topbar = "_topbar_hthqn_7";
-const fixed = "_fixed_hthqn_16";
-const appSwitcher = "_appSwitcher_hthqn_24";
-const title = "_title_hthqn_48";
-const logo = "_logo_hthqn_64";
-const label = "_label_hthqn_67";
-const brand = "_brand_hthqn_72";
-const version = "_version_hthqn_77";
-const left = "_left_hthqn_84";
-const right = "_right_hthqn_85";
-const item = "_item_hthqn_99";
-const link = "_link_hthqn_100";
-const button = "_button_hthqn_112";
-const menu = "_menu_hthqn_113";
-const active = "_active_hthqn_141";
-const alert = "_alert_hthqn_166";
+const topbar = "_topbar_uzfj5_8";
+const fixed = "_fixed_uzfj5_17";
+const appSwitcher = "_appSwitcher_uzfj5_25";
+const title = "_title_uzfj5_49";
+const logo = "_logo_uzfj5_65";
+const label = "_label_uzfj5_68";
+const brand = "_brand_uzfj5_73";
+const version = "_version_uzfj5_78";
+const left = "_left_uzfj5_85";
+const right = "_right_uzfj5_86";
+const item = "_item_uzfj5_100";
+const link = "_link_uzfj5_101";
+const button = "_button_uzfj5_113";
+const menu = "_menu_uzfj5_114";
+const active = "_active_uzfj5_142";
+const alert = "_alert_uzfj5_167";
 const styles$2 = {
   topbar,
   fixed,