@oliasoft-open-source/react-ui-library 4.0.0-beta-19 → 4.0.0-beta-20

package/dist/global.css

@@ -931,22 +931,25 @@ a {
   background: var(--color-warning-500);
   fill: var(--color-warning-500);
 }
-._helpIcon_1uk4t_1 {
-  color: var(--color-text-muted);
+._helpIcon_hd0z2_1 {
+  color: var(--color-text-faint);
   display: inline-flex;
   align-items: center;
 }
-._active_1uk4t_6 {
+._helpIcon_hd0z2_1 :hover {
+  color: var(--color-text-muted);
+}
+._active_hd0z2_9 {
   color: var(--color-text);
 }
-._clickable_1uk4t_9 {
+._clickable_hd0z2_12 {
   cursor: pointer;
 }
-._clickable_1uk4t_9:hover,
-._clickable_1uk4t_9:focus {
+._clickable_hd0z2_12:hover,
+._clickable_hd0z2_12:focus {
   color: var(--color-text-primary-hover);
 }
-._clickable_1uk4t_9:active {
+._clickable_hd0z2_12:active {
   color: var(--color-text-primary-active);
 }
 ._bordered_1p7x7_1 {
@@ -1212,80 +1215,80 @@ a {
   transform-origin: 100% 0%;
   z-index: 3;
 }
-._inputInTable_1qg1u_1 {
+._inputInTable_y9r45_1 {
   background-color: transparent;
   border-radius: inherit !important;
   height: var(--size);
   min-height: 100%;
 }
-._inputInTable_1qg1u_1:not(:hover) {
+._inputInTable_y9r45_1:not(:hover) {
   border-color: transparent;
 }
-._inputInTable_1qg1u_1:not(:focus) {
+._inputInTable_y9r45_1:not(:focus) {
   box-shadow: none;
 }
-._inputHover_1qg1u_13 {
+._inputHover_y9r45_13 {
   position: relative;
   border-color: var(--color-border-hover);
   z-index: 2;
 }
-._inputFocus_1qg1u_18 {
+._inputFocus_y9r45_18 {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputError_1qg1u_25,
-._inputWarning_1qg1u_26 {
+._inputError_y9r45_25,
+._inputWarning_y9r45_26 {
   position: relative;
 }
-._inputError_1qg1u_25 {
+._inputError_y9r45_25 {
   z-index: 2;
   border-color: var(--color-border-error);
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error);
 }
-._inputError_1qg1u_25:hover {
+._inputError_y9r45_25:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._inputError_1qg1u_25:focus {
+._inputError_y9r45_25:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputWarning_1qg1u_26 {
+._inputWarning_y9r45_26 {
   z-index: 1;
   border-color: var(--color-border-warning);
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning);
 }
-._inputWarning_1qg1u_26:hover {
+._inputWarning_y9r45_26:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._inputWarning_1qg1u_26:focus {
+._inputWarning_y9r45_26:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputDisabled_1qg1u_61 {
+._inputDisabled_y9r45_61 {
   pointer-events: none;
   background-color: var(--color-background-disabled);
   color: var(--color-text-muted);
   box-shadow: none;
 }
-._hideScrollbars_1qg1u_67 {
+._hideScrollbars_y9r45_67 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbars_1qg1u_67::-webkit-scrollbar {
+._hideScrollbars_y9r45_67::-webkit-scrollbar {
   display: none;
 }
 :root {
@@ -1314,7 +1317,7 @@ html[data-theme='dark'] {
   --color-border-button: rgba(255, 255, 255, 0.1);
   --color-border-button-hover: rgba(255, 255, 255, 0.15);
 }
-._button_1qg1u_103 {
+._button_y9r45_103 {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -1328,7 +1331,6 @@ html[data-theme='dark'] {
   padding: var(--padding-input);
   text-transform: none;
   text-shadow: none;
-  font-weight: bold;
   line-height: var(--line-height);
   font-style: normal;
   text-align: center;
@@ -1340,229 +1342,229 @@ html[data-theme='dark'] {
   min-height: var(--size);
   box-shadow: var(--shadow-button);
 }
-._button_1qg1u_103:hover {
+._button_y9r45_103:hover {
   background: var(--color-background-button-default-hover);
   border-color: var(--color-border-button-hover);
 }
-._button_1qg1u_103:focus {
+._button_y9r45_103:focus {
   box-shadow: var(--shadow-focus) !important;
 }
-._button_1qg1u_103:active {
+._button_y9r45_103:active {
   background: var(--color-background-button-default-active);
   box-shadow: none;
 }
-._button_1qg1u_103._active_1qg1u_140:not(._green_1qg1u_140):not(._red_1qg1u_140):not(._orange_1qg1u_140) {
+._button_y9r45_103._active_y9r45_139:not(._green_y9r45_139):not(._red_y9r45_139):not(._orange_y9r45_139) {
   border-color: var(--color-border-button-default-active);
   color: var(--color-text-button-default-active);
   position: relative;
   z-index: 2;
 }
-._button_1qg1u_103:hover,
-._button_1qg1u_103:focus,
-._button_1qg1u_103:active {
+._button_y9r45_103:hover,
+._button_y9r45_103:focus,
+._button_y9r45_103:active {
   position: relative;
   z-index: 1;
 }
-._button_1qg1u_103 ._icon_1qg1u_152 {
+._button_y9r45_103 ._icon_y9r45_151 {
   margin: -2px;
   margin-right: var(--spacing-1);
   font-size: 1.25em;
   display: flex;
 }
-._iconOnly_1qg1u_158 {
+._iconOnly_y9r45_157 {
   width: var(--size);
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-._iconOnly_1qg1u_158 ._icon_1qg1u_152 {
+._iconOnly_y9r45_157 ._icon_y9r45_151 {
   margin: 0;
   line-height: 0;
 }
-._basic_1qg1u_168 {
+._basic_y9r45_167 {
   color: var(--color-text-primary);
   background: transparent;
   box-shadow: none !important;
   border: none !important;
 }
-._basic_1qg1u_168._muted_1qg1u_174 {
+._basic_y9r45_167._muted_y9r45_173 {
   color: var(--color-text-muted);
 }
-._basic_1qg1u_168:hover {
+._basic_y9r45_167:hover {
   color: var(--color-text-primary-hover);
   background: rgba(0, 0, 0, 0.05);
 }
-[data-theme='dark'] ._basic_1qg1u_168:hover {
+[data-theme='dark'] ._basic_y9r45_167:hover {
   background: rgba(255, 255, 255, 0.1);
 }
-._basic_1qg1u_168:active,
-._basic_1qg1u_168._active_1qg1u_140 {
+._basic_y9r45_167:active,
+._basic_y9r45_167._active_y9r45_139 {
   color: var(--color-text-primary-active);
   background: rgba(0, 0, 0, 0.1);
 }
-[data-theme='dark'] ._basic_1qg1u_168:active,
-[data-theme='dark'] ._basic_1qg1u_168._active_1qg1u_140 {
+[data-theme='dark'] ._basic_y9r45_167:active,
+[data-theme='dark'] ._basic_y9r45_167._active_y9r45_139 {
   background: rgba(255, 255, 255, 0.2);
 }
-._disabled_1qg1u_193 {
+._disabled_y9r45_192 {
   cursor: default;
   pointer-events: none !important;
   color: var(--color-text-faint) !important;
   box-shadow: none !important;
 }
-._disabled_1qg1u_193:not(._active_1qg1u_140):not(._basic_1qg1u_168) {
+._disabled_y9r45_192:not(._active_y9r45_139):not(._basic_y9r45_167) {
   background: var(--color-background-disabled) !important;
   border: 1px solid var(--color-border) !important;
 }
-._small_1qg1u_203 {
+._small_y9r45_202 {
   font-size: var(--font-size-sm);
   min-height: var(--size-sm);
   padding: var(--padding-input-sm);
 }
-._pill_1qg1u_208,
-._round_1qg1u_209 {
+._pill_y9r45_207,
+._round_y9r45_208 {
   border-radius: 19px;
   display: inline-flex;
   align-items: center;
 }
-._round_1qg1u_209 {
+._round_y9r45_208 {
   padding: 0;
   width: var(--size);
   line-height: 1;
 }
-._round_1qg1u_209._small_1qg1u_203 {
+._round_y9r45_208._small_y9r45_202 {
   width: var(--size-sm);
 }
-._orange_1qg1u_140:not(._basic_1qg1u_168) {
+._orange_y9r45_139:not(._basic_y9r45_167) {
   background-color: var(--color-background-button-primary);
 }
-._orange_1qg1u_140:not(._basic_1qg1u_168):hover {
+._orange_y9r45_139:not(._basic_y9r45_167):hover {
   background-color: var(--color-background-button-primary-hover);
 }
-._orange_1qg1u_140:not(._basic_1qg1u_168):active,
-._orange_1qg1u_140:not(._basic_1qg1u_168)._active_1qg1u_140 {
+._orange_y9r45_139:not(._basic_y9r45_167):active,
+._orange_y9r45_139:not(._basic_y9r45_167)._active_y9r45_139 {
   background-color: var(--color-background-button-primary-active);
 }
-._red_1qg1u_140:not(._basic_1qg1u_168) {
+._red_y9r45_139:not(._basic_y9r45_167) {
   background-color: var(--color-background-button-error);
 }
-._red_1qg1u_140:not(._basic_1qg1u_168):hover {
+._red_y9r45_139:not(._basic_y9r45_167):hover {
   background-color: var(--color-background-button-error-hover);
 }
-._red_1qg1u_140:not(._basic_1qg1u_168):active,
-._red_1qg1u_140:not(._basic_1qg1u_168)._active_1qg1u_140 {
+._red_y9r45_139:not(._basic_y9r45_167):active,
+._red_y9r45_139:not(._basic_y9r45_167)._active_y9r45_139 {
   background-color: var(--color-background-button-error-active);
 }
-._red_1qg1u_140._basic_1qg1u_168 {
+._red_y9r45_139._basic_y9r45_167 {
   color: var(--color-text-error);
 }
-._green_1qg1u_140:not(._basic_1qg1u_168) {
+._green_y9r45_139:not(._basic_y9r45_167) {
   background-color: var(--color-background-button-success);
 }
-._green_1qg1u_140:not(._basic_1qg1u_168):hover {
+._green_y9r45_139:not(._basic_y9r45_167):hover {
   background-color: var(--color-background-button-success-hover);
 }
-._green_1qg1u_140:not(._basic_1qg1u_168):active,
-._green_1qg1u_140:not(._basic_1qg1u_168)._active_1qg1u_140 {
+._green_y9r45_139:not(._basic_y9r45_167):active,
+._green_y9r45_139:not(._basic_y9r45_167)._active_y9r45_139 {
   background-color: var(--color-background-button-success-active);
 }
-._green_1qg1u_140._basic_1qg1u_168 {
+._green_y9r45_139._basic_y9r45_167 {
   color: var(--color-text-success);
 }
-._orange_1qg1u_140:not(._basic_1qg1u_168),
-._red_1qg1u_140:not(._basic_1qg1u_168),
-._green_1qg1u_140:not(._basic_1qg1u_168) {
+._orange_y9r45_139:not(._basic_y9r45_167),
+._red_y9r45_139:not(._basic_y9r45_167),
+._green_y9r45_139:not(._basic_y9r45_167) {
   color: #fff;
 }
-._orange_1qg1u_140:not(._basic_1qg1u_168):hover,
-._red_1qg1u_140:not(._basic_1qg1u_168):hover,
-._green_1qg1u_140:not(._basic_1qg1u_168):hover {
+._orange_y9r45_139:not(._basic_y9r45_167):hover,
+._red_y9r45_139:not(._basic_y9r45_167):hover,
+._green_y9r45_139:not(._basic_y9r45_167):hover {
   color: #fff;
 }
-._orange_1qg1u_140:not(._basic_1qg1u_168):active,
-._red_1qg1u_140:not(._basic_1qg1u_168):active,
-._green_1qg1u_140:not(._basic_1qg1u_168):active,
-._orange_1qg1u_140:not(._basic_1qg1u_168)._active_1qg1u_140,
-._red_1qg1u_140:not(._basic_1qg1u_168)._active_1qg1u_140,
-._green_1qg1u_140:not(._basic_1qg1u_168)._active_1qg1u_140 {
+._orange_y9r45_139:not(._basic_y9r45_167):active,
+._red_y9r45_139:not(._basic_y9r45_167):active,
+._green_y9r45_139:not(._basic_y9r45_167):active,
+._orange_y9r45_139:not(._basic_y9r45_167)._active_y9r45_139,
+._red_y9r45_139:not(._basic_y9r45_167)._active_y9r45_139,
+._green_y9r45_139:not(._basic_y9r45_167)._active_y9r45_139 {
   color: #fff;
 }
-._error_1qg1u_276 {
+._error_y9r45_275 {
   position: relative;
   z-index: 2;
   border-color: var(--color-border-error);
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error);
 }
-._error_1qg1u_276:hover {
+._error_y9r45_275:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._error_1qg1u_276:focus {
+._error_y9r45_275:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._warning_1qg1u_293 {
+._warning_y9r45_292 {
   position: relative;
   z-index: 1;
   border-color: var(--color-border-warning);
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning);
 }
-._warning_1qg1u_293:hover {
+._warning_y9r45_292:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._warning_1qg1u_293:focus {
+._warning_y9r45_292:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inverted_1qg1u_310 {
+._inverted_y9r45_309 {
   background-color: transparent;
   border-color: var(--color-text);
   box-shadow: none;
 }
-._inverted_1qg1u_310:hover,
-._inverted_1qg1u_310:active {
+._inverted_y9r45_309:hover,
+._inverted_y9r45_309:active {
   box-shadow: none;
 }
-._inverted_1qg1u_310._orange_1qg1u_140 {
+._inverted_y9r45_309._orange_y9r45_139 {
   color: var(--color-background-button-primary);
   border-color: var(--color-background-button-primary);
 }
-._inverted_1qg1u_310._red_1qg1u_140 {
+._inverted_y9r45_309._red_y9r45_139 {
   color: var(--color-background-button-error);
   border-color: var(--color-background-button-error);
 }
-._inverted_1qg1u_310._green_1qg1u_140 {
+._inverted_y9r45_309._green_y9r45_139 {
   color: var(--color-background-button-success);
   border-color: var(--color-background-button-success);
 }
-._inverted_1qg1u_310._orange_1qg1u_140:hover,
-._inverted_1qg1u_310._red_1qg1u_140:hover,
-._inverted_1qg1u_310._green_1qg1u_140:hover,
-._inverted_1qg1u_310._orange_1qg1u_140:active,
-._inverted_1qg1u_310._red_1qg1u_140:active,
-._inverted_1qg1u_310._green_1qg1u_140:active {
+._inverted_y9r45_309._orange_y9r45_139:hover,
+._inverted_y9r45_309._red_y9r45_139:hover,
+._inverted_y9r45_309._green_y9r45_139:hover,
+._inverted_y9r45_309._orange_y9r45_139:active,
+._inverted_y9r45_309._red_y9r45_139:active,
+._inverted_y9r45_309._green_y9r45_139:active {
   color: white;
   box-shadow: none;
 }
-._groupOrderFirst_1qg1u_340,
-._groupOrderMiddle_1qg1u_341,
-._groupOrderLast_1qg1u_342 {
+._groupOrderFirst_y9r45_339,
+._groupOrderMiddle_y9r45_340,
+._groupOrderLast_y9r45_341 {
   margin-right: 0;
 }
-._groupOrderFirst_1qg1u_340,
-._groupOrderMiddle_1qg1u_341 {
+._groupOrderFirst_y9r45_339,
+._groupOrderMiddle_y9r45_340 {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
 }
-._groupOrderLast_1qg1u_342,
-._groupOrderMiddle_1qg1u_341 {
+._groupOrderLast_y9r45_341,
+._groupOrderMiddle_y9r45_340 {
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
 }
@@ -1822,7 +1824,7 @@ html[data-theme='dark'] {
 ._link_11ofj_25:active {
   color: var(--color-text-primary-active);
 }
-._heading_ed8hr_1 {
+._heading_16g9g_1 {
   color: var(--color-text);
   line-height: var(--size-sm);
   font-weight: bold;
@@ -1831,21 +1833,21 @@ html[data-theme='dark'] {
   user-select: none;
   padding: 0;
 }
-._heading_ed8hr_1._top_ed8hr_10 {
+._heading_16g9g_1._top_16g9g_10 {
   font-size: var(--font-size-xl);
-  margin-bottom: var(--spacing-4);
+  margin-bottom: var(--padding-y);
 }
-._heading_ed8hr_1:not(._top_ed8hr_10) {
+._heading_16g9g_1:not(._top_16g9g_10) {
   font-size: var(--font-size-sm);
   color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
-._icons_ed8hr_20 {
+._icons_16g9g_20 {
   display: inline-flex;
   font-size: 1.25em;
 }
-._icons_ed8hr_20 > * {
+._icons_16g9g_20 > * {
   margin-left: var(--spacing-1);
 }
 ._dialog_122co_1 {

package/dist/index.js

@@ -5570,9 +5570,9 @@ Tooltip.propTypes = {
   flex: propTypes$1.exports.string,
   forceOpen: propTypes$1.exports.bool
 };
-const helpIcon = "_helpIcon_1uk4t_1";
-const active$9 = "_active_1uk4t_6";
-const clickable = "_clickable_1uk4t_9";
+const helpIcon = "_helpIcon_hd0z2_1";
+const active$9 = "_active_hd0z2_9";
+const clickable = "_clickable_hd0z2_12";
 const styles$O = {
   helpIcon,
   active: active$9,
@@ -11619,32 +11619,32 @@ Badge.propTypes = {
   margin: propTypes$1.exports.string,
   small: propTypes$1.exports.bool
 };
-const inputInTable$b = "_inputInTable_1qg1u_1";
-const inputHover$b = "_inputHover_1qg1u_13";
-const inputFocus$b = "_inputFocus_1qg1u_18";
-const inputError$b = "_inputError_1qg1u_25";
-const inputWarning$b = "_inputWarning_1qg1u_26";
-const inputDisabled$b = "_inputDisabled_1qg1u_61";
-const hideScrollbars$b = "_hideScrollbars_1qg1u_67";
-const button$3 = "_button_1qg1u_103";
-const active$7 = "_active_1qg1u_140";
-const green$1 = "_green_1qg1u_140";
-const red$1 = "_red_1qg1u_140";
-const orange$1 = "_orange_1qg1u_140";
-const icon$4 = "_icon_1qg1u_152";
-const iconOnly = "_iconOnly_1qg1u_158";
-const basic = "_basic_1qg1u_168";
-const muted$2 = "_muted_1qg1u_174";
-const disabled$7 = "_disabled_1qg1u_193";
-const small$c = "_small_1qg1u_203";
-const pill = "_pill_1qg1u_208";
-const round = "_round_1qg1u_209";
-const error$8 = "_error_1qg1u_276";
-const warning$c = "_warning_1qg1u_293";
-const inverted$1 = "_inverted_1qg1u_310";
-const groupOrderFirst$4 = "_groupOrderFirst_1qg1u_340";
-const groupOrderMiddle$4 = "_groupOrderMiddle_1qg1u_341";
-const groupOrderLast$4 = "_groupOrderLast_1qg1u_342";
+const inputInTable$b = "_inputInTable_y9r45_1";
+const inputHover$b = "_inputHover_y9r45_13";
+const inputFocus$b = "_inputFocus_y9r45_18";
+const inputError$b = "_inputError_y9r45_25";
+const inputWarning$b = "_inputWarning_y9r45_26";
+const inputDisabled$b = "_inputDisabled_y9r45_61";
+const hideScrollbars$b = "_hideScrollbars_y9r45_67";
+const button$3 = "_button_y9r45_103";
+const active$7 = "_active_y9r45_139";
+const green$1 = "_green_y9r45_139";
+const red$1 = "_red_y9r45_139";
+const orange$1 = "_orange_y9r45_139";
+const icon$4 = "_icon_y9r45_151";
+const iconOnly = "_iconOnly_y9r45_157";
+const basic = "_basic_y9r45_167";
+const muted$2 = "_muted_y9r45_173";
+const disabled$7 = "_disabled_y9r45_192";
+const small$c = "_small_y9r45_202";
+const pill = "_pill_y9r45_207";
+const round = "_round_y9r45_208";
+const error$8 = "_error_y9r45_275";
+const warning$c = "_warning_y9r45_292";
+const inverted$1 = "_inverted_y9r45_309";
+const groupOrderFirst$4 = "_groupOrderFirst_y9r45_339";
+const groupOrderMiddle$4 = "_groupOrderMiddle_y9r45_340";
+const groupOrderLast$4 = "_groupOrderLast_y9r45_341";
 const buttonStyles = {
   inputInTable: inputInTable$b,
   inputHover: inputHover$b,
@@ -14111,9 +14111,9 @@ Divider.propTypes = {
   color: propTypes$1.exports.string,
   align: propTypes$1.exports.string
 };
-const heading$4 = "_heading_ed8hr_1";
-const top$1 = "_top_ed8hr_10";
-const icons$2 = "_icons_ed8hr_20";
+const heading$4 = "_heading_16g9g_1";
+const top$1 = "_top_16g9g_10";
+const icons$2 = "_icons_16g9g_20";
 const styles$D = {
   heading: heading$4,
   top: top$1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/react-ui-library",
-  "version": "4.0.0-beta-19",
+  "version": "4.0.0-beta-20",
   "description": "Reusable UI components for React projects",
   "homepage": "https://oliasoft-open-source.gitlab.io/react-ui-library",
   "bugs": {