@oliasoft-open-source/react-ui-library 4.0.0-beta-32 → 4.0.0-beta-33

package/dist/global.css

@@ -1876,83 +1876,84 @@ html[data-theme='dark'] {
 ._footer_bamra_47 button:not(:last-child) {
   margin-right: var(--margin);
 }
-._inputInTable_1yqw7_1 {
+._inputInTable_1jtrv_1 {
   background-color: transparent;
   border-radius: inherit !important;
   height: var(--size);
   min-height: 100%;
 }
-._inputInTable_1yqw7_1:not(:hover) {
+._inputInTable_1jtrv_1:not(:hover) {
   border-color: transparent;
 }
-._inputInTable_1yqw7_1:not(:focus) {
+._inputInTable_1jtrv_1:not(:focus) {
   box-shadow: none;
 }
-._inputHover_1yqw7_13 {
+._inputHover_1jtrv_13 {
   position: relative;
   border-color: var(--color-border-hover);
   z-index: 2;
 }
-._inputFocus_1yqw7_18 {
+._inputFocus_1jtrv_18 {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputError_1yqw7_25,
-._inputWarning_1yqw7_26 {
+._inputError_1jtrv_25,
+._inputWarning_1jtrv_26 {
   position: relative;
 }
-._inputError_1yqw7_25 {
+._inputError_1jtrv_25 {
   z-index: 2;
   border-color: var(--color-border-error);
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error);
 }
-._inputError_1yqw7_25:hover {
+._inputError_1jtrv_25:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._inputError_1yqw7_25:focus {
+._inputError_1jtrv_25:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputWarning_1yqw7_26 {
+._inputWarning_1jtrv_26 {
   z-index: 1;
   border-color: var(--color-border-warning);
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning);
 }
-._inputWarning_1yqw7_26:hover {
+._inputWarning_1jtrv_26:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._inputWarning_1yqw7_26:focus {
+._inputWarning_1jtrv_26:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputDisabled_1yqw7_61 {
+._inputDisabled_1jtrv_61 {
   pointer-events: none;
   background-color: var(--color-background-disabled);
   color: var(--color-text-muted);
   box-shadow: none;
 }
-._hideScrollbars_1yqw7_67 {
+._hideScrollbars_1jtrv_67 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbars_1yqw7_67::-webkit-scrollbar {
+._hideScrollbars_1jtrv_67::-webkit-scrollbar {
   display: none;
 }
 :root {
+  --size-drawer-tabs: var(--size-lg);
   --color-background-drawer-tabs: var(--color-neutral-50);
   --color-background-drawer-tab: var(--color-primary-50);
   --color-background-drawer-tab-hover: white;
@@ -1966,37 +1967,37 @@ html[data-theme='dark'] {
   --color-border-drawer-tab: var(--color-primary-750);
   --color-background-drawer-handle-hover: rgba(255, 255, 255, 0.1);
 }
-._inline_1yqw7_91 {
+._inline_1jtrv_92 {
   position: relative;
 }
-._inline_1yqw7_91._left_1yqw7_94 {
+._inline_1jtrv_92._left_1jtrv_95 {
   order: -1;
 }
-._inline_1yqw7_91._right_1yqw7_97 {
+._inline_1jtrv_92._right_1jtrv_98 {
   order: 9999;
 }
-._fixed_1yqw7_100 {
+._fixed_1jtrv_101 {
   position: fixed;
   top: 0;
   bottom: 0;
   z-index: var(--zindex-drawer);
 }
-._fixed_1yqw7_100._left_1yqw7_94 {
+._fixed_1jtrv_101._left_1jtrv_95 {
   left: 0;
 }
-._fixed_1yqw7_100._right_1yqw7_97 {
+._fixed_1jtrv_101._right_1jtrv_98 {
   right: 0;
 }
-._left_1yqw7_94 ._border_1yqw7_112 {
+._left_1jtrv_95 ._border_1jtrv_113 {
   border-right: 1px solid var(--color-border);
 }
-._right_1yqw7_97 ._border_1yqw7_112 {
+._right_1jtrv_98 ._border_1jtrv_113 {
   border-left: 1px solid var(--color-border);
 }
-._shadow_1yqw7_118 {
+._shadow_1jtrv_119 {
   box-shadow: var(--shadow-layer);
 }
-._drawerContent_1yqw7_121 {
+._drawerContent_1jtrv_122 {
   overflow-x: hidden;
   overflow-y: auto;
   max-height: 100%;
@@ -2008,40 +2009,40 @@ html[data-theme='dark'] {
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._isResizing_1yqw7_133 ._drawerContent_1yqw7_121 {
+._isResizing_1jtrv_134 ._drawerContent_1jtrv_122 {
   transition: none;
 }
 @media print {
-  ._drawerContent_1yqw7_121 {
+  ._drawerContent_1jtrv_122 {
     background: transparent !important;
   }
 }
-._drawerContent_1yqw7_121::-webkit-scrollbar {
+._drawerContent_1jtrv_122::-webkit-scrollbar {
   display: none;
 }
-._toggleButton_1yqw7_144 {
+._toggleButton_1jtrv_145 {
   transition: transform 0.4s;
   display: inline-block;
   transform: rotate(180deg);
   position: absolute;
   z-index: calc(var(--zindex-drawer) + 3);
 }
-._left_1yqw7_94 ._toggleButton_1yqw7_144 {
+._left_1jtrv_95 ._toggleButton_1jtrv_145 {
   right: calc(var(--size) / -2);
 }
-._right_1yqw7_97 ._toggleButton_1yqw7_144 {
+._right_1jtrv_98 ._toggleButton_1jtrv_145 {
   left: calc(var(--size) / -2);
 }
-._toggleButton_1yqw7_144._top_1yqw7_157 {
+._toggleButton_1jtrv_145._top_1jtrv_158 {
   top: var(--padding-y);
 }
-._toggleButton_1yqw7_144._bottom_1yqw7_160 {
+._toggleButton_1jtrv_145._bottom_1jtrv_161 {
   bottom: var(--padding-y);
 }
-._toggleButton_1yqw7_144._toggleButtonOpen_1yqw7_163 {
+._toggleButton_1jtrv_145._toggleButtonOpen_1jtrv_164 {
   transform: rotate(0deg);
 }
-._tabs_1yqw7_166 {
+._tabs_1jtrv_167 {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -2051,16 +2052,16 @@ html[data-theme='dark'] {
   border-left: 1px solid var(--color-border);
   border-right: 1px solid var(--color-border);
 }
-._left_1yqw7_94 ._tabs_1yqw7_166 {
+._left_1jtrv_95 ._tabs_1jtrv_167 {
   right: 0;
 }
-._right_1yqw7_97 ._tabs_1yqw7_166 {
+._right_1jtrv_98 ._tabs_1jtrv_167 {
   left: 0;
 }
-._tabs_1yqw7_166 ._tab_1yqw7_166 {
+._tabs_1jtrv_167 ._tab_1jtrv_167 {
   font-size: var(--size-sm);
-  height: 38px;
-  width: 38px;
+  height: var(--size-drawer-tabs);
+  width: var(--size-drawer-tabs);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -2069,39 +2070,39 @@ html[data-theme='dark'] {
   transition: color 0.3s, background-color 0.3s;
   border: 1px solid var(--color-border-drawer-tab);
 }
-._left_1yqw7_94 ._tabs_1yqw7_166 ._tab_1yqw7_166 {
+._left_1jtrv_95 ._tabs_1jtrv_167 ._tab_1jtrv_167 {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._left_1yqw7_94 ._tabs_1yqw7_166 ._tab_1yqw7_166._active_1yqw7_198 {
+._left_1jtrv_95 ._tabs_1jtrv_167 ._tab_1jtrv_167._active_1jtrv_199 {
   border-left-color: transparent;
 }
-._right_1yqw7_97 ._tabs_1yqw7_166 ._tab_1yqw7_166 {
+._right_1jtrv_98 ._tabs_1jtrv_167 ._tab_1jtrv_167 {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._right_1yqw7_97 ._tabs_1yqw7_166 ._tab_1yqw7_166._active_1yqw7_198 {
+._right_1jtrv_98 ._tabs_1jtrv_167 ._tab_1jtrv_167._active_1jtrv_199 {
   border-right-color: transparent;
 }
-._tabs_1yqw7_166 ._tab_1yqw7_166:not(._active_1yqw7_198) {
+._tabs_1jtrv_167 ._tab_1jtrv_167:not(._active_1jtrv_199) {
   color: var(--color-text-primary);
   background-color: var(--color-background-drawer-tab) !important;
 }
-._tabs_1yqw7_166 ._tab_1yqw7_166:not(._active_1yqw7_198):hover {
+._tabs_1jtrv_167 ._tab_1jtrv_167:not(._active_1jtrv_199):hover {
   color: var(--color-text);
   background-color: var(--color-background-drawer-tab-hover) !important;
 }
-._tabs_1yqw7_166 ._tab_1yqw7_166._active_1yqw7_198 {
+._tabs_1jtrv_167 ._tab_1jtrv_167._active_1jtrv_199 {
   color: var(--color-text);
   border-color: var(--color-border);
 }
-._left_1yqw7_94 ._tabsContent_1yqw7_220 {
-  padding-right: 36px;
+._left_1jtrv_95 ._tabsContent_1jtrv_221 {
+  padding-right: calc(var(--size-drawer-tabs) - 1px);
 }
-._right_1yqw7_97 ._tabsContent_1yqw7_220 {
-  padding-left: 36px;
+._right_1jtrv_98 ._tabsContent_1jtrv_221 {
+  padding-left: calc(var(--size-drawer-tabs) - 1px);
 }
-._resizeHandle_1yqw7_226 {
+._resizeHandle_1jtrv_227 {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -2114,18 +2115,18 @@ html[data-theme='dark'] {
   font-size: var(--font-size-sm);
   transition: all 0.2s;
 }
-._resizeHandle_1yqw7_226:hover {
+._resizeHandle_1jtrv_227:hover {
   background: var(--color-background-drawer-handle-hover);
   color: var(--color-text-primary);
 }
-._resizeHandle_1yqw7_226:active {
+._resizeHandle_1jtrv_227:active {
   background: var(--color-text-primary);
   color: white;
 }
-._left_1yqw7_94 ._resizeHandle_1yqw7_226 {
+._left_1jtrv_95 ._resizeHandle_1jtrv_227 {
   right: 0;
 }
-._right_1yqw7_97 ._resizeHandle_1yqw7_226 {
+._right_1jtrv_98 ._resizeHandle_1jtrv_227 {
   left: 0;
 }
 ._empty_1ytdm_1 {

package/dist/index.js

@@ -14311,30 +14311,30 @@ const dialogShape = propTypes$1.exports.shape({
 Dialog.propTypes = {
   dialog: dialogShape.isRequired
 };
-const inputInTable$a = "_inputInTable_1yqw7_1";
-const inputHover$a = "_inputHover_1yqw7_13";
-const inputFocus$a = "_inputFocus_1yqw7_18";
-const inputError$a = "_inputError_1yqw7_25";
-const inputWarning$a = "_inputWarning_1yqw7_26";
-const inputDisabled$a = "_inputDisabled_1yqw7_61";
-const hideScrollbars$a = "_hideScrollbars_1yqw7_67";
-const inline$2 = "_inline_1yqw7_91";
-const left$2 = "_left_1yqw7_94";
-const right$6 = "_right_1yqw7_97";
-const fixed$1 = "_fixed_1yqw7_100";
-const border$1 = "_border_1yqw7_112";
-const shadow = "_shadow_1yqw7_118";
-const drawerContent = "_drawerContent_1yqw7_121";
-const isResizing = "_isResizing_1yqw7_133";
-const toggleButton = "_toggleButton_1yqw7_144";
-const top = "_top_1yqw7_157";
-const bottom = "_bottom_1yqw7_160";
-const toggleButtonOpen = "_toggleButtonOpen_1yqw7_163";
-const tabs$1 = "_tabs_1yqw7_166";
-const tab$1 = "_tab_1yqw7_166";
-const active$4 = "_active_1yqw7_198";
-const tabsContent = "_tabsContent_1yqw7_220";
-const resizeHandle = "_resizeHandle_1yqw7_226";
+const inputInTable$a = "_inputInTable_1jtrv_1";
+const inputHover$a = "_inputHover_1jtrv_13";
+const inputFocus$a = "_inputFocus_1jtrv_18";
+const inputError$a = "_inputError_1jtrv_25";
+const inputWarning$a = "_inputWarning_1jtrv_26";
+const inputDisabled$a = "_inputDisabled_1jtrv_61";
+const hideScrollbars$a = "_hideScrollbars_1jtrv_67";
+const inline$2 = "_inline_1jtrv_92";
+const left$2 = "_left_1jtrv_95";
+const right$6 = "_right_1jtrv_98";
+const fixed$1 = "_fixed_1jtrv_101";
+const border$1 = "_border_1jtrv_113";
+const shadow = "_shadow_1jtrv_119";
+const drawerContent = "_drawerContent_1jtrv_122";
+const isResizing = "_isResizing_1jtrv_134";
+const toggleButton = "_toggleButton_1jtrv_145";
+const top = "_top_1jtrv_158";
+const bottom = "_bottom_1jtrv_161";
+const toggleButtonOpen = "_toggleButtonOpen_1jtrv_164";
+const tabs$1 = "_tabs_1jtrv_167";
+const tab$1 = "_tab_1jtrv_167";
+const active$4 = "_active_1jtrv_199";
+const tabsContent = "_tabsContent_1jtrv_221";
+const resizeHandle = "_resizeHandle_1jtrv_227";
 const styles$B = {
   inputInTable: inputInTable$a,
   inputHover: inputHover$a,
@@ -16452,7 +16452,7 @@ reactResizable.exports = function() {
 };
 var Resizable = reactResizable.exports.Resizable = Resizable$2.default;
 reactResizable.exports.ResizableBox = ResizableBox$1.default;
-const TABS_WIDTH = 37;
+const TABS_WIDTH = 36 - 1;
 const MIN_OPEN_WIDTH = 240;
 const ResizeHandle = React__default.forwardRef((props, ref2) => {
   const { handleAxis, ...rest } = props;