@itcase/ui 1.0.24 → 1.0.26

package/dist/components/Button.js

@@ -61,6 +61,7 @@ var Button = /*#__PURE__*/React__default.default.forwardRef(function Button(prop
     label = props.label,
     labelTextColor = props.labelTextColor,
     labelTextSize = props.labelTextSize,
+    labelTextWrap = props.labelTextWrap,
     loaderSet = props.loaderSet,
     loaderFill = props.loaderFill,
     loaderItemFill = props.loaderItemFill,
@@ -158,7 +159,8 @@ var Button = /*#__PURE__*/React__default.default.forwardRef(function Button(prop
     className: "button__label",
     size: labelTextSize,
     style: labelStyles,
-    textColor: labelTextColor
+    textColor: labelTextColor,
+    textWrap: labelTextWrap
   }, children || label), iconAfter && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "button__icon_after",
     iconFill: iconAfterFill,

package/dist/components/RadioButton.js

@@ -80,6 +80,10 @@ function RadioButton(props) {
     prefix: 'border-color_',
     propsKey: checked ? 'stateBorderColorChecked' : 'stateBorderColor'
   });
+  var stateBorderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: checked ? 'stateBorderColorHoverChecked' : 'stateBorderColorHover'
+  });
   var stateBorderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled'
@@ -97,7 +101,7 @@ function RadioButton(props) {
     type: "radio",
     onChange: onChange
   }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('radio-button__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass, stateShapeClass, stateBorderWidthClass)
+    className: clsx__default.default('radio-button__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass, stateBorderColorHoverClass, stateShapeClass, stateBorderWidthClass)
   }, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
     className: "radio-button__state-checkmark"
   }, "\xA0")), label && /*#__PURE__*/React__default.default.createElement(index.Text, {

package/dist/components/Select.js

@@ -7558,12 +7558,14 @@ var SelectGroupHeading = function SelectGroupHeading(props) {
   var _props$selectProps = props.selectProps,
     headingFill = _props$selectProps.headingFill,
     headingFillHover = _props$selectProps.headingFillHover,
+    headingTextWeight = _props$selectProps.headingTextWeight,
     headingTextSize = _props$selectProps.headingTextSize,
     headingTextColor = _props$selectProps.headingTextColor;
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.GroupHeading, Object.assign({}, props, {
     className: clsx__default.default('select__menu-group-heading', headingFill, headingFillHover)
   }), /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
     size: headingTextSize,
+    textWeight: headingTextWeight,
     textColor: headingTextColor
   }, props.data.label));
 };
@@ -7590,7 +7592,10 @@ SelectInput.propTypes = {
 };
 
 var SelectMenu = function SelectMenu(props) {
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Menu, props, props.selectProps.fetchingData ? /*#__PURE__*/React__namespace.default.createElement("span", {
+  var elevation = props.selectProps.elevation;
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Menu, Object.assign({}, props, {
+    className: clsx__default.default(elevation && "elevation_" + elevation)
+  }), props.selectProps.fetchingData ? /*#__PURE__*/React__namespace.default.createElement("span", {
     className: "fetching"
   }, "Fetching data...") : /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, props.children));
 };
@@ -7779,6 +7784,7 @@ var SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(function
     noOptionsText = props.noOptionsText,
     openMenuOnClick = props.openMenuOnClick,
     options = props.options,
+    elevation = props.elevation,
     placeholder = props.placeholder,
     set = props.set,
     value = props.value,
@@ -7880,6 +7886,9 @@ var SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(function
   var headingTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'headingTextSize'
   });
+  var headingTextWeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'headingTextWeight'
+  });
   var headingTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'headingTextColor'
   });
@@ -7891,6 +7900,7 @@ var SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(function
     classNamePrefix: "select",
     styles: clearStyle,
     value: value,
+    elevation: elevation,
     isClearable: isClearable,
     openMenuOnClick: openMenuOnClick,
     clearIcon: clearIcon,
@@ -7935,6 +7945,7 @@ var SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(function
     headingFillHover: headingFillHoverClass,
     headingTextSize: headingTextSizeClass,
     headingTextColor: headingTextColorClass,
+    headingTextWeight: headingTextWeightClass,
     multipleItemFill: multipleItemFill,
     multipleItemFillHover: multipleItemFillHover,
     multipleItemTextSize: multipleItemTextSizeClass,

package/dist/css/components/Image/Image.css

@@ -49,11 +49,11 @@
         height: 100%;
         position: relative;
         overflow: hidden;
-        border-radius: 12px;
+        border-radius: var(--image-shape-rounded, 12px);
         & > ^^^&__item {
           width: 100%;
           height: 100%;
-          border-radius: 12px;
+          border-radius: var(--image-shape-rounded, 12px);
         }
       }
     }

package/dist/css/components/Notification/Notification.css

@@ -12,10 +12,17 @@
       width: 100%;
       align-items: flex-end;
       display: flex;
+      gap: 20px;
+      position: relative;
+      top: 20px;
+      right: 40px;
       flex-flow: column nowrap;
     }
   }
 }
+:root {
+  --image-shape-rounded: 6px;
+}
 .notification__item {
   &_set {
     &_float {

package/dist/css/components/RadioButton/RadioButton.css

@@ -4,7 +4,7 @@
   grid-template-rows: auto auto;
   column-gap: 4px;
   &:hover {
-    .radio-button__state {
+    ^&__state {
       border-color: var(--radio-button-state-hover-border);
     }
   }
@@ -18,6 +18,7 @@
     min-width: 16px;
     grid-row-start: span 2;
     align-self: start;
+    margin: 2px 0 0 0;
     ^&__input {
       cursor: pointer;
       appearance: none;

package/dist/css/components/Select/Select.css

@@ -154,18 +154,20 @@
 .select {
   &__menu {
     width: 100%;
-    margin: 0;
+    margin: var(--select-menu-margin, 0);
     border-top: none;
     position: absolute;
     left: 0;
     top: 100%;
     z-index: 100000;
+    border-radius: var(--select-menu-border-radius, 0);
     &-group-heading {
       z-index: 100000;
     }
     &-list {
       overflow-y: scroll;
       max-height: 240px;
+      border-radius: var(--select-menu-border-radius, 0);
       &-item {
         width: 100%;
         &_option {
@@ -259,6 +261,7 @@
 .select {
   &__single-value {
     display: flex;
+    position: absolute;
   }
 }
 
@@ -272,6 +275,9 @@
     align-items: center;
     &--is-multi {
       gap: 8px;
+      & .select__placeholder {
+        position: relative;
+      }
       & .select__input-container {
         display: none;
       }

package/dist/css/components/Select/css/__menu/select__menu.css

@@ -1,18 +1,20 @@
 .select {
   &__menu {
     width: 100%;
-    margin: 0;
+    margin: var(--select-menu-margin, 0);
     border-top: none;
     position: absolute;
     left: 0;
     top: 100%;
     z-index: 100000;
+    border-radius: var(--select-menu-border-radius, 0);
     &-group-heading {
       z-index: 100000;
     }
     &-list {
       overflow-y: scroll;
       max-height: 240px;
+      border-radius: var(--select-menu-border-radius, 0);
       &-item {
         width: 100%;
         &_option {

package/dist/css/components/Select/css/__single-value/select__single-value.css

@@ -1,5 +1,6 @@
 .select {
   &__single-value {
     display: flex;
+    position: absolute;
   }
 }

package/dist/css/components/Select/css/__value-container/select__value-container.css

@@ -8,6 +8,9 @@
     align-items: center;
     &--is-multi {
       gap: 8px;
+      & .select__placeholder {
+        position: relative;
+      }
       & .select__input-container {
         display: none;
       }

package/dist/css/components/Tab/Tab.css

@@ -46,6 +46,7 @@
     justify-content: flex-end;
     &__wrapper {
       display: flex;
+      flex: 1;
       justify-content: center;
       align-items: center;
       gap: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",